/* Fennick marketing site. Colours are the app's own, copied exactly from apps/web/src/style.css (:root and its dark
   blocks; her colour pick 10/14): Notion's page, text, lines and hover, the blue accent for links and focus only.
   Buttons are black with white words, and the inverse in dark (her 10/22 word: "just use black"). The tag pastels
   (apps/web/src/tones.js) are content colours only. Geist for everything, as in the app. */
:root {
  --bg: #ffffff; --paper: #ffffff; --fg: #37352f; --muted: #6c6b68; --faint: #9b9a97;
  --line: #e9e9e7; --soft: #efefed; --accent: #2383e2; --accent-solid: #0e76d4; --accent-soft: #e0eefb;
  --side: #ffffff; --hover: rgba(55, 53, 47, .08); --press: rgba(55, 53, 47, .12); --ring: rgba(15, 15, 15, .06);
  --dot: #8a857e; --danger: #cd4541;
  --link: var(--accent-solid);
  --btn: #000000; --btn-hover: #2f2f2f; --on-btn: #ffffff; --mark: #000000;
  --idea-lilac: #b4a3e6; --idea-peach: #eba96f;   /* the cover's two small accent dots (make12.py A) */
  --shadow: 0 0 0 1px var(--ring), 0 4px 12px rgba(15, 15, 15, .10);
  --frame-shadow: 0 0 0 1px var(--ring), 0 12px 32px rgba(15, 15, 15, .12);
  /* tag pastels: content colours only (ink and chip) */
  --peach-i: #c06b2e; --peach-c: #fbe7d5;
  --sage-i: #57904f; --sage-c: #e3f0df;
  --lilac-i: #7a5fc0; --lilac-c: #ebe6f9;
  --butter-i: #a17f1c; --butter-c: #faf1ce;
  --mist-i: #3f7fa6; --mist-c: #dfedf6;
  --rose-i: #c04e86; --rose-c: #fae3ee;
  --clay-i: #b25743; --clay-c: #f6e2dd;
  --sand-i: #8f7042; --sand-c: #f3ebdd;
  --slate-i: #5f6e96; --slate-c: #e7eaf2;
  --ui: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #191919; --paper: #191919; --fg: #d4d4d4; --muted: #9b9b9b; --faint: #5a5a5a;
  --line: #2f2f2f; --soft: #2c2c2c; --accent: #2383e2; --accent-solid: #2383e2; --accent-soft: #1c3751;
  --side: #1e1e1e; --hover: rgba(255, 255, 255, .07); --press: rgba(255, 255, 255, .11); --ring: rgba(255, 255, 255, .08);
  --dot: #8f8a83; --danger: #df5452;
  --link: var(--accent-solid);
  --btn: #ebebeb; --btn-hover: #ffffff; --on-btn: #191919; --mark: #ffffff;
  --shadow: 0 0 0 1px var(--ring), 0 4px 12px rgba(0, 0, 0, .4);
  --frame-shadow: 0 0 0 1px var(--ring), 0 12px 32px rgba(0, 0, 0, .55);
  --peach-i: #eba96f; --peach-c: #4d3423; --sage-i: #9bc895; --sage-c: #2d402b; --lilac-i: #b4a3e6; --lilac-c: #37304c;
  --butter-i: #e0c75f; --butter-c: #4b421d; --mist-i: #8cc0de; --mist-c: #293c48; --rose-i: #e794bc; --rose-c: #482b3a;
  --clay-i: #e19a87; --clay-c: #472f2a; --sand-i: #d2b58e; --sand-c: #443929; --slate-i: #a4b0d0; --slate-c: #333744;
  color-scheme: dark; } }
