/* ==========================================================================
   Curious Co — Editorial Signal, for the Lighthouse CPA proposal
   Shared by index.html and quick-win.html.

   Motion language (one system, used everywhere):
   - Easing: --ease-out for things arriving, --ease-move for things changing
     place, --ease-spring for small things you press. Nothing else.
   - Durations: --d-press 120ms, --d-state 220ms, --d-move 420ms, --d-story 900ms.
   - Arrivals: fade + 12px rise, staggered 40ms. Scroll-driven where the
     browser supports it, IntersectionObserver otherwise.
   - Motion explains a flow or a change. One signature moment per section.
   - prefers-reduced-motion: no travel, no parallax, no autoplay; state
     changes become short fades.
   ========================================================================== */

@font-face {
  font-family: "Geist";
  src: url("../assets/fonts/geist.woff2") format("woff2-variations"), url("../assets/fonts/geist.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../assets/fonts/geist-mono.woff2") format("woff2-variations"), url("../assets/fonts/geist-mono.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* Brand tokens (canonical, do not edit) */
  --color-primary: #111111;
  --color-secondary: #1E2A2F;
  --color-accent: #2A9D8F;
  --color-accent-muted: #5BB8AD;
  --color-neutral-900: #111111;
  --color-neutral-700: #2C2C2C;
  --color-neutral-500: #767676;
  --color-neutral-300: #C5C5C5;
  --color-neutral-100: #EBEBEB;
  --color-surface: #F6F6F6;
  --color-background: #FFFFFF;
  --color-surface-dark: #1A1A1A;
  --color-background-dark: #0A0A0A;
  --color-text-inverse: #FFFFFF;

  --gradient-signal: linear-gradient(135deg, #2A9D8F 0%, #1E2A2F 100%);
  --gradient-glow: linear-gradient(135deg, #5BB8AD 0%, #2A9D8F 100%);
  --gradient-depth: linear-gradient(180deg, #111111 0%, #1E2A2F 100%);
  --gradient-subtle: linear-gradient(180deg, #FFFFFF 0%, #F6F6F6 100%);

  --font-primary: "Geist", "Geist Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "Geist Mono", "JetBrains Mono", "Fira Code", ui-monospace, monospace;

  --text-display: 3rem;
  --text-h1: 2.25rem;
  --text-h2: 1.75rem;
  --text-h3: 1.375rem;
  --text-h4: 1.125rem;
  --text-body-large: 1.125rem;
  --text-body: 1rem;
  --text-body-small: 0.875rem;
  --text-caption: 0.75rem;
  --text-label: 0.75rem;

  /* Motion tokens */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-move: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: linear(0, 0.22 7%, 0.6 16%, 0.9 25%, 1.06 34%, 1.1 40%, 1.08 47%, 1.02 58%, 0.995 70%, 1);
  --d-press: 120ms;
  --d-state: 220ms;
  --d-move: 420ms;
  --d-story: 900ms;

  /* Layout */
  --gutter: 16px;
  --max: 1200px;
  --radius: 10px;
  --radius-lg: 16px;
  --section-space: 72px;

  /* Semantic theme: light */
  --bg: var(--color-background);
  --bg-elev: var(--color-surface);
  --bg-sunk: var(--color-neutral-100);
  --fg: var(--color-neutral-900);
  --fg-2: var(--color-neutral-700);
  --fg-3: var(--color-neutral-500);
  --line: var(--color-neutral-100);
  --line-strong: var(--color-neutral-300);
  --invert-bg: var(--color-primary);
  --invert-fg: var(--color-text-inverse);
  --sel-bg: var(--color-primary);
  --sel-fg: var(--color-text-inverse);
  --signal: var(--color-accent);          /* non-text indicators: dots, rings, bars */
  --signal-soft: color-mix(in srgb, var(--color-accent) 12%, transparent);
  --mark: color-mix(in srgb, var(--color-accent-muted) 32%, transparent);
  --shadow: 0 1px 2px rgb(17 17 17 / 0.06), 0 8px 24px rgb(17 17 17 / 0.06);
  --shadow-lift: 0 2px 4px rgb(17 17 17 / 0.08), 0 16px 40px rgb(17 17 17 / 0.12);

  /* Status (UI semantics only; outside the brand palette by design) */
  --ok: #067647;
  --warn: #B54708;
  --bad: #B42318;
  --ok-bg: #ECFDF3;
  --warn-bg: #FFFAEB;
  --bad-bg: #FEF3F2;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--color-background-dark);
    --bg-elev: var(--color-surface-dark);
    --bg-sunk: #141414;
    --fg: var(--color-text-inverse);
    --fg-2: var(--color-neutral-100);
    --fg-3: var(--color-neutral-300);
    --line: var(--color-neutral-700);
    --line-strong: #4A4A4A;
    --invert-bg: var(--color-text-inverse);
    --invert-fg: var(--color-primary);
    --sel-bg: var(--color-accent);
    --sel-fg: var(--color-primary);
    --signal-soft: color-mix(in srgb, var(--color-accent) 22%, transparent);
    --mark: color-mix(in srgb, var(--color-accent) 40%, transparent);
    --shadow: 0 1px 2px rgb(0 0 0 / 0.5), 0 8px 24px rgb(0 0 0 / 0.4);
    --shadow-lift: 0 2px 4px rgb(0 0 0 / 0.5), 0 16px 40px rgb(0 0 0 / 0.55);
    --ok: #47CD89;
    --warn: #FDB022;
    --bad: #F97066;
    --ok-bg: rgb(71 205 137 / 0.12);
    --warn-bg: rgb(253 176 34 / 0.12);
    --bad-bg: rgb(249 112 102 / 0.12);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: var(--color-background-dark);
  --bg-elev: var(--color-surface-dark);
  --bg-sunk: #141414;
  --fg: var(--color-text-inverse);
  --fg-2: var(--color-neutral-100);
  --fg-3: var(--color-neutral-300);
  --line: var(--color-neutral-700);
  --line-strong: #4A4A4A;
  --invert-bg: var(--color-text-inverse);
  --invert-fg: var(--color-primary);
  --sel-bg: var(--color-accent);
  --sel-fg: var(--color-primary);
  --signal-soft: color-mix(in srgb, var(--color-accent) 22%, transparent);
  --mark: color-mix(in srgb, var(--color-accent) 40%, transparent);
  --shadow: 0 1px 2px rgb(0 0 0 / 0.5), 0 8px 24px rgb(0 0 0 / 0.4);
  --shadow-lift: 0 2px 4px rgb(0 0 0 / 0.5), 0 16px 40px rgb(0 0 0 / 0.55);
  --ok: #47CD89;
  --warn: #FDB022;
  --bad: #F97066;
  --ok-bg: rgb(71 205 137 / 0.12);
  --warn-bg: rgb(253 176 34 / 0.12);
  --bad-bg: rgb(249 112 102 / 0.12);
  color-scheme: dark;
}

@media (min-width: 720px) { :root { --gutter: 32px; --section-space: 96px; } }
@media (min-width: 1100px) { :root { --gutter: 48px; --section-space: 120px; } }

/* ---------- Reset + base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 72px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-primary);
  font-size: var(--text-body);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, canvas, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; color: var(--fg); text-wrap: balance; }
p, li { text-wrap: pretty; }
::selection { background: var(--mark); }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }

/* ---------- Type ---------- */
.t-display { font-size: clamp(2.25rem, 4.6vw + 0.6rem, var(--text-display)); line-height: 1.1; font-weight: 700; letter-spacing: -0.03em; }
.t-h1 { font-size: clamp(1.75rem, 2.4vw + 0.9rem, var(--text-h1)); line-height: 1.15; font-weight: 700; letter-spacing: -0.025em; }
.t-h2 { font-size: clamp(1.375rem, 1.4vw + 0.95rem, var(--text-h2)); line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; }
.t-h3 { font-size: var(--text-h3); line-height: 1.3; font-weight: 600; letter-spacing: -0.015em; }
.t-h4 { font-size: var(--text-h4); line-height: 1.35; font-weight: 600; letter-spacing: -0.01em; }
.t-lead { font-size: var(--text-body-large); line-height: 1.6; color: var(--fg-2); }
.t-small { font-size: var(--text-body-small); line-height: 1.5; }
.t-caption { font-size: var(--text-caption); line-height: 1.4; letter-spacing: 0.01em; color: var(--fg-3); }
.label {
  font-size: var(--text-label); line-height: 1.3; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3);
}
.mono { font-family: var(--font-mono); font-size: var(--text-body-small); font-variant-numeric: tabular-nums; }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 500; letter-spacing: -0.01em; }
.muted { color: var(--fg-3); }
.strong { font-weight: 600; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-space); position: relative; }
.section + .section { border-top: 1px solid var(--line); }
.section__head { max-width: 46rem; margin-bottom: clamp(32px, 4vw, 56px); }
.section__head .label { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.section__head .label::before { content: ""; width: 18px; height: 2px; background: var(--signal); border-radius: 2px; }
.section__head h2 { margin-bottom: 14px; }
.stack > * + * { margin-top: var(--stack, 16px); }
.grid-2 { display: grid; gap: 24px; }
@media (min-width: 860px) { .grid-2 { grid-template-columns: 1fr 1fr; gap: 40px; } }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--invert-bg); color: var(--invert-fg); padding: 10px 14px; border-radius: 8px; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------- Logo (mask keeps it single-color and theme-aware) ---------- */
.logo { display: inline-block; aspect-ratio: 1055 / 151; height: 18px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='1055' height='151' viewBox='0 0 1055 151' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cg clip-path='url(%23clip0_39_16)'%3E %3Cpath d='M94.2031 95.0118C70.8797 100.315 48.9312 119.072 29.3888 148.533H29.1678C19.7403 149.048 11.5894 149.809 5.86902 150.767C2.45645 151.356 -0.514205 148.385 0.0750156 144.948C4.32232 119.882 4.32232 48.7334 0.0750156 23.667C-0.514205 20.2299 2.45645 17.2592 5.86902 17.8484C8.88878 18.364 12.596 18.8059 16.7942 19.1987C39.381 60.1496 65.7977 86.1981 94.1785 92.2376C95.7007 92.5567 95.7007 94.6681 94.2031 95.0118Z' fill='%231A1815'/%3E %3Cpath d='M132.992 144.949C133.581 148.386 130.611 151.357 127.174 150.767C117.01 149.073 99.3575 148.042 80.2324 147.698C89.5372 121.699 106.846 102.967 129.85 94.9141C130.144 115.193 131.175 134.245 132.992 144.949Z' fill='%231A1815'/%3E %3Cpath d='M75.959 20.9909C96.6799 20.7454 116.272 19.6898 127.172 17.8484C130.609 17.2592 133.58 20.2299 132.991 23.667C130.732 36.949 129.652 63.1693 129.824 88.6041V88.7514C102.548 79.1765 83.3242 54.6993 75.959 20.9909Z' fill='%231A1815'/%3E %3Cpath d='M175.295 88.775C175.295 57.3499 194.739 35.7451 224.397 35.7451C250.126 35.7451 267.213 52.4397 269.57 75.0265H249.733C248.751 64.6169 242.859 51.6541 224.593 51.6541C203.185 51.6541 195.328 69.9199 195.328 88.775C195.328 107.63 203.185 125.7 224.593 125.7C243.055 125.7 248.751 113.129 249.733 101.738H269.57C268.195 124.717 250.322 141.805 224.593 141.805C194.739 141.805 175.295 120.2 175.295 88.775Z' fill='%231A1815'/%3E %3Cpath d='M350.882 38.6914H370.13V138.859H350.882V126.289H350.489C345.186 133.949 334.777 141.609 317.493 141.609C299.03 141.609 284.104 131.003 284.104 108.023V38.6914H303.351V102.72C303.351 116.272 309.244 125.307 323.778 125.307C340.276 125.307 350.882 115.29 350.882 100.167V38.6914Z' fill='%231A1815'/%3E %3Cpath d='M447.514 36.9242V55.3864C445.157 54.9936 443.389 54.7972 441.033 54.7972C423.552 54.7972 410.982 67.9565 410.982 87.008V138.859H391.734V38.6918H410.982V57.7433H411.375C416.678 45.1733 424.731 36.335 438.283 36.335C441.818 36.335 444.568 36.5314 447.514 36.9242Z' fill='%231A1815'/%3E %3Cpath d='M458.904 20.8191V0H480.705V20.8191H458.904ZM460.083 138.86V38.6922H479.331V138.86H460.083Z' fill='%231A1815'/%3E %3Cpath d='M495.635 88.7771C495.635 57.5484 514.49 35.5508 545.915 35.5508C577.34 35.5508 595.802 57.352 595.802 88.5807C595.802 119.809 576.947 141.807 545.719 141.807C514.49 141.807 495.635 120.202 495.635 88.7771ZM575.769 88.7771C575.769 67.7615 566.341 51.6562 545.915 51.6562C525.489 51.6562 515.668 67.7615 515.668 88.7771C515.668 109.793 525.096 125.898 545.915 125.898C566.734 125.898 575.769 109.596 575.769 88.7771Z' fill='%231A1815'/%3E %3Cpath d='M678.095 38.6914H697.343V138.859H678.095V126.289H677.702C672.399 133.949 661.989 141.609 644.706 141.609C626.243 141.609 611.316 131.003 611.316 108.023V38.6914H630.564V102.72C630.564 116.272 636.457 125.307 650.991 125.307C667.489 125.307 678.095 115.29 678.095 100.167V38.6914Z' fill='%231A1815'/%3E %3Cpath d='M712.27 105.47H731.714C732.499 117.058 739.57 126.092 758.229 126.092C775.12 126.092 779.637 118.629 779.637 111.362C779.637 98.7917 766.281 97.4169 753.319 94.6672C735.838 90.5427 715.805 85.4361 715.805 64.6169C715.805 47.3331 729.75 35.7451 753.908 35.7451C781.405 35.7451 794.564 50.4756 795.939 67.7595H776.495C775.12 60.0996 770.995 51.2613 754.301 51.2613C741.338 51.2613 735.838 56.3678 735.838 63.8313C735.838 74.2409 747.034 75.2229 761.175 78.3654C779.637 82.6864 799.671 87.9894 799.671 110.38C799.671 129.824 784.744 141.608 758.425 141.608C727.982 141.608 712.859 125.896 712.27 105.47Z' fill='%231A1815'/%3E %3Cpath d='M850.539 88.775C850.539 57.3499 869.983 35.7451 899.641 35.7451C925.37 35.7451 942.458 52.4397 944.814 75.0265H924.977C923.995 64.6169 918.103 51.6541 899.837 51.6541C878.429 51.6541 870.573 69.9199 870.573 88.775C870.573 107.63 878.429 125.7 899.837 125.7C918.299 125.7 923.995 113.129 924.977 101.738H944.814C943.44 124.717 925.566 141.805 899.837 141.805C869.983 141.805 850.539 120.2 850.539 88.775Z' fill='%231A1815'/%3E %3Cpath d='M954.836 88.7771C954.836 57.5484 973.691 35.5508 1005.12 35.5508C1036.54 35.5508 1055 57.352 1055 88.5807C1055 119.809 1036.15 141.807 1004.92 141.807C973.691 141.807 954.836 120.202 954.836 88.7771ZM1034.97 88.7771C1034.97 67.7615 1025.54 51.6562 1005.12 51.6562C984.69 51.6562 974.869 67.7615 974.869 88.7771C974.869 109.793 984.297 125.898 1005.12 125.898C1025.94 125.898 1034.97 109.596 1034.97 88.7771Z' fill='%231A1815'/%3E %3Cpath d='M129.851 94.9142V94.2022C129.851 92.3855 129.826 90.5687 129.826 88.752C130.047 88.8502 130.293 88.9238 130.514 88.9975C130.514 90.8879 130.514 92.7783 130.514 94.6687C130.293 94.7424 130.047 94.816 129.826 94.9142H129.851Z' fill='white'/%3E %3C/g%3E %3Cdefs%3E %3CclipPath id='clip0_39_16'%3E %3Crect width='1055' height='150.841' fill='white'/%3E %3C/clipPath%3E %3C/defs%3E %3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg width='1055' height='151' viewBox='0 0 1055 151' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cg clip-path='url(%23clip0_39_16)'%3E %3Cpath d='M94.2031 95.0118C70.8797 100.315 48.9312 119.072 29.3888 148.533H29.1678C19.7403 149.048 11.5894 149.809 5.86902 150.767C2.45645 151.356 -0.514205 148.385 0.0750156 144.948C4.32232 119.882 4.32232 48.7334 0.0750156 23.667C-0.514205 20.2299 2.45645 17.2592 5.86902 17.8484C8.88878 18.364 12.596 18.8059 16.7942 19.1987C39.381 60.1496 65.7977 86.1981 94.1785 92.2376C95.7007 92.5567 95.7007 94.6681 94.2031 95.0118Z' fill='%231A1815'/%3E %3Cpath d='M132.992 144.949C133.581 148.386 130.611 151.357 127.174 150.767C117.01 149.073 99.3575 148.042 80.2324 147.698C89.5372 121.699 106.846 102.967 129.85 94.9141C130.144 115.193 131.175 134.245 132.992 144.949Z' fill='%231A1815'/%3E %3Cpath d='M75.959 20.9909C96.6799 20.7454 116.272 19.6898 127.172 17.8484C130.609 17.2592 133.58 20.2299 132.991 23.667C130.732 36.949 129.652 63.1693 129.824 88.6041V88.7514C102.548 79.1765 83.3242 54.6993 75.959 20.9909Z' fill='%231A1815'/%3E %3Cpath d='M175.295 88.775C175.295 57.3499 194.739 35.7451 224.397 35.7451C250.126 35.7451 267.213 52.4397 269.57 75.0265H249.733C248.751 64.6169 242.859 51.6541 224.593 51.6541C203.185 51.6541 195.328 69.9199 195.328 88.775C195.328 107.63 203.185 125.7 224.593 125.7C243.055 125.7 248.751 113.129 249.733 101.738H269.57C268.195 124.717 250.322 141.805 224.593 141.805C194.739 141.805 175.295 120.2 175.295 88.775Z' fill='%231A1815'/%3E %3Cpath d='M350.882 38.6914H370.13V138.859H350.882V126.289H350.489C345.186 133.949 334.777 141.609 317.493 141.609C299.03 141.609 284.104 131.003 284.104 108.023V38.6914H303.351V102.72C303.351 116.272 309.244 125.307 323.778 125.307C340.276 125.307 350.882 115.29 350.882 100.167V38.6914Z' fill='%231A1815'/%3E %3Cpath d='M447.514 36.9242V55.3864C445.157 54.9936 443.389 54.7972 441.033 54.7972C423.552 54.7972 410.982 67.9565 410.982 87.008V138.859H391.734V38.6918H410.982V57.7433H411.375C416.678 45.1733 424.731 36.335 438.283 36.335C441.818 36.335 444.568 36.5314 447.514 36.9242Z' fill='%231A1815'/%3E %3Cpath d='M458.904 20.8191V0H480.705V20.8191H458.904ZM460.083 138.86V38.6922H479.331V138.86H460.083Z' fill='%231A1815'/%3E %3Cpath d='M495.635 88.7771C495.635 57.5484 514.49 35.5508 545.915 35.5508C577.34 35.5508 595.802 57.352 595.802 88.5807C595.802 119.809 576.947 141.807 545.719 141.807C514.49 141.807 495.635 120.202 495.635 88.7771ZM575.769 88.7771C575.769 67.7615 566.341 51.6562 545.915 51.6562C525.489 51.6562 515.668 67.7615 515.668 88.7771C515.668 109.793 525.096 125.898 545.915 125.898C566.734 125.898 575.769 109.596 575.769 88.7771Z' fill='%231A1815'/%3E %3Cpath d='M678.095 38.6914H697.343V138.859H678.095V126.289H677.702C672.399 133.949 661.989 141.609 644.706 141.609C626.243 141.609 611.316 131.003 611.316 108.023V38.6914H630.564V102.72C630.564 116.272 636.457 125.307 650.991 125.307C667.489 125.307 678.095 115.29 678.095 100.167V38.6914Z' fill='%231A1815'/%3E %3Cpath d='M712.27 105.47H731.714C732.499 117.058 739.57 126.092 758.229 126.092C775.12 126.092 779.637 118.629 779.637 111.362C779.637 98.7917 766.281 97.4169 753.319 94.6672C735.838 90.5427 715.805 85.4361 715.805 64.6169C715.805 47.3331 729.75 35.7451 753.908 35.7451C781.405 35.7451 794.564 50.4756 795.939 67.7595H776.495C775.12 60.0996 770.995 51.2613 754.301 51.2613C741.338 51.2613 735.838 56.3678 735.838 63.8313C735.838 74.2409 747.034 75.2229 761.175 78.3654C779.637 82.6864 799.671 87.9894 799.671 110.38C799.671 129.824 784.744 141.608 758.425 141.608C727.982 141.608 712.859 125.896 712.27 105.47Z' fill='%231A1815'/%3E %3Cpath d='M850.539 88.775C850.539 57.3499 869.983 35.7451 899.641 35.7451C925.37 35.7451 942.458 52.4397 944.814 75.0265H924.977C923.995 64.6169 918.103 51.6541 899.837 51.6541C878.429 51.6541 870.573 69.9199 870.573 88.775C870.573 107.63 878.429 125.7 899.837 125.7C918.299 125.7 923.995 113.129 924.977 101.738H944.814C943.44 124.717 925.566 141.805 899.837 141.805C869.983 141.805 850.539 120.2 850.539 88.775Z' fill='%231A1815'/%3E %3Cpath d='M954.836 88.7771C954.836 57.5484 973.691 35.5508 1005.12 35.5508C1036.54 35.5508 1055 57.352 1055 88.5807C1055 119.809 1036.15 141.807 1004.92 141.807C973.691 141.807 954.836 120.202 954.836 88.7771ZM1034.97 88.7771C1034.97 67.7615 1025.54 51.6562 1005.12 51.6562C984.69 51.6562 974.869 67.7615 974.869 88.7771C974.869 109.793 984.297 125.898 1005.12 125.898C1025.94 125.898 1034.97 109.596 1034.97 88.7771Z' fill='%231A1815'/%3E %3Cpath d='M129.851 94.9142V94.2022C129.851 92.3855 129.826 90.5687 129.826 88.752C130.047 88.8502 130.293 88.9238 130.514 88.9975C130.514 90.8879 130.514 92.7783 130.514 94.6687C130.293 94.7424 130.047 94.816 129.826 94.9142H129.851Z' fill='white'/%3E %3C/g%3E %3Cdefs%3E %3CclipPath id='clip0_39_16'%3E %3Crect width='1055' height='150.841' fill='white'/%3E %3C/clipPath%3E %3C/defs%3E %3C/svg%3E") no-repeat center / contain; }
.mark { display: inline-block; aspect-ratio: 1; height: 22px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='134' height='134' viewBox='0 0 134 134' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M94.2031 77.2384C70.8797 82.5414 48.9312 101.298 29.3888 130.759H29.1678C19.7403 131.275 11.5894 132.036 5.86902 132.993C2.45645 133.583 -0.514205 130.612 0.0750156 127.175C4.32232 102.108 4.32232 30.96 0.0750156 5.89356C-0.514205 2.45644 2.45645 -0.514221 5.86902 0.075C8.88878 0.590568 12.596 1.03248 16.7942 1.4253C39.381 42.3762 65.7977 68.4246 94.1785 74.4641C95.7007 74.7833 95.7007 76.8947 94.2031 77.2384Z' fill='%231A1815'/%3E %3Cpath d='M132.994 127.175C133.583 130.612 130.613 133.583 127.176 132.994C117.012 131.3 99.3595 130.269 80.2344 129.925C89.5392 103.926 106.848 85.1933 129.852 77.1406C130.146 97.4196 131.177 116.471 132.994 127.175Z' fill='%231A1815'/%3E %3Cpath d='M75.9609 3.21751C96.6819 2.972 116.273 1.91632 127.174 0.075C130.611 -0.514221 133.582 2.45644 132.993 5.89356C130.734 19.1756 129.654 45.3959 129.826 70.8306V70.9779C102.55 61.4031 83.3262 36.9259 75.9609 3.21751Z' fill='%231A1815'/%3E %3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg width='134' height='134' viewBox='0 0 134 134' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M94.2031 77.2384C70.8797 82.5414 48.9312 101.298 29.3888 130.759H29.1678C19.7403 131.275 11.5894 132.036 5.86902 132.993C2.45645 133.583 -0.514205 130.612 0.0750156 127.175C4.32232 102.108 4.32232 30.96 0.0750156 5.89356C-0.514205 2.45644 2.45645 -0.514221 5.86902 0.075C8.88878 0.590568 12.596 1.03248 16.7942 1.4253C39.381 42.3762 65.7977 68.4246 94.1785 74.4641C95.7007 74.7833 95.7007 76.8947 94.2031 77.2384Z' fill='%231A1815'/%3E %3Cpath d='M132.994 127.175C133.583 130.612 130.613 133.583 127.176 132.994C117.012 131.3 99.3595 130.269 80.2344 129.925C89.5392 103.926 106.848 85.1933 129.852 77.1406C130.146 97.4196 131.177 116.471 132.994 127.175Z' fill='%231A1815'/%3E %3Cpath d='M75.9609 3.21751C96.6819 2.972 116.273 1.91632 127.174 0.075C130.611 -0.514221 133.582 2.45644 132.993 5.89356C130.734 19.1756 129.654 45.3959 129.826 70.8306V70.9779C102.55 61.4031 83.3262 36.9259 75.9609 3.21751Z' fill='%231A1815'/%3E %3C/svg%3E") no-repeat center / contain; }

/* ---------- Buttons ---------- */
.btn {
  --_bg: var(--invert-bg); --_fg: var(--invert-fg); --_bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 18px; border-radius: 999px;
  background: var(--_bg); color: var(--_fg); border: 1px solid var(--_bd);
  font-weight: 600; font-size: var(--text-body-small); letter-spacing: 0.005em; text-decoration: none; white-space: nowrap;
  transition: transform var(--d-press) var(--ease-out), background-color var(--d-state) var(--ease-out), box-shadow var(--d-state) var(--ease-out), border-color var(--d-state);
}
.btn:hover { box-shadow: var(--shadow); }
.btn:active { transform: scale(0.97); }
.btn--ghost { --_bg: transparent; --_fg: var(--fg); --_bd: var(--line-strong); }
.btn--ghost:hover { --_bd: var(--fg); box-shadow: none; }
.btn--quiet { --_bg: transparent; --_fg: var(--fg); --_bd: transparent; padding-inline: 10px; }
.btn--quiet:hover { --_bg: var(--bg-elev); box-shadow: none; }
.btn--sm { min-height: 36px; padding: 6px 14px; font-size: var(--text-caption); }
.btn svg { width: 16px; height: 16px; flex: none; }
@media (prefers-reduced-motion: no-preference) { .btn:active { transition-timing-function: var(--ease-spring); } }

.icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; border: 1px solid transparent; background: transparent; color: inherit;
  transition: background-color var(--d-state), border-color var(--d-state), transform var(--d-press); }
.icon-btn:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.icon-btn:active { transform: scale(0.94); }
.icon-btn svg { width: 18px; height: 18px; }

/* ---------- Chips (filters, toggles) ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 12px;
  border-radius: 999px; border: 1px solid var(--line-strong); background: var(--bg); color: var(--fg);
  font-size: var(--text-body-small); font-weight: 500; line-height: 1.2; white-space: nowrap;
  transition: background-color var(--d-state) var(--ease-out), color var(--d-state) var(--ease-out), border-color var(--d-state), transform var(--d-press) var(--ease-out);
}
.chip:hover { border-color: var(--fg); }
.chip:active { transform: scale(0.96); }
.chip[aria-pressed="true"], .chip[aria-checked="true"], .chip.is-on { background: var(--sel-bg); color: var(--sel-fg); border-color: var(--sel-bg); }
.chip__count { font-family: var(--font-mono); font-size: 0.75rem; font-variant-numeric: tabular-nums; padding: 1px 7px; border-radius: 999px; background: var(--bg-sunk); color: var(--fg-2); min-width: 2ch; text-align: center; }
.chip[aria-pressed="true"] .chip__count, .chip.is-on .chip__count { background: color-mix(in srgb, var(--sel-fg) 18%, transparent); color: inherit; }
.chip__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); flex: none; }
.chip[aria-pressed="true"] .chip__dot { background: currentColor; }
@media (prefers-reduced-motion: no-preference) { .chip:active { transition-timing-function: var(--ease-spring); } }

/* Segmented control */
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--bg-elev); border: 1px solid var(--line); }
.seg button { border: 0; background: transparent; padding: 6px 14px; min-height: 32px; border-radius: 999px; font-size: var(--text-body-small); font-weight: 500; color: var(--fg-2); transition: background-color var(--d-state), color var(--d-state); }
.seg button[aria-pressed="true"], .seg button[aria-selected="true"] { background: var(--bg); color: var(--fg); box-shadow: var(--shadow); }
:root[data-theme="dark"] .seg button[aria-pressed="true"], :root[data-theme="dark"] .seg button[aria-selected="true"] { background: var(--color-neutral-700); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .seg button[aria-pressed="true"], :root:not([data-theme="light"]) .seg button[aria-selected="true"] { background: var(--color-neutral-700); } }

/* Switch */
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: var(--text-body-small); font-weight: 500; }
.switch input { appearance: none; width: 36px; height: 22px; border-radius: 999px; background: var(--line-strong); position: relative; margin: 0; flex: none; cursor: pointer; transition: background-color var(--d-state) var(--ease-out); }
.switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 0.25); transition: transform var(--d-state) var(--ease-spring); }
.switch input:checked { background: var(--signal); }
.switch input:checked::after { transform: translateX(14px); }

