/* self-hosted so the site makes no request to Google */
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url(/f-aae031ec.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url(/f-f42b865e.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url(/f-a4d70ea0.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/f-68f645c6.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(/f-6b66c741.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(/f-e0d61f6d.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(/f-5197a7ae.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/f-3ae62151.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/f-35c2a72b.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url(/f-e67f8fef.woff2) format('woff2')}





/* ---------- WHITE · BLACK · GOLD — light (default) ---------- */
:root{
  --void:#FFFFFF;
  --ground:#F7F6F4;
  --raise:#FFFFFF;
  --raise-2:#F1EFEC;
  --ink:#151419;
  --ink-2:#55545E;
  --ink-3:#86858F;
  --gold:#876700;            /* text gold — fully saturated, clears AA on every light surface */
  --gold-rich:#BC8C00;       /* display gold — large type and fills, 3:1 on white */
  --gold-lux:#D4AF37;        /* metallic gold — button faces, glows, tints only */
  --gold-hi:#E8C86B;         /* light gold — only ever used on ink surfaces */
  --gold-dim:rgba(212,175,55,.17);
  --hair:rgba(196,154,20,.44);
  --line:rgba(21,20,25,.13);
  --btn:#151419;             /* black does the heavy lifting */
  --btn-fg:#FFFFFF;
  --accent-fg:#141109;       /* ink on gold, never white */
  --pass:#1F7A52;
  --watch:#96690C;
  --out:#B02F3F;
  --grain:.03;
  --glow:rgba(212,175,55,.46);
  --dot-live:188,140,0;
  --dot-dead:21,20,25;
  --dot-dead-a:.14;
  --dot-final:212,175,55;
  --halo:rgba(212,175,55,.30);
  --map-fill:rgba(21,20,25,.030);
  --map-line:rgba(21,20,25,.16);
  --ink-band:#151419;
  --ink-band-2:#201E26;
  --ink-band-fg:#F5F3F6;
  --ink-band-fg2:#A9A7B2;
  --display:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --dw:700;            /* display weight */
  --dtrack:-.038em;    /* display tracking */
  --dlh:.98;           /* display line-height */
  --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --gut:clamp(20px,4vw,56px);
}
/* display face options — switchable in the prototype strip */
/* ---------- DARK ---------- */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --void:#0C0B0F;--ground:#131217;--raise:#1A1921;--raise-2:#211F29;
    --ink:#F3F1F5;--ink-2:#AAA8B4;--ink-3:#7A7883;
    --gold:#F0CE6A;--gold-rich:#F5D77A;--gold-lux:#FFD966;--gold-hi:#FFDE8A;--gold-dim:rgba(255,217,102,.17);
    --hair:rgba(255,217,102,.34);--line:rgba(243,241,245,.11);
    --btn:#F3F1F5;--btn-fg:#151419;--accent-fg:#141109;
    --pass:#5FC08C;--watch:#E0B155;--out:#E08B79;
    --grain:.05;--glow:rgba(255,217,102,.42);
    --dot-live:245,215,122;--dot-dead:150,148,160;--dot-dead-a:.12;
    --dot-final:255,217,102;--halo:rgba(255,217,102,.22);
  --map-fill:rgba(245,215,122,.055);--map-line:rgba(245,215,122,.20);
    --ink-band:#08070B;--ink-band-2:#151419;--ink-band-fg:#F3F1F5;--ink-band-fg2:#AAA8B4;
  }
}
:root[data-theme="dark"]{
  --void:#0C0B0F;--ground:#131217;--raise:#1A1921;--raise-2:#211F29;
  --ink:#F3F1F5;--ink-2:#AAA8B4;--ink-3:#7A7883;
  --gold:#F0CE6A;--gold-rich:#F5D77A;--gold-lux:#FFD966;--gold-hi:#FFDE8A;--gold-dim:rgba(255,217,102,.17);
  --hair:rgba(255,217,102,.34);--line:rgba(243,241,245,.11);
  --btn:#F3F1F5;--btn-fg:#151419;--accent-fg:#141109;
  --pass:#5FC08C;--watch:#E0B155;--out:#E08B79;
  --grain:.05;--glow:rgba(255,217,102,.42);
  --dot-live:245,215,122;--dot-dead:150,148,160;--dot-dead-a:.12;
  --dot-final:255,217,102;--halo:rgba(255,217,102,.22);
  --map-fill:rgba(245,215,122,.055);--map-line:rgba(245,215,122,.20);
  --ink-band:#08070B;--ink-band-2:#151419;--ink-band-fg:#F3F1F5;--ink-band-fg2:#AAA8B4;
}
/* ---------- ACCENT: MAGENTA (kept as a comparison, overrides gold above) ---------- */
@media (prefers-color-scheme:dark){
}


*{box-sizing:border-box}
body{
  margin:0;background:var(--void);color:var(--ink);
  font-family:var(--body);font-size:16px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:200;opacity:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:var(--dw);line-height:1.04;letter-spacing:-.022em;text-wrap:balance}
p{margin:0}
:focus-visible{outline:1px solid var(--gold);outline-offset:3px}
.tn{font-variant-numeric:tabular-nums}


.nav{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:100;
  background:color-mix(in srgb,var(--void) 78%,transparent);
  backdrop-filter:blur(16px) saturate(140%);border-bottom:1px solid var(--line)
}
/* 1240 was sized for the old 11px nav. The larger type needs more room, and a
   nav bar wider than the 1140 content column is normal — what must not happen
   is the primary button wrapping to a second row. */
.nav-in{max-width:1360px;margin:0 auto;padding:14px var(--gut);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.brand{
  background:none;border:0;padding:0;cursor:pointer;color:var(--ink);margin-right:auto;
  display:flex;align-items:baseline;gap:10px;font-family:var(--display);font-size:21px;font-weight:500;letter-spacing:-.02em
}
.brand i{
  font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold);border-left:1px solid var(--hair);padding-left:10px;align-self:center
}
.nav ul{display:flex;gap:1px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
/* The nav was set at 11px in the faintest ink on the scale, which made the
   whole bar recede — the one element on every page whose job is to show people
   what else is here. Links now sit a step larger and a step darker, so the row
   reads as navigation rather than as fine print. */
.lnk{
  background:none;border:0;font-family:var(--mono);font-size:12px;letter-spacing:.085em;text-transform:uppercase;
  color:var(--ink-2);padding:11px 12px;cursor:pointer;position:relative;transition:color .2s,background .2s
}
.lnk:hover{color:var(--ink);background:color-mix(in srgb,var(--gold) 7%,transparent)}
/* The current page carried gold text and a 1px hairline, which disappeared at
   arm's length. Gold, heavier, on a tinted block with a 2px rule under it. */
.lnk[aria-current="page"]{color:var(--gold-rich);font-weight:500;
  background:color-mix(in srgb,var(--gold) 13%,transparent)}
.lnk[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:0;
  height:2px;background:var(--gold-rich)}
.themetog{
  background:none;border:1px solid var(--line);color:var(--ink-3);font-family:var(--mono);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;padding:11px 13px;cursor:pointer;transition:.2s;margin-right:8px
}
.themetog:hover{border-color:var(--hair);color:var(--gold)}
/* black carries the buttons; gold is reserved for the primary action */
.btn{
  display:inline-flex;align-items:center;gap:9px;background:var(--btn);color:var(--btn-fg);border:1px solid var(--btn);
  font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:500;
  padding:12px 20px;cursor:pointer;text-decoration:none;line-height:1;transition:box-shadow .25s,transform .25s,background .2s
}
.btn:hover{box-shadow:0 5px 26px rgba(21,20,25,.18);transform:translateY(-1px)}
.btn.pink{background:var(--gold-lux);border-color:var(--gold-rich);color:var(--accent-fg)}
.btn.pink:hover{box-shadow:0 0 0 1px var(--gold-rich),0 6px 30px var(--glow)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line);box-shadow:none}
.btn.ghost:hover{border-color:var(--gold);color:var(--gold);box-shadow:none;transform:translateY(-1px)}
.btn.sm{padding:11px 17px;font-size:11px}
/* Below this the row runs out of width and "Book a call" drops to a second
   line under the logo, which looks like a fault. The screen has its own nav
   link two items along, so the secondary button is the one to lose. */
@media(max-width:1220px){.nav .btn.sm.ghost{display:none}}
.band.ink .btn{background:var(--ink-band-fg);color:var(--ink-band);border-color:var(--ink-band-fg)}
.band.ink .btn.pink{background:var(--gold-lux);border-color:var(--gold-lux);color:var(--accent-fg)}

.wrap{max-width:1240px;margin:0 auto;padding-inline:var(--gut)}
.narrow{max-width:760px;margin:0 auto;padding-inline:var(--gut)}
section.band{padding-block:clamp(64px,9vw,132px);position:relative}
.band.raise{background:var(--ground)}
.band.raise2{background:var(--raise-2)}
.band.ink{background:var(--ink-band);color:var(--ink-band-fg)}
.band.ink h2,.band.ink h3{color:var(--ink-band-fg)}
.band.ink .lede,.band.ink p{color:var(--ink-band-fg2)}
.rule{height:1px;background:linear-gradient(90deg,transparent,var(--hair) 18%,var(--hair) 82%,transparent)}

.eyebrow{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);
  display:flex;align-items:center;gap:12px;margin-bottom:26px
}
.eyebrow::after{content:"";height:1px;flex:1;max-width:120px;background:var(--hair)}
h2.sec{font-size:clamp(32px,5vw,58px);margin-bottom:22px;max-width:18ch;line-height:var(--dlh);letter-spacing:var(--dtrack)}
h3{font-size:20px;letter-spacing:-.01em}
.lede{font-size:clamp(17px,1.5vw,20px);color:var(--ink-2);max-width:56ch;line-height:1.6}
/* the lede butted straight against the h1 on /track-record, /method,
   /about and /intelligence — zero gap at every width. */
h1+.lede{margin-top:20px}

.hero{position:relative;overflow:hidden;background:var(--void)}
.hero::before{
  content:"";position:absolute;width:900px;height:900px;right:-280px;top:-380px;border-radius:50%;
  background:radial-gradient(circle,var(--gold-dim),transparent 62%);pointer-events:none
}
.hero-in{
  max-width:1240px;margin:0 auto;padding:clamp(40px,5vw,64px) var(--gut) clamp(36px,4.4vw,56px);
  display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(32px,5vw,72px);align-items:center;position:relative
}
.hero h1{font-size:clamp(38px,5.6vw,72px);line-height:var(--dlh);letter-spacing:var(--dtrack)}
.hero h1 em{font-style:normal;color:var(--gold-rich);display:block}
.hero .sub{margin-top:22px;font-size:clamp(15.5px,1.3vw,17.5px);color:var(--ink-2);max-width:48ch;line-height:1.58}
.hero .sub b{color:var(--ink);font-weight:600}
.hero .acts{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));border-top:1px solid var(--line);margin-top:30px}
.stat{padding:16px 22px 2px 0}
.stat .v{font-family:var(--display);font-weight:var(--dw);font-size:clamp(28px,3.2vw,38px);line-height:1;color:var(--gold-rich);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.stat .k{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-top:9px}

.screenbox{position:relative;border:1px solid var(--line);background:var(--raise);padding:20px}
.screenbox::before,.screenbox::after{content:"";position:absolute;width:9px;height:9px;border:1px solid var(--gold)}
.screenbox::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.screenbox::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
#dots{display:block;width:100%;height:auto}
svg{display:block;max-width:100%;height:auto}
.svgnum{font-family:var(--display);font-weight:var(--dw);letter-spacing:-.02em}
.screenlegend{
  display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line)
}
.screenlegend b{color:var(--gold);font-weight:500}
.jump{
  background:transparent;border:0;border-bottom:1px solid var(--hair);color:var(--gold);
  font:inherit;letter-spacing:.12em;text-transform:uppercase;padding:0 0 2px;cursor:pointer;
  transition:.2s;white-space:nowrap
}
.jump:hover{border-bottom-color:var(--gold);color:var(--gold-rich)}
.jump:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
#dots{cursor:pointer}
@media(max-width:560px){.screenlegend{justify-content:flex-start}.jump{width:100%;text-align:left;margin-top:4px}}
.stagelabel{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
  display:flex;align-items:baseline;gap:26px;margin-bottom:14px;min-height:18px
}
/* The gap is 26px, not the 10px it reads as needing at rest. The number pulses
   to scale(1.22) from its left edge, and at the widest value it shows (15,342,
   79px wide) that throws the glyphs 17.5px right — straight through a 10px gap
   and into the label. transform is paint-only, so the room has to be reserved
   in the layout: 17.5px of overshoot plus roughly 8px of actual whitespace. */
