/* 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. 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. */

/* Titles and money are New York wherever the system has it (iPhones, iPads and Safari), and those
   never download this file. Everywhere else they're Literata, the closest free look-alike (SIL Open
   Font License, fonts/OFL.txt): weights 500 to 600, optical size fixed at 34, Latin letters only.
   size-adjust puts its caps and x-height where New York's sit, and the overrides give it New York's
   line spacing. While it loads, the visitor's own Palatino stands in (it has New York's lining
   figures; Georgia's are old-style), or Noto Serif on Android, each sized to Literata's width so
   lines don't rewrap when it arrives. */
@font-face {
  font-family: "Literata";
  src: url(/assets/763810a8dcc522e2abc3.woff2) format("woff2");
  font-weight: 500 600;
  font-display: swap;
  size-adjust: 97.46%;
  ascent-override: 97.69%;
  descent-override: 24.75%;
  line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Literata fallback";
  src: local("Palatino Linotype"), local("Palatino");
  size-adjust: 104.94%;
  ascent-override: 90.73%;
  descent-override: 22.99%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Literata fallback Android";
  src: local("Noto Serif"), local("NotoSerif-Regular");
  size-adjust: 97.75%;
  ascent-override: 97.41%;
  descent-override: 24.68%;
  line-gap-override: 0%;
}

: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", "Literata", "Literata fallback", "Literata fallback Android", "Iowan Old Style", "Palatino", "Palatino Linotype", "Book Antiqua", 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;
  text-decoration: none;
}
/* The app's own wordmark (tipd-wordmark.svg), not typed text; the link's label names it. Its widths
   are 8% over the 40px and 36px they were, so the wider mark (2026-10-24) keeps its height. */
.dock-mark img { display: block; width: 43.2px; height: auto; }
.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); }
/* Compare shows on computers; phones and an upright iPad keep the shorter menu. */
.dock-nav a.wide { display: none; }
@media (min-width: 900px) { .dock-nav a.wide { display: inline-flex; } }
.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;
  display: grid;
  grid-template-rows: auto minmax(240px, 1fr);
  gap: 24px;
  padding-top: calc(env(safe-area-inset-top, 0px) + max(110px, 12svh));
  min-height: min(1040px, max(620px, calc(100svh - 28px)));
  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: relative; z-index: 2;
  min-width: 0;
  /* Keep the headline below the fixed dock, and let translated copy set the phone’s start. */
  text-align: center;
  padding: 0 var(--gutter);
}
.hero h1 {
  margin: 0 auto;
  /* Safari's 18ch in New York, within half a pixel at every size, set in em and px rather than ch:
     a ch is the font's zero, and Literata's is narrower, so the line would wrap sooner elsewhere. */
  max-width: calc(11.015em + 9.5px);
  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; flex-wrap: wrap; 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: relative; z-index: 1; pointer-events: none; }