:root[data-theme="dark"] {
  --bg: #191919; --paper: #191919; --fg: #d4d4d4; --muted: #9b9b9b; --faint: #5a5a5a;
  --line: #2f2f2f; --soft: #2c2c2c; --accent: #2383e2; --accent-solid: #2383e2; --accent-soft: #1c3751;
  --side: #1e1e1e; --hover: rgba(255, 255, 255, .07); --press: rgba(255, 255, 255, .11); --ring: rgba(255, 255, 255, .08);
  --dot: #8f8a83; --danger: #df5452;
  --link: var(--accent-solid);
  --btn: #ebebeb; --btn-hover: #ffffff; --on-btn: #191919; --mark: #ffffff;
  --shadow: 0 0 0 1px var(--ring), 0 4px 12px rgba(0, 0, 0, .4);
  --frame-shadow: 0 0 0 1px var(--ring), 0 12px 32px rgba(0, 0, 0, .55);
  --peach-i: #eba96f; --peach-c: #4d3423; --sage-i: #9bc895; --sage-c: #2d402b; --lilac-i: #b4a3e6; --lilac-c: #37304c;
  --butter-i: #e0c75f; --butter-c: #4b421d; --mist-i: #8cc0de; --mist-c: #293c48; --rose-i: #e794bc; --rose-c: #482b3a;
  --clay-i: #e19a87; --clay-c: #472f2a; --sand-i: #d2b58e; --sand-c: #443929; --slate-i: #a4b0d0; --slate-c: #333744;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.6 var(--ui); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--ui); margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
kbd { font: 500 .82em/1 var(--ui); padding: 3px 6px 2px; border-radius: 5px; border: 1px solid var(--line); background: var(--paper); box-shadow: 0 1px 0 var(--line); color: var(--fg); white-space: nowrap; }
code { font: .9em var(--mono); background: transparent; border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; }

.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding-inline: 24px; }
@media (max-width: 640px) { .wrap { padding-inline: 16px; } }

/* header */
.top { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid transparent; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 60px; gap: 12px; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 19px; letter-spacing: -.02em; text-decoration: none; padding: 4px 6px; margin-left: -6px; border-radius: 8px; }
/* the head mark (Sarah 10/22): black on white, white in dark; the wordmark at 0.8x the mark's height */
.brand { color: var(--mark); }
.brand .mark { display: block; flex: none; height: 24px; width: auto; fill: var(--mark); }
.foot .brand .mark { height: 20px; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav a { text-decoration: none; font-size: 14.5px; color: var(--muted); padding: 6px 10px; border-radius: 7px; transition: background-color .12s, color .12s; }
@media (hover: hover) {
  .brand:hover { background: var(--hover); }
  .nav a:hover { background: var(--hover); color: var(--fg); }
}
@media (max-width: 860px) { .nav .hide-md { display: none; } }
@media (max-width: 620px) { .nav .hide-sm { display: none; } }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 10px; font: 500 15.5px/1 var(--ui); text-decoration: none; transition: background-color .12s, border-color .12s, color .12s, transform .12s; border: 1px solid transparent; white-space: nowrap; }
.btn.main { background: var(--btn); color: var(--on-btn); height: 48px; padding: 0 22px; font-size: 16px; }
.btn.primary { background: var(--btn); color: var(--on-btn); }
.btn.quiet { color: var(--fg); border-color: var(--line); background: var(--paper); }
.btn .arr { transition: transform .15s ease; }
.nav .btn { height: 34px; padding: 0 14px; font-size: 14px; border-radius: 8px; color: var(--on-btn); }
@media (hover: hover) {
  .btn.main:hover, .btn.primary:hover, .nav .btn.primary:hover { background: var(--btn-hover); color: var(--on-btn); }
  .btn.quiet:hover { background: var(--hover); border-color: var(--faint); }
  .btn:hover .arr { transform: translateX(2px); }
}
.btn:active { transform: translateY(1px); }

/* hero */
.hero { padding: 72px 0 0; text-align: center; }
.hero h1 { font-weight: 600; font-size: clamp(2.35rem, 6.2vw, 4.1rem); line-height: 1.04; letter-spacing: -.035em; max-width: 20ch; margin: 0 auto; }
.hero .sub { margin: 22px auto 0; max-width: 34rem; font-size: clamp(1.05rem, 2.2vw, 1.2rem); color: var(--muted); line-height: 1.55; }
.hero .sub q { quotes: none; color: var(--fg); }
.views { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 22px auto 0; padding: 0; list-style: none; }
.views li { font-size: 13.5px; padding: 3px 10px; border-radius: 999px; background: var(--c); color: var(--i); font-weight: 500; }
.ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 30px; }
.alpha { margin: 14px auto 0; max-width: 36rem; font-size: 13.5px; color: var(--muted); }
.alpha a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--faint); transition: color .12s; }
@media (hover: hover) { .alpha a:hover { color: var(--fg); text-decoration-color: currentColor; } }
.shot-hero { margin: 56px auto 0; }

