/* Shared across the public marketing page (landing.html, which also holds the "Download app" modal): tokens, fonts,
   reset, nav, buttons, footer. The app itself stays on the system font (docs/brand.md); this is the one place the brand's real
   marketing type appears (COACH Design System: Big Shoulders Display, Archivo, JetBrains Mono), self-hosted so the
   shell's policy stays script-src/style-src 'self' and nothing calls out to Google Fonts. Always the dark,
   espresso-and-black colourway: the brand's primary one, the way the sign-in screen wears it (docs/brand.md). */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400 700; font-display: swap;
             src: url("fonts/archivo.woff2") format("woff2"); }
@font-face { font-family: "Big Shoulders Display"; font-style: normal; font-weight: 700 900; font-display: swap;
             src: url("fonts/big-shoulders-display.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 600; font-display: swap;
             src: url("fonts/jetbrains-mono.woff2") format("woff2"); }

:root {
  --espresso: #442C2C; --volt: #E6FF00; --roast: #241616; --mocha: #6B4A4A; --oat: #C9B5B2; --crema: #F6F3EF;
  --moss: #A9BC2A; --black: #000000; --cell: #1A1414; --fill: #2A1E1E; --fill-strong: #3A2A2A;
  --danger: #FF9B92; --good: #A9BC2A;
  /* A neutral grey pair for plain body copy and fine print — the brand's own oat/mocha read too warm/pink for
     paragraph text at this length; feedback on the design canvas asked for grey instead. */
  --stone: #B3B3AD; --ash: #8F8F89;
  /* The landing page's drawings of the app: a Session's bars as the app draws them in dark (easy, tempo; hard is volt) and
     on the light catalogue band, a busy block in the calendar, the Readiness "watch" amber, and the warm white of text
     over a photo. */
  --easy: #B5A19D; --tempo: #7F8E1C; --easy-on-light: #8A7671; --busy: #4A3636; --watch: #FFD60A; --on-photo: #EAE4DD;
  --white: #FFFFFF;
  --font-display: "Big Shoulders Display", Impact, sans-serif;
  --font-sans: Archivo, "Helvetica Neue", Helvetica, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { color-scheme: dark; scroll-padding-top: 72px; }      /* a section reached by its address starts under the sticky bar */
body { margin: 0; background: var(--black); color: var(--crema); font-family: var(--font-sans); }
a { color: inherit; text-decoration: none; }
/* -webkit-appearance: none: every button on this page (.btn, .lang, .menu-button, the modal's .seg tabs and
   .modal-close) is custom-drawn — without it, iOS Safari's own default button chrome can still show through
   underneath at the rounded corners. */
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none;
         -webkit-appearance: none; appearance: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Keyboard focus, everywhere on these pages: a volt ring the eye finds on black (18:1). */
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; border-radius: 6px; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 40px; }
.eyebrow { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .08em;
           text-transform: uppercase; color: var(--oat); }
.display { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: .2px; margin: 0; }
/* Tall and tight, as the brand sets it (leading .86 to .92). The headlines are capitals only, so no descender can
   reach the next line; .95 keeps a German umlaut clear of the line above (measured on "HINZUFÜGEN" and the hero). */
.h-xl { font-size: 88px; line-height: .95; }
.h-headline { font-size: 52px; line-height: .95; }
.body-lg { font-size: 19px; line-height: 28px; color: var(--stone); }
.body { font-size: 16px; line-height: 24px; color: var(--stone); }
.small { font-size: 13px; line-height: 19px; color: var(--ash); }

.btn { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 26px; border: none;
       border-radius: 26px; font-family: var(--font-sans); font-weight: 700; font-size: 16px; white-space: nowrap; }
.btn-primary { background: var(--volt); color: var(--espresso); }        /* 11.4:1, as the app's on-accent */
.btn-primary:disabled { opacity: .6; cursor: default; }
.btn-ghost { background: transparent; color: var(--crema); border: 1px solid rgba(246,243,239,.3); }
.btn-small { height: 44px; padding: 0 18px; font-size: 14px; border-radius: 22px; }

.nav { position: sticky; top: 0; z-index: 50; background: rgba(11,7,7,.82); backdrop-filter: blur(16px);
       -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(246,243,239,.1); }
/* padding-block, not the padding shorthand: .nav-row always sits on the same element as .wrap (padding: 0 40px),
   and a shorthand here — even "16px 0" — would win the horizontal padding too and zero it out. */
.nav-row { position: relative; display: flex; align-items: center; gap: 16px; padding-block: 12px; }
.navlinks { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.navlinks .link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; font-size: 15px; font-weight: 500;
                  color: var(--oat); }
.navlinks .link:hover { color: var(--crema); }
.navlinks .menu-only { display: none; }                 /* the install link lives in the phone's menu; wide, in the footer */
.nav-actions { display: flex; align-items: center; gap: 8px; }

/* The language: both codes, the one in use underlined in volt (the state is the underline and the weight, never colour
   alone), each a 44 px target. A single button naming the other language read as the page's own. */
.lang-switch { display: flex; align-items: center; }
.lang { position: relative; min-width: 44px; min-height: 44px; padding: 0 6px; font-family: var(--font-mono); font-size: 13px;
        font-weight: 500; letter-spacing: .06em; color: var(--oat); }
.lang:hover { color: var(--crema); }
.lang[aria-pressed="true"] { color: var(--crema); font-weight: 700; text-decoration: underline; text-decoration-color: var(--volt);
                             text-decoration-thickness: 2px; text-underline-offset: 7px; }
.lang + .lang::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 1px; background: rgba(246,243,239,.25); }

/* The phone's menu button: two bars that turn into a cross while the menu is open. */
.menu-button { display: none; width: 44px; height: 44px; border-radius: 22px; border: 1px solid rgba(246,243,239,.3);
               color: var(--crema); align-items: center; justify-content: center; }
