/* ==========================================================================
   Dialed In Digital — v3.1 "The Dial". WARM near-black instrument system.
   Every colour is a token custom-property (P1.10 — a raw hex in a rule is a bypass).
   ONE ground end to end (no section background shifts). GRIDLESS: no borders/cards/
   shadows on content blocks — the ONLY framed surfaces are the measure input, the F4
   screenshot frame, the recessed well, table row hairlines, and section top-rules.

   BREAKPOINT DERIVATION (rule-driven, declared ONCE — G4 checks the rules were followed):
     - Desktop is authored against the tokens. Tablet (<=900px) and mobile (<=600px) DERIVE:
     - Type scale steps DOWN one 1.333 notch per breakpoint (handled by the clamp() min/max).
     - Section padding drops one step via the single --section clamp (no per-viewport padding).
     - Multi-column blocks (.split, .ev, .td, .board) STACK in declared source order.
     - Images crop subject-preserving via object-fit; tap targets grow to >=48px on mobile.
   MOTION TOKENS (one each; deviations declared inline):
     - --ease: cubic-bezier(0.16,1,0.3,1) for every non-instrument transition.
     - --section: clamp(4rem,9vw,8rem) reused by every section.
     The dial needle is a JS damped-harmonic integrator, NOT a CSS curve (r2-01).
   ========================================================================== */

/* ---- self-hosted variable fonts (latin; latin covers Spanish) ---- */
@font-face{font-family:"Archivo";src:url("/fonts/archivo-var-latin.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("/fonts/archivo-var-latin.woff2") format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("/fonts/jetbrainsmono-var-latin.woff2") format("woff2");font-weight:100 800;font-style:normal;font-display:swap}

:root{
  /* palette — single-declared from tokens.json */
  --ground:#121110;
  --well:#1A1613;
  --line:#2A2521;
  --line-lit:#6E8388;
  --ink:#F2EFEA;
  --ink-2:#A8A29A;
  --tel:#8A8680;
  --teal:#19C2D8;
  --teal-deep:#0A6D7B;
  --green:#3FD08A;
  --oxblood:#9E5044;
  --cta-ink:#06282D;
  /* type */
  --sans:"Archivo",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,"Cascadia Code",Consolas,monospace;
  /* rhythm */
  --section:clamp(4rem,9vw,8rem);
  --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s6:48px;--s8:64px;
  --edge:clamp(24px,5vw,64px);
  --ease:cubic-bezier(0.16,1,0.3,1);
  --dur:300ms;--dur-micro:150ms;
  --callbar-h:0px;
}

*{box-sizing:border-box;margin:0}
[hidden]{display:none!important}           /* defensive: any author display rule must not defeat the UA default */
html{scroll-behavior:smooth;scroll-padding-top:88px;scroll-padding-bottom:var(--callbar-h);-webkit-text-size-adjust:100%}
body{background:var(--ground);color:var(--ink);font:400 1rem/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden;font-variant-numeric:tabular-nums}
img,svg,picture{display:block;max-width:100%}
a{color:var(--teal);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:0}
.tnum{font-variant-numeric:tabular-nums}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wrap{width:100%;max-width:1100px;margin-inline:auto;padding-inline:var(--edge)}
.skip-link{position:absolute;left:8px;top:-64px;background:var(--teal);color:var(--cta-ink);padding:15px 18px;min-height:48px;display:inline-flex;align-items:center;font:700 .85rem var(--sans);z-index:200;transition:top var(--dur-micro)}
.skip-link:focus{top:8px}

/* ---- MPA cross-document view transitions (progressive) ---- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtFade 160ms var(--ease) both}
::view-transition-new(root){animation:vtRise 260ms var(--ease) both}
@keyframes vtFade{to{opacity:0}}
@keyframes vtRise{from{opacity:0;transform:translateY(10px)}}

/* ---- reveal gate (P1.22 / rule 15): visible by DEFAULT; only .js .reveal hides ---- */
.reveal{transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.js .reveal{opacity:0;transform:translateY(18px)}
.js .reveal.is-in,.js .reveal.dead{opacity:1;transform:none}

/* ==========================================================================
   HEADER + NAV
   ========================================================================== */
.site-header{position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--ground) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);transition:transform .38s var(--ease),background .38s var(--ease),box-shadow .38s var(--ease)}
.site-header.hdr--away{transform:translateY(-101%)}
.site-header.hdr--solid{background:var(--ground);box-shadow:0 8px 24px rgba(0,0,0,.35)}
@media (prefers-reduced-motion:reduce){.site-header{transition:none}}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;min-height:66px}
.brand{display:inline-flex;align-items:center;gap:10px;min-height:48px;font:900 1.05rem var(--sans);letter-spacing:.01em;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand__glyph{width:30px;height:30px;flex:none}
.nav{display:flex;align-items:center;gap:clamp(14px,2vw,28px)}
.nav a{color:var(--ink-2);font:500 .95rem var(--sans);font-variation-settings:"wght" 500}
.nav a[aria-current="page"]{color:var(--ink)}
.header-cta{margin-left:6px}
.nav-toggle{display:none;background:none;border:0;color:var(--ink);padding:13px;min-width:48px;min-height:48px;align-items:center;justify-content:center;cursor:pointer}
@media (hover:hover) and (pointer:fine){
  .nav a{transition:font-variation-settings var(--dur) var(--ease),color var(--dur) var(--ease)}
  .nav a:hover{color:var(--ink);font-variation-settings:"wght" 700;text-decoration:none}
}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.5ch;font:700 .9rem var(--sans);letter-spacing:.02em;padding:14px 24px;border:0;cursor:pointer;min-height:48px;transition:background var(--dur) var(--ease),transform var(--dur-micro) var(--ease)}
.btn--primary{background:var(--teal);color:var(--cta-ink)}
.btn--primary:hover{background:#3BD3E7;text-decoration:none}
.btn--primary:active{background:var(--teal-deep)}
.btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--line-lit);min-height:auto;padding:10px 18px}
.btn--ghost:hover{border-color:var(--teal);color:var(--ink);text-decoration:none}
.btn--text{background:none;color:var(--teal);padding:12px 4px}
.arrow{transition:transform var(--dur) var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}
.link{display:inline-block;color:var(--teal);font:600 .95rem var(--sans);margin-top:var(--s3)}
.inline-link{color:var(--teal)}
.linkbtn{background:none;border:0;color:var(--teal);cursor:pointer;font:inherit;padding:0}
.linkbtn:hover{text-decoration:underline}

