/* openbaab.com, the public pages (home, /plans, 404).
   The same hand as the dashboard: teal on a cool pale ground, hairline cards,
   rounded display type, one accent. Pro keeps the dashboard's gold mark.

   The scale, used everywhere below and nowhere else:
   type    display / title / lead / body / small (five steps, one each)
   space   multiples of 8px (4px only inside a control); a section is
           --section above and below its content, never more
   mobile  measured against slowpebble.com at 390 on 2026-09-30, see
           founder-config/research/mobile-web-2026-09-30.md and WEB.md
   scenes  duotone frames on ink (assets/scenes); they carry their own dark
           ground, so they sit on the pale page as framed pictures. */
:root {
  --ground: #F3F8F8;
  --card: #FFFFFF;
  --raised: #E9F2F3;
  --chip: #E6F0F1;
  --ink: #0D2428;
  --ink-soft: #4B6B70;
  --line: rgba(13, 36, 40, 0.10);
  --line-strong: rgba(13, 36, 40, 0.18);
  --teal: #157987;
  --teal-hover: #106673;
  --teal-wash: rgba(21, 121, 135, 0.08);
  --teal-muted: #5B8E95;
  --on-teal: #FFFFFF;
  --pro: #85600F;
  --pro-line: rgba(140, 99, 18, 0.28);
  --band: #0D2428;
  --band-ink: #EEF6F6;
  --band-soft: #A9C3C7;
  --bezel: #061518;
  --scene-ground: #13272B;
  --scene-edge: rgba(13, 36, 40, 0.12);
  /* Complete: a dark ink card in both modes, gold only on the price, the rule
     and the call to Tarek. The gold is the TV's next-prayer gold (tv.css). */
  --complete-ink: #081315;
  --complete-text: #EEF6F6;
  --complete-soft: #A9C3C7;
  --complete-gold: #DBB561;
  --complete-line: rgba(238, 246, 246, 0.10);

  --round: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --text: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  /* Phone first: 43px / 30px / 20px / 18px at 390, the same steps slowpebble
     uses there (46 / 37 / 20 / 17-20), a touch smaller because SF Rounded
     Bold sets wider than General Sans Semibold. */
  --fs-display: clamp(38px, 24px + 5vw, 68px);
  --fs-title: clamp(30px, 22px + 2.4vw, 40px);
  --fs-lead: clamp(20px, 18px + 0.5vw, 24px);
  --fs-h3: clamp(22px, 20px + 0.5vw, 26px);
  --fs-body: 18px;
  --fs-small: 14px;
  --section: 64px;
  --gutter: 16px;

  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 40px;
  --s6: 48px; --s8: 64px; --s9: 72px; --s11: 88px; --s14: 112px;

  --radius: 24px;
  --alt: #E8F1F2;
  --night: #0A1A1D;
  --bar: rgba(8, 19, 21, 0.92);
  color-scheme: light;
}
@media (min-width: 720px) { :root { --section: 80px; --gutter: 40px; } }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0B2024;
    --card: #122D32;
    --raised: #193A40;
    --chip: #1B3F45;
    --ink: #EEF6F6;
    --ink-soft: #A9C3C7;
    --line: rgba(238, 246, 246, 0.09);
    --line-strong: rgba(238, 246, 246, 0.18);
    --teal: #3CB8C9;
    --teal-hover: #5CC6D4;
    --teal-wash: rgba(60, 184, 201, 0.10);
    --teal-muted: #7FAFB5;
    --on-teal: #06262B;
    --pro: #DBB561;
    --pro-line: rgba(219, 181, 97, 0.30);
    --band: #122D32;
    --band-ink: #EEF6F6;
    --band-soft: #A9C3C7;
    --bezel: #03100F;
    --scene-edge: rgba(238, 246, 246, 0.10);
    --alt: #0F272B;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground: #0B2024; --card: #122D32; --raised: #193A40; --chip: #1B3F45;
  --ink: #EEF6F6; --ink-soft: #A9C3C7;
  --line: rgba(238, 246, 246, 0.09); --line-strong: rgba(238, 246, 246, 0.18);
  --teal: #3CB8C9; --teal-hover: #5CC6D4; --teal-wash: rgba(60, 184, 201, 0.10); --teal-muted: #7FAFB5; --on-teal: #06262B;
  --pro: #DBB561; --pro-line: rgba(219, 181, 97, 0.30);
  --band: #122D32; --band-ink: #EEF6F6; --band-soft: #A9C3C7; --bezel: #03100F;
  --scene-edge: rgba(238, 246, 246, 0.10);
  --alt: #0F272B;
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* Anchored sections clear the floating bar. */
[id] { scroll-margin-top: 88px; }
/* Line breaks: headings balance, paragraphs avoid a lone last word. */
p, li, figcaption { text-wrap: pretty; }
.nb { white-space: nowrap; }
body {
  min-height: 100vh;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--text);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }

/* Links: teal, no underline on navigation and calls to action; a link inside
   running text is underlined, so it never depends on colour alone. */
a { color: var(--teal); text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
p a:not(.button):not(.text-link) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
p a:not(.button):not(.text-link):hover { text-decoration-color: currentColor; }

/* One focus ring for the site; light on the ink surfaces. */
:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 8px; }
.band :focus-visible, .tier.complete :focus-visible { outline-color: var(--complete-gold); }
.skip { position: absolute; left: var(--s2); top: -64px; z-index: 10; padding: var(--s1) var(--s2); border-radius: 12px; background: var(--ink); color: var(--ground); font-weight: 600; }
.skip:focus { top: var(--s2); text-decoration: none; }

/* 16px gutters on a phone, never inside the notch in landscape. */
.wrap {
  width: 100%; max-width: 1120px; margin: 0 auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}

/* ── The bar that follows you ──────────────────────────────────────
   The wordmark and one link, nothing that competes with the hero. At rest it
   is part of the page (on the photograph on home). Past 24px of scroll it
   becomes a dark translucent pill that blurs what runs under it, in both
   modes, so it reads on the pale page and on the dark bands alike: the
   slowpebble.com bar. One transition, 240ms, none under reduced motion. */
.site-bar {
  position: sticky; top: 0; z-index: 20;
  padding: 8px max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left));
  pointer-events: none;
}
.top {
  pointer-events: auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  max-width: 1136px; height: 60px; margin: 0 auto;
  padding: 0 var(--s1);
  border-radius: 18px;
  border: 1px solid transparent;
  transition: background-color 240ms ease, border-color 240ms ease, box-shadow 240ms ease;
}
@media (min-width: 720px) { .site-bar { padding-top: 12px; } .top { padding: 0 var(--s3); height: 64px; } }
.site-bar.float .top {
  background: var(--bar);
  -webkit-backdrop-filter: saturate(150%) blur(18px);
  backdrop-filter: saturate(150%) blur(18px);
  border-color: rgba(238, 246, 246, 0.10);
  box-shadow: 0 18px 44px -26px rgba(0, 0, 0, 0.7);
}
.site-bar.float .brand, .site-bar.on-photo .brand { color: #F4FAFA; }
.site-bar.float .top-link, .site-bar.on-photo .top-link { color: #9ADDE6; }
.site-bar.float :focus-visible, .site-bar.on-photo :focus-visible { outline-color: var(--complete-gold); }
/* Over the photograph the bar takes no room of its own: the hero runs up
   underneath it. */
.site-bar.on-photo { margin-bottom: -68px; }
@media (min-width: 720px) { .site-bar.on-photo { margin-bottom: -76px; } }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-family: var(--round); font-size: 22px; font-weight: 700; letter-spacing: -0.015em; line-height: 1; color: var(--ink); }
.brand img { width: 32px; height: 32px; border-radius: 8px; }
.brand:hover { text-decoration: none; }
.top-link { font-size: 17px; font-weight: 600; min-height: 44px; padding: 0 var(--s1); display: inline-flex; align-items: center; }

/* ── Type ───────────────────────────────────────────────────────────── */
h1 {
  font-family: var(--round);
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.035em;
  max-width: 22ch;
  text-wrap: balance;
}
h2 {
  font-family: var(--round);
  font-size: var(--fs-title);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
h3 { font-family: var(--round); font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.02em; line-height: 1.18; text-wrap: balance; }
.kicker { font-size: var(--fs-small); font-weight: 650; color: var(--teal); letter-spacing: 0.01em; }
.kicker + h1 { margin-top: var(--s2); }
.lede { margin-top: var(--s3); font-size: var(--fs-lead); line-height: 1.45; color: var(--ink-soft); max-width: 34ch; text-wrap: pretty; }
.src { font-size: var(--fs-small); color: var(--ink-soft); }

/* ── Hero ───────────────────────────────────────────────────────────── */
.hero { padding-top: var(--s3); padding-bottom: var(--section); }
@media (min-width: 720px) { .hero { padding-top: var(--s8); } }
/* With a scene: the frame beside the headline on wide screens, under the
   words on a phone. Never full-bleed, never under the type. */
.hero.with-scene { display: grid; gap: var(--s6); align-items: center; }
@media (min-width: 960px) {
  .hero.with-scene { grid-template-columns: minmax(0, 1fr) 400px; gap: var(--s8); padding-top: var(--s11); }
  .hero.with-scene.narrow-scene { grid-template-columns: minmax(0, 1fr) 360px; }
}
.hero-scene { max-width: 480px; }
@media (min-width: 960px) { .hero-scene { max-width: none; } }
/* Phone and tablet: the scene as a wide strip under the words, not a tall block. */
@media (max-width: 959px) {
  .hero.with-scene { gap: var(--s4); }
  .hero .hero-scene.scene { max-width: none; aspect-ratio: 16 / 10; }
  .hero .hero-scene img { object-position: center 40%; }
}

/* ── Photographic hero (home) ───────────────────────────────────────
   A film frame of a family at the masjid door, a dark band in both modes.
   Phone and tablet (under 900px), as slowpebble.com does it: the bar floats
   over the top of the frame, the frame is about a phone-width tall, and its
   foot fades into the band so the headline starts on the picture instead of
   under a hard edge. The headline is on the first screen at 390. Wide
   screens: full-bleed, the family in the left third, the type on the right
   over a scrim that covers only the right 55%. The frame drifts very slowly;
   not at all under reduced motion. */
.photo-hero { position: relative; background: var(--night); color: #F4FAFA; }
.photo-hero-media { position: relative; display: block; overflow: hidden; height: clamp(340px, 104vw, 520px); background: var(--night); }
.photo-hero-media::before {
  content: ""; position: absolute; inset: -24px;
  background: var(--ph-m) center 62% / cover no-repeat;
  filter: blur(20px);
}
.photo-hero-media img { position: relative; width: 100%; height: 100%; object-fit: cover; object-position: 50% 64%; }
.photo-hero-media::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to bottom, rgba(5, 16, 19, 0.55) 0, rgba(5, 16, 19, 0) 120px),
    linear-gradient(to top, #0A1A1D 0, rgba(10, 26, 29, 0.86) 14%, rgba(10, 26, 29, 0.35) 34%, rgba(10, 26, 29, 0) 52%);
}
.photo-hero-inner { position: relative; z-index: 2; margin-top: -88px; padding-bottom: var(--section); }
.photo-hero h1 { color: #FFFFFF; }
.photo-hero .lede, .photo-hero .android, .photo-hero .board-line { color: #C9DADC; }
.photo-hero .promise, .photo-hero .fact { color: #F4FAFA; }
.photo-hero .text-link { color: #9ADDE6; }
.photo-hero .button.primary { background: #3CB8C9; color: #06262B; }
.photo-hero .button.primary:hover { background: #5CC6D4; }
.photo-hero :focus-visible { outline-color: var(--complete-gold); }
@media (min-width: 720px) {
  .photo-hero-media { height: min(62vw, 520px); }
  .photo-hero-media::before { background-image: var(--ph); background-position: 22% 62%; }
  .photo-hero-media img { object-position: 22% 62%; }
}
@media (min-width: 900px) {
  .photo-hero { display: grid; min-height: 88vh; min-height: 88svh; }
  .photo-hero-media { position: absolute; inset: 0; height: auto; }
  /* The scrim: nothing over the family, the right 55% darkened toward ink so
     the headline reads at 7:1 or better at its lightest point (measured 9.9:1
     at 1280). A faint shade along the top keeps the wordmark readable on the sky. */
  .photo-hero-media::after {
    background:
      linear-gradient(to bottom, rgba(5, 16, 19, 0.42) 0, rgba(5, 16, 19, 0) 150px),
      linear-gradient(to left,
      rgba(5, 16, 19, 0.86) 0%, rgba(5, 16, 19, 0.82) 30%,
      rgba(5, 16, 19, 0.77) 40%, rgba(5, 16, 19, 0.64) 45%,
      rgba(5, 16, 19, 0.44) 49%, rgba(5, 16, 19, 0.22) 52%,
      rgba(5, 16, 19, 0.08) 54%, rgba(5, 16, 19, 0) 55%);
  }
  .photo-hero-inner {
    margin-top: 0; max-width: 1440px;
    display: flex; justify-content: flex-end; align-items: center;
    padding-top: var(--s14); padding-bottom: var(--s9);
  }
  .photo-hero .hero-copy { width: min(540px, 43%); }
  .photo-hero h1 { font-size: clamp(40px, 4.6vw, 68px); }
}
@media (prefers-reduced-motion: no-preference) {
  .photo-hero-media img { animation: drift 30s ease-in-out infinite alternate; }
  @keyframes drift {
    from { transform: scale(1.02) translateX(0); }
    to { transform: scale(1.06) translateX(-1.2%); }
  }
}

.actions { margin-top: var(--s4); display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: center; }
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 12px var(--s3); border-radius: 14px;
  font-size: var(--fs-body); font-weight: 600; line-height: 1.2; text-align: center;
}
.button { transition: background-color 160ms ease, transform 120ms ease; -webkit-tap-highlight-color: transparent; }
.button:hover { text-decoration: none; }
/* A press you can feel: 2% in, 120ms. Gone under reduced motion. */
.button:active { transform: scale(0.98); }
.actions .button { white-space: nowrap; }
@media (max-width: 359px) { .actions .button { padding-inline: 20px; } }
.button.primary { background: var(--teal); color: var(--on-teal); }
.button.primary:hover { background: var(--teal-hover); }
.button.quiet { background: var(--chip); color: var(--ink); }
.button.quiet:hover { background: var(--raised); }
.button.dark { background: var(--ink); color: var(--ground); }
.button.wide { width: 100%; }
.button svg { flex: none; }
.text-link { font-size: var(--fs-body); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; }
.text-link svg { transition: transform 0.2s ease; }
.text-link:hover svg { transform: translateX(3px); }
.proof-line { margin-top: var(--s1); font-size: var(--fs-small); color: var(--ink-soft); }
.promise { margin-top: var(--s2); font-size: var(--fs-body); font-weight: 600; line-height: 1.45; max-width: 36ch; }
.android { margin-top: var(--s2); font-size: 15px; color: var(--ink-soft); }
.fact { margin-top: var(--s5); font-family: var(--round); font-size: var(--fs-lead); font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; }
.board-line { margin-top: var(--s1); color: var(--ink-soft); }
.board-line .text-link { min-height: 0; padding: 10px 0; margin: -10px 0; }

/* ── Scenes: the duotone frames ─────────────────────────────────────── */
.scene {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--scene-ground);
  box-shadow: 0 0 0 1px var(--scene-edge);
}
.scene img { width: 100%; height: 100%; object-fit: cover; }
.scene.portrait { aspect-ratio: 4 / 5; }
.scene.landscape { aspect-ratio: 3 / 2; }
.scene.square { aspect-ratio: 1 / 1; }

/* ── The hall display band ──────────────────────────────────────────── */
.band { background: var(--band); color: var(--band-ink); padding: var(--section) 0; }
.screen {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: clamp(6px, 1vw, 12px);
  background: var(--bezel);
  border-radius: clamp(10px, 1.6vw, 20px);
  box-shadow: 0 0 0 1px rgba(238, 246, 246, 0.08);
}
/* The still under the live display: what shows if the frame never loads. */
.screen-inner {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: clamp(4px, 0.8vw, 10px);
  overflow: hidden;
  background: #0D2428 url("/assets/tv-demo.png") center / cover no-repeat;
}
/* Absolute, not height: 100%: Safari gives a percentage-height child of an
   aspect-ratio box the default 150px, and the display then lays itself out
   for a 150px-tall window. */
.screen iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  pointer-events: none;
}
.band-caption { margin-top: var(--s3); max-width: 60ch; color: var(--band-soft); }
.band-caption strong { color: var(--band-ink); font-weight: 600; }

/* ── What a congregant gets: rows, words beside the real screen ─────
   Each row is its own band, alternating with a faint second surface, the
   way slowpebble moves from one band to the next instead of drawing a
   hairline. A row that ends on a phone screenshot ends flush: the screen
   rises out of the bottom of its band, so there is no dead strip under the
   fade. */
.gets { padding: var(--section) 0 0; }
.gets > .wrap > h2 { max-width: 24ch; }
.get {
  position: relative;
  display: grid;
  gap: var(--s4);
  padding: var(--s6) 0;
  align-items: center;
}
.get:nth-of-type(even) {
  background: var(--alt);
  box-shadow: 0 0 0 100vmax var(--alt);
  clip-path: inset(0 -100vmax);
}
.gets > .wrap > h2 + .get { margin-top: var(--s2); }
.get:has(> .phone:last-child) { padding-bottom: 0; }
.get p { margin-top: var(--s2); color: var(--ink-soft); max-width: 60ch; }
.get p.fee { color: var(--ink); font-weight: 600; }
.get .num { font-family: var(--round); font-size: 15px; font-weight: 700; letter-spacing: 0.04em; color: var(--teal); }
.get .num + h3 { margin-top: var(--s1); }
.get h3 + p { margin-top: var(--s2); }
/* A row's scene sits under its words, beside the screenshot. */
.get .copy .scene { margin-top: var(--s4); max-width: 520px; }
@media (min-width: 820px) {
  .get { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s9); padding: var(--s9) 0; }
  .get.flip { grid-template-columns: 320px minmax(0, 1fr); }
  .get.flip .copy { order: 2; }
  .get.plain { grid-template-columns: minmax(0, 1fr); }
  .get.scene-side { grid-template-columns: minmax(0, 1fr) 400px; }
  .get > .phone:last-child { align-self: end; }
  .get:has(> .phone:last-child) .copy { padding-bottom: var(--s9); }
}
.get > .scene { max-width: 480px; width: 100%; }
.phone {
  display: block;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: var(--card);
  /* Only the top of the screen is shown; the fade says the page goes on. */
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent);
  mask-image: linear-gradient(to bottom, #000 82%, transparent);
  border-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
@media (max-width: 819px) {
  /* Phone: a shorter window on the screen, the top 80% of it. */
  .get .phone { max-width: 280px; aspect-ratio: 640 / 860; }
  .get .phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
}
@media (min-width: 820px) { .phone { max-width: 320px; } }

/* ── Footer ─────────────────────────────────────────────────────────── */
.foot { padding-top: var(--s5); padding-bottom: max(var(--s6), env(safe-area-inset-bottom)); }
.foot-bridge { padding: 0 0 var(--s4); border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); align-items: baseline; justify-content: space-between; }
.foot-bridge + .foot-bridge { padding-top: var(--s4); }
.foot-bridge p { font-family: var(--round); font-size: var(--fs-lead); font-weight: 700; letter-spacing: -0.015em; }
.foot-links { margin-top: var(--s3); display: flex; flex-wrap: wrap; gap: 0 var(--s3); font-size: var(--fs-small); font-weight: 600; }
.foot-links a { min-height: 44px; display: inline-flex; align-items: center; }
.foot-note { margin-top: var(--s1); font-size: var(--fs-small); color: var(--ink-soft); max-width: 68ch; }

/* ── /plans ─────────────────────────────────────────────────────────── */
.prices-line { margin-top: var(--s2); font-weight: 600; color: var(--ink); }
.stance p { font-family: var(--round); font-size: var(--fs-lead); font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; max-width: 44ch; text-wrap: pretty; }
.stance p + p { margin-top: var(--s2); }
.stance .src { max-width: 68ch; font-family: var(--text); font-size: var(--fs-small); font-weight: 400; letter-spacing: 0; color: var(--ink-soft); }

.tiers { display: grid; gap: var(--s2); align-items: start; }
@media (min-width: 980px) { .tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); } }
.tier {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s3);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
@media (min-width: 720px) { .tier { padding: var(--s4); } }
.tier.pro { border-color: var(--teal); box-shadow: inset 0 0 0 1px var(--teal-wash); }
.tier-name { display: flex; align-items: center; gap: var(--s1); font-family: var(--round); font-size: 24px; font-weight: 700; letter-spacing: -0.01em; }
.tier.pro .tier-name { color: var(--teal); }
.tier-name svg { flex: none; }
.price { margin-top: var(--s2); font-family: var(--round); font-size: 44px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.price .per { font-family: var(--text); font-size: var(--fs-body); font-weight: 500; letter-spacing: 0; color: var(--ink-soft); margin-left: var(--s1); }
.price-sub { margin-top: var(--s1); font-size: var(--fs-small); color: var(--ink-soft); min-height: 1.55em; }
.tier-line { margin-top: var(--s2); font-weight: 600; }
.tier-proof { margin-top: var(--s1); font-size: var(--fs-small); line-height: 1.45; color: var(--ink-soft); }
.tier.complete .tier-proof { color: var(--complete-soft); }
.tier-action { margin-top: var(--s3); }
.tier-fine { margin-top: var(--s2); font-size: var(--fs-small); color: var(--ink-soft); }
.rows-head { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); font-size: var(--fs-small); font-weight: 650; color: var(--ink-soft); }
.rows { list-style: none; margin-top: var(--s2); display: grid; gap: 12px; }
.rows-head + .rows { margin-top: var(--s2); }
.rows li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; font-size: 16px; line-height: 1.45; }
.rows li svg { color: var(--teal); margin-top: 3px; }
/* One drawn symbol per row (the SF Symbol the app uses, named in
   data-symbol), 18px, centred on the first line, in the plan's colour. */
.rows li svg.ic {
  margin-top: calc((1.45em - 18px) / 2);
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.tier.standard .rows li svg.ic { color: var(--teal-muted); }
.rows.coming li { color: var(--ink-soft); }
.rows.coming li svg { color: var(--line-strong); }
.coming-label {
  display: inline-block;
  margin-top: var(--s3);
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--chip);
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  align-self: flex-start;
}
.coming-label + .rows { margin-top: 12px; }

/* Complete: the black card. More room, a larger price, one gold hairline. */
.tier.complete {
  background: var(--complete-ink);
  color: var(--complete-text);
  border-color: var(--complete-line);
}
@media (min-width: 720px) { .tier.complete { padding: var(--s5); } }
.tier.complete .tier-name { color: var(--complete-text); }
.tier.complete .price { margin-top: var(--s3); font-size: 56px; color: var(--complete-gold); }
.tier.complete .price .per,
.tier.complete .price-sub,
.tier.complete .tier-fine,
.tier.complete .rows-head { color: var(--complete-soft); }
.tier.complete .tier-line { margin-top: var(--s3); color: var(--complete-text); }
.tier.complete .tier-action { margin-top: var(--s4); }
.tier.complete .rows-head { margin-top: var(--s4); padding-top: var(--s4); border-top-color: var(--complete-gold); }
.tier.complete .rows { gap: var(--s2); }
.tier.complete .rows li svg { color: var(--complete-gold); }
.tier.complete .rows.coming li { color: var(--complete-soft); }
.tier.complete .rows.coming li svg { color: rgba(238, 246, 246, 0.28); }
.tier.complete .coming-label { margin-top: var(--s4); background: rgba(238, 246, 246, 0.08); color: var(--complete-soft); }
.button.gold { background: rgba(238, 246, 246, 0.07); color: var(--complete-gold); box-shadow: inset 0 0 0 1px var(--complete-line); }
.button.gold:hover { background: rgba(238, 246, 246, 0.12); }

/* /plans sections after the cards */
.plans > h2 { margin-bottom: var(--s4); }
.tier-foot { margin-top: var(--s2); padding-top: 0; font-size: var(--fs-small); color: var(--ink-soft); }
.tier .rows + .tier-foot { margin-top: var(--s2); }
.claim { padding-top: var(--s11); }
.claim h2 { max-width: 28ch; }
.claim p { margin-top: var(--s2); max-width: 62ch; }
.sees { padding-top: var(--s11); }
.sees-lede { margin-top: var(--s2); max-width: 62ch; color: var(--ink-soft); }
.shots {
  margin-top: var(--s4);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 72%);
  gap: var(--s3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--s1);
}
.shots figure { scroll-snap-align: start; min-width: 0; }
.shots .phone { max-width: none; }
.shots figcaption { margin-top: var(--s2); font-size: var(--fs-small); color: var(--ink-soft); }
@media (min-width: 820px) {
  .shots { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); overflow: visible; }
}

