/* =========================================================================
   OMNILINK A-TEAM - site stylesheet
   ONE copy, linked by every page. It lived inline in index.html; the moment
   a second page existed that would have been two copies of a design system
   drifting apart, which is the exact failure R2 of the Admin Settings spec
   is about and which parity_check.py exists to catch elsewhere.
   ASCII only. public/.htaccess pins charset=utf-8 for .css.
   ========================================================================= */

/* ---- tokens: identical to /console/ ------------------------------- */
:root{
  --bg:#0c0f15; --panel:#141922; --panel-2:#1b2130;
  --line:#242c3a; --line-soft:#1c2330;
  --text:#e4e9f1; --dim:#818da3; --dimmer:#5a6577;
  /* --faint was USED TWICE AND NEVER DEFINED, since the wizard shipped.
     An undefined custom property makes the whole declaration invalid, so
     the inactive step labels and the wizard's reason line were rendering at
     their INHERITED colour -- not a wrong colour anyone chose, an absent
     one. Silent by construction: CSS has no console error for this, the text
     stays legible, and it looks like a design decision.
     Found by diffing every var() against every definition in this file
     rather than by looking, which would never have found it. */
  --faint:#3f4959;
  --amber:#e89044; --green:#4fb383; --red:#d9584f; --blue:#6a97d8;
  --accent:#e89044; --accent-bg:#241a10; --scene-a:#0d1b2e; --scene-b:#071019;
}
/* per-section retheme, same keys the console uses */
[data-sect="floor"]  { --accent:#e89044; --accent-bg:#241a10; --scene-a:#1a1206; --scene-b:#0a0d13 }
[data-sect="bi"]     { --accent:#3fb6d8; --accent-bg:#0c1e26; --scene-a:#062430; --scene-b:#070f16 }
[data-sect="ai"]     { --accent:#9a7ce0; --accent-bg:#171233; --scene-a:#160f2e; --scene-b:#0a0913 }
[data-sect="quality"]{ --accent:#4fb383; --accent-bg:#122019; --scene-a:#082418; --scene-b:#070f11 }
[data-sect="govern"] { --accent:#d9584f; --accent-bg:#241413; --scene-a:#2a0d0b; --scene-b:#100809 }
[data-sect="admin"]  { --accent:#7f95b8; --accent-bg:#141a26; --scene-a:#101828; --scene-b:#080b11 }
[data-sect="help"]   { --accent:#c3a15e; --accent-bg:#221b0f; --scene-a:#1d1708; --scene-b:#0b0a08 }

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:16px/1.6 Archivo,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.02em;line-height:1.15}
p{margin:0}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.lbl{font-family:"IBM Plex Mono",monospace;font-size:.66rem;font-weight:600;
     letter-spacing:.16em;text-transform:uppercase;color:var(--dimmer)}
.wrap{max-width:1180px;margin:0 auto;padding:0 1.5rem}

/* ---- the ground --------------------------------------------------- */
#scene{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% -8%, var(--scene-a) 0%, transparent 60%),
    radial-gradient(150% 100% at 50% 118%, var(--scene-b) 0%, transparent 58%),
    linear-gradient(180deg,#0b0e14 0%,#0c0f15 55%,#080b10 100%);
  transition:background 900ms cubic-bezier(.22,.61,.36,1);
}
#scene::after{
  content:"";position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(currentColor .5px, transparent .6px);
  background-size:3px 3px;color:rgba(255,255,255,.055);
}
#scene .horizon{
  position:absolute;left:0;right:0;top:19%;height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 55%,transparent),transparent);
  opacity:.4;filter:blur(.4px);transition:background 900ms ease;
}
#scene .beam{
  position:absolute;left:50%;top:-6%;width:2px;height:34%;transform:translateX(-50%);
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 60%,transparent),transparent);
  opacity:.28;filter:blur(2px);
}
#page{position:relative;z-index:1}

/* ---- hairline rail with tick segments ----------------------------- */
.rail{position:relative;height:0}
.rail::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,
    transparent 0, var(--accent) 3%, var(--accent) 21%, transparent 21.6%,
    transparent 24%, var(--accent) 24.6%, var(--accent) 49%, transparent 49.6%,
    transparent 52%, var(--accent) 52.6%, var(--accent) 77%, transparent 77.6%,
    transparent 80%, var(--accent) 80.6%, var(--accent) 97%, transparent 100%);
  opacity:.42;transition:background 700ms ease;
}
.rail::after{
  content:"";position:absolute;top:-4px;left:21%;width:1px;height:9px;
  background:var(--accent);opacity:.5;
  box-shadow:31vw 0 0 var(--accent), 56vw 0 0 var(--accent);
}

/* ---- header ------------------------------------------------------- */
header.top{
  position:sticky;top:0;z-index:20;
  background:color-mix(in srgb,#0a0d12 88%, transparent);backdrop-filter:blur(3px);
  border-bottom:1px solid var(--line);
}
header.top .wrap{display:flex;align-items:center;gap:1rem;padding-top:.9rem;padding-bottom:.9rem}
/* 34px, not 26. The emblem needs the extra 8px -- at 26 its arcs
   start closing up, which is the whole reason the chevron carries
   the favicon. The header can afford the size; a 16px tab cannot. */
.mark{width:34px;height:34px;color:var(--accent);flex:none;transition:color .5s}
.brand{font-weight:700;font-size:1rem;letter-spacing:-.02em}
.brand span{color:var(--accent);transition:color .5s}
/* The wordmark is an <a> to /#platform. site.css already styles every anchor
   -- `a{color:var(--accent)}` and `a:hover{text-decoration:underline}` -- so
   without these two lines the whole wordmark turns accent-coloured and picks
   up an underline on hover, instead of only the nested <span> being accent.
   Measured before the element was changed, not after it looked wrong: a class
   matching does not mean the rules land the same way on a different tag. That
   is the same lesson as the `form X` selectors that never reached /book. */
a.brand{color:inherit;display:inline-block}
a.brand:hover{text-decoration:none}
a.brand:hover span{filter:brightness(1.25)}
/* It is interactive now, so it needs a visible keyboard focus ring. An
   unstyled focus state on a link that was a <span> yesterday is a regression
   nobody sees, because nobody tabs through their own site. */
a.brand:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.navl{margin-left:auto;display:flex;gap:1.5rem;align-items:center}
.navl a{color:var(--dim);font-size:.86rem}
.navl a:hover{color:var(--text);text-decoration:none}
@media(max-width:800px){.navl a.hide-sm{display:none}}

.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  border:1px solid var(--accent);background:var(--accent-bg);color:var(--text);
  padding:.6rem 1.1rem;font-size:.87rem;font-weight:600;cursor:pointer;
  transition:background .2s,border-color .5s;
}
.btn:hover{background:color-mix(in srgb,var(--accent) 22%, transparent);text-decoration:none}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.btn.ghost{background:transparent;border-color:var(--line);color:var(--dim)}
.btn.ghost:hover{color:var(--text);border-color:var(--accent)}
.btn.sm{padding:.45rem .85rem;font-size:.8rem}

