/*
 * The dark style of the site (2026-10-05, teal kept alone on 2026-10-06): the navy of the Vela demo
 * with teal (#5FD4C4) as the accent. js/fmx-style.js sets <html data-style="b"> before the first paint;
 * a blue variant "a" (the assistant charter) was tried and dropped, it lives in git history (c1464c1).
 *
 * Loaded AFTER css/fmx.css and the page sheet (fmx-business, fmx-pages, fmx-account). Same method
 * as every earlier restyle: the classes the markup already carries are repainted here, never renamed.
 * Removing this file and js/fmx-style.js gives back the light site exactly as it was.
 */

/* ── tokens ─────────────────────────────────────────────────────────────────────────────── */
:root[data-style] {
  --bg:#071320; --surface:#0B1B2B; --well:#12253A; --raised:#1B3148;
  --ink:#FFFFFF; --body:#9FB2C6; --mute:#8BA0B6;
  --line:#16304A; --navy:#0B1B2B; --navy-line:#22405A;
  --on-accent:#071320;
  color-scheme:dark;
}
:root[data-style="b"] {
  --blue:#5FD4C4; --blue-deep:#8BE3D7; --blue-lite:rgba(95,212,196,.12);
  --teal:#4CC5B2; --teal-glow:#5FD4C4; --amber:#E0A15F;
  --label:#5FD4C4; --icon:#5FD4C4; --accent-soft:rgba(95,212,196,.12); --accent-line:rgba(95,212,196,.45);
}

/* ── frame: the set behind the home page, the header, links, focus ──────────────────────── */
:root[data-style] .veil{display:none}
:root[data-style] .vig{box-shadow:inset 0 0 180px rgba(0,0,0,.35)}
:root[data-style] .hdr.stuck,
:root[data-style] .hdr.on-dark.stuck{background:rgba(7,19,32,.88);border-bottom-color:var(--line)}
:root[data-style] .hdr .nav a{color:var(--body)}
:root[data-style] .hdr .nav a:hover{color:var(--ink)}
:root[data-style] .hdr-sign{color:var(--body)}
:root[data-style] .hdr-sign:hover{color:var(--ink)}
:root[data-style] .hdr-cta,
:root[data-style] .hdr-cta:hover{color:var(--on-accent)}
:root[data-style] .hdr-cta:hover{background:var(--blue-deep)}
:root[data-style] .logo{background:var(--raised)}
:root[data-style] .logo svg{stroke:var(--teal-glow)}
:root[data-style] .logo::after{background:radial-gradient(circle,var(--accent-line),transparent 60%)}
:root[data-style] .hdr .lang-sel,
:root[data-style] .hdr:not(.on-dark) .lang-sel{background-color:var(--well);border-color:var(--navy-line);color:var(--ink)}


:root[data-style] .label,
:root[data-style] section.dark .label,
:root[data-style] .hero .eyebrow,
:root[data-style] .res .k,
:root[data-style] .fcol-k,
:root[data-style] .bz-eyebrow{color:var(--label)}
:root[data-style="b"] h1 em,
:root[data-style="b"] .hero h1 em{color:var(--teal-glow)}

/* ── buttons ────────────────────────────────────────────────────────────────────────────── */
:root[data-style] .btn-blue,
:root[data-style] .btn-blue:hover,
:root[data-style] .cx-btn--solid,
:root[data-style] .cx-btn--solid:hover,
:root[data-style] .lx-btn-primary,
:root[data-style] .lx-btn-primary:hover{color:var(--on-accent);box-shadow:none}
:root[data-style] .btn-blue::after{background:linear-gradient(110deg,transparent 24%,rgba(255,255,255,.28) 50%,transparent 76%)}
:root[data-style] .btn-line,
:root[data-style] .hero .btn-line{background:rgba(255,255,255,.04);border:1px solid var(--navy-line);color:var(--ink)}
:root[data-style] .btn-line:hover,
:root[data-style] .hero .btn-line:hover{border-color:var(--blue);color:var(--ink)}
:root[data-style] .cx-btn,
:root[data-style] .lx-btn{background:var(--well);border-color:var(--navy-line);color:var(--ink)}
:root[data-style] .cx-btn--quiet,
:root[data-style] .lx-btn-line{background:var(--surface)}
:root[data-style] .cx-btn--solid,
:root[data-style] .lx-btn-primary{background:var(--blue);border-color:var(--blue)}

/* ── home: cards, panels, tables ────────────────────────────────────────────────────────── */
:root[data-style] .console{background:var(--surface);border-color:var(--line);box-shadow:0 30px 80px -30px rgba(0,0,0,.7)}
:root[data-style] .console-bar{background:var(--well);border-bottom-color:var(--line)}
:root[data-style] .turn{border-right-color:var(--line)}
:root[data-style] .sources{background:var(--well)}
:root[data-style] .think{background:var(--well);border-color:var(--navy-line)}
:root[data-style] .steps code{background:var(--accent-soft);color:var(--blue)}
:root[data-style] .tally .chip{background:var(--accent-soft);color:var(--blue)}
:root[data-style] .tally .cost{background:var(--well)}

