/* ─────────────────────────────────────────────────────────────
   Matters — design system
   Light-default, calm blue accent. Linear-inspired tokens.
   Inspired by the Solid homepage architecture, retuned for a
   personal-productivity app: calm surfaces, softer chisel,
   blue brand. One stylesheet, no build step.
   ───────────────────────────────────────────────────────────── */

:root {
  /* Canvas & elevation — near-black with subtle warmth */
  --color-bg-level-0: #0B0B0D;
  --color-bg-level-1: #121214;
  --color-bg-level-2: #17171A;
  --color-bg-level-3: #1C1C20;
  --color-bg-secondary: #1E1E22;
  --color-bg-tertiary: #25252A;
  --color-bg-translucent: rgba(255, 255, 255, 0.05);

  /* Text — Linear-style four-tier ramp */
  --color-text-primary: #F7F8F8;
  --color-text-secondary: #D5D8DD;
  --color-text-tertiary: #8E9098;
  --color-text-quaternary: #5F6168;

  /* Borders */
  --color-border-primary: #25272C;
  --color-border-secondary: #34363C;
  --color-border-tertiary: #3F4148;
  --color-border-translucent: rgba(255, 255, 255, 0.05);
  --color-border-translucent-strong: rgba(255, 255, 255, 0.09);

  /* Brand / accent — calm blue.
     A focused, modern blue; same hue family as the app's own accent. */
  --color-brand: #4A93E8;
  --color-accent: #4A93E8;
  --color-accent-hover: #6AACF0;
  --color-accent-dim: #295680;
  --color-accent-tint: #0B1825;
  /* Ink that sits ON the accent fill (buttons, CTA): near-black on the
     bright dark-theme blue; white in light theme (see override below). */
  --color-on-accent: #07111E;

  /* Links */
  --color-link: #6AACF0;
  --color-link-hover: #F7F8F8;

  /* Buttons */
  --color-button-invert-bg: #E5E5E6;
  --color-button-invert-bg-hover: #FFFFFF;

  /* Status (used in feature illustrations) */
  --color-red: #EB5757;
  --color-orange: #FC7840;
  --color-green: #4FBE7A;
  --color-purple: #A78BFA;
  --color-blue: #60A5FA;

  /* Lines */
  --color-line-primary: #37393A;
  --color-line-secondary: #202122;
  --color-line-tertiary: #18191A;

  /* Radii */
  --radius-2: 2px;
  --radius-4: 4px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-24: 24px;
  --radius-rounded: 9999px;

  /* Spacing (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;
  --space-10: 64px;
  --space-12: 96px;
  --space-16: 128px;

  /* Motion */
  --ease-primary: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-long: cubic-bezier(0.16, 1, 0.3, 1);
  --speed-fast: 0.10s;
  --speed-base: 0.25s;
  --speed-slow: 0.45s;

  /* Fonts */
  --font-body: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Layout */
  --container: min(1100px, calc(100vw - 3rem));

  /* Signature shadows */
  --shadow-chisel:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.05),
    0 0 0 1px rgba(0, 0, 0, 0.55),
    0 4px 4px 0 rgba(0, 0, 0, 0.10);

  --shadow-primary-chip:
    0 5px 2px 0 rgba(0, 0, 0, 0.01),
    0 3px 2px 0 rgba(0, 0, 0, 0.04),
    0 1px 1px 0 rgba(0, 0, 0, 0.07),
    0 0 1px 0 rgba(0, 0, 0, 0.08);

  --shadow-card-inset:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 1px 2px rgba(0, 0, 0, 0.3);

  --shadow-large:
    0 16px 32px -12px rgba(0, 0, 0, 0.55),
    0 4px 12px -2px rgba(0, 0, 0, 0.30);

  /* Surface overlays */
  --color-surface-highlight: rgba(255, 255, 255, 0.03);
  --color-surface-highlight-strong: rgba(255, 255, 255, 0.06);
  --color-surface-noise-opacity: 0.14;

  /* Header */
  --color-header-bg: rgba(11, 11, 13, 0.7);

  /* Hero ambience */
  --color-hero-glow-top: rgba(74, 147, 232, 0.12);
  --color-hero-glow-bottom: rgba(0, 0, 0, 0.30);
  --color-grid-major: rgba(255, 255, 255, 0.035);
  --color-grid-minor: rgba(255, 255, 255, 0.012);

  /* Accent overlays */
  --color-accent-overlay-weak: rgba(74, 147, 232, 0.09);
  --color-accent-overlay-soft: rgba(74, 147, 232, 0.16);
  --color-accent-overlay-strong: rgba(74, 147, 232, 0.28);
  --color-accent-border-soft: rgba(74, 147, 232, 0.34);
  --color-accent-border-medium: rgba(74, 147, 232, 0.48);
  --color-accent-ring: rgba(74, 147, 232, 0.24);

  --color-selection-mix: black;

  /* Card surface */
  --color-surface-card: #1A1A1E;
  --color-surface-card-hover: #1F1F23;
}

/* ─── Light theme ─── */

[data-theme="light"] {
  --color-bg-level-0: #F2F2F2;
  --color-bg-level-1: #ECECEC;
  --color-bg-level-2: #E5E5E5;
  --color-bg-level-3: #D9D9D9;
  --color-bg-secondary: #FFFFFF;
  --color-bg-tertiary: #F7F7F7;
  --color-bg-translucent: rgba(0, 0, 0, 0.04);

  --color-text-primary: #262626;
  --color-text-secondary: #474747;
  --color-text-tertiary: #6E6E6E;
  --color-text-quaternary: #9C9C9C;

  --color-border-primary: rgba(0, 0, 0, 0.09);
  --color-border-secondary: rgba(0, 0, 0, 0.13);
  --color-border-tertiary: rgba(0, 0, 0, 0.20);
  --color-border-translucent: rgba(0, 0, 0, 0.08);
  --color-border-translucent-strong: rgba(0, 0, 0, 0.14);

  --color-brand: #1762CE;
  --color-accent: #1762CE;
  --color-accent-hover: #114FAB;
  --color-accent-dim: #0D4391;
  --color-accent-tint: rgba(23, 98, 206, 0.10);
  --color-on-accent: #FFFFFF;

  --color-link: #1762CE;
  --color-link-hover: #262626;

  --color-button-invert-bg: #242424;
  --color-button-invert-bg-hover: #000000;

  --color-line-primary: rgba(0, 0, 0, 0.08);
  --color-line-secondary: rgba(0, 0, 0, 0.04);
  --color-line-tertiary: #EDEDED;

  --shadow-chisel:
    inset 0 0 0 1px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.80),
    0 0 0 1px rgba(0, 0, 0, 0.06),
    0 2px 6px 0 rgba(0, 0, 0, 0.06);

  --shadow-primary-chip:
    0 3px 6px 0 rgba(0, 0, 0, 0.10),
    0 1px 2px 0 rgba(0, 0, 0, 0.06),
    0 0 0 1px rgba(0, 0, 0, 0.06);

  --shadow-card-inset:
    inset 0 0 0 1px rgba(0, 0, 0, 0.06),
    0 1px 3px rgba(0, 0, 0, 0.06);

  --shadow-large:
    0 16px 32px -12px rgba(0, 0, 0, 0.16),
    0 4px 10px -2px rgba(0, 0, 0, 0.08);

  --color-surface-highlight: rgba(0, 0, 0, 0.025);
  --color-surface-highlight-strong: rgba(0, 0, 0, 0.05);
  --color-surface-noise-opacity: 0.025;

  --color-header-bg: rgba(242, 242, 242, 0.82);

  --color-hero-glow-top: rgba(23, 98, 206, 0.10);
  --color-hero-glow-bottom: rgba(0, 0, 0, 0.02);
  --color-grid-major: rgba(0, 0, 0, 0.045);
  --color-grid-minor: rgba(0, 0, 0, 0.015);

  --color-accent-overlay-weak: rgba(23, 98, 206, 0.10);
  --color-accent-overlay-soft: rgba(23, 98, 206, 0.15);
  --color-accent-overlay-strong: rgba(23, 98, 206, 0.24);
  --color-accent-border-soft: rgba(23, 98, 206, 0.32);
  --color-accent-border-medium: rgba(23, 98, 206, 0.48);
  --color-accent-ring: rgba(23, 98, 206, 0.22);

  --color-selection-mix: white;

  --color-surface-card: #FFFFFF;
  --color-surface-card-hover: #F7F7F7;
}

/* ─── Reset & base ─── */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: auto;
  background: var(--color-bg-level-0);
  overflow-x: clip;
}

body {
  margin: 0;
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  font-family: var(--font-body);
  font-feature-settings: "cv01", "ss03";
  color: var(--color-text-tertiary);
  background: var(--color-bg-level-0);
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--color-surface-noise-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.18'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

main, .site-header, .footer { position: relative; z-index: 1; }

::selection {
  background: color-mix(in oklab, var(--color-accent) 40%, var(--color-selection-mix));
  color: var(--color-text-primary);
}

a {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--speed-fast) var(--ease-primary);
}
a:hover { color: var(--color-link-hover); }

img, svg { max-width: 100%; display: block; }

.container {
  width: var(--container);
  margin: 0 auto;
}

/* ─── Typography ─── */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-body);
  color: var(--color-text-primary);
  margin: 0;
  letter-spacing: -0.022em;
  font-weight: 510;
  line-height: 1.1;
}

h1 {
  font-size: clamp(2.5rem, 5vw + 1rem, 4.25rem);
  line-height: 1.04;
  letter-spacing: -0.028em;
}

h2 {
  font-size: clamp(1.85rem, 2.4vw + 1rem, 2.75rem);
  line-height: 1.1;
  max-width: 30ch;
}

h3 {
  font-size: 1.375rem;
  font-weight: 590;
  letter-spacing: -0.012em;
  line-height: 1.32;
  margin-bottom: 0.5rem;
  color: var(--color-text-secondary);
}

h4 {
  font-size: 1rem;
  font-weight: 590;
  letter-spacing: -0.012em;
  line-height: 1.4;
}

p { margin: 0; }

.lead {
  color: var(--color-text-tertiary);
  font-size: 1.0625rem;
  line-height: 1.6;
  max-width: 56ch;
  margin: 1.25rem auto 0;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 510;
  letter-spacing: 0.04em;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  margin: 0 0 1rem;
  font-feature-settings: "tnum" 1;
}

.eyebrow-accent {
  color: var(--color-accent);
}

/* ─── Header / nav ─── */

/* Floating menu bar — sticky, detached from the viewport edges by 12px,
   constrained to the same max-width as section content so its edges
   visually align with everything below. Rounded, backdrop-blurred,
   with a soft shadow that communicates "above the surface" without
   the heaviness of an anchored bar. */
.site-header {
  position: sticky;
  top: 12px;
  z-index: 50;
  width: var(--container);
  margin: 12px auto 0;
  border-radius: 18px;
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
  transition: background-color 0.25s ease, border-color 0.25s ease,
    box-shadow 0.25s ease, backdrop-filter 0.25s ease;
}

/* A very subtle edge-to-edge hairline below the bar while it sits on top
   (full viewport width, no corner radius). It fades out once the frosted
   .is-scrolled pill takes over. */
.site-header::after {
  content: "";
  position: absolute;
  /* Dropped below the bar so the gap from the content to this line matches the
     gap above the content (the 12px the bar floats from the top). */
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 1px;
  background: var(--color-border-translucent);
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.site-header.is-scrolled::after,
.site-header:has(.site-nav.is-open)::after { opacity: 0; }

/* The nav has no background of its own over the hero; the frosted pill fades
   in once the page scrolls (or the mobile menu opens) so it stays legible
   over content below. */
.site-header.is-scrolled,
.site-header:has(.site-nav.is-open) {
  background: var(--color-header-bg);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-color: var(--color-border-translucent-strong);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.03),
    0 12px 32px -8px rgba(0, 0, 0, 0.45),
    0 4px 12px -2px rgba(0, 0, 0, 0.25);
}

[data-theme="light"] .site-header.is-scrolled,
[data-theme="light"] .site-header:has(.site-nav.is-open) {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.5),
    0 8px 24px -6px rgba(0, 0, 0, 0.12),
    0 2px 6px -1px rgba(0, 0, 0, 0.06);
}

/* Inner row — the .container width constraint on this element resolves
   to 100% of the parent (which is already at var(--container)), so no
   double-constraint. Padding is now applied here since the header
   itself has rounded edges that should not overlap content. */
.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 18px;
  min-height: 56px;
  gap: 1rem;
  width: 100%;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--color-text-primary);
  font-weight: 590;
  letter-spacing: -0.022em;
  font-size: 18px;
}

.brand:hover { color: var(--color-text-primary); }

/* Footer mark — the square Matters app icon (white pinwheel on a black
   canvas), rendered as a rounded app-icon tile. Square source, so width
   matches height; border-radius gives the iOS-squircle feel and keeps
   the black corners from reading as a faint box on the dark canvas. */
.brand-mark {
  height: 64px;
  width: 64px;
  border-radius: 22%;
  display: block;
  flex-shrink: 0;
}

/* Header lockup — the app icon tile followed by the "Matters" wordmark.
   The icon is the square Matters app icon; the text picks up the
   .brand font styles (weight 590, 18px, tight tracking) so the two read
   as one lockup. */
.brand-icon {
  height: 28px;
  width: 28px;
  border-radius: 22%;
  display: block;
  flex-shrink: 0;
}

@media (max-width: 540px) {
  .brand-icon { height: 24px; width: 24px; }
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--radius-rounded);
  color: var(--color-text-tertiary);
  font-size: 13.5px;
  font-weight: 510;
  transition: color var(--speed-fast) var(--ease-primary), background var(--speed-fast) var(--ease-primary);
}

.site-nav a:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-translucent);
}

.site-nav a[aria-current="page"] {
  color: var(--color-text-primary);
}

.site-nav a.nav-cta {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  margin-left: 0.5rem;
  border-radius: var(--radius-rounded);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: -0.005em;
  transition: background var(--speed-fast) var(--ease-primary), transform var(--speed-fast) var(--ease-primary);
}

.site-nav a.nav-cta:hover {
  background: var(--color-accent-hover);
  color: var(--color-on-accent);
}
.site-nav a.nav-cta:active { transform: scale(0.97); }

/* ─── "What's different" dropdown ───
   The one feature-rich nav item: a link to the overview that reveals a panel of
   the nine differentiators on hover/focus. Other top-level items stay high-level
   (Privacy, Why Matters). Pure CSS show/hide (hover + :focus-within for keyboard);
   collapses to an inline expanded list inside the mobile popover. */
.nav-item { position: relative; display: flex; align-items: center; }
.nav-item__link { gap: 0.32rem; }
.nav-caret {
  width: 9px;
  height: 6px;
  opacity: 0.65;
  transition: transform var(--speed-fast) var(--ease-primary);
}
.nav-item--menu:hover .nav-caret,
.nav-item--menu:focus-within .nav-caret { transform: rotate(180deg); }

.nav-menu {
  position: absolute;
  top: calc(100% + 7px);
  left: -0.5rem;
  z-index: 60;
  width: max-content;
  max-width: min(92vw, 460px);
  padding: 0.6rem;
  /* More opaque than the header bar so the panel reads as solid, not a
     see-through overlay on the content behind it. */
  background: rgba(13, 13, 16, 0.97);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--color-border-translucent-strong);
  border-radius: 16px;
  box-shadow:
    0 18px 44px -12px rgba(0, 0, 0, 0.5),
    0 4px 12px -2px rgba(0, 0, 0, 0.28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px);
  transition:
    opacity var(--speed-fast) var(--ease-primary),
    transform var(--speed-fast) var(--ease-primary),
    visibility var(--speed-fast);
}
[data-theme="light"] .nav-menu { background: rgba(247, 247, 248, 0.98); }
/* Invisible bridge so the cursor can cross the 7px gap without the menu closing. */
.nav-menu::before { content: ""; position: absolute; top: -9px; left: 0; right: 0; height: 9px; }
.nav-item--menu:hover .nav-menu,
.nav-item--menu:focus-within .nav-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-menu__label {
  margin: 0.1rem 0 0.45rem 0.55rem;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-quaternary);
}
.nav-menu__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
}
.site-nav .nav-menu a {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  height: 33px;
  padding: 0 0.7rem;
  border-radius: 9px;
  color: var(--color-text-secondary);
  font-size: 13px;
  font-weight: 510;
  white-space: nowrap;
}
.site-nav .nav-menu a:hover {
  background: var(--color-bg-translucent);
  color: var(--color-text-primary);
}
.nav-menu__num {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 500;
  color: var(--color-accent);
  opacity: 0.9;
}
.nav-menu__foot {
  margin-top: 0.4rem;
  padding-top: 0.45rem;
  border-top: 1px solid var(--color-border-translucent);
  display: flex;
  flex-direction: column;
}
.site-nav .nav-menu__foot a { color: var(--color-text-tertiary); }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-left: 0.25rem;
  border-radius: var(--radius-rounded);
  background: transparent;
  border: 0;
  color: var(--color-text-tertiary);
  cursor: pointer;
  transition: color var(--speed-fast) var(--ease-primary), background var(--speed-fast) var(--ease-primary);
}
.theme-toggle:hover { color: var(--color-text-primary); background: var(--color-bg-translucent); }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle-sun { display: none; }
.theme-toggle-moon { display: inline-block; }
[data-theme="light"] .theme-toggle-sun { display: inline-block; }
[data-theme="light"] .theme-toggle-moon { display: none; }
/* The bar theme toggle (a direct child of the header, next to the hamburger) is
   mobile-only; on desktop the in-nav toggle is used instead. */
.header-content > .theme-toggle { display: none; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 6px;
}
.nav-toggle span {
  display: block;
  height: 1.5px;
  background: var(--color-text-primary);
  border-radius: 2px;
  transition: transform var(--speed-base) var(--ease-primary), opacity var(--speed-base);
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav-toggle { display: flex; }
  /* Show the bar toggle next to the hamburger; hide the one inside the menu. */
  .header-content > .theme-toggle { display: inline-flex; margin-left: auto; }
  .header-content > .theme-toggle:hover,
  .header-content > .theme-toggle:active { background: transparent; }
  .site-nav .theme-toggle { display: none; }
  /* Mobile dropdown — its own floating popover, 8px below the bar.
     Rounded, blurred, shadowed so it reads as a related-but-separate
     object instead of an attached strip. */
  .site-nav {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 8px;
    right: 8px;
    padding: 0.5rem;
    background: #141417;
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border: 1px solid var(--color-border-translucent-strong);
    border-radius: 16px;
    box-shadow:
      0 12px 32px -8px rgba(0, 0, 0, 0.45),
      0 4px 12px -2px rgba(0, 0, 0, 0.25);
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
  }
  .site-nav.is-open { display: flex; }
  [data-theme="light"] .site-nav { background: #ffffff; }
  .site-nav a { height: 40px; padding: 0 14px; }
  .nav-cta { margin-left: 0; height: 40px; justify-content: center; }

  /* The "What's different" dropdown flattens into an inline, always-expanded
     list inside the mobile popover (no hover on touch). */
  .nav-item, .nav-item--menu {
    position: static;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .nav-caret { display: none; }
  .nav-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    width: auto;
    max-width: none;
    padding: 0.1rem 0 0.25rem 0.75rem;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    box-shadow: none;
    border-radius: 0;
  }
  [data-theme="light"] .nav-menu { background: none; }
  .nav-menu::before { display: none; }
  .nav-menu__label { display: none; }
  .nav-menu__grid { grid-template-columns: 1fr; gap: 0; }
  .site-nav .nav-menu a { height: 36px; }
  .nav-menu__foot { margin-top: 0.1rem; padding-top: 0.3rem; }
}

/* ─── Buttons ─── */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 18px;
  font: 600 13px/1 var(--font-body);
  letter-spacing: -0.005em;
  border-radius: var(--radius-rounded);
  border: 0;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--speed-base) var(--ease-primary),
    color var(--speed-base) var(--ease-primary),
    box-shadow var(--speed-base) var(--ease-primary),
    transform var(--speed-fast) var(--ease-primary);
}
.button:active { transform: scale(0.97); }

.button-primary {
  background: var(--color-accent);
  color: var(--color-on-accent);
  box-shadow: var(--shadow-primary-chip);
}
.button-primary:hover {
  background: var(--color-accent-hover);
  color: var(--color-on-accent);
}

.button-secondary {
  background: var(--color-bg-translucent);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-chisel);
}
.button-secondary:hover {
  background: var(--color-bg-level-3);
  color: var(--color-text-primary);
}
.button-secondary::after {
  content: "→";
  font-size: 1em;
  transition: transform var(--speed-base) var(--ease-primary);
}
.button-secondary:hover::after { transform: translateX(2px); }

/* Light mode flips the accent to a deep blue (#1762CE), so anything
   sitting ON the accent needs a white foreground. The nav-cta selectors
   must carry `.site-nav a` to outrank the (0,2,1) base rule. */
