/* Fig Tree site. Palette and type from docs/design/2026-10-05-m3-living-sky-and-plant-design.md.
   The sky follows the visitor's local time, like the app; sky.js sets data-phase. Day is the default. */

/* Fonts are served from this site, not Google, so visiting sends nothing to a third party. SIL OFL 1.1, see /fonts/. */
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 200 800; font-display: swap; src: url(/fonts/newsreader-latin-opsz-normal.woff2) format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 200 800; font-display: swap; src: url(/fonts/newsreader-latin-opsz-italic.woff2) format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/source-sans-3-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/source-sans-3-latin-600-normal.woff2) format('woff2'); }

/* Registered so the sky can fade between phases: a gradient of plain custom properties would jump. */
@property --sky-top { syntax: '<color>'; inherits: true; initial-value: #a6c9e5; }
@property --sky-mid { syntax: '<color>'; inherits: true; initial-value: #dce9f3; }
@property --horizon { syntax: '<color>'; inherits: true; initial-value: #f5f3ec; }
@property --surface { syntax: '<color>'; inherits: true; initial-value: rgba(255, 255, 255, 0.58); }
@property --text-1 { syntax: '<color>'; inherits: true; initial-value: #17212a; }
@property --text-2 { syntax: '<color>'; inherits: true; initial-value: #42505c; }
@property --glow { syntax: '<color>'; inherits: true; initial-value: #e6a23c; }
@property --chip { syntax: '<color>'; inherits: true; initial-value: rgba(30, 60, 90, 0.07); }
@property --line { syntax: '<color>'; inherits: true; initial-value: rgba(23, 33, 42, 0.14); }
@property --hills { syntax: '<color>'; inherits: true; initial-value: #b4bc9a; }
:root.fade {
  transition-property: --sky-top, --sky-mid, --horizon, --surface, --text-1, --text-2, --glow, --chip, --line, --hills;
  transition-duration: 2.4s;
  transition-timing-function: cubic-bezier(0.45, 0, 0.25, 1);
}

:root,
:root[data-phase='day'] {
  --sky-top: #a6c9e5;
  --sky-mid: #dce9f3;
  --horizon: #f5f3ec;
  --surface: rgba(255, 255, 255, 0.58);
  --text-1: #17212a;
  --text-2: #42505c;
  --glow: #e6a23c;
  --chip: rgba(30, 60, 90, 0.07);
  --line: rgba(23, 33, 42, 0.14);
  color-scheme: light;
}
:root[data-phase='sunrise'] {
  --sky-top: #9db2c8; --sky-mid: #e2bca4; --horizon: #f5d8b8;
  --surface: rgba(255, 250, 244, 0.62); --text-1: #1e2226; --text-2: #3b4148; --glow: #e58f55;
  --chip: rgba(90, 60, 40, 0.07); --line: rgba(30, 34, 38, 0.14);
}
:root[data-phase='morning'] {
  --sky-top: #9ec1de; --sky-mid: #cfe0ec; --horizon: #f2eee4;
  --surface: rgba(255, 255, 255, 0.58); --text-1: #18222b; --text-2: #3f4d59; --glow: #e9a43e;
  --chip: rgba(30, 60, 90, 0.07); --line: rgba(24, 34, 43, 0.14);
}
:root[data-phase='afternoon'] {
  --sky-top: #9cb9d3; --sky-mid: #d8ded9; --horizon: #f0e2c8;
  --surface: rgba(255, 252, 246, 0.6); --text-1: #1f2124; --text-2: #3f3e3c; --glow: #de8e34;
  --chip: rgba(80, 60, 30, 0.07); --line: rgba(31, 33, 36, 0.14);
}
:root[data-phase='evening'] {
  --sky-top: #93a8be; --sky-mid: #d9ac86; --horizon: #efc390;
  --surface: rgba(255, 248, 238, 0.62); --text-1: #1c1d21; --text-2: #37332f; --glow: #da7a34;
  --chip: rgba(90, 50, 20, 0.07); --line: rgba(28, 29, 33, 0.14);
}
:root[data-phase='dusk'] {
  --sky-top: #1c2436; --sky-mid: #454a5e; --horizon: #a9654c;
  --surface: rgba(18, 20, 30, 0.55); --text-1: #f4eee6; --text-2: #c7beb5; --glow: #f0a863;
  --chip: rgba(255, 255, 255, 0.07); --line: rgba(244, 238, 230, 0.16);
  color-scheme: dark;
}
:root[data-phase='night'] {
  --sky-top: #0b1220; --sky-mid: #14203a; --horizon: #21384a;
  --surface: rgba(8, 14, 24, 0.45); --text-1: #eef1ec; --text-2: #aeb9bf; --glow: #f1d3a0;
  --chip: rgba(255, 255, 255, 0.07); --line: rgba(238, 241, 236, 0.16);
  color-scheme: dark;
}
:root[data-phase='dawn'] {
  --sky-top: #1b2740; --sky-mid: #4d5c78; --horizon: #c99c88;
  --surface: rgba(14, 20, 34, 0.66); --text-1: #f4f0ea; --text-2: #d0ced0; --glow: #f2c29c;
  --chip: rgba(255, 255, 255, 0.07); --line: rgba(244, 240, 234, 0.16);
  color-scheme: dark;
}

/* Dark phases get the night scene; the record button's ink is a warm near-black in every phase. */
:root { --ink: #1d1a14; --hills: #b4bc9a; }
:root[data-phase='dusk'], :root[data-phase='night'], :root[data-phase='dawn'] { --hills: #132230; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* The analytics question: a small card at the bottom, only shown when analytics is turned on. */
.consent {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 10; max-width: 520px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--text-1);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); font-size: 15px;
}
.consent p { margin: 0; flex: 1 1 220px; }
.consent a { color: var(--text-1); }
.consent div { display: flex; gap: 8px; }
.consent button {
  font: 600 15px 'Source Sans 3', sans-serif; padding: 9px 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: transparent; color: var(--text-1);
}
.consent button[data-v="yes"] { border-color: transparent; background: var(--text-1); color: var(--horizon); }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--sky-mid);
  color: var(--text-1);
  font: 400 17px/1.55 'Source Sans 3', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* The sky stays put while the page scrolls. A fixed layer, because background-attachment: fixed is ignored on phones. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -2;
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 45%, var(--horizon) 72%, var(--horizon) 100%);
}
/* Ambient light over the sky: stars and fireflies at night, drifting motes and sun in the day (ambient.js). */
.ambient { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
a { color: inherit; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; }

.wrap { max-width: 1120px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
@media (min-width: 700px) { .wrap { padding-left: 32px; padding-right: 32px; } }

h1, h2, h3 { font-family: 'Newsreader', Georgia, serif; font-weight: 400; letter-spacing: -0.02em; text-wrap: balance; }
h1 { font-size: clamp(44px, 6.4vw, 76px); line-height: 1.02; margin: 0 0 22px; }
h2 { font-size: clamp(34px, 4.4vw, 52px); line-height: 1.06; margin: 0 0 16px; }
p { margin: 0 0 14px; }
.lede { font-size: clamp(19px, 2vw, 22px); line-height: 1.5; color: var(--text-2); max-width: 30em; }
.caption { font: 600 12px/16px 'Source Sans 3', sans-serif; text-transform: uppercase; letter-spacing: 0.9px; color: var(--text-2); margin: 0 0 12px; }

/* Header */
.top { display: flex; align-items: center; justify-content: space-between; padding-top: 20px; padding-bottom: 20px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 500 22px 'Newsreader', serif; }
.top nav { display: flex; align-items: center; gap: 8px; }
.top nav a { text-decoration: none; color: var(--text-2); font-weight: 600; font-size: 15px; padding: 8px; }
.top nav a:hover { color: var(--text-1); }
.skybtn {
  width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
  background: var(--surface); color: var(--text-1); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.skybtn svg { width: 20px; height: 20px; }

/* Hero */
.hero { display: grid; gap: 40px; align-items: center; padding-top: 24px; padding-bottom: 64px; }
@media (min-width: 900px) { .hero { grid-template-columns: 1fr auto; min-height: calc(100vh - 84px); padding-top: 0; } }
.hero-copy { max-width: 560px; }

/* Waitlist form */
form.join { display: flex; flex-wrap: wrap; gap: 10px; max-width: 500px; margin-top: 28px; }
form.join input[type='email'] {
  flex: 1 1 220px; min-width: 0; font: inherit; padding: 13px 18px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text-1);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
form.join input::placeholder { color: var(--text-2); }
form.join button {
  font: 600 16px 'Source Sans 3', sans-serif; padding: 13px 24px; border-radius: 999px; border: 0;
  background: var(--text-1); color: var(--horizon); cursor: pointer; transition: transform 0.2s ease;
}
form.join button:hover { transform: translateY(-1px); }
form.join button[disabled] { opacity: 0.6; cursor: default; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: 15px; color: var(--text-2); margin-top: 12px; min-height: 22px; }

/* The phone. The frame is drawn at the app's 393 x 852 and scaled, so the scene and type match the app exactly. */
.device { --s: 0.62; width: calc(393px * var(--s)); height: calc(852px * var(--s)); justify-self: center; position: relative; }
@media (min-width: 420px) { .device { --s: 0.7; } }
@media (min-width: 900px) { .device { --s: 0.8; } }
.phone {
  position: absolute; top: 0; left: 0; width: 393px; height: 852px; transform: scale(var(--s)); transform-origin: 0 0;
  overflow: hidden; border-radius: 48px; color: var(--text-1);
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 45%, var(--horizon) 72%, var(--horizon) 100%);
  box-shadow: 0 0 0 10px rgba(20, 22, 26, 0.92), 0 40px 90px rgba(10, 20, 40, 0.35);
}
.phone .scene { position: absolute; inset: 0; width: 393px; height: 852px; }
.phone .scene svg { display: block; }
/* Day and night drawings are stacked and crossfade with the sky. */
[data-scene] { display: grid; }
[data-scene] > .layer { grid-area: 1 / 1; opacity: 0; transition: opacity 2.4s cubic-bezier(0.45, 0, 0.25, 1); }
[data-scene] > .layer.on { opacity: 1; }
.skybtn svg { transition: transform 0.8s cubic-bezier(0.3, 0.7, 0.2, 1), opacity 0.4s ease; }
.skybtn.turn svg { transform: rotate(-90deg) scale(0.6); opacity: 0; }
.phone .ui { position: absolute; inset: 0; display: flex; flex-direction: column; }
.phone .status { height: 44px; padding: 16px 30px 0; display: flex; justify-content: space-between; font: 600 15px/1 'Source Sans 3'; }
.phone .gutter { padding: 0 20px; }
.phone .display { font: 400 34px/40px 'Newsreader', Georgia, serif; letter-spacing: -0.3px; margin: 4px 0 0; }
.phone .etitle { font: 500 19px/24px 'Newsreader', Georgia, serif; margin: 4px 0 0; }
.phone .excerpt { font: 400 16px/24px 'Newsreader', Georgia, serif; margin: 4px 0 0; }
.phone .meta { font: 600 13px/16px 'Source Sans 3'; color: var(--text-2); }
.phone .card { background: var(--surface); border-radius: 22px; padding: 14px 16px 16px; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.phone .pill { display: flex; align-items: center; gap: 8px; background: var(--surface); border-radius: 999px; padding: 0 16px; height: 44px; color: var(--text-2); }
.phone .tabbar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 80px; background: var(--surface); display: flex; justify-content: space-around;
  padding: 10px 12px 0; border-radius: 26px 26px 0 0; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.phone .tab { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 104px; color: var(--text-2); font: 600 12px/16px 'Source Sans 3'; }
.phone .tab.on { color: var(--text-1); }
.phone .home { position: absolute; bottom: 8px; left: 50%; width: 134px; height: 5px; margin-left: -67px; border-radius: 3px; background: var(--text-1); opacity: 0.55; }
.phone .sk { height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--chip) 0%, var(--chip) 35%, rgba(255, 255, 255, 0.4) 50%, var(--chip) 65%, var(--chip) 100%); background-size: 300% 100%; animation: shim 1.6s linear infinite; }
@keyframes shim { from { background-position: 100% 0; } to { background-position: 0 0; } }
.phone .rec {
  position: absolute; left: 50%; top: 650px; width: 80px; height: 80px; margin-left: -40px; border-radius: 50%; display: grid; place-items: center; color: var(--ink);
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--glow) 70%, #fff) 0%, var(--glow) 62%, color-mix(in srgb, var(--glow) 85%, #000) 100%);
  animation: breathe 6s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--glow) 20%, transparent), 0 0 30px 12px color-mix(in srgb, var(--glow) 26%, transparent); }
  50% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--glow) 24%, transparent), 0 0 40px 16px color-mix(in srgb, var(--glow) 34%, transparent); }
}
.phone .pen { position: absolute; top: 672px; left: 50%; margin-left: 58px; width: 40px; height: 40px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; }

