/* ============================================================
   VoxisLive — Graphite Console v2
   ============================================================ */

:root{
  --bg:#131518; --panel:#17191d; --panel-2:#1b1e24; --well:#0e1013;
  --line:rgba(235,240,245,.08); --line-2:rgba(235,240,245,.14);
  --text:#e9eef3; --text-2:rgba(233,238,243,.64); --text-3:rgba(233,238,243,.56);
  --amber:#ffb224; --amber-soft:rgba(255,178,36,.12); --amber-glow:rgba(255,178,36,.28);
  --blue:#57b6ff; --green:#3ecf8e;
  --font:'Schibsted Grotesk',system-ui,sans-serif;
  --mono:'Geist Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  --spring:cubic-bezier(.22,1,.36,1);
  --maxw:1200px;
  /* Faz 1 tokens (2026-10-20). Type: 1.25 ratio on a 16px base; space: 4/8 grid. */
  --fs-xs:.75rem; --fs-sm:.875rem; --fs-base:1rem; --fs-md:1.25rem; --fs-lg:1.5625rem;
  --fs-xl:1.953rem; --fs-2xl:2.441rem; --fs-3xl:3.052rem; --fs-4xl:3.815rem; --fs-5xl:4.768rem;
  --fs-h1:clamp(2.5rem,5.2vw,4.125rem); --fs-mono-min:11.5px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px;
  --s12:48px; --s16:64px; --s20:80px; --s24:96px;
  --r1:8px; --r2:12px; --r3:16px; --r-pill:999px;
  --focus:var(--amber); --focus-w:2px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{font-family:var(--font);background:var(--bg);color:var(--text);
  -webkit-font-smoothing:antialiased;overflow-x:clip;line-height:1.5}
a{color:inherit;text-decoration:none}
svg{display:block}
img{max-width:100%;height:auto;display:block}
ul{list-style:none}
button{font-family:inherit}
::selection{background:var(--amber);color:#131518}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:6px}
.mono{font-family:var(--mono)}

/* ---------- atmosphere ---------- */
.noise{position:fixed;inset:-50%;z-index:80;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 9s steps(6) infinite}
@keyframes grain{
  0%,100%{transform:translate(0,0)} 20%{transform:translate(-2%,1%)}
  40%{transform:translate(1%,-2%)} 60%{transform:translate(-1%,2%)} 80%{transform:translate(2%,1%)}}
.aura{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.aura::before{content:'';position:absolute;width:1100px;height:760px;top:-320px;right:-200px;
  background:radial-gradient(closest-side,rgba(255,178,36,.10),transparent 70%);filter:blur(30px)}
.aura::after{content:'';position:absolute;width:900px;height:600px;bottom:-260px;left:-240px;
  background:radial-gradient(closest-side,rgba(87,182,255,.06),transparent 70%);filter:blur(30px)}
.grid-lines{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;mask-image:radial-gradient(circle at 50% 0,#000,transparent 75%)}
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:90;pointer-events:none}
.progress i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--amber),#ffc961);
  transform-origin:0 50%;transform:scaleX(0);box-shadow:0 0 12px var(--amber-glow)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;position:relative;z-index:1}

/* ---------- load-in choreography (pure CSS) ---------- */
.load-rise{opacity:0;transform:translateY(26px);animation:loadrise .9s var(--ease) forwards;animation-delay:var(--d,0s)}
.load-fade{opacity:0;animation:loadfade 1s var(--ease) forwards;animation-delay:var(--d,0s)}
@keyframes loadrise{to{opacity:1;transform:none}}
@keyframes loadfade{to{opacity:1}}

/* ---------- brand ---------- */
.mark{width:30px;height:30px;flex:none}
.wordmark{font-weight:700;font-size:19px;letter-spacing:-.02em}
.wordmark .lv{color:var(--amber)}

/* ============ NAV ============ */
.nav{position:sticky;top:0;z-index:50;transition:background .3s,border-color .3s}
.nav .bar{display:flex;align-items:center;gap:28px;height:68px}
.nav.scrolled{background:rgba(19,21,24,.78);backdrop-filter:blur(16px) saturate(160%);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:11px}
.navlinks{display:flex;gap:6px;margin-left:8px}
.navlinks a{font-size:14px;color:var(--text-2);transition:color .18s,background .18s;padding:7px 12px;border-radius:8px;position:relative}
.navlinks a:hover{color:var(--text);background:rgba(235,240,245,.05)}
.navlinks a.active{color:var(--amber)}
.nav .right{margin-left:auto;display:flex;align-items:center;gap:14px}
.ghostlink{color:var(--text-2);transition:color .18s}
.ghostlink:hover{color:var(--text)}
/* nav language dropdown */
.langdd{position:relative}
.langdd summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--text-2);
  border:1px solid var(--line-2);border-radius:9px;padding:8px 11px;transition:color .18s,border-color .18s}
.langdd summary::-webkit-details-marker{display:none}
.langdd summary:hover{color:var(--text);border-color:var(--text-3)}
.langdd[open] summary{color:var(--amber);border-color:var(--amber-glow)}
.langdd summary svg{opacity:.8}
.langdd-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:160px;background:rgba(23,25,29,.97);
  backdrop-filter:blur(14px);border:1px solid var(--line-2);border-radius:12px;padding:6px;
  display:flex;flex-direction:column;z-index:60;box-shadow:0 20px 50px -20px rgba(0,0,0,.8)}
.langdd-menu a{display:flex;justify-content:space-between;align-items:center;gap:14px;font-size:13.5px;
  color:var(--text-2);padding:9px 12px;border-radius:8px;transition:background .15s,color .15s}
.langdd-menu a:hover{background:var(--well);color:var(--text)}
.langdd-menu a.on{color:var(--amber)}
.langdd-menu a .cc{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--text-3)}

.burger{display:none;width:40px;height:40px;background:transparent;border:1px solid var(--line-2);border-radius:10px;
  cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger i{display:block;width:16px;height:2px;background:var(--text);border-radius:2px;transition:transform .25s var(--ease)}
.burger.open i:first-child{transform:translateY(3.5px) rotate(45deg)}
.burger.open i:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.mobilemenu{display:none;flex-direction:column;gap:4px;padding:10px 24px 22px;
  background:rgba(19,21,24,.96);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.mobilemenu a{padding:13px 6px;font-size:16px;color:var(--text-2);border-bottom:1px solid var(--line)}
.mobilemenu a:last-child{border-bottom:none;margin-top:12px}
.mobilemenu.open{display:flex}

/* ============ BUTTONS ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;
  padding:0;border-radius:11px;cursor:pointer;border:1px solid transparent;position:relative;overflow:hidden;
  transition:background .18s,border-color .18s,box-shadow .25s;white-space:nowrap;will-change:transform}
.btn .btn-in{display:inline-flex;align-items:center;gap:9px;padding:11px 18px;position:relative;z-index:1}
.btn-lg .btn-in{padding:15px 26px;font-size:15px}
.btn-lg{border-radius:13px}
.btn-primary{background:var(--amber);color:#1a1206;box-shadow:0 6px 22px -6px var(--amber-glow)}
.btn-primary:hover{background:#ffc043;box-shadow:0 10px 34px -6px var(--amber-glow)}
.btn-primary::after{content:'';position:absolute;top:0;left:-80%;width:50%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-20deg);transition:left .6s var(--ease)}
.btn-primary:hover::after{left:130%}
.btn-ghost{background:rgba(23,25,29,.5);border-color:var(--line-2);color:var(--text);backdrop-filter:blur(6px)}
.btn-ghost:hover{border-color:var(--text-3);background:var(--panel)}

/* ============ HERO ============ */
.hero{position:relative;padding:74px 0 90px;overflow:clip}
#wavefield{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hero .wrap{z-index:2}
.hero-grid{display:grid;grid-template-columns:1.04fr 1fr;gap:56px;align-items:center}
.hero-grid>*{min-width:0}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  color:var(--amber);background:var(--amber-soft);border:1px solid var(--amber-glow);padding:6px 12px;border-radius:99px;margin-bottom:26px}
.eyebrow .pulse{width:7px;height:7px;border-radius:50%;background:var(--amber);box-shadow:0 0 8px var(--amber);animation:pulse 1.8s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}
h1{font-size:var(--fs-h1);line-height:1.02;letter-spacing:-.033em;font-weight:800}
.hline{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.hword{display:inline-block}
.hline.grad .hword{background:linear-gradient(115deg,#ffd98a 5%,var(--amber) 55%,#ff9d00);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero .sub{font-size:18px;line-height:1.65;color:var(--text-2);margin:24px 0 34px;max-width:44ch}
.cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero .trust{display:flex;gap:22px;flex-wrap:wrap;margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
.hero .trust .t{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--text-2)}
.hero .trust .t svg{color:var(--green)}

.scrollcue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:2;
  width:26px;height:42px;border:1.5px solid var(--line-2);border-radius:14px;display:flex;justify-content:center}
.scrollcue i{width:3px;height:8px;border-radius:3px;background:var(--amber);margin-top:7px;animation:cue 1.9s var(--ease) infinite}
@keyframes cue{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}

/* ---------- live console ---------- */
.console{position:relative;border-radius:18px;border:1px solid var(--line-2);background:rgba(14,16,19,.82);
  backdrop-filter:blur(14px);box-shadow:0 50px 110px -34px rgba(0,0,0,.85),0 0 0 1px rgba(255,178,36,.05),0 0 90px -30px var(--amber-glow);
  overflow:hidden;min-width:0}
.console::before{content:'';position:absolute;inset:0;pointer-events:none;border-radius:18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.c-head{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--text-3)}
.c-dots{display:flex;gap:6px}
.c-dots i{width:9px;height:9px;border-radius:50%;background:var(--line-2)}
.c-dots i:first-child{background:rgba(255,120,110,.55)}
.c-dots i:nth-child(2){background:rgba(255,190,80,.5)}
.c-dots i:nth-child(3){background:rgba(80,220,140,.5)}
.c-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-live{display:inline-flex;align-items:center;gap:7px;color:var(--amber)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--amber);box-shadow:0 0 8px var(--amber);animation:pulse 1.8s var(--ease) infinite}
.c-body{padding:22px 22px 18px}
.c-lab{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.chip{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;padding:3px 9px;border-radius:6px;
  border:1px solid var(--line-2);color:var(--text-2);background:var(--panel);min-width:34px;text-align:center;transition:all .3s}
.chip.amberchip{color:#1a1206;background:var(--amber);border-color:transparent;font-weight:600}
.c-dir{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:var(--text-3)}
.c-text{font-size:19px;line-height:1.45;min-height:56px;letter-spacing:-.01em;font-weight:500}
.c-text.src{color:var(--text-2)}
.c-text.dst{color:var(--text);min-height:56px}
.caret{display:inline-block;width:2px;height:1.1em;background:var(--text-3);vertical-align:-.18em;margin-left:2px;
  animation:blink 1s steps(2) infinite}
.caret.amber{background:var(--amber);box-shadow:0 0 7px var(--amber-glow)}
@keyframes blink{50%{opacity:0}}
.c-wave{display:flex;align-items:center;gap:3px;height:30px;margin:12px 0 4px}
.c-wave i{flex:1;height:calc(var(--h,20)*1%);min-height:2px;border-radius:2px;background:var(--text-3);opacity:.35;
  transition:opacity .4s;transform-origin:center}
.c-wave.playing i{opacity:.85;animation:wavebar .82s ease-in-out infinite alternate;animation-delay:calc(var(--i)*-.07s)}
.c-wave.out i{background:var(--amber)}
.c-wave.out.playing i{box-shadow:0 0 6px rgba(255,178,36,.35)}
@keyframes wavebar{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
.c-mid{display:flex;align-items:center;gap:12px;margin:14px 0}
.c-status{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--text-3);
  border:1px solid var(--line);border-radius:6px;padding:4px 10px;transition:color .3s,border-color .3s,background .3s}
.c-status.hot{color:var(--amber);border-color:var(--amber-glow);background:var(--amber-soft)}
.c-arrow{color:var(--text-3)}
.c-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 18px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:10px;letter-spacing:.13em;color:var(--text-3);flex-wrap:wrap}
.cf{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.cf b{color:var(--amber);font-weight:500}
.amberdot{animation-duration:1.2s}

/* ============ TICKER ============ */
.ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(14,16,19,.55);
  padding:0;position:relative;z-index:1;overflow:hidden}
.ticker::before,.ticker::after{content:'';position:absolute;top:0;bottom:0;width:140px;z-index:2;pointer-events:none}
.ticker::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.ticker::after{right:0;background:linear-gradient(-90deg,var(--bg),transparent)}
.tick-row{display:flex;overflow:hidden;padding:15px 0}
.tick-row:first-child{border-bottom:1px solid var(--line)}
.tick-track{display:flex;gap:0;flex:none;animation:tick 46s linear infinite}
.tick-row.rev .tick-track{animation:tickrev 52s linear infinite}
.tick-row:hover .tick-track{animation-play-state:paused}
@keyframes tick{to{transform:translateX(-50%)}}
@keyframes tickrev{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.pair{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12.5px;color:var(--text-2);
  padding:0 26px;border-right:1px solid var(--line);white-space:nowrap}
.pair b{font-weight:500;font-size:10px;letter-spacing:.12em;color:var(--amber);border:1px solid var(--amber-glow);
  background:var(--amber-soft);padding:2px 7px;border-radius:5px}
.pair i{font-style:normal;color:var(--text-3)}

/* ============ STATS ============ */
.stats{position:relative;z-index:1}
.stats .row{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}
.stat{padding:42px 24px;text-align:center;border-right:1px solid var(--line);position:relative}
.stat:last-child{border-right:none}
.stat .n{font-size:46px;font-weight:700;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.stat .n .u{color:var(--amber)}
.stat .l{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--text-3);margin-top:12px;text-transform:uppercase}

/* ============ SECTIONS ============ */
section{position:relative}
.sec{padding:110px 0}
.sec.tight{padding-top:30px}
.sechead{max-width:640px;margin-bottom:56px}
.sechead.center{text-align:center;margin-left:auto;margin-right:auto}
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.22em;color:var(--amber);text-transform:uppercase;margin-bottom:18px;display:block}
.sechead h2{font-size:clamp(30px,3.8vw,46px);letter-spacing:-.028em;line-height:1.07;font-weight:700}
.sechead p{font-size:17px;color:var(--text-2);margin-top:18px;line-height:1.65}

/* ============ BENTO ============ */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:28px;position:relative;overflow:hidden;
  transition:border-color .25s,transform .3s var(--ease),box-shadow .3s;display:flex;flex-direction:column}
.tile:hover{border-color:var(--line-2);transform:translateY(-3px);box-shadow:0 24px 50px -28px rgba(0,0,0,.7)}
.tile.wide{grid-column:span 2}
.tile .spot{position:absolute;inset:0;opacity:0;transition:opacity .35s;pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,178,36,.08),transparent 60%)}
.tile:hover .spot{opacity:1}
.tile .ic{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:var(--well);
  border:1px solid var(--line);color:var(--amber);margin-bottom:18px;position:relative;z-index:1}