.stagelabel .n{font-family:var(--display);font-weight:var(--dw);font-size:25px;color:var(--gold-rich);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* the payoff: when the count lands on the shortlist figure, flash it twice and
   hold, so the eye is on the number that actually matters. Colour stays
   --gold-rich — --gold-lux would drop below 3:1 on the light surface. */
.stagelabel .n{display:inline-block;transform-origin:left bottom}
#dotstage{transition:color .45s ease,font-weight .45s ease}
.stagelabel.land .n{animation:landPulse 1.6s ease-out 1 both}
.stagelabel.land #dotstage{color:var(--ink);font-weight:700}
/* intermediate stages: one lighter pulse, and the label brightens but does not
   bold — bold is held back so the final figure still reads as the payoff. */
.stagelabel.mark .n{animation:markPulse .8s ease-out 1}
.stagelabel.mark #dotstage{color:var(--ink)}
/* The label flashes on the same beats as the number. It is animated on colour
   and glow only, never transform: the row is a baseline-aligned flex, so
   scaling 11px mono caps would shove the line sideways on every pulse. Each
   keyframe set ends on the colour its own .mark / .land rule holds, so the
   animation hands back to the rule with no jump. */
.stagelabel.mark #dotstage{animation:markLabel .8s ease-out 1}
.stagelabel.land #dotstage{animation:landLabel 1.6s ease-out 1}
@keyframes markLabel{
  0%{color:var(--ink-2);text-shadow:0 0 0 rgba(0,0,0,0)}
  30%{color:var(--gold-rich);text-shadow:0 0 14px var(--gold-dim)}
  100%{color:var(--ink);text-shadow:0 0 0 rgba(0,0,0,0)}
}
@keyframes landLabel{
  0%{color:var(--ink-2);text-shadow:0 0 0 rgba(0,0,0,0)}
  16%{color:var(--gold-rich);text-shadow:0 0 20px var(--gold-dim)}
  34%{color:var(--ink);text-shadow:0 0 6px var(--gold-dim)}
  52%{color:var(--gold-rich);text-shadow:0 0 16px var(--gold-dim)}
  70%{color:var(--ink);text-shadow:0 0 8px var(--gold-dim)}
  100%{color:var(--ink);text-shadow:0 0 0 rgba(0,0,0,0)}
}
@media(prefers-reduced-motion:reduce){
  .stagelabel.mark #dotstage,.stagelabel.land #dotstage{animation:none}
}
@keyframes markPulse{
  0%{transform:scale(1);text-shadow:0 0 0 rgba(0,0,0,0)}
  30%{transform:scale(1.14);text-shadow:0 0 18px currentColor}
  100%{transform:scale(1);text-shadow:0 0 0 rgba(0,0,0,0)}
}
@media(prefers-reduced-motion:reduce){.stagelabel.mark .n{animation:none}}
@keyframes landPulse{
  0%{transform:scale(1);text-shadow:0 0 0 rgba(0,0,0,0)}
  16%{transform:scale(1.22);text-shadow:0 0 26px currentColor}
  34%{transform:scale(1);text-shadow:0 0 10px var(--gold-dim)}
  52%{transform:scale(1.13);text-shadow:0 0 20px currentColor}
  70%{transform:scale(1);text-shadow:0 0 12px var(--gold-dim)}
  100%{transform:scale(1);text-shadow:0 0 18px var(--gold-dim)}
}
@media(prefers-reduced-motion:reduce){.stagelabel.land .n{animation:none;text-shadow:0 0 18px var(--gold-dim)}}

.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:clamp(28px,4vw,60px);align-items:start}
.numlist{counter-reset:n;display:grid}
.numrow{
  counter-increment:n;display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,3vw,38px);
  padding:26px 0;border-top:1px solid var(--line);align-items:start;transition:background .3s
}
.numrow:last-child{border-bottom:1px solid var(--line)}
.numrow::before{
  content:counter(n,decimal-leading-zero);font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  color:var(--gold);padding-top:7px;opacity:.8
}
.numrow:hover{background:linear-gradient(90deg,var(--gold-dim),transparent 55%)}
.numrow h3{font-size:clamp(20px,2.2vw,27px);margin-bottom:8px}
.numrow p{color:var(--ink-2);font-size:15.5px;max-width:62ch}
.band.ink .numrow p{color:var(--ink-band-fg2)}

.tri{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.tri>div{background:var(--raise);padding:clamp(24px,3vw,34px)}
.tri h3{font-size:22px;margin-bottom:10px}
.tri p{color:var(--ink-2);font-size:15px}
.tri .mk{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}

.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;align-items:center}
.filters .fl{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-right:6px}
.fbtn{
  background:transparent;border:1px solid var(--line);color:var(--ink-2);font-family:var(--mono);
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:8px 13px;cursor:pointer;transition:.2s
}
.fbtn:hover{border-color:var(--hair);color:var(--ink)}
.fbtn[aria-pressed="true"]{background:var(--gold-lux);border-color:var(--gold-rich);color:var(--accent-fg)}
.tablewrap{overflow-x:auto;border:1px solid var(--line);background:var(--raise)}
table{border-collapse:collapse;width:100%;min-width:620px;font-size:14px}
th,td{text-align:left;padding:15px 18px;border-bottom:1px solid var(--line)}
th{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);
  font-weight:400;background:var(--ground)
}
tbody tr{transition:background .2s,opacity .3s}
tbody tr:hover{background:var(--gold-dim)}
tbody tr:last-child td{border-bottom:0}
td.num{text-align:right;font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums}
td.name{font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:-.015em}
tr.dim{opacity:.28}
.chip{
  display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;padding:4px 10px;border:1px solid currentColor;white-space:nowrap
}
.chip::before{content:"";width:5px;height:5px;background:currentColor;border-radius:50%}
.chip.pass{color:var(--pass)}
.chip.watch{color:var(--watch)}
.chip.out{color:var(--out)}
.miss{color:var(--out)}

