/* ==========================================================================
   AI Journalist — site.css  ·  "Wire Room" identity
   Newsroom wire-desk graphics: ink, bone paper, flash-yellow marker, tally red.
   Hard offset shadows, mono slugs, marker-highlight italics. Light + dark.
   ========================================================================== */
:root {
  color-scheme: light;
  --bg: #f2f0e9; --bg2: #e8e5da; --card: #ffffff; --card2: #faf8f1;
  --ink: #0f0f0d; --ink2: #3a3934; --muted: #6a685e;
  --line: #d4d0c2; --line2: #bdb9a8;
  --flash: #ffd21f; --flash-ink: #0f0f0d; --tally: #ff3b2f; --ok: #1f8a4c;
  --em-bg: var(--flash); --em-ink: var(--ink);
  --hs-art: #0f0f0d; --hs-src: var(--tally);
  --display: "Bricolage Grotesque", "Arial Black", "Segoe UI", system-ui, sans-serif;
  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --indic: "Noto Sans Devanagari", "Noto Sans Tamil", "Noto Sans Telugu", "Noto Sans Bengali", "Noto Sans Kannada", "Noto Sans Arabic", "Noto Sans JP", var(--sans);
  --wrap: 1240px; --r: 14px;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0c0c0a; --bg2: #13130f; --card: #171712; --card2: #1d1d17;
  --ink: #f2f0e9; --ink2: #cbc8ba; --muted: #8f8c7f;
  --line: #2b2a23; --line2: #3d3c33;
  --em-bg: transparent; --em-ink: var(--flash);
  --hs-art: var(--flash); --hs-src: var(--tally);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration-color: var(--line2); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--ink); }