[data-theme="light"] .button-primary { color: #FFFFFF; }
[data-theme="light"] .button-primary:hover { color: #FFFFFF; }
[data-theme="light"] .site-nav a.nav-cta { color: #FFFFFF; }
[data-theme="light"] .site-nav a.nav-cta:hover { color: #FFFFFF; }
[data-theme="light"] .week-strip .day.is-today,
[data-theme="light"] .week-strip .day.is-today .num { color: #FFFFFF; }

/* Light-theme legibility: the quaternary gray and the soft accent fail AA on
   the off-white canvas, so darken these small metadata bits past 4.5:1. */
[data-theme="light"] .hero-meta,
[data-theme="light"] .footer-legal { color: #5F5F5F; }
[data-theme="light"] .eyebrow.eyebrow--filled { color: #0D4699; }

/* ─── Sections ─── */

/* ── Single continuous canvas (Apple / Linear) ──
   Every section shares ONE background. Rhythm comes from generous spacing
   + one whisper hairline per seam + the ambient glows + elevated content
   cards — never a background-color flip. `.section-alt` is kept as a
   harmless (now bg-less) class so the markup and nav/anchors don't churn. */
.section,
.section-alt {
  padding: clamp(80px, 11vw, 150px) 0;
  position: relative;
}

.section::before,
.section-alt::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-border-translucent) 12%, var(--color-border-translucent) 88%, transparent);
}

/* Consecutive sections keep a comfortable top pad so content never crowds
   the seam hairline: the previous section's bottom pad and this top pad form
   the gap, with the hairline sitting between them. */
.section + .section { padding-top: clamp(56px, 7vw, 96px); }

.section-head { margin-bottom: clamp(2.25rem, 5vw, 3.25rem); }
.section-head--center { text-align: center; }
.section-head--left { text-align: left; }

.section-head h2 {
  margin: 0 auto;
  max-width: 24ch;
}
.section-head--center h2 { margin-inline: auto; }
.section-head h2.section-head-title-wide { max-width: none; }

.section-copy {
  margin: 1rem auto 0;
  max-width: 44em;
  line-height: 1.7;
  color: var(--color-text-tertiary);
}
.section-copy-wide { max-width: 46em; }
.section-copy-tight { max-width: 40em; }

.eyebrow.eyebrow--filled {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.8rem;
  background: var(--color-accent-overlay-soft);
  color: var(--color-accent);
  border-radius: 5px;
  font-size: 12px;
  letter-spacing: 0.08em;
  font-weight: 600;
  margin-bottom: 1.25rem;
  border: 1px solid var(--color-accent-border-soft);
}

/* ─── Hero ─── */

.hero {
  position: relative;
  padding: clamp(84px, 10vh, 112px) 0 clamp(44px, 6vh, 72px);
  overflow: hidden;
  min-height: min(100svh, 820px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%,
      var(--color-hero-glow-top) 0%,
      transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--color-grid-minor) 1px, transparent 1px),
    linear-gradient(to bottom, var(--color-grid-minor) 1px, transparent 1px);
  background-size: 40px 40px;
  background-position: center top;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 30%, transparent 80%);
  pointer-events: none;
  z-index: 0;
}

.hero > .container { position: relative; z-index: 1; }

/* Two-column hero: copy on the left, the device shot on the right, so the
   product sits above the fold. Collapses to a centered single column ≤900px. */
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: start;
  gap: clamp(1.5rem, 4vw, 4.25rem);
}
.hero__copy { text-align: left; }
.hero__copy h1 { margin: 0; }
.hero__copy .hero-lead { margin-left: 0; margin-right: 0; max-width: 39ch; }
.hero__copy .hero-actions { justify-content: flex-start; }

@media (max-width: 900px) {
  .hero {
    min-height: 0;
    display: block;
    padding: clamp(76px, 14vw, 112px) 0 clamp(40px, 7vw, 80px);
  }
  .hero__grid { grid-template-columns: 1fr; gap: clamp(1.5rem, 5vw, 2.75rem); }
  .hero__copy { text-align: center; }
  .hero__copy h1 { margin: 0 auto; }
  .hero__copy .hero-lead { margin-left: auto; margin-right: auto; max-width: 38em; }
  .hero__copy .hero-actions { justify-content: center; }
  .hero-shot { max-width: 640px; }
}

.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 510;
  color: var(--color-accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}

.hero h1 {
  font-weight: 590;
  max-width: 18ch;
  margin: 0 auto;
}

/* ─── Hero glow title (ported from solid/why-solid) ───
   Three-layered text composite stacked on top of itself:
     1. .hero-glow__blur — heavily blurred halo behind the text
     2. .hero-glow__text — the crisp, real text (the only layer screen
        readers see; the other two are aria-hidden)
     3. .hero-glow__crt  — same text passed through an SVG turbulence +
        displacement + dual color-matrix filter (#hero-crt in the page
        defs) for a subtle chromatic-aberration shimmer.
   On load the title scales in (1.2s); 1.7s later JS adds .hero-glow--ready
   which fades the CRT layer out. Hover brings it back briefly so the
   title stays alive. Reduced-motion and touch devices skip the glitch. */

.hero-glow-defs {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}

.hero-glow {
  position: relative;
  display: inline-block;
  isolation: isolate;
  overflow: visible;
  animation: hero-glow-in 1.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s both;
}

@keyframes hero-glow-in {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

.hero-glow__text {
  position: relative;
  z-index: 1;
}

/* The blurred halo is duplicate text rendered with a heavy blur. We use
   the brand blue instead of pure white so the glow harmonizes with the
   hero gradient instead of bleaching it out. */
.hero-glow__blur {
  position: absolute;
  inset: 0;
  z-index: 0;
  color: var(--color-accent);
  filter: blur(34px) brightness(1.4);
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
  white-space: normal;
}

[data-theme="light"] .hero-glow__blur {
  opacity: 0.30;
  filter: blur(28px) brightness(1.15);
}

.hero-glow__crt {
  position: absolute;
  inset: 0;
  z-index: 2;
  color: var(--color-text-primary);
  filter: url(#hero-crt);
  opacity: 1;
  pointer-events: none;
  user-select: none;
  transition: opacity 0.8s ease-out;
  white-space: normal;
}

.hero-glow--ready .hero-glow__crt {
  opacity: 0;
}

.hero-glow--ready:hover .hero-glow__crt {
  opacity: 1;
  transition: opacity 0.3s ease-in;
}

/* The CRT filter is tuned for the dark canvas; in light mode the chromatic
   shift produces obvious red/teal fringes on white, so suppress it. The
   blurred halo continues to sell the "luminous title" effect. */
[data-theme="light"] .hero-glow__crt {
  display: none;
}

/* Touch devices can't hover the CRT back in, so the layer adds nothing
   after settling — drop it entirely to save a paint. */
@media not (any-hover: hover) {
  .hero-glow__crt { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-glow { animation: none; }
  .hero-glow__crt { display: none; }
}

.hero-lead {
  margin: 1.25rem auto 0;
  font-size: 1.1875rem;
  line-height: 1.55;
  max-width: 38em;
  color: var(--color-text-secondary);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.65rem;
  margin-top: 1.6rem;
}

.hero-meta {
  margin-top: 1.1rem;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-text-quaternary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
}
.hero-meta::before,
.hero-meta::after { display: none; }

/* ─── Cards / grids ─── */

.card-grid {
  display: grid;
  gap: 1rem;
}
.card-grid.two-up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-grid.three-up { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-grid.four-up { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 980px) {
  .card-grid.three-up,
  .card-grid.four-up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .card-grid.two-up,
  .card-grid.three-up,
  .card-grid.four-up { grid-template-columns: 1fr; }
}

.card {
  background: var(--color-surface-card);
  border-radius: var(--radius-16);
  padding: 1.5rem 1.5rem 1.5rem;
  box-shadow: var(--shadow-card-inset);
  position: relative;
  transition: background var(--speed-base) var(--ease-primary), transform var(--speed-base) var(--ease-primary);
}
.card:hover { background: var(--color-surface-card-hover); }

.card .icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--color-accent-overlay-soft);
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.95rem;
  border: 1px solid var(--color-accent-border-soft);
}
.card .icon svg { width: 18px; height: 18px; }
.card h3 { margin: 0 0 0.5rem; }
.card p {
  color: var(--color-text-tertiary);
  line-height: 1.6;
  font-size: 14px;
}

/* Feature card with mini illustration */
.feature-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--color-surface-card);
  border-radius: var(--radius-16);
  box-shadow: var(--shadow-card-inset);
  overflow: hidden;
  position: relative;
}

.feature-card-vis {
  border-radius: var(--radius-12);
  background: linear-gradient(180deg, var(--color-bg-level-2), var(--color-bg-level-1));
  border: 1px solid var(--color-border-translucent);
  padding: 1rem;
  min-height: 160px;
  position: relative;
  overflow: hidden;
}

.feature-card h3 {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--color-text-primary);
  margin: 0 0 0.4rem;
}
.feature-card p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-tertiary);
  margin: 0;
}

/* ─── Two-column feature row (alternating layout) ─── */

.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding: clamp(2rem, 5vw, 4rem) 0;
}
.feature-row + .feature-row {
  border-top: 1px solid var(--color-border-translucent);
}
.feature-row.is-reverse .feature-row-vis { order: -1; }
@media (max-width: 880px) {
  .feature-row { grid-template-columns: 1fr; }
  .feature-row.is-reverse .feature-row-vis { order: 0; }
}

.feature-row h3 {
  font-size: clamp(1.5rem, 1.6vw + 1rem, 2rem);
  letter-spacing: -0.022em;
  color: var(--color-text-primary);
  margin: 0 0 0.85rem;
  line-height: 1.15;
}
.feature-row p.section-copy { margin: 0; max-width: 38em; }

.feature-row-vis {
  border-radius: var(--radius-16);
  background: linear-gradient(180deg, var(--color-surface-card), var(--color-bg-level-1));
  box-shadow: var(--shadow-card-inset);
  padding: 1.25rem;
  min-height: 280px;
  position: relative;
  overflow: hidden;
}

/* Rows that hold real (background-removed) app captures — identified by their
   theme-paired .shot--light/.shot--dark images — drop the container card so the
   devices float on the page with just their own drop-shadow, no fill. The
   HTML/CSS mocks (no .shot--* images) keep the card. */
.feature-row-vis:has(img.shot--light, img.shot--dark, .roll-demo) {
  background: none;
  box-shadow: none;
  padding: 0;
  min-height: 0;
  overflow: visible;
}

.feature-row-list {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
/* Block + absolute dot, NOT flex: list items contain inline <strong>/<em>
   mid-sentence, and a flex li turns every element + text node into its own
   flex item, scrambling the sentence order. Block flow keeps prose intact. */
.feature-row-list li {
  position: relative;
  display: block;
  padding-left: 1.05rem;
  font-size: 14.5px;
  color: var(--color-text-secondary);
  line-height: 1.5;
}
.feature-row-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 5px;
  height: 5px;
  background: var(--color-accent);
  border-radius: 50%;
}
/* A closing paragraph directly after a feature list needs breathing room
   (e.g. the decision-log note in #task-types). The `p` matches the
   specificity of `.feature-row p.section-copy { margin: 0 }` below —
   source order then breaks the tie in our favor. */
.feature-row .feature-row-list + p.section-copy {
  margin-top: 1.4rem;
}

/* ─── Testimonials (#customers) ───
   Card style with a large decorative open-quote in blue as a positional
   anchor, the quote text as the focal element, and an attribution block
   pinned to the bottom (separated by a hairline divider so the eye knows
   "above is the voice, below is the speaker"). No company logos — Matters
   is a personal-productivity app and crediting only the person, not the
   employer, reinforces that positioning. */

.testimonial {
  background: var(--color-surface-card);
  border-radius: var(--radius-16);
  /* Top padding (4.75rem = 76px) accommodates THREE things stacked
     vertically: ~22px breathing room above the decorative quote glyph,
     the glyph itself (~30px visible), and a ~22px gap before the quote
     text begins. Moving any of these requires re-tuning the others. */
  padding: 4.75rem 1.5rem 1.5rem;
  box-shadow: var(--shadow-card-inset);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  position: relative;
  overflow: hidden;
}

/* Decorative open-quote — Georgia/serif glyph in soft blue, anchored
   inside the card (was hanging above the edge). The visible glyph sits
   between roughly y=22 and y=52 from the card top, leaving the upper
   ~22px as breathing room and ~24px below the glyph as the gap-to-text
   that the card's padding-top resolves to. */
.testimonial::before {
  content: "\201C"; /* left double quotation mark */
  position: absolute;
  top: 1.25rem;
  left: 1.5rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 4.5rem;
  line-height: 1;
  color: var(--color-accent);
  opacity: 0.28;
  pointer-events: none;
  user-select: none;
}

.testimonial__quote {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--color-text-secondary);
  margin: 0;
  flex: 1;
  position: relative;
  z-index: 1;
  letter-spacing: -0.005em;
}

.testimonial__author {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border-translucent);
}

.testimonial__name {
  font-size: 13.5px;
  color: var(--color-text-primary);
  font-weight: 600;
  letter-spacing: -0.005em;
}

.testimonial__role {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-tertiary);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ─── Mini illustrations (reusable) ─── */

.mini-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.mini-list .mini-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.55rem;
  background: var(--color-bg-level-3);
  border-radius: 6px;
  border: 1px solid var(--color-border-translucent);
  font-size: 12.5px;
  color: var(--color-text-secondary);
}
.mini-list .mini-row .check {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border-tertiary);
  flex-shrink: 0;
}
.mini-list .mini-row.done .check { background: var(--color-accent); border-color: var(--color-accent); }
.mini-list .mini-row.done span:not(.check) { color: var(--color-text-quaternary); text-decoration: line-through; }
.mini-list .mini-row .right {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--color-text-quaternary);
  letter-spacing: 0.02em;
}

/* Calendar week strip */
.week-strip {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.week-strip .day {
  aspect-ratio: 1;
  border-radius: 6px;
  background: var(--color-bg-level-3);
  border: 1px solid var(--color-border-translucent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--color-text-tertiary);
  font-family: var(--font-mono);
}
.week-strip .day .num {
  font-size: 13px;
  color: var(--color-text-secondary);
  font-family: var(--font-body);
  font-weight: 590;
}
.week-strip .day.is-today {
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.week-strip .day.is-today .num,
.week-strip .day.is-today { color: #1A1108; }
.week-strip .day .dots {
  display: flex;
  gap: 2px;
  margin-top: 2px;
}
.week-strip .day .dots i {
  display: block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--color-accent);
  font-style: normal;
}
.week-strip .day.is-today .dots i { background: rgba(26, 17, 8, 0.6); }

/* Habit grid (heatmap) */
.habit-grid {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  gap: 3px;
  margin-top: 0.5rem;
}
.habit-grid i {
  aspect-ratio: 1;
  border-radius: 2px;
  background: var(--color-bg-level-3);
  border: 1px solid var(--color-border-translucent);
}
.habit-grid i.l1 { background: var(--color-accent-overlay-weak); border-color: var(--color-accent-border-soft); }
.habit-grid i.l2 { background: var(--color-accent-overlay-soft); border-color: var(--color-accent-border-soft); }
.habit-grid i.l3 { background: var(--color-accent-overlay-strong); border-color: var(--color-accent-border-medium); }
.habit-grid i.l4 { background: var(--color-accent); border-color: var(--color-accent); }

/* Focus timer ring */
.focus-ring-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 220px;
}
.focus-ring {
  width: 180px;
  height: 180px;
  position: relative;
}
.focus-ring svg {
  transform: rotate(-90deg);
  width: 100%;
  height: 100%;
}
.focus-ring .track { stroke: var(--color-bg-tertiary); }
.focus-ring .fill {
  stroke: var(--color-accent);
  stroke-linecap: round;
  filter: drop-shadow(0 0 8px var(--color-accent-overlay-strong));
}
.focus-ring .label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.focus-ring .label .time {
  font-size: 30px;
  font-weight: 510;
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.022em;
}
.focus-ring .label .task {
  font-size: 11.5px;
  color: var(--color-text-tertiary);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 0.35rem;
}

/* Calendar event blocks */
.timeline {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0.5rem 0;
}
.timeline-row {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 8px;
  align-items: center;
}
.timeline-row .hour {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-quaternary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: right;
}
.timeline-row .block {
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  padding: 0 0.6rem;
  font-size: 12px;
  color: var(--color-text-secondary);
  border-left: 3px solid var(--color-accent);
  background: var(--color-accent-overlay-soft);
}
.timeline-row .block.event { border-left-color: var(--color-blue); background: rgba(96, 165, 250, 0.10); }
.timeline-row .block.todo { border-left-color: var(--color-accent); background: var(--color-accent-overlay-soft); }
.timeline-row .block.gap { background: transparent; border-left: 3px dashed var(--color-border-tertiary); color: var(--color-text-quaternary); }

/* Kanban mini */
.kanban-mini {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  height: 100%;
}
.kanban-col {
  background: var(--color-bg-level-3);
  border-radius: 8px;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 5px;
  border: 1px solid var(--color-border-translucent);
}
.kanban-col .col-title {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-quaternary);
  padding: 0 0.25rem 0.25rem;
}
.kanban-card {
  background: var(--color-surface-card);
  border-radius: 6px;
  padding: 0.4rem 0.5rem;
  font-size: 11.5px;
  color: var(--color-text-secondary);
  box-shadow: var(--shadow-card-inset);
  line-height: 1.3;
}

