/* ============================== THE APP PAGE ==============================
   Product-proof (approved 2026-09-14): five movements and a compact ending,
   one relationship — practice → lived experience → record → connected context
   → intelligence across time and in the present → life again. Each movement
   is a short heading beside real screens from one fictional demo life. One
   device shell (Begin); raw opaque crops elsewhere, no card around a card.
   Tokens, type, buttons, links, forms, the veil's grammar and the stage are
   styles.css's; the Atlas field is field.js's (scene "record", still). */


/* --- the App's frame: 1184px of content inside the site's gutters --- */
.mv--app { padding-inline: max(var(--frame), calc((100vw - 1184px) / 2)); overflow-x: clip; }
/* the rhythm: a chapter is as tall as its content plus 48px above and below (96 between chapters);
   the ids outrank the shared rhythm's :not() chain */
#begin-today, #words, #stays, #intelligence, #return, #begin { min-height: 0; padding-top: 48px; padding-bottom: 48px; }
#begin-today { padding-top: calc(92px + 4vh); }
#begin { padding-bottom: 20vh; } /* the words end above the meadow */

/* --- the App's type: Lora for the headings, Inter for the explanation, both a step under the landing --- */
.mv--app h1 { font-size: clamp(38px, 3.9vw, 56px); line-height: 1.02; }
.mv--app h2 { font-size: clamp(30px, 2.8vw, 40px); line-height: 1.08; }
.mv--app .lede { font-size: var(--fs-body); line-height: 1.5; margin-top: 22px; max-width: 30rem; }
.mv--app .folio { margin-bottom: 22px; }
.mv--app .ctas { margin-top: 30px; }
.mv--app .btn { height: 48px; }
.today__real { margin-top: 26px; font-size: var(--fs-fine); color: var(--ink-3); }

/* --- the reading veil: a closest-side ellipse (it reaches nothing at the box's own sides), only behind words --- */
.mv--app .col::before { inset: -26% -46% -40%; background: radial-gradient(closest-side at 50% 44%, color-mix(in oklab, var(--far) 82%, transparent) 0%, color-mix(in oklab, var(--far) 72%, transparent) 34%, color-mix(in oklab, var(--far) 50%, transparent) 60%, color-mix(in oklab, var(--far) 20%, transparent) 82%, transparent 100%); }

/* --- product labels, supporting words, entitlements: Inter, 14–16px, outside the screenshots --- */
.plabel { font: 500 var(--fs-small)/1.35 var(--sans); color: var(--ink); }
.plabel b { font-weight: 600; }
.sub { font: 400 var(--fs-small)/1.35 var(--sans); color: var(--ink-2); }
.ent { font: 500 var(--fs-fine)/1.35 var(--sans); color: var(--ink-3); margin: 0; }
.ent--quiet { font-weight: 400; color: var(--ink-4); }
.col > .ent { margin-top: 18px; }
.ill { font: 400 var(--fs-fine)/1.35 var(--sans); color: var(--ink-3); }
.shot figcaption, .atlas figcaption { margin-top: 14px; display: grid; gap: 5px; }

/* --- a real screen, raw: opaque, its own colours, one restrained shadow, no card, no padding --- */
.shot { margin: 0; min-width: 0; }
/* the figures paint above the heading column's veil (a sticky column is a positioned layer): a veil never washes the product */
.pair2, .record, .shot--practice, .shell { position: relative; z-index: 1; }
.shot img { width: 100%; height: auto; border-radius: 8px; box-shadow: 0 12px 32px rgba(26, 23, 20, .18); }

/* ============================== 1 · TODAY ============================== */
/* words left (about 40%), the one device shell right (about 60%); the shell's screen is 340–440px wide,
   sized so the Home screen stands in the first viewport with its content readable */
