/* sky.css: the "sky" look for odilelabs.com (preview, 12 Nov 2026; Tolga chose "Glowing sphere hero").
   Load it AFTER /style.css and after the page's own <style>: style.css keeps the layout, this file replaces the look.
   What defines it: pure black pages with content directly on black (no cards, boxes or borders); a deep indigo star
   field behind some sections; false-colour accents (UV violet-blue, gold, infrared pink to orange); clean sans
   headlines (Figtree 600); serif quotes with a hanging quote mark (Newsreader 400); small data labels whose first
   word is coloured, parts split by a middle dot; numbered captions; a tiny muted credit line.
   1 tokens  2 base and type  3 sky pieces  4 header, buttons, footer  5 existing components, reskinned
   6 page by page (what one page's own styles need)  7 textures
   Fonts: the page links Figtree (400-700) and Newsreader (400-500); without them the system stacks below apply.
   Second pass (12 Nov): every page in the sitemap was looked at in this layer through the Worker's ?sky=1 switch
   (src/sky.js); sections 5 and 6 hold what those pages needed. No page's HTML was changed for it. */
/* Fonts, served from this site (no request leaves it for a font): Figtree 400-700 and Newsreader 400-500, each as one
   variable file per script range, licences in /fonts/OFL-figtree.txt and /fonts/OFL-newsreader.txt. The italic is
   fetched only by a page that sets serif text in italics. */
