:root{
  --bg1:#fff1f2; --bg2:#f0f9ff; --bg3:#eef2ff;
  --ink:#0f172a; --ink-2:#334155; --ink-3:#64748b;
  --brand:#0369a1; --brand-2:#0ea5e9;
  --card:#ffffff; --border:#e2e8f0;
  --shadow: 0 12px 24px rgba(2, 6, 23, 0.06), 0 2px 8px rgba(2, 6, 23, 0.04);
  --radius: 16px; --focus:#7dd3fc;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji"; color:var(--ink); background:#fff}
a{color:inherit;text-decoration:none}
.skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip:focus{position:fixed;left:16px;top:12px;width:auto;height:auto;padding:8px 12px;background:#fff;border:2px solid var(--focus);border-radius:10px;z-index:50}
.wrap{max-width:1120px;margin:0 auto;padding-left:72px;padding-right:24px}
@media (min-width:768px){.wrap{padding-left:96px;padding-right:32px}}
@media (min-width:1280px){.wrap{padding-left:120px;padding-right:40px}}
.topbar{position:sticky;top:0;z-index:10;background:rgba(255,255,255,0.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.topbar .inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.brand .logo{width:36px;height:36px;border-radius:14px;background:#e0f2fe;display:grid;place-items:center}
.brand .logo svg{width:20px;height:20px;fill:var(--brand)}
nav[aria-label]{display:flex;align-items:center;gap:4px}
nav a{color:var(--ink-2);margin:0 8px;font-size:14px;border-radius:10px;padding:6px 8px}
nav a:hover, nav a:focus-visible{color:var(--ink);outline:2px solid transparent;background:#f1f5f9}
.cta{display:inline-block;border:1px solid var(--border);padding:8px 12px;border-radius:10px}
.cta:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--bg1),var(--bg2),var(--bg3));}
.hero .inner{padding:56px 0;text-align:center}
h1{font-size:clamp(28px,4.5vw,44px);line-height:1.1;margin:0}
.lead{font-size:clamp(16px,2.4vw,20px);max-width:72ch;margin:10px auto 0;color:var(--ink-2)}
.ctas{margin-top:18px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-block;background:var(--brand);color:#fff;padding:10px 14px;border-radius:12px;font-weight:600}
.btn:hover,.btn:focus-visible{background:#055983;outline:2px solid var(--focus);outline-offset:2px}
.btn.ghost{background:transparent;color:var(--brand);border:1px solid var(--brand)}
.btn.ghost:hover{background:#e0f2fe}

.hero-shots{display:grid;grid-template-columns:1fr 1fr;gap:16px;justify-items:center;align-items:end;margin-top:28px}
.hero-shots img{width:min(260px,42vw);height:auto;border:1px solid var(--border);border-radius:22px;box-shadow:var(--shadow)}

main section{padding:36px 0}
h2{font-size:clamp(22px,3.2vw,30px);margin:6px 0 18px}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.card .body{padding:18px}
.grid.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.grid.two{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:900px){ .grid.two{grid-template-columns:1fr 1fr} }

.shotrail{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:6px}
.shotrail .viewer{margin:0;padding:0;display:grid;justify-items:center;gap:10px}
.shotrail .viewer img{width:min(360px,84vw);height:auto;border:1px solid var(--border);border-radius:22px;box-shadow:var(--shadow)}
.shotrail .nav{border:1px solid var(--border);background:#fff;border-radius:12px;padding:12px 14px;font-size:24px;line-height:1;cursor:pointer}
.shotrail .nav:hover,.shotrail .nav:focus-visible{background:#f8fafc;outline:2px solid var(--focus);outline-offset:2px}
#shotcap{color:var(--ink-2);font-size:14px}

details.card summary{cursor:pointer;padding:14px 18px;font-weight:600}
details.card .body{border-top:1px solid var(--border)}
.small{font-size:15px;line-height:1.7;color:var(--ink-2)}
.tiny{font-size:12px}
.muted{color:var(--ink-3)}

footer{border-top:1px solid var(--border);background:rgba(255,255,255,0.7);backdrop-filter:blur(6px)}
footer .inner{display:grid;gap:12px;padding:24px 0}
@media (min-width:768px){footer .inner{grid-template-columns:1fr 1fr 1fr;align-items:center}}
.center{text-align:center}
.right{text-align:right}


/* When header is open on phones */
.header-open nav[aria-label="Primary"] {
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}


/* Ensure the CTA stays visible on small screens */
.topbar .cta {
margin-left: auto; /* push to right */
min-height: 44px; /* touch target */
}


/* Hero tweaks */
.hero h1 {
line-height: 1.15;
font-size: clamp(1.6rem, 3.5vw + .6rem, 2.4rem);
}
.hero .lead { max-width: 60ch; }
.hero .hero-shots { display: grid; gap: .75rem; }
.hero .hero-shots img { border-radius: .75rem; width: min(100%, 28rem); }
@media (min-width: 1024px) {
.hero .hero-shots { grid-auto-flow: column; align-items: start; }
}


/* Features grid collapses to 1 col on phones */
.grid.features { display: grid; gap: .75rem; }
.grid.features > * { min-width: 0; }
@media (min-width: 640px) { .grid.features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid.features { grid-template-columns: repeat(3, minmax(0, 1fr)); } }


/* Two-up grid collapses */
.grid.two { display: grid; gap: .75rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .grid.two { grid-template-columns: 1fr 1fr; } }


/* Cards: increase padding on wide, keep compact on phones */
.card .body { padding: clamp(.9rem, 1vw + .6rem, 1.25rem); }


/* Screenshot rail: let it scroll horizontally on mobile */
.shotrail {
overflow: hidden;
}
.shotrail .viewer {
margin: 0;
display: grid;
justify-items: center;
}
.shotrail .nav { min-width: 44px; min-height: 44px; }
@media (max-width: 639px) {
.shotrail { overflow-x: auto; scroll-snap-type: x mandatory; display: grid; grid-auto-flow: column; align-items: center; gap: .5rem; }
.shotrail .viewer { scroll-snap-align: center; }
}


/* Footer: stack and center on phones */
footer .wrap.inner {
display: grid;
grid-template-columns: 1fr;
gap: .5rem;
align-items: center;
text-align: center;
}
@media (min-width: 720px) {
footer .wrap.inner {
grid-template-columns: 1fr 1fr 1fr;
text-align: initial;
}
footer .wrap.inner .center { justify-self: center; }
footer .wrap.inner .right { justify-self: end; }
}


/* Accessibility niceties */
.skip:focus { outline: 2px solid #0369a1; }
nav a, .btn, .cta, .nav { min-height: 44px; display: inline-flex; align-items: center; }


/* Reduce motion when user prefers */
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; transition: none !important; }
}