/* framed product shots */
.frame { border-radius: 14px; overflow: hidden; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--frame-shadow); }
.frame img { width: 100%; }
.frame.fade { -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); border-bottom: 0; }
.frame.flat { box-shadow: none; }

/* sections */
section { scroll-margin-top: 72px; }
.feat { padding: 112px 0 0; }
.feat .grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.feat.flip .grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
.feat.flip .grid > .copy { order: 2; }
.feat .stack { display: grid; gap: 20px; }
.copy h2 { font-weight: 600; font-size: clamp(1.7rem, 3.4vw, 2.35rem); line-height: 1.12; letter-spacing: -.025em; }
.copy p { margin-top: 16px; color: var(--muted); font-size: 1.04rem; }
.copy p b { color: var(--fg); font-weight: 500; }
.copy ul { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; color: var(--muted); font-size: .98rem; }
.copy li { position: relative; padding-left: 20px; }
/* a plain 4 px dot, no ring around it (her 10/15: "no glowing circle around a plain bullet. At all.") */
.copy li::before { content: ""; position: absolute; left: 4px; top: .67em; width: 4px; height: 4px; border-radius: 50%; background: var(--dot); }
.copy li b { color: var(--fg); font-weight: 500; }
.more { display: inline-flex; align-items: center; gap: 6px; margin-top: 20px; font-size: 14.5px; font-weight: 500; color: var(--link); text-decoration: none; padding: 2px 0; border-radius: 4px; }
.more .arr { transition: transform .15s ease; }
@media (hover: hover) { .more:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .more:hover .arr { transform: translateX(2px); } }
.note { margin-top: 18px; font-size: 14px; color: var(--muted); padding: 10px 14px; border-radius: 10px; background: transparent; border: 1px solid var(--line); }
.note b { color: var(--fg); font-weight: 500; }
.tag { display: inline-block; font-size: .86em; font-weight: 500; line-height: 1.45; padding: 0 7px; border-radius: 999px; background: var(--c); color: var(--i); white-space: nowrap; }
.mist { --i: var(--mist-i); --c: var(--mist-c); } .butter { --i: var(--butter-i); --c: var(--butter-c); }
.sage { --i: var(--sage-i); --c: var(--sage-c); } .lilac { --i: var(--lilac-i); --c: var(--lilac-c); }
.peach { --i: var(--peach-i); --c: var(--peach-c); } .rose { --i: var(--rose-i); --c: var(--rose-c); }
.clay { --i: var(--clay-i); --c: var(--clay-c); } .sand { --i: var(--sand-i); --c: var(--sand-c); } .slate { --i: var(--slate-i); --c: var(--slate-c); }
.cap { margin-top: 10px; font-size: 13px; color: var(--muted); text-align: center; }
.cap .you, .cap .agent { padding: 0 6px; border-radius: 4px; color: var(--fg); }
.cap .you { background: var(--lilac-c); box-shadow: inset 0 -2px 0 var(--lilac-i); }
.cap .agent { background: var(--peach-c); box-shadow: inset 0 -2px 0 var(--peach-i); }

