/* Apportion Real Estate
   Layout: a surveyor's elevation sheet. Buildings drawn as line elevations,
   gridded into fractions; saffron marks the share an investor holds. */
:root{
  --paper:#F3F6F5; --surface:#FFFFFF; --ink:#0F1E22; --muted:#4E605D; --line:#D3DDDA;
  --spruce:#14524A; --spruce-deep:#0D3833; --wash:#E3EDEA; --saffron:#E0A030; --saffron-soft:#F7E3BC; --on-spruce:#F3F6F5;
  --danger:#A8322A; --ok:#1F7A4D;
  --w1:#D9A588; --w2:#EADFCB; --w3:#CBDCD5; --w4:#BCC9D8; --sky:#E4EEF0;
  --o1:#E0A030; --o2:#1F7A6C; --o3:#C46A4A; --o4:#5A78A8; --o5:#D6DEE6; --steel:#A9B9C9; --steel-hi:#D3DEE8; --asphalt:#D5DBDA;
  --f-display:"Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --f-body:"Instrument Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --s-1:.8125rem; --s0:1rem; --s1:1.1875rem; --s2:1.5rem; --s3:2rem; --s4:clamp(2.25rem,5vw,3.5rem); --s5:clamp(2.75rem,7.5vw,5.25rem);
  --r:6px; --wrap:1180px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#0A1315; --surface:#101D20; --ink:#E5EEEC; --muted:#97AAA6; --line:#22373B;
  --spruce:#5CC0AA; --spruce-deep:#0E2A27; --wash:#13282A; --saffron:#EFB650; --saffron-soft:#3B2E14; --on-spruce:#E5EEEC;
  --danger:#E57A6F; --ok:#5CC08A; --w1:#5E3D30; --w2:#4A4437; --w3:#294039; --w4:#2D3A49; --sky:#0F1D21; --o1:#EFB650; --o2:#4FB39F; --o3:#D98463; --o4:#7E9CCC; --o5:#2B3A45; --steel:#22313D; --steel-hi:#33475A; --asphalt:#162226; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#0A1315; --surface:#101D20; --ink:#E5EEEC; --muted:#97AAA6; --line:#22373B;
  --spruce:#5CC0AA; --spruce-deep:#0E2A27; --wash:#13282A; --saffron:#EFB650; --saffron-soft:#3B2E14; --on-spruce:#E5EEEC;
  --danger:#E57A6F; --ok:#5CC08A; --w1:#5E3D30; --w2:#4A4437; --w3:#294039; --w4:#2D3A49; --sky:#0F1D21; --o1:#EFB650; --o2:#4FB39F; --o3:#D98463; --o4:#7E9CCC; --o5:#2B3A45; --steel:#22313D; --steel-hi:#33475A; --asphalt:#162226; color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:var(--s0);line-height:1.6}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--paper)}
img,svg{max-width:100%}
a{color:var(--spruce);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--saffron);outline-offset:2px;border-radius:2px}
h1,h2,h3,h4{font-family:var(--f-display);line-height:1.08;letter-spacing:-.02em;text-wrap:balance;margin:0}
h1{font-size:var(--s5);font-weight:700}
h2{font-size:var(--s4);font-weight:650}
h3{font-size:var(--s2);font-weight:600;letter-spacing:-.01em}
p{margin:0}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--paper);padding:.5rem 1rem;z-index:50}
.skip:focus{left:1rem}

