/* ================================ THE LANDING ================================
   The landing's own shapes after the editorial rebuild (2026-09-18): the
   Across-time column's two entries beside the living field, the Chat
   movement's proof and its three words, and the close's two tiers. Tokens,
   the type roles, the veil, the movements' rhythm, the phone, the figures
   (visuals.css) and the system picture (system.css) are the shared parts;
   nothing here redefines one. */

/* ============================ ACROSS TIME ============================ */
/* Two entries down the story column — a label, a display sub-head, the words — under the chapter's one head.
   The first entry follows the h2; the second opens its own movement. */
.story__k { margin: 44px 0 0; }
.story__mv .col > .story__k:first-child { margin-top: 0; }
.story__mv .col > .story__k + h3 { margin-top: 12px; } /* outranks the movements' h3 air */
.story__mv .col > h3 + p { margin-top: 16px; }
.story__mv .col > .link { margin-top: 30px; }
/* THE RUNWAY (founder-approved 2026-09-18): each movement keeps 110vh of scroll for the scene — measured at
   1440×900 the field's progress then runs over 1 665px (relationships ≈ 449px, the repeats ≈ 266px, the honey
   route ≈ 300px, the settle ≈ 433px) and the Patterns words arrive at p ≈ .97, as the route completes; styles.css
   gave the two chapters 120vh, the first cut of this rebuild 90vh, which read as a state change. On phones the
   stylesheet's own composition (no minimum; the field as a 230svh sticky screen between the two sets of words) stands. */
@media (min-width: 881px) { #story .story__mv { min-height: 110vh; } }

/* ============================ OSMIA CHAT ============================ */
/* The proof stands in the left column: the product's own exchange as a flat print at a readable size, the site's
   one corner and shadow; the words on the right. */
.mv--chat { align-items: center; }
.proof { grid-column: 1; grid-row: 1; align-self: center; justify-self: end; width: min(100%, 440px); margin: 0; }
.proof img { display: block; width: 100%; height: auto; border-radius: var(--radius-pic); box-shadow: var(--shadow-pic); }
.proof figcaption { margin-top: 14px; }
.motion.sdt .proof { animation: drift 1s linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; --lag: .55; }
/* The chat exchange, shown on a phone: the same iPhone 17 Pro Max frame the App page uses, so the exchange reads as a real screen, not a flat print. */
.proof--phone { width: min(100%, 340px); justify-self: center; }
.proof--phone .pf { position: relative; width: 100%; 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); }
.proof--phone .pf__s { position: relative; aspect-ratio: 1320 / 2868; border-radius: 11.2% / 5.15%; overflow: hidden; background: #dbe4ef; }
.proof--phone .pf__s img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 0; box-shadow: none; }
/* THE THREE WORDS: Connect · Discern · Reconsider — each on its own rule, the word at the statement's size, its
   question beside it. The movement's one memorable object, not three cards. */
.triad { list-style: none; margin: 40px 0 0; padding: 0; }
.triad li { display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); column-gap: 24px; align-items: baseline; border-top: 1px solid var(--rule); padding: 16px 0; }
.triad li:last-child { border-bottom: 1px solid var(--rule); }
.triad b { font: var(--display-weight) var(--fs-statement)/1.2 var(--display); letter-spacing: -.012em; color: var(--ink); }
.triad p { margin: 0; font-size: var(--fs-small); color: var(--ink-3); }
/* the other languages' words run longer: the word column widens so "Genoverveje" / "Reconsiderar" keep their line */
html:is([lang="da"], [lang="es"]) .triad li { grid-template-columns: minmax(0, 11.5rem) minmax(0, 1fr); }
.mv--chat .col > .triad + p { margin-top: 32px; }
.mv--chat .col > .statement { margin-top: 30px; }
.mv--chat .col > .link { margin-top: 30px; }

/* ============================ SCIENCE ============================ */
/* the founder's copy (2026-10-01) is one long centred sentence: its lines share the width, so no language ends on
   a short line (Danish stopped on "over tid." alone) */
#science .col > p { text-wrap: balance; }

/* ============================ GET OSMIA ============================ */
/* The two tiers as the system's own chips, side by side under the head: the free practice in ink, what Osmia AI
   opens in honey — the picture's grammar, without its trails. Then the plans, the note, the one action, the line. */
.tiers { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 48px; width: 100%; max-width: 880px; margin: 44px auto 0; text-align: left; }
/* the clearing under the tiers: the same feathered veil the reading columns wear (styles.css .col::before), so
   the chips' words clear the meadow where the close stands over the plates */