/* Devices side-by-side */
.devices-pair {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 1.5rem;
  align-items: end;
}
@media (max-width: 760px) {
  .devices-pair { grid-template-columns: 1fr; }
}
.device-iphone {
  border-radius: 28px;
  background: linear-gradient(180deg, var(--color-bg-level-2), var(--color-bg-level-1));
  box-shadow:
    inset 0 0 0 6px var(--color-bg-level-3),
    inset 0 0 0 7px var(--color-border-translucent-strong),
    0 30px 50px -16px rgba(0, 0, 0, 0.55);
  padding: 14px;
  aspect-ratio: 9 / 17;
  position: relative;
  overflow: hidden;
}
.device-iphone::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 22px;
  background: var(--color-bg-level-0);
  border-radius: 14px;
  z-index: 2;
}
.device-mac {
  border-radius: 14px;
  background: var(--color-bg-level-2);
  box-shadow:
    inset 0 0 0 1px var(--color-border-translucent-strong),
    0 30px 50px -16px rgba(0, 0, 0, 0.55);
  padding: 1rem;
  aspect-ratio: 16 / 10;
  position: relative;
  overflow: hidden;
}
.device-mac .menu-bar {
  display: flex;
  gap: 4px;
  margin-bottom: 0.7rem;
}
.device-mac .menu-bar i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-bg-tertiary);
}
.device-mac .menu-bar i:nth-child(1) { background: #FF5F57; }
.device-mac .menu-bar i:nth-child(2) { background: #FEBC2E; }
.device-mac .menu-bar i:nth-child(3) { background: #28C840; }

.device-iphone .iphone-list {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ─── Privacy / sync section ─── */

.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 1.5rem;
}
.pillars > div {
  padding: 1.5rem 1.25rem;
  border-right: 1px solid var(--color-border-translucent);
}
.pillars > div:last-child { border-right: 0; }
.pillars h4 {
  color: var(--color-text-primary);
  margin: 0 0 0.4rem;
  font-size: 14.5px;
  letter-spacing: -0.012em;
}
.pillars p {
  color: var(--color-text-tertiary);
  font-size: 13.5px;
  line-height: 1.55;
  margin: 0;
}
.pillars .icon-tiny {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--color-accent-overlay-soft);
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.7rem;
  border: 1px solid var(--color-accent-border-soft);
}
.pillars .icon-tiny svg { width: 13px; height: 13px; }
@media (max-width: 760px) {
  .pillars { grid-template-columns: 1fr; }
  .pillars > div {
    border-right: 0;
    border-bottom: 1px solid var(--color-border-translucent);
  }
  .pillars > div:last-child { border-bottom: 0; }
}

/* ─── Closing CTA ─── */

.closing-cta {
  border-radius: var(--radius-24);
  padding: clamp(2.5rem, 6vw, 4.5rem);
  background:
    radial-gradient(ellipse 50% 80% at 100% 0%, var(--color-accent-overlay-soft), transparent 70%),
    linear-gradient(180deg, var(--color-surface-card), var(--color-bg-level-1));
  box-shadow: var(--shadow-card-inset), var(--shadow-large);
  text-align: center;
  overflow: hidden;
  position: relative;
}
.closing-cta h2 {
  /* extra top margin opens the gap below the eyebrow; the small
     subhead gap below is set on `h2 + p` so the two gaps differ. */
  margin: clamp(1.75rem, 3.5vw, 2.6rem) auto 0;
  max-width: none;
  color: var(--color-text-primary);
  font-size: clamp(2rem, 2.8vw + 0.6rem, 3rem);
  /* Match the "01, 02" pillar counters — the Fraunces display serif. */
  font-family: "Spectral", "Tiempos Headline", Georgia, "Times New Roman", serif;
  font-variation-settings: "opsz" 96;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.closing-cta p {
  color: var(--color-text-tertiary);
  margin: 1rem auto 2rem;
  max-width: 38em;
  line-height: 1.6;
}
/* subhead sits close under the headline (smaller than the eyebrow→headline gap) */
.closing-cta--download h2 + p { margin-top: 0.4rem; }
/* the eyebrow is the first element now — no extra top margin above it */
.closing-cta--download .eyebrow { margin-top: 0; }

/* ── Waitlist CTA: email actions, a trust line, and an
   overlapping device shelf (adapted from the launch download CTA)
   design, rebuilt on the site's theme-aware tokens + real light/dark
   screenshots). The shelf sits flush at the panel's bottom edge, which
   clips the devices so they read as rising into the panel. ── */
.closing-cta--download {
  /* tighter top padding now that the logo is gone */
  padding-top: clamp(1.5rem, 3.5vw, 2.5rem);
  padding-bottom: 0;
  /* A calm blue-gradient wash for the closing CTA — a brighter blue bloom
     top-right, a softer one bottom-left, over a lightly blue-tinted base
     (instead of the near-white fill). Theme-aware via the accent + surface
     tokens: light = #1762CE on white, dark = #4A93E8 on graphite. */
  background:
    radial-gradient(125% 95% at 88% -14%, var(--color-accent-overlay-strong), transparent 52%),
    radial-gradient(95% 88% at 2% 116%, var(--color-accent-overlay-soft), transparent 58%),
    linear-gradient(
      160deg,
      color-mix(in oklab, var(--color-surface-card) 93%, var(--color-accent)),
      color-mix(in oklab, var(--color-surface-card) 87%, var(--color-accent)) 52%,
      color-mix(in oklab, var(--color-bg-level-1) 82%, var(--color-accent))
    );
}

.closing-cta__icon {
  display: block;
  width: 60px;
  height: 60px;
  border-radius: 15px;
  margin: 0 auto 1.25rem;
  box-shadow:
    0 8px 22px -6px rgba(15, 18, 24, 0.45),
    0 0 0 1px var(--color-border-translucent-strong);
}

/* Larger waitlist buttons for the closing CTA, and no trailing arrow on the
   secondary (the arrow stays on other secondary buttons site-wide). */
.closing-cta .button {
  height: 54px;
  padding: 0 28px;
  font-size: 16px;
  gap: 10px;
}
.closing-cta .button svg { flex: none; height: 20px; width: auto; }
.closing-cta .button-secondary::after { content: none; }

.closing-cta__trust {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.45rem 0.9rem;
  margin-top: 1.25rem;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--color-text-tertiary);
}
.closing-cta__trust > span:not(.closing-cta__dot) { white-space: nowrap; }
.closing-cta__dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
  flex: none;
}

.closing-cta__shelf {
  position: relative;
  /* On small screens 26vw collapses, so floor the height near the desktop
     value — otherwise the devices show only their top ~half before the
     panel caps them. Floored, they fill down to the frame's bottom edge. */
  height: clamp(300px, 26vw, 312px);
  margin-top: clamp(2rem, 4vw, 3rem);
  /* Break out of the panel's horizontal padding so the device shelf spans
     the full card width and the images clip at the card's edges (not inset
     by the padding). Symmetric, so the centered composition is unchanged. */
  margin-inline: calc(clamp(2.5rem, 6vw, 4.5rem) * -1);
  overflow: hidden;
}
.closing-cta__shelf .cta-device { position: absolute; left: 50%; }
.closing-cta__shelf .cta-device img { width: 100%; height: auto; }

/* Mac window — the real capture already carries its own chrome + shadow,
   so it sits bare, tilted, behind the phone. */
.cta-device--win {
  width: clamp(300px, 42vw, 452px);
  top: clamp(26px, 4.5vw, 56px);
  transform: translateX(-20%) rotate(1.8deg);
  z-index: 1;
}

/* Phone — screen-only capture, wrapped in a dark bezel, focal, in front. */
.cta-device--phone {
  width: clamp(178px, 24vw, 256px);
  top: clamp(12px, 2.6vw, 26px);
  transform: translateX(-102%) rotate(-2.5deg);
  z-index: 2;
  padding: 7px;
  border-radius: 42px;
  background: linear-gradient(160deg, #232427, #131416);
  box-shadow:
    0 34px 60px -22px rgba(15, 20, 38, 0.62),
    0 0 0 1px rgba(0, 0, 0, 0.4),
    0 1px 0 rgba(255, 255, 255, 0.12) inset;
}
.cta-phone__screen {
  border-radius: 35px;
  overflow: hidden;
  background: #0b0d12;
  aspect-ratio: 1206 / 2622;
}
.cta-phone__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

@media (max-width: 560px) {
  .closing-cta__trust { font-size: 12.5px; gap: 0.3rem 0.7rem; }
  /* the items wrap to their own lines here — trailing dots read awkwardly */
  .closing-cta__dot { display: none; }
  /* nudge the phone further left and thin its bezel on small screens
     (keep corners concentric: outer radius 42 − padding 6 = inner 36) */
  .cta-device--phone {
    transform: translateX(-113%) rotate(-2.5deg);
    padding: 6px;
  }
  .cta-phone__screen { border-radius: 36px; }
}

/* ─── Footer ─── */

/* A columned footer: a brand block (with two quiet, alive touches — a
   rolling word that nods to rolling tasks, and a live Stockholm clock in
   the base bar) beside four link columns, all over a single hairline. */
.footer {
  border-top: 1px solid var(--color-border-translucent);
  padding: clamp(3rem, 6vw, 4.75rem) 0 3rem;
  background: var(--color-bg-level-0);
}
.footer .container {
  display: block;
}

.footer-grid {
  display: grid;
  /* Brand block on the left absorbs the slack (1fr); the four link columns
     size to their content and pack flush against the right edge of the
     container, so the footer info is right-aligned to the available width. */
  grid-template-columns: minmax(0, 1fr) repeat(4, max-content);
  gap: 2.5rem clamp(4rem, 6.5vw, 7rem);
  align-items: start;
}

/* ── Brand block ── */
.footer-brand-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 22rem;
}
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--color-text-primary);
  font-weight: 590;
  font-size: 16px;
  letter-spacing: -0.02em;
  align-self: flex-start;
}
.footer-brand:hover { color: var(--color-text-primary); }
/* Brand tagline — set in the display serif (Fraunces, same face as the
   pillar numerals) so it reads as an editorial brand line, distinct from the
   Inter column links rather than as another row of fine print. */
.footer-tagline {
  margin: 0.1rem 0 0;
  font-family: "Spectral", "Tiempos Headline", Georgia, "Times New Roman", serif;
  font-size: clamp(1.1875rem, 0.5vw + 1.05rem, 1.375rem);
  font-weight: 430;
  font-variation-settings: "opsz" 36;
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: var(--color-text-secondary);
  max-width: 17rem;
  text-wrap: balance;
}

/* ── Link columns ── */
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-width: 0;
}
.footer-col__title {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 510;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}
.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.footer-col a {
  color: var(--color-text-tertiary);
  font-size: 13.5px;
  line-height: 1.3;
  transition: color var(--speed-fast) var(--ease-primary);
}
.footer-col a:hover { color: var(--color-text-primary); }

/* ── Base bar ── */
.footer-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.4rem;
  border-top: 1px solid var(--color-border-translucent);
}
.footer-legal {
  margin: 0;
  font-size: 12.5px;
  color: var(--color-text-quaternary);
  letter-spacing: 0.01em;
}

/* ── Live Stockholm clock — the personal, "made by one person" touch. The
   dot breathes to signal it is live; the time comes from the visitor's
   browser resolved to Europe/Stockholm in JS. ── */
.footer-clock {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 12.5px;
  color: var(--color-text-tertiary);
  letter-spacing: 0.01em;
}
.footer-clock__time {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  color: var(--color-text-secondary);
}
.footer-clock__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-green);
  box-shadow: 0 0 0 0 rgba(79, 190, 122, 0.45);
  animation: footer-clock-pulse 2.6s var(--ease-primary) infinite;
}
@keyframes footer-clock-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(79, 190, 122, 0.45); opacity: 1; }
  70%  { box-shadow: 0 0 0 5px rgba(79, 190, 122, 0); opacity: 0.85; }
  100% { box-shadow: 0 0 0 0 rgba(79, 190, 122, 0); opacity: 1; }
}

/* Inline Swedish flag — official PMS 301c blue + 116c yellow.
   Sized to match the cap-height of the legal text. The hairline
   inner shadow keeps the dark blue from dissolving into the dark
   footer canvas at small render sizes. */
.flag-se {
  display: inline-block;
  width: auto;
  height: 10px;
  margin-left: 5px;
  vertical-align: -1px;
  border-radius: 1px;
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.18);
}

[data-theme="light"] .flag-se {
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.10);
}

/* Responsive: collapse the five-track grid to two columns (brand spans the
   row), then to a single stack. */
@media (max-width: 960px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.25rem 2rem;
  }
  .footer-brand-col {
    grid-column: 1 / -1;
    max-width: none;
  }
}
@media (max-width: 540px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-base { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .footer-clock__dot { animation: none; }
}

/* ════════════════════════════════════════════════════════════════
   "What's different" — a vertical numbered list (solidbt-inspired). Each
   row expands in place to reveal that feature's full treatment (its
   points + the app mock). Inter titles + IBM Plex Mono numbers — no serif.
   ════════════════════════════════════════════════════════════════ */

/* Screen-reader-only utility */
.u-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Breathing room below the #differences header. */
#differences .section-head { margin-bottom: clamp(3.25rem, 6vw, 5rem); }

.pillar-list {
  list-style: none;
  margin: clamp(2.25rem, 5vw, 3.5rem) 0 0;
  padding: 0;
  border-top: 1px solid var(--color-border-translucent);
}
.pillar {
  display: grid;
  grid-template-columns: clamp(64px, 7vw, 104px) 1fr;
  column-gap: clamp(1.25rem, 3vw, 2.5rem);
  padding: clamp(3.5rem, 5.5vw, 6rem) 0;
  border-bottom: 1px solid var(--color-border-translucent);
  align-items: start;
}
.pillar__num {
  font-family: "Spectral", "Tiempos Headline", Georgia, "Times New Roman", serif;
  font-size: clamp(2.25rem, 1.8vw + 1.5rem, 3.5rem);
  font-weight: 500;
  font-variation-settings: "opsz" 96;
  line-height: 1;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.pillar__body { min-width: 0; }
.pillar__topic {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin: 0 0 0.6rem;
}
.pillar__title {
  font-family: var(--font-body);
  font-weight: 590;
  font-size: clamp(1.5rem, 1.2vw + 1.1rem, 2.05rem);
  letter-spacing: -0.022em;
  line-height: 1.2;
  color: var(--color-text-primary);
  margin: 0 0 0.85rem;
}
.pillar__title em { font-style: italic; color: var(--color-accent); font-weight: 510; }

/* Animated "rolling" glyph — the app's rolling mark (a capsule loop with an
   arrow) set inline after the word "rotates". The arrow travels around the
   loop via CSS offset-path, miming a task that sinks to the bottom and comes
   back around to the top. Calm 3.6s loop; parked at rest under reduced motion. */
.roll-glyph {
  display: inline-block;
  height: 1.04em;
  width: auto;
  margin-left: 0.3em;
  vertical-align: -0.16em;
  color: var(--color-accent);
  overflow: visible;
}
.roll-glyph__cap {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  opacity: 0.9;
}
.roll-glyph__arrow {
  fill: currentColor;
  /* The arrow (drawn pointing +X around its own origin) rides the same capsule
     path; offset-rotate:auto turns it to lead the direction of travel. */
  offset-path: path("M4 12 A10 10 0 0 1 24 12 L24 24 A10 10 0 0 1 4 24 Z");
  offset-rotate: auto;
  offset-distance: 0%;
  animation: roll-glyph-travel 6s linear infinite;
}
@keyframes roll-glyph-travel {
  to { offset-distance: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .roll-glyph__arrow {
    animation: none;
    offset-distance: 93%; /* parked on the left side, pointing up — like the app icon */
  }
}
.pillar__lead {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin: 0;
}

/* The detail is always shown (no accordion): the app mock first, then the
   bullet points below it — both below the lead, full-width in the column. */
.pillar__detail {
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 3vw, 2.5rem);
}
/* The header→image gap lives entirely on .pillar__more's margin-top and is set
   to the SAME clamp as .pillar__detail's gap, so the space above each image (to
   the subheader) matches the space below it (to the bullet grid). The two
   full-width captures (#plan, #multi-column) carry their own negative margin-top
   over baked top padding; removing the old 1.5rem detail padding-top shifts them
   up by the same amount as every other pillar, keeping them consistent. */
.pillar__more { margin-top: clamp(2rem, 3.65vw, 3.4rem); }
.pillar__detail .feature-row-vis { order: -1; max-width: none; }   /* image on top, as wide as the grid below */
.pillar__detail .feature-row-vis--wide { max-width: none; }
.pillar__points { min-width: 0; }
.pillar__points .feature-row-list { margin-top: 0; }
.pillar__points .section-copy { margin: 1.1rem 0 0; max-width: none; }

/* Sections 01 (rolling) and 04 (focus lists): the bullet grid sits to the
   RIGHT of the visual rather than stacked below it. Reverts to stacked on
   narrow screens. */
#rolling-lists .pillar__detail,
#focus-lists .pillar__detail {
  flex-direction: row;
  align-items: flex-start;
  gap: clamp(2rem, 4vw, 3.5rem);
}
/* Rolling: vertically center the image column and the bullet grid against
   each other (the image is taller, so the text rides its middle). */
#rolling-lists .pillar__detail {
  align-items: center;
}
#rolling-lists .pillar__detail .feature-row-vis,
#focus-lists .pillar__detail .feature-row-vis {
  order: -1;           /* visual on the LEFT, bullet grid to its right */
  flex: 0 0 auto;
}
/* The image is the point — give it the lion's share of the width. */
#rolling-lists .pillar__detail .feature-row-vis {
  width: clamp(340px, 54%, 660px);   /* the animated Dinners list */
}
#focus-lists .pillar__detail .feature-row-vis {
  width: clamp(380px, 60%, 780px);   /* landscape magnify mock */
}
/* Text is secondary — a narrow column of cards beside the image. */
#rolling-lists .pillar__points,
#focus-lists .pillar__points {
  flex: 1 1 0;
  max-width: 360px;
}
#rolling-lists .pillar__points .feature-row-list,
#focus-lists .pillar__points .feature-row-list {
  grid-template-columns: 1fr;        /* single column of cards beside the visual */
}
@media (max-width: 760px) {
  #rolling-lists .pillar__detail,
  #focus-lists .pillar__detail {
    flex-direction: column;
  }
  #rolling-lists .pillar__detail .feature-row-vis,
  #focus-lists .pillar__detail .feature-row-vis {
    order: -1;
    width: 100%;
  }
  #rolling-lists .pillar__points .feature-row-list,
  #focus-lists .pillar__points .feature-row-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Section 11 (habits): same image-left / bullets-right row, but the habits
   capture is near-square, so it's sized smaller to leave the four bullet rows
   room beside it. Classic only; reverts to stacked on narrow screens. */
#habits .pillar__detail {
  flex-direction: row;
  /* flex-start (not center): keeps the image top pinned to the row top so its
     gap below the subtitle stays uniform with the other sections even at narrow
     widths, where the bullet column grows taller than the near-square image. */
  align-items: flex-start;
  gap: clamp(2rem, 4vw, 3.5rem);
}
#habits .pillar__detail .feature-row-vis {
  order: -1;
  flex: 0 0 auto;
  width: clamp(320px, 46%, 540px);
}
/* margin-left cancels the mac capture's baked ~3.2% transparent side margin
   so the WINDOW edge — not the image box — sits flush with the text above.
   (On mobile the full-bleed rule below re-points margin-inline.) */
#habits .shot-solo { max-width: none; margin: 0 0 0 -3.2%; }
#habits .pillar__points {
  flex: 1 1 0;
  max-width: 360px;
}
#habits .pillar__points .feature-row-list {
  grid-template-columns: 1fr;
}

/* Rolling / Focus lists / Habits: the bullets sit beside the image as a quiet
   text list — drop the card fill (and its inset ring + padding) so they read as
   a light list, not a stack of boxes. */
#rolling-lists .pillar__points .feature-row-list li,
#focus-lists .pillar__points .feature-row-list li,
#habits .pillar__points .feature-row-list li {
  background: none;
  box-shadow: none;
  padding: 0.1rem 0;
}
@media (max-width: 760px) {
  #habits .pillar__detail { flex-direction: column; }
  #habits .pillar__detail .feature-row-vis { width: 100%; }
  #habits .pillar__points .feature-row-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .pillar { grid-template-columns: 1fr; row-gap: 0.5rem; }
  .pillar__num { font-size: 2.5rem; }
}

/* ── Ambient glow — on a single continuous canvas, depth comes from light,
   not background flips. Static (never animated), warm-to-cool blue, faint.
   Opt-in via .section--glow on a few anchor sections. ── */
.section--glow { isolation: isolate; }
.section--glow > .container { position: relative; z-index: 1; }
.section--glow::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  left: 50%; top: 0;
  transform: translateX(-50%);
  width: min(900px, 85vw);
  height: 520px;
  background: radial-gradient(ellipse 60% 50% at 50% 0%, var(--color-accent-overlay-weak), transparent 70%);
}
#plan.section--glow::after { background: radial-gradient(ellipse 55% 48% at 78% 14%, var(--color-accent-overlay-weak), transparent 70%); }
#why.section--glow::after  { background: radial-gradient(ellipse 62% 50% at 50% 6%,  var(--color-accent-overlay-weak), transparent 70%); }
/* Blue over off-white muddies fast — dial the glow down hard in light theme. */
[data-theme="light"] .section--glow::after { opacity: 0.5; }

/* Marker on each downstream feature row that ties back to the pillar */
.diff-marker {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin: 0 0 1rem;
}
.diff-marker span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 22px;
  padding: 0 7px;
  background: var(--color-accent-overlay-soft);
  color: var(--color-accent);
  border: 1px solid var(--color-accent-border-soft);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* ─── 01 — Rolling list mock ─── */

.rolling-mock {
  background: var(--color-bg-level-2);
  border: 1px solid var(--color-border-translucent);
  border-radius: var(--radius-12);
  padding: 1rem;
}
.rolling-mock__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.75rem;
}
.rolling-mock__title {
  font-size: 14px;
  font-weight: 590;
  color: var(--color-text-primary);
}
.rolling-mock__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-quaternary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.rolling-mock__hint {
  margin-top: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 12px;
  color: var(--color-text-tertiary);
  background: var(--color-accent-overlay-weak);
  border: 1px dashed var(--color-accent-border-soft);
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
}
.rolling-mock__hint svg { color: var(--color-accent); flex-shrink: 0; }

.rolling-uses {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 1rem;
}
.rolling-use {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  border-radius: var(--radius-rounded);
  background: var(--color-bg-translucent);
  border: 1px solid var(--color-border-translucent);
  font-size: 12px;
  color: var(--color-text-tertiary);
  font-weight: 510;
}

/* ─── 07 — Brief mock (per-list operating page) ─── */

.brief-mock {
  background: var(--color-bg-level-2);
  border: 1px solid var(--color-border-translucent);
  border-radius: var(--radius-12);
  padding: 1rem;
}
.brief-mock__tabs {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  margin-bottom: 0.85rem;
  background: var(--color-bg-translucent);
  border: 1px solid var(--color-border-translucent);
  border-radius: var(--radius-rounded);
}
.brief-mock__tabs span {
  font-size: 11.5px;
  font-weight: 510;
  color: var(--color-text-tertiary);
  padding: 3px 12px;
  border-radius: var(--radius-rounded);
}
.brief-mock__tabs span.is-active {
  background: var(--color-accent);
  color: var(--color-on-accent);
}
.brief-mock__head { margin-bottom: 0.6rem; }
.brief-mock__title {
  font-size: 14px;
  font-weight: 590;
  color: var(--color-text-primary);
}
.brief-mock__label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-quaternary);
  margin: 0.9rem 0 0.4rem;
}
.brief-decisions { display: flex; flex-direction: column; gap: 4px; }
.brief-decision {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  font-size: 13px;
  color: var(--color-text-secondary);
  padding: 5px 0;
}
.status-pill {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 590;
  padding: 2px 9px;
  border-radius: var(--radius-rounded);
  letter-spacing: 0.02em;
}
.status-pill--locked {
  background: rgba(79, 190, 122, 0.18);
  color: var(--color-green);
  border: 1px solid rgba(79, 190, 122, 0.32);
}
.status-pill--waiting {
  background: var(--color-accent-overlay-strong);
  color: var(--color-accent);
  border: 1px solid var(--color-accent-border-soft);
}
[data-theme="light"] .brief-mock__tabs span.is-active { color: #FFFFFF; }

/* ─── 02 — Multi-column Mac mock ─── */

.feature-row-vis--wide {
  grid-column: 1 / -1;
}

.mac-3col {
  aspect-ratio: 16 / 9;
  padding: 1rem;
  width: 100%;
}
.mac-3col__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
  height: calc(100% - 1.5rem);
}
.mac-3col__col {
  background: var(--color-bg-level-1);
  border: 1px solid var(--color-border-translucent);
  border-radius: 8px;
  padding: 0.6rem 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  overflow: hidden;
}
.col-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.2rem 0.4rem;
  border-bottom: 1px solid var(--color-border-translucent);
  margin-bottom: 0.2rem;
}
.col-head__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.col-head__title {
  font-size: 12px;
  color: var(--color-text-primary);
  font-weight: 590;
  letter-spacing: -0.005em;
}
.col-head__count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--color-text-quaternary);
}
.mac-3col .mini-list { gap: 3px; }
.mac-3col .mini-row {
  font-size: 11.5px;
  padding: 0.32rem 0.45rem;
}
.mac-3col .mini-row .right { font-size: 9.5px; }

/* ─── 03 — Routines & time blocks ─── */