.hero-stage .phone {
  --s: 0.86;
  position: absolute;
  left: calc(50% - 195px * var(--s));
  top: 0;
}
.phone .page {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%; object-fit: contain;
  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: calc(14.742em + 10.5px);   /* Safari's 24ch in New York, as in .hero h1 */
  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 + .trust { 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: 500 3.2cqw/1.2 var(--serif); letter-spacing: -0.02em; white-space: nowrap; }
.widget-month-heading > span { display: flex; align-items: center; gap: 1.5cqw; }
.widget-month-heading svg { width: 4cqw; height: 4cqw; stroke-width: 2.6; color: var(--green); }
.widget-month-heading .faint { color: var(--muted); }
.widget-month-heading b { font-size: 4.2cqw; font-weight: 600; }
.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; font-weight: 600; }
.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.1cqw; font-weight: 700; }
.widget-day small { font-size: 2.1cqw; font-weight: 500; color: var(--calendar-detail); }
.widget-day.outside { color: var(--ink2); font-weight: 400; }
/* Each worked day is a tinted tile with a thin border in its job's color, as in the app's widgets. */
.widget-showcase .sea { background: var(--lagoon-calendar-tint); box-shadow: inset 0 0 0 1px #73D2CC; }
.widget-showcase .apricot { background: var(--honey-calendar-tint); box-shadow: inset 0 0 0 1px #DDBD7B; }
.widget-week-value:not(.sea):not(.apricot) { background: var(--divider); color: var(--ink2); }
.widget-week-day:has(.today) > span { color: var(--green); font-weight: 600; }
.widget-showcase .today { outline: 1.5px solid var(--green); outline-offset: -1.5px; }
.widget-footnote { font-size: 2.35cqw; font-weight: 500; color: var(--ink2); margin-top: 2cqw; }
.widget-heading { font: 500 3.6cqw/1.15 var(--serif); letter-spacing: -0.02em; }
/* The app keeps "Registrar un turno" on one line by shrinking it (to 80% at most); 3.2cqw fits the widget. */
:lang(es) .widget-log .widget-heading { white-space: nowrap; font-size: 3.2cqw; }
.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: 600 4.6cqw/1.1 var(--serif); letter-spacing: -0.02em; }
.widget-goal-body span { font-size: 2.1cqw; color: var(--ink2); }
/* The widget jar (1.3): a thicker rim, and the percent large on a solid pill. */
.widget-goal-body .widget-jar .glass { stroke-width: 5; }
.widget-goal-body .widget-jar .pct { font-size: 23px; }
.widget-goal-body .widget-jar .pct-bg { fill: var(--jar-inside); stroke: none; }
.widget-log { display: flex; flex-direction: column; gap: 1.2cqw; }
.widget-shortcut { flex: 1; display: flex; align-items: center; justify-content: center; gap: 1cqw; padding: 2.5cqw 1cqw; border-radius: 2cqw; font-size: 2.5cqw; font-weight: 500; }
.widget-shortcut svg { width: 3.2cqw; height: 3.2cqw; flex: none; stroke-width: 2.4; }
/* In full color the Log a shift buttons have no outline, and the plus is in the job's text color. */
.widget-showcase .widget-shortcut.sea, .widget-showcase .widget-shortcut.apricot { box-shadow: none; }
.widget-shortcut.sea svg { color: #00736E; }
.widget-shortcut.apricot svg { color: #84600D; }
:root[data-theme="dark"] .widget-shortcut.sea svg { color: #4CC4BE; }
:root[data-theme="dark"] .widget-shortcut.apricot svg { color: #CFAE68; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .widget-shortcut.sea svg { color: #4CC4BE; }
  :root:not([data-theme="light"]) .widget-shortcut.apricot svg { color: #CFAE68; }
}
.widget-week { grid-column: 1 / -1; padding: 3cqw 4cqw; }
.widget-week-heading { display: flex; justify-content: space-between; align-items: center; }
.widget-week-heading .widget-heading { font-size: 5cqw; }
.widget-week-heading span { font-size: 2.7cqw; font-weight: 500; color: var(--ink2); }
.widget-week-heading > b { font: 600 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.9cqw; }
.widget-week-day > span { color: var(--ink2); font-weight: 500; }
.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; font-weight: 500; }
.widget-week-value b { font-size: 3.6cqw; font-weight: 600; }
.widget-week-footer { display: flex; justify-content: space-between; margin-top: 2cqw; font-size: 2.9cqw; font-weight: 500; color: var(--ink2); }
.story.story-flow .panel .widget-showcase,
.no-js .panel .widget-showcase { max-width: 480px; }

/* ---------- After the cards: reviews and privacy side by side, questions, the close ---------- */

.trust {
  display: flex; flex-wrap: wrap; gap: 24px;
  max-width: 1088px; margin: 0 auto;
  padding: clamp(96px, 15vh, 180px) var(--gutter) clamp(64px, 9vh, 104px);
  scroll-margin-top: var(--story-top);
}
.trust-card {
  flex: 1 1 420px; min-width: 0;
  display: flex; flex-direction: column; gap: 18px;
  padding: clamp(28px, 3.4vw, 40px);
  border-radius: 28px;
}
.trust-reviews { background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-soft); }
.trust-privacy { background: var(--pale); border: 1px solid var(--pale-border); }
.trust-privacy h2 { font: 500 clamp(30px, 3.4vw, 40px)/1.08 var(--serif); letter-spacing: -0.02em; }
.trust-privacy p { color: var(--ink2); font-size: 17px; }
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: 16px; font-weight: 500; }
.checks li { display: flex; align-items: center; gap: 10px; }
.checks svg { color: var(--green); flex: none; }
.trust-privacy .more { margin-top: auto; padding-top: 4px; font-size: 15px; font-weight: 500; }
.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; }
/* The home page's calculators and comparisons, just above the questions. */
.extras { max-width: 1088px; margin: 0 auto; padding: 0 var(--gutter) clamp(44px, 6vh, 64px); }
.extras-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
.extras-head h2 { font: 500 clamp(30px, 3.6vw, 40px)/1.1 var(--serif); letter-spacing: -0.02em; }
.extras-head a { font-size: 15px; font-weight: 500; }
.extras-list { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 721px) { .extras-list { grid-template-columns: repeat(3, 1fr); } }
.extras-list a { display: grid; align-content: start; gap: 4px; height: 100%; padding: 18px 20px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); color: var(--ink); text-decoration: none; transition: border-color 0.15s ease; }
.extras-list a:hover { border-color: var(--green); }
.extras-list strong { font: 500 21px/1.2 var(--serif); letter-spacing: -0.01em; }
.extras-list span { color: var(--ink2); font-size: 15px; line-height: 1.4; }
@media (prefers-reduced-motion: reduce) { .extras-list a { transition: none; } }
.questions { max-width: 1088px; margin: 0 auto; padding: 0 var(--gutter) clamp(64px, 9vh, 104px); }
.questions-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
.questions-head h2 { font: 500 clamp(30px, 3.6vw, 40px)/1.1 var(--serif); letter-spacing: -0.02em; }
.questions-head a { font-size: 15px; font-weight: 500; }
.questions .qa { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); column-gap: 40px; align-items: start; max-width: none; margin-top: 24px; }

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