/* magnetic hitbox marker (JS drives transform) */
[data-magnetic]{will-change:transform}

/* ==========================================================================
   SECTIONS — gridless typographic anchoring. ONE ground; band = spacing + a top rule.
   ========================================================================== */
.sec{padding-block:var(--section)}
.sec--band{border-top:1px solid var(--line)}
.sec-mark{font:400 .75rem var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--tel);margin-bottom:var(--s3)}
.sec-mark a{color:var(--tel)}
.h-two{font:800 clamp(1.75rem,3vw,2.5rem)/1.12 var(--sans);letter-spacing:-.01em;color:var(--ink)}
.h-beat2{font-style:italic;color:var(--teal);font-weight:800}
.lede{font:400 clamp(1.1rem,1.6vw,1.3rem)/1.5 var(--sans);color:var(--ink-2);max-width:62ch;margin-top:var(--s3)}
.fine{font:400 .8rem/1.5 var(--mono);color:var(--tel);letter-spacing:.02em}
h2,h3,h4{color:var(--ink);letter-spacing:-.01em}

/* ==========================================================================
   THE HERO — the dial
   ========================================================================== */
.hero{padding-block:clamp(1rem,3vh,2.5rem) var(--section);text-align:center;position:relative}
.hero__inner{max-width:900px}
.kicker{font:400 .72rem var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--teal);margin-bottom:var(--s3)}
.hero__h1{font:800 clamp(2.25rem,5.2vw,4rem)/1.04 var(--sans);letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.hero__h1 em{font-style:italic;color:var(--teal);font-weight:800}

.dial-wrap{max-width:760px;margin:clamp(6px,2vh,26px) auto 0;touch-action:pan-y;position:relative}
/* r2-03 grain: ONE feTurbulence pass unifies the hero dial with the photographs. Scoped to the
   dial (high-contrast ink readout, safe) — it NEVER reaches the .panel well readouts (S2: the
   telemetry-on-well 4.96:1 pair sits in .panel, outside .dial-wrap). */
.dial-wrap::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:4;opacity:.10;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E")}
#dial{width:100%;height:auto;cursor:grab;user-select:none;overflow:visible}
#dial:active{cursor:grabbing}
.dial-well{fill:var(--well);opacity:.55;filter:blur(6px)}                 /* r2-01 rule 7: soft mechanical depth behind the crisp face */
.tick{stroke:#4A443D;stroke-width:3}
.tick--major{stroke:#7A736A;stroke-width:5}
.tick--lit{stroke:var(--teal);filter:drop-shadow(0 0 6px rgba(25,194,216,.5))}
.tick-label{font:700 26px var(--mono);fill:var(--tel);text-anchor:middle}
.band{fill:none;stroke-width:10;opacity:.9}
.band--track{stroke:var(--line)}
.band--redline{stroke:var(--oxblood)}
.needle__body{fill:var(--teal);filter:drop-shadow(0 0 14px rgba(25,194,216,.5))}   /* tinted glow, never black */
.needle__hub{fill:var(--well);stroke:var(--teal);stroke-width:3}
.needle__pin{fill:var(--teal)}
.needle--ghost{stroke:var(--tel);stroke-width:3;stroke-dasharray:7 7;opacity:.9}   /* S1: under the primary, thin, muted, dashed */
#ghostTag rect{fill:var(--well);stroke:var(--line);stroke-width:1}
#ghostTag text{font:400 20px var(--mono);fill:var(--ink-2)}
.score-num{font:900 clamp(72px,10vw,96px) var(--sans);fill:var(--ink);letter-spacing:-.02em}
.score-lab{font:400 15px var(--mono);fill:var(--tel);letter-spacing:.14em}
.dial-hint{font:400 .78rem var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--tel);margin-top:var(--s2)}
#dialGlareRect{mix-blend-mode:screen;transition:opacity var(--dur) var(--ease)}   /* FIX #6 cursor-following specular */
/* r2-02 item 7: ambient dimming tied to the gauge state (homepage only, subtle, reversible) */
.dial-peak .site-header,.dial-peak main>section:not(.hero){transition:opacity 600ms var(--ease);opacity:.72}
.dial-peak .hero{transition:filter 600ms var(--ease);filter:brightness(1.06)}

/* invitation */
.measure{display:flex;max-width:560px;margin:var(--s6) auto 0;border:1px solid var(--line);background:var(--well)}
.measure input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--ink);font:400 1.05rem var(--mono);padding:16px 18px}
.measure input::placeholder{color:var(--tel)}
.measure:focus-within{border-color:var(--teal)}
.measure__btn{border:0;background:var(--teal);color:var(--cta-ink);font:700 .9rem var(--sans);letter-spacing:.05em;text-transform:uppercase;padding:0 28px;cursor:pointer;min-height:54px;transition:background var(--dur) var(--ease)}
.measure__btn:hover{background:#3BD3E7}
.measure__btn:disabled{opacity:.55;cursor:default}
.under{font:400 .82rem var(--mono);color:var(--tel);margin-top:var(--s2)}

/* run / result panel — the ONE recessed well surface */
.panel{max-width:560px;margin:var(--s6) auto 0;text-align:left;border:1px solid var(--line);background:var(--well);padding:22px 24px}
.stages{list-style:none}
.stages li{font:400 .9rem var(--mono);color:var(--tel);padding:5px 0;transition:color var(--dur)}
.stages li.on{color:var(--ink)}
.stages li.on::before{content:"● ";color:var(--teal)}
.stages li:not(.on)::before{content:"○ ";color:var(--line)}
.stages li.done{color:var(--ink-2)}
.stages li.done::before{content:"✓ ";color:var(--green)}
.board-live{width:100%;border-collapse:collapse;font:400 .95rem var(--mono)}
.board-live th{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tel);text-align:right;padding:8px 6px;border-bottom:1px solid var(--line)}
.board-live th:first-child{text-align:left;color:var(--ink)}
.board-live td{padding:10px 6px;text-align:right;border-bottom:1px solid var(--line);color:var(--ink)}
.board-live td:first-child{text-align:left;color:var(--ink-2)}
.board-live .yours{color:var(--teal);font-weight:700}
.vLine{font:400 .85rem var(--mono);color:var(--tel);margin:14px 0 18px}
.cta{display:block;text-align:center;text-decoration:none;font:700 .9rem var(--sans);letter-spacing:.04em;padding:15px;margin-top:8px}
.cta--relief{background:var(--teal);color:var(--cta-ink);text-transform:uppercase}
.cta--relief:hover{background:#3BD3E7;text-decoration:none}
.cta--book{background:transparent;color:var(--teal);border:1px solid var(--line-lit)}
.cta--book:hover{border-color:var(--teal);text-decoration:none}
.vSmall{font:400 .78rem var(--mono);color:var(--tel);margin-top:12px;text-align:center;line-height:1.6}
.fail__msg{font:400 1rem var(--sans);color:var(--ink);margin-bottom:8px}

/* ==========================================================================
   FOUNDER VOICE / STATEMENT (Archivo 400 — typographic warmth is retired; the voice
   register + the adjacent grain-graded photo + the near-black grade carry warmth)
   ========================================================================== */
.statement__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s6);align-items:center}
@media(max-width:900px){.statement__grid{grid-template-columns:1fr}}
.statement__inner{max-width:900px}
.statement__media{margin:0}
.serif-voice{font:400 clamp(1.25rem,2.2vw,1.6rem)/1.45 var(--sans);color:var(--ink);text-wrap:pretty}
.statement__sign{font:400 .85rem var(--mono);color:var(--tel);letter-spacing:.08em;margin-top:var(--s4)}

