/* ============================================================================
   LANDING: the chrome of Landing.Master (webmaster brief, 6 October 2026), the master
   of /beta while it is in review: the tokens on body.lp, the static-font switch, the
   phone-legibility colours, the nav and phone menu, the footer and the cookie card.
   Landing.Master sets data-theme="light" on <html>, so tos-site.css supplies the
   brand's own light palette, and every colour below is one of those tokens (canon
   guard rule 4: no hex outside tos-site.css).

   The page itself, "The Dial" (approved by the founder as mockup v5.0, 8 Oct 2026),
   is landing-dial.css, loaded after this file and scoped under .dl. The old page's
   section styles (the record, its ledger and live figures) left with it.

   MOBILE FIRST (founder, 6 Oct: "optimised for mobile 100%, as if built mobile first").
   The rules outside any media query ARE the phone; every wider screen adds to them with
   min-width. Every tap target is 44px or more, and no label is smaller than 12px.
   No pills, no soft shadows, no rounded cards, no glows: the touches that make a page
   read as generated.
   ============================================================================ */

/* Static Montserrat (Regular, SemiBold, Bold: the files the app already ships), used only when
   landing.js finds that this browser ignores the variable font's weights. iOS Lockdown Mode
   does: it rendered every weight as the variable file's default, a hairline Thin. */
