/* ---------------------------------------------------------------- type
   A modern system stack rather than a web font. Segoe UI Variable is the
   current Windows face and San Francisco the Apple one; both are smoother
   than the old Segoe UI and neither costs a network round trip, which
   matters for a page whose whole promise is that it works offline. */
:root{
  --font: "Segoe UI Variable Text","SF Pro Text",-apple-system,BlinkMacSystemFont,
          "Segoe UI",Inter,system-ui,sans-serif;
  --font-display: "Segoe UI Variable Display","SF Pro Display",-apple-system,
          BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;

  /* Bright, watery, high contrast. */
  --page:    #FFFFFF;
  --wash:    #F2F8FC;
  --wash-2:  #E6F3FA;
  --line:    #DCE8F0;
  --ink:     #0E2230;
  --ink-2:   #47657A;
  --ink-3:   #7A93A6;

  --sea:     #0090D4;
  --sea-dk:  #0071AB;
  --sea-pale:#E1F2FB;
  --sun:     #FF7A45;
  --go:      #12A150;

  --r:       14px;
  --shadow:  0 1px 2px rgba(14,34,48,.05), 0 8px 24px rgba(14,34,48,.07);
  --shadow-lg: 0 2px 4px rgba(14,34,48,.05), 0 20px 50px rgba(14,34,48,.12);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--page); color:var(--ink);
  font-family:var(--font); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%; display:block}
a{color:var(--sea-dk); text-decoration:none}
a:hover{text-decoration:underline}

h1,h2,h3{font-family:var(--font-display); line-height:1.15; letter-spacing:-.02em; margin:0}
h1{font-size:clamp(2.2rem,5.5vw,3.6rem); font-weight:700}
h2{font-size:clamp(1.5rem,3vw,2.1rem); font-weight:650; margin-bottom:.5rem}
h3{font-size:1.12rem; font-weight:650}
p{margin:0 0 1rem}
.lede{font-size:clamp(1.05rem,2vw,1.3rem); color:var(--ink-2); line-height:1.55}
.dim{color:var(--ink-2)}
.small{font-size:.92rem; color:var(--ink-3)}

.wrap{max-width:1080px; margin:0 auto; padding:0 24px}
section{padding:64px 0; border-top:1px solid var(--line)}
section:first-child{border-top:none}

/* ---------------------------------------------------------------- chrome */
.masthead{
  position:sticky; top:0; z-index:20;
  background:rgba(255,255,255,.86); backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.masthead .wrap{display:flex; align-items:center; gap:24px; height:64px}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:1.06rem; color:var(--ink)}