.routine-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0.4rem;
  background: var(--color-bg-level-2);
  border: 1px solid var(--color-border-translucent);
  border-radius: var(--radius-rounded);
  margin-bottom: 1rem;
  width: max-content;
  max-width: 100%;
}
.routine-pill {
  border: 0;
  background: transparent;
  height: 28px;
  padding: 0 12px;
  border-radius: var(--radius-rounded);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 510;
  color: var(--color-text-tertiary);
  cursor: pointer;
  transition: background var(--speed-fast) var(--ease-primary), color var(--speed-fast) var(--ease-primary);
}
.routine-pill:hover { color: var(--color-text-primary); }
.routine-pill.is-active {
  background: var(--color-accent);
  color: var(--color-on-accent);
  box-shadow: var(--shadow-primary-chip);
}
[data-theme="light"] .routine-pill.is-active { color: #FFFFFF; }

.timeblocks {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--color-bg-level-2);
  border: 1px solid var(--color-border-translucent);
  border-radius: var(--radius-12);
  padding: 0.85rem 0.85rem 0.85rem 0.6rem;
}
.timeblock {
  display: grid;
  grid-template-columns: 48px 6px 1fr;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0.55rem;
  border-radius: 6px;
  background: var(--color-bg-level-1);
  border: 1px solid var(--color-border-translucent);
}
.timeblock .t-time {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-quaternary);
  letter-spacing: 0.02em;
  text-align: right;
}
.timeblock .t-bar {
  width: 4px;
  height: 22px;
  border-radius: 2px;
  display: block;
}
.timeblock .t-name {
  font-size: 13px;
  color: var(--color-text-secondary);
  font-weight: 510;
}
.t-amber { background: var(--color-accent); }
.t-blue { background: var(--color-blue); }
.t-green { background: var(--color-green); }
.t-purple { background: var(--color-purple); }

/* ─── 04 — Per-task vs per-list timer pair ─── */

.timers-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
  height: 100%;
}
@media (max-width: 480px) {
  .timers-pair { grid-template-columns: 1fr; }
}
.timer-card {
  background: var(--color-bg-level-2);
  border: 1px solid var(--color-border-translucent);
  border-radius: var(--radius-12);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
}
.timer-card__label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  align-self: flex-start;
}
.timer-card .focus-ring {
  width: 140px;
  height: 140px;
}
.timer-card .focus-ring .label .time { font-size: 22px; }
.timer-card .focus-ring .label .task { font-size: 9.5px; }

/* ─── 06 — Year matrix (Horizons) ─── */

.year-matrix {
  background: var(--color-bg-level-2);
  border: 1px solid var(--color-border-translucent);
  border-radius: var(--radius-12);
  padding: 0.5rem 0.5rem 0.6rem;
  overflow: hidden;
}
.year-matrix__head,
.year-matrix__row {
  display: grid;
  grid-template-columns: 70px repeat(4, 1fr);
  gap: 4px;
}
.year-matrix__head {
  padding: 0.55rem 0.5rem 0.4rem;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--color-text-quaternary);
  text-transform: uppercase;
}
.year-matrix__head span:first-child {
  /* spacer above row labels */
}
.year-matrix__row {
  padding: 0.4rem 0.5rem;
  border-top: 1px solid var(--color-border-translucent);
  align-items: center;
}
.year-matrix .row-label {
  font-size: 12.5px;
  color: var(--color-text-secondary);
  font-weight: 590;
  letter-spacing: -0.005em;
}
.year-matrix .cell {
  height: 28px;
  background: var(--color-bg-level-3);
  border: 1px solid var(--color-border-translucent);
  border-radius: 5px;
  display: flex;
  align-items: center;
  padding: 0 4px;
  overflow: hidden;
}
.plan-bar {
  display: inline-flex;
  align-items: center;
  width: 100%;
  height: 18px;
  padding: 0 8px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 590;
  letter-spacing: -0.005em;
  font-family: var(--font-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.plan-bar--amber { background: var(--color-accent); color: #1A1108; }
.plan-bar--amber-dim { background: var(--color-accent-overlay-strong); color: var(--color-accent); border: 1px solid var(--color-accent-border-soft); }
.plan-bar--blue { background: rgba(96, 165, 250, 0.22); color: var(--color-blue); border: 1px solid rgba(96, 165, 250, 0.35); }
.plan-bar--green { background: rgba(79, 190, 122, 0.22); color: var(--color-green); border: 1px solid rgba(79, 190, 122, 0.35); }
.plan-bar--purple { background: rgba(167, 139, 250, 0.22); color: var(--color-purple); border: 1px solid rgba(167, 139, 250, 0.35); }
[data-theme="light"] .plan-bar--amber { color: #FFFFFF; }

@media (max-width: 540px) {
  .year-matrix__head,
  .year-matrix__row {
    grid-template-columns: 60px repeat(4, 1fr);
    font-size: 10.5px;
  }
  .plan-bar { font-size: 9.5px; padding: 0 5px; }
}

/* ─── Screenshot frames (Linear-style) ───
   Drop a real PNG into mattersweb/homepage/assets/screenshots/, then
   swap the corresponding HTML mock with:
     <div class="screenshot-frame screenshot-frame--ios">
       <img src="assets/screenshots/<name>.png" alt="" />
     </div>
   The frame applies the device chrome (rounded corners, inner highlight,
   shadow) and the parent .feature-row-vis already provides padding +
   the section gradient. For the hero, use the .screenshot-frame--hero
   variant with a wider aspect ratio. */

.screenshot-frame {
  position: relative;
  border-radius: var(--radius-16);
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px var(--color-border-translucent-strong),
    0 24px 48px -16px rgba(0, 0, 0, 0.55),
    0 4px 12px -2px rgba(0, 0, 0, 0.30);
  background: var(--color-bg-level-1);
}

.screenshot-frame img,
.screenshot-frame video {
  display: block;
  width: 100%;
  height: auto;
}

/* iOS framing — render the portrait screenshot inside a modern iPhone: a thin
   black bezel around the screen, a titanium edge rail, and a soft drop shadow.
   The capture already includes the status bar + Dynamic Island, so no notch is
   drawn. The bezel is dark by default and light-adapted under
   [data-theme="light"] (see below) so it melts into whichever canvas it's on,
   reading as a physical phone, not a UI panel. Corners use proportional radii
   (X% / Y%) so the bezel stays even at any size. */
.screenshot-frame--ios {
  box-sizing: border-box;
  margin-inline: auto;
  max-width: 300px;
  padding: 0.9%;                     /* the black bezel around the screen (very thin) */
  background: #0b0b0d;               /* screen surround */
  border-radius: 15.5% / 7.1%;       /* iPhone-proportional body corners */
  box-shadow:
    0 0 0 1px #34343a,               /* single thin titanium rail */
    0 26px 56px -18px rgba(0, 0, 0, 0.55),
    0 10px 24px -8px rgba(0, 0, 0, 0.42);
}

.screenshot-frame--ios img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14.5% / 6.7%;       /* screen corners, just inside the thin bezel */
  background: #000;
}

/* Light theme: mirror the dark treatment — there the near-black bezel melts
   into the dark canvas and the phone is defined only by a thin edge rail + a
   soft shadow. Here the bezel matches the off-white canvas (light "silver"
   device), the rail flips to a subtle dark line, and the shadow softens, so
   the phone floats cleanly instead of reading as a heavy black frame. */
[data-theme="light"] .screenshot-frame--ios {
  background: #f2f2f2;               /* ≈ canvas, so the bezel melts away */
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.16),   /* thin edge rail (dark analog of #34343a) */
    0 26px 56px -18px rgba(0, 0, 0, 0.20),
    0 10px 24px -8px rgba(0, 0, 0, 0.14);
}
[data-theme="light"] .screenshot-frame--ios img {
  background: #fff;                  /* screen surround behind the rounded corners */
}

/* macOS-specific framing — landscape, with subtle window chrome via
   inset shadow (the screenshot itself usually includes the window). */
.screenshot-frame--mac {
  aspect-ratio: 16 / 10;
  /* Background-removed window capture — no card fill or shadow behind it. */
  background: none;
  box-shadow: none;
}

/* Hero variant — a wider aspect and a more dominant shadow so a hero
   screenshot reads as the focal element of the page. */
.screenshot-frame--hero {
  aspect-ratio: auto;
  border-radius: var(--radius-24);
  box-shadow:
    inset 0 0 0 1px var(--color-border-translucent-strong),
    0 40px 80px -24px rgba(0, 0, 0, 0.55),
    0 8px 24px -4px rgba(0, 0, 0, 0.30);
}

/* Ambient blue bloom behind any screenshot frame — Linear's signature
   "lit-from-within" treatment. Wrap the frame in .screenshot-bloom and
   the gradient picks up the brand color from the canvas around it. */
.screenshot-bloom {
  position: relative;
  isolation: isolate;
}
/* No ambient backdrop behind screenshots — the images carry their own
   drop-shadow, and the tinted glow read as a "blueish background". */
.screenshot-bloom::before { content: none; }

/* Real product screenshots, Things-style.
   .screenshot-fragment = a tight interior crop (one column, one card) with
   no window chrome — the CSS supplies the floating-card treatment.
   .screenshot-window = a full window capture whose macOS shadow is baked
   into the PNG's alpha — no extra chrome, just width. */
.screenshot-fragment {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  margin: 0 auto;
  /* Background-removed PNGs that float on the page — no fill, border, or
     shadow behind them. */
}
.screenshot-window {
  display: block;
  width: 100%;
  height: auto;
}

/* Pair layout for two iOS screenshots side by side (used in #focus). */
.screenshot-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 540px) {
  .screenshot-pair { grid-template-columns: 1fr; max-width: 280px; margin-inline: auto; }
}

/* ─── Pulse animation for hero accents ─── */

@keyframes pulse-soft {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}
.pulse-soft { animation: pulse-soft 2.4s var(--ease-primary) infinite; }

@keyframes drift-up {
  0% { transform: translateY(8px); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translateY(-12px); opacity: 0; }
}

/* ════════════════════════════════════════════════════════════════
   New-section mocks (June 2026 "meaty" refresh):
   task types & decision capture, day-matrix gaps, focus-list nudges,
   week journal, inline-habit timeline rows, founder note.
   All token-based; mirrors the .rolling-mock / .year-matrix family.
   ════════════════════════════════════════════════════════════════ */

/* ─── 02 Task types: list of five natures + decision capture card ─── */

.types-mock {
  background: var(--color-bg-level-2);
  border: 1px solid var(--color-border-translucent);
  border-radius: var(--radius-12);
  padding: 1rem;
}
.types-mock__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.75rem;
}
.types-mock__title {
  font-size: 14px;
  font-weight: 590;
  color: var(--color-text-primary);
}
.types-mock__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-quaternary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Type glyph replaces the checkbox square for non-standard natures.
   Same 16px footprint as .mini-row .check so rows stay aligned. */
.type-glyph {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  color: var(--color-accent);
}
.type-glyph--decision { font-size: 12px; }
.type-glyph--habit {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 590;
  border: 1px solid var(--color-accent-border-soft);
  border-radius: 4px;
  color: var(--color-accent);
}

/* Decision capture card — what the completion sheet leaves behind */
.decision-card {
  margin-top: 0.85rem;
  background: var(--color-bg-level-3);
  border: 1px solid var(--color-border-translucent-strong);
  border-radius: 10px;
  padding: 0.8rem 0.9rem;
}
.decision-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-quaternary);
  margin-bottom: 0.5rem;
}
.decision-card__outcome {
  font-size: 13.5px;
  font-weight: 590;
  color: var(--color-text-primary);
  margin-bottom: 0.3rem;
}
.decision-card__why {
  margin: 0 0 0.5rem;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-text-tertiary);
}
.decision-card__date {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-quaternary);
}

/* ─── 03 Plan: day-zoom matrix with visible gaps ─── */

.day-matrix {
  margin-top: 0.85rem;
  background: var(--color-bg-level-2);
  border: 1px solid var(--color-border-translucent);
  border-radius: var(--radius-12);
  padding: 0.5rem 0.5rem 0.6rem;
  overflow: hidden;
}
.day-matrix__head,
.day-matrix__row {
  display: grid;
  grid-template-columns: 70px repeat(5, 1fr);
  gap: 4px;
}
.day-matrix__head {
  padding: 0.45rem 0.5rem 0.35rem;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--color-text-quaternary);
  text-transform: uppercase;
}
.day-matrix__zoom { color: var(--color-accent); }
.day-matrix__row {
  padding: 0.35rem 0.5rem;
  border-top: 1px solid var(--color-border-translucent);
  align-items: center;
}
.day-matrix .row-label {
  font-size: 12.5px;
  color: var(--color-text-secondary);
  font-weight: 590;
  letter-spacing: -0.005em;
}
.dm-cell {
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-level-3);
  border: 1px solid var(--color-border-translucent);
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-tertiary);
}
.dm-cell--gap {
  background: transparent;
  border: 1px dashed var(--color-accent-border-soft);
  color: var(--color-accent);
}
.day-matrix__hint {
  margin: 0.55rem 0.5rem 0.1rem;
  font-size: 12px;
  color: var(--color-text-tertiary);
}

/* ─── 07 The day: inline habit rows on the timeline ─── */

.timeline-row .block.habit {
  border-left-color: var(--color-green);
  background: rgba(79, 190, 122, 0.10);
}

/* ─── 08 The week: journal card ─── */

.week-journal {
  background: var(--color-bg-level-2);
  border: 1px solid var(--color-border-translucent);
  border-radius: var(--radius-12);
  padding: 1rem;
}
.week-journal__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.6rem;
  font-size: 14px;
  font-weight: 590;
  color: var(--color-text-primary);
}
.week-journal__range {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  color: var(--color-text-quaternary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.week-journal__text {
  margin: 0 0 0.85rem;
  padding: 0.65rem 0.75rem;
  font-size: 13.5px;
  line-height: 1.55;
  font-style: italic;
  color: var(--color-text-secondary);
  background: var(--color-accent-overlay-weak);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 8px 8px 0;
}
.week-journal__next {
  margin-top: 0.85rem;
  padding-top: 0.7rem;
  border-top: 1px dashed var(--color-border-translucent-strong);
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  opacity: 0.65;
}
.week-journal__next-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-quaternary);
  flex-shrink: 0;
}
.week-journal__next-text {
  font-size: 12.5px;
  font-style: italic;
  color: var(--color-text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── Why Matters exists: founder note ─── */

.founder-note {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
}
.founder-note p {
  margin: 0 0 1.1rem;
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-text-tertiary);
  text-align: left;
}
.founder-note .eyebrow { margin-inline: auto; }
.founder-note .founder-note__sig {
  font-family: "Explora", cursive;   /* handwritten sign-off */
  /* Stays on a single row: 26px on desktop (where the sheet is wide), scaling
     down on narrow screens so it never wraps to a second line. */
  font-size: clamp(20px, 5.5vw, 32px);
  white-space: nowrap;
  font-weight: 400;
  -webkit-text-stroke: 0.6px currentColor;
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--color-text-secondary);
  text-align: center;
  margin-top: 0.4rem;
}

/* The opening line reads a touch larger than the body — the only emphasis in
   the letter (no heading, no pulled-out beats, no divider; just an even run of
   paragraphs on the continuous canvas). */
.founder-note .founder-note__lede {
  max-width: 30rem;
  margin: 0.3rem auto 2.1rem;
  text-align: center;
  font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem);
  line-height: 1.5;
  letter-spacing: -0.015em;
  color: var(--color-text-secondary);
}

/* ── "Why Matters exists" as a letter on paper ───────────────────────────────
   A warm sheet that lifts off the canvas at a hand-placed tilt, with faint fold
   creases and the handwritten sign-off. Carries its own paper palette (like the
   app mocks) so the ink reads on both site themes. Motion-safe (no animation). */
#why .founder-note {
  /* Dark theme: a warm, aged sheet of paper resting on the dark desk — toned
     down from bright ivory so it reads as real paper, not a glowing card. */
  --paper-bg: #cbbd9b;
  --paper-bg-edge: #b6a884;
  --paper-ink: #342a0c;
  --paper-sig: #3a2c02;
  --paper-stamp: #9c8c64;
  --paper-ink-muted: #4d4220;
  --paper-line: rgba(120, 90, 45, 0.18);
  --paper-sheen: rgba(255, 248, 230, 0.4);
  position: relative;
  isolation: isolate;          /* stacking context for the grain (no tilt now) */
  max-width: none;             /* fills the .why-letter wrapper */
  text-align: left;
  padding: clamp(2.6rem, 5vw, 4rem) clamp(2.1rem, 5.5vw, 4.75rem);
  border-radius: 8px;
  /* Paper colour: lit softly from above, warming + darkening strongly toward
     every edge and all four corners (an aged-paper vignette) so it has body. */
  background:
    radial-gradient(150% 105% at 50% -10%, var(--paper-sheen), transparent 46%),
    radial-gradient(135% 140% at 50% 135%, var(--paper-bg-edge), transparent 50%),
    radial-gradient(120% 150% at 100% 100%, var(--paper-bg-edge), transparent 48%),
    radial-gradient(120% 150% at 0% 100%, var(--paper-bg-edge), transparent 48%),
    radial-gradient(120% 150% at 100% 0%, var(--paper-bg-edge), transparent 46%),
    radial-gradient(120% 150% at 0% 0%, var(--paper-bg-edge), transparent 46%),
    radial-gradient(130% 120% at 50% 50%, transparent 54%, var(--paper-bg-edge) 100%),
    var(--paper-bg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(90, 65, 30, 0.18),
    inset 0 0 70px rgba(120, 90, 45, 0.1),
    /* Tight dark contact line — just enough to ground the base on the desk. */
    0 2px 5px rgba(0, 0, 0, 0.55),
    /* Elevation reads as WARM LIGHT the bright sheet spills onto the dark desk
       (a black shadow is invisible here), biased downward + outward. */
    0 16px 34px -8px rgba(214, 198, 162, 0.16),
    0 34px 60px -16px rgba(214, 198, 162, 0.12),
    0 60px 104px -30px rgba(214, 198, 162, 0.1),
    0 90px 150px -50px rgba(214, 198, 162, 0.07);
}
[data-theme="light"] #why .founder-note {
  --paper-bg: #fbf7ee;
  --paper-bg-edge: #f4eede;
  --paper-ink: #3f3110;
  --paper-sig: #402f04;
  --paper-stamp: #d4c7a2;
  --paper-ink-muted: #61563a;
  --paper-line: rgba(150, 95, 40, 0.16);
  --paper-sheen: rgba(255, 255, 253, 0.88);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -1px 0 rgba(120, 90, 45, 0.08),
    inset 0 0 60px rgba(150, 110, 50, 0.07),
    0 2px 4px rgba(70, 52, 22, 0.08),
    0 18px 36px -10px rgba(70, 52, 22, 0.16),
    0 52px 96px -36px rgba(70, 52, 22, 0.26);
}
/* Subtle paper grain — a fractal-noise overlay sitting between the paper colour
   and the ink (z-index:-1 works because `isolation: isolate` on the sheet makes
   it a stacking context). Replaces the old fold lines, which read as seams. */
#why .founder-note::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.54;
  mix-blend-mode: multiply;
}
[data-theme="light"] #why .founder-note::before { opacity: 0.46; }
#why .founder-note .founder-note__lede,
#why .founder-note .founder-note__story p:not(.founder-note__sig) {
  font-family: "Spectral", Georgia, "Times New Roman", serif;
}
#why .founder-note .founder-note__story p:not(.founder-note__sig) {
  font-size: 17px;
  line-height: 1.72;
}
#why .founder-note .founder-note__lede {
  letter-spacing: -0.005em;
}
/* Ink on the page: the lede reads as full-strength ink, the rest as the softer
   body ink. */
#why .founder-note .founder-note__lede { color: var(--paper-ink); }
#why .founder-note p { color: var(--paper-ink-muted); }
#why .founder-note .founder-note__sig { color: var(--paper-sig, var(--paper-ink)); text-align: left; }
/* A faded ink "stamp" of the Matters mark, centered at the foot of the letter. */
#why .founder-note .founder-note__stamp {
  width: clamp(26px, 5.5vw, 36px);
  margin: clamp(2rem, 5vw, 3rem) auto clamp(-1.4rem, -3vw, -2.2rem);
  /* Debossed into the sheet: the mark sits a hair darker than the paper, with a
     dark fringe along the top edge and a light fringe along the bottom so it
     reads as pressed in (light from above). */
  color: var(--paper-stamp);
  filter:
    drop-shadow(0 -0.7px 0.4px rgba(45, 31, 10, 0.55))
    drop-shadow(0 0.9px 0.5px rgba(255, 251, 236, 0.6));
}
#why .founder-note .founder-note__stamp svg { display: block; width: 100%; height: auto; }
/* The eyebrow sits ABOVE the paper, on the canvas, CENTERED over the sheet; the
   letter's lede and signature stay left-aligned inside it. */
.why-letter { max-width: 820px; margin-inline: auto; text-align: center; }
.why-letter > .eyebrow { margin: 0 0 clamp(0.9rem, 2vw, 1.4rem); }
/* Recolor the eyebrow from the blue brand accent to warm paper tones so the
   label reads as part of the letter below it (canvas-side, both themes). */
#why .eyebrow.eyebrow--filled {
  color: #d8c9a6;
  background: rgba(203, 189, 155, 0.1);
  border-color: rgba(203, 189, 155, 0.26);
}
[data-theme="light"] #why .eyebrow.eyebrow--filled {
  color: #8a6a3a;
  background: rgba(150, 110, 50, 0.08);
  border-color: rgba(150, 95, 40, 0.22);
}
#why .founder-note .founder-note__lede { text-align: left; max-width: 40rem; margin-inline: 0; }

