/* Driven AIO — site styles. Dark-first; [data-mode=light] swaps the palette.
   Tokens are declared on html[data-mode] and repeated on body so a :root block or a body class printed by another plugin after this sheet cannot re-colour the page. */
:root,html[data-mode=dark],html[data-mode=dark] body{
  --bg:#0A0A0B;--bg2:#101012;--panel:#151518;--panel2:#1B1B1F;--line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.14);
  --ink:#F3F1EC;--ink2:#D5D2CB;--dim:#8F8D86;--dim2:#6B6963;
  --ok:#3DBE7A;--warn:#F0B44C;--bad:#E5563F;--info:#4F86C6;
  --font:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;--serif:"Instrument Serif",Georgia,serif;--mono:"JetBrains Mono",Menlo,Consolas,monospace;
  --r:14px;--r2:22px;--shadow:0 30px 80px rgba(0,0,0,.45);
  --accent:#8DB4E2;--accent-rgb:141,180,226;--accent-ink:#0B0B0C;
  color-scheme:dark;
}
html[data-mode=light],html[data-mode=light] body{
  --bg:#F7F5F0;--bg2:#FFFFFF;--panel:#FFFFFF;--panel2:#F1EFE9;--line:rgba(0,0,0,.08);--line2:rgba(0,0,0,.16);
  --ink:#14130F;--ink2:#2E2C26;--dim:#6B6860;--dim2:#8E8B82;--shadow:0 30px 80px rgba(20,19,15,.12);color-scheme:light;
}
*{box-sizing:border-box}[hidden]{display:none!important}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}img,svg{max-width:100%;display:block}
::selection{background:rgba(var(--accent-rgb),.35)}
.skip{position:absolute;left:-999px;top:8px;background:var(--accent);color:var(--accent-ink);padding:8px 12px;border-radius:8px;z-index:99}.skip:focus{left:8px}
.grain{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.35;mix-blend-mode:overlay;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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
[data-mode=light] .grain{opacity:.18}
.wrap{width:min(1180px,calc(100% - 48px));margin:0 auto}
.dim{color:var(--dim)}.small{font-size:13px}.fine{font-size:13px;color:var(--dim);line-height:1.5}.fine b{color:var(--ink2)}
.kicker{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:14px}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.02em;line-height:1.08}
h2{font-size:clamp(28px,3.6vw,46px)}h3{font-size:19px;margin-bottom:8px}
/* headline emphasis: same face, lighter weight, quieter colour — no italic, no accent */
h1 em,h2 em{font-family:inherit;font-style:normal;font-weight:500;color:var(--dim);letter-spacing:-.02em}
.display{font-size:clamp(38px,6.2vw,84px);line-height:1;letter-spacing:-.035em;max-width:14ch}
.lede{font-size:clamp(17px,1.5vw,21px);color:var(--ink2);max-width:62ch;margin:22px 0 0;line-height:1.5}
.sub{font-size:17px;color:var(--dim);max-width:64ch;margin:16px 0 0;line-height:1.55}
.big{font-size:clamp(18px,1.7vw,23px);line-height:1.45;color:var(--ink2);margin:0}
p{margin:0 0 12px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:999px;border:1px solid var(--line2);font-weight:600;font-size:15px;line-height:1;cursor:pointer;transition:transform .18s ease,background .18s,border-color .18s,color .18s;background:transparent;color:var(--ink);font-family:inherit;white-space:nowrap}
.btn:hover{transform:translateY(-1px);border-color:var(--ink)}.btn:active{transform:translateY(0)}
.btn-accent{background:var(--accent);color:var(--accent-ink);border-color:transparent}.btn-accent:hover{border-color:transparent;filter:brightness(1.06)}
.btn-ghost{background:rgba(255,255,255,.03)}[data-mode=light] .btn-ghost{background:rgba(0,0,0,.03)}
.btn-lg{padding:16px 26px;font-size:16px}.btn-sm{padding:8px 14px;font-size:13px}
.btn .arr{transition:transform .2s}.btn:hover .arr{transform:translateX(3px)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

/* header */
.top{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 28px;background:rgba(10,10,11,.6);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border-bottom:1px solid var(--line)}
[data-mode=light] .top{background:rgba(247,245,240,.7)}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.01em;font-size:17px}.mark svg{width:28px;height:28px}
.nav{display:flex;gap:4px}.nav a{padding:8px 12px;border-radius:999px;font-size:14px;color:var(--ink2);transition:background .15s,color .15s}
.nav a:hover,.nav a.on{background:rgba(255,255,255,.06);color:var(--ink)}[data-mode=light] .nav a:hover,[data-mode=light] .nav a.on{background:rgba(0,0,0,.06)}
.top-right{display:flex;align-items:center;gap:10px}
.mode{width:36px;height:36px;border-radius:50%;border:1px solid var(--line2);background:transparent;cursor:pointer;display:grid;place-items:center;color:var(--ink)}
.mode-sun{width:14px;height:14px;border-radius:50%;box-shadow:inset -4px -4px 0 0 var(--ink);transform:rotate(-20deg)}[data-mode=light] .mode-sun{box-shadow:none;background:var(--ink);width:12px;height:12px}
.burger{display:none;width:38px;height:38px;border:1px solid var(--line2);background:transparent;border-radius:10px;cursor:pointer;flex-direction:column;justify-content:center;gap:5px;align-items:center}
.burger span{display:block;width:16px;height:2px;background:var(--ink);transition:transform .2s}
.burger[aria-expanded=true] span:first-child{transform:translateY(3.5px) rotate(45deg)}.burger[aria-expanded=true] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.sheet{position:fixed;inset:64px 0 0;background:var(--bg);z-index:39;padding:24px 28px;display:flex;flex-direction:column;gap:6px}
.sheet a{font-size:24px;font-weight:600;padding:12px 0;border-bottom:1px solid var(--line)}
.pbar{position:relative;z-index:41;display:flex;align-items:center;gap:10px;padding:8px 28px;font-size:13px;background:rgba(var(--accent-rgb),.12);border-bottom:1px solid rgba(var(--accent-rgb),.25);color:var(--ink)}
.pbar-right{margin-left:auto;color:var(--ink2)}.pbar-right a{color:var(--accent);text-decoration:underline}
.pbar-dot,.live-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(var(--accent-rgb),.6);animation:pulse 2s infinite;display:inline-block;flex:none}
.live-dot{background:var(--ok);box-shadow:0 0 0 0 rgba(61,190,122,.6);margin-right:6px}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),.6)}70%{box-shadow:0 0 0 9px rgba(var(--accent-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),0)}}
.hide-m{display:inline-flex}

/* reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.pbar-dot,.live-dot{animation:none}}

/* hero */
.main{position:relative;z-index:1}
.hero{position:relative;padding:clamp(70px,10vw,140px) 0 40px;overflow:hidden;min-height:82vh;display:flex;flex-direction:column;justify-content:center}
.hero-art{position:absolute;inset:0;z-index:0;opacity:.9}
.hero-art svg{width:100%;height:100%}
.hero-art canvas{width:100%;height:100%;display:block}
.hero-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--bg) 0%,transparent 26%,transparent 90%,var(--bg) 100%),radial-gradient(50% 80% at 20% 52%,var(--bg) 12%,transparent 68%)}
.hero-inner{position:relative;z-index:1}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ink2);padding:8px 14px;border:1px solid var(--line2);border-radius:999px;background:rgba(0,0,0,.25);backdrop-filter:blur(8px);margin-bottom:26px}
[data-mode=light] .eyebrow{background:rgba(255,255,255,.6)}
.stats{display:flex;flex-wrap:wrap;gap:34px;margin-top:56px;padding-top:28px;border-top:1px solid var(--line);align-items:flex-end}
.stats div{display:flex;flex-direction:column}.stats b{font-size:30px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}.stats span{font-size:13px;color:var(--dim)}
.stats-note{font-size:12px;color:var(--dim2);margin-left:auto;align-self:flex-end}

/* sections */
.sec{padding:clamp(64px,8vw,120px) 0;position:relative}
.sec-alt{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-tight{padding:40px 0}
.sec-head{max-width:800px;margin-bottom:48px}
.page-head{padding:clamp(60px,9vw,120px) 0 20px}
.two{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:start;margin-top:48px}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:26px;transition:border-color .2s,transform .2s}
.card:hover{border-color:var(--line2);transform:translateY(-2px)}
.card p{color:var(--dim);margin:0;font-size:15px}
.card.num{position:relative;padding-top:60px}.card.num i{position:absolute;top:22px;left:26px;font-style:normal;font-family:var(--serif);font-size:32px;color:var(--accent);line-height:1}
.callout{background:var(--panel);border:1px solid rgba(var(--accent-rgb),.35);border-radius:var(--r);padding:26px;box-shadow:0 0 0 6px rgba(var(--accent-rgb),.06)}
.callout-n{font-size:44px;font-weight:600;letter-spacing:-.03em;color:var(--accent)}.callout-n span{font-size:16px;color:var(--dim);font-weight:500;margin-left:4px}
.callout p{color:var(--ink2);margin:8px 0 0;font-size:15px}

