/* Soren site: the page. Each width is laid out on purpose:
   phone (under 700), tablet (700 to 1099), laptop (1100 and up), wide desktop (1700 and up). */

.wrap { width:100%; max-width:1360px; margin:0 auto; padding:0 20px; }
@media (min-width:700px) { .wrap { padding:0 32px; } }
@media (min-width:1100px) { .wrap { padding:0 48px; } }
@media (min-width:1700px) { .wrap { max-width:1640px; } }

html { scroll-padding-top:88px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior:smooth; } }

/* ── The bar ─────────────────────────────────────────── */
.bar-wrap { position:sticky; top:0; z-index:10; background:var(--bg); }
.bar { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:64px; }
.bar nav { display:flex; align-items:center; gap:22px; }
.bar .quiet { font:600 16px/1 var(--font-body); color:var(--ink-2); text-decoration:none; display:none; }
.bar .quiet:hover { color:var(--ink); text-decoration:underline; }
@media (min-width:700px) {
  .bar { min-height:80px; } .bar .quiet { display:inline; }
  .brand { font-size:24px; } .brand .owl { width:32px; height:32px; }
}

/* ── The waitlist form: one field, who you are, the high-school line ── */
.wl { display:grid; gap:12px; max-width:580px; }
.wl-row { display:grid; gap:10px; }
@media (min-width:520px) { .wl-row { grid-template-columns:1fr auto; } }
.who { border:0; padding:0; margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.who legend { float:left; padding:0; margin-right:4px; font:600 15px/1 var(--font-body); color:var(--ink-2); }
.who label { position:relative; display:inline-flex; align-items:center; min-height:36px; padding:0 14px; border-radius:var(--r-pill);
  border:1.5px solid var(--line); font:600 15px/1 var(--font-body); color:var(--ink-2); cursor:pointer; }
.who input { position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; }
.who label:has(input:checked) { background:var(--ink); border-color:var(--ink); color:var(--bg); }
.who label:has(input:focus-visible) { outline:3px solid var(--leaf); outline-offset:2px; }
.wl-note { font-size:15px; line-height:1.4; color:var(--ink-2); }
.wl-note a { color:var(--ink); font-weight:600; text-underline-offset:3px; }
.wl-trap { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }   /* a field people never see */
.wl-check:empty, .wl-msg:empty { display:none; }
.wl-msg { font:600 16px/1.4 var(--font-body); color:var(--miss); }
.field[aria-invalid="true"] { border-color:var(--miss); }
.btn[disabled] { opacity:.7; cursor:progress; }
.wl-done { display:grid; gap:4px; max-width:580px; padding:18px 20px; border-radius:var(--r-card); background:var(--panel); }
.wl-done strong { font:800 22px/1.1 var(--font-head); letter-spacing:-.025em; }
.wl-done span { color:var(--ink-2); font-size:17px; line-height:1.4; }
.wl-done:focus-visible { outline:3px solid var(--leaf); outline-offset:3px; }

/* ── Real pictures of the app ────────────────────────── */
.shot { display:block; border-radius:var(--r-card); overflow:hidden; background:var(--panel);
  box-shadow:0 0 0 1px var(--line), 0 30px 60px -30px rgba(24,34,28,.35); }
.shot img { width:100%; height:auto; }
.shot.phone { border-radius:30px; box-shadow:0 0 0 1px var(--line), 0 0 0 7px var(--bg), 0 0 0 8px var(--line), 0 30px 60px -24px rgba(24,34,28,.45); }

/* ── The top: "Study up." as big as the screen allows, the mark on its baseline ── */
.top { overflow:clip; }
.hero { display:grid; gap:28px; padding-top:4px; }
.hero-h { font:800 30vw/.84 var(--font-head); letter-spacing:-.06em; margin:0 0 0 -.045em; white-space:nowrap; }
.hero-h .owl { display:inline-block; width:.76em; height:.76em; margin-left:.13em; vertical-align:-.035em; }
.hero-sub { font-size:18px; line-height:1.45; color:var(--ink-2); max-width:34em; margin:18px 0 22px; }
.hero-sub b { color:var(--ink); font-weight:600; }

/* The owl blinks now and then: the lid comes down over its eyes. Still under Reduce Motion. */
.owl .o-lid { fill:var(--owl); }
@keyframes blink { 0%, 94%, 100% { transform:none; } 97% { transform:translateY(21px); } }
@media (prefers-reduced-motion: no-preference) { .owl.blinks .o-lid { animation:blink 8s ease-in-out 3s infinite; } }

/* One entrance, once: the top of the page rises into place. */
@keyframes rise { from { opacity:0; transform:translateY(18px); } }
@media (prefers-reduced-motion: no-preference) {
  .hero-h, .hero-sub, .hero .wl, .hero-art { animation:rise .7s cubic-bezier(.2,.8,.2,1) both; }
  .hero-sub { animation-delay:.08s; } .hero .wl { animation-delay:.16s; } .hero-art { animation-delay:.22s; }
}

/* Phone: two phones, the question in front and the notes behind, cut off by the next band. */
.hero-art { position:relative; height:250px; }
.hero-art .front { position:absolute; left:0; top:8px; width:57%; z-index:1; }
.hero-art .back { position:absolute; left:47%; top:44px; width:57%; }
.hero-art .desk { display:none; }

@media (min-width:700px) {
  .hero-h { font-size:23.5vw; }
  .hero-sub { font-size:21px; margin:26px 0 28px; }
  .hero-art { height:400px; margin-top:12px; }
  .hero-art .desk { display:block; position:absolute; left:14%; top:0; width:100%; }
  .hero-art .front { left:0; top:70px; width:27%; }
  .hero-art .back { display:none; }
}
@media (min-width:1100px) {
  .hero { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:start;
    min-height:calc(100svh - 80px); max-height:980px; padding-top:1.5vh; }
  .hero-h { font-size:clamp(150px, 13.4vw, 214px); }
  .hero-sub { margin:3.2vh 0; }
  .hero-art { height:auto; align-self:stretch; margin-top:14px; }
  .hero-art .desk { left:6%; top:0; width:150%; }
  .hero-art .front { left:-7%; top:27%; width:40%; }
}
@media (min-width:1700px) {
  .hero { grid-template-columns:minmax(0,.9fr) minmax(0,1fr); gap:72px; padding-top:3vh; }
  .hero-h { font-size:clamp(214px, 13vw, 268px); }
  .hero-sub { font-size:24px; max-width:30em; }
  .hero .wl { max-width:620px; }
  .hero-art .desk { width:132%; top:2%; }
  .hero-art .front { width:36%; top:30%; }
}

/* ── The three things Soren stands on ─────────────────── */
.claims { position:relative; z-index:2; background:var(--bg); border-top:1px solid var(--line); }
.claims-in { display:grid; gap:22px; padding-top:28px; padding-bottom:40px; }
.claims h2 { font:800 21px/1.1 var(--font-head); letter-spacing:-.025em; margin-bottom:6px; }
.claims p { font-size:17px; line-height:1.45; color:var(--ink-2); max-width:30em; }
@media (min-width:860px) { .claims-in { grid-template-columns:repeat(3, 1fr); gap:40px; padding-top:36px; padding-bottom:56px; } .claims h2 { font-size:24px; } }

/* ── The features: one continuous scroll ──────────────── */
.feat { padding:44px 0 24px; background:var(--panel); }
.feat-h { font:800 34px/1 var(--font-head); letter-spacing:-.045em; max-width:12em; }
.steps { list-style:none; margin:32px 0 0; padding:0; display:grid; gap:56px; }
.eyebrow { display:inline-flex; align-items:center; gap:10px; font:800 16px/1 var(--font-head); letter-spacing:-.02em; color:var(--leaf-text); }
.eyebrow .ic { display:grid; place-items:center; width:36px; height:36px; border-radius:10px; background:var(--bg); }
.eyebrow svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.step h3 { font:800 30px/1.02 var(--font-head); letter-spacing:-.04em; margin:14px 0 10px; text-wrap:balance; }
.step-copy > p:not(.eyebrow) { font-size:18px; line-height:1.5; color:var(--ink-2); max-width:27em; }
.step .shot { box-shadow:0 0 0 1px var(--line), 0 24px 48px -28px rgba(24,34,28,.4); }

/* Phone: each feature is its own card, words first, then the app at phone size, cut off by the card's edge.
   Nothing is pinned here: a pinned picture on a small screen leaves no room for the words. */
.step-pic { margin-top:20px; height:392px; padding:26px 0 0; border-radius:20px; background:var(--bg); overflow:hidden; display:grid; justify-items:center; }
.step-pic .shot { width:70%; border-radius:26px 26px 0 0; box-shadow:0 0 0 1px var(--line), 0 0 0 6px var(--panel), 0 0 0 7px var(--line); }
.feat-stage { display:none; }

/* Tablet: the same order, with the app at desktop size across the full width. */
@media (min-width:700px) {
  .feat { padding:72px 0 40px; }
  .feat-h { font-size:52px; }
  .steps { margin-top:48px; gap:72px; }
  .step-copy { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:6px 32px; align-items:start; }
  .step-copy .eyebrow { grid-column:1 / -1; }
  .step h3 { font-size:36px; margin:10px 0 0; }
  .step-copy > p:not(.eyebrow) { font-size:19px; margin-top:12px; }
  .step-pic { margin-top:26px; height:auto; padding:0; border-radius:0; background:none; overflow:visible; display:block; }
  .step-pic .shot { width:100%; border-radius:var(--r-card); box-shadow:0 0 0 1px var(--line), 0 24px 48px -28px rgba(24,34,28,.4); }
}

/* Laptop and up, standing still (Reduce Motion, or no script): words on the left, the picture beside them, one feature after another. */
@media (min-width:1100px) {
  .feat { padding:112px 0 56px; }
  .feat-h { font-size:clamp(52px, 4.6vw, 72px); }
  .steps { margin-top:72px; gap:96px; }
  .step { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:64px; align-items:center; }
  .step-copy { display:block; }
  .step h3 { font-size:clamp(36px, 3.3vw, 52px); margin:16px 0 14px; }
  .step-copy > p:not(.eyebrow) { font-size:21px; margin-top:0; }
  .step-pic { margin-top:0; }
}

/* Laptop and up, with motion: the picture stays pinned while the words move past it, and changes with them.
   The page still scrolls at the reader's own speed, both ways: nothing here listens to the wheel. */
.feat.pinned .feat-body { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:64px; align-items:start; }
.feat.pinned .steps { margin-top:0; gap:0; }
.feat.pinned .step { display:flex; align-items:center; min-height:82vh; opacity:.28; transition:opacity .35s ease; }
.feat.pinned .step.is-on { opacity:1; }
.feat.pinned .step-pic { display:none; }
.feat.pinned .feat-stage { display:block; position:sticky; top:var(--stage-top, 120px); margin:calc(41vh - var(--stage-half, 200px)) 0; }
.stage-frame { position:relative; aspect-ratio:1200 / 760; }
.stage-pic { position:absolute; inset:0; opacity:0; transform:translateY(10px) scale(.985); transition:opacity .4s ease, transform .5s cubic-bezier(.2,.8,.2,1); }
.stage-pic.is-on { opacity:1; transform:none; }
.stage-rail { display:flex; align-items:center; gap:6px; margin-top:22px; }
.stage-rail i { flex:1; height:6px; border-radius:3px; background:var(--panel-2); transition:background .3s ease; }
.stage-rail i.is-on { background:var(--marigold); }
.stage-rail span { margin-left:10px; min-width:8.5em; text-align:right; font:800 15px/1 var(--font-head); letter-spacing:-.02em; color:var(--ink-2); }
@media (min-width:1700px) {
  .feat.pinned .feat-body { grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:96px; }
  .step-copy > p:not(.eyebrow) { font-size:23px; }
}

/* ── What Soren won't do ──────────────────────────────── */
.wont { background:var(--field); color:#fff; --owl:#C49A6C; }
.wont-in { display:grid; gap:28px; padding-top:56px; padding-bottom:56px; }
.wont h2 { font:800 16px/1 var(--font-head); letter-spacing:-.02em; color:#F3E6CC; }
.wont ul { list-style:none; margin:16px 0 0; padding:0; }
.wont li { font:800 28px/1.05 var(--font-head); letter-spacing:-.04em; padding:18px 0; border-top:1px solid rgba(255,255,255,.2); text-wrap:balance; }
.wont li:last-child { border-bottom:1px solid rgba(255,255,255,.2); }
.wont .for { font-size:18px; line-height:1.5; color:rgba(255,255,255,.86); max-width:30em; }
.wont .for b { color:#fff; font-weight:600; }
.wont .owl { width:96px; height:96px; }
@media (min-width:700px) {
  .wont-in { padding-top:88px; padding-bottom:88px; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:40px 48px; }
  .wont li { font-size:44px; padding:22px 0; }
  .wont .side { display:grid; gap:20px; max-width:300px; padding-bottom:22px; }
  .wont .owl { width:120px; height:120px; }
  .wont .for { font-size:19px; }
}
@media (min-width:1100px) {
  .wont-in { padding-top:128px; padding-bottom:128px; grid-template-columns:minmax(0,8fr) minmax(0,3fr); gap:96px; }
  .wont li { font-size:clamp(48px, 4.4vw, 72px); padding:28px 0; }
  .wont .owl { width:168px; height:168px; }
  .wont .side { max-width:none; }
  .wont .for { font-size:21px; }
}

/* ── The closing form ─────────────────────────────────── */
.join-in { display:grid; gap:24px; padding-top:64px; padding-bottom:64px; }
.join h2 { font:800 44px/.95 var(--font-head); letter-spacing:-.05em; }
.join .lede { font-size:19px; line-height:1.45; color:var(--ink-2); max-width:27em; margin-top:14px; }
@media (min-width:700px) { .join-in { padding-top:96px; padding-bottom:96px; } .join h2 { font-size:72px; } .join .lede { font-size:21px; } }
@media (min-width:1100px) {
  .join-in { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:72px; align-items:center; padding-top:136px; padding-bottom:136px; }
  .join h2 { font-size:clamp(84px, 7.6vw, 128px); }
  .join .wl { max-width:none; }
}

/* ── The foot ─────────────────────────────────────────── */
.foot { border-top:1px solid var(--line); }
.foot-in { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px 28px; padding-top:26px; padding-bottom:34px; }
.foot .tag { font:800 17px/1 var(--font-head); letter-spacing:-.03em; color:var(--ink-2); margin-left:12px; }
.foot .who-made { display:flex; align-items:center; }
.foot nav { display:flex; flex-wrap:wrap; gap:8px 24px; }
.foot nav a { font:600 16px/1.3 var(--font-body); color:var(--ink-2); text-underline-offset:3px; }
.foot nav a:hover { color:var(--ink); }

/* ── The page on what the site keeps: one column, plain words ── */
.k { max-width:680px; margin:0 auto; padding:28px 20px 72px; }
.k h1 { font:800 40px/1 var(--font-head); letter-spacing:-.045em; }
.k .lede { font-size:20px; line-height:1.45; color:var(--ink-2); margin-top:14px; }
.k h2 { font:800 22px/1.15 var(--font-head); letter-spacing:-.025em; margin:40px 0 10px; }
.k p + p { margin-top:12px; }
.k a { color:var(--leaf-text); font-weight:600; text-underline-offset:3px; }
.kept { list-style:none; margin:20px 0 0; padding:0; display:grid; gap:8px; }
.kept li { display:grid; grid-template-columns:auto 1fr; gap:4px 14px; align-items:baseline; padding:16px 18px; border-radius:var(--r-card); background:var(--panel); }
.kept .n { grid-row:span 2; font:800 22px/1 var(--font-head); letter-spacing:-.03em; color:var(--leaf-text); }
.kept b { font:800 18px/1.2 var(--font-head); letter-spacing:-.02em; }
.kept span { color:var(--ink-2); font-size:17px; line-height:1.4; }
.k .fine { margin-top:44px; padding-top:20px; border-top:1px solid var(--line); color:var(--ink-2); font-size:16px; }
@media (min-width:700px) {
  .k { padding:48px 32px 96px; } .k h1 { font-size:56px; } .k .lede { font-size:22px; }
  .kept li { padding:18px 22px; }
}
@media (min-width:1100px) { .k { padding-top:64px; } }

/* A page that isn't there. */
.lost { min-height:70vh; display:grid; align-content:center; justify-items:start; gap:16px; padding-top:48px; padding-bottom:48px; }
.lost h1 { font:800 clamp(56px, 12vw, 136px)/.9 var(--font-head); letter-spacing:-.055em; }
.lost p { font-size:20px; color:var(--ink-2); max-width:26em; }