@font-face { font-family: "Lp Montserrat Static"; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/montserrat-400.ttf') format('truetype'); }
@font-face { font-family: "Lp Montserrat Static"; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/montserrat-600.ttf') format('truetype'); }
@font-face { font-family: "Lp Montserrat Static"; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/montserrat-700.ttf') format('truetype'); }
/* A local face sized like Montserrat, so the swap from fallback to Montserrat does not reflow
   the hero (it measured a layout shift of 0.15 on a cold phone load). */
@font-face { font-family: "Lp Montserrat Fallback"; src: local("Arial"), local("Helvetica"); size-adjust: 118%; ascent-override: 82%; descent-override: 21.3%; line-gap-override: 0%; }

body.lp {
    --tos-font-body: 'Montserrat', 'Lp Montserrat Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --lp-paper: var(--tos-bg);
    --lp-paper-2: var(--tos-surface-sunken);
    --lp-ink: var(--tos-text);
    --lp-ink-2: var(--tos-text-secondary);
    --lp-muted: var(--tos-text-muted);
    --lp-rule: var(--tos-border);
    --lp-rule-2: var(--tos-border-strong);
    --lp-accent: var(--tos-accent-on-light);
    --lp-on-accent: var(--tos-text-inverse);
    --lp-dot-off: var(--tos-mark-future);
    --lp-margin-line: color-mix(in srgb, var(--tos-accent-on-light) 38%, transparent);
    --lp-nav-h: 60px;
    --lp-gutter: 210px;
    --lp-gap: 56px;
    --lp-pad: 20px;
    --lp-max: 1260px;
    margin: 0;
    background: var(--lp-paper);
    color: var(--lp-ink);
    font: 400 17px/1.62 var(--tos-font-body);
    -webkit-tap-highlight-color: transparent;
}
html.lp-static-font body.lp { --tos-font-body: 'Lp Montserrat Static', 'Lp Montserrat Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif; }
/* A jump to a section lands under the nav (landing-dial.css sets the page's own, a little more). */
html:has(body.lp) { scroll-padding-top: 60px; }
@media (min-width: 901px) { html:has(body.lp) { scroll-padding-top: calc(60px + 12px); } }

/* LEGIBILITY ON A PHONE (founder, 6 Oct: "on mobile it is too bright, I can barely read the
   text, feels like white on white. Unlike desktop").
   1. "light only": a phone in dark mode (Samsung Internet, Chrome's darken-websites setting,
      in-app web views) otherwise re-colours a light page by algorithm and can lighten the text
      without darkening the paper. The old site never met this because it declared itself dark.
   2. On a phone or any touch screen the running text and the small record labels are darker and
      the body a touch heavier, because a small screen is read at arm's length and often in
      daylight. A desktop with a mouse keeps the approved values (the revert at the 981px layer). */
html[data-theme="light"]:has(body.lp) { color-scheme: light only; }
@supports (color: color-mix(in srgb, red, blue)) {
    body.lp {
        --lp-ink-2: color-mix(in srgb, var(--tos-text) 84%, var(--tos-bg));
        --lp-muted: color-mix(in srgb, var(--tos-text) 68%, var(--tos-bg));
        --lp-accent-text: color-mix(in srgb, var(--tos-accent-on-light) 80%, var(--tos-text));
    }
}
body.lp { font-weight: 450; }
@media (min-width: 981px) and (pointer: fine) {
    body.lp { --lp-ink-2: var(--tos-text-secondary); --lp-muted: var(--tos-text-muted); --lp-accent-text: var(--lp-accent); font-weight: 400; }
}
@media (min-width: 600px) { body.lp { --lp-pad: 32px; } }
@media (min-width: 981px) { body.lp { --lp-nav-h: 66px; } }

/* tos-site.css sets every h1-h4 in mono, paragraphs with a bottom margin and links in
   the accent with an underline on hover. This page sets its own. */
.lp h1, .lp h2, .lp h3, .lp h4 { font-family: var(--tos-font-body); color: var(--lp-ink); margin: 0; }
/* (0,1,0): enough to beat tos-site.css's bare p { margin }, low enough that any
   single-class rule keeps its own spacing. */
.lp :where(p, figure, blockquote, dl, dd, ol, ul) { margin: 0; padding: 0; }
.lp a { color: inherit; text-decoration: none; }
.lp a:hover { text-decoration: none; }
.lp h1, .lp h2, .lp h3 { overflow-wrap: break-word; }
.lp :focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 3px; }
.lp ::selection { background: color-mix(in srgb, var(--lp-accent) 18%, transparent); }

.lp-wrap { max-width: var(--lp-max); margin: 0 auto; padding-inline: var(--lp-pad); }

.lp-skip { position: absolute; inset-inline-start: -9999px; top: 0; z-index: 100; padding: 10px 16px; background: var(--lp-paper); border: 1px solid var(--lp-ink); }
.lp-skip:focus { inset-inline-start: 16px; top: 16px; }

/* ---- the clock mark (LandingMaster.Dial) ---- */
.lp-dial { display: block; }
.lp-dial .lp-off { fill: var(--lp-dot-off); }
.lp-dial .lp-on { fill: var(--lp-accent); }
.lp-dial .lp-hand { stroke: var(--lp-accent); stroke-width: 4.5; stroke-linecap: round; }

/* ---- buttons: square, sentence case, 48px tall everywhere ---- */
.lp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px; border-radius: 2px; border: 1.5px solid transparent; font: 600 15px/1 var(--tos-font-body); cursor: pointer; touch-action: manipulation; transition: background-color .15s, color .15s; }
.lp .lp-btn-p { background: var(--lp-accent); color: var(--lp-on-accent); }
.lp .lp-btn-s { border-color: var(--lp-ink); color: var(--lp-ink); background: transparent; }
@media (hover: hover) {
    .lp .lp-btn-p:hover { background: var(--lp-ink); color: var(--lp-paper); }
    .lp .lp-btn-s:hover { background: var(--lp-ink); color: var(--lp-paper); }
}

/* ---- nav: the phone keeps Get started in the bar, the rest goes behind the menu ---- */
.lp-nav { position: sticky; top: 0; z-index: 40; background: var(--lp-paper); border-bottom: 1px solid var(--lp-rule); }
.lp-nav-inner { display: flex; align-items: center; gap: 10px; height: var(--lp-nav-h); }
.lp-brand { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.lp-brand .lp-dial { width: 28px; height: 28px; }
.lp-wm { font: 500 20px/1 var(--tos-font-mono); letter-spacing: -0.04em; color: var(--lp-ink); }
.lp-cursor { color: var(--lp-accent); }
.lp-links { display: none; }
.lp .lp-nav-cta { margin-inline-start: auto; min-height: 44px; padding: 0 14px; font-size: 14px; }
.lp-burger { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--lp-rule-2); border-radius: 2px; background: transparent; color: var(--lp-ink); touch-action: manipulation; }
.lp-burger svg { display: block; }
.lp-brand .lp-dial, .lp-burger { flex: none; }
.lp .lp-nav-cta, .lp-wm { white-space: nowrap; }
.lp-burger[aria-expanded="true"] svg { display: none; }
.lp-burger[aria-expanded="true"]::before { content: "\00D7"; font: 400 30px/1 var(--tos-font-body); }
/* Focusing a nav control (Escape out of the menu) must not scroll the page to "reveal" it. */
.lp-nav :is(a, button) { scroll-margin-top: calc(-1 * (var(--lp-nav-h) + 12px)); }
@media (max-width: 299px) {
    .lp .lp-nav-cta { display: none; }
    .lp-burger { margin-inline-start: auto; }
}
/* ---- the quick language switch (SiteLangDetect): "EN" on a translated page, the visitor's own
   language on an English one. Quiet, like the menu button: a hairline box, the wordmark's type.
   On a phone it takes the bar's free space before Get started; under 360px it lives in the menu only. ---- */
.lp-lq { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 44px; min-height: 44px; color: var(--lp-ink-2); font: 500 12px/1 var(--tos-font-mono); letter-spacing: .06em; touch-action: manipulation; }
.lp-lq span { display: inline-flex; align-items: center; height: 26px; padding: 0 7px; border: 1px solid var(--lp-rule-2); border-radius: 2px; }
.lp-lq[lang="ar"] { font-family: inherit; font-size: 14px; letter-spacing: 0; }
@media (hover: hover) { .lp-lq:hover span { color: var(--lp-ink); border-color: var(--lp-ink); } }
.lp-lq:focus-visible span { color: var(--lp-ink); border-color: var(--lp-ink); }
.lp .lp-lq-bar { margin-inline-start: auto; }
.lp .lp-lq-bar + .lp-nav-cta { margin-inline-start: 0; }
@media (max-width: 359px) {
    .lp .lp-lq-bar { display: none; }
    .lp .lp-lq-bar + .lp-nav-cta { margin-inline-start: auto; }
}
.lp-menu a.lp-lq { align-self: flex-start; min-height: 44px; margin-top: 16px; border-bottom: 0; font: 500 12px/1 var(--tos-font-mono); letter-spacing: .06em; }
.lp-menu a.lp-lq[lang="ar"] { font-family: inherit; font-size: 14px; letter-spacing: 0; }
.lp-menu { display: none; }
.lp-menu.is-open { display: flex; position: fixed; inset: var(--lp-nav-h) 0 0 0; z-index: 39; flex-direction: column; background: var(--lp-paper); padding: 8px var(--lp-pad) calc(24px + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; }
.lp-menu a { display: flex; align-items: center; min-height: 60px; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; border-bottom: 1px solid var(--lp-rule); }
.lp-menu .lp-btn { margin-top: 24px; width: 100%; border-bottom: 0; font-size: 16px; min-height: 52px; letter-spacing: 0; }
@media (min-width: 981px) {
    .lp-nav-inner { gap: 30px; }
    .lp-links { display: flex; gap: 28px; margin-inline-start: auto; font-size: 15px; font-weight: 500; }
    .lp-links a { color: var(--lp-ink-2); padding-block: 22px; border-bottom: 2px solid transparent; }
    .lp-links a:hover { color: var(--lp-ink); border-bottom-color: var(--lp-ink); }
    .lp .lp-nav-cta { margin-inline-start: 0; min-height: 40px; padding: 0 16px; }
    .lp .lp-lq-bar { margin-inline-start: 0; margin-inline-end: -14px; }
    .lp-brand { min-height: 0; }
    .lp-burger, .lp-menu.is-open { display: none; }
}

.lp-col a { overflow-wrap: anywhere; }
/* a [hidden] element stays hidden whatever a class says about its display */
.lp [hidden] { display: none !important; }

/* ---- footer: phone links are 44px tall ---- */
.lp-footer { background: var(--lp-paper-2); border-top: 1px solid var(--lp-ink); padding-bottom: env(safe-area-inset-bottom); }
.lp-foot { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; padding-block: 40px 28px; }
.lp-foot-brand .lp-wm { font-size: 22px; }
.lp-foot-brand p { margin-top: 12px; font-size: 16px; font-weight: 600; }
.lp .site-store-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 20px; }
.lp .site-store-badge { display: block; padding-block: 3px; }
.lp .site-store-badge img { display: block; height: 38px; width: auto; }
.lp .site-store-badge.is-google img { height: 56px; margin: -9px -8px; }
.lp-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; row-gap: 28px; }
.lp-col-h { margin-bottom: 4px; padding-bottom: 10px; border-bottom: 1px solid var(--lp-ink); font: 600 15px/1.3 var(--tos-font-body); letter-spacing: -0.01em; color: var(--lp-ink); }
.lp-col a { display: flex; align-items: center; min-height: 44px; padding-block: 8px; font-size: 16px; line-height: 1.3; color: var(--lp-ink-2); }
.lp-cols > .lp-col:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
.lp-cols > .lp-col:last-child .lp-col-h { grid-column: 1 / -1; }
.lp-col a:hover { color: var(--lp-ink); text-decoration: underline; text-underline-offset: 3px; }
.lp-foot-low { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding-block: 16px 24px; border-top: 1px solid var(--lp-rule); font: 400 12.5px var(--tos-font-mono); color: var(--lp-muted); }
.lp-foot-low a { display: inline-flex; align-items: center; min-height: 44px; }
.lp-foot-low a:hover { color: var(--lp-ink); }
.lp-langs { display: flex; flex-wrap: wrap; column-gap: 18px; }
.lp-langs a[aria-current="true"] { color: var(--lp-ink); }
@media (min-width: 761px) {
    .lp-cols { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
    .lp-col-h { margin-bottom: 12px; }
    .lp-cols > .lp-col:last-child { grid-column: auto; display: block; }
    .lp-col a { display: block; min-height: 0; padding: 5px 0; font-size: 14.5px; line-height: inherit; }
    .lp-foot-low { flex-direction: row; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; align-items: center; padding-block: 20px 28px; }
    .lp-foot-low a { display: inline; min-height: 0; }
    .lp-langs { gap: 16px; }
}
@media (min-width: 1081px) {
    .lp-foot { grid-template-columns: minmax(0, 1.1fr) minmax(0, 2.9fr); gap: 48px; padding-block: 56px 40px; }
    .lp-foot-brand p { margin-top: 14px; }
    .lp .site-store-badges { margin-top: 22px; }
}
@media (min-width: 761px) and (pointer: fine) {
    .lp .site-store-badge { padding-block: 0; }
}

/* ---- cookie choice: a bottom sheet on a phone, a small corner card from 600px ---- */
.lp-cookie { display: none; position: fixed; z-index: 50; inset-inline: 0; bottom: 0; padding: 12px var(--lp-pad) calc(12px + env(safe-area-inset-bottom)); background: var(--lp-paper); border: 1px solid var(--lp-ink); border-width: 1px 0 0; font-size: 13px; line-height: 1.5; color: var(--lp-ink-2); }
body.nav-open .lp-cookie.is-on { display: none; }
.lp-cookie.is-on { display: block; }
.lp-cookie a { color: var(--lp-ink); text-decoration: underline; }
.lp-cookie-row { display: flex; gap: 8px; margin-top: 10px; }
.lp-cookie .lp-btn { flex: 1; min-height: 44px; padding: 0 14px; font-size: 14px; }
@media (min-width: 600px) {
    .lp-cookie { inset-inline: 18px auto; bottom: 18px; width: min(360px, calc(100vw - 36px)); padding: 16px 16px 14px; border-width: 1px; font-size: 13.5px; }
    .lp-cookie-row { margin-top: 12px; }
    .lp-cookie .lp-btn { min-height: 36px; font-size: 13px; }
}

/* ---- touch, at any width: tablets and phones held sideways get the compact desktop layout,
   but a finger still needs 44px. A mouse (pointer: fine) keeps the desktop sizes. ---- */
@media (pointer: coarse) {
    .lp .lp-nav-cta { min-height: 44px; }
    .lp-col a { display: flex; align-items: center; min-height: 44px; padding: 8px 0; }
    .lp-brand { min-height: 44px; }
    .lp-foot-low a { min-width: 44px; }
    .lp-langs a { justify-content: center; }
    .lp-foot-low a { display: inline-flex; align-items: center; min-height: 44px; }
    .lp-cookie .lp-btn { min-height: 44px; }
    /* a tablet held sideways shows the desktop nav: the shortest link (Trust) still gets 44px */
    .lp-links a { min-width: 44px; text-align: center; }
    .lp-cookie a { display: inline-flex; align-items: center; min-height: 44px; }
}

@media (pointer: coarse) and (orientation: landscape) and (max-height: 500px) and (max-width: 980px) {
    .lp-cookie.is-on { display: flex; align-items: center; gap: 16px; inset-inline: 0; bottom: 0; width: auto; padding: 8px max(var(--lp-pad), env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(var(--lp-pad), env(safe-area-inset-left)); border-width: 1px 0 0; }
    .lp-cookie p { flex: 1; }
    .lp-cookie-row { margin-top: 0; flex: none; }
    .lp-cookie .lp-btn { flex: none; padding: 0 18px; }
}

/* ---- right to left ---- */
[dir="rtl"] .lp h1, [dir="rtl"] .lp h2, [dir="rtl"] .lp h3 { letter-spacing: 0; }