/* Tidy product pages (/tidy and /tidy/pricing).
   Hand-written, not built by the Tailwind CLI: these pages follow the "Tidy Landing Page"
   design canvas (Outfit / Noto Sans / JetBrains Mono on warm paper), not the agency site's
   look. Lives under /tidy/ rather than /css/ because /css/* is served immutable for a year. */

@font-face { font-family: "Outfit"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/outfit-600.woff2") format("woff2"); }
@font-face { font-family: "Noto Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/noto-sans-400.woff2") format("woff2"); }
@font-face { font-family: "Noto Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/noto-sans-500.woff2") format("woff2"); }
@font-face { font-family: "Noto Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/noto-sans-600.woff2") format("woff2"); }
@font-face { font-family: "Noto Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/noto-sans-700.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/jetbrains-mono-500.woff2") format("woff2"); }

:root {
  --paper: #F4F3EF;
  --white: #FFFFFF;
  --ink: #182226;
  --body: #3E4A4F;
  --muted: #566166;
  --line: #DDD9D0;
  --line-soft: #EEEBE5;
  --accent: #047857;
  --accent-hover: #065F46;
  --accent-wash: #D1FAE5;
  --accent-wash-soft: #ECFDF5;
  --slate: #2B383E;
  --slate-deep: #1E282C;
  --slate-line: #3C4B52;
  --slate-card: #34444B;
  --on-slate: #EEF1F2;
  --on-slate-body: #C4CED2;
  --on-slate-muted: #B3C0C5;
  --orange: #34D399;
  --sand: #E9E6DE;
  --green: #1B7A55;
  --gutter: 120px;
  --display: "Outfit", system-ui, sans-serif;
  --sans: "Noto Sans", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--sans); background: var(--paper); color: var(--ink); line-height: 1.5; }
