/* How it works (adfontes.solutions/how-it-works). Layout: the rented rooms we replace, then a build sequence of seven stages, each drawing adding one layer (land, estate, block, house, furniture, utilities, keys), then roles, ways to own, renovations, cost, who owns what and moving out. Dark-first (Volt on black). */
:root{
  --bg:#0a0a0a; --surface:#141414; --line:rgba(255,255,255,.12); --fg:#fff; --muted:#a3a39a;
  --accent:#d4ff3a; --accent-fg:#0a0a0a; --ground:#23231f; --ghost:#34342f; --flag:#ffb347;
  --display:Archivo,"Helvetica Neue",Arial,sans-serif; --body:Inter,system-ui,sans-serif;
}
.hiw a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}


.hero{padding-block:48px 24px;display:grid;gap:18px}
.eyebrow{font:600 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
h1{margin:0;font:900 clamp(46px,10vw,112px)/.88 var(--display);font-stretch:62%;text-transform:uppercase;text-wrap:balance}
h1 span{color:var(--accent)}
.lede{margin:0;max-width:58ch;font-size:clamp(17px,2.1vw,20px)}
.pill{display:inline-flex;align-items:center;justify-content:center;min-height:52px;background:var(--accent);color:var(--accent-fg);font:700 16px/1 var(--body);text-decoration:none;border-radius:999px;padding:0 26px;justify-self:start}
.pill:hover{filter:brightness(1.06)}

/* progress rail (goal-gradient) */
.rail{position:sticky;top:env(safe-area-inset-top,0px);z-index:3;background:var(--bg);border-bottom:1px solid var(--line);padding-block:10px;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.rail a{flex:1 0 auto;min-height:44px;display:flex;align-items:center;gap:8px;padding:0 12px;border-radius:999px;text-decoration:none;font:700 13px/1 var(--body);color:var(--muted);white-space:nowrap}
.rail a b{font:800 12px/1 var(--display);font-stretch:75%;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;border:1.5px solid currentColor}
.rail a.on{color:var(--fg)}
.rail a.on b{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}

/* stages */
.stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:32px;align-items:center;padding-block:48px;border-bottom:1px solid var(--line);scroll-margin-top:72px}
.stage:nth-of-type(even) .art{order:2}
.art{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:12px;min-width:0}
.art svg{display:block;width:100%;height:auto}
.copy{display:grid;gap:12px;min-width:0}
.num{font:800 13px/1 var(--display);font-stretch:75%;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.copy h2{margin:0;font:900 clamp(34px,5.4vw,56px)/.92 var(--display);font-stretch:62%;text-transform:uppercase;text-wrap:balance}
.copy p{margin:0;max-width:52ch}
.means{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:14px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;max-width:52ch}
.means dt{color:var(--muted);font-weight:600}
.means dd{margin:0}
.callout{font:800 clamp(22px,3vw,30px)/1 var(--display);font-stretch:62%;text-transform:uppercase;color:var(--accent)}

/* who owns what */
.owns{padding-block:56px 0;display:grid;gap:18px}
.sectionh{margin:0;font:900 clamp(34px,5.4vw,56px)/.92 var(--display);font-stretch:62%;text-transform:uppercase;text-wrap:balance}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:16px}
table{width:100%;border-collapse:collapse;font-size:15px;min-width:560px}
th,td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top}
th{font:800 13px/1 var(--display);font-stretch:75%;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--surface)}
tr:last-child td{border-bottom:0}
td:first-child{font-weight:700;white-space:nowrap}
.chip{display:inline-block;font:700 12px/1 var(--body);border-radius:999px;padding:5px 10px;border:1px solid var(--line);white-space:nowrap}
.chip.yours{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}

/* moving out */
.move{padding-block:56px 0;display:grid;gap:18px}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px;display:grid;gap:10px;align-content:start;min-width:0}
.card h3{margin:0;font:800 20px/1.05 var(--display);font-stretch:70%;text-transform:uppercase}
.card .cost{font:700 15px/1.3 var(--body);color:var(--accent)}
.card p{margin:0;font-size:15px}
.hw-note{font-size:15px;max-width:70ch;margin:0}