.tile .ic.green{color:var(--green)}
.tile h3{font-size:18px;font-weight:600;letter-spacing:-.01em;margin-bottom:8px;position:relative;z-index:1}
.tile p{font-size:14.5px;color:var(--text-2);line-height:1.6;position:relative;z-index:1}

/* vignettes */
.vig{margin-top:auto;padding-top:22px;position:relative;z-index:1}
.vig.eq{display:flex;align-items:flex-end;gap:4px;height:64px}
.vig.eq i{flex:1;height:calc(var(--h,30)*1%);min-height:3px;border-radius:3px 3px 0 0;
  background:linear-gradient(to top,rgba(255,178,36,.16),var(--amber));opacity:.8}
.tile:hover .vig.eq i{animation:eqbar 1s ease-in-out infinite alternate;animation-delay:calc(var(--i)*-.09s)}
@keyframes eqbar{from{transform:scaleY(.3)}to{transform:scaleY(1)}}
.vig.eq i{transform-origin:bottom}
.vig.langs{height:46px;overflow:hidden;
  mask-image:linear-gradient(transparent,#000 30%,#000 70%,transparent)}
.langroll{display:flex;flex-direction:column;gap:8px;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;
  color:var(--text-3);animation:roll 9s linear infinite}
.langroll span{height:15px;line-height:15px}
@keyframes roll{to{transform:translateY(calc(-23px * 8))}}
.vig.duplex{display:flex;flex-direction:column;gap:9px}
.bub{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--text-2);border:1px solid var(--line);
  border-radius:9px;padding:7px 12px;background:var(--well);align-self:flex-start;position:relative}
.bub b{color:var(--amber);font-weight:500;margin-left:4px}
.bub.b{align-self:flex-end;border-color:var(--amber-glow);background:var(--amber-soft)}
.bub.a{animation:bubfloat 3.4s ease-in-out infinite}
.bub.b{animation:bubfloat 3.4s ease-in-out infinite reverse}
@keyframes bubfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.vig.radar{position:relative;height:60px;display:grid;place-items:center}
.vig.radar::before{content:'';width:9px;height:9px;border-radius:50%;background:var(--green);
  box-shadow:0 0 12px rgba(62,207,142,.8)}
.vig.radar i{position:absolute;width:26px;height:26px;border-radius:50%;border:1px solid rgba(62,207,142,.5);
  animation:ring 2.6s var(--ease) infinite}
.vig.radar i:nth-child(2){animation-delay:.85s}
.vig.radar i:nth-child(3){animation-delay:1.7s}
@keyframes ring{from{transform:scale(.4);opacity:.9}to{transform:scale(2.6);opacity:0}}
.vig.script{display:flex;flex-direction:column;gap:9px}
.vig.script i{display:block;height:7px;border-radius:4px;background:var(--line-2);width:var(--w,70%);position:relative;overflow:hidden}
.vig.script i::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,178,36,.35),transparent);
  transform:translateX(-100%);animation:scan 2.8s var(--ease) infinite}
.vig.script i:nth-child(2)::after{animation-delay:.4s}
.vig.script i:nth-child(3)::after{animation-delay:.8s}
@keyframes scan{60%,100%{transform:translateX(100%)}}
.vig.screen .mini{height:86px;border-radius:10px;border:1px solid var(--line-2);background:
  linear-gradient(160deg,#1c2027,#0e1013);position:relative;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;padding:10px}
.vig.screen .cap{font-size:11.5px;color:var(--text);background:rgba(14,16,19,.9);border:1px solid var(--line-2);
  border-radius:7px;padding:6px 12px;display:flex;flex-direction:column;gap:2px;text-align:center;
  animation:capin 4.4s var(--ease) infinite}
.vig.screen .cap b{font-weight:500;color:var(--text-3);font-size:10.5px}
@keyframes capin{0%,12%{transform:translateY(120%);opacity:0}22%,80%{transform:translateY(0);opacity:1}92%,100%{transform:translateY(120%);opacity:0}}

/* ============ HOW ============ */
.howline{height:2px;background:var(--line);border-radius:2px;margin-bottom:34px;overflow:hidden}
.howline i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--amber),rgba(255,178,36,.25));
  transform-origin:0 50%;transform:scaleX(0);transition:transform 1.6s var(--ease) .2s}
.reveal.in#howFill, .howline.in i{transform:scaleX(1)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.step{position:relative;padding:30px;border:1px solid var(--line);border-radius:18px;background:var(--panel);
  transition:border-color .25s,transform .3s var(--ease)}
.step:hover{border-color:var(--line-2);transform:translateY(-3px)}
.step .num{font-family:var(--mono);font-size:12px;color:var(--amber);letter-spacing:.12em}
.step h3{font-size:20px;font-weight:600;margin:18px 0 8px;letter-spacing:-.01em}
.step p{font-size:14.5px;color:var(--text-2);line-height:1.6}

/* ============ SHOWCASE SLIDER ============ */
.showslide{display:grid;grid-template-columns:1.08fr .92fr;gap:60px;align-items:center}
.shotstack{position:relative;aspect-ratio:1360/850;border-radius:16px;overflow:hidden;border:1px solid var(--line-2);
  box-shadow:0 46px 100px -34px rgba(0,0,0,.85),0 0 0 1px rgba(255,178,36,.05);background:var(--well)}
.shotstack img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transform:scale(1.04) translateY(10px);transition:opacity .7s var(--ease),transform .9s var(--ease)}
.shotstack img.active{opacity:1;transform:none}
.telem{position:absolute;left:16px;bottom:16px;z-index:2;display:flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:11px;color:var(--text);background:rgba(14,16,19,.78);backdrop-filter:blur(10px);
  border:1px solid var(--line-2);padding:8px 13px;border-radius:9px}
.telem b{color:var(--amber);font-weight:500}
.slider-media .real-note{margin-top:16px}
.slider-nav{display:flex;flex-direction:column}
.snav{position:relative;padding:22px 4px;border-bottom:1px solid var(--line);cursor:pointer;
  transition:opacity .35s;outline-offset:-2px}
