:root {
  /* Yomcom palette (2026-08-07 re-skin): azure accent, dark by default — the same values the
     signed-in app is painted from, so the marketing site and the product it leads into are visibly
     one thing. Replaces the 2026-07-14 teal-green + amber brand.

     DARK IS THE DEFAULT. The light values live in the prefers-color-scheme media query below, as
     the opt-out for a visitor whose device asks for light — this site has no login, so there is no
     stored preference to read and no toggle to honour. */
  --bg: #0f1318; --card: #171c22; --surface: #171c22; --surface-2: #1d232b;
  --line: #2a3138; --line-2: #3d4650;
  --ink: #e6edf3; --body: #c2ccd6; --muted: #8b949e;
  --accent: #90CF8E; --accent-ink: #A7DCA5; --accent-soft: #16281a; --on-accent: #0a1220;
  --good: #7ee2a8; --good-soft: #14301f; --danger: #ff9a8f; --danger-soft: #3a1a16;
  --warn: #f0c66b; --warn-soft: #35290f;

  /* The sticky header floats over the page, so it is the page colour at the alpha the blur needs. */
  --header-bg: rgba(15,19,24,.78);
  /* On a dark page a drop shadow does nothing — depth comes from the 1px border every card carries.
     These stay named so the light fallback can still use real shadows for the same job. */
  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.45);
  --shadow-lift: 0 8px 24px rgba(0,0,0,.55);
  --shadow-modal: 0 24px 60px rgba(0,0,0,.65);
  --btn-shadow: 0 1px 2px rgba(0,0,0,.45);
  --radius: 14px; --maxw: 1120px;

  /* The panels that are dark in BOTH schemes — hero, CTA panel, footer, the logo badge. They carry
     their own on-dark text and hairline colours so the light fallback never paints dark ink onto
     them (which is exactly what would happen if they used --ink/--line). */
  --navy: #10161d; --navy-2: #161d26; --navy-3: #1b2c47;
  --on-dark-ink: #ffffff; --on-dark-body: #c3ccd8; --on-dark-muted: #8a94a3;
  --on-dark-line: rgba(255,255,255,.10);

  /* The old mid-teal support colour. Kept as a name because a dozen rules reference it; there is
     one accent now, and it is azure. Resolved at the point of use, so it follows the scheme. */
  --teal: var(--accent-ink); --teal-soft: var(--accent-soft);

  /* Tells the browser to render what CSS cannot reach — scrollbars, the native select popup, the
     date/search widgets — in the same scheme as the page. */
  color-scheme: dark;

  /* THE LAYERING SCALE — the same rungs, in the same order, as the signed-in app's
     (Yomcom.Host.AppTheme.LayeringVars, where the whole argument is written out). This site is a
     separate application with its own token block, so it carries its own copy rather than
     importing one; only the rungs this site actually has anything on are used, and the values
     match so the two never drift into meaning different things.
     content < sticky page bars < NUDGES < dropdowns < furniture < banners < MODALS < toasts.
     Nudges moved BELOW dropdowns on 2026-08-14: an uninvited suggestion must never cover a menu
     somebody deliberately opened. The app measured three dead rows on a card menu because of it;
     this site has no card menus, and it takes the change anyway so the two copies stay one scale
     rather than two that happen to look alike. */
  --z-sticky: 10; --z-nudge: 20; --z-dropdown: 30; --z-lifted: 40;
  --z-shell: 50; --z-shell-nav: 54; --z-banner: 60; --z-shell-pop: 65;
  --z-modal: 70; --z-modal-top: 71; --z-modal-over: 72;
  --z-tour: 80; --z-toast: 90;
  /* Height of the fixed bottom bar (the consent notice) right now — published by GdprBanner while
     it shows, 0 otherwise. The page reserves it below, so nothing is stranded underneath. */
  --bar-clear: 0px;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f5f7fa; --card: #ffffff; --surface: #ffffff; --surface-2: #f3f6fa;
    --line: #e3e8ef; --line-2: #cfd4df;
    --ink: #101725; --body: #3a4356; --muted: #667085;
    --accent: #2f7a30; --accent-ink: #276b28; --accent-soft: #e9f6e8; --on-accent: #ffffff;
    --good: #166534; --good-soft: #dcfce7; --danger: #b42318; --danger-soft: #fee4e2;
    --warn: #b45309; --warn-soft: #fffbeb;
    --header-bg: rgba(255,255,255,.82);
    --shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.06);
    --shadow-lift: 0 6px 16px rgba(16,24,40,.10);
    --shadow-modal: 0 24px 60px rgba(16,24,40,.35);
    --btn-shadow: 0 1px 2px rgba(22,104,214,.35);
    color-scheme: light;
  }
  /* The logo badge stays near-black in light mode too, so the marks inside it take the DARK
     scheme's accent — #2f7a30 on near-black is a smudge. Declared on the badge itself, so the
     logomark's `fill="var(--accent)"` still simply follows --accent. */
  /* --on-accent MOVES WITH --accent, and forgetting it is what broke the release gate on
     2026-08-17: this rule re-points the accent to the pastel for the badge, while --on-accent stays
     on the LIGHT theme's #ffffff — so anything inside here that pairs the two paints white on
     #90CF8E, which is 1.83:1 against a 4.5:1 requirement. The pair is a pair; a rule that changes
     one of them and not the other is always a bug, even when nothing happens to be using both
     today. */
  .brand .mark { --accent: #90CF8E; --accent-ink: #A7DCA5; --on-accent: #0a1220; }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* padding-bottom reserves the consent bar's height while it is on screen (--bar-clear, published
   by GdprBanner). Without it the bar is a fixed strip nailed over the last ~125px of the document
   at every scroll position, so the footer and anything else at the end of a page could not be
   reached at all — the same bug the app shell had. It returns to 0px on Accept. */
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
       background: var(--bg); color: var(--body); line-height: 1.55;
       padding-bottom: var(--bar-clear, 0px);
       -webkit-font-smoothing: antialiased; }