/* quick to write in: three real phone-width shots */
.trio .head { margin-bottom: 32px; }
.cards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.card3 { margin: 0; display: flex; flex-direction: column; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); }
.card3 .frame { border-radius: 10px; }
.card3 .frame.tall { max-height: 300px; -webkit-mask-image: linear-gradient(#000 80%, transparent); mask-image: linear-gradient(#000 80%, transparent); border-bottom: 0; }
.card3 h3 { font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; }
.card3 figcaption p { margin-top: 6px; color: var(--muted); font-size: .97rem; }
.card3 .more { margin-top: 10px; }
.md { margin: 0; font: 12.5px/1.7 var(--mono); color: var(--muted); white-space: pre-wrap; word-break: break-word; padding: 10px 12px; border-radius: 10px; background: var(--soft); border: 1px solid var(--line); }

/* made to work with your AI */
.aibox { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: center; }
.copy .marks { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 26px 0 0; padding: 0; list-style: none; }
.copy .marks li { padding: 0; font-size: 1.15rem; font-weight: 600; letter-spacing: -.02em; color: var(--faint); }
.copy .marks li::before { display: none; }
.askai { border: 1px solid var(--line); border-radius: 16px; padding: 24px; background: var(--paper); }
.askai h3 { font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em; }
.askai p { margin-top: 8px; color: var(--muted); font-size: .97rem; }
.askrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 16px; }
.askrow .more { margin-top: 0; }
.copynote { font-size: 13px; min-height: 1.4em; }

.head { max-width: 40rem; }
.head h2 { font-weight: 600; font-size: clamp(1.7rem, 3.4vw, 2.35rem); line-height: 1.12; letter-spacing: -.025em; }
.head p { margin-top: 14px; color: var(--muted); font-size: 1.04rem; }

/* pricing */
.pricing { padding: 128px 0 0; }
.price { margin-top: 28px; border: 1px solid var(--line); border-radius: 14px; padding: 28px; background: var(--paper); display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.price p { color: var(--muted); max-width: 36rem; }
.price .free { color: var(--fg); font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; margin-bottom: 4px; }

/* faq */
.faq { padding: 128px 0 0; }
.qa { margin-top: 28px; border-top: 1px solid var(--line); }
.qa details { border-bottom: 1px solid var(--line); }
.qa summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 10px; margin: 0 -10px; border-radius: 8px; font-weight: 500; font-size: 1.04rem; transition: background-color .12s; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary .chev { flex: none; width: 14px; height: 14px; color: var(--faint); transition: transform .18s ease, color .12s; }
.qa details[open] summary .chev { transform: rotate(90deg); }
@media (hover: hover) { .qa summary:hover { background: var(--hover); } .qa summary:hover .chev { color: var(--fg); } }
.qa .a { padding: 0 0 20px; color: var(--muted); max-width: 46rem; }
.qa .a p + p { margin-top: 10px; }
.qa .a a { color: var(--link); text-decoration: none; }
@media (hover: hover) { .qa .a a:hover { text-decoration: underline; text-underline-offset: 3px; } }

/* closing */
.closing { padding: 128px 0 0; text-align: center; }
.closing h2 { font-weight: 600; font-size: clamp(1.9rem, 4.4vw, 2.9rem); letter-spacing: -.03em; line-height: 1.08; }
.closing p { margin: 14px auto 0; color: var(--muted); max-width: 36rem; }

/* footer: a small sitemap */
.foot { margin-top: 128px; border-top: 1px solid var(--line); padding: 40px 0 56px; font-size: 14px; color: var(--muted); }
.foot .wrap { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.fcol { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.fcol h3 { font-size: 13px; font-weight: 600; color: var(--fg); margin-bottom: 6px; }
.fcol p { margin-top: 8px; max-width: 18rem; }
.fcol a:not(.brand) { text-decoration: none; padding: 4px 8px; margin-left: -8px; border-radius: 6px; transition: background-color .12s, color .12s; }
@media (hover: hover) { .fcol a:not(.brand):hover { background: var(--hover); color: var(--fg); } }
.foot .brand { font-size: 16px; color: var(--mark); }
.fbrand { display: inline-flex; align-items: center; gap: 6px; }
.tagalpha { font-size: 13px; color: var(--muted); }

/* small screens */
@media (max-width: 860px) {
  .feat { padding-top: 84px; }
  .feat .grid, .feat.flip .grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .feat.flip .grid > .copy { order: 0; }
  .cards3, .aibox { grid-template-columns: minmax(0, 1fr); }
  .cards3 { max-width: 460px; }
  .aibox { gap: 28px; }
  .foot .wrap { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fbrandcol { grid-column: 1 / -1; }
  .pricing, .faq, .closing { padding-top: 96px; }
  .foot { margin-top: 96px; }
}
@media (max-width: 640px) {
  .hero { padding-top: 44px; }
  .shot-hero { margin-top: 40px; }
  .frame { border-radius: 10px; }
  .ctas .btn { flex: 1 1 100%; }
  .price { padding: 20px; }
  .price .btn { flex: 1 1 100%; }
  .foot .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
  .peekshot { display: none; }   /* the peek is for computers; on a phone a tap goes to the page */
}

/* get updates: the form posts to the updates list (fennick.app/api/updates) */
.updates { padding: 96px 0 0; }
.upbox { border: 1px solid var(--line); border-radius: 16px; padding: 28px; display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; background: var(--paper); }
.uptext h2 { font-weight: 600; font-size: 1.5rem; letter-spacing: -.02em; }
.uptext p { margin-top: 6px; color: var(--muted); }
.upform { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; flex: 1 1 360px; max-width: 480px; }
.upform input { height: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); font: 16px var(--ui); outline: none; min-width: 0; transition: border-color .12s; }
.upform input::placeholder { color: var(--faint); }
.upform input:focus { border-color: var(--accent); }
@media (hover: hover) { .upform input:hover:not(:focus) { border-color: var(--faint); } }
.upform .btn[disabled] { opacity: .6; cursor: progress; }
.upnote { grid-column: 1 / -1; font-size: 13px; color: var(--muted); min-height: 1.4em; }
.upnote.bad { color: var(--clay-i); }
.upthanks { flex: 1 1 360px; max-width: 480px; font-weight: 500; font-size: 1.05rem; color: var(--fg); min-height: 44px; display: flex; align-items: center; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 640px) { .upbox { padding: 20px; } .upform { grid-template-columns: minmax(0, 1fr); flex-basis: 100%; } .upform .btn { width: 100%; } }

/* ---------- 10/22 home: sections and the editor demos ----------
   wl- (waitlist), rm- (roadmap), cl- (changelog), pg- (the roadmap and changelog page shell). */
.feat .copy.head { margin-bottom: 28px; }
.feat .copy.solo { max-width: 48rem; margin: 0 auto; text-align: center; }
.feat .copy.solo h2 { max-width: 30ch; margin: 0 auto; }
.feat .copy.solo p { margin-left: auto; margin-right: auto; max-width: 42rem; }
/* the list stays left-aligned for reading, as one centred block */
.feat .copy.solo ul { display: inline-grid; text-align: left; max-width: 40rem; margin-top: 22px; }
/* free forever: a plain highlight under the hero */
.fx-freeband { padding: 72px 0 0; }
.fx-free { border: 1px solid var(--line); border-radius: 14px; padding: 28px 32px; background: var(--paper); display: grid; grid-template-columns: minmax(0, 19rem) minmax(0, 1fr); gap: 8px 40px; align-items: baseline; }
.fx-free h2 { font-weight: 600; font-size: clamp(1.6rem, 3vw, 2.1rem); letter-spacing: -.025em; line-height: 1.1; }
.fx-free p { color: var(--muted); font-size: 1.06rem; max-width: 44rem; }
@media (max-width: 760px) { .fx-free { grid-template-columns: minmax(0, 1fr); padding: 22px; } .fx-freeband { padding-top: 48px; } }
.fx-aside { font-size: .95rem !important; color: var(--muted); }
.fx-link { color: var(--link); text-decoration: none; }
@media (hover: hover) { .fx-link:hover { text-decoration: underline; text-underline-offset: 3px; } }
.fx-views { justify-content: flex-start; margin: 0 0 22px; }
.fx-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.fx-trio.fx-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fx-box { border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; background: var(--paper); }
.fx-box h3 { font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; }
.fx-box p { margin-top: 8px; color: var(--muted); font-size: .97rem; }
.fx-box p b { color: var(--fg); font-weight: 500; }
.fx-lists { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.fx-lists h3 { font-size: 1rem; font-weight: 600; }
.fx-lists ul { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; color: var(--muted); font-size: .95rem; }
.fx-lists li { position: relative; padding-left: 16px; }
.fx-lists li::before { content: ""; position: absolute; left: 3px; top: .67em; width: 4px; height: 4px; border-radius: 50%; background: var(--dot); }

/* the waitlist's one question (shown only when SEND_ANSWER is on, or ?ask=1 for review) */
.wl-ask { grid-column: 1 / -1; display: grid; gap: 6px; margin-top: 6px; }
.wl-ask[hidden] { display: none; }
.wl-ask label { font-size: 14px; color: var(--fg); }
.wl-opt { color: var(--faint); font-size: 13px; margin-left: 4px; }
.wl-ask textarea { width: 100%; min-height: 76px; resize: vertical; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); font: 15px/1.5 var(--ui); outline: none; transition: border-color .12s; }
.wl-ask textarea:focus { border-color: var(--accent); }
@media (hover: hover) { .wl-ask textarea:hover:not(:focus) { border-color: var(--faint); } }
.wl-prev { font-size: 12.5px; color: var(--muted); }
/* with the question on: email, question, then the button */
.upform.wl-on { grid-template-columns: minmax(0, 1fr); }
.wl-on .wl-ask { order: 1; margin-top: 2px; }
.wl-on .btn[type=submit] { order: 2; justify-self: start; }
.wl-on .upnote { order: 3; }

@media (max-width: 960px) {
  .fx-trio.fx-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fx-lists { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .fx-trio { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .fx-trio.fx-four, .fx-lists { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- /roadmap and /changelog (pages/*.mjs, built by build.mjs) ---------- */
.pg-head { padding: 64px 0 0; }
.pg-head h1 { font-weight: 600; font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -.03em; line-height: 1.08; }
.pg-head p { margin-top: 16px; max-width: 42rem; color: var(--muted); font-size: 1.04rem; }
.pg-head p b { color: var(--fg); font-weight: 500; }
.pg-when { font-size: 13.5px !important; }
.pg-body { padding: 40px 0 0; }
.rm-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: start; }
.rm-col { padding: 0; }
.rm-col h2 { display: flex; align-items: center; gap: 8px; font-size: 1rem; font-weight: 600; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.rm-n { font-size: 12px; font-weight: 500; color: var(--muted); }
.rm-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.rm-card { background: var(--paper); border-radius: 10px; padding: 12px 14px; box-shadow: 0 0 0 1px var(--ring), 0 1px 2px rgba(15, 15, 15, .04); }
.rm-card h3 { font-size: .97rem; font-weight: 600; letter-spacing: -.005em; }
.rm-card p { margin-top: 4px; font-size: .9rem; color: var(--muted); }
.rm-live h2::before, .rm-built h2::before, .rm-next h2::before, .rm-after h2::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.rm-live h2::before { background: var(--sage-i); }
.rm-built h2::before { background: var(--butter-i); }
.rm-next h2::before { background: var(--mist-i); }
.rm-after h2::before { background: var(--faint); }
.cl-list { display: grid; gap: 40px; max-width: 860px; }
.cl-day { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 24px; }
.cl-day h2 { font-size: 1rem; font-weight: 600; color: var(--muted); position: sticky; top: 76px; align-self: start; }
.cl-items { display: grid; gap: 18px; }
.cl-item h3 { font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; }
.cl-item p { margin-top: 4px; color: var(--muted); }
.nav a[aria-current="page"] { color: var(--fg); }
@media (max-width: 760px) {
  .cl-day { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .cl-day h2 { position: static; }
}
@media (max-width: 640px) { .pg-head { padding-top: 40px; } }

@media (max-width: 1100px) { .rm-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .rm-cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .feat .copy.solo { text-align: left; } .feat .copy.solo h2 { margin: 0; } }

/* ---------- the hero: her picked mockup A (10/22, scratchpad hero-options/a.html), ported as it is ---------- */
.hx { position: relative; text-align: center; padding: 104px 0 0; }
.hx h1 { font-weight: 600; font-size: 112px; line-height: .96; letter-spacing: -.05em; margin: 0; color: var(--fg); }
.hx .hx-line { margin: 28px auto 0; font-size: 22px; line-height: 1.4; color: var(--muted); }
.hx .hx-go { margin-top: 40px; display: flex; justify-content: center; }
.hx .btn.main { height: 52px; padding: 0 26px; font-size: 17px; }
.hx-shot { position: relative; margin-top: 88px; }
.hx-shot .frame { position: relative; z-index: 2; }
.hx-s { position: absolute; display: block; aspect-ratio: 1; }
.hx-dot { border-radius: 50%; }
.hx-sq { border-radius: 28%; }
.hx-fox { position: absolute; width: auto; max-width: none; display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hx-fox { filter: invert(1); } }
:root[data-theme="dark"] .hx-fox { filter: invert(1); }
.hx-stage { position: relative; }
.hx-desk { position: absolute; z-index: 3; right: 10px; top: -60px; bottom: -88px; width: 400px; pointer-events: none; }
/* the fox sits on the window's top bar, in front of it, its tail over the edge (Sarah 10/22) */
.hx-desk .hx-fox { right: 150px; bottom: -30px; height: 210px; }
.hx-phone { display: none; }
@media (max-width: 1100px) { .hx-desk { display: none; } .hx-phone { display: block; } }
.hx-phone { position: relative; z-index: 3; height: 190px; margin: 28px auto -66px; max-width: 520px; }
.hx-phone .hx-fox { left: 8%; bottom: -14px; height: 120px; }
@media (max-width: 640px) {
  .hx { padding-top: 56px; }
  .hx h1 { font-size: 15.4vw; letter-spacing: -.05em; }
  .hx .hx-line { font-size: 17px; margin-top: 18px; max-width: 18rem; }
  .hx .hx-go { margin-top: 28px; }
  .hx .btn.main { flex: none !important; width: auto; }
  .hx-shot { margin-top: 64px; }
}

/* ---------- the dates pile (Sarah 10/23): small grabs of the real app, a little overlapped and turned ----------
   Each grab is placed in % of the pile (x, y, width), turned a few degrees and stacked by --z. The day page is the
   focal grab, near the centre and the largest; the others sit around it and overlap it only at its corners, never over
   a title, a date or a menu row. On a phone only the day page and the two small panels show (her 10/23 word: "just
   show the top three on mobile"), the panels tucked under the day page's lower corners. */
.pile { position: relative; aspect-ratio: 100 / 90.7; margin: 8px 0; }
.pile .pg { position: absolute; left: var(--x); top: var(--y); width: var(--w); transform: rotate(var(--r)); z-index: var(--z); display: block;
  border-radius: 10px; overflow: hidden; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--pile-shadow); }
.pile .pg img { width: 100%; }
:root { --pile-shadow: 0 0 0 1px var(--ring), 0 10px 28px rgba(15, 15, 15, .11); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --pile-shadow: 0 0 0 1px var(--ring), 0 10px 28px rgba(0, 0, 0, .5); } }
:root[data-theme="dark"] { --pile-shadow: 0 0 0 1px var(--ring), 0 10px 28px rgba(0, 0, 0, .5); }
.pg-month   { --x: 0%;  --y: 0%;    --w: 44%; --r: -2.5deg; --z: 1; }
.pg-picker  { --x: 40%; --y: 1.1%;  --w: 33%; --r: 1.5deg;  --z: 1; }
.pg-related { --x: 75%; --y: 6.3%;  --w: 24%; --r: 2deg;    --z: 3; }
.pg-day     { --x: 25%; --y: 34.7%; --w: 56%; --r: -.8deg;  --z: 2; }
.pg-menu    { --x: 1%;  --y: 67.7%; --w: 27%; --r: 2.5deg;  --z: 3; }
.pg-link    { --x: 67%; --y: 75.6%; --w: 32%; --r: -1.5deg; --z: 3; }
@media (max-width: 640px) {
  .pile { aspect-ratio: 100 / 112; margin: 4px 0 0; }
  .pile .pg { border-radius: 8px; }
  .pg-day     { --x: 4%;  --y: 0%;   --w: 92%; --r: -1deg;   --z: 1; }
  .pg-related { --x: 1%;  --y: 57%;  --w: 38%; --r: -2.5deg; --z: 2; }
  .pg-menu    { --x: 53%; --y: 57%;  --w: 46%; --r: 2deg;    --z: 2; }
  .pile .pg-month, .pile .pg-picker, .pile .pg-link { display: none; }
}