@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/phone/fonts/IBMPlexMono-normal-400.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/phone/fonts/IBMPlexMono-normal-500.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(/phone/fonts/IBMPlexMono-normal-600.woff2) format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-stretch:75% 100%;font-display:swap;src:url(/phone/fonts/InstrumentSans-normal-400-700.woff2) format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:italic;font-weight:400 700;font-stretch:75% 100%;font-display:swap;src:url(/phone/fonts/InstrumentSans-italic-400-700.woff2) format('woff2')}
/* Centinelo Phone landing, "Vigilia". Colors are the Vigilia tokens (premium/design/TOKENS.md),
   dark values on :root, light values re-declared on .paper sections. */
*,*::before,*::after{box-sizing:border-box}
:root{
  color-scheme:dark;
  --canvas:#070A08;
  --bg-0:#0C110E;
  --bg-1:#121915;
  --bg-2:#171F1A;
  --bg-3:#1D2620;
  --text-1:#EDF1EC;
  --text-2:#A9B4AA;
  --text-3:#8A958B; /* landing: nudged from #717C72 so small text on canvas stays AA */
  --border-1:#242E27;
  --border-2:#2F3B32;
  --amber:#E8A33D;
  --amber-fill:#E8A33D;
  --amber-soft:#27200F;
  --amber-glow:rgba(232,163,61,.22);
  --on-amber:#211807;
  --st-idle:#57C28D;
  --st-idle-fill:#2FA36B;
  --on-idle:#0A140D;
  --st-ring:var(--amber);
  --st-busy:#E4705C;
  --on-busy:#200B06;
  --st-held:#6BB8DC;
  --st-dnd:#93A099;
  --st-off:#3A463D;
  --voice-you:#C9D3CA;
  --voice-caller:#55625A;
  --edge:inset 0 1px 0 rgba(255,255,255,.05);
  --shadow-1:0 1px 2px rgba(0,0,0,.35);
  --shadow-2:0 1px 2px rgba(0,0,0,.30),0 8px 20px -6px rgba(0,0,0,.50);
  --shadow-win:0 0 0 1px rgba(0,0,0,.55),0 6px 16px -4px rgba(0,0,0,.50),0 32px 72px -20px rgba(0,0,0,.65);
  --r-1:6px;--r-2:10px;--r-3:14px;--r-pill:999px;
  --t-fast:120ms;--t-med:180ms;--t-slow:260ms;
  --ease:cubic-bezier(.2,0,0,1);
  --font-ui:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SF Mono","Cascadia Code",Consolas,monospace;
  --gutter:clamp(16px,4vw,40px);
}
.paper{
  color-scheme:light;
  --canvas:#E9E7E0;
  --bg-0:#F5F4EF;
  --bg-1:#FFFFFF;
  --bg-2:#EFEDE5;
  --bg-3:#E6E3D9;
  --text-1:#1C221E;
  --text-2:#4E574F;
  --text-3:#646D65;
  --border-1:#DCD9CE;
  --border-2:#C9C5B8;
  --amber:#8F5C00;
  --amber-fill:#E7A233;
  --amber-soft:#F7E9CC;
  --amber-glow:rgba(231,162,51,.30);
  --st-idle:#1E7A4F;
  --st-idle-fill:#1F8354;
  --on-idle:#FFFFFF;
  --st-busy:#BE3E2C;
  --st-held:#166F96;
  --st-dnd:#5C6660;
  --st-off:#ABA79A;
  --edge:inset 0 1px 0 rgba(255,255,255,.65);
  --shadow-1:0 1px 2px rgba(28,34,30,.07);
  --shadow-2:0 1px 2px rgba(28,34,30,.05),0 8px 20px -6px rgba(28,34,30,.15);
  background:var(--bg-0);
  color:var(--text-1);
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:72px}
body{margin:0;background:var(--canvas);color:var(--text-1);font-family:var(--font-ui);font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg{display:block;max-width:100%}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:2px solid var(--amber-fill);outline-offset:2px;border-radius:4px}
[hidden]{display:none!important}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--amber-fill);color:var(--on-amber);padding:10px 14px;border-radius:var(--r-2);font-weight:600;text-decoration:none}
.skip:focus{top:12px}
.wrap{width:100%;max-width:1240px;margin-inline:auto;padding-inline:var(--gutter)}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.ic{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* plates: the engraved whisper layer */
.plate{font-family:var(--font-mono);font-size:11px;line-height:1.3;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.kicker{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--text-2);margin-bottom:20px}
.kicker-lamp{width:8px;height:8px;border-radius:50%;border:1.5px solid var(--text-3)}
.display{font-size:clamp(44px,7vw,96px);line-height:.96;letter-spacing:-.035em;font-weight:600;font-stretch:88%;text-wrap:balance}
.h2{font-size:clamp(34px,5.2vw,68px);line-height:1;letter-spacing:-.03em;font-weight:600;font-stretch:90%;text-wrap:balance}
.lede{font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:var(--text-2);max-width:60ch;text-wrap:pretty}
h3{font-size:19px;line-height:1.3;font-weight:600;letter-spacing:-.01em}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:44px;padding:0 18px;border-radius:var(--r-2);border:1px solid transparent;
  font-weight:600;font-size:15px;text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.btn:active{transform:translateY(1px)}
.btn-lg{height:52px;padding:0 22px;font-size:16px}
.btn-sm{height:36px;padding:0 13px;font-size:14px}
.btn-amber{background:var(--amber-fill);color:var(--on-amber);box-shadow:inset 0 1px 0 rgba(255,255,255,.28)}
.btn-amber:hover{background:#F0B253}
.btn-ghost{background:transparent;color:var(--text-1);border-color:var(--border-2)}
.btn-ghost:hover{background:var(--bg-3)}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* state shapes: shape + color + word, never color alone */
.shape{position:relative;display:inline-block;width:10px;height:10px;flex:none;border-radius:50%}
.s-idle{border:1.7px solid var(--st-idle)}
.s-busy{background:var(--st-busy)}
.s-ring{background:var(--amber-fill)}
.s-ring::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1.5px solid var(--amber-fill);animation:ringPulse 1.2s var(--ease) infinite}
.s-held{border-radius:1px;background:linear-gradient(90deg,var(--st-held) 0 35%,transparent 35% 65%,var(--st-held) 65%)}
.s-dnd{border:1.7px solid var(--st-dnd)}
.s-dnd::after{content:"";position:absolute;left:1px;right:1px;top:50%;height:1.7px;margin-top:-.85px;background:var(--st-dnd)}
.s-off{border:1.7px dotted var(--st-off)}
@keyframes ringPulse{from{transform:scale(1);opacity:1}to{transform:scale(2.1);opacity:0}}
@keyframes breathe{0%,100%{box-shadow:0 0 2px 0 var(--amber-glow)}50%{box-shadow:0 0 6px 2px var(--amber-glow)}}

/* ---------- NAV ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(7,10,8,.72);backdrop-filter:saturate(1.2) blur(12px);-webkit-backdrop-filter:saturate(1.2) blur(12px);border-bottom:1px solid transparent;transition:border-color var(--t-med) var(--ease),background var(--t-med) var(--ease)}
.nav.scrolled{border-bottom-color:var(--border-1);background:rgba(7,10,8,.88)}
.nav-in{display:flex;align-items:center;gap:24px;height:64px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.brand-mark,.win-mark{position:relative;display:inline-block;width:26px;height:26px;color:var(--text-1)}
.brand-mark svg,.win-mark svg{width:100%;height:100%}
.lamp{position:absolute;left:50%;top:50%;width:26%;height:26%;margin:-13% 0 0 -13%;border-radius:50%;background:var(--amber-fill)}
.brand .lamp{animation:breathe 4s ease-in-out infinite}
.brand-name{font-weight:600;font-size:17px;letter-spacing:-.01em}
.brand-name b{font-weight:400;color:var(--text-2)}
.nav-links{display:flex;gap:4px;margin-left:auto}
.nav-links a{padding:8px 12px;border-radius:var(--r-1);text-decoration:none;color:var(--text-2);font-size:15px;transition:color var(--t-fast),background var(--t-fast)}
.nav-links a:hover{color:var(--text-1);background:var(--bg-2)}
.nav-end{display:flex;align-items:center;gap:14px}
.lang{display:inline-flex;border:1px solid var(--border-2);border-radius:var(--r-1);overflow:hidden}
.lang a{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-decoration:none;padding:6px 9px;color:var(--text-2);min-width:36px;text-align:center}
.lang a[aria-current]{background:var(--bg-3);color:var(--text-1)}
.lang a:hover{color:var(--text-1)}
.nav-dl-short{display:none}
.nav-links a,.nav-dl-long,.nav-dl-short,.lang a{white-space:nowrap}
@media (max-width:1100px){.nav-links{display:none}.nav-end{margin-left:auto}}
@media (max-width:520px){.nav-dl-long{display:none}.nav-dl-short{display:inline}.brand-name b{display:none}.nav-end{gap:10px}}
/* four languages: the switcher tightens on phones so brand, switcher and the access button share one row */
@media (max-width:520px){.lang a{min-width:0;padding:6px 7px;font-size:11px;letter-spacing:.04em}.nav-in{gap:12px}}
@media (max-width:400px){.nav-end .btn .ic{display:none}}
@media (max-width:360px){.brand-name{display:none}}

/* ---------- WINDOW MOCK ---------- */
.win{background:var(--bg-0);border:1px solid var(--border-1);border-radius:var(--r-3);box-shadow:var(--shadow-win),var(--edge);overflow:hidden}
.win-bar{display:flex;align-items:center;gap:10px;height:40px;padding:0 12px;border-bottom:1px solid var(--border-1);background:var(--bg-0)}
.win-mark{width:18px;height:18px}
.win-title{font-size:13px;font-weight:600;color:var(--text-2)}
.win-meta{margin-left:auto}
.c-bar{position:relative;height:44px}
.c-bar .win-title{color:var(--text-1);font-size:14px}
.c-bar-title{position:absolute;left:50%;transform:translateX(-50%);font-size:13px;color:var(--text-3)}
.win-ctl{margin-left:auto;display:flex;gap:14px}
.win-ctl i{width:10px;height:10px;border-top:1.5px solid var(--text-3)}
.win-ctl i:nth-child(1){margin-top:5px}
.win-ctl i:nth-child(2){border:1.5px solid var(--text-3)}
.win-ctl i:nth-child(3){border:0;position:relative}
.win-ctl i:nth-child(3)::before,.win-ctl i:nth-child(3)::after{content:"";position:absolute;left:4px;top:-1px;height:12px;width:1.5px;background:var(--text-3);transform:rotate(45deg)}
.win-ctl i:nth-child(3)::after{transform:rotate(-45deg)}

/* ---------- HERO ---------- */
/* The window is sized from the viewport height so the whole app always fits above the fold, and grows
   past the app's real 380px (up to 500px) where there is room, so its 9-11px text stays readable.
   --win-h is the height of the 380x680 app window; the width follows the aspect ratio. Keep the img
   `sizes` attribute in index.html in step with this formula. */
.hero{--win-h:min(894px,calc(100vh - 150px),68vw);--win-h:min(894px,calc(100svh - 150px),68vw);
  position:relative;padding:clamp(24px,5svh,72px) 0 clamp(64px,10vw,140px);overflow:hidden}
.field{position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle,rgba(237,241,236,.085) 1.1px,transparent 1.6px);background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 75% 70% at 70% 40%,#000 10%,transparent 75%);mask-image:radial-gradient(ellipse 75% 70% at 70% 40%,#000 10%,transparent 75%)}
.hero-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:clamp(40px,6vw,104px)}
.hero-copy{grid-column:1;grid-row:1;align-self:end}
.hero-more{grid-column:1;grid-row:2;align-self:start}
.hero-stage{grid-column:2;grid-row:1/3;align-self:center}
.hero .display{font-size:clamp(44px,min(7vw,11svh),96px)}
:lang(es) .hero .display{font-size:clamp(40px,min(6vw,9.6svh),84px)}
.hero-more .lede{margin-top:clamp(20px,3.4svh,28px)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,4.2svh,36px)}
.hero-plate{margin-top:clamp(20px,3.4svh,28px);display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.sep{width:3px;height:3px;border-radius:50%;background:var(--text-3);display:inline-block}
.hero-stage{position:relative;display:flex;flex-direction:column;align-items:center}
.halo{position:absolute;left:50%;top:44%;width:min(620px,150%);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(232,163,61,.26) 0%,rgba(232,163,61,.10) 30%,rgba(232,163,61,0) 62%);
  opacity:0;transition:opacity 900ms var(--ease),transform 900ms var(--ease);pointer-events:none}