.locked{
  border:1px solid var(--hair);background:linear-gradient(120deg,var(--gold-dim),transparent 70%);
  padding:clamp(24px,3vw,34px);display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start;margin-top:34px
}
.locked .key{font-family:var(--display);font-size:32px;color:var(--gold-rich);line-height:1}
.locked p{color:var(--ink-2);font-size:15.5px;max-width:70ch}
.locked b{color:var(--ink);font-weight:600}

.pull{font-family:var(--display);font-weight:var(--dw);font-size:clamp(23px,3.2vw,38px);line-height:1.15;letter-spacing:var(--dtrack);max-width:20ch;color:var(--ink)}
.pull em{font-style:normal;color:var(--gold-rich)}

.panel{border:1px solid var(--line);background:var(--raise);padding:clamp(24px,3vw,34px)}
.field{margin-bottom:20px}
.field label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:9px}
.field select{
  width:100%;padding:13px 14px;border:1px solid var(--line);background:var(--void);color:var(--ink);
  font:inherit;font-size:15px;border-radius:0;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 2px),calc(100% - 15px) calc(50% + 2px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat
}
.field select:focus{border-color:var(--gold);outline:none}
.hint{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--ink-3);margin-top:9px;line-height:1.6}
.slots{display:flex;flex-wrap:wrap;gap:8px}
.slot{
  background:transparent;border:1px solid var(--line);color:var(--ink-2);font-family:var(--mono);font-size:12.5px;
  padding:11px 15px;cursor:pointer;font-variant-numeric:tabular-nums;transition:.2s
}
.slot:hover{border-color:var(--gold);color:var(--gold)}
.slot[aria-pressed="true"]{background:var(--gold-lux);border-color:var(--gold-rich);color:var(--accent-fg);font-weight:500}
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.ticks li{display:grid;grid-template-columns:18px 1fr;gap:12px;font-size:15.5px;color:var(--ink-2)}
.ticks li i{font-style:normal;font-family:var(--mono);font-size:13px}
.ticks li.no i{color:var(--out)}
.ticks li.yes i{color:var(--pass)}

.photo{
  border:1px solid var(--line);aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(45deg,transparent,transparent 11px,var(--gold-dim) 11px,var(--gold-dim) 22px),var(--raise)
}
.photo p{font-family:var(--mono);font-size:11px;letter-spacing:.06em;line-height:1.9;color:var(--ink-3);text-align:center;padding:26px}

footer.site{background:var(--ink-band);border-top:1px solid var(--line);padding-block:clamp(48px,6vw,72px) 30px;font-size:14px;color:var(--ink-band-fg2)}
footer.site .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:34px}
footer.site h4{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-hi);margin:0 0 16px;font-weight:400}
footer.site ul{list-style:none;margin:0;padding:0}
footer.site li{margin-bottom:9px}
footer.site .fl{background:none;border:0;padding:0;color:inherit;font:inherit;cursor:pointer;text-align:left}
footer.site .fl:hover{color:var(--gold-hi)}
footer.site .legal{
  margin-top:40px;padding-top:20px;border-top:1px solid rgba(236,231,220,.14);font-family:var(--mono);font-size:10.5px;
  letter-spacing:.05em;color:var(--ink-3);display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between
}


/* ---------- figures ---------- */
.fig{border:1px solid var(--line);background:var(--raise);padding:clamp(18px,2.6vw,30px);margin-top:clamp(28px,4vw,44px)}
.fig figcaption{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.fig .ft{font-family:var(--display);font-weight:var(--dw);font-size:clamp(17px,2vw,22px);letter-spacing:-.02em}
.fig .fs{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);align-self:center}
.fig .fnote{font-size:14px;color:var(--ink-2);margin-top:18px;padding-top:16px;border-top:1px solid var(--line);max-width:70ch}
/* The assumptions behind a figure: italic, one step down from the note above.
   It keeps the same colour as that note on purpose — a dollar figure on a chart
   is a representation, and a qualifier set in faint grey at 10px reads as
   concealment. 12.5px is small print; it is still comfortably legible. */
.fig .fdisc{font-style:italic;font-size:12.5px}
.svgl{font-family:var(--mono);font-size:10px;letter-spacing:.1em;fill:var(--ink-3)}
.svgv{font-family:var(--mono);font-size:12px;fill:var(--ink);font-weight:500}
.svgh{font-family:var(--display);font-weight:var(--dw);font-size:19px;fill:var(--ink);letter-spacing:-.02em}
/* dollar figures on the cost-of-a-wrong-buy chart. The multiple axis stays on
   the left: the money makes it land, the multiple keeps it checkable. */
.svgd{font-family:var(--display);font-weight:var(--dw);font-size:15px;letter-spacing:-.02em}
.svgg{font-family:var(--display);font-weight:var(--dw);font-size:22px;fill:var(--gold-rich);letter-spacing:-.02em}

/* checklist device */
.check{border:1px solid var(--line);background:var(--raise);margin-top:16px}
.check .ch{
  display:flex;justify-content:space-between;align-items:center;gap:10px;padding:13px 18px;
  border-bottom:1px solid var(--line);background:var(--ground);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)
}
.check ol{list-style:none;margin:0;padding:6px 0}
.check li{
  display:grid;grid-template-columns:26px 1fr auto;gap:12px;align-items:baseline;
  padding:9px 18px;font-size:14px;color:var(--ink-2)
}
.check li b{color:var(--gold);font-family:var(--mono);font-size:12px;font-weight:500}
.check li em{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--ink-3)}

/* photo slots with briefs */
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-top:clamp(26px,3.5vw,38px)}
.shot{
  position:relative;border:1px solid var(--line);aspect-ratio:4/5;overflow:hidden;background:var(--ground);
  display:flex;align-items:flex-end;transition:transform .45s cubic-bezier(.2,.7,.3,1)
}
.shot:hover{transform:translateY(-5px)}
.shot::before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(160deg,var(--gold-dim),transparent 58%),
    repeating-linear-gradient(135deg,transparent,transparent 10px,var(--gold-dim) 10px,var(--gold-dim) 20px)
}
.shot span{
  position:absolute;top:12px;left:12px;font-family:var(--mono);font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);border:1px solid var(--hair);padding:4px 8px
}
.shot p{
  position:relative;padding:14px;font-size:13px;line-height:1.5;color:var(--ink-2);
  background:linear-gradient(transparent,var(--raise) 42%)
}
.shot p b{display:block;color:var(--ink);font-family:var(--display);font-weight:var(--dw);font-size:15px;margin-bottom:4px;letter-spacing:-.01em}

/* ---------- kinetic hero ---------- */
.hero h1 .w{display:inline-block;opacity:0;transform:translateY(.42em) rotate(1.2deg);animation:wordin .8s cubic-bezier(.16,1,.3,1) forwards}
@keyframes wordin{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.hero h1 .w{opacity:1;transform:none;animation:none}}
.hero .glowfollow{
  position:absolute;width:520px;height:520px;border-radius:50%;pointer-events:none;left:0;top:0;
  background:radial-gradient(circle,var(--gold-dim),transparent 64%);
  transform:translate(-50%,-50%);opacity:0;transition:opacity .5s;mix-blend-mode:normal;z-index:0
}
.hero-in>*{position:relative;z-index:1}

/* ---------- ticker ---------- */
.ticker{
  border-block:1px solid var(--line);background:var(--ground);overflow:hidden;
  display:flex;white-space:nowrap;padding-block:16px
}
.ticker-track{display:flex;gap:0;animation:slide 44s linear infinite;flex:none}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ticker-track{animation:none}}
.ticker-track span{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
  padding-inline:26px;display:inline-flex;align-items:center;gap:10px
}
.ticker-track b{color:var(--gold);font-weight:500}
.ticker-track i{font-style:normal;color:var(--line);font-size:14px}

