/* 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)
}
.nav-in{max-width:1240px;margin:0 auto;padding:11px var(--gut);display:flex;align-items:center;gap:8px;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}
.lnk{
  background:none;border:0;font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);padding:9px 13px;cursor:pointer;position:relative;transition:color .2s
}
.lnk:hover{color:var(--ink)}
.lnk[aria-current="page"]{color:var(--gold)}
.lnk[aria-current="page"]::after{content:"";position:absolute;left:13px;right:13px;bottom:2px;height:1px;background:var(--gold)}
.themetog{
  background:none;border:1px solid var(--line);color:var(--ink-3);font-family:var(--mono);font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase;padding:10px 12px;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:10px 15px;font-size:10px}
.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}

.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:46px;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}}