.snav:first-child{border-top:1px solid var(--line)}
.snav:not(.is-active){opacity:.45}
.snav:not(.is-active):hover{opacity:.75}
.s-kicker{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--amber);margin-bottom:10px;display:block}
.snav h3{font-size:21px;font-weight:700;letter-spacing:-.015em;line-height:1.2}
.snav-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.snav.is-active .snav-body{grid-template-rows:1fr}
.snav-in{overflow:hidden}
.snav-in p{font-size:15px;color:var(--text-2);margin-top:12px;line-height:1.62}
.snav-in .feat{margin:16px 0 6px;display:flex;flex-direction:column;gap:10px}
.snav-in .feat li{position:relative;padding-left:26px;font-size:14px;color:var(--text-2);line-height:1.5}
.snav-in .feat li::before{content:'';position:absolute;left:0;top:4px;width:14px;height:8px;
  border-left:2px solid var(--amber);border-bottom:2px solid var(--amber);transform:rotate(-45deg)}
.sprog{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--amber),#ffc961);
  transform:scaleX(0);transform-origin:0 50%;opacity:0}
.snav.is-active .sprog{opacity:1}
.real-note{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  color:var(--green);border:1px solid rgba(62,207,142,.3);background:rgba(62,207,142,.08);padding:6px 11px;
  border-radius:7px;align-self:flex-start}
.real-note::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 7px rgba(62,207,142,.7)}

/* ============ PRIVACY ============ */
.privacy{background:linear-gradient(180deg,var(--panel),var(--well));border:1px solid var(--line);border-radius:26px;
  padding:64px 48px;text-align:center;position:relative;overflow:hidden}
.privacy::before{content:'';position:absolute;inset:0;background:radial-gradient(640px 320px at 50% 0,rgba(62,207,142,.09),transparent 70%)}
.privacy .in{position:relative;z-index:1}
.privacy .shield{width:58px;height:58px;border-radius:16px;display:grid;place-items:center;margin:0 auto 24px;
  background:rgba(62,207,142,.1);border:1px solid rgba(62,207,142,.3);color:var(--green)}
.privacy .draw{stroke-dasharray:70;stroke-dashoffset:70}
.privacy .draw.d2{stroke-dasharray:16;stroke-dashoffset:16}
.privacy.in .draw{animation:drawpath 1.4s var(--ease) .3s forwards}
.privacy.in .draw.d2{animation:drawpath .6s var(--ease) 1.5s forwards}
@keyframes drawpath{to{stroke-dashoffset:0}}
.privacy h2{font-size:clamp(28px,3.4vw,42px);letter-spacing:-.025em;font-weight:700;line-height:1.1}
.privacy p{font-size:17px;color:var(--text-2);margin:18px auto 0;max-width:56ch;line-height:1.65}
.flow{display:flex;align-items:center;justify-content:center;gap:0;margin-top:46px;flex-wrap:wrap}
.flow .node{display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px 24px;border-radius:14px;
  background:var(--well);border:1px solid var(--line);min-width:152px}
.flow .node .fi{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:var(--panel);color:var(--text-2)}
.flow .node.mid{border-color:rgba(62,207,142,.3)}
.flow .node.mid .fi{color:var(--green);background:rgba(62,207,142,.1)}
.flow .node .fl{font-size:13px;color:var(--text)}
.flow .link{position:relative;width:74px;height:2px;background:var(--line-2);flex:none}
.flow .link i{position:absolute;top:50%;left:0;width:7px;height:7px;border-radius:50%;background:var(--green);
  transform:translate(-50%,-50%);box-shadow:0 0 9px rgba(62,207,142,.8);animation:travel 2.4s ease-in-out infinite}
.flow .link i.d2{animation-delay:1.2s}
@keyframes travel{0%{left:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:100%;opacity:0}}

/* ============ PRICING ============ */
.pricenote{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:28px}
.chip2{display:inline-flex;align-items:center;gap:9px;font-size:13px;color:var(--text-2);font-family:var(--mono);
  letter-spacing:.02em;border:1px solid var(--line);background:var(--panel);border-radius:99px;padding:8px 15px}
