/* usetipd.com
   The app's own look: its greens and white, charcoal in dark mode, New York for titles
   and money, SF Pro for everything else. System fonts only, and nothing loads from anyone else.
   Every color is a token from Theme.swift (light, dark). The page opens like an app window:
   one inset rounded card with the phone rising from its floor, glass controls floating over it. */

:root {
  --bg: #F2F7F3;
  --card: #FFFFFF;
  --line: #DEE5DF;
  --divider: #EAEFEB;
  --ink: #19221A;
  --ink2: #525E54;
  --calendar-detail: var(--ink2);
  --muted: #8E998F;
  --green: #2F7A55;
  --accent: #2F7A55;
  --green-dark: #095234;
  --mint: #D4EEDE;
  --pale: #E7F5EC;
  --pale-border: #BFDBCA;
  --apostrophe: #7FBF98;
  --on-accent: #FFFFFF;
  /* The site's own buttons keep this green in dark mode too: the app's lighter dark accent
     is under the 4.5:1 that white text needs on the web. The recreated screens still use --accent. */
  --button: #2F7A55;
  --button-hover: #23603F;
  --error: #A63D34;

  /* The two soft tones behind the App Store screenshots. */
  --shape-deep: #C0DACB;
  --shape-mid: #D5E8DB;

  /* Fern's job colors (Shared/JobColorPalette.swift), under the names 1.0 gave their keys:
     lagoon is the blue key (Teal), honey amber, terracotta coral, moss green (Moss), mauve plum
     (Grape), rosewood slate (Berry), sage (Jade), sky, indigo (Orchid), apricot (Indigo). Tint and
     calendar tint are one opaque tint, as in the app. Chip text stays black: the site only fills
     chips with Teal and Amber, where black reads best. */
  --on-job: #000000;
  --lagoon: #00A59D;
  --lagoon-tint: #C7F2EE;
  --lagoon-calendar-tint: #C7F2EE;
  --honey: #B78512;
  --honey-tint: #F8E5C7;
  --honey-calendar-tint: #F8E5C7;
  --terracotta: #D17052;
  --terracotta-tint: #FFE0D7;
  --terracotta-calendar-tint: #FFE0D7;
  --moss: #446700;
  --moss-tint: #DEEECF;
  --moss-calendar-tint: #DEEECF;
  --mauve: #664698;
  --mauve-tint: #EBE3FF;
  --mauve-calendar-tint: #EBE3FF;
  --rosewood: #933450;
  --rosewood-tint: #FFDEE4;
  --rosewood-calendar-tint: #FFDEE4;
  --sage: #43A466;
  --sage-tint: #D2F1DA;
  --sage-calendar-tint: #D2F1DA;
  --sky: #3C96D8;
  --sky-tint: #D4EBFF;
  --sky-calendar-tint: #D4EBFF;
  --indigo: #BD6FB2;
  --indigo-tint: #FBDDF5;
  --indigo-calendar-tint: #FBDDF5;
  --apricot: #4253A3;
  --apricot-tint: #E0E7FF;
  --apricot-calendar-tint: #E0E7FF;
  --cocoa: var(--lagoon);
  --cocoa-tint: var(--lagoon-tint);
  --cocoa-calendar-tint: var(--lagoon-calendar-tint);
  --slate: var(--terracotta);
  --slate-tint: var(--terracotta-tint);
  --slate-calendar-tint: var(--terracotta-calendar-tint);

  /* The jar. */
  --jar-glass: #C1D7CA;
  --jar-lid: #A8C2B2;
  --jar-inside: #F8FBF9;
  --jar-fill: #79D0C8;
  --jar-preview: #C4EDE8;

  --glass: rgba(255, 255, 255, 0.72);
  --glass-line: rgba(255, 255, 255, 0.9);
  /* Liquid glass: a translucent fill, a bright edge, a specular top and a soft drop. */
  --glass-fill: rgba(255, 255, 255, 0.46);
  --glass-edge: rgba(255, 255, 255, 0.78);
  --glass-shine: rgba(255, 255, 255, 0.95);
  --glass-hover: rgba(255, 255, 255, 0.66);
  --glass-shadow: 0 10px 30px rgba(25, 34, 26, 0.10);
  --dock-shadow: 0 0 2px rgba(25, 34, 26, 0.08), 0 0 20px rgba(25, 34, 26, 0.14), 0 0 44px rgba(25, 34, 26, 0.14);
  /* The hero's sky and the soft dome under the phone, in the app's greens. */
  --sky-top: #E9F3EC;
  --sky-mid: #CFE4D7;
  --sky-bottom: #B8D5C4;
  --dome-1: #FBFDFB;
  --dome-2: #E6F1E9;
  --dome-3: #C6DDCE;
  --shadow: 0 10px 30px rgba(25, 34, 26, 0.08);
  --shadow-soft: 0 2px 6px rgba(25, 34, 26, 0.06);
  /* Depth for the phone and the story's app screens: a contact line, a mid drop and a wide soft one. */
  --shadow-phone: 0 1px 2px rgba(25, 34, 26, 0.18), 0 18px 36px -8px rgba(25, 34, 26, 0.28), 0 50px 100px -10px rgba(25, 34, 26, 0.26);
  --shadow-lift: 0 1px 2px rgba(25, 34, 26, 0.06), 0 12px 28px -6px rgba(25, 34, 26, 0.14), 0 32px 64px -12px rgba(25, 34, 26, 0.16);
  --bezel: #2A2E2C;
  /* The iPhone's band and its shine, on the black bezel. */
  --frame: #3B403E;
  --frame-hi: #7C837F;

  --serif: ui-serif, "New York", "Iowan Old Style", "Palatino", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  --radius-card: 24px;
  --gutter: 24px;
  --measure: 34rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0E130F;
    --card: #1A211B;
    --line: #323B33;
    --divider: #252D27;
    --ink: #EDF2ED;
    --ink2: #B5C2B7;
    --calendar-detail: var(--ink2);
    --muted: #78847A;
    --green: #8AD4AB;
    --accent: #7DC79E;
    --green-dark: #BEE6CE;
    --mint: #213A2D;
    --pale: #202E26;
    --pale-border: #365242;
    --apostrophe: #7FBF98;
    --button: #2F7A55;
    --button-hover: #2A6E4C;
    --error: #F2ABA0;
    --shape-deep: #1F2E26;
    --shape-mid: #1A2620;
    --lagoon: #00AAA2;
    --lagoon-tint: #06403C;
    --lagoon-calendar-tint: #06403C;
    --honey: #BA8B28;
    --honey-tint: #453312;
    --honey-calendar-tint: #453312;
    --terracotta: #D3775A;
    --terracotta-tint: #4F2C21;
    --terracotta-calendar-tint: #4F2C21;
    --moss: #52761C;
    --moss-tint: #2E3C1C;
    --moss-calendar-tint: #2E3C1C;
    --mauve: #7A5CAB;
    --mauve-tint: #3B304F;
    --mauve-calendar-tint: #3B304F;
    --rosewood: #AA4D66;
    --rosewood-tint: #4E2A33;
    --rosewood-calendar-tint: #4E2A33;
    --sage: #50A96E;
    --sage-tint: #1E3F29;
    --sage-calendar-tint: #1E3F29;
    --sky: #479BDA;
    --sky-tint: #1B3A51;
    --sky-calendar-tint: #1B3A51;
    --indigo: #C076B5;
    --indigo-tint: #472C43;
    --indigo-calendar-tint: #472C43;
    --apricot: #5467B4;
    --apricot-tint: #2D3553;
    --apricot-calendar-tint: #2D3553;
    --cocoa: var(--lagoon);
    --cocoa-tint: var(--lagoon-tint);
    --cocoa-calendar-tint: var(--lagoon-calendar-tint);
    --slate: var(--terracotta);
    --slate-tint: var(--terracotta-tint);
    --slate-calendar-tint: var(--terracotta-calendar-tint);
    --jar-glass: #3D5748;
    --jar-lid: #4D6B5A;
    --jar-inside: #121813;
    --jar-fill: #008680;
    --jar-preview: #00534F;
    --glass: rgba(31, 42, 36, 0.72);
    --glass-line: rgba(255, 255, 255, 0.08);
    --glass-fill: rgba(31, 42, 36, 0.52);
    --glass-edge: rgba(255, 255, 255, 0.14);
    --glass-shine: rgba(255, 255, 255, 0.26);
    --glass-hover: rgba(255, 255, 255, 0.10);
    --glass-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    --dock-shadow: 0 0 2px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.4), 0 0 44px rgba(0, 0, 0, 0.4);
    --sky-top: #1B3A2A;
    --sky-mid: #22503A;
    --sky-bottom: #1A3A2B;
    --dome-1: #3E7A5C;
    --dome-2: #2C5B43;
    --dome-3: #1F4331;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    --shadow-soft: 0 2px 6px rgba(0, 0, 0, 0.3);
    --shadow-phone: 0 1px 2px rgba(0, 0, 0, 0.4), 0 18px 36px -8px rgba(0, 0, 0, 0.5), 0 50px 100px -10px rgba(0, 0, 0, 0.5);
    --shadow-lift: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 28px -6px rgba(0, 0, 0, 0.4), 0 32px 64px -12px rgba(0, 0, 0, 0.45);
    --bezel: #2A2E2C;
    --frame: #474D4A;
    --frame-hi: #8E9591;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0E130F;
  --card: #1A211B;
  --line: #323B33;
  --divider: #252D27;
  --ink: #EDF2ED;
  --ink2: #B5C2B7;
  --calendar-detail: var(--ink2);
  --muted: #78847A;
  --green: #8AD4AB;
  --accent: #7DC79E;
  --green-dark: #BEE6CE;
  --mint: #213A2D;
  --pale: #202E26;
  --pale-border: #365242;
  --apostrophe: #7FBF98;
  --button: #2F7A55;
  --button-hover: #2A6E4C;
  --error: #F2ABA0;
  --shape-deep: #1F2E26;
  --shape-mid: #1A2620;
  --lagoon: #00AAA2;
  --lagoon-tint: #06403C;
  --lagoon-calendar-tint: #06403C;
  --honey: #BA8B28;
  --honey-tint: #453312;
  --honey-calendar-tint: #453312;
  --terracotta: #D3775A;
  --terracotta-tint: #4F2C21;
  --terracotta-calendar-tint: #4F2C21;
  --moss: #52761C;
  --moss-tint: #2E3C1C;
  --moss-calendar-tint: #2E3C1C;
  --mauve: #7A5CAB;
  --mauve-tint: #3B304F;
  --mauve-calendar-tint: #3B304F;
  --rosewood: #AA4D66;
  --rosewood-tint: #4E2A33;
  --rosewood-calendar-tint: #4E2A33;
  --sage: #50A96E;
  --sage-tint: #1E3F29;
  --sage-calendar-tint: #1E3F29;
  --sky: #479BDA;
  --sky-tint: #1B3A51;
  --sky-calendar-tint: #1B3A51;
  --indigo: #C076B5;
  --indigo-tint: #472C43;
  --indigo-calendar-tint: #472C43;
  --apricot: #5467B4;
  --apricot-tint: #2D3553;
  --apricot-calendar-tint: #2D3553;
  --cocoa: var(--lagoon);
  --cocoa-tint: var(--lagoon-tint);
  --cocoa-calendar-tint: var(--lagoon-calendar-tint);
  --slate: var(--terracotta);
  --slate-tint: var(--terracotta-tint);
  --slate-calendar-tint: var(--terracotta-calendar-tint);
  --jar-glass: #3D5748;
  --jar-lid: #4D6B5A;
  --jar-inside: #121813;
  --jar-fill: #008680;
  --jar-preview: #00534F;
  --glass: rgba(31, 42, 36, 0.72);
  --glass-line: rgba(255, 255, 255, 0.08);
  --glass-fill: rgba(31, 42, 36, 0.52);
  --glass-edge: rgba(255, 255, 255, 0.14);
  --glass-shine: rgba(255, 255, 255, 0.26);
  --glass-hover: rgba(255, 255, 255, 0.10);
  --glass-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  --dock-shadow: 0 0 2px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.4), 0 0 44px rgba(0, 0, 0, 0.4);
  --sky-top: #1B3A2A;
  --sky-mid: #22503A;
  --sky-bottom: #1A3A2B;
  --dome-1: #3E7A5C;
  --dome-2: #2C5B43;
  --dome-3: #1F4331;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  --shadow-soft: 0 2px 6px rgba(0, 0, 0, 0.3);
  --shadow-phone: 0 1px 2px rgba(0, 0, 0, 0.4), 0 18px 36px -8px rgba(0, 0, 0, 0.5), 0 50px 100px -10px rgba(0, 0, 0, 0.5);
  --shadow-lift: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 28px -6px rgba(0, 0, 0, 0.4), 0 32px 64px -12px rgba(0, 0, 0, 0.45);
  --bezel: #2A2E2C;
  --frame: #474D4A;
  --frame-hi: #8E9591;
}

