/* Globe Serur — recruiting + brand site
 * theme: "Ledger" · navy ink / near-white paper / Globe Life red for action only
 * type: Source Serif 4 (display) + Libre Franklin (text)
 *
 * Design position: this is regulated financial services. Familiarity is a trust signal,
 * so the structure is conventional on purpose — masthead, split hero, ruled facts,
 * comparison, proof, process, FAQ, close. The difference is craft, not novelty:
 * real hierarchy, generous air, one accent, restrained depth, two animations.
 *
 * Nothing on this page depends on JavaScript to be readable.
 */

@import url("tokens.css");

/* ══════════════════════════════════════════════ base */

*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:clip}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--color-paper);
  color:var(--color-ink);
  font-family:var(--font-text);
  font-size:var(--text-body);
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%; height:auto; display:block}
a{color:inherit}
figure{margin:0}

:focus-visible{outline:2px solid var(--color-focus); outline-offset:3px; border-radius:2px}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--space-lg)}
@media (max-width:640px){ .wrap{padding-inline:var(--space-md)} }

/* ══════════════════════════════════════════════ type */

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-style:normal;
  font-weight:600;
  letter-spacing:-.012em;
  line-height:1.12;
  margin:0;
  overflow-wrap:anywhere;
  min-width:0;
  text-wrap:balance;
  color:var(--color-ink);
}
h1{font-size:var(--text-display); line-height:1.05; letter-spacing:-.02em}
h2{font-size:var(--text-h2); line-height:1.1; letter-spacing:-.018em}
h3{font-size:var(--text-h3); line-height:1.2}
h4{font-size:var(--text-h4); font-family:var(--font-text); font-weight:600; letter-spacing:0}

p{margin:0 0 var(--space-md)}
p:last-child{margin-bottom:0}
b,strong{font-weight:600; color:var(--color-ink)}
em{font-style:italic}

.lede{
  font-size:var(--text-lede);
  line-height:1.58;
  color:var(--color-ink-2);
  max-width:60ch;
  font-weight:400;
}
.sub{color:var(--color-muted)}
.note{
  font-size:var(--text-sm);
  color:var(--color-muted);
  border-left:2px solid var(--color-line-2);
  padding-left:var(--space-md);
  margin-top:var(--space-lg);
}
.mono{font-family:var(--font-mono)}

/* a quiet label. Not an eyebrow on every section — used only where it earns its place. */
.rubric,.kick{
  display:block;
  font-family:var(--font-text);
  font-size:var(--text-label);
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--color-accent);
  margin-bottom:var(--space-sm);
}

/* ══════════════════════════════════════════════ concept ribbon */

.concept{
  position:relative; z-index:var(--z-ribbon);
  background:var(--color-navy-deep);
  color:var(--color-paper-ink);
  font-size:var(--text-xs);
  text-align:center;
  padding:10px var(--space-md);
  line-height:1.5;
  letter-spacing:.005em;
}
.concept b{color:#fff; font-weight:600}

/* ══════════════════════════════════════════════ header */

.hdr{
  position:sticky; top:0; z-index:var(--z-hdr);
  background:oklch(99.3% .003 255 / .86);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--color-line);
}
.hdr .in{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-md);
  min-height:74px;
}
.brand{display:flex; align-items:center}
.brand img{height:36px; width:auto}

.nav{display:flex; align-items:center; gap:var(--space-lg)}
.nav a{
  font-size:var(--text-sm);
  font-weight:500;
  text-decoration:none;
  color:var(--color-ink-2);
  white-space:nowrap;
  transition:color var(--dur-short) var(--ease-out);
}
.nav a:hover{color:var(--color-ink)}
.nav a.btn{color:#fff}
.nav a.btn:hover{color:#fff}

.burger{
  display:none; background:var(--color-paper); border:1px solid var(--color-line-2);
  border-radius:var(--r-sm); width:44px; height:44px; padding:0; cursor:pointer; color:var(--color-ink);
}
.burger svg{width:22px; height:22px; margin:auto; fill:none; stroke:currentColor; stroke-width:1.7}

/* the trust strip — carrier facts, stated once, quietly */
.dateline{
  background:var(--color-paper-2);
  border-bottom:1px solid var(--color-line);
  font-size:var(--text-xs);
  color:var(--color-muted);
  padding:11px 0;
}
.dateline .in{display:flex; flex-wrap:wrap; gap:var(--space-xs) var(--space-lg); justify-content:center}
.dateline span{display:inline-flex; align-items:center; gap:8px; white-space:nowrap}
.dateline span::before{
  content:''; width:5px; height:5px; border-radius:50%;
  background:var(--color-accent); flex:none; opacity:.65;
}

/* ══════════════════════════════════════════════ buttons */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  background:var(--color-accent); color:#fff;
  border:1px solid transparent;
  border-radius:var(--r-sm);
  padding:13px 22px;
  font-family:var(--font-text);
  font-size:var(--text-sm);
  font-weight:600;
  letter-spacing:.002em;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  box-shadow:var(--shadow-1);
  transition:background-color var(--dur-short) var(--ease-out),
             box-shadow var(--dur-short) var(--ease-out),
             transform var(--dur-short) var(--ease-out);
}
.btn svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; flex:none;
  transition:transform var(--dur-mid) var(--ease-out)}