.hero[data-state="call"] .halo,.hero[data-state="idle"] .halo{opacity:0;transform:translate(-50%,-50%) scale(.7)}
.hero[data-state="ringing"] .halo{opacity:1;animation:haloBreath 2.4s ease-in-out infinite}
@keyframes haloBreath{0%,100%{opacity:.75}50%{opacity:1}}
/* a neutral pool of light under the window: it lifts the dark app off the dark page without
   adding a color. Amber stays with the halo, which only shows while a call is ringing. */
.hero-stage::before{content:"";position:absolute;left:50%;top:46%;width:calc(var(--win-h) * 1.25);height:calc(var(--win-h) * 1.05);
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(237,241,236,.075),rgba(237,241,236,.03) 55%,rgba(237,241,236,0))}

/* real app window: the screenshot carries the app's own titlebar, the frame only adds depth */
.frame{position:relative;border-radius:12px;overflow:hidden;background:#0C110E;
  box-shadow:0 0 0 1px rgba(255,255,255,.07),0 0 0 1px rgba(0,0,0,.6),0 2px 4px rgba(0,0,0,.35),0 24px 60px -18px rgba(0,0,0,.7)}
.frame .shot,.frame .shot img{display:block;width:100%;height:auto}
.paper .frame{background:#F5F4EF;box-shadow:0 0 0 1px rgba(28,34,30,.10),0 2px 4px rgba(28,34,30,.06),0 24px 56px -22px rgba(28,34,30,.28)}
.appwin{position:relative;display:grid;width:min(calc(var(--win-h) * 380 / 680),100%);border-radius:12px;overflow:hidden;background:#0C110E;
  box-shadow:0 0 0 1px rgba(237,241,236,.16),0 0 0 2px rgba(0,0,0,.55),0 2px 4px rgba(0,0,0,.4),0 18px 36px -10px rgba(0,0,0,.7),0 56px 110px -28px rgba(0,0,0,.9)}
/* the window's own lit edge, drawn over the screenshot so it survives every screen */
.appwin::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(237,241,236,.10),inset 0 0 0 1px rgba(237,241,236,.04)}
.appwin:focus{outline:none}
.appwin .scr{grid-area:1/1;opacity:0;transition:opacity 420ms var(--ease)}
.appwin .scr img{display:block;width:100%;height:auto}
.appwin[data-state="ringing"] .scr-ring,.appwin[data-state="call"] .scr-call,.appwin[data-state="idle"] .scr-idle{opacity:1}
/* live call timer: four digit cells laid exactly over the timer in the in-call screenshot.
   The sprite holds 0-9 for each cell, cut from the app's own timer element by the same capture that
   made incall.png (premium/.claude/reports/hero-phone/recapture); geometry = timer-geometry@3x.json / 1140x2040. */
