:root {
    --bg: #111827;               /* page frame */
    --bg-rgb: 17 24 39;
    --panel: #1f2937;            /* dark panels */
    --snow: #e5e9ef;             /* the one light panel */
    --ink: #111827;
    --ink-mute: #4b5563;
    --fg: #ffffff;
    --text: #d1d5db;
    --mute: #9ca3af;
    --line: rgba(255, 255, 255, .16);
    --line-ink: rgba(17, 24, 39, .16);
    --blue: #b3c7d9;             /* baby blue: light end of the pants reference (#9aafc2 median) */
    --blue-deep: #9aafc2;
    --blue-tint: #e6edf4;
    --green: #4a4727;            /* army green: jacket reference (#494025 median), nudged toward green for screens */
    --green-hover: #5a5630;
    --green-tint: #ecebdf;
    --cta-bg: var(--blue);       /* primary CTA: baby blue on dark surfaces ... */
    --cta-fg: var(--ink);
    --cta-hover: var(--blue-deep);
    --rail: 64px;
    --frame: 8px;
    --radius: 8px;
    --ticker: 48px;
    --pad: clamp(20px, 3.4vw, 48px);
    --ease: cubic-bezier(.4, 0, .2, 1);
    --font: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --mono: "DM Mono", ui-monospace, Menlo, Consolas, monospace;
    --logo: "Montserrat", "Arial Black", Arial, sans-serif;   /* wordmark only: heavy italic caps */
    --text-size: .9375rem;       /* 15px: body copy and all tags */
  }

  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { background: var(--bg); scroll-behavior: smooth; }
  body {
    background: var(--bg);
    color: var(--fg);
    font: 400 var(--text-size)/1.6 var(--mono);
    -webkit-font-smoothing: antialiased;
    padding: var(--frame) var(--frame) calc(var(--ticker) + var(--frame)) var(--rail);
  }
  body:has(dialog[open]) { overflow: hidden; }
  section[id] { scroll-margin-top: 88px; }
  button { font: inherit; }
  h1, h2, h3, .pill, .nav a, .menu-list a, .menu-list button { font-family: var(--font); }   /* display + controls stay Inter Tight */
  [hidden] { display: none !important; }      /* author display rules below would otherwise override [hidden] */
  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  :focus-visible { outline: 2px solid var(--ring, #fff); outline-offset: 3px; }   /* white on dark surfaces */
  .sec--snow, dialog.drawer, .tcard, .td-card { --ring: var(--ink); }          /* ink on light ones */
  .sec--snow, dialog.drawer, .tcard { --cta-bg: var(--green); --cta-fg: #fff; --cta-hover: var(--green-hover); }   /* ... army green on white */

  .skip { position: fixed; left: 72px; top: -60px; z-index: 60; background: #fff; color: var(--ink); padding: 8px 14px; border-radius: 999px; font-weight: 500; transition: top .3s var(--ease); }
  .skip:focus { top: 12px; }

  /* ---------- Side rail ---------- */
  .rail {
    position: fixed; inset: 0 auto 0 0; width: var(--rail); z-index: 30;
    display: flex; flex-direction: column; background: var(--bg);
  }
  .rail__btn {
    position: relative; width: var(--rail); height: var(--rail);
    display: grid; place-items: center;
    background: none; border: 0; color: #fff; cursor: pointer; text-decoration: none;
    transition: background-color .3s;
  }
  .rail__btn:hover { background: rgba(255, 255, 255, .1); }
  .rail__btn:focus-visible { outline-offset: -4px; }
  .rail svg, .icon-btn svg, .arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
  .rail__btn::after {          /* label slides out of the rail */
    content: attr(data-tip);
    position: absolute; left: calc(100% + 6px); top: 50%;
    transform: translate(-6px, -50%); opacity: 0; pointer-events: none; white-space: nowrap;
    background: #fff; color: var(--ink); font-size: .8125rem; font-weight: 500;
    padding: .45rem .8rem; border-radius: 999px;
    transition: opacity .25s var(--ease), transform .25s var(--ease);
  }
  .rail__btn:hover::after, .rail__btn:focus-visible::after { opacity: 1; transform: translate(0, -50%); }

  /* ---------- Header ---------- */
  .hdr {
    position: fixed; top: var(--frame); left: var(--rail); right: var(--frame); z-index: 20;
    height: 72px; padding: 0 var(--pad);
    display: flex; align-items: center; gap: 36px;
    border-radius: var(--radius);
    transition: background-color .3s, backdrop-filter .3s;
  }
  .hdr.is-stuck { background: rgb(var(--bg-rgb) / .84); backdrop-filter: blur(14px); }
  .wordmark { font-family: var(--logo); font-style: italic; font-weight: 900; font-size: 1.125rem; line-height: 1; letter-spacing: -.01em; text-transform: uppercase; color: #fff; text-decoration: none; white-space: nowrap; }
  .nav { display: flex; gap: 28px; }
  .nav a { position: relative; color: #fff; text-decoration: none; font-weight: 500; }
  .nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
  .nav a:hover::after { transform: scaleX(1); }
  .hdr__cta { margin-left: auto; display: flex; gap: 8px; }

  /* ---------- Pills ---------- */
  .pill {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: .75rem 1.4rem; border: 0; border-radius: 29px;
    font-size: .875rem; font-weight: 500; line-height: 1; text-decoration: none; cursor: pointer; white-space: nowrap;
    background: #fff; color: var(--ink);
    transition: background-color .3s, color .3s, opacity .3s;
  }
  .pill:hover { background: rgba(255, 255, 255, .82); }
  .pill--accent { background: var(--cta-bg); color: var(--cta-fg); }
  .pill--accent:hover { background: var(--cta-hover); }
  .pill--ghost { background: rgba(255, 255, 255, .22); color: #fff; }
  .pill--ghost:hover { background: rgba(255, 255, 255, .3); }
  .pill--ink { background: var(--ink); color: #fff; }
  .pill--ink:hover { background: #374151; }
  .pill--line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
  .pill--line:hover { background: rgba(17, 24, 39, .08); }
  .pill:disabled { opacity: .5; cursor: progress; }

  /* ---------- Panels ---------- */
  .panel { border-radius: var(--radius); overflow: hidden; margin-bottom: var(--frame); }

  /* Hero: covers about half the viewport */
  .hero {
    position: relative; isolation: isolate; background: var(--panel);
    min-height: clamp(400px, 56vh, 620px);
    display: flex; align-items: flex-end; padding: calc(72px + 16px) var(--pad) var(--pad);
  }
  .hero__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: .62; transform-origin: 70% 40%; animation: drift 40s ease-in-out infinite alternate; }
  .hero__video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 62% 92%; opacity: .96; }
  .hero__pause { position: absolute; right: var(--pad); bottom: var(--pad); z-index: 1; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .55); border-radius: 50%; background: rgb(var(--bg-rgb) / .45); color: #fff; cursor: pointer; backdrop-filter: blur(6px); transition: background-color .3s; }
  .hero__pause:hover { background: rgb(var(--bg-rgb) / .7); }
  .hero__pause svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .hero__pause .i-play { display: none; fill: currentColor; stroke-width: 1.5; }
  .hero__pause[aria-pressed="true"] .i-pause { display: none; }
  .hero__pause[aria-pressed="true"] .i-play { display: block; }
  .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(var(--bg-rgb) / .78) 0%, rgb(var(--bg-rgb) / .25) 60%, rgb(var(--bg-rgb) / 0) 100%), linear-gradient(0deg, rgb(var(--bg-rgb) / .6) 0%, rgb(var(--bg-rgb) / 0) 55%); }
  .hero h1 { font-size: clamp(2rem, 4.4vw, 3rem); font-weight: 700; line-height: 1; letter-spacing: -.01em; max-width: 14em; }
  .hero h1 .line { display: block; }
  .hero .sub { margin-top: 16px; max-width: 34rem; color: #e5e7eb; }
  .hero__cta { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 8px; }
  .rise { animation: rise .9s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(var(--i, 0) * 90ms + 80ms); }
  @keyframes rise { from { transform: translateY(14px); } }      /* transform only: text stays visible if the timeline stalls */
  @keyframes drift { to { transform: scale(1.08) translate3d(-1.5%, -1%, 0); } }

  /* Sections */
  .sec { padding: var(--pad); }
  .sec--snow { background: var(--snow); color: var(--ink); --arrow-bg: var(--green); --arrow-fg: #fff; }
  .sec--dark { background: var(--panel); --arrow-bg: var(--blue); --arrow-fg: var(--ink); }
  .sec__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 28px; }
  .sec h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); font-weight: 700; line-height: 1; letter-spacing: -.01em; }
  .nb { white-space: nowrap; }
  .sec__lede { margin-top: 12px; max-width: 36rem; color: var(--ink-mute); text-wrap: balance; }
  .sec--dark .sec__lede { color: var(--text); }
  .arrows { display: flex; gap: 8px; flex: none; }
  .arrow {
    width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
    border: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer;
    transition: background-color .3s, color .3s, opacity .3s;
  }
  .arrow:hover:not(:disabled) { background: var(--arrow-bg); color: var(--arrow-fg); }
  .arrow:disabled { opacity: .3; cursor: default; }
  .arrow[data-prev] svg { transform: scaleX(-1); }

  /* Carousels */
  .track {
    --gap: 12px; --cols: 3;
    display: grid; grid-auto-flow: column; gap: var(--gap);
    grid-auto-columns: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .track::-webkit-scrollbar { display: none; }
  .track > * { scroll-snap-align: start; }
  .track--trips { --cols: 2; }

  /* Media slot: gradient + initial now, drop an <img> in for a photo */
  .media { position: relative; overflow: hidden; border-radius: var(--radius); background: linear-gradient(160deg, var(--t1, #64748b), var(--t2, #334155)); }
  .media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
  .media .initial { position: absolute; left: 16px; bottom: 6px; font-family: var(--font); font-size: 7.5rem; font-weight: 800; line-height: .9; color: rgba(255, 255, 255, .2); transition: transform .5s var(--ease); }
  .tag { position: absolute; top: 12px; left: 12px; z-index: 1; padding: .4rem .65rem; border-radius: 999px; background: rgb(var(--bg-rgb) / .8); color: #fff; font-size: var(--text-size); font-weight: 500; }

  .chip { display: inline-block; padding: .2rem .65rem; border-radius: 999px; font-size: var(--text-size); font-weight: 500; line-height: 1.5; }
  .chip--blue { background: var(--blue); color: var(--ink); }
  .chip--green { background: var(--green); color: #fff; }

  .rcard { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 10px 10px 18px; background: #fff; border-radius: var(--radius); }
  .rcard .media { aspect-ratio: 4 / 5; border-radius: 6px; }
  .rcard > div:not(.media), .rcard .specs { margin-inline: 8px; }
  :is(.rcard, .tcard):hover .media img { transform: scale(1.04); }
  :is(.rcard, .tcard):hover .initial { transform: translateY(-8px); }
  .rcard h3 { font-size: 1.25rem; font-weight: 700; line-height: 1.1; }
  .rcard__id { display: flex; align-items: baseline; gap: 10px; }
  .rcard__age { font-family: var(--font); font-size: 1.25rem; font-weight: 500; line-height: 1.1; color: var(--ink-mute); }
  .rcard .zone { color: var(--ink-mute); margin-top: 2px; }
  .rcard .zone::before { content: "From: "; }          /* rider location reads "From: place"; the text itself stays clean for matching */
  .rcard .zone::before, .from-label, .chat-head .from-label { margin-right: .25em; font-family: var(--font); font-weight: 600; color: var(--ink); }
  .specs { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 4px 18px; padding-top: 12px; border-top: 1px solid var(--line-ink); }
  /* Labels (dt) share the name font, semibold; values (dd) stay regular body text */
  .specs dt, .done dt, .ct-sum dt { font-family: var(--font); font-weight: 600; color: var(--ink); }
  .specs dd { font-weight: 400; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

  .tcard { position: relative; border-radius: var(--radius); display: flex; flex-direction: column; gap: 12px; padding: 10px 10px 18px; background: #fff; color: var(--ink); }
  .tcard .media { aspect-ratio: 16 / 9; border-radius: 6px; }
  .tcard .tag { top: 22px; left: 22px; }
  .tcard .initial { left: auto; right: 20px; bottom: auto; top: 6px; font-size: 7rem; }
  .tcard h3, .tcard .when, .tcard .chips, .tcard__row { margin-inline: 8px; }
  .tcard h3 { font-size: clamp(1.4rem, 2.2vw, 1.75rem); font-weight: 700; line-height: 1.05; max-width: 14em; }
  .tcard .when, .tcard .meta { color: var(--ink-mute); }
  .tcard .meta { margin-inline: 8px; margin-top: -6px; }
  .tcard .tag--r { left: auto; right: 22px; }
  .pic--fill { display: grid; place-items: center; background: var(--blue); color: var(--ink); font-family: var(--font); font-weight: 700; line-height: 1; }
  .by__pic.pic--fill { font-size: .8125rem; }
  .by { margin-inline: 8px; display: flex; align-items: center; gap: 8px; color: var(--ink-mute); }
  .by strong { color: var(--ink); font-weight: 500; }
  .by__pic { width: 28px; height: 28px; }
  .crew { margin-inline: 8px; display: grid; gap: 8px; }
  .crew__title { color: var(--ink-mute); }
  .crew__list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 12px; }
  .crew__list li { display: grid; justify-items: center; gap: 4px; width: 56px; }
  .crew__list li > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .crew__pic { width: 40px; height: 40px; }
  .crew__pic--open { display: grid; place-items: center; border: 1px dashed #94a3b8; color: var(--ink-mute); }
  .chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
  .chips li { padding: .3rem .65rem; border-radius: 999px; background: var(--blue-tint); color: var(--ink); font-size: var(--text-size); font-weight: 500; }
  .chips li:last-child { background: var(--green-tint); color: var(--green); }
  .tcard__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-top: 4px; }
  .tcard__actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .tcard__row strong { font-weight: 500; }

  /* Why tiles */

  /* Footer */
  .foot { background: var(--panel); padding: var(--pad); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); }
  .foot h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); font-weight: 700; line-height: 1.05; letter-spacing: -.01em; max-width: 16em; }
  .foot .pill { margin-top: 24px; }
  .foot__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .foot h4 { font-size: .8125rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); margin-bottom: 14px; }
  .foot ul { list-style: none; padding: 0; display: grid; gap: 10px; }
  .foot__cols a, .foot li button { color: #fff; text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; font-weight: 500; }
  .foot__cols a:hover, .foot li button:hover { text-decoration: underline; }
  .legal { grid-column: 1 / -1; padding-top: 20px; border-top: 1px solid var(--line); color: var(--mute); }

  /* ---------- How it works: an outlined panel with four steps on one timeline rule (no white cards) ---------- */
  .how { padding: var(--pad); border: 1px solid var(--line); background: transparent; }
  .how__head h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); font-weight: 700; line-height: 1; letter-spacing: -.01em; }
  .how .sec__lede { color: var(--text); }
  .how__steps { list-style: none; padding: 0; margin: clamp(32px, 5vw, 64px) 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 0; }
  .how__step { position: relative; display: grid; gap: 12px; align-content: start; padding: 28px clamp(16px, 2.5vw, 36px) 0 0; border-top: 1px solid var(--line); }
  .how__step::before { content: ""; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--blue); }
  .how__n { font-family: var(--font); font-size: clamp(2.5rem, 4.4vw, 3.75rem); font-weight: 800; line-height: .9; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .55); }
  .how__step h3 { font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
  .how__step p { color: var(--text); }
  .how__cta { margin-top: clamp(32px, 5vw, 56px); display: flex; flex-wrap: wrap; gap: 8px; }

  /* Ticker (fixed announcement bar) */
  .ticker {
    position: fixed; z-index: 25; left: var(--rail); right: 0; bottom: 0; height: var(--ticker);
    display: flex; align-items: center; overflow: hidden; background: var(--bg); border-top: 1px solid var(--line);
    font-weight: 500;
  }
  .ticker__track { display: flex; flex: none; width: max-content; animation: ticker 60s linear infinite; }
  .ticker:hover .ticker__track { animation-play-state: paused; }
  .ticker__track span { padding-right: 64px; white-space: nowrap; }
  @keyframes ticker { to { transform: translateX(-50%); } }

  /* ---------- Drawers ---------- */
  dialog.drawer {
    position: fixed; inset: var(--frame) auto var(--frame) var(--rail); margin: 0;
    width: min(472px, calc(100vw - var(--rail) - var(--frame))); height: auto; max-width: none; max-height: none;
    padding: 0; border: 0; border-radius: var(--radius); overflow: hidden;
    background: #fff; color: var(--ink);
    clip-path: inset(0 100% 0 0 round var(--radius));
    transition: clip-path .5s var(--ease);
  }
  dialog.drawer.is-open { clip-path: inset(0 0 0 0 round var(--radius)); }
  dialog.drawer::backdrop { background: rgba(0, 0, 0, .48); opacity: 0; transition: opacity .5s var(--ease); }
  dialog.drawer.is-open::backdrop { opacity: 1; }
  .drawer__panel { height: 100%; overflow-y: auto; padding: 24px 24px 0; display: flex; flex-direction: column; }

  /* Centered variant (signup): a modal in the middle of the screen that fades and rises in, instead of sliding out from the rail */
  dialog.drawer.drawer--center {
    inset: 0; margin: auto; height: fit-content;
    width: min(560px, calc(100vw - 2 * var(--frame))); max-height: calc(100dvh - 2 * var(--frame));
    clip-path: none; opacity: 0; transform: translateY(14px) scale(.98);
    transition: opacity .3s var(--ease), transform .3s var(--ease);
  }
  dialog.drawer.drawer--center.is-open { clip-path: none; opacity: 1; transform: none; }
  .drawer--center .drawer__panel { height: auto; max-height: calc(100dvh - 2 * var(--frame)); padding-inline: clamp(20px, 4vw, 32px); }
  .drawer__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
  .drawer__head h2 { font-size: 1.75rem; font-weight: 700; line-height: 1; }
  .icon-btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 0; background: #f3f4f6; color: var(--ink); cursor: pointer; transition: background-color .3s; }
  .icon-btn:hover { background: #e5e7eb; }

  .menu-list { list-style: none; padding: 0; display: grid; gap: 4px; margin-bottom: 24px; }
  .menu-list a { display: block; padding: 10px 0; font-size: 2rem; font-weight: 700; line-height: 1.1; color: var(--ink); text-decoration: none; transition: transform .3s var(--ease); }
  .menu-list a:hover, .menu-list button:hover { transform: translateX(6px); }
  .menu-list button { display: block; padding: 10px 0; border: 0; background: none; font-size: 2rem; font-weight: 700; line-height: 1.1; color: var(--ink); text-align: left; cursor: pointer; transition: transform .3s var(--ease); }

  /* Signup */
  #signup { display: flex; flex-direction: column; flex: 1; }
  .steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
  .steps li { font-weight: 500; color: var(--ink-mute); padding-top: 8px; position: relative; }
  .steps li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 3px; background: #d1d5db; }
  .steps li::after { content: ""; position: absolute; top: 0; left: 0; height: 3px; width: 0; border-radius: 3px; background: var(--green); transition: width .3s var(--ease); }
  .steps li.is-done::after, .steps li.is-current::after { width: 100%; }
  .steps li.is-current { color: var(--ink); }
  .steps__count { margin: 10px 0 18px; color: var(--ink-mute); }
  .step { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; }
  .step h3 { font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
  .step p.hint { color: var(--ink-mute); margin-top: -6px; }
  .field { display: grid; gap: 6px; }
  .field > span, legend { font-weight: 500; }
  fieldset { border: 0; padding: 0; min-width: 0; display: grid; gap: 8px; }
  input[type="text"], input[type="email"], input[type="url"], input[type="date"], input[type="number"], input[type="search"], select, textarea {
    width: 100%; font: inherit; color: var(--ink); background: #fff;
    border: 1px solid #cbd5e1; border-radius: var(--radius); padding: .8rem .9rem; transition: border-color .3s;
  }
  textarea { resize: vertical; min-height: 96px; }
  input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; border-color: var(--ink); }
  input[aria-invalid="true"] { border-color: #b91c1c; }
  .choice { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid #cbd5e1; border-radius: var(--radius); cursor: pointer; transition: border-color .3s, background-color .3s; }
  .choice:hover { border-color: #94a3b8; }
  .choice:has(input:checked) { border-color: var(--green); background: var(--blue-tint); }
  .choice input { margin-top: 3px; accent-color: var(--green); }
  .choice small { display: block; color: var(--ink-mute); font-size: var(--text-size); }
  .choice strong { font-weight: 500; }
  .err { min-height: 1.4em; margin-top: 12px; color: #b91c1c; font-weight: 500; }
  .drawer__nav { position: sticky; bottom: 0; background: #fff; margin-top: auto; padding: 16px 0 24px; display: flex; gap: 8px; justify-content: space-between; }
  .drawer__nav .pill:last-child { margin-left: auto; }
  .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
  .done { display: grid; gap: 14px; align-content: start; padding-bottom: 24px; }
  .done h3 { font-size: 1.75rem; font-weight: 700; line-height: 1.1; }
  .done h3:focus { outline: none; }
  .done dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; padding: 14px 0; border-block: 1px solid var(--line-ink); }
  .done dd { overflow-wrap: anywhere; }
  .done .note { color: var(--ink-mute); }
  .video-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
  .video-preview { width: 100%; max-height: 260px; border-radius: var(--radius); background: #000; }
  .featured-video { display: grid; gap: 10px; }
  .featured-video h3 { font-size: 1.25rem; font-weight: 700; line-height: 1.1; }
  .featured-video video { width: 100%; max-height: 300px; border-radius: var(--radius); background: #000; }

  /* Signup: trip step + suggested riders */
  .trip-fields { display: grid; gap: 14px; }
  .field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .matches { display: grid; gap: 12px; }
  .matches h3 { font-size: 1.25rem; font-weight: 700; line-height: 1.1; }
  .match-list { list-style: none; padding: 0; display: grid; gap: 10px; }
  .match { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; padding: 14px; border: 1px solid #cbd5e1; border-radius: var(--radius); }
  .match > .match__top { grid-column: 2; align-self: center; }
  .match > .match__why, .match > .match__sample { grid-column: 1 / -1; }
  .photo-preview, .photo-empty, .me__pic, .match__pic, .by__pic, .crew__pic { border-radius: 50%; object-fit: cover; flex: none; background: var(--blue-tint); }
  .match__pic { grid-column: 1; grid-row: 1; width: 56px; height: 56px; }
  .match__top { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
  .match__name { font-family: var(--font); font-size: 1.125rem; font-weight: 700; line-height: 1.1; }
  .match__zone, .match__sample { color: var(--ink-mute); }
  .match__why { display: flex; flex-wrap: wrap; gap: 6px; }
  .match__why .chip { border-radius: 14px; }
  .photo-row { display: flex; align-items: center; gap: 14px; }
  .photo-preview, .photo-empty { width: 72px; height: 72px; }
  .photo-empty { border: 1px dashed #94a3b8; }
  .photo-btn { cursor: pointer; }
  .photo-btn:has(:focus-visible) { outline: 2px solid var(--ring); outline-offset: 3px; }
  .me { display: flex; align-items: center; gap: 14px; }
  .me__pic { width: 72px; height: 72px; }

  /* ---------- Trip details page (trip-*.html) ---------- */
  .chip--tint { background: var(--green-tint); color: var(--green); }
  .td-card { background: #fff; color: var(--ink); border-radius: var(--radius); padding: 20px; }
  .td-hero { min-height: clamp(460px, 64vh, 700px); }
  .td-back { display: inline-block; margin-bottom: 20px; color: #fff; font-weight: 500; text-decoration: none; }
  .td-back:hover { text-decoration: underline; text-underline-offset: 4px; }
  .td-kicker { margin-bottom: 10px; color: var(--ink-mute); font-weight: 500; }
  .td-hero .td-kicker { color: var(--blue); }
  .td-hero h1 { font-size: clamp(2.25rem, 5.4vw, 4rem); max-width: 12em; }
  .td-hero .by { margin: 16px 0 0; color: var(--text); }
  .td-hero .by strong { color: #fff; }
  .td-facts { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 14px 40px; }
  .td-facts dt { color: var(--text); }
  .td-facts dd { color: #fff; font-weight: 500; }

  .td-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
  .td-lead { font-family: var(--font); font-size: clamp(1.6rem, 2.8vw, 2.25rem); font-weight: 700; line-height: 1.1; letter-spacing: -.01em; margin-bottom: 16px; }
  .td-prose p { max-width: 38rem; }
  .td-prose p + p { margin-top: 12px; }
  .td-prose h2 + .td-lead { margin-top: 16px; }
  .td-hl { display: grid; gap: 12px; justify-items: start; }
  .td-hl h3, .td-stay h3, .td-storm h3, .td-level h3 { font-size: clamp(1.4rem, 2.2vw, 1.75rem); font-weight: 700; line-height: 1.05; }
  .td-note { margin-top: 14px; color: var(--ink-mute); }
  .sec--dark .td-note { color: var(--text); }

  .td-level { --ring: var(--ink); margin-top: clamp(28px, 4vw, 48px); padding: clamp(20px, 3vw, 32px); border-radius: var(--radius); background: #fff; color: var(--ink); }
  .td-reqs { list-style: none; padding: 0; margin: 18px 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 24px; }
  .td-reqs li { display: flex; gap: 10px; align-items: flex-start; }
  .td-reqs li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: .6em; border-radius: 50%; background: var(--green); }
  .td-warn { padding-top: 16px; border-top: 1px solid var(--line-ink); font-weight: 500; }

  .td-sum { list-style: none; padding: 0; margin-bottom: 20px; display: flex; flex-wrap: wrap; gap: 8px; }
  .td-sum .chip { background: var(--blue); color: var(--ink); }
  .td-days { list-style: none; padding: 0; display: grid; gap: 8px; }
  .td-day { display: grid; grid-template-columns: 56px 116px minmax(0, 1fr) minmax(0, auto); gap: 6px 20px; align-items: start; padding: 16px 20px; }
  .td-day__n { font-family: var(--font); font-size: 1.75rem; font-weight: 800; line-height: 1; color: var(--green); }
  .td-day__date { color: var(--ink-mute); }
  .td-day__date strong { display: block; color: var(--ink); font-weight: 500; }
  .td-day__plan strong { font-weight: 500; }
  .td-tags { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
  .td-day .td-tags { justify-content: flex-end; }

  .td-stays { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .td-stay { display: grid; gap: 12px; align-content: start; padding: 10px 10px 22px; }
  .td-stay > :not(.td-pics) { margin-inline: 10px; }
  .td-pics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
  .td-pics figure { margin: 0; display: grid; gap: 6px; align-content: start; }
  .td-pics img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; background: var(--blue-tint); }
  .td-pics figcaption { color: var(--ink-mute); }
  .td-meta { color: var(--ink-mute); }
  .td-storm { margin-top: 12px; display: grid; gap: 14px; }
  .td-steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .td-step { display: grid; gap: 6px; align-content: start; }
  .td-step__n { font-family: var(--font); font-size: 2.5rem; font-weight: 800; line-height: .9; color: var(--green); }
  .td-banner { display: flex; gap: 10px; align-items: flex-start; padding-top: 16px; border-top: 1px solid var(--line-ink); font-weight: 500; }
  .td-banner::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: .6em; border-radius: 50%; background: var(--green); }
  .td-total { margin-top: 12px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 24px; }
  .td-total strong { font-family: var(--font); font-size: 1.75rem; font-weight: 800; line-height: 1; }

  .td-card .specs { padding-top: 0; border-top: 0; }
  .td-card .specs dd { display: block; }
  .td-card .td-tags { margin-top: 14px; }

  .td-cost { margin: 0; }
  .td-cost > div { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 20px; padding: 14px 0; border-bottom: 1px solid var(--line-ink); }
  .td-cost > div:first-child { padding-top: 0; }
  .td-cost dt { font-weight: 500; }
  .td-cost dt span { display: block; color: var(--ink-mute); font-weight: 400; }
  .td-cost dd { font-weight: 500; text-align: right; white-space: nowrap; }
  .td-cost .is-total { border-bottom: 0; padding-bottom: 0; }
  .td-cost .is-total + .is-total { padding-top: 10px; }
  .td-cost .is-total dd { font-family: var(--font); font-size: 1.5rem; font-weight: 800; }
  .td-compare { display: grid; gap: 12px; }
  .td-compare .td-card { display: grid; gap: 2px; }
  .td-compare strong { font-family: var(--font); font-size: 1.75rem; font-weight: 800; line-height: 1.1; }
  .td-compare .td-save strong { color: var(--green); }

  .td-timeline { list-style: none; padding: 0; display: grid; gap: 8px; }
  .td-slot { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 6px 20px; padding: 14px 20px; }
  .td-slot__time { font-weight: 500; font-size: 1.125rem; }
  .td-slot__what { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
  .td-slot__what .chip { background: var(--blue); color: var(--ink); }
  .td-slot p { grid-column: 2; }
  .td-stats { margin-top: 12px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .td-stat dd { display: grid; gap: 2px; }
  .td-stat dt { color: var(--ink-mute); }
  .td-stat strong { font-family: var(--font); font-size: 2rem; font-weight: 800; line-height: 1.1; }
  .td-stat span { color: var(--ink-mute); }

  .td-pay { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
  .td-pay .td-card { display: grid; gap: 8px; justify-items: start; align-content: start; }
  .td-pay strong { font-family: var(--font); font-size: 2.5rem; font-weight: 800; line-height: 1; }

  /* ---------- Filters (riders and trips): a quiet icon in the section head opens one row of small chips ---------- */
  .filters__toggle { position: relative; }
  .filters__toggle[aria-expanded="true"] { background: var(--arrow-bg); color: var(--arrow-fg); }
  .filters__dot { position: absolute; top: 5px; right: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--cta-bg); }
  .filters__toggle[aria-expanded="true"] .filters__dot { background: var(--arrow-fg); }
  .filters { margin: -10px 0 22px; }
  .filters__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .sec--dark { --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --chev-set: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23111827' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
  .sec--snow { --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23111827' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --chev-set: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
  .filters .chipfield {
    -webkit-appearance: none; appearance: none; width: auto; max-width: 100%; height: 38px; padding: 0 32px 0 14px;
    border: 1px solid currentColor; border-radius: 999px; background: transparent var(--chev) no-repeat right 12px center / 12px;
    color: inherit; font: inherit; line-height: 1; opacity: .75; cursor: pointer; transition: opacity .2s, background-color .2s;
  }
  .filters .chipfield:hover { opacity: 1; }
  .filters .chipfield option { background: #fff; color: var(--ink); }
  .filters .chipfield--q { width: 190px; padding-right: 14px; background-image: none; cursor: text; }
  .filters .chipfield--q::placeholder { color: inherit; opacity: .7; }
  .filters .chipfield--q::-webkit-search-cancel-button { display: none; }
  .filters .chipfield.is-set { opacity: 1; border-color: transparent; background-color: var(--cta-bg); background-image: var(--chev-set); color: var(--cta-fg); }
  .filters .chipfield--q.is-set { background-image: none; }
  .filters__count { margin-left: auto; padding-left: 8px; opacity: .7; }
  .filters__empty { padding: 28px 0 8px; }
  .link-btn { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }


  /* ---------- Connections and chat ---------- */
  .match__actions, .rcard__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .match__actions { grid-column: 1 / -1; }
  .rcard__actions { margin-inline: 8px; }
  #drawer-chat .ct-sub { margin: 20px 0 10px; }
  #drawer-chat .note { color: var(--ink-mute); margin-bottom: 10px; }
  .chat-list { list-style: none; padding: 0; display: grid; gap: 8px; }
  .chat-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 12px; align-items: center; width: 100%; padding: 12px; border: 1px solid #cbd5e1; border-radius: var(--radius); background: #fff; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color .3s; }
  .chat-row:hover { border-color: #94a3b8; }
  .chat-row img { grid-row: span 2; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--blue-tint); }
  .chat-row strong { font-family: var(--font); font-weight: 700; }
  .chat-row span { overflow: hidden; color: var(--ink-mute); text-overflow: ellipsis; white-space: nowrap; }
  .chat-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
  .chat-head img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--blue-tint); }
  .chat-head strong { display: block; font-family: var(--font); font-size: 1.125rem; font-weight: 700; line-height: 1.1; }
  .chat-head span { color: var(--ink-mute); }
  .chat-log { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; align-content: start; min-height: 140px; max-height: 42vh; overflow-y: auto; }
  .bubble { max-width: 85%; padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: var(--blue-tint); overflow-wrap: anywhere; white-space: pre-wrap; }
  .bubble--me { justify-self: end; border-radius: 16px 16px 4px 16px; background: var(--green); color: #fff; }
  .chat-form { position: sticky; bottom: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; padding: 12px 0 24px; background: #fff; }
  .chat-form textarea { min-height: 48px; resize: none; }

  /* ---------- Create a trip ---------- */
  .ct-intro { padding-top: calc(72px + 28px); }
  .ct-intro h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); font-weight: 700; line-height: 1; letter-spacing: -.01em; }
  .ct-intro__actions { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px; }
  .ct-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: clamp(20px, 3vw, 40px); align-items: start; }
  .ct-form { --ring: var(--ink); padding: clamp(20px, 3vw, 32px); border-radius: var(--radius); background: #fff; color: var(--ink); }
  .ct-steps { grid-template-columns: repeat(7, 1fr); }
  .ct-form { scroll-margin-top: 88px; }
  .ct-form .step { gap: 16px; }
  .ct-form .step h3 { font-size: 1.75rem; }
  .ct-form .step h3:focus { outline: none; }
  .ct-sub { font-family: var(--font); font-size: 1.25rem; font-weight: 700; line-height: 1.1; }
  .ct-nav { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-ink); display: flex; gap: 8px; justify-content: space-between; }
  .ct-nav .pill:last-child { margin-left: auto; }
  .ct-preview { position: sticky; top: 96px; display: grid; gap: 12px; }
  .ct-preview h2 { font-family: var(--mono); font-size: var(--text-size); font-weight: 500; line-height: 1.6; letter-spacing: 0; }
  .ct-list { list-style: none; padding: 0; display: grid; gap: 10px; }
  .ct-rep { display: grid; gap: 10px; padding: 14px; border: 1px solid #cbd5e1; border-radius: var(--radius); }
  .ct-rep__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
  .ct-rep__head strong { font-weight: 500; }
  .ct-mini { min-height: 36px; padding: .5rem 1rem; }
  .ct-more { padding: 14px 16px; border: 1px solid #cbd5e1; border-radius: var(--radius); }
  .ct-more > summary { cursor: pointer; font-weight: 500; }
  .ct-more[open] > summary { margin-bottom: 14px; }
  .ct-more > .field, .ct-more > .ct-list, .ct-more > .field-row { margin-top: 12px; }
  .ct-totals { padding: 14px 16px; border: 1px solid #cbd5e1; border-radius: var(--radius); background: #fff; display: grid; gap: 4px; }
  .ct-totals strong { font-weight: 500; }
  .ct-sum { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 18px; padding: 14px 0; border-block: 1px solid var(--line-ink); }
  .ct-sum dd { overflow-wrap: anywhere; }
  .ct-photo { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
  .ct-photo img { width: 144px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; background: var(--blue-tint); }
  .ct-photo img.is-round { width: 72px; aspect-ratio: 1; border-radius: 50%; }
  .ct-rep .ct-photo img { width: 72px; aspect-ratio: 4 / 3; }
  .ct-days .ct-rep { gap: 8px; }
  .ct-done { display: grid; gap: 16px; }
  .ct-done h2 { font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 700; line-height: 1.1; }
  .ct-done .tcard { max-width: 420px; }

  /* ---------- Responsive ---------- */
  @media (max-width: 1023px) {
    .how__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .td-grid, .td-stays { grid-template-columns: minmax(0, 1fr); }
    .ct-grid { grid-template-columns: minmax(0, 1fr); }
    .ct-preview { position: static; }
    #builder:not([data-step="7"]) .ct-preview { display: none; }
    .td-reqs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .td-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .track { --cols: 2; }
    .track--trips { --cols: 1.15; }
    .foot { grid-template-columns: 1fr; }
  }
  @media (max-width: 860px) {
    .nav { display: none; }
  }
  @media (max-width: 760px) {
    .how__steps { grid-template-columns: minmax(0, 1fr); gap: 32px 0; }
    :root { --rail: 0px; --tabbar: 56px; }
    body { padding: var(--frame) var(--frame) calc(var(--tabbar) + var(--ticker) + var(--frame)) var(--frame); }
    .rail { inset: auto 0 0 0; width: auto; height: var(--tabbar); flex-direction: row; justify-content: space-around; border-top: 1px solid var(--line); }
    .rail__btn { flex: 1; width: auto; height: var(--tabbar); }
    .rail__btn::after { display: none; }
    .hdr { left: var(--frame); gap: 12px; padding: 0 12px; }
    .wordmark { font-size: .875rem; }
    .ticker { left: 0; bottom: var(--tabbar); }
    .skip { left: 12px; }
    dialog.drawer { inset: var(--frame); width: auto; }
    .track { --cols: 1.15; }
    .track--trips { --cols: 1.08; }
    .sec__head { flex-direction: column; align-items: flex-start; }
    .foot__cols { grid-template-columns: 1fr 1fr; }
    .hero__cta .pill { flex: 1 1 100%; }
    .field-row { grid-template-columns: minmax(0, 1fr); }
    .crew__list { gap: 10px 6px; }
    .crew__list li { width: 46px; }
    .td-hero { min-height: clamp(440px, 70vh, 640px); }
    .td-reqs, .td-pay, .td-steps { grid-template-columns: minmax(0, 1fr); }
    .td-day { grid-template-columns: 48px minmax(0, 1fr); gap: 8px 14px; }
    .td-day__plan, .td-day .td-tags { grid-column: 1 / -1; }
    .td-day .td-tags { justify-content: flex-start; }
    .td-slot { grid-template-columns: minmax(0, 1fr); }
    .td-slot p { grid-column: 1; }
    .td-cost > div { flex-wrap: wrap; }
    .td-card .specs { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .td-card .specs dt { margin-top: 12px; }
    .td-card .specs dt:first-child { margin-top: 0; }
    .ct-steps li { font-size: 0; }
    .hdr__cta .pill--ghost { display: none; }
    .filters__row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 4px 3px; margin: -4px -3px; }
    .filters__row::-webkit-scrollbar { display: none; }
    .filters__row > * { flex: none; }
    .filters__count { margin-left: 0; padding-left: 0; white-space: nowrap; }
    .td-stats .td-card { padding: 16px; }
    .td-stat strong { font-size: 1.5rem; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  }