/* ============================================================================
   LANDING-DIAL: the /beta homepage, "The Dial", approved by the founder as mockup v5.0
   (8 Oct 2026, Plans/Website/Landing_Marvel_A_TheDial_v5.0). Loaded by Landing.Master after
   landing.css, which keeps the master's chrome (nav, phone menu, footer, cookie card), the
   tokens on body.lp, the Lockdown static-font switch and the phone-legibility colour mixes.

   Every rule of the page sits under .dl, the page's root in beta.aspx, so nothing here can
   restyle the chrome by accident; the few rules that do touch the chrome are together below
   and say why. .dl.js is set by landing-dial.js: without it the page reads as a plain
   document (no stage, no pinned instruments, the first exchange answered).

   Colours are the site's tokens (canon guard rule 4: no hex outside tos-site.css). The
   mockup's rules and its dark close are matched with color-mix on those same tokens, with a
   plain token as the fallback for a browser without color-mix.
   ============================================================================ */

/* The mono's 600 and 700 (chapter numbers, exchange times, the current step) are static files
   declared in tos-site.css since 9 Oct 2026; this sheet no longer declares a face of its own. */

/* ---- page tokens ----
   The mockup's warm neutrals (tos-site.css, --tos-warm-*, light palette) replace the master's cool
   ones on this page and its chrome: body.lp exists only under Landing.Master, which serves /beta
   alone, so no other page changes. The phone-legibility rule of landing.css is kept: on a phone or
   touch screen the running text and the record labels are a touch darker, warm. */
body.lp {
    --dl-g: 16px;
    --dl-ease: cubic-bezier(.6, 0, .2, 1);
    --lp-ink: var(--tos-warm-ink, var(--tos-text));
    --lp-ink-2: var(--tos-warm-ink-2, var(--tos-text-secondary));
    --lp-muted: var(--tos-warm-muted, var(--tos-text-muted));
    --lp-rule: var(--tos-warm-rule, var(--tos-border));
    --lp-rule-2: var(--tos-warm-rule-2, var(--tos-border-strong));
    --lp-paper-2: var(--tos-warm-band, var(--tos-surface-sunken));
    --lp-dot-off: var(--tos-warm-dot-off, var(--tos-mark-future));
    --dl-ink-2: var(--lp-ink-2);
    --dl-rule: var(--lp-rule);
    --dl-rule-2: var(--lp-rule-2);
    --dl-dim: var(--lp-muted);
    --dl-accent-hover: var(--lp-accent);
    --dl-wedge: var(--tos-accent-bg);
    /* the close, the one dark band */
    --dl-dark: var(--tos-warm-close, var(--tos-text));
    --dl-dink: var(--tos-warm-close-ink, var(--tos-text-inverse));
    --dl-dmut: var(--tos-warm-close-muted, var(--tos-mark-future));
    --dl-drule: var(--tos-warm-close-rule, var(--tos-text-secondary));
    --dl-dline: var(--tos-warm-close-line, var(--tos-text-secondary));
    --dl-dtick: var(--tos-warm-close-tick, var(--tos-text-muted));
}
@supports (color: color-mix(in srgb, red, blue)) {
    body.lp {
        --lp-ink-2: color-mix(in srgb, var(--tos-warm-ink-2) 80%, var(--tos-warm-ink));
        --lp-muted: color-mix(in srgb, var(--tos-warm-muted) 75%, var(--tos-warm-ink));
        /* a faded rim label: quieter than the live ones, still 3.5:1 on the paper */
        --dl-dim: color-mix(in srgb, var(--lp-ink) 48%, var(--lp-paper));
        --dl-accent-hover: color-mix(in srgb, var(--lp-accent) 90%, var(--lp-ink));
        --dl-wedge: color-mix(in srgb, var(--lp-accent) 10%, transparent);
    }
    /* a desktop with a mouse: the mockup's own values */
    @media (min-width: 981px) and (pointer: fine) {
        body.lp { --lp-ink-2: var(--tos-warm-ink-2); --lp-muted: var(--tos-warm-muted); }
    }
}
@media (min-width: 600px) { body.lp { --dl-g: 24px; } }
@media (min-width: 1000px) { body.lp { --dl-g: 40px; } }
@media (min-width: 1360px) { body.lp { --dl-g: 56px; } }

/* ---- the master's chrome, on this page ----
   1. The header and the footer sit on the page's own grid (1440 wide, the --dl-g gutter), so
      the logo lines up with the hero, as it does in the mockup.
   2. On a phone the header steps aside (.away, set by landing-dial.js) while a chapter's
      instrument is pinned to the top of the screen, and comes back when it is released.
   3. The header mark fills one more dot per chapter reached, its hand on the newest. */
body.lp { --lp-max: 1440px; --lp-pad: var(--dl-g); }
.lp-nav { transition: transform .32s var(--dl-ease); }
.lp-nav.away { transform: translateY(-101%); }
.lp-nav .lp-brand .lp-off circle { transition: fill .4s ease; }
.lp-nav .lp-brand .lp-off circle.on { fill: var(--lp-accent); }
.lp-nav .lp-brand .lp-hand { transform-origin: 32px 32px; transition: transform .6s var(--dl-ease); }

/* ---- the page (the mockup's own rules, scoped under .dl) ---- */
html:has(body.lp .dl){-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px}
html:has(body.lp .dl),body.lp:has(.dl){overflow-x:clip}
/* body.lp already sets the paper, the 17px size and the font (with the Lockdown static-font switch
   and the heavier phone weight from landing.css); the page only sets its running colour */
.dl{color:var(--dl-ink-2);line-height:1.6}
.dl h1,.dl h2,.dl h3,.dl p,.dl ol,.dl ul,.dl dl,.dl dd,.dl figure,.dl blockquote{margin:0;padding:0}
.dl ol,.dl ul{list-style:none}
.dl a{color:inherit}
.dl button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;border-radius:0}
.dl :focus-visible{outline:2px solid var(--lp-ink);outline-offset:3px}
.dl .close :focus-visible{outline-color:var(--dl-dink)}
.dl .rec{font-family:var(--tos-font-mono);font-size:12px;font-weight:450;letter-spacing:0;line-height:1.5}
.dl .vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.dl .wrap{max-width:1440px;margin:0 auto;padding-inline:var(--dl-g)}
/* ---------- buttons ---------- */
.dl .btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border-radius:2px;
  font:600 16px/1 var(--tos-font-body);letter-spacing:-.005em;text-decoration:none;white-space:nowrap}