.wrap{max-width:var(--wrap);margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
@media (min-width:720px){.wrap{padding-left:max(32px,env(safe-area-inset-left,0px));padding-right:max(32px,env(safe-area-inset-right,0px))}}
.band{padding-block:clamp(3rem,8vw,6rem)}
.band.tint{background:var(--wash)}
.band.dark{background:var(--spruce-deep);color:var(--on-spruce)}
.band.dark a{color:var(--saffron)}
.stack{display:grid;gap:1rem}
.label{font-family:var(--f-mono);font-size:var(--s-1);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.band.dark .label{color:color-mix(in srgb,var(--on-spruce) 70%,transparent)}
.lede{font-size:var(--s1);color:var(--muted);max-width:60ch}
.band.dark .lede{color:color-mix(in srgb,var(--on-spruce) 80%,transparent)}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}

/* Notice bar */
.notice{background:var(--ink);color:var(--paper);font-size:var(--s-1)}
.notice .wrap{padding-block:.55rem;display:flex;gap:.5rem 1rem;flex-wrap:wrap;align-items:center;justify-content:space-between}
.notice a{color:var(--saffron)}
.notice strong{font-family:var(--f-mono);font-weight:500;letter-spacing:.06em;text-transform:uppercase;font-size:.75rem}

/* Header */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;gap:1rem;min-height:64px}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink);margin-right:auto}
.brand svg{width:32px;height:32px;flex:none}
.brand b{font-family:var(--f-display);font-size:1.3rem;font-weight:700;letter-spacing:-.02em;line-height:1}
.brand small{display:block;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:.2rem}
.nav{display:flex;gap:.25rem;align-items:center}
.nav a{color:var(--ink);text-decoration:none;padding:.5rem .7rem;border-radius:var(--r);font-weight:500}
.nav a:hover,.nav a[aria-current="page"]{background:var(--wash)}
.nav .btn{margin-left:.5rem}
.menu-btn{display:none;background:none;border:1px solid var(--line);border-radius:var(--r);padding:.5rem .7rem;color:var(--ink);font:inherit;font-weight:600;cursor:pointer}
@media (max-width:900px){
  .menu-btn{display:block}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;background:var(--surface);border-bottom:1px solid var(--line);padding:.75rem max(16px,env(safe-area-inset-right,0px)) 1rem max(16px,env(safe-area-inset-left,0px))}
  .nav.open{display:flex}
  .nav .btn{margin:.5rem 0 0}
}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.8rem 1.25rem;border-radius:var(--r);font-weight:600;text-decoration:none;border:1.5px solid transparent;cursor:pointer;font-family:var(--f-body);font-size:1rem;line-height:1.2}
.btn-primary{background:var(--spruce);color:var(--surface)}
:root:not([data-theme="light"]) .btn-primary{color:var(--paper)}
.btn-primary:hover{background:var(--spruce-deep);color:var(--on-spruce);border-color:var(--spruce)}
.btn-ghost{border-color:currentColor;color:inherit;background:transparent}
.btn-ghost:hover{background:var(--wash)}
.band.dark .btn-ghost:hover{background:color-mix(in srgb,var(--on-spruce) 10%,transparent)}
.btn-saffron{background:var(--saffron);color:#1D1406}
.btn-saffron:hover{filter:brightness(1.06)}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem}

/* Hero */
.hero{padding-block:clamp(2.5rem,6vw,5rem) clamp(2rem,4vw,3rem);border-bottom:1px solid var(--line);overflow:hidden}
.hero-grid{display:grid;gap:2.5rem;align-items:end}
@media (min-width:960px){.hero-grid{grid-template-columns:1.05fr 1fr}}
.hero h1 em{font-style:normal;color:var(--spruce);background:linear-gradient(transparent 62%,var(--saffron-soft) 62%)}
.hero .lede{margin-top:1.25rem}
.hero .btn-row{margin-top:2rem}
.hero-art{position:relative}
.hero-art svg{display:block;width:100%;height:auto}
.sheet-tag{position:absolute;right:0;bottom:-.25rem;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}