.sum { padding-top: var(--s9); }
.sum p { max-width: 64ch; color: var(--ink); }
.sum h2 + p { margin-top: var(--s2); }
.sum p + p { margin-top: var(--s2); }
.sum .src { color: var(--ink-soft); }
.sum h2 { max-width: 30ch; }
.sum .compare { margin-top: var(--s4); display: grid; gap: 12px; max-width: 760px; }
@media (min-width: 640px) { .sum .compare { grid-template-columns: 1fr 1fr; gap: var(--s2); } }
.sum .compare-col { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 20px 22px; }
.sum .compare-col.with { background: var(--complete-ink); border-color: var(--complete-line); }
.sum .compare p { max-width: none; margin-top: 0; }
.sum .compare .compare-label { font-size: 14px; font-weight: 650; color: var(--ink-soft); }
.sum .compare .compare-figure { margin-top: 6px; font-family: var(--round); font-size: clamp(26px, 3.4vw, 34px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--ink); }
.sum .compare .compare-figure span { display: block; margin-top: 2px; font-family: var(--text); font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--ink-soft); }
.sum .compare .compare-note { margin-top: 6px; font-size: 14px; color: var(--ink-soft); }
.sum .compare .with .compare-label,
.sum .compare .with .compare-note,
.sum .compare .with .compare-figure span { color: var(--complete-soft); }
.sum .compare .with .compare-figure { color: var(--complete-gold); }
.sum .compare + p { margin-top: var(--s3); }
.proof { padding-top: var(--s9); }
.proof-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s4) var(--s3); }
@media (min-width: 720px) { .proof-card { padding: var(--s5); } }
.proof-card p { font-family: var(--round); font-size: var(--fs-lead); font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; max-width: 36ch; }
.proof-card p.small { max-width: 64ch; margin-top: var(--s2); font-family: var(--text); font-size: var(--fs-body); font-weight: 400; letter-spacing: 0; color: var(--ink-soft); line-height: 1.5; }