/* ==========================================================================
   FIGURES — F1 photo-bled + F4 luminance-aware screenshot frames
   ========================================================================== */
.fig{margin:0}
.fig__frame{position:relative;overflow:hidden}
.fig__frame img{width:100%;height:auto}
.fig__cap{font:400 .78rem var(--mono);color:var(--tel);margin-top:var(--s2);line-height:1.5}
.fig__rights{font:400 .72rem var(--mono);color:var(--tel);margin-top:6px;letter-spacing:.02em}
.fig__hc1{font:400 .78rem/1.55 var(--sans);color:var(--ink-2);margin-top:var(--s2);max-width:60ch}
.fig__hc1-mark{display:block;font:400 .68rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tel);margin-bottom:4px}
.fig__concept{font:400 .72rem var(--mono);color:var(--tel);margin-top:6px;letter-spacing:.02em}

/* F4: screenshots/renders — true colour, luminance-aware frame, 0px radius, no shadow */
.shot--hairline{border:1px solid var(--line)}
.shot--lit{border:2px solid var(--line-lit)}

/* F1: photographs — exposure knockdown + warm multiply wash + grain + multi-edge feathered bleed */
.photo-bled{position:relative}
.photo-bled img{
  filter:brightness(.82) saturate(.92);
  -webkit-mask-image:linear-gradient(to top,transparent 0,#000 12%,#000 92%,rgba(0,0,0,.25) 100%),linear-gradient(to right,transparent 0,#000 8%,#000 92%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to top,transparent 0,#000 12%,#000 92%,rgba(0,0,0,.25) 100%),linear-gradient(to right,transparent 0,#000 8%,#000 92%,transparent 100%);
  mask-composite:intersect;
}
.photo-bled::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;background:rgba(26,22,19,.18);mix-blend-mode:multiply}
.photo-bled::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;opacity:.12;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ==========================================================================
   HOME §3 evidence-photo narrative (alternating, gridless)
   ========================================================================== */
.ev-list{display:flex;flex-direction:column;gap:var(--section)}
.ev{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:center}
.ev:nth-child(even) .ev__media{order:-1}
.ev__para{font:400 clamp(1.15rem,1.8vw,1.4rem)/1.5 var(--sans);color:var(--ink);text-wrap:pretty;max-width:46ch}
.ev__media{min-width:0}

/* ==========================================================================
   HD before/after delta — inline evidence line, GREEN on improved, no panel chrome
   ========================================================================== */
.delta{margin-top:var(--s4);max-width:56ch}
.delta__lead{font:400 .95rem var(--sans);color:var(--ink-2);margin-bottom:var(--s2)}
.delta__row{display:flex;align-items:baseline;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font:400 .95rem var(--mono);color:var(--ink-2)}
.delta__name{flex:1}
.delta__before{color:var(--tel)}
.delta__arrow{color:var(--tel)}
.delta__after{font:700 1.35rem var(--mono);color:var(--green)}
.delta__note{font:400 .82rem/1.6 var(--mono);color:var(--tel);margin-top:var(--s3)}
.delta__note code{color:var(--ink-2);background:var(--well);padding:1px 5px}

