/* RuleMind theme: "loud". Flat saturated colour, ink outlines, hard shadows, big type.
   Loaded after the base sheets on every page, so it overrides tokens and components in one place. */
:root{
  --bg:#F4F0E6; --surface:#FFFFFF; --surface-2:#ECE7D9; --ink:#0B0B0C; --muted:#45454B; --line:rgba(11,11,12,.16); --edge:#0B0B0C;
  --home:#FFD60A; --drive:#7A9BFF; --land:#FF7A5C; --tax:#3DDC97; --pack:#B79BFF; --site:#C8F02D;
  --on:#0B0B0C; --hl:#0B0B0C; --hl-ink:#F4F0E6;
  --ok:#0A6B3A; --ok-bg:#CFF5DF; --warn:#6B4A00; --warn-bg:#FFEAA0; --over:#B0230F; --over-bg:#FFD9CF; --plan:#4B2FA3; --plan-bg:#E4DBFF;
  --bd:2px; --off:5px; --r:14px;
  --shadow:5px 5px 0 var(--edge);
  --sh-s:3px 3px 0 var(--edge); --sh-l:8px 8px 0 var(--edge);
  --band:var(--vc);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#111113; --surface:#1B1B1F; --surface-2:#242429; --ink:#F4F0E6; --muted:#B4B2AA; --line:rgba(244,240,230,.18); --edge:#F4F0E6;
  --home:#FFD60A; --drive:#7A9BFF; --land:#FF7A5C; --tax:#3DDC97; --pack:#B79BFF; --site:#C8F02D;
  --on:#0B0B0C; --hl:#F4F0E6; --hl-ink:#0B0B0C;
  --ok:#7BE3A8; --ok-bg:#12331F; --warn:#F5D06B; --warn-bg:#3A2D0B; --over:#FF9A88; --over-bg:#3E1E18; --plan:#CDBFFF; --plan-bg:#2B2347;
  --shadow:5px 5px 0 var(--vc); --sh-s:3px 3px 0 var(--vc); --sh-l:8px 8px 0 var(--vc);
}}
:root[data-theme="dark"]{
  --bg:#111113; --surface:#1B1B1F; --surface-2:#242429; --ink:#F4F0E6; --muted:#B4B2AA; --line:rgba(244,240,230,.18); --edge:#F4F0E6;
  --home:#FFD60A; --drive:#7A9BFF; --land:#FF7A5C; --tax:#3DDC97; --pack:#B79BFF; --site:#C8F02D;
  --on:#0B0B0C; --hl:#F4F0E6; --hl-ink:#0B0B0C;
  --ok:#7BE3A8; --ok-bg:#12331F; --warn:#F5D06B; --warn-bg:#3A2D0B; --over:#FF9A88; --over-bg:#3E1E18; --plan:#CDBFFF; --plan-bg:#2B2347;
  --shadow:5px 5px 0 var(--vc); --sh-s:3px 3px 0 var(--vc); --sh-l:8px 8px 0 var(--vc);
}

/* ---- page: a flat colour band behind the top, not a gradient ---- */
body{font-size:17.5px;background:var(--bg)}
body::before{display:none}
/* the hero is a full-bleed flat colour band that hugs its own content */
.hero,.hhero,.cx-hero{position:relative;background:var(--vc);box-shadow:0 0 0 100vmax var(--vc),0 var(--bd) 0 100vmax var(--edge);clip-path:inset(0 -100vmax calc(var(--bd) * -1) -100vmax);max-width:none;padding-block:30px 40px;margin-bottom:26px}
.hero>*,.hhero>*,.cx-hero>*{max-width:820px}
.hhero>*,.cx-hero>*{max-width:none}
.hhero .hero{background:none;box-shadow:none;clip-path:none;padding:0;margin:0}
h1,h2,h3{letter-spacing:-.035em}
a{color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;text-decoration-color:var(--vc)}
a:hover{background:var(--vc);text-decoration-color:var(--ink)}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 6px var(--vc);border-radius:8px}
::selection{background:var(--vc);color:#0B0B0C}

/* ---- header ---- */
.top{background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:var(--bd) solid var(--edge)}
.brand{color:var(--ink);text-decoration:none;background:none!important}
.brand:hover{background:none}
nav.main a{border:var(--bd) solid transparent;border-radius:99px;color:var(--ink);font-weight:700;text-decoration:none;padding:6px 14px;transition:transform .12s,box-shadow .12s,background .12s}
nav.main a:hover{background:var(--surface-2);border-color:var(--edge)}
nav.main a[aria-current="page"],nav.main.has-pill a[aria-current="page"],html[data-view] nav.main a[aria-current="page"]{background:var(--vc);color:#0B0B0C;border-color:var(--edge);box-shadow:var(--sh-s)}
.navpill,nav.main.has-pill .navpill{display:none!important}
.tv{display:none}
.menubtn{border:var(--bd) solid var(--edge);background:var(--surface);color:var(--ink);box-shadow:var(--sh-s);border-radius:99px;font-weight:800}
.menubtn:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--edge)}
nav.main.open{border:var(--bd) solid var(--edge);box-shadow:var(--sh-l);background:var(--surface);border-radius:var(--r)}

