/* ==========================================================================
   Stow Cards — marketing site, Roastery edition
   The v2 site's pages and component vocabulary, restyled in the Roastery
   design language: oat paper, espresso and copper, slab display type and
   hard-shadow pill buttons. Every page loads this file; the homepage adds
   assets/home.css and assets/home.js for its interactive set pieces.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts: self-hosted, so no page asks a third party for them. woff2 files in
   assets/fonts/ (SIL OFL 1.1, each family's licence alongside), from
   @fontsource 5.3.0 (@fontsource/jetbrains-mono 5.2.8): the latin and
   latin-ext subsets of the weights the site uses. The browser downloads a
   file only when a page draws text in that face and range. Instrument Serif,
   used only on features.html, keeps its rule in features.css.
   -------------------------------------------------------------------------- */
/* Arvo: display fallback after Rockwell (latin only, as Google serves it) */
@font-face {
  font-family: "Arvo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/arvo-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Arvo";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/arvo-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Nunito Sans: body fallback after Avenir Next */
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/nunito-sans-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/nunito-sans-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/nunito-sans-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/nunito-sans-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/nunito-sans-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/nunito-sans-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/nunito-sans-latin-ext-800-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/nunito-sans-latin-800-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Inter: pass faces off Apple devices (--font-wallet), the gallery passes and the scanner screens */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/inter-latin-ext-300-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/inter-latin-300-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/inter-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/inter-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/inter-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/inter-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/inter-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/inter-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Roboto: Google Wallet faces (--font-google) */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/roboto-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/roboto-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/roboto-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/roboto-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* JetBrains Mono: code */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/jetbrains-mono-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Canvas + surfaces */
  --bg: #EFE5D6;            /* oat page canvas */
  --bg-alt: #E7DAC5;        /* alternating section tint */
  --bg-dark: #2B1A12;       /* espresso sections */
  --bg-darker: #20130D;     /* footer */
  --surface: #F7F1E7;       /* paper cards */
  --paper: #FFF8EE;
  --oat-2: #E6D8C3;
  --line: rgba(92, 58, 33, .16);
  --line-strong: rgba(92, 58, 33, .3);
  --line-dark: rgba(243, 233, 218, .12);

  /* Ink */
  --ink: #2B1A12;
  --ink-2: rgba(43, 26, 18, .8);
  --ink-3: rgba(43, 26, 18, .7);
  --ink-inv: #F3E9DA;
  --ink-inv-2: rgba(243, 233, 218, .76);
  --ink-inv-3: rgba(243, 233, 218, .6);

  /* Copper (text-safe tones on light; brighter tones on dark only). The accent: a pass-type theme below replaces these. */
  --brand: #8A5323;
  --brand-strong: #6F4119;
  --brand-chip: #7A4A1F;
  --brand-btn: #9A5B23;
  --brand-btn-hover: #8F5421;
  --brand-lip: #6F4119;
  --brand-bright: #D18A45;
  --brand-glow: #B87333;
  --brand-hl: #A8652B;      /* the hero headline highlight (large text) */
  --brand-pale: #F3C28F;    /* text on the roast-brown pricing band */
  --brand-tint: color-mix(in srgb, var(--brand-glow) 14%, transparent);
  --crema: #C8A27A;
  --olive: #3F6A2C;

  /* Functional (forms only) */
  --err: #9C3F34;

  /* Controls */
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-card: inset 0 1px 0 rgba(255, 255, 255, .8), 0 0 0 1px rgba(92, 58, 33, .12), 0 18px 30px -22px rgba(43, 26, 18, .55);
  --shadow-pop: 0 0 0 1px rgba(92, 58, 33, .12), 0 34px 60px -30px rgba(43, 26, 18, .7);
  --maxw: 1200px;
  --topbar-h: 72px;

  /* Fonts: the Roastery reference's type, with web-font fallbacks */
  --font-head: Rockwell, "Rockwell Nova", Arvo, "Roboto Slab", Georgia, serif;
  --font-body: "Avenir Next", Avenir, "Nunito Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Wallet pass faces: SF Pro on Apple devices, Inter elsewhere (the pass specimen sheet rule) */
  --font-wallet: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Helvetica Neue", Arial, sans-serif;
  /* Google Wallet cards: Google Sans and Roboto on Android, as on the specimen sheet */
  --font-google: "Google Sans Text", "Google Sans", Roboto, Arial, sans-serif;

  --bounce: cubic-bezier(.34, 1.56, .64, 1);
  --soft: cubic-bezier(.22, .8, .26, 1);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .17 0 0 0 0 .1 0 0 0 0 .07 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Pass-type accent themes. The homepage hero's pass-type switcher sets <html data-pass="<slug>">
   and remembers it in localStorage (stow.site.passType); a snippet in every page's <head> restores
   it before first paint. Loyalty cards is the copper above. Each theme swaps only the accent: the
   oat, espresso and crema neutrals, pass faces and data colours stay. Regenerate these lines with
   scripts/roastery-pass-themes.py whenever a pass colour in assets/home.js changes. */
/* Generated by scripts/roastery-pass-themes.py from the pass colours in assets/home.js */
:root[data-pass="stamp-cards"] { --brand: #395F9F; --brand-strong: #2C4B80; --brand-chip: #33548C; --brand-btn: #3E69B2; --brand-btn-hover: #3961A5; --brand-lip: #2C4B80; --brand-bright: #669AF0; --brand-glow: #5182D4; --brand-hl: #4674C1; --brand-pale: #ADCDFF; }
:root[data-pass="membership-cards"] { --brand: #49627B; --brand-strong: #384E63; --brand-chip: #41576E; --brand-btn: #4F6D8A; --brand-btn-hover: #49657F; --brand-lip: #384E63; --brand-bright: #7B9EC0; --brand-glow: #6586A6; --brand-hl: #597796; --brand-pale: #B5CEE8; }
:root[data-pass="coupons-offers"] { --brand: #99435C; --brand-strong: #7C3448; --brand-chip: #873C51; --brand-btn: #AB4966; --brand-btn-hover: #9F435E; --brand-lip: #7C3448; --brand-bright: #EA7594; --brand-glow: #CD5E7D; --brand-hl: #BA5270; --brand-pale: #FFB9C8; }
:root[data-pass="gift-cards"] { --brand: #8A5300; --brand-strong: #6E4100; --brand-chip: #7B4900; --brand-btn: #985C00; --brand-btn-hover: #8D5500; --brand-lip: #6E4100; --brand-bright: #DA870C; --brand-glow: #BB7200; --brand-hl: #A76600; --brand-pale: #FDC07E; }
:root[data-pass="event-tickets"] { --brand: #A9392D; --brand-strong: #892B22; --brand-chip: #953228; --brand-btn: #BE3C30; --brand-btn-hover: #B0382C; --brand-lip: #892B22; --brand-bright: #FF6A58; --brand-glow: #E25242; --brand-hl: #CE4538; --brand-pale: #FFBBAF; }
:root[data-pass="boarding-transit-passes"] { --brand: #2C6774; --brand-strong: #21525D; --brand-chip: #285C67; --brand-btn: #2E7381; --brand-btn-hover: #2B6A77; --brand-lip: #21525D; --brand-bright: #57A5B5; --brand-glow: #418D9C; --brand-hl: #377E8D; --brand-pale: #9ED4E0; }
:root[data-pass="access-passes"] { --brand: #68568F; --brand-strong: #534374; --brand-chip: #5D4C80; --brand-btn: #745EA1; --brand-btn-hover: #6B5795; --brand-lip: #534374; --brand-bright: #A68DDC; --brand-glow: #8E76C1; --brand-hl: #7F69AF; --brand-pale: #D3C3FE; }
:root[data-pass="business-id-cards"] { --brand: #576445; --brand-strong: #454F35; --brand-chip: #4E593E; --brand-btn: #606F4B; --brand-btn-hover: #596745; --brand-lip: #454F35; --brand-bright: #8EA175; --brand-glow: #778860; --brand-hl: #6A7A54; --brand-pale: #C2D0B1; }
:root[data-pass="insurance-policy-passes"] { --brand: #306960; --brand-strong: #24534B; --brand-chip: #2B5D55; --brand-btn: #32746A; --brand-btn-hover: #2F6C62; --brand-lip: #24534B; --brand-bright: #5CA79A; --brand-glow: #468F83; --brand-hl: #3B8075; --brand-pale: #A1D6CB; }
:root[data-pass="custom-passes"] { --brand: #715B4B; --brand-strong: #5B483A; --brand-chip: #655143; --brand-btn: #7E6552; --brand-btn-hover: #745E4C; --brand-lip: #5B483A; --brand-bright: #B2957D; --brand-glow: #997D68; --brand-hl: #8A6F5B; --brand-pale: #DEC7B6; }

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
/* A linked element (page.html#id) lands clear of the sticky header: its height, its 2px border and a 16px gap.
   A heading under an eyebrow keeps the eyebrow in view too. Only the URL's target is affected, so scripted
   scrolls (the homepage room, the carousels) keep their positions. */
:target { scroll-margin-top: calc(var(--topbar-h) + 18px); }
.eyebrow + :target { scroll-margin-top: calc(var(--topbar-h) + 56px); }

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

img, svg { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; }

::selection { background: color-mix(in srgb, var(--brand-glow) 28%, transparent); color: var(--ink); }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 .5em;
  line-height: 1.08;
  letter-spacing: -.01em;
}
h1 { font-size: clamp(2.4rem, 1.4rem + 3vw, 3.6rem); line-height: 1.04; text-wrap: balance; }
h2 { font-size: clamp(1.9rem, 1.3rem + 1.9vw, 2.8rem); line-height: 1.06; text-wrap: balance; }
h3 { font-size: 1.28rem; }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1em; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-strong); }
/* Links inside running text need more than colour to stand out */
main p a:not(.btn):not(.link-more), main li a:not(.btn):not(.link-more) { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--brand-glow) 55%, transparent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
main p a:not(.btn):not(.link-more):hover, main li a:not(.btn):not(.link-more):hover { text-decoration-color: currentColor; }

.lead {
  font-size: 1.18rem;
  color: var(--ink-2);
  line-height: 1.55;
}

/* Section label / eyebrow: small caps copper with a short rule */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 16px;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  flex: none;
}
.section-head:not(.section-head--left) .eyebrow::after,
.page-head .eyebrow::after,
.cta-band .eyebrow::after {
  content: "";
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  flex: none;
}

/* Focus + skip link */
:focus-visible {
  outline: 2.5px solid var(--brand);
  outline-offset: 3px;
  border-radius: 10px;
}
.section--dark :focus-visible,
.footer :focus-visible { outline-color: var(--brand-bright); }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--ink-inv);
  padding: 10px 18px;
  border-radius: 0 0 var(--radius) 0;
  font-weight: 700;
}
.skip:focus { left: 0; color: var(--ink-inv); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 24px;
}
.container--narrow { max-width: 808px; } /* 760px measure + padding */

.section { position: relative; padding: 104px 0; }
.section--alt { background: var(--bg-alt); }
.section--compact { padding: 60px 0; }
.section--dark {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(50% 70% at 22% 40%, color-mix(in srgb, var(--brand-glow) 26%, transparent), transparent 70%),
    linear-gradient(var(--bg-dark), var(--bg-darker));
  color: var(--ink-inv-2);
}
.section--dark::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--grain);
  opacity: .28;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--ink-inv); }
.section--dark .lead, .section--dark p { color: var(--ink-inv-2); }
.section--dark .eyebrow { color: var(--brand-bright); }
.section--dark a:not(.btn) { color: var(--brand-bright); }
.section--dark a:not(.btn):hover { color: var(--ink-inv); }

/* Intro block at the top of a section */
.section-head {
  max-width: 720px;
  margin: 0 auto 56px;
  text-align: center;
}
.section-head--left { margin-left: 0; text-align: left; }
.section-head .lead { margin-bottom: 0; }

/* Page hero for subpages: oat paper with a crema glow and grain */
.page-head {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 84px 0 68px;
  text-align: center;
  background:
    radial-gradient(46% 90% at 80% 20%, rgba(200, 162, 122, .5), transparent 70%),
    radial-gradient(40% 80% at 6% 100%, var(--brand-tint), transparent 70%),
    var(--bg);
  border-bottom: 2px dotted var(--line-strong);
}
.page-head::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--grain);
  opacity: .18;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.page-head h1 { max-width: 820px; margin-inline: auto; }
.page-head .lead { max-width: 640px; margin: 0 auto; }

/* Grids */
.grid { display: grid; gap: 22px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Two-column feature/detail row (alternate with .split--rev) */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 60px;
  align-items: center;
}
.split--rev > :first-child { order: 2; }

/* Button rows */
.actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}
.actions--left { justify-content: flex-start; }

