@font-face {
  font-family: "Google Sans Flex";
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url("/assets/fonts/google-sans-flex-latin.90d4940cdf.woff2") format("woff2");
}
/* OneGo design system: the Pistache look. One fixed scheme: a dark avocado navigation, a warm green primary for
   actions, a pistachio highlight for the current place and progress, neutrals tinted toward green (hue 128),
   crisp corners, one sans family. Guide: README.md in this folder. Visual guide: design-system.html.

   Light is the default. Dark follows the system (prefers-color-scheme) unless the page says otherwise; put
   data-theme="dark" or .og-dark (or "light" / .og-light) on any ancestor to force a subtree.
   Brand colours (nav, primary, accent, hero, focus) are identical in light and dark. Dark changes only the
   neutrals and the two legibility roles (primary-ink, primary-soft), plus the status soft fills and inks.

   The mobile mockups' src/tokens/tokens.ts holds the same values. A change goes to both, and
   scripts/check-brand-tokens.py must pass. */

:root, .og-light, [data-theme="light"] {
  color-scheme: light;

  /* surfaces, back to front */
  --og-ground: oklch(97.4% .007 128);
  --og-panel: oklch(99.9% .0021 128);
  --og-panel-2: oklch(95.6% .0084 128);
  --og-fill: oklch(92.6% .0105 128);
  --og-pressed: oklch(92.6% .0105 128);
  --og-line: oklch(91.6% .0098 128);
  --og-line-strong: oklch(62% .014 128);
  --og-control-line: oklch(91.6% .0098 128);
  --og-disabled-fill: oklch(83% .012 128);
  --og-disabled-ink: oklch(43% .018 128);
  --og-skeleton: oklch(92.6% .0105 128);
  /* overlay and the inverse surface of a toast */
  --og-inverse: oklch(27% .02 132);
  --og-inverse-ink: oklch(97% .006 128);
  --og-inverse-action: oklch(92% .13 116);
  --og-scrim: oklch(15% .01 128 / .55);
  /* ink */
  --og-ink: oklch(18% .021 128);
  --og-ink-2: oklch(37% .021 128);
  --og-ink-3: oklch(50% .021 128);
  --og-ink-4: oklch(70% .014 128);
  /* status: solid, soft fill, readable ink */
  --og-success: oklch(56% .14 152);
  --og-success-soft: oklch(95.4% .045 152);
  --og-success-ink: oklch(42% .11 152);
  --og-warning: oklch(82% .16 85);
  --og-warning-soft: oklch(96.4% .06 90);
  --og-warning-ink: oklch(46% .1 70);
  --og-danger: oklch(57% .21 27);
  --og-danger-soft: oklch(95.6% .03 27);
  --og-danger-ink: oklch(49% .19 27);
  /* navigation column */
  --og-nav: oklch(27% .05 132);
  --og-nav-ink: oklch(97.5% .014 112);
  --og-nav-ink-2: oklch(83% .045 118);
  --og-nav-hover: oklch(33% .058 132);
  --og-nav-active: oklch(92% .13 116);
  --og-nav-active-ink: oklch(26% .05 132);
  /* primary (actions) and accent (current place, progress) */
  --og-primary: oklch(48% .13 138);
  --og-primary-hover: oklch(43% .13 138);
  --og-primary-press: oklch(39% .12 138);
  --og-on-primary: oklch(99% 0 0);
  --og-primary-soft: oklch(95.4% .045 125);
  --og-primary-ink: oklch(44% .12 138);
  --og-accent: oklch(92% .13 116);
  --og-on-accent: oklch(26% .05 132);
  /* hero band and focus */
  --og-hero: oklch(29% .055 132);
  --og-hero-2: oklch(36% .065 132);
  --og-hero-ink: oklch(98% .012 112);
  --og-hero-ink-2: oklch(84% .045 115);
  --og-focus: oklch(48% .13 138);
  /* shadows, for floating things only */
  --og-shadow-1: 0 1px 2px oklch(20% .01 128 / .06);
  --og-shadow-2: 0 6px 18px -6px oklch(20% .01 128 / .18), 0 2px 4px oklch(20% .01 128 / .06);
  --og-shadow-float: 0 16px 40px -12px oklch(20% .01 128 / .32);

  /* type */
  --og-font: "Google Sans Flex", system-ui, -apple-system, "Segoe UI", sans-serif;
  --og-fs-display: 40px; --og-fs-title: 26px; --og-fs-h2: 20px; --og-fs-h3: 17px;
  --og-fs-body: 15px; --og-fs-small: 14px; --og-fs-caption: 13px; --og-fs-micro: 12px; --og-fs-tile: 11px;
  --og-lh-display: 44px; --og-lh-title: 30px; --og-lh-h2: 26px; --og-lh-h3: 22px; --og-lh-body: 22px; --og-lh-small: 20px; --og-lh-caption: 18px;

  /* space, on a 4px grid */
  --og-s-1: 4px; --og-s-2: 8px; --og-s-3: 12px; --og-s-4: 16px; --og-s-5: 20px; --og-s-6: 24px; --og-s-8: 32px; --og-s-10: 40px; --og-s-12: 48px;
  --og-page-x: 16px;

  /* shape: crisp. 3 tags and small marks, 4 controls, 6 menus and inner blocks, 8 cards and sheets */
  --og-r-xs: 3px; --og-r-sm: 4px; --og-r-md: 6px; --og-r-lg: 8px;

  /* control heights: small, default and large buttons; the merchant kit uses --og-h-control */
  --og-h-sm: 32px; --og-h-md: 40px; --og-h-lg: 50px;
  --og-h-control: 36px;

  --og-ease: cubic-bezier(.2, 0, 0, 1);
  --og-dur: 120ms;
}

/* Merchant surfaces: 44px controls on a touch screen, 36px with a mouse. */
@media (pointer: coarse) {
  :root, .og-light, [data-theme="light"], .og-dark, [data-theme="dark"] { --og-h-control: 44px; }
}