a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
h1, h2, h3 { color: var(--ink); line-height: 1.2; letter-spacing: -.01em; margin: 0; }
::selection { background: var(--accent-soft); }
img { max-width: 100%; }

.btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 10px;
       border: 1px solid transparent; font-size: 14px; font-weight: 600; cursor: pointer;
       text-decoration: none; transition: transform .04s ease, background .15s ease, box-shadow .15s ease; }
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
/* --on-accent, not #fff: on dark the accent is bright enough that white text on it is unreadable. */
.btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: var(--btn-shadow); }
.btn-primary:hover { background: var(--accent-ink); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--line-2); background: var(--surface-2); }
/* Sits on the dark hero/CTA panels only — white alphas are correct in both schemes. */
.btn-light { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.24); }
.btn-light:hover { background: rgba(255,255,255,.2); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }

header.site { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--header-bg);
              backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--line); }
header.site .bar { display: flex; align-items: center; justify-content: space-between; height: 64px; position: relative; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; color: var(--ink); letter-spacing: -.01em; }
.brand:hover { text-decoration: none; }
/* "Waypoints on a route" logomark — a dotted route from a waypoint to a ringed destination, on a
   near-black rounded badge lit from the top right in azure. Dark in both schemes. */
.brand .mark { width: 28px; height: 28px; border-radius: 8px;
               background: radial-gradient(120% 120% at 80% 15%, #24456e 0%, var(--navy-2) 55%);
               display: grid; place-items: center; flex: 0 0 auto;
               box-shadow: inset 0 0 0 1px rgba(255,255,255,.10); }
/* The header nav is just the brand + the sign-in button since 2026-07-24 — the rules for the page
   links, separator, account button and mobile burger went with the markup they styled. */
nav.top { display: flex; align-items: center; gap: 6px; }

/* Dark in both schemes, so it uses the on-dark set throughout. On the dark page it would otherwise
   be indistinguishable from the body — the hairline above it is what separates the two. */
/* Sticky footer: on a page shorter than the viewport the dark footer used to stop partway and
   leave a band of page colour beneath it — invisible in dark, where the two nearly match, and
   obvious in light. */
body { min-height: 100vh; display: flex; flex-direction: column; }
body > footer.site { margin-top: auto; }
footer.site { background: var(--navy); color: var(--on-dark-body); margin-top: 72px;
              border-top: 1px solid var(--line); }
footer.site .cols { display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between;
                    padding: 48px 0 28px; }
footer.site .brand { color: var(--on-dark-ink); }
footer.site .brand .mark { background: var(--navy-2); }
footer.site p { margin: 12px 0 0; max-width: 320px; font-size: 14px; color: var(--on-dark-muted); }
footer.site h4 { color: var(--on-dark-ink); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 12px; }
footer.site .group a { display: block; color: var(--on-dark-muted); font-size: 14px; padding: 4px 0; }
footer.site .group a:hover { color: var(--on-dark-ink); }
footer.site .legal { border-top: 1px solid var(--on-dark-line); padding: 18px 0; font-size: 13px;
                     color: var(--on-dark-muted);
                     display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
footer.site .legal-left { display: flex; align-items: center; gap: 14px; }
footer.site .legal-link { color: var(--on-dark-body); }
footer.site .legal-link:hover { color: var(--on-dark-ink); }

/* --- Shared section primitives (used across the marketing pages) --- */
.kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700;
          letter-spacing: .09em; text-transform: uppercase; color: var(--accent-ink); }
.kicker::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--accent); }
/* Only set the top padding — using the `padding` shorthand here would zero the horizontal padding that
   `.wrap` provides (these sections are `class="sec wrap"`), pushing cards/text to the screen edges. */