.phone {
  --s: 1;
  position: relative;
  z-index: 1;
  width: calc(390px * var(--s));
  height: calc(795.92px * var(--s));
  flex: none;
  filter: drop-shadow(0 20px 28px rgba(25, 34, 26, 0.24));
}
/* Exact app captures composited inside Apple's licensed iPhone artwork. */

/* 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; }
/* Stats' all-time hourly card (1.3): mint with a thin pale-green line, its labels in the dark green. */
.ui-mint { background: var(--mint); border-color: var(--pale-border); }
.ui-mint .ui-title, .ui-mint .ui-head .ic, .ui-mint .ui-stat b, .ui-mint .ui-stat span, .ui-mint .ui-money small { color: var(--green-dark); }
.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: 28px; width: 28px; padding: 0; justify-content: center; font-size: 15px; }
/* The Trends day chips share the row evenly with a plain outline; the picked one ("All", "Todos") keeps its word whole,
   and the one-letter days give way on the narrowest phones rather than push the last day out of the card. */
.chips.days { flex-wrap: nowrap; gap: 6px; }
.chips.days .chip { flex: 1 1 0; min-width: 0; width: auto; padding: 0 6px; box-shadow: none; }
.chips.days .chip.on { min-width: max-content; }
/* The Trends job and position pickers use body-size text, as the app's glass chips do. */
.tr-pick .chip { height: 35px; padding: 0 14px; font-size: 17px; }
.chip i { width: 9px; height: 9px; border-radius: 50%; background: var(--dot, var(--green)); }
/* A picked chip is tinted like the app's (1.3): its job's color, or the app's green, mixed into the page, with
   dark text and a dark dot. The day chips keep a solid green for the picked day, as the app does. */
.chip.on { background: color-mix(in srgb, var(--dot, var(--green)) 42%, var(--bg)); border-color: transparent; color: var(--ink); font-weight: 600; }
.chip.on i { background: var(--ink); }
.chips.days .chip.on { background: var(--accent); color: #fff; }
/* The Trends pickers (Any shift, 6 months) read in green, as in the app. */
.ui .chip:has(> svg:first-child) { color: var(--green); }
.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(--card); border: 1px solid var(--line); box-shadow: var(--shadow-soft); color: var(--green); font-style: normal; font-size: 22px; font-weight: 600; }
.ui-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 52px; border-radius: 999px;
  background: color-mix(in srgb, var(--green) 42%, var(--bg)); color: var(--ink);
  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; }
/* Log a shift's result (1.3): the shift's total on mint, its hourly with tips on the right. */
.ui-result { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin: 14px 0; padding: 18px 20px; border-radius: 20px; background: var(--mint); box-shadow: var(--shadow-soft); }
.ui-result b { display: block; font-size: 13px; font-weight: 600; color: var(--green-dark); }
.ui-result .v { font: 500 40px/1.05 var(--serif); letter-spacing: -0.03em; margin-top: 2px; }
.ui-result .r { text-align: right; padding-bottom: 4px; }
.ui-result .r div { font-size: 20px; font-weight: 600; }
.ui-result .r span { display: block; font-size: 12px; color: var(--green-dark); margin-top: 2px; }
/* Month's Widgets pill: a light wash of the green with the dark green label. */
.ui .ui-card .chip.widgets-pill { height: 44px; padding: 0 14px; flex: none; font-weight: 600; color: var(--green-dark); background: color-mix(in srgb, var(--green) 20%, var(--card)); border-color: transparent; }
.chip.widgets-pill svg { width: 17px; height: 17px; stroke-width: 2; }
/* Month's total, 48 as in the app; on the narrowest phones' stacked cards it gives way, as the app's shrinks to fit,
   so the Widgets pill stays inside the card. */