.og-dark, [data-theme="dark"] {
  color-scheme: dark;

  /* surfaces, back to front */
  --og-ground: oklch(14.5% .0105 128);
  --og-panel: oklch(21% .0126 128);
  --og-panel-2: oklch(25.5% .014 128);
  --og-fill: oklch(27.5% .0154 128);
  --og-pressed: oklch(30.5% .0154 128);
  --og-line: oklch(31% .014 128);
  --og-line-strong: oklch(52% .014 128);
  --og-control-line: oklch(52% .014 128);
  --og-disabled-fill: oklch(35% .004 128);
  --og-disabled-ink: oklch(73% .004 128);
  --og-skeleton: oklch(31% .016 128);
  /* overlay and the inverse surface of a toast */
  --og-inverse: oklch(92% .008 128);
  --og-inverse-ink: oklch(18% .021 128);
  --og-inverse-action: oklch(44% .12 138);
  --og-scrim: oklch(5% 0 0 / .7);
  /* ink */
  --og-ink: oklch(97% .0056 128);
  --og-ink-2: oklch(86% .0105 128);
  --og-ink-3: oklch(71% .014 128);
  --og-ink-4: oklch(50% .014 128);
  /* status: solid, soft fill, readable ink */
  --og-success-soft: oklch(28% .05 152);
  --og-success-ink: oklch(84% .12 152);
  --og-warning-soft: oklch(30% .055 85);
  --og-warning-ink: oklch(87% .12 90);
  --og-danger-soft: oklch(29% .06 27);
  --og-danger-ink: oklch(81% .11 27);
  /* primary (actions) and accent (current place, progress) */
  --og-primary-soft: oklch(28% .05 125);
  --og-primary-ink: oklch(82% .14 138);
  /* shadows, for floating things only */
  --og-shadow-1: 0 1px 2px oklch(0% 0 0 / .4);
  --og-shadow-2: 0 6px 18px -6px oklch(0% 0 0 / .6);
  --og-shadow-float: 0 16px 40px -12px oklch(0% 0 0 / .7);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not(.og-light) {
    color-scheme: dark;

    /* surfaces, back to front */
    --og-ground: oklch(14.5% .0105 128);
    --og-panel: oklch(21% .0126 128);
    --og-panel-2: oklch(25.5% .014 128);
    --og-fill: oklch(27.5% .0154 128);
    --og-pressed: oklch(30.5% .0154 128);
    --og-line: oklch(31% .014 128);
    --og-line-strong: oklch(52% .014 128);
    --og-control-line: oklch(52% .014 128);
    --og-disabled-fill: oklch(35% .004 128);
    --og-disabled-ink: oklch(73% .004 128);
    --og-skeleton: oklch(31% .016 128);
    /* overlay and the inverse surface of a toast */
    --og-inverse: oklch(92% .008 128);
    --og-inverse-ink: oklch(18% .021 128);
    --og-inverse-action: oklch(44% .12 138);
    --og-scrim: oklch(5% 0 0 / .7);
    /* ink */
    --og-ink: oklch(97% .0056 128);
    --og-ink-2: oklch(86% .0105 128);
    --og-ink-3: oklch(71% .014 128);
    --og-ink-4: oklch(50% .014 128);
    /* status: solid, soft fill, readable ink */
    --og-success-soft: oklch(28% .05 152);
    --og-success-ink: oklch(84% .12 152);
    --og-warning-soft: oklch(30% .055 85);
    --og-warning-ink: oklch(87% .12 90);
    --og-danger-soft: oklch(29% .06 27);
    --og-danger-ink: oklch(81% .11 27);
    /* primary (actions) and accent (current place, progress) */
    --og-primary-soft: oklch(28% .05 125);
    --og-primary-ink: oklch(82% .14 138);
    /* shadows, for floating things only */
    --og-shadow-1: 0 1px 2px oklch(0% 0 0 / .4);
    --og-shadow-2: 0 6px 18px -6px oklch(0% 0 0 / .6);
    --og-shadow-float: 0 16px 40px -12px oklch(0% 0 0 / .7);
  }
}

/* base */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--og-ground); color: var(--og-ink); font-family: var(--og-font); font-size: var(--og-fs-body); line-height: var(--og-lh-body); font-weight: 400; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
.og-surface { background: var(--og-ground); color: var(--og-ink); font-family: var(--og-font); font-size: var(--og-fs-body); line-height: var(--og-lh-body); font-weight: 400; font-variant-numeric: tabular-nums; }
button, input, select, textarea { font-family: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; }
h1 { font-size: var(--og-fs-title); line-height: var(--og-lh-title); letter-spacing: -.015em; }
h2 { font-size: var(--og-fs-h2); line-height: var(--og-lh-h2); letter-spacing: -.01em; }
h3 { font-size: var(--og-fs-h3); line-height: var(--og-lh-h3); letter-spacing: -.01em; }
h4 { font-size: var(--og-fs-body); line-height: var(--og-lh-body); }
.og-display { font-size: var(--og-fs-display); line-height: var(--og-lh-display); font-weight: 700; letter-spacing: -.02em; }
p { margin: 0; }
a, .og-link { color: var(--og-primary-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; cursor: pointer; }
a:hover, .og-link:hover { color: var(--og-primary-hover); }
.og-dark a:hover, [data-theme="dark"] a:hover { color: var(--og-accent); }
img { display: block; max-width: 100%; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--og-focus); outline-offset: 2px; border-radius: var(--og-r-sm); }
::selection { background: var(--og-primary-soft); }

/* the wordmark: the word "OneGo" in text, nothing beside it (no symbol, monogram or icon) */
.og-wordmark { font-family: var(--og-font); font-weight: 700; letter-spacing: -.02em; line-height: 1; }

.og-muted { color: var(--og-ink-3); }
.og-label { font-size: var(--og-fs-micro); font-weight: 600; color: var(--og-ink-3); }
.og-small { font-size: var(--og-fs-small); line-height: var(--og-lh-small); }
.og-caption { font-size: var(--og-fs-caption); line-height: var(--og-lh-caption); color: var(--og-ink-3); }
.og-num { font-weight: 600; font-variant-numeric: tabular-nums; }

/* cards: a surface over the canvas with a hairline. Elevation is for floating things only. */
.og-panel { background: var(--og-panel); border: 1px solid var(--og-line); border-radius: var(--og-r-lg); padding: var(--og-s-4); }
.og-panel-2 { background: var(--og-panel-2); border-radius: var(--og-r-md); padding: var(--og-s-4); }
.og-panel-tap { cursor: pointer; transition: background var(--og-dur) var(--og-ease), border-color var(--og-dur) var(--og-ease); }
.og-panel-tap:hover { background: var(--og-panel-2); border-color: var(--og-line-strong); }
.og-panel-tap:active { background: var(--og-pressed); }
/* grouped list: one panel, rows split by hairlines (merchant surfaces) */
.og-list { background: var(--og-panel); border: 1px solid var(--og-line); border-radius: var(--og-r-lg); overflow: hidden; }
.og-list > * + * { border-top: 1px solid var(--og-line); }

/* navigation column and hero band: dark avocado, the same in light and dark */
.og-nav { background: var(--og-nav); color: var(--og-nav-ink); }
.og-nav-item { display: flex; align-items: center; gap: var(--og-s-3); min-height: var(--og-h-control); padding: 0 var(--og-s-3); border: 0; border-radius: var(--og-r-sm); background: transparent; color: var(--og-nav-ink-2); font: inherit; font-size: var(--og-fs-small); font-weight: 600; text-align: left; cursor: pointer; transition: background var(--og-dur) var(--og-ease), color var(--og-dur) var(--og-ease); }
.og-nav-item:hover { background: var(--og-nav-hover); color: var(--og-nav-ink); }
.og-nav-item.is-active, .og-nav-item[aria-current="page"] { background: var(--og-nav-active); color: var(--og-nav-active-ink); }
.og-nav :focus-visible { outline-color: var(--og-accent); }
.og-hero { background: var(--og-hero); color: var(--og-hero-ink); border-radius: var(--og-r-lg); padding: var(--og-s-6) var(--og-s-4); }
.og-hero .og-caption, .og-hero .og-muted { color: var(--og-hero-ink-2); }
.og-hero :focus-visible { outline-color: var(--og-accent); }