/* ---------- sticky scroll filters ---------- */
.sticky-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,5vw,70px);align-items:start}
.sticky-col{position:sticky;top:clamp(90px,14vh,130px);align-self:start}
.bignum{
  font-family:var(--display);font-weight:var(--dw);font-size:clamp(80px,13vw,180px);line-height:.82;
  letter-spacing:-.05em;color:var(--gold-rich);opacity:.28;transition:opacity .4s
}
.bigtitle{font-family:var(--display);font-weight:var(--dw);font-size:clamp(28px,3.6vw,44px);letter-spacing:var(--dtrack);margin-top:6px}
.bigmeta{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin-top:16px}
.fpanel{
  border-left:1px solid var(--line);padding:clamp(26px,4vw,44px) 0 clamp(26px,4vw,44px) clamp(24px,3vw,40px);
  position:relative;transition:border-color .4s
}
.fpanel::before{
  content:"";position:absolute;left:-1px;top:0;width:1px;height:0;background:var(--gold-rich);transition:height .6s ease
}
.fpanel.on::before{height:100%}
.fpanel h3{font-size:clamp(21px,2.4vw,28px);margin-bottom:12px}
.fpanel p{color:var(--ink-2);font-size:16px;max-width:52ch}
.fpanel .kicker{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.fstat{
  display:flex;gap:26px;flex-wrap:wrap;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)
}
.fstat div{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.fstat b{display:block;font-family:var(--display);font-weight:var(--dw);font-size:26px;letter-spacing:-.02em;color:var(--ink);margin-bottom:4px}

/* ---------- map ---------- */
.mapstage{position:relative;border:1px solid var(--line);background:var(--raise);padding:clamp(16px,2.5vw,28px);overflow:hidden}
.mapstage::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 62% 42%,var(--gold-dim),transparent 58%)
}
#ausmap{width:100%;height:auto;position:relative}
.aus-land{fill:var(--gold-dim);stroke:var(--hair);stroke-width:1.5;stroke-linejoin:round}
.mk{cursor:pointer}
.mk .ring{fill:none;stroke:currentColor;stroke-width:1.5;opacity:.55}
.mk .core{fill:currentColor}
.mk .pulse{fill:currentColor;opacity:.22;transform-origin:center;transform-box:fill-box}
@media(prefers-reduced-motion:no-preference){
  .mk .pulse{animation:pulse 2.8s ease-out infinite}
  @keyframes pulse{0%{transform:scale(.6);opacity:.32}70%{transform:scale(2.4);opacity:0}100%{opacity:0}}
}
.mk.s-pass{color:var(--pass)}
.mk.s-watch{color:var(--watch)}
.mk.s-out{color:var(--out)}
.mk.s-out .pulse{animation:none;opacity:.1}
.mk:hover .core,.mk[aria-current="true"] .core{r:8}
.mk .lbl{
  font-family:var(--mono);font-size:13px;letter-spacing:.1em;fill:var(--ink-2);
  opacity:0;transition:opacity .25s;pointer-events:none
}
.mk:hover .lbl,.mk[aria-current="true"] .lbl{opacity:1}
.glasscard{
  position:absolute;left:clamp(14px,2.5vw,26px);bottom:clamp(14px,2.5vw,26px);
  width:min(300px,calc(100% - 32px));
  background:color-mix(in srgb,var(--raise) 72%,transparent);
  backdrop-filter:blur(18px) saturate(150%);
  border:1px solid var(--line);padding:20px;box-shadow:0 10px 40px rgba(0,0,0,.14)
}
.glasscard .gt{font-family:var(--display);font-weight:var(--dw);font-size:22px;letter-spacing:-.02em;margin-bottom:2px}
.glasscard .gs{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:16px}
.gmet{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid var(--line);font-size:13px}
.gmet span{color:var(--ink-3);font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;align-self:center}
.gmet b{font-family:var(--mono);font-size:14px;font-variant-numeric:tabular-nums;font-weight:500}
.maplegend{
  display:flex;gap:20px;flex-wrap:wrap;margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)
}
.maplegend i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:8px;vertical-align:1px}

/* ---------- editorial photo frames ---------- */
.framegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:34px}
.frame{
  position:relative;border:1px solid var(--line);aspect-ratio:3/4;overflow:hidden;
  background:linear-gradient(150deg,var(--gold-dim),transparent 55%),var(--raise-2);
  display:flex;align-items:flex-end;transition:transform .5s cubic-bezier(.2,.7,.3,1)
}
.frame:nth-child(even){aspect-ratio:3/4;transform:translateY(22px)}
.frame:nth-child(even):hover{transform:translateY(16px)}
.frame:hover{transform:translateY(-6px)}
.frame::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(135deg,transparent,transparent 9px,var(--gold-dim) 9px,var(--gold-dim) 18px);
  opacity:.5
}
.frame figcaption{
  position:relative;padding:14px;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);line-height:1.8
}
.frame figcaption b{display:block;color:var(--gold);font-weight:500;margin-bottom:3px}

/* ---------- row arrow micro-interaction ---------- */
.numrow h3{display:flex;align-items:baseline;gap:12px}
.numrow h3::after{
  content:"→";font-family:var(--mono);font-size:15px;color:var(--gold);
  opacity:0;transform:translateX(-8px);transition:.35s cubic-bezier(.2,.7,.3,1)
}
.numrow:hover h3::after{opacity:1;transform:none}

@media(max-width:820px){
  .hero-in{grid-template-columns:1fr}
  .brand{margin-right:0;width:100%}
  .nav ul{width:100%;margin-top:4px}
  .sticky-wrap{grid-template-columns:1fr}
  .sticky-col{position:static}
  .bignum{font-size:66px}
  .glasscard{position:static;width:auto;margin-top:16px;backdrop-filter:none}
}
@media(prefers-reduced-motion:no-preference){
  .rise{transform:translateY(16px);transition:transform .7s cubic-bezier(.2,.7,.3,1)}
  .rise.in{transform:none}
}

/* ================= ADDITIONS FROM THE COMPETITOR REVIEW ================= */

/* --- the one-line differentiator (Propertybuyer) --- */
.oneline{
  margin-top:20px;font-family:var(--display);font-weight:var(--dw);letter-spacing:-.02em;
  font-size:clamp(17px,1.8vw,22px);line-height:1.22;color:var(--ink);max-width:34ch;
  border-left:3px solid var(--gold-lux);padding-left:16px
}
.oneline em{font-style:normal;color:var(--gold-rich)}

/* --- credential strip (Streamline) --- */
.credbar{
  display:flex;flex-wrap:wrap;gap:0;margin-top:26px;border:1px solid var(--line);background:var(--raise)
}
.credbar div{
  flex:1 1 0;min-width:0;padding:13px 15px;border-right:1px solid var(--line);
  font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);line-height:1.5
}
.credbar div:last-child{border-right:0}
.credbar b{
  display:block;font-family:var(--display);font-weight:var(--dw);font-size:15px;letter-spacing:-.01em;
  color:var(--ink);margin-bottom:5px;text-transform:none;line-height:1.1
}
.credbar .todo b{color:var(--ink-3)}
.credbar .todo::after{content:"to set up";display:block;color:var(--gold);margin-top:4px}

/* --- minimum purchase price (Streamline) --- */
.minprice{
  border:1px solid var(--hair);background:linear-gradient(130deg,var(--gold-dim),transparent 68%);
  padding:22px 24px;margin-top:24px
}
.minprice .mp{
  font-family:var(--display);font-weight:var(--dw);font-size:clamp(28px,3.4vw,40px);
  letter-spacing:-.03em;line-height:1;color:var(--gold-rich)
}
.minprice .mk{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.minprice p{font-size:14.5px;color:var(--ink-2);margin-top:12px;max-width:52ch}

/* --- filterable portfolio grid (Cohen Handler) --- */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:14px;margin-top:24px}
.pcard{
  border:1px solid var(--line);background:var(--raise);display:flex;flex-direction:column;
  transition:transform .4s cubic-bezier(.2,.7,.3,1),border-color .3s,opacity .35s
}
.pcard:hover{transform:translateY(-5px);border-color:var(--hair)}
.pcard.hide{display:none}
.pcard .pimg{
  position:relative;aspect-ratio:4/3;border-bottom:1px solid var(--line);
  background:linear-gradient(150deg,var(--gold-dim),transparent 58%),
    repeating-linear-gradient(135deg,transparent,transparent 10px,var(--gold-dim) 10px,var(--gold-dim) 20px),var(--ground);
  display:flex;align-items:flex-end;padding:12px
}
.pcard .pimg span{
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)
}
.pcard .ptop{position:absolute;top:12px;left:12px;right:12px;display:flex;justify-content:space-between;gap:8px}
.pcard .ptop .chip{background:var(--raise);backdrop-filter:blur(6px)}
.pcard .pbody{padding:16px 18px 18px;display:flex;flex-direction:column;gap:12px;flex:1}
.pcard h3{font-size:18px}
.pcard .pmeta{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.pcard .prow{display:flex;justify-content:space-between;gap:10px;font-size:13px;border-top:1px solid var(--line);padding-top:8px}
.pcard .prow span{color:var(--ink-3);font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;align-self:center}
.pcard .prow b{font-family:var(--mono);font-size:13.5px;font-variant-numeric:tabular-nums;font-weight:500}
.pcard .why{font-size:13.5px;color:var(--ink-2);line-height:1.55;margin-top:auto}
.pcard .why b{color:var(--ink);font-weight:600}
.masked{letter-spacing:.06em;color:var(--ink-3)}

/* --- funds required calculator --- */
.calc{border:1px solid var(--line);background:var(--raise)}
.calc .chead{
  padding:16px 22px;border-bottom:1px solid var(--line);background:var(--ground);
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)
}
.cmodes{display:flex;gap:6px}
.cmode{
  background:transparent;border:1px solid var(--line);color:var(--ink-2);font-family:var(--mono);
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:8px 12px;cursor:pointer;transition:.2s
}
.cmode:hover{border-color:var(--hair);color:var(--ink)}
.cmode[aria-pressed="true"]{background:var(--gold-lux);border-color:var(--gold-rich);color:var(--accent-fg);font-weight:600}
.cgrid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr)}
.cin{padding:clamp(20px,3vw,30px);border-right:1px solid var(--line)}
.cout{padding:clamp(20px,3vw,30px);background:var(--ground)}
.cfield{margin-bottom:20px}
.cfield:last-child{margin-bottom:0}
.cfield label,.cleg{
  display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:9px
}
.cmoney{position:relative}
.cmoney::before{
  content:"$";position:absolute;left:14px;top:50%;transform:translateY(-50%);
  font-family:var(--mono);font-size:15px;color:var(--ink-3);pointer-events:none
}
.cmoney input{
  width:100%;padding:13px 14px 13px 30px;border:1px solid var(--line);background:var(--void);color:var(--ink);
  font-family:var(--mono);font-size:16px;border-radius:0;font-variant-numeric:tabular-nums;-moz-appearance:textfield
}
.cmoney input::-webkit-outer-spin-button,.cmoney input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cmoney input:focus{border-color:var(--gold);outline:none}
.cfield select{
  width:100%;padding:13px 14px;border:1px solid var(--line);background:var(--void);color:var(--ink);
  font:inherit;font-size:15px;border-radius:0;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 2px),calc(100% - 15px) calc(50% + 2px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat
}
.cfield select:focus{border-color:var(--gold);outline:none}
.cdep{display:flex;gap:6px;flex-wrap:wrap}
.cdep button{
  flex:1 1 0;min-width:62px;background:transparent;border:1px solid var(--line);color:var(--ink-2);
  font-family:var(--mono);font-size:12.5px;padding:11px 6px;cursor:pointer;
  font-variant-numeric:tabular-nums;transition:.2s
}
.cdep button:hover{border-color:var(--gold);color:var(--gold)}
.cdep button[aria-pressed="true"]{background:var(--gold-lux);border-color:var(--gold-rich);color:var(--accent-fg);font-weight:600}