:focus-visible { outline: 3px solid var(--flash); outline-offset: 3px; border-radius: 6px; box-shadow: 0 0 0 5px var(--ink); }
::selection { background: var(--flash); color: #0f0f0d; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 8px; z-index: 200; }
.skip:focus { left: 12px; }
.wrap { width: min(var(--wrap), 100% - 40px); margin-inline: auto; }
.narrow { width: min(840px, 100% - 40px); margin-inline: auto; }
.center { text-align: center; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
main, header, footer, .wire { position: relative; z-index: 1; }

h1, h2, h3, h4 { font-family: var(--display); font-weight: 800; line-height: 1; letter-spacing: -.035em; margin: 0 0 .5em; text-wrap: balance; font-variation-settings: "opsz" 60; }
h1 { font-size: clamp(2.7rem, 6.6vw, 5.9rem); letter-spacing: -.05em; line-height: .94; }
h2 { font-size: clamp(2.1rem, 4.6vw, 3.9rem); line-height: .98; }
h3 { font-size: 1.4rem; letter-spacing: -.02em; line-height: 1.1; font-weight: 700; }
em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; background: linear-gradient(transparent 52%, var(--em-bg) 52% 94%, transparent 94%); color: var(--em-ink); padding: 0 .1em; margin: 0 -.04em; -webkit-box-decoration-break: clone; box-decoration-break: clone; font-size: 1.08em; }
h1 em, h2 em { font-size: 1.1em; }
p { margin: 0 0 1em; text-wrap: pretty; }
.hl { background: linear-gradient(transparent 58%, var(--flash) 58% 92%, transparent 92%); color: var(--ink); padding: 0 .1em; }
:root[data-theme="dark"] .hl { color: var(--flash); background: none; }

/* ------- wire ticker ------- */
.wire { background: var(--ink); color: var(--bg); font: 600 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; display: flex; overflow: hidden; }
.wire .tag { flex: none; background: var(--tally); color: #fff; padding: 11px 16px; display: flex; gap: 8px; align-items: center; z-index: 2; }
.wire .tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: blink 1.1s infinite; }
.wire-viewport { overflow: hidden; flex: 1; align-self: center; }
.wire-track { display: flex; gap: 46px; width: max-content; padding-left: 24px; animation: marq 70s linear infinite; }
.wire-track span::after { content: "◆"; color: var(--flash); margin-left: 46px; }
.wire .date { flex: none; padding: 0 18px; align-self: center; opacity: .7; }
@keyframes blink { 50% { opacity: .2; } }
@keyframes marq { to { transform: translateX(-50%); } }

/* ------- header ------- */
.site-header { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); border-bottom: 2px solid var(--ink); }
.site-header .wrap { display: flex; align-items: center; gap: 18px; height: 70px; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; font: 800 1.3rem var(--display); letter-spacing: -.04em; }
.brand-mark { width: 38px; height: 38px; border-radius: 10px; background: var(--ink); display: grid; place-items: center; box-shadow: 3px 3px 0 var(--flash); flex: none; }
.brand-mark svg { width: 24px; height: 24px; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.nav > a:not(.btn), .nav .dd > button { font: 600 .94rem var(--sans); color: var(--ink); text-decoration: none; padding: 9px 12px; border-radius: 8px; background: none; border: 0; cursor: pointer; }
.nav > a:not(.btn):hover, .nav .dd > button:hover { background: var(--ink); color: var(--bg); }
.dd { position: relative; }
.dd-menu { position: absolute; top: calc(100% + 8px); left: -10px; width: 360px; background: var(--card); border: 2px solid var(--ink); border-radius: 14px; box-shadow: 6px 6px 0 var(--ink); padding: 8px; display: none; }
.dd:hover .dd-menu, .dd:focus-within .dd-menu, .dd.open .dd-menu { display: block; }
.dd-menu a { display: block; padding: 10px 12px; border-radius: 9px; text-decoration: none; }
.dd-menu a b { display: block; font-size: .95rem; }
.dd-menu a span { display: block; font-size: .82rem; color: var(--muted); line-height: 1.35; }
.dd-menu a:hover { background: var(--flash); color: #0f0f0d; } .dd-menu a:hover span { color: #3a3934; }
.theme-toggle { width: 40px; height: 40px; border-radius: 10px; border: 2px solid var(--ink); background: var(--card); color: var(--ink); display: grid; place-items: center; cursor: pointer; padding: 0; margin: 0 6px; }
.theme-toggle svg { width: 18px; height: 18px; } .theme-toggle .sun { display: none; }
:root[data-theme="dark"] .theme-toggle .sun { display: block; } :root[data-theme="dark"] .theme-toggle .moon { display: none; }
.menu-btn { display: none; width: 44px; height: 44px; border: 2px solid var(--ink); background: var(--card); border-radius: 10px; margin-left: auto; cursor: pointer; color: var(--ink); }

/* ------- buttons ------- */
.btn { --h: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: var(--h); padding: 0 24px; border-radius: 12px; font: 700 1rem var(--sans); text-decoration: none; border: 2px solid var(--ink); cursor: pointer; transition: transform .15s, box-shadow .15s, background .15s; white-space: nowrap; color: var(--ink); background: transparent; }
.btn-lg { --h: 62px; padding: 0 30px; font-size: 1.12rem; border-radius: 14px; }
.btn-sm { --h: 40px; padding: 0 16px; font-size: .9rem; border-radius: 10px; }
.btn-flash { background: var(--flash); color: #0f0f0d; border-color: #0f0f0d; box-shadow: 5px 5px 0 var(--ink); }
:root[data-theme="dark"] .btn-flash { border-color: var(--ink); }
.btn-flash:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }
.btn-flash:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.btn-ink { background: var(--ink); color: var(--bg); }
.btn-ink:hover { background: var(--flash); color: #0f0f0d; border-color: #0f0f0d; }
.btn-line:hover { background: var(--ink); color: var(--bg); }
.btn .arr { width: 28px; height: 28px; border-radius: 8px; background: #0f0f0d; color: var(--flash); display: grid; place-items: center; font-size: 15px; transition: transform .2s; margin-right: -8px; }
.btn-sm .arr { width: 22px; height: 22px; font-size: 12px; margin-right: -6px; }
.btn:hover .arr { transform: translateX(3px); }
.btn-block { width: 100%; }
.row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

/* ------- slug label ------- */
.slug { display: inline-flex; align-items: center; gap: 10px; font: 700 11.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; padding: 7px 12px 7px 7px; border: 2px solid var(--ink); border-radius: 8px; background: var(--card); margin-bottom: 26px; }
.slug b { background: var(--tally); color: #fff; padding: 4px 7px; border-radius: 4px; letter-spacing: .08em; }
.center .slug, .slug.c { margin-inline: auto; }

/* ------- sections ------- */
.section { padding: clamp(80px, 10vw, 140px) 0; position: relative; }
.section.alt { background: var(--bg2); border-block: 2px solid var(--ink); }
.sec-head { max-width: 900px; margin-bottom: clamp(44px, 6vw, 72px); }
.sec-head.center { margin-inline: auto; }
.sec-head p { font-size: clamp(1.1rem, 1.5vw, 1.3rem); color: var(--ink2); max-width: 44em; }
.sec-head.center p { margin-inline: auto; }
.perf { height: 0; border-top: 2px dashed var(--line2); margin: 0; }

/* ------- hero ------- */
.hero { padding: clamp(36px, 5vw, 70px) 0 0; position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(var(--line2) 1.3px, transparent 1.4px); background-size: 24px 24px; opacity: .55; mask-image: radial-gradient(ellipse 80% 70% at 70% 40%, #000, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 80% 70% at 70% 40%, #000, transparent 75%); pointer-events: none; }
.hero-grid { display: grid; grid-template-columns: 1.02fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; position: relative; }
.hero h1 { margin-bottom: 26px; }
.hero h1 .l { display: block; }
.rot { display: inline-block; position: relative; vertical-align: bottom; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.rot b { display: inline-block; font-weight: 800; transition: transform .5s cubic-bezier(.7, 0, .2, 1), opacity .4s; }
.rot b.out { transform: translateY(-110%); opacity: 0; } .rot b.pre { transform: translateY(110%); opacity: 0; transition: none; }
.rot.mk b { background: var(--flash); color: #0f0f0d; padding: 0 .14em; border-radius: .12em; }
.lede { font-size: clamp(1.12rem, 1.55vw, 1.32rem); color: var(--ink2); max-width: 34em; line-height: 1.5; }
.lede strong { color: var(--ink); font-weight: 700; }
.hero-cta { margin: 34px 0 22px; }
.micro { display: flex; flex-wrap: wrap; gap: 6px 0; font: 600 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); padding: 0; margin: 0; list-style: none; }
.micro li + li::before { content: "/"; margin: 0 12px; color: var(--tally); }
.hero-tools { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; align-items: center; }
.hero-tools .lbl { font: 600 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.pill { font: 600 12.5px var(--sans); padding: 6px 12px; border: 1.5px solid var(--ink); border-radius: 99px; background: var(--card); }

/* hero visual */
.mkh { background: var(--flash); color: #0f0f0d; padding: 0 .14em; border-radius: .12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hv { position: relative; min-height: 600px; }
.hv-rec { position: absolute; left: 0; top: 10px; width: 74%; background: var(--card); border: 2px solid var(--ink); border-radius: 16px; box-shadow: 8px 8px 0 var(--ink); overflow: hidden; z-index: 1; }
.hv-lab { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 2px solid var(--ink); font: 700 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; background: var(--bg2); }
.hv-lab b { background: var(--ink); color: var(--bg); border-radius: 4px; padding: 3px 7px; }
.hv-fig { margin: 0; aspect-ratio: 16/10; background: #0e1220; position: relative; overflow: hidden; }
.hv-fig svg { width: 100%; height: 100%; }
.hv-file { display: flex; gap: 12px; align-items: center; padding: 12px 14px 4px; }
.hv-file .fi { width: 38px; height: 38px; border-radius: 9px; background: var(--flash); color: #0f0f0d; display: grid; place-items: center; font: 800 10px var(--mono); flex: none; border: 2px solid var(--ink); }
.hv-file b { display: block; font: 700 .9rem var(--sans); line-height: 1.25; } .hv-file span { font: 500 11.5px var(--mono); color: var(--muted); }
.hv-prog { margin: 8px 14px 14px; }
.hv-prog .bar { height: 10px; background: var(--bg2); border: 1.5px solid var(--ink); border-radius: 99px; overflow: hidden; }
.hv-prog .bar i { display: block; height: 100%; width: 0; background: var(--flash); border-right: 1.5px solid var(--ink); }
.hv-prog p { margin: 8px 0 0; display: flex; justify-content: space-between; font: 700 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); }
.hv-go { position: absolute; left: 62%; top: 50%; z-index: 4; width: 74px; height: 74px; margin: -37px 0 0 -37px; border-radius: 50%; background: var(--flash); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); display: grid; place-items: center; color: #0f0f0d; }
.hv-go svg { width: 34px; height: 34px; } .hv-go.run svg { animation: nudge 1s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateX(5px); } }
.hv-art { position: absolute; right: 0; bottom: 0; width: 70%; background: #fffdf6; color: #0f0f0d; border: 2px solid #0f0f0d; border-radius: 10px; box-shadow: 9px 9px 0 var(--hs-art); z-index: 3; overflow: hidden; }
.hv-mast { display: flex; justify-content: space-between; align-items: center; padding: 9px 16px; border-bottom: 2px solid #0f0f0d; background: var(--flash); font: 700 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.hv-mast b { background: #0f0f0d; color: var(--flash); padding: 3px 8px; border-radius: 4px; letter-spacing: .06em; opacity: 0; transition: .4s; } .hv-art.done .hv-mast b { opacity: 1; }
.hv-body { padding: 18px 20px 20px; min-height: 270px; }
.hv-body h2 { font: 800 1.55rem/1.12 var(--display); letter-spacing: -.025em; margin: 0 0 10px; min-height: 5.1em; color: #0f0f0d; }
.hv-body h2 .cur { display: inline-block; width: 3px; height: 1em; background: var(--tally); vertical-align: -3px; margin-left: 2px; animation: blink .9s infinite; }
.hv-body .dek { font: 400 .92rem/1.45 var(--sans); color: #46453e; margin: 0 0 12px; opacity: 0; transition: .5s; min-height: 4.4em; }
.hv-body .ln { display: block; height: 8px; border-radius: 4px; background: #e2ded0; margin: 8px 0; transition: .5s; } .hv-body .ln:nth-of-type(3) { width: 92%; } .hv-body .ln:nth-of-type(4) { width: 70%; }
.hv-art.done .dek { opacity: 1; } .hv-art.done .ln { background: #bfbbab; }
.hv-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.hv-tags span { font: 700 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 4px 8px; border: 1.5px solid #0f0f0d; border-radius: 99px; background: #fff; opacity: 0; transform: translateY(6px); transition: .4s; }
.hv-art.done .hv-tags span { opacity: 1; transform: none; } .hv-art.done .hv-tags span:nth-child(2) { transition-delay: .12s; } .hv-art.done .hv-tags span:nth-child(3) { transition-delay: .24s; } .hv-art.done .hv-tags span:nth-child(4) { transition-delay: .36s; }
.hv-more { position: absolute; left: 0; bottom: 22px; z-index: 5; background: var(--ink); color: var(--bg); font: 700 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 10px 14px; border-radius: 10px; border: 2px solid var(--flash); box-shadow: 4px 4px 0 var(--flash); }

/* pair strip */
.strip { margin-top: clamp(48px, 6vw, 80px); background: var(--ink); color: var(--bg); overflow: hidden; border-block: 2px solid var(--ink); }
.strip-track { display: flex; gap: 0; width: max-content; animation: marq 60s linear infinite; }
.strip:hover .strip-track { animation-play-state: paused; }
.strip-track a { display: flex; align-items: center; gap: 12px; padding: 18px 34px; font: 700 1.12rem var(--indic); text-decoration: none; border-right: 2px solid color-mix(in srgb, var(--bg) 18%, transparent); white-space: nowrap; }
.strip-track a i { font-style: normal; color: var(--flash); font-family: var(--mono); }
.strip-track a small { font: 600 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; opacity: .6; }
.strip-track a:hover { background: var(--flash); color: #0f0f0d; } .strip-track a:hover i { color: #0f0f0d; }

/* ------- DEMO: the studio, as it looks when you use it ------- */
.demo { background: var(--bg2); border-block: 2px solid var(--ink); position: relative; overflow: hidden; --st-bg: #ffffff; --st-2: #f6f4ec; --st-line: #0f0f0d; --st-soft: #d9d5c6; --st-ink: #0f0f0d; --st-mut: #6a685e; }
:root[data-theme="dark"] .demo { background: var(--bg); --st-bg: #1a1a14; --st-2: #212119; --st-line: #4a493e; --st-soft: #34332a; --st-ink: #f2f0e9; --st-mut: #a09d8f; }
.demo::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(var(--line2) 1.2px, transparent 1.3px); background-size: 26px 26px; opacity: .5; mask-image: linear-gradient(#000, transparent 60%); -webkit-mask-image: linear-gradient(#000, transparent 60%); pointer-events: none; }
.demo .wrap { position: relative; }
.stage { position: relative; background: var(--st-bg); color: var(--st-ink); border: 2px solid var(--st-line); border-radius: 20px; box-shadow: 10px 10px 0 var(--flash); overflow: hidden; }
:root[data-theme="dark"] .stage { box-shadow: 0 0 0 1px #000, 0 30px 80px rgba(0, 0, 0, .55), 10px 10px 0 var(--flash); }
.st-chrome { display: flex; align-items: center; gap: 14px; padding: 11px 16px; background: var(--st-2); border-bottom: 2px solid var(--st-line); }
.st-dots { display: flex; gap: 7px; } .st-dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--st-soft); } .st-dots i:first-child { background: var(--tally); } .st-dots i:nth-child(2) { background: var(--flash); }
.st-url { font: 500 12px var(--mono); color: var(--st-mut); background: var(--st-bg); border: 1.5px solid var(--st-soft); border-radius: 8px; padding: 6px 14px; margin: 0 auto; }
.st-replay { font: 700 11.5px var(--mono); letter-spacing: .05em; text-transform: uppercase; background: var(--st-bg); border: 1.5px solid var(--st-line); color: var(--st-ink); padding: 7px 12px; border-radius: 8px; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; }
.st-replay:hover { background: var(--flash); color: #0f0f0d; border-color: #0f0f0d; } .st-replay svg { width: 13px; height: 13px; }
.st-steps { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 2px solid var(--st-line); background: var(--st-2); }
.st-step { appearance: none; background: none; border: 0; border-right: 1px solid var(--st-soft); color: var(--st-mut); font: 700 12.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 15px 16px; display: flex; gap: 12px; align-items: center; cursor: pointer; text-align: left; position: relative; }
.st-step:last-child { border-right: 0; }
.st-step i { font: 700 11px var(--mono); width: 26px; height: 26px; border-radius: 7px; border: 1.5px solid var(--st-line); display: grid; place-items: center; font-style: normal; flex: none; }
.st-step span small { display: block; font: 500 11px var(--sans); text-transform: none; letter-spacing: 0; opacity: .85; margin-top: 2px; }
.st-step.active { color: var(--st-ink); background: var(--st-bg); } .st-step.active i { background: var(--flash); color: #0f0f0d; border-color: #0f0f0d; }
.st-step.done { color: var(--st-ink); } .st-step.done i { background: var(--st-ink); color: var(--st-bg); font-size: 0; } .st-step.done i::after { content: "✓"; font-size: 13px; }
.st-step::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 3px; width: 0; background: var(--flash); } .st-step.active::after { width: var(--p, 0%); transition: width .25s linear; }
.st-langs { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-bottom: 2px solid var(--st-line); }
.st-langs > div { padding: 14px 20px 16px; } .st-langs > div + div { border-left: 1px solid var(--st-soft); }
.lb-label { display: flex; align-items: center; gap: 10px; font: 700 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--st-mut); margin-bottom: 10px; flex-wrap: wrap; }
.lb-label b { color: #0f0f0d; background: var(--flash); padding: 3px 7px; border-radius: 4px; }
.lb-label i { font-style: normal; color: var(--st-ink); letter-spacing: .04em; text-transform: none; font-weight: 600; }
.lb-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.lang { font: 600 13px var(--indic); background: var(--st-bg); color: var(--st-ink); border: 1.5px solid var(--st-soft); padding: 6px 12px; border-radius: 99px; cursor: pointer; transition: .15s; line-height: 1.3; }
.lang:hover { border-color: var(--st-line); transform: translateY(-1px); }
.lang.on { background: var(--st-ink); color: var(--st-bg); border-color: var(--st-ink); }
.st-body { display: grid; grid-template-columns: minmax(300px, .8fr) 1.5fr; min-height: 780px; }
.pane { padding: 22px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pane-src { border-right: 2px solid var(--st-line); background: var(--st-2); }
.pane-art { background: var(--st-bg); }
.pane-h { display: flex; justify-content: space-between; gap: 10px; font: 700 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--st-mut); }
.pane-h b { color: var(--st-ink); font-weight: 700; }
.filecard { background: var(--st-bg); border: 2px solid var(--st-line); border-radius: 14px; overflow: hidden; box-shadow: 5px 5px 0 var(--st-line); opacity: .35; transition: opacity .5s; }
.filecard.on { opacity: 1; }
.thumb { position: relative; aspect-ratio: 16/9; background: #0e1220; overflow: hidden; }
.thumb svg { width: 100%; height: 100%; }
.thumb .vb { position: absolute; left: 10px; top: 10px; font: 700 10px var(--mono); letter-spacing: .1em; background: rgba(0, 0, 0, .65); color: #fff; padding: 4px 8px; border-radius: 5px; }
.thumb .du { position: absolute; right: 10px; bottom: 10px; font: 700 11px var(--mono); background: rgba(0, 0, 0, .7); color: #fff; padding: 3px 8px; border-radius: 5px; }
.fmeta { padding: 12px 14px 4px; display: flex; gap: 10px; align-items: baseline; justify-content: space-between; }
.fmeta b { font: 700 .9rem var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fmeta span { font: 500 11.5px var(--mono); color: var(--st-mut); flex: none; }
.pbar { margin: 8px 14px 4px; height: 10px; border-radius: 99px; background: var(--st-soft); overflow: hidden; border: 1.5px solid var(--st-line); }
.pbar i { display: block; height: 100%; width: 0; background: var(--flash); border-right: 1.5px solid var(--st-line); transition: width .25s linear; }
.pstat { display: flex; justify-content: space-between; padding: 6px 14px 14px; font: 700 11px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--st-ink); }
.pstat b { color: var(--st-ink); }
.tr-list { display: grid; gap: 10px; align-content: start; }
.tr-line { opacity: 0; transform: translateY(10px); transition: .5s; padding: 12px 14px; background: var(--st-bg); border-radius: 10px; border: 1.5px solid var(--st-soft); font-family: var(--indic); }
.tr-line.on { opacity: 1; transform: none; }
.tr-line .who { display: flex; gap: 10px; font: 700 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--st-ink); margin-bottom: 6px; }
.tr-line .who s { text-decoration: none; color: var(--st-mut); font-weight: 500; }
.tr-line .heard { font-size: .88rem; color: var(--st-mut); line-height: 1.45; }
.tr-line .heard u { text-decoration: none; font: 600 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; margin-right: 6px; opacity: .8; }
.tr-line .out { font-size: .98rem; color: var(--st-ink); line-height: 1.5; margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--st-soft); display: none; }
.tr-line.tx .out { display: block; animation: fadeup .5s; } .tr-line.tx .heard { opacity: .75; }
.tr-line.same .out { border: 0; margin: 0; padding: 0; }
.tr-empty { font: 500 .85rem var(--mono); color: var(--st-mut); border: 1.5px dashed var(--st-soft); border-radius: 10px; padding: 20px; text-align: center; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; } .chip { font: 600 11px var(--mono); border: 1.5px solid var(--st-line); border-radius: 99px; padding: 4px 10px; background: var(--st-bg); }
@keyframes fadeup { from { opacity: 0; transform: translateY(6px); } }
.art { background: #fffdf6; color: #0f0f0d; border: 2px solid #0f0f0d; border-radius: 8px; flex: 1; position: relative; opacity: .18; transition: opacity .6s; box-shadow: 7px 7px 0 var(--st-line); display: flex; flex-direction: column; overflow: hidden; }
:root[data-theme="dark"] .art { border-color: #f2f0e9; box-shadow: 7px 7px 0 var(--flash); }
.art.on { opacity: 1; }
.art .mast { display: flex; justify-content: space-between; align-items: center; padding: 11px 20px; background: var(--flash); border-bottom: 2px solid #0f0f0d; font: 700 11.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.art .mast b { background: #0f0f0d; color: var(--flash); padding: 3px 9px; border-radius: 4px; font-family: var(--indic); text-transform: none; letter-spacing: 0; font-size: 12.5px; }
.art .fig { aspect-ratio: 16/6.2; background: #0e1220; border-bottom: 2px solid #0f0f0d; overflow: hidden; position: relative; } .art .fig svg { width: 100%; height: 100%; }
.art .fig span { position: absolute; left: 14px; bottom: 10px; font: 600 10px var(--mono); letter-spacing: .1em; color: #fff; background: rgba(0, 0, 0, .6); padding: 3px 7px; border-radius: 3px; text-transform: uppercase; }
.art .txt { padding: 24px 30px 56px; }
.art h3 { font: 800 clamp(1.7rem, 2.6vw, 2.5rem)/1.1 var(--indic); letter-spacing: -.025em; margin: 0 0 14px; min-height: 2.4em; color: #0f0f0d; }
.art .dek { font: 500 1.12rem/1.5 var(--indic); color: #46453e; margin: 0 0 16px; }
.art .by { font: 600 11.5px var(--mono); color: #77756a; border-block: 1.5px solid #e2ded0; padding: 9px 0; margin-bottom: 18px; display: flex; gap: 12px; flex-wrap: wrap; letter-spacing: .03em; }
.art .by span + span::before { content: "/"; margin-right: 12px; color: var(--tally); }
.art .body p { font: 400 1.06rem/1.72 var(--indic); color: #25241f; margin: 0 0 14px; opacity: 0; transform: translateY(8px); transition: .6s; } .art .body p.on { opacity: 1; transform: none; }
.art blockquote { margin: 20px 0 0; padding: 16px 20px; border-left: 6px solid var(--tally); background: #fff4c2; font: 400 1.35rem/1.35 var(--serif); font-style: italic; opacity: 0; transition: .6s; color: #0f0f0d; } .art blockquote.on { opacity: 1; }
.art .cur { display: inline-block; width: 3px; height: 1em; background: var(--tally); vertical-align: -3px; margin-left: 2px; animation: blink .9s infinite; }
.art .wc { position: absolute; right: 16px; bottom: 12px; font: 600 10.5px var(--mono); color: #8b897c; letter-spacing: .06em; text-transform: uppercase; }
.st-foot { border-top: 2px solid var(--st-line); padding: 16px 22px; background: var(--st-2); display: flex; gap: 16px; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.caption { font-size: .98rem; color: var(--st-mut); flex: 1; min-width: 260px; min-height: 1.5em; } .caption b { color: var(--st-ink); }
.exports { display: flex; gap: 6px; flex-wrap: wrap; }
.exports button { font: 700 11.5px var(--mono); letter-spacing: .05em; background: var(--st-bg); border: 1.5px solid var(--st-line); color: var(--st-ink); padding: 9px 13px; border-radius: 8px; cursor: pointer; } .exports button:hover { background: var(--flash); color: #0f0f0d; border-color: #0f0f0d; }
.toast { position: absolute; left: 50%; bottom: 82px; transform: translate(-50%, 20px); background: var(--flash); color: #0f0f0d; font: 700 .88rem var(--sans); padding: 11px 18px; border-radius: 10px; border: 2px solid #0f0f0d; opacity: 0; pointer-events: none; transition: .3s; z-index: 5; white-space: nowrap; box-shadow: 4px 4px 0 #0f0f0d; }
.toast.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; } .toast a { color: #0f0f0d; }
.demo-note { margin: 30px 0 0; font: 500 12px var(--mono); color: var(--muted); text-align: center; letter-spacing: .06em; text-transform: uppercase; }
.demo-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }
@media (max-width: 1100px) { .hv { max-width: 600px; margin-inline: auto; width: 100%; } .st-body { grid-template-columns: 1fr; } .pane-src { border-right: 0; border-bottom: 2px solid var(--st-line); } }
@media (max-width: 900px) { .st-langs { grid-template-columns: 1fr; } .st-langs > div + div { border-left: 0; border-top: 1px solid var(--st-soft); } .st-step span small { display: none; } }
@media (max-width: 680px) {
  .hv { min-height: 0; display: grid; gap: 18px; } .hv-rec, .hv-art { position: relative; width: 100%; right: auto; left: auto; top: auto; bottom: auto; } .hv-go { position: relative; left: auto; top: auto; margin: -8px auto; transform: rotate(90deg); } .hv-more { display: none; }
  .hv-body { min-height: 0; } .hv-body h2 { font-size: 1.3rem; min-height: 0; }
  .st-step { padding: 12px 10px; font-size: 10.5px; gap: 8px; } .st-step i { width: 22px; height: 22px; }
  .lb-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; } .lang { flex: none; }
}

/* ------- verbs (how) ------- */
.verbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 2px solid var(--ink); border-radius: 20px; overflow: hidden; background: var(--card); box-shadow: 8px 8px 0 var(--ink); }
.verb { padding: 34px 30px 36px; border-right: 2px solid var(--ink); position: relative; }
.verb:last-child { border-right: 0; }
.verb .n { font: 800 5.4rem/.8 var(--display); letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 2px var(--ink); display: block; margin-bottom: 14px; }
.verb h3 { font-size: 1.9rem; margin-bottom: 10px; }
.verb h3 span { background: var(--flash); color: #0f0f0d; padding: 0 .2em; border-radius: 6px; }
.verb .art-svg { height: 120px; margin: 4px 0 18px; border: 2px solid var(--ink); border-radius: 12px; background: var(--bg2); overflow: hidden; display: grid; place-items: center; }
.verb p { color: var(--ink2); margin: 0; font-size: 1rem; }
.verb::after { content: "→"; position: absolute; right: -17px; top: 50%; width: 32px; height: 32px; background: var(--flash); border: 2px solid #0f0f0d; border-radius: 50%; display: grid; place-items: center; font: 800 15px var(--mono); color: #0f0f0d; z-index: 2; }
.verb:last-child::after { display: none; }

/* ------- flows (pair cards) ------- */
.flows { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.flow { background: var(--card); border: 2px solid var(--ink); border-radius: 16px; padding: 24px 22px; text-decoration: none; display: flex; flex-direction: column; gap: 12px; transition: transform .15s, box-shadow .15s; box-shadow: 5px 5px 0 var(--ink); }
.flow:hover { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--flash), 8px 8px 0 2px var(--ink); }
.flow .pr { display: flex; align-items: center; gap: 10px; font: 800 1.6rem var(--indic); letter-spacing: -.02em; }
.flow .pr i { font: 800 1rem var(--mono); font-style: normal; background: var(--flash); color: #0f0f0d; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; border: 2px solid #0f0f0d; }
.flow small { font: 700 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.flow p { margin: 0; color: var(--ink2); font-size: .97rem; flex: 1; }
.flow .go { font-weight: 800; font-size: .92rem; }

/* ------- paste-a-link (watch in your language) ------- */
.linkcase { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 80px); align-items: center; }
.phone-wrap { position: relative; display: grid; place-items: center; padding: 30px 0; }
.phone-wrap::before { content: ""; position: absolute; width: 440px; height: 440px; max-width: 100%; border-radius: 50%; background: var(--flash); border: 2px solid var(--ink); }
.phone { position: relative; width: 290px; background: #0f0f0d; border-radius: 40px; padding: 12px; border: 3px solid #0f0f0d; box-shadow: 10px 10px 0 var(--ink); z-index: 2; }
:root[data-theme="dark"] .phone { border-color: #3d3c33; box-shadow: 10px 10px 0 var(--tally); }
.phone .screen { border-radius: 30px; overflow: hidden; background: #16160f; position: relative; aspect-ratio: 9/17.5; }
.phone .urlbar { position: absolute; top: 14px; left: 12px; right: 12px; background: rgba(255, 255, 255, .95); color: #0f0f0d; border-radius: 99px; padding: 9px 14px; font: 600 11.5px var(--mono); display: flex; gap: 8px; align-items: center; z-index: 4; white-space: nowrap; overflow: hidden; }
.phone .urlbar::before { content: "🔗"; font-size: 12px; }
.phone .urlbar .t { overflow: hidden; text-overflow: ellipsis; } .phone .urlbar .t::after { content: ""; display: inline-block; width: 2px; height: 1em; background: var(--tally); margin-left: 2px; vertical-align: -2px; animation: blink .9s infinite; }
.phone .vid { position: absolute; inset: 0; }
.phone .vid svg { width: 100%; height: 100%; }
.phone .sub { position: absolute; left: 12px; right: 12px; z-index: 4; border-radius: 10px; padding: 10px 12px; font: 600 .86rem/1.4 var(--indic); }
.phone .sub.orig { bottom: 138px; background: rgba(0, 0, 0, .72); color: #fff; }
.phone .sub.orig small, .phone .sub.mine small { display: block; font: 700 9.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; opacity: .7; margin-bottom: 3px; }
.phone .sub.mine { bottom: 18px; background: var(--flash); color: #0f0f0d; border: 2px solid #0f0f0d; font-size: .98rem; box-shadow: 3px 3px 0 #0f0f0d; }
.phone .sub.mine.swap, .phone .sub.orig.swap { animation: fadeup .5s; }
.phone .play { position: absolute; left: 50%; top: 38%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; background: rgba(255, 255, 255, .92); display: grid; place-items: center; z-index: 3; }
.phone .play::after { content: ""; border-left: 16px solid #0f0f0d; border-block: 10px solid transparent; margin-left: 4px; }
.linkcase .plats { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 28px; }
.linkcase ul.pts { list-style: none; padding: 0; margin: 0 0 30px; display: grid; gap: 14px; }
.linkcase .pts li { padding-left: 38px; position: relative; font-size: 1.08rem; color: var(--ink2); }
.linkcase .pts li::before { content: ""; position: absolute; left: 0; top: 2px; width: 26px; height: 26px; border-radius: 7px; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l3 3 6-6.4' fill='none' stroke='%23ffd21f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat; }
.linkcase .pts b { color: var(--ink); }

/* ------- manual vs AI (the cost of by-hand) ------- */
.vs { display: grid; gap: 26px; }
.vs-card { background: var(--card); border: 2px solid var(--ink); border-radius: 20px; padding: clamp(24px, 3.4vw, 40px); box-shadow: 8px 8px 0 var(--ink); }
.vs-card.ai { background: var(--flash); color: #0f0f0d; border-color: #0f0f0d; }
:root[data-theme="dark"] .vs-card.ai { box-shadow: 8px 8px 0 var(--ink); }
.vs-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.vs-head h3 { margin: 0; font-size: 1.7rem; }
.vs-head .tot { font: 800 clamp(2.6rem, 5vw, 4.2rem)/.9 var(--display); letter-spacing: -.05em; }
.vs-head .tot small { font: 600 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; display: block; margin-bottom: 6px; opacity: .65; }
.vs-bar { display: flex; height: 64px; border: 2px solid #0f0f0d; border-radius: 12px; overflow: hidden; background: var(--bg2); }
.vs-card:not(.ai) .vs-bar { border-color: var(--ink); }
.vs-bar span { display: flex; align-items: center; justify-content: center; font: 700 12px var(--mono); letter-spacing: .04em; text-transform: uppercase; border-right: 2px solid var(--ink); white-space: nowrap; overflow: hidden; padding: 0 6px; width: 0; transition: width 1.4s cubic-bezier(.2, .7, .2, 1); }
.vs-bar span:last-child { border-right: 0; }
.vs-bar .s1 { background: #d9d5c6; color: #0f0f0d; } .vs-bar .s2 { background: #bcb7a4; color: #0f0f0d; } .vs-bar .s3 { background: #8f8a77; color: #fff; } .vs-bar .s4 { background: var(--ink); color: var(--bg); }
.vs-bar .a1 { background: #0f0f0d; color: var(--flash); } .vs-bar .a2 { background: #fffdf6; color: #0f0f0d; }
.vs.in .vs-bar span { width: var(--w); }
.vs-legend { display: flex; gap: 10px 22px; flex-wrap: wrap; margin-top: 16px; font-size: .95rem; color: var(--ink2); }
.vs-card.ai .vs-legend { color: #2a2924; }
.vs-legend b { font-weight: 800; }
.vs-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 8px; }
.vs-sum div { border: 2px solid var(--ink); border-radius: 16px; padding: 22px 24px; background: var(--card); }
.vs-sum b { display: block; font: 800 clamp(2rem, 3.4vw, 3rem)/1 var(--display); letter-spacing: -.04em; margin-bottom: 4px; }
.vs-sum span { font-size: .95rem; color: var(--ink2); }
.vs-sum div:first-child { background: var(--ink); color: var(--bg); } .vs-sum div:first-child span { color: color-mix(in srgb, var(--bg) 75%, transparent); } .vs-sum div:first-child b { color: var(--flash); }

/* ------- calculator ------- */
.calc { background: var(--card); border: 2px solid var(--ink); border-radius: 20px; padding: clamp(24px, 3vw, 38px); box-shadow: 8px 8px 0 var(--ink); }
.calc label { font: 700 .95rem var(--sans); display: flex; justify-content: space-between; margin-bottom: 14px; }
.calc label output { font: 800 1.2rem var(--mono); background: var(--flash); color: #0f0f0d; padding: 2px 10px; border-radius: 6px; border: 2px solid #0f0f0d; }
.calc input[type=range] { width: 100%; accent-color: var(--ink); height: 30px; }
.calc-out { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
.calc-out > div { border: 2px solid var(--ink); border-radius: 12px; padding: 16px; background: var(--bg); }
.calc-out small { display: block; font: 700 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.calc-out b { font: 800 2.1rem/1 var(--display); letter-spacing: -.04em; }
.calc-out .good { background: var(--flash); color: #0f0f0d; border-color: #0f0f0d; } .calc-out .good small { color: #4a4731; }
.calc-note { font-size: .82rem; color: var(--muted); margin: 16px 0 0; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 80px); align-items: center; }

/* ------- language wall ------- */
.script-wall { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; max-width: 1040px; margin: 0 auto; }
.script-wall a { font: 700 1.5rem var(--indic); padding: 14px 26px; border: 2px solid var(--ink); border-radius: 14px; background: var(--card); text-decoration: none; transition: .15s; box-shadow: 4px 4px 0 var(--ink); }
.script-wall a small { font: 700 10.5px var(--mono); color: var(--muted); display: block; text-align: center; letter-spacing: .08em; text-transform: uppercase; margin-top: 2px; }
.script-wall a:hover { background: var(--flash); color: #0f0f0d; transform: translate(-2px, -2px) rotate(-1deg); box-shadow: 7px 7px 0 var(--ink); } .script-wall a:hover small { color: #3a3934; }

/* ------- bento ------- */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.cell { background: var(--card); border: 2px solid var(--ink); border-radius: 18px; padding: 28px; position: relative; overflow: hidden; transition: transform .15s, box-shadow .15s; }
.cell:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--ink); }
.cell.c2 { grid-column: span 2; } .cell.c3 { grid-column: span 3; } .cell.c4 { grid-column: span 4; }
.cell .ico { width: 48px; height: 48px; border-radius: 12px; background: var(--flash); color: #0f0f0d; display: grid; place-items: center; margin-bottom: 20px; border: 2px solid #0f0f0d; }
.cell .ico svg { width: 24px; height: 24px; }
.cell p { color: var(--ink2); margin: 0; font-size: 1rem; }
.cell.dark { background: var(--ink); color: var(--bg); } .cell.dark p { color: color-mix(in srgb, var(--bg) 78%, transparent); } .cell.dark:hover { box-shadow: 6px 6px 0 var(--flash); }
.fmt-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.fmt-row span { font: 700 12px var(--mono); border: 1.5px solid currentColor; padding: 5px 10px; border-radius: 6px; }

/* ------- use case tabs ------- */
.uc { display: grid; grid-template-columns: 330px 1fr; gap: 28px; align-items: start; }
.uc-tabs { display: grid; gap: 10px; }
.uc-tab { text-align: left; font: 700 1.02rem var(--sans); padding: 17px 18px; background: var(--card); border: 2px solid var(--ink); border-radius: 12px; color: var(--ink); cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: .12s; }
.uc-tab:hover { transform: translateX(4px); }
.uc-tab[aria-selected="true"] { background: var(--ink); color: var(--bg); box-shadow: 5px 5px 0 var(--flash); transform: translateX(6px); }
.uc-panel { background: var(--card); border: 2px solid var(--ink); border-radius: 20px; padding: clamp(26px, 4vw, 48px); box-shadow: 8px 8px 0 var(--ink); min-height: 380px; }
.uc-panel[hidden] { display: none; }
.uc-panel h3 { font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.02; }
.uc-panel ul { padding: 0; list-style: none; display: grid; gap: 12px; margin: 20px 0 28px; }
.uc-panel li { padding-left: 30px; position: relative; color: var(--ink2); font-size: 1.04rem; }
.uc-panel li::before { content: "→"; position: absolute; left: 0; font-weight: 800; background: var(--flash); color: #0f0f0d; border-radius: 4px; width: 22px; text-align: center; font-size: .9rem; }
.uc-panel .tagp { display: inline-block; font: 700 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; background: var(--ink); color: var(--flash); border-radius: 5px; padding: 6px 11px; margin-bottom: 16px; }

/* ------- principles ------- */
.principles { display: grid; grid-template-columns: repeat(4, 1fr); border: 2px solid var(--ink); border-radius: 20px; overflow: hidden; background: var(--card); }
.principle { padding: 32px 26px; border-right: 2px solid var(--ink); }
.principle:last-child { border-right: 0; }
.principle .k { font: 800 12px var(--mono); letter-spacing: .12em; background: var(--flash); color: #0f0f0d; padding: 4px 8px; border-radius: 4px; display: inline-block; margin-bottom: 18px; }
.principle h3 { font-size: 1.5rem; } .principle p { font-size: .98rem; color: var(--ink2); margin: 0; }

/* ------- compare ------- */
.compare { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--card); border: 2px solid var(--ink); border-radius: 18px; overflow: hidden; font-size: 1rem; }
.compare th, .compare td { text-align: left; padding: 18px 22px; border-bottom: 1.5px solid var(--line2); vertical-align: top; }
.compare thead th { background: var(--bg2); font: 800 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; border-bottom: 2px solid var(--ink); }
.compare thead th:last-child { background: var(--flash); color: #0f0f0d; }
.compare tbody th { font-weight: 800; width: 22%; }
.compare tbody td:last-child { background: color-mix(in srgb, var(--flash) 22%, var(--card)); font-weight: 700; }
.compare tr:last-child > * { border-bottom: 0; }
.compare .x { color: var(--muted); }

/* ------- pricing ------- */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.price-card { background: var(--card); border: 2px solid var(--ink); border-radius: 20px; padding: 36px 30px; display: flex; flex-direction: column; position: relative; }
.price-card.featured { background: var(--ink); color: var(--bg); transform: translateY(-16px); box-shadow: 9px 9px 0 var(--flash); }
.price-card.featured .muted { color: color-mix(in srgb, var(--bg) 70%, transparent); }
.price-card.featured::before { content: "Most chosen"; position: absolute; top: -15px; left: 28px; background: var(--flash); color: #0f0f0d; font: 800 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 6px 12px; border-radius: 6px; border: 2px solid #0f0f0d; }
.badge { align-self: flex-start; font: 800 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px; border-radius: 5px; background: var(--bg2); border: 1.5px solid var(--ink); }
.featured .badge { background: transparent; border-color: var(--bg); }
.amount { font: 800 4rem/1 var(--display); letter-spacing: -.06em; margin: 20px 0 8px; }
.price-card ul { list-style: none; padding: 0; margin: 24px 0 30px; display: grid; gap: 12px; flex: 1; font-size: .98rem; }
.price-card li { padding-left: 28px; position: relative; }
.price-card li::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 5px; background: var(--flash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l3 3 6-6.4' fill='none' stroke='%230f0f0d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat; }
.featured .btn-flash { box-shadow: 5px 5px 0 var(--bg); }
.price-note { text-align: center; font-size: .9rem; color: var(--muted); margin-top: 32px; }

/* ------- facts / cards / faq ------- */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); border: 2px solid var(--ink); border-radius: 20px; background: var(--card); overflow: hidden; }
.fact { padding: 30px 26px; border-right: 2px solid var(--ink); } .fact:last-child { border-right: 0; }
.fact b { display: block; font: 800 3.4rem/1 var(--display); letter-spacing: -.05em; margin-bottom: 8px; }
.fact span { color: var(--ink2); font-size: .98rem; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.gcard { background: var(--card); border: 2px solid var(--ink); border-radius: 16px; padding: 26px; text-decoration: none; display: flex; flex-direction: column; gap: 12px; transition: .15s; box-shadow: 5px 5px 0 var(--ink); }
.gcard:hover { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--flash), 8px 8px 0 2px var(--ink); }
.gcard .tagline { font: 800 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; background: var(--ink); color: var(--flash); padding: 4px 8px; border-radius: 4px; align-self: flex-start; }
.gcard h3 { margin: 0; font-size: 1.35rem; } .gcard p { margin: 0; color: var(--ink2); font-size: .97rem; flex: 1; }
.gcard .more { font-weight: 800; font-size: .92rem; }
.faq-list { display: grid; gap: 12px; }
.faq { background: var(--card); border: 2px solid var(--ink); border-radius: 14px; overflow: hidden; }
.faq summary { list-style: none; cursor: pointer; padding: 21px 64px 21px 24px; font: 700 1.1rem var(--sans); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 8px; background: var(--flash); color: #0f0f0d; border: 2px solid #0f0f0d; display: grid; place-items: center; font: 700 1.3rem var(--mono); }
.faq[open] summary::after { content: "–"; background: var(--ink); color: var(--flash); border-color: var(--ink); }
.faq .ans { padding: 0 24px 24px; color: var(--ink2); } .faq .ans p:last-child { margin: 0; }

/* ------- CTA band ------- */
.cta-band { background: var(--flash); color: #0f0f0d; text-align: center; border-block: 2px solid #0f0f0d; overflow: hidden; position: relative; }
:root[data-theme="dark"] .cta-band { border-color: var(--flash); }
.cta-band::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(-45deg, rgba(0, 0, 0, .06) 0 2px, transparent 2px 14px); }
.cta-band .wrap { position: relative; }
.cta-band h2 { font-size: clamp(2.5rem, 6.4vw, 5.6rem); max-width: 13em; margin-inline: auto; }
.cta-band h2 em { background: #0f0f0d; color: var(--flash); padding: 0 .16em; border-radius: .1em; }
.cta-band p { max-width: 660px; margin-inline: auto; font-size: 1.2rem; color: #2a2924; }
.cta-band .slug { background: #fffdf6; color: #0f0f0d; border-color: #0f0f0d; }
.cta-band .btn-flash { background: #0f0f0d; color: var(--flash); box-shadow: 6px 6px 0 #fffdf6; border-color: #0f0f0d; } .cta-band .btn-flash .arr { background: var(--flash); color: #0f0f0d; }
.cta-band .btn-line { border-color: #0f0f0d; color: #0f0f0d; } .cta-band .btn-line:hover { background: #0f0f0d; color: var(--flash); }
.cta-band .micro { justify-content: center; margin-top: 26px; color: #2a2924; }

/* ------- footer ------- */
.site-footer { background: var(--ink); color: var(--bg); padding: 70px 0 30px; font-size: .96rem; }
.site-footer a { color: inherit; }
.site-footer .brand-mark { background: var(--flash); box-shadow: 3px 3px 0 var(--bg); } .site-footer .brand-mark svg * { fill: #0f0f0d; }
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 36px; }
.footer-grid h3 { font: 700 11.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--flash); margin-bottom: 16px; }
.footer-grid a { display: block; text-decoration: none; padding: 5px 0; opacity: .85; } .footer-grid a:hover { opacity: 1; color: var(--flash); }
.foot-bottom { margin-top: 50px; padding-top: 24px; border-top: 1.5px solid color-mix(in srgb, var(--bg) 22%, transparent); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .86rem; opacity: .75; }
.sticky-cta { display: none; }

/* ------- inner pages ------- */
.crumbs { font: 600 12px var(--mono); color: var(--muted); padding: 24px 0 0; letter-spacing: .05em; text-transform: uppercase; }
.crumbs a { text-decoration: none; } .crumbs a:hover { color: var(--ink); text-decoration: underline; } .crumbs span { margin: 0 8px; color: var(--tally); }
.page-hero { padding: clamp(28px, 5vw, 60px) 0 clamp(36px, 5vw, 56px); }
.page-hero h1 { font-size: clamp(2.5rem, 5.8vw, 5rem); max-width: 14em; }
.answer { background: var(--card); border: 2px solid var(--ink); border-radius: 14px; padding: 22px 26px; max-width: 800px; margin: 30px 0; box-shadow: 6px 6px 0 var(--flash), 6px 6px 0 2px var(--ink); }
.answer b.k { display: inline-block; font: 800 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; background: var(--ink); color: var(--flash); padding: 4px 8px; border-radius: 4px; margin-bottom: 10px; }
.answer p { margin: 0; font-size: 1.1rem; color: var(--ink); }
.page-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 60px; align-items: start; }
.prose h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); margin-top: 1.8em; }
.prose h3 { margin-top: 1.6em; }
.prose p, .prose li { color: var(--ink2); font-size: 1.07rem; }
.prose ul, .prose ol { padding-left: 1.3em; display: grid; gap: .6em; margin: 0 0 1.3em; }
.prose li::marker { color: var(--tally); font-weight: 800; }
.prose strong { color: var(--ink); }
.prose table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: .98rem; background: var(--card); border: 2px solid var(--ink); }
.prose th, .prose td { padding: 13px 16px; border-bottom: 1.5px solid var(--line2); text-align: left; vertical-align: top; }
.prose th { background: var(--bg2); font: 800 11.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.callout { background: var(--flash); color: #0f0f0d; border: 2px solid #0f0f0d; border-radius: 14px; padding: 20px 24px; margin: 1.8em 0; box-shadow: 5px 5px 0 var(--ink); }
.callout p { margin: 0; color: #0f0f0d; font-size: 1.05rem; }
.sample { border: 2px solid var(--ink); border-radius: 16px; overflow: hidden; margin: 1.6em 0; background: var(--card); box-shadow: 6px 6px 0 var(--ink); }
.sample > div { padding: 20px 24px; } .sample > div + div { border-top: 2px solid var(--ink); }
.sample .sl { font: 800 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; display: block; }
.sample .sl b { background: var(--flash); color: #0f0f0d; padding: 2px 7px; border-radius: 4px; margin-left: 6px; font-family: var(--indic); text-transform: none; letter-spacing: 0; }
.sample .hd { font: 800 1.6rem/1.2 var(--indic); letter-spacing: -.02em; color: var(--ink); margin: 0 0 8px; } .sample .sp { font: 400 1.02rem/1.55 var(--indic); color: var(--ink2); margin: 0; }
.sample .out { background: var(--bg2); }
.aside { position: sticky; top: 94px; display: grid; gap: 18px; }
.box { background: var(--card); border: 2px solid var(--ink); border-radius: 16px; padding: 24px; }
.box h3 { font-size: 1.25rem; }
.box.dark { background: var(--ink); color: var(--bg); box-shadow: 6px 6px 0 var(--flash); } .box.dark p { color: color-mix(in srgb, var(--bg) 78%, transparent); font-size: .98rem; }
.box ul { list-style: none; padding: 0; margin: 0; }
.box li a { display: block; padding: 10px 0; text-decoration: none; border-bottom: 1.5px solid var(--line); font-weight: 600; font-size: .96rem; } .box li:last-child a { border-bottom: 0; } .box li a:hover { color: var(--tally); }
.meta { font: 600 11.5px var(--mono); color: var(--muted); display: flex; gap: 18px; flex-wrap: wrap; letter-spacing: .05em; text-transform: uppercase; }
.err404 { min-height: 70vh; display: grid; place-items: center; text-align: center; }
.err404 h1 { font-size: clamp(6rem, 22vw, 14rem); margin: 0; -webkit-text-stroke: 3px var(--ink); color: var(--flash); }

/* ------- reveal ------- */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0s); }
.rv.in { opacity: 1; transform: none; }
.no-js .rv { opacity: 1; transform: none; }

/* ------- responsive ------- */
@media (max-width: 1100px) {
  .hero-grid, .split, .page-grid, .linkcase { grid-template-columns: 1fr; }
  .aside { position: static; }
  .flows { grid-template-columns: 1fr 1fr; }
  .principles { grid-template-columns: 1fr 1fr; } .principle:nth-child(2) { border-right: 0; } .principle:nth-child(-n+2) { border-bottom: 2px solid var(--ink); }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; } .footer-grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .nav { position: fixed; inset: 72px 0 auto 0; background: var(--bg); border-bottom: 2px solid var(--ink); flex-direction: column; align-items: stretch; padding: 14px 20px 24px; gap: 2px; display: none; max-height: calc(100vh - 72px); overflow: auto; z-index: 70; }
  .nav.open { display: flex; } .menu-btn { display: grid; place-items: center; }
  .dd-menu { position: static; width: auto; display: block; box-shadow: none; border: 0; padding: 0 0 0 10px; background: none; } .dd > button { display: none; }
  .verbs { grid-template-columns: 1fr; box-shadow: 6px 6px 0 var(--ink); } .verb { border-right: 0; border-bottom: 2px solid var(--ink); } .verb:last-child { border-bottom: 0; } .verb::after { right: auto; left: 40px; top: auto; bottom: -17px; transform: rotate(90deg); }
  .price-grid, .cards { grid-template-columns: 1fr; } .price-card.featured { transform: none; }
  .uc { grid-template-columns: 1fr; } .uc-tabs { display: flex; overflow-x: auto; gap: 8px; padding: 4px 4px 10px; } .uc-tab { flex: none; } .uc-tab[aria-selected="true"], .uc-tab:hover { transform: none; }
  .bento { grid-template-columns: 1fr 1fr; } .cell.c2, .cell.c3, .cell.c4 { grid-column: span 2; }
  .facts { grid-template-columns: 1fr 1fr; } .fact:nth-child(2) { border-right: 0; } .fact:nth-child(-n+2) { border-bottom: 2px solid var(--ink); }
  .st-langs { grid-template-columns: 1fr; gap: 14px; } .lb-arrow { transform: rotate(90deg); margin: 0 auto; width: 44px; height: 44px; }
  .vs-sum { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  body { font-size: 16px; } .wrap, .narrow { width: min(var(--wrap), 100% - 32px); }
  .wire .date { display: none; }
  .flows { grid-template-columns: 1fr; } .principles { grid-template-columns: 1fr; } .principle { border-right: 0; border-bottom: 2px solid var(--ink); } .principle:last-child { border-bottom: 0; }
  .bento { grid-template-columns: 1fr; } .cell.c2, .cell.c3, .cell.c4 { grid-column: auto; }
  .footer-grid { grid-template-columns: 1fr 1fr; } .calc-out { grid-template-columns: 1fr; }
  .compare th, .compare td { padding: 12px; font-size: .86rem; } .compare tbody th { width: auto; }
  .hero-cta .btn { width: 100%; } .st-url { display: none; }
  .art .txt { padding: 18px 18px 50px; } .pane { padding: 16px; }
  .toast { white-space: normal; width: max-content; max-width: 86%; text-align: center; bottom: 130px; }
  .vs-bar { height: 54px; } .vs-bar span { font-size: 9.5px; letter-spacing: 0; }
  .phone-wrap::before { width: 340px; height: 340px; } .phone { width: 262px; }
  .sticky-cta { display: flex; position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 80; gap: 10px; padding: 9px 9px 9px 16px; background: var(--ink); color: var(--bg); border-radius: 14px; border: 2px solid var(--flash); transform: translateY(140%); transition: transform .4s; align-items: center; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
  .sticky-cta.show { transform: none; } .sticky-cta span { font: 700 .86rem/1.25 var(--sans); flex: 1; }
  .sticky-cta .btn-flash { box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .rv { opacity: 1; transform: none; } .vs-bar span { width: var(--w); }
}
@media print { .wire, .site-header, .sticky-cta, .cta-band, .site-footer, .aside { display: none !important; } }

/* ------- audience strip ------- */
.strip-track.aud { animation-duration: 50s; align-items: center; }
.strip-track.aud span { font: 800 1.15rem var(--display); letter-spacing: -.01em; padding: 18px 8px; white-space: nowrap; }
.strip-track.aud span.lead { font: 700 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--flash); padding-right: 26px; }
.strip-track.aud i { font-style: normal; color: var(--flash); font-size: .6rem; padding: 0 22px; }

/* ------- features + animated icons ------- */
.feat-group { margin: 54px 0 22px; display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.feat-group:first-of-type { margin-top: 0; }
.feat-group span { font: 700 11.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; background: var(--ink); color: var(--bg); padding: 5px 10px; border-radius: 6px; }
.feat-group h3 { margin: 0; font-size: clamp(1.4rem, 2.4vw, 2rem); letter-spacing: -.03em; }
.feats { display: grid; gap: 18px; }
.feats.f3 { grid-template-columns: repeat(3, 1fr); } .feats.f4 { grid-template-columns: repeat(4, 1fr); margin-top: 18px; }
.feat { position: relative; background: var(--card); border: 2px solid var(--ink); border-radius: 18px; padding: 26px 26px 28px; box-shadow: 6px 6px 0 var(--ink); transition: transform .2s, box-shadow .2s; display: flex; flex-direction: column; }
.feat:hover { transform: translate(-2px, -3px); box-shadow: 9px 10px 0 var(--ink); }
.feat h3 { font-size: 1.3rem; margin: 18px 0 8px; } .feat p { color: var(--ink2); margin: 0; font-size: .98rem; line-height: 1.55; }
.feat.core { background: var(--ink); color: var(--bg); box-shadow: 6px 6px 0 var(--flash); border-color: var(--ink); }
.feat.core p { color: color-mix(in srgb, var(--bg) 78%, transparent); } .feat.core:hover { box-shadow: 9px 10px 0 var(--flash); }
:root[data-theme="dark"] .feat.core { background: #1f1f18; border-color: var(--flash); color: var(--ink); } :root[data-theme="dark"] .feat.core p { color: var(--ink2); }
.ftag { position: absolute; right: 18px; top: 18px; font: 700 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; background: var(--flash); color: #0f0f0d; border: 1.5px solid #0f0f0d; padding: 4px 8px; border-radius: 99px; }
.feat.sm { padding: 20px; box-shadow: 4px 4px 0 var(--ink); } .feat.sm h3 { font-size: 1.08rem; margin-top: 12px; } .feat.sm p { font-size: .9rem; } .feat.sm .fic { width: 54px; height: 54px; }
.fic { width: 76px; height: 76px; border-radius: 16px; background: var(--bg2); border: 2px solid var(--ink); display: grid; place-items: center; color: var(--ink); }
.fic.big { width: 120px; height: 120px; border-radius: 24px; background: var(--card); }
.feat.core .fic { background: var(--bg); color: #0f0f0d; border-color: var(--flash); } :root[data-theme="dark"] .feat.core .fic { background: #0c0c0a; color: var(--ink); }
.fic svg.ai { width: 78%; height: 78%; overflow: visible; } .fic svg.ai { --card: #fffdf6; } :root[data-theme="dark"] .fic svg.ai { --card: #26261d; }
.fic svg.ai [fill="var(--card)"] { fill: var(--card); }
.verb .art-svg { height: auto; border: 0; background: none; padding: 6px 0 4px; display: block; margin: 4px 0 18px; }
.ai * { transform-box: fill-box; transform-origin: center; }
.a-bars .bars path { animation: bw 1.1s ease-in-out infinite; } .a-bars .bars path:nth-child(2) { animation-delay: .15s } .a-bars .bars path:nth-child(3) { animation-delay: .3s } .a-bars .bars path:nth-child(4) { animation-delay: .45s }
@keyframes bw { 50% { transform: scaleY(.45); } }
.ai .ln1, .ai .ln2, .ai .ln3 { stroke-dasharray: 22; animation: lnw 2.6s ease-in-out infinite; } .ai .ln2 { animation-delay: .25s } .ai .ln3 { animation-delay: .5s }
@keyframes lnw { 0% { stroke-dashoffset: 22; } 40%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -22; } }
.a-flow .flow { stroke-dashoffset: 0; animation: dashmv 1s linear infinite; } @keyframes dashmv { to { stroke-dashoffset: -16; } }
.a-link path:not(.spark) { stroke-dasharray: 60; animation: dr 2.8s ease-in-out infinite; } @keyframes dr { 0% { stroke-dashoffset: 60; } 45%, 100% { stroke-dashoffset: 0; } }
.a-link .spark { animation: nudge2 1.4s ease-in-out infinite; } @keyframes nudge2 { 50% { transform: translate(3px, 3px); } }
.a-bub .b1 { animation: bob 3s ease-in-out infinite; } .a-bub .b2 { animation: bob 3s ease-in-out infinite reverse; } @keyframes bob { 50% { transform: translateY(-3px); } }
.a-orb .orb { transform-origin: 32px 32px; transform-box: view-box; animation: spin 6s linear infinite; }
.a-swap .sw1 { animation: sw 2s ease-in-out infinite; } .a-swap .sw2 { animation: sw 2s ease-in-out infinite reverse; } @keyframes sw { 50% { transform: translateX(5px); } }
.a-pen .pencil { animation: wr 2s ease-in-out infinite; } @keyframes wr { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(-6px, -4px) rotate(-6deg); } }
.a-coin .coin { animation: cn 1.8s cubic-bezier(.3, 0, .4, 1) infinite; } .a-coin .sh { animation: sh 1.8s cubic-bezier(.3, 0, .4, 1) infinite; }
@keyframes cn { 50% { transform: translateY(-7px) scaleX(.92); } } @keyframes sh { 50% { transform: scale(.7); opacity: .1; } }
.a-clock .hand1 { transform-origin: 32px 32px; transform-box: view-box; animation: spin 5s linear infinite; } .a-clock .hand2 { transform-origin: 32px 32px; transform-box: view-box; animation: spin 20s linear infinite; }
.a-users .tick { animation: pop 1.6s ease-in-out infinite; } @keyframes pop { 50% { transform: scale(1.35); } }
.a-down .dn { animation: dn 1.3s ease-in-out infinite; } @keyframes dn { 50% { transform: translateY(5px); } }
.a-lock .shackle { animation: lk 3s ease-in-out infinite; transform-origin: 32px 29px; transform-box: view-box; } @keyframes lk { 0%, 40% { transform: translateY(-5px); } 55%, 100% { transform: translateY(0); } }
.a-up .upa { animation: up 1.4s ease-in-out infinite; } @keyframes up { 50% { transform: translateY(-5px); } }
.a-ok .ok { animation: pop 2.4s ease-in-out infinite; }
@media (max-width: 1100px) { .feats.f4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) { .feats.f3 { grid-template-columns: 1fr; } }
@media (max-width: 680px) { .feats.f4 { grid-template-columns: 1fr; } .feat-group { margin-top: 40px; } }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ai * { animation: none !important; } }

/* hero refinements */
.hero h1 { font-size: clamp(2.5rem, 5.2vw, 4.7rem); line-height: .98; }
.hero h1 .l { display: block; }
.hv { min-height: 760px; }
.hv-rec { width: 72%; top: 0; }
.hv-fig { aspect-ratio: 16/8.6; }
.hv-art { width: 76%; }
.hv-go { left: 56%; top: 47%; }
.hv-more { bottom: 6px; }
@media (max-width: 1100px) { .hv { min-height: 740px; } }
.hero h1 { font-size: clamp(2.4rem, 4.5vw, 4.1rem); }
.hero-grid { grid-template-columns: 1.08fr .92fr; }
.hv-more { display: none; }
.hv-body h2 { min-height: 3.5em; }
.hv-go { left: 14%; top: 50.5%; transform: rotate(90deg); width: 64px; height: 64px; margin: -32px 0 0 -32px; }
@media (max-width: 680px) { .hv-go { transform: rotate(90deg); } .hv-body h2 { min-height: 0; } }
@media (max-width: 1100px) { .hv { min-height: 0; display: grid; gap: 22px; max-width: 620px; } .hv-rec, .hv-art { position: relative; width: 100%; right: auto; left: auto; top: auto; bottom: auto; } .hv-go { position: relative; left: auto; top: auto; margin: -10px auto; } }
@media (max-width: 1100px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } .hero h1 { font-size: clamp(2.3rem, 8vw, 3.6rem); } }

/* ------- processing overlay (so a recording never looks like a video player) ------- */
.proc { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s; background: linear-gradient(rgba(8, 12, 28, .38), rgba(8, 12, 28, .5)); }
.proc::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(111, 180, 255, .18) 1px, transparent 1px), linear-gradient(90deg, rgba(111, 180, 255, .18) 1px, transparent 1px); background-size: 22px 22px; }
.proc .scan { position: absolute; left: 0; right: 0; height: 34%; top: -34%; background: linear-gradient(transparent, rgba(255, 210, 31, .38) 85%, rgba(255, 210, 31, .95) 99%, transparent); animation: scan 2.4s linear infinite; }
@keyframes scan { to { top: 100%; } }
.proc .br { position: absolute; width: 18px; height: 18px; border: 0 solid var(--flash); } .proc .tl { left: 10px; top: 10px; border-width: 3px 0 0 3px; } .proc .tr { right: 10px; top: 10px; border-width: 3px 3px 0 0; } .proc .bl { left: 10px; bottom: 10px; border-width: 0 0 3px 3px; } .proc .brr { right: 10px; bottom: 10px; border-width: 0 3px 3px 0; }
.proc .pw { position: absolute; left: 14px; right: 14px; bottom: 34px; height: 28%; display: flex; gap: 3px; align-items: flex-end; }
.proc .pw b { flex: 1; background: var(--flash); border-radius: 2px; height: 14%; animation: pwv 1s ease-in-out infinite; animation-delay: var(--d); } @keyframes pwv { 50% { height: var(--h); } }
.proc .pb { position: absolute; left: 12px; bottom: 8px; display: inline-flex; gap: 8px; align-items: center; font: 700 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #fff; background: rgba(0, 0, 0, .7); padding: 4px 9px; border-radius: 99px; }
.proc .pb i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--flash); border-top-color: transparent; animation: spin .8s linear infinite; }
.hv-rec.proc-on .proc, .filecard.proc-on .proc { opacity: 1; }
.hv-fig { position: relative; }
.filecard .thumb { display: none; } .filecard .dropz { display: grid; }
.filecard.has-thumb .thumb { display: block; animation: fadeup .5s; } .filecard.has-thumb .dropz { display: none; }
.dropz { border: 2.5px dashed var(--st-line); border-radius: 12px; margin: 12px 12px 4px; padding: 22px 14px 16px; place-items: center; text-align: center; gap: 4px; background: var(--st-2); position: relative; min-height: 170px; align-content: center; }
.dropz svg { width: 58px; height: 58px; color: var(--st-ink); --card: var(--st-bg); } .dropz b { font: 800 1rem var(--display); } .dropz > span { font: 500 11.5px var(--mono); color: var(--st-mut); }
.dfile { position: absolute; left: 50%; top: -60px; transform: translateX(-50%); display: flex; gap: 8px; align-items: center; background: var(--st-bg); border: 2px solid var(--st-line); border-radius: 10px; padding: 7px 12px; box-shadow: 3px 3px 0 var(--st-line); white-space: nowrap; opacity: 0; font: 600 12px var(--sans); }
.dfile .fi { background: var(--flash); color: #0f0f0d; font: 800 9px var(--mono); padding: 5px 6px; border-radius: 5px; } .dfile em { font: 700 12px var(--sans); background: none; padding: 0; margin: 0; color: inherit; } .dfile small { font: 500 10.5px var(--mono); color: var(--st-mut); }
.filecard.dropping .dfile { animation: dropin 1s cubic-bezier(.3, 1.3, .5, 1) forwards; } @keyframes dropin { from { opacity: 0; top: -60px; } 30% { opacity: 1; } to { opacity: 1; top: 62%; } }
.filecard.dropping .dropz, .filecard.uploading .dropz { border-color: var(--flash); background: color-mix(in srgb, var(--flash) 14%, var(--st-2)); }
.filecard.uploading .dfile { opacity: 1; top: 62%; }
.thumb .du { left: 10px; right: auto; bottom: 10px; }
.filecard.fin .proc { opacity: 0; }

/* ------- hero language chips ------- */
.hv-lg { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; align-items: center; }
.hv-lg em { font: 700 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #6a685e; background: none; padding: 0 4px 0 0; margin: 0; }
.hv-lg button { font: 600 11.5px var(--indic); background: #fff; color: #0f0f0d; border: 1.5px solid #0f0f0d; border-radius: 99px; padding: 3px 9px; cursor: pointer; line-height: 1.3; transition: .15s; }
.hv-lg button:hover { background: var(--flash); } .hv-lg button.on { background: #0f0f0d; color: var(--flash); }
.hv { min-height: 820px; }
.hv-body h2.ind { font-family: var(--indic); font-weight: 800; letter-spacing: -.01em; }
.hv-body .dek.ind { font-family: var(--indic); }

/* ------- feature panels ------- */
.feat { padding: 0; overflow: hidden; }
.feat .fbody { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; } .feat .fbody h3 { margin: 0 0 8px; font-size: 1.28rem; }
.fpanel { position: relative; background: var(--bg2); color: var(--ink); border-bottom: 2px solid var(--ink); padding: 14px 12px; }
.fpanel svg.fp { width: 100%; height: auto; max-height: 170px; --card: #fffdf6; --bg2: #ece9dd; overflow: visible; }
:root[data-theme="dark"] .fpanel { background: #20201a; }
.feat.core .fpanel { background: var(--flash); color: #0f0f0d; border-bottom-color: var(--flash); } .feat.core .fpanel svg.fp { --ink: #0f0f0d; --bg: #fffdf6; --flash: #fffdf6; }
:root[data-theme="dark"] .feat.core .fpanel svg.fp { --ink: #0f0f0d; --bg: #fffdf6; }
.feat .ftag { right: 12px; top: 12px; }
.feat.core { box-shadow: 6px 6px 0 var(--flash); }
.feat.sm { padding: 20px; } .feat.sm .fic { background: var(--bg2); }
.a-bars .bars path { stroke-width: 4; }
.fp .click { animation: clk 1.6s ease-in-out infinite; } @keyframes clk { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-4px, -5px) scale(.92); } }
.fp .seg rect { animation: seg 3s ease-in-out infinite; transform-box: fill-box; transform-origin: left; } .fp .seg rect:nth-child(2) { animation-delay: .3s } .fp .seg rect:nth-child(3) { animation-delay: .6s } .fp .seg rect:nth-child(4) { animation-delay: .9s } .fp .seg rect:nth-child(5) { animation-delay: 1.2s }
@keyframes seg { 0% { transform: scaleX(0); } 30%, 85% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
.fp .flow { animation: dashmv 1s linear infinite; }
.fp .orb { transform-origin: 120px 59px; transform-box: view-box; animation: spin 5s linear infinite; }
.fp .b1 { animation: bob 3s ease-in-out infinite; } .fp .b2 { animation: bob 3s ease-in-out infinite reverse; }
.fp .sw1 { animation: sw 2s ease-in-out infinite; } .fp .sw2 { animation: sw 2s ease-in-out infinite reverse; }
.fp .coin { animation: cn 1.8s ease-in-out infinite; } .fp .pencil { animation: wr 2s ease-in-out infinite; }
.fp .bars path { animation: bw 1.1s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } .fp .bars path:nth-child(2n) { animation-delay: .2s } .fp .bars path:nth-child(3n) { animation-delay: .4s }
.dropz { min-height: 205px; padding-bottom: 54px; }
.filecard.dropping .dfile { animation-name: dropin2; } .filecard.uploading .dfile { top: 74%; }
@keyframes dropin2 { from { opacity: 0; top: -60px; } 30% { opacity: 1; } to { opacity: 1; top: 74%; } }
.hv { min-height: 800px; }
@media (max-width: 1100px) { .hv { min-height: 0; } }

/* ------- AI processing "magic" overlay (replaces the waveform look) ------- */
.proc .pw { display: none; }
.proc { background: linear-gradient(rgba(10, 8, 30, .35), rgba(10, 8, 30, .5)); overflow: hidden; }
.proc::before { opacity: .55; background-size: 26px 26px; }
.proc .aurora { position: absolute; inset: -30%; background: conic-gradient(from 0deg, rgba(255, 210, 31, 0) 0deg, rgba(255, 210, 31, .38) 60deg, rgba(255, 59, 47, .0) 120deg, rgba(120, 90, 255, .42) 200deg, rgba(0, 200, 255, .0) 280deg, rgba(255, 210, 31, 0) 360deg); filter: blur(26px); mix-blend-mode: screen; animation: spin 5s linear infinite; }
.proc .net { position: absolute; inset: 0; width: 100%; height: 100%; }
.proc .net line { stroke: rgba(255, 224, 120, .75); stroke-width: .5; vector-effect: non-scaling-stroke; stroke-dasharray: 6 90; animation: flowl 2.2s linear infinite; animation-delay: var(--d); opacity: .9; }
.proc .net circle { fill: #ffe27a; filter: drop-shadow(0 0 3px #ffd21f); animation: node 1.6s ease-in-out infinite; animation-delay: var(--d); transform-box: fill-box; transform-origin: center; }
@keyframes flowl { from { stroke-dashoffset: 96; } to { stroke-dashoffset: 0; } } @keyframes node { 0%, 100% { transform: scale(.6); opacity: .5; } 50% { transform: scale(1.8); opacity: 1; } }
.proc .sp u { position: absolute; width: 10px; height: 10px; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: tw 1.8s ease-in-out infinite; animation-delay: var(--d); opacity: 0; filter: drop-shadow(0 0 4px #fff); }
@keyframes tw { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 50% { opacity: 1; transform: scale(1.5) rotate(90deg); } }
.proc .scan { height: 22%; top: -22%; background: linear-gradient(transparent, rgba(255, 255, 255, .22) 60%, rgba(255, 238, 160, .95) 98%, transparent); mix-blend-mode: screen; }
.hv-rec.proc-on .hv-fig, .filecard.proc-on .thumb { box-shadow: inset 0 0 0 3px var(--flash), inset 0 0 40px rgba(255, 210, 31, .55); animation: glow 1.6s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: inset 0 0 0 3px #fff3b0, inset 0 0 70px rgba(255, 210, 31, .85); } }
.proc .pb { padding: 5px 11px 5px 9px; background: rgba(8, 6, 24, .82); border: 1px solid rgba(255, 210, 31, .6); }
.proc .cyc { display: inline-grid; } .proc .cyc b { grid-area: 1/1; font-weight: 700; opacity: 0; animation: cyc 6s infinite; } .proc .cyc b:nth-child(2) { animation-delay: 1.5s } .proc .cyc b:nth-child(3) { animation-delay: 3s } .proc .cyc b:nth-child(4) { animation-delay: 4.5s }
@keyframes cyc { 0% { opacity: 0; transform: translateY(5px); } 6%, 22% { opacity: 1; transform: none; } 28%, 100% { opacity: 0; transform: translateY(-5px); } }
.hero .sub1 { font: 700 clamp(1.15rem, 1.8vw, 1.5rem)/1.3 var(--display); letter-spacing: -.02em; margin: 0 0 16px; max-width: 30em; color: var(--ink); }
.hero .sub1 mark { background: linear-gradient(transparent 58%, var(--flash) 58% 94%, transparent 94%); color: inherit; padding: 0 .08em; }
:root[data-theme="dark"] .hero .sub1 mark { background: none; color: var(--flash); }
.hero h1 { margin-bottom: 18px; }
.thumb .du { left: auto; right: 10px; top: 10px; bottom: auto; }