/* buttons: primary fills with the brand green; the default is a quiet surface with an outline */
.og-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--og-h-md); padding: 0 var(--og-s-4); border: 1px solid var(--og-control-line); border-radius: var(--og-r-sm);
  font: inherit; font-size: var(--og-fs-small); font-weight: 600; line-height: 1;
  color: var(--og-ink); background: var(--og-panel); cursor: pointer; user-select: none;
  transition: background var(--og-dur) var(--og-ease), border-color var(--og-dur) var(--og-ease), color var(--og-dur) var(--og-ease), transform var(--og-dur) var(--og-ease);
}
.og-btn:hover, .og-btn.is-hover { background: var(--og-panel-2); border-color: var(--og-line-strong); }
.og-btn:active, .og-btn.is-pressed { background: var(--og-pressed); transform: scale(.985); }
.og-btn-primary { background: var(--og-primary); border-color: var(--og-primary); color: var(--og-on-primary); }
.og-btn-primary:hover, .og-btn-primary.is-hover { background: var(--og-primary-hover); border-color: var(--og-primary-hover); }
.og-btn-primary:active, .og-btn-primary.is-pressed { background: var(--og-primary-press); border-color: var(--og-primary-press); }
.og-btn-ghost { background: transparent; border-color: transparent; color: var(--og-primary-ink); }
.og-btn-ghost:hover, .og-btn-ghost.is-hover { background: var(--og-primary-soft); border-color: transparent; }
.og-btn-ghost:active, .og-btn-ghost.is-pressed { background: var(--og-primary-soft); }
.og-btn-danger { background: var(--og-danger); border-color: var(--og-danger); color: var(--og-on-primary); }
.og-btn-danger:hover, .og-btn-danger.is-hover { background: color-mix(in oklch, var(--og-danger), black 10%); border-color: color-mix(in oklch, var(--og-danger), black 10%); }
.og-btn-danger:active, .og-btn-danger.is-pressed { background: color-mix(in oklch, var(--og-danger), black 20%); border-color: color-mix(in oklch, var(--og-danger), black 20%); }
/* .is-hover, .is-pressed and .is-focus draw a state on purpose, for the design-system page and screenshots */
.og-btn.is-focus { outline: 2px solid var(--og-focus); outline-offset: 2px; }
.og-btn-sm { min-height: var(--og-h-sm); padding: 0 var(--og-s-3); }
.og-btn-lg { min-height: var(--og-h-lg); padding: 0 var(--og-s-6); font-size: var(--og-fs-body); }
.og-btn-block { display: flex; width: 100%; }
.og-btn-icon { width: var(--og-h-md); min-height: var(--og-h-md); padding: 0; }
.og-btn-control { min-height: var(--og-h-control); }
/* disabled: a solid neutral under its own ink, never a faded copy of the colour */
.og-btn[disabled], .og-btn[aria-disabled="true"] { background: var(--og-disabled-fill); border-color: var(--og-disabled-fill); color: var(--og-disabled-ink); cursor: not-allowed; pointer-events: none; transform: none; }
.og-btn .og-btn-meta { font-weight: 400; opacity: .85; }

/* chips: selectors for categories and filters (customer surfaces). Selected = brand fill. */
.og-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 var(--og-s-3);
  border: 1px solid var(--og-control-line); border-radius: var(--og-r-sm); background: var(--og-panel); color: var(--og-ink-2);
  font: inherit; font-size: var(--og-fs-small); font-weight: 600; line-height: 1; cursor: pointer; white-space: nowrap;
  transition: background var(--og-dur) var(--og-ease), color var(--og-dur) var(--og-ease), border-color var(--og-dur) var(--og-ease);
}
.og-chip:hover { background: var(--og-panel-2); border-color: var(--og-line-strong); }
.og-chip.is-selected, .og-chip[aria-pressed="true"], .og-chip[aria-selected="true"] { background: var(--og-primary); border-color: var(--og-primary); color: var(--og-on-primary); }
.og-chip.is-selected:hover { background: var(--og-primary-hover); border-color: var(--og-primary-hover); }
.og-chip[disabled] { background: var(--og-disabled-fill); border-color: var(--og-disabled-fill); color: var(--og-disabled-ink); pointer-events: none; }

/* tags: small information badges, soft fill with readable ink */
.og-tag { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 0 var(--og-s-2); border-radius: var(--og-r-xs); font-size: var(--og-fs-micro); font-weight: 600; line-height: 1; background: var(--og-fill); color: var(--og-ink-2); white-space: nowrap; }
.og-tag-brand { background: var(--og-primary-soft); color: var(--og-primary-ink); }
.og-tag-success { background: var(--og-success-soft); color: var(--og-success-ink); }
.og-tag-warning { background: var(--og-warning-soft); color: var(--og-warning-ink); }
.og-tag-danger { background: var(--og-danger-soft); color: var(--og-danger-ink); }
.og-tag-solid-danger { background: var(--og-danger); color: var(--og-on-primary); }
.og-tag-solid-success { background: var(--og-success); color: var(--og-on-primary); }
.og-tag-accent { background: var(--og-accent); color: var(--og-on-accent); }
.og-time { display: inline-flex; align-items: center; min-height: 24px; padding: 0 var(--og-s-2); border-radius: var(--og-r-xs); background: var(--og-accent); color: var(--og-on-accent); font-size: var(--og-fs-micro); font-weight: 700; line-height: 1; white-space: nowrap; }

/* fields */
.og-field { display: flex; flex-direction: column; gap: 6px; }
.og-field > label { font-size: var(--og-fs-caption); font-weight: 600; color: var(--og-ink-2); }
.og-input {
  display: flex; align-items: center; gap: 10px; min-height: var(--og-h-md); padding: 0 var(--og-s-3);
  border: 1px solid var(--og-line-strong); border-radius: var(--og-r-sm); background: var(--og-panel); color: var(--og-ink);
  font: inherit; font-size: var(--og-fs-body); width: 100%;
  transition: border-color var(--og-dur) var(--og-ease), box-shadow var(--og-dur) var(--og-ease);
}
.og-input::placeholder { color: var(--og-ink-3); }
.og-input:hover { border-color: var(--og-ink-3); }
.og-input:focus, .og-input:focus-within, .og-input.is-focus { outline: none; border-color: var(--og-primary); box-shadow: 0 0 0 1px var(--og-primary); }
.og-input.is-error, .og-input[aria-invalid="true"] { border-color: var(--og-danger); box-shadow: 0 0 0 1px var(--og-danger); }
.og-input[disabled] { background: var(--og-disabled-fill); border-color: var(--og-disabled-fill); color: var(--og-disabled-ink); cursor: not-allowed; }
.og-input-wrap { position: relative; display: flex; align-items: center; gap: 10px; min-height: var(--og-h-md); padding: 0 var(--og-s-3); border: 1px solid var(--og-line-strong); border-radius: var(--og-r-sm); background: var(--og-panel); transition: border-color var(--og-dur) var(--og-ease), box-shadow var(--og-dur) var(--og-ease); }
.og-input-wrap:hover { border-color: var(--og-ink-3); }
.og-input-wrap:focus-within, .og-input-wrap.is-focus { border-color: var(--og-primary); box-shadow: 0 0 0 1px var(--og-primary); }
.og-input-wrap > input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: var(--og-fs-body); color: var(--og-ink); outline: none; }
.og-input-wrap > input::placeholder { color: var(--og-ink-3); }
.og-input-wrap > svg { flex: none; color: var(--og-ink-3); }
.og-error { font-size: var(--og-fs-caption); font-weight: 600; color: var(--og-danger-ink); }
.og-hint { font-size: var(--og-fs-caption); color: var(--og-ink-3); }