/* Card */
.card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px; }
.card--elev { background: var(--bg-elev); border-color: transparent; }
@media (min-width: 720px) { .card { padding: 28px; } }

/* Pills / tags */
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 6px; font-size: var(--text-caption); font-weight: 500; line-height: 1.5; background: var(--bg-sunk); color: var(--fg-2); white-space: nowrap; }
.tag--ok { background: var(--ok-bg); color: var(--ok); }
.tag--warn { background: var(--warn-bg); color: var(--warn); }
.tag--bad { background: var(--bad-bg); color: var(--bad); }
.tag--signal { background: var(--signal-soft); color: var(--fg); }
.tag--line { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); }
.kbd { font-family: var(--font-mono); font-size: 0.75rem; padding: 1px 6px; border-radius: 5px; border: 1px solid var(--line-strong); border-bottom-width: 2px; background: var(--bg); color: var(--fg-2); }

/* Range input */
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(to right, var(--fg) var(--fill, 50%), var(--line-strong) var(--fill, 50%)); }
input[type="range"]::-moz-range-track { height: 4px; border-radius: 4px; background: var(--line-strong); }
input[type="range"]::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--fg); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -8px; border-radius: 50%; background: var(--bg); border: 2px solid var(--fg); box-shadow: var(--shadow); transition: transform var(--d-press) var(--ease-out); }
input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--bg); border: 2px solid var(--fg); }
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); }
input[type="range"]:focus-visible { outline: none; }
input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--signal); outline-offset: 2px; }
input[type="range"]:focus-visible::-moz-range-thumb { outline: 2px solid var(--signal); outline-offset: 2px; }