.sec { padding-top: 72px; }
.sec-head { max-width: 760px; margin-bottom: 36px; }
.sec-head h2 { font-size: 32px; margin: 12px 0 0; }
.sec-head .sub { color: var(--muted); font-size: 17px; margin: 12px 0 0; }
/* Dark in both schemes. The hairline is what makes it read as a panel on the dark page, where the
   gradient alone is only a couple of steps away from the body colour. */
.cta-panel { position: relative; overflow: hidden; border-radius: 22px; padding: 60px 32px; text-align: center;
             background: radial-gradient(90% 160% at 15% 0%, var(--navy-3) 0%, var(--navy) 60%);
             border: 1px solid var(--on-dark-line); color: var(--on-dark-body); }
.cta-panel::after { content: ""; position: absolute; inset: 0; pointer-events: none;
                    background: radial-gradient(46% 60% at 85% 100%, rgba(61,139,253,.26) 0%, transparent 70%); }
.cta-panel > * { position: relative; z-index: 1; }
.cta-panel h2 { color: var(--on-dark-ink); font-size: 32px; margin: 0 0 12px; }
.cta-panel p { color: var(--on-dark-body); max-width: 560px; margin: 0 auto 26px; font-size: 17px; }
.cta-panel .row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.fine { font-size: 13px; color: var(--muted); }
@media (max-width: 860px) { .sec { padding-top: 56px; } .sec-head h2, .cta-panel h2 { font-size: 26px; } }

@media (max-width: 720px) {
  nav.top { gap: 4px; }
  nav.top a.btn { display: inline-flex; }
}

/* --- Marketplace / Contact popups (landing page, 2026-07-24) --- */
.modal-card.wide { max-width: 760px; max-height: 84vh; overflow: auto; }
.modal-grid-wrap { margin-top: 4px; }
.mk-search { margin: 2px 0 14px; }
.mk-search input { width: 100%; font: inherit; font-size: 15px; padding: 11px 14px; border: 1px solid var(--line);
                   border-radius: 10px; background: var(--surface-2); color: var(--ink); }
.mk-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.modal .field { margin-bottom: 14px; text-align: left; }
.modal .field label { display: block; font-size: 12px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
/* These had no background at all, which meant the browser's own white — a white box in a dark
   dialog, with --ink (near-white) text typed into it. */
.modal .field input, .modal .field select, .modal .field textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; font: inherit;
  font-size: 14px; color: var(--ink); background: var(--surface-2); }
.modal .field input:focus, .modal .field select:focus, .modal .field textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.modal .field ::placeholder, .mk-search ::placeholder { color: var(--muted); opacity: 1; }
.modal .field textarea { resize: vertical; }
.modal .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* The contact form's honeypot used to be hidden by a `.hp { left: -9999px }` rule here. It hides
   itself now, with an inline display:none — off-screen is not hidden to a phone's autofill, which
   reads the view tree and filled the trap on the user's behalf. See Honeypot. */
.modal .robot-check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 9px; padding: 10px 14px; margin-bottom: 14px; font-size: 13px; font-weight: 600; color: var(--ink); }
.modal .robot-check input { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; }
.modal .modal-foot .btn-primary:disabled { opacity: .5; cursor: not-allowed; }
.modal-form-banner { display: none; border-radius: 9px; padding: 10px 14px; font-size: 13px; font-weight: 600; margin-bottom: 14px; }
.modal-form-banner.show { display: block; }
.modal-form-banner.ok { color: var(--good); background: var(--good-soft); }
.modal-form-banner.err { color: var(--danger); background: var(--danger-soft); }
@media (max-width: 640px) { .modal .form-row { grid-template-columns: 1fr; } }.ico { width: 1em; height: 1em; flex: 0 0 auto; vertical-align: -0.125em; }
button, a.btn, .btn { display: inline-flex; align-items: center; gap: 6px; }
button .ico, a .ico, .btn .ico { pointer-events: none; }