/* segmented control (filters on merchant surfaces) */
.og-seg { display: inline-flex; padding: 4px; border-radius: var(--og-r-md); background: var(--og-fill); gap: 2px; }
.og-seg-opt { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 0 var(--og-s-4); border: 1px solid transparent; border-radius: var(--og-r-sm); background: transparent; color: var(--og-ink-2); font: inherit; font-size: var(--og-fs-small); font-weight: 600; cursor: pointer; transition: background var(--og-dur) var(--og-ease), color var(--og-dur) var(--og-ease); }
.og-seg-opt:hover { color: var(--og-ink); background: var(--og-panel-2); }
.og-seg-opt.is-active, .og-seg-opt[aria-selected="true"] { background: var(--og-panel); border-color: var(--og-line-strong); color: var(--og-ink); }
.og-seg-block { display: flex; width: 100%; }
.og-seg-block .og-seg-opt { flex: 1; }

/* notices: success, warning, danger, and info in the brand tint (never blue) */
.og-notice { display: flex; align-items: flex-start; gap: var(--og-s-3); padding: var(--og-s-3) var(--og-s-4); border-radius: var(--og-r-md); background: var(--og-primary-soft); color: var(--og-primary-ink); }
.og-notice-title { font-size: var(--og-fs-small); font-weight: 700; }
.og-notice-body { font-size: var(--og-fs-caption); margin-top: 2px; opacity: .92; }
.og-notice .og-icon { margin-top: 1px; }
.og-notice-success { background: var(--og-success-soft); color: var(--og-success-ink); }
.og-notice-warning { background: var(--og-warning-soft); color: var(--og-warning-ink); }
.og-notice-danger { background: var(--og-danger-soft); color: var(--og-danger-ink); }
.og-notice-info { background: var(--og-primary-soft); color: var(--og-primary-ink); }

/* list row inside a panel */
.og-row { display: flex; align-items: center; gap: var(--og-s-3); }
.og-avatar { width: 40px; height: 40px; border-radius: 999px; background: var(--og-primary-soft); color: var(--og-primary-ink); display: grid; place-items: center; font-size: var(--og-fs-small); font-weight: 700; flex: none; }
.og-thumb { border-radius: var(--og-r-md); background: var(--og-skeleton) center/cover; overflow: hidden; }
.og-dark .og-thumb img, [data-theme="dark"] .og-thumb img { filter: brightness(.92); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not(.og-light) .og-thumb img { filter: brightness(.92); } }

/* tab bar */
.og-tabbar { display: flex; align-items: stretch; justify-content: space-around; padding: 8px 8px 0; background: var(--og-panel); border-top: 1px solid var(--og-line); }
.og-tab { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 64px; padding: 8px 10px 6px; border: 0; border-radius: var(--og-r-sm); background: transparent; color: var(--og-ink-3); font: inherit; font-size: var(--og-fs-tile); font-weight: 500; cursor: pointer; transition: color var(--og-dur) var(--og-ease), background var(--og-dur) var(--og-ease); }
.og-tab:hover { color: var(--og-ink); }
.og-tab:active { background: var(--og-pressed); }
.og-tab.is-active, .og-tab[aria-selected="true"] { color: var(--og-primary-ink); font-weight: 700; }
.og-tab svg { width: 24px; height: 24px; }

/* sheet and dialog: the things that float, and the only place for shadow */
.og-scrim { position: absolute; inset: 0; background: var(--og-scrim); }
.og-sheet { background: var(--og-panel); border-radius: var(--og-r-lg) var(--og-r-lg) 0 0; padding: 12px 20px 28px; box-shadow: var(--og-shadow-float); }
.og-sheet-grip { width: 36px; height: 4px; border-radius: var(--og-r-xs); background: var(--og-line-strong); margin: 0 auto 16px; }
.og-float { box-shadow: var(--og-shadow-float); }
.og-toast { background: var(--og-inverse); color: var(--og-inverse-ink); border-radius: var(--og-r-sm); padding: var(--og-s-3) var(--og-s-4); box-shadow: var(--og-shadow-2); }
.og-toast .og-toast-action { color: var(--og-inverse-action); font-weight: 700; }
.og-dark .og-toast .og-toast-action, [data-theme="dark"] .og-toast .og-toast-action { color: var(--og-inverse-action); }

/* switch: one of the two pill shapes (the other is the avatar) */
.og-switch { position: relative; width: 52px; height: 32px; border-radius: 999px; background: var(--og-line-strong); border: 0; cursor: pointer; padding: 0; transition: background var(--og-dur) var(--og-ease); }
.og-switch::after { content: ""; position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 999px; background: var(--og-on-primary); transition: transform var(--og-dur) var(--og-ease); }
.og-switch[aria-checked="true"], .og-switch.is-on { background: var(--og-primary); }
.og-switch[aria-checked="true"]::after, .og-switch.is-on::after { transform: translateX(20px); }
.og-switch[disabled] { background: var(--og-disabled-fill); cursor: not-allowed; }
.og-switch[disabled]::after { background: var(--og-disabled-ink); }

/* icons: Lucide, stroke 1.75 */
.og-icon { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }

@media (prefers-color-scheme: dark) {
  :root {
    --og-h-control: 44px;
  }
}


/* page */
:root {
  --gx: clamp(16px, 4.6vw, 72px);
  --gap: clamp(16px, 2vw, 32px);
  --band-y: clamp(64px, 9vw, 144px);
  --rule: 3px;
}
/* the optical size of display lines, pinned per screen so both engines agree */
:root { --opsz-display: 40; }
@media (min-width: 900px) { :root { --opsz-display: 80; } }
@media (min-width: 1300px) { :root { --opsz-display: 112; } }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--og-line-strong) var(--og-ground); }
body { font-size: 17px; line-height: 1.6; font-optical-sizing: auto; overflow-x: clip; min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; outline: none; }
::selection { background: var(--og-accent); color: var(--og-on-accent); }
img { height: auto; }
figure { margin: 0; }
p, li, dd { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
a { transition: color var(--og-dur) var(--og-ease); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mono { font-weight: 800; font-stretch: 75%; font-variation-settings: "wdth" 75, "opsz" var(--opsz-display); line-height: 1; letter-spacing: -.015em; text-wrap: balance; }

/* dark surfaces: header, footer, the home page's bands. Same in both themes. */
.site-header, .site-footer, .page-root, .page-404 { background: var(--og-hero); color: var(--og-hero-ink); }
.site-header :focus-visible, .site-footer :focus-visible, .page-root :focus-visible, .page-404 :focus-visible { outline-color: var(--og-accent); }

/* links drawn as buttons keep the button's colours in every state */
a.og-btn, a.og-btn:hover, a.og-btn:active { text-decoration: none; color: var(--og-ink); }
a.og-btn-primary, a.og-btn-primary:hover, a.og-btn-primary:active { color: var(--og-on-primary); }
.og-btn .og-icon { transition: transform var(--og-dur) var(--og-ease); }
.og-btn:hover .og-icon:last-child { transform: translateX(2px); }
.btn-line, a.btn-line { background: transparent; color: var(--og-hero-ink); border-color: var(--og-hero-ink-2); }
a.btn-line:hover, .btn-line:hover { background: var(--og-hero-2); border-color: var(--og-hero-ink); color: var(--og-hero-ink); }
a.btn-line:active, .btn-line:active { background: var(--og-nav-hover); color: var(--og-hero-ink); }

.skip { position: absolute; left: var(--gx); top: -80px; z-index: 10; padding: var(--og-s-2) var(--og-s-4); border-radius: var(--og-r-sm); background: var(--og-accent); color: var(--og-on-accent); }
.skip:focus-visible { top: var(--og-s-3); outline-color: var(--og-hero); }
a.skip, a.skip:hover { color: var(--og-on-accent); }

/* header */
.site-header { display: flex; align-items: center; gap: var(--og-s-6); padding: var(--og-s-4) var(--gx); }
.wordmark { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1; color: inherit; text-decoration: none; }
a.wordmark { color: var(--og-hero-ink); }
a.wordmark:hover { color: var(--og-accent); }
.site-sections { display: flex; gap: var(--og-s-6); margin-left: auto; }
.site-sections a, .footer-links a, .footer-contact a { color: var(--og-hero-ink); font-weight: 600; text-decoration: none; }
.site-sections a:hover, .footer-links a:hover, .footer-contact a:hover { color: var(--og-accent); text-decoration: underline; }
.site-actions { display: flex; align-items: center; gap: var(--og-s-3); margin-left: auto; }
.site-sections + .site-actions { margin-left: 0; }
.lang-switch { display: flex; gap: 2px; }
.lang-opt { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--og-s-3); border-radius: var(--og-r-sm); font-size: var(--og-fs-small); color: var(--og-hero-ink-2); text-decoration: none; }
a.lang-opt:hover { color: var(--og-hero-ink); background: var(--og-nav-hover); }
a.lang-opt:active { background: var(--og-hero-2); }
.lang-opt[aria-current] { color: var(--og-hero-ink); background: var(--og-hero-2); }
.site-header .btn-shop { flex: none; white-space: nowrap; background: var(--og-accent); border-color: var(--og-accent); color: var(--og-on-accent); }
.site-header a.btn-shop:hover { background: var(--og-hero-ink); border-color: var(--og-hero-ink); color: var(--og-on-accent); }
.site-header a.btn-shop:active { background: var(--og-hero-ink-2); color: var(--og-on-accent); }
.site-header .btn-shop:focus-visible { outline-color: var(--og-accent); }

/* footer */
.site-footer { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--og-s-8) var(--gap); padding: var(--og-s-12) var(--gx) var(--og-s-8); font-size: var(--og-fs-small); line-height: 1.5; color: var(--og-hero-ink-2); }
.footer-brand { display: flex; flex-direction: column; gap: var(--og-s-3); max-width: 28em; }
.footer-brand .wordmark { color: var(--og-hero-ink); }
.footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--og-s-2); }
.footer-contact { display: flex; flex-direction: column; gap: var(--og-s-1); }
.footer-meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--og-s-2) var(--og-s-6); padding-top: var(--og-s-6); border-top: 1px solid var(--og-hero-2); }

