/* Metric-matched fallbacks. Named 'Outfit Fallback' / 'Figtree Fallback' and
   listed right after the real family in every stack, so before the webfont
   arrives (or if a flaky mobile connection drops it) the heading renders in
   the system sans-serif SCALED to Outfit's proportions — no size jump, no
   thinner-looking weight. Once the webfont loads it takes over seamlessly. */
@font-face{font-family:'Outfit Fallback';src:local('Arial');ascent-override:100%;descent-override:26%;line-gap-override:0%;size-adjust:107%}
@font-face{font-family:'Figtree Fallback';src:local('Arial');ascent-override:96%;descent-override:25%;line-gap-override:0%;size-adjust:102%}

:root{
  --deep:#175A72;
  --deep-dark:#0F3F52;
  --lake:#2088A6;
  --sky-top:#A9D2D4;
  --sky-mid:#C9E0DA;
  --sky-warm:#E9E3C6;
  --gold:#B39B55;
  --gold-deep:#8A7C46;
  --mist:#8FB4C3;
  --paper:#F6FAFA;
  --ink:#123846;
  --muted:#5E7F8C;
  --line:#DCE9EC;
  --warn:#C2603F;
  --radius:999px;
  --card:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Figtree','Figtree Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--ink);background:#fff;line-height:1.6;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{font-family:'Outfit','Outfit Fallback',sans-serif;font-weight:400;line-height:1.12;letter-spacing:-0.015em;color:var(--deep)}
