/* Direction D2 (mock-up): D, raised to the Tiimo / Todoist / Structured standard (marketing/SITE-TEARDOWN.md).
   Full width, the page color follows the scroll, a sticky product story, real-app pieces in layers, hover states.
   Brand sheet colors only. Every text color here passes WCAG AA on every page tint and on every blend between them. */

:root {
  --t-paper: #F5F7F6; --t-white: #FFFFFF; --t-soft: #E2F1EA; --t-amber: #FBEED3;
  --green-text: #23634E;              /* accent ink: AA on every light tint (6.1+); plain green is only 4.4 on soft */
  --wide: min(1280px, 100% - 48px);
}
@media (prefers-color-scheme: dark) {
  :root { --t-paper: #121413; --t-white: #1B1E1C; --t-soft: #0D211B; --t-amber: #2A2112; --green-text: #5CC2A2; }
}
.wrap { width: var(--wide); }
.narrow { width: min(760px, 100% - 48px); }
.eyebrow, .callouts li, .why thead th.us { color: var(--green-text); }
.why .no { color: var(--ink-2); }
.lead, .show p, .tx p { max-width: 36em; }   /* about 65–70 characters a line */

/* ---------- 1 · Page color that follows the scroll ----------
   Without script, or with Reduce Motion, every section simply has its own color. With motion, sections go see-through
   and a fixed stack of color layers (opacity only, so 60 fps) blends from one section's color to the next as the next
   section's heading reaches the reading zone. */
body { background: var(--t-paper); }
[data-tint="paper"] { background: var(--t-paper); } [data-tint="white"] { background: var(--t-white); }
[data-tint="soft"] { background: var(--t-soft); }   [data-tint="amber"] { background: var(--t-amber); }
section.band { border-block: 0; }
.tints { position: fixed; top: 0; left: 0; right: 0; height: calc(100vh + 240px); height: calc(100lvh + 240px); z-index: -1; pointer-events: none; }  /* runs on under Safari's toolbar (D2-3) */
.tints i { position: absolute; inset: 0; }
.tints i.b { opacity: 0; will-change: opacity; }   /* only the top layer fades: 2 layers instead of one per section */
html.tinted { background: var(--t-paper); }
html.tinted body { background: transparent; }
html.tinted [data-tint] { background: transparent; }

/* ---------- 2 · Hero: full width, the stage runs to the right edge, real-app pieces lift off the phone ---------- */
@media (min-width: 900px) { .hero .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); } }
.hero h1 { font-size: clamp(2.6rem, 4.9vw, 4.4rem); }
.hero-vis { position: relative; }
@media (min-width: 900px) {
  .hero-vis .stage { margin-right: calc((100vw - min(1280px, 100vw - 48px)) / -2); border-radius: 36px 0 0 36px; padding-bottom: 56px; }
  .hero .stage .phone { width: 360px; margin-left: clamp(40px, 9vw, 140px); }
}
.pieces { position: absolute; inset: 0; pointer-events: none; }
.pc { position: absolute; background: var(--surface); color: var(--ink); border-radius: 16px; padding: 12px 14px;
  box-shadow: 0 1px 2px rgba(12,32,24,.10), 0 10px 24px -6px rgba(12,32,24,.20), 0 30px 60px -20px rgba(12,32,24,.25);
  transform: translate3d(0, var(--py, 0px), 0); will-change: transform; font: 13px/1.3 var(--font-body); }
