:root{
  --navy:#102228; --red:#9d1c24; --ink:#1b2a2f; --muted:#5d6b6f;
  --line:#dde3e4; --paper:#ffffff; --wash:#f4f6f6; --wash2:#eef1f2;
  --wrap:1120px; --gut:24px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:Montserrat,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 var(--gut)}
h1,h2,h3{color:var(--navy); letter-spacing:-.02em; line-height:1.15; margin:0 0 .5rem}
h1{font-size:clamp(2rem,5vw,3.1rem); font-weight:800}
h2{font-size:clamp(1.45rem,3vw,2.1rem); font-weight:800}
h3{font-size:1.05rem; font-weight:700; letter-spacing:-.01em}
p{margin:0 0 1rem}
.lede{font-size:clamp(1.02rem,2vw,1.2rem); color:var(--muted); max-width:62ch}
.eyebrow{font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--red); margin:0 0 .6rem}

/* header */
header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.94);
  backdrop-filter:saturate(1.4) blur(8px); border-bottom:1px solid var(--line)}
header .bar{display:flex; align-items:center; gap:1rem; height:68px}
.logo{display:flex; align-items:center; text-decoration:none; line-height:0}
.logo svg{height:30px; width:auto; display:block}
@media(max-width:520px){ .logo svg{height:26px} }
footer .logo svg{height:30px}
nav{margin-left:auto; display:flex; align-items:center; gap:1.35rem}
nav a{font-size:.88rem; font-weight:600; text-decoration:none; color:var(--ink)}
nav a:hover{color:var(--red)}
nav a.cta{background:var(--navy); color:#fff; padding:.6rem 1rem; border-radius:8px}
nav a.cta:hover{background:var(--red); color:#fff}
.menu{display:none; margin-left:auto; background:none; border:1px solid var(--line);
  border-radius:8px; padding:.45rem .6rem; font:inherit; font-size:.8rem; font-weight:700; cursor:pointer}
@media(max-width:860px){
  nav{display:none; position:absolute; top:68px; left:0; right:0; background:#fff;
    border-bottom:1px solid var(--line); flex-direction:column; align-items:stretch; gap:0; padding:.5rem var(--gut) 1rem}
  nav.open{display:flex}
  nav a{padding:.75rem 0; border-bottom:1px solid var(--line)}
  nav a.cta{text-align:center; margin-top:.75rem; border-bottom:none}
  .menu{display:block}
}

/* sections */
section{padding:clamp(3rem,7vw,5.5rem) 0}
section.wash{background:var(--wash)}
section.navy{background:var(--navy); color:#e8eced}
section.navy h2,section.navy h3{color:#fff}
section.navy p{color:#b9c6c9}
.hero{padding-top:clamp(3rem,8vw,6rem); padding-bottom:clamp(3rem,8vw,5rem)}
.hero .lede{margin-bottom:1.6rem}
.btns{display:flex; flex-wrap:wrap; gap:.7rem; margin-top:.4rem}
.btn{display:inline-block; text-decoration:none; font-weight:700; font-size:.92rem;
  padding:.85rem 1.4rem; border-radius:9px; border:1px solid var(--navy); background:var(--navy); color:#fff}
.btn:hover{background:var(--red); border-color:var(--red)}
.btn.ghost{background:transparent; color:var(--navy)}
.btn.ghost:hover{background:var(--navy); color:#fff}
section.navy .btn{background:#fff; color:var(--navy); border-color:#fff}
section.navy .btn:hover{background:var(--red); border-color:var(--red); color:#fff}

.grid{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}
.card{border:1px solid var(--line); border-radius:12px; padding:1.1rem 1.15rem; background:#fff}
.card h3{margin-bottom:.3rem}
.card p{font-size:.88rem; color:var(--muted); margin:0}
.card .num{font-size:.7rem; font-weight:800; color:var(--red); letter-spacing:.1em; display:block; margin-bottom:.35rem}
.card a.more{display:inline-block; margin-top:.6rem; font-size:.78rem; font-weight:700; color:var(--navy); text-decoration:none; border-bottom:1px solid var(--red)}

.split{display:grid; gap:2rem; grid-template-columns:1fr}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr; gap:3rem; align-items:center}}

ul.ticks{list-style:none; padding:0; margin:1rem 0}
ul.ticks li{position:relative; padding-left:1.5rem; margin-bottom:.55rem; font-size:.93rem}
ul.ticks li:before{content:""; position:absolute; left:0; top:.55em; width:8px; height:8px;
  background:var(--red); border-radius:2px}

/* pricing */
.price{border:1px solid var(--line); border-radius:14px; padding:1.5rem; background:#fff}
.price .amt{font-size:clamp(2.4rem,6vw,3.4rem); font-weight:800; color:var(--navy); letter-spacing:-.03em; line-height:1}
.price .per{font-size:.9rem; color:var(--muted)}
.stepper{display:flex; align-items:center; gap:.6rem; margin:1rem 0}
.stepper button{width:42px; height:42px; border-radius:9px; border:1px solid var(--line);
  background:#fff; font:inherit; font-size:1.3rem; font-weight:700; color:var(--navy); cursor:pointer}
.stepper button:hover{border-color:var(--navy)}
.stepper output{font-size:1.05rem; font-weight:700; min-width:5.5rem; text-align:center}
input[type=range]{width:100%; accent-color:var(--red)}
table{border-collapse:collapse; width:100%; font-size:.9rem; margin:1rem 0}
th,td{border-bottom:1px solid var(--line); padding:.6rem .5rem; text-align:left}
th{font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:700}
td.r,th.r{text-align:right}

details{border-bottom:1px solid var(--line); padding:.9rem 0}
details summary{cursor:pointer; font-weight:700; color:var(--navy); font-size:.98rem; list-style:none}
details summary::-webkit-details-marker{display:none}
details summary:before{content:"+"; color:var(--red); font-weight:800; margin-right:.6rem}
details[open] summary:before{content:"\2013"}
details p{margin:.6rem 0 0; font-size:.9rem; color:var(--muted)}

/* forms */
form .field{margin-bottom:.9rem}
label{display:block; font-size:.8rem; font-weight:700; color:var(--navy); margin-bottom:.3rem}
input[type=text],input[type=email],input[type=tel],select,textarea{
  width:100%; font:inherit; font-size:.95rem; padding:.7rem .8rem; border:1px solid var(--line);
  border-radius:9px; background:#fff; color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--navy); outline-offset:1px}
.hp{position:absolute!important; left:-9999px!important; width:1px!important; height:1px!important;
  overflow:hidden!important; opacity:0!important}
.formnote{font-size:.78rem; color:var(--muted)}
.formmsg{display:none; margin-top:.8rem; padding:.7rem .85rem; border-radius:9px; font-size:.88rem}
.formmsg.is-error{display:block; background:#fdeceD; border:1px solid #e3b7bb; color:#7d161c}
.formmsg.is-success{display:block; background:#e9f4ee; border:1px solid #b2d6c1; color:#1d5c38}

/* ---------------- design pass: depth, motion, brand geometry ------------- */
.hero-dark{position:relative; overflow:hidden; background:#0b171c; color:#eef2f3;
  padding:clamp(4rem,11vw,8.5rem) 0 clamp(3.5rem,8vw,6rem)}
.hero-dark:before{content:""; position:absolute; inset:0;
  background:url(/img/hero-bg.jpg) center/cover no-repeat; opacity:.9}
.hero-dark:after{content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,#0b171c 18%,rgba(11,23,28,.55) 58%,rgba(11,23,28,.2) 100%)}
.hero-dark .wrap{position:relative; z-index:2}
.hero-dark h1{color:#fff; font-size:clamp(2.2rem,5.4vw,4.1rem); line-height:1.04; max-width:16ch}
.hero-dark .lede{color:#c2cfd3; max-width:52ch}
.hero-dark .eyebrow{color:#f0a8ac}
.hero-grid{display:grid; gap:2.6rem; grid-template-columns:1fr; align-items:center}
@media(min-width:1000px){.hero-grid{grid-template-columns:1.05fr .95fr; gap:3.4rem}}
.hero-dark .btn{background:#fff; color:var(--navy); border-color:#fff}
.hero-dark .btn:hover{background:var(--red); border-color:var(--red); color:#fff}
.hero-dark .btn.ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.4)}
.hero-dark .btn.ghost:hover{background:rgba(255,255,255,.1); border-color:#fff}
.hero-foot{margin-top:2.4rem; padding-top:1.3rem; border-top:1px solid rgba(255,255,255,.14);
  display:flex; flex-wrap:wrap; gap:1.6rem; font-size:.78rem; color:#94a7ac; letter-spacing:.02em}
.hero-foot b{color:#fff; font-weight:700}

section.texture{position:relative; background:#0f2026; color:#dfe8ea; overflow:hidden}
section.texture:before{content:""; position:absolute; inset:0;
  background:url(/img/panel-bg.jpg) center/cover no-repeat; opacity:.55}
section.texture .wrap{position:relative; z-index:2}
section.texture h2,section.texture h3{color:#fff}
section.texture p{color:#aebec2}

/* illustrative panels, hand built, never presented as screenshots */
.panel{background:#fff; border:1px solid var(--line); border-radius:16px; padding:.9rem;
  box-shadow:0 18px 44px -26px rgba(16,34,40,.55); font-size:.78rem}
.panel .ph{display:flex; align-items:center; gap:.45rem; padding:.1rem .25rem .6rem;
  border-bottom:1px solid var(--line); margin-bottom:.7rem; color:var(--muted);
  font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700}
.panel .ph i{width:9px; height:9px; border-radius:50%; background:var(--red); display:block}
.lanes{display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem}
.lane{background:var(--wash); border-radius:10px; padding:.45rem}
.lane h5{margin:0 0 .4rem; font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.deal{background:#fff; border:1px solid var(--line); border-radius:8px; padding:.4rem .45rem; margin-bottom:.35rem}
.deal b{display:block; font-size:.72rem; color:var(--navy)}
.deal span{font-size:.65rem; color:var(--muted)}
.deal.hot{border-color:var(--red); box-shadow:inset 2px 0 0 var(--red)}
.thread{display:flex; flex-direction:column; gap:.4rem; margin-top:.2rem}
.msg{max-width:85%; padding:.45rem .6rem; border-radius:12px; font-size:.75rem; line-height:1.4}
.msg.them{background:var(--wash2); color:var(--ink); border-bottom-left-radius:4px}
.msg.us{background:var(--navy); color:#fff; align-self:flex-end; border-bottom-right-radius:4px}
.msg .t{display:block; font-size:.58rem; opacity:.65; margin-top:.2rem}
.auto{margin-top:.5rem; font-size:.62rem; color:var(--red); font-weight:700; letter-spacing:.04em}
.seq{list-style:none; margin:.2rem 0 0; padding:0}
.seq li{display:flex; gap:.6rem; align-items:flex-start; padding:.3rem 0}
.seq .dot{width:10px; height:10px; border-radius:50%; background:var(--navy); margin-top:.3rem; flex:none; position:relative}
.seq li+li .dot:before{content:""; position:absolute; left:50%; top:-14px; width:1px; height:14px;
  background:var(--line); transform:translateX(-50%)}
.seq .dot.red{background:var(--red)}
.seq b{font-size:.73rem; color:var(--navy); display:block}
.seq span{font-size:.66rem; color:var(--muted)}
.cap{font-size:.66rem; color:var(--muted); margin:.5rem 0 0; text-align:center}

/* capability cards with brand geometry glyphs */
.card .glyph{width:34px; height:34px; margin-bottom:.55rem}
/* Load bearing: the sizing above is scoped to .card, so a glyph used anywhere
   else had NO width, and an SVG with display:block expands to its container.
   That is how the capability page shipped with 250px icons. Never remove. */
.glyph{width:34px; height:34px; flex:none}
.card{transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.card:hover{transform:translateY(-3px); border-color:#c9d2d4; box-shadow:0 16px 34px -24px rgba(16,34,40,.6)}

.metrics{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); margin-top:1.6rem}
.metric b{display:block; font-size:clamp(1.9rem,4vw,2.7rem); font-weight:800; color:#fff; letter-spacing:-.03em; line-height:1}
.metric span{font-size:.82rem; color:#aebec2}

/* motion */
.rise{opacity:1; transform:none}
html.anim .rise{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease}
html.anim .rise.in{opacity:1; transform:none}
.rise.d1{transition-delay:.08s} .rise.d2{transition-delay:.16s} .rise.d3{transition-delay:.24s}
@keyframes orbit{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes fadeUp{from{opacity:0; transform:translateY(18px)}to{opacity:1; transform:none}}
.hero-dark .wrap > *{animation:fadeUp .7s ease both}
.hero-dark .wrap > *:nth-child(2){animation-delay:.08s}
.hero-dark .wrap > *:nth-child(3){animation-delay:.16s}
.orbit-wrap{position:relative; display:grid; place-items:center; min-height:260px}
.orbit-ring{position:absolute; width:min(330px,74vw); aspect-ratio:1; border-radius:50%;
  border:1px dashed rgba(255,255,255,.18)}
.orbit-ring.r2{width:min(230px,52vw); border-style:solid; border-color:rgba(255,255,255,.1)}
.orbit-spin{position:absolute; width:min(330px,74vw); aspect-ratio:1; animation:orbit 26s linear infinite}
.orbit-spin i{position:absolute; top:-6px; left:50%; width:12px; height:12px; margin-left:-6px;
  border-radius:50%; background:var(--red); box-shadow:0 0 0 6px rgba(157,28,36,.18)}
header{transition:height .2s ease, box-shadow .2s ease}
header.cond .bar{height:56px}
header.cond{box-shadow:0 6px 22px -18px rgba(16,34,40,.8)}
@media (prefers-reduced-motion: reduce){
  .rise{opacity:1; transform:none; transition:none}
  .hero-dark .wrap > *{animation:none}
  .orbit-spin{animation:none}
  .card:hover{transform:none}
}

/* footer */
footer{background:var(--navy); color:#9fb0b4; padding:3rem 0 2rem; font-size:.85rem}
footer a{color:#dfe7e8; text-decoration:none}
footer a:hover{color:#fff}
footer .cols{display:grid; gap:1.6rem; grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
footer h4{color:#fff; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; margin:0 0 .6rem}
footer ul{list-style:none; padding:0; margin:0}
footer li{margin-bottom:.4rem}
footer .legal{margin-top:2rem; padding-top:1.2rem; border-top:1px solid #23383f;
  display:flex; flex-wrap:wrap; gap:.8rem 1.4rem; font-size:.76rem}

/* Tutorial article prose. Deliberately narrow: long instructions are read, not
   scanned, and a 70ch measure is where that stops being work. */
.doc{max-width:70ch}
.doc h2{font-size:1.5rem; margin:2.2rem 0 .5rem; letter-spacing:-.02em}
.doc h3{font-size:.78rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--mut, #5d6b6f); margin:2rem 0 .5rem; font-weight:800}
.doc p{margin:.7rem 0}
.doc ol, .doc ul{margin:.7rem 0; padding-left:1.4rem}
.doc li{margin-bottom:.5rem}
.doc kbd{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.86em;
  background:#eef1f2; border:1px solid #dde3e4; border-radius:5px; padding:.08rem .35rem;
  white-space:nowrap}
.doc .why, .doc .warn{margin:1.2rem 0; padding:.8rem 1rem; border-radius:9px; font-size:.95rem}
.doc .why{background:#f4f6f6; border-left:4px solid #9d1c24}
.doc .warn{background:#fdf6e8; border-left:4px solid #b07d1a}
.doc .why b, .doc .warn b{color:#102228}
.crumb{font-size:.8rem; margin:0 0 .8rem}
.crumb a{color:#5d6b6f}
.tutgrid{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(265px,1fr))}
.tutcard{display:block; padding:1.2rem; border:1px solid #dde3e4; border-radius:13px;
  background:#fff; text-decoration:none; color:inherit; transition:transform .16s, box-shadow .16s}
.tutcard:hover{transform:translateY(-3px); box-shadow:0 10px 26px rgba(16,34,40,.1)}
.tutcard h3{font-size:1.05rem; margin:.5rem 0 .3rem; letter-spacing:-.01em}
.tutcard p{font-size:.88rem; color:#5d6b6f; margin:0}
.tutcard .num{font-size:.7rem; font-weight:800; letter-spacing:.1em; color:#9d1c24}
.tutnext{margin-top:2.5rem; padding-top:1.2rem; border-top:1px solid #dde3e4; font-size:.9rem}

/* ---- interface illustrations -------------------------------------------
   A small design system standing in for the product UI. Sized in px, not
   rem, deliberately: these are pictures of an interface, so they should not
   grow with the page's type scale, they should stay the size of a screenshot. */
.ui{border:1px solid #dde3e4; border-radius:13px; background:#fff; overflow:hidden;
  box-shadow:0 14px 34px rgba(16,34,40,.09); font-size:12px; line-height:1.4; color:#1b2a2f}
.ui *{box-sizing:border-box}
.ui-top{display:flex; align-items:center; gap:.45rem; padding:.55rem .75rem;
  border-bottom:1px solid #eef1f2; background:#fafbfb}
.ui-dot{width:8px; height:8px; border-radius:50%; background:#9d1c24; flex:none}
.ui-ttl{font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#102228}
.ui-right{margin-left:auto; font-size:10px; color:#8a989c}
.ui-b{padding:.75rem}
.ui-row{display:flex; align-items:center; gap:.5rem; padding:.42rem 0; border-bottom:1px solid #f1f4f4}
.ui-row:last-child{border-bottom:0}
.ui-av{width:26px; height:26px; border-radius:50%; background:#102228; color:#fff; flex:none;
  display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800}
.ui-av.r{background:#9d1c24}
.ui-nm{font-weight:700; color:#102228}
.ui-sub{color:#7d8c90; font-size:11px}
.ui-chip{display:inline-block; padding:.08rem .4rem; border-radius:20px; font-size:10px;
  font-weight:700; background:#eef1f2; color:#51636a; white-space:nowrap}
.ui-chip.red{background:#fdecee; color:#9d1c24}
.ui-chip.grn{background:#e7f4ed; color:#2e7d4f}
.ui-chip.amb{background:#fdf3e2; color:#8a6212}
.ui-btn{display:inline-block; padding:.3rem .6rem; border-radius:7px; background:#9d1c24;
  color:#fff; font-weight:700; font-size:11px}
.ui-btn.ghost{background:#fff; color:#102228; border:1px solid #dde3e4}
.ui-f{display:flex; justify-content:space-between; gap:.6rem; padding:.3rem 0; font-size:11px}
.ui-f span:first-child{color:#8a989c}
.ui-f span:last-child{color:#102228; font-weight:600; text-align:right}
.ui-bubble{max-width:82%; padding:.4rem .6rem; border-radius:11px; margin:.3rem 0; font-size:11px}
.ui-bubble.in{background:#eef1f2; border-bottom-left-radius:3px}
.ui-bubble.out{background:#102228; color:#fff; margin-left:auto; border-bottom-right-radius:3px}
.ui-bubble .t{display:block; font-size:9px; opacity:.6; margin-top:.15rem}
.ui-tabs{display:flex; gap:.3rem; padding:.45rem .75rem; border-bottom:1px solid #eef1f2; flex-wrap:wrap}
.ui-tab{font-size:10px; font-weight:700; padding:.18rem .45rem; border-radius:6px; color:#7d8c90}
.ui-tab.on{background:#102228; color:#fff}
.ui-board{display:grid; grid-template-columns:repeat(4,1fr); gap:.45rem; padding:.7rem}
.ui-col h6{margin:0 0 .35rem; font-size:9px; text-transform:uppercase; letter-spacing:.07em;
  color:#7d8c90; font-weight:800; display:flex; justify-content:space-between}
.ui-card{background:#fafbfb; border:1px solid #e7ecec; border-left:3px solid #102228;
  border-radius:7px; padding:.35rem .4rem; margin-bottom:.35rem}
.ui-card b{display:block; font-size:11px; color:#102228}
.ui-card span{font-size:9.5px; color:#8a989c}
.ui-card.hot{border-left-color:#9d1c24}
.ui-cal{display:grid; grid-template-columns:repeat(5,1fr); gap:.3rem; padding:.7rem}
.ui-day{text-align:center}
.ui-day b{display:block; font-size:9px; color:#8a989c; text-transform:uppercase; margin-bottom:.25rem}
.ui-slot{font-size:9.5px; padding:.22rem 0; border-radius:5px; background:#eef1f2; margin-bottom:.22rem; color:#51636a}
.ui-slot.taken{background:#102228; color:#fff; font-weight:700}
.ui-slot.sel{background:#9d1c24; color:#fff; font-weight:700}
.ui-flow{padding:.7rem}
.ui-node{display:flex; align-items:center; gap:.5rem; padding:.4rem .55rem; border:1px solid #e7ecec;
  border-radius:8px; background:#fafbfb; margin-bottom:.3rem}
.ui-node i{width:20px; height:20px; border-radius:6px; background:#102228; color:#fff; flex:none;
  display:flex; align-items:center; justify-content:center; font-style:normal; font-size:10px; font-weight:800}
.ui-node.red i{background:#9d1c24}
.ui-node b{font-size:11px; color:#102228; display:block}
.ui-node span{font-size:10px; color:#8a989c}
.ui-arm{height:10px; border-left:2px dashed #cfd8da; margin-left:1.1rem}
.ui-bars{display:flex; align-items:flex-end; gap:.4rem; height:74px; padding:.8rem .75rem 0}
.ui-bars div{flex:1; background:#102228; border-radius:4px 4px 0 0; position:relative}
.ui-bars div:nth-child(2){background:#9d1c24}
.ui-bars div span{position:absolute; bottom:-16px; left:0; right:0; text-align:center;
  font-size:9px; color:#8a989c}
.ui-stars{color:#e0a800; letter-spacing:1px; font-size:12px}
.ui-tot{display:flex; justify-content:space-between; padding:.45rem 0 0; margin-top:.3rem;
  border-top:2px solid #102228; font-weight:800; color:#102228; font-size:12.5px}
.ui-cap{font-size:10.5px; color:#8a989c; margin:.5rem 0 0; text-align:center}
@media (max-width:560px){
  .ui-board{grid-template-columns:repeat(2,1fr)}
  .ui-cal{grid-template-columns:repeat(3,1fr)}
}

/* ---- capability page, the Tuesday narrative --------------------------- */
.act{position:relative; padding:5.5rem 0}
.act .wrap{position:relative; z-index:2}
.act-dark{background:#102228; color:#e7ecef}
.act-dark h1, .act-dark h2, .act-dark h3{color:#fff}
.act-dark .lede{color:#b9c6c9}
.act-tag{display:inline-flex; align-items:center; gap:.5rem; font-size:.7rem; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase; color:#9d1c24; margin:0 0 .9rem}
.act-dark .act-tag{color:#f05a63}
.act-tag::before{content:""; width:26px; height:2px; background:currentColor; display:block}
.clock{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:clamp(2.6rem,8vw,5.4rem);
  font-weight:800; letter-spacing:-.04em; line-height:.9; color:#102228; margin:0 0 .3rem}
.act-dark .clock{color:#fff}
.clock span{color:#9d1c24}
.act-dark .clock span{color:#f05a63}
.beat{font-size:clamp(1.3rem,3.4vw,2rem); font-weight:800; letter-spacing:-.025em;
  line-height:1.2; margin:0 0 .7rem; max-width:20ch}
.said{font-size:1rem; max-width:52ch; color:#51636a}
.act-dark .said{color:#b9c6c9}

/* offset two column that does not sit flat on a grid line */
.stagger{display:grid; gap:2.2rem; grid-template-columns:1fr; align-items:start}
.stagger .late{margin-top:0}
@media (min-width:900px){
  .stagger{grid-template-columns:1.05fr .95fr; gap:3.5rem}
  .stagger.flip > *:first-child{order:2}
  .stagger .late{margin-top:4.5rem}
}

/* a panel that runs off the right edge of the page on purpose */
.bleed{overflow:hidden; padding-bottom:5.5rem}
.bleed-rail{display:grid; gap:1rem; grid-template-columns:minmax(0,1fr); max-width:none}
@media (min-width:1000px){
  .bleed-rail{grid-template-columns:minmax(300px,.8fr) minmax(760px,1.4fr); align-items:center}
  .bleed-rail .wide{margin-right:-14vw}
}

/* stacked, slightly rotated panels for the opening composite */
.deck{position:relative; min-height:430px}
/* Target .deck-card, NOT nth-child. Each panel renders as TWO elements, the
   card and its "Illustration" caption, so nth-child positions the caption as
   if it were a card and hides a real panel. That bug shipped once. */
.deck .deck-card{position:absolute; width:min(400px,82%)}
.deck .deck-card:nth-of-type(1){top:0; right:0; transform:rotate(-1.8deg); z-index:3}
.deck .deck-card:nth-of-type(2){top:200px; left:0; transform:rotate(1.6deg); z-index:2}
@media (max-width:860px){
  .deck{min-height:0; display:grid; gap:1.2rem}
  .deck .deck-card{position:static; width:100%; transform:none !important}
}

/* the numbers band */
.tally{display:grid; gap:1px; grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  background:#23383f; border-radius:14px; overflow:hidden; margin-top:2.5rem}
.tally div{background:#102228; padding:1.3rem 1.1rem}
.tally b{display:block; font-size:clamp(1.7rem,4.5vw,2.5rem); font-weight:800; letter-spacing:-.03em;
  color:#fff; line-height:1}
.tally span{display:block; font-size:.82rem; color:#8fa2a7; margin-top:.35rem}
.tally em{font-style:normal; color:#f05a63}

/* the index of all twelve at the foot of the page */
.idx{display:grid; gap:.8rem; grid-template-columns:repeat(auto-fit,minmax(245px,1fr)); margin-top:2rem}
.idx article{border:1px solid #dde3e4; border-radius:12px; padding:1rem; background:#fff;
  transition:transform .16s, box-shadow .16s}
.idx article:hover{transform:translateY(-3px); box-shadow:0 12px 26px rgba(16,34,40,.09)}
.idx h3{font-size:.98rem; margin:.45rem 0 .25rem; display:flex; align-items:center; gap:.45rem}
.idx p{font-size:.85rem; color:#5d6b6f; margin:0}
.idx .glyph{width:26px; height:26px; flex:none; margin:0}

/* motion, and only where it cannot hide content */
@media (prefers-reduced-motion:no-preference){
  .tilt{transition:transform .5s cubic-bezier(.2,.7,.3,1)}
  .act:hover .tilt{transform:translateY(-4px)}
}