/* timeline */
.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;margin-top:10px}
.timeline::before{content:"";position:absolute;left:0;right:0;top:9px;height:1px;background:linear-gradient(90deg,var(--accent),var(--line2))}
.tl-item{padding:28px 20px 0 0;position:relative}
.tl-item::before{content:"";position:absolute;top:4px;left:0;width:11px;height:11px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--bg)}
.tl-date{font-family:var(--mono);font-size:12px;color:var(--dim);letter-spacing:.04em}.tl-name{font-size:20px;font-weight:600;margin:6px 0 4px}.tl-note{font-size:14px;color:var(--dim)}

/* prospect card */
.pcard{display:grid;grid-template-columns:1.2fr 1fr;gap:28px;background:var(--panel);border:1px solid rgba(var(--accent-rgb),.3);border-radius:var(--r2);padding:30px;box-shadow:var(--shadow)}
.facts{margin:0;display:grid;gap:12px}.facts div{display:grid;grid-template-columns:110px 1fr;gap:12px;font-size:15px}.facts dt{color:var(--dim)}.facts dd{margin:0;color:var(--ink2)}
.steps-mini{margin:0 0 20px;padding-left:20px;color:var(--ink2);font-size:15px}.steps-mini li{margin-bottom:8px}

/* calculator */
.calc{background:var(--panel);border:1px solid var(--line);border-radius:var(--r2);padding:28px;display:grid;grid-template-columns:280px 1fr;gap:32px;box-shadow:var(--shadow)}
.calc-controls{display:grid;gap:18px;align-content:start}
.calc-controls label{display:grid;gap:8px;font-size:13px;color:var(--dim)}
.calc-controls output{float:right;color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.calc-controls label>output{justify-self:end;margin-top:-24px}
.calc-controls input[type=range]{width:100%;accent-color:var(--accent);margin:0}
.calc-controls select{width:100%;background:var(--panel2);color:var(--ink);border:1px solid var(--line2);border-radius:10px;padding:10px 12px;font:inherit;font-size:14px}
.calc-out{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-content:start}
.calc-col{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.calc-col.us{border-color:rgba(var(--accent-rgb),.4)}
.calc-h{display:flex;justify-content:space-between;align-items:baseline;font-weight:600;margin-bottom:12px;gap:8px}.calc-h small{font-weight:400;color:var(--dim);font-size:12px;text-align:right}
.calc-line{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--line);font-size:14px;color:var(--ink2)}.calc-line small{display:block;color:var(--dim);font-size:11px}
.calc-line b{font-variant-numeric:tabular-nums;white-space:nowrap}
.calc-total{display:flex;justify-content:space-between;padding-top:12px;margin-top:6px;border-top:1px solid var(--line2);font-weight:600}.calc-total b{font-size:22px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.calc-swing{grid-column:1/-1;background:linear-gradient(135deg,rgba(var(--accent-rgb),.14),transparent 60%);border:1px solid rgba(var(--accent-rgb),.35);border-radius:var(--r);padding:22px 24px}
.swing-n{font-size:clamp(34px,4vw,54px);font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.05;color:var(--accent)}
.swing-n.neg{color:var(--bad)}
.calc-swing p{margin:8px 0 0;color:var(--ink2);font-size:15px}

/* modules grid */
.mods{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.mod{display:flex;flex-direction:column;gap:6px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px;min-height:170px;transition:transform .2s,border-color .2s,background .2s;position:relative;overflow:hidden}
.mod::after{content:"";position:absolute;inset:auto -30% -60% auto;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(var(--accent-rgb),.22),transparent 65%);opacity:0;transition:opacity .3s}
.mod:hover{transform:translateY(-3px);border-color:rgba(var(--accent-rgb),.5)}.mod:hover::after{opacity:1}
.mod-i{font-family:var(--mono);font-size:11px;color:var(--accent)}.mod-n{font-weight:600;font-size:17px}.mod-d{font-size:13px;color:var(--dim);line-height:1.45}

/* further list */
.further{counter-reset:f;margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
.further li{padding:16px 0 16px 30px;border-top:1px solid var(--line);position:relative;font-size:16px;color:var(--ink2)}
.further li::before{content:"";position:absolute;left:0;top:24px;width:10px;height:10px;border-radius:50%;background:var(--accent)}
.further li b{color:var(--ink);font-weight:600}
.further+.fine{margin-top:24px}

/* pricing */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:28px}
.tier{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r2);padding:28px;transition:transform .2s,border-color .2s}
.tier:hover{transform:translateY(-3px)}
.tier.hot{border-color:rgba(var(--accent-rgb),.5);background:linear-gradient(180deg,rgba(var(--accent-rgb),.08),var(--panel) 60%)}
.tier.you{outline:2px solid var(--accent);outline-offset:3px}.tier.you::after{content:"Your tier";position:absolute;top:-12px;right:18px;background:var(--accent);color:var(--accent-ink);font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px;letter-spacing:.06em;text-transform:uppercase}
.tier-n{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);font-weight:600}.tier-r{font-size:15px;color:var(--ink2);margin:4px 0 14px}
.tier-p{font-size:46px;font-weight:600;letter-spacing:-.04em;line-height:1}.tier-p span{font-size:15px;color:var(--dim);font-weight:500;letter-spacing:0;margin-left:2px}
.tier-tag{position:absolute;top:22px;right:22px;font-size:11px;color:var(--accent);border:1px solid rgba(var(--accent-rgb),.5);padding:3px 9px;border-radius:999px}
.tiers.big .tier ul{margin:20px 0 0;padding:0;list-style:none;color:var(--ink2);font-size:14px}.tiers.big .tier li{padding:7px 0;border-top:1px solid var(--line)}.tiers.big .tier li::before{content:"✓ ";color:var(--accent)}
.ticks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 30px;color:var(--ink2);font-size:15px}
.ticks li{padding-left:24px;position:relative}.ticks li::before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:700}.ticks b{color:var(--ink)}
.ticks+p{margin-top:28px}
.compare{overflow-x:auto;background:var(--panel);border:1px solid var(--line);border-radius:var(--r2)}
.compare table{width:100%;border-collapse:collapse;font-size:15px}.compare th,.compare td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--line);vertical-align:top}
.compare th{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);font-weight:600}
.compare th:last-child,.compare td:last-child{background:rgba(var(--accent-rgb),.06)}.compare td.inc{color:var(--accent);font-weight:600}
.compare tr.tot td{font-weight:700;font-size:17px;border-bottom:0}
.faq details{border-top:1px solid var(--line);padding:6px 0}.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:600;font-size:17px;padding:14px 0;list-style:none;display:flex;justify-content:space-between;align-items:center}
.faq summary::-webkit-details-marker{display:none}.faq summary::after{content:"+";color:var(--accent);font-size:22px;font-weight:400}.faq details[open] summary::after{content:"–"}
.faq p{color:var(--dim);margin:0 0 14px;max-width:70ch}

/* platform page */
.modnav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:40px}.modnav a{font-size:13px;padding:7px 12px;border:1px solid var(--line);border-radius:999px;color:var(--ink2)}.modnav a:hover{border-color:var(--accent);color:var(--accent)}
.modrow{display:grid;grid-template-columns:70px 1fr;gap:20px;padding:36px 0;border-top:1px solid var(--line);scroll-margin-top:90px}
.modrow-i{font-family:var(--serif);font-size:38px;color:var(--accent);line-height:1}
.modrow h2{font-size:clamp(22px,2.4vw,30px)}.modrow h2 em{display:block;font-size:.62em;margin-top:6px;font-weight:500;color:var(--ink2);letter-spacing:-.01em}
.modrow p{color:var(--ink2);max-width:70ch;margin-top:14px;font-size:16px}.modrow .why{color:var(--dim);font-size:15px;font-style:normal;border-left:2px solid var(--line2);padding-left:14px;line-height:1.55}

/* switching */
.week{display:grid;gap:0}.day{display:grid;grid-template-columns:110px 1fr;gap:20px;padding:20px 0;border-top:1px solid var(--line)}.day:last-child{border-bottom:1px solid var(--line)}
.day b{color:var(--accent);font-family:var(--mono);font-weight:500;font-size:14px}.day span{color:var(--ink2);font-size:16px;max-width:70ch}

/* contact */
.contact-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:28px;align-items:start;padding-bottom:40px}
.form{background:var(--panel);border:1px solid var(--line);border-radius:var(--r2);padding:28px;display:grid;gap:16px}
.form label{display:grid;gap:6px;font-size:13px;color:var(--dim)}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form input,.form select,.form textarea{width:100%;background:var(--panel2);color:var(--ink);border:1px solid var(--line2);border-radius:10px;padding:12px 14px;font:inherit;font-size:15px}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid rgba(var(--accent-rgb),.6);outline-offset:1px;border-color:transparent}
.form .hp{position:absolute;left:-9999px}.form-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.form-msg{font-size:14px;color:var(--dim)}.form-msg.ok{color:var(--ok)}.form-msg.err{color:var(--bad)}
.contact-side{display:grid;gap:14px}.contact-side .card p{margin-bottom:8px}.contact-side .btn{margin-top:6px}