select.select, input.input {
  min-height: 40px; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--bg); color: var(--fg); font-size: var(--text-body-small);
}
select.select { padding-right: 32px; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23767676' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }

/* ---------- Dialog (with @starting-style entrance) ---------- */
dialog.sheet {
  border: 0; padding: 0; margin: auto; max-width: min(760px, calc(100vw - 24px)); width: 100%; max-height: calc(100dvh - 24px);
  border-radius: var(--radius-lg); background: var(--bg); color: var(--fg); box-shadow: var(--shadow-lift); overflow: auto;
  opacity: 1; transform: none;
  transition: opacity var(--d-state) var(--ease-out), transform var(--d-move) var(--ease-out), overlay var(--d-state) allow-discrete, display var(--d-state) allow-discrete;
}
dialog.sheet:not([open]) { opacity: 0; transform: translateY(12px) scale(0.985); }
@starting-style { dialog.sheet[open] { opacity: 0; transform: translateY(12px) scale(0.985); } }
dialog.sheet::backdrop { background: rgb(10 10 10 / 0.5); backdrop-filter: blur(3px); transition: background-color var(--d-state), overlay var(--d-state) allow-discrete, display var(--d-state) allow-discrete; }
@starting-style { dialog.sheet[open]::backdrop { background: rgb(10 10 10 / 0); } }
.sheet__head { position: sticky; top: 0; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 20px 12px; background: var(--bg); border-bottom: 1px solid var(--line); }
.sheet__body { padding: 20px; }
@media (min-width: 720px) { .sheet__head { padding: 28px 28px 16px; } .sheet__body { padding: 24px 28px 32px; } }

/* ---------- Toast ---------- */
.toast-host { position: fixed; left: 50%; bottom: 20px; translate: -50% 0; z-index: 80; display: grid; gap: 8px; pointer-events: none; width: max-content; max-width: calc(100vw - 32px); }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; border-radius: 999px; background: var(--invert-bg); color: var(--invert-fg); box-shadow: var(--shadow-lift); font-size: var(--text-body-small);
  transition: opacity var(--d-state) var(--ease-out), transform var(--d-move) var(--ease-spring); }