.icon-menu { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.icon-menu path { transition: transform .2s ease; transform-origin: 12px 12px; }
.nav.open .bar-top { transform: translateY(4px) rotate(45deg); }
.nav.open .bar-bottom { transform: translateY(-4px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .icon-menu path { transition: none; } }
.brand { display: flex; align-items: center; gap: 10px; min-width: 44px; min-height: 44px; }
/* The full icon+wordmark lockup, not the ring alone: docs/brand.md's own floor is 120 px wide, and its sidebar
   uses the wordmark at exactly 126 px — this nav matches that, at the same height (34 px on the 737:199 wordmark
   is ~126 px wide), instead of the ring alone at a size the wordmark was never drawn for. */
/* aspect-ratio, not just width: auto: the <svg> carries no width/height attribute, only viewBox, and iOS Safari
   doesn't reliably derive the auto side from the viewBox's intrinsic ratio on a sizeless SVG — it can fall back
   to the UA default (300×150) instead, stretching the wordmark's box and clipping the "h" against its sibling
   nav items. aspect-ratio (737:199, the wordmark symbol's own viewBox) pins the ratio directly, independent of
   that intrinsic-size computation. */
.nav-mark { display: block; height: 34px; width: auto; aspect-ratio: 737 / 199; color: var(--crema); }
/* Under 380 px the logo, the button and the menu no longer fit one row: the C alone, as brand.md says for any
   space under 120 px of logo. */
.nav-mono { display: none; width: 34px; height: 34px; }
.logo-lg { display: block; height: 40px; width: auto; aspect-ratio: 737 / 199; color: var(--crema); }
/* No .zone-1: the ring's opening (tools/brand_marks.py) is never drawn, so there's no zone-1 path to color. */
.zone-2 { fill: var(--oat); } .zone-3 { fill: var(--moss); } .zone-4 { fill: var(--volt); }

.foot { border-top: 1px solid rgba(246,243,239,.1); padding-block: 56px 40px; }
.foot-row { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 24px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.foot-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: var(--oat); }
.foot-links a:hover { color: var(--crema); }
/* Which commit deploy/sync.sh last put on the server (landing.js reads GET /api/v1/build, public, #147) — the
   one way to tell a deploy actually went through, short of SSHing in. Stays hidden until it has something to show. */
.foot-version { margin-top: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--ash); }
.foot-version a { color: inherit; text-decoration: underline; }
.foot-version a:hover { color: var(--crema); }

@media (max-width: 900px) {
  .h-xl { font-size: 60px; }
  .h-headline { font-size: 38px; }
  .wrap { padding: 0 22px; }
  /* On a phone the sections, the install link and the language fold into a menu under the bar (landing.js). A page
     with nothing to fold (the privacy notice: .always) keeps its row. */
  /* .nav-row is also the .wrap, so its padding box already spans the page: left and right 0 reach both edges. */
  .navlinks:not(.always) { display: none; position: absolute; top: 100%; left: 0; right: 0; margin: 0; flex-direction: column;
                           align-items: stretch; gap: 0; padding: 4px 22px 16px; background: var(--black);
                           border-bottom: 1px solid rgba(246,243,239,.12); box-shadow: 0 24px 40px rgba(0,0,0,.6); }
  .nav.open .navlinks:not(.always) { display: flex; }
  .navlinks:not(.always) .link { min-height: 52px; padding: 0; font-size: 17px; color: var(--crema);
                                 border-bottom: 1px solid rgba(246,243,239,.1); }
  .navlinks .menu-only { display: inline-flex; }
  .navlinks:not(.always) .lang-switch { margin: 8px 0 0 -12px; }      /* "EN" lines up with the links above */
  .menu-button { display: inline-flex; }
  .nav-actions { margin-left: auto; }
  .nav-save { display: none; }                /* the Owner's call, 2026-09-30: the bar is the logo and the menu on a phone;
                                                 the hero's and the last section's buttons still open the signup */
}
@media (max-width: 480px) {
  .nav-cta-wide { display: none; }            /* the privacy notice: logo and language only */
}
@media (max-width: 400px) {
  .wrap { padding: 0 16px; }
  .h-xl { font-size: 52px; }
  .navlinks:not(.always) { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 380px) {
  .nav-mark { display: none; }
  .nav-mono { display: block; }
}

/* Utilities: the shell's policy (style-src 'self') refuses inline `style=""`, so one-off spacing, colour and
   alignment tweaks are small reusable classes instead of hand-named ones per spot. */
.mt-8 { margin-top: 8px; } .mt-10 { margin-top: 10px; } .mt-12 { margin-top: 12px; } .mt-14 { margin-top: 14px; }
.mt-16 { margin-top: 16px; } .mt-18 { margin-top: 18px; } .mt-22 { margin-top: 22px; } .mt-26 { margin-top: 26px; }
.mt-28 { margin-top: 28px; } .mt-40 { margin-top: 40px; } .mt-56 { margin-top: 56px; }
.mb-4 { margin-bottom: 4px; } .mb-12 { margin-bottom: 12px; } .mb-18 { margin-bottom: 18px; }
.pb-64 { padding-bottom: 64px; }
.max-460 { max-width: 460px; } .max-480 { max-width: 480px; } .max-520 { max-width: 520px; } .max-640 { max-width: 640px; }
.center { text-align: center; }
.center-row { display: flex; justify-content: center; }
.baseline-row { display: flex; align-items: baseline; }
.items-start { align-items: start; }
.mx-auto { margin-left: auto; margin-right: auto; }
.underline { text-decoration: underline; }
.on-photo { color: #EAE4DD; }
.muted-oat { color: var(--oat); }