/* long-form pages: terms, privacy, support, account deletion. The article's
   markup is hashed (legal-documents.ts): only these rules may change. */
.page-terms main, .page-privacy main, .page-support main, .page-delete-account main, .page-merchant-agreement main { padding: clamp(40px, 6vw, 88px) var(--gx) clamp(64px, 8vw, 120px); }
/* 38em keeps body lines near 75 characters */
.legal { display: flex; flex-direction: column; gap: var(--og-s-10); max-width: 38em; font-size: 17px; line-height: 1.65; }
.legal-head { display: flex; flex-direction: column; gap: var(--og-s-4); }
.legal-head h1 { font-size: clamp(40px, 6.4vw, 84px); line-height: 1.02; font-weight: 700; letter-spacing: -.02em; overflow-wrap: break-word; hyphens: auto; text-wrap: balance; color: var(--og-ink); }
.legal-head .og-caption { font-size: 15px; font-weight: 600; color: var(--og-ink-2); }
.legal-head > p:not(.og-caption) { font-size: 19px; line-height: 1.55; color: var(--og-ink); }
.legal-section { display: flex; flex-direction: column; gap: var(--og-s-4); padding-top: var(--og-s-5); border-top: 2px solid var(--og-ink); scroll-margin-top: var(--og-s-6); }
.legal-section h2 { font-size: clamp(24px, 2.4vw, 30px); line-height: 1.15; font-weight: 700; font-stretch: 90%; font-variation-settings: "wdth" 90, "opsz" 32; letter-spacing: -.01em; }
.legal p, .legal li { color: var(--og-ink-2); overflow-wrap: break-word; }
.legal strong { color: var(--og-ink); font-weight: 700; }
.legal ul, .legal ol { margin: 0; padding-left: var(--og-s-6); display: flex; flex-direction: column; gap: var(--og-s-2); }
.legal li::marker { color: var(--og-primary-ink); font-weight: 700; }
.legal-toc { display: flex; flex-direction: column; gap: var(--og-s-3); padding: var(--og-s-5) var(--og-s-6); border: 0; border-radius: var(--og-r-lg); background: var(--og-primary-soft); }
.legal-toc h2.og-label { font-size: var(--og-fs-small); font-weight: 700; color: var(--og-ink); }
.legal-toc ol { font-size: 15px; line-height: 1.4; gap: var(--og-s-2); }
.legal-toc li { color: var(--og-ink); }
.legal-toc a { color: var(--og-ink); font-weight: 600; text-decoration-color: var(--og-line-strong); }
.legal-toc a:hover { color: var(--og-primary-ink); text-decoration-color: currentColor; }
.legal-note { display: block; font-size: 16px; line-height: 1.55; }
.legal-table { max-width: 100%; min-width: 0; overflow-x: auto; border: 1px solid var(--og-line-strong); border-radius: var(--og-r-md); }
.legal-table:focus-visible { outline: 2px solid var(--og-focus); outline-offset: 2px; }
.legal-table table { border-collapse: collapse; width: 100%; min-width: 480px; font-size: 15px; line-height: 1.5; }
.legal-table th, .legal-table td { padding: var(--og-s-3) var(--og-s-4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--og-line); color: var(--og-ink-2); }
.legal-table th { color: var(--og-ink); font-weight: 700; background: var(--og-panel-2); white-space: nowrap; }
.legal-table tbody tr:last-child td { border-bottom: 0; }
mark.todo { background: var(--og-warning-soft); color: var(--og-warning-ink); font-weight: 700; padding: 0 var(--og-s-1); border-radius: var(--og-r-xs); box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* a wide screen reads with the contents beside the text, kept in view */
@media (min-width: 1100px) {
  .legal:has(> .legal-toc) { display: grid; grid-template-columns: 280px minmax(0, 38em); column-gap: clamp(48px, 5vw, 96px); row-gap: 0; max-width: none; }
  .legal:has(> .legal-toc) > * { grid-column: 2; margin-bottom: var(--og-s-10); }
  .legal:has(> .legal-toc) > .legal-toc { grid-column: 1; grid-row: 1 / span 60; align-self: start; position: sticky; top: var(--og-s-6); max-height: calc(100vh - 48px); overflow-y: auto; margin-bottom: 0; }
}

/* root language chooser and 404: the dark band as the whole page */
.page-root main, .page-404 main { display: flex; flex-direction: column; justify-content: center; gap: var(--og-s-10); width: 100%; max-width: 760px; margin: 0 auto; padding: var(--og-s-12) var(--gx); }
.page-root .wordmark { font-size: clamp(56px, 12vw, 120px); }
.chooser-choices { display: flex; flex-direction: column; gap: var(--og-s-3); }
.choice { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--og-s-1) var(--og-s-4); padding: var(--og-s-5) var(--og-s-6); border: 1px solid var(--og-hero-ink-2); border-radius: var(--og-r-lg); color: var(--og-hero-ink); text-decoration: none; transition: background var(--og-dur) var(--og-ease), border-color var(--og-dur) var(--og-ease); }
.choice .og-icon { grid-column: 2; grid-row: 1 / span 2; width: 28px; height: 28px; }
.choice-name { font-size: clamp(32px, 6vw, 48px); line-height: 1; font-weight: 800; font-stretch: 75%; font-variation-settings: "wdth" 75, "opsz" var(--opsz-display); letter-spacing: -.015em; }
.choice-line { font-size: 17px; line-height: 1.4; font-weight: 400; color: var(--og-hero-ink-2); }
a.choice:hover { background: var(--og-hero-2); border-color: var(--og-hero-ink); color: var(--og-hero-ink); }
a.choice:active { background: var(--og-nav-hover); }
.choice:first-child { background: var(--og-accent); border-color: var(--og-accent); color: var(--og-on-accent); }
.choice:first-child .choice-line { color: var(--og-on-accent); }
a.choice:first-child:hover { background: var(--og-hero-ink); border-color: var(--og-hero-ink); color: var(--og-on-accent); }
.choice:first-child:focus-visible { outline-color: var(--og-hero-ink); }
.page-404 .wordmark { font-size: 28px; align-self: flex-start; }
.nf-lang { display: flex; flex-direction: column; gap: var(--og-s-5); align-items: flex-start; }
.nf-lang .mono { font-size: clamp(44px, 9vw, 96px); color: var(--og-hero-ink); }
.nf-lang + .nf-lang { padding-top: var(--og-s-8); border-top: 1px solid var(--og-hero-2); }