/* Inline "See more" link */
.link-more {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--brand);
  transition: color .15s ease;
}
.link-more::after { content: "\2192"; display: inline-block; margin-left: 7px; transition: transform .25s var(--soft); }
.link-more:hover { color: var(--brand-strong); }

/* --------------------------------------------------------------------------
   4. Buttons: pills with a hard bottom lip
   -------------------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--font-body);
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.2;
  padding: 14px 24px 15px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .18s var(--soft), box-shadow .18s var(--soft), background-color .2s ease, color .2s ease;
}
.btn svg { width: 16px; height: 16px; flex: none; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(3px); }

.btn--primary {
  background: var(--brand-btn);
  color: var(--paper);
  box-shadow: 0 4px 0 var(--brand-lip), 0 10px 22px -8px rgba(43, 26, 18, .55), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.btn--primary:hover { background: var(--brand-btn-hover); color: var(--paper); }
.btn--primary:active { box-shadow: 0 1px 0 var(--brand-lip), 0 4px 10px -6px rgba(43, 26, 18, .5), inset 0 1px 0 rgba(255, 255, 255, .25); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--ink), 0 4px 0 var(--ink);
}
.btn--ghost:hover { background: rgba(43, 26, 18, .05); color: var(--ink); }
.btn--ghost:active { box-shadow: inset 0 0 0 2px var(--ink), 0 1px 0 var(--ink); }

/* On dark: cream fill */
.btn--light {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 4px 0 var(--crema), 0 10px 22px -8px rgba(0, 0, 0, .5);
}
.btn--light:hover { background: var(--paper); color: var(--ink); }
.btn--light:active { box-shadow: 0 1px 0 var(--crema); }

.btn--dark {
  background: var(--ink);
  color: var(--bg);
  box-shadow: 0 4px 0 #120A06, 0 10px 22px -8px rgba(43, 26, 18, .55), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.btn--dark:hover { background: #3A2419; color: var(--bg); }
.btn--dark:active { box-shadow: 0 1px 0 #120A06; }

/* Ghost adapts on dark surfaces */
.section--dark .btn--ghost, .footer .btn--ghost {
  color: var(--ink-inv);
  box-shadow: inset 0 0 0 2px rgba(243, 233, 218, .6), 0 4px 0 rgba(243, 233, 218, .25);
}
.section--dark .btn--ghost:hover, .footer .btn--ghost:hover { background: rgba(243, 233, 218, .08); color: var(--ink-inv); }
.section--dark .btn--ghost:active, .footer .btn--ghost:active { box-shadow: inset 0 0 0 2px rgba(243, 233, 218, .6), 0 1px 0 rgba(243, 233, 218, .25); }

.btn--lg { padding: 16px 30px 17px; font-size: 16.5px; }
.btn--sm { padding: 9px 17px 10px; font-size: 14px; }

/* --------------------------------------------------------------------------
   5. Topbar + mobile menu
   -------------------------------------------------------------------------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(239, 229, 214, .96);
  border-bottom: 2px dotted var(--line-strong);
}
.topbar__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: var(--topbar-h);
}

/* The landing concept's lockup: an espresso roundel, the name in slab and the tagline in copper caps */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  white-space: nowrap;
}
.brand:hover { color: var(--ink); }
.brand__badge {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4A2E1A, var(--bg-dark) 70%);
  box-shadow: inset 0 0 0 2px rgba(200, 162, 122, .35), 0 6px 14px -8px rgba(43, 26, 18, .8);
}
/* The card mark is drawn on an 89-unit Fibonacci grid, so each step is the golden ratio:
   grid 89, card 55 x 34, back-card peek 13, stripe 21 x 8 inset 13, corners 8.
   The grid is set at 80% of the roundel, centred by the badge's grid. */
.brand__badge svg { display: block; width: 80%; height: 80%; }
.brand__badge rect:last-child { fill: var(--brand-glow); }
.brand__text { display: grid; gap: 4px; text-align: left; }
.brand__name {
  font-family: var(--font-head);
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.01em;
}
.brand__tag {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--brand);
}

.topbar__nav {
  display: flex;
  gap: 26px;
  margin-inline: auto;
}
.topbar__nav a {
  position: relative;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  padding: 8px 0;
}
.topbar__nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--brand-glow);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--soft);
}
.topbar__nav a:hover { color: var(--ink); }
.topbar__nav a:hover::after, .topbar__nav a.active::after { transform: scaleX(1); }
.topbar__nav a.active { color: var(--brand); }

.topbar__actions { display: flex; align-items: center; gap: 12px; }
.topbar__actions .btn { padding: 9px 17px 10px; font-size: 14px; }
.topbar__actions .btn--primary { box-shadow: 0 3px 0 var(--brand-lip), 0 8px 16px -8px rgba(43, 26, 18, .5), inset 0 1px 0 rgba(255, 255, 255, .25); }
.topbar__actions .btn--ghost { box-shadow: inset 0 0 0 2px var(--ink), 0 3px 0 var(--ink); }
.topbar__login {
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  padding: 8px 4px;
  background: linear-gradient(var(--brand-glow), var(--brand-glow)) 0 100% / 0 2px no-repeat;
  transition: background-size .3s var(--soft);
}
.topbar__login:hover { color: var(--ink); background-size: 100% 2px; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 12px;
  background: none;
  border: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--ink), 0 3px 0 var(--ink);
  cursor: pointer;
}
.nav-toggle:active { transform: translateY(2px); box-shadow: inset 0 0 0 2px var(--ink), 0 1px 0 var(--ink); }
.nav-toggle__bar {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform .25s var(--soft), opacity .2s;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 16px;
  width: min(340px, calc(100vw - 32px));
  background: var(--surface);
  border-radius: 20px;
  box-shadow: var(--shadow-card), 0 24px 44px -22px rgba(43, 26, 18, .65);
  padding: 10px 10px 14px;
  max-height: calc(100vh - var(--topbar-h) - 24px);
  overflow: auto;
}
.mobile-menu.open { display: block; }
.mobile-menu a:not(.btn) {
  display: block;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  padding: 12px 14px;
  border-radius: 12px;
}
.mobile-menu a:not(.btn):hover { background: var(--oat-2); }
.mobile-menu a.active { color: var(--brand); }
.mobile-menu .mobile-menu__cta {
  display: flex;
  gap: 10px;
  margin-top: 8px;
  padding: 14px 6px 4px;
  border-top: 1px solid var(--line);
}
.mobile-menu .mobile-menu__cta .btn { flex: 1; padding: 12px 14px 13px; font-size: 14.5px; }

/* Pass types menu (app.js). The link still opens pass-types.html; the chevron beside it is a
   disclosure button, drawn in the nav gap so the closed header looks as before. It shows on hover,
   on keyboard focus and while the menu is open. Without scripts it stays hidden and the link works. */