img { max-width: 100%; height: auto; }
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; margin: 0; }
p { margin: 0; }
section[id] { scroll-margin-top: 96px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.skip { position: absolute; left: -9999px; top: 8px; padding: 12px 16px; background: var(--ink); color: var(--white); z-index: 100; border-radius: 8px; }
.skip:focus { left: 16px; color: var(--white); }

.wrap { padding-left: var(--gutter); padding-right: var(--gutter); }
.eyebrow { font-family: var(--mono); font-size: 13px; letter-spacing: 0.12em; color: var(--accent); }
.on-dark .eyebrow, .eyebrow.on-dark { color: var(--orange); }
.lede { font-size: 18px; line-height: 1.6; color: var(--body); }
.h2-xl { font-size: 52px; line-height: 1.08; letter-spacing: -0.015em; }
.h2-lg { font-size: 44px; line-height: 1.1; letter-spacing: -0.01em; }
.stack { display: flex; flex-direction: column; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 14px 24px; border-radius: 10px; font-size: 16px; font-weight: 600; text-decoration: none; text-align: center; transition: background-color 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out; }
.btn-lg { min-height: 56px; padding: 16px 28px; font-size: 17px; }
.btn-accent { background: var(--accent); color: var(--white); }
.btn-accent:hover { background: var(--accent-hover); color: var(--white); }
.btn-orange { background: var(--orange); color: var(--ink); }
.btn-orange:hover { background: #6EE7B7; color: var(--ink); }
.btn-outline { border: 1.5px solid var(--ink); color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--white); }
.btn-ghost-light { border: 1.5px solid var(--on-slate-body); color: var(--white); }
.btn-ghost-light:hover { background: var(--white); color: var(--ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.btn-ico { flex: none; margin-right: 8px; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--line); background: rgba(244, 243, 239, 0.94); backdrop-filter: saturate(1.4) blur(8px); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand-tile { width: 40px; height: 40px; border-radius: 9px; overflow: hidden; background: var(--slate); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.brand-tile img { width: 72px; height: 72px; max-width: none; flex-shrink: 0; }
.brand-name { font-family: var(--display); font-size: 22px; font-weight: 600; line-height: 1.1; display: block; }
.brand-by { font-size: 11px; color: var(--muted); letter-spacing: 0.02em; display: block; }
.main-nav { display: flex; align-items: center; gap: 36px; font-size: 15px; font-weight: 500; }
.main-nav a { color: var(--ink); text-decoration: none; padding: 12px 0; }
.main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--accent); }
.header-actions { display: flex; align-items: center; gap: 12px; }
.header-actions .login { padding: 12px 18px; font-size: 15px; font-weight: 500; color: var(--ink); text-decoration: none; }
.header-actions .login:hover { color: var(--accent); }
.header-actions .btn { min-height: 44px; padding: 12px 20px; font-size: 15px; border-radius: 8px; }
.menu { display: none; position: relative; }
.menu summary { list-style: none; cursor: pointer; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid var(--line); background: var(--white); }
.menu summary::-webkit-details-marker { display: none; }
.menu-panel { position: absolute; right: 0; top: 52px; width: min(280px, calc(100vw - 32px)); background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 8px; box-shadow: 0 20px 40px -24px rgba(24, 34, 38, 0.4); display: flex; flex-direction: column; }
.menu-panel a { padding: 12px 14px; border-radius: 8px; color: var(--ink); text-decoration: none; font-weight: 500; }
.menu-panel a:hover { background: var(--paper); }
.menu-panel .btn { margin-top: 8px; color: var(--white); }

/* Hero */
/* The hero is one centered column: the headline block, then the AI takeoff screenshot, so the
   screenshot is the first thing a visitor sees (OD 2026-10-24: "our above the fold load").
   The agent switch, proof line and the one Create Account / Log in pair sit under it. */
.hero { position: relative; overflow: hidden; padding-top: 40px; padding-bottom: 96px; padding-inline: max(var(--gutter), calc((100% - 1600px) / 2)); display: flex; flex-direction: column; align-items: center; gap: 32px; background: radial-gradient(ellipse 70% 55% at 50% 72%, var(--white) 0%, rgba(255, 255, 255, 0) 70%), var(--paper); }
.hero-copy { max-width: 800px; position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.hero .showcase { width: 100%; }
/* On a desktop, size the screenshot so all of it fits in the first screen: the copy above it
   takes about 400px, and the frame is about 2.1 times as wide as it is tall. */
@media (min-width: 1024px) { .hero .showcase-stage { max-width: clamp(640px, (100svh - 416px) * 2.1, 936px); } }
.hero h1 { font-size: 56px; line-height: 1.03; letter-spacing: -0.02em; }
.hero h1 .nowrap { white-space: nowrap; }
.hero-sub { max-width: 720px; font-size: 21px; line-height: 1.55; color: var(--body); }
.hero .btn-row { margin-top: 8px; }
.hero-note { margin-top: -12px; font-size: 15px; font-weight: 700; color: var(--ink); }
/* The factory scene, moved out of the hero (OD 2026-10-24) into its own band between How it
   works and Feature Previews. Capped at 720px, the size it had as 45% of the old hero row. */
.scene-band { padding-top: 0; padding-bottom: 96px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.hero-scene { width: 100%; max-width: 720px; min-width: 0; pointer-events: none; }
.hero-scene svg { display: block; width: 100%; height: auto; }
.scene-caption { max-width: 640px; font-size: 19px; line-height: 1.55; color: var(--body); }
@media (max-width: 639px) { .scene-band { padding-bottom: 64px; } .scene-caption { font-size: 17px; } }
.showcase { display: flex; flex-direction: column; gap: 32px; }
.showcase-stage, .showcase-copy { width: 100%; max-width: 900px; margin-left: auto; margin-right: auto; }
.showcase-stage { position: relative; max-width: 936px; }
.showcase-stage > .shot-frame { position: relative; z-index: 1; }

/* Floating agent tiles either side of the screenshot. Decorative (aria-hidden); the
   agent row above the factory scene is the accessible copy. Only shown where there is room.
   They burst out of the screenshot on the first scroll (the script adds .is-released). */
.agent-cloud { display: none; position: absolute; top: -72px; bottom: 0; width: calc(50vw - 50% - 64px); }
.agent-cloud-left { right: calc(100% + 32px); }
.agent-cloud-right { left: calc(100% + 32px); }
.agent-tile { position: absolute; width: var(--s); height: var(--s); display: block; opacity: 0; scale: 0; pointer-events: none; transition: scale 280ms cubic-bezier(0.55, 0, 1, 0.45), opacity 180ms linear 100ms; }
.showcase.is-released .agent-tile { opacity: 1; scale: 1; pointer-events: auto; transition: scale 720ms cubic-bezier(0.34, 1.56, 0.64, 1) var(--e), opacity 120ms linear var(--e); }
.agent-face { width: 100%; height: 100%; border-radius: calc(var(--s) * 0.28); display: grid; place-items: center; overflow: hidden; background: var(--white); box-shadow: 0 1px 2px rgba(24, 34, 38, 0.06), 0 14px 28px -14px rgba(24, 34, 38, 0.35); rotate: var(--r); animation: agent-float var(--t) ease-in-out var(--d) infinite alternate; transition: scale 160ms cubic-bezier(0.23, 1, 0.32, 1); }
.agent-tile:hover .agent-face { scale: 1.06; }
.agent-face img { width: 44%; height: 44%; display: block; }
.agent-face .ask-ai-photo { width: 64%; height: 64%; border-radius: 50%; object-fit: cover; }
.agent-face .ask-ai-app { width: 56%; height: 56%; object-fit: contain; }
.agent-face.is-far { opacity: 0.8; }
@keyframes agent-float { from { translate: 0 0; rotate: var(--r); } to { translate: 0 -14px; rotate: calc(var(--r) + 4deg); } }
@media (min-width: 1400px) { .agent-cloud { display: block; } }
@media (prefers-reduced-motion: reduce) {
  .agent-tile, .showcase.is-released .agent-tile { scale: 1; transition: opacity 200ms linear; }
  .agent-face { animation: none; transition: none; }
  .agent-tile:hover .agent-face { scale: none; }
}

/* One-line agent row above the factory scene (moved out of the hero, OD 2026-10-24). */
/* One line whatever the count: each logo is up to 36px and shrinks evenly when the column is tight. */
.ask-agents { width: 100%; max-width: 1040px; display: flex; flex-direction: column; align-items: center; gap: 16px; margin-bottom: 24px; }
.ask-agents-sub { margin: 0; max-width: 560px; font-size: 17px; line-height: 1.55; color: var(--body); }
.hero-agents { list-style: none; margin: 16px 0 0; padding: 0; max-width: 664px; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 8px; }
.hero-agent { width: 88px; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 4px 0; border-radius: 12px; color: var(--ink); text-decoration: none; }
.hero-agent-face { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: var(--white); box-shadow: 0 0 0 1px var(--line-soft), 0 2px 4px rgba(24, 34, 38, 0.08), 0 10px 20px -10px rgba(24, 34, 38, 0.35); transition: translate 160ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 160ms cubic-bezier(0.23, 1, 0.32, 1); }
.hero-agent-name { font-size: 14px; line-height: 1.2; color: var(--body); white-space: nowrap; transition: color 160ms cubic-bezier(0.23, 1, 0.32, 1); }
.hero-agent:hover { color: var(--ink); }
.hero-agent:hover .hero-agent-face { translate: 0 -4px; box-shadow: 0 0 0 2px var(--accent), 0 2px 4px rgba(24, 34, 38, 0.08), 0 14px 24px -10px rgba(24, 34, 38, 0.4); }
.hero-agent:hover .hero-agent-name { color: var(--accent); }
.hero-agent:active .hero-agent-face { scale: 0.97; }
.hero-agent:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hero-agent img { width: 44%; height: 44%; display: block; }
.hero-agent .ask-ai-photo { width: 70%; height: 70%; border-radius: 50%; object-fit: cover; }
.hero-agent .ask-ai-app { width: 61%; height: 61%; object-fit: contain; }
@media (prefers-reduced-motion: reduce) { .hero-agent-face { transition: none; } .hero-agent:hover .hero-agent-face { translate: none; } }
.copy-toast { position: fixed; left: 50%; bottom: 24px; z-index: 50; translate: -50% 0; padding: 8px 16px; border-radius: 999px; background: var(--slate); color: var(--white); font-size: 14px; box-shadow: 0 12px 28px -12px rgba(24, 34, 38, 0.5); }
.showcase-copy { display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center; }
.showcase-copy .btn-row { justify-content: center; }

/* Hero scene motion: transform and opacity only. Each moving part reads its
   phase from --d so the loop never starts empty and a paused frame still tells the story. */
.hs-belt { animation: hs-belt 530ms linear infinite; }
.hs-sheet { animation: hs-sheet 7.5s linear infinite; }
.hs-coin { animation: hs-coin 5.6s linear infinite; }
.hs-spin { transform-box: fill-box; transform-origin: 50% 50%; animation: hs-spin 5.6s linear infinite; }
.hs-glow { animation: hs-glow 2.4s ease-in-out infinite alternate; }
.hs-chip { animation: hs-bob 4s ease-in-out infinite alternate; }
.hs-float { animation: hs-float 2.8s ease-in-out infinite alternate; }
.hs-beam { animation: hs-glow 1.4s ease-in-out infinite alternate; }
.hs-blink { transform-box: fill-box; transform-origin: 50% 50%; animation: hs-blink 4.6s linear infinite; }
.hs-sheet, .hs-coin, .hs-spin, .hs-chip, .hs-float, .hs-beam, .hs-blink { animation-delay: var(--d, 0s); }
@keyframes hs-belt { to { transform: translate(0, -24px); } }
@keyframes hs-sheet { 0% { transform: translate(0, 0); opacity: 0; } 6% { opacity: 1; } 100% { transform: translate(0, -340px); opacity: 1; } }
@keyframes hs-coin { 0% { transform: translate(0, 0); opacity: 1; } 80% { transform: translate(278px, 0); opacity: 1; } 100% { transform: translate(312px, 44px); opacity: 0; } }
@keyframes hs-spin { to { transform: rotate(890deg); } }
@keyframes hs-glow { from { opacity: 0.45; } to { opacity: 1; } }
@keyframes hs-float { from { transform: translate(0, 0); } to { transform: translate(0, -12px); } }
@keyframes hs-blink { 0%, 90%, 100% { transform: scale(1, 1); } 94% { transform: scale(1, 0.15); } }
@keyframes hs-bob { from { transform: translate(0, 0); } to { transform: translate(0, -6px); } }
/* Estimator: walks down the drawing-set belt, stops to take notes, turns, walks back (16s loop). */
.hs-walker { animation: hs-walk 16s linear infinite; }
.hs-facing { animation: hs-face 16s step-end infinite; }
.hs-leg-a, .hs-leg-b, .hs-pen { transform-box: fill-box; transform-origin: 50% 0; animation: hs-leg-a 16s linear infinite; }
.hs-leg-b { animation-name: hs-leg-b; }
.hs-pen { transform-origin: 0 0; animation-name: hs-pen; }
@keyframes hs-walk { 0% { transform: translate(0, 0); } 36%, 50% { transform: translate(-104px, 60px); } 86%, 100% { transform: translate(0, 0); } }
@keyframes hs-face { 0% { transform: scale(1, 1); } 50% { transform: scale(-1, 1); } }
@keyframes hs-leg-a { 0% { transform: rotate(0deg); } 1.12% { transform: rotate(18deg); } 2.25% { transform: rotate(0deg); } 3.38% { transform: rotate(-18deg); } 4.5% { transform: rotate(0deg); } 5.62% { transform: rotate(18deg); } 6.75% { transform: rotate(0deg); } 7.88% { transform: rotate(-18deg); } 9% { transform: rotate(0deg); } 10.1% { transform: rotate(18deg); } 11.2% { transform: rotate(0deg); } 12.4% { transform: rotate(-18deg); } 13.5% { transform: rotate(0deg); } 14.6% { transform: rotate(18deg); } 15.8% { transform: rotate(0deg); } 16.9% { transform: rotate(-18deg); } 18% { transform: rotate(0deg); } 19.1% { transform: rotate(18deg); } 20.2% { transform: rotate(0deg); } 21.4% { transform: rotate(-18deg); } 22.5% { transform: rotate(0deg); } 23.6% { transform: rotate(18deg); } 24.8% { transform: rotate(0deg); } 25.9% { transform: rotate(-18deg); } 27% { transform: rotate(0deg); } 28.1% { transform: rotate(18deg); } 29.2% { transform: rotate(0deg); } 30.4% { transform: rotate(-18deg); } 31.5% { transform: rotate(0deg); } 32.6% { transform: rotate(18deg); } 33.8% { transform: rotate(0deg); } 34.9% { transform: rotate(-18deg); } 36% { transform: rotate(0deg); } 50% { transform: rotate(0deg); } 51.1% { transform: rotate(18deg); } 52.2% { transform: rotate(0deg); } 53.4% { transform: rotate(-18deg); } 54.5% { transform: rotate(0deg); } 55.6% { transform: rotate(18deg); } 56.8% { transform: rotate(0deg); } 57.9% { transform: rotate(-18deg); } 59% { transform: rotate(0deg); } 60.1% { transform: rotate(18deg); } 61.2% { transform: rotate(0deg); } 62.4% { transform: rotate(-18deg); } 63.5% { transform: rotate(0deg); } 64.6% { transform: rotate(18deg); } 65.8% { transform: rotate(0deg); } 66.9% { transform: rotate(-18deg); } 68% { transform: rotate(0deg); } 69.1% { transform: rotate(18deg); } 70.2% { transform: rotate(0deg); } 71.4% { transform: rotate(-18deg); } 72.5% { transform: rotate(0deg); } 73.6% { transform: rotate(18deg); } 74.8% { transform: rotate(0deg); } 75.9% { transform: rotate(-18deg); } 77% { transform: rotate(0deg); } 78.1% { transform: rotate(18deg); } 79.2% { transform: rotate(0deg); } 80.4% { transform: rotate(-18deg); } 81.5% { transform: rotate(0deg); } 82.6% { transform: rotate(18deg); } 83.8% { transform: rotate(0deg); } 84.9% { transform: rotate(-18deg); } 86% { transform: rotate(0deg); } 100% { transform: rotate(0deg); } }
@keyframes hs-leg-b { 0% { transform: rotate(0deg); } 1.12% { transform: rotate(-18deg); } 2.25% { transform: rotate(0deg); } 3.38% { transform: rotate(18deg); } 4.5% { transform: rotate(0deg); } 5.62% { transform: rotate(-18deg); } 6.75% { transform: rotate(0deg); } 7.88% { transform: rotate(18deg); } 9% { transform: rotate(0deg); } 10.1% { transform: rotate(-18deg); } 11.2% { transform: rotate(0deg); } 12.4% { transform: rotate(18deg); } 13.5% { transform: rotate(0deg); } 14.6% { transform: rotate(-18deg); } 15.8% { transform: rotate(0deg); } 16.9% { transform: rotate(18deg); } 18% { transform: rotate(0deg); } 19.1% { transform: rotate(-18deg); } 20.2% { transform: rotate(0deg); } 21.4% { transform: rotate(18deg); } 22.5% { transform: rotate(0deg); } 23.6% { transform: rotate(-18deg); } 24.8% { transform: rotate(0deg); } 25.9% { transform: rotate(18deg); } 27% { transform: rotate(0deg); } 28.1% { transform: rotate(-18deg); } 29.2% { transform: rotate(0deg); } 30.4% { transform: rotate(18deg); } 31.5% { transform: rotate(0deg); } 32.6% { transform: rotate(-18deg); } 33.8% { transform: rotate(0deg); } 34.9% { transform: rotate(18deg); } 36% { transform: rotate(0deg); } 50% { transform: rotate(0deg); } 51.1% { transform: rotate(-18deg); } 52.2% { transform: rotate(0deg); } 53.4% { transform: rotate(18deg); } 54.5% { transform: rotate(0deg); } 55.6% { transform: rotate(-18deg); } 56.8% { transform: rotate(0deg); } 57.9% { transform: rotate(18deg); } 59% { transform: rotate(0deg); } 60.1% { transform: rotate(-18deg); } 61.2% { transform: rotate(0deg); } 62.4% { transform: rotate(18deg); } 63.5% { transform: rotate(0deg); } 64.6% { transform: rotate(-18deg); } 65.8% { transform: rotate(0deg); } 66.9% { transform: rotate(18deg); } 68% { transform: rotate(0deg); } 69.1% { transform: rotate(-18deg); } 70.2% { transform: rotate(0deg); } 71.4% { transform: rotate(18deg); } 72.5% { transform: rotate(0deg); } 73.6% { transform: rotate(-18deg); } 74.8% { transform: rotate(0deg); } 75.9% { transform: rotate(18deg); } 77% { transform: rotate(0deg); } 78.1% { transform: rotate(-18deg); } 79.2% { transform: rotate(0deg); } 80.4% { transform: rotate(18deg); } 81.5% { transform: rotate(0deg); } 82.6% { transform: rotate(-18deg); } 83.8% { transform: rotate(0deg); } 84.9% { transform: rotate(18deg); } 86% { transform: rotate(0deg); } 100% { transform: rotate(0deg); } }
@keyframes hs-pen { 0% { transform: rotate(0deg); } 36% { transform: rotate(0deg); } 37% { transform: rotate(-9deg); } 37.8% { transform: rotate(4deg); } 38.6% { transform: rotate(-9deg); } 39.4% { transform: rotate(4deg); } 40.2% { transform: rotate(-9deg); } 41% { transform: rotate(4deg); } 41.8% { transform: rotate(-9deg); } 42.6% { transform: rotate(4deg); } 43.4% { transform: rotate(-9deg); } 44.2% { transform: rotate(4deg); } 45% { transform: rotate(-9deg); } 45.8% { transform: rotate(4deg); } 46.6% { transform: rotate(-9deg); } 47.4% { transform: rotate(4deg); } 48.2% { transform: rotate(-9deg); } 49% { transform: rotate(4deg); } 50% { transform: rotate(0deg); } 87% { transform: rotate(-9deg); } 87.8% { transform: rotate(4deg); } 88.6% { transform: rotate(-9deg); } 89.4% { transform: rotate(4deg); } 90.2% { transform: rotate(-9deg); } 91% { transform: rotate(4deg); } 91.8% { transform: rotate(-9deg); } 92.6% { transform: rotate(4deg); } 93.4% { transform: rotate(-9deg); } 94.2% { transform: rotate(4deg); } 95% { transform: rotate(-9deg); } 95.8% { transform: rotate(4deg); } 96.6% { transform: rotate(-9deg); } 97.4% { transform: rotate(4deg); } 98.2% { transform: rotate(-9deg); } 99% { transform: rotate(4deg); } 100% { transform: rotate(0deg); } }
.hero-scene.is-paused * { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .hero-scene * { animation-play-state: paused !important; } }
.shot-frame { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.shot-dark { border-radius: 16px; background: var(--slate); padding: 14px; box-shadow: 0 30px 60px -30px rgba(24, 34, 38, 0.45); }
.shot-dark img { display: block; width: 100%; border-radius: 8px; }
.shot-frame figcaption { font-size: 14px; color: var(--muted); }
.showcase figcaption { text-align: center; }

/* How it works: four rows, each a pitch beside a small live mock of the app. Every
   mock's resting style is its finished frame; the .tv-* keyframes only replay how it got
   there, so reduced motion (and rows scrolled out of view, see .is-paused) still read. */
.tour { padding-top: 112px; padding-bottom: 112px; display: flex; flex-direction: column; gap: 40px; }
.previews + .tour { padding-top: 32px; } /* Feature Previews sits right above How it works (OD 2026-10-24); its own bottom padding already makes the gap. */
.tour-cta { display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center; }
.tour-cta .btn-row { justify-content: center; }
.tour-head { margin-bottom: 32px; }
.tour-head { display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 780px; margin-inline: auto; text-align: center; }
.tour-row { width: 100%; max-width: 1200px; margin-inline: auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; padding: 16px 16px 16px 56px; border-radius: 28px; border: 1px solid var(--line); background: var(--white); box-shadow: 0 1px 2px rgba(24, 34, 38, 0.04), 0 16px 40px -24px rgba(24, 34, 38, 0.18); }
.tour-row.is-flip { padding: 16px 56px 16px 16px; }
.tour-row.is-flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.tour-row.is-flip .tour-copy { order: 2; }
.tour-copy { display: flex; flex-direction: column; gap: 18px; }
.tour-copy h3 { font-size: 36px; line-height: 1.12; letter-spacing: -0.01em; }
.tour-copy p { font-size: 18px; line-height: 1.6; color: var(--body); }
.tour-points { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.tour-points li { display: flex; align-items: center; gap: 12px; font-size: 16px; color: var(--ink); }
.tour-points svg { flex: none; width: 24px; height: 24px; padding: 4px; border-radius: 50%; background: var(--accent-wash); color: var(--accent); }
.tour-visual { position: relative; display: grid; place-items: center; padding: 72px 48px; border-radius: 20px; background: radial-gradient(ellipse 70% 80% at 50% 45%, var(--accent-wash-soft) 0%, rgba(236, 253, 245, 0) 70%), var(--paper); overflow: hidden; }
.mock { width: 100%; max-width: 500px; border-radius: 14px; border: 1px solid var(--line); background: var(--white); box-shadow: 0 1px 2px rgba(24, 34, 38, 0.05), 0 24px 48px -24px rgba(24, 34, 38, 0.3); font-size: 14px; color: var(--ink); text-align: left; }
.mock-head { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
.mock-head strong { font-family: var(--display); font-size: 16px; font-weight: 600; }
.mock-count { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--line-soft); font-size: 12px; text-align: center; color: var(--body); }
.mock-seg { margin-left: auto; display: flex; gap: 2px; padding: 3px; border-radius: 8px; background: var(--line-soft); font-size: 12px; }
.mock-seg b, .mock-seg i { padding: 3px 10px; border-radius: 6px; font-style: normal; font-weight: 500; }
.mock-seg b { background: var(--white); box-shadow: 0 1px 2px rgba(24, 34, 38, 0.12); }
.mock-seg i { color: var(--muted); }
.mock-note { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--accent); }
.mock-note::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #10B981; }

/* Tasks */
.mock-tasks { list-style: none; margin: 0; padding: 0; }
.mock-tasks li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
.mock-tasks li:last-child { border-bottom: 0; }
.mock-tasks .cb { position: relative; width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid #9AA6AB; background: var(--white); }
.mock-tasks .tt { position: relative; min-width: 0; }
.mock-tasks .tt em { display: block; margin-top: 2px; font-style: normal; font-size: 12px; color: var(--accent); }
.mock-tasks .due { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.mock-tasks .is-late { padding: 2px 8px; border-radius: 999px; background: #FEE2E2; color: #B91C1C; }
.mock-tasks .tv-done .cb { border-color: var(--accent); background: var(--accent); }
.mock-tasks .tv-done .cb::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid var(--white); border-width: 0 2px 2px 0; rotate: 45deg; }
.mock-tasks .tv-done .tt { justify-self: start; color: var(--muted); }
.mock-tasks .tv-done .tt::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: var(--muted); transform-origin: left; }
.mock-tasks .tv-new { background: var(--white); }

/* Floating chips around a mock */
.chip { position: absolute; display: flex; align-items: center; gap: 10px; max-width: min(360px, calc(100% - 48px)); padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--white); box-shadow: 0 16px 32px -16px rgba(24, 34, 38, 0.35); font-size: 13px; line-height: 1.4; color: var(--ink); }
.chip img { flex: none; }
.chip svg { flex: none; width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--accent); color: var(--white); }
.chip code, .mock code { font-family: var(--mono); font-size: 12px; }
.chip-ask, .chip-token { top: 18px; left: 24px; }
.chip-sent, .chip-pub { bottom: 18px; right: 24px; }
.chip-token .hash { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--ink); color: var(--white); font-family: var(--mono); font-size: 13px; }

/* Follow-up draft */
.draft { padding: 16px; }
.draft-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.draft-top b { display: block; font-size: 14px; }
.draft-top small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.tag-red { flex: none; padding: 3px 9px; border-radius: 999px; background: #DC2626; color: var(--white); font-size: 11px; font-weight: 600; white-space: nowrap; }
.draft-subj { margin: 12px 0 6px; font-size: 13px; font-weight: 500; }
.draft-body span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; line-height: 1.65; color: var(--body); }
.draft-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.draft-actions span { padding: 7px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; }
.b-ghost { border: 1px solid #FCA5A5; background: #FEF2F2; color: #B91C1C; }
.b-send { background: var(--ink); color: var(--white); }

/* Records */
.mock-tabs { margin-left: auto; display: flex; gap: 2px; padding: 3px; border-radius: 8px; background: var(--line-soft); font-size: 12px; }
.mock-tabs span { padding: 3px 9px; border-radius: 6px; font-weight: 500; color: var(--muted); }
.mock-tabs .is-on { background: var(--white); color: var(--ink); box-shadow: 0 1px 2px rgba(24, 34, 38, 0.12); }
.rec-table { width: 100%; border-collapse: collapse; }
.rec-table th { padding: 10px 16px; border-bottom: 1px solid var(--line-soft); font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; text-align: left; color: var(--muted); white-space: nowrap; }
.rec-table td { padding: 11px 16px; border-bottom: 1px solid var(--line-soft); font-size: 13px; white-space: nowrap; }
.rec-table tr:last-child td { border-bottom: 0; }
.rec-table td.ag img { width: 16px; height: 16px; margin-right: 6px; border-radius: 4px; object-fit: contain; vertical-align: -3px; }
.rec-table .st { display: inline-grid; vertical-align: middle; }
.rec-table .s { grid-area: 1 / 1; justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; opacity: 0; }
.rec-table .s-q { background: var(--line-soft); color: var(--muted); }
.rec-table .s-w { background: #FEF3C7; color: #92400E; }
.rec-table .s-w::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #D97706; animation: tv-dot 1s ease-in-out infinite; }
.rec-table .s-d { background: var(--accent-wash); color: var(--accent); }
.rec-table .r-q .s-q, .rec-table .r-w .s-w, .rec-table .r-d .s-d { opacity: 1; }

/* Your agent */
.chat { display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.msg { max-width: 88%; padding: 10px 14px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; }
.msg-me { align-self: flex-end; border-bottom-right-radius: 4px; background: var(--ink); color: var(--white); }
.msg-me code { padding: 1px 5px; border-radius: 4px; background: rgba(255, 255, 255, 0.16); }
.msg-bot { align-self: flex-start; border-bottom-left-radius: 4px; background: var(--paper); }

/* Motion. Each loop replays the mock from empty to its finished frame. */
.tv-ask { animation: tv-ask 10s cubic-bezier(0.23, 1, 0.32, 1) infinite; }
.tv-new { animation: tv-new 10s cubic-bezier(0.23, 1, 0.32, 1) infinite; }
.tv-done .cb { animation: tv-check 10s step-end infinite; }
.tv-done .cb::after { animation: tv-fade 10s step-end infinite; }
.tv-done .tt::after { animation: tv-strike 10s cubic-bezier(0.23, 1, 0.32, 1) infinite; }
.tv-late { animation: tv-pulse 2s ease-out infinite; }
@keyframes tv-ask { 0%, 4% { opacity: 0; translate: 0 8px; } 10%, 88% { opacity: 1; translate: 0 0; } 95%, 100% { opacity: 0; translate: 0 -4px; } }
@keyframes tv-new { 0%, 20% { opacity: 0; translate: 0 10px; background: var(--accent-wash); } 28% { opacity: 1; translate: 0 0; background: var(--accent-wash); } 60%, 90% { opacity: 1; background: var(--white); } 97%, 100% { opacity: 0; background: var(--white); } }
@keyframes tv-check { 0% { border-color: #9AA6AB; background: var(--white); } 50% { border-color: var(--accent); background: var(--accent); } }
@keyframes tv-fade { 0% { opacity: 0; } 50% { opacity: 1; } }
@keyframes tv-strike { 0%, 50% { scale: 0 1; } 56%, 100% { scale: 1 1; } }
@keyframes tv-pulse { 0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.35); } 100% { box-shadow: 0 0 0 7px rgba(220, 38, 38, 0); } }

.tv-type { animation: 11s linear infinite; }
.tv-type[style*="--i:0"] { animation-name: tv-type0; }
.tv-type[style*="--i:1"] { animation-name: tv-type1; }
.tv-type[style*="--i:2"] { animation-name: tv-type2; }
.tv-type[style*="--i:3"] { animation-name: tv-type3; }
@keyframes tv-type0 { 0%, 6% { clip-path: inset(0 100% 0 0); } 18%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes tv-type1 { 0%, 18% { clip-path: inset(0 100% 0 0); } 30%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes tv-type2 { 0%, 30% { clip-path: inset(0 100% 0 0); } 42%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes tv-type3 { 0%, 42% { clip-path: inset(0 100% 0 0); } 48%, 100% { clip-path: inset(0 0 0 0); } }
.tv-send { animation: tv-send 11s cubic-bezier(0.23, 1, 0.32, 1) infinite; }
.tv-sent { animation: tv-sent 11s cubic-bezier(0.23, 1, 0.32, 1) infinite; }
@keyframes tv-send { 0%, 58% { scale: 1; background: var(--ink); } 61% { scale: 0.94; background: var(--accent); } 65%, 100% { scale: 1; background: var(--accent); } }
@keyframes tv-sent { 0%, 62% { opacity: 0; translate: 0 8px; } 68%, 92% { opacity: 1; translate: 0 0; } 98%, 100% { opacity: 0; translate: 0 0; } }

.rec-table tbody tr:nth-child(1) .s-q { animation: tv-q1 12s ease-in-out infinite; }
.rec-table tbody tr:nth-child(1) .s-w { animation: tv-w1 12s ease-in-out infinite; }
.rec-table tbody tr:nth-child(1) .s-d { animation: tv-d1 12s ease-in-out infinite; }
@keyframes tv-q1 { 0%, 4% { opacity: 1; } 6%, 96% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes tv-w1 { 0%, 4% { opacity: 0; } 6%, 16% { opacity: 1; } 18%, 100% { opacity: 0; } }
@keyframes tv-d1 { 0%, 16% { opacity: 0; scale: 0.9; } 18%, 94% { opacity: 1; scale: 1; } 97%, 100% { opacity: 0; } }
.rec-table tbody tr:nth-child(2) .s-q { animation: tv-q2 12s ease-in-out infinite; }
.rec-table tbody tr:nth-child(2) .s-w { animation: tv-w2 12s ease-in-out infinite; }
.rec-table tbody tr:nth-child(2) .s-d { animation: tv-d2 12s ease-in-out infinite; }
@keyframes tv-q2 { 0%, 22% { opacity: 1; } 24%, 96% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes tv-w2 { 0%, 22% { opacity: 0; } 24%, 34% { opacity: 1; } 36%, 100% { opacity: 0; } }
@keyframes tv-d2 { 0%, 34% { opacity: 0; scale: 0.9; } 36%, 94% { opacity: 1; scale: 1; } 97%, 100% { opacity: 0; } }
.rec-table tbody tr:nth-child(3) .s-q { animation: tv-q3 12s ease-in-out infinite; }
.rec-table tbody tr:nth-child(3) .s-w { animation: tv-w3 12s ease-in-out infinite; }
.rec-table tbody tr:nth-child(3) .s-d { animation: tv-d3 12s ease-in-out infinite; }
@keyframes tv-q3 { 0%, 40% { opacity: 1; } 42%, 96% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes tv-w3 { 0%, 40% { opacity: 0; } 42%, 52% { opacity: 1; } 54%, 100% { opacity: 0; } }
@keyframes tv-d3 { 0%, 52% { opacity: 0; scale: 0.9; } 54%, 94% { opacity: 1; scale: 1; } 97%, 100% { opacity: 0; } }
.rec-table tbody tr:nth-child(4) .s-q { animation: tv-q4 12s ease-in-out infinite; }
.rec-table tbody tr:nth-child(4) .s-w { animation: tv-w4 12s ease-in-out infinite; }
.rec-table tbody tr:nth-child(4) .s-d { animation: tv-d4 12s ease-in-out infinite; }
@keyframes tv-q4 { 0%, 58% { opacity: 1; } 60%, 96% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes tv-w4 { 0%, 58% { opacity: 0; } 60%, 70% { opacity: 1; } 72%, 100% { opacity: 0; } }
@keyframes tv-d4 { 0%, 70% { opacity: 0; scale: 0.9; } 72%, 94% { opacity: 1; scale: 1; } 97%, 100% { opacity: 0; } }
@keyframes tv-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.tv-pub { animation: tv-pub 12s cubic-bezier(0.23, 1, 0.32, 1) infinite; }
@keyframes tv-pub { 0%, 60% { opacity: 0; translate: 0 8px; } 66%, 90% { opacity: 1; translate: 0 0; } 96%, 100% { opacity: 0; } }

.tv-token { animation: tv-token 11s cubic-bezier(0.23, 1, 0.32, 1) infinite; }
.tv-me { animation: tv-me 11s cubic-bezier(0.23, 1, 0.32, 1) infinite; }
.tv-bot { animation: tv-bot 11s cubic-bezier(0.23, 1, 0.32, 1) infinite; }
.tv-bot2 { animation: tv-bot2 11s cubic-bezier(0.23, 1, 0.32, 1) infinite; }
@keyframes tv-token { 0%, 3% { opacity: 0; translate: 0 8px; } 9%, 90% { opacity: 1; translate: 0 0; } 97%, 100% { opacity: 0; } }
@keyframes tv-me { 0%, 16% { opacity: 0; translate: 0 10px; } 22%, 90% { opacity: 1; translate: 0 0; } 97%, 100% { opacity: 0; } }
@keyframes tv-bot { 0%, 34% { opacity: 0; translate: 0 10px; } 40%, 90% { opacity: 1; translate: 0 0; } 97%, 100% { opacity: 0; } }
@keyframes tv-bot2 { 0%, 54% { opacity: 0; translate: 0 10px; } 60%, 90% { opacity: 1; translate: 0 0; } 97%, 100% { opacity: 0; } }

.tour-visual.is-paused * { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .tour-visual *, .tour-visual *::after { animation: none !important; } }

/* Feature Previews */
.previews { padding-top: 32px; padding-bottom: 112px; display: flex; flex-direction: column; align-items: center; gap: 48px; scroll-margin-top: 96px; }
.fp-head { display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 780px; text-align: center; }
.fp-anchor { position: absolute; scroll-margin-top: 96px; }
.previews { position: relative; }
.previews .fp-cta { justify-content: center; margin-top: -8px; }
.fp { width: 100%; max-width: 1600px; display: flex; flex-direction: column; gap: 24px; padding: 32px; border-radius: 28px; border: 1px solid var(--line); background: var(--white); box-shadow: 0 1px 2px rgba(24, 34, 38, 0.04), 0 16px 40px -24px rgba(24, 34, 38, 0.18); }
.fp-dock { display: flex; gap: 8px; padding: 24px 8px 4px; transform-style: preserve-3d; }
.fp-item { position: relative; flex: 1 1 0; min-width: max-content; min-height: 88px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 12px 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); color: var(--body); font: inherit; font-size: 13px; font-weight: 600; line-height: 1.2; text-align: center; cursor: pointer; transform-origin: 50% 100%; box-shadow: 0 1px 2px rgba(24, 34, 38, 0.06); transition: scale 500ms cubic-bezier(0.175, 0.885, 0.32, 1.1), translate 500ms cubic-bezier(0.175, 0.885, 0.32, 1.1), background-color 200ms ease-out, border-color 200ms ease-out, color 200ms ease-out, box-shadow 200ms ease-out; }
.fp-item svg { flex: none; }
.fp-item span { overflow: hidden; text-overflow: ellipsis; max-width: 100%; white-space: nowrap; }
.fp-item[aria-selected="true"] { border-color: var(--accent); background: var(--accent-wash-soft); color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 10px 24px -14px rgba(4, 120, 87, 0.6); }
.fp-item:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .fp-item:hover { scale: 1.22; translate: 0 -12px; z-index: 3; box-shadow: 0 18px 32px -16px rgba(24, 34, 38, 0.45); }
  .fp-item:hover + .fp-item, .fp-item:has(+ .fp-item:hover) { scale: 1.11; translate: 0 -6px; z-index: 2; }
  .fp-item:hover + .fp-item + .fp-item, .fp-item:has(+ .fp-item + .fp-item:hover) { scale: 1.04; translate: 0 -2px; z-index: 1; }
}
.fp-item:active { scale: 1.12; }
.fp-panel { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 40px; align-items: center; }
.fp-panel[hidden] { display: none; }
/* Wide screens: every panel sits in the same grid cell, so the card is as tall as the tallest panel
   and does not jump while the mouse moves along the dock. */
@media (min-width: 1024px) { .fp { display: grid; grid-template-columns: minmax(0, 1fr); } .fp-panel { grid-row: 2; grid-column: 1; } .fp-panel[hidden] { display: grid; visibility: hidden; } }
.fp-panel { animation: fp-in 320ms cubic-bezier(0.23, 1, 0.32, 1); }
@keyframes fp-in { from { opacity: 0; translate: 0 8px; } }
/* Screenshots are shown whole (OD, 2026-10-16): a 16:9 frame, image contained, never cropped. */
.fp-visual { min-width: 0; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: var(--paper); border: 1px solid var(--line-soft); }
.fp-visual > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.fp-v-desk, .fp-v-works, .fp-v-security { overflow: visible; }
.fp-v-desk, .fp-v-works, .fp-v-security { display: grid; place-items: center; padding: 28px; background: radial-gradient(ellipse 70% 80% at 50% 45%, var(--accent-wash-soft) 0%, rgba(236, 253, 245, 0) 70%), var(--paper); }
.fp-tiles { width: 100%; display: grid; gap: 12px; }
.fp-tiles-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; }
.fp-tiles-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fp-tiles > div { display: flex; flex-direction: column; gap: 6px; padding: 16px 20px; border-radius: 14px; border: 1px solid var(--line); background: var(--white); box-shadow: 0 1px 2px rgba(24, 34, 38, 0.05); }
.fp-tiles h4 { margin: 0; font-size: 16px; }
.fp-tiles p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--body); }
.fp-pills { list-style: none; margin: 0; padding: 0; max-width: 820px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.fp-pills li { padding: 12px 20px; border-radius: 999px; border: 1px solid var(--line); background: var(--white); font-size: 16px; font-weight: 600; box-shadow: 0 1px 2px rgba(24, 34, 38, 0.05); }
.fp-desc { order: -1; display: flex; flex-direction: column; gap: 24px; max-width: 300px; padding: 8px 0; }
.fp-desc-copy { display: flex; flex-direction: column; gap: 14px; }
.fp-desc-copy h3 { margin: 0; font-size: 28px; line-height: 1.15; letter-spacing: -0.01em; }
.fp-desc-copy p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--body); }
.fp-desc-points .checks { font-size: 15px; gap: 12px; }
@media (prefers-reduced-motion: reduce) { .fp-item { transition: background-color 200ms ease-out, border-color 200ms ease-out, color 200ms ease-out; } .fp-item:hover, .fp-item:hover + .fp-item, .fp-item:has(+ .fp-item:hover), .fp-item:hover + .fp-item + .fp-item, .fp-item:has(+ .fp-item + .fp-item:hover), .fp-item:active { scale: none; translate: none; } .fp-panel { animation: none; } }

/* Bands */
.section { padding-top: 112px; padding-bottom: 112px; display: flex; flex-direction: column; gap: 56px; }

/* Checks */
.checks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; font-size: 16px; line-height: 1.5; }
.checks li { display: flex; gap: 12px; }
.checks svg { flex-shrink: 0; margin-top: 2px; }

/* Founder */
.founder { padding-top: 112px; padding-bottom: 112px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: start; }
.founder-id { grid-column: span 4; display: flex; flex-direction: column; gap: 18px; }
.founder-id img { width: 160px; height: 160px; border-radius: 12px; object-fit: cover; }
.founder-id strong { font-family: var(--display); font-weight: 600; font-size: 20px; display: block; }
.founder-id span { font-size: 15px; color: var(--muted); }
.founder-copy { grid-column: span 8; display: flex; flex-direction: column; gap: 24px; }
.founder-copy h2 { font-size: 44px; line-height: 1.12; letter-spacing: -0.01em; }
.founder-copy p { font-size: 19px; line-height: 1.65; color: var(--body); }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.stats strong { font-family: var(--display); font-size: 36px; font-weight: 600; display: block; }
.stats span { font-size: 14px; color: var(--muted); }

/* Pricing band + FAQ */
.faq { grid-column: span 7; display: flex; flex-direction: column; }
.faq > h2 { font-size: 36px; margin-bottom: 16px; }
.faq details { border-bottom: 1px solid var(--line); padding: 20px 0; }
.faq summary { font-family: var(--display); font-size: 19px; font-weight: 600; cursor: pointer; min-height: 28px; }
.faq details p { margin-top: 12px; font-size: 16px; line-height: 1.6; color: var(--body); }

/* Final CTA */
.final { padding: 120px var(--gutter); background: var(--slate); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; text-align: center; }
.final h2 { font-size: 64px; line-height: 1.05; letter-spacing: -0.02em; color: var(--white); max-width: 900px; }
.final p { font-size: 19px; line-height: 1.6; color: var(--on-slate-body); max-width: 640px; }
.final .btn-row { justify-content: center; }

/* Footer */
.site-footer { padding: 64px var(--gutter) 48px; background: var(--ink); color: var(--on-slate-muted); display: flex; flex-direction: column; gap: 48px; }
.footer-top { display: flex; justify-content: space-between; gap: 64px; }
.footer-brand { display: flex; flex-direction: column; gap: 14px; max-width: 360px; }
.footer-brand div { display: flex; align-items: center; gap: 10px; }
.footer-brand img { width: 36px; height: 36px; }
.footer-brand strong { font-family: var(--display); font-size: 22px; font-weight: 600; color: var(--white); }
.footer-brand p { font-size: 15px; line-height: 1.6; }
.footer-nav { display: grid; grid-template-columns: repeat(3, minmax(0, auto)); gap: 16px 72px; font-size: 15px; }
.footer-nav div { display: flex; flex-direction: column; gap: 12px; }
.footer-nav .head { font-weight: 600; color: var(--white); }
.footer-nav a { color: var(--on-slate-muted); text-decoration: none; }
.footer-nav a:hover { color: var(--white); text-decoration: underline; }
.footer-legal { padding-top: 24px; border-top: 1px solid #33424A; font-size: 13px; }

/* Pricing page */
.p-hero { padding-top: 88px; padding-bottom: 56px; display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.p-hero :is(h1, h2) { font-size: 68px; line-height: 1.04; letter-spacing: -0.02em; max-width: 900px; }
.p-hero p { font-size: 20px; line-height: 1.55; color: var(--body); max-width: 700px; }
.toggle { margin-top: 12px; display: flex; padding: 5px; border-radius: 999px; background: var(--sand); gap: 4px; }
.toggle button { min-height: 44px; padding: 10px 22px; border: 0; border-radius: 999px; background: transparent; color: var(--body); font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.toggle button[aria-pressed="true"] { background: var(--white); color: var(--ink); box-shadow: 0 1px 3px rgba(24, 34, 38, 0.15); }
.toggle .save { font-size: 12px; font-weight: 600; color: var(--green); }
/* The plan cards row is at most 1800px wide and centered; the gutter still applies below that. */
.plans { padding-inline: max(var(--gutter), calc((100% - 1800px) / 2)); padding-bottom: 40px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.plan { padding: 32px; border-radius: 16px; background: var(--white); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 22px; position: relative; }
.plan.dark { background: var(--slate); color: var(--on-slate); border-color: var(--slate); }
.plan .badge { position: absolute; top: -14px; left: 32px; padding: 6px 12px; border-radius: 999px; background: var(--ink); color: var(--white); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; }
.plan.dark .badge { background: var(--orange); color: var(--ink); }
.plan-head { display: flex; flex-direction: column; gap: 8px; min-height: 120px; }
.plan-head :is(h2, h3) { font-size: 26px; }
.plan.dark .plan-head :is(h2, h3) { color: var(--white); }
.plan-head p { font-size: 15px; line-height: 1.55; color: var(--body); }
.plan.dark .plan-head p { color: var(--on-slate-body); }
.plan-price { display: flex; flex-direction: column; gap: 6px; min-height: 96px; }
.plan-price .amount { font-family: var(--display); font-size: 48px; font-weight: 600; line-height: 1; }
.plan.dark .plan-price .amount { color: var(--white); }
.plan-price .unit { font-size: 15px; color: var(--muted); }
.plan-price .note { font-size: 13px; color: var(--muted); }
.plan-price .price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.plan-price .was { font-family: var(--display); font-size: 22px; font-weight: 500; color: var(--muted); text-decoration-thickness: 2px; }
.plan.dark .plan-price .was { color: var(--on-slate-body); }
.plan-price .save-tag { align-self: center; padding: 3px 10px; border-radius: 999px; background: var(--accent-wash); color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: 0.02em; }
.plan.dark .plan-price .save-tag { background: #34D399; color: #064E3B; }
.plan-price .annual-only .note { color: var(--accent); font-weight: 600; }
.plan.dark .plan-price .annual-only .note { color: #34D399; }
.plan-price .hint { color: var(--accent); font-weight: 600; }
.plan.dark .plan-price .monthly-only .hint { color: #34D399; }
.plan.dark .plan-price .unit, .plan.dark .plan-price .note { color: var(--on-slate-body); }
.plan-inc { display: flex; flex-direction: column; gap: 14px; padding-top: 22px; border-top: 1px solid var(--line-soft); }
.plan.dark .plan-inc { border-top-color: var(--slate-line); }
.plan-inc .label { font-size: 13px; font-weight: 600; color: var(--muted); }
.plan.dark .plan-inc .label { color: var(--on-slate-muted); }
.plan-inc ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; font-size: 15px; line-height: 1.5; }
.plan-inc li { display: flex; gap: 10px; }
.plan-inc svg { flex-shrink: 0; margin-top: 2px; }
.annual-only { display: none; }
[data-billing="annual"] .annual-only { display: flex; }
[data-billing="annual"] .monthly-only { display: none; }
.fine { margin: 0 var(--gutter) 112px; font-size: 15px; line-height: 1.6; color: var(--body); text-align: center; }
/* /tidy shows the plan cards only; the full comparison and billing FAQ stay on /tidy/pricing (OD, 2026-10-16). */
.pricing .p-hero { padding-top: 40px; }
.pricing-more { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px var(--gutter) 112px; text-align: center; }
.pricing-more .btn-row { justify-content: center; }
.pricing-more p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--body); }
.compare { padding-bottom: 112px; display: flex; flex-direction: column; gap: 32px; }
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--white); }
.compare table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 15px; }
.compare thead tr { text-align: left; border-bottom: 2px solid var(--ink); }
.compare thead th { padding: 22px 16px; font-family: var(--display); font-size: 18px; font-weight: 600; text-align: center; width: 13.5%; }
.compare thead th:first-child { padding-left: 28px; text-align: left; font-size: 16px; width: 46%; }
.compare .col-pro { background: var(--accent-wash); }
.compare tbody td { padding: 15px 8px; text-align: center; border-top: 1px solid var(--line-soft); }
.compare tbody td:first-child { padding-left: 28px; text-align: left; }
.compare tbody td:nth-child(3) { background: var(--accent-wash-soft); }
.compare .group th { background: var(--paper); padding: 14px 28px; text-align: left; font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; color: var(--accent); font-weight: 500; }
.compare .no { color: var(--muted); }
.billing-faq { padding-bottom: 112px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.billing-faq .intro { grid-column: span 4; display: flex; flex-direction: column; gap: 16px; }
.billing-faq .intro h2 { font-size: 40px; line-height: 1.1; }
.billing-faq .intro p { font-size: 16px; line-height: 1.6; color: var(--body); }
.billing-faq .faq { grid-column: span 8; }
.founder, .home-faq { width: 100%; max-width: calc(1200px + 2 * var(--gutter)); margin-inline: auto; }
.final.compact { padding: 112px var(--gutter); gap: 26px; }
.final.compact h2 { font-size: 56px; line-height: 1.06; max-width: 860px; }

/* Responsive */
@media (max-width: 1279px) {
  :root { --gutter: 64px; }
  .main-nav { gap: 24px; }
  .hero h1 { font-size: 46px; }
  .hero-sub { font-size: 19px; }
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
  .plan-head, .plan-price { min-height: 0; }
}
@media (max-width: 1023px) {
  .fp { padding: 20px; }
  .fp-dock { overflow-x: auto; padding: 8px 4px 8px; scrollbar-width: none; }
  .fp-item { flex: 0 0 112px; }
  .fp-visual { aspect-ratio: auto; }
  .fp-visual > img { height: auto; }
  .fp-v-desk, .fp-v-works, .fp-v-security { height: auto; padding: 24px; }
  .fp-panel { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .fp-desc { gap: 20px; padding: 0 4px; max-width: none; }
  .fp-tiles-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tour { padding-top: 88px; padding-bottom: 88px; gap: 80px; }
  .tour-row, .tour-row.is-flip { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 40px 16px 16px; }
  .tour-row .tour-copy { padding-inline: 24px; }
  .tour-row.is-flip .tour-copy { order: 0; }
  :root { --gutter: 40px; }
  .main-nav, .header-actions .login { display: none; }
  .menu { display: block; }
  .hero { padding-top: 48px; padding-bottom: 72px; gap: 32px; }
  .hero h1 { font-size: min(52px, calc((100vw - 2 * var(--gutter)) / 11.2)); }
  .h2-xl, .final h2 { font-size: 42px; }
  .h2-lg, .founder-copy h2 { font-size: 36px; }
  .p-hero :is(h1, h2), .final.compact h2 { font-size: 48px; }
  .section, .founder, .works { padding-top: 80px; padding-bottom: 80px; }
  .final { padding-top: 88px; padding-bottom: 88px; }
  .footer-top { flex-direction: column; align-items: flex-start; gap: 24px; }
  .founder-id, .founder-copy, .faq, .billing-faq .intro, .billing-faq .faq { grid-column: 1 / -1; }
  .billing-faq { row-gap: 24px; }
}
@media (max-width: 639px) {
  .previews { padding-bottom: 72px; gap: 32px; }
  .fp { padding: 12px; border-radius: 22px; gap: 16px; }
  .fp-item { flex-basis: 112px; min-height: 76px; font-size: 12px; }
  .fp-visual { border-radius: 14px; }
  .fp-v-desk, .fp-v-works, .fp-v-security { height: auto; padding: 16px; }
  .fp-tiles-4, .fp-tiles-3 { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .fp-tiles > div { padding: 14px 16px; }
  .fp-pills li { padding: 8px 14px; font-size: 14px; }
  .fp-desc-copy h3 { font-size: 24px; }
  .fp-desc-copy p { font-size: 16px; }
  .tour { padding-top: 72px; padding-bottom: 72px; gap: 24px; }
  .tour-row, .tour-row.is-flip { padding: 32px 8px 8px; border-radius: 22px; }
  .tour-row .tour-copy { padding-inline: 12px; }
  .tour-copy h3 { font-size: 28px; }
  .tour-copy p { font-size: 17px; }
  .tour-visual { padding: 72px 12px 64px; border-radius: 18px; }
  .chip { font-size: 12px; padding: 8px 12px; }
  .chip-ask, .chip-token { left: 12px; top: 12px; }
  .chip-sent, .chip-pub { right: 12px; bottom: 12px; }
  .mock-head { flex-wrap: wrap; }
  .rec-table th:nth-child(2), .rec-table td:nth-child(2) { display: none; }
  .rec-table th, .rec-table td { padding-left: 12px; padding-right: 12px; }
  .mock-tabs span:nth-child(n+3) { display: none; }
  .rec-table td.ag span { display: none; }
  .hero-agents { gap: 16px 4px; }
  .hero-agent { width: 64px; }
  .hero-agent-face { width: 52px; height: 52px; }
  .hero-agent-name { font-size: 12px; white-space: normal; text-align: center; }
  .ask-agents-sub { font-size: 16px; }
  :root { --gutter: 16px; }
  .site-header { height: 72px; gap: 12px; }
  .brand-by { display: none; }
  .header-actions > .btn { display: none; }
  .hero { padding-top: 40px; padding-bottom: 56px; gap: 24px; }
  .hero h1 { font-size: min(40px, calc((100vw - 2 * var(--gutter)) / 11.2)); }
  .hero-sub { font-size: 18px; }
  .hs-chip { display: none; }
  .showcase { gap: 24px; }
  .h2-xl, .final h2, .h2-lg, .founder-copy h2 { font-size: 32px; }
  .p-hero { padding-top: 56px; }
  .p-hero :is(h1, h2), .final.compact h2 { font-size: 38px; }
  .p-hero p { font-size: 18px; }
  .btn-row .btn { flex: 1 1 100%; }
  .shot-dark, .media-dark { padding: 8px; border-radius: 12px; }
  .plans, .stats { grid-template-columns: minmax(0, 1fr); }
  .stats { gap: 16px; }
  .footer-nav { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .fine { margin-bottom: 80px; }
  .final, .final.compact { padding-top: 72px; padding-bottom: 72px; }
}

/* Enterprise inquiry page (/enterprise) */
.ent { padding-top: 72px; padding-bottom: 112px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.ent-intro { display: flex; flex-direction: column; gap: 20px; }
.ent-intro h1 { font-size: 56px; line-height: 1.06; letter-spacing: -0.02em; }
.ent-sub { font-size: 20px; line-height: 1.3; margin-top: 8px; }
.ent-od { display: flex; gap: 16px; align-items: center; margin-top: 8px; padding-top: 24px; border-top: 1px solid var(--line); }
.ent-od img { width: 72px; height: 72px; border-radius: 12px; object-fit: cover; flex: none; }
.ent-od strong { display: block; font-family: var(--display); font-weight: 600; font-size: 18px; }
.ent-od span { font-size: 15px; line-height: 1.5; color: var(--muted); }
.ent-card { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 40px; }
.ent-form { display: flex; flex-direction: column; gap: 20px; }
.ent-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
.ent-field { display: flex; flex-direction: column; gap: 8px; }
.ent-field label { font-size: 15px; font-weight: 600; color: var(--ink); }
.ent-field .opt { font-weight: 400; color: var(--muted); }
.ent-field :is(input, select, textarea) { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); color: var(--ink); font: 16px/1.4 var(--sans); transition: border-color 150ms ease-out, box-shadow 150ms ease-out; }
.ent-field textarea { resize: vertical; min-height: 112px; }
.ent-field :is(input, select, textarea)::placeholder { color: #767676; }
.ent-field :is(input, select, textarea):focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
.ent-form.was-checked :is(input, select, textarea):invalid { border-color: #B42318; }
.ent-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ent-error { font-size: 15px; line-height: 1.5; color: #B42318; }
.ent-form .btn { align-self: flex-start; border: 0; cursor: pointer; }
.ent-form .btn:disabled { opacity: 0.7; cursor: wait; }
.ent-fine { font-size: 14px; color: var(--muted); }
.ent-done { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; outline: none; }
.ent-done[hidden], .ent-form[hidden] { display: none; }
.ent-done svg { width: 40px; height: 40px; padding: 8px; border-radius: 50%; background: var(--accent-wash-soft); }
.ent-done h2 { font-size: 32px; line-height: 1.15; }
.ent-done p { font-size: 17px; line-height: 1.6; color: var(--body); }
@media (max-width: 1023px) {
  .ent { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-top: 56px; padding-bottom: 80px; }
  .ent-intro h1 { font-size: 44px; }
}
@media (max-width: 639px) {
  .ent-grid { grid-template-columns: minmax(0, 1fr); }
  .ent-card { padding: 24px 20px; }
  .ent-intro h1 { font-size: 36px; }
  .ent-form .btn { align-self: stretch; }
}