.ui-money.month-total { font-size: 48px; }
@media (max-width: 359px) {
  .story-flow .ui-money.month-total, .no-js .ui-money.month-total { font-size: 38px; }
}
/* Month's By job card shows in the stacked layouts. In the phone story's fixed card it would shrink the calendar's
   figures past reading, and on the desktop stage it would push the calendar's last week under the edge. */
.story-desktop .by-job { display: none; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.no-js) .story:not(.story-flow) .story-card .by-job { display: none; }
}
/* A section heading outside the cards (the Year screen's Paychecks and Export), with the app's glass Add capsule. */
.ui-section { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 22px 4px 10px; font-size: 20px; font-weight: 600; }
.ui .ui-section .chip.ui-add { height: 35px; padding: 0 14px; gap: 5px; font-size: 17px; font-weight: 500; }
.chip.ui-add svg { width: 17px; height: 17px; stroke-width: 2; }

.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: 11px; color: var(--ink2); }
.tr-bar b { font-size: 11px; font-weight: 600; color: var(--ink); }
/* As in the app's chart: bars 62% of the day's width with an even 5px corner, and nothing on a day with no shifts. */
.tr-bar i { display: block; width: 62%; border-radius: 5px; background: var(--lagoon); height: calc(var(--h) * 1px); transform-origin: bottom; }
.tr-bar.none i { height: 0; background: none; }
.ui-note {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--pale);
  color: var(--green-dark);
  font-size: 15px;
  margin-top: 14px;
}
.ui-note svg { flex: none; margin-top: 2px; color: var(--green-dark); }

/* 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: 10px;
  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: 11.5px; font-weight: 700; }
.cal .d span { font-size: 11px; font-weight: 500; 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(--ink2); font-weight: 400; }
.cal .d.today { box-shadow: inset 0 0 0 2px var(--green); }
/* A bar of shares (Month's By job, Year's tips and hourly pay): capsules 3px apart. */
.ui-split { display: flex; gap: 3px; height: 10px; margin-top: 14px; }
.ui-split i { min-width: 4px; border-radius: 5px; }
/* Month's By job rows (1.3): the job's dot, its name over shifts, hours and hourly, and the amount. */
.job-rows { margin-top: 4px; }
.job-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.job-row + .job-row { border-top: 1px solid var(--divider); }
.job-row > i { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.job-row > div { flex: 1; min-width: 0; }
.job-row > div b { display: block; font-size: 15px; font-weight: 600; }
.job-row > div span { display: block; font-size: 13px; color: var(--ink2); margin-top: 2px; }
.job-row > .v { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
/* Year's legend figures under the bar. */
.ui-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.ui-legend span { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink2); }
.ui-legend span i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.ui-legend b { display: block; font-size: 17px; font-weight: 600; margin-top: 1px; font-variant-numeric: tabular-nums; }

/* Goals: the jar and its card. */
.target-card { padding: 18px; }
.target-rings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; text-align: center; }
.target { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.target-ring { display: block; width: 80px; max-width: 100%; height: auto; margin-bottom: 3px; overflow: visible; }
.target-ring circle { fill: none; stroke-width: 9; }
.target-track { stroke: var(--pale); }
.target-fill { stroke: var(--green); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 44px 44px; }
.target-ring text { fill: var(--ink); font: 500 21px var(--serif); }
.target-check { fill: none; stroke: var(--green); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.target b { font-size: 15px; font-weight: 600; }
.target-made { font-size: 17px; font-weight: 500; font-variant-numeric: tabular-nums; }
.target-amount { font-size: 13px; color: var(--ink2); white-space: nowrap; }
/* As in the app, the … button sits over the goal's top right corner and only the name keeps clear of it, so the
   amount and "to go" lines can run the card's full width. */
.goal { position: relative; display: flex; gap: 18px; align-items: center; }
.goal .ui-dots { position: absolute; top: 0; right: 0; }
.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; padding-right: 44px; }
.goal-amt { font: 500 30px/1.1 var(--serif); letter-spacing: -0.02em; margin-top: 2px; }
.goal-amt small { font: 400 15px/1.2 var(--sans); color: var(--ink2); letter-spacing: 0; }
.goal-sub { font-size: 13px; color: var(--ink2); margin-top: 4px; }
.goal-sub b { color: var(--green-dark); 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 28px/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); }
/* The Year screen's paycheck row (1.3): a stripe in the job's color, the job over the date, and the net pay. */
.paycheck .stripe { width: 4px; height: 40px; flex: none; border-radius: 2px; background: var(--c, var(--muted)); }
.paycheck.row { gap: 14px; }
.paycheck.row .pn { min-width: 0; }
.paycheck.row .pn span { display: flex; align-items: center; gap: 5px; margin-top: 2px; }
.paycheck.row .pn span svg { width: 14px; height: 14px; flex: none; }
.paycheck.row .net { text-align: right; }
.paycheck.row .net b { display: block; font-size: 17px; font-weight: 600; }
.paycheck.row .net span { display: block; font-size: 12px; color: var(--ink2); margin-top: 2px; }
/* No tax on tips' heading: the info icon in a small mint square. */
.ui-badge-head { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; }
.ui-badge-head > span:first-child { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--pale); color: var(--green); }
/* Year's two export tiles, under their Export heading, with the site's 24px card corners. */
.export-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ui .export-tiles .ui-card { margin: 0; padding: 16px; }
.export-tiles svg { display: block; width: 22px; height: 22px; color: var(--green); }
.export-tiles b { display: block; margin-top: 6px; font-size: 15px; font-weight: 600; }
.export-tiles span { display: block; margin-top: 6px; font-size: 12px; 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); }