/* CTA + footer */
.sec-cta{padding-top:20px}
.cta-box{background:linear-gradient(135deg,rgba(var(--accent-rgb),.16),var(--panel) 55%);border:1px solid rgba(var(--accent-rgb),.35);border-radius:var(--r2);padding:clamp(36px,5vw,64px);text-align:center;box-shadow:var(--shadow)}
.cta-box .sub{margin:14px auto 0}.cta-box .cta-row{justify-content:center}
.foot{border-top:1px solid var(--line);padding:56px 0 28px;background:var(--bg2);position:relative;z-index:1}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:32px;font-size:14px}
.foot-grid a{display:block;color:var(--ink2);padding:4px 0}.foot-grid a:hover{color:var(--accent)}.foot-h{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:10px;font-weight:600}
.foot .brand-name{font-size:18px;font-weight:700;margin-bottom:10px}.foot p{font-size:14px}
.foot-base{display:flex;justify-content:space-between;gap:16px;margin-top:40px;padding-top:20px;border-top:1px solid var(--line);font-size:13px;flex-wrap:wrap}

/* responsive */
@media (max-width:1000px){
  .mods{grid-template-columns:repeat(2,1fr)}.timeline{grid-template-columns:1fr 1fr;gap:20px 0}.timeline::before{display:none}
  .calc{grid-template-columns:1fr}.foot-grid{grid-template-columns:1fr 1fr;gap:28px 24px}.foot-grid>div:first-child,.foot-grid>div:last-child{grid-column:1/-1}.foot-grid>div:first-child p{max-width:34em}.foot-grid>div:last-child{padding-top:22px;border-top:1px solid var(--line)}.foot{padding:40px 0 24px}.foot-base{flex-direction:column;gap:6px;margin-top:28px}
  .further{grid-template-columns:1fr}.two{grid-template-columns:1fr}.pcard{grid-template-columns:1fr}
}
/* The header runs out of room before the rest of the page does: at 768 — an
   iPad in portrait, and a common phone landscape — the links and the button
   pushed the bar 55px past the viewport and gave the whole site a sideways
   scroll. The menu collapses to the burger a little earlier now. */
@media (max-width:820px){
  .nav,.hide-m{display:none}.burger{display:flex}
}
@media (max-width:760px){
  .nav,.hide-m{display:none}.burger{display:flex}.top{padding:12px 18px}.wrap{width:min(1180px,calc(100% - 36px))}
  .three,.tiers,.calc-out,.ticks,.form-row,.contact-grid{grid-template-columns:1fr}
  .display{max-width:none}.stats{gap:20px}.stats b{font-size:24px}.stats-note{margin-left:0}
  .modrow{grid-template-columns:1fr;gap:6px}.day{grid-template-columns:1fr;gap:6px}
  .pbar{font-size:12px;flex-wrap:wrap}.pbar-right{margin-left:0;width:100%}
  .hero{min-height:0}
}

/* ===================== subpages ===================== */
/* platform: architecture */
.arch{display:grid;grid-template-columns:1.6fr 1fr;gap:24px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:var(--r2);padding:20px;box-shadow:var(--shadow)}
.arch-svg{display:flex;align-items:center}
.arch-svg svg{width:100%;height:auto}
.arch-node:hover .dot{r:9}.arch-node text,.arch-int text{pointer-events:all;cursor:pointer}.arch-node:hover text{fill:var(--ink)}.arch-int:hover text{fill:var(--ink2)}.arch line{transition:opacity .2s}.arch-node,.arch-int{transition:opacity .2s}
.arch-side{display:flex;flex-direction:column;min-height:0}
.arch-info{min-height:120px;flex:1 1 auto;overflow:auto;overscroll-behavior:contain;-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 24px),transparent);padding-bottom:8px;scrollbar-width:thin}
.arch-side .arch-legend{flex:none}
.arch-conns{max-height:none}.arch-info b{display:block;font-size:20px;letter-spacing:-.02em;margin-bottom:6px}.arch-info p{color:var(--dim);font-size:15px;margin:0}
.arch-legend{display:flex;gap:16px;margin-top:18px;font-size:12px;color:var(--dim)}.arch-legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:-1px}
.arch-legend .l1{background:var(--accent)}.arch-legend .l2{background:#4F86C6;border-radius:3px}.arch-legend .l3{background:rgba(var(--accent-rgb),.25);border:1px solid var(--accent)}
/* platform: module list + spy */
.modwrap{display:grid;grid-template-columns:200px 1fr;gap:40px;align-items:start}
.modspy{position:sticky;top:90px;display:flex;flex-direction:column;gap:2px}
.modspy a{font-size:13px;padding:6px 10px;border-radius:8px;color:var(--dim);display:flex;gap:10px;transition:color .15s,background .15s}
.modspy a span{font-family:var(--mono);font-size:11px;color:var(--dim2)}.modspy a:hover{color:var(--ink)}.modspy a.on{color:var(--ink);background:rgba(var(--accent-rgb),.12)}.modspy a.on span{color:var(--accent)}
.modrow{display:grid;grid-template-columns:1fr 380px;gap:32px;padding:44px 0;border-top:1px solid var(--line);scroll-margin-top:90px;align-items:center}
.modrow:nth-child(even){grid-template-columns:380px 1fr}.modrow:nth-child(even) .modrow-b{order:2}
.modrow-i{font-family:var(--serif);font-size:34px;color:var(--accent);line-height:1;margin-bottom:10px}
.modrow h2{font-size:clamp(22px,2.4vw,30px)}.modrow h2 em{display:block;font-size:.62em;margin-top:6px;font-weight:500;color:var(--ink2);letter-spacing:-.01em}
.modrow p{color:var(--ink2);max-width:60ch;margin-top:14px;font-size:16px}.modrow .why{color:var(--dim);font-size:15px;font-style:normal;border-left:2px solid var(--line2);padding-left:14px;line-height:1.55}
.micro{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px;min-height:200px;font-size:12.5px;color:var(--ink2);position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:10px}
.micro .kicker{margin-bottom:4px;font-size:10.5px}.micro .fine{margin:6px 0 0;font-size:11.5px}
.mi-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.mi-tiles div{background:var(--panel2);border-radius:8px;padding:8px}.mi-tiles b{display:block;font-size:18px;letter-spacing:-.02em}.mi-tiles span{font-size:10px;color:var(--dim)}.mi-tiles .ok b{color:var(--ok)}.mi-tiles .warn b{color:var(--warn)}.mi-tiles .acc b{color:var(--accent)}
.mi-list{display:grid;grid-template-columns:auto 1fr auto;gap:6px 10px;align-items:center}.mi-list i{font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--dim)}.mi-list em{font-style:normal;font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--dim)}.mi-list em.ok{color:var(--ok)}.mi-list em.warn{color:var(--warn)}
.mi-form div{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--line)}.mi-form span{color:var(--dim)}.strike{text-decoration:line-through;color:var(--dim)}
.mi-verify{opacity:0;transform:translateY(4px);transition:all .5s}.mi-verify.in{opacity:1;transform:none}.mi-verify b{color:var(--ok)}
.mi-stamp{position:absolute;right:14px;top:14px;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);border:1px solid rgba(var(--accent-rgb),.5);padding:3px 8px;border-radius:999px;transform:rotate(6deg)}
.micro svg{width:100%;height:auto}
/* The app sheet: every module and integration visual is drawn as the platform's
   own console — gold eyebrow, serif title, tab strip — so the visuals read as
   one product. And the console has two looks of its own, so the visuals follow
   the switch in the header: Midnight Noir at night, Powder by day. These are
   the platform's real palettes, not a dimmed copy of the light one.
   --pp is "paper": whatever a raised surface inside the sheet sits on. */