/* ---- rotating hero banner ------------------------------------------
   Slide 1 is visible in the markup with no script and no class needed.
   The others stack behind it and are revealed by the rotator. A carousel
   whose first slide waits on JS shows an empty band to anyone whose
   script fails, and this band is the top of the page. */
.rot{position:relative;border-bottom:1px solid var(--line);overflow:hidden}
.rot .track{position:relative;min-height:clamp(400px,52vh,520px)}
.slide{
  position:absolute;inset:0;display:grid;grid-template-columns:1.05fr .95fr;
  gap:2.5rem;align-items:center;
  opacity:0;visibility:hidden;transition:opacity 520ms ease,visibility 0s linear 520ms;
}
.slide.on{opacity:1;visibility:visible;transition:opacity 520ms ease,visibility 0s}
.slide > .wrap{width:100%}
.slide .copy{max-width:34rem}
.slide .eyebrow{display:flex;align-items:center;gap:.7rem;margin-bottom:1.2rem}
.slide .eyebrow i{display:block;width:26px;height:1px;background:var(--accent);font-style:normal}
.slide h2{font-size:clamp(1.8rem,3.9vw,2.9rem);letter-spacing:-.03em;line-height:1.08;max-width:16ch}
.slide h2 em{font-style:normal;color:var(--accent);transition:color .5s}
.slide p.line{margin-top:1.1rem;color:var(--dim);font-size:1.02rem;max-width:50ch;line-height:1.55}
.slide .acts{margin-top:1.8rem;display:flex;gap:.7rem;flex-wrap:wrap;align-items:center}
.slide .art{display:flex;align-items:center;justify-content:center;padding-right:1.5rem}
.slide .art svg{width:100%;max-width:420px;height:auto;color:var(--accent);transition:color .5s}
@media(max-width:900px){
  .slide{grid-template-columns:1fr}
  .slide .art{display:none}
  .rot .track{min-height:clamp(340px,60vh,440px)}
}

/* controls ---------------------------------------------------------- */
.rot .ctl{position:absolute;left:0;right:0;bottom:1.1rem;z-index:3}
.rot .ctl .wrap{display:flex;align-items:center;gap:.9rem}
.dots{display:flex;gap:.5rem;margin-right:auto}
.dot{appearance:none;background:transparent;border:1px solid var(--dimmer);
     width:26px;height:5px;padding:0;cursor:pointer;transition:background .3s,border-color .3s}
.dot[aria-current="true"]{background:var(--accent);border-color:var(--accent)}
.dot:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.arw{appearance:none;background:transparent;border:1px solid var(--line);color:var(--dim);
     width:30px;height:30px;cursor:pointer;font-size:.8rem;line-height:1;
     display:flex;align-items:center;justify-content:center;transition:border-color .25s,color .25s}
.arw:hover{color:var(--text);border-color:var(--accent)}
.arw:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* progress hairline: shows the rotation is timed, and stops when paused */
.rot .prog{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--accent);
           z-index:3;transition:background .5s}
.rot.paused .prog{opacity:.35}

