/* IIEON brand website. Tokens follow the brand kit (03 Colour/palette.css) and the web type
   scale (04 Typography/type-scale.md): Fraunces 500 for headlines, DM Sans for UI and body,
   Newsreader for journal text and quotes. One Turmeric signal per screen; text on Turmeric is
   always Navy-Plum. */

/* Fonts are self-hosted Latin subsets (OFL, licences in assets/fonts) and the two UI faces are
   preloaded, so text does not shift when they arrive. */
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/assets/fonts/dm-sans-normal-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("/assets/fonts/fraunces-normal-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/newsreader-normal-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --bg: #FAF9FC;
  --surface: #FFFFFF;
  --surface-alt: #F1EFF7;
  --border: #D9D4E8;
  --ink: #2E2A4A;
  --ink-soft: #5F5B7A;
  --turmeric: #EBC75C;
  --turmeric-pressed: #D9A93E;
  --on-turmeric: #2E2A4A;
  --link: #85650F;
  --bubble-user: #FCF1C9;
  --focus: #85650F;
  --dark-surface: #332C42;
  --mark: #D9A93E;
  --wash: color-mix(in srgb, #F1EFF7 78%, transparent);
  --sky-ring: #D9D4E8;
  --sky-dot: #EBC75C;
  --breath: 12s;
  --breath-delay: 0s;
  --serif: "Fraunces", Georgia, serif;
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --journal: "Newsreader", Georgia, serif;
  --ease: cubic-bezier(0.37, 0, 0.63, 1);
  --radius: 24px;
  color-scheme: light;
}
.dark {
  --bg: #26212F;
  --surface: #332C42;
  --surface-alt: #3E3650;
  --border: #4A4260;
  --ink: #F3F1F8;
  --ink-soft: #BDB8D0;
  --turmeric-pressed: #F2D57C;
  --link: #F2D57C;
  --bubble-user: #453B2C;
  --focus: #F2D57C;
  --mark: #EBC75C;
  --wash: color-mix(in srgb, #3E3650 70%, transparent);
  --sky-ring: #4A4260;
  --sky-dot: #EBC75C;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html { background: var(--bg); }
body { min-height: 100vh; background: transparent; color: var(--ink); font-family: var(--sans); font-size: 18px; line-height: 28px; font-optical-sizing: auto; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p a, .prose li a, .three-lines a, .inline-link { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
h1, h2 { font-family: var(--serif); font-weight: 500; font-variation-settings: "SOFT" 100, "WONK" 0; }
h1 { font-size: 56px; line-height: 64px; letter-spacing: -0.01em; }
h2 { font-size: 40px; line-height: 48px; }
h3 { font-size: 22px; line-height: 30px; font-weight: 600; }
ul { padding: 0; list-style: none; }
.symbol-library { display: none; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 50; padding: 12px 18px; background: var(--surface); border-radius: 12px; }
.skip-link:focus { top: 16px; }
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wrap { width: min(1160px, calc(100% - 64px)); margin-inline: auto; }
.narrow { width: min(760px, calc(100% - 40px)); }
.section { padding-block: 96px; }
.eyebrow, .status-tag { font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: 0.08em; color: var(--ink-soft); }
.lead, .section-lead { font-size: 22px; line-height: 34px; color: var(--ink-soft); max-width: 34em; }
.section-lead { margin-top: 14px; }
.small-note { font-size: 15px; line-height: 22px; color: var(--ink-soft); margin-top: 14px; }
.section-heading { max-width: 720px; margin-bottom: 40px; }
.section-heading h2 { margin-top: 10px; }
.centred { justify-content: center; }

/* Buttons: one Turmeric primary per screen; the rest are quiet. */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 24px; border-radius: 999px; background: var(--turmeric); color: var(--on-turmeric); font-size: 16px; line-height: 20px; font-weight: 500; letter-spacing: 0.01em; transition: background-color .2s var(--ease); }
.button:hover { background: var(--turmeric-pressed); }
.button-small { min-height: 44px; padding: 10px 18px; font-size: 15px; }
.button-quiet { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--border); }
.button-quiet:hover { background: var(--surface-alt); }
.text-link, .text-button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 16px; font-weight: 500; color: var(--link); }
.text-link:hover, .text-button:hover { text-decoration: underline; text-underline-offset: 4px; }
.text-link .icon { width: 18px; height: 18px; }
.icon-button { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; }
.icon-button:hover { background: var(--surface-alt); }
.status-tag { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--surface-alt); }

/* Header and colour band */
.colour-band { height: 4px; opacity: 0; transition: opacity .6s cubic-bezier(0.37, 0, 0.63, 1); }
.colour-band.is-on { opacity: 1; }
.colour-band svg { width: 100%; height: 4px; }
/* Solid, not frosted: a backdrop blur under a sticky header makes Safari repaint while scrolling. */
.site-header { position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.header-inner { display: flex; align-items: center; gap: 32px; min-height: 76px; }
.brand { display: inline-flex; align-items: center; flex: none; }
.lockup { width: 112px; height: auto; }
.lockup-dark, .dark .lockup-light { display: none; }
.dark .lockup-dark { display: block; }
.site-nav ul { display: flex; gap: 6px; }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 999px; font-size: 16px; color: var(--ink-soft); }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); background: var(--surface-alt); }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.theme-toggle .sun, .dark .theme-toggle .moon { display: none; }
.dark .theme-toggle .sun { display: block; }
.menu-toggle .shut, .menu-open .menu-toggle .open { display: none; }
.menu-open .menu-toggle .shut { display: block; }
.menu-toggle[hidden], .theme-toggle[hidden] { display: none; }
@media (min-width: 900px) { .menu-toggle { display: none; } }
@media (max-width: 899px) {
  .js .site-nav { position: absolute; inset: 100% 0 auto; display: none; background: var(--bg); border-bottom: 1px solid var(--border); padding: 12px 20px 20px; }
  .js.menu-open .site-nav { display: block; }
  .js .site-nav ul { flex-direction: column; }
  .js .site-nav a { width: 100%; font-size: 18px; min-height: 48px; }
  html:not(.js) .site-nav { order: 3; width: 100%; overflow-x: auto; }
  html:not(.js) .header-inner { flex-wrap: wrap; padding-block: 8px; }
}