.nav-dd { position: relative; display: flex; }
.nav-dd__toggle, .mobile-dd__toggle { display: none; }
.js .nav-dd__toggle {
  display: grid;
  place-items: center;
  position: absolute;
  top: 50%;
  left: 100%;
  width: 18px;
  height: 22px;
  margin: -11px 0 0 1px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--ink);
  cursor: pointer;
  opacity: 0;
  transition: opacity .2s;
}
.nav-dd:hover .nav-dd__toggle, .nav-dd__toggle:focus-visible, .nav-dd__toggle[aria-expanded="true"] { opacity: 1; }
.nav-dd__toggle:focus-visible { outline-offset: 0; border-radius: 6px; }
/* a 24 x 24 px target (WCAG 2.5.8), widened into the gap after the button so it never covers the link */
.js .nav-dd__toggle::before { content: ""; position: absolute; top: -1px; bottom: -1px; left: 0; right: -6px; }
.nav-dd__menu:focus { outline: none; }
.nav-dd__toggle svg, .mobile-dd__toggle svg { width: 10px; height: 10px; transition: transform .25s var(--soft); }
.nav-dd__toggle[aria-expanded="true"] svg, .mobile-dd__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-dd__menu {
  position: absolute;
  top: calc(100% + 18px);
  left: -14px;
  z-index: 61;
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 2px 6px;
  margin: 0;
  padding: 10px;
  list-style: none;
  background: var(--surface);
  border-radius: 20px;
  box-shadow: var(--shadow-card), 0 24px 44px -22px rgba(43, 26, 18, .65);
}
.nav-dd__menu[hidden] { display: none; }
/* keeps the pointer inside the menu while it crosses the gap under the header */
.nav-dd__menu::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 20px; }
.topbar__nav .nav-dd__menu a { display: block; padding: 9px 14px; border-radius: 12px; font-size: 15px; white-space: nowrap; }
.topbar__nav .nav-dd__menu a::after { display: none; }
.topbar__nav .nav-dd__menu a:hover { background: var(--oat-2); }
.nav-dd__all { grid-column: 1 / -1; margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--line); }
.mobile-dd { display: flex; align-items: center; gap: 4px; }
.mobile-dd > a { flex: 1; }
.js .mobile-dd__toggle {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.mobile-dd__toggle:hover { background: var(--oat-2); }
.mobile-dd__toggle svg { width: 12px; height: 12px; }
.mobile-dd__menu { margin: 0 0 4px; padding: 0 0 0 14px; list-style: none; }
.mobile-menu .mobile-dd__menu a:not(.btn) { padding: 9px 14px; font-size: 15px; }
@media (prefers-reduced-motion: reduce) {
  .nav-dd__toggle, .nav-dd__toggle svg, .mobile-dd__toggle svg { transition: none; }
}

@media (max-width: 1060px) {
  .topbar__nav { display: none; }
  .topbar__actions .topbar__login,
  .topbar__actions .btn--ghost { display: none; }
  .topbar__actions { margin-left: auto; }
  .nav-toggle { display: flex; }
}
@media (max-width: 400px) {
  .topbar .brand__tag { display: none; }
}
@media (max-width: 380px) {
  .topbar__inner { gap: 12px; }
  .brand__name { font-size: 18px; }
  .brand__badge { width: 40px; height: 40px; }
  .topbar__actions .btn { padding: 8px 13px 9px; font-size: 13.5px; }
}
@media (max-width: 350px) {
  .topbar .brand__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* --------------------------------------------------------------------------
   6. Hero (generic; the Roastery homepage uses its own in home.css)
   -------------------------------------------------------------------------- */
.hero { padding: 88px 0 0; text-align: center; }
.hero h1 { max-width: 820px; margin: 0 auto 20px; }
.hero .lead { max-width: 620px; margin: 0 auto 32px; }
.hero__note { font-size: 14px; color: var(--ink-3); margin: 18px 0 0; }
.hero__shot { margin-top: 64px; }

/* --------------------------------------------------------------------------
   7. Browser frame + console mock (all CSS, no images)
   -------------------------------------------------------------------------- */
.browser-frame {
  max-width: 980px;
  margin-inline: auto;
  background: #FFFAF3;
  border-radius: 20px;
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  text-align: left;
}
.browser-frame__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--oat-2);
  border-bottom: 1px solid var(--line);
}
.browser-frame__dots { display: flex; gap: 6px; flex: 1; }
.browser-frame__dots span { width: 10px; height: 10px; border-radius: 50%; background: rgba(92, 58, 33, .25); }
.browser-frame__url {
  flex: 2;
  max-width: 320px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-3);
  text-align: center;
  padding: 4px 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.browser-frame__spacer { flex: 1; }

.console {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  background: #FFFAF3;
  min-height: 380px;
}
.console__side {
  background: rgba(230, 216, 195, .38);
  border-right: 1px solid var(--line);
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
}
.console__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  padding: 6px 10px 14px;
}
.console__item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: 10px;
  color: var(--ink-3);
  font-weight: 600;
}
.console__item::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: rgba(92, 58, 33, .25); flex: none; }
.console__item.is-active { background: var(--brand-tint); color: var(--brand-chip); font-weight: 700; }
.console__item.is-active::before { background: var(--brand-glow); }

.console__main {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.console__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.console__title { font-family: var(--font-head); font-size: 16px; font-weight: 700; color: var(--ink); }

.mini-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  color: var(--paper);
  background: var(--brand-btn);
  border: 0;
  border-radius: 999px;
  padding: 7px 13px;
  box-shadow: 0 2px 0 var(--brand-lip);
}
.mini-btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink), 0 2px 0 var(--ink); }

.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.kpi { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); border-radius: 14px; padding: 12px 14px; }
.kpi__label { font-size: 11.5px; color: var(--ink-3); }
.kpi__value { font-family: var(--font-head); font-size: 21px; font-weight: 700; color: var(--ink); margin-top: 2px; line-height: 1.2; }
.kpi__delta { font-size: 11px; color: var(--olive); font-weight: 700; }

.chart-card { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); border-radius: 14px; padding: 12px 14px; }
.chart-card__title { font-size: 11.5px; color: var(--ink-3); }
.chart { display: flex; align-items: flex-end; gap: 6px; height: 88px; margin-top: 10px; }
.chart__bar { flex: 1; min-height: 6px; height: var(--h, 40%); border-radius: 5px 5px 2px 2px; background: rgba(200, 162, 122, .45); }
.chart__bar.is-hi { background: linear-gradient(var(--brand-bright), var(--brand-lip)); }
.chart__labels { display: flex; gap: 6px; margin-top: 6px; }
.chart__labels span { flex: 1; text-align: center; font-size: 10px; color: var(--ink-3); }

.mock-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.mock-table th {
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}
.mock-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); color: var(--ink-2); white-space: nowrap; }
.mock-table tr:last-child td { border-bottom: 0; }
.mock-table .mono { font-family: var(--font-mono); font-size: 11.5px; }

.avatar {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--ink-inv);
  font-size: 10px;
  font-weight: 700;
  margin-right: 8px;
  vertical-align: middle;
}

.pill { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; line-height: 1.5; }
.pill--gold { background: rgba(201, 154, 61, .24); color: #6E4B14; }
.pill--silver { background: rgba(92, 58, 33, .09); color: var(--ink-2); }
.pill--bronze { background: rgba(184, 115, 51, .18); color: #6F4119; }
.pill--active { background: rgba(63, 106, 44, .14); color: var(--olive); }
.pill--scheduled { background: rgba(68, 89, 110, .16); color: #3A4D61; }
.pill--draft { background: rgba(92, 58, 33, .07); color: var(--ink-3); }

@media (max-width: 680px) {
  .console { grid-template-columns: minmax(0, 1fr); }
  .console__side { display: none; }
  .kpis { gap: 8px; }
  .kpi__value { font-size: 16px; }
  .mock-table td, .mock-table th { padding: 8px 6px; }
}

/* --------------------------------------------------------------------------
   8. Logo strip (static text wordmarks)
   -------------------------------------------------------------------------- */
.logo-strip__title { text-align: center; font-size: 14px; color: var(--ink-3); margin-bottom: 28px; }
.logo-strip { display: flex; justify-content: center; align-items: center; gap: 20px 48px; flex-wrap: wrap; }
.wordmark { font-family: var(--font-head); font-size: 18px; font-weight: 700; color: var(--ink); opacity: .55; white-space: nowrap; }
.wordmark--caps { font-size: 14.5px; letter-spacing: .14em; }
.wordmark--wide { font-size: 15px; letter-spacing: .3em; }
.wordmark--mono { font-family: var(--font-mono); font-weight: 500; font-size: 15px; }

/* --------------------------------------------------------------------------
   9. Stats row: slab numbers, dotted separators
   -------------------------------------------------------------------------- */
.stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 0; }
.stat { text-align: center; padding: 6px 24px; }
.stat + .stat { border-left: 2px dotted var(--line-strong); }
.stat__num {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(2.5rem, 1.9rem + 1.4vw, 3.3rem);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.05;
  white-space: nowrap;
}
.stat__cap { display: block; font-size: 14.5px; color: var(--ink-3); margin-top: 8px; }
.section--dark .stat__num { color: var(--ink-inv); }
.section--dark .stat__cap { color: var(--ink-inv-2); }
.section--dark .stat + .stat { border-left-color: var(--line-dark); }
@media (max-width: 860px) {
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat + .stat { border-left: 0; }
  .stat:nth-child(even) { border-left: 2px dotted var(--line-strong); }
}

/* --------------------------------------------------------------------------
   10. How-it-works steps
   -------------------------------------------------------------------------- */
.step__num {
  display: inline-grid;
  place-items: center;
  min-width: 46px;
  height: 46px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--brand-btn);
  box-shadow: 0 3px 0 var(--brand-lip);
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--paper);
  margin-bottom: 16px;
}
.step h3 { margin-bottom: 8px; }
.step p { color: var(--ink-2); margin-bottom: 0; }