/* ---------- Base ---------- */

* { box-sizing: border-box; }
html {
  --story-top: calc(env(safe-area-inset-top, 0px) + 112px);
  --story-peek: 96px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--story-top);
}
html.story-snapping { scroll-snap-type: y proximity; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; font-weight: 500; text-wrap: balance; }
p, ul { margin: 0; }
a { color: var(--green); }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 6px;
}
strong { font-weight: 600; }
.num { font-variant-numeric: tabular-nums; }
.skip {
  position: absolute; left: 16px; top: -60px; z-index: 40;
  padding: 10px 16px; border-radius: 999px;
  background: var(--accent); color: #fff; font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; }

/* ---------- Liquid glass ---------- */
/* A translucent fill over a blur, a bright hairline edge, a specular sheen along the top and a
   soft drop. Controls only: the dock, buttons, chips, the strip. Never on content. */

.glass {
  position: relative;
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid var(--glass-edge);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 var(--glass-shine), inset 0 -1px 0 rgba(0, 0, 0, 0.04), var(--glass-shadow);
  color: var(--ink);
}
.glass::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 48%);
  pointer-events: none;
}
.glass > * { position: relative; }
a.glass, button.glass { transition: background-color 0.2s ease, transform 0.15s ease; }
a.glass:hover, button.glass:hover { background: var(--glass-hover); }
a.glass:active, button.glass:active { transform: scale(0.98); }

/* ---------- The dock ---------- */