/* ── 404 ────────────────────────────────────────────────────────────── */
.lost { padding-top: var(--s3); padding-bottom: var(--section); }
@media (min-width: 720px) { .lost { padding-top: var(--s8); } }
.lost .actions { margin-top: var(--s4); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .button:active { transform: none; }
}

/* ── /plans: one rhythm. Every section is followed by the same gap. ─── */
.plans-page { --gap: var(--section); }
.plans-page > section { padding-top: 0; padding-bottom: 0; }
.plans-page > section + section { margin-top: var(--gap); }
/* The volunteer line belongs to the hero; it follows it at half the gap. */
.plans-page > .hero + .stance { margin-top: var(--s5); }
.plans-page > .hero { padding-top: var(--s3); padding-bottom: 0; }
@media (min-width: 720px) { .plans-page > .hero { padding-top: var(--s8); } }
.plans-page h1 { font-size: clamp(34px, 18px + 5.4vw, 64px); max-width: 20ch; }
.plans-page .claim-line { margin-top: var(--s4); font-family: var(--round); font-size: var(--fs-lead); letter-spacing: -0.015em; }
.plans-page .claim-line strong { font-weight: 700; }
.plans-page .claim-src { margin-top: var(--s1); max-width: 68ch; font-size: var(--fs-small); color: var(--ink-soft); }
.plans-page > .board-band { padding: var(--section) 0; }
.board-band h2 { color: var(--band-ink); }
.band-lede { margin-top: var(--s1); color: var(--band-soft); }
.manage-row {
  margin-top: var(--s4);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 68%);
  gap: var(--s2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.manage-row::-webkit-scrollbar { display: none; }
.manage-row figure { scroll-snap-align: start; min-width: 0; }
.manage-row .device {
  max-width: 260px;
  margin: 0 auto;
  padding: 7px;
  border-radius: 44px;
  background: #050B0C;
  box-shadow: 0 0 0 1px rgba(238, 246, 246, 0.14);
}
.manage-row .device img { display: block; width: 100%; height: auto; aspect-ratio: 1206 / 2622; object-fit: cover; object-position: top; border-radius: 37px; }
/* Three identical frames: the iPhone 17 screen's aspect inside the bezel,
   whatever size the screenshot is, so the captions sit on one line. */
.manage-row figure { display: flex; flex-direction: column; }
.manage-row .device { width: 100%; }
.manage-row figcaption { margin-top: auto; padding-top: var(--s2); text-align: center; font-size: 13px; font-weight: 500; letter-spacing: 0.01em; color: var(--band-soft); }
@media (min-width: 820px) {
  .manage-row { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); overflow: visible; }
}
.plans-page .sum h2 { max-width: none; }
.plans-page .sum .compare + p { margin-top: var(--s3); }
@media (max-width: 719px) {
  /* Phone: cards at slowpebble's density (24px in, 15px list on 1.45). */
  .plans-page .tier { padding: var(--s3) 20px; }
  .plans-page .rows { gap: 10px; }
  .plans-page .rows li { font-size: 15px; line-height: 1.45; }
  .plans-page .rows-head { margin-top: var(--s3); padding-top: var(--s3); }
  .plans-page .tier-action { margin-top: var(--s3); }
  .plans-page .tier-proof { font-size: 13.5px; }
  .plans-page .tier.complete { padding: var(--s3) 20px; }
  .plans-page .tier.complete .price { margin-top: var(--s2); font-size: 48px; }
  .plans-page .tier.complete .tier-line { margin-top: var(--s2); }
  .plans-page .tier.complete .tier-action { margin-top: var(--s3); }
  .plans-page .tier.complete .rows-head { margin-top: var(--s3); padding-top: var(--s3); }
  .plans-page .sum .compare { grid-template-columns: 1fr 1fr; gap: var(--s1); }
  .plans-page .sum .compare-col { padding: var(--s2); }
  .plans-page .sum .compare .compare-figure { font-size: 22px; }
  .plans-page .proof-card { padding: var(--s3) 20px; }
}

