/* Systemize. Midnight #010c1b, Champagne Gold #b6ac86, Soft Grey #d8dbde. */
:root{
  --bg:#010c1b; --ink:#f2f3f5; --dim:#8d97a8; --accent:#b6ac86; --accent-2:#d4cba7;
  --card:rgba(8,18,36,.82); --edge:rgba(216,219,222,.10);
  /* Liam's stack: the system sans, heavy and tight. One family everywhere. */
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;
  --serif:var(--sans); --head:var(--sans); --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);overflow:hidden;font:15px/1.5 var(--sans);-webkit-font-smoothing:antialiased}
body.intro-active{overflow:auto;overflow-x:hidden}
a{color:inherit;text-decoration:none}
canvas#orb{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;transform-origin:50% 51%;
  transition:transform .95s cubic-bezier(.4,0,.2,1), opacity .6s ease}
body.sx-shrink canvas#orb{transform:translate(calc(-50vw + 37px),calc(-50vh + 33px)) scale(.02);opacity:0}
body.sx-dim canvas#orb{filter:blur(7px) brightness(.45);transform:scale(1.04);transition:filter .7s ease,transform .9s cubic-bezier(.16,1,.3,1)}
body.sx-fast canvas#orb{transition:none}
.overlay{position:fixed;inset:0;pointer-events:none;z-index:600}
.overlay.scanlines{background:repeating-linear-gradient(0deg,rgba(0,0,0,.12) 0 1px,transparent 1px 3px);transition:opacity .6s}
.overlay.vignette{background:radial-gradient(ellipse at 50% 46%,transparent 42%,rgba(1,12,27,.7) 100%)}
body.sx-shrink .overlay,body.sx-cover .overlay{opacity:0}

/* headline: sits above the system, centred */
.headline{position:fixed;left:0;right:0;top:clamp(22px,4.5vh,44px);z-index:650;text-align:center;pointer-events:none;padding:0 20px;
  transition:opacity .5s ease, transform .5s ease}
/* the split: copy left, system right */
@media(min-width:760px){
  .headline{left:5vw;right:auto;top:18vh;width:min(42vw,600px);text-align:left;padding:0}
  .headline .brand{margin-bottom:22px}
  .headline h1{font-size:clamp(34px,3.9vw,58px)}
  .headline .sub{margin-left:0;max-width:480px}
  .dock{left:5vw;transform:none;bottom:9vh;flex-wrap:wrap;width:min(42vw,600px);min-width:360px}
  .dock button{flex:1 1 44%;min-width:0}
  .dock .book{flex:1 1 100%;justify-content:center;margin:0;padding:15px}
  .chip-tl{display:none}
  .chip-bl{left:5vw}
}
body.sx-open .headline{opacity:0;transform:translateY(-10px)}
.brand{display:inline-flex;align-items:center;gap:9px;font:800 12px var(--head);letter-spacing:.26em;margin-bottom:clamp(14px,2.6vh,28px)}
.brand img{width:22px;height:22px;object-fit:contain;filter:drop-shadow(0 0 10px rgba(182,172,134,.45))}
.headline h1{font:700 clamp(30px,4.4vw,56px)/1.07 var(--head);letter-spacing:-.03em}
.headline h1 em{font-style:normal;color:var(--accent)}
.sx-h1 em,.rw-manifesto p em,.rw-online h4 em,.dk h2 em{font-style:normal!important}
.headline .sub{margin:12px auto 0;max-width:640px;font-size:14.5px;color:#a9b0bd;letter-spacing:.01em;line-height:1.55}
@media(max-width:640px){.headline h1 br{display:none}html.f-home .who{flex-direction:column;align-items:flex-start;gap:6px}html.f-home .who .face{width:34px;height:34px;font-size:11px}html.f-home .who b,html.f-home .who span{white-space:normal}html.f-home .who b{font-size:13px}}
@media(max-width:480px){.headline .sub{display:none}}

/* corner chips */
.chip{position:fixed;z-index:650;font:500 10px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--dim);
  display:flex;flex-direction:column;gap:3px;transition:opacity .4s}
.chip b{color:var(--ink);font-weight:500}
.chip-tl{left:28px;top:26px}.chip-tr{right:28px;top:26px;text-align:right;align-items:flex-end}
.chip-bl{left:28px;bottom:24px}.chip-br{right:28px;bottom:24px;text-align:right}
.chip-tr:hover b{color:var(--accent)}
body.sx-open .chip,body.intro-active .chip{opacity:0;pointer-events:none}
@media(max-width:640px){.chip-tl,.chip-br{display:none}.chip{font-size:9px}.chip-tr{right:16px;top:18px}.chip-bl{left:16px;bottom:16px}}

/* ===== the cards ===== */
#stage{position:fixed;inset:0;z-index:200;perspective:900px;perspective-origin:50% 30%;pointer-events:none;transition:opacity .4s}
#cloud{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.ccard{position:absolute;left:50%;top:50%;pointer-events:auto;cursor:pointer;width:200px;padding:15px 17px 16px;border-radius:8px;
  background:linear-gradient(180deg,rgba(14,24,44,.96),rgba(6,14,30,.96));border:1px solid rgba(216,219,222,.14);border-top-color:rgba(212,203,167,.45);
  box-shadow:0 2px 0 rgba(0,0,0,.6),0 18px 30px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.06);transition:border-color .25s ease, box-shadow .25s ease;will-change:transform}