/* Elevation drawing tokens (used inside inline SVG) */
.el-ground{stroke:var(--ink);stroke-width:2}
.el-wall{fill:var(--surface);stroke:var(--ink);stroke-width:1.5}
.el-wall-alt{fill:var(--wash);stroke:var(--ink);stroke-width:1.5}
.el-win{fill:var(--wash);stroke:var(--ink);stroke-width:1}
.el-win-lit{fill:var(--saffron-soft);stroke:var(--ink);stroke-width:1}
.el-roof{fill:var(--ink)}
.el-door{fill:var(--spruce)}
.el-grid{fill:none;stroke:var(--spruce);stroke-width:.6;stroke-dasharray:2 2;opacity:.65}
.el-cell{fill:var(--saffron);opacity:.82}
.el-dim{stroke:var(--muted);stroke-width:.8}
.el-text{fill:var(--muted);font-family:var(--f-mono);font-size:9px;letter-spacing:.08em}
.el-sky{fill:var(--paper)}
@media (prefers-reduced-motion:no-preference){
  .el-cell{animation:cell 3.2s ease-in-out infinite alternate}
}
@keyframes cell{from{opacity:.82}to{opacity:.55}}

/* Facts row */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:2.5rem}
.facts div{background:var(--surface);padding:1.1rem 1.25rem}
.facts b{display:block;font-family:var(--f-display);font-size:1.15rem;letter-spacing:-.01em}
.facts span{font-size:var(--s-1);color:var(--muted)}

/* Section heads */
.sec-head{display:grid;gap:.75rem;margin-bottom:2.5rem;max-width:760px}

/* Steps */
.steps{display:grid;gap:1.5rem;counter-reset:s}
@media (min-width:820px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{border-top:2px solid var(--ink);padding-top:1rem;display:grid;gap:.5rem;align-content:start}
.band.dark .step{border-color:var(--on-spruce)}
.step .num{font-family:var(--f-mono);font-size:var(--s-1);color:var(--saffron)}
.step h3{font-size:1.25rem}
.step p{color:var(--muted)}
.band.dark .step p{color:color-mix(in srgb,var(--on-spruce) 78%,transparent)}

/* Cards */
.grid{display:grid;gap:1.25rem}
@media (min-width:640px){.grid.c2{grid-template-columns:repeat(2,1fr)}.grid.c3{grid-template-columns:repeat(2,1fr)}.grid.c4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.grid.c3{grid-template-columns:repeat(3,1fr)}.grid.c4{grid-template-columns:repeat(4,1fr)}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);display:flex;flex-direction:column;min-width:0;text-decoration:none;color:inherit;transition:border-color .15s, transform .15s}
a.card:hover{border-color:var(--spruce);transform:translateY(-2px)}
.card .art{border-bottom:1px solid var(--line);background:var(--paper);padding:1rem 1rem 0}
.card .art svg{display:block;width:100%;height:auto}
.card .body{padding:1.1rem 1.25rem 1.25rem;display:grid;gap:.45rem;align-content:start;flex:1}
.card h3{font-size:1.2rem}
.card p{color:var(--muted);font-size:.95rem}
.tag{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;padding:.2rem .5rem;border-radius:3px;background:var(--wash);color:var(--spruce);width:fit-content}
.tag.ill{background:var(--saffron-soft);color:var(--ink)}
.meta{display:flex;flex-wrap:wrap;gap:.25rem 1rem;font-size:var(--s-1);color:var(--muted);font-family:var(--f-mono)}

/* Fraction bar */
.frac{display:grid;grid-template-columns:repeat(20,1fr);gap:2px;margin-top:.35rem}
.frac i{aspect-ratio:1;background:var(--wash);border-radius:1px}
.frac i.on{background:var(--saffron)}