.btn:hover{background:var(--color-accent-hover); box-shadow:var(--shadow-2)}
.btn:hover svg{transform:translateX(3px)}
.btn:active{background:var(--color-accent-press); transform:translateY(1px); box-shadow:var(--shadow-1)}
.btn[disabled],.btn:disabled{opacity:.5; pointer-events:none}

.btn.ghost{
  background:var(--color-paper); color:var(--color-ink);
  border-color:var(--color-line-2); box-shadow:none;
}
.btn.ghost:hover{background:var(--color-paper-2); border-color:var(--color-ink-2); box-shadow:var(--shadow-1)}
.btn.ghost:active{background:var(--color-paper-3)}
.btn.lg{padding:16px 28px; font-size:16px}
.btn.sm{padding:9px 15px; font-size:var(--text-xs)}

.cta{display:flex; flex-wrap:wrap; gap:var(--space-sm); margin-top:var(--space-xl)}

/* ══════════════════════════════════════════════ sections */

section{padding-block:var(--space-3xl)}
section.tight{padding-block:var(--space-2xl)}
.bg-wash{background:var(--color-paper-2); border-block:1px solid var(--color-line)}
.bg-ink{background:var(--color-navy-deep); color:var(--color-paper-ink)}
.bg-ink h1,.bg-ink h2,.bg-ink h3{color:#fff}
.bg-ink .lede{color:var(--color-paper-ink)}
.bg-ink .rubric,.bg-ink .kick{color:var(--color-accent-ink)}

.shd{max-width:62ch; margin-bottom:var(--space-2xl)}
.shd h2{margin-bottom:var(--space-md)}

/* ══════════════════════════════════════════════ hero */

.hero{padding-top:var(--space-2xl); padding-bottom:var(--space-2xl)}
.hero .grid{
  display:grid;
  grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr);
  gap:var(--space-2xl);
  align-items:center;
}
.hero h1{max-width:15ch}
.hero .lede{margin-top:var(--space-md)}

/* three short proofs, full width under the fold — no numbers, no claims */
.assure{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-lg);
  margin-top:var(--space-2xl); padding-top:var(--space-lg);
  border-top:1px solid var(--color-line);
}
.assure div{display:flex; align-items:flex-start; gap:10px; font-size:var(--text-sm); color:var(--color-ink-2)}
.assure svg{width:18px; height:18px; flex:none; margin-top:3px; stroke:var(--color-accent); fill:none; stroke-width:2.2}
@media (max-width:760px){ .assure{grid-template-columns:minmax(0,1fr); gap:var(--space-sm)} }

/* the photograph */
.hero-fig{position:relative}
.hero-fig img{border-radius:var(--r-lg); box-shadow:var(--shadow-3); width:100%}
.pill{
  position:absolute; left:-18px; bottom:26px;
  background:var(--color-paper);
  border:1px solid var(--color-line);
  border-radius:var(--r);
  box-shadow:var(--shadow-2);
  padding:16px 20px;
  max-width:270px;
}
.pill b{display:block; font-size:var(--text-sm); margin-bottom:3px}
.pill span{font-size:var(--text-xs); color:var(--color-muted); line-height:1.5; display:block}