.brand:hover{text-decoration:none}
.mark{
  width:28px; height:28px; border-radius:9px; flex:0 0 auto;
  background:linear-gradient(150deg,var(--sea) 0%,#31C0EE 100%);
  display:grid; place-items:center; color:#fff; font-size:15px;
}
nav.links{display:flex; gap:4px; margin-left:auto; flex-wrap:wrap}
nav.links a{
  padding:8px 13px; border-radius:9px; color:var(--ink-2);
  font-size:.95rem; font-weight:500;
}
nav.links a:hover{background:var(--wash); color:var(--ink); text-decoration:none}
nav.links a.on{background:var(--sea-pale); color:var(--sea-dk); font-weight:600}

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  padding:13px 24px; border-radius:11px; border:1px solid transparent;
  font:inherit; font-weight:600; font-size:1rem; cursor:pointer;
}
.btn-go{background:var(--sea); color:#fff; box-shadow:0 1px 2px rgba(0,144,212,.4)}
.btn-go:hover{background:var(--sea-dk); text-decoration:none; color:#fff}
.btn-quiet{background:#fff; color:var(--ink); border-color:var(--line)}
.btn-quiet:hover{background:var(--wash); text-decoration:none; color:var(--ink)}
.btn-row{display:flex; gap:12px; flex-wrap:wrap; align-items:center}

/* ---------------------------------------------------------------- hero */
.hero{
  padding:76px 0 56px;
  background:
    radial-gradient(1100px 460px at 12% -12%, var(--wash-2) 0%, rgba(230,243,250,0) 62%),
    radial-gradient(900px 420px at 92% 4%, #FFF0E9 0%, rgba(255,240,233,0) 58%);
}
.hero h1{max-width:15ch}
.hero .lede{max-width:46ch; margin-top:1rem}
.hero .btn-row{margin-top:1.75rem}
.hero-split{display:grid; grid-template-columns:1.15fr .85fr; gap:52px; align-items:center}
.hero-shot{margin:0; justify-self:end}
.hero-shot img{
  width:100%; max-width:390px; height:auto; border-radius:16px;
  box-shadow:var(--shadow-lg);
}
@media (max-width:860px){
  .hero-split{grid-template-columns:1fr; gap:36px}
  .hero-shot{justify-self:start}
  .hero-shot img{max-width:340px}
}

/* ---------------------------------------------------------------- shots */
.shots{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:20px}
.shot{
  background:var(--wash); border:1px solid var(--line); border-radius:var(--r);
  padding:14px; box-shadow:var(--shadow);
}
.shot img{border-radius:9px; width:100%; height:auto}
.shot figcaption{margin-top:11px; font-size:.9rem; color:var(--ink-2); line-height:1.45}
.shot figcaption b{display:block; color:var(--ink); font-weight:650; font-size:.96rem; margin-bottom:2px}
.shot-lead{max-width:420px; margin:0 auto}

/* ---------------------------------------------------------------- cards */
.grid{display:grid; gap:20px}
.g3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:24px; box-shadow:var(--shadow);
}
.card h3{margin-bottom:.4rem}
.card p:last-child{margin-bottom:0}
.step{display:flex; gap:16px; align-items:flex-start}
.num{
  flex:0 0 auto; width:34px; height:34px; border-radius:10px;
  background:var(--sea-pale); color:var(--sea-dk);
  display:grid; place-items:center; font-weight:700; font-size:1rem;
}

/* ---------------------------------------------------------------- pricing */
.tiers{display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.tier{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:26px; display:flex; flex-direction:column; box-shadow:var(--shadow);
}
.tier.pick{border-color:var(--sea); box-shadow:var(--shadow-lg); position:relative}
.tier.pick::after{
  content:"Most popular"; position:absolute; top:-11px; left:26px;
  background:var(--sea); color:#fff; font-size:.75rem; font-weight:700;
  letter-spacing:.03em; padding:3px 10px; border-radius:99px;
}
.price{font-family:var(--font-display); font-size:2.3rem; font-weight:700; letter-spacing:-.03em}
.price span{font-size:.95rem; font-weight:500; color:var(--ink-3); letter-spacing:0}
.tier ul{list-style:none; margin:18px 0 22px; padding:0; flex:1}
.tier li{padding:6px 0 6px 26px; position:relative; color:var(--ink-2); font-size:.97rem}
.tier li::before{
  content:"\2713"; position:absolute; left:0; top:6px; color:var(--go); font-weight:700;
}
.tier li.no{color:var(--ink-3)}
.tier li.no::before{content:"\2014"; color:var(--ink-3)}

/* Status messages for the checkout and download buttons. The router toggles a .shown
   class, so the hidden state has to live in CSS: an inline display:none would win over
   the class and the message would never appear, and without a rule at all hide() could
   never put it away again. Carried over from the original stylesheet, which had both. */
.status{
  display:none; margin-top:18px; padding:14px 18px; border-radius:10px;
  background:var(--wash); border:1px solid var(--line); border-left:3px solid var(--sea);
}
.status.shown{display:block}
.status strong{color:var(--ink)}
.status p:last-child{margin-bottom:0}

/* ---------------------------------------------------------------- bits */
.note{
  background:var(--wash); border:1px solid var(--line);
  border-left:3px solid var(--sun); border-radius:10px; padding:16px 20px;
}
.note p:last-child{margin-bottom:0}
.faq{border-top:1px solid var(--line); padding:20px 0}
.faq:last-of-type{border-bottom:1px solid var(--line)}
.faq h3{margin-bottom:.3rem}
.faq p{margin-bottom:0; color:var(--ink-2)}
footer.wrap{padding:44px 24px 60px; color:var(--ink-3); font-size:.92rem}
footer .row{display:flex; gap:20px; flex-wrap:wrap; align-items:center}
footer a{color:var(--ink-2)}

/* ------------------------------------------------- checkout and legal pages
   The stylesheet was rewritten while the checkout view and the terms, privacy and
   refund pages were kept verbatim, and those use their own class vocabulary. Without
   these rules 21 classes had no definition at all: the order summary, the whole
   definition-list layout of the legal pages (.lane appears 21 times), the form fields
   and the pay button were unstyled. Rebuilt here against the new tokens rather than
   copied, since the originals referenced palette variables that no longer exist. */
.eyebrow{
  font-family:var(--font-display); font-size:.76rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--sea-dk);
}
.sec-head{display:flex; flex-direction:column; gap:12px; margin-bottom:30px}
.fine{font-size:.86rem; color:var(--ink-3); max-width:74ch}

.checkout-grid{display:grid; grid-template-columns:1fr 340px; gap:28px; align-items:start}
@media (max-width:860px){ .checkout-grid{grid-template-columns:1fr} }

.field{display:grid; gap:7px; margin-bottom:18px}
.field label{font-size:.86rem; font-weight:600; color:var(--ink-2)}
.field input,.field select{
  font:inherit; font-size:1rem; color:var(--ink); background:#fff;
  border:1px solid var(--line); border-radius:10px; padding:12px 14px; width:100%;
}
.field input:focus,.field select:focus{outline:2px solid var(--sea); outline-offset:1px; border-color:var(--sea)}

/* The kept markup calls these btn-primary/btn-ghost; the new sheet calls them
   btn-go/btn-quiet. Aliased rather than renamed, so the verbatim block stays verbatim. */
.btn-primary{background:var(--sea); color:#fff; box-shadow:0 1px 2px rgba(0,144,212,.4)}
.btn-primary:hover{background:var(--sea-dk); color:#fff; text-decoration:none}
.btn-ghost{background:#fff; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{background:var(--wash); text-decoration:none}
.btn-block{width:100%}

.summary{position:sticky; top:84px; background:#fff; border:1px solid var(--line);
         border-radius:var(--r); padding:22px; box-shadow:var(--shadow)}
.summary-row{display:flex; justify-content:space-between; gap:16px; padding:11px 0; font-size:.97rem}
.summary-row + .summary-row{border-top:1px solid var(--line)}
.amt{font-variant-numeric:tabular-nums}
.summary-total{
  font-family:var(--font-display); font-weight:700; font-size:1.05rem;
  border-top:1px solid var(--line); padding-top:14px; margin-top:4px;
}

.demo-banner{
  display:grid; grid-template-columns:auto 1fr; gap:13px; align-items:start;
  padding:16px 18px; border:1px dashed var(--sun); border-radius:10px;
  background:#FFF4EF; margin-bottom:30px;
}
.demo-banner strong{display:block; color:var(--ink)}
.stripe-slot{
  border:1px dashed var(--line); border-radius:10px; padding:20px; background:var(--wash);
  display:grid; gap:10px; justify-items:center; text-align:center;
}
.stripe-slot p{max-width:46ch; margin:0}
.lock{color:var(--sea-dk)}

.rules{display:grid; gap:14px; margin-top:8px; padding:0; list-style:none}
.rules li{
  display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start;
  padding:16px 18px; background:var(--wash); border-left:3px solid var(--sea);
  border-radius:10px; color:var(--ink-2);
}
.rules svg{flex:none; margin-top:3px}
.steps-inline{display:grid; gap:12px; margin:0; padding-left:22px}
.steps-inline li{color:var(--ink-2)}
.steps-inline b{color:var(--ink); font-weight:650}

/* Legal pages: a term on the left, its explanation on the right. */
.lanes{display:grid}
.lane{
  display:grid; grid-template-columns:170px 1fr; gap:8px 28px; padding:20px 0;
  border-top:1px solid var(--line); align-items:start;
}
.lane:last-child{border-bottom:1px solid var(--line)}
.lane dt{font-weight:650; color:var(--sea-dk); font-size:.95rem}
.lane dd{margin:0; color:var(--ink-2)}
@media (max-width:640px){ .lane{grid-template-columns:1fr; gap:4px} }

.table-scroll{overflow-x:auto}
.specs{width:100%; border-collapse:collapse; font-size:.95rem}
.specs th,.specs td{text-align:left; padding:13px 16px 13px 0; vertical-align:top}
.specs tr + tr th,.specs tr + tr td{border-top:1px solid var(--line)}
.specs th{font-weight:650; color:var(--ink-2); width:210px}
.specs td{color:var(--ink-2)}
.specs code{
  background:var(--wash); border:1px solid var(--line); border-radius:5px;
  padding:1px 5px; font-size:.88em;
}

.view{display:none}
.view.active{display:block}
.center{text-align:center}
.center .lede{margin-left:auto; margin-right:auto}
.stack-lg > * + *{margin-top:44px}

@media (max-width:640px){
  body{font-size:16px}
  section{padding:48px 0}
  .masthead .wrap{height:auto; padding-top:10px; padding-bottom:10px; flex-wrap:wrap; gap:8px}
  nav.links{margin-left:0; width:100%}
}
/* ---- added by scripts/build-site.ps1 -------------------------------------
   The first heading of each page is promoted from h2 to h1 so the document has
   exactly one top-level heading. This keeps it looking like the h2 it was.      */
.sec-head h1 { font-size: clamp(26px, 4vw, 38px); line-height: 1.05; }