@media (max-width: 999px) {
  .site-sections { display: none; }
  .site-sections + .site-actions { margin-left: auto; }
}
@media (max-width: 719px) {
  .site-footer { grid-template-columns: 1fr; gap: var(--og-s-6); }
  .footer-meta { padding-top: var(--og-s-4); }
}
/* phone: the shop button stays in the header; the switch names only the other language */
@media (max-width: 559px) {
  .site-header { gap: var(--og-s-3); padding-top: var(--og-s-3); padding-bottom: var(--og-s-3); }
  .wordmark { font-size: 22px; }
  .site-actions { gap: var(--og-s-1); }
  .lang-opt[aria-current] { display: none; }
  .lang-opt { padding: 0 var(--og-s-2); }
  .site-header .btn-shop { min-height: 40px; padding: 0 var(--og-s-3); font-size: var(--og-fs-small); }
}
/* narrow phones: the longer French button label has to fit beside the wordmark and the switch */
@media (max-width: 419px) {
  .site-header { gap: var(--og-s-2); }
  .wordmark { font-size: 20px; }
  .lang-opt { padding: 0 6px; }
  .site-header .btn-shop { padding: 0 10px; font-size: 13px; }
}
@media (max-width: 359px) {
  .site-header { gap: var(--og-s-1); padding-left: var(--og-s-3); padding-right: var(--og-s-3); }
  .wordmark { font-size: 18px; }
  .lang-opt { padding: 0 4px; }
  .site-header .btn-shop { padding: 0 8px; font-size: 12px; }
}


/* ---------- home ---------- */
.page-home main { font-size: 18px; line-height: 1.55; }
.page-home .lead { font-size: clamp(19px, 1.5vw, 22px); line-height: 1.5; max-width: 36em; }
.page-home .ph { position: relative; overflow: hidden; background: var(--og-hero-2); }
.page-home .ph img, .month td.hit img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nw { white-space: nowrap; }
.cta { min-height: 52px; padding: 0 var(--og-s-5); gap: 10px; font-size: 16px; }
.cta .og-icon { width: 20px; height: 20px; }
.hero :focus-visible, .cal-band :focus-visible, .shops :focus-visible { outline-color: var(--og-accent); }

/* hero: dark avocado, continuous with the header */
.hero { background: var(--og-hero); color: var(--og-hero-ink); padding-bottom: clamp(48px, 6vw, 96px); }
.poster {
  display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--og-s-3);
  padding: var(--og-s-2) var(--gx) 0;
  font-size: min(15.4vw, 112px);
}
.poster-title {
  grid-column: 1 / -1; grid-row: 1 / 6;
  display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid;
  margin: 0; font-size: 1em; line-height: .86; color: var(--og-hero-ink);
}
.poster .ln { display: block; white-space: nowrap; padding-top: .05em; }
.ln-1 { grid-row: 1; } .ph-1 { grid-row: 2; } .ln-2 { grid-row: 3; } .ph-2 { grid-row: 4; } .ln-3 { grid-row: 5; }
.poster:lang(en) .ln-3 { font-size: .8em; }
.ph-1, .ph-2, .slab { grid-column: 1 / -1; }
.ph-1, .ph-2 { height: 44vw; }
.ph-1 { margin: 0 calc(-1 * var(--gx)) 0 16vw; }
.ph-2 { margin: 0 16vw 0 calc(-1 * var(--gx)); }
.ph-1 img { object-position: 30% 60%; }
.ph-2 img { object-position: 35% 50%; }
.slab {
  grid-row: 6; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--og-s-1);
  margin: var(--og-s-2) 0 0; padding: var(--og-s-4) var(--og-s-5);
  background: var(--og-accent); color: var(--og-on-accent); font-size: 17px; line-height: 1.35;
}
.slab strong { font-size: clamp(24px, 2.2vw, 36px); line-height: 1; font-weight: 800; font-stretch: 80%; font-variation-settings: "wdth" 80, "opsz" 32; letter-spacing: -.015em; }
.hero-foot { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--gap); align-items: end; padding: var(--og-s-8) var(--gx) 0; }
.hero-foot .lead { color: var(--og-hero-ink); }
.hero-act { display: flex; flex-direction: column; gap: var(--og-s-4); margin-top: var(--og-s-8); }
.hero-act p { font-size: 16px; line-height: 1.45; color: var(--og-hero-ink-2); max-width: 30em; }
.hero-act .row { display: flex; flex-wrap: wrap; gap: var(--og-s-3); }
.hero-act .og-btn { width: 100%; }

