/* ============================================================
   Cordelle — marketing site

   Light-committed. The page paints its own ground explicitly rather than
   inheriting the visitor's, so the dark phone mockups keep their presence
   against it in every context.

   Cordelle speaks in Figtree; Fraunces appears ONLY inside the phone
   mockups, which are tenant surfaces (docs/BRAND.md).
   ============================================================ */

/* ── type, self-hosted ──────────────────────────────────────────────
   These two files are the latin subsets Google Fonts serves a current
   browser (variable woff2; the release number is in the filename), so the
   rendering is what the hosted stylesheet gave before. What changed is that
   nothing on the critical path leaves this origin any more, and no third
   party sees a visitor's IP for a font. The unicode-range is Google's,
   kept so that non-latin characters behave exactly as they did.
   Both faces are OFL; the licence texts sit beside them in /assets/fonts/.
   Figtree is preloaded from every <head>; Fraunces deliberately is not —
   it appears only inside the phone mockups, below the fold on a phone. */
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/figtree-v9.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url("/assets/fonts/fraunces-v38.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;

  --bg:          #F7F8FB;
  --bg-2:        #EDEFF6;
  --surface:     #FFFFFF;
  --raised:      #FFFFFF;
  --line:        rgba(18, 20, 28, 0.11);
  --line-soft:   rgba(18, 20, 28, 0.06);
  --text:        #12141C;
  --dim:         #565D72;
  --accent:      #2645C5;
  --accent-deep: #1B32A0;
  --accent-wash: rgba(38, 69, 197, 0.06);
  --on-accent:   #FFFFFF;

  --wrap: 1180px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 24px;

  --f-text: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-disp: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;

  /* Tinted from the neutral hue, never flat grey. */
  --shadow-1: 0 1px 2px rgba(24, 28, 45, .06), 0 3px 12px rgba(24, 28, 45, .05);
  --shadow-2: 0 2px 6px rgba(24, 28, 45, .07), 0 14px 44px rgba(24, 28, 45, .10);
  --shadow-3: 0 18px 60px rgba(24, 28, 45, .16);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-text);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; }
.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--on-accent);
  padding: 12px 18px; border-radius: 0 0 var(--r-sm) 0; font-weight: 600;
}
.skip:focus { left: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* Catch-all: the per-component reduced-motion rules below cover transforms,
   but the mockups also cross-fade colour on every palette change. Someone who
   asked for less motion should get none of it, not most of it. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ───────── nav ───────── */
.nav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(247, 248, 251, .86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.nav-inner { display: flex; align-items: center; gap: 28px; height: 70px; }
.brand {
  display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--text);
  min-height: 44px; /* tap target */
}
.mark { width: 30px; height: 30px; color: var(--accent); flex: none; }
.brand-word { font-weight: 600; font-size: 20px; letter-spacing: -0.015em; }
.nav-links { display: flex; gap: 26px; margin-left: auto; }
.nav-links a { color: var(--dim); text-decoration: none; font-size: 15.5px; font-weight: 500; transition: color .16s ease; }
.nav-links a:hover { color: var(--text); }
/* ── mobile nav: pure-CSS burger, one checkbox, no script ── */
.nav-toggle { display: none; }
.nav-burger { display: none; }
@media (max-width: 980px) {
  .nav-inner { gap: 16px; position: relative; }
  .nav-links { display: none; }
  /* Keep the checkbox in the tab order but visually hidden: keyboard users
     toggle the menu with Space on it, and the ring lands on the burger. */
  .nav-toggle {
    display: block; position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .nav-toggle:focus-visible ~ .nav-burger { outline: 2px solid var(--accent); outline-offset: 3px; }
  .nav-burger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 10px; margin-left: 2px;
    cursor: pointer; border-radius: 10px;
  }
  /* The three bars. The fourth span is the label's accessible name (.sr-only). */
  .nav-burger span:not(.sr-only) {
    display: block; width: 22px; height: 2px; border-radius: 2px;
    background: var(--text); transition: transform .18s ease, opacity .18s ease;
  }
  .nav-toggle:checked ~ .nav-links {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; top: 70px; left: -20px; right: -20px; z-index: 60;
    margin: 0; padding: 6px 20px 14px;
    background: var(--panel, #fff); border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 30px -18px rgba(18, 20, 28, .25);
  }
  .nav-toggle:checked ~ .nav-links a {
    padding: 13px 2px; font-size: 17px; border-bottom: 1px solid var(--line);
  }
  .nav-toggle:checked ~ .nav-links a:last-child { border-bottom: 0; }
  /* burger → X while open (the label sits after the checkbox's siblings, so
     target it via the shared parent state) */
  .nav-inner:has(.nav-toggle:checked) .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-inner:has(.nav-toggle:checked) .nav-burger span:nth-child(2) { opacity: 0; }
  .nav-inner:has(.nav-toggle:checked) .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ───────── buttons ───────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--on-accent);
  font-family: inherit; font-size: 16px; font-weight: 600;
  padding: 14px 26px; border: 1px solid transparent; border-radius: var(--r-sm);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .14s ease, background .14s ease;
}
.btn:hover { background: var(--accent-deep); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-sm { padding: 9px 17px; font-size: 15px; margin-left: 4px; min-height: 44px; }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn-ghost:hover { background: var(--accent-wash); border-color: var(--accent); }
.wide-btn { width: 100%; padding: 16px; font-size: 17px; }
/* The header CTA used to disappear below 620px, which left phones with a
   sticky bar containing only the logo and no route to the form once the hero
   had scrolled past. It stays; it just gets tighter. */
@media (max-width: 620px) {
  .btn-sm { padding: 9px 14px; font-size: 14.5px; margin-left: 0; }
  .nav-inner { gap: 12px; }
  .brand-word { font-size: 18px; }
}
@media (max-width: 380px) {
  .btn-sm { padding: 9px 12px; font-size: 14px; }
  .mark { width: 26px; height: 26px; }
  /* Brand text + 44px burger + nowrap CTA overflow a 320px viewport;
     the logo mark alone identifies the site down here. */
  .brand-word { display: none; }
}
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }

/* ───────── type ───────── */
.eyebrow {
  font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 14px;
}
h1 {
  font-size: clamp(38px, 5.4vw, 60px); line-height: 1.07; letter-spacing: -0.03em;
  font-weight: 700; margin: 0 0 22px; text-wrap: balance;
}
h1 em { font-style: normal; color: var(--accent); }
.h2 {
  font-size: clamp(27px, 3.4vw, 39px); line-height: 1.15; letter-spacing: -0.024em;
  font-weight: 700; margin: 0 0 18px; text-wrap: balance;
}
.h3 { font-size: 21px; font-weight: 600; letter-spacing: -0.015em; margin: 0 0 10px; }
.lede { font-size: clamp(17px, 1.5vw, 20px); color: var(--dim); margin: 0 0 30px; max-width: 62ch; }
.lede.narrow { max-width: 58ch; margin-bottom: 40px; }
.lede a { color: var(--accent); }
.body { color: var(--dim); margin: 0 0 16px; max-width: 60ch; }
.body a { color: var(--accent); }
.body em { color: var(--text); font-style: italic; }

/* ───────── hero ───────── */
.hero { position: relative; padding: 74px 0 84px; overflow: hidden; }
.hero-glow {
  position: absolute; inset: -50% 0 auto -14%; height: 760px; pointer-events: none;
  background: radial-gradient(52% 58% at 32% 42%, rgba(38, 69, 197, .09), transparent 70%);
}
.hero-inner { position: relative; display: grid; grid-template-columns: 1.06fr .94fr; gap: 56px; align-items: center; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 32px; }
.hero-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.hero-facts li { font-size: 15.5px; color: var(--dim); padding-left: 26px; position: relative; }
.hero-facts li::before {
  content: ""; position: absolute; left: 0; top: 10px;
  width: 13px; height: 2px; border-radius: 2px; background: var(--accent);
}
.hero-facts strong { color: var(--text); font-weight: 600; }
/* Keeps the UA underline: BRAND.md — accent500 and accent700 collapse to one
   value, so a link needs a weight or an underline, not just a color. */
.hero-facts a { color: var(--accent); }
.hero-device { display: flex; justify-content: center; }
@media (max-width: 980px) {
  .hero-inner { grid-template-columns: 1fr; gap: 42px; }
  /* Copy first on a phone: an ad click has to reach "Start your free trial"
     without scrolling past the whole mockup. The phone follows the CTA. */
  .hero-device { order: 1; }
}

/* ───────── sections ───────── */
.section { padding: 90px 0; }
.band { padding: 84px 0; background: var(--bg-2); border-block: 1px solid var(--line-soft); }
.band.alt { background: var(--surface); }
.split { display: grid; grid-template-columns: 1.15fr .85fr; gap: 54px; align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 34px; } }

.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.checks li {
  position: relative; padding-left: 32px; color: var(--text); font-size: 16px;
  padding-bottom: 13px; border-bottom: 1px solid var(--line-soft);
}
.checks li:last-child { border-bottom: 0; }
.checks li::before { content: "✓"; position: absolute; left: 0; top: -1px; color: var(--accent); font-weight: 700; }

.stack { display: grid; gap: 14px; }
.stat {
  background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 22px 24px; display: flex; align-items: baseline; gap: 16px; box-shadow: var(--shadow-1);
}
.stat b {
  font-size: 30px; font-weight: 700; color: var(--accent); letter-spacing: -0.02em;
  flex: none; font-variant-numeric: tabular-nums;
}
.stat span { color: var(--dim); font-size: 15.5px; line-height: 1.45; }

