/* Homepage, healthcare pass, 11 September 2026. Gray: the homepage is about the Vault as a
     holistic and cohesive product; every section page is a product or service that feeds off
     setting one up. It uses the healthcare dashboard (design/client-dashboard.html, the portal
     template) and carries the live vaile.com.au homepage's ideas across, re-pointed from the
     household at a healthcare career: the hero leads on what it does, the thesis band, the
     privacy band, the app in a desktop window, three ways in to one vault, automatic insights
     as joins between two documents, Ask quoted from her own documents, early access. The
     household domains (Home, Money, Pets, Kids, Parents) become the seven services.
     Site tokens and faces outside the window; inside it, the portal's own (Inter), as the
     live site's .dtop does. */
  :root{
    --ground:#F3F3F2; --surface:#FFFFFF; --sunk:#ECEEEF; --bleach:#FAFAF9;
    --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;
    --attn:#C2410C; --attn-on:#FFFFFF; --hold:#C9CCD1;
    --shadow:0 1px 1px rgba(16,18,20,.05);
    --lift:0 1px 2px rgba(16,18,20,.06), 0 30px 70px -30px rgba(16,18,20,.32);
    --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%;
    --dpanel:#2A2D32; --dpanel-fg:#F2F2F1; --dpanel-muted:#A6A9AF; --dpanel-line:#3A3D42;
    --track:#E2E2E1; --fill:#3A3D42;
    --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;
    --f-ui:'Inter','Inter UI',system-ui,-apple-system,'Segoe UI',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; --bleach:#131518;
      --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;
      --attn:#F08A5D; --attn-on:#1F0A02; --hold:#3A3E44;
      --shadow:0 1px 1px rgba(0,0,0,.35);
      --lift:0 1px 2px rgba(0,0,0,.4), 0 30px 70px -30px rgba(0,0,0,.75);
      --tile-mix:26%; --glyph-mix:100%; --row-mix:13%;
      --dpanel:#1E2126; --dpanel-line:#30343A; --track:#2A2D31; --fill:#C4C6CA;
    }
  }
  :root[data-theme="dark"]{
    --ground:#0F1113; --surface:#181B1F; --sunk:#0B0C0E; --bleach:#131518;
    --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;
    --attn:#F08A5D; --attn-on:#1F0A02; --hold:#3A3E44;
    --shadow:0 1px 1px rgba(0,0,0,.35);
    --lift:0 1px 2px rgba(0,0,0,.4), 0 30px 70px -30px rgba(0,0,0,.75);
    --tile-mix:26%; --glyph-mix:100%; --row-mix:13%;
    --dpanel:#1E2126; --dpanel-line:#30343A; --track:#2A2D31; --fill:#C4C6CA;
  }

  *{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{font:inherit; color:inherit;}
  button{background:none; border:0; padding:0; cursor:pointer;}
  a{color:inherit;}
  :focus-visible{outline:2px solid var(--pop); outline-offset:2px;}
  .in{max-width:var(--maxw); margin:0 auto; padding:0 var(--pad);}
  .eyebrow{font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--graphite);}
  .lead-2{font-family:var(--f-serif); font-weight:420; font-optical-sizing:auto; font-size:clamp(32px,4vw,50px); line-height:1.05; letter-spacing:-.02em; text-wrap:balance; margin-top:14px;}
  .body-lg{font-size:18px; line-height:1.55; color:var(--ink-2); margin-top:18px; max-width:56ch;}
  section{padding:clamp(52px,8vw,100px) 0;}

  .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{border-bottom:1px solid var(--line); background:var(--ground); position:sticky; top:0; z-index:5;}
  .site .in{display:flex; align-items:center; gap:20px; height:66px;}
  .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 5px; white-space:nowrap;}
  .site nav a:hover{color:var(--ink);}
  .site nav .navsep{width:1px; background:var(--line); margin:8px 6px; flex:none;}
  .site .right{margin-left:auto; display:flex; align-items:center; gap:16px; flex:none;}
  .site .sign{font-size:14.5px; color:var(--ink-2); text-decoration:none;}
  .cta{background:var(--pop); color:var(--pop-ink); font-weight:600; font-size:14.5px; padding:10px 16px; white-space:nowrap; text-decoration:none; display:inline-block;}
  .cta:hover{background:var(--pop-hover);}
  @media (max-width:1020px){ .site nav{display:none;} }
  @media (max-width:520px){ .site .sign{display:none;} .wordmark{font-size:1.12rem;} }
  @media (max-width:420px){ .site .in{gap:12px;} .site .cta{padding:9px 12px; font-size:13.5px;} }

  /* Hero: leads on what it does, ends on the copy (the live site's rule). */
  .hero{padding-top:clamp(56px,9vw,120px); padding-bottom:clamp(40px,6vw,72px);}
  .hero h1{font-family:var(--f-serif); font-weight:420; font-optical-sizing:auto; font-size:clamp(46px,7.2vw,96px); line-height:.98; letter-spacing:-.03em; margin-top:16px;}