@font-face{font-family:"Figtree";font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/figtree-var-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Figtree";font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/figtree-var-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400 500;font-display:swap;src:url(/fonts/newsreader-italic-var-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400 500;font-display:swap;src:url(/fonts/newsreader-italic-var-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:400 500;font-display:swap;src:url(/fonts/newsreader-var-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:400 500;font-display:swap;src:url(/fonts/newsreader-var-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}


/* ---------- 1. tokens ---------- */
:root{color-scheme:dark;
--sky-ink:#fff;--sky-ink-body:#dcdce8;--sky-ink-2:#b6b6c8;--sky-ink-3:#80809a;
--sky-uv:#5b5cf0;--sky-uv-2:#8f8cff;--sky-uv-core:#c9c2ff;--sky-gold:#d8a53d;--sky-ir:#ff4d8d;--sky-ir-2:#ff9838;--sky-visible:#efe6d6;
--sky-indigo:#14123a;--sky-indigo-2:#1d1a55;
--sky-sans:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--sky-serif:"Newsreader","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
--sky-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
--pad:clamp(20px,3.4vw,40px);--sky-gutter:max(var(--pad),calc((100vw - 1200px)/2 + var(--pad)));
--sky-t-hero:clamp(40px,4.2vw + 6px,70px);--sky-t-h2:clamp(29px,2.2vw + 12px,46px);--sky-t-quote:clamp(27px,2.6vw + 8px,46px);--sky-t-label:13px;--sky-t-credit:12px;
--sky-tone:var(--sky-uv-2);
/* style.css's own tokens, pointed at the sky values: most of the site follows from these */
--bg:#000;--bg-soft:#000;--card:transparent;--bg-top:#0000;--ink:#fff;--ink-2:var(--sky-ink-2);--rule:#0000;--rule-strong:var(--sky-ink-3);--field-edge:var(--sky-ink-3);--sky-dim:#ffffff26;--sky-measure:40em;
--ring:inset 0 0 0 1px #0000;--ring-plate:inset 0 0 0 1px #0000;
--accent:#a9a6ff;--accent-ink:#000;--accent-soft:#a9a6ff;--lamp:#fff;--lamp-hi:#e4e1ff;--lamp-ink:#000;--lcd:var(--sky-uv-2);--lcd-glow:var(--sky-uv-2);--focus:#a9a6ff;
--panel-bg:#000;--panel-ink:#fff;--panel-ink-2:var(--sky-ink-2);--panel-edge:#0000;--night:#000;--plate-ink:#fff;--plate-scrim:#000000b8;--gen-bg:#0000;--gen-ink:var(--sky-ink-2);--caller-ink:#fff;--bubble:#ffffff14;
--code-bg:#0a0a14;--code-ink:#e6e6f2;--code-mute:#9a9ab0;--code-hi:#a9a6ff;--code-str:#d8a53d;--code-edge:#0000;
--sem-ok:#7ee0a0;--sem-bad:#ff7aa5;--sem-warn:#d8a53d;--err-bg:#ff4d8d1f;--err-edge:#0000;--err-ink:#ffb3cd;
--mark-arc:var(--sky-uv-2);--tone-dusk:#000;--tone-night:#000;--tone-late:#000;--tone-dawn:#000;--foot-bg:#000;
--r-media:4px;--r-ctl:10px;--r-card:0px;--r-chip:0px;--r-btn:999px;
--f-display:var(--sky-sans);--f-body:var(--sky-sans);--f-mono:var(--sky-sans);
--t-label:13px;--t-hero:var(--sky-t-hero);--t-h1:clamp(36px,3.2vw + 10px,60px);--t-h2:clamp(27px,1.7vw + 14px,42px)}
/* style.css gives these their own dark tokens; in the sky look they sit on the same black as everything else */
.on-plate,.panel,.live,.film-frame,.film-dialog,.callbar,.term{--rule:#0000;--rule-strong:var(--sky-ink-3);--bg-soft:#0000;--card:#0000;--lamp:#fff;--lamp-hi:#e4e1ff;--lamp-ink:#000;--sem-bad:#ff7aa5;--sem-ok:#7ee0a0}
/* a section's tone picks the colour of its labels: the page's "wavelengths" */
[data-tone=dusk],[data-band=uv]{--sky-tone:var(--sky-uv-2)}
[data-tone=night],[data-band=gold]{--sky-tone:var(--sky-gold)}
[data-tone=late],[data-band=ir]{--sky-tone:var(--sky-ir)}
[data-tone=dawn],[data-band=radio]{--sky-tone:var(--sky-ir-2)}
[data-band=visible],[data-band=visible-2]{--sky-tone:var(--sky-visible)}
/* On the star field the label colours take their lighter step. Its clouds lift the indigo as far as #3b369c, where the
   page's own violet, gold and pink measure 3.3, 4.3 and 3.0 to 1; these measure 5.1, 5.4 and 4.9 (small text needs 4.5). */
.sky-field,.panel,.sec[data-tone=late]{--bg-soft:#ffffff14;--sky-uv-2:#b9b6ff;--sky-gold:#e9bd62;--sky-ir:#ff9dbd;--sky-ir-2:#ffa552;--accent:#c0bdff;--accent-soft:#c0bdff;--lcd:#b9b6ff;--lcd-glow:#b9b6ff;--focus:#c0bdff}
:is(.sky-field,.panel):not([data-tone],[data-band]){--sky-tone:var(--sky-uv-2)}

/* ---------- 2. base and type ---------- */
html{background:#000}
body{background:#000;color:var(--sky-ink-body);font-family:var(--sky-sans);font-optical-sizing:auto}
::selection{background:var(--sky-uv);color:#fff}
h1,h2,h3{color:#fff;font-weight:600}
h1{line-height:1.05;letter-spacing:-.025em}
h2{line-height:1.1;letter-spacing:-.02em}
h3{letter-spacing:-.01em}
.hero{letter-spacing:-.03em}
a{color:#fff;text-decoration-color:#ffffff66}
a:hover{text-decoration-color:#fff}
b,strong{color:#fff;font-weight:600}
.btn b,.btn strong{color:inherit}
code,kbd,samp,pre,.term,.term-h,.term-out,.fig{font-family:var(--sky-mono)}
:not(pre)>code,kbd{background:#ffffff14;box-shadow:none}
/* quotes: editorial serif, the opening mark hanging left of the text block */
blockquote,.pull,.sky-quote,.sky-statement{margin-inline:0;border:0;padding:0;font-family:var(--sky-serif);font-weight:400;color:#fff;letter-spacing:-.012em;text-wrap:pretty}
blockquote,.pull{font-size:clamp(20px,.8vw + 16px,26px);line-height:1.28;max-width:26em}
blockquote{hanging-punctuation:first}
.sky-quote p,.ah-said,.cl-said{text-indent:-.44em}
.pull cite{font-family:var(--sky-sans)}
/* Rhythm. In the light look a heading sat close under the text before it; at this size it needs air above. Sections
   give that between sections, this gives it inside one column. Labels and headings directly above are left alone. */
:is(.wrap,.doc,.c-read,article)>:not(.label,.sky-label,.eyebrow,.chip,h1,h2,h3,style,script)+:is(h2,h3){margin-top:1.5em}
:is(.doc,.c-read,article,.wrap:not(.cols))>*+:is(section,aside,div):has(>:is(h2,h3):first-child){margin-top:clamp(36px,4.5vw,60px)}
/* a note or a tool was a card with a small heading in it; without the card its heading is still the small one */
:is(.note,.tool)>:is(h2,h3):first-child{max-width:none;font-size:clamp(20px,.5vw + 17px,25px);line-height:1.2;letter-spacing:-.012em}
/* Measure. Text straight on the black runs the width of the page unless it is held: about 80 characters. */
main .wrap:not(.scene-copy)>:is(p,ul,ol):not([class]),main .wrap:not(.scene-copy)>p.small,.faq-item>:is(p,ul,ol){max-width:var(--sky-measure)}

/* ---------- 3. sky pieces ---------- */
.sky-wrap{padding-inline:var(--sky-gutter)}
.sky-sec{position:relative;padding-block:clamp(84px,10vw,160px)}
/* the data label: small sans, the first word (a <b>) in the section's colour, parts split by a middle dot */
.sky-label,.label,.who,th,.figs span,.pull cite,.wont li::before,.msg-b dt{letter-spacing:0;text-transform:none}
.sky-label{margin:0 0 20px;max-width:none;font:500 var(--sky-t-label)/1.45 var(--sky-sans);color:#fff}
.sky-label b{font-weight:600;color:var(--sky-tone)}
.sky-label a{color:inherit}
/* a label written before this look has no marked first word: the whole of it takes the colour */
.label,:is(.on-plate,.panel,.live) .label{color:var(--sky-tone)}
th,.msg-b dt{color:var(--sky-ink-2)}
/* 28 pages open with <p class="eyebrow">, a class no stylesheet ever styled: it is that page's label */
.eyebrow{margin:0 0 14px;font:500 var(--sky-t-label)/1.45 var(--sky-sans);color:var(--sky-tone)}
/* the numbered caption under a picture or beside a step: "4 · the finished map" */
.sky-caption{margin:14px 0 6px;font:600 var(--sky-t-label)/1.45 var(--sky-sans);color:#fff}
/* a statement or a quote, set large in the serif (.s is the smaller size, beside pictures) */
.sky-statement,.sky-quote{margin:0;max-width:21em;font-size:var(--sky-t-quote);line-height:1.15}
.sky-statement.s{font-size:clamp(23px,1.5vw + 14px,34px);line-height:1.2;max-width:17em}
.sky-quote p{margin:0}
/* the tiny muted line at the foot of a section */
.sky-credit{margin:0;font:400 var(--sky-t-credit)/1.55 var(--sky-sans);color:var(--sky-ink-3)}
.sky-credit b{color:var(--sky-ink-2);font-weight:500}
.sky-credit a{color:var(--sky-ink-2)}
/* numbered steps, three across */
.sky-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px clamp(24px,4vw,72px);margin:clamp(44px,6vw,92px) 0 0;padding:0;list-style:none}
.sky-steps .sky-caption{margin-top:0}
.sky-steps p:last-child,.sky-facts p:last-child{margin:0;font-size:16px;line-height:1.55;color:var(--sky-ink-2)}
/* facts with a label each */
.sky-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px clamp(24px,4vw,72px);margin:clamp(40px,5vw,72px) 0 0;padding:0;list-style:none}
.sky-facts .sky-label{margin-bottom:8px}
.sky-facts a{text-decoration:none}
.sky-facts a p:last-child::after{content:"\a0\2192";color:#fff}
.sky-facts a:hover p:last-child{color:#fff}
/* plain rows: a name and one line on the left, the price on the right */
.sky-rows{margin:clamp(28px,4vw,52px) 0 0;padding:0;list-style:none}
.sky-rows li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 40px;align-items:baseline;padding-block:17px}
.sky-rows a{text-decoration:none}
.sky-rows a:hover{text-decoration:underline}
.sky-rows .n{font:600 19px/1.35 var(--sky-sans);color:#fff}
.sky-rows .d{grid-column:1;max-width:44em;font-size:15.5px;line-height:1.5;color:var(--sky-ink-2)}
.sky-rows .p{grid-column:2;grid-row:1;justify-self:end;font:600 19px/1.35 var(--sky-sans);color:#fff;white-space:nowrap;font-variant-numeric:tabular-nums}
.sky-rows .u{grid-column:2;grid-row:2;justify-self:end;font-size:13px;line-height:1.5;color:var(--sky-ink-2);text-align:right}
.sky-also{margin:clamp(64px,8vw,112px) 0 4px}
/* questions and answers as plain pairs */
.sky-qa{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:44px clamp(32px,6vw,104px);margin:clamp(32px,4vw,56px) 0 0}
.sky-qa dt{font:600 19px/1.35 var(--sky-sans);color:#fff}
.sky-qa dd{max-width:34em;margin:8px 0 0;font-size:16px;line-height:1.55;color:var(--sky-ink-2)}
.sky-figure{margin:0}
.sky-figure .sky-label{max-width:44em;margin:clamp(22px,3vw,34px) 0 0}
/* two columns: pictures on one side, the words beside them stay in view */
.sky-split{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(40px,7vw,112px);align-items:start}
.sky-split-text{position:sticky;top:calc(var(--header-h) + 14vh)}
.sky-split-text h2{margin-bottom:.7em}
/* the "wavelength" plates: one false-colour picture, a data label above it, a numbered caption under it */
.sky-plates{display:grid;gap:clamp(52px,6vw,88px);margin:0;padding:0;list-style:none}
.sky-plate .sky-label{margin-bottom:10px}
.sky-plate-img{display:block;aspect-ratio:12/5;background:#05041a center/cover no-repeat}
.sky-plate .sky-caption{font-size:16px}
.sky-plate .sky-caption ~ p{max-width:34em;margin:0 0 8px;font-size:16px;line-height:1.55;color:var(--sky-ink-2)}
.sky-plate .link-arrow{min-height:32px}
/* the star field: deep indigo, fine speckle, soft cloud, fading into the black above and below */
.sky-field,.panel,.sec[data-tone=late]{position:relative;isolation:isolate;background:none;box-shadow:none}
.sky-field::before,.panel::before,.sec[data-tone=late]::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background:var(--sky-speckle) 0 0/400px 400px,radial-gradient(52% 34% at 76% 36%,#4a44c04d,#0000 72%),radial-gradient(38% 28% at 16% 62%,#3530a85e,#0000 70%),radial-gradient(26% 20% at 58% 72%,#6a5fe026,#0000 70%),radial-gradient(18% 14% at 88% 58%,#8f8cff21,#0000 70%),linear-gradient(var(--sky-indigo) 0%,var(--sky-indigo-2) 50%,var(--sky-indigo) 100%);
-webkit-mask-image:linear-gradient(to bottom,#0000,#000 min(170px,24%),#000 calc(100% - min(170px,24%)),#0000);mask-image:linear-gradient(to bottom,#0000,#000 min(170px,24%),#000 calc(100% - min(170px,24%)),#0000)}
/* two star-field sections in a row read as one sky */
.sec[data-tone=late]:has(+ .sec[data-tone=late])::before{-webkit-mask-image:linear-gradient(to bottom,#0000,#000 min(170px,24%));mask-image:linear-gradient(to bottom,#0000,#000 min(170px,24%))}
.sec[data-tone=late] + .sec[data-tone=late]::before{-webkit-mask-image:linear-gradient(to top,#0000,#000 min(170px,24%));mask-image:linear-gradient(to top,#0000,#000 min(170px,24%))}
.sky-field.sky-sec{padding-block:clamp(120px,15vw,230px)}
@media (max-width:899px){
.sky-steps,.sky-facts,.sky-qa{grid-template-columns:1fr;gap:28px}
.sky-split{grid-template-columns:1fr}
.sky-split-text{position:static;order:-1}
}
@media (max-width:639px){
.sky-rows li{grid-template-columns:1fr;padding-block:15px}
.sky-rows .p,.sky-rows .u{grid-column:1;grid-row:auto;justify-self:start;text-align:left}
.sky-rows .p{margin-top:6px}
}

/* ---------- 4. header, buttons, footer ---------- */
.top{background:none;border-bottom-color:#0000;-webkit-backdrop-filter:none;backdrop-filter:none}
.top::before{content:"";position:absolute;inset:0 0 -28px;z-index:-1;pointer-events:none;background:linear-gradient(#000000f0,#000000b8 55%,#0000);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);-webkit-mask-image:linear-gradient(#000 58%,#0000);mask-image:linear-gradient(#000 58%,#0000)}
.wordmark{font-weight:600}
.mark circle{opacity:.5}
.top nav>a,.menu-tel,.tel-chip{font-weight:500}
.btn{font-weight:600;letter-spacing:-.005em}
.btn.ghost,:is(.on-plate,.panel,.live,.film-dialog) .btn.ghost{background:#ffffff17;color:#fff}
.btn.ghost:hover{background:#ffffff29}
.btn.end{box-shadow:none;background:#ff4d8d2e;color:#ffd0e0}
.link-arrow{color:#fff}
:focus-visible{outline-color:var(--focus)}
@media (max-width:1139px){
.navbtn,.top:not(.compact) .tel-chip{background:#ffffff17;border-radius:999px}
.menu{background:#000;border-bottom:0;box-shadow:0 30px 60px #000}
.top nav>a{border-top:0}
.menu-end{border-top:0}
}
footer{border-top:0;color:var(--sky-ink-2)}
footer .label{font-weight:600;color:#fff}
.foot-end{border-top:0}
.foot-end .small:last-child,.foot-end span.small{font-size:var(--sky-t-credit);color:var(--sky-ink-3)}
.dtmf svg{color:var(--sky-ink-3)}

/* ---------- 5. existing components, reskinned: content sits on the black, nothing is boxed ---------- */
.sec{padding-block:clamp(64px,8vw,128px)}
/* An inner page's head: the words on the black and one map of the sky, the flat projection of the homepage's sphere.
   The map sits beside the words on a wide screen and above them on a phone. The page's lede is its statement. */
.phead{position:relative;padding-block:var(--sky-head-top) clamp(32px,4vw,56px);--sky-head-top:clamp(32px,8vw,120px);--sky-map-w:min(420px,36vw)}
main>.sec:first-of-type>.wrap:has(>h1):not(:has(form))::before,.phead::before{content:"";display:block;width:min(100%,440px);aspect-ratio:2/1;margin:0 0 clamp(30px,8vw,48px);border-radius:50%;background:center/100% 100% no-repeat;box-shadow:0 0 80px 2px #5b5cf026}
main>.sec:first-of-type :is(.wrap,.c-read)>h1+.lede:not(:lang(zh),:lang(ja),:lang(ko)),.phead .lede{max-width:25em;font:400 clamp(21px,1.1vw + 15px,30px)/1.24 var(--sky-serif);letter-spacing:-.012em;color:#fff;text-wrap:pretty}
/* The same head for a page that has no .phead: its first section opens with the h1 and nothing but the words and
   buttons that go with it (the trade, city, compare and guide pages; a page that opens with a form keeps its width). */
main>.sec:first-of-type:has(>.wrap>h1){padding-top:clamp(32px,8vw,120px)}
main>.sec:first-of-type>.wrap:has(>h1):not(:has(form)){position:relative;--sky-map-w:min(420px,36vw)}
@media (min-width:900px){
.phead{min-height:calc(var(--sky-head-top) + var(--sky-map-w)/2 + clamp(32px,4vw,56px));padding-right:calc(var(--pad) + var(--sky-map-w) + clamp(32px,5vw,72px))}
.phead::before{position:absolute;top:var(--sky-head-top);right:var(--pad);width:var(--sky-map-w);margin:0}
main>.sec:first-of-type>.wrap:has(>h1):not(:has(form)){min-height:calc(var(--sky-map-w)/2);padding-right:calc(var(--pad) + var(--sky-map-w) + clamp(32px,5vw,72px))}
main>.sec:first-of-type>.wrap:has(>h1):not(:has(form))::before{position:absolute;top:0;right:var(--pad);width:var(--sky-map-w);margin:0}
/* /privacy and /terms: there .phead holds the whole document, so the words keep their own column and the list of
   headings starts under the map */
.phead:has(>.cols){min-height:0;padding-right:var(--pad)}
.phead:has(>.cols) .toc{margin-top:calc(var(--sky-map-w)/2 + clamp(40px,5vw,72px))}
/* /afterhours: its talk module is the caption under the map. The page placed the module in the head's own row for a
   picture it no longer has, which left it above the headline; here both share the row again. */
.ah-top>.phead{grid-area:1/1}
.ah-top>.phead~.ah-dock{align-self:start;width:min(420px,36vw);margin:calc(clamp(32px,8vw,120px) + min(210px,18vw) + 30px) var(--sky-gutter) 0 0}
}
.tool,.note,.ok,.tier,.tier.lit,.track,.proof a,.hclose,.hx-how,.web2-card,.web2-banner,.gets-grid li,.live,.live.over,.msg,.hook-tags li,.chip,.chip.on-page{background:none;border:0;border-radius:0;box-shadow:none}
.tool,.note,.ok,.tier,.track,.proof a,.hclose,.hx-how,.web2-card,.gets-grid li,.live,.msg{padding:0}
.tiers,.tracks{gap:clamp(36px,5vw,72px);background:none;border-radius:0;box-shadow:none;overflow:visible}
.tier.lit .label{color:var(--sky-gold)}
.price,.figs b,.tel-big,.track-price b,.web2-price strong{font-family:var(--sky-sans);font-weight:600;color:#fff}
.tel-big{letter-spacing:-.02em}
.gets-grid{gap:36px clamp(24px,3vw,48px)}
.gets-grid li{color:var(--sky-ink-2);font-size:16px}
.gets-grid b{margin-bottom:6px;font-size:17px}
/* tags in a row become one data label: first tag coloured, the rest split by middle dots (the city pages carry the
   list without any style of their own, so the row itself is made here) */
.hook-tags{display:flex;flex-wrap:wrap;gap:0;margin:18px 0 6px;padding:0;list-style:none}
.hook-tags li{padding:0;font:500 var(--sky-t-label)/1.6 var(--sky-sans);color:#fff}
.hook-tags li:first-child{color:var(--sky-tone)}
.hook-tags li + li::before{content:"\00b7";margin:0 .55em;color:#fff}
.chip,.chip.on-page{padding:0;font:500 var(--sky-t-label)/1.4 var(--sky-sans);letter-spacing:0;text-transform:none;color:var(--sky-tone)}
/* numbers on steps and rules read as numbered captions */
.rules>li,.prow,.wont li,.log li,.faq details{border-top-color:#0000}
.rules>li::before,.steps>li::before{content:counter(r) " \00b7";display:inline;margin:0 .5em 0 0;font:600 var(--sky-t-label)/1 var(--sky-sans);letter-spacing:0;color:var(--sky-tone)}
.rules>li>h3:first-child,.steps>li>h3:first-child{display:inline}
.rules>li>h3:first-child::after,.steps>li>h3:first-child::after{content:"";display:block;height:.5em}
.msg-h{font-family:var(--sky-sans);color:var(--sky-tone)}
.msg-b{border-radius:18px}
.msg-l{color:#fff}
:is(.cc,.langs) button,.keys [role=radio]{background:#ffffff17;border-radius:999px;box-shadow:none}
.cc [aria-pressed=true],.langs [aria-pressed=true],.dtmf [aria-pressed=true],.keys [aria-checked=true]{background:var(--sky-uv);box-shadow:none;color:#fff}
.vl-play{font-weight:600}
.live-bar{background:#ffffff26}
.meter i{background:#ffffff24}
.faq-item h3{margin-bottom:.3em}
.hx-facts,.hx-facts li{border-color:#0000}
.hx-facts li{padding-left:0}
pre,.term{box-shadow:none}
input,select,textarea{background:#000}
.ah-said,.cl-said{border-left:0;padding-left:0;font:400 clamp(19px,.6vw + 15px,24px)/1.28 var(--sky-serif);letter-spacing:-.01em;color:#fff}
.faq-item{margin-bottom:28px}
/* On a photograph a caption keeps its dark strip; anywhere else the strip is the page, so the words sit plain.
   The city pages open with such a line under their h1: there it is the page's statement. */
.sub{padding:0;background:none}
:is(.scene,.band,.film-frame) .sub{padding:.12em .45em;background:var(--plate-scrim)}
.sec p>.sub:only-child{font:400 clamp(20px,.9vw + 15px,27px)/1.28 var(--sky-serif);letter-spacing:-.01em;color:#fff}
:is(.scene,.band,.film-frame,.prow-media) .chip{padding:5px 8px;background:var(--plate-scrim);color:#fff}
.scene .hook-tags{gap:6px}
.scene .hook-tags li{padding:.2em .5em;background:var(--plate-scrim)}
.scene .hook-tags li + li::before{content:none}
.scene-pause{border-color:#0000;background:var(--plate-scrim);color:#fff}
.dm-play-time{opacity:1}
/* a button in a price column keeps its own width (the column no longer has an edge to fill) */
.tier>.btn{align-self:flex-start}
/* tables: no rules; the head row and the row heads are labels, and the first column starts where the text does */
th,td{padding:13px 24px 13px 0;border-bottom:0}
@media (max-width:639px){th,td{padding-right:14px}}
thead th{vertical-align:bottom;color:var(--sky-tone)}
tbody th{font-weight:600;color:#fff}
tr.ours>:first-child{box-shadow:none}
tr.ours>th{color:var(--sky-tone)}
/* marks that were drawn with the hairline: the empty dot, the empty segment, a bar's track */
.dots i,.segbar i{background:var(--sky-dim);box-shadow:none}
.toc a{padding-left:0}
.lc-out{padding:0;border-radius:0;background:none;box-shadow:none}
@media (max-width:719px){.callbar a{padding-inline:10px;font-size:15px;line-height:1.15;text-align:center}}
/* on a phone the tags wrap: one to a line, so no line starts with a dot */
@media (max-width:639px){.sec .hook-tags{flex-direction:column}.sec .hook-tags li + li::before{content:none}}
@media (max-width:719px){
.callbar{gap:8px;padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:#000;border-top:0}
.callbar a{min-height:46px;border-radius:999px;background:#ffffff17}
.callbar a + a{background:#fff;color:#000}
body:has(.callbar){padding-bottom:62px}
}

/* ---------- 6. page by page: what single pages' own styles need ---------- */
/* quoted wording (/sms, /callback, /scam-kit/talk, /languages, /your-line): the serif says it is a quote, no bar or box */
.doc blockquote,.cb-quote,.talk-slide blockquote,.lg-say li,.ol-say li{padding:0;border:0;border-radius:0;background:none;box-shadow:none}
.lg-say q,.ol-say q{font:400 clamp(19px,.6vw + 15px,24px)/1.28 var(--sky-serif);letter-spacing:-.01em;color:#fff}
.lg-list li{border-bottom:0}
/* /demo: the form's heading sat against the list above it once the card beside it lost its edge */
.dm-check+.dm-grid{margin-top:clamp(36px,4.5vw,60px)}
/* /benchmark */
.bm-bar-row.ours{padding-left:2px;box-shadow:none}
.bm-bar-track{fill:#ffffff14}
/* /receptionist-demo, /lsa-calculator, /locations: these carry a <style> in the body, after this file, so the
   selectors here are one step heavier than theirs */
.site-form,.q-step,div.q-bar{max-width:var(--sky-measure)}
.q-step .q-opt{border-color:#0000;background:#ffffff12}
.q-step .q-opt:has(input:checked){border-color:#0000;background:#5b5cf05c}
div.q-bar i{background:var(--sky-dim)}
div.q-bar i.on{background:var(--sky-uv-2)}
:is(.lsa-calc,.loc-calc) label input{border-color:var(--field-edge)}
/* the scam kit: a sheet is a printed page; on the screen it is the page itself (print keeps kit.css: the Worker
   links this file for screens only). The wallet cards keep their dashed edge: the page says to cut along it. */
.kit-sheet,.talk-slide{padding:0;border:0;background:none}
.talk-slide{margin-bottom:clamp(56px,7vw,96px)}
.wallet-card{border-color:#ffffff47;background:none}
/* /pricing, /es/precios: the first plan lists 13 things. In one narrow column it ran three screens beside empty
   black, so it takes the full row and its list flows in columns; the other plans follow in their grid. */
#pricing-tiers>.tier:first-child{grid-column:1/-1}
#pricing-tiers>.tier:first-child>p{max-width:var(--sky-measure)}
#pricing-tiers>.tier:first-child>.inc{columns:3 240px;column-gap:clamp(24px,4vw,56px)}
#pricing-tiers>.tier:first-child>.inc li{break-inside:avoid}
/* /pricing opens with a line of two links */
main>p.wrap:first-child{margin:0 auto;padding-top:18px;font-size:var(--sky-t-credit);color:var(--sky-ink-3)}
main>p.wrap:first-child a{color:var(--sky-ink-2)}
/* /business-check shows one picture of a report on white paper: here it is read light on dark, same words */
img[src$="business-check-sample.png"]{border:0!important;border-radius:0!important;filter:invert(1) hue-rotate(180deg)}
/* /lab keeps its own rooms and colours; only its tour button was white on blue (3.7 to 1): the site's white button */
.lab-tour{border-color:#fff;background:#fff;color:#000;box-shadow:none}
/* /go/crewfill has no site stylesheet and no header: its own cards, numbers and green button, restated */
body[data-rev^=crewfill]{max-width:680px;padding:clamp(32px,8vw,96px) 20px;line-height:1.55}
body[data-rev^=crewfill] .card{margin:0 0 clamp(28px,5vw,44px);padding:0;border:0}
body[data-rev^=crewfill] .num{width:auto;height:auto;margin-right:.3em;background:none;font:600 var(--sky-t-label)/1.45 var(--sky-sans);color:var(--sky-tone)}
body[data-rev^=crewfill] .num::after{content:" \00b7"}
body[data-rev^=crewfill] blockquote{padding-left:0!important;border-left:0!important}
body[data-rev^=crewfill] :is(input,select){min-height:44px;margin:0 0 10px;border:1px solid var(--field-edge);border-radius:var(--r-ctl);color:#fff;font:400 16px/1.4 var(--sky-sans)}
body[data-rev^=crewfill] button{min-height:44px;border-radius:999px;background:#fff;color:#000;font:600 15px/1.2 var(--sky-sans)}

/* ---------- 7. textures ---------- */
/* Each picture is one small SVG: a band of light pushed through fractal noise, then coloured by a ramp, the way a
   false-colour sky map is made. No image files, no script. In a data: URL only the # is escaped (%23). */

/* textures:start */
.sky-plate[data-band=visible] .sky-plate-img{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 300' preserveAspectRatio='xMidYMid slice'><defs><linearGradient id='b' x1='0' y1='0' x2='0' y2='1' gradientTransform='rotate(-3 .5 .5)'><stop offset='0.236' stop-color='%23000'/><stop offset='0.38' stop-color='%23444'/><stop offset='0.458' stop-color='%23bbb'/><stop offset='.5' stop-color='%23fff'/><stop offset='0.542' stop-color='%23bbb'/><stop offset='0.62' stop-color='%23444'/><stop offset='0.764' stop-color='%23000'/></linearGradient><filter id='f' x='0' y='0' width='100%' height='100%' color-interpolation-filters='sRGB'><feTurbulence type='fractalNoise' baseFrequency='.0035 .009' numOctaves='5' seed='8' result='t'/><feColorMatrix in='t' type='matrix' values='2.4 0 0 0 -0.72 2.4 0 0 0 -0.72 2.4 0 0 0 -0.72 0 0 0 0 1' result='c'/><feComposite in='SourceGraphic' in2='c' operator='arithmetic' k1='0.9' k2='0.42' k3='0.2' k4='-0.06' result='i'/><feTurbulence type='fractalNoise' baseFrequency='.007 .028' numOctaves='4' seed='13' result='t2'/><feColorMatrix in='t2' type='matrix' values='-4.2 0 0 0 2.75 -4.2 0 0 0 2.75 -4.2 0 0 0 2.75 0 0 0 0 1' result='d'/><feComposite in='i' in2='d' operator='arithmetic' k1='1' result='i2'/><feComponentTransfer in='i2' result='m'><feFuncR type='table' tableValues='0.008 0.051 0.165 0.431 0.706 0.937'/><feFuncG type='table' tableValues='0.008 0.055 0.149 0.353 0.647 0.902'/><feFuncB type='table' tableValues='0.012 0.071 0.133 0.255 0.549 0.839'/></feComponentTransfer><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='4' result='s'/><feColorMatrix in='s' type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 9 0 0 0 -6.5' result='st'/><feComposite in='st' in2='m' operator='over'/></filter></defs><rect width='720' height='300' fill='url(%23b)' filter='url(%23f)'/></svg>")}
.sky-plate[data-band=uv] .sky-plate-img{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 300' preserveAspectRatio='xMidYMid slice'><defs><linearGradient id='b' x1='0' y1='0' x2='0' y2='1' gradientTransform='rotate(-3 .5 .5)'><stop offset='0.06' stop-color='%23000'/><stop offset='0.3' stop-color='%23444'/><stop offset='0.43' stop-color='%23bbb'/><stop offset='.5' stop-color='%23fff'/><stop offset='0.57' stop-color='%23bbb'/><stop offset='0.7' stop-color='%23444'/><stop offset='0.94' stop-color='%23000'/></linearGradient><filter id='f' x='0' y='0' width='100%' height='100%' color-interpolation-filters='sRGB'><feTurbulence type='fractalNoise' baseFrequency='.0035 .009' numOctaves='5' seed='8' result='t'/><feColorMatrix in='t' type='matrix' values='2.4 0 0 0 -0.72 2.4 0 0 0 -0.72 2.4 0 0 0 -0.72 0 0 0 0 1' result='c'/><feComposite in='SourceGraphic' in2='c' operator='arithmetic' k1='0.7' k2='0.42' k3='0.5' k4='-0.08' result='i'/><feTurbulence type='fractalNoise' baseFrequency='.007 .028' numOctaves='4' seed='13' result='t2'/><feColorMatrix in='t2' type='matrix' values='-3.2 0 0 0 2.4 -3.2 0 0 0 2.4 -3.2 0 0 0 2.4 0 0 0 0 1' result='d'/><feComposite in='i' in2='d' operator='arithmetic' k1='1' result='i2'/><feComponentTransfer in='i2' result='m'><feFuncR type='table' tableValues='0.02 0.078 0.169 0.357 0.561 0.914'/><feFuncG type='table' tableValues='0.016 0.071 0.165 0.361 0.549 0.898'/><feFuncB type='table' tableValues='0.102 0.251 0.561 0.941 1 1'/></feComponentTransfer><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='4' result='s'/><feColorMatrix in='s' type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 9 0 0 0 -6.7' result='st'/><feComposite in='st' in2='m' operator='over'/></filter></defs><rect width='720' height='300' fill='url(%23b)' filter='url(%23f)'/></svg>")}
.sky-plate[data-band=ir] .sky-plate-img{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 300' preserveAspectRatio='xMidYMid slice'><defs><linearGradient id='b' x1='0' y1='0' x2='0' y2='1' gradientTransform='rotate(-3 .5 .5)'><stop offset='0.379' stop-color='%23000'/><stop offset='0.445' stop-color='%23444'/><stop offset='0.481' stop-color='%23bbb'/><stop offset='.5' stop-color='%23fff'/><stop offset='0.519' stop-color='%23bbb'/><stop offset='0.555' stop-color='%23444'/><stop offset='0.621' stop-color='%23000'/></linearGradient><filter id='f' x='0' y='0' width='100%' height='100%' color-interpolation-filters='sRGB'><feTurbulence type='fractalNoise' baseFrequency='.0035 .009' numOctaves='5' seed='8' result='t'/><feColorMatrix in='t' type='matrix' values='2.4 0 0 0 -0.72 2.4 0 0 0 -0.72 2.4 0 0 0 -0.72 0 0 0 0 1' result='c'/><feComposite in='SourceGraphic' in2='c' operator='arithmetic' k1='1.1' k2='0.62' k3='0.26' k4='-0.07' result='i'/><feComponentTransfer in='i' result='m'><feFuncR type='table' tableValues='0.024 0.09 0.227 0.627 1 1 1'/><feFuncG type='table' tableValues='0.02 0.071 0.122 0.165 0.302 0.596 0.914'/><feFuncB type='table' tableValues='0.11 0.29 0.525 0.588 0.553 0.22 0.69'/></feComponentTransfer></filter></defs><rect width='720' height='300' fill='url(%23b)' filter='url(%23f)'/></svg>")}
.sky-plate[data-band=radio] .sky-plate-img{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 300' preserveAspectRatio='xMidYMid slice'><defs><linearGradient id='b' x1='0' y1='0' x2='0' y2='1' gradientTransform='rotate(-3 .5 .5)'><stop offset='0.28' stop-color='%23000'/><stop offset='0.4' stop-color='%23444'/><stop offset='0.465' stop-color='%23bbb'/><stop offset='.5' stop-color='%23fff'/><stop offset='0.535' stop-color='%23bbb'/><stop offset='0.6' stop-color='%23444'/><stop offset='0.72' stop-color='%23000'/></linearGradient><filter id='f' x='0' y='0' width='100%' height='100%' color-interpolation-filters='sRGB'><feTurbulence type='fractalNoise' baseFrequency='.0035 .009' numOctaves='5' seed='8' result='t'/><feColorMatrix in='t' type='matrix' values='2.4 0 0 0 -0.72 2.4 0 0 0 -0.72 2.4 0 0 0 -0.72 0 0 0 0 1' result='c'/><feComposite in='SourceGraphic' in2='c' operator='arithmetic' k1='0.9' k2='0.55' k3='0.42' k4='-0.1' result='i'/><feComponentTransfer in='i' result='m'><feFuncR type='table' tableValues='0.047 0.227 0.557 0.847 1 1 1'/><feFuncG type='table' tableValues='0.008 0.027 0.078 0.251 0.541 0.824 0.965'/><feFuncB type='table' tableValues='0.012 0.024 0.039 0.059 0.11 0.29 0.812'/></feComponentTransfer></filter></defs><rect width='720' height='300' fill='url(%23b)' filter='url(%23f)'/></svg>")}
.sky-plate[data-band=gold] .sky-plate-img{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 300' preserveAspectRatio='xMidYMid slice'><defs><linearGradient id='b' x1='0' y1='0' x2='0' y2='1' gradientTransform='rotate(-3 .5 .5)'><stop offset='0.192' stop-color='%23000'/><stop offset='0.36' stop-color='%23444'/><stop offset='0.451' stop-color='%23bbb'/><stop offset='.5' stop-color='%23fff'/><stop offset='0.549' stop-color='%23bbb'/><stop offset='0.64' stop-color='%23444'/><stop offset='0.808' stop-color='%23000'/></linearGradient><filter id='f' x='0' y='0' width='100%' height='100%' color-interpolation-filters='sRGB'><feTurbulence type='fractalNoise' baseFrequency='.0035 .009' numOctaves='5' seed='8' result='t'/><feColorMatrix in='t' type='matrix' values='2.4 0 0 0 -0.72 2.4 0 0 0 -0.72 2.4 0 0 0 -0.72 0 0 0 0 1' result='c'/><feComposite in='SourceGraphic' in2='c' operator='arithmetic' k1='0.5' k2='0.3' k3='0.62' k4='-0.1' result='i'/><feComponentTransfer in='i' result='m'><feFuncR type='table' tableValues='0.016 0.059 0.122 0.227 0.357 0.561'/><feFuncG type='table' tableValues='0.012 0.051 0.114 0.224 0.361 0.549'/><feFuncB type='table' tableValues='0.102 0.22 0.439 0.741 0.941 1'/></feComponentTransfer><feColorMatrix in='t' type='matrix' values='0 4.2 0 0 -1.9 0 4.2 0 0 -1.9 0 4.2 0 0 -1.9 0 0 0 0 1' result='g0'/><feComposite in='SourceGraphic' in2='g0' operator='arithmetic' k1='1.25' k4='-0.12' result='g1'/><feColorMatrix in='g1' type='matrix' values='0.86 0 0 0 0 0 0.64 0 0 0 0 0 0.2 0 0 0 0 0 0 1' result='g2'/><feBlend in='g2' in2='m' mode='screen' result='n'/><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='4' result='s'/><feColorMatrix in='s' type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 9 0 0 0 -6.9' result='st'/><feComposite in='st' in2='n' operator='over'/></filter></defs><rect width='720' height='300' fill='url(%23b)' filter='url(%23f)'/></svg>")}
.sky-plate[data-band=visible-2] .sky-plate-img{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 300' preserveAspectRatio='xMidYMid slice'><defs><linearGradient id='b' x1='0' y1='0' x2='0' y2='1' gradientTransform='rotate(2 .5 .5)'><stop offset='0.236' stop-color='%23000'/><stop offset='0.38' stop-color='%23444'/><stop offset='0.458' stop-color='%23bbb'/><stop offset='.5' stop-color='%23fff'/><stop offset='0.542' stop-color='%23bbb'/><stop offset='0.62' stop-color='%23444'/><stop offset='0.764' stop-color='%23000'/></linearGradient><filter id='f' x='0' y='0' width='100%' height='100%' color-interpolation-filters='sRGB'><feTurbulence type='fractalNoise' baseFrequency='.0035 .009' numOctaves='5' seed='31' result='t'/><feColorMatrix in='t' type='matrix' values='2.4 0 0 0 -0.72 2.4 0 0 0 -0.72 2.4 0 0 0 -0.72 0 0 0 0 1' result='c'/><feComposite in='SourceGraphic' in2='c' operator='arithmetic' k1='0.9' k2='0.42' k3='0.2' k4='-0.06' result='i'/><feTurbulence type='fractalNoise' baseFrequency='.007 .028' numOctaves='4' seed='47' result='t2'/><feColorMatrix in='t2' type='matrix' values='-4.2 0 0 0 2.75 -4.2 0 0 0 2.75 -4.2 0 0 0 2.75 0 0 0 0 1' result='d'/><feComposite in='i' in2='d' operator='arithmetic' k1='1' result='i2'/><feComponentTransfer in='i2' result='m'><feFuncR type='table' tableValues='0.008 0.051 0.165 0.431 0.706 0.937'/><feFuncG type='table' tableValues='0.008 0.055 0.149 0.353 0.647 0.902'/><feFuncB type='table' tableValues='0.012 0.071 0.133 0.255 0.549 0.839'/></feComponentTransfer><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='4' result='s'/><feColorMatrix in='s' type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 9 0 0 0 -6.5' result='st'/><feComposite in='st' in2='m' operator='over'/></filter></defs><rect width='720' height='300' fill='url(%23b)' filter='url(%23f)'/></svg>")}
main>.sec:first-of-type>.wrap:has(>h1):not(:has(form))::before,.phead::before{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 400'><defs><linearGradient id='b' x1='0' y1='0' x2='0' y2='1' gradientTransform='rotate(-3 .5 .5)'><stop offset='0' stop-color='%233c3c3c'/><stop offset='.3' stop-color='%234a4a4a'/><stop offset='.42' stop-color='%237a7a7a'/><stop offset='.48' stop-color='%23d0d0d0'/><stop offset='.505' stop-color='%23fff'/><stop offset='.53' stop-color='%23cfcfcf'/><stop offset='.6' stop-color='%235a5a5a'/><stop offset='.74' stop-color='%23262626'/><stop offset='1' stop-color='%23161616'/></linearGradient><linearGradient id='e'><stop offset='0' stop-opacity='.7'/><stop offset='.38' stop-opacity='0'/><stop offset='.62' stop-opacity='0'/><stop offset='1' stop-opacity='.7'/></linearGradient><radialGradient id='l' cx='.5' cy='.5' r='.5'><stop offset='.55' stop-color='%2302011a' stop-opacity='0'/><stop offset='.86' stop-color='%2302011a' stop-opacity='.3'/><stop offset='1' stop-color='%2302010f' stop-opacity='.7'/></radialGradient><filter id='f' x='0' y='0' width='100%' height='100%' color-interpolation-filters='sRGB'><feTurbulence type='fractalNoise' baseFrequency='.004 .0095' numOctaves='5' seed='14' result='t'/><feColorMatrix in='t' type='matrix' values='2.2 0 0 0 -0.62 2.2 0 0 0 -0.62 2.2 0 0 0 -0.62 0 0 0 0 1' result='c'/><feComposite in='SourceGraphic' in2='c' operator='arithmetic' k1='.55' k2='.52' k3='.44' k4='-.06' result='i'/><feComponentTransfer in='i' result='m'><feFuncR type='table' tableValues='0.024 0.086 0.176 0.318 0.514 0.831'/><feFuncG type='table' tableValues='0.02 0.078 0.169 0.322 0.502 0.812'/><feFuncB type='table' tableValues='0.122 0.29 0.596 0.878 0.984 1'/></feComponentTransfer><feColorMatrix in='t' type='matrix' values='0 4 0 0 -1.85 0 4 0 0 -1.85 0 4 0 0 -1.85 0 0 0 0 1' result='g0'/><feComposite in='SourceGraphic' in2='g0' operator='arithmetic' k1='1.1' k4='-.5' result='g1'/><feColorMatrix in='g1' type='matrix' values='.9 0 0 0 0 0 .42 0 0 0 0 0 .34 0 0 0 0 0 0 1' result='g2'/><feBlend in='g2' in2='m' mode='screen' result='n'/><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='4' result='s'/><feColorMatrix in='s' type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 9 0 0 0 -6.6' result='st'/><feComposite in='st' in2='n' operator='over'/></filter><clipPath id='c'><ellipse cx='400' cy='200' rx='399.5' ry='199.5'/></clipPath></defs><g clip-path='url(%23c)'><g filter='url(%23f)'><rect width='800' height='400' fill='url(%23b)'/><rect width='800' height='400' fill='url(%23e)'/></g><rect width='800' height='400' fill='url(%23l)'/></g></svg>")}
:root{--sky-speckle:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='s' x='0' y='0' width='100%' height='100%' color-interpolation-filters='sRGB'><feTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='2' seed='21' stitchTiles='stitch' result='a'/><feColorMatrix in='a' type='matrix' values='0 0 0 0 .9 0 0 0 0 .88 0 0 0 0 1 8 0 0 0 -5.9' result='a1'/><feTurbulence type='fractalNoise' baseFrequency='.2' numOctaves='1' seed='7' stitchTiles='stitch' result='b'/><feColorMatrix in='b' type='matrix' values='0 0 0 0 1 0 0 0 0 .96 0 0 0 0 1 16 0 0 0 -12.4' result='b1'/><feComposite in='b1' in2='a1' operator='over'/></filter><rect width='400' height='400' filter='url(%23s)'/></svg>")}
/* textures:end */

/* ---------- 8. the inner-page sphere (12 Nov, Tolga: "make this sapphires rotating too and in a better shape") ----------
   The flat oval map becomes a round globe that turns, like the homepage's sphere, with no script and no library: the
   same sky texture, made to tile, slides sideways behind a round window (mirrored so its ends meet; it passes once in 150 s) under a fixed highlight and
   a dark limb. With reduced motion it stands still. */
.phead{--sky-map-w:min(300px,26vw)}
main>.sec:first-of-type>.wrap:has(>h1):not(:has(form)){--sky-map-w:min(300px,26vw)}
main>.sec:first-of-type>.wrap:has(>h1):not(:has(form))::before,.phead::before{width:min(62%,250px);aspect-ratio:1/1;background:radial-gradient(circle at 33% 28%,#ffffff24 0,#fff0 42%),radial-gradient(circle at 50% 50%,#02011a00 46%,#02011a99 78%,#02010ff2 100%),url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 400'><defs><linearGradient id='b' x1='0' y1='0' x2='0' y2='1' gradientTransform='rotate(-3 .5 .5)'><stop offset='0' stop-color='%233c3c3c'/><stop offset='.3' stop-color='%234a4a4a'/><stop offset='.42' stop-color='%237a7a7a'/><stop offset='.48' stop-color='%23d0d0d0'/><stop offset='.505' stop-color='%23fff'/><stop offset='.53' stop-color='%23cfcfcf'/><stop offset='.6' stop-color='%235a5a5a'/><stop offset='.74' stop-color='%23262626'/><stop offset='1' stop-color='%23161616'/></linearGradient><linearGradient id='e'><stop offset='0' stop-opacity='.7'/><stop offset='.38' stop-opacity='0'/><stop offset='.62' stop-opacity='0'/><stop offset='1' stop-opacity='.7'/></linearGradient><radialGradient id='l' cx='.5' cy='.5' r='.5'><stop offset='.55' stop-color='%2302011a' stop-opacity='0'/><stop offset='.86' stop-color='%2302011a' stop-opacity='.3'/><stop offset='1' stop-color='%2302010f' stop-opacity='.7'/></radialGradient><filter id='f' x='0' y='0' width='100%' height='100%' color-interpolation-filters='sRGB'><feTurbulence type='fractalNoise' stitchTiles='stitch' baseFrequency='.004 .0095' numOctaves='5' seed='14' result='t'/><feColorMatrix in='t' type='matrix' values='2.2 0 0 0 -0.62 2.2 0 0 0 -0.62 2.2 0 0 0 -0.62 0 0 0 0 1' result='c'/><feComposite in='SourceGraphic' in2='c' operator='arithmetic' k1='.55' k2='.52' k3='.44' k4='-.06' result='i'/><feComponentTransfer in='i' result='m'><feFuncR type='table' tableValues='0.024 0.086 0.176 0.318 0.514 0.831'/><feFuncG type='table' tableValues='0.02 0.078 0.169 0.322 0.502 0.812'/><feFuncB type='table' tableValues='0.122 0.29 0.596 0.878 0.984 1'/></feComponentTransfer><feColorMatrix in='t' type='matrix' values='0 4 0 0 -1.85 0 4 0 0 -1.85 0 4 0 0 -1.85 0 0 0 0 1' result='g0'/><feComposite in='SourceGraphic' in2='g0' operator='arithmetic' k1='1.1' k4='-.5' result='g1'/><feColorMatrix in='g1' type='matrix' values='.9 0 0 0 0 0 .42 0 0 0 0 0 .34 0 0 0 0 0 0 1' result='g2'/><feBlend in='g2' in2='m' mode='screen' result='n'/><feTurbulence type='fractalNoise' stitchTiles='stitch' baseFrequency='.8' numOctaves='2' seed='4' result='s'/><feColorMatrix in='s' type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 9 0 0 0 -6.6' result='st'/><feComposite in='st' in2='n' operator='over'/></filter></defs><rect x='-6' width='812' height='400' fill='url(%23b)' filter='url(%23f)'/><g clip-path='url(%23h)'><g transform='translate(1600 0) scale(-1 1)'><rect x='-6' width='812' height='400' fill='url(%23b)' filter='url(%23f)'/></g></g><clipPath id='h'><rect x='800' width='800' height='400'/></clipPath></svg>") 0 50%/400% 100% repeat-x;box-shadow:0 0 90px 6px #5b5cf033,inset -18px -22px 60px #000a;animation:sky-turn 150s linear infinite}
@keyframes sky-turn{to{background-position:0 0,0 0,-400% 50%}}
@media (prefers-reduced-motion:reduce){main>.sec:first-of-type>.wrap:has(>h1):not(:has(form))::before,.phead::before{animation:none}}
@media (min-width:900px){
.phead{min-height:calc(var(--sky-head-top) + var(--sky-map-w) + clamp(32px,4vw,56px))}
.phead::before,main>.sec:first-of-type>.wrap:has(>h1):not(:has(form))::before{width:var(--sky-map-w)}
main>.sec:first-of-type>.wrap:has(>h1):not(:has(form)){min-height:var(--sky-map-w)}
.phead:has(>.cols) .toc{margin-top:calc(var(--sky-map-w) + clamp(40px,5vw,72px))}
.ah-top>.phead~.ah-dock{width:min(300px,26vw);margin-top:calc(clamp(32px,8vw,120px) + min(300px,26vw) + 30px)}
}

/* ---------- 9. the premium finish (12 Nov 2026, Tolga: "roll it out") ----------
   One finish for every page that loads this file (the static site and the voice-agent Worker's sky pages): a deep
   background with one soft brand glow and fine grain; the inner-page sphere gets a halo and a violet-pink rim; calmer
   headings; features, prices, steps and questions on glass cards; hairlines between sections; sections stop painting
   their own black, so the page reads as one surface. Nothing here moves. */
:root{--pm-bg:#05060c;--pm-line:#8f8cff26;--pm-card:linear-gradient(180deg,#ffffff0a,#ffffff03);--pm-glow:#5b5cf0}
html,body{background:var(--pm-bg)!important}
body::after{content:"";position:fixed;inset:0;z-index:100;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* the glow at the top of every page, behind the sphere */
main{position:relative;isolation:isolate}
main::before{content:"";position:absolute;left:0;right:0;top:-80px;height:min(900px,110vh);z-index:-1;pointer-events:none;
 background:radial-gradient(38% 50% at 76% 26%,#5b5cf02e,#5b5cf00d 50%,#0000 75%),radial-gradient(20% 22% at 70% 40%,#ff4d8d0f,#0000 70%)}
.sky-home main::before,main.sky-home::before{background:radial-gradient(36% 48% at 72% 46%,#5b5cf038,#5b5cf012 50%,#0000 75%),radial-gradient(20% 24% at 64% 70%,#ff4d8d12,#0000 70%)}

/* the inner-page sphere: a halo, a cool rim on one side and a little pink on the other */
main>.sec:first-of-type>.wrap:has(>h1):not(:has(form))::before,.phead::before{
 box-shadow:0 0 90px 6px #5b5cf038,0 0 0 1px #c9c2ff1f,inset 10px 8px 30px #9fb4ff26,inset -16px -14px 44px #ff4d8d29;border-radius:50%}

/* type */
main h1{letter-spacing:-.035em;line-height:1.02}
main h2{letter-spacing:-.025em}
.label,.sky-label{letter-spacing:.08em}
.lede,.sky-lede{color:#e9e7ff}

/* sections breathe and are divided by a hairline that fades at both ends */
main>.sec+.sec,main>section+section{position:relative}
main>.sec+.sec::after,main>section.sky-sec+section.sky-sec::after{content:"";position:absolute;top:0;left:50%;width:min(1100px,86vw);height:1px;transform:translateX(-50%);pointer-events:none;
 background:linear-gradient(90deg,#0000,var(--pm-line) 20%,var(--pm-line) 80%,#0000)}

/* glass cards */
.tier,.faq-item,.steps>li,.sky-steps>li,.web2-card,.lc-list>li,.sky-figure{
 background:var(--pm-card)!important;border:1px solid var(--pm-line);border-radius:20px;padding:22px 24px;box-shadow:0 1px 0 #ffffff0d inset,0 20px 50px -30px #000}
.tiers{gap:16px!important;background:none!important;box-shadow:none!important;overflow:visible!important}
.tier.lit{border-color:#8f8cff66;box-shadow:0 1px 0 #ffffff14 inset,0 0 60px -10px #5b5cf055}
.faq-item{margin-bottom:12px}
.steps,.sky-steps{gap:14px}
.price{letter-spacing:-.03em}

/* buttons: the white pill gets a quiet glow; the others are glass */
.btn{transition:box-shadow .4s ease,background .4s ease,transform .4s ease}
.btn:not(.ghost):hover{box-shadow:0 0 0 1px #fff3,0 8px 30px -6px #8f8cff80}
.btn.ghost,.btn.alt{background:#ffffff0d!important;border:1px solid var(--pm-line)!important;color:#fff!important}

/* the sky sections keep their indigo, softer */
.sky-field::before,.panel::before,.sec[data-tone=late]::before{opacity:.55}
@media (max-width:700px){.tier,.faq-item,.steps>li,.sky-steps>li,.web2-card,.lc-list>li,.sky-figure{padding:18px}}
/* one continuous surface: sections stop painting their own black over the page */
main .sec,main section,main>.sec[data-tone],.ah-top{background-color:transparent!important;background-image:none}
main .sec[data-tone=late],main .panel{background-image:none}

/* ---------- 9. Alive: one shared motion system (13 Nov 2026) ----------
   Figtree headlines, existing serif quotations, left-aligned stories. The talking sapphire
   remains the focal point; atmosphere stays dim and cards keep a solid reading surface.
   No script is needed for the finished still composition. */
:root{
 --m-fast:220ms;--m-enter:520ms;--m-silk:50s;--m-cloud:86s;--m-path:8s;
 --m-ease:cubic-bezier(.22,.68,.25,1);--m-distance:12px;--m-lift:-2px;
 --m-surface:#0c0c1b;--m-edge:#8f8cff33;
 /* Retire the old gold/orange decorative wavelengths; use the brand spectrum. */
 --sky-gold:var(--sky-uv-2);--sky-ir-2:var(--sky-uv-2);--sky-ink-3:#a1a1b7;
}
body{isolation:isolate}
body::before,body::after{content:"";position:fixed;pointer-events:none;mix-blend-mode:normal}
body::before{inset:-24px;z-index:-2;opacity:.65;
 background:radial-gradient(ellipse at 82% 18%,#5b5cf024,transparent 48%),radial-gradient(ellipse at 12% 62%,#8f8cff0d,transparent 42%),radial-gradient(ellipse at 72% 84%,#14123a,transparent 55%)}
body::after{inset:0;z-index:-1;opacity:.24;
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480' viewBox='0 0 480 480'%3E%3Cg fill='%238f8cff'%3E%3Ccircle cx='42' cy='83' r='.65'/%3E%3Ccircle cx='217' cy='35' r='.55'/%3E%3Ccircle cx='385' cy='166' r='.7'/%3E%3Ccircle cx='154' cy='273' r='.6'/%3E%3Ccircle cx='446' cy='396' r='.55'/%3E%3Ccircle cx='316' cy='345' r='.6'/%3E%3Ccircle cx='65' cy='430' r='.5'/%3E%3C/g%3E%3C/svg%3E") 0 0/480px 480px}
body:has(.sky-home)::before{opacity:1}
main::before,main.sky-home::before{content:none}
/* Fixed stars replace the old textured fields under paragraphs. */
.sky-field::before,.panel::before,.sec[data-tone=late]::before{content:none}
.sky-field,.panel,.sec[data-tone=late]{--sky-gold:var(--sky-uv-2);--sky-ir-2:var(--sky-uv-2)}

/* CSS spheres: soft folds, with a fixed dark limb; the same slow cadence as the canvas. */
main>.sec:first-of-type>.wrap:has(>h1):not(:has(form))::before,.phead::before{
 background-image:radial-gradient(ellipse at 50% 50%,transparent 25%,#05060c99 75%,#05060cf5 100%),radial-gradient(ellipse at 25% 120%,transparent 43%,#8f8cffe0 48%,#5b5cf0 54%,transparent 63%),radial-gradient(ellipse at 70% -30%,transparent 40%,#8f8cffb3 49%,#5b5cf08c 57%,transparent 67%),linear-gradient(125deg,#14123a,#5b5cf0 50%,#14123a);
 background-size:100% 100%;background-position:center;background-repeat:no-repeat;
 transform-origin:center;animation:m-silk var(--m-silk) ease-in-out infinite;animation-play-state:paused}
.m-on:not(.m-paused):not(.m-background) :is(.phead.m-inview,main>.sec:first-of-type>.wrap.m-inview:has(>h1):not(:has(form)))::before{animation-play-state:running}
@keyframes m-silk{0%,100%{transform:rotate(-3deg) scale(.98)}50%{transform:rotate(3deg) scale(1.02)}}

/* A solid surface below the text and a light confined to its border. */
.tier,.faq-item,.steps>li,.sky-steps>li,.web2-card,.lc-list>li,.sky-figure,.sky-plate,.sky-call-steps>li,.dmx-try .rules>li,.ev-list>li{
 position:relative;background:var(--m-surface)!important;border:1px solid var(--m-edge);border-radius:20px;
 transition:transform var(--m-enter) var(--m-ease),opacity var(--m-enter) ease}
.sky-plate,.dmx-try .rules>li{padding:22px 24px}
.m-scene-focal{--focal:55% 55%}
.btn{transition:transform var(--m-fast) var(--m-ease),opacity var(--m-fast) ease}
.m-card{--m-x:0px;--m-y:0px}
.m-glint{position:absolute;inset:-1px;padding:1px;border-radius:inherit;pointer-events:none;opacity:0;overflow:hidden;
 mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;
 transition:opacity var(--m-fast) ease}
.m-glint::before{content:"";position:absolute;left:0;top:0;width:180px;height:180px;background:radial-gradient(circle,#8f8cffb3,transparent 68%);transform:translate(var(--m-x),var(--m-y))}
.m-card:focus-within,.m-card:focus-visible{outline:2px solid var(--sky-uv-2);outline-offset:3px}
@media (hover:hover) and (pointer:fine){
 .m-on:not(.m-paused) .m-card:is(:hover,:focus-within,:focus-visible){transform:translateY(var(--m-lift))}
 .m-card:hover>.m-glint{opacity:1}
}
.m-on:not(.m-paused) .m-card:active{transform:scale(.995)}
@media (hover:none){.m-glint{display:none}.m-card:hover{transform:none}}

/* Connections live outside the reading area. SVG is decorative; real lists keep their semantics. */
.m-story{--m-step-gap:20px;position:relative;padding-left:28px!important;list-style:none}
.m-story.steps,.m-story.sky-steps,.m-story.sky-call-steps{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--m-step-gap)}
.m-story.steps>li,.m-story.sky-steps>li,.m-story.sky-call-steps>li{min-width:0;padding:22px 24px}
.sky-call{margin:0}
.sky-call .sky-quote{max-width:26em}
.sky-call-steps{margin:28px 0}
.sky-call-steps p{margin:0;text-indent:0;font:inherit;color:var(--sky-ink-body)}
.m-story::before,.m-story::after{content:"";position:absolute;top:0;height:var(--m-rail-height,100%);left:7px;width:1px;pointer-events:none;background:#8f8cff33}
.m-story::after{background:var(--sky-uv-2);opacity:.4;transform:scaleY(var(--m-progress,0));transform-origin:top;transition:transform var(--m-fast) var(--m-ease)}
.m-story>li::after{content:"";position:absolute;left:-26px;top:30px;width:8px;height:8px;border-radius:50%;background:var(--sky-uv-2);opacity:.2}
.m-story>li.m-past::after{opacity:.8}
.m-story>li.m-current{border-color:#8f8cff80}
.m-link{position:absolute;left:-29px;top:34px;width:16px;height:calc(100% + var(--m-step-gap));pointer-events:none;overflow:visible;fill:none;stroke:var(--sky-uv-2);stroke-width:1.2px}
.m-link path{vector-effect:non-scaling-stroke}
.m-link-line{opacity:.3}
.m-link-dash{opacity:.9;stroke-dasharray:4 96;animation:m-dash var(--m-path) linear infinite;animation-play-state:paused}
.m-story>li:last-child>.m-link{display:none}
.m-on:not(.m-paused):not(.m-background) .m-inview>.m-link .m-link-dash{animation-play-state:running}
@keyframes m-dash{to{stroke-dashoffset:-100}}

/* Visible is the default. Only the script's opt-in class may arm an entrance. */
.m-heading-mask{overflow:hidden;overflow:clip}
.m-heading-inner{display:block}
.m-on .m-enter{transition:transform var(--m-enter) var(--m-ease),opacity var(--m-enter) ease;transition-delay:var(--m-delay,0ms)}
html.m-on:not(.m-paused) .m-enter.m-pending{opacity:0;transform:translateY(var(--m-distance))}
/* ui.js is immutable and owns .rv; supersede its older reveal so there is only one entrance. */
html .rv.rv-h{opacity:1;transform:none}
html.m-on:not(.m-paused) .rv.m-enter.m-pending{opacity:0;transform:translateY(var(--m-distance))}

/* Progressive native navigation: unsupported browsers simply load the next document. */
@view-transition{navigation:auto}
header.top{view-transition-name:odile-header}
main{view-transition-name:odile-main}
::view-transition-old(root),::view-transition-new(root),::view-transition-old(odile-header),::view-transition-new(odile-header){animation:none}
::view-transition-group(odile-header),::view-transition-group(odile-main){animation:none}
::view-transition-old(odile-main){animation:m-leave var(--m-fast) ease both}
::view-transition-new(odile-main){animation:m-arrive var(--m-fast) var(--m-ease) both}
@keyframes m-leave{to{opacity:0;transform:translateY(-4px)}}
@keyframes m-arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
 body::before{animation:m-cloud var(--m-cloud) ease-in-out infinite alternate;animation-play-state:paused}
 .m-on:not(.m-paused):not(.m-background) body::before{animation-play-state:running}
}
@keyframes m-cloud{to{transform:translate3d(12px,-8px,0)}}
/* Optional compositor-only accent on headings; story state itself is observer-driven everywhere. */
@supports (animation-timeline:view()){
 @media (prefers-reduced-motion:no-preference){
  .m-on:not(.m-paused):not(.m-background) .sky-split-text{animation:m-story-emphasis linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
 }
}
@keyframes m-story-emphasis{from{opacity:.8}to{opacity:1}}

/* One switch freezes ambient layers, paths, stories, and interaction interpolation. */
html.m-paused *,html.m-paused *::before,html.m-paused *::after,
html.m-background *,html.m-background *::before,html.m-background *::after{animation-play-state:paused!important}
html.m-paused .m-enter{opacity:1!important;transform:none!important;transition:none!important}
html.m-paused :is(.m-story,.m-card,.m-glint),html.m-paused .m-story::after{transition:none!important}
html.m-paused .m-card{transform:none}
html.m-paused::view-transition-group(*),html.m-paused::view-transition-old(*),html.m-paused::view-transition-new(*){animation:none!important}
@media (max-width:700px){
 body::before{opacity:.45!important;inset:0;animation:none!important;transform:none!important}
 body::after{opacity:.16}
 .sky-plate{padding:18px}
 .m-story{padding-left:22px!important}
 .m-story::before,.m-story::after{left:3px}
 .m-story>li::after{left:-24px}
 .m-link{left:-27px}
}
@media print,(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto!important}
 *,*::before,*::after{animation:none!important;transition:none!important}
 html.m-on .m-enter,html.m-on .m-enter.m-pending{opacity:1!important;transform:none!important}
 .m-card{transform:none!important}
 .m-story::after{transform:none;opacity:.3}
 .m-glint,.m-link-dash{display:none}
 ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}