/* latin-ext */
@font-face {
  font-family: 'Capriola';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/capriola-v15-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Capriola';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/capriola-v15-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url(../fonts/caveat-v23-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url(../fonts/caveat-v23-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/roboto-v51-400-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/roboto-v51-400-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}



:root{
  --cream:#fffdf6; --cream2:#fdf8ea; --tan:#efe6cf; --tan2:#e4dabe; --sand:#f6ecd2;
  --ink:#111111; --mango:#fbc45c; --amber:#e09a4a; --rust:#c47b35; --amberlite:#fcd58c;
  --green:#6f9140; --green-d:#5d7a32; --green-l:#cfe0b4; --text:#3a3328; --soft:#6a6353; --line:#cdbf9c;
  --r:24px; --ink-w:1.5px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:'Roboto',sans-serif;color:var(--text);background:var(--cream);line-height:1.6;overflow-x:clip;font-size:16px}
h1,h2,h3,h4{font-family:'Capriola',sans-serif;line-height:1.14;font-weight:400;color:var(--ink);margin:0}
p{margin:0}
a{color:inherit}
img{max-width:100%;display:block}


.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;background:var(--mango);color:var(--ink);font:700 16px/1.2 'Roboto',sans-serif;padding:15px 30px;border-radius:999px;text-decoration:none;border:2px solid var(--ink);box-shadow:0 5px 0 var(--ink);transition:transform .1s,box-shadow .1s;cursor:pointer}
.btn:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--ink)}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--ink)}
.btn-ghost{background:transparent;box-shadow:none;border:2px solid var(--tan2);font-weight:500}
.btn-ghost:hover{border-color:var(--ink);transform:none;box-shadow:none}
.btn:focus-visible,.opt:focus-visible,.chip:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.hl{position:relative;z-index:0;white-space:nowrap;padding:0 .06em;color:var(--ink)}
.hl::before{content:"";position:absolute;z-index:-1;inset:-.14em -.26em;background:var(--mango);border-radius:.5em;transform:rotate(-1.5deg)}
.eyebrow{display:block;font-family:'Caveat',cursive;font-weight:700;font-size:clamp(26px,2vw,30px);line-height:1.1;color:var(--rust)}
.chips{display:flex;gap:18px;flex-wrap:wrap;font-weight:500;font-size:14px}
.chips span{display:flex;align-items:center;gap:8px;white-space:nowrap}
.chips img{width:28px;height:28px;object-fit:contain}


