/* Shared styling for the marketing pages beyond the homepage.
   Same tokens as index.html so the pages read as one site. When the Next.js
   app lands this becomes the design system and index.html stops carrying its
   own copy. */
:root{
  --brand:#1263E0; --brand-dark:#0D4FB8; --brand-soft:#E7F0FE; --brand-mid:#B9D4FB;
  --amber:#F59E0B; --amber-soft:#FDEED2;
  --mint:#15A34A; --mint-soft:#DCF5E5;
  --rose:#E0574F; --rose-soft:#FCE7E5;
  --ink:#111A2B; --ink-2:#48566E; --ink-3:#7B8AA3;
  --white:#FFFFFF; --tint:#F3F7FD; --tint-2:#E5EEFB;
  --line:#DCE6F3; --line-2:#C2D3EA;
  --shadow-sm:0 1px 2px rgba(17,26,43,.05), 0 2px 8px -2px rgba(17,26,43,.08);
  --shadow-md:0 2px 6px rgba(17,26,43,.07), 0 14px 34px -14px rgba(17,26,43,.20);
  --r:14px; --r-lg:20px; --r-xl:28px; --pill:999px;
  --display:ui-rounded,"SF Pro Rounded","Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,sans-serif;
  --body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root{
    --brand:#5FA8FF; --brand-dark:#8AC0FF; --brand-soft:#0D2547; --brand-mid:#153A66;
    --amber:#FBBF24; --amber-soft:#3A2C0A; --mint:#4ADE80; --mint-soft:#0F3320;
    --rose:#FB7185; --rose-soft:#3B1620;
    --ink:#EAF1FA; --ink-2:#A8BAD1; --ink-3:#7A8CA5;
    --white:#0E1626; --tint:#090F1C; --tint-2:#16233A;
    --line:#1E2E47; --line-2:#2B4160;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow-md:0 2px 6px rgba(0,0,0,.4), 0 16px 40px -16px rgba(0,0,0,.75);
  }
}
:root[data-theme="dark"]{
  --brand:#5FA8FF; --brand-dark:#8AC0FF; --brand-soft:#0D2547; --brand-mid:#153A66;
  --amber:#FBBF24; --amber-soft:#3A2C0A; --mint:#4ADE80; --mint-soft:#0F3320;
  --rose:#FB7185; --rose-soft:#3B1620;
  --ink:#EAF1FA; --ink-2:#A8BAD1; --ink-3:#7A8CA5;
  --white:#0E1626; --tint:#090F1C; --tint-2:#16233A;
  --line:#1E2E47; --line-2:#2B4160;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 2px 6px rgba(0,0,0,.4), 0 16px 40px -16px rgba(0,0,0,.75);
}
:root[data-theme="light"]{
  --brand:#1263E0; --brand-dark:#0D4FB8; --brand-soft:#E7F0FE; --brand-mid:#B9D4FB;
  --amber:#F59E0B; --amber-soft:#FDEED2; --mint:#15A34A; --mint-soft:#DCF5E5;
  --rose:#E0574F; --rose-soft:#FCE7E5;
  --ink:#111A2B; --ink-2:#48566E; --ink-3:#7B8AA3;
  --white:#FFFFFF; --tint:#F3F7FD; --tint-2:#E5EEFB;
  --line:#DCE6F3; --line-2:#C2D3EA;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--body);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5{font-family:var(--display);font-weight:800;letter-spacing:-.028em;margin:0;text-wrap:balance}
p{margin:0}
a{color:inherit}
.shell{max-width:1180px;margin:0 auto;padding:0 24px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--display);font-weight:800;font-size:1rem;padding:14px 30px;
  border-radius:var(--pill);border:none;text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background .14s ease, transform .14s ease, box-shadow .14s ease}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-dark);transform:translateY(-1px);box-shadow:var(--shadow-md)}