.chip2 svg{color:var(--green)}
.chip2.edu{color:var(--amber);border-color:var(--amber-glow);background:var(--amber-soft);font-weight:600}
.chip2.edu svg{color:var(--amber)}
.packs{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;align-items:stretch}
.pack{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:24px 18px;position:relative;transition:border-color .25s,transform .3s var(--ease);height:100%}
.pack:hover{border-color:var(--line-2);transform:translateY(-3px)}
@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}
.packwrap{position:relative;border-radius:17px;padding:1px;
  background:conic-gradient(from var(--ang),rgba(255,178,36,.22) 0%,var(--amber) 9%,#ffd98a 13%,var(--amber) 17%,rgba(255,178,36,.22) 28%,rgba(255,178,36,.22) 55%,rgba(255,178,36,.55) 68%,rgba(255,178,36,.22) 82%);
  animation:spin 5.5s linear infinite;box-shadow:0 0 44px -16px var(--amber-glow)}
@keyframes spin{to{--ang:360deg}}
.packwrap .pack{border-color:transparent;height:100%}
.pack.feat{background:linear-gradient(180deg,rgba(255,178,36,.07),rgba(255,178,36,0) 55%),var(--panel)}
.pack .tag{position:absolute;top:-1px;left:50%;transform:translate(-50%,-50%);font-family:var(--mono);font-size:9.5px;
  letter-spacing:.12em;color:#1a1206;background:var(--amber);padding:3px 10px;border-radius:6px;white-space:nowrap;
  box-shadow:0 4px 14px -4px var(--amber-glow)}
.pack .pname{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.pack .mins{font-size:31px;font-weight:700;letter-spacing:-.02em;margin:13px 0 2px;line-height:1;font-variant-numeric:tabular-nums}
.pack .mins span{font-size:14px;font-weight:500;color:var(--text-2)}
.pack .price{font-size:22px;font-weight:700;letter-spacing:-.01em;margin-top:14px}
.pack .rate{font-family:var(--mono);font-size:10.5px;color:var(--text-3);margin-top:6px}
.pack .buy{margin-top:20px;width:100%;padding:10px;border-radius:10px;font-size:13px;font-weight:600;
  border:1px solid var(--line-2);background:transparent;color:var(--text);cursor:pointer;transition:all .18s;text-align:center}
.pack .buy:hover{border-color:var(--text-3);background:var(--well)}
.pack.feat .buy{background:var(--amber);border-color:transparent;color:#1a1206}
.pack.feat .buy:hover{background:#ffc043}

/* ============ CHANNELS ============ */
.channels{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.channel{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:18px;
  padding:28px;transition:border-color .25s,transform .3s var(--ease)}
.channel:hover{border-color:var(--line-2);transform:translateY(-3px)}
.channel.feat{border-color:var(--amber-glow);box-shadow:0 0 60px -30px var(--amber-glow)}
.channel .badge{align-self:flex-start;font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--amber);
  background:var(--amber-soft);border:1px solid var(--amber-glow);padding:3px 9px;border-radius:6px;margin-bottom:18px}
.channel .badge.muted{color:var(--text-3);background:transparent;border-color:var(--line)}
.channel .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--well);
  border:1px solid var(--line);margin-bottom:16px;color:var(--text)}
.channel h3{font-size:18px;font-weight:600;letter-spacing:-.01em}
.channel p{font-size:14px;color:var(--text-2);line-height:1.55;margin:8px 0 22px;flex:1}
.channel .go{margin-top:auto;align-self:flex-start}

/* ============ FAQ ============ */
.faqlist{max-width:820px;margin:0 auto}
.faqitem{border-bottom:1px solid var(--line)}
.faqitem summary{list-style:none;cursor:pointer;padding:23px 4px;display:flex;align-items:center;gap:16px;
  font-size:17px;font-weight:600;letter-spacing:-.01em;transition:color .18s}
.faqitem summary:hover{color:var(--amber)}
.faqitem summary::-webkit-details-marker{display:none}
.faqitem .fx{margin-left:auto;width:11px;height:11px;flex:none;border-right:2px solid var(--text-3);
  border-bottom:2px solid var(--text-3);transform:rotate(45deg);transition:transform .25s var(--ease)}
.faqitem[open] .fx{transform:rotate(-135deg)}
.faqitem summary .qn{font-family:var(--mono);font-size:12px;color:var(--amber);flex:none}
.faqitem .a-in{padding:0 4px 24px 44px;font-size:15px;color:var(--text-2);line-height:1.68;max-width:70ch}
.faqitem[open] .a-in{animation:faqin .4s var(--ease)}
@keyframes faqin{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ============ FINALE ============ */
.finale{text-align:center;padding:150px 0 130px;position:relative;overflow:clip}
#wavefield2{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.8}
.finale .wrap{z-index:2}
.finale h2{font-size:clamp(42px,6.4vw,84px);letter-spacing:-.04em;font-weight:800;line-height:1.02}
.finale .grad{background:linear-gradient(115deg,#ffd98a 5%,var(--amber) 55%,#ff9d00);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.finale p{font-size:18px;color:var(--text-2);margin:22px auto 38px;max-width:48ch;line-height:1.6}
.finale .cta{justify-content:center}
.finale .meta{font-family:var(--mono);font-size:12px;color:var(--text-3);margin-top:26px;letter-spacing:.06em}

/* ============ RELATED ============ */
.related{padding-bottom:96px}
.related>.wrap>h2{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--text-3);margin-bottom:22px}
.relgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.relgrid.four{grid-template-columns:repeat(4,1fr)}
.relgrid a{display:block;padding:20px 22px;border:1px solid var(--line);border-radius:14px;
  background:rgba(255,255,255,.015);transition:border-color .2s,background .2s,transform .2s}
.relgrid a:hover{border-color:var(--amber);background:rgba(255,255,255,.035);transform:translateY(-2px)}
.relgrid .relt{display:block;font-size:15px;font-weight:600;line-height:1.35;color:var(--text);margin-bottom:8px}
.relgrid .reld{display:block;font-size:13px;color:var(--text-3);line-height:1.55}
@media(max-width:980px){.relgrid,.relgrid.four{grid-template-columns:1fr 1fr}.related{padding-bottom:70px}}
@media(max-width:560px){.relgrid,.relgrid.four{grid-template-columns:1fr}}

/* ============ FOOTER (2026-10-18: brand + 4 columns, legal row, company line) ============ */
footer{border-top:1px solid var(--line);padding:52px 0 42px;position:relative;z-index:1;background:rgba(14,16,19,.5)}
.foot{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:40px 32px;align-items:start}
.foot .col summary{display:block;list-style:none}
.foot .col summary::-webkit-details-marker{display:none}
.foot .col h4{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--text-3);text-transform:uppercase;margin-bottom:14px}
.foot .col a{display:block;font-size:14px;color:var(--text-2);margin-bottom:10px;transition:color .18s}
.foot .col a:hover{color:var(--text)}
.foot .about{max-width:300px}
.foot .about p{font-size:13px;color:var(--text-3);margin-top:14px;line-height:1.6}
.footlegal{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:42px;padding-top:24px;border-top:1px solid var(--line);font-size:12.5px}
.footlegal a{color:var(--text-2);transition:color .18s}
.footlegal a:hover{color:var(--text)}
.footco{margin-top:14px;font-size:12px;line-height:1.6;font-style:normal;color:var(--text-3)}
.footbot{margin-top:24px;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;
  align-items:center;flex-wrap:wrap;gap:12px 22px;font-size:12px;color:var(--text-3);font-family:var(--mono);letter-spacing:.04em}
.langswitch a{color:var(--text-3);transition:color .18s;padding:2px 3px}
.langswitch a:hover{color:var(--text)}
.langswitch a.on{color:var(--amber)}
/* Columns are <details> so phones get an accordion. From 768px up they always
   read open: ::details-content shows them without JS where supported, the
   footer's inline script opens them everywhere else. */
@supports selector(::details-content){@media(min-width:768px){
  .foot .col details::details-content{content-visibility:visible;display:contents}
  .foot .col summary{pointer-events:none;cursor:default}}}
@media(max-width:1099px){.foot{grid-template-columns:1fr 1fr}.foot .about{grid-column:1/-1;max-width:560px}}
@media(max-width:767px){
  .foot{grid-template-columns:1fr;gap:0}
  .foot .about{margin-bottom:26px}
  .foot .col{border-top:1px solid var(--line)}
  .foot .col:last-child{border-bottom:1px solid var(--line)}
  .foot .col summary{display:flex;align-items:center;justify-content:space-between;min-height:48px;cursor:pointer}
  .foot .col summary h4{margin:0}
  .foot .col summary::after{content:"";width:7px;height:7px;margin:0 6px 4px 0;border-right:1.5px solid var(--text-3);
    border-bottom:1.5px solid var(--text-3);transform:rotate(45deg);transition:transform .2s var(--ease)}
  .foot .col details[open] summary::after{transform:rotate(-135deg);margin:4px 6px 0 0}
  .foot .col a{margin:0;padding:10px 0}
  .foot .col details[open]{padding-bottom:10px}
  .footlegal{margin-top:12px;padding-top:16px;border-top:0;gap:4px 18px}
  .footlegal a{padding:7px 0}
  .footbot{justify-content:flex-start}}
@media(prefers-reduced-motion:reduce){.foot .col summary::after{transition:none}}

/* ============ REVEAL ============ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none}

/* ============ RESPONSIVE ============ */
@media(max-width:1080px){
  .showslide{gap:40px}
}
@media(max-width:980px){
  .hero-grid{display:block}
  .console{margin-top:44px}
  .navlinks{display:none}
  .burger{display:flex}
  .bento{grid-template-columns:1fr 1fr}
  .tile.wide{grid-column:span 2}
  .channels{grid-template-columns:1fr}
  .packs{grid-template-columns:repeat(2,1fr)}
  .packwrap{grid-column:span 2;order:-1}
  .steps{grid-template-columns:1fr}
  .stats .row{grid-template-columns:1fr 1fr}
  .stat:nth-child(2){border-right:none}
  .stat{border-bottom:1px solid var(--line)}
  .stat:nth-child(3),.stat:nth-child(4){border-bottom:none}
  .showslide{grid-template-columns:1fr;gap:30px}
  .scrollcue{display:none}
  .hero{padding-bottom:70px}
}
/* mobil: dar ekranda nav sagindaki butonlar gizlenir
   980px altinda .navlinks gizlenip .burger acilir, ama .nav .right icindeki
   ghostlink + btn yerinde kalir; .nav .bar'da flex-wrap yok, bu yuzden satir
   tasar ve #burger kirpilan alanda kalir (olculdu: 374px'te sag kenar 448).
   .langdd bilerek gizlenmez -- mobil menude dil degistirici yok. */
@media(max-width:640px){
  .nav .right .ghostlink,.nav .right .btn{display:none}
  .nav .right{gap:10px}
}

@media(max-width:560px){
  .wrap{padding:0 18px}
  h1{font-size:37px}
  .hero{padding:44px 0 56px}
  .hero .sub{max-width:none;font-size:16px}
  .bento{grid-template-columns:1fr}
  .tile.wide{grid-column:span 1}
  .packs{grid-template-columns:1fr}
  .packwrap{grid-column:span 1}
  .stats .row{grid-template-columns:1fr}
  .stat{border-right:none;border-bottom:1px solid var(--line)}
  .stat:last-child{border-bottom:none}
  .cta{flex-direction:column;align-items:stretch}
  .cta .btn{width:100%}
  .sec{padding:70px 0}
  .privacy{padding:44px 22px}
  .flow{flex-direction:column;gap:0}
  .flow .link{width:2px;height:44px}
  .flow .link i{animation-name:travelv}
  .c-text{font-size:16.5px;min-height:48px}
  .finale{padding:100px 0 90px}
  .faqitem .a-in{padding-left:4px}
}
@keyframes travelv{0%{top:0;left:50%;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:100%;left:50%;opacity:0}}

/* ============ SUBPAGES ============ */
.pagehero{padding:78px 0 30px;position:relative}
.breadcrumb{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  color:var(--text-3);margin-bottom:26px;text-transform:uppercase;flex-wrap:wrap}
.breadcrumb a{color:var(--text-3);transition:color .18s}
.breadcrumb a:hover{color:var(--text)}
.breadcrumb i{font-style:normal;color:var(--text-3);opacity:.5}
.breadcrumb .cur{color:var(--amber)}
.pagehero h1{font-size:clamp(34px,4.4vw,54px);line-height:1.05;letter-spacing:-.03em;font-weight:800;max-width:20ch}
.pagehero .sub{font-size:18px;line-height:1.65;color:var(--text-2);margin-top:20px;max-width:62ch}
.pagehero .cta{margin-top:30px}
.pagehero .meta{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--text-3);margin-top:22px}

/* long-form article typography */
.prose{max-width:760px}
.prose h2{font-size:clamp(24px,2.6vw,31px);letter-spacing:-.02em;line-height:1.15;font-weight:700;margin:54px 0 16px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:19px;font-weight:600;letter-spacing:-.01em;margin:34px 0 10px}
.prose p{font-size:16px;color:var(--text-2);line-height:1.72;margin-bottom:16px}
.prose strong{color:var(--text);font-weight:600}
.prose a{color:var(--amber);border-bottom:1px solid var(--amber-glow);transition:border-color .18s}
.prose a:hover{border-bottom-color:var(--amber)}
.prose ul,.prose ol{margin:0 0 18px;display:flex;flex-direction:column;gap:9px}
.prose ul li{position:relative;padding-left:26px;font-size:15.5px;color:var(--text-2);line-height:1.6}
.prose ul li::before{content:'';position:absolute;left:2px;top:9px;width:12px;height:7px;
  border-left:2px solid var(--amber);border-bottom:2px solid var(--amber);transform:rotate(-45deg)}
.prose ol{counter-reset:li;list-style:none}
.prose ol li{position:relative;padding-left:34px;font-size:15.5px;color:var(--text-2);line-height:1.6;counter-increment:li}
.prose ol li::before{content:counter(li,decimal-leading-zero);position:absolute;left:0;top:1px;
  font-family:var(--mono);font-size:12px;color:var(--amber)}
.prose blockquote{border-left:2px solid var(--amber);padding:6px 0 6px 20px;margin:22px 0;color:var(--text);font-size:16.5px;line-height:1.6}
.callout{background:var(--panel);border:1px solid var(--line);border-left:2px solid var(--amber);border-radius:12px;
  padding:18px 22px;margin:26px 0}
.callout p{margin:0;font-size:15px}
.callout.green{border-left-color:var(--green)}

/* tables */
.tablewrap{overflow-x:auto;margin:26px 0;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
table.cmp{width:100%;border-collapse:collapse;font-size:14.5px;min-width:560px}
table.cmp th{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);
  text-align:left;padding:14px 18px;border-bottom:1px solid var(--line-2)}
table.cmp th:not(:first-child){color:var(--text)}
table.cmp th .hl{color:var(--amber)}
table.cmp td{padding:13px 18px;border-bottom:1px solid var(--line);color:var(--text-2);line-height:1.5}
table.cmp tr:last-child td{border-bottom:none}
table.cmp td:first-child{color:var(--text);font-weight:500}
table.cmp .yes{color:var(--green)}
table.cmp .no{color:var(--text-3)}

/* use-case / hub cards */
.cardgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ucard{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:18px;
  padding:26px;transition:border-color .25s,transform .3s var(--ease);position:relative;overflow:hidden}
.ucard:hover{border-color:var(--line-2);transform:translateY(-3px)}
.ucard .ic{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:var(--well);
  border:1px solid var(--line);color:var(--amber);margin-bottom:16px}
.ucard h3{font-size:17.5px;font-weight:600;letter-spacing:-.01em}
.ucard p{font-size:14px;color:var(--text-2);line-height:1.58;margin:8px 0 16px;flex:1}
.ucard .more{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--amber);margin-top:auto}
/* target page is only written in English — say so rather than surprise the reader */
.ucard .more .lngtag{font-style:normal;margin-left:7px;padding:1px 5px;border:1px solid var(--line-2);
  border-radius:4px;color:var(--text-3);font-size:9.5px;letter-spacing:.08em;vertical-align:1px}

/* page-level CTA band */
.pagecta{text-align:center;padding:90px 0;position:relative}
.pagecta h2{font-size:clamp(30px,4vw,48px);letter-spacing:-.03em;font-weight:800;line-height:1.05}
.pagecta p{font-size:17px;color:var(--text-2);margin:16px auto 30px;max-width:46ch;line-height:1.6}
.pagecta .cta{justify-content:center}

/* contact */
.contactgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1000px}
.ccard{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:28px;display:flex;flex-direction:column}
.ccard .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--well);
  border:1px solid var(--line);color:var(--amber);margin-bottom:16px}
.ccard h3{font-size:17px;font-weight:600}
.ccard p{font-size:14px;color:var(--text-2);line-height:1.6;margin:8px 0 18px;flex:1}
.ccard .mail{font-family:var(--mono);font-size:14px;color:var(--amber)}