/* carrier line */
.crest{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:var(--space-sm) var(--space-2xl);
  padding-block:var(--space-lg);
  border-top:1px solid var(--color-line);
  font-size:var(--text-xs);
  color:var(--color-muted);
  text-align:center;
}
.crest b{color:var(--color-ink-2); font-weight:600}

/* ══════════════════════════════════════════════ the terms, up front */

.terms{
  background:var(--color-paper);
  border:1px solid var(--color-line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-2);
  overflow:hidden;
}
.terms dl{margin:0}
.lrow{
  display:grid;
  grid-template-columns:minmax(0,260px) minmax(0,1fr);
  gap:var(--space-sm) var(--space-xl);
  padding:var(--space-lg) var(--space-xl);
  border-top:1px solid var(--color-line);
  align-items:baseline;
}
.lrow:first-child{border-top:none}
.lrow dt{
  font-size:var(--text-sm); font-weight:600; color:var(--color-muted);
  letter-spacing:.01em;
}
.lrow dd{
  margin:0;
  font-family:var(--font-display);
  font-size:var(--text-h3);
  font-weight:600;
  line-height:1.3;
  color:var(--color-ink);
  letter-spacing:-.01em;
}
.terms-foot{
  background:var(--color-paper-2);
  border-top:1px solid var(--color-line);
  padding:var(--space-md) var(--space-xl);
  font-size:var(--text-sm);
  color:var(--color-muted);
}

/* ══════════════════════════════════════════════ the comparison */

.cols3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-lg)}
.hcol{
  background:var(--color-paper);
  border:1px solid var(--color-line);
  border-radius:var(--r-lg);
  padding:var(--space-xl);
  box-shadow:var(--shadow-1);
}
.hcol.isnt{background:var(--color-accent-tint); border-color:oklch(48% .185 27 / .18)}
.hcol h3{margin-bottom:var(--space-md); font-size:var(--text-h3)}
.hcol.isnt h3{color:var(--color-accent)}
.hcol h3 em{font-style:normal}
.hcol ul{list-style:none; margin:0; padding:0}
.hcol li{
  position:relative; padding-left:26px; padding-block:9px;
  font-size:var(--text-sm); line-height:1.6; color:var(--color-ink-2);
}
.hcol li + li{border-top:1px solid var(--color-line)}
.hcol li::before{
  position:absolute; left:0; top:11px;
  width:16px; height:16px; border-radius:50%;
  display:grid; place-items:center;
  font-size:10px; font-weight:700; line-height:1;
}
.hcol.is li::before   {content:'✓'; background:var(--color-good); color:#fff}
.hcol.isnt li::before {content:'−'; background:var(--color-accent); color:#fff}
.hcol.who li::before  {content:'•'; background:var(--color-ink-2); color:#fff; font-size:12px}

/* the pull-quote */
.callout{
  margin:var(--space-2xl) auto 0;
  max-width:74ch;
  background:var(--color-paper);
  border:1px solid var(--color-line);
  border-left:3px solid var(--color-accent);
  border-radius:var(--r);
  box-shadow:var(--shadow-1);
  padding:var(--space-lg) var(--space-xl);
  font-size:var(--text-lede);
  line-height:1.6;
  color:var(--color-ink-2);
}
.callout b{color:var(--color-ink)}

/* ══════════════════════════════════════════════ feature rows */

.row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--space-2xl);
  align-items:center;
  padding-block:var(--space-2xl);
}
.row + .row{border-top:1px solid var(--color-line)}
.row.flip .fig{order:2}
.row h2{margin-bottom:var(--space-md); max-width:18ch; font-size:var(--text-h2)}
.row p{color:var(--color-ink-2); max-width:56ch}
.fig img{border-radius:var(--r-lg); box-shadow:var(--shadow-2); width:100%}

/* ══════════════════════════════════════════════ proof (empty on purpose) */

.proof{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:var(--space-lg)}
.tcard{
  background:var(--color-paper);
  border:1px solid var(--color-line);
  border-radius:var(--r-lg);
  padding:var(--space-lg);
  box-shadow:var(--shadow-1);
}
.tcard .ph{
  width:52px; aspect-ratio:1/1; border-radius:50%;
  background:var(--color-paper-3);
  border:1px dashed var(--color-line-2);
  display:grid; place-items:center;
  font-size:9px; letter-spacing:.06em; text-transform:uppercase; line-height:1.3;
  color:var(--color-faint); text-align:center;
  margin-bottom:var(--space-md);
}
.tcard .slot{font-size:var(--text-sm); color:var(--color-muted); min-height:72px; margin-bottom:var(--space-md)}
.tcard .meta{
  display:block; border-top:1px solid var(--color-line); padding-top:12px;
  font-size:var(--text-xs); color:var(--color-faint);
}

/* ══════════════════════════════════════════════ process */

.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); gap:var(--space-lg); counter-reset:step}
.step{counter-increment:step; padding-top:var(--space-md); border-top:2px solid var(--color-ink)}
.step::before{
  content:counter(step,decimal-leading-zero);
  display:block;
  font-family:var(--font-display); font-weight:700;
  font-size:15px; letter-spacing:.06em; color:var(--color-accent);
  font-variant-numeric:tabular-nums;
  margin-bottom:var(--space-sm);
}
.step h3{margin-bottom:var(--space-xs); font-size:var(--text-h4); font-family:var(--font-display); font-weight:600}
.step p{font-size:var(--text-sm); color:var(--color-muted); margin:0}

