/* ==================================================================
   GOES YOUR WAY : site + policy pages
   ------------------------------------------------------------------
   BUILD METHOD, per the six-step frontend stack
   (data/bridge-pages/research/six-step-frontend-method.md):

   step 4  SkillUI already extracted the Genius Switch VSL system to
           research/vsl-design-system.md. IDENTITY COLOUR comes from
           there, so these pages read as the same property as the five
           bridge pages.
   step 3  getdesign donor = NOTION (research/donor-notion-DESIGN.md).
           Supplies SURFACE and SPACING philosophy only: warm paper
           canvas, white cards, quiet 1px hairlines, whitespace as the
           grouping device, 8px base unit, document-like calm.
           ⚠️ Its BLUE (#0075de) is deliberately NOT used. Trade dress
           stays with the donor; we take structure, never identity.
           ⚠️ The one-line catalogue blurb calls Notion "serif
           headings". The extracted file says "there is no serif".
           The file is the artifact and the file wins.
   step 5  /ui-ux-pro-max: quiet end of the style list. A policy page
           that shouts reads as an offer page.
   step 6  /iphone-simple closes the build (house substitution for
           Magic MCP, Renzo 2026-08-29).

   TYPE    Lora carries headings for continuity with the bridge pages.
           Inter carries body, because legal text runs long and a serif
           at length on a phone costs comprehension. The donor's
           heavy-headline / calm-body contrast is the expressive lever.

   NOTE    No em dashes anywhere in this file's prose, per tier 0.
   ================================================================== */

:root{
  /* identity, from the VSL extraction (ours) */
  --navy:#023649;
  --navy-deep:#002C34;
  --green:#A5DB69;

  /* surface, from the Notion donor (structure only) */
  --paper:#f6f5f4;
  --surface:#ffffff;
  --hairline:#e6e6e6;

  /* text ramp, donor roles mapped onto our ink */
  --ink:#111111;
  --ink-2:#31302e;
  --ink-muted:#615d59;
  --ink-faint:#a39e98;

  /* 8px base unit */
  --s-xxs:4px; --s-xs:8px; --s-sm:12px; --s-md:16px;
  --s-lg:24px; --s-xl:28px; --s-xxl:32px;

  --wrap:720px;          /* reading measure for policy prose */
  --wrap-wide:1080px;    /* donor container for the home page */
  --radius:10px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink-2);
  font-family:Inter,-apple-system,system-ui,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

/* ---------- skip link, a11y ---------- */
.skip{
  position:absolute; left:-9999px; top:0;
  background:var(--navy); color:#fff; padding:var(--s-sm) var(--s-md);
  z-index:100; border-radius:0 0 var(--radius) 0;
}
.skip:focus{left:0}

/* ---------- header ---------- */
.site-head{
  background:var(--surface);
  border-bottom:1px solid var(--hairline);
}
.site-head .bar{
  max-width:var(--wrap-wide); margin:0 auto;
  padding:var(--s-md) var(--s-lg);
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-md); flex-wrap:wrap;
}
.wordmark{
  font-family:Lora,Georgia,'Times New Roman',serif;
  font-size:20px; font-weight:700; letter-spacing:-.2px;
  color:var(--navy); text-decoration:none; white-space:nowrap;
}
.wordmark span{color:var(--ink-muted); font-weight:400}
.site-head nav{display:flex; gap:var(--s-lg); flex-wrap:wrap}
.site-head nav a{
  font-size:15px; color:var(--ink-2); text-decoration:none;
  padding:var(--s-xxs) 0; border-bottom:2px solid transparent;
}
.site-head nav a:hover,.site-head nav a:focus{
  color:var(--navy); border-bottom-color:var(--green);
}
.site-head nav a[aria-current="page"]{
  color:var(--navy); font-weight:600; border-bottom-color:var(--navy);
}

/* ---------- layout ---------- */
main{display:block}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 var(--s-lg)}
.wrap-wide{max-width:var(--wrap-wide); margin:0 auto; padding:0 var(--s-lg)}

/* whitespace is the grouping device, not rules (donor principle) */
section{margin:56px 0}
section:first-of-type{margin-top:40px}

/* ---------- type ---------- */
h1,h2,h3{
  font-family:Lora,Georgia,'Times New Roman',serif;
  color:var(--ink); margin:0 0 var(--s-md); font-weight:700;
}
h1{font-size:34px; line-height:1.18; letter-spacing:-.5px}
h2{font-size:24px; line-height:1.25; letter-spacing:-.25px; margin-top:44px}
h3{font-size:19px; line-height:1.3; margin-top:28px}
p{margin:0 0 var(--s-md)}
ul,ol{margin:0 0 var(--s-md); padding-left:22px}
li{margin-bottom:var(--s-xs)}
a{color:var(--navy); text-decoration:underline; text-underline-offset:2px}
a:hover,a:focus{text-decoration-thickness:2px}
strong{color:var(--ink); font-weight:600}
.lede{font-size:19px; color:var(--ink-2); line-height:1.6}
.eyebrow{
  font-size:12px; font-weight:600; letter-spacing:.9px;
  text-transform:uppercase; color:var(--ink-muted);
  margin:0 0 var(--s-sm);
}
.updated{
  font-size:14px; color:var(--ink-muted); margin:0 0 var(--s-xxl);
  padding-bottom:var(--s-md); border-bottom:1px solid var(--hairline);
}