.pc b { display: block; font-weight: 600; font-size: 14px; } .pc small { display: block; color: var(--ink-2); font-size: 12px; }
.hero { overflow-x: clip; }
.pc-row { display: flex; align-items: center; gap: 10px; top: 58%; right: clamp(8px, 3vw, 48px); width: min(320px, 86%); }
.pc-row .cb { width: 20px; height: 20px; border: 1.6px solid #9AA6A0; border-radius: 6px; flex: none; }
.pc-row .ico { font-size: 14px; } .pc-row em { margin-left: auto; font-style: normal; font: 600 12px var(--font-body); background: #FBEED3; color: #7A4E00; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
@media (prefers-color-scheme: dark) {
  .pc { box-shadow: 0 0 0 1px rgba(255,255,255,.07), 0 18px 40px -10px rgba(0,0,0,.65); }
  .pc-row em { background: #3A2A0E; color: #F2C677; }
}
@media (max-width: 899px) {
  .pc { transform: none; font-size: 12px; } .pc-row { right: 2%; top: 62%; width: min(300px, 78vw); }
}
@media (prefers-reduced-motion: no-preference) {
  .js-motion .pc { opacity: 0; }
  .js-motion .pc.in { opacity: 1; transition: opacity .7s var(--ease); }
}

/* ---------- 3 · Six apps: worries run edge to edge in two endless rows, drifting opposite ways ---------- */
/* d2.js repeats each row's items until one copy is wider than the row, then doubles it; the row moves by exactly half
   (padding-right = the gap, so both halves are the same width), so the loop never shows a gap or jumps */
.worries { margin: 36px 0 8px; overflow: hidden; display: grid; gap: 10px; }
.worries ul { display: flex; gap: 10px; margin: 0; padding: 0 10px 0 0; list-style: none; width: max-content; }
@media (prefers-reduced-motion: no-preference) {
  .worries ul.run { animation: worry 60s linear infinite; will-change: transform; }
  .worries .w2.run { animation-direction: reverse; }
  .worries.off ul { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) { .worries .w2 { transform: translateX(-14%); } }
@keyframes worry { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.worries li { background: var(--soft); color: var(--ink); border-radius: 999px; padding: 10px 18px; font-size: 1rem; white-space: nowrap; }
.worries .w2 li { background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
@media (prefers-color-scheme: dark) { .worries .w2 li { background: #121413; } }

/* ---------- 4 · Sticky product story with the margin line (approved element C) ---------- */
.story { margin-top: 48px; }
.chap { display: grid; grid-template-columns: 120px 1fr; }
.chap .ml { text-align: right; padding: 6px 24px 0 0; font: 600 .95rem var(--font-body); color: var(--ink-2); transition: color .3s var(--ease); }
.chap.on .ml { color: var(--green-text); }
.chap .tx { padding: 0 0 0 28px; }
.chaps { position: relative; }
.chaps::before { content: ""; position: absolute; left: 120px; top: 0; bottom: 0; width: 1px; background: color-mix(in srgb, var(--green) 50%, transparent); }
.gleaf { position: absolute; left: 114px; top: 0; width: 12px; height: 20px; background: var(--amber); border-radius: 12px 0 12px 0; transform: rotate(20deg); box-shadow: 0 0 0 3px var(--t-soft); transition: transform .35s var(--ease); z-index: 1; }
.story-vis { display: none; }
.stage.white { --tint: var(--surface); box-shadow: 0 1px 2px rgba(12,32,24,.06), 0 18px 40px -18px rgba(12,32,24,.18); }
@media (prefers-color-scheme: dark) { .stage.white { --tint: #1B1E1C; box-shadow: 0 0 0 1px rgba(255,255,255,.06); } }
.chap { margin-bottom: 56px; } .chap-img { grid-column: 1 / -1; }
@media (max-width: 979px) {
  .chap { grid-template-columns: 1fr; padding-left: 22px; } .chaps::before { left: 0; } .gleaf { left: -6px; }
  .chap .ml { text-align: left; padding: 0 0 6px; } .chap .tx { padding: 0; }
}
@media (min-width: 980px) {
  .story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
  .chap { min-height: min(44vh, 380px); align-content: center; margin: 0; }
  .chaps { padding-bottom: max(100px, calc(560px - 50vh)); }   /* the sticky phone holds below the header through the last chapter */
  .chap-img { display: none; }
  .story-vis { display: block; height: 100%; }
  .story-vis .sticky { position: sticky; top: max(80px, calc(50vh - 360px)); padding-top: 64px; }   /* the phone sits 56 px above its card, so this keeps it below the header (D2-4) */
  .story-vis .stage { margin-top: 0; }
  .story-vis .phone { width: 280px; }
  .story-vis .sl { display: block; width: 100%; height: auto; opacity: 0; transition: opacity .45s var(--ease); }
  .story-vis .sl:not([data-i="0"]) { position: absolute; inset: 0; height: 100%; object-fit: cover; }
  .story-vis .phone[data-active="0"] .sl[data-i="0"], .story-vis .phone[data-active="1"] .sl[data-i="1"], .story-vis .phone[data-active="2"] .sl[data-i="2"] { opacity: 1; }
}

/* ---------- 5 · Fern Assistant: the deep fern panel grows to full width as it arrives ---------- */
.assist-sec { position: relative; isolation: isolate; padding-block: clamp(24px, 4vw, 56px); }
.assist-sec .assist { background: transparent; }
.assist-bg { position: absolute; inset: 0 auto 0 50%; width: 100vw; margin-left: -50vw; background: var(--night); border-radius: 40px; z-index: -1;
  transform: scaleX(var(--grow, 1)); will-change: transform; }
.assist-sec .assist { padding-block: clamp(56px, 8vw, 104px); }
@media (prefers-reduced-motion: reduce) { .assist-bg { border-radius: 0; } }

/* ---------- 6 · Hover states on a computer (150 ms lift, brand easing) ---------- */
@media (hover: hover) {
  .app, .plan, .why tbody tr, #faq summary, .btn, .one-fern { transition: transform .15s var(--ease), box-shadow .15s var(--ease), background-color .15s var(--ease); }
  .app:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(12,32,24,.08), 0 14px 26px -10px rgba(12,32,24,.25); }
  .plan:hover { transform: translateY(-4px); } .plan.pro:hover { transform: translateY(-14px); }
  .why tbody tr:hover th, .why tbody tr:hover td { background: color-mix(in srgb, var(--soft) 55%, var(--surface)); }
  #faq summary:hover { color: var(--green-text); }
  .btn:hover { transform: translateY(-1px); }
  .chap:hover .ml { color: var(--green-text); }
}

/* Reveals arrive once */
@media (prefers-reduced-motion: no-preference) {
  .js-motion .rise { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity .7s var(--ease), transform .7s var(--ease); }
  .js-motion .rise.in { opacity: 1; transform: none; }
}

/* One line instead of three icons (critic item 5) */
.also-line { max-width: 44em; margin: clamp(32px, 5vw, 56px) auto 0; text-align: center; color: var(--ink-2); font-size: 1.05rem; text-wrap: balance; }
/* The amber stroke ends before the comma (critic item 15) */
.leaf::before { transform: none; bottom: -.15em; }      /* level, under the letters (critic, Oct 30) */
.hero .leaf::before { right: 24%; transform: none; }
/* No big gap above the footer (critic item 17) */
footer { margin-top: 0; }
#join { padding-bottom: clamp(48px, 7vw, 88px); }
/* A Mac, because "iPhone and Mac" is a launch promise (critic item 16). The screen is the real app (the Mac runs the iPad app) */
.mac-win { max-width: 880px; margin: clamp(32px, 4vw, 48px) auto 0; border-radius: 14px; overflow: hidden; background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(12,32,24,.08), 0 24px 60px -24px rgba(12,32,24,.35); }
.mac-bar { position: relative; height: 32px; display: flex; align-items: center; gap: 8px; padding: 0 14px; background: color-mix(in srgb, var(--surface) 93%, var(--ink)); }
.mac-bar i { width: 12px; height: 12px; border-radius: 50%; background: #FF5F57; } .mac-bar i + i { background: #FEBC2E; } .mac-bar i + i + i { background: #28C840; }
.mac-bar span { position: absolute; left: 0; right: 0; text-align: center; font: 600 13px var(--font-body); color: var(--ink-2); }
.mac-win img { display: block; width: 100%; height: auto; }
@media (prefers-color-scheme: dark) { .mac-win { box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 24px 60px -20px rgba(0,0,0,.7); } }

/* Pricing: the founding price is the first thing you see, once, with its deadline beside it (Ranya, Oct 30) */
.plan.pro .found { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin: 4px 0 6px; }
.plan.pro .found .price { margin: 0; font-size: clamp(2.6rem, 4.2vw, 3.3rem); line-height: 1; }
.plan.pro .found .sticker { position: static; margin: 0; transform: rotate(-4deg); }
.plan.pro .after { margin: 0 0 4px; color: var(--ink-3); font-size: .9rem; line-height: 1.45; }
/* More room before "Why Fern", and the dark panel ends sooner (Ranya, Oct 30) */
.assist-sec { padding-bottom: 0; }
.assist-sec .assist { padding-bottom: clamp(32px, 4vw, 56px); }
.assist-sec + section { padding-top: clamp(88px, 11vw, 144px); }
.plan.pro .found .sticker small { font-size: .84rem; font-weight: 700; }