/* App Store reviews, in the first card after the story: the App Store rating and attributed excerpts. */
.reviews-rating { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font: 600 15px/1.3 var(--sans); color: var(--green); }
.review-stars { display: block; fill: var(--green); }
.review-list { display: grid; gap: 24px; }
.review-list figure { margin: 0; }
.review-list blockquote { margin: 0; font: 500 clamp(22px, 2.4vw, 27px)/1.3 var(--serif); text-wrap: pretty; }
.review-list figcaption { margin-top: 14px; font-size: 15px; color: var(--ink2); }
/* The review carousel (site.js): one review at a time; the arrows sit under it, at the right.
   Without the script the list stays as it was. */
.review-nav[hidden] { display: none; }
.review-carousel { flex-grow: 1; }
.review-carousel.ready { display: grid; grid-template-columns: minmax(0, 1fr) 48px 48px; grid-template-rows: auto; column-gap: 8px; }
.review-carousel.ready .review-list {
  grid-column: 1 / -1;
  display: flex; gap: 0; align-items: flex-start;
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none;
  /* site.js sets the height to the review showing, so a short review leaves no gap under it. */
  transition: height 0.3s ease;
}
@media (prefers-reduced-motion: reduce) {
  .review-carousel.ready .review-list { transition: none; }
}
.review-carousel.ready .review-list::-webkit-scrollbar { display: none; }
.review-carousel.ready .review-list figure { flex: 0 0 100%; scroll-snap-align: start; }
.review-carousel.ready .review-prev { grid-column: 2; }
.review-carousel.ready .review-next { grid-column: 3; }
.review-nav {
  width: 48px; height: 48px; padding: 0; margin-top: 12px;
  display: flex; align-items: center; justify-content: center;
  color: var(--green); cursor: pointer;
}
.review-nav:disabled { opacity: 0.35; cursor: default; }
/* The footer line shares the arrows' row once the carousel is running. */
.trust-foot { margin-top: 16px; font-size: 14px; color: var(--ink2); }
.review-carousel.ready .trust-foot { grid-column: 1; grid-row: 2; align-self: center; margin-top: 12px; }
.review-carousel.ready .review-prev, .review-carousel.ready .review-next { grid-row: 2; }
.reviews-link { font-weight: 500; text-underline-offset: 0.2em; }

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