/* ---------- cards, donor: hairline not heavy frame ---------- */
.card{
  background:var(--surface);
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  padding:var(--s-lg);
  margin:0 0 var(--s-md);
}
.card h3{margin-top:0}
.card :last-child{margin-bottom:0}

/* the standing disclosure block, used on every page */
.disclosure{
  background:var(--surface);
  border:1px solid var(--hairline);
  border-left:4px solid var(--green);
  border-radius:var(--radius);
  padding:var(--s-lg);
  font-size:16px;
  color:var(--ink-2);
}
.disclosure :last-child{margin-bottom:0}
.disclosure strong{color:var(--navy)}

/* ---------- home hero ---------- */
.hero{
  background:var(--navy);
  background-image:linear-gradient(180deg,var(--navy) 0%,var(--navy-deep) 100%);
  color:#fff;
  padding:64px 0 60px;
}
.hero h1{color:#fff; max-width:16ch; font-size:38px}
.hero .lede{color:#dbe7ec; max-width:52ch}
.hero .eyebrow{color:var(--green)}

.grid{display:grid; gap:var(--s-md)}
@media (min-width:700px){
  .grid.two{grid-template-columns:1fr 1fr}
  .grid.three{grid-template-columns:repeat(3,1fr)}
}

/* ---------- table ---------- */
.tbl-wrap{overflow-x:auto; margin:0 0 var(--s-md)}
table{border-collapse:collapse; width:100%; font-size:15px; min-width:420px}
th,td{
  text-align:left; padding:var(--s-sm) var(--s-md);
  border-bottom:1px solid var(--hairline); vertical-align:top;
}
th{color:var(--ink); font-weight:600; background:var(--surface)}

/* ---------- footer ---------- */
.site-foot{
  background:var(--surface);
  border-top:1px solid var(--hairline);
  margin-top:72px;
  padding:var(--s-xxl) 0 40px;
  font-size:15px;
  color:var(--ink-muted);
}
.site-foot .cols{
  max-width:var(--wrap-wide); margin:0 auto;
  padding:0 var(--s-lg) var(--s-lg);
  display:flex; gap:var(--s-xxl); flex-wrap:wrap;
  justify-content:space-between;
}
.site-foot nav{display:flex; gap:var(--s-lg); flex-wrap:wrap}
.site-foot a{color:var(--ink-2)}
.site-foot .fine{
  max-width:var(--wrap-wide); margin:0 auto;
  padding:var(--s-lg) var(--s-lg) 0;
  border-top:1px solid var(--hairline);
  font-size:14px; line-height:1.6; color:var(--ink-muted);
}
.site-foot .fine p{margin:0 0 var(--s-sm)}

/* ---------- mobile, the primary viewport ---------- */
@media (max-width:600px){
  body{font-size:16px}
  h1{font-size:28px}
  .hero h1{font-size:30px}
  h2{font-size:21px; margin-top:36px}
  .wrap,.wrap-wide{padding:0 var(--s-md)}
  .hero{padding:44px 0 40px}
  section{margin:40px 0}
  .site-head .bar{padding:var(--s-sm) var(--s-md)}
  .site-head nav{gap:var(--s-md)}
  .site-foot .cols{gap:var(--s-lg)}
}

/* ------------------------------------------------------------------
   /iphone-simple FINDINGS, audited 2026-08-30 at 390x844 and 1440x900.
   Measured first: scrollWidth == innerWidth on all four pages at both
   viewports, so there is no page-level overflow. Two real findings:

   P2  tap targets were 34px, under the 44px comfortable minimum. The
       audience skews 30/40+ and 75 to 80% mobile, so this is raised.
   P1  the tables clipped their last column and could only be read by
       discovering a horizontal scroll inside the wrapper. Most people
       never find that. Below 600px each row is restacked as labelled
       blocks, so nothing is hidden and nothing needs scrolling.
       The .tbl-wrap overflow-x stays as the desktop safety net.
------------------------------------------------------------------ */
@media (max-width:600px){
  .site-head nav a,.site-foot a{
    display:inline-block; min-height:44px; line-height:40px;
  }

  /* stacked tables: no clipped column, no hidden scroll */
  .tbl-wrap{overflow-x:visible}
  table{min-width:0; width:100%}
  table thead{
    position:absolute; width:1px; height:1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
  }
  table tr{
    display:block;
    background:var(--surface);
    border:1px solid var(--hairline);
    border-radius:var(--radius);
    padding:var(--s-md);
    margin:0 0 var(--s-sm);
  }
  table td{
    display:block; border:0; padding:0;
  }
  table td + td{margin-top:var(--s-xs)}
  table td[data-label]::before{
    content:attr(data-label);
    display:block;
    font-size:12px; font-weight:600; letter-spacing:.9px;
    text-transform:uppercase; color:var(--ink-muted);
    margin-bottom:2px;
  }
  /* two-column question / answer: the question leads as a heading */
  table.qa td:first-child{
    font-weight:600; color:var(--ink);
    font-family:Lora,Georgia,serif; font-size:17px; line-height:1.35;
  }
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}