a{color:var(--deep);text-decoration:none}
:focus-visible{outline:3px solid var(--lake);outline-offset:3px;border-radius:6px}
.wrap{width:min(1180px,92vw);margin:0 auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:100;background:#fff;padding:12px 18px;border-radius:10px;box-shadow:0 8px 24px rgba(18,56,70,.2)}

/* ---------- Nav ---------- */
header{position:fixed;inset:0 0 auto 0;z-index:60;transition:background .35s ease,box-shadow .35s ease;padding:14px 0}
header.solid{background:rgba(255,255,255,.94);backdrop-filter:blur(10px);box-shadow:0 2px 20px rgba(18,56,70,.08)}
body.inner header{background:rgba(255,255,255,.94);backdrop-filter:blur(10px);box-shadow:0 2px 20px rgba(18,56,70,.08)}
.navbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px}
.navbar .brand{grid-column:1;justify-self:start}
.navbar .navlinks{grid-column:2;justify-self:center}
.navbar .navcta{grid-column:3;justify-self:end}
.navbar .burger{grid-column:3;justify-self:end}
.brand{display:flex;align-items:center;gap:10px;font-family:'Outfit','Outfit Fallback',sans-serif;font-size:1.7rem;color:var(--deep);font-weight:400}
.brand svg{width:34px;height:34px;flex:none}
.navlinks{display:flex;align-items:center;gap:20px}
.navlinks a{font-size:1.06rem;font-weight:500;color:var(--deep);position:relative;padding:4px 0;white-space:nowrap}
.navlinks a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--lake);transition:width .25s ease}
.navlinks a:hover::after,.navlinks a[aria-current="page"]::after{width:100%}
.btn{display:inline-block;border:0;cursor:pointer;font-family:'Figtree','Figtree Fallback',sans-serif;font-weight:600;font-size:.95rem;text-align:center;
     padding:13px 26px;border-radius:var(--radius);background:var(--deep);color:#fff;transition:transform .2s ease,background .2s ease,box-shadow .2s ease}
.btn:hover{background:var(--lake);color:#fff;transform:translateY(-2px);box-shadow:0 8px 22px rgba(23,90,114,.28)}
.btn.ghost{background:transparent;color:var(--deep);border:1.5px solid var(--deep)}
.btn.ghost:hover{background:var(--deep);color:#fff}
.btn.sm{padding:9px 16px;font-size:.85rem;font-weight:600;white-space:nowrap}
.navcta{display:inline-block}
.burger{display:none;background:none;border:0;cursor:pointer;padding:8px}
.burger span{display:block;width:26px;height:2px;background:var(--deep);margin:5px 0;transition:transform .3s ease,opacity .3s ease}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobilemenu{display:none;overflow:hidden;max-height:0;transition:max-height .4s cubic-bezier(.4,0,.2,1)}
.mobilemenu.open{max-height:calc(100svh - 90px);overflow-y:auto;-webkit-overflow-scrolling:touch}
.mobilemenu nav{background:#fff;border-radius:var(--card);margin-top:12px;padding:10px;box-shadow:0 12px 34px rgba(18,56,70,.14)}
.mobilemenu a{display:block;padding:15px 16px;font-size:1.06rem;font-weight:500;border-bottom:1px solid var(--line)}
.mobilemenu .btn{width:100%;margin-top:12px;border-bottom:0}
/* --- accordion sections inside the hamburger --- */
.macc{display:flex;align-items:center;justify-content:space-between;width:100%;
      padding:15px 16px;font:inherit;font-size:1.06rem;font-weight:500;color:var(--deep);
      background:none;border:0;border-bottom:1px solid var(--line);cursor:pointer;text-align:left}
.macc svg{width:18px;height:18px;flex:none;transition:transform .25s ease}
.macc[aria-expanded="true"] svg{transform:rotate(180deg)}
.mpanel{overflow:hidden;max-height:0;transition:max-height .3s cubic-bezier(.4,0,.2,1)}
.mpanel.open{max-height:600px}
.mpanel a{padding-left:30px;font-size:1rem;font-weight:400;color:var(--deep)}
.mcta{margin-bottom:2px}

/* ---------- Home hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;
      background:linear-gradient(to bottom,var(--sky-top) 0%,var(--sky-mid) 42%,var(--sky-warm) 72%)}
.scene{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.scene svg{width:100%;height:100%;display:block}
/* bottom padding lands the button just above the water line (water top sits ~28svh from the bottom) */
.hero .wrap{position:relative;z-index:2;padding:90px 0 34svh;text-align:center}
.hero-copy{max-width:700px;margin:0 auto;text-align:left}
.hero h1{font-size:clamp(1.9rem,4vw,3.4rem);margin:0;font-weight:400}
.hero p{font-size:clamp(.95rem,1.2vw,1.15rem);color:var(--deep);margin:24px 0 32px;font-weight:500}
.hero .btn{padding:9px 18px;font-size:.85rem}
.hero .btn.ghost{background:#fff;color:var(--deep);border:1.5px solid #fff}
.hero .btn.ghost:hover{background:#fff;color:var(--lake)}
.herobtns{display:flex;flex-wrap:wrap;gap:14px;justify-content:flex-start;margin-top:32px}
.rise{opacity:0;transform:translateY(22px);animation:rise .95s cubic-bezier(.2,.7,.2,1) forwards}
.rise:nth-child(2){animation-delay:.16s}
.rise:nth-child(3){animation-delay:.32s}
@keyframes rise{to{opacity:1;transform:none}}

/* ---------- hero scroll cue: signals there's more below ---------- */
/* no label any more: just the bobbing arrow, sitting in the white sheet that
   rises over the bottom of the hero (the sheet overlaps by 56px, so the cue is
   56px tall and z-index 6 to sit on top of it) */
.scrollcue{position:absolute;left:50%;bottom:0;transform:translateX(-50%);z-index:6;
  display:inline-flex;align-items:center;justify-content:center;
  width:72px;height:56px;padding:0;border:0;border-radius:999px;
  background:none;box-shadow:none;color:var(--deep);cursor:pointer;
  opacity:1;transition:opacity .35s ease,transform .25s ease,color .25s ease;
  animation:cueIn .5s cubic-bezier(.2,.7,.2,1) 1s backwards}
.scrollcue:hover{color:var(--lake);transform:translateX(-50%) translateY(-2px)}
.scrollcue:focus-visible{outline:3px solid var(--deep);outline-offset:2px}
.scrollcue .chev{display:inline-flex;animation:cueBob 1.6s ease-in-out 1.4s infinite}
.scrollcue .chev svg{width:40px;height:40px;display:block}
.scrollcue.gone{opacity:0;pointer-events:none}
@keyframes cueBob{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}
@keyframes cueIn{from{opacity:0;transform:translateX(-50%) translateY(12px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

/* ---------- next section rises over the hero as a rounded sheet ---------- */
.view[data-route="/"] .tools-sec{position:relative;z-index:5;margin-top:-56px;background:#fff;
  border-radius:28px 28px 0 0;box-shadow:0 -14px 40px rgba(15,63,82,.16);padding-top:56px}

/* ---------- Inner page banner ---------- */
.pagehead{position:relative;overflow:hidden;padding:160px 0 84px;
          background:linear-gradient(to bottom,var(--sky-mid),var(--sky-warm))}
.pagehead .ridge{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:120px;display:block}
.pagehead .wrap{position:relative;z-index:2}
.pagehead h1{font-size:clamp(2.1rem,4.4vw,3.4rem);max-width:22ch}
.goal-h{font-size:clamp(2.4rem,5vw,3.8rem);max-width:22ch}
.returns-h{font-size:clamp(2.1rem,4.4vw,3.4rem);max-width:22ch}
.calc-intro-sec{padding-top:60px;padding-bottom:0}
.calc-tool-sec{padding-top:16px;padding-bottom:40px}
.fundtypes-sec{padding-top:40px;padding-bottom:40px}
.compare-cta-sec{padding-top:40px}
.calc-intro-h{font-family:'Outfit','Outfit Fallback',sans-serif;font-weight:400;font-size:clamp(1.3rem,2vw,1.7rem);color:var(--deep);margin-bottom:10px}
.returns-top{padding-top:30px;padding-bottom:40px}
.guides-top{padding-top:30px}
.contact-top{padding-top:30px}
.returns-note{color:var(--ink);font-weight:600}
.returns-note-sec{padding-top:40px;padding-bottom:40px}
.calc-sec{padding-top:40px;padding-bottom:40px}
.calc-cta-sec{padding-top:40px}
.fees-why-sec{padding-top:40px;padding-bottom:40px}
.fees-cta-sec{padding-top:40px}
.pagehead p{margin-top:18px;max-width:56ch;color:var(--deep);font-weight:500;font-size:1.08rem}
.crumbs{font-size:.85rem;color:var(--deep);margin-bottom:16px;opacity:.85}
.crumbs a:hover{text-decoration:underline}
.crumbs span{color:var(--gold-deep);opacity:.75;padding:0 6px}

/* ---------- Sections ---------- */
section{padding:100px 0}
.eyebrow{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:#6F6238;font-weight:600;margin-bottom:14px}
.sec-h{font-size:clamp(1.6rem,2.7vw,2.3rem);max-width:22ch}
.tools-sec{padding-bottom:56px}
.lead{color:var(--muted);font-size:1rem;max-width:60ch;margin-top:14px}
.alt{background:var(--paper)}
/* inner pages: the banded sections carry a warm ivory instead of the cool
   paper, so the tussock-gold tone runs through every page rather than just the
   homepage. Kept light enough that body copy holds the same contrast it had on
   --paper (4.05 vs 4.08). The homepage is excluded on purpose: its bands were
   signed off as they are. */
.view:not([data-route="/"]) .pagemain section.alt{background:#FBF8F0}
/* ...except behind the FAQ topic cards, which stay on the cool paper */
.view[data-route="/faqs"] .pagemain section.alt{background:var(--paper)}
.fact{padding:64px 0}
.fact .wrap{max-width:960px;text-align:center}
.fact .factline{font-family:'Outfit','Outfit Fallback',sans-serif;font-size:clamp(1.3rem,2.7vw,2.05rem);line-height:1.34;color:var(--deep);font-weight:400;letter-spacing:-.01em;margin-top:6px}
.fact .factline b{color:var(--gold-deep);font-weight:600}
.seclink{display:inline-block;margin-top:30px;font-weight:600;color:var(--lake)}
.seclink:hover{color:var(--deep);text-decoration:underline}

/* Process steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:56px}
.steps.tall{grid-template-columns:1fr;gap:0;margin-top:44px}
.step{position:relative;padding-top:26px;border-top:2px solid var(--line);transition:border-color .3s ease}
.step:hover{border-color:var(--lake)}
.step .n{font-family:'Outfit','Outfit Fallback',sans-serif;font-size:.95rem;color:var(--lake);font-weight:600;letter-spacing:.08em}
.step h3{font-size:1.25rem;margin:12px 0 10px}
.step p{color:var(--muted);font-size:.98rem}
.steps.tall .step{display:grid;grid-template-columns:140px 1fr;gap:34px;padding:34px 0;align-items:start}
.steps.tall .step h3{margin-top:0}
.steps.tall .step p{max-width:62ch}
.steps.tall .step ul{margin-top:14px;color:var(--muted);padding-left:20px;max-width:62ch}
.steps.tall .step li{margin-bottom:7px;font-size:.98rem}

/* Comparison */
.compare-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start;margin-top:52px}
.fundlist{display:flex;flex-direction:column;gap:12px}
.fund,.fund2{display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px;width:100%;text-align:left;cursor:pointer;
      background:#fff;border:1.5px solid var(--line);border-radius:var(--card);padding:18px 20px;font-family:'Figtree','Figtree Fallback',sans-serif;transition:all .25s ease}
.fund:hover,.fund2:hover{border-color:var(--mist)}
.fund[aria-pressed="true"],.fund2[aria-pressed="true"]{border-color:var(--deep);background:var(--deep);color:#fff;box-shadow:0 10px 26px rgba(23,90,114,.2)}
.fund[aria-pressed="true"] .fname,.fund2[aria-pressed="true"] .fname{color:#fff}
.fund[aria-pressed="true"] .fmeta,.fund2[aria-pressed="true"] .fmeta{color:#BFE0E6}
.fname{font-family:'Outfit','Outfit Fallback',sans-serif;font-size:1.15rem;color:var(--deep);display:block}
.fmeta{font-size:.85rem;color:var(--muted)}
.bars{display:flex;gap:3px;align-items:flex-end;height:26px}
.bars i{width:6px;background:currentColor;opacity:.22;border-radius:2px}
.bars i.on{opacity:1}
.panel{background:#fff;border:1.5px solid var(--line);border-radius:20px;padding:30px}
.panel h3{font-size:1.5rem}
.field{margin-top:18px}
.field label{display:block;font-size:.86rem;font-weight:600;color:var(--muted);margin-bottom:7px}
.field input,.field select,.field textarea{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;font-family:'Figtree','Figtree Fallback',sans-serif;font-size:1rem;color:var(--ink);background:#fff}
.field input[readonly]{background:var(--paper);color:var(--muted);cursor:not-allowed}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--lake)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.result{margin-top:26px;padding:24px;border-radius:var(--card);background:linear-gradient(135deg,var(--deep),var(--lake));color:#fff}
.result .lbl{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;opacity:.85}
.result .big{font-family:'Outfit','Outfit Fallback',sans-serif;font-size:clamp(2rem,4vw,2.8rem);color:#fff;margin:6px 0 4px}
.result .sub{font-size:.9rem;opacity:.9;display:block}
.breakdown{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:20px;padding-top:18px;border-top:1px solid rgba(255,255,255,.22)}
.breakdown div span{display:block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;opacity:.8}
.breakdown div b{font-family:'Outfit','Outfit Fallback',sans-serif;font-weight:500;font-size:1.05rem}
.note{font-size:.8rem;color:var(--muted);margin-top:14px;line-height:1.5;
  border-left:3px solid var(--gold);padding-left:14px}

/* Assumptions table */
.tablewrap{overflow-x:auto;margin-top:34px;border:1.5px solid var(--line);border-radius:var(--card)}
table{width:100%;border-collapse:collapse;min-width:520px;background:#fff}
th,td{text-align:left;padding:15px 20px;border-bottom:1px solid var(--line);font-size:.95rem}
th{font-family:'Outfit','Outfit Fallback',sans-serif;font-weight:500;color:var(--deep);background:#FAF6E9}
tr:last-child td{border-bottom:0}
td strong{color:var(--deep)}

/* About */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.valuelist{margin-top:30px;display:flex;flex-direction:column;gap:18px}
.value{display:flex;gap:14px;align-items:flex-start}
.value svg{flex:none;width:22px;height:22px;margin-top:3px;color:var(--lake)}
.value b{font-family:'Outfit','Outfit Fallback',sans-serif;font-weight:500;color:var(--deep);display:block;font-size:1.05rem}
.value span{color:var(--muted);font-size:.97rem}
.stat-card{background:var(--deep);color:#fff;border-radius:24px;padding:42px;position:relative;overflow:hidden}
.stat-card h3{color:#fff;font-size:1.7rem;max-width:16ch}
.stat-card p{color:#C4E1E8;margin-top:14px;font-size:1rem}
.stat-card .btn{background:#fff;color:var(--deep);margin-top:26px}
.stat-card .btn:hover{background:var(--sky-warm);color:var(--deep)}
.stat-card .glow{position:absolute;right:-60px;bottom:-80px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.14),transparent 70%)}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:64px}
.contactinfo p{color:var(--muted);margin-top:14px}
.contactinfo .line{display:flex;gap:12px;align-items:center;margin-top:22px;font-weight:500;color:var(--deep)}
.contactinfo .line a:hover{text-decoration:underline}
form .btn{margin-top:22px;width:100%}
.formmsg{margin-top:14px;font-size:.92rem;color:var(--warn);font-weight:600;display:none}
.formmsg.show{display:block}
.checkline{display:flex;gap:10px;align-items:flex-start;margin-top:20px;font-size:.9rem;color:var(--muted)}
.checkline input{width:18px;height:18px;flex:none;margin-top:3px;accent-color:var(--deep)}
.checkline a{text-decoration:underline}

/* Legal / prose pages */
.prose{max-width:70ch;padding:80px 0 100px}
.prose h2{font-size:1.55rem;margin:44px 0 14px}
.prose h3{font-size:1.15rem;margin:28px 0 10px;font-weight:500}
.prose p{margin-bottom:16px;color:#33586A}
.prose ul,.prose ol{margin:0 0 18px 22px;color:#33586A}
.prose li{margin-bottom:9px}
.prose strong{color:var(--deep)}
.prose a{text-decoration:underline}
.updated{font-size:.85rem;color:var(--muted);border-left:3px solid var(--line);padding-left:14px}
.callout{background:#FDFAF2;border:1.5px solid #E8DCBD;border-left:4px solid var(--gold);border-radius:10px;padding:20px 24px;margin:26px 0}
.callout p:last-child{margin-bottom:0}
.todo{background:#FDF6EF;border:1.5px dashed var(--gold);border-radius:10px;padding:18px 22px;margin:26px 0;font-size:.92rem;color:#7A6435}
.todo b{color:#5E4C24}

/* Thanks page */
.centered{max-width:56ch;margin:0 auto;text-align:center;padding:170px 0 120px}
.centered .tick{width:74px;height:74px;border-radius:50%;background:var(--deep);color:#fff;display:grid;place-items:center;margin:0 auto 28px}
.centered p{color:var(--muted);margin-top:18px}
.centered .btnrow{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:34px}

/* Footer */
footer{background:var(--deep-dark);color:#B9D6DF;padding:72px 0 32px;font-size:.92rem;
  border-top:1px solid rgba(179,155,85,.55)}
footer .brand{color:#fff;font-size:1.5rem}
footer .brand svg path,footer .brand svg rect{fill:#fff}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
footer h4{font-family:'Outfit','Outfit Fallback',sans-serif;color:#fff;font-size:1rem;margin-bottom:14px;font-weight:500}
footer a{color:#B9D6DF;display:block;padding:5px 0}
footer a:hover{color:#fff;text-decoration:underline}
.disclaimer{margin-top:52px;padding-top:26px;border-top:1px solid rgba(255,255,255,.12);font-size:.8rem;color:#88AEBB;line-height:1.65}
.disclaimer a{display:inline;color:#B9D6DF;text-decoration:underline}

@media (max-width:1000px){
  .navlinks,.navcta{display:none}
  .burger{display:block}
  .mobilemenu{display:block}
}
@media (max-width:960px){
  .navlinks,.navcta{display:none}
  .burger{display:block}
  .mobilemenu{display:block}
  header.solid,header.menu-open{background:#fff}
  section{padding:76px 0}
  .steps{grid-template-columns:1fr 1fr;gap:24px}
  .steps.tall .step{grid-template-columns:1fr;gap:10px}
  .compare-grid,.about-grid,.contact-grid,.fgrid{grid-template-columns:1fr;gap:40px}
  .hero .wrap{padding:100px 0 40svh}
  .pagehead{padding:108px 0 74px}
}
/* Mobile-only: slightly wider banner→ridge gap on the comparison-tool
   pages and FAQ pages. Desktop uses the min-width:761px rules. */
@media (max-width:760px){
  .view[data-route="/kiwisaver-returns-comparison"] .pagehead,
  .view[data-route="/kiwisaver-fees-comparison"] .pagehead,
  .view[data-route="/kiwisaver-projection-tool"] .pagehead,
  .view[data-route="/guides"] .pagehead,
  .view[data-route="/tools"] .pagehead{padding-bottom:92px}
}
@media (max-width:560px){
  .steps{grid-template-columns:1fr}
  .row2{grid-template-columns:1fr}
  .breakdown{grid-template-columns:1fr}
  .panel,.stat-card{padding:24px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rise{opacity:1;transform:none}
}
/* on screens wider than 16:9 the waterline rises off the bottom, so keep the button above it */
@media (min-aspect-ratio:16/9){ .hero .wrap{padding-bottom:37svh} }
@media (min-aspect-ratio:19/9){ .hero .wrap{padding-bottom:44svh} }

/* ---------- Guides / SEO pages ---------- */
.faq{margin-top:34px;max-width:76ch}
.faq details{border-bottom:1.5px solid var(--line);padding:20px 0}
.faq{max-width:72ch}
.faq .qa summary{cursor:pointer;font-weight:600;font-size:1.08rem;color:var(--deep);list-style:none;padding-right:28px;position:relative}
.faq .qa summary::-webkit-details-marker{display:none}
.faq .qa summary::after{content:'+';position:absolute;right:0;top:0;color:var(--lake);font-weight:400;font-size:1.3rem}
.faq .qa[open] summary::after{content:'\2212'}
.faq .qa-a{margin-top:12px;max-width:68ch}
.faq .qa-a p{margin:0;color:#33586A;font-size:1.02rem}
.faq details:first-of-type{border-top:1.5px solid var(--line)}
.faq summary{font-family:'Outfit','Outfit Fallback',sans-serif;font-size:1.12rem;color:var(--deep);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--lake);font-size:1.5rem;line-height:1;flex:none}
.faq details[open] summary::after{content:"\2212"}
.faq details p{color:var(--muted);margin-top:12px;max-width:68ch}
footer h1.fh,h2.fh{font-family:'Outfit','Outfit Fallback',sans-serif;color:#fff;font-size:1rem;margin-bottom:14px;font-weight:500}
.stat-card h1.sc,h2.sc{color:#fff;font-size:1.7rem;max-width:20ch}
.guidegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.gcard{display:block;border:1.5px solid var(--line);border-radius:var(--card);padding:26px;transition:border-color .25s ease,transform .25s ease}
.gcard:hover{border-color:var(--lake);transform:translateY(-3px)}
.gcard h2{font-size:1.2rem;margin-bottom:10px}
.gcard p{color:var(--muted);font-size:.95rem}
.gcard .go{display:inline-block;margin-top:14px;color:var(--lake);font-weight:600;font-size:.9rem}

/* ---------- Meet the team ---------- */
.teamgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:40px}
.teamcard{border:1.5px solid var(--line);border-radius:var(--card);padding:30px 26px;text-align:center;transition:border-color .25s ease,transform .25s ease}
.teamcard:hover{border-color:var(--lake);transform:translateY(-3px)}
.team-avatar{width:84px;height:84px;border-radius:50%;margin:0 auto 18px;display:grid;place-items:center;overflow:hidden;
  background:rgba(32,136,166,.12);color:var(--deep);font-family:'Outfit','Outfit Fallback',sans-serif;font-weight:500;font-size:1.6rem;letter-spacing:.02em}
.team-avatar.has-photo{background:none}
/* Contact privacy note: in the info column on desktop, but moved to the
   bottom of the form on mobile. */
.note-privacy-m{display:none}
@media (max-width:760px){
  .note-privacy-d{display:none}
  .note-privacy-m{display:block}
}
.team-avatar img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;border-radius:50%}
.teamcard h3{font-family:'Outfit','Outfit Fallback',sans-serif;font-weight:400;font-size:1.2rem;color:var(--deep);margin-bottom:4px}
.team-role{color:var(--lake);font-size:.88rem;font-weight:600;margin-bottom:2px}
.team-fsp{color:var(--muted);font-size:.8rem;margin-bottom:12px}
.team-bio{color:var(--muted);font-size:.92rem;line-height:1.6}

/* Adviser bios are long, so only the opening paragraph shows and the rest
   sits in a <details>. No JS, and the full text stays in the HTML so
   crawlers still read all of it. Left-aligned because centred body copy of
   this length is hard work; the avatar, name and role stay centred. */
.team-sec .team-bio,
.team-sec .team-more{text-align:left}
.team-more{margin-top:10px}
.team-more summary{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  list-style:none;padding:6px 0;
  color:var(--lake);font-weight:600;font-size:.88rem;
}
.team-more summary::-webkit-details-marker{display:none}
.team-more summary::after{
  content:"";width:6px;height:6px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .2s ease;
}
.team-more[open] summary::after{transform:rotate(-135deg) translateY(1px)}
.team-more summary:hover{color:var(--deep)}
.team-more summary:focus-visible{outline:2px solid var(--lake);outline-offset:3px;border-radius:4px}
.team-more[open] .lbl-more,
.team-more:not([open]) .lbl-less{display:none}
.team-more p{color:var(--muted);font-size:.92rem;line-height:1.6;margin-top:12px}
@media (prefers-reduced-motion:reduce){.team-more summary::after{transition:none}}
@media (max-width:900px){.teamgrid{grid-template-columns:1fr 1fr;gap:24px}}
@media (max-width:560px){.teamgrid{grid-template-columns:1fr}}

/* ---------- Our Services (About page) ---------- */
.servicesgrid{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin-top:40px}
.servicecard{border:1.5px solid var(--line);border-radius:var(--card);padding:40px 34px;text-align:center;transition:border-color .25s ease,transform .25s ease}
.servicecard:hover{border-color:var(--lake);transform:translateY(-3px)}
.servicecard .pillar-ic{margin:0 auto 22px}
.servicecard h3{font-family:'Outfit','Outfit Fallback',sans-serif;font-weight:400;font-size:1.4rem;color:var(--deep);margin-bottom:12px}
.servicecard p{color:var(--muted);font-size:.98rem;line-height:1.6;margin:0 auto 26px;max-width:36ch}
@media (max-width:760px){.servicesgrid{grid-template-columns:1fr}}
.svc-sec{padding-top:40px;padding-bottom:40px}
.team-sec{padding-top:40px}
.answerbox{background:var(--paper);border:1.5px solid var(--line);border-left:4px solid var(--lake);border-radius:10px;padding:24px 28px;margin:0 0 34px;max-width:72ch}
.answerbox p{margin:0;color:var(--ink);font-size:1.05rem}
.answerbox b{color:var(--deep)}
.article{max-width:72ch;padding:80px 0 40px}
.article h2{font-size:1.6rem;margin:46px 0 14px}
.article h3{font-size:1.15rem;margin:28px 0 10px;font-weight:500}
.process-steps h3{margin:14px 0 4px}
.process-steps p{margin-bottom:8px}
.article p{margin-bottom:16px;color:#33586A}
.article ul,.article ol{margin:0 0 18px 22px;color:#33586A}
.article li{margin-bottom:9px}
.article strong{color:var(--deep)}
.article a{text-decoration:underline}
.article .tablewrap{margin:28px 0}
@media (max-width:960px){.guidegrid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.guidegrid{grid-template-columns:1fr}}

/* ---------- Brand logo (uploaded mark) ---------- */
.brand{display:inline-flex;align-items:center;gap:0;font-size:0;line-height:0}
.brand img{display:block;height:52px;width:auto}
footer .brand img{height:46px}
@media (max-width:560px){.brand img{height:42px}}

/* ---------- KiwiSaver Tools dropdown ---------- */
.drop{position:relative}
.dropbtn{display:flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;
         font-family:'Figtree','Figtree Fallback',sans-serif;font-size:1.06rem;font-weight:500;color:var(--deep);
         padding:4px 0;white-space:nowrap;position:relative}
.dropbtn svg{width:16px;height:16px;transition:transform .25s ease}
.drop.open .dropbtn svg{transform:rotate(180deg)}
.dropbtn::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--lake);transition:width .25s ease}
.drop:hover .dropbtn::after,.drop.open .dropbtn::after,.dropbtn[aria-current="page"]::after{width:calc(100% - 22px)}
.dropmenu{position:absolute;top:calc(100% + 14px);left:-14px;z-index:80;min-width:330px;
          background:#fff;border-radius:16px;padding:10px;box-shadow:0 18px 46px rgba(18,56,70,.18);
          border:1px solid var(--line);opacity:0;visibility:hidden;transform:translateY(-6px);
          transition:opacity .2s ease,transform .2s ease,visibility .2s}
.drop.open .dropmenu{opacity:1;visibility:visible;transform:none}
.dropmenu::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
.dropmenu a{display:block;padding:10px 14px;border-radius:9px;font-size:.97rem;color:var(--ink);transition:background .18s ease}
.dropmenu a:hover{background:var(--paper);color:var(--deep)}
.dropmenu a[aria-current="page"]{background:var(--paper);color:var(--deep);font-weight:600}
.dropmenu a.dtop b{display:block;font-family:'Outfit','Outfit Fallback',sans-serif;font-weight:500;font-size:1.05rem;color:var(--deep)}
.dropmenu a.dtop span{display:block;font-size:.84rem;color:var(--muted);margin-top:2px}
.dropmenu hr{border:0;border-top:1px solid var(--line);margin:8px 12px}

/* mobile menu groups */
.mobilemenu.open{max-height:760px}
.mgroup{padding:14px 16px 6px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
        color:var(--lake);font-weight:600;border-bottom:1px solid var(--line);margin:0}
.mobilemenu a.msub{padding-left:30px;font-size:.98rem;color:var(--muted)}
.mobilemenu a.msub:hover{color:var(--deep)}

/* ---------- Returns & fee comparison tool ---------- */
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin:34px 0 18px}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.chip{cursor:pointer;font-family:'Figtree','Figtree Fallback',sans-serif;font-size:.88rem;font-weight:600;padding:8px 16px;border-radius:999px;
      border:1.5px solid var(--line);background:#fff;color:var(--muted);transition:all .2s ease}
.chip:hover{border-color:var(--mist);color:var(--deep)}
.chip[aria-pressed="true"]{background:var(--deep);border-color:var(--deep);color:#fff}
table.fees th{padding:0}
.sortbtn{width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:15px 20px;
         font-family:'Outfit','Outfit Fallback',sans-serif;font-weight:500;font-size:.95rem;color:var(--deep);display:flex;gap:6px;align-items:center}
.sortbtn:hover{color:var(--lake)}
.sortbtn span{font-size:.75rem;opacity:.5}
.sortbtn[data-dir] span{opacity:1;color:var(--lake)}
table.fees td{font-size:.93rem;white-space:nowrap}
table.fees td.fname{white-space:normal;font-weight:600;color:var(--deep)}
table.fees td.num{font-variant-numeric:tabular-nums}
/* Fees table: the fund type shows as its own column on desktop and stacks
   under the fund name on mobile, so Fund / Type / Fee all fit one screen
   with no horizontal scroll. */
.ftype-m{display:none}
@media (max-width:600px){
  /* two columns now, so drop the 520px min-width that lets wide tables
     scroll — this one fits the screen. */
  table.fees{min-width:0}
  table.fees th:nth-child(2),
  table.fees td.ftype-col{display:none}
  table.fees td.fname{padding-top:10px;padding-bottom:10px}
  .ftype-m{
    display:block;margin-top:2px;font-weight:500;
    font-size:.78rem;color:var(--muted);white-space:nowrap;
  }
}
/* Returns table (#feeTable): same mobile treatment — stack the fund type
   under the name and hide the separate Type column, and widen the fund
   name so two-word names sit on one line. The four return columns still
   scroll horizontally, but Fund + Type now line up correctly. */
.rtype-m{display:none}
@media (max-width:600px){
  #feeTable th:nth-child(2),
  #feeTable td.rtype-col{display:none}
  #feeTable td.fname{padding-top:10px;padding-bottom:10px;min-width:220px;white-space:normal}
  #feeTable th:first-child{min-width:190px}
  .rtype-m{
    display:block;margin-top:2px;font-weight:500;
    font-size:.78rem;color:var(--muted);white-space:nowrap;
  }
}
.risk{display:inline-block;min-width:22px;text-align:center;font-weight:600;font-size:.8rem;
      padding:2px 7px;border-radius:6px;background:var(--paper);color:var(--deep);border:1px solid var(--line)}
.cheap{color:#1F7B96;font-weight:700}
.dear{color:var(--warn);font-weight:700}
.gapbox{margin-top:16px;padding:22px 24px;border-radius:var(--card);border:1.5px dashed var(--gold);background:#FDF9F2;text-align:center}
.gapbox span{display:block;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep);font-weight:600}
.gapbox b{display:block;font-family:'Outfit','Outfit Fallback',sans-serif;font-size:clamp(1.8rem,3.6vw,2.5rem);color:var(--gold-deep);margin:6px 0 2px;font-weight:500}
.gapbox span:last-child{text-transform:none;letter-spacing:0;font-size:.9rem;font-weight:500;color:var(--muted)}
@media (max-width:560px){.toolbar{flex-direction:column;align-items:flex-start}}

/* ---------- Single-file routing ---------- */
.view{display:none}
.view.active{display:block}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Home opener (recognition) ---------- */
.opener { padding:78px 0 86px; }
.opener .wrap { max-width:1040px; }
.opener-h { font-family:'Outfit','Outfit Fallback',sans-serif; font-weight:400; letter-spacing:-.01em; font-size:clamp(1.7rem,3.4vw,2.7rem); line-height:1.22; color:var(--deep); max-width:20ch; margin:0; }
.opener-h b { color:var(--gold-deep); font-weight:600; }
.opener-sub { color:var(--muted); font-size:clamp(1rem,1.2vw,1.12rem); line-height:1.6; max-width:60ch; margin-top:20px; }
.opener-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-top:52px; }
.ocard { border-top:2px solid var(--line); padding-top:22px; transition:border-color .3s ease; }
.ocard:hover { border-color:var(--lake); }
.ocard-k { display:block; font-family:'Outfit','Outfit Fallback',sans-serif; font-weight:600; font-size:1.06rem; color:var(--deep); margin-bottom:10px; }
.ocard p { color:var(--muted); font-size:.98rem; line-height:1.55; margin:0; }
.opener-cta { display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-top:52px; }
.opener-note { color:var(--muted); font-size:.9rem; }
@media (max-width:760px){
  .opener { padding:56px 0 62px; }
  .opener-cards { grid-template-columns:1fr; gap:26px; margin-top:40px; }
  .opener-cta { margin-top:40px; }
}
/* ---------- Our partners marquee ---------- */
.partners .lead{margin-bottom:0}
.partners{padding-top:40px;padding-bottom:40px}
.partners + section{padding-top:46px}
.partners-h{max-width:none;text-align:center;margin:0 auto;font-size:clamp(2rem,3.6vw,3rem)}
.partners-intro{text-align:center;color:var(--muted);font-size:1rem;line-height:1.6;max-width:56ch;margin:18px auto 0}
.partners-disc{text-align:center;color:var(--muted);font-size:.85rem;line-height:1.6;max-width:66ch;margin:16px auto 0}
.pslider{position:relative;margin-top:48px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.pslider-viewport{overflow:hidden}
.pslider-track{display:flex;align-items:center;list-style:none;margin:0;padding:12px 0;width:max-content;
  animation:pmarquee 48s linear infinite;will-change:transform}
.pslider:hover .pslider-track{animation-play-state:paused}
@keyframes pmarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.plogo{
  flex:0 0 auto;width:236px;min-height:138px;margin:0 13px;
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:26px 30px;background:#fff;
  border:1px solid var(--line);border-radius:var(--card);user-select:none;
  transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease}
.plogo:hover{border-color:var(--lake);transform:translateY(-4px);box-shadow:0 14px 32px rgba(18,56,70,.12)}
.plogo-img{max-width:100%;max-height:82px;width:auto;height:auto;object-fit:contain;display:block}
@media (max-width:620px){
  .plogo{width:184px;min-height:116px;margin:0 9px;padding:22px 22px}
  .plogo-img{max-height:64px}
}
@media (prefers-reduced-motion:reduce){
  .pslider{overflow-x:auto}
  .pslider-track{animation:none;width:auto}
}
/* ---------- Why investly ---------- */
.whyus{text-align:center;padding-top:56px;padding-bottom:70px}
.whyus-head{max-width:none;margin:0;text-align:left}
.whyus-title{font-family:'Outfit','Outfit Fallback',sans-serif;font-weight:400;color:var(--deep);
  /* matches #tools-h so "Book a Free KiwiSaver Review" and "KiwiSaver Fund
     Comparison Tools" set at exactly the same size at every width */
  font-size:clamp(1.15rem,5vw,2.45rem);letter-spacing:-.015em;line-height:1.1;max-width:none}
.whyus-intro{color:var(--muted);font-size:clamp(1rem,1.2vw,1.12rem);line-height:1.6;max-width:70ch;margin:20px auto 0}
.whyus-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:34px;margin-top:40px}
.pillar{display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:32px 26px;background:#fff;border:1.5px solid var(--line);border-radius:18px;
  box-shadow:0 6px 22px rgba(15,63,82,.06);transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.pillar:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(15,63,82,.13);border-color:rgba(32,136,166,.45)}
.pillar-ic{width:84px;height:84px;border-radius:22px;display:grid;place-items:center;
  background:rgba(32,136,166,.09);margin-bottom:22px;transition:background .3s ease,transform .3s ease}
.pillar:hover .pillar-ic{background:rgba(32,136,166,.16)}
.pillar-ic svg{width:44px;height:44px}
.pillar h3{font-family:'Outfit','Outfit Fallback',sans-serif;font-weight:400;font-size:1.28rem;color:var(--deep);margin-bottom:12px}
.pillar p{color:var(--muted);font-size:.98rem;line-height:1.6;max-width:34ch}
.whyus-sub{margin-top:36px;text-align:center;font-family:'Outfit','Outfit Fallback',sans-serif;
  font-size:clamp(1.45rem,2.3vw,1.85rem);font-weight:400;color:var(--deep)}
.whyus-intro b{color:var(--deep);font-weight:600}

/* ---------- How is our advice free callout ---------- */
.nofees{margin-top:32px;text-align:center;display:flex;justify-content:center;align-items:center;gap:16px;flex-wrap:wrap}
.nofees-word{font-family:'Outfit','Outfit Fallback',sans-serif;font-weight:400;letter-spacing:-.015em;
  font-size:clamp(1.6rem,2.7vw,2.3rem);color:var(--deep);line-height:1.1;margin:0}
.nofees-sub{font-size:1rem;color:var(--muted);margin:14px auto 0;max-width:60ch;font-weight:400}
.nofees .btn{margin-top:0}

/* ---------- advice stat band ---------- */
.statband{background:var(--deep-dark);border-top:1px solid rgba(179,155,85,.55);border-bottom:1px solid rgba(179,155,85,.55);padding:70px 0}
.statband-in{max-width:940px;margin:0 auto;text-align:center}
.statband-kicker{font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:6px}
.statband-fig{display:inline-flex;align-items:flex-start;justify-content:center;color:var(--gold);line-height:.85;font-family:Georgia,'Times New Roman',serif;margin-bottom:18px}
.statband-num{font-size:clamp(4.8rem,12vw,9rem);letter-spacing:-.02em}
.statband-sup{font-size:clamp(1.8rem,3.8vw,2.8rem);margin-top:.35em}
.statband-body{max-width:860px;margin:0 auto}
.statband-lead{font-family:'Outfit','Outfit Fallback',sans-serif;color:#fff;font-size:clamp(1.15rem,1.9vw,1.62rem);line-height:1.4;font-weight:400}
.statband-lead .hl{color:var(--gold);font-weight:600}
.statband-src{color:#B9D6DF;font-size:.86rem;line-height:1.62;margin-top:20px}
.statband-src em{font-style:italic}
@media (max-width:760px){
  section{padding:56px 0}
  .statband{padding:44px 0}
  .tools-sec{padding-bottom:40px}
  .whyus{padding-top:40px;padding-bottom:44px}
  .partners{padding-top:24px}
  .guidegrid{margin-top:28px}
  .pslider{margin-top:28px}
  footer{padding-top:48px}
}
@media (max-width:900px){
  .whyus-grid{grid-template-columns:1fr 1fr;gap:44px 30px}
}
@media (max-width:560px){
  .whyus-grid{grid-template-columns:1fr;gap:26px}
  .pillar p{max-width:42ch}
}

/* ================================================================
   Homepage type scale — modest increase (~8%).
   Scoped to the home route only. Delete this block to revert.
   ================================================================ */
.view[data-route="/"] .hero h1{font-size:clamp(2.05rem,4.3vw,3.7rem)}
.view[data-route="/"] .hero p{font-size:clamp(1.02rem,1.3vw,1.24rem)}
.view[data-route="/"] .sec-h{font-size:clamp(1.7rem,2.85vw,2.45rem)}
/* "KiwiSaver Fund Comparison Tools" is 30 chars — the .sec-h 22ch cap forced a
   wrap. Lift the cap for this heading and scale the type so it stays on one
   line at every width. */
@media (max-width:560px){
  .view[data-route="/"] #tools-h,
  .view[data-route="/"] .whyus-title{max-width:none;font-size:clamp(1.2rem,5.6vw,1.4rem)}
  .view[data-route="/"] #tools-h{white-space:nowrap}
}
/* Desktop: both homepage section headings larger, matched. Above the mobile
   breakpoint so the <=560px sizes stay untouched. */
@media (min-width:561px){
  .view[data-route="/"] #tools-h,
  .view[data-route="/"] .whyus-title{font-size:clamp(2rem,3.4vw,2.9rem);max-width:none;white-space:nowrap}
}
.view[data-route="/"] .lead{font-size:1.08rem}
.view[data-route="/"] .gcard h2{font-size:1.28rem}
.view[data-route="/"] .gcard p{font-size:1.02rem}

/* ---- Homepage + FAQs index cards: one accent per card ------------------------------
   Alternating lake blue and deep teal. --c-accent is the top rule and the
   hover edge; --c-text is the version used for type so every card keeps
   4.5:1 contrast against its tint. Odd/even, so the FAQ grid lower down
   picks up the same alternation. Delete this block to revert. */
.view[data-route="/"] .guidegrid .gcard,
.view[data-route="/faqs"] .guidegrid .gcard,
.view[data-route="/guides"] .guidegrid .gcard{
  background:var(--c-tint);
  border:1px solid var(--c-line);
  border-top:3px solid var(--c-accent);
  border-radius:var(--card);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.view[data-route="/"] .guidegrid .gcard:hover,
.view[data-route="/faqs"] .guidegrid .gcard:hover,
.view[data-route="/guides"] .guidegrid .gcard:hover{
  border-color:var(--c-accent);
  transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(18,56,70,.13);
}
.view[data-route="/"] .guidegrid .gcard h2,
.view[data-route="/faqs"] .guidegrid .gcard h2,
.view[data-route="/guides"] .guidegrid .gcard h2{color:var(--c-text)}
.view[data-route="/"] .guidegrid .gcard p,
.view[data-route="/faqs"] .guidegrid .gcard p,
.view[data-route="/guides"] .guidegrid .gcard p{color:#4E6F7C}
.view[data-route="/"] .guidegrid .gcard .go,
.view[data-route="/faqs"] .guidegrid .gcard .go,
.view[data-route="/guides"] .guidegrid .gcard .go{color:var(--c-text)}
/* ---- Homepage "Book a Free KiwiSaver Review" ----
   Section keeps the standard pale .alt background. The only added emphasis
   is a short gold rule above the heading. Delete to revert. */
@media (max-width:760px){
  }

.view[data-route="/"] .guidegrid .gcard:nth-child(odd),
.view[data-route="/faqs"] .guidegrid .gcard:nth-child(odd),
.view[data-route="/guides"] .guidegrid .gcard:nth-child(odd){--c-accent:#2088A6;--c-text:#106A85;--c-tint:#EDF6F9;--c-line:#CFE6EE}
.view[data-route="/"] .guidegrid .gcard:nth-child(even),
.view[data-route="/faqs"] .guidegrid .gcard:nth-child(even),
.view[data-route="/guides"] .guidegrid .gcard:nth-child(even){--c-accent:#175A72;--c-text:#175A72;--c-tint:#EBF2F5;--c-line:#C9DCE4}
/* /tools cards: same standout alternating tint + coloured top rule as the guide cards, so they don't read as flat outlined boxes. */
.view[data-route="/tools"] .guidegrid .gcard{background:var(--c-tint);border:1px solid var(--c-line);border-top:3px solid var(--c-accent)}
.view[data-route="/tools"] .guidegrid .gcard:hover{border-color:var(--c-accent);transform:translateY(-3px);box-shadow:0 12px 28px rgba(18,56,70,.13)}
.view[data-route="/tools"] .guidegrid .gcard h2,
.view[data-route="/tools"] .guidegrid .gcard .go{color:var(--c-text)}
.view[data-route="/tools"] .guidegrid .gcard p{color:#4E6F7C}
.view[data-route="/tools"] .guidegrid .gcard:nth-child(odd){--c-accent:#2088A6;--c-text:#106A85;--c-tint:#EDF6F9;--c-line:#CFE6EE}
.view[data-route="/tools"] .guidegrid .gcard:nth-child(even){--c-accent:#175A72;--c-text:#175A72;--c-tint:#EBF2F5;--c-line:#C9DCE4}
/* homepage only: a lighter wash in the tools and guide cards. Same accents and
   type, just less tint. Identical specificity to the rules above, so this has
   to stay after them. */
.view[data-route="/"] .guidegrid .gcard:nth-child(odd){--c-tint:#F5FAFC;--c-line:#DBEBF1}
.view[data-route="/"] .guidegrid .gcard:nth-child(even){--c-tint:#F4F8FA;--c-line:#D6E4EA}

/* Homepage tools cards: a light teal/navy wash with a deep-teal top rule.
   Overrides the alternating lake/teal palette for the .tools-sec grid only —
   the FAQ grid further down the homepage keeps the alternation. Same
   specificity as the nth-child rules above, so this must stay after them.
   --c-text stays deep teal rather than gold: gold-deep is 4.16:1 on white,
   which is under AA for type this size, while deep teal is 7.66:1. Gold is
   used for the top rule and the hover edge, where the contrast floor is
   lower. */
.view[data-route="/"] .tools-sec .guidegrid .gcard{
  --c-accent:var(--deep);
  --c-text:var(--deep);
  --c-tint:#EDF6F9;
  --c-line:#D6E7EE;
  border-width:1.5px;
  border-top-width:3px;
}
.view[data-route="/"] .tools-sec .guidegrid .gcard:hover{
  border-color:var(--deep);
  box-shadow:0 16px 34px rgba(15,63,82,.13);
}
.view[data-route="/"] .pillar h3{font-size:1.36rem}
.view[data-route="/"] .pillar p{font-size:1.05rem}
.view[data-route="/"] .whyus-intro{font-size:clamp(1.06rem,1.3vw,1.2rem)}
/* ---- /faqs: bigger banner heading, tighter gap down to the topic cards ----
   The heading had no size rule at all, so it fell back to the browser default
   24px while every other inner page runs 54px. Sized to match, and the three
   stacked gaps below it (banner padding, section padding, grid margin) pulled
   in from 218px to about 115px. */
.view[data-route="/faqs"] .pagehead h2{
  font-size:clamp(1.7rem,3.5vw,2.7rem);max-width:none;margin:0;
}
/* The ridge is 120px tall and its translucent front peak reaches 66px above
   the banner's bottom edge, so the heading needs at least that much padding
   beneath it plus breathing room. The space is taken back off the section
   below instead, keeping the heading-to-cards gap tight. */

.view[data-route="/faqs"] .pagemain > section:first-of-type{padding-top:18px}
.view[data-route="/faqs"] .pagemain > section:first-of-type .guidegrid{margin-top:16px}
@media(max-width:760px){
  .view[data-route="/faqs"] .pagehead{padding-bottom:96px}
  .view[data-route="/faqs"] .pagemain > section:first-of-type{padding-top:14px}
}

/* ---- /guides: tighten the run from the last guide card to the CTA card ----
   Was 100px of section padding on each side of the join (200px all up). */
.view[data-route="/guides"] .guides-top{padding-bottom:34px}
.view[data-route="/guides"] .guides-top + section{padding-top:34px}
@media (max-width:760px){
  .view[data-route="/guides"] .guides-top{padding-bottom:22px}
  .view[data-route="/guides"] .guides-top + section{padding-top:22px}
}

/* ---- book-a-free-kiwisaver-review: darker form type, more of the gold accent ----
   Labels and the left-hand copy were all on --muted (4.3:1), which reads faint
   next to the dark input text. Note .contactinfo p also catches the eyebrow and
   the privacy note, so those get their own colours back. */
.view[data-route="/book-a-free-kiwisaver-review"] .field label{color:var(--deep)}
.view[data-route="/book-a-free-kiwisaver-review"] .field input,
.view[data-route="/book-a-free-kiwisaver-review"] .field select,
.view[data-route="/book-a-free-kiwisaver-review"] .field textarea{color:var(--ink)}
.view[data-route="/book-a-free-kiwisaver-review"] .contactinfo p{color:var(--ink)}
.view[data-route="/book-a-free-kiwisaver-review"] .contactinfo p.eyebrow{color:#6F6238}
.view[data-route="/book-a-free-kiwisaver-review"] .contactinfo p.note{color:var(--deep)}
/* gold: the form panel outlined in gold on all four sides, and warm icons */
.view[data-route="/book-a-free-kiwisaver-review"] .panel{border:2px solid var(--gold)}
.view[data-route="/book-a-free-kiwisaver-review"] .contactinfo .line svg{color:var(--gold-deep)}

/* ---- /about: more of the gold accent ----
   A rule above the two big section headings (same device as the banner and the
   homepage review section), a gold top edge on the service and team cards, and
   the adviser roles in gold rather than lake blue. */
.view[data-route="/about"] .servicecard,
.view[data-route="/about"] .teamcard{border-top:3px solid var(--gold)}
.view[data-route="/about"] .servicecard:hover,
.view[data-route="/about"] .teamcard:hover{border-color:var(--gold-deep)}
.view[data-route="/about"] .team-role{color:#6F6238}

/* ---- /about: the goal copy now sits in its own section under the banner ---- */
.view[data-route="/about"] .pagehead{padding-bottom:104px}
.view[data-route="/about"] .goal-sec{padding-top:24px;padding-bottom:8px}
.view[data-route="/about"] .goal-sec .lead{max-width:70ch}
.view[data-route="/about"] .goal-sec .lead + .lead{margin-top:14px}

/* ---- /tools page heading on a single line ----
   .returns-h caps at 22ch, which wraps this 31-character title. Same trick as
   the homepage section heading: no cap, nowrap, and a vw-driven clamp so it
   shrinks to fit narrow screens instead of overflowing. */
.view[data-route="/tools"] .pagehead .returns-h{
  max-width:none;white-space:nowrap;font-size:clamp(1.2rem,5vw,3.4rem);
}

/* ---- Homepage: more gold ----
   The rule that sits above "Book a Free KiwiSaver Review" repeated over the
   tools and partners headings, a gold top edge on the four review pillars,
   gold hairlines framing the partner logo strip, and the scroll arrow in gold.
   Accents only - no background washes. */
.view[data-route="/"] .whyus .pillar{
    border:none;
    border-top:3px solid var(--gold);
    border-radius:18px;
  }
.view[data-route="/"] .whyus .pillar:hover{ border-top-color:var(--gold-deep) }
.view[data-route="/"] .pslider{
  border-top:1px solid rgba(179,155,85,.45);
  border-bottom:1px solid rgba(179,155,85,.45);
  padding:14px 0;
}
.view[data-route="/"] .scrollcue{color:var(--gold-deep)}
.tools-sec .scrollcue-m{display:none}
@media (max-width:760px){
  .view[data-route="/"] .hero .scrollcue{ display:none }
  .view[data-route="/"] .tools-sec{ overflow:visible }
  .view[data-route="/"] .tools-sec .scrollcue-m{
    position:absolute; left:50%; top:0; transform:translate(-50%,-50%);
    z-index:7; width:44px; height:44px; border-radius:999px;
    display:inline-flex; align-items:center; justify-content:center;
    background:#fff; border:0; padding:0; cursor:pointer;
    box-shadow:0 6px 18px rgba(15,63,82,.16); color:var(--gold-deep);
  }
  .view[data-route="/"] .tools-sec .scrollcue-m svg{ width:22px; height:22px; display:block; animation:cueBob 1.6s ease-in-out 1.4s infinite }
}
.view[data-route="/"] .scrollcue:hover{color:#6F6238}

/* ---- Homepage: data-currency note above the tool cards ----
   Same gold-edged footnote device as the partners licence line. Sits between
   the lead and the grid; the grid's own 48px top margin is trimmed so the note
   reads as attached to the cards below it. */
.view[data-route="/"] .tools-note{
  margin:20px 0 0;padding:11px 18px;max-width:60ch;
  font-size:.88rem;line-height:1.6;color:var(--muted);
  background:var(--paper);border:1px solid var(--line);
  border-left:3px solid var(--gold);border-radius:0 10px 10px 0;
}
.view[data-route="/"] .tools-note + .guidegrid{margin-top:34px}

/* ---- Homepage: the three section headings set bold ---- */
.view[data-route="/"] #tools-h,
.view[data-route="/"] #whyus-h,
.view[data-route="/"] #partners-h{font-weight:600}

/* ---- "Our partners" on the homepage and /about: three lines, three jobs ----
   Heading stays as is; the intro is promoted to a display-face statement in
   deep teal; the licence line is demoted to a footnote card with a gold edge,
   with the two entity names picked out. Delete to revert. */
.view[data-route="/"] .partners-intro,
.view[data-route="/about"] .partners-intro{
  font-family:'Outfit','Outfit Fallback',sans-serif;color:var(--deep);font-weight:400;
  font-size:clamp(1rem,1.45vw,1.2rem);line-height:1.4;letter-spacing:-.01em;
  max-width:52ch;margin-top:14px;
}
.view[data-route="/"] .partners-disc,
.view[data-route="/about"] .partners-disc{
  max-width:62ch;margin:28px auto 0;padding:14px 20px 14px 22px;text-align:left;
  font-size:.88rem;line-height:1.65;color:var(--muted);
  background:#fff;border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:0 12px 12px 0;
}
.view[data-route="/"] .partners-disc b,
.view[data-route="/about"] .partners-disc b{color:var(--deep);font-weight:600}
/* /about: same heading size and weight as the homepage version, and the same
   cool band behind it rather than the inner-page ivory */
.view[data-route="/about"] #partners-h-2{font-size:clamp(1.7rem,2.85vw,2.45rem);font-weight:600}
.view[data-route="/about"] .pagemain section.partners{background:var(--paper)}
.view[data-route="/"] .nofees-sub{font-size:1.08rem}
.view[data-route="/"] .statband-lead{font-size:clamp(1.22rem,2vw,1.72rem)}

/* ================================================================
   /faqs/how-to-switch-kiwisaver — larger page heading, tighter rhythm
   ================================================================ */
.view[data-route="/faqs/how-to-switch-kiwisaver"] .pagehead,
.view[data-route="/faqs/kiwisaver-contribution-rates"] .pagehead,
.view[data-route="/faqs/withdraw-kiwisaver"] .pagehead,
.view[data-route="/faqs/kiwisaver-government-contribution"] .pagehead,
.view[data-route="/faqs/what-is-kiwisaver"] .pagehead,
.view[data-route="/faqs/best-kiwisaver-fund"] .pagehead,
.view[data-route="/faqs/kiwisaver-first-home"] .pagehead,
.view[data-route="/active-vs-passive-kiwisaver"] .pagehead,
.view[data-route="/disclosure"] .pagehead,
.view[data-route="/privacy"] .pagehead,
.view[data-route="/complaints"] .pagehead{padding:160px 0 84px}
@media (min-width:761px){
  .view[data-route="/faqs"] .pagehead,
  .view[data-route^="/faqs/"] .pagehead{padding-bottom:128px}
/* KiwiSaver Fund Comparison tool pages: slightly wider banner→ridge gap. */
.view[data-route="/kiwisaver-returns-comparison"] .pagehead,
.view[data-route="/kiwisaver-fees-comparison"] .pagehead,
.view[data-route="/kiwisaver-projection-tool"] .pagehead,
.view[data-route="/guides"] .pagehead,
.view[data-route="/tools"] .pagehead{padding-bottom:108px}
}
.view[data-route="/disclosure"] .prose,
.view[data-route="/privacy"] .prose,
.view[data-route="/complaints"] .prose{padding:16px 0 80px}
.view[data-route="/disclosure"] .prose > h2:first-child,
.view[data-route="/privacy"] .prose > h2:first-child,
.view[data-route="/complaints"] .prose > h2:first-child{margin-top:0}
.view[data-route="/active-vs-passive-kiwisaver"] .article{padding:16px 0 40px}
.view[data-route="/active-vs-passive-kiwisaver"] .article > h2:first-child{margin-top:0}
.view[data-route="/faqs/how-to-switch-kiwisaver"] .pagehead .crumbs,
.view[data-route="/faqs/kiwisaver-contribution-rates"] .pagehead .crumbs,
.view[data-route="/faqs/withdraw-kiwisaver"] .pagehead .crumbs,
.view[data-route="/faqs/kiwisaver-government-contribution"] .pagehead .crumbs,
.view[data-route="/faqs/what-is-kiwisaver"] .pagehead .crumbs,
.view[data-route="/faqs/best-kiwisaver-fund"] .pagehead .crumbs,
.view[data-route="/faqs/kiwisaver-first-home"] .pagehead .crumbs,
.view[data-route="/active-vs-passive-kiwisaver"] .pagehead .crumbs,
.view[data-route="/disclosure"] .pagehead .crumbs,
.view[data-route="/privacy"] .pagehead .crumbs,
.view[data-route="/complaints"] .pagehead .crumbs{
  margin-bottom:22px;
  font-size:.95rem;
}
.view[data-route="/faqs/how-to-switch-kiwisaver"] .pagehead h2,
.view[data-route="/faqs/kiwisaver-contribution-rates"] .pagehead h2,
.view[data-route="/faqs/withdraw-kiwisaver"] .pagehead h2,
.view[data-route="/faqs/kiwisaver-government-contribution"] .pagehead h2,
.view[data-route="/faqs/what-is-kiwisaver"] .pagehead h2,
.view[data-route="/faqs/best-kiwisaver-fund"] .pagehead h2,
  .view[data-route="/faqs/best-kiwisaver-fund-for-you"] .pagehead h2,
.view[data-route="/faqs/kiwisaver-first-home"] .pagehead h2,
.view[data-route="/active-vs-passive-kiwisaver"] .pagehead h2,
.view[data-route="/disclosure"] .pagehead h2,
.view[data-route="/privacy"] .pagehead h2,
.view[data-route="/complaints"] .pagehead h2{
  font-size:min(2.8rem,3.8vw);
  max-width:none;
  margin-top:0;
  white-space:nowrap;
}
@media(max-width:520px){
  .view[data-route="/faqs/how-to-switch-kiwisaver"] .pagehead h2,
  .view[data-route="/faqs/kiwisaver-contribution-rates"] .pagehead h2,
  .view[data-route="/faqs/withdraw-kiwisaver"] .pagehead h2,
  .view[data-route="/faqs/kiwisaver-government-contribution"] .pagehead h2,
  .view[data-route="/faqs/what-is-kiwisaver"] .pagehead h2,
  .view[data-route="/faqs/best-kiwisaver-fund"] .pagehead h2,
  .view[data-route="/faqs/best-kiwisaver-fund-for-you"] .pagehead h2,
  .view[data-route="/faqs/kiwisaver-first-home"] .pagehead h2,
  .view[data-route="/active-vs-passive-kiwisaver"] .pagehead h2,
  .view[data-route="/disclosure"] .pagehead h2,
  .view[data-route="/privacy"] .pagehead h2,
  .view[data-route="/complaints"] .pagehead h2{
    white-space:normal;
    font-size:2rem;
  }
}
.view[data-route="/faqs/how-to-switch-kiwisaver"] .article,
.view[data-route="/faqs/kiwisaver-contribution-rates"] .article,
.view[data-route="/faqs/withdraw-kiwisaver"] .article,
.view[data-route="/faqs/kiwisaver-government-contribution"] .article,
.view[data-route="/faqs/what-is-kiwisaver"] .article,
.view[data-route="/faqs/best-kiwisaver-fund"] .article,
.view[data-route="/faqs/kiwisaver-first-home"] .article,
.view[data-route="/faqs/best-kiwisaver-fund-for-you"] .article{padding:16px 0 12px}
.view[data-route="/faqs/how-to-switch-kiwisaver"] .article h2,
.view[data-route="/faqs/kiwisaver-contribution-rates"] .article h2,
.view[data-route="/faqs/withdraw-kiwisaver"] .article h2,
.view[data-route="/faqs/kiwisaver-government-contribution"] .article h2,
.view[data-route="/faqs/what-is-kiwisaver"] .article h2,
.view[data-route="/faqs/best-kiwisaver-fund"] .article h2,
.view[data-route="/faqs/kiwisaver-first-home"] .article h2{
  font-size:clamp(1.85rem,2.6vw,2.15rem);
  margin:0 0 14px;
}
.view[data-route="/faqs/how-to-switch-kiwisaver"] .article h2:not(:first-child),
.view[data-route="/faqs/kiwisaver-contribution-rates"] .article h2:not(:first-child),
.view[data-route="/faqs/withdraw-kiwisaver"] .article h2:not(:first-child),
.view[data-route="/faqs/kiwisaver-government-contribution"] .article h2:not(:first-child),
.view[data-route="/faqs/what-is-kiwisaver"] .article h2:not(:first-child),
.view[data-route="/faqs/best-kiwisaver-fund"] .article h2:not(:first-child),
.view[data-route="/faqs/kiwisaver-first-home"] .article h2:not(:first-child){margin-top:46px}
.view[data-route="/faqs/how-to-switch-kiwisaver"] .process-steps,
.view[data-route="/faqs/kiwisaver-contribution-rates"] .process-steps,
.view[data-route="/faqs/withdraw-kiwisaver"] .process-steps,
.view[data-route="/faqs/kiwisaver-government-contribution"] .process-steps,
.view[data-route="/faqs/kiwisaver-first-home"] .process-steps{margin-top:30px}
.view[data-route="/faqs/how-to-switch-kiwisaver"] section,
.view[data-route="/faqs/kiwisaver-contribution-rates"] section,
.view[data-route="/faqs/withdraw-kiwisaver"] section,
.view[data-route="/faqs/kiwisaver-government-contribution"] section,
.view[data-route="/faqs/what-is-kiwisaver"] section,
.view[data-route="/faqs/best-kiwisaver-fund"] section,
.view[data-route="/faqs/kiwisaver-first-home"] section{padding:44px 0}
.view[data-route="/faqs/how-to-switch-kiwisaver"] .faqh,
.view[data-route="/faqs/kiwisaver-contribution-rates"] .faqh,
.view[data-route="/faqs/withdraw-kiwisaver"] .faqh,
.view[data-route="/faqs/kiwisaver-government-contribution"] .faqh,
.view[data-route="/faqs/what-is-kiwisaver"] .faqh,
.view[data-route="/faqs/kiwisaver-first-home"] .faqh,
.view[data-route="/faqs/best-kiwisaver-fund"] .faqh{
  font-size:1.35rem;
  font-weight:500;
  margin-bottom:36px;
  max-width:72ch;
}
.view[data-route="/faqs/best-kiwisaver-fund"] .toolcard{
  margin:4px 0 34px;
  padding:32px 34px;
  border-width:2px;
}
.view[data-route="/faqs/best-kiwisaver-fund"] .toolcard h2{font-size:1.5rem;margin-bottom:12px}
.view[data-route="/faqs/best-kiwisaver-fund"] .toolcard p{font-size:1.05rem;max-width:68ch}
.view[data-route="/faqs/best-kiwisaver-fund"] .toolcard .go{font-size:1rem;margin-top:16px}
@media(max-width:560px){
  .view[data-route="/faqs/best-kiwisaver-fund"] .toolcard{padding:24px 22px}
  .view[data-route="/faqs/best-kiwisaver-fund"] .toolcard h2{font-size:1.3rem}
}
.view[data-route="/faqs/how-to-switch-kiwisaver"] .faq,
.view[data-route="/faqs/kiwisaver-contribution-rates"] .faq,
.view[data-route="/faqs/withdraw-kiwisaver"] .faq,
.view[data-route="/faqs/kiwisaver-government-contribution"] .faq,
.view[data-route="/faqs/what-is-kiwisaver"] .faq,
.view[data-route="/faqs/best-kiwisaver-fund"] .faq,
.view[data-route="/faqs/kiwisaver-first-home"] .faq{margin-top:0}
@media(max-width:760px){
  .view[data-route="/faqs/how-to-switch-kiwisaver"] .pagehead,
  .view[data-route="/faqs/kiwisaver-contribution-rates"] .pagehead,
  .view[data-route="/faqs/withdraw-kiwisaver"] .pagehead,
  .view[data-route="/faqs/kiwisaver-government-contribution"] .pagehead,
  .view[data-route="/faqs/what-is-kiwisaver"] .pagehead,
  .view[data-route="/faqs/best-kiwisaver-fund"] .pagehead,
  .view[data-route="/faqs/kiwisaver-first-home"] .pagehead,
  .view[data-route="/active-vs-passive-kiwisaver"] .pagehead,
  .view[data-route="/disclosure"] .pagehead,
  .view[data-route="/privacy"] .pagehead,
  .view[data-route="/complaints"] .pagehead{padding:118px 0 96px}
  .view[data-route="/faqs/how-to-switch-kiwisaver"] .article,
.view[data-route="/faqs/best-kiwisaver-fund-for-you"] .article{padding:12px 0 8px}
  .view[data-route="/faqs/how-to-switch-kiwisaver"] section{padding:34px 0}
}

.view[data-route="/faqs/withdraw-kiwisaver"] .article h1.sub-h,h2.sub-h{font-size:1.35rem}

.view[data-route="/faqs/what-is-kiwisaver"] .article h1.sub-h,h2.sub-h{font-size:1.35rem}