.close { padding: 0 var(--gutter) clamp(56px, 8vh, 96px); }
.close-band {
  max-width: 1040px; margin: 0 auto; box-sizing: border-box;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px;
  padding: clamp(32px, 4vw, 48px);
  border-radius: 28px;
  background: var(--button); color: #FFFFFF;
}
.close-copy { flex: 1 1 360px; min-width: 0; }
/* The app's own wordmark, in white for the band (public/tipd-wordmark-on-green.svg), not typed text. */
.close .mark img { display: block; width: clamp(129.6px, 14.04vw, 172.8px); height: auto; }
.close-copy p { margin-top: 14px; max-width: 30rem; font-size: 17px; color: #E7F5EC; }
.close-actions { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.app-store-link { display: inline-flex; padding: 10px; }
.app-store-link img { display: block; width: auto; height: 40px; }
.close .fine { font-size: 14px; color: #E7F5EC; }
@media (max-width: 720px) {
  /* On a phone the badge and its line sit under the words, lined up with them. */
  .close-actions { align-items: flex-start; }
  .close .app-store-link { margin-left: -10px; }
}

/* ---------- 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; }
/* The links every footer carries: comparisons, calculators and guides (blog/build.mjs writes them). */
footer.site nav.footer-links { flex: 0 0 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 32px; width: 100%; max-width: 760px; margin: 0 auto 8px; padding: 2px 0 14px; }
.footer-links p { margin: 0 0 4px; font-weight: 600; color: var(--ink); }
.footer-links ul { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin: 0; }
footer.site .footer-links a { display: block; padding: 5px 0; }
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; }
/* Links on the mint box use the darker green, which keeps text contrast above 4.5:1 there. */
.summary a { color: var(--green-dark); }
.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) ---------- */

/* The index: a section a topic, each a grid of square tiles (one column on phones). */
.doc.blog { max-width: 1128px; }
.blog .topic { margin-top: 36px; }
.blog .topic h2 { margin: 0 0 14px; font: 500 26px/1.2 var(--serif); letter-spacing: -0.01em; }
.post-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.doc .post-grid li { margin: 0; }
.tile { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 12px 12px 18px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-soft); }
@media (min-width: 560px) { .tile { aspect-ratio: 1; } }
.tile.lagoon { --tile-tint: var(--lagoon-tint); --tile-tone: var(--lagoon); }
.tile.sage { --tile-tint: var(--sage-tint); --tile-tone: var(--sage); }
.tile.honey { --tile-tint: var(--honey-tint); --tile-tone: var(--honey); }
.tile.mauve { --tile-tint: var(--mauve-tint); --tile-tone: var(--mauve); }
.tile-art { display: grid; place-items: center; height: 88px; margin-bottom: 4px; border-radius: 14px; background: var(--tile-tint); color: var(--tile-tone); }
.tile-art .ic { stroke-width: 1.5; }
.tile h2, .tile h3 { margin: 0 6px; font: 500 20px/1.25 var(--serif); letter-spacing: -0.01em; }
.tile h2 a, .tile h3 a { color: var(--ink); text-decoration: none; }
.tile h2 a:hover, .tile h3 a:hover { color: var(--green); }
/* The whole tile is the link's target area; the title stays the one link for screen readers. */
.tile h2 a::after, .tile h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-card); }
.tile h2 a:focus-visible, .tile h3 a:focus-visible { outline: none; }
.tile h2 a:focus-visible::after, .tile h3 a:focus-visible::after { outline: 2px solid var(--green); outline-offset: 2px; }
.doc .tile p { margin: 0 6px; color: var(--ink2); font-size: 15px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.doc .tile .post-date { display: block; margin-top: auto; font-size: 13px; }
.post-date { color: var(--ink2); font-size: 14px; }
.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; }
/* A row's own label (th scope="row") sits on the page like the cells beside it. */
.post article tbody th { background: none; vertical-align: top; }
.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; }
}
/* The narrowest phones: a little smaller again, so the widest table's last column isn't cut off. */
@media (max-width: 400px) {
  .post article table { font-size: 12.5px; }
  .post article th, .post article td { padding: 8px 4px; }
}
/* A table too wide for a phone keeps its first column in view while the rest scrolls. */
.post article table.wide { font-size: 14px; }
.post article table.wide th, .post article table.wide td { min-width: 104px; }
.post article table.wide th:first-child { position: sticky; left: 0; z-index: 1; min-width: 118px; padding-left: 8px; }
.post article table.wide tbody th { background: var(--bg); vertical-align: top; }
/* On a wide screen it steps out of the reading column so every app shows at once. */
@media (min-width: 1000px) {
  .post article table.wide { display: table; position: relative; left: 50%; width: 960px; max-width: none; transform: translateX(-50%); }
  /* Narrower app columns, so nine apps still fit in 960px and the page never scrolls sideways. */
  .post article table.wide td, .post article table.wide thead th + th { min-width: 88px; }
}
/* The quick box's one line about Tip’d, under the quick answer (the "tipd" field in a guide's header). */
.summary.quick .quick-tipd { margin: 10px 0 0; font-size: 15px; line-height: 1.45; color: var(--ink2); }
/* Site pages (About and the feature pages, from website/pages/): the App Store badge after the text,
   then, on a feature page, the other features as chips. */