/* calendar: the one thing only OneGo does */
.cal-head { padding: var(--band-y) var(--gx) clamp(40px, 5vw, 72px); }
.cal-head h2 { font-size: clamp(40px, 7vw, 120px); color: var(--og-ink); }
.cal-head h2 em { display: block; font-style: normal; color: var(--og-primary-ink); }
.cal-head .lead { margin-top: clamp(20px, 2.4vw, 36px); color: var(--og-ink); }
.cal-band { background: var(--og-hero); color: var(--og-hero-ink); padding: clamp(40px, 5vw, 80px) var(--gx) clamp(48px, 6vw, 96px); }
.cal-grid { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--gap); align-items: start; }
.month { width: 100%; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; }
.month caption { caption-side: top; text-align: left; padding-bottom: var(--og-s-4); font-size: clamp(30px, 3.2vw, 48px); line-height: 1; font-weight: 800; font-stretch: 75%; font-variation-settings: "wdth" 75, "opsz" var(--opsz-display); letter-spacing: -.015em; color: var(--og-hero-ink); }
.month th { padding: var(--og-s-2) var(--og-s-1); text-align: left; font-size: 13px; font-weight: 600; color: var(--og-hero-ink-2); border-bottom: 1px solid var(--og-hero-2); }
.month th abbr { text-decoration: none; }
.month th.is-day { background: var(--og-accent); color: var(--og-on-accent); }
.month td { position: relative; height: 13vw; padding: var(--og-s-1) var(--og-s-2); vertical-align: top; border: 1px solid var(--og-hero-2); font-size: 16px; font-weight: 600; color: var(--og-hero-ink); }
.month td.is-day { background: var(--og-hero-2); }
.month td.pad { background: var(--og-nav); }
.month td.hit { padding: 0; outline: 3px solid var(--og-accent); outline-offset: -2px; z-index: 1; }
.month td.hit .d, .month td.hit .tag { position: absolute; z-index: 1; padding: 1px var(--og-s-1); border-radius: var(--og-r-xs); background: var(--og-accent); color: var(--og-on-accent); line-height: 1.2; }
.month td.hit .d { top: 3px; left: 3px; font-weight: 800; }
.month td.hit .tag { bottom: 3px; left: 3px; font-size: var(--og-fs-micro); font-weight: 700; white-space: nowrap; display: none; }
.cal-notes { display: flex; flex-direction: column; gap: var(--og-s-8); padding-top: var(--og-s-10); }
.cal-notes h3 { font-size: clamp(28px, 2.6vw, 40px); line-height: 1; font-weight: 800; font-stretch: 80%; font-variation-settings: "wdth" 80, "opsz" var(--opsz-display); letter-spacing: -.015em; text-wrap: balance; }
.cal-notes p { margin-top: var(--og-s-3); color: var(--og-hero-ink); }
.year { margin-top: clamp(48px, 6vw, 88px); }
.months { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--og-s-4) var(--og-s-2); }
.months li { display: flex; flex-direction: column; gap: var(--og-s-2); min-width: 0; }
.months .mo { font-size: 15px; line-height: 1.2; min-height: 2.4em; font-weight: 600; color: var(--og-hero-ink-2); white-space: nowrap; }
.months .yr { display: block; color: var(--og-hero-ink); }
.months .day { display: flex; flex-direction: column; justify-content: space-between; gap: var(--og-s-2); min-height: clamp(92px, 8.4vw, 140px); padding: var(--og-s-2); border-radius: var(--og-r-xs); background: var(--og-accent); color: var(--og-on-accent); }
.months .day b { font-size: clamp(44px, 4.6vw, 80px); line-height: .8; font-weight: 800; font-stretch: 75%; font-variation-settings: "wdth" 75, "opsz" var(--opsz-display); letter-spacing: -.03em; }
.months .day i { font-style: normal; font-size: 14px; font-weight: 700; line-height: 1.15; }
.months .is-skipped .day { background: transparent; box-shadow: inset 0 0 0 2px var(--og-hero-ink-2); color: var(--og-hero-ink); }
.months .is-skipped .day b { color: var(--og-hero-ink-2); text-decoration: line-through; text-decoration-thickness: .06em; }
.months .is-skipped .day i { color: var(--og-accent); }
.year figcaption { margin-top: var(--og-s-4); font-size: 15px; line-height: 1.45; color: var(--og-hero-ink-2); max-width: 60em; }

/* how it works: one sequence on the pistachio band */
.how { background: var(--og-accent); color: var(--og-on-accent); padding: var(--band-y) var(--gx) clamp(72px, 9vw, 140px); }
.how > h2 { font-size: clamp(40px, 7.6vw, 128px); line-height: 1; font-weight: 800; font-stretch: 75%; font-variation-settings: "wdth" 75, "opsz" var(--opsz-display); letter-spacing: -.015em; }
.how :focus-visible { outline-color: var(--og-on-accent); }
.steps { list-style: none; margin: clamp(32px, 4vw, 64px) 0 0; padding: 0; }
.step { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--gap); align-items: start; padding: var(--og-s-5) 0 clamp(32px, 4vw, 56px); border-top: var(--rule) solid var(--og-on-accent); }
.step h3 { font-size: clamp(40px, 5.4vw, 92px); }
.step > p { padding-top: var(--og-s-3); font-size: clamp(18px, 1.4vw, 21px); line-height: 1.5; color: var(--og-on-accent); max-width: 32em; }
.step-3 { padding-bottom: 0; }
.ph-step { display: none; }
.code-card {
  justify-self: start; position: relative; z-index: 2;
  width: min(100%, 320px); margin: var(--og-s-8) 0 -96px var(--og-s-2);
  padding: var(--og-s-5) var(--og-s-5) var(--og-s-4);
  background: var(--og-panel); color: var(--og-ink); border: 1px solid var(--og-line); border-radius: var(--og-r-lg);
  box-shadow: var(--og-shadow-float); rotate: -2deg;
}
.code-top { display: flex; align-items: center; justify-content: space-between; gap: var(--og-s-3); font-size: var(--og-fs-small); font-weight: 700; }
.qr { display: block; width: 62%; height: auto; margin: var(--og-s-4) 0 var(--og-s-3); fill: var(--og-ink); }
.code-card .code { font-size: 40px; line-height: 1; font-weight: 800; font-stretch: 80%; font-variation-settings: "wdth" 80, "opsz" 40; letter-spacing: .03em; white-space: nowrap; }
.code-date { margin-top: var(--og-s-4); padding-top: var(--og-s-3); border-top: 1px dashed var(--og-line-strong); font-size: 16px; font-weight: 700; line-height: 1.3; }
.code-meta { font-size: var(--og-fs-small); line-height: 1.4; color: var(--og-ink-2); }

/* shops: the dark band */
.shops { background: var(--og-hero); color: var(--og-hero-ink); padding-top: 152px; }
.shops-body { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--gap); padding: 0 var(--gx); }
.shops h2 { font-size: clamp(40px, 6.6vw, 112px); color: var(--og-hero-ink); }
.shops h2 .line { display: block; }
.shops .lead { margin-top: clamp(20px, 2.4vw, 36px); color: var(--og-hero-ink); }
.facts { margin: clamp(28px, 3vw, 44px) 0 0; }
.facts div { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--og-s-1); padding: var(--og-s-4) 0; border-top: 1px solid var(--og-hero-2); }
.facts div:last-child { border-bottom: 1px solid var(--og-hero-2); }
.facts dt { font-size: clamp(22px, 1.9vw, 28px); line-height: 1.05; font-weight: 800; font-stretch: 80%; font-variation-settings: "wdth" 80, "opsz" 32; letter-spacing: -.01em; }
.facts dd { margin: 0; color: var(--og-hero-ink); }
.ph-shops { aspect-ratio: 3 / 2; margin: var(--og-s-10) calc(-1 * var(--gx)) 0 16vw; }
.ph-shops img { object-position: 35% 50%; }
.shops-slab { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--gap); align-items: center; margin-top: clamp(48px, 6vw, 88px); padding: clamp(32px, 4vw, 56px) var(--gx); background: var(--og-accent); color: var(--og-on-accent); }
.shops-slab .big { font-size: clamp(36px, 3.8vw, 64px); line-height: 1.02; font-weight: 800; font-stretch: 75%; font-variation-settings: "wdth" 75, "opsz" var(--opsz-display); letter-spacing: -.015em; text-wrap: balance; }
.shops-slab .act { display: flex; flex-direction: column; align-items: flex-start; gap: var(--og-s-3); margin-top: var(--og-s-6); }
.shops-slab .act p { font-size: 16px; line-height: 1.45; }
.shops-slab .og-btn { width: 100%; }
.shops-slab :focus-visible { outline-color: var(--og-on-accent); }
a.btn-on-accent { background: var(--og-hero); border-color: var(--og-hero); color: var(--og-hero-ink); }
a.btn-on-accent:hover { background: var(--og-hero-2); border-color: var(--og-hero-2); color: var(--og-hero-ink); }
a.btn-on-accent:active { background: var(--og-nav); color: var(--og-hero-ink); }
.shops-canada { padding: var(--og-s-5) var(--gx) var(--og-s-6); font-size: 16px; color: var(--og-hero-ink); }