/* Two column prose layout */
.prose-layout{display:grid;gap:3rem}
@media (min-width:980px){.prose-layout{grid-template-columns:minmax(0,1fr) 300px}}
.prose{max-width:68ch;min-width:0}
.prose > * + *{margin-top:1.1rem}
.prose h2{font-size:var(--s3);margin-top:2.5rem}
.prose h3{margin-top:1.75rem}
.prose ul,.prose ol{padding-left:1.25rem;display:grid;gap:.4rem}
.prose li::marker{color:var(--spruce)}
.prose ul.check{list-style:none;padding:0}
.prose ul.check li{padding-left:1.75rem;position:relative}
.prose ul.check li::before{content:"";position:absolute;left:0;top:.35em;width:1rem;height:1rem;border:1.5px solid var(--spruce);border-radius:3px}
.formula{font-family:var(--f-mono);background:var(--wash);padding:.75rem 1rem;border-radius:var(--r);font-size:.95rem}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:.95rem}
th,td{text-align:left;padding:.7rem .9rem;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:var(--f-mono);font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);background:var(--wash)}
tr:last-child td{border-bottom:0}
.aside{display:grid;gap:1rem;align-content:start}
@media (min-width:980px){.aside{position:sticky;top:calc(84px + env(safe-area-inset-top,0px))}}
.box{border:1px solid var(--line);border-radius:var(--r);padding:1.25rem;background:var(--surface);display:grid;gap:.6rem}
.box h3{font-size:1.1rem}
.box ul{margin:0;padding-left:1.1rem;display:grid;gap:.35rem;font-size:.95rem}
.box.cta{background:var(--spruce-deep);color:var(--on-spruce);border-color:var(--spruce-deep)}
.box.cta p{color:color-mix(in srgb,var(--on-spruce) 80%,transparent);font-size:.95rem}

/* Page head */
.page-head{padding-block:clamp(2rem,5vw,3.5rem) clamp(1.75rem,4vw,2.75rem);border-bottom:1px solid var(--line)}
.page-head h1{font-size:var(--s4);margin-top:.75rem}
.page-head .lede{margin-top:1rem}
.crumbs{font-family:var(--f-mono);font-size:var(--s-1);color:var(--muted);display:flex;flex-wrap:wrap;gap:.35rem}
.crumbs a{color:var(--muted)}
.crumbs span[aria-hidden]{opacity:.6}
.place-head{display:grid;gap:2rem;align-items:end}
@media (min-width:900px){.place-head{grid-template-columns:1fr 1fr}}
.place-head svg{width:100%;height:auto;display:block}

/* Key-value list */
.kv{display:grid;grid-template-columns:auto 1fr;gap:.55rem 1.25rem;font-size:.95rem;margin:0}
.kv dt{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding-top:.2rem}
.kv dd{margin:0}

/* Chips and filter */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}
.chip{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:.4rem .9rem;font:inherit;font-size:.9rem;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.search{display:flex;gap:.5rem;margin-bottom:2rem;max-width:520px}
input,select,textarea{font:inherit;color:var(--ink);background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);padding:.75rem .9rem;width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--spruce);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--spruce) 25%,transparent)}
label{font-weight:600;font-size:.95rem}
.region-block{margin-top:2.5rem}
.region-block h2{font-size:var(--s2);display:flex;align-items:baseline;gap:.75rem;border-bottom:1px solid var(--line);padding-bottom:.6rem;margin-bottom:1rem}
.region-block h2 .mono{font-size:.8rem;color:var(--muted);font-weight:400}
.place-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.25rem 1rem;list-style:none;margin:0;padding:0}
.place-list a{display:flex;justify-content:space-between;gap:.5rem;padding:.45rem 0;border-bottom:1px dashed var(--line);color:var(--ink);text-decoration:none}
.place-list a:hover{color:var(--spruce)}
.place-list small{font-family:var(--f-mono);color:var(--muted);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em}