.sw { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--paper); box-shadow: 0 0 0 1px var(--line-strong); flex: none; }
.skel { height: 8px; border-radius: 4px; background: rgba(92, 58, 33, .12); flex: 1; }
.skel--short { flex: 0 0 46%; }
.stack { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.row { display: flex; align-items: center; gap: 10px; }

.url-pill {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-2);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: 999px;
  padding: 6px 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Lock-screen notification row */
.notif {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--paper);
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: 0 0 0 1px rgba(92, 58, 33, .12), 0 10px 20px -16px rgba(43, 26, 18, .6);
  text-align: left;
  width: 100%;
}
.notif__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #7B4A2A;
  color: var(--paper);
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 700;
}
.notif__title { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.notif__body { font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.notif__time { margin-left: auto; flex: none; font-size: 11.5px; color: var(--ink-3); }
.notif-stack { display: flex; flex-direction: column; gap: 10px; max-width: 440px; margin-inline: auto; }

/* --------------------------------------------------------------------------
   11. Cards
   -------------------------------------------------------------------------- */
.card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 28px;
}
.card h3 { margin-bottom: 8px; }
.card > p:last-child { margin-bottom: 0; }
.section--dark .card { background: rgba(243, 233, 218, .06); box-shadow: inset 0 0 0 1px var(--line-dark); }
.section--dark .card p { color: var(--ink-inv-2); }

.card--link {
  display: block;
  text-decoration: none;
  cursor: pointer;
  color: inherit;
  transition: transform .35s var(--soft), box-shadow .35s var(--soft);
}
.card--link:hover { transform: translateY(-5px); color: inherit; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 0 0 1px rgba(92, 58, 33, .14), 0 28px 40px -26px rgba(43, 26, 18, .6); }
.card--link:hover .link-more { color: var(--brand-strong); }
.card--link:hover .link-more::after { transform: translateX(4px); }

.icon-tile {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4A2E1A, var(--ink) 70%);
  box-shadow: inset 0 0 0 2px rgba(200, 162, 122, .35), 0 6px 12px -8px rgba(43, 26, 18, .8);
  color: var(--crema);
  margin-bottom: 18px;
}
.icon-tile svg { width: 22px; height: 22px; }

.good-for {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 18px 0 10px;
}
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex;
  align-items: center;
  font-size: 12.5px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--brand-tint);
  color: var(--brand-chip);
}
.chip--neutral { background: rgba(92, 58, 33, .08); color: var(--ink-2); }

