/* Dollie — the simpler page. One paper, one ink, the app's own dark for
   product moments. Blue is for actions, green only for what already
   happened, amber for what is waiting on you — the app's colour grammar. */
:root {
  color-scheme: light;
  --paper: #f8f5ef;
  --paper-deep: #f1ece2;
  --ink: #1d2023;
  --muted: #6a6e71;
  --faint: #9a9d9f;
  --line: #e6e0d4;
  --night: #131517;
  --app: #17191b;
  --app-raised: #1f2225;
  --app-line: #ffffff17;
  --app-ink: #eceef0;
  --app-muted: #9aa1a6;
  --gel-ink: #1d3a55;
  --blue: #2f7fe0;
  --green: #3fbf7f;
  --amber: #e2b567;
  --serif: 'Source Serif 4', 'Iowan Old Style', Georgia, serif;
  --sans: 'Geist', 'Helvetica Neue', system-ui, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --wrap: min(1160px, calc(100% - 48px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; background: var(--paper-deep); color: var(--ink); font: 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
/* The wash: warm at the top left, sky at the right, sand below — fixed, so
   the page scrolls over it the way a window sits over a wallpaper. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(70% 75% at 6% 4%, #efcdbc 0%, #efcdbc00 70%),
    radial-gradient(60% 70% at 100% 28%, #cadced 0%, #cadced00 72%),
    radial-gradient(70% 60% at 55% 110%, #e6ddcb 0%, #e6ddcb00 70%),
    linear-gradient(#f4efe7, #efe9df);
}
img { display: block; max-width: 100%; }
a { color: inherit; }
p, h1, h2, h3, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: var(--wrap); margin-inline: auto; }

/* Type */
.display, h2.title {
  font-family: var(--serif); font-weight: 400; letter-spacing: -.018em; line-height: 1.02; text-wrap: balance;
}
.display { font-size: clamp(48px, 6.6vw, 92px); }
.display em, h2.title em { font-style: italic; }
h2.title { font-size: clamp(36px, 4.4vw, 58px); }
.kicker { font-size: 13px; letter-spacing: .02em; color: var(--muted); display: flex; align-items: center; gap: 10px; }
.kicker b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.kicker::before { content: ""; width: 22px; height: 1px; background: currentColor; opacity: .5; }
.lede { font-size: clamp(17px, 1.5vw, 19.5px); line-height: 1.55; color: var(--muted); max-width: 34em; text-wrap: pretty; }

/* Top */
.top {
  position: sticky; top: 0; z-index: 30; border-bottom: 1px solid transparent;
  background: #f6f1e9d1; backdrop-filter: blur(18px) saturate(1.2);
  transition: border-color .25s var(--ease);
}
.top.is-stuck { border-bottom-color: var(--line); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 66px; }
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; font-weight: 600; font-size: 19px; letter-spacing: -.02em; }
.brand img { width: 30px; height: 30px; }
.brand span { font-family: 'Outfit', var(--sans, system-ui), sans-serif; font-weight: 700; font-size: 24px; letter-spacing: -.035em; line-height: 1; } /* the lockup: avatar + lowercase dollie in Outfit bold */
.top nav { display: flex; align-items: center; gap: 26px; font-size: 14px; color: var(--muted); }
.top nav a { text-decoration: none; }
.top nav a:hover { color: var(--ink); }
@media (max-width: 720px) { .top nav a:not(.gel) { display: none; } }

/* The gel: the app's primary button, the page's only blue surface. */
.gel {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px;
  border-radius: 999px; border: 1px solid #b8d6f0; color: var(--gel-ink); font: 600 15px var(--sans); text-decoration: none; cursor: pointer;
  background: linear-gradient(#d9ecfb, #a9d0f0 55%, #9cc7ea); box-shadow: 0 1px 0 #ffffffb3 inset, 0 6px 18px #5a9fdc40, 0 1px 2px #1d3a5533;
  transition: filter .15s var(--ease), transform .15s var(--ease);
}
.gel:hover { filter: brightness(1.04); }
.gel:active { transform: translateY(1px); }
.gel.small { min-height: 38px; padding: 0 16px; font-size: 14px; }
.link-arrow { font-size: 15px; font-weight: 500; text-decoration: none; color: var(--ink); display: inline-flex; align-items: center; gap: 6px; }
.link-arrow span { transition: transform .2s var(--ease); }
.link-arrow:hover span { transform: translateX(3px); }

/* Sections */
section { padding-block: clamp(88px, 11vw, 150px); }
section + section { border-top: 1px solid var(--line); }
.head { display: grid; gap: 22px; max-width: 760px; }
.head.center { margin-inline: auto; text-align: center; justify-items: center; }
.note { font-size: 12.5px; color: var(--faint); }

/* ── The app, drawn: dark surfaces as Dollie actually looks ─────────── */
.app { background: var(--app); color: var(--app-ink); border: 1px solid #ffffff14; border-radius: 22px; box-shadow: 0 30px 80px #1d20234d, 0 2px 0 #ffffff0a inset; font-size: 13.5px; line-height: 1.5; }
.phone { width: 330px; border-radius: 46px; padding: 11px; background: #0d0e0f; box-shadow: 0 40px 90px #1d202359, 0 0 0 1px #2a2d30 inset; }
.phone .screen { border-radius: 36px; overflow: hidden; background: var(--app); color: var(--app-ink); font-size: 13px; line-height: 1.45; }
.phone .status { display: flex; justify-content: space-between; align-items: center; padding: 14px 26px 6px; font-size: 12.5px; font-weight: 600; }
.phone .island { width: 96px; height: 28px; border-radius: 20px; background: #000; margin: -2px auto 0; }
.phone .who { display: grid; justify-items: center; gap: 4px; padding: 6px 0 12px; border-bottom: 1px solid var(--app-line); }
.phone .who img { width: 34px; height: 34px; border-radius: 50%; background: #2a3440; padding: 5px; }
.phone .who span { font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 999px; background: #ffffff10; }
.phone .body { padding: 14px 14px 16px; display: grid; gap: 10px; }
.phone .bar { margin: 4px 14px 14px; padding: 10px 14px; border-radius: 999px; background: #ffffff0d; color: var(--app-muted); font-size: 12.5px; }

.said { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start; }
.said img { width: 22px; height: 22px; margin-top: 2px; }
.said p { padding: 9px 12px; border-radius: 16px; border: 1px solid var(--app-line); background: var(--app-raised); }
.asked { justify-self: end; max-width: 82%; padding: 9px 13px; border-radius: 16px; color: #0f2438; background: linear-gradient(#c7e1f6, #a7cdee); font-weight: 500; }

.mail { border-radius: 14px; border: 1px solid var(--app-line); background: #202428; padding: 11px 13px; display: grid; gap: 3px; }
.mail .from { display: flex; justify-content: space-between; font-size: 12px; color: var(--app-muted); }
.mail .from b { color: var(--app-ink); font-weight: 600; }
.mail .subject { font-weight: 600; }
.mail .snippet { color: var(--app-muted); font-size: 12.5px; }

.letter { border-radius: 16px; border: 1px solid #ffffff1c; background: #1b1e20; color: var(--app-ink); overflow: hidden; }
.letter .to { padding: 10px 13px; font-size: 11.5px; color: var(--app-muted); border-bottom: 1px solid var(--app-line); }
.letter .text { padding: 12px 13px; display: grid; gap: 8px; }
.letter mark { background: none; color: inherit; border-bottom: 1.5px solid var(--green); }
.letter sup { color: var(--green); font-size: 9px; font-weight: 700; margin-left: 1px; }
.letter .why { padding: 9px 13px; display: grid; gap: 4px; border-top: 1px solid var(--app-line); font-size: 11.5px; color: var(--app-muted); }
.letter .why li { display: grid; grid-template-columns: 14px 1fr; }
.letter .why b { color: var(--green); font-weight: 700; }
.letter .foot { display: flex; align-items: center; justify-content: space-between; padding: 9px 11px 9px 13px; border-top: 1px solid var(--app-line); font-size: 11.5px; color: var(--app-muted); }
.approve { display: inline-flex; align-items: center; padding: 6px 13px; border-radius: 999px; color: #0f2438; font-weight: 600; font-size: 12px; background: linear-gradient(#cfe6f8, #a2cbee); border: 1px solid #d3e9f6; box-shadow: 0 1px 0 #ffffff80 inset; }

.chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: #fffdf9; border: 1px solid var(--line); box-shadow: 0 10px 30px #1d20231a; font-size: 13px; white-space: nowrap; }
.chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex: none; }
.chip.wait i { background: var(--amber); }
.chip small { color: var(--muted); font-size: 12px; }

/* ── Hero ───────────────────────────────────────────────────────────── */
.hero { padding-block: clamp(56px, 8vw, 100px) clamp(80px, 9vw, 120px); overflow: hidden; }
.hero .eyebrow { font-size: 14px; color: var(--muted); }
.hero .ctas { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.hero .display .soft { color: #8b8e90; }

/* Words on the left, Dollie at work on the right; stacked on a phone. */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.hero-b { padding-block: clamp(28px, 4vh, 48px) clamp(64px, 8vw, 110px); }
.hero-b .copy { display: grid; justify-items: start; gap: 26px; }
.hero-b .display { font-size: clamp(48px, 5.6vw, 84px); }
/* The motto, set like the films' end card: "5 to 9" is the picture */
.motto { margin: 0; font-family: var(--serif); font-weight: 400; color: var(--ink); line-height: 1; letter-spacing: -.02em; }
.motto span { display: block; }
.motto .m-work { font-size: clamp(38px, 4.2vw, 60px); }
.motto .m-hours { margin-top: .02em; font-size: clamp(104px, 12.5vw, 176px); line-height: .86; letter-spacing: -.045em; font-variant-numeric: lining-nums; }
/* v2 of "Never miss a follow-up again": the one word is the picture */
.motto-v2 .m-work { font-size: clamp(40px, 4.6vw, 66px); }
.motto-v2 .m-hours { margin: .04em 0 .02em; font-size: clamp(84px, 10vw, 142px); font-style: italic; letter-spacing: -.035em; line-height: .92; white-space: nowrap; }
.motto .m-rest { margin-top: 18px; font-size: clamp(26px, 2.8vw, 40px); font-style: italic; color: var(--muted); white-space: nowrap; }
/* Soft clouds drifting behind the hero, as in the films */
.hero-b { position: relative; }
.sky-clouds { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.sky-clouds svg { position: absolute; overflow: visible; fill: #ffffff; opacity: .5; -webkit-mask-image: linear-gradient(#000 30%, transparent 92%); mask-image: linear-gradient(#000 30%, transparent 92%); animation: drift 90s linear infinite; }
/* The clouds keep to the sky above and below the words: a slow drift across the top and bottom edges */
.sky-clouds svg:nth-child(1) { width: 240px; top: 2%; left: 0; opacity: .4; }
.sky-clouds svg:nth-child(2) { width: 180px; top: 12%; left: 0; opacity: .32; animation-duration: 130s; animation-delay: -65s; }
.sky-clouds svg:nth-child(3) { width: 300px; top: 84%; left: 0; opacity: .38; animation-duration: 115s; animation-delay: -30s; }
@keyframes drift { from { transform: translateX(-30vw); } to { transform: translateX(105vw); } }
@media (max-width: 900px) { .sky-clouds svg:nth-child(1), .sky-clouds svg:nth-child(2) { display: none; } }
.hero-b .wrap { position: relative; z-index: 1; }
.phone-demo .play { position: absolute; left: 50%; top: 50%; z-index: 4; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; display: grid; place-items: center; border: 1px solid #ffffff80; background: #1d2023b3; color: #fff; cursor: pointer; backdrop-filter: blur(10px); box-shadow: 0 12px 30px #0000004d; }
.phone-demo .play[hidden] { display: none; }
.phone-demo .play svg { width: 30px; height: 30px; margin-left: 4px; }
@media (prefers-reduced-motion: reduce) { .sky-clouds svg { animation: none; } }
.hero-b .lede { max-width: 30em; }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-b .copy { justify-items: center; text-align: center; }
  .hero-b .ctas { justify-content: center; }
  .hero-b .phone-demo { width: min(290px, 76vw); }
}

/* The phone: short films take turns; the speaker button is the only way sound starts. */
.phone-demo { margin: 0; justify-self: center; display: grid; gap: 18px; justify-items: center; width: min(76vw, clamp(230px, calc((100svh - 196px) / 2.1667), 340px)); position: relative; }
.phone-demo::before { content: ""; position: absolute; inset: -12% -34% 8%; z-index: -1; background: radial-gradient(50% 50% at 50% 45%, #e9e0d0 0%, #e9e0d000 70%); }
.iphone { position: relative; width: 100%; aspect-ratio: 9 / 19.5; padding: 3.6%; border-radius: 17% / 7.9%; background: linear-gradient(145deg, #2c2f33, #0c0d0e 40%, #1b1d20); box-shadow: 0 50px 100px #1d202340, 0 0 0 1.5px #3a3d41, inset 0 0 0 1px #ffffff1a; }
.iphone::before, .iphone::after { content: ""; position: absolute; width: 3px; border-radius: 2px; background: #2a2d31; }
.iphone::before { left: -3px; top: 21%; height: 12%; }
.iphone::after { right: -3px; top: 27%; height: 15%; }
.phone-demo .screen { position: relative; width: 100%; height: 100%; border-radius: 13.5% / 6.3%; overflow: hidden; background: #f4f1ea; isolation: isolate; }
.phone-demo .ambient { position: absolute; inset: 0; width: 100%; height: 100%; filter: blur(18px) saturate(1.1); transform: scale(1.25); z-index: 0; }
.phone-demo .clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s cubic-bezier(.33, 1, .68, 1); z-index: 1; }
.phone-demo .clip.is-on { opacity: 1; }
.phone-demo .island { position: absolute; top: 1.8%; left: 50%; width: 32%; height: 4.2%; transform: translateX(-50%); border-radius: 999px; background: #000; z-index: 3; }
.phone-demo .home { position: absolute; bottom: 1.6%; left: 50%; width: 36%; height: 5px; transform: translateX(-50%); border-radius: 999px; background: #1d202366; z-index: 3; }
.phone-demo .sound { position: absolute; right: 6%; top: 1.4%; z-index: 3; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; border: 1px solid #ffffff66; background: #1d2023a6; color: #fff; cursor: pointer; backdrop-filter: blur(10px); }
.phone-demo .sound svg { width: 17px; height: 17px; }
.phone-demo .sound .on, .phone-demo .sound[aria-pressed="true"] .off { display: none; }
.phone-demo .sound[aria-pressed="true"] .on { display: block; }
.reel { display: grid; justify-items: center; gap: 10px; }
.reel-title { font-family: var(--serif); font-size: 17px; color: var(--muted); font-style: italic; min-height: 1.3em; }
.dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; max-width: 260px; }
.dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: #1d202333; cursor: pointer; transition: background .3s, transform .3s; }
.dots button[aria-current="true"] { background: var(--ink); transform: scale(1.25); }
@media (prefers-reduced-motion: reduce) { .phone-demo .clip { transition: none; } }


/* ── How it works ───────────────────────────────────────────────────── */
.beats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 56px); margin-top: clamp(56px, 7vw, 80px); position: relative; }
.beats::before { content: ""; position: absolute; top: 58px; left: 12%; right: 12%; height: 1px; background: repeating-linear-gradient(90deg, #cfc6b5 0 6px, transparent 6px 12px); }
.beat { display: grid; justify-items: start; gap: 14px; position: relative; }
.beat img { width: 116px; height: 116px; object-fit: contain; filter: drop-shadow(0 14px 18px #1d20232e); }
.beat .n { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.beat h3 { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.05; }
.beat p { color: var(--muted); max-width: 26em; }
@media (max-width: 820px) { .beats { grid-template-columns: 1fr; } .beats::before { display: none; } }

/* ── Follow-up ──────────────────────────────────────────────────────── */
.split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.cadence { position: relative; padding: 28px; border-radius: 24px; background: #fffdf9; border: 1px solid var(--line); box-shadow: 0 30px 80px #1d20231f; }
.cadence .couple { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; }
.cadence .couple b { font-weight: 600; }
.cadence .couple span { color: var(--muted); font-size: 13px; }
.track { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 26px; }
.track::before { content: ""; position: absolute; top: 11px; left: 12%; right: 12%; height: 2px; background: linear-gradient(90deg, var(--green) 0 36%, var(--amber) 36% 64%, var(--line) 64%); }
.stop { display: grid; justify-items: center; text-align: center; gap: 8px; position: relative; font-size: 13px; }
.stop .pin { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #fffdf9; border: 2px solid var(--line); }
.stop.done .pin { background: var(--green); border-color: var(--green); }
.stop.done .pin::after { content: ""; width: 9px; height: 5px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); }
.stop.wait .pin { border-color: var(--amber); background: #fbf1dd; }
.stop b { font-weight: 600; }
.stop span { color: var(--muted); font-size: 12.5px; line-height: 1.35; max-width: 11em; }
/* On a phone the four stops read top to bottom. */
@media (max-width: 560px) {
  .cadence { padding: 22px; }
  .cadence .couple { display: grid; gap: 2px; }
  .track { grid-template-columns: 1fr; gap: 16px; }
  .track::before { top: 12px; bottom: 12px; left: 11px; right: auto; width: 2px; height: auto; background: linear-gradient(var(--green) 0 36%, var(--amber) 36% 64%, var(--line) 64%); }
  .stop { grid-template-columns: 24px 56px 1fr; justify-items: start; text-align: left; align-items: center; gap: 12px; }
  .stop span:last-child { max-width: none; }
}
.stopped { margin-top: 26px; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px; background: #eaf6ef; border: 1px solid #cde9d8; color: #146c43; font-size: 14px; }
.stopped i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex: none; }
.plain-list { display: grid; gap: 18px; margin-top: 34px; }
.plain-list li { display: grid; grid-template-columns: 84px 1fr; gap: 16px; align-items: baseline; }
.plain-list li b { font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1; }
.plain-list li span { color: var(--muted); }
.plain-list li strong { color: var(--ink); font-weight: 600; }

/* ── Your day (the one dark band) ──────────────────────────────────── */
.night { background: var(--night); color: #eef0f1; border-top: 0 !important; }
.night + section { border-top: 0; }
.night .kicker { color: #9aa1a6; }
.night .kicker b { color: #eef0f1; }
.night .lede { color: #a4abb0; }
.moments { display: grid; gap: 30px; margin-top: 44px; }
.moment { display: grid; grid-template-columns: 76px 1fr; gap: 18px; align-items: start; }
.moment img { width: 76px; height: 76px; object-fit: contain; filter: drop-shadow(0 12px 16px #0008); }
.moment time { font-size: 12.5px; color: #9aa1a6; font-variant-numeric: tabular-nums; }
.moment h3 { font-family: var(--serif); font-weight: 400; font-size: 27px; line-height: 1.1; margin: 2px 0 6px; }
.moment p { color: #a4abb0; font-size: 15px; }
.today { padding: 22px 24px 24px; }
.today .t-head { display: flex; justify-content: space-between; align-items: baseline; }
.today .t-head h3 { font-family: var(--serif); font-weight: 400; font-size: 26px; }
.today .t-head span { font-size: 12px; color: var(--app-muted); }
.today h4 { margin: 20px 0 6px; font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: #8a9398; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.today h4 .count { display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px; background: var(--amber); color: #1d1a12; font-size: 10.5px; letter-spacing: 0; }
.today ul { border-top: 1px solid var(--app-line); }
.today li { display: flex; justify-content: space-between; gap: 14px; padding: 10px 2px; border-bottom: 1px solid var(--app-line); font-size: 13.5px; }
.today li span:last-child { color: var(--app-muted); font-size: 12.5px; text-align: right; font-variant-numeric: tabular-nums; }
.today .idea { margin-top: 10px; display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; border: 1px solid #ffffff14; background: #ffffff06; }
.today .idea b { font-family: var(--serif); font-weight: 400; font-size: 34px; line-height: 1; }
.today .idea span { display: grid; font-size: 13.5px; }
.today .idea small { color: var(--app-muted); font-size: 12px; }

/* ── Control ────────────────────────────────────────────────────────── */
.promises { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 34px; margin-top: 40px; }
.promise { display: grid; gap: 8px; padding-top: 18px; border-top: 1px solid var(--line); }
.promise h3 { font-size: 16px; font-weight: 600; }
.promise p { color: var(--muted); font-size: 15px; }
@media (max-width: 620px) { .promises { grid-template-columns: 1fr; } }
.proof { display: grid; gap: 14px; }
.proof .letter { font-size: 14px; box-shadow: 0 30px 80px #1d20234d; }
.proof .caption { font-size: 13px; color: var(--muted); text-align: center; }

/* ── Works with ─────────────────────────────────────────────────────── */
.tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 44px; }
.tool { display: grid; gap: 6px; padding: 22px; border-radius: 18px; background: #fffdf9; border: 1px solid var(--line); }
.tool .name { display: flex; align-items: center; justify-content: space-between; font-weight: 600; }
.tool .name i { font-style: normal; font-size: 11.5px; font-weight: 500; color: #146c43; background: #eaf6ef; border: 1px solid #cde9d8; padding: 2px 9px; border-radius: 999px; }
.tool p { color: var(--muted); font-size: 14.5px; }
.tools-next { margin-top: 18px; font-size: 14px; color: var(--muted); text-align: center; }
@media (max-width: 760px) { .tools { grid-template-columns: 1fr; } }

/* ── Founder ────────────────────────────────────────────────────────── */
.founder { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(36px, 6vw, 80px); align-items: center; }
.founder img { width: 300px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 22px; box-shadow: 0 30px 70px #1d20233d; filter: grayscale(.15); }
.founder blockquote { margin: 0; font-family: var(--serif); font-size: clamp(28px, 3.1vw, 42px); line-height: 1.15; letter-spacing: -.005em; text-wrap: pretty; }
.founder .sig { margin-top: 24px; font-size: 15px; color: var(--muted); }
.founder .sig b { color: var(--ink); font-weight: 600; }
@media (max-width: 760px) { .founder { grid-template-columns: 1fr; } .founder img { width: 220px; } }

/* ── Early access ───────────────────────────────────────────────────── */
.join { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(36px, 6vw, 90px); align-items: start; }
@media (max-width: 900px) { .join { grid-template-columns: 1fr; } }
.join .kit { display: flex; gap: 6px; margin-top: 30px; }
.join .kit img { width: 76px; height: 76px; object-fit: contain; filter: drop-shadow(0 12px 14px #1d202329); }
.apply { display: grid; gap: 16px; padding: 30px; border-radius: 24px; background: #fffdf9; border: 1px solid var(--line); box-shadow: 0 30px 80px #1d20231f; }
.apply .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .apply .row { grid-template-columns: 1fr; } }
.apply label { display: grid; gap: 7px; font-size: 13.5px; font-weight: 500; }
.apply label small { font-weight: 400; color: var(--faint); }
.apply input, .apply textarea { width: 100%; font: 15px var(--sans); color: var(--ink); padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--paper); transition: border-color .15s, box-shadow .15s; }
.apply input:focus, .apply textarea:focus { outline: none; border-color: #9cc4ea; box-shadow: 0 0 0 4px #9cc4ea33; }
.apply textarea { resize: vertical; min-height: 92px; }
.apply .send { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.form-status { font-size: 14px; color: var(--muted); }
.form-status.is-error { color: #b4322a; }
.form-status.is-done { color: #146c43; }
.trap { position: absolute; left: -9999px; }

/* ── Questions ──────────────────────────────────────────────────────── */
.faq { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(36px, 6vw, 90px); align-items: start; }
@media (max-width: 860px) { .faq { grid-template-columns: 1fr; } }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding: 20px 2px; font-size: 17px; font-weight: 500; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 300; font-size: 22px; line-height: 1; color: var(--muted); transition: transform .2s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 2px 22px; color: var(--muted); max-width: 40em; }

/* ── Footer ─────────────────────────────────────────────────────────── */
.foot { border-top: 1px solid var(--line); padding-block: 44px 34px; }
.foot .wrap { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; font-size: 14px; color: var(--muted); }
.foot .sign { display: flex; align-items: center; gap: 14px; }
.foot .sign img { width: 44px; }
.foot .sign p { font-family: var(--serif); font-size: 22px; color: var(--ink); }
.foot nav { display: flex; gap: 22px; }
.foot nav a { text-decoration: none; }
.foot nav a:hover { color: var(--ink); }
.foot nav .ig { display: inline-flex; align-items: center; gap: 7px; }
.foot nav .ig svg { width: 17px; height: 17px; }

/* Arrivals: things settle in once, as they come into view. */
.rise { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.rise.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rise { opacity: 1; transform: none; transition: none; } }