.ccard .k{font:500 9.5px var(--mono);letter-spacing:.22em;color:var(--accent);margin-bottom:6px}
.ccard h3{font:700 16.5px var(--head);letter-spacing:-.01em}
.ccard p{font-size:11.5px;color:var(--dim);margin-top:4px;line-height:1.4}
.ccard:hover{border-color:rgba(212,203,167,.5);box-shadow:0 2px 0 rgba(0,0,0,.6),0 40px 60px rgba(0,0,0,.7)}
/* assessment: four areas as stations, the pulse running through them */
.ccard .pipe{position:relative;display:flex;justify-content:space-between;align-items:center;margin:12px 0 10px;height:20px}
.ccard .pipe .pl{position:absolute;left:4px;right:4px;top:50%;height:1px;background:linear-gradient(90deg,var(--edge),rgba(216,219,222,.25),var(--edge))}
.ccard .pic{position:relative;z-index:1;width:19px;height:19px;border-radius:6px;display:flex;align-items:center;justify-content:center;
  font:700 9px var(--mono);font-style:normal;background:#0b1730;border:1px solid rgba(216,219,222,.22);color:#b9c0cc}
.ccard .pic.on{background:#1f1d14;border-color:var(--accent);color:var(--accent);box-shadow:0 0 9px rgba(182,172,134,.5)}
.ccard .pdot{position:absolute;z-index:0;top:50%;left:0;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 8px var(--accent);animation:pipedot 3.2s linear infinite}
@keyframes pipedot{0%{left:2%;opacity:0}8%{opacity:1}92%{opacity:1}100%{left:96%;opacity:0}}
/* method: three steps */
.ccard .steps{display:flex;gap:6px;margin:11px 0 9px}
.ccard .steps b{flex:1;font:500 8.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;text-align:center;padding:7px 0;border-radius:6px;
  border:1px solid var(--edge);background:rgba(216,219,222,.035);color:var(--dim)}
.ccard .steps b.on{border-color:var(--accent);color:var(--accent);background:rgba(182,172,134,.07)}
/* book: the card is the button */
.ccard.r-book{width:240px;padding:0;background:transparent;border-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
.ccard.r-book:hover{border-color:transparent;box-shadow:none}
.ccard .bookwrap{display:flex;justify-content:center}
.ccard .bookbtn{display:inline-flex;align-items:center;gap:10px;font:800 14px var(--head);letter-spacing:.14em;color:var(--bg);
  background:linear-gradient(180deg,#d4cba7,#b6ac86);border-radius:11px;padding:16px 22px;white-space:nowrap;
  box-shadow:0 6px 22px rgba(182,172,134,.35),inset 0 1px 0 rgba(255,255,255,.35)}
.ccard.r-book:hover .bookbtn{background:linear-gradient(180deg,#e2dbbf,#c4bb95)}
.ccard .bookbtn svg{transition:transform .25s}.ccard.r-book:hover .bookbtn svg{transform:translateX(3px)}
/* proof: four results */
.ccard.r-proof{width:236px}
.ccard .rgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:9px 0 8px}
.ccard .rgrid figure{border:1px solid var(--edge);border-radius:6px;padding:7px 8px;background:rgba(1,12,27,.6)}
.ccard .rgrid b{display:block;font:800 15px var(--head);color:var(--accent)}
.ccard .rgrid span{font:500 8px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
/* operator */
.ccard .hostrow{display:flex;gap:11px;align-items:center;margin-top:9px}
.ccard .face{flex:none;width:44px;height:44px;border-radius:50%;overflow:hidden;border:1px solid var(--edge);position:relative;
  background:radial-gradient(circle at 35% 30%,#1c2a48,#0a1526);display:flex;align-items:center;justify-content:center;font:700 12px var(--head);color:var(--dim)}
.ccard .face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ccard .hostrow p{margin-top:3px}
.ccard .statick{position:relative;height:13px;margin-top:9px;overflow:hidden}
.ccard .statick span{position:absolute;inset:0;display:flex;align-items:center;gap:6px;font:700 8.5px var(--mono);letter-spacing:.14em;color:var(--dim);opacity:0;
  animation:statick 9s linear infinite;white-space:nowrap}
.ccard .statick span::before{content:'';flex:none;width:4px;height:4px;border-radius:50%;background:var(--accent);box-shadow:0 0 6px var(--accent)}
.ccard .statick span:nth-child(2){animation-delay:3s}.ccard .statick span:nth-child(3){animation-delay:6s}
@keyframes statick{0%{opacity:0;transform:translateY(5px)}4%{opacity:1;transform:none}30%{opacity:1;transform:none}37%{opacity:0;transform:translateY(-5px)}100%{opacity:0}}
@media(max-width:640px){
  .ccard{width:158px}.ccard p{display:none}.ccard .k{font-size:8.5px;letter-spacing:.16em}
  .ccard.r-proof{width:170px}.ccard .rgrid{grid-template-columns:repeat(4,1fr);gap:4px}.ccard .rgrid span{display:none}.ccard .rgrid b{font-size:13px}
  .ccard.r-book{width:min(300px,calc(100vw - 88px))}.ccard .bookwrap{width:100%}.ccard .bookbtn{width:100%;justify-content:center;font-size:12px;padding:13px 16px}
  .ccard .hostrow p{display:none}
}

/* ===== sections ===== */
.sx{position:fixed;inset:0;z-index:700;overflow-y:auto;opacity:0;pointer-events:none;transform:translateY(16px) scale(.985);
  transition:opacity .45s ease, transform .55s cubic-bezier(.16,1,.3,1);
  background:radial-gradient(ellipse at 50% 24%,rgba(182,172,134,.07),transparent 58%),repeating-linear-gradient(0deg,rgba(0,0,0,.13) 0 1px,transparent 1px 3px);
  background-color:var(--bg)}
.sx.on{opacity:1;pointer-events:auto;transform:none;transition:opacity .5s ease .42s, transform .6s cubic-bezier(.16,1,.3,1) .42s}
.sx.noanim{transition:none!important}
/* a closed section can never take a click, whatever its children say */
.sx:not(.on),.sx:not(.on) *{pointer-events:none!important}
.sx-in{max-width:1020px;margin:12vh auto 14vh;padding:0 clamp(22px,4.5vw,54px)}
.sx-kick{font:500 11px var(--mono);letter-spacing:.3em;color:var(--accent);margin-bottom:16px}
.sx-h1{font:600 clamp(34px,5vw,60px)/1.04 var(--serif);letter-spacing:-.01em;margin-bottom:18px}
.sx-h1 em{font-style:italic;color:var(--accent)}
.sx-lede{font-size:16px;line-height:1.7;color:rgba(242,243,245,.85);max-width:640px}
.sx-lede b{color:var(--ink)}
.sx-note{margin-top:26px;font:500 10px var(--mono);color:var(--dim);letter-spacing:.14em}
.sx-block{margin:44px 0 0}
.sx-block h2{font:500 12px var(--mono);letter-spacing:.28em;color:var(--accent);margin-bottom:16px}
.sx-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 22px;perspective:900px}
.sx-stat{background:var(--card);border:1px solid var(--edge);border-radius:12px;padding:18px 18px 16px;box-shadow:0 22px 50px rgba(0,0,0,.45);
  transform:rotateX(2deg);transition:transform .35s ease,border-color .3s}
.sx-stat:nth-child(2n){transform:rotateX(-1.5deg) translateY(6px)}
.sx-stat:hover{transform:none;border-color:rgba(216,219,222,.3)}
.sx-stat b{display:block;font:800 clamp(18px,2.2vw,26px) var(--head);letter-spacing:-.02em}
.sx-stat b i{font-style:normal;color:var(--accent)}
.sx-stat span{display:block;margin-top:6px;font:500 9.5px var(--mono);letter-spacing:.14em;color:var(--dim)}
.sx-rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.sx-rules.two{grid-template-columns:1fr 1fr}
.sx-rule{background:rgba(8,18,36,.75);border:1px solid var(--edge);border-radius:12px;padding:17px 18px}
.sx-rule b{display:block;font:700 14px var(--head);margin-bottom:7px}
.sx-rule p{font-size:12.5px;line-height:1.6;color:var(--dim)}
.sx-rule.your{border-color:rgba(182,172,134,.5);background:rgba(182,172,134,.05)}
.sx-rule.your b{color:var(--accent)}
.sx-cta{display:inline-flex;align-items:center;gap:10px;margin-top:34px;font:800 12px var(--head);letter-spacing:.16em;color:var(--bg);cursor:pointer;
  background:linear-gradient(180deg,#d4cba7,#b6ac86);border:0;border-radius:11px;padding:16px 24px;box-shadow:0 6px 24px rgba(182,172,134,.35)}
.sx-cta:hover{background:linear-gradient(180deg,#e2dbbf,#c4bb95)}
.sx-hero{display:flex;gap:26px;align-items:center;margin-bottom:22px}
.sx-face{flex:none;width:92px;height:92px;border-radius:50%;overflow:hidden;position:relative;border:1px solid rgba(216,219,222,.2);
  background:radial-gradient(circle at 35% 30%,#1c2a48,#0a1526);display:flex;align-items:center;justify-content:center;font:800 26px var(--head);color:var(--dim)}
.sx-face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sx-quote{font:600 italic clamp(20px,2.4vw,28px)/1.3 var(--serif);color:var(--accent-2);border-left:2px solid var(--accent);padding-left:20px;margin:10px 0 34px;max-width:720px}
.sx-tl{border-left:1px solid var(--edge);padding-left:24px}
.sx-tl .row{position:relative;padding:0 0 26px}
.sx-tl .row::before{content:"";position:absolute;left:-28.5px;top:5px;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 9px var(--accent)}
.sx-tl .yy{font:500 10px var(--mono);letter-spacing:.26em;color:var(--accent);margin-bottom:5px}
.sx-tl b{display:block;font:700 15px var(--head);margin-bottom:4px}
.sx-tl p{font-size:12.5px;line-height:1.62;color:var(--dim);max-width:560px}
.sx-home{position:fixed;top:22px;left:26px;z-index:950;display:flex;gap:10px;align-items:center;background:none;border:0;cursor:pointer;color:var(--ink);
  opacity:0;pointer-events:none;transform:translateY(-8px);transition:opacity .4s ease, transform .4s ease}
.sx-home.on{opacity:1;pointer-events:auto;transform:none;transition:opacity .45s ease .7s, transform .45s ease .7s}
.sx-home.noanim{transition:none!important}
.sx-home img{width:22px;height:22px;object-fit:contain;filter:drop-shadow(0 0 10px rgba(182,172,134,.4))}
.sx-home b{font:800 12px var(--head);letter-spacing:.26em}
.sx-home em{font:500 10px var(--mono);font-style:normal;color:var(--dim);letter-spacing:.14em;margin-left:2px}
.sx-home:hover em{color:var(--ink)}
@media(max-width:760px){.sx-stats{grid-template-columns:1fr 1fr}.sx-rules.two{grid-template-columns:1fr}.sx-hero{flex-direction:column;align-items:flex-start;gap:14px}
  .sx-home{top:14px;left:14px;background:rgba(8,18,36,.7);backdrop-filter:blur(8px);border:1px solid var(--edge);border-radius:999px;padding:8px 14px 8px 11px}}

/* ===== the intro ===== */
#intro{position:fixed;inset:0;z-index:1200;background:#e9e6df;color:#1a1a1a}
.intro-spacer{height:520vh}
.intro-stage{position:relative;height:100%;overflow:hidden;
  background:radial-gradient(1200px 600px at 50% 120%,rgba(0,0,0,.18),transparent 60%),repeating-linear-gradient(0deg,rgba(0,0,0,.025) 0 1px,transparent 1px 28px),#ece9e2}
.menubar{position:absolute;top:0;left:0;right:0;height:34px;background:#1c1c1e;color:#ddd;font:500 12px var(--mono);display:flex;align-items:center;justify-content:space-between;padding:0 16px;z-index:5}
.menubar b{color:#fff}#unread b{color:#ff453a}
.pile{position:absolute;inset:34px 0 0 0;z-index:3}
.note{position:absolute;width:230px;padding:12px 14px;border-radius:10px;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.18);font-size:13px;line-height:1.35;
  transform:translate(var(--x),var(--y)) rotate(var(--rot)) scale(var(--s,1));will-change:transform,opacity}
.note i{display:block;font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#777;margin-bottom:4px;font-style:normal}
.note b{display:block;font-weight:700;margin-bottom:2px}.note p{color:#333}
.note s{display:block;text-decoration:none;color:#999;font-size:11px;margin-top:6px}
.n-wa{border-left:4px solid #25d366}.n-call{border-left:4px solid #ff3b30}.n-ig{border-left:4px solid #e1306c}.n-form{border-left:4px solid #5856d6}
.n-stripe{border-left:4px solid #635bff}.n-inv{border-left:4px solid #c9a227}.n-sheet{border-left:4px solid #0f9d58}.n-cal{border-left:4px solid #ff9500}
.n-mail{border-left:4px solid #1d6fd8}.n-ads{border-left:4px solid #1877f2}.n-rem{border-left:4px solid #ff453a}
.sticky{background:#fff29a;width:170px;font-family:"Comic Sans MS","Marker Felt",cursive;font-size:15px}
.sticky.s2{background:#ffb1a8}.sticky.s3{background:#b8e6ff}
.columns{position:absolute;left:0;right:0;top:52px;display:flex;padding:0 5%;opacity:0;pointer-events:none}
.columns span{flex:1;text-align:center;font:600 13px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--bg);border-bottom:2px solid var(--bg);padding-bottom:10px}
.core-flash{position:absolute;inset:0;z-index:2;background:radial-gradient(ellipse 70% 40% at 50% 70%,#17130f,#0a0a0c 55%,var(--bg) 100%);opacity:0;pointer-events:none}
.core-flash i{z-index:4}
.core-flash i{position:absolute;left:50%;top:51%;width:26px;height:26px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 30px 10px rgba(182,172,134,.7),0 0 90px 30px rgba(182,172,134,.3);transform:translate(-50%,-50%) scale(0)}
.intro-lines{position:absolute;left:0;right:0;top:44%;pointer-events:none;z-index:6}
.il{position:absolute;left:50%;transform:translate(-50%,12px);width:max-content;max-width:calc(100% - 40px);font:600 clamp(2rem,5.4vw,4.4rem)/1.05 var(--serif);
  letter-spacing:-.01em;color:#1a1a1a;opacity:0;padding:14px 28px;border-radius:8px;background:rgba(236,233,226,.92);box-shadow:0 20px 60px rgba(0,0,0,.18);text-align:center}
.scroll-cue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);font:500 12px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#444;z-index:6;display:flex;gap:8px}
.scroll-cue span{animation:bob 1.4s infinite}@keyframes bob{50%{transform:translateY(4px)}}
.skip{position:absolute;right:18px;bottom:18px;background:none;border:0;font:500 12px var(--mono);letter-spacing:.14em;color:#444;cursor:pointer;z-index:6}
.skip:hover{color:#000}
body.intro-active canvas#orb{transition:none;opacity:0;z-index:1201;pointer-events:none}
body.intro-active .headline{opacity:0;z-index:1202;transition:none}
body.intro-active #stage{opacity:0}
body.intro-active .overlay{opacity:0}
@media(max-width:700px){.note{width:160px;font-size:12px;padding:10px 12px}.note p{display:none}.sticky{width:130px;font-size:13px}.sticky p{display:block}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ===== the dock: the navigation ===== */
#stage{display:none}
.dock{position:fixed;left:50%;bottom:4.5vh;transform:translateX(-50%);z-index:650;display:flex;align-items:stretch;gap:8px;padding:8px;border-radius:16px;
  background:rgba(4,12,26,.72);border:1px solid rgba(216,219,222,.12);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 30px 70px rgba(0,0,0,.55);transition:opacity .4s}
.dock button{font:inherit;color:var(--ink);background:rgba(216,219,222,.03);border:1px solid rgba(216,219,222,.1);border-radius:10px;padding:10px 16px;text-align:left;cursor:pointer;min-width:150px;
  transition:background .2s,border-color .2s,transform .2s}
.dock button:hover{background:rgba(182,172,134,.1);border-color:rgba(212,203,167,.5);transform:translateY(-2px)}
.dock small{display:block;font:500 8.5px var(--mono);letter-spacing:.22em;color:var(--accent);margin-bottom:3px}
.dock b{display:block;font:700 13.5px var(--head);letter-spacing:-.01em}
.dock .book{display:inline-flex;align-items:center;gap:10px;margin-left:6px;font:800 13px var(--head);letter-spacing:.14em;color:var(--bg);
  background:linear-gradient(180deg,#d4cba7,#b6ac86);border-radius:10px;padding:0 22px;box-shadow:0 6px 22px rgba(182,172,134,.35),inset 0 1px 0 rgba(255,255,255,.35);transition:transform .2s}
.dock .book:hover{transform:translateY(-2px)}
body.sx-open .dock,body.intro-active .dock{opacity:0;pointer-events:none}
@media(max-width:900px){.dock{flex-wrap:wrap;justify-content:center;width:calc(100% - 24px);bottom:12px}.dock button{min-width:0;flex:1 1 40%}.dock .book{flex:1 1 100%;justify-content:center;margin:0;padding:14px}}
@media(max-width:640px){.chip-bl{display:none}.dock button{padding:9px 12px}.dock b{font-size:12.5px}}

/* ===== preview: clean ===== */
html.f-clean .overlay.scanlines,html.f-clean .overlay.vignette,html.f-clean .chip-br{display:none}
html.f-clean .sx{background:var(--bg)}
/* ===== preview: the night clock ===== */
.rw-clock{position:absolute;right:28px;top:26px;font:500 12px var(--mono);letter-spacing:.18em;color:var(--dim);display:none;align-items:baseline;gap:10px}
.rw-clock b{font-weight:500;color:var(--ink);font-size:20px;letter-spacing:.06em;font-variant-numeric:tabular-nums}
html.f-clock .rw-clock{display:flex}
@media(max-width:640px){.rw-clock{right:14px;top:14px}}

/* ===== preview: home ===== */
/* centred headline, the globe under it, four content cards resting on the
   desk either side, the button in front. Cards tip back like propped frames
   and lift toward you on hover. */
html.f-home .headline{left:0;right:auto;width:100%;top:clamp(22px,4.5vh,44px);text-align:center;padding:0 20px}
html.f-home .headline .sub{margin:12px auto 0;max-width:640px}
html.f-home .headline h1{font-size:clamp(30px,4.4vw,56px)}
html.f-home .chip-tl{display:none}
html.f-home .dock{left:0;right:0;width:auto;min-width:0;bottom:0;top:0;transform:none;background:none;border:0;box-shadow:none;backdrop-filter:none;padding:0;pointer-events:none;perspective:1100px;perspective-origin:50% 40%}
html.f-home .dock button{position:absolute;pointer-events:auto;width:232px;padding:13px 15px 14px;text-align:left;border-radius:10px;min-width:0;
  background:linear-gradient(180deg,rgba(10,18,34,.96),rgba(4,10,22,.97));border:1px solid rgba(216,219,222,.12);border-top-color:rgba(212,203,167,.45);
  box-shadow:0 2px 0 rgba(0,0,0,.6),0 24px 40px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.06);
  transform:rotateX(14deg) rotateY(var(--ry,0deg));transition:transform .35s cubic-bezier(.16,1,.3,1),border-color .25s,box-shadow .25s}
html.f-home .dock button:hover{transform:rotateX(0deg) rotateY(0deg) translateY(-10px) scale(1.04);border-color:rgba(212,203,167,.6);box-shadow:0 2px 0 rgba(0,0,0,.6),0 44px 70px rgba(0,0,0,.7)}
html.f-home .dock small{display:block;font:500 8.5px var(--mono);letter-spacing:.22em;color:var(--accent);margin-bottom:5px}
html.f-home .dock button>b{display:block;font:700 15px var(--head);letter-spacing:-.015em;margin-bottom:7px}
html.f-home .dock button>span{display:block;font-size:10.5px;line-height:1.4;color:var(--dim);margin-top:7px}
html.f-home .c-assess{left:calc(50% - 600px);top:calc(50% - 30px);--ry:12deg}
html.f-home .c-method{left:calc(50% - 400px);top:calc(50% + 150px);--ry:7deg}
html.f-home .c-proof{left:calc(50% + 170px);top:calc(50% + 140px);--ry:-7deg}
html.f-home .c-op{left:calc(50% + 376px);top:calc(50% - 30px);--ry:-12deg}
html.f-home .dock .book{position:absolute;left:50%;bottom:5.5vh;transform:translateX(-50%);pointer-events:auto;margin:0;padding:17px 30px;font-size:15px;flex:none;width:auto;border-radius:11px}
html.f-home .dock .book:hover{transform:translateX(-50%) translateY(-2px)}
/* the leak map */
html.f-home .areas{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
html.f-home .areas i{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;padding:7px 2px 6px;border:1px solid rgba(216,219,222,.12);border-radius:7px;background:rgba(1,12,27,.5);color:#8c95a6;font-style:normal}
html.f-home .areas svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
html.f-home .areas s{text-decoration:none;font:500 6.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:rgba(216,219,222,.5)}
html.f-home .areas i.hit{border-color:rgba(182,172,134,.55);color:var(--accent);background:radial-gradient(ellipse at 50% 100%,rgba(182,172,134,.16),transparent 70%)}
html.f-home .areas i.hit s{color:var(--accent)}
html.f-home .areas em.hot{position:absolute;right:4px;top:4px;width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent);animation:leakpulse 1.8s ease-in-out infinite}
@keyframes leakpulse{50%{box-shadow:0 0 14px var(--accent);transform:scale(1.25)}}
/* the three steps: small square tiles on a line, the live one lit, a pulse running along it */
html.f-home .steps{position:relative;display:flex;justify-content:space-between;align-items:center;height:34px;margin:2px 4px 0}
html.f-home .steps u{position:absolute;left:14px;right:14px;top:50%;height:1px;background:rgba(216,219,222,.18)}
html.f-home .steps i{position:relative;z-index:1;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:7px;background:#0a1324;border:1px solid rgba(216,219,222,.2);color:#8c95a6;font-size:0}
html.f-home .steps svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
html.f-home .steps i.on{border-color:var(--accent);color:var(--accent);box-shadow:0 0 12px rgba(182,172,134,.45)}
html.f-home .steps .pdot{position:absolute;z-index:0;top:50%;left:0;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent);animation:pipedot 3.2s linear infinite}
@keyframes pipedot{0%{left:8%;opacity:0}8%{opacity:1}92%{opacity:1}100%{left:90%;opacity:0}}
/* the numbers */
html.f-home .nums{display:grid;grid-template-columns:1fr 1fr;gap:5px}
html.f-home .nums i{position:relative;overflow:hidden;min-height:48px;font-style:normal;border:1px solid rgba(216,219,222,.12);border-radius:6px;padding:7px 8px;background:rgba(1,12,27,.6);font:500 7.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
html.f-home .nums img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;mask-image:linear-gradient(90deg,rgba(0,0,0,.25),#000)}
html.f-home .nums i:has(img){min-height:56px;display:flex;flex-direction:column;justify-content:flex-end}
html.f-home .nums i b,html.f-home .nums i{text-shadow:0 1px 6px rgba(0,0,0,.8)}
html.f-home .nums i b{position:relative;display:block;font:800 15px var(--head);color:var(--accent);letter-spacing:-.02em;margin-bottom:1px}
/* the operator */
html.f-home .who{display:flex;gap:11px;align-items:center;margin-top:4px}
html.f-home .who .face{flex:none;width:46px;height:46px;border-radius:50%;overflow:hidden;position:relative;border:1px solid rgba(216,219,222,.2);background:radial-gradient(circle at 35% 30%,#1c2a48,#0a1526);display:flex;align-items:center;justify-content:center;font:700 13px var(--head);color:var(--dim)}
html.f-home .who .face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
html.f-home .who b{display:block;font:700 14px var(--head);letter-spacing:-.015em;white-space:nowrap}
html.f-home .who span{display:block;font-size:10.5px;color:var(--dim);margin-top:2px;white-space:nowrap}
html.f-home .tick{position:relative;height:14px;margin-top:12px;overflow:hidden}
html.f-home .tick i{position:absolute;inset:0;display:flex;align-items:center;gap:6px;font:700 8px var(--mono);font-style:normal;letter-spacing:.14em;color:var(--dim);opacity:0;animation:statick 9s linear infinite;white-space:nowrap}
html.f-home .tick i::before{content:'';flex:none;width:4px;height:4px;border-radius:50%;background:var(--accent);box-shadow:0 0 6px var(--accent)}
html.f-home .tick i:nth-child(2){animation-delay:3s}html.f-home .tick i:nth-child(3){animation-delay:6s}
@keyframes statick{0%{opacity:0;transform:translateY(5px)}4%{opacity:1;transform:none}30%{opacity:1;transform:none}37%{opacity:0;transform:translateY(-5px)}100%{opacity:0}}
@media(max-width:1280px){html.f-home .c-assess{left:calc(50% - 540px)}html.f-home .c-op{left:calc(50% + 316px)}html.f-home .c-method{left:calc(50% - 380px)}html.f-home .c-proof{left:calc(50% + 150px)}}
@media(max-width:1000px){html.f-home .dock button{--ry:0deg}html.f-home .c-assess{left:16px;top:38%}html.f-home .c-method{left:16px;top:calc(38% + 190px)}html.f-home .c-proof{right:16px;left:auto;top:calc(38% + 190px)}html.f-home .c-op{right:16px;left:auto;top:38%}}
@media(max-width:640px){html.f-home .dock button{position:static;width:auto;transform:none}html.f-home .dock{position:fixed;top:auto;bottom:12px;left:12px;right:12px;display:grid;grid-template-columns:1fr 1fr;gap:8px;pointer-events:auto;perspective:none}
  html.f-home .dock .book{position:static;transform:none;grid-column:1/-1;width:auto;justify-content:center}html.f-home .areas,html.f-home .steps,html.f-home .nums,html.f-home .tick,html.f-home .dock button>span{display:none}}

/* ===== preview: the command room ===== */
/* in the room the four sections are cards on the desk; the wall is ambience */
html.f-room .c-assess,html.f-room .c-op{top:auto;bottom:calc(5.5vh + 320px)}
html.f-room .c-method,html.f-room .c-proof{top:auto;bottom:calc(5.5vh + 78px)}
@media(max-height:760px){html.f-room .c-assess,html.f-room .c-op{bottom:calc(5.5vh + 250px)}}
@media(max-width:640px){html.f-room .dock{display:grid;grid-template-columns:1fr 1fr;gap:8px;left:12px;right:12px;bottom:12px;top:auto;perspective:none;pointer-events:auto}
  html.f-room .dock button{position:static;transform:none;width:auto}html.f-room .dock .book{position:static;transform:none;grid-column:1/-1;width:auto;justify-content:center}
  html.f-room .areas,html.f-room .steps,html.f-room .nums,html.f-room .tick,html.f-room .dock button>span{display:none}}
html.f-room .headline{top:clamp(16px,3vh,30px)}
html.f-room .headline h1{font:800 clamp(30px,4.1vw,66px)/1.02 var(--head);letter-spacing:-.04em;max-width:1400px;margin:0 auto;text-shadow:0 2px 30px rgba(1,12,27,.8)}
html.f-room .headline .sub{font-size:clamp(13px,1vw,17px);margin-top:16px;max-width:none;white-space:nowrap}
@media(max-height:760px){html.f-room .headline h1{font-size:clamp(26px,3.4vw,52px)}html.f-room .headline .sub{font-size:13px;margin-top:8px}}
@media(max-width:640px){html.f-room .headline .sub{white-space:normal}}
html.f-room .chip-br{display:none}

/* ===== preview: light ===== */
html.f-light{--bg:#f1ece2;--ink:#161616;--dim:#6b6358;--accent:#8a7d50;--accent-2:#6f6440;--card:rgba(255,255,255,.82);--edge:rgba(22,22,22,.1)}
html.f-light body{background:#f1ece2;color:#161616}
html.f-light .headline h1 em{color:#8a7d50}
html.f-light .headline .sub{color:#6b6358}
html.f-light .brand img{filter:none}
html.f-light .dock .book{color:#fff;background:linear-gradient(180deg,#2a2a2a,#111);box-shadow:0 10px 30px rgba(0,0,0,.18)}
html.f-light .chip,html.f-light .chip b{color:#6b6358}
html.f-light .sx{background-color:#f1ece2}

/* a soft fade of night behind the headline, so it reads whichever way the room is turned */
html.f-room body::before{content:"";position:fixed;left:0;right:0;top:0;height:56vh;z-index:640;pointer-events:none;
  background:linear-gradient(180deg,rgba(1,12,27,1) 0%,rgba(1,12,27,.96) 30%,rgba(1,12,27,.7) 60%,rgba(1,12,27,0) 100%);transition:opacity .4s}
html.f-room body.sx-open::before,html.f-room body.intro-active::before{opacity:0}
html.f-light.f-room body::before{background:linear-gradient(180deg,rgba(241,236,226,.92) 0%,rgba(241,236,226,.7) 45%,rgba(241,236,226,0) 100%)}

/* ===== the Book button on the intro ===== */
.intro-book{position:absolute;right:18px;top:48px;z-index:7;font:800 11px var(--head);letter-spacing:.14em;color:#fff;background:#111;border-radius:9px;padding:11px 16px;text-decoration:none;box-shadow:0 8px 24px rgba(0,0,0,.25)}
/* ===== video testimonials in the Proof ===== */
.rw-step .clip{display:block;width:100%;max-width:360px;aspect-ratio:16/9;margin:12px 0 2px;border-radius:10px;border:1px solid rgba(216,219,222,.16);background:#04101f;pointer-events:auto;object-fit:cover}
@media(max-width:640px){.rw-step .clip{max-width:100%}}

/* ===== first paint ===== */
#precover{display:none}
html.pre-intro #precover{display:flex;position:fixed;inset:0;z-index:5000;background:#ece9e2;color:#161616;flex-direction:column;align-items:center;justify-content:center;gap:22px;text-align:center;padding:24px}
#precover b{font:800 12px var(--head);letter-spacing:.26em}
#precover h1{font:700 clamp(26px,4.4vw,52px)/1.08 var(--head);letter-spacing:-.03em;max-width:820px}
#precover a{font:800 13px var(--head);letter-spacing:.14em;color:#fff;background:#111;border-radius:10px;padding:15px 22px;text-decoration:none}
/* ===== the verdict ===== */
.rw-online .verdict{max-width:560px;margin:0 auto 16px}
.rw-online .verdict img{width:100%;border-radius:10px;border:1px solid rgba(216,219,222,.14);display:block}
.rw-online .verdict figcaption{margin-top:10px;font-size:14px;line-height:1.5;color:var(--ink);text-align:left}

/* no JavaScript: the room cannot draw, so the page says it in words */
.plain{position:relative;z-index:700;max-width:640px;margin:0 auto;padding:60px 16px;color:var(--ink);font:400 16px/1.6 var(--sans)}
.plain h2{font:800 28px/1.1 var(--head);letter-spacing:-.03em;margin:0 0 18px}.plain p{margin:0 0 16px}.plain a{color:var(--accent)}
.chip-bl a{color:inherit;text-decoration:none}.chip-bl a:hover{color:var(--accent)}
/* legal pages */
.legal{max-width:680px;margin:0 auto;padding:48px 16px 80px;color:var(--ink);font:400 16px/1.65 var(--sans)}
.legal .brand{display:inline-flex;align-items:center;gap:9px;font:800 12px var(--head);letter-spacing:.26em;color:var(--ink);text-decoration:none;margin-bottom:36px}.legal .brand img{width:22px;height:22px}
.legal h1{font:800 clamp(28px,4vw,40px)/1.08 var(--head);letter-spacing:-.03em;margin:0 0 6px}.legal .date{font:500 10px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin:0 0 36px}
.legal h2{font:700 19px/1.2 var(--head);letter-spacing:-.02em;margin:34px 0 10px}.legal p,.legal li{margin:0 0 12px;color:rgba(242,243,245,.82)}.legal ul{padding-left:20px}.legal a{color:var(--accent)}
.legal footer{margin-top:56px;font:500 10px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}.legal footer a{color:inherit;text-decoration:none}

/* the row: headline, the whole room, four cards in a line, the button. One
   pass top to bottom. The corners stay reachable with ?row=0. */
html.f-home .dock .under{display:none}
@media(min-width:641px){
  html.f-row .dock{position:fixed;left:50%;right:auto;top:auto;bottom:3.6vh;transform:translateX(-50%);width:min(1000px,calc(100vw - 32px));display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:10px;pointer-events:auto;perspective:none}
  html.f-row .dock button{position:static;flex:0 0 232px;width:232px;transform:none;--ry:0deg;transition:transform .25s cubic-bezier(.16,1,.3,1),border-color .2s,box-shadow .2s,background .2s}
  html.f-row .dock button:hover{transform:translateY(-4px);border-color:rgba(212,203,167,.7);border-top-color:rgba(212,203,167,.9);box-shadow:0 2px 0 rgba(0,0,0,.6),0 30px 50px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(14,24,44,.97),rgba(6,13,28,.98))}
  html.f-row .dock .book{position:static;transform:none;flex:0 0 auto;margin:6px 0 0;padding:16px 30px}
  html.f-row .dock .book:hover{transform:translateY(-2px)}
  html.f-row .dock .under{display:block;flex:0 0 100%;text-align:center;font:500 10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-top:-2px}
  html.f-row body::before{height:42vh}
}
@media(min-width:641px) and (max-width:1000px){html.f-row .chip-bl{display:none}html.f-row .dock button{flex:0 0 calc(50% - 5px);width:auto}}
@media(min-width:641px) and (max-height:760px){html.f-row .dock{bottom:2vh;gap:8px}html.f-row .dock button{padding:10px 13px 11px}html.f-row .dock .book{padding:13px 26px;font-size:13px}}
/* ?og=1: the frame the share image is rendered from, no footer or small print */
html.f-og .chip-bl,html.f-og .dock .under{display:none!important}