/* Two lines, one per sentence (Gray, 12 Sep: "Healthcare career. / Admin handled."); each holds together above phone width. */
h1 .l{display:block;}
@media (min-width:601px){ h1 .l{white-space:nowrap;} }
  .hero .lead{font-size:clamp(18px,1.6vw,21px); line-height:1.55; color:var(--ink-2); margin-top:26px; max-width:62ch;}
  .stages{display:flex; flex-wrap:wrap; gap:8px; margin-top:30px;}
  .stages li{font-size:13.5px; padding:6px 11px; border:1px solid var(--line); background:var(--surface); color:var(--ink-2);}

  /* The thesis, oversized serif, on white. */
  .stmt{background:var(--bleach); border-top:1px solid var(--line);}
  .stmt p.big{font-family:var(--f-serif); font-weight:400; font-size:clamp(28px,3.6vw,46px); line-height:1.15; letter-spacing:-.018em; max-width:26ch; text-wrap:balance;}
  .stmt p.note{font-size:18px; line-height:1.6; color:var(--ink-2); margin-top:26px; max-width:60ch;}


  /* The app, in a desktop window (the live site's .dtop). */
  .app .seg, .ask .seg{display:inline-flex; border:1px solid var(--line); background:var(--surface); margin-top:26px; max-width:100%; overflow-x:auto; scrollbar-width:none;}
  .app .seg button, .ask .seg button{padding:7px 13px; font-size:13.5px; color:var(--ink-2); border-right:1px solid var(--line); white-space:nowrap;}
  .app .seg button:last-child, .ask .seg button:last-child{border-right:0;}
  .app .seg button[aria-pressed="true"], .ask .seg button[aria-pressed="true"]{background:var(--ink); color:var(--ground); font-weight:600;}
  .app .open{margin-top:16px; font-size:14.5px;} .app .open a{color:var(--ink); font-weight:600; text-underline-offset:3px;} .dtop{cursor:pointer;}
  .dtop{margin-top:18px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--lift);}
  .dtop-bar{display:flex; align-items:center; gap:14px; padding:10px 16px; border-bottom:1px solid var(--line); background:color-mix(in srgb, var(--ground) 55%, var(--surface));}
  .dtop-dots{display:flex; gap:7px; flex:none;}
  .dtop-dots i{width:9px; height:9px; border-radius:50%; background:color-mix(in srgb, var(--muted) 38%, var(--surface)); display:block;}
  .dtop-title{flex:1; display:flex; justify-content:center; font-size:.72rem; color:var(--muted); padding-right:50px;}
  .dtop-title .wm{height:.831em; width:auto; display:block; stroke:currentColor; stroke-width:14; paint-order:stroke fill;}
  .dtop-screen{padding:clamp(18px,3vw,34px); background:var(--ground);}
  @media (max-width:759px){ .dtop{border:0; box-shadow:none; background:transparent;} .dtop-bar{display:none;} .dtop-screen{padding:0; background:transparent;} }

  /* ---- The portal Home, scoped (design/client-dashboard.html) ---- */
  .dash{font-family:var(--f-ui); font-size:14px; line-height:1.42; color:var(--ink);}
  .dash .top{display:flex; align-items:flex-end; gap:18px; padding:4px 0 18px;}
  .dash .top h3{font-family:var(--f-serif); font-weight:420; font-size:clamp(26px,3vw,38px); line-height:1.02; letter-spacing:-.018em;}
  .dash .top .sub{display:flex; flex-wrap:wrap; gap:4px 14px; font-size:12.5px; color:var(--muted); margin-top:8px;}
  .dash .live{display:inline-flex; align-items:center; gap:6px;}
  .dash .live i{width:6px; height:6px; background:#1E9E62; display:block;}
  .dash .acts{margin-left:auto; font-size:12.5px; border:1px solid var(--line); background:var(--surface); padding:7px 12px; white-space:nowrap;}
  .dash .tabs{display:flex; gap:1px; flex-wrap:wrap; border-bottom:1px solid var(--line); margin-bottom:22px;}
  .dash .tabs span{font-size:12.5px; padding:8px 12px; color:var(--ink-2); display:inline-flex; align-items:center; gap:6px;}
  .dash .tabs span.on{color:var(--ink); font-weight:600; background:var(--surface); border:1px solid var(--line); border-bottom-color:var(--surface); margin-bottom:-1px;}
  .dash .tabs i{width:5px; height:5px; background:var(--attn); display:block;}
  .dash .tabs b.tsep{width:1px; background:var(--line); margin:7px 6px; display:block;}
  .dash .cols{display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); column-gap:26px; align-items:start;}
  .dash .coll, .dash .colr{display:flex; flex-direction:column; gap:24px; min-width:0;}
  .dash .sec-h{display:flex; align-items:baseline; gap:10px; margin-bottom:8px;}
  .dash .sec-h h4{margin:0; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:600;}
  .dash .badge{font-size:10.5px; font-weight:700; color:var(--attn-on); background:var(--attn); padding:1px 6px;}
  .dash .note{margin-left:auto; font-size:12.5px; color:var(--ink-2); font-weight:500;}
  .dash .ico{width:26px; height:26px; display: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);}
  .dash .ico svg{width:15px; height:15px;}
  .dash .row .ico, .dash .sr .ico{background:color-mix(in srgb, var(--c) var(--row-mix), var(--surface));}
  .dash .card{background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow);}
  .dash .row{display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; gap:14px; align-items:center; padding:11px 14px; border-bottom:1px solid var(--line-2);}
  .dash .row:last-child, .dash .sr:last-child{border-bottom:0;}
  .dash .row .t{font-size:14px; font-weight:500;}
  .dash .row .w{font-size:12px; color:var(--muted); white-space:nowrap;}
  .dash .row .w.hot{color:var(--attn); font-weight:600;}
  .dash .act{font-size:12px; padding:6px 10px; border:1px solid var(--line); background:var(--surface); white-space:nowrap; min-width:96px; text-align:center;}
  .dash .act.pri{background:var(--pop); color:var(--pop-ink); border-color:var(--pop); font-weight:600;}
  .dash .sr{display:grid; grid-template-columns:auto 118px minmax(0,1fr) auto; gap:12px; align-items:center; padding:11px 14px; border-bottom:1px solid var(--line-2);}
  .dash .sr .k{font-size:13.5px; font-weight:600;}
  .dash .sr .n{font-size:13.5px; color:var(--ink-2); min-width:0;}
  .dash .sr .wait{font-size:11.5px; color:var(--muted); white-space:nowrap;}
  .dash .tiles{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:2px 14px;}
  .dash .tile{display:flex; align-items:center; gap:10px; padding:7px 0; min-width:0;}
  .dash .tile .ico{width:30px; height:30px;}
  .dash .tile .l{font-size:12.5px; font-weight:500; line-height:1.25;}
  .dash .tile .dot{width:6px; height:6px; background:var(--attn); display:block; margin-left:auto; flex:none;}
  .dash .tile.empty .ico{background:transparent; color:var(--hold); border:1px solid var(--line);}
  .dash .tile.empty .l{color:var(--muted); font-weight:400;}
  .dash .cover{display:block; height:4px; background:var(--track); margin-top:10px;}
  .dash .cover i{display:block; height:4px; background:var(--fill);}
  .dash .ea{background:var(--dpanel); border:1px solid var(--dpanel-line); padding:16px; display:flex; flex-direction:column; gap:12px; min-height:250px;}
  .dash .ea-h{display:flex; align-items:baseline; gap:10px; color:var(--dpanel-fg);}
  .dash .ea-h b{font-size:15.5px; font-weight:600;}
  .dash .ea-h span{margin-left:auto; font-size:11.5px; color:var(--dpanel-muted); display:flex; align-items:center; gap:6px;}
  .dash .ea-h span i{width:6px; height:6px; background:var(--pop); display:block;}
  .dash .askbox{flex:1; background:color-mix(in srgb, var(--dpanel-fg) 9%, var(--dpanel)); border:1px solid var(--dpanel-line); padding:12px; font-size:14.5px; color:var(--dpanel-muted); line-height:1.45; display:flex; flex-direction:column; justify-content:space-between; gap:14px;}
  .dash .askbox em{font-style:normal; color:var(--dpanel-fg);}
  .dash .askf{display:flex; justify-content:space-between; align-items:center;}
  .dash .askf span{font-size:11.5px; border:1px solid var(--dpanel-line); padding:4px 8px; color:var(--dpanel-fg);}
  .dash .askf b{width:32px; height:32px; border:1px solid var(--pop); color:var(--pop); display:flex; align-items:center; justify-content:center;}
  .dash .soon li{display:grid; grid-template-columns:54px minmax(0,1fr); gap:10px; padding:9px 0; border-bottom:1px solid var(--line);}
  .dash .soon li:last-child{border-bottom:0;}
  .dash .soon .d{font-size:12px; color:var(--muted);}
  .dash .soon .t{font-size:14px;}
  @media (max-width:900px){ .dash .cols{grid-template-columns:minmax(0,1fr); row-gap:24px;} .dash .tiles{grid-template-columns:repeat(3,minmax(0,1fr));} }
  @media (max-width:560px){
    .dash .tabs{display:none;} .dash .acts{display:none;}
    .dash .tiles{grid-template-columns:repeat(2,minmax(0,1fr));}
    .dash .row{grid-template-columns:auto minmax(0,1fr) auto;} .dash .row .act{grid-column:2 / -1; justify-self:start;}
    .dash .sr{grid-template-columns:auto minmax(0,1fr);} .dash .sr .n, .dash .sr .wait{grid-column:2;}
  }
  .app-points{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; margin-top:30px;}
  .app-points li{border-top:1px solid var(--ink); padding-top:12px; font-size:14.5px; color:var(--ink-2);}
  .app-points b{display:block; color:var(--ink); font-size:15.5px; margin-bottom:4px;}
  @media (max-width:760px){ .app-points{grid-template-columns:1fr 1fr;} }

  /* Three ways in, one vault */
  .how{background:var(--bleach); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .flow{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:34px;}
  .flow li{border-top:1px solid var(--ink); padding-top:14px;}
  .flow .ic{width:24px; height:24px; color:var(--graphite);}
  .flow .t{font-size:12px; color:var(--muted); letter-spacing:.06em; text-transform:uppercase; font-weight:600; margin-top:10px;}
  .flow b{display:block; font-family:var(--f-serif); font-weight:450; font-size:24px; letter-spacing:-.01em; margin-top:4px;}
  .flow p{font-size:15px; color:var(--ink-2); margin-top:6px; max-width:34ch;}
  .vault{margin-top:22px; background:var(--panel); color:var(--panel-fg); padding:clamp(22px,3vw,34px); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:24px; align-items:center;}
  .vault b{font-family:var(--f-serif); font-weight:420; font-size:clamp(28px,3vw,40px); letter-spacing:-.015em; line-height:1.05;}
  .vault p{font-size:16.5px; color:var(--panel-muted); line-height:1.6;}
  .vault p em{font-style:normal; color:var(--panel-fg);}
  .never{font-size:13.5px; color:var(--muted); margin-top:14px;}
  @media (max-width:760px){ .flow{grid-template-columns:1fr;} .vault{grid-template-columns:1fr;} }

  /* Seven services, one vault */
  .services{background:var(--surface);}
  .svcs{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; margin-top:34px;}
  .svc{background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); padding:18px; display:flex; flex-direction:column; gap:10px; text-decoration:none; color:var(--ink); min-height:190px;}
  .svc:hover{border-color:var(--ink-2);}
  .svc .ico{width:38px; height:38px; display:flex; align-items:center; justify-content:center;
    background:color-mix(in srgb, var(--c) var(--tile-mix), var(--surface)); color:color-mix(in srgb, var(--c) var(--glyph-mix), #131316);}
  .svc .ico svg{width:20px; height:20px;}
  .svc b{font-size:18px; font-weight:600; letter-spacing:-.005em;}
  .svc p{font-size:14.5px; color:var(--ink-2); line-height:1.5;}
  .svc span.go{margin-top:auto; font-size:13.5px; font-weight:600; color:var(--ink);}
  @media (max-width:980px){ .svcs{grid-template-columns:repeat(2,minmax(0,1fr));} }
  @media (max-width:520px){ .svcs{grid-template-columns:1fr;} }

  /* Automatic insights: each is a join of two of her documents */
  .joined{background:var(--ground); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .joins{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:34px;}
  .join{border:1px solid var(--line); background:var(--surface); padding:18px; display:flex; flex-direction:column; gap:12px;}
  .join .who{font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--muted);}
  .doc{display:flex; align-items:center; gap:10px; background:var(--ground); border:1px solid var(--line-2); padding:9px 11px; font-size:13.5px;}
  .doc i{width:10px; height:12px; border:1.5px solid var(--graphite); display:block; flex:none;}
  .doc span{color:var(--muted); margin-left:auto; white-space:nowrap; font-size:12.5px;}
  .plus{font-family:var(--f-serif); font-size:22px; color:var(--muted); line-height:1; text-align:center;}
  .join .find{border-top:1px solid var(--line); padding-top:12px; font-size:16px; font-weight:500; line-height:1.4;}
  @media (max-width:900px){ .joins{grid-template-columns:1fr;} }

  /* Ask: quotes and stops */
  .asks{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:34px;}
  .qa{display:flex; flex-direction:column; gap:10px;}
  .q{align-self:flex-end; background:var(--ink); color:var(--ground); padding:10px 13px; font-size:14.5px; max-width:90%;}
  .a{background:var(--surface); border:1px solid var(--line); padding:13px 14px; font-size:14.5px; line-height:1.5;}
  .a q{quotes:"\201C" "\201D";}
  .a .src{display:block; font-size:12.5px; color:var(--muted); margin-top:8px;}
  @media (max-width:900px){ .asks{grid-template-columns:1fr;} }

  /* Early access */
  .early{background:var(--ground); border-top:1px solid var(--line);}
  .early form{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; max-width:520px;}
  .early input{flex:1; min-width:220px; border:1px solid var(--line); background:var(--surface); padding:12px 14px; font-size:15.5px;}
  .early .fine{font-size:13.5px; color:var(--muted); margin-top:12px;}

  footer{padding:30px 0 48px; font-size:13px; color:var(--muted); border-top:1px solid var(--line);}
  footer .in{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px;}
  /* Supporting icons, as on the section pages; no tabs on the homepage (Gray, 11 Sep). The nine service icons stay full colour: they are the sections. Everything else is the tint. */
  .hico{width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; flex:none;
    background:color-mix(in srgb, var(--c) var(--row-mix), var(--surface)); color:color-mix(in srgb, var(--c) var(--glyph-mix), #131316);}
  .hico svg{width:15px; height:15px;}
  .eyebrow.wi{display:flex; align-items:center; gap:10px;}
  /* 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{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 1141px the headings no longer fit beside Sign in and Set up for free, so the
     all-sections button is the one menu there: labelled on small tablets, an icon on phones. */
  @media (min-width:1141px){ .topnav > .tg:not(.tgr){display:none;} }
  @media (min-width:561px) and (max-width:1140px){ .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;} }
  /* Ask Vaile on a phone (Gray, 11 Sep: "show that the system can be managed from your phone and not just a
     laptop"). The live site's iPhone 17 bezel (site/img, screen cut out, 4.13% sides, 1.73% top and bottom) sits
     over a real DOM screen sized in container units, as on vaile.com.au. The persona switch drives both the
     laptop view in Your vault and this conversation. */
  /* Adjoining sections never share a ground (Gray, 11 Sep), in neutrals only: the page alternates grey and white,
     and Ask is white between the grey vault and the grey insights. */
  .ask{overflow-x:clip; --stage-mix:46%; background:var(--surface); border-top:1px solid var(--line);}
  .ask .in{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,500px); gap:clamp(32px,5vw,64px); align-items:center;}
  .device{position:relative; width:min(300px,78%); aspect-ratio:363 / 750; margin-inline:auto;
    filter:drop-shadow(0 30px 40px rgba(0,0,0,.28)) drop-shadow(0 6px 14px rgba(0,0,0,.18));}
  .device-frame{position:absolute; inset:0; width:100%; height:100%; z-index:3; pointer-events:none; user-select:none;}
  .device-screen{position:absolute; left:4.13%; top:1.73%; width:91.74%; height:96.53%; z-index:1; overflow:hidden;
    background:var(--ground); border-radius:15.02% / 6.91%; display:flex; flex-direction:column; container-type:inline-size; font-family:var(--f-ui);}
  .ios{flex:none; height:7.4%; display:flex; align-items:center; justify-content:space-between; padding-inline:7.5%; color:var(--ink); font:700 3.9cqw/1 var(--f-ui);}
  .ios-r{display:flex; align-items:center; gap:1.5cqw;}
  .ios-r svg{height:3.1cqw; width:auto; fill:currentColor; display:block;}
  .ph-h{flex:none; display:flex; align-items:center; gap:2.6cqw; padding:1.2cqw 4.4cqw 2.6cqw; border-bottom:1px solid var(--line); background:var(--surface);}
  .ph-ht b{display:block; font:600 4.2cqw/1.2 var(--f-ui);}
  .ph-ht span{display:block; font-size:2.8cqw; color:var(--muted); margin-top:.6cqw;}
  .ph-ht em{font-style:normal; font-weight:600; color:var(--ink-2);}
  /* One white top, status bar to hairline, as an iOS app has it (Gray, 11 Sep: "the header of the app is a bit weird"). */
  .ios{background:var(--surface);}
  .ph-body{flex:1; min-height:0; overflow:hidden; padding:3cqw 4.4cqw 2.4cqw; display:flex; flex-direction:column; justify-content:flex-end; gap:2.6cqw;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 8cqw); mask-image:linear-gradient(to bottom, transparent 0, #000 8cqw);}
  .device .ico{width:6cqw; height:6cqw; display:flex; align-items:center; justify-content:center; flex:none;
    background:color-mix(in srgb, var(--c) var(--row-mix), var(--surface)); color:color-mix(in srgb, var(--c) var(--glyph-mix), #131316);}
  .device .ico svg{width:3.6cqw; height:3.6cqw;}
  .ph-day{align-self:center; font:600 2.4cqw/1 var(--f-ui); letter-spacing:.12em; text-transform:uppercase; color:var(--muted);}
  .ph-greet{background:var(--surface); border:1px solid var(--line); padding:2.6cqw 3.1cqw 1.2cqw; font:3.5cqw/1.4 var(--f-ui); color:var(--ink); max-width:94%;}
  .ph-greet p{margin:0 0 1.6cqw;}
  .ph-nd{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:2.2cqw; align-items:center; padding:1.4cqw 0; border-top:1px solid var(--line-2); font-size:3.2cqw;}
  .ph-nd .t{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:500;}
  .ph-nd .w{font-size:2.7cqw; color:var(--muted); white-space:nowrap;}
  .ph-nd .w.hot{color:var(--attn); font-weight:600;}
  .ph-q{align-self:flex-end; max-width:84%; background:var(--ink); color:var(--ground); font:3.8cqw/1.4 var(--f-ui); padding:2.3cqw 3.1cqw;}
  .ph-a{max-width:94%; background:var(--surface); border:1px solid var(--line); color:var(--ink); font:3.5cqw/1.45 var(--f-ui); padding:2.4cqw 3.1cqw 2.6cqw;}
  .ph-a q{quotes:"\201C" "\201D";}
  .ph-tag{display:flex; align-items:center; gap:1.8cqw; font:600 2.4cqw/1 var(--f-ui); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:1.8cqw;}
  .ph-tag .ico{width:5.2cqw; height:5.2cqw; background:color-mix(in srgb, var(--c) var(--tile-mix), var(--surface));}
  .ph-tag .ico svg{width:3.2cqw; height:3.2cqw;}
  .ph-src{display:flex; flex-wrap:wrap; gap:1.4cqw; margin-top:2.2cqw;}
  .ph-src span{display:inline-flex; align-items:center; gap:1.2cqw; font:500 2.6cqw/1 var(--f-ui); color:var(--ink-2); background:var(--sunk); padding:1.3cqw 1.8cqw;}
  .ph-src svg{width:2.8cqw; height:2.8cqw; flex:none;}
  .ph-sugg{flex:none; display:flex; gap:1.8cqw; padding:0 3.1cqw 2.2cqw; overflow:hidden; white-space:nowrap;
    -webkit-mask-image:linear-gradient(to right, #000 80%, transparent); mask-image:linear-gradient(to right, #000 80%, transparent);}
  .ph-sugg span{flex:none; font:500 3cqw/1 var(--f-ui); color:var(--ink); background:var(--surface); border:1px solid var(--line); padding:2cqw 2.8cqw;}
  .ph-in{flex:none; display:flex; align-items:center; gap:2cqw; margin:0 3.1cqw 2.6cqw; padding:2.2cqw 2.4cqw 2.2cqw 3.2cqw; background:var(--surface); border:1px solid var(--line);}
  .ph-in i{flex:1; font-style:normal; font-size:3.6cqw; color:var(--muted);}
  .ph-mic{width:5cqw; height:5cqw; flex:none; color:var(--ink-2);}
  .ph-send{width:7.6cqw; height:7.6cqw; flex:none; background:var(--pop); color:var(--pop-ink); display:flex; align-items:center; justify-content:center;}
  .ph-send svg{width:4.4cqw; height:4.4cqw;}
  .ph-nav{flex:none; display:flex; border-top:1px solid var(--line); background:var(--surface); position:relative; padding-bottom:6.4cqw;}
  .ph-nav::after{content:""; position:absolute; left:50%; bottom:2.1cqw; transform:translateX(-50%); width:35.4%; height:1.3cqw; border-radius:1cqw; background:var(--ink); opacity:.22;}
  .ph-nav span{flex:1; display:flex; flex-direction:column; align-items:center; gap:1.1cqw; padding:1.9cqw .5cqw 2.1cqw; font:600 2.5cqw/1.15 var(--f-ui); color:var(--muted);}
  .ph-nav span.on{color:var(--ink);}
  .ph-nav svg{width:6.2cqw; height:6.2cqw;}
  @media (max-width:900px){ .ask .in{grid-template-columns:minmax(0,1fr);} .ask-stage{margin-top:10px;} }
  /* The phone's tab bar is what she does most, not the one-off services (Gray, 11 Sep): Home, what needs her,
     Snap (a receipt, a certificate, a card), Ask and her documents. Vehicle and Relocation sit under Home. */
  .ph-nav span{position:relative;}
  .ph-badge{position:absolute; top:1.2cqw; left:calc(50% + 1.8cqw); min-width:3.8cqw; height:3.8cqw; padding:0 .9cqw; background:var(--attn); color:#fff; font:700 2.3cqw/3.8cqw var(--f-ui); text-align:center;}
  .ph-nav .snap{color:var(--ink);}
  .ph-nav .snap i{width:9.4cqw; height:9.4cqw; margin-top:-3.6cqw; background:var(--pop); color:var(--pop-ink); display:flex; align-items:center; justify-content:center;}
  .ph-nav .snap i svg{width:5.4cqw; height:5.4cqw;}
  /* Ask, reworked (Gray, 11 Sep: "VERY white and boring - big gap between phone and content, and the app itself
     looks blank and way too clinical"). The phone stands on a colour field and the columns close up. The screen opens on Vaile's own morning message; each answer carries its
     section's colour and the documents it quotes; suggested questions sit over the composer. A persona switch plays
     the conversation in, inside the phone, so the page never moves. */
  @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .ask{--stage-mix:17%;} }
  :root[data-theme="dark"] .ask{--stage-mix:17%;}
  .ask-pts{display:grid; gap:16px; margin-top:30px; max-width:46ch;}
  .ask-pts li{display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; align-items:start; font-size:15px; line-height:1.45; color:var(--ink-2);}
  .ask-pts b{display:block; color:var(--ink); font-size:15.5px; font-weight:600; margin-bottom:2px;}
  .ask-stage{position:relative; isolation:isolate; display:flex; justify-content:center; padding:clamp(28px,4vw,44px) 0;
    background:color-mix(in srgb, var(--c-cred) var(--stage-mix), var(--surface));}
  .ask-stage::before{content:"\201C"; position:absolute; left:18px; top:-18px; z-index:-1; pointer-events:none;
    font:400 230px/1 var(--f-serif); color:color-mix(in srgb, var(--c-cred) 60%, #131316); opacity:.22;}
  /* The quote mark crowds the phone on narrow screens (Gray, 12 Sep: "Weird on mobile view"). */
  @media (max-width:560px){ .ask-stage::before{display:none;} }
  @keyframes phIn{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}
  .ask-stage.play .ph-body > *{animation:phIn .5s cubic-bezier(.2,.7,.2,1) both;}
  .ask-stage.play .ph-body > :nth-child(2){animation-delay:.12s;}
  .ask-stage.play .ph-body > :nth-child(3){animation-delay:.55s;}
  .ask-stage.play .ph-body > :nth-child(4){animation-delay:.95s;}
  .ask-stage.play .ph-body > :nth-child(5){animation-delay:1.55s;}
  .ask-stage.play .ph-body > :nth-child(6){animation-delay:1.95s;}
  @media (prefers-reduced-motion: reduce){ .ask-stage.play .ph-body > *{animation:none;} }
  /* Free, said where it counts (Gray, 11 Sep: "nowhere on the homepage says that Vaile is FREE"): the header button,
     the hero's first action, and one dark band after the services. How Vaile is paid is not a point we make (Gray). */
  .hero-go{display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; margin-top:30px;}
  .hero-go .cta{font-size:16px; padding:13px 20px;}
  .hero-go p{font-size:15px; color:var(--ink-2);}
  .hero-go p b{color:var(--ink); font-weight:600;}
  .free{background:var(--panel); color:var(--panel-fg);}
  .free .in{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:clamp(28px,5vw,72px); align-items:start;}
  .free .eyebrow{color:var(--panel-muted);}
  .free h2{font-family:var(--f-serif); font-weight:420; font-optical-sizing:auto; font-size:clamp(44px,6vw,80px); line-height:.98; letter-spacing:-.028em; margin-top:16px;}
  .free .cta{margin-top:30px;}
  .free li{border-top:1px solid var(--panel-line); padding:18px 0;}
  .free li:last-child{border-bottom:1px solid var(--panel-line);}
  .free li b{display:block; font-size:17px; font-weight:600; color:var(--panel-fg); margin-bottom:4px;}
  .free li span{display:block; font-size:15.5px; line-height:1.55; color:var(--panel-muted); max-width:52ch;}
  @media (max-width:760px){ .free .in{grid-template-columns:minmax(0,1fr);} }
  /* A heading that now opens its section carries no top margin (the eyebrow above it is gone). */
  .hero h1:first-child, .in > .lead-2:first-child, .free h2:first-child{margin-top:0;}
  /* 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){
    section{padding:40px 0;}
    .hero{padding-top:36px; padding-bottom:36px;}
    .hero h1{font-size:40px;}
    .hero .lead{font-size:16px; margin-top:16px;}
    .hero-go{margin-top:20px;} .hero-go .cta{font-size:15px; padding:12px 16px;} .hero-go p{font-size:14px;}
    .stages{margin-top:18px;} .stages li{font-size:12.5px; padding:5px 9px;}
    .stmt p.big{font-size:23px; max-width:none;} .stmt p.note{font-size:15.5px; margin-top:16px;}
    .lead-2{font-size:27px;}
    .body-lg{font-size:15.5px; margin-top:12px;}
    .app .seg, .ask .seg{margin-top:18px;}
    .app-points{margin-top:22px; gap:16px;} .app-points li{font-size:14px;} .app-points b{font-size:15px;}
    .ask-pts{margin-top:20px; gap:12px;} .ask-pts li{font-size:14px;} .ask-pts b{font-size:15px;}
    .joins, .asks, .svcs, .flow{margin-top:22px;}
    .join{padding:14px;} .join .find{font-size:15px;}
    .svc{min-height:0; padding:16px;} .svc b{font-size:16px;} .svc p{font-size:14px;}
    .free h2{font-size:38px;} .free .cta{margin-top:20px;} .free li{padding:14px 0;} .free li b{font-size:15.5px;} .free li span{font-size:14.5px;}
    .flow b{font-size:20px;} .flow p{font-size:14.5px;}
    .vault{margin-top:18px;} .vault b{font-size:23px;} .vault p{font-size:15px;}
    .early form{margin-top:18px;}
  }
  /* Phones, layout (Gray, 12 Sep: "endless scrolling"). Measured at 375px, the length was layout, not type: ten
     stacked service cards, a full desktop dashboard and eighteen tall car cards. */
  @media (max-width:560px){
    .hero h1{font-size:clamp(34px,10.6vw,40px);}
    .svcs{gap:8px;}
    .svc:not(.lead){display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:12px; row-gap:2px; align-items:start; padding:12px 14px;}
    .svc:not(.lead) .ico{grid-row:span 2; width:34px; height:34px;}
    .svc:not(.lead) .ico svg{width:18px; height:18px;}
    .svc:not(.lead) p{font-size:13.5px; line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
    .svc:not(.lead) span.go{display:none;}
    .dash .colr{display:none;}
    .dash .row .act{display:none;}
    .dash .row{padding:10px 12px;}
    .join{gap:8px;} .doc{padding:7px 10px; font-size:13px;} .plus{font-size:18px;}
    .flow li{padding-top:12px;} .flow p{margin-top:4px;}
    .never{font-size:13px;}
  }
  /* The privacy points sit at the foot of How it works (Gray, 12 Sep: the strip was "ugly"; he chose this): straight
     after "connect your personal email", under a hairline, each with a light icon. No band of their own. */
  .privacy{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:18px 24px; margin-top:34px; padding-top:26px; border-top:1px solid var(--line);}
  .privacy li{display:flex; gap:10px; align-items:flex-start; font-size:15px; line-height:1.4; color:var(--ink);}
  .privacy li > span:last-child{padding-top:3px;}
  @media (max-width:900px){ .privacy{grid-template-columns:repeat(2,minmax(0,1fr));} }
  @media (max-width:560px){ .privacy{grid-template-columns:minmax(0,1fr); gap:12px; margin-top:24px; padding-top:20px;} .privacy li{font-size:14px;} }
  /* Examples look like the product (Gray, 12 Sep 2026: "make the illustrative stuff like the itineraries and the mock
     examples look different to the core information"; BUILD_STATE 11.485). One frame on every page: a dark bar labelled
     EXAMPLE, the portal's typeface, a cool grey ground and rounded corners, which nothing else on the site has. Core
     information stays on the page in the site's own type, unboxed. */
  /* 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;}
  /* One row, three things: when, what, one short line; the detail opens on a tap. */
  .it{border-top:1px solid var(--ex-line);}
  .it:first-child{border-top:0;}
  .it summary{list-style:none; cursor:pointer; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 10px; padding:10px 0;}
  .it summary::-webkit-details-marker{display:none;}
  .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;}
  .it .it-tag{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;}
  /* Homepage, 12 Sep 2026 (BUILD_STATE 11.485). The laptop window and the phone keep their own chrome, so each takes
     the EXAMPLE bar instead of a second frame, and the window keeps it on phones; the three insights share one frame.
     Core information comes out of its boxes (the services, the vault statement) and loses its row icons; section
     heading icons stay. Long detail opens on a tap. */
  .dtop.ex{box-shadow:none; border:0;}
  .dtop.ex .dtop-bar{border-bottom:0;}
  .dtop.ex .dtop-dots, .dtop.ex .dtop-title{display:none;}
  .dtop.ex .dtop-screen{background:transparent;}
  .dtop.ex .dash .top h3{font-family:var(--f-ui); font-weight:600; font-size:clamp(22px,2.4vw,30px); line-height:1.1; letter-spacing:-.015em;}
  @media (max-width:759px){
    .dtop.ex{border:1px solid var(--ex-line); box-shadow:none; background:var(--ex-bg);}
    .dtop.ex .dtop-bar{display:flex;}
    .dtop.ex .dtop-dots, .dtop.ex .dtop-title{display:none;}
    .dtop.ex .dtop-screen{padding:14px 12px;}
  }
  .ask-stage{flex-direction:column; align-items:center; padding-top:0; border-radius:0; font-family:var(--f-ui);}
  .ask-stage > .ex-bar{align-self:stretch; border-radius:0; margin-bottom:clamp(24px,3.5vw,40px);}
  .ask-stage::before{top:36px;}
  .ex-joins{margin-top:34px;}
  .ex-joins .joins{margin-top:0; gap:0;}
  .ex-joins .join{border:0; border-left:1px solid var(--ex-line); background:none; padding:18px;}
  .ex-joins .join:first-child{border-left:0;}
  .ex-joins .join .who{color:var(--ex-muted);}
  .ex-joins .doc{background:var(--surface); border-color:var(--ex-line);}
  .ex-joins .doc span{color:var(--ex-muted);}
  .ex-joins .plus{font-family:inherit; font-size:18px; color:var(--ex-muted);}
  .ex-joins .join .find{border-top-color:var(--ex-line); font-size:15px;}
  @media (max-width:900px){ .ex-joins .join{border-left:0; border-top:1px solid var(--ex-line);} .ex-joins .join:first-child{border-top:0;} }
  .svcs{gap:6px 22px;}
  .svc{background:none; border:0; border-top:1px solid var(--line); box-shadow:none; padding:16px 0 14px; min-height:0;}
  .svc:hover{border-color:var(--ink);}
  .svc:hover b{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px;}
  .vault{background:none; color:var(--ink); padding:22px 0 0; border-top:1px solid var(--ink); margin-top:40px;}
  .vault p{color:var(--ink-2);}
  .vault p em{color:var(--ink);}
  .privacy .hico, .ask-pts .hico, .flow .ic{display:none;}
  .privacy li > span:last-child{padding-top:0;}
  .ask-pts li{grid-template-columns:minmax(0,1fr);}
  .flow .t{margin-top:0;}
  details.more summary{list-style:none; cursor:pointer; display:inline-flex; align-items:baseline; gap:6px; margin-top:8px; font-size:13.5px; font-weight:600; color:var(--ink);}
  details.more summary::-webkit-details-marker{display:none;}
  details.more summary::after{content:"+"; font-weight:600;}
  details.more[open] summary::after{content:"\2212";}
  details.more > p{margin-top:6px;}
  .never.more summary{display:block; margin-top:0; font-size:inherit; font-weight:400; color:inherit;}
  .never.more summary::after{margin-left:6px; color:var(--ink);}
  .never.more > p{max-width:90ch;}
  @media (max-width:560px){
    .ex-joins{margin-top:22px;} .ex-joins .join{padding:14px;}
    .svcs{gap:0;} .svc:not(.lead){padding:12px 0;}
    .vault{margin-top:24px; padding-top:18px;}
  }
  /* 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 */
  /* Moving from overseas? Start here (11.534). */
  .hero-os{margin:14px 0 0; font-size:15px;} .hero-os a{color:var(--ink); text-underline-offset:3px;}