/* ---- headings and stickers ---- */
.hero h1{font-size:clamp(38px,6.8vw,78px);line-height:.96;font-weight:800;letter-spacing:-.045em}
.hero p{color:var(--ink);opacity:.82;font-weight:500}
.kicker,.cx .eyebrow{background:var(--c,var(--vc));color:#0B0B0C;border:var(--bd) solid var(--edge);border-radius:99px;padding:4px 12px;box-shadow:var(--sh-s);width:fit-content;font-family:var(--mono);font-size:12px;letter-spacing:.06em;font-weight:600}
.kicker::before,.cx .eyebrow::before{background:#0B0B0C;width:7px;height:7px;border-radius:50%}
.cx .eyebrow{margin-bottom:16px;gap:8px}
.cx .eyebrow::before{height:7px}
.blk>h2,.cx h2{font-size:clamp(30px,5vw,54px);line-height:1;letter-spacing:-.04em}
.lead,.sub,.cx .sub{color:var(--muted);font-weight:500}

/* ---- cards, panels ---- */
.card,.ledger,.sheet3,.statebar{background:var(--surface);border:var(--bd) solid var(--edge);border-radius:var(--r);box-shadow:var(--shadow)}
.hub{background:var(--c,var(--vc));border:var(--bd) solid var(--edge);border-radius:var(--r);box-shadow:var(--shadow);color:#0B0B0C;transition:transform .14s,box-shadow .14s}
.hub:hover{transform:translate(-3px,-3px);box-shadow:var(--sh-l)}
.hub .kicker{background:#fff}
.hub h2{font-size:clamp(24px,2.6vw,32px);letter-spacing:-.04em;color:#0B0B0C}
.hub p,.hub li a{color:#0B0B0C;font-weight:600}
.hub li a{text-decoration-color:#0B0B0C}
.hub li a:hover{background:#0B0B0C;color:#fff}
.grid4 .hub{min-height:100%}
.promise div{border-top:var(--bd) solid var(--edge)}

/* ---- buttons ---- */
.btn{border:var(--bd) solid var(--edge);border-radius:12px;background:var(--c,var(--vc));color:#0B0B0C;font-weight:800;font-size:16px;padding:11px 20px;box-shadow:var(--sh-s);text-decoration:none;transition:transform .12s,box-shadow .12s,background .12s}
.btn:hover{filter:none;background:var(--c,var(--vc));transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--edge)}
.btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--edge)}
.btn.alt,.btn.plain{background:var(--surface);color:var(--ink)}
.btn.alt:hover,.btn.plain:hover{background:var(--surface)}
.btn[aria-disabled="true"]{opacity:.5;box-shadow:none;transform:none}
.hero .btn:not(.alt):not(.plain){background:#0B0B0C;color:#fff;border-color:#0B0B0C;box-shadow:4px 4px 0 var(--surface),4px 4px 0 2px var(--edge)}
:root[data-theme="dark"] .hero .btn:not(.alt):not(.plain){background:var(--surface);color:var(--ink)}

/* ---- form controls ---- */
input[type=text],input[type=number],input[type=date],input[type=search],select{border:var(--bd) solid var(--edge);border-radius:12px;background:var(--surface);color:var(--ink);font-weight:600}
input:focus,select:focus{box-shadow:0 0 0 4px var(--vc);outline:none}
.seg label,.chipb,.seg2{border:var(--bd) solid var(--edge);border-radius:12px;font-weight:700;background:var(--surface);color:var(--ink)}
.seg input:checked+label,.seg2 button[aria-pressed="true"],.chip.ink{background:var(--vc);color:#0B0B0C;border-color:var(--edge);box-shadow:var(--sh-s)}
.seg2 button[aria-pressed="true"]{box-shadow:none}
.seg2{overflow:hidden}
.seg input:focus-visible+label{outline:3px solid var(--ink);outline-offset:2px}
.chipb:hover{background:var(--surface);border-color:var(--edge);box-shadow:var(--sh-s);transform:translate(-1px,-1px)}
.chipb:active{transform:translate(2px,2px);box-shadow:none}
.chipb[disabled]{opacity:.35;box-shadow:none}
.tabs button,.filters button{border:var(--bd) solid var(--edge);border-radius:99px;background:var(--surface);color:var(--ink);font-weight:700}
.tabs button[aria-selected="true"],.filters button[aria-pressed="true"]{background:var(--vc);color:#0B0B0C;box-shadow:var(--sh-s)}
.chip{border:1.5px solid var(--edge);font-weight:700}
.exbar{background:var(--warn-bg);border:var(--bd) solid var(--edge);border-radius:12px;color:var(--ink)}
.exbar button{border:var(--bd) solid var(--edge);background:var(--surface);color:var(--ink);font-weight:800;box-shadow:var(--sh-s)}
details.acc,details.more{border:var(--bd) solid var(--edge);border-radius:12px;background:var(--surface);box-shadow:var(--sh-s)}
details.acc>summary{font-weight:800}
.out{background:var(--surface-2);border:var(--bd) solid var(--edge);border-radius:12px}
.kv{border-top:1.5px dashed var(--line)}
.tbl th,.ptable thead th{background:transparent}
.tbl table,.sheet table{border-collapse:collapse}
.tbl th{background:var(--edge);color:var(--bg)}
.tbl td,.tbl th{border-color:var(--line)}

/* ---- driving map and charge cards ---- */
.mapwrap,#map{border-radius:var(--r)}
.mapwrap{border:var(--bd) solid var(--edge);box-shadow:var(--shadow);overflow:hidden}
.ccard{border:var(--bd) solid var(--edge);border-radius:var(--r);background:var(--surface);box-shadow:var(--sh-s);transition:transform .12s,box-shadow .12s}
.ccard:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--edge)}
.ccard.sel{background:var(--vc);color:#0B0B0C}
.legend{border:var(--bd) solid var(--edge);background:var(--surface);color:var(--ink);border-radius:12px}
.dside{border-radius:var(--r)}

/* ---- landlord timeline ---- */
.item{border:var(--bd) solid var(--edge);border-radius:var(--r);background:var(--surface);box-shadow:var(--sh-s)}
.item .tile{border:var(--bd) solid var(--edge);background:var(--vc);color:#0B0B0C;border-radius:12px}
.item.over{background:var(--over-bg)}
.clist li{border:1.5px solid var(--edge);border-radius:12px}

/* ---- home ---- */
.hhero{padding-block:34px 44px}
.hhero .hero h1{font-size:clamp(36px,6.2vw,76px);line-height:1;letter-spacing:-.045em;max-width:16ch;text-wrap:balance}
.hhero .hero h1 em{font-style:normal;background:#0B0B0C;color:var(--home);padding:0 .12em;white-space:nowrap;border-radius:.12em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.stats div{border-top:4px solid var(--edge)}
.stats dt{font-size:clamp(24px,2.7vw,34px);letter-spacing:-.04em;overflow-wrap:normal}
.answers::before{display:none}
.ans{background:var(--surface);border:var(--bd) solid var(--edge);border-radius:var(--r);box-shadow:var(--sh-l)}
.answers{transform:rotate(1.2deg);transition:transform .3s}
.answers:hover{transform:none}
.ans .kicker{box-shadow:none}
.dots button{border:var(--bd) solid var(--edge);background:var(--surface)}
.dots button[aria-selected="true"]{background:var(--vc)}
.sticker{position:absolute;right:clamp(-4px,1vw,14px);top:-22px;z-index:3;display:grid;place-items:center;width:112px;height:112px;border-radius:50%;background:#0B0B0C;color:var(--home);border:var(--bd) solid var(--edge);font-family:var(--display);font-weight:800;font-size:15px;line-height:1.05;text-align:center;letter-spacing:-.02em;transform:rotate(-12deg);box-shadow:var(--sh-s);animation:wob 6s ease-in-out infinite}
@keyframes wob{50%{transform:rotate(-4deg) scale(1.04)}}
.hhero .answers{position:relative}

/* marquee band */
.marq{margin:8px -20px 8px;overflow:hidden;background:#0B0B0C;color:var(--home);border-block:var(--bd) solid var(--edge);transform:rotate(-1deg);position:relative;z-index:2}
.marq-in{display:flex;width:max-content;animation:mq 34s linear infinite}
.marq:hover .marq-in{animation-play-state:paused}
.marq span{font-family:var(--display);font-weight:800;font-size:clamp(20px,3vw,30px);letter-spacing:-.02em;padding:12px 26px;white-space:nowrap}
.marq span::after{content:"◆";margin-left:52px;color:#fff;font-size:.6em;vertical-align:.18em}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---- packs ---- */
.pk,.bundle,.pack,.tool{border:var(--bd) solid var(--edge);border-radius:var(--r);box-shadow:var(--shadow)}
.pk:hover{transform:translate(-2px,-2px);box-shadow:var(--sh-l)}
.bundle:last-child{background:var(--vc)!important;color:#0B0B0C}

/* ---- footer: a black band ---- */
footer{margin:64px -20px -48px;padding:34px max(20px,calc((100vw - 1120px)/2)) 40px;background:#0B0B0C;color:#F4F0E6;border-top:var(--bd) solid var(--edge);gap:10px}
footer a{color:#fff;text-decoration-color:var(--vc)}
footer a:hover{background:var(--vc);color:#0B0B0C}
footer b{color:var(--vc)}
footer p{opacity:.9}
:root[data-theme="dark"] footer,:root:not([data-theme="light"]) footer{border-top-color:#F4F0E6}

/* ================= construction section ================= */
.cx h1{font-size:clamp(42px,8vw,92px);line-height:.93;letter-spacing:-.05em}
.cx .status{border:var(--bd) solid var(--edge);background:var(--surface);color:var(--ink);font-weight:600;box-shadow:var(--sh-s)}
.ledger{overflow:hidden;box-shadow:var(--sh-l)}
.ledger-h{background:var(--site);border-bottom:var(--bd) solid var(--edge);color:#0B0B0C}
.ledger-h small{color:#0B0B0C;opacity:.75;font-weight:600}
.ledger-sum{border-bottom:var(--bd) solid var(--edge)}
.ledger li{border-top:1.5px dashed var(--line)}
.ledger-sum b{font-size:34px;letter-spacing:-.04em}
.pill{border:1.5px solid var(--edge);color:#0B0B0C!important;font-weight:800}
.pill.open{background:#FF7A5C}.pill.fixed{background:#FFD60A}.pill.done{background:#3DDC97}
.cnt{border:1.5px solid var(--edge);color:#0B0B0C!important;background:#FF7A5C!important}
.steps li,.steps li:last-child{border-color:var(--edge)}
.steps b{letter-spacing:-.03em}
@media (min-width:901px){.steps b{font-size:21px}}
.steps li[aria-current="step"]::after{height:5px;background:#0B0B0C}
.steps li[aria-current="step"] .no{color:#0B0B0C}
.phone{box-shadow:var(--sh-l);border:var(--bd) solid var(--edge)}
.rows>div,.layers li,.prod{border-color:var(--edge)}
.rows>div:last-child,.layers li:last-child,.prod:last-of-type{border-bottom-color:var(--edge)}
.rows>div,.layers li{border-top-width:2px}
.layers .k{color:#0B0B0C;background:var(--site);border:1.5px solid var(--edge);border-radius:8px;height:fit-content;text-align:center;padding:2px 0}
.st{border:var(--bd) solid var(--edge);color:#0B0B0C!important}
.st.ok{background:#3DDC97}.st.wait{background:#FFD60A}.st.off{background:var(--surface-2);color:var(--ink)!important}
.st small{opacity:.8}
.faq{border-top:var(--bd) solid var(--edge)}
.faq details{border-bottom:var(--bd) solid var(--edge)}
.faq summary::after{color:var(--ink)}
.ptable{border:var(--bd) solid var(--edge);border-radius:var(--r);overflow:hidden;background:var(--surface);box-shadow:var(--shadow);border-collapse:separate;border-spacing:0}
.ptable th,.ptable td{border-top:1.5px solid var(--line)}
.ptable thead th{border-top:0;border-bottom:var(--bd) solid var(--edge)}
.ptable .rec{background:var(--site);color:#0B0B0C}
.ptable .rec .pn,.ptable .rec .pp{color:#0B0B0C}
.ptable td.y::before{color:var(--ok)}
.ptable .rec small{color:#0B0B0C}
.swatches button[aria-pressed="true"]{box-shadow:0 0 0 3px var(--edge)}
.brandctl input[type=text]{border:var(--bd) solid var(--edge)}
.law h3{letter-spacing:-.03em}

/* ---- motion: snappy, meaningful, and off when asked ---- */
@media (prefers-reduced-motion: reduce){.marq-in{animation:none;flex-wrap:wrap;width:auto}.sticker{animation:none}.answers{transform:none}}
@media (max-width:900px){
  .hero,.hhero,.cx-hero{padding-block:24px 32px}
  .sticker{width:88px;height:88px;font-size:12.5px;top:-30px;right:0}
  .marq{margin-inline:-20px}
  .answers{transform:none}
  footer{margin-bottom:-48px}
}

.hero,.hhero .hero,.cx-hero .copy{color:#0B0B0C}
.hero p,.hhero .hero p,.cx-hero .sub,.cx-hero .cx-flow-words{color:#0B0B0C;opacity:.85}
.cx-hero .cx-flow-words b{color:#0B0B0C}
.cx-hero .cx-flow-words span::after{color:#0B0B0C;opacity:.4}
.hero .kicker,.hhero .kicker,.cx-hero .eyebrow{background:#fff}
.hero .stats dd,.hhero .stats dd{color:#0B0B0C;opacity:.8}
.hero .stats div{border-top-color:#0B0B0C}
.hero .btn.alt,.hero .btn.plain{background:#fff;color:#0B0B0C}
.hero a{color:#0B0B0C}
.cx-hero .status{background:#fff;color:#0B0B0C}
.hero{gap:14px}
section.view{padding-block:0 10px}
.cx section:first-child{padding-top:0}
@media (max-width:900px){section.view{padding-block:0 6px}}
@media (max-width:760px){
  footer{margin-inline:-16px;padding-inline:16px}
  .marq{margin-inline:-16px}
}

.marq-clip{overflow:hidden;margin-inline:-20px;padding-block:6px}
.marq-clip .marq{margin-inline:0}
@media (max-width:760px){.marq-clip{margin-inline:-16px}}

.kicker{color:#0B0B0C!important}
.hero .kicker{margin-top:0}
.hero p.kicker,.hero .kicker{font-size:12px;line-height:1.3;opacity:1;font-weight:600;color:#0B0B0C;display:inline-flex}
.kicker a{text-decoration:none;color:#0B0B0C}
.kicker a:hover{background:none;text-decoration:underline}

/* ---- laptop sizing pass ---- */
footer{margin:56px -20px -48px;padding:30px 20px 34px;box-shadow:0 0 0 100vmax #0B0B0C;clip-path:inset(0 -100vmax -48px -100vmax);position:relative}
footer p{max-width:110ch;font-size:14px;line-height:1.6}
@media (min-width:901px){
  body{font-size:16px}
  .hero h1{font-size:clamp(34px,4.6vw,58px)}
  .hhero .hero h1{font-size:clamp(34px,4.8vw,60px);max-width:17ch}
  .cx h1,.cx-hero h1{font-size:clamp(34px,4.8vw,58px);line-height:1}
  .blk>h2,.cx h2{font-size:clamp(26px,3.2vw,38px)}
  .cx .sub{font-size:17.5px}
  .btn{font-size:15px;padding:9px 16px}
  .hero,.hhero,.cx-hero{padding-block:22px 30px}
  .kicker{font-size:12px}
  .hero p{font-size:16.5px}
  .stats dt{font-size:clamp(22px,2.2vw,28px)}
  .marq span{font-size:clamp(18px,2.2vw,24px);padding:9px 22px}
  .sticker{width:92px;height:92px}
  .hub h2{font-size:24px}
  .pk .acts{display:flex;flex-wrap:wrap;gap:8px}
  .pk h3{font-size:20px}.pk .does{font-size:15.5px}.pk ul{font-size:14.5px}
}
@media (max-width:760px){footer{margin-inline:-16px;padding-inline:16px}}