.cadv{margin-top:24px;border-top:1px solid var(--line);padding-top:18px}
.cadv summary{
  cursor:pointer;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);list-style:none;display:flex;align-items:center;gap:8px
}
.cadv summary::-webkit-details-marker{display:none}
.cadv summary::before{content:"+";font-size:14px;line-height:1}
.cadv[open] summary::before{content:"\2212"}
.cadv summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.cadvgrid{margin-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cadvgrid .cfield{margin-bottom:0}
.cadvgrid label{font-size:9px;letter-spacing:.1em;margin-bottom:6px}
.cadvgrid .cmoney input{padding:10px 10px 10px 26px;font-size:14px}
.cadvgrid .cmoney::before{left:11px;font-size:13px}

.cbig{margin-bottom:6px}
.cbig .ck{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.cbig .cv{
  font-family:var(--display);font-weight:var(--dw);font-size:clamp(34px,5vw,54px);
  letter-spacing:-.035em;line-height:1;color:var(--gold-rich);font-variant-numeric:tabular-nums
}
.cbig .cs{font-size:14px;color:var(--ink-2);margin-top:10px;line-height:1.6;max-width:42ch}
.crows{margin-top:24px;border-top:1px solid var(--line)}
.crow{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:11px 0;border-bottom:1px solid var(--line);font-size:14.5px
}
.crow .cl{color:var(--ink-2)}
.crow .cl i{display:block;font-style:normal;font-family:var(--mono);font-size:10px;color:var(--ink-3);margin-top:3px}
.crow .cn{font-family:var(--mono);font-size:15px;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.crow.ctot{border-bottom:0;padding-top:16px;margin-top:4px;border-top:2px solid var(--gold-rich)}
.crow.ctot .cl{color:var(--ink);font-weight:600;font-size:15.5px}
.crow.ctot .cn{color:var(--gold-rich);font-size:19px;font-weight:600}
.crow.cmut .cl,.crow.cmut .cn{color:var(--ink-3)}

/* ---------- borrowing power: only what /costs doesn't already provide ---------- */
.bpct{position:relative}
.bpct::after{
  content:attr(data-suf);position:absolute;right:14px;top:50%;transform:translateY(-50%);
  font-family:var(--mono);font-size:14px;color:var(--ink-3);pointer-events:none
}
.bpct input{
  width:100%;padding:13px 46px 13px 14px;border:1px solid var(--line);background:var(--void);color:var(--ink);
  font-family:var(--mono);font-size:16px;border-radius:0;font-variant-numeric:tabular-nums;-moz-appearance:textfield
}
.bpct input:focus,.bchk input:focus-visible{border-color:var(--gold);outline:none}
.bchk{
  display:flex;gap:9px;align-items:center;font-size:13.5px;color:var(--ink-2);
  cursor:pointer;margin:-10px 0 20px
}
.bchk input{width:17px;height:17px;accent-color:var(--gold-rich);flex:none}
.bwho{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);margin:4px 0 14px;padding-top:18px;border-top:1px solid var(--line)
}
.bwho:first-of-type{border-top:0;padding-top:0}
/* DTI meter. The 6x tick is the line APRA caps bank volume at, so it is drawn
   as a fixed mark rather than a gradient — the reader needs to see which side
   of one specific number they are on. */
.bmeter{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.bmhead{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.bmhead b{font-family:var(--mono);font-size:17px;font-variant-numeric:tabular-nums;color:var(--ink)}
.btrack{position:relative;height:8px;background:var(--line);margin-top:11px}
.bfill{position:absolute;inset:0 auto 0 0;background:var(--pass);transition:width .3s ease,background .3s ease}
.btick{position:absolute;top:-4px;bottom:-4px;left:60%;width:2px;background:var(--ink-3)}
.bscale{position:relative;height:15px;margin-top:7px;font-family:var(--mono);font-size:10px;color:var(--ink-3)}
.bscale span{position:absolute;transform:translateX(-50%)}
.bpill{
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 9px;border:1px solid currentColor;margin-left:8px;white-space:nowrap
}
.bflags{
  margin:18px 0 0;padding:0;list-style:none;display:grid;gap:10px;
  font-size:13.5px;color:var(--ink-2);line-height:1.6
}
.bflags li{padding-left:16px;position:relative}
.bflags li::before{
  content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;
  border-radius:50%;background:var(--gold-rich)
}
@media(prefers-reduced-motion:reduce){.bfill{transition:none}}
.cnote{
  margin-top:18px;padding:13px 15px;border-left:2px solid var(--watch);background:var(--raise);
  font-size:13.5px;color:var(--ink-2);line-height:1.65
}
.cnote b{color:var(--ink)}
.cnote.hide{display:none}
.cacts{margin-top:22px;display:flex;gap:10px;flex-wrap:wrap}
.casof{
  margin-top:18px;font-family:var(--mono);font-size:10px;letter-spacing:.04em;
  color:var(--ink-3);line-height:1.7
}
.csum{margin-top:26px;border-top:1px solid var(--line);padding-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.csum div span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:5px}
.csum div b{font-family:var(--mono);font-size:17px;color:var(--ink);font-variant-numeric:tabular-nums;font-weight:500}
@media(max-width:860px){
  .cgrid{grid-template-columns:1fr}
  .cin{border-right:0;border-bottom:1px solid var(--line)}
}
@media(max-width:480px){
  .cadvgrid{grid-template-columns:1fr}
}

/* --- readiness quiz (Propertybuyer) --- */
.quiz{border:1px solid var(--line);background:var(--raise)}
.quiz .qhead{
  padding:16px 22px;border-bottom:1px solid var(--line);background:var(--ground);
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)
}
.quiz .qprog{display:flex;gap:5px}
.quiz .qprog i{width:22px;height:3px;background:var(--line);display:block}
.quiz .qprog i.on{background:var(--gold)}
.qbody{padding:clamp(20px,3vw,30px)}
.qq{margin-bottom:24px}
.qq:last-of-type{margin-bottom:8px}
.qq>p{font-family:var(--display);font-weight:var(--dw);font-size:19px;letter-spacing:-.015em;margin-bottom:12px;color:var(--ink)}
.qopts{display:flex;gap:8px;flex-wrap:wrap}
.qopt{
  background:transparent;border:1px solid var(--line);color:var(--ink-2);font:inherit;font-size:14px;
  padding:10px 14px;cursor:pointer;transition:.2s;text-align:left
}
.qopt:hover{border-color:var(--hair);color:var(--ink)}
.qopt[aria-pressed="true"]{background:var(--gold-lux);border-color:var(--gold-rich);color:var(--accent-fg);font-weight:500}
.qout{
  border-top:1px solid var(--line);padding:clamp(20px,3vw,30px);background:var(--ground)
}
.qout .qv{
  font-family:var(--display);font-weight:var(--dw);font-size:clamp(22px,2.8vw,32px);
  letter-spacing:-.025em;line-height:1.1;margin-bottom:10px
}
.qout .qv.ok{color:var(--pass)}
.qout .qv.mid{color:var(--watch)}
.qout .qv.no{color:var(--out)}
.qout p{font-size:15px;color:var(--ink-2);max-width:58ch}
.qout .qacts{margin-top:18px;display:flex;gap:10px;flex-wrap:wrap}
.qout[data-state="idle"] .qacts{display:none}

/* --- subscribe form (Propertyology) --- */
.subform{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px;max-width:520px;margin-inline:auto}
.subform input{
  flex:1 1 220px;padding:13px 15px;border:1px solid var(--line);background:var(--void);color:var(--ink);
  font:inherit;font-size:15px;border-radius:0
}
.subform input:focus{border-color:var(--gold);outline:none}
.band.ink .subform input{background:var(--ink-band-2);border-color:rgba(236,231,220,.18);color:var(--ink-band-fg)}
.band.ink .subform input::placeholder{color:var(--ink-3)}
.subnote{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-top:14px}

/* --- social strip (Henderson) --- */
.socials{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:28px}
.soc{
  border:1px solid var(--line);background:var(--raise);aspect-ratio:9/13;position:relative;overflow:hidden;
  display:flex;align-items:flex-end;transition:transform .45s cubic-bezier(.2,.7,.3,1)
}
.soc:hover{transform:translateY(-5px)}
.soc::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(170deg,var(--gold-dim),transparent 60%),
    repeating-linear-gradient(135deg,transparent,transparent 11px,var(--gold-dim) 11px,var(--gold-dim) 22px)
}
.soc .st{
  position:absolute;top:12px;left:12px;font-family:var(--mono);font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);border:1px solid var(--hair);padding:4px 8px;background:var(--raise)
}
.soc p{
  position:relative;padding:14px;font-size:13px;line-height:1.5;color:var(--ink-2);
  background:linear-gradient(transparent,var(--raise) 40%)
}
.soc p b{display:block;color:var(--ink);font-family:var(--display);font-weight:var(--dw);font-size:15px;margin-bottom:4px}

/* --- the "as at" data stamp --- */
.asat{
  display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);border:1px solid var(--line);padding:6px 11px;margin-top:18px
}
.asat i{font-style:normal;width:5px;height:5px;border-radius:50%;background:var(--gold)}