.dock {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 34px);
  left: 0; right: 0;
  z-index: 30;
  display: flex; justify-content: center; align-items: center; gap: 10px;
  padding: 0 12px;
  pointer-events: none;
}
.dock > * { pointer-events: auto; }
/* The dock floats higher than the other glass controls: a deeper shadow, even all around. */
.dock > .glass { box-shadow: inset 0 1px 0 var(--glass-shine), inset 0 -1px 0 rgba(0, 0, 0, 0.04), var(--dock-shadow); }
/* The round mark and the pill share one height, so they read as one set. */
.dock { --dock-h: 58px; }
.dock-mark {
  width: var(--dock-h); height: var(--dock-h);
  display: flex; align-items: center; justify-content: center;
  white-space: nowrap;
  font: 600 16px/1 var(--serif);
  letter-spacing: -0.02em;
  color: var(--green);
  text-decoration: none;
}
.dock-mark span { color: var(--apostrophe); }
.dock-nav { display: flex; align-items: center; gap: 2px; height: var(--dock-h); padding: 0 6px; }
.dock-nav a {
  display: inline-flex; align-items: center;
  height: max(44px, calc(var(--dock-h) - 14px));
  padding: 0 18px;
  border-radius: 999px;
  color: var(--ink2);
  font-size: 16px; font-weight: 500; line-height: 1;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.dock-nav a:hover, .dock-nav a[aria-current="page"] { color: var(--ink); background: var(--glass-hover); }
.dock-nav a.get { color: var(--on-accent); background: var(--button); }
.dock-nav a.get:hover { background: var(--button-hover); }

/* ---------- Buttons and chips ---------- */

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px;
  border-radius: 999px;
  font-size: 16px; font-weight: 600; line-height: 1.2;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.45; cursor: default; transform: none; }
.btn.sm { padding: 9px 16px; font-size: 14px; font-weight: 500; }
.btn-primary { background: var(--button); color: var(--on-accent); }
.btn-primary:hover { background: var(--button-hover); }
.btn.glass { font-weight: 500; }
.status-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 12px;
  border-radius: 999px;
  color: var(--green-dark);
  font-size: 14px; font-weight: 500;
}
.status-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px var(--mint); }

/* ---------- Hero: one inset card ---------- */