/* ───────── capability grid ───────── */
.grid { display: grid; gap: 18px; }
.cap-grid { grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); margin-top: 42px; }
.cap {
  background: var(--raised); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 24px 24px 26px;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.cap:hover { border-color: rgba(38, 69, 197, .38); transform: translateY(-2px); box-shadow: var(--shadow-1); }
.cap h3 { margin: 0 0 9px; font-size: 17.5px; font-weight: 600; letter-spacing: -0.01em; }
.cap p { margin: 0; color: var(--dim); font-size: 15.5px; line-height: 1.55; }
.pro-pill {
  display: inline-block; margin-left: 8px; padding: 3px 9px; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: 12px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; vertical-align: 2px;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) { .cap:hover { transform: none; } }

/* ============================================================
   PHONE MOCKUPS — tenant surfaces.

   Defaults are CORDELLE'S OWN PAIR, because that is precisely what an
   agency inherits before it brands itself (DEFAULT_ACCENT / cordelleTheme
   in shared/theme.ts). Never default these to a tenant preset — doing so
   shows one operator's brand as if it were the product's identity.
   ============================================================ */
.phone {
  /* Defaults mirror the shipped app in Cordelle's light pair — the store
     screenshots are the reference. The white-label phone overrides these
     seven via app.js; everything below derives from them. */
  --t-accent:  #2645C5;
  --t-bg:      #EDEEF2;
  --t-surface: #FAFAFC;
  --t-text:    #17181C;
  --t-dim:     #5D6373;   /* was #6E7482, 4.0:1 on --t-bg; this is 5.2:1 there and 5.8:1 on --t-surface, so the mockups' small type clears AA */
  --t-line:    rgba(23, 24, 28, .08);
  --t-on-acc:  #FFFFFF;

  /* Semantic status, NOT tenant colors. shared/theme.ts derives these from
     fixed hues (success 145°, warn 40°, danger 358°) regardless of the
     operator's palette, so the white-label phone must not repaint them —
     app.js overrides the seven above and leaves these three alone. */
  --t-ok:      #196C3D;
  --t-warn:    #79591D;
  --t-bad:     #B51217;

  /* max-width, not just width: at a 320px viewport the .wrap is 280px, and a
     fixed 332px frame would push the whole document into horizontal scroll. */
  width: 318px; max-width: 100%; flex: none;
  background: var(--t-bg);
  border: 1px solid rgba(0, 0, 0, .10);
  border-radius: 34px;
  padding: 13px;
  box-shadow: var(--shadow-3);
  transition: background .45s ease;
}
.phone.sm { width: 286px; }
/* Gallery phones are a row of equals: fixed screen height, like the devices
   they imitate — content ends or crops at the bezel, never stretches it. */
.phone.sm .phone-screen { height: 500px; }
/* Whatever crops at the bezel fades out like a screen mid-scroll, instead of
   guillotining a line of text. */
.phone.sm .phone-screen::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40px;
  background: linear-gradient(to bottom, transparent, var(--t-bg)); pointer-events: none;
}
.phone.md { width: 332px; }
@media (max-width: 380px) { .phone, .phone.sm, .phone.md { width: 100%; } }
.phone-screen { background: var(--t-bg); border-radius: 24px; padding: 18px 16px 20px; min-height: 486px; overflow: hidden; position: relative; }
.phone-screen * { transition: color .45s ease, background .45s ease, border-color .45s ease; }

.scr-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; gap: 10px; }
.scr-agency {
  font-size: 11px; font-weight: 700; letter-spacing: .13em; color: var(--t-accent);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.scr-sync { font-size: 11px; color: var(--t-dim); white-space: nowrap; }
.scr-kicker {
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--t-accent); margin: 0 0 6px;
}
.scr-title {
  font-family: "Fraunces", Georgia, serif; font-weight: 700; font-size: 27px; line-height: 1.08;
  letter-spacing: -0.01em; color: var(--t-text); margin: 0 0 14px;
}
.scr-title.sm { font-size: 25px; margin-bottom: 16px; }

.scr-now {
  display: flex; gap: 12px; align-items: flex-start;
  background: color-mix(in srgb, var(--t-accent) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--t-accent) 32%, transparent);
  border-radius: 14px; padding: 13px 15px; margin-bottom: 20px;
}
.scr-now .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--t-accent); margin-top: 6px; flex: none; }
.scr-now-label {
  margin: 0 0 2px; font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--t-accent);
}
.scr-now-body { margin: 0; font-size: 14.5px; color: var(--t-text); line-height: 1.35; }

/* timeline rail — the itinerary spine, the app's best structural idea */
.scr-spine { list-style: none; margin: 0 0 18px; padding: 0 0 0 20px; position: relative; }
.scr-spine::before {
  content: ""; position: absolute; left: 3px; top: 7px; bottom: 7px;
  width: 2px; background: color-mix(in srgb, var(--t-accent) 30%, transparent);
}
.scr-spine li { position: relative; display: flex; gap: 13px; align-items: baseline; padding: 8px 0; font-size: 14px; }
.scr-spine li::before {
  content: ""; position: absolute; left: -20px; top: 14px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--t-bg); border: 2px solid var(--t-accent);
}
.scr-spine .t {
  font-variant-numeric: tabular-nums; color: var(--t-accent);
  font-weight: 600; font-size: 13px; flex: none; min-width: 42px;
}
.scr-spine .e { color: var(--t-text); line-height: 1.35; }
.scr-spine .sub { display: block; color: var(--t-dim); font-size: 12.5px; margin-top: 1px; }

.scr-card { background: var(--t-surface); border: 1px solid var(--t-line); border-radius: 14px; padding: 13px 15px; }
.scr-card-label {
  margin: 0 0 3px; font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--t-dim);
}
.scr-card-label.mt { margin-top: 18px; }
.scr-card-body { margin: 0; font-size: 15px; color: var(--t-text); }
.scr-btn {
  width: 100%; margin-top: 6px; padding: 13px; background: var(--t-accent); color: var(--t-on-acc);
  border: 0; border-radius: 13px; font-family: inherit; font-size: 15px; font-weight: 600; cursor: default;
}

/* ── itinerary: the day list, with ghosted numerals behind each row ── */
.day-list { list-style: none; margin: 0; padding: 0 0 0 20px; position: relative; }
.day-list::before {
  content: ""; position: absolute; left: 3px; top: 14px; bottom: 22px;
  width: 2px; background: color-mix(in srgb, var(--t-accent) 26%, transparent);
}
.day-row { position: relative; padding: 11px 0 12px; border-bottom: 1px solid var(--t-line); overflow: hidden; }
.day-row:last-child { border-bottom: 0; }
.day-row::before {
  content: ""; position: absolute; left: -20px; top: 20px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--t-bg); border: 2px solid var(--t-accent);
}
.day-row .ghost {
  position: absolute; right: -2px; top: 0;
  font-family: var(--f-disp); font-weight: 700; font-size: 46px; line-height: 1;
  color: color-mix(in srgb, var(--t-accent) 15%, transparent);
  pointer-events: none; user-select: none;
}
.day-row .dnum {
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--t-accent); display: block; margin-bottom: 3px;
}
.day-row .dttl { font-size: 15px; color: var(--t-text); font-weight: 600; line-height: 1.28; }
.day-row .dsub { font-size: 12.5px; color: var(--t-dim); margin-top: 2px; display: block; }
.day-row.is-next { background: color-mix(in srgb, var(--t-accent) 9%, transparent); border-radius: 12px; padding-inline: 11px; margin-inline: -11px; }

/* ── info rows: hotels, flights ── */
.info-row {
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start;
  padding: 11px 0; border-bottom: 1px solid var(--t-line);
}
.info-row > span:last-child { display: block; }
.info-row .main, .info-row .meta, .info-row .tag { display: block; }
.info-row:last-child { border-bottom: 0; }
.info-row .badge {
  flex: none; min-width: 46px; text-align: center; padding: 5px 7px; border-radius: 8px;
  background: color-mix(in srgb, var(--t-accent) 15%, transparent);
  color: var(--t-accent); font-size: 11px; font-weight: 700; letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
.info-row .main { font-size: 14.5px; color: var(--t-text); font-weight: 600; line-height: 1.3; }
.info-row .meta { font-size: 12.5px; color: var(--t-dim); margin-top: 2px; line-height: 1.4; }
.info-row .tag {
  display: inline-block; margin-top: 5px; padding: 2px 8px; border-radius: 999px;
  background: var(--t-accent); color: var(--t-on-acc); font-size: 10.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}

/* ── the taxi card: deliberately light, to be shown to a driver ── */
.taxi {
  background: #FFFFFF; border-radius: 20px; padding: 20px 18px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .55); border: 1px solid rgba(0, 0, 0, .08);
}
.taxi-label {
  margin: 0 0 10px; font-size: 10.5px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: #6B7180;
}
.taxi-addr {
  margin: 0 0 6px; font-family: var(--f-disp); font-weight: 700;
  font-size: 25px; line-height: 1.14; letter-spacing: -0.02em; color: #12141C;
}
.taxi-city { margin: 0 0 14px; font-size: 16px; color: #3C4252; }
.taxi-phone {
  margin: 0; padding-top: 13px; border-top: 1px solid rgba(0, 0, 0, .12);
  font-size: 15px; color: #12141C; font-variant-numeric: tabular-nums;
}
.taxi-note { margin: 14px 0 0; font-size: 12px; color: var(--t-dim); line-height: 1.45; }

/* ── guide: roster + headcount ── */
.roster-row { display: flex; gap: 11px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--t-line); }
.roster-row:last-child { border-bottom: 0; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: color-mix(in srgb, var(--t-accent) 20%, transparent);
  color: var(--t-accent); font-size: 12.5px; font-weight: 700;
}
.roster-row .nm { font-size: 14.5px; color: var(--t-text); font-weight: 600; }
/* The party line: a dim caption under the name, as the app renders it. */
.roster-row .pty { display: block; font-size: 12px; color: var(--t-dim); margin-top: 2px; }
.chips { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 3px; }
.chip {
  font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 999px;
  background: var(--t-surface); color: var(--t-dim); border: 1px solid var(--t-line);
}
.chip.care { color: var(--t-accent); border-color: color-mix(in srgb, var(--t-accent) 40%, transparent); }

.face-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-bottom: 14px; }
.face {
  aspect-ratio: 1; border-radius: 12px; display: grid; place-items: center;
  background: var(--t-surface); border: 1px solid var(--t-line);
  color: var(--t-dim); font-size: 12px; font-weight: 700;
}
.face.on { background: var(--t-accent); border-color: var(--t-accent); color: var(--t-on-acc); }
/* Headcount as the app actually lays it out: three tiles to a row, each an
   initials disc with the short name under it. Counted is a FILL, not a tint —
   a tint disappears in direct sun and a fill does not. */
.face-grid.g3 { grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.face.tile { aspect-ratio: auto; padding: 10px 4px 9px; gap: 5px; }
.face.tile i {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  font-style: normal; font-size: 12px; font-weight: 700;
  background: color-mix(in srgb, var(--t-text) 8%, var(--t-bg)); color: var(--t-text);
}
.face.tile.on i { background: color-mix(in srgb, var(--t-on-acc) 22%, transparent); color: var(--t-on-acc); }
.face.tile em { font-style: normal; font-size: 10.5px; font-weight: 700; }
.count-bar {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 13px 15px; border-radius: 14px;
  background: color-mix(in srgb, var(--t-accent) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--t-accent) 32%, transparent);
}
.count-bar b { font-size: 24px; font-weight: 700; color: var(--t-accent); font-variant-numeric: tabular-nums; }
.count-bar span { font-size: 13px; color: var(--t-text); }