.tiers::before { content: ""; position: absolute; inset: -30% -12% -30%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side at 50% 50%, color-mix(in oklab, var(--far) 90%, transparent) 0%, color-mix(in oklab, var(--far) 82%, transparent) 30%, color-mix(in oklab, var(--far) 60%, transparent) 55%, color-mix(in oklab, var(--far) 26%, transparent) 78%, transparent 100%); }
.tier__k { margin: 0 0 14px; }
.tier--ai .tier__k { color: var(--honey-deep); }
.tiers .ai__chips { display: flex; flex-wrap: wrap; gap: 6px; }
/* THE HIERARCHY (2026-09-18 polish): the head, then the distinction, then the two plans as the strongest objects,
   then the one action. The chips step back a size — smaller, no wash, a softer edge, the free set in the third ink —
   so the plans read first; the plans step forward — a larger figure, an opaque card, the names in ink. */
.tiers .ai__chips li { height: 32px; padding: 0 11px 0 9px; gap: 6px; font-size: 13.5px; font-weight: 400; background: transparent; border-color: var(--rule-soft); color: var(--ink-3); }
.tiers .ai__chips--out li { background: transparent; border-color: color-mix(in oklab, var(--honey-deep) 32%, transparent); color: var(--honey-deep); }
.tiers .ai__c::before { width: 14px; height: 14px; }
.tiers .tier__k { margin-bottom: 10px; }
/* ONE DECISION COLUMN (2026-09-30, the UI launch pass). The close had one axis and six left edges: the tiers at
   760px, the plans at 700, the checkout's field pinned 80px left of the centre inside a 576px column, the
   waitlist at 640 with its form at 520, the closing line at 480. Now the head stands centred over one 40rem
   column, and everything that decides - the two tiers, the two plans, the email and its button, the waitlist -
   fills that column exactly: the tiers and the plans share one two-track grid (the Osmia AI chips start where
   the Yearly card starts), the field and its button make one row, the notes and the last line centre in it.
   The rhythm steps 8 / 16 / 32 / 48: tight inside a group, open between the head, the choice and each action. */
.mv--close { --close-w: 40rem; }
.mv--close > .col:first-child { max-width: 50rem; } /* the head's two sentences, one to a line */
/* Danish and Spanish second sentences run longer: the head widens and steps down so each holds its line */
html:is([lang="da"], [lang="es"]) .mv--close > .col:first-child { max-width: 62rem; }
html[lang="da"] .mv--close h2 { font-size: clamp(32px, 3.5vw, 50px); }
html[lang="es"] .mv--close h2 { font-size: clamp(32px, 3.3vw, 47px); }
.mv--close :is(.tiers, .plans, .home-buy, .col--join) { width: 100%; max-width: var(--close-w); margin-left: auto; margin-right: auto; }
.mv--close .tiers { margin-top: 48px; gap: 32px 24px; }
.mv--close .plans { margin-top: 40px; gap: 24px; }
.mv--close .plan { padding: 24px 26px 26px; background: var(--cream); border-color: var(--rule-strong); }
.mv--close .plan--best { padding: 23.5px 25.5px 25.5px; border-color: var(--honey-deep); }
.mv--close .plan__tag { right: 26px; } /* on the straight of the top edge, its right end on the content's edge - not on the corner's curve */
.mv--close .plan__name { color: var(--ink); }
.mv--close .plan__price { margin-top: 18px; font-size: clamp(34px, 3vw, 44px); }
.mv--close .plan--best .plan__price { margin-top: 18px; } /* both cards open on their figure now: one row of figures without a lead line */
.mv--close .plan__per { font-size: 17px; color: var(--ink-2); }
.mv--close .plan__then { margin-top: 10px; font-size: var(--fs-small); color: var(--ink-2); }
.mv--close .plans__note { margin-top: 16px; }
/* the plans as the choice, once the checkout is armed (forms.js adds .is-armed): ONE mark means chosen - the
   honey edge, drawn inside the card so nothing moves. Yearly's standing honey border steps back to the plain
   edge while a choice is possible (its tag still says best value), so two honey outlines never compete; the
   chosen card's ground warms a step. */