.page-get { margin: 40px 0 0; text-align: center; }
.page-get .fine { margin: 10px 0 0; font-size: 14px; color: var(--ink2); }
.page-more { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }
.page-more p { margin: 0 0 10px; font-size: 14px; color: var(--ink2); }
.page-more ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.page-more li { margin: 0; }
.page-more a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font-size: 15px; font-weight: 500; text-decoration: none; }
.page-more a:hover { border-color: var(--green); }
/* A screen rebuilt in HTML and CSS with the home page's .ui cards, shown at a phone's width like an app picture. */
.post article figure.ui-figure .ui { margin: 0 auto; max-width: 340px; }
.post article figure.ui-figure figcaption { max-width: 340px; }
/* Charts and maps are SVG files drawn by website/blog/figures/. Each links to its file: zoom.js opens it in the viewer below, and without the script the link opens the file itself. */
.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 photo (one Joe took or chose): a little narrower than a chart, rounded, with no frame. */
.post article figure.photo img { max-width: 420px; border: 0; border-radius: 24px; }
.post article figure.photo figcaption { max-width: 420px; }
/* 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; }
/* A public social post quoted as text, since the security policy blocks embedded posts: the words in a card,
   then who posted them, where and when, with a link to the original. */
.post article figure.social { max-width: 520px; margin: 22px auto 22px; padding: 16px 18px 14px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); }
.post article figure.social blockquote { margin: 0; padding: 0; border: 0; color: var(--ink); font: 500 19px/1.4 var(--serif); }
.post article figure.social blockquote p { margin: 0 0 6px; }
.post article figure.social blockquote p:last-child { margin-bottom: 0; }
.post article figure.social figcaption { max-width: none; margin: 10px 0 0; }
.post article figure.social figcaption strong { color: var(--ink); font-weight: 600; }
.post article figure.social figcaption a { width: fit-content; }
/* The picture viewer (zoom.js): a tapped picture over a dark backdrop, as large as the screen allows, with
   a glass X in the corner. Tapping beside it, Escape and the back gesture also close it. */
html.zoom-open { overflow: hidden; scrollbar-gutter: stable; }
.zoom {
  position: fixed; inset: 0;
  width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; border: 0; box-sizing: border-box;
  padding: calc(env(safe-area-inset-top, 0px) + 76px) 16px calc(env(safe-area-inset-bottom, 0px) + 24px);
  background: transparent; overscroll-behavior: contain;
}
.zoom[open] { display: flex; align-items: center; justify-content: center; }
.zoom::backdrop { background: rgba(14, 19, 15, 0.92); }
.zoom-picture {
  display: block; height: auto; border-radius: 16px; background: #FFFFFF;
  width: min(100%, 1080px, calc((100vh - 124px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) * var(--ratio, 1)));
}
@supports (height: 100dvh) {
  .zoom-picture { width: min(100%, 1080px, calc((100dvh - 124px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) * var(--ratio, 1))); }
}
.zoom-close {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 16px); right: calc(env(safe-area-inset-right, 0px) + 16px);
  width: 48px; height: 48px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.zoom-close svg { width: 18px; height: 18px; }
