/* ============================================================
   TrueNorthGulf — shared stylesheet
   Mobile-first, Apple-style, glassmorphism
   ============================================================ */

:root{
  --ink:#1d1d1f; --ink-2:#424245; --ink-3:#6e6e73;
  --line:rgba(255,255,255,.58);
  --glass:rgba(255,255,255,.58);
  --blue:#0071e3; --blue-d:#0059b8;
  --wa:#25D366; --wa-d:#1da851;
  --radius:20px;
  --shadow:0 8px 40px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04);

  --nav-h:52px;
  --pad:20px;                 /* page gutter */
  --block-pad:24px;           /* glass panel padding */
  --sec:52px;                 /* vertical section rhythm */
  --blur:22px;                /* backdrop blur — reduced on mobile for perf */

  --safe-b:env(safe-area-inset-bottom, 0px);

  /* ---- Type: TWO scales, for two different jobs ------------------

     Apple uses one scale for app UI and a much larger one for
     marketing pages. Using the UI scale on a hero — which is what an
     earlier version of this file did — makes the headline read like a
     section title. They only meet at Body 17.

     1. DISPLAY (apple.com marketing) — hero and section headings.
        At the small breakpoint Apple runs roughly:
          hero 48 · headline 40 · reduced 32 · intro 21
        These are fluid here so they grow on tablet and desktop.

     2. UI (iOS text styles) — body copy, controls, labels, captions:
          Headline 17 · Body 17 · Callout 16 · Subheadline 15
          Footnote 13 · Caption 12                                 */

  /* 2. UI scale — fixed */
  --t-headline:17px;
  --t-body:17px;
  --t-callout:16px;
  --t-subhead:15px;
  --t-footnote:13px;
  --t-caption:12px;
}

@media (min-width:600px){
  :root{ --pad:24px; --block-pad:34px; --sec:64px; --radius:22px; --blur:28px; }
}
@media (min-width:900px){
  :root{ --nav-h:56px; --block-pad:42px; --sec:76px; --blur:30px; }
}

*{margin:0;padding:0;box-sizing:border-box}
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;   /* stop iOS re-flowing type on rotate */
  scroll-padding-top:calc(var(--nav-h) + 12px);
}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",Helvetica,Arial,sans-serif;
  color:var(--ink); line-height:1.5;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  background:#f5f5f7;
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
  /* room for the sticky mobile action bar */
  padding-bottom:calc(60px + var(--safe-b));
}
@media (min-width:760px){ body{ padding-bottom:0 } }

img,svg{max-width:100%;height:auto;display:block}

/* ---------- ambient background ---------- */
.bg{position:fixed;inset:0;z-index:-2;background:#eef1f6}
.orb{position:fixed;border-radius:50%;filter:blur(70px);opacity:.5;z-index:-1;pointer-events:none;will-change:auto}
@media (min-width:760px){ .orb{filter:blur(90px)} }
/* on small screens two orbs are plenty — blur is expensive to composite */
@media (max-width:600px){
  .orb{filter:blur(56px);opacity:.42}
  .o3,.o4{display:none}
  .o1{width:min(420px,110vw);height:min(420px,110vw)}
  .o2{width:min(360px,95vw);height:min(360px,95vw)}
}

/* ---------- nav ----------
   Scoped to .site-nav, NOT the bare `nav` element: pages use a second
   <nav> for the section tabs, which must not inherit fixed positioning. */
.site-nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  background:rgba(250,250,252,.78);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(0,0,0,.06);
  padding-top:env(safe-area-inset-top,0px);
}
.nav-in{
  max-width:1080px;margin:0 auto;padding:0 var(--pad);
  height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.logo{font-size:var(--t-headline);font-weight:600;letter-spacing:-.02em;text-decoration:none;color:var(--ink);white-space:nowrap}
.logo span{color:var(--blue)}


.nav-links{display:flex;gap:26px;align-items:center}
.nav-links a{
  font-size:var(--t-footnote);color:var(--ink-2);text-decoration:none;transition:color .2s;
  display:inline-flex;align-items:center;
}
.nav-links a:hover{color:var(--ink)}
.nav-links a.on{color:var(--ink);font-weight:500}
.nav-cta{
  background:var(--blue);color:#fff!important;padding:8px 16px;border-radius:980px;
  font-weight:500;min-height:36px;
}
.nav-cta:hover{background:var(--blue-d)}

/* hamburger */
.burger{
  display:none;width:44px;height:44px;border:none;background:transparent;
  align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;margin-right:-8px;
}
.burger span{
  display:block;width:19px;height:1.6px;background:var(--ink);border-radius:2px;position:relative;
  transition:transform .28s cubic-bezier(.2,.8,.2,1), opacity .18s;
}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:19px;height:1.6px;background:var(--ink);border-radius:2px;
  transition:transform .28s cubic-bezier(.2,.8,.2,1), opacity .18s;
}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.burger.open span{transform:rotate(45deg)}
.burger.open span::before{transform:translateY(6px) rotate(-90deg)}
.burger.open span::after{opacity:0}