.brand{display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.brand-word{font-family:'Capriola',sans-serif;font-weight:700;font-size:26px;letter-spacing:-.01em;line-height:1;color:var(--ink)}
.brand img{width:34px;height:34px;object-fit:contain}

/* quiz options: one component for all three directions (the portal's intake
   button family: white, 2px border, 14px radius; selected = mango) */
.opts{display:grid;gap:10px}
.opt{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:#fff;border:2px solid var(--tan2);border-radius:14px;padding:15px 16px;font:500 16px/1.35 'Roboto',sans-serif;color:var(--ink);cursor:pointer;transition:border-color .12s,background .12s}
.opt:hover{border-color:var(--ink)}
.opt .ic{flex:0 0 24px;width:24px;height:24px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;color:var(--rust)}
.opt .go{margin-left:auto;flex:0 0 18px;width:18px;height:18px;stroke:var(--soft);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.opt.sel{background:var(--mango);border-color:var(--ink)}
.chipgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.chip{background:#fff;border:2px solid var(--tan2);border-radius:14px;padding:14px 12px;font:500 16px 'Roboto',sans-serif;color:var(--ink);cursor:pointer;text-align:center}
.chip:hover{border-color:var(--ink)}
.qhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.qcount{font:500 13px 'Roboto',sans-serif;color:var(--soft)}
.qback{background:none;border:0;padding:6px 0;font:500 14px 'Roboto',sans-serif;color:var(--soft);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.qback svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.qtitle{font-size:22px;line-height:1.25;margin-bottom:6px}
.qhint{font-size:14px;color:var(--soft);margin-bottom:16px}
.dots{display:flex;gap:6px}
.dots i{width:22px;height:6px;border-radius:999px;background:var(--tan2)}
.dots i.on{background:var(--ink)}
.q{display:none}.q.on{display:block}

/* mock chrome */
.mockbar{position:sticky;top:0;z-index:90;display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;padding:8px 14px;background:#2b2b2b;color:#f3eee0;font:500 13px 'Roboto',sans-serif}
.mockbar b{color:var(--mango)}
.mockbar a{color:#f3eee0}
.embed .mockbar{display:none}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

h1 .hl::before{inset:.04em -.18em -.04em}
:root{--lift:0 1px 2px rgba(43,36,26,.06),0 8px 22px rgba(43,36,26,.10);--lift-key:0 2px 0 rgba(17,17,17,.10),0 10px 26px rgba(43,36,26,.12);--press:0 1px 1px rgba(17,17,17,.10)}
.scr{display:none}.scr.on{display:block}
.nav{display:flex;align-items:center;justify-content:space-between;max-width:1240px;margin:0 auto;padding:16px 24px}
.brand img{width:30px;height:30px}
.nav .btn{padding:9px 18px;font-size:14px;box-shadow:0 3px 0 var(--ink)}
.eyebrow{font-family:'Caveat',cursive;font-weight:700;font-size:26px;line-height:1.1;color:var(--rust);margin:0 0 4px}
/* the live funnel's primary button (main.css .btn-pill), shared with the app's Save */
.pbtn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:52px;padding:15px 30px;background:var(--mango);color:var(--ink);border:1.5px solid rgba(17,17,17,.14);border-radius:999px;font:400 16px 'Capriola',sans-serif;cursor:pointer;box-shadow:var(--lift-key);transition:transform .12s,box-shadow .12s;text-decoration:none}
.pbtn:hover{transform:translateY(-2px);box-shadow:0 4px 0 rgba(17,17,17,.10),0 14px 30px rgba(43,36,26,.16)}
.pbtn:active{transform:translateY(1px);box-shadow:var(--press)}
.pbtn.wide{width:100%}
.pbtn svg{width:20px;height:20px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.back{display:inline-flex;align-items:center;gap:4px;background:none;border:0;font:500 14px 'Roboto',sans-serif;color:var(--soft);text-decoration:none;cursor:pointer}
.back svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
/* the soft card (Z1) */
.card{position:relative;z-index:2;background:#fff;border-radius:24px;border:1px solid var(--tan);box-shadow:0 2px 0 var(--tan2),0 8px 32px rgba(43,36,26,.08);overflow:hidden}
.track{height:6px;background:var(--sand)}.track i{display:block;height:100%;background:var(--mango);border-radius:0 3px 3px 0;transition:width .45s cubic-bezier(.6,.1,.2,1)}
.cbody{padding:22px 28px 28px}
.pill{display:inline-block;padding:6px 13px;border-radius:999px;background:var(--mango);color:var(--ink);border:1.5px solid rgba(17,17,17,.14);font:500 13px 'Roboto',sans-serif}
.chead{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.qt{font-family:'Capriola',sans-serif;font-size:clamp(22px,2.2vw,28px);line-height:1.2;color:var(--ink);margin-bottom:18px}
.qhint{font-size:14px;color:var(--soft);margin:-10px 0 14px}
.perch{position:absolute;right:30px;top:-38px;width:128px;z-index:3;pointer-events:none}
.withperch{position:relative;padding-top:56px}
/* answers: soft, the app's lift on hover, amberlite when picked */
.ao{display:block;width:100%;cursor:pointer;color:var(--ink);background:var(--cream);border:1.5px solid var(--tan2);border-radius:14px;padding:15px 18px;font:400 15px/1.35 'Capriola',sans-serif;text-align:center;transition:transform .12s ease,box-shadow .12s ease,border-color .12s,background .12s}
.ao:hover{transform:translateY(-1px);border-color:var(--mango);background:#fff;box-shadow:var(--lift-key)}
.ao:active{transform:translateY(1px);box-shadow:var(--press)}
.ao.picked{background:var(--amberlite);border-color:var(--mango);transform:none;box-shadow:none}
.aos{display:flex;flex-direction:column;gap:10px}
.aos.two{display:grid;grid-template-columns:1fr 1fr}
.aos .full{grid-column:1/-1}
.ao.other{display:flex;align-items:center;justify-content:center;gap:8px;background:#fff;border-style:dashed}
.ao.other svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.otherbox{display:none;grid-column:1/-1}.otherbox.on{display:block}
.otherbox select{width:100%;appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a6353' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center/18px;border:1.5px solid var(--mango);border-radius:14px;padding:14px 44px 14px 16px;font:400 15px 'Capriola',sans-serif;color:var(--ink)}
.notsure{display:block;margin:14px auto 0;background:none;border:0;font:500 14px 'Roboto',sans-serif;color:var(--rust);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.qs{display:none}.qs.on{display:block}
@media (prefers-reduced-motion:reduce){.ao,.ao:hover,.ao:active,.pbtn,.pbtn:hover{transform:none;transition:none}}
/* ---------- landing ---------- */
.hwrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:64px;align-items:center;max-width:1240px;margin:0 auto;padding:40px 24px 70px}
.left h1{font-size:clamp(40px,3.8vw,54px);line-height:1.1}.left h1 .l{display:block;white-space:nowrap}
.rule{border:0;border-top:1.5px dotted var(--line);margin:24px 0 20px;max-width:520px}
.hsteps{display:flex;flex-direction:column;gap:12px;font:500 16px/1.35 'Roboto',sans-serif;color:var(--ink)}
.hsteps span{display:flex;align-items:center;gap:12px}
.hsteps .b{width:28px;height:28px;border-radius:50%;background:var(--mango);border:2px solid var(--ink);display:grid;place-items:center;font:400 13px 'Capriola',sans-serif;flex-shrink:0;box-shadow:0 2px 0 var(--ink)}
.guide{color:var(--soft);max-width:500px;font-size:15px;margin-top:22px}.guide a{color:var(--rust)}
.hcard{max-width:560px;margin-left:auto}
.below{display:none}
/* how it works: a strip of the four stages + a drawing of the portal's home screen [new] */
.how{background:var(--cream2);border-top:1.5px dotted var(--line);border-bottom:1.5px dotted var(--line)}
.howin{max-width:1100px;margin:0 auto;padding:56px 24px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:56px;align-items:center}
.how h2{font-size:clamp(28px,3vw,40px);margin-bottom:6px}
.how .lead{color:var(--soft);font-size:16px;margin-bottom:22px;max-width:44ch}
.stages{list-style:none;margin:0;padding:0;position:relative}
.stages::before{content:"";position:absolute;left:13px;top:14px;bottom:14px;border-left:2px dotted var(--line)}
.stages li{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr);gap:16px;padding:10px 0}
.stages .dot{width:28px;height:28px;border-radius:50%;background:#fff;border:2px solid var(--ink);display:grid;place-items:center;font:400 12px 'Capriola',sans-serif;position:relative;z-index:1}
.stages li:first-child .dot{background:var(--mango)}
.stages h3{font-size:18px;margin:2px 0 3px}.stages p{font-size:15px;color:var(--soft);line-height:1.5}
.stay{margin-top:14px;padding-left:44px;font:400 16px 'Capriola',sans-serif;color:var(--ink)}
.stay .hl::before{inset:.02em -.14em -.02em}
.phone{justify-self:center;width:250px;background:var(--cream);border:2px solid var(--ink);border-radius:32px;box-shadow:var(--lift);padding:18px 16px 20px;transform:rotate(2deg)}
.phone .pb{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.phone .pb b{font:700 15px 'Capriola',sans-serif}.phone .pb i{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--ink)}
.phone .nm{font:700 19px 'Caveat',cursive;color:var(--rust);line-height:1}
.phone .tt{font:400 17px 'Capriola',sans-serif;color:var(--ink);margin-bottom:10px;padding-bottom:10px;border-bottom:1.5px dotted var(--line)}
.phone .row{display:grid;grid-template-columns:16px 1fr;gap:9px;padding:7px 0;border-bottom:1.5px dotted var(--tan2)}
.phone .row:last-child{border-bottom:0}
.phone .pip{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--ink);margin-top:2px}
.phone .row.on .pip{background:var(--mango)}
.phone .row b{display:block;font:400 12.5px 'Capriola',sans-serif;color:var(--ink)}
.phone .row span{display:block;font-size:10.5px;color:var(--soft);line-height:1.35}
.phone .row.off b,.phone .row.off span{opacity:.45}
.phone .w1{display:flex;gap:2px;margin-top:5px}.phone .w1 i{flex:1;height:4px;border-radius:2px;background:var(--tan2)}.phone .w1 i.on{background:var(--amberlite)}
.phone .go{margin-top:6px;display:inline-block;background:var(--mango);border-radius:999px;padding:5px 10px;font:400 11px 'Capriola',sans-serif}
/* key information, as a compact accordion [new form, live copy] */
.keyinfo{max-width:820px;margin:0 auto;padding:56px 24px 30px}
.keyinfo h2{font-size:clamp(26px,2.6vw,34px);margin-bottom:16px}
.acc{background:#fff;border:1px solid var(--tan);border-radius:16px;box-shadow:0 2px 0 var(--tan2);overflow:hidden}
.acc details{border-top:1.5px solid var(--tan2)}.acc details:first-child{border-top:0}
.acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;font:400 17px 'Capriola',sans-serif;color:var(--ink)}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{background:var(--cream2)}
.acc .chev{flex:0 0 18px;width:18px;height:18px;stroke:var(--rust);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.acc details[open] .chev{transform:rotate(180deg)}
.acc .ab{padding:0 20px 18px;font-size:15px;line-height:1.65;color:var(--text)}
.cta{max-width:820px;margin:26px auto 60px;padding:0 24px}
.ctain{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;background:#fff;border:1px solid var(--tan);border-radius:20px;box-shadow:0 2px 0 var(--tan2);padding:20px 24px}
.ctain p{font:400 19px 'Capriola',sans-serif;color:var(--ink)}
.foot{background:var(--cream2);border-top:1.5px solid var(--tan2);padding:28px 24px;text-align:center;font-size:13px;color:var(--soft)}
.foot a{color:var(--soft);margin:0 8px}
/* ---------- form screens ---------- */
.fwrap{max-width:560px;margin:0 auto;padding:18px 20px 70px}
.fwrap .back{margin-bottom:14px}
.fwrap h1{font-size:clamp(30px,3vw,40px);line-height:1.12;margin-bottom:8px}
.fwrap .lede{font-size:16px;color:var(--text);margin-bottom:6px;max-width:44ch}
.fld{display:block;margin-bottom:16px}
.lab{display:block;font:500 14px 'Roboto',sans-serif;color:var(--ink);margin-bottom:6px}.lab em{font-style:normal;color:var(--soft);font-weight:400}
.inp,.dob input{width:100%;font:400 16px 'Roboto',sans-serif;color:var(--ink);background:#fff;border:1.5px solid var(--tan2);border-radius:14px;padding:13px 14px;outline:none;transition:border-color .12s,box-shadow .12s}
.inp:focus,.dob input:focus{border-color:var(--mango);box-shadow:0 0 0 3px rgba(251,196,92,.3)}
.inp::placeholder,.dob input::placeholder{color:#a79f8a}
.hint{display:block;font-size:13px;color:var(--soft);margin-top:6px;line-height:1.45}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dob{display:grid;grid-template-columns:1fr 1fr 1.6fr;gap:10px}
.withicon{position:relative;display:block}.withicon svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:20px;height:20px;stroke:var(--soft);stroke-width:2;fill:none;stroke-linecap:round}.withicon .inp{padding-left:44px}
.fine{font-size:13px;color:var(--soft);margin-top:14px;line-height:1.5}.fine a{color:var(--rust)}
.review{margin:0 0 16px;background:var(--cream2);border:1.5px solid var(--tan2);border-radius:16px;padding:4px 16px}
.review div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-top:1.5px solid var(--tan2)}.review div:first-child{border-top:0}
.review dt{font-size:14px;color:var(--soft)}.review dd{margin:0;font:400 14px 'Capriola',sans-serif;color:var(--ink);text-align:right}
.edit{display:inline-block;font:500 14px 'Roboto',sans-serif;color:var(--rust);margin:-6px 0 16px}
.appoint{border:1.5px solid var(--tan2);border-radius:16px;padding:16px;margin-bottom:18px}
.appoint h3{font-size:16px;margin-bottom:6px}.appoint p{font-size:14px;line-height:1.55}
.free{display:flex;gap:10px;align-items:flex-start;margin-top:12px;background:color-mix(in srgb,var(--green-l) 60%,#fff);border-radius:12px;padding:10px 12px;color:var(--ink);font-size:14px}
.free svg{flex:0 0 20px;width:20px;height:20px;stroke:var(--green-d);stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.sighead{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.seg{display:inline-flex;border:1.5px solid var(--tan2);border-radius:999px;padding:3px;background:#fff}
.seg button{border:0;background:none;font:500 14px 'Roboto',sans-serif;padding:6px 14px;border-radius:999px;color:var(--soft);cursor:pointer}.seg button.on{background:var(--mango);color:var(--ink)}
.pad{position:relative;height:150px;border:2px dashed var(--tan2);border-radius:16px;background:#fffdf9;margin-bottom:14px}
.pad svg{position:absolute;left:12%;top:26px;width:70%;stroke:var(--ink);stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.pad .ln{position:absolute;left:22px;right:22px;bottom:40px;border-bottom:1.5px solid var(--tan2)}
.pad .ph{position:absolute;left:0;right:0;bottom:12px;text-align:center;font-size:13px;color:var(--soft)}
.donecard{text-align:center}
.tickb{width:64px;height:64px;border-radius:50%;background:var(--green);display:grid;place-items:center;margin:4px auto 14px;box-shadow:var(--lift)}
.tickb svg{width:32px;height:32px;stroke:#fff;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.donecard h2{font-size:30px;margin-bottom:8px}.donecard p{font-size:16px}
.donekiwi{width:200px;margin:18px auto 0}
/* ---------- guide pages (diy + turnaway) ---------- */
.gwrap{max-width:760px;margin:0 auto;padding:18px 20px 40px}
.gwrap h1{font-size:clamp(30px,3.4vw,44px);line-height:1.12;margin-bottom:10px}
.gwrap .lede{font-size:17px;color:var(--text);max-width:52ch}
.gsec{display:grid;grid-template-columns:40px minmax(0,1fr);gap:16px;padding:24px 0;border-top:1.5px dotted var(--line)}
.gsec:first-of-type{margin-top:22px}
.gsec .n{width:36px;height:36px;border-radius:50%;background:var(--mango);border:2px solid var(--ink);display:grid;place-items:center;font:400 14px 'Capriola',sans-serif;box-shadow:0 2px 0 var(--ink)}
.gsec .n.ic{background:#fff}.gsec .n svg{width:18px;height:18px;stroke:var(--ink);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.gsec h2{font-size:22px;margin:4px 0 10px}.gsec p{font-size:16px;line-height:1.65;margin-bottom:10px}
.bl{list-style:none;margin:0;padding:0}.bl li{position:relative;padding:5px 0 5px 22px;line-height:1.6}
.bl li::before{content:"";position:absolute;left:2px;top:14px;width:8px;height:8px;border-radius:50%;background:var(--mango);border:1.5px solid var(--ink)}
.dg{margin-top:14px}.dg h4{font:500 13px 'Roboto',sans-serif;color:var(--soft);margin-bottom:6px}
.drow{background:var(--cream);border:1.5px solid var(--tan2);border-radius:14px;margin-bottom:8px;transition:border-color .12s,box-shadow .12s}
.drow:hover{border-color:var(--mango)}
.drow[open]{background:#fff;border-color:var(--mango);box-shadow:var(--lift)}
.drow summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 16px;font:400 15px 'Capriola',sans-serif;color:var(--ink)}
.drow summary::-webkit-details-marker{display:none}
.drow .chev{flex:0 0 18px;width:18px;height:18px;stroke:var(--rust);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.drow[open] .chev{transform:rotate(180deg)}
.drow .db{padding:0 16px 14px;font-size:14px;line-height:1.6}
.gsteps{list-style:none;margin:0;padding:0;counter-reset:g}
.gsteps li{position:relative;padding:6px 0 6px 30px;line-height:1.6}
.gsteps li::before{counter-increment:g;content:counter(g);position:absolute;left:0;top:7px;width:21px;height:21px;border-radius:50%;background:var(--cream2);border:1.5px solid var(--ink);display:grid;place-items:center;font:400 11px 'Capriola',sans-serif}
.band{margin:30px 0 8px;position:relative}
.bandin{position:relative;background:color-mix(in srgb,var(--mango) 22%,#fff);border:1px solid var(--tan);border-radius:24px;box-shadow:0 2px 0 var(--tan2),0 8px 32px rgba(43,36,26,.08);padding:28px 28px 26px;overflow:hidden}
.bandin h2{font-size:clamp(24px,2.6vw,30px);margin-bottom:16px;max-width:14ch}
.b3{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:14px;max-width:470px}
.b3 li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px}
.b3 .n{width:28px;height:28px;border-radius:50%;background:var(--mango);border:2px solid var(--ink);display:grid;place-items:center;font:400 12px 'Capriola',sans-serif}
.b3 h3{font-size:16px;margin:3px 0 2px}.b3 p{font-size:14px;color:var(--text);line-height:1.5}
.who{font-size:13px;color:var(--soft);margin-top:12px}
.bandkiwi{position:absolute;right:18px;bottom:0;width:170px}
.helpl{padding:26px 0 0}.helpl h3{font-size:19px;margin-bottom:8px}
.helpl ul{list-style:none;margin:0;padding:0}.helpl li{border-top:1.5px solid var(--tan2)}.helpl li:first-child{border-top:0}
.helpl a{display:flex;justify-content:space-between;gap:16px;padding:12px 2px;text-decoration:none}.helpl b{font:400 15px 'Capriola',sans-serif;color:var(--ink)}.helpl span{font-size:13px;color:var(--soft);text-align:right}
@media(max-width:900px){
  .nav{padding:12px 18px}.nav .brand-word{font-size:22px}.nav .btn{padding:7px 14px;font-size:13px}
  .hwrap{grid-template-columns:1fr;gap:0;padding:8px 18px 28px}
  .eyebrow{font-size:21px;margin-bottom:2px}
  .left h1{font-size:27px;line-height:1.14}.left h1 .l{white-space:normal}
  .rule{margin:12px 0 12px}
  .hsteps{gap:7px;font-size:14px}.hsteps .b{width:21px;height:21px;font-size:11px;border-width:1.5px;box-shadow:0 1.5px 0 var(--ink)}
  .left .guide{display:none}
  .below{display:block;padding:4px 20px 18px}.below .guide{margin-top:0}
  .withperch{padding-top:44px}.perch{width:96px;right:16px;top:-26px}
  .hcard{max-width:none}
  .cbody{padding:18px 18px 20px}.ao{padding:14px}
  .qt{font-size:22px;margin-bottom:14px}
  .howin{grid-template-columns:1fr;gap:30px;padding:40px 20px}
  .phone{transform:rotate(1.5deg);width:230px}
  .keyinfo{padding:40px 18px 20px}.cta{padding:0 18px}
  .row2{grid-template-columns:1fr}
  .fwrap{padding:10px 16px 50px}.fwrap h1{font-size:28px}
  .gwrap{padding:10px 16px 30px}.gwrap h1{font-size:28px}
  .gsec{grid-template-columns:30px minmax(0,1fr);gap:12px}.gsec .n{width:28px;height:28px;font-size:12px}.gsec h2{font-size:19px;margin-top:2px}
  .bandin{padding:22px 18px 20px}.bandkiwi{width:92px;right:10px;top:10px;bottom:auto}.bandin h2{max-width:9ch}
}

.guide{position:relative;z-index:1;max-width:1140px;margin:0 auto;padding:64px clamp(20px,4.5vw,56px) 8px}
.guide-title{font-size:clamp(27px,3.1vw,36px);margin:0 0 30px;line-height:1.18;max-width:840px}
.guide-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:clamp(28px,3.4vw,52px);align-items:start}
.guide-index{position:sticky;top:24px}
.idx-toggle{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;background:none;border:none;padding:0;margin:0 0 18px;cursor:default;text-align:left;font:400 12px 'Capriola',sans-serif;letter-spacing:.07em;text-transform:uppercase;color:var(--rust)}
.summary-chev{display:none;width:17px;height:17px;flex:none}
.idx-list{list-style:none;margin:0;padding:0}.idx-list li{margin-bottom:12px}.idx-list li:last-child{margin-bottom:0}
.idx-list a{display:inline-block;text-decoration:none;font:400 14px 'Capriola',sans-serif;color:var(--ink);border-bottom:1.5px solid var(--tan2);padding-bottom:2px;transition:color .14s,border-color .14s}
.idx-list a:hover{color:var(--rust);border-color:var(--rust)}
.idx-kiwi{margin:28px auto 0;width:172px;display:block;filter:drop-shadow(0 8px 14px rgba(43,36,26,.14))}
.guide-content{min-width:0;max-width:720px;border-left:1.5px dotted var(--line);padding-left:clamp(28px,3.4vw,52px)}
.guide-section{padding-top:24px;margin-top:24px;border-top:1.5px dotted var(--line);scroll-margin-top:22px}
.guide-section:first-child{padding-top:0;margin-top:0;border-top:none}
.guide-section h3{font:400 22px 'Capriola',sans-serif;color:var(--ink);margin:0 0 13px;line-height:1.3}
.guide-section p{font-size:16px;line-height:1.78;color:var(--text);margin:0 0 14px}.guide-section p:last-child{margin-bottom:0}
.guide-section a.inline{color:var(--rust);text-decoration:underline;text-underline-offset:3px}
.guide-list{margin:0 0 14px;padding:0;list-style:none}
.guide-list li{position:relative;padding:6px 0 6px 26px;font-size:16px;line-height:1.6;color:var(--text)}
.guide-list li::before{content:'';position:absolute;left:2px;top:14px;width:7px;height:7px;border-radius:50%;background:var(--mango);border:1.5px solid var(--ink)}
.help-links{margin:2px 0 0;padding:0;list-style:none}.help-links li{border-top:1.5px solid var(--tan2)}.help-links li:first-child{border-top:none}
.help-links a{display:flex;justify-content:space-between;align-items:baseline;gap:18px;text-decoration:none;padding:13px 2px;color:var(--ink)}
.help-links a:hover .hl-name{color:var(--rust);text-decoration:underline;text-underline-offset:3px}
.help-links .hl-name{font:400 15.5px 'Capriola',sans-serif;white-space:nowrap}.help-links .hl-desc{font-size:13.5px;color:var(--soft);text-align:right}
@media(max-width:820px){
  .guide{padding-top:48px}.guide-layout{grid-template-columns:1fr;gap:20px}.guide-index{position:static}
  .idx-toggle{display:inline-flex;width:auto;gap:8px;cursor:pointer;text-transform:none;letter-spacing:0;font:400 15px 'Capriola',sans-serif;color:var(--soft);padding:2px 2px 5px;border-bottom:1.5px dotted var(--line);margin-bottom:0}
  .summary-chev{display:block;color:var(--rust);transition:transform .2s}
  .idx-list{display:none}.guide-index.open .idx-list{display:block}.guide-index.open .idx-toggle{margin-bottom:16px}.guide-index.open .summary-chev{transform:rotate(180deg)}
  .idx-kiwi{display:none}.guide-content{max-width:100%;border-left:none;padding-left:0}
}

.sell{max-width:1140px;margin:0 auto;padding:10px clamp(20px,4.5vw,56px) 10px}
.sellin{border-top:1.5px dotted var(--line);border-bottom:1.5px dotted var(--line);padding:44px 0}
.sell h2{font-size:clamp(26px,2.8vw,36px);margin-bottom:22px}

.faq{display:grid;grid-template-columns:1fr 1fr;gap:18px 40px}
.faq div{padding:4px 0 4px 18px;border-left:3px solid var(--mango)}
.faq h3{font-size:19px;margin-bottom:6px}.faq p{font-size:15.5px;line-height:1.65;color:var(--text)}
/* B: who we help */
.who2{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center}
.who2 p.big{font:400 clamp(22px,2.3vw,30px)/1.3 'Capriola',sans-serif;color:var(--ink)}
.prov{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 18px}
.prov span{background:#fff;border:1px solid var(--tan);box-shadow:0 2px 0 var(--tan2);border-radius:999px;padding:9px 16px;font:400 15px 'Capriola',sans-serif;color:var(--ink)}
.who2 .else{font-size:15.5px;color:var(--soft);max-width:48ch}
.who2 .side{background:#fff;border:1px solid var(--tan);border-radius:22px;box-shadow:0 2px 0 var(--tan2),0 8px 32px rgba(43,36,26,.08);padding:22px 24px;position:relative}
.who2 .side h3{font-size:18px;margin-bottom:10px}
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.ticks li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.5}
.ticks li svg{flex:0 0 20px;width:20px;height:20px;stroke:var(--green-d);stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round;margin-top:1px}
/* C: what you'll leave with */
.objs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.obj{background:#fff;border:1px solid var(--tan);border-radius:20px;box-shadow:0 2px 0 var(--tan2);padding:20px 20px 22px;display:flex;gap:16px;align-items:flex-start}
.obj svg{flex:0 0 46px;width:46px;height:58px}
.obj h3{font-size:18px;margin-bottom:4px}.obj p{font-size:14.5px;color:var(--soft);line-height:1.55}
.plus{margin-top:22px;display:flex;align-items:center;gap:14px;font:400 17px 'Capriola',sans-serif;color:var(--ink)}
.plus img{width:54px}
/* D: just the guide */
.trustrow{max-width:1140px;margin:0 auto;padding:0 clamp(20px,4.5vw,56px)}
.trustrow .chips{justify-content:center;border-top:1.5px dotted var(--line);border-bottom:1.5px dotted var(--line);padding:18px 0;gap:14px 34px}
.cta2{max-width:1140px;margin:30px auto 60px;padding:0 clamp(20px,4.5vw,56px)}
.cta2 .in{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;background:#fff;border:1px solid var(--tan);border-radius:20px;box-shadow:0 2px 0 var(--tan2);padding:20px 24px}
.cta2 p{font:400 19px 'Capriola',sans-serif;color:var(--ink)}
@media(max-width:820px){
  .sellin{padding:32px 0}.faq{grid-template-columns:1fr;gap:18px}
  .who2{grid-template-columns:1fr;gap:22px}.objs{grid-template-columns:1fr;gap:12px}
  .trustrow .chips{flex-direction:column;align-items:flex-start;gap:10px}
}

.col{max-width:560px;margin:0 auto;padding:10px 18px 40px}
.col .back{margin-bottom:12px}
.ttl{font-size:clamp(30px,3.2vw,42px);line-height:1.1}
.sub{font-size:16px;color:var(--text);margin-top:10px}
.col>.withperch{margin-top:10px}
.what{margin-top:34px;padding-top:26px;border-top:1.5px dotted var(--line)}
.what h2{font-size:24px;margin-bottom:4px}
.what .lead{font-size:15px;color:var(--soft);margin-bottom:14px}
.stages h3{font-size:17px}
.payoff{margin-top:14px;padding-left:44px;font:400 16px/1.45 'Capriola',sans-serif;color:var(--ink)}
.payoff .hl::before{inset:.02em -.14em -.02em}
.dealline{margin-top:22px;font-size:13.5px;line-height:1.6;color:var(--soft);background:#fff;border:1px solid var(--tan);border-radius:14px;padding:12px 14px}
.mockbar select{font:inherit;padding:3px 6px;border-radius:6px;border:1px solid #666;background:#3a3a3a;color:#f3eee0;max-width:340px}
@media(max-width:900px){.col{padding:8px 16px 36px}.ttl{font-size:28px}.col>.withperch{margin-top:26px}}

.upfront{font-size:16px;line-height:1.55;color:var(--text);margin-top:10px;max-width:40ch}
.stages li:first-child .dot:not(.now){background:#fff}
.stages .dot.now{background:var(--mango)}
.stages p .now-note{color:var(--rust);font-weight:500}
.what h2.then{margin-top:26px}
.what h2 + .stages{margin-top:10px}
.faq{margin-top:30px}
.faq h2{font-size:22px;margin-bottom:12px}
.acc summary{font-size:16px;padding:15px 18px}
.acc .ab{padding:0 18px 16px}
/* details page: IRD help */
.lab .lock{width:15px;height:15px;stroke:var(--soft);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;vertical-align:-2px;margin-left:6px}
.irdhelp{margin:-4px 0 18px;background:var(--cream2);border:1px solid var(--tan);border-radius:14px}
.irdhelp summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;font:400 15px 'Capriola',sans-serif;color:var(--ink)}
.irdhelp summary::-webkit-details-marker{display:none}
.irdhelp .chev{flex:0 0 16px;width:16px;height:16px;stroke:var(--rust);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.irdhelp[open] .chev{transform:rotate(180deg)}
.irdhelp .ib{padding:0 14px 14px;font-size:14.5px;line-height:1.55;color:var(--text)}
.ghostbtn{display:inline-flex;align-items:center;gap:8px;margin:10px 0 6px;padding:10px 16px;background:#fff;color:var(--ink);border:1.5px solid var(--tan2);border-radius:999px;font:400 14px 'Capriola',sans-serif;text-decoration:none;box-shadow:0 2px 0 var(--tan2)}
.ghostbtn:hover{border-color:var(--mango)}
.ghostbtn svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ib .sm{font-size:13px;color:var(--soft)}
.ib .later{margin-top:12px;padding-top:12px;border-top:1.5px dotted var(--line)}
.ib .later a,.trustlink{color:var(--rust)}
.flag{display:inline-block;margin-left:4px;padding:1px 7px;border-radius:999px;background:#f3d9c9;color:#8a3f1d;font:500 11px 'Roboto',sans-serif;vertical-align:1px}
.trustlink{display:block;text-align:center;font-size:13.5px;margin-top:14px}

.line{font-size:16.5px;line-height:1.5;color:var(--text);margin-top:10px;max-width:34ch}
.hero{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:18px;align-items:start}
.hero .tool{align-self:end;margin-bottom:-84px}
.tool{position:relative;z-index:1;width:150px;padding:5px;background:#fff;border:2px solid var(--ink);border-radius:24px;box-shadow:var(--lift);transform:translateX(-10px) rotate(2.5deg);transform-origin:50% 100%}
.tshot{position:relative;border-radius:19px;overflow:hidden;background:var(--cream)}
.tshot img{display:block;width:100%}
.tshot .cover{position:absolute;left:2%;top:.6%;width:26%;height:5.6%;background:#fffdf6;display:flex;align-items:center;font:700 8.4px 'Capriola',sans-serif;color:var(--ink);letter-spacing:-.01em}
.formwrap{position:relative;z-index:2;margin-top:18px}
.whopays{font-size:13px;color:var(--soft);text-align:center;margin-top:10px}
@media(max-width:900px){.hero{grid-template-columns:minmax(0,1fr) 112px;gap:10px}.tool{width:112px;border-radius:19px;padding:4px}.tshot{border-radius:16px}.tshot .cover{font-size:6.5px}.hero .tool{margin-bottom:-70px}.hero .ttl{font-size:27px}.line{font-size:15.5px}}

.tbul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:7px}
.tbul li{position:relative;padding-left:22px;font:400 16px/1.4 'Roboto',sans-serif;color:var(--ink)}
.tbul li::before{content:"";position:absolute;left:3px;top:.42em;width:9px;height:9px;border-radius:50%;background:var(--mango);box-shadow:0 0 0 1.5px rgba(17,17,17,.18)}

.col .ttl{margin-bottom:0}
.col p.line.tight{margin-top:10px;max-width:330px}
.col>.withperch.tight{margin-top:18px;padding-top:0}
.withperch.tight .perch{top:-96px;right:26px;width:128px}
@media(max-width:900px){
  .col p.line.tight{max-width:calc(100% - 112px);font-size:16px}
  .col>.withperch.tight{margin-top:16px;padding-top:0}
  .withperch.tight .perch{top:-72px;right:14px;width:98px}
}

.steps2{display:grid;grid-template-columns:1fr 1fr;gap:5px;height:6px;background:#fff}
.steps2 i{display:block;background:var(--sand)}.steps2 i.on{background:var(--mango)}
.keylink{color:var(--soft);max-width:500px;font-size:15px;margin-top:22px}.keylink a{color:var(--rust)}
.left .keylink{display:block}.below .keylink{display:none}
@media(max-width:900px){.left .keylink{display:none}.below .keylink{display:block;margin-top:0}}
.steps2 i:first-child{border-radius:0 3px 3px 0}.steps2 i:last-child{border-radius:3px 0 0 3px}

/* the tile keeps one width, and the hero stops re-centring as the tile changes height */
.hwrap{align-items:start}
.hcard{width:100%;max-width:520px;margin-left:auto;justify-self:end}
.left{padding-top:34px}
@media(max-width:900px){.hcard{max-width:none;justify-self:stretch}.left{padding-top:0}}

/* after the first answer: the tile alone, front and centre */
[data-s=landing].focus .left,[data-s=landing].focus .below,[data-s=landing].focus .guide,[data-s=landing].focus .cta,[data-s=landing].focus .foot{display:none}
[data-s=landing].focus .hwrap{grid-template-columns:minmax(0,520px);justify-content:center;padding-top:28px;min-height:calc(100vh - 90px)}
[data-s=landing].focus .hcard{margin:0 auto;justify-self:center;animation:rise .32s cubic-bezier(.2,.7,.2,1)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){[data-s=landing].focus .hcard{animation:none}}

/* tile: no outlines */
.t-fill .card,.t-list .card{border-color:transparent;box-shadow:0 1px 3px rgba(43,36,26,.06),0 14px 40px rgba(43,36,26,.09)}
.t-fill .ao,.t-list .aos.two .ao{background:#f8f1df;border-color:transparent}
.t-fill .ao:hover,.t-list .aos.two .ao:hover{background:#fff;border-color:var(--mango)}
.t-fill .ao.picked,.t-list .ao.picked{background:var(--amberlite);border-color:var(--amberlite)}
.t-fill .ao.other,.t-list .ao.other{background:transparent;border:1.5px dashed var(--tan2)}

/* tile: warm tile, white answers */
.t-cream .card{background:#f7efdb;border-color:transparent;box-shadow:0 1px 3px rgba(43,36,26,.05),0 12px 34px rgba(43,36,26,.08)}
.t-cream .track,.t-cream .steps2{background:#ecdfbf}
.t-cream .ao{background:#fff;border-color:transparent;box-shadow:0 1px 0 rgba(43,36,26,.06),0 2px 8px rgba(43,36,26,.05)}
.t-cream .ao:hover{border-color:var(--mango)}
.t-cream .ao.picked{background:var(--amberlite);border-color:var(--amberlite)}
.t-cream .ao.other{background:transparent;border:1.5px dashed #d9c9a0;box-shadow:none}
.t-cream .inp,.t-cream .dob input{border-color:transparent}

/* tile: list rows (the two-column provider chips keep the no-outline style) */
.t-list .aos:not(.two){gap:0;background:#fff;border:1px solid var(--tan);border-radius:16px;overflow:hidden}
.t-list .aos:not(.two) .ao{display:flex;justify-content:space-between;align-items:center;gap:12px;text-align:left;border:0;border-top:1px solid var(--tan);border-radius:0;background:#fff;padding:15px 16px}
.t-list .aos:not(.two) .ao:first-child{border-top:0}
.t-list .aos:not(.two) .ao::after{content:"";flex:0 0 16px;height:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c47b35' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center/16px}
.t-list .aos:not(.two) .ao:hover{background:var(--cream2);transform:none;box-shadow:none}

/* background: a warm rounded panel behind the hero */
.b-panel [data-s=landing]:not(.focus) .hwrap{background:#f7efdb;border-radius:36px;max-width:1280px;margin:6px auto 0;padding:48px 56px 60px}
@media(max-width:900px){.b-panel [data-s=landing]:not(.focus) .hwrap{margin:4px 10px 0;border-radius:28px;padding:20px 14px 22px}}
/* background: a full-width warm band behind the hero */
.b-band [data-s=landing]:not(.focus) .hwrap{box-shadow:0 0 0 100vmax #f7efdb;clip-path:inset(0 -100vmax);background:#f7efdb}
.b-band [data-s=landing]:not(.focus) .hwrap{padding-bottom:64px}
.b-cream-note{display:none}
.p-butter{--bandbg:#fdf2da;--ansedge:#f1dca4;--tileedge:#f3e6c4;--ansbg:#fff;--otheredge:#f1dca4}
.p-cream{--bandbg:#fdf8ea;--ansedge:#e8e1d1;--tileedge:#efe6cf;--ansbg:#fff;--otheredge:#e8e1d1}
.p-sage{--bandbg:#eef3e1;--ansedge:#dce5ca;--tileedge:#e2e9d3;--ansbg:#fff;--otheredge:#d3dfbd}
.p-mango{--bandbg:#fdf2da;--ansedge:transparent;--tileedge:#f3e6c4;--ansbg:#fff6de;--otheredge:#efd9a0}

.t-edge .card{border:1px solid var(--tileedge);box-shadow:0 1px 3px rgba(43,36,26,.05),0 12px 36px rgba(43,36,26,.08)}
.t-edge .ao{background:var(--ansbg);border:1.5px solid var(--ansedge)}
.t-edge .ao:hover{background:#fff;border-color:var(--mango)}
.t-edge .ao.picked{background:var(--amberlite);border-color:var(--amberlite)}
.t-edge .ao.other{background:transparent;border:1.5px dashed var(--otheredge)}
.b-panel [data-s=landing]:not(.focus) .hwrap{background:var(--bandbg)}
.b-band [data-s=landing]:not(.focus) .hwrap{background:var(--bandbg);box-shadow:0 0 0 100vmax var(--bandbg)}
.p-cream.b-band [data-s=landing]:not(.focus) .hwrap{border-block:1px solid var(--tan)}

/* amberlite was never defined in the mock pages (main.css:98 has it), so 'picked' fell back to white + currentColor */
:root{--amberlite:#fcd58c}
/* wider panel: thin side margins, content still lines up with the nav */
.b-panel [data-s=landing]:not(.focus) .hwrap{max-width:none;margin:6px 16px 0;border:1px solid var(--tan);border-radius:32px;
  padding:48px max(40px,calc((100vw - 1240px)/2 + 7px)) 60px}
@media(max-width:900px){.b-panel [data-s=landing]:not(.focus) .hwrap{margin:4px 8px 0;border-radius:26px;padding:20px 14px 22px}}

/* tile edge: ink, like the Log in button and the step numbers */
body.e-ink .card{border:2px solid var(--ink);box-shadow:0 4px 0 var(--ink),0 14px 34px rgba(43,36,26,.10)}

/* answers: the app's own (live funnel .option-btn / portal .qc-opt) */
body.a-app .ao{background:#fff;border:2px solid var(--ink);border-radius:15px;text-align:left;box-shadow:var(--lift)}
body.a-app .aos.two .ao{text-align:center}
body.a-app .ao:hover{background:var(--cream2);border-color:var(--ink);box-shadow:var(--lift-key)}
body.a-app .ao.picked{background:var(--amberlite);border-color:var(--ink)}
body.a-app .ao.other{border:2px dashed var(--ink);box-shadow:none;background:#fff}

/* answers: soft edge (round 23) */
body.a-soft .ao{background:#fff;border:1.5px solid #e8e1d1}
body.a-soft .ao:hover{border-color:var(--mango)}
body.a-soft .ao.picked{background:var(--amberlite);border-color:var(--amberlite)}

/* answers: soft filled blocks, the ink edge only on the one you pick */
body.a-sand .ao{background:#faf5e8;border:1.5px solid transparent;text-align:left;padding-left:18px}
body.a-sand .aos.two .ao{text-align:center;padding-left:14px}
body.a-sand .ao:hover{background:#fff6de;border-color:transparent;box-shadow:none;transform:none}
body.a-sand .ao.picked{background:var(--amberlite);border-color:var(--ink)}
body.a-sand .ao.other{background:transparent;border:1.5px dashed var(--tan2)}

/* answers: rows with a round tick (the provider chips keep the soft edge) */
body.a-radio .ao{background:#fff;border:1.5px solid #e8e1d1}
body.a-radio .aos:not(.two) .ao{display:flex;align-items:center;gap:13px;text-align:left;padding:14px 16px}
body.a-radio .aos:not(.two) .ao::before{content:"";flex:0 0 22px;height:22px;border-radius:50%;border:2px solid var(--ink);background:#fff}
body.a-radio .ao:hover{border-color:var(--mango)}
body.a-radio .ao.picked{background:var(--amberlite);border-color:var(--amberlite)}
body.a-radio .aos:not(.two) .ao.picked::before{background:var(--mango) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") no-repeat center/15px}

/* the band: full width on phone and desktop, a 1px tan line top and bottom that runs the full width too */
.b-band [data-s=landing]:not(.focus) .hwrap{position:relative;border-block:0}
.b-band [data-s=landing]:not(.focus) .hwrap::before,.b-band [data-s=landing]:not(.focus) .hwrap::after{content:"";position:absolute;left:50%;width:100vw;margin-left:-50vw;border-top:1px solid var(--tan)}
.b-band [data-s=landing]:not(.focus) .hwrap::before{top:0}.b-band [data-s=landing]:not(.focus) .hwrap::after{bottom:0}
@media(max-width:900px){.b-band [data-s=landing]:not(.focus) .hwrap{padding-top:22px;padding-bottom:30px}}
/* the tile's ink edge */
body.e-now .card{border:2px solid var(--ink);box-shadow:0 4px 0 var(--ink),0 14px 34px rgba(43,36,26,.10)}
body.e-thin .card{border:1.5px solid var(--ink);box-shadow:0 3px 0 var(--ink),0 12px 30px rgba(43,36,26,.08)}
body.e-line .card{border:1.5px solid var(--ink);box-shadow:0 12px 30px rgba(43,36,26,.08)}
body.e-bottom .card{border:1px solid var(--tan2);box-shadow:0 3px 0 var(--ink),0 12px 30px rgba(43,36,26,.08)}

/* no lines on the band */
.b-band [data-s=landing]:not(.focus) .hwrap::before,.b-band [data-s=landing]:not(.focus) .hwrap::after{display:none}
body.b-band.p-cream [data-s=landing]:not(.focus) .hwrap,body.b-band [data-s=landing]:not(.focus) .hwrap{border-block:0}
/* white band */
.p-white{--bandbg:#fff;--ansedge:#e8e1d1;--tileedge:#efe6cf;--ansbg:#fff;--otheredge:#e8e1d1}
/* white page (reading on white), cream band */
body.pg-white{background:#fff}
/* the header inside the band (front page only, not once the tile goes front and centre) */
body.h-in.b-band.on-landing:not(.landing-focus) .nav{position:relative;max-width:none;padding-left:max(24px,calc((100vw - 1240px)/2 + 24px));padding-right:max(24px,calc((100vw - 1240px)/2 + 24px));background:var(--bandbg)}
body.h-in.b-band.on-landing:not(.landing-focus) [data-s=landing] .hwrap{padding-top:14px}
@media(max-width:900px){body.h-in.b-band.on-landing:not(.landing-focus) .nav{padding-left:16px;padding-right:16px}body.h-in.b-band.on-landing:not(.landing-focus) [data-s=landing] .hwrap{padding-top:8px}}
/* the tile's warm edge; the bottom 'Get help' tile follows it */
body.e-warm .card,body.e-warm .ctain{border:1px solid var(--tan);box-shadow:0 2px 0 var(--tan2),0 10px 32px rgba(43,36,26,.08)}
body.e-warm2 .card,body.e-warm2 .ctain{border:1.5px solid var(--line);box-shadow:0 3px 0 var(--line),0 12px 30px rgba(43,36,26,.08)}

/* phone: a touch tighter so four of five answers fit Safari's first screen */
@media(max-width:900px){
  .left h1{font-size:26px}
  .rule{margin:9px 0 9px}
  .hsteps{gap:5px}
  .cbody{padding:15px 18px 18px}
  .qt{margin-bottom:12px}
  .aos{gap:8px}
  .ao{padding:12px 14px}
  body.h-in.b-band.on-landing:not(.landing-focus) .nav{padding-left:18px;padding-right:18px}
}
/* the tile-only screens: the band carries on, Log in goes, a quiet licence line under the card */
.qtrust{display:none}
body.b-band.landing-focus{background:var(--bandbg)}
[data-s=landing].focus .hwrap{align-content:start;row-gap:0}
body.landing-focus .nav .btn{display:none}
body.landing-focus [data-s=landing].focus .qtrust{display:block;margin:18px auto 0;max-width:34ch;text-align:center;font-size:12.5px;line-height:1.5;color:var(--soft)}
/* the simple footer under the questions (Jacob, 4 Nov 2026): the licence line, then the links */
/* no minimum height on the question screens: js/tile.js sizes the page to the screen, so it doesn't scroll */
[data-s=landing].focus .hwrap{min-height:0;padding-bottom:8px}
body.landing-focus [data-s=landing].focus .qtrust:not(.qlinks){margin-top:10px}
body.landing-focus [data-s=landing].focus .qlinks{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 16px;margin-top:6px;max-width:none}
.qlinks a{color:var(--soft);text-decoration:underline;text-underline-offset:3px}

.qextra{display:none}
[data-s=landing].focus .qextra{justify-self:stretch}
/* title: the headline kept, small */
body.v-title [data-s=landing].focus .qhead{display:block;margin:0 0 -30px;max-width:calc(100% - 118px)}
.qhead .eyebrow{font-size:19px;margin:0 0 2px}
.qhead .qh{font:400 20px/1.25 'Capriola',sans-serif;color:var(--ink)}
.qhead .qh .hl::before{inset:.02em -.16em -.02em}
/* recap: the answers so far */
body.v-recap [data-s=landing].focus .qrecap{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0 0 -34px;max-width:calc(100% - 118px)}
.qrecap .rl{font:500 12.5px 'Roboto',sans-serif;color:var(--soft);width:100%}
.qrecap .rchips{display:flex;flex-wrap:wrap;gap:6px}
.qrecap .rc{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--tan2);border-radius:999px;padding:5px 11px 5px 8px;font:400 13px 'Capriola',sans-serif;color:var(--ink)}
.qrecap .rc svg{width:14px;height:14px;stroke:var(--green-d);stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
/* trust: the website's three tags under the card, instead of the licence line */
body.v-trust [data-s=landing].focus .qtrust{display:none}
body.v-trust [data-s=landing].focus .qtrow{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 18px;margin:18px auto 0;font:500 13px 'Roboto',sans-serif;color:var(--ink)}
.qtrow span{display:flex;align-items:center;gap:7px;white-space:nowrap}.qtrow img{width:22px;height:22px}
@media(min-width:901px){body.v-title [data-s=landing].focus .qhead,body.v-recap [data-s=landing].focus .qrecap{max-width:none;margin-bottom:-40px}.qhead .qh{font-size:24px}}

body.nokiwi [data-s=landing].focus .perch{display:none}
body.nokiwi [data-s=landing].focus .withperch{padding-top:0}
body.nokiwi [data-s=landing].focus .hwrap{padding-top:22px}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body .otherbox select{border:1.5px solid #e8e1d1;background-color:#fff;color:var(--ink);padding:12px 44px 12px 16px;font:400 15px/1.35 'Capriola',sans-serif;cursor:pointer;transition:border-color .12s}
body .otherbox select:hover{border-color:var(--mango)}
@media(min-width:901px){body .otherbox select{padding:15px 44px 15px 18px}}

.qback2{display:none}
/* above: Back sits above the card on the left, like the signup and details pages; the kiwi is on the right */
body.bk-above [data-s=landing].focus .qback2{display:inline-flex;justify-self:start;position:relative;z-index:4;margin:6px 0 -32px}
body.bk-above [data-s=landing].focus .cback{display:none}
/* left: inside the card, before the pill */
body.bk-left [data-s=landing] .chead{justify-content:flex-start;gap:12px}
body.bk-left [data-s=landing] .cback{order:-1}
body.bk-left [data-s=landing] .cback[style*="hidden"]{display:none}
@media(min-width:901px){body.bk-above [data-s=landing].focus .qback2{margin:8px 0 -44px}}

body.js-anim [data-s=landing].focus .hcard{animation:none}
@keyframes pagein{from{opacity:0}to{opacity:1}}
body.js-anim .scr.on:not([data-s=landing]){animation:pagein .3s ease-out}
@media (prefers-reduced-motion:reduce){body.js-anim .scr.on{animation:none}}

[data-s=turnaway] .after{font-size:14px;color:var(--soft);margin-top:10px}

.mockbar select{margin-right:8px}
/* round 34: guide pages simplified to read like the front page's key information */
.gsec{display:block;padding:24px 0 0;margin-top:24px;border-top:1.5px dotted var(--line)}
.gsec:first-of-type{margin-top:22px}
.gsec h2{font:400 22px 'Capriola',sans-serif;color:var(--ink);margin:0 0 13px;line-height:1.3}
.gsec p{font-size:16px;line-height:1.78;color:var(--text);margin:0 0 14px}
.gsec p:last-child{margin-bottom:0}
.bl li,.gsteps li{padding:5px 0 5px 22px;line-height:1.6;color:var(--text)}
.bl li::before{left:1px;top:17px;width:10px;height:2px;border:0;border-radius:1px;background:var(--text)}
.gsteps li::before{content:counter(g) ".";top:5px;width:auto;height:auto;border:0;border-radius:0;background:none;display:block;font:400 15px/1.7 'Capriola',sans-serif;color:var(--ink)}
.gsec .pbtn{min-height:0;padding:9px 16px;font-size:13px;gap:.4em}
.gsec .pbtn svg{width:15px;height:15px}
.dg{margin-top:4px}
.drow,.drow:hover,.drow[open]{background:none;border:0;border-top:1.5px solid var(--tan2);border-radius:0;margin:0;box-shadow:none}
.drow:first-child{border-top:0}
.drow summary{padding:13px 2px;font:400 15.5px 'Capriola',sans-serif}
.drow summary:hover span{color:var(--rust)}
.drow .db{padding:0 2px 14px;font-size:15px;line-height:1.7;color:var(--text)}

/* round 35: the page copy, with paragraphs and lists inside the document dropdowns */
.drow .db p{font-size:15px;line-height:1.7;margin:0 0 10px}
.drow .db .bl{margin:0 0 12px}
.drow .db .bl li{font-size:15px;padding:3px 0 3px 22px}
.drow .db .bl li::before{top:15px}
.drow .db > :last-child{margin-bottom:0}
.gsec a.inline{color:var(--rust);text-decoration:underline;text-underline-offset:3px}

/* round 36: Log in on the front page only */
body:not(.on-landing) .nav .btn{display:none}

/* round 40: online-or-paper form section */
.formslot .pbtn{margin:0 0 14px}
.formslot p.alt{font-size:15px}

/* round 41: four treatments for the "We can do it with you" band, chosen with ?band=a|b|c|d (none = round 40's yellow tile).
   Copy untouched. Every variant puts the heading on one line. */
body[class*="bd-"] .bandin h2{max-width:none}
/* A: the question tile's own form (white, warm edge) with the kiwi perched on its top edge */
body.bd-a .band{margin-top:64px}
body.bd-a .bandin{background:#fff;border:1.5px solid var(--line);box-shadow:0 3px 0 var(--line),0 12px 30px rgba(43,36,26,.08);overflow:visible}
body.bd-a .bandkiwi{top:auto;bottom:calc(100% - 12px);right:22px;width:110px}
/* B: the website's section band, full width, dotted edges, no tile */
body.bd-b .band{margin:34px calc(50% - 50vw) 8px;background:var(--cream2);border-top:1.5px dotted var(--line);border-bottom:1.5px dotted var(--line)}
body.bd-b .bandin{background:none;border:0;box-shadow:none;border-radius:0;max-width:760px;margin:0 auto;padding:30px 20px 32px}
body.bd-b .bandkiwi{top:auto;bottom:0;right:20px;width:110px}
/* C: part of the page, like every other section: a dotted rule above, no box */
body.bd-c .band{margin:24px 0 8px;padding-top:24px;border-top:1.5px dotted var(--line)}
body.bd-c .bandin{background:none;border:0;box-shadow:none;border-radius:0;padding:0}
body.bd-c .bandin h2{font:400 22px 'Capriola',sans-serif;line-height:1.3;margin-bottom:14px}
body.bd-c .bandkiwi{top:auto;bottom:0;right:0;width:84px}
/* D: the front page's closing "Get help" tile, stretched: heading and button share a row, steps run across underneath */
body.bd-d .bandin{background:#fff;border:1.5px solid var(--line);box-shadow:0 3px 0 var(--line),0 12px 30px rgba(43,36,26,.08);border-radius:20px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:18px;padding:22px 24px}
body.bd-d .bandin h2{grid-column:1;grid-row:1;margin:0}
body.bd-d .bandin .pbtn{grid-column:2;grid-row:1}
body.bd-d .b3{grid-column:1/-1;grid-row:2;grid-template-columns:repeat(3,minmax(0,1fr));max-width:none;margin:18px 0 0;padding-top:16px;border-top:1.5px dotted var(--line)}
body.bd-d .b3 li{grid-template-columns:28px minmax(0,1fr);gap:10px}
body.bd-d .bandkiwi{display:none}
@media (max-width:900px){
 body.bd-a .band{margin-top:58px}
 body.bd-a .bandkiwi{width:92px;right:14px}
 body.bd-b .bandin{padding:26px 16px 28px}
 body.bd-b .bandkiwi{width:84px;right:12px}
 body.bd-c .bandkiwi{width:72px}
 body.bd-d .bandin{grid-template-columns:minmax(0,1fr);padding:20px 18px}
 body.bd-d .bandin .pbtn{grid-column:1;grid-row:3;margin-top:18px}
 body.bd-d .b3{grid-template-columns:minmax(0,1fr);margin-top:14px}
}

/* round 44: four looks for "Don't know your IRD number?", chosen with ?ird=a|b|c|d (none = round 43's cream box) */
/* A: a plain row, like the document dropdowns on the guide pages */
body.ir-a .irdhelp{background:none;border:0;border-top:1.5px solid var(--tan2);border-bottom:1.5px solid var(--tan2);border-radius:0;margin:-2px 0 18px}
body.ir-a .irdhelp summary{padding:13px 2px;font:400 15.5px 'Capriola',sans-serif}
body.ir-a .irdhelp summary:hover{color:var(--rust)}
body.ir-a .irdhelp .ib{padding:0 2px 14px}
/* B: a text toggle, like the front page's "On this page" */
body.ir-b .irdhelp{background:none;border:0;border-radius:0;margin:-6px 0 20px}
body.ir-b .irdhelp summary{display:inline-flex;justify-content:flex-start;gap:8px;padding:2px 2px 5px;font:400 15px 'Capriola',sans-serif;color:var(--soft);border-bottom:1.5px dotted var(--line)}
body.ir-b .irdhelp .ib{padding:12px 0 0}
/* C: a white box, like the "Other provider" dropdown */
body.ir-c .irdhelp{background:#fff;border:1.5px solid #e8e1d1;border-radius:14px}
body.ir-c .irdhelp:hover,body.ir-c .irdhelp[open]{border-color:var(--mango)}
body.ir-c .irdhelp summary{padding:14px 16px}
body.ir-c .irdhelp .ib{padding:0 16px 16px}
/* D: a small link under the hint; the help opens beside a dotted line */
body.ir-d .irdhelp{background:none;border:0;border-radius:0;margin:-10px 0 20px}
body.ir-d .irdhelp summary{display:inline-flex;justify-content:flex-start;gap:4px;padding:0;font:500 13.5px 'Roboto',sans-serif;color:var(--rust);text-decoration:underline;text-underline-offset:3px}
body.ir-d .irdhelp .chev{width:14px;height:14px;flex-basis:14px}
body.ir-d .irdhelp .ib{margin-top:10px;padding:2px 0 2px 14px;border-left:2px dotted var(--line)}

/* signup: the three lines + "How does it work?" (the kiwi explains). Merged from the signup-page rounds 35-45 on 28 Sep. Scoped to the signup screen.
   2026-10-08 (Jacob): each line sits beside a small grey dot, close to the words, so the rust handwriting below is the only accent. They were hand-drawn rust ticks. */
[data-s=signup] .ticks{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:3px}
[data-s=signup] .ticks li{display:flex;align-items:center;gap:7px;font-size:14px;color:var(--ink);line-height:1.35}
[data-s=signup] .ticks li::before{content:"";flex:0 0 4px;width:4px;height:4px;border-radius:50%;background:var(--ink);opacity:.38}
[data-s=signup] .dB{margin-top:0}
[data-s=signup] .dB summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:0 0 3px;-webkit-tap-highlight-color:transparent}
[data-s=signup] .dB summary::-webkit-details-marker{display:none}
[data-s=signup] .dB .handwrap{position:relative;display:inline-block;padding-bottom:3px}
[data-s=signup] .dB .hand{font-family:'Caveat',cursive;font-weight:700;font-size:20px;line-height:1;color:var(--rust)}
[data-s=signup] .dB .uline{position:absolute;left:0;right:0;bottom:-3px;width:100%;height:7px;stroke:var(--rust);stroke-width:2;fill:none;stroke-linecap:round}
[data-s=signup] .dB .hchev{width:16px;height:16px;margin-top:3px;stroke:var(--rust);stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
[data-s=signup] .dB[open] .hchev{transform:rotate(180deg)}
[data-s=signup] .dB summary:hover .hand,[data-s=signup] .dB summary:focus-visible .hand{color:var(--ink)}
[data-s=signup] .dB summary:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}
[data-s=signup] .dB .bubble{position:relative;margin:10px 0 84px;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 3px 0 var(--line);padding:16px 16px 14px;display:grid;gap:10px}
[data-s=signup] .dB .bubble::after{content:"";position:absolute;right:62px;bottom:-12px;width:20px;height:20px;background:#fff;border-right:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:3px 3px 0 var(--line);transform:rotate(45deg) skew(8deg,8deg);border-bottom-right-radius:4px}
[data-s=signup] .dB .bubble p{font-size:14.5px;line-height:1.5;color:var(--text)}
[data-s=signup] .dB .bubble b{font:400 14.5px 'Capriola',sans-serif;color:var(--ink)}
[data-s=signup] .perch{cursor:pointer;pointer-events:auto}
@media(max-width:900px){[data-s=signup] .col>.withperch.tight{margin-top:12px}[data-s=signup] .dB .bubble{margin-bottom:64px}}
@media(prefers-reduced-motion:reduce){[data-s=signup] .dB .hchev{transition:none}}

/* 28 Sep: inside the phone frame, hide the desktop scrollbar the way a phone does (it was stealing 15px and re-wrapping headings) */
html:has(body.embed){scrollbar-width:none}
html:has(body.embed)::-webkit-scrollbar{display:none}
/* 28 Sep: signup headline stays on two lines on narrower phones (28px at 393, shrinks a touch below that) */
@media(max-width:900px){[data-s=signup] .col{container-type:inline-size}[data-s=signup] .ttl{font-size:min(28px,7.8cqi)}}

/* 28 Sep: stacked first/last name on a phone used the row gap AND the field margin (28px); now 16px like every other field */
[data-s=details] .row2{row-gap:0}

/* round 50 (28 Sep): review & sign rebuilt from the LIVE page's copy (public/sign.html + config/providers.js).
   Three layouts on the same copy: ?rv=A one card, ?rv=B three tiles, ?rv=C paper. ?prov=anz = ANZ (draw only). */
/* overflow:clip clips to the rounded corners like the other cards (so the progress bar stays inside the tile)
   but, unlike hidden, doesn't make the card a scroll container, so the sticky bar still pins to the screen */
[data-s=sign] .rvs-card{overflow:visible;overflow:clip}
.rvs-kgrid{display:grid;grid-template-columns:1fr 1fr;column-gap:16px}
.rvs-kgrid>div{padding:9px 0 10px;border-bottom:1.5px dotted var(--line);min-width:0}
.rvs-kgrid>div.wide{grid-column:1/-1}
.rvs-kgrid>div>span{display:block;font-size:12.5px;color:var(--soft);margin-bottom:2px}
.rvs-kgrid em{display:block;font:400 14.5px 'Capriola',sans-serif;font-style:normal;color:var(--ink);overflow-wrap:anywhere}
.rvs-disc h3{font-size:17px;margin:0 0 6px}
.rvs-disc p{font-size:14.5px;line-height:1.55;color:var(--text);margin:0 0 10px}
.rvs-free{margin-top:14px}
.rvs-free p{margin-bottom:0}
.rvs-doc{border:1px solid var(--tan);border-radius:14px;background:var(--cream2);margin-top:8px}
.rvs-doc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;font:400 15px 'Capriola',sans-serif;color:var(--ink)}
.rvs-doc summary::-webkit-details-marker{display:none}
.rvs-chev{flex:0 0 16px;width:16px;height:16px;stroke:var(--rust);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.rvs-doc[open] .rvs-chev{transform:rotate(180deg)}
.rvs-docbody{padding:0 14px 14px;font-size:13.5px;line-height:1.55;color:var(--text)}
.rvs-docbody p{margin:0 0 8px}
.rvs-docbody ol{margin:0;padding-left:20px}
.rvs-docbody li{margin:0 0 6px}
body:not(.prov-anz) .rvs-form-anz,body.prov-anz .rvs-form-fisher{display:none}
.rvs-sighead{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.rvs-sigtitle{display:inline-flex;align-items:center;gap:6px;font:400 17px 'Capriola',sans-serif;color:var(--ink)}
.rvs-lock{width:16px;height:16px;stroke:var(--rust);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
body.prov-anz .rvs-seg{display:none}
.rvs-sigpad{position:relative;height:170px;border:2px dashed var(--tan2);border-radius:16px;background:#fffdf9;touch-action:none}
.rvs-sigpad[hidden]{display:none}
.rvs-sigpad canvas{position:absolute;inset:0;width:100%;height:100%;border-radius:14px;z-index:1}
.rvs-sigline{position:absolute;left:22px;right:22px;bottom:42px;border-bottom:1.5px solid var(--tan2);pointer-events:none}
.rvs-sighint{position:absolute;left:0;right:0;bottom:14px;text-align:center;font-size:13px;color:var(--soft);pointer-events:none}
.rvs-typewrap input{position:absolute;left:22px;right:22px;bottom:46px;border:0;background:transparent;font:700 30px 'Caveat',cursive;color:var(--ink);outline:none;padding:0}
.rvs-docsline{font-size:13.5px;color:var(--soft);margin:12px 0 6px}
.rvs-consent{font-size:14px;line-height:1.55;color:var(--text);margin:0}
.rvs-consent a{color:var(--rust)}
.rvs-trust{text-align:center;font-size:13px;color:var(--soft);margin:18px 0 0}
/* the bar: guide line until the signature box is on screen, then the real controls (live behaviour) */
.rvs-bar{margin-top:18px}
.rvs-guide{display:none;align-items:center;justify-content:center;gap:6px;width:100%;background:none;border:0;cursor:pointer;padding:6px 0;font:700 15.5px/1.45 'Roboto',sans-serif;color:var(--ink)}
.rvs-bob{display:inline-block;font:400 18px 'Capriola',sans-serif;color:var(--rust);animation:rvs-bob 1.6s ease-in-out infinite alternate}
@keyframes rvs-bob{from{transform:translateY(-2px)}to{transform:translateY(3px)}}
@media(prefers-reduced-motion:reduce){.rvs-bob{animation:none}.rvs-chev{transition:none}}
.rvs-ctrls[hidden]{display:none}
#rvs-submit[disabled]{opacity:.45;cursor:not-allowed}
.rvs-clear{display:block;margin:10px auto 0;background:none;border:0;cursor:pointer;color:var(--rust);font:500 13px 'Roboto',sans-serif;text-decoration:underline}
.rvs-clear[hidden]{display:none}
@media(max-width:720px){
  /* ported from the live main.css .sticky-cta (2026-08-04/05): sticky INSIDE the card as its last child,
     pinned to the dynamic bottom, with a 140px white overhang so iOS's collapsing toolbar never shows page text beneath it */
  [data-s=sign] .rvs-bar{position:sticky;bottom:0;bottom:calc(100svh - 100dvh);z-index:20;margin:22px -18px -18px;
    padding:14px 18px calc(16px + env(safe-area-inset-bottom,0px));background:#fff;border-top:1.5px solid var(--tan2);
    border-radius:0 0 24px 24px;box-shadow:0 -6px 22px rgba(43,36,26,.12)}
  [data-s=sign] .rvs-bar:not(.parked)::after{content:"";position:absolute;top:calc(100% - 18px);left:0;right:0;height:140px;background:#fff;z-index:-1}
  .rvs-guide{display:flex}
  .rvs-bar.armed .rvs-guide{display:none}
  .rvs-bar:not(.armed) .rvs-ctrls{display:none}
}
/* ---- A: one card, parts divided by dotted rules ---- */
body.rv-A .rvs-part{padding:16px 0;border-top:1.5px dotted var(--line)}
body.rv-A .rvs-review{padding-top:0;border-top:0}
/* ---- B: three tiles (details / what you're appointing / sign) ---- */
body.rv-B [data-s=sign] .rvs-card{background:transparent;border:0;box-shadow:none}
body.rv-B [data-s=sign] .rvs-card .steps2{border-radius:3px;background:var(--sand);margin:0 2px}
body.rv-B [data-s=sign] .cbody{padding:12px 0 0}
body.rv-B .rvs-part{background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:0 3px 0 var(--line);padding:16px 18px;margin-top:14px}
body.rv-B .rvs-review{margin-top:0}
body.rv-B .rvs-docs{border-bottom:0;border-radius:22px 22px 0 0;box-shadow:none;padding-bottom:8px}
body.rv-B .rvs-sign{margin-top:0;border-top:1.5px dotted var(--line);border-radius:0 0 22px 22px}
body.rv-B .rvs-free{background:color-mix(in srgb,var(--green-l) 55%,#fff);border-radius:14px;padding:12px 14px}
body.rv-B .rvs-doc{margin:0 0 8px}
@media(max-width:720px){
  body.rv-B [data-s=sign] .rvs-bar{margin:14px 0 0;border:1px solid var(--line);border-bottom:0;border-radius:22px 22px 0 0}
  body.rv-B [data-s=sign] .rvs-bar.parked{border-bottom:1px solid var(--line);border-radius:22px;box-shadow:0 3px 0 var(--line)}
}
/* ---- C: paper. The documents and the signature read as sheets you sign at the foot of ---- */
body.rv-C .rvs-part{padding:14px 0}
body.rv-C .rvs-review{padding-top:0}
body.rv-C .rvs-kgrid{background:var(--cream2);border:1px solid var(--tan);border-radius:14px;padding:4px 14px 8px}
body.rv-C .rvs-kgrid>div{border-bottom:1.5px solid var(--tan)}
body.rv-C .rvs-doc,body.rv-C .rvs-sign{position:relative;background:#fff;border:1px solid var(--tan2);border-radius:3px;
  box-shadow:0 1px 0 var(--tan2),0 8px 18px rgba(43,36,26,.08)}
body.rv-C .rvs-doc::before,body.rv-C .rvs-sign::before{content:"";position:absolute;right:-1px;top:-1px;width:18px;height:18px;
  background:linear-gradient(225deg,#fff 0 48%,var(--tan2) 48% 52%,#f4ecd8 52%);border-bottom-left-radius:3px}
body.rv-C .rvs-doc{margin-top:10px}
body.rv-C .rvs-doc summary{font-size:14px}
body.rv-C .rvs-sign{padding:14px 16px 16px;margin-top:6px}
body.rv-C .rvs-sigpad{border:0;background:transparent;height:128px}
body.rv-C .rvs-sigline{left:4px;right:4px;bottom:30px;border-bottom:1.5px solid var(--ink)}
body.rv-C .rvs-sighint{bottom:6px;text-align:left;left:4px}
body.rv-C .rvs-typewrap input{left:4px;right:4px;bottom:34px}
body.rv-C .rvs-docsline{margin:8px 0 12px;font:400 14px 'Capriola',sans-serif;color:var(--ink)}

/* round 51: layout A chosen. The two documents are plain rows between dotted rules, no box (as the live page since 2026-07-16) */
body.rv-A .rvs-docs{padding:0}
body.rv-A .rvs-doc{background:none;border:0;border-radius:0;margin:0;border-bottom:1.5px dotted var(--line)}
body.rv-A .rvs-doc summary{padding:14px 0}
body.rv-A .rvs-docbody{padding:0 0 14px}
body.rv-A .rvs-sign{border-top:0}

/* round 52: layout A, tighter so the signature box sits nearer the first screen. Same copy, same order; spacing and type only. */
body.rv-A [data-s=sign] .chead{margin-bottom:6px}
body.rv-A .rvs-part{padding:12px 0}
body.rv-A .rvs-review{padding-top:0}
body.rv-A .rvs-kgrid>div{padding:5px 0 6px}
body.rv-A .rvs-kgrid>div>span{font-size:12px;margin-bottom:1px}
body.rv-A .rvs-kgrid em{font-size:14px}
body.rv-A .rvs-disc h3{font-size:16px;margin-bottom:4px}
body.rv-A .rvs-disc p{font-size:14px;line-height:1.45;margin-bottom:8px}
body.rv-A .rvs-free{margin-top:10px}
body.rv-A .rvs-free p{margin-bottom:0}
body.rv-A .rvs-doc summary{padding:10px 0;font-size:14.5px}
body.rv-A .rvs-sighead{margin-bottom:8px}
body.rv-A .rvs-sigpad{height:160px}

/* round 53 (28 Sep): ?copy=short = shorter disclosure DRAFT (every Sch 21A cl 5 item kept); ?bar=1..5 = sign-bar variations, same label */
.rvs-short{display:none}
body.copy-short .rvs-long{display:none}
body.copy-short .rvs-short{display:block}
.rvs-short h3{font-size:16px;margin:0 0 6px}
.rvs-short p{font-size:14px;line-height:1.45;color:var(--text);margin:0 0 12px}
.rvs-short p:last-child{margin-bottom:0}
.rvs-peek,.rvs-pen{display:none}
@media(max-width:720px){
  /* 2: the bar fills mango as they get closer to the signature box */
  body.bar-2 [data-s=sign] .rvs-bar::before{content:"";position:absolute;left:0;top:-1.5px;height:4px;width:calc(var(--rvs-p,0) * 100%);
    background:var(--mango);border-radius:0 4px 4px 0}
  /* 3: an ink-outlined pill, clearly tappable, but not mango so it never reads as the submit */
  body.bar-3 .rvs-guide{border:1.5px solid var(--ink);border-radius:999px;background:#fff;box-shadow:0 3px 0 var(--ink);padding:10px 16px}
  /* 4: a pen, so the bar says what's at the bottom: a signature */
  body.bar-4 .rvs-pen{display:block;width:20px;height:20px;stroke:var(--rust);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
  /* 5: the kiwi peeks over the bar, the same kiwi that explains on signup */
  body.bar-5 .rvs-peek{display:block;position:absolute;left:18px;top:6px;width:42px;pointer-events:none}
}

/* round 54: the outlined pill is the pick; its arrow is still and ink */
body.bar-3 .rvs-bob{animation:none;color:var(--ink)}

/* round 56: the authority to act in plain English, as a list (DRAFT) */
.rvs-auth{margin:0;padding-left:18px}
.rvs-auth li{margin:0 0 5px}

/* round 57 (28 Sep): the done page, four ways (?dn=A|B|C|D). No kiwi-in-a-tile. */
.dn{display:none}
body.dn-A .dnA,body.dn-B .dnB,body.dn-C .dnC,body.dn-D .dnD{display:block}
.dn-wrap{padding-top:6px}
.dn .ttl{margin-bottom:0}
.dn .line{max-width:none;margin-top:8px}
.dn-email{display:inline-block;margin:8px 0 2px;padding:8px 12px;background:#fff;border:1.5px solid var(--line);border-radius:12px;
  font:400 15px 'Capriola',sans-serif;color:var(--ink);overflow-wrap:anywhere}
.dn-fine{font-size:13.5px;color:var(--soft);margin:10px 0 0;line-height:1.5}
.dn-h{font-size:18px;margin:26px 0 12px}
/* the portal's steps, first one live */
.dn-steps{list-style:none;margin:0;padding:0;display:grid;gap:14px;position:relative}
.dn-steps::before{content:"";position:absolute;left:14px;top:16px;bottom:18px;border-left:2px dotted var(--line)}
.dn-steps li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;position:relative}
.dn-n{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1.5px solid var(--line);
  font:400 13px 'Capriola',sans-serif;color:var(--soft)}
.dn-steps li.now .dn-n{background:var(--mango);border:2px solid var(--ink);color:var(--ink)}
.dn-steps h3{font-size:15.5px;margin:5px 0 2px}
.dn-steps li:not(.now) h3{color:var(--text)}
.dn-steps p{font-size:14px;line-height:1.45;color:var(--soft)}
/* A: welcome, with a handwritten line like the front page, and the portal's steps */
.dnA-head{display:grid;grid-template-columns:minmax(0,1fr) 96px;gap:8px;align-items:end}
.dnA-hand{font:700 22px/1 'Caveat',cursive;color:var(--rust);margin:0 0 4px}
.dnA-kiwi{width:96px;margin-bottom:6px}
/* B: the one action, then a peek at the portal they're about to open */
.dnB-icon{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--mango);border:2px solid var(--ink);
  box-shadow:0 3px 0 var(--ink);margin:4px 0 16px}
.dnB-icon svg{width:28px;height:28px;stroke:var(--ink);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.dnB-peek{margin:26px 0 0}
.dnB-phone{width:230px;height:300px;margin:0 auto;overflow:hidden;border:8px solid var(--ink);border-bottom:0;border-radius:30px 30px 0 0;
  background:#fff;-webkit-mask-image:linear-gradient(#000 72%,transparent);mask-image:linear-gradient(#000 72%,transparent)}
.dnB-phone img{display:block;width:100%}
.dnB-peek figcaption{text-align:center;font-size:13.5px;color:var(--soft);margin:6px auto 0;max-width:30ch;line-height:1.45}
/* C: a receipt of what they did today, the kiwi perched on it */
.dnC-wrap{position:relative;margin-top:62px}
.dnC-kiwi{position:absolute;right:18px;top:-70px;width:86px;z-index:2}
.dnC-receipt{position:relative;background:#fff;border:1px solid var(--tan2);border-radius:4px;
  box-shadow:0 1px 0 var(--tan2),0 10px 22px rgba(43,36,26,.08);padding:16px 18px 18px}
.dnC-title{font:400 15px 'Capriola',sans-serif;color:var(--ink);margin:0 0 8px}
.dnC-receipt ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.dnC-receipt li{display:flex;align-items:center;gap:9px;font-size:14.5px;color:var(--text)}
.dnC-receipt li svg{flex:0 0 17px;width:17px;height:17px;stroke:var(--green-d);stroke-width:2.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.dnC-next{margin-top:14px;padding-top:12px;border-top:1.5px dashed var(--line)}
.dnC-next p{font-size:14.5px;line-height:1.5;color:var(--text);margin:0}
.dnC-next b{font-weight:500;color:var(--ink);overflow-wrap:anywhere}
/* D: a small pencil kiwi beside the welcome (2026-10-10; the full-width scene read childish) */
.dnD-kiwi{float:right;width:118px;height:auto;margin:-4px 0 6px 14px}
.dnD-email{clear:both;margin-top:12px;display:flex;flex-direction:column;gap:2px;background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:10px 14px}
.dnD-email span{font-size:12.5px;color:var(--soft)}
.dnD-email b{font:400 15px 'Capriola',sans-serif;color:var(--ink);overflow-wrap:anywhere}

/* round 58: the returning-client screen on details (?rc=known|sent), live copy, redesign look */
.rc-card{display:none}
body.rc-known #rc-known,body.rc-sent #rc-sent{display:block}
body.rc-known [data-s=details] .withperch>.card:not(.rc-card),body.rc-sent [data-s=details] .withperch>.card:not(.rc-card){display:none}
body.rc-known [data-s=details] .ttl,body.rc-known [data-s=details] .line.tight,body.rc-sent [data-s=details] .ttl,body.rc-sent [data-s=details] .line.tight{display:none}
body.rc-known [data-s=details] .col>.withperch.tight,body.rc-sent [data-s=details] .col>.withperch.tight{margin-top:84px}
.rc-body{padding:26px 22px 24px}
.rc-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--mango);border:2px solid var(--ink);box-shadow:0 3px 0 var(--ink);margin-bottom:16px}
.rc-icon svg{width:26px;height:26px;stroke:var(--ink);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.rc-body h2{font-size:22px;line-height:1.2;margin:0 0 8px}
.rc-body p{font-size:15px;line-height:1.5;color:var(--text);margin:0 0 18px}
.rc-again{background:none;border:0;padding:0;cursor:pointer;color:var(--rust);font:500 14.5px 'Roboto',sans-serif;text-decoration:underline}

/* Piki Money logo in the header (an SVG, 1069x240; the old Adla PNG was shown 30px high, and the new one keeps that height) */
.brand img.brand-logo{width:auto;height:30px;display:block}
@media(max-width:900px){.brand img.brand-logo{height:28px}}

/* Build 2026-09-28: the pages show and hide whole sections with [hidden] (the
   guide's find-your-provider section, the band, the reason rows); a
   component's own display rule must never beat it. */
[hidden]{display:none!important}
/* The general-information line reads as its own line under the links. */
.foot .foot-legal{display:block;margin-top:12px;line-height:1.5}
/* Field hints (js/field-hints.js, live since 2026-09-15) in the funnel's look:
   an incomplete form's button looks disabled but stays tappable so it can say
   what's missing; the hint is one rust line under its field, the field gets a
   rust outline. Ported from main.css, sized to the .fld layout. */
.pbtn.is-waiting,.pbtn.is-waiting:hover,.pbtn.is-waiting:active,.pbtn:disabled{opacity:.5;cursor:not-allowed;transform:none;filter:none}
.fld .inp.has-hint{border-color:var(--rust)}
.fld .inp.has-hint:focus{border-color:var(--rust);box-shadow:0 0 0 3px rgba(196,123,53,.2)}
.field-hint{margin:6px 0 0;font:400 13px/1.45 'Roboto',sans-serif;color:var(--rust)}
.error-text{color:var(--rust);font-size:13px;margin-top:12px}
.error-text:empty{display:none}
.withperch .perch{cursor:pointer}
/* Details page, live pieces the mock doesn't draw (2026-09-28): the address
   finder's suggestions (ported from main.css, mango border pairs it with the
   focused box), the not-sure callout, the fix-it note, and one rust outline
   round all three date boxes when the date needs another look. */
.address-wrap{position:relative}
.address-suggestions{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:30;background:#fff;border:1.5px solid var(--mango);border-radius:13px;box-shadow:0 10px 24px rgba(43,36,26,.14);max-height:260px;overflow-y:auto}
.address-suggestion{padding:12px 16px;font:400 14.5px 'Roboto',sans-serif;color:var(--ink);cursor:pointer}
.address-suggestion+.address-suggestion{border-top:1px solid var(--cream2)}
.address-suggestion:hover,.address-suggestion:active{background:var(--cream2)}
.callout{background:var(--cream2);border:1px solid var(--tan);border-radius:14px;padding:14px 16px;margin-bottom:18px;font-size:14px;line-height:1.55;color:var(--text)}
.callout a{color:var(--rust)}
.split-note{margin:0 0 12px}
.dob:has(.has-hint) input{border-color:var(--rust)}
label.lab{display:block}
/* Review & sign, live pieces the mock doesn't draw (2026-09-28): the loading
   line and the bank click-wrap consent (reachable only when a provider signs no
   appointment). */
.rvs-loading{color:var(--soft);font-size:14px}
.consent-check{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.5;color:var(--text)}
.consent-check input{flex:0 0 auto;width:18px;height:18px;margin-top:3px;accent-color:var(--rust)}
#bank-consent .pbtn{margin-top:14px}
/* The site footer (Jacob 2026-09-28: "some variation of the footer we've
   already got"): the live funnel's footer from main.css, on the front page and
   the guide pages. Variation: sentence-case headings in the page's heading face
   rather than tracked capitals. The funnel's steps keep the slim .foot. */
.site-footer{position:relative;z-index:1;background:var(--cream2);border-top:1.5px solid var(--line);border-radius:32px 32px 0 0;margin-top:56px;overflow:hidden;text-align:left}
.footer-inner{padding:48px clamp(20px,4.5vw,56px) 0}
.footer-grid{max-width:1100px;margin:0 auto;display:flex;flex-wrap:wrap;gap:30px 56px;justify-content:space-between}
.footer-brand{flex:1 1 300px;max-width:440px}
.footer-brand img{height:30px;width:auto;margin-bottom:16px;display:block}
.footer-brand p{font-size:13.5px;line-height:1.7;color:var(--text);margin:0 0 10px;opacity:.82}
.footer-social{display:flex;gap:11px;margin-top:16px}
.footer-social a{width:34px;height:34px;border:1.5px solid var(--ink);border-radius:50%;display:grid;place-items:center;color:var(--ink);transition:background .14s,color .14s}
.footer-social a:hover{background:var(--ink);color:var(--tan2)}
.footer-social svg{width:16px;height:16px}
.footer-cols{display:flex;flex-wrap:wrap;gap:30px 52px}
.footer-h{font:400 16px 'Capriola',sans-serif;color:var(--ink);margin:0 0 12px}
.footer-col a{display:block;font-size:14px;color:var(--ink);text-decoration:none;margin-bottom:10px}
.footer-col a:hover{text-decoration:underline;text-underline-offset:3px}
.footer-legal{max-width:1100px;margin:36px auto 0;padding-top:20px;border-top:1.5px solid var(--line);font-size:12.5px;color:var(--soft);line-height:1.7}
.footer-banner{display:block;width:100%;height:auto;margin-top:34px}
[data-s=landing].focus .site-footer{display:none}
/* Desktop: the kiwi perched on the question tile poked 24px above the hero's
   band, and the band's clip-path sliced its leaf off under the header (Jacob
   2026-09-28). The hero comes down so the kiwi sits whole inside the band and
   clear of Log in. */
@media(min-width:901px){body.h-in.b-band.on-landing:not(.landing-focus) [data-s=landing] .hwrap{padding-top:50px}}
/* Why the questions stopped, on the how-to-apply pages (Jacob 2026-09-28): a
   quiet subtitle tight under the title, never wider than the title's text, and
   balanced so no word is left on a line of its own. */
/* "(optional)" on a field label reads quieter than the label (Jacob 2026-09-28). */
.lab .optional{font-weight:400;color:var(--soft)}
/* The licence or passport on Your details (Jacob, 28 Oct 2026): the pair on one row, like the date of birth's */
.dob.lic>label:first-child{grid-column:span 2}
.id-swap{display:block;margin-top:10px;background:none;border:0;padding:0;cursor:pointer;color:var(--rust);font:500 14.5px 'Roboto',sans-serif;text-decoration:underline;text-align:left}
.hint .id-swap{display:inline;margin:0;font:inherit;vertical-align:baseline;white-space:nowrap}