/* Footer */
.site-footer { margin-top: 48px; background: var(--dark-surface); color: #F3F1F8; padding-block: 64px 32px; }
.site-footer .lockup-light { display: none; }
.site-footer .lockup-dark { display: block; }
.footer-top { display: grid; grid-template-columns: minmax(200px, 1fr) 3fr; gap: 48px; }
.footer-brand p { margin-top: 12px; font-family: var(--serif); font-size: 20px; }
.footer-social { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 8px; color: #BDB8D0; font-size: 15px; }
.footer-columns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.footer-columns h2 { font-family: var(--sans); font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: #BDB8D0; }
.footer-columns ul { margin-top: 10px; }
.footer-columns a { display: inline-flex; align-items: center; min-height: 40px; font-size: 15px; color: #F3F1F8; }
.footer-columns a:hover, .footer-social:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom { display: flex; justify-content: space-between; gap: 24px; margin-top: 48px; padding-top: 24px; border-top: 1px solid #4A4260; font-size: 14px; line-height: 20px; color: #BDB8D0; }
.footer-bottom a { color: #F2D57C; }
.site-footer :focus-visible { outline-color: #F2D57C; }

/* Home: breath intro */
.breath-intro { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: var(--bg); }
.breath-intro[hidden] { display: none; }
.intro-open body { overflow: hidden; }
.breath-intro-inner { display: grid; justify-items: center; gap: 24px; }
.breath-rings { width: min(240px, 50vw); overflow: visible; }
.breath-rings .ring { fill: none; stroke: var(--mark); transform-box: fill-box; transform-origin: center; }
.ring-outer { stroke-width: 39; opacity: .3; }
.ring-middle { stroke-width: 51; opacity: .55; }
.ring-inner { stroke-width: 59; }
.ring-dot { fill: var(--mark); }
.breath-cue { font-family: var(--serif); font-size: 28px; line-height: 36px; }

/* Home: hero */
.hero { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 64px; padding-block: 72px 96px; }
.hero h1 { margin-top: 14px; max-width: 11em; }
.hero .lead { margin-top: 20px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 32px; }
.phone { justify-self: center; width: min(340px, 100%); padding: 14px; border-radius: 44px; background: var(--surface); box-shadow: 0 0 0 1px var(--border), 0 30px 60px -30px rgba(46, 42, 74, .35); }
.phone-screen { display: grid; gap: 14px; padding: 36px 22px 28px; border-radius: 32px; background: var(--bg); }
.phone-mark { width: 48px; height: 48px; color: var(--mark); }
.phone-title { font-family: var(--serif); font-size: 26px; line-height: 32px; }
.phone-sub { font-size: 14px; line-height: 20px; color: var(--ink-soft); margin-top: -8px; }
.phone-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.phone-chips span, .phone-actions span { padding: 8px 14px; border-radius: 999px; background: var(--surface-alt); font-size: 14px; line-height: 20px; }
.phone-chips .is-picked { background: var(--ink); color: var(--bg); }
.phone-bubble { padding: 14px 16px; border-radius: 18px 18px 18px 6px; background: var(--surface); box-shadow: 0 0 0 1px var(--border); font-size: 15px; line-height: 22px; }
.phone-actions { display: flex; gap: 8px; }
.phone-actions span:first-child { background: var(--ink); color: var(--bg); }

/* Home: check-in */
.checkin { background: var(--wash); }
.mood-chips { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.mood-chip { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 20px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--border); font-size: 17px; font-weight: 500; }
.mood-chip:hover { box-shadow: inset 0 0 0 1.5px var(--ink-soft); }
.mood-chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); box-shadow: none; }
.mood-dot { width: 12px; height: 12px; border-radius: 50%; }
.mood-dot.calm { background: #8FB5A8; }
.mood-dot.okay { background: #CFCBDD; }
.mood-dot.tired { background: #A8A39B; }
.mood-dot.anxious { background: #A99BC4; }
.mood-dot.sad { background: #7F9BB8; }
.eon-reply { margin-top: 28px; padding: 24px; border-radius: var(--radius); background: var(--surface); }
.eon-reply[hidden] { display: none; }
.eon-label { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; color: var(--ink-soft); }
.eon-label .icon { width: 18px; height: 18px; fill: none; stroke: none; color: var(--mark); }
.eon-text { margin-block: 10px 18px; font-size: 20px; line-height: 30px; }

/* Home: features */
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 24px; }
.feature { padding: 28px; border-radius: var(--radius); background: var(--surface); box-shadow: 0 0 0 1px var(--border); }
.feature h3 { margin-top: 18px; }
.feature p { margin-top: 8px; font-size: 16px; line-height: 26px; color: var(--ink-soft); }
.feature-icon { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; background: var(--surface-alt); }

/* Home: let it go */
.let-go-form { position: relative; display: grid; gap: 14px; margin-top: 28px; }
.let-go-form textarea { width: 100%; min-height: 120px; padding: 18px 20px; border-radius: 20px; border: 1.5px solid var(--border); background: var(--surface); color: var(--ink); font-family: var(--journal); font-size: 20px; line-height: 30px; resize: vertical; }
.let-go-form textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.let-go-stage { position: absolute; inset: 0 0 auto; padding: 20px 22px; font-family: var(--journal); font-size: 20px; line-height: 30px; pointer-events: none; }
.let-go-stage span { display: inline-block; }
.let-go-form .button { justify-self: start; }

/* Home: Meet Eon */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.split h2 { margin-top: 10px; }
.chat-demo { display: grid; gap: 12px; padding: 28px; border-radius: 32px; background: var(--surface-alt); }
.bubble { max-width: 86%; padding: 12px 16px; font-size: 16px; line-height: 24px; }
.bubble.user { justify-self: end; border-radius: 18px 18px 6px 18px; background: var(--bubble-user); }
.bubble.eon { border-radius: 18px 18px 18px 6px; background: var(--surface); }
.bubble.is-waiting { visibility: hidden; }

/* Home: teasers, founder, privacy, closing */
.teaser-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.teaser { display: grid; align-content: start; justify-items: start; gap: 12px; padding: 36px; border-radius: 28px; background: var(--surface); box-shadow: 0 0 0 1px var(--border); }
.teaser h2 { font-size: 32px; line-height: 40px; }
.teaser p:not(.status-tag) { color: var(--ink-soft); }
.founder-portrait { width: 100%; max-width: 420px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 28px; }
.privacy-strip .narrow { display: grid; justify-items: start; gap: 14px; }
.privacy-icon { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 18px; background: var(--surface-alt); }
.three-lines { display: grid; gap: 10px; }
.three-lines li { padding-left: 28px; position: relative; color: var(--ink-soft); }
.three-lines li::before { content: ""; position: absolute; left: 4px; top: 11px; width: 8px; height: 8px; border-radius: 50%; background: var(--border); }
.closing { text-align: center; }
.closing .narrow { display: grid; justify-items: center; }
.closing .section-lead { margin-inline: auto; }
.closing-mark { width: 64px; height: 64px; color: var(--mark); margin-bottom: 18px; }

/* Inner pages */
.page-hero { padding-block: 72px 48px; }
.page-hero h1 { margin-top: 12px; max-width: 14em; }
.page-hero .lead { margin-top: 18px; }
.page-hero .hero-actions { margin-top: 28px; }
.page-hero .status-tag { margin-bottom: 4px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.card { padding: 28px; border-radius: var(--radius); background: var(--surface); box-shadow: 0 0 0 1px var(--border); }
.card h3 { margin-top: 14px; }
.card h3:first-child { margin-top: 0; }
.card p, .card li { margin-top: 8px; font-size: 16px; line-height: 26px; color: var(--ink-soft); }
.card .feature-icon { margin-bottom: 4px; }
.prose { max-width: 68ch; }
.prose p + p, .prose p + ul, .prose ul + p { margin-top: 16px; }
.prose h2 { margin-top: 56px; }
.prose h3 { margin-top: 32px; }
.prose ul { display: grid; gap: 8px; margin-top: 12px; }
.prose ul li { padding-left: 24px; position: relative; }
.prose ul li::before { content: ""; position: absolute; left: 4px; top: 11px; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-soft); }
.band { background: var(--wash); }
.say-it { font-family: var(--serif); font-size: 32px; line-height: 40px; }
.say-it span { color: var(--ink-soft); font-family: var(--sans); font-size: 18px; }
.compare { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 24px; }
.compare th, .compare td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--border); }
.compare thead th { font-size: 13px; letter-spacing: 0.08em; color: var(--ink-soft); font-weight: 500; }
.compare td:not(:first-child), .compare th:not(:first-child) { text-align: center; width: 22%; }
.table-scroll { overflow-x: auto; border-radius: var(--radius); background: var(--surface); box-shadow: 0 0 0 1px var(--border); }
.milestones { display: grid; gap: 0; border-left: 2px solid var(--border); margin-left: 8px; }
.milestone { position: relative; padding: 0 0 32px 28px; }
.milestone::before { content: ""; position: absolute; left: -9px; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 3px var(--border); }
.milestone.is-done::before { box-shadow: inset 0 0 0 3px var(--ink-soft); background: var(--ink-soft); }
.milestone.is-now::before { background: var(--turmeric); box-shadow: none; }
.milestone h3 { font-size: 20px; line-height: 28px; }
.milestone p { color: var(--ink-soft); font-size: 16px; }
.helplines { display: grid; gap: 16px; }
.helpline { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 24px 28px; border-radius: var(--radius); background: var(--surface); box-shadow: 0 0 0 1px var(--border); }
.helpline h3 { font-size: 20px; }
.helpline p { font-size: 16px; color: var(--ink-soft); }
.helpline .button { min-width: 160px; }
.contact-list { display: grid; gap: 16px; }
.contact-list .card a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.press-files { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.press-file { display: grid; gap: 12px; padding: 20px; border-radius: 20px; background: var(--surface); box-shadow: 0 0 0 1px var(--border); }
.press-file img { height: 72px; width: auto; max-width: 100%; object-fit: contain; justify-self: start; }
.press-file.on-dark { background: var(--dark-surface); color: #F3F1F8; }
.press-file.on-dark .text-link { color: #F2D57C; }
.press-file .links { display: flex; gap: 16px; }
.quote-card { padding: 32px; border-radius: 28px; background: var(--surface); box-shadow: 0 0 0 1px var(--border); font-family: var(--journal); font-size: 22px; line-height: 34px; }

/* Founder letter: laid out like a journal page */
.letter { position: relative; max-width: 720px; padding: 56px 48px; border-radius: 6px 28px 28px 6px; background: var(--surface); box-shadow: 0 0 0 1px var(--border), 0 24px 48px -32px rgba(46, 42, 74, .4); background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 35px, var(--surface-alt) 35px, var(--surface-alt) 36px); font-family: var(--journal); font-size: 21px; line-height: 36px; }
.letter p + p { margin-top: 36px; }
.letter .signature { margin-top: 36px; width: 220px; }
.dark .letter .signature { filter: invert(1) hue-rotate(180deg); }

/* Colour of the month. The card always uses the brand Base and Navy-Plum, in both themes, so
   the ring always sits on the background the admin preview shows, and the month's colour is only
   ever a stroke or fill in the SVG. */
.colour-month { --colour-bg: #FAF9FC; --colour-ink: #2E2A4A; --colour-ink-soft: #5F5B7A; --colour-border: #D9D4E8; --colour-link: #85650F; padding-block: 72px 30px; }
.colour-month[hidden] { display: none; }
.colour-card { display: grid; grid-template-columns: minmax(0, 220px) 1fr; align-items: center; gap: 48px; padding: 36px 42px; border-radius: 26px; border: 1px solid var(--colour-border); background: var(--colour-bg); color: var(--colour-ink); }
.colour-ring { display: block; width: 100%; max-width: 220px; aspect-ratio: 1; margin-inline: auto; overflow: visible; }
.colour-ring circle { transform-box: fill-box; transform-origin: center; }
.colour-eyebrow, .colour-practice-label { font-size: 12px; font-weight: 500; letter-spacing: 0.08em; line-height: 1.8; color: var(--colour-ink-soft); }
.colour-copy h2 { font-size: clamp(30px, 3.2vw, 40px); line-height: 1.2; margin-top: 8px; overflow-wrap: anywhere; }
.colour-meaning { font-size: 18px; margin-top: 8px; }
.colour-practice-label { margin-top: 22px; }
.colour-practice { font-family: var(--journal); font-size: 18px; color: var(--colour-ink-soft); margin-top: 4px; max-width: 560px; }
.colour-links { display: flex; flex-wrap: wrap; gap: 4px 28px; margin-top: 14px; }
.colour-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; font-weight: 500; color: var(--colour-link); }
.colour-link[hidden] { display: none; }
.colour-link .icon { width: 17px; height: 17px; }
.colour-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.colour-card a:focus-visible { outline-color: var(--colour-link); }

/* Download page */
.download { padding-block: 64px 32px; display: grid; gap: 24px; max-width: 760px; }
.download-lead { font-size: 20px; line-height: 30px; color: var(--ink-soft); margin-top: 14px; }
.download-card { padding: 32px; border-radius: var(--radius); background: var(--surface); box-shadow: 0 0 0 1px var(--border); }
.download-status { color: var(--ink-soft); }
.download-status .button { margin-top: 12px; }
[data-state][hidden] { display: none; }
.release-facts { display: flex; flex-wrap: wrap; gap: 12px 40px; margin-bottom: 24px; }
.release-facts dt { font-size: 13px; letter-spacing: 0.08em; color: var(--ink-soft); }
.release-facts dd { margin: 0; font-weight: 500; }
.release-notes, .checksum { margin-top: 28px; }
.release-notes h3, .checksum h3 { font-size: 18px; }
.release-notes ul { list-style: disc; padding-left: 22px; }
.checksum p { font-size: 15px; color: var(--ink-soft); }
.checksum code { display: block; margin-top: 10px; padding: 12px; border-radius: 12px; background: var(--surface-alt); font-size: 13px; line-height: 20px; overflow-wrap: anywhere; }
.download-help { display: flex; gap: 18px; padding: 24px 28px; border-radius: var(--radius); background: var(--surface-alt); }
.download-help h2 { font-size: 22px; line-height: 30px; }
.download-help p { font-size: 16px; color: var(--ink-soft); }

@media (max-width: 1100px) {
  .feature-grid { grid-template-columns: 1fr 1fr; }
  .footer-top { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
  body { font-size: 16px; line-height: 26px; }
  h1 { font-size: 36px; line-height: 44px; }
  h2 { font-size: 28px; line-height: 36px; }
  h3 { font-size: 20px; line-height: 28px; }
  .lead, .section-lead { font-size: 18px; line-height: 28px; }
  .wrap { width: calc(100% - 40px); }
  .section { padding-block: 64px; }
  .hero, .split, .teaser-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero { padding-block: 40px 64px; }
  .feature-grid { grid-template-columns: 1fr; }
  .footer-columns { grid-template-columns: 1fr 1fr; }
  .footer-bottom { flex-direction: column; }
  .teaser { padding: 28px; }
  .teaser h2, .say-it { font-size: 26px; line-height: 34px; }
  .colour-card { grid-template-columns: 1fr; gap: 24px; padding: 28px 24px; }
  .colour-ring { max-width: 160px; }
  .letter { padding: 36px 24px; font-size: 19px; }
  .page-hero { padding-block: 48px 32px; }
  .header-inner { gap: 12px; min-height: 64px; }
  .lockup { width: 96px; }
}
@media (max-width: 380px) {
  .header-actions .button-small { padding-inline: 14px; font-size: 14px; }
  .mood-chip { padding-inline: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

/* Questions */
.faqs { display: grid; gap: 12px; margin-top: 28px; }
.faqs details { border-radius: 20px; background: var(--surface); box-shadow: 0 0 0 1px var(--border); }
.faqs summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 14px 22px; font-weight: 500; cursor: pointer; list-style: none; }
.faqs summary::-webkit-details-marker { display: none; }
.faqs summary::after { content: "+"; font-size: 22px; color: var(--ink-soft); }
.faqs details[open] summary::after { content: "−"; }
.faqs details p { padding: 0 22px 20px; font-size: 16px; line-height: 26px; color: var(--ink-soft); }
.static-mark { width: min(220px, 60%); justify-self: center; }
.journal-line { font-family: var(--journal); font-size: 17px; border-radius: 18px; background: var(--bubble-user); box-shadow: none; }
ol.milestones { list-style: none; padding: 0; }
.prose .eyebrow + h2, .prose h2:first-child, .prose .privacy-icon + h2 { margin-top: 10px; }
.helplines { margin-top: 24px; }
.prose h2 + p, .narrow > h2 + .table-scroll { margin-top: 14px; }
.narrow > h2 + .table-scroll, .section-lead + .table-scroll { margin-top: 24px; }
.site-footer { margin-top: 0; }
.footer-columns a { min-height: 44px; }
.cards-five { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) { .cards-five { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
@media (min-width: 900px) { .nav-help { display: none; } }
.steps .milestone::before { background: var(--bg); box-shadow: inset 0 0 0 3px var(--ink-soft); }
.phone-chips span, .phone-actions span { padding: 7px 12px; font-size: 13px; }
.section-lead + .hero-actions, .table-scroll + .prose, .narrow > h2 + .section-lead { margin-top: 16px; }
.narrow > h2 + .prose, .narrow > .prose + .hero-actions { margin-top: 16px; }
.breath-intro .text-button { padding: 0 20px; border-radius: 999px; }
.breath-actions { display: flex; align-items: center; gap: 12px; min-height: 48px; }
/* The loader is in every page and shows from the first paint while html has .is-loading (set in
   the head by main.js). It never takes clicks, and a CSS fallback fades it out even if a script
   never runs, so it can never trap the page. */
.pulse-loader { display: none; position: fixed; inset: 0; z-index: 45; place-items: center; background: var(--bg); pointer-events: none; }
.is-loading .pulse-loader { display: grid; animation: loader-fallback .3s cubic-bezier(0.37, 0, 0.63, 1) 3s forwards; }
@keyframes loader-fallback { to { opacity: 0; } }
/* Below-the-fold content waiting for its reveal. Never applied to anything already on screen. */
.reveal-wait { opacity: 0; }
/* Only the eyebrow changes with the hour; it fades in once set instead of switching text. */
.js [data-greeting] { opacity: 0; transition: opacity .4s cubic-bezier(0.37, 0, 0.63, 1); animation: greeting-fallback 0s 1.5s forwards; }
.js [data-greeting].is-set { opacity: 1; animation: none; }
@keyframes greeting-fallback { to { opacity: 1; } }
.pulse-rings { width: min(120px, 30vw); }
/* The mark starts as nothing and grows from its dot, so the first frame is never the finished mark. */
.pulse-rings .ring { opacity: 0; }
.pulse-rings .ring-dot { transform: scale(0); }
.pulse-rings .ring, .pulse-rings .ring-dot { transform-box: fill-box; transform-origin: center; }
.breath-open .icon { width: 22px; height: 22px; color: var(--mark); }


/* The site breathes. One rhythm everywhere, the brand breath: in for 4 s, hold for 2 s, out for
   6 s (12 s), sine in-out. Rules from the Round Robin phone assessment (2 Oct 2026): only
   transform and opacity animate; nothing that moves has a filter or mask; the sky is one fixed
   layer painted once, not a background per section; no script runs per frame or on scroll.
   main.js sets --breath-delay from the clock so every page breathes in step, and pauses loops
   while the tab is hidden. Reduced motion stills everything. */
@keyframes breathe {
  0% { transform: scale(1); opacity: .72; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  33.333% { transform: scale(1.06); opacity: 1; }
  50% { transform: scale(1.06); opacity: 1; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  100% { transform: scale(1); opacity: .72; }
}
@keyframes breathe-soft {
  0% { opacity: .55; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  33.333% { opacity: 1; }
  50% { opacity: 1; animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  100% { opacity: .55; }
}
@keyframes breathe-icon {
  0% { transform: scale(1); animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  33.333% { transform: scale(1.12); }
  50% { transform: scale(1.12); animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  100% { transform: scale(1); }
}
.sky { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; contain: strict; view-transition-name: sky; }
.sky-rings { position: absolute; will-change: transform, opacity; animation: breathe var(--breath) var(--breath-delay) infinite; }
.sky-rings-a { width: max(900px, 90vmax); right: calc(max(900px, 90vmax) * -0.38); top: calc(max(900px, 90vmax) * -0.42); }
.sky-rings-b { width: max(640px, 60vmax); left: calc(max(640px, 60vmax) * -0.45); bottom: calc(max(640px, 60vmax) * -0.5); animation-delay: calc(var(--breath-delay) - 0.24s); }
.sky-ring { fill: none; stroke: var(--sky-ring); }
.sky-ring.outer { stroke-width: 26; opacity: .28; }
.sky-ring.middle { stroke-width: 34; opacity: .42; }
.sky-ring.inner { stroke-width: 40; opacity: .6; }
.sky-dot { fill: var(--sky-dot); opacity: .12; }
.dark .sky-dot { opacity: .07; }
.colour-band svg { animation: breathe-soft var(--breath) var(--breath-delay) infinite; }
.breath-open .icon { animation: breathe-icon var(--breath) var(--breath-delay) infinite; transform-origin: center; }
html.is-hidden .sky-rings, html.is-hidden .colour-band svg, html.is-hidden .breath-open .icon { animation-play-state: paused; }

/* Press and hover: a small inhale, transform only. */
.button, .mood-chip, .icon-button { transition: transform .24s cubic-bezier(0.37, 0, 0.63, 1), background-color .2s cubic-bezier(0.37, 0, 0.63, 1); }
.button:hover, .mood-chip:hover { transform: scale(1.02); }
.button:active, .mood-chip:active, .icon-button:active { transform: scale(.97); }

/* Moving between pages: the page exhales out and the next breathes in; the sky carries on. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: .32s cubic-bezier(0.37, 0, 0.63, 1) both page-out; }
::view-transition-new(root) { animation: .48s cubic-bezier(0.37, 0, 0.63, 1) both page-in; }
::view-transition-group(sky) { animation: none; }
::view-transition-old(sky) { display: none; }
::view-transition-new(sky) { animation: none; }
@keyframes page-out { to { opacity: 0; transform: scale(.992); } }
@keyframes page-in { from { opacity: 0; transform: scale(1.008); } }

@media (prefers-reduced-motion: reduce) {
  .sky-rings, .colour-band svg, .breath-open .icon { animation: none; }
  .button:hover, .mood-chip:hover, .button:active, .mood-chip:active, .icon-button:active { transform: none; }
  @view-transition { navigation: none; }
}