/* mobile dropdown */
.mobile-menu{
  display:none;position:fixed;left:0;right:0;top:calc(var(--nav-h) + env(safe-area-inset-top,0px));
  z-index:199;
  background:rgba(250,250,252,.94);
  backdrop-filter:saturate(180%) blur(24px);-webkit-backdrop-filter:saturate(180%) blur(24px);
  border-bottom:1px solid rgba(0,0,0,.08);
  padding:8px var(--pad) 16px;
  transform:translateY(-8px);opacity:0;pointer-events:none;
  transition:transform .26s cubic-bezier(.2,.8,.2,1), opacity .2s;
}
.mobile-menu.open{transform:translateY(0);opacity:1;pointer-events:auto}
.mobile-menu a{
  display:flex;align-items:center;min-height:50px;
  font-size:var(--t-body);color:var(--ink);text-decoration:none;font-weight:400;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.mobile-menu a:last-of-type{border-bottom:none}
.mobile-menu .m-cta{
  margin-top:12px;justify-content:center;background:var(--blue);color:#fff;
  border-radius:980px;font-weight:500;min-height:48px;border-bottom:none;
}

@media (max-width:759px){
  .nav-links{display:none}
  .burger{display:flex}
  .mobile-menu{display:block}
}

/* ---------- layout & type ---------- */
/* Longhand only, deliberately.
   .wrap and .hero have identical specificity, so a `padding:` shorthand
   on either one silently wipes the other's axis. .wrap owns the
   horizontal gutter; section/.hero own the vertical rhythm. */
.wrap{max-width:1080px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
section{padding-top:var(--sec);padding-bottom:var(--sec)}

.eyebrow{font-size:var(--t-footnote);font-weight:600;color:var(--blue);letter-spacing:.02em;margin-bottom:12px}

/* ---- 1. DISPLAY scale ----
   Marketing headings. The vw term is tuned so a 393px phone lands on
   Apple's small-breakpoint values: h1 ≈ 40px, h2 ≈ 30px, deck ≈ 21px.
   Leading tightens and tracking goes negative as size grows, the way
   Apple sets display type. */
h1{
  font-size:clamp(34px,10.2vw,72px);
  font-weight:600;letter-spacing:-.022em;line-height:1.07;text-wrap:balance;
}
h2{
  font-size:clamp(27px,8.1vw,48px);
  font-weight:600;letter-spacing:-.02em;line-height:1.12;text-wrap:balance;
}
h3{
  font-size:clamp(20px,5vw,26px);
  font-weight:600;letter-spacing:-.015em;line-height:1.25;
}
/* h4 is a card/sub-heading, not display type — UI scale is right here */
h4{font-size:var(--t-headline);font-weight:600;letter-spacing:-.01em;line-height:1.35}

/* ---- Headline emphasis ----
   The homepage headline carries the whole positioning: precision on one
   side of the dash, promises on the other. Colour does that work —
   "precision" in a live gradient, "not promises" dropped back to a
   muted grey so the contrast is visible before the sentence is read.

   Deliberately NOT animating opacity from 0: text that starts invisible
   can be measured that way by crawlers and disappears entirely if CSS
   is slow. The gradient sweeps instead, so the words are always there. */
.h-grad{
  background:linear-gradient(100deg,#0071e3 0%,#3f6fe0 38%,#6f5cf0 72%,#0071e3 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  animation:hueDrift 9s ease-in-out infinite;
}
@keyframes hueDrift{
  0%,100%{background-position:0% 50%}
  50%    {background-position:100% 50%}
}
/* Older browsers without background-clip:text get solid brand blue */
@supports not ((background-clip:text) or (-webkit-background-clip:text)){
  .h-grad{color:var(--blue);-webkit-text-fill-color:var(--blue);animation:none}
}
.h-dash{color:var(--ink-3);padding:0 .04em}
.h-soft{color:var(--ink-3)}

/* Eyebrow becomes a small pill in the hero only — gives the headline
   something to sit against. Block-level eyebrows stay plain text. */
.hero .eyebrow{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 13px 6px 11px;border-radius:980px;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(255,255,255,.8);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  color:var(--ink-2);font-weight:500;letter-spacing:0;
}
.hero .eyebrow::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--blue);flex-shrink:0;
}

/* Soft light behind the headline, so it reads as a hero rather than
   text on a flat wash. Sits under the content, never intercepts taps. */
.hero{position:relative}
.hero::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:50%;top:calc(var(--nav-h) + 40px);
  width:min(760px,150%);aspect-ratio:1.6;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 40%,
     rgba(255,255,255,.6) 0%, rgba(255,255,255,.3) 38%, rgba(255,255,255,0) 70%);
}

