/* Kura Notes landing page (kuranotes.app), round 8: Clinical Pastel.
 * Pastels are fills and tints only; every piece of text sits on them in the deep tone of the same hue (4.5:1 or more,
 * light and dark). One accent (periwinkle) for actions; each section keeps one pastel of its own for its eyebrow and
 * icons. Cards only where something is a separate object; a shadow only on the one lifted object of a section.
 * Shipped as a file so the page's policy needs no 'unsafe-inline'. No style attributes anywhere in the markup.
 * Built from home-r8/home-2.src.css by home-r8/mkcss.py (each @dark rule is emitted for both dark triggers). */

@font-face { font-family: "Figtree"; src: url("/fonts/figtree-v9-latin.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("/fonts/atkinson-next-v7-latin.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Mono"; src: url("/fonts/atkinson-mono-v8-latin.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }

@property --wipe { syntax: "<percentage>"; inherits: false; initial-value: 130%; }

/* ---------------------------------------------------------------- tokens */
:root {
  color-scheme: light;
  --r8-ground: #F6F8FC; --r8-surface: #FFFFFF; --r8-sunken: #EEF2F9; --r8-line: #DDE3EE; --r8-line-strong: #C6D0E0;
  --r8-ink: #172033; --r8-ink-2: #475569; --r8-ink-3: #64748B;           /* ink-3 only on the white surface (4.76:1) */
  --r8-primary: #3F5FD1; --r8-primary-hover: #3350BA; --r8-on-primary: #FFFFFF;
  --r8-primary-tint: #E3EAFD; --r8-primary-soft: #C9D6FA; --r8-primary-ink: #3350BA;
  --r8-mint: #CDEFE3; --r8-mint-ink: #17694F;
  --r8-lav: #E6E0FB; --r8-lav-ink: #5B45B0;
  --r8-peach: #FDE6D6; --r8-peach-ink: #9A4A1F;
  --r8-rose: #FADBE2; --r8-rose-ink: #A3223F;
  --r8-sky: #D8EEFB; --r8-sky-ink: #1D5F86;
  --r8-butter: #FBF1C7; --r8-butter-ink: #7A5B00;
  /* the proof panel is the page's one dark object, in both themes (interfere's code block) */
  --r8-code: #111A2E; --r8-code-2: #19243C; --r8-code-line: #26324D; --r8-code-ink: #E9EEF7; --r8-code-ink-2: #B3BED0;
  --r8-shadow-lift: 0 1px 2px rgba(23,32,51,.05), 0 24px 48px -22px rgba(23,32,51,.28);
  --r8-shadow-phone: 0 2px 4px rgba(23,32,51,.06), 0 40px 80px -30px rgba(33,52,120,.42);
  --r8-frost: rgba(255,255,255,.82);
  --r8-device: #172033; --r8-device-edge: #2B3650;
  --f-head: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;   /* Plus Jakarta Sans is not available offline: Figtree, the existing heading face */
  --f-body: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: "Atkinson Hyperlegible Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --gut: 16px;
  --radius: 14px;
  /* the section's own pastel (set per section below) */
  --tone: var(--r8-primary-tint); --tone-ink: var(--r8-primary-ink);
  /* the mark: one colour */
  --mk: var(--r8-primary);
}
:root[data-theme="dark"] { color-scheme: dark; --r8-ground: #0E1420; --r8-surface: #151D2E; --r8-sunken: #0A0F19; --r8-line: #243049; --r8-line-strong: #33415E; --r8-ink: #E9EEF7; --r8-ink-2: #B3BED0; --r8-ink-3: #8E9AB0; --r8-primary: #A9BCFF; --r8-primary-hover: #BFCDFF; --r8-on-primary: #0E1420; --r8-primary-tint: rgba(169,188,255,.14); --r8-primary-soft: rgba(169,188,255,.26); --r8-primary-ink: #A9BCFF; --r8-mint: rgba(205,239,227,.15); --r8-mint-ink: #9FE3C9; --r8-lav: rgba(230,224,251,.15); --r8-lav-ink: #CBBEFF; --r8-peach: rgba(253,230,214,.15); --r8-peach-ink: #FFC8A6; --r8-rose: rgba(250,219,226,.15); --r8-rose-ink: #FFB3C3; --r8-sky: rgba(216,238,251,.15); --r8-sky-ink: #A8DBFA; --r8-butter: rgba(251,241,199,.15); --r8-butter-ink: #F5DE8A; --r8-code: #0A0F19; --r8-code-2: #121A2B; --r8-code-line: #26324D; --r8-shadow-lift: 0 1px 2px rgba(0,0,0,.3), 0 24px 48px -22px rgba(0,0,0,.7); --r8-shadow-phone: 0 2px 4px rgba(0,0,0,.3), 0 40px 80px -30px rgba(0,0,0,.8); --r8-frost: rgba(21,29,46,.82); --r8-device: #05080F; --r8-device-edge: #2B3650; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; --r8-ground: #0E1420; --r8-surface: #151D2E; --r8-sunken: #0A0F19; --r8-line: #243049; --r8-line-strong: #33415E; --r8-ink: #E9EEF7; --r8-ink-2: #B3BED0; --r8-ink-3: #8E9AB0; --r8-primary: #A9BCFF; --r8-primary-hover: #BFCDFF; --r8-on-primary: #0E1420; --r8-primary-tint: rgba(169,188,255,.14); --r8-primary-soft: rgba(169,188,255,.26); --r8-primary-ink: #A9BCFF; --r8-mint: rgba(205,239,227,.15); --r8-mint-ink: #9FE3C9; --r8-lav: rgba(230,224,251,.15); --r8-lav-ink: #CBBEFF; --r8-peach: rgba(253,230,214,.15); --r8-peach-ink: #FFC8A6; --r8-rose: rgba(250,219,226,.15); --r8-rose-ink: #FFB3C3; --r8-sky: rgba(216,238,251,.15); --r8-sky-ink: #A8DBFA; --r8-butter: rgba(251,241,199,.15); --r8-butter-ink: #F5DE8A; --r8-code: #0A0F19; --r8-code-2: #121A2B; --r8-code-line: #26324D; --r8-shadow-lift: 0 1px 2px rgba(0,0,0,.3), 0 24px 48px -22px rgba(0,0,0,.7); --r8-shadow-phone: 0 2px 4px rgba(0,0,0,.3), 0 40px 80px -30px rgba(0,0,0,.8); --r8-frost: rgba(21,29,46,.82); --r8-device: #05080F; --r8-device-edge: #2B3650; }
}

/* ---- router hook (see NOTES.md) ----
   pending: nothing is drawn until the router decides. home / unknown / no attribute: this page.
   any other value: the router owns the screen; only elements it marks data-router are shown. */
html[data-route="pending"] body { visibility: hidden; }
html[data-route]:not([data-route="home"]):not([data-route="unknown"]):not([data-route="pending"]) body > :not([data-router]) { display: none !important; }
.route-banner { display: none; }
html[data-route="unknown"] .route-banner { display: block; }

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; background: var(--r8-ground); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 88px; }
html[data-text="2"] { font-size: 112.5%; }
html[data-text="3"] { font-size: 125%; }
/* No smooth scrolling on this page: the demo's tour scrolls what it taps into view, the browser carries that up into
   this page, and home-2.js holds the page still only when that arrives as one jump (see demo() in home-2.js). */
body { margin: 0; background: var(--r8-ground); color: var(--r8-ink); font-family: var(--f-body); font-size: 1.0625rem; line-height: 1.6; overflow-x: clip; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: var(--r8-primary-ink); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3 { font-family: var(--f-head); color: var(--r8-ink); margin: 0; }
h1 { font-weight: 700; letter-spacing: -.03em; }
h2 { font-weight: 700; font-size: clamp(1.875rem, 1.2rem + 2.2vw, 2.875rem); line-height: 1.1; letter-spacing: -.022em; text-wrap: balance; }
h3 { font-weight: 650; font-size: 1.1875rem; line-height: 1.3; letter-spacing: -.01em; }
p { margin: 0; }
button, input { font: inherit; }
:focus-visible { outline: 3px solid var(--r8-primary-soft); outline-offset: 1px; box-shadow: 0 0 0 1px var(--r8-primary); border-radius: 8px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ico { width: 1.25em; height: 1.25em; flex: none; }
/* the mark is drawn through <use>, whose copies only inherit: one colour, through an inherited custom property */
.mk-arc { stroke: var(--mk, #3F5FD1); }
.mk-dot { fill: var(--mk, #3F5FD1); }
[hidden] { display: none !important; }
.nw { white-space: nowrap; }

.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding-left: var(--gut); padding-right: var(--gut); }
@media (min-width: 700px) { :root { --gut: 28px; } }
@media (min-width: 1100px) { :root { --gut: 40px; } }
@media (min-width: 1800px) { .wrap { max-width: 1320px; } }

.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--r8-surface); color: var(--r8-ink); padding: 10px 14px; border-radius: 10px; border: 1px solid var(--r8-line-strong); font-weight: 600; }
.skip:focus { top: 12px; }

/* eyebrows: small caps in the section's own pastel ink */
.eyebrow { font-family: var(--f-head); font-weight: 700; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tone-ink); margin-bottom: .875rem; display: flex; align-items: center; gap: .625rem; }
.eyebrow::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: currentColor; flex: none; }
.eyebrow--peri { --tone-ink: var(--r8-primary-ink); }
.eyebrow--lav { --tone-ink: var(--r8-lav-ink); }
.eyebrow--mint { --tone-ink: var(--r8-mint-ink); }
.eyebrow--sky { --tone-ink: var(--r8-sky-ink); }
.eyebrow--peach { --tone-ink: var(--r8-peach-ink); }
.eyebrow--butter { --tone-ink: var(--r8-butter-ink); }

/* pills: pastel tint, deep ink */
.pill { display: inline-flex; align-items: center; gap: .5rem; padding: .375rem .875rem .375rem .75rem; border-radius: 999px; font-family: var(--f-head); font-weight: 650; font-size: .875rem; line-height: 1.3; background: var(--r8-primary-tint); color: var(--r8-primary-ink); }
.pill__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }

/* ---------------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: .5rem 1.25rem; border-radius: 12px; border: 1px solid transparent; font-family: var(--f-head); font-weight: 650; font-size: 1rem; line-height: 1.2; letter-spacing: -.005em; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .15s, border-color .15s, color .15s, transform .15s, box-shadow .15s; }
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--r8-primary); color: var(--r8-on-primary); box-shadow: 0 1px 2px rgba(23,32,51,.12), inset 0 1px 0 rgba(255,255,255,.14); }
.btn--primary:hover { background: var(--r8-primary-hover); }
.btn--quiet { background: var(--r8-surface); color: var(--r8-ink); border-color: var(--r8-line-strong); }
.btn--quiet:hover { border-color: var(--r8-primary); color: var(--r8-primary-ink); }
.btn--quiet .ico { color: var(--r8-primary-ink); }
.btn--sm { min-height: 40px; padding: .375rem .875rem; font-size: .9375rem; border-radius: 10px; }
.btn--lg { min-height: 54px; padding: .625rem 1.5rem; font-size: 1.0625rem; }
.btn--block { display: flex; width: 100%; }
.btn[disabled] { cursor: default; color: var(--r8-ink-2); background: var(--r8-sunken); border-color: var(--r8-line); box-shadow: none; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--r8-primary-ink); text-decoration: underline; text-underline-offset: .18em; cursor: pointer; font-weight: 650; min-height: 32px; }

/* ---------------------------------------------------------------- router banner */
.route-banner { background: var(--r8-sky); border-bottom: 1px solid var(--r8-line); color: var(--r8-ink); }
.route-banner__in { display: flex; align-items: center; gap: .625rem; padding-top: .625rem; padding-bottom: .625rem; }
.route-banner .ico { color: var(--r8-sky-ink); }
.route-banner a { font-weight: 700; margin-left: .25rem; color: var(--r8-sky-ink); }

/* ---------------------------------------------------------------- utility strip (text size, theme) */
.util { background: var(--r8-sunken); color: var(--r8-ink-2); font-size: .8125rem; border-bottom: 1px solid var(--r8-line); }
.util__in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 40px; flex-wrap: wrap; }
.util__who { color: var(--r8-ink-2); }
.util__tools { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.seg { display: inline-flex; align-items: center; gap: 2px; }
.seg__label { margin-right: .5rem; color: var(--r8-ink-2); }
.seg button { min-height: 30px; min-width: 32px; padding: 0 .6rem; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--r8-ink-2); font-family: var(--f-head); font-weight: 650; font-size: .8125rem; cursor: pointer; }
.seg button:hover { color: var(--r8-ink); background: var(--r8-surface); }
.seg button[aria-pressed="true"] { color: var(--r8-primary-ink); background: var(--r8-surface); border-color: var(--r8-line-strong); }
.util__notes { color: var(--r8-primary-ink); font-weight: 650; font-family: var(--f-head); }
@media (max-width: 1099px) { .util__who { display: none; } .util__in { justify-content: flex-end; } }
@media (max-width: 699px) { html[data-js] .util { display: none; } }

/* ---------------------------------------------------------------- top bar (frosted) */
.bar { position: sticky; top: 0; z-index: 50; background: var(--r8-frost); border-bottom: 1px solid var(--r8-line); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .bar { background: var(--r8-surface); } }
.bar__in { display: flex; align-items: center; gap: 1rem; min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--r8-ink); flex: none; }
.brand__mark { width: 30px; height: 30px; }
.brand__word { font-family: var(--f-head); font-weight: 700; font-size: 1.3125rem; letter-spacing: -.02em; color: var(--r8-ink); line-height: 1; }
.bar__nav { display: flex; gap: .125rem; margin-left: 1.75rem; }
.bar__nav a { color: var(--r8-ink-2); text-decoration: none; font-family: var(--f-head); font-weight: 600; font-size: .9375rem; padding: .5rem .8rem; border-radius: 10px; transition: color .15s, background-color .15s; }
.bar__nav a:hover { color: var(--r8-ink); background: var(--r8-sunken); }
.bar__cta { display: flex; align-items: center; gap: .625rem; margin-left: auto; }
.bar__cta .btn { min-height: 44px; font-size: .9375rem; padding: .5rem 1rem; }
.bar__menu { display: none; width: 48px; height: 48px; border-radius: 12px; border: 1px solid var(--r8-line-strong); background: var(--r8-surface); color: var(--r8-ink); align-items: center; justify-content: center; cursor: pointer; }
.bar__menu .ico { width: 24px; height: 24px; }
@media (max-width: 1099px) { .bar__nav { display: none; } .bar__menu { display: inline-flex; } }
@media (max-width: 599px) { .bar__app { display: none; } .bar__in { min-height: 60px; } }
@media (max-width: 419px) { .bar__cta .btn--primary { display: none; } }
.menu { border-top: 1px solid var(--r8-line); background: var(--r8-surface); box-shadow: var(--r8-shadow-lift); max-height: calc(100vh - 60px); overflow-y: auto; }
.menu__in { display: grid; gap: 1rem; padding-top: 1rem; padding-bottom: 1.25rem; }
.menu nav { display: grid; }
.menu nav a { padding: .8rem .25rem; border-bottom: 1px solid var(--r8-line); color: var(--r8-ink); text-decoration: none; font-family: var(--f-head); font-weight: 650; font-size: 1.0625rem; }
.menu__tools .util__tools { display: grid; gap: .75rem; background: var(--r8-sunken); border: 1px solid var(--r8-line); border-radius: 12px; padding: .875rem 1rem; color: var(--r8-ink-2); font-size: .875rem; }
.menu__tools .seg { flex-wrap: wrap; }
.menu__tools .seg button { min-height: 40px; min-width: 44px; font-size: .9375rem; }
.menu__links { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.menu__notes { font-weight: 650; font-family: var(--f-head); }
.menu__tools .util__notes { display: none; }
@media (min-width: 1100px) { .menu { display: none !important; } }

/* ---------------------------------------------------------------- hero */
.hero { position: relative; overflow: hidden; background: var(--r8-ground); border-bottom: 1px solid var(--r8-line); }
/* the pastel field: a slow WebGL aurora (home-2.js) where it may run; this still wash everywhere else */
.hero__field { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.hero__field::before { content: ""; position: absolute; inset: -10% -5%; transition: opacity 1.2s ease;
  background:
    radial-gradient(38% 42% at 78% 22%, rgba(201,214,250,.75), transparent 70%),
    radial-gradient(34% 40% at 94% 70%, rgba(230,224,251,.8), transparent 70%),
    radial-gradient(30% 36% at 60% 92%, rgba(205,239,227,.7), transparent 70%),
    radial-gradient(28% 30% at 12% 96%, rgba(253,230,214,.55), transparent 70%),
    radial-gradient(30% 34% at 30% 4%, rgba(216,238,251,.6), transparent 70%); }
.hero__field::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(23,32,51,.07) 1px, transparent 1.3px); background-size: 24px 24px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 80%); mask-image: linear-gradient(180deg, #000, transparent 80%); }
.hero__field canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.4s ease; }
html[data-kh-field="live"] .hero__field canvas { opacity: 1; }
html[data-kh-field="live"] .hero__field::before { opacity: 0; }
:root[data-theme="dark"] .hero__field::before { background: radial-gradient(38% 42% at 78% 22%, rgba(127,155,240,.20), transparent 70%), radial-gradient(34% 40% at 94% 70%, rgba(203,190,255,.14), transparent 70%), radial-gradient(30% 36% at 60% 92%, rgba(159,227,201,.10), transparent 70%), radial-gradient(28% 30% at 12% 96%, rgba(255,200,166,.08), transparent 70%), radial-gradient(30% 34% at 30% 4%, rgba(168,219,250,.10), transparent 70%); }
:root[data-theme="dark"] .hero__field::after { background-image: radial-gradient(rgba(233,238,247,.06) 1px, transparent 1.3px); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero__field::before { background: radial-gradient(38% 42% at 78% 22%, rgba(127,155,240,.20), transparent 70%), radial-gradient(34% 40% at 94% 70%, rgba(203,190,255,.14), transparent 70%), radial-gradient(30% 36% at 60% 92%, rgba(159,227,201,.10), transparent 70%), radial-gradient(28% 30% at 12% 96%, rgba(255,200,166,.08), transparent 70%), radial-gradient(30% 34% at 30% 4%, rgba(168,219,250,.10), transparent 70%); }
  :root:not([data-theme="light"]) .hero__field::after { background-image: radial-gradient(rgba(233,238,247,.06) 1px, transparent 1.3px); }
}
.hero__in { position: relative; z-index: 1; display: grid; gap: 2.5rem; padding-top: 3rem; padding-bottom: 3.5rem; }
.hero__eyebrow { margin-bottom: 1.5rem; }
.hero h1 { font-size: clamp(2.5rem, 1.25rem + 4.6vw, 4.5rem); line-height: 1.02; max-width: 12ch; }
.hero__lede { margin-top: 1.5rem; font-size: clamp(1.125rem, 1rem + .45vw, 1.3125rem); line-height: 1.55; color: var(--r8-ink-2); max-width: 32rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.25rem; }
.hero__trust { margin-top: 1.5rem; color: var(--r8-ink-2); font-size: .9375rem; display: flex; align-items: center; gap: .5rem; }
.hero__trust::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--r8-mint-ink); flex: none; }
html[data-signed-in] .hero__watch { display: none; }
@media (min-width: 1024px) {
  .hero__in { grid-template-columns: minmax(0, 1fr) minmax(0, 430px); align-items: center; gap: 4rem; padding-top: 4rem; padding-bottom: 4.5rem; }
  .hero__copy { padding-bottom: 3rem; }
}
@media (min-width: 1280px) { .hero__in { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 5.5rem; } }
@media (max-width: 479px) { .hero__actions .btn { flex: 1 1 100%; } }