@media (prefers-color-scheme:dark){ .btn-primary{color:#0E1626} }
:root[data-theme="dark"] .btn-primary{color:#0E1626}
:root[data-theme="light"] .btn-primary{color:#fff}
.btn-outline{background:transparent;color:var(--brand);border:2px solid var(--line-2)}
.btn-outline:hover{border-color:var(--brand);background:var(--brand-soft)}
.btn-sm{padding:10px 22px;font-size:.94rem}
.btn-lg{padding:17px 40px;font-size:1.08rem}
.btn-block{width:100%}
.btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.textlink{color:var(--brand);font-weight:700;text-decoration:none;font-size:.97rem}
.textlink:hover{text-decoration:underline}

.nav{position:sticky;top:0;z-index:60;background:var(--white);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:30px;height:66px}
/* nowrap and flex:none are the actual fix. Without them the wordmark broke
   across three lines on a narrow phone and the logo grew taller than the 66px
   nav, spilling out of the bar. */
.logo{display:flex;align-items:center;gap:9px;text-decoration:none;font-family:var(--display);
  font-weight:800;font-size:1.16rem;letter-spacing:-.03em;color:var(--brand);
  white-space:nowrap;flex:none}
.logo-mark{display:flex;align-items:flex-end;gap:2.5px;height:20px;flex:none}
.logo-mark i{width:3.5px;border-radius:2px;background:var(--brand);display:block}
/* Below this the nav cannot hold the wordmark, the Log in link and the call
   to action at once. The mark still identifies the site and still links home,
   and the footer keeps its full wordmark either way. */
@media (max-width:400px){
  .nav .logo-text{display:none}
  .nav-in{gap:14px}
  .nav-right{gap:12px}
}
.nav-links{display:flex;gap:26px;align-items:center}
.nav-links a{text-decoration:none;font-weight:600;font-size:.95rem;color:var(--ink-2)}
.nav-links a:hover{color:var(--brand)}
.nav-links a.here{color:var(--brand)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:18px}
@media (max-width:880px){ .nav-links{display:none} }

.page-head{background:var(--tint);border-bottom:1px solid var(--line);
  padding:56px 0 52px;text-align:center}
.kicker{font-family:var(--display);font-weight:800;font-size:.8rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--brand);margin-bottom:12px}
h1.page-h{font-size:clamp(2rem,4.4vw,2.9rem);line-height:1.08;max-width:20ch;margin:0 auto}
.page-sub{font-size:1.08rem;color:var(--ink-2);margin:18px auto 0;max-width:56ch}

section.band{padding:72px 0}
section.band.alt{background:var(--tint)}
.band-head{max-width:620px;margin:0 auto 44px;text-align:center}
h2.band-h{font-size:clamp(1.7rem,3.4vw,2.3rem);line-height:1.12}
.band-sub{font-size:1.03rem;color:var(--ink-2);margin-top:14px}

.toggle{display:inline-flex;background:var(--tint-2);border-radius:var(--pill);
  padding:4px;gap:4px;margin:0 auto 36px;justify-content:center}
.toggle button{font-family:var(--display);font-weight:800;font-size:.92rem;
  padding:9px 20px;border-radius:var(--pill);border:none;background:transparent;
  color:var(--ink-2);cursor:pointer}
.toggle button[aria-pressed="true"]{background:var(--white);color:var(--ink);box-shadow:var(--shadow-sm)}
.toggle .save{font-size:.72rem;color:var(--mint);font-weight:800;margin-left:6px}

.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}
@media (max-width:900px){ .plans{grid-template-columns:1fr;max-width:440px;margin:0 auto} }
.plan{background:var(--white);border:2px solid var(--line);border-radius:var(--r-xl);
  padding:30px 28px;display:flex;flex-direction:column;gap:16px;position:relative}
.plan.featured{border-color:var(--brand);box-shadow:var(--shadow-md)}
.plan .flag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--brand);color:#fff;font-family:var(--display);font-weight:800;
  font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  padding:5px 14px;border-radius:var(--pill);white-space:nowrap}
@media (prefers-color-scheme:dark){ .plan .flag{color:#0E1626} }
.plan h3{font-size:1.3rem}
.plan .blurb{color:var(--ink-2);font-size:.94rem}
.price{display:flex;align-items:baseline;gap:6px}
.price .amt{font-family:var(--display);font-weight:800;font-size:2.6rem;letter-spacing:-.04em}
.price .per{color:var(--ink-3);font-size:.95rem;font-weight:600}
.price-note{color:var(--ink-3);font-size:.85rem;margin-top:-8px}
.minutes{background:var(--brand-soft);color:var(--brand);border-radius:10px;
  padding:11px 14px;font-weight:700;font-size:.95rem;text-align:center}
.feats{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.feats li{display:flex;gap:10px;align-items:flex-start;font-size:.94rem;color:var(--ink-2)}
.tick{width:19px;height:19px;border-radius:50%;background:var(--mint-soft);flex:none;
  display:flex;align-items:center;justify-content:center;margin-top:2px}

.packs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:900px;margin:0 auto}
@media (max-width:760px){ .packs{grid-template-columns:1fr;max-width:400px} }
.pack{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:24px;text-align:center}
.pack .mins{font-family:var(--display);font-weight:800;font-size:1.5rem}
.pack .cost{font-family:var(--display);font-weight:800;font-size:2rem;color:var(--brand);margin:8px 0 4px}
.pack .rate{color:var(--ink-3);font-size:.85rem}

.tscroll{overflow-x:auto;border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--white)}
table{border-collapse:collapse;width:100%;font-size:.92rem;min-width:520px}
th,td{text-align:left;padding:13px 18px;border-bottom:1px solid var(--line)}
thead th{font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);background:var(--tint);font-weight:700;white-space:nowrap}
tbody tr:last-child td{border-bottom:none}
td.num,th.num{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
tr.best td{background:var(--mint-soft)}

.faq{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:1px;
  background:var(--line);border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden}
.faq details{background:var(--white)}
.faq summary{padding:18px 22px;cursor:pointer;font-family:var(--display);font-weight:800;
  font-size:1rem;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--brand);font-weight:800}