@starting-style { .toast { opacity: 0; transform: translateY(16px) scale(0.96); } }
.toast.is-leaving { opacity: 0; transform: translateY(8px); }
.toast button { border: 0; background: color-mix(in srgb, var(--invert-fg) 14%, transparent); color: inherit; padding: 4px 10px; border-radius: 999px; font-weight: 600; font-size: var(--text-caption); }

/* ---------- Tooltip ---------- */
.tip { position: fixed; z-index: 90; max-width: 280px; padding: 8px 10px; border-radius: 8px; background: var(--invert-bg); color: var(--invert-fg); font-size: var(--text-caption); line-height: 1.45; box-shadow: var(--shadow-lift); pointer-events: none;
  opacity: 0; transform: translateY(4px); transition: opacity var(--d-press) var(--ease-out), transform var(--d-state) var(--ease-out); }
.tip.is-on { opacity: 1; transform: none; }

/* ---------- Top bar ---------- */
.topbar { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line); }
.topbar__in { display: flex; align-items: center; gap: 12px; min-height: 60px; }
.topbar__brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--fg); }
.topbar__brand .logo { height: 16px; }
.topbar__for { font-size: var(--text-caption); color: var(--fg-3); padding-left: 12px; border-left: 1px solid var(--line-strong); white-space: nowrap; }
.topbar__spacer { flex: 1; }
@media (max-width: 560px) { .topbar__for { display: none; } }

.progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; transform-origin: 0 50%; transform: scaleX(0); background: var(--signal); }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .progress { animation: progress-grow linear both; animation-timeline: scroll(root block); }
  }
}
@keyframes progress-grow { to { transform: scaleX(1); } }

/* ---------- Reveal (scroll-driven, with JS fallback) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(12px); transition: opacity 600ms var(--ease-out), transform 700ms var(--ease-out); transition-delay: calc(var(--i, 0) * 40ms); }
  .js .reveal.is-in { opacity: 1; transform: none; }
  @supports (animation-timeline: view()) {
    .js .reveal { opacity: 1; transform: none; transition: none; animation: reveal-in linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
  }
}
@keyframes reveal-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* SVG line drawing helper */
.draw { stroke-dasharray: var(--len, 1000); stroke-dashoffset: var(--len, 1000); }
.draw.is-drawn { stroke-dashoffset: 0; transition: stroke-dashoffset var(--d-story) var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .draw { stroke-dashoffset: 0 !important; } }

/* Number ticker: registered property so CSS can interpolate it */
@property --fill { syntax: "<percentage>"; inherits: true; initial-value: 0%; }
@property --meter { syntax: "<number>"; inherits: true; initial-value: 0; }

/* Footer */
.foot { padding-block: 48px 64px; border-top: 1px solid var(--line); color: var(--fg-3); font-size: var(--text-body-small); }
.foot__in { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; }
.foot .logo { height: 14px; color: var(--fg); }

/* Reduced motion: collapse everything to short fades */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .btn:active, .chip:active, .icon-btn:active { transform: none; }
}

/* AA: neutral-500 captions fall to ~4.25:1 on the light surface (#F6F6F6).
   Inside elevated surfaces, captions use neutral-700 in light mode. */
:root { --fg-3-elev: var(--color-neutral-700); }
:root[data-theme="dark"] { --fg-3-elev: var(--color-neutral-300); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --fg-3-elev: var(--color-neutral-300); } }
.card--elev, .qw-demo, .qw-guard, .qw-input, .ex__filters, .tray, .tier, .nl__col:first-child, .headsup__date, .pick-note, .recurring__box,
.ob-notes, .yr, .calc__team, .ib__head, .fb__side, .mp__tx, .tk thead th, .tk-stage, .bsum__rec, .rm__get, .offer__plan, .ib-lane,
.xd__heard, .pk-tile.is-core, .demos__tabs, .seg, .included, .ob-tasks li, .flow, .promises-real, .phase__track, .ig-post { --fg-3: var(--fg-3-elev); }