@media (prefers-reduced-motion: no-preference) {
  .zoom[open], .zoom[open]::backdrop { animation: zoom-fade 0.18s ease-out; }
}
@keyframes zoom-fade { from { opacity: 0; } }
/* A calculator (website/pages/, public/calculators.js). Its results sit on the mint of the quick box. */
.calc { display: grid; gap: 18px; padding: 20px; }
.calc fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.calc legend { padding: 0; margin-bottom: 8px; font-size: 14px; font-weight: 600; }
.calc [hidden] { display: none; }
.calc-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.calc-choices label { position: relative; }
.calc-choices input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.calc-choices span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font-size: 15px; font-weight: 500; }
.calc-choices input:checked + span { background: var(--mint); background: color-mix(in srgb, var(--green) 42%, var(--bg)); border-color: transparent; font-weight: 600; }
.calc-choices input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 2px; }
.calc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.calc-grid .form-field + .form-field { margin-top: 0; }
@media (min-width: 560px) { .calc-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.calc-input { position: relative; display: block; }
.calc-input::before, .calc-input::after { position: absolute; top: 50%; transform: translateY(-50%); color: var(--ink2); pointer-events: none; }
.calc-input[data-pre]::before { content: attr(data-pre); left: 14px; }
.calc-input[data-post]::after { content: attr(data-post); right: 14px; }
.calc-input[data-pre] input { padding-left: 28px; }
.calc-input[data-post] input { padding-right: 30px; }
.calc input[aria-invalid="true"] { border-color: var(--error); }
.doc .calc-error { margin: 0; color: var(--error); font-size: 14px; }
.calc-results { padding: 18px 20px; border-radius: 20px; background: var(--mint); }
.doc .calc-keep { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 10px; font-weight: 600; }
.calc-keep strong { font: 500 34px/1.1 var(--serif); letter-spacing: -0.01em; color: var(--green-dark); font-variant-numeric: tabular-nums; }
.calc-results dl { margin: 0; }
.calc-results dl div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--pale-border); }
.calc-results dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; }
.calc-results .calc-total { font-weight: 600; }
.calc-results .calc-total dd { font-weight: 600; }
.post-app { margin-top: 44px; }
/* The guides beside this one, after the app card. */
.post-more { margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--line); }
.doc .post-more p { margin: 0 0 6px; font-size: 14px; color: var(--ink2); }
.doc .post-more ul { list-style: none; margin: 0; padding: 0; }
.doc .post-more li { margin: 0; }
.post-more a { display: block; padding: 6px 0; }
.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; }
}
/* Keep the full headline and phone visible together in a short desktop window. */
@media (max-height: 760px) and (min-width: 721px) {
  .hero h1 { font-size: clamp(32px, 3.6vw, 52px); }
}
@media (max-width: 960px) {
  .hero-stage .phone { --s: 0.74; }
}
@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 { min-height: min(1040px, max(620px, calc(100svh - 16px))); padding-top: calc(env(safe-area-inset-top, 0px) + max(80px, 12svh)); border-radius: 32px; }
  .hero h1 { font-size: clamp(30px, 8.4vw, 40px); max-width: calc(8.596em + 6.2px); }   /* Safari's 14ch */
  .hero-stage .phone { --s: 0.64; }
  .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 img { width: 38.9px; }
  .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; }
  footer.site nav.footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-links div:last-child { grid-column: 1 / -1; }
  .footer-links div:last-child ul { columns: 2; column-gap: 32px; }
}
@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; }
  /* Guides and other text pages: a jump link or a focused link stops below the floating dock
     (which ends 92px down), not under it. The home page's pinned story keeps 0. */
  html:has(main.doc) { scroll-padding-top: 108px; }
  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;
    /* The dock ends 92px down, so the copy box sits 18px under it, as the stage sits 18px under the box. */
    padding: 110px 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;
    display: flex;
    flex-direction: column;
    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; }
  /* Each step centres in the box, so its words sit evenly between the dock and the stage. Auto margins
     rather than justify-content, so a step taller than the box still starts at its top. */
  .story-desktop .step > :first-child { margin-top: auto; }
  .story-desktop .step > :last-child { margin-bottom: auto; }
  .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 .panel .goals-showcase,
  .story-desktop .panel .stage-fit { transform: scale(var(--goals-ui-scale, 1)); }
  .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: 0; padding: 0 6px; }
  .story-desktop .pager button {
    display: grid; place-items: center;
    width: 44px; height: 44px;
    padding: 0; border: 0; border-radius: 999px;
    background: transparent;
    cursor: pointer;
  }
  .story-desktop .pager button::before {
    content: "";
    width: 9px; height: 9px; border-radius: 999px;
    background: var(--ink2); opacity: 0.4;
    transition: width 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
  }
  .story-desktop .pager button.on::before { width: 26px; background: var(--green); opacity: 1; }
  /* Keep the focus ring on the full target, with a stronger dot while focused. */
  .story-desktop .pager button:focus-visible::before { opacity: 1; }
  .story-desktop + .story-exit + .trust { 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: 102px; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .story-desktop .step, .story-desktop .panel, .story-desktop .pager button::before { 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; }
/* Hourly by position (1.3): the position and its job over a full-width bar on a light track. */
.pos-list { margin-top: 14px; }
.pos { font-size: 15px; }
.pos + .pos { margin-top: 14px; }
.pos .l { display: flex; align-items: baseline; gap: 4px; margin-bottom: 7px; white-space: nowrap; }
.pos .l b { font-weight: 600; }
.pos .l span { font-size: 13px; color: var(--ink2); }
.pos .l .v { margin-left: auto; padding-left: 8px; font-size: 15px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.pos i { position: relative; display: block; height: 8px; border-radius: 4px; background: var(--divider); }
.pos i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 4px; background: var(--c, var(--lagoon)); }
.ui-menu .chip svg { width: 14px; height: 14px; }