.faq details[open] summary::after{content:"\2212"}
.faq .a{padding:0 22px 20px;color:var(--ink-2);font-size:.95rem}

.final{padding:80px 0;text-align:center}
.final-card{background:var(--ink);border-radius:32px;padding:60px 40px;position:relative;overflow:hidden}
.final-card h2{color:#fff;font-size:clamp(1.8rem,4vw,2.6rem);line-height:1.1;position:relative}
.final-card p{color:rgba(255,255,255,.72);font-size:1.04rem;margin:16px auto 0;max-width:44ch;position:relative}
.final-card .btn{margin-top:28px;position:relative;background:#fff;color:var(--ink)}
.final-card .btn:hover{background:var(--brand-mid);color:var(--ink)}
.final-note{color:rgba(255,255,255,.5);font-size:.86rem;margin-top:15px;position:relative}
.blob{position:absolute;border-radius:50%;filter:blur(72px);opacity:.5;pointer-events:none}
.blob.a{width:320px;height:320px;background:var(--brand);top:-120px;left:-80px}
.blob.b{width:270px;height:270px;background:var(--rose);bottom:-110px;right:-60px}

footer{border-top:1px solid var(--line);padding:52px 0 34px;background:var(--white)}
.foot-cols{display:grid;grid-template-columns:1.6fr repeat(2,1fr);gap:40px}
@media (max-width:820px){ .foot-cols{grid-template-columns:1fr 1fr;gap:30px} }
@media (max-width:500px){ .foot-cols{grid-template-columns:1fr} }
.foot-col h5{font-family:var(--display);font-weight:800;font-size:.79rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 13px}
.foot-col a{display:block;text-decoration:none;color:var(--ink-2);font-size:.92rem;
  margin-bottom:8px;font-weight:500}
.foot-col a:hover{color:var(--brand)}
.foot-base{margin-top:42px;padding-top:24px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--ink-3);font-size:.86rem}

@media (prefers-reduced-motion:reduce){ *{transition:none!important} html{scroll-behavior:auto} }

/* ------------------------------------------------------------------ contact
   The form is plain HTML posting to the provider's endpoint: no embedded
   widget, no third-party script, nothing set in the browser until someone
   presses send. That keeps the site cookieless and needing no banner, and
   it means the fields are ours to style like the rest of the pages rather
   than an iframe in somebody else's design. */
.cform{max-width:560px;margin:0 auto}
.cf-row{margin-bottom:22px}
.cf-row label{display:block;font-family:var(--display);font-weight:700;
  font-size:.95rem;margin-bottom:7px;color:var(--ink)}
.cform input[type=text],.cform input[type=email],.cform textarea{
  width:100%;padding:13px 15px;border:1px solid var(--line-2);border-radius:var(--r);
  background:var(--white);color:var(--ink);font-family:var(--body);font-size:1rem;
  /* 16px keeps iOS from zooming the viewport when a field takes focus. */
  line-height:1.5;transition:border-color .16s ease,box-shadow .16s ease}
.cform textarea{resize:vertical;min-height:150px}
.cform input:focus,.cform textarea:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-soft)}
.cf-help{margin:7px 0 0;font-size:.87rem;color:var(--ink-3)}
.cf-fine{margin:16px 0 0;font-size:.87rem;color:var(--ink-3);text-align:center}

/* Off-screen rather than display:none: some bots skip anything the CSS
   hides outright, and a real person never reaches it either way. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}

/* The confirmation. Hidden until the browser lands on #sent, which is where
   the form's redirect sends it, so a successful submission needs no script. */
.sent{display:none;max-width:560px;margin:0 auto 34px;padding:20px 22px;
  border:1px solid var(--mint);border-radius:var(--r-lg);background:var(--mint-soft)}
.sent:target{display:block}
.sent-h{margin:0;font-family:var(--display);font-weight:800;font-size:1.1rem;color:var(--ink)}
.sent-b{margin:8px 0 0;color:var(--ink-2);font-size:.95rem}