.hero { padding: 14px; }
.hero-card {
  position: relative;
  height: calc(100svh - 28px);
  min-height: 620px;
  max-height: 1040px;
  border-radius: 44px;
  overflow: hidden;
  isolation: isolate;
  background: var(--sky-mid);
}
.sky {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 58%, var(--sky-bottom) 100%);
}
.orb {
  position: absolute; border-radius: 50%;
  filter: blur(46px); opacity: 0.8;
  background: var(--dome-2);
}
.orb.a { width: 42vmax; height: 42vmax; left: -14vmax; top: -12vmax; }
.orb.b { width: 30vmax; height: 30vmax; right: -10vmax; top: 4vmax; background: var(--sky-top); }
/* The soft shape the phone rises out of: a wide, gently shaded dome. */
.dome {
  position: absolute;
  left: 50%; bottom: -62%;
  width: 190%; aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 22%, var(--dome-1) 0%, var(--dome-2) 34%, var(--dome-3) 70%, var(--sky-bottom) 100%);
  box-shadow: 0 -30px 80px rgba(25, 34, 26, 0.06);
}
.hero-copy {
  position: absolute; z-index: 2;
  left: 0; right: 0; top: 31%;
  transform: translateY(-50%);
  text-align: center;
  padding: 0 var(--gutter);
}
.hero h1 {
  margin: 0 auto;
  max-width: 18ch;
  font-family: var(--serif);
  font-size: clamp(32px, 4.4vw, 62px);
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.hero-sub {
  margin: 10px auto 0;
  max-width: 34ch;
  font: 400 clamp(16px, 1.4vw, 19px)/1.4 var(--sans);
  color: var(--ink2);
}
.hero-actions { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 18px; }
.hero-actions .btn { flex-shrink: 0; height: 40px; padding: 0 18px; }
.hero-actions .app-store-link { padding: 0; border-radius: 8px; }
.hero-stage { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero-stage .phone {
  --s: 0.86;
  position: absolute;
  left: calc(50% - 195px * var(--s));
  top: 53%;
}
.phone .page {
  position: absolute; left: 0; right: 0; top: 40px; bottom: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.phone .page.on { opacity: 1; }
.strip {
  position: absolute; z-index: 3;
  left: 50%; bottom: 22px;
  transform: translateX(-50%);
  display: flex; gap: 6px;
  padding: 6px;
}
.strip button {
  width: 52px; height: 42px;
  border: 0; border-radius: 13px;
  display: grid; place-items: center;
  color: var(--ink);
  cursor: pointer;
  opacity: 0.72;
  transition: opacity 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}
.strip .t-week { background: var(--lagoon-tint); }
.strip .t-month { background: var(--honey-tint); }
.strip .t-stats { background: var(--mint); }
.strip .t-goals { background: var(--pale); }
.strip button:hover { opacity: 1; }
.strip button[aria-selected="true"] { opacity: 1; color: var(--green); box-shadow: 0 0 0 2px var(--green), var(--shadow-soft); transform: translateY(-1px); }

/* ---------- The statement ---------- */

.statement { padding: clamp(96px, 17vh, 200px) var(--gutter); text-align: center; }
.statement p {
  margin: 0 auto;
  max-width: 24ch;
  font: 500 clamp(26px, 3.4vw, 50px)/1.2 var(--serif);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.statement .w { display: inline-block; opacity: 0.16; filter: blur(5px); transition: opacity 0.5s ease, filter 0.5s ease; }
.statement .w.on { opacity: 1; filter: blur(0); }

/* ---------- The story: overlapping cards with a glimpse of the next feature ---------- */

.story {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 14px;
  isolation: isolate;
}
/* Snap to stationary markers: sticky cards change position as they overlap. */
.story-snap {
  height: 1px;
  margin-bottom: -1px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  pointer-events: none;
}
.story-card {
  position: sticky;
  top: var(--story-top);
  z-index: var(--card-index);
  height: calc(100svh - var(--story-top) - var(--story-peek));
  min-height: 460px;
  margin-bottom: 16px;
  padding: 28px;
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: stretch;
  border-radius: 36px;
  background: var(--bg);
  box-shadow: 0 -8px 28px -20px rgba(25, 34, 26, 0.22);
  transform-origin: center 40px;
  transform: scale(var(--story-scale, 1));
}
.story-card:nth-of-type(even) { background: var(--pale); }
.story-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 28rem;
  min-width: 0;
  padding: 12px 8px;
}
.story-copy h2 { font: 500 clamp(32px, 3.4vw, 46px)/1.08 var(--serif); letter-spacing: -0.025em; }
.story-copy p { margin: 16px 0 0; color: var(--ink2); font-size: clamp(15px, 1.15vw, 18px); line-height: 1.5; }
.story-stage {
  position: relative;
  min-width: 0;
  min-height: 0;
  border-radius: 28px;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, var(--pale), var(--mint));
}
.stage-shape { position: absolute; border-radius: 50%; background: var(--shape-deep); }
.stage-shape.a { width: 62vmin; height: 62vmin; right: -26vmin; bottom: -36vmin; opacity: 0.9; }
.stage-shape.b { width: 22vmin; height: 22vmin; left: -6vmin; top: -8vmin; background: var(--shape-mid); }
.panel {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px;
}
.panel .ui {
  flex: none;
  width: 380px;
  max-width: none;
  transform: scale(var(--story-ui-scale, 0.7));
  transform-origin: center;
}
.panel .ui-card { box-shadow: var(--shadow-lift); }
.story-exit + .privacy { position: relative; background: var(--bg); padding-top: 64px; }

/* Keep every feature readable when the viewport or larger text needs more room. */
.story.story-flow .story-card,
.no-js .story-card { position: relative; top: auto; height: auto; min-height: 0; transform: none; }
.story.story-flow .story-stage,
.no-js .story-stage { min-height: 0; }
.story.story-flow .panel,
.no-js .panel { position: relative; }
.story.story-flow .panel .ui,
.no-js .panel .ui { width: 100%; max-width: 380px; transform: none; }
.no-js .strip { display: none; }
.no-js .statement .w { opacity: 1; filter: none; }

/* Home Screen widgets: live HTML arranged like the App Store artwork. */
.panel .widget-showcase {
  width: 480px;
  aspect-ratio: 1 / 1.15;
  container-type: inline-size;
  position: relative;
  color: var(--ink);
}
.widget-layout { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 2.05fr) minmax(0, 1fr); grid-template-rows: 1fr 1fr auto; gap: 2.4cqw; }
.home-widget { min-width: 0; padding: 3cqw; border-radius: 5cqw; background: var(--card); box-shadow: var(--shadow-lift); }
.widget-month { grid-row: 1 / 3; }
.widget-month-heading { display: flex; align-items: center; justify-content: space-between; gap: 1cqw; font: 600 3.2cqw/1.2 var(--serif); letter-spacing: -0.02em; white-space: nowrap; }
.widget-month-heading > span { display: flex; align-items: center; gap: 0.6cqw; }
.widget-month-heading svg { width: 2cqw; height: 2cqw; color: var(--green); }
.widget-month-heading .faint { color: var(--muted); }
.widget-month-heading b { font-size: 4.2cqw; font-weight: 500; }
.widget-calendar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.6cqw; margin-top: 3cqw; font-size: 2.3cqw; font-weight: 500; }
.widget-weekday { color: var(--ink2); text-align: center; padding-bottom: 1cqw; font-size: 2.1cqw; }
.widget-day { display: flex; flex-direction: column; align-items: center; gap: 0.35cqw; padding: 0.6cqw 0; min-height: 6.3cqw; line-height: 1; border-radius: 1.2cqw; }
.widget-day b { font-size: 2.35cqw; font-weight: 650; }
.widget-day small { font-size: 1.8cqw; color: var(--ink); }
.widget-day.outside { color: var(--ink2); opacity: 0.6; }
.widget-showcase .sea { background: var(--terracotta-calendar-tint); }
.widget-showcase .apricot { background: var(--sage-calendar-tint); }
.widget-showcase .today { outline: 1.5px solid var(--green); outline-offset: -1.5px; }
.widget-footnote { font-size: 2.35cqw; color: var(--ink2); margin-top: 2cqw; }
.widget-heading { font: 600 3.6cqw/1.15 var(--serif); letter-spacing: -0.02em; }
.widget-goal { display: flex; flex-direction: column; justify-content: space-between; }
.widget-goal-body { display: flex; align-items: center; width: auto; gap: 1.5cqw; margin-top: 2cqw; }
.widget-goal-body .widget-jar { width: 8cqw; flex: none; }
.widget-goal-body > div { display: flex; flex-direction: column; gap: 0.4cqw; }
.widget-goal-body b { font: 500 5cqw/1.1 var(--serif); letter-spacing: -0.02em; }
.widget-goal-body span { font-size: 2.6cqw; color: var(--ink2); }
.widget-log { display: flex; flex-direction: column; gap: 2cqw; }
.widget-shortcut { display: flex; align-items: center; justify-content: center; gap: 1cqw; padding: 2.5cqw 1cqw; border-radius: 2cqw; font-size: 2.5cqw; font-weight: 600; }
.widget-shortcut svg { width: 3.2cqw; height: 3.2cqw; flex: none; }
.widget-week { grid-column: 1 / -1; padding: 3cqw 4cqw; }
.widget-week-heading { display: flex; justify-content: space-between; align-items: baseline; }
.widget-week-heading .widget-heading { font-size: 5cqw; }
.widget-week-heading span { font-size: 2.7cqw; color: var(--ink2); }
.widget-week-heading > b { font: 500 7cqw/1 var(--serif); letter-spacing: -0.03em; }
.widget-week-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1cqw; margin-top: 2.8cqw; }
.widget-week-day { text-align: center; font-size: 2.7cqw; }
.widget-week-day > span { color: var(--ink2); }
.widget-week-value { display: flex; flex-direction: column; gap: 1.6cqw; margin-top: 1cqw; padding: 1.6cqw 0; border-radius: 2cqw; font-size: 3.3cqw; }
.widget-week-value b { font-size: 3.1cqw; font-weight: 650; }
.widget-week-footer { display: flex; justify-content: space-between; margin-top: 2cqw; font-size: 2.6cqw; color: var(--ink2); }
.story.story-flow .panel .widget-showcase,
.no-js .panel .widget-showcase { max-width: 480px; }

/* ---------- Privacy and questions ---------- */

.privacy { padding: clamp(96px, 15vh, 180px) var(--gutter); text-align: center; }
.privacy h2 { font: 500 clamp(32px, 4.4vw, 60px)/1.05 var(--serif); letter-spacing: -0.025em; }
.privacy p { max-width: 38rem; margin: 18px auto 0; color: var(--ink2); font-size: clamp(16px, 1.25vw, 19px); }
.facts {
  list-style: none; padding: 0;
  margin: 32px auto 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  max-width: 760px;
}
.facts li { display: flex; align-items: center; gap: 8px; padding: 10px 16px 10px 12px; font-size: 15px; font-weight: 500; }
.facts svg { color: var(--green); flex: none; }
.privacy .more { display: inline-block; margin-top: 26px; font-size: 15px; font-weight: 500; }
.questions { padding: 24px var(--gutter) clamp(72px, 10vh, 120px); }
.section-head { text-align: center; max-width: 40rem; margin: 0 auto; }
.section-head h2 { font: 500 clamp(30px, 3.6vw, 44px)/1.1 var(--serif); letter-spacing: -0.02em; }
.section-head p { margin-top: 12px; color: var(--ink2); font-size: 18px; }
.questions .qa { margin: 28px auto 0; }

/* ---------- The phone ---------- */

.phone {
  --s: 1;
  position: relative;
  z-index: 1;
  width: calc(390px * var(--s));
  height: calc(868px * var(--s));
  flex: none;
}
/* An iPhone from the front: a titanium band with a shine at two corners, the black bezel inside it,
   and the action, volume and side keys standing off the edges. */