/* --- GHL build-mode annotations --- */
:root[data-build="on"] .ghl{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;padding:6px 11px;margin-bottom:18px;border:1px dashed var(--gold);color:var(--gold);
  background:var(--gold-dim)
}
:root[data-build="on"] .ghl.native{border-color:var(--line);color:var(--ink-3);background:transparent}
:root[data-build="on"] .ghl::before{content:"⌘";font-size:11px}
:root[data-build="on"] .ghl.native::before{content:"▤"}

/* --- own-record figure --- */
.recgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:28px}
.recgrid>div{background:var(--raise);padding:22px 20px}
.recgrid b{
  display:block;font-family:var(--display);font-weight:var(--dw);font-size:clamp(26px,3.2vw,36px);
  letter-spacing:-.03em;line-height:1;color:var(--gold-rich);font-variant-numeric:tabular-nums
}
.recgrid span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-top:10px}

@media(max-width:620px){
  .oneline{font-size:18px}
  .credbar div{flex:1 1 100%;border-right:0;border-bottom:1px solid var(--line)}
  .credbar div:last-child{border-bottom:0}
}

/* keep the hero white on phones — the gold glow swamps a narrow viewport */
@media(max-width:760px){
  .hero::before{width:420px;height:420px;right:-200px;top:-220px;opacity:.55}
  .nav-in{padding-block:10px}
  .lnk{padding:7px 10px;font-size:10.5px}
  .btn.sm{padding:9px 12px}
  .themetog{padding:9px 10px;margin-right:4px}
  .pcard .pimg{aspect-ratio:16/10}
  .qopt{font-size:13.5px;padding:9px 12px}
}

/* ---------- THE CLIMB — five stages ---------- */
.climbwrap{margin-top:34px}
.ctabs{
  display:flex;gap:4px;background:var(--raise);border:1px solid var(--line);border-radius:999px;
  padding:5px;overflow-x:auto;scrollbar-width:none
}
.ctabs::-webkit-scrollbar{display:none}
.ctab{
  flex:1 1 0;min-width:120px;background:transparent;border:0;border-radius:999px;cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);
  padding:13px 10px 12px;position:relative;transition:color .22s,background .22s;white-space:nowrap
}
.ctab:hover{color:var(--ink)}
.ctab[aria-selected="true"]{color:var(--accent-fg);background:var(--gold-lux);font-weight:500}
.ctab .cn{display:block;font-size:9px;letter-spacing:.2em;opacity:.7;margin-bottom:4px}

.cpanel{
  display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(28px,4.5vw,64px);
  align-items:center;margin-top:clamp(28px,4vw,46px)
}
.cpanel[hidden]{display:none}
.cstage{
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);margin-bottom:16px
}
.cpanel h3{
  font-size:clamp(26px,3.4vw,42px);line-height:1.06;letter-spacing:var(--dtrack);margin-bottom:16px
}
.cpanel h3 em{font-style:normal;color:var(--gold-rich)}
.cpanel .cbody{color:var(--ink-2);font-size:16px;max-width:54ch;line-height:1.62}
.cmarks{
  display:flex;flex-wrap:wrap;gap:0;margin-top:26px;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)
}
.cmarks div{
  flex:1 1 130px;padding:16px 18px 16px 0;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)
}
.cmarks b{
  display:block;font-family:var(--display);font-weight:var(--dw);font-size:17px;letter-spacing:-.015em;
  color:var(--ink);margin-bottom:6px;text-transform:none
}
.cacts{margin-top:26px;display:flex;gap:10px;flex-wrap:wrap}

.cviz{border:1px solid var(--line);background:var(--raise);padding:clamp(16px,2.4vw,26px);position:relative}
.cviz::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 78% 24%,var(--gold-dim),transparent 60%)
}
.cviz svg{position:relative}
.cnode .ring{fill:none;stroke:var(--ink-3);stroke-width:1.5;opacity:.45;transition:.35s}
.cnode .core{fill:var(--ink-3);transition:.35s}
.cnode .glowc{fill:var(--gold-rich);opacity:0;transition:opacity .4s}
.cnode.on .ring{stroke:var(--gold-rich);opacity:1;stroke-width:2;r:15}
.cnode.on .core{fill:var(--gold-rich);r:6.5}
.cnode.on .glowc{opacity:.2}
.cnode.on .nlbl{font-size:13px;font-weight:500}
.cnode .nlbl{
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;fill:var(--ink-3);transition:.3s
}
.cnode.on .nlbl{fill:var(--gold)}
.cnode.done .ring{stroke:var(--ink-2);opacity:.7}
.cnode.done .core{fill:var(--ink-2)}
.cvizfoot{
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:14px;padding-top:12px;
  border-top:1px solid var(--line);position:relative;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)
}
.cvizfoot b{color:var(--gold);font-weight:500}

@media(max-width:860px){
  .cpanel{grid-template-columns:1fr}
  .ctab{min-width:104px;font-size:10px;padding:11px 8px 10px}
  /* the strip scrolls on a phone — fade the right edge so that reads as scrollable */
  .climbwrap{position:relative}
  .climbwrap::after{
    content:"";position:absolute;top:0;right:0;width:44px;height:58px;pointer-events:none;
    background:linear-gradient(90deg,transparent,var(--raise-2));border-radius:0 999px 999px 0
  }
}

/* ---------- two-brief comparison ---------- */
.vs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:30px}
.vs>div{background:var(--raise);padding:clamp(22px,3vw,30px)}
.vs .vh{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
.vs .vp{font-family:var(--display);font-weight:var(--dw);font-size:clamp(24px,3vw,34px);letter-spacing:-.03em;line-height:1;color:var(--gold-rich)}
.vs .vsub{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--ink-3);margin-top:10px}
.vrow{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line);font-size:14px;align-items:baseline}
.vrow:first-of-type{margin-top:20px}
.vrow span{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.vrow b{font-family:var(--mono);font-size:14px;font-variant-numeric:tabular-nums;font-weight:500}
.spread{display:flex;height:26px;margin-top:22px;border:1px solid var(--line);overflow:hidden}
.spread i{display:block;height:100%;position:relative}
.spreadkey{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px;font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.spreadkey em{font-style:normal;display:inline-block;width:8px;height:8px;margin-right:6px;vertical-align:0}
.delta{
  border:1px solid var(--hair);background:linear-gradient(125deg,var(--gold-dim),transparent 72%);
  padding:clamp(22px,3vw,30px);margin-top:16px;display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center
}
.delta .dn{font-family:var(--display);font-weight:var(--dw);font-size:clamp(46px,7vw,84px);line-height:.85;letter-spacing:-.05em;color:var(--gold-rich)}
.delta p{font-size:15.5px;color:var(--ink-2);max-width:60ch}
.delta b{color:var(--ink);font-weight:600}
@media(max-width:980px){.vs{grid-template-columns:1fr}}
@media(max-width:700px){.delta{grid-template-columns:1fr;gap:12px}}

/* ---------- path splitter ---------- */
.splitter{background:var(--ground);border-block:1px solid var(--line);padding-block:clamp(26px,3.4vw,40px)}
.sp-q{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.sp-opts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sp{
  text-align:left;background:var(--raise);border:1px solid var(--line);cursor:pointer;font:inherit;
  padding:clamp(18px,2.4vw,24px);display:flex;flex-direction:column;gap:7px;
  transition:transform .35s cubic-bezier(.2,.7,.3,1),border-color .25s,box-shadow .25s
}
.sp:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:0 6px 28px var(--glow)}
.sp b{font-family:var(--display);font-weight:var(--dw);font-size:clamp(19px,2.2vw,25px);letter-spacing:-.02em;color:var(--ink)}
.sp span{font-size:15px;color:var(--ink-2)}
.sp i{
  font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);margin-top:6px
}
@media(max-width:700px){.sp-opts{grid-template-columns:1fr}}

/* ---------- three-way comparison ---------- */
.cmp{overflow-x:auto;border:1px solid var(--line);background:var(--raise);margin-top:28px}
.cmp table{min-width:760px}
.cmp th{background:var(--ground);vertical-align:bottom;padding-top:20px}
.cmp th.us{background:var(--gold-dim);color:var(--gold);border-bottom:1px solid var(--hair)}
.cmp th b{
  display:block;font-family:var(--display);font-weight:var(--dw);font-size:17px;letter-spacing:-.015em;
  color:var(--ink);text-transform:none;margin-bottom:5px
}
.cmp th.us b{color:var(--gold)}
.cmp td{font-size:14.5px;vertical-align:top}
.cmp td.lbl{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);width:18%}
.cmp td.us{background:var(--gold-dim);color:var(--ink);font-weight:500}
.cmp td.other{color:var(--ink-2)}
.cmp tbody tr:hover{background:transparent}
.cmp tbody tr:hover td.us{background:var(--gold-dim)}

