/* <!-- mirrored from odilelabs.com/source.css by tools/mirror_odile.py; do not hand-edit -->
generated by tools/mirror_odile.py; do not hand-edit */
:root{color-scheme:light;--bg:#ffffff;--bg-soft:#f5f5f7;--card:#ffffff;--bg-top:#ffffffd9;--ink:#1d1d1f;--ink-2:#6e6e73;--rule:#d2d2d7;--rule-strong:#86868b;--field-edge:var(--rule-strong);--ring:inset 0 0 0 1.5px var(--rule-strong);--ring-plate:inset 0 0 0 1.5px #f5f5f799;--accent:#0071e3;--accent-ink:#ffffff;--accent-soft:#0066cc;--lamp:#0071e3;--lamp-hi:#0066cc;--lamp-ink:#ffffff;--btn-edge:0 0 #0000;--lcd:#0071e3;--lcd-glow:#64b5ff;--focus:#0071e3;--panel-bg:#1d1d1f;--panel-ink:#f5f5f7;--panel-ink-2:#a1a1a6;--panel-edge:transparent;--night:#111113;--plate-ink:#f5f5f7;--plate-scrim:#000000cc;--gen-bg:#000000cc;--gen-ink:#f5f5f7;--caller-ink:#ffffff;--bubble:#2c2c2e;--sem-ok:#17603a;--sem-bad:#b3261e;--sem-warn:#8a5a00;--err-bg:#fdecec;--err-edge:#f1b3b3;--err-ink:#8a1c12;--mark-ring:currentColor;--mark-arc:var(--accent);--tone-dusk:var(--bg);--tone-night:var(--bg);--tone-late:var(--bg);--tone-dawn:var(--bg);--foot-bg:var(--bg-soft);--bg-2:var(--bg-soft);--soft:var(--bg-soft);--mute:var(--ink-2);--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;--s10:128px;--r-media:2px;--r-ctl:8px;--r-phone:22px;--r-chip:999px;--r-btn:980px;--d-fast:120ms;--d-mid:300ms;--d-slow:800ms;--ease:cubic-bezier(.2,.7,.2,1);--edge:max(16px,(100vw - 1320px) / 2);--header-h:60px;--pad:clamp(16px,2.5vw,32px);--f-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;--f-body:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif;--f-mono:ui-monospace,Menlo,monospace;--t-hero:clamp(38px,6vw + 10px,108px);--t-h1:clamp(34px,4vw + 10px,72px);--t-h2:clamp(28px,2.4vw + 13px,48px);--t-h3:clamp(21px,.8vw + 16px,26px);--t-price:clamp(38px,3.2vw + 17px,60px);--t-tel:clamp(30px,3vw + 16px,52px);--t-lede:clamp(19px,.6vw + 16px,23px);--t-small:15px;--t-sub:clamp(17px,1vw + 12px,22px);--t-label:12.5px;--t-time:clamp(15px,.4vw + 13px,18px)}
/* Light only (24 Sep 2026, Tolga: "i want the old colors back"): the palette live 7-23 Sep, no dark variant, so a
   visitor with a dark system setting sees the same white site. #0071e3 text on --bg-soft is 4.31:1, under AA, so
   links on a soft surface use --accent-soft (#0066cc, 5.1:1 there).
   Plain fonts (25 Sep 2026, Tolga: "yes plain fonts"): the system stacks of the accepted look; no webfont, no
   preload. The heading sizes were set for a condensed face, and the system face sets about 1.22x wider at the same
   size, so heading sizes are about 0.82x the old ones, with line-height and tracking for a normal-width face. */
.on-plate,.panel,.live,.film-frame,.film-dialog,.callbar{color-scheme:dark;--ink:var(--panel-ink);--ink-2:var(--panel-ink-2);--rule:#3a3a3c;--rule-strong:#86868b;--accent:var(--lcd-glow);--lcd:var(--lcd-glow);--focus:var(--lcd-glow);--sem-bad:#ff8a80}
.tier,.note,.ok,footer,.lc-out,.dr-idea,.tk-out,.doc blockquote{--accent:var(--accent-soft)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 16px)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 18px/1.6 var(--f-body);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video{display:block;max-width:100%}
[hidden]{display:none!important}
a{color:var(--accent);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
h1,h2,h3{font-family:var(--f-display);font-weight:600;margin:0 0 .4em;text-wrap:balance}
h1{font-size:var(--t-h1);line-height:1.05;letter-spacing:-.02em}
h2{font-size:var(--t-h2);line-height:1.1;letter-spacing:-.015em;max-width:22ch}
h3{font-size:var(--t-h3);line-height:1.15;letter-spacing:-.01em}
p,ul,ol,dl{margin:0 0 1em}
.hero{font-size:var(--t-hero);line-height:1.05;max-width:14ch}
.lede{font-size:var(--t-lede);line-height:1.5;color:var(--ink-2);max-width:60ch}
.small{font-size:var(--t-small);line-height:1.5;color:var(--ink-2)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:8px;top:-60px;z-index:99;padding:12px 16px;border-radius:var(--r-ctl);background:var(--lamp);color:var(--lamp-ink)}
.skip:focus{top:8px}
.wrap{max-width:1320px;margin-inline:auto;padding-inline:var(--pad)}
.sec{position:relative;padding-block:clamp(64px,9vw,128px);background:var(--tone,var(--bg))}
[data-tone=dusk]{--tone:var(--tone-dusk)}[data-tone=night]{--tone:var(--tone-night)}[data-tone=late]{--tone:var(--tone-late)}[data-tone=dawn]{--tone:var(--tone-dawn)}
.sec[data-tone]+.sec[data-tone]::before{content:"";position:absolute;inset:-160px 0 auto;height:160px;background:linear-gradient(transparent,var(--tone));pointer-events:none}
.sec>.wrap{position:relative;z-index:1}
.cols{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
.c-read{grid-column:1/8}.c-margin{grid-column:9/13}.c-full{grid-column:1/-1}
.story{display:grid;grid-template-columns:88px minmax(0,1fr);gap:24px}
.story>.time-col{position:sticky;top:calc(var(--header-h) + 36px);align-self:start;padding-top:.6em}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:var(--s5)}
.price-line{margin-top:var(--s4)}
@media (max-width:1099px){.story{display:block}.story>.time-col{position:static;padding:0}}
@media (max-width:899px){.cols>*{grid-column:1/-1}}
@media (max-width:639px){body{font-size:17px}:root{--header-h:56px}}
/* ---- HEADER (24 Sep 2026: one header on every page, mirrored byte-for-byte by the worker's site.js). The three
   groups are <details> disclosures, so they open by click, tap, Enter or Space with no script at all; js/ui.js only
   adds closing (outside click, Escape, another group opening, focus leaving). Under 1100 px the Menu toggle opens a
   panel that lists every group expanded under its heading. ---- */
.top{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:16px;height:var(--header-h);padding-inline:var(--pad);background:var(--bg);border-bottom:1px solid var(--rule)}
@media (pointer:fine){.top{background:var(--bg-top);-webkit-backdrop-filter:saturate(1.8) blur(20px);backdrop-filter:saturate(1.8) blur(20px)}}
.wordmark{display:inline-flex;align-items:center;gap:10px;min-height:44px;flex:none;color:var(--ink);text-decoration:none;font:600 22px/1 var(--f-display)}
.wordmark span span{color:var(--ink-2)}
.mark{width:26px;height:26px;flex:none;overflow:visible;fill:none;stroke-width:8}
.mark circle{stroke:var(--mark-ring);opacity:.28}.mark path{stroke:var(--mark-arc);stroke-linecap:round}
.menu{display:flex;align-items:center;justify-content:flex-end;flex:1;min-width:0}
.top nav{display:flex;align-items:center;gap:4px}
.top nav>a,.navgroup>summary,.menu-tel,.tel-chip{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:none;white-space:nowrap;font:500 15px/1 var(--f-body)}
.top nav>a,.navgroup>summary{padding:0 10px;border-radius:var(--r-ctl)}
.top nav>a:hover,.navgroup>summary:hover{color:var(--accent)}
.top nav>a.signin{margin-left:8px;padding:0 14px;box-shadow:var(--ring)}
.navgroup{position:relative}
.navgroup>summary{gap:7px;list-style:none;cursor:pointer;user-select:none}
.navgroup>summary::-webkit-details-marker{display:none}
.navgroup>summary::after{content:"";width:7px;height:7px;margin-top:-4px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);transition:transform var(--d-fast)}
.navgroup[open]>summary::after{margin-top:4px;transform:rotate(-135deg)}
.navpanel{position:absolute;top:calc(100% + 8px);left:0;z-index:60;display:flex;flex-direction:column;min-width:264px;padding:8px;border-radius:14px;background:var(--card);box-shadow:0 0 0 1px var(--rule),0 16px 40px #0000001f}
.navpanel a{display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:var(--r-ctl);color:var(--ink);text-decoration:none;font:500 15px/1.3 var(--f-body)}
.top .navpanel a:hover{background:var(--bg-soft);color:var(--ink)}
.top nav a[aria-current=page],.navgroup:has([aria-current=page])>summary{text-decoration:underline 2px var(--accent);text-underline-offset:7px}
.tel-chip{gap:8px;flex:none;font:500 14px/1 var(--f-mono)}
.pip{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--lcd);flex:none}
.top-cta{flex:none;min-height:44px;padding:0 18px;font-size:15px;white-space:nowrap}
.tel-chip .c,.menu-end,.navbtn{display:none}
.navtoggle{position:absolute;width:1px;height:1px;margin:0;opacity:0}
@media (min-width:1100px){.navtoggle{display:none}}
@media (min-width:1100px) and (max-width:1219px){.top .tel-chip .n{display:none}.top .tel-chip .c{display:inline}}
.top-slot{display:flex;gap:12px}
.top.compact .tel-chip{margin-left:auto}
@media (max-width:1099px){
.navbtn{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:var(--r-ctl);box-shadow:var(--ring);order:4;font-weight:600;cursor:pointer;user-select:none}
.top:not(.compact) .tel-chip{order:2;margin-left:auto;padding:0 12px;border-radius:var(--r-ctl);box-shadow:var(--ring)}
.top:not(.compact) .tel-chip .n{display:none}.top:not(.compact) .tel-chip .c{display:inline}
.top-cta{order:3}
.menu{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;justify-content:flex-start;align-items:stretch;max-height:calc(100svh - var(--header-h));overflow:auto;overscroll-behavior:contain;background:var(--bg);border-bottom:1px solid var(--rule);box-shadow:0 16px 40px #0000001f}
.navtoggle:checked~.menu{display:flex}
.navtoggle:focus-visible~.navbtn{outline:3px solid var(--focus);outline-offset:3px}
.top nav{flex:none;flex-direction:column;align-items:stretch;gap:0}
.navgroup>summary{display:flex;padding:0 var(--pad);border-top:1px solid var(--rule);border-radius:0;font:500 var(--t-label)/1.4 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.navpanel{position:static;min-width:0;padding:0 0 8px;border-radius:0;background:none;box-shadow:none}
.navpanel a,.top nav>a{min-height:48px;padding:0 var(--pad);border-radius:0;font-size:16px}
.navpanel a{padding-left:calc(var(--pad) + 12px)}
.top nav>a{border-top:1px solid var(--rule)}
.top nav>a.signin{margin:0;padding:0 var(--pad);box-shadow:none}
.menu-end{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;padding:16px var(--pad) 20px;border-top:1px solid var(--rule)}
.menu-tel{font-family:var(--f-mono)}}
/* Where the browser can show a closed group's content, the phone panel shows every group open and its heading stops
   being a toggle; elsewhere js/ui.js opens them, and with no script a heading still opens its group by tap. */
@supports selector(::details-content){@media (max-width:1099px){.navgroup::details-content{content-visibility:visible}.navgroup>summary{pointer-events:none}.navgroup>summary::after{display:none}}}
@media (max-width:559px){.top .top-cta{display:none}}
@media (max-width:639px){.top.compact .tel-chip .n{display:none}.top.compact .tel-chip .c{display:inline}}
/* KNOWN 18: the compact header (now only /otel) keeps its one action on one line; tighter gaps under 400 px, and
   under 360 px the action gives way (the page repeats it in its first screen) */
.top-slot .btn{white-space:nowrap}
@media (max-width:399px){.top.compact{gap:12px}.top-slot .btn{padding-inline:14px}}
@media (max-width:359px){.top.compact .top-slot{display:none}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border:0;border-radius:var(--r-btn);background:var(--lamp);color:var(--lamp-ink);font:600 16px/1 var(--f-body);letter-spacing:.01em;text-decoration:none;cursor:pointer;box-shadow:var(--btn-edge);transition:background-color var(--d-fast)}
.btn:hover{background:var(--lamp-hi)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:var(--ring)}
.btn.ghost:hover{background:color-mix(in srgb,currentColor 8%,transparent)}
:is(.on-plate,.panel,.live,.film-dialog) .btn.ghost{color:var(--plate-ink);box-shadow:var(--ring-plate)}
.btn.tel{font:500 16px/1 var(--f-mono)}
.btn.end{box-shadow:inset 0 0 0 1.5px var(--sem-bad)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.on-plate :focus-visible,.film-frame :focus-visible{box-shadow:0 0 0 6px #000000b2}
.link-arrow{padding-block:11px;text-decoration:underline 1.5px}
.link-arrow::after{content:"\a0\2192";display:inline-block;transition:transform var(--d-fast)}
.link-arrow:hover::after{transform:translateX(3px)}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border:1px solid #f5f5f740;border-radius:var(--r-chip);background:var(--gen-bg);color:var(--gen-ink);font:500 11.5px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
/* "Hear it" proof button (28 Sep 2026): one tap plays a dated, labelled real call clip, on
   /demo and the home hero. No waveform, no library -- the button toggles one <audio>. */
.dm-proof{margin-top:var(--s5)}
.dm-play{gap:10px}
.dm-play.is-playing .dm-play-ic{opacity:.6}
.dm-play-time{font-family:var(--f-mono);font-size:14px;opacity:.75}
.dm-proof-cap{margin-top:var(--s2)}
/* A long chip ("Her voice · one line, three settings") ran 19 px past a 320 px screen: below 400 px a chip may wrap. */
@media (max-width:399px){.chip{max-width:100%;white-space:normal;line-height:1.3}}
.chip.on-page{background:transparent;color:var(--ink-2);border-color:var(--rule-strong)}
.chip .pip{width:7px;height:7px;background:var(--lcd-glow)}.chip.on-page .pip{background:var(--lcd)}
.label,.who,th,.figs span,.pull cite,.wont li::before,.msg-b dt{font:500 var(--t-label)/1.4 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.time,.live-timer{font:500 var(--t-time)/1.3 var(--f-mono)}
.label.time{font-size:var(--t-label)}
:is(.on-plate,.panel,.live) .label{color:var(--plate-ink)}
.sub{font:600 var(--t-sub)/1.45 var(--f-body);color:var(--plate-ink);background:var(--plate-scrim);padding:.12em .45em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.who{color:var(--lcd)}.who.caller,.who.you{color:var(--accent)}
.sub .who{font:inherit;letter-spacing:0;text-transform:none;color:var(--lcd-glow)}.sub .who.caller{color:var(--caller-ink)}
.scene{position:relative;display:grid;align-items:end;min-height:calc(100svh - var(--header-h));max-height:960px;background:var(--night);color:var(--plate-ink);isolation:isolate;overflow:hidden}
@media (max-width:767px){.scene.short{min-height:min(56svh,620px)}}
.scene-media,.band picture,.scene::after,.band::after,.scene-media video,.film-frame video,.film-poster,.film-poster img,.film-poster::after{position:absolute;inset:0;width:100%;height:100%}
.scene-media,.band picture{z-index:-2}
.scene-media img,.scene-media video,.band img,.film-poster img{width:100%;height:100%;object-fit:cover;object-position:var(--focal,50% 50%)}
.scene-media video{height:calc(100% - 1px);opacity:0;transition:opacity var(--d-slow) var(--ease)}
/* perf-03: the loop is a pixel shorter than its poster, so a scene with a fractional height never makes the loop the LCP element */
.scene-media video.on{opacity:1}
.scene-media img.drift{animation:drift 24s var(--ease) infinite alternate}
@keyframes drift{to{transform:scale(1.04)}}
.scene::after,.band::after,.film-poster::after{content:"";z-index:-1;background:linear-gradient(to top,#000000c7,#00000000 62%);pointer-events:none}
.scene::after{background:linear-gradient(to top,#000000e0,#000000b3 45%,#00000000 85%)}
/* Two home scenes put their headline over a lit window or doorway, high up where the veil above had faded out
   (measured 24 Sep 2026 on a video frame: 2.56:1 and 1.52:1 against 3:1). The veil keeps 60% black up there. */
.scene.veil::after{background:linear-gradient(to top,#000000e6,#000000b3 50%,#00000099 80%,#00000066)}
.scene :is(h1,h2){text-shadow:0 0 3px #000000d9,0 0 10px #000000b3,0 1px 24px #000000a6}.scene-copy .label{display:inline-block;padding:.35em .5em;background:var(--plate-scrim)}
.scene-gen,.band .chip,.film-gen{position:absolute;top:12px;left:12px}
.scene-pause{position:absolute;top:8px;right:8px;min-width:64px;min-height:44px;padding:0 12px;border:1px solid #f5f5f759;border-radius:var(--r-ctl);background:var(--gen-bg);color:var(--plate-ink);cursor:pointer}
.scene-copy{width:100%;padding-block:var(--s9) var(--s8)}
.scene-copy>p{max-width:40ch}.scene-copy>p.label{max-width:none}
.band{position:relative;aspect-ratio:21/9;margin:0;background:var(--night);color:var(--plate-ink);overflow:hidden;isolation:isolate}
.band figcaption{position:absolute;inset:auto var(--pad) var(--s5)}
@media (max-width:639px){.band{aspect-ratio:16/9}}
.film{margin:0}
.film-frame{position:relative;aspect-ratio:16/9;background:var(--night);border-radius:var(--r-media);overflow:hidden;color:var(--plate-ink);isolation:isolate}
.film-frame video{object-fit:contain;background:var(--night)}
.film-poster::after{z-index:0}
.film.on .film-poster,.film.on .film-play,.film-frame video[controls]~.film-poster,.film-frame video[controls]~.film-play{display:none}
.film-play{position:absolute;left:0;bottom:0;display:flex;align-items:baseline;gap:14px;min-height:64px;padding:20px var(--s5);border:0;background:none;color:var(--plate-ink);text-align:left;cursor:pointer}
.film-play b{font:600 24px/1 var(--f-display)}
.film-play b::before{content:"";display:inline-block;margin-right:12px;border:10px solid transparent;border-left:16px solid var(--lamp);border-right:0}
.film-sound{position:absolute;top:8px;right:8px}
.film-sound[aria-pressed=true]{background:var(--gen-bg);color:var(--plate-ink);box-shadow:var(--ring-plate)}
.film-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:var(--s3)}
.cc,.langs,.keys{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
:is(.cc,.langs) button,.keys [role=radio]{min-width:44px;min-height:44px;padding:0 12px;border:0;border-radius:var(--r-ctl);background:transparent;color:var(--ink);font:500 14px/1 var(--f-mono);letter-spacing:.06em;box-shadow:var(--ring);cursor:pointer}
.cc [aria-pressed=true],.langs [aria-pressed=true],.keys [aria-checked=true]{box-shadow:inset 0 0 0 2px var(--lcd);background:color-mix(in srgb,var(--lcd) 12%,transparent)}
.langs button,.keys [role=radio]{font:600 15px/1 var(--f-body);letter-spacing:0}
.film figcaption{margin-top:var(--s3);font-size:var(--t-small);color:var(--ink-2);max-width:72ch}
.film-tx summary{min-height:44px;padding-top:12px;cursor:pointer;font-weight:600}
.film video::cue{font-family:var(--f-body);font-weight:600;background:var(--plate-scrim);color:var(--plate-ink)}
.film-dialog{width:min(96vw,1600px,calc((100svh - 200px) * 16 / 9));max-width:none;max-height:100svh;padding:0;border:0;background:var(--night);overflow:auto;color:var(--ink)}
.film-dialog[open]{animation:fade 180ms var(--ease)}
.film-dialog::backdrop{background:#000000e0}
.film-close{display:flex;margin:0 0 8px auto}
@media (orientation:portrait) and (max-width:1199px){.film[data-upright] .film-frame{aspect-ratio:9/16;width:min(100%,calc(78svh * 9 / 16));margin-inline:auto}.film-dialog:has([data-upright]){width:min(96vw,calc((100svh - 230px) * 9 / 16))}}
/* A landscape phone (844x390) left 200 px for chrome and played the film 337 px wide. On a short screen the film takes
   the height, Close sits over its top right corner, Sound on moves to the top centre, and the caption switch,
   caption and script scroll below it. */
@media (orientation:landscape) and (max-height:560px){.film-dialog{width:min(100vw,calc((100svh - 8px) * 16 / 9))}.film-dialog .film-close{position:absolute;top:8px;right:8px;z-index:3;margin:0}.film-dialog .film-sound{right:auto;left:50%;transform:translateX(-50%)}.film-dialog .film-bar,.film-dialog figcaption,.film-dialog .film-tx{padding-inline:12px}}
@keyframes fade{from{opacity:0}}
.vl{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;max-width:560px;--vl:var(--lcd);--vl-bg:var(--bg)}
:is(.on-plate,.panel) .vl{--vl:var(--lcd-glow);--vl-bg:var(--night)}
.vl-play{display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:0 12px 0 0;border:0;background:none;color:inherit;font:700 16px/1 var(--f-body);cursor:pointer}
.vl-play svg{width:44px;height:44px;flex:none;color:var(--vl)}
.vl-play circle{fill:none;stroke:currentColor;stroke-width:2}
.vl-play path{fill:currentColor}
.vl-play .i-pause,.vl-play[aria-pressed=true] .i-play{display:none}
.vl-play[aria-pressed=true] .i-pause{display:inline}
.vl-play[aria-pressed=true] circle{fill:currentColor}.vl-play[aria-pressed=true] path{fill:var(--vl-bg)}
.vl-wave,.vl-t{flex:0 0 100%;margin:0}
.vl-wave{position:relative;height:32px}
.vl-wave svg{display:block;width:100%;height:32px;fill:var(--rule-strong)}
:is(.on-plate,.panel) .vl-wave svg{fill:#f5f5f759}
.vl-wave rect.p{fill:var(--vl)}
.vl-seek{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;padding:0;opacity:0;cursor:pointer}
.vl-seek:focus-visible{opacity:1;accent-color:var(--vl)}
.vl.compact{max-width:none}.vl.compact .vl-wave{display:none}
.live{position:relative;max-width:560px;padding:var(--s5);border-radius:var(--r-ctl);background:var(--panel-bg);color:var(--panel-ink);box-shadow:inset 0 0 0 1px var(--panel-edge)}
.live.over{box-shadow:0 18px 50px #00000073}
[data-when]{display:none}
[data-state=idle] [data-when~=idle],[data-state=asking] [data-when~=asking],[data-state=connecting] [data-when~=connecting],[data-state=live] [data-when~=live],[data-state=ended] [data-when~=ended],[data-state=nomic] [data-when~=nomic],[data-state=error] [data-when~=error]{display:block}
.live-bar{height:3px;margin:var(--s4) 0;border-radius:2px;background:#f5f5f726;overflow:hidden}
.live-bar::after{content:"";display:block;width:30%;height:100%;background:var(--lcd-glow);animation:indet 1.2s linear infinite}
@keyframes indet{from{transform:translateX(-100%)}to{transform:translateX(340%)}}
.live-head{display:flex!important;justify-content:space-between;align-items:center;gap:12px;margin-bottom:var(--s4)}
.meter{display:grid;grid-template-columns:56px repeat(12,1fr);gap:3px;align-items:center;margin-bottom:8px}
.meter i{height:10px;border-radius:1px;background:#f5f5f724}
.meter.you i.on{background:var(--lamp)}.meter.odile i.on{background:var(--lcd-glow)}
.live .tx{max-height:240px;overflow:auto;margin:var(--s4) 0}
.live .small a{padding-block:12px}
.ok{padding:12px 14px;border-radius:var(--r-ctl);background:var(--bg-soft);box-shadow:inset 3px 0 0 var(--sem-ok)}
.live-err,.err,.err-sum{padding:12px 14px;border:1px solid var(--err-edge);border-radius:var(--r-ctl);background:var(--err-bg);color:var(--err-ink);font-size:15px}
.msg{width:min(330px,100%);padding:18px;border-radius:var(--r-phone);background:var(--night);color:var(--plate-ink);font-size:16px;line-height:1.45}
.msg-h{margin-bottom:10px;font:500 13px/1.3 var(--f-mono);color:var(--lcd-glow)}
.msg-b{padding:12px 14px;border-radius:16px;background:var(--bubble)}
.msg-b dl{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;margin:0 0 6px}
.msg-b dt{color:var(--panel-ink-2)}.msg-b dd,.msg-b p{margin:0}
.msg-l{margin-top:10px;color:var(--lcd-glow);font-weight:600}
.tx p{display:grid;grid-template-columns:88px minmax(0,1fr);gap:12px;margin:0 0 10px;font-size:17px;line-height:1.5}
.tx .who{padding-top:.25em}
.dir,.rules,.steps,.wont,.log,footer ul,.rail,.toc ol{list-style:none;padding:0}
.prow,.rules>li,.wont li,.log li,.faq details{border-top:1px solid var(--rule)}
.prow{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;padding-block:var(--s6)}
.prow-media{position:relative;grid-column:1/6;aspect-ratio:3/2;border-radius:var(--r-media);overflow:hidden;background:var(--night)}
.prow-media img{width:100%;height:100%;object-fit:cover;filter:brightness(.82);transition:filter var(--d-mid)}
.prow:hover .prow-media img,.prow:focus-within .prow-media img{filter:none}
.prow-text{grid-column:6/11}.prow-price{grid-column:11/13;text-align:right}
.prow.two .prow-media{grid-column:1/5}.prow.two .prow-text{grid-column:5/10}.prow.two .prow-price{grid-column:10/13}
.price,.figs b,.steps>li::before{display:block;font:600 var(--t-price)/1 var(--f-display)}
.unit{font:500 13px/1.4 var(--f-mono);color:var(--accent)}
.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule);border-radius:var(--r-ctl);overflow:hidden}
.tier{display:flex;flex-direction:column;gap:12px;padding:var(--s6) var(--s5);background:var(--bg-soft)}
.tier.lit{box-shadow:inset 0 3px 0 var(--lamp)}
.tier .btn{margin-top:auto}
.tier .actions{margin-top:auto}.tier .actions .btn{margin-top:0}
.dir li{padding:12px 0}
.dir .row{display:flex;align-items:baseline}
.dir .row::after{content:"";order:1;flex:1;min-width:24px;margin:0 8px .35em;border-bottom:1.5px dotted var(--rule-strong)}
.dir .row>:last-child{order:2;font:500 16px/1.3 var(--f-mono)}
.dir p{margin:4px 0 0;font-size:var(--t-small);color:var(--ink-2)}
.rules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;counter-reset:r}
.rules>li{padding:var(--s5) 0}
.rules>li,.steps>li{counter-increment:r}
.rules>li::before{content:counter(r,decimal-leading-zero);display:block;margin-bottom:8px;font:500 14px/1 var(--f-mono);color:var(--accent)}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:32px;counter-reset:r}
.steps>li::before{content:counter(r);color:var(--accent)}
.wont li{display:grid;grid-template-columns:96px 1fr;gap:16px;padding:14px 0}
.wont li::before{content:"Will not";color:var(--sem-bad)}
.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:24px}
.pull{max-width:28ch;margin:var(--s6) 0;padding-left:var(--s5);border-left:2px solid var(--lamp);font:600 clamp(24px,1.6vw + 14px,34px)/1.2 var(--f-display)}
.pull cite{display:block;margin-top:12px;font-style:normal}
.panel{background:var(--panel-bg);color:var(--panel-ink);box-shadow:inset 0 0 0 1px var(--panel-edge)}
.tel-big{display:inline-flex;align-items:center;min-height:44px;font:500 var(--t-tel)/1 var(--f-mono);letter-spacing:-.01em;color:var(--accent);text-decoration:none}
.tool,.note{padding:var(--s5);border-radius:var(--r-ctl);background:var(--card);box-shadow:inset 0 0 0 1px var(--rule)}
.note{background:var(--bg-soft);box-shadow:inset 3px 0 0 var(--lcd)}
.tool>:last-child,.note>:last-child{margin-bottom:0}
@media (max-width:899px){.prow>*{grid-column:1/-1!important;text-align:left!important}.prow-media{aspect-ratio:16/9}.tiers,.rules{grid-template-columns:1fr}.tier.lit{order:-1}}
/* lookA-8 (DESIGN 6.12): on a phone a product row reads picture, text, price, then full-width buttons */
@media (max-width:639px){.prow{display:flex;flex-direction:column;gap:0}.prow-media{margin-bottom:var(--s4)}.prow-text{display:contents}.prow-price{order:1;margin-bottom:var(--s3)}.prow-text>.actions{order:2;margin-top:0}.prow .actions .btn{flex:1 1 100%}.prow-text>.chip{align-self:flex-start;margin-bottom:var(--s2)}}
.rail{display:flex;gap:16px;margin:0;padding:4px 4px 16px;overflow-x:auto;scroll-snap-type:x mandatory;mask-image:linear-gradient(to right,#000 85%,transparent)}
.rail>*{flex:0 0 300px;scroll-snap-align:start}
.rail-nav{display:flex;gap:8px;margin-top:8px}
@media (pointer:coarse),(max-width:767px){.rail-nav{display:none}}
table{width:100%;border-collapse:collapse;font-size:16px}
caption{padding-bottom:12px;text-align:left;color:var(--ink-2)}
th,td{padding:12px 10px;border-bottom:1px solid var(--rule);vertical-align:top;text-align:left}
.fig{font-family:var(--f-mono)}
/* position:relative: without it, a position:absolute descendant with no other positioned ancestor (the .vh
   screen-reader text inside a table cell here) takes the DOCUMENT as its containing block, escaping this
   element's own overflow-x clip -- its 1px box still lands at the unclipped table's real width, and the
   whole PAGE gained that much horizontal scroll on a phone. Measured live on /benchmark, 28 Sep 2026:
   scrollWidth 624 at a 375-wide viewport; the fix alone, injected as a live style, took it to exactly 375. */
.tscroll{overflow-x:auto;position:relative}
.tscroll.more{mask-image:linear-gradient(to right,#000 85%,transparent)}
.dots,.segbar{display:inline-flex;gap:3px;vertical-align:middle}
.dots{margin-right:8px}
.dots i{width:9px;height:9px;border-radius:50%;box-shadow:var(--ring)}
.dots i.on,.segbar i.on{background:var(--lcd);box-shadow:none}
.segbar{display:flex;gap:2px;height:8px;margin-top:6px}
.segbar i{flex:1;background:var(--rule)}
tr.ours>:first-child{box-shadow:inset 3px 0 0 var(--lamp)}
.field{display:grid;gap:6px;margin-bottom:var(--s5)}
.field label,.field legend{font:600 15px/1.4 var(--f-body);color:var(--ink)}
.hint{font-size:14px;line-height:1.45;color:var(--ink-2)}
input,select,textarea{width:100%;min-height:48px;padding:10px 14px;border:1.5px solid var(--field-edge);border-radius:var(--r-ctl);background:var(--card);color:var(--ink);font:400 16px/1.4 var(--f-body)}
textarea{min-height:120px}
input[type=checkbox],input[type=radio]{width:auto;min-height:0;accent-color:var(--lcd)}
input[type=tel],input[inputmode=tel]{font-family:var(--f-mono)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 35%,transparent)}
@media (max-width:639px){form .btn{width:100%}}
.callbar{display:none}
@media (max-width:719px){
.callbar{position:fixed;inset:auto 0 0;z-index:40;display:grid;grid-template-columns:1fr 1fr;padding-bottom:env(safe-area-inset-bottom);background:var(--panel-bg);transition:transform var(--d-mid) var(--ease)}
.callbar a{display:flex;align-items:center;justify-content:center;min-height:56px;color:var(--panel-ink);font-weight:700;text-decoration:none}
.callbar a+a{background:var(--lamp);color:var(--lamp-ink)}
.callbar.away{transform:translateY(100%)}
body:has(.callbar){padding-bottom:56px}
html:has(.callbar){scroll-padding-bottom:calc(64px + env(safe-area-inset-bottom))}}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:56px;padding:12px 0;font:600 19px/1.3 var(--f-body);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:500 22px/1 var(--f-mono);color:var(--accent)}
.faq [open] summary::after{content:"\2212"}
.faq details>div{max-width:64ch;padding-bottom:var(--s4);color:var(--ink-2)}
.phead{padding-block:var(--s8) var(--s6)}
.doc{max-width:68ch;line-height:1.65}
.doc h2{margin-top:56px;font-size:32px;max-width:none}.doc h3{margin-top:32px;font:700 20px/1.3 var(--f-body)}
.log li{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;padding:16px 0}
.log time{font:500 14px/1.6 var(--f-mono);color:var(--ink-2)}
.toc{display:none}
@media (min-width:1100px){.toc.on{display:block;position:sticky;top:calc(var(--header-h) + 36px);align-self:start;grid-column:9/13}
.toc ol{border-left:1px solid var(--rule)}
.toc a{display:block;padding:6px 0 6px 14px;color:var(--ink-2);text-decoration:none;font-size:15px}}
@media (max-width:639px){.log li{grid-template-columns:1fr;gap:4px}}
/* The home page directory (24 Sep 2026): who it is for, what we make, what to try, one screen below the first scene */
/* The home page's first scene is shorter than a screen, so the directory's heading shows on first load, and it carries a
   row of the four audience pages (24 Sep 2026: a 1280x800 visitor saw no route to any page but /signup and /demo). */
.scene.lead{min-height:min(calc(100svh - var(--header-h) - 200px),760px)}
.scene.lead .scene-copy{padding-block:var(--s7) var(--s5)}
.scene.lead .hero{max-width:20ch;font-size:clamp(38px,4.3vw + 10px,86px)}
.scene.lead .scene-copy>p{max-width:62ch}.scene.lead .scene-copy>p.hero-find{max-width:none}
.scene.lead+.finder{padding-top:clamp(28px,3vw,48px)}
.hero-find{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:var(--s3)}
.hero-find .label{margin-right:4px}
.hero-find a{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border:1px solid #f5f5f759;border-radius:var(--r-chip);background:var(--plate-scrim);color:var(--plate-ink);font:600 15px/1.2 var(--f-body);text-decoration:none}
.hero-find a:hover{border-color:var(--plate-ink);text-decoration:underline}
@media (max-width:639px){.scene.lead .scene-copy{padding-bottom:var(--s4)}.hero-find{gap:5px}.hero-find a{min-height:32px;padding:0 9px;font-size:14px}.hero-find .label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
.finder{padding-block:clamp(40px,5vw,72px)}
.finder h2{margin-bottom:var(--s4);max-width:none}
.finder h3.label{margin:var(--s6) 0 var(--s3)}
.find-cards,.find-list{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.find-cards{grid-template-columns:repeat(4,minmax(0,1fr))}
.find-list{grid-template-columns:repeat(3,minmax(0,1fr))}
.find-list.find-try{grid-template-columns:repeat(4,minmax(0,1fr))}
.find-cards a,.find-list a{display:flex;flex-direction:column;gap:6px;height:100%;padding:14px 18px;border-radius:14px;background:var(--bg-soft);color:var(--ink);text-decoration:none;transition:box-shadow var(--d-fast)}
.find-cards a{gap:10px;padding:var(--s5)}
.find-cards a:hover,.find-list a:hover{box-shadow:inset 0 0 0 1.5px var(--accent)}
.find-cards b{font:600 24px/1.1 var(--f-display)}
.find-list b{font:700 17px/1.3 var(--f-body)}
.find-cards b::after,.find-list b::after{content:"\a0\2192";color:var(--accent-soft)}
.find-cards span,.find-list span{font-size:var(--t-small);line-height:1.45;color:var(--ink-2)}
.finder .actions{margin-top:var(--s6)}
@media (max-width:1099px){.find-cards,.find-list,.find-list.find-try{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:639px){.find-cards,.find-list,.find-list.find-try{grid-template-columns:1fr}.find-cards b{font-size:24px}}
footer{padding-block:var(--s8) var(--s7);background:var(--foot-bg);color:var(--ink-2);font-size:15px}
footer a{color:var(--ink);text-decoration:none}footer a:hover{text-decoration:underline}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(5,minmax(0,1fr));gap:var(--s6) var(--s5)}
footer ul{margin:8px 0 0}
footer li a{display:inline-block;padding:10px 0}
footer address{font-style:normal;line-height:1.7}
footer address a{display:inline-flex;align-items:center;min-height:44px}
.foot-end a{padding-block:12px;text-decoration:underline}
.foot-end{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--rule)}
.dtmf{display:flex;align-items:center;gap:16px}
.dtmf svg{width:180px;height:56px;color:var(--rule-strong);fill:none;stroke:currentColor;stroke-width:4;stroke-linecap:round}
@media (max-width:1099px){.foot-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.foot-brand{grid-column:1/-1}}
@media (max-width:639px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:359px){.foot-grid{grid-template-columns:1fr}}
.rv{transition:opacity 480ms var(--ease),transform 480ms var(--ease)}.rv-h{opacity:0;transform:translateY(10px)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.live-bar::after{width:100%;opacity:.5}}

/* Home router, 26 Sep 2026. Layout only: the accepted colours and system fonts stay. */
@media (min-width:1100px){.top:not(.compact) .tel-chip{display:none}.navpanel{max-height:calc(100svh - var(--header-h) - 24px);overflow-y:auto}}
.top .menu-cta.ghost{background:transparent;color:var(--ink);box-shadow:var(--ring)}
.home-router{font-size:16px;line-height:1.5}
.home-intro{padding-block:48px 24px}
.home-eyebrow{margin-bottom:12px;color:var(--ink-2);font-weight:600;font-size:16px;line-height:1.5}
.home-intro h1{max-width:20ch;font-size:56px;line-height:1.05;letter-spacing:-.025em;margin-bottom:16px}
.home-lede{max-width:60ch;font-size:18px;line-height:1.5;margin-bottom:20px;color:var(--ink-2)}
.home-risk{font-size:16px;line-height:1.5;color:var(--ink-2);margin:12px 0 0}
.home-offers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.home-offer{display:flex;flex-direction:column;align-items:flex-start;padding:20px;min-width:0;border:1px solid var(--rule);border-radius:14px;color:var(--ink);background:var(--card);text-decoration:none}
.home-offer:hover{border-color:var(--accent)}
.home-offer h2{display:flex;justify-content:space-between;align-items:baseline;gap:8px;width:100%;max-width:none;font-size:22px;line-height:1.2;margin-bottom:8px;text-wrap:initial;letter-spacing:-.01em}
.home-offer h2 span{color:var(--accent);font-size:18px}
.home-offer p{font-size:16px;line-height:1.5;margin-bottom:12px;color:var(--ink-2)}
.home-offer strong{margin-top:auto;font-size:22px;font-weight:600;line-height:1.4}
.home-offer strong span{font-size:16px;font-weight:400;color:var(--ink-2)}
.home-offer-next{margin-top:auto;color:var(--accent);font-weight:600}
.home-directory{display:grid;grid-template-columns:1fr 2fr 1.5fr;gap:32px;padding-block:32px 40px}
.home-group h2{font-size:18px;line-height:1.5;letter-spacing:0;margin-bottom:8px;max-width:none}
.home-group ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px;list-style:none;margin:0;padding:0}
.home-audiences ul{grid-template-columns:1fr}
.home-group li{min-width:0;border-bottom:1px solid var(--rule)}
.home-group li a{display:flex;align-items:center;min-height:44px;padding:8px 0;color:var(--accent);font-size:16px;line-height:1.5;text-decoration:none}
.home-group li a:hover{text-decoration:underline}
.home-town{margin-top:16px}
.home-town>a{display:inline-flex;flex-direction:column;min-height:44px;font-size:16px;line-height:1.5;text-decoration:none;font-weight:600}
.home-town>a:hover{text-decoration:underline}
.home-town p{font-size:16px;line-height:1.5;max-width:40ch;color:var(--ink-2);margin:8px 0 0}
.home-story{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding-block:40px;border-top:1px solid var(--rule)}
.home-story h2,.home-close h2{font-size:32px;line-height:1.15;max-width:24ch;margin-bottom:16px}
.home-story p{max-width:60ch}
.home-story figure{margin:0}
.home-story img{width:100%;height:auto;border-radius:14px}
.home-story figcaption{font-size:16px;line-height:1.5;color:var(--ink-2);margin-top:8px}
.home-story-link{display:flex;align-items:center;min-height:44px;margin-top:8px}
.home-close{padding-block:40px 56px;border-top:1px solid var(--rule)}
@media (max-width:767px){
.home-intro{padding-block:28px 20px}
.home-intro h1{font-size:38px;line-height:1.05;margin-bottom:12px}
.home-lede{font-size:16px;line-height:1.5;margin-bottom:16px}
.home-eyebrow{margin-bottom:8px}
.home-offers{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.home-offer{padding:12px}
.home-offer h2{font-size:18px;line-height:1.2;gap:4px}
.home-offer p{margin-bottom:8px}
.home-offer strong{font-size:18px}
.home-directory{grid-template-columns:1fr;gap:20px;padding-block:24px 32px}
.home-audiences ul{grid-template-columns:repeat(2,minmax(0,1fr))}
.home-group ul{gap:0 12px}
.home-town{margin-top:12px}
.home-town>a{flex-direction:row;flex-wrap:wrap;column-gap:12px;align-items:center}
.home-story{grid-template-columns:1fr;gap:24px;padding-block:32px}
.home-story h2,.home-close h2{font-size:28px}
.home-close{padding-block:32px 40px}
}

/* Websites & SEO, the two-in-one offer block (1 Oct 2026): homepage, /websites, /pricing. Tolga: "not buried somewhere hidden". */
.web2{padding-block:clamp(32px,5vw,64px)}
.web2-banner{display:flex;gap:10px;align-items:center;flex-wrap:wrap;text-decoration:none;color:var(--ink);background:var(--bg-soft);border:1px solid var(--rule);border-radius:16px;padding:10px 18px;font-size:var(--t-small);margin-bottom:var(--s5);width:fit-content;max-width:100%}
.web2-banner b{background:var(--accent);color:var(--accent-ink);border-radius:var(--r-chip);padding:2px 10px;font-size:var(--t-label);letter-spacing:.04em;text-transform:uppercase}
.web2-banner:hover{border-color:var(--accent)}
.web2-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4);margin-top:var(--s5)}
.web2-card{display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--ink);background:var(--card);border:1px solid var(--rule);border-radius:18px;padding:var(--s5)}
.web2-card:hover{border-color:var(--accent)}
.web2-card .label{margin:0}
.web2-price{margin:0;font-size:var(--t-small);color:var(--ink-2)}
.web2-price strong{font-size:clamp(34px,2.4vw + 18px,48px);color:var(--ink);letter-spacing:-.02em;margin-right:6px}
.web2-card ul{margin:0;padding-left:20px;display:grid;gap:6px}
.web2-cta{margin-top:auto;color:var(--accent);font-weight:600}
@media (max-width:760px){.web2-grid{grid-template-columns:1fr}}