/* Deck / intro — Apple's "intro" step, 21px small, 28px large */
.lead{
  font-size:clamp(21px,5.3vw,28px);
  color:var(--ink-2);line-height:1.33;font-weight:400;
  letter-spacing:-.005em;text-wrap:pretty;
}

/* Body is 17px, matching iOS Body. 16px was a step too small for a
   page this text-heavy — and a large share of Super Visa readers are
   parents in their sixties. */
p{color:var(--ink-2);text-wrap:pretty;font-size:var(--t-body);line-height:1.5}
/* GSTIN/CIN/emails are unbreakable strings — stop them forcing a
   horizontal scrollbar on a 320px screen */
.legal,.prose,.hours,.updated,.faq p,.block>p{overflow-wrap:break-word}

/* Headlines wrap naturally on phones. Note: do NOT hide <br> with
   display:none to achieve this — it removes the break AND the space
   around it, gluing words together ("properlythe first time"). Any
   hard breaks live in the markup only where they're wanted at all
   widths. */

/* ---------- glass ---------- */
.glass{
  background:var(--glass);
  backdrop-filter:blur(var(--blur)) saturate(180%);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(180%);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

/* Nested glass — the parent panel has already blurred this backdrop, so a
   second backdrop-filter buys almost no visual difference while forcing
   another full composite pass. The Canada page nests ~20 of these, which is
   what makes mid-range Android scrolling stutter. Flat translucent fill
   instead; visually near-identical, far cheaper. */
.glass .mini,
.glass .checker,
.glass .step,
.glass .btn-glass{
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  background:rgba(255,255,255,.52);
}
.glass .btn-glass{background:rgba(255,255,255,.64)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 24px;border-radius:980px;font-size:var(--t-body);font-weight:500;
  text-decoration:none;cursor:pointer;border:none;font-family:inherit;
  min-height:48px;                      /* comfortable touch target */
  transition:background .2s, transform .2s cubic-bezier(.2,.8,.2,1);
}
.btn-primary{background:var(--blue);color:#fff}
.btn-glass{
  background:rgba(255,255,255,.58);color:var(--ink);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.8);
}
.btn-wa{background:var(--wa);color:#fff}
@media (hover:hover){
  .btn-primary:hover{background:var(--blue-d);transform:translateY(-1px)}
  .btn-glass:hover{background:rgba(255,255,255,.82);transform:translateY(-1px)}
  .btn-wa:hover{background:var(--wa-d);transform:translateY(-1px)}
}
.btn:active{transform:scale(.975)}

.btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}

/* Phones: size buttons to their label instead of stretching them edge
   to edge. Two full-width pills stacked read as a wall of colour and
   push the actual content below the fold. Auto width + wrap keeps the
   tap target at 44px while taking roughly a third of the vertical
   space. */
@media (max-width:600px){
  .btns{flex-direction:row;flex-wrap:wrap;gap:8px;margin-top:20px}
  .btns .btn{
    width:auto;flex:0 1 auto;
    min-height:44px;padding:11px 18px;font-size:var(--t-callout);
  }
}

/* ---------- hero ---------- */
/* Vertical only — the horizontal gutter belongs to .wrap.
   nav is fixed and carries the notch inset, so clear both. */
.hero{
  padding-top:calc(var(--nav-h) + env(safe-area-inset-top,0px) + 34px);
  padding-bottom:30px;
}
@media (min-width:760px){
  .hero{padding-top:calc(var(--nav-h) + env(safe-area-inset-top,0px) + 84px);padding-bottom:48px}
}
.hero-center{text-align:center}
.hero-center .lead{max-width:640px;margin-left:auto;margin-right:auto}
.hero .lead{margin-top:16px}
.hero-center .btns{justify-content:center}
.flagbig{font-size:34px;line-height:1;margin-bottom:10px;display:block}
@media (min-width:760px){ .flagbig{font-size:44px} }

.hero-badges{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;margin-top:20px}
.badge{
  font-size:var(--t-footnote);font-weight:500;color:var(--ink-2);
  padding:7px 13px;border-radius:980px;
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.72);
}
.disclaim{
  font-size:var(--t-footnote);color:var(--ink-3);max-width:600px;
  margin:26px auto 0;line-height:1.55;text-wrap:pretty;
}

