/* Public site section pages, first pass, 11 September 2026. BUILD_STATE 11.400
     and 11.401: the public site mirrors the portal's sections; each is a hub of
     free tools and education, keeping a result opens the vault, and nothing is
     sold except in Vehicle and Relocation. One shared layout: the tool at the
     top, "What to know" as requirements with sources, then what we do and do
     not do. Same live-site tokens and drawn wordmark as design/vehicle-landing.html.
     Content comes from the repo's research; where the repo has no fact the page
     leaves it out rather than inventing one. */
  :root{
    --ground:#F3F3F2; --surface:#FFFFFF; --sunk:#ECEEEF; --stage:#E8EAEC;
    --ink:#131316; --ink-2:#45474C; --muted:#6A6C70; --graphite:#3A3D42;
    --line:#E2E2E1; --line-2:#EBEBEA;
    --pop:#00B4D8; --pop-hover:#0098B8; --pop-ink:#FFFFFF;
    --panel:#16181B; --panel-fg:#F2F2F1; --panel-muted:#A6A9AF; --panel-line:#2C2F34;
    --pos:#1E7A4F; --attn:#C2410C; --req:#8A4B08; --req-bg:#FBEBD5;
    --c-cred:#A8B6FF; --c-study:#CDB5FF; --c-insurance:#FFB4A2; --c-money:#FFB1D0; --c-work:#8ED8E6; --c-move:#FFC08A;
    --c-home:#F4DB7D; --c-vehicles:#A4E2B6; --c-tax:#A6CCFF; --c-health:#93DFCF; --c-practice:#EAB2F0; --c-wealth:#D3E98F; --c-pack:#93DFCF; --c-papers:#E6CFA6; --c-unions:#A8B6FF; --c-partners:#F4DB7D;
    --tile-mix:100%; --glyph-mix:42%; --row-mix:34%;
    --shadow:0 1px 1px rgba(16,18,20,.05);
    --lift:0 1px 2px rgba(16,18,20,.06), 0 18px 40px -22px rgba(16,18,20,.28);
    --f-serif:'Newsreader','Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;
    --f-sans:'Hanken Grotesk','Avenir Next','Segoe UI',system-ui,-apple-system,sans-serif;
    --maxw:1160px; --pad:clamp(1.1rem,4vw,3rem);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --ground:#0F1113; --surface:#181B1F; --sunk:#0B0C0E; --stage:#21252A;
      --ink:#F2F2F1; --ink-2:#C4C6CA; --muted:#8E9197; --graphite:#C4C6CA;
      --line:#2A2D31; --line-2:#212428;
      --pop:#22C3E3; --pop-hover:#4FD2EC; --pop-ink:#04161B;
      --panel:#0B0C0E; --panel-fg:#F2F2F1; --panel-muted:#8E9197; --panel-line:#26292E;
      --pos:#5CC98E; --attn:#F08A5D; --req:#F3B26B; --req-bg:#2E2213; --tile-mix:26%; --glyph-mix:100%; --row-mix:13%;
      --shadow:0 1px 1px rgba(0,0,0,.35);
      --lift:0 1px 2px rgba(0,0,0,.4), 0 18px 40px -22px rgba(0,0,0,.7);
    }
  }
  :root[data-theme="dark"]{
    --ground:#0F1113; --surface:#181B1F; --sunk:#0B0C0E; --stage:#21252A;
    --ink:#F2F2F1; --ink-2:#C4C6CA; --muted:#8E9197; --graphite:#C4C6CA;
    --line:#2A2D31; --line-2:#212428;
    --pop:#22C3E3; --pop-hover:#4FD2EC; --pop-ink:#04161B;
    --panel:#0B0C0E; --panel-fg:#F2F2F1; --panel-muted:#8E9197; --panel-line:#26292E;
    --pos:#5CC98E; --attn:#F08A5D; --req:#F3B26B; --req-bg:#2E2213; --tile-mix:26%; --glyph-mix:100%; --row-mix:13%;
    --shadow:0 1px 1px rgba(0,0,0,.35);
    --lift:0 1px 2px rgba(0,0,0,.4), 0 18px 40px -22px rgba(0,0,0,.7);
  }

  *{box-sizing:border-box;}
  body{margin:0; background:var(--ground); color:var(--ink); font-family:var(--f-sans); font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased;}
  h1,h2,h3,p{margin:0;}
  ul,ol{margin:0; padding:0; list-style:none;}
  button,input,select{font:inherit; color:inherit;}
  button{background:none; border:0; padding:0; cursor:pointer;}
  :focus-visible{outline:2px solid var(--pop); outline-offset:2px;}
  .in{max-width:var(--maxw); margin:0 auto; padding:0 var(--pad);}
  .num{font-variant-numeric:tabular-nums;}

  .review{background:var(--sunk); border-bottom:1px solid var(--line); font-size:12px; color:var(--muted);}
  .review .in{display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; padding-top:8px; padding-bottom:8px;}
  .review b{font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-2); font-weight:600;}

  /* Site header, with the drawn wordmark and its hairline stroke (BRAND.md). */
  .site{border-bottom:1px solid var(--line); background:var(--ground);}
  .site .in{display:flex; align-items:center; gap:28px; height:64px;}
  .wordmark{display:inline-flex; align-items:center; font-size:1.3rem; line-height:1; color:var(--ink); text-decoration:none; flex:none;}
  .wordmark .wm{height:.831em; width:auto; display:block; stroke:currentColor; stroke-width:14; paint-order:stroke fill;}
  .site nav{display:flex; gap:2px; font-size:13.5px; overflow-x:auto; scrollbar-width:none; min-width:0;}
  .site nav::-webkit-scrollbar{display:none;}
  .site nav a{color:var(--ink-2); text-decoration:none; padding:8px 7px; white-space:nowrap;}
  .site nav a:hover{color:var(--ink);}
  .site nav a[aria-current="page"]{color:var(--ink); font-weight:600; box-shadow:inset 0 -2px 0 var(--ink);}
  .site nav .navsep{width:1px; background:var(--line); margin:8px 8px; flex:none;}
  .site .sign{margin-left:auto; font-size:14.5px; color:var(--ink-2); text-decoration:none; flex:none;}
  @media (max-width:640px){ .wordmark{font-size:1.12rem;} .site .in{gap:14px;} .site .sign{display:none;} }

  /* Hero: the tool is the thesis, as on the Vehicle page. */
  .hero .in{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,5vw,64px); align-items:start; padding-top:clamp(40px,6vw,76px); padding-bottom:clamp(40px,6vw,68px);}
  .eyebrow{font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--graphite);}
  .hero h1{font-family:var(--f-serif); font-weight:420; font-optical-sizing:auto; font-size:clamp(36px,4.6vw,58px); line-height:1.03; letter-spacing:-.022em; margin-top:16px; text-wrap:balance;}
  .hero .lede{font-size:18px; line-height:1.55; color:var(--ink-2); margin-top:20px; max-width:40ch;}
  .facts{display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:26px; font-size:14px; color:var(--ink-2);}
  .facts li{display:flex; align-items:center; gap:8px;}
  .facts i{width:7px; height:7px; background:var(--graphite); display:block;}

  .tool{background:var(--surface); border:1px solid var(--line); box-shadow:var(--lift); padding:22px;}
  .tool > h2{font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:600;}
  .row2{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px;}
  .field{display:flex; flex-direction:column; gap:6px; min-width:0;}
  .field label{font-size:13.5px; font-weight:600;}
  select, input[type="number"], input[type="date"], input[type="month"]{background:var(--surface); border:1px solid var(--line); padding:9px 11px; font-size:15px; width:100%; border-radius:0;}
  select:hover, input:hover{border-color:var(--ink-2);}
  .cta{background:var(--pop); color:var(--pop-ink); font-weight:600; font-size:15px; padding:12px 18px; white-space:nowrap;}
  .cta:hover{background:var(--pop-hover);}
  .ghost{border:1px solid var(--line); padding:11px 16px; font-size:14.5px; color:var(--ink-2); white-space:nowrap;}
  .ghost:hover{border-color:var(--ink-2); color:var(--ink);}
  .foot{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-top:18px; padding-top:16px; border-top:1px solid var(--line-2);}
  .foot p{font-size:13.5px; color:var(--muted); margin-right:auto;}

  /* The three ways documents arrive. Email leads: Gray, 11 Sep, it is "the only way to get a
     continuous flow of documents/invoices". Personal inbox only (INGESTION.md F.1). */
  .ways{display:grid; gap:8px; margin-top:16px;}
  .hero .ways{margin-top:28px; max-width:520px;}
  .hero .ways + .never{max-width:520px;}
  .way{display:grid; grid-template-columns:22px minmax(0,1fr); gap:12px; padding:11px 12px; border:1px solid var(--line-2);}
  .way.lead{border-color:var(--ink);}
  .way svg{width:20px; height:20px; color:var(--graphite); margin-top:1px;}
  .way b{display:block; font-size:14.5px; font-weight:600;}
  .way span{display:block; font-size:13px; color:var(--muted); margin-top:1px;}
  .never{font-size:12.5px; color:var(--muted); margin-top:8px;}
  .subh{font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:var(--muted); margin-top:22px;}
  .readback dt.grp{grid-column:1 / -1; background:var(--sunk); color:var(--ink); font-weight:600; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; white-space:normal;}

  /* The MDO panel (Insurance): factual, alphabetical, the same facts for each, no ticks, no
     ranking (PRODUCT_SYSTEM's fund-table rule). Vaile takes nothing from MDOs (COHORT_SIZING 2219). */
  .mdo{padding:clamp(36px,5vw,56px) 0; border-top:1px solid var(--line);}
  .mdo h2{font-family:var(--f-serif); font-weight:420; font-size:clamp(26px,2.8vw,34px); letter-spacing:-.015em; line-height:1.1; margin-top:14px; max-width:28ch;}
  .mdo .intro{font-size:16.5px; color:var(--ink-2); margin-top:12px; max-width:62ch;}
  .tbl{margin-top:22px; border:1px solid var(--line); background:var(--surface); overflow-x:auto;}
  .tbl table{min-width:520px;}
  .tbl table{width:100%; border-collapse:collapse;}
  .tbl th{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:600; text-align:left; padding:11px 16px; border-bottom:1px solid var(--line);}
  .tbl td{padding:12px 16px; border-top:1px solid var(--line-2); font-size:15px; color:var(--ink-2); vertical-align:top;}
  .tbl tbody tr:first-child td{border-top:0;}
  .tbl .org, .tbl .org a{color:var(--ink); font-weight:600;}
  .tbl .org a{text-underline-offset:3px;}
  .mdo .fine{max-width:70ch;}

  /* Entitlement checks (Tax): each states the public rule and what Vaile reads from her own
     documents. Rural HELP gives no yes or no while the MMM version question is open. */
  .checks{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:24px;}
  .chk{background:var(--surface); border:1px solid var(--line); padding:20px; display:flex; flex-direction:column; gap:12px;}
  .chk h3{font-size:19px; font-weight:600; letter-spacing:-.005em;}
  .chk .who{font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--muted);}
  .chk p{font-size:15px; color:var(--ink-2); line-height:1.55;}
  .chk .res{background:var(--sunk); padding:12px 14px; color:var(--ink); font-size:14.5px;}
  .chk .src{font-size:12.5px; color:var(--muted);}
  .chk .ghost{align-self:flex-start; margin-top:auto;}
  .chk .row2{margin-top:0;}
  .rules li{position:relative; padding-left:16px; font-size:14.5px; color:var(--ink); line-height:1.5; margin-top:4px;}
  .rules li::before{content:''; position:absolute; left:0; top:8px; width:6px; height:6px; background:var(--graphite);}
  @media (max-width:760px){ .checks{grid-template-columns:minmax(0,1fr);} }

  /* Credentials checklist */
  .clist{margin-top:14px; border-top:1px solid var(--line-2);}
  .clist li{display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:12px; align-items:center; padding:9px 0; border-bottom:1px solid var(--line-2);}
  .clist .n{font-size:14.5px; font-weight:500;}
  .clist .r{font-size:12.5px; color:var(--muted); text-align:right;}
  .clist .add{border:1px solid var(--line); font-size:12.5px; padding:4px 10px; color:var(--ink-2);}
  .clist .add:hover{border-color:var(--ink-2); color:var(--ink);}
  .clist li.flag .r{color:var(--attn); font-weight:600;}
  /* In a half-width card (Students, 11.515) the detail sits under the name, as on a phone. */
  .clist.stack li{grid-template-columns:minmax(0,1fr) auto; row-gap:2px;}
  .clist.stack .r{grid-column:1; grid-row:2; text-align:left;}
  .clist.stack .add{grid-row:1 / span 2; grid-column:2;}
  /* What it is (11.524): a quiet band under a section's opening, label left, two or three sentences right. */
  .about{border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2); background:var(--surface);}
  .about .in{display:grid; grid-template-columns:180px minmax(0,1fr); gap:24px; align-items:baseline; padding-top:26px; padding-bottom:26px;}
  .about .eyebrow{margin:0;}
  .about-t{margin:0; font-size:17px; line-height:1.6; color:var(--ink); max-width:68ch;}
  @media (max-width:760px){ .about .in{grid-template-columns:minmax(0,1fr); gap:8px;} .about-t{font-size:15.5px;} }
  .about + .hero-strip .in{padding-top:32px;}
  /* From overseas (11.534): each section's visa and overseas exceptions, in one marked block at its foot. */
  section.mdo.fromos{background:var(--sunk); border-top:1px solid var(--line);}   /* room between the band and the opening's rules */
  /* Home-buying routes (Money): each route states what it needs, open or not. */
  .routes li{grid-template-columns:minmax(0,1fr) auto;}
  .routes .n small{display:block; font-size:12.5px; color:var(--muted); font-weight:400; margin-top:2px;}
  .routes li.ok .r{color:var(--pos); font-weight:600;}
  .routes li.no .r{color:var(--muted);}
  .routes li.cost .r{color:var(--attn); font-weight:600;}
  /* Period table (rural HELP): one row per placement, scrolls inside its card on phones. */
  .ptw{overflow-x:auto; margin-top:4px;}
  .pt{width:100%; min-width:560px; border-collapse:collapse;}
  .pt th:first-child, .pt td:first-child{min-width:140px;}
  .pt th{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600; text-align:left; padding:6px 8px 6px 0;}
  .pt td{padding:5px 8px 5px 0; border-top:1px solid var(--line-2); vertical-align:middle;}
  .pt select, .pt input[type="month"], .pt input[type="number"]{background:var(--surface); border:1px solid var(--line); padding:6px 7px; font-size:13.5px; width:100%; border-radius:0;}
  .pt input[type="checkbox"]{width:18px; height:18px; accent-color:var(--ink);}
  .pt .mm{font-size:12px; color:var(--muted); white-space:nowrap;}
  .chk a.ghost{text-decoration:none; align-self:flex-start; margin-top:auto;}

  /* Relocation plan */
  .plan{margin-top:14px; border-top:1px solid var(--line-2);}
  .plan li{display:grid; grid-template-columns:96px minmax(0,1fr); gap:14px; padding:11px 0; border-bottom:1px solid var(--line-2);}
  .plan .when{font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--graphite); padding-top:2px;}
  .plan b{display:block; font-size:14.5px; font-weight:600;}
  .plan div > span{display:block; font-size:13.5px; color:var(--ink-2); margin-top:2px;}
  /* Who does each step. Gray, 11 Sep: "a planned itinerary and to-do list that Vaile has done for you,
     not something to deliberate over". Vaile prepares and she confirms anything sent in her name
     (PRODUCT_SYSTEM 2: the customer presses send). */
  .plan em.by{display:inline-block; font-style:normal; font-size:11.5px; font-weight:600; padding:1px 7px; margin-top:6px; background:var(--sunk); color:var(--ink-2);}
  .plan em.by.you{background:transparent; border:1px solid var(--ink); color:var(--ink);}

  /* Figures (packaging) */
  .figs{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--line-2); border:1px solid var(--line-2); margin-top:16px;}
  .figs div{background:var(--surface); padding:12px;}
  .figs dt{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:600;}
  .figs dd{margin:4px 0 0; font-size:21px; font-weight:600; letter-spacing:-.01em;}
  .figs dd small{display:block; font-size:12px; font-weight:400; color:var(--muted); letter-spacing:0;}
  .fine{font-size:13px; color:var(--muted); margin-top:12px;}

  /* Upload and read-back (insurance, super) */
  .drop{border:1px dashed var(--line); padding:18px; margin-top:14px; display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; background:color-mix(in srgb, var(--sunk) 40%, var(--surface));}
  .drop p{font-size:14px; color:var(--ink-2); margin-right:auto;}
  .readback{margin-top:14px; border:1px solid var(--line-2);}
  .readback .hd{display:flex; justify-content:space-between; gap:10px; padding:10px 12px; background:var(--sunk); font-size:12.5px; color:var(--muted);}
  .readback .hd b{color:var(--ink); font-weight:600;}
  .readback dl{margin:0; display:grid; grid-template-columns:auto minmax(0,1fr); gap:0;}
  .readback dt, .readback dd{padding:9px 12px; border-top:1px solid var(--line-2); font-size:14px;}
  .readback dt{color:var(--muted); white-space:nowrap;}
  .readback dd{margin:0; color:var(--ink);}
  .readback dd.gap{color:var(--attn);}

  /* Receipts (tax) */
  .rlist{margin-top:14px; border-top:1px solid var(--line-2); min-height:44px;}
  .rlist li{display:grid; grid-template-columns:62px minmax(0,1fr) auto; gap:12px; align-items:baseline; padding:9px 0; border-bottom:1px solid var(--line-2); font-size:14px;}
  .rlist .d{color:var(--muted); font-size:12.5px;}
  .rlist .job{display:block; font-size:12.5px; color:var(--muted);}
  .rlist .empty{grid-template-columns:1fr; color:var(--muted); font-size:13.5px;}

  /* What to know */
  .know{background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:clamp(40px,6vw,68px) 0;}
  .know h2, .dd h2{font-family:var(--f-serif); font-weight:420; font-size:clamp(28px,3vw,38px); letter-spacing:-.015em; line-height:1.1; margin-top:14px; max-width:26ch; text-wrap:balance;}
  .notes{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px 32px; margin-top:32px;}
  .note{border-top:2px solid var(--ink); padding-top:14px; display:flex; flex-direction:column; gap:8px;}
  .note h3{font-size:17px; font-weight:600; letter-spacing:-.005em; line-height:1.3;}
  .note p{font-size:15px; color:var(--ink-2); line-height:1.55;}
  .note .src{font-size:12.5px; color:var(--muted); margin-top:auto; padding-top:4px;}
  .tag{display:inline-block; font-size:11.5px; font-weight:600; padding:2px 7px; border:1px solid var(--line); color:var(--ink-2); align-self:flex-start;}
  .tag.req{background:var(--req-bg); color:var(--req); border-color:transparent;}

  /* What we do and do not do: the perimeter, said plainly */
  .dd{padding:clamp(40px,6vw,64px) 0;}
  .dd .cols{display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-top:26px;}
  .dd h3{font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:600;}
  .dd ul{margin-top:10px;}
  .dd li{display:grid; grid-template-columns:14px minmax(0,1fr); gap:12px; padding:10px 0; border-top:1px solid var(--line); font-size:15.5px;}
  .dd li i{width:8px; height:8px; margin-top:8px; display:block; background:var(--graphite);}
  .dd .dont li i{background:transparent; border:1.5px solid var(--muted);}
  .dd .dont li{color:var(--ink-2);}

  footer{padding:28px 0 44px; font-size:13px; color:var(--muted); border-top:1px solid var(--line);}

  dialog{border:1px solid var(--line); padding:0; max-width:520px; width:calc(100% - 32px); background:var(--surface); color:var(--ink); box-shadow:var(--lift);}
  dialog::backdrop{background:rgba(12,14,16,.45);}
  .dlg{padding:26px;}
  .dlg h2{font-family:var(--f-serif); font-weight:420; font-size:30px; line-height:1.1; letter-spacing:-.015em;}
  .dlg .lede{font-size:15px; color:var(--ink-2); margin-top:10px;}
  .dsteps{margin-top:18px; border-top:1px solid var(--line-2);}
  .dsteps li{display:grid; grid-template-columns:28px minmax(0,1fr); gap:12px; align-items:center; padding:13px 0; border-bottom:1px solid var(--line-2);}
  .dsteps .n{font-family:var(--f-serif); font-size:20px; color:var(--muted);}
  .dsteps b{display:block; font-size:15px; font-weight:600;}
  .dsteps span{font-size:13px; color:var(--muted);}
  .dlg .small{font-size:13px; color:var(--muted); margin-top:14px;}
  .dlg .btns{display:flex; gap:10px; margin-top:20px; justify-content:flex-end;}

  @media (max-width:960px){
    .hero .in{grid-template-columns:minmax(0,1fr);}
    .notes{grid-template-columns:repeat(2,minmax(0,1fr));}
  }
  @media (max-width:620px){
    .notes, .dd .cols, .row2{grid-template-columns:minmax(0,1fr);}
    .figs{grid-template-columns:minmax(0,1fr);}
    .readback dl{grid-template-columns:minmax(0,1fr);}
    .readback dt{white-space:normal; padding-bottom:0;}
    .readback dd{border-top:0; padding-top:2px;}
    .plan li{grid-template-columns:minmax(0,1fr); gap:4px;}
    .clist li{grid-template-columns:minmax(0,1fr) auto;}
    .clist .r{grid-column:1; grid-row:2; text-align:left;}
    .clist .add{grid-row:1 / span 2; grid-column:2;}
  }
  /* The portal's icons on the site: same glyphs, same category colours (design/client-dashboard.html). */
  .ico{width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; flex:none;
    background:color-mix(in srgb, var(--c) var(--tile-mix), var(--surface)); color:color-mix(in srgb, var(--c) var(--glyph-mix), #131316);}
  .ico svg{width:17px; height:17px;}
  .ico.sm{width:26px; height:26px;} .ico.sm svg{width:15px; height:15px;}
  .tool .tlede{font-size:15px; color:var(--ink-2); line-height:1.55; margin-top:12px;}
  .tool .res{background:var(--sunk); padding:12px 14px; color:var(--ink); font-size:14.5px; margin-top:14px;}
  /* The portal's hierarchy: the section's own icon in full colour, every supporting icon a light tint. */
  .ico.lt{background:color-mix(in srgb, var(--c) var(--row-mix), var(--surface));}
  .eyebrow.wi{display:flex; align-items:center; gap:10px;}
  /* Section tabs: every tool on the page, grouped by use case, in a bar under the site header that stays
     in view on desktop (Gray, 11 Sep: at the top, not tucked into the first section). */
  .subnav{background:var(--ground); border-bottom:1px solid var(--line); z-index:5;}
  .subnav .in{display:flex; gap:0; overflow-x:auto; scrollbar-width:none; padding-top:10px; padding-bottom:10px;}
  .subnav .in::-webkit-scrollbar{display:none;}
  .sg{flex:none; display:flex; flex-direction:column; gap:6px;}
  .sg + .sg{margin-left:14px; padding-left:14px; border-left:1px solid var(--line);}
  .sg-t{font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:600;}
  .sg-l{display:flex; gap:2px;}
  .subnav a{display:inline-flex; align-items:center; gap:7px; padding:3px 9px 3px 3px; border:1px solid transparent; background:transparent; font-size:13.5px; font-weight:500; color:var(--ink-2); white-space:nowrap; text-decoration:none;}
  .subnav a:hover{background:var(--surface); border-color:var(--line); color:var(--ink);}
  .subnav a[aria-current]{background:var(--surface); border-color:var(--ink); color:var(--ink);}
  .sg.on .sg-t{color:var(--ink);}   /* the page you are on (BUILD_STATE 11.493) */
  /* Back to the top (BUILD_STATE 11.500): square, white, an ink edge like the "See all" bar, ink on hover. Fixed to the
     page, not the bar, so it is there on phones too, where the bar does not stick. */
  .totop{position:fixed; right:clamp(16px,3vw,32px); bottom:clamp(16px,3vw,32px); z-index:20; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
    width:52px; height:52px; padding:0; background:var(--surface); color:var(--ink); border:1px solid var(--ink);
    box-shadow:0 1px 2px rgba(16,18,20,.06), 0 10px 24px -14px rgba(16,18,20,.35);
    font:inherit; font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; line-height:1; cursor:pointer;}
  .totop svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8;}
  .totop:hover{background:var(--ink); color:var(--ground);}
  .totop:focus-visible{outline:2px solid var(--ink); outline-offset:3px;}
  .totop[hidden]{display:none;}
  /* Calculators start empty (BUILD_STATE 11.501): until every box is filled, the results give way to a quiet note in a
     dashed square, the site's own mark for "yours goes here". */
  /* The rural rating table (BUILD_STATE 11.502): wide, so it scrolls inside its own frame on a phone. */
  .tbl.rural{overflow-x:auto; margin-top:22px;} .tbl.rural table{min-width:880px;} .tbl.rural.fit table{min-width:0; width:100%;}
  .tbl td.org small{display:block; font-weight:400; color:var(--muted); font-size:12.5px; margin-top:2px;}
  .rt-h{font-size:18px; font-weight:600; margin:40px 0 0;} .rt-h + .intro{margin-top:6px;}
  /* Rules beside the block they are about (BUILD_STATE 11.506): a small label, then the cards. Under the hero they sit
     in their own band with no rule above, so they read as part of it. */
  .rstrip{margin-top:32px;}
  .rs-h{font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:0;}
  .rstrip .rb-rules{margin-top:12px;}
  #page > section.hero-strip{padding:0 0 clamp(40px,5vw,60px); border-top:0 !important;}
  section.hero-strip .rstrip{margin-top:0;}
  /* What we do and don't, beside its block (BUILD_STATE 11.509): the Straight answers columns, smaller. */
  section.hero-strip .in > .ddstrip:not(:first-child), .rstrip + .ddstrip{margin-top:32px;}
  .ddstrip .cols{display:grid; grid-template-columns:1fr 1fr; gap:32px;}
  .ddstrip .cols.one{grid-template-columns:minmax(0,1fr);}
  .ddstrip h3{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:600;}
  .ddstrip ul{margin-top:12px;}
  .ddstrip li{display:grid; grid-template-columns:14px minmax(0,1fr); gap:12px; padding:9px 0; border-top:1px solid var(--line); font-size:15px;}
  .ddstrip li i{width:8px; height:8px; margin-top:8px; display:block; background:var(--graphite);}
  .ddstrip .dont li i{background:transparent; border:1.5px solid var(--muted);}
  .ddstrip .dont li{color:var(--ink-2);}
  @media (max-width:760px){ .ddstrip .cols{grid-template-columns:minmax(0,1fr);} }
  /* A link that reads as the card's button (Training's pointer to Return of service, BUILD_STATE 11.505). */
  .go-link{display:inline-flex; align-self:flex-start; margin-top:auto; padding:10px 16px; border:1px solid var(--ink); background:var(--surface); color:var(--ink); font-size:14.5px; font-weight:600; text-decoration:none;}
  .go-link::after{content:'\2192'; margin-left:8px;}
  .go-link:hover{background:var(--ink); color:var(--ground);}
  /* A row with one card, and a one-line link banner (BUILD_STATE 11.510). */
  .checks.one{grid-template-columns:minmax(0,1fr);}
  .field.narrow{max-width:340px; margin-top:20px;}   /* a single picker above a table (11.536) */
  .rb-links.one{grid-template-columns:minmax(0,1fr);}
  .tbl.rural.st table{min-width:980px;}
  .tbl td.src-c{font-size:12.5px; color:var(--muted); min-width:120px;}   /* the registration table's source column (11.514) */
  .fill-note{display:none; margin:14px 0 0; padding:14px 16px; border:1px dashed var(--line); color:var(--muted); font-size:14px; line-height:1.45;}
  .is-empty .fill-note{display:block;}
  .is-empty [data-out]{display:none !important;}
  .is-empty td[data-out]{display:table-cell !important; visibility:hidden;}   /* a table keeps its columns */
  .fill-note.out{display:block; margin:22px 0 0;} .fill-note.out[hidden]{display:none;}
  @media print{ .totop{display:none;} }
  section[id], .tool[id]{scroll-margin-top:calc(var(--hh, 64px) + var(--snh, 76px) + 16px);}   /* header and sub-menu both stick (11.512) */
  @media (min-width:761px){ .subnav{position:sticky; top:0;} }
  /* Every option in view on a desktop (Gray, 13 Sep 2026: "every option listed at all times"; BUILD_STATE 11.493):
     the groups wrap instead of scrolling. No dividers: a wrapped row would start or end on one; the gap and each
     group's label separate them. */
  @media (min-width:761px){
    .subnav .in{flex-wrap:wrap; column-gap:32px; row-gap:12px; overflow-x:visible;}
    .sg + .sg{margin-left:0; padding-left:0; border-left:0;}
  }
  @media (max-width:760px){ section[id], .tool[id]{scroll-margin-top:calc(var(--hh, 64px) + 12px);} }
  /* The itinerary reads across in phases rather than down one narrow column (Gray, 11 Sep). */
  .itin{padding:clamp(36px,5vw,56px) 0; border-top:1px solid var(--line);}
  .itin h2{font-family:var(--f-serif); font-weight:420; font-size:clamp(26px,2.8vw,34px); letter-spacing:-.015em; line-height:1.1; margin-top:14px; max-width:28ch; text-wrap:balance;}
  .phases{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:24px; align-items:start;}
  .phase{background:var(--surface); border:1px solid var(--line); padding:18px 18px 6px;}
  .phase > h3{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:600;}
  .phase .plan{margin-top:8px; border-top:0;}
  .phase .plan li{grid-template-columns:auto minmax(0,1fr); gap:12px; padding:12px 0; border-bottom:1px solid var(--line-2);}
  .phase .plan li:last-child{border-bottom:0;}
  .phase .plan .when{display:block; padding:0; margin-bottom:3px;}
  /* Going home (Relocation): its own form row above the same phased plan as arrival. A referral wears a dashed tag. */
  .hform{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin-top:22px;}
  @media (max-width:960px){ .hform{grid-template-columns:repeat(2,minmax(0,1fr));} }
  @media (max-width:560px){ .hform{grid-template-columns:minmax(0,1fr);} }
  .plan em.by.ref{background:transparent; border:1px dashed var(--graphite); color:var(--ink-2);}
  @media (max-width:960px){ .phases{grid-template-columns:minmax(0,1fr);} }
  /* Top nav (Gray, 11 Sep: "too tight and too much on there"): three items. Tools & guides opens every section,
     grouped; Vehicle and Relocation, the services Vaile runs, stay one click away. Section icons are full colour. */
  .site{position:relative; z-index:20;}
  .topnav{display:flex; align-items:center; gap:4px; font-size:14.5px; min-width:0;}
  .topnav > a, .topnav > .tg{padding:8px 12px; color:var(--ink-2); text-decoration:none; white-space:nowrap; display:inline-flex; align-items:center; gap:6px; background:none; border:0; font:inherit; cursor:pointer;}
  .topnav > a:hover, .topnav > .tg:hover{color:var(--ink);}
  .topnav > a[aria-current], .topnav > .tg.on{color:var(--ink); font-weight:600; box-shadow:inset 0 -2px 0 var(--ink);}
  .topnav .chev{width:13px; height:13px; transition:transform .15s;}
  .topnav .tg[aria-expanded="true"] .chev{transform:rotate(180deg);}
  .mega{position:absolute; left:0; right:0; top:100%; background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); box-shadow:var(--lift);}
  .mega .in{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; height:auto; align-items:start; padding-top:22px; padding-bottom:26px;}
  .mega h3{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:600;}
  .mega ul{margin:10px 0 0; padding:0; list-style:none; display:grid; gap:2px;}
  .mega a{display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; align-items:center; padding:8px; text-decoration:none; color:var(--ink);}
  .mega a:hover, .mega a[aria-current]{background:var(--sunk);}
  .mega a b{display:block; font-size:14.5px; font-weight:600; line-height:1.3;}
  .mega a small{display:block; font-size:12.5px; color:var(--muted); line-height:1.35;}
  /* The whole bar sticks: the header (logo and main navigation) on every page, and a page's sub-menu just under it
     (Gray, 13 Sep 2026; BUILD_STATE 11.512). header.site outranks each page's own .site rule. --hh is the header's
     height, measured by the script at the foot of the page. */
  header.site{position:sticky; top:0; z-index:30; background:var(--ground);}
  @media (min-width:761px){ body .subnav{top:calc(var(--hh, 64px) - 1px);}   /* a pixel under the header, so no sliver shows (11.517) */ }
  /* The heading menus (Career, Money, Insurance, Relocation): the old panel's look, each entry on its section's colour
     tile (Gray, 14 Sep 2026: "the mega menu looked great, but the new drop downs are bland and monochrome"; 11.521). */
  .relm .in{display:block;}
  .relm ul{grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px 24px;}
  /* The sections are the top headings (Gray, 14 Sep 2026: "Career / Finances / Cover / Family / Vehicle / Relocation",
     then "yes, build it"; BUILD_STATE 11.519). Below 1001px the headings no longer fit beside Sign in, so the
     all-sections button is the one menu there: labelled on small tablets, an icon on phones. */
  @media (min-width:1001px){ .topnav > .tg:not(.tgr){display:none;} }
  @media (min-width:561px) and (max-width:1000px){ .topnav > a, .topnav > .tgr{display:none;} }
  @media (max-width:900px){ .relm ul{grid-template-columns:repeat(2,minmax(0,1fr));} }
  @media (max-width:560px){ .topnav > .tgr{display:none;} }
  .mico{width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; flex:none;
    background:color-mix(in srgb, var(--c) var(--tile-mix), var(--surface)); color:color-mix(in srgb, var(--c) var(--glyph-mix), #131316);}
  .mico svg{width:17px; height:17px;}
  @media (prefers-reduced-motion: reduce){ .topnav .chev{transition:none;} }
  @media (max-width:900px){ .mega .in{grid-template-columns:repeat(2,minmax(0,1fr));} }
  @media (max-width:560px){ .topnav > a{display:none;} .mega .in{grid-template-columns:minmax(0,1fr);} }
  /* Small screens (Gray, 11 Sep: the homepage button covered "Tools &"): the menu button becomes an icon, the same
     on every page. */
  .topnav .tgm{display:none; width:22px; height:22px;}
  @media (max-width:560px){ .topnav .tgl, .topnav > .tg .chev{display:none;} .topnav .tgm{display:block;} .topnav > .tg{padding:8px;} }
  /* Phones (Gray, 12 Sep: "the body copy text is way too big across everything - so it's endless scrolling"): one
     tighter scale. Body copy 14.5 to 16px, headlines a size down so they sit on two or three lines, spacing trimmed. */
  @media (max-width:560px){
    .hero .in{padding-top:28px; padding-bottom:32px;}
    .hero h1{font-size:29px;}
    .hero .lede{font-size:15.5px; margin-top:12px;}
    .facts{margin-top:16px; font-size:13.5px;}
    .tool{padding:16px;}
    .mdo, .itin, .know, .dd{padding:32px 0;}
    .mdo h2, .itin h2{font-size:23px;} .know h2, .dd h2{font-size:24px;}
    .mdo .intro{font-size:15px;}
    .chk h3{font-size:17px;}
    .notes{margin-top:22px; gap:22px;} .note h3{font-size:16px;} .note p{font-size:14.5px;}
    .dd li{font-size:14.5px;}
    .figs dd{font-size:19px;}
  }
  /* Phones: What to know collapses to its headings; a tap opens a note (Gray, 12 Sep). Desktop is unchanged. */
  @media (max-width:560px){
    .notes{gap:0; border-bottom:1px solid var(--line);}
    .note{border-top:1px solid var(--line); padding:13px 0; gap:6px;}
    .note h3{position:relative; padding-right:28px; cursor:pointer;}
    .note h3::after{content:""; position:absolute; right:6px; top:.3em; width:8px; height:8px; border-right:1.6px solid var(--ink-2); border-bottom:1.6px solid var(--ink-2); transform:rotate(45deg); transition:transform .15s;}
    .note.open h3::after{transform:rotate(225deg); top:.55em;}
    .note:not(.open) > p{display:none;}
  }
  @media (prefers-reduced-motion: reduce){ .note h3::after{transition:none;} }
  /* ---- Hierarchy pass, 13 Sep 2026 (Gray: "make the 'illustrative' stuff like the itineraries and the mock examples
     look different to the core information --- it's all blending in together"; "a lot of content with not a lot of
     hierarchy / definition"; BUILD_STATE 11.485). Four registers: core information on the plain page in the site's
     type; examples inside one app-like frame (a dark bar marked EXAMPLE, the portal's Inter, a cool grey ground and
     rounded corners, which nothing else has); tools as white cards; chapters above sections. Rows carry three things,
     when, what and one line, with the detail a tap away. ---- */
  /* Revised 13 Sep 2026 (Gray: "Why have you chosen dark bar and grey background? It doesn't seem to really fit with
     the design language"; BUILD_STATE 11.486): an example is a figure, built only from the site's own materials: the
     site's sunk grey, square corners, no border, a caption in the eyebrow style, the portal's Inter inside. This
     supersedes the dark bar, cool grey and rounded corners described above. */
  :root{ --ex-bg:var(--sunk, #ECEEEF); --ex-line:var(--line, #E2E2E1); --ex-ink:var(--ink, #131316); --ex-muted:var(--muted, #6A6C70); }
  .ex{background:var(--ex-bg); border:0; border-radius:0; overflow:hidden; font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; color:var(--ex-ink); margin-top:24px;}
  .ex-bar{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; padding:14px 18px 4px; background:transparent; color:var(--ex-muted); font-family:var(--f-sans, 'Hanken Grotesk', system-ui, sans-serif); font-size:13px; line-height:1.45;}
  .ex-tag{font-family:var(--f-sans, 'Hanken Grotesk', system-ui, sans-serif); font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--graphite, #3A3D42); background:none; padding:0; border-radius:0;}
  .ex-body{padding:16px 18px;}
  .ex-note{font-size:12.5px; color:var(--ex-muted); padding:0 18px 14px; line-height:1.5;}
  /* One row, three things: when, what, one short line; the detail opens on a tap. */
  .it summary{list-style:none; cursor:pointer; display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:2px 10px; align-items:start; padding:10px 0;}
  .it summary::-webkit-details-marker{display:none;}
  .it summary::after{content:'+'; grid-column:3; font-size:16px; line-height:1.2; color:var(--ex-muted);}
  .it[open] summary::after{content:'\2212';}
  .it .it-when{grid-column:1 / -1; font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--ex-muted);}
  .it summary b{font-size:14px; font-weight:600; line-height:1.35;}
  .it summary:hover b{text-decoration:underline; text-underline-offset:3px;}
  .it .it-tag{grid-column:2; font-style:normal; font-size:11px; font-weight:600; padding:1px 7px; border:1px solid currentColor; align-self:start; white-space:nowrap;}
  .it .it-tag.ref{border-style:dashed;}
  .it p{font-size:13.5px; color:var(--ex-muted); line-height:1.5; padding:0 0 12px; max-width:62ch;}
  /* A plan inside the frame: columns without boxes. */
  .ex .phases{margin-top:0; gap:0;}
  .ex .phase{background:transparent; border:0; border-left:1px solid var(--ex-line); padding:12px 18px 4px;}
  .ex .phase:first-child{border-left:0;}
  .ex .phase > h3{color:var(--ex-muted); font-size:11px;}
  .ex .plan{margin-top:4px; border-top:0;}
  .ex .plan li{display:block; padding:0; border:0; border-top:1px solid var(--ex-line);}
  .ex .plan li:first-child{border-top:0;}
  @media (max-width:960px){ .ex .phase{border-left:0; border-top:1px solid var(--ex-line);} .ex .phase:first-child{border-top:0;} }
  /* Lists that are not itineraries: plain, on the page, grouped under a small heading. */
  .ilist{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px 40px; margin-top:26px; align-items:start;}
  .ilist h3{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); font-weight:600; padding-bottom:8px; border-bottom:2px solid var(--ink);}
  .ilist li{border-bottom:1px solid var(--line);}
  .ilist .it .it-when, .ilist .it p, .ilist .it summary::after{color:var(--muted);}
  @media (max-width:960px){ .ilist{grid-template-columns:minmax(0,1fr); gap:28px;} }
  /* Read-backs are always examples, so they wear the frame; a result that follows one joins it. */
  .readback{background:var(--ex-bg); border:0; border-radius:0; overflow:hidden; font-family:'Inter',system-ui,-apple-system,sans-serif; color:var(--ex-ink);}
  .readback .hd{background:transparent; color:var(--ex-muted); align-items:baseline; border-bottom:1px solid var(--ex-line); justify-content:flex-start; gap:10px; font-size:12px;}
  .readback .hd b{color:var(--ex-ink);}
  .readback .hd b::first-letter{text-transform:uppercase;}
  .readback .hd > span:last-child{margin-left:auto;}
  .readback dt, .readback dd{border-top-color:var(--ex-line); font-size:13.5px;}
  .readback dt{color:var(--ex-muted);}
  .readback dt.grp{background:transparent; color:var(--ex-muted);}
  .readback + .res{margin-top:0; background:var(--ex-bg); border:0; border-top:1px solid var(--ex-line); border-radius:0; font-family:'Inter',system-ui,-apple-system,sans-serif; font-size:13.5px; color:var(--ex-ink);}
  /* What to know: questions that open, two columns, the requirement marked. */
  .notes{grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 40px; margin-top:26px;}
  details.note{border-top:1px solid var(--line); padding:0; display:block;}
  details.note summary{list-style:none; cursor:pointer; display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:10px; align-items:start; padding:14px 0;}
  details.note summary::-webkit-details-marker{display:none;}
  details.note .nt{font-size:16px; font-weight:600; line-height:1.35;}
  details.note summary:hover .nt{text-decoration:underline; text-underline-offset:3px;}
  details.note summary::after{content:'+'; font-size:18px; line-height:1.1; color:var(--muted);}
  details.note[open] summary::after{content:'\2212';}
  details.note[open] > p{display:block; font-size:15px; color:var(--ink-2); line-height:1.55; padding:0 0 8px; max-width:60ch;}
  details.note[open] > p.src{font-size:12.5px; color:var(--muted); padding-bottom:16px;}
  @media (max-width:760px){ .notes{grid-template-columns:minmax(0,1fr);} }
  /* Chapters: where the use-case group changes, a heading that outranks every section under it. */
  .chap .in{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 18px; padding-top:clamp(40px,5vw,64px);}
  .chap .in::before{content:''; flex:0 0 100%; height:3px; background:var(--ink); margin-bottom:clamp(12px,1.6vw,18px);}
  .chap-t{font-family:var(--f-serif); font-weight:420; font-optical-sizing:auto; font-size:clamp(34px,4.2vw,52px); letter-spacing:-.022em; line-height:1.02;}
  .chap-l{font-size:14px; color:var(--muted);}
  .chap + section{border-top:0; padding-top:clamp(18px,2.6vw,30px);}
  .mdo h2, .itin h2{font-size:clamp(23px,2.3vw,29px);}
  .know h2, .dd h2{font-size:clamp(24px,2.5vw,31px);}
  @media (max-width:560px){ .chap-t{font-size:30px;} .chap-l{font-size:13px;} }
  /* ---- Relocation pilot of the visual system, 13 Sep 2026 (BUILD_STATE 11.487). The page takes its section's colour
     boldly; type runs in a few distinct sizes (display figures, serif headings, short body, small labels) and little
     in between; every block leads with one big thing. Scoped to #page.v2 so the other sections are untouched. ---- */
  :root{ --v2-tint:color-mix(in srgb, var(--c-move) 32%, var(--ground)); --v2-tint-2:color-mix(in srgb, var(--c-move) 15%, var(--ground)); }
  @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --v2-tint:color-mix(in srgb, var(--c-move) 16%, var(--ground)); --v2-tint-2:color-mix(in srgb, var(--c-move) 8%, var(--ground)); } }
  :root[data-theme="dark"]{ --v2-tint:color-mix(in srgb, var(--c-move) 16%, var(--ground)); --v2-tint-2:color-mix(in srgb, var(--c-move) 8%, var(--ground)); }
  /* Revised the same day (Gray: "The branding / colours is too much - quite ugly"): the neutral palette throughout; the
     section colour survives only in its icons. Every section on the page takes the large serif heading. */
  .v2 .mdo, .v2 .itin, .v2 .know, .v2 .dd{padding:clamp(56px,7vw,88px) 0;}
  .v2 .mdo h2, .v2 .itin h2, .v2 .know h2, .v2 .dd h2{font-family:var(--f-serif); font-weight:420; font-optical-sizing:auto; font-size:clamp(32px,3.9vw,50px); line-height:1.03; letter-spacing:-.022em; max-width:21ch;}
  .v2 .v2hero h1{font-size:clamp(46px,6.2vw,84px); line-height:.97; letter-spacing:-.03em;}
  .v2 .v2hero .lede{font-size:clamp(18px,1.7vw,21px); max-width:30ch;}
  .v2 .v2hero .tool{border:0;}
  .v2 .figs{background:transparent; border:0; gap:8px;}
  .v2 .figs div{background:var(--sunk); padding:14px;}
  .v2 .figs dd{font-family:var(--f-serif); font-weight:420; font-size:clamp(28px,2.7vw,38px); letter-spacing:-.02em; line-height:1.05;}
  .v2 .v2tl, .v2 .v2tools, .v2 .v2band, .v2 .v2dark{padding:clamp(56px,7vw,96px) 0;}
  .v2 .v2tl h2, .v2 .v2tools h2, .v2 .v2band h2, .v2 .v2dark h2{font-family:var(--f-serif); font-weight:420; font-optical-sizing:auto; font-size:clamp(34px,4.2vw,54px); line-height:1.02; letter-spacing:-.022em; margin-top:12px; max-width:20ch; text-wrap:balance;}
  .v2 .v2dark{background:var(--panel); color:var(--panel-fg);}
  .v2 .v2dark .eyebrow{color:var(--panel-muted);}
  .v2 .v2band{background:var(--surface); border-top:1px solid var(--line);}
  .v2stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:36px;}
  .v2s{background:var(--surface); border-top:2px solid var(--ink); padding:22px 22px 26px;}
  .v2band .v2s{background:var(--ground);}
  .v2dark .v2s{background:rgba(242,242,241,.06); border-top-color:var(--panel-fg);}
  .v2s em{display:block; font-style:normal; font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--muted); margin-bottom:6px;}
  .v2dark .v2s em{color:var(--panel-muted);}
  .v2s b{display:block; font-family:var(--f-serif); font-weight:420; font-size:clamp(46px,5.4vw,72px); line-height:.95; letter-spacing:-.035em;}
  .v2s span{display:block; margin-top:14px; font-size:15px; line-height:1.45; color:var(--ink-2); max-width:28ch;}
  .v2dark .v2s span{color:var(--panel-muted);}
  .v2more{margin-top:26px;}
  .v2more summary{cursor:pointer; list-style:none; display:inline-block; font-weight:600; font-size:15px; text-decoration:underline; text-underline-offset:4px;}
  .v2more summary::-webkit-details-marker{display:none;}
  .v2more .tbl{color:var(--ink); margin-top:16px;}
  .v2more .fine{color:var(--panel-muted);}
  .v2 .know .v2all{margin-top:22px;}
  /* The move as a timeline: one line in the section's colour, labels alternating above and below. */
  .tl-phs{display:grid; grid-template-columns:repeat(var(--n,10),minmax(0,1fr)); margin-top:34px;}
  .tl-ph{font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--ink-2); border-top:2px solid var(--ink); padding-top:8px; margin-right:14px;}
  .tl{position:relative; display:grid; grid-template-columns:repeat(var(--n,10),minmax(0,1fr)); height:310px;}
  .tl::before{content:''; position:absolute; left:0; right:0; top:50%; height:2px; margin-top:-1px; background:var(--ink);}
  .tl-i{position:relative;}
  .tl-dot{position:absolute; left:50%; top:50%; width:16px; height:16px; transform:translate(-50%,-50%); background:var(--ink);}
  .tl-i.you .tl-dot{background:var(--ground); box-shadow:inset 0 0 0 3px var(--ink);}
  .tl-i::after{content:''; position:absolute; left:50%; width:1px; height:16px; background:var(--ink-2);}
  .tl-i.up::after{bottom:calc(50% + 10px);} .tl-i.down::after{top:calc(50% + 10px);}
  .tl-lab{position:absolute; left:50%; transform:translateX(-50%); width:calc(200% - 12px); text-align:center;}
  .tl-i.up .tl-lab{bottom:calc(50% + 30px);} .tl-i.down .tl-lab{top:calc(50% + 30px);}
  .tl-i:first-child .tl-lab{left:0; transform:none; text-align:left; width:calc(150% - 12px);}
  .tl-i:last-child .tl-lab{left:auto; right:0; transform:none; text-align:right; width:calc(150% - 12px);}
  .v2 .figs dd small{font-family:var(--f-sans); letter-spacing:0;}
  .tl-d{display:block; font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:var(--muted);}
  .tl-lab b{display:block; font-size:14.5px; font-weight:600; line-height:1.3; margin-top:4px;}
  .v2cap{display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; margin-top:8px; font-size:13px; color:var(--muted);}
  .v2cap span{display:inline-flex; align-items:center; gap:7px;}
  .v2cap .k{width:12px; height:12px; background:var(--ink); display:inline-block;}
  .v2cap .k.you{background:transparent; box-shadow:inset 0 0 0 2px var(--ink);}
  @media (max-width:900px){ .v2stats, .v2grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
  @media (max-width:760px){
    .tl-phs{display:none;}
    .tl{display:block; height:auto; margin-top:26px; border-left:2px solid var(--ink); padding-left:22px;}
    .tl::before{display:none;}
    .tl-i{padding:10px 0;}
    .tl-dot{left:-31px; top:15px; transform:none;}
    .tl-i::after{display:none;}
    .tl-lab, .tl-i:first-child .tl-lab, .tl-i:last-child .tl-lab{position:static; transform:none; width:auto; text-align:left;}
  }
  @media (max-width:560px){ .v2stats, .v2grid{grid-template-columns:minmax(0,1fr);} .v2c{min-height:0;} }
  /* ---- Relocation rebuilt, 13 Sep 2026 (Gray: "Option B. But the design language has to match the existing - sharp
     corners, rectangles not pills"; BUILD_STATE 11.490). White cards on the bone ground with a soft shadow, square
     corners throughout, rectangular chips; colour carries meaning: blue Vaile, orange you, an outline for a referral,
     rose for a requirement, blue for good to know. Scoped to #page.rb. ---- */
  .rbar{background:var(--ground); border-bottom:1px solid var(--line);}
  .rbar .in{display:flex; gap:4px; overflow-x:auto; scrollbar-width:none;}
  .rbar .in::-webkit-scrollbar{display:none;}
  .rbar a{padding:14px 14px 12px; font-size:14.5px; font-weight:500; color:var(--ink-2); text-decoration:none; white-space:nowrap; border-bottom:2px solid transparent;}
  .rbar a:first-child{padding-left:0;}
  .rbar a:hover{color:var(--ink);}
  .rbar a[aria-current]{color:var(--ink); font-weight:600; border-bottom-color:var(--ink);}
  .rc{background:var(--surface); border:1px solid var(--line); box-shadow:0 1px 2px rgba(16,18,20,.05), 0 12px 28px -22px rgba(16,18,20,.25);}
  .rb .rb-sec{padding:clamp(40px,5vw,60px) 0;}
  .rb .rb-sec + .rb-sec{padding-top:0;}
  .rb .rb-sec h2{font-family:var(--f-serif); font-weight:420; font-optical-sizing:auto; font-size:clamp(28px,3.4vw,42px); line-height:1.06; letter-spacing:-.018em; margin-top:12px; max-width:26ch; text-wrap:balance;}
  .rb .rb-sec .sub{font-size:16px; color:var(--ink-2); margin-top:8px; max-width:62ch;}
  .chip{display:inline-block; font-size:11.5px; font-weight:600; padding:3px 8px; line-height:1.3; white-space:nowrap; color:var(--ink);}
  .chip.v{background:color-mix(in srgb, var(--c-cred) 36%, var(--surface));}
  .chip.y{background:color-mix(in srgb, var(--c-move) 44%, var(--surface));}
  .chip.r{background:transparent; box-shadow:inset 0 0 0 1px var(--graphite);}
  .chip.req{background:color-mix(in srgb, var(--c-insurance) 44%, var(--surface));}
  .chip.tip{background:color-mix(in srgb, var(--c-tax) 40%, var(--surface));}
  .rb .figs{background:transparent; border:0; gap:8px;}
  .rb .figs div:nth-child(1){background:color-mix(in srgb, var(--sc, var(--c-move)) 30%, var(--surface));}
  .rb .figs div:nth-child(2){background:color-mix(in srgb, var(--c-vehicles) 34%, var(--surface));}
  .rb .figs div:nth-child(3){background:color-mix(in srgb, var(--c-tax) 34%, var(--surface));}
  .rb .figs dd{font-size:26px; font-weight:700; letter-spacing:-.02em;}
  .rb-steps{padding:4px 22px 10px; margin-top:22px;}
  .rb-steps .sp-ph{font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); padding:18px 0 6px;}
  .rb-steps .sp-r{display:grid; grid-template-columns:124px 12px minmax(0,1fr) auto; gap:14px; align-items:center; padding:10px 0; border-top:1px solid var(--line-2);}
  .rb-steps .sp-ph + .sp-r{border-top:0;}
  .sp-d{font-size:13px; font-weight:600; background:var(--sunk); padding:5px 8px; text-align:center; font-variant-numeric:tabular-nums; white-space:nowrap;}
  .sp-m{width:12px; height:12px; display:inline-block; background:var(--line); flex:none;}
  .sp-m.v{background:var(--c-cred);} .sp-m.y{background:var(--c-move);} .sp-m.r{background:transparent; box-shadow:inset 0 0 0 2px var(--graphite);}
  .sp-r b{font-size:16px; font-weight:600; line-height:1.35;}
  .rb-legend{display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:12px; font-size:13px; color:var(--muted); align-items:center;}
  .rb-legend span{display:inline-flex; align-items:center; gap:7px;}
  .rb-nums{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:22px;}
  .rb-nums.four{grid-template-columns:repeat(4,minmax(0,1fr));}
  .rb-num{padding:20px 20px 22px;}
  .rb-num .t{display:flex; align-items:center; gap:10px; font-size:14px; font-weight:600;}
  .rb-num b{display:block; font-size:clamp(30px,3vw,40px); font-weight:700; letter-spacing:-.03em; line-height:1.05; margin-top:14px; font-variant-numeric:tabular-nums;}
  .rb-num span{display:block; font-size:14px; color:var(--ink-2); margin-top:6px; line-height:1.45;}
  .rb-more{margin-top:18px;}
  .rb-more summary{display:inline-block; cursor:pointer; list-style:none; border:1px solid var(--line); background:var(--surface); padding:10px 16px; font-size:14.5px; font-weight:600;}
  .rb-more summary::-webkit-details-marker{display:none;}
  .rb-more summary::after{content:' +'; color:var(--muted);} .rb-more[open] summary::after{content:' \2212';}
  .rb-more .tbl{margin-top:16px;}
  .rb-links{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:22px;}
  .rb-link{display:flex; align-items:center; gap:14px; padding:18px 20px; text-decoration:none; color:var(--ink);}
  .rb-link .ico{width:44px; height:44px;} .rb-link .ico svg{width:22px; height:22px;}
  .rb-link b{display:block; font-size:17px;} .rb-link .l{display:block; font-size:14px; color:var(--ink-2); margin-top:2px;}
  .rb-link::after{content:'\2192'; margin-left:auto; font-size:18px; color:var(--muted);}
  .rb-link:hover, .rb-stage:hover{border-color:var(--ink-2);}
  button.rb-link{font:inherit; text-align:left; width:100%; cursor:pointer;}   /* a referral banner (11.536) */
  .rb-stages{display:grid; gap:12px;}
  .rb-stage{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:4px 16px; align-items:center; padding:18px 20px; text-decoration:none; color:var(--ink);}
  .rb-stage .ico{grid-row:1 / span 2; width:48px; height:48px;} .rb-stage .ico svg{width:24px; height:24px;}
  .rb-stage b{font-family:var(--f-serif); font-weight:450; font-size:26px; line-height:1.1;}
  .rb-stage .l{grid-column:2; font-size:14px; color:var(--ink-2); line-height:1.45;}
  .rb-stage::after{content:'\2192'; grid-column:3; grid-row:1 / span 2; font-size:20px; color:var(--muted);}
  .rb-rules{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:22px;}
  .rb-rule{padding:18px 20px; display:flex; flex-direction:column; gap:8px; align-items:flex-start;}
  .rb-rule b{font-size:17px; line-height:1.3;} .rb-rule .rb-t{font-size:14.5px; color:var(--ink-2); line-height:1.5;} .rb-rule small{font-size:12.5px; color:var(--muted); margin-top:auto;}
  .rb-all{margin-top:16px;}
  .rb-rule[hidden]{display:none;}
  /* "See all" and "Every state's policy": full width, an ink edge, bold, a plus that turns to a minus (Gray, 13 Sep 2026:
     "hard to see - they need to be more prominent"; BUILD_STATE 11.497). Square, in the site's shapes. */
  .rb-all, .rb-more summary{display:flex; width:100%; align-items:center; justify-content:space-between; gap:12px; margin-top:16px; padding:14px 20px;
    background:var(--surface); border:1px solid var(--ink); color:var(--ink); font:inherit; font-size:15px; font-weight:600; line-height:1.3; cursor:pointer; text-align:left;}
  .rb-more summary{margin-top:0;}
  .rb-all::after, .rb-more summary::after{content:'+'; color:inherit; font-size:22px; line-height:1; font-weight:400;}
  .rb-more[open] summary::after{content:'\2212';}
  .rb-all:hover, .rb-more summary:hover{background:var(--ink); color:var(--ground);}
  .rb-all:focus-visible, .rb-more summary:focus-visible{outline:2px solid var(--ink); outline-offset:3px;}
  /* ---- Rolled out to every section, 13 Sep 2026 (BUILD_STATE 11.491): the same headings, white cards with the soft
     shadow, results tinted in the section's own colour (--sc), examples as white read-backs marked with a black
     EXAMPLE chip, tables lifted like cards. ---- */
  #page > section[hidden]{display:none !important;}
  .rb .mdo, .rb .itin, .rb .know, .rb .dd{padding:clamp(40px,5vw,60px) 0;}
  .rb .mdo h2, .rb .itin h2, .rb .dd h2{font-family:var(--f-serif); font-weight:420; font-optical-sizing:auto; font-size:clamp(28px,3.4vw,42px); line-height:1.06; letter-spacing:-.018em; max-width:26ch; text-wrap:balance;}
  .rb .chk, .rb .tbl{box-shadow:0 1px 2px rgba(16,18,20,.05), 0 12px 28px -22px rgba(16,18,20,.25);}
  .rb .res{background:color-mix(in srgb, var(--sc, var(--c-move)) 24%, var(--surface)); color:var(--ink);}
  .rb .readback{background:var(--surface); border:1px solid var(--line); font-family:var(--f-sans); color:var(--ink);}
  .rb .readback .hd{background:transparent; color:var(--muted); border-bottom:1px solid var(--line); font-family:var(--f-sans);}
  .rb .readback .hd b{color:var(--ink);}
  .rb .readback .ex-tag{background:var(--ink); color:var(--ground); padding:3px 8px; font-size:10.5px; letter-spacing:.12em;}
  .rb .readback dt, .rb .readback dd{border-top-color:var(--line-2); font-size:14px;}
  .rb .readback dt{color:var(--muted);} .rb .readback dt.grp{background:var(--ground); color:var(--ink-2);}
  .rb .readback + .res{border:1px solid var(--line); border-top:0; background:color-mix(in srgb, var(--sc, var(--c-move)) 24%, var(--surface)); font-family:var(--f-sans); font-size:14.5px;}
  .rb-ph{padding:clamp(36px,5vw,56px) 0 0;}
  .rb-ph h1{font-family:var(--f-serif); font-weight:420; font-optical-sizing:auto; font-size:clamp(36px,4.6vw,58px); line-height:1.02; letter-spacing:-.022em; margin-top:14px;}
  .rb-ph + section{border-top:0;}
  .rb-form{display:flex; flex-wrap:wrap; gap:12px; margin-top:18px;} .rb-form .field{width:min(260px,100%);}
  .rb-groups{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:22px; align-items:start;}
  .rb-grp{padding:4px 20px 8px;}
  .rb-grp h3{font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); padding:14px 0 6px;}
  .rb-i{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:3px 10px; padding:11px 0; border-top:1px solid var(--line-2);}
  .rb-w{grid-column:1 / -1; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);}
  .rb-i b{font-size:15px; font-weight:600; line-height:1.35;} .rb-i .chip{align-self:start;}
  .rb-l{grid-column:1 / -1; font-size:13.5px; color:var(--ink-2); line-height:1.45;}
  @media (max-width:960px){ .rb-nums.four{grid-template-columns:repeat(2,minmax(0,1fr));} .rb-groups{grid-template-columns:minmax(0,1fr);} }
  @media (max-width:760px){ .rb-nums, .rb-rules, .rb-links{grid-template-columns:minmax(0,1fr);} }
  @media (max-width:560px){
    .rb-nums.four{grid-template-columns:minmax(0,1fr);}
    .rb-steps{padding:4px 14px 8px;}
    .rb-steps .sp-r{grid-template-columns:84px 10px minmax(0,1fr); gap:10px;}
    .sp-d{white-space:normal; line-height:1.25;}
    .rb-steps .sp-r .chip{grid-column:3; justify-self:start;}
    .rb .figs dd{font-size:22px;}
  }
  /* site footer:start (footer_sync.py; after vaile.com.au's footer) */
  footer.sitefoot{background:var(--panel); color:var(--panel-fg); border-top:0; padding:0; font-size:14px;}
  footer.sitefoot .in{display:block; padding-top:clamp(40px,6vw,64px); padding-bottom:28px;}
  .sitefoot .foot-top{margin-bottom:clamp(28px,4vw,44px);}
  .sitefoot .wordmark{display:inline-flex; color:var(--panel-fg); font-size:1.24rem; line-height:1; text-decoration:none;}
  .sitefoot .wordmark .wm{height:.831em; width:auto; display:block; stroke:currentColor; stroke-width:14; paint-order:stroke fill;}
  .sitefoot .foot-cols{display:grid; grid-template-columns:repeat(4,max-content); justify-content:space-between; gap:32px;}
  .sitefoot .foot-h{margin:0 0 14px; font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--panel-muted);}
  .sitefoot .foot-cols ul{margin:0; padding:0; list-style:none; display:grid; gap:10px;}
  .sitefoot .foot-cols a{color:color-mix(in srgb, var(--panel-fg) 74%, transparent); text-decoration:none; font-size:14.5px;}
  .sitefoot .foot-cols a:hover, .sitefoot .foot-cols a[aria-current]{color:var(--panel-fg);}
  .sitefoot address{margin:0 0 10px; font-style:normal; font-size:14.5px; line-height:1.7; color:color-mix(in srgb, var(--panel-fg) 74%, transparent);}
  .sitefoot .foot-mail{color:var(--panel-fg); font-size:14.5px; text-decoration:none; border-bottom:1px solid var(--panel-line);}
  /* One rule under the columns, then the page's disclaimer as full-width fine print, then the copyright and ABN as
     the last line of the page (Gray, 12 Sep: the ruled band around the disclaimer was "Weird", and "The copyright and
     ABN should be at the bottom!"). */
  .sitefoot .foot-note{margin-top:clamp(28px,4vw,40px); padding-top:20px; border-top:1px solid var(--panel-line); display:grid; gap:4px;}
  .sitefoot .foot-base{margin-top:14px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 28px;}
  .sitefoot .foot-note p{margin:0; font-size:12.5px; line-height:1.55; color:var(--panel-muted); max-width:none; text-wrap:pretty;}
  .sitefoot .foot-base p{margin:0; font-size:12.5px; color:var(--panel-muted); max-width:none;}
  .sitefoot .foot-claims{display:flex; flex-wrap:wrap; gap:6px 24px;}
  @media (max-width:760px){ .sitefoot .foot-cols{grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 20px;} .sitefoot .foot-base{flex-direction:column;} }
  /* site footer:end */