/* ---------- claims page device ---------- */
.claims{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:30px}
.claim{background:var(--raise);padding:clamp(22px,3vw,32px);display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start}
.claim .x{font-family:var(--mono);font-size:18px;color:var(--out);line-height:1.2;padding-top:2px}
.claim h3{font-size:clamp(19px,2.2vw,24px);margin-bottom:10px}
.claim p{color:var(--ink-2);font-size:15.5px;max-width:70ch}
.claim p+p{margin-top:10px}
.claim b{color:var(--ink);font-weight:600}
.instead{background:var(--ground);border:1px solid var(--hair);padding:clamp(22px,3vw,32px);margin-top:16px}
.instead .ih{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
@media(max-width:620px){.claim{grid-template-columns:1fr;gap:10px}}

/* ---------- replay control on the hero canvas ---------- */
.replay{
  margin-left:auto;align-self:center;background:transparent;border:1px solid var(--line);color:var(--ink-3);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 10px;cursor:pointer;transition:.2s;white-space:nowrap
}
.replay:hover{border-color:var(--gold);color:var(--gold)}

/* ---------- real photography ---------- */
.photo.real{background:none;padding:0;overflow:hidden;position:relative}
.photo.real img{width:100%;height:100%;object-fit:cover;display:block}
.pcard .pimg.shot{background:var(--ground)}
.pcard .pimg.shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pcard .pimg.shot .ptop{z-index:2}
.pcard .pimg.shot>span{display:none}
.pcard .pimg.shot::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(21,20,25,.22),transparent 38%);z-index:1}

/* ---------- logo ---------- */
.brand{padding:2px 0}
.brand img{display:block;height:clamp(46px,3.6vw,58px);width:auto}
.brand .lw{display:none}
:root[data-theme="dark"] .brand .lb{display:none}
:root[data-theme="dark"] .brand .lw{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brand .lb{display:none}
  :root:not([data-theme="light"]) .brand .lw{display:block}
}
footer.site .flogo{height:52px;width:auto;display:block;margin-bottom:20px}
@media(max-width:760px){.brand img{height:38px}}

/* ==================================================================
   v2 ADDITIONS
   Three problems this block solves, in order of what they cost:
     1. the sticky header ate ~165px of a 390px-wide screen
     2. mono microcopy at 9.5-10.5px is unreadable on a phone
     3. no plain-language entry point, and no definitions for the jargon
   ================================================================== */

/* ---------- 1. mobile nav: one row, links behind a drawer ----------
   Seven links plus a theme toggle plus two buttons wrapped to four rows
   on a phone. The bar is sticky, so that cost was paid on every screen
   of every page. Below 900px the links move into a drawer and the bar
   keeps only what a visitor actually needs in reach: the logo, the
   primary action, and the way to everything else. */
.navtog{display:none}
.navdraw{display:none}
@media(max-width:900px){
  .nav-in{flex-wrap:nowrap;gap:8px;padding-block:9px}
  .nav ul,.nav>.nav-in>.themetog,.nav>.nav-in>.btn.sm.ghost{display:none}
  .navtog{
    display:inline-flex;align-items:center;gap:8px;background:none;border:1px solid var(--line);
    color:var(--ink);font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
    text-transform:uppercase;padding:10px 12px;cursor:pointer;flex:0 0 auto
  }
  .navtog .bars{display:block;width:14px;height:9px;position:relative;flex:0 0 auto}
  .navtog .bars i{position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:.2s}
  .navtog .bars i:nth-child(1){top:0}
  .navtog .bars i:nth-child(2){top:3.75px}
  .navtog .bars i:nth-child(3){top:7.5px}
  .navtog[aria-expanded="true"] .bars i:nth-child(1){top:3.75px;transform:rotate(45deg)}
  .navtog[aria-expanded="true"] .bars i:nth-child(2){opacity:0}
  .navtog[aria-expanded="true"] .bars i:nth-child(3){top:3.75px;transform:rotate(-45deg)}
  .navdraw[data-open="true"]{
    display:block;border-top:1px solid var(--line);background:var(--void);
    padding:4px var(--gut) 18px;max-height:calc(100vh - 120px);overflow-y:auto
  }
  .navdraw ul{display:block;list-style:none;margin:0;padding:0}
  .navdraw li{border-bottom:1px solid var(--line)}
  .navdraw .lnk{display:block;width:100%;text-align:left;font-size:12.5px;padding:16px 2px;background:none}
  .navdraw .lnk[aria-current="page"]{background:none;color:var(--gold-rich)}
  .navdraw .lnk[aria-current="page"]::after{left:auto;right:auto;width:16px;height:2px;bottom:10px}
  .navdraw .drawfoot{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
  .navdraw .drawfoot .btn,.navdraw .drawfoot .themetog{flex:1 1 140px;justify-content:center;text-align:center;margin:0}
}
/* "Book a call" broke across three lines in a 390px bar, which made the one
   button that matters look like a fault. Never wrap it, and drop the tail of
   the label where the room is not there. */
.nav .btn{white-space:nowrap}
/* build.py turns every data-go button into an <a>, so the built site carried
   browser-default underlines on the nav that the prototype never showed. The
   prototype and the live site should not disagree about this. */
.lnk,.brand,.navdraw .lnk{text-decoration:none}
@media(max-width:900px){
  .nav-in .btn.sm .nwide{display:none}
  .nav-in .btn.sm{padding:10px 14px}
}
/* the drawer markup duplicates the links; keep it out of the way on desktop
   and out of the accessibility tree when closed (JS sets hidden) */
@media(min-width:901px){.navdraw{display:none!important}}

/* ---------- 2. phone type floor ----------
   Mono, uppercase and tracked at 9.5px measures about 1.4mm on a phone.
   Every one of these carries a real figure or a real caveat, so none of
   them is decoration that can stay small. */
@media(max-width:560px){
  .hint{font-size:11.5px;letter-spacing:.02em}
  .asat{font-size:11px;letter-spacing:.1em;padding:7px 11px}
  .spreadkey{font-size:11px;letter-spacing:.06em;gap:12px 16px}
  .fs,.fig .fs{font-size:11px;letter-spacing:.1em}
  .fstat{gap:18px 26px}
  .fstat div{font-size:11px;letter-spacing:.09em}
  .stat .k{font-size:11px;letter-spacing:.1em}
  .recgrid span{font-size:11px;letter-spacing:.1em}
  .screenlegend{font-size:11px;letter-spacing:.08em}
  .bscale{font-size:11px;height:17px}
  .eyebrow{font-size:11px;letter-spacing:.2em;margin-bottom:20px}
  .fnote{font-size:14.5px}
  .cmp td.lbl{font-size:11px;letter-spacing:.08em}
  .proto{font-size:10.5px;gap:8px;padding-block:7px}
  .casof{font-size:11px}
}

/* ---------- 2b. the scroll affordance the wide tables never had ----------
   .cmp and .tablewrap already scroll. Nothing told anyone they did, so on
   a phone the third and fourth columns simply did not exist. */
.sx{position:relative}
.sx::after{
  content:"";position:absolute;top:0;right:0;bottom:0;width:38px;pointer-events:none;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--void) 86%,transparent));
  opacity:0;transition:opacity .2s
}
.sx[data-more="1"]::after{opacity:1}
.sxnote{
  display:none;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);margin-top:9px
}
@media(max-width:760px){.sx[data-more="1"] + .sxnote{display:block}}

/* ---------- 3a. the plain-language layer ----------
   One sentence, no jargon, above the argument. Someone who reads only
   this should still know what the page is for. */
.plain{
  border-left:2px solid var(--gold-rich);background:color-mix(in srgb,var(--gold) 5%,transparent);
  padding:16px 18px;margin:0 0 26px;max-width:66ch
}
.plain b{
  display:block;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);font-weight:500;margin-bottom:7px
}
.plain p{font-size:16.5px;line-height:1.62;color:var(--ink)}
@media(max-width:560px){.plain{padding:14px 15px}.plain b{font-size:11px;letter-spacing:.14em}.plain p{font-size:16px}}

/* ---------- 3b. jargon definitions ----------
   Hover on a pointer, tap on a touch screen, focus on a keyboard. The
   term keeps its place in the sentence — the depth is the differentiator
   and the fix is a definition, not a simpler word. */
.jt{
  background:none;border:0;padding:0;font:inherit;color:inherit;cursor:help;
  border-bottom:1px dashed var(--gold-rich);position:relative;text-align:left
}
/* display:none, not visibility:hidden. A hidden-but-laid-out pseudo element
   with width:max-content still counts toward its parent's scrollWidth, which
   is what pushed the home page 237px wider than a phone viewport. */
.jt::after{
  content:attr(data-def);display:none;position:absolute;left:0;bottom:calc(100% + 10px);z-index:120;
  width:max-content;max-width:min(320px,70vw);
  background:var(--ink-band);color:var(--ink-band-fg);border:1px solid var(--gold-rich);
  font-family:var(--body);font-size:13.5px;font-weight:400;line-height:1.52;letter-spacing:0;
  text-transform:none;padding:11px 13px;text-align:left;
  box-shadow:0 10px 36px rgba(21,20,25,.28)
}
.jt:hover::after,.jt:focus-visible::after,.jt[aria-expanded="true"]::after{display:block}
@media(hover:none){.jt:hover::after{display:none}}
.jt[aria-expanded="true"]::after{display:block!important}
/* a term sitting near the right edge would open a popover off the page, so JS
   flips it when there isn't room */