/* account demo dashboard */
.acct{display:grid;grid-template-columns:220px 1fr;gap:28px;align-items:start}
.acct-nav{display:flex;flex-direction:column;gap:4px;position:sticky;top:92px}
.acct-nav a{font-size:14px;color:var(--text-2);padding:10px 14px;border-radius:9px;border:1px solid transparent;transition:all .18s}
.acct-nav a:hover{color:var(--text);background:var(--panel)}
.acct-nav a.on{color:var(--amber);background:var(--amber-soft);border-color:var(--amber-glow)}
.apanel{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:28px;margin-bottom:18px}
.apanel h2{font-size:19px;font-weight:600;letter-spacing:-.01em;margin-bottom:6px}
.apanel .hint{font-size:13.5px;color:var(--text-3);margin-bottom:20px}
.arow{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:15px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.arow .k{font-size:14px;color:var(--text-2)}
.arow .v{font-size:14px;color:var(--text);font-weight:500}
.arow .v.mono{font-family:var(--mono);font-size:13px}
.meter{height:8px;border-radius:5px;background:var(--well);border:1px solid var(--line);overflow:hidden;margin:14px 0 8px}
.meter i{display:block;height:100%;width:var(--w,40%);background:linear-gradient(90deg,var(--amber),#ffc961);border-radius:5px}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.field label{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.field input,.field select{background:var(--well);border:1px solid var(--line-2);border-radius:10px;color:var(--text);
  font-family:var(--font);font-size:14.5px;padding:11px 14px;outline:none;transition:border-color .18s}
.field input:focus,.field select:focus{border-color:var(--amber-glow)}
.apanel.danger{border-color:rgba(255,120,110,.3)}
.apanel.danger h2{color:#ff9d94}
.btn-danger{background:rgba(255,120,110,.12);border:1px solid rgba(255,120,110,.4);color:#ff9d94}
.btn-danger:hover{background:rgba(255,120,110,.2)}
/* Account top-up packs — reuse the pricing .pack card design */
.topups{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:12px;margin-top:20px;align-items:stretch}
.topups .pack{font-family:inherit;color:var(--text);text-align:left;cursor:pointer;width:100%}
.topups .pack .buy{pointer-events:none;display:block}
.topups .pack:hover .buy{border-color:var(--text-3);background:var(--well)}
.topups .pack.feat .buy{background:var(--amber);border-color:transparent;color:#1a1206}
.topups .pack.feat:hover .buy{background:#ffc043}
.topups .pack:disabled{opacity:.55;pointer-events:none}

/* 404 */
.nf{min-height:62vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:80px 24px}
.nf .code{font-family:var(--mono);font-size:clamp(80px,14vw,150px);font-weight:600;line-height:1;color:var(--amber);
  text-shadow:0 0 60px var(--amber-glow)}
.nf h1{font-size:clamp(24px,3vw,34px);letter-spacing:-.02em;margin:18px 0 10px}
.nf p{font-size:16px;color:var(--text-2);max-width:44ch;line-height:1.6;margin-bottom:28px}

@media(max-width:980px){
  .cardgrid{grid-template-columns:1fr 1fr}
  .contactgrid{grid-template-columns:1fr}
  .acct{grid-template-columns:1fr}
  .acct-nav{position:static;flex-direction:row;flex-wrap:wrap}
}
@media(max-width:560px){
  .cardgrid{grid-template-columns:1fr}
  .pagehero{padding:48px 0 20px}
}

/* ============ CAPTURE MODE (screenshots only) ============ */
.capture .snav .snav-body{grid-template-rows:1fr}
.capture .snav{opacity:1}

/* ============ REDUCED MOTION (opt-in via #reduce) ============ */
html.reduce *,html.reduce *::before,html.reduce *::after{animation:none!important;transition-duration:.01ms!important}
html.reduce .reveal,html.reduce .load-rise,html.reduce .load-fade{opacity:1;transform:none}
html.reduce .snav{opacity:1}
html.reduce .snav .snav-body{grid-template-rows:1fr}
html.reduce .shotstack img{transition:none}
html.reduce #wavefield,html.reduce #wavefield2{display:none}
html.reduce .privacy .draw{stroke-dashoffset:0}
html.reduce .howline i{transform:scaleX(1)}

/* ============ TESTIMONIALS ============ */
.tcard{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:30px;transition:all .25s var(--ease)}
.tcard:hover{border-color:var(--line-2);transform:translateY(-3px)}
.tcard .stars{color:var(--amber);font-size:14px;margin-bottom:14px;letter-spacing:2px}
.tcard .quote-orig{font-size:14.5px;color:var(--text);line-height:1.6;font-style:italic;margin-bottom:12px}
.tcard .quote-trans{font-size:13.5px;color:var(--text-2);line-height:1.55;font-style:italic;border-top:1px dashed var(--line-2);padding-top:12px;margin-bottom:14px}
.tcard .author{font-family:var(--mono);font-size:12px;color:var(--text-3);margin-top:auto}
.hidden{display:none!important}

/* ============ LANGUAGES PAGE ============ */
.stats .row.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:980px){.stats .row.three{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.stats .row.three{grid-template-columns:1fr}}

/* Share the prose column: the toolbar and table live outside <article class="prose">
   (so the table is not styled as body copy), but they must still line up with it. */
.langtools,.langwrap,.langempty,.prosefig{max-width:760px}

/* ---- content pages: one centred text column ----
   Every page with a .pagehero is a single column of prose. It used to sit at
   the LEFT edge of the 1200px wrap, leaving ~390px of dead space on the right
   that read as a missing sidebar. All the boxes that make up that column get
   the same 760px measure and auto margins, so they keep one shared left edge
   and the block centres as a whole. Card/grid components keep the full wrap
   width on purpose. The homepage has no .pagehero and is untouched. */
/* ...except the account page, whose .acct really is a two-column layout (a
   220px sticky nav beside the panels). Its hero stays full wrap width so the
   title lines up with the nav below it. */
body:has(.pagehero):not(:has(.acct)) .pagehero .wrap{max-width:calc(760px + 48px)}
body:has(.pagehero) .contactgrid{margin-left:auto;margin-right:auto}
body:has(.pagehero) .prose,
body:has(.pagehero) .sechead,
body:has(.pagehero) .faqlist,
body:has(.pagehero) .prosefig,
body:has(.pagehero) .tablewrap,
body:has(.pagehero) .langtools,
body:has(.pagehero) .langempty,
body:has(.pagehero) .callout,
body:has(.pagehero) .macnote,
body:has(.pagehero) .pricenote,
body:has(.pagehero) .sec > .wrap > p{max-width:760px;margin-left:auto;margin-right:auto}
/* A few pages nest <section><div class="wrap"> INSIDE <article class="prose">
   (pre-existing markup quirk, e.g. how-it-works). That inner wrap re-applied its
   24px gutter and pushed those headings 24px right of the body text - visible
   now that the column is centred. A nested wrap adds no gutter of its own. */
body:has(.pagehero) .prose .wrap{padding-left:0;padding-right:0}

.langtools{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin:24px 0 0}
.langsearch{flex:1 1 190px;max-width:250px;height:40px;padding:0 16px;
  background:var(--panel);border:1px solid var(--line);border-radius:99px;
  color:var(--text);font-family:var(--font);font-size:14px;
  transition:border-color .25s}
.langsearch::placeholder{color:var(--text-3)}
.langsearch:focus{outline:none;border-color:var(--line-2)}
.langsearch::-webkit-search-cancel-button{filter:invert(.6)}
.langfilter{display:inline-flex;align-items:center;height:40px;padding:0 16px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:99px;background:var(--panel);
  color:var(--text-2);cursor:pointer;white-space:nowrap;transition:all .25s}
.langfilter:hover{border-color:var(--line-2);color:var(--text)}
.langfilter.on{background:var(--amber);border-color:transparent;color:#1a1206;font-weight:600}
.langcount{margin-left:auto;font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  color:var(--text-3);white-space:nowrap}

.langwrap{max-height:600px;overflow-y:auto;margin:18px 0 0}
/* table.cmp forces 560px so wide comparison tables scroll on a phone; this one
   is three short columns and fits, so let it breathe instead of scrolling. */
table.langtable{min-width:380px}
table.langtable th:first-child,table.langtable td:first-child{width:52%}
table.langtable thead th{position:sticky;top:0;z-index:2;background:var(--panel);
  box-shadow:inset 0 -1px 0 var(--line-2)}
table.langtable td:first-child{white-space:nowrap}
table.langtable .pip{display:inline-block;width:6px;height:6px;border-radius:50%;
  margin-right:9px;vertical-align:1px;background:currentColor}
table.langtable .no .pip{opacity:.5}
table.langtable tr.hide{display:none}
.langempty{padding:24px 18px;text-align:center;color:var(--text-3);font-size:14px;
  border:1px solid var(--line);border-radius:14px;background:var(--panel);margin-top:18px}

@media(max-width:560px){
  .langtools{gap:8px}
  .langsearch{flex:1 1 100%;max-width:none}
  .langcount{margin-left:0;width:100%}
}

/* ---------- floating contact button ---------- */
.contact-fab{position:fixed;right:22px;bottom:22px;z-index:95;display:inline-flex;
  align-items:center;gap:9px;height:52px;padding:0 20px 0 16px;border-radius:99px;
  background:var(--amber);color:#1a1206;font-weight:600;font-size:14px;
  box-shadow:0 10px 30px -8px var(--amber-glow),0 0 0 1px rgba(255,178,36,.35);
  transition:transform .3s var(--spring),box-shadow .3s var(--ease);
  animation:fabPulse 2.6s ease-in-out infinite}
.contact-fab:hover{transform:translateY(-3px) scale(1.03);
  box-shadow:0 16px 40px -8px var(--amber-glow),0 0 0 1px rgba(255,178,36,.5)}
.contact-fab svg{flex:none}
.contact-fab span{white-space:nowrap}
.reduce .contact-fab{animation:none}
@keyframes fabPulse{
  0%,100%{box-shadow:0 10px 30px -8px var(--amber-glow),0 0 0 1px rgba(255,178,36,.35)}
  50%{box-shadow:0 10px 34px -6px var(--amber-glow),0 0 0 7px rgba(255,178,36,.12)}
}
@media(max-width:560px){
  .contact-fab{right:16px;bottom:16px;height:48px;padding:0 16px 0 14px}
  .contact-fab span{display:none}
}

/* ============ ENTERPRISE / VOLUME CARD (added 2026-08-05) ============ */
.entcard{
  display:flex;align-items:center;justify-content:space-between;gap:28px;
  background:linear-gradient(120deg,rgba(255,178,36,.05),rgba(255,178,36,0) 60%),var(--panel);
  border:1px dashed rgba(255,178,36,.35);
  border-radius:16px;padding:30px 32px;margin-top:22px;
}
@media (max-width:760px){.entcard{flex-direction:column;text-align:center}}
.ent-left{max-width:640px}
.ent-eyebrow{
  display:inline-block;font-family:var(--mono);font-size:10px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--amber);
  background:var(--amber-soft);border:1px solid rgba(255,178,36,.28);
  padding:4px 11px;border-radius:99px;margin-bottom:12px;
}
.ent-left h2{font-size:21px;font-weight:700;margin-bottom:7px;letter-spacing:-.01em}
.ent-left p{font-size:14.5px;color:var(--text-2);line-height:1.6;max-width:56ch}

/* erisilebilirlik: atlama baglantisi + gorunmez metin
   .skiplink her sayfanin <header>'inden once duruyor ve yalniz klavye
   odaginda gorunur. .visually-hidden tablolarin <caption>'i icin: ekran
   okuyucu okur, gorsel duzen degismez. */
.skiplink{position:absolute;left:-9999px;top:0;z-index:9999}
.skiplink:focus{left:12px;top:12px;padding:10px 16px;background:var(--amber,#ffb224);color:#1a1206;border-radius:8px;font-weight:600;text-decoration:none}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* LCP: hero alt basligi opacity:0 ile basliyordu
   7 yerel ana sayfanin LCP ogesi .hero .sub.load-fade ve giris animasyonu
   onu gorunmez baslatiyordu, yani en buyuk boya FCP'den ~1 sn sonra geliyordu.
   Yalniz bu oge aciliyor; eyebrow, H1 kelimeleri, CTA ve konsol maketinin
   giris animasyonu aynen kaliyor. */
.hero .sub.load-fade{opacity:1;animation:none}

/* ---------- ad video (homepage) ---------- */
#video .vidbox{position:relative;max-width:960px;margin:0 auto;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid var(--line-2);background:var(--well);box-shadow:0 30px 70px -30px rgba(0,0,0,.8)}
#video .vidbox>*{position:absolute;inset:0;width:100%;height:100%}
#video .vfacade{display:block;padding:0;margin:0;border:0;cursor:pointer;background:var(--well);text-align:left;font:inherit;color:inherit}
#video .vfacade img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease),filter .5s var(--ease)}
#video .vfacade:hover img,#video .vfacade:focus-visible img{transform:scale(1.03)}
#video .vfacade::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,16,19,.5) 0%,rgba(14,16,19,0) 32%);pointer-events:none}
#video .vplay{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:var(--amber);color:#1a1206;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 40px -6px var(--amber-glow),0 0 0 0 rgba(255,178,36,.45);transition:transform .35s var(--spring),box-shadow .35s var(--ease);z-index:2}
#video .vfacade:hover .vplay,#video .vfacade:focus-visible .vplay{transform:scale(1.08);box-shadow:0 14px 48px -6px var(--amber-glow),0 0 0 14px rgba(255,178,36,.12)}
#video .vplay svg{width:30px;height:30px;margin-left:4px}
#video .vmeta{position:absolute;left:18px;top:16px;z-index:2;display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text)}
#video .vmeta i{width:6px;height:6px;border-radius:50%;background:var(--amber);box-shadow:0 0 8px var(--amber-glow)}
#video .vmeta b{color:var(--amber);font-weight:500}
#video .vnote{text-align:center;margin-top:18px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--text-3);text-transform:uppercase}
@media (max-width:640px){#video .vplay{width:64px;height:64px;margin:-32px 0 0 -32px}#video .vplay svg{width:24px;height:24px}#video .vmeta{left:12px;top:10px;font-size:10px}}

/* download: Linux/snap channel — the grid carries four cards, and the card
   shows its install command inline. */
.channels.four{grid-template-columns:repeat(2,1fr)}
@media(max-width:640px){.channels.four{grid-template-columns:1fr}}
.channel p code{font-family:var(--mono);font-size:12.5px;color:var(--text);background:var(--well);
  border:1px solid var(--line);border-radius:6px;padding:2px 7px;white-space:nowrap}

/* /download — macOS-only notice + "I want the Mac app" demand counter (2026-09-06) */
.macnote{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:0 0 18px;padding:16px 18px;border:1px solid var(--line-2);border-radius:14px;background:linear-gradient(180deg,var(--panel-2),var(--panel));box-shadow:inset 0 0 0 1px var(--amber-soft)}
.macnote-ic{flex:0 0 auto;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--amber-soft);color:var(--amber)}
.macnote-body{flex:1 1 300px;min-width:0}
.macnote-body strong{display:block;font-size:15px;color:var(--text);margin-bottom:4px}
.macnote-body p{margin:0;font-size:14px;line-height:1.6;color:var(--text-2)}
.macnote-act{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.macnote .btn{padding:10px 16px;font-size:13.5px}
.faqitem .a-in p{margin:0 0 12px}
.faqitem .a-in p:last-of-type{margin-bottom:0}
.macwant{margin-top:14px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.macwant .btn{padding:9px 14px;font-size:13px}
.macwant-done{font-size:13.5px;color:var(--green);line-height:1.5}
.macwant-done a{color:var(--text);text-decoration:underline}
@media(max-width:560px){.macnote-act{width:100%}.macnote-act .btn{flex:1 1 auto;justify-content:center}}

/* ============ MEGA MENU (2026-09-14) ============================
   Replaces the 46 hand-rolled nav variants. <details> so it works with
   no JS and is keyboard-operable; main.js only adds close-on-outside
   and one-open-at-a-time. All hrefs are root-absolute. */
.nav .bar{position:relative}
.navlinks .navflat{font-size:14px;color:var(--text-2);padding:7px 12px;border-radius:8px;transition:color .18s,background .18s}
.navlinks .navflat:hover{color:var(--text);background:rgba(235,240,245,.05)}

.mega{position:static}
.mega>summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:5px;
  font-size:14px;color:var(--text-2);padding:7px 12px;border-radius:8px;
  transition:color .18s,background .18s;white-space:nowrap}
.mega>summary::-webkit-details-marker{display:none}
.mega>summary:hover{color:var(--text);background:rgba(235,240,245,.05)}
.mega[open]>summary{color:var(--amber);background:rgba(235,240,245,.05)}
.mega>summary .mchev{opacity:.6;transition:transform .2s var(--ease)}
.mega[open]>summary .mchev{transform:rotate(180deg);opacity:1}
.mega>summary:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

.mega-panel{
  position:absolute;left:0;right:0;top:calc(100% + 10px);z-index:60;
  background:rgba(23,25,29,.98);backdrop-filter:blur(18px) saturate(150%);
  border:1px solid var(--line-2);border-radius:16px;
  box-shadow:0 30px 70px -28px rgba(0,0,0,.9);
  padding:22px 24px;animation:megaIn .18s var(--ease)}
@keyframes megaIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.mega-panel{animation:none}.mega>summary .mchev{transition:none}}

.mega-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px 26px}
.mega-col{display:flex;flex-direction:column;gap:1px;min-width:0}
.mega-col h4{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-3);font-weight:500;margin:0 0 8px;padding:0 10px}
.mega-col a{
  font-size:13.5px;color:var(--text-2);padding:7px 10px;border-radius:8px;line-height:1.35;
  transition:background .14s,color .14s}
.mega-col a:hover{background:var(--well);color:var(--text)}
.mega-col a:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}
.mega-col a[aria-current]{color:var(--amber)}

/* mobile accordion inside #mobilemenu */
.mm-group{border-bottom:1px solid var(--line)}
.mm-group>summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  padding:13px 6px;font-size:16px;color:var(--text-2)}
.mm-group>summary::-webkit-details-marker{display:none}
.mm-group[open]>summary{color:var(--amber)}
.mm-group>summary .mchev{opacity:.6;transition:transform .2s var(--ease)}
.mm-group[open]>summary .mchev{transform:rotate(180deg)}
.mm-body{padding:2px 0 12px 10px;display:flex;flex-direction:column}
.mm-h{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-3);margin:10px 0 4px}
.mm-h:first-child{margin-top:2px}
.mm-body a{padding:9px 4px;font-size:14.5px;border-bottom:none;color:var(--text-2)}
.mm-body a:hover{color:var(--text)}

@media(max-width:1180px){
  .mega>summary,.navlinks .navflat{padding:7px 9px;font-size:13.5px}
  .nav .bar{gap:18px}
}
@media(max-width:980px){
  .mega-panel{display:none}
}

/* ============ TOUR PILL (2026-09-24) ============ */
/* Header pill to the interactive tour. Lives in .nav .right so it survives
   the 980px .navlinks cut-off; nav_tour_button.py inserts it site-wide. */
.navtour{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  font-size:13.5px;font-weight:600;color:var(--amber);padding:7px 14px 7px 11px;
  border:1px solid var(--amber-glow);border-radius:999px;background:var(--amber-soft);
  transition:background .18s,border-color .18s,color .18s,transform .18s}
.navtour:hover{background:var(--amber);border-color:var(--amber);color:#131518}
.navtour:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.navtour .nt-dot{position:relative;display:inline-grid;place-items:center;
  width:18px;height:18px;border-radius:50%;background:var(--amber);color:#131518;flex:none}
.navtour .nt-dot svg{margin-left:1px}
.navtour .nt-dot::after{content:"";position:absolute;inset:-3px;border-radius:50%;
  border:1.5px solid var(--amber);opacity:0;animation:ntPulse 2.4s var(--ease,ease-out) infinite}
.navtour:hover .nt-dot{background:#131518;color:var(--amber)}
.navtour .nt-s{display:none}
@keyframes ntPulse{0%{opacity:.7;transform:scale(.85)}70%,100%{opacity:0;transform:scale(1.45)}}
@media(prefers-reduced-motion:reduce){.navtour .nt-dot::after{animation:none}}
/* Space budget: the header already ran out of room in de at 1024px before
   the pill existed, so the pill goes short and the bar tightens as it narrows
   instead of pushing the right cluster further off-screen. */
@media(max-width:1360px){.navtour .nt-l{display:none}.navtour .nt-s{display:inline}}
@media(max-width:1280px){.nav .right .ghostlink{display:none}}
@media(max-width:1100px) and (min-width:981px){
  .nav .bar{gap:12px}.nav .right{gap:10px}.navlinks{margin-left:0;gap:2px}
  .mega>summary,.navlinks .navflat{padding:7px 7px}
  /* the flat Download link duplicates the primary Download button beside it */
  .navlinks .navflat[href$="/download"],.navlinks .navflat[href="/tr/indir"]{display:none}}
@media(max-width:640px){.navtour{padding:6px 10px 6px 7px;font-size:13px;gap:6px}}
@media(max-width:400px){.navtour .nt-dot{display:none}.navtour{padding:6px 10px}}
@media(max-width:350px){.nav .right .navtour{display:none}}
.mm-tour{display:flex;align-items:center;gap:12px;margin:6px 0 10px;padding:13px 14px!important;
  border:1px solid var(--amber-glow);border-radius:12px;background:var(--amber-soft);color:var(--text)!important}
.mm-tour .nt-dot{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--amber);color:#131518;flex:none}
.mm-tour b{display:block;font-size:15px;color:var(--amber);font-weight:600}
.mm-tour small{display:block;font-size:12.5px;color:var(--text-2);margin-top:2px}

/* ============ PLANS (moved from the inline #plans <style>, md5 e58cfb36, 2026-10-20) ============
   Verbatim copy: pages that still carry the inline block render the same either way. */
#plans{padding-top:8px}
#plans [hidden]{display:none!important}
#plans .pguide{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 22px;max-width:900px;margin:0 auto 40px;font-size:14.5px;color:var(--text-2)}
#plans .pguide>span{display:inline-flex;align-items:center;gap:9px}
#plans .pguide i{width:7px;height:7px;border-radius:50%;background:var(--amber);flex:none}
#plans .pguide>span+span i{background:var(--text-3)}
#plans .pguide b{color:var(--text);font-weight:600}
#plans .pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.08fr);gap:12px;align-items:stretch}
#plans .pgrid[data-np="2"]{grid-template-columns:repeat(2,minmax(0,1fr)) minmax(0,1.08fr)}
#plans .pgrid[data-np="1"]{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr)}
#plans .pgrid[data-np="0"]{grid-template-columns:minmax(0,520px);justify-content:center}
#plans .ghead{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);display:flex;align-items:center;gap:12px;padding:0 4px 6px}
#plans .ghead.one::after{content:"";flex:1;height:1px;background:var(--line-2)}
#plans .ghead.sub{grid-column:1/4;flex-wrap:wrap;row-gap:8px}
#plans .pgrid[data-np="2"] .ghead.sub{grid-column:1/3}
#plans .pgrid[data-np="1"] .ghead.sub{grid-column:1/2}
#plans .ghead .gl{flex:1;height:1px;background:var(--line-2);min-width:16px}
#plans .ghead b{color:var(--amber);font-weight:500}
#plans .pcol{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:26px 20px 20px;position:relative;scroll-margin-top:110px}
#plans .pcol.feat{background:linear-gradient(180deg,rgba(255,178,36,.09),rgba(255,178,36,0) 50%),var(--panel);border-color:var(--amber);box-shadow:0 0 54px -22px var(--amber-glow)}
#plans .panchor{position:absolute;top:0;left:0;width:1px;height:1px;scroll-margin-top:110px}
#plans .tagp{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;color:#1a1206;background:var(--amber);padding:3px 10px;border-radius:6px;white-space:nowrap}
#plans .tagp.soft{background:var(--panel-2);color:var(--amber);border:1px solid var(--amber-glow)}
#plans .plabel{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
#plans .pcol h3{font-size:21px;font-weight:700;letter-spacing:-.01em;margin-top:6px}
#plans .who{font-size:13px;color:var(--text-2);margin-top:3px;min-height:38px;line-height:1.45}
#plans .pmins{font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1;margin-top:18px}
#plans .pmins small{font-size:13.5px;font-weight:500;color:var(--text-2)}
#plans .hours{font-size:12px;color:var(--text-3);margin-top:5px}
#plans .pprice{font-size:23px;font-weight:700;margin-top:14px;letter-spacing:-.01em}
#plans .pprice small{font-size:13px;font-weight:500;color:var(--text-2)}
#plans .pprice s{font-size:15px;font-weight:500;color:var(--text-3);text-decoration-thickness:1.5px;margin-right:7px}
#plans .pafter{font-size:12px;color:var(--text-3);margin-top:5px;min-height:34px;line-height:1.45}
#plans .pafter em{font-style:normal;color:var(--green)}
#plans .psave{display:inline-block;font-family:var(--mono);font-size:10.5px;font-weight:500;color:var(--green);border:1px solid rgba(62,207,142,.35);border-radius:5px;padding:0 6px;margin-right:6px;white-space:nowrap}
#plans .pseg{display:inline-flex;padding:3px;gap:3px;background:var(--well);border:1px solid var(--line);border-radius:999px;font-family:var(--font);text-transform:none;letter-spacing:0}
#plans .pseg button{appearance:none;border:0;background:transparent;color:var(--text-2);font:inherit;font-size:12.5px;font-weight:600;padding:6px 13px;border-radius:999px;cursor:pointer;display:inline-flex;gap:6px;align-items:center}
#plans .pseg button[aria-pressed=true]{background:var(--panel-2);color:var(--text);box-shadow:inset 0 0 0 1px var(--line-2)}
#plans .pseg button:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
#plans .pseg .save{font-family:var(--mono);font-size:10px;color:var(--green)}
#plans .pcheck{margin:16px 0 18px;padding:0;list-style:none;font-size:13px;line-height:1.5;color:var(--text-2)}
#plans .pcheck li{position:relative;padding:4px 0 4px 21px}
#plans .pcheck li::before{content:"";position:absolute;left:2px;top:10px;width:9px;height:5px;border-left:2px solid var(--green);border-bottom:2px solid var(--green);transform:rotate(-45deg)}
#plans .pcheck b{color:var(--text);font-weight:600}
#plans .pbtn{display:block;margin-top:auto;width:100%;text-align:center;padding:12px 14px;border-radius:11px;font-size:14px;font-weight:600;border:1px solid var(--line-2);color:var(--text);background:transparent;transition:background .18s,border-color .18s}
#plans .pbtn:hover{border-color:var(--text-3);background:var(--well)}
#plans .pbtn.pri{background:var(--amber);border-color:transparent;color:#1a1206}
#plans .pbtn.pri:hover{background:#ffc043}
#plans .assure{display:flex;gap:7px;align-items:flex-start;font-size:11.5px;color:var(--text-2);margin-top:10px;line-height:1.45}
#plans .assure svg{flex:none;margin-top:1px;color:var(--green)}
#plans .pcol.pack2{background:var(--well)}
#plans .picker{display:grid;gap:5px;margin-top:14px}
#plans .opt{display:grid;grid-template-columns:16px 1fr auto;gap:9px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:9px;cursor:pointer;transition:border-color .15s,background .15s;scroll-margin-top:120px}
#plans .opt:hover{border-color:var(--line-2)}
#plans .opt input{appearance:none;width:15px;height:15px;border:1.5px solid var(--text-3);border-radius:50%;margin:0;display:grid;place-items:center}
#plans .opt input:checked{border-color:var(--text)}
#plans .opt input:checked::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--text)}
#plans .opt input:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
#plans .opt:has(input:checked){border-color:var(--line-2);background:var(--panel-2)}
#plans .opt .n{font-size:13.5px;font-weight:600}
#plans .opt .n em{font-style:normal;font-weight:500;color:var(--text-3);font-size:12px;margin-left:1px}
#plans .opt .p{text-align:right;font-size:13.5px;font-weight:650}
#plans .opt .p span{display:block;font-family:var(--mono);font-size:9.5px;font-weight:400;color:var(--text-3)}
#plans .opt .p s.vx-was{display:block;font-size:11px;font-weight:500;color:var(--text-3)}
#plans .opt .n [class$="-chip"]{display:inline-block;margin:2px 0 0 6px;padding:1px 7px;font-size:9.5px;vertical-align:1px}
#plans .pack2 [class$="-banner"]{margin:14px 0 -6px;padding:8px 11px;font-size:12px;line-height:1.4}
#plans .freerow{display:flex;margin-top:16px;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;border:1px dashed var(--line-2);border-radius:14px;padding:15px 20px;font-size:13.5px;color:var(--text-2)}
#plans .freerow b{color:var(--text);font-weight:600}
#plans .freerow a{color:var(--amber);font-weight:600;white-space:nowrap}
#plans .cmpbox{margin-top:26px;border:1px solid var(--line);border-radius:14px;background:var(--panel);overflow:hidden}
#plans .cmpbox summary{cursor:pointer;list-style:none;padding:16px 22px;font-weight:600;font-size:15px;display:flex;justify-content:space-between;align-items:center}
#plans .cmpbox summary::-webkit-details-marker{display:none}
#plans .cmpbox summary::after{content:"+";font-family:var(--mono);font-size:18px;color:var(--text-3)}
#plans .cmpbox[open] summary::after{content:"–"}
#plans .cmpscroll{overflow-x:auto;border-top:1px solid var(--line)}
#plans table.cmp{min-width:720px}
#plans table.cmp th{padding:13px 18px;text-align:left;border-bottom:1px solid var(--line)}
#plans table.cmp .hl{background:rgba(255,178,36,.04)}
#plans .pfine{font-size:12.5px;color:var(--text-3);text-align:center;margin:18px auto 0;line-height:1.6;max-width:980px}
#plans .pfine a{color:var(--text-2);border-bottom:1px solid var(--line-2)}
#plans #edu-detail{margin-top:18px}
@media(max-width:1100px){#plans .pgrid,#plans .pgrid[data-np="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}#plans .pgrid[data-np="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}#plans .pgrid[data-np="1"],#plans .pgrid[data-np="0"]{grid-template-columns:minmax(0,560px);justify-content:center}#plans .pgrid .ghead.sub{grid-column:1/-1}#plans .ghead.one{grid-column:1/-1;order:5}#plans .pcol.pack2{grid-column:1/-1;order:6}}
@media(max-width:760px){#plans .pgrid,#plans .pgrid[data-np]{grid-template-columns:minmax(0,1fr)}#plans .ghead .gl{display:none}#plans .ghead.sub{justify-content:space-between}#plans .pguide{flex-direction:column;align-items:flex-start;max-width:420px}#plans .who,#plans .pafter{min-height:0}#plans .pcheck{margin-top:12px}}

/* ============ PLANS — Faz 1 layout (2026-10-20) ============
   Scoped to #plans blocks that no longer carry the inline <style> copy, so the
   pages still holding it keep today's layout until they are migrated. Browsers
   without :has() drop these rules and get the base layout above, unchanged. */
@media(min-width:768px) and (max-width:1100px){
  #plans:not(:has(>style)) .pgrid,#plans:not(:has(>style)) .pgrid[data-np="3"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  #plans:not(:has(>style)) .pgrid:not([data-np="2"]):not([data-np="1"]):not([data-np="0"]) [data-plan-card="ultra"]{grid-column:1;grid-row:3/span 2}
  #plans:not(:has(>style)) .pgrid:not([data-np="2"]):not([data-np="1"]):not([data-np="0"]) .ghead.one{grid-column:2;grid-row:3;order:0;align-self:end}
  #plans:not(:has(>style)) .pgrid:not([data-np="2"]):not([data-np="1"]):not([data-np="0"]) .pcol.pack2{grid-column:2;grid-row:4;order:0}
}
@media(max-width:767.98px){
  #plans:not(:has(>style)) .pgrid,#plans:not(:has(>style)) .pgrid[data-np]{grid-template-columns:minmax(0,1fr)}
  #plans:not(:has(>style)) .ghead .gl{display:none}
  #plans:not(:has(>style)) .ghead.sub{justify-content:space-between}
  #plans:not(:has(>style)) .pguide{flex-direction:column;align-items:flex-start;max-width:420px}
  #plans:not(:has(>style)) .who,#plans:not(:has(>style)) .pafter{min-height:0}
  #plans:not(:has(>style)) .pcheck{margin-top:12px}
}
/* touch + legibility: billing switch >=40px tall, mono text >=11.5px */
#plans:not(:has(>style)) .pseg button{min-height:36px;padding:8px 15px;font-size:13px}
#plans:not(:has(>style)) .ghead,#plans:not(:has(>style)) .plabel,#plans:not(:has(>style)) .tagp,
#plans:not(:has(>style)) .psave,#plans:not(:has(>style)) .pseg .save,#plans:not(:has(>style)) .opt .p span{font-size:var(--fs-mono-min)}
#plans:not(:has(>style)) .opt{min-height:44px}

/* ============ FAZ 1 (2026-10-20): design tokens in use, header, hero ============
   Appended after every older rule so it wins on equal specificity. Nothing above
   was removed: pages not yet migrated still use .eyebrow, .hword, .ghostlink and
   the inline #plans <style>, and must render exactly as before. */

/* font swap without layout shift: while Schibsted Grotesk loads, text is set in a
   local Arial face scaled to Schibsted's widths and line box (size-adjust measured on
   the hero H1 at 800 and the hero sub at 400/600; ascent/descent from the font's own
   metrics divided by size-adjust). Where Arial is missing the stack falls through to
   system-ui exactly as before. Latin ranges only, so CJK/Hangul keep their old fallback. */
@font-face{font-family:'Schibsted Fallback';font-weight:400 599;src:local('Arial'),local('ArialMT');
  size-adjust:103.8%;ascent-override:94.1%;descent-override:24.8%;line-gap-override:0%;
  unicode-range:U+0000-024F,U+02BB-02BC,U+02C6-02DD,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1EFF,U+2000-206F,U+20A0-20C0,U+2113,U+2122,U+2191,U+2193,U+2212,U+2215,U+2C60-2C7F,U+A720-A7FF,U+FEFF,U+FFFD;}
@font-face{font-family:'Schibsted Fallback';font-weight:600 749;src:local('Arial Bold'),local('Arial-BoldMT');
  size-adjust:98.9%;ascent-override:98.7%;descent-override:26.1%;line-gap-override:0%;
  unicode-range:U+0000-024F,U+02BB-02BC,U+02C6-02DD,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1EFF,U+2000-206F,U+20A0-20C0,U+2113,U+2122,U+2191,U+2193,U+2212,U+2215,U+2C60-2C7F,U+A720-A7FF,U+FEFF,U+FFFD;}
@font-face{font-family:'Schibsted Fallback';font-weight:750 900;src:local('Arial Bold'),local('Arial-BoldMT');
  size-adjust:105.1%;ascent-override:92.9%;descent-override:24.5%;line-gap-override:0%;
  unicode-range:U+0000-024F,U+02BB-02BC,U+02C6-02DD,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1EFF,U+2000-206F,U+20A0-20C0,U+2113,U+2122,U+2191,U+2193,U+2212,U+2215,U+2C60-2C7F,U+A720-A7FF,U+FEFF,U+FFFD;}
:root{--font:'Schibsted Grotesk','Schibsted Fallback',system-ui,sans-serif}

/* type: minimum size for mono labels the reader is meant to read */
.c-head,.c-foot,.c-status,.chip,.c-dir,.mega-col h4,.mm-h,.langdd-menu a .cc{font-size:var(--fs-mono-min)}
.c-dir{letter-spacing:.12em}
.c-foot{letter-spacing:.06em}

/* focus: one ring everywhere, visible on amber and on graphite */
:focus-visible{outline:var(--focus-w) solid var(--focus);outline-offset:3px}

/* ---------- header: tour pill short form, icon-only below 1360px ---------- */
.navtour .nt-l{display:none}
.navtour .nt-s{display:inline}
@media(max-width:1359.98px){
  .navtour{padding:6px;gap:0;min-width:36px;min-height:36px;justify-content:center}
  .navtour .nt-s{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .navtour .nt-dot{display:inline-grid;width:22px;height:22px}
}
@media(max-width:400px){.navtour .nt-dot{display:inline-grid}.navtour{padding:6px}}

/* ---------- hero: lede, static H1, two CTAs + text links ---------- */
.hero .lede{display:flex;align-items:baseline;gap:var(--s3);margin:0 0 var(--s6);text-wrap:balance;
  font-size:var(--fs-base);line-height:1.5;color:var(--text-2)}
.hero .lede::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--amber);
  box-shadow:0 0 8px var(--amber-glow);transform:translateY(-2px)}
h1 .hl{display:block}
/* Japanese has no spaces: break only at the <wbr> phrase marks, as the old per-word spans did */
html[lang="ja"] h1 .hl{word-break:keep-all;overflow-wrap:anywhere}
h1 .hl-grad{width:fit-content;max-width:100%;padding-bottom:.08em;margin-bottom:-.08em;
  background:linear-gradient(115deg,#ffd98a 5%,var(--amber) 55%,#ff9d00);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero .cta-alt{margin-top:var(--s4);font-size:var(--fs-sm);line-height:1.6;color:var(--text-2)}
.hero .cta-alt a{display:inline-block;padding:4px 0;color:var(--text);text-decoration:underline;
  text-decoration-color:var(--line-2);text-decoration-thickness:1px;text-underline-offset:4px;
  transition:color .18s,text-decoration-color .18s}
.hero .cta-alt a:hover{color:var(--amber);text-decoration-color:var(--amber-glow)}
.hero .cta-alt .sep{color:var(--text-3);margin:0 var(--s2)}
@media(max-width:560px){
  .c-dir{letter-spacing:.06em}
  .hero .lede{font-size:15px;margin-bottom:var(--s5)}
  .hero .cta-alt{text-align:center}
}

/* ---------- reduced motion: the OS setting, not only #reduce ----------
   Content that animates in is shown at once and decorative loops stop. The
   wavefield canvas and the console typing are script-driven and stay. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;animation-delay:0s!important;scroll-behavior:auto!important}
  .reveal,.load-rise,.load-fade{opacity:1;transform:none}
  /* The language-pair ticker and the console demo are product content, not decoration: keep them moving under reduced motion (2026-10-17, owner). */
  .tick-track{animation-duration:46s!important;animation-iteration-count:infinite!important}
  .tick-row.rev .tick-track{animation-duration:52s!important}
  .snav{opacity:1}
  .snav .snav-body{grid-template-rows:1fr}
  .privacy .draw{stroke-dashoffset:0}
  .howline i{transform:scaleX(1)}
  .noise{animation:none!important}
}

/* ============ visual QA wave 2026-10-21 (additive; .vault/site-gorsel-denetim-2026-10-21.md) ============ */
/* Horizontal scrollers: an edge glow says "more this way"; the local-attached cover slides over it at each end. */
.tablewrap,#plans .cmpscroll,div[style="overflow-x:auto"],.prose pre.cmd{--sc:var(--panel);
  background:linear-gradient(90deg,var(--sc) 35%,transparent) left center/32px 100% no-repeat local,
    linear-gradient(270deg,var(--sc) 35%,transparent) right center/32px 100% no-repeat local,
    linear-gradient(90deg,rgba(233,238,243,.24),transparent) left center/22px 100% no-repeat scroll,
    linear-gradient(270deg,rgba(233,238,243,.24),transparent) right center/22px 100% no-repeat scroll,
    var(--sc)}
div[style="overflow-x:auto"]{--sc:var(--bg)}
/* /download repo commands: one block per command; wide screens wrap at spaces with a hanging indent, phones keep one line and scroll (Chrome would break inside "voxis-archive"). */
.prose pre.cmd{--sc:var(--well);margin:12px 0 18px;padding:11px 14px 11px calc(14px + 1.5em);text-indent:-1.5em;border:1px solid var(--line);
  border-radius:10px;overflow-x:auto;white-space:pre-wrap;word-break:normal;overflow-wrap:normal;
  font-family:var(--mono);font-size:13px;line-height:1.6;color:var(--text)}
.prose pre.cmd code{font:inherit;color:inherit;background:none;border:0;padding:0;white-space:inherit}
@media (max-width:640px){.prose pre.cmd{white-space:pre;padding-left:14px;text-indent:0}}
/* Home overview cover: the cover art carries its own headline, logo and chips — keep the play button and label in its empty corners. */
#overview .vfacade .vplay{left:84%;top:79%}
#overview .vfacade .vmeta{display:block;top:auto;bottom:16px;max-width:58%;line-height:1.45}
#overview .vfacade .vmeta i{display:inline-block;margin:0 8px 1px 0;vertical-align:middle}
#overview .vidbox .vfacade::after{background:linear-gradient(0deg,rgba(14,16,19,.55) 0%,rgba(14,16,19,0) 34%)}
@media (max-width:640px){
  #overview .vfacade .vplay{width:52px;height:52px;margin:-26px 0 0 -26px}
  #overview .vfacade .vmeta{bottom:9px;left:11px;font-size:9.5px;letter-spacing:.1em}}
/* 79-languages tile: step through whole rows (two at a time) instead of a continuous roll that always shows half lines. */
.vig.langs{height:60px;padding-top:0;border-top:22px solid transparent;-webkit-mask-image:none;mask-image:none}
.langroll{animation:rollstep 16s var(--ease) infinite}
@keyframes rollstep{0%{transform:translateY(0);opacity:1}10%{transform:translateY(0)}12.5%,22.5%{transform:translateY(-23px)}
  25%,35%{transform:translateY(-46px)}37.5%,47.5%{transform:translateY(-69px)}50%,60%{transform:translateY(-92px)}
  62.5%,72.5%{transform:translateY(-115px)}75%,85%{transform:translateY(-138px)}87.5%,95%{transform:translateY(-161px);opacity:1}
  97.5%{transform:translateY(-161px);opacity:0}97.6%{transform:translateY(0);opacity:0}100%{transform:translateY(0);opacity:1}}
/* On-screen subtitles tile: the sample caption starts visible and is away only briefly (it was hidden ~25% of every loop).
   overflow:clip (not hidden) so scroll-into-view can no longer scroll these boxes and leave them showing nothing. */
.tile,.vig.langs,.vig.screen .mini{overflow:clip}
.vig.screen .cap{animation-name:capin2}
@keyframes capin2{0%,78%{transform:translateY(0);opacity:1}88%,93%{transform:translateY(120%);opacity:0}100%{transform:translateY(0);opacity:1}}
/* Headings: balanced lines, no one-word orphan line. */
h1,h2{text-wrap:balance}
/* Japanese: no mid-word heading breaks (Chrome phrase segmentation), no ー or small kana at a line start. */
:lang(ja){line-break:strict}
@supports (word-break:auto-phrase){
  :lang(ja) :is(h1,h2,h3,.relt,.foot a,.footlegal a,.btn){word-break:auto-phrase;overflow-wrap:anywhere}}
/* Small tap targets: grow the hit area, not the layout. */
.langswitch{line-height:26px}
.langswitch a{padding:5px;margin:0 -2px}
.breadcrumb a{padding:4px 6px;margin:-4px -6px}
/* /contact: the address follows its text instead of sinking to the card bottom (cards keep equal height). */
.ccard p{flex:none}
.ccard .mail{padding:2px 0;margin-top:-2px}