/* Filter pills: option chips with a lip */
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }
.filter-pill {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  padding: 9px 16px 10px;
  border-radius: 14px;
  border: 0;
  background: var(--oat-2);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(92, 58, 33, .14), 0 3px 0 rgba(92, 58, 33, .22);
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s, color .2s, transform .15s;
}
.filter-pill:hover { background: #DFD0B8; }
.filter-pill:active { transform: translateY(2px); }
.filter-pill.is-active { background: var(--ink); color: var(--bg); box-shadow: 0 3px 0 #120A06; }

/* --------------------------------------------------------------------------
   12. Wallet pass: an Apple Wallet face at its real proportions
   Drawn on Apple's 375 x 550 pt asset grid by the rules of the pass
   specimen sheet (docs/design/pass-mocks/index.html). --u is one point:
   .pass-card derives it from its own width, so every allotment keeps its
   true size relative to the face at any scale (the homepage hero sets --u
   from its stage instead). Colours are the pass.json trio: --pc background,
   --pf foreground (values), --pl labels. Text is Wallet's system face; only
   the logo is merchant artwork. assets/passes/ holds the real images:
   strips at @3x and barcodes that scan to MEMBER-<Member ID>.
   Face modifiers: --coupon (perforated top edge), --ticket (notch, 72 pt
   header, 98 pt strip), --boarding (cut-outs at the tear line).
   -------------------------------------------------------------------------- */
.pass-card {
  --pc: #4A3328;
  --pf: #FFF8EE;
  --pl: #E6C79F;
  --u: calc(100cqw / 375);
  container-type: inline-size;
  position: relative;
  width: 100%;
  max-width: 240px;
  aspect-ratio: 375 / 550;
  margin: 0 auto 20px;
  text-align: left;
  filter: drop-shadow(0 1px 1px rgba(18, 9, 4, .14)) drop-shadow(0 14px 22px rgba(18, 9, 4, .3));
}
.pass-card--lg { max-width: 320px; }
.pass-card__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: calc(12 * var(--u));
  background: var(--pc);
  color: var(--pf);
  font-family: var(--font-wallet);
  font-weight: 400;
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
}
.pass-card__face--coupon {
  -webkit-mask: radial-gradient(circle calc(5 * var(--u)) at 50% 0, #0000 calc(4.5 * var(--u)), #000 calc(5 * var(--u))) 0 0 / calc(15.625 * var(--u)) 100% repeat-x;
  mask: radial-gradient(circle calc(5 * var(--u)) at 50% 0, #0000 calc(4.5 * var(--u)), #000 calc(5 * var(--u))) 0 0 / calc(15.625 * var(--u)) 100% repeat-x;
}
.pass-card__face--ticket {
  -webkit-mask: radial-gradient(circle calc(44.5 * var(--u)) at 50% calc(-18.5 * var(--u)), #0000 calc(44 * var(--u)), #000 calc(44.5 * var(--u)));
  mask: radial-gradient(circle calc(44.5 * var(--u)) at 50% calc(-18.5 * var(--u)), #0000 calc(44 * var(--u)), #000 calc(44.5 * var(--u)));
}
.pass-card__face--boarding {
  --ny: calc(138 * var(--u));
  -webkit-mask:
    radial-gradient(circle calc(8 * var(--u)) at 0 var(--ny), #0000 calc(7.5 * var(--u)), #000 calc(8 * var(--u))),
    radial-gradient(circle calc(8 * var(--u)) at 100% var(--ny), #0000 calc(7.5 * var(--u)), #000 calc(8 * var(--u)));
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle calc(8 * var(--u)) at 0 var(--ny), #0000 calc(7.5 * var(--u)), #000 calc(8 * var(--u))),
    radial-gradient(circle calc(8 * var(--u)) at 100% var(--ny), #0000 calc(7.5 * var(--u)), #000 calc(8 * var(--u)));
  mask-composite: intersect;
}
.pass-card__head {
  flex: none;
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  height: calc(66 * var(--u));
  padding: 0 calc(16 * var(--u));
}
.pass-card__face--ticket .pass-card__head { height: calc(72 * var(--u)); padding-top: calc(6 * var(--u)); }
/* logo.png is 50 pt tall; the sample marks are a 40 pt roundel inside it */
.pass-card__logo {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  margin: calc(5 * var(--u));
  border-radius: 50%;
  background: var(--surface);
  color: var(--pc);
  font: 700 calc(19 * var(--u)) / 1 var(--font-head);
}
.pass-card__org {
  flex: 1 1 auto;
  min-width: 0;
  font-size: calc(17 * var(--u));
  line-height: calc(22 * var(--u));
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pass-card__hdr { flex: none; max-width: 45%; margin-left: auto; text-align: right; }
.pass-card__label,
.pass-card__value { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pass-card__label {
  font-size: calc(11 * var(--u));
  line-height: calc(13 * var(--u));
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--pl);
}
.pass-card__value {
  margin-top: calc(1 * var(--u));
  font-size: calc(17 * var(--u));
  line-height: calc(22 * var(--u));
}
/* strip.png: 375 x 144 pt behind the primary field, 375 x 98 pt on tickets */
.pass-card__strip { position: relative; flex: none; height: calc(144 * var(--u)); overflow: hidden; }
.pass-card__face--ticket .pass-card__strip { height: calc(98 * var(--u)); }
.pass-card__strip > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pass-card__primary { position: absolute; left: calc(16 * var(--u)); right: calc(16 * var(--u)); bottom: calc(11 * var(--u)); }
.pass-card__face--ticket .pass-card__primary { bottom: calc(9 * var(--u)); }
.pass-card__primary .pass-card__value {
  margin: 0;
  font-size: calc(44 * var(--u));
  line-height: calc(46 * var(--u));
  font-weight: 300;
  letter-spacing: -.02em;
}
.pass-card__face--ticket .pass-card__primary .pass-card__value { font-size: calc(28 * var(--u)); line-height: calc(32 * var(--u)); font-weight: 400; letter-spacing: -.01em; }
.pass-card__primary .pass-card__label { margin-top: calc(2 * var(--u)); font-size: calc(12 * var(--u)); line-height: calc(14 * var(--u)); }
/* Generic passes: the primary field sits under the header */
.pass-card__gp { display: flex; gap: calc(12 * var(--u)); align-items: flex-start; padding: calc(2 * var(--u)) calc(16 * var(--u)) 0; }
.pass-card__gp > div { flex: 1 1 auto; min-width: 0; }
.pass-card__gp .pass-card__value { font-size: calc(30 * var(--u)); line-height: calc(36 * var(--u)); letter-spacing: -.01em; }
/* Boarding passes: origin and destination with Wallet's transit glyph between */
.pass-card__route { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: calc(8 * var(--u)); padding: calc(2 * var(--u)) calc(16 * var(--u)) 0; }
.pass-card__route > div { min-width: 0; }
.pass-card__route > div:last-child { text-align: right; }
.pass-card__route .pass-card__value { font-size: calc(44 * var(--u)); line-height: calc(48 * var(--u)); font-weight: 300; letter-spacing: -.01em; }
.pass-card__glyph { width: calc(30 * var(--u)); height: calc(30 * var(--u)); margin-bottom: calc(9 * var(--u)); color: var(--pl); }
.pass-card__glyph svg { width: 100%; height: 100%; }
/* Secondary and auxiliary rows. A square code caps them at one row of four;
   PDF417, Code 128, tickets and boarding passes allow two. */
.pass-card__rows { display: grid; gap: calc(10 * var(--u)); padding: calc(12 * var(--u)) calc(16 * var(--u)) 0; }
.pass-card__row { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); column-gap: calc(12 * var(--u)); }
.pass-card__row > div { min-width: 0; }
/* The barcode: Wallet's white panel, always last, 22 pt above the bottom edge.
   Square codes are 102 pt (a 120 pt panel), PDF417 and Code 128 282 pt wide.
   The alt text under the symbol is the Member ID. */
.pass-card__code {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(22 * var(--u));
  width: fit-content;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(4 * var(--u));
  padding: calc(9 * var(--u));
  border-radius: calc(10 * var(--u));
  background: #FFFFFF;
}
.pass-card__code img { flex: none; max-width: none; width: calc(102 * var(--u)); height: calc(102 * var(--u)); }
.pass-card__code--pdf417 img { width: calc(282 * var(--u)); height: calc(66 * var(--u)); }
.pass-card__code--code128 img { width: calc(282 * var(--u)); height: calc(56 * var(--u)); }
.pass-card__code span {
  font-size: calc(11 * var(--u));
  line-height: calc(13 * var(--u));
  font-weight: 500;
  letter-spacing: .05em;
  color: #111111;
  white-space: nowrap;
}

/* The same sample passes as Google Wallet cards, by the Google rules of the pass specimen sheet
   (docs/design/pass-mocks/index.html): the classic card view, 380 dp wide, height following the content.
   --u is one dp. Stow issues a LoyaltyObject: issuer row, programName title, the points row and two
   text modules, the barcode panel, then the heroImage band. --gb is the card colour and --gf the text
   colour Google picks from it (light below 0.35 luminance); label colours don't reach Google cards. */
.google-pass {
  --u: 1px;
  position: relative;
  overflow: hidden;
  width: calc(380 * var(--u));
  border-radius: calc(16 * var(--u));
  background: var(--gb);
  color: var(--gf);
  font-family: var(--font-google);
  -webkit-font-smoothing: antialiased;
  text-align: left;
}
.google-pass__head { display: flex; align-items: center; gap: calc(12 * var(--u)); min-height: calc(60 * var(--u)); padding: calc(16 * var(--u)); }
.google-pass__logo {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(28 * var(--u));
  height: calc(28 * var(--u));
  border-radius: 50%;
  background: var(--surface);
  color: var(--gb);
  font: 700 calc(14 * var(--u)) / 1 var(--font-head);
}
.google-pass__issuer { min-width: 0; font-size: calc(15 * var(--u)); line-height: calc(20 * var(--u)); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.google-pass__div { height: 1px; background: currentColor; opacity: .2; }
.google-pass__title {
  padding: calc(14 * var(--u)) calc(16 * var(--u)) calc(2 * var(--u));
  font-size: calc(22 * var(--u));
  line-height: calc(28 * var(--u));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.google-pass__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(16 * var(--u)); padding: calc(12 * var(--u)) calc(16 * var(--u)); }
.google-pass__row > :last-child { text-align: right; }
.google-pass__label, .google-pass__value { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.google-pass__label { font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); font-weight: 500; letter-spacing: .02em; text-transform: uppercase; opacity: .74; }
.google-pass__value { margin-top: calc(2 * var(--u)); font-size: calc(16 * var(--u)); line-height: calc(22 * var(--u)); }
.google-pass__rule { height: 1px; margin: 0 calc(16 * var(--u)); background: currentColor; opacity: .2; }
/* Transit is a TransitObject: the route replaces the title and the points row */
.google-pass__route {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: calc(10 * var(--u));
  padding: calc(16 * var(--u)) calc(16 * var(--u)) calc(4 * var(--u));
}
.google-pass__route > :last-child { text-align: right; }
.google-pass__route b { display: block; font-size: calc(32 * var(--u)); line-height: calc(38 * var(--u)); font-weight: 400; }
.google-pass__route span { display: block; font-size: calc(13 * var(--u)); line-height: calc(18 * var(--u)); opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.google-pass__route svg { display: block; width: calc(24 * var(--u)); height: calc(24 * var(--u)); opacity: .85; }
/* Barcode panel: a 136 dp square code (160 dp panel), PDF417 292 x 72 dp, Code 128 292 x 60 dp, 20 dp above the edge */
.google-pass__code { display: flex; justify-content: center; padding: calc(16 * var(--u)) calc(16 * var(--u)) calc(20 * var(--u)); }
.google-pass__panel { display: flex; flex-direction: column; align-items: center; gap: calc(6 * var(--u)); padding: calc(12 * var(--u)); border-radius: calc(16 * var(--u)); background: #FFFFFF; }
.google-pass__panel img { display: block; max-width: none; width: calc(136 * var(--u)); height: calc(136 * var(--u)); }
.google-pass__panel--pdf417 img { width: calc(292 * var(--u)); height: calc(72 * var(--u)); }
.google-pass__panel--code128 img { width: calc(292 * var(--u)); height: calc(60 * var(--u)); }
.google-pass__panel span { font: 500 calc(14 * var(--u)) / calc(18 * var(--u)) var(--font-google); letter-spacing: .06em; color: #202124; }
/* heroImage: 1032 x 336 px, a full-width band under the barcode; Google centre-crops a strip to fit */
.google-pass__hero { aspect-ratio: 1032 / 336; overflow: hidden; }
.google-pass__hero img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Design swap on the pass-types pages: the specimen gallery's design (<stow-pass-mock>) over the site's
   mock, in one 375 x 550 box; the mock is the Apple face or, with Google picked, the Google card; then the
   type's ten sample passes. assets/pass-swap.js sets data-phase on a timer, data-wallet from .swap-bar,
   and --swap-fade for the speed picked there.
   The box casts the one shadow, so the designs never double it while they swap. */
.pass-swap {
  position: relative;
  width: 100%;
  max-width: 240px;
  aspect-ratio: 375 / 550;
  margin: 0 auto 20px;
  container-type: size;
  filter: drop-shadow(0 1px 1px rgba(18, 9, 4, .14)) drop-shadow(0 14px 22px rgba(18, 9, 4, .3));
}
.pass-swap--lg { max-width: 320px; }
.pass-swap > .pass-card { position: absolute; inset: 0; max-width: none; margin: 0; filter: none; }
.pass-swap__gallery { position: absolute; inset: 0; display: block; }
/* The tallest Google card (hero and a square code) is 578 dp, two of them 1 px dividers that don't scale:
   every card shares the one scale that fits it exactly */
.pass-swap > .google-pass { --u: min(calc(100cqw / 380), calc((100cqh - 2px) / 576)); position: absolute; top: 0; left: 0; right: 0; margin-inline: auto; }
/* No flash: the design coming in fades up on top while the one leaving stays fully opaque underneath,
   so the card never shows through; the old one goes only once it is covered */
.pass-swap > .pass-swap__gallery,
.pass-swap > .pass-card,
.pass-swap > .google-pass,
.pass-swap > .pass-swap__sample { z-index: 1; opacity: 0; transition: opacity .25s linear var(--swap-fade, .8s); }
.pass-swap[data-phase="gallery"] > .pass-swap__gallery,
.pass-swap[data-phase="mock"]:not([data-wallet="google"]) > .pass-card,
.pass-swap[data-phase="mock"][data-wallet="google"] > .google-pass,
.pass-swap[data-phase="sample"] > .pass-swap__sample.is-on { z-index: 2; opacity: 1; transition: opacity var(--swap-fade, .8s) ease-in-out; }
/* No gallery renderer (scripts off or failed): keep the Apple mock */
.pass-swap:has(> stow-pass-mock:not(:defined)) > .pass-card { opacity: 1; }
/* The ten sample passes per type (assets/pass-samples.js), drawn into two layers that take turns. A sample
   is the same .pass-card face or .google-pass card as the mock, at the same scale. */
.pass-swap > .pass-swap__sample { position: absolute; inset: 0; }
.pass-swap__sample > .pass-card { max-width: none; margin: 0; filter: none; }
.pass-swap__sample > .google-pass { --u: min(calc(100cqw / 380), calc((100cqh - 2px) / 576)); margin-inline: auto; }
/* What a sample carries beyond the mocks: logo.png as the merchant's mark (50 pt tall, up to 160 pt wide)
   or a wordmark with the business name hidden, up to three header fields, and inline artwork and barcodes
   in the same allotments as the mock images */
.ps-logo { flex: none; display: flex; align-items: center; height: calc(50 * var(--u)); max-width: calc(160 * var(--u)); overflow: hidden; }
.ps-logo > svg { display: block; width: calc(50 * var(--u)); height: calc(50 * var(--u)); }
.ps-word { display: inline-flex; align-items: center; gap: .3em; font-size: calc(var(--wz) * var(--u)); line-height: 1; white-space: nowrap; }
.ps-word > svg { flex: none; width: 1.2em; height: 1.2em; }
.ps-hdrs { flex: none; display: flex; gap: calc(14 * var(--u)); max-width: 62%; margin-left: auto; text-align: right; }
.ps-hdrs > span { min-width: 0; }
.ps-strip > svg,
.ps-hero > svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.ps-hero { position: relative; }
.pass-card__code.ps-code > svg { flex: none; display: block; width: calc(102 * var(--u)); height: calc(102 * var(--u)); }
.pass-card__code--pdf417.ps-code > svg { width: calc(282 * var(--u)); height: calc(66 * var(--u)); }
.pass-card__code--code128.ps-code > svg { width: calc(282 * var(--u)); height: calc(56 * var(--u)); }
.google-pass__panel.ps-code > svg { display: block; width: calc(136 * var(--u)); height: calc(136 * var(--u)); }
.google-pass__panel--pdf417.ps-code > svg { width: calc(292 * var(--u)); height: calc(72 * var(--u)); }
.google-pass__panel--code128.ps-code > svg { width: calc(292 * var(--u)); height: calc(60 * var(--u)); }
/* A card row with one text module keeps it at the start, as Google does */
.google-pass__row.ps-row > :only-child { text-align: left; }
.ps-glogo { flex: none; width: calc(28 * var(--u)); height: calc(28 * var(--u)); }
.ps-glogo > svg { display: block; width: 100%; height: 100%; }
/* wideProgramLogo: the wordmark replaces the logo and issuer row when the business name is hidden */
.ps-gwide { display: flex; align-items: center; min-width: 0; height: calc(28 * var(--u)); overflow: hidden; }
/* NFC tap: the contactless mark beside the barcode on the Apple face, at the end of the header row on Google */
.ps-nfc { flex: none; display: block; width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
.ps-nfc > svg { display: block; width: 100%; height: 100%; }
.ps-apple .ps-nfc { position: absolute; right: calc(8 * var(--u)); bottom: calc(24 * var(--u)); width: calc(20 * var(--u)); height: calc(20 * var(--u)); color: var(--pl); }
.ps-google .ps-nfc { margin-left: auto; opacity: .9; }

.swap-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 12px; margin-top: 26px; }
.swap-bar[hidden] { display: none; }
.pass-swap + .swap-bar { margin-top: 4px; }
.swap-bar__group { display: inline-flex; padding: 3px; border-radius: 999px; box-shadow: inset 0 0 0 2px var(--ink); }
.swap-bar button {
  position: relative;
  min-height: 36px;
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.swap-bar__group button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.swap-bar__pause { min-width: 76px; box-shadow: inset 0 0 0 2px var(--ink); }
/* The timer: a line in the pause button fills over each design's turn and stops while the timer is held;
   assets/pass-swap.js sets the turn's length for the speed picked (1x, 2x, 4x) */
.swap-bar__pause::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 6px;
  height: 2px;
  border-radius: 2px;
  background: var(--brand-glow);
  transform: scaleX(0);
  transform-origin: left;
}
.swap-bar.is-timing .swap-bar__pause::after { animation: swap-timer var(--swap-ms, 5s) linear var(--swap-delay, 0s) forwards; }
.swap-bar.is-held .swap-bar__pause::after { animation-play-state: paused; }
@keyframes swap-timer { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .pass-swap > * { transition: none !important; }
}

/* --------------------------------------------------------------------------
   14. Tabs (Dashboard / API): a segmented pill like the brew-method switch
   -------------------------------------------------------------------------- */
.tabs { text-align: center; }
.tabs__list {
  display: inline-flex;
  gap: 6px;
  padding: 6px;
  border-radius: 999px;
  background: var(--oat-2);
  box-shadow: inset 0 0 0 1px rgba(92, 58, 33, .14);
  margin-bottom: 32px;
}
.section--dark .tabs__list { background: rgba(243, 233, 218, .08); box-shadow: inset 0 0 0 1px var(--line-dark); }
.tab {
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink-2);
  background: transparent;
  border: 0;
  border-radius: 999px;
  padding: 10px 26px 11px;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.section--dark .tab { color: var(--ink-inv-2); }
.tab[aria-selected="true"] { background: var(--ink); color: var(--bg); box-shadow: 0 3px 0 #120A06; }
.section--dark .tab[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 3px 0 var(--crema); }
.tab-panel { text-align: left; }
.tab-panel[hidden] { display: none; }
html:not(.js) .tab-panel + .tab-panel { margin-top: 32px; }

/* Code block (API examples) */
.code {
  background: #1A0F0A;
  box-shadow: inset 0 0 0 1px rgba(243, 233, 218, .08), 0 24px 40px -24px rgba(0, 0, 0, .7);
  border-radius: 18px;
  padding: 22px 24px;
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.7;
  color: #EDE2D1;
  overflow-x: auto;
  text-align: left;
  margin: 0;
}
.code .c { color: rgba(237, 226, 209, .55); }
.code .s { color: var(--brand-bright); }
.code .k { color: var(--crema); }
.code-caption { font-size: 13.5px; color: var(--ink-3); margin-top: 14px; }
.section--dark .code-caption { color: var(--ink-inv-2); }

/* --------------------------------------------------------------------------
   15. Check list: copper circle checks
   -------------------------------------------------------------------------- */
.check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.check-list li { position: relative; padding-left: 34px; color: var(--ink-2); }
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 22px;
  height: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='11' fill='%239A5B23'/%3E%3Cpath d='M6.5 11.4l3 3 6-6.4' stroke='%23FFF8EE' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.section--dark .check-list li { color: var(--ink-inv-2); }

/* --------------------------------------------------------------------------
   16. Testimonials (unused while customer proof is withheld)
   -------------------------------------------------------------------------- */
.tcard { display: flex; flex-direction: column; gap: 16px; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 28px; }
.tcard__quote { color: var(--ink-2); font-size: 15.5px; margin: 0; }
.tcard__metric { font-weight: 800; font-size: 14px; color: var(--brand); }
.tcard__person { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.tcard__avatar { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: var(--ink-inv); font-family: var(--font-head); font-size: 14px; font-weight: 700; }
.tcard__name { font-size: 14px; font-weight: 700; color: var(--ink); }
.tcard__role { font-size: 13px; color: var(--ink-3); }

/* --------------------------------------------------------------------------
   17. Pricing
   -------------------------------------------------------------------------- */
.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: var(--surface);
  border-radius: 24px;
  box-shadow: var(--shadow-card);
  padding: 34px 28px 28px;
}
.price-card--featured { box-shadow: inset 0 5px 0 var(--brand-btn), var(--shadow-card), 0 30px 50px -34px rgba(43, 26, 18, .7); }
.price-card__pill {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--bg);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 3px 0 #120A06;
}
.price-card__name { font-family: var(--font-head); font-size: 1.4rem; font-weight: 700; color: var(--ink); }
.price-card__price { font-family: var(--font-head); font-size: 2.4rem; font-weight: 700; color: var(--roast, #5C3A21); line-height: 1; }
.price-card__per { font-family: var(--font-body); font-size: 14px; font-weight: 400; color: var(--ink-3); }
.price-card__desc { font-size: 15px; color: var(--ink-2); margin: 0; }
.price-card .check-list { font-size: 15px; gap: 10px; }
.price-card .btn { margin-top: auto; }

.compare-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.compare-table th, .compare-table td { padding: 14px 16px; border-bottom: 1px dashed var(--line-strong); text-align: center; }
.compare-table th { font-family: var(--font-head); font-weight: 700; color: var(--ink); }
.compare-table th:first-child, .compare-table td:first-child { text-align: left; color: var(--ink-2); }
.compare-table .tick { color: var(--brand); font-weight: 800; }
.compare-table .dash { color: var(--ink-3); }
/* "Not included": a bar drawn to the em dash glyph it replaces (Avenir Next, 15 px), so no dash character is written.
   A border rather than a background, because forced-colors mode repaints backgrounds with the canvas color and would hide it. */
.compare-table .dash--bar { display: inline-block; width: .54em; height: 0; border-top: max(1px, .057em) solid currentColor; margin-inline: .03em; vertical-align: .214em; }
/* position: relative keeps the .sr-only cell text inside the scroller, so it cannot widen the page */
.compare-wrap { position: relative; overflow-x: auto; }
/* A paper card around the table; rows scroll sideways inside it on narrow screens */
.compare-card { max-width: 880px; margin-inline: auto; padding: 6px 22px; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-card); }
.compare-card .compare-table { min-width: 520px; }
.compare-table tbody th { font-family: var(--font-body); font-weight: 500; color: var(--ink-2); }
.compare-table tbody tr:last-child > * { border-bottom: 0; }
.compare-table .is-em { color: var(--brand); }
.compare-table td.is-em { background: color-mix(in srgb, var(--brand) 7%, transparent); }
.compare-table small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.35; font-weight: 400; color: var(--ink-3); }
.compare-table .compare-group th { padding: 22px 16px 10px; font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); border-bottom-style: solid; }
.compare-table--plans tbody th { width: 40%; }
.compare-note { max-width: 880px; margin: 14px auto 0; font-size: 13.5px; color: var(--ink-3); }
/* Phones: tighter cells so every column, the highlighted one included, fits without sideways scrolling */
@media (max-width: 560px) {
  .compare-card { padding: 4px 8px; border-radius: 18px; }
  .compare-card .compare-table { min-width: 0; font-size: 13.5px; }
  .compare-table th, .compare-table td { padding: 11px 5px; }
  .compare-table thead th { font-size: 13px; line-height: 1.25; }
  .compare-table small { font-size: 11.5px; }
  .compare-table .compare-group th { padding: 18px 5px 8px; font-size: 11px; letter-spacing: .1em; }
  .compare-table--plans tbody th { width: auto; }
}

/* --------------------------------------------------------------------------
   18. Accordion (FAQ): paper rows with a round plus that turns into a cross
   -------------------------------------------------------------------------- */
.accordion { display: grid; gap: 12px; max-width: 880px; margin-inline: auto; }
.accordion--full { max-width: none; }
.acc-item { background: var(--surface); border-radius: 18px; box-shadow: var(--shadow-card); }
.acc-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px;
  background: none;
  border: 0;
  border-radius: 18px;
  text-align: left;
  font-family: var(--font-head);
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
  cursor: pointer;
}
.acc-icon {
  position: relative;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--ink);
  transition: background .3s, transform .45s var(--bounce), box-shadow .3s;
}
.acc-icon::before, .acc-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  background: var(--ink);
  border-radius: 2px;
  transition: background .3s;
}
.acc-icon::before { width: 14px; height: 2px; }
.acc-icon::after { width: 2px; height: 14px; }
.acc-item.open .acc-icon { background: var(--brand-btn); box-shadow: none; transform: rotate(135deg); }
.acc-item.open .acc-icon::before, .acc-item.open .acc-icon::after { background: var(--paper); }
.acc-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.acc-a p { margin: 0 0 20px; padding: 0 72px 0 22px; color: var(--ink-2); }
.acc-a p:last-child { margin-bottom: 22px; }
html:not(.js) .acc-a { max-height: none; }
@media (max-width: 560px) {
  .acc-q { font-size: 1.02rem; padding: 18px; }
  .acc-a p { padding: 0 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .acc-a, .acc-icon, .acc-icon::before, .acc-icon::after { transition: none; }
}

/* --------------------------------------------------------------------------
   19. Footer: espresso with grain
   -------------------------------------------------------------------------- */
.footer {
  position: relative;
  isolation: isolate;
  background: var(--bg-darker);
  color: var(--ink-inv-2);
  font-size: 15px;
}
.footer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--grain);
  opacity: .25;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.footer a { color: var(--ink-inv-2); }
.footer a:hover { color: var(--ink-inv); }
.footer__grid { display: grid; grid-template-columns: 2.2fr repeat(5, 1fr); gap: 40px; padding: 68px 0 48px; }
.footer__brand .brand { color: var(--ink-inv); margin-bottom: 16px; }
.footer__brand .brand__tag { color: var(--brand-bright); }
.footer__brand p { max-width: 310px; font-size: 14.5px; margin-bottom: 14px; }
.footer__mail { font-weight: 700; }
.footer .footer__mail { color: var(--brand-bright); }
.footer__col h3 {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brand-bright);
  margin: 6px 0 16px;
}
.footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer__facts { border-top: 1px solid var(--line-dark); padding: 18px 0; font-size: 13.5px; text-align: center; color: var(--ink-inv-3); }
.footer__tm { max-width: 760px; margin: 8px auto 0; font-size: 12px; line-height: 1.5; }
.footer__bottom {
  border-top: 1px solid var(--line-dark);
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13.5px;
  color: var(--ink-inv-3);
}
.footer__social { display: flex; gap: 10px; }
.footer__social a {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px rgba(243, 233, 218, .3);
}
.footer__social a:hover { box-shadow: inset 0 0 0 1.5px var(--brand-bright); color: var(--brand-bright); }

@media (max-width: 980px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .footer__grid { grid-template-columns: 1fr; gap: 28px; }
}

/* --------------------------------------------------------------------------
   20. Forms (contact page)
   -------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.field label { font-size: 11.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.field input, .field select, .field textarea {
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--bg);
  border: 0;
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1.5px rgba(92, 58, 33, .22);
  padding: 13px 16px;
  width: 100%;
  transition: box-shadow .2s, background .2s;
}
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%232B1A12' stroke-width='1.8'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: none;
  background-color: var(--paper);
  box-shadow: inset 0 0 0 2px var(--brand-glow), 0 0 0 4px color-mix(in srgb, var(--brand-glow) 18%, transparent);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.form-status { font-size: 14.5px; font-weight: 700; margin: 12px 0 0; }
.form-status.is-ok { color: var(--olive); }
.form-status.is-error { color: var(--err); }
.form-note { font-size: 13.5px; color: var(--ink-3); margin: 12px 0 0; }
@media (max-width: 560px) {
  .form-row { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   21. Prose (legal pages + blog articles) — 760px measure
   -------------------------------------------------------------------------- */
.prose { max-width: 760px; }
.prose h2 { font-size: 1.75rem; margin: 2.1em 0 .6em; }
.prose h3 { font-size: 1.28rem; margin: 1.8em 0 .5em; }
.prose p { margin: 0 0 1.2em; }
.prose ul, .prose ol { margin: 0 0 1.2em; padding-left: 1.35em; }
.prose li { margin-bottom: .45em; }
.prose li::marker { color: var(--brand); }
.prose a { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--brand-glow) 50%, transparent); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: currentColor; }
.prose strong { color: var(--ink); }
.prose blockquote {
  margin: 1.6em 0;
  padding: 16px 20px;
  border-left: 4px solid var(--brand-btn);
  border-radius: 0 16px 16px 0;
  background: var(--surface);
  color: var(--ink-2);
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose code { font-family: var(--font-mono); font-size: .86em; background: var(--oat-2); border-radius: 6px; padding: 2px 6px; }
.prose pre { margin: 0 0 1.4em; }
.prose pre code { background: none; padding: 0; font-size: inherit; }
.prose hr { border: 0; border-top: 2px dotted var(--line-strong); margin: 2.5em 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 1.4em; font-size: 15px; }
.prose th, .prose td { border-bottom: 1px dashed var(--line-strong); padding: 10px 12px; text-align: left; }
.prose th { color: var(--ink); font-family: var(--font-head); font-weight: 700; }
.prose .updated { font-size: 14px; color: var(--ink-3); }

/* --------------------------------------------------------------------------
   22. Blog
   -------------------------------------------------------------------------- */
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.post-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  padding: 12px;
  transition: transform .35s var(--soft);
}
.post-card:hover { transform: translateY(-4px); }
.post-card__body { display: flex; flex-direction: column; gap: 10px; padding: 18px 12px 12px; flex: 1; }
.post-card h2, .post-card h3 { font-size: 1.3rem; margin: 0; }
.post-card h2 a, .post-card h3 a { color: var(--ink); }
.post-card h2 a:hover, .post-card h3 a:hover { color: var(--brand); }
.post-card p { font-size: 15px; color: var(--ink-2); margin: 0; }
.post-card__foot { margin-top: auto; font-size: 13.5px; color: var(--ink-3); padding-top: 6px; }

/* Illustrated covers: rolling hills under a low sun, CSS only */
.post-cover { position: relative; display: block; height: 170px; border-radius: 15px; overflow: hidden; }
.post-cover--a {
  background:
    radial-gradient(110% 62% at 88% 112%, #4E2E19 0 62%, transparent 62.5%),
    radial-gradient(95% 58% at 12% 108%, #7B4A2A 0 66%, transparent 66.5%),
    radial-gradient(140% 50% at 50% 92%, #B99A7E 0 58%, transparent 58.5%),
    radial-gradient(circle at 74% 30%, #F3D69E 0 11%, rgba(247, 226, 184, .45) 11.5% 15%, transparent 15.5%),
    linear-gradient(#EFDDCA, #D8B996);
}
.post-cover--b {
  background:
    radial-gradient(100% 60% at 10% 112%, #243F45 0 62%, transparent 62.5%),
    radial-gradient(95% 58% at 90% 108%, #35646E 0 66%, transparent 66.5%),
    radial-gradient(140% 50% at 50% 92%, #9DB2AE 0 58%, transparent 58.5%),
    radial-gradient(circle at 26% 30%, #F3D69E 0 11%, rgba(247, 226, 184, .45) 11.5% 15%, transparent 15.5%),
    linear-gradient(#E6E8E0, #BFCDC8);
}
.post-cover--c {
  background:
    radial-gradient(110% 62% at 80% 112%, #1C110B 0 62%, transparent 62.5%),
    radial-gradient(95% 58% at 16% 108%, #3A2419 0 66%, transparent 66.5%),
    radial-gradient(circle at 72% 32%, rgba(209, 138, 69, .75) 0 10%, rgba(209, 138, 69, .25) 10.5% 16%, transparent 16.5%),
    linear-gradient(#6B4428, #2B1A12);
}
/* Post-specific covers, shared by listing cards and article headers. */
.post-cover--why-no-app { background: #EFE5D6 url("covers/why-no-app.svg") center / cover no-repeat; }
.post-cover--design-first-pass { background: #EFE5D6 url("covers/design-first-pass.svg") center / cover no-repeat; }
.post-cover--stop-issuing-manually { background: #EFE5D6 url("covers/stop-issuing-manually.svg") center / cover no-repeat; }
.post-cover--loyalty-card-apple-google-wallet { background: #EFE5D6 url("covers/loyalty-card-apple-google-wallet.svg") center / cover no-repeat; }
.post-cover--how-live-pass-updates-work { background: #EFE5D6 url("covers/how-live-pass-updates-work.svg") center / cover no-repeat; }
.post-cover--loyalty-card-reward-ideas { background: #EFE5D6 url("covers/loyalty-card-reward-ideas.svg") center / cover no-repeat; }
.post-tag { font-family: var(--font-body); font-size: 11.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--brand); }
.share-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; max-width: 760px; margin: 36px auto 0; }
.share-row__label { font-weight: 700; color: var(--ink); margin-right: 4px; }
.share-row .chip { border: 0; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.share-row .chip:hover { background: rgba(92, 58, 33, .14); color: var(--ink); }
.share-row__url { flex: 1 1 260px; min-width: 0; padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-2); font: inherit; font-size: 13.5px; }
.post-meta { font-size: 13.5px; color: var(--ink-3); }

.post-card--featured { grid-column: 1 / -1; display: grid; grid-template-columns: 1.15fr 1fr; }
.post-card--featured .post-cover { height: 100%; min-height: 250px; }
.post-card--featured .post-card__body { padding: 28px 22px; justify-content: center; }
.post-card--featured h2 { font-size: 1.9rem; }

.article-head { max-width: 760px; margin: 0 auto; }
.article-cover { max-width: 960px; height: 260px; border-radius: var(--radius-lg); margin: 36px auto; box-shadow: var(--shadow-card); }
.byline { display: flex; align-items: center; gap: 12px; margin: 20px 0 0; }
.page-head .byline { justify-content: center; }
.byline__avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4A2E1A, var(--ink) 70%);
  color: var(--ink-inv);
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 700;
}
.byline__name { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.byline__meta { font-size: 13.5px; color: var(--ink-3); }

.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 760px; margin: 56px auto 0; }
.pager a { display: block; border-radius: 18px; padding: 16px 18px; background: var(--surface); box-shadow: var(--shadow-card); transition: transform .3s var(--soft); }
.pager a:hover { transform: translateY(-3px); }
.pager a.pager--next { text-align: right; }
.pager__label { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.pager__title { font-family: var(--font-head); font-size: 16px; font-weight: 700; color: var(--ink); }

@media (max-width: 900px) {
  .post-grid { grid-template-columns: 1fr 1fr; }
  .post-card--featured { grid-template-columns: minmax(0, 1fr); }
  .post-card--featured .post-cover { min-height: 180px; }
}
@media (max-width: 600px) {
  .post-grid { grid-template-columns: minmax(0, 1fr); }
  .pager { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   23. CTA band + error page
   -------------------------------------------------------------------------- */
.cta-band { text-align: center; }
.cta-band h2 { max-width: 680px; margin-inline: auto; font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3.3rem); }
.cta-band .lead { max-width: 540px; margin: 0 auto 32px; }
.section--dark.cta-band {
  background:
    radial-gradient(60% 90% at 85% 10%, color-mix(in srgb, var(--brand-bright) 22%, transparent), transparent 60%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .022) 0 2px, transparent 2px 12px),
    linear-gradient(135deg, #5C3A21, #4A2E1A);
}
.section--dark.cta-band .lead { color: var(--ink-inv); }

.error-page { min-height: 72vh; display: grid; place-items: center; text-align: center; padding: 64px 24px; }
.error-page__code { font-family: var(--font-head); font-size: clamp(4rem, 3rem + 4vw, 6rem); font-weight: 700; line-height: 1; letter-spacing: .02em; color: var(--brand); margin: 24px 0 10px; }
.error-page__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; max-width: 460px; margin: 30px auto 0; font-weight: 600; }
.error-page__links a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--brand) 40%, transparent); }
.error-page__links a:hover { text-decoration-color: currentColor; }

/* Pricing page head: text beside a kraft pouch holding the plan's passes (decorative) */
.page-head--split { text-align: left; }
.page-head--split .container { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 48px; align-items: center; }
.page-head--split h1, .page-head--split .lead { margin-left: 0; }
.page-head--split .eyebrow::after { display: none; }
.plan-pouch { position: relative; width: min(260px, 70vw); aspect-ratio: 3 / 4; justify-self: center; transform: rotate(-5deg); filter: drop-shadow(0 30px 30px rgba(43, 26, 18, .35)); }
.plan-pouch__back, .plan-pouch__front { position: absolute; left: 0; right: 0; border-radius: 10px 10px 14px 14px; }
.plan-pouch__back { top: 0; bottom: 0; background: linear-gradient(90deg, #9A7446, #B08656 45%, #A07A4A); }
.plan-pouch__back::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 9%; border-radius: 10px 10px 0 0; background: linear-gradient(#8A6538, #9A7446); }
.plan-pouch__front { top: 21%; bottom: 0; overflow: hidden; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 5px), linear-gradient(90deg, #B8915F, #CAA574 32%, #C19A68 62%, #A8804F); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .2), inset 0 -12px 20px rgba(0, 0, 0, .12); }
.plan-pouch__front::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8%; background: linear-gradient(rgba(0, 0, 0, .14), transparent); border-bottom: 2px dashed rgba(90, 60, 30, .35); }
/* Passes at their real proportions (375 x 550 pt): the 66 pt header and 144 pt strip show above the pouch front */
.plan-pouch__pass { position: absolute; left: 50%; top: 5%; width: 52%; aspect-ratio: 375 / 550; margin-left: -26%; border-radius: 3.2% / 2.18%; background: linear-gradient(transparent 12%, rgba(255, 248, 238, .2) 12% 38.18%, transparent 38.18%), var(--pc); box-shadow: 0 6px 12px -6px rgba(0, 0, 0, .5); transform: translateX(var(--x)) rotate(var(--r)); }
.plan-pouch__pass::before { content: ""; position: absolute; left: 5.6%; top: 2.36%; width: 10.67%; aspect-ratio: 1; border-radius: 50%; background: var(--surface); }
.plan-pouch__pass::after { content: ""; position: absolute; left: 19.7%; top: 4.9%; width: 36%; height: 2.2%; border-radius: 4px; background: rgba(255, 248, 238, .7); }
.plan-pouch__pass:nth-of-type(1) { --pc: #44596E; --x: 24%; --r: 8deg; }
.plan-pouch__pass:nth-of-type(2) { --pc: #7B4A2A; --x: -4%; --r: -3deg; }
.plan-pouch__label { position: absolute; left: 14%; right: 14%; top: 40%; padding: 16px 14px 14px; border-radius: 14px; background: var(--surface); text-align: center; box-shadow: inset 0 0 0 2px var(--ink), inset 0 0 0 5px var(--surface), inset 0 0 0 6px rgba(43, 26, 18, .35), 0 4px 0 rgba(0, 0, 0, .12); }
.plan-pouch__label svg { width: 38px; height: 38px; margin: 0 auto; }
.plan-pouch__label b { display: block; margin-top: 8px; font-family: var(--font-head); font-size: 20px; line-height: 1.1; color: var(--ink); }
.plan-pouch__label span { display: block; margin-top: 6px; font-size: 10px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--brand); }
.plan-pouch__label i { display: block; width: 56%; height: 2px; margin: 10px auto 8px; border-radius: 2px; background: var(--ink); }
.plan-pouch__label small { display: block; font-size: 11.5px; line-height: 1.35; color: var(--ink-2); }
@media (max-width: 860px) {
  .page-head--split { text-align: center; }
  .page-head--split .container { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .page-head--split h1, .page-head--split .lead { margin-inline: auto; }
  .page-head--split .eyebrow::after { display: block; }
  .plan-pouch { width: min(200px, 56vw); }
}

/* --------------------------------------------------------------------------
   24. Reveal on scroll (JS adds html.js + .in). Uses `translate` so hover
   transforms on the same element keep working. No-JS and reduced motion
   show everything.
   -------------------------------------------------------------------------- */
html.js .reveal { opacity: 0; translate: 0 18px; transition: opacity .7s var(--soft), translate .8s var(--soft), transform .35s var(--soft), box-shadow .35s var(--soft); }
html.js .reveal.in { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; translate: none; transition: none; }
  .btn, .tab, .card--link, .post-card, .pager a { transition: none; }
}

/* --------------------------------------------------------------------------
   25. Responsive grid collapse
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .grid--2, .grid--3 { grid-template-columns: minmax(0, 1fr); }
  .split { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .split--rev > :first-child { order: 0; }
}
@media (max-width: 760px) {
  .section { padding: 68px 0; }
  .page-head { padding: 60px 0 48px; }
  .hero { padding: 56px 0 0; }
  .hero__shot { margin-top: 44px; }
  .section-head { margin-bottom: 40px; }
}
@media (max-width: 600px) {
  .grid--4 { grid-template-columns: minmax(0, 1fr); }
  .container { padding-inline: 16px; }
}

/* --------------------------------------------------------------------------
   26. Cookie choices (assets/app.js): the consent banner and the footer's
   "Cookie settings" button. A paper card fixed to the bottom of the viewport.
   It sits under the header (z-index below .topbar), so the header and its menus
   stay on top, and under the homepage console overlay. While it shows, the
   footer grows by its height (--consent-space), so the end of every page can
   scroll clear of it. It never reaches the header: it scrolls inside itself.
   -------------------------------------------------------------------------- */
.consent {
  position: fixed;
  left: 24px;
  right: 24px;
  bottom: 20px;
  z-index: 55;
  max-width: 1080px;
  max-height: calc(100vh - var(--topbar-h) - 40px);
  max-height: calc(100dvh - var(--topbar-h) - 40px);
  margin: 0 auto;
  overflow: auto;
  overscroll-behavior: contain;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px 32px;
  padding: 20px 24px;
  background: var(--surface);
  color: var(--ink-2);
  border: 1px solid transparent; /* drawn in forced-colors mode, where the shadow is not */
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  font-size: 15px;
  line-height: 1.5;
  animation: consent-in .35s var(--soft) both;
}
.consent[hidden], .consent__manage[hidden] { display: none; }
.consent:focus-visible { border-radius: var(--radius-lg); outline-offset: 2px; }
@keyframes consent-in { from { opacity: 0; transform: translateY(14px); } }
.consent p { margin: 0; }
.consent .consent__title { font-family: var(--font-head); font-size: 17px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.consent a { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--brand-glow) 55%, transparent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.consent a:hover { text-decoration-color: currentColor; }
.consent__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.consent__choice { min-width: 7.6em; } /* Accept all and Reject all: the same style and width */
.consent__manage {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.consent__cat {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: 0 0 0 1px var(--line);
}
.consent__cat p:not(.consent__cat-name) { margin-top: 3px; font-size: 14px; color: var(--ink-3); }
.consent__cat-name { display: block; font-weight: 800; color: var(--ink); }
.consent__cat .chip { flex: none; }
.consent__switch {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  width: 46px;
  height: 28px;
  margin: 0;
  border-radius: 999px;
  background: radial-gradient(circle closest-side, var(--paper) 90%, transparent 96%) 3px 50% / 22px 22px no-repeat, rgba(43, 26, 18, .56);
  cursor: pointer;
  transition: background-position .2s var(--soft), background-color .2s ease;
}
.consent__switch:checked { background-color: var(--olive); background-position: calc(100% - 3px) 50%; }
.consent__switch:focus-visible { border-radius: 999px; }
.consent__save { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
.footer__consent { padding: 0; border: 0; background: none; color: var(--ink-inv-2); line-height: inherit; text-align: left; cursor: pointer; }
.footer__consent:hover { color: var(--ink-inv); }
html.consent-open .footer { padding-bottom: var(--consent-space, 0px); }
@media (max-width: 760px) {
  .consent { left: 12px; right: 12px; bottom: 12px; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 16px 16px 18px; }
  .consent__actions .btn { flex: 1 1 0; min-width: 0; padding-inline: 10px; }
  .consent__manage { grid-template-columns: minmax(0, 1fr); }
  .consent__save .btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .consent { animation: none; }
  .consent__switch { transition: none; }
}
@media (forced-colors: active) {
  .consent__switch { -webkit-appearance: auto; appearance: auto; width: 22px; height: 22px; }
}
@media print {
  .consent { display: none !important; }
}