/* The bar's download button, as slowpebble.com has it: always one tap from the App Store. */
.top-actions { display: flex; align-items: center; gap: var(--s1); }
.top-get {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  border-radius: 12px; font-size: 16px; font-weight: 600;
  background: var(--teal, #157987); color: #fff; text-decoration: none;
}
.top-get:hover { filter: brightness(1.08); }
.site-bar.float .top-get, .site-bar.on-photo .top-get { background: #157987; color: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset; }
/* Phones: the second link goes first (For boards, or Sign in on /plans);
   Events and Download stay, with less padding under 360px. Measured: the
   wordmark and three links need about 400px. */
@media (max-width: 440px) { .top-actions .top-drop { display: none; } }
.top-link { white-space: nowrap; }
@media (max-width: 359px) { .top-actions { gap: 4px; } .top-link { padding: 0 6px; } .top-get { padding: 0 14px; } }
.top-link[aria-current="page"] { color: var(--ink); }
.site-bar.float .top-link[aria-current="page"] { color: #F4FAFA; }

/* ── Paid tickets, the one rule (2026-10-07), under each set of plans ── */
.plans-page .tickets-line { margin-top: var(--s4); font-weight: 600; max-width: 62ch; }
.plans-page .tickets-src { margin-top: var(--s1); max-width: 68ch; font-size: var(--fs-small); color: var(--ink-soft); }
.plans-page .tickets-src + .claim-line { margin-top: var(--s5); }

/* ── Organizations: two plans, on /plans and /organizations ─────────── */
@media (min-width: 720px) { .tiers.two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); max-width: 880px; } }
.plans-page .orgs > h2 { margin-bottom: 0; max-width: 26ch; }
.orgs-lede { margin-top: var(--s2); margin-bottom: var(--s4); max-width: 60ch; color: var(--ink-soft); }
.orgs-lede .text-link { display: inline-flex; min-height: 0; padding: 10px 0; margin: -10px 0; }

/* /organizations: what an organization gets, four numbered rows on the
   second ground, two by two on wide screens. */
.org-gets { background: var(--alt); padding: var(--section) 0; }
.plans-page > .org-gets { padding: var(--section) 0; }
.org-gets h2 { max-width: 24ch; }
.org-list { list-style: none; margin-top: var(--s4); display: grid; gap: var(--s5); }
@media (min-width: 820px) { .org-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6) var(--s8); } }
.org-list .num { font-family: var(--round); font-size: 15px; font-weight: 700; letter-spacing: 0.04em; color: var(--teal); }
.org-list h3 { margin-top: var(--s1); }
.org-list p { margin-top: var(--s2); color: var(--ink-soft); max-width: 56ch; }
.org-list p.fee { margin-top: var(--s1); color: var(--ink); font-weight: 600; font-size: 16px; }
.org-plans h2 { max-width: 24ch; }
.org-plans p { margin-top: var(--s2); max-width: 60ch; color: var(--ink-soft); }
.org-plans .text-link { margin-top: var(--s2); }
.hero-fine { margin-top: var(--s2); font-size: 15px; color: var(--ink-soft); }