/* ── Privacy: a padlock that locks (tap to replay) beside a points list ──────
   A two-column composition instead of a card grid, so the section reads
   differently from its neighbours. All motion is reduced-motion gated. */
.privacy-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  margin-top: clamp(0.75rem, 2vw, 1.75rem);
}
.privacy-lock { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; }
.lock {
  display: block;
  width: clamp(186px, 20vw, 244px);
  padding: clamp(0.3rem, 1vw, 0.55rem);
  /* The lock SVG carries transparent headroom above the shackle; a negative
     top margin absorbs it (less gap above the lock) and nudges it up — more so
     on desktop, where the lock is larger. */
  margin-top: clamp(-4.5rem, -7vw, -2.75rem);
  background: none;
  border: 0;
  border-radius: 24px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.lock svg { display: block; width: 100%; height: auto; overflow: visible; }
.lock:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }

/* Filled glossy padlock (imported from the "Matters Lock Animation" design).
   Each transform layer isolates one motion so they compose cleanly. It plays
   ONCE on scroll-in / tap (via .lock--play) rather than looping — calmer in the
   band — and the idle float is dropped. The cast shadow's tint is theme-aware. */
.lk-float   { transform-box: view-box; transform-origin: 202px 320px; }
.lk-drop    { transform-box: view-box; transform-origin: 202px 320px; }
.lk-tilt    { transform-box: view-box; transform-origin: 202px 313px; transform: rotate(-7deg); }
.lk-shackle { transform-box: view-box; transform-origin: 152px 262px; }   /* hinged on the LEFT leg */
.lk-body    { transform-box: view-box; transform-origin: 202px 388px; }
.lk-shadow  {
  transform-box: view-box;
  transform-origin: 202px 432px;
  opacity: 0.22;                         /* resting cast-shadow */
  fill: #5A5EC8;                         /* dark theme (base) */
}
[data-theme="light"] .lk-shadow { fill: #8E91E8; }

.privacy-lock__cap {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--color-text-tertiary);
}

@media (prefers-reduced-motion: no-preference) {
  .lock--play .lk-shackle { animation: lk-unlock 4.2s cubic-bezier(0.5, 0.05, 0.4, 1) both; }
  .lock--play .lk-drop    { animation: lk-impact 4.2s cubic-bezier(0.5, 0.05, 0.4, 1) both; }
  .lock--play .lk-body    { animation: lk-squash 4.2s cubic-bezier(0.5, 0.05, 0.4, 1) both; }
  .lock--play .lk-shadow  { animation: lk-shadow 4.2s cubic-bezier(0.5, 0.05, 0.4, 1) both; }
}

/* the shackle lifts up-left to unlock, holds, then snaps shut past closed */
@keyframes lk-unlock {
  0%   { transform: rotate(0deg); }
  8%   { transform: rotate(0deg); }
  20%  { transform: rotate(-42deg); }
  52%  { transform: rotate(-42deg); }
  61%  { transform: rotate(4deg); }    /* snaps past closed */
  70%  { transform: rotate(-2deg); }
  78%  { transform: rotate(0.5deg); }
  84%  { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}
/* the whole lock slams down hard the instant it locks, then eases back up */
@keyframes lk-impact {
  0%, 53% { transform: translateY(0); }
  55%  { transform: translateY(-3px); animation-timing-function: cubic-bezier(0.7, 0, 0.85, 0.1); }
  62%  { transform: translateY(18px); animation-timing-function: cubic-bezier(0.16, 0.8, 0.3, 1); }
  100% { transform: translateY(0); }
}
/* body squash-and-stretch on the slam (~62%) */
@keyframes lk-squash {
  0%, 55% { transform: scale(1, 1); }
  62%  { transform: scale(1.09, 0.88); }
  72%  { transform: scale(0.97, 1.04); }
  80%  { transform: scale(1.01, 0.99); }
  88%, 100% { transform: scale(1, 1); }
}
/* the cast shadow snaps wide + dark on the slam, then settles */
@keyframes lk-shadow {
  0%, 53% { transform: scaleX(0.9);  opacity: 0.20; }
  62%     { transform: scaleX(1.12); opacity: 0.34; }
  100%    { transform: scaleX(0.9);  opacity: 0.20; }
}
.privacy-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(1.4rem, 3vw, 2.1rem);
}
.privacy-points li { display: flex; gap: 1.1rem; align-items: flex-start; }
.privacy-points__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  color: var(--color-accent);
  background: var(--color-accent-overlay-weak);
}
.privacy-points__icon svg { width: 20px; height: 20px; }
.privacy-points h3 {
  margin: 0 0 0.3rem;
  font-size: 1.05rem;
  font-weight: 560;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}
.privacy-points p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text-tertiary);
  max-width: 42ch;
}
@media (max-width: 760px) {
  .privacy-layout { grid-template-columns: 1fr; gap: clamp(2rem, 6vw, 2.75rem); }
  .privacy-lock { order: -1; }
}

/* ── Ways people use Matters: a chat thread of concrete use cases ─────
   Alternating sides + avatars (a conversation, not a card grid). Bubbles pop in
   on view, the dots keep bouncing. Motion gated; bubbles stay visible even if
   the reveal never fires. */
.chat {
  max-width: 760px;
  margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2.5vw, 1.5rem);
}
.chat-msg { display: flex; align-items: flex-end; gap: 0.7rem; max-width: 84%; }
.chat-msg--in { align-self: flex-start; }
.chat-msg--out { align-self: flex-end; flex-direction: row-reverse; }
.chat-avatar {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--av, var(--color-accent));
}
.chat--use-cases .chat-avatar {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
}
.chat-bubble {
  position: relative;
  padding: 0.85rem 1.15rem;
  border-radius: 18px;
  background: var(--color-bg-secondary);
  box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.10), inset 0 0 0 1px var(--color-border-translucent);
}
.chat-msg--in .chat-bubble { border-bottom-left-radius: 5px; }
.chat-msg--out .chat-bubble { border-bottom-right-radius: 5px; }
.chat-bubble p { margin: 0 0 0.5rem; font-size: 0.97rem; line-height: 1.55; color: var(--color-text-secondary); }
.chat-author { font-size: 0.8rem; color: var(--color-text-tertiary); }
.chat-author b { color: var(--color-text-primary); font-weight: 600; }
.chat-bubble--typing { display: flex; gap: 5px; padding: 1rem 1.1rem; }
.chat-bubble--typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--color-text-quaternary); }
@media (prefers-reduced-motion: no-preference) {
  .chat-bubble--typing span { animation: chat-typing 1.3s ease-in-out infinite; }
  .chat-bubble--typing span:nth-child(2) { animation-delay: 0.18s; }
  .chat-bubble--typing span:nth-child(3) { animation-delay: 0.36s; }
  .chat--seen .chat-msg { animation: chat-pop 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
  .chat--seen .chat-msg:nth-child(2) { animation-delay: 0.09s; }
  .chat--seen .chat-msg:nth-child(3) { animation-delay: 0.18s; }
  .chat--seen .chat-msg:nth-child(4) { animation-delay: 0.3s; }
}
@keyframes chat-typing {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
  30% { transform: translateY(-5px); opacity: 1; }
}
@keyframes chat-pop {
  0% { opacity: 0; transform: translateY(14px) scale(0.97); }
  100% { opacity: 1; transform: none; }
}
@media (max-width: 560px) {
  .chat-msg { max-width: 92%; }
  .chat-avatar { width: 34px; height: 34px; font-size: 12px; }
}

/* ────────────────────────────────────────────────────────────────────────
   "The familiar, done well" (#essentials) — Focus timer + Kanban, kept off the
   numbered spine but shown with their screenshots: two image+text rows, sized
   smaller than the differentiator pillars and with no serif number, so they
   read as secondary. Alternating sides; stacks (image on top) on narrow screens.
   ──────────────────────────────────────────────────────────────────────── */
.essentials-list {
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 6vw, 5rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.essential {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.essential--reverse .essential__text { order: 2; }
.essential__title {
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  font-weight: 510;
  letter-spacing: -0.02em;
  line-height: 1.16;
  margin: 0.55rem 0 0.85rem;
  color: var(--color-text-primary);
}
.essential__lead {
  font-size: clamp(1rem, 1.3vw, 1.0625rem);
  line-height: 1.65;
  color: var(--color-text-tertiary);
  margin: 0;
}
.essential__vis { min-width: 0; }
@media (max-width: 760px) {
  .essential { grid-template-columns: 1fr; gap: clamp(1.25rem, 4vw, 2rem); }
  .essential__text { order: 0; }
  .essential--reverse .essential__text { order: 0; }
  .essential__vis { order: -1; }   /* image on top when stacked */
}

/* ────────────────────────────────────────────────────────────────────────
   "Everything else" (#more) — the Apple-keynote feature wall: the smaller
   things as a calm, hairline-ruled grid of title + one quiet line. Grid cells
   stretch to a shared row height so the rules line up across columns.
   ──────────────────────────────────────────────────────────────────────── */
.more-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  column-gap: clamp(1.75rem, 3.5vw, 3.75rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--color-border-translucent-strong);
}
.more-item {
  padding: clamp(1.15rem, 2vw, 1.55rem) 0;
  border-bottom: 1px solid var(--color-border-translucent);
}
.more-item__title {
  margin: 0 0 0.3rem;
  font-size: 1.0625rem;
  font-weight: 540;
  letter-spacing: -0.014em;
  line-height: 1.25;
  color: var(--color-text-primary);
}
.more-item__title::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.6rem;
  border-radius: 2px;
  background: var(--color-accent);
  transform: translateY(-0.1em);
}
.more-item__blurb {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--color-text-tertiary);
}
@media (max-width: 560px) {
  /* Phones: a tight 3-up wall — smaller type keeps the titles + lines legible. */
  .more-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(0.7rem, 2.5vw, 1.1rem);
  }
  .more-item { padding: 0.7rem 0; }
  .more-item__title {
    font-size: 0.78rem;
    line-height: 1.2;
    margin-bottom: 0.2rem;
  }
  .more-item__title::before { width: 0.36rem; height: 0.36rem; margin-right: 0.3rem; }
  .more-item__blurb { font-size: 0.7rem; line-height: 1.4; }
}

@media (max-width: 540px) {
  .day-matrix__head,
  .day-matrix__row {
    grid-template-columns: 60px repeat(5, 1fr);
  }
}

/* ════════════════════════════════════════════════════════════════
   Tasteful micro-animations. Every one is gated behind
   prefers-reduced-motion and tuned to read as "the product is alive",
   not "the page is moving". Durations are long, deltas are small.
   ════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference) {

  /* Focus rings (SVG): the stroke slowly drains, like a real session
     ticking down. Each card gets its own range + duration so the two
     rings never move in lockstep. dasharray is 263.9. */
  .timers-pair .timer-card:nth-child(1) .focus-ring .fill {
    animation: ring-drain-a 38s linear infinite alternate;
  }
  .timers-pair .timer-card:nth-child(2) .focus-ring .fill {
    animation: ring-drain-b 47s linear infinite alternate;
  }

  /* Rolling hint (SVG): the rotation arrow turns one full revolution
     every few seconds, then rests — the wheel turning, occasionally. */
  .rolling-mock__hint svg {
    animation: roll-turn 7s var(--ease-primary) infinite;
  }

  /* Plan day-zoom: the empty "gap" cells breathe softly, staggered per
     row, drawing the eye to the point of the mock — visible gaps. */
  .dm-cell--gap {
    animation: gap-breathe 3.8s ease-in-out infinite;
  }
  .day-matrix__row:nth-child(3) .dm-cell--gap { animation-delay: 1.3s; }
  .day-matrix__row:nth-child(4) .dm-cell--gap { animation-delay: 2.6s; }

  /* Week journal: a quiet insertion caret at the end of the line —
     "you write this part yourself". */
  .week-journal__text::after {
    content: "";
    display: inline-block;
    width: 1.5px;
    height: 0.95em;
    margin-left: 3px;
    vertical-align: -0.12em;
    background: var(--color-accent);
    animation: caret-blink 1.15s step-end infinite;
  }
}

@keyframes ring-drain-a {
  from { stroke-dashoffset: 78; }
  to   { stroke-dashoffset: 132; }
}
@keyframes ring-drain-b {
  from { stroke-dashoffset: 158; }
  to   { stroke-dashoffset: 206; }
}
@keyframes roll-turn {
  0%, 70%  { transform: rotate(0deg); }
  88%, 100% { transform: rotate(360deg); }
}
@keyframes gap-breathe {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}
@keyframes caret-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

/* ════════════════════════════════════════════════════════════════
   .app-frame — faithful Matters-app skin for the UI mocks.

   The real app (see ../Matters/Matters/DesignSystem.swift) is dark by
   default with a NEUTRAL gray ramp and a desaturated blue accent:

     canvas  #0D0D0D   (appBackground, white 0.05)
     column  #111111   (columnBackground, white 0.065)
     plan-col #141414  (appPlanColumnFill)
     plan-card #191919 (appPlanCardFill / kanbanCardSurface)
     raised  #1F1F1F   (timeline cells)
     block   #262626   (timeline raised areas)
     titles  #BCBCBC   (todoTitle, white 0.74)
     accent  #3685D6   (appAccent — desaturated blue, NOT system blue)
     habit green #57A880 · weekday amber #D99E47

   The frame pins these as LOCAL values for the same custom properties
   the mocks already consume — so every mock renders as a fixed dark
   "screenshot" of the real app, independent of the site theme.
   ════════════════════════════════════════════════════════════════ */

.app-frame {
  /* raw app palette */
  --app-canvas: #0D0D0D;
  --app-column: #111111;
  --app-plan-col: #141414;
  --app-plan-card: #191919;
  --app-raised: #1F1F1F;
  --app-block: #262626;
  --app-accent: #3685D6;
  --app-green: #57A880;
  --app-amber: #D99E47;
  --app-purple: #8F7DD8;

  /* re-point the site tokens the mocks consume */
  --color-bg-level-0: var(--app-canvas);
  --color-bg-level-2: var(--app-column);
  --color-bg-level-3: var(--app-plan-card);
  --color-bg-secondary: var(--app-raised);
  --color-bg-tertiary: var(--app-block);
  --color-bg-translucent: rgba(255, 255, 255, 0.05);
  --color-surface-card: var(--app-plan-card);
  --color-border-translucent: rgba(255, 255, 255, 0.065);
  --color-border-translucent-strong: rgba(255, 255, 255, 0.12);
  --color-border-primary: #222222;
  --color-border-secondary: #2E2E2E;
  --color-border-tertiary: #3A3A3A;
  --color-text-primary: #E8E8E8;
  --color-text-secondary: #BCBCBC;
  --color-text-tertiary: #8C8C8C;
  --color-text-quaternary: #5E5E5E;
  --color-accent: var(--app-accent);
  --color-accent-hover: #4D95DE;
  --color-accent-overlay-weak: rgba(54, 133, 214, 0.09);
  --color-accent-overlay-soft: rgba(54, 133, 214, 0.15);
  --color-accent-overlay-strong: rgba(54, 133, 214, 0.28);
  --color-accent-border-soft: rgba(54, 133, 214, 0.38);
  --color-accent-border-medium: rgba(54, 133, 214, 0.52);
  --color-green: var(--app-green);
  --color-purple: var(--app-purple);
  --color-blue: var(--app-accent);

  /* the app is set in the system font, not Inter */
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, sans-serif;
  color-scheme: dark;

  /* window/panel chrome — reads as a real floating app surface on the
     light site canvas */
  background: var(--app-column);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.4),
    0 18px 48px rgba(10, 8, 6, 0.28),
    0 4px 14px rgba(10, 8, 6, 0.18);
}

/* Panel variant: a canvas-colored wrapper that groups sibling mocks
   (zoom pills + matrices, routine pills + timeline) into one window. */
.app-frame--panel {
  background: var(--app-canvas);
  border-radius: 14px;
  padding: 0.85rem;
}

/* ── Row anatomy: rounded-square checkboxes (the app's `app` /
   `checkmark.app.fill` glyph family), type icon between checkbox and
   title, gray chip metadata on the right ── */

.app-frame .mini-list .mini-row .check {
  width: 13px;
  height: 13px;
  border-radius: 4px;
  border-width: 1.5px;
  position: relative;
}
.app-frame .mini-list .mini-row.done .check::after {
  content: "";
  position: absolute;
  left: 3.5px;
  top: 0.5px;
  width: 3.5px;
  height: 7px;
  border: solid #FFFFFF;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.app-frame .mini-list .mini-row .right {
  background: var(--app-raised);
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 1px 6px;
  border-radius: 4px;
  letter-spacing: 0.03em;
}

/* Type glyphs: monochrome secondary, like TodoTypeIcon — except the
   habit "H", which the app renders as a green rounded badge. */
.app-frame .type-glyph { color: var(--color-text-tertiary); }
.app-frame .type-glyph--habit {
  color: var(--app-green);
  border-color: rgba(87, 168, 128, 0.5);
}

/* ── Segmented pickers: the app's pill pickers are quiet gray chips,
   not accent-filled (see the Agenda Day | week | 2wks picker) ── */
.app-frame .routine-switch {
  background: var(--app-plan-col);
  border-color: rgba(255, 255, 255, 0.06);
}
.app-frame .routine-pill.is-active {
  background: #2A2A2A;
  color: #F0F0F0;
  box-shadow: none;
}
.app-frame .brief-mock__tabs span.is-active {
  background: #2A2A2A;
  color: #F0F0F0;
}

/* ── Plan bars: tuned to the app's list-color palette ── */
.app-frame .plan-bar--amber { background: var(--app-amber); color: #1A1108; }
.app-frame .plan-bar--amber-dim {
  background: rgba(217, 158, 71, 0.16);
  color: var(--app-amber);
  border: 1px solid rgba(217, 158, 71, 0.35);
}
.app-frame .plan-bar--blue {
  background: rgba(54, 133, 214, 0.20);
  color: #7AB1E4;
  border: 1px solid rgba(54, 133, 214, 0.38);
}
.app-frame .plan-bar--green {
  background: rgba(87, 168, 128, 0.18);
  color: #7CC4A0;
  border: 1px solid rgba(87, 168, 128, 0.38);
}
.app-frame .plan-bar--purple {
  background: rgba(143, 125, 216, 0.20);
  color: #AC9DE6;
  border: 1px solid rgba(143, 125, 216, 0.38);
}
.app-frame .year-matrix,
.app-frame .day-matrix {
  background: var(--app-plan-col);
  border-color: rgba(255, 255, 255, 0.05);
}
.app-frame .day-matrix__zoom { color: var(--app-accent); }

/* ── Day timeline: events blue (calendar), todos amber (the app's
   weekday-accent amber), habits green ── */
.app-frame .timeline-row .block.event {
  border-left-color: var(--app-accent);
  background: rgba(54, 133, 214, 0.12);
}
.app-frame .timeline-row .block.todo {
  border-left-color: var(--app-amber);
  background: rgba(217, 158, 71, 0.10);
}
.app-frame .timeline-row .block.habit {
  border-left-color: var(--app-green);
  background: rgba(87, 168, 128, 0.12);
}
.app-frame .week-strip .day.is-today,
.app-frame .week-strip .day.is-today .num { color: #FFFFFF; }

/* ── Week journal: blue week label (like "Week 23" in the app),
   neutral plan-card journal block with a thin blue intent bar ── */
.app-frame .week-journal__weeklabel { color: var(--app-accent); }
.app-frame .week-journal__text {
  background: var(--app-plan-card);
  border-left: 2px solid var(--app-accent);
  color: var(--color-text-secondary);
}

/* ── Decision card: kanban-card surface ── */
.app-frame .decision-card {
  background: var(--app-plan-card);
  border-color: rgba(255, 255, 255, 0.09);
}

/* Hint strips inside frames stay informational, tinted app-blue */
.app-frame .rolling-mock__hint {
  color: var(--color-text-tertiary);
}

/* ════════════════════════════════════════════════════════════════
   Interactive demo panels — the Plan zoom pills (#plan) and the
   routine pills (#routines) swap the visible panel, the way the real
   app's zoom / routine pickers do. Pills reuse .routine-switch /
   .routine-pill; the incoming panel crossfades in.

   The screenshot panels are decorative, but the Plan pills are real controls:
   keep them keyboard-reachable and outside aria-hidden containers.
   ════════════════════════════════════════════════════════════════ */
.switch-panels { position: relative; }
.switch-panel[hidden] { display: none; }
/* The day-matrix carries a top margin for its old stacked position;
   as a standalone panel it should sit flush under the pills. */
.switch-panel .day-matrix { margin-top: 0; }

@media (prefers-reduced-motion: no-preference) {
  /* Going from display:none → shown restarts this animation, so each
     pill press fades the new panel in. */
  .switch-panel:not([hidden]) {
    animation: panel-fade 0.34s var(--ease-primary);
  }
}
@keyframes panel-fade {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}

/* Plan demo — desktop screenshot above, Day/Week/Month segmented control
   below (Apple-style). Site chrome, not .app-frame: the screenshot carries
   its own window shadow; the control reuses .routine-switch, centered. */
.plan-demo { display: flex; flex-direction: column; }
.plan-demo .screenshot-window { pointer-events: none; }
/* Pull the zoom toggle up close to the window. The capture bakes ~8.5% of its
   height below the solid window as window shadow + transparent padding, so a
   negative margin tucks the toggle up near the real window edge (it only
   overlaps the faint shadow, invisible on the dark canvas). Scaled to the
   viewport and floored so it never crowds into the toolbar. */
.plan-switch {
  position: relative;
  z-index: 3;
  margin: clamp(-2.1rem, -2.5vw, -0.6rem) auto 0;
  gap: 8px;
  padding: 0.5rem;
}
.plan-switch .routine-pill { height: 42px; padding: 0 24px; font-size: 15px; font-weight: 560; }
/* Precision highlight — a task can be scheduled at any grain (month → week → day),
   as loose or as specific as the user wants. */
.plan-precision__cap {
  margin: clamp(0.95rem, 2vw, 1.35rem) 0 0;
  max-width: 54ch;
  color: var(--color-text-tertiary);
  font-size: 0.9rem;
  line-height: 1.5;
}
#plan .pillar__more { margin-top: clamp(3rem, 5.5vw, 4.5rem); }

.plan-horizon-moment {
  position: relative;
  z-index: 2;
  display: flex;
  gap: clamp(0.5rem, 1.1vw, 0.85rem);
  width: 100%;
  max-width: 100%;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: 0.5rem 0;
}
.plan-horizon-card {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: 150px;
  padding: 0.85rem 0.95rem;
  border-radius: 14px;
  border: 1px solid var(--color-border-translucent-strong);
  background: color-mix(in oklab, var(--color-surface-card) 88%, var(--color-accent));
  box-shadow:
    0 10px 24px -16px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  color: var(--color-text-primary);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.15;
  text-align: left;
}
.plan-horizon-card small {
  display: block;
  margin-bottom: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.plan-horizon-card span {
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}
/* Connecting line behind the cards (shows through the gaps). */
.plan-horizon-moment::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-accent-border-medium), transparent);
  transform: translateY(-50%);
}
/* Static wave offsets — compose with the floating "translate" animation below. */
.plan-horizon-card:nth-child(1) { transform: translateY(-2px); }
.plan-horizon-card:nth-child(2) { transform: translateY(5px); }
.plan-horizon-card:nth-child(3) { transform: translateY(-3px); }
.plan-horizon-card:nth-child(4) { transform: translateY(2px); }
@media (prefers-reduced-motion: no-preference) {
  .plan-horizon-card { animation: plan-horizon-float 5.8s var(--ease-primary) infinite; }
  .plan-horizon-card:nth-child(1) { animation-delay: 0s; }
  .plan-horizon-card:nth-child(2) { animation-delay: 0.45s; }
  .plan-horizon-card:nth-child(3) { animation-delay: 0.9s; }
  .plan-horizon-card:nth-child(4) { animation-delay: 1.35s; }
}
@keyframes plan-horizon-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -4px; }
}
@media (max-width: 640px) {
  .plan-horizon-moment {
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding: 0.5rem 14px 0.7rem;
    margin-inline: -14px;
    scrollbar-width: none;
  }
  .plan-horizon-moment::-webkit-scrollbar { display: none; }
  .plan-horizon-moment::before { display: none; }
  .plan-horizon-card {
    flex: 0 0 auto;
    min-width: 158px;
    scroll-snap-align: center;
  }
}