/* ══════════════════════════════════════════════ FAQ */

.faq{
  background:var(--color-paper);
  border:1px solid var(--color-line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-1);
  overflow:hidden;
}
.faq details + details{border-top:1px solid var(--color-line)}
.faq summary{
  list-style:none; cursor:pointer;
  display:grid; grid-template-columns:minmax(0,1fr) 20px; align-items:center; gap:var(--space-md);
  padding:var(--space-lg) var(--space-xl);
  font-family:var(--font-display); font-weight:600;
  font-size:var(--text-h4); line-height:1.4; color:var(--color-ink);
  transition:background-color var(--dur-short) var(--ease-out);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:var(--color-paper-2)}
.faq summary::after{
  content:''; justify-self:end; width:13px; height:13px;
  background:
    linear-gradient(var(--color-accent) 0 0) center/100% 2px no-repeat,
    linear-gradient(var(--color-accent) 0 0) center/2px 100% no-repeat;
  transition:transform var(--dur-mid) var(--ease-out);
}
.faq details[open] summary::after{transform:rotate(90deg); background-size:100% 2px, 0 0}
.faq .a{padding:0 var(--space-xl) var(--space-lg); max-width:74ch}
.faq .a p{font-size:var(--text-sm); color:var(--color-ink-2)}

/* ══════════════════════════════════════════════ forms */

.formcard{
  background:var(--color-paper);
  border:1px solid var(--color-line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-2);
  padding:var(--space-xl);
}
.field{margin-bottom:var(--space-md)}
.field label{
  display:block; margin-bottom:6px;
  font-size:var(--text-sm); font-weight:600; color:var(--color-ink-2);
}
.field input,.field select,.field textarea{
  width:100%; box-sizing:border-box;
  background:var(--color-paper);
  border:1px solid var(--color-line-2);
  border-radius:var(--r-sm);
  padding:12px 14px;
  font-family:var(--font-text); font-size:var(--text-body); color:var(--color-ink);
  transition:border-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}
.field textarea{min-height:104px; resize:vertical; line-height:1.6}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--color-muted)}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--color-focus);
  box-shadow:0 0 0 3px oklch(48% .15 250 / .16);
  outline:none;
}
.field input[aria-invalid="true"]{border-color:var(--color-accent)}
.field .err{display:block; margin-top:6px; font-size:var(--text-xs); color:var(--color-accent)}
.grid2{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); gap:0 var(--space-md)}

.consent{
  display:grid; grid-template-columns:22px minmax(0,1fr); gap:var(--space-sm);
  align-items:start;
  border-top:1px solid var(--color-line);
  padding-top:var(--space-md); margin-top:var(--space-md);
  font-size:var(--text-sm); color:var(--color-ink-2); line-height:1.55;
}
.consent input{width:19px; height:19px; margin:2px 0 0; accent-color:var(--color-accent)}

/* ══════════════════════════════════════════════ job header / facts */

.jobhd{margin-bottom:var(--space-2xl)}
.facts{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));
  gap:0;
  background:var(--color-paper);
  border:1px solid var(--color-line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-1);
  overflow:hidden;
}
.fact{padding:var(--space-lg); border-left:1px solid var(--color-line)}
.fact:first-child{border-left:none}
.fact b{
  display:block; font-size:var(--text-label); font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--color-accent); margin-bottom:8px;
}
.fact span{font-size:var(--text-sm); line-height:1.55; color:var(--color-ink-2)}