/* inline tabular readout (B2 — no box) */
.readout{font:400 .95rem/1.9 var(--mono);color:var(--ink-2);margin-top:var(--s3)}
.readout__lead{color:var(--tel);text-transform:uppercase;letter-spacing:.1em;font-size:.75rem;display:block;margin-bottom:4px}
.readout__pair b{color:var(--ink);font-weight:700;font-size:1.15rem}
.readout__dot{color:var(--line-lit);margin:0 8px}
.readout__q{display:block;font-size:.72rem;color:var(--tel);margin-top:6px}
.statline b{color:var(--ink);font-weight:700}

/* ==========================================================================
   METHOD — oversized mono numerals, gridless (anti-blocky device)
   ========================================================================== */
.method{list-style:none;margin-top:var(--s6);display:flex;flex-direction:column;gap:var(--s6)}
.method__item{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,4vw,48px);align-items:baseline;padding-bottom:var(--s6);border-bottom:1px solid var(--line)}
.method__item:last-child{border-bottom:0;padding-bottom:0}
.method__num{font:700 clamp(2.5rem,5vw,4rem)/1 var(--mono);color:var(--tel);font-variant-numeric:tabular-nums lining-nums;position:relative}
.method__num::after{content:"";position:absolute;left:0;bottom:-8px;width:1.2ch;height:3px;background:var(--teal)}
.method__name{font:700 1.4rem/1.2 var(--sans);color:var(--ink);display:flex;flex-wrap:wrap;align-items:baseline;gap:10px}
.method__pass{font:400 .72rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--tel)}
.method__desc{font:400 1rem/1.65 var(--sans);color:var(--ink-2);margin-top:var(--s2);max-width:60ch}

/* ==========================================================================
   SERVICES — evidence rows, NO card container (S4), one hairline baseline only
   ========================================================================== */
.srv-rows{display:flex;flex-direction:column;margin-top:var(--s6)}
.srv-row{display:grid;grid-template-columns:auto 1fr minmax(220px,300px);gap:clamp(18px,3vw,40px);align-items:center;padding:var(--s6) 0;border-bottom:1px solid var(--line)}
.srv-row--copy{grid-template-columns:auto 1fr}
.srv-row:first-child{padding-top:0}
.srv-row__idx{font:700 1.5rem var(--mono);color:var(--tel);font-variant-numeric:tabular-nums}
.srv-row__title{font:700 1.3rem/1.2 var(--sans);color:var(--ink)}
.srv-row__body{font:400 1rem/1.65 var(--sans);color:var(--ink-2);margin-top:8px;max-width:56ch}
.srv-row__media{min-width:0}
.agent-note{margin-top:var(--section)}
.agent-note code{color:var(--ink-2);background:var(--well);padding:1px 6px;font-size:.85em}

/* ==========================================================================
   TEARDOWNS (/work)
   ========================================================================== */
.td-list{display:flex;flex-direction:column;gap:var(--section);margin-top:var(--s8)}
.td{display:flex;flex-direction:column;gap:var(--s4)}
.td__name{font:800 clamp(1.5rem,2.4vw,2rem) var(--sans);color:var(--ink)}
.td__line{font:400 clamp(1.1rem,1.6vw,1.3rem)/1.5 var(--sans);color:var(--ink-2);max-width:60ch;margin-top:var(--s2)}
.td__visit{margin-top:var(--s2)}
.td__render{margin-top:var(--s2)}
.caps{list-style:none;display:flex;flex-wrap:wrap;gap:10px 24px;padding:var(--s3) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.caps li{font:400 .9rem var(--mono);color:var(--ink-2);position:relative;padding-left:16px}
.caps li::before{content:"+";position:absolute;left:0;color:var(--teal)}
.td__crops{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s4)}
.td__disc,.board__disc{font:400 .82rem/1.55 var(--sans);color:var(--ink-2);max-width:64ch}
.td__disc--strong{color:var(--ink)}
.td__disc-mark,.board__disc-mark{display:block;font:400 .68rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tel);margin-bottom:4px}

/* ==========================================================================
   THE 10-CARD BOARD — asymmetric typographic INDEX, NOT a tile wall (SN-1).
   No borders/cards on the entry — only the F4 frame on the capture + hairline row rules.
   ========================================================================== */
.board{margin-top:var(--s8);display:flex;flex-direction:column}
.board__tile{display:grid;grid-template-columns:minmax(0,1.15fr) 1fr;gap:clamp(20px,4vw,52px);align-items:center;padding:var(--section) 0;border-bottom:1px solid var(--line)}
.board__tile:first-child{padding-top:0}
.board__tile:nth-child(even){grid-template-columns:1fr minmax(0,1.15fr)}
.board__tile:nth-child(even) .board__frame{order:2}
.board__tile--s4{grid-template-columns:1fr}                 /* the two client builds run full-measure, larger */
.board__tile--s4 .board__frame{order:0!important}
.board__tile--s2{grid-template-columns:minmax(0,.85fr) 1fr}  /* concepts run smaller */
.board__frame{min-width:0}
.board__head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.board__entry{font:800 clamp(1.4rem,2.4vw,2rem) var(--sans);color:var(--ink)}
.board__badge{font:400 .68rem var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border:1px solid var(--line)}
.board__badge--concept{color:var(--tel)}
.board__badge--client{color:var(--teal);border-color:var(--teal-deep)}
.board__vertical{font:400 .8rem var(--mono);color:var(--tel);letter-spacing:.06em;margin-top:6px;text-transform:uppercase}
.board__desc{font:400 1rem/1.6 var(--sans);color:var(--ink-2);margin-top:var(--s3);max-width:52ch}
.board__disc{margin-top:var(--s3)}