/* ---------- cards / grids ---------- */
.cards{display:grid;grid-template-columns:1fr;gap:16px;margin-top:32px}
@media (min-width:820px){ .cards{grid-template-columns:1fr 1fr;gap:20px;margin-top:40px} }
.card{padding:var(--block-pad);text-decoration:none;color:inherit;display:block;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
@media (hover:hover){ .card:hover{transform:translateY(-4px)} }
.card:active{transform:scale(.99)}
.flag{font-size:32px;line-height:1;margin-bottom:14px;display:block}
.card h2{font-size:clamp(20px,5vw,26px);line-height:1.25}
.card p{font-size:var(--t-callout);margin-top:9px;line-height:1.5}
.card ul{list-style:none;margin-top:18px;padding-top:16px;border-top:1px solid rgba(0,0,0,.07)}
.card li{font-size:var(--t-subhead);color:var(--ink-2);padding:6px 0;display:flex;gap:9px;align-items:flex-start;line-height:1.45}
.card li::before{content:"›";color:var(--blue);font-weight:600;flex-shrink:0}
.card .go{margin-top:18px;font-size:var(--t-callout);color:var(--blue);font-weight:500}

.grid2{display:grid;grid-template-columns:1fr;gap:14px}
.grid3{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:640px){ .grid3{grid-template-columns:1fr 1fr;gap:16px} }
@media (min-width:880px){
  .grid2{grid-template-columns:1fr 1fr;gap:20px}
  .grid3{grid-template-columns:repeat(3,1fr);gap:18px}
}
.mini{padding:22px}
@media (min-width:600px){ .mini{padding:26px} }
.mini h4{margin-bottom:8px}
.mini p{font-size:var(--t-callout);line-height:1.5}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:32px}
@media (min-width:900px){ .steps{grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px} }
.step{padding:20px}
@media (min-width:600px){ .step{padding:24px} }
.num{
  width:28px;height:28px;border-radius:50%;background:var(--blue);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:var(--t-footnote);font-weight:600;margin-bottom:12px;
}
.step h3{font-size:var(--t-headline);margin-bottom:6px}
.step p{font-size:var(--t-subhead);color:var(--ink-2);line-height:1.45}

/* Section sub-heading inside a block. Marked h3 so the document
   outline is h1 > h2 > h3 > h4 with no skipped levels, but sized to
   sit between the section title and the card titles. */
h3.sub{font-size:clamp(19px,4.6vw,22px);line-height:1.3}
/* Card titles: semantically h3 so the outline never skips a level,
   but sized on the UI scale because they label a small card, not a
   section. */
h3.card-h{font-size:var(--t-headline);line-height:1.35;letter-spacing:-.01em}

/* ---------- content blocks ---------- */
.block{padding:var(--block-pad);margin-bottom:18px}
.block h2{margin-bottom:14px}
.block > p{font-size:var(--t-body);line-height:1.55;margin-bottom:14px;max-width:70ch}
.block h4{margin:24px 0 8px;color:var(--ink)}
@media (min-width:600px){ .block{margin-bottom:22px} }