/* ════════════════════════════════════════════════════════════════
   Pixel-detailed macOS mockups — pure HTML/CSS "screenshots".

   These replace the three real PNG captures. Every mockup depicts the
   macOS app (not iOS) — the distinctive multi-column desktop is the
   marketing hero. Each renders a fixed DARK screenshot of the real
   Matters app, faithful to ../Matters/Matters/DesignSystem.swift:
     canvas #0D0D0D · column #111111 · card #191919 · titles #B3B3B3
     accent #3685D6 · habit green #57A880 · weekday amber #D99E47
   Palette is pinned by .app-frame (see that block above) so they look
   identical on both site themes — like a screenshot pasted onto the page.

     · .mac-window           — full window: sidebar + multi-column
       (#multi-column)
     · .mac-window--solo     — focus mode (⌘⇧F): title bar + one list
       (#rolling-lists, #brief), via .mw-solo / .mw-seg
   ════════════════════════════════════════════════════════════════ */

/* ── macOS focus window (single-column) ────────────────────────────
   The app's focus mode (⌘⇧F) / single-column layout: a title bar with
   traffic lights + one expanded list. Used for #rolling-lists and
   #brief so they read as the macOS app — not a phone. Shares the
   .mac-window chrome and the .mw-* row family defined below. */

.mac-window--solo .mw-solo {
  padding: 16px 18px 18px;
}
.mw-solo__head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mw-solo__sun { width: 19px; height: 19px; color: var(--app-amber); flex-shrink: 0; }
.mw-solo__sun svg { width: 100%; height: 100%; display: block; }
.mw-solo__title {
  font-size: 21px;
  font-weight: 690;
  letter-spacing: -0.022em;
  color: var(--color-text-primary);
}
/* subtle disclosure chevron — swaps which list the column shows
   (the app shows this, not a task-count number) */
.mw-solo__chev {
  width: 15px;
  height: 15px;
  color: var(--color-text-quaternary);
  flex-shrink: 0;
  margin-left: -1px;
}
.mw-solo__chev svg { width: 100%; height: 100%; display: block; }
.mw-solo__actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--color-text-quaternary);
}
.mw-solo__actions .ic { width: 15px; height: 15px; }
.mw-solo__actions .ic svg { width: 100%; height: 100%; display: block; }

/* List · Kanban · Brief segmented control (quiet gray, app-faithful) */
.mw-seg {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  margin-top: 13px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 9px;
}
.mw-seg span {
  font-size: 12.5px;
  font-weight: 510;
  padding: 4px 15px;
  border-radius: 7px;
  color: var(--color-text-tertiary);
}
.mw-seg .is-active {
  background: #2A2A2A;
  color: #F0F0F0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), inset 0 0 0 0.5px rgba(255, 255, 255, 0.06);
}
.mw-solo__caption {
  margin: 11px 0 0;
  font-size: 12px;
  color: var(--color-text-tertiary);
}

/* Solo rows sit a touch larger than the dense multi-column rows. */
.mw-solo__list { margin-top: 8px; }
.mw-solo__list .mw-row { padding: 8px 10px; gap: 11px; }
.mw-solo__list .mw-row + .mw-row {
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.05);
}
.mw-solo__list .mw-check { width: 16px; height: 16px; border-radius: 5px; margin-top: 1px; }
.mw-solo__list .mw-check.is-done::after { left: 5px; top: 2px; width: 4px; height: 8px; }
.mw-solo__list .mw-roll { width: 14px; height: 14px; margin-top: 2px; }
.mw-solo__list .mw-row__title { font-size: 14px; }
.mw-solo__list .mw-days { font-size: 11.5px; margin-top: 2px; }
.mw-solo__list .mw-days--next { color: var(--app-amber); }
.mw-solo__list .mw-sec { padding: 11px 10px 4px; }

/* ── Brief view (cards) — shown inside a focus window ──────────── */

.mw-brief {
  padding: 14px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.brief-card {
  background: rgba(255, 255, 255, 0.035);
  border: 0.5px solid rgba(255, 255, 255, 0.10);
  border-radius: 18px;
  padding: 12px 13px;
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.22);
}
.brief-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
}
.brief-card__head .ic {
  width: 14px;
  height: 14px;
  color: rgba(255, 255, 255, 0.45);
  flex-shrink: 0;
}
.brief-card__head .ic svg { width: 100%; height: 100%; display: block; }
.brief-card__title {
  font-size: 11px;
  font-weight: 690;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}
.brief-card__count {
  font-size: 11px;
  font-weight: 600;
  color: rgba(140, 140, 140, 0.55);
  font-variant-numeric: tabular-nums;
}
.brief-card__add {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  font-weight: 640;
  color: var(--app-accent);
  background: rgba(54, 133, 214, 0.12);
  border: 0.5px solid rgba(54, 133, 214, 0.24);
  border-radius: 6px;
  padding: 3px 8px;
}

/* Every text line sits in one column (gutter 14px icon + 8px gap = 22px),
   left-aligned with the section-header label. Section icons, action
   checkboxes and decision bulbs hang in that gutter. */
.brief-meeting__title,
.brief-meeting__meta,
.brief-meeting__body,
.brief-note,
.brief-note__date { margin-left: 22px; }

.brief-meeting__title {
  font-size: 13px;
  font-weight: 650;
  color: var(--color-text-primary);
  letter-spacing: -0.006em;
}
.brief-meeting__meta {
  font-size: 11px;
  color: var(--color-text-quaternary);
  margin-top: 3px;
}
.brief-meeting__body {
  font-size: 12px;
  line-height: 1.45;
  color: var(--color-text-tertiary);
  margin-top: 7px;
}
.brief-divider {
  height: 0.5px;
  background: rgba(255, 255, 255, 0.08);
  margin: 9px 0 6px;
}
.brief-action {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}
.brief-action__bulb,
.brief-dec__bulb {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--color-text-tertiary);
}
.brief-action__bulb svg,
.brief-dec__bulb svg { width: 100%; height: 100%; display: block; }
.brief-action__title {
  font-size: 12px;
  color: var(--color-text-secondary);
}
.brief-action__chip {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 640;
  color: var(--app-accent);
}

.brief-dec {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 0;
}
.brief-dec + .brief-dec {
  border-top: 0.5px solid rgba(255, 255, 255, 0.07);
}
.brief-dec__bulb { margin-top: 1px; }
.brief-dec__body { min-width: 0; flex: 1; }
.brief-dec__outcome {
  font-size: 12.5px;
  font-weight: 650;
  color: var(--color-text-primary);
  letter-spacing: -0.006em;
}
.brief-dec__why {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--color-text-tertiary);
  margin-top: 3px;
}
.brief-dec__date {
  font-size: 10.5px;
  color: var(--color-text-quaternary);
  margin-top: 4px;
}
.brief-badge {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 690;
  letter-spacing: 0.03em;
  padding: 2px 8px;
  border-radius: 999px;
}
.brief-badge--locked  { color: #7CC4A0; background: rgba(87, 168, 128, 0.16); }
.brief-badge--waiting { color: var(--app-amber); background: rgba(217, 158, 71, 0.16); }

.brief-note {
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-tertiary);
}
.brief-note__date {
  font-size: 10.5px;
  color: var(--color-text-quaternary);
  margin-bottom: 4px;
}

/* ── macOS multi-column window ─────────────────────────────────── */

.mac-window {
  --mw-side: 212px;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  background: var(--app-canvas);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.5),
    0 50px 90px -30px rgba(0, 0, 0, 0.6),
    0 16px 40px -12px rgba(0, 0, 0, 0.4);
  /* .app-frame supplies palette, font, color-scheme */
  border: 0;
}

/* Title bar with traffic lights */
.mw-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 14px;
  background: #0B0B0B;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.mw-lights { display: inline-flex; gap: 8px; }
.mw-lights i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: block;
}
.mw-lights i:nth-child(1) { background: #FF5F57; }
.mw-lights i:nth-child(2) { background: #FEBC2E; }
.mw-lights i:nth-child(3) { background: #28C840; }
.mw-bar__sidebtn {
  margin-left: 6px;
  width: 16px;
  height: 16px;
  color: var(--color-text-quaternary);
}
.mw-bar__sidebtn svg { width: 100%; height: 100%; display: block; }
.mw-bar__title {
  margin: 0 auto;
  font-size: 12px;
  font-weight: 560;
  color: var(--color-text-quaternary);
  letter-spacing: 0.01em;
  /* offset for the lights so the title is visually centred */
  padding-right: 52px;
}

.mw-body {
  display: grid;
  grid-template-columns: var(--mw-side) 1fr;
  min-height: 470px;
}

/* Sidebar */
.mw-side {
  background: #0A0A0A;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  padding: 8px 8px 10px;
  display: flex;
  flex-direction: column;
}
.mw-side__label {
  font-size: 10px;
  font-weight: 690;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-quaternary);
  padding: 12px 9px 4px;
}
.mw-side__row {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 29px;
  padding: 0 9px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 460;
  color: var(--color-text-secondary);
}
.mw-side__row .ic {
  width: 14px;
  height: 14px;
  color: var(--color-text-tertiary);
  flex-shrink: 0;
  display: inline-flex;
}
.mw-side__row .ic svg { width: 100%; height: 100%; display: block; }
.mw-side__row .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin: 0 3px;
}
.mw-side__row .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mw-side__row .pin {
  width: 11px;
  height: 11px;
  margin-left: 5px;
  color: var(--color-text-quaternary);
  flex-shrink: 0;
}
.mw-side__row .pin svg { width: 100%; height: 100%; display: block; }
.mw-side__row .ct {
  margin-left: auto;
  font-size: 11px;
  color: var(--color-text-quaternary);
  font-variant-numeric: tabular-nums;
}
.mw-side__row.is-active {
  background: rgba(255, 255, 255, 0.07);
  color: var(--color-text-primary);
}
.mw-side__row.is-pinned { color: var(--color-text-primary); }
.mw-side__foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 10px 2px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  color: var(--color-text-quaternary);
}
.mw-side__foot .ic { width: 14px; height: 14px; }
.mw-side__foot .ic svg { width: 100%; height: 100%; display: block; }
.mw-side__foot .cap {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.03em;
  color: var(--color-text-quaternary);
}

/* Columns area */
.mw-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
}
.mw-col {
  background: #111;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}
.mw-col__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 12px 9px;
}
.mw-col__sun { width: 16px; height: 16px; color: var(--app-amber); flex-shrink: 0; }
.mw-col__sun svg { width: 100%; height: 100%; display: block; }
.mw-col__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.mw-col__title {
  font-size: 14.5px;
  font-weight: 640;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.mw-col__pin { width: 11px; height: 11px; color: var(--color-text-tertiary); flex-shrink: 0; }
.mw-col__pin svg { width: 100%; height: 100%; display: block; }
/* subtle disclosure chevron to swap the column's list (no task count) */
.mw-col__chev {
  width: 13px;
  height: 13px;
  color: var(--color-text-quaternary);
  flex-shrink: 0;
  margin-left: -3px;
}
.mw-col__chev svg { width: 100%; height: 100%; display: block; }
.mw-col__actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text-quaternary);
}
.mw-col__actions .ic { width: 13px; height: 13px; }
.mw-col__actions .ic svg { width: 100%; height: 100%; display: block; }
.mw-col__body {
  padding: 0 6px 10px;
  display: flex;
  flex-direction: column;
}
.mw-sec {
  font-size: 10px;
  font-weight: 690;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-quaternary);
  padding: 9px 8px 3px;
}
.mw-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 6px 8px;
  border-radius: 6px;
}
.mw-row.is-hover { background: rgba(255, 255, 255, 0.035); }
.mw-check {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1.5px solid rgba(255, 255, 255, 0.26);
  flex-shrink: 0;
  margin-top: 1.5px;
  position: relative;
}
.mw-check.is-done {
  background: rgba(87, 168, 128, 0.85);
  border-color: rgba(87, 168, 128, 0.85);
}
.mw-check.is-done::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1.5px;
  width: 3.5px;
  height: 7px;
  border: solid #fff;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.mw-roll {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color-text-tertiary);
}
.mw-roll svg { width: 100%; height: 100%; display: block; }
.mw-row__main { min-width: 0; flex: 1; }
.mw-row__title {
  font-size: 12.5px;
  font-weight: 450;
  line-height: 1.3;
  color: #B3B3B3;
}
.mw-row.is-done .mw-row__title {
  color: #4D4D4D;
  text-decoration: line-through;
}
.mw-days {
  margin-left: auto;
  align-self: flex-start;
  margin-top: 1px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--color-text-tertiary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mw-chip {
  margin-left: auto;
  align-self: flex-start;
  margin-top: 0.5px;
  font-size: 9.5px;
  font-weight: 600;
  padding: 1.5px 7px;
  border-radius: 999px;
  white-space: nowrap;
}
.mw-chip--amber { color: var(--app-amber); background: rgba(217, 158, 71, 0.16); }
.mw-chip--blue  { color: #7AB1E4; background: rgba(54, 133, 214, 0.16); }
.mw-chip--green { color: #7CC4A0; background: rgba(87, 168, 128, 0.16); }
.mw-time {
  margin-left: auto;
  align-self: flex-start;
  margin-top: 1px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-quaternary);
}

/* resize handle hint between the gutters */
.mw-cols { position: relative; }

/* Responsive: shed the third column, then the sidebar, on narrow viewports */
@media (max-width: 760px) {
  .mw-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mw-col--3 { display: none; }
}
@media (max-width: 560px) {
  .mw-body { grid-template-columns: 1fr; }
  .mw-side { display: none; }
  .mw-cols { grid-template-columns: 1fr; }
  .mw-col--2 { display: none; }
}

/* --- Points grid: title + description cells (solid-style), no bullet dots.
   The bullet list renders as a grid of small cards below each feature image;
   the image-left pillars (rolling / focus / habits) override to a single
   column of quiet rows beside the image. --- */
.pillar__points .feature-row-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(0.8rem, 1.5vw, 1.15rem);
  margin-top: 1.25rem;
}
/* Mobile: every pillar's bullet grid is a 2-column grid (was 1 column on
   phones). The image-left pillars (rolling / focus / habits) set the same 2-col
   via their own id-scoped rules above; this covers the wide pillars. Placed
   after the base grid so it wins on source order. */
@media (max-width: 760px) {
  .pillar__points .feature-row-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Filled detail cards under each feature image (solid's "card-flat" idea:
   the page's card surface + inset ring, tight padding, small radius, no lift). */
.pillar__points .feature-row-list li {
  padding: 1rem 1.15rem;
  background: var(--color-surface-card);
  border-radius: var(--radius-12);
  box-shadow: var(--shadow-card-inset);
}
.pillar__points .feature-row-list li::before { display: none; }
.frl-t {
  display: block;
  font-weight: 600;
  font-size: 15.5px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
  margin-bottom: 0.4rem;
}
.frl-d {
  display: block;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--color-text-tertiary);
}

@media (max-width: 860px) {
        
  /* Small pillars: drop the side-by-side; stack image over the grid */
    }

/* ============================================================
   Real screenshots — theme-aware + device composition.
   Light shot shows in light theme, dark shot in dark theme. Used in
   #plan (desktop only), #multi-column, #day, #routines.
   See assets/screenshots/README.md.
   ============================================================ */

/* Theme toggle: base (no attribute) = dark theme → show .shot--dark. */
.shot--light { display: none; }
.shot--dark  { display: block; }
[data-theme="light"] .shot--light { display: block; }
[data-theme="light"] .shot--dark  { display: none; }
/* Beat `.screenshot-frame img { display:block }` for framed images. */
.screenshot-frame img.shot--light { display: none; }
.screenshot-frame img.shot--dark  { display: block; }
[data-theme="light"] .screenshot-frame img.shot--light { display: block; }
[data-theme="light"] .screenshot-frame img.shot--dark  { display: none; }

/* macOS frame: show the whole window (override the 16/10 crop). */
.shot-mac { min-width: 0; }
.shot-mac .screenshot-frame--mac { aspect-ratio: auto; }

/* iOS frame fills its wrapper (drop the default 320px centering cap). */
.shot-ios .screenshot-frame--ios { width: 100%; max-width: none; margin: 0; }

/* Desktop + mobile side by side, bottom-aligned (mac leads, phone tucks in). */
.shot-duo {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(1rem, 2.5vw, 2rem);
}
.shot-duo .shot-mac { flex: 1 1 auto; max-width: 860px; }
.shot-duo .shot-ios { flex: 0 0 auto; width: clamp(128px, 18%, 210px); }

/* Two phones side by side (routines: the routine + a block's tasks). */
.shot-phones {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(1rem, 4vw, 3rem);
}
.shot-phones .shot-ios { flex: 0 0 auto; width: clamp(150px, 30%, 250px); }

/* Plan switch captures get a light frame so they don't read as flat. */
.plan-shots .screenshot-window {
  border-radius: var(--radius-16);
  /* Background-removed window — no fill or shadow behind it. */
}
@media (min-width: 641px) {
  /* The Plan capture bakes ~4.18% transparent padding each side, so the visible
     window is 91.65% of its box. Scale up and re-center so the VISIBLE window
     spans the full text width above it. (Classic layout only.) */
  #plan .plan-shots .screenshot-window {
    width: 109.11%;
    max-width: none;   /* beat the global img { max-width: 100% } reset */
    margin-inline: -4.555%;
  }
  /* Equalize the VISIBLE gap above every numbered image to the SAME value. Each
     capture bakes a different transparent margin above its window (none for the
     rolling demo, cropped cards and phones; ~2–4.6% for the mac captures), so
     each window's image block is pulled up by exactly its own baked top margin —
     leaving every window sitting the same .pillar__more gap below the subtitle.
     Values are tuned per section (the three scaled windows — plan/multi/routines
     — don't follow the simple formula) and verified uniform at 1320px and 820px. */
  #task-types .pillar__detail .feature-row-vis { margin-top: -0.76%; }
  #plan .pillar__detail > .feature-row-vis { margin-top: -3.08%; }
  #multi-column .pillar__detail > .feature-row-vis { margin-top: -3.8%; }
  #routines .pillar__detail .feature-row-vis { margin-top: -2.91%; }
  #week .pillar__detail .feature-row-vis { margin-top: -2.97%; }
  #brief .pillar__detail .feature-row-vis { margin-top: -3.39%; }
  #habits .pillar__detail .feature-row-vis { margin-top: -1.01%; }
  /* Section 05: the window also bakes ~8.2% transparent padding on its BOTTOM,
     which (now that the window is taller) pushes the bullet grid far below it.
     Pull the bullets up over that padding, leaving ~real spacing. */
  #multi-column .pillar__detail > .pillar__points {
    margin-top: clamp(-4.5rem, -5.4vw, -2.75rem);
  }
}

