/* Layout: "the interval" — two session halves frame the page; everything in between is the time between sessions. */
:root {
  --surface:#f3f4ef; --raised:#fbfbf8; --line:#d9ded6; --ink:#1d2925; --muted:#56635e;
  --pine:#2c5a4e; --on-pine:#fbfbf8; --pine-soft:#dfeae5; --amber:#e3a03a; --on-amber:#1d2925; --blush:#f2d6c6; --alert:#a83a28;
  --night:#1d2925; --on-night:#f3f4ef; --night-muted:#a9b6b0;
  --f-display:"Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --f-body:"Atkinson Hyperlegible", ui-sans-serif, system-ui, sans-serif;
  --f-voice:Newsreader, Georgia, "Times New Roman", serif;
  --r-sm:6px; --r-md:14px; --r-lg:28px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --surface:#121916; --raised:#1b2420; --line:#2f3b36; --ink:#edf1ec; --muted:#a2aea8;
  --pine:#86bfad; --on-pine:#121916; --pine-soft:#1e302a; --amber:#f0b85a; --on-amber:#121916; --blush:#4c3630; --alert:#f08b76;
  --night:#0c110f; --on-night:#edf1ec; --night-muted:#93a19a; color-scheme:dark; } }
:root[data-theme="dark"] {
  --surface:#121916; --raised:#1b2420; --line:#2f3b36; --ink:#edf1ec; --muted:#a2aea8;
  --pine:#86bfad; --on-pine:#121916; --pine-soft:#1e302a; --amber:#f0b85a; --on-amber:#121916; --blush:#4c3630; --alert:#f08b76;
  --night:#0c110f; --on-night:#edf1ec; --night-muted:#93a19a; color-scheme:dark; }

* { box-sizing:border-box; }
body { background:var(--surface); color:var(--ink); font:17px/1.6 var(--f-body); }
#page[data-lang="nl"] .en, #page[data-lang="en"] .nl { display:none !important; }
a { color:var(--pine); text-underline-offset:3px; }
:focus-visible { outline:2px solid var(--pine); outline-offset:3px; border-radius:4px; }
.wrap { max-width:1120px; margin:0 auto; padding-inline:clamp(16px, 4vw, 40px); }
h1, h2, h3 { font-family:var(--f-display); font-weight:700; letter-spacing:-.02em; text-wrap:balance; margin:0; }
h2 { font-size:clamp(28px, 4vw, 42px); line-height:1.1; }
h3 { font-size:20px; line-height:1.25; font-weight:500; letter-spacing:-.01em; }
p { margin:0; }
.lede { font-size:clamp(18px, 2vw, 21px); color:var(--muted); max-width:58ch; }
.eyebrow { font-size:13px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--pine); }
.voice { font-family:var(--f-voice); font-style:italic; font-size:20px; line-height:1.5; }
.tag { display:inline-block; font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; padding:2px 7px; border-radius:var(--r-sm); background:var(--pine-soft); color:var(--pine); }

/* top bar */
.top { position:sticky; top:env(safe-area-inset-top, 0px); z-index:10; background:color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.top .wrap { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:12px; }
.brand { display:flex; align-items:center; gap:10px; font:700 22px/1 var(--f-display); letter-spacing:-.02em; color:var(--ink); text-decoration:none; }
.top-right { display:flex; align-items:center; gap:14px; }
.lang { display:flex; border:1px solid var(--line); border-radius:999px; padding:2px; }
.lang button { font:700 13px/1 var(--f-body); letter-spacing:.05em; border:0; background:none; color:var(--muted); padding:7px 11px; border-radius:999px; cursor:pointer; }
.lang button[aria-pressed="true"] { background:var(--pine); color:var(--on-pine); }
.btn { display:inline-flex; align-items:center; gap:8px; font:700 16px/1 var(--f-body); padding:14px 22px; border-radius:999px; border:1.5px solid var(--pine); background:var(--pine); color:var(--on-pine); text-decoration:none; cursor:pointer; }
.btn:hover { filter:brightness(1.08); }
.btn.ghost { background:transparent; color:var(--pine); }
.btn.small { padding:9px 15px; font-size:14px; }
@media (max-width:560px) { .top .btn { display:none; } }

/* hero */
.hero { position:relative; overflow:hidden; padding-block:clamp(48px, 8vw, 96px) clamp(40px, 6vw, 72px); }
.halves { position:absolute; inset:0; pointer-events:none; }
.halves::before, .halves::after { content:""; position:absolute; top:50%; width:min(34vw, 380px); aspect-ratio:1/2; background:var(--pine-soft); transform:translateY(-50%); }
.halves::before { left:0; border-radius:0 999px 999px 0; translate:-55% 0; }
.halves::after { right:0; border-radius:999px 0 0 999px; translate:55% 0; }
.hero .wrap { position:relative; display:flex; flex-direction:column; gap:22px; align-items:flex-start; }
.hero h1 { font-size:clamp(40px, 7vw, 84px); line-height:1; max-width:14ch; }
.hero h1 .dot { display:inline-block; width:.32em; height:.32em; border-radius:50%; background:var(--amber); vertical-align:.08em; margin-left:.06em; }
.hero-ctas { display:flex; gap:12px; flex-wrap:wrap; }

/* interval rail */
.rail { position:relative; margin-top:clamp(36px, 5vw, 56px); width:100%; display:grid; grid-template-columns:auto 1fr auto; align-items:stretch; gap:0; }
.session { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:4px; width:clamp(84px, 11vw, 120px); padding:18px 8px; background:var(--pine); color:var(--on-pine); text-align:center; }
.session.start { border-radius:999px 0 0 999px; padding-left:18px; }
.session.end { border-radius:0 999px 999px 0; padding-right:18px; }
.session b { font:700 15px/1.1 var(--f-display); }
.session span { font-size:12px; opacity:.85; font-variant-numeric:tabular-nums; }
.moments { list-style:none; margin:0; padding:0 clamp(8px, 2vw, 20px); display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; position:relative; border-block:1.5px dashed var(--line); background:var(--raised); }
.moments li { display:flex; flex-direction:column; gap:3px; padding:16px 6px; min-width:0; }
.moments .when { font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); font-variant-numeric:tabular-nums; display:flex; align-items:center; gap:7px; }
.moments .when::before { content:""; width:9px; height:9px; border-radius:50%; background:var(--amber); flex:none; }
.moments .what { font-weight:700; line-height:1.3; }
.moments .how { font-size:14px; color:var(--muted); line-height:1.4; }
@media (max-width:760px) {
  .rail { grid-template-columns:1fr; }
  .session { width:100%; flex-direction:row; gap:10px; padding:12px 18px; }
  .session.start { border-radius:var(--r-lg) var(--r-lg) 0 0; padding-left:18px; }
  .session.end { border-radius:0 0 var(--r-lg) var(--r-lg); padding-right:18px; }
  .moments { grid-template-columns:1fr; border-block:0; border-inline:1.5px dashed var(--line); padding:4px 18px; gap:0; }
  .moments li { padding:12px 0; border-bottom:1px solid var(--line); }
  .moments li:last-child { border-bottom:0; }
}

section.block { padding-block:clamp(56px, 8vw, 104px); }
.block-head { display:flex; flex-direction:column; gap:14px; margin-bottom:clamp(28px, 4vw, 48px); max-width:760px; }

/* problem */
.problem { background:var(--night); color:var(--on-night); }
.problem .eyebrow { color:var(--amber); }
.problem .lede { color:var(--night-muted); }
.problem-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(20px, 3vw, 40px); }
.problem-grid > div { display:flex; flex-direction:column; gap:8px; border-top:1.5px solid color-mix(in srgb, var(--on-night) 22%, transparent); padding-top:18px; min-width:0; }
.problem-grid p { color:var(--night-muted); }
@media (max-width:760px) { .problem-grid { grid-template-columns:1fr; } }