.dl .btn-p{background:var(--lp-accent);color:var(--lp-on-accent)}
.dl .btn-p:hover{background:var(--dl-accent-hover)}
.dl .btn-s{border:1px solid var(--lp-ink);color:var(--lp-ink)}
.dl .btn-s:hover{background:var(--lp-ink);color:var(--lp-paper)}
.dl .btn-sm{min-height:44px;padding:0 16px;font-size:15px}
/* ---------- type ---------- */
.dl .eyebrow{font:600 13px/1.4 var(--tos-font-body);letter-spacing:.09em;text-transform:uppercase;color:var(--dl-ink-2);display:flex;align-items:center;gap:10px}
.dl .eyebrow::before{content:"";width:8px;height:8px;background:var(--lp-accent);flex:none}
.dl h1{font:600 clamp(36px,10.2vw,48px)/1.0 var(--tos-font-body);letter-spacing:-.04em;color:var(--lp-ink);margin-top:12px;text-wrap:balance}
.dl h2{font:600 clamp(30px,7.4vw,46px)/1.06 var(--tos-font-body);letter-spacing:-.032em;color:var(--lp-ink);text-wrap:balance}
.dl h3{font:600 22px/1.2 var(--tos-font-body);letter-spacing:-.02em;color:var(--lp-ink)}
.dl .lede{font-size:18px;line-height:1.55;color:var(--dl-ink-2);margin-top:28px;max-width:36em}
.dl .body{margin-top:18px;max-width:34em}
.dl .note{font-size:15px;color:var(--lp-muted);margin-top:14px}
.dl .chn{display:flex;align-items:baseline;gap:12px;font:600 13px/1.4 var(--tos-font-body);letter-spacing:.09em;text-transform:uppercase;color:var(--dl-ink-2);margin-bottom:18px}
.dl .chn .rec{font-size:13px;color:var(--lp-accent-text);letter-spacing:0;font-weight:600}
.dl .list-tag{color:var(--lp-muted);margin-top:28px}
.dl .more{margin-top:24px}
.dl .more a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--lp-ink);text-decoration:none;border-bottom:1px solid var(--lp-ink)}
.dl .more a::after{content:"";width:7px;height:7px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);margin-inline-start:10px;margin-inline-end:2px}
/* turned 45 degrees, the arrow's corner reaches about 1.9px past its own 9px box: the 2px after it keeps that inside the link */
/* ---------- hero ---------- */
.dl .ch.hero{padding-top:20px;padding-bottom:48px}
.dl .cta{display:grid;gap:10px;margin-top:28px}
@media (min-width:480px){
  .dl .cta{display:flex;flex-wrap:wrap;gap:12px}
}
.dl .hero-m{margin-top:18px}
.dl .dialwrap{position:relative}
.dl .dw-hh{max-width:460px;margin:0 auto}
.dl .hh-ro{position:absolute;left:50%;bottom:calc(7.4% + 4px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;text-align:center;white-space:nowrap}
.dl .hh-t{font:600 40px/1 var(--tos-font-body);letter-spacing:-.045em;color:var(--lp-ink);font-variant-numeric:tabular-nums}
.dl .hh-k{color:var(--lp-muted);margin-top:4px}
.dl .dw-hh .hh-k{order:2}
/* the ask readout: one exchange at a time */
.dl .ask{position:relative}
.dl .ask--m{max-width:460px;margin:12px auto 0}
.dl .ask-list{display:grid}
.dl .ex + .ex{display:none}
.dl .ex-w{color:var(--dl-ink-2);font-size:14px}
.dl .ex-w .rec{color:var(--lp-ink);font-weight:600;margin-inline-end:4px}
.dl .ex-q{font:600 21px/1.25 var(--tos-font-body);letter-spacing:-.02em;color:var(--lp-ink);margin-top:4px;position:relative}
.dl .ex-slot{display:grid;margin-top:10px}
.dl .ex-r{display:none;color:var(--dl-ink-2)}
.dl .ex-a{font-size:16px;line-height:1.45;color:var(--lp-ink)}
.dl .ex-s{color:var(--lp-muted);margin-top:4px}
.dl .ex-act{margin-top:12px;display:grid;gap:6px;justify-items:start}
.dl .ex-at{font-size:14px;line-height:1.4;color:var(--dl-ink-2);position:relative;padding-bottom:3px}
.dl .ex-at::after{content:"";position:absolute;inset-inline:0;bottom:0;height:1px;background:var(--lp-ink);transform:scaleX(0);transform-origin:0 50%;transition:transform .4s var(--dl-ease)}
.dl .ex-st{display:flex;align-items:center;min-height:28px}
.dl .ex-st .w,.dl .ex-st .k{display:none;align-items:center;gap:8px;font-size:14px;color:var(--lp-ink)}
.dl .ex-st .w{font:500 12px/1.5 var(--tos-font-mono)}
.dl .ex-st .w::before{content:"";width:8px;height:8px;background:var(--lp-accent)}
.dl .ex-st .k{display:inline-flex;font-weight:600}
.dl .av{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;background:var(--lp-ink);color:var(--lp-paper);font:600 12px/1 var(--tos-font-body);letter-spacing:.02em;flex:none}
.dl .qa-act .ok{font:500 12px/1.5 var(--tos-font-mono);color:var(--lp-ink);display:inline-flex;align-items:center;gap:6px}
.dl .qa-act .ok::before{content:"";width:7px;height:7px;background:var(--lp-ink)}
/* JS present: every exchange shares one slot, its height held by the tallest */
.dl.js .ask-list > .ex{display:block;grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .38s ease,visibility 0s linear .38s}
.dl.js .ask--m .ask-list > .ex.on,.dl.js .stage[data-mode="ask"] .ask-list > .ex.on{opacity:1;visibility:visible;transition:opacity .38s ease}
.dl.js .ask--m .ask-list > .ex.on.out,.dl.js .stage[data-mode="ask"] .ask-list > .ex.on.out{opacity:0}
/* a tab chosen by hand: the outgoing exchange goes at once (an automatic advance has already faded it) */
.dl.js .ask-list > .ex.cut{transition:none}
.dl.js .ex-slot > *{grid-area:1/1}
.dl.js .ex-r{display:flex;align-items:center;gap:8px;opacity:0}
.dl.js .ex-ans{opacity:0;transform:translateY(4px);transition:opacity .4s ease,transform .4s ease}
.dl.js .ex-s{opacity:0;transition:opacity .4s ease}
.dl.js .ex-act{opacity:0;transition:opacity .4s ease}
.dl.js .ex-st .k{display:none}
.dl.js .ex-st .w{display:inline-flex}
.dl.js .ex.reading .ex-r{opacity:1}
.dl.js .ex.answered .ex-ans{opacity:1;transform:none}
.dl.js .ex.sourced .ex-s{opacity:1}
.dl.js .ex.acting .ex-act{opacity:1}
.dl.js .ex.done .ex-st .w{display:none}
.dl.js .ex.done .ex-st .k{display:inline-flex;animation:dl-approve .45s var(--dl-ease) both}
.dl.js .ex.done .ex-at::after{transform:none}
.dl:not(.js) .ex-at::after{transform:none}
@keyframes dl-approve{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.dl .ex-r::before{content:"";width:8px;height:8px;background:var(--lp-accent);flex:none}
.dl .ask-ghost{visibility:hidden}
.dl .ask-line{position:absolute;inset-inline:0;top:0}
.dl .ask-cur{color:var(--lp-accent);font-weight:600;margin-inline-start:1px}
.dl .ex:not(.typing) .ask-cur{opacity:0}
/* controls */
.dl .ask-ctl{display:flex;align-items:stretch;gap:8px;margin-top:14px}
.dl .ask-ctl[hidden]{display:none}
.dl .ask-tabs{display:flex;flex:1;border-bottom:1px solid var(--dl-rule)}
.dl .ask-tabs button,.dl .ask-pause{min-height:44px;padding:0 10px;font:500 14px/1 var(--tos-font-body);color:var(--lp-muted)}
.dl .ask-tabs button{flex:1;border-bottom:2px solid transparent;margin-bottom:-1px}
.dl .ask-tabs button.on{color:var(--lp-ink);font-weight:600;border-bottom-color:var(--lp-ink)}
.dl .ask-pause{border:1px solid var(--dl-rule-2);border-radius:2px;color:var(--lp-ink);min-width:72px}
.dl .ask-pause[aria-pressed="true"]{background:var(--lp-ink);color:var(--lp-paper);border-color:var(--lp-ink)}
/* ---------- the dial (SVG): geometry only, every word on it is a real-pixel label ---------- */
.dl .dial{display:block;width:100%;height:auto;overflow:visible}
.dl .dial text{font-family:var(--tos-font-mono)}
.dl .d-bezel{fill:none;stroke:var(--dl-rule-2);stroke-width:1px;vector-effect:non-scaling-stroke}
.dl .d-base{stroke:var(--lp-ink);stroke-width:1px;vector-effect:non-scaling-stroke}
.dl .d-ticks line{stroke:var(--dl-rule-2);stroke-width:1px;vector-effect:non-scaling-stroke}
.dl .d-ticks line.h{stroke:var(--dl-ink-2);stroke-width:1.5px}
.dl .d-num text{fill:var(--lp-muted);text-anchor:middle;dominant-baseline:central;font-size:max(27px,calc(12px / var(--dl-k,1)))}
.dl .dial--half .d-num text,.dl .dial--hhero .d-num text{font-size:max(40px,calc(12px / var(--dl-k,1)))}
.dl .d-ticks,.dl .d-num,.dl .d-events,.dl .d-needle,.dl .d-hand,.dl .d-wedge,.dl .d-index,.dl .d-hub,.dl .d-chords,.dl .d-lines,.dl .d-eng,.dl .d-exp,.dl .d-seal{transition:opacity .5s ease}
.dl .d-months,.dl .d-hand,.dl .d-wedge,.dl .d-index,.dl .d-eng,.dl .d-exp,.dl .d-hub{opacity:0}
.dl .recall .d-hours{opacity:0}
.dl .dots-off circle{fill:var(--lp-dot-off);transition:opacity .3s ease}
.dl .dots-off circle.hid{opacity:0}
.dl .dots-ink circle,.dl .dots-on circle{opacity:0;transform-box:fill-box;transform-origin:center;transition:opacity .3s ease,transform .3s ease}
.dl .dots-ink circle{fill:var(--lp-ink);transform:scale(.7)}
.dl .dots-on circle{fill:var(--lp-accent);transform:scale(.8)}
.dl .dots-ink circle.on,.dl .dots-on circle.on{opacity:1;transform:scale(1)}
.dl .d-disc{fill:var(--lp-paper);stroke:var(--dl-rule-2);stroke-width:1px;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center;transition:transform .8s var(--dl-ease),opacity .5s ease,stroke .4s}
.dl .d-seal{fill:none;stroke:var(--lp-ink);stroke-width:1px;vector-effect:non-scaling-stroke;opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(1.06);transition:opacity .5s ease,transform .6s var(--dl-ease)}
.dl .sealed .d-seal{opacity:1;transform:none}
.dl .sealed .d-disc{stroke:var(--lp-ink)}
.dl .d-needle,.dl .d-hand,.dl .d-index,.dl .d-eng{transform-origin:500px 500px}
.dl .d-needle line{stroke:var(--lp-accent);stroke-width:4}
.dl .d-needle rect{fill:var(--lp-accent)}
.dl .glide{transition:transform 1.1s var(--dl-ease),opacity .5s ease}
.dl .d-events line{stroke:var(--lp-ink);stroke-width:4;opacity:0;transition:opacity .3s ease}
.dl .d-events line.in{opacity:1}
.dl .d-events line.hot{stroke:var(--lp-accent);stroke-width:7}
.dl .d-lines line{stroke:var(--lp-accent);stroke-width:4;opacity:0;transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0);transition:opacity .25s ease,transform .35s var(--dl-ease)}
.dl .d-lines line.on{opacity:1;transform:none}
.dl .d-lines line.ink{stroke:var(--lp-ink)}
.dl .d-chords path{fill:none;stroke:var(--lp-ink);stroke-width:2px;vector-effect:non-scaling-stroke;opacity:0;transition:opacity .5s ease,stroke .3s}
.dl .d-chords path.on{opacity:1}
.dl .d-chords path.hot{stroke:var(--lp-accent);stroke-width:2.5px}
.dl .d-chords path.far{stroke:var(--lp-muted);stroke-width:1px}
.dl .d-hand line{stroke-width:10}
.dl .d-hand-true line{stroke:var(--lp-ink)}
.dl .d-hand-learn line{stroke:var(--lp-accent)}
.dl .d-wedge{fill:var(--dl-wedge);stroke:var(--lp-accent);stroke-width:1px;vector-effect:non-scaling-stroke}
.dl .d-index rect{fill:var(--lp-ink)}
.dl .d-hub{fill:var(--lp-ink)}
.dl .d-eng-a line{stroke:var(--lp-accent);stroke-width:6}
.dl .d-eng-a rect{fill:var(--lp-accent)}
.dl .d-eng-b line{stroke:var(--lp-ink);stroke-width:5}
.dl .d-eng-b circle{fill:var(--lp-paper);stroke:var(--lp-ink);stroke-width:5}
.dl .d-exp .doc{fill:var(--lp-paper);fill-rule:evenodd;stroke:var(--lp-ink);stroke-width:1.5px;vector-effect:non-scaling-stroke;opacity:0;transition:opacity .4s ease}
.dl .d-exp .x{fill:var(--lp-ink);opacity:0;transition:transform .9s var(--dl-ease),opacity .3s ease}
.dl .e-x .d-exp,.dl .e-x .d-exp .doc{opacity:1}
.dl .e-x .d-exp .x{opacity:1}
.dl .e-a .d-eng-a,.dl .e-b .d-eng-b{opacity:1}
/* the labels on the rim */
.dl .d-tags{position:absolute;inset:0;pointer-events:none}
.dl .tg{position:absolute;white-space:nowrap;opacity:0;transition:opacity .35s ease,color .3s;transform:translate(calc(var(--tx,-50%) + var(--dx,0px)),calc(var(--ty,-50%) + var(--dy,0px)));
  font:600 15px/1.15 var(--tos-font-body);letter-spacing:-.01em;color:var(--lp-muted)}
.dl .tg.ax-l{--tx:-100%;text-align:right}
.dl .tg.ax-r{--tx:0%;text-align:left}
.dl .tg.ax-c{--tx:-50%;text-align:center}
.dl .tg.ay-t{--ty:-100%}
.dl .tg.ay-b{--ty:0%}
.dl .tg.ay-m{--ty:-50%}
.dl .tg.on{opacity:1}
.dl .tg.tg-2{white-space:pre-line}
.dl .tg.dim{opacity:1;color:var(--dl-dim)}
.dl .tg-e.on,.dl .tg-a.on{color:var(--dl-ink-2)}
.dl .tg.hot{color:var(--lp-ink);text-decoration:underline;text-decoration-color:var(--lp-accent);text-decoration-thickness:2px;text-underline-offset:4px}
.dl .tg-s{font:500 12px/1.3 var(--tos-font-mono);letter-spacing:0;color:var(--lp-ink);background:var(--lp-paper);padding:1px 3px}
.dl .tg-m{font:500 12px/1.3 var(--tos-font-mono);color:var(--lp-muted)}
.dl .tg.tg-s{--tx:-50%;--ty:-50%;text-align:center}
.dl .tg-e,.dl .tg-a,.dl .tg-s,.dl .tg-m{display:none}
.dl [data-mode="graph"] .tg-e,.dl [data-mode="approve"] .tg-e,.dl [data-mode="eng"] .tg-e,.dl [data-mode="askers"] .tg-a,.dl [data-mode="ask"] .tg-s,.dl [data-mode="askers"] .tg-s,.dl .dw-hh .tg-s,.dl [data-mode="dates"] .tg-m{display:block}
/* modes: which parts of the instrument show */
.dl [data-mode="graph"] .d-hours,.dl [data-mode="askers"] .d-hours,.dl [data-mode="approve"] .d-hours,.dl [data-mode="dates"] .d-hours,.dl [data-mode="eng"] .d-hours{opacity:0}
.dl [data-mode="dates"] .d-months{opacity:1}
.dl [data-mode="graph"] .d-ticks,.dl [data-mode="eng"] .d-ticks{opacity:0}
.dl .d-bezel{transition:opacity .5s ease}
.dl [data-mode="graph"] .d-bezel,.dl [data-mode="askers"] .d-bezel,.dl [data-mode="approve"] .d-bezel,.dl [data-mode="eng"] .d-bezel{opacity:0}
.dl [data-mode="askers"] .d-ticks,.dl [data-mode="approve"] .d-ticks,.dl [data-mode="dates"] .d-ticks{opacity:.4}
.dl [data-mode="graph"] .d-events,.dl [data-mode="askers"] .d-events,.dl [data-mode="approve"] .d-events,.dl [data-mode="dates"] .d-events,.dl [data-mode="eng"] .d-events{opacity:0}
.dl [data-mode="graph"] .d-needle,.dl [data-mode="askers"] .d-needle,.dl [data-mode="approve"] .d-needle,.dl [data-mode="dates"] .d-needle,.dl [data-mode="eng"] .d-needle{opacity:0}
.dl [data-mode="graph"] .d-disc{transform:scale(.42)}
.dl [data-mode="dates"] .d-disc,.dl [data-mode="eng"] .d-disc{opacity:0}
.dl [data-mode="dates"] .d-hand,.dl [data-mode="dates"] .d-index,.dl [data-mode="dates"] .d-hub,.dl [data-mode="eng"] .d-hub{opacity:1}
.dl [data-mode="dates"] .d-wedge.on{opacity:1}
.dl .e-x .d-hub{opacity:0}
.dl [data-mode="dates"] .dial{cursor:grab;touch-action:pan-y}
/* ---------- the stage (desktop only) ---------- */
.dl .stage{display:none}
/* ---------- chapters ---------- */
.dl .ch{padding:72px 0 40px}
.dl .ch + .ch{border-top:1px solid var(--dl-rule)}
/* a chapter's own instrument on smaller screens: pinned while its chapter scrolls, released at its end */
.dl .inst{display:none}
.dl.js .inst{display:block;position:sticky;top:0;z-index:30;background:var(--lp-paper);margin:28px calc(-1 * var(--dl-g)) 0;padding:12px var(--dl-g) 12px;border-bottom:1px solid var(--dl-rule);border-top:1px solid var(--dl-rule)}
.dl .inst--half .dialwrap{max-width:400px;margin:0 auto}
.dl .inst--half .hh-t{font-size:34px}
.dl .inst--half .hh-k{margin:0 0 2px;order:-1}
.dl .inst--half[data-mode="dates"] .hh-ro{position:static;transform:none;flex-direction:row;align-items:baseline;justify-content:center;gap:10px;margin-top:8px}
.dl .inst--half[data-mode="dates"] .hh-t{font-size:26px}
.dl .inst--ring .dialwrap{width:clamp(176px,calc(100% - 172px),236px);margin:30px auto 30px}
.dl .ir-ro{display:flex;flex-direction:column;align-items:center;text-align:center;min-height:42px}
.dl .ir-x{font:600 16px/1.3 var(--tos-font-body);letter-spacing:-.015em;color:var(--lp-ink)}
.dl .ir-s{color:var(--lp-muted)}
.dl .inst .tg{font-size:12.5px}
.dl .inst .tg-e{white-space:pre-line}
.dl .dial--ring .d-chords path{stroke-width:1.5px}
.dl .ledger{margin-top:10px;border-top:1px solid var(--dl-rule)}
.dl .ledger li{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:12px;padding:14px 0;border-bottom:1px solid var(--dl-rule);color:var(--lp-muted);transition:color .3s}
.dl .lg-t{grid-row:1/3;color:inherit;padding-top:2px}
.dl .lg-k{color:inherit;text-transform:uppercase;letter-spacing:.06em}
.dl .lg-x{grid-column:2;font-size:16px;line-height:1.45;color:var(--dl-ink-2)}
.dl .lg-s{grid-column:2;color:var(--lp-muted)}
.dl .ledger li.past .lg-x{color:var(--lp-ink)}
.dl .ledger li.cur{color:var(--lp-ink)}
.dl .ledger li.cur .lg-x{color:var(--lp-ink);font-weight:600}
.dl .ledger li.cur .lg-t{display:flex;align-items:flex-start;gap:6px}
.dl .ledger li.cur .lg-t::after{content:"";width:6px;height:6px;background:var(--lp-accent);margin-top:6px;flex:none}
.dl .steps{margin-top:24px;border-top:1px solid var(--dl-rule)}
.dl .steps li{padding:20px 0 28px;border-bottom:1px solid var(--dl-rule);color:var(--lp-muted);transition:color .3s}
.dl .steps li p:first-child{font-size:17px;line-height:1.5}
.dl .steps li .rec{color:var(--lp-muted);margin-top:6px}
.dl .steps li strong{font-weight:600}
.dl .steps li.cur{color:var(--lp-ink)}
.dl .steps--rec li .rec:first-child{margin:0 0 4px;color:var(--dl-ink-2)}
.dl .steps--rec li.cur .rec:first-child{color:var(--lp-ink);font-weight:600}
.dl .steps--rec li p + p{font-size:17px;line-height:1.5}
.dl:not(.js) .steps li{color:var(--dl-ink-2)}
.dl .who-tabs{display:grid;grid-template-columns:repeat(3,1fr);margin-top:20px;border-top:1px solid var(--dl-rule);border-inline-start:1px solid var(--dl-rule)}
.dl .who-tabs[hidden]{display:none}
.dl .who-tabs button{min-height:48px;border-inline-end:1px solid var(--dl-rule);border-bottom:1px solid var(--dl-rule);font-size:15px;font-weight:500;color:var(--lp-muted);padding:0 8px}
.dl .who-tabs button[aria-selected="true"]{background:var(--lp-ink);color:var(--lp-paper);font-weight:600}
/* a column too narrow for the six seats on one line (landing-dial.js measures, in any language): first a
   little tighter, and if that is not enough, the phone's own two rows of three */
.dl .who-tabs.tight button{padding:0 10px}
.dl .who-tabs.rows{grid-template-columns:repeat(3,minmax(0,1fr))}
.dl .who-panels{margin-top:20px}
.dl .qa{padding:4px 0 8px}
.dl .qa + .qa{margin-top:24px;padding-top:24px;border-top:1px solid var(--dl-rule)}
.dl.js .qa{display:none}
.dl.js .qa.on{display:block;margin:0;padding-top:4px;border:0}
.dl:not(.js) .qa + .qa{display:none}
.dl .qa-w{font-size:14px;color:var(--dl-ink-2)}
.dl .qa-w .rec{color:var(--lp-ink);font-weight:600;margin-inline-end:4px}
.dl .qa-q{font:600 21px/1.25 var(--tos-font-body);letter-spacing:-.02em;color:var(--lp-ink);margin-top:6px}
.dl .qa-a{font-size:16px;color:var(--lp-ink);margin-top:10px;line-height:1.5}
.dl .qa-s{color:var(--lp-muted);margin-top:4px}
.dl .qa-act{font-size:14px;color:var(--dl-ink-2);margin-top:10px;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.dl .rcard{margin-top:28px;border:1px solid var(--dl-rule-2);background:var(--lp-paper);padding:20px}
.dl .rc-k{color:var(--lp-muted)}
.dl .rc-t{font:600 19px/1.3 var(--tos-font-body);color:var(--lp-ink);letter-spacing:-.015em;margin-top:4px}
.dl .rc-l{margin-top:12px;border-top:1px solid var(--dl-rule)}
.dl .rc-l div{display:grid;grid-template-columns:84px 1fr;gap:10px;padding:8px 0;border-bottom:1px solid var(--dl-rule);font-size:15px;color:var(--lp-ink)}
.dl .rc-l dt{color:var(--lp-muted);padding-top:2px}
.dl .rc-ok{display:inline-flex;align-items:center;gap:8px}
.dl .rc-ok .av{width:22px;height:22px;font-size:12px}
.dl .rc-wait{display:none;color:var(--lp-muted)}
.dl .rcard[data-s="0"] .rc-wait{display:inline}
.dl .rcard[data-s="0"] .rc-ok{display:none}
.dl .rc-seal{display:flex;align-items:center;gap:8px;margin-top:12px;color:var(--lp-ink);opacity:0;transition:opacity .4s}
.dl .rc-seal::before{content:"";width:10px;height:10px;border:2px solid var(--lp-ink)}
.dl .rcard[data-s="2"] .rc-seal{opacity:1}
.dl .scrub{margin-top:24px}
.dl .scrub[hidden]{display:none}
.dl .scrub-l{display:flex;align-items:baseline;gap:10px;font-weight:600;color:var(--lp-ink);font-size:16px}
.dl .scrub-o{font:600 26px/1 var(--tos-font-body);letter-spacing:-.03em;color:var(--lp-ink);font-variant-numeric:tabular-nums}
.dl .scrub input{display:block;width:100%;height:44px;margin:8px 0 0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.dl .scrub input::-webkit-slider-runnable-track{height:2px;background:var(--dl-ink-2)}
.dl .scrub input::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-10px;background:var(--lp-accent);border:3px solid var(--lp-paper);outline:1px solid var(--lp-accent);border-radius:0}
.dl .scrub input::-moz-range-track{height:2px;background:var(--dl-ink-2)}
.dl .scrub input::-moz-range-thumb{width:18px;height:18px;background:var(--lp-accent);border:3px solid var(--lp-paper);border-radius:0}
.dl .scrub-ax{position:relative;height:18px;color:var(--lp-muted);margin:0 11px}
.dl .scrub-ax span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.dl .scrub-ax span:nth-child(1){inset-inline-start:0;transform:none;margin-inline-start:-11px}
.dl .scrub-ax span:nth-child(2){inset-inline-start:45.6%}
.dl .scrub-ax span:nth-child(3){inset-inline-start:89.7%}
.dl .scrub-q{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.dl .scrub-q button{min-height:44px;padding:0 14px;border:1px solid var(--dl-rule-2);border-radius:2px;font-size:14px;font-weight:500;color:var(--lp-ink)}
.dl .scrub-q button.on{border-color:var(--lp-ink);background:var(--lp-ink);color:var(--lp-paper)}
.dl .scrub-h{color:var(--lp-muted);margin-top:10px}
.dl .facts{margin-top:24px;border-top:1px solid var(--dl-rule)}
.dl .f-b{display:grid;width:100%;text-align:start;padding:14px 12px;border-bottom:1px solid var(--dl-rule);gap:6px;min-height:44px;transition:background .25s}
.dl .f-b[aria-pressed="true"]{background:var(--lp-paper-2)}
.dl .f-n{font-weight:600;color:var(--lp-ink);font-size:16px}
.dl .f-v{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dl .f-c{display:flex;flex-direction:column;font-size:15px;color:var(--lp-ink)}
.dl .f-c .rec{display:flex;align-items:center;gap:6px;color:var(--lp-muted)}
.dl .f-tl::before,.dl .f-kl::before{content:"";width:12px;height:3px;background:var(--lp-ink)}
.dl .f-kl::before{background:var(--lp-accent)}
.dl .f-c b{font-weight:500}
.dl .f-d{color:var(--lp-muted)}
.dl .f-g{display:none;align-items:center;gap:8px;color:var(--lp-ink)}
.dl .f-g::before{content:"";width:8px;height:8px;background:var(--lp-accent)}
.dl .facts li.gap .f-g{display:flex}
.dl .facts li.gap .f-kv{color:var(--lp-muted)}
.dl:not(.js) .f-b{cursor:default}
/* ---------- proof: one band ---------- */
.dl .proof{background:var(--lp-paper-2);border-top:1px solid var(--lp-ink);border-bottom:1px solid var(--dl-rule)}
.dl .proof-in{display:grid;grid-template-columns:minmax(0,1fr);gap:44px;padding-top:64px;padding-bottom:64px}
.dl .quote blockquote p{font:600 clamp(28px,7vw,64px)/1.06 var(--tos-font-body);letter-spacing:-.035em;color:var(--lp-ink);text-indent:-.42em;text-wrap:balance}
.dl .quote blockquote p::before{content:"\201C"}
.dl .quote blockquote p::after{content:"\201D"}
.dl .quote figcaption{margin-top:16px;color:var(--lp-muted);font-size:13px;display:flex;align-items:center;gap:10px}
.dl .quote figcaption::before{content:"";width:24px;height:1px;background:var(--lp-ink)}
.dl .proof-l{display:grid;border-top:1px solid var(--dl-rule-2)}
.dl .proof-l div{display:flex;flex-direction:column-reverse;gap:4px;padding:18px 0;border-bottom:1px solid var(--dl-rule-2)}
.dl .proof-l dd{font:600 clamp(48px,14vw,96px)/.95 var(--tos-font-body);letter-spacing:-.05em;color:var(--lp-ink);font-variant-numeric:tabular-nums}
.dl .proof-l dt{font:400 13px/1.4 var(--tos-font-mono);color:var(--lp-muted)}
/* the first cell is a phrase, not a figure (the customer count is private, 9 Oct 2026): text size,
   two lines at most beside the figures, and a long German compound breaks at its soft hyphen */
.dl .proof-l .is-word dd{font-size:clamp(30px,8.4vw,44px);line-height:1.04;letter-spacing:-.03em;font-variant-numeric:normal;hyphens:manual;overflow-wrap:break-word;text-wrap:balance}
/* ---------- who it is for ---------- */
.dl .who{display:grid;gap:48px;padding-top:72px;padding-bottom:80px}
.dl .who-t h2{font-size:clamp(28px,6.4vw,46px)}
.dl .who-t p{margin-top:14px;max-width:34em}
.dl .sectors{color:var(--lp-ink);font-weight:500}
.dl .sectors span{color:var(--dl-rule-2)}
.dl .who-s{color:var(--lp-ink);font-weight:600}
/* the way on for a smaller team (10 Oct 2026): under the hero's audience line and in chapter 08. The link is
   ink with the accent underline; its padding reaches 44px for a thumb without moving the line. */
.dl .note-sb{display:block;margin-top:2px}
.dl .note-sb a,.dl .who-sb a{display:inline-block;padding-block:11px;margin-block:-11px;color:var(--lp-ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--lp-accent);text-decoration-thickness:2px;text-underline-offset:4px}
.dl .note-sb a:hover,.dl .who-sb a:hover{text-decoration-color:var(--lp-ink)}
.dl .who-sb{color:var(--lp-ink-2)}
.dl .score{border:1px solid var(--dl-rule-2);padding:24px 20px 24px;background:var(--lp-paper)}
.dl .score-g{position:relative;max-width:280px;margin:0 auto 18px}
.dl .gauge{display:block;width:100%;height:auto}
.dl .gauge .g-arc{fill:none;stroke:var(--dl-rule-2);stroke-width:1px;vector-effect:non-scaling-stroke}
.dl .gauge .g-base{stroke:var(--lp-ink);stroke-width:1px;vector-effect:non-scaling-stroke}
.dl .gauge line.m{stroke:var(--dl-rule-2);stroke-width:1px;vector-effect:non-scaling-stroke}
.dl .gauge line.h{stroke:var(--dl-ink-2);stroke-width:1.5px;vector-effect:non-scaling-stroke}
.dl .gauge text{font-family:var(--tos-font-mono);font-size:max(48px,calc(12px / var(--dl-k,1)));fill:var(--lp-muted);text-anchor:middle;dominant-baseline:central}
.dl .gauge circle{fill:var(--lp-dot-off)}
.dl .gauge .g-hub{fill:var(--lp-accent)}
.dl .score-q{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);color:var(--lp-muted);white-space:nowrap;background:var(--lp-paper);padding:0 6px}
.dl .score-k{color:var(--lp-muted)}
.dl .score h3{margin-top:6px}
.dl .score p:not(.rec){margin-top:10px;max-width:32em}
.dl .score .btn{margin-top:20px}
/* ---------- research ---------- */
.dl .research{padding-top:72px;padding-bottom:88px;border-top:1px solid var(--dl-rule);display:grid;gap:32px}
.dl .res-h p:not(.chn){margin-top:14px;max-width:32em}
.dl .papers{border-top:1px solid var(--lp-ink)}
.dl .papers a{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:12px;padding:14px 0;min-height:56px;border-bottom:1px solid var(--dl-rule);text-decoration:none;color:var(--lp-ink)}
.dl .papers a:hover .p-t{text-decoration:underline;text-underline-offset:4px}
.dl .p-n{grid-row:1/3;color:var(--lp-muted);padding-top:3px}
.dl .p-t{font-weight:600;font-size:17px}
.dl .p-d{color:var(--lp-muted);overflow-wrap:anywhere}
/* ---------- the close (the one dark band) ---------- */
.dl .close{background:var(--dl-dark);color:var(--dl-dmut)}
.dl .close-in{display:grid;gap:36px;padding-top:72px;padding-bottom:80px}
.dl .close-dial{width:min(78vw,320px)}
.dl .close .dial{--lp-dot-off:var(--dl-dline)}
.dl .close .d-bezel{stroke:var(--dl-dline);opacity:1;transition:opacity .8s ease .9s}
.dl .close .d-ticks{opacity:1}
.dl .close .d-ticks line{stroke:var(--dl-dline);transition:opacity .8s ease .9s}
.dl .close .d-ticks line.h{stroke:var(--dl-dtick)}
.dl .close .dots-off circle{fill:var(--dl-dline);transform-box:fill-box;transform-origin:center;transition:transform .8s var(--dl-ease) 1.1s}
.dl .close .dots-on circle{opacity:0;transform:scale(.82)}
.dl .close .dots-on circle:nth-child(n+4){display:none}
.dl .close .dots-on circle:nth-child(1){transition-delay:.25s}
.dl .close .dots-on circle:nth-child(2){transition-delay:.55s}
.dl .close .dots-on circle:nth-child(3){transition-delay:.85s}
.dl .close .d-needle{opacity:1;transform-origin:500px 500px;transform:rotate(-60deg);transition:transform 1.2s var(--dl-ease),opacity .5s ease 1.1s}
.dl .close .d-needle line{stroke:var(--lp-accent);stroke-width:6}
.dl .d-brandhand{stroke:var(--lp-accent);stroke-width:70;stroke-linecap:round;opacity:0;transform-origin:500px 500px;transform:scale(.4);transition:opacity .6s ease 1.1s,transform .8s var(--dl-ease) 1.1s}
.dl .close .d-hub{opacity:1;fill:var(--lp-accent);transform-box:fill-box;transform-origin:center;transform:scale(.3);transition:transform .8s var(--dl-ease) 1.1s}
.dl .is-mark .d-ticks line,.dl .is-mark .d-bezel{opacity:0}
.dl .is-mark .d-needle{transform:rotate(60deg);opacity:0}
.dl .is-mark .dots-on circle{opacity:1;transform:scale(1.14)}
.dl .is-mark .dots-off circle{transform:scale(1.13)}
.dl .is-mark .d-brandhand{opacity:1;transform:none}
.dl .is-mark .d-hub{transform:none}
.dl .close .eyebrow{color:var(--dl-dink)}
.dl .close h2{color:var(--dl-dink);font-size:clamp(32px,7.4vw,56px)}
.dl .close-steps{margin-top:28px;border-top:1px solid var(--dl-drule)}
.dl .close-steps li{display:grid;grid-template-columns:28px 1fr;gap:8px;padding:12px 0;border-bottom:1px solid var(--dl-drule);color:var(--dl-dink)}
.dl .close-steps .rec{color:var(--dl-dmut);padding-top:3px}
.dl .close .btn-s--d{border-color:var(--dl-dink);color:var(--dl-dink)}
.dl .close .btn-s--d:hover{background:var(--dl-dink);color:var(--dl-dark)}
.dl .close .note{color:var(--dl-dmut)}
.dl .small{margin-top:28px;padding-top:18px;border-top:1px solid var(--dl-drule);font-size:16px;color:var(--dl-dink)}
.dl .small a{display:inline-flex;align-items:center;min-height:44px;color:var(--dl-dink);font-weight:600;text-decoration:underline;text-underline-offset:4px}
/* ---------- tablet ---------- */
@media (min-width:600px){
  .dl .ledger li{grid-template-columns:56px 92px minmax(0,1fr)}
  .dl .lg-t{grid-row:1/3}
  .dl .lg-k{grid-row:1/3;padding-top:2px}
  .dl .lg-x,.dl .lg-s{grid-column:3}
  .dl .who-tabs{grid-template-columns:repeat(6,auto);justify-content:start}
  .dl .who-tabs button{padding:0 18px}
  .dl .papers a{grid-template-columns:56px minmax(0,1fr) auto;align-items:baseline}
  .dl .p-n{grid-row:auto}
  .dl .p-d{text-align:end}
  .dl .close-dial{width:340px}
  .dl .proof-l{grid-template-columns:repeat(3,minmax(0,1fr));border-top:0}
  .dl .proof-l dd{font-size:clamp(48px,9.4vw,96px)}
  .dl .proof-l div{border-bottom:0;border-top:1px solid var(--lp-ink);padding:16px 0 0;padding-inline-end:20px}
  .dl .proof-l div + div{padding-inline-start:20px;border-inline-start:1px solid var(--dl-rule-2)}
  .dl .inst--ring .dialwrap{width:260px}
}
@media (min-width:900px) and (max-width:1179px){
  .dl .hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);column-gap:56px;align-items:start;padding-top:56px}
  .dl .hero > *{grid-column:1}
  .dl .hero .hero-m{grid-column:2;grid-row:1 / span 6;margin-top:0}
  .dl h1{font-size:54px}
  .dl .who{grid-template-columns:1fr 1fr;align-items:start}
}
/* ---------- desktop: one sticky instrument ---------- */
@media (min-width:1180px){
  body.lp{--dl-dial:min(640px,calc(100vh - var(--lp-nav-h) - 150px),44vw)}
  html:has(body.lp .dl){scroll-padding-top:96px}
  .dl h1{font-size:clamp(52px,4.6vw,72px);line-height:.98}
  .dl h2{font-size:clamp(34px,3.1vw,48px)}
  .dl .lede{font-size:19px;margin-top:32px;max-width:30em}
  .dl .body{font-size:18px}
  .dl .hero-m{display:none}
  .dl.js .inst{display:none}
  .dl .run{display:grid;grid-template-columns:minmax(0,1fr) var(--dl-dial);column-gap:clamp(56px,6vw,120px);align-items:start}
  .dl .run > .ch{grid-column:1}
  .dl .hero{grid-row:1;min-height:calc(100vh - var(--lp-nav-h));display:flex;flex-direction:column;justify-content:center;padding:40px 0 64px}
  .dl .stage{display:block;grid-column:2;grid-row:1 / span 7;position:sticky;top:calc(var(--lp-nav-h) + max(12px,(100vh - var(--lp-nav-h) - var(--dl-dial) - 112px) / 2));align-self:start;z-index:1}
  .dl .stage-tag{display:flex;align-items:center;gap:8px;color:var(--lp-muted);margin-bottom:12px}
  .dl .st-dot{width:7px;height:7px;background:var(--lp-accent)}
  .dl .dw-stage{container-type:inline-size}
  .dl .stage-foot{display:grid;margin-top:10px;min-height:56px}
  .dl .stage-foot > *{grid-area:1/1}
  .dl .stage .ask-ctl:not([hidden]){display:flex;width:min(440px,100%);margin:0 auto}
  .dl .stage:not([data-mode="ask"]) .ask-ctl{visibility:hidden}
  .dl .ro-under{display:flex;flex-direction:column;align-items:center;text-align:center;opacity:0;transition:opacity .4s ease;pointer-events:none}
  .dl .stage-foot .ask-ctl{position:relative;z-index:1}
  .dl .stage[data-mode="dates"] .ro-under,.dl .stage[data-mode="eng"] .ro-under{opacity:1}
  .dl .ru-x{font:600 21px/1.25 var(--tos-font-body);letter-spacing:-.02em;color:var(--lp-ink)}
  .dl .ru-s{color:var(--lp-muted);margin-top:2px}
  .dl .ch{padding:22vh 0 18vh;min-height:100vh}
  .dl .ch + .ch{border-top:0}
  .dl .ch-day{padding-top:16vh}
  .dl .ledger li{padding:20px 0}
  .dl .steps li{padding:20px 0 0;min-height:34vh;border:0;border-top:1px solid var(--dl-rule)}
  .dl .steps{border-top:0;margin-top:40px}
  .dl .steps li:last-child{min-height:24vh}
  .dl.js .desk-echoed{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .dl .ch-askers{min-height:110vh}
  .dl .ch-eng{padding-bottom:26vh}
  .dl .run{padding-bottom:40px}
  .dl .proof-in{grid-template-columns:repeat(12,1fr);gap:56px 0;padding-top:120px;padding-bottom:120px}
  .dl .quote{grid-column:1 / span 10}
  .dl .proof-l{grid-column:1 / -1}
  .dl .proof-l dd{font-size:clamp(88px,8vw,128px)}
  .dl .who{grid-template-columns:repeat(12,1fr);gap:0;padding-top:120px;padding-bottom:120px;align-items:start}
  .dl .who-t{grid-column:1 / span 6}
  .dl .score{grid-column:8 / span 5}
  .dl .research{grid-template-columns:repeat(12,1fr);padding-top:120px;padding-bottom:140px;gap:0}
  .dl .res-h{grid-column:1 / span 4}
  .dl .papers{grid-column:6 / span 7;align-self:start}
  .dl .close-in{grid-template-columns:repeat(12,1fr);gap:0;padding-top:140px;padding-bottom:140px;align-items:center}
  .dl .close-dial{grid-column:1 / span 5;width:100%;max-width:500px}
  .dl .close-t{grid-column:7 / span 6}
}
/* the readouts inside the stage dial, sized by the dial itself */
.dl .ro{position:absolute;left:50%;top:50%;width:47cqw;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;text-align:center;
  opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s linear .45s}
.dl .stage[data-mode="ask"] .ro-ask,.dl .stage[data-mode="day"] .ro-day,.dl .stage[data-mode="graph"] .ro-graph,.dl .stage[data-mode="askers"] .ro-askers,.dl .stage[data-mode="approve"] .ro-approve{opacity:1;visibility:visible;transition:opacity .45s ease .15s}
.dl:not(.js) .stage .ro-ask{opacity:1;visibility:visible}
.dl .ro-ask .ask{width:100%}
.dl .ro-ask .ex-w{font-size:clamp(12px,2.2cqw,14px)}
.dl .ro-ask .ex-q{font-size:clamp(17px,3.45cqw,22px);margin-top:.2em}
.dl .ro-ask .ex-slot{justify-items:center;margin-top:.35em}
.dl .ro-ask .ex-r{justify-content:center}
.dl .ro-ask .ex-a{font-size:clamp(14px,2.85cqw,18px);line-height:1.38}
.dl .ro-ask .ex-s{font-size:12px}
.dl .ro-ask .ex-act{justify-items:center;margin-top:.35em;gap:2px}
.dl .ro-ask .ex-at{font-size:clamp(12px,2.2cqw,14px);max-width:28ch}
.dl .ro-ask .ex-st{min-height:0}
.dl .ro-ask .ex-st .k{font-size:clamp(12px,2.2cqw,14px)}
.dl .ro-ask .av{width:22px;height:22px}
/* each exchange sits in the middle of the disc, not at the top of the tallest one */
.dl .ro-ask .ask-list > .ex{align-self:center}
/* a short screen draws a smaller dial (1180x720 and 1280x720 both give 504px): the type steps
   down a little so the longest exchange keeps clear of the disc, never on its edge */
@container (max-width:560px){
  .dl .ro-ask .ex-q{font-size:max(12px,3cqw)}
  .dl .ro-ask .ex-a{font-size:13px;line-height:1.34}
}
/* a short desktop screen (600 to 680px tall) gives the dial a little more of its height: the stage
   still fits (tag, dial and controls), and the dial stays at 420px or more down to 600px */
@media (min-width:1180px) and (max-height:680px){
  body.lp{--dl-dial:min(640px,calc(100vh - var(--lp-nav-h) - 114px),44vw)}
}
/* a dial of 500px or less: the readout at the 12px floor, tighter, and the long waiting state on
   two lines, so nothing in it touches the disc (checked from 420px to 640px) */
@container (max-width:500px){
  .dl .ro-ask .ex-q{font-size:12.5px}
  .dl .ro-ask .ex-a{font-size:12px;line-height:1.3}
  .dl .ro-ask .ex-slot{margin-top:.25em}
  .dl .ro-ask .ex-act{margin-top:.25em;gap:0}
  .dl .ro-ask .ex-at{font-size:12px}
  .dl .ro-ask .ex-st .w{max-width:36cqw}
}
/* 460px or less: the answer's source line leaves the eye (a screen reader still has it); the same
   sources are named on the rim beside their marks */
@container (max-width:460px){
  .dl .ro-ask .ex-s{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
}
.dl .ro-day .rd-t{font:600 clamp(40px,10cqw,64px)/1 var(--tos-font-body);letter-spacing:-.045em;color:var(--lp-ink);font-variant-numeric:tabular-nums}
.dl .ro-day .rd-k{color:var(--lp-muted);text-transform:uppercase;letter-spacing:.08em;margin-top:.9em}
.dl .ro-day .rd-x{font:600 clamp(15px,2.8cqw,18px)/1.3 var(--tos-font-body);color:var(--lp-ink);letter-spacing:-.015em;margin-top:.45em;max-width:40cqw}
.dl .ro-day .rd-s{color:var(--lp-muted);margin-top:.5em}
.dl .ro-graph{width:22cqw}
.dl .ro-graph .rg-n{font:600 clamp(15px,2.7cqw,18px)/1.15 var(--tos-font-body);letter-spacing:-.02em;color:var(--lp-ink)}
.dl .ro-graph .rg-k{color:var(--lp-muted);margin-top:.3em}
.dl .ro-askers .qa-w{font-size:clamp(12px,2.2cqw,14px)}
.dl .ro-askers .qa-q{font-size:clamp(16px,3.2cqw,21px);margin-top:.4em}
.dl .ro-askers .qa-a{font-size:clamp(14px,2.5cqw,16px)}
.dl .ro-askers .qa-act{justify-content:center;font-size:clamp(12px,2cqw,14px)}
.dl .ro-approve{width:44cqw}
.dl .ro-approve .rcard{margin:0;border:0;padding:0;background:none;width:100%}
.dl .ro-approve .rc-k{display:none}
.dl .ro-approve .rc-t{font-size:clamp(16px,2.9cqw,19px);margin:0 auto;max-width:80%}
.dl .ro-approve .rc-l{margin-top:.8em}
.dl .ro-approve .rc-l div{display:block;text-align:center;font-size:clamp(12px,2.1cqw,14px);padding:.45em 0;line-height:1.35}
.dl .ro-approve .rc-l dt{display:inline;margin-inline-end:.6em;padding:0}
.dl .ro-approve .rc-l dd{display:inline}
.dl .ro-approve .rc-ok{vertical-align:middle}
.dl .ro-approve .rc-seal{display:block;text-align:center;max-width:86%;margin-inline:auto}
/* the seal's square leads its first line, so a seal line that wraps stays centred under the record */
.dl .ro-approve .rc-seal::before{display:inline-block;vertical-align:-1px;margin-inline-end:8px}
/* a dial of 560px or less (1180x720 to 1366x768): the record is set tighter, never smaller, so its
   first and last lines keep clear of the disc's rim, not on it */
@container (max-width:560px){
  .dl .ro-approve .rc-t{line-height:1.2;max-width:70%}
  .dl .ro-approve .rc-l{margin-top:.5em}
  .dl .ro-approve .rc-l div{padding:.26em 0;line-height:1.3}
  .dl .ro-approve .rc-seal{margin-top:6px;line-height:1.35;max-width:76%}
}
/* ---------- reduced motion: states, never movement ---------- */
@media (prefers-reduced-motion:reduce){
  html:has(body.lp .dl){scroll-behavior:auto}
  .dl *,.dl *::before,.dl *::after,.lp-nav,.lp-nav *{transition-duration:0s!important;transition-delay:0s!important;animation:none!important}
}

/* ---- right to left: the dial is a clock and never mirrors; the words around it do ---- */
[dir="rtl"] .dl .ex-at::after { transform-origin: 100% 50%; }
[dir="rtl"] .dl .more a::after { transform: rotate(-135deg); }
[dir="rtl"] .dl .scrub-ax span { transform: translateX(50%); }
[dir="rtl"] .dl .scrub-ax span:nth-child(1) { transform: none; }
/* Arabic joins its letters: any tracking breaks the words */
[dir="rtl"] .dl * { letter-spacing: 0 !important; }

/* ---- Arabic type on this page ----
   Montserrat and JetBrains Mono carry no Arabic, and Landing.Master does not load rtl.css, so every
   Arabic word on /ar/beta fell to the system monospace: a full cell per letter, the words read spaced
   apart, and the year dial's month names ran into their marks. These are rtl.css's own faces and
   values (Plex for Arabic, proportional; font-display optional, so a slow load keeps the system
   Arabic face and nothing shifts), scoped to this page's body. The surfaces that are only digits or
   Latin keep the real mono: the wordmark, the dial's hours, the gauge, chapter numbers and times. */
@font-face{font-family:'PlexArabic';src:url('../fonts/plex-arabic-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:optional;
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'PlexArabic';src:url('../fonts/plex-arabic-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:optional;
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
html[lang="ar"] body.lp{--tos-font-body:'Montserrat','PlexArabic','Segoe UI',Tahoma,sans-serif;--tos-font-mono:'PlexArabic','Segoe UI',Tahoma,sans-serif}
html.lp-static-font[lang="ar"] body.lp{--tos-font-body:'Lp Montserrat Static','PlexArabic','Segoe UI',Tahoma,sans-serif}
html[lang="ar"] .lp-wm,html[lang="ar"] .dl .d-hours text,html[lang="ar"] .dl .gauge text,html[lang="ar"] .dl .chn .rec,
html[lang="ar"] .dl .lg-t,html[lang="ar"] .dl .p-n,html[lang="ar"] .dl .close-steps .rec{font-family:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace}
/* the year dial: an Arabic month is a whole word (Arabic does not abbreviate them), twice the width
   of "Jan", so it is set a step smaller (still 12px or more on screen) and the eight that sit on a
   diagonal step 8 units out along their own radius, clear of the month's mark */
html[lang="ar"] .dl .d-months text{font-size:max(20px,calc(12px / var(--dl-k,1)))}
html[lang="ar"] .dl .d-months text:nth-child(2){transform:translate(4.0px,-6.9px)}
html[lang="ar"] .dl .d-months text:nth-child(3){transform:translate(6.9px,-4.0px)}
html[lang="ar"] .dl .d-months text:nth-child(5){transform:translate(6.9px,4.0px)}
html[lang="ar"] .dl .d-months text:nth-child(6){transform:translate(4.0px,6.9px)}
html[lang="ar"] .dl .d-months text:nth-child(8){transform:translate(-4.0px,6.9px)}
html[lang="ar"] .dl .d-months text:nth-child(9){transform:translate(-6.9px,4.0px)}
html[lang="ar"] .dl .d-months text:nth-child(11){transform:translate(-6.9px,-4.0px)}
html[lang="ar"] .dl .d-months text:nth-child(12){transform:translate(-4.0px,-6.9px)}
/* the phone's year arc names its first and last month at the two ends of its base line, reaching
   outward; a whole Arabic month there outgrows the screen's gutter, so those two turn inward instead,
   under the line (the readout below sits between them) */
html[lang="ar"] .dl .inst[data-mode="dates"] .tg-m:first-child{--tx:0%}
html[lang="ar"] .dl .inst[data-mode="dates"] .tg-m:last-child{--tx:-100%}