/* ==========================================================================
   CHIPS (audit / industries) — no card container, hairline only
   ========================================================================== */
.chips{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:var(--line)}
.chips--stack{grid-template-columns:1fr}
.chip{background:var(--ground);padding:var(--s3) var(--s3);display:flex;flex-direction:column;gap:6px}
.chip__idx{font:700 .85rem var(--mono);color:var(--teal)}
.chip__t{font:700 1.05rem var(--sans);color:var(--ink)}
.chip__d{font:400 .9rem/1.5 var(--sans);color:var(--ink-2)}
.industries .chip{flex-direction:row;align-items:baseline;gap:10px}
.industries .chip__idx{color:var(--tel)}

/* ==========================================================================
   FAQ (schema-paired) — visible by default; JS collapses. Hairline baselines, no card.
   ========================================================================== */
.faq{margin-top:var(--s6);border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__h{margin:0}
.faq__q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;background:none;border:0;text-align:left;cursor:pointer;padding:var(--s4) 0;font:700 1.15rem/1.35 var(--sans);color:var(--ink)}
.faq__sign{font:400 1.5rem var(--mono);color:var(--teal);flex:none;transition:transform var(--dur) var(--ease)}
.faq__q[aria-expanded="false"] .faq__sign{transform:rotate(90deg)}
.faq__a{font:400 1rem/1.7 var(--sans);color:var(--ink-2);padding-bottom:var(--s4);max-width:70ch}
.faq__a p{margin-bottom:var(--s2)}
.faq__a strong{color:var(--ink)}
.faq__a code{color:var(--ink-2);background:var(--well);padding:1px 5px;font-size:.9em}

/* ==========================================================================
   PAGE HERO / PROSE / SPLIT / ARTICLE
   ========================================================================== */
.page-hero{padding-block:calc(var(--section) * .8) var(--s8)}
.page-hero h1{font:800 clamp(2.1rem,4.6vw,3.4rem)/1.05 var(--sans);letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.page-hero__lead{font:400 clamp(1.15rem,1.8vw,1.4rem)/1.5 var(--sans);color:var(--ink-2);max-width:62ch;margin-top:var(--s4)}
.breadcrumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font:400 .78rem var(--mono);color:var(--tel);padding-top:var(--s4)}
.breadcrumb a{color:var(--tel)}
.breadcrumb__sep{color:var(--line-lit)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}
.split--even{grid-template-columns:1fr 1fr}
.seo-hero{align-items:center}
.prose{max-width:68ch}
.prose h2{font:700 clamp(1.4rem,2.2vw,1.9rem)/1.2 var(--sans);margin:var(--s6) 0 var(--s3)}
.prose h2:first-child{margin-top:0}
.prose p{font:400 1.05rem/1.7 var(--sans);color:var(--ink-2);margin-bottom:var(--s3)}
.prose strong{color:var(--ink)}
.prose ol,.prose ul{color:var(--ink-2);padding-left:1.4em;margin-bottom:var(--s3);line-height:1.7}
.prose li{margin-bottom:10px}
.prose code{color:var(--ink-2);background:var(--well);padding:1px 5px;font-size:.9em}
.codeblock{position:relative;background:var(--well);border:1px solid var(--line);padding:20px;overflow-x:auto}
.codeblock pre{font:400 .85rem/1.7 var(--mono);color:var(--ink-2);white-space:pre}
.codeblock .tok{color:var(--teal)}
.copy-btn{position:absolute;top:10px;right:10px;background:var(--ground);border:1px solid var(--line);color:var(--ink-2);font:400 .72rem var(--mono);padding:5px 10px;cursor:pointer}
.copy-btn:hover{border-color:var(--teal);color:var(--ink)}
.takeaways{border-left:2px solid var(--teal);padding:var(--s2) 0 var(--s2) var(--s4);margin-bottom:var(--s6)}
.takeaways ul{list-style:none;padding:0}
.takeaways li{font:400 1rem/1.6 var(--sans);color:var(--ink);margin-bottom:10px;padding-left:16px;position:relative}
.takeaways li::before{content:"—";position:absolute;left:0;color:var(--teal)}
.sources{font-size:.9rem}
.author-card{border-top:1px solid var(--line);padding-top:var(--s3)}
.author-card__name{font:700 1.1rem var(--sans);color:var(--ink);margin-top:6px}
.author-card__bio{font:400 .9rem/1.55 var(--sans);color:var(--ink-2);margin-top:8px}
.article-hero .fig__frame{max-height:60vh;overflow:hidden}
.article-grid{grid-template-columns:1fr minmax(220px,300px);align-items:start}

/* ==========================================================================
   FORMS
   ========================================================================== */