/* client side */
.split { display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr); gap:clamp(28px, 5vw, 64px); align-items:start; }
@media (max-width:880px) { .split { grid-template-columns:1fr; } }
.features { display:flex; flex-direction:column; gap:26px; }
.feature { display:grid; grid-template-columns:44px minmax(0, 1fr); gap:16px; }
.feature .ico { width:44px; height:44px; border-radius:50%; background:var(--pine-soft); display:grid; place-items:center; color:var(--pine); }
.feature .ico svg { width:22px; height:22px; }
.feature div { display:flex; flex-direction:column; gap:4px; min-width:0; }
.feature p { color:var(--muted); }

/* phone mock */
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.pilot-copy { display:flex; flex-direction:column; gap:18px; }
.mock { margin:0; background:var(--raised); border:1px solid var(--line); border-radius:var(--r-lg); padding:20px; display:flex; flex-direction:column; gap:14px; box-shadow:0 24px 60px -32px color-mix(in srgb, var(--ink) 45%, transparent); }
.mock-head { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:13px; color:var(--muted); }
.mock-head strong { color:var(--ink); font-family:var(--f-display); font-size:16px; }
.bubble { padding:12px 15px; border-radius:18px; max-width:88%; line-height:1.45; font-size:15px; }
.bubble.me { align-self:flex-end; background:var(--pine); color:var(--on-pine); border-bottom-right-radius:6px; }
.bubble.ai { align-self:flex-start; background:var(--surface); border:1px solid var(--line); border-bottom-left-radius:6px; }
.draft { border:1.5px dashed var(--pine); border-radius:var(--r-md); padding:14px; display:flex; flex-direction:column; gap:10px; background:color-mix(in srgb, var(--pine-soft) 50%, var(--raised)); }
.draft p { font-weight:700; line-height:1.4; }
.draft-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.chip-btn { font:700 13px/1 var(--f-body); padding:9px 13px; border-radius:999px; border:1.5px solid var(--pine); background:var(--pine); color:var(--on-pine); cursor:pointer; }
.chip-btn.ghost { background:transparent; color:var(--pine); }
.saved { font-size:13px; color:var(--pine); font-weight:700; }
.mock-foot { font-size:12px; color:var(--muted); }