@media (max-width: 640px) {
  .shot-duo { flex-direction: column; align-items: center; gap: 1.5rem; }
  .shot-duo .shot-mac { max-width: 100%; width: 100%; }
  .shot-duo .shot-ios { width: clamp(150px, 56%, 220px); }
  .shot-phones { gap: 1rem; }
  .shot-phones .shot-ios { width: clamp(120px, 44%, 200px); }
}

/* --- Portrait fragment cards (Brief, Focus timer, Week journal) ---
   Widen the base .screenshot-fragment; .shot--light/.shot--dark handle theme. */
.feature-row-vis .screenshot-fragment { max-width: 360px; }
#brief .screenshot-fragment { max-width: 480px; }
#focus .screenshot-fragment { max-width: 300px; }

/* Week: an app card beside an iOS phone (two portrait items, centered). */
.shot-pair {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(1.25rem, 3.5vw, 3rem);
}
.shot-pair__item { flex: 0 1 auto; width: clamp(170px, 32%, 300px); }
.shot-pair__item .screenshot-fragment { width: 100%; max-width: none; }
.shot-pair__item .screenshot-frame--ios { width: 100%; max-width: none; margin: 0; }

/* Week & Brief: the macOS window shows a SINGLE column (no sidebar), so it is
   sized to stand the SAME height as the phone beside it. The mac width runs
   ~1.4x the phone width to offset their aspect difference (phone is far taller
   per unit width). Multi-column / sidebar mac windows — kanban, multi-column,
   routines — stay larger than the phone via .shot-duo. */
#week .shot-pair__item:not(:first-child),
#brief .shot-pair__item:not(:first-child) { width: clamp(185px, 27%, 295px); }
#week .shot-pair__item:first-child { width: clamp(249px, 36%, 396px); }
#brief .shot-pair__item:first-child { width: clamp(262px, 38%, 417px); }

/* Kanban: the new board capture is near-square; cap the duo so it doesn't tower. */
#kanban .shot-duo { max-width: 900px; margin-inline: auto; }

/* Single centered macOS window (Habits). */
.shot-solo { margin-inline: auto; max-width: 900px; }

@media (max-width: 640px) {
  .shot-pair { gap: 1rem; }
  .shot-pair__item { width: clamp(140px, 44%, 220px); }
  /* Agenda card full-width on top, the two phones side by side below. */
  #week .shot-pair__item:first-child { width: min(380px, 100%); }
  #week .shot-pair__item:not(:first-child) { width: clamp(130px, 44%, 200px); }
}

/* The Columns section overlaps the iPhone onto the bottom-right of the
   full-width desktop window. */
#multi-column .feature-row-vis { overflow: visible; }
#multi-column .shot-duo {
  display: block;
  position: relative;
}
#multi-column .shot-duo .shot-mac {
  /* The capture bakes ~5.04% transparent padding each side, so scale up and
     re-center to make the VISIBLE window span the full text width. */
  width: 111.2%;
  max-width: none;
  margin-inline: -5.6%;
}
#multi-column .shot-duo .shot-ios {
  position: absolute;
  right: 2%;
  bottom: 2.5%;
  width: clamp(116px, 16.5%, 208px);
  margin: 0;
  z-index: 2;
}
@media (max-width: 640px) {
  #multi-column .shot-duo { display: flex; flex-direction: column; align-items: center; }
  #multi-column .shot-duo .shot-ios { position: static; width: clamp(150px, 56%, 220px); }
}

/* ════════════════════════════════════════════════════════════════════════
   Classic layout — image-forward feature visuals. Each visual fills the full
   width of the TEXT column above it (the pillar body, which already excludes
   the number column) — never wider. The default .feature-row-vis is already
   the body width, so the sections below only left-align / enlarge / overlap
   within it. (>640px only.)
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 641px) {
  /* 06 Routines — left-aligned + a bigger window, kept within the text width.
     The mac capture bakes ~7.79% transparent padding each side and ~8.3% below
     the solid window (phones are full-bleed). So at the 56% mac width:
       · margin-left  -4.36% (= -7.79% × 56%) pulls the VISIBLE window's left
         edge onto the title's left edge;
       · margin-bottom -5.75% (= -10.26% × 56%) lands the VISIBLE bottom on the
         phones' bottom. The negative left margin also shrinks the mac's flow
         footprint, so the phones still fit beside it without overflowing. */
  #routines.pillar .shot-duo { justify-content: flex-start; }
  #routines.pillar .shot-duo .shot-mac {
    max-width: min(700px, 56%);
    margin-left: -4.36%;
    margin-bottom: -5.75%;
  }
  #routines.pillar .shot-duo .shot-ios--pair { width: clamp(300px, 44%, 700px); }

  /* 10 Kanban — left-aligned, larger, iPhone overlapping the bottom-right
     corner (same treatment as Columns). */
  #kanban .feature-row-vis { overflow: visible; }
  #kanban .shot-duo {
    display: block;
    position: relative;
    max-width: none;
    margin-inline: 0;
  }
  #kanban .shot-duo .shot-mac { width: 100%; max-width: none; }
  #kanban .shot-duo .shot-ios {
    position: absolute;
    right: 2%;
    bottom: 2.5%;
    width: clamp(120px, 16%, 230px);
    margin: 0;
    z-index: 2;
  }

  /* 07 Week & 09 Brief — the mac (desktop) is the larger element and the phone
     a shorter companion, bottom-aligned along a shared baseline (they don't
     overlap). The first item is the mac window, the second the iPhone. The mac
     captures bake ~7.6% (week) / ~9% (brief) of window-shadow below the solid
     window, while the phones are full-bleed — so the mac gets a negative
     margin-bottom (as a % of the row width, which tracks the mac's own width)
     to drop its VISIBLE bottom edge onto the phone's. */
  #week .shot-pair,
  #brief .shot-pair { align-items: flex-end; justify-content: flex-start; }
  #week .shot-pair__item:not(:first-child) { width: clamp(210px, 27%, 320px); }
  /* 02 Task types — left-align the card pair (was centered) and cancel the type
     card's small baked ~1.6% transparent side margin (1.6% × 54% item width) so
     the visible card edge sits flush with the text. Desktop only — the pair
     stacks centered on mobile. */
  #task-types .shot-pair { justify-content: flex-start; }
  #task-types .shot-pair__item:first-child { margin-left: -0.86%; }
  /* margin-left cancels the mac capture's baked ~9.2% transparent side margin
     (as a % of the row: 9.2% × 48% item width) so the WINDOW edge — not the
     image box — sits flush with the text; the phone shifts with it. */
  #week .shot-pair__item:first-child { width: clamp(360px, 48%, 560px); margin-bottom: -5.85%; margin-left: -4.44%; }
  #brief .shot-pair__item:not(:first-child) { width: clamp(210px, 27%, 320px); }
  #brief .shot-pair__item:first-child { width: clamp(380px, 49%, 580px); margin-bottom: -6.7%; margin-left: -5.05%; }
}

/* ─── Rolling tasks: an animated "Dinners" list ───
   The top dish completes, sinks to the bottom, and the rest rise — on a loop.
   A theme-aware HTML mock standing in for the screenshot; script.js drives the
   motion (data-roll) and gates it on prefers-reduced-motion (this static markup
   is the reduced-motion state). The day labels are fixed per row position
   (12d…today) while the dishes rotate through them. */
.roll-demo {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  font-family: var(--font-body);
  /* Palette — dark by default (base :root is dark), light override below.
     Mirrors the app: --rd-win = app canvas (the window), --rd-card = the column
     surface the list sits on (DesignSystem.swift: #0D canvas / #111 column dark;
     #F2F2F2 canvas / #FFF column light). */
  --rd-win: #0c0c0c;
  --rd-card: #1a1a1c;
  --rd-border: rgba(255, 255, 255, 0.08);
  --rd-card-border: rgba(255, 255, 255, 0.07);
  --rd-title: #e9e9ec;
  --rd-text: #d3d3d6;
  --rd-dim: #76767c;
  --rd-faint: #5a5a60;
  --rd-glyph: #7a7a80;
  --rd-hover: rgba(255, 255, 255, 0.075);
  --rd-tabs: rgba(255, 255, 255, 0.05);
  --rd-tab-on: rgba(255, 255, 255, 0.12);
  --rd-green: #57a880;
  --rd-green-ink: #08130c;
}
[data-theme="light"] .roll-demo {
  --rd-win: #e6e6e9;
  --rd-card: #ffffff;
  --rd-border: rgba(0, 0, 0, 0.10);
  --rd-card-border: rgba(0, 0, 0, 0.04);
  --rd-title: #202024;
  --rd-text: #2b2b30;
  --rd-dim: #9b9ba1;
  --rd-faint: #bcbcc2;
  --rd-glyph: #adadb4;
  --rd-hover: rgba(0, 0, 0, 0.055);
  --rd-tabs: #e7e7e9;
  --rd-tab-on: #ffffff;
  --rd-green: #46b378;
  --rd-green-ink: #ffffff;
}
.roll-win {
  background: var(--rd-win);
  border: 1px solid var(--rd-border);
  border-radius: 14px;
  padding: 0.45rem 0.5rem 0.5rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16), 0 26px 56px -22px rgba(0, 0, 0, 0.5);
}
.roll-bar { display: flex; align-items: center; justify-content: space-between; padding: 0.2rem 0.3rem 0.5rem; }
.roll-body {
  background: var(--rd-card);
  border: 1px solid var(--rd-card-border);
  border-radius: 10px;
  padding: 0.55rem 0.3rem 0.4rem;
}
.roll-lights { display: inline-flex; gap: 6px; }
.roll-lights i { width: 11px; height: 11px; border-radius: 50%; }
.roll-lights i:nth-child(1) { background: #ec6a5e; }
.roll-lights i:nth-child(2) { background: #f4bf4f; }
.roll-lights i:nth-child(3) { background: #61c454; }
.roll-ic { color: var(--rd-glyph); flex: 0 0 auto; }
.roll-sidebar { width: 15px; height: 14px; }
.roll-head { display: flex; align-items: center; justify-content: space-between; padding: 0 0.35rem 0.55rem; }
.roll-title { display: inline-flex; align-items: center; gap: 6px; font-size: 19px; font-weight: 600; letter-spacing: -0.02em; color: var(--rd-title); }
.roll-caret { width: 9px; height: 6px; color: var(--rd-dim); }
.roll-head-actions { display: inline-flex; align-items: center; gap: 12px; }
.roll-head-actions .roll-ic:first-child { width: 16px; height: 4px; }
.roll-head-actions .roll-ic:last-child { width: 14px; height: 14px; }
.roll-tabs { display: inline-flex; gap: 1px; margin: 0 0.35rem 0.7rem; padding: 2px; background: var(--rd-tabs); border-radius: 8px; }
.roll-tabs span { font-size: 12.5px; font-weight: 500; color: var(--rd-dim); padding: 3px 11px; border-radius: 6px; }
.roll-tabs span.is-on { color: var(--rd-title); background: var(--rd-tab-on); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); }
.roll-sec { display: flex; align-items: center; gap: 6px; margin: 0 0.55rem 0.15rem; font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rd-dim); }
.roll-sec__ic { width: 13px; height: 13px; }
.roll-sec b { font-weight: 600; opacity: 0.7; }
.roll-list { list-style: none; margin: 0; padding: 0; }
.roll-item {
  display: flex; align-items: center; gap: 8px;
  padding: 0.44rem 0.5rem;
  border-radius: 7px;
  font-size: 14.5px;
  color: var(--rd-text);
  will-change: transform;
}
.roll-item:first-child { background: var(--rd-hover); }
.roll-mark { display: inline-flex; align-items: center; flex: 0 0 auto; }
.roll-g { width: 15px; height: 15px; color: var(--rd-glyph); }
.roll-check {
  display: none;
  align-items: center; justify-content: center;
  width: 16px; height: 16px;
  margin-right: 6px;
  border-radius: 4px;
  background: var(--rd-green);
  color: var(--rd-green-ink);
}
.roll-check svg { width: 11px; height: 11px; display: block; }
.roll-item.is-done .roll-check,
.roll-item.is-completing .roll-check { display: inline-flex; }
/* The day-since and ×count read as a quiet suffix to the dish name. */
.roll-text { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 6px; }
.roll-name { flex: 0 1 auto; min-width: 0; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.roll-item.is-done .roll-name,
.roll-item.is-completing .roll-name { color: var(--rd-dim); }
.roll-day { flex: 0 0 auto; font-size: 12.5px; color: var(--rd-dim); }
.roll-x { flex: 0 0 auto; font-size: 12px; color: var(--rd-faint); }
.roll-add { display: flex; align-items: center; gap: 8px; padding: 0.5rem 0.5rem 0.15rem; font-size: 14px; color: var(--rd-dim); }
.roll-add .roll-ic { width: 14px; height: 14px; }
@media (prefers-reduced-motion: no-preference) {
  /* The green check pops as a dish completes. */
  .roll-item.is-done .roll-check,
  .roll-item.is-completing .roll-check { animation: roll-pop 0.3s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
}
@keyframes roll-pop { from { transform: scale(0.4); opacity: 0; } to { transform: none; opacity: 1; } }

/* --- Jump-to-feature nav grid under the #differences header (6×2). --- */
.diff-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.5rem, 1vw, 0.85rem);
  max-width: 700px;
  margin: clamp(2.25rem, 4vw, 3.25rem) auto 0;
}
.diff-nav__item {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  padding: 0.8rem 0.9rem;
  border-radius: var(--radius-12);
  border: 1px solid var(--color-border-translucent);
  background: var(--color-surface-card);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.12s ease;
}
.diff-nav__item:hover {
  background: var(--color-bg-level-2);
  border-color: var(--color-accent-border-soft);
  color: var(--color-text-primary);
}
.diff-nav__item:active { transform: scale(0.98); }
.diff-nav__num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
}
.diff-nav__label { font-size: 13.5px; letter-spacing: -0.01em; line-height: 1.25; }
@media (max-width: 900px) { .diff-nav { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .diff-nav { grid-template-columns: repeat(2, 1fr); } }
@media (prefers-reduced-motion: reduce) {
  .diff-nav__item { transition: none; }
  .diff-nav__item:active { transform: none; }
}

/* --- Task types: type picker + decision card side by side. --- */
#task-types .shot-pair { align-items: flex-end; }
#task-types .shot-pair__item:first-child { width: clamp(340px, 54%, 720px); }
#task-types .shot-pair__item:not(:first-child) { width: clamp(240px, 40%, 520px); margin-bottom: 2px; }
/* Mobile: the two cards stack at the SAME size (the decision card as large as
   the type picker), instead of the desktop big/small pairing. */
@media (max-width: 640px) {
  #task-types .shot-pair__item:first-child,
  #task-types .shot-pair__item:not(:first-child) { width: min(420px, 100%); }
}

/* --- Routines: two phones share the corner overlap (and the classic slot). --- */
.shot-ios--pair { display: flex; gap: clamp(0.4rem, 1vw, 0.9rem); }
.shot-ios--pair .screenshot-frame--ios { flex: 1 1 0; min-width: 0; width: auto; max-width: none; margin: 0; }
.shot-duo .shot-ios--pair { width: clamp(230px, 34%, 410px); }

/* --- Focus timer: the picker card beside the timer's life as strips, with the
   always-on-top floating bar called out. --- */
.focus-shots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 3vw, 2.75rem);
}
.focus-shots__card { flex: 0 0 auto; width: clamp(210px, 27%, 312px); }
.focus-shots__card .screenshot-fragment { width: 100%; max-width: none; }
.focus-shots__strips {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  /* Roomier gap so the two strips read as separate moments — and each has space
     for its own floating tag above it. */
  gap: clamp(3rem, 5.6vw, 4.8rem);
}
.focus-strip { position: relative; }
.focus-strip img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-12);
  border: 1px solid var(--color-border-translucent);
  background: var(--color-surface-card);
  box-shadow: 0 8px 22px -10px rgba(0, 0, 0, 0.4);
}
.focus-strip--float img {
  box-shadow:
    0 18px 44px -10px rgba(0, 0, 0, 0.55),
    0 6px 16px -4px rgba(0, 0, 0, 0.35);
}
.focus-strip__tag {
  position: absolute;
  top: -0.7rem;
  right: 0.8rem;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-on-accent);
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.3);
}
/* The inline-timer strip is short, so the default tag overlap covers too much of
   it — lift this one so it sits just above the strip instead. */
.focus-strip:not(.focus-strip--float) .focus-strip__tag { top: -1.5rem; }
/* Lift the float bar's tag a touch too, so it overlaps its strip less. */
.focus-strip--float .focus-strip__tag { top: -1.1rem; }
@media (max-width: 700px) {
  .focus-shots { flex-direction: column; gap: clamp(2.75rem, 8vw, 3.5rem); }
  .focus-shots__card { width: clamp(200px, 62%, 300px); }
  .focus-shots__strips { width: 100%; max-width: 460px; }
}

/* --- Framed app-UI crop: a real interior screenshot that carries its own
   background (e.g. the focus-list "Priorities to plan" nudge with its popover).
   A rounded card with a hairline + soft lift so it reads as a clean cutout on
   the canvas; theme-aware via the paired .shot--light/.shot--dark images. --- */
.shot-crop {
  width: 100%;
  max-width: 540px;
  /* Left-align in its column (was centered) so the card edge meets the text. */
  margin: 0 auto 0 0;
  border-radius: var(--radius-12);
  overflow: hidden;
  border: 1px solid var(--color-border-translucent);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.10),
    0 18px 44px -20px rgba(0, 0, 0, 0.45);
}
/* Trim the capture's faint top hairline (overflow:hidden on the card clips it). */
.shot-crop img { width: 100%; height: auto; margin-top: -2px; }

/* --- The Week: an accent bar on the journal line ("Ship the beta…") so it
   reads as the week's intent, with small caps marking its start and finish.
   Positioned in % over the agenda capture (the journal box sits at ~20.5%–24.6%
   of the image height, its left edge at ~14.5% of the width). --- */
.week-shot { position: relative; }
.week-journal-bar {
  position: absolute;
  left: calc(92% + 2px); /* just outside the window's right edge (window ends ~91%), +2px gap */
  top: 20.6%;
  height: 3.9%;
  width: 3px;
  border-radius: 2px;
  background: var(--color-accent);
  pointer-events: none;
}
/* Short horizontal caps at each end — the journal line's start and finish. */
.week-journal-bar::before,
.week-journal-bar::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 9px;
  height: 3px;
  border-radius: 2px;
  background: var(--color-accent);
}
.week-journal-bar::before { top: 0; }
.week-journal-bar::after { bottom: 0; }

/* --- Hero shot: the macOS app, large and centered, with the expanded-task
   iPhone tucked into its bottom-right corner. --- */
.hero-shot-bloom { margin-top: 0; }
.hero-shot { position: relative; max-width: 600px; margin: 0 auto; }
.hero-shot__mac { width: 100%; }
.hero-shot__mac .screenshot-frame--mac { aspect-ratio: auto; }
.hero-shot__phone {
  position: absolute;
  right: -4%;
  bottom: -2%;
  width: clamp(116px, 32%, 184px);
  z-index: 2;
}
@media (max-width: 640px) {
  .hero-shot__phone { display: none; }
}

/* --- Mobile: pillar images use the full screen width; plan toggle on one row. --- */
main { overflow-x: clip; }   /* contain the full-bleed image areas below */
@media (max-width: 640px) {
  /* Drop the detail + vis card chrome so images aren't inset, and let the
     image area span the full viewport width. */
    #differences .feature-row-vis,
  .hero-shot-bloom {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    padding: 0 14px;
    background: none;
    box-shadow: none;
    min-height: 0;
    border-radius: 0;
  }
  .hero-shot-bloom { margin-top: clamp(1.5rem, 5vw, 2.25rem); }
  /* Plan zoom toggle: a single full-width row of equal pills (no wrapping). */
  .plan-switch { width: 100%; flex-wrap: nowrap; gap: 4px; padding: 0.3rem; }
  .plan-switch .routine-pill { flex: 1 1 0; min-width: 0; height: 40px; padding: 0 4px; font-size: 13.5px; }
}

/* ─── Keyboard focus ring ───
   A single visible ring for keyboard users (mouse/touch focus stays quiet).
   Uses the brand accent so it reads as part of the site, not a default UA box. */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

#routines .shot-duo {
  display: flex;
  position: static;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
#routines .shot-duo .shot-mac {
  flex: 0 1 auto;
  width: auto;
  max-width: min(485px, 44%);
}
#routines .shot-duo .shot-ios--pair {
  position: static;
  width: clamp(260px, 48%, 580px);   /* sized so the two phones rise to the window's height */
}
@media (max-width: 640px) {
  /* Stacked + centered on phones; the window goes full-width. */
  #routines .shot-duo { flex-direction: column; align-items: center; }
  #routines .shot-duo .shot-mac { width: 100%; max-width: 100%; }
}