.rform{max-width:520px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-field{margin-bottom:var(--s3)}
.form-field label{display:block;font:600 .85rem var(--sans);color:var(--ink);margin-bottom:8px}
.req{color:var(--teal)}
.form-field input,.form-field select,.form-field textarea{width:100%;background:var(--well);border:1px solid var(--line);color:var(--ink);font:400 1rem var(--sans);padding:13px 14px;min-height:48px}
.form-field textarea{min-height:110px;resize:vertical}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{outline:2px solid var(--teal);outline-offset:0;border-color:var(--teal)}
.form-field input::placeholder{color:var(--tel)}
.form-error{font:400 .8rem var(--mono);color:var(--ink);border-left:3px solid var(--oxblood);padding-left:10px;margin-top:6px;min-height:0}
.form-more summary{font:400 .9rem var(--mono);color:var(--teal);cursor:pointer;padding:8px 0}
.form-note{font:400 .8rem var(--mono);color:var(--tel);margin-top:var(--s3)}
.form-privacy{font:400 .8rem var(--mono);margin-top:8px}
.form-status{font:400 .9rem var(--sans);color:var(--ink);margin-top:var(--s3)}

/* ==========================================================================
   FOOTER — the curtain footer (fixed under; content slides up over it)
   ========================================================================== */
.site-footer{background:var(--ground);border-top:1px solid var(--line);padding-block:var(--s8) var(--s6)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--s6)}
.footer-nap{font:400 .9rem/1.6 var(--sans);color:var(--ink-2);margin-top:var(--s3)}
.footer-social{display:flex;gap:18px;margin-top:var(--s3)}
.footer-social a{font:400 .8rem var(--mono);color:var(--tel);display:inline-flex;align-items:center;min-height:48px;padding:0 6px;margin:0 -6px}
.site-footer h2{font:400 .75rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--tel);margin-bottom:var(--s3)}
.footer-nav{display:flex;flex-direction:column;gap:12px}
.footer-nav a{font:400 .95rem var(--sans);color:var(--ink-2)}
.footer-nav a:hover{color:var(--ink)}
.footer-contact{margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--line);font:400 .95rem var(--mono);color:var(--ink-2)}
.footer-legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:var(--s4);font:400 .78rem var(--mono);color:var(--tel)}
.footer-legal a{color:var(--tel)}

@media (min-width:721px){
  body{--curtain-h:0px}
  .curtain-host{position:relative;z-index:1;background:var(--ground)}
  .site-footer.is-curtain{position:fixed;left:0;right:0;bottom:0;z-index:0;width:100%}
}

/* ==========================================================================
   CTA BAND (the ask)
   ========================================================================== */
.ask__inner{max-width:820px}
.ask__sub{font:400 clamp(1.1rem,1.6vw,1.3rem)/1.5 var(--sans);color:var(--ink-2);max-width:56ch;margin-top:var(--s3)}
.cta-row{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:var(--s6)}
.ask__guarantee{font:400 .95rem/1.65 var(--sans);color:var(--ink-2);max-width:60ch;margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--line)}

/* ==========================================================================
   CALL BAR (mobile sticky click-to-call)
   ========================================================================== */
.call-bar{display:none}
.call-bar__call,.call-bar__book{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;font:700 .9rem var(--sans)}
.call-bar__call{background:var(--teal);color:var(--cta-ink);flex:1.4}
.call-bar__book{background:var(--well);color:var(--ink);flex:1;border-top:1px solid var(--line)}

/* ==========================================================================
   CONTEXTUAL CURSOR DOT (desktop only; mix-blend difference; NEVER a trail)
   ========================================================================== */
.cursor-dot{position:fixed;top:0;left:0;width:8px;height:8px;border-radius:50%;background:#fff;mix-blend-mode:difference;pointer-events:none;z-index:500;transform:translate(-50%,-50%);transition:width var(--dur) var(--ease),height var(--dur) var(--ease);will-change:transform}
.cursor-dot.is-link{width:34px;height:34px;background:var(--teal);mix-blend-mode:normal;opacity:.25}
.cursor-dot.is-grab{width:20px;height:20px}

/* ==========================================================================
   RESPONSIVE — derived by the declared rules (stack in source order; targets grow)
   ========================================================================== */
@media (max-width:900px){
  .split,.split--even,.ev,.board__tile,.board__tile:nth-child(even),.board__tile--s2,.srv-row,.article-grid,.footer-grid{grid-template-columns:1fr}
  .srv-row{grid-template-columns:auto 1fr}
  .method__item{grid-template-columns:1fr}
  .ev:nth-child(even) .ev__media,.board__tile:nth-child(even) .board__frame{order:0}
  .board__frame{order:0!important}
  .footer-grid{gap:var(--s6)}
}
@media (max-width:720px){
  .nav-toggle{display:inline-flex}
  .nav{position:fixed;inset:66px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;background:var(--ground);border-bottom:1px solid var(--line);padding:8px var(--edge) 20px;transform:translateY(-140%);transition:transform var(--dur) var(--ease);z-index:99}
  .nav.is-open{transform:translateY(0)}
  .nav a{padding:14px 0;font-size:1.05rem;border-bottom:1px solid var(--line)}
  .header-cta{margin:12px 0 0;text-align:center}
  .call-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:120}
  body{--callbar-h:52px;padding-bottom:52px}
  .srv-row{grid-template-columns:1fr}
  .srv-row__media{max-width:420px}
  .measure{flex-direction:column}
  .measure__btn{padding:16px;min-height:52px}
  .tick-label{font-size:34px}
  .cursor-dot{display:none}
}

/* ==========================================================================
   THE PITCH FILM (home §2b) — pinned scroll film through CSS-3D space.
   Progressive enhancement per rule 15 / P1.22: the DEFAULT below is a normal
   stacked, fully visible section (no JS, mobile, reduced-motion, save-data).
   film.js adds .film--on ONLY on a capable desktop → 570vh track, sticky
   100vh stage, frames pushed back in translateZ, one damped world transform.
   GRIDLESS: frames are floating typography — no card, no border. The canvas
   reprises the hero dial's bezel/tick language (decorative, aria-hidden).
   ========================================================================== */