.tick{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 420ms var(--ease)}
.appwin[data-state="call"] .tick.on{opacity:1}
.tick i{position:absolute;top:39.4608%;width:6.5789%;height:7.1078%;--d:0;
  background:url(/phone/assets/shots/timer-digits.webp) no-repeat;background-size:400% 1000%;
  background-position:calc(var(--p) * 100% / 3) calc(var(--d) * 100% / 9)}
.tick i:nth-child(1){left:33.5965%}
.tick i:nth-child(2){left:40.1754%}
.tick i:nth-child(3){left:53.2456%}
.tick i:nth-child(4){left:59.8246%}
.hot{position:absolute;top:90.3%;height:7.2%;padding:0;border:0;border-radius:8px;background:transparent;cursor:pointer;transition:background var(--t-fast)}
.hot:hover{background:rgba(255,255,255,.08)}
.hot:active{background:rgba(0,0,0,.12)}
.hot:focus-visible{outline:2px solid var(--text-1);outline-offset:3px;border-radius:8px}
.hot-decline{left:4.2%;width:44.3%}
.hot-answer{left:51.3%;width:44.3%}
.hot-end{left:4.2%;width:91.4%}
.hot-answer::after{content:"";position:absolute;inset:-4px;border-radius:11px;border:2px solid rgba(87,194,141,.7);animation:answerHint 1.8s var(--ease) infinite;pointer-events:none}
@keyframes answerHint{0%{opacity:.9;transform:scale(.98)}100%{opacity:0;transform:scale(1.06)}}
.stage-caption{position:relative;margin-top:18px;max-width:min(40ch,calc(var(--win-h) * 380 / 680 + 40px));min-height:3em;font-size:14.5px;line-height:1.5;color:var(--text-2);text-align:center;text-wrap:balance}
.stage-caption span{display:none}
.hero[data-cap="idle"] [data-cap="idle"],.hero[data-cap="ring"] [data-cap="ring"],.hero[data-cap="call"] [data-cap="call"],.hero[data-cap="ended"] [data-cap="ended"]{display:inline}
.hero[data-cap="ring"] [data-cap="ring"]{color:var(--amber)}