.micro.mi-app{--panel:#151412;--panel2:#1b1916;--pp:#1b1916;--line:#262420;--line2:#37342c;--ink:#f3f1ec;--ink2:#dcd8cd;--dim:#a5a197;--dim2:#8a857a;--accent:#c9a227;--accent-rgb:201,162,39;--accent-ink:#17150f;--info:#6f9fd8;--ok:#3dbe7a;--warn:#e0b445;--bad:#d9705e;background:#12110f;color:var(--ink2);border-color:#2b2823;box-shadow:0 1px 3px rgba(0,0,0,.5),0 24px 48px -32px rgba(0,0,0,.8);justify-content:flex-start;padding:0}
[data-mode=light] .micro.mi-app{--panel:#ffffff;--panel2:#f4f2ec;--pp:#fff;--line:rgba(16,24,40,.09);--line2:rgba(16,24,40,.16);--ink:#1a1814;--ink2:#2b2823;--dim:#6c665b;--dim2:#8a8479;--accent:#B58A1A;--accent-rgb:181,138,26;--accent-ink:#fff;--info:#4F86C6;--ok:#2f9e63;--warn:#c98a12;--bad:#c9432f;background:#fbfaf7;border-color:rgba(16,24,40,.12);box-shadow:0 1px 3px rgba(16,24,40,.08),0 24px 48px -32px rgba(0,0,0,.5)}
.mi-sh{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding:12px 16px 0;border-bottom:1px solid var(--line);margin-bottom:12px}
.mi-sh .mi-eyebrow{display:block;font-size:8.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);font-weight:700}
.mi-sh .mi-title{display:block;font-family:"Cormorant Garamond",Georgia,serif;font-size:20px;font-weight:600;color:var(--ink);line-height:1.1;margin:2px 0 8px}
.mi-sh .mi-tabs{display:flex;gap:12px;font-size:10.5px;color:var(--dim);white-space:nowrap}.mi-sh .mi-tabs i{font-style:normal;padding-bottom:9px;border-bottom:2px solid transparent;transition:color .3s,border-color .3s}.mi-sh .mi-tabs i.on{color:var(--ink);border-color:var(--accent);font-weight:600}
.mi-sh .mi-go{font-size:10px;font-weight:700;color:var(--accent-ink);background:var(--accent);border-radius:999px;padding:5px 10px;margin-bottom:8px;white-space:nowrap}
.micro.mi-app>*:not(.mi-sh){margin-left:16px;margin-right:16px}.micro.mi-app>*:last-child{margin-bottom:16px}.micro.mi-app .mi-stamp{margin:0}
.micro.mi-app .mi-tiles div{background:var(--pp);border:1px solid var(--line)}.micro.mi-app .mi-cards div,.micro.mi-app .mi-road>div,.micro.mi-app .mi-air div{background:var(--pp);border:1px solid var(--line)}.micro.mi-app .mi-stamp{top:54px;right:12px}.mi-sh .mi-tabs{overflow:hidden}
.micro.mi-app .mi-ask .q{background:rgba(var(--accent-rgb),.14)}.micro.mi-app .mi-ask .a{background:var(--pp);border:1px solid var(--line)}
.micro.mi-app .mi-sched .col{background:var(--panel2)}.micro.mi-app .mi-sched .chip{background:var(--pp)}
/* entry motion: rows arrive one after another */
.mi-in{opacity:0;transform:translateY(5px);animation:miin .45s ease-out forwards}
@keyframes miin{to{opacity:1;transform:none}}
.mi-flash{animation:miflash .9s ease-out}
@keyframes miflash{0%{background:rgba(var(--accent-rgb),.28)}100%{background:transparent}}
.micro .mi-live{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ok);margin-right:5px;animation:milive 1.6s ease-in-out infinite}
@keyframes milive{0%,100%{opacity:.35}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.mi-in{animation:none;opacity:1;transform:none}.mi-flash,.micro .mi-live{animation:none}}
.mi-sched{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;height:150px}.mi-sched .col{position:relative;background:var(--panel2);border-radius:8px;padding:6px}.mi-sched .col b{font-size:10.5px;display:block}.mi-sched .col.drop{outline:1px dashed var(--accent)}
.mi-sched .chip{position:absolute;left:6px;right:6px;background:var(--panel);border:1px solid var(--line2);border-left:3px solid var(--info);border-radius:6px;padding:4px 6px;font-size:10px;font-style:normal}.mi-sched .chip.ghost{border-color:var(--accent);opacity:.35;border-style:dashed;transition:opacity .3s,border-style .3s}.mi-sched.landed .chip.ghost{opacity:1;border-style:solid;border-left-color:var(--accent)}
.mi-sched .col{transition:outline-color .3s,background .3s}.mi-sched .col.c2{outline:1px dashed transparent}.mi-sched .col.c2.over{outline-color:var(--accent);background:rgba(var(--accent-rgb),.08)}
.mi-sched .chip.drag{left:0;right:auto;z-index:3;will-change:transform;box-shadow:0 2px 8px rgba(0,0,0,.25);border-left-color:var(--accent)}.mi-sched .chip.drag.lift{box-shadow:0 12px 28px rgba(0,0,0,.45);transform-origin:center}
.mi-sched .cursor{position:absolute;left:0;top:0;width:12px;height:12px;z-index:4;pointer-events:none;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3l14 8-6 2-3 6z' fill='%23fff' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E")}
.mi-sched{position:relative;overflow:hidden}
.mi-verdict{opacity:0;transform:translateY(4px);transition:opacity .35s,transform .35s}.mi-verdict.in{opacity:1;transform:none}
.mi-sched .col.drop{outline:none}
.mi-verdict{font-size:11.5px;color:var(--ok);background:rgba(61,190,122,.1);border:1px solid rgba(61,190,122,.4);border-radius:8px;padding:8px 10px}
.mi-phone{background:#0E0E10;color:#F3F1EC;border-radius:18px;border:5px solid #1a1a1e;padding:12px;width:210px;margin:0 auto}.mi-phone .ph-b{font-weight:700;font-size:12px;display:flex;align-items:center;gap:6px}.mi-phone .ph-b i{width:14px;height:14px;background:var(--accent);border-radius:4px}.mi-phone .ph-t{margin-top:10px;font-size:13px;font-weight:600}.mi-phone .ph-r{color:#8F8D86;font-size:11px}
.ph-steps{display:grid;gap:4px;margin:10px 0}.ph-steps span{padding:7px 8px;border-radius:8px;border:1px solid rgba(255,255,255,.12);font-size:11px;color:#8F8D86}.ph-steps span.done{color:#3DBE7A;border-color:rgba(61,190,122,.4)}.ph-steps span.done::before{content:"✓ "}.ph-steps span.now{background:var(--accent);color:var(--accent-ink);border-color:transparent;font-weight:600}
.mi-phone .ph-pay{display:flex;justify-content:space-between;font-size:11px;color:#8F8D86;border-top:1px solid rgba(255,255,255,.1);padding-top:8px}.mi-phone .ph-pay b{color:#fff}
.mi-fl div{display:grid;grid-template-columns:60px 1fr auto;gap:4px 10px;padding:7px 0;border-bottom:1px solid var(--line);align-items:center}.mi-fl b{font-family:var(--mono);font-weight:500;font-size:11.5px}.mi-fl span{color:var(--dim);font-size:11px}.mi-fl em{font-style:normal;font-size:10px;text-transform:uppercase;letter-spacing:.05em}.mi-fl small{grid-column:2/4;color:var(--dim2);font-size:10.5px}.mi-fl .ok{color:var(--ok)}.mi-fl .warn{color:var(--warn)}.mi-fl .bad{color:var(--bad)}
.pay-row{display:grid;grid-template-columns:150px 1fr 60px;gap:10px;align-items:center;padding:6px 0;font-size:11.5px}.pay-row i{height:8px;background:rgba(255,255,255,.06);border-radius:4px;overflow:hidden;display:block}[data-mode=light] .pay-row i{background:rgba(0,0,0,.06)}.pay-row b{display:block;height:100%;background:var(--dim);border-radius:4px;transition:width .8s}.pay-row.ok b{background:var(--ok)}.pay-row em{font-style:normal;text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.mi-cards{display:grid;gap:6px}.mi-cards div{background:var(--panel2);border-radius:8px;padding:8px 10px}.mi-cards b{display:block;font-size:12.5px}.mi-cards span{display:block;color:var(--dim);font-size:11px}.mi-cards span.ok{color:var(--ok)}.mi-cards span.warn{color:var(--warn)}.mi-cards em{display:block;font-style:normal;font-size:11px;color:var(--ink2);margin-top:2px}.mi-cards em.warn{color:var(--warn)}.mi-cards .msg{background:rgba(var(--accent-rgb),.15)}.mi-cards .msg time{display:block;font-family:var(--mono);font-size:9.5px;color:var(--dim);margin-top:4px}
.mi-matrix table{width:100%;border-collapse:collapse;font-size:11px;font-variant-numeric:tabular-nums}.mi-matrix th{color:var(--dim);font-weight:500;padding:4px;text-align:left;font-size:10px}.mi-matrix td{padding:5px 4px;border-top:1px solid var(--line);text-align:right}.mi-matrix td.x{color:var(--dim2)}.mi-matrix td.hot{color:var(--accent);font-weight:700;background:rgba(var(--accent-rgb),.14);border-radius:4px;transition:background .4s}
.mi-mult{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}.mi-mult span{font-size:10px;padding:3px 8px;border:1px solid var(--line2);border-radius:999px;color:var(--ink2)}
.mi-badge{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--warn);border:1px solid rgba(240,180,76,.5);padding:4px 10px;border-radius:999px;text-align:center}
.mi-bars .bar-row{display:grid;grid-template-columns:120px 1fr 50px;gap:8px;align-items:center;font-size:11.5px;padding:4px 0}.mi-bars .bg{height:8px;background:rgba(255,255,255,.06);border-radius:4px;overflow:hidden}[data-mode=light] .mi-bars .bg{background:rgba(0,0,0,.06)}.mi-bars .fg{height:100%;background:var(--accent);border-radius:4px;transition:width .8s}.mi-bars .v{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.mi-tour b{display:block;font-size:12.5px}.mi-tour span{color:var(--dim);font-size:11px}.seats{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;margin:10px 0}.seats i{height:14px;border-radius:3px;background:rgba(255,255,255,.08);transition:background .3s}[data-mode=light] .seats i{background:rgba(0,0,0,.08)}.seats i.on{background:var(--accent)}.mi-tour .kv{display:flex;justify-content:space-between;font-size:11.5px;color:var(--dim)}.mi-tour .kv b{color:var(--ink)}
.mi-post div{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--line);font-size:11.5px}.mi-post em{font-style:normal;color:var(--dim);font-size:10.5px}.mi-post div.ok em{color:var(--ok)}
.mi-ask{display:grid;gap:8px}.mi-ask .q{justify-self:end;background:rgba(var(--accent-rgb),.18);padding:7px 10px;border-radius:10px;font-size:12px;max-width:85%}.mi-ask .a{background:var(--panel2);padding:8px 10px;border-radius:10px;font-size:12px;min-height:30px;line-height:1.45}.mi-ask .cta{display:flex;gap:6px;margin-top:6px}.mi-ask .cta b{font-size:11px;padding:4px 10px;border-radius:999px;border:1px solid var(--line2)}.mi-ask .cta b:first-child{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.mig-row{display:grid;grid-template-columns:130px 1fr 130px;gap:8px;align-items:center;font-size:11.5px;padding:4px 0}.mig-row .bg{height:8px;background:rgba(255,255,255,.06);border-radius:4px;overflow:hidden}[data-mode=light] .mig-row .bg{background:rgba(0,0,0,.06)}.mig-row .fg{height:100%;background:var(--ok);border-radius:4px;transition:width .8s}.mig-row em{font-style:normal;font-variant-numeric:tabular-nums;text-align:right;color:var(--dim)}.mig-row em b{color:var(--ink)}.mig-row small{display:block;font-size:10px}.mig-row .ok{color:var(--ok)}.mig-row .bad{color:var(--bad)}
.mi-mig .kv{display:flex;justify-content:space-between;font-size:11.5px;color:var(--dim);border-top:1px solid var(--line);padding-top:8px;margin-top:6px}.mi-mig .kv b{color:var(--ok)}
.mi-site{background:var(--panel2);border-radius:10px;overflow:hidden;position:relative}.site-bar{display:flex;gap:5px;align-items:center;padding:8px 10px;border-bottom:1px solid var(--line)}.site-bar i{width:8px;height:8px;border-radius:50%;background:var(--dim2)}.site-bar span{margin-left:8px;font-family:var(--mono);font-size:10px;color:var(--dim)}
.site-hero{height:60px;background:linear-gradient(135deg,rgba(var(--accent-rgb),.25),transparent);display:flex;align-items:center;padding:0 14px;font-size:12px;color:var(--ink2)}
.site-widget{margin:10px;background:var(--panel);border:1px solid rgba(var(--accent-rgb),.5);border-radius:8px;padding:10px}.site-widget b{display:block;font-size:12px}.site-widget span{font-size:11px;color:var(--dim)}.site-widget span em{color:var(--accent);font-style:normal;font-weight:600}.site-widget i{display:block;font-style:normal;font-size:9.5px;color:var(--accent);letter-spacing:.06em;text-transform:uppercase;margin-top:6px}
.site-badge{position:absolute;top:8px;right:10px;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);border:1px solid var(--line2);padding:2px 8px;border-radius:999px}
/* platform: integrations */
.intg{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.intg-point{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:var(--r2);padding:28px 32px}
.intg-point h2{margin:8px 0 10px}.intg-point .sub{margin:0}
@media (max-width:700px){.intg-point{grid-template-columns:1fr;padding:22px}.page-head .btn{white-space:normal;text-align:left;max-width:100%}}
.modrow .feeds{font-size:12.5px;color:var(--dim);margin-top:10px}.modrow .feeds a{color:var(--ink2);border-bottom:1px solid var(--line2)}.modrow .feeds a:hover{color:var(--accent);border-color:var(--accent)}
.mi-air{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.mi-air div{background:var(--panel2);border-radius:8px;padding:10px 8px;text-align:center}.mi-air b{display:block;font-family:var(--mono);font-weight:500;font-size:14px}.mi-air em{display:block;font-style:normal;font-size:10px;text-transform:uppercase;letter-spacing:.05em;margin-top:4px;color:var(--ok)}.mi-air .warn em{color:var(--warn)}.mi-air .bad em{color:var(--bad)}.mi-air span{display:block;font-size:10.5px;color:var(--dim);margin-top:4px}
.mi-road{display:grid;gap:6px}.mi-road>div{display:grid;grid-template-columns:1fr auto;gap:8px;background:var(--panel2);border-radius:8px;padding:8px 10px;font-size:11.5px;align-items:center}.mi-road b{display:block;font-size:12px}.mi-road span{color:var(--dim);font-size:10.5px}.mi-road em{font-style:normal;font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--ok)}.mi-road .bad em{color:var(--bad)}.mi-road .warn em{color:var(--warn)}
.mi-signin{background:var(--panel2);border-radius:12px;padding:16px;max-width:260px;margin:0 auto;text-align:center}.mi-signin .g{display:inline-flex;align-items:center;gap:8px;background:#fff;color:#1a1a1a;border-radius:8px;padding:8px 14px;font-size:12px;font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.3)}.mi-signin .g i{width:14px;height:14px;border-radius:50%;background:conic-gradient(#4285F4 0 25%,#34A853 0 50%,#FBBC05 0 75%,#EA4335 0)}.mi-signin .who{margin-top:12px;font-size:12px;opacity:0;transform:translateY(4px);transition:all .4s}.mi-signin .who.in{opacity:1;transform:none}.mi-signin .who b{display:block}.mi-signin .who span{color:var(--dim);font-size:11px}
.mi-thread{display:grid;gap:6px}.mi-thread div{background:var(--panel2);border-radius:10px;padding:8px 10px;font-size:11.5px;max-width:88%}.mi-thread div.out{justify-self:end;background:rgba(var(--accent-rgb),.16)}.mi-thread time{display:block;font-size:10px;color:var(--dim);margin-top:3px}.mi-thread .held{border:1px dashed rgba(240,180,76,.6);background:transparent}.mi-thread .held time{color:var(--warn)}
.intg-chip{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;transition:border-color .2s,transform .2s;position:relative;min-height:74px}
.intg-chip b{display:block;font-size:14px}.intg-chip span{display:block;font-size:12px;color:var(--dim);margin-top:4px;opacity:0;transform:translateY(4px);transition:all .25s}.intg-chip:hover{border-color:#4F86C6;transform:translateY(-2px)}.intg-chip:hover span{opacity:1;transform:none}
.intg-chip::before{content:"";position:absolute;top:16px;right:16px;width:8px;height:8px;border-radius:2px;background:#4F86C6}
/* pricing */
.picker{display:grid;grid-template-columns:1fr 1.2fr;gap:28px;background:var(--panel);border:1px solid rgba(var(--accent-rgb),.3);border-radius:var(--r2);padding:30px;box-shadow:var(--shadow)}
.picker-slider{display:block;font-size:14px;color:var(--ink2)}.picker-slider output{float:right;font-size:28px;font-weight:600;letter-spacing:-.03em;color:var(--ink);line-height:1}
.picker-slider input{width:100%;accent-color:var(--accent);margin:18px 0 6px;display:block}.picker-ticks{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10.5px;color:var(--dim)}
.picker-note{margin-top:20px;font-size:14px;color:var(--dim);line-height:1.5}
.picker-tier{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:16px}.picker-tier .kicker{margin:0}.picker-price{font-size:40px;font-weight:600;letter-spacing:-.04em;line-height:1}.picker-price span{font-size:14px;color:var(--dim);font-weight:500;letter-spacing:0}
.vs-row{display:grid;grid-template-columns:150px 1fr 80px;gap:10px;align-items:center;font-size:13px;padding:6px 0;color:var(--ink2)}.vs-row small{color:var(--dim);font-size:11px}
.vs-row i{height:10px;border-radius:5px;background:rgba(255,255,255,.06);position:relative;overflow:hidden}[data-mode=light] .vs-row i{background:rgba(0,0,0,.06)}.vs-row i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--w,0%);background:var(--dim);border-radius:5px;transition:width .6s}.vs-row.us i::after{background:var(--accent)}.vs-row.us{font-weight:600;color:var(--ink)}
.vs-row b{text-align:right;font-variant-numeric:tabular-nums}.picker-vs .fine{margin-top:12px}
.tier.hl{border-color:var(--accent);box-shadow:0 0 0 4px rgba(var(--accent-rgb),.12)}.tier .btn{margin-top:18px}
.ladder-list{list-style:none;margin:16px 0;padding:0}.ladder-list li{display:grid;grid-template-columns:1fr auto auto;gap:16px;align-items:center;padding:12px 0;border-top:1px solid var(--line);font-size:15px}
.ladder-list b{display:block}.ladder-list small{color:var(--dim);font-size:12.5px}.ladder-list em{font-style:normal;color:var(--dim);font-variant-numeric:tabular-nums}.ladder-list i{font-style:normal;color:var(--accent);font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.ladder-total{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:16px 0 0;border-top:1px solid var(--line2);font-size:15px;color:var(--ink2)}.ladder-total b{font-size:clamp(28px,3.4vw,44px);letter-spacing:-.03em;color:var(--accent);font-variant-numeric:tabular-nums}
.cmp-pick{display:inline-flex;gap:4px}.cmp-pick button{background:none;border:1px solid var(--line2);color:var(--dim);font:inherit;font-size:11px;padding:4px 9px;border-radius:999px;cursor:pointer;text-transform:none;letter-spacing:0}.cmp-pick button.on{background:var(--ink);color:var(--bg);border-color:transparent}
.incl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px 20px;font-size:15px;color:var(--ink2)}.incl li{padding:8px 0 8px 22px;position:relative;border-bottom:1px solid var(--line)}.incl li::before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:700}
/* switching */
.tl{background:var(--panel);border:1px solid var(--line);border-radius:var(--r2);padding:28px;box-shadow:var(--shadow)}
.tl-bar{position:relative;padding:8px 10px 36px}
.tl-track{position:relative;height:6px;background:rgba(255,255,255,.08);border-radius:3px;cursor:pointer}[data-mode=light] .tl-track{background:rgba(0,0,0,.08)}
.tl-fill{position:absolute;left:0;top:0;bottom:0;background:var(--accent);border-radius:3px;transition:width .3s}
.tl-knob{position:absolute;top:50%;width:22px;height:22px;border-radius:50%;background:var(--accent);border:3px solid var(--panel);transform:translate(-50%,-50%);box-shadow:0 0 0 2px var(--accent);cursor:grab;transition:left .3s}.tl-knob:focus{outline:2px solid var(--ink);outline-offset:3px}
.tl-days{position:absolute;left:10px;right:10px;top:26px;height:20px}.tl-days span{position:absolute;transform:translateX(-50%);font-family:var(--mono);font-size:11px;color:var(--dim);cursor:pointer;padding:4px 6px;border-radius:6px}.tl-days span.on{color:var(--accent);font-weight:700}
.tl-body{display:grid;grid-template-columns:1.6fr 1fr;gap:28px;align-items:start;margin-top:8px}
.tl-card h3{font-size:24px;letter-spacing:-.02em;margin:6px 0 10px}.tl-card p{color:var(--ink2);font-size:16px;max-width:60ch}.tl-risk{color:var(--warn)!important;font-size:13px!important}
.tl-side{display:grid;gap:18px}.tl-who .kicker{margin-bottom:8px}.who-row{display:grid;grid-template-columns:90px 1fr;gap:10px;align-items:center;font-size:13px;color:var(--dim);padding:5px 0}
.who-row i{height:8px;border-radius:4px;background:rgba(255,255,255,.06);position:relative;overflow:hidden}[data-mode=light] .who-row i{background:rgba(0,0,0,.06)}.who-row i::after{content:"";position:absolute;inset:0;width:var(--w,0%);background:var(--accent);border-radius:4px;transition:width .4s}
.moves .pills{margin-bottom:22px}.moves-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.moves-col{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px}.moves-col ul{list-style:none;margin:0;padding:0}.moves-col li{padding:9px 0;border-top:1px solid var(--line);font-size:14px;color:var(--ink2);line-height:1.45}.moves-col li:first-child{border-top:0}
.kicker.ok{color:var(--ok)}.kicker.warn{color:var(--warn)}.kicker.bad{color:var(--bad)}.moves .fine{margin-top:16px}
.gate-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.gstep{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:22px}.gstep span{font-family:var(--mono);font-size:12px;color:var(--accent)}.gstep h3{margin:8px 0 8px}.gstep p{color:var(--dim);font-size:14px;margin:0}
.need{list-style:none;margin:0;padding:0}.need li{border-top:1px solid var(--line)}.need label{display:flex;gap:12px;align-items:flex-start;padding:12px 0;font-size:15px;color:var(--ink2);cursor:pointer}.need input{accent-color:var(--accent);width:18px;height:18px;margin-top:2px;flex:none}.need input:checked+*,.need label:has(input:checked){color:var(--ink)}
/* contact agenda */
.agenda{background:var(--panel);border:1px solid var(--line);border-radius:var(--r2);padding:26px 28px}.agenda-row{display:grid;grid-template-columns:70px 1fr;gap:16px;padding:10px 0;border-top:1px solid var(--line);font-size:15px;color:var(--ink2)}.agenda-row:first-of-type{border-top:0}.agenda-row b{font-family:var(--mono);font-weight:500;color:var(--accent);font-size:13px}
@media (max-width:1000px){.arch{grid-template-columns:1fr}.modwrap{grid-template-columns:1fr}.modspy{position:static;flex-direction:row;flex-wrap:wrap}.modspy .kicker{display:none}.modrow,.modrow:nth-child(even){grid-template-columns:1fr}.modrow:nth-child(even) .modrow-b{order:0}.picker{grid-template-columns:1fr}.incl{grid-template-columns:1fr 1fr}.moves-grid,.gate-steps{grid-template-columns:1fr}.tl-body{grid-template-columns:1fr}}
@media (max-width:760px){.incl{grid-template-columns:1fr}.ladder-list li{grid-template-columns:1fr auto}.ladder-list i{display:none}.vs-row{grid-template-columns:110px 1fr 70px}.mi-tiles{grid-template-columns:repeat(2,1fr)}.agenda-row{grid-template-columns:1fr;gap:2px}.tl-days span{font-size:10px;padding:4px 3px}}

/* roadmap */
.road{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.road-col{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px;display:grid;gap:10px;align-content:start}
.road-h{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;padding-bottom:10px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px}
.road-h::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--dim)}
.road-h.shipped{color:var(--ok)}.road-h.shipped::before{background:var(--ok)}.road-h.building{color:var(--accent)}.road-h.building::before{background:var(--accent);box-shadow:0 0 0 0 rgba(var(--accent-rgb),.6);animation:pulse 2s infinite}.road-h.next{color:var(--info)}.road-h.next::before{background:var(--info)}.road-h.exploring{color:var(--dim)}
.road-item b{display:block;font-size:14px;font-weight:600}.road-item span{display:block;font-size:12.5px;color:var(--dim);margin-top:2px;line-height:1.4}
.road+.fine{margin-top:18px}
.calc-opt{display:grid;gap:8px;font-size:13px;color:var(--dim)}.calc-opt input{background:var(--panel2);color:var(--ink);border:1px solid var(--line2);border-radius:10px;padding:10px 12px;font:inherit;font-size:15px;width:100%}
.calc-opt input:focus{outline:2px solid rgba(var(--accent-rgb),.6);outline-offset:1px;border-color:transparent}
@media (max-width:1000px){.road{grid-template-columns:1fr 1fr}}@media (max-width:600px){.road{grid-template-columns:1fr}}
/* ---------- how we compare ----------
   Four columns of named products. The grid template is printed per row by the
   template, because the number of rivals is data now, not a constant. Each cell
   carries its own evidence line, so a cell is a mark with a sentence under it
   rather than a tick in a box. */
.cmp{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);overflow:hidden}
.cmp-head,.cmp-row{display:grid;align-items:start;gap:14px;padding:0 22px}
.cmp-head{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);padding-top:14px;padding-bottom:14px;border-bottom:1px solid var(--line);align-items:center}
.cmp-head div:not(:first-child),.cmp-cell{text-align:center}
.cmp-head div:last-child{color:var(--accent)}
.cmp-group{padding:18px 22px 6px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);font-weight:600}
.cmp-row{padding-top:13px;padding-bottom:13px;border-top:1px solid var(--line)}
.cmp-row:hover{background:rgba(var(--accent-rgb),.04)}
.cmp-what b{display:block;font-size:15px;color:var(--ink);font-weight:600}
.cmp-what span{display:block;font-size:13px;color:var(--dim);margin-top:2px;line-height:1.45}
.cmp-cell{min-width:0}
.cmp-mark{display:inline-block;font-size:15px;line-height:1;font-style:normal}
.cmp-mark.yes{color:var(--ink)}.cmp-mark.some{color:var(--ink2)}.cmp-mark.no{color:var(--dim2)}
.cmp-mark.fee{color:var(--warn,#d9902a);font-weight:700;font-size:14px}
.cmp-mark.tier{color:var(--info,#4F86C6);font-size:12px}
.cmp-mark.np{color:var(--dim2);font-size:18px;line-height:.8}
.cmp-note{display:block;font-style:normal;font-size:11.5px;line-height:1.45;color:var(--dim);margin-top:5px;text-wrap:pretty}
.cmp-status{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:999px;border:1px solid var(--line);color:var(--ink2);white-space:nowrap;font-style:normal}
.cmp-status.inc{color:var(--ink);border-color:var(--line)}
.cmp-status.uni{color:var(--accent-ink);background:var(--accent);border-color:var(--accent)}
.cmp-status.bld{color:var(--accent);border-color:rgba(var(--accent-rgb),.5)}
.cmp-status.nxt{color:var(--info);border-color:rgba(79,134,198,.5)}
.cmp-status.exp{color:var(--dim);border-style:dashed}
.cmp-status.mis{color:var(--dim);background:rgba(255,255,255,.03)}
.cmp-pick{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 12px}
.cmp-pick .lb{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-right:4px}
.cmp-pick .lb i{font-style:normal}.cmp-pick .lb-short{display:none}
.cmp-pick button{background:none;border:1px solid var(--line2);color:var(--dim);font:inherit;font-size:12px;padding:5px 12px;border-radius:999px;cursor:pointer}
.cmp-pick button.on{background:var(--ink);color:var(--bg);border-color:transparent}
.cmp-legend{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;margin-top:14px;font-size:12.5px;color:var(--dim)}
.cmp-legend .sp{flex:1}
.cmp-legend .cmp-mark{margin-right:5px}
.cmp-legend a{color:var(--accent)}
.cmp-src{margin-top:14px;border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:0 18px}
.cmp-src summary{cursor:pointer;padding:13px 0;font-size:13px;color:var(--ink2);list-style:none}
.cmp-src summary::-webkit-details-marker{display:none}
.cmp-src summary::before{content:"+ ";color:var(--accent);font-weight:700}
.cmp-src[open] summary::before{content:"− "}
.cmp-src>p{font-size:12.5px;color:var(--dim);margin:0 0 12px;max-width:78ch}
.cmp-srcv{padding:0 0 14px}
.cmp-srcv b{color:var(--ink);font-size:13px;margin-right:8px}
.cmp-srcv span{font-size:12.5px;color:var(--dim)}
.cmp-srcv a{display:inline-block;font-size:11.5px;color:var(--accent);margin:6px 10px 0 0;word-break:break-all}
/* ---------- the same table on a phone ----------
   Four columns will not fit, so the picker cuts the rivals down to one and the
   row becomes a card: the thing being compared across the top, then the two
   answers beside each other — theirs and ours — because a comparison read one
   answer at a time, stacked, is not a comparison at all. Each answer keeps its
   own panel so the eye can cross between them, and each mark carries its word,
   since the column headings and the legend are both off screen by then. */
@media (max-width:900px){
  .cmp{border-radius:14px}
  .cmp-head{display:none}
  .cmp-row{grid-template-columns:1fr 1fr!important;gap:8px;padding:14px 14px 16px;align-items:stretch}
  .cmp-row:hover{background:none}
  .cmp-what{grid-column:1/-1}
  .cmp-what b{font-size:14.5px;line-height:1.3}
  .cmp-what span{font-size:12.5px;margin-top:3px}
  .cmp-group{padding:20px 14px 8px}
  .cmp-cell{text-align:left;border:1px solid var(--line);border-radius:11px;padding:9px 11px;background:rgba(127,127,127,.05)}
  /* Our side rarely carries a note, so the pill sits in the middle of what is
     left rather than clinging to the top of an empty box. */
  .cmp-cell.us{border-color:rgba(var(--accent-rgb),.35);background:rgba(var(--accent-rgb),.06);display:flex;flex-direction:column}
  .cmp-cell.us .cmp-status{margin-top:auto;margin-bottom:auto;align-self:flex-start}
  .cmp-cell::before{content:attr(data-lb);display:block;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim2);margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cmp-cell.us::before{color:var(--accent)}
  /* The glyph alone means nothing this far from the legend — say it. */
  .cmp-cell .cmp-mark::after{content:" " attr(data-w);font-size:12.5px;letter-spacing:0;color:var(--ink2)}
  .cmp-cell .cmp-mark{font-size:13px;line-height:1.35}
  .cmp-cell .cmp-mark.np::after,.cmp-cell .cmp-mark.no::after{color:var(--dim)}
  .cmp-status{font-size:10px;padding:3px 8px;white-space:normal}
  .cmp-note{margin-top:5px;font-size:11px}
  /* One rival at a time: the picker chooses which, and stays in reach while
     the table scrolls — thirty rows below the buttons, nobody remembers which
     one they pressed. */
  .cmp-pick{position:sticky;top:63px;z-index:6;margin:0;padding:9px 0 11px;background:var(--bg2);box-shadow:0 10px 14px -8px var(--bg2);flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .cmp-pick::-webkit-scrollbar{display:none}
  .cmp-pick .lb{flex:none}
  .cmp-pick button{flex:none;font-size:12px;padding:5px 11px;white-space:nowrap}
  .cmp[data-only] .cmp-cell[data-col]{display:none}
  .cmp[data-only="la"] .cmp-cell[data-col="la"],
  .cmp[data-only="mv"] .cmp-cell[data-col="mv"],
  .cmp[data-only="gw"] .cmp-cell[data-col="gw"]{display:block}
}
@media (max-width:560px){
  .cmp-pick .lb-long{display:none}.cmp-pick .lb-short{display:inline}
}
@media (max-width:400px){
  .cmp-row{padding:12px 11px 14px;gap:7px}
  .cmp-cell{padding:8px 9px}
  .cmp-cell .cmp-mark::after{font-size:12px}
}
@media (min-width:901px){ .cmp-pick{display:none} }

/* ---------- hosting ---------- */
.host{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.host-card h3{margin:6px 0 10px;font-size:22px}
.host-k{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:600}
.ticks.small{margin-top:14px;font-size:13.5px;grid-template-columns:1fr;gap:6px}
.host-price{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:18px;padding:18px 22px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.host-price b{font-size:32px;font-weight:600;letter-spacing:-.03em;margin-right:10px}
.host-price span{color:var(--dim);font-size:14px}
@media (max-width:820px){.host{grid-template-columns:1fr}}

/* ---------- architecture: expanded ---------- */
.arch-tools{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.arch-walkbar{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.arch-pulse{pointer-events:none}
.btn-sm{padding:8px 14px;font-size:13px}
.arch-holder{min-height:200px}
.arch.expanded{position:fixed;inset:16px;z-index:1000;opacity:1;transform:none;grid-template-columns:minmax(0,1.9fr) minmax(280px,1fr);padding:24px;overflow:auto;box-shadow:0 40px 120px rgba(0,0,0,.6);animation:archin .25s ease-out}
@keyframes archin{from{opacity:0;transform:scale(.98)}}
.arch.expanded .arch-svg svg{max-height:calc(100vh - 80px)}
.arch.expanded .arch-conns{columns:2;column-gap:30px}
.arch.expanded .arch-conns li{border-bottom:0;padding:9px 0}
.arch.expanded .arch-step a{font-size:12.5px}
.arch.expanded .arch-info>b{font-size:26px}.arch.expanded .arch-info>p{font-size:16px}
body.arch-open{overflow:hidden}
body.arch-open::after{content:"";position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:999}
.arch.walking .arch-node text{transition:fill .2s}
@media (max-width:1000px){.arch.expanded{grid-template-columns:1fr;inset:8px;padding:16px}.arch.expanded .arch-svg svg{max-height:52vh}}

/* ---------- architecture: expandable graph ---------- */
.arch-line{stroke:rgba(var(--accent-rgb),.22);stroke-width:1;transition:opacity .25s,stroke .25s,stroke-width .25s}
.arch-line.l-int{stroke:rgba(79,134,198,.3);stroke-dasharray:3 3}
.arch-line.l-int2{stroke:rgba(79,134,198,.13);stroke-dasharray:2 5}
.arch-line.l-mod{stroke:rgba(var(--accent-rgb),.085)}
.arch-line.on{stroke:rgba(var(--accent-rgb),.95);stroke-width:1.9;opacity:1;stroke-dasharray:none}
.arch-line.on2{stroke:rgba(var(--accent-rgb),.36);stroke-width:1.05;opacity:1;stroke-dasharray:none;transition-delay:.14s}
.arch-line.on3{stroke:rgba(var(--accent-rgb),.19);stroke-width:1;opacity:1;stroke-dasharray:none;transition-delay:.28s}
.arch-line.l-int.on2{stroke:rgba(79,134,198,.38)}.arch-line.l-int.on3{stroke:rgba(79,134,198,.2)}
.arch-line.lit{stroke:var(--accent);stroke-width:2;opacity:1;stroke-dasharray:none}
.arch-line.l-int.lit{stroke:#7fb2ea}
.arch-node.lit{opacity:1}
.arch-node.lit text{fill:var(--ink);font-weight:600}
.arch-node.lit .dot{r:9}
.arch-line.l-int.on{stroke:rgba(79,134,198,.85)}
.arch-line.l-int.on2{stroke:rgba(79,134,198,.45)}
.arch-line.off{opacity:.28}
.arch-node{transition:opacity .25s}
.arch-node text{transition:fill .25s}
.arch-node.far{opacity:.42}
.arch-node.l2{opacity:.92;transition-delay:.14s}.arch-node.l3{opacity:.72;transition-delay:.28s}
.arch-node.l2 text{fill:var(--ink2)}
.arch-node.l3 text{fill:var(--dim)}
.arch-node.l1 .dot{r:8.5}
.arch-node.sel.is-hub .dot,.arch-node.l1.is-hub .dot{r:9.5}
/* the ripple: the ring you touched, then what it touches, then one more */
.arch-node.l1 .dot,.arch-node.l2 .dot,.arch-node.l3 .dot{transition:r .25s}
.arch-node.l1 text{transition-delay:0s}
.arch-node.sel .dot{r:9.5;stroke:rgba(var(--accent-rgb),.35);stroke-width:5}
.arch-node.is-hub .dot{r:9}
.arch-node.is-hub text{font-weight:600;fill:var(--ink)}
.arch-node.sel text,.arch-node.l1 text{fill:var(--ink);font-weight:600}
.arch-reach{display:flex;align-items:center;gap:6px;margin-top:14px;font-size:11px;color:var(--dim)}
.arch-reach span{text-transform:uppercase;letter-spacing:.1em;font-size:10px}
.arch-reach button{font:inherit;font-size:11px;color:var(--dim);background:transparent;border:1px solid var(--line);border-radius:999px;padding:3px 10px;cursor:pointer;transition:.15s}
.arch-reach button:hover{color:var(--ink2);border-color:var(--line2)}
.arch-reach button.on{color:var(--accent);border-color:rgba(var(--accent-rgb),.6);background:rgba(var(--accent-rgb),.08)}
.arch-step{margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.arch-step>span{display:block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-bottom:7px}
.arch-step a{display:inline-block;font-size:12px;color:var(--ink2);border:1px solid var(--line);border-radius:999px;padding:3px 9px;margin:0 5px 5px 0;text-decoration:none}
.arch-step a:hover{color:var(--accent);border-color:rgba(var(--accent-rgb),.5)}
.arch-step a i{font-style:normal;color:var(--dim2);font-size:11px}
.arch-node .hit{fill:transparent}
.arch-core .heart{transition:fill .25s,stroke .25s}
.arch-core .hub,.arch-core .spoke{transition:stroke .25s}
.arch-core.sel .hub{stroke-width:2}
.arch-core:hover .spoke{stroke:var(--accent)}
.arch-core .mark{paint-order:stroke;stroke-linejoin:round}
.arch-core.sel .heart{fill:rgba(var(--accent-rgb),.12)}
/* The mark: a hairline rim, the hub and spokes lighter again so the centre
   never fills in, and a quarter turn on hover — it is a wheel. */
.arch-wheel{transition:transform .85s cubic-bezier(.22,.61,.36,1)}
.arch-wheel-g circle+circle,.arch-wheel-g path{stroke-width:var(--wheel-in)}
.arch-core:hover .arch-wheel,.arch-core.sel .arch-wheel{transform:rotate(30deg)}
@media (prefers-reduced-motion:reduce){.arch-wheel{transition:none}.arch-core:hover .arch-wheel,.arch-core.sel .arch-wheel{transform:none}}
.arch-core .ring{transform-box:fill-box;transform-origin:center}
.arch-core .ring2{animation:archring 3.2s ease-out infinite}
.arch-core .heart{animation:archheart 3.2s ease-in-out infinite}
@keyframes archring{0%{transform:scale(.8);opacity:.9}70%{transform:scale(1.22);opacity:0}100%{transform:scale(1.22);opacity:0}}
@keyframes archheart{0%,100%{fill:rgba(var(--accent-rgb),.055)}50%{fill:rgba(var(--accent-rgb),.105)}}
@media (prefers-reduced-motion:reduce){.arch-core .ring2,.arch-core .heart{animation:none}}
.arch-conns{list-style:none;margin:14px 0 0;padding:0;border-top:1px solid var(--line)}
.arch-conns li{display:block;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px;cursor:pointer;break-inside:avoid;transition:padding-left .18s}
.arch-conns li:last-child{border-bottom:0}
.arch-conns li:hover{padding-left:6px}
.arch-conns li:hover b{color:var(--accent)}
.arch-conns li:hover .cd{box-shadow:0 0 0 4px rgba(var(--accent-rgb),.18)}
.arch-conns li:hover b::after{background:linear-gradient(90deg,rgba(var(--accent-rgb),.5),transparent)}
.arch-info .arch-conns b{display:flex;align-items:center;gap:9px;font-size:13px;letter-spacing:0;margin:0 0 4px;color:var(--ink);font-weight:600;line-height:1.3}
.arch-info .arch-conns b::after{content:"";flex:1 1 auto;height:1px;min-width:12px;background:linear-gradient(90deg,var(--line2),transparent);transition:background .18s}
.arch-conns .cd{flex:none;width:7px;height:7px;border-radius:50%;background:var(--accent);transition:box-shadow .18s}
.arch-conns .cd.int{width:8px;height:8px;border-radius:2px;background:#4F86C6}
.arch-conns span{display:block;color:var(--dim);font-size:12.5px;line-height:1.5;padding-left:16px}

.arch.expanded .arch-conns li{font-size:14px}
@media (max-width:1000px){.arch-info{-webkit-mask-image:none;mask-image:none;overflow:visible}}
@media (max-width:700px){
    .arch-info .arch-conns b{font-size:14px}.arch-conns span{font-size:13.5px}
  .arch-svg{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -8px;padding:0 8px}
  .arch-svg svg{min-width:680px}
  .arch.expanded .arch-svg svg{max-height:none}
}

/* The day/night note above the module rows: the visuals below it are the real
   console, and the console has both looks, so the point is worth making once
   and making plainly. The button is the header's switch, put where it proves
   something. */
.daynote{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px 24px;margin-bottom:8px}
.daynote .dn-b{flex:1 1 420px;min-width:0}
.daynote .kicker{margin-bottom:6px}
.daynote p{margin:0;color:var(--ink2);font-size:15px;line-height:1.6;max-width:74ch}
.daynote p b{color:var(--ink);font-weight:600}
.daynote .dn-go{flex:none;white-space:nowrap}
@media (max-width:700px){.daynote{padding:16px 18px}.daynote p{font-size:14px}.daynote .dn-go{width:100%;text-align:center}}

/* The way in. Sits beside the day/night switch and wears the same shape, so
   the two read as a pair of controls rather than a link that wandered in. */
.top-right .housed{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--line2);background:transparent;color:var(--ink);transition:color .18s,border-color .18s,background .18s}
.top-right .housed svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.top-right .housed:hover{color:var(--accent);border-color:rgba(var(--accent-rgb),.5);background:rgba(var(--accent-rgb),.08)}

/* ---------- booking a walkthrough ---------- */
.bk{display:grid;gap:22px}
.bk-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.bk-head h2{margin:0;font-size:22px}
.bk-zone{font-size:13px;color:var(--dim)}
.bk-days{display:grid;gap:2px;max-height:420px;overflow-y:auto;padding-right:4px}
.bk-day{padding:14px 0;border-top:1px solid var(--line)}
.bk-day:first-child{border-top:0;padding-top:0}
.bk-day h3{margin:0 0 10px;font-size:14px;font-weight:600;color:var(--ink2);letter-spacing:.01em}
.bk-slots{display:flex;flex-wrap:wrap;gap:8px}
.bk-slot{font:inherit;font-size:14px;font-variant-numeric:tabular-nums;padding:9px 14px;border-radius:999px;border:1px solid var(--line2);background:var(--panel);color:var(--ink);cursor:pointer;transition:.15s}
.bk-slot:hover,.bk-slot:focus-visible{border-color:var(--accent);color:var(--accent);outline:0}
.bk-load{color:var(--dim);font-size:15px;margin:0}
.bk-cal,.bk-form,.bk-done{background:var(--panel);border:1px solid var(--line);border-radius:var(--r2);padding:26px 28px}
.bk-chosen{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.bk-chosen b{font-size:19px;color:var(--ink)}
.bk-chosen span{font-size:14px;color:var(--dim)}
.bk-done h2{margin:0 0 10px;font-size:24px}
.bk-done p{margin:0 0 8px;color:var(--ink2)}
.bk-done .bk-fine{font-size:14px;color:var(--dim)}
@media (max-width:760px){.bk-cal,.bk-form,.bk-done{padding:20px 18px}.bk-days{max-height:none}}

/* The booking page's day list and the architecture panel scroll without
   announcing it — same reasoning as the back office. */
.bk-days,.arch-info,.compare{scrollbar-width:none;-ms-overflow-style:none}
.bk-days::-webkit-scrollbar,.arch-info::-webkit-scrollbar,.compare::-webkit-scrollbar{width:0;height:0}