/* ── receipts ── */
.seen-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--t-line); font-size: 14px; }
.seen-row:last-child { border-bottom: 0; }
.seen-row .who { color: var(--t-text); }
.seen-yes { color: var(--t-accent); font-size: 12px; font-weight: 700; }
.seen-no { color: var(--t-dim); font-size: 12px; font-weight: 600; }

/* ── guide: the app's toned Card, in the three status planes ──
   The soft fill is the engine's own rule — mix(tone, ground, .85) in
   shared/theme.ts, i.e. 15% of the tone over the screen ground. Danger takes
   the 2px border and a rung of lift, because red is the only alarming thing
   in the app and must never read as decoration. */
.scr-alert {
  border-radius: 18px; padding: 14px 16px; margin-bottom: 12px;
  background: color-mix(in srgb, var(--t-warn) 15%, var(--t-bg));
  border: 1px solid color-mix(in srgb, var(--t-warn) 40%, var(--t-bg));
}
.scr-alert.ok {
  background: color-mix(in srgb, var(--t-ok) 15%, var(--t-bg));
  border-color: color-mix(in srgb, var(--t-ok) 40%, var(--t-bg));
}
.scr-alert.bad {
  background: color-mix(in srgb, var(--t-bad) 15%, var(--t-bg));
  border: 2px solid var(--t-bad); box-shadow: var(--shadow-1);
}
.scr-alert .ey {
  margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--t-warn);
}
.scr-alert.ok .ey { color: var(--t-ok); }
.scr-alert.bad .ey { color: var(--t-bad); }
.scr-alert .hd {
  font-family: "Fraunces", Georgia, serif; font-weight: 700; font-size: 23px;
  line-height: 1.14; letter-spacing: -0.01em; color: var(--t-text); margin: 0;
}
/* The names after "2 missing:" drop to the title step — holding them at hero
   pushed the tap grid off the bottom of the screen. */
.scr-alert .hd span { font-size: 16px; font-weight: 600; }
.scr-alert .sub { font-size: 12.5px; color: var(--t-dim); line-height: 1.45; margin: 7px 0 0; }
/* The app's StatusLine: one bold sentence in the tone's own color. */
.scr-alert .line { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--t-warn); }
.scr-alert.ok .line { color: var(--t-ok); }
.scr-alert.bad .line { color: var(--t-bad); }
.scr-alert .num {
  font-size: 13.5px; font-weight: 600; color: var(--t-text); text-align: center;
  font-variant-numeric: tabular-nums; margin: 9px 0 0;
}

/* One name and its single honest status line — the receipts list and the
   locations list are both built out of this row. */
.res-row {
  background: var(--t-surface); border: 1px solid var(--t-line);
  border-radius: 14px; padding: 11px 14px; margin-bottom: 8px;
}
.res-row.warn {
  background: color-mix(in srgb, var(--t-warn) 15%, var(--t-bg));
  border-color: color-mix(in srgb, var(--t-warn) 40%, var(--t-bg));
}
.res-row .nm { font-size: 14.5px; font-weight: 700; color: var(--t-text); margin: 0; }
.res-row .st { font-size: 12px; color: var(--t-dim); line-height: 1.4; margin: 3px 0 0; }
.res-row.warn .st { color: var(--t-warn); font-weight: 700; }

/* The app's BigButton: filled accent, filled danger, and the danger outline
   the "Mark handled" control uses. */