@media (max-width:900px){
  .hero{--win-h:max(440px,min(680px,calc(100vh - 330px)));--win-h:max(440px,min(680px,calc(100svh - 330px)));padding-top:clamp(20px,4vw,40px)}
  .hero-in{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .hero-copy,.hero-more,.hero-stage{grid-column:1;grid-row:auto}
  .hero .display,:lang(es) .hero .display{font-size:clamp(38px,9.6vw,72px)}
  .hero-stage{margin-top:clamp(24px,5vw,40px)}
  .hero-more{margin-top:28px}
  .hero-more .lede{margin-top:0}
}

/* ---------- MANIFESTO ---------- */
.manifesto{padding:clamp(80px,14vw,200px) 0;background:var(--canvas)}
.kick-center{text-align:center;margin-bottom:28px}
.words{max-width:22ch;margin-inline:auto;text-align:center;font-size:clamp(30px,4.6vw,62px);line-height:1.12;letter-spacing:-.025em;font-weight:500;font-stretch:92%;text-wrap:balance}
.words em{font-style:normal}
.js .words .w{opacity:.22;transition:opacity 200ms linear}
.js .words .w.lit{opacity:1}
.words em .w.lit{color:var(--amber);text-shadow:0 0 28px rgba(232,163,61,.35)}

/* ---------- BOARD ---------- */
.board-sec{background:var(--bg-0);border-top:1px solid var(--border-1);border-bottom:1px solid var(--border-1)}
.board-pin{min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:clamp(56px,8vw,96px) 0}
.board-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,72px);align-items:center}
.board-in .lede{margin-top:22px}
.board{display:grid;grid-template-columns:repeat(20,minmax(0,1fr));gap:5px}
.lampcell{aspect-ratio:1;border-radius:5px;background:var(--bg-1);border:1px solid var(--border-1);display:grid;place-items:center;transition:background 400ms var(--ease),border-color 400ms var(--ease)}
.lampcell .shape{width:8px;height:8px;transition:opacity 300ms}
.lampcell.ring{border-color:var(--amber-fill);background:var(--amber-soft);box-shadow:0 0 18px 2px var(--amber-glow)}
.board-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;margin-top:22px}
.legend{display:flex;flex-wrap:wrap;gap:8px 18px}
.legend li{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--text-2)}
.legend b{font-weight:500;color:var(--text-1);font-size:13px;min-width:2ch}
.board-callout{color:var(--amber);opacity:0;transform:translateY(4px);transition:opacity var(--t-slow),transform var(--t-slow)}
.board-callout.on{opacity:1;transform:none}
@media (max-width:1000px){
  .board-in{grid-template-columns:minmax(0,1fr)}
  .board-pin{min-height:0}
}
.board-sec.pinned{height:280vh}
.board-sec.pinned .board-pin{position:sticky;top:0;height:100vh;height:100svh;min-height:0;padding:84px 0 24px}
@media (max-width:1000px){.board-sec.pinned .board-pin{align-items:flex-start;padding-top:88px}}
@media (max-width:640px){
  .board{gap:2px}
  .lampcell{border-radius:3px}
  .lampcell .shape{width:6px;height:6px}
  .lampcell .s-idle,.lampcell .s-dnd,.lampcell .s-off{border-width:1.3px}
  .lampcell.ring{box-shadow:0 0 10px 1px var(--amber-glow)}
  .board-sec .h2{font-size:32px}
  .board-sec .lede{font-size:16px;margin-top:14px}
  .legend{gap:6px 14px}
  .legend li{font-size:13px}
}

/* ---------- SECTIONS ---------- */
.sec{padding:clamp(80px,12vw,168px) 0;position:relative}
.sec-head{margin-bottom:clamp(36px,5vw,64px)}
.sec-head .lede{margin-top:22px}
.sec-head.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px clamp(24px,5vw,80px);align-items:end}
.sec-head.split .lede{margin-top:0}
@media (max-width:900px){.sec-head.split{grid-template-columns:minmax(0,1fr)}}

/* reveals: only hidden when JS is running and motion is allowed */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity 700ms var(--ease),transform 700ms var(--ease)}
.js .reveal.in{opacity:1;transform:none}