.phone .device {
  position: absolute;
  inset: 0;
  transform: scale(var(--s));
  transform-origin: top left;
  width: 390px;
  height: 868px;
  padding: 3px;
  border-radius: 58px;
  background: linear-gradient(155deg, var(--frame-hi) 0%, var(--frame) 22%, var(--frame) 78%, var(--frame-hi) 100%);
  box-shadow: 0 0 0 0.5px rgba(25, 34, 26, 0.4), var(--shadow-phone);
}
.phone .bezel {
  height: 100%;
  padding: 9px;
  border-radius: 55px;
  background: var(--bezel);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.08);
}
.phone .keys i {
  position: absolute;
  width: 4px;
  background: linear-gradient(180deg, var(--frame-hi), var(--frame) 22%, var(--frame) 78%, var(--frame-hi));
}
.phone .k-action, .phone .k-up, .phone .k-down { left: -4px; border-radius: 2px 0 0 2px; }
.phone .k-side { right: -4px; border-radius: 0 2px 2px 0; }
.phone .k-action { top: 183px; height: 35px; }
.phone .k-up { top: 259px; height: 69px; }
.phone .k-down { top: 349px; height: 69px; }
.phone .k-side { top: 286px; height: 108px; }
.phone .screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 46px;
  background: var(--bg);
  overflow: hidden;
  font-size: 15px;
  line-height: 1.3;
}
.phone .island {
  position: absolute;
  top: 11px;
  left: 50%;
  width: 120px; height: 34px;
  transform: translateX(-50%);
  border-radius: 20px;
  background: #000;
  z-index: 3;
}
.phone .statusbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 30px 0;
  font-size: 15px;
  font-weight: 600;
}
.phone .statusbar svg { display: block; }

/* Screen content: the Week tab, laid out like WeekView. */
.s-body { padding: 14px 20px 0; display: flex; flex-direction: column; gap: 12px; }
.s-head { display: flex; align-items: center; justify-content: space-between; }
.s-head .s-title { margin: 0; font: 500 34px/1.1 var(--serif); letter-spacing: -0.02em; }
.s-round {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  color: var(--ink);
}
.s-cap {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 9px 14px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  font-size: 15px;
  font-weight: 500;
}
.s-cap svg { color: var(--ink2); }
.s-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 16px 14px 14px;
}
.s-label { font-size: 14px; color: var(--ink2); }
.s-money { font: 500 52px/1.05 var(--serif); letter-spacing: -0.03em; margin-top: 2px; }
.s-pills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.s-pill { background: var(--pale); border-radius: 14px; padding: 9px 12px; display: flex; flex-direction: column; gap: 1px; }
.s-pill b { font-size: 17px; font-weight: 600; }
.s-pill span { font-size: 12px; color: var(--ink2); }
.s-rule { height: 1px; background: var(--line); margin: 12px 0 10px; }
.s-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; }
.s-row + .s-row { margin-top: 8px; }
.s-row .lts { font: 500 28px/1 var(--serif); color: var(--green); letter-spacing: -0.02em; }
.s-legend { display: flex; gap: 12px; font-size: 13px; color: var(--ink2); margin-top: 4px; }
.s-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; }
.s-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-top: 12px; }
.s-day { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.s-bar { height: 116px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 5px; width: 100%; }
.s-bar b { font-size: 12px; font-weight: 600; }
.s-bar i { display: block; width: 28px; border-radius: 9px; background: var(--lagoon); height: calc(var(--h) * 1px); transform-origin: bottom; }
.s-bar i.honey { background: var(--honey); }
.s-bar .off { font-size: 12px; color: var(--ink2); }
.s-bar .off::after { content: ""; display: block; width: 28px; height: 4px; border-radius: 2px; background: var(--divider); margin-top: 5px; }
.s-date { display: flex; flex-direction: column; align-items: center; font-size: 12px; color: var(--ink2); }
.s-date b { font-size: 15px; font-weight: 500; color: var(--ink); width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; }
.s-date.today { color: var(--green); font-weight: 600; }
.s-date.today b { background: var(--accent); color: #fff; font-weight: 600; }
.s-shifts { display: flex; align-items: baseline; gap: 8px; padding: 6px 4px 0; font-size: 18px; font-weight: 600; }
.s-shifts span { font-size: 14px; font-weight: 500; color: var(--ink2); }
.s-shift {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
}
.s-shift .st { width: 4px; height: 38px; border-radius: 2px; background: var(--lagoon); }
.s-shift .sd { width: 34px; text-align: center; font-size: 11px; font-weight: 600; color: var(--ink2); text-transform: uppercase; letter-spacing: 0.04em; }
.s-shift .sd b { display: block; font: 500 20px/1.1 var(--serif); color: var(--ink); letter-spacing: 0; text-transform: none; }
.s-shift .sn { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 15px; font-weight: 600; }
.s-shift .sn span { font-size: 13px; font-weight: 400; color: var(--ink2); }
.s-shift .sv { text-align: right; font-size: 16px; font-weight: 600; }
.s-shift .sv span { display: block; font-size: 12px; font-weight: 400; color: var(--ink2); }

.s-float {
  position: absolute;
  left: 14px; right: 14px; bottom: 16px;
  display: flex; flex-direction: column; gap: 10px;
  z-index: 2;
}
.s-float::before {
  content: "";
  position: absolute;
  inset: -40px -14px -16px;
  background: linear-gradient(to bottom, transparent, var(--bg) 55%);
  z-index: -1;
}
.s-log {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 52px;
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow-soft);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: var(--green);
  font-size: 17px; font-weight: 600;
}
.s-tabs {
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 4px;
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow-soft);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.s-tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  height: 56px;
  border-radius: 999px;
  font-size: 10px; font-weight: 600;
  color: var(--ink);
}
.s-tab.on { background: var(--mint); color: var(--green); }
.s-tab svg { display: block; }

/* ---------- Recreated app UI ---------- */