.film__track{position:relative}
.film__stage{position:relative}
.film__canvas{display:none}
.film__world{margin-top:var(--s8)}
.film__frame{max-width:640px;margin-inline:auto;text-align:center;padding-block:var(--s8)}
.film__mark{font:400 .75rem var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--tel);margin-bottom:var(--s3)}
.film__h{font:800 clamp(1.9rem,3.4vw,3rem)/1.1 var(--sans);letter-spacing:-.015em;color:var(--ink)}
.film__h em{font-style:italic;color:var(--teal);font-weight:800}
.film__frame p:not(.film__mark){font:400 1.05rem/1.65 var(--sans);color:var(--ink-2);margin-top:var(--s3);max-width:52ch;margin-inline:auto}
.film__cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:var(--s4)}
.film__dots,.film__readout,.film__end{display:none}

.film--on .film__track{height:570vh}
.film--on .film__stage{position:sticky;top:0;height:100vh;overflow:hidden;perspective:1100px;perspective-origin:50% 50%}
@supports (height:1svh){.film--on .film__track{height:570svh}.film--on .film__stage{height:100svh}}
.film--on .film__canvas{display:block;position:absolute;inset:0;width:100%;height:100%}
.film--on .film__world{margin:0;position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.film--on .film__frame{position:absolute;left:50%;top:50%;width:min(640px,80vw);padding-block:0;opacity:0;will-change:transform,opacity}
.film--on .film__dots{display:flex;position:absolute;right:26px;top:50%;transform:translateY(-50%);flex-direction:column;gap:12px}
.film__dots span{width:6px;height:6px;border-radius:50%;background:var(--line-lit);opacity:.35;transition:background var(--dur) var(--ease),opacity var(--dur) var(--ease)}
.film__dots span.on{background:var(--teal);opacity:1}
.film--on .film__readout{display:block;position:absolute;left:var(--edge);bottom:18px;font:400 .72rem/1.7 var(--mono);color:var(--tel)}
@media (max-width:720px){.film--on .film__readout{display:none}.film--on .film__frame{width:min(640px,84vw)}}
.film__readout b{color:var(--teal);font-weight:400}
.film--on .film__end{display:flex;position:absolute;inset:0;flex-direction:column;gap:10px;align-items:center;justify-content:center;text-align:center;opacity:0;pointer-events:none}
.film__end p{font:800 clamp(1.4rem,2.4vw,2rem) var(--sans);color:var(--ink)}
.film__end span{font:400 .72rem var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--tel)}

/* ==========================================================================
   MOTION / PRINT resilience (rule 15)
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js .reveal{opacity:1;transform:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}
@media print{
  .site-header,.call-bar,.cursor-dot,.panel,.measure{display:none!important}
  .reveal,.js .reveal{opacity:1!important;transform:none!important}
  body{background:#fff;color:#000}
}

/* Mobile tap-target repair (2026-08-27 live-device test): every standalone link/button >=44px.
   Inline arrow links get padded hit areas without moving their visual baseline. */
a.link, a[class*="go"], .inline-link, a[class*="more"], a[class*="arrow"] {
  display: inline-flex; align-items: center; min-height: 44px;
  padding-block: 8px; margin-block: -8px;
}

/* Mobile tap-target sweep 2 (2026-08-27): footer columns + remaining standalone links.
   Padded hit areas with negative margins — visual rhythm unchanged, touch area >=44px. */
footer a, .curtain a, [class*="footer"] a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding-block: 10px; margin-block: -10px;
}
.btn--ghost, a[href="#dialWrap"] {
  display: inline-flex; align-items: center; min-height: 44px;
}

/* ==========================================================================
   THE CALIBRATION DIAL (cal-) — transplanted from the live site's hero
   (Avi, 2026-08-27), restyled to v3.1: monochrome instrument, teal
   interaction-only, square hairline frame, no grain (S2 well exclusion).
   The 2.5D comes from the perspective grid plane. Touch-first: no
   touch-action trap — swiping over it scrolls the page.
   ========================================================================== */
.cal-wrap{display:grid;gap:var(--s3);justify-items:center;margin-top:var(--s6)}
.cal-system{position:relative;width:min(100%,640px);aspect-ratio:1;--cal-angle:-51deg;--cal-x:29%;--cal-y:29%;
  border:1px solid var(--line);background:
    radial-gradient(circle at var(--cal-x) var(--cal-y),rgba(25,194,216,.14),transparent 24%),
    radial-gradient(circle at center,rgba(25,194,216,.06),transparent 34%),
    var(--well);
  overflow:hidden;transition:background 520ms var(--ease)}
.cal-system::before{content:"";position:absolute;inset:14px;border:1px solid var(--line);pointer-events:none}
.cal-system::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;background:
  linear-gradient(90deg,transparent 0 49.9%,rgba(25,194,216,.08) 49.9% 50.1%,transparent 50.1%),
  linear-gradient(180deg,transparent 0 49.9%,rgba(242,239,234,.06) 49.9% 50.1%,transparent 50.1%)}
.cal-status{position:absolute;top:18px;right:20px;left:20px;z-index:4;display:flex;justify-content:space-between;gap:12px;
  font:700 .58rem var(--mono);letter-spacing:.16em;color:var(--tel);text-transform:uppercase}
.cal-status span{display:inline-flex;gap:8px;align-items:center;padding:6px 9px;background:rgba(18,17,16,.6);border:1px solid var(--line)}
.cal-status i{width:6px;height:6px;background:var(--teal);border-radius:50%;box-shadow:0 0 12px rgba(25,194,216,.6)}
.cal-status__cur{color:var(--ink-2)}
.cal-grid{position:absolute;inset:0;background-image:
  linear-gradient(rgba(242,239,234,.05) 1px,transparent 1px),
  linear-gradient(90deg,rgba(242,239,234,.05) 1px,transparent 1px);
  background-size:42px 42px;transform:perspective(520px) rotateX(56deg) translateY(80px) scale(1.2);transform-origin:bottom}
