/* Baroq design system (design.py) */
@font-face { font-family:"Geist"; src:url("/static/site/sans.woff2") format("woff2"); font-weight:100 900; font-display:swap; }
@font-face { font-family:"Baroq Serif"; src:url("/static/site/serif.woff2") format("woff2"); font-weight:400 800; font-display:swap; }
:root {
  --ds-sans:"Geist", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --ds-mono:ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --ds-serif:"Baroq Serif", "Iowan Old Style", Palatino, Georgia, serif;
  --ds-fs-2xs:11px; --ds-fs-xs:12px; --ds-fs-sm:13.5px; --ds-fs-base:15px; --ds-fs-md:17px; --ds-fs-lg:20px; --ds-fs-xl:26px;
  --ds-space-1: 4px; --ds-space-2: 8px; --ds-space-3: 12px; --ds-space-4: 16px; --ds-space-5: 24px; --ds-space-6: 32px; --ds-space-7: 48px; --ds-space-8: 72px;
  --ds-r-xs:5px; --ds-r-sm:8px; --ds-r:12px; --ds-r-lg:18px; --ds-r-xl:26px; --ds-r-pill:999px;
  --ds-ease:cubic-bezier(0.2, 0.8, 0.2, 1); --ds-fast:0.14s; --ds-slow:0.32s;
  --ds-gold-grad:linear-gradient(180deg, #e9c77e 0%, #d3a24a 100%);
  --ds-on-gold:#17120a;

  --ds-bg:#f6f6f3; --ds-sunk:#eeeeea; --ds-surface:#ffffff; --ds-raised:#f4f4f1; --ds-overlay:rgba(255, 255, 255, 0.82);
  --ds-line:#dfdfda; --ds-line-2: #ebebe7; --ds-line-strong:#c9c9c3;
  --ds-text:#101216; --ds-text-2: #3a3e46; --ds-text-3: #61666f; --ds-inverse:#f6f6f3;
  --ds-gold:#b0812a; --ds-gold-text:#7a5810; --ds-gold-wash:#f5ecd8; --ds-gold-line:#e2cc9d;
  --ds-up:#12784a; --ds-up-bg:#e2f1e8; --ds-down:#b3362c; --ds-down-bg:#f8e6e3;
  --ds-info:#1d62c4; --ds-info-bg:#e5eefb; --ds-warn:#9a5a00; --ds-warn-bg:#fbf0dc;
  --ds-demo:#1d62c4; --ds-live:#c0302c; --ds-door:#1d62c4;
  --ds-hover:rgba(16, 18, 22, 0.045); --ds-hover-2: rgba(16, 18, 22, 0.08);
  --ds-night:#0b0d11; --ds-night-2: #13161c; --ds-night-line:#242932; --ds-on-night:#f1f2f4; --ds-on-night-2: #a9b0ba;
  --ds-grid-line:rgba(16, 18, 22, 0.05);
  --ds-shadow-1: 0 1px 2px rgba(16, 18, 22, 0.05);
  --ds-shadow-2: 0 1px 2px rgba(16, 18, 22, 0.04), 0 12px 32px -16px rgba(16, 18, 22, 0.18);
  --ds-shadow-3: 0 1px 2px rgba(16, 18, 22, 0.04), 0 40px 90px -40px rgba(16, 18, 22, 0.32);
  --ds-sheen:linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 60%);
  --ds-glow:radial-gradient(60% 55% at 50% 0%, rgba(176, 129, 42, 0.13), rgba(176, 129, 42, 0) 70%);
  color-scheme:light;
}
@media screen and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --ds-bg:#090b0f; --ds-sunk:#06080b; --ds-surface:#0f1217; --ds-raised:#151922; --ds-overlay:rgba(9, 11, 15, 0.74);
  --ds-line:#222833; --ds-line-2: #181c24; --ds-line-strong:#323a47;
  --ds-text:#eef1f5; --ds-text-2: #bac1cb; --ds-text-3: #87909c; --ds-inverse:#090b0f;
  --ds-gold:#d8ac56; --ds-gold-text:#e7c47c; --ds-gold-wash:#211b10; --ds-gold-line:#4d3d1d;
  --ds-up:#3ecf8a; --ds-up-bg:#0d2619; --ds-down:#ff6f63; --ds-down-bg:#321311;
  --ds-info:#63a3f7; --ds-info-bg:#0f1d33; --ds-warn:#f3b453; --ds-warn-bg:#2a1e0b;
  --ds-demo:#63a3f7; --ds-live:#ff6f63; --ds-door:#7db1e8;
  --ds-hover:rgba(255, 255, 255, 0.045); --ds-hover-2: rgba(255, 255, 255, 0.085);
  --ds-night:#040507; --ds-night-2: #0e1116; --ds-night-line:#1f242d; --ds-on-night:#eef1f5; --ds-on-night-2: #a3abb6;
  --ds-grid-line:rgba(255, 255, 255, 0.035);
  --ds-shadow-1: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 1px 2px rgba(0, 0, 0, 0.4);
  --ds-shadow-2: 0 1px 0 rgba(255, 255, 255, 0.035) inset, 0 16px 40px -20px rgba(0, 0, 0, 0.8);
  --ds-shadow-3: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 50px 100px -40px rgba(0, 0, 0, 0.95);
  --ds-sheen:linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0) 55%);
  --ds-glow:radial-gradient(60% 55% at 50% 0%, rgba(216, 172, 86, 0.14), rgba(216, 172, 86, 0) 70%);
  color-scheme:dark;
} }
:root[data-theme="dark"] {
  --ds-bg:#090b0f; --ds-sunk:#06080b; --ds-surface:#0f1217; --ds-raised:#151922; --ds-overlay:rgba(9, 11, 15, 0.74);
  --ds-line:#222833; --ds-line-2: #181c24; --ds-line-strong:#323a47;
  --ds-text:#eef1f5; --ds-text-2: #bac1cb; --ds-text-3: #87909c; --ds-inverse:#090b0f;
  --ds-gold:#d8ac56; --ds-gold-text:#e7c47c; --ds-gold-wash:#211b10; --ds-gold-line:#4d3d1d;
  --ds-up:#3ecf8a; --ds-up-bg:#0d2619; --ds-down:#ff6f63; --ds-down-bg:#321311;
  --ds-info:#63a3f7; --ds-info-bg:#0f1d33; --ds-warn:#f3b453; --ds-warn-bg:#2a1e0b;
  --ds-demo:#63a3f7; --ds-live:#ff6f63; --ds-door:#7db1e8;
  --ds-hover:rgba(255, 255, 255, 0.045); --ds-hover-2: rgba(255, 255, 255, 0.085);
  --ds-night:#040507; --ds-night-2: #0e1116; --ds-night-line:#1f242d; --ds-on-night:#eef1f5; --ds-on-night-2: #a3abb6;
  --ds-grid-line:rgba(255, 255, 255, 0.035);
  --ds-shadow-1: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 1px 2px rgba(0, 0, 0, 0.4);
  --ds-shadow-2: 0 1px 0 rgba(255, 255, 255, 0.035) inset, 0 16px 40px -20px rgba(0, 0, 0, 0.8);
  --ds-shadow-3: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 50px 100px -40px rgba(0, 0, 0, 0.95);
  --ds-sheen:linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0) 55%);
  --ds-glow:radial-gradient(60% 55% at 50% 0%, rgba(216, 172, 86, 0.14), rgba(216, 172, 86, 0) 70%);
  color-scheme:dark;
}

html { -webkit-text-size-adjust:100%; text-rendering:optimizeLegibility; }
body { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; font-feature-settings:"cv11" 1, "ss03" 1; }
::selection { background:color-mix(in srgb, var(--ds-gold) 30%, transparent); color:var(--ds-text); }
:focus-visible { outline:2px solid var(--ds-gold); outline-offset:2px; }
* { scrollbar-width:thin; scrollbar-color:var(--ds-line-strong) transparent; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:var(--ds-line-strong); border-radius:10px; border:2px solid transparent; background-clip:padding-box; }
::-webkit-scrollbar-track { background:transparent; }
table, .num, .tnum { font-variant-numeric:tabular-nums lining-nums; }
input, select, textarea, button { accent-color:var(--ds-gold); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; } }

/* BaroqTech public site. Redesign of 11 October 2026 on the shared Baroq design system (design.py).
   Gold keeps one meaning: passed (and the brand). Light by default, deep blue-black when the device asks for dark.
   No script, no inline style. The local variables below are aliases of the design tokens. */
:root {
  --paper:var(--ds-bg); --card:var(--ds-surface); --sunk:var(--ds-sunk); --ink:var(--ds-text); --ink-2: var(--ds-text-2); --muted:var(--ds-text-3);
  --rule:var(--ds-line); --rule-2: var(--ds-line-2); --gold:var(--ds-gold); --gold-ink:var(--ds-gold-text); --gold-wash:var(--ds-gold-wash);
  --night:var(--ds-night); --night-2: var(--ds-night-2); --night-rule:var(--ds-night-line); --on-night:var(--ds-on-night); --on-night-2: var(--ds-on-night-2);
  --no:var(--ds-text-3); --idle:var(--ds-line); --yes:var(--ds-gold); --up:var(--ds-up); --down:var(--ds-down); --up-bg:var(--ds-up-bg); --down-bg:var(--ds-down-bg);
  --lift:var(--ds-shadow-3);
  --ui:var(--ds-sans); --display:var(--ds-sans); --mark:var(--ds-serif);
  --gutter:28px; --section:128px;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:76px; }
body { margin:0; background:var(--paper); color:var(--ink); font:400 18px/1.6 var(--ui); }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin:0; padding:0; }
h1, h2 { font-family:var(--display); font-weight:640; text-wrap:balance; color:var(--ink); }
h1 { font-size:clamp(46px, 7.4vw, 104px); line-height:0.98; letter-spacing:-0.048em; }
.h1s { font-size:clamp(40px, 5.4vw, 72px); line-height:1.02; letter-spacing:-0.042em; }
h2 { font-size:clamp(32px, 4.2vw, 56px); line-height:1.04; letter-spacing:-0.038em; }
h3 { font-size:20px; line-height:1.3; font-weight:600; letter-spacing:-0.014em; }
p { text-wrap:pretty; }
a { color:var(--gold-ink); text-decoration-thickness:1px; text-underline-offset:4px; text-decoration-color:color-mix(in srgb, currentColor 45%, transparent); transition:color var(--ds-fast) ease, text-decoration-color var(--ds-fast) ease; }
a:hover { color:var(--ink); text-decoration-color:currentColor; }
:focus-visible { outline:2px solid var(--gold); outline-offset:3px; border-radius:6px; }
.skip { position:absolute; right:-9999px; top:8px; background:var(--card); color:var(--ink); padding:10px 14px; border-radius:10px; z-index:30; } .skip:focus { right:8px; }
.wrap { max-width:1200px; margin:0 auto; padding-right:var(--gutter); padding-left:var(--gutter); }
.narrow { max-width:800px; }
.block { padding-top:var(--section); padding-bottom:var(--section); }
section.block + section.block, section.block + .about { padding-top:0; }   /* two light sections in a row share one gap */
.lead { font-size:clamp(19px, 1.6vw, 22px); line-height:1.55; color:var(--ink-2); max-width:34em; letter-spacing:-0.012em; }
.ideas-line { font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
.fine { font-size:14.5px; line-height:1.55; color:var(--muted); }
.text-link { font-weight:550; }
.text-link::after { content:"\2192"; display:inline-block; margin-right:0.35em; transition:transform var(--ds-fast) var(--ds-ease); }
.text-link:hover::after { transform:translateX(-3px); }

/* the owner's "View as customer" banner */
.viewbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 16px; padding:8px 16px; background:var(--gold); color:var(--ds-on-gold, #111); font-size:14px; font-weight:550; text-align:center; }
.viewbar a { color:inherit; text-decoration:underline; font-weight:650; white-space:nowrap; }
/* header: slim glass bar, one row on every width */
/* top bar a touch more see-through, same frosted glass as the menus (Igor, 18 Oct 2026) */
.top { position:sticky; top:0; z-index:20; background:var(--ds-overlay); background:color-mix(in srgb, var(--ds-bg) 64%, transparent); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid color-mix(in srgb, var(--rule) 80%, transparent); }
.topin { display:flex; align-items:center; justify-content:space-between; gap:12px 32px; min-height:64px; }
.brand { position:relative; display:flex; align-items:center; text-decoration:none; color:var(--ink); flex:none; }
.brand:hover { color:var(--ink); }
.brand .dots9 { flex:none; margin-left:12px; } .brand.small .dots9 { width:18px; height:18px; margin-left:10px; }   /* the logo mark before BAROQ (Igor, 18 Oct 2026) */
/* BAROQ: serif capitals, wide tracking; on hover or keyboard focus the letters warm to gold one by one and a quiet card
   says what each one stands for (wide screens with a pointer only; the footer always prints the words) */
.brand .mark { display:inline-flex; font:600 21px/1 var(--mark); letter-spacing:0.2em; margin-left:-0.2em; }
.brand .mark > span { font-weight:inherit; transition:color var(--ds-slow) var(--ds-ease); }
.brand:hover .mark > span, .brand:focus-visible .mark > span { color:var(--gold); }
.brand .mark > span:nth-child(2), .brand .stands > span:nth-child(2) { transition-delay:40ms; }
.brand .mark > span:nth-child(3), .brand .stands > span:nth-child(3) { transition-delay:80ms; }
.brand .mark > span:nth-child(4), .brand .stands > span:nth-child(4) { transition-delay:120ms; }
.brand .mark > span:nth-child(5), .brand .stands > span:nth-child(5) { transition-delay:160ms; }
.brand .stands { position:absolute; top:calc(100% + 14px); right:-16px; display:grid; gap:7px; padding:14px 18px; border:1px solid var(--rule); border-radius:14px; background:var(--card); box-shadow:var(--ds-shadow-2); font:500 13.5px/1.2 var(--ui); letter-spacing:0.01em; color:var(--ink-2); white-space:nowrap; opacity:0; visibility:hidden; transform:translateY(-4px); pointer-events:none; transition:opacity var(--ds-slow) var(--ds-ease), transform var(--ds-slow) var(--ds-ease), visibility 0s linear var(--ds-slow); }
.brand .stands > span { opacity:0; transform:translateX(4px); transition:opacity var(--ds-slow) var(--ds-ease), transform var(--ds-slow) var(--ds-ease); }
.brand .stands .i { color:var(--gold); font-weight:650; }
@media (hover: hover) and (min-width: 900px) {
  .brand:hover .stands, .brand:focus-visible .stands { opacity:1; visibility:visible; transform:none; transition-delay:0s; }
  .brand:hover .stands > span, .brand:focus-visible .stands > span { opacity:1; transform:none; }
}
@media (hover: none), (max-width: 899px) { .brand .stands { display:none; } }
.brand.small { color:var(--ink); } .brand.small .mark { font-size:19px; } .brand.small .stands { display:none; }
.fstands { color:var(--muted); font-size:13px; letter-spacing:0.02em; } .fstands .i { color:var(--gold); font-weight:650; }
@media (prefers-reduced-motion: reduce) { .brand .mark > span, .brand .stands, .brand .stands > span { transition:none; } }
.top nav { display:flex; align-items:center; gap:4px 24px; font-size:14.5px; min-width:0; }
.top nav a { color:var(--ink-2); text-decoration:none; padding:8px 0; white-space:nowrap; position:relative; } .top nav a:hover { color:var(--ink); }
.top nav a:not(.cta):not(.door)::after { content:""; position:absolute; right:0; left:0; bottom:2px; height:1px; background:var(--gold); transform:scaleX(0); transform-origin:right; transition:transform var(--ds-slow) var(--ds-ease); }
.top nav a:not(.cta):not(.door):hover::after { transform:scaleX(1); }
.top nav a.lang { color:var(--muted); }
/* the gold price ticker on top of the bar: one quiet line, prices drift slowly to the left (the motion only where allowed) */
.tick { display:flex; align-items:center; gap:12px; height:30px; padding:0 var(--gutter); border-bottom:1px solid color-mix(in srgb, var(--gold) 28%, transparent); background:color-mix(in srgb, var(--gold) 7%, transparent); font:500 12.5px/1 var(--ds-mono); letter-spacing:0.02em; color:var(--ink-2); }
.tick-win { flex:1; min-width:0; overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image:linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.tick-run { display:inline-flex; white-space:nowrap; } .tick-dup { display:inline-flex; }
.tk { padding-left:34px; } .tk b { color:var(--gold); font-weight:600; margin-left:4px; }
.tk .up { color:var(--ds-up); } .tk .dn { color:var(--ds-down); } .tk .fl { color:var(--muted); }
/* like a bank's rate board: only the digits that changed light up green or red, then fade back */
.tk .tp { font-style:normal; } .tk .tp em { font-style:normal; border-radius:2px; transition:background-color 1.2s ease, color 1.2s ease; }
.tk .tp em.fu { color:var(--ds-up); background:color-mix(in srgb, var(--ds-up) 20%, transparent); transition:none; }
.tk .tp em.fd { color:var(--ds-down); background:color-mix(in srgb, var(--ds-down) 20%, transparent); transition:none; }
.tick-live { flex:none; width:7px; height:7px; border-radius:50%; background:var(--ds-up); box-shadow:0 0 0 3px color-mix(in srgb, var(--ds-up) 22%, transparent); }
/* the top bar, laid out like Igor's reference (17 Oct 2026): logo left, the menu in the middle with quiet dropdowns, then
   language, log-in and the one gold button on the right. Wide screens only; a phone keeps the scrolling row of labels. */
.nd { position:relative; display:flex; align-items:center; }
.nd-menu { display:none; }
@media (min-width: 901px) {
  .top nav { display:contents; }
  .top nav > .nd:first-child, .top nav > a:first-child { margin-right:auto; }
  .top nav > a.door { order:3; margin-right:auto; } .top nav > a.cta { order:4; } .topin > .langs { order:5; }   /* language on the far right (Igor, 17 Oct) */
  .topin { column-gap:26px; }
  .nd > a:first-child { padding-left:15px; }
  .nd > a:first-child::before { content:""; position:absolute; left:2px; top:50%; width:5px; height:5px; border-left:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:translateY(-75%) rotate(45deg); opacity:0.6; transition:transform var(--ds-slow) var(--ds-ease); }
  html:not(.mm) .nd:hover > a:first-child::before, html:not(.mm) .nd:focus-within > a:first-child::before, .nd.open > a:first-child::before { transform:translateY(-25%) rotate(225deg); }
  /* the mega menu (Igor, 24 Oct 2026): each group opens one wide frosted panel under the whole bar, the group and a line
     about it on the left, its pages with one line each on the right; the pages rise in one after another as it opens */
  .topin { position:relative; }
  .nd { position:static; }
  .nd-menu { position:absolute; top:100%; right:var(--gutter); left:var(--gutter); z-index:40; display:grid; grid-template-columns:minmax(180px, 250px) minmax(0, 1fr); gap:0 32px; padding:26px 28px; background:var(--card); border:1px solid var(--rule); border-radius:20px; box-shadow:var(--ds-shadow-3); opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity var(--ds-slow) var(--ds-ease), transform var(--ds-slow) var(--ds-ease), visibility 0s linear var(--ds-slow); }
  .nd-menu::before { content:""; position:absolute; right:0; left:0; top:-18px; height:18px; }   /* the gap the pointer crosses */
  /* with script (html.mm, set by /static/menu.js) a panel opens only on .open: hover intent, delays, click and Esc; without it, hover and focus */
  html:not(.mm) .nd:hover > .nd-menu, html:not(.mm) .nd:focus-within > .nd-menu, .nd.open > .nd-menu { opacity:1; visibility:visible; transform:none; transition-delay:0s; }
  .nd.open > .nd-menu { transition:opacity .55s var(--ds-ease), transform .55s var(--ds-ease), visibility 0s; }   /* opens slowly (Igor, 25 Oct 2026), closes in the usual time */
  .nd-menu.snap { transition:none; }
  /* solid, with a soft gold light in the corner: a panel this wide must stay readable over a headline (the see-through
     drop-downs of 18 Oct showed the page through it, and a blur cannot work inside the blurred bar) */
  .nd-menu { background:radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--gold) 8%, var(--card)), var(--card) 48%); }
  .mm-in { display:flex; flex-direction:column; gap:10px; padding:6px 0 6px 28px; border-left:1px solid var(--rule-2); color:var(--muted); font-size:14.5px; line-height:1.5; white-space:normal; }
  .mm-in strong { font:640 24px/1.1 var(--display); letter-spacing:-0.02em; color:var(--ink); }
  .mm-in::after { content:""; width:36px; height:2px; margin-top:4px; border-radius:2px; background:var(--ds-gold-grad, var(--gold)); }
  .mm-list { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:4px 10px; margin:0; padding:0; list-style:none; }
  .top nav .nd-menu a { display:grid; gap:3px; padding:12px 14px 12px 34px; border-radius:12px; white-space:normal; color:var(--ink-2); }
  .top nav .nd-menu a strong { font-weight:600; font-size:15px; color:var(--ink); }
  .top nav .nd-menu a small { font-size:13.5px; line-height:1.4; color:var(--muted); }
  .top nav .nd-menu a::after { content:"\2192"; position:absolute; right:auto; left:14px; top:12px; bottom:auto; height:auto; background:none; color:var(--gold); transform:translateX(4px); opacity:0; transition:opacity var(--ds-fast) var(--ds-ease), transform var(--ds-fast) var(--ds-ease); }
  .top nav .nd-menu a:hover, .top nav .nd-menu a:focus-visible { background:color-mix(in srgb, var(--gold) 9%, var(--rule-2)); }
  .top nav .nd-menu a:hover::after, .top nav .nd-menu a:focus-visible::after { opacity:1; transform:none; }
  html:not(.mm) .nd:hover > a:first-child, html:not(.mm) .nd:focus-within > a:first-child, .nd.open > a:first-child { color:var(--ink); }
  .nd.open > a:first-child::after { transform:scaleX(1); }
  .mm-list li:first-child a { background:color-mix(in srgb, var(--gold) 7%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--gold) 28%, transparent); }   /* the section's own page: start here */
  .topin nav a.door { border:0; background:none; padding:8px 0; font-weight:500; color:var(--ink-2); } .topin nav a.door:hover { color:var(--ink); }
  .top nav a.cta::after { content:"\2192"; display:inline-block; transition:transform var(--ds-fast) var(--ds-ease); } .top nav a.cta:hover::after { transform:translateX(-3px); }
}
@media (min-width: 901px) and (prefers-reduced-motion: reduce) { .nd-menu, .nd.open > .nd-menu, .nd > a:first-child::before { transition:none; } }
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  html:not(.mm) .nd:hover .mm-list li, html:not(.mm) .nd:focus-within .mm-list li, html:not(.mm) .nd:hover .mm-in, html:not(.mm) .nd:focus-within .mm-in,
  .nd.open .mm-list li, .nd.open .mm-in { animation:mm-rise 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
  .mm-list li:nth-child(2) { animation-delay:30ms; } .mm-list li:nth-child(3) { animation-delay:60ms; } .mm-list li:nth-child(4) { animation-delay:90ms; }
  .mm-list li:nth-child(5) { animation-delay:120ms; } .mm-list li:nth-child(6) { animation-delay:150ms; } .mm-list li:nth-child(n + 7) { animation-delay:180ms; }
  @keyframes mm-rise { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
}
/* the Menu button: a phone only (wide screens show the bar); the box itself is hidden but stays reachable by keyboard */
.mnav-t { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.mnav-b { display:none; }
.top nav a.door { border:1px solid var(--rule); border-radius:999px; padding:6px 14px; color:var(--ink); font-weight:550; background:var(--card); transition:border-color var(--ds-fast) ease; }
.top nav a.door:hover { border-color:var(--ds-line-strong); }
.top a.door.phone, .top a.cta.phone { display:none; }
.crumbs { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; padding-top:20px; color:var(--muted); font-size:14px; }
.crumbs a { color:var(--ink-2); text-decoration:none; } .crumbs a:hover { color:var(--ink); text-decoration:underline; }
.crumbs [aria-current] { color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.cta { display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--ds-gold-grad); color:var(--ds-on-gold); border:0; border-radius:999px; padding:12px 24px; min-height:48px; font:600 16.5px/1.3 var(--ui); letter-spacing:-0.01em; cursor:pointer; text-decoration:none; white-space:nowrap; box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 1px 2px rgba(0, 0, 0, 0.2), 0 8px 24px -10px color-mix(in srgb, var(--ds-gold) 70%, transparent); transition:transform var(--ds-fast) var(--ds-ease), box-shadow var(--ds-fast) ease, filter var(--ds-fast) ease; }
.cta:hover { color:var(--ds-on-gold); filter:brightness(1.06); transform:translateY(-1px); box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 2px 4px rgba(0, 0, 0, 0.2), 0 14px 30px -12px color-mix(in srgb, var(--ds-gold) 80%, transparent); }
.cta:active { transform:none; filter:brightness(0.97); }
.cta.dark { background:var(--ds-gold-grad); color:var(--ds-on-gold); }
.top nav a.cta { padding:7px 16px; min-height:36px; font-size:14px; color:var(--ds-on-gold); }

/* hero: a quiet grid and a gold glow behind a centred statement, then the instrument */
.hero { position:relative; isolation:isolate; overflow:hidden; }
.hero::before { content:""; position:absolute; inset:0; z-index:-2; background-image:linear-gradient(var(--ds-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--ds-grid-line) 1px, transparent 1px); background-size:56px 56px; background-position:center top; -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 18%, #000 30%, transparent 75%); mask-image:radial-gradient(ellipse 70% 60% at 50% 18%, #000 30%, transparent 75%); }
.hero::after { content:""; position:absolute; inset:0; z-index:-1; background:var(--ds-glow); pointer-events:none; }
.heroin { display:flex; flex-direction:column; align-items:center; gap:80px; padding-top:104px; padding-bottom:104px; }
.pitch { min-width:0; display:flex; flex-direction:column; gap:22px; }
.hero .pitch { align-items:center; text-align:center; max-width:980px; }
.hero .pitch h1 { max-width:12.5ch; background:linear-gradient(180deg, var(--ink) 55%, color-mix(in srgb, var(--ink) 72%, var(--paper))); -webkit-background-clip:text; background-clip:text; color:transparent; padding-bottom:0.06em; }
.hero .pitch .lead { max-width:33em; }
.hero .pitch .join { justify-content:center; width:100%; max-width:560px; margin-top:10px; }
.hero .pitch .fine { max-width:36em; }
.eyebrow { display:inline-flex; align-items:center; gap:10px; padding:6px 12px 6px 14px; border-radius:999px; border:1px solid var(--rule); background:color-mix(in srgb, var(--card) 70%, transparent); font:500 12.5px/1.2 var(--ds-mono); letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-2); box-shadow:var(--ds-shadow-1); }
.live-dot { width:7px; height:7px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent); flex:none; }
@media screen and (prefers-reduced-motion: no-preference) {
  /* the mark's centre dot fades up once when the page opens, very softly and without a glow (Igor, 18 Oct 2026: "very subtle") */
  @keyframes dots9-in { from { opacity:0.6; } to { opacity:1; } }
  .brand .dots9 .c { animation:dots9-in 1.2s ease-out 0.2s 1 both; }
  .tick-live { animation:tick-pulse 1.6s ease-in-out infinite; } @keyframes tick-pulse { 50% { opacity:0.35; } }
  .tick-run { animation:tick-drift 150s linear infinite; } .tick:hover .tick-run { animation-play-state:paused; }
  @keyframes tick-drift { from { transform:none; } to { transform:translateX(50%); } }
  .live-dot { animation:ds-pulse 2.4s ease-in-out infinite; }
  @keyframes ds-pulse { 50% { box-shadow:0 0 0 6px color-mix(in srgb, var(--gold) 0%, transparent); } }
  /* the first load, about 1.8 s, one beat after another: the header drops in and the ingot's dots light up; the grid fades in and the
     gold glow blooms behind the headline; the eyebrow, headline, lead and form rise in turn on a long soft ease; the light sweeps the
     headline once as it lands; the watch card settles forward out of a slight tilt, its gold edge draws from the middle, the marks
     light up in a diagonal wave and the passed ones ring once. Then only the slow loops below stay. */
  .hero { --intro-ease:cubic-bezier(0.16, 1, 0.3, 1); }
  .hero .pitch > * { animation:ds-rise 0.9s var(--intro-ease) both; }
  .hero .pitch > :nth-child(1) { animation-delay:100ms; } .hero .pitch > :nth-child(2) { animation-delay:240ms; } .hero .pitch > :nth-child(3) { animation-delay:320ms; }
  .hero .pitch > :nth-child(4) { animation-delay:420ms; } .hero .pitch > :nth-child(n + 5) { animation-delay:500ms; }
  .watch-card { animation:ds-settle 1.2s var(--intro-ease) 0.42s both; }
  @keyframes ds-rise { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:none; } }
  @keyframes ds-rise-h { from { opacity:0; transform:translateY(30px) scale(0.985); } to { opacity:1; transform:none; } }
  @keyframes ds-settle { from { opacity:0; transform:perspective(1600px) translateY(56px) rotateX(12deg) scale(0.96); } to { opacity:1; transform:none; } }
  @keyframes ds-fade { from { opacity:0; } to { opacity:1; } }
  @keyframes ds-bloom { from { opacity:0; transform:scale(0.82); } to { opacity:1; transform:none; } }
  @keyframes ds-draw { from { transform:scaleX(0); } to { transform:none; } }
  @keyframes ds-ring { from { box-shadow:0 0 0 0 color-mix(in srgb, var(--gold) 55%, transparent); } to { box-shadow:0 0 0 9px color-mix(in srgb, var(--gold) 0%, transparent); } }
  @keyframes ds-drop { from { opacity:0; transform:translateY(-14px); } to { opacity:1; transform:none; } }
  @keyframes ds-pop { from { opacity:0; transform:scale(0); } to { opacity:1; transform:none; } }
  .stopped .row { animation:ds-slide 0.7s var(--intro-ease) both; }
  .stopped .row:nth-of-type(1) { animation-delay:0.95s; } .stopped .row:nth-of-type(2) { animation-delay:1.02s; } .stopped .row:nth-of-type(3) { animation-delay:1.09s; }
  .stopped .row:nth-of-type(4) { animation-delay:1.16s; } .stopped .row:nth-of-type(n + 5) { animation-delay:1.23s; }
  .stopped .wc-more .row { animation:none; }   /* the scores under "Show more" just appear when it opens */
  @keyframes ds-slide { from { opacity:0; transform:translateX(-14px); } to { opacity:1; transform:none; } }
  .marks i.yes { animation:mark-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both, ds-ring 1.3s ease-out both; }
  /* the header and the ingot only when home.js says this is the first view in this tab (html.entry), and nothing at all moves while the
     page sits in a background tab: html.wait holds the entrance until someone looks at it (no script: it simply plays) */
  html.entry .top { animation:ds-drop 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
  html.entry .top .mark > span { animation:ds-rise-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
  html.entry .top .mark > span:nth-child(1) { animation-delay:120ms; }
  html.entry .top .mark > span:nth-child(2) { animation-delay:170ms; }
  html.entry .top .mark > span:nth-child(3) { animation-delay:220ms; }
  html.entry .top .mark > span:nth-child(4) { animation-delay:270ms; }
  html.entry .top .mark > span:nth-child(5) { animation-delay:320ms; }
  @keyframes ds-rise-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
  html.wait .top, html.wait .top .mark > span, html.wait .hero::before, html.wait .hero::after, html.wait .hero .pitch > *, html.wait .watch-card,
  html.wait .watch-card::before, html.wait .marks i, html.wait .stopped .row { animation-play-state:paused; }
  /* the watch card sits below the fold on most screens: its beats (settle, edge, marks, reasons) wait until it first comes into view */
  html.reveal-on .watch-card:not(.in), html.reveal-on .watch-card:not(.in)::before, html.reveal-on .watch-card:not(.in) .marks i,
  html.reveal-on .watch-card:not(.in) .stopped .row { animation-play-state:paused; }
  /* the home page's look, kept moving: the grid glides, the glow breathes, a light runs through the headline and along the card's
     edge. Those loops run only while someone is looking: home.js (HOME_JS) sets html.motion-on while the tab is visible and the
     hero is on screen, and they stay paused otherwise (also when the script does not run). The entrance (rise-in, the marks, blocks
     rising as they come into view) plays once per visit: on a return in the same tab session html.seen turns it off. Only transform,
     opacity and background-position move, the two big hero layers sit on their own compositor layer, and nothing moves when the
     device asks for reduced motion (this whole block is inside that media query). */
  .hero::before { will-change:transform; animation:ds-fade 1.4s ease-out both, ds-glide 48s ease-in-out infinite alternate; animation-play-state:running, paused; }
  @keyframes ds-glide { to { transform:translate3d(56px, 56px, 0); } }
  .hero::after { will-change:transform, opacity; transform-origin:50% 22%; animation:ds-bloom 1.8s cubic-bezier(0.16, 1, 0.3, 1) backwards, ds-breathe 9s ease-in-out 1.8s infinite; animation-play-state:running, paused; }
  @keyframes ds-breathe { 50% { opacity:0.78; transform:scale(1.06); } }
  .hero .heroin .pitch > h1 { background-image:linear-gradient(100deg, transparent 42%, color-mix(in srgb, var(--gold) 60%, var(--ink)) 50%, transparent 58%),
                                                linear-gradient(180deg, var(--ink) 55%, color-mix(in srgb, var(--ink) 72%, var(--paper)));
                              background-size:250% 100%, 100% 100%; background-repeat:no-repeat; background-position:220% 0, 0 0;
                              animation:ds-rise-h 1s var(--intro-ease) both, ds-sheen 14s linear infinite; animation-delay:180ms, 1.1s; animation-play-state:running, paused; }
  @keyframes ds-sheen { 0% { background-position:220% 0, 0 0; } 18% { background-position:-120% 0, 0 0; } 100% { background-position:-120% 0, 0 0; } }
  .watch-card::before { background-size:45% 100%; background-repeat:no-repeat; background-position:-100% 0; transform-origin:50% 50%;
                       animation:ds-draw 0.9s cubic-bezier(0.16, 1, 0.3, 1) 1s both, ds-run 8s ease-in-out 2.4s infinite; animation-play-state:running, paused; }
  @keyframes ds-run { 0% { background-position:-100% 0; } 55% { background-position:200% 0; } 100% { background-position:200% 0; } }
  .live-dot { animation-play-state:paused; }
  html.motion-on .hero::before, html.motion-on .hero::after, html.motion-on .watch-card::before, html.motion-on .live-dot,
  html.motion-on .hero .heroin .pitch > h1 { animation-play-state:running; }
  html.seen .hero .pitch > *, html.seen .watch-card, html.seen .marks i, html.seen .stopped .row { animation-name:none; }
  html.seen .hero .heroin .pitch > h1 { animation-name:none, ds-sheen; } html.seen .hero::before { animation-name:none, ds-glide; }
  html.seen .hero::after { animation-name:none, ds-breathe; } html.seen .watch-card::before { animation-name:none, ds-run; }
  .partgrid > a { transition:border-color var(--ds-fast) ease, transform var(--ds-fast) var(--ds-ease), box-shadow var(--ds-fast) ease; }
  .partgrid > a:hover { transform:translateY(-3px); box-shadow:var(--ds-shadow-2); }
  html.reveal-on :is(.block > .intro, .partgrid, .tally, .story .cols2, .about .who, .block > .chart, .lp-sec > *) { transition:opacity 0.8s var(--ds-ease), transform 0.8s var(--ds-ease); }
  html.reveal-on :is(.block > .intro, .partgrid, .tally, .story .cols2, .about .who, .block > .chart, .lp-sec > *):not(.in) { opacity:0; transform:translateY(14px); }
}
/* a centred one-line form: the label stays for screen readers, the placeholder shows what goes in */
.hero .join .field label, .joinin .join .field label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.join, .ask { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; margin-top:4px; }
.ask { flex-direction:column; align-items:stretch; gap:14px; }
.field { flex:1 1 250px; min-width:0; display:flex; flex-direction:column; gap:6px; text-align:right; }
.ask .field, .join .field { flex:none; }
.field label { font-size:13.5px; color:var(--muted); font-weight:500; }
.field input, .field textarea, .field select { font:inherit; font-size:16.5px; padding:12px 18px; min-height:50px; width:100%; border:1px solid var(--rule); border-radius:14px; background:var(--card); color:var(--ink); box-shadow:var(--ds-shadow-1); transition:border-color var(--ds-fast) ease, box-shadow var(--ds-fast) ease; }
.join .field input { border-radius:999px; padding-right:22px; }
.field input:hover, .field textarea:hover, .field select:hover { border-color:var(--ds-line-strong); }
.field input:focus, .field textarea:focus, .field select:focus { outline:none; border-color:var(--gold); box-shadow:0 0 0 4px color-mix(in srgb, var(--gold) 20%, transparent); }
.field input::placeholder, .field textarea::placeholder { color:var(--muted); opacity:1; }
.field textarea { resize:vertical; line-height:1.5; }
.join.dark label { color:var(--on-night-2); }
.join.dark input { background:var(--night-2); border-color:var(--night-rule); color:var(--on-night); }
.trap { position:absolute; right:-9999px; width:1px; height:1px; overflow:hidden; }
.note { border-radius:14px; padding:12px 16px; font-weight:550; text-align:right; border:1px solid transparent; }
.note.ok { background:var(--up-bg); color:var(--up); border-color:color-mix(in srgb, var(--up) 25%, transparent); }
.note.open { font-weight:400; background:var(--card); border:1px solid var(--rule); border-right:3px solid var(--gold); color:var(--ink-2); max-width:70em; }
.note.err { background:var(--down-bg); color:var(--down); border-color:color-mix(in srgb, var(--down) 25%, transparent); }
.night .note.ok { background:#12301f; color:#c4ecd0; } .night .note.err { background:#3a1c19; color:#f6cdc7; }

/* the instrument: one mark per idea, gold only for a pass */
.watch-card { width:100%; position:relative; background:var(--ds-sheen), var(--card); color:var(--ink); border:1px solid var(--rule); border-radius:28px; padding:48px 52px; box-shadow:var(--lift);
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); column-gap:64px; row-gap:32px; align-items:start; text-align:right; }
.watch-card::before { content:""; position:absolute; right:52px; left:52px; top:-1px; height:1px; background:linear-gradient(90deg, transparent, var(--gold), transparent); opacity:0.7; }
.wc-head { grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:6px 16px; padding-bottom:4px; }
.wc-head h2 { font-size:clamp(24px, 2.4vw, 30px); letter-spacing:-0.025em; } .wc-head span { font:500 12.5px/1.4 var(--ds-mono); letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); }
.wc-body { display:flex; flex-direction:column; gap:28px; }
.marks { display:grid; grid-template-columns:repeat(10, minmax(0, 1fr)); gap:clamp(7px, 1.1vw, 13px); width:100%; max-width:420px; }
.marks i, .key i { aspect-ratio:1; width:100%; border-radius:50%; background:var(--idle); display:block; }
.key i { width:14px; height:14px; flex:none; }
.marks i.no, .key i.no { background:none; border:2px solid var(--no); } .key i.yes, .marks i.yes { background:var(--yes); border:0; }
.key { list-style:none; display:flex; flex-wrap:wrap; gap:10px 26px; font-size:15.5px; color:var(--ink-2); }
.key li { display:flex; align-items:center; gap:9px; } .key strong { color:var(--ink); font-weight:650; font-variant-numeric:tabular-nums; } .key .dim { color:var(--muted); }
.stopped { display:flex; flex-direction:column; }
.stopped > p { font:500 12.5px/1.4 var(--ds-mono); letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); padding-bottom:12px; }
.stopped .row { display:flex; flex-wrap:wrap; justify-content:space-between; gap:2px 18px; padding:15px 0; border-top:1px solid var(--rule-2); font-size:16px; }
.stopped .row span:first-child { font-weight:550; color:var(--ink); } .stopped .why { color:var(--muted); }
.stopped .more { color:var(--gold-ink); font-weight:550; padding-top:16px; border-top:1px solid var(--rule-2); text-decoration:none; }
.stopped .more::after { content:"\2192"; margin-right:0.35em; }
.stopped .more:hover { color:var(--ink); }
.watch-card > .facts { grid-column:1 / -1; }
@media screen and (prefers-reduced-motion: no-preference) {
  @keyframes mark-in { from { opacity:0; transform:scale(0.4); } to { opacity:1; transform:none; } }
  .marks i { animation:mark-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  /* a diagonal wave from the top-left corner, starting as the card lands; the second delay is the passed marks' ring, in the same wave */
  .marks i:nth-child(1) { animation-delay:700ms, 1500ms; }
  .marks i:nth-child(2) { animation-delay:732ms, 1532ms; }
  .marks i:nth-child(3) { animation-delay:764ms, 1564ms; }
  .marks i:nth-child(4) { animation-delay:796ms, 1596ms; }
  .marks i:nth-child(5) { animation-delay:828ms, 1628ms; }
  .marks i:nth-child(6) { animation-delay:860ms, 1660ms; }
  .marks i:nth-child(7) { animation-delay:892ms, 1692ms; }
  .marks i:nth-child(8) { animation-delay:924ms, 1724ms; }
  .marks i:nth-child(9) { animation-delay:956ms, 1756ms; }
  .marks i:nth-child(10) { animation-delay:988ms, 1788ms; }
  .marks i:nth-child(11) { animation-delay:732ms, 1532ms; }
  .marks i:nth-child(12) { animation-delay:764ms, 1564ms; }
  .marks i:nth-child(13) { animation-delay:796ms, 1596ms; }
  .marks i:nth-child(14) { animation-delay:828ms, 1628ms; }
  .marks i:nth-child(15) { animation-delay:860ms, 1660ms; }
  .marks i:nth-child(16) { animation-delay:892ms, 1692ms; }
  .marks i:nth-child(17) { animation-delay:924ms, 1724ms; }
  .marks i:nth-child(18) { animation-delay:956ms, 1756ms; }
  .marks i:nth-child(19) { animation-delay:988ms, 1788ms; }
  .marks i:nth-child(20) { animation-delay:1020ms, 1820ms; }
  .marks i:nth-child(21) { animation-delay:764ms, 1564ms; }
  .marks i:nth-child(22) { animation-delay:796ms, 1596ms; }
  .marks i:nth-child(23) { animation-delay:828ms, 1628ms; }
  .marks i:nth-child(24) { animation-delay:860ms, 1660ms; }
  .marks i:nth-child(25) { animation-delay:892ms, 1692ms; }
  .marks i:nth-child(26) { animation-delay:924ms, 1724ms; }
  .marks i:nth-child(27) { animation-delay:956ms, 1756ms; }
  .marks i:nth-child(28) { animation-delay:988ms, 1788ms; }
  .marks i:nth-child(29) { animation-delay:1020ms, 1820ms; }
  .marks i:nth-child(30) { animation-delay:1052ms, 1852ms; }
  .marks i:nth-child(31) { animation-delay:796ms, 1596ms; }
  .marks i:nth-child(32) { animation-delay:828ms, 1628ms; }
  .marks i:nth-child(33) { animation-delay:860ms, 1660ms; }
  .marks i:nth-child(34) { animation-delay:892ms, 1692ms; }
  .marks i:nth-child(35) { animation-delay:924ms, 1724ms; }
  .marks i:nth-child(36) { animation-delay:956ms, 1756ms; }
  .marks i:nth-child(37) { animation-delay:988ms, 1788ms; }
  .marks i:nth-child(38) { animation-delay:1020ms, 1820ms; }
  .marks i:nth-child(39) { animation-delay:1052ms, 1852ms; }
  .marks i:nth-child(40) { animation-delay:1084ms, 1884ms; }
  .marks i:nth-child(41) { animation-delay:828ms, 1628ms; }
  .marks i:nth-child(42) { animation-delay:860ms, 1660ms; }
  .marks i:nth-child(43) { animation-delay:892ms, 1692ms; }
  .marks i:nth-child(44) { animation-delay:924ms, 1724ms; }
  .marks i:nth-child(45) { animation-delay:956ms, 1756ms; }
  .marks i:nth-child(46) { animation-delay:988ms, 1788ms; }
  .marks i:nth-child(47) { animation-delay:1020ms, 1820ms; }
  .marks i:nth-child(48) { animation-delay:1052ms, 1852ms; }
  .marks i:nth-child(49) { animation-delay:1084ms, 1884ms; }
  .marks i:nth-child(50) { animation-delay:1116ms, 1916ms; }
  .marks i:nth-child(51) { animation-delay:860ms, 1660ms; }
  .marks i:nth-child(52) { animation-delay:892ms, 1692ms; }
  .marks i:nth-child(53) { animation-delay:924ms, 1724ms; }
  .marks i:nth-child(54) { animation-delay:956ms, 1756ms; }
  .marks i:nth-child(55) { animation-delay:988ms, 1788ms; }
  .marks i:nth-child(56) { animation-delay:1020ms, 1820ms; }
  .marks i:nth-child(57) { animation-delay:1052ms, 1852ms; }
  .marks i:nth-child(58) { animation-delay:1084ms, 1884ms; }
  .marks i:nth-child(59) { animation-delay:1116ms, 1916ms; }
  .marks i:nth-child(60) { animation-delay:1148ms, 1948ms; }
  .marks i:nth-child(61) { animation-delay:892ms, 1692ms; }
  .marks i:nth-child(62) { animation-delay:924ms, 1724ms; }
  .marks i:nth-child(63) { animation-delay:956ms, 1756ms; }
  .marks i:nth-child(64) { animation-delay:988ms, 1788ms; }
  .marks i:nth-child(65) { animation-delay:1020ms, 1820ms; }
  .marks i:nth-child(66) { animation-delay:1052ms, 1852ms; }
  .marks i:nth-child(67) { animation-delay:1084ms, 1884ms; }
  .marks i:nth-child(68) { animation-delay:1116ms, 1916ms; }
  .marks i:nth-child(69) { animation-delay:1148ms, 1948ms; }
  .marks i:nth-child(70) { animation-delay:1180ms, 1980ms; }
  .marks i:nth-child(71) { animation-delay:924ms, 1724ms; }
  .marks i:nth-child(72) { animation-delay:956ms, 1756ms; }
  .marks i:nth-child(73) { animation-delay:988ms, 1788ms; }
  .marks i:nth-child(74) { animation-delay:1020ms, 1820ms; }
  .marks i:nth-child(75) { animation-delay:1052ms, 1852ms; }
  .marks i:nth-child(76) { animation-delay:1084ms, 1884ms; }
  .marks i:nth-child(77) { animation-delay:1116ms, 1916ms; }
  .marks i:nth-child(78) { animation-delay:1148ms, 1948ms; }
  .marks i:nth-child(79) { animation-delay:1180ms, 1980ms; }
  .marks i:nth-child(80) { animation-delay:1212ms, 2012ms; }
  .marks i:nth-child(81) { animation-delay:956ms, 1756ms; }
  .marks i:nth-child(82) { animation-delay:988ms, 1788ms; }
  .marks i:nth-child(83) { animation-delay:1020ms, 1820ms; }
  .marks i:nth-child(84) { animation-delay:1052ms, 1852ms; }
  .marks i:nth-child(85) { animation-delay:1084ms, 1884ms; }
  .marks i:nth-child(86) { animation-delay:1116ms, 1916ms; }
  .marks i:nth-child(87) { animation-delay:1148ms, 1948ms; }
  .marks i:nth-child(88) { animation-delay:1180ms, 1980ms; }
  .marks i:nth-child(89) { animation-delay:1212ms, 2012ms; }
  .marks i:nth-child(90) { animation-delay:1244ms, 2044ms; }
  .marks i:nth-child(91) { animation-delay:988ms, 1788ms; }
  .marks i:nth-child(92) { animation-delay:1020ms, 1820ms; }
  .marks i:nth-child(93) { animation-delay:1052ms, 1852ms; }
  .marks i:nth-child(94) { animation-delay:1084ms, 1884ms; }
  .marks i:nth-child(95) { animation-delay:1116ms, 1916ms; }
  .marks i:nth-child(96) { animation-delay:1148ms, 1948ms; }
  .marks i:nth-child(97) { animation-delay:1180ms, 1980ms; }
  .marks i:nth-child(98) { animation-delay:1212ms, 2012ms; }
  .marks i:nth-child(99) { animation-delay:1244ms, 2044ms; }
  .marks i:nth-child(100) { animation-delay:1276ms, 2076ms; }
}

/* facts strip under the hero */
.strip { border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); background:var(--ds-sheen), var(--card); }
.stripin { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:0; }
.stripin div { padding:30px 0 30px 26px; display:flex; flex-direction:column; gap:3px; min-width:0; }
.stripin div + div { padding-right:26px; border-right:1px solid var(--rule-2); }
.stripin strong { font-weight:600; font-size:16.5px; letter-spacing:-0.01em; display:flex; align-items:center; gap:9px; }
.stripin strong::before { content:""; width:6px; height:6px; border-radius:2px; background:var(--gold); transform:rotate(45deg); flex:none; }
.stripin span { padding-right:15px; } .stripin span { color:var(--muted); font-size:15px; }

