/* ============================================================
CUSTAILO — "Midnight & Gold" (palette F, on Raj's locked hexes)
Neutral off-white base · Deep navy structure · Gold accent
(base was warm cream until 2026-08-29; see the Section grounds note)
Brand navy #0A192F and gold #D4AF37 are the locked decision
(custailo-instructions.md, 2026-08-11). Do not change without
a new explicit decision.
Type: Newsreader (display) + Plus Jakarta Sans (UI/body)
Texture: subtle only. The collage variant and its switch were removed
2026-08-16; collage decorations (.tape/.stamp/.sticker/.tilt-*) stay
display:none and are never shown.
NOTE ON VARIABLE NAMES: --teal / --teal-deep / --teal-mist hold
NAVY-BLUE, not teal. They are kept as aliases because two guide
pages still reference them inline. New work should use --blue*.
Real teal now exists as --act* (see the colour roles below).
THREE COLOURS, THREE JOBS (set 2026-08-28):
navy #0A192F identity and solid surfaces — headings, header,
footer, the statement band, filled nav states
blue #16386B evidence — numbers, source names, table
highlights, meta labels, the calculator readout
teal #1F6F6B interaction — links, nav hover, ghost buttons,
focus rings, controls you operate
gold #D4AF37 the mark, the i-dot, source dots. Accent, <=3%.
If a colour is doing a job that is not on this list, it is wrong.
============================================================ */
/* Google Fonts are loaded from the HTML (preconnect + ),
not from here — @import blocks the browser from discovering the font
request until this whole file is fetched and parsed. See handover/06. */
:root{
/* Palette */
--paper: #FFFFFF; /* page — white 2026-08-29. Was #F8F6F2 cream. */
--paper-2: #F1F1F3; /* bands, alt sections, .data th, the calculator total box */
--card: #FFFFFF; /* cards — same white as the page; the hairline is what separates them */
--ink: #0A192F; /* LOCKED brand navy — headlines */
--ink-2: #3A4658; /* body text */
--stone: #626977; /* captions, meta — darkened 2026-08-24: #6E7585 was 3.94:1 on --paper-2, failed AA; this is 4.71:1 there, 5.11:1 on paper */
--line: #E5E5E8; /* hairlines. Warm #E7E3DA read yellow on white (29 Aug), then #E6E4DF
was still warm against the neutral fills (later the same day). */
/* EVIDENCE blue — numbers, sources, table highlights, filled buttons */
--blue: #16386B; /* AA on paper */
--blue-deep: #0A192F; /* = the locked brand navy */
--blue-mist: #DCE3EE;
/* legacy aliases: guide-arrival-checklist.html and guide-nz-cv.html
still name these inline. Do not delete without editing those two. */
--teal: var(--blue);
--teal-deep: var(--blue-deep);
--teal-mist: var(--blue-mist);
/* INTERACTION teal — links and controls only. Added 2026-08-28; this is
the Option-B teal from the 11 Aug bake-off, re-admitted in a narrow
role. 5.42:1 on paper, 5.00:1 on the sand bands. On trial: it can be
removed by reverting these three tokens to the blue ones. */
--act: #1F6F6B;
--act-deep: #164A4C; /* hover */
--act-mist: #DFEDEA; /* control tints, icon chips */
--gold: #D4AF37; /* LOCKED accent gold — one per composition, ≤3% */
--gold-deep: #796219; /* darkened again 2026-08-24: #866D1D passed on paper (4.61:1) but was 4.11:1 on --gold-mist chips; this is 4.85:1 on mist, 5.44:1 on paper */
--gold-mist: #F5E9C4;
--coral: #B8563D; /* warnings only */
/* Type */
--f-display: 'Newsreader', 'Newsreader Fallback', Georgia, 'Times New Roman', serif;
--f-ui: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
/* Section grounds. The page is white; these are the barely-there greys that
mark a band without becoming a second page colour. Dropped from
#F2EDE1/#F7F0DD on 2026-08-29 when the ground went white, because sand
that strong next to white read as two different papers taped together.
Neutralised again later the same day: they were still warm, and a warm fill
only looks warm next to something neutral, so once the page went white
the cream did not leave, it moved into the boxes. Every ground token
now holds its old lightness with the hue taken off warm. */
--sand: #F6F6F7;
--sand-warm: #F0F0F2; /* signup only, so it still stands apart */
/* Card fill. Asana's boxes carry no border and no shadow at all: a box is a
filled rounded rectangle on white, and the fill alone separates it. Ours
used white + hairline + two-layer shadow, three devices doing one job,
which is most of what read as a dashboard. Cards on the white ground now
take this fill; cards on a tinted or navy band go white instead, because
a filled card on a filled band is invisible.
NOT named --fill: the calculator script already owns that name on the
range inputs, and a :root --fill would break the slider track fallback.
Deepened 2026-08-30 from #F4F4F5. At that value the step against white was
1.10:1, and a box needs a neighbour to be legible at that step: in a grid
(guides.html) or a stack (cost-of-living.html) the white gutters give the
eye a reference, but an ISOLATED box had none, so the hero stat cards and
the "What we can't tell you" compliance callouts in guide prose read as
floating text. #ECECEE is 1.18:1, was already the hover value, and is in
the existing neutral grey family, so no new near-white was invented. The
fix is to make the one device stronger, never to add a hairline back.
Hover is now LIGHTER than resting, not darker. Going darker would have
dropped --stone in .card .meta to 4.35:1 and failed AA on hover; lifting
improves every text colour in the box and matches .band .card:hover, which
already lifts to white. On #ECECEE all card text is AA: ink 14.92,
ink-2 8.10, stone 4.68, act 5.02, blue 9.82, gold-deep 4.98. Coral is not
in that list on purpose, it is only the 4px .notice bar (non-text, 3:1). */
--card-fill: #ECECEE;
--card-fill-2: #F4F4F5; /* hover — LIGHTER than resting: the card lifts */
--radius: 14px; /* 6px read as a UI component, this reads as a page */
--radius-lg: 20px; /* large panels — radius scales with the box, as theirs does */
--shadow: 0 1px 2px rgba(10,25,47,.04), 0 10px 24px -14px rgba(10,25,47,.16);
--wrap: 1180px;
}
*{box-sizing:border-box}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
margin:0; background:var(--paper); color:var(--ink-2);
font-family:var(--f-ui); font-size:17px; line-height:1.72;
-webkit-font-smoothing:antialiased;
position:relative;
}
/* paper grain — always on, stronger in collage */
body::before{
content:""; position:fixed; inset:0; pointer-events:none; z-index:60; /* above the sticky header (50) so the grain is continuous and the header has no visible seam */
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
opacity:.018; mix-blend-mode:multiply; /* 2026-08-29: .035 read as dirt on a white ground */
}
body > *{position:relative; z-index:1}
h1,h2,h3,h4{font-family:var(--f-display); color:var(--ink); font-weight:400; line-height:1.24; margin:0 0 .5em; letter-spacing:0}
/* Display sizes go LIGHT (2026-08-30). Newsreader is variable 300-600 in our
self-hosted fonts.css, so the light weight costs no extra file. Culture Amp
runs its serif at 64px/300/-0.025em and that is most of why their page reads
as a publication rather than a product page; at 400 the same size reads
corporate. This extends the 29 Aug "tracking is a function of size" note to
weight. h2/h3/h4 are deliberately untouched, so the 28 Aug decision that put
mid-size heading tracking back to 0 is not reopened. */
h1{font-size:clamp(38px,5.2vw,64px); font-weight:300; letter-spacing:-.025em}
h2{font-size:clamp(29px,3.1vw,39px)}
h3{font-size:20px; font-family:var(--f-ui); font-weight:600; letter-spacing:0}
h4{font-size:19px; font-family:var(--f-ui); font-weight:600}
p{margin:0 0 1em}
a{color:var(--act); text-decoration:none}
a:hover{color:var(--act-deep)}
/* Links inside running text get an underline — link navy vs body ink is only
1.21:1, so colour alone can't mark them (WCAG 1.4.1). Nav, buttons, cards
and footer keep bare links; prose, list items and notes underline. */
main p a,main li a,.prose a{text-decoration:underline; text-underline-offset:.18em; text-decoration-thickness:1px}
main p a.btn,main li a.btn{text-decoration:none}
/* Skip link: visually hidden until keyboard focus */
.skip{position:absolute; left:-9999px; top:0; z-index:70; background:var(--ink); color:var(--paper); padding:10px 16px; border-radius:0 0 var(--radius) 0; font-weight:600}
.skip:focus{left:0; color:var(--paper)}
em{font-family:var(--f-display); font-style:italic; font-size:1.06em}
.lede{font-size:20px; line-height:1.62; color:var(--ink-2); max-width:56ch}
.lede em{color:var(--ink)}
.eyebrow{font-family:var(--f-ui); font-size:11.5px; font-weight:500; letter-spacing:.055em; text-transform:uppercase; color:var(--blue); margin:0 0 14px}
.eyebrow.gold{color:var(--gold-deep)}
.muted{color:var(--stone)}
.small{font-size:14px}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 28px}
section{padding:108px 0} /* 2026-08-29: with the bands nearly white, air is what separates sections */
@media (max-width:600px){section{padding:60px 0}}
.band{background:var(--sand)}
#signup.band{background:var(--sand-warm)}
.band-teal{background:var(--teal-deep); color:#E6EAF2}
.band-teal h2,.band-teal h3{color:#F0F0F2}
.band-teal .eyebrow{color:var(--gold)}
.band-teal a{color:#F0F0F2}
.band-teal .lede,.band-teal .muted{color:#B5C0D4}
/* cards keep their paper ground even inside the navy band */
.band-teal .card h3{color:var(--ink)}
.band-teal a.card{color:var(--ink-2)}
.band-teal .card .muted{color:var(--stone)}
.center{text-align:center}
.grid{display:grid; gap:24px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.g2,.g3,.g4{grid-template-columns:1fr} section{padding:56px 0} .wrap{padding:0 20px}}
/* ---------- Header ---------- */
/* Seamless header: same ground as the page, no rule, no hard edge. The blur lets
content soften as it scrolls underneath rather than hitting a line. Presence now
comes from the mark, the wordmark size and the nav weight — not from a border. */
.top{
position:sticky; top:0; z-index:50;
background:rgba(255,255,255,.82);
backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
border-bottom:0;
}
@supports not (backdrop-filter:blur(1px)){ .top{background:var(--paper)} }
.top .wrap{display:flex; align-items:center; justify-content:space-between; height:86px; gap:24px}
.brand{display:flex; align-items:center; gap:12px; color:var(--ink)}
/* The mark's stroke is currentColor, and the global a:hover (0,1,1) outranks
.brand (0,1,0), so hovering the logo was repainting the arch teal. The mark
is identity, not interaction, and identity does not change colour on hover.
.brand:hover is (0,2,0) and wins. Keep both, header and footer. */
.brand:hover{color:var(--ink)}
footer .brand,footer .brand:hover{color:#F0F0F2}
/* Header-only entrance: the arch draws right to left, the gold dot settles
in after. Static multi-page site, so every navigation is a fresh load —
no JS needed to stop it repeating. Header's mark path is reversed
(right-to-left point order) so the dashoffset draw reads right to left;
the footer mark keeps the original path since it never animates. */
@keyframes archDraw{to{stroke-dashoffset:0}}
@keyframes sunIn{to{opacity:1; transform:scale(1)}}
@media (prefers-reduced-motion:no-preference){
.top .mark path{stroke-dasharray:1; stroke-dashoffset:1; animation:archDraw .5s ease-out both}
.top .mark circle{opacity:0; transform:scale(.4); transform-origin:20px 13.7px; animation:sunIn .35s ease-out .35s both}
}
/* The mark: "Held" — a cupped navy curve holding the gold dot. Chosen 2026-08-16.
Stroke is currentColor so it inherits ink in the header and paper in the footer.
The gold dot deliberately rhymes with the wordmark's gold i-dot. */
.brand .mark{width:46px; height:46px; display:block; flex:none}
/* Wordmark: lowercase, gold i-dot. The gold underline rule was removed 2026-08-16 —
with the mark's gold dot and the i-dot, it was a third gold element and pushed the
lockup past the ≤3% accent rule.
The dot: .145em seated at .045em — low enough to read as part of the letter
rather than a mark floating above it. Earlier tries at -.055em and -.015em both
sat above the l/t ascenders and looked detached. */
.wordmark{font-family:var(--f-display); font-size:34px; font-weight:500; letter-spacing:.02em; color:var(--ink); line-height:1; position:relative; white-space:nowrap}
.wordmark .i{position:relative; display:inline-block}
.wordmark .i::after{content:""; position:absolute; left:50%; transform:translateX(-50%); top:.045em; width:.145em; height:.145em; border-radius:50%; background:var(--gold)}
nav.main{display:flex; align-items:center; gap:28px; font-size:15px; font-weight:600}
nav.main a{color:var(--ink)}
nav.main a:hover,nav.main a[aria-current]{color:var(--act)}
.top .cta{display:flex; gap:10px}
/* ---------- Guides dropdown ---------- */
.navsub{position:relative}
.navsub>a{display:inline-flex; align-items:center; gap:5px}
.navsub>a::after{content:""; width:5px; height:5px; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor; transform:rotate(45deg) translateY(-1px)}
.submenu{
position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(6px);
min-width:322px; padding:8px 0; margin-top:10px;
background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
box-shadow:0 2px 3px rgba(10,25,47,.06), 0 18px 34px -16px rgba(10,25,47,.28);
opacity:0; visibility:hidden; transition:opacity .16s ease, transform .16s ease;
font-weight:500;
}
.submenu::before{content:""; position:absolute; left:0; right:0; top:-14px; height:14px}
.navsub:hover .submenu,.navsub:focus-within .submenu{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0)}
.submenu a{display:block; padding:10px 18px; font-size:14.5px; white-space:nowrap; color:var(--ink-2)}
.submenu a b{display:block; font-weight:600; color:var(--ink)}
.submenu a .d{display:block; margin-top:1px; font-size:12.5px; font-weight:400; line-height:1.45; color:var(--stone); white-space:normal}
.submenu a:hover b{color:var(--act-deep)}
.submenu a:hover{background:var(--act-mist); color:var(--act-deep)}
.submenu a.sub-all{margin-top:6px; padding-top:12px; border-top:1px solid var(--line); font-weight:600; color:var(--act)}
@media (prefers-reduced-motion:reduce){.submenu{transition:none}}
/* ---------- Mobile navigation ---------- */
.navtoggle{display:none; flex-direction:column; justify-content:center; gap:5px; width:44px; height:44px; padding:0 10px; margin-left:auto; background:transparent; border:0; cursor:pointer; border-radius:var(--radius)}
.navtoggle span{display:block; height:2px; width:100%; background:var(--ink); border-radius:2px; transition:transform .2s, opacity .2s}
.navtoggle:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
.navtoggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navtoggle.is-open span:nth-child(2){opacity:0}
.navtoggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:980px){
.navtoggle{display:flex}
.top .wrap{position:relative}
nav.main{
display:none; position:absolute; top:100%; left:0; right:0;
flex-direction:column; align-items:stretch; gap:0; padding:6px 0 10px;
background:var(--paper); border-bottom:1px solid var(--line);
box-shadow:var(--shadow);
}
nav.main.open{display:flex}
nav.main>a,.navsub>a{padding:13px 28px; font-size:16px; border-bottom:1px solid var(--line)}
.navsub{width:100%}
.navsub>a{display:flex}
.navsub>a::after{display:none}
.submenu{
position:static; transform:none; opacity:1; visibility:visible;
min-width:0; padding:0; margin:0; background:transparent;
border:0; border-bottom:1px solid var(--line); border-radius:0; box-shadow:none;
}
.submenu a{padding:11px 28px 11px 44px; font-size:15px; white-space:normal}
.submenu a.sub-all{margin:0; padding-top:11px; border-top:0}
nav.main>a:last-child{border-bottom:0}
.top .cta{display:none}
}
@media (prefers-reduced-motion:reduce){.navtoggle span{transition:none}}
/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:8px; padding:13px 24px; border-radius:999px; font-family:var(--f-ui); font-weight:600; font-size:15px; border:1.5px solid transparent; cursor:pointer; transition:.15s; line-height:1}
.btn-primary{background:var(--blue); color:#fff}
.btn-primary:hover{background:var(--blue-deep); color:#fff}
.btn-outline{border-color:var(--ink); color:var(--ink); background:transparent}
.btn-outline:hover{background:var(--ink); color:var(--paper)}
.btn-navy{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.btn-navy:hover{background:#132744; border-color:#132744; color:var(--paper)}
.btn-gold{background:var(--gold); color:var(--ink)}
.btn-gold:hover{background:var(--gold-deep); color:#fff}
.btn-sm{padding:10px 18px; font-size:13.5px}
.btn-ghost{color:var(--act); padding-left:0; padding-right:0}
.btn-ghost:hover{color:var(--act-deep)}
.btn .arrow{transition:transform .15s}
.btn:hover .arrow{transform:translateX(3px)}
/* ---------- Tags / chips ---------- */
.tag{display:inline-block; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:5px 10px; border-radius:999px; background:var(--blue-mist); color:var(--blue-deep)}
.tag.gold{background:var(--gold-mist); color:var(--gold-deep)}
.tag.sample{background:var(--gold-mist); color:var(--gold-deep); border:1px dashed var(--gold)}
.tag.outline{background:transparent; border:1px solid var(--line); color:var(--stone)}
/* ---------- Hero ---------- */
.hero{padding:96px 0 72px; overflow:hidden; position:relative}
.hero .wrap{display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center}
.hero h1 em{color:var(--blue)}
.hero .actions{display:flex; gap:12px; margin:30px 0 26px; flex-wrap:wrap}
.hero .proof{display:flex; gap:22px; flex-wrap:wrap; font-size:13.5px; color:var(--stone)}
.hero .proof b{color:var(--ink); font-weight:600}
.hero .proof span::before{content:"●"; color:var(--gold); font-size:9px; margin-right:8px; vertical-align:2px}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr} .hero{padding:64px 0 48px}}
/* Hero visual: three stat cards as a staggered cluster. In normal flow
(grid), so they can never overlap whatever the text length or viewport —
the absolute-position version collided at desktop widths (fixed 2026-08-24). */
.hero-visual{position:relative; display:grid; gap:16px; align-content:center}
.hero-visual .halftone{display:none; position:absolute; right:-40px; top:-30px; width:220px; height:220px; opacity:.5;
background-image:radial-gradient(var(--teal) 1.3px, transparent 1.4px); background-size:12px 12px;
-webkit-mask-image:radial-gradient(circle at 70% 30%, #000 30%, transparent 70%); mask-image:radial-gradient(circle at 70% 30%, #000 30%, transparent 70%)}
.hero-visual .halftone.gold{background-image:radial-gradient(var(--gold) 1.3px, transparent 1.4px); right:auto; left:-30px; top:auto; bottom:-30px; width:180px; height:180px}
/* Takes --card-fill like every other box. It was pointed at --card-fill-2 for
a few hours on 2026-08-30 while the deeper fill was scoped to the hero only;
the token itself has since moved, so this MUST name --card-fill or the cards
silently render in the hover colour. */
.pcard{position:relative; background:var(--card-fill); border:0; border-radius:var(--radius); box-shadow:none; padding:18px 20px; transition:transform .35s ease}
.pcard .k{font-size:11.5px; letter-spacing:.055em; text-transform:uppercase; color:var(--stone); font-weight:500}
.pcard .v{font-family:var(--f-display); font-size:34px; color:var(--ink); line-height:1.05; margin:6px 0 4px}
/* Newsreader's display-optical-size dollar sign has TWO vertical bars, and
its single-bar alternate is gated behind variable-font behavior that
renders differently per engine (a rvrn-based fix verified in Chrome
still showed two bars on iPhone Safari, 2026-08-24). So .cur simply sets
the $ in the body font instead — Plus Jakarta Sans' dollar is single-bar
in every browser, no font features involved. Numerals stay Newsreader. */
.cur{font-family:var(--f-ui); font-weight:600; font-size:.88em}
/* at table sizes (15-19px) PJS 600 reads heavier than the Newsreader numerals
beside it — one step lighter balances; large display figures keep 600 */
.data .cur{font-weight:500}
.pcard .s{font-size:13px; color:var(--stone)}
/* One card in the cluster is filled, so the group reads as a composition
rather than three of the same thing. Navy, because filled surfaces are
navy's job on this site; teal is reserved for things you can click and
these cards are not clickable. */
.pcard.fill{background:var(--ink); color:#E6EAF2}
.pcard.fill .k{color:#9FB0C9}
.pcard.fill .v{color:#FFFFFF}
.pcard.fill .s{color:#C3CEDF}
.pcard.fill .s b{color:#FFFFFF}
.pcard.fill .src{border-top-color:rgba(255,255,255,.16); color:#9FB0C9}
.pcard.fill .src b{color:var(--gold)}
.pcard.fill a{color:#FFFFFF}
.pcard .src{margin-top:12px; padding-top:10px; border-top:1px solid rgba(10,25,47,.10); font-size:11.5px; color:var(--stone); display:flex; justify-content:space-between}
.pcard .src b{color:var(--blue); font-weight:600}
/* Staggered offsets only where the column is wide enough; below 1200px
the cards fill the column as a plain stack. */
@media (min-width:1200px){
.pcard.c1{width:78%; justify-self:start}
.pcard.c2{width:74%; justify-self:end}
.pcard.c3{width:86%; justify-self:start; margin-left:6%}
}
.pcard.c3 .bar{height:8px; border-radius:4px; background:var(--teal-mist); margin-top:10px; overflow:hidden}
.pcard.c3 .bar i{display:block; height:100%; width:62%; background:var(--teal); border-radius:4px}
.pcard.c3 .bar.g i{width:38%; background:var(--gold)}
/* Tape strips: only in collage */
.tape{position:absolute; width:86px; height:24px; background:rgba(201,162,74,.28); border-left:1px dashed rgba(201,162,74,.6); border-right:1px dashed rgba(201,162,74,.6); display:none; backdrop-filter:blur(.5px)}
.tape.tl{left:-30px; top:-10px; transform:rotate(-40deg)}
.tape.tr{right:-30px; top:-10px; transform:rotate(40deg)}
.tape.tc{left:50%; top:-12px; transform:translateX(-50%) rotate(-3deg)}
.tape.teal{background:rgba(31,111,107,.22); border-color:rgba(31,111,107,.5)}
/* Stamp badge: only in collage */
.stamp{display:none; position:absolute; width:104px; height:104px; border-radius:50%; border:2px solid var(--coral); color:var(--coral); font-family:var(--f-ui); font-weight:700; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; text-align:center; align-items:center; justify-content:center; padding:10px; opacity:.85; transform:rotate(-14deg); line-height:1.3;
-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.4 -.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.4 -.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.stamp::before{content:""; position:absolute; inset:5px; border:1px solid currentColor; border-radius:50%}
.stamp.teal{border-color:var(--teal); color:var(--teal)}
.stamp.teal::before{border-color:var(--teal)}
/* Sticker label: only in collage */
.sticker{display:none; position:absolute; background:var(--gold); color:var(--ink); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:6px 10px; transform:rotate(-4deg); box-shadow:0 2px 6px rgba(0,0,0,.15)}
/* ---------- Divider ---------- */
.rule{display:flex; align-items:center; gap:14px; justify-content:center; margin:0 auto 18px; width:220px}
.rule::before,.rule::after{content:""; flex:1; height:1px; background:var(--line)}
.rule i{width:8px; height:8px; border-radius:50%; background:var(--gold)}
/* ---------- Stage strip ---------- */
/* Four stages sit straight on the page ground, separated by space and one
hairline above each. This used to be a single bordered strip with a shadow
and internal dividers, which read as a widget bolted onto the page rather
than a sequence you move through. */
.stages{display:grid; grid-template-columns:repeat(4,1fr); gap:40px}
.stage{padding:22px 0 0; border-top:1px solid var(--line); position:relative}
.stage .n{font-family:var(--f-display); font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-deep); font-weight:500}
.stage h3{font-size:22px; margin:6px 0 6px}
.stage p{font-size:14.5px; color:var(--stone); margin:0 0 12px}
.stage a{font-size:14px; font-weight:600}
/* The emphasised stage carries a heavier rule and darker body copy instead of
a filled navy panel. Same signal, none of the weight. */
.stage.now{border-top:2px solid var(--ink)}
.stage.now p{color:var(--ink-2)}
@media (max-width:900px){.stages{grid-template-columns:repeat(2,1fr); gap:34px 40px}}
@media (max-width:600px){.stages{grid-template-columns:1fr; gap:28px}}
/* ---------- Cost section: map + pulled stat (index) ---------- */
.costgrid{display:grid; grid-template-columns:290px 1fr; gap:52px; align-items:start}
/* grid items default to min-width:auto, so the table's min-width:560px
(via .table-wrap) was forcing this whole grid, and the page's layout
viewport, wider than the screen on mobile. Same fix as .grid and .two
children get below. */
.costgrid>*{min-width:0}
.nzmap{width:100%; max-width:270px; display:block; color:var(--ink)}
.nzmap .city .dot{fill:var(--gold); stroke:var(--card); stroke-width:1.5}
.nzmap .city text{font-family:var(--f-ui); font-size:9px; font-weight:600; fill:var(--ink-2); paint-order:stroke; stroke:var(--paper); stroke-width:3px; stroke-linejoin:round}
.nzmap .city{cursor:default}
.data td.colhi,.data th.colhi{background:var(--gold-mist)}
.bigstat{margin-top:22px}
.bigstat .bv{font-family:var(--f-display); font-size:clamp(54px,4.6vw,72px); line-height:1; color:var(--ink); font-variant-numeric:tabular-nums; display:block}
.bigstat .bl{font-size:13px; color:var(--stone); margin-top:8px; display:block; max-width:30ch}
.bigstat .bl b{color:var(--ink); font-weight:600}
@media (max-width:980px){.costgrid{grid-template-columns:1fr; gap:24px} .nzmap{display:none} .bigstat{margin-top:0}}
/* index scale pass: one big element per screen */
.h-lg{font-size:clamp(34px,4.6vw,56px); font-weight:300; letter-spacing:-.025em}
.stage .bign{position:absolute; top:14px; right:0; font-family:var(--f-display); font-size:62px; line-height:1; color:rgba(10,25,47,.07); pointer-events:none}
/* ---------- Visa route (index) ----------
The four common visa steps drawn as a connected route rather than four
identical cards: nodes on a line, the final node (residence, the goal
for most) filled navy with the gold dot. Same copy as the old cards. */
.route{display:grid; grid-template-columns:repeat(4,1fr); gap:36px; text-align:left}
.rstep{position:relative}
.rstep:not(:last-child)::after{content:""; position:absolute; top:23px; left:58px; width:calc(100% - 58px + 36px); height:2px; background:var(--line)}
.rnode{width:48px; height:48px; border-radius:50%; background:var(--card); border:2px solid var(--ink); display:grid; place-items:center; color:var(--ink); position:relative; z-index:1; margin-bottom:16px}
.rnode svg{width:22px; height:22px}
.rstep.goal .rnode{background:var(--teal-deep); border-color:var(--teal-deep); color:#F0F0F2}
.rstep.goal .rnode::after{content:""; position:absolute; top:-3px; right:-3px; width:12px; height:12px; border-radius:50%; background:var(--gold); border:2px solid var(--paper-2)}
.rstep h3{font-size:22px; margin:0 0 6px; text-wrap:balance}
.rstep p{font-size:14.5px; color:var(--ink-2); margin:0 0 10px}
.rstep .rnext{font-size:12.5px; color:var(--stone)}
.rstep .rnext b{color:var(--blue); font-weight:600}
@media (max-width:900px){
.route{grid-template-columns:1fr 1fr; gap:32px 28px}
.rstep:not(:last-child)::after{display:none}
}
@media (max-width:600px){
.route{grid-template-columns:1fr; gap:28px}
.rstep{padding-left:64px}
.rstep .rnode{position:absolute; left:0; top:0}
.rstep:not(:last-child)::after{display:block; top:56px; left:23px; width:2px; height:calc(100% - 56px + 28px)}
}
/* Stage-card icons: same line language as the guide spots, sized down.
stroke is currentColor so the "now" stage renders them in light ink. */
.stage .sic{width:30px; height:30px; display:block; margin-bottom:12px}
/* ---------- Cards ---------- */
.card{background:var(--card-fill); border:0; border-radius:var(--radius); padding:26px; box-shadow:none; position:relative; transition:transform .35s ease, background .2s}
.card:hover{background:var(--card-fill-2)}
/* On a band the fill would vanish into the ground, so the card goes white and
the ground is what separates it. Same on the navy statement band. */
.band .card,.band-teal .card{background:#FFFFFF}
.band .card:hover,.band-teal .card:hover{background:#FFFFFF; box-shadow:var(--shadow)}
.card h3{font-size:23px; margin:12px 0 8px}
.card p{font-size:15.5px; color:var(--ink-2)}
.card .meta{display:flex; justify-content:space-between; align-items:center; font-size:12.5px; color:var(--stone); margin-top:16px; padding-top:14px; border-top:1px solid var(--line)}
.card .meta b{color:var(--blue); font-weight:600}
.card .ico{width:44px; height:44px; border-radius:14px; background:var(--act-mist); display:grid; place-items:center; color:var(--act-deep)}
.card .ico svg{width:22px; height:22px}
/* photo-frame variant (polaroid) */
.frame{background:var(--card); border:1px solid var(--line); padding:12px 12px 16px; box-shadow:var(--shadow); position:relative}
.frame .ph{aspect-ratio:4/3; background:linear-gradient(135deg,var(--teal-mist),var(--paper-2)); display:grid; place-items:center; color:var(--teal); font-family:var(--f-display); font-style:italic; font-size:18px}
.frame .cap{font-family:var(--f-display); font-style:italic; font-size:16px; color:var(--ink); margin-top:12px}
.frame .cap small{display:block; font-family:var(--f-ui); font-style:normal; font-size:12px; color:var(--stone); margin-top:2px}
/* ---------- Data table ---------- */
/* overflow:hidden is ignored on
, so a radius here leaves the highlighted
column square at the corners. The radius, clip and lift live on .table-wrap. */
.data{width:100%; border-collapse:collapse; background:var(--card); border:0; font-size:15px}
.data th,.data td{padding:14px 18px; text-align:left; border-bottom:1px solid var(--line)}
.data th{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--stone); font-weight:600; background:var(--paper-2)}
.data tr:last-child td{border-bottom:0}
.data td:first-child{font-weight:600; color:var(--ink)}
.data .num{font-family:var(--f-display); font-size:19px; color:var(--ink); font-variant-numeric:tabular-nums}
.data .hi{color:var(--blue-deep); background:var(--blue-mist)}
/* A row where every city carries the same national figure. There is no cheapest
city to highlight, so the row says why rather than looking like a highlight
that failed to fire. Set by the table builders in index.html and
cost-of-living.html when max === min across the row. */
.data tr.flat td.num{color:var(--stone)}
.data .rowtag{display:inline-block; margin-left:9px; padding:2px 8px; border-radius:999px;
background:var(--card-fill); color:var(--stone); font-family:var(--f-ui);
font-size:10.5px; font-weight:500; letter-spacing:.055em; text-transform:uppercase;
vertical-align:.1em; white-space:nowrap}
.source{font-size:12.5px; color:var(--stone); margin:12px 0 22px; position:relative; padding-left:16px}
.source b{color:var(--blue); font-weight:600}
.source .dot{position:absolute; left:0; top:.52em; width:6px; height:6px; border-radius:50%; background:var(--gold)}
/* ---------- Quote / story ---------- */
.quote{background:var(--card); border-left:3px solid var(--gold); padding:22px 26px; border-radius:0 var(--radius) var(--radius) 0; box-shadow:var(--shadow); position:relative}
.quote p{font-family:var(--f-display); font-size:20px; line-height:1.45; color:var(--ink); margin:0 0 12px}
.quote cite{font-style:normal; font-size:13.5px; color:var(--stone)}
.quote cite b{color:var(--ink); font-weight:600}
/* ---------- Trust strip ---------- */
.trust{display:flex; flex-wrap:wrap; gap:14px 34px; align-items:center; justify-content:center; font-family:var(--f-display); font-size:19px; color:var(--stone); font-style:italic}
.trust span{white-space:nowrap}
.trust span::before{content:"·"; margin-right:34px; color:var(--line)}
.trust span:first-child::before{content:none}
/* ---------- Disclaimer ---------- */
.notice{border:0; border-left:4px solid var(--coral); background:var(--card-fill); padding:18px 22px; border-radius:var(--radius); font-size:14.5px; color:var(--ink-2)}
.notice b{color:var(--ink)}
.notice.teal{border-left-color:var(--blue)}
/* ---------- Newsletter ----------
No rules here on purpose. The signup form is rendered by beehiiv's loader
script (see the embed in index.html), which brings its own markup and its own
styles, so nothing we write in this file reaches the field or the button.
Change the form's look in the beehiiv form builder, not here. The old
.signup rules were removed 2026-08-29 after sitting dead since the embed
replaced the prototype form. #signup, the section id, is still live and its
ground colour is set at the top of this file. */
/* ---------- Footer ---------- */
footer{background:var(--ink); color:#A9B4C8; padding:56px 0 28px; font-size:14px}
footer .cols{display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr 1fr; gap:32px; margin-bottom:40px}
footer h4{color:#F0F0F2; font-size:13px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:14px}
footer a{color:#A9B4C8; display:block; margin-bottom:8px}
footer a:hover{color:var(--gold)}
/* The disclaimer link in the footer legal line is inline, unlike the nav-style
footer links above, which are display:block one-per-line. */
footer .legal a{display:inline; margin:0; color:inherit; text-decoration:underline; text-underline-offset:2px}
footer .legal a:hover{color:var(--gold)}
footer .brand .wordmark{color:#F0F0F2}
footer .legal{border-top:1px solid #22304A; padding-top:20px; font-size:12.5px; color:#8B95A8; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap}
@media (max-width:900px){footer .cols{grid-template-columns:1fr 1fr 1fr}}
@media (max-width:600px){footer .cols{grid-template-columns:1fr 1fr}}
/* ---------- Page header (inner pages) ---------- */
.page-head{padding:64px 0 40px; border-bottom:1px solid var(--line)}
.page-head h1{font-size:clamp(36px,4.4vw,54px)}
.crumbs{font-size:13px; color:var(--stone); margin-bottom:18px}
.crumbs a{color:var(--stone)} .crumbs a:hover{color:var(--act)}
/* Byline. A named human and a check date, in the first screen rather than in
a note at the foot of the page. Nobody scrolls to decide whether to trust
something. */
.byline{display:flex; flex-wrap:wrap; align-items:center; gap:0 12px; font-size:13.5px; color:var(--stone); margin-top:18px}
.byline b{color:var(--ink-2); font-weight:600}
.byline .sep{width:3px; height:3px; border-radius:50%; background:var(--gold); flex:none}
/* On a phone the row wraps to three lines anyway, so the dots would sit
stranded at the end of a line. Stack instead. */
@media (max-width:600px){.byline{display:block; line-height:1.55} .byline>*{display:block} .byline .sep{display:none}}
/* The sidebar sticks as one block. The TOC used to stick on its own, which
left the rest of that 240px column empty for the whole length of a guide. */
.two>aside{position:sticky; top:96px; align-self:start}
.toc{font-size:14px}
.tochead{font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--stone); font-weight:600; margin-bottom:12px}
.toc a{display:block; padding:6px 0 6px 14px; border-left:2px solid var(--line); color:var(--ink-2)}
.toc a:hover{border-color:var(--act); color:var(--ink)}
.toc a.on{border-color:var(--gold); color:var(--ink); font-weight:600}
.two{display:grid; grid-template-columns:240px 1fr; gap:56px}
/* Numbered steps. A procedure reads as a procedure when the numbers are
outside the text and you can see how many there are before you start. Only
for genuine sequences, where doing them out of order fails. Ordinary lists
stay bulleted. */
.steps{list-style:none; counter-reset:step; margin:22px 0 26px; padding:0; max-width:680px}
.steps li{counter-increment:step; position:relative; padding:0 0 22px 52px; margin:0}
.steps li:last-child{padding-bottom:0}
.steps li::before{content:counter(step); position:absolute; left:0; top:-1px; width:32px; height:32px; border-radius:50%; background:var(--blue-mist); color:var(--blue); font-family:var(--f-ui); font-size:14px; font-weight:600; display:flex; align-items:center; justify-content:center}
/* The rule connecting one step to the next, so the column reads as one run. */
.steps li:not(:last-child)::after{content:""; position:absolute; left:15.5px; top:36px; bottom:6px; width:1px; background:var(--line)}
@media (max-width:600px){.steps li{padding-left:44px} .steps li::before{width:28px; height:28px; font-size:13px} .steps li:not(:last-child)::after{left:13.5px; top:32px}}
.alsoread{margin-top:34px; padding-top:20px; border-top:1px solid var(--line)}
.alsoread a{display:block; font-size:14px; line-height:1.4; color:var(--ink-2); margin-bottom:12px}
.alsoread a:hover{color:var(--act)}
.alsoread a .kind{display:block; font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--stone); font-weight:600; margin-bottom:2px}
@media (max-width:900px){.two{grid-template-columns:1fr} .two>aside{position:static} .toc{display:flex; flex-wrap:wrap; gap:6px 18px} .toc .tochead{width:100%; margin-bottom:4px} .alsoread{margin-top:24px}}
/* Reading measure. The column was running about 82 characters a line at
20px, well past the 60-75 where the eye still finds the next line reliably.
Tables, callouts and the source lines are exempt: they are scanned, not
read in sequence, and they need the width. */
.prose>p,.prose>ul,.prose>ol{max-width:680px}
.prose h2{font-size:32px; margin-top:48px; text-wrap:balance}
.prose h3{text-wrap:balance}
.prose h3{margin-top:32px}
.prose ul{padding-left:20px}
.prose li{margin-bottom:8px}
/* A callout is a note, not evidence, so it does not wear the blue. Warm
neutral ground; the blue lives in the bold lead-in only. */
.callout{background:var(--card-fill); border:0; border-radius:var(--radius); padding:20px 24px; margin:24px 0}
.callout b{color:var(--blue-deep)}
/* "Why Custailo exists" illustrated scene: same line language as the guide
spots, drawn in paper stroke on the navy band. Decorative only. */
/* Faint map ground on the navy band. The same coastline the cost table uses,
at low opacity behind the type, so the section is unmistakably about one
country without a single extra word. Decoration only: it sits behind
everything, ignores the pointer, and carries no meaning a reader needs. */
.band-teal.mapped{position:relative; overflow:hidden}
.band-teal.mapped::before{
content:""; position:absolute; top:50%; right:-40px; transform:translateY(-50%);
width:520px; height:720px; pointer-events:none;
background:url("nz-outline.svg") no-repeat center/contain; opacity:.05;
}
.band-teal.mapped > .wrap{position:relative}
@media (max-width:1100px){.band-teal.mapped::before{right:-160px; opacity:.04}}
@media (max-width:600px){.band-teal.mapped::before{display:none}}
.why-row{display:flex; align-items:center; gap:56px; margin-bottom:44px}
.why-illo{flex:none; width:clamp(170px,20vw,260px); color:#F0F0F2; opacity:.9; margin-left:auto}
@media (max-width:860px){.why-illo{display:none}}
/* ---------- Guide spot illustrations ----------
Line-drawn spots in the mark's language: navy stroke, round caps, one
gold dot each (rhyming with the Held mark's dot and the i-dot). Inline
SVG in each guide's page-head; aria-hidden, purely decorative. */
.head-row{display:flex; justify-content:space-between; align-items:center; gap:40px}
.head-row>div{flex:1; min-width:0}
.spot{width:104px; height:104px; flex:none; color:var(--ink)}
/* Page-head place illustration (cost-of-living, Auckland). Held language: currentColor stroke, one gold dot. Stands in until a photo is chosen (Raj, 11 Sep 2026). */
.head-illo{display:flex; align-items:flex-end; gap:48px}
.head-illo>div{flex:1; min-width:0}
.illo-place{width:min(360px,38%); flex:none; color:var(--ink); fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; margin-bottom:6px}
.illo-place .d{fill:var(--gold); stroke:none}
@media (max-width:760px){.head-illo{flex-direction:column; align-items:flex-start; gap:18px}.illo-place{width:100%; max-width:260px; margin:0}}
@media (max-width:600px){.spot{width:64px; height:64px; align-self:flex-start; margin-top:34px}}
/* mobile: tables scroll inside their own box */
.table-wrap{overflow:hidden; overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--radius-lg); border:1px solid var(--line); box-shadow:none}
.table-wrap .data{min-width:560px}
body{overflow-x:hidden}
.grid>*,.two>*{min-width:0}
@media (max-width:600px){.construct,.type-row,.dd{grid-template-columns:1fr !important}}
@media (max-width:1200px){.hero-visual{margin-top:8px} .hero-visual .halftone{display:none}}
/* ============================================================
COST CALCULATOR (cost-of-living.html)
Ported from the original Replit build's CalculatorPage.tsx.
Data lives in cities.js — never hardcode figures here.
============================================================ */
.calc{display:grid; grid-template-columns:1.35fr .65fr; gap:40px; align-items:start}
@media (max-width:980px){.calc{grid-template-columns:1fr; gap:28px}}
.calc-steps{display:flex; flex-direction:column; gap:20px}
.calc-panel{background:var(--card-fill); border:0; border-radius:16px; padding:22px 24px}
.calc-panel > .step{display:block; font-family:var(--f-ui); font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--stone); margin-bottom:14px}
.chips{display:flex; flex-wrap:wrap; gap:9px}
.chip-btn{
font-family:var(--f-ui); font-size:14px; font-weight:600; padding:9px 15px; border-radius:999px;
border:1.5px solid var(--line); background:transparent; color:var(--ink-2); cursor:pointer; transition:.15s;
}
.chip-btn:hover{border-color:var(--act); color:var(--act)}
.chip-btn[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:var(--paper)}
.chip-btn:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
.sliders{display:flex; flex-direction:column; gap:24px}
.sld .row{display:flex; justify-content:space-between; align-items:baseline; gap:14px; margin-bottom:9px}
.sld label{font-family:var(--f-ui); font-weight:600; color:var(--ink); font-size:15px}
.sld .val{font-family:var(--f-ui); font-weight:700; font-size:18px; color:var(--blue); font-variant-numeric:tabular-nums}
.sld .ends{display:flex; justify-content:space-between; font-size:12px; color:var(--stone); margin-top:5px; font-variant-numeric:tabular-nums}
input[type=range]{-webkit-appearance:none; appearance:none; width:100%; height:22px; background:transparent; cursor:pointer; display:block}
input[type=range]:focus{outline:none}
input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--gold-mist), 0 0 0 5px var(--gold)}
input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px var(--gold-mist), 0 0 0 5px var(--gold)}
input[type=range]::-webkit-slider-runnable-track{height:6px; border-radius:999px;
/* --fill is set by the calculator script; the gradient paints the track
teal up to the thumb. Fallback 0% keeps an unscripted slider sane. */
background:linear-gradient(to right, var(--act) var(--fill,0%), var(--act-mist) var(--fill,0%))}
input[type=range]::-moz-range-track{height:6px; border-radius:999px; background:var(--act-mist)}
input[type=range]::-moz-range-progress{height:6px; border-radius:999px; background:var(--act)}
input[type=range]::-webkit-slider-thumb{
-webkit-appearance:none; appearance:none; width:20px; height:20px; margin-top:-7px;
border-radius:50%; background:var(--gold); border:2.5px solid var(--card);
box-shadow:0 1px 4px rgba(10,25,47,.35);
}
input[type=range]::-moz-range-thumb{
width:20px; height:20px; border-radius:50%; background:var(--gold);
border:2.5px solid var(--card); box-shadow:0 1px 4px rgba(10,25,47,.35);
}
/* results */
.calc-out{position:sticky; top:96px; background:#FFFFFF; border:1px solid var(--line); border-top:4px solid var(--ink); border-radius:var(--radius); overflow:hidden}
@media (max-width:980px){.calc-out{position:static}}
.calc-out .headline{background:var(--paper-2); border-bottom:1px solid var(--line); padding:22px; text-align:center}
.calc-out .headline .k{font-family:var(--f-ui); font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--stone); display:block; margin-bottom:6px}
.calc-out .headline .v{font-family:var(--f-display); font-size:46px; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums}
.calc-out .rows{padding:20px 22px}
.calc-out .r{display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:7px 0}
.calc-out .r span{color:var(--ink-2); font-size:15px}
.calc-out .r b{font-size:19px; color:var(--ink); font-variant-numeric:tabular-nums}
/* ---------- Currency toggle (calculator output) ---------- */
.fx{border-top:1px solid var(--line); padding:14px 22px}
.fx-toggle{display:flex; align-items:center; gap:6px; width:100%; text-align:left; background:none; border:0; padding:0; font-family:var(--f-ui); font-size:13.5px; font-weight:600; color:var(--act); cursor:pointer}
.fx-toggle:hover{color:var(--act-deep)}
.fx-toggle:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
.fx-toggle .arrow{transition:transform .15s}
.fx-toggle[aria-expanded="true"] .arrow{transform:rotate(90deg)}
.fx-panel{margin-top:12px}
#fx-currency{width:100%; padding:9px 12px; border:1.5px solid var(--line); border-radius:var(--radius); font:inherit; font-size:14px; background:var(--card); color:var(--ink)}
#fx-currency:focus-visible{outline:2px solid var(--gold); outline-offset:1px}
.fx-out{margin-top:10px}
.fx-amt{font-family:var(--f-display); font-size:26px; color:var(--ink); font-variant-numeric:tabular-nums; display:block}
.fx-note{font-size:12px; line-height:1.5; color:var(--stone); margin:6px 0 0}
.fx-retry{background:none; border:0; padding:0; color:var(--act); font:inherit; font-weight:600; text-decoration:underline; cursor:pointer}
/* Hint text under a calculator panel's controls. Small, but it carries the
visa-conditions warning in the work panel, so it is ink-2 and not stone. */
.panel-hint{margin:14px 0 0; font-size:12.5px; line-height:1.55; color:var(--ink-2)}
.panel-hint b{font-weight:600}
/* Study mode's year view. Sits under the weekly rows in the same output card,
separated by a rule rather than its own box, because it is the same
calculation continued rather than a second result. */
.yearbox{padding:4px 22px 20px; border-top:1px solid var(--line); margin-top:4px}
.yr-head{font-family:var(--f-ui); font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--stone); margin:18px 0 8px}
.yearbox .r{display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:7px 0}
.yearbox .r span{flex:1 1 auto}
.yearbox .r span{color:var(--ink-2); font-size:15px}
.yearbox .r b{font-size:19px; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap}
.yearbox .r.tot{border-top:1px solid var(--line); margin-top:6px; padding-top:12px}
.yearbox .r.tot b{font-weight:700}
.yearbox .r.earn b{color:var(--blue)}
/* The one number a reader came for, so it gets the weight and the rule. */
.yearbox .r.net{border-top:2px solid var(--ink); margin-top:8px; padding-top:13px}
.yearbox .r.net span{color:var(--ink); font-weight:600}
.yearbox .r.net b{font-family:var(--f-display); font-size:29px; line-height:1.1}
.yearbox .r.sub{padding-top:2px}
.yearbox .r.sub span,.yearbox .r.sub b{font-size:13.5px; color:var(--stone); font-weight:400}
.calc-note{margin:16px 22px 22px; padding:13px 15px; background:var(--paper-2); border-radius:7px; font-size:12.5px; line-height:1.5; color:var(--ink-2)}
.calc-foot{font-size:12.5px; color:var(--stone); text-align:center; margin:14px 0 0; line-height:1.5}
/* Short screens. A 13" laptop gives about 790px of viewport, and the hero was
822px, so the third stat card was cut in half at the fold and there was a
large empty band above the headline. This trims the hero to fit without
touching taller monitors, where the extra air is worth having. Keyed to
viewport height, not width: a 1440px window on a 13" screen and on a 27"
one are the same layout but not the same amount of room. */
@media (min-width:901px) and (max-height:860px){
.hero{padding:44px 0 40px}
.hero .actions{margin:24px 0 20px}
.hero-visual{gap:12px}
.pcard{padding:14px 18px}
.pcard .v{font-size:29px}
.pcard .s{margin-top:4px}
/* The same squeeze on the rest of the page furniture. The 92px section
rhythm was set against a tall monitor; on a laptop it spends a third of
the screen on air before anything is read. */
section{padding:72px 0}
.page-head{padding:40px 0 32px}
}
/* Smaller laptops and short windows again. Same idea, one step further. */
@media (min-width:901px) and (max-height:760px){
.hero{padding:30px 0 28px}
.hero .actions{margin:18px 0 14px}
.hero-visual{gap:9px}
.pcard{padding:9px 16px}
.pcard .v{font-size:27px; margin:4px 0 3px}
.pcard .src{margin-top:8px; padding-top:8px}
section{padding:60px 0}
.page-head{padding:32px 0 26px}
}
/* Related guides on the three pillar pages (visas, cost-of-living, study-work).
Lighter than the .gcard on guides.html: kind chip on top, no spot icon, so the
pillar pages point at guides without competing with the guides index itself. */
.relguide{display:flex; flex-direction:column}
.relguide .kind{font-size:11.5px; letter-spacing:.055em; text-transform:uppercase; color:var(--stone); font-weight:600}
.relguide h3{font-size:19px; line-height:1.3; margin:9px 0 8px; color:var(--ink)}
.relguide p{flex:1; margin:0; font-size:14.5px; line-height:1.6}
.relguide .go{margin-top:16px; color:var(--act); font-weight:600; font-size:13.5px}
.relguide:hover{transform:translateY(-2px)}
.relguide:hover .go{color:var(--act-deep)}
/* ---------------------------------------------------------------
Donut: where the gross pay goes (take-home-pay.html).
Four arcs on one circle, drawn with stroke-dasharray so no library
is needed. `pathLength="100"` makes every dash value a percentage,
the same trick the header mark uses for its draw-in animation.
GEOMETRY GOTCHA: the stroke straddles the radius, so the ring's outer
edge is r + (stroke-width / 2) from the centre. With r=16.5 in a
42x42 box the centre is at 21, so stroke-width must stay at or under
9 or the ring is silently clipped square on all four sides. It was
15 for an hour once and that is exactly what went wrong.
The band is deliberately thin against a wide hole. At stroke-width 9
on r=15.5 it was a pie with a small hole punched in it, which is the
heaviest a donut can look; the number now lives in the hole instead.
Colours are Raj's call, 11 Sep 2026: teal for the money you keep,
navy for income tax, the gold family for the rest.
--------------------------------------------------------------- */
.donut{display:flex; align-items:center; gap:20px; padding:22px 22px 6px}
/* .calc-out carries no padding of its own: every child supplies its own 22px
(see .rows, .yearbox, .calc-note). A donut with only a margin sat flush to
the panel edge while every row beside it was indented. */
.donut-ring{position:relative; flex:0 0 auto; width:140px; height:140px}
.donut svg{display:block; width:100%; height:100%; transform:rotate(-90deg)}
.donut circle{fill:none; stroke-width:5.2; stroke-linecap:butt}
.donut .d-net{stroke:var(--act)}
.donut .d-tax{stroke:var(--blue-deep)}
.donut .d-acc{stroke:var(--gold-deep)}
.donut .d-ks {stroke:var(--gold)}
.donut .d-track{stroke:var(--line)}
/* No separator between the arcs (Raj, 11 Sep 2026). White seams cutting each
boundary were tried and taken off: the ring reads as one continuous measure
of one thing, and the swatches on the rows below already say which colour is
which. If the two golds ever need pulling apart, do it with the colours, not
with a cut. */
/* Hairline at the inner edge, so the hole has an edge and the figure inside it
sits in something instead of floating in white. */
.donut .d-rail{stroke:var(--line); stroke-width:.7}
/* The figure lives in the hole. The hole is 26 of the 42 viewBox units across,
about 85px at this size, which holds three characters of display type and
not four, so the sentence stays outside the ring. */
.donut .dp{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
font-family:var(--f-display); font-size:33px; font-weight:300; letter-spacing:-.02em;
color:var(--act); font-variant-numeric:tabular-nums; pointer-events:none}
.donut .dl{font-family:var(--f-ui); font-size:13.5px; line-height:1.5; color:var(--stone); margin:0; min-width:0}
@media (prefers-reduced-motion:no-preference){
/* The arcs travel to their new shares rather than snapping, which is what
makes dragging a slider legible: you see which piece grew. */
.donut .d-net,.donut .d-tax,.donut .d-acc,.donut .d-ks{
transition:stroke-dasharray .5s cubic-bezier(.4,0,.2,1), stroke-dashoffset .5s cubic-bezier(.4,0,.2,1)}
}
/* Swatch tying a breakdown row to its arc. Sits on the row label so the
donut needs no legend of its own, which would restate the same four
numbers a third time. */
.sw{display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:7px; vertical-align:baseline; flex:0 0 auto}
.sw.s-tax{background:var(--blue-deep)}
.sw.s-acc{background:var(--gold-deep)}
.sw.s-ks {background:var(--gold)}
@media (max-width:400px){ .donut{gap:16px; padding:20px 18px 6px} .donut-ring{width:118px; height:118px} .donut .dp{font-size:27px} }
/* 2026-09-11: phone-length pass. The hidden-costs cards on cost-of-living became a
list on the navy band; six white cards stacked to two phone screens on their own. */
.hidden-list{list-style:none; margin:0; padding:0; max-width:64ch; display:grid; gap:14px}
.hidden-list li{padding-left:18px; position:relative; font-size:15.5px; line-height:1.6; color:#C3CEDF}
.hidden-list li::before{content:""; position:absolute; left:0; top:.62em; width:7px; height:7px; border-radius:50%; background:var(--gold)}
.hidden-list li b{color:#F0F0F2; font-weight:600}
/* Phone tables (2026-09-11). .fit: a narrow table that should never scroll sideways
(the setup-cost and fee tables, whose last column is the point). .stack: a prose
table that turns into one block per row below 600px, each cell labelled from its
data-label, so five narrow wrapping columns become one readable column. */
.table-wrap .data.fit{min-width:0}
.data.fit th,.data.fit td{padding:12px 14px}
@media (max-width:600px){
.table-wrap .data.stack{min-width:0}
.data.stack thead{display:none}
.data.stack tr{display:block; padding:14px 18px; border-bottom:1px solid var(--line)}
.data.stack tr:last-child{border-bottom:0}
.data.stack td{display:block; padding:2px 0; border:0}
.data.stack td:first-child{font-size:17px; padding-bottom:2px}
.data.stack td[data-label]::before{content:attr(data-label); display:block; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--stone); font-weight:600; margin-top:8px}
}