.cal-ring{position:absolute;inset:15%;border:1px solid rgba(242,239,234,.14);border-radius:50%}
.cal-ring--two{inset:25%;border-style:dashed;border-color:rgba(25,194,216,.36);transform:rotate(var(--cal-angle));transition:transform 620ms var(--ease)}
.cal-ring--three{inset:35%;border-color:rgba(110,131,136,.3)}
.cal-sweep{position:absolute;inset:19%;border-radius:50%;
  background:conic-gradient(from -18deg,transparent 0deg,rgba(25,194,216,.07) 4deg,rgba(25,194,216,.5) 18deg,rgba(25,194,216,.16) 34deg,transparent 46deg,transparent 360deg);
  -webkit-mask-image:radial-gradient(circle,transparent 55%,#000 56%);mask-image:radial-gradient(circle,transparent 55%,#000 56%);
  transform:rotate(var(--cal-angle));transition:transform 620ms var(--ease)}
.cal-needle{position:absolute;bottom:50%;left:50%;z-index:2;width:2px;height:31%;pointer-events:none;
  background:linear-gradient(to top,rgba(25,194,216,.1),rgba(25,194,216,.9));
  transform:translateX(-50%) rotate(var(--cal-angle));transform-origin:bottom center;transition:transform 620ms var(--ease)}
.cal-needle::after{content:"";position:absolute;top:-6px;left:50%;width:10px;height:10px;background:var(--teal);
  border:2px solid var(--ground);border-radius:50%;box-shadow:0 0 20px rgba(25,194,216,.7);transform:translateX(-50%)}
.cal-glow{position:absolute;left:var(--cal-x);top:var(--cal-y);z-index:2;width:110px;height:110px;pointer-events:none;
  background:radial-gradient(circle,rgba(25,194,216,.26),rgba(25,194,216,.06) 44%,transparent 72%);
  border-radius:50%;transform:translate(-50%,-50%);transition:left 620ms var(--ease),top 620ms var(--ease)}
.cal-core{position:absolute;inset:38%;z-index:3;display:grid;place-items:center;align-content:center;text-align:center;border-radius:50%;
  background:radial-gradient(circle at 50% 34%,rgba(25,194,216,.16),transparent 42%),rgba(18,17,16,.86);
  border:1px solid rgba(25,194,216,.32)}
.cal-core span{font:700 .55rem var(--mono);letter-spacing:.18em;color:var(--tel);text-transform:uppercase}
.cal-core strong{max-width:150px;color:var(--ink);font:800 clamp(.92rem,1.8vw,1.15rem)/1.1 var(--sans);letter-spacing:-.01em}
.cal-point{position:absolute;z-index:5;display:inline-flex;align-items:center;padding:8px 11px;
  font:700 .68rem var(--mono);letter-spacing:.04em;color:var(--ink-2);white-space:nowrap;
  background:rgba(18,17,16,.72);border:1px solid var(--line);cursor:pointer;
  transform:translate(-50%,-50%);transition:color 200ms ease,border-color 200ms ease,background 200ms ease,opacity 200ms ease}
.cal-point::after{content:"";position:absolute;inset:-14px}  /* 44px+ touch target without visual bloat */
.cal-point::before{content:"";display:inline-block;flex:0 0 auto;width:5px;height:5px;margin-right:8px;background:var(--tel);border-radius:50%;transition:background 200ms ease,box-shadow 200ms ease}
.cal-system.has-active .cal-point:not(.is-active){opacity:.5}
.cal-point:hover,.cal-point:focus-visible,.cal-point.is-active{color:var(--ink);background:rgba(25,194,216,.1);border-color:rgba(25,194,216,.5);opacity:1!important}
.cal-point:hover::before,.cal-point:focus-visible::before,.cal-point.is-active::before{background:var(--teal);box-shadow:0 0 12px rgba(25,194,216,.7)}
.cal-anchor{position:absolute;z-index:2;width:12px;height:12px;pointer-events:none;background:rgba(18,17,16,.85);
  border:1px solid rgba(242,239,234,.16);border-radius:50%;transform:translate(-50%,-50%);transition:background 220ms ease,border-color 220ms ease,box-shadow 220ms ease}
.cal-anchor.is-active{background:var(--teal);border-color:rgba(25,194,216,.9);box-shadow:0 0 18px rgba(25,194,216,.6)}
.cal-a1{top:30.6%;left:25.8%}.cal-a2{top:30.6%;left:74.2%}.cal-a3{top:57%;left:19.8%}.cal-a4{top:57%;left:80.2%}
.cal-a5{top:77.9%;left:36.6%}.cal-a6{top:77.9%;left:63.4%}.cal-a7{top:19%;left:50%}
.cal-p1{top:26.3%;left:20.3%}.cal-p2{top:26.3%;left:79.7%}.cal-p3{top:58.6%;left:13%}.cal-p4{top:58.6%;left:87%}
.cal-p5{top:84.2%;left:33.5%}.cal-p6{top:84.2%;left:66.5%}.cal-p7{top:12%;left:50%}
.cal-info{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;width:min(100%,640px);min-height:64px;
  padding:12px 16px;background:var(--well);border:1px solid var(--line)}
.cal-info__mark{font:700 .56rem var(--mono);letter-spacing:.16em;color:var(--teal)}
.cal-info p{font:400 .92rem/1.5 var(--sans);color:var(--ink-2);margin:0}
@media (max-width:760px){
  .cal-point{font-size:.6rem;padding:7px 9px}
  .cal-p3{left:15%}.cal-p4{left:85%}
  .cal-info{grid-template-columns:1fr;gap:6px}
  .cal-core strong{max-width:110px;font-size:.85rem}
}
@media (prefers-reduced-motion:reduce){
  .cal-ring--two,.cal-sweep,.cal-needle,.cal-glow{transition:none}
}