@keyframes art-in{
  from{opacity:0;transform:translateY(10px) scale(.985)}
  to  {opacity:1;transform:none}
}
@keyframes copy-in{ from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
.slide.on .art svg{animation:art-in 700ms cubic-bezier(.22,.61,.36,1) both}
.slide.on .copy > *{animation:copy-in 420ms cubic-bezier(.22,.61,.36,1) both}
.slide.on .copy > *:nth-child(2){animation-delay:70ms}
.slide.on .copy > *:nth-child(3){animation-delay:120ms}
.slide.on .copy > *:nth-child(4){animation-delay:170ms}

@media(prefers-reduced-motion:reduce){
  .slide{transition:none}
  .rot .prog{display:none}
  .slide.on .art svg,.slide.on .copy > *{animation:none}
}

/* ---- hero --------------------------------------------------------- */
.hero{padding:5rem 0 3.5rem}
.hero .eyebrow{display:flex;align-items:center;gap:.7rem;margin-bottom:1.4rem}
.hero .eyebrow i{display:block;width:26px;height:1px;background:var(--accent);font-style:normal}
.hero h1{font-size:clamp(2rem,4.6vw,3.4rem);max-width:19ch}
.hero h1 em{font-style:normal;color:var(--accent);transition:color .5s}
.hero .lede{margin-top:1.3rem;font-size:1.06rem;color:var(--dim);max-width:60ch}
.hero .cta{margin-top:2.1rem;display:flex;gap:.8rem;flex-wrap:wrap;align-items:center}
.hero .cta small{color:var(--dimmer);font-size:.76rem}

.spec{margin-top:3.2rem;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
      background:var(--line);border:1px solid var(--line)}
.spec div{background:#0e1219;padding:1.1rem 1.2rem}
.spec b{display:block;font-family:"IBM Plex Mono",monospace;font-size:1.6rem;
        font-weight:600;color:var(--accent);transition:color .5s;line-height:1}
.spec span{display:block;margin-top:.4rem}
@media(max-width:760px){.spec{grid-template-columns:repeat(2,1fr)}}

/* ---- the SMS band: loudest thing on the page, never animated ------ */
.sms-band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
          background:#0e1219;padding:2.6rem 0}
.sms-band .inner{border:1px solid var(--amber);background:#171208;padding:1.6rem 1.7rem;position:relative}
.sms-band .inner::before,.sms-band .inner::after{
  content:"";position:absolute;width:10px;height:10px;border-color:var(--amber);pointer-events:none}
.sms-band .inner::before{top:-1px;left:-1px;border-top:1px solid;border-left:1px solid}
.sms-band .inner::after{bottom:-1px;right:-1px;border-bottom:1px solid;border-right:1px solid}
.sms-band h2{font-size:1.05rem;margin-bottom:.7rem}
.sms-band p{color:#d7c7ad;font-size:.93rem;margin-bottom:.7rem;max-width:74ch}
.sms-band strong{color:var(--amber)}
.sms-band .links{display:flex;gap:1.4rem;flex-wrap:wrap;margin-top:1.1rem;font-size:.9rem}
.sms-band .links a{color:var(--amber)}

/* ---- feature sections -------------------------------------------- */
.sect{padding:4.6rem 0;border-bottom:1px solid var(--line-soft)}
.sect > .wrap > .head{margin-bottom:2.2rem;max-width:66ch}
.sect .head h2{font-size:clamp(1.5rem,2.6vw,2.05rem);margin:.8rem 0 .7rem}
.sect .head p{color:var(--dim)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:1px;
      background:var(--line);border:1px solid var(--line)}
.card{position:relative;background:#0e1219;padding:1.35rem 1.4rem;transition:background .25s}
.card:hover{background:#121722}
.card::before,.card::after{
  content:"";position:absolute;width:9px;height:9px;pointer-events:none;
  border-color:var(--accent);opacity:.5;transition:opacity .25s,border-color .5s}
.card::before{top:-1px;left:-1px;border-top:1px solid;border-left:1px solid}
.card::after{bottom:-1px;right:-1px;border-bottom:1px solid;border-right:1px solid}
.card:hover::before,.card:hover::after{opacity:1}
.card h3{font-size:.99rem;margin-bottom:.45rem}
.card p{color:var(--dim);font-size:.87rem}
.card .tag{display:inline-block;margin-top:.8rem;font-family:"IBM Plex Mono",monospace;
           font-size:.63rem;letter-spacing:.12em;text-transform:uppercase;
           color:var(--accent);border:1px solid var(--accent);padding:.16rem .45rem;opacity:.75}

/* ---- product features: Apple rhythm on the Attractor ground --------
   One claim per screen. The headline carries the idea, the copy stays
   short, and the air around them does the rest of the work. The tabs are
   a centred segmented control rather than a left-aligned strip, so the
   eye lands on the statement first and the control second. */
.product{padding:7rem 0 6.5rem;border-bottom:1px solid var(--line-soft);text-align:center}
.product .kicker{margin-bottom:1.5rem}
.product .stmt{
  font-size:clamp(2rem,4.4vw,3.25rem);letter-spacing:-.03em;line-height:1.08;
  max-width:17ch;margin:0 auto;
}
.product .stmt em{font-style:normal;color:var(--accent);transition:color .5s}
.product .sub{
  margin:1.5rem auto 0;color:var(--dim);font-size:1.05rem;max-width:56ch;line-height:1.55;
}

.tabs{
  display:flex;justify-content:flex-start;gap:.25rem;margin:3.4rem auto 3rem;
  padding:.3rem;border:1px solid var(--line);background:rgba(255,255,255,.02);
  width:max-content;max-width:100%;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-ms-overflow-style:none;
}
.tabs::-webkit-scrollbar{display:none}
.tab{
  flex:none;appearance:none;background:transparent;border:0;cursor:pointer;
  padding:.62rem 1.15rem;color:var(--dim);white-space:nowrap;
  font-family:"IBM Plex Mono",monospace;font-size:.68rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;
  transition:color .2s,background .25s;
}
.tab:hover{color:var(--text)}
.tab:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.tab[aria-selected="true"]{
  color:var(--text);background:var(--accent-bg);
  box-shadow:inset 0 -2px 0 var(--accent);
}

/* the grid goes back to the left -- centred body copy stops being
   readable the moment there is more than a sentence of it */

/* ---- device stage --------------------------------------------------
   The screens inside these frames are LIVE MINIATURES, not bitmaps: the
   same tokens, the same bracket corners, the same accent. A screenshot
   would be frozen at whatever the console looked like the day it was
   taken, would not retheme with the tab above, and would ship as a blob
   of base64 that nobody can diff. These stay honest for free. */
.devices{padding:7rem 0 6.5rem;border-bottom:1px solid var(--line-soft);text-align:center}
.stage{margin:3.6rem 0 0;display:flex;flex-direction:column;gap:2.2rem;align-items:center}
.deck{display:flex;gap:2.2rem;align-items:flex-end;justify-content:center;flex-wrap:wrap}

/* the miniature interface ------------------------------------------- */
.ui{background:#0b0e14;overflow:hidden;display:flex;flex-direction:column;
    text-align:left;width:100%;height:100%}
.ui .bar{display:flex;align-items:center;gap:4px;padding:5px 7px;
         border-bottom:1px solid var(--line);background:#0e1219;flex:none}
.ui .bar i{width:4px;height:4px;border-radius:50%;background:var(--line);flex:none}
.ui .bar i:first-child{background:var(--accent);transition:background .5s}
.ui .bar u{flex:1;height:4px;background:var(--line-soft);text-decoration:none;margin-left:4px}
.ui .body{display:flex;flex:1;min-height:0}
.ui .nav{width:16%;min-width:22px;border-right:1px solid var(--line);background:#0a0d12;
         padding:6px 5px;display:flex;flex-direction:column;gap:5px;flex:none}
.ui .nav b{display:block;height:3px;background:var(--line);border-radius:1px}
.ui .nav b.on{background:var(--accent);transition:background .5s}
.ui .main{flex:1;padding:7px;display:flex;flex-direction:column;gap:6px;min-width:0}
.ui .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;flex:none}
.ui .kpis div{background:#11161f;border:1px solid var(--line);padding:4px 5px}
.ui .kpis span{display:block;font-family:"IBM Plex Mono",monospace;font-size:10px;
               line-height:1;color:var(--accent);transition:color .5s}
.ui .kpis em{display:block;margin-top:3px;height:2px;width:70%;background:var(--line-soft)}
.ui .chart{flex:1;min-height:26px;display:flex;align-items:flex-end;gap:3px;
           background:#11161f;border:1px solid var(--line);padding:5px}
.ui .chart i{flex:1;background:var(--line);transition:background .5s}
.ui .chart i.hi{background:var(--accent)}
.ui .rows{display:flex;flex-direction:column;gap:3px;flex:none}
.ui .rows div{display:flex;align-items:center;gap:5px;background:#11161f;
              border:1px solid var(--line);padding:4px 5px}
.ui .rows u{flex:1;height:3px;background:var(--line-soft);text-decoration:none}
.ui .rows em{width:16px;height:6px;border:1px solid var(--accent);opacity:.8;transition:border-color .5s}

/* NOC wall ----------------------------------------------------------- */
.noc{display:flex;gap:14px;align-items:flex-end;justify-content:center;width:100%;
     max-width:960px;flex-wrap:nowrap}
.mon{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center}
.mon .glass{width:100%;aspect-ratio:16/10;background:#05070b;padding:5px;
            border:1px solid #2b3444;box-shadow:0 20px 50px rgba(0,0,0,.55)}
.mon .stand{width:16%;height:12px;background:linear-gradient(180deg,#222a37,#161c26)}
.mon .foot{width:38%;height:3px;background:#2b3444}
.mon.center{flex:1.35 1 0}
@media(max-width:820px){.noc .mon.side{display:none}}

/* laptop ------------------------------------------------------------- */
.laptop{width:min(460px,86vw);display:flex;flex-direction:column;align-items:center}
.laptop .lid{width:100%;aspect-ratio:16/10;background:#05070b;padding:6px;
             border:1px solid #2b3444;border-radius:7px 7px 0 0;
             box-shadow:0 18px 44px rgba(0,0,0,.5)}
.laptop .deckbase{width:112%;height:11px;border-radius:0 0 9px 9px;
                  background:linear-gradient(180deg,#242c3a,#151a23)}
.laptop .notchbar{width:16%;height:3px;border-radius:0 0 3px 3px;background:#0c1017;margin-top:-11px}

/* phone -------------------------------------------------------------- */
.phone{width:150px;flex:none;background:#05070b;border:1px solid #2b3444;
       border-radius:19px;padding:7px 5px;box-shadow:0 18px 40px rgba(0,0,0,.5)}
.phone .notch{width:38%;height:4px;background:#161c26;border-radius:3px;margin:0 auto 5px}
.phone .glass{aspect-ratio:9/17;overflow:hidden}
.phone .ui .nav{display:none}
.phone .ui .kpis{grid-template-columns:repeat(2,1fr)}
.phone .home{width:34%;height:2px;background:#2b3444;border-radius:2px;margin:6px auto 0}

.caps{display:flex;gap:2.4rem;justify-content:center;flex-wrap:wrap;margin-top:1.6rem}
.caps p{max-width:20ch;color:var(--dimmer);font-size:.78rem;line-height:1.45}
.caps p b{display:block;color:var(--dim);font-family:"IBM Plex Mono",monospace;
          font-size:.63rem;letter-spacing:.13em;text-transform:uppercase;margin-bottom:.3rem}

/* deployment trio ---------------------------------------------------- */
.deploy{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:1px;
        background:var(--line);border:1px solid var(--line);margin-top:4.5rem;text-align:left}
.deploy > div{background:#0e1219;padding:1.5rem 1.5rem 1.6rem;position:relative}
.deploy h3{font-size:1rem;margin:.55rem 0 .5rem}
.deploy p{color:var(--dim);font-size:.87rem}
.deploy .where{font-family:"IBM Plex Mono",monospace;font-size:.63rem;letter-spacing:.13em;
               text-transform:uppercase;color:var(--accent);transition:color .5s}


/* ---- watermarks -----------------------------------------------------
   The chevron and the emblem at very low opacity, behind content, never
   over it. Opacity is capped at .07 deliberately: a watermark that
   competes with body text is a texture, not a watermark, and the SMS
   disclosure has to stay the most readable thing on the page. */
.wm{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.wm svg{position:absolute;color:var(--accent);transition:color .6s,transform 900ms cubic-bezier(.22,.61,.36,1),opacity 900ms ease}

/* rotator: four chevrons at different scales, re-arranged per slide so the
   background shifts with the story instead of sitting still behind it */
.rot .wm .c1{width:62%;right:-13%;top:-24%;opacity:.055;transform:rotate(8deg)}
.rot .wm .c2{width:26%;left:4%;bottom:-16%;opacity:.04;transform:rotate(-14deg)}
.rot .wm .c3{width:14%;left:44%;top:6%;opacity:.05}
.rot .wm .c4{width:9%;right:24%;bottom:8%;opacity:.045;transform:rotate(22deg)}

.rot[data-slide="1"] .wm .c1{transform:rotate(-6deg) scale(1.1);opacity:.06}
.rot[data-slide="1"] .wm .c2{transform:rotate(10deg);opacity:.03}
.rot[data-slide="1"] .wm .c3{transform:translateY(18px) rotate(4deg)}
.rot[data-slide="2"] .wm .c1{transform:rotate(16deg) scale(.92);opacity:.05}
.rot[data-slide="2"] .wm .c4{transform:rotate(-10deg) scale(1.4);opacity:.06}
.rot[data-slide="2"] .wm .c3{opacity:.03}
.rot[data-slide="3"] .wm .c1{transform:rotate(2deg) scale(1.18);opacity:.065}
.rot[data-slide="3"] .wm .c2{transform:rotate(-26deg) scale(1.2);opacity:.05}
.rot[data-slide="3"] .wm .c4{opacity:.03}

/* the ghost rule: a hairline chevron outline, drawn not filled */
.rot .wm .ghost{width:34%;left:-6%;top:18%;opacity:.05;transform:rotate(-4deg)}
.rot[data-slide="2"] .wm .ghost{transform:rotate(6deg) scale(1.15);opacity:.065}

/* footer: the emblem, bottom right, balancing the wordmark on the left */
footer{position:relative;overflow:hidden}
footer .wm .mk{width:230px;right:-48px;bottom:-62px;opacity:.05}
@media(max-width:760px){footer .wm .mk{width:150px;right:-38px;bottom:-44px;opacity:.04}}

/* ---- contact + footer --------------------------------------------- */
.contact dl{margin:0;display:grid;grid-template-columns:9rem 1fr;gap:.65rem 1.2rem;max-width:46rem}
.contact dt{color:var(--dimmer);font-size:.84rem;font-family:"IBM Plex Mono",monospace}
.contact dd{margin:0;color:var(--text)}
footer{padding:2.6rem 0 3.6rem;color:var(--dimmer);font-size:.83rem}
footer .wrap{position:relative;z-index:1}
footer .row{display:flex;gap:1.2rem;flex-wrap:wrap;align-items:center}
footer .row + .row{margin-top:.6rem}
footer a{color:var(--dim)}

/* ---- entry animation: the console's, exactly ---------------------- */
@keyframes atk-in{
  from{opacity:0;transform:translateY(9px) scale(.995);clip-path:inset(0 0 100% 0)}
  60% {clip-path:inset(0 0 0 0)}
  to  {opacity:1;transform:none;clip-path:inset(0 0 0 0)}
}
/* Resting state is VISIBLE. Only once script has confirmed it will drive
   the animation does anything hide, so a first frame, a thumbnail, a fast
   scroll or a dead observer all show the page rather than a blank column.
   The earlier form parked every .rise at opacity:0 and trusted an observer
   to undo it -- which would have hidden the SMS disclosure band if the
   script ever failed to run. */
body.js .rise{opacity:0}
body.js .rise.in{animation:atk-in 260ms cubic-bezier(.22,.61,.36,1) both}
.rise.in:nth-child(2){animation-delay:45ms}
.rise.in:nth-child(3){animation-delay:90ms}
.rise.in:nth-child(4){animation-delay:135ms}
.rise.in:nth-child(n+5){animation-delay:165ms}

/* Motion is decoration here and the disclosure is not. If the viewer asks
   for less motion, or script never runs, everything must still be visible
   -- an unanimated .rise stuck at opacity:0 would hide the SMS band. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  body.js .rise,body.js .rise.in{opacity:1;animation:none!important}
  #scene,.rail::before{transition:none}
}

/* ---- contact page --------------------------------------------------- */
.pagehead{padding:4.6rem 0 2.6rem}
.pagehead h1{font-size:clamp(1.9rem,4vw,2.9rem);letter-spacing:-.03em;max-width:18ch}
.pagehead h1 em{font-style:normal;color:var(--accent);transition:color .5s}
.pagehead p.lede{margin-top:1.2rem;color:var(--dim);font-size:1.04rem;max-width:58ch}

.two{display:grid;grid-template-columns:1.15fr .85fr;gap:1px;
     background:var(--line);border:1px solid var(--line)}
.two > div{background:#0e1219;padding:2rem 2rem 2.2rem}
@media(max-width:860px){.two{grid-template-columns:1fr}}

/* ---- FORM FIELDS -------------------------------------------------------
   These were plain bordered boxes -- the only part of the site not speaking
   the Attractor language the rest of it does. The chrome had rails, tick
   marks, bracket corners and an accent that retints per section; the fields
   had a 1px grey rectangle.

   The moves are the page's own, not new ones:
     - a mono label with a leading tick, like .lbl and .eyebrow elsewhere
     - a hairline that BRIGHTENS from the accent on focus, the same gesture
       as .rail, rather than a border that merely changes colour
     - bracket corners on focus, borrowed from the panels
     - the section accent, so /book (floor, amber) and /contact (admin,
       steel) tint their own forms without a second rule

   RESTRAINT STILL APPLIES ON THE WORKING SURFACE. Nothing here animates on
   a timer, nothing moves while you type, and the SMS consent block gets no
   decoration that could compete with the disclosure text -- that block is
   read by a carrier reviewer and legibility beats styling there. */

:is(form,.wiz) .field{display:flex;flex-direction:column;gap:.45rem;margin-bottom:1.15rem}
:is(form,.wiz) label{font-family:"IBM Plex Mono",monospace;font-size:.63rem;font-weight:600;
           letter-spacing:.15em;text-transform:uppercase;color:var(--dim);
           display:flex;align-items:center;gap:.45rem;transition:color .18s}
/* The tick. Same device as .eyebrow's <i>, so a field label and a section
   label are visibly the same family. */
:is(form,.wiz) label::before{content:"";width:5px;height:1px;background:var(--dimmer);
                   transition:background .18s,width .18s}
:is(form,.wiz) .field:focus-within label{color:var(--text)}
:is(form,.wiz) .field:focus-within label::before{background:var(--accent);width:11px}

/* The control itself sits in a box so the corner brackets have something to
   hang on without wrapping the markup in another div. */
:is(form,.wiz) input,:is(form,.wiz) select,:is(form,.wiz) textarea{
  background:#080b10;border:1px solid var(--line);color:var(--text);
  font:15px/1.5 Archivo,-apple-system,sans-serif;
  padding:.68rem .8rem;width:100%;border-radius:2px;
  transition:border-color .18s,background .18s,box-shadow .18s}
:is(form,.wiz) input::placeholder,:is(form,.wiz) textarea::placeholder{color:var(--dimmer)}
:is(form,.wiz) textarea{min-height:124px;resize:vertical}

:is(form,.wiz) input:hover,:is(form,.wiz) select:hover,:is(form,.wiz) textarea:hover{
  border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}

/* Focus: the accent hairline plus a soft bloom, the same treatment the
   section rails get. outline:none is paired with a visible replacement --
   removing the outline and leaving nothing is how a keyboard user loses
   their place. */
:is(form,.wiz) input:focus,:is(form,.wiz) select:focus,:is(form,.wiz) textarea:focus{
  outline:none;border-color:var(--accent);background:#0a0e15;
  box-shadow:0 0 0 1px var(--accent),0 0 14px -4px var(--accent)}

/* CHROME AND SAFARI AUTOFILL PAINT A FLAT PALE YELLOW over any dark theme
   and ignore background-color entirely. The only reliable override is a
   giant inset shadow. Without it the form looks broken for exactly the
   people most likely to use it -- anyone whose browser knows their name. */
:is(form,.wiz) input:-webkit-autofill,
:is(form,.wiz) input:-webkit-autofill:hover,
:is(form,.wiz) input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--text);
  -webkit-box-shadow:0 0 0 100px #0a0e15 inset;
  caret-color:var(--text);
  transition:background-color 9999s ease-in-out 0s}

/* The native select arrow is the single most unstyled pixel on the page.
   Drawn instead, in currentColor, so it retints with the section. */
:is(form,.wiz) select{
  appearance:none;-webkit-appearance:none;
  padding-right:2.2rem;cursor:pointer;
  background-image:
    linear-gradient(45deg,transparent 50%,var(--dim) 50%),
    linear-gradient(135deg,var(--dim) 50%,transparent 50%);
  background-position:calc(100% - 1.05rem) 55%,calc(100% - .75rem) 55%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
:is(form,.wiz) select:focus{
  background-image:
    linear-gradient(45deg,transparent 50%,var(--accent) 50%),
    linear-gradient(135deg,var(--accent) 50%,transparent 50%)}

:is(form,.wiz) .row2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:560px){form .row2{grid-template-columns:1fr}}

/* ---- consent block ------------------------------------------------------
   Bordered and inset so it reads as a distinct undertaking rather than one
   more line of small print -- an A2P reviewer should find it without
   hunting. Deliberately NOT accent-filled: the disclosure has to stay
   plainly readable, and a tinted panel behind six required sentences is
   decoration competing with the thing being decorated. */
:is(form,.wiz) .consent{display:flex;gap:.75rem;align-items:flex-start;margin:1.4rem 0;
              padding:.95rem 1.05rem;border:1px solid var(--line);
              border-radius:2px;background:#0a0d12;
              transition:border-color .18s}
:is(form,.wiz) .consent:hover{border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
:is(form,.wiz) .consent:has(input:checked){border-color:var(--accent);background:var(--accent-bg)}
:is(form,.wiz) .consent span{font-size:.82rem;color:var(--dim);line-height:1.6}
:is(form,.wiz) .consent span b{color:var(--text)}

/* A drawn checkbox. The native one is OS-coloured, ignores the palette, and
   is the last element that looks pasted in from another site. appearance:
   none plus a drawn tick -- and the tick is a rotated border, not a glyph,
   so it needs no font and cannot mojibake in an ASCII-only file. */
:is(form,.wiz) .consent input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;
  width:17px;height:17px;flex:none;margin:.15rem 0 0;padding:0;
  border:1px solid var(--dimmer);border-radius:2px;background:#080b10;
  cursor:pointer;position:relative;transition:all .16s}
:is(form,.wiz) .consent input[type="checkbox"]:hover{border-color:var(--accent)}
:is(form,.wiz) .consent input[type="checkbox"]:checked{
  background:var(--accent);border-color:var(--accent)}
:is(form,.wiz) .consent input[type="checkbox"]:checked::after{
  content:"";position:absolute;left:5px;top:1px;width:4px;height:9px;
  border:solid #0c0f15;border-width:0 2px 2px 0;transform:rotate(42deg)}
:is(form,.wiz) .consent input[type="checkbox"]:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px}

/* Interim state. The form has no endpoint yet -- there is no backend on a
   static site. Rather than a button that silently does nothing, it is
   disabled and the working paths sit directly beside it. A dead submit on
   a page a carrier reviewer opens is worse than no form. */
.pending{border:1px solid var(--amber);background:#171208;padding:.9rem 1rem;
         font-size:.85rem;color:#d7c7ad;margin-bottom:1.4rem}
.pending b{color:var(--amber);display:block;font-family:"IBM Plex Mono",monospace;
  font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;margin-bottom:.3rem}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn[disabled]:hover{background:var(--accent-bg)}

.direct dl{margin:0;display:grid;grid-template-columns:6.5rem 1fr;gap:.6rem 1rem}
.direct dt{color:var(--dimmer);font-size:.8rem;font-family:"IBM Plex Mono",monospace}
.direct dd{margin:0}
.direct .big{font-size:1.05rem;font-weight:600}

/* appointment slots */
.cal{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:.55rem;margin-top:1rem}

/* ---- support launcher, present on every page ------------------------
   Same corner and same z-order as the console's AXIOM button, so the two
   products behave alike. z-70/71 sits above the footer watermark. */
#sup-btn{position:fixed;right:1.25rem;bottom:1.25rem;z-index:70;
  display:flex;align-items:center;gap:.55rem;
  background:var(--panel-2);border:1px solid var(--accent);color:var(--text);
  padding:.7rem 1rem;cursor:pointer;font-weight:600;font-size:.86rem;
  box-shadow:0 10px 30px rgba(0,0,0,.5);transition:background .2s,border-color .5s}
#sup-btn:hover{background:#232b3c}
#sup-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
#sup-btn .dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex:none}
#sup{position:fixed;right:1.25rem;bottom:1.25rem;z-index:71;display:none;
  width:min(340px,calc(100vw - 2.5rem));background:var(--panel);
  border:1px solid var(--line);box-shadow:0 18px 50px rgba(0,0,0,.6)}
#sup.on{display:block}
#sup header{display:flex;align-items:center;gap:.6rem;padding:.85rem 1rem;
  border-bottom:1px solid var(--line);background:#0e1219}
#sup header b{font-size:.9rem}
#sup header .x{margin-left:auto;background:none;border:0;color:var(--dim);
  cursor:pointer;font-size:1.1rem;line-height:1;padding:.2rem .4rem}
#sup header .x:hover{color:var(--text)}
#sup .body{padding:1rem}
#sup .opt{display:block;width:100%;text-align:left;background:#0a0d12;
  border:1px solid var(--line);color:var(--text);padding:.8rem .9rem;
  cursor:pointer;margin-bottom:.6rem;transition:border-color .2s}
#sup .opt:hover{border-color:var(--accent)}
#sup .opt b{display:block;font-size:.88rem;margin-bottom:.15rem}
#sup .opt span{font-size:.78rem;color:var(--dim)}
#sup .foot{border-top:1px solid var(--line);padding:.7rem 1rem;font-size:.75rem;color:var(--dimmer)}
@media(prefers-reduced-motion:reduce){#sup-btn,#sup{transition:none}}

/* ---- booking: month calendar, then times ----------------------------
   `.book` -- the two-column "calendar beside times" container -- is DELETED.
   It belonged to the one-page version, where both had to be on screen at
   once. The wizard shows one per step, so nothing has used the class since
   the split: verified against every page in public/, zero occurrences.
   Orphaned layout CSS is worse than orphaned decoration, because the next
   person finds a grid already built and puts something back into it. */

.calhead{display:flex;align-items:center;gap:.6rem;margin-bottom:.9rem;
         padding-bottom:.8rem;border-bottom:1px solid var(--line)}
.calhead b{font-size:1.02rem;font-weight:600;margin-right:auto;
           font-family:Archivo,system-ui,sans-serif}
.calnav{appearance:none;background:transparent;border:1px solid var(--line);color:var(--dim);
        width:28px;height:28px;cursor:pointer;line-height:1;
        display:flex;align-items:center;justify-content:center;transition:border-color .2s,color .2s}
.calnav:hover:not([disabled]){color:var(--text);border-color:var(--accent)}
.calnav[disabled]{opacity:.3;cursor:not-allowed}
.calnav:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* The day-of-week strip reads as a table header now, matching .lbl and
   .review dt -- one mono treatment for every label in the flow. */
.dow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:.4rem}
.dow span{text-align:center;font-family:"IBM Plex Mono",monospace;font-size:.58rem;
          font-weight:600;letter-spacing:.14em;color:var(--dimmer);padding:.35rem 0}
.grid7{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.day{appearance:none;background:#0a0d12;border:1px solid transparent;color:var(--text);
     aspect-ratio:1;cursor:pointer;font:14px/1 Archivo,sans-serif;
     display:flex;align-items:center;justify-content:center;position:relative;
     transition:border-color .15s,background .15s}
.day:hover:not([disabled]){border-color:var(--accent);background:#11161f}
.day[disabled]{opacity:.22;cursor:default;background:transparent}
.day[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-bg);
                          font-weight:600;color:var(--accent);
                          box-shadow:0 0 12px -4px var(--accent)}
.day:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
/* .day.has -- the "times left" dot -- is deleted, not orphaned. It could
   only be drawn by knowing what was booked, and that knowledge was
   generated. A style rule left behind for a removed claim is how the claim
   comes back: the next person sees a dot class and wires something to it. */
/* Today was a grey inset ring, indistinguishable from the cell border at a
   glance. It is the one date a visitor orients from, so it gets the accent
   -- dimmed, so it never competes with the SELECTED day above.

   A DOT WAS DRAFTED HERE AND REMOVED BEFORE IT SHIPPED. It would have sat
   at bottom:4px, 3px round, accent -- pixel-for-pixel the `.day.has` dot
   deleted four lines above, which meant "this day has times left". "Today"
   is knowable and availability was invented, so the MEANING differs; the
   MARK would have been identical, in a grid whose own earlier copy read
   "a dot marks a day with times left".

   Reusing a retired affordance for a new meaning is how the retired meaning
   comes back -- not through code, through the reader. The ring alone
   distinguishes today, and it cannot be misread as a claim about booking. */
.day.today{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent)}

/* .panel, .slot and .times are DELETED -- 11 rules, zero matches in any
   page and never applied by JS. .slot was the pre-wizard time control
   (.tslot replaced it), .times its container, .panel a tab-panel from the
   one-page landing. Same family as .book: layout CSS for a layout that no
   longer exists, which is worse than dead decoration because the next
   person finds a control already styled and wires something to it.

   A GENERAL check for this was written and NOT shipped: it flags every
   descendant-selector root that matches no page, and 5 of its 8 hits were
   runtime classes (.slide.on, .rot.paused, .rot[data-slide]) set by the
   rotator's JS, which cannot appear in static markup. A check that is
   wrong more often than right gets switched off, and then the real defect
   survives. An honest version must also read each page's classList.add /
   setAttribute calls. Deferred, with the reason recorded. */

/* ---- booking wizard (/book) -------------------------------------------
   One question at a time. The single-page version put a calendar, a time
   grid, four radio cards, five inputs and a consent checkbox on screen at
   once, under a contact form -- the visitor met the whole form before
   knowing whether step one had worked. */
.wiz{max-width:760px;margin:0 auto}
.steps{display:flex;gap:0;list-style:none;padding:0;margin:0 0 2.4rem;
       counter-reset:s;border-top:1px solid var(--line)}
/* The rail SEGMENTS, and the segments move. Every state here was already
   correct and every one of them snapped -- five steps of accent appearing
   and vanishing with no travel, which reads as a redraw rather than
   progress. The transitions are the whole fix; the colours did not change. */
.steps li{flex:1;counter-increment:s;position:relative;padding:.95rem .4rem 0;
          font:500 .69rem/1.3 "IBM Plex Mono",monospace;letter-spacing:.1em;
          text-transform:uppercase;color:var(--faint);
          transition:color .22s ease}
.steps li::before{content:"";position:absolute;top:-1px;left:0;right:0;height:1px;
                  background:var(--line);
                  transition:background .22s ease,box-shadow .22s ease}
/* A 2px lit segment rather than a 1px recolour -- the travelling part of the
   rail should be the part you can see from across the room. */
.steps li[data-on]::before{background:var(--accent);height:2px;top:-1px;
                           box-shadow:0 0 10px -1px var(--accent)}
.steps li[data-on]{color:var(--accent)}
.steps li[data-done]{color:var(--dim)}
.steps li[data-done]::before{background:color-mix(in srgb,var(--accent) 40%,var(--line))}
.steps b{display:block;font:600 .95rem/1.2 Archivo,system-ui,sans-serif;
         letter-spacing:normal;text-transform:none;margin-top:.28rem;color:inherit;
         transition:color .22s ease}
.steps li[data-on] b{font-weight:700}
@media(max-width:640px){.steps li b{display:none}}
@media(prefers-reduced-motion:reduce){
  .steps li,.steps li::before,.steps b{transition:none}
  .pane[data-on]{animation:none}
}

.pane{display:none}
.pane[data-on]{display:block;animation:atk-in 240ms cubic-bezier(.22,.61,.36,1) both}
/* The step heading gets the accent em treatment the page headers use, and a
   tick, so each step reads as a section rather than a paragraph with a
   larger first line. */
.pane h2{font:600 1.45rem/1.25 Archivo,system-ui,sans-serif;margin:0 0 .55rem;
         display:flex;align-items:center;gap:.7rem}
.pane h2::before{content:"";width:14px;height:2px;background:var(--accent);
                 box-shadow:0 0 8px -1px var(--accent);flex:none}
.pane .hint{color:var(--dim);font-size:.92rem;margin:0 0 1.9rem;max-width:58ch}
.pane .hint b{color:var(--text)}

.wiznav{display:flex;gap:.8rem;align-items:center;margin-top:2.3rem;
        padding-top:1.5rem;border-top:1px solid var(--line);position:relative}
/* A lit stub on the divider, so the nav row belongs to the accented flow
   above it rather than looking like the page footer starting early. */
.wiznav::before{content:"";position:absolute;top:-1px;left:0;width:34px;height:1px;
                background:var(--accent);box-shadow:0 0 8px -2px var(--accent)}
.wiznav .spacer{flex:1}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--dim)}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn[disabled]{opacity:.4;cursor:not-allowed}
/* WHY Continue is dead. It was --faint (undefined, so inherited) at .8rem --
   the least visible text on the page, carrying the only explanation of why
   the button will not work. A disabled control whose reason is unreadable is
   a dead end with an alibi. Mono and dim now, with a marker, so it reads as
   an instruction rather than a footnote. Empty when there is nothing to say,
   so it never occupies space for its own sake. */
.why{color:var(--dim);font-size:.78rem;margin:1rem 0 0;
     font-family:"IBM Plex Mono",monospace;letter-spacing:.02em;
     display:flex;align-items:baseline;gap:.5rem}
.why:empty{display:none}
.why::before{content:"!";color:var(--amber);font-weight:600;flex:none}

/* ---- review step ------------------------------------------------------
   The whole request, restated before anything is sent.

   THIS WAS THE DULLEST THING IN THE FLOW and it is the most important --
   step 5 is where somebody decides to send. Four accented steps led to a
   grey rectangle. It now carries the accent edge the .summary panel uses,
   rows separated so eleven values are scannable rather than a block, and
   values in ink against mono labels.

   `var(--ink)` was wrong HERE and silently so, so every value in this card
   rendered at its inherited colour rather than the intended one -- hidden
   inside a card that already looked unfinished.

   And --ink is not a typo. It is REAL, in a second vocabulary: tracker.html,
   upload.html, sms-terms.html and sms-privacy.html each define --ink /
   --ink-2 in their own light-theme <style> block, while site.css uses
   --text / --dim / --dimmer for the same three roles. Two names for one
   concept, in one repo, and a rule written in the wrong dialect fails
   silently rather than loudly. The same class as GROWLINK_API_URL versus
   GROWLINK_BASE_URL -- and the same fix if it ever bites twice: pick one. */
.review{border:1px solid var(--line);border-radius:2px;padding:1.5rem 1.6rem;
        background:var(--panel);position:relative}
.review::before{content:"";position:absolute;top:-1px;left:0;right:0;height:2px;
                background:linear-gradient(90deg,var(--accent),
                           color-mix(in srgb,var(--accent) 15%,transparent))}
.review dl{display:grid;grid-template-columns:auto 1fr;gap:0 1.8rem;margin:0}
.review dt,.review dd{padding:.62rem 0;border-bottom:1px solid var(--line-soft)}
.review dt{font:600 .64rem/1.6 "IBM Plex Mono",monospace;letter-spacing:.14em;
           text-transform:uppercase;color:var(--dimmer);white-space:nowrap}
.review dd{margin:0;color:var(--text);font-size:.95rem}
.review dd.muted{color:var(--dimmer);font-style:italic}
/* last row keeps the card from ending on a rule */
.review dl > dt:nth-last-of-type(1),
.review dl > dd:nth-last-of-type(1){border-bottom:none;padding-bottom:0}

.timegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:.5rem;margin-top:.9rem}
.tslot{appearance:none;background:#0a0d12;border:1px solid var(--line);color:var(--text);
       padding:.55rem .3rem;cursor:pointer;font-family:"IBM Plex Mono",monospace;font-size:.78rem;
       transition:border-color .15s,background .15s}
.tslot:hover{border-color:var(--accent);background:#11161f;
             transform:translateY(-1px)}
.tslot[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-bg);
                            color:var(--accent);font-weight:600;
                            box-shadow:0 0 12px -4px var(--accent)}
/* `.tslot[disabled]` -- opacity .28 and a line-through -- is DELETED, for
   the same reason `.day.has` was. It could only ever be drawn by knowing
   which slots were taken, and that knowledge was generated by a hash of the
   date. No slot is disabled now. A style rule kept for a removed claim is
   how the claim comes back: the next person finds a disabled state already
   designed and wires something to it. */
.tslot:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* topic radios */
/* Topic cards. The radio inside is hidden and the CARD becomes the control
   -- a 13px OS-drawn dot beside a 3-line card is a target nobody aims for,
   and it is the same off-palette native widget the consent checkbox was. */
.topics{display:flex;flex-direction:column;gap:.55rem;margin-top:.9rem}
.topic input[type="radio"]{
  appearance:none;-webkit-appearance:none;
  width:15px;height:15px;flex:none;margin:.28rem 0 0;
  border:1px solid var(--dimmer);border-radius:50%;background:#080b10;
  cursor:pointer;position:relative;transition:all .16s}
.topic:hover input[type="radio"]{border-color:var(--accent)}
.topic input[type="radio"]:checked{border-color:var(--accent)}
.topic input[type="radio"]:checked::after{
  content:"";position:absolute;inset:3px;border-radius:50%;background:var(--accent)}
.topic input[type="radio"]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.topic{display:flex;gap:.7rem;align-items:flex-start;background:#0a0d12;
       border:1px solid var(--line);padding:.7rem .85rem;cursor:pointer;
       transition:border-color .15s,background .15s}
.topic:hover{border-color:var(--accent)}
/* `.topic input{...accent-color}` was here and is gone. It styled the NATIVE
   radio, which appearance:none above has replaced -- and because it sat
   later in the file it was still winning on margin-top, so the drawn control
   sat 0.03rem off from where its own rule put it. A leftover rule for a
   replaced control does not merely do nothing; it does something small and
   wrong, which is harder to find than something large and wrong. */
.topic:has(input:checked){border-color:var(--accent);background:var(--accent-bg)}
.topic b{display:block;font-size:.9rem;font-weight:600}
.topic span{display:block;font-size:.78rem;color:var(--dim);margin-top:.1rem}
#other-wrap[hidden]{display:none}
#other-wrap{margin-top:.8rem}

.summary{border:1px solid var(--accent);background:var(--accent-bg);
         padding:.9rem 1rem;margin-top:1.4rem;font-size:.9rem}
.summary .lbl{margin-bottom:.35rem}
.summary b{font-size:1rem}
.summary[hidden]{display:none}