/* Scene motion, from docs/design/mockups/motion.html */
.sway { transform-box: fill-box; transform-origin: 50% 100%; animation: sway 7s ease-in-out infinite; }
@keyframes sway { 0%, 100% { transform: rotate(-1.4deg); } 50% { transform: rotate(1.4deg); } }
.shoot { animation: shoot 24s linear infinite; opacity: 0; }
@keyframes shoot { 0%, 93% { opacity: 0; transform: translate(0, 0); } 94% { opacity: 1; transform: translate(0, 0); } 97.5% { opacity: 0; transform: translate(72px, 28px); } 100% { opacity: 0; transform: translate(72px, 28px); } }
.bird { animation: bob 5s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }
.tw { animation: tw 7s ease-in-out infinite; }
@keyframes tw { 50% { opacity: 0.15; } }

/* The transcript in the hero fills in after a moment, like the app. */
.entry-new .body-text { display: none; }
.phone .shimmer { margin: 10px 0 0 28px; display: flex; flex-direction: column; gap: 8px; }
.entry-new.done .shimmer, .entry-new.done .transcribing { display: none; }
.entry-new.done .body-text { display: block; animation: rise 0.6s ease both; }
.phone .transcribing { display: flex; gap: 10px; align-items: center; margin-top: 8px; font: 600 14px/18px 'Source Sans 3'; }
.phone .spin { width: 18px; height: 18px; animation: spin 1.2s linear infinite; color: var(--text-2); }
@keyframes spin { to { transform: rotate(360deg); } }