.mv--today { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: center; column-gap: 48px; }
.mv--today .col { max-width: 33rem; }
.shell { --sw: clamp(340px, calc((100vh - 120px) / 2.173), 440px); margin: 0; width: calc(var(--sw) + 20px); justify-self: end; }
.shell__frame { border-radius: calc(var(--sw) * .14); background: var(--ink); padding: 10px; box-shadow: 0 12px 32px rgba(26, 23, 20, .22), 0 1px 0 rgba(26, 23, 20, .5); }
.shell__frame img { width: 100%; height: auto; border-radius: calc(var(--sw) * .118); background: var(--shot); }
.shell > figcaption { margin-top: 14px; text-align: center; display: grid; gap: 5px; }
.today__real--m { display: none; } /* on a phone the authenticity line follows the crop, not the action (below) */
/* the words arrive as every opening's do; the screen is simply there, then drifts with the page */
.motion #begin-today .col > * { animation: heroRise var(--in-dur, 380ms) cubic-bezier(.16, 1, .3, 1) var(--in-delay, 80ms) both; }
.motion #begin-today .col > .folio { --in-delay: 40ms; } .motion #begin-today .col > .lede { --in-delay: 200ms; } .motion #begin-today .col > .ctas { --in-delay: 320ms; } .motion #begin-today .col > .today__real { --in-delay: 380ms; }
.motion.sdt #begin-today .col > * { animation-name: heroRise, drift; animation-duration: var(--in-dur, 380ms), 1s; animation-timing-function: cubic-bezier(.16, 1, .3, 1), linear; animation-delay: var(--in-delay, 80ms), 0s; animation-fill-mode: both, both; animation-timeline: auto, view(); animation-range: normal, entry 0% exit 100%; animation-composition: replace, add; }
.motion.sdt .shell { animation: drift 1s linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; --lag: .3; }
/* the still page's perch stands clear of the screen */
html:not(.motion.sdt) #begin-today .hero__perch { right: auto; left: 6vw; top: 74vh; }

/* ============================== THE PAIR CHAPTERS ============================== */
/* Choose, Notice, Understand: a short heading column (about 30%) that stays in view while the pair
   passes, and two real screens at one text scale — the lead upright and whole, the support shorter */
.mv--pairs { grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); align-items: start; column-gap: 48px; }
.mv--pairs .col { position: sticky; top: 120px; max-width: 26rem; }
.pair2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; row-gap: 28px; align-items: end; min-width: 0; }
.shot--support { padding-bottom: 12%; } /* offset: the support stands a little higher than the lead's foot */
/* Give the day words: the Reflection day card carries the movement (a little wider, a little higher);
   Journaling's page supports it at the same text scale, lower and a step narrower — not a thumbnail */
.pair2--daycard { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); align-items: start; }
.pair2--daycard .shot--lead { padding-bottom: 0; }
.pair2--daycard .shot--support { padding-bottom: 0; padding-top: 14%; }
/* Now it has a life to work with: two peers, equal room — the page's largest product moment */
.mv--payoff { grid-template-columns: minmax(0, 1fr); align-items: start; row-gap: 0; }
.mv--payoff .col--wide { max-width: 40rem; }
.pair2--equal { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 56px; align-items: start; width: 100%; max-width: 1040px; margin-top: 44px; }
.pair2--equal .shot--equal { padding-bottom: 0; }
/* Back into the day: one small, warm object beside a short heading */
.mv--return { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; column-gap: 48px; }
.shot--practice { width: min(100%, 460px); justify-self: start; }
.pair2 .ents { grid-column: 1 / -1; display: grid; gap: 6px; padding-top: 6px; position: relative; isolation: isolate; justify-self: start; }
/* the entitlement lines end over the meadow: the same feathered veil the columns have, only under the words */
.pair2 .ents::before { content: ""; position: absolute; inset: -60% -30% -70%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side at 50% 50%, color-mix(in oklab, var(--far) 80%, transparent) 0%, color-mix(in oklab, var(--far) 55%, transparent) 50%, transparent 100%); }

/* ============================== 4 · RETURN → CONNECT ============================== */
/* the words above; then one figure group of two representations: the History crop (about 38%) and the
   Atlas field (about 62%), comparable in authority, neither consuming the other */