.panel{padding:var(--block-pad);margin-top:32px}
.panel h2{margin-bottom:16px}
.panel p{font-size:var(--t-body);line-height:1.55;max-width:70ch;margin-bottom:14px}
.nolist{display:grid;grid-template-columns:1fr;gap:10px;margin-top:22px}
@media (min-width:760px){ .nolist{grid-template-columns:1fr 1fr;gap:12px 28px} }
.nolist div{font-size:var(--t-callout);color:var(--ink-2);display:flex;gap:10px;align-items:flex-start;line-height:1.45}
.nolist div::before{content:"✕";color:#ff453a;font-size:12px;font-weight:700;margin-top:3px;flex-shrink:0}

/* ---------- lists ---------- */
ul.clean{list-style:none;margin-top:12px}
ul.clean li{font-size:var(--t-body);color:var(--ink-2);padding:7px 0;display:flex;gap:10px;align-items:flex-start;line-height:1.5}
ul.clean li::before{content:"✓";color:#34c759;font-weight:700;flex-shrink:0;font-size:14px;margin-top:2px}
ul.dash li::before{content:"›";color:var(--blue)}

/* ---------- tables → stacked rows on phones ---------- */
table{width:100%;border-collapse:collapse;margin:20px 0;font-size:var(--t-callout)}
th{
  text-align:left;font-size:var(--t-caption);text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink-3);font-weight:600;padding:0 0 10px;border-bottom:1px solid rgba(0,0,0,.1);
}
td{padding:12px 0;border-bottom:1px solid rgba(0,0,0,.06);color:var(--ink-2)}
td:last-child{text-align:right;font-weight:500;color:var(--ink)}
tr:last-child td{border-bottom:none}

@media (max-width:600px){
  table{font-size:var(--t-callout);margin:16px 0}
  thead{display:none}
  table,tbody{display:block;width:100%}
  tr{
    display:flex;justify-content:space-between;align-items:baseline;gap:14px;
    padding:11px 0;border-bottom:1px solid rgba(0,0,0,.07);
  }
  tr:last-child{border-bottom:none}
  td{display:block;border:none;padding:0}
  td:first-child{flex:1 1 auto;min-width:0}
  td:last-child{text-align:right;flex:0 0 auto;white-space:nowrap}
}

/* ---------- callouts ---------- */
.note,.warn,.good{
  padding:15px 16px;border-radius:14px;font-size:var(--t-subhead);
  color:var(--ink-2);margin-top:16px;line-height:1.55;
}
.note{background:rgba(0,113,227,.07);border:1px solid rgba(0,113,227,.18)}
.warn{background:rgba(255,159,10,.1);border:1px solid rgba(255,159,10,.28)}
.good{background:rgba(52,199,89,.1);border:1px solid rgba(52,199,89,.28)}
.note strong,.warn strong,.good strong{color:var(--ink)}

/* ---------- tabs (horizontal scroll on phone) ---------- */
.tabs{
  display:flex;gap:8px;margin-top:32px;
  overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  scroll-snap-type:x proximity;
  /* bleed to the screen edges so it reads as scrollable */
  margin-left:calc(var(--pad) * -1);margin-right:calc(var(--pad) * -1);
  padding:2px var(--pad) 4px;
}
.tabs::-webkit-scrollbar{display:none}
.tab{
  padding:10px 18px;border-radius:980px;font-size:var(--t-subhead);font-weight:500;
  color:var(--ink-2);text-decoration:none;white-space:nowrap;flex-shrink:0;
  background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.78);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  transition:background .2s,color .2s;min-height:44px;display:inline-flex;align-items:center;
  scroll-snap-align:start;
}
@media (hover:hover){ .tab:hover{background:rgba(255,255,255,.85)} }
.tab.on{background:var(--ink);color:#fff;border-color:var(--ink)}
@media (min-width:760px){ .tabs{flex-wrap:wrap;overflow:visible;margin-left:0;margin-right:0;padding:0} }

/* ---------- booking ---------- */
.book{display:grid;grid-template-columns:1fr;gap:16px;margin-top:32px;align-items:start}
@media (min-width:880px){ .book{grid-template-columns:1fr 1.15fr;gap:24px;margin-top:40px} }
/* form first on mobile, sidebar second */
@media (max-width:879px){
  .book-side{order:2}
  .book form{order:1}
}
.book-side{padding:var(--block-pad)}
.book-side h3{margin-bottom:10px}
.book-side > p{font-size:var(--t-callout);line-height:1.5;margin-bottom:20px}
.wa-box{padding:20px;border-radius:16px;background:rgba(37,211,102,.09);border:1px solid rgba(37,211,102,.25)}
.wa-box strong{display:block;font-size:var(--t-headline);margin-bottom:4px}
.wa-box span{font-size:var(--t-subhead);color:var(--ink-2)}
.wa-box .btn{margin-top:14px;width:100%}
.hours{margin-top:20px;font-size:var(--t-subhead);color:var(--ink-3);line-height:1.65}

/* ---------- forms ---------- */
form.glass{padding:var(--block-pad)}
.field{margin-bottom:14px}
.field label{display:block;font-size:var(--t-footnote);font-weight:500;color:var(--ink-2);margin-bottom:6px}
.row{display:grid;grid-template-columns:1fr;gap:0}
@media (min-width:600px){ .row{grid-template-columns:1fr 1fr;gap:14px} }

input,select,textarea{
  width:100%;padding:13px 14px;
  font-size:var(--t-body);     /* ≥16px stops iOS Safari zooming on focus */
  font-family:inherit;color:var(--ink);line-height:1.35;
  background:rgba(255,255,255,.66);
  border:1px solid rgba(0,0,0,.1);border-radius:12px;outline:none;
  min-height:48px;
  transition:border-color .2s, box-shadow .2s, background .2s;
  -webkit-appearance:none;appearance:none;
}
select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%236e6e73' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px;
}
/* iOS collapses date inputs and right-aligns their value once
   -webkit-appearance is removed — pin the height and text alignment back */