/* the demo, in the hero: the real app in a phone, the tour's caption under it */
.hero__demo { position: relative; min-width: 0; }
.demo { display: grid; gap: 1.25rem; justify-items: center; }
.demo__stage { display: grid; justify-items: center; width: 100%; }
.device { position: relative; border-radius: 46px; padding: 10px; background: var(--r8-device); box-shadow: 0 0 0 1px var(--r8-device-edge), var(--r8-shadow-phone); z-index: 1; }
.device--demo { width: min(372px, 100%); height: clamp(540px, calc(100vh - 300px), 700px); }
.device__screen { position: relative; width: 100%; height: 100%; border-radius: 37px; overflow: hidden; background: #F6F8FC; isolation: isolate; }
.demo__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #F6F8FC; }
/* the still, before the frame (and instead of it, with reduced motion) */
.poster { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 2rem 1.75rem; text-align: center; background-color: #F6F8FC; color: #172033; --mk: #3F5FD1;
  background-image: radial-gradient(60% 40% at 80% 10%, rgba(201,214,250,.8), transparent 70%), radial-gradient(60% 40% at 10% 95%, rgba(205,239,227,.8), transparent 70%); }
.poster__mark { width: 56px; height: 56px; margin-bottom: .25rem; }
.poster__title { font: 700 1.375rem/1.25 var(--f-head); letter-spacing: -.015em; max-width: 14em; color: #172033; }
.poster__sub { color: #475569; max-width: 20em; }
.poster__link { color: #3350BA; }
.poster .btn { margin-top: .75rem; background: #3F5FD1; color: #FFFFFF; }
.poster .btn:hover { background: #3350BA; }
.demo[data-state="loading"] .poster::after { content: ""; position: absolute; bottom: 2rem; left: 50%; width: 32px; height: 32px; margin-left: -16px; border-radius: 50%; border: 3px solid #DDE3EE; border-top-color: #3F5FD1; animation: r8-spin 1s linear infinite; }
@keyframes r8-spin { to { transform: rotate(360deg); } }

.demo__side { width: min(430px, 100%); display: grid; gap: .75rem; }
.tour__track { position: relative; height: 4px; border-radius: 4px; background: var(--r8-line); overflow: hidden; }
.tour__fill { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--tour, 0)); background: var(--r8-primary); border-radius: inherit; transition: transform .5s cubic-bezier(.3,.7,.3,1); }
.tour { list-style: none; margin: 0; padding: 0; min-height: 3.25rem; }
.tour li { display: none; gap: .75rem; align-items: flex-start; color: var(--r8-ink); font-size: .9375rem; line-height: 1.45; }
.tour li[aria-current="step"], .tour:not(:has([aria-current])) li:first-child { display: flex; }
.tour li[aria-current="step"] { animation: r8-caption .42s cubic-bezier(.2,.8,.2,1) both; }
@keyframes r8-caption { from { transform: translateY(6px); } to { transform: none; } }   /* movement only: the words are at full strength from the first frame */
.tour__n { flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center; font: 650 .8125rem/1 var(--f-mono); background: var(--r8-primary); color: var(--r8-on-primary); }
.tour__t { padding-top: .1rem; font-family: var(--f-head); font-weight: 600; }
.demo__status { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .75rem; }
.demo__say { font-size: .875rem; color: var(--r8-ink-2); }
.demo__ctl { display: flex; flex-wrap: wrap; gap: .5rem; }
.demo__lede { font-size: .875rem; color: var(--r8-ink-2); line-height: 1.5; }
.demo__note { font-size: .8125rem; color: var(--r8-ink-2); }
@media (max-width: 599px) { .device--demo { width: calc(100% - 40px); height: min(680px, 78vh); min-height: 520px; } }
/* signed in: the demo is gone; the way into the app takes its place */
.signedin { display: grid; justify-items: start; gap: .875rem; padding: 2rem 1.75rem; border-radius: 20px; background: var(--r8-surface); border: 1px solid var(--r8-line); box-shadow: var(--r8-shadow-lift); max-width: 440px; margin: 0 auto; animation: r8-rise .5s cubic-bezier(.2,.8,.2,1) both; }
.signedin .eyebrow { margin-bottom: 0; }
.signedin__ok { width: 52px; height: 52px; padding: 12px; border-radius: 16px; background: var(--r8-mint); color: var(--r8-mint-ink); }
.signedin__title { font-size: clamp(1.625rem, 1.2rem + 1.2vw, 2.125rem); line-height: 1.15; letter-spacing: -.02em; }
.signedin__title:focus { outline: none; box-shadow: none; }
.signedin__text { color: var(--r8-ink-2); }
.signedin .btn { margin-top: .5rem; }
.signedin__small { font-size: .9375rem; }

/* ---------------------------------------------------------------- trust strip: true statements, quiet */
.trust { background: var(--r8-surface); border-bottom: 1px solid var(--r8-line); }
.trust__list { list-style: none; margin: 0; padding: 1.25rem 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .625rem 2.25rem; }
.trust__list li { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--f-head); font-weight: 650; font-size: .9375rem; color: var(--r8-ink-2); }
.trust__list .ico { width: 1.15em; height: 1.15em; color: var(--r8-primary-ink); }
@media (max-width: 599px) { .trust__list { justify-content: flex-start; gap: .625rem 1.25rem; } }

/* ---------------------------------------------------------------- sections */
.sec { padding: 4.5rem 0; position: relative; }
@media (min-width: 1024px) { .sec { padding: 7rem 0; } }
.sec__head { max-width: 46rem; margin-bottom: 3rem; }
.sec__head--center { margin-left: auto; margin-right: auto; text-align: center; }
.sec__head--center .eyebrow { justify-content: center; }
.sec__lede { margin-top: 1.125rem; color: var(--r8-ink-2); font-size: 1.1875rem; line-height: 1.55; max-width: 40rem; }
.sec__head--center .sec__lede { margin-left: auto; margin-right: auto; }
.sec--how { --tone-ink: var(--r8-primary-ink); background: var(--r8-ground); }
.sec--proof { --tone-ink: var(--r8-lav-ink); background: var(--r8-surface); border-top: 1px solid var(--r8-line); border-bottom: 1px solid var(--r8-line); }
.sec--features { --tone: var(--r8-sky); --tone-ink: var(--r8-sky-ink); background: var(--r8-ground); }
.sec--who { --tone: var(--r8-peach); --tone-ink: var(--r8-peach-ink); background: var(--r8-surface); border-top: 1px solid var(--r8-line); }
.sec--pricing { --tone: var(--r8-butter); --tone-ink: var(--r8-butter-ink); background: var(--r8-ground); }
.start { --tone-ink: var(--r8-primary-ink); background: var(--r8-ground); padding-top: 1rem; }
.secure { --tone: var(--r8-mint); --tone-ink: var(--r8-mint-ink); background: var(--r8-surface); border-top: 1px solid var(--r8-line); border-bottom: 1px solid var(--r8-line); }
.sec--faq { --tone-ink: var(--r8-primary-ink); background: var(--r8-ground); }

/* reveals: content is visible unless scripts run with motion allowed, and an observer then shows it */
html[data-js][data-reveal] .reveal { opacity: 0; transform: translateY(16px); }
html[data-js][data-reveal] .reveal.in { opacity: 1; transform: none; transition: opacity .45s ease, transform .6s cubic-bezier(.2,.8,.2,1); }

/* ---- how it works: 01 / 02 / 03, big light numerals, hairlines, no cards ---- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: s; border-top: 1px solid var(--r8-line-strong); }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.step { position: relative; padding: 2rem 0 2.25rem; border-bottom: 1px solid var(--r8-line); }
@media (min-width: 900px) { .step { padding: 2.25rem 2.25rem 0 0; border-bottom: 0; } .step + .step { padding-left: 2.25rem; border-left: 1px solid var(--r8-line); } }
.step__n { display: block; font: 300 clamp(3.25rem, 2.4rem + 2.6vw, 4.5rem)/1 var(--f-head); letter-spacing: -.04em; color: var(--r8-primary-ink); font-variant-numeric: tabular-nums; margin-bottom: 1.5rem; }
.step__n::before { content: "0"; }
.step__ico { position: absolute; top: 2.4rem; right: 0; width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--r8-primary-tint); color: var(--r8-primary-ink); }
@media (min-width: 900px) { .step__ico { right: 2.25rem; } }
.step h3 { font-size: 1.3125rem; margin-bottom: .625rem; }
.step p { color: var(--r8-ink-2); max-width: 30rem; }
html[data-js][data-reveal] .step.reveal { transform: translateX(-14px); }
html[data-js][data-reveal] .step.reveal.in { transform: none; }
.steps .step:nth-child(2) { transition-delay: .09s; }
.steps .step:nth-child(3) { transition-delay: .18s; }

/* ---- the proof: the page's one dark panel; the engine's note, its tapped facts as syntax-coloured chips ---- */
.proofwrap { display: grid; gap: 1rem; }
.stage { position: relative; }
.proof { position: relative; border-radius: 20px; background: var(--r8-code); color: var(--r8-code-ink); border: 1px solid var(--r8-code-line); box-shadow: var(--r8-shadow-lift); overflow: hidden; --mk: #A9BCFF; }
.proof__bar { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.25rem; background: var(--r8-code-2); border-bottom: 1px solid var(--r8-code-line); }
.proof__mark { width: 26px; height: 26px; }
.proof__who { min-width: 0; }
.notepage__who { font: 700 1rem/1.25 var(--f-head); color: var(--r8-code-ink); }
.notepage__date { font-size: .8125rem; color: var(--r8-code-ink-2); }
.proof__tag { margin-left: auto; font: 650 .75rem/1 var(--f-mono); letter-spacing: .04em; color: var(--r8-code-ink-2); padding: .4rem .6rem; border: 1px solid var(--r8-code-line); border-radius: 8px; white-space: nowrap; }
.proof__body { padding: 1.5rem 1.25rem 7.5rem; }
.proof__cols { display: grid; gap: 1.75rem; }
@media (min-width: 900px) { .proof__cols { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 2.5rem; } .proof__body { padding: 2rem 2.25rem 6.5rem; } }
.proof__label { font: 650 .75rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--r8-code-ink-2); margin-bottom: .875rem; }
.facts { display: flex; flex-wrap: wrap; gap: .5rem; align-content: flex-start; }
@media (min-width: 900px) { .facts { flex-direction: column; align-items: flex-start; } }
/* each fact in its kind's pastel: time and sleep sky, medications mint, meals peach, places and people lavender, mood butter */
.fact { --c: #A8DBFA; --f: rgba(168,219,250,.13); display: inline-block; padding: .3rem .6rem; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--c) 34%, transparent); background: var(--f); font-family: var(--f-mono); font-size: .8125rem; line-height: 1.4; color: var(--r8-code-ink); }
.fact b { color: var(--c); font-weight: 700; margin-right: .25rem; }
.facts .fact:nth-child(2), .facts .fact:nth-child(8) { --c: #9FE3C9; --f: rgba(159,227,201,.12); }
.facts .fact:nth-child(3), .facts .fact:nth-child(5), .facts .fact:nth-child(7) { --c: #FFC8A6; --f: rgba(255,200,166,.12); }
.facts .fact:nth-child(4), .facts .fact:nth-child(6) { --c: #CBBEFF; --f: rgba(203,190,255,.13); }
.facts .fact:nth-child(10) { --c: #F5DE8A; --f: rgba(245,222,138,.12); }
.notetext { font-size: .9375rem; line-height: 1.7; color: var(--r8-code-ink-2); max-width: 44rem; }
.notetext p + p { margin-top: .75rem; }
/* the tapped facts inside the written note, marked by home-2.js (text nodes only; the note's words are not changed) */
.notetext mark { --c: #A8DBFA; color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent); border-radius: 5px; padding: 0 .2em; margin: 0 -.05em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.notetext mark[data-k="med"] { --c: #9FE3C9; }
.notetext mark[data-k="meal"] { --c: #FFC8A6; }
.notetext mark[data-k="place"] { --c: #CBBEFF; }
.notetext mark[data-k="mood"] { --c: #F5DE8A; }
.app__sig { position: absolute; left: 1.25rem; right: 1.25rem; bottom: 1.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .875rem; padding: .875rem 1rem; border-radius: 12px; background: var(--r8-code-2); border: 1px solid color-mix(in srgb, #9FE3C9 38%, transparent); font-family: var(--f-mono); font-size: .8125rem; line-height: 1.4; color: var(--r8-code-ink); z-index: 2; }
@media (min-width: 900px) { .app__sig { left: 2.25rem; right: 2.25rem; bottom: 1.75rem; } }
.sig__text { flex: 1 1 220px; }
.sig__lock { display: inline-flex; align-items: center; gap: .35rem; font: 700 .75rem/1 var(--f-head); letter-spacing: .08em; text-transform: uppercase; color: #0E1420; background: #9FE3C9; padding: .4rem .6rem; border-radius: 7px; }
.sig__lock .ico { width: 13px; height: 13px; }
.seal { position: absolute; left: 50%; top: 50%; width: 132px; height: 132px; margin: -66px 0 0 -66px; display: grid; place-items: center; z-index: 4; opacity: 0; pointer-events: none; filter: drop-shadow(0 10px 24px rgba(0,0,0,.45)); }
.seal__ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.seal__ring circle { fill: #19243C; stroke: #9FE3C9; stroke-width: 5; stroke-dasharray: 327; stroke-dashoffset: 327; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 60px 60px; }
.seal__in { position: relative; display: grid; justify-items: center; gap: 4px; color: #9FE3C9; font: 700 14px/1 var(--f-head); letter-spacing: .08em; text-transform: uppercase; }
.seal__in .ico { width: 34px; height: 34px; }
.hero__caption { color: var(--r8-ink-2); font-size: .9375rem; text-align: center; }

/* motion states (set by home-2.js only when motion is allowed): the day is tapped in, then written, then signed */
.stage.is-live .fact:not(.on) { color: transparent; background: transparent; border-style: dashed; border-color: #3A4868; }
.stage.is-live .fact:not(.on) b { color: transparent; }
.stage.is-live .fact.on { animation: r8-chip .42s cubic-bezier(.2,.9,.3,1.3) both; }
@keyframes r8-chip { from { transform: scale(.86); box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 60%, transparent); } 60% { transform: scale(1.05); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 30%, transparent); } to { transform: none; box-shadow: 0 0 0 0 transparent; } }
.stage.is-live .notetext p { --wipe: 0%; -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--wipe) - 30%), transparent var(--wipe)); mask-image: linear-gradient(90deg, #000 calc(var(--wipe) - 30%), transparent var(--wipe)); }
.stage.is-live .notetext p.on { --wipe: 130%; transition: --wipe .8s cubic-bezier(.3,.6,.3,1); }
.stage.is-live .notetext p mark { background: transparent; }
.stage.is-live .notetext p.on mark { background: color-mix(in srgb, var(--c) 13%, transparent); transition: background-color .5s ease .45s; }
.stage.is-live .app__sig { opacity: 0; transform: translateY(12px); }
.stage.is-live .app__sig.on { opacity: 1; transform: none; transition: opacity .35s, transform .45s cubic-bezier(.2,.8,.2,1); }

/* ---- features: a hairline grid; sky ---- */
.grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--r8-line); border: 1px solid var(--r8-line); border-radius: var(--radius); overflow: hidden; grid-template-columns: 1fr; }
@media (min-width: 560px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.cell { background: var(--r8-surface); padding: 1.625rem 1.375rem; transition: background-color .2s; }
.cell:hover { background: color-mix(in srgb, var(--r8-surface) 70%, var(--r8-sky)); }
.cell__ico { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--r8-sky); color: var(--r8-sky-ink); margin-bottom: 1rem; }
.cell h3 { font-size: 1.0625rem; margin-bottom: .375rem; }
.cell p { color: var(--r8-ink-2); font-size: .9375rem; line-height: 1.55; }
@media (min-width: 900px) and (max-width: 1199px) { .grid .cell:last-child { grid-column: span 3; } }
@media (min-width: 560px) and (max-width: 899px) { .grid .cell:last-child { grid-column: auto; } }
html[data-js][data-reveal] .cell.reveal { transform: translateY(10px); }
html[data-js][data-reveal] .cell.reveal.in { transform: none; }
.grid .cell:nth-child(5n+2) { transition-delay: .04s; }
.grid .cell:nth-child(5n+3) { transition-delay: .08s; }
.grid .cell:nth-child(5n+4) { transition-delay: .12s; }
.grid .cell:nth-child(5n+5) { transition-delay: .16s; }
.after__title { margin-top: 3rem; margin-bottom: 1rem; font-size: 1.0625rem; }
.after { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.after li { display: inline-flex; gap: .5rem; align-items: center; padding: .5rem .9rem; border-radius: 999px; background: var(--r8-sky); font-family: var(--f-head); font-weight: 600; font-size: .9375rem; color: var(--r8-sky-ink); }

/* ---- who: peach ---- */
.who { display: grid; gap: 1rem; }
@media (min-width: 900px) { .who { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }
.whocard { background: var(--r8-surface); border: 1px solid var(--r8-line); border-radius: var(--radius); padding: 1.75rem 1.5rem; }
.whocard__ico { width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: var(--r8-peach); color: var(--r8-peach-ink); margin-bottom: 1.25rem; }
.whocard h3 { margin-bottom: .5rem; }
.whocard > p { color: var(--r8-ink-2); margin-bottom: 1.125rem; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.ticks li { display: flex; gap: .55rem; align-items: flex-start; color: var(--r8-ink); }
.ticks .ico { color: var(--r8-mint-ink); margin-top: .2em; width: 1.05em; height: 1.05em; }
.who .whocard:nth-child(2) { transition-delay: .08s; }
.who .whocard:nth-child(3) { transition-delay: .16s; }
.who__not { margin-top: 1.75rem; display: flex; gap: .625rem; align-items: flex-start; color: var(--r8-ink-2); font-weight: 600; }
.who__not .ico { color: var(--r8-peach-ink); margin-top: .15em; }

/* ---- mission: lavender band; on capable computers the app's own 3D scene (recoloured) plays at its right ---- */
.mission { padding: 5rem 0; position: relative; overflow: hidden; background: var(--r8-lav); color: var(--r8-ink); --tone-ink: var(--r8-lav-ink); }
.mission__scene { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.mission__scene::before { content: ""; position: absolute; top: 0; bottom: 0; left: 52%; right: 0; display: none; background: url("/assets/mission-still-2.svg") center 46% / auto min(78%, 460px) no-repeat; transition: opacity .8s; }
@media (min-width: 1024px) { .mission__scene::before { display: block; } }
html[data-kh-scene="live"] .mission__scene::before { opacity: 0; }
canvas.kn-orb { position: absolute !important; pointer-events: none; }
.mission__scene canvas { -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 88%, transparent), linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 22%, #000 88%, transparent), linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent); mask-composite: intersect; }
.mission__in { position: relative; z-index: 1; max-width: 1000px; }
@media (min-width: 1024px) {
  .mission { min-height: max(520px, 38vw); display: flex; align-items: center; padding: 7rem 0; }
  .mission__in { max-width: 1200px; }
  .mission__quote, .mission .mission__by { max-width: min(38rem, 44vw); }
}
@media (min-width: 1800px) { .mission__in { max-width: 1320px; } }
.eyebrow--on-band { --tone-ink: var(--r8-lav-ink); }
.mission__quote { margin: 0; font-family: var(--f-head); font-weight: 650; font-size: clamp(1.375rem, 1rem + 1.7vw, 2.25rem); line-height: 1.28; letter-spacing: -.018em; color: var(--r8-ink); }
.mission__quote p:first-child { color: var(--r8-lav-ink); }
.mission__quote p + p { margin-top: 1.25rem; font-size: clamp(1.1875rem, .95rem + .9vw, 1.625rem); font-weight: 600; line-height: 1.4; letter-spacing: -.01em; }
.mission__by { margin-top: 2.25rem; display: flex; gap: .875rem; align-items: center; color: var(--r8-ink-2); max-width: 44rem; }
.mission__mark { width: 40px; height: 40px; flex: none; --mk: var(--r8-lav-ink); }
:root[data-theme="dark"] .mission { background: #1A1D35; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mission { background: #1A1D35; }
}

/* ---- pricing: centred; the plan is the one lifted card; the trial carries butter ---- */
.prices { display: grid; gap: 1rem; align-items: stretch; }
@media (min-width: 960px) { .prices { grid-template-columns: 1.15fr 1fr 1fr; gap: 1.25rem; } }
.price { background: var(--r8-surface); border: 1px solid var(--r8-line); border-radius: var(--radius); padding: 1.875rem 1.625rem; display: flex; flex-direction: column; gap: 1rem; }
.price p { color: var(--r8-ink-2); }
.price--main { border: 2px solid var(--r8-primary); box-shadow: var(--r8-shadow-lift); }
.price--main .btn { margin-top: auto; }
.price__name { font-family: var(--f-head); font-weight: 700; font-size: 1.0625rem; color: var(--r8-ink) !important; }
.price__amt { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; padding-bottom: 1rem; border-bottom: 1px solid var(--r8-line); }
.price__num { font: 700 3rem/1 var(--f-head); letter-spacing: -.035em; color: var(--r8-ink); font-variant-numeric: tabular-nums; }
.price__per { color: var(--r8-ink-2); font-weight: 600; }
.price--trial { background: var(--r8-butter); border-color: transparent; }
.price--trial .price__num { color: var(--r8-butter-ink); }
.price--trial p, .price--trial .price__per { color: var(--r8-ink); }
.price--trial .price__amt { border-bottom-color: color-mix(in srgb, var(--r8-butter-ink) 22%, transparent); }
.price--trial a { color: var(--r8-ink); }
.price__carry { padding-top: .875rem; border-top: 1px solid color-mix(in srgb, var(--r8-butter-ink) 22%, transparent); }
.prices .price:nth-child(2) { transition-delay: .08s; }
.prices .price:nth-child(3) { transition-delay: .16s; }

/* ---- start + sign-up ---- */
.start__in { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 960px) { .start__in { grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); gap: 4.5rem; align-items: center; } }
.start__how { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: .875rem; }
.start__how li { display: flex; gap: .875rem; align-items: flex-start; color: var(--r8-ink-2); }
.start__how span { flex: none; width: 1.875rem; height: 1.875rem; border-radius: 50%; display: grid; place-items: center; font: 650 .8125rem/1 var(--f-mono); background: var(--r8-primary-tint); color: var(--r8-primary-ink); }
.start__small { margin-top: 1.75rem; font-size: .9375rem; color: var(--r8-ink-2); }
.card { background: var(--r8-surface); border: 1px solid var(--r8-line); border-radius: 20px; box-shadow: var(--r8-shadow-lift); }
.signup { padding: 1.75rem 1.5rem; position: relative; }
@media (min-width: 480px) { .signup { padding: 2.25rem 2rem; } }
.su { display: grid; gap: .75rem; }
.su[hidden] { display: none; }
.su__title { font-size: 1.5rem; line-height: 1.2; letter-spacing: -.018em; text-wrap: balance; }
.su__sent { color: var(--r8-mint-ink); font-size: .9375rem; font-weight: 650; }
.su__title:focus { outline: none; box-shadow: none; }
.su__text { color: var(--r8-ink-2); }
.su__label { font-family: var(--f-head); font-weight: 650; font-size: .9375rem; margin-top: .5rem; }
.su__input { width: 100%; min-height: 54px; padding: .75rem 1rem; border-radius: 12px; border: 1px solid var(--r8-line-strong); background: var(--r8-surface); color: var(--r8-ink); font-size: 1.125rem; transition: border-color .15s, box-shadow .15s; }
.su__input:focus { outline: none; border-color: var(--r8-primary); box-shadow: 0 0 0 3px var(--r8-primary-soft); }
.su__input[aria-invalid="true"] { border-color: var(--r8-rose-ink); }
.su__input--code { font-family: var(--f-mono); font-size: 1.5rem; letter-spacing: .3em; text-align: center; }
.su__err { color: var(--r8-rose-ink); background: var(--r8-rose); border-radius: 12px; padding: .625rem .875rem; font-size: .9375rem; line-height: 1.45; }
.su__hint { color: var(--r8-ink-3); font-size: .9375rem; }
.su__addr { display: flex; gap: .5rem; align-items: center; font-weight: 700; color: var(--r8-ink); background: var(--r8-sunken); border: 1px solid var(--r8-line); border-radius: 12px; padding: .625rem .875rem; word-break: break-all; }
.su__addr .ico { color: var(--r8-primary-ink); }
.su__change { font-size: .9375rem; color: var(--r8-ink-2); }
.su__row { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.su__count { font: 500 .875rem/1 var(--f-mono); color: var(--r8-ink-3); }
.su__ok { width: 52px; height: 52px; padding: 12px; border-radius: 16px; background: var(--r8-mint); color: var(--r8-mint-ink); }
.signup[data-busy] .btn--primary { opacity: .75; cursor: progress; }
:root[data-theme="dark"] .su__hint, :root[data-theme="dark"] .su__count { color: var(--r8-ink-2); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .su__hint, :root:not([data-theme="light"]) .su__count { color: var(--r8-ink-2); }
}

/* ---- secure by design: mint ---- */
.badges { list-style: none; margin: 0 0 2.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: .625rem; }
.badges li { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .95rem .55rem .8rem; border-radius: 999px; background: var(--r8-mint); color: var(--r8-mint-ink); font-family: var(--f-head); font-weight: 650; font-size: .9375rem; }
.badges .ico { width: 1.15em; height: 1.15em; }
html[data-js][data-reveal] .badges.reveal li { opacity: 0; transform: scale(.94); }
html[data-js][data-reveal] .badges.reveal.in li { opacity: 1; transform: none; transition: opacity .35s ease, transform .45s cubic-bezier(.2,.9,.3,1.2); }
.badges.reveal li:nth-child(2) { transition-delay: .05s; }
.badges.reveal li:nth-child(3) { transition-delay: .1s; }
.badges.reveal li:nth-child(4) { transition-delay: .15s; }
.badges.reveal li:nth-child(5) { transition-delay: .2s; }
.promises { display: grid; gap: 1rem; }
@media (min-width: 900px) { .promises { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--r8-line-strong); } }
.promise { padding: 1.75rem 0; border-top: 1px solid var(--r8-line); }
@media (min-width: 900px) { .promise { padding: 2rem 2rem 0 0; border-top: 0; } .promise + .promise { padding-left: 2rem; border-left: 1px solid var(--r8-line); } }
.promise__ico { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--r8-mint); color: var(--r8-mint-ink); margin-bottom: 1rem; }
.promise h3 { font-size: 1.3125rem; margin-bottom: .75rem; }
.promise p { color: var(--r8-ink-2); }
.promise p + p { margin-top: .75rem; }
.promises .promise:nth-child(2) { transition-delay: .08s; }
.promises .promise:nth-child(3) { transition-delay: .16s; }
.plain { margin-top: 2.5rem; display: flex; gap: 1rem; align-items: flex-start; padding: 1.25rem 1.5rem; border-radius: var(--radius); background: var(--r8-sky); color: var(--r8-ink); }
.plain__ico { width: 26px; height: 26px; color: var(--r8-sky-ink); flex: none; margin-top: 2px; }
.plain h3 { font-size: 1.0625rem; margin-bottom: .375rem; }
.plain ul { margin: 0; padding-left: 1.1rem; color: var(--r8-ink); }
.plain li + li { margin-top: .25rem; }

/* ---- faq ---- */
.faq__in { max-width: 880px; }
.faq { border-top: 1px solid var(--r8-line-strong); }
.faq details { border-bottom: 1px solid var(--r8-line); }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.25rem .25rem; cursor: pointer; font-family: var(--f-head); font-weight: 650; font-size: 1.125rem; color: var(--r8-ink); border-radius: 8px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ico { color: var(--r8-primary-ink); transition: transform .2s; width: 32px; height: 32px; padding: 6px; border-radius: 50%; background: var(--r8-primary-tint); }
.faq details[open] summary .ico { transform: rotate(180deg); }
.faq details p { padding: 0 .25rem 1.375rem; color: var(--r8-ink-2); max-width: 44rem; }
.faq details[open] p { animation: r8-rise .35s cubic-bezier(.2,.8,.2,1) both; }

/* ---- closing + footer ---- */
.closing { padding: 5rem 0; text-align: center; background: var(--r8-primary-tint); color: var(--r8-ink); }
.closing__in { display: grid; justify-items: center; gap: 1rem; }
.closing h2 { font-size: clamp(1.875rem, 1.2rem + 2.2vw, 2.75rem); max-width: 20ch; }
.closing p { color: var(--r8-ink-2); font-size: 1.125rem; }
.closing .hero__actions { justify-content: center; margin-top: 1rem; }
:root[data-theme="dark"] .closing { background: #1A2340; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .closing { background: #1A2340; }
}
.foot { background: var(--r8-surface); color: var(--r8-ink-2); padding: 3.5rem 0 2.5rem; border-top: 1px solid var(--r8-line); }
.foot__in { display: grid; gap: 2rem; }
@media (min-width: 900px) { .foot__in { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.foot__disc { margin-top: 1rem; max-width: 34rem; font-size: .9375rem; }
.foot__nav { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-content: start; }
.foot__nav a { color: var(--r8-ink); font-weight: 600; font-family: var(--f-head); font-size: .9375rem; text-decoration: none; padding: .25rem 0; }
.foot__nav a:hover { color: var(--r8-primary-ink); text-decoration: underline; }
.foot__legal { grid-column: 1 / -1; padding-top: 1.5rem; border-top: 1px solid var(--r8-line); font-size: .875rem; color: var(--r8-ink-2); }

/* ---- legal pages (terms, privacy, 404) ---- */
.doc { padding: 3rem 0 5rem; }
.doc__in { max-width: 46rem; }
.doc h1 { font-size: clamp(2rem, 1.4rem + 2vw, 2.875rem); line-height: 1.08; letter-spacing: -.025em; margin-bottom: .5rem; }
.doc .doc__meta { color: var(--r8-ink-2); font-size: .9375rem; margin-bottom: 2rem; }
.doc h2 { font-size: 1.375rem; letter-spacing: -.012em; margin: 2.25rem 0 .75rem; }
.doc p, .doc li { color: var(--r8-ink-2); }
.doc p + p { margin-top: .875rem; }
.doc ul { padding-left: 1.25rem; margin: .75rem 0; }
.doc li + li { margin-top: .375rem; }
.doc strong { color: var(--r8-ink); }
.doc .doc__box { background: var(--r8-primary-tint); border-radius: var(--radius); padding: 1.25rem 1.5rem; margin: 1rem 0; }
.doc .doc__box p { color: var(--r8-ink); }
.doc__back { display: inline-flex; gap: .375rem; align-items: center; font-weight: 650; font-family: var(--f-head); margin-bottom: 2rem; }
.doc__lede { font-size: 1.1875rem; color: var(--r8-ink-2); margin-bottom: 1rem; }
.nf { min-height: 60vh; display: grid; align-content: center; gap: 1rem; padding: 4rem 0; }
.nf__actions { margin-top: .5rem; }

/* ---------------------------------------------------------------- entrances (motion allowed only) */
@keyframes r8-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes r8-phone { from { opacity: 0; transform: translateY(26px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  html[data-js]:not([data-route="pending"]) .hero__copy > * { animation: r8-rise .55s cubic-bezier(.2,.8,.2,1) both; }
  html[data-js]:not([data-route="pending"]) .hero__copy > :nth-child(2) { animation-delay: .06s; }
  html[data-js]:not([data-route="pending"]) .hero__copy > :nth-child(3) { animation-delay: .12s; }
  html[data-js]:not([data-route="pending"]) .hero__copy > :nth-child(4) { animation-delay: .18s; }
  html[data-js]:not([data-route="pending"]) .hero__copy > :nth-child(5) { animation-delay: .22s; }
  html[data-js]:not([data-route="pending"]) .demo__stage { animation: r8-phone .7s cubic-bezier(.2,.8,.2,1) .1s both; }
}

/* ---------------------------------------------------------------- reduced motion: everything still, everything shown */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  html[data-js][data-reveal] .reveal, html[data-js][data-reveal] .reveal li { opacity: 1; transform: none; }
  .hero__field canvas { display: none; }
}

/* ---- 4 October: the sign-up card says plainly what the email holds ---- */
.su__which { margin: .25rem 0 1rem; padding-left: 1.15rem; display: grid; gap: .45rem; color: var(--r8-ink-2, inherit); font-size: .95rem; line-height: 1.5; }
.su__which b { color: var(--r8-ink, inherit); }

/* ---- 4 October: the demo phone shows the app at a real phone's width (390 px), scaled to fit the frame, so
   nothing is cut off or squeezed; on a phone the bezel is thinner so the screen gets the room ---- */
.demo__frame.is-fit { inset: auto; left: 0; top: 0; transform-origin: 0 0; }
@media (max-width: 599px) {
  .device--demo { width: calc(100% - 8px); height: min(720px, 82vh); min-height: 540px; padding: 6px; border-radius: 34px; }
  .device--demo .device__screen { border-radius: 28px; }
}

/* ======================================================================================================================
   4 October design pass: depth and finish. The page's own 3D (assets/depth-1.js) in four places, and the finish
   around it. Every moving thing here runs only with motion allowed; with reduced motion the page is the still page
   above, word for word. Text never sits under anything that lowers its contrast.
   ====================================================================================================================== */
@property --kh-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* ---- the bar: a reading hairline, and a soft lift once the page has moved ---- */
.bar { transition: box-shadow .3s ease, background-color .3s ease; }
.bar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; transform-origin: 0 50%; transform: scaleX(var(--kh-read, 0)); background: linear-gradient(90deg, var(--r8-primary), color-mix(in srgb, var(--r8-primary) 55%, var(--r8-lav-ink))); pointer-events: none; }
.bar.is-up { box-shadow: 0 10px 30px -22px rgba(23,32,51,.45); }

/* ---- buttons: a lift and a single pass of light on the main action ---- */
.btn--primary { position: relative; overflow: hidden; isolation: isolate; }
.btn--primary::after { content: ""; position: absolute; inset: -2px; z-index: -1; pointer-events: none; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.28) 48%, transparent 66%); transform: translateX(-110%); }
@media (prefers-reduced-motion: no-preference) {
  .btn--primary:hover::after { transform: translateX(110%); transition: transform .8s cubic-bezier(.3,.6,.2,1); }
  .btn--primary:hover { transform: translateY(-1px); box-shadow: 0 1px 2px rgba(23,32,51,.12), 0 12px 24px -12px color-mix(in srgb, var(--r8-primary) 70%, transparent); }
  .btn--quiet:hover { transform: translateY(-1px); }
}

/* ---- hero: the headline's last words in the accent, underlined by hand ---- */
.hero h1 .hl { position: relative; color: var(--r8-primary-ink); isolation: isolate; }
.hero h1 .hl::after { content: ""; position: absolute; z-index: -1; left: -.04em; right: -.06em; bottom: -.06em; height: .26em; background: var(--r8-primary-soft); -webkit-mask: url("/assets/swoosh-1.svg") center / 100% 100% no-repeat; mask: url("/assets/swoosh-1.svg") center / 100% 100% no-repeat; }
@keyframes kh-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: no-preference) {
  html[data-js]:not([data-route="pending"]) .hero h1 .hl::after { animation: kh-draw .9s cubic-bezier(.6,.1,.2,1) .55s both; }
}
/* the note slips' canvas sits in the field, under everything; it fades in, and fades out toward the hero's foot */
.hero__depth { position: absolute; inset: 0; z-index: 1; -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 94%); mask-image: linear-gradient(180deg, #000 62%, transparent 94%); }
.hero__depth canvas { opacity: 0; transition: opacity 1.8s ease; }
.hero__depth canvas.is-on { opacity: 1; }
/* a halo behind the demo phone, breathing slowly */
.demo__stage { position: relative; }
.demo__stage::before { content: ""; position: absolute; left: 50%; top: 46%; width: min(520px, 120%); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--r8-primary-soft) 85%, transparent), transparent 72%); filter: blur(6px); pointer-events: none; z-index: 0; }
@keyframes kh-breathe { 0%, 100% { opacity: .75; transform: translate(-50%, -50%) scale(.96); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); } }
@media (prefers-reduced-motion: no-preference) { html[data-js]:not([data-route="pending"]) .demo__stage::before { animation: kh-breathe 7s ease-in-out infinite; } }
.device--demo { box-shadow: 0 0 0 1px var(--r8-device-edge), 0 2px 4px rgba(23,32,51,.06), 0 50px 100px -36px rgba(33,52,120,.5), 0 30px 60px -40px rgba(63,95,209,.35); }

/* ---- section heads: the words rise into place under a clean edge; the eyebrow's rule draws out ---- */
@media (prefers-reduced-motion: no-preference) {
  html[data-js] .sec__head h2 { transition: clip-path .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1); }
  html[data-js] .sec__head:not(.is-in) h2 { clip-path: inset(0 0 100% 0); transform: translateY(.45em); }
  html[data-js] .sec__head .eyebrow::before { transition: width .7s cubic-bezier(.2,.8,.2,1) .15s; }
  html[data-js] .sec__head:not(.is-in) .eyebrow::before { width: 0; }
}
.sec__head.is-in .eyebrow::before { width: 28px; }

/* ---- How it works: the rule over the steps fills left to right; each step's object lives in a tile ---- */
.steps { position: relative; }
.steps::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: linear-gradient(90deg, var(--r8-primary), color-mix(in srgb, var(--r8-primary) 50%, var(--r8-mint-ink))); transform-origin: 0 50%; transform: scaleX(1); }
@media (prefers-reduced-motion: no-preference) {
  html[data-js] .steps::before { transition: transform 1.6s cubic-bezier(.6,.1,.2,1) .2s; }
  html[data-js] .steps:not(.is-in)::before { transform: scaleX(0); }
}
.step__3d { display: none; position: absolute; top: .75rem; right: -.5rem; width: 128px; height: 128px; pointer-events: none; }
@media (min-width: 900px) { .step__3d { right: 1rem; top: 1rem; } }
html[data-kd-steps="live"] .step__3d { display: block; }
html[data-kd-steps="live"] .step__ico { visibility: hidden; }
.steps > canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; opacity: 0; transition: opacity 1s ease; }
.steps > canvas.is-on { opacity: 1; }
.step { isolation: isolate; }

/* ---- cards: a soft light follows the pointer; the separate objects lift a little ---- */
.cell, .whocard, .price, .promise, .step { position: relative; isolation: isolate; }
.cell::after, .whocard::after, .price::after, .promise::after, .step::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s ease;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--tone-ink, var(--r8-primary)) 9%, transparent), transparent 70%); }
.cell:hover::after, .whocard:hover::after, .price:hover::after, .promise:hover::after, .step:hover::after { opacity: 1; }
.whocard, .price:not(.price--main) { transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease; }
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .whocard:hover, .price:not(.price--main):hover { transform: translateY(-4px); box-shadow: var(--r8-shadow-lift); border-color: var(--r8-line-strong); }
  .cell__ico, .whocard__ico, .promise__ico { transition: transform .45s cubic-bezier(.2,.9,.3,1.3); }
  .cell:hover .cell__ico, .whocard:hover .whocard__ico, .promise:hover .promise__ico { transform: translateY(-3px) rotate(-6deg); }
}
.whocard { --tone-ink: var(--r8-peach-ink); }
.cell { --tone-ink: var(--r8-sky-ink); }
.promise { --tone-ink: var(--r8-mint-ink); }

/* ---- pricing: the main plan carries a slow pass of light around its edge ---- */
.price--main { border-color: transparent; background: linear-gradient(var(--r8-surface), var(--r8-surface)) padding-box, conic-gradient(from var(--kh-ang), var(--r8-primary) 0deg, var(--r8-primary-soft) 70deg, var(--r8-primary) 140deg, var(--r8-primary) 360deg) border-box; background-color: var(--r8-surface); }
@keyframes kh-orbit { to { --kh-ang: 360deg; } }
@media (prefers-reduced-motion: no-preference) { html[data-js]:not([data-route="pending"]) .price--main { animation: kh-orbit 6s linear infinite; } }

/* ---- the privacy promises: the vault beside the head and badges (computers), under them (phones) ---- */
.secure__top { display: grid; gap: 0; }
.vault { display: none; position: relative; height: 280px; margin: -1rem 0 1.5rem; pointer-events: none; }
.vault::before { content: ""; position: absolute; left: 50%; top: 50%; width: 260px; height: 260px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, var(--r8-mint), transparent 75%); opacity: .8; }
.vault canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.4s ease; }
.vault canvas.is-on { opacity: 1; }
html[data-kh-depth="live"] .vault { display: block; }
@media (min-width: 1024px) {
  html[data-kh-depth="live"] .secure__top { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 2rem; align-items: center; }
  html[data-kh-depth="live"] .vault { height: 420px; margin: -2rem 0 0; }
  html[data-kh-depth="live"] .vault::before { width: 380px; height: 380px; }
}

/* ---- the closing band: room under the buttons for the signature to be written and sealed ---- */
.closing { position: relative; overflow: hidden; }
.closing__in { position: relative; z-index: 1; }
.closing__sign { position: absolute; left: 0; right: 0; bottom: 0; height: 9rem; pointer-events: none; z-index: 0; }
.closing__sign canvas { opacity: 0; transition: opacity 1.2s ease; }
.closing__sign canvas.is-on { opacity: 1; }
html[data-kh-depth="live"] .closing { padding-bottom: 10rem; }
@media (min-width: 1024px) { html[data-kh-depth="live"] .closing { padding-bottom: 12rem; } .closing__sign { height: 11rem; } }

/* ---- features: the cells come in one after another; the list under them gets the same care ---- */
.after li { transition: transform .3s cubic-bezier(.2,.8,.2,1); }
@media (prefers-reduced-motion: no-preference) and (hover: hover) { .after li:hover { transform: translateY(-2px); } }

/* ---- the proof panel: the page's one dark object gets a little depth of its own ---- */
.proof { box-shadow: 0 1px 2px rgba(23,32,51,.08), 0 40px 90px -40px rgba(17,26,46,.55), 0 0 0 1px rgba(169,188,255,.06) inset; }

/* every canvas of the page's 3D: decoration only, never in the way of a tap */
canvas.kd-hero, canvas.kd-steps, canvas.kd-vault, canvas.kd-sign { display: block; width: 100%; height: 100%; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .hero__depth, .vault canvas, .closing__sign, .steps > canvas { display: none; } }
@media print { .hero__depth, .vault, .closing__sign, .steps > canvas, .step__3d { display: none !important; } }
@media (max-width: 699px) { .hero__depth { opacity: .75; } }

/* ---- 4 October, second pass: on a phone the demo phone is nearly the screen's full width (8 px from each edge) and
   taller, so the app inside draws at its real size instead of shrunk ---- */
@media (max-width: 599px) {
  .hero__demo { margin-left: calc(8px - var(--gut)); margin-right: calc(8px - var(--gut)); }
  .demo__side, .signedin { margin-left: calc(var(--gut) - 8px); margin-right: calc(var(--gut) - 8px); width: auto; }
  .device--demo { width: 100%; height: min(780px, 88vh); min-height: 560px; padding: 5px; border-radius: 30px; }
  .device--demo .device__screen { border-radius: 25px; }
}

/* ---- 4 October, third pass: on a computer or tablet the demo phone has a real phone's proportions (390 x 800 inside
   the bezel) and grows with the window's height; the app inside is laid out at 390 px and scaled to fit (home-5.js),
   so the whole screen shows, top bar to tab bar, instead of a short, wide, zoomed-in window ---- */
@media (min-width: 600px) {
  .device--demo { --kh-dh: clamp(560px, calc(100vh - 250px), 760px); height: var(--kh-dh); width: calc((var(--kh-dh) - 20px) * .4875 + 20px); max-width: 100%; }
  .device--demo .device__screen { border-top: 16px solid var(--r8-device); }
}

/* ======================================================================================================================
   4 October, fourth pass: the hero demo is three short pages (Tap, Read, Sign) drawn by home-5.js inside the phone,
   from the sample note on this page and the app's own labels. Sizes are in phone pixels: the pages are laid out at a
   phone's width and scaled with the screen, like a picture of the phone. Nothing here fades text in or out (the
   pages slide, chips pop), so every word on screen is at full strength.
   ==================================================================================================================== */
.reel { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; overflow: hidden; background-color: var(--r8-ground); color: var(--r8-ink); font-family: var(--f-body); font-size: 16px; line-height: 1.45; text-align: left; }
.reel[hidden] { display: none; }
.reel.is-fit { inset: auto; left: 0; top: 0; transform-origin: 0 0; }
.reel__bar { flex: none; display: flex; align-items: center; gap: 10px; padding: 16px 18px 14px; background-color: var(--r8-surface); border-bottom: 1px solid var(--r8-line); }
.reel__mark { width: 28px; height: 28px; --mk: var(--r8-primary); }
.reel__name { font: 700 20px/1 var(--f-head); letter-spacing: -.01em; }
.reel__av { margin-left: auto; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background-color: var(--r8-primary-tint); color: var(--r8-primary-ink); font: 700 13px/1 var(--f-mono); }
.reel__pages { position: relative; flex: 1; min-height: 0; }
.rp { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 20px; padding: 22px 18px 20px; background-color: var(--r8-ground); visibility: hidden; transition: visibility 0s linear .55s; }
.rp.is-on { visibility: visible; z-index: 2; transition: none; box-shadow: -18px 0 36px -24px rgba(15,29,53,.35); animation: kh-rp-in .55s cubic-bezier(.2,.8,.2,1) both; }
.rp.is-on.is-first { animation: none; }
@keyframes kh-rp-in { from { transform: translateX(100%); } to { transform: none; } }
.rp__eyebrow { margin: 0; font: 700 32px/1.1 var(--f-head); letter-spacing: -.015em; }
.rp__sub { margin: -12px 0 0; color: var(--r8-ink-2); font-size: 16px; }
.rq { display: grid; gap: 9px; }
.rq__h { margin: 0; font: 650 18px/1.3 var(--f-head); }
.rq__chips { display: flex; gap: 8px; }
.rchip { padding: 11px 17px; border-radius: 999px; border: 1.5px solid var(--r8-line-strong); background-color: var(--r8-surface); font-size: 16px; font-weight: 600; transition: background-color .25s, color .25s, border-color .25s, transform .25s cubic-bezier(.3,1.6,.5,1); }
.rchip.is-on { background-color: var(--r8-primary); color: var(--r8-on-primary); border-color: var(--r8-primary); transform: scale(1.04); }
.rrow { display: flex; align-items: center; gap: 12px; padding: 14px 14px; border: 1.5px solid var(--r8-line); border-radius: 14px; background-color: var(--r8-surface); font-size: 16px; font-weight: 600; transition: border-color .25s, background-color .25s; }
.rrow.is-on { border-color: var(--r8-primary); background-color: var(--r8-primary-tint); }
.rbox { flex: none; width: 24px; height: 24px; border-radius: 6px; border: 1.5px solid var(--r8-line-strong); display: grid; place-items: center; color: var(--r8-on-primary); transition: background-color .2s, border-color .2s; }
.rrow--one .rbox { border-radius: 50%; }
.rbox .ico { width: 16px; height: 16px; transform: scale(0); transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.rrow.is-on .rbox { background-color: var(--r8-primary); border-color: var(--r8-primary); }
.rrow.is-on .rbox .ico { transform: none; }
.rrow--attest { align-items: flex-start; font-weight: 500; font-size: 15px; line-height: 1.4; }
.rp__foot { margin-top: auto; }
.rbtn { display: block; padding: 18px; border-radius: 16px; background-color: var(--r8-primary); color: var(--r8-on-primary); text-align: center; font: 650 17px/1 var(--f-head); transition: transform .14s ease, background-color .3s; }
.rbtn.is-on { transform: scale(.95); }
.rbtn.is-done { background-color: var(--r8-mint-ink); }
/* the fingertip */
.rfinger { position: absolute; left: 0; top: 0; z-index: 5; width: 40px; height: 40px; margin: -20px 0 0 -20px; pointer-events: none; visibility: hidden; }
.rfinger.is-on { visibility: visible; }
.rfinger i { display: block; width: 100%; height: 100%; border-radius: 50%; border: 2px solid var(--r8-primary); background-color: color-mix(in srgb, var(--r8-primary) 16%, transparent); box-shadow: 0 6px 16px -6px rgba(15,29,53,.45); transition: transform .14s ease; }
.rfinger.is-down i { transform: scale(.72); }
/* 2. the note writes itself */
.rnote__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--r8-line); }
.rnote__who { font: 700 19px/1.2 var(--f-head); }
.rnote__date { font-size: 13.5px; color: var(--r8-ink-2); }
.rlabel { margin: 0 0 -10px; font: 700 12px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--r8-ink-2); }
.rfacts { display: flex; flex-wrap: wrap; gap: 6px; min-height: 28px; }
.rfact { visibility: hidden; transform: scale(.6); transition: transform .35s cubic-bezier(.3,1.6,.5,1), visibility 0s linear .35s; }
.rfact.is-on { visibility: visible; transform: none; transition: transform .35s cubic-bezier(.3,1.6,.5,1), visibility 0s; }
.rfact .fact { display: inline-block; padding: 5px 9px; border-radius: 8px; background-color: var(--r8-mint); color: var(--r8-mint-ink); font-size: 14px; font-weight: 600; border: 0; opacity: 1; transform: none; animation: none; }
.rfact .fact b { color: inherit; font-weight: 700; }
.rtext { font-size: 16px; line-height: 1.65; color: var(--r8-ink); }
.rtext p { margin: 0; display: inline; }
.rtext p + p::before { content: ""; display: block; height: 10px; }
.rtext mark { --c: var(--r8-sky); --i: var(--r8-sky-ink); color: inherit; background-color: var(--c); border-radius: 4px; padding: 0 .15em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.rtext mark[data-k="med"] { --c: var(--r8-mint); }
.rtext mark[data-k="meal"] { --c: var(--r8-peach); }
.rtext mark[data-k="place"] { --c: var(--r8-lav); }
.rtext mark[data-k="mood"] { --c: var(--r8-butter); }
.rcaret { display: none; width: 2px; height: 1.1em; margin-left: 1px; vertical-align: -.2em; background-color: var(--r8-primary); }
.rcaret.is-on { display: inline-block; }
.rok { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 600; color: var(--r8-mint-ink); visibility: hidden; transform: translateY(6px); transition: transform .35s ease, visibility 0s linear .35s; }
.rok.is-on { visibility: visible; transform: none; transition: transform .35s ease, visibility 0s; }
.rok .ico { width: 16px; height: 16px; }
/* 3. signed */
.rtext--short { color: var(--r8-ink-2); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.rtext--short p { display: block; }
.rsig { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; padding: 10px 12px; border-radius: 10px; background-color: var(--r8-sunken); color: var(--r8-ink-2); font: 600 13.5px/1.45 var(--f-mono); transition: background-color .3s; }
.rsig.is-on { background-color: var(--r8-mint); color: var(--r8-mint-ink); }
.rseal { position: absolute; left: 50%; bottom: 112px; margin-left: -60px; width: 120px; height: 120px; z-index: 3; border-radius: 50%; display: grid; place-content: center; justify-items: center; gap: 2px; border: 3px solid var(--r8-mint-ink); background-color: var(--r8-surface); color: var(--r8-mint-ink); font: 800 15px/1 var(--f-head); letter-spacing: .04em; text-transform: uppercase; visibility: hidden; transform: rotate(-12deg) scale(1.8); transition: transform .4s cubic-bezier(.3,1.5,.5,1), visibility 0s linear .4s; }
.rseal.is-on { visibility: visible; transform: rotate(-12deg) scale(1); transition: transform .4s cubic-bezier(.3,1.5,.5,1), visibility 0s; }
.rseal .ico { width: 30px; height: 30px; }
/* the steps beside the phone: three tabs with a progress line each, and the step's caption under them */
.tour__tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.tour__go { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .3rem .5rem; padding: .5rem .25rem .25rem; border: 0; background: none; color: var(--r8-ink-2); font: 600 .9375rem/1.2 var(--f-head); text-align: left; cursor: pointer; border-radius: 10px; }
.tour__go .tour__n { width: 1.5rem; height: 1.5rem; font-size: .75rem; background-color: var(--r8-sunken); color: var(--r8-ink); }
.tour__go[aria-current="step"], .tour__go.done { color: var(--r8-ink); }
.tour__go[aria-current="step"] .tour__n, .tour__go.done .tour__n { background-color: var(--r8-primary); color: var(--r8-on-primary); }
.tour__go:focus-visible { outline: 2px solid var(--r8-primary); outline-offset: 2px; }
.tour__bar { grid-column: 1 / -1; position: relative; height: 3px; border-radius: 3px; background-color: var(--r8-line); overflow: hidden; }
.tour__barfill { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background-color: var(--r8-primary); }
.demo[data-state="live"] .tour__tabs, .demo[data-state="loading"] .tour__tabs, .demo[data-state="live"] .tour, .demo[data-state="loading"] .tour { display: none; }
.demo[data-state="still"] .tour li { display: flex; }
.demo[data-state="still"] .tour { display: grid; gap: .5rem; }
.demo[data-state="still"] .tour__bar { display: none; }
@media print { .reel { display: none; } }