.mv--record { grid-template-columns: minmax(0, 1fr); align-items: start; row-gap: 0; }
.mv--record .col--wide { max-width: 40rem; }
.record { display: grid; grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); column-gap: 44px; align-items: start; width: 100%; max-width: 1000px; margin-top: 44px; }
.atlas { margin: 0; min-width: 0; }
.atlas__field { position: relative; height: 520px; isolation: isolate; }
/* the field's lower third meets the meadow: a soft clearing of the hour's sky behind the illustration, no edge */
.atlas__field::before { content: ""; position: absolute; inset: -6% -8% -10%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side at 50% 50%, color-mix(in oklab, var(--far) 72%, transparent) 0%, color-mix(in oklab, var(--far) 56%, transparent) 55%, transparent 100%); }
.atlas__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.atlas__labels { position: absolute; inset: 0; pointer-events: none; }
.atlas__l { position: absolute; left: 0; top: 0; font: 400 14px/1.3 var(--sans); color: var(--ink-2); white-space: nowrap; opacity: 0; will-change: transform, opacity; }
.atlas__l--e { font-weight: 500; font-size: 14.5px; color: var(--ink); }
.atlas__l--h { color: var(--honey-deep); }
/* without JavaScript the moments simply stand, in a row, and the caption names the field */
html:not(.js) .atlas__field { height: auto; padding: 18px 0 6px; }
html:not(.js) .atlas__canvas { display: none; }
html:not(.js) .atlas__labels { position: static; display: flex; flex-wrap: wrap; gap: 10px 24px; }
html:not(.js) .atlas__l { position: static; opacity: 1; }

/* ============================== THE ENDING ============================== */
#begin .col--wide { max-width: 44rem; }
.ends { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 48px; margin: 36px 0 0; text-align: left; }
.end { border-top: 1px solid color-mix(in oklab, var(--ink) 22%, transparent); padding-top: 16px; }
.end h3 { font: 600 16px/1.3 var(--sans); letter-spacing: -.01em; margin: 0; }
.end p { margin: 6px 0 0; font-size: 16px; color: var(--ink-2); }
.end__join { margin-top: 32px; }
#begin .form { margin-top: 20px; }
#begin .form button { height: 50px; }
#begin .fine, #begin .waitform__line, #begin .waitform__status { max-width: var(--w-form); margin-inline: auto; } /* the form's own width, under it (2026-09-30) */
#begin .link { margin-top: 26px; }

/* ================================ MOBILE ================================ */
@media (max-width: 960px) {
  .mv--today, .mv--pairs, .mv--record, .mv--payoff, .mv--return { grid-template-columns: 1fr; }
  .mv--pairs .col { position: static; }
  .pair2 { grid-template-columns: 1fr; row-gap: 32px; }
  .shot--support { padding-bottom: 0; }
  .pair2--daycard, .pair2--equal { grid-template-columns: 1fr; max-width: none; }
  .pair2--daycard .shot--support { padding-top: 0; }
  .shot--practice { width: 100%; }
  .record { grid-template-columns: 1fr; row-gap: 36px; max-width: none; }
  .shell { justify-self: center; }
}
@media (max-width: 880px) {
  .mv--app { padding-inline: 20px; } /* the App reads centred on a phone, so its gutter is width, not an edge: 20px keeps the Danish opening "Begynd med i dag." whole on one line */
  .mv--app h1 { font-size: 38px; }
  .mv--app h2 { font-size: 30px; }
  .mv--app .lede { font-size: 17px; }
  #begin-today, #words, #stays, #intelligence, #return, #begin { padding-top: 28px; padding-bottom: 28px; }
  #begin-today { padding-top: 84px; }
  #begin { padding-bottom: 14vh; }
  .mv--today { row-gap: 20px; }
  .mv--app .folio { margin-bottom: 16px; }
  #begin-today .lede { margin-top: 16px; }
  #begin-today .ctas { margin-top: 22px; }
  .col > .today__real { display: none; }
  .today__real--m { display: block; margin-top: 0; }
  /* the first viewport: heading, one line, the action, then a 300–340px-high Home crop at column width */
  .shell { --sw: 100%; width: 100%; max-width: 353px; }
  .shell__frame { padding: 0; background: none; border-radius: 12px; height: 470px; overflow: hidden; box-shadow: 0 12px 32px rgba(26, 23, 20, .18); }
  .shell__frame img { border-radius: 0; margin-top: -21%; } /* the window opens on the Direction, the week and today's intention, below the status bar and header */
  .shell > figcaption { text-align: left; }
  /* full-column content crops at starting heights (the real content decides the final height) */
  .shot img { max-height: var(--mh, none); object-fit: cover; object-position: top; }
  #fig-reflection { --mh: none; } #fig-journaling { --mh: none; } /* the real crops are already content-tight */
  #fig-history { --mh: 300px; } /* the dated record: the month, Saturday's three entries, Friday's start */
  #fig-pattern { --mh: none; } #fig-chat { --mh: none; } /* the two real crops show whole, as peers; each ends where its own text ends */
  #fig-practice { --mh: none; }
  .atlas__field { height: 300px; } /* four labels with their filaments need the room; 250px stacked them in the top half */
  .atlas__l { font-size: 14px; } .atlas__l--e { font-size: 15px; }
  .ends { grid-template-columns: 1fr; gap: 18px; }
  /* the ending keeps the page's phone axis (2026-09-30): every App movement reads centred on a phone, and the close
     turned left for its last screen; the two ends centre their words under their rules */
  .ends { text-align: center; }
  .mv--app .col::before { inset: -18% -40% -34%; background: radial-gradient(closest-side at 50% 48%, color-mix(in oklab, var(--far) 84%, transparent) 0%, color-mix(in oklab, var(--far) 70%, transparent) 40%, color-mix(in oklab, var(--far) 36%, transparent) 72%, transparent 100%); }
}
@media (max-width: 380px) {
  .mv--app { padding-inline: 16px; }
  .mv--app h1 { font-size: 35px; }
  .mv--app h2 { font-size: 28px; }
  .atlas__l { font-size: 13px; } .atlas__l--e { font-size: 13.5px; } /* the six note titles clear a 320px field */
  .shell__frame { height: 440px; }
}