.ui { width: 100%; max-width: 380px; font-size: 15px; line-height: 1.3; }
.ui-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 20px;
  box-shadow: var(--shadow);
}
.ui-card + .ui-card { margin-top: 14px; }
.ui-mint { background: var(--mint); border-color: transparent; }
.ui-title { font-size: 15px; font-weight: 600; }
.ui-money { font: 500 44px/1.05 var(--serif); letter-spacing: -0.03em; }
.ui-money small { font-size: 22px; letter-spacing: 0; margin-left: 2px; }
.ui-muted { color: var(--ink2); }
.ui-caption { font-size: 13px; color: var(--ink2); }
.ui-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; }
.ui-stat b { display: block; font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.ui-stat .v { font: 500 26px/1.1 var(--serif); letter-spacing: -0.02em; }
.ui-stat span { display: block; font-size: 13px; color: var(--ink2); margin-top: 3px; }
.ui-rule { height: 1px; background: var(--line); margin: 14px 0; }
.ui-mint .ui-rule { background: rgba(25, 34, 26, 0.12); }
:root[data-theme="dark"] .ui-mint .ui-rule { background: rgba(255, 255, 255, 0.12); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ui-mint .ui-rule { background: rgba(255, 255, 255, 0.12); } }

.ui-field { font-size: 14px; font-weight: 600; color: var(--ink2); display: flex; justify-content: space-between; align-items: baseline; }
.ui-field span { font-weight: 400; }
.ui-field + * { margin-top: 8px; }
.ui-block + .ui-block { margin-top: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  height: 40px; padding: 0 16px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  font-size: 15px; font-weight: 500;
  color: var(--ink);
}
.chip.sm { height: 34px; padding: 0 13px; font-size: 14px; }
.chip.xs { height: 32px; width: 32px; padding: 0; justify-content: center; font-size: 13px; }
.chips.days { flex-wrap: nowrap; gap: 6px; }
.chips.days .chip { flex: 1 1 0; min-width: 0; width: auto; }
.chips.days .chip.on { flex-grow: 1.4; }
.chip i { width: 9px; height: 9px; border-radius: 50%; background: var(--dot, var(--green)); }
.chip.on { background: var(--dot, var(--accent)); border-color: transparent; color: #fff; font-weight: 600; }
.chip.on i { background: #fff; }
.chip.on[style*="--dot"] { color: var(--on-job); }
.chip.on[style*="--dot"] i { background: currentColor; }
.ui-input {
  display: flex; align-items: center; gap: 4px;
  min-height: 54px; padding: 0 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  font: 500 22px/1 var(--serif);
}
.ui-input .pre { color: var(--ink2); }
.ui-input.on { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
.ui-stepper { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
.ui-stepper b { font: 500 26px/1 var(--serif); }
.ui-stepper i { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--pale); color: var(--green); font-style: normal; font-size: 22px; font-weight: 500; }
.ui-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 52px; border-radius: 999px;
  background: var(--accent); color: #fff;
  font-size: 17px; font-weight: 600;
}
.ui-btn.glass { background: var(--card); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-soft); height: 48px; }
.ui-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ui-hint { display: flex; justify-content: space-between; gap: 14px; font-size: 13px; color: var(--ink2); margin-top: 10px; }
.ui-hint span { flex: 1; }
.ui-hint b { color: var(--ink); font-weight: 600; }

.ui-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ui-menu { display: flex; gap: 8px; }
.ui-menu .chip { height: 32px; padding: 0 12px; font-size: 13px; }

/* Trends bars and the weekly chart: thin rounded marks, labels only where they matter. */
.tr-bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; align-items: end; height: 150px; margin-top: 12px; }
.tr-bar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; font-size: 12px; color: var(--ink2); }
.tr-bar b { font-size: 12px; font-weight: 600; color: var(--ink); }
.tr-bar i { display: block; width: 100%; max-width: 40px; border-radius: 8px 8px 3px 3px; background: var(--lagoon); height: calc(var(--h) * 1px); transform-origin: bottom; }
.tr-bar.none i { height: 3px; background: var(--divider); border-radius: 2px; }
.ui-note {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--pale);
  font-size: 15px;
  margin-top: 14px;
}
.ui-note svg { flex: none; margin-top: 2px; color: var(--green); }

/* Month calendar. */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-top: 12px; }
.cal .wd { text-align: center; font-size: 12px; font-weight: 600; color: var(--ink2); padding-bottom: 4px; }
.cal .d {
  min-height: 62px;
  border-radius: 12px;
  padding: 6px 2px;
  text-align: center;
  font-size: 13px; font-weight: 500;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
}
.cal .d b { font-size: 12px; font-weight: 600; }
.cal .d span { font-size: 10px; color: var(--calendar-detail); }
.cal .d.lag { background: var(--lagoon-calendar-tint); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lagoon) 42%, transparent); }
.cal .d.hon { background: var(--honey-calendar-tint); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--honey) 42%, transparent); }
.cal .d.dim { color: var(--muted); }
.cal .d.today { box-shadow: inset 0 0 0 2px var(--green); }

/* Goals: the jar and its card. */
.goal { display: flex; gap: 18px; align-items: center; }
.jar { width: 84px; flex: none; }
.jar svg { display: block; width: 100%; height: auto; overflow: visible; }
.jar .lid { fill: var(--jar-lid); }
.jar .glass { fill: none; stroke: var(--jar-glass); stroke-width: 3; }
.jar .inside { fill: var(--jar-inside); }
.jar .liquid { fill: var(--jar-fill); }
.jar .pct { font: 500 16px var(--serif); fill: var(--ink); }
.jar .pct-bg { fill: var(--glass); stroke: var(--glass-line); }
.goal-name { font-size: 17px; font-weight: 600; }
.goal-amt { font: 500 30px/1.1 var(--serif); letter-spacing: -0.02em; margin-top: 2px; }
.goal-amt small { font-size: 16px; color: var(--ink2); letter-spacing: 0; }
.goal-sub { font-size: 14px; color: var(--ink2); margin-top: 4px; }
.goal-sub b { color: var(--green); font-weight: 600; white-space: nowrap; }
.ui-dots { width: 40px; height: 40px; border-radius: 50%; background: var(--card); border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink); flex: none; align-self: flex-start; box-shadow: var(--shadow-soft); }

/* Year: tax tracker and export. */
.track { height: 12px; border-radius: 6px; background: var(--pale); overflow: hidden; margin-top: 10px; }
.track i { display: block; height: 100%; width: var(--w); border-radius: 6px; background: var(--green); transform-origin: left; }
.ui-rows { display: flex; flex-direction: column; gap: 10px; }
.ui-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 15px; }
.ui-row .k { color: var(--ink2); }
.ui-row .v { font-weight: 500; }
.ui-row.strong .k { color: var(--ink); font-weight: 600; }
.ui-row.strong .v { font: 500 24px/1 var(--serif); color: var(--green); }
.paycheck { display: flex; align-items: center; gap: 12px; }
.paycheck .stub {
  width: 44px; height: 56px; flex: none;
  border-radius: 8px;
  background: repeating-linear-gradient(180deg, var(--pale) 0 6px, var(--card) 6px 12px);
  border: 1px solid var(--line);
}
.paycheck .pn { flex: 1; font-weight: 600; }
.paycheck .pn span { display: block; font-size: 13px; font-weight: 400; color: var(--ink2); }

/* Questions. */
.qa { margin-top: 28px; border-top: 1px solid var(--line); max-width: 46rem; }
.qa details { border-bottom: 1px solid var(--line); }
.qa summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 2px;
  font-size: 17px; font-weight: 600;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: "+";
  flex: none;
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--pale);
  color: var(--green);
  font-weight: 500;
  transition: transform 0.2s ease;
}
.qa details[open] summary::after { transform: rotate(45deg); }
.qa .a { padding: 0 2px 20px; color: var(--ink2); max-width: var(--measure); }
.qa .a a { color: var(--green); }

/* ---------- The close ---------- */

.close { position: relative; text-align: center; padding: clamp(72px, 12vh, 140px) var(--gutter) 48px; overflow: hidden; }
.close .mark { font: 600 clamp(64px, 9vw, 128px)/1 var(--serif); letter-spacing: -0.03em; color: var(--green); }
.close .mark span { color: var(--apostrophe); }
.close p { margin: 18px auto 0; max-width: 30rem; font-size: 18px; color: var(--ink2); }
.close-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 24px; }
.app-store-link { display: inline-flex; padding: 10px; }
.app-store-link img { display: block; width: auto; height: 40px; }
.close .fine { margin-top: 18px; font-size: 14px; color: var(--ink2); }

/* ---------- Footer ---------- */