/* ════════════════════════════════════════════════════════════════════════
   Mobile (phones): tighter feature cards, full-width Focus + Routines images,
   smaller image gaps, and a swipe carousel of larger device shots for Brief
   and Kanban. Placed last so it wins same-specificity ties.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* Feature cards (#task-types etc.) — smaller type for the 2-column grid. */
  .frl-t { font-size: 13.5px; line-height: 1.3; margin-bottom: 0.3rem; }
  .frl-d { font-size: 12.5px; line-height: 1.45; }
  .pillar__points .feature-row-list li { padding: 0.8rem 0.9rem; }

  /* Less air above each pillar image, and a tighter image→bullets gap. */
  .pillar__more { margin-top: clamp(1rem, 3vw, 1.5rem); }
  #rolling-lists .pillar__detail,
  #focus-lists .pillar__detail,
  #habits .pillar__detail { gap: 0.85rem; }

  /* 04 Focus lists — the nudge image goes truly full-bleed (the image-left
     stacking rule had pinned it to the narrower container width). */
  #focus-lists .pillar__detail .feature-row-vis {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    padding: 0 14px;
  }
  .shot-crop { max-width: none; }

  /* 06 Routines — the two phones fill the width (were a small centered pair),
     and the mac window matches: it bakes ~6.3% transparent side shadow, so
     scale it up and re-center to land the VISIBLE window edge-to-edge too. */
  #routines .shot-duo .shot-ios--pair { width: min(480px, 100%); }
  #routines .shot-duo .shot-mac {
    width: 114.4%;
    max-width: none;
    margin-inline: -7.2%;
  }

  /* 08 Brief & Kanban — a horizontal swipe carousel of larger device shots;
     each slide is ~86% wide so the next one peeks (the swipe affordance). */
  #kanban .essential__vis {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    padding: 0 14px;
  }
  #brief .shot-pair,
  #week .shot-pair,
  #kanban .shot-duo {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.85rem;
    max-width: none;
    /* Span the full screen width (cancel the vis's 14px gutter) and re-add that
       gutter as padding, so the scroll box clips at the screen edge — the device
       drop-shadows then fade to the edge instead of being cut off mid-view. */
    margin-inline: -14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-padding-inline: 18px;
    scrollbar-width: none;
    /* overflow-x:auto also clips the y-axis, which would cut off the phones'
       drop-shadow (~40px below). Pad the scroll box so the shadows have room
       on every side. */
    padding: 14px 18px 50px;
  }
  #brief .shot-pair::-webkit-scrollbar,
  #week .shot-pair::-webkit-scrollbar,
  #kanban .shot-duo::-webkit-scrollbar { display: none; }
  #brief .shot-pair__item:first-child,
  #brief .shot-pair__item:not(:first-child),
  #week .shot-pair__item:first-child,
  #week .shot-pair__item:not(:first-child),
  #kanban .shot-duo .shot-mac,
  #kanban .shot-duo .shot-ios {
    flex: 0 0 auto;
    min-width: 0;
    margin: 0;
    position: static;
    scroll-snap-align: center;
  }
  /* Per-slide widths — the tall phone shots are much taller than the macs at a
     shared width, so the desktop shot reads larger and the phone smaller; for
     Brief and Week this lands the two at roughly the same height. */
  #brief .shot-pair__item:first-child { width: 90%; max-width: 90%; }          /* Brief — mac */
  #brief .shot-pair__item:not(:first-child) { width: 62%; max-width: 62%; }    /* Brief — phone */
  #week .shot-pair__item:first-child { width: 88%; max-width: 88%; }           /* Week — mac */
  #week .shot-pair__item:not(:first-child) { width: 64%; max-width: 64%; }     /* Week — phone */
  #kanban .shot-duo .shot-mac { width: 86%; max-width: 86%; }                  /* Kanban — board */
  #kanban .shot-duo .shot-ios { width: 56%; max-width: 56%; }                  /* Kanban — phone */

  /* The carousel's 50px shadow padding would push the bullet grid far below the
     devices; tighten the gap and pull the grid up so it sits just under them
     (without the white bullet cards riding up onto the shadow). */
  #brief .pillar__detail,
  #week .pillar__detail { gap: 0.5rem; }
  #brief .shot-pair,
  #week .shot-pair { margin-bottom: -20px; }

  /* 09 Habits — a larger image: full-bleed, then scale up to crop its small
     baked side shadow (~3%/side) so the visible window spans the full width. */
  #habits .pillar__detail .feature-row-vis {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    padding: 0 14px;
  }
  #habits .shot-solo { max-width: none; width: 107.2%; margin-inline: -3.6%; }
}

/* The hero shot uses the compact corner-overlap composition defined earlier
   (mac agenda window with the iPhone tucked into its bottom-right corner), which
   sits in the right column of the two-column hero. */

/* ════════════════════════════════════════════════════════════════
   Legal / support pages (privacy.html · terms.html · support.html)
   A single readable prose column on the same canvas as the homepage,
   with a sticky table of contents on wide screens. Reuses the site
   header, footer, buttons, and eyebrow; everything below is page-local.
   ════════════════════════════════════════════════════════════════ */
.legal-page {
  padding-top: clamp(2.5rem, 6vw, 4.5rem);
}
.legal-hero {
  max-width: var(--container);
  margin: 0 auto;
  padding-bottom: clamp(2rem, 4vw, 3rem);
}
.legal-hero h1 {
  font-size: clamp(2.1rem, 5vw, 3.1rem);
  font-weight: 510;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0 0 1rem;
  max-width: 18ch;
}
.legal-hero__lead {
  font-size: clamp(1.0625rem, 2.2vw, 1.1875rem);
  line-height: 1.55;
  color: var(--color-text-secondary);
  max-width: 46ch;
  margin: 0;
}
.legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  margin-top: 1.6rem;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--color-text-tertiary);
}
.legal-meta strong {
  color: var(--color-text-secondary);
  font-weight: 510;
}

/* Body: a TOC rail + the prose column. The rail collapses away under
   the prose on narrow screens. */
.legal-body {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  max-width: var(--container);
  margin: 0 auto;
  padding-bottom: clamp(4rem, 8vw, 7rem);
}
.legal-toc {
  position: sticky;
  top: 96px;
  align-self: start;
}
.legal-toc__title {
  margin: 0 0 0.9rem;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 510;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}
.legal-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: toc;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.legal-toc a {
  display: block;
  font-size: 13px;
  line-height: 1.35;
  color: var(--color-text-tertiary);
  border-left: 1.5px solid var(--color-border-translucent-strong);
  padding-left: 0.85rem;
  transition: color var(--speed-fast) var(--ease-primary),
    border-color var(--speed-fast) var(--ease-primary);
}
.legal-toc a:hover,
.legal-toc a[aria-current="true"] {
  color: var(--color-text-primary);
  border-left-color: var(--color-accent);
}

.legal-prose {
  min-width: 0;
  max-width: 70ch;
}
.legal-prose section {
  scroll-margin-top: 96px;
}
.legal-prose section + section {
  margin-top: clamp(2.25rem, 4vw, 3rem);
}
.legal-prose h2 {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  font-size: clamp(1.25rem, 2.6vw, 1.55rem);
  font-weight: 560;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 1rem;
}
.legal-prose h2 .legal-prose__num {
  font-family: var(--font-mono);
  font-size: 0.72em;
  font-weight: 500;
  color: var(--color-accent);
  flex-shrink: 0;
}
.legal-prose h3 {
  font-size: 1.0625rem;
  font-weight: 590;
  letter-spacing: -0.01em;
  margin: 1.75rem 0 0.6rem;
  color: var(--color-text-primary);
}
.legal-prose p,
.legal-prose li {
  font-size: 15.5px;
  line-height: 1.68;
  color: var(--color-text-secondary);
}
.legal-prose p { margin: 0 0 1rem; }
.legal-prose ul {
  margin: 0 0 1rem;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.legal-prose li { padding-left: 0.2rem; }
.legal-prose li::marker { color: var(--color-text-quaternary); }
.legal-prose a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--color-accent-dim);
  transition: color var(--speed-fast) var(--ease-primary);
}
.legal-prose a:hover { color: var(--color-link-hover); }
.legal-prose strong { color: var(--color-text-primary); font-weight: 590; }

/* A quiet callout for the privacy "what we don't do" / TL;DR boxes. */
.legal-note {
  border: 1px solid var(--color-border-translucent-strong);
  border-radius: var(--radius-12);
  background: var(--color-surface-highlight);
  padding: 1.1rem 1.25rem;
  margin: 0 0 1.25rem;
}
.legal-note p:last-child { margin-bottom: 0; }
.legal-note__label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.5rem;
}

/* Support page: a small grid of contact / FAQ cards above the prose. */
.support-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  max-width: var(--container);
  margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
}
.support-card {
  border: 1px solid var(--color-border-translucent-strong);
  border-radius: var(--radius-16);
  background: var(--color-surface-highlight);
  box-shadow: var(--shadow-card-inset);
  padding: 1.4rem 1.4rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.support-card h2 {
  font-size: 1.0625rem;
  font-weight: 590;
  letter-spacing: -0.01em;
  margin: 0;
}
.support-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text-tertiary);
}
.support-card a.support-card__link {
  margin-top: auto;
  font-size: 14px;
  font-weight: 510;
  color: var(--color-accent);
}
.support-card a.support-card__link:hover { color: var(--color-accent-hover); }

@media (max-width: 820px) {
  .legal-body {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .legal-toc {
    position: static;
    top: auto;
    border: 1px solid var(--color-border-translucent-strong);
    border-radius: var(--radius-12);
    padding: 1.1rem 1.25rem;
    background: var(--color-surface-highlight);
  }
  .legal-toc ol {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 1.25rem;
  }
  .legal-toc a { border-left: 0; padding-left: 0; }
  .legal-toc a:hover,
  .legal-toc a[aria-current="true"] { border-left: 0; }
}
@media (max-width: 480px) {
  .legal-toc ol { grid-template-columns: 1fr; }
}

/* Keyboard shortcuts: a full-width cheat sheet above the FAQ. The keycaps
   are theme-aware — pure-white chips on the light canvas, raised graphite
   chips in the dark theme — and reuse the support-card surface. */
.shortcuts {
  max-width: var(--container);
  margin: 0 auto clamp(2.75rem, 6vw, 4.5rem);
  scroll-margin-top: 96px;
}
.shortcuts__head {
  max-width: 56ch;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.shortcuts__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 510;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 0.7rem;
}
.shortcuts__head h2 {
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  font-weight: 540;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0 0 0.75rem;
}
.shortcuts__lead {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--color-text-secondary);
  margin: 0;
}
.shortcuts__lead .kbd-keys { transform: translateY(1px); }

.shortcuts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 1rem;
}
.kbd-group {
  border: 1px solid var(--color-border-translucent-strong);
  border-radius: var(--radius-16);
  background: var(--color-surface-highlight);
  box-shadow: var(--shadow-card-inset);
  padding: 1.25rem 1.35rem 0.9rem;
}
.kbd-group h3 {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--color-text-primary);
}
.kbd-group__hint {
  margin: 0.25rem 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-text-tertiary);
}
.kbd-group h3 + .kbd-row,
.kbd-group__hint + .kbd-row { margin-top: 0.7rem; }
.kbd-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--color-border-translucent);
}
.kbd-row__label {
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--color-text-secondary);
}
.kbd-keys {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  flex-shrink: 0;
  white-space: nowrap;
}
.kbd-keys kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75em;
  height: 1.9em;
  padding: 0 0.42em;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: var(--color-text-secondary);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-translucent-strong);
  border-bottom-width: 2px;
  border-radius: 6px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}
.kbd-keys kbd.kbd--wide { min-width: auto; padding: 0 0.6em; }
.kbd-sep {
  color: var(--color-text-quaternary);
  font-size: 11px;
  padding: 0 0.12rem;
}

/* iPad strip below the Mac grid — its bindings differ, so it stands apart. */
.kbd-note {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 1.1rem;
  border: 1px solid var(--color-border-translucent-strong);
  border-radius: var(--radius-12);
  background: var(--color-surface-highlight);
  padding: 1rem 1.25rem;
}
.kbd-note__label {
  font-size: 13px;
  font-weight: 590;
  color: var(--color-text-primary);
}
.kbd-note__item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 13px;
  color: var(--color-text-tertiary);
}
.kbd-note .kbd-keys kbd { color: var(--color-text-tertiary); }

@media (max-width: 560px) {
  .shortcuts-grid { grid-template-columns: 1fr; }
}

/* ═══════════════ Hero — the live "studio" hero (Linear-style upright product)
   Scoped to .hero--linear plus the shared .hero--wide__* layout element classes
   (those are reused by name). Hero A/B and the flip toggle were removed once
   this became the default. */
.hero.hero--linear {
  min-height: 100svh;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  /* Slide the hero up under the sticky navbar (≈ its 12px top offset + height)
     so the navbar's transparent fill sits on the hero's field, not the body
     background; the same amount is added back as top padding so the copy keeps
     its position. */
  margin-top: -70px;
  padding: calc(clamp(80px, 12vh, 140px) + 70px) 0 clamp(40px, 6vh, 72px);
  text-align: left;
}
/* Variant C — a dark "studio" hero (BOTH site themes): a black→lighter-grey
   vertical gradient that spans the full section to its bottom border, textured
   with heavy film grain (a grayscale fractal-noise layer blended over the
   gradient — overlay makes the grain read progressively from the dark top to
   the lighter base). The product image (sized exactly like Hero B) sits on it. */
.hero.hero--linear {
  /* DARK mode: hold pure black down to ~37% of the hero (≈ the top 1/5 of the
     product image), then lighten toward the lit base. */
  background:
    linear-gradient(180deg, #0a0a0c 0%, #0a0a0c 37%, #232328 60%, #42424a 82%, #5a5a62 100%);
  /* Inset 12px on each side so the gradient panel doesn't run edge-to-edge, and
     round its bottom corners; overflow:hidden clips the gradient + grain (and
     keeps any overhang) to the rounded shape. */
  margin-inline: 12px;
  border-radius: 0 0 var(--radius-8) var(--radius-8);
  overflow: hidden;
}
/* LIGHT mode: the EXACT same gradient with its hue inverted — everything else
   (grain, margin, radius, layout) is identical to dark mode. */
[data-theme="light"] .hero.hero--linear {
  background:
    linear-gradient(180deg, #f5f5f3 0%, #f5f5f3 37%, #dcdcd7 60%, #bdbdb5 82%, #a5a59d 100%);
}
/* Drop the section's top-glow overlay; repurpose the grid ::after as a HEAVY
   film-grain layer over the gradient (under the content). overlay blend lets
   the grain read from the dark top through to the lighter base. */
/* Subtle grid in the TOP of the field (the freed ::before; same grid as the
   default hero, masked to the upper area). */
.hero--linear::before {
  background-image:
    linear-gradient(to right, var(--color-grid-minor) 1px, transparent 1px),
    linear-gradient(to bottom, var(--color-grid-minor) 1px, transparent 1px);
  background-size: 40px 40px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 28%, #000 28%, transparent 78%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 28%, #000 28%, transparent 78%);
}
.hero--linear::after {
  display: block;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='hgrain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.6' intercept='-0.8'/%3E%3CfeFuncG type='linear' slope='2.6' intercept='-0.8'/%3E%3CfeFuncB type='linear' slope='2.6' intercept='-0.8'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23hgrain)'/%3E%3C/svg%3E");
  background-size: 190px 190px;
  background-position: 0 0;
  -webkit-mask-image: none;
  mask-image: none;
  opacity: 1;
  mix-blend-mode: overlay;
}
/* DARK mode: hero copy is light (it sits on the dark field). LIGHT mode inverts
   it to dark so it stays readable on the inverted (light) field. */
.hero--linear .hero-glow__text { color: #F4F4F6; }
.hero--linear .hero--wide__aside .hero-lead { color: rgba(244, 244, 246, 0.74); }
[data-theme="light"] .hero--linear .hero-glow__text { color: #0b0b09; }
[data-theme="light"] .hero--linear .hero--wide__aside .hero-lead { color: rgba(11, 11, 9, 0.74); }
/* Split copy header: title left, lead + buttons right. */
.hero--wide__head {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: start;
  gap: clamp(1.5rem, 5vw, 5rem);
  width: 100%;
}
.hero--wide__head h1 { margin: 0; max-width: none; font-size: clamp(2.1rem, 4.4vw, 3.4rem); }
.hero--wide__headline { display: flex; flex-direction: column; gap: clamp(0.85rem, 1.8vw, 1.3rem); }
.hero--wide__native { margin: 0; color: var(--color-text-tertiary); }
.hero--wide__aside {
  display: flex;
  flex-direction: column;
  gap: clamp(1.4rem, 3vw, 2rem);
  padding-top: clamp(0.25rem, 1.4vw, 0.9rem);
}
.hero--wide__aside .hero-lead { margin: 0; max-width: 42ch; }
.hero--wide__aside .hero-actions { margin: 0; justify-content: flex-start; }
@media (max-width: 860px) {
  .hero--wide__head { grid-template-columns: 1fr; gap: clamp(1.25rem, 4vw, 2rem); }
}
.hero--wide > .container, .hero--linear > .container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(2rem, 4.5vh, 3.5rem);
}
/* Hero C: 16px MORE than the shared copy↔image gap. */
.hero.hero--linear > .container { gap: calc(clamp(2rem, 4.5vh, 3.5rem) + 16px); }
.hero--wide .hero__copy, .hero--linear .hero__copy { max-width: 100%; }
.hero--wide__stage { width: 100%; min-height: 0; }
.hero--wide__shot {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}
.hero--wide__mac { width: 100%; }
.hero--wide__mac .screenshot-frame--mac { aspect-ratio: auto; }
.hero--wide__mac .screenshot-frame--mac img { width: 100%; height: auto; }
.hero--wide__phone {
  position: absolute;
  right: -3%;
  bottom: 0;
  width: clamp(150px, 18.5%, 244px);
  z-index: 2;
}
@media (max-width: 640px) { .hero--wide__phone { display: none; } }

/* ────────────────────────────────────────────────────────────────────
   Variant C (Hero C) — Linear "product on a lit floor" treatment, ported
   from linear.app/homepage. REPLACES the old 8px + mask-fade dissolve.
   Four moves:
     1. The stage breaks out of the 1100px .container to near-full-bleed,
        inset by a ~12px gutter (Linear's `inset: 0 12px`).
     2. .hero--wide__shot becomes a "studio floor" — a subtle dark→light
        gradient shelf with rounded BOTTOM corners (6px). overflow:visible
        so the frame's drop shadow + the phone overhang are NOT clipped.
     3. .hero--wide__mac is the product frame: a clamped max-height +
        overflow:hidden crops the (taller) capture so only the TOP of the
        app shows, its bottom cut at a 12px rounded edge, floating on a
        soft drop shadow above the floor — exactly Linear's read.
     4. The phone floats in front, overhanging the floor's bottom-right.
   Static layout only (no scroll JS); tokens preferred; light + dark tuned.
   Scope: .hero--linear only — Hero A/B untouched.
   ──────────────────────────────────────────────────────────────────── */

/* The stage / shot / image all reuse the shared .hero--wide layout, so the
   product image matches Hero B exactly — full width, full natural height, NOT
   clipped. Only the framing below is Hero-C-specific.

   The product image is sized like Hero B; a subtle rounded frame + soft even
   shadow lifts it off the grainy gradient. */
.hero--linear .hero--wide__mac {
  position: relative;
  width: 100%;
  border-radius: var(--radius-12);
  overflow: hidden;
  /* Directional lighting (DARK mode / base) — a BRIGHT pool of light dropped
     well below the base; the side glows are present but dialed to 0 (off). The
     image itself is untouched (all outer shadows). Tuned via shadow-tuner.html. */
  box-shadow:
    0 140px 62px -8px rgba(255, 255, 255, 0.12),
    0 87px 180px -90px rgba(226, 234, 250, 0.42),
    -1px 14px 46px -25px rgba(228, 235, 248, 0),
    1px 14px 46px -25px rgba(228, 235, 248, 0);
}
[data-theme="light"] .hero--linear .hero--wide__mac {
  /* Light mode: white bottom glow (tuned via shadow-tuner-light.html); the side
     layers stay off. */
  box-shadow:
    0 140px 62px -8px rgba(255, 255, 255, 0.12),
    0 89px 240px -18px rgba(226, 234, 250, 0.63),
    -1px 14px 46px -25px rgba(27, 20, 7, 0),
    1px 14px 46px -25px rgba(27, 20, 7, 0);
}
/* The inner frame is flat (the wrapper carries the radius + even glow). No
   top-fade — every edge is defined evenly, like Linear's panel. Display of the
   light/dark capture is left to the global .shot--light/.shot--dark theme
   toggle (do not force `display` here, or the wrong capture shows); width and
   height come from the shared .hero--wide__mac img rule. */
.hero--linear .screenshot-frame--mac {
  border-radius: 0;
  box-shadow: none;
  -webkit-mask-image: none;
  mask-image: none;
}

/* The phone overhang reuses the shared .hero--wide__phone rule (Hero B's), so
   it sits at the bottom-right of the full-size image just like Hero B. Only
   drop the old mask-fade on its bezel. */
.hero--linear .hero--wide__phone .screenshot-frame--ios {
  -webkit-mask-image: none;
  mask-image: none;
}

/* Reduced motion: static layout — nothing animates here. */
@media (prefers-reduced-motion: reduce) {
  .hero--linear .hero--wide__mac { transition: none; animation: none; }
}

/* ════════════════════════ end hero ════════════════════════ */