:root[data-style] .works-row b{color:#6E87A0}
:root[data-style] .works-row .build b,
:root[data-style] .works-row a:hover b{color:var(--ink)}
:root[data-style] .works-row .st::before{background:#3B5670}
:root[data-style] .works-row .prog{background:repeating-linear-gradient(90deg,var(--navy-line) 0 5px,transparent 5px 9px)}
:root[data-style] .works-row .build .prog{background:var(--line)}
:root[data-style] .works-row .build .prog::before{background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent)}

:root[data-style] .cap{background:var(--surface);border-color:var(--line)}
:root[data-style] .cap:hover{border-color:var(--navy-line);box-shadow:0 14px 32px rgba(0,0,0,.35)}
:root[data-style] .cap::before{background:radial-gradient(320px 170px at var(--mx,50%) var(--my,0%),var(--accent-soft),transparent 70%)}
:root[data-style] .cap .ic,
:root[data-style] .cap.t .ic,
:root[data-style] .cap.a .ic,
:root[data-style] .cap.s .ic{background:var(--well)}
:root[data-style] .cap .ic svg{stroke:var(--icon)}
:root[data-style] .cap .ex{background:var(--well);color:var(--body)}
:root[data-style] .badge{color:var(--blue);background:var(--accent-soft)}

:root[data-style] .guard svg{stroke:var(--icon)}
:root[data-style] .flow-foot .mono{color:var(--label)}

:root[data-style] .res,
:root[data-style] .doc,
:root[data-style] .timeline,
:root[data-style] .sk-card,
:root[data-style] .cmp,
:root[data-style] .faq-q,
:root[data-style] .pf,
:root[data-style] .pack,
:root[data-style] table.costs{background:var(--surface);border-color:var(--line)}
:root[data-style] .doc-bar,
:root[data-style] .sk-bar,
:root[data-style] .cmp-row,
:root[data-style] table.costs td{border-color:var(--line)}
:root[data-style] .beat{border-right-color:var(--line)}
:root[data-style] .beat.now{background:var(--well)}
:root[data-style] .scn{border-color:var(--line)}
:root[data-style] .scn.active{background:var(--well);border-color:var(--accent-line)}
:root[data-style] .feed,
:root[data-style] .start{background:var(--well);border:1px solid var(--navy-line)}
:root[data-style] .feed h3,
:root[data-style] .start .k{color:var(--label)}
:root[data-style] .start svg{stroke:var(--icon)}
:root[data-style] .start .btn,
:root[data-style] .start .btn:hover{background:var(--blue);color:var(--on-accent)}

:root[data-style] .sk-list li.on{background:var(--well)}
:root[data-style] .sk-list li .box{border-color:var(--navy-line)}
:root[data-style] .sk-new{border-top-color:var(--line)}
:root[data-style] .frag,
:root[data-style] .frag.fresh{background:var(--well)}
:root[data-style] .frag .tag,
:root[data-style] .frag.fresh .tag,
:root[data-style] .sk-targets b.lit{background:var(--accent-soft);border-color:var(--accent-line)}
:root[data-style] .sk-cursor{background:linear-gradient(140deg,#FFFFFF 46%,transparent 47%)}

:root[data-style] .cmp-head,
:root[data-style] .cmp-k{background:var(--well)}
:root[data-style] .cmp-row>.cmp-us{background:var(--accent-soft);border-inline-color:var(--line)}

:root[data-style] .pf:hover,
:root[data-style] .pack:hover{box-shadow:0 12px 28px rgba(0,0,0,.35)}
:root[data-style] .grid3 .pf[style]{background:var(--well)!important;border-color:var(--navy-line)!important}
:root[data-style] .tag.ok{color:#22C58B;background:rgba(34,197,139,.13)}
:root[data-style] .tag.val{color:#F5B53D;background:rgba(245,181,61,.12)}
:root[data-style] .tag.dev{color:var(--body);background:var(--raised)}
:root[data-style="b"] .pf.live{border-color:var(--accent-line)}

/* ── footer, waitlist bar and dialog, drawer ────────────────────────────────────────────── */
:root[data-style] .ftr{border-top:1px solid var(--line)}
:root[data-style] .ftr-col h4{color:var(--label)}
:root[data-style] .ftr-social a:hover{background:var(--accent-soft);color:var(--blue)}
:root[data-style] .wl-bar-btn,
:root[data-style] .wl-form button{color:var(--on-accent)}
:root[data-style] .wl-bar-btn:hover,
:root[data-style] .wl-form button:hover{background:var(--blue-deep)}
:root[data-style] .wl-modal{background:radial-gradient(120% 70% at 100% 0,var(--accent-soft),transparent 60%),var(--surface);
  box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px var(--line)}
:root[data-style] .wl-form input:focus,
:root[data-style] .wl-form select:focus{outline-color:var(--accent-line)}
:root[data-style] .fx-drawer{background:var(--surface)}

/* ── content pages (fmx-pages.css) ─────────────────────────────────────────────────────── */
:root[data-style] .cx-field input,
:root[data-style] .cx-field select,
:root[data-style] .cx-field textarea{background:var(--well);border-color:var(--navy-line);color:var(--ink)}
:root[data-style] .cx-field input:focus,
:root[data-style] .cx-field select:focus,
:root[data-style] .cx-field textarea:focus{outline-color:var(--accent-line)}
:root[data-style] .ct-form{background:var(--surface);border-color:var(--line);box-shadow:none}
:root[data-style] .nf-term b{color:#F2555A}

/* ── account pages (fmx-account.css) ───────────────────────────────────────────────────── */
:root[data-style] .acc-card,
:root[data-style] .acc-stat,
:root[data-style] .acc-pack,
:root[data-style] .acc-scroll,
:root[data-style] #keyList{background:var(--surface);border-color:var(--line);box-shadow:none}
:root[data-style] .acc-form input,
:root[data-style] .acc-oauth,
:root[data-style] .acc-key{background:var(--well);border-color:var(--navy-line);color:var(--ink)}
:root[data-style] .acc-form input:focus{outline-color:var(--accent-line)}
:root[data-style] .acc-or{color:var(--mute)}
:root[data-style] .acc-msg.is-error{border-color:rgba(242,85,90,.35);background:rgba(242,85,90,.09);color:#FF9A9D}
:root[data-style] .acc-msg.is-ok{border-color:rgba(34,197,139,.35);background:rgba(34,197,139,.09);color:#6FE0B4}
:root[data-style] .acc-rail .admin:hover{background:rgba(245,181,61,.10)}
:root[data-style] .acc-stat--main{border-color:var(--accent-line);background:linear-gradient(180deg,var(--well),var(--surface))}
:root[data-style] .acc-pack:hover{border-color:var(--accent-line);box-shadow:0 12px 26px rgba(0,0,0,.35)}
:root[data-style] .acc-table td,
:root[data-style] .acc-key-item{border-bottom-color:var(--line)}
:root[data-style] .acc-reveal{border-color:rgba(245,181,61,.35);background:rgba(245,181,61,.08)}
:root[data-style] .acc-reveal .acc-h2{color:#F5B53D}
:root[data-style] .acc-key-item.is-revoked strong,
:root[data-style] .acc-key-item.is-revoked .acc-key-prefix{color:var(--mute)}
:root[data-style] .acc-key-revoke{border-color:rgba(242,85,90,.4);color:#FF9A9D}
:root[data-style] .acc-key-revoke:hover{border-color:#F2555A;background:rgba(242,85,90,.09)}

/* ── For platforms (fmx-business.css) ──────────────────────────────────────────────────── */
:root[data-style] .bz .hdr{background:var(--surface);border-bottom-color:var(--line)}
:root[data-style] .bz-hero{background:var(--bg)}
:root[data-style] .bz-ghost:hover{border-color:var(--blue)}
:root[data-style] .bz-card,
:root[data-style] .bz-ours{background:var(--surface);border-color:var(--line)}
:root[data-style] .bz-card svg{color:var(--icon)}
:root[data-style] .bz-fmx,
:root[data-style] .bz-cta .bz-box{background:var(--well);border:1px solid var(--navy-line)}
:root[data-style] .bz-flow li{border-color:var(--line)}
:root[data-style] .bz-flow li.eng{background:var(--accent-soft)}

/* ── video placeholders (the films are not shot yet) ───────────────────────────────────── */
/* drawn as a player on a chart grid, with its progress track, so the page reads finished */
.vph{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  text-align:center;padding:24px 24px 44px;box-sizing:border-box;aspect-ratio:16/9;border-radius:14px;overflow:hidden;
  border:1px solid var(--line);color:var(--body);
  background:radial-gradient(60% 65% at 50% 42%,var(--accent-soft),transparent 72%),
    linear-gradient(#0F2236 1px,transparent 1px) 0 0/100% 56px,
    linear-gradient(90deg,#0F2236 1px,transparent 1px) 0 0/56px 100%,#081728}
.vph::after{content:"";position:absolute;left:20px;right:20px;bottom:20px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--blue) 0 24%,rgba(255,255,255,.12) 24%)}
.vph--card::after{left:12px;right:12px;bottom:12px;height:2px}
.vph--card{background:radial-gradient(60% 65% at 50% 42%,var(--accent-soft),transparent 72%),
    linear-gradient(#0F2236 1px,transparent 1px) 0 0/100% 32px,
    linear-gradient(90deg,#0F2236 1px,transparent 1px) 0 0/32px 100%,#081728}
/* a card with a film no longer needs its icon */
.cap .vph~.ic{display:none}
.bz-card .vph~svg{display:none}
/* the large films stay readable on wide screens instead of filling them */
.seq .vph--frame{max-width:1100px;margin-inline:auto}
.seq .vph--frame.vph--sm{max-width:720px}
.skills-grid:has(>.vph){grid-template-columns:1fr}
.skills-grid>.vph{width:100%;max-width:1100px;margin-inline:auto}
.vph-play{flex:none}
@media (max-width:620px){
  .vph{padding:18px 16px 36px;gap:8px}
  .vph:not(.vph--card){aspect-ratio:auto;min-height:240px}
  .vph-play{width:52px;height:52px}
  .vph-brief{font-size:12px}}
.vph--frame{border:1px solid var(--line);border-radius:18px;padding:8px;background:var(--surface);aspect-ratio:auto;
  box-shadow:0 40px 120px -40px var(--accent-soft),0 30px 80px -30px rgba(0,0,0,.7)}
.vph--frame>.vph{width:100%}
.vph--wide{aspect-ratio:16/10}
.vph--card{aspect-ratio:4/3;padding:14px;gap:8px;border-radius:10px;margin:-4px 0 14px}
.vph-play{width:72px;height:72px;border-radius:50%;background:var(--blue);color:var(--on-accent);display:grid;place-items:center;
  box-shadow:0 0 40px var(--accent-line)}
.vph--card .vph-play{width:40px;height:40px;background:transparent;border:1.5px solid var(--blue);color:var(--blue);box-shadow:none}
.vph-tag{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.04em;color:var(--blue)}
.vph--card .vph-tag{font-size:11px}
.vph-brief{max-width:620px;font-size:13.5px;line-height:1.5;color:var(--body)}
.vph--card .vph-brief{font-size:12px}
.bz-hero .vph--frame{flex:1 1 520px;min-width:0}
:root[data-style] .bz-card .vph svg{color:inherit}
.hero .vph--frame{max-width:1100px;margin:clamp(26px,3.6vw,44px) auto 0;opacity:0;animation:fadeUp .9s ease 1.86s forwards}
@media (prefers-reduced-motion:reduce){.hero .vph--frame{opacity:1}}

/* ── VIDEO 01, drawn live (js/fmx-hero-film.js) ────────────────────────────────────────── */
/* the slot keeps 16:9 on phones too: the film is composed for that frame */
.vph--film{display:block;padding:0;gap:0;background:#071320}
.vph--film::after{content:none}
@media (max-width:620px){.vph--film:not(.vph--card){aspect-ratio:16/9;min-height:0;padding:0}.vph--film.vph--wide{aspect-ratio:16/10}}
.vph.vph--film.vph--phone{aspect-ratio:5/4}
.vph--film>canvas,.vph--film>.vph-poster{position:absolute;inset:0;width:100%;height:100%;display:block}
.vph--film>.vph-poster{object-fit:cover;transition:opacity .4s ease}
.vph--film.is-live>.vph-poster{opacity:0}

/* ── leftovers of the blue era, repainted in the accent (2026-10-06) ───────────────────── */
/* the Planner node of the Technology graph was the one blue element left on a teal page */
:root[data-style] .gn.plan{border-color:rgba(95,212,196,.3)}
:root[data-style] .gn.plan.on{border-color:rgba(95,212,196,.75);box-shadow:0 0 0 1px rgba(95,212,196,.14),0 10px 30px rgba(0,0,0,.42),0 0 30px rgba(95,212,196,.16)}
:root[data-style] .gn.plan.on::before,
:root[data-style] .gn.plan.on::after{background:var(--teal-glow);box-shadow:0 0 10px rgba(95,212,196,.8)}
:root[data-style] .cable.plan{stroke:rgba(95,212,196,.18)}
:root[data-style] .cable.plan.hot{stroke:rgba(95,212,196,.75)}
/* footer: the slate blue greys of the light era become the neutral greys of the theme */
:root[data-style] .ftr{color:var(--body)}
:root[data-style] .ftr-tag,
:root[data-style] .ftr-bottom p,
:root[data-style] .ftr-legal{color:var(--mute)}
:root[data-style] .ftr-legal strong{color:var(--body)}
:root[data-style] .ftr-col nav a{color:var(--body)}
:root[data-style] .ftr-col nav a[href$="/pages/business"]{color:var(--teal-glow)}

/* ── the pointer light (2026-10-06, js/fmx-nav.js) ─────────────────────────────────────── */
/* a wide, faint teal glow that trails the mouse over every page */
.fx-cursor{position:fixed;left:0;top:0;z-index:4;width:620px;height:620px;margin:-310px 0 0 -310px;border-radius:50%;
  pointer-events:none;opacity:0;transition:opacity .4s ease;mix-blend-mode:screen;will-change:transform;
  background:radial-gradient(circle,rgba(95,212,196,.085) 0,rgba(95,212,196,.035) 32%,transparent 62%)}
.fx-cursor.on{opacity:1}
/* the ring that settles on the box under the mouse, brightest where the pointer is, and slides
   from one box to the next */
.fx-ring{position:fixed;left:0;top:0;z-index:39;pointer-events:none;opacity:0;
  transition:opacity .25s ease,transform .22s cubic-bezier(.2,.7,.2,1),width .22s cubic-bezier(.2,.7,.2,1),height .22s cubic-bezier(.2,.7,.2,1);
  box-shadow:0 0 0 1px rgba(95,212,196,.28),0 0 26px rgba(95,212,196,.16),inset 0 0 22px rgba(95,212,196,.05)}
.fx-ring::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;
  background:radial-gradient(160px circle at var(--mx,50%) var(--my,50%),#9AF5E8,rgba(95,212,196,.55) 40%,transparent 72%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.fx-ring.on{opacity:1}
/* a fine chart grid that shows only around the pointer (js/fmx-fx.js moves --gx/--gy and scrolls it) */
.fx-grid{position:fixed;inset:0;z-index:4;pointer-events:none;opacity:0;transition:opacity .5s ease;
  background-image:linear-gradient(rgba(95,212,196,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(95,212,196,.11) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(250px circle at var(--gx,-999px) var(--gy,-999px),#000 0,rgba(0,0,0,.45) 45%,transparent 100%);
  mask-image:radial-gradient(250px circle at var(--gx,-999px) var(--gy,-999px),#000 0,rgba(0,0,0,.45) 45%,transparent 100%)}
.fx-grid.on{opacity:1}
/* the trading crosshair over the hero, with its price tag on the right edge */
.fx-cross,.fx-cross-tag{position:fixed;top:0;z-index:5;pointer-events:none;opacity:0;transition:opacity .2s ease}
.fx-cross-h{left:0;right:0;height:0;border-top:1px dashed rgba(95,212,196,.4)}
.fx-cross-v{left:0;bottom:0;width:0;border-left:1px dashed rgba(95,212,196,.4)}
.fx-cross-tag{right:0;height:22px;padding:0 9px 0 10px;border-radius:5px 0 0 5px;background:var(--teal-glow);color:#071320;
  font:600 11px/22px "IBM Plex Mono",monospace;letter-spacing:.02em}
.fx-cross.on,.fx-cross-tag.on{opacity:1}
@media (prefers-reduced-motion:reduce){.fx-cursor{display:none}.fx-ring{transition:opacity .2s ease}}

/* ── 2026-11-02, "less geek" pass (owner): a trading desk, not a terminal ──────────────────────────
   Mono stays for what is a number on a screen (prices, times, levels, tickers); labels, chips and
   statuses go to the text face. The neon halos and the moving grain go; js/fmx-fx.js keeps only the
   count-up (PLAYFUL = false). */
.label,.hero .eyebrow,.bz-eyebrow,.works-k,.works-row .st,.res .k,.feed h3,.as-card .as-k,.ftr-col h4,.cx-label,
.hdr-b2b-tag,.b2b-card-k,.vph-tag,.sk-count,.sk-list li b,.frag .tag,.sk-targets b,.sk-live,.sk-draw b,.steps code,
.fcol-k,.gn .pt,.trace span{font-family:"IBM Plex Sans",system-ui,sans-serif}
.label,.hero .eyebrow,.bz-eyebrow,.works-k,.res .k,.feed h3,.ftr-col h4,.cx-label,.fcol-k,.b2b-card-k{font-weight:600;letter-spacing:.11em}
.sk-draw b,.sk-targets b{font-size:12.5px;letter-spacing:0}
.sk-live{letter-spacing:.08em;font-weight:600}
.grain{display:none}
.vph--frame{box-shadow:0 30px 80px -34px rgba(0,0,0,.65)}
.vph-play{box-shadow:none}
.sk-ico{box-shadow:none}
.sk-steps::after{opacity:.55}

/* Trust: three rules every answer follows (replaces the reasoning graph on the home page) */
.trust{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:900px){.trust{grid-template-columns:1fr}}
.trust-c{padding:24px 22px 22px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.trust-c h3{margin:16px 0 8px;font-family:Manrope,sans-serif;font-size:18px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.trust-c p{margin:0;font-size:14px;line-height:1.62;color:var(--body)}
.trust-i{display:grid;place-items:center;width:42px;height:42px;border-radius:11px;background:var(--accent-soft,rgba(14,124,107,.08));
  border:1px solid var(--accent-line,rgba(14,124,107,.3))}
.trust-i svg{width:21px;height:21px;fill:none;stroke:var(--teal);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ── 2026-11-02, direction C "pro clair" (owner, canvas 6ACQUUudENvjihjA9pnQQj) ─────────────────────
   js/fmx-style.js no longer sets data-style: the light site of css/fmx.css is back, and the rules below
   finish it the way the mock-up shows: a light hero (no neuron scenery), navy buttons, teal as the one
   accent, the films in a dark frame with a soft shadow. All scoped to :root:not([data-style]) so the dark
   style comes back whole if data-style is set again. */
:root:not([data-style]){
  --blue:#0E7C6B; --blue-deep:#0A5F52; --blue-lite:#E8F4F1; --teal:#0E7C6B;
  --accent-soft:#E8F4F1; --accent-line:#BFE0D8; --well:#F4F7FA;
  --ink:#0B1B2B; --body:#4A5A6B; --mute:#6B7C8F; --line:#E3E8EF;
}
:root:not([data-style]) #net,
:root:not([data-style]) .veil,
:root:not([data-style]) .veil-dark,
:root:not([data-style]) .vig{display:none}
:root:not([data-style]) body{background:#FFFFFF}

/* hero */
:root:not([data-style]) .hero{color:var(--ink);background:linear-gradient(180deg,#F4F7FA 0%,#FFFFFF 72%)}
:root:not([data-style]) .hero h1{color:var(--ink);text-shadow:none}
:root:not([data-style]) .hero h1 em{color:var(--teal)}
:root:not([data-style]) .hero .lede,
:root:not([data-style]) .hero .lede-2,
:root:not([data-style]) .hero .fine{text-shadow:none}
:root:not([data-style]) .hero .lede{color:var(--body)}
:root:not([data-style]) .hero .lede-2,
:root:not([data-style]) .hero .fine{color:var(--mute)}
:root:not([data-style]) .hero .eyebrow{color:var(--teal);text-shadow:none;letter-spacing:.08em}
:root:not([data-style]) .hero .btn-line{background:#FFFFFF;border-color:#D5DDE7;color:var(--ink)}
:root:not([data-style]) .hero .btn-line:hover{border-color:var(--ink);color:var(--ink)}

/* buttons and header: navy, the way the mock-up has them */
:root:not([data-style]) .btn-blue,
:root:not([data-style]) .hdr-cta{background:var(--navy);color:#FFFFFF;box-shadow:none}
:root:not([data-style]) .btn-blue:hover,
:root:not([data-style]) .hdr-cta:hover{background:#1B3148;color:#FFFFFF}
:root:not([data-style]) .hdr{background:rgba(255,255,255,.92);border-bottom-color:var(--line)}
:root:not([data-style]) .hdr.stuck{background:rgba(255,255,255,.94)}
:root:not([data-style]) .logo::after{animation:none;opacity:0}

/* the films are drawn in the site's light palette now (js/film/hero-film.js colors): a light frame around them */
:root:not([data-style]) .vph--frame{background:#FFFFFF;border:1px solid var(--line);border-radius:16px;padding:8px;
  box-shadow:0 30px 70px -34px rgba(11,27,43,.28)}
:root:not([data-style]) .vph,
:root:not([data-style]) .vph--card,
:root:not([data-style]) .vph--film{background:#F4F7FA;border-color:var(--line)}
:root:not([data-style]) .vph--film{border-radius:10px;overflow:hidden}
:root:not([data-style]) .vph--film:not(.vph--card){border:1px solid var(--line)}
:root:not([data-style]) .vph--frame>.vph--film{border:0}

/* sections: white and a pale grey band, hairlines */
:root:not([data-style]) section.tint{background:#F7F9FB;border-color:var(--line)}
:root:not([data-style]) .sk-steps .sk-step{background:#FFFFFF}
:root:not([data-style]) .sk-steps .sk-step.is-live{background:var(--navy);border-color:var(--navy);color:#B8C4D1}
:root:not([data-style]) .sk-steps .sk-step.is-live b{color:#FFFFFF}
:root:not([data-style]) .sk-steps .sk-step.is-live .sk-live{color:#5FD4C4;background:rgba(95,212,196,.12);border-color:rgba(95,212,196,.4)}
:root:not([data-style]) .sk-steps .sk-step.is-live .sk-ico{background:#12253A;border-color:#22405A}
:root:not([data-style]) .sk-steps .sk-step.is-live .sk-ico svg{stroke:#5FD4C4}
:root:not([data-style]) .trust-c{background:#FFFFFF}
/* on a navy card the navy button disappears: teal there */
:root:not([data-style]) .start .btn-blue{background:#5FD4C4;color:#0B1B2B}
:root:not([data-style]) .start .btn-blue:hover{background:#8BE3D7;color:#0B1B2B}
/* business "How it works": the reasoning graph was drawn for a dark ground, it keeps one */
:root:not([data-style]) #how{background:var(--navy);border-color:var(--navy)}
:root:not([data-style]) #how .bz-h2{color:#FFFFFF}
:root:not([data-style]) #how .bz-p{color:#A4B8CC}
:root:not([data-style]) #how .label{color:#5FD4C4}

/* ── 2026-11-02, readability (owner: "plus clair, plus readable", reference algovistra.com) ─────────────
   Bigger type, darker greys, a 1200 px column, more air between sections, taller buttons. Light style only. */
:root:not([data-style]){
  --t-display:clamp(38px,5vw,68px); --t-h2:clamp(28px,3.1vw,44px); --t-h3:19px;
  --t-body:16.5px; --t-small:15px; --t-label:12px;
  --s-sec:clamp(68px,7.4vw,112px);
  --body:#33465A; --mute:#566779;
}
/* content sits in a 1200 px column, without touching the markup */
:root:not([data-style]) .wrap{padding-inline:max(var(--gutter),calc((100% - 1200px) / 2))}
:root:not([data-style]) .hdr.wrap{padding-inline:max(var(--gutter),calc((100% - 1280px) / 2))}

/* header */
:root:not([data-style]) .hdr{height:66px}
:root:not([data-style]) .nav{font-size:14.5px;gap:26px}
:root:not([data-style]) .brand{font-size:17px}
:root:not([data-style]) .hdr-cta{height:40px;padding:0 18px;font-size:14px;border-radius:8px}

/* headings */
:root:not([data-style]) h1{letter-spacing:-.045em;line-height:1}
:root:not([data-style]) h2.head{letter-spacing:-.04em;line-height:1.08;margin-bottom:16px}
:root:not([data-style]) .sub{font-size:17.5px;line-height:1.65;color:var(--body)}
:root:not([data-style]) .label,
:root:not([data-style]) .res .k{font-size:12.5px;letter-spacing:.12em;margin-bottom:14px}

/* hero: one lead, readable; the second paragraph said the same thing again */
:root:not([data-style]) .hero{padding-block:clamp(64px,8vw,120px) clamp(36px,4vw,56px)}
:root:not([data-style]) .hero .eyebrow{font-size:13px;letter-spacing:.1em}
:root:not([data-style]) .lede{font-size:clamp(17px,1.4vw,20px);line-height:1.6;max-width:40em;margin-bottom:28px}
:root:not([data-style]) .lede-2{display:none}
:root:not([data-style]) .fine{font-size:14px;margin-top:16px}

/* buttons */
:root:not([data-style]) .btn{height:52px;padding:0 26px;font-size:15.5px;border-radius:9px}
:root:not([data-style]) .hero .cta-row .btn{min-width:220px}

/* figures */
:root:not([data-style]) .stats b{font-size:clamp(26px,2.8vw,36px)}
:root:not([data-style]) .stats span{font-size:14.5px}

/* card and body text */
:root:not([data-style]) .cap p,
:root:not([data-style]) .res p,
:root:not([data-style]) .pf p,
:root:not([data-style]) .start p,
:root:not([data-style]) .start ul,
:root:not([data-style]) .trust-c p,
:root:not([data-style]) .bz-p{font-size:15.5px;line-height:1.62}
:root:not([data-style]) .cap .ex{font-size:14px}
:root:not([data-style]) .pf h3{font-size:17px}
:root:not([data-style]) .pf .os{font-size:13.5px}
:root:not([data-style]) .trust-c h3,
:root:not([data-style]) .cap h3,
:root:not([data-style]) .res h3,
:root:not([data-style]) .bz-h3{font-size:19px;letter-spacing:-.015em}
:root:not([data-style]) .bz-h2{font-size:clamp(28px,3.1vw,42px);letter-spacing:-.035em}
:root:not([data-style]) .sk-steps .sk-step{font-size:15px;padding:24px 22px 22px}
:root:not([data-style]) .sk-steps .sk-step b{font-size:18px}
:root:not([data-style]) .sk-draws-lead{font-size:17px}
:root:not([data-style]) .sk-draw b{font-size:14px}
:root:not([data-style]) .res-note{font-size:15px}
:root:not([data-style]) .cmp-row>span,
:root:not([data-style]) .cmp-head>span{font-size:15px;line-height:1.5}
:root:not([data-style]) .faq-q summary{font-size:17px;padding-block:20px}
:root:not([data-style]) .faq-q p{font-size:16px}
:root:not([data-style]) .close p{font-size:17px}
:root:not([data-style]) .close h2{font-size:clamp(30px,3.8vw,50px)}
:root:not([data-style]) .start .v{font-size:40px}
:root:not([data-style]) .start .k{font-size:12.5px}

/* ── 2026-11-02, "pro" pass 2: no launch banner above the header, no progress bars on the platforms ── */
:root:not([data-style]) .wl-bar{display:none}
:root:not([data-style]) .works-row .prog{display:none}
/* business hero: light like the home page (it stayed navy) */
:root:not([data-style]) .bz-hero{background:linear-gradient(180deg,#F4F7FA 0%,#FFFFFF 80%);color:var(--ink);border-bottom:1px solid var(--line)}
:root:not([data-style]) .bz-h1{color:var(--ink);font-size:clamp(34px,4.4vw,54px);letter-spacing:-.04em}
:root:not([data-style]) .bz-lede{color:var(--body);font-size:clamp(17px,1.4vw,19px)}
:root:not([data-style]) .bz-eyebrow{color:var(--teal);font-family:"IBM Plex Sans",system-ui,sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.11em}
:root:not([data-style]) .bz-ghost{height:52px;padding:0 24px;border-color:#D5DDE7;background:#FFFFFF;color:var(--ink);font-size:15.5px;font-weight:600}
:root:not([data-style]) .bz-ghost:hover{border-color:var(--ink);color:var(--ink)}
/* no terminal paths ("~/account/sign-in") above page titles; the primary buttons of the account and contact pages go navy like the rest */
:root:not([data-style]) .acc-kick,
:root:not([data-style]) .cx-path{display:none}
:root:not([data-style]) .lx-btn-primary,
:root:not([data-style]) .cx-btn--solid{background:var(--navy);border-color:var(--navy);color:#FFFFFF;box-shadow:none}
:root:not([data-style]) .lx-btn-primary:hover,
:root:not([data-style]) .cx-btn--solid:hover{background:#1B3148;border-color:#1B3148;color:#FFFFFF}


/* ── 2026-11-02, Examples: six example Skills; each card plays its own build inside (js/fmx-try.js) ── */
.ex-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:1100px;margin:0 auto}
@media (max-width:980px){.ex-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.ex-grid{grid-template-columns:1fr}}
.ex-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-direction:row-reverse}
.ex-name{margin:0;font-size:18px;font-weight:700;letter-spacing:-.015em;color:var(--ink)}
.ex-tag{flex:none;padding:3px 9px;border-radius:99px;font-size:12px;font-weight:600}
.ex-trade{background:#E8F4F1;color:var(--teal)}
.ex-ind{background:#EEF1FB;color:#1B4DA6}
.ex-svg{display:block;width:100%;height:auto;border-radius:10px;background:#F7F9FB;border:1px solid #EEF2F6}
.ex-say{margin:0;font-size:15px;line-height:1.55;color:var(--body)}
.ex-say::before{content:"\201C"}.ex-say::after{content:"\201D"}
.ex-sets{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.ex-sets li{display:flex;gap:6px;align-items:baseline;padding:4px 9px;border-radius:7px;background:#F4F7FA;font-size:13px;color:var(--mute)}
.ex-sets b{font-weight:600;color:var(--ink)}
.ex-play svg{width:14px;height:14px;fill:var(--teal)}
.ex-card{position:relative;display:flex;flex-direction:column;gap:12px;padding:20px 20px 18px;background:#FFFFFF;border:1px solid var(--line);
  border-radius:14px;overflow:hidden;transition:border-color .25s ease,box-shadow .25s ease}
.ex-card:hover{border-color:#BFE0D8;box-shadow:0 18px 40px -26px rgba(11,27,43,.3)}
.ex-card.demo{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal),0 18px 40px -26px rgba(11,27,43,.3)}
.ex-play{position:relative;z-index:3;margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:7px;padding:8px 14px 8px 12px;
  border:1px solid #BFE0D8;border-radius:9px;background:#FFFFFF;font:600 14px/1.2 "IBM Plex Sans",system-ui,sans-serif;color:var(--teal);cursor:pointer;
  transition:background .2s ease,border-color .2s ease,color .2s ease}
.ex-play:hover{background:#E8F4F1;border-color:var(--teal)}
.ex-play:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.ex-card.demo .ex-play{background:var(--teal);border-color:var(--teal);color:#FFFFFF}
.ex-card.demo .ex-play svg{fill:#FFFFFF}
.ex-again{display:none}
.ex-card.played .ex-go{display:none}
.ex-card.played .ex-again{display:inline}
/* the build, drawn over the card body: the button stays reachable below it */
.ex-demo{position:absolute;left:0;right:0;top:58px;bottom:62px;z-index:2;display:flex;flex-direction:column;gap:9px;padding:4px 20px 0;
  background:#FFFFFF;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .35s;overflow:hidden}
.ex-card.demo .ex-demo{opacity:1;visibility:visible;transition:opacity .35s ease}
.ex-demo b{display:block;margin-bottom:2px;font-size:11.5px;font-weight:600;letter-spacing:.02em}
.ex-d-say{padding:10px 12px;border:1px solid #D5DDE7;border-radius:10px;font-size:14px;line-height:1.5;color:var(--ink);min-height:74px}
.ex-d-say b{color:var(--mute)}
.ex-d-caret{display:inline-block;width:2px;height:1em;margin-left:1px;vertical-align:-2px;background:var(--teal);opacity:0}
.ex-card.d-type .ex-d-caret{opacity:1;animation:blink 1s steps(1) infinite}
.ex-d-q,.ex-d-a{padding:8px 11px;border-radius:10px;font-size:13.5px;line-height:1.45;opacity:0;transform:translateY(6px);
  transition:opacity .4s ease,transform .4s cubic-bezier(.2,.7,.2,1)}
.ex-d-q{margin-right:22px;background:#E8F4F1;border:1px solid #BFE0D8;color:var(--ink)}
.ex-d-q b{color:var(--teal)}
.ex-d-a{align-self:flex-end;max-width:80%;background:#F4F7FA;border:1px solid var(--line);color:var(--ink)}
.ex-d-a b{color:var(--mute)}
.ex-card.d-q .ex-d-q,.ex-card.d-a .ex-d-a{opacity:1;transform:none}
.ex-d-blocks{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;counter-reset:b}
.ex-d-blocks li{counter-increment:b;display:flex;align-items:center;gap:6px;padding:4px 9px 4px 5px;border:1px solid var(--line);border-radius:8px;
  font-size:12.5px;color:var(--ink);background:#FFFFFF;animation:fadeUp .35s cubic-bezier(.2,.7,.2,1)}
.ex-d-blocks li::before{content:counter(b);display:grid;place-items:center;width:17px;height:17px;border-radius:5px;background:#E8F4F1;color:var(--teal);font-size:11px;font-weight:700}
.ex-d-done{display:flex;align-items:center;gap:6px;margin:0;font-size:12.5px;font-weight:600;color:var(--teal);opacity:0;transition:opacity .4s ease}
.ex-d-done svg{flex:none;width:15px;height:15px;fill:none;stroke:var(--teal);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ex-card.d-done .ex-d-done{opacity:1}
/* the build has to fit in the card: nothing shrinks, everything a little tighter */
.ex-demo{gap:7px;padding-top:2px}
.ex-demo>*{flex:none}
.ex-demo b{font-size:11px;margin-bottom:1px}
.ex-d-say{min-height:0;padding:8px 11px;font-size:13.5px;line-height:1.45}
.ex-d-q,.ex-d-a{padding:6px 10px;font-size:13px;line-height:1.4}
.ex-d-blocks{gap:5px}
.ex-d-blocks li{padding:3px 8px 3px 4px;font-size:12px}
.ex-card{min-height:450px}
.ex-d-say b,.ex-d-a b{display:none}
/* the result, after the build: what the Skill draws is drawn in from the left, then "Skill ready" */
.ex-fig{position:relative}
.ex-ready{position:absolute;left:8px;top:8px;display:inline-flex;align-items:center;gap:5px;padding:3px 9px 3px 6px;border-radius:99px;
  background:var(--teal);color:#FFFFFF;font-size:12px;font-weight:600;opacity:0;transform:translateY(-4px);transition:opacity .4s ease,transform .4s ease}
.ex-ready svg{width:13px;height:13px;fill:none;stroke:#FFFFFF;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.ex-card.result{border-color:#BFE0D8}
.ex-card.result .ex-ready{opacity:1;transform:none;transition-delay:1.1s}
.ex-card.result .ex-svg .dr{animation:exDraw 1.2s cubic-bezier(.4,0,.2,1) both}
.ex-card.result .ex-svg .dr-o{animation-delay:.3s}
@keyframes exDraw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion:reduce){.ex-card.result .ex-svg .dr{animation:none}.ex-card.result .ex-ready{transition:none}}