/* Reflect */
.phone .bubble-q { align-self: flex-end; max-width: 80%; background: var(--text-1); color: var(--horizon); border-radius: 20px 20px 6px 20px; padding: 12px 16px; font: 400 16px/22px 'Source Sans 3'; }
.phone .answer { background: var(--chip); border-radius: 20px 20px 20px 6px; padding: 14px 16px; font: 400 16px/23px 'Source Sans 3'; }
.phone .answer em { font: italic 400 17px/23px 'Newsreader', Georgia, serif; }
.phone .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.phone .chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--surface); font: 600 13px/1 'Source Sans 3'; }
.phone .chat { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }
.js .phone .chat > * { opacity: 0; transform: translateY(8px); transition: opacity 0.5s ease, transform 0.5s ease; }
.js .phone .chat > .in { opacity: 1; transform: none; }
.js .phone .chips .chip { opacity: 0; transform: scale(0.9); transition: opacity 0.4s ease, transform 0.4s ease; }
.js .phone .chips .chip.in { opacity: 1; transform: none; }
.phone .suggest { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.phone .suggest span { height: 34px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 999px; background: var(--chip); font: 600 14px/1 'Source Sans 3'; }
.phone .ask { position: absolute; left: 20px; right: 20px; bottom: 100px; }

/* Sections */
.band { display: grid; gap: 40px; align-items: center; padding-top: 72px; padding-bottom: 72px; }
@media (min-width: 900px) { .band { grid-template-columns: auto 1fr; gap: 88px; padding-top: 120px; padding-bottom: 120px; } }
.band .text { max-width: 520px; }
.center { text-align: center; padding-top: 96px; padding-bottom: 96px; }
#join { padding-bottom: 0; }
.floor { width: min(100%, 560px); margin: 40px auto 0; 
  --fade-x: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
  --fade-y: linear-gradient(180deg, #000 55%, transparent);
  -webkit-mask-image: var(--fade-x), var(--fade-y); -webkit-mask-composite: source-in;
  mask-image: var(--fade-x), var(--fade-y); mask-composite: intersect;
}
.floor svg { display: block; width: 100%; height: auto; }
.center .lede { margin: 0 auto; }
.center form.join { margin-left: auto; margin-right: auto; justify-content: center; }
.points { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.points span { padding: 8px 14px; border-radius: 999px; background: var(--surface); font-weight: 600; font-size: 15px; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

/* Reveal on scroll. Without JavaScript everything is simply visible. */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
.js .reveal.in { opacity: 1; transform: none; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Prose pages */
.surface { background: var(--surface); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-radius: 22px; padding: 24px; }
@media (min-width: 700px) { .surface { padding: 40px; } }
.prose { max-width: 720px; margin: 24px auto 64px; }
.prose h1 { font-size: clamp(34px, 5vw, 48px); }
.prose h2 { font-size: 26px; margin-top: 32px; font-weight: 500; }
.prose ul { padding-left: 20px; }
.prose li { margin-bottom: 8px; }

footer { padding: 32px 0 48px; font-size: 15px; color: var(--text-2); }
footer .wrap { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
footer a { color: var(--text-2); }

@media (prefers-reduced-motion: reduce) {
  .sway, .shoot, .bird, .tw, .phone .rec, .phone .sk, .phone .spin { animation: none !important; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  :root.fade { transition-duration: 0.01s; }
  [data-scene] > .layer { transition: none; }
}