/* Mettlekind painted day: the painted pages.
   A sticky stage holds the shared sky, the sun and each scene's layers.
   Chapters scroll over it; each chapter's words are pinned while its scene plays. */

body { position: relative; }

.day { position: relative; }
.stage {
  position: sticky; top: var(--hh); height: calc(100svh - var(--hh)); overflow: hidden; z-index: 0;
  contain: layout paint; background: var(--bg);
}
.sky, .sky-b { position: absolute; inset: 0; background: linear-gradient(180deg, var(--sky-top, #EAB4A8), var(--sky-bottom, #F8D8BC) 78%); }
.sky-b { opacity: 0; will-change: opacity; }   /* the sky's second copy: the engine fades it across each small step of colour */
.stars {
  position: absolute; inset: 0 0 38% 0; opacity: 0;
  background-image:
    radial-gradient(1.4px 1.4px at 8% 18%, #fff 60%, transparent 70%), radial-gradient(1px 1px at 17% 42%, #fff 60%, transparent 70%),
    radial-gradient(1.6px 1.6px at 26% 10%, #fff 60%, transparent 70%), radial-gradient(1px 1px at 33% 30%, #fff 60%, transparent 70%),
    radial-gradient(1.2px 1.2px at 44% 14%, #fff 60%, transparent 70%), radial-gradient(1px 1px at 52% 36%, #fff 60%, transparent 70%),
    radial-gradient(1.5px 1.5px at 61% 8%, #fff 60%, transparent 70%), radial-gradient(1px 1px at 69% 26%, #fff 60%, transparent 70%),
    radial-gradient(1.3px 1.3px at 77% 12%, #fff 60%, transparent 70%), radial-gradient(1px 1px at 86% 34%, #fff 60%, transparent 70%),
    radial-gradient(1.6px 1.6px at 93% 20%, #fff 60%, transparent 70%), radial-gradient(1px 1px at 4% 52%, #fff 60%, transparent 70%),
    radial-gradient(1px 1px at 39% 56%, #fff 60%, transparent 70%), radial-gradient(1.2px 1.2px at 73% 48%, #fff 60%, transparent 70%),
    radial-gradient(1px 1px at 22% 66%, #fff 60%, transparent 70%), radial-gradient(1px 1px at 58% 62%, #fff 60%, transparent 70%);
}
.is-dark .stars { opacity: .85; }

/* The sun (and, at night, the moon). The engine moves and scales it. */
.sun {
  position: absolute; left: 0; top: 0; width: 100px; height: 100px; margin: -50px 0 0 -50px; border-radius: 50%;
  background: radial-gradient(closest-side, var(--sun-core, #FFF4DF) 96%, transparent 100%);
  will-change: transform, opacity;
}
.sun::before { content: ""; position: absolute; inset: -110%; border-radius: 50%; background: radial-gradient(closest-side, var(--sun-glow, #FFD9B0), transparent); opacity: .55; z-index: -1; }
.is-dark .sun::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 34% 38%, rgba(120, 128, 160, .28) 0 11%, transparent 12%),
    radial-gradient(circle at 62% 60%, rgba(120, 128, 160, .22) 0 15%, transparent 16%),
    radial-gradient(circle at 58% 28%, rgba(120, 128, 160, .18) 0 7%, transparent 8%);
}

.art { position: absolute; inset: 0; opacity: 0; contain: layout paint; }   /* shown and hidden by opacity only, so it never restyles or re-lays the page */
.art.live { will-change: opacity; }   /* its own layer only while on screen or about to be; out of sight it is not drawn at all */
.layer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; display: block; }
.art.live .layer { will-change: transform; }   /* only the scene on screen (and the next) gets its own layers */
.layer-cloudL { transform-origin: 22% 72%; }
.layer-cloudR { transform-origin: 78% 72%; }
.art-walk .layer { transform-origin: 50% 100%; }
.gold-path { fill: none; stroke: var(--gold); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.post-glow { opacity: 0; transition: opacity .45s ease; }
.post-disc { fill: var(--ochreHi); stroke: var(--goldDark); stroke-width: 1.5; transition: fill .35s ease; }
.post.lit .post-glow { opacity: 1; }
.post.lit .post-disc { fill: var(--gold); }

/* How we help: the mist lifts off the fields once a situation is picked. */
.mist-lift { transition: transform 1.6s cubic-bezier(.3, .6, .2, 1), opacity 1.4s ease; }
.mist-lift.lifted { transform: translateY(-150px); opacity: .18; }
/* Questions: each question's star, quiet until its question is opened. */
.qstar-glow { opacity: 0; transition: opacity .8s ease; }
.qstar-core { fill: #FFF7E6; opacity: .45; transition: opacity .6s ease, fill .6s ease; }
.qstar.lit .qstar-glow { opacity: .75; }
.qstar.lit .qstar-core { fill: #FFE7A0; opacity: 1; }
.qstar.now .qstar-glow { opacity: 1; }

/* The dove flies in its own layer above the words' washes, so it is never dimmed by one. The app
   moves and turns .flyer along its way. Inside, the picture glides; when the dove beats its wings,
   the strip of wing frames (.beat) steps across over it. Where it would cover words it fades away
   (.hush) until it is clear again. */
.flight { position: sticky; top: var(--hh); z-index: 3; height: calc(100svh - var(--hh)); margin-top: calc(-1 * (100svh - var(--hh))); overflow: hidden; pointer-events: none; contain: layout paint; }
.flyer { position: absolute; left: 0; top: 0; width: 100px; transform-origin: 0 0; will-change: transform, opacity; pointer-events: none; }
.flyer img { display: block; width: 100px; height: auto; }
.fly-bob { position: relative; transition: opacity .35s ease; }
.flyer.hush .fly-bob { opacity: 0; transition-duration: .12s; }   /* away quickly where words jump under it; back gently */
.flyer.off { visibility: hidden; }   /* a dove that is not in the air is not drawn */
/* The wing frames are drawn with room on the left for the wing's tip as it sweeps back: each frame
   is 1.2 times the picture's width, with the bird in the same place. */
.beat { position: absolute; left: -20%; top: 0; width: 120%; height: 100%; overflow: hidden; opacity: 0; pointer-events: none; }
.beat i { display: block; width: 1000%; height: 100%; background: no-repeat 0 0 / 100% 100%; }
.wings .beat i { background-image: url("../img/dove-wings.webp"); }
/* Sitting on a branch: the wing lowered along its back (frame 4 of the strip), breathing very
   slightly, its belly kept on the bark. */
.wings .flyer.perched .beat { opacity: 1; }
.wings .flyer.perched img { opacity: 0; }
.flyer.perched .beat i { transform: translateX(-30%); }
.flyer.perched .fly-bob { transform-origin: 65px 78px; animation: dove-breathe 3.8s ease-in-out infinite; }
@keyframes dove-breathe { 0%, 100% { transform: none; } 50% { transform: scale(1.008, 1.02); } }
/* Clouds that drift on their own, slowly (the scroll moves everything else). */
.drift { animation: drift 64s ease-in-out infinite alternate; }
@keyframes drift { from { translate: -2.5% 0; } to { translate: 2.5% 0; } }

/* ---------- chapters ---------- */
.chapters { position: relative; z-index: 2; margin-top: calc(-1 * (100svh - var(--hh))); }
.chapter { position: relative; height: 220vh; }
[data-day="home"] .chapter[data-i="0"] { height: 160vh; }
.pin {
  position: sticky; top: var(--hh); height: calc(100svh - var(--hh)); isolation: isolate;
  padding: clamp(28px, 6vh, 72px) var(--gut); display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  gap: clamp(22px, 4vh, 44px);
}
/* A scene whose words are taller than the screen scrolls instead of pinning (set by app.js). */
.chapter.tall { height: auto !important; }
.chapter.tall .pin { position: relative; top: 0; height: auto; min-height: calc(100svh - var(--hh)); padding-bottom: 14vh; }

/* 06:30 the opening */
.hero { max-width: 760px; }
.hero .lines { max-width: 30em; }

/* 08:00 the weight: the slips settle into a grid */
[data-day="home"] .chapter[data-i="1"] .pin { justify-content: flex-start; padding-top: clamp(28px, 7vh, 80px); }
[data-day="home"] .chapter[data-i="1"] .slips { display: flex; flex-wrap: wrap; gap: clamp(14px, 1.8vh, 18px) 16px; width: 100%; max-width: 1060px; }
[data-day="home"] .chapter[data-i="1"] .slips li { display: flex; }
[data-day="home"] .chapter[data-i="1"].on-stage .slips li { will-change: transform; }   /* layers of their own only while their scene is on screen (fewer layers make every frame cheaper) */
[data-day="home"] .chapter[data-i="1"] .slip { font-size: clamp(17px, 1.35vw, 21px); transform: rotate(var(--rot, 0deg)) translateY(var(--dy, 0px)); }
/* Its call to action waits until the slips have settled. */
.weight-cta { flex-direction: row; transition: opacity .3s ease, transform .3s var(--ease); }
.weight-cta.settling { visibility: hidden; opacity: 0; transform: translateY(8px); transition: none; }
.weight-cta p { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: clamp(17px, 1.3vw, 20px); color: var(--t); }
.cta-none a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }

/* 10:00 the clearing: its line becomes where we'd start looking, for the latest pick */
.release-copy { max-width: 640px; }
.why.is-fix { font-family: var(--serif); font-weight: 300; font-size: clamp(22px, 2vw, 32px); line-height: 1.22; letter-spacing: -.015em; padding-left: 18px; border-left: 3px solid var(--gold); }
.why.swap { animation: why-in .4s ease both; }
@keyframes why-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* 12:00 the calculator, on a panel tinted from the midday sky */
.calc { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(10px, 1.8vh, 18px); max-width: 640px; }
.calc-sentence { font-family: var(--serif); font-weight: 300; font-size: clamp(22px, 2vw, 32px); line-height: 1.3; letter-spacing: -.02em; text-wrap: pretty; }
.stepper { display: inline-flex; align-items: center; vertical-align: middle; margin: 0 .1em; border-bottom: 2px solid var(--gold); white-space: nowrap; }
.step-btn { width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; font-family: var(--sans); font-size: 22px; color: var(--h); line-height: 1; padding: 0; }
.step-btn:hover { color: var(--t); }
.num { width: 2.1em; text-align: center; border: 0; background: transparent; font: inherit; color: var(--t); font-size: inherit; padding: 0; min-height: 44px; }
.calc-out { display: flex; flex-direction: column; gap: 4px; }
.hours { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .35em; color: var(--h); }
.hours .roller { font-family: var(--serif); font-weight: 300; font-size: clamp(72px, 8vw, 132px); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.hours-unit { font-family: var(--serif); font-weight: 300; font-size: clamp(24px, 2.2vw, 36px); letter-spacing: -.02em; }
.hours-line { font-family: var(--serif); font-weight: 300; font-size: clamp(20px, 1.7vw, 27px); line-height: 1.2; letter-spacing: -.015em; color: var(--t); }
.hours-line .ink { background: linear-gradient(177deg, transparent 0 56%, var(--hl-bg) 56% 92%, transparent 92%) no-repeat; color: var(--hl-fg, inherit); padding: 0 .05em; }
.calc-limits { font-size: 15px; color: var(--t2); }
.calc .note { font-size: 12px; line-height: 1.45; letter-spacing: .01em; color: var(--t2); max-width: 34em; margin-top: -4px; }   /* a quiet footnote */
.calc-limits:empty { display: none; }
/* Rolling digits: each digit is a strip of 0 to 9 that slides to its value. */
.roller { display: inline-flex; height: .9em; line-height: .9em; overflow: hidden; vertical-align: top; }
.dg { display: inline-block; height: .9em; overflow: hidden; }
.dg-strip { display: flex; flex-direction: column; transition: transform var(--dur, .45s) var(--ease) var(--delay, 0s); }
.on-stage .dg-strip { will-change: transform; }
.dg-strip span, .dg-dot { display: block; height: .9em; line-height: .9em; }
.roller.instant .dg-strip { transition: none; }

/* 15:00 the path: a number and a short line at each post */
[data-day="home"] .chapter[data-i="4"] .pin { justify-content: flex-start; padding-top: clamp(28px, 7vh, 80px); }
.signs { list-style: none; margin: 0; padding: 0; }
.sign {
  display: flex; align-items: baseline; gap: 10px; background: var(--tint); border: 1px dashed var(--tint-line); border-radius: 14px; padding: 10px 14px 12px;
  box-shadow: 0 16px 34px -24px rgba(var(--sh), .7); transition: border-color .45s ease;
}
/* Until the path reaches it, a step's number is quiet; its words never fade. */
.sign-n { font-family: var(--serif); font-weight: 300; font-size: clamp(26px, 2.2vw, 36px); line-height: .9; letter-spacing: -.04em; color: var(--t2); transition: color .45s ease; }
.sign.lit { border-style: solid; border-color: var(--gold); }
.sign.lit .sign-n { color: var(--dgold); }
.is-dark .sign.lit .sign-n { color: var(--gold); }
.sign-title { font-family: var(--serif); font-weight: 300; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.15; letter-spacing: -.01em; color: var(--t); text-wrap: pretty; }
@media (min-width: 1000px) {
  .on-stage .signs.placed .sign { will-change: transform, opacity; }
  .signs.placed .sign { position: absolute; left: 0; top: 0; width: var(--w, 220px); transform: translate(var(--x, 0), calc(var(--y, 0px) + 10px)); opacity: 0; transition: opacity .5s ease, transform .6s var(--ease), border-color .45s ease; }
  .signs.placed .sign.lit { opacity: 1; transform: translate(var(--x, 0), var(--y, 0)); }
  .signs.placed .sign::after { content: ""; position: absolute; left: var(--tick, 50%); top: 100%; width: 2px; margin-left: -1px; height: var(--lead, 9px); background: var(--gold); opacity: .9; transform: rotate(var(--ang, 0deg)); transform-origin: 50% 0; transition: opacity .3s ease; }
  .signs.placed.leaving .sign::after { opacity: 0; }
}
@media (max-width: 999px) {
  .signs { display: flex; flex-direction: column; gap: 8px; max-width: 520px; width: 100%; }
}

/* 18:30 the golden evening */
.dest-copy { max-width: 720px; opacity: 0; transform: translate3d(0, 26px, 0); transition: opacity .7s ease, transform .9s var(--ease); }
.dest-copy.in, .rm .dest-copy { opacity: 1; transform: none; }
.picked-line { font-family: var(--serif); font-weight: 300; font-size: clamp(19px, 1.5vw, 23px); color: var(--t); padding-left: 16px; border-left: 3px solid var(--gold); }
.pass { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding-top: 12px; border-top: 1px solid var(--tint-line); }
.pass p { font-size: 15px; color: var(--t2); flex: 1 1 240px; }

/* ---------- inner pages: one long scene that scrolls ---------- */
.chapter.flow { height: auto; }
.chapter.flow .pin { position: relative; top: 0; height: auto; min-height: calc(100svh - var(--hh)); justify-content: flex-start; gap: clamp(56px, 11vh, 132px); padding-top: clamp(44px, 10vh, 120px); padding-bottom: clamp(160px, 34vh, 360px); }

/* How we help: the twelve situations as chips in the hedgerow; each picked one opens to show where we'd start looking. */
@media (min-width: 760px) { [data-day="how-we-help"] .display { max-width: 8.4em; } }   /* its longer headline keeps two lines with the stand-in font too */
.help-slips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 14px; width: 100%; max-width: 900px; align-items: flex-start; }
.help-slips li { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.help-slips li.open { flex-basis: 100%; }
.help-slips .slip { min-height: 48px; font-size: clamp(17px, 1.35vw, 21px); }
.fix { position: relative; max-width: 36em; margin: 0 4px; padding: 12px 16px 13px 18px; border-left: 3px solid var(--gold); border-radius: 0 14px 14px 0;
  background: var(--tint); color: var(--t); font-family: var(--serif); font-weight: 300; font-size: clamp(18px, 1.4vw, 21px); line-height: 1.25; letter-spacing: -.01em;
  box-shadow: 0 18px 34px -24px rgba(var(--sh), .7); animation: rise .6s var(--ease) both; }
.help-more { max-width: 560px; }

/* How it works: a long walk, pinned; the waymarkers light as you go. */
.chapter.walk { height: 440vh; }
.walk .pin { justify-content: flex-start; padding-top: clamp(32px, 7vh, 88px); }
.walk-card { max-width: 520px; gap: 16px; }
.walk-steps { list-style: none; margin: 0; padding: 0; display: grid; }
.walk-step { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 6px; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(10px); transition: opacity .45s ease, transform .55s var(--ease), visibility 0s linear .45s; }
.walk-step.on { z-index: 1; pointer-events: auto; opacity: 1; visibility: visible; transform: none; transition: opacity .45s ease, transform .55s var(--ease), visibility 0s; }
.walk-n { font-family: var(--serif); font-weight: 300; font-size: clamp(36px, 3.4vw, 58px); line-height: .9; letter-spacing: -.04em; color: var(--h); }
.is-dark .walk-n { color: var(--hl-fg); }
.walk-title { font-family: var(--serif); font-weight: 300; font-size: clamp(28px, 2.6vw, 44px); line-height: 1.02; letter-spacing: -.022em; color: var(--h); }

/* About: short paragraphs drifting down the evening, the dove gliding between them. */
.about-body { display: flex; flex-direction: column; gap: clamp(56px, 14vh, 150px); width: 100%; }
.about-p { max-width: 520px; }
.about-p .lines { font-family: var(--serif); font-weight: 300; font-size: clamp(21px, 1.8vw, 28px); line-height: 1.3; letter-spacing: -.012em; }

/* Questions: the list straight on the dusk sky. */
.qa { align-items: stretch; width: min(100%, 900px); max-width: none; gap: 0; }
.qa-item + .qa-item { border-top: 1px solid var(--tint-line); }

/* Get started */
.start .ask { max-width: 480px; }
.promise { margin-top: -6px; }

/* Privacy and the missing page: a band of painted sky. */
.band { position: relative; isolation: isolate; height: clamp(220px, 38vh, 400px); overflow: hidden; background: var(--bg); }
.band .art { opacity: 1; }
.band .layer { will-change: transform; }
.sky-still { position: absolute; inset: 0; }
.sky-shift { opacity: 0; animation: sky-shift 26s ease-in-out infinite alternate; }
@keyframes sky-shift { to { opacity: 1; } }
.page[data-page="privacy"] { position: relative; }
.band-dove { z-index: 2; }
.band.off-screen .drift { animation-play-state: paused; }   /* out of sight, the clouds do no work */
.band-head { position: relative; z-index: 1; isolation: isolate; margin-top: calc(-1 * clamp(80px, 13vh, 150px)); padding: 0 var(--gut) clamp(32px, 6vh, 64px); }
.privacy-rows { margin-top: clamp(16px, 3vh, 32px); }
.page-lost { position: relative; min-height: calc(100svh - var(--hh)); display: flex; align-items: center; }
.page-lost .band { position: absolute; inset: 0; height: auto; }
.page-lost .band-head { margin: 0; padding-block: 48px; }


/* ---------- ruler lines (laptop only) ---------- */
.ruler {
  position: absolute; top: 0; bottom: 0; width: 10px; z-index: 35; pointer-events: none; display: none;
  --rc: rgba(32, 29, 23, .1);
  background:
    linear-gradient(var(--rc), var(--rc)) 0 0 / 1px 100% no-repeat,
    repeating-linear-gradient(180deg, var(--rc) 0 1px, transparent 1px 80px) 0 0 / 6px 100% no-repeat,
    repeating-linear-gradient(180deg, var(--rc) 0 1px, transparent 1px 400px) 0 0 / 10px 100% no-repeat;
}
.ruler-l { left: 10px; }
.ruler-r { right: 10px; transform: scaleX(-1); }
.is-dark .ruler { --rc: rgba(247, 243, 232, .1); }
@media (min-width: 1024px) { .ruler { display: block; } }

/* ---------- phones (under 760px): shorter scenes, words above the picture ---------- */
@media (max-width: 759px) {
  [data-day="home"] .chapter { height: 140vh; }
  .pin { justify-content: flex-start; padding-top: 22px; padding-bottom: 18px; gap: 20px; }
  [data-day="home"] .chapter[data-i="1"] .slips { gap: 8px 7px; }
  [data-day="home"] .chapter[data-i="1"] .slips li { max-width: 100%; }
  [data-day="home"] .chapter[data-i="1"] .slip { min-height: 44px; padding: 7px 13px 8px; border-radius: 22px; font-size: 15px; line-height: 1.15; transform: none; }
  /* A wrapped cloud: each chip is as wide as its words need on two even lines (the app works out
     the longer line, --line, in letters), so neighbours differ in width. */
  .slips .slip, .help-slips .slip { width: calc(var(--line, 16) * .56em + 30px); font-size: 14.5px; text-wrap: balance; }
  .calc-sentence { font-size: 21px; }
  .hours .roller { font-size: clamp(64px, 20vw, 100px); }
  .help-slips { gap: 8px 7px; }
  .help-slips li { max-width: 100%; }
  .help-slips li.open { max-width: none; }
  .help-slips .slip { min-height: 44px; padding: 7px 13px 8px; border-radius: 22px; font-size: 15px; line-height: 1.15; }
  .chapter.walk { height: 360vh; }
  .chapter.flow .pin { gap: 56px; padding-top: 32px; padding-bottom: 46vh; }
  .about-body { gap: 64px; }
}

/* ---------- reduced motion: no pinning, every scene a finished still ---------- */
.rm .stage, .rm .flight { display: none; }
.rm .chapters { margin-top: 0; }
.rm .chapter, .rm [data-day="home"] .chapter[data-i="0"], .rm .chapter.walk { height: auto; min-height: calc(100svh - var(--hh)); overflow: clip; isolation: isolate; }
.rm .pin { position: relative; top: 0; height: auto; min-height: calc(100svh - var(--hh)); }
.rm .still { position: absolute; inset: 0; overflow: hidden; z-index: -1; }
/* On the long inner pages, the still stays behind the words as they scroll past (no movement of its own). */
.rm .chapter:is(.flow, .walk) > .still { position: sticky; inset: auto; top: var(--hh); height: calc(100svh - var(--hh)); margin-bottom: calc(-1 * (100svh - var(--hh))); }
.rm .chapter > .still-fly { position: absolute; inset: 0; height: auto; margin: 0; z-index: 1; pointer-events: none; }
.rm .chapter:is(.flow, .walk) > .still-fly { position: absolute; inset: 0 0 auto 0; margin: 0; height: calc(100svh - var(--hh)); }   /* scrolls with the words, so it is checked against them once */
.rm .art.still.still-fly.hush { visibility: hidden; }
.rm .still .layer { will-change: auto; }
.rm .art.still { opacity: 1; }
.rm .weight-cta { transition: none; }
.rm .walk-step { grid-area: auto; opacity: 1; visibility: visible; transform: none; }
.rm .walk-steps { gap: 22px; }
@media (max-width: 759px) {
  .rm .pin { padding-bottom: 46vh; }
}

/* ---------- the opening ---------- */
.loader { display: none; }
.loading .loader { display: block; position: fixed; inset: 0; z-index: 80; overflow: hidden; cursor: pointer; animation: ld-giveup .4s ease 12s forwards;
  --ld-top: #E9B1A6; --ld-bottom: #F8D9BD; --ld-night-top: #10102A; --ld-night-bottom: #2C2850; }
.is-dark .loader { --ld-top: #17162C; --ld-bottom: #383052; --ld-night-top: #05050F; --ld-night-bottom: #141228; }
.ld-sky { position: absolute; inset: 0; }
.ld-dawn { background: linear-gradient(180deg, var(--ld-top), var(--ld-bottom) 78%); z-index: 0; }
.ld-sun { position: absolute; z-index: 1; left: 78%; top: 50%; width: 24vmin; height: 24vmin; margin: -12vmin 0 0 -12vmin; border-radius: 50%;
  background: radial-gradient(closest-side, #FFF3DC 95%, rgba(255, 243, 220, 0)); box-shadow: 0 0 90px 50px rgba(255, 214, 170, .42);
  animation: ld-sun 1.4s cubic-bezier(.2, .7, .2, 1) both; }
.is-dark .ld-sun { background: radial-gradient(closest-side, #F3EEDC 95%, rgba(243, 238, 220, 0)); box-shadow: 0 0 70px 30px rgba(179, 190, 230, .3); width: 15vmin; height: 15vmin; margin: -7.5vmin 0 0 -7.5vmin; }
.ld-hills { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }
.ld-night { z-index: 3; background: linear-gradient(180deg, var(--ld-night-top), var(--ld-night-bottom)); animation: ld-night 1.2s cubic-bezier(.4, 0, .2, 1) .1s both; }
.ld-bird { position: absolute; z-index: 4; left: 0; top: 0; width: clamp(90px, 14vw, 170px); transform: translate3d(-22vw, 62vh, 0) rotate(-14deg); will-change: transform; }
.ld-bird.go { animation: ld-fly 2s cubic-bezier(.25, .6, .3, 1) both; }
.ld-bird img { display: block; width: 100%; height: auto; }
.ld-logo { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; animation: ld-logo .7s ease .3s both; }
.lockup-ld { width: min(64vw, 440px); height: auto; color: var(--ink); transition: transform .52s cubic-bezier(.6, 0, .2, 1); will-change: transform; }
@keyframes ld-night { to { opacity: 0; } }
@keyframes ld-sun { from { transform: translateY(28vh); } to { transform: none; } }
/* The opening's dove flies in high, above where the headline will be, so the page's dove can carry on and land on the dawn branch. */
@keyframes ld-fly { from { transform: translate3d(-24vw, 58vh, 0) rotate(4deg) scale(.8); } to { transform: translate3d(30vw, 4vh, 0) rotate(-2deg) scale(1); } }
@keyframes ld-logo { from { opacity: 0; } to { opacity: 1; } }
.loader.out, .loader.out-fast { pointer-events: none; }
.loader.out .ld-sky, .loader.out .ld-sun, .loader.out .ld-hills { opacity: 0; transition: opacity .42s ease .08s; }
.loader.out-fast { opacity: 0; transition: opacity .26s ease; }
.loading .site-header .lockup { opacity: 0; animation: ld-show 0s linear 12s forwards; }
@keyframes ld-giveup { to { opacity: 0; visibility: hidden; } }
@keyframes ld-show { to { opacity: 1; } }
.rm .ld-night, .rm .ld-bird { display: none; }
.rm .loader.out, .rm .loader.out-fast { opacity: 0; transition: opacity .3s ease !important; }
@media (max-width: 759px) { .ld-sun { left: 70%; top: 31%; } .ld-bird.go { animation-name: ld-fly-phone; } }
/* On a phone the words sit high, so the opening's dove comes in low, under the logo, towards the branch. */
@keyframes ld-fly-phone { from { transform: translate3d(-30vw, 80vh, 0) rotate(4deg) scale(.8); } to { transform: translate3d(22vw, 70vh, 0) rotate(-2deg) scale(1); } }

/* Get started: the privacy link sits on its own line, so its 44px tap target never covers the sentence above. */
.ask .small-note { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.ask .small-note a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; }