.scr-bigbtn {
  display: block; width: 100%; text-align: center; border-radius: 14px;
  border: 2px solid var(--t-accent); background: var(--t-accent); color: var(--t-on-acc);
  font-family: inherit; font-weight: 700; font-size: 13.5px; padding: 11px 8px; margin-top: 12px;
}
.scr-bigbtn.bad { background: var(--t-bad); border-color: var(--t-bad); color: #FFFFFF; }
.scr-bigbtn.bad-line { background: transparent; border-color: var(--t-bad); color: var(--t-bad); }

/* "Updated 2:14 PM (1 minute ago)" — offline honesty, at the top of the screen
   it is about. */
.scr-stamp { font-size: 11.5px; color: var(--t-dim); line-height: 1.45; margin: 0 0 12px; }

/* The guide's Locations map. A stand-in for the live tiles — the marketing
   site ships no map library — drawn so the SHAPE of the screen reads: last
   known pins, one of them red, and the stamp that says how old they are. */
.map-mock {
  position: relative; height: 76px; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--t-line); margin-bottom: 12px;
  background:
    linear-gradient(114deg, transparent 44%, color-mix(in srgb, var(--t-text) 7%, transparent) 44% 47.5%, transparent 47.5%),
    linear-gradient(22deg, transparent 60%, color-mix(in srgb, var(--t-text) 6%, transparent) 60% 63%, transparent 63%),
    linear-gradient(90deg, transparent 26%, color-mix(in srgb, var(--t-text) 5%, transparent) 26% 29%, transparent 29%),
    color-mix(in srgb, var(--t-accent) 8%, var(--t-surface));
}
.map-mock .pin {
  position: absolute; width: 27px; height: 27px; border-radius: 50%;
  display: grid; place-items: center; font-size: 10.5px; font-weight: 700;
  background: var(--t-accent); color: var(--t-on-acc);
  border: 2px solid var(--t-surface); box-shadow: 0 2px 6px rgba(0, 0, 0, .26);
}
.map-mock .pin.sos { background: var(--t-bad); color: #FFFFFF; width: 31px; height: 31px; }

/* ── the real app's shared furniture ─────────────────────────── */

/* Centered "Updated N minutes ago" pill, exactly as every tab screen. */
.scr-pill {
  display: flex; align-items: center; gap: 7px; width: fit-content; margin: 0 auto 14px;
  background: var(--t-surface); border: 1px solid var(--t-line); border-radius: 999px;
  padding: 6px 13px 6px 7px; font-size: 12px; font-weight: 600; color: var(--t-text);
}
.scr-pill .tick {
  width: 16px; height: 16px; border-radius: 50%; background: var(--t-accent);
  color: var(--t-on-acc); display: grid; place-items: center; font-size: 10px; font-weight: 800;
}

/* "‹ Back  Day 3" header on drill-in screens. */
.scr-back { display: flex; align-items: baseline; gap: 8px; margin: 0 0 16px; font-size: 15px; }
.scr-back .bk { color: var(--t-accent); font-weight: 700; }
.scr-back b { color: var(--t-text); font-weight: 700; }

/* Big serif display + the washed ghost numeral behind it. */
.scr-display {
  font-family: "Fraunces", Georgia, serif; font-weight: 700; color: var(--t-text);
  font-size: 26px; line-height: 1.06; letter-spacing: -0.01em; margin: 0 0 8px;
}
.scr-sub { font-size: 13.5px; color: var(--t-dim); line-height: 1.45; margin: 0 0 16px; }
.ghost-num {
  position: absolute; top: -6px; right: 2px; font-family: "Fraunces", Georgia, serif;
  font-weight: 700; font-size: 74px; line-height: 1; pointer-events: none;
  color: color-mix(in srgb, var(--t-accent) 26%, var(--t-bg));
}

/* The featured card with the lavender wash (Today countdown, Day 1). */
.scr-hero-card {
  position: relative; overflow: hidden; border-radius: 20px; background: var(--t-surface);
  border: 1px solid var(--t-line); padding: 40px 16px 16px; margin-bottom: 12px;
  background-image: radial-gradient(120% 90% at 78% -12%, color-mix(in srgb, var(--t-accent) 26%, transparent), transparent 62%);
}
.scr-hero-card .scr-kicker { margin-bottom: 4px; }
.scr-hero-card .scr-display { margin-bottom: 2px; }
.scr-hero-card .when { font-size: 13px; color: var(--t-dim); margin: 0; }
.scr-count { display: flex; align-items: baseline; gap: 8px; margin: 0 0 6px; }
.scr-count b {
  font-family: "Fraunces", Georgia, serif; font-weight: 700; font-size: 44px; line-height: 1;
  color: var(--t-text);
}
.scr-count span { font-size: 14px; font-weight: 600; color: var(--t-text); }

/* Timeline: icon chips on a hairline spine, white event cards. */
.scr-tl { display: grid; gap: 10px; position: relative; }
.scr-tl::before {
  content: ""; position: absolute; left: 15px; top: 8px; bottom: 8px; width: 2px;
  background: color-mix(in srgb, var(--t-accent) 30%, var(--t-bg));
}
.scr-tl-row { display: grid; grid-template-columns: 32px 1fr; gap: 10px; position: relative; }
.tl-chip {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  font-size: 14px; background: var(--t-surface); border: 1px solid var(--t-line);
  position: relative; z-index: 1; align-self: start; margin-top: 8px;
}
.tl-chip.walk { background: #E2EBE3; }
.tl-chip.meal { background: #EFE7D8; }
.tl-chip.num {
  background: var(--t-surface); color: var(--t-text); font-weight: 700; font-size: 13px;
  border-color: color-mix(in srgb, var(--t-accent) 45%, var(--t-bg));
}
.scr-event {
  background: var(--t-surface); border: 1px solid var(--t-line); border-radius: 16px;
  padding: 12px 14px;
}
.ev-time {
  font-family: "Fraunces", Georgia, serif; font-weight: 700; font-size: 19px;
  color: var(--t-accent); margin: 0 0 2px;
}
.ev-title { font-size: 14.5px; font-weight: 700; color: var(--t-text); margin: 0 0 1px; }
.ev-meta { font-size: 12px; color: var(--t-dim); margin: 0; }
.ev-body { font-size: 12.5px; color: var(--t-text); opacity: .85; line-height: 1.4; margin: 6px 0 0; }
.scr-event.row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.scr-event.row .ev-title { margin: 0; }
.scr-event .chev { color: var(--t-dim); font-size: 16px; }
.scr-event .ev-date { font-size: 12px; color: var(--t-dim); margin: 2px 0 0; }

/* NEXT STEPS list card (Today screen). */
.scr-steps { background: var(--t-surface); border: 1px solid var(--t-line); border-radius: 20px; padding: 14px 16px; }
.scr-steps .scr-kicker { margin-bottom: 10px; }
.step-row { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 11px; font-size: 13.5px; color: var(--t-text); line-height: 1.35; }
.step-row:last-child { margin-bottom: 0; }
.step-row .ic { color: var(--t-accent); flex: 0 0 auto; width: 18px; display: grid; place-items: center; margin-top: 1px; }

/* The tab bar: four tabs, and a fifth ("Group") while the office has the
   group room on. Columns come from the tabs themselves, so five share the
   width equally and a label never wraps. */
.scr-tabbar {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; align-items: end;
  margin: 16px -16px -20px; padding: 10px 6px 14px; background: var(--t-surface);
  border-top: 1px solid var(--t-line);
}
.tab { display: grid; justify-items: center; gap: 3px; font-size: 10.5px; font-weight: 600; color: var(--t-dim); position: relative; white-space: nowrap; }
.tab .tic { display: block; }
.tab.on { color: var(--t-accent); font-weight: 700; }
.tab.on .tic { background: var(--t-accent); color: var(--t-on-acc); border-radius: 999px; padding: 4px 12px; box-sizing: content-box; }
.tab .bdg {
  position: absolute; top: -5px; right: 22%; background: #D2373C; color: #fff;
  font-size: 9px; font-weight: 800; border-radius: 999px; padding: 1px 5px;
}
/* The Group tab's unread count is the accent family, never red: red belongs
   to urgent messages, and chatter must never look like one. */
.tab .bdg.acc { background: var(--t-accent); color: var(--t-on-acc); }

/* Packing progress card. */
.scr-prog { background: var(--t-surface); border: 1px solid var(--t-line); border-radius: 20px; padding: 14px 16px 16px; margin-bottom: 14px; }
.scr-prog .n { font-family: "Fraunces", Georgia, serif; font-weight: 700; font-size: 24px; color: var(--t-text); margin: 0 0 10px; }
.scr-prog .bar { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--t-text) 10%, var(--t-bg)); overflow: hidden; }
.scr-prog .bar i { display: block; height: 100%; width: 60%; background: var(--t-accent); border-radius: 999px; }

/* Packing item cards (rounded-square checkbox, note under the name). */
.pack-card {
  display: grid; grid-template-columns: 26px 1fr; gap: 11px; background: var(--t-surface);
  border: 1px solid var(--t-line); border-radius: 16px; padding: 12px 14px; margin-bottom: 9px;
}
.pack-card .box {
  width: 24px; height: 24px; border-radius: 8px; border: 2px solid color-mix(in srgb, var(--t-dim) 55%, var(--t-bg));
  display: grid; place-items: center; font-size: 13px; font-weight: 800; margin-top: 1px;
}
.pack-card.done .box { background: var(--t-accent); border-color: var(--t-accent); color: var(--t-on-acc); }
.pack-card .nm { font-size: 14px; font-weight: 700; color: var(--t-text); }
.pack-card .nt { font-size: 12px; color: var(--t-dim); line-height: 1.4; margin-top: 2px; }

/* The taxi card — the app's most deliberate screen. */
.taxi-card {
  background: #FFFFFF; border: 1px solid var(--t-line); border-radius: 20px;
  padding: 18px 16px 16px; text-align: center; color: #17181C;
}
.taxi-card .agency { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; color: #6E7482; margin: 0 0 10px; }
.taxi-card .ask { font-size: 13px; color: #6E7482; margin: 0 0 8px; }
.taxi-card .addr {
  font-family: "Fraunces", Georgia, serif; font-weight: 700; font-size: 21px; line-height: 1.15;
  color: #17181C; margin: 0 0 12px;
}
.taxi-card hr { border: 0; border-top: 1px solid rgba(23,24,28,.1); margin: 0 8px 12px; }
.taxi-card .hotel { font-family: "Fraunces", Georgia, serif; font-weight: 700; font-size: 17px; margin: 0 0 3px; }
.taxi-card .sub { font-size: 12.5px; color: #6E7482; margin: 0 0 6px; }
.taxi-card .ph { font-size: 13px; font-weight: 600; color: #3C4252; margin: 0; }
.scr-ghostbtn {
  display: block; width: 100%; margin-top: 12px; text-align: center; border-radius: 14px;
  border: 2px solid var(--t-accent); color: var(--t-accent); font-weight: 700; font-size: 13.5px;
  padding: 10px 8px; background: transparent;
}

/* Country: converter card. */
.scr-conv {
  background: color-mix(in srgb, var(--t-accent) 14%, var(--t-bg));
  border: 1px solid color-mix(in srgb, var(--t-accent) 32%, var(--t-bg));
  border-radius: 20px; padding: 14px; margin-bottom: 12px;
}
.scr-conv .h { font-family: "Fraunces", Georgia, serif; font-weight: 700; font-size: 19px; color: var(--t-text); margin: 0 0 10px; }
.scr-seg { display: grid; grid-template-columns: 1fr 1fr; background: color-mix(in srgb, var(--t-text) 8%, var(--t-bg)); border-radius: 12px; padding: 3px; margin-bottom: 10px; font-size: 11.5px; font-weight: 700; }
.scr-seg span { text-align: center; padding: 7px 4px; border-radius: 10px; color: var(--t-text); }
.scr-seg .on { background: var(--t-accent); color: var(--t-on-acc); }
.scr-input { background: var(--t-surface); border-radius: 12px; padding: 11px 12px; font-size: 17px; font-weight: 600; color: var(--t-dim); margin-bottom: 10px; }
.scr-conv .eg { font-size: 11.5px; color: var(--t-dim); margin: 0 0 2px; }
.scr-conv .res { font-family: "Fraunces", Georgia, serif; font-weight: 700; font-size: 22px; color: var(--t-accent); margin: 0 0 4px; }
.scr-conv .rate { font-size: 11.5px; color: var(--t-dim); margin: 0; }
.scr-note-card { background: var(--t-surface); border: 1px solid var(--t-line); border-radius: 20px; padding: 13px 15px; margin-bottom: 10px; }
.scr-note-card .scr-kicker { margin-bottom: 6px; }
.scr-note-card p { margin: 0; font-size: 13px; color: var(--t-text); line-height: 1.45; }

/* Inbox message card: accent stripe on the left while unread. */
.msg-card {
  position: relative; background: var(--t-surface); border: 1px solid var(--t-line);
  border-radius: 16px; padding: 13px 14px 12px 16px; margin-bottom: 10px; overflow: hidden;
}
.msg-card.unread::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--t-accent); }
.msg-card .ttl { font-size: 14.5px; font-weight: 700; color: var(--t-text); margin: 0 0 4px; }
.msg-card .prev { font-size: 13px; color: var(--t-dim); line-height: 1.4; margin: 0 0 7px; }
.msg-card .when { font-size: 12px; color: var(--t-dim); margin: 0; }
.msg-card .when b { color: var(--t-accent); font-weight: 700; }

/* ── country / packing / messages ── */
.mini-row { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--t-line); font-size: 14px; }
.mini-row span { color: var(--t-dim); }
.mini-row strong { color: var(--t-text); font-weight: 600; }
.phrase { padding: 9px 0; border-bottom: 1px solid var(--t-line); }
.phrase b { display: block; color: var(--t-accent); font-size: 14.5px; font-weight: 600; }
.phrase span { color: var(--t-dim); font-size: 13px; }
.pack { display: flex; align-items: center; gap: 11px; padding: 9px 0; font-size: 14.5px; color: var(--t-text); border-bottom: 1px solid var(--t-line); }
.pack .box {
  width: 21px; height: 21px; border-radius: 6px; flex: none;
  border: 2px solid color-mix(in srgb, var(--t-dim) 60%, transparent);
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
}
.pack.done .box { background: var(--t-accent); border-color: var(--t-accent); color: var(--t-on-acc); }
.pack.done { color: var(--t-dim); text-decoration: line-through; }
.pack-note { margin: 14px 0 0; font-size: 12px; color: var(--t-dim); line-height: 1.4; }

/* Live flight status mock: the app's journey spine — a rule runs from the
   departure node through the flight row to the arrival node. */
.jny { display: grid; margin-top: 4px; }
.jny-row { display: grid; grid-template-columns: 22px 1fr; gap: 10px; position: relative; padding-bottom: 14px; }
.jny-row::before { content: ""; position: absolute; left: 10px; top: 0; bottom: 0; width: 2px; background: #C9D2F3; }
.jny-row.first::before { top: 9px; }
.jny-row.last { padding-bottom: 0; }
.jny-row.last::before { bottom: auto; height: 9px; }
.jny-node { width: 16px; height: 16px; border-radius: 50%; background: var(--t-accent); justify-self: center; margin-top: 2px; position: relative; z-index: 1; box-sizing: border-box; }
.jny-node.arrive { background: var(--t-surface); border: 3px solid var(--t-accent); }
.jny-node.seg { width: 8px; height: 8px; background: #C9D2F3; margin-top: 7px; }
.jny-body p { margin: 0; }
.jny-label { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--t-dim); }
.jny-airport { font-family: "Fraunces", Georgia, serif; font-weight: 700; font-size: 22px; color: var(--t-text); line-height: 1.15; margin: 1px 0 3px !important; }
.jny-time { font-size: 14px; font-weight: 700; color: var(--t-text); font-variant-numeric: tabular-nums; line-height: 1.35; }
.jny-time.was { font-weight: 500; color: var(--t-dim); text-decoration: line-through; }
.jny-time.now { color: #A85A00; }
.jny-detail { font-size: 12.5px; color: var(--t-dim); margin-top: 3px !important; }
.jny-stamp { font-size: 12px; color: var(--t-dim); line-height: 1.4; margin-top: 8px !important; }
.jny-flight { display: flex; align-items: center; gap: 7px; min-height: 22px; }
.jny-plane { color: var(--t-accent); font-size: 15px; line-height: 1; }
.jny-num { font-size: 13.5px; font-weight: 600; color: var(--t-text); flex: 1; font-variant-numeric: tabular-nums; }
.chip.warn { color: #A85A00; background: #FBF1E3; border-color: #EBD3B0; }
.msg { background: var(--t-surface); border: 1px solid var(--t-line); border-radius: 13px; padding: 12px 14px; margin-bottom: 10px; }
.msg.unread { border-color: color-mix(in srgb, var(--t-accent) 45%, transparent); }
.msg-meta { margin: 0 0 5px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--t-accent); }
.msg-body { margin: 0; font-size: 14px; color: var(--t-text); line-height: 1.42; }

/* ── the Group tab (mobile/app/(tabs)/group.tsx, src/components/room.tsx) ──
   Messages grammar at mockup size: other people on the left behind an
   initials disc (the guide's disc filled), you on the right in the accent
   tint, the name above the words and the time under them, and the pill
   composer held under the thread the way the app pins it. Theme variables
   only, so a palette repaints it like every other mockup. */
.phone.sm .phone-screen.grp { display: flex; flex-direction: column; padding-bottom: 0; }
.phone.sm .phone-screen.grp::after { display: none; }
.grp-thread { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.grp .scr-pill { margin-bottom: 7px; }
.grp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 3px; }
.grp-head .scr-display { font-size: 23px; margin: 0; }
.grp-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px 3px 7px; border-radius: 999px;
  font-size: 11px; font-weight: 600; color: var(--t-accent);
  background: color-mix(in srgb, var(--t-accent) 12%, var(--t-bg));
  border: 1px solid color-mix(in srgb, var(--t-accent) 32%, transparent);
}
.grp-sub { font-size: 12px; color: var(--t-dim); line-height: 1.4; margin: 0 0 8px; }
.grp-strip {
  display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 12px;
  background: color-mix(in srgb, var(--t-accent) 12%, var(--t-bg));
}
.grp-strip-body { display: grid; gap: 1px; min-width: 0; }
.grp-strip .ey { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--t-accent); }
.grp-strip .bd { font-size: 12.5px; font-weight: 600; color: var(--t-text); line-height: 1.3; }
.grp-disc {
  flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-size: 9.5px; font-weight: 700; letter-spacing: .02em; color: var(--t-accent);
  background: color-mix(in srgb, var(--t-text) 8%, var(--t-bg));
}
.grp-disc.staff { background: var(--t-accent); color: var(--t-on-acc); }
.grp-day { text-align: center; margin: 7px 0 0; }
.grp-day span {
  display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 10.5px; font-weight: 600;
  color: var(--t-dim); background: color-mix(in srgb, var(--t-text) 8%, var(--t-bg));
}
.grp-row { display: flex; align-items: flex-start; gap: 6px; margin-top: 6px; }
.grp-row.own { justify-content: flex-end; }
.grp-bub { max-width: 90%; min-width: 0; background: var(--t-surface); border-radius: 14px 14px 14px 4px; padding: 5px 10px 4px; }
.grp-row.own .grp-bub { background: color-mix(in srgb, var(--t-accent) 14%, var(--t-bg)); border-radius: 14px 14px 4px 14px; }
.grp-bub p { margin: 0; }
.grp-bub .nm { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: 11px; font-weight: 700; color: var(--t-accent); margin-bottom: 2px; }
.grp-bub .tx { font-size: 12.5px; color: var(--t-text); line-height: 1.35; }
.grp-bub .ft { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 2px; font-size: 10.5px; }
.grp-bub .act { font-weight: 700; color: var(--t-accent); }
.grp-bub .at { color: var(--t-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* On the accent tint the dim grey falls under 4.5:1, so your own bubble's
   small words take a stronger mix of the text colour. */
.grp-row.own .act, .grp-row.own .at { color: color-mix(in srgb, var(--t-text) 74%, var(--t-bg)); }
.grp-row.own .act { font-weight: 600; }
.grp-mark { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; }
.grp-badge {
  font-size: 9px; font-weight: 700; letter-spacing: .06em; padding: 1px 6px; border-radius: 999px;
  color: var(--t-accent); background: color-mix(in srgb, var(--t-accent) 14%, var(--t-bg));
}
.grp-bub .grp-quote {
  display: grid; margin: 1px 0 3px; padding: 3px 8px; border-left: 3px solid var(--t-accent); border-radius: 6px;
  background: color-mix(in srgb, var(--t-text) 7%, transparent); font-size: 11px; line-height: 1.35;
}
.grp-quote b { color: var(--t-accent); font-weight: 700; }
.grp-quote span { color: var(--t-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grp-compose {
  flex: none; display: flex; align-items: center; gap: 6px; margin: 2px -16px 0; padding: 7px 10px 10px;
  background: var(--t-bg); border-top: 1px solid var(--t-line);
}
.grp-input {
  flex: 1; min-width: 0; padding: 7px 12px; border-radius: 16px; background: var(--t-surface);
  border: 1px solid var(--t-line); font-size: 11.5px; color: var(--t-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.grp-send { flex: none; padding: 7px 13px; border-radius: 999px; background: var(--t-accent); color: var(--t-on-acc); font-size: 12.5px; font-weight: 700; }

/* ───────── mockup galleries ───────── */
.phones { display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); gap: 34px 26px; margin-top: 46px; justify-items: center; }
.phone-fig { margin: 0; display: grid; gap: 15px; justify-items: center; max-width: 330px; }
.phone-fig figcaption { color: var(--dim); font-size: 14.5px; text-align: center; line-height: 1.5; }
.phone-fig figcaption b { color: var(--text); font-weight: 600; display: block; margin-bottom: 2px; }

/* feature spotlight — one big mockup beside prose */
.spotlight { display: grid; grid-template-columns: auto 1fr; gap: 56px; align-items: center; margin-top: 44px; }
.spotlight.flip { grid-template-columns: 1fr auto; }
.spotlight.flip .spot-copy { order: -1; }
@media (max-width: 900px) {
  .spotlight, .spotlight.flip { grid-template-columns: 1fr; gap: 34px; justify-items: center; }
  .spotlight .spot-copy, .spotlight.flip .spot-copy { order: 0; justify-self: start; }
}
.spot-copy .body { margin-bottom: 14px; }
.spot-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.spot-list li { color: var(--dim); font-size: 15.5px; line-height: 1.5; padding-left: 26px; position: relative; }
.spot-list li::before { content: ""; position: absolute; left: 0; top: 10px; width: 13px; height: 2px; border-radius: 2px; background: var(--accent); }
.spot-list b { color: var(--text); font-weight: 600; }

/* ───────── white-label demo ───────── */
.swatches { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.sw {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--raised); color: var(--dim);
  border: 1px solid var(--line); border-radius: 999px;
  /* 44px floor: this is the page's main interactive control, on a site selling
     a product whose own standard is a 48–60pt target. */
  min-height: 44px;
  padding: 9px 18px 9px 12px; font-family: inherit; font-size: 14.5px; font-weight: 500;
  cursor: pointer; transition: border-color .16s ease, color .16s ease, background .16s ease;
}
.sw i { width: 15px; height: 15px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }
.sw:hover { color: var(--text); }
.sw[aria-pressed="true"] { color: var(--text); border-color: var(--accent); background: var(--accent-wash); font-weight: 600; }
.sw.is-default i { background: linear-gradient(135deg, #BAC6F7 50%, #2645C5 50%); }
.sw-note { color: var(--dim); font-size: 14.5px; max-width: 68ch; margin: 0 0 36px; }
.sw-note b { color: var(--text); font-weight: 600; }

.brand-demo { display: grid; grid-template-columns: auto 1fr; gap: 52px; align-items: center; }
.brand-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 17px; }
.brand-points li { color: var(--dim); font-size: 16px; line-height: 1.55; padding-left: 26px; position: relative; }
.brand-points li::before { content: ""; position: absolute; left: 0; top: 11px; width: 13px; height: 2px; border-radius: 2px; background: var(--accent); }
.brand-points b { color: var(--text); font-weight: 600; }
@media (max-width: 900px) {
  .brand-demo { grid-template-columns: 1fr; gap: 34px; justify-items: center; }
  .brand-points { justify-self: start; }
}

/* ───────── steps ───────── */
.steps { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; }
.steps li { position: relative; padding-top: 22px; border-top: 2px solid var(--line); }
.step-n {
  position: absolute; top: -17px; left: 0; width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent); color: var(--on-accent); display: grid; place-items: center;
  font-weight: 700; font-size: 15px;
}
.steps h3 { margin: 16px 0 8px; font-size: 19px; font-weight: 600; letter-spacing: -0.012em; }
.steps p { margin: 0; color: var(--dim); font-size: 15.5px; }

/* ───────── try it on your phone ─────────
   The one block on the page that asks for something other than a signup: a
   real join code on the demo agency, the two store links, and the /j/ link
   that does the store-picking for the visitor. The code is set at the join
   page's size because it is read off one screen and typed into a phone. */
.try-inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
@media (max-width: 900px) { .try-inner { grid-template-columns: 1fr; gap: 30px; } }
.try-card {
  background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 28px 28px 26px; text-align: center; box-shadow: var(--shadow-2);
}
@media (max-width: 420px) { .try-card { padding: 24px 18px 22px; } }
.try-label {
  margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--dim);
}
.try-code {
  margin: 0 0 20px; font-size: clamp(42px, 12vw, 56px); font-weight: 700; letter-spacing: .14em;
  color: var(--accent); font-variant-numeric: tabular-nums; line-height: 1.1;
  /* the tracking leaves a trailing gap; nudge the run back to centre */
  padding-left: .14em;
}
.try-stores { display: grid; gap: 10px; margin-bottom: 16px; }
.try-stores .btn { width: 100%; min-height: 52px; font-size: 17px; }
.try-fine { margin: 0; font-size: 14.5px; color: var(--dim); line-height: 1.55; }
.try-fine a { color: var(--accent); font-weight: 600; }

/* ───────── pricing ───────── */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(276px, 1fr)); gap: 20px; margin-top: 42px; }
.plan {
  background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 30px 28px 32px; display: flex; flex-direction: column; box-shadow: var(--shadow-1);
}
.plan.featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow-2); position: relative; }
.plan-tag {
  position: absolute; top: -12px; left: 28px; background: var(--accent); color: var(--on-accent);
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px;
}
.plan h3 { margin: 0 0 10px; font-size: 20px; font-weight: 600; }
.price { margin: 0 0 22px; display: flex; align-items: baseline; gap: 5px; }
.price b { font-size: 38px; font-weight: 700; letter-spacing: -0.03em; color: var(--text); font-variant-numeric: tabular-nums; }
.price span { color: var(--dim); font-size: 16px; }
.plan ul { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 11px; flex: 1; }
.plan li { color: var(--dim); font-size: 15.5px; position: relative; padding-left: 25px; line-height: 1.45; }
.plan li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }

/* ── monthly / annual ──
   Two pressed-state buttons. The section OPENS on annual: index.html ships
   #pricing with .is-annual already on it and the Annual button pressed, and
   site.js flips the class on a press. The rules below swap which price row
   each plan shows; aria-pressed carries the state to a screen reader. Both
   cadences are ALSO written out in the footnote under the plans, so with
   script off the page still says every number — the buttons are a
   convenience, never the only copy. */
.bill-toggle {
  display: inline-flex; gap: 4px; padding: 4px; margin: 0 0 6px;
  background: var(--raised); border: 1px solid var(--line); border-radius: 999px;
}
.bill-opt {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 18px;
  border: 0; border-radius: 999px; background: transparent; color: var(--dim);
  font-family: inherit; font-size: 15.5px; font-weight: 600; cursor: pointer;
  transition: background .16s ease, color .16s ease;
}
.bill-opt:hover { color: var(--text); }
.bill-opt[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.bill-save {
  font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; background: var(--accent-wash); color: var(--accent);
}
.bill-opt[aria-pressed="true"] .bill-save { background: rgba(255, 255, 255, .2); color: var(--on-accent); }
.price-m, .price-y { display: flex; align-items: baseline; gap: 5px; }
.price-y { display: none; }
.is-annual .price-m { display: none; }
.is-annual .price-y { display: flex; }
/* The one line under the price: what the number means in that state. */
.price-sub { margin: -14px 0 22px; font-size: 14px; color: var(--dim); line-height: 1.45; }
.price-sub .ps-y { display: none; }
.is-annual .price-sub .ps-m { display: none; }
.is-annual .price-sub .ps-y { display: inline; }

/* ───────── form ───────── */
.form-wrap { display: grid; grid-template-columns: .9fr 1.1fr; gap: 58px; align-items: start; }
@media (max-width: 900px) { .form-wrap { grid-template-columns: 1fr; gap: 36px; } }
.form {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  background: var(--raised); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 30px; box-shadow: var(--shadow-2);
}
@media (max-width: 560px) { .form { grid-template-columns: 1fr; padding: 22px; } }
.field { display: grid; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 14.5px; font-weight: 600; color: var(--text); }
.field .opt { color: var(--dim); font-weight: 400; }
.field input, .field select, .field textarea {
  font-family: inherit; font-size: 16px; color: var(--text);
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 12px 14px; width: 100%;
  transition: border-color .16s ease, background .16s ease;
}
.field textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.field input[aria-invalid="true"] { border-color: #C2453B; }
.field select {
  appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--dim) 50%), linear-gradient(135deg, var(--dim) 50%, transparent 50%);
  background-position: calc(100% - 19px) 21px, calc(100% - 14px) 21px;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { margin: 14px 0 0; font-size: 15px; min-height: 22px; }
.form-note.ok { color: var(--accent-deep); font-weight: 600; }
.form-note.err { color: #C2453B; }
.form-fine { margin: 10px 0 0; font-size: 13.5px; color: var(--dim); line-height: 1.5; }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

/* ───────── footer ───────── */
.footer { border-top: 1px solid var(--line-soft); background: var(--bg-2); padding: 54px 0 30px; }
.footer-inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; }
@media (max-width: 760px) { .footer-inner { grid-template-columns: 1fr; gap: 28px; } }
.footer-line { color: var(--dim); font-size: 14.5px; margin: 16px 0 0; max-width: 52ch; line-height: 1.6; }
.footer-line em { font-style: italic; color: var(--text); }
.footer-links { display: grid; gap: 2px; align-content: start; }
.footer-links a {
  color: var(--dim); text-decoration: none; font-size: 15px;
  /* Footer rows sat 24px tall and close together — easy to mis-tap on a phone. */
  display: inline-flex; align-items: center; min-height: 44px;
}
.footer-links a:hover { color: var(--accent); }
/* "Cookie choices" — the <button> site.js adds to this column on every page.
   Its rules live here rather than in consent.css because that file is only
   fetched when the bar itself is about to show. */
.cc-footer-btn {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0;
  background: none; border: 0; font-family: inherit; font-size: 15px;
  text-align: left; color: var(--dim); cursor: pointer;
}
.cc-footer-btn:hover { color: var(--accent); }
.cc-footer-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.footer-base {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line-soft);
  color: var(--dim); font-size: 13.5px;
}
/* "Cordelle is made by Fireside WiFi LLC in Salt Lake City, Utah." → /about.
   Underlined, not just coloured: BRAND.md's rule for links on this palette. */
.footer-base a { color: var(--dim); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.footer-base a:hover { color: var(--accent); text-decoration-color: currentColor; }

/* ============================================================
   CONCISE HOMEPAGE + FEATURE PAGES — requested as styles.css?v=20 by
   index.html, features/guides.html and features/office.html only.

   ADDITIVE ONLY. Nothing above this line was edited, so the ~36 pages still
   on ?v=18 render exactly as before even through a stale 4h cache. Every
   size bump for existing components is scoped under `.concise` (a class on
   <main> of the three new-version pages), never applied globally.
   ============================================================ */

/* The buyer's own question, as an eyebrow. Sentence case, no tracking. */
.q { font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--accent); margin: 0 0 12px; }

/* Hero: a dated launch line, then four answers that double as the page's
   table of contents. Links stay underlined (BRAND.md: a link needs an
   underline or a weight, not just a colour). */
.hero-new { font-size: 16px; line-height: 1.5; color: var(--dim); margin: 0 0 20px; max-width: 58ch; }
.hero-new .pro-pill { margin: 0 8px 0 0; vertical-align: 1px; }
.hero-new a { color: var(--accent); font-weight: 600; }
.hero-answers { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hero-answers li { font-size: 17px; line-height: 1.45; color: var(--dim); padding-left: 26px; position: relative; }
.hero-answers li::before {
  content: ""; position: absolute; left: 0; top: 12px;
  width: 13px; height: 2px; border-radius: 2px; background: var(--accent);
}
.hero-answers strong { color: var(--text); font-weight: 600; }
/* A 44px hit area without adding 44px of line height. */
.hero-answers a { color: var(--accent); font-weight: 600; padding-block: 11px; margin-block: -11px; }

/* Big checklists: 17px, and two columns from 900px up. */
.checks.big li { font-size: 17px; line-height: 1.5; }
.checks.big b { font-weight: 600; }
.checks.big a { color: var(--accent); }
@media (min-width: 900px) {
  .checks.two { grid-template-columns: 1fr 1fr; column-gap: 44px; }
  .checks.two li:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
}
.checks-block { margin-top: 48px; }

/* One copy cell beside two phones. Three across from 1000px, so an anchored
   block (#safety, #office-messages, #group-chat) sits beside its phones; below
   that the copy spans the whole row directly under them — never a stray 2+1. */
.phones.with-copy { align-items: start; }
.phones.with-copy figcaption { font-size: 16px; }
.with-copy-cell { grid-column: 1 / -1; justify-self: stretch; max-width: 68ch; }
@media (min-width: 1000px) {
  .phones.with-copy { grid-template-columns: repeat(2, 286px) minmax(0, 1fr); column-gap: 30px; }
  .with-copy-cell { grid-column: auto; max-width: none; }
}
.with-copy-cell > div + div { margin-top: 30px; }
.with-copy-cell .h3 { font-size: 21px; }
.with-copy-cell .body { font-size: 17px; }

/* Exactly two uses: the SOS, and "we build your first departure". */
.callout {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 20px;
  padding: 24px 26px 26px; font-size: 17px; line-height: 1.55;
}
.band:not(.alt) .callout { background: var(--surface); }
.callout h3 { margin: 0 0 10px; font-size: 20px; font-weight: 600; letter-spacing: -0.012em; }
.callout p { margin: 0 0 12px; color: var(--dim); font-size: 17px; }
.callout p:last-child { margin-bottom: 0; }
.callout b { color: var(--text); font-weight: 600; }
.callout em { color: var(--text); }
.callout a { color: var(--accent); }
.callout-block { margin-top: 40px; max-width: 76ch; }

.note-block { margin-top: 56px; padding-top: 34px; border-top: 1px solid var(--line); max-width: 68ch; }
.note-block .body { font-size: 17px; }

/* Depth by visible link, never by accordion or tab. */
.more-row { margin: 36px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.more-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-size: 18px; font-weight: 600; color: var(--accent);
  text-decoration: underline; text-underline-offset: 4px;
}
.more-link:hover { color: var(--accent-deep); }
.in-detail { margin-top: 10px; font-size: 17px; }
.steps-head { margin-top: 44px; }
.api-note { margin-top: 36px; font-size: 17px; max-width: 70ch; }
.fine-head { margin-top: 44px; }
.fine-print { max-width: 80ch; margin-top: 8px; }

/* Nothing on the three new-version pages reads below 16px outside a phone. */
.concise .try-fine,
.concise .sw-note,
.concise .form-fine,
.concise .plan li,
.concise .cap p,
.concise .stat span,
.concise .phone-fig figcaption { font-size: 16px; }
.concise .steps p { font-size: 17px; }

/* Feature pages: /features/guides and /features/office. */
.feature-head { padding: 72px 0 12px; }
.feature-head .lede { margin-bottom: 26px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; }
.block-gap { margin-top: 64px; }
.closing { text-align: left; }

/* Second pass, after the concise-v1 screenshots. */
/* 1440x900: the fourth hero answer (the price) starts inside the first screen. */
.concise .hero { padding-top: 50px; }
.concise .hero h1 { margin-bottom: 18px; }
.concise .hero .lede { margin-bottom: 24px; }
@media (min-width: 981px) { .concise .hero .lede { font-size: 18px; } }
.concise .hero-cta { margin-bottom: 22px; }
/* Three across, #group-chat sits under #office-messages: landing on it from the
   hero's launch line keeps both phones' tops in view instead of scrolling past them. */
@media (min-width: 1000px) { .with-copy-cell #group-chat { scroll-margin-top: 250px; } }
/* The moved steps' in-page link keeps the brand colour, never the UA's visited purple. */
.concise .steps a { color: var(--accent); }
/* Shorter plan lists no longer stretch their bullets to match Pro's height. */
.concise .plan ul { align-content: start; }

/* Third pass, after the reader, claims and ads reviews. */
/* Nothing a buyer reads in pricing or the form sits below 16px; the two pills stay small caps-style labels. */
.concise .price-sub,
.concise .field label,
.concise .form-note,
.concise .sw,
.concise .step-n { font-size: 16px; }
.concise .bill-save { font-size: 13px; }
.concise .plan-tag { font-size: 13.5px; }
/* The checklist starts under the lede, not centred against the taller phone. */
.concise .spotlight { align-items: start; }
.with-copy-cell .checks { margin-top: 4px; }

/* The cookie bar on the three v=20 pages: LAYOUT ONLY. Same copy, same two
   identical buttons, no type below 16px. consent.css loads after this file, so
   these selectors outrank it on specificity (body:has(> main.concise) > .cc),
   never on order. Browsers without :has() keep consent.css exactly. */
@media (min-width: 861px) and (min-height: 621px) {
  body:has(> main.concise) > .cc .cc-inner { padding: 14px 0 16px; gap: 12px 32px; }
  body:has(> main.concise) > .cc .cc-title { margin-bottom: 4px; font-size: 19px; }
  body:has(> main.concise) > .cc .cc-body { line-height: 1.45; max-width: 100ch; }
  body:has(> main.concise) > .cc .cc-body + .cc-body { margin-top: 6px; }
  body:has(> main.concise) > .cc .cc-actions { flex-direction: column; align-items: stretch; }
}
@media (max-width: 860px), (max-height: 620px) {
  body:has(> main.concise) > .cc .cc-inner { padding: 12px 0 10px; gap: 8px; }
  body:has(> main.concise) > .cc .cc-title { margin-bottom: 4px; }
  body:has(> main.concise) > .cc .cc-body { line-height: 1.45; }
  body:has(> main.concise) > .cc .cc-body + .cc-body { margin-top: 6px; }
  /* Side by side when both fit at 150px; both stack together when they don't, so they never differ. */
  body:has(> main.concise) > .cc .cc-actions { flex-direction: row; flex-wrap: wrap; padding-top: 8px; }
  body:has(> main.concise) > .cc .cc-btn { flex: 1 1 150px; width: auto; min-width: 0; padding-inline: 10px; }
}
.concise .bill-opt { font-size: 16px; }
.with-copy-cell .checks { gap: 8px; }
.with-copy-cell .checks li { padding-bottom: 8px; }
/* 981-1199px: the phone keeps its size, the copy gets the rest, so the four answers wrap less. */
@media (min-width: 981px) and (max-width: 1199px) {
  .concise .hero-inner { grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; }
}
/* Phones: less air above the eyebrow, so both hero buttons clear the cookie bar at 390x844. */
@media (max-width: 620px) { .concise .hero { padding-top: 34px; } }
@media (min-width: 981px) and (max-width: 1199px) {
  /* 1024x768: the price answer ends inside the first screen with the bar closed. */
  .concise .hero { padding-top: 26px; }
  .concise .hero-cta { margin-bottom: 16px; }
  .with-copy-cell > div + div { margin-top: 22px; }
}
@media (max-width: 620px) {
  .concise .hero { padding-top: 26px; }
  .concise .hero h1 { margin-bottom: 12px; }
  .concise .hero .lede { margin-bottom: 18px; }
  .concise .hero-cta { gap: 10px; }
}
@media (max-width: 860px), (max-height: 620px) {
  body:has(> main.concise) > .cc .cc-body { line-height: 1.42; }
}

/* ============================================================
   PLATFORM STORY — v21. Requested as styles.css?v=21 by index.html,
   features/office.html and features/website.html only.

   ADDITIVE ONLY: nothing above this line was edited, so every page still
   requesting ?v=20 renders as before through the cache window.

   The .browser frame is the desktop sibling of .phone: a chrome bar over
   a cropping screen, all CSS, aria-hidden with the words in a figcaption.
   Two skins, and the split IS the brand rule (docs/BRAND.md):
   — .browser.dash is the CORDELLE dashboard. Indigo only: every colour
     inside the screen comes from the site's own tokens, plus the fixed
     status hues the product pins regardless of palette (shared/theme.ts:
     success/warn/danger). Figtree only — the real dashboard is sans
     throughout; Fraunces belongs to tenant surfaces.
   — .browser.site is a TENANT surface. Every colour from the --t-*
     variables exactly like .phone; Fraunces allowed. Its CSS defaults are
     Cordelle's light pair — what an agency inherits before it brands
     itself, never a tenant preset. On index it carries data-theme-demo,
     so the #brand swatches repaint it together with the brand phone.
   ============================================================ */

.browser {
  width: 100%; max-width: 440px; flex: none;
  border: 1px solid rgba(0, 0, 0, .10); border-radius: 14px; overflow: hidden;
  box-shadow: var(--shadow-2); background: #FFFFFF;
}
.browser-bar {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  background: var(--bg-2); border-bottom: 1px solid var(--line-soft);
}
.browser-dots { flex: none; display: flex; gap: 5px; }
.browser-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(18, 20, 28, .18); }
.browser-url {
  flex: 1; min-width: 0; font-size: 11.5px; color: var(--dim); background: var(--surface);
  border: 1px solid var(--line-soft); border-radius: 999px; padding: 4px 12px;
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.browser-screen { padding: 14px 16px; position: relative; overflow: hidden; }
/* Whatever crops at the frame fades out like a window mid-scroll, exactly
   as .phone.sm's screen does. */
.browser-screen::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40px;
  background: linear-gradient(to bottom, transparent, #FFFFFF); pointer-events: none;
}
.browser.sm .browser-screen { height: 268px; }
.browser.md .browser-screen { height: 316px; }
.browser.lg .browser-screen { height: 470px; }
/* The catalog mini's card has to reach its name and price line before the
   fade; the People mini's caption is taller, so the row barely grows. */
.browser.site.sm .browser-screen { height: 300px; }

/* ── tenant skin ground ── */
.browser.site {
  --t-accent:  #2645C5;
  --t-bg:      #EDEEF2;
  --t-surface: #FAFAFC;
  --t-text:    #17181C;
  --t-dim:     #5D6373;
  --t-line:    rgba(23, 24, 28, .08);
  --t-on-acc:  #FFFFFF;
}
.browser.site .browser-screen { background: var(--t-bg); }
.browser.site .browser-screen::after { background: linear-gradient(to bottom, transparent, var(--t-bg)); }
/* The palette switcher cross-fades this skin like every phone mockup. */
.browser.site .browser-screen, .browser.site .browser-screen * { transition: color .45s ease, background .45s ease, border-color .45s ease; }

/* ── dashboard-skin atoms ── */
.dash-top { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; white-space: nowrap; overflow: hidden; }
.dash-top b { font-size: 13px; font-weight: 700; color: var(--text); margin-right: 2px; }
.dash-top span { font-size: 11.5px; font-weight: 500; color: var(--dim); }
.dash-top span.on { color: var(--accent); font-weight: 700; box-shadow: inset 0 -2px 0 var(--accent); padding-bottom: 3px; }
.dash-h { font-size: 17px; font-weight: 700; color: var(--text); margin: 0 0 2px; }
.dash-sub { font-size: 11.5px; color: var(--dim); line-height: 1.4; margin: 0 0 10px; }
.dash-input {
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px;
  font-size: 11.5px; color: var(--dim); margin: 0 0 10px;
}
.dash-th, .dash-tr { display: grid; grid-template-columns: minmax(0, 1fr) 36px 76px; gap: 8px; align-items: center; }
.dash-th { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); padding: 4px 0 6px; border-bottom: 1px solid var(--line); }
.dash-tr { font-size: 12px; color: var(--dim); padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.dash-tr:last-child { border-bottom: 0; }
.dash-tr .nm { color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-chip {
  display: inline-block; padding: 1px 7px; border-radius: 999px; margin-left: 5px;
  font-size: 9.5px; font-weight: 700; font-style: normal; vertical-align: 1px; white-space: nowrap;
  color: var(--accent); background: var(--accent-wash); border: 1px solid rgba(38, 69, 197, .22);
}
.dash-chip.warn { color: #A85A00; background: #FBF1E3; border-color: #EBD3B0; }
.dash-chip.bad { color: #B51217; background: rgba(181, 18, 23, .10); border-color: rgba(181, 18, 23, .25); }
.dash-chip.ok { color: #196C3D; background: rgba(25, 108, 61, .12); border-color: rgba(25, 108, 61, .28); }
.dash-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 4px; }
.dash-stat { border: 1px solid var(--line); border-radius: 12px; padding: 9px 11px 8px; min-width: 0; }
.dash-stat b { display: block; font-size: 17px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; line-height: 1.2; }
.dash-stat span { display: block; font-size: 10.5px; color: var(--dim); line-height: 1.3; margin-top: 1px; }
.dash-stat.warn { border-top: 2px solid #A85A00; }
.dash-stat.warn b { color: #A85A00; }
.dash-card { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-top: 8px; }
.dash-card .who { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 4px; font-size: 12.5px; font-weight: 700; color: var(--text); }
.dash-card .who .dash-chip { margin-left: 2px; }
.dash-line { font-size: 11px; color: var(--dim); line-height: 1.45; margin: 4px 0 0; }
.dash-line .bad { color: #B51217; font-weight: 700; }
.dash-btnrow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.dash-btn { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 8px; padding: 5px 10px; white-space: nowrap; }
.dash-btn.pri { background: var(--accent); color: var(--on-accent); }
.dash-btn.gho { border: 1px solid var(--line); color: var(--text); }
.dash-flag { display: block; font-size: 10.5px; font-weight: 700; color: #B51217; margin-top: 1px; }
.dash-flag.ok { color: #196C3D; }
.dash-cell {
  font-size: 10.5px; font-weight: 700; border-radius: 8px; text-align: center;
  padding: 6px 2px; color: #196C3D; background: rgba(25, 108, 61, .12);
}
.dash-cell.bad { color: #B51217; background: rgba(181, 18, 23, .10); }
.dash-cell.dim { color: var(--dim); background: none; border: 1px dashed var(--line); padding: 5px 2px; }
.dash-gr { display: grid; grid-template-columns: minmax(0, 1.25fr) repeat(3, 1fr); gap: 7px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line-soft); }
.dash-gr.hd { padding: 2px 0 6px; border-bottom: 1px solid var(--line); }
.dash-gr:last-child { border-bottom: 0; }
.dash-gr .th { font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); line-height: 1.3; }
.dash-gr .trv { min-width: 0; }
.dash-gr .trv b { display: block; font-size: 11.5px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-gr .trv .dash-btn { margin-top: 5px; font-size: 10px; padding: 3px 8px; }
.dash-tabs { display: flex; gap: 14px; margin: 0 0 9px; border-bottom: 1px solid var(--line); }
.dash-tabs span { font-size: 11.5px; font-weight: 600; color: var(--dim); padding-bottom: 5px; }
.dash-tabs span.on { color: var(--accent); font-weight: 700; box-shadow: inset 0 -2px 0 var(--accent); }
.dash-pills { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 8px; }
.dash-pills span { font-size: 10.5px; font-weight: 600; color: var(--dim); border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; }
.dash-pills span.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 700; }
.dash-msg { background: var(--bg); border: 1px solid var(--line-soft); border-radius: 8px; padding: 7px 9px; font-size: 11px; color: var(--text); line-height: 1.45; margin-top: 6px; }
.dash-when { font-size: 10.5px; color: var(--dim); font-weight: 500; }

/* ── tenant-site-skin atoms ── */
.site-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; }
.site-brand { font-family: var(--f-disp); font-weight: 700; font-size: 14px; color: var(--t-text); white-space: nowrap; }
.site-nav { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 600; color: var(--t-dim); }
.site-ask { background: var(--t-accent); color: var(--t-on-acc); border-radius: 999px; padding: 4px 10px; font-size: 10.5px; font-weight: 700; }
.site-hero {
  border-radius: 12px; padding: 26px 16px 18px; margin: 0 0 12px; overflow: hidden;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--t-accent) 60%, #FFFFFF) -20%,
    color-mix(in srgb, var(--t-accent) 78%, #000000) 105%);
}
.site-hero-name { font-family: var(--f-disp); font-weight: 700; font-size: 24px; line-height: 1.05; letter-spacing: -0.01em; color: #FFFFFF; text-shadow: 0 1px 8px rgba(0, 0, 0, .25); margin: 0 0 6px; }
.site-hero p { margin: 0 0 12px; font-size: 12px; line-height: 1.45; color: rgba(255, 255, 255, .92); }
.site-hero .kick { font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .85); margin: 0 0 5px; }
.site-hero.compact { padding: 14px 14px 13px; }
.site-hero.compact .site-hero-name { font-size: 20px; margin-bottom: 0; }
/* At strip size the hero tightens so the first tour card's name and dates
   reach the screen before the fade. */
.browser.sm .site-hero { padding: 15px 14px 13px; }
.browser.sm .site-hero .site-hero-name { font-size: 20px; }
.browser.sm .site-hero p { margin-bottom: 9px; }
.browser.sm .site-card-art { height: 36px; }
.site-btnrow { display: flex; flex-wrap: wrap; gap: 7px; }
.site-btn { display: inline-block; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 6px 13px; background: var(--t-accent); color: var(--t-on-acc); white-space: nowrap; }
.site-btn.ghost { background: transparent; border: 1px solid rgba(255, 255, 255, .7); color: #FFFFFF; }
.site-quote .site-btn.ghost { border-color: color-mix(in srgb, var(--t-accent) 55%, transparent); color: var(--t-accent); }
.site-label { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--t-dim); margin: 0 0 8px; }
.site-card { background: var(--t-surface); border: 1px solid var(--t-line); border-radius: 12px; overflow: hidden; }
.site-card + .site-card { margin-top: 10px; }
.site-card-art { height: 64px; background: linear-gradient(180deg, color-mix(in srgb, var(--t-accent) 60%, #FFFFFF) -20%, color-mix(in srgb, var(--t-accent) 78%, #000000) 105%); }
.site-card-body { padding: 10px 12px 12px; }
.site-meta { font-size: 10.5px; color: var(--t-dim); margin: 0 0 3px; }
.site-name { font-family: var(--f-disp); font-weight: 700; font-size: 16px; color: var(--t-text); margin: 0 0 2px; line-height: 1.15; }
.site-dates { font-size: 11px; color: var(--t-dim); margin: 0 0 6px; }
.site-price { font-size: 12.5px; font-weight: 600; color: var(--t-text); margin: 0 0 8px; }
.site-crumb { font-size: 10.5px; color: var(--t-dim); margin: 0 0 8px; }
.site-crumb b { color: var(--t-text); font-weight: 600; }
.site-chiprow { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.site-chiprow i { font-style: normal; font-size: 9.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; color: #FFFFFF; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .35); }
.site-quote { background: var(--t-surface); border: 1px solid var(--t-line); border-top: 2px solid var(--t-accent); border-radius: 12px; padding: 11px 13px 12px; margin: 0 0 12px; }
.site-qp { display: block; font-family: var(--f-disp); font-weight: 700; font-size: 15px; color: var(--t-text); margin: 0 0 2px; }
.site-qrow { display: flex; justify-content: space-between; gap: 8px; font-size: 10.5px; color: var(--t-dim); padding: 6px 0; border-top: 1px solid var(--t-line); margin: 8px 0; }
.site-qrow b { color: var(--t-text); font-weight: 600; white-space: nowrap; }
.site-day { display: flex; align-items: center; gap: 9px; padding: 8px 0; border-bottom: 1px solid var(--t-line); }
.site-day:last-child { border-bottom: 0; }
.site-day i { font-style: normal; flex: none; font-size: 8.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--t-dim); background: color-mix(in srgb, var(--t-text) 7%, var(--t-bg)); border-radius: 6px; padding: 3px 6px; }
.site-day span { font-size: 12px; font-weight: 600; color: var(--t-text); }

/* ── the #platform strip ── */
.section.tight { padding: 44px 0 48px; }
.surfaces {
  display: grid; gap: 28px 22px; justify-items: center; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin-top: 24px;
}
.surface-fig { margin: 0; display: grid; gap: 15px; justify-items: center; max-width: 440px; }
.surface-fig figcaption, .browser-fig figcaption { color: var(--dim); font-size: 16px; text-align: center; line-height: 1.5; }
.surface-fig figcaption b, .browser-fig figcaption b { color: var(--text); font-weight: 600; display: block; margin-bottom: 2px; }
.surface-fig figcaption a, .browser-fig figcaption a { color: var(--accent); }
.browser-fig { margin: 0; display: grid; gap: 15px; justify-items: center; max-width: 460px; }
.browser-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 34px 26px; margin-top: 42px; justify-items: center; align-items: start; }
/* features/website's pair runs taller, so the shop window reaches its price
   line and the second inquiry teases into the fade. */
.browser-row.tall .browser-screen { height: 396px; }
.browser-row.tall .site-hero { padding: 16px 14px 13px; }
.browser-row.tall .site-hero p { margin-bottom: 9px; }
.browser-row.tall .site-card-art { height: 44px; }
/* The strip's phone, at a size that reads as "the part they see". */
.phone.xs { width: 232px; }
.phone.xs .phone-screen { height: 300px; min-height: 0; padding: 14px 12px; }
.phone.xs .phone-screen::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40px;
  background: linear-gradient(to bottom, transparent, var(--t-bg)); pointer-events: none;
}
.phone.xs .scr-display { font-size: 19px; }
.phone.xs .scr-pill { font-size: 10.5px; padding: 4px 10px 4px 5px; margin-bottom: 10px; }
.phone.xs .scr-pill .tick { width: 14px; height: 14px; font-size: 9px; }
.phone.xs .scr-hero-card { padding: 12px 12px; }
.phone.xs .scr-count { margin-bottom: 3px; }
.phone.xs .scr-count b { font-size: 32px; }
.phone.xs .scr-hero-card .when { font-size: 11px; }
.phone.xs .scr-tl::before { left: 12px; }
.phone.xs .scr-tl-row { grid-template-columns: 26px 1fr; gap: 8px; }
.phone.xs .tl-chip { width: 26px; height: 26px; font-size: 11px; margin-top: 6px; }
.phone.xs .scr-event { padding: 9px 11px; }
.phone.xs .ev-title { font-size: 12.5px; }
/* On a phone the hero mockup is one screen above; don't repeat it — and the
   figure goes with its phone, so no caption is left standing alone. The h2's
   "app in their pocket" clause carries that leg. */
@media (max-width: 620px) { #platform .surfaces .surface-fig:first-child { display: none; } }

/* ── #office's CRM sub-block ── */
#crm { margin-top: 36px; }
#crm > .body { margin-top: -2px; }
@media (min-width: 1000px) {
  .phones.with-copy.crm-row { grid-template-columns: repeat(2, minmax(286px, 340px)) minmax(0, 1fr); }
}

/* ── #brand with the catalog-site mini beside the phone ── */
.brand-demo.has-site .browser { max-width: 400px; }
@media (min-width: 1200px) {
  .brand-demo.has-site { grid-template-columns: auto minmax(0, 400px) 1fr; gap: 44px; }
}
@media (min-width: 901px) and (max-width: 1199px) {
  .brand-demo.has-site { grid-template-columns: auto minmax(0, 400px); justify-content: center; }
  .brand-demo.has-site .brand-points { grid-column: 1 / -1; justify-self: start; }
}

/* ── length offsets: scoped margin trims ──
   The platform strip and the CRM block earn their screens; the rest of the
   page gives a little air back so the whole stays near the concise page's
   tuned length. Every trim is scoped under .concise.v21 (the marker class on
   the three pages this pass touched — index, features/office,
   features/website — so features/guides stays pixel-identical) and none
   moves a breakpoint or a reading size. */
.concise.v21 .checks-block { margin-top: 32px; }
.concise.v21 .steps-head { margin-top: 32px; }
.concise.v21 .phones { margin-top: 32px; }
.concise.v21 .section { padding: 74px 0; }
.concise.v21 .band { padding: 70px 0; }
.concise.v21 .section.tight { padding: 44px 0 48px; }
.concise.v21 .hero { padding-bottom: 70px; }
.concise.v21 .lede.narrow { margin-bottom: 32px; }
.concise.v21 .h2 { margin-bottom: 14px; }
.concise.v21 .note-block { margin-top: 32px; padding-top: 22px; }
.concise.v21 .steps { margin-top: 32px; }
.concise.v21 .more-row { margin-top: 28px; }
.concise.v21 .sw-note { margin-bottom: 28px; }
.concise.v21 .swatches { margin-bottom: 12px; }
.concise.v21 .plans { margin-top: 34px; }
.concise.v21 .fine-head { margin-top: 34px; }
.concise.v21 .checks { gap: 11px; }
.concise.v21 .checks li { padding-bottom: 11px; }
/* …but the copy cell beside the phones keeps its tighter rhythm. */
.concise.v21 .with-copy-cell .checks { gap: 8px; }
.concise.v21 .with-copy-cell .checks li { padding-bottom: 8px; }
/* 981-1199 (the 1024x768 fit): the lede's new clause costs one wrapped
   line; the hero gives it back so the price answer still ends where the
   concise pass tuned it. */
@media (min-width: 981px) and (max-width: 1199px) {
  .concise.v21 .hero h1 { margin-bottom: 14px; }
  .concise.v21 .hero .lede { margin-bottom: 18px; }
  .concise.v21 .hero-cta { margin-bottom: 12px; }
  .concise.v21 .hero-answers { gap: 7px; }
}
/* Phones: the paperwork mini and the #brand site mini repeat stories the
   strip and the swatch phone already carry at 390px; both stay one tap away
   (features/office, features/website). */
@media (max-width: 620px) {
  #crm .browser-fig:nth-of-type(2) { display: none; }
  .brand-demo.has-site .browser { display: none; }
}