/* contrast */
.contrast{padding-block:56px 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.contrast .card:first-child{background:transparent}
.contrast h3{color:var(--muted)}
.contrast .card:last-child h3{color:var(--accent)}
.contrast ul{margin:0;padding-left:18px;display:grid;gap:6px;font-size:15px}

/* rented rooms: six apps, one client (Jane) copied into each */
.rooms{padding-block:48px 8px;display:grid;gap:18px;border-bottom:1px solid var(--line)}
.rooms > p{margin:0;max-width:62ch}
.roomgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.room{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;display:grid;gap:10px;align-content:start;min-width:0}
.room b{font:800 17px/1 var(--display);font-stretch:70%;text-transform:uppercase}
.room .like{font-size:13px;color:var(--muted)}
.room .rent{font:700 12px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.rec{border:1px dashed var(--muted);border-radius:10px;padding:10px 12px;display:grid;gap:3px;font-size:13.5px;line-height:1.35}
.rec .who{font-weight:700}
.rec .ph{font-variant-numeric:tabular-nums}
.rec.fresh{border:1.5px solid var(--accent)}
.rec.fresh .ph{color:var(--accent);font-weight:700}
.rec .old{color:var(--flag)}
.rec .old::after{content:" · out of date";font-weight:600}
.fate{justify-self:start;font:700 12px/1 var(--body);border-radius:999px;padding:6px 10px;border:1px solid var(--line)}
.fate.in{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.roomsum{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:14px;align-items:start}
.roomsum p{margin:0;font-size:15px}
.roomsum .big{font:900 clamp(26px,3.6vw,38px)/.95 var(--display);font-stretch:62%;text-transform:uppercase}
.roomsum .big span{color:var(--accent)}

/* roles, options, renovations, pricing */
.block{padding-block:56px 0;display:grid;gap:18px}
.block > p{margin:0;max-width:62ch}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.card ul{margin:0;padding-left:18px;display:grid;gap:6px;font-size:15px}
.card .sub{font:600 12px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
td.yes{color:var(--accent);font-weight:700}
.parts{display:flex;flex-wrap:wrap;gap:8px}
.parts span{font:600 13px/1 var(--body);border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:9px 13px}
.pricebox{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:14px;align-items:stretch}
.half{font:900 clamp(64px,11vw,128px)/.8 var(--display);font-stretch:62%;color:var(--accent)}

.cta{margin-top:56px;border-top:2px solid var(--fg);padding-block:36px 0;display:grid;gap:14px}
.cta h2{margin:0;font:900 clamp(36px,6.5vw,68px)/.9 var(--display);font-stretch:62%;text-transform:uppercase;text-wrap:balance}
.cta h2 span{color:var(--accent)}
.cta p{margin:0;max-width:58ch}
.fine{margin-top:40px;font-size:13px;color:var(--muted);display:grid;gap:6px;max-width:90ch}
.fine p{margin:0}

@media (max-width:820px){
  .stage{grid-template-columns:1fr;gap:18px;padding-block:36px}
  .stage:nth-of-type(even) .art{order:0}
  .cards,.contrast,.two,.three,.roomsum,.pricebox{grid-template-columns:1fr}
  .roomgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){
  .roomgrid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:no-preference){
  .art .new{animation:drop .6s cubic-bezier(.2,.8,.2,1) both}
  @keyframes drop{from{transform:translateY(-6px);opacity:.4}to{transform:none;opacity:1}}
}

.hiw{padding-block:0 24px}
.hiw .hero .btn{justify-self:start}
.hiw h1,.hiw h2,.hiw h3{letter-spacing:0}
.hiw .fine-note{margin-top:48px;font-size:13px;color:var(--muted);max-width:90ch}