/* Forms */
.form{display:grid;gap:1rem;max-width:560px}
.form .row{display:grid;gap:1rem}
@media (min-width:560px){.form .row{grid-template-columns:1fr 1fr}}
.field{display:grid;gap:.35rem}
.consent{display:flex;gap:.6rem;align-items:flex-start;font-weight:400;font-size:.9rem;color:var(--muted)}
.consent input{width:auto;margin-top:.25rem}
.form-msg{padding:.9rem 1rem;border-radius:var(--r);font-size:.95rem}
.form-msg.ok{background:color-mix(in srgb,var(--ok) 14%,var(--surface));border:1px solid var(--ok)}
.form-msg.err{background:color-mix(in srgb,var(--danger) 12%,var(--surface));border:1px solid var(--danger)}
.band.dark input,.band.dark select{background:var(--surface)}
.band.dark .consent{color:color-mix(in srgb,var(--on-spruce) 75%,transparent)}

/* Calculator */
.calc{display:grid;gap:2rem}
@media (min-width:900px){.calc{grid-template-columns:340px 1fr}}
.calc .inputs{display:grid;gap:1.1rem;align-content:start}
.range-row{display:grid;gap:.3rem}
.range-row .top{display:flex;justify-content:space-between;gap:1rem}
.range-row output{font-family:var(--f-mono);font-variant-numeric:tabular-nums;color:var(--spruce);font-weight:500}
input[type=range]{padding:0;border:0;accent-color:var(--spruce);background:transparent}
.results{display:grid;gap:1.25rem;min-width:0}
.res-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.res-tiles div{background:var(--surface);padding:1rem 1.1rem}
.res-tiles b{display:block;font-family:var(--f-display);font-size:1.6rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.res-tiles span{font-size:var(--s-1);color:var(--muted)}
.chart{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1rem;overflow-x:auto}
.chart svg{display:block;width:100%;min-width:420px;height:auto}
.c-axis{stroke:var(--line)}
.c-txt{fill:var(--muted);font-family:var(--f-mono);font-size:10px}
.c-cap{fill:var(--spruce)}
.c-inc{fill:var(--saffron)}
.legend{display:flex;gap:1.25rem;flex-wrap:wrap;font-size:var(--s-1);color:var(--muted)}
.legend i{display:inline-block;width:.75rem;height:.75rem;border-radius:2px;margin-right:.4rem;vertical-align:-1px}
.small{font-size:var(--s-1);color:var(--muted)}

/* FAQ */
details{border-bottom:1px solid var(--line);padding:1rem 0}
details summary{cursor:pointer;font-family:var(--f-display);font-weight:600;font-size:1.15rem;list-style:none;display:flex;justify-content:space-between;gap:1rem}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";font-family:var(--f-mono);color:var(--spruce);font-size:1.25rem;line-height:1}
details[open] summary::after{content:"–"}
details p{margin-top:.6rem;color:var(--muted);max-width:68ch}

/* Risk panel */
.risk{border:1.5px solid var(--ink);border-radius:var(--r);padding:1.1rem 1.25rem;display:grid;gap:.4rem;background:var(--surface)}
.risk strong{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase}
.risk p{font-size:.92rem;color:var(--muted)}

/* Footer */
.site-foot{background:var(--ink);color:var(--paper);padding-block:3.5rem 2rem;font-size:.92rem}
.site-foot a{color:var(--paper);text-decoration:none;opacity:.82}
.site-foot a:hover{opacity:1;text-decoration:underline}
.foot-grid{display:grid;gap:2rem}
@media (min-width:820px){.foot-grid{grid-template-columns:1.4fr repeat(4,1fr)}}
.foot-grid h4{font-family:var(--f-mono);font-size:.72rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;opacity:.65;margin-bottom:.75rem}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.foot-legal{margin-top:3rem;padding-top:1.5rem;border-top:1px solid color-mix(in srgb,var(--paper) 18%,transparent);display:grid;gap:.75rem;font-size:.82rem;opacity:.8;max-width:900px}
.foot-brand p{opacity:.75;margin-top:.75rem;max-width:34ch}
.site-foot .brand{color:var(--paper)}
.site-foot .brand small{color:var(--paper);opacity:.6}
.theme-btn{background:none;border:1px solid color-mix(in srgb,var(--paper) 30%,transparent);color:var(--paper);border-radius:var(--r);padding:.4rem .8rem;font:inherit;font-size:.82rem;cursor:pointer;margin-top:1rem}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Facade colours */
.el-w1{fill:var(--w1);stroke:var(--ink);stroke-width:1.5}
.el-w2{fill:var(--w2);stroke:var(--ink);stroke-width:1.5}
.el-w3{fill:var(--w3);stroke:var(--ink);stroke-width:1.5}
.el-w4{fill:var(--w4);stroke:var(--ink);stroke-width:1.5}
.el-tree{fill:var(--spruce);opacity:.55}
.el-skyband{fill:var(--sky)}

/* FCA-style risk bar */
.riskbar{background:var(--saffron-soft);color:var(--ink);font-size:.86rem;border-bottom:1px solid var(--line)}
.riskbar .wrap{display:flex;gap:.5rem 1rem;align-items:center;justify-content:space-between;padding-block:.6rem;flex-wrap:wrap}
.riskbar a{color:var(--ink);font-weight:600}
.riskbar button{background:none;border:1px solid var(--ink);color:var(--ink);border-radius:var(--r);padding:.2rem .6rem;font:inherit;font-size:.8rem;cursor:pointer}

/* Hero deal mockup */
.mock{position:relative;display:grid}
.mock-street{border:1px solid var(--line);border-radius:10px;background:var(--sky);padding:1rem 1rem 0;overflow:hidden}
.deal{background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 18px 40px -18px color-mix(in srgb,var(--ink) 45%,transparent);padding:1rem 1.1rem;display:grid;gap:.6rem;width:min(330px,100%);margin:-4.5rem 0 0 auto;position:relative}
@media (max-width:560px){.deal{margin:-2rem auto 0}}
.deal-top{display:flex;justify-content:space-between;gap:.5rem;align-items:center}
.deal h3{font-size:1.05rem}
.deal .row2{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.deal .row2 div{background:var(--paper);border-radius:6px;padding:.5rem .6rem}
.deal .row2 b{display:block;font-family:var(--f-display);font-size:1.05rem;font-variant-numeric:tabular-nums}
.deal .row2 span{font-size:.72rem;color:var(--muted)}
.hold{display:flex;align-items:center;gap:.6rem;font-size:.86rem;background:var(--wash);border-radius:6px;padding:.5rem .6rem}
.hold svg{width:34px;height:34px;flex:none}

/* Funding bar */
.fund{display:grid;gap:.3rem}
.fund-bar{height:8px;background:var(--wash);border-radius:99px;overflow:hidden}
.fund-bar i{display:block;height:100%;background:var(--spruce);border-radius:99px}
.fund-meta{display:flex;justify-content:space-between;font-size:.75rem;color:var(--muted);font-family:var(--f-mono)}

/* Deal card figures */
.figs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-top:.35rem}
.figs div{background:var(--surface);padding:.5rem .6rem}
.figs b{display:block;font-family:var(--f-display);font-size:1rem;font-variant-numeric:tabular-nums}
.figs span{font-size:.7rem;color:var(--muted)}
.card .status{display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.card .view{margin-top:.5rem;font-weight:600;color:var(--spruce)}

/* Split explainer */
.split{display:grid;gap:2rem;align-items:center}
@media (min-width:900px){.split{grid-template-columns:1fr 1fr}}
.split-steps{display:grid;gap:1rem}
.split-steps div{display:grid;grid-template-columns:auto 1fr;gap:.25rem 1rem;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:1rem}
.split-steps b{font-family:var(--f-display);font-size:1.6rem;font-variant-numeric:tabular-nums;color:var(--spruce)}
.split-steps p{grid-column:2;color:var(--muted);font-size:.95rem}
.split-art{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:1.25rem}
.split-art svg{display:block;width:100%;height:auto}

/* Benefits */
.benefits{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
@media (min-width:640px){.benefits{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.benefits{grid-template-columns:repeat(3,1fr)}}
.benefits div{background:var(--surface);padding:1.5rem;display:grid;gap:.5rem;align-content:start}
.benefits svg{width:36px;height:36px}
.benefits h3{font-size:1.15rem}
.benefits p{color:var(--muted);font-size:.95rem}

/* Comparison */
.compare th:nth-child(2),.compare td:nth-child(2){background:color-mix(in srgb,var(--saffron-soft) 60%,var(--surface))}
.compare thead th:nth-child(2){color:var(--ink)}
.compare td:first-child{font-weight:600}

/* Audience split */
.audience{display:grid;gap:1.25rem}
@media (min-width:820px){.audience{grid-template-columns:1fr 1fr}}
.audience > div{border-radius:10px;padding:2rem;display:grid;gap:.75rem;align-content:start}
.audience .inv{background:var(--spruce-deep);color:var(--on-spruce)}
.audience .inv p{color:color-mix(in srgb,var(--on-spruce) 80%,transparent)}
.audience .own{background:var(--surface);border:1px solid var(--line)}
.audience .own p{color:var(--muted)}

/* Deal summary panel */
.summary .big{font-family:var(--f-display);font-size:2rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.num-table td:last-child,.num-table th:last-child{text-align:right;font-variant-numeric:tabular-nums}
.num-table tr.total td{font-weight:700;border-top:2px solid var(--ink)}

/* Warehouse hero */
.wh-sky{fill:var(--sky)} .wh-ground{fill:var(--asphalt)} .wh-front{fill:var(--steel-hi);stroke:var(--ink);stroke-width:1.5}
.wh-side{fill:var(--steel);stroke:var(--ink);stroke-width:1.5} .wh-rib{stroke:var(--ink);stroke-width:.6;opacity:.25}
.wh-door{fill:var(--surface);stroke:var(--ink);stroke-width:1.2} .wh-glass{fill:var(--wash);stroke:var(--ink);stroke-width:1}
.wh-band{fill:var(--spruce)} .wh-line{stroke:var(--surface);stroke-width:2;stroke-dasharray:10 8;opacity:.8}
.o1{fill:var(--o1)} .o2{fill:var(--o2)} .o3{fill:var(--o3)} .o4{fill:var(--o4)} .o5{fill:var(--o5)}
.wh-roofline{fill:none;stroke:var(--ink);stroke-width:1.5}
.wh-lead{stroke:var(--ink);stroke-width:1;fill:none}
.wh-pill{fill:var(--surface);stroke:var(--ink);stroke-width:1.2}
.wh-pt{fill:var(--ink);font-family:var(--f-body);font-size:12.5px;font-weight:600}
.wh-pp{font-family:var(--f-mono);font-size:11.5px;font-weight:500}
.hero-wh{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--sky)}
.hero-wh svg{display:block;width:100%;height:auto}
.captable{background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 18px 40px -18px color-mix(in srgb,var(--ink) 45%,transparent);padding:1rem 1.1rem;display:grid;gap:.55rem;width:min(360px,100%);margin:-3.5rem 1rem 0 auto;position:relative}
@media (max-width:560px){.captable{margin:-1.5rem auto 0}}
.captable h3{font-size:1rem}
.cap-row{display:grid;grid-template-columns:12px 1fr auto;gap:.6rem;align-items:center;font-size:.9rem}
.cap-row i{width:12px;height:12px;border-radius:3px;display:block}
.cap-row b{font-family:var(--f-mono);font-weight:500;font-variant-numeric:tabular-nums}
.cap-bar{display:flex;height:10px;border-radius:99px;overflow:hidden}
.cap-bar span{display:block;height:100%}
.tag{white-space:nowrap}
.captable{margin-top:-2.25rem}