/* ══════════════════════════════════════════════ video */

.vidwrap{
  position:relative; background:var(--color-navy-deep);
  aspect-ratio:16/9; display:grid; place-items:center; overflow:hidden;
  border-radius:var(--r-lg); box-shadow:var(--shadow-3);
}
.play{
  width:76px; height:76px; border-radius:50%;
  background:oklch(99.3% .003 255 / .92);
  display:grid; place-items:center; cursor:pointer;
  box-shadow:var(--shadow-2);
  transition:background-color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);
}
.play svg{width:24px; height:24px; fill:var(--color-accent); stroke:none; margin-left:4px}
.play:hover{background:#fff; transform:scale(1.04)}
.play:active{transform:scale(.99)}
.vidnote{
  position:absolute; left:0; right:0; bottom:0; padding:12px var(--space-md);
  font-size:var(--text-xs); color:var(--color-paper-ink); text-align:center;
}
.vidfill{
  position:absolute; inset:0; display:grid; place-items:center;
  background:var(--color-navy-deep); color:var(--color-faint);
  font-size:var(--text-xs); text-align:center; padding:var(--space-lg);
}
.figtag{display:none}          /* imagery is cleared — no placeholder captions */

/* ══════════════════════════════════════════════ disclosure + CONFIRM */

.disclosure{
  background:var(--color-paper-2);
  border:1px solid var(--color-line);
  border-radius:var(--r);
  padding:var(--space-md) var(--space-lg);
  font-size:var(--text-sm); line-height:1.6; color:var(--color-muted);
  max-width:76ch;
}
.disclosure b{color:var(--color-ink)}
.disclosure.standing{background:transparent; border:none; border-left:3px solid var(--color-line-2);
  border-radius:0; padding:var(--space-2xs) 0 var(--space-2xs) var(--space-lg); font-size:var(--text-body)}

.confirm{
  display:inline-block;
  background:var(--color-flag-tint);
  color:var(--color-flag);
  border:1px solid oklch(48% .105 75 / .35);
  border-radius:4px;
  font-size:10px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  padding:2px 6px; margin-inline-end:6px;
  position:relative; top:-1px;
  vertical-align:middle;
  line-height:1.5;
}

/* ══════════════════════════════════════════════ two doors (apex) */

.doors{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)); gap:var(--space-lg)}
.door{
  background:var(--color-paper);
  border:1px solid var(--color-line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-1);
  overflow:hidden;
  text-decoration:none; display:flex; flex-direction:column;
  transition:box-shadow var(--dur-mid) var(--ease-out), transform var(--dur-mid) var(--ease-out),
             border-color var(--dur-mid) var(--ease-out);
}
.door:hover{box-shadow:var(--shadow-3); transform:translateY(-2px); border-color:var(--color-line-2)}
.door img{width:100%; aspect-ratio:16/10; object-fit:cover; object-position:center 26%}
.door .body{padding:var(--space-xl); display:flex; flex-direction:column; flex:1}
.door h3{margin-bottom:var(--space-sm)}
.door p{font-size:var(--text-sm); color:var(--color-muted); flex:1; margin-bottom:var(--space-lg)}
.door .btn{align-self:flex-start}

/* ══════════════════════════════════════════════ footer */

footer{background:var(--color-navy-deep); color:var(--color-paper-ink); padding-block:var(--space-2xl) var(--space-lg)}
/* a navy close above a navy footer reads as one undifferentiated slab */
section.bg-ink + footer{border-top:1px solid var(--color-line-ink)}
footer .cols{
  display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) minmax(0,1fr);
  gap:var(--space-xl);
  padding-bottom:var(--space-xl);
  border-bottom:1px solid var(--color-line-ink);
}
footer img{height:32px; width:auto; margin-bottom:var(--space-md); filter:brightness(0) invert(1); opacity:.92}
footer p{font-size:var(--text-sm); color:var(--color-paper-ink); opacity:.72; line-height:1.6}
footer h4{
  font-size:var(--text-label); font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--color-accent-ink); margin-bottom:var(--space-md);
  font-family:var(--font-text);
}
footer ul{list-style:none; margin:0; padding:0}
footer li{font-size:var(--text-sm); padding-block:5px; opacity:.8}
footer a{text-decoration:none; white-space:nowrap;
  border-bottom:1px solid transparent;
  transition:border-color var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out)}