.jt[data-flip="1"]::after{left:auto;right:0}
/* On a phone the definition is wider than the 358px column, so it becomes a
   sheet at the bottom of the screen rather than a popover on the term.
   It cannot be the ::after: position:fixed is trapped by any transformed
   ancestor, and .rise leaves a residual transform on the card it sits in. So
   the sheet is a single element on <body>, filled by JS, with nothing above
   it in the tree. */
/* every selector that can turn the popover on has to be turned off here, or
   the more specific [aria-expanded] rule wins and the popover renders behind
   the sheet — and widens the page while it does it */
@media(max-width:700px){
  .jt::after,.jt:hover::after,.jt:focus-visible::after,
  .jt[aria-expanded="true"]::after,.jt[data-flip="1"]::after{display:none!important}
}
#jtsheet{
  display:none;position:fixed;left:12px;right:12px;bottom:14px;z-index:400;
  background:var(--ink-band);color:var(--ink-band-fg);border:1px solid var(--gold-rich);
  font-family:var(--body);font-size:14.5px;line-height:1.52;padding:14px 15px;
  box-shadow:0 12px 44px rgba(21,20,25,.40)
}
#jtsheet[data-open="true"]{display:block}
#jtsheet b{
  display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-hi);font-weight:500;margin-bottom:6px
}
@media(min-width:701px){#jtsheet{display:none!important}}
.band.ink .jt{border-bottom-color:var(--gold-hi)}

/* the two panel kickers that carried their type inline; a style attribute
   beats every stylesheet rule, so they could never be raised on a phone */
.panelkick{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold)
}

/* ---------- 3c. the readiness page ---------- */
/* The quiz is the page. A full-height band of intro above it pushes the thing
   people came for below the fold on a desktop. */
.readtop{padding-block:clamp(40px,5vw,74px) clamp(26px,3vw,42px)}
.readhero{max-width:62ch}
.readwhy{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);margin-top:34px
}
.readwhy>div{background:var(--raise);padding:22px 20px}
.readwhy h3{font-size:17px;margin-bottom:9px}
.readwhy p{font-size:14.5px;color:var(--ink-2);line-height:1.6}
/* the result capture: only shown once the quiz has an answer */
.qcap{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.qcap[hidden]{display:none}
.qcap .ck{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
.qcap form{display:flex;gap:9px;flex-wrap:wrap}
.qcap input{
  flex:1 1 230px;background:var(--void);border:1px solid var(--line);color:var(--ink);
  font-family:var(--body);font-size:15px;padding:13px 14px
}
.qcap input:focus{outline:0;border-color:var(--gold-rich)}
.qcap p.hint{margin-top:11px}
/* the 90-day path for the people the fit section turns away */
.ninety{counter-reset:nn;margin-top:30px;display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.ninety>li{background:var(--raise);padding:20px 22px;list-style:none;display:flex;gap:18px;align-items:flex-start}
.ninety>li::before{
  counter-increment:nn;content:counter(nn,decimal-leading-zero);
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--gold-rich);flex:0 0 auto;padding-top:3px
}
.ninety h3{font-size:17px;margin-bottom:7px}
.ninety p{font-size:14.5px;color:var(--ink-2);line-height:1.6}
/* the compact promo that replaces the full quiz on the home page */
.readpromo{
  display:flex;gap:clamp(20px,3vw,40px);align-items:center;flex-wrap:wrap;
  border:1px solid var(--hair);background:color-mix(in srgb,var(--gold) 5%,transparent);
  padding:clamp(22px,3vw,34px)
}
.readpromo .rp-t{flex:1 1 330px}
.readpromo h3{font-size:clamp(21px,2.6vw,28px);letter-spacing:-.02em;margin-bottom:10px}
.readpromo p{font-size:15.5px;color:var(--ink-2);line-height:1.6;max-width:56ch}

/* ------------------------------------------------------------------
   v2: phone type floor, derived not guessed

   Every selector below sets a literal font-size under 11px in the main
   stylesheet. At 390px that is roughly 1.4mm of tracked uppercase mono, and
   each one of them carries a figure, a label or a caveat rather than
   decoration. Generated by patch_v2b.py from the stylesheet itself, so
   nothing is missed and nothing drifts: 64 selectors, smallest was 9px.

   Applied to 900px so a tablet in portrait is covered too.
   Prototype chrome (.proto, .tbtn, .ghl) is excluded — it is not shipped.
   ------------------------------------------------------------------ */
@media(max-width:900px){
  .cadvgrid label{font-size:11px}
  .credbar div{font-size:11px}
  .ctab .cn{font-size:11px}
  .pcard .pimg span{font-size:11px}
  .shot span{font-size:11px}
  .soc .st{font-size:11px}
  .asat{font-size:11px}
  .brand i{font-size:11px}
  .calc .chead{font-size:11px}
  .check .ch{font-size:11px}
  .cmarks div{font-size:11px}
  .cmp td.lbl{font-size:11px}
  .csum div span{font-size:11px}
  .cvizfoot{font-size:11px}
  .frame figcaption{font-size:11px}
  .minprice .mk{font-size:11px}
  .pcard .prow span{font-size:11px}
  .quiz .qhead{font-size:11px}
  .recgrid span{font-size:11px}
  .replay{font-size:11px}
  .spreadkey{font-size:11px}
  .vrow span{font-size:11px}
  .vs .vh{font-size:11px}
  footer.site h4{font-size:11px}
  th{font-size:11px}
  .bpill{font-size:11px}
  .bscale{font-size:11px}
  .bwho{font-size:11px}
  .cadv summary{font-size:11px}
  .casof{font-size:11px}
  .cbig .ck{font-size:11px}
  .cfield label,.cleg{font-size:11px}
  .check li em{font-size:11px}
  .chip{font-size:11px}
  .cmode{font-size:11px}
  .crow .cl i{font-size:11px}
  .cstage{font-size:11px}
  .field label{font-size:11px}
  .fig .fs{font-size:11px}
  .filters .fl{font-size:11px}
  .fpanel .kicker{font-size:11px}
  .glasscard .gs{font-size:11px}
  .gmet span{font-size:11px}
  .instead .ih{font-size:11px}
  .maplegend{font-size:11px}
  .panelkick{font-size:11px}
  .pcard .pmeta{font-size:11px}
  .plain b{font-size:11px}
  .screenlegend{font-size:11px}
  .sp i{font-size:11px}
  .sp-q{font-size:11px}
  .stat .k{font-size:11px}
  .subnote{font-size:11px}
  .svgl{font-size:11px}
  .tri .mk{font-size:11px}
  .bigmeta{font-size:11px}
  .eyebrow{font-size:11px}
  .fbtn{font-size:11px}
  .fstat div{font-size:11px}
  .hint{font-size:11px}
  .qcap .ck{font-size:11px}
  .themetog{font-size:11px}
  .vs .vsub{font-size:11px}
  footer.site .legal{font-size:11px}
  /* wide tracking at 11px overflows the tighter grids, so ease it where it
     was set for a smaller size */
  .fstat div,.stat .k,.recgrid span,.spreadkey,.asat,.screenlegend,
  .vh,.vsub,.kicker,.cstage,.bwho,.ck,.cleg,.mk{letter-spacing:.08em}
}

/* ------------------------------------------------------------------
   v2: inline expanders

   Progressive disclosure, not a second version of the site. The page
   reads complete with every one of these shut; opening them adds the
   evidence, never the point.

   <details> was chosen over a JS panel deliberately: it survives
   scripting being off, it is already correct for keyboard and screen
   readers, and Google indexes what is inside a closed one — which is
   the whole reason the depth can be hidden without costing traffic.
   ------------------------------------------------------------------ */
.deep{border-top:1px solid var(--line);margin-top:18px}
.deep + .deep{margin-top:0}
.deep > summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;
  padding:13px 2px;font-family:var(--mono);font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gold);transition:color .18s
}
.deep > summary::-webkit-details-marker{display:none}
.deep > summary:hover{color:var(--gold-rich)}
.deep > summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
/* The row stays full width so the whole thing is clickable, but the label and
   the chevron sit together on the left. Pushed apart they end up 1,200px
   from each other on a desktop and stop reading as one control. */
.deep > summary{justify-content:flex-start}
.dlabel{flex:0 1 auto}
.d-open{display:none}
.deep[open] > summary .d-shut{display:none}
.deep[open] > summary .d-open{display:inline}
/* the chevron is the only thing telling someone this opens, so it moves */
.dchev{
  flex:0 0 auto;width:9px;height:9px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .22s
}
.deep[open] > summary .dchev{transform:rotate(-135deg) translate(-3px,-3px)}
.dbody{padding:2px 0 22px;animation:deepIn .26s ease-out both}
@keyframes deepIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .dbody{animation:none}
  .dchev{transition:none}
}
.dbody > *:first-child{margin-top:0}
.dnote{
  font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--ink-3);
  line-height:1.6;margin-top:14px
}
/* inside the ink band the gold has to lift off a dark surface */
.band.ink .deep{border-top-color:rgba(236,231,220,.18)}
.band.ink .deep > summary{color:var(--gold-hi)}
/* on a phone the tap target is the whole row */
@media(max-width:700px){
  .deep > summary{padding:15px 2px;font-size:11.5px;letter-spacing:.1em}
}
/* printing a page with the evidence folded away defeats the point */
@media print{
  .deep > summary{display:none}
  .dbody{animation:none}
}