/* Conserius — Night + Light. Promoted from study/night/ on 2026-10-04 (his choice of 2026-09-23).
   The night changes on the way down the home page: violet twilight → indigo → deep teal → earth.
   Light comes only from living things; nothing a person reads or presses ever glows.
   Inner pages carry the same sky, still, and no moving layer at all. */

@font-face { font-family: "Inter Variable"; font-weight: 100 900; font-display: swap;
  src: url("/assets/fonts/inter-latin-wght-normal-Dx4kXJAl.woff2") format("woff2"); }

:root {
  color-scheme: dark;
  --ink: #edf2f7;            /* headings */
  --body: #b6c0cd;           /* reading text: not white, so a long read does not glare */
  --muted: #8591a1;
  --rule: rgba(255, 255, 255, 0.13);
  --cyan: #9be8ff; --violet: #b7aaff; --teal: #74e2c6; --earth: #cbd3dd;
  --sky-top: #1b1442; --sky-bot: #0c1234;
  --sans: "Inter Variable", system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;   /* the system's own: no font download for the receipt */
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #07090f; color: var(--body); font: 400 19px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
a { color: inherit; }

/* ── the layers, back to front ── */
.sky { position: fixed; inset: 0; z-index: 0; background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bot) 100%); }
body[data-i2="off"] .sky { background: #0b0d12; }
/* A flat dark gradient bands on an 8-bit screen. A whisper of grain dithers it smooth. */
.grain { position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0.05; background: url("/assets/img/grain.png") repeat; background-size: 160px 160px; }

.stage { position: fixed; inset: 0; z-index: 3; pointer-events: none; transform-origin: 50% 50%; will-change: transform; }
.tree { isolation: isolate; }
.tree__layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* Idea 1: a band of light walks down the tree with the reader. Everything outside it rests. */
body[data-i1="on"] .stage {
  --lo: rgba(0, 0, 0, var(--f, 1));
  -webkit-mask-image: linear-gradient(to bottom, var(--lo) 0%, var(--lo) calc(var(--c, 50%) - var(--w, 50%) - 17%), #000 calc(var(--c, 50%) - var(--w, 50%)), #000 calc(var(--c, 50%) + var(--w, 50%)), var(--lo) calc(var(--c, 50%) + var(--w, 50%) + 17%), var(--lo) 100%);
          mask-image: linear-gradient(to bottom, var(--lo) 0%, var(--lo) calc(var(--c, 50%) - var(--w, 50%) - 17%), #000 calc(var(--c, 50%) - var(--w, 50%)), #000 calc(var(--c, 50%) + var(--w, 50%)), var(--lo) calc(var(--c, 50%) + var(--w, 50%) + 17%), var(--lo) 100%);
}
body[data-i1="off"] .stage { position: absolute; height: 100vh; bottom: auto; }

.seeds { position: fixed; inset: 0; z-index: 5; width: 100%; height: 100%; pointer-events: none; }
body[data-i3="off"] .seeds { display: none; }

main, .foot { position: relative; z-index: 6; }

/* ── the bar ── */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 10; display: flex; align-items: center; gap: 28px;
  height: 60px; padding: 0 clamp(20px, 5vw, 64px); background: linear-gradient(180deg, rgba(5, 7, 13, 0.82), rgba(5, 7, 13, 0)); }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; font-size: 16px; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; }
.brand img { border-radius: 6px; }
.nav__links { display: flex; gap: 26px; margin-left: auto; font-size: 14.5px; }
.nav__links a { color: #c3ccd8; text-decoration: none; }
.nav__links a:hover { color: var(--ink); }
@media (max-width: 720px) { .nav__links { display: none; } .nav .btn--sm { margin-left: auto; } }

/* ── type ── */
.eyebrow { margin: 0 0 18px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.eyebrow--crown { color: var(--cyan); } .eyebrow--trunk { color: var(--violet); }
.eyebrow--roots { color: var(--teal); } .eyebrow--ground { color: var(--earth); }
h1, h2 { color: var(--ink); font-weight: 600; letter-spacing: -0.025em; margin: 0; }
h1 { font-size: clamp(40px, 4.6vw, 66px); line-height: 1.04; }
h2 { font-size: clamp(30px, 3.1vw, 46px); line-height: 1.1; margin-bottom: 26px; }
p { margin: 0 0 18px; }
.accent { color: var(--cyan); }
.lede { font-size: clamp(18px, 1.5vw, 21px); color: #c8d1dc; margin: 18px auto 0; max-width: 34em; }
.note { color: var(--muted); font-size: 15px; margin-top: 14px; }
/* An honest limit, set as part of the design rather than hidden in a footnote. */
.limit { margin-top: 30px; padding-left: 16px; border-left: 1px solid var(--rule); font-size: 15.5px; color: var(--muted); }
.limit span { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #8d98a8; margin-bottom: 4px; }

/* ── what you press: flat, lit only by its own colour ── */
.btn { display: inline-flex; align-items: center; height: 46px; padding: 0 22px; border-radius: 999px;
  background: #eaf0f6; color: #0a0d13; font-weight: 600; font-size: 15.5px; text-decoration: none; }
.btn--sm { height: 34px; padding: 0 16px; font-size: 14px; }
.link { color: var(--cyan); text-decoration: none; font-weight: 500; font-size: 15.5px; }
.link::after { content: " \2192"; }
.actions { display: flex; gap: 24px; align-items: center; margin: 30px 0 0; }

/* Idea 3 OFF: what the site does today — a rainbow on the headline and light on the buttons. */
body[data-i3="off"] .accent { background: linear-gradient(90deg, #45e0b6, #58a6ff 45%, #a47cff 72%, #ff79d4);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
body[data-i3="off"] .btn { box-shadow: 0 0 30px rgba(120, 190, 255, 0.55), 0 0 2px rgba(255, 255, 255, 0.9); }
body[data-i3="off"] h1, body[data-i3="off"] h2 { text-shadow: 0 0 26px rgba(140, 200, 255, 0.38); }

/* ── the walk down ── */
.hero { min-height: 100vh; display: flex; align-items: flex-end; justify-content: center; text-align: center; padding: 0 24px 8vh; }
.hero .actions { justify-content: center; }
.part { min-height: 100vh; display: flex; align-items: center; padding: 14vh clamp(24px, 7vw, 110px); }
.copy { max-width: var(--col, 32em); }
/* With the tree beside the text, the text keeps the left half. Without it, it takes the middle. */
body[data-i1="off"] .part, .part.is-narrow { justify-content: center; }
@media (max-width: 999px) { .part { justify-content: center; } }

.foot { display: flex; justify-content: space-between; padding: 28px clamp(24px, 7vw, 110px) 90px; font-size: 13px; color: #8d98a8; border-top: 1px solid rgba(255, 255, 255, 0.06); }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ── the longer page he asked for: vision, what Eyva does, the rules (2026-09-23) ── */
body[data-i1="off"] .part { min-height: auto; padding: 13vh clamp(24px, 7vw, 110px); }
.sect { position: relative; padding: 13vh clamp(24px, 7vw, 110px); }
.sect__inner { max-width: 1180px; margin: 0 auto; }
.prose { max-width: 34em; margin: 0 auto; }
.center { text-align: center; }
.center h2 { margin-bottom: 18px; }
.vision__line { font-size: clamp(23px, 2.2vw, 32px); line-height: 1.38; font-weight: 500; letter-spacing: -0.015em; color: var(--ink); margin: 0 0 34px; }

/* the abilities: calm cards, no light of their own — only the small word on top carries a colour */
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 52px; }
@media (max-width: 1100px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .grid { grid-template-columns: 1fr; } }
.card { padding: 26px 24px 28px; border-radius: 18px; background: rgba(255, 255, 255, 0.028); border: 1px solid rgba(255, 255, 255, 0.07); }
.card h3 { margin: 0 0 10px; font-size: 17.5px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.card p { margin: 0; font-size: 15.5px; line-height: 1.58; }
.card .tag { margin: 0 0 14px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.tag--cyan { color: var(--cyan); } .tag--violet { color: var(--violet); } .tag--teal { color: var(--teal); } .tag--pink { color: #ffa6dc; }
.aside-note { margin: 34px auto 0; max-width: 40em; text-align: center; font-size: 15px; color: var(--muted); }

/* the rules: a plain list, the way a value is written down, not sold */
.rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 52px; margin-top: 56px; }
@media (max-width: 960px) { .rules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .rules { grid-template-columns: 1fr; } }
.rule b { display: block; margin-bottom: 12px; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; color: #8d98a8; }
.rule h3 { margin: 0 0 10px; font-size: 18.5px; line-height: 1.32; font-weight: 600; letter-spacing: -0.012em; color: var(--ink); }
.rule p { margin: 0; font-size: 15.5px; line-height: 1.6; }

/* ═══ more of the night (2026-09-23) ═══
   Everything below moves slowly and none of it sits on a line of text. Mist and aurora are drawn
   with soft gradients only — no filter: blur(), which would repaint the page — and they move by
   transform alone, which the compositor does for free. */

/* ── aurora: slow veils of light high in the twilight, gone by the time you are reading ── */
.aurora { position: fixed; inset: 0 0 auto 0; height: 70vh; z-index: 1; pointer-events: none; opacity: var(--aurora, 1); }
.aurora i { position: absolute; left: -20vw; width: 140vw; height: 38vh; border-radius: 50%; will-change: transform, opacity; }
.aurora .a1 { top: -6vh; background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(118, 92, 255, 0.34), rgba(118, 92, 255, 0) 70%); animation: veil-a 38s ease-in-out infinite alternate; }
.aurora .a2 { top: 4vh; background: radial-gradient(ellipse 50% 42% at 50% 50%, rgba(64, 214, 200, 0.22), rgba(64, 214, 200, 0) 70%); animation: veil-b 46s ease-in-out infinite alternate; }
.aurora .a3 { top: 12vh; height: 26vh; background: radial-gradient(ellipse 40% 40% at 50% 50%, rgba(255, 110, 212, 0.12), rgba(255, 110, 212, 0) 70%); animation: veil-c 54s ease-in-out infinite alternate; }
@keyframes veil-a { 0% { transform: translate3d(-12vw, 0, 0) scaleY(0.8) rotate(-4deg); opacity: 0.7; } 100% { transform: translate3d(10vw, 3vh, 0) scaleY(1.15) rotate(3deg); opacity: 1; } }
@keyframes veil-b { 0% { transform: translate3d(14vw, 2vh, 0) scaleY(1.1) rotate(5deg); opacity: 1; } 100% { transform: translate3d(-10vw, -2vh, 0) scaleY(0.85) rotate(-3deg); opacity: 0.6; } }
@keyframes veil-c { 0% { transform: translate3d(-6vw, 0, 0) rotate(2deg); opacity: 0.5; } 100% { transform: translate3d(8vw, 4vh, 0) rotate(-4deg); opacity: 1; } }
body[data-i2="off"] .aurora { display: none; }

/* ── mist: layers drifting across at their own speeds; one behind the tree, one just in front ── */
.mist { position: fixed; inset: 0; pointer-events: none; will-change: transform; }
.mist--back { z-index: 1; }
.mist--front { z-index: 4; }
.mist i { position: absolute; width: 160vw; left: -30vw; border-radius: 50%; will-change: transform; }
.mist .m1 { top: 52vh; height: 46vh; background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(60, 200, 190, 0.11), rgba(60, 200, 190, 0) 72%); animation: drift-a 70s ease-in-out infinite alternate; }
.mist .m2 { top: 24vh; height: 40vh; background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(120, 100, 255, 0.09), rgba(120, 100, 255, 0) 72%); animation: drift-b 90s ease-in-out infinite alternate; }
.mist .m3 { top: 76vh; height: 36vh; background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(80, 180, 255, 0.08), rgba(80, 180, 255, 0) 72%); animation: drift-a 110s ease-in-out infinite alternate-reverse; }
.mist .m4 { top: 62vh; height: 30vh; background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(90, 220, 205, 0.06), rgba(90, 220, 205, 0) 70%); animation: drift-b 64s ease-in-out infinite alternate-reverse; }
.mist .m5 { top: 10vh; height: 30vh; background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(170, 140, 255, 0.05), rgba(170, 140, 255, 0) 70%); animation: drift-a 84s ease-in-out infinite alternate; }
@keyframes drift-a { 0% { transform: translate3d(-14vw, 0, 0); } 100% { transform: translate3d(14vw, -3vh, 0); } }
@keyframes drift-b { 0% { transform: translate3d(12vw, 2vh, 0); } 100% { transform: translate3d(-16vw, -2vh, 0); } }
body[data-i2="off"] .mist { display: none; }

/* ── the headline's one colour breathes through the living inks, slowly and without any glow ── */
body[data-i3="on"] .accent { animation: breathe 14s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { color: #9be8ff; } 35% { color: #8ff0d4; } 70% { color: #bdb2ff; } }

/* ── the first screen arrives with the tree ── */
.hero__copy > * { opacity: 0; transform: translateY(14px); animation: arrive 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
.hero__copy > :nth-child(1) { animation-delay: 0.9s; }
.hero__copy > :nth-child(2) { animation-delay: 1.15s; }
.hero__copy > :nth-child(3) { animation-delay: 1.45s; }
.hero__copy > :nth-child(4) { animation-delay: 1.7s; }
@keyframes arrive { to { opacity: 1; transform: none; } }

/* ── everything else rises into place as it is reached ── */
.rv { opacity: 0; transform: translateY(22px); transition: opacity 1s ease, transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: var(--d, 0s); }
.rv.is-in { opacity: 1; transform: none; }

/* ── a card answers the hand with its own colour, the way the forest answers a step ── */
.card { transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.6s ease, background-color 0.6s ease; }
.card:has(.tag--cyan) { --tint: 155, 232, 255; } .card:has(.tag--violet) { --tint: 183, 170, 255; }
.card:has(.tag--teal) { --tint: 116, 226, 198; } .card:has(.tag--pink) { --tint: 255, 166, 220; }
.card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.7s ease;
  background: radial-gradient(90% 70% at 50% 0%, rgba(var(--tint), 0.12), rgba(var(--tint), 0) 70%); }
.card { position: relative; }
.card:hover { transform: translateY(-4px); border-color: rgba(var(--tint), 0.32); }
.card:hover::before { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .aurora i, .mist i, .accent { animation: none !important; }
  .hero__copy > * { animation: none; opacity: 1; transform: none; }
  .rv { opacity: 1; transform: none; transition: none; }
}

/* the crown's living light sits over the tree and lightens it, the way light does */
.tree__living { mix-blend-mode: screen; }
body[data-i3="off"] .tree__living { display: none; }

/* the tree's own light: a violet glow under the canopy and a pink pool where the curtain meets the
   earth. OFF since 2026-10-04 (his rule: no glow on the tree): soul.js no longer creates the element
   unless asked to, and the home page never asks. Kept so the switch stays one line. */
.tree__aura { opacity: 0; transition: opacity 0.8s ease;
  background:
    radial-gradient(ellipse var(--ar, 300px) calc(var(--ar, 300px) * 0.72) at var(--ax, 50%) var(--ay, 40%), rgba(206, 112, 255, 0.17), rgba(206, 112, 255, 0) 70%),
    radial-gradient(ellipse calc(var(--ar, 300px) * 1.25) calc(var(--ar, 300px) * 0.15) at var(--ax, 50%) var(--gy, 70%), rgba(255, 118, 214, 0.2), rgba(255, 118, 214, 0) 70%); }
.tree__soul { mix-blend-mode: screen; }
body[data-i3="off"] .tree__soul, body[data-i3="off"] .tree__aura { display: none; }

/* ═══ the launch site (2026-10-04): one bar, a phone menu, the inner pages, the foot ═══ */
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 30; background: #eaf0f6; color: #0a0d13; padding: 8px 14px; border-radius: 8px; }
.skip:focus { left: 12px; }
.nav__links a[aria-current] { color: var(--ink); }
.menu { display: none; position: relative; margin-left: auto; }
.menu__btn { display: inline-flex; align-items: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(8, 10, 22, 0.6); color: #dbe3ec; font: 500 15px/1 var(--sans); cursor: pointer; }
.menu__btn::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.menu__btn[aria-expanded="true"]::after { transform: translateY(1px) rotate(225deg); }
.menu__btn:hover { color: var(--ink); border-color: rgba(255, 255, 255, 0.4); }
.menu__panel { position: absolute; right: 0; top: 54px; min-width: 220px; padding: 8px; border-radius: 16px; background: rgba(8, 10, 18, 0.98); border: 1px solid rgba(255, 255, 255, 0.14); }
.menu__panel[hidden] { display: none; }
.menu__panel a { display: flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 10px; color: #dbe3ec; text-decoration: none; font-size: 16px; }
.menu__panel a:hover { background: rgba(255, 255, 255, 0.06); }
.menu__panel a[aria-current] { color: var(--ink); background: rgba(255, 255, 255, 0.07); }
@media (max-width: 720px) { .menu { display: block; } .nav .nav__contact { display: none; } }

/* inner pages: the sky stands still at its first colours, no tree, nothing moves */
.page main { padding: 150px clamp(24px, 7vw, 110px) 12vh; }
.page__head { max-width: 46em; margin: 0 auto 64px; text-align: center; }
.page__head .lede { margin-top: 20px; }
.page__head--left { text-align: left; max-width: 46em; }
.page .prose { max-width: 40em; }
.page .prose h2 { font-size: clamp(24px, 2.2vw, 30px); margin: 54px 0 16px; }
.page .prose h2:first-child { margin-top: 0; }
.prose ul { margin: 0 0 18px; padding-left: 1.1em; } .prose li + li { margin-top: 8px; }
.prose strong, .prose b { color: var(--ink); font-weight: 600; }
.prose a, .foot a, .aside-note a { color: var(--cyan); text-decoration: none; } .prose a:hover, .foot a:hover { text-decoration: underline; }
.wide { max-width: 1180px; margin: 0 auto; }
.meta { margin-top: 22px; font-size: 13.5px; color: var(--muted); }
.meta span + span::before { content: " · "; }

/* plans: the abilities' calm cards, a price on each */
.plans { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.plans--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 760px; margin: 0 auto; }
@media (max-width: 1180px) { .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .plans, .plans--3 { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .plans--packs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .plans--packs .btn { white-space: nowrap; padding-inline: 10px; } }
.plan { display: flex; flex-direction: column; }
.plan h3 { font-size: 15.5px; font-weight: 500; color: var(--body); margin-bottom: 18px; }
.card .price { margin: 0 0 8px; font-size: 38px; line-height: 1.1; font-weight: 600; letter-spacing: -0.025em; color: var(--ink); font-variant-numeric: tabular-nums; }
.card .price small { margin-left: 4px; font-size: 15px; font-weight: 400; letter-spacing: 0; color: var(--muted); }
.plan ul { margin: 0 0 24px; padding-left: 1.05em; font-size: 15px; line-height: 1.55; }
.plan li + li { margin-top: 6px; }
.plan .btn { margin-top: auto; justify-content: center; height: 40px; font-size: 14.5px; }
.btn--ghost { background: transparent; color: var(--ink); border: 1px solid rgba(255, 255, 255, 0.28); }
.btn[aria-disabled="true"] { opacity: 0.5; cursor: default; pointer-events: none; }
.taxline { max-width: 44em; margin: 34px auto 0; text-align: center; font-size: 14.5px; color: var(--muted); }
.block { margin-top: 13vh; }
.block .plans--3 { margin-top: 34px; }

/* lists of facts */
.kv { margin: 0 0 18px; }
.kv div { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: 4px 20px; padding: 14px 0; border-top: 1px solid var(--rule); }
.kv dt { color: var(--ink); font-weight: 600; } .kv dd { margin: 0; }
@media (max-width: 620px) { .kv div { grid-template-columns: 1fr; } }

/* the legal drafts: an amber word that cannot be missed, and a chip on every clause counsel owns */
.draft { max-width: 46em; margin: 26px auto 0; padding: 14px 18px; border-radius: 14px; border: 1px solid rgba(255, 196, 120, 0.5); background: rgba(255, 196, 120, 0.08); color: #f3cf9c; font-size: 15.5px; line-height: 1.5; text-align: left; }
.draft strong { color: #ffdcab; }
.lawyer { display: inline-block; padding: 0 6px; border-radius: 6px; background: rgba(255, 196, 120, 0.14); color: #f3cf9c; font-size: 0.74em; font-weight: 600; letter-spacing: 0.04em; vertical-align: 0.1em; white-space: nowrap; }
.prose code { font-size: 0.9em; overflow-wrap: anywhere; }

.foot { flex-direction: column; justify-content: flex-start; gap: 6px; align-items: stretch; }
.foot__nav { display: flex; flex-direction: column; gap: 4px; }
.foot__links { display: flex; flex-wrap: wrap; gap: 0 22px; list-style: none; margin: 0; padding: 0; }
.foot__links a { display: inline-flex; align-items: center; min-height: 32px; color: #a3aebd; }
.foot__line { display: flex; flex-wrap: wrap; gap: 4px 24px; margin: 10px 0 0; }
@media (max-width: 720px) { .foot__links a { min-height: 44px; min-width: 44px; justify-content: center; } .foot__links { gap: 0 8px; } }
.actions--center { justify-content: center; flex-wrap: wrap; }
.page .nav { background: rgba(14, 12, 40, 0.9); border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.page .prose .eyebrow + h2 { margin-top: 0; }

/* ═══ 2026-10-04 round: still tree, pause switch, the receipt, questions ═══ */

/* The home stage rests where home.js would put it, so a page without the live tree (a phone,
   reduced motion, saved data) shows the tree in the same place, as one still picture. */
.home .stage { transform: translate3d(0, -15.5vh, 0) scale(0.74); container-type: size; }
.tree__still { display: none; position: absolute; --s: min(40cqw, 40cqh);
  left: calc(50% - 1.15 * var(--s)); top: calc(50% - 1.05 * var(--s)); width: calc(2.3 * var(--s)); height: calc(2.1 * var(--s));
  background: url("/assets/img/tree-still-1240.webp") center / contain no-repeat; }
@media (max-width: 720px) {
  .tree__still { display: block; background-image: url("/assets/img/tree-still-720.webp"); }
  .hero__copy > :nth-child(1) { animation-delay: 0.1s; } .hero__copy > :nth-child(2) { animation-delay: 0.2s; }
  .hero__copy > :nth-child(3) { animation-delay: 0.3s; } .hero__copy > :nth-child(4) { animation-delay: 0.4s; }
}
@media (min-width: 721px) and (prefers-reduced-motion: reduce) { .tree__still { display: block; } }
@media (min-width: 721px) { .tree__still { background-image: image-set(url("/assets/img/tree-still-720.webp") 1x, url("/assets/img/tree-still-1240.webp") 2x); } }
body.is-still .tree__still { display: block; }
body.is-live .tree__still { display: none; }

/* WCAG 2.2.2: anything that moves for more than five seconds can be paused. */
.motion { position: fixed; left: clamp(14px, 2vw, 24px); bottom: clamp(14px, 2vw, 24px); z-index: 12; height: 34px; padding: 0 14px;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(8, 10, 22, 0.72); color: #c8d1dc; font: 500 13.5px/1 var(--sans); cursor: pointer; }
.motion:hover { color: var(--ink); border-color: rgba(255, 255, 255, 0.4); }
.motion[hidden] { display: none; }
body[data-motion="paused"] .aurora i, body[data-motion="paused"] .mist i, body[data-motion="paused"] .accent { animation-play-state: paused; }

/* The receipt, in the app's own words: two cards, the request before it left and the turn after. */
.rc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 1040px; margin: 48px auto 0; }
@media (max-width: 860px) { .rc { grid-template-columns: 1fr; } }
.rc__pane { padding: 24px 24px 26px; border-radius: 18px; background: rgba(9, 12, 30, 0.78); border: 1px solid rgba(255, 255, 255, 0.1); font-size: 15px; line-height: 1.55; }
.rc__step { margin: 0 0 10px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--violet); }
.rc__title { margin: 0 0 12px; font-size: 19px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.rc__why, .rc__fine { margin: 0 0 14px; color: var(--body); }
.rc__fine { margin: 14px 0 0; color: var(--muted); font-size: 14px; }
.rc__label { margin: 0 0 6px; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.rc__well { margin: 0; padding: 14px 16px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); font: 13.5px/1.6 var(--mono); color: #d3dae4; overflow-wrap: anywhere; }
.rc__well mark { background: rgba(183, 170, 255, 0.16); color: var(--violet); border-radius: 4px; padding: 0 3px; }
.rc__buttons { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.rc__btn { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.24); color: #d3dae4; font-size: 13.5px; }
.rc__btn--primary { background: #eaf0f6; border-color: #eaf0f6; color: #0a0d13; font-weight: 600; }
.rc__rows { margin: 0; }
.rc__rows div { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 4px 14px; padding: 9px 0; border-top: 1px solid var(--rule); }
.rc__rows dt { color: var(--ink); font-weight: 600; font-size: 14px; }
.rc__rows dd { margin: 0; font: 13px/1.55 var(--mono); color: #c8d1dc; overflow-wrap: anywhere; }
.rc__rows .rc__attn { color: var(--cyan); }
@media (max-width: 480px) { .rc__rows div { grid-template-columns: 1fr; } }
.rc__call { margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); font: 13px/1.55 var(--mono); color: #c8d1dc; overflow-wrap: anywhere; }
.rc__call span { display: block; margin-bottom: 4px; color: var(--teal); }
.rc__undo { margin: 14px 0 0; color: var(--body); }
.rc__undo b { display: block; font-size: 12.5px; color: var(--ink); }

/* Questions: native disclosure, no script. */
.qa { border-top: 1px solid var(--rule); padding: 4px 0; }
.qa:last-of-type { border-bottom: 1px solid var(--rule); }
.qa summary { cursor: pointer; list-style: none; padding: 14px 28px 14px 0; position: relative; color: var(--ink); font-weight: 600; font-size: 17.5px; line-height: 1.4; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; position: absolute; right: 2px; top: 12px; font-weight: 400; font-size: 22px; color: var(--muted); }
.qa[open] summary::after { content: "–"; }
.qa p { margin: 0 0 14px; font-size: 16.5px; }
.qa .limit { margin-top: 6px; }
.more { margin-top: 26px; font-size: 16px; }
.more a { color: var(--cyan); text-decoration: none; } .more a:hover { text-decoration: underline; }

/* the published legal texts (carried from the app): lists, tables, quotes, code blocks, a wider measure for tables */
.prose ol { margin: 0 0 18px; padding-left: 1.4em; }
.prose li > ul, .prose li > ol { margin: 8px 0 0; }
.page .prose h3 { font-size: 20px; margin: 34px 0 10px; color: var(--ink); font-weight: 600; line-height: 1.3; }
.page .prose h4 { font-size: 17px; margin: 24px 0 8px; color: var(--ink); font-weight: 600; }
.prose hr { border: 0; border-top: 1px solid var(--rule); margin: 40px 0 24px; }
.prose blockquote { margin: 0 0 18px; padding-left: 16px; border-left: 1px solid var(--rule); color: var(--muted); }
.prose blockquote p:last-child { margin-bottom: 0; }
.prose pre { margin: 0 0 18px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--rule); background: rgba(255, 255, 255, 0.04); overflow-x: auto; font-size: 14.5px; line-height: 1.55; }
.prose pre code { font-size: inherit; overflow-wrap: normal; white-space: pre; }
.page .prose.prose--legal { max-width: 44em; }
.tablewrap { margin: 0 0 22px; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--rule); border-radius: 12px; }
.prose table { width: 100%; min-width: 40em; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.prose th, .prose td { padding: 10px 14px; text-align: left; vertical-align: top; border-top: 1px solid var(--rule); }
.prose thead th { border-top: 0; color: var(--ink); font-weight: 600; font-size: 13px; letter-spacing: 0.04em; }
.prose td code { font-size: 0.82em; }

/* the download page's three steps */
.steps { list-style: none; counter-reset: step; margin: 0 0 8px; padding: 0; display: grid; gap: 12px; }
.steps li { counter-increment: step; position: relative; margin: 0; padding: 16px 18px 16px 64px; border-radius: 16px; background: rgba(9, 12, 30, 0.6); border: 1px solid rgba(255, 255, 255, 0.1); }
.steps li + li { margin-top: 0; }
.steps li::before { content: counter(step); position: absolute; left: 18px; top: 15px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.3); display: grid; place-items: center; font-weight: 600; font-size: 15px; color: var(--ink); }
.packnote { margin: 0; font-size: 14.5px; color: var(--muted); }

/* ═══ 2026-10-09 pass: links you can tell from text, reduced motion, big enough targets on a phone, print ═══ */
/* A link in running text is underlined, not only coloured: the cyan is too close to the body grey to carry it alone (WCAG 1.4.1). */
.prose a, .aside-note a, .more a, .taxline a, .meta a, .copy p:not(.actions) a { color: var(--cyan); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose a:hover, .aside-note a:hover, .more a:hover, .taxline a:hover, .copy p:not(.actions) a:hover { text-decoration-thickness: 2px; }
.foot a:hover { text-decoration: underline; }
.page__head .note, .actions .note { max-width: 24em; }

/* Reduced motion: nothing moves, nothing fades, nothing glides. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Phone: every button and bare link is at least 44 px tall. */
@media (max-width: 720px) {
  .actions .link, .more a { display: inline-flex; align-items: center; min-height: 44px; }
  .motion { height: 44px; padding: 0 18px; }
  .plan .btn { height: 44px; }
  .qa summary { min-height: 44px; }
}

/* Print: the legal pages on white paper, in black, with no sky and no bars. */
@media print {
  .nav, .skip, .menu, .motion, .sky, .grain, .aurora, .mist, .stage, .seeds, .foot__nav, .actions, .btn { display: none !important; }
  html, body { background: #fff !important; color: #000 !important; }
  body { font-size: 11pt; line-height: 1.5; overflow: visible; }
  main, .page main { position: static; padding: 0 !important; }
  h1, h2, h3, h4, .eyebrow, strong, b, .prose, .prose p, .prose li, .prose dd, .prose dt, .prose td, .prose th, .lede, .note, .meta, .limit, .limit span,
  .foot, .foot a, .foot__line { color: #000 !important; text-shadow: none !important; }
  a, .prose a { color: #000 !important; text-decoration: underline !important; }
  .page__head { margin: 0 0 18pt; text-align: left; max-width: none; }
  .page .prose, .page .prose.prose--legal, .wide { max-width: none; }
  h1 { font-size: 22pt; } h2 { font-size: 15pt; margin-top: 18pt; } h3 { font-size: 12.5pt; }
  h1, h2, h3, h4 { break-after: avoid; }
  .card, .qa, .tablewrap, .kv div, .prose pre, blockquote { break-inside: avoid; border-color: #888 !important; background: none !important; }
  .tablewrap { overflow: visible; } .prose table { min-width: 0; }
  .prose th, .prose td { border-color: #888 !important; }
  .prose pre, .prose code { background: none !important; color: #000 !important; }
  .foot { padding: 12pt 0 0; border-top: 1px solid #888; }
}

/* 2026-10-09 — three real screenshots on the home page */
.shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 52px; }
@media (max-width: 1100px) { .shots { grid-template-columns: 1fr; max-width: 760px; margin-left: auto; margin-right: auto; } }
.shot { margin: 0; }
.shot img { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid rgba(255,255,255,0.10); box-shadow: 0 18px 50px rgba(0,0,0,0.45); }
.shot figcaption { margin-top: 12px; font-size: 15px; line-height: 1.5; color: var(--muted, rgba(255,255,255,0.72)); text-align: center; }