/* sections */
.story { display:flex; flex-direction:column; gap:40px; }
.story h2 { max-width:15em; }
.cols2 { display:flex; flex-wrap:wrap; gap:24px 72px; }
.cols2 > * { flex:1 1 380px; min-width:0; } .cols2 div { display:flex; flex-direction:column; gap:16px; color:var(--ink-2); }
.band { background:var(--sunk); }
.band > .wrap { padding-top:var(--section); padding-bottom:var(--section); display:flex; flex-direction:column; gap:48px; }
.band > .wrap.two { flex-direction:row; }
.band + .band > .wrap { padding-top:0; }   /* two grey sections in a row read as one */
.intro { display:flex; flex-direction:column; gap:18px; max-width:48em; }
.intro p { font-size:clamp(18px, 1.4vw, 21px); line-height:1.55; color:var(--ink-2); max-width:38em; }
.three { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:20px; }
.partgrid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px; }
.partgrid > a { display:flex; flex-direction:column; gap:8px; padding:22px 22px 24px; border:1px solid var(--rule); border-radius:18px; background:var(--card); text-decoration:none; color:inherit; transition:border-color var(--ds-fast, .15s) ease; }
.partgrid > a:hover { border-color:var(--gold); }
.partgrid .from { font:500 11px/1.3 var(--ds-mono, ui-monospace, monospace); letter-spacing:0.1em; text-transform:uppercase; color:var(--ds-text-3); }
.partgrid h3 { margin:0; } .partgrid p { margin:0; color:var(--ds-text-2); }
@media (max-width: 1000px) { .partgrid { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .partgrid { grid-template-columns:minmax(0, 1fr); } }
.three > div { min-width:0; display:flex; flex-direction:column; gap:12px; padding:30px 28px 32px; border:1px solid var(--rule); border-radius:22px; background:var(--ds-sheen), var(--card); box-shadow:var(--ds-shadow-1); position:relative; }
.three > div::before { content:""; position:absolute; right:28px; top:-1px; width:44px; height:2px; border-radius:2px; background:var(--gold); }
.three.plain > div::before { background:var(--ds-line-strong); }
.three p, .steps p, .qa p, .pitch > p:not(.lead):not(.fine), .askbox > p:not(.fine):not(.note) { color:var(--ink-2); }
.three p { font-size:17px; }
.block > .intro { margin-bottom:48px; }
.lessons { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 64px; margin-bottom:32px; }
.lessons > div { border-top:1px solid var(--rule); padding:28px 0 34px; display:flex; flex-direction:column; gap:10px; }
.lessons p { color:var(--ink-2); font-size:17px; }
.from { font:500 12.5px/1.4 var(--ds-mono); letter-spacing:0.06em; text-transform:uppercase; color:var(--gold-ink); }
table.book td { min-width:190px; } table.book td.idea { min-width:170px; }
.steps { list-style:none; counter-reset:step; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:32px; position:relative; }
.steps li { counter-increment:step; min-width:0; display:flex; flex-direction:column; gap:10px; position:relative; padding-top:64px; }
.steps li::before { content:counter(step, decimal-leading-zero); position:absolute; top:0; right:0; width:44px; height:44px; border-radius:14px; background:var(--card); border:1px solid var(--rule); box-shadow:var(--ds-shadow-1); display:flex; align-items:center; justify-content:center; font:600 14px/1 var(--ds-mono); color:var(--ink); z-index:1; }
.steps li::after { content:""; position:absolute; top:22px; right:44px; left:-32px; height:1px; background:linear-gradient(90deg, var(--rule), var(--ds-line-strong) 50%, var(--rule)); }
.steps li:last-child::after { display:none; }
.steps li:last-child::before { background:var(--ds-gold-grad); color:var(--ds-on-gold); border-color:transparent; }

/* dark product bands */
.night { background:radial-gradient(80% 60% at 50% 0%, rgba(216, 172, 86, 0.10), rgba(216, 172, 86, 0) 70%), var(--night); color:var(--on-night); position:relative; }
.night h2, .night h3 { color:var(--on-night); }
.night > .wrap { padding-top:var(--section); padding-bottom:var(--section); display:flex; flex-direction:column; gap:48px; }
.night .intro p, .night .lead, .night .fine { color:var(--on-night-2); }
.night a, .night .fine a { color:#e2bb6a; } .night a:hover { color:#ffffff; }
.joinin { gap:24px !important; align-items:center; text-align:center; }
.joinin .lead { margin:0 auto; } .joinin .join { justify-content:center; width:100%; max-width:560px; }
.shot { background:var(--night-2); border:1px solid var(--night-rule); border-radius:24px; padding:10px; box-shadow:0 50px 100px -40px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.02) inset; }
.shot img { display:block; width:100%; height:auto; border-radius:16px; }
.shot figcaption { font-size:14px; color:var(--on-night-2); padding:10px 8px 4px; }
.shot-ph { display:flex; align-items:center; justify-content:center; min-height:240px; border-radius:16px; background:linear-gradient(180deg, #151922, #0c0f14); color:var(--on-night-2); font:550 20px/1.3 var(--ui); letter-spacing:-0.01em; }
.points { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:40px 48px; }
.points div { border-top:1px solid var(--night-rule); padding-top:20px; position:relative; }
.points div::before { content:""; position:absolute; right:0; top:-1px; width:32px; height:1px; background:var(--gold); }
.points dt { font-weight:600; font-size:17.5px; color:var(--on-night); margin-bottom:6px; letter-spacing:-0.01em; } .points dd { color:var(--on-night-2); font-size:16.5px; }
.two { display:flex; flex-wrap:wrap; gap:64px; align-items:flex-start; }

.facts { flex:1 1 380px; min-width:0; background:var(--ds-sheen), var(--card); border:1px solid var(--rule); border-radius:22px; padding:8px 28px; box-shadow:var(--ds-shadow-2); }
.facts div { display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:20px 0; border-bottom:1px solid var(--rule-2); }
.facts div:last-child { border-bottom:0; }
.facts dt { color:var(--ink-2); } .facts dd { font:600 34px/1.1 var(--display); letter-spacing:-0.03em; font-variant-numeric:tabular-nums lining-nums; text-align:left; } .facts dd.small { font-size:20px; letter-spacing:-0.01em; }
.facts.dark { background:transparent; border:0; padding:0; } .facts.dark div { border-color:var(--rule-2); }
.facts.dark dt { color:var(--ink-2); } .facts.dark dd { color:var(--ink); }

/* price */
#price { display:flex; flex-direction:column; gap:28px; } #price > .intro { margin-bottom:12px; }
.prices { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:24px; }
.price { min-width:0; position:relative; background:var(--ds-sheen), var(--card); border:1px solid var(--rule); border-radius:26px; padding:40px; display:flex; flex-direction:column; gap:10px; box-shadow:var(--ds-shadow-2); }
.price.main { border-color:transparent; background:linear-gradient(var(--card), var(--card)) padding-box, linear-gradient(160deg, #ecca83, var(--ds-gold-line) 45%, #b78a35) border-box; border:1px solid transparent; box-shadow:0 0 0 1px color-mix(in srgb, var(--gold) 25%, transparent), var(--lift); }
.price .amount { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; margin-top:10px; }
.price .amount b { font:640 60px/1 var(--display); letter-spacing:-0.045em; font-variant-numeric:lining-nums; } .price .amount span { color:var(--ink-2); }
.price .later { color:var(--muted); font-size:15.5px; }
.price ul { list-style:none; display:flex; flex-direction:column; gap:10px; margin-top:18px; padding-top:22px; border-top:1px solid var(--rule-2); color:var(--ink-2); font-size:16.5px; }
.price li { padding-right:24px; position:relative; }
.price li::before { content:""; position:absolute; right:2px; top:0.5em; width:10px; height:6px; border-right:1.5px solid var(--gold); border-bottom:1.5px solid var(--gold); transform:rotate(-45deg); }

/* about, questions, contact */
.about { display:flex; flex-direction:column; gap:26px; }
.who { display:flex; flex-direction:column; gap:16px; border-right:2px solid var(--gold); padding-right:28px; max-width:46em; }
.sig { display:flex; flex-direction:column; } .sig span { color:var(--muted); font-size:15.5px; }
.qcol { flex:1.3 1 460px; min-width:0; display:flex; flex-direction:column; gap:0; }
.qcol > h2 { margin-bottom:28px; }
.qa { border-top:1px solid var(--rule); padding-top:20px; display:flex; flex-direction:column; gap:8px; }
.askbox { flex:1 1 340px; min-width:0; background:var(--ds-sheen), var(--card); border:1px solid var(--rule); border-radius:26px; padding:36px; box-shadow:var(--ds-shadow-2); display:flex; flex-direction:column; gap:14px; position:sticky; top:96px; }
.askbox h2 { font-size:28px; letter-spacing:-0.025em; }

/* inner pages */
.pagehead { display:flex; flex-direction:column; gap:20px; padding-bottom:48px; }
/* the site's own lines, gently alive on every page (Igor, 17 Oct 2026: "animate the same theme that is now this lines ... a bit
   all not too much on the site"): a light runs now and then along the header's and the footer's hairlines and the home page's band
   edges, the faint grid behind each page title drifts, and the gold line before each home eyebrow draws itself as its section
   comes into view. Nothing new is drawn, nothing carries a number, and a device that asks for less motion sees the lines still. */
.top::after, .foot::before, .lp-band::before { content:""; position:absolute; right:0; left:0; height:1px; pointer-events:none;
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--gold) 75%, transparent), transparent) no-repeat; background-size:26% 100%; background-position:-40% 0; }
.top::after { bottom:-1px; } .foot::before { top:-1px; } .lp-band { position:relative; } .lp-band::before { top:-1px; }
.pagehead { position:relative; isolation:isolate; }
main { overflow-x:clip; }   /* the title grid below bleeds 4vw past the column; clip keeps it from widening the page (clip, not hidden: sticky still works) */
.pagehead::before { content:""; position:absolute; inset:-40px -4vw 0; z-index:-1; pointer-events:none;
  background-image:linear-gradient(var(--ds-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--ds-grid-line) 1px, transparent 1px); background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 70% 90% at 30% 20%, #000 20%, transparent 75%); mask-image:radial-gradient(ellipse 70% 90% at 30% 20%, #000 20%, transparent 75%); }
@media screen and (prefers-reduced-motion: no-preference) {
  .top::after { animation:ds-line 11s cubic-bezier(0.45, 0, 0.2, 1) 1.5s infinite; }
  .foot::before { animation:ds-line 13s cubic-bezier(0.45, 0, 0.2, 1) 4s infinite; }
  .lp-band::before { animation:ds-line 12s cubic-bezier(0.45, 0, 0.2, 1) 3s infinite; }
  .lp-band:nth-of-type(2n)::before { animation-delay:7s; }
  .pagehead::before { animation:ds-drift 40s linear infinite; }
  @keyframes ds-line { 0% { background-position:-40% 0; } 55%, 100% { background-position:140% 0; } }
  @keyframes ds-drift { to { background-position:56px 56px, 56px 56px; } }
  .lp-eye::before { transform-origin:right center; }
  html.reveal-on .lp-sec > :not(.in) .lp-eye::before { transform:scaleX(0); }
  html.reveal-on .lp-sec > .in .lp-eye::before { animation:ds-draw 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both; }
}
@media print { .top::after, .foot::before, .lp-band::before, .pagehead::before { display:none; } }
.explain { display:flex; flex-wrap:wrap; gap:16px 48px; color:var(--ink-2); max-width:70em; } .explain p { flex:1 1 380px; min-width:0; }
.ledger { padding-bottom:var(--section); display:flex; flex-direction:column; gap:16px; }
.tablebox { background:var(--card); border:1px solid var(--rule); border-radius:20px; overflow-x:auto; box-shadow:var(--ds-shadow-1); }
/* a table wider than a phone shows a soft edge on the side that has more columns, so the reader knows to swipe */
.tablebox { background:linear-gradient(to left, var(--card) 30%, transparent) right center / 48px 100% no-repeat local,
  linear-gradient(to right, var(--card) 30%, transparent) left center / 48px 100% no-repeat local,
  linear-gradient(to left, color-mix(in srgb, var(--ink) 16%, transparent), transparent) right center / 14px 100% no-repeat scroll,
  linear-gradient(to right, color-mix(in srgb, var(--ink) 16%, transparent), transparent) left center / 14px 100% no-repeat scroll,
  var(--card); }
table { width:100%; border-collapse:collapse; font-size:15.5px; font-variant-numeric:tabular-nums lining-nums; }
th { text-align:right; font:500 11.5px/1.3 var(--ds-mono); letter-spacing:0.07em; text-transform:uppercase; color:var(--muted); padding:15px 18px; border-bottom:1px solid var(--rule); white-space:nowrap; background:var(--ds-raised); }
td { padding:15px 18px; border-bottom:1px solid var(--rule-2); vertical-align:top; }
tbody th { font:inherit; letter-spacing:0; text-transform:none; background:none; color:var(--ink); }
tr:last-child td { border-bottom:0; }
tbody tr { transition:background-color var(--ds-fast) ease; } tbody tr:hover td { background:var(--ds-hover); }
th.n, td.n { text-align:left; white-space:nowrap; } td.d { white-space:nowrap; color:var(--muted); } td.idea { font-weight:550; min-width:220px; } td.why { color:var(--ink-2); min-width:230px; }
.more-n { color:var(--muted); white-space:nowrap; }
.why-all { display:none; }
a.whyl { color:inherit; text-decoration:underline dotted; text-decoration-color:var(--muted); text-underline-offset:3px; } a.whyl:hover { text-decoration-style:solid; }
/* on a phone the record is a stack of cards, one per idea, so the score, verdict and reasons are on screen without swiping */
@media screen and (max-width: 640px) {
  .ledger .tablebox:has(table.ideas) { overflow:visible; background:var(--card); }
  table.ideas thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  table.ideas, table.ideas tbody { display:block; }
  table.ideas tr { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) auto; grid-template-areas:"idea idea idea" "verdict verdict verdict" "score trades tested" "kind kind kind" "why why why";
    gap:8px 16px; padding:18px 20px; border-bottom:1px solid var(--rule-2); }
  table.ideas tr:last-child { border-bottom:0; }
  table.ideas td { display:block; padding:0; border:0; min-width:0; text-align:right; white-space:normal; }
  table.ideas td[data-label]::before { content:attr(data-label); display:block; font:500 11px/1.4 var(--ds-mono); letter-spacing:0.07em; text-transform:uppercase; color:var(--muted); }
  table.ideas td.idea { grid-area:idea; font-size:17px; } table.ideas td.verdict-c { grid-area:verdict; }
  table.ideas td.score { grid-area:score; font-weight:550; } table.ideas td.trades { grid-area:trades; }
  table.ideas td.kind { grid-area:kind; } table.ideas td.d { grid-area:tested; white-space:nowrap; }
  table.ideas td.kind::before, table.ideas td.why::before { display:inline; margin-left:8px; }
  table.ideas td.why { grid-area:why; } table.ideas .why-all { display:inline; } table.ideas .why-all span + span::before { content:" \00b7  "; color:var(--muted); }
  table.ideas td.why:has(.why-all) .why-one { display:none; }
}
/* text tables (the nine tests, the playbook, the checklists) read as one card per row on a phone, each cell under its heading */
@media screen and (max-width: 640px) {
  .tablebox:has(table.stack) { overflow:visible; background:var(--card); }
  table.stack thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  table.stack, table.stack tbody, table.stack tr, table.stack td { display:block; }
  table.stack tr { padding:16px 20px; border-bottom:1px solid var(--rule-2); } table.stack tr:last-child { border-bottom:0; }
  table.stack td, table.stack td.idea { padding:0; border:0; min-width:0; }
  table.stack td + td { margin-top:10px; color:var(--ink-2); } table.stack td:first-child { font-weight:600; color:var(--ink); }
  table.stack td[data-label]::before { content:attr(data-label); display:block; font:500 11px/1.4 var(--ds-mono); letter-spacing:0.07em; text-transform:uppercase; color:var(--muted); margin-bottom:2px; }
}
.verdict { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; border-radius:999px; padding:3px 11px; font-size:13px; font-weight:550; border:1px solid var(--rule); }
.verdict::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:0.8; }
.verdict.no { background:var(--sunk); color:var(--ink-2); } .verdict.yes { background:var(--gold-wash); color:var(--gold-ink); border-color:var(--ds-gold-line); }
.prose { display:flex; flex-direction:column; gap:16px; padding-bottom:var(--section); }
.prose h2 { font-size:28px; letter-spacing:-0.025em; margin-top:28px; } .prose p { color:var(--ink-2); } .prose .lead { color:var(--ink-2); }
.prose.block { padding-top:88px; }

/* footer: quiet, small, light */
.foot { background:var(--sunk); color:var(--muted); font-size:14px; border-top:1px solid var(--rule); position:relative; }
.footin { display:flex; flex-wrap:wrap; gap:36px 56px; padding-top:64px; padding-bottom:40px; }
.fcol { flex:1 1 170px; min-width:0; display:flex; flex-direction:column; gap:10px; } .fcol.wide { flex:2.4 1 380px; gap:16px; }
.fcol.wide p { max-width:38em; line-height:1.6; }
.fcol h2 { font:500 11.5px/1.3 var(--ds-mono); letter-spacing:0.08em; text-transform:uppercase; color:var(--ink); }
.fcol a { color:var(--muted); text-decoration:none; } .fcol a:hover { color:var(--ink); text-decoration:underline; }
.fcol a.door { color:var(--gold-ink); font-weight:550; }
/* tap targets on a phone: link lists and the crumbs get 36 px rows instead of 22 px ones */
@media (max-width: 640px) { .fcol { gap:0; } .fcol h2 { margin-bottom:8px; } .fcol a { display:block; padding:7px 0; } .crumbs a, .toc.list a { display:inline-block; padding:8px 0; } .toc.list ol { gap:0; } .fbar nav a { display:inline-block; padding:9px 0; } .fsmall a { padding:6px 0; display:inline-block; } }
/* on a phone the four link lists sit two by two instead of one under another (until 16 Oct 2026 the footer was
   about 1,100 px of single links on a 375 px screen) */
@media (max-width: 640px) { .footin { gap:36px 20px; padding-top:52px; } .fcol { flex:1 1 140px; } .fcol.wide { flex-basis:100%; } }
/* wide screens: the brand column and the four link columns on one line (until 17 Oct 2026 the last column wrapped below) */
@media (min-width: 1100px) { .footin { display:grid; grid-template-columns:minmax(0, 1.6fr) repeat(5, minmax(0, 1fr)); gap:36px 32px; } }
.legal-line { border-top:1px solid var(--rule); padding-top:20px; padding-bottom:20px; color:var(--muted); font-size:13.5px; }
.ftag { color:var(--ink); font-weight:550; font-size:15.5px; }
.socials { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.socials a { width:36px; height:36px; border-radius:50%; border:1px solid var(--ds-line-strong); display:grid; place-items:center; color:var(--ink); transition:border-color var(--ds-fast) ease, color var(--ds-fast) ease, transform var(--ds-fast) var(--ds-ease); }
.socials a:hover { border-color:var(--gold); color:var(--gold-ink); transform:translateY(-2px); }
.socials svg, .fmail svg { width:17px; height:17px; fill:currentColor; flex:none; }
.fcol a.fmail { display:inline-flex; align-items:center; gap:10px; color:var(--ink); min-width:0; overflow-wrap:anywhere; }
.fbar { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px 28px; border-top:1px solid var(--rule); padding-top:22px; padding-bottom:22px; }
.fbar nav { display:flex; flex-wrap:wrap; gap:8px 26px; }
.fbar a, .fbar p { font:500 12px/1.4 var(--ds-mono); letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-2); text-decoration:none; }
.fbar a:hover { color:var(--ink); text-decoration:underline; }
/* help and trust badges at the bottom of every page (Igor, 18 Oct 2026) */
.fhelp { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.1fr); gap:24px 48px; align-items:center; padding-top:28px; padding-bottom:28px; border-top:1px solid var(--rule); }
.fhelp h2 { font-size:22px; margin-bottom:6px; } .fhelp-t p { color:var(--ink-2); font-size:14.5px; }
.fhelp-a { display:flex; flex-wrap:wrap; align-items:center; gap:10px 20px; margin-top:14px; font-size:14.5px; }
.fbadges { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; }
.fbadges li { display:flex; align-items:center; gap:10px; padding:12px 14px; border:1px solid var(--ds-gold-line, var(--rule)); border-radius:14px; background:linear-gradient(160deg, color-mix(in srgb, var(--gold) 8%, transparent), transparent 70%); font-size:13px; font-weight:550; line-height:1.3; color:var(--ink); }
.fbadges svg { flex:none; width:22px; height:22px; fill:none; stroke:var(--gold); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
@media (max-width: 860px) { .fhelp { grid-template-columns:minmax(0, 1fr); } }
.fsmall { display:flex; flex-direction:column; gap:12px; padding-bottom:44px; font-size:13px; line-height:1.65; color:var(--muted); }
.fsmall p { max-width:none; } .fsmall a { color:var(--ink-2); }

/* numbers, tally, compare, accordions, timeline, lists */
.numbers { display:flex; flex-direction:column; gap:40px; }
.tally { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:0; border-top:1px solid var(--rule); }
.tally div { padding:28px 0 30px 24px; display:flex; flex-direction:column-reverse; gap:6px; border-bottom:1px solid var(--rule); }
.tally div:not(:nth-child(3n + 1)) { padding-right:24px; border-right:1px solid var(--rule-2); }
.tally dt { color:var(--muted); font-size:14.5px; }
.tally dd { font:620 clamp(40px, 4.4vw, 60px)/1 var(--display); letter-spacing:-0.045em; font-variant-numeric:tabular-nums lining-nums; color:var(--ink); }
.tally div:nth-child(2) dd { color:var(--gold-ink); }
.numbers > p { margin-top:-8px; }
.compare { margin-top:8px; }
.compare caption { text-align:right; font-weight:600; padding:20px 18px 6px; color:var(--ink); }
.compare th[scope="row"] { font-weight:450; font-size:15.5px; color:var(--ink); white-space:normal; border-bottom:1px solid var(--rule-2); min-width:220px; }
.compare tr:last-child th { border-bottom:0; }
.compare .c { text-align:center; white-space:nowrap; } .compare td.c { color:var(--ink-2); }
details.qa { gap:0; padding-top:0; }
details.qa summary { cursor:pointer; list-style:none; font-weight:550; font-size:19px; line-height:1.4; letter-spacing:-0.012em; padding:22px 0 22px 40px; position:relative; }
details.qa summary::-webkit-details-marker { display:none; }
details.qa summary::after { content:""; position:absolute; left:8px; top:30px; width:9px; height:9px; border-left:1.5px solid var(--ink-2); border-bottom:1.5px solid var(--ink-2); transform:rotate(45deg); transition:transform 0.2s ease; }
details.qa[open] summary::after { transform:rotate(-135deg); top:34px; }
details.qa summary:hover { color:var(--gold-ink); }
details.qa p { padding-bottom:24px; max-width:40em; }
.qcol details.qa:last-of-type { border-bottom:1px solid var(--rule); }
.timeline { list-style:none; display:flex; flex-direction:column; gap:0; border-right:1px solid var(--rule); margin-right:6px; }
.timeline li { position:relative; padding:0 26px 26px 0; display:flex; flex-direction:column; gap:4px; }
.timeline li::before { content:""; position:absolute; right:-6px; top:7px; width:11px; height:11px; border-radius:50%; background:var(--ink); }
.timeline li:last-child::before { background:var(--paper); border:1.5px solid var(--ink); }
.timeline span { font-weight:600; color:var(--ink); } .timeline p { color:var(--ink-2); }
.ticks { list-style:none; display:flex; flex-direction:column; gap:12px; color:var(--ink-2); }
.ticks li { padding-right:28px; position:relative; }
.ticks li::before { content:""; position:absolute; right:3px; top:0.45em; width:10px; height:6px; border-right:1.5px solid var(--gold-ink); border-bottom:1.5px solid var(--gold-ink); transform:rotate(-45deg); }
.ticks strong { color:var(--ink); }
.toc { display:flex; flex-wrap:wrap; gap:6px 20px; padding:18px 22px; background:var(--ds-sheen), var(--card); border:1px solid var(--rule); border-radius:18px; font-size:15px; box-shadow:var(--ds-shadow-1); }
.legal h2 { scroll-margin-top:90px; }
.toc.list { flex-direction:column; gap:10px; } .toc-h { font:500 11.5px/1.3 var(--ds-mono); letter-spacing:0.07em; text-transform:uppercase; color:var(--muted); }
.toc.list ol { margin:0; padding-right:1.4em; display:flex; flex-direction:column; gap:6px; } .toc.list li { margin:0; color:var(--muted); }
.toc.list a { color:var(--ink-2); text-decoration:none; } .toc.list a:hover { color:var(--ink); text-decoration:underline; }
.prose h2[id] { scroll-margin-top:30px; }
.lcard { display:flex; flex-direction:column; gap:8px; padding:24px 26px; margin-top:18px; background:var(--card); border:1px solid var(--rule); border-radius:20px; box-shadow:var(--ds-shadow-1); }
.prose .lcard h2 { margin-top:0; font-size:24px; } .lcard h2 a, .lcard h3 a { text-decoration:none; } .lcard h2 a:hover, .lcard h3 a:hover { text-decoration:underline; }
.lcard .lmeta { color:var(--muted); font-size:14.5px; }
dl.gloss { margin:0; display:flex; flex-direction:column; gap:4px; }
dl.gloss > div { padding:14px 0; border-bottom:1px solid var(--rule); scroll-margin-top:30px; } dl.gloss > div:last-child { border-bottom:0; }
dl.gloss dt { font-weight:600; color:var(--ink); } dl.gloss dd { margin:4px 0 0; }
dl.gloss .gwhere { display:inline-block; font-size:14.5px; } dl.gloss .gwhere::before { content:"Used on: "; color:var(--muted); }
dl.gloss > div:target { background:var(--gold-wash); border-radius:12px; padding-right:14px; padding-left:14px; }
.next-reads { display:flex; flex-direction:column; gap:14px; padding-bottom:var(--section); } .next-reads h2 { font-size:22px; letter-spacing:-0.02em; }
.readlist { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.readlist li { display:flex; flex-direction:column; gap:4px; padding:16px 20px; background:var(--card); border:1px solid var(--rule); border-radius:16px; }
.vipbox { margin:32px 0 8px; padding:20px 22px; border:1px solid var(--gold); border-radius:14px; background:var(--card, var(--paper)); }
.vipbox h3 { margin-top:0; font-size:1.15rem; } .vipbox p { margin:10px 0; } .vipbox .cta { display:inline-block; }
.readmore-sum { cursor:pointer; font-weight:550; padding:14px 4px; min-height:44px; } .readmore[open] .readmore-sum { margin-bottom:12px; }
.readlist a { font-weight:550; } .readlist span { color:var(--ink-2); font-size:15px; }
.contact { padding-bottom:var(--section); }
.askbox.wide { flex:1.4 1 420px; position:static; }
@media (min-width: 1100px) {   /* a tool's long form in two columns, its answer kept in view beside it (24 Oct 2026) */
  .askbox.wide .ask { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px 18px; align-items:start; }
  .askbox.wide .ask > :not(.field), .askbox.wide .ask > .field:first-child, .askbox.wide .ask > .field:has(textarea, fieldset) { grid-column:1 / -1; }
  .contact.two:has(> .askbox.wide) > .support { position:sticky; top:92px; align-self:flex-start; max-height:calc(100vh - 116px); overflow-y:auto; padding:10px 14px; border-radius:16px; }
}
#answer { scroll-margin-top:24px; }   /* a tool sends its result here: on a phone it sits under the whole form */
.support { flex:1 1 320px; min-width:0; display:flex; flex-direction:column; gap:18px; }
.support h2 { font-size:28px; letter-spacing:-0.025em; }
.support dl { display:flex; flex-direction:column; gap:0; }
.support dl div { border-top:1px solid var(--rule); padding:16px 0; }
.support dt { font-weight:600; } .support dd { color:var(--ink-2); }

/* charts */
.chart { background:var(--ds-sheen), var(--card); border:1px solid var(--rule); border-radius:22px; padding:22px 24px 18px; box-shadow:var(--ds-shadow-2); }
.chart svg { display:block; width:100%; height:auto; overflow:visible; }
.chart .ax { stroke:var(--rule); stroke-width:1.5; } .chart .tk { stroke:var(--muted); }
.chart .tl, .chart .pl, .chart .ll { font:14px var(--ui); fill:var(--muted); }
.chart .pm { stroke:var(--ink); stroke-width:1.5; } .chart .pl { fill:var(--ink); font-weight:600; }
.chart .lb { stroke:var(--gold); stroke-width:1.5; stroke-dasharray:4 4; } .chart .ll { fill:var(--gold-ink); font-weight:600; }
.chart .dot { stroke-width:2; transition:stroke-width 0.15s ease; } .chart .dot:hover { stroke-width:3.5; }
.chart .dot.fail { fill:var(--card); stroke:var(--no); } .chart .dot.off { fill:var(--idle); stroke:var(--muted); } .chart .dot.pass { fill:var(--gold); stroke:var(--gold); }
.chart figcaption { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; font-size:13.5px; color:var(--muted); padding-top:10px; }
.chart .k { width:12px; height:12px; border-radius:50%; display:inline-block; border:2px solid; }
.chart .k.fail { border-color:var(--no); } .chart .k.off { background:var(--idle); border-color:var(--muted); } .chart .k.pass { background:var(--gold); border-color:var(--gold); }
.chart .sep { flex-basis:100%; } .chart .it { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; margin-left:10px; }
.chartscroll { overflow-x:auto; direction:rtl; }   /* on a phone it opens at the right end, where the pass mark is */
.chartscroll svg { direction:ltr; }
.chart.tests .tbars { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.chart.tests li { display:grid; grid-template-columns:minmax(0, 36%) minmax(0, 1fr) 3em; align-items:center; gap:6px 20px; }
.chart.tests .tlab { display:flex; flex-direction:column; min-width:0; }
.chart.tests .tn { font-weight:600; color:var(--ink); line-height:1.3; } .chart.tests .tm { font-size:13.5px; color:var(--muted); line-height:1.35; }
.chart.tests .tbar { display:block; width:100%; min-width:0; height:22px; border-radius:5px; overflow:hidden; }
.chart.tests .track { fill:var(--rule-2); } .chart.tests .bar { fill:var(--no); opacity:0.75; }
.chart.tests .tc { font-weight:600; color:var(--ink-2); font-variant-numeric:tabular-nums; }
@media (max-width: 640px) { .chart.tests li { grid-template-columns:minmax(0, 1fr) 2.5em; gap:4px 14px; } .chart.tests .tlab { grid-column:1 / -1; } .chart.tests .tbar { height:14px; } .chart.tests .tbars { gap:12px; } }
.chartscroll.ltr { direction:ltr; }
.log { display:flex; flex-direction:column; gap:14px; padding-bottom:var(--section); }
.logday { font-size:24px; letter-spacing:-0.02em; margin-top:22px; padding-bottom:6px; border-bottom:1px solid var(--rule); }
.logentry { background:var(--ds-sheen), var(--card); border:1px solid var(--rule); border-radius:20px; padding:22px 24px; display:flex; flex-direction:column; gap:10px; box-shadow:var(--ds-shadow-1); transition:border-color var(--ds-fast) ease; }
.logentry:hover { border-color:var(--ds-line-strong); }
.logentry header { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; }
.logentry h3 { font-size:19px; } .logentry .meta { color:var(--muted); font:500 12.5px/1.4 var(--ds-mono); letter-spacing:0.04em; }
.logentry p { color:var(--ink-2); } .logentry .why { font-size:15.5px; }
.kv2 { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px 16px; margin:0; }
.kv2 div { display:flex; flex-direction:column; } .kv2 dt { color:var(--muted); font:500 11.5px/1.4 var(--ds-mono); letter-spacing:0.06em; text-transform:uppercase; } .kv2 dd { margin:0; font-weight:600; font-variant-numeric:tabular-nums; }

/* widths */
@media (min-width: 901px) and (max-width: 1180px) { .topin { column-gap:20px; } .top nav { column-gap:16px; font-size:14px; } }
@media (min-width: 901px) and (max-width: 1040px) { .topin { column-gap:14px; } .top nav { column-gap:11px; } .top nav a.cta { padding:7px 13px; } }
@media (max-width: 1020px) {
  .watch-card { grid-template-columns:minmax(0, 1fr); padding:40px; }
  .marks { max-width:460px; }
  .steps { grid-template-columns:repeat(2, minmax(0, 1fr)); row-gap:44px; } .steps li:nth-child(2)::after { display:none; }
}
@media (max-width: 900px) {
  :root { --section:96px; }
  .points { grid-template-columns:repeat(2, minmax(0, 1fr)); } .askbox { position:static; } .band > .wrap.two { flex-direction:column; }
  .three { grid-template-columns:minmax(0, 1fr); gap:16px; } .prices { grid-template-columns:minmax(0, 1fr); }
  .stripin { grid-template-columns:repeat(2, minmax(0, 1fr)); } .stripin div:nth-child(3) { padding-right:0; border-right:0; } .stripin div:nth-child(n + 3) { border-top:1px solid var(--rule-2); }
  .tally { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .tally div:not(:nth-child(3n + 1)) { padding-right:0; border-right:0; } .tally div:nth-child(even) { padding-right:24px; border-right:1px solid var(--rule-2); }
  .topin { flex-wrap:wrap; row-gap:0; padding-top:10px; }
  /* a phone: one Menu button on the top line opens every group stacked, each page with its line (Igor, 24 Oct 2026) */
  .mnav-b { order:2; display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:5px 12px; border:1px solid rgba(255,255,255,.14); border-radius:999px; color:#f4efe4; font-size:14.5px; font-weight:550; cursor:pointer; user-select:none;
            position:relative; overflow:hidden; background:color-mix(in srgb, #040507 74%, transparent); -webkit-backdrop-filter:saturate(180%) blur(26px); backdrop-filter:saturate(180%) blur(26px);
            box-shadow:0 6px 20px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.1); }   /* matte black glass, the same as the Baroq AI pill (Igor, 25 Oct 2026) */
  .mnav-b > * { position:relative; }
  .mnav-t:focus-visible + .mnav-b { outline:2px solid var(--gold); outline-offset:2px; }
  .mnav-i, .mnav-i::before, .mnav-i::after { display:block; width:14px; height:1.5px; border-radius:2px; background:currentColor; transition:transform var(--ds-slow) var(--ds-ease), opacity var(--ds-fast) ease; }
  .mnav-i { position:relative; } .mnav-i::before, .mnav-i::after { content:""; position:absolute; right:0; } .mnav-i::before { top:-5px; } .mnav-i::after { top:5px; }
  .mnav-t:checked + .mnav-b .mnav-i { background:transparent; } .mnav-t:checked + .mnav-b .mnav-i::before { transform:translateY(5px) rotate(45deg); } .mnav-t:checked + .mnav-b .mnav-i::after { transform:translateY(-5px) rotate(-45deg); }
  .top nav { display:none; }
  .mnav-t:checked ~ nav { order:6; flex:1 0 100%; display:block; max-height:calc(100vh - 110px); max-height:calc(100dvh - 110px); overflow-y:auto; overscroll-behavior:contain; padding:6px 0 22px; }
  .top nav > a:not(.cta), .top nav .nd > a:first-child { display:flex; align-items:center; min-height:44px; padding:8px 0 2px; font-size:17px; font-weight:600; color:var(--ink); }
  .top nav > a.door { display:inline-flex; align-items:center; min-height:44px; margin-top:14px; padding:8px 16px; }
  .top nav .nd { display:block; border-top:1px solid var(--rule-2); } .top nav .nd:first-child { border-top:0; }
  .top nav .nd-menu { display:block; padding-bottom:10px; } .mm-in { display:none; }
  .mm-list { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:0 16px; margin:0; padding:0; list-style:none; }
  .top nav .nd-menu a { display:grid; gap:2px; align-content:center; min-height:44px; padding:8px 0; white-space:normal; color:var(--ink-2); }
  .top nav .nd-menu a strong { font-weight:550; font-size:15px; color:var(--ink); } .top nav .nd-menu a small { font-size:13.5px; line-height:1.4; color:var(--muted); }
  .top nav a:not(.cta):not(.door)::after { display:none; }
  /* the language globe moves into the open menu, so the top line keeps the logo, the gold button and Menu */
  .topin > .langs { display:none; }
  .mnav-t:checked ~ .langs { order:7; display:inline-flex; margin:0 -4px 14px 0; }
  .mnav-t:checked ~ .langs .langs-list { top:auto; bottom:calc(100% + 6px); right:0; left:auto; }
  .top nav a.cta { display:none; }
  /* a visitor's phone shows the gold button on the top line, where the log-in was (23 Oct 2026: it sat at the far end of
     the scrolling row, out of sight). The log-in stays in the footer; a signed-in phone keeps its account button here. */
  .top a.cta.phone { display:inline-flex; align-items:center; margin-right:auto; padding:5px 14px; min-height:40px; font-size:14.5px; }
  .topin:has(> a.cta.phone) { column-gap:12px; }
}
@media (max-width: 480px) {
  .mnav-b { padding:9px 12px; } .mnav-w { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .topin:has(> a.cta.phone) { column-gap:10px; } .top a.cta.phone { margin-right:auto; }
}
@media (max-width: 380px) { .topin:has(> a.cta.phone) { column-gap:8px; } .top a.cta.phone { padding:5px 10px; font-size:13.5px; } }
@media (max-width: 640px) {
  :root { --gutter:20px; --section:72px; }
  body { font-size:17px; }
  .heroin { padding-top:64px; padding-bottom:64px; gap:48px; }
  .watch-card { padding:26px 22px; border-radius:26px; row-gap:24px; } .marks { gap:7px; }
  .top nav a.door { display:none; }
  .topin:has(> a.cta.phone) nav a.door { display:inline-flex; padding:4px 12px; }   /* the gold button took its place on the top line */
  .top a.door.phone { display:inline-flex; margin-right:auto; border:1px solid var(--rule); border-radius:999px; align-items:center; min-height:40px; padding:5px 13px; color:var(--ink); font-weight:550; font-size:14.5px; text-decoration:none; background:var(--card); }
  .points, .lessons, .steps { grid-template-columns:minmax(0, 1fr); } .steps li::after { display:none; }
  .stripin { grid-template-columns:minmax(0, 1fr); } .stripin div, .stripin div + div { padding:18px 0; border-right:0; } .stripin div + div { border-top:1px solid var(--rule-2); }
  .tally dd { font-size:40px; } .tally div { padding:22px 0 22px 16px; } .tally div:nth-child(even) { padding-right:16px; }
  .price { padding:28px; border-radius:24px; } .price .amount b { font-size:50px; }
  .askbox { padding:26px; border-radius:24px; }
  .chart svg { min-width:680px; } .chart { padding:12px; border-radius:18px; }
  .kv2 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {   /* phones: the logo in the middle, Menu on the right, a visitor's gold button on the left; the account link (Dashboard, My account or Log in) is the first, blue row of the open menu (Igor, 25 Oct 2026) */
  .topin { display:grid; grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr); align-items:center; column-gap:8px; }
  .topin > .brand { grid-column:2; grid-row:1; justify-self:center; }
  .top .topin > a.phone { grid-column:1; grid-row:1; justify-self:start; margin:0; }
  .topin > a.door.phone { display:none; }
  .top .topin > a.cta.phone { display:none; }   /* no gold button on the phone's top line (Igor, 25 Oct 2026); it is the last row of the open menu */
  .top .mnav-t:checked ~ nav > a.cta { display:flex; justify-content:center; align-items:center; align-self:stretch; order:99; min-height:44px; margin:10px 0 4px; }
  .topin > .mnav-b { grid-column:3; grid-row:1; justify-self:end; }
  .topin > nav, .topin > .langs { grid-column:1 / -1; }
  .mnav-t:checked ~ nav { display:flex; flex-direction:column; }
  html .top .topin nav > a.door.door { order:-1; align-self:stretch; display:flex; align-items:center; justify-content:space-between; min-height:48px; margin:4px 0 10px; padding:10px 16px; border-radius:14px; font-size:17px; font-weight:650;
    color:var(--ds-door); border:1px solid color-mix(in srgb, var(--ds-door) 55%, transparent); background:color-mix(in srgb, var(--ds-door) 12%, transparent); }
  html .top .topin nav > a.door.door::after { content:"\2192"; }
}

/* Dark mode follows the visitor's device setting. No switch: a switch would need a cookie, and visitors get none.
   The colours come from the design tokens (design.py); only a few effects differ here. Screen only: a printed or
   saved page is dark ink on white, and the white-on-clear headline would vanish on paper without its background. */
@media screen and (prefers-color-scheme: dark) {
  .night { border-top:1px solid var(--rule-2); border-bottom:1px solid var(--rule-2); }
  .hero .pitch h1 { background:linear-gradient(180deg, #ffffff 40%, #b9c0ca); -webkit-background-clip:text; background-clip:text; }
}
.join { flex-direction:column; align-items:stretch; }
.join .cta { align-self:flex-start; }
.join-line, .join-priv { margin:0; }
.consent { display:flex; align-items:flex-start; gap:10px; }
.consent input { width:1.25rem; height:1.25rem; min-height:0; padding:0; margin:0.2rem 0 0; flex:none; accent-color:var(--gold); }
.consent label { font-size:15px; line-height:1.45; color:var(--ink-2); }
.night .consent label, .join.dark .consent label { color:var(--on-night-2); }
/* the centred forms (hero, closing band): one capsule, the email and the button side by side; the small print below */
.hero .join, .joinin .join { display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; gap:12px 0; }
.hero .join > *, .joinin .join > * { grid-column:1 / -1; order:3; }
.hero .join .field, .joinin .join .field { grid-column:1 / -1; grid-row:1; order:1; }
.hero .join .cta, .joinin .join .cta { grid-column:2; grid-row:1; order:2; margin-left:6px; min-width:0; min-height:44px; padding:10px 22px; position:relative; z-index:1; }
.hero .join .field input, .joinin .join .field input { min-height:56px; padding-left:220px; }
.hero .join .join-line, .joinin .join .join-line { order:4; margin-top:4px; }
.hero .join .consent, .joinin .join .consent { order:5; justify-content:center; text-align:right; }
.hero .join .join-priv, .joinin .join .join-priv { order:6; }
.hero .join .trap, .joinin .join .trap { order:7; }
@media (max-width: 640px) {
  .hero .join, .joinin .join { grid-template-columns:minmax(0, 1fr); }
  .hero .join .cta, .joinin .join .cta { grid-column:1; grid-row:2; margin-left:0; width:100%; min-height:50px; }
  .hero .join .field input, .joinin .join .field input { padding-left:18px; }
}
.recap { display:flex; flex-direction:column; gap:10px; max-width:70em; color:var(--ink-2); }
.prose ol, .prose ul { padding-right:1.35em; }
.prose li { margin:0.25em 0; }
.prose h3 { margin-top:8px; }
.prose blockquote { border-right:4px solid var(--gold); margin:6px 0; padding:2px 16px 2px 0; }
.prose strong { color:var(--ink); }
tr[id^="idea-"], .logentry[id] { scroll-margin-top:96px; }
.logentry:target { border-color:var(--gold); box-shadow:0 0 0 1px var(--gold), var(--ds-shadow-1); }   /* opened from a name on /record */
.logentry .runs { font-size:14.5px; color:var(--muted); margin-top:-2px; }   /* the same idea's run before or after this one */
h2.logday[id] { scroll-margin-top:96px; }
.logdays { margin-top:18px; font-size:15px; line-height:1.9; } .logdays > span:first-child { color:var(--muted); margin-left:4px; }
.rsort { margin:6px 0 14px; font-size:15px; line-height:1.9; } .rsort > span { color:var(--muted); margin-left:4px; }
.rsort a[aria-current] { color:var(--ink); font-weight:600; text-decoration:none; }
.rsort[id] { scroll-margin-top:96px; }
table.ideas tr:target td { background:var(--gold-wash); }   /* opened from "By kind of idea" below the table */
table.kinds td.n { white-space:nowrap; }
td.idea a { color:inherit; text-decoration-color:var(--ds-gold-line); text-underline-offset:3px; } td.idea a:hover { text-decoration-color:currentColor; }
/* progressive disclosure: detail tables stay one click away */
details.disclose { border:1px solid var(--rule); border-radius:18px; background:var(--card); }
details.disclose > summary { cursor:pointer; list-style:none; padding:16px 22px; font-weight:550; display:flex; justify-content:space-between; align-items:center; }
details.disclose > summary::-webkit-details-marker { display:none; }
details.disclose > summary::after { content:""; width:8px; height:8px; border-left:1.5px solid var(--ink-2); border-bottom:1.5px solid var(--ink-2); transform:rotate(45deg); transition:transform var(--ds-fast) ease; }
details.disclose[open] > summary::after { transform:rotate(-135deg); }
details.disclose > summary:hover { color:var(--gold-ink); }
details.disclose .tablebox { border:0; border-top:1px solid var(--rule); border-radius:0 0 18px 18px; box-shadow:none; }
.top nav a.lang { font:500 12.5px/1 var(--ds-mono); letter-spacing:0.06em; }
@media screen { body.lp {
  --ds-bg:#090b0f; --ds-sunk:#06080b; --ds-surface:#0f1217; --ds-raised:#151922; --ds-overlay:rgba(9, 11, 15, 0.74);
  --ds-line:#222833; --ds-line-2: #181c24; --ds-line-strong:#323a47;
  --ds-text:#eef1f5; --ds-text-2: #bac1cb; --ds-text-3: #87909c; --ds-inverse:#090b0f;
  --ds-gold:#d8ac56; --ds-gold-text:#e7c47c; --ds-gold-wash:#211b10; --ds-gold-line:#4d3d1d;
  --ds-up:#3ecf8a; --ds-up-bg:#0d2619; --ds-down:#ff6f63; --ds-down-bg:#321311;
  --ds-info:#63a3f7; --ds-info-bg:#0f1d33; --ds-warn:#f3b453; --ds-warn-bg:#2a1e0b;
  --ds-demo:#63a3f7; --ds-live:#ff6f63; --ds-door:#7db1e8;
  --ds-hover:rgba(255, 255, 255, 0.045); --ds-hover-2: rgba(255, 255, 255, 0.085);
  --ds-night:#040507; --ds-night-2: #0e1116; --ds-night-line:#1f242d; --ds-on-night:#eef1f5; --ds-on-night-2: #a3abb6;
  --ds-grid-line:rgba(255, 255, 255, 0.035);
  --ds-shadow-1: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 1px 2px rgba(0, 0, 0, 0.4);
  --ds-shadow-2: 0 1px 0 rgba(255, 255, 255, 0.035) inset, 0 16px 40px -20px rgba(0, 0, 0, 0.8);
  --ds-shadow-3: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 50px 100px -40px rgba(0, 0, 0, 0.95);
  --ds-sheen:linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0) 55%);
  --ds-glow:radial-gradient(60% 55% at 50% 0%, rgba(216, 172, 86, 0.14), rgba(216, 172, 86, 0) 70%);
  color-scheme:dark;

  --paper:var(--ds-bg); --card:var(--ds-surface); --sunk:var(--ds-sunk); --ink:var(--ds-text); --ink-2: var(--ds-text-2); --muted:var(--ds-text-3);
  --rule:var(--ds-line); --rule-2: var(--ds-line-2); --gold:var(--ds-gold); --gold-ink:var(--ds-gold-text); --gold-wash:var(--ds-gold-wash);
  --night:var(--ds-night); --night-2: var(--ds-night-2); --night-rule:var(--ds-night-line); --on-night:var(--ds-on-night); --on-night-2: var(--ds-on-night-2);
  --no:var(--ds-text-3); --idle:var(--ds-line); --yes:var(--ds-gold); --up:var(--ds-up); --down:var(--ds-down); --up-bg:var(--ds-up-bg); --down-bg:var(--ds-down-bg);
  --lift:var(--ds-shadow-3);
  --ui:var(--ds-sans); --display:var(--ds-sans); --mark:var(--ds-serif);
} }
/* ---------------------------------------------------------------- the landing page (home, 16 Oct 2026) ----
   Igor asked for a very clean landing page in the layout of a reference site he chose. One dark page, whatever the device setting: the same tokens
   as the site's dark mode (design.py), set on body.lp only. Left-aligned sections, a short gold line before each eyebrow,
   big headings, hairline cards. No inline style: the record bar's width is a class (lp-fill-N, steps of 5).
   Dark on screen only: printers drop backgrounds, so on paper the page is dark ink on white like every other page. */
body.lp { background:var(--paper); }
@media print { .hero .pitch h1 { background:none; color:var(--ink); } }
/* printing a guide, the record or a tool's answer: the content only, on white, without the menus, and with no card or
   heading split across pages (until 16 Oct 2026 a printed trading plan ran to three pages, most of it the site around it) */
@media print {
  header.top, footer.foot, .skip, nav.crumbs, .explainer, .next-reads { display:none !important; }
  body { background:#fff; }
  .pagehead { padding-top:0; padding-bottom:12px; }
  h1, h2, h3, h4 { break-after:avoid; }
  .logentry, .lcard, .planout dl > div, .planlist, .toolout > div, details.qa, tr, figure, .chart { break-inside:avoid; }
  .logentry, .lcard, .planout { box-shadow:none; }
  details.qa::details-content { content-visibility:visible; }   /* every answer of an FAQ prints, not only the open one */
  .prose a[href^="http"]::after { content:" (" attr(href) ")"; font-size:0.85em; color:var(--muted); word-break:break-all; }
}
.lp h1 em, .lp h2 em { font-style:normal; color:var(--gold); -webkit-text-fill-color:var(--gold); }
.offer-line { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin:14px 0 0; padding:10px 14px; border:1px solid var(--line, rgba(201,162,39,.35)); border-radius:10px; font-size:15px; }
.offer-line .offer-free { color:var(--gold); font-weight:600; }
.offer-line span:nth-child(2) { flex:1 1 260px; }
.offer-line a.cta.offer-cta { padding:6px 16px; min-height:0; font-size:14.5px; }
@media print { .offer-line { display:none; } }
.plans-box { margin:40px 0 24px; padding:28px; border:1px solid var(--gold); border-radius:20px; background:radial-gradient(120% 90% at 0% 0%, rgba(212,175,90,.10), transparent 60%), var(--card, transparent); }
.plans-box > p { max-width:62ch; }
.plans-two > div { display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:20px 22px; border:1px solid var(--rule); border-radius:16px; background:var(--card, transparent); transition:border-color var(--ds-fast, .15s) ease, transform var(--ds-fast, .15s) ease; }
.plans-two > div:hover { border-color:var(--gold); transform:translateY(-2px); }
.plans-two .amount b { font-size:34px; letter-spacing:-0.03em; }
.plans-two .cta { width:100%; text-align:center; justify-content:center; margin-top:auto; }
.plans-join .lp-checks { display:flex; flex-direction:row; flex-wrap:wrap; gap:10px 14px; list-style:none; }
.plans-join .lp-checks li { flex:1 1 260px; }
.plans-box h2 { margin-top:0; }
.pay-trust { list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:6px 18px; margin:14px 0 6px; padding:0; font-size:13px; color:var(--muted, #9a9486); }
.pay-trust li::before { content:"\2713"; color:var(--gold); margin-left:6px; }
.plans-box em { color:var(--gold); font-style:normal; }
.plans-two { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:16px; margin:16px 0; }
.pass-cta { margin:8px auto 36px; }
.pass-cta .fine { margin:4px 0 0; }
.plans-two h3 { margin:0; } .plans-two .amount { margin:4px 0 10px; }
.plans-join { margin-top:24px; padding-top:20px; border-top:1px solid var(--rule); }
.plans-join h3 { margin:0 0 8px; } .plans-join .lp-checks { padding-right:0; margin:0 0 12px; }
.lp-eye { display:inline-flex; align-items:center; gap:12px; font:500 12.5px/1.2 var(--ds-mono); letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-2); }
.lp-eye::before { content:""; width:28px; height:1px; background:var(--gold); flex:none; }
.lp-k { display:block; font:500 11.5px/1.3 var(--ds-mono); letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); }
.lp-ctas { display:flex; flex-wrap:wrap; align-items:center; gap:14px 28px; }
.lp-ghost { color:var(--ink); text-decoration:none; }
.lp-ghost:hover { color:var(--gold-ink); }
/* hero: the statement on the left, the instrument on the right */
.lp-hero .heroin { flex-direction:row; align-items:center; gap:56px; padding-top:96px; padding-bottom:72px; }
.lp-hero .pitch { flex:1.1 1 0; align-items:flex-start; text-align:right; max-width:none; }
.hero.lp-hero .pitch h1 { max-width:11ch; font-size:clamp(46px, 6.2vw, 92px); }
.lp-hero .pitch .lead { max-width:30em; }
/* a page's opening as short lines with room between them (Igor, 17 Oct 2026: "3 subrows with more space ... all text on the site like that") */
.leadlines { display:flex; flex-direction:column; gap:12px; max-width:36em; }
.leadlines p { font-size:clamp(19px, 1.6vw, 22px); line-height:1.5; color:var(--ink-2); letter-spacing:-0.012em; }
.leadlines strong { color:var(--ink); font-weight:600; }
.lp-rows { list-style:none; display:flex; flex-direction:column; gap:16px; max-width:31em; margin:6px 0 4px; }
.lp-rows li { position:relative; padding-right:28px; font-size:clamp(17px, 1.35vw, 19.5px); line-height:1.55; color:var(--ink-2); letter-spacing:-0.01em; }
.lp-rows li::before { content:""; position:absolute; right:0; top:0.8em; width:16px; height:1px; background:var(--gold); }
.lp-rows b { color:var(--ink); font-weight:600; }
/* the letter under the hero (Igor, 17 Oct 2026, after kingkong.co: "this style is more better for conversion"): one short line
   per paragraph, read top to bottom like a note from a person, every number from the record */
.lp-letter.wrap { max-width:780px; display:flex; flex-direction:column; gap:20px; font-size:clamp(19px, 1.5vw, 21px); line-height:1.6; color:var(--ink-2); }
.lp-letter p { max-width:34em; }
.lp-letter .lp-dated { align-self:flex-start; font:500 12.5px/1.4 var(--ds-mono); letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-2); padding-bottom:10px; border-bottom:2px solid var(--gold); margin-bottom:10px; }
.lp-letter .lp-dear { color:var(--ink); font-size:1.12em; font-weight:550; }
.lp-letter strong { color:var(--ink); font-weight:650; }
.lp-letter em { color:var(--ink); }
.lp-letter mark { background:color-mix(in srgb, var(--gold) 24%, transparent); color:var(--ink); padding:0.05em 0.25em; border-radius:4px; }
.lp-letter u { color:var(--ink); font-weight:600; text-decoration-color:var(--gold); text-decoration-thickness:2px; text-underline-offset:6px; }
.lp-letter .lp-ctas { margin-top:16px; }
.lp-hero .watch-card { flex:1 1 0; grid-template-columns:minmax(0, 1fr); padding:36px; row-gap:26px; }
.lp-hero .watch-card::before { right:36px; left:36px; }
.lp-hero .marks { max-width:330px; gap:clamp(6px, 0.8vw, 10px); }
.lp-hero .heroin { align-items:stretch; }
.lp-hero .pitch { justify-content:center; }
/* the card as tall as the text beside it: the marks with their key on one line, two scores, the rest under "Show more" */
.lp-hero .watch-card { padding:32px 36px; row-gap:22px; align-content:space-between; }
.lp-hero .wc-body { flex-direction:row; align-items:center; gap:28px; }
.lp-hero .marks { flex:0 1 270px; max-width:270px; gap:8px; }
.lp-hero .key { flex:1 1 0; min-width:0; flex-direction:column; flex-wrap:nowrap; gap:12px; font-size:15px; white-space:normal; }
.lp-hero .key li { align-items:flex-start; } .lp-hero .key i { margin-top:3px; }
.lp-top .row { padding:13px 0; }
.wc-more > summary { cursor:pointer; list-style:none; display:flex; align-items:center; gap:10px; padding:13px 0; border-top:1px solid var(--rule-2);
  color:var(--gold-ink); font-weight:550; font-size:15.5px; }
.wc-more > summary::-webkit-details-marker { display:none; }
.wc-more > summary::after { content:""; width:7px; height:7px; margin-top:-4px; border-left:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); transition:transform var(--ds-fast) ease; }
.wc-more[open] > summary::after { transform:rotate(-135deg); margin-top:3px; }
.wc-more > summary:hover { color:var(--ink); }
.wc-more > summary:focus-visible { outline:2px solid var(--gold); outline-offset:4px; border-radius:4px; }
.wc-more .wc-close, .wc-more[open] .wc-open { display:none; } .wc-more[open] .wc-close { display:inline; }
.wc-more[open] > summary { order:2; } .wc-more[open] { display:flex; flex-direction:column; }
.lp-top .more { padding-top:13px; }
.lp-hero::before { -webkit-mask-image:radial-gradient(ellipse 60% 70% at 70% 30%, #000 25%, transparent 75%); mask-image:radial-gradient(ellipse 60% 70% at 70% 30%, #000 25%, transparent 75%); }
.lp-trust { display:grid; grid-template-columns:minmax(0, 1fr) auto auto; align-items:center; gap:18px 32px; padding-top:26px; padding-bottom:40px; border-top:1px solid var(--rule); }
.lp-trust > p { color:var(--muted); font-size:15px; display:flex; align-items:center; gap:12px; }
.lp-trust ul { list-style:none; display:flex; flex-wrap:wrap; gap:8px; }
.lp-trust li { border:1px solid var(--rule); border-radius:999px; padding:6px 14px; font-size:13.5px; color:var(--ink-2); background:var(--card); }
.lp-down { width:42px; height:42px; border-radius:50%; border:1px solid var(--ds-line-strong); display:grid; place-items:center; color:var(--ink); text-decoration:none; transition:border-color var(--ds-fast) ease, transform var(--ds-fast) var(--ds-ease); }
.lp-down:hover { border-color:var(--gold); color:var(--gold-ink); transform:translateY(2px); }
/* section heads: the title on the left, a short line of text on the right */
.lp-sec { display:flex; flex-direction:column; gap:44px; }
.lp-head { display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr); align-items:end; gap:20px 64px; }
.lp-head > div { display:flex; flex-direction:column; gap:18px; }
.lp-head > p { color:var(--ink-2); font-size:16.5px; max-width:30em; }
.lp-band { background:linear-gradient(180deg, var(--ds-sunk), var(--paper)); border-top:1px solid var(--rule-2); border-bottom:1px solid var(--rule-2); }
.lp-more { margin-top:-12px; }
.lp-links { display:flex; flex-wrap:wrap; gap:10px 32px; }
/* how it works: three cards, a number pill, a small picture at the bottom of each */
.lp-steps3 { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:20px; }
.lp-card { display:flex; flex-direction:column; gap:14px; background:var(--ds-sheen), var(--card); border:1px solid var(--rule); border-radius:22px; padding:28px; box-shadow:var(--ds-shadow-2); }
.lp-num { display:flex; align-items:center; gap:12px; font-size:14px; font-weight:550; color:var(--ink); }
.lp-num span { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--ds-gold-line); color:var(--gold-ink); background:var(--gold-wash); font:600 12.5px/1 var(--ds-mono); }
.lp-card h3 { font-size:21px; } .lp-card > p { color:var(--ink-2); font-size:15.5px; }
.lp-checks { list-style:none; display:flex; flex-direction:column; gap:8px; margin-top:auto; padding-top:10px; }
.lp-checks li { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 14px; border:1px solid var(--rule); border-radius:999px; font-size:14px; color:var(--ink-2); background:var(--ds-raised); }
.lp-checks li { position:relative; padding-left:42px; }
.lp-checks li::before { content:""; position:absolute; left:14px; top:50%; width:18px; height:18px; margin-top:-9px; border-radius:50%; background:var(--gold); }
.lp-checks li::after { content:""; position:absolute; left:20px; top:50%; width:6px; height:3.5px; margin-top:-3px; border-right:2px solid var(--ds-on-gold); border-bottom:2px solid var(--ds-on-gold); transform:rotate(-45deg); }
.lp-badge { margin:auto auto 0; padding:22px 30px; border-radius:18px; text-align:center; background:var(--ds-gold-grad); color:var(--ds-on-gold); box-shadow:0 20px 50px -24px color-mix(in srgb, var(--ds-gold) 80%, transparent); display:flex; flex-direction:column; gap:4px; }
.lp-badge .lp-k { color:color-mix(in srgb, var(--ds-on-gold) 70%, transparent); } .lp-badge b { font:680 54px/1 var(--display); letter-spacing:-0.04em; } .lp-badge span:last-child { font-size:13.5px; font-weight:550; }
/* plans: two cards side by side (Desk Pro in gold, with its tag), then one comparison table */
.lp-plans2 { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:20px; align-items:stretch; }
.lp-plans3 { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:20px; align-items:stretch; }
.lp-plan .lp-for { min-height:3.1em; color:var(--ink-2); font-size:16px; } .lp-plan .lp-for b { color:var(--ink); font-weight:600; }
.lp-plan .later a { color:var(--gold); } .lp-plan .cta.lp-alt { background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px var(--ds-gold-line); } .lp-plan .cta.lp-alt:hover { background:color-mix(in srgb, var(--gold) 10%, transparent); } .lp-plan .cta { margin-top:18px; } .lp-plan .lp-vipfine { font-size:13px; line-height:1.5; margin:16px 0 0; } .lp-plan form.lp-buy { margin:0; } .lp-plan li b { color:var(--ink); font-weight:600; }
.lp-vip .amount s.was { font:500 22px/1 var(--display); color:var(--muted); text-decoration:line-through; text-decoration-thickness:2px; text-decoration-color:color-mix(in srgb, var(--gold) 65%, var(--muted)); letter-spacing:-0.03em; }
.lp-tag { position:absolute; top:-14px; right:40px; padding:6px 14px; border-radius:999px; background:var(--ds-gold-grad); color:var(--ds-on-gold); font-size:13px; font-weight:600; box-shadow:0 10px 30px -14px color-mix(in srgb, var(--ds-gold) 80%, transparent); }
.lp-tag.lp-tag-alt { background:var(--bg, #0b0c10); color:var(--gold); box-shadow:inset 0 0 0 1px var(--ds-gold-line); }
.lp-cmp { min-width:0; background:var(--card); border:1px solid var(--rule); border-radius:22px; padding:28px 30px; }
.lp-cmp table { width:100%; border-collapse:collapse; margin-top:10px; font-size:15.5px; }
.lp-cmp th, .lp-cmp td { white-space:normal; padding:14px 0; border-bottom:1px solid var(--rule-2); text-align:right; vertical-align:top; }
.lp-cmp tr:last-child > * { border-bottom:0; } .lp-cmp .lp-sub { display:block; margin-top:4px; font-size:13px; color:var(--muted); } .lp-cmp tbody th { color:var(--ink-2); font-weight:400; }
.lp-cmp thead th { font-size:13px; font-weight:600; color:var(--muted); letter-spacing:0.06em; text-transform:uppercase; }
.lp-cmp thead th + th, .lp-cmp td { width:24%; padding-right:16px; text-align:left; } .lp-cmp td { color:var(--ink-2); } .lp-cmp td b { color:var(--gold); font-weight:600; }
.lp-cmp .lp-more { display:flex; flex-wrap:wrap; gap:8px 28px; margin-top:14px; }
.lp-cmp .sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
/* the record in two numbers, then the four steps on a line */
.lp-split { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:32px 64px; align-items:end; }
.lp-split > div:first-child { display:flex; flex-direction:column; gap:18px; } .lp-split p { color:var(--ink-2); font-size:16.5px; }
.lp-big { display:grid; grid-template-columns:auto auto auto; justify-content:space-between; align-items:end; gap:10px 24px; }
.lp-big > div { display:flex; flex-direction:column; gap:8px; } .lp-big > i { font:300 72px/1 var(--display); color:var(--ds-line-strong); font-style:normal; }
.lp-big b { font:650 clamp(64px, 8vw, 112px)/0.9 var(--display); letter-spacing:-0.05em; color:var(--ink); font-variant-numeric:tabular-nums lining-nums; }
.lp-big b.gold { color:var(--gold); } .lp-big span { font:500 12px/1.2 var(--ds-mono); letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); }
.lp-bar { grid-column:1 / -1; height:3px; background:var(--ds-line-strong); border-radius:3px; overflow:hidden; }
.lp-bar span { display:block; height:100%; background:var(--gold); min-width:0; }
.lp-line4 { list-style:none; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:24px; position:relative; padding-top:8px; }
.lp-line4::before { content:""; position:absolute; right:12.5%; left:12.5%; top:25px; height:1px; background:var(--rule); }
.lp-line4 li { position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; }
.lp-line4 b { width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:var(--paper); border:1px solid var(--ds-gold-line); color:var(--gold-ink); font:600 13px/1 var(--ds-mono); position:relative; }
.lp-line4 h3 { font-size:17px; margin-top:6px; } .lp-line4 p { color:var(--muted); font-size:14.5px; max-width:20em; }
/* proof: the judge's newest verdicts as certificates */
.lp-certs { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px; }
/* questions: a short intro on the left, the answers on the right */
.lp-faq { display:grid; grid-template-columns:minmax(0, 0.8fr) minmax(0, 1.2fr); gap:32px 72px; align-items:start; }
.lp-faq-h { display:flex; flex-direction:column; align-items:flex-start; gap:18px; position:sticky; top:96px; }
.lp-faq-h p:not(.lp-eye):not(.note) { color:var(--ink-2); font-size:16.5px; max-width:26em; }
.lp-faq .qcol details.qa:first-of-type { border-top:1px solid var(--rule); }
.lp-center { text-align:center; }
.lp-faq-h .lp-k { margin-top:18px; }
.lp-read { list-style:none; display:flex; flex-direction:column; gap:10px; font-size:15.5px; }
.lp-read a { color:var(--ink-2); text-decoration:underline; text-decoration-color:var(--rule); text-underline-offset:3px; } .lp-read a:hover { color:var(--gold-ink); }
.lp-cert { display:flex; flex-direction:column; gap:10px; padding:20px; border:1px solid var(--rule); border-radius:18px; background:var(--ds-sheen), var(--card); color:var(--ink); text-decoration:none; transition:border-color var(--ds-fast) ease, transform var(--ds-fast) var(--ds-ease); }
.lp-cert:hover { color:var(--ink); border-color:var(--ds-line-strong); transform:translateY(-2px); }
.lp-cert-h { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.lp-pill { font:600 10.5px/1 var(--ds-mono); letter-spacing:0.08em; text-transform:uppercase; padding:5px 8px; border-radius:999px; color:var(--muted); border:1px solid var(--rule); }
.lp-pill.pass { color:var(--ds-on-gold); background:var(--gold); border-color:transparent; }
.lp-cert h3 { font-size:17px; line-height:1.3; } .lp-score { font:620 28px/1 var(--display); letter-spacing:-0.03em; font-variant-numeric:tabular-nums; }
.lp-why { color:var(--muted); font-size:14px; flex:1; }
.lp-cert-f { display:flex; justify-content:space-between; gap:10px; padding-top:12px; border-top:1px solid var(--rule-2); font-size:13.5px; color:var(--ink-2); }
.lp-cert-f > span:last-child { text-align:left; }
/* the method and the list, side by side */
.lp-duo { display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr); gap:40px 64px; align-items:start; }
.lp-duo > div:first-child { display:flex; flex-direction:column; gap:18px; } .lp-duo > div:first-child p { color:var(--ink-2); font-size:16.5px; max-width:34em; }
.lp-joincard { display:flex; flex-direction:column; gap:16px; padding:32px; border-radius:24px; border:1px solid var(--ds-gold-line); scroll-margin-top:96px;
  background:radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--gold) 16%, transparent), transparent 60%), var(--card); box-shadow:var(--ds-shadow-3); }
.lp-joincard h2 { font-size:clamp(26px, 2.6vw, 34px); } .lp-joincard .lp-checks { margin-top:0; padding-top:0; }
.lp-joincard .join.dark input { background:var(--ds-raised); border-color:var(--rule); color:var(--ink); }
.lp-joincard .consent label { color:var(--ink-2); }
/* start now */
.lp-start { display:flex; flex-direction:column; align-items:flex-start; gap:18px; padding:clamp(36px, 6vw, 72px); border-radius:28px; border:1px solid var(--rule); overflow:hidden; position:relative; isolation:isolate;
  background:radial-gradient(70% 120% at 100% 50%, color-mix(in srgb, var(--gold) 22%, transparent), transparent 65%), linear-gradient(90deg, var(--card), var(--ds-sunk)); }
.lp-start::before { content:""; width:34px; height:2px; background:var(--gold); }
.lp-start::after { content:""; position:absolute; inset:0; z-index:-1; background-image:linear-gradient(var(--ds-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--ds-grid-line) 1px, transparent 1px); background-size:44px 44px; -webkit-mask-image:linear-gradient(90deg, transparent 30%, #000); mask-image:linear-gradient(90deg, transparent 30%, #000); }
.lp-start p { color:var(--ink-2); font-size:17px; max-width:30em; }
/* the 17 Oct 2026 polish (Igor: "much better more cleaner ... advanced copy and graphics"). Every picture below is decoration
   drawn in CSS, with no number in it: the only figures on the page come from the judge's journal. */
.lp-ledger { margin-top:auto; padding:18px; border:1px solid var(--rule); border-radius:16px; background:var(--ds-raised); display:flex; flex-direction:column; gap:10px; }
.lp-ledger .lp-k { margin-bottom:2px; }
.lp-ledger span { display:grid; grid-template-columns:6.8em minmax(0, 1fr); align-items:center; gap:12px; font-size:13px; white-space:nowrap; color:var(--ink-2); }
.lp-ledger b { font-weight:500; } .lp-ledger span.n b { color:var(--ink); font-weight:600; }
.lp-ledger i { display:block; height:8px; border-radius:4px; }
.lp-ledger .g i { width:100%; border:1px solid var(--ds-gold-line); background:var(--gold-wash); }
.lp-ledger .c i { background:var(--ds-line-strong); }
.lp-ledger .c1 i { margin-right:84%; width:16%; } .lp-ledger .c2 i { margin-right:74%; width:10%; } .lp-ledger .c3 i { margin-right:67%; width:7%; }
.lp-ledger .n { padding-top:10px; border-top:1px solid var(--rule-2); } .lp-ledger .n i { width:67%; background:var(--ds-gold-grad); }
.lp-proof { display:flex; flex-direction:column; gap:8px; padding-top:36px; border-top:1px solid var(--rule); }
.lp-proof h2 { margin-bottom:6px; }
/* the moving strip of test results (Igor, 18 Oct 2026), each card with a small chart of its real out-of-sample result */
.lp-strip .lp-cert { width:min(320px, 80vw); flex:none; } .lp-strip .lp-pill { white-space:nowrap; }
.lp-spark { display:block; width:100%; height:44px; margin-top:2px; overflow:visible; }
.lp-spark polyline { fill:none; stroke:var(--gold); stroke-width:2; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.lp-spark.dn polyline { stroke:var(--muted); }
.lp-spark line { stroke:var(--rule); stroke-width:1; stroke-dasharray:3 3; vector-effect:non-scaling-stroke; }
.lp-spark-k { font-size:10.5px; }
.lp-proof p:not(.lp-k) { color:var(--ink-2); font-size:16.5px; max-width:40em; }
.lp-mark { position:absolute; left:clamp(40px, 9%, 140px); top:50%; transform:translateY(-50%); display:grid; grid-template-columns:repeat(3, 26px); gap:22px; pointer-events:none; }
.lp-mark i { width:26px; height:26px; border-radius:50%; background:var(--gold); box-shadow:0 0 34px color-mix(in srgb, var(--gold) 55%, transparent); opacity:0.85; }
.lp-mark i:nth-child(2n) { opacity:0.35; } .lp-mark i:nth-child(5) { opacity:1; box-shadow:0 0 60px var(--gold); }
@media (max-width: 860px) { .lp-mark { display:none; } }
body.lp #help .two { gap:64px; }
/* the first-month code pop-up: a glowing gold edge, our own mountains behind (site_static/offer.jpg), dark in the middle for the words */
dialog.offer { width:min(640px, calc(100% - 24px)); max-height:calc(100% - 24px); overflow:auto; border:1px solid color-mix(in srgb, var(--gold) 70%, transparent);
  border-radius:24px; padding:52px 44px 36px; color:#f4f1ea; text-align:center; color-scheme:dark;
  background:radial-gradient(48% 40% at 50% 44%, rgba(6, 6, 7, 0.62), rgba(6, 6, 7, 0.12) 80%, transparent),
    linear-gradient(180deg, rgba(6, 6, 7, 0.05), rgba(6, 6, 7, 0.1) 55%, rgba(6, 6, 7, 0.78)), #060607 url(/static/site/offer.jpg) 72% 30% / cover no-repeat;
  box-shadow:0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 28px color-mix(in srgb, var(--gold) 38%, transparent), 0 0 90px -10px color-mix(in srgb, var(--gold) 30%, transparent),
    inset 0 0 40px -12px color-mix(in srgb, var(--gold) 35%, transparent), 0 50px 140px -30px rgba(0, 0, 0, 0.95); }
dialog.offer[open] { display:flex; flex-direction:column; align-items:center; gap:18px; }
dialog.offer:not([open]) { display:none; }
dialog.offer:focus { outline:none; }
dialog.offer::backdrop { background:rgba(4, 5, 7, 0.78); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
dialog.offer:not(:modal) { position:fixed; inset:0; margin:auto; z-index:40; height:fit-content; }
dialog.offer > * { position:relative; z-index:1; }
dialog.offer a:not(.cta) { color:var(--gold); }
.offer-tag { font:600 12.5px/1 var(--ui); letter-spacing:0.32em; text-transform:uppercase; color:var(--gold); border:1.5px solid var(--gold); border-radius:999px;
  padding:12px 30px 12px 26px; background:rgba(6, 6, 7, 0.55); box-shadow:0 0 22px -6px color-mix(in srgb, var(--gold) 55%, transparent); }
dialog.offer h2 { font-size:clamp(60px, 13vw, 104px); line-height:0.92; letter-spacing:-0.055em; text-transform:uppercase; color:#fff; margin-top:6px;
  text-shadow:0 4px 40px rgba(0, 0, 0, 0.6); }
dialog.offer h2 em { font-style:normal; color:var(--gold); text-shadow:0 0 36px color-mix(in srgb, var(--gold) 45%, transparent); }
.offer-sub { font-size:clamp(19px, 3.6vw, 25px); font-weight:600; color:#fff; letter-spacing:-0.01em; margin-top:-6px; }
.offer-when { display:flex; align-items:center; gap:10px; font-size:16.5px; color:rgba(244, 241, 234, 0.82); }
.offer-ico { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.offer-form { width:100%; display:flex; flex-direction:column; gap:16px; margin-top:4px; }
.offer-form .field { flex:none; }
.offer-form .field label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.offer-form .field input, .offer-code { width:100%; min-height:64px; border:1px solid rgba(244, 241, 234, 0.45); border-radius:14px; background:rgba(4, 4, 5, 0.72);
  color:#fff; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.offer-form .field input { text-align:center; font:500 18px/1 var(--ui); letter-spacing:0.04em; padding:0 18px; }
.offer-form .field input::placeholder { color:rgba(244, 241, 234, 0.55); }
.offer-form .field input:focus { outline:none; border-color:var(--gold); box-shadow:0 0 0 3px color-mix(in srgb, var(--gold) 28%, transparent); }
.offer-code { display:flex; align-items:center; justify-content:center; gap:22px; padding:10px 18px; }
.offer-code span { font:650 clamp(22px, 5vw, 30px)/1 var(--ui); letter-spacing:0.3em; margin-left:-0.3em; }
.offer-copy { display:grid; place-items:center; width:42px; height:42px; border:0; border-radius:10px; background:transparent; color:#fff; cursor:pointer; }
.offer-copy:hover, .offer-copy.done { color:var(--gold); background:rgba(255, 255, 255, 0.06); }
.offer-btns { width:100%; display:grid; grid-template-columns:1.45fr 1fr; gap:14px; margin-top:6px; }
.offer-btns:has(> :only-child) { grid-template-columns:minmax(0, 1fr); }
.offer-btns form { margin:0; display:contents; }
.offer-go { width:100%; min-height:58px; justify-content:center; border-radius:12px; font-size:17px; }
.offer-go span { margin-right:8px; }
.offer-later { width:100%; min-height:58px; border:1px solid rgba(244, 241, 234, 0.5); border-radius:12px; background:rgba(4, 4, 5, 0.6); color:#fff; font:600 17px/1 var(--ui); cursor:pointer; }
.offer-later:hover { border-color:#fff; }
.offer-fine { font-size:13.5px; color:rgba(244, 241, 234, 0.62); max-width:32em; }
@media (max-width: 560px) {
  dialog.offer { padding:40px 20px 26px; gap:14px; background-position:0 0, 0 0, 78% 30%; }
  .offer-btns { grid-template-columns:minmax(0, 1fr); }
  .offer-tag { letter-spacing:0.24em; font-size:11.5px; }
}
@media screen and (prefers-reduced-motion: no-preference) {
  dialog.offer[open] { animation:ds-rise 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
  dialog.offer::backdrop { animation:ds-fade 0.4s ease-out both; }
}
/* what subscribers say (testimonials.py): only real ones; cards in the certificate style Igor picked; three or more drift slowly,
   and stop under a pointer or for reduced motion */
.tm-view { overflow:hidden; margin-top:34px; -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.tm-track { display:flex; width:max-content; }
.tm-set { display:flex; gap:24px; padding-left:24px; }
.tm-card { width:min(410px, 82vw); margin:0; display:flex; flex-direction:column; gap:14px; padding:28px 30px 26px; border:1px solid rgba(255, 255, 255, 0.14);
  border-radius:22px; background:linear-gradient(160deg, #141416, #0b0b0c 60%); color:#f4f1ea; box-shadow:0 30px 60px -40px rgba(0, 0, 0, 0.9); }
.tm-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.tm-k { display:block; font:600 12.5px/1 var(--ui); letter-spacing:0.2em; text-transform:uppercase; color:rgba(244, 241, 234, 0.62); }
.tm-plan { display:block; margin-top:10px; font-size:21px; font-weight:600; letter-spacing:-0.01em; color:#fff; }
.tm-pill { flex:none; padding:7px 12px; border-radius:999px; background:color-mix(in srgb, var(--gold) 16%, #000); color:var(--gold); font:650 13px/1 var(--ui); letter-spacing:0.04em; text-transform:uppercase; }
.tm-card blockquote { margin:6px 0 0; font-size:22px; line-height:1.32; font-weight:650; letter-spacing:-0.015em; color:#fff; }
.tm-who { display:flex; align-items:center; gap:10px; font-size:17px; font-weight:500; color:#fff; }
.tm-flag { font-size:22px; line-height:1; }
.tm-foot { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-top:4px; padding-top:18px; border-top:1px solid rgba(255, 255, 255, 0.12); }
.tm-foot .tm-k { margin-bottom:10px; } .tm-foot time, .tm-foot b { font-size:16.5px; color:#f4f1ea; font-weight:500; }
.tm-foot div:last-child { text-align:left; } .tm-foot b { font:700 16px/1 var(--serif, var(--ui)); letter-spacing:0.18em; }
@media screen and (prefers-reduced-motion: no-preference) {
  .tm-track.moving { animation:tm-drift var(--tm-dur, 90s) linear infinite; }
  .tm-view:hover .tm-track.moving, .tm-view:focus-within .tm-track.moving { animation-play-state:paused; }
  @keyframes tm-drift { from { transform:translateX(-0); } to { transform:translateX(50%); } }
}
@media (prefers-reduced-motion: reduce) { .tm-view { overflow-x:auto; } .tm-set[aria-hidden] { display:none; } }
.tm-form { display:grid; gap:12px; max-width:640px; margin:18px 0 30px; } .tm-form textarea { width:100%; font:inherit; }
.tm-list { list-style:none; padding:0; display:grid; gap:14px; } .tm-list li { padding:16px 18px; border:1px solid var(--rule); border-radius:14px; }
.tm-list form { display:inline; }
@media (max-width: 1000px) {
  .lp-hero .heroin { flex-direction:column; align-items:stretch; padding-top:64px; }
  .lp-hero .marks { flex-basis:300px; max-width:300px; }
  .lp-head, .lp-split, .lp-duo, .lp-faq { grid-template-columns:minmax(0, 1fr); } .lp-faq-h { position:static; }
  .lp-steps3 { grid-template-columns:minmax(0, 1fr); } .lp-certs { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .lp-plans2, .lp-plans3 { grid-template-columns:minmax(0, 1fr); gap:34px; }
  .lp-line4 { grid-template-columns:repeat(2, minmax(0, 1fr)); row-gap:32px; } .lp-line4::before { display:none; }
}
@media (max-width: 640px) {
  .lp-trust { grid-template-columns:minmax(0, 1fr); } .lp-down { display:none; }
  .lp-certs { grid-template-columns:minmax(0, 1fr); } .lp-tag { right:28px; }
  .lp-cmp { padding:22px 16px; } .lp-cmp table { table-layout:fixed; font-size:14px; } .lp-cmp thead th { font-size:11.5px; letter-spacing:0.03em; }
  .lp-cmp thead th + th, .lp-cmp td { width:29%; padding-right:10px; overflow-wrap:anywhere; }
  .lp-big b { font-size:64px; } .lp-big > i { font-size:48px; }
  dialog.offer { padding:40px 22px 24px; }
  .lp-hero .wc-body { flex-direction:column; align-items:flex-start; gap:22px; } .lp-hero .marks { flex:none; width:100%; max-width:330px; }
  .lp-hero .key { flex-direction:row; flex-wrap:wrap; gap:10px 22px; }
}
.lp-fill-0 { width:0%; }
.lp-fill-5 { width:5%; }
.lp-fill-10 { width:10%; }
.lp-fill-15 { width:15%; }
.lp-fill-20 { width:20%; }
.lp-fill-25 { width:25%; }
.lp-fill-30 { width:30%; }
.lp-fill-35 { width:35%; }
.lp-fill-40 { width:40%; }
.lp-fill-45 { width:45%; }
.lp-fill-50 { width:50%; }
.lp-fill-55 { width:55%; }
.lp-fill-60 { width:60%; }
.lp-fill-65 { width:65%; }
.lp-fill-70 { width:70%; }
.lp-fill-75 { width:75%; }
.lp-fill-80 { width:80%; }
.lp-fill-85 { width:85%; }
.lp-fill-90 { width:90%; }
.lp-fill-95 { width:95%; }
.lp-fill-100 { width:100%; }

.trendchart { width:100%; height:240px; display:block; background:var(--ds-sheen), var(--card); border:1px solid var(--rule); border-radius:18px; box-shadow:var(--ds-shadow-1); }
.trendchart polyline { fill:none; stroke-width:2; vector-effect:non-scaling-stroke; }
.trendchart .th { stroke:var(--no); } .trendchart .tf { stroke:var(--gold); }
.planout { background:var(--ds-sheen), var(--card); border:1px solid var(--rule); border-radius:20px; padding:24px; box-shadow:var(--ds-shadow-2); display:flex; flex-direction:column; gap:10px; overflow-wrap:anywhere; }
.planlist { padding-right:1.3em; color:var(--ink-2); display:flex; flex-direction:column; gap:4px; }
.support .tablebox th, .support .tablebox td { padding:12px 10px; } .support .tablebox th { white-space:normal; }   /* the risk ladder fits its column */
.field input[aria-invalid="true"] { border-color:var(--down); box-shadow:0 0 0 1px var(--down); }   /* the box whose number was refused */
.note.err a { color:inherit; }
fieldset.field { border:0; padding:0; margin:0; } fieldset.field legend { font-size:13.5px; color:var(--muted); font-weight:500; margin-bottom:6px; }
@media print { header.top, footer.foot, .askbox, .skip, .pf-bar, .pf-sim { display:none; } .contact.two { display:block; }
  main:has(.planout) .pagehead .lead { display:none; }   /* a printed plan fits one page: the plan, its checklist and the warning */
  .planout { gap:4px; padding:16px 20px; } .planout .toolout div { padding:6px 0; } .planout h4 { margin-top:8px; }
  .planlist { gap:0; } .planlist li { margin:0; } .planout > p.fine { display:none; } }
.toolout { display:flex; flex-direction:column; }
.toolout div { border-top:1px solid var(--rule); padding:14px 0; }
.toolout dt { font:500 11.5px/1.4 var(--ds-mono); letter-spacing:0.07em; text-transform:uppercase; color:var(--muted); margin-bottom:4px; } .toolout dd { color:var(--ink-2); }
.tooldisc { border-top:1px solid var(--rule); padding-top:14px; }
.oddsbar { width:100%; height:22px; border-radius:999px; background:var(--rule-2); display:block; overflow:hidden; }
.oddsbar .pass, .oddskeys .k.pass { fill:var(--up); background:var(--up); }
.oddsbar .daily, .oddskeys .k.daily { fill:var(--down); background:var(--down); }
.oddsbar .max, .oddskeys .k.max { fill:var(--gold); background:var(--gold); }
.oddsbar .time, .oddskeys .k.time { fill:var(--no); background:var(--no); }
.oddskeys { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:6px 18px; font-size:14.5px; color:var(--ink-2); }
.oddskeys .k { display:inline-block; width:10px; height:10px; border-radius:3px; margin-left:6px; }
tr.mine th, tr.mine td { background:var(--gold-wash); font-weight:600; }

.coach-curve { width:100%; height:220px; display:block; margin:18px 0; background:var(--ds-sheen), var(--card); border:1px solid var(--rule); border-radius:18px; box-shadow:var(--ds-shadow-1); }
.coach-curve .cl { fill:none; stroke:var(--gold); stroke-width:2; vector-effect:non-scaling-stroke; }
.coach-curve .cf { stroke:var(--down); stroke-width:1.5; stroke-dasharray:6 5; vector-effect:non-scaling-stroke; }
.coach-notes { display:flex; flex-direction:column; gap:10px; padding-right:1.2em; color:var(--ink-2); }
.coach-groups { display:grid; gap:18px; grid-template-columns:repeat(auto-fit, minmax(340px, 1fr)); margin-bottom:18px; }
.pf-table caption { text-align:right; font-weight:600; padding:12px 14px 4px; }

table.data { width:100%; border-collapse:collapse; margin:12px 0; font-size:14.5px; display:block; overflow-x:auto; }
/* wider than a phone (the market tables run to 1,300 px): a soft edge on the side that has more columns, as on .tablebox */
table.data { background:linear-gradient(to left, var(--paper) 30%, transparent) right center / 48px 100% no-repeat local,
  linear-gradient(to right, var(--paper) 30%, transparent) left center / 48px 100% no-repeat local,
  linear-gradient(to left, color-mix(in srgb, var(--ink) 16%, transparent), transparent) right center / 14px 100% no-repeat scroll,
  linear-gradient(to right, color-mix(in srgb, var(--ink) 16%, transparent), transparent) left center / 14px 100% no-repeat scroll; }
table.data th, table.data td { border-top:1px solid var(--rule); padding:9px 10px; text-align:right; vertical-align:top; }
table.data thead th { color:var(--muted); font:500 11px/1.3 var(--ds-mono); letter-spacing:0.08em; text-transform:uppercase; border-top:0; background:none; }
table.data tr.past td { color:var(--muted); }   /* the central bank calendar: meetings already behind us */
table.data tr.next td { background:var(--gold-wash); color:var(--ink); }   /* and the one coming next */
.tries { margin-top:10px; font-size:14px; color:var(--muted); } .tries a { display:inline-block; padding:6px 4px; margin-left:4px; font-family:var(--ds-mono); }   /* example tickers under the company form */
table.data td.num { text-align:left; white-space:nowrap; font-variant-numeric:tabular-nums; }
table.data tbody th { white-space:normal; min-width:10em; }   /* a row heading with its explanation wraps (the site-wide th rule is nowrap) */

@media (max-width: 480px) { table.terms th:nth-child(3), table.terms td:nth-child(3) { display:none; } table.terms { font-size:12.5px; } table.terms th, table.terms td { padding:8px 5px; } }   /* phone: Exchange is in the result text; Tick and Tick value stay on screen */
.mtabs { display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding-top:18px; padding-bottom:4px; }
.mtabs::-webkit-scrollbar { display:none; }
.mtabs a { flex:0 0 auto; padding:7px 14px; border:1px solid var(--rule); border-radius:999px; color:var(--ink-2); text-decoration:none; font-size:14px; white-space:nowrap; background:var(--card); }
.mtabs a:hover { border-color:var(--gold); color:var(--ink); }
.mtabs a[aria-current] { border-color:var(--gold); color:var(--ink); font-weight:600; }
.mcards { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; }
.mcards > a { display:flex; flex-direction:column; gap:6px; padding:16px 18px; border:1px solid var(--rule); border-radius:14px; background:var(--card); color:inherit; text-decoration:none; }
.mcards > a { position:relative; padding-bottom:40px; transition:border-color var(--ds-fast, .15s) ease, transform var(--ds-fast, .15s) ease; }
.mcards > a:hover { border-color:var(--gold); transform:translateY(-2px); box-shadow:0 14px 40px -24px rgba(212,175,90,.55); }
.mcards > a::after { content:"\2192"; position:absolute; left:18px; bottom:12px; color:var(--gold); transition:transform var(--ds-fast, .15s) ease; } .mcards > a:hover::after { transform:translateX(-5px); }
.mico { display:grid; place-items:center; width:38px; height:38px; border-radius:11px; color:var(--gold); border:1px solid var(--ds-gold-line, var(--rule)); background:rgba(212,175,90,.07); margin-bottom:4px; } .mico .ki { width:20px; height:20px; }
.mtabs { -webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image:linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
h2:has(+ .mktnav):not(#_) { font-size:22px; margin:28px 0 8px; }
.mktnav:not(:has(a:nth-child(3))) a { display:inline-flex; align-items:center; gap:10px; padding:10px 16px; border-radius:12px; font-size:15px; background:var(--card); transition:border-color var(--ds-fast, .15s) ease; }
.mktnav:not(:has(a:nth-child(3))) a::after { content:"\2192"; color:var(--gold); } .mktnav a:hover { border-color:var(--gold); }
.mcards h3 { margin:0; font-size:17px; } .mcards p { margin:0; font-size:14.5px; color:var(--ink-2); }
@media (max-width: 760px) { .mcards { grid-template-columns:minmax(0, 1fr); } }
.mbar { display:inline-block; width:90px; height:8px; vertical-align:middle; border-radius:4px; overflow:hidden; }
.mbar .track { fill:var(--rule-2); } .mbar .fill { fill:var(--gold); }
.mline { display:block; width:100%; height:120px; }
.mline polyline { fill:none; stroke:var(--gold); stroke-width:2; vector-effect:non-scaling-stroke; }
.mline .zero { stroke:var(--rule); stroke-width:1; vector-effect:non-scaling-stroke; }
.ycurve { display:block; width:100%; height:auto; }
.ycurve polyline { fill:none; stroke-width:2.5; } .ycurve .now { stroke:var(--gold); } .ycurve .prev { stroke:var(--muted); stroke-dasharray:4 4; }
.ycurve text { fill:var(--muted); font:500 11px var(--ds-mono); }
.key { font-size:14px; white-space:nowrap; } .key.now { color:var(--gold-ink, var(--gold)); } .key.prev { color:var(--muted); }
.oddsbar .o0, .oddskeys .k.o0 { fill:var(--gold); background:var(--gold); }
.oddsbar .o1, .oddskeys .k.o1 { fill:var(--muted); background:var(--muted); }
.mtool table.data a[aria-current] { font-weight:650; color:var(--ink); }
.mtool h3 { margin-top:18px; }
.mktnav { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px; } .mktnav a { padding:4px 12px; border:1px solid var(--rule); border-radius:999px; font-size:13.5px; text-decoration:none; color:var(--ink); }
.mktnav a[aria-current] { border-color:var(--gold); font-weight:650; }
.goldnow { font-size:30px; margin:4px 0 0; } .goldnow strong { color:var(--ink); }
.season-wrap { overflow-x:auto; } table.season { font-size:13px; min-width:760px; } table.season td, table.season th { padding:6px 5px; text-align:left; }
table.season th[scope="row"] { text-align:right; } table.season tfoot th, table.season tfoot td { border-top:1px solid var(--rule); font-weight:600; }
.hu1 { background:rgba(48, 164, 108, 0.12); } .hu2 { background:rgba(48, 164, 108, 0.24); } .hu3 { background:rgba(48, 164, 108, 0.38); }
.hd1 { background:rgba(229, 72, 77, 0.12); } .hd2 { background:rgba(229, 72, 77, 0.24); } .hd3 { background:rgba(229, 72, 77, 0.38); }
svg.seas, svg.hours { display:block; width:100%; height:auto; margin:6px 0 4px; }
svg.seas .g, svg.hours .g { stroke:var(--rule); stroke-width:1; } svg.seas .g.z, svg.hours .g.z { stroke:var(--muted); }
svg.seas .ax, svg.hours .ax { fill:var(--muted); font:11px ui-monospace, SFMono-Regular, Menlo, monospace; }
svg.seas polyline { fill:none; stroke-linejoin:round; stroke-linecap:round; }
svg.seas .yr { stroke:var(--muted); stroke-width:1; opacity:0.45; } svg.seas .avg { stroke:var(--gold); stroke-width:3; }
svg.seas polyline.now { stroke:var(--ink); stroke-width:2; } svg.seas circle.now { fill:var(--ink); }
svg.hours .bar { fill:var(--muted); opacity:0.55; } svg.hours .top { fill:var(--gold); }
.seas-key { list-style:none; display:flex; flex-wrap:wrap; gap:6px 18px; margin:0 0 8px; padding:0; font-size:13px; }
.seas-key .k { display:inline-block; width:16px; height:3px; margin-left:7px; vertical-align:3px; border-radius:2px; }
.seas-key .k.avg { background:var(--gold); height:4px; } .seas-key .k.now { background:var(--ink); } .seas-key .k.yr { background:var(--muted); opacity:0.6; }
details.hours-all { margin:6px 0 12px; } details.hours-all summary { cursor:pointer; font-weight:600; color:var(--gold); }

/* affiliate program (affiliates/pages.py) */
.aff-sec { padding-bottom:32px; }
.aff-gap { padding-bottom:72px; }
.aff-h2 { font-size:clamp(24px, 2.6vw, 32px); margin:8px 0 18px; }
.aff-ctas { display:flex; flex-wrap:wrap; gap:14px 22px; align-items:center; }
.aff-facts { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:14px; margin:0; }
.aff-facts > div { background:var(--card); border:1px solid var(--rule); border-radius:18px; padding:18px 20px; box-shadow:var(--ds-shadow-1); min-width:0; }
.aff-facts dt { font-size:13.5px; color:var(--muted); font-weight:500; }
.aff-facts dd { margin:4px 0 2px; font-size:clamp(26px, 3vw, 36px); font-weight:650; letter-spacing:-0.03em; color:var(--ink); font-variant-numeric:tabular-nums; }
.aff-facts dd.aff-sub { font-size:13.5px; font-weight:400; letter-spacing:0; color:var(--muted); margin:0; font-variant-numeric:normal; }
.aff-kpis dd { font-size:clamp(22px, 2.4vw, 30px); }
.aff-rules { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:18px 40px; }
.aff-rules p, .aff-rules li { color:var(--ink-2); }
.aff-list { padding-right:1.2em; display:flex; flex-direction:column; gap:8px; color:var(--ink-2); }
.aff-two { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; align-items:start; align-content:start; }
.aff-two .field, .ask .aff-two .field { flex:none; min-height:0; }
.aff-check { display:flex; gap:10px; align-items:flex-start; font-size:15px; color:var(--ink-2); }
.aff-check input { margin-top:4px; width:18px; height:18px; flex:none; accent-color:var(--gold); }
.aff-banners { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:22px; align-items:start; }
.aff-banner { margin:0; display:flex; flex-direction:column; gap:8px; }
.aff-banner img { width:100%; height:auto; border-radius:12px; border:1px solid var(--rule); }
.aff-banner figcaption { font-size:14px; color:var(--muted); }
.aff-posts { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:22px; }
.aff-post, .aff-reveal { display:flex; flex-direction:column; gap:10px; }
.aff-post textarea, .aff-reveal textarea, .aff-linkrow input { font:14.5px/1.5 var(--ds-sans); width:100%; padding:12px 14px; border:1px solid var(--rule); border-radius:12px; background:var(--card); color:var(--ink); resize:vertical; min-width:0; }
.aff-reveal { background:var(--gold-wash); border:1px solid var(--rule); border-radius:18px; padding:18px 20px; margin-bottom:22px; }
.aff-copy, .aff-btn { font:inherit; font-size:14px; font-weight:600; padding:8px 16px; border-radius:999px; border:1px solid var(--rule); background:var(--card); color:var(--ink); cursor:pointer; align-self:flex-start; min-height:40px; }
.aff-copy:hover, .aff-btn:hover { border-color:var(--gold); }
.aff-links { display:flex; flex-direction:column; gap:10px; margin-bottom:22px; }
.aff-linkrow { display:grid; grid-template-columns:150px minmax(0, 1fr) auto; gap:10px; align-items:center; }
.aff-linkrow span { font-size:14px; color:var(--muted); }
.aff-cols { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.4fr); gap:32px; }
.aff-cols h3 { margin:0 0 10px; }
.aff-ladder { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
.aff-ladder .aff-sub { color:var(--muted); font-size:13.5px; }
.aff-facts.six { grid-template-columns:repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .aff-facts.six { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .aff-facts.six { grid-template-columns:minmax(0, 1fr); } }
.aff-tier { background:var(--card); border:1px solid var(--rule); border-radius:18px; padding:16px 20px; margin-bottom:14px; }
.aff-tier p { margin:0 0 10px; }
.aff-bar { height:8px; border-radius:99px; background:var(--rule); overflow:hidden; }
.aff-bar i { display:block; height:100%; background:var(--ink); border-radius:99px; }
.aff-bar i.w0 { width:0%; } .aff-bar i.w10 { width:10%; } .aff-bar i.w20 { width:20%; } .aff-bar i.w30 { width:30%; } .aff-bar i.w40 { width:40%; } .aff-bar i.w50 { width:50%; } .aff-bar i.w60 { width:60%; } .aff-bar i.w70 { width:70%; } .aff-bar i.w80 { width:80%; } .aff-bar i.w90 { width:90%; } .aff-bar i.w100 { width:100%; }
.aff-table { overflow-x:auto; margin-bottom:18px; border:1px solid var(--rule); border-radius:14px; background:var(--card); }
.aff-table table { width:100%; border-collapse:collapse; font-size:14.5px; }
.aff-table th, .aff-table td { text-align:right; padding:10px 12px; border-bottom:1px solid var(--rule); vertical-align:top; }
.aff-table th { font-size:12.5px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:0.04em; }
.aff-table .n { text-align:left; font-variant-numeric:tabular-nums; white-space:nowrap; }
.aff-table tr:last-child td { border-bottom:0; }
.aff-table .acts { min-width:230px; }
.aff-inline { display:inline-flex; flex-wrap:wrap; gap:6px; margin:2px 0 2px 4px; }
.aff-inline input, .aff-inline select, .aff-approve input { font:inherit; font-size:14px; padding:6px 10px; border:1px solid var(--rule); border-radius:10px; background:var(--card); color:var(--ink); min-height:36px; }
.aff-app { border:1px solid var(--rule); border-radius:18px; padding:18px 20px; margin-bottom:16px; background:var(--card); display:flex; flex-direction:column; gap:10px; }
.aff-app h3 { margin:0; }
.aff-plan { color:var(--ink-2); white-space:pre-wrap; }
.aff-approve { display:flex; flex-wrap:wrap; gap:10px 16px; align-items:flex-end; }
.aff-approve label { display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--muted); }
.aff-approve input { width:120px; }
.aff-approve input[name=code] { width:190px; }
.aff-mini { display:flex; flex-wrap:wrap; gap:10px 28px; margin:0; }
.aff-mini dt { font-size:12.5px; color:var(--muted); }
.aff-mini dd { margin:2px 0 0; font-weight:600; font-variant-numeric:tabular-nums; }
.aff-terms h2 { font-size:clamp(22px, 2.2vw, 28px); margin-top:12px; }
.aff-terms li { margin-bottom:8px; color:var(--ink-2); }
/* the program page (17 Oct 2026, Igor: "affiliate page do similar just with our design and our offer") */
.aff-hero .aff-herogrid { display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr); gap:56px; align-items:center; padding-top:88px; padding-bottom:96px; }
.k-hero .aff-preview { flex:1 1 0; min-width:0; max-width:520px; }
.aff-ladsec .aff-ladder { margin-top:8px; }
.lp .aff-sec.lp-sec { padding-top:64px; padding-bottom:64px; }
.lp .aff-faq.lp-sec { display:grid; }
.aff-pitch { display:flex; flex-direction:column; gap:20px; }
.aff-pitch h1 { max-width:11ch; }
.aff-preview { position:relative; background:var(--ds-sheen), var(--card); border:1px solid var(--rule); border-radius:28px; padding:30px 30px 26px; box-shadow:var(--lift); display:flex; flex-direction:column; gap:14px; }
.aff-preview::before { content:""; position:absolute; right:40px; left:40px; top:-1px; height:1px; background:linear-gradient(90deg, transparent, var(--gold), transparent); opacity:0.8; }
.aff-preview p { margin:0; }
.aff-pv-head { display:flex; align-items:center; gap:10px; font:500 12.5px/1.4 var(--ds-mono); letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); }
.aff-dot { width:8px; height:8px; border-radius:50%; background:var(--up); box-shadow:0 0 0 4px var(--up-bg); }
.aff-pv-k { font-size:14px; color:var(--muted); }
.aff-pv-big { font-size:clamp(56px, 7vw, 88px); font-weight:650; letter-spacing:-0.05em; line-height:0.95; color:var(--ink); font-variant-numeric:tabular-nums; }
.aff-pv-big span { font-size:17px; letter-spacing:-0.01em; font-weight:500; color:var(--gold-ink); margin-right:12px; }
.aff-pv-ladder { list-style:none; margin:4px 0 0; padding:0; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0, 1fr); gap:8px; }
.aff-pv-ladder li { border:1px solid var(--rule); border-radius:14px; padding:10px 12px; display:flex; flex-direction:column; gap:2px; background:var(--paper); }
.aff-pv-ladder li.on { border-color:var(--ds-gold-line); background:var(--gold-wash); }
.aff-pv-ladder b { font-size:20px; font-variant-numeric:tabular-nums; }
.aff-pv-ladder span { font-size:12.5px; color:var(--muted); }
.aff-pv-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:1px; margin:4px 0 0; background:var(--rule); border:1px solid var(--rule); border-radius:14px; overflow:hidden; }
.aff-pv-grid div { background:var(--card); padding:12px 14px; }
.aff-pv-grid dt { font-size:12.5px; color:var(--muted); }
.aff-pv-grid dd { margin:2px 0 0; font-weight:650; font-size:17px; font-variant-numeric:tabular-nums; }
.aff-chip { position:absolute; font-size:13px; font-weight:600; padding:8px 14px; border-radius:999px; background:var(--card); border:1px solid var(--rule); box-shadow:var(--ds-shadow-2); white-space:nowrap; }
.aff-chip-a { top:-16px; left:28px; }
.aff-chip-b { bottom:-16px; right:28px; }
.aff-chip::before { content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--gold); margin-left:8px; vertical-align:1px; }
.aff-statement { background:var(--night); color:var(--on-night); }
.aff-st { padding-top:72px; padding-bottom:72px; display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:24px 56px; align-items:center; }
.aff-st h2 { color:var(--on-night); font-size:clamp(28px, 3.4vw, 44px); letter-spacing:-0.03em; margin:0; }
.aff-st p { color:var(--on-night-2); font-size:clamp(17px, 1.4vw, 20px); line-height:1.55; margin:0; }
.aff-over { display:grid; grid-template-columns:minmax(0, 0.9fr) minmax(0, 1.1fr); gap:48px; align-items:center; }
.aff-over-l { display:flex; flex-direction:column; gap:16px; }
.aff-over-l h2 { font-size:clamp(32px, 4vw, 52px); letter-spacing:-0.035em; margin:0; }
.aff-over-l p { color:var(--ink-2); margin:0; }
.aff-cards { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; }
.aff-card, .aff-steps li { background:var(--card); border:1px solid var(--rule); border-radius:20px; padding:22px; box-shadow:var(--ds-shadow-1); display:flex; flex-direction:column; gap:8px; }
.aff-card h3, .aff-steps h3 { margin:4px 0 0; font-size:19px; }
.aff-card p, .aff-steps p { margin:0; color:var(--ink-2); font-size:15px; }
.aff-ico { color:var(--gold-ink); width:38px; height:38px; padding:8px; border-radius:12px; background:var(--gold-wash); flex:none; }
.aff-howhead { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:16px 40px; margin-bottom:32px; }
.aff-howhead h2 { margin:6px 0 0; }
.aff-howhead > p { max-width:26em; color:var(--ink-2); margin:0; }
.aff-steps { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; }
.aff-steps li { position:relative; overflow:hidden; min-height:240px; padding-bottom:28px; }
.aff-steps li.on { border-color:var(--gold); background:linear-gradient(180deg, var(--gold-wash), var(--card) 70%); }
.aff-steps .from { margin-top:6px; }
.aff-num { position:absolute; left:18px; bottom:-14px; font-size:104px; font-weight:700; line-height:1; letter-spacing:-0.06em; color:var(--rule); pointer-events:none; }
.aff-steps li.on .aff-num { color:var(--ds-gold-line); }
.aff-steps li > *:not(.aff-num) { position:relative; }
.aff-small { min-height:40px; padding:8px 18px; font-size:15px; margin-top:6px; }
.aff-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px !important; }
.aff-tags span { font-size:13px; font-weight:600; padding:5px 12px; border:1px solid var(--rule); border-radius:999px; background:var(--paper); color:var(--ink); }
.aff-ready { position:relative; overflow:hidden; border-radius:28px; padding:clamp(32px, 5vw, 64px); background:var(--night); color:var(--on-night); display:flex; flex-direction:column; gap:16px; isolation:isolate; }
.aff-ready::after { content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(60% 90% at 100% 0%, color-mix(in srgb, var(--ds-gold) 28%, transparent), transparent 70%); }
.aff-ready h2 { color:var(--on-night); font-size:clamp(30px, 3.6vw, 48px); letter-spacing:-0.035em; max-width:16ch; margin:0; }
.aff-ready p { color:var(--on-night-2); max-width:34em; margin:0; }
.aff-ready .from { color:var(--ds-gold); }
.aff-ladsec .intro { margin-bottom:28px; }
.aff-faq { display:grid; grid-template-columns:minmax(0, 0.8fr) minmax(0, 1.2fr); gap:48px; align-items:start; }
.aff-faq-l { display:flex; flex-direction:column; gap:14px; position:sticky; top:96px; }
.aff-faq-l h2 { font-size:clamp(32px, 4vw, 52px); letter-spacing:-0.035em; margin:0; max-width:9ch; }
.aff-faq-l p { color:var(--ink-2); margin:0; }
a.aff-btn { text-decoration:none; display:inline-flex; align-items:center; }
@media (max-width: 960px) {
  .aff-hero .aff-herogrid, .aff-over, .aff-faq, .aff-st { grid-template-columns:minmax(0, 1fr); }
  .aff-hero .aff-herogrid { padding-top:56px; padding-bottom:72px; gap:48px; }
  .aff-faq-l { position:static; }
  .aff-steps { grid-template-columns:minmax(0, 1fr); }
  .aff-steps li { min-height:0; }
}
@media (max-width: 560px) {
  .aff-cards, .aff-pv-grid { grid-template-columns:minmax(0, 1fr); }
  .aff-preview { padding:24px 20px 22px; }
  .aff-chip-a { left:16px; } .aff-chip-b { right:16px; }
}
.aff-acc-panel { border:1px solid var(--rule); border-radius:16px; background:var(--card); padding:24px; }
.aff-acc-panel .aff-mini { margin:16px 0; }
.aff-desk { list-style:none; padding:0; }
.aff-locked { overflow:hidden; }
.aff-locked h3, .aff-locked > p:not(.aff-lockline) { filter:blur(3px); user-select:none; }
.aff-fog { display:grid; gap:8px; margin-top:12px; filter:blur(2px); }
.aff-fog i { display:block; height:10px; border-radius:6px; background:var(--rule); }
.aff-fog i:nth-child(2) { width:70%; } .aff-fog i:nth-child(3) { width:45%; }
.aff-lockline { margin:12px 0 0; font-weight:600; color:var(--gold-ink); }
@media (max-width: 760px) {
  .aff-cols, .aff-two { grid-template-columns:minmax(0, 1fr); }
  .aff-linkrow { grid-template-columns:minmax(0, 1fr) auto; }
  .aff-linkrow span { grid-column:1 / -1; }
}

/* ---------------------------------------------------------------- broker partner pages (/lp/, lp/web.py) ----
   The home page's dark landing (body.lp) with a stack of broker cards where the home page has its watch card. */
.bk-hero .heroin { align-items:flex-start; }
.bk-hero .pitch h1 { max-width:14ch; font-size:clamp(40px, 5.2vw, 76px); }
.bk-trust a { color:var(--gold); }
.bk-panel { flex:1 1 0; display:flex; flex-direction:column; gap:14px; max-width:460px; }
.bk-mini { display:flex; flex-direction:column; gap:10px; background:var(--ds-sheen), var(--card); border:1px solid var(--rule); border-radius:22px; padding:22px 24px; box-shadow:var(--ds-shadow-2); }
.bk-mini > p { color:var(--ink-2); font-size:15px; }
.bk-mini ul { list-style:none; display:flex; flex-direction:column; gap:6px; border-top:1px solid var(--rule-2); padding-top:10px; }
.bk-mini li { display:grid; grid-template-columns:9.5em minmax(0, 1fr); gap:10px; font-size:13.5px; color:var(--ink-2); }
.bk-mini li span { font:500 11px/1.6 var(--ds-mono); letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); }
.bk-name { font:680 22px/1.1 var(--display); letter-spacing:-0.02em; color:var(--ink); }
.bk-name::before { content:""; display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--gold); margin-left:10px; vertical-align:middle; }
.cta.bk-small { align-self:flex-start; min-height:40px; padding:8px 18px; font-size:14.5px; }
.bk-k { font:500 11px/1.4 var(--ds-mono); letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); }
.bk-sub { display:inline-flex; align-items:center; gap:10px; }
.bk-price { font:600 15px/1 var(--ds-mono); color:var(--gold-ink); white-space:nowrap; }
.bk-source { color:var(--gold); font-size:0.85em; white-space:nowrap; }
.bk-grid4 { grid-template-columns:repeat(4, minmax(0, 1fr)); }
.bk-compare th[scope="col"] { font:680 18px/1.2 var(--display); color:var(--ink); text-align:right; }
.bk-compare td { color:var(--ink-2); vertical-align:top; min-width:200px; }
.bk-compare th[scope="col"] { border-bottom:2px solid var(--gold); }
.bk-compare td + td, .bk-compare th[scope="col"] + th[scope="col"] { border-right:1px solid var(--rule); }
.bk-compare tbody tr:hover > * { background:rgba(212,175,90,.05); }
.bk-compare tfoot td { padding-top:22px; padding-bottom:22px; border-top:1px solid var(--rule); vertical-align:middle; } .bk-compare tfoot .cta { width:100%; text-align:center; justify-content:center; }
@media (max-width: 720px) {
  .tablebox:has(.bk-compare) { overflow:visible; }
  .bk-compare, .bk-compare tbody, .bk-compare tfoot, .bk-compare tr, .bk-compare th, .bk-compare td { display:block; width:auto; min-width:0; }
  .bk-compare thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .bk-compare caption { display:block; padding:14px 18px; }
  .bk-compare tr { padding:16px 18px; border-top:1px solid var(--rule); }
  .bk-compare th[scope="row"] { padding:0 0 8px; font:680 16px/1.3 var(--display); color:var(--ink); background:none; border:0; }
  .bk-compare td { padding:10px 0 0; border:0 !important; }
  .bk-compare td[data-label]::before { content:attr(data-label); display:block; font:500 11px/1.4 var(--ds-mono); letter-spacing:0.08em; text-transform:uppercase; color:var(--gold); margin-bottom:2px; }
  .bk-compare tfoot tr > td:empty { display:none; }
  .bk-compare tfoot td { padding:8px 0 0; }
}
.bk-facts { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 32px; }
.bk-facts > div { display:flex; flex-direction:column; gap:4px; padding:16px 0; border-top:1px solid var(--rule); }
.bk-facts dt { font:500 11.5px/1.3 var(--ds-mono); letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); }
.bk-facts dd { font-size:17px; color:var(--ink); }
.bk-two { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:20px; }
.bk-two + .bk-two { margin-top:20px; }
.bk-list { list-style:none; display:flex; flex-direction:column; gap:10px; }
.bk-list li { position:relative; padding-right:22px; color:var(--ink-2); }
.bk-list li::before { content:""; position:absolute; right:2px; top:0.62em; width:8px; height:8px; border-radius:50%; background:var(--gold); }
.bk-list.warn li::before { background:transparent; border:1.5px solid var(--gold); }
.bk-suits { color:var(--ink-2); font-size:15px; } .bk-suits b { color:var(--ink); }
.bk-two .cta { align-self:flex-start; margin-top:auto; }
.bk-tools { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px; }
.bk-tool { display:flex; flex-direction:column; gap:6px; padding:20px 22px; border:1px solid var(--rule); border-radius:18px; background:var(--card); text-decoration:none; color:var(--ink-2); font-size:14.5px; transition:border-color var(--ds-fast) ease, transform var(--ds-fast) var(--ds-ease); }
.bk-tool b { color:var(--ink); font-size:16.5px; } .bk-tool:hover { border-color:var(--ds-gold-line); transform:translateY(-1px); color:var(--ink-2); }
.bk-lessons { list-style:none; counter-reset:bk; display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:16px; }
.bk-lessons li { counter-increment:bk; display:flex; flex-direction:column; gap:10px; padding:22px; border:1px solid var(--rule); border-radius:18px; background:var(--card); }
.bk-lessons li::before { content:counter(bk, decimal-leading-zero); font:600 12.5px/1 var(--ds-mono); color:var(--gold-ink); }
.bk-lessons h3 { font-size:18px; } .bk-lessons p { color:var(--ink-2); font-size:14.5px; }
.bk-faq { max-width:52em; }
.bk-notice { display:flex; flex-direction:column; gap:14px; max-width:60em; border-top:1px solid var(--rule); }
.bk-notice p { color:var(--ink-2); font-size:14.5px; } .bk-notice b { color:var(--ink); }
.bk-admin-list { display:flex; flex-direction:column; gap:6px; margin-bottom:24px; }
@media (max-width: 1100px) { .bk-lessons { grid-template-columns:repeat(2, minmax(0, 1fr)); } .bk-tools, .bk-grid4 { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .bk-hero .heroin { flex-direction:column; padding-top:56px; gap:36px; } .bk-panel { max-width:none; width:100%; }
  .bk-two, .bk-facts, .bk-tools, .bk-grid4, .bk-lessons { grid-template-columns:minmax(0, 1fr); }
  .bk-mini li { grid-template-columns:minmax(0, 1fr); gap:0; }
}

/* ---------------------------------------------------------------- sales pages (/products, /go/, sales/web.py) ---- */
.sp-amount { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; }
.sp-amount b { font:660 44px/1 var(--display); letter-spacing:-0.04em; color:var(--ink); font-variant-numeric:lining-nums; }
.sp-amount span { color:var(--ink-2); font-size:14.5px; }
.sp-one { max-width:560px; width:100%; }
.sp-tools { grid-template-columns:repeat(3, minmax(0, 1fr)); }
.sp-tools .bk-tool { position:relative; padding:22px 24px 46px; gap:8px; overflow:hidden; }
.sp-tools .bk-tool::after { content:"\2192"; position:absolute; left:22px; bottom:16px; color:var(--gold); font-size:18px; transition:transform var(--ds-fast) var(--ds-ease); }
.sp-tools .bk-tool:hover { box-shadow:0 14px 40px -22px rgba(212,175,90,.55); } .sp-tools .bk-tool:hover::after { transform:translateX(-5px); }
.bk-prod::before { content:""; width:42px; height:42px; margin-bottom:6px; border-radius:12px; border:1px solid var(--ds-gold-line); background:rgba(212,175,90,.07) center / 22px no-repeat; }
@media (max-width: 1100px) { .sp-tools { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .sp-tools { grid-template-columns:minmax(0, 1fr); } }
.bk-prod.ic-desk::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4af5a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11'/%3E%3Cpath d='M4 6l1 1 2-2M4 12l1 1 2-2M4 18l1 1 2-2'/%3E%3C/svg%3E"); }
.bk-prod.ic-charts::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4af5a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
.bk-prod.ic-ai::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4af5a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4V5z'/%3E%3Cpath d='M8 10h8M8 13h5'/%3E%3C/svg%3E"); }
.bk-prod.ic-agents::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4af5a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2L4 14h7l-1 8 9-12h-7l1-8z'/%3E%3C/svg%3E"); }
.bk-prod.ic-connector::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4af5a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15' r='4'/%3E%3Cpath d='M11 12l9-9M16 7l3 3'/%3E%3C/svg%3E"); }
.bk-prod.ic-ea-kit::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4af5a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 8V3h10v5'/%3E%3Crect x='3' y='8' width='18' height='9' rx='2'/%3E%3Cpath d='M7 14h10v7H7z'/%3E%3C/svg%3E"); }

/* ---------------------------------------------------------------- page kit (sales/kit.py): /products, /go/, /lp/, /education */
.ki { width:22px; height:22px; flex:none; color:var(--gold-ink); } .ki.sm { width:16px; height:16px; } .ki.lg { width:34px; height:34px; }
.k-hero .heroin { align-items:center; }
.k-hero .pitch h1 { max-width:13ch; font-size:clamp(42px, 5.4vw, 80px); }
.k-sub { font-size:clamp(18px, 1.45vw, 21px); line-height:1.55; color:var(--ink-2); max-width:31em; letter-spacing:-0.01em; }
.k-sub b { color:var(--ink); font-weight:600; }
.k-trust { list-style:none; display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:4px; }
.k-trust li { display:inline-flex; align-items:center; gap:7px; font-size:13.5px; color:var(--ink-2); }
/* the drawn product picture */
.kv { flex:1 1 0; min-width:0; max-width:560px; display:flex; flex-direction:column; gap:10px; margin:0; }
.kv figcaption { font:500 11px/1.4 var(--ds-mono); letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); text-align:left; }
.kv-win { position:relative; border-radius:20px; border:1px solid var(--ds-gold-line); background:var(--ds-sheen), var(--card); box-shadow:var(--ds-shadow-3), 0 40px 120px -40px color-mix(in srgb, var(--gold) 35%, transparent); overflow:hidden; padding:0 0 20px; transform:perspective(1400px) rotateY(-4deg) rotateX(2deg); }
.kv-bar { display:flex; align-items:center; gap:7px; padding:12px 16px; border-bottom:1px solid var(--rule-2); background:color-mix(in srgb, var(--ink) 3%, transparent); }
.kv-bar i { width:9px; height:9px; border-radius:50%; background:var(--rule); } .kv-bar i:first-child { background:var(--gold); }
.kv-bar span { margin-right:8px; font:500 11.5px/1 var(--ds-mono); letter-spacing:0.06em; color:var(--ink-2); }
.kv-rows { list-style:none; display:flex; flex-direction:column; gap:4px; padding:16px 18px 6px; }
.kv-row { display:grid; grid-template-columns:minmax(0, 11.5em) minmax(0, 1fr) auto; align-items:center; gap:12px; padding:10px 12px; border-radius:12px; font-size:13.5px; color:var(--ink); background:color-mix(in srgb, var(--ink) 2.5%, transparent); }
.kv-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kv-track { height:6px; border-radius:99px; background:var(--rule-2); overflow:hidden; } .kv-track b { display:block; height:100%; border-radius:99px; background:var(--ds-gold-grad); width:78%; }
.kv-row.t1 .kv-track b { width:46%; opacity:0.65; } .kv-row.t2 .kv-track b { width:22%; background:var(--muted); }
.kv-chip { font:600 10.5px/1 var(--ds-mono); letter-spacing:0.05em; text-transform:uppercase; padding:6px 9px; border-radius:99px; border:1px solid var(--ds-gold-line); color:var(--gold-ink); background:var(--gold-wash); white-space:nowrap; }
.kv-row.t1 .kv-chip { border-color:var(--rule); color:var(--ink-2); background:transparent; } .kv-row.t2 .kv-chip { border-color:var(--rule); color:var(--muted); background:var(--sunk); }
.kv-costs { list-style:none; display:flex; flex-wrap:wrap; gap:6px; padding:8px 18px 0; }
.kv-costs li { font-size:12px; color:var(--ink-2); border:1px dashed var(--rule); border-radius:99px; padding:4px 10px; }
.kv-meter { margin:16px 18px 0; padding:14px; border:1px solid var(--rule-2); border-radius:14px; display:flex; flex-direction:column; gap:10px; }
.kv-meter p { font:500 11px/1 var(--ds-mono); letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); }
.kv-gauge { position:relative; height:10px; border-radius:99px; background:linear-gradient(90deg, color-mix(in srgb, var(--ink) 18%, transparent), var(--rule-2) 30%, var(--rule-2) 70%, var(--gold-wash)); }
.kv-gauge b { position:absolute; right:30%; top:-3px; width:2px; height:16px; background:var(--ink-2); } .kv-gauge i { position:absolute; right:58%; top:-4px; width:18px; height:18px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px var(--gold-wash); }
.kv-legend { list-style:none; display:flex; justify-content:space-between; font-size:11.5px; color:var(--muted); }
.kv-chartwrap { display:grid; grid-template-columns:minmax(0, 1fr) 9.5em; gap:12px; padding:16px 18px 0; }
.kv-chart { position:relative; height:210px; display:flex; align-items:center; gap:4px; padding:0 4px; border-radius:12px; background:repeating-linear-gradient(0deg, transparent 0 41px, var(--rule-2) 41px 42px); }
.kv-chart > i { flex:1; border-radius:2px; background:var(--gold); height:34px; } .kv-chart > i.c1 { height:52px; margin-top:-40px; background:var(--muted); } .kv-chart > i.c2 { height:26px; margin-top:30px; } .kv-chart > i.c3 { height:64px; margin-top:-10px; background:var(--muted); }
.kv-chart > i:nth-child(n+8) { transform:translateY(-18px); } .kv-chart > i:nth-child(n+14) { transform:translateY(26px); } .kv-chart > i:nth-child(n+19) { transform:translateY(-34px); }
.kv-pin { position:absolute; top:10px; font:600 10px/1 var(--ds-mono); letter-spacing:0.04em; color:var(--paper); background:var(--gold); padding:5px 7px; border-radius:6px; white-space:nowrap; }
.kv-pin::after { content:""; position:absolute; right:10px; top:100%; width:1px; height:150px; background:linear-gradient(var(--gold), transparent); }
.kv-pin.p0 { right:26%; } .kv-pin.p1 { right:60%; top:34px; } .kv-pin.p2 { right:82%; top:58px; } .kv-pin.p2::after { height:120px; }
.kv-side { list-style:none; display:flex; flex-direction:column; gap:8px; }
.kv-side li { display:flex; flex-direction:column; gap:6px; padding:10px; border:1px solid var(--rule-2); border-radius:10px; }
.kv-side b { font:600 10.5px/1.2 var(--ds-mono); letter-spacing:0.05em; text-transform:uppercase; color:var(--ink-2); }
.kv-side span { height:5px; border-radius:99px; background:var(--rule-2); } .kv-side span + span { width:60%; background:var(--gold-wash); }
.kv-chat { display:flex; flex-direction:column; gap:12px; padding:18px; }
.kv-q { align-self:flex-end; max-width:80%; padding:10px 14px; border-radius:14px 14px 14px 4px; background:var(--gold-wash); border:1px solid var(--ds-gold-line); color:var(--ink); font-size:14px; }
.kv-a { display:flex; flex-direction:column; gap:8px; padding:14px; border-radius:14px 14px 4px 14px; background:color-mix(in srgb, var(--ink) 3%, transparent); border:1px solid var(--rule-2); max-width:86%; }
.kv-a span { height:7px; border-radius:99px; background:var(--rule); } .kv-a span:nth-child(2) { width:82%; } .kv-a span:nth-child(3) { width:58%; }
.kv-steps { border:1px solid var(--rule-2); border-radius:14px; padding:12px 14px; display:flex; flex-direction:column; gap:8px; }
.kv-steps p { font:500 11px/1 var(--ds-mono); letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); }
.kv-steps ul { list-style:none; display:flex; flex-direction:column; gap:6px; } .kv-steps li { display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--ink-2); }
.kv-conn { display:grid; grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr); align-items:center; gap:14px; padding:22px 18px 4px; }
.kv-col { list-style:none; display:flex; flex-direction:column; gap:8px; }
.kv-col li { padding:10px 12px; border:1px solid var(--rule-2); border-radius:10px; font-size:13px; color:var(--ink); background:color-mix(in srgb, var(--ink) 2.5%, transparent); }
.kv-link { display:flex; flex-direction:column; align-items:center; gap:8px; } .kv-link .ki { width:40px; height:40px; padding:8px; border-radius:50%; border:1px solid var(--ds-gold-line); background:var(--gold-wash); }
.kv-link span { font:600 10.5px/1.2 var(--ds-mono); letter-spacing:0.05em; text-transform:uppercase; color:var(--gold-ink); text-align:center; max-width:7em; }
.kv-link::before, .kv-link::after { content:""; width:1px; height:40px; background:linear-gradient(transparent, var(--gold), transparent); }
.kv-paper { margin:18px 18px 0; padding:20px 22px; border-radius:12px; background:color-mix(in srgb, var(--ink) 4%, transparent); border:1px solid var(--rule-2); }
.kv-ptitle { font:680 17px/1.2 var(--display); color:var(--ink); padding-bottom:12px; margin-bottom:12px; border-bottom:2px solid var(--gold); }
.kv-paper ol { list-style:none; display:flex; flex-direction:column; gap:10px; }
.kv-paper li { display:flex; align-items:center; gap:12px; font-size:14px; color:var(--ink); }
.kv-calc li { justify-content:space-between; color:var(--ink-2); } .kv-calc li span { width:48%; height:26px; border-radius:8px; border:1px solid var(--rule-2); background:color-mix(in srgb, var(--ink) 5%, transparent); }
.kv-out { display:flex; justify-content:space-between; align-items:center; margin-top:14px; padding:12px 14px; border-radius:10px; border:1px solid var(--ds-gold-line); background:var(--gold-wash); font-weight:600; color:var(--ink); font-size:14px; }
.kv-out i { width:72px; height:12px; border-radius:6px; background:var(--ds-gold-grad); transform-origin:left; }
.kv.anim .kv-out i { animation-name:k-type; animation-delay:2.2s; }
.k-tools { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; } .k-tools .k-cell h3 a { color:var(--ink); text-decoration:none; }
.k-tools .k-cell h3 a:hover { color:var(--gold); } .k-tools .k-cell p.lmeta { font-size:13.5px; color:var(--muted); margin-top:auto; }
.k-facts + section.prose { padding-top:72px; }
.k-guides { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; }
.k-guides .lcard { margin:0; padding:26px; border-radius:22px; border:1px solid var(--rule); background:var(--ds-sheen), var(--card); transition:border-color var(--ds-fast) ease, transform var(--ds-fast) var(--ds-ease); }
.fcards .lcard { position:relative; padding-bottom:54px; } .fcards .lcard p { font-size:16px; line-height:1.6; } .fcards .lcard .lmeta { font-size:13.5px; }
.fcards .lcard::after { content:"\2192"; position:absolute; left:26px; bottom:20px; font-size:20px; color:var(--gold); transition:transform var(--ds-fast) var(--ds-ease); } .fcards .lcard:hover::after { transform:translateX(-5px); }
.fcards .lcard h2 a { color:var(--ink); text-decoration:none; } .fcards .lcard h2 a::before { content:""; position:absolute; inset:0; border-radius:22px; }
.fico { display:grid; place-items:center; width:42px; height:42px; margin-bottom:14px; border-radius:12px; color:var(--gold); border:1px solid var(--ds-gold-line); background:rgba(212,175,90,.07); } .fico .ki { width:22px; height:22px; }
.k-guides .lcard:hover { border-color:var(--ds-gold-line); transform:translateY(-2px); } .k-guides .lcard h2, .k-guides .lcard h3 { font-size:20px; }  .k-guides .lcard h3 { margin:0; }
.lnav { display:flex; flex-wrap:wrap; gap:10px; margin:6px 0 34px; } .lnav a { padding:8px 16px; border:1px solid var(--rule); border-radius:999px; color:var(--ink); text-decoration:none; font-size:14.5px; }
.lnav a:hover { border-color:var(--ds-gold-line); color:var(--gold-ink); }
.lgroup { margin-top:44px; scroll-margin-top:90px; } .lgroup h2 { font-size:26px; margin:0 0 4px; } .lgintro { color:var(--muted); margin:0 0 18px; }
.lstart { list-style:none; counter-reset:lstep; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; margin:0; padding:0; }
.lstart li { counter-increment:lstep; position:relative; display:flex; flex-direction:column; gap:6px; padding:22px 66px 22px 22px; border:1px solid var(--rule); border-radius:20px; background:var(--ds-sheen), var(--card); }
.lstart li::before { content:counter(lstep); position:absolute; right:20px; top:20px; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; font:600 15px/1 var(--ds-mono); color:var(--gold-ink); border:1px solid var(--ds-gold-line); background:var(--gold-wash); }
.lstart a { font-weight:600; color:var(--ink); text-decoration:none; } .lstart a:hover { color:var(--gold-ink); } .lstart span { color:var(--muted); font-size:14.5px; }
.kv-checks li::before { content:""; width:16px; height:16px; border:1.5px solid var(--gold); border-radius:4px; flex:none; }
.kv-lessons li span { font:600 11.5px/1 var(--ds-mono); color:var(--gold-ink); width:2.2em; flex:none; }
/* the moving pictures (.kv.anim, the /go/ front pages): a seven-second loop of the product at work, still for anyone who
   asks the system for less motion */
@keyframes k-grow { 0%, 6% { transform:scaleX(0); } 32%, 88% { transform:scaleX(1); } 100% { transform:scaleX(1); opacity:0; } }
@keyframes k-pop { 0%, 34% { opacity:0; transform:scale(0.8); } 44%, 90% { opacity:1; transform:none; } 100% { opacity:0; } }
@keyframes k-in { 0%, 10% { opacity:0; transform:translateY(6px); } 22%, 90% { opacity:1; transform:none; } 100% { opacity:0; } }
@keyframes k-slide { 0%, 20% { right:10%; } 60%, 90% { right:58%; } 100% { right:10%; } }
@keyframes k-rise { 0%, 4% { transform:scaleY(0); } 24%, 92% { transform:scaleY(1); } 100% { transform:scaleY(1); opacity:0; } }
@keyframes k-drop { 0%, 40% { opacity:0; transform:translateY(-14px); } 52%, 92% { opacity:1; transform:none; } 100% { opacity:0; } }
@keyframes k-type { 0%, 20% { transform:scaleX(0); } 50%, 92% { transform:scaleX(1); } 100% { opacity:0; } }
@keyframes k-tick { 0%, 20% { background:transparent; } 30%, 92% { background:var(--gold); } 100% { background:transparent; } }
@keyframes k-pulse { 0%, 100% { box-shadow:0 0 0 0 color-mix(in srgb, var(--gold) 45%, transparent); } 50% { box-shadow:0 0 0 12px transparent; } }
.kv.anim * { animation-duration:7s; animation-iteration-count:infinite; animation-timing-function:var(--ds-ease, ease); animation-fill-mode:both; }
.kv.anim .kv-track b { transform-origin:right; animation-name:k-grow; }
.kv.anim .kv-chip, .kv.anim .kv-costs li { animation-name:k-pop; }
.kv.anim .kv-row:nth-child(2) b, .kv.anim .kv-row:nth-child(2) .kv-chip, .kv.anim .kv-costs li:nth-child(2) { animation-delay:0.35s; }
.kv.anim .kv-row:nth-child(3) b, .kv.anim .kv-row:nth-child(3) .kv-chip, .kv.anim .kv-costs li:nth-child(3) { animation-delay:0.7s; }
.kv.anim .kv-row:nth-child(4) b, .kv.anim .kv-row:nth-child(4) .kv-chip { animation-delay:1.05s; }
.kv.anim .kv-gauge i { animation-name:k-slide; }
.kv.anim .kv-chart > i { transform-origin:bottom; animation-name:k-rise; }
.kv.anim .kv-chart > i:nth-child(3n+2) { animation-delay:0.15s; } .kv.anim .kv-chart > i:nth-child(3n) { animation-delay:0.3s; }
.kv.anim .kv-chart > i:nth-child(n+8) { animation-delay:0.45s; } .kv.anim .kv-chart > i:nth-child(n+15) { animation-delay:0.75s; }
.kv.anim .kv-pin { animation-name:k-drop; } .kv.anim .kv-pin.p1 { animation-delay:0.5s; } .kv.anim .kv-pin.p2 { animation-delay:1s; }
.kv.anim .kv-side li, .kv.anim .kv-col li, .kv.anim .kv-steps li, .kv.anim .kv-paper li { animation-name:k-in; }
.kv.anim li:nth-child(2) { animation-delay:0.4s; } .kv.anim li:nth-child(3) { animation-delay:0.8s; } .kv.anim li:nth-child(4) { animation-delay:1.2s; }
.kv.anim li:nth-child(5) { animation-delay:1.6s; } .kv.anim li:nth-child(6) { animation-delay:2s; }
.kv.anim li:nth-child(7) { animation-delay:2.4s; } .kv.anim li:nth-child(8) { animation-delay:2.8s; } .kv.anim li:nth-child(9) { animation-delay:3.2s; }
.kv.anim .kv-a span { transform-origin:right; animation-name:k-type; } .kv.anim .kv-a span:nth-child(2) { animation-delay:0.4s; } .kv.anim .kv-a span:nth-child(3) { animation-delay:0.8s; }
.kv.anim .kv-steps li { animation-delay:1.6s; } .kv.anim .kv-steps li:nth-child(2) { animation-delay:2.1s; } .kv.anim .kv-steps li:nth-child(3) { animation-delay:2.6s; }
.kv.anim .kv-checks li::before { animation:k-tick 7s var(--ds-ease, ease) infinite both; } .kv.anim .kv-checks li:nth-child(2)::before { animation-delay:0.4s; }
.kv.anim .kv-checks li:nth-child(3)::before { animation-delay:0.8s; } .kv.anim .kv-checks li:nth-child(4)::before { animation-delay:1.2s; }
.kv.anim .kv-checks li:nth-child(5)::before { animation-delay:1.6s; } .kv.anim .kv-checks li:nth-child(6)::before { animation-delay:2s; }
.kv.anim .kv-checks li:nth-child(7)::before { animation-delay:2.4s; } .kv.anim .kv-checks li:nth-child(8)::before { animation-delay:2.8s; } .kv.anim .kv-checks li:nth-child(9)::before { animation-delay:3.2s; }
.kv.anim .kv-link .ki { animation:k-pulse 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .kv.anim * { animation:none !important; } }
/* the "see it work" band of a /go/ front page: the moving picture beside three beats */
.ab-watch .lp-sec > .ab-row { display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr); gap:56px; align-items:center; }
.ab-watch .kv { max-width:none; } .ab-watch .kv-win { transform:none; }
.ab-beats { list-style:none; display:flex; flex-direction:column; gap:22px; counter-reset:ab; }
.ab-beats li { counter-increment:ab; display:grid; grid-template-columns:44px minmax(0, 1fr); gap:16px; align-items:start; font-size:18px; color:var(--ink); line-height:1.45; }
.ab-beats li::before { content:counter(ab); width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:var(--ds-gold-grad); color:var(--ds-on-gold); font:700 16px/1 var(--display); }
.ab-offer { display:flex; flex-direction:column; gap:6px; padding:18px 20px; border:1px solid var(--ds-gold-line); border-radius:16px; background:linear-gradient(160deg, var(--gold-wash), transparent 70%); max-width:32em; }
.ab-offer b { color:var(--ink); font-size:17px; } .ab-offer span { color:var(--ink-2); font-size:14.5px; }
@media (max-width: 900px) { .ab-watch .lp-sec > .ab-row { grid-template-columns:minmax(0, 1fr); gap:32px; } }
/* facts strip */
.k-facts { border-top:1px solid var(--rule-2); border-bottom:1px solid var(--rule-2); background:var(--ds-sunk); }
.k-facts dl { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); }
.k-facts dl > div { display:flex; flex-direction:column; gap:6px; padding:26px 24px; border-right:1px solid var(--rule-2); }
.k-facts dl > div:first-child { border-right:0; padding-right:0; }
.k-facts dt { font:660 clamp(24px, 2.4vw, 34px)/1.05 var(--display); letter-spacing:-0.03em; color:var(--ink); }
.k-facts dd { font-size:14px; color:var(--ink-2); }
/* pains, flow, bento */
.k-pains { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:20px; }
.k-pain { display:flex; flex-direction:column; gap:12px; padding:28px; border-radius:22px; border:1px solid var(--rule); background:var(--card); position:relative; overflow:hidden; }
.k-pain::after { content:"\201C"; position:absolute; left:18px; top:-6px; font:700 96px/1 var(--display); color:var(--gold-wash); }
.k-pain .ki { width:44px; height:44px; padding:10px; border-radius:12px; background:var(--gold-wash); border:1px solid var(--ds-gold-line); margin-bottom:4px; }
.k-pain h3 { font-size:20px; } .k-pain p { color:var(--ink-2); font-size:15.5px; }
.k-flow { list-style:none; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:24px; counter-reset:kf; position:relative; }
.k-flow::before { content:""; position:absolute; right:30px; left:12%; top:29px; height:1px; background:linear-gradient(90deg, var(--gold), var(--ds-gold-line), transparent); }
.k-flow li { position:relative; display:flex; flex-direction:column; gap:10px; }
.k-dot { width:58px; height:58px; border-radius:50%; display:grid; place-items:center; background:var(--paper); border:1px solid var(--ds-gold-line); box-shadow:0 0 0 6px var(--paper), 0 0 30px -6px color-mix(in srgb, var(--gold) 60%, transparent); margin-bottom:8px; }
.k-dot .ki { width:24px; height:24px; }
.k-flow h3 { font-size:19px; } .k-flow p { color:var(--ink-2); font-size:15px; max-width:18em; }
.k-bento { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; }
.k-cell { display:flex; flex-direction:column; gap:10px; padding:26px; border-radius:22px; border:1px solid var(--rule); background:var(--ds-sheen), var(--card); transition:border-color var(--ds-fast) ease, transform var(--ds-fast) var(--ds-ease); }
.k-cell:hover { border-color:var(--ds-gold-line); transform:translateY(-2px); }
.k-cell .ki { width:40px; height:40px; padding:9px; border-radius:12px; background:var(--gold-wash); border:1px solid var(--ds-gold-line); margin-bottom:6px; }
.k-cell h3 { font-size:19px; } .k-cell p { color:var(--ink-2); font-size:15px; }
.k-cell.big { grid-column:span 2; grid-row:span 2; justify-content:flex-end; padding:34px; background:radial-gradient(ellipse 80% 70% at 100% 0%, var(--gold-wash), transparent 65%), var(--ds-sheen), var(--card); border-color:var(--ds-gold-line); }
.k-cell.big h3 { font-size:clamp(24px, 2.3vw, 32px); max-width:16ch; } .k-cell.big p { font-size:17px; max-width:30em; }
.k-tags { list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 22px; }
.k-tags li { font:600 11.5px/1 var(--ds-mono); letter-spacing:0.05em; text-transform:uppercase; padding:9px 12px; border-radius:99px; border:1px solid var(--ds-gold-line); color:var(--gold-ink); background:var(--paper); }
.k-cell.big .ki { width:56px; height:56px; padding:12px; margin-bottom:auto; }
/* versus table */
.k-vs-wrap { overflow-x:auto; border:1px solid var(--rule); border-radius:22px; background:var(--card); }
.k-vs { width:100%; border-collapse:collapse; min-width:560px; }
.k-vs th, .k-vs td { padding:16px 22px; text-align:right; border-bottom:1px solid var(--rule-2); font-size:15px; }
.k-vs tbody tr:last-child th, .k-vs tbody tr:last-child td { border-bottom:0; }
.k-vs thead th, .k-vs thead td { background:transparent; }
.k-vs thead th { font:600 12px/1.3 var(--ds-mono); letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-2); }
.k-vs thead th.k-us { color:var(--gold-ink); }
.k-vs tbody th { font-weight:500; color:var(--ink); width:46%; }
.k-vs .k-us { background:color-mix(in srgb, var(--gold) 6%, transparent); }
.k-yes, .k-no { display:inline-flex; align-items:center; gap:8px; } .k-yes { color:var(--ink); } .k-no { color:var(--muted); }
.k-yes::before, .k-no::before { content:"\2713"; font-weight:700; color:var(--gold-ink); } .k-no::before { content:"\2715"; color:var(--muted); }
/* fit, timeline, promise, closing */
.k-fit { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:20px; }
.k-fit article { display:flex; flex-direction:column; gap:16px; padding:30px; border-radius:22px; border:1px solid var(--rule); background:var(--card); }
.k-fit-yes { border-color:var(--ds-gold-line) !important; background:linear-gradient(160deg, var(--gold-wash), transparent 60%), var(--card) !important; }
.k-fit h3 { font-size:21px; } .k-fit ul { list-style:none; display:flex; flex-direction:column; gap:12px; }
.k-fit li { display:flex; gap:10px; align-items:flex-start; color:var(--ink-2); font-size:15.5px; } .k-fit li .ki { margin-top:4px; } .k-fit-no .ki { color:var(--muted); }
.k-time { list-style:none; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:0; border:1px solid var(--rule); border-radius:22px; background:var(--card); overflow:hidden; }
.k-time li { display:flex; gap:16px; padding:28px; border-right:1px solid var(--rule-2); } .k-time li:first-child { border-right:0; }
.k-n { width:38px; height:38px; flex:none; border-radius:50%; display:grid; place-items:center; background:var(--ds-gold-grad); color:var(--ds-on-gold); font:700 15px/1 var(--display); }
.k-time h3 { font-size:18px; margin-bottom:6px; } .k-time p { color:var(--ink-2); font-size:15px; }
.k-pricing { display:grid; grid-template-columns:minmax(0, 560px) minmax(0, 1fr); gap:24px; align-items:start; }
.k-pricing.solo { grid-template-columns:minmax(0, 560px); justify-content:center; }
.k-promise { display:flex; flex-direction:column; gap:12px; padding:32px; border-radius:22px; border:1px dashed var(--ds-gold-line); background:radial-gradient(ellipse 70% 60% at 0% 0%, var(--gold-wash), transparent 70%); }
.k-promise h3 { font-size:24px; } .k-promise p { color:var(--ink-2); font-size:15.5px; } .k-promise a { color:var(--gold-ink); }
.k-close { position:relative; overflow:hidden; border-top:1px solid var(--rule-2); background:radial-gradient(ellipse 60% 90% at 50% 120%, color-mix(in srgb, var(--gold) 22%, transparent), transparent 70%), var(--ds-sunk); }
.k-close .block { display:flex; flex-direction:column; align-items:center; text-align:center; gap:18px; padding-top:110px; padding-bottom:110px; }
.k-close h2 { font-size:clamp(36px, 4.6vw, 64px); max-width:16ch; } .k-close > div > p { color:var(--ink-2); font-size:19px; max-width:34em; }
.k-close .lp-ctas { justify-content:center; } .k-close .cta { min-height:56px; padding:14px 32px; font-size:18px; }
.k-close p.fine { font-size:13.5px; line-height:1.6; color:var(--muted); max-width:46em; margin:8px auto 0; }
.k-letter { position:relative; }
.k-letter.wrap { border-right:2px solid var(--gold); padding-right:clamp(22px, 3vw, 44px); }
@media (max-width: 1100px) { .k-bento { grid-template-columns:repeat(2, minmax(0, 1fr)); } .k-flow { grid-template-columns:repeat(2, minmax(0, 1fr)); row-gap:36px; } .k-flow::before { display:none; } }
@media (max-width: 900px) {
  .k-hero .heroin { flex-direction:column; align-items:stretch; padding-top:48px; gap:40px; }
  .kv { max-width:none; } .kv-win { transform:none; }
  .k-facts dl { grid-template-columns:repeat(2, minmax(0, 1fr)); } .k-facts dl > div { padding:18px 16px; border-right:0; border-top:1px solid var(--rule-2); } .k-facts dl > div:nth-child(-n+2) { border-top:0; } .k-facts dl > div:nth-child(odd) { padding-right:0; }
  .k-pains, .k-bento, .k-fit, .k-time, .k-pricing, .k-flow, .k-tools, .k-guides, .lstart { grid-template-columns:minmax(0, 1fr); }
  .k-cell.big { grid-column:auto; grid-row:auto; } .k-time li { border-right:0; border-top:1px solid var(--rule-2); } .k-time li:first-child { border-top:0; }
  .kv-chartwrap { grid-template-columns:minmax(0, 1fr); } .kv-side { flex-direction:row; } .kv-side li { flex:1; }
  .kv-row { grid-template-columns:minmax(0, 1fr) auto; } .kv-track { display:none; }
}
/* diagrams (walk, chain, hbars, years): the final picture is the default; where the browser can tie motion to scrolling,
   each part grows in as it comes into view, and nothing moves for anyone who asked for less motion */
.k-dia { margin:36px 0; padding:clamp(18px, 2.4vw, 28px); border:1px solid var(--ds-gold-line); border-radius:18px; background:var(--ds-sheen), var(--card); box-shadow:var(--ds-shadow-2, none); }
.k-dia figcaption { margin-top:14px; font:500 11px/1.5 var(--ds-mono); letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); }
.k-keys { list-style:none; display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:16px; padding:0; font-size:13.5px; color:var(--ink-2); }
.k-keys li { display:inline-flex; align-items:center; gap:8px; } .k-keys i { width:22px; height:12px; border-radius:3px; }
.kw-grid { display:flex; flex-direction:column; gap:5px; }
.kw-row { display:grid; grid-template-columns:22px repeat(14, minmax(0, 1fr)); gap:3px; align-items:center; }
.kw-years { grid-template-columns:22px repeat(7, minmax(0, 1fr)); margin-bottom:4px; }
.kw-y { font:500 11px/1 var(--ds-mono); color:var(--muted); border-right:1px solid var(--rule-2); padding-right:5px; }
.kw-y.kp { color:var(--gold-ink); }
.kw-n { font:500 11px/1 var(--ds-mono); color:var(--muted); }
.kw-row i, .k-keys i { height:18px; border-radius:4px; background:color-mix(in srgb, var(--ink) 5%, transparent); }
.kw-row i.tr, .k-keys i.tr { background:color-mix(in srgb, var(--gold) 22%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--gold) 60%, transparent); }
.kw-row i.te, .k-keys i.te { background:var(--gold); box-shadow:0 0 16px -2px color-mix(in srgb, var(--gold) 70%, transparent); }
.kw-row i.kp, .k-keys i.kp { background:repeating-linear-gradient(135deg, color-mix(in srgb, var(--ink) 14%, transparent) 0 3px, transparent 3px 7px); }
.k-chain ol { list-style:none; margin:0; padding:0; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0, 1fr); gap:14px; position:relative; }
.k-chain ol::before { content:""; position:absolute; right:22px; left:22px; top:21px; height:2px; background:linear-gradient(90deg, var(--gold), color-mix(in srgb, var(--gold) 20%, transparent)); }
.k-chain li { position:relative; display:flex; flex-direction:column; gap:8px; }
.k-chain li .ki { width:44px; height:44px; padding:10px; border-radius:50%; background:var(--card); border:1px solid var(--ds-gold-line); position:relative; }
.k-chain strong { font-size:15.5px; color:var(--ink); } .k-chain span { font-size:14px; line-height:1.5; color:var(--ink-2); }
.k-chain-out { margin-top:20px; padding:14px 18px; border-radius:12px; border:1px dashed var(--ds-gold-line); font-size:15.5px; color:var(--ink); background:var(--gold-wash); }
.k-run ol::after { content:""; position:absolute; top:17px; right:17px; width:10px; height:10px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px color-mix(in srgb, var(--gold) 25%, transparent), 0 0 18px var(--gold); opacity:0; pointer-events:none; z-index:-1; }
.k-run ol { z-index:0; } .k-run ol::before { z-index:-2; }   /* the pulse passes behind each step (a step is its own layer while it scrolls in) */
@keyframes k-lit { 0% { color:var(--gold); border-color:var(--gold); box-shadow:0 0 0 0 color-mix(in srgb, var(--gold) 55%, transparent); } 12% { color:var(--gold); border-color:var(--gold); box-shadow:0 0 0 10px color-mix(in srgb, var(--gold) 0%, transparent); } 30%, 100% { box-shadow:none; } }
@media (prefers-reduced-motion: no-preference) { .k-run ol::after { animation:8s linear infinite both; } .k-run li .ki { animation:k-lit 8s ease-out infinite; } }
@media (max-width: 900px) { .k-run ol::after { display:none; } }   /* a column on a phone: the steps still light in turn */
.k-hbars ol { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.k-hbars li { display:grid; grid-template-columns:minmax(7em, 11em) minmax(0, 1fr) minmax(3.5em, auto); gap:14px; align-items:center; font-size:14px; }
.kb-l { color:var(--ink-2); } .kb-v { font:600 13px/1 var(--ds-mono); color:var(--ink); text-align:left; }
.kb-bar { width:100%; height:12px; } .kb-bar .t { fill:color-mix(in srgb, var(--ink) 6%, transparent); } .kb-bar .b { fill:var(--gold); }
.k-years ol { list-style:none; margin:0; padding:26px 0 0; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0, 1fr); gap:18px; position:relative; }
.k-years ol::before { content:""; position:absolute; right:0; left:0; top:6px; height:2px; background:linear-gradient(90deg, color-mix(in srgb, var(--gold) 20%, transparent), var(--gold), color-mix(in srgb, var(--gold) 20%, transparent)); }
.k-years li { position:relative; display:flex; flex-direction:column; gap:6px; }
.k-years li::before { content:""; position:absolute; top:-26px; right:0; width:14px; height:14px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px var(--card), 0 0 18px var(--gold); }
.ky { font:600 13px/1 var(--ds-mono); letter-spacing:0.08em; color:var(--gold-ink); }
.k-years h3 { font-size:16.5px; line-height:1.3; } .k-years p { font-size:14px; line-height:1.5; color:var(--ink-2); } .k-years p.kw { font-size:13px; color:var(--muted); }
@keyframes k-show { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@keyframes k-wide { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes k-glow { 0%, 100% { box-shadow:0 0 6px -2px color-mix(in srgb, var(--gold) 50%, transparent); } 50% { box-shadow:0 0 22px 0 var(--gold); } }
@media (prefers-reduced-motion: no-preference) {
  .kw-row i.te { animation:k-glow 2.8s ease-in-out infinite; } .kw-row:nth-child(odd) i.te { animation-delay:1.4s; }
  @supports (animation-timeline: view()) {
    .kw-row:not(.kw-years), .k-chain li, .k-years li, .k-hbars li { animation:k-show linear both; animation-timeline:view(); animation-range:entry 0% cover 30%; }
    .kw-row:not(.kw-years) i.te { animation:k-show linear both, k-glow 2.8s ease-in-out infinite; animation-timeline:view(), auto; animation-range:entry 0% cover 30%, normal; }
    .kb-bar .b { transform-box:fill-box; transform-origin:right; animation:k-wide linear both; animation-timeline:view(); animation-range:entry 10% cover 45%; }
    .k-chain ol::before, .k-years ol::before { transform-origin:right; animation:k-wide linear both; animation-timeline:view(); animation-range:entry 10% cover 50%; }
  }
}
@media (max-width: 900px) {
  .k-chain ol, .k-years ol { grid-auto-flow:row; padding-top:0; padding-right:30px; }
  .k-chain ol::before, .k-years ol::before { right:21px; left:auto; top:0; bottom:0; width:2px; height:auto; }
  .k-chain ol { padding-right:0; } .k-chain li { flex-direction:row; flex-wrap:wrap; align-items:center; } .k-chain li span { flex-basis:100%; padding-right:58px; }
  .k-years ol::before { right:6px; } .k-years li::before { top:2px; right:-30px; }
  .k-hbars li { grid-template-columns:minmax(0, 1fr) auto; } .kb-bar { grid-column:1 / -1; grid-row:2; }
  .kw-row { gap:2px; } .kw-row i { height:14px; } .kw-y { font-size:10px; padding-right:3px; }
}
.k-moves li, .k-sess li { grid-template-columns:minmax(7em, 11em) minmax(0, 1fr) minmax(4.5em, auto); }
.k-sess li { grid-template-columns:minmax(7em, 11em) minmax(0, 1fr); }
.kb-bar .up, .kb-bar .z { fill:var(--gold); } .kb-bar .dn { fill:var(--down, #d4574e); } .kb-v.dn { color:var(--down, #d4574e); }
.k-pair { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap:12px 32px; align-items:start; }
.km-scale { display:flex; justify-content:space-between; font-size:12px; color:var(--ink-3, var(--ink-2)); } .km-ends { font-size:12px; }
.kb-bar.ks { height:18px; } .kb-bar .now { fill:var(--ink); }
.ks-axis { display:flex; justify-content:space-between; font:500 11px/1 var(--ds-mono); color:var(--muted); }
.ks-now { display:flex; align-items:center; gap:8px; margin-top:12px; font-size:13.5px; color:var(--ink-2); } .ks-now i { width:3px; height:14px; background:var(--ink); border-radius:2px; }
@media (max-width: 900px) { .k-sess li { grid-template-columns:minmax(0, 1fr); } .ks-hours > span:first-child { display:none; } .k-sess .kb-bar { grid-row:auto; } .k-moves .kb-v { grid-row:1; grid-column:2; } .km-ends > span:first-child { display:none; } .km-scale { grid-column:1 / -1; } }
/* the short hero of the market, tool and guide pages (24 Oct 2026): the product pages' type, no picture */
.k-mini .block { padding-top:clamp(44px, 6vw, 84px); padding-bottom:clamp(30px, 4vw, 52px); display:flex; flex-direction:column; gap:14px; }
.k-mini h1 { font-size:clamp(38px, 4.6vw, 64px); max-width:18ch; }
.k-mini .k-sub { max-width:40em; }
/* the guide's heading block (dash_site._contents, 24 Oct 2026): the product pages' type over the article */
.pagehead.k-art { position:relative; padding-top:clamp(48px, 6vw, 88px); padding-bottom:clamp(28px, 3.6vw, 44px); border-bottom:1px solid var(--rule-2); }
.pagehead.k-art::before { content:""; display:block; width:44px; height:2px; margin-bottom:22px; background:var(--gold); }
.pagehead.k-art::after { content:""; position:absolute; inset:0 -20vw auto; height:100%; z-index:-1; pointer-events:none; background:radial-gradient(ellipse 50% 70% at 20% 0%, color-mix(in srgb, var(--gold) 14%, transparent), transparent 70%); }
.pagehead.k-art h1.h1s { font-size:clamp(34px, 4.2vw, 56px); line-height:1.08; letter-spacing:-0.025em; }
.pagehead.k-art .lead { font-size:clamp(17px, 1.35vw, 20px); line-height:1.6; color:var(--ink-2); }
.pagehead.k-art .lead { padding-right:20px; border-right:3px solid var(--gold); }   /* the short answer, set apart */
.pagehead.k-art > .lp-eye { align-self:flex-start; }
/* a long article (Igor, 24 Oct 2026: "pro-agency quality"): on a wide screen the "On this page" list becomes a rail that stays in
   view beside the text, and a thin gold line along the top of the screen fills as the page is read (browsers that can tie an
   animation to scrolling; others simply do not show it) */
@media (min-width: 1180px) {
  .prose:has(> .toc.list) { max-width:1100px; display:grid; grid-template-columns:224px minmax(0, 740px); column-gap:64px; row-gap:0; justify-content:center; }
  .prose:has(> .toc.list) > * { grid-column:2; margin-bottom:16px; }
  .prose:has(> .toc.list) > .toc.list { grid-column:1; grid-row:1 / 400; position:sticky; top:92px; align-self:start; margin-bottom:0; max-height:calc(100vh - 124px); overflow-y:auto; }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    body:has(.toc.list)::before { content:""; position:fixed; z-index:30; top:0; right:0; left:0; height:3px; background:var(--ds-gold-grad, var(--gold)); transform:scaleX(0); transform-origin:right; pointer-events:none;
      animation:k-read linear both; animation-timeline:scroll(root); }
    @keyframes k-read { to { transform:scaleX(1); } }
  }
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes k-run3 { 0% { right:17px; opacity:0; } 6% { opacity:1; } 80% { right:calc((100% - 28px) * 2 / 3 + 28px + 17px); opacity:1; } 90%, 100% { right:calc((100% - 28px) * 2 / 3 + 28px + 17px); opacity:0; } }
  .k-run.k-n3 ol::after { animation-name:k-run3; }
  .k-run.k-n3 li:nth-child(2) .ki { animation-delay:3.20s; }
  .k-run.k-n3 li:nth-child(3) .ki { animation-delay:6.40s; }
  @keyframes k-run4 { 0% { right:17px; opacity:0; } 6% { opacity:1; } 80% { right:calc((100% - 42px) * 3 / 4 + 42px + 17px); opacity:1; } 90%, 100% { right:calc((100% - 42px) * 3 / 4 + 42px + 17px); opacity:0; } }
  .k-run.k-n4 ol::after { animation-name:k-run4; }
  .k-run.k-n4 li:nth-child(2) .ki { animation-delay:2.13s; }
  .k-run.k-n4 li:nth-child(3) .ki { animation-delay:4.27s; }
  .k-run.k-n4 li:nth-child(4) .ki { animation-delay:6.40s; }
  @keyframes k-run5 { 0% { right:17px; opacity:0; } 6% { opacity:1; } 80% { right:calc((100% - 56px) * 4 / 5 + 56px + 17px); opacity:1; } 90%, 100% { right:calc((100% - 56px) * 4 / 5 + 56px + 17px); opacity:0; } }
  .k-run.k-n5 ol::after { animation-name:k-run5; }
  .k-run.k-n5 li:nth-child(2) .ki { animation-delay:1.60s; }
  .k-run.k-n5 li:nth-child(3) .ki { animation-delay:3.20s; }
  .k-run.k-n5 li:nth-child(4) .ki { animation-delay:4.80s; }
  .k-run.k-n5 li:nth-child(5) .ki { animation-delay:6.40s; }
  @keyframes k-run6 { 0% { right:17px; opacity:0; } 6% { opacity:1; } 80% { right:calc((100% - 70px) * 5 / 6 + 70px + 17px); opacity:1; } 90%, 100% { right:calc((100% - 70px) * 5 / 6 + 70px + 17px); opacity:0; } }
  .k-run.k-n6 ol::after { animation-name:k-run6; }
  .k-run.k-n6 li:nth-child(2) .ki { animation-delay:1.28s; }
  .k-run.k-n6 li:nth-child(3) .ki { animation-delay:2.56s; }
  .k-run.k-n6 li:nth-child(4) .ki { animation-delay:3.84s; }
  .k-run.k-n6 li:nth-child(5) .ki { animation-delay:5.12s; }
  .k-run.k-n6 li:nth-child(6) .ki { animation-delay:6.40s; }
  @keyframes k-run7 { 0% { right:17px; opacity:0; } 6% { opacity:1; } 80% { right:calc((100% - 84px) * 6 / 7 + 84px + 17px); opacity:1; } 90%, 100% { right:calc((100% - 84px) * 6 / 7 + 84px + 17px); opacity:0; } }
  .k-run.k-n7 ol::after { animation-name:k-run7; }
  .k-run.k-n7 li:nth-child(2) .ki { animation-delay:1.07s; }
  .k-run.k-n7 li:nth-child(3) .ki { animation-delay:2.13s; }
  .k-run.k-n7 li:nth-child(4) .ki { animation-delay:3.20s; }
  .k-run.k-n7 li:nth-child(5) .ki { animation-delay:4.27s; }
  .k-run.k-n7 li:nth-child(6) .ki { animation-delay:5.33s; }
  .k-run.k-n7 li:nth-child(7) .ki { animation-delay:6.40s; }
}

/* ---------------------------------------------------------------- the /go/ pages (sales/go.py) ---- */
.go-main { overflow-x:clip; }
.go .go-hero { position:relative; padding:clamp(40px, 7vw, 104px) 0 clamp(40px, 6vw, 88px); }
.go-hero-in { display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr); gap:clamp(28px, 5vw, 72px); align-items:center; }
.go-pitch h1 { font:640 clamp(40px, 5.6vw, 82px)/1.02 var(--display); letter-spacing:-0.035em; margin:10px 0 18px; max-width:14ch; }
.go-pitch h1 em, .go h2 em { font-family:var(--ds-serif); font-style:italic; font-weight:400; color:var(--gold-ink); }
.go-sub { font-size:clamp(17px, 1.4vw, 20px); line-height:1.55; color:var(--ink-2); max-width:32em; margin-bottom:22px; }
.go-sub b { color:var(--ink); font-weight:600; }
.go-fig { margin:0; display:flex; flex-direction:column; gap:10px; min-width:0; }
.go-fig figcaption { font:500 11px/1.4 var(--ds-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); text-align:left; }
.go-head { max-width:760px; margin:0 auto clamp(26px, 4vw, 44px); text-align:center; }
.go-head h2 { font:620 clamp(30px, 3.6vw, 52px)/1.06 var(--display); letter-spacing:-0.03em; margin:8px 0 12px; }
.go-head p { color:var(--ink-2); font-size:17px; line-height:1.55; }
html.js .rv { opacity:0; transform:translateY(26px); transition:opacity .8s var(--ds-ease, ease), transform .8s var(--ds-ease, ease); }
html.js .rv.in { opacity:1; transform:none; }
.go-letter { max-width:700px; padding-top:clamp(40px, 6vw, 80px); padding-bottom:clamp(40px, 6vw, 80px); }
.go-letter p { font-size:19px; line-height:1.6; margin:0 0 14px; color:var(--ink); }
.go-letter .go-sign { font-family:var(--ds-serif); font-style:italic; color:var(--gold-ink); margin-top:22px; }
.go-letter mark { background:var(--gold-wash); color:var(--ink); padding:0 4px; border-radius:4px; }
/* the free things */
.go-free { position:relative; padding:clamp(8px, 0 24px) 2vw,; background:radial-gradient(60% 80% at 85% 10%, color-mix(in srgb, var(--gold) 16%, transparent), transparent 70%), var(--sunk); border-block:1px solid var(--ds-gold-line); }
.go-free-in { display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(0, .85fr); gap:clamp(28px, 4vw, 60px); align-items:start; }
.go-free h2 { font:620 clamp(30px, 3.4vw, 48px)/1.08 var(--display); letter-spacing:-0.03em; margin:8px 0 22px; }
.go-gifts { list-style:none; display:flex; flex-direction:column; gap:16px; }
.go-gift { display:grid; grid-template-columns:108px minmax(0, 1fr); gap:20px; align-items:center; padding:16px; border-radius:18px;
  border:1px solid var(--rule-2); background:var(--card); }
.go-gift h3 { font:600 19px/1.25 var(--display); margin:4px 0 6px; } .go-gift p { color:var(--ink-2); font-size:14.5px; line-height:1.5; }
.go-cover { position:relative; width:104px; height:142px; border-radius:10px 4px 4px 10px; padding:12px 10px; display:flex; flex-direction:column;
  gap:6px; background:#0c0d0f; color:#f3efe6; box-shadow:inset 6px 0 0 rgba(255,255,255,.08), 0 18px 40px -18px #000, 0 0 0 1px var(--ds-gold-line);
  transform:perspective(600px) rotateY(-14deg); transition:transform .5s var(--ds-ease, ease); overflow:hidden; }
.go-gift:hover .go-cover { transform:perspective(600px) rotateY(0) translateY(-4px); }
.go-cover::after { content:""; position:absolute; right:0; left:0; bottom:0; height:6px; background:var(--tone, var(--gold)); }
.go-cover b { font:400 13px/1.15 var(--ds-serif); } .go-cover .gc-k { font:600 8px/1 var(--ds-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--tone, var(--gold)); }
.go-cover .gc-b { margin-top:auto; font:500 7px/1 var(--ds-mono); letter-spacing:.1em; text-transform:uppercase; color:#a29c90; }
.c-paper { --tone:#e9dfc7; } .c-lab { --tone:#9fd3b6; } .c-red { --tone:#e08a7a; } .c-ink { --tone:#c9c4b8; } .c-gold { --tone:#d8b45a; }
.c-gold2 { --tone:#e6c77a; } .c-pine { --tone:#7fd0d0; } .c-chat { --tone:#8fb6e0; } .c-cal { --tone:#c7a2e0; } .c-screen { --tone:#7fd0d0; }
.c-tower { --tone:#b9c98a; } .c-race { --tone:#e0b07a; }
.go-also { margin-top:16px; color:var(--ink-2); } .go-also a { color:var(--gold-ink); }
.go-free-form { position:sticky; top:96px; padding:clamp(20px, 3vw, 30px); border-radius:22px; border:1px solid var(--ds-gold-line);
  background:var(--ds-sheen, none), var(--card); box-shadow:var(--ds-shadow-3); }
.go-form { display:flex; flex-direction:column; gap:12px; } .go-form > label { font-weight:600; }
.go-row { display:flex; flex-direction:column; gap:10px; }
.go-row input { width:100%; padding:15px 16px; font-size:16px; border-radius:12px; border:1px solid var(--rule); background:var(--paper); color:var(--ink); }
.go-row .cta { width:100%; justify-content:center; }
.go-tick { display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--ink-2); line-height:1.45; }
.go-tick input { margin-top:3px; flex:none; }
/* the free-book box at the end of a /learn guide (learn_box) */
.lb-box { margin:40px 0 8px; padding:clamp(20px, 4vw, 36px); border:1px solid var(--rule); border-radius:22px; background:var(--card); box-shadow:var(--ds-shadow-2); }
.lb-in { display:grid; grid-template-columns:auto minmax(0, 1fr); gap:clamp(18px, 4vw, 36px); align-items:start; }
.lb-title { font:620 24px/1.2 var(--display); margin:4px 0 8px; } .lb-copy > p { color:var(--ink-2); margin:0 0 14px; }
.lb-box .go-cover { transform:none; }
.lb-top { margin:8px 0 24px; padding:clamp(14px, 3vw, 22px); } .lb-top .lb-title { font-size:20px; margin:2px 0 10px; } .lb-top .go-tick { display:none; }
@media (max-width: 560px) { .lb-in { grid-template-columns:1fr; } .lb-cover { display:none; } }
.go-err { color:var(--down); font-weight:600; } .go-got h3 { font:620 26px/1.15 var(--display); margin:6px 0 8px; } .go-got p { color:var(--ink-2); }
.go-dl { display:flex; flex-direction:column; gap:10px; margin-top:16px; } .go-dl .cta { justify-content:center; }
/* offer and close */
.go-offer-in { display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr); gap:18px; max-width:980px; margin:0 auto; }
.go-deal { padding:clamp(22px, 3vw, 34px); border-radius:22px; border:1px solid var(--ds-gold-line); background:var(--card); display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
.go-deal.free { border-style:dashed; background:transparent; } .go-deal ul { padding-right:18px; color:var(--ink-2); line-height:1.7; }
.go-big { font:660 clamp(34px, 3.6vw, 52px)/1 var(--display); letter-spacing:-0.035em; } .go-deal p { color:var(--ink-2); }
.go-close { padding:clamp(56px, 0 120px) 8vw,; text-align:center; background:radial-gradient(50% 70% at 50% 100%, color-mix(in srgb, var(--gold) 18%, transparent), transparent 70%); }
.go-close h2 { font:640 clamp(34px, 4.6vw, 68px)/1.04 var(--display); letter-spacing:-0.035em; max-width:16ch; margin:0 auto 14px; }
.go-close p { color:var(--ink-2); font-size:18px; margin-bottom:22px; } .go-close .lp-ctas { justify-content:center; }
/* calculators */
.go-calc { width:100%; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; max-width:980px; margin:0 auto; padding:clamp(18px, 3vw, 30px);
  border-radius:22px; border:1px solid var(--ds-gold-line); background:var(--card); }
.go-calc label { display:flex; flex-direction:column; gap:6px; font-size:13.5px; color:var(--ink-2); }
.go-calc input { padding:12px 13px; font-size:16px; border-radius:10px; border:1px solid var(--rule); background:var(--paper); color:var(--ink); font-variant-numeric:tabular-nums; }
.go-out { grid-column:1 / -1; display:block; padding:18px 20px; border-radius:14px; background:var(--gold-wash); color:var(--ink); font-size:18px; line-height:1.5; }
.go-out b { font:660 1.25em/1 var(--display); color:var(--gold-ink); }
.go-fine { max-width:980px; margin:12px auto 0; text-align:center; }

/* hidden-costs: the receipt */
.rc-paper { position:relative; margin:0 auto; width:min(100%, 400px); padding:26px 26px 40px; color:#23201a; background:#efe7d4;
  font:500 14px/1.5 var(--ds-mono); box-shadow:0 40px 90px -30px #000; transform:rotate(-2deg); animation:rc-feed 1.6s var(--ds-ease, ease) both;
  -webkit-mask:radial-gradient(10px at 50% 100%, #0000 98%, #000) 50% / 20px 100%; mask:radial-gradient(10px at 50% 100%, #0000 98%, #000) 50% / 20px 100%; }
.rc-top { font-weight:700; letter-spacing:.12em; text-align:center; } .rc-sub { text-align:center; color:#6d6455; margin-bottom:14px; border-bottom:1px dashed #b5aa94; padding-bottom:12px; }
.rc-lines { list-style:none; display:flex; flex-direction:column; gap:8px; }
.rc-lines li { display:flex; gap:8px; align-items:baseline; opacity:0; animation:rc-line .45s ease forwards; }
.rc-lines li i { flex:1; border-bottom:2px dotted #b5aa94; } .rc-lines li span:last-child { color:#6d6455; }
.rc-lines li:nth-child(1) { animation-delay:1.2s; } .rc-lines li:nth-child(2) { animation-delay:1.55s; } .rc-lines li:nth-child(3) { animation-delay:1.9s; }
.rc-lines li:nth-child(4) { animation-delay:2.25s; } .rc-lines li:nth-child(5) { animation-delay:2.6s; }
.rc-total { display:flex; justify-content:space-between; gap:10px; margin-top:16px; padding-top:12px; border-top:2px solid #23201a; font-weight:700; opacity:0; animation:rc-line .45s ease 3s forwards; }
.rc-stamp { position:absolute; left:18px; bottom:54px; padding:6px 12px; border:3px solid #b3402e; color:#b3402e; font:800 20px/1 var(--ds-mono);
  letter-spacing:.14em; text-transform:uppercase; transform:rotate(-14deg) scale(2.4); opacity:0; animation:rc-stamp .35s cubic-bezier(.2,1.6,.4,1) 3.5s forwards; }
@keyframes rc-feed { from { transform:translateY(-40px) rotate(-2deg); clip-path:inset(0 0 100% 0); } to { transform:rotate(-2deg); clip-path:inset(0 0 0 0); } }
@keyframes rc-line { from { opacity:0; transform:translateX(8px); } to { opacity:1; transform:none; } }
@keyframes rc-stamp { to { opacity:.9; transform:rotate(-14deg) scale(1); } }
.hc-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px; }
.hc-card { position:relative; min-height:250px; perspective:1000px; cursor:pointer; outline:none; }
.hc-f, .hc-b { position:absolute; inset:0; padding:24px; border-radius:20px; border:1px solid var(--ds-gold-line); background:var(--card);
  backface-visibility:hidden; transition:transform .7s var(--ds-ease, ease); display:flex; flex-direction:column; gap:10px; }
.hc-f h3 { font:620 30px/1 var(--display); letter-spacing:-0.02em; } .hc-f p, .hc-b p { color:var(--ink-2); line-height:1.5; }
.hc-b { transform:rotateY(180deg); background:var(--gold-wash); } .hc-b p:last-child { color:var(--ink); }
.hc-card:hover .hc-f, .hc-card:focus .hc-f { transform:rotateY(-180deg); } .hc-card:hover .hc-b, .hc-card:focus .hc-b { transform:rotateY(0); }

/* robot-check: the lab */
.h-lab { background:linear-gradient(var(--rule-2) 1px, transparent 1px) 0 0 / 100% 44px, linear-gradient(90deg, var(--rule-2) 1px, transparent 1px) 0 0 / 44px 100%; }
.rb-lab { position:relative; padding:22px; border-radius:22px; border:1px solid var(--ds-gold-line); background:#0b0f0d; color:#cfe8da;
  font:500 13px/1.45 var(--ds-mono); box-shadow:0 40px 100px -40px #000; overflow:hidden; }
.rb-bot { position:relative; width:120px; height:96px; margin:6px auto 20px; border-radius:22px; border:2px solid #9fd3b6; background:#12201a; }
.rb-bot::before { content:""; position:absolute; right:50%; top:-22px; width:2px; height:20px; background:#9fd3b6; }
.rb-bot::after { content:""; position:absolute; right:calc(50% - 6px); top:-30px; width:12px; height:12px; border-radius:50%; background:var(--gold); animation:rb-blink 1.4s steps(2) infinite; }
.rb-eye { position:absolute; right:26px; top:30px; width:18px; height:18px; border-radius:50%; background:#9fd3b6; animation:rb-look 4s ease-in-out infinite; }
.rb-eye.r { right:auto; left:26px; } .rb-mouth { position:absolute; right:34px; left:34px; bottom:18px; height:6px; border-radius:4px; background:#9fd3b6; opacity:.6; }
.rb-beam { position:absolute; right:-40px; left:-40px; top:0; height:3px; background:var(--gold); box-shadow:0 0 18px 4px color-mix(in srgb, var(--gold) 60%, transparent); animation:rb-scan 2.6s ease-in-out infinite; }
.rb-scan { list-style:none; display:flex; flex-direction:column; gap:6px; }
.rb-t { display:flex; gap:10px; padding:7px 10px; border-radius:8px; background:#101814; opacity:.35; animation:rb-tick 8s linear infinite; }
.rb-t span { color:var(--gold); } .rb-t.t2 { animation-delay:1s; } .rb-t.t3 { animation-delay:2s; } .rb-t.t4 { animation-delay:3s; } .rb-t.t5 { animation-delay:4s; } .rb-t.t6 { animation-delay:5s; }
.rb-tag { margin-top:14px; font-size:10.5px; color:#7f9a8c; letter-spacing:.04em; }
@keyframes rb-scan { 0%, 100% { top:6%; } 50% { top:92%; } }
@keyframes rb-blink { 50% { opacity:.2; } } @keyframes rb-look { 0%, 100% { transform:none; } 30% { transform:translateX(-5px); } 60% { transform:translateX(5px); } }
@keyframes rb-tick { 0%, 8% { opacity:.35; } 12%, 80% { opacity:1; background:#16241d; } 100% { opacity:.35; } }
.rb-check ol { list-style:none; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
.rb-check { width:100%; max-width:1000px; margin:0 auto; display:flex; flex-direction:column; gap:16px; }
.rb-check label { display:flex; gap:12px; align-items:flex-start; padding:16px; border-radius:14px; border:1px solid var(--rule); background:var(--card); cursor:pointer; transition:border-color .3s, background .3s; }
.rb-check label:has(input:checked) { border-color:var(--gold); background:var(--gold-wash); }
.rb-check input { width:20px; height:20px; accent-color:var(--gold); flex:none; margin-top:2px; } .rb-check b { color:var(--gold-ink); margin-left:8px; font-family:var(--ds-mono); }
.rb-gates { list-style:none; display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:14px; position:relative; }
.rb-gates li { padding:20px; border-radius:18px; border:1px solid var(--rule-2); background:var(--card); }
.rb-gates h3 { font:600 18px/1.2 var(--display); margin:12px 0 6px; } .rb-gates p { color:var(--ink-2); font-size:14.5px; line-height:1.5; }
.rb-n { display:inline-grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--ds-gold-grad); color:#0c0d0f; font:700 14px/1 var(--ds-mono); }
.rb-gates li:nth-child(2) { transition-delay:.1s; } .rb-gates li:nth-child(3) { transition-delay:.2s; } .rb-gates li:nth-child(4) { transition-delay:.3s; } .rb-gates li:nth-child(5) { transition-delay:.4s; }

/* loss-limits: the gauge */
.h-gauge .go-hero-in { grid-template-columns:minmax(0, 1fr); text-align:center; justify-items:center; }
.h-gauge .go-pitch h1, .h-gauge .go-sub { margin-inline:auto; } .h-gauge .lp-ctas { justify-content:center; }
.h-gauge .go-fig { width:min(100%, 640px); } .ll-gauge { width:100%; margin:0 auto; }
.ll-gauge svg { width:100%; overflow:visible; }
.ll-arc { fill:none; stroke-width:16; stroke-linecap:round; } .ll-arc.a1 { stroke:#b3402e; } .ll-arc.a2 { stroke:color-mix(in srgb, var(--gold) 55%, transparent); } .ll-arc.a3 { stroke:#e08a3a; }
.ll-needle { transform-box:view-box; transform-origin:120px 120px; animation:ll-swing 7s cubic-bezier(.5,0,.3,1) infinite; }
.ll-needle line { stroke:var(--ink); stroke-width:4; stroke-linecap:round; } .ll-needle circle { fill:var(--gold); }
.ll-legend { list-style:none; display:flex; justify-content:space-between; font:600 12px/1 var(--ds-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); margin-top:8px; }
@keyframes ll-swing { 0%, 100% { transform:rotate(-20deg); } 30% { transform:rotate(10deg); } 55% { transform:rotate(52deg); } 62% { transform:rotate(46deg); } 80% { transform:rotate(-8deg); } }
.ll-notes { list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:22px; }
.ll-note { width:min(100%, 290px); min-height:220px; padding:26px 22px; background:#f2dc8c; color:#2a2412; font-size:18px; line-height:1.45;
  box-shadow:0 24px 40px -22px #000; display:flex; flex-direction:column; gap:10px; }
.ll-note b { font:700 13px/1 var(--ds-mono); letter-spacing:.12em; text-transform:uppercase; color:#7a5c12; }
html.js .ll-note.rv { transform:translateY(-60px) rotate(-8deg); } html.js .ll-note.rv.in { transform:rotate(-2deg); }
html.js .ll-note.n1.rv.in { transform:rotate(2deg); transition-delay:.15s; } html.js .ll-note.n2.rv.in { transform:rotate(-1deg); transition-delay:.3s; }

/* proof-first: the court */
.h-court { background:radial-gradient(70% 60% at 20% 0%, color-mix(in srgb, var(--gold) 10%, transparent), transparent 70%); }
.pf-bench { position:relative; padding:26px 54px 26px 26px; border-radius:22px; border:1px solid var(--ds-gold-line); background:var(--card); box-shadow:var(--ds-shadow-3); }
.pf-seal { position:absolute; left:18px; top:-18px; padding:8px 14px; border-radius:99px; background:var(--ds-gold-grad); color:#0c0d0f; font:700 11px/1 var(--ds-mono); letter-spacing:.12em; text-transform:uppercase; }
.pf-track { list-style:none; display:flex; flex-direction:column; gap:18px; border-right:2px solid var(--rule); padding-right:22px; }
.pf-track b { display:block; font:620 20px/1.1 var(--display); } .pf-track span { color:var(--ink-2); font-size:14.5px; }
.pf-dot { position:absolute; right:47px; top:30px; width:16px; height:16px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 6px var(--gold-wash); animation:pf-walk 6s ease-in-out infinite; }
@keyframes pf-walk { 0% { top:30px; } 90%, 100% { top:calc(100% - 52px); } }
.pf-cases { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px; }
.pf-case { position:relative; display:flex; flex-direction:column; gap:10px; padding:34px 22px 24px; border-radius:18px 6px 18px 18px; border:1px solid var(--rule); background:var(--card); color:var(--ink); text-decoration:none; overflow:hidden; }
.pf-case::before { content:""; position:absolute; right:-1px; top:-1px; width:38%; height:14px; border-radius:10px 6px 0 0; background:var(--sunk); border:1px solid var(--rule); border-bottom:0; }
.pf-case h3 { font:620 21px/1.2 var(--display); } .pf-why { color:var(--ink-2); font-size:14.5px; line-height:1.5; }
.pf-stamp { align-self:flex-start; margin-top:auto; padding:6px 12px; border:3px solid #b3402e; color:#c75a48; font:800 14px/1 var(--ds-mono); letter-spacing:.12em; text-transform:uppercase; transform:rotate(-6deg); }
.pf-stamp.ok { border-color:var(--gold); color:var(--gold-ink); }
html.js .pf-case.rv .pf-stamp { opacity:0; transform:rotate(-6deg) scale(2.2); transition:opacity .3s .5s, transform .35s cubic-bezier(.2,1.6,.4,1) .5s; }
html.js .pf-case.rv.in .pf-stamp { opacity:1; transform:rotate(-6deg) scale(1); }
.pf-case:hover { border-color:var(--ds-gold-line); transform:translateY(-3px); }

/* gold: the vault and the clock */
.h-vault .go-hero-in { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
.gd-vault { position:relative; width:min(100%, 460px); aspect-ratio:1; margin:0 auto; display:grid; place-items:center; }
.gd-r { position:absolute; border-radius:50%; border:2px dashed var(--ds-gold-line); }
.gd-r.r1 { inset:0; border-width:3px; border-color:color-mix(in srgb, var(--gold) 55%, transparent); animation:gd-spin 60s linear infinite; }
.gd-r.r2 { inset:13%; border-style:dotted; border-width:6px; border-color:color-mix(in srgb, var(--gold) 35%, transparent); animation:gd-spin 40s linear infinite reverse; }
.gd-r.r3 { inset:27%; border:1px solid var(--ds-gold-line); background:radial-gradient(circle, color-mix(in srgb, var(--gold) 22%, transparent), transparent 70%); animation:gd-spin 24s linear infinite; }
.gd-core { position:relative; font:700 clamp(48px, 6vw, 84px)/1 var(--display); letter-spacing:-0.04em; background:var(--ds-gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
@keyframes gd-spin { to { transform:rotate(360deg); } }
.gd-day { position:relative; width:100%; max-width:1040px; margin:0 auto; padding:22px 22px 18px; border-radius:22px; border:1px solid var(--ds-gold-line); background:var(--card); }
.gd-hours { list-style:none; display:flex; justify-content:space-between; font:500 11px/1 var(--ds-mono); color:var(--muted); margin-bottom:14px; }
.gd-sess { list-style:none; position:relative; display:grid; grid-template-rows:repeat(4, 64px); gap:8px; }
.gd-sess li { position:relative; border-radius:12px; padding:10px 12px; background:var(--gold-wash); border:1px solid var(--ds-gold-line); overflow:hidden; }
.gd-sess b { display:block; font:620 15px/1.1 var(--display); } .gd-sess span { font-size:12.5px; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
.gd-sess .s-asia { margin-right:0; width:29.2%; } .gd-sess .s-ldn { margin-right:29.2%; width:37.5%; background:color-mix(in srgb, var(--gold) 26%, transparent); }
.gd-sess .s-ny { margin-right:50%; width:37.5%; background:color-mix(in srgb, var(--gold) 34%, transparent); } .gd-sess .s-late { margin-right:87.5%; width:12.5%; }
.gd-sess span { min-width:0; }
.gd-now { position:absolute; top:12px; bottom:10px; right:50%; width:2px; background:var(--gold); box-shadow:0 0 14px 2px var(--gold); display:none; }
.gd-now.on { display:block; } .gd-now::before { content:"now"; position:absolute; top:-2px; right:6px; font:700 10px/1 var(--ds-mono); color:var(--gold-ink); text-transform:uppercase; letter-spacing:.1em; }
.gd-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; }
.gd-card { padding:24px; border-radius:20px; border:1px solid var(--rule-2); background:linear-gradient(160deg, color-mix(in srgb, var(--gold) 9%, transparent), transparent 60%), var(--card); }
.gd-card h3 { font:620 21px/1.15 var(--display); margin-bottom:8px; } .gd-card p { color:var(--ink-2); line-height:1.55; }
.gd-grid .gd-card:nth-child(3n+2) { transition-delay:.1s; } .gd-grid .gd-card:nth-child(3n) { transition-delay:.2s; }

/* what-earns: the race */
.we-track { position:relative; padding:24px; border-radius:22px; border:1px solid var(--ds-gold-line); background:var(--card); overflow:hidden; }
.we-k { display:flex; justify-content:space-between; font:600 11px/1 var(--ds-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:16px; }
.we-after { color:var(--gold-ink); opacity:0; animation:we-fade 8s ease infinite; }
.we-lanes { list-style:none; display:flex; flex-direction:column; gap:14px; }
.we-lane { display:grid; grid-template-columns:5.5em minmax(0, 1fr); gap:12px; align-items:center; font:600 13px/1 var(--ds-mono); color:var(--ink-2); }
.we-lane i { height:26px; border-radius:8px; background:repeating-linear-gradient(90deg, var(--rule-2) 0 1px, transparent 1px 10%); overflow:hidden; }
.we-lane b { display:block; height:100%; border-radius:8px; background:var(--ds-gold-grad); width:0; animation:we-run 8s cubic-bezier(.3,.7,.3,1) infinite; }
.we-lane.l1 b { --a:70%; --b:18%; } .we-lane.l0 b { --a:82%; --b:64%; } .we-lane.l2 b { --a:58%; --b:50%; } .we-lane.l3 b { --a:76%; --b:8%; }
.we-wall { position:absolute; top:0; bottom:0; right:-10%; width:6px; background:var(--gold); box-shadow:0 0 30px 6px color-mix(in srgb, var(--gold) 50%, transparent); animation:we-wall 8s ease-in-out infinite; }
@keyframes we-run { 0% { width:0; } 35%, 50% { width:var(--a); filter:none; } 62%, 92% { width:var(--b); filter:saturate(.4); } 100% { width:0; } }
@keyframes we-wall { 0%, 45% { right:-10%; } 60% { right:110%; } 100% { right:110%; } }
@keyframes we-fade { 0%, 52% { opacity:0; } 60%, 92% { opacity:1; } 100% { opacity:0; } }
.we-cols { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; }
.we-col { padding:26px; border-radius:20px; border:1px solid var(--rule-2); background:var(--card); }
.we-col:last-child { border-color:var(--ds-gold-line); background:var(--gold-wash); } .we-col h3 { font:620 22px/1.15 var(--display); margin:8px 0; } .we-col p { color:var(--ink-2); line-height:1.55; }
.we-col:nth-child(2) { transition-delay:.12s; } .we-col:nth-child(3) { transition-delay:.24s; }
.we-calc { grid-template-columns:repeat(2, minmax(0, 1fr)); } .ma-calc { grid-template-columns:repeat(5, minmax(0, 1fr)); }
.ma-calc fieldset { border:1px solid var(--rule-2); border-radius:14px; padding:12px; display:flex; flex-direction:column; gap:8px; min-width:0; }
.ma-calc legend { font:700 11px/1 var(--ds-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--gold-ink); padding:0 6px; } .we-calc fieldset { border:1px solid var(--rule-2); border-radius:16px; padding:16px; display:flex; flex-direction:column; gap:10px; }
.we-calc legend { font:700 12px/1 var(--ds-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--gold-ink); padding:0 6px; }

/* channels: the phone feed */
.ch-phone { position:relative; width:min(100%, 340px); margin:0 auto; height:520px; padding:18px 14px; border-radius:40px; border:8px solid #1d1f24;
  background:#0f1720; box-shadow:0 50px 100px -40px #000, 0 0 0 1px var(--ds-gold-line); display:flex; flex-direction:column; overflow:hidden; }
.ch-top { display:flex; flex-direction:column; align-items:center; gap:2px; padding-bottom:10px; border-bottom:1px solid #22303d; color:#e8eef4; font-size:14px; }
.ch-top span { font-size:11px; color:#7f8fa0; }
.ch-feed { list-style:none; flex:1; display:flex; flex-direction:column; justify-content:flex-end; gap:8px; padding:12px 2px; }
.ch-m { max-width:82%; padding:9px 12px; border-radius:14px 14px 4px 14px; background:#1f2c38; color:#e8eef4; font-size:14px; opacity:0; transform:translateY(14px);
  animation:ch-in 14s ease infinite; }
.ch-m.del { font-style:italic; color:#7f8fa0; background:transparent; border:1px dashed #33414e; }
.ch-m.me { align-self:flex-end; border-radius:14px 14px 14px 4px; background:color-mix(in srgb, var(--gold) 30%, #1f2c38); }
.ch-m.m1 { animation-delay:1s; } .ch-m.m2 { animation-delay:2s; } .ch-m.m3 { animation-delay:3s; } .ch-m.m4 { animation-delay:4s; } .ch-m.m5 { animation-delay:5s; } .ch-m.m6 { animation-delay:6.5s; }
@keyframes ch-in { 0% { opacity:0; transform:translateY(14px); } 4%, 85% { opacity:1; transform:none; } 95%, 100% { opacity:0; } }
.ch-typing { font-size:11px; color:#7f8fa0; display:flex; gap:3px; align-items:center; } .ch-typing i { width:4px; height:4px; border-radius:50%; background:#7f8fa0; animation:rb-blink 1s steps(2) infinite; }
.ch-typing i:nth-child(2) { animation-delay:.2s; } .ch-typing i:nth-child(3) { animation-delay:.4s; }
.ch-vs { list-style:none; max-width:860px; margin:0 auto; display:flex; flex-direction:column; gap:10px; }
.ch-vs li { display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:16px 20px; border-radius:14px; border:1px solid var(--rule-2); background:var(--card); font-size:17px; }
.ch-no { color:var(--muted); position:relative; justify-self:start; } .ch-no::after { content:""; position:absolute; right:0; top:52%; height:2px; width:0; background:#c75a48; transition:width .8s ease .4s; }
.ch-vs li.in .ch-no::after { width:100%; } html:not(.js) .ch-no::after { width:100%; }
.ch-week { list-style:none; display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:10px; }
.ch-week li { padding:18px 14px; border-radius:16px; border:1px solid var(--rule-2); background:var(--card); display:flex; flex-direction:column; gap:8px; }
.ch-week b { font:700 12px/1 var(--ds-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--gold-ink); } .ch-week span { font-size:14px; color:var(--ink-2); line-height:1.45; }

/* news-days: the calendar */
.nw-cal { padding:22px; border-radius:22px; border:1px solid var(--ds-gold-line); background:var(--card); box-shadow:var(--ds-shadow-3); }
.nw-month { font:620 22px/1 var(--display); margin-bottom:14px; }
.nw-wk, .nw-grid { list-style:none; display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:6px; }
.nw-wk li { font:600 10px/1 var(--ds-mono); text-transform:uppercase; letter-spacing:.08em; color:var(--muted); text-align:center; padding-bottom:6px; }
.nw-d { min-height:46px; border-radius:10px; background:var(--sunk); padding:6px; display:flex; flex-direction:column; gap:3px; font-size:13px; color:var(--ink-2); animation:nw-pop .5s ease both; }
.nw-d.off { background:transparent; } .nw-d.today { outline:2px solid var(--ink-2); color:var(--ink); }
.nw-d.hot { background:var(--gold-wash); color:var(--ink); animation:nw-pop .5s ease both, nw-pulse 2.4s ease-in-out 1s infinite; }
.nw-d em { font:700 9px/1 var(--ds-mono); font-style:normal; text-transform:uppercase; color:var(--gold-ink); }
.nw-grid li:nth-child(7n+2) { animation-delay:.05s; } .nw-grid li:nth-child(7n+3) { animation-delay:.1s; } .nw-grid li:nth-child(7n+4) { animation-delay:.15s; }
.nw-grid li:nth-child(7n+5) { animation-delay:.2s; } .nw-grid li:nth-child(7n+6) { animation-delay:.25s; } .nw-grid li:nth-child(7n) { animation-delay:.3s; }
@keyframes nw-pop { from { opacity:0; transform:scale(.85); } to { opacity:1; transform:none; } }
@keyframes nw-pulse { 50% { box-shadow:0 0 0 5px color-mix(in srgb, var(--gold) 25%, transparent); } }
.nw-nexts { list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }
.nw-next { padding:12px 14px; border-radius:14px; border:1px solid var(--ds-gold-line); display:flex; flex-direction:column; gap:4px; }
.nw-next b { font:660 26px/1 var(--display); color:var(--gold-ink); } .nw-next span { font-size:12.5px; color:var(--ink-2); }
.nw-stage { display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr); gap:30px; align-items:center; max-width:1000px; margin:0 auto; }
.nw-candle { height:260px; display:flex; align-items:center; justify-content:center; gap:14px; border-radius:20px; border:1px solid var(--rule-2); background:var(--card); }
.nw-candle i { width:18px; height:34px; border-radius:3px; background:var(--muted); position:relative; }
.nw-candle i::before { content:""; position:absolute; right:8px; top:-10px; bottom:-10px; width:2px; background:inherit; }
.nw-candle i.big { background:var(--gold); animation:nw-jump 4s cubic-bezier(.2,1.4,.4,1) infinite; transform-origin:bottom; }
@keyframes nw-jump { 0%, 30% { height:34px; transform:translateY(0); } 40%, 70% { height:170px; transform:translateY(-60px); } 85%, 100% { height:90px; transform:translateY(-30px); } }
.nw-phases { list-style:none; display:flex; flex-direction:column; gap:12px; }
.nw-phases li { padding:18px 20px; border-radius:16px; border:1px solid var(--rule-2); background:var(--card); }
.nw-phases b { font:620 20px/1 var(--display); color:var(--gold-ink); } .nw-phases p { color:var(--ink-2); margin-top:6px; }

/* one-screen: tabs into one */
.ow-win { border-radius:18px; border:1px solid var(--ds-gold-line); background:var(--card); overflow:hidden; box-shadow:var(--ds-shadow-3); }
.ow-tabs { list-style:none; display:flex; gap:2px; padding:10px 10px 0; background:var(--sunk); overflow:hidden; }
.ow-tab { flex:1 1 0; min-width:0; padding:8px 8px; border-radius:8px 8px 0 0; background:var(--card); font-size:11px; color:var(--ink-2); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; animation:ow-close 9s ease infinite; }
.ow-tab.t0 { animation:none; color:var(--ink); border-top:2px solid var(--gold); }
.ow-tab.t1 { animation-delay:.2s; } .ow-tab.t2 { animation-delay:.4s; } .ow-tab.t3 { animation-delay:.6s; } .ow-tab.t4 { animation-delay:.8s; }
.ow-tab.t5 { animation-delay:1s; } .ow-tab.t6 { animation-delay:1.2s; } .ow-tab.t7 { animation-delay:1.4s; } .ow-tab.t8 { animation-delay:1.6s; }
@keyframes ow-close { 0%, 20% { opacity:1; flex-grow:1; padding:8px; } 32%, 88% { opacity:0; flex-grow:0.0001; padding:8px 0; } 100% { opacity:1; flex-grow:1; } }
.ow-one { position:relative; height:300px; display:grid; grid-template-columns:2fr 1fr; grid-template-rows:1fr 1fr 1fr; gap:8px; padding:12px; }
.ow-one b { position:absolute; right:50%; top:50%; transform:translate(-50%, -50%); font:620 22px/1 var(--display); color:var(--gold-ink); opacity:0; animation:ow-label 9s ease infinite; }
.ow-c { grid-row:1 / 4; border-radius:10px; background:repeating-linear-gradient(90deg, transparent 0 14px, color-mix(in srgb, var(--gold) 30%, transparent) 14px 20px), var(--sunk);
  -webkit-mask:linear-gradient(transparent 20%, #000 20% 70%, transparent 70%); animation:ow-pop 9s ease infinite; }
.ow-p { border-radius:10px; background:var(--gold-wash); border:1px solid var(--ds-gold-line); animation:ow-pop 9s ease infinite; }
.ow-p.p1 { animation-delay:.2s; } .ow-p.p2 { animation-delay:.4s; } .ow-p.p3 { animation-delay:.6s; }
@keyframes ow-pop { 0%, 30% { opacity:.15; transform:scale(.94); } 42%, 90% { opacity:1; transform:none; } 100% { opacity:.15; } }
@keyframes ow-label { 0%, 40% { opacity:0; } 48%, 60% { opacity:1; } 70%, 100% { opacity:0; } }
.ow-bento { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; }
.ow-cell { padding:24px; border-radius:20px; border:1px solid var(--rule-2); background:var(--card); } .ow-cell.big { grid-column:span 2; grid-row:span 2; background:linear-gradient(150deg, var(--gold-wash), transparent 60%), var(--card); border-color:var(--ds-gold-line); }
.ow-cell h3 { font:620 21px/1.15 var(--display); margin-bottom:6px; } .ow-cell.big h3 { font-size:32px; } .ow-cell p { color:var(--ink-2); line-height:1.5; }

/* many-accounts: the tower */
.ma-tower { position:relative; padding:22px; border-radius:22px; border:1px solid var(--ds-gold-line); background:#0b0d10; overflow:hidden; }
.ma-sweep { position:absolute; right:50%; top:50%; width:160%; aspect-ratio:1; transform:translate(-50%, -50%); border-radius:50%;
  background:conic-gradient(from 0deg, color-mix(in srgb, var(--gold) 28%, transparent), transparent 18%); animation:gd-spin 6s linear infinite; pointer-events:none; }
.ma-grid { position:relative; list-style:none; display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:8px; }
.ma-t { padding:12px 10px; border-radius:10px; border:1px solid #22262d; background:#12151a; display:flex; flex-direction:column; gap:8px; font:600 10.5px/1 var(--ds-mono); color:#9aa3ad; }
.ma-t i { width:9px; height:9px; border-radius:50%; background:#5fbf8a; animation:ma-led 3s ease-in-out infinite; } .ma-t b { height:5px; border-radius:3px; background:#22262d; position:relative; overflow:hidden; }
.ma-t b::after { content:""; position:absolute; inset:0 0 0 40%; background:#5fbf8a; border-radius:3px; }
.ma-t.s1 i, .ma-t.s1 b::after { background:#e0a23a; } .ma-t.s1 b::after { left:12%; } .ma-t.s2 i, .ma-t.s2 b::after { background:#5d6670; } .ma-t.s2 b::after { left:70%; }
.ma-t.s3 i, .ma-t.s3 b::after { background:#c75a48; } .ma-t.s3 i { animation-duration:.9s; } .ma-t.s3 { border-color:#5a2a22; }
.ma-t:nth-child(3n) i { animation-delay:.7s; } .ma-t:nth-child(4n) i { animation-delay:1.3s; }
@keyframes ma-led { 50% { opacity:.35; } }
.ma-key { position:relative; list-style:none; display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:14px; font-size:11.5px; color:#9aa3ad; }
.ma-key li::before { content:""; display:inline-block; width:8px; height:8px; border-radius:50%; margin-left:6px; background:#5fbf8a; }
.ma-key .k1::before { background:#e0a23a; } .ma-key .k2::before { background:#5d6670; } .ma-key .k3::before { background:#c75a48; }
.ma-routine { list-style:none; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px; counter-reset:r; }
.ma-routine li { counter-increment:r; padding:24px 20px; border-radius:20px; border:1px solid var(--rule-2); background:var(--card); position:relative; }
.ma-routine li::before { content:counter(r, decimal-leading-zero); font:700 40px/1 var(--display); color:var(--gold-wash); position:absolute; left:16px; top:14px; -webkit-text-stroke:1px var(--ds-gold-line); }
.ma-routine b { font:620 18px/1.2 var(--display); display:block; margin-bottom:8px; max-width:75%; } .ma-routine p { color:var(--ink-2); line-height:1.5; }
.ma-routine li:nth-child(2) { transition-delay:.1s; } .ma-routine li:nth-child(3) { transition-delay:.2s; } .ma-routine li:nth-child(4) { transition-delay:.3s; }

@media (max-width: 960px) {
  .go-hero-in, .h-vault .go-hero-in, .go-free-in, .go-offer-in { grid-template-columns:minmax(0, 1fr); }
  .go-free-form { position:static; } .hc-grid, .gd-grid, .pf-cases { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .rb-gates, .ma-routine, .ow-bento, .ma-calc { grid-template-columns:repeat(2, minmax(0, 1fr)); } .go-calc { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .ch-week { grid-template-columns:repeat(4, minmax(0, 1fr)); } .nw-stage { grid-template-columns:minmax(0, 1fr); } .we-cols { grid-template-columns:minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .hc-grid, .gd-grid, .pf-cases, .rb-gates, .rb-check ol, .go-calc, .we-calc, .ma-calc, .ma-routine, .ow-bento { grid-template-columns:minmax(0, 1fr); }
  .ch-week { grid-template-columns:repeat(2, minmax(0, 1fr)); } .ow-cell.big { grid-column:auto; } .ma-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .ch-vs li { grid-template-columns:minmax(0, 1fr); gap:4px; } .nw-d { min-height:38px; font-size:11px; } .ow-tab { font-size:9px; }
  .go-gift { grid-template-columns:84px minmax(0, 1fr); gap:14px; } .go-cover { width:80px; height:110px; }
  .gd-sess span { display:none; } .gd-sess b { font-size:12px; } .hc-card { min-height:220px; }
}
@media (prefers-reduced-motion: reduce) {
  .go [class*="rc-"], .go [class*="rb-"], .go [class*="ll-"], .go [class*="pf-"], .go [class*="gd-"], .go [class*="ow-"], .go [class*="ch-"],
  .go [class*="nw-"], .go [class*="we-"], .go [class*="ma-"] { animation:none !important; opacity:1; }
  html.js .go .rv { opacity:1; transform:none; transition:none; }
}

/* ---------------------------------------------------------------- the agents front page (sales/agenthome.py) ---- */
.ah-top { position:relative; overflow:hidden; isolation:isolate; display:flex; align-items:center; justify-content:center; text-align:center;
  height:calc(100svh - 112px); min-height:540px; max-height:880px; border-bottom:1px solid var(--rule); }
.ah-top::before { content:""; position:absolute; inset:0; z-index:-3; background:radial-gradient(70% 60% at 50% 105%, color-mix(in srgb, var(--gold) 24%, transparent), transparent 70%),
  radial-gradient(45% 40% at 50% -5%, color-mix(in srgb, var(--gold) 8%, transparent), transparent 70%); }
.ah-top::after { content:""; position:absolute; inset:0; z-index:-2; opacity:.55; pointer-events:none;
  background-image:linear-gradient(var(--rule) 1px, transparent 1px), linear-gradient(90deg, var(--rule) 1px, transparent 1px); background-size:72px 72px;
  -webkit-mask-image:radial-gradient(75% 75% at 50% 55%, #000, transparent); mask-image:radial-gradient(75% 75% at 50% 55%, #000, transparent); }
.ah-top-in { display:flex; flex-direction:column; align-items:center; gap:clamp(12px, 2.4vh, 26px); padding-top:clamp(20px, 4vh, 64px); padding-bottom:calc(clamp(190px, 30vh, 330px) + 12px); }
.ah-top h1 { margin:0; max-width:14.5em; font-size:clamp(36px, min(7.4vw, 8.8vh), 88px); line-height:1.02; letter-spacing:-0.04em; text-wrap:balance; }
.ah-top h1 em { font-style:normal; background:var(--ds-gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ah-sub { margin:0; max-width:38em; font-size:clamp(17px, 2.1vw, 23px); line-height:1.5; color:var(--ink-2); text-wrap:balance; }
.ah-cta, .ah-top .cta { font-size:clamp(16px, 1.8vw, 19px); padding:17px 32px; box-shadow:0 18px 50px -18px color-mix(in srgb, var(--gold) 80%, transparent); }
.ah-also { margin:2px 0 0; font-size:14px; line-height:1.4; color:var(--muted); } .ah-also a { color:var(--ink-2); text-decoration:underline; text-decoration-color:color-mix(in srgb, var(--gold) 60%, transparent); text-underline-offset:4px; }
.ah-ent { text-align:center; margin:28px auto 0; }
.ah-bg { position:absolute; right:0; left:0; bottom:0; height:clamp(190px, 30vh, 330px); z-index:-1; pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 34%); mask-image:linear-gradient(to bottom, transparent 0, #000 34%); }
.ah-bg svg { position:absolute; inset:0; width:100%; height:100%; display:block; overflow:hidden; }
.ah-px { fill:none; stroke:url(#ahg); stroke-width:3.2; stroke-linejoin:round; stroke-linecap:round; }
.ah-glow { fill:none; stroke:var(--gold); stroke-width:12; opacity:.22; filter:blur(7px); stroke-linejoin:round; }
.ah-area { fill:url(#aha); }
.ah-mk.b { fill:#3bbf86; } .ah-mk.s { fill:#e5645f; }
.ah-line, .ah-mk { transition:opacity 1.6s ease; } .ah-mk { opacity:0; }   /* the still picture is only a fallback: it waits 3.5 s for the real prices before it shows, so it never flashes before them (Igor, 25 Oct 2026) */
.ah-live { position:absolute; right:0; left:0; bottom:14px; margin:0; padding:0 56px) 4vw, clamp(16px,; display:flex; justify-content:flex-start; align-items:center; gap:12px; z-index:1; pointer-events:none; opacity:0; transition:opacity 1.6s ease;
  font:500 12px/1 var(--ds-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.ah-live b { color:var(--gold); font-weight:600; }
.ah-pl { margin-right:22px; display:inline-flex; align-items:baseline; gap:.55em; white-space:nowrap; } .ah-pl[hidden] { display:none; }
.ah-pl i { font-style:normal; } .ah-pl-v { font-weight:700; } .ah-pl-v.up { color:var(--ds-up); } .ah-pl-v.down { color:var(--ds-down); }
.ah-pl-n::before, .ah-pl-p::before { content:"\00b7"; margin-left:.55em; }
.ah-r-mk { opacity:0; transition:opacity .5s ease; } .ah-r-mk.on { opacity:.95; } .ah-r-mk.b { fill:#3bbf86; } .ah-r-mk.s { fill:#e5645f; }   /* the paper agent's entries: a green arrow up for a buy, a red arrow down for a sell */
.ah-ic { display:inline-flex; align-items:center; height:22px; } .ah-ic svg { height:22px; width:auto; display:block; } .ah-ic:empty { display:none; }
.ah-top.live .ah-live { opacity:1; }
.ah-top.live .ah-line, .ah-top.live .ah-mk { opacity:0; }
.ah-real { transition:opacity 1.5s ease; } .ah-real.in, .ah-real.out { opacity:0; }
.ah-r-scale { transition:opacity .6s ease .9s; } .ah-real.in .ah-r-scale { opacity:0; } .ah-real.out .ah-r-scale { opacity:0; transition:opacity .45s ease; }
.ah-r-area { fill:url(#aha); } .ah-r-glow { fill:none; stroke:var(--gold); stroke-width:12; opacity:.22; filter:blur(7px); stroke-linejoin:round; }
.ah-r-px { fill:none; stroke:url(#ahg); stroke-width:3.2; stroke-linejoin:round; stroke-linecap:round; }
.ah-r-ring { fill:none; stroke:var(--gold); stroke-width:1.5; opacity:.8; transform-box:fill-box; transform-origin:center; }
.ah-r-dot { fill:#fff0c4; filter:drop-shadow(0 0 10px var(--gold)); }
.ah-r-grid { stroke:var(--rule); stroke-width:1; opacity:.7; }
.ah-r-tick { font:500 11px var(--ds-mono); fill:var(--muted); letter-spacing:.02em; }
.ah-r-day { stroke:var(--muted); stroke-width:1; stroke-dasharray:1 5; opacity:.45; } .ah-r-dayt { font:500 9px var(--ds-mono); fill:var(--muted); opacity:.75; letter-spacing:.04em; }   /* a faint dotted line between trading days, the weekday small under it */
.ah-r-ref { stroke:var(--gold); stroke-width:1; stroke-dasharray:3 4; opacity:.55; }
.ah-r-now { stroke:var(--gold); stroke-width:1; stroke-dasharray:2 5; opacity:.35; } .ah-r-nowtag { transition:opacity .35s ease; }
.ah-r-nowbg { fill:#0b0c10; stroke:var(--gold); stroke-width:1; } .ah-r-nowtx { font:700 12px var(--ds-mono); fill:var(--gold); }
.ah-r-tagbg { fill:var(--gold); } .ah-r-tagtx { font:700 12px var(--ds-mono); fill:#17120a; }
@media (max-width: 700px) {   /* phones: roomy words, then the pair row and the chart's line and numbers right under them, all above Safari's bottom bar; only the gold fill runs on below, behind the Baroq pill and the bar (Igor, 25 Oct 2026, iPhone 375x667) */
  .ah-top { --p:clamp(120px, 18svh, 200px); height:auto; max-height:none; min-height:0; }   /* --p: the line's own height, taller on taller screens */
  .ah-top-in { padding-top:8px; gap:10px; padding-bottom:calc(var(--p) + 58px + 110px + 12px); }
  .ah-top-in .lp-eye { display:none; }
  .ah-top h1 { font-size:31px; }
  .ah-sub { font-size:17px; max-width:19em; }
  .ah-cta, .ah-top .cta { padding:14px 30px; font-size:17px; }
  .ah-also { font-size:13px; margin:-2px 0 0; }
  .ah-bg { bottom:0; height:calc(var(--p) + 58px + 110px); --ah-pad:110px; --ah-top:32px; --ah-bot:10px;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 30px); mask-image:linear-gradient(to bottom, transparent 0, #000 30px); }
  .ah-r-tick { display:none; }
  .ah-ent { margin-top:74px; }   /* the company line starts below the Baroq pill's corner on a 375x667 screen */
  .ah-live { bottom:calc(var(--p) + 152px); gap:7px; font-size:11px; }   /* the pair row sits right under the proof lines, the line and price tag below it; short, "EUR/USD · 5D", so it reads as part of the chart (Igor, 25 Oct 2026) */
  .ah-live .ah-lab, .ah-pl-k { display:none; } .ah-pl { margin-right:auto; }
  .ah-ic, .ah-ic svg { height:16px; } .ah-sym::after { content:"\00a0\00b7\00a0 5D"; color:var(--muted); font-weight:500; }
}
@media (prefers-reduced-motion: no-preference) {
  .ah-line { animation:ah-still 16s ease-in-out 3.5s infinite backwards; }
  @keyframes ah-still { 0% { clip-path:inset(0 100% 0 0); opacity:0; } 5% { opacity:1; } 62% { clip-path:inset(0 0 0 0); opacity:1; } 90% { clip-path:inset(0 0 0 0); opacity:1; } 100% { clip-path:inset(0 0 0 0); opacity:0; } }
  .ah-top.live .ah-line { animation:none; }
  .ah-r-ring { animation:ah-ping 2.2s ease-out infinite; }
  @keyframes ah-ping { from { opacity:.9; transform:scale(.6); } to { opacity:0; transform:scale(4); } }
  .ah-top::before { animation:ah-breathe 12s ease-in-out infinite; }
  @keyframes ah-breathe { 50% { opacity:.75; } }
  .ah-top::after { animation:ah-drift 60s linear infinite; }
  @keyframes ah-drift { to { background-position:72px 72px, 72px 72px; } }
  .ah-in { animation:ah-up 1s var(--ds-ease, ease) both; }
  .ah-top-in > :nth-child(2) { animation-delay:.1s; } .ah-top-in > :nth-child(3) { animation-delay:.22s; } .ah-top-in > :nth-child(4) { animation-delay:.34s; }
  .ah-top-in > :nth-child(5) { animation-delay:.46s; } .ah-top-in > :nth-child(6) { animation-delay:.56s; }
  @keyframes ah-up { from { opacity:0; transform:translateY(22px); } }
}
.ah-stage { position:relative; background:radial-gradient(60% 50% at 50% 0%, color-mix(in srgb, var(--gold) 9%, transparent), transparent 70%); }
.ah-big .lp-head h2 { font-size:clamp(34px, 5.4vw, 68px); line-height:1.04; letter-spacing:-0.035em; }
.ah-mid.lp-head { display:flex; flex-direction:column; align-items:center; text-align:center; gap:18px; }
.ah-mid.lp-head > div { display:flex; flex-direction:column; align-items:center; gap:16px; }
.ah-mid.lp-head > p { max-width:34em; }
.ah-card { display:flex; flex-direction:column; grid-template-columns:none; max-width:1040px; margin:8px auto 0; padding:clamp(18px, 3.4vw, 40px); row-gap:14px; align-content:start; min-width:0; }
.ah-card > .ah { gap:18px; }
.ah-picks { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:14px 28px; }
@media (max-width: 760px) { .ah-picks { grid-template-columns:minmax(0, 1fr); } }
.ah { display:flex; flex-direction:column; gap:12px; min-width:0; }
.ah-pick { display:flex; flex-direction:column; gap:6px; }
.ah-chips { display:flex; flex-wrap:wrap; gap:6px; }
.ah-chip { appearance:none; font:560 13.5px/1 var(--ui); letter-spacing:-0.005em; color:var(--ink-2); background:color-mix(in srgb, var(--card) 80%, transparent);
  border:1px solid var(--rule); border-radius:999px; padding:9px 14px; min-height:36px; cursor:pointer; transition:color var(--ds-fast) ease, border-color var(--ds-fast) ease, background var(--ds-fast) ease, transform var(--ds-fast) var(--ds-ease); }
.ah-chip:hover { color:var(--ink); border-color:var(--ds-gold-line); transform:translateY(-1px); }
.ah-chip[aria-pressed="true"] { color:var(--ds-on-gold); background:var(--ds-gold-grad); border-color:transparent; box-shadow:0 6px 18px -8px color-mix(in srgb, var(--ds-gold) 70%, transparent); }
.ah-chip:focus-visible, .ah-run:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
.ah-svg { width:100%; height:auto; max-height:460px; margin:0 auto; display:block; border-radius:16px; border:1px solid var(--rule); background:radial-gradient(80% 90% at 80% 0%, color-mix(in srgb, var(--gold) 9%, transparent), transparent 70%), color-mix(in srgb, var(--sunk, var(--card)) 70%, transparent); }
.ah-svg .grid { stroke:var(--rule); stroke-width:1; }
.ah-svg .zero { stroke:var(--rule); stroke-width:1; stroke-dasharray:3 4; }
.ah-svg .px { fill:none; stroke:var(--gold); stroke-width:2.4; stroke-linejoin:round; stroke-linecap:round; }
.ah-svg .eq { fill:none; stroke:var(--ink); stroke-width:1.6; stroke-linejoin:round; opacity:.85; }
.ah-svg .eqfill { fill:color-mix(in srgb, var(--gold) 14%, transparent); stroke:none; }
.ah-svg text { font:500 11px var(--ds-mono); fill:var(--muted); letter-spacing:.04em; }
.ah-svg .lbl { font-weight:600; opacity:0; transition:opacity .35s ease; } .ah-svg .lbl.on { opacity:1; }
.ah-svg .lbl.w { fill:#3bbf86; } .ah-svg .lbl.l { fill:#e5645f; }
.ah-svg .mk { opacity:0; transform-box:fill-box; transform-origin:center; transform:scale(.2); transition:opacity .3s ease, transform .45s cubic-bezier(.2,1.6,.4,1); }
.ah-svg .mk.on { opacity:1; transform:none; }
.ah-svg .mk.b { fill:#3bbf86; } .ah-svg .mk.s { fill:#e5645f; }
.ah-svg .leg { stroke-width:1.4; stroke-dasharray:3 3; opacity:0; transition:opacity .4s ease; } .ah-svg .leg.on { opacity:.9; }
.ah-svg .leg.w { stroke:#3bbf86; } .ah-svg .leg.l { stroke:#e5645f; }
.ah-svg .dot { fill:var(--gold); } .ah-svg .ping { fill:none; stroke:var(--gold); stroke-width:1.5; transform-box:fill-box; transform-origin:center; }
.ah-status { min-height:1.4em; font:500 12.5px/1.4 var(--ds-mono); letter-spacing:.04em; color:var(--muted); display:flex; align-items:center; gap:8px; }
.ah-status.busy::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--gold); flex:none; }
.ah-stats { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; margin:0; }
.ah-stats > div { border:1px solid var(--rule); border-radius:14px; padding:10px 12px; background:color-mix(in srgb, var(--card) 70%, transparent); min-width:0; }
.ah-stats dd { margin:4px 0 0; font:640 20px/1.15 var(--display); letter-spacing:-0.02em; font-variant-numeric:tabular-nums lining-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ah-stats dd.up { color:#3bbf86; } .ah-stats dd.down { color:#e5645f; }
.ah-run { align-self:flex-start; }
.ah-fine { margin:0; }
.ah-steps .lp-card { overflow:hidden; padding:clamp(24px, 3vw, 36px); }
.ah-steps h3 { font-size:clamp(22px, 2.4vw, 30px); line-height:1.15; letter-spacing:-0.02em; }
.ah-sec .lp-head h2 { font-size:clamp(32px, 4.6vw, 58px); line-height:1.04; letter-spacing:-0.035em; }
.ah-type { margin-top:auto; padding:14px 16px; border-radius:14px; border:1px solid var(--rule); background:var(--sunk, var(--card)); font:500 14px/1.45 var(--ds-mono); color:var(--ink); }
.ah-type span { display:block; }
.ah-limits { margin-top:auto; display:flex; flex-direction:column; gap:12px; }
.ah-limits p { display:grid; gap:6px; margin:0; } .ah-limits b { font:500 11.5px/1.3 var(--ds-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:500; }
.ah-limits i { display:block; height:8px; border-radius:999px; background:var(--rule); overflow:hidden; position:relative; }
.ah-limits i::after { content:""; position:absolute; inset:0; width:70%; border-radius:inherit; background:var(--ds-gold-grad); }
.ah-limits p:nth-child(2) i::after { width:45%; } .ah-limits p:nth-child(3) i::after { width:60%; }
.ah-modes { margin-top:auto; display:flex; gap:8px; flex-wrap:wrap; }
.ah-modes span { font:560 13px/1 var(--ui); padding:10px 16px; border-radius:999px; border:1px solid var(--rule); color:var(--muted); }
.ah-modes span.on { color:var(--ds-on-gold); background:var(--ds-gold-grad); border-color:transparent; }
@media (prefers-reduced-motion: no-preference) {
  .ah-status.busy::before { animation:ah-blink 1s ease-in-out infinite; }
  @keyframes ah-blink { 50% { opacity:.25; } }
  .ah-svg .ping { animation:ah-ping 2s ease-out infinite; }
  @keyframes ah-ping { from { opacity:.9; transform:scale(.5); } to { opacity:0; transform:scale(3.2); } }
  .ah-type span { clip-path:inset(0 100% 0 0); animation:ah-typing 6s steps(44) infinite; }
  @keyframes ah-typing { 0% { clip-path:inset(0 100% 0 0); } 55%, 90% { clip-path:inset(0 0 0 0); } 100% { clip-path:inset(0 100% 0 0); } }
  .ah-limits i::after { transform-origin:right; animation:ah-fill 4.5s cubic-bezier(.2,.8,.2,1) infinite; }
  .ah-limits p:nth-child(2) i::after { animation-delay:.35s; } .ah-limits p:nth-child(3) i::after { animation-delay:.7s; }
  @keyframes ah-fill { 0% { transform:scaleX(0); } 35%, 85% { transform:scaleX(1); } 100% { transform:scaleX(0); } }
  .ah-modes span.on { animation:ah-glow 2.4s ease-in-out infinite; }
  @keyframes ah-glow { 50% { box-shadow:0 0 0 6px color-mix(in srgb, var(--gold) 22%, transparent); } }
  .ah-chip, .ah-svg .px { will-change:auto; }
}
.ah-plat { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; }
.ah-plat .lp-card { gap:12px; padding:clamp(22px, 2.6vw, 30px); }
.ah-plat h3 { font-size:clamp(20px, 2vw, 24px); line-height:1.2; letter-spacing:-0.02em; }
.ah-plat .text-link { margin-top:auto; }
@media (max-width: 1000px) { .ah-plat { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ah-plat { grid-template-columns:minmax(0, 1fr); } }
.ah-blocks { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px; }
.ah-blocks .lp-card { gap:10px; padding:24px; }
.ah-w { display:block; margin-top:auto; height:8px; border-radius:999px; background:var(--rule); position:relative; overflow:hidden; }
.ah-w::after { content:""; position:absolute; inset:0; border-radius:inherit; background:var(--ds-gold-grad); transform-origin:right; }
.ah-w.w1::after { width:80%; } .ah-w.w2::after { width:45%; } .ah-w.w3::after { width:25%; } .ah-w.w4::after { width:60%; }
.ah-mix { display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px; margin:22px 0 6px; }
.ah-pills { display:flex; gap:8px; }
.ah-pills b { font:600 14px/1 var(--ui); padding:10px 18px; border-radius:999px; border:1px solid var(--rule); color:var(--muted); }
@media (max-width: 1100px) { .ah-blocks { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ah-blocks { grid-template-columns:minmax(0, 1fr); } }
@media (prefers-reduced-motion: no-preference) {
  .ah-w::after { animation:ah-weight 7s ease-in-out infinite; }
  .ah-blocks .lp-card:nth-child(2) .ah-w::after { animation-delay:-1.7s; } .ah-blocks .lp-card:nth-child(3) .ah-w::after { animation-delay:-3.4s; } .ah-blocks .lp-card:nth-child(4) .ah-w::after { animation-delay:-5.1s; }
  @keyframes ah-weight { 0%, 100% { transform:scaleX(.35); } 50% { transform:scaleX(1); } }
  .ah-pills b { animation:ah-pick 6s steps(1) infinite; }
  .ah-pills b:nth-child(2) { animation-delay:2s; } .ah-pills b:nth-child(3) { animation-delay:4s; }
  @keyframes ah-pick { 0% { color:var(--ds-on-gold); background:var(--ds-gold-grad); border-color:transparent; } 33.3% { color:var(--muted); background:none; border-color:var(--rule); } }
}
@media (max-width: 900px) { .ah-stats { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .ah-stats dd { font-size:18px; }  }

/* ---------------------------------------------------------------- the story page (/story, sales/story.py) ---- */
.st { overflow-x:clip; }
.st-bar { position:fixed; z-index:60; right:0; left:0; top:0; height:3px; background:var(--gold); transform-origin:0 50%; transform:scaleX(var(--p, 0)); pointer-events:none; opacity:.9; }
.st em { font-family:var(--ds-serif); font-style:italic; font-weight:400; color:var(--gold-ink); }
.st h2 { font:630 clamp(32px, 4.4vw, 64px)/1.04 var(--display); letter-spacing:-0.035em; margin:8px 0 16px; }
.st .lp-eye { margin:0 0 6px; }
/* hero */
.st-hero { position:relative; isolation:isolate; min-height:min(100svh, 980px); display:flex; align-items:center; padding:clamp(56px, 9vh, 120px) 0 calc(clamp(190px, 30vh, 330px) + 28px); overflow:clip;
  background:radial-gradient(60% 70% at 78% 40%, color-mix(in srgb, var(--gold) 16%, transparent), transparent 70%), #08080a; }
.st-hero.ah-top { height:auto; max-height:none; justify-content:flex-start; text-align:right; border-bottom:0; }
.st-hero h1.st-h1 { max-width:14em; text-wrap:initial; font-size:clamp(38px, min(6.4vw, 10vh), 112px); line-height:1; letter-spacing:-0.045em; }
.st-hero h1.st-h1 em { background:none; -webkit-background-clip:border-box; background-clip:border-box; color:var(--gold-ink); font-style:italic; }
.st-hero .st-sub { text-wrap:initial; }
.st-orbit { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:-2; transform:translateY(calc(var(--hs, 0) * .18px)); }
.st-ring { fill:none; stroke:var(--gold); stroke-opacity:.22; stroke-width:1.2; transform-origin:720px 360px; }
.st-ring.r2 { stroke-opacity:.14; } .st-ring.r3 { stroke-opacity:.09; } .st-ring.r4 { stroke-opacity:.06; }
.st-dots { display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--g, 22px); width:max-content; pointer-events:none; }
.st-dots i { width:var(--d, 26px); height:var(--d, 26px); border-radius:50%; background:var(--gold); box-shadow:0 0 34px color-mix(in srgb, var(--gold) 55%, transparent); opacity:.85; }
.st-dots i:nth-child(2n) { opacity:.35; } .st-dots i:nth-child(5) { opacity:1; box-shadow:0 0 60px var(--gold); }
.st-hero-dots { position:absolute; left:clamp(40px, 11%, 190px); top:50%; --d:clamp(22px, 2.4vw, 38px); --g:clamp(18px, 2vw, 32px);
  transform:translate(calc(var(--mx, 0) * -14px), calc(-50% + var(--my, 0) * -14px)); transition:transform .4s var(--ds-ease, ease-out); }
.st-hero-in { position:relative; z-index:1; }
.st-h1 { font:640 clamp(40px, min(7.6vw, 11vh), 120px)/1 var(--display); letter-spacing:-0.045em; margin:10px 0 22px; max-width:11em; }
.st-h1 .st-mask { display:inline-block; margin-left:.22em; }
.st-h1 em { font-size:1.04em; letter-spacing:-0.03em; }
.st-mask { overflow:hidden; padding-bottom:.1em; vertical-align:top; }
.st-mask > span { display:block; }
.st-sub { font-size:clamp(16px, 1.4vw, 20px); line-height:1.55; color:var(--ink-2); max-width:36em; margin:0 0 22px; } .st-sub strong { color:var(--ink); }
.st-facts { list-style:none; display:flex; flex-wrap:wrap; gap:8px 26px; margin:22px 0 0; padding:0; font:500 12.5px/1.3 var(--ds-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.st-facts li { display:inline-flex; align-items:center; gap:9px; } .st-facts li::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--gold); }
.st-ctas { display:flex; flex-wrap:wrap; gap:14px 22px; align-items:center; }
/* chapter one: words that light up */
.st-scrub { position:relative; height:330vh; }
.st-pin { position:sticky; top:0; height:100svh; display:flex; align-items:center; }
.st-scrub-in { max-width:920px; }
.st-line { font:560 clamp(17px, min(2.4vw, 3.1vh), 36px)/1.22 var(--display); letter-spacing:-0.02em; margin:0 0 .4em; color:var(--ink); }
.st-line.big { font-size:clamp(24px, min(3.8vw, 5.2vh), 58px); letter-spacing:-0.035em; line-height:1.06; margin-top:.3em; }
.st-line.gold { color:var(--gold-ink); font-family:var(--ds-serif); font-style:italic; font-weight:400; }
html.js .st-line .w { opacity:.13; transition:opacity .5s var(--ds-ease, ease); }
html.js .st-line .w.on { opacity:1; }
/* chapter two: the three eras */
.st-era { padding-top:clamp(64px, 10vw, 140px); }
.st-era-h { max-width:760px; } .st-era-h p { color:var(--ink-2); font-size:18px; line-height:1.6; margin:0 0 12px; } .st-era-h strong { color:var(--ink); }
.st-rail { margin-top:clamp(40px, 6vw, 80px); position:relative; }
.st-rail-line { height:2px; background:var(--rule-2); position:relative; margin:0 0 -1px; }
.st-rail-fill { position:absolute; inset:0; background:var(--gold); transform-origin:0 50%; transform:scaleX(var(--rail, 1)); box-shadow:0 0 18px var(--gold); }
.st-nodes { list-style:none; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:24px; padding:0; margin:0; }
.st-node { position:relative; padding-top:30px; }
.st-node::before { content:""; position:absolute; top:-7px; right:0; width:14px; height:14px; border-radius:50%; background:var(--gold); box-shadow:0 0 22px var(--gold); }
.st-node b { display:block; font:620 clamp(22px, 2.4vw, 32px)/1.1 var(--display); letter-spacing:-0.025em; margin-bottom:8px; }
.st-node span { display:block; color:var(--ink-2); line-height:1.55; }
html.js .st-node { opacity:.3; transition:opacity .7s var(--ds-ease, ease); } html.js .st-node::before { transform:scale(.5); background:var(--rule); box-shadow:none; transition:transform .6s var(--ds-ease, ease), background .6s, box-shadow .6s; }
html.js .st-node.on { opacity:1; } html.js .st-node.on::before { transform:none; background:var(--gold); box-shadow:0 0 22px var(--gold); }
html.js .st-rail-fill { transform:scaleX(var(--rail, 0)); }
/* chapter three: sticky stage */
.st-method { padding-top:clamp(64px, 10vw, 140px); }
.st-method-h { max-width:760px; margin-bottom:clamp(24px, 4vw, 48px); } .st-method-h p { color:var(--ink-2); font-size:18px; line-height:1.6; }
.st-method-in { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:clamp(28px, 5vw, 80px); align-items:start; }
.st-ch { min-height:62vh; display:flex; flex-direction:column; justify-content:center; gap:10px; opacity:.35; transition:opacity .5s var(--ds-ease, ease); }
.st-ch.now { opacity:1; }
.st-n { font:500 13px/1 var(--ds-mono); letter-spacing:.14em; color:var(--gold-ink); }
.st-ch h3 { font:620 clamp(26px, 3vw, 42px)/1.1 var(--display); letter-spacing:-0.03em; margin:0; }
.st-ch p { color:var(--ink-2); font-size:17px; line-height:1.55; margin:0; max-width:30em; }
.st-ch p span { display:block; font:600 11px/1 var(--ds-mono); letter-spacing:.14em; text-transform:uppercase; margin-bottom:6px; color:var(--muted); }
.st-usual { text-decoration:line-through; text-decoration-color:color-mix(in srgb, var(--muted) 50%, transparent); } .st-usual span { text-decoration:none; display:block; }
.st-baroq { color:var(--ink); font-weight:560; padding-right:14px; border-right:2px solid var(--gold); } .st-baroq span { color:var(--gold-ink); }
.st-ch .text-link { margin-top:4px; }
.st-stage { position:sticky; top:calc(50vh - 190px); border:1px solid var(--ds-gold-line); border-radius:24px; background:var(--card); padding:18px; box-shadow:var(--ds-shadow-3); }
.st-stage svg { display:block; width:100%; height:auto; }
.st-cap { margin:4px 4px 0; text-align:left; font:500 11px/1.4 var(--ds-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.st-ly { opacity:0; transition:opacity .5s var(--ds-ease, ease); }
.st-stage[data-step="1"] .l1, .st-stage[data-step="2"] .l2, .st-stage[data-step="3"] .l3, .st-stage[data-step="4"] .l4 { opacity:1; }
.st .lb { font:500 13px/1 var(--ds-mono); fill:var(--ink-2); letter-spacing:.02em; } .st .lb.hot { fill:var(--gold-ink); } .st .lb.dim { fill:var(--muted); }
.st-rows rect { transform-box:fill-box; transform-origin:0 50%; transform:scaleX(0); transition:transform .8s var(--ds-ease, ease); }
.st-rows .tu { fill:color-mix(in srgb, var(--gold) 28%, transparent); } .st-rows .te { fill:var(--gold); }
.st-stage[data-step="1"] .st-rows rect { transform:none; }
.st-rows rect:nth-child(3) { transition-delay:.15s; } .st-rows rect:nth-child(4) { transition-delay:.3s; } .st-rows rect:nth-child(5) { transition-delay:.45s; } .st-rows rect:nth-child(6) { transition-delay:.6s; }
.l2 .gross, .l2 .net, .l3 .px { fill:none; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.3s var(--ds-ease, ease); }
.l2 .gross { stroke:var(--muted); stroke-dasharray:.03 .02; } .l2 .net, .l3 .px { stroke:var(--gold); }
.l2 .gap { fill:color-mix(in srgb, var(--gold) 12%, transparent); opacity:0; transition:opacity .8s .9s; }
.st-stage[data-step="2"] .l2 .gross, .st-stage[data-step="2"] .l2 .net, .st-stage[data-step="3"] .l3 .px { stroke-dashoffset:0; }
.st-stage[data-step="2"] .l2 .gap { opacity:1; }
.l3 .stop { stroke:var(--down, #e0806f); stroke-width:1.5; stroke-dasharray:6 6; } .l3 .out { fill:var(--down, #e0806f); transform-box:fill-box; transform-origin:center; transform:scale(0); transition:transform .5s 1.1s var(--ds-ease, ease); }
.st-stage[data-step="3"] .l3 .out { transform:scale(1); }
.st-cards > g { transform:translateX(30px); opacity:0; transition:transform .6s var(--ds-ease, ease), opacity .6s; }
.st-cards > g:nth-child(2) { transition-delay:.15s; } .st-cards > g:nth-child(3) { transition-delay:.3s; } .st-cards > g:nth-child(4) { transition-delay:.45s; }
.st-stage[data-step="4"] .st-cards > g { transform:none; opacity:1; }
.st-cards rect { fill:var(--sunk, #101114); stroke:var(--ds-gold-line); } .st-cards text { font:500 14px/1 var(--ds-mono); fill:var(--ink); }
.st-cards .stamp { fill:var(--down, #e0806f); font-size:12px; letter-spacing:.06em; text-transform:uppercase; } .st-cards .next .stamp { fill:var(--gold-ink); } .st-cards .next rect { stroke:var(--gold); }
/* the live agent */
.st-try { padding-top:clamp(64px, 10vw, 140px); } .st-try-h { max-width:760px; margin-bottom:24px; } .st-try-h p { color:var(--ink-2); font-size:18px; line-height:1.6; }
.st-try .ah-card { max-width:none; margin-top:0; }
/* chapter four */
.st-ladder { margin:6px 0 26px; } .st-ladder p { font:620 clamp(24px, 3.2vw, 42px)/1.15 var(--display); letter-spacing:-0.03em; margin:0 0 .15em; } .st-ladder mark { background:var(--gold-wash); color:var(--ink); padding:0 6px; border-radius:6px; }
/* chapter five */
.st-desk { padding-top:clamp(64px, 10vw, 140px); }
.st-desk-h { max-width:760px; margin-bottom:clamp(24px, 4vw, 48px); } .st-desk-h p { color:var(--ink-2); font-size:18px; line-height:1.6; }
.st-cards { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px; }
.st-card { position:relative; display:flex; flex-direction:column; gap:10px; padding:26px 24px 22px; border-radius:20px; border:1px solid var(--rule-2); background:var(--card); color:var(--ink); text-decoration:none;
  transition:transform .35s var(--ds-ease, ease), border-color .35s, box-shadow .35s; }
.st-card { background:radial-gradient(260px circle at var(--cx, 50%) var(--cy, -40%), color-mix(in srgb, var(--gold) 16%, transparent), transparent 70%), var(--card); }
.st-card:hover { transform:translateY(-6px); border-color:var(--ds-gold-line); box-shadow:0 22px 50px -26px rgba(212,175,90,.6); }
.st-card-k { font:620 22px/1.15 var(--display); letter-spacing:-0.02em; } .st-card p { color:var(--ink-2); line-height:1.55; margin:0; flex:1; }
.st-card-go { color:var(--gold-ink); font-weight:600; }
/* chapter six */
.st-limits { padding-top:clamp(48px, 8vw, 110px); }
.st-lim { list-style:none; padding:0; margin:24px 0 18px; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; }
.st-lim li { padding:24px; border-radius:18px; border:1px dashed var(--ds-gold-line); display:flex; flex-direction:column; gap:8px; }
.st-lim b { font:620 22px/1.15 var(--display); letter-spacing:-0.02em; } .st-lim span { color:var(--ink-2); line-height:1.55; }
/* close */
.st-close { position:relative; text-align:center; padding:clamp(64px, 0 150px) 10vw,; background:radial-gradient(50% 70% at 50% 100%, color-mix(in srgb, var(--gold) 20%, transparent), transparent 70%); overflow:clip; }
.st-close h2 { max-width:16ch; margin:24px auto 14px; } .st-close p { color:var(--ink-2); font-size:19px; margin:0 0 24px; } .st-close .lp-ctas { justify-content:center; }
.st-close-dots { margin:0 auto; --d:20px; --g:16px; }
/* headline words rise when their block enters */
.sw { display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.14em; margin-bottom:-.14em; }
html.js .sw > span { display:inline-block; transform:translateY(108%); transition:transform .95s var(--ds-ease, cubic-bezier(.2,.8,.2,1)) calc(var(--i, 0) * 70ms); }
html.js .st-rv.in .sw > span, html.js .st-scrub .sw > span { transform:none; }
/* marquee */
.st-marq { overflow:hidden; border-block:1px solid var(--rule-2); padding:18px 0; }
.st-marq-t { display:flex; width:max-content; align-items:center; gap:36px; animation:st-marq 46s linear infinite; }
.st-marq-t span { font:600 clamp(28px, 4vw, 54px)/1 var(--display); letter-spacing:-0.03em; color:transparent; -webkit-text-stroke:1px var(--ds-gold-line); white-space:nowrap; }
.st-marq-t i { width:12px; height:12px; border-radius:50%; background:var(--gold); flex:none; }
@keyframes st-marq { to { transform:translateX(50%); } }
/* entrance + scroll reveals */
.st-in { animation:st-up .9s var(--ds-ease, ease) both; } .st-mask > span { animation:st-rise 1.1s var(--ds-ease, cubic-bezier(.2,.8,.2,1)) both; }
.st-mask:nth-child(2) > span { animation-delay:.08s; } .st-mask:nth-child(3) > span { animation-delay:.16s; } .st-mask:nth-child(4) > span { animation-delay:.24s; } .st-mask:nth-child(6) > span { animation-delay:.34s; } .st-mask:nth-child(7) > span { animation-delay:.42s; } .st-mask:nth-child(8) > span { animation-delay:.5s; } .st-mask:nth-child(9) > span { animation-delay:.58s; } .st-mask:nth-child(10) > span { animation-delay:.66s; } .st-sub.st-in { animation-delay:.75s; } .st-ctas.st-in { animation-delay:.9s; } .st-facts.st-in { animation-delay:1.05s; } .st-hero .lp-eye.st-in { animation-delay:.05s; }
.st-ring { animation:st-spin 90s linear infinite; } .st-ring.r2 { animation-duration:140s; animation-direction:reverse; } .st-ring.r3 { animation-duration:200s; } .st-ring.r4 { animation-duration:260s; animation-direction:reverse; }
.st-hero-dots i { animation:st-gather 1.6s cubic-bezier(.2,.8,.2,1) var(--gd, 0s) both, st-glow 4.8s ease-in-out calc(var(--gd, 0s) + 1.6s) infinite; }
.st-hero-dots i:nth-child(1) { --sx:-140px; --sy:-110px; } .st-hero-dots i:nth-child(2) { --sx:20px; --sy:-150px; } .st-hero-dots i:nth-child(3) { --sx:150px; --sy:-80px; }
.st-hero-dots i:nth-child(4) { --sx:-170px; --sy:10px; } .st-hero-dots i:nth-child(5) { --sx:0px; --sy:0px; } .st-hero-dots i:nth-child(6) { --sx:170px; --sy:30px; }
.st-hero-dots i:nth-child(7) { --sx:-120px; --sy:130px; } .st-hero-dots i:nth-child(8) { --sx:30px; --sy:160px; } .st-hero-dots i:nth-child(9) { --sx:140px; --sy:110px; } html.js .st-rv { opacity:0; transform:translateY(28px); transition:opacity .9s var(--ds-ease, ease), transform .9s var(--ds-ease, ease); }
html.js .st-rv.in { opacity:1; transform:none; }
html.js .st-ch.st-rv { opacity:.35; transform:none; } html.js .st-ch.st-rv.now { opacity:1; }
@keyframes st-up { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:none; } }
@keyframes st-rise { from { transform:translateY(105%); } to { transform:none; } }
@keyframes st-spin { to { transform:rotate(360deg); } }
@keyframes st-gather { from { transform:translate(var(--sx), var(--sy)) scale(.2); opacity:0; } to { transform:none; } }
@keyframes st-glow { 0%, 100% { filter:brightness(.8); } 50% { filter:brightness(1.5); } }
@media (max-width: 1100px) { .st-cards { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .st-hero-dots { display:none; } .st-method-in { grid-template-columns:minmax(0, 1fr); }
  .st-stage { position:sticky; top:64px; z-index:2; order:-1; padding:10px; } .st-ch { min-height:48vh; }
  .st-nodes { grid-template-columns:minmax(0, 1fr); } .st-lim { grid-template-columns:minmax(0, 1fr); } .st-scrub { height:320vh; }
}
@media (max-width: 560px) { .st-cards { grid-template-columns:minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) {
  .st-in, .st-mask > span, .st-ring, .st-hero-dots i, .st-marq-t { animation:none !important; }
  html.js .sw > span { transform:none; transition:none; }
  html.js .st-rv { opacity:1; transform:none; transition:none; } html.js .st-line .w { opacity:1; transition:none; } html.js .st-node { opacity:1; }
  .st-scrub { height:auto; } .st-pin { position:static; height:auto; padding:56px 0; }
}

/* ---------------------------------------------------------------- education (/education, /my-tools/education, edu/web.py) */
.edu { display:flex; flex-direction:column; gap:28px; padding-bottom:56px; }
.edu h1 { max-width:20ch; }
.edu-three { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:20px; }
.edu-three h2, .edu-card h2 { font-size:22px; }
.edu-list { display:flex; flex-direction:column; gap:6px; padding-right:1.3em; color:var(--ink-2); }
.edu-list a { font-weight:550; }
.edu-list span, .edu-k { font:500 11.5px/1.5 var(--ds-mono); letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); }
.edu-list span { margin-right:8px; }
.edu-lesson { max-width:46em; display:flex; flex-direction:column; gap:14px; }
.edu-lesson h2 { margin-top:18px; font-size:24px; }
.edu-lesson p, .edu-card p { color:var(--ink-2); line-height:1.65; }
.edu-task { border-right:3px solid var(--gold); }
.edu-nav { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 28px; border-top:1px solid var(--rule); padding-top:18px; }
.edu-code { margin:0; max-height:360px; overflow:auto; padding:16px 18px; border-radius:14px; border:1px solid var(--rule);
  background:var(--bg-2, var(--card)); font:400 13px/1.55 var(--ds-mono); color:var(--ink); white-space:pre; }
.edu-ideas td, .edu-ideas th { white-space:nowrap; }
.edu-ideas td.edu-why { white-space:normal; min-width:18em; }
.edu-up { color:var(--up); } .edu-down { color:var(--down); }
.edu-form { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px 16px; align-items:end; }
.edu-form .wide { grid-column:1 / -1; }
.edu-form textarea { min-height:7em; }
@media (max-width: 860px) { .edu-three, .edu-form { grid-template-columns:minmax(0, 1fr); } }

.gd-show { position:fixed; left:16px; bottom:16px; z-index:60; display:inline-flex; align-items:center; gap:7px; padding:7px 14px 7px 10px; font-size:14px;
           border:1px solid rgba(255,255,255,.14); border-radius:999px; color:#f4efe4; font-family:inherit; font-weight:600; cursor:pointer; overflow:hidden;
           background:rgba(6,7,9,.86); background:color-mix(in srgb, #040507 74%, transparent);   /* black glass, matte:a deep smoked tint, strong blur and a light edge, no gloss line; the phone menu button is the same (Igor, 25 Oct 2026) */
           -webkit-backdrop-filter:saturate(180%) blur(26px); backdrop-filter:saturate(180%) blur(26px);
           box-shadow:0 8px 28px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.1); }
.gd-show > * { position:relative; }
.gd-show:hover { border-color:var(--gold); }
.gd-show[hidden], .gd-panel[hidden] { display:none; }
.gd-face { width:36px; height:36px; border-radius:50%; object-fit:cover; flex:none; }
.gd-dots { display:inline-grid; grid-template-columns:repeat(3, 5px); gap:3px; place-content:center; background:rgba(0,0,0,.3); border:1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.gd-dots i { width:5px; height:5px; border-radius:50%; background:#6f5f40; } .gd-dots i:nth-child(odd) { background:#c9a45c; } .gd-dots i:nth-child(5) { background:#f0c96e; }   /* the logo mark's golds */
.gd-ai { font:600 10px/1 var(--ds-mono, monospace); letter-spacing:.08em; text-transform:uppercase; color:var(--gold-ink); }
b.gd-ai { padding:3px 5px; border:1px solid var(--gold); border-radius:4px; }
.gd-show .gd-ai { color:#e9c872; }
.gd-panel { position:fixed; left:16px; bottom:16px; z-index:61; width:min(320px, calc(100vw - 32px)); max-height:min(480px, calc(100vh - 32px));
            display:flex; flex-direction:column; gap:8px; padding:12px; border:1px solid var(--rule); border-radius:16px;
            background:var(--paper, var(--card)); color:var(--ink); box-shadow:0 12px 36px rgba(0,0,0,.24); }
.gd-head { display:flex; align-items:center; gap:10px; } .gd-head > div { display:flex; flex-direction:column; gap:3px; flex:1; }
.gd-close { border:0; background:none; color:var(--muted); font-size:24px; line-height:1; cursor:pointer; padding:2px 6px; }
.gd-fine { margin:0; font-size:12.5px; color:var(--muted); line-height:1.45; }
.gd-log { flex:1 1 auto; overflow-y:auto; display:flex; flex-direction:column; gap:8px; min-height:40px; }
.gd-msg { padding:9px 11px; border-radius:12px; border:1px solid var(--rule); white-space:pre-wrap; line-height:1.45; font-size:14px; max-width:92%; }
.gd-msg.me { align-self:flex-end; background:var(--gold-wash, transparent); }
.gd-msg.ai { align-self:flex-start; }
.gd-form, .gd-draft { display:flex; flex-direction:column; gap:6px; }
.gd-draft { padding:10px; border:1px dashed var(--rule); border-radius:12px; }
.gd-draft label { display:flex; flex-direction:column; gap:4px; }
.gd-draft input, .gd-draft textarea { font:inherit; padding:7px; border:1px solid var(--rule); border-radius:8px; background:var(--card, transparent); color:var(--ink); }
.gd-link { display:block; margin-top:6px; font-weight:600; }
.gd-form textarea { width:100%; min-height:52px; resize:vertical; font:inherit; padding:8px; border:1px solid var(--rule); border-radius:10px; background:var(--card, transparent); color:var(--ink); box-sizing:border-box; }
.gd-hello { position:fixed; left:16px; bottom:60px; z-index:60; display:flex; align-items:flex-start; gap:4px; max-width:min(300px, calc(100vw - 32px));
            padding:10px 12px 10px 6px; border:1px solid var(--gold); border-radius:14px 14px 14px 4px; background:var(--card, var(--paper)); color:var(--ink);
            box-shadow:0 8px 24px rgba(0,0,0,.2); animation:gd-in .35s ease-out; }
.gd-hello[hidden] { display:none; }
.gd-hello-open { border:0; background:none; color:inherit; font:inherit; font-size:14px; line-height:1.45; text-align:right; cursor:pointer; padding:0; }
.gd-hello-x { border:0; background:none; color:var(--muted); font-size:20px; line-height:1; cursor:pointer; padding:0 4px; }
@keyframes gd-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) { .gd-hello { animation:none; } }
@media (max-width: 700px) {   /* phones: the same small glass pill, tucked in the corner so the chart behind it still shows (Igor, 25 Oct 2026) */
  .gd-show { left:12px; bottom:3px; gap:6px; padding:5px 11px 5px 8px; font-size:13px; }
  .gd-hello { left:12px; bottom:41px; }
}
@media (max-width: 900px) { body:has(.mnav-t:checked) .gd-show, body:has(.mnav-t:checked) .gd-hello { display:none; } }   /* the open phone menu is not covered by the pill or the greeting */
@media print { .gd-show, .gd-panel, .gd-hello { display:none; } }

.langs { position:relative; display:inline-flex; align-items:center; }
.langs summary { list-style:none; display:inline-flex; align-items:center; gap:6px; cursor:pointer; color:var(--muted);
  font:500 12.5px/1 var(--ds-mono); letter-spacing:0.06em; padding:8px 4px; border-radius:8px; }
.langs summary::-webkit-details-marker { display:none; }
.langs summary:hover, .langs[open] summary { color:var(--ink); }
.langs summary:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
.langs-list { position:absolute; left:0; top:calc(100% + 6px); z-index:60; min-width:180px; max-height:60vh; overflow-y:auto;
  margin:0; padding:6px; list-style:none; background:var(--card); border:1px solid var(--rule); border-radius:14px;
  box-shadow:0 18px 40px rgba(0, 0, 0, 0.18); }
.langs-list a { display:block; padding:9px 12px; border-radius:9px; color:var(--ink-2); text-decoration:none; font-size:14.5px; }
.langs-list a:hover, .langs-list a:focus-visible { background:var(--rule-2); color:var(--ink); }
.langs-list a[aria-current] { color:var(--ink); font-weight:600; }
.langs-list a[aria-current]::after { content:"\2713"; float:left; color:var(--gold); }
.langs-list a { text-align:right; }          /* every name lines up the same way, Arabic too (Igor, 17 Oct 2026) */
/* on a computer the list also opens on hover, like the menu next to it; a click still opens and closes it */
@media (hover: hover) and (min-width: 901px) {
  .langs::details-content { content-visibility:visible; display:contents; }
  .langs:not([open]) .langs-list { opacity:0; visibility:hidden; transition:opacity 0.2s ease, visibility 0s linear 0.2s; }
  .langs:hover .langs-list, .langs:focus-within .langs-list { opacity:1; visibility:visible; transition-delay:0s; }
  .langs-list::before { content:""; position:absolute; right:0; left:0; top:-10px; height:10px; }
}
@media (max-width: 900px) { .topin > .langs { margin-right:10px; } }
/* frosted drop-downs, a bit see-through (Igor, 18 Oct 2026); solid where the browser cannot blur */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .langs-list { background:color-mix(in srgb, var(--card) 76%, transparent); -webkit-backdrop-filter:saturate(160%) blur(18px); backdrop-filter:saturate(160%) blur(18px); }
}
/* in the top bar on a wide screen the list opens to the right of EN (Igor, 18 Oct 2026); narrower screens keep it right-aligned so it stays on screen */
@media (min-width: 1500px) { .topin > .langs .langs-list { right:0; left:auto; } }
/* right-to-left pages: the logo's letters keep their order, and joined scripts (Arabic) take no letter spacing */
[dir="rtl"] .brand { direction:ltr; unicode-bidi:isolate; }
[dir="rtl"] body, [dir="rtl"] body :not(.brand, .brand *) { letter-spacing:normal !important; }