footer.site {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  margin: 0 14px;
  padding: 24px 10px 40px;
  border-top: 1px solid var(--line);
  color: var(--ink2);
  font-size: 14px;
}
footer.site nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
footer.site a { color: var(--ink2); text-decoration: none; display: inline-block; padding: 6px 0; }
footer.site a:hover { color: var(--green); }
/* The language switch lives here, not in the dock: a globe and the other language's name, written in that language. */
footer.site a.lang { display: inline-flex; align-items: center; gap: 6px; }
footer.site a.lang .ic { flex: none; }
/* Social links: a centred row of the networks' own colour logos above the copyright line. Plain links, no embeds. */
footer.site .social { flex: 0 0 100%; display: flex; justify-content: center; gap: 12px; margin: 0 0 6px; padding: 0; list-style: none; }
footer.site .social a { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; background: var(--card); border: 1px solid var(--line); color: var(--ink); transition: transform 0.15s ease, box-shadow 0.15s ease; }
footer.site .social a:hover { color: var(--ink); transform: translateY(-1px); box-shadow: 0 6px 14px -8px rgba(25, 34, 26, 0.35); }
footer.site .social svg { display: block; width: 22px; height: 22px; }
@media (prefers-reduced-motion: reduce) { footer.site .social a { transition: none; } footer.site .social a:hover { transform: none; } }

/* ---------- Support and Privacy pages ---------- */

.doc { max-width: 680px; margin: 0 auto; padding: 128px var(--gutter) 24px; }
.doc h1 { font-family: var(--serif); font-size: clamp(36px, 5vw, 48px); line-height: 1.08; letter-spacing: -0.02em; }
.doc .lead { color: var(--ink2); font-size: 19px; margin: 12px 0 28px; max-width: var(--measure); }
.doc h2 { font-size: 20px; font-weight: 600; margin: 36px 0 10px; }
.doc h3 { font-size: 17px; font-weight: 600; margin: 0 0 4px; }
.doc p, .doc ul { margin-bottom: 14px; }
.doc ul { padding-left: 22px; }
.doc li { margin-bottom: 6px; }
.doc .muted { color: var(--ink2); font-size: 15px; }
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 22px;
  margin: 0 0 16px;
}
.card p:last-child, .card ul:last-child { margin-bottom: 0; }
.summary { background: var(--mint); border: none; border-radius: 20px; }
.summary strong { color: var(--green-dark); }
.faq-cards { display: grid; gap: 12px; }
.faq-cards .card { margin: 0; }

/* ---------- The support form ---------- */

.doc .direct { margin: -14px 0 26px; color: var(--ink2); }
.form-card { padding: 24px; }
.form-card[hidden], #form-off[hidden] { display: none; }
.form-field + .form-field { margin-top: 16px; }
.form-field label { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; font-size: 14px; font-weight: 600; }
.form-field label span { font-weight: 400; font-size: 13px; color: var(--ink2); }
.form-field input, .form-field textarea {
  display: block; width: 100%;
  font: inherit; color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-field textarea { resize: vertical; min-height: 150px; }
.form-field input:focus, .form-field textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--mint); }
.field-help { margin-top: 8px; font-size: 13px; color: var(--ink2); }
.form-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#turnstile-widget { margin-top: 18px; }
#turnstile-widget:empty { display: none; }
.form-status { margin-top: 10px; font-size: 14px; color: var(--ink2); }
.form-status:empty { display: none; }
.form-status.is-error { color: var(--error); }
.form-status.is-success { color: var(--green); }
.form-card .btn { margin-top: 16px; }
.doc .faq-heading { margin-top: 44px; }
.doc .qa { max-width: none; }

/* ---------- Blog (pages built by website/blog/build.mjs) ---------- */