/* ---------- CONSOLE ---------- */
.console-sec{background:var(--canvas)}
.console-shot{max-width:1160px;margin:0 auto}
.frame-wide{border-radius:14px}
.pan{position:relative}
.pan-hint{display:none;margin-top:12px;text-align:center}
@media (max-width:700px){
  .frame-wide{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
  .frame-wide::-webkit-scrollbar{display:none}
  .pan{width:780px}
  .pan-hint{display:block}
}
.pin{position:absolute;display:grid;place-items:center;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;background:var(--text-1);color:var(--bg-0);font:600 12px/1 var(--font-mono);box-shadow:0 0 0 3px rgba(12,17,14,.85),0 4px 10px rgba(0,0,0,.5)}
.console-shot figcaption{margin-top:22px}
.pins{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 24px}
.pins li{display:flex;gap:12px;font-size:15px;line-height:1.45;color:var(--text-2)}
.pins b,.rec-pair figcaption b{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--text-1);color:var(--bg-0);font-size:11.5px;font-weight:600;margin-top:1px}
.shot-note{margin-top:18px;text-align:center}
.try-head{max-width:1120px;margin:clamp(64px,8vw,112px) auto 22px;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 24px}
.try-head h3{font-size:22px}
.try-head p{color:var(--text-2);font-size:16px;max-width:52ch}
@media (max-width:900px){.pins{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.pins{grid-template-columns:minmax(0,1fr)}}

.console{max-width:1120px;margin-inline:auto}
.console-body{display:grid;grid-template-columns:280px minmax(0,1fr);min-height:460px}
.c-side{padding:16px;border-right:1px solid var(--border-1);background:var(--bg-0);display:flex;flex-direction:column;gap:10px;min-width:0}
.c-label{display:flex;align-items:center;gap:8px;margin-top:8px}
.c-label:first-child{margin-top:0}
.c-label b{font-weight:500;color:var(--text-2)}
.active{min-height:98px}
.call-card{position:relative;display:block;width:100%;text-align:left;padding:12px 12px 12px 18px;border-radius:var(--r-2);background:var(--bg-1);border:1px dashed var(--border-2);box-shadow:var(--edge),var(--shadow-1);cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.call-card::before{content:"";position:absolute;left:6px;top:10px;bottom:10px;width:3px;border-radius:2px;background:var(--st-busy)}
.call-card:active{cursor:grabbing}
.call-card.lifted{opacity:.35}
.call-card.armed{outline:2px dashed var(--amber-fill);outline-offset:3px}
.cc-top{display:block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.cc-name{display:block;font-weight:600;font-size:16px;margin-top:5px}
.cc-q{display:flex;align-items:center;gap:8px;margin-top:8px}
.cc-q .qmeter{height:12px}
.cc-q .qmeter i{width:3px}
.cc-q .qmeter i:nth-child(1){height:4px}.cc-q .qmeter i:nth-child(2){height:6px}.cc-q .qmeter i:nth-child(3){height:8px}.cc-q .qmeter i:nth-child(4){height:10px}.cc-q .qmeter i:nth-child(5){height:12px}
.qmeter{display:flex;align-items:flex-end;gap:3px;height:16px}
.qmeter i{width:4px;background:var(--border-2);border-radius:1px}
.qmeter i.on{background:var(--st-idle)}
.cc-empty{font-size:13px;color:var(--text-3);padding:12px;border:1px dashed var(--border-2);border-radius:var(--r-2)}
.queue{display:flex;flex-direction:column;gap:8px}
.q-item{position:relative;display:flex;flex-direction:column;gap:6px;padding:11px 12px 12px 18px;border-radius:var(--r-2);background:var(--bg-1);border:1px solid var(--border-1)}
.q-item::before{content:"";position:absolute;left:6px;top:10px;bottom:10px;width:3px;border-radius:2px;background:var(--st-off)}
.q-item.head{border-color:color-mix(in srgb,var(--amber-fill) 55%,var(--border-1))}
.q-item.head::before{background:var(--amber-fill)}
.console.dragging .q-item.head .s-ring::after{animation:none;opacity:0}
.q-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.q-name{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.q-sub{font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);text-align:right}
.q-item.head .q-sub{color:var(--amber)}
.q-ans{height:34px;padding:0 12px;font-size:14px;background:var(--st-idle-fill);color:var(--on-idle);border-radius:var(--r-1);gap:7px}
.q-ans .ic{width:15px;height:15px;stroke-width:2}
.q-ans:hover{background:#38b477}
.park{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.park-slot{display:flex;flex-direction:column;gap:5px;padding:10px 12px;border-radius:var(--r-2);border:1px dashed var(--border-2);min-height:66px;font-size:14px;color:var(--text-2);transition:background var(--t-fast),border-color var(--t-fast)}
.park-slot .park-body{display:flex;align-items:center;gap:7px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.park-slot .park-body .ic{width:16px;height:16px}
.park-slot.full{position:relative;border-style:solid;background:var(--bg-1);color:var(--text-1);padding-left:18px}
.park-slot.full::before{content:"";position:absolute;left:6px;top:10px;bottom:10px;width:3px;border-radius:2px;background:var(--st-held)}
.park-pick{align-self:flex-start;font-size:13px;font-weight:600;height:28px;padding:0 10px;border-radius:var(--r-1);background:transparent;border:1px solid var(--border-2);cursor:pointer}
.park-pick:hover{background:var(--bg-3)}
.park-pick[disabled]{opacity:.45;cursor:not-allowed}
.c-main{padding:16px;background:var(--bg-0);min-width:0}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.tile{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:10px;padding:11px 12px 10px 20px;border-radius:var(--r-2);background:var(--bg-1);border:1px solid var(--border-1);box-shadow:var(--edge),var(--shadow-1);min-height:80px;transition:background var(--t-med),border-color var(--t-med),box-shadow var(--t-med),opacity var(--t-med);text-align:left;width:100%;cursor:default}
.tile::before{content:"";position:absolute;left:7px;top:10px;bottom:10px;width:3px;border-radius:2px;background:var(--lampc,var(--st-off))}
.tile[data-s="idle"]{--lampc:var(--st-idle)}
.tile[data-s="busy"]{--lampc:var(--st-busy)}
.tile[data-s="held"]{--lampc:var(--st-held)}
.tile[data-s="dnd"]{--lampc:var(--st-dnd)}
.tile[data-s="off"]{--lampc:var(--st-off)}
.t-top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.t-name{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t-bot{display:flex;align-items:baseline;gap:7px;min-width:0;font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.t-ext{color:var(--text-3);flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;min-width:14px}
.t-st{flex:none;color:var(--lampc)}
.tile[data-s="off"] .t-st{color:var(--text-3)}
.tile[data-s="off"] .t-name,.tile[data-s="dnd"] .t-name{color:var(--text-2)}
.console.dragging .tile:not([data-s="idle"]),.console.arming .tile:not([data-s="idle"]){opacity:.5}
.console.dragging .tile[data-s="idle"],.console.arming .tile[data-s="idle"],.console.dragging .park-slot:not(.full),.console.arming .park-slot:not(.full){border-style:dashed;border-color:color-mix(in srgb,var(--amber-fill) 50%,var(--border-1))}
.console.arming .tile[data-s="idle"]{cursor:pointer}
.tile.over,.park-slot.over{border:1px solid var(--amber-fill)!important;outline:2px solid var(--amber-fill);outline-offset:2px;background:var(--amber-soft);box-shadow:var(--edge),0 0 0 6px var(--amber-glow)}
.tile.flash{animation:tileFlash 900ms var(--ease)}
@keyframes tileFlash{0%{background:var(--bg-3)}100%{background:var(--bg-1)}}
.drop-hint{display:none;position:absolute;left:50%;top:-30px;transform:translateX(-50%);z-index:3;padding:6px 10px;border-radius:7px;background:var(--amber-fill);color:var(--on-amber);font-size:12px;font-weight:650;white-space:nowrap;box-shadow:var(--shadow-2);pointer-events:none}
.drop-hint::after{content:"";position:absolute;left:50%;bottom:-4px;width:8px;height:8px;margin-left:-4px;background:var(--amber-fill);transform:rotate(45deg);border-radius:1.5px}
.tile.over .drop-hint,.park-slot.over .drop-hint{display:block}
.park-slot{position:relative}
.ghost{position:fixed;z-index:80;pointer-events:none;width:200px;transform:translate(16px,12px) rotate(-2.4deg);border:1px solid var(--amber-fill)!important;box-shadow:var(--shadow-2),0 0 0 4px var(--amber-glow);opacity:.97}
.c-status{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;padding:10px 16px;border-top:1px solid var(--border-1);background:var(--bg-0)}
.c-status .plate{font-size:10.5px}
kbd{font-family:var(--font-mono);font-size:10px;padding:1px 5px;border-radius:5px;background:var(--bg-2);border:1px solid var(--border-2);box-shadow:0 1px 0 var(--border-2);color:var(--text-2);letter-spacing:.04em}
.toast{position:absolute;left:50%;bottom:58px;transform:translate(-50%,8px);padding:9px 14px;border-radius:var(--r-2);background:var(--bg-3);border:1px solid var(--border-2);box-shadow:var(--shadow-2);font-size:14px;opacity:0;transition:opacity var(--t-med),transform var(--t-med) var(--ease);pointer-events:none;white-space:nowrap;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis}
.toast.on{opacity:1;transform:translate(-50%,0)}
.console{position:relative}
@media (max-width:820px){
  .console-body{grid-template-columns:minmax(0,1fr)}
  .c-side{border-right:0;border-bottom:1px solid var(--border-1)}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .tile{padding:10px 10px 9px 18px;min-height:72px}
  .t-name{font-size:14px}
  .c-kbd{display:none!important}
  .win-meta{display:none}
}

/* ---------- TRANSPORT ---------- */
.transport-sec{background:var(--bg-0);border-top:1px solid var(--border-1)}
.tr-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,80px);align-items:center}
.tr-grid .sec-head{margin-bottom:0}
.tr-card{padding:clamp(16px,2.4vw,28px);border-radius:var(--r-3);background:var(--bg-1);border:1px solid var(--border-1);box-shadow:var(--edge),var(--shadow-2)}
.tr-label{margin-bottom:10px}
.radios{display:flex;flex-direction:column;gap:8px}
.radios button{display:grid;grid-template-columns:18px minmax(0,1fr);column-gap:10px;row-gap:3px;align-items:center;width:100%;padding:11px 14px;border-radius:var(--r-2);border:1px solid var(--border-1);background:var(--bg-0);text-align:left;cursor:pointer;transition:background var(--t-fast),border-color var(--t-fast)}
.radios button:hover{background:var(--bg-2)}
.rd{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--text-3)}
.rd-t{display:flex;align-items:center;gap:8px;font-weight:600;font-size:15px;color:var(--text-1)}
.rd-d{grid-column:2;font-size:13.5px;line-height:1.45;color:var(--text-2)}
.chip{margin-left:auto;padding:2px 6px;border-radius:4px;border:1px solid var(--border-2);font-size:10px;font-weight:600;letter-spacing:.06em;color:var(--text-3)}
.radios [aria-checked="true"]{background:var(--amber-soft);border-color:color-mix(in srgb,var(--amber-fill) 60%,var(--border-1))}
.radios [aria-checked="true"] .rd{border-color:var(--amber-fill);background:radial-gradient(circle,var(--amber-fill) 0 3.5px,transparent 4px)}
.radios [aria-checked="true"] .chip{color:var(--amber);border-color:color-mix(in srgb,var(--amber-fill) 60%,var(--border-1))}
.routes{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;margin:26px 0 22px}
.node{display:flex;flex-direction:column;align-items:center;gap:8px;width:84px;text-align:center;font-size:12.5px;color:var(--text-2);line-height:1.25}
.node .ic{width:34px;height:34px;padding:7px;border-radius:var(--r-2);background:var(--bg-2);border:1px solid var(--border-2);color:var(--text-1);box-sizing:content-box}
.rails{display:flex;flex-direction:column;gap:12px;min-width:0}
.rails li{display:grid;grid-template-columns:14px minmax(0,1fr);grid-template-rows:auto auto;column-gap:8px;row-gap:4px;align-items:center;transition:opacity var(--t-slow)}
.rails .rank{font-size:11px;color:var(--text-3);grid-row:1/3}
.rails .plate{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail{position:relative;height:3px;border-radius:2px;background:var(--border-2);overflow:hidden}
.rail i{position:absolute;inset:0;background:var(--st-idle);transform:scaleX(0);transform-origin:left;transition:transform 600ms var(--ease)}
.rails li.live .rail i{transform:scaleX(1)}
.rails li.live .rail::after{content:"";position:absolute;top:-2px;width:22%;height:7px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);animation:packet 1.4s linear infinite}
.rails li.live .plate{color:var(--st-idle)}
.rails li.fail .rail{background:repeating-linear-gradient(90deg,var(--st-busy) 0 6px,transparent 6px 11px)}
.rails li.fail .plate{color:var(--st-busy);text-decoration:line-through}
.rails li.off{opacity:.35}
.rails li.try .rail i{background:var(--text-2);transform:scaleX(.55);transition-duration:900ms}
@keyframes packet{from{left:-22%}to{left:100%}}
.tr-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding-top:18px;border-top:1px solid var(--border-1)}
.tr-status{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:15px;min-height:24px}
.tr-plate{font-size:10.5px}
@media (max-width:1000px){.tr-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:480px){.node{width:64px;font-size:11px}.node .ic{width:26px;height:26px}.routes{gap:8px}.radios button{padding:10px 12px}}

/* ---------- TRANSCRIPTS ---------- */
.tx-sec{background:var(--canvas)}
.facts{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.facts li{display:flex;align-items:center;gap:10px;color:var(--text-1);font-size:16px}
.facts .ic{color:var(--text-2)}
.tx-stage{display:grid;grid-template-columns:minmax(0,.9fr) 90px minmax(0,1.1fr);align-items:center}
.lanes{display:flex;flex-direction:column;gap:56px}
.lane{padding:14px 16px;border-radius:var(--r-2);background:var(--bg-1);border:1px solid var(--border-1);box-shadow:var(--edge)}
.lane .plate{display:block;margin-bottom:10px}
.wave{display:flex;align-items:center;gap:3px;height:44px;overflow:hidden}
.wave i{flex:1 1 0;min-width:2px;border-radius:2px;height:var(--h,30%);transform-origin:center;animation:wv 1.1s ease-in-out infinite;animation-delay:var(--d,0s)}
.lane-you .wave i{background:var(--voice-you)}
.lane-caller .wave i{background:repeating-linear-gradient(to bottom,var(--voice-you) 0 2px,transparent 2px 4px);opacity:.6}
@keyframes wv{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
.merge svg{width:100%;height:280px;display:block}
.merge path{fill:none;stroke-width:2}
.m-you{stroke:var(--voice-you)}
.m-caller{stroke:var(--text-3);stroke-dasharray:2 5;stroke-linecap:round}
.tx-shot{width:min(380px,100%);justify-self:center}
.tx-shot .shot-note{margin-top:14px}
@media (max-width:900px){
  .tx-stage{grid-template-columns:minmax(0,1fr);gap:0}
  .lanes{flex-direction:row;gap:10px}
  .lane{flex:1;min-width:0}
  .merge{height:70px}
  .merge svg{height:70px;transform:rotate(90deg) scaleY(3.5);transform-origin:center;width:70px;margin:auto}
}

/* ---------- RECORDING ---------- */
.rec-sec{background:var(--bg-0);border-top:1px solid var(--border-1)}
.rec-pair{display:flex;justify-content:center;gap:clamp(20px,4vw,56px);align-items:flex-start}
.rec-pair figure{width:min(380px,100%)}
.rec-pair figure:nth-child(2){margin-top:clamp(0px,6vw,72px)}
.rec-pair figcaption{display:flex;gap:10px;margin-top:16px;font-size:15px;color:var(--text-2)}
.aside-line{margin-top:18px;font-size:17px;font-weight:600}
.console-sub{display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center;margin-top:clamp(48px,7vw,96px)}
.console-sub h3{font-size:clamp(20px,2vw,24px)}
.console-sub figcaption p{margin-top:12px;color:var(--text-2);font-size:16px}
@media (max-width:900px){.console-sub{grid-template-columns:minmax(0,1fr)}}
.desk-tools{margin-top:clamp(48px,7vw,96px)}
.ed-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,28px);align-items:start}
.ed-card{padding:clamp(20px,2.6vw,32px);border-radius:var(--r-3);background:var(--bg-1);border:1px solid var(--border-1);box-shadow:var(--edge)}
.ed-pro{border-color:var(--border-2)}
.ed-list{display:flex;flex-direction:column;gap:12px;margin-top:18px}
.ed-list li{display:flex;gap:10px;align-items:flex-start;font-size:16px;color:var(--text-1);line-height:1.45}
.ed-list .ic{flex:none;width:18px;height:18px;margin-top:3px;color:var(--text-2)}
@media (max-width:760px){.ed-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:820px){.rec-pair{flex-direction:column;align-items:center}.rec-pair figure:nth-child(2){margin-top:12px}}

/* ---------- SECURITY (paper) ---------- */
.paper .kicker-lamp{border-color:var(--text-3)}
.sec-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.s-card{padding:clamp(20px,2.6vw,32px);border-radius:var(--r-3);background:var(--bg-1);border:1px solid var(--border-1);box-shadow:var(--edge),var(--shadow-1);display:flex;flex-direction:column}
.s-card h3{margin-top:22px}
.s-card p{margin-top:8px;color:var(--text-2);font-size:16px;max-width:48ch}
.s-demo{display:flex;flex-wrap:wrap;align-items:center;gap:10px;min-height:92px;padding:16px;border-radius:var(--r-2);background:var(--bg-2);border:1px solid var(--border-1)}
.pill{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:var(--r-pill);font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;border:1px solid}
.pill .ic{width:14px;height:14px}
.pill.ok{color:var(--st-idle);border-color:rgba(30,122,79,.35);background:#fff}
.pill.no{color:var(--text-2);border-color:var(--border-2);background:#fff;border-style:dashed}
.fp{font-size:12px;color:var(--text-2);padding:6px 10px;background:#fff;border:1px solid var(--border-1);border-radius:var(--r-1);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.relock{position:relative;width:44px;height:44px;display:grid;place-items:center}
.relock svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.relock circle{fill:none;stroke-width:3}
.rl-bg{stroke:var(--border-2)}
.rl-fg{stroke:var(--text-1);stroke-linecap:round;stroke-dasharray:94.25;stroke-dashoffset:0;transition:stroke-dashoffset 1s linear}
.relock .rl-ic{position:relative;width:16px;height:16px;transform:none}
.relock.locked .rl-fg{stroke:var(--st-idle)}
.rl-text{font-size:15px;color:var(--text-2)}
.rl-text b{font-weight:600;color:var(--text-1)}
.rl-text .mono{font-size:15px;color:var(--text-1)}
.log{flex-direction:column;align-items:flex-start;gap:3px;font-size:12px;color:var(--text-2)}
.log span{white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.log i{font-style:normal;padding:0 5px;border-radius:3px;background:var(--bg-3);color:var(--text-1)}
@media (max-width:760px){.sec-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- IN CALL ---------- */
.incall-sec{background:var(--canvas)}
.controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--border-1);border:1px solid var(--border-1);border-radius:var(--r-3);overflow:hidden}
.ctl{padding:22px 22px 24px;background:var(--bg-0);transition:background var(--t-med)}
.ctl:hover{background:var(--bg-1)}
.ctl .ic{width:24px;height:24px;color:var(--text-1)}
.ctl h3{margin-top:18px;font-size:17px}
.ctl p{margin-top:5px;font-size:15px;color:var(--text-2);line-height:1.45}
/* a short last row stretches its last item, so the grid never shows an empty cell */
.controls .ctl:last-child:nth-child(4n+2){grid-column:span 3}
.controls .ctl:last-child:nth-child(4n+3){grid-column:span 2}
@media (max-width:1000px){.controls{grid-template-columns:repeat(3,minmax(0,1fr))}.controls .ctl:last-child{grid-column:auto}.controls .ctl:last-child:nth-child(3n+2){grid-column:span 2}}
@media (max-width:680px){.controls{grid-template-columns:repeat(2,minmax(0,1fr))}.controls .ctl:last-child{grid-column:auto}.controls .ctl:last-child:nth-child(odd){grid-column:span 2}}
@media (max-width:520px){.ctl{padding:16px 14px 18px}.ctl h3{font-size:15px;margin-top:12px}.ctl p{font-size:13.5px}}

/* ---------- SCREENS (paper) ---------- */
.gal-sec{border-top:1px solid var(--border-1)}
.gallery{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:clamp(24px,5vw,80px);align-items:start;max-width:1000px;margin-inline:auto}
.gtabs{display:flex;flex-direction:column;gap:2px;border-left:1px solid var(--border-2)}
.gtabs button{display:flex;flex-direction:column;gap:2px;margin-left:-1px;padding:12px 16px 12px 20px;border:0;border-left:2px solid transparent;background:none;text-align:left;cursor:pointer;border-radius:0 var(--r-2) var(--r-2) 0;transition:background var(--t-fast),border-color var(--t-fast)}
.gtabs button:hover{background:var(--bg-2)}
.gt-name{font-weight:600;font-size:17px;color:var(--text-2)}
.gt-desc{font-size:14.5px;color:var(--text-3);line-height:1.4}
.gtabs [aria-selected="true"]{border-left-color:var(--text-1);background:var(--bg-1)}
.gtabs [aria-selected="true"] .gt-name{color:var(--text-1)}
.gtabs [aria-selected="true"] .gt-desc{color:var(--text-2)}
.gpanel .frame{aspect-ratio:380/680;background:#F5F4EF}
.gpanel .frame .shot img{height:100%;object-fit:contain;object-position:top center}
.gpanel .frame .shot{height:100%;background:#F5F4EF}
.gpanel .frame.cut::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(to bottom,rgba(245,244,239,0),#F5F4EF 85%);pointer-events:none}
@media (max-width:820px){
  .gallery{grid-template-columns:minmax(0,1fr)}
  .gtabs{flex-direction:row;overflow-x:auto;border-left:0;border-bottom:1px solid var(--border-2);gap:0;scrollbar-width:none;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter)}
  .gtabs::-webkit-scrollbar{display:none}
  .gtabs button{flex:none;margin:0 0 -1px;padding:10px 14px;border-left:0;border-bottom:2px solid transparent;border-radius:var(--r-1) var(--r-1) 0 0}
  .gtabs [aria-selected="true"]{border-bottom-color:var(--text-1)}
  .gt-desc{display:none}
  .gstage{width:min(380px,100%);justify-self:center}
}
.audio-shot{margin-top:22px;max-width:380px;padding-top:12px}

/* ---------- DAY ONE ---------- */
.day-sec{background:var(--bg-0);border-top:1px solid var(--border-1)}
.day-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,28px);align-items:start}
.day-card{padding:clamp(20px,2.6vw,32px);border-radius:var(--r-3);background:var(--bg-1);border:1px solid var(--border-1);box-shadow:var(--edge)}
.day-card>p{margin-top:8px;color:var(--text-2);font-size:16px}
.tabs{display:flex;flex-wrap:wrap;gap:6px;margin:22px 0 14px}
.tabs button{height:34px;padding:0 12px;border-radius:var(--r-pill);border:1px solid var(--border-2);background:transparent;color:var(--text-2);font-size:13.5px;cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--bg-3);color:var(--text-1)}
.sheet{box-shadow:var(--shadow-2),var(--edge);padding:16px}
.sheet-title{display:flex;align-items:center;gap:8px;font-weight:600;font-size:15px}
.warn{display:flex;gap:10px;margin-top:12px;padding:12px;border-radius:var(--r-2);background:rgba(228,112,92,.12);border:1.5px solid var(--st-busy);color:var(--text-1);font-size:14px;line-height:1.45}
.warn .ic{color:var(--st-busy);width:22px;height:22px;margin-top:1px}
.warn b{color:var(--st-busy)}
.sheet[data-kind="bad"] .warn{animation:warnIn 400ms var(--ease)}
@keyframes warnIn{0%{transform:translateX(0)}25%{transform:translateX(-4px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}100%{transform:none}}
.diff{width:100%;border-collapse:collapse;margin-top:12px;font-size:13.5px;table-layout:fixed}
.diff th,.diff td{padding:8px 6px;border-bottom:1px solid var(--border-1);text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.diff thead th{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);font-weight:500}
.diff tbody th{font-weight:500;color:var(--text-2)}
.diff td{color:var(--text-1)}
.diff td.mono{font-size:12.5px}
.diff td:nth-child(2){color:var(--text-3)}
.enc-off{display:none}
.sheet[data-kind="bad"] .enc-on{display:none}
.sheet[data-kind="bad"] .enc-off{display:inline;color:var(--st-busy);font-weight:700}
.sheet[data-kind="bad"] .enc-row{background:rgba(228,112,92,.08)}
.sheet-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
.btn-apply{background:var(--st-idle-fill);color:var(--on-idle)}
.sheet[data-kind="bad"] .btn-apply{background:transparent;color:var(--st-busy);border-color:var(--st-busy)}
@media (max-width:900px){.day-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:420px){.diff{font-size:12.5px}.diff th,.diff td{padding:7px 4px}.diff thead th:first-child,.diff tbody th{width:31%}}


/* ---------- FINAL ---------- */
.final{position:relative;overflow:hidden;padding:clamp(96px,14vw,200px) 0 clamp(64px,8vw,110px);background:var(--canvas);border-top:1px solid var(--border-1)}
.final .field{-webkit-mask-image:radial-gradient(ellipse 60% 70% at 50% 30%,#000 10%,transparent 70%);mask-image:radial-gradient(ellipse 60% 70% at 50% 30%,#000 10%,transparent 70%)}
.final-in{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}
.final-dl{display:flex;flex-direction:column;align-items:center;gap:26px}
.big-mark{position:relative;width:88px;height:88px;color:var(--text-1)}
.big-mark svg{width:100%;height:100%}
.big-mark .lamp{box-shadow:0 0 0 6px rgba(232,163,61,.10),0 0 40px 8px rgba(232,163,61,.28);animation:breathe 4s ease-in-out infinite}
.final-dl .h2{max-width:16ch}
.final-contact{margin-top:clamp(64px,9vw,120px);padding:clamp(22px,3vw,36px);border-radius:var(--r-3);background:var(--bg-1);border:1px solid var(--border-1);box-shadow:var(--edge);max-width:620px;width:100%;display:flex;flex-direction:column;align-items:center;gap:12px}
.final-contact p{color:var(--text-2);max-width:46ch}
.final-contact .btn{margin-top:8px}

/* ---------- FOOTER ---------- */
.foot{background:var(--canvas);border-top:1px solid var(--border-1);padding:28px 0 40px}
.foot-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 28px}
.foot nav{display:flex;flex-wrap:wrap;gap:4px 18px}
.foot nav a{color:var(--text-2);text-decoration:none;font-size:14.5px;padding:4px 0}
.foot nav a:hover{color:var(--text-1);text-decoration:underline}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal{opacity:1;transform:none}
  .js .words .w{opacity:1}
}
.legend .s-ring::after{display:none}
@media (max-width:820px){.t-bot{font-size:9.5px;letter-spacing:.06em}}
@media (max-width:520px){.diff td,.diff th{white-space:normal;overflow-wrap:anywhere}}
:lang(es) .display{font-size:clamp(40px,6vw,84px)}
:lang(es) .h2{font-size:clamp(32px,4.8vw,62px)}
.diff thead th:first-child{width:26%}
.diff thead th:nth-child(3){width:42%}
.from{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);text-decoration:none;padding:4px 0;border-bottom:1px solid transparent;white-space:nowrap}
.from:hover,.from:focus-visible{color:var(--text-1);border-bottom-color:currentColor}
.from-foot{font-size:11.5px}
.from-ic{width:12px;height:12px;margin-left:4px;vertical-align:-1px}