/* coach side */
.coach { background:var(--raised); border-block:1px solid var(--line); }
.coach-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(16px, 2.4vw, 28px); }
.coach-grid article { display:flex; flex-direction:column; gap:8px; padding:22px; border-radius:var(--r-md); background:var(--surface); border:1px solid var(--line); min-width:0; }
.coach-grid article p { color:var(--muted); font-size:16px; }
@media (max-width:880px) { .coach-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:560px) { .coach-grid { grid-template-columns:1fr; } }

/* slider demo */
.dial { margin-top:clamp(40px, 6vw, 72px); display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); gap:clamp(24px, 4vw, 56px); align-items:start; }
@media (max-width:880px) { .dial { grid-template-columns:1fr; } }
.dial-copy { display:flex; flex-direction:column; gap:14px; }
.dial-panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(18px, 3vw, 28px); display:flex; flex-direction:column; gap:18px; }
.ends { display:flex; justify-content:space-between; font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
input[type=range] { width:100%; accent-color:var(--pine); height:28px; }
.band { display:flex; flex-direction:column; gap:4px; }
.band strong { font:700 22px/1.2 var(--f-display); }
.band span { color:var(--muted); font-size:15px; }
.exchange { display:flex; flex-direction:column; gap:10px; border-top:1px solid var(--line); padding-top:16px; }
.exchange .who { font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.exchange .voice { min-height:5.5em; }
.fixed { font-size:14px; color:var(--muted); }

/* safety */
.safety-list { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 clamp(24px, 4vw, 56px); }
.safety-list div { display:grid; grid-template-columns:22px minmax(0, 1fr); gap:12px; padding-block:18px; border-top:1px solid var(--line); }
.safety-list svg { width:20px; height:20px; color:var(--pine); margin-top:3px; }
.safety-list p { color:var(--muted); font-size:16px; }
.safety-list b { display:block; color:var(--ink); }
@media (max-width:760px) { .safety-list { grid-template-columns:1fr; } }
.honest { margin-top:28px; padding:18px 20px; border-radius:var(--r-md); background:var(--blush); color:var(--ink); max-width:760px; font-size:16px; }

/* pilot */
.pilot { background:var(--pine); color:var(--on-pine); }
.pilot .eyebrow { color:var(--amber); }
.pilot-grid { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:clamp(28px, 5vw, 64px); align-items:start; }
@media (max-width:880px) { .pilot-grid { grid-template-columns:1fr; } }
.pilot h2 { color:var(--on-pine); }
.pilot p { opacity:.92; }
.ask { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.ask li { display:grid; grid-template-columns:28px minmax(0, 1fr); gap:10px; }
.ask li::before { content:""; width:10px; height:10px; border-radius:50%; background:var(--amber); margin-top:8px; justify-self:center; }
.contact { background:var(--raised); color:var(--ink); border-radius:var(--r-lg); padding:clamp(20px, 3vw, 30px); display:flex; flex-direction:column; gap:14px; }
.contact p { opacity:1; color:var(--muted); }
.mail { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.mail code { font:700 18px/1.3 var(--f-body); color:var(--ink); background:var(--surface); border:1px solid var(--line); padding:10px 14px; border-radius:var(--r-sm); user-select:all; overflow-wrap:anywhere; }
.copy-msg { font-size:14px; color:var(--pine); font-weight:700; min-height:1.4em; }
.mail-hint { font-size:15px; }
.mail-hint ul { margin:6px 0 0; padding-left:20px; }

/* faq */
.faq { max-width:820px; display:flex; flex-direction:column; }
.faq details { border-top:1px solid var(--line); padding-block:6px; }
.faq details:last-child { border-bottom:1px solid var(--line); }
.faq summary { cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:16px; padding-block:16px; font:500 19px/1.3 var(--f-display); }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; color:var(--pine); font-size:24px; line-height:1; flex:none; transition:transform .2s; }
.faq details[open] summary::after { transform:rotate(45deg); }
.faq details p { color:var(--muted); padding-bottom:16px; max-width:66ch; }

/* video */
.video-block { padding-block:clamp(40px, 6vw, 72px) clamp(56px, 8vw, 96px); }
.video-wrap { display:flex; flex-direction:column; gap:18px; }
.video-wrap .block-head { margin-bottom:8px; }
.player { border-radius:var(--r-lg); overflow:hidden; background:var(--night); box-shadow:0 30px 70px -36px color-mix(in srgb, var(--ink) 55%, transparent); aspect-ratio:16/9; max-width:100%; }
.player video { display:block; width:100%; height:100%; }
.video-note { font-size:14px; color:var(--muted); }

/* two worlds */
.worlds { background:var(--raised); border-block:1px solid var(--line); }
.world-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:clamp(16px, 3vw, 32px); }
@media (max-width:820px) { .world-grid { grid-template-columns:1fr; } }
.world { border-radius:var(--r-lg); padding:clamp(22px, 3vw, 34px); display:flex; flex-direction:column; gap:14px; min-width:0; }
.world.lead { background:var(--pine-soft); }
.world.life { background:var(--blush); }
.world-tag { font-size:13px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--pine); }
.world.life .world-tag { color:var(--ink); }
.world-title { font-size:clamp(22px, 2.4vw, 28px); font-weight:700; }
.world-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.world-list li { display:flex; flex-direction:column; gap:3px; padding-block:14px; border-top:1px solid color-mix(in srgb, var(--ink) 14%, transparent); font-size:16px; color:var(--muted); }
.world-list b { color:var(--ink); font-size:17px; }
.world-note { margin-top:24px; max-width:820px; font-size:15px; color:var(--muted); }

footer { padding-block:36px 48px; color:var(--muted); font-size:14px; }
footer .wrap { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:center; }

@media (prefers-reduced-motion: no-preference) {
  .moments .when::before { animation:pulse 3.2s ease-in-out infinite; }
  .moments li:nth-child(2) .when::before { animation-delay:.4s; }
  .moments li:nth-child(3) .when::before { animation-delay:.8s; }
  .moments li:nth-child(4) .when::before { animation-delay:1.2s; }
  @keyframes pulse { 0%,100% { box-shadow:0 0 0 0 color-mix(in srgb, var(--amber) 55%, transparent); } 50% { box-shadow:0 0 0 6px transparent; } }
}
body { margin:0; }
[hidden] { display:none !important; }
img, video { max-width:100%; }
.login-link { font-weight:700; font-size:15px; color:var(--ink); text-decoration:none; }
.login-link:hover { color:var(--pine); }