/* the app is coming */
.app { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--gap); align-items: end; padding: var(--band-y) var(--gx); }
.app h2 { font-size: clamp(40px, 8.6vw, 148px); color: var(--og-ink); }
.app .side { display: flex; flex-direction: column; align-items: flex-start; gap: var(--og-s-4); margin-top: var(--og-s-6); color: var(--og-ink); }
.app .og-btn { width: 100%; }
.by-email { font-size: 16px; color: var(--og-ink-2); }
.frieze { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 40vw 40vw; }
.frieze .ph { background: var(--og-fill); }
.frieze .ph:nth-child(1) img { object-position: 60% 50%; }
.frieze .ph:nth-child(3) img { object-position: 40% 60%; }

/* photos dim a little in dark, as the brand guide says */
@media (prefers-color-scheme: dark) {
  .page-home .ph img, .month td.hit img { filter: brightness(.92); }
}

/* the French display lines are the longest: below 360px they get a little smaller so none runs past the gutter */
@media (max-width: 359px) {
  .poster { font-size: 13.6vw; }
  .app h2 { font-size: 12vw; }
}

/* a phone's date cell is too small for a photo: the hit date is a solid pistachio cell, like the year strip */
@media (max-width: 599px) {
  .month td.hit { background: var(--og-accent); }
  .month td.hit > :not(.d):not(.tag):not(.vh) { display: none; }
  .month td.hit .d { top: 0; left: 0; padding: var(--og-s-1) var(--og-s-2); font-size: 17px; }
}

/* a tablet keeps one column but uses its width */
@media (min-width: 600px) {
  .month td { height: 11vw; padding: var(--og-s-2); }
  .month td.hit .tag { display: block; }
  .months { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .hero-act .og-btn, .shops-slab .og-btn, .app .og-btn { width: auto; }
}

/* ---------- wide: the 12-column composition ---------- */
@media (min-width: 900px) {
  .poster { grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: clamp(8px, 1vw, 16px); padding: clamp(12px, 2vw, 32px) 0 0 var(--gx); font-size: clamp(52px, 11vw, 176px); }
  .poster-title { grid-row: 1 / 4; }
  .ln-1 { grid-column: 1 / 8; grid-row: 1; }
  .ln-2 { grid-column: 4 / 13; grid-row: 2; padding-left: .12em; }
  .ln-3 { grid-column: 1 / 9; grid-row: 3; }
  .ph-1, .ph-2 { height: auto; }
  .ph-1 { grid-column: 8 / 13; grid-row: 1; margin: 0 0 0 var(--og-s-4); }
  .page-home .ph-1 img { inset: -100% auto auto 0; width: 128%; height: 300%; object-position: 35% 55%; }
  .ph-2 { grid-column: 1 / 4; grid-row: 2; margin: 0 0 0 calc(-1 * var(--gx)); }
  .slab { grid-column: 9 / 13; grid-row: 3; margin: 0 0 0 var(--og-s-4); }
  .poster:lang(en) .ln-3 { grid-column: 1 / 10; font-size: .84em; align-self: start; }
  .poster:lang(en) .slab { grid-column: 10 / 13; }
  .hero-foot { grid-template-columns: repeat(12, minmax(0, 1fr)); padding-top: clamp(32px, 4vw, 64px); }
  .hero-foot .lead { grid-column: 1 / 7; }
  .hero-act { grid-column: 8 / 13; margin-top: 0; }

  .cal-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .month { grid-column: 1 / 9; }
  .month th { padding: var(--og-s-2); font-size: var(--og-fs-small); }
  .month td { height: clamp(72px, 7.4vw, 116px); font-size: 17px; }
  .cal-notes { grid-column: 9 / 13; padding-top: clamp(56px, 5.4vw, 80px); }
  .months { grid-template-columns: repeat(12, minmax(0, 1fr)); }

  .step { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .step h3 { grid-column: 1 / 8; }
  .step > p { grid-column: 8 / 13; padding-top: .3em; }
  .ph-step { display: block; grid-column: 1 / 7; grid-row: 2; align-self: end; aspect-ratio: 3 / 2; margin: var(--og-s-8) 0 clamp(-200px, -14vw, -120px) calc(-1 * var(--gx)); z-index: 1; }
  .ph-step img { object-position: 50% 45%; }
  .code-card { grid-column: 8 / 12; grid-row: 2; margin: var(--og-s-8) 0 clamp(-200px, -14vw, -120px); rotate: -3deg; }

  .shops { padding-top: clamp(160px, 16vw, 260px); }
  .shops-body { grid-template-columns: repeat(12, minmax(0, 1fr)); padding-right: 0; }
  .shops-text { grid-column: 1 / 8; }
  .ph-shops { grid-column: 9 / 13; aspect-ratio: auto; min-height: 100%; margin: 0; }
  .facts div { grid-template-columns: 10em 1fr; gap: var(--og-s-4); }
  .shops-slab { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .shops-slab .big { grid-column: 1 / 8; }
  .shops-slab .act { grid-column: 8 / 13; margin-top: 0; }

  .app { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .app h2 { grid-column: 1 / 8; }
  .app .side { grid-column: 8 / 13; margin-top: 0; }
  .frieze { grid-template-columns: 1.3fr 1fr .8fr 1.2fr; grid-template-rows: none; height: clamp(180px, 22vw, 340px); }
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .ph-1 img { animation: og-wipe-l 1000ms cubic-bezier(.16, 1, .3, 1) 80ms both; }
  .ph-2 img { animation: og-wipe-r 1000ms cubic-bezier(.16, 1, .3, 1) 220ms both; }
  .slab { animation: og-rise 800ms cubic-bezier(.16, 1, .3, 1) 380ms both; }
  @keyframes og-wipe-l { from { clip-path: inset(0 0 0 100%); scale: 1.08; } to { clip-path: inset(0); scale: 1; } }
  @keyframes og-wipe-r { from { clip-path: inset(0 100% 0 0); scale: 1.08; } to { clip-path: inset(0); scale: 1; } }
  @keyframes og-rise { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
  @supports (animation-timeline: view()) {
    .months li:not(.is-skipped) .day { animation: og-light linear both; animation-timeline: view(); }
    .months li:nth-child(1) .day { animation-range: cover 2% cover 8%; }
    .months li:nth-child(2) .day { animation-range: cover 3% cover 9%; }
    .months li:nth-child(3) .day { animation-range: cover 4% cover 10%; }
    .months li:nth-child(4) .day { animation-range: cover 5% cover 11%; }
    .months li:nth-child(5) .day { animation-range: cover 6% cover 12%; }
    .months li:nth-child(6) .day { animation-range: cover 7% cover 13%; }
    .months li:nth-child(7) .day { animation-range: cover 8% cover 14%; }
    .months li:nth-child(8) .day { animation-range: cover 9% cover 15%; }
    .months li:nth-child(9) .day { animation-range: cover 10% cover 16%; }
    .months li:nth-child(10) .day { animation-range: cover 11% cover 17%; }
    .months li:nth-child(11) .day { animation-range: cover 12% cover 18%; }
    .months li:nth-child(12) .day { animation-range: cover 13% cover 19%; }
    @keyframes og-light { from { clip-path: inset(62% 0 0 0); } to { clip-path: inset(0); } }
  }
}