.mv--close .plans.is-armed .plan { cursor: pointer; transition: border-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.mv--close .plans.is-armed .plan--best { border-width: 1px; padding: 24px 26px 26px; border-color: var(--rule-strong); }
.mv--close .plans.is-armed .plan:has(input:checked) { border-color: var(--honey-deep); box-shadow: inset 0 0 0 1px var(--honey-deep); background: color-mix(in oklab, var(--honey) 7%, var(--cream)); }
.mv--close .plans.is-armed .plan:has(input:focus-visible) { outline: 2px solid var(--honey-deep); outline-offset: 4px; }
@media (hover: hover) { .mv--close .plans.is-armed .plan:not(:has(input:checked)):hover { border-color: var(--rule-ink); } }
/* EMAIL, THEN SUBSCRIBE: the guest's field (forms.js builds .buy-form before the button) and the button on one
   row, the pill field and the pill button at one height - the waitlist's own shape; signed in, the button alone,
   centred. The note and the consent line under them, centred, the consent a step quieter. */
.mv--close .home-buy { margin-top: 32px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 10px; text-align: center; }
.mv--close .home-buy .buy-form { flex: 1 1 16rem; max-width: none; margin: 0; }
/* the country list (2026-10-09) takes its own row above the email field and the button */
.mv--close .home-buy .buy-country { flex: 0 0 100%; margin-bottom: 10px; }
.mv--close .home-buy > .btn { flex: none; }
.mv--close .home-buy .btn[hidden] { display: none; } /* until the checkout arms it (forms.js), the button stays hidden - .btn's display outranked [hidden] (2026-09-30, osmia-7c; the global [hidden] rule in styles.css now says the same) */
.mv--close .home-buy > :is(p, .fine) { flex: 0 0 100%; max-width: none; margin: 0; } /* :is(.fine) matches `.col > .form ~ .fine` in weight, and comes later */
.mv--close .home-buy > .fine { margin-top: 16px; }
.mv--close .home-buy > .plans__note { margin-top: 8px; }
.mv--close .home-buy > :is(.fine, .plans__note):empty { display: none; }
.mv--close .col--join { margin-top: 48px; text-align: center; }
.mv--close .col--join .form { margin: 0; max-width: none; }
.mv--close .col--join > .ctas:first-child { margin-top: 0; }
.mv--close .col--join > .statement:first-child { margin-top: 0; } /* the waitlist form left the close (2026-10-01): the closing line follows the consent line by the column's own 48px */ /* release day (cta.mode "download"): the App Store button takes the waitlist's place on the column's own rhythm */
.mv--close .col--join :is(.fine, .waitform__status) { margin-top: 16px; max-width: none; }
.mv--close .col--join .statement { margin: 48px auto 0; max-width: 30rem; }

/* ================================ PHONES ================================ */
@media (max-width: 880px) {
  .story__k { margin-top: 36px; }
  .proof { grid-column: 1; grid-row: auto; width: 100%; max-width: 400px; justify-self: center; }
  .triad { margin-top: 32px; }
  .triad li { grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr); column-gap: 16px; padding: 14px 0; }
  html:is([lang="da"], [lang="es"]) .triad li { grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr); }
  .tiers { grid-template-columns: 1fr; gap: 28px; margin-top: 36px; max-width: 40rem; }
  .mv--close .tiers { margin-top: 36px; gap: 24px; text-align: center; } /* on a phone the tiers read as the system figure does: a centred label over centred rows of chips */
  .tiers .ai__chips { justify-content: center; margin-inline: auto; } /* the 340px Osmia AI list (six chips, 3 + 3) centres in its tier */
  .tiers .ai__chips li, .tiers.tiers .ai__chips li { height: 30px; padding: 0 10px 0 8px; font-size: 13px; }
  .mv--close .plans { margin-top: 32px; }
  .mv--close .plan { padding: 18px 18px 20px; }
  .mv--close .plan--best { padding: 17.5px 17.5px 19.5px; }
  .mv--close .plans.is-armed .plan--best { padding: 18px 18px 20px; }
  .mv--close .plan__tag { right: 18px; }
  .mv--close .plan__price { font-size: 32px; }
  .mv--close .home-buy { margin-top: 28px; }
  .mv--close .col--join { margin-top: 40px; }
  .mv--close .col--join .statement { margin-top: 40px; }
}
/* PHONES: the two plans stack. Side by side at 163px each they broke their own figures ("/year" alone on a line;
   "4,99 € / første måned / derefter / 9,99 €/måned" in Danish); one to a row, each reads as it does on a desk -
   the name, then the figure and its unit on one line, then the terms. The field and the button stack, full
   width, as the waitlist's do. */
@media (max-width: 600px) {
  .mv--close .plans { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .mv--close .plan__price { margin-top: 12px; }
  .mv--close .plan--best .plan__price { margin-top: 12px; }
  .mv--close .plan__then { margin-top: 6px; }
  .mv--close .home-buy .buy-form { flex: 0 0 100%; }
  .mv--close .home-buy > .btn { flex: 1 1 100%; justify-content: center; }
  .mv--close .home-buy .buy-form + .btn { margin-top: 10px; }
}