input[type=date]{min-height:48px;text-align:left}
input[type=date]::-webkit-date-and-time-value{text-align:left;margin:0}
input[type=date]::-webkit-calendar-picker-indicator{opacity:.5}

input:focus,select:focus,textarea:focus{
  border-color:var(--blue);box-shadow:0 0 0 3.5px rgba(0,113,227,.14);background:rgba(255,255,255,.9);
}
textarea{resize:vertical;min-height:88px}
::placeholder{color:#a1a1a6}

/* validation state, applied by app.js */
.field.invalid input,.field.invalid select,.field.invalid textarea{
  border-color:#ff3b30;box-shadow:0 0 0 3.5px rgba(255,59,48,.12);
}
.field .err{display:none;font-size:var(--t-footnote);color:#d70015;margin-top:6px}
.field.invalid .err{display:block}

.form-btns{display:flex;flex-direction:column;gap:9px;margin-top:20px}
@media (min-width:600px){ .form-btns{flex-direction:row;gap:10px} .form-btns .btn{flex:1} }
.consent{font-size:var(--t-footnote);color:var(--ink-3);margin-top:13px;line-height:1.5}
.ok{
  display:none;padding:14px 16px;border-radius:12px;margin-top:14px;
  background:rgba(52,199,89,.13);border:1px solid rgba(52,199,89,.3);
  font-size:var(--t-callout);color:#1c7c3f;
}
.ok.show{display:block}

/* ---------- eligibility checker ---------- */
.checker{padding:var(--block-pad);margin-top:22px}
.checker h3{margin-bottom:7px}
.checker > p{font-size:var(--t-callout);line-height:1.5;margin-bottom:18px}
.opts{display:grid;gap:9px}
.opt{
  padding:15px 16px;border-radius:14px;font-size:var(--t-body);line-height:1.45;
  cursor:pointer;text-align:left;font-family:inherit;min-height:52px;
  background:rgba(255,255,255,.58);border:1px solid rgba(0,0,0,.09);color:var(--ink-2);
  transition:background .2s,border-color .2s;
}
@media (hover:hover){ .opt:hover{background:rgba(255,255,255,.88);border-color:var(--blue)} }
.opt:active{transform:scale(.99)}
.result{display:none;margin-top:16px;padding:18px;border-radius:16px;font-size:var(--t-callout);line-height:1.55}
.result.show{display:block}
.result.yes{background:rgba(52,199,89,.13);border:1px solid rgba(52,199,89,.32);color:#1c7c3f}
.result.no{background:rgba(0,113,227,.09);border:1px solid rgba(0,113,227,.22);color:var(--ink-2)}
.result strong{display:block;margin-bottom:5px;font-size:var(--t-headline)}

/* ---------- FAQ ---------- */
.faq{border-bottom:1px solid rgba(0,0,0,.07)}
.faq:last-child{border-bottom:none}
.faq summary{
  padding:17px 0;font-size:var(--t-body);font-weight:500;cursor:pointer;
  list-style:none;display:flex;justify-content:space-between;gap:14px;
  color:var(--ink);min-height:52px;align-items:center;line-height:1.4;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--ink-3);font-weight:400;font-size:21px;flex-shrink:0;line-height:1}
.faq[open] summary::after{content:"−"}
.faq p{padding:0 0 17px;font-size:var(--t-body);line-height:1.55;max-width:70ch}

/* ---------- CTA ---------- */
.cta{padding:var(--block-pad);text-align:center;margin-top:18px}
@media (min-width:760px){ .cta{padding:52px} }
.cta h2{margin-bottom:11px}
.cta p{max-width:520px;margin:0 auto 24px;font-size:var(--t-body);line-height:1.5}
.cta .btns{justify-content:center;margin-top:0}

/* ---------- sticky mobile action bar ----------
   Hidden while the hero's own buttons are on screen — otherwise the
   same two actions appear twice on the opening fold. app.js watches
   the hero CTAs and slides this in once they scroll away, so there is
   always exactly one visible pair. */
.mobile-bar{
  display:none;
  position:fixed;left:0;right:0;bottom:0;z-index:190;
  padding:8px var(--pad) calc(8px + var(--safe-b));
  gap:8px;
  background:rgba(250,250,252,.9);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-top:1px solid rgba(0,0,0,.08);
  transform:translateY(100%);
  opacity:0;
  pointer-events:none;
  transition:transform .32s cubic-bezier(.2,.8,.2,1), opacity .22s ease;
}
.mobile-bar.show{transform:translateY(0);opacity:1;pointer-events:auto}
.mobile-bar .btn{flex:1;min-height:44px;padding:10px 12px;font-size:var(--t-subhead)}
@media (max-width:759px){ .mobile-bar{display:flex} }

/* ---------- footer ---------- */
footer{padding:40px 0 44px;border-top:1px solid rgba(0,0,0,.07);margin-top:44px}
@media (min-width:760px){ footer{padding:50px 0 60px;margin-top:56px} }
.foot{display:grid;grid-template-columns:1fr 1fr;gap:26px 20px}
@media (min-width:760px){ .foot{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap} }
.foot > div:first-child{grid-column:1 / -1}
.foot h4{font-size:var(--t-caption);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);margin-bottom:8px;font-weight:600}
.foot a{color:var(--ink-2);text-decoration:none;font-size:var(--t-subhead);display:flex;align-items:center;min-height:44px}
@media (hover:hover){ .foot a:hover{color:var(--ink)} }
.foot-links{display:flex;gap:18px;flex-wrap:wrap}
.foot-links a{font-size:var(--t-subhead);color:var(--ink-2);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.legal{font-size:var(--t-footnote);color:var(--ink-3);line-height:1.6;margin-top:28px;max-width:70ch}

/* ---------- legal / prose pages ---------- */
.prose{max-width:70ch}
/* Semantically h2 (they follow the page h1), but sized as sub-heads —
   a 32px display h2 would overpower a terms page. */
.prose h2{font-size:clamp(19px,4.6vw,22px);line-height:1.3;margin:30px 0 10px;color:var(--ink)}
.prose h2:first-child{margin-top:0}
.prose p{font-size:var(--t-body);margin-bottom:14px;line-height:1.6}
.prose ul,.prose ol{margin:0 0 14px 20px}
.prose li{font-size:var(--t-body);color:var(--ink-2);padding:5px 0;line-height:1.55}
.prose strong{color:var(--ink)}
.prose table{font-size:15px}
.updated{
  font-size:var(--t-footnote);color:var(--ink-3);padding:12px 16px;border-radius:12px;
  background:rgba(0,0,0,.03);border:1px solid rgba(0,0,0,.06);margin-bottom:24px;
}

/* ---------- accessibility ---------- */
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--blue);outline-offset:2px;border-radius:8px;
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}