/* ============================== FRAMED SCREENS (2026-09-21) ==============================
   Founder ruling: nothing from the app is shown without an iPhone 17 Pro Max screen.
   One phone frame (.pf), the captured screen filling it at the exact 1320:2868 aspect,
   the capture's own status bar and Dynamic Island in the picture so the frame draws none. */
.pf { position: relative; width: 100%; max-width: var(--pfw, 320px); border-radius: 13.4% / 6.15%; background: var(--ink); padding: 2.5%; box-shadow: 0 26px 64px -20px rgba(26,23,20,.36), 0 2px 0 0 color-mix(in oklab, var(--ink) 55%, #4a4a4a); }
.pf__s { position: relative; aspect-ratio: 1320 / 2868; border-radius: 11.2% / 5.15%; overflow: hidden; background: var(--shot); }
.pf__s img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.appfig { margin: 0; min-width: 0; display: grid; justify-items: center; }
.appfig figcaption { margin-top: 16px; display: grid; gap: 5px; text-align: center; }
/* a section: words on one side, the phone on the other; alternates */
.mv--screen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: 6vw; }
.mv--screen .col { max-width: 30rem; }
.mv--screen.mv--flip .col { order: 2; }
.mv--screen.mv--flip .appfig { order: 1; }
.mv--screen .appfig { --pfw: 322px; }
/* two phones (body + sky) */
.mv--twin { grid-template-columns: minmax(0,1fr); justify-items: center; text-align: center; row-gap: 3vh; }
.mv--twin .col { max-width: 40rem; }
.mv--twin .lede { margin-inline: auto; } /* a centred movement centres the lede's box, not only its lines (2026-09-30: Cycle and Daylight's lede stood 65px left of the axis) */
.twin { display: flex; gap: 4vw; justify-content: center; align-items: flex-start; flex-wrap: wrap; }
.twin .appfig { --pfw: 288px; }
@media (max-width: 860px) {
  .mv--screen { grid-template-columns: 1fr; justify-items: center; text-align: center; row-gap: 4vh; }
  .mv--screen .col { order: 0 !important; max-width: 34rem; }
  .mv--screen .lede { margin-inline: auto; } /* centred on a phone: the lede's box too */
  .mv--screen .appfig { order: 1 !important; --pfw: 300px; }
  .mv--screen .col::before { display: none; }
}