footer a:hover{border-bottom-color:var(--color-accent-ink); opacity:1}

.legal{padding-block:var(--space-lg); border-bottom:1px solid var(--color-line-ink)}
.legal p{font-size:12.5px; line-height:1.65; opacity:.62; max-width:none}
.legal b{opacity:1; color:#fff}

.foot-bottom{
  display:flex; flex-wrap:wrap; gap:var(--space-sm) var(--space-lg);
  justify-content:space-between; padding-top:var(--space-md);
  font-size:var(--text-xs); color:var(--color-paper-ink); opacity:.55;
}

/* ══════════════════════════════════════════════ prose (legal pages) */

.prose{max-width:72ch}
.prose h2{font-size:var(--text-h3); margin:var(--space-2xl) 0 var(--space-md)}
.prose h3{font-size:var(--text-h4); margin:var(--space-lg) 0 var(--space-xs)}
.prose p,.prose li{font-size:var(--text-sm); color:var(--color-ink-2); line-height:1.7}
.prose ul{padding-left:var(--space-md)}

/* ══════════════════════════════════════════════ motion — one primitive
   FAIL-OPEN: the hidden state is scoped to .js, which an inline head script adds.
   With JavaScript off, `[data-reveal]` is never hidden and the page just renders.
   Content must never be invisible because a script didn't run. */

.js [data-reveal]{
  opacity:0;
  transform:translateY(14px);
  transition:opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out);
  transition-delay:calc(var(--i,0) * 80ms);
}
.js [data-reveal].in{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .js [data-reveal]{opacity:1; transform:none}
}

/* ══════════════════════════════════════════════ responsive — 320 / 375 / 414 / 768 */

@media (max-width:1080px){
  .hero .grid{grid-template-columns:minmax(0,1fr); gap:var(--space-2xl)}
  .hero h1{max-width:18ch}
  .pill{left:auto; right:18px; bottom:18px}
  .row,.row.flip{grid-template-columns:minmax(0,1fr); gap:var(--space-lg)}
  .row.flip .fig{order:0}
  .cols3{grid-template-columns:minmax(0,1fr)}
  footer .cols{grid-template-columns:minmax(0,1fr); gap:var(--space-lg)}
  .lrow{grid-template-columns:minmax(0,200px) minmax(0,1fr); padding-inline:var(--space-lg)}
}

@media (max-width:860px){
  .burger{display:grid; place-items:center}
  .hdr .in{position:relative}
  .nav{
    display:none;
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--color-paper);
    border:1px solid var(--color-line);
    border-radius:var(--r);
    box-shadow:var(--shadow-3);
    padding:var(--space-xs) var(--space-md) var(--space-md);
    margin-top:6px;
  }
  .nav.open{display:flex}
  .nav a{padding-block:var(--space-md); font-size:var(--text-body)}
  .nav a + a{border-top:1px solid var(--color-line)}
  .nav a.btn{margin-top:var(--space-md); border-top:none}

  section{padding-block:var(--space-2xl)}
  .shd{margin-bottom:var(--space-xl)}
  .lrow{grid-template-columns:minmax(0,1fr); gap:6px; padding:var(--space-md) var(--space-lg)}
  .lrow dd{font-size:19px}
  .terms-foot{padding-inline:var(--space-lg)}
  .callout{padding:var(--space-lg)}
  .fact{border-left:none; border-top:1px solid var(--color-line); padding:var(--space-md) var(--space-lg)}
  .fact:first-child{border-top:none}
  .faq summary{padding:var(--space-md) var(--space-lg)}
  .faq .a{padding:0 var(--space-lg) var(--space-md)}
  .formcard{padding:var(--space-lg)}
  .hcol{padding:var(--space-lg)}
  .pill{position:static; margin-top:var(--space-md); max-width:none}
  .dateline .in{justify-content:flex-start; gap:var(--space-xs) var(--space-md)}
  .assure{gap:var(--space-sm) var(--space-md)}
}

@media (max-width:420px){
  .brand img{height:30px}
  .btn.lg{padding:14px 20px; font-size:15px}
  .cta{gap:10px}
  .cta .btn{width:100%}
}