.post-list { list-style: none; padding: 0; display: grid; gap: 12px; }
.doc .post-list li { margin: 0; }
.post-list h2 { margin: 0 0 6px; font: 500 22px/1.2 var(--serif); letter-spacing: -0.01em; }
.post-list h2 a { color: var(--ink); text-decoration: none; }
.post-list h2 a:hover { color: var(--green); }
/* The whole card is the link's target area; the title stays the one link for screen readers. */
.post-list li { position: relative; }
.post-list h2 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.post-list p { color: var(--ink2); }
.doc .post-list p:last-child { margin-bottom: 0; }
.post-date { color: var(--ink2); font-size: 14px; }
.post-list .post-date { margin: 0; }
.crumb { margin: 0 0 14px; font-size: 15px; }
.crumb a { text-decoration: none; }
.crumb a::before { content: "‹ "; }
.post .post-date { margin: 12px 0 22px; }
.quick { margin-bottom: 8px; }
.post article h2 { font: 500 26px/1.2 var(--serif); letter-spacing: -0.01em; margin: 40px 0 12px; }
.post article h3 { margin-top: 24px; }
.post article ol { padding-left: 22px; margin-bottom: 14px; }
.post article li { margin-bottom: 6px; }
.post article blockquote { margin: 0 0 14px; padding: 2px 0 2px 16px; border-left: 3px solid var(--mint); color: var(--ink2); }
/* Tables scroll inside their own box on a phone, so the page never scrolls sideways. */
.post article table { display: block; overflow-x: auto; border-collapse: collapse; margin: 0 0 18px; font-size: 15px; }
.post article th, .post article td { padding: 9px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.post article th { font-weight: 600; background: var(--card); vertical-align: bottom; }
.post article td.num, .post article th.num { text-align: right; font-variant-numeric: tabular-nums; }
.post article td.num { white-space: nowrap; }
/* On a phone, a five-column table still fits: smaller type, tighter cells. */
@media (max-width: 520px) {
  .post article table { font-size: 13.5px; }
  .post article th, .post article td { padding: 8px 5px; }
  .post article th:first-child, .post article td:first-child { padding-left: 0; }
  .post article th:last-child, .post article td:last-child { padding-right: 0; }
}
/* Charts and maps are SVG files drawn by website/blog/figures/; each links to itself so a phone can zoom in. */
.post article figure { margin: 26px 0 24px; }
.post article figure a { display: block; }
.post article figure img { display: block; width: 100%; max-width: 520px; height: auto; margin: 0 auto; border: 1px solid var(--line); border-radius: 20px; background: var(--card); }
.post article figcaption { max-width: 520px; margin: 10px auto 0; color: var(--ink2); font-size: 14px; line-height: 1.45; }
/* App pictures (cropped from the app's own screens) show at a phone's width, with the app's rounder corners. */
.post article figure.screen img { max-width: 340px; border-radius: 30px; background: var(--bg); }
.post article figure.screen figcaption { max-width: 340px; }
/* A YouTube video: a frame showing our own poster until the reader presses play (website/blog/build.mjs). */
.post article figure.video iframe { display: block; width: 100%; max-width: 560px; height: auto; aspect-ratio: 16 / 9; margin: 0 auto; border: 1px solid var(--line); border-radius: 20px; background: var(--pale); }
.post article figure.video figcaption { max-width: 560px; }
.post-app { margin-top: 44px; }
.post-app-title { font: 500 22px/1.2 var(--serif); letter-spacing: -0.01em; margin-bottom: 8px; }

/* ---------- Motion ---------- */
/* Off under reduced motion. Otherwise: the phone rises on load, the sky drifts very slowly, the
   statement's words arrive on scroll, the story cards recede as they overlap, the jar pours when seen. */

@media (prefers-reduced-motion: no-preference) {
  .hero-stage .phone { animation: rise 1s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .orb { animation: drift 30s ease-in-out infinite alternate; }
  .orb.b { animation-duration: 42s; animation-direction: alternate-reverse; }
  .s-bar i { animation: grow 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: 0.3s; }
  .jar.pour .liquid { animation: pour 1.2s cubic-bezier(0.3, 0.9, 0.3, 1) both; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.story-snapping { scroll-snap-type: none; }
  .statement .w, .phone .page { transition: none; }
  .story-card { position: relative; top: auto; height: auto; min-height: 0; transform: none; }
  .panel { position: relative; }
  .panel .ui { width: 100%; max-width: 380px; transform: none; }
}
@keyframes rise { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(4vw, 3vh, 0); } }
@keyframes grow { from { transform: scaleY(0.2); } to { transform: none; } }
@keyframes pour { from { transform: translateY(46px); } to { transform: none; } }

/* ---------- Responsive ---------- */

@media (max-height: 680px) {
  html.story-snapping { scroll-snap-type: none; }
  .story-card { position: relative; top: auto; height: auto; min-height: 0; transform: none; }
  .panel { position: relative; }
  .panel .ui { width: 100%; max-width: 380px; transform: none; }
}
/* A short window (a laptop with the dock in view): the copy sits lower so the headline clears the dock, and the phone follows. */
@media (max-height: 760px) and (min-width: 721px) {
  .hero h1 { font-size: clamp(32px, 3.6vw, 52px); }
  .hero-copy { top: 34%; }
  .hero-stage .phone { top: 60%; }
}
@media (max-width: 960px) {
  .hero-stage .phone { --s: 0.74; top: 52%; }
  .hero-copy { top: 30%; }
}
@media (max-width: 520px) {
  /* Keep Support, Blog and the download action in the dock (they fit down to 320px); How it works stays in the page. */
  .dock-nav a[href$="#how"] { display: none; }
}
@media (max-width: 720px) {
  :root { --gutter: 20px; }
  .hero { padding: 8px; }
  .hero-card { height: calc(100svh - 16px); min-height: 560px; border-radius: 32px; }
  .hero-copy { top: 29%; }
  .hero h1 { font-size: clamp(30px, 8.4vw, 40px); max-width: 14ch; }
  .hero-stage .phone { --s: 0.64; top: 48%; }
  .dome { width: 260%; bottom: -70%; }
  .strip { bottom: 14px; }
  .strip button { width: 46px; height: 38px; }
  .dock { top: calc(env(safe-area-inset-top, 0px) + 22px); }
  .dock { --dock-h: 50px; }
  .dock-mark { font-size: 15px; }
  .dock-nav a { padding: 0 13px; font-size: 14px; }
  html { --story-top: calc(env(safe-area-inset-top, 0px) + 92px); --story-peek: 96px; }
  .story { padding: 0 8px; }
  .story-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: 20px;
    padding: 24px 12px;
    border-radius: 32px;
  }
  .story-copy { padding: 0; margin: 0 auto; max-width: 340px; text-align: center; }
  .story-copy h2 { font-size: clamp(28px, 7.2vw, 34px); }
  .story-copy p { margin-top: 13px; font-size: 14px; line-height: 1.48; }
  .story-stage { border-radius: 26px; }
  .panel { padding: 18px 16px; }
  .story.story-flow .story-card, .no-js .story-card { grid-template-rows: auto auto; }
  .facts li { font-size: 14px; }
  footer.site { margin: 0 8px; }
}
@media (max-width: 400px) {
  :root { --gutter: 16px; }
  .hero-stage .phone { --s: 0.58; }
  .story-card { padding-left: 8px; padding-right: 8px; }
  .story-copy p { font-size: 13px; }
  .panel { padding: 14px 10px; }
  .ui-card { padding: 16px; }
}

/* Desktop keeps the original pinned story and ordinary page scrolling. */
.story-pin[hidden] { display: none; }
@media (min-width: 721px) {
  html { scroll-padding-top: 0; }
  html.story-snapping { scroll-snap-type: none; }
  .story.story-desktop {
    height: calc(var(--steps, 6) * 100vh);
    max-width: none;
    margin: 0;
    padding: 0;
  }
  .story-desktop > .story-card,
  .story-desktop > .story-snap,
  .story-desktop + .story-exit { display: none; }
  .story-desktop .story-pin {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 18px;
    padding: 104px 14px 22px;
  }
  .story-desktop .story-copy {
    position: relative;
    display: block;
    min-height: 132px;
    padding: 0;
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
    width: 100%;
  }
  .story-desktop .step {
    position: absolute;
    inset: 0;
    padding: 0 var(--gutter);
    opacity: 0;
    transform: translateY(8px);
    filter: blur(5px);
    transition: opacity 0.45s ease, transform 0.45s ease, filter 0.45s ease;
  }
  .story-desktop .step.on { opacity: 1; transform: none; filter: none; }
  .story-desktop .story-copy h2 { font: 500 clamp(28px, 3.4vw, 46px)/1.08 var(--serif); letter-spacing: -0.02em; }
  .story-desktop .story-copy p { margin: 10px auto 0; max-width: 36rem; color: var(--ink2); font-size: clamp(15px, 1.15vw, 18px); line-height: inherit; }
  .story-desktop .story-stage {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    border-radius: 40px;
  }
  .story-desktop .stage-shape.a { right: -16vmin; bottom: -26vmin; }
  .story-desktop .panel {
    position: absolute;
    align-items: flex-start;
    padding: 26px 28px 0;
    opacity: 0;
    transform: scale(0.985);
    transition: opacity 0.5s ease, transform 0.5s ease;
    pointer-events: none;
  }
  .story-desktop .panel.on { opacity: 1; transform: none; pointer-events: auto; }
  .story-desktop .panel .ui { flex: 0 1 auto; width: 100%; max-width: 380px; transform: scale(var(--k, 1)); transform-origin: top center; }
  .story-desktop .widget-panel { align-items: center; padding: 18px; }
  .story-desktop .panel .widget-showcase { max-width: 480px; transform: scale(var(--widget-ui-scale, 0.85)); transform-origin: center; }
  .story-desktop .pager { justify-self: center; display: flex; align-items: center; gap: 7px; padding: 9px 12px; }
  .story-desktop .pager button {
    width: 9px; height: 9px;
    padding: 0; border: 0; border-radius: 999px;
    background: var(--ink2); opacity: 0.4;
    cursor: pointer;
    transition: width 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
  }
  .story-desktop .pager button.on { width: 26px; background: var(--green); opacity: 1; }
  .story-desktop + .story-exit + .privacy { padding-top: clamp(96px, 15vh, 180px); }
}
@media (min-width: 721px) and (max-height: 820px) {
  .story-desktop .panel .ui { --k: 0.86; }
}
@media (min-width: 721px) and (max-height: 700px) {
  .story-desktop .panel .ui { --k: 0.74; }
  .story-desktop .story-pin { padding-top: 92px; }
}
@media (prefers-reduced-motion: reduce) {
  .story-desktop .step, .story-desktop .panel, .story-desktop .pager button { transition: none; }
}

/* ---------- Icons and small extras ---------- */

.ic { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ic.fill { fill: currentColor; stroke: none; }
.pos { display: grid; grid-template-columns: 78px 1fr auto; gap: 10px; align-items: center; font-size: 14px; }
.pos + .pos { margin-top: 10px; }
.pos i { display: block; height: 10px; border-radius: 5px; background: var(--lagoon); width: var(--w); transform-origin: left; }
.pos .v { font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-menu .chip svg { width: 14px; height: 14px; }