/* ═══════════════════════════════════════════════════════════════════════════
   Desktop landing — "a day with Khio". James 2026-09-22: a new desktop landing
   in the shape of poke.com and orchid.ai, where texting is the whole point.

   The top is theirs: a plain nav, a centred serif headline, tactile buttons,
   an iPhone with Khio's texts rising from the bottom. What is ours: the whole
   page is one day. A live sky (canvas, painted by /js/shared/landing-day.js)
   runs from sunrise through a day played inside the phone, into a night of
   the things Khio remembers, and back to dawn at the bottom.

   Type: Crimson Pro for display, Open Runde (the rounded Inter poke.com
   uses) for everything else, SF or Inter inside the phone.

   Text that sits directly on the sky reads its colours from --on-sky*, which
   flip between ink and paper when landing-day.js sets html[data-sky="night"].
   Anything on a paper surface uses the fixed ink tokens instead.

   Tokens first, then one block per section in page order.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --paper: #fbfaf7;
    --ink: #111114;
    --ink-2: rgba(17, 17, 20, .64);
    --ink-3: rgba(17, 17, 20, .45);
    --line: rgba(17, 17, 20, .09);
    --blue: #0a84ff;
    /* The blue iOS 26 draws a sent bubble in, read off a real Khio thread
       (2026-09-27). --blue stays the page's accent. */
    --bub-me: #5ca9f5;
    --display: 'Crimson Pro', Georgia, 'Times New Roman', serif;
    /* Emoji fonts before system-ui, so Windows uses the page's iPhone-like set
       (the subset loaded in landing.html) instead of its own. */
    --sans: 'Open Runde', 'Inter', 'Apple Color Emoji', 'Noto Color Emoji', system-ui, sans-serif;
    /* Messages is SF on a Mac and iPhone; everywhere else Inter stands in. */
    --imsg: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
    --gutter: clamp(20px, 5vw, 72px);
    --ease: cubic-bezier(.22, 1, .36, 1);

    --on-sky: #111114;
    --on-sky-2: rgba(17, 17, 20, .62);
    --on-sky-3: rgba(17, 17, 20, .38);
    --bub-in: #e9e9eb;
    --bub-in-ink: #000000;
    --card: #ffffff;
    --card-ink: #1c1c1e;
    --card-2: rgba(28, 28, 30, .55);
    --card-line: rgba(28, 28, 30, .08);
    --scr-bg: #ffffff;
    --scr-bg-0: rgba(255, 255, 255, 0);
    --scr-ink: #000000;
    --scr-stamp: rgba(60, 60, 67, .5);
    --scr-line: rgba(0, 0, 0, .35);
    --scr-placeholder: rgba(60, 60, 67, .32);
    --glass: rgba(255, 255, 255, .7);
    --glass-edge: rgba(255, 255, 255, .95);
    --tail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 22'%3E%3Cpath d='M0 0L7 0C7 11 11 18 19.5 21.6C12 22.6 5 21 0 17Z'/%3E%3C/svg%3E");
}
/* After dusk: light type on the sky, and the phone goes to dark mode the way
   a real one does at night. */
html[data-sky="night"] {
    --on-sky: #f5f4f0;
    --on-sky-2: rgba(245, 244, 240, .7);
    --on-sky-3: rgba(245, 244, 240, .4);
    --bub-in: #262629;
    --bub-in-ink: #ffffff;
    --card: #1c1c1e;
    --card-ink: #f2f2f7;
    --card-2: rgba(242, 242, 247, .55);
    --card-line: rgba(255, 255, 255, .1);
    --scr-bg: #000000;
    --scr-bg-0: rgba(0, 0, 0, 0);
    --scr-ink: #ffffff;
    --scr-stamp: rgba(235, 235, 245, .45);
    --scr-line: rgba(255, 255, 255, .4);
    --scr-placeholder: rgba(235, 235, 245, .32);
    --glass: rgba(58, 58, 62, .62);
    --glass-edge: rgba(255, 255, 255, .14);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.kd-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── The sky ─────────────────────────────────────────────────────────────── */
.kd-sky { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
main, .kd-footer { position: relative; z-index: 1; }
/* The sky goes to black night under the footer (landing-day.js), so the
   footer's type turns light with the rest of the night type. */
html[data-sky="night"] .kd-footer { --ink: #f5f4f0; --ink-2: rgba(245, 244, 240, .64); --ink-3: rgba(245, 244, 240, .5); }

/* ── Buttons, taken from poke.com: a lit key rather than a flat pill ──────── */
/* The green Messages tile on the main button: the whole pitch in one glyph. */
.kd-imsg { flex: none; width: 20px; height: 20px; margin-left: -3px; border-radius: 6px; background: linear-gradient(180deg, #5cf27d, #12b43f); display: grid; place-items: center; }
.kd-imsg svg { width: 12px; height: 12px; }

/* ── Nav ───────────────────────────────────────────────────────────────────
   The bar itself, its menu and the footer live in site-chrome.css since
   2026-09-24 (they are the whole site's now). What stays here is this page's
   scroll story: it slides away while scrolling down so it never covers the
   phone, and takes the sky's tone (landing-day.js sets .is-scrolled,
   .is-hidden and data-tone). */
.kd-nav.is-hidden { transform: translateY(-100%); }
.kd-nav[data-tone="dark"] { color: #f5f4f0; }
.kd-nav[data-tone="dark"].is-scrolled { background: rgba(14, 16, 28, .55); box-shadow: 0 1px 0 rgba(255, 255, 255, .07); }
.kd-nav[data-tone="dark"] .kd-brand img { filter: invert(1); }
.kd-nav[data-tone="dark"] .kd-btn { color: #1c1c1c; background: linear-gradient(#f4f3f1 0%, #edecea 65%, #d9d9d9 100%); box-shadow: inset 0 0 0 1.25px #c9c7c4, inset 0 0 12px #fff; }

/* ── Hero, then a day with Khio: one sticky stage ────────────────────────
   The stage never scrolls itself. landing-day.js moves the hero copy up with
   the scroll, slides the phone from under the headline into the right-hand
   column, fades the day copy in, then plays the thread. */
.kd-story { position: relative; height: 400vh; }
.kd-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; }

.kd-hero { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; padding: 136px var(--gutter) 0; text-align: center; }
.kd-hero h1 { font-family: var(--display); font-weight: 500; font-size: clamp(52px, 5.2vw, 80px); line-height: 1; letter-spacing: -.025em; color: var(--on-sky); }
/* The turning word. Its box eases to each new word's width, so the centred
   line glides instead of jumping; the words roll through it on transform
   and opacity only, which stay cheap to draw (a blur here stuttered). */
.kd-rot { position: relative; display: inline-block; white-space: nowrap; text-align: left; transition: width .7s var(--ease); }
.kd-rot-w { display: inline-block; font-style: italic; }
.kd-rot-w i { font-style: normal; }
.kd-rot-w.is-in { animation: kdWordIn .7s var(--ease) both; }
.kd-rot-w.is-out { position: absolute; top: 0; left: 0; animation: kdWordOut .45s var(--ease) both; }
@keyframes kdWordIn { from { opacity: 0; transform: translateY(.4em); } }
@keyframes kdWordOut { to { opacity: 0; transform: translateY(-.4em); } }
.kd-hero-cta { display: flex; justify-content: center; margin-top: 30px; }
/* On load the hero arrives in order: the bar, the two headline lines
   blurring in, the button, then the phone rising from below. */
.kd-js .kd-nav { animation: kdDrop .8s var(--ease) both; }
.kd-js .kd-l1, .kd-js .kd-l2 { display: inline-block; animation: kdBlurIn 1.1s var(--ease) .1s both; }
.kd-js .kd-l2 { animation-delay: .28s; }
.kd-js .kd-hero-cta { animation: kdUp .9s var(--ease) .5s both; }
.kd-js .kd-phone-col { animation: kdUp 1.3s var(--ease) .55s both; }
@keyframes kdDrop { from { opacity: 0; transform: translateY(-10px); } }
@keyframes kdBlurIn { from { opacity: 0; filter: blur(12px); transform: translateY(14px); } }
@keyframes kdUp { from { opacity: 0; transform: translateY(70px); } }

/* The day: the clock and one line on the left, the phone on the right. */
.kd-grid { position: relative; height: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(40px, 6vw, 110px); }
.kd-js .kd-day-copy { opacity: 0; }
.kd-clock { display: flex; align-items: baseline; gap: .1em; font-family: var(--display); font-weight: 400; font-size: clamp(92px, 11vw, 172px); line-height: .9; letter-spacing: -.035em; color: var(--on-sky); transition: color .6s ease; }
/* Each digit gets a fixed box so the clock doesn't shuffle sideways as it
   runs; the display face's figures are proportional. */
.kd-clock-hm { display: inline-flex; }
.kd-clock-hm i { display: inline-block; width: .56em; font-style: normal; text-align: center; }
.kd-clock-hm i.is-colon { width: .26em; }
.kd-clock-ap { font-size: .26em; font-weight: 500; letter-spacing: -.01em; }
.kd-day-texts { position: relative; min-height: 104px; margin-top: 26px; }
.kd-day-text { max-width: 460px; font-family: var(--display); font-weight: 500; font-size: clamp(34px, 3.2vw, 48px); line-height: 1.05; letter-spacing: -.02em; color: var(--on-sky); text-wrap: balance; transition: color .6s ease; }
.kd-js .kd-day-text { position: absolute; top: 0; left: 0; opacity: 0; transform: translateY(18px); pointer-events: none; transition: opacity .5s var(--ease), transform .7s var(--ease), color .6s ease; }
.kd-js .kd-day-text.is-past { transform: translateY(-18px); }
.kd-js .kd-day-text.is-on { opacity: 1; transform: none; }
.kd-rail { display: flex; align-items: center; gap: 8px; margin-top: 30px; }
.kd-rail button { position: relative; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: var(--on-sky); opacity: .28; cursor: pointer; transition: width .45s var(--ease), opacity .3s, background-color .6s; }
.kd-rail button::before { content: ''; position: absolute; inset: -10px -4px; }
.kd-rail button:hover { opacity: .6; }
.kd-rail button.is-on { width: 28px; opacity: 1; }

/* ── The phone ───────────────────────────────────────────────────────────
   The casing is the real iPhone render the site has used since 2026-07-29
   (/images/khio-iphone-frame-cutout.png: 575 x 1158, the screen knocked out
   to transparent, the island and buttons painted in), laid over a live
   screen. Screen rect measured off the render: 495 x 1078 at (40, 23). The
   screen is a size container and everything inside it is in cqw of the
   screen's width, so the whole phone scales as one. It is as tall as the
   window allows, since the nav gets out of its way. */
.kd-phone-col { display: flex; justify-content: center; }
.kd-phone { position: relative; z-index: 3; text-align: left; transform-origin: 50% 0; }
.kd-device { --dev-w: clamp(260px, calc((100vh - 40px) * .4965), 470px); position: relative; width: var(--dev-w); aspect-ratio: 575 / 1158; }
/* The render's baked-in shadow is still about 4% opaque where the image
   stops, which draws a faint box on a gradient sky, so its edge is faded. */
.kd-device::after { content: ''; position: absolute; inset: 0; z-index: 6; pointer-events: none; background: url('/images/khio-iphone-frame-cutout.png') center / 100% 100% no-repeat;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 3%, #000 97%, transparent), linear-gradient(to bottom, transparent, #000 .4%, #000 96.6%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent, #000 3%, #000 97%, transparent), linear-gradient(to bottom, transparent, #000 .4%, #000 96.6%, transparent);
    mask-composite: intersect; }
.kd-screen { position: absolute; left: 6.9565%; top: 1.9862%; width: 86.087%; height: 93.0915%; overflow: hidden; border-radius: 9.5% / 4.6%; container-type: inline-size;
    /* The mask is load-bearing: Chrome and Safari do not apply a rounded
       overflow clip to descendants with backdrop-filter (the glass buttons),
       so without it their corners poke out past the screen's rounding. A mask
       clips every descendant (same fix as khio-phone-thread.css). */
    -webkit-mask-image: linear-gradient(#000, #000); mask-image: linear-gradient(#000, #000); background: var(--scr-bg); color: var(--scr-ink); font-family: var(--imsg); letter-spacing: -.012em; transition: background-color .6s ease, color .6s ease; }

.kd-status { position: absolute; top: 2.4cqw; left: 0; right: 0; z-index: 4; height: 11.2cqw; display: flex; align-items: center; justify-content: space-between; padding: 0 7cqw 0 11cqw; font-size: 4.2cqw; font-weight: 600; }
.kd-status-icons { display: flex; align-items: center; gap: 1.3cqw; }
.kd-status-icons svg:first-child { width: 4.7cqw; height: 3.1cqw; }
.kd-status-icons svg:nth-child(2) { width: 4.4cqw; height: 3.3cqw; }
.kd-battery { position: relative; width: 7cqw; height: 3.5cqw; border-radius: 1.1cqw; background: currentColor; display: grid; place-items: center; }
.kd-battery b { font-style: normal; font-size: 2.5cqw; font-weight: 700; letter-spacing: -.02em; color: var(--scr-bg); transition: color .6s ease; }
.kd-battery::after { content: ''; position: absolute; top: 50%; right: -.95cqw; width: .45cqw; height: 1.1cqw; border-radius: 0 .4cqw .4cqw 0; background: var(--scr-line); transform: translateY(-50%); }

/* Glass controls, the way Messages draws them now. The fades behind the
   header and the input bar let the thread pass under them. */
.kd-glass { background: var(--glass); -webkit-backdrop-filter: blur(3cqw) saturate(1.8); backdrop-filter: blur(3cqw) saturate(1.8); box-shadow: 0 .8cqw 3cqw rgba(0, 0, 0, .08), 0 0 0 .25cqw rgba(0, 0, 0, .03), inset 0 .3cqw .5cqw var(--glass-edge); transition: background-color .6s ease; }
.kd-glass.is-round { width: 10.8cqw; height: 10.8cqw; border-radius: 50%; display: grid; place-items: center; }
.kd-glass.is-round svg { width: 4.6cqw; height: 4.6cqw; }
/* Back, with the unread count in a dark badge, as Messages draws it. */
.kd-back { height: 10.8cqw; padding: 0 2.2cqw 0 3.2cqw; border-radius: 999px; display: flex; align-items: center; gap: 1.8cqw; }
.kd-back svg { width: 2.4cqw; height: 4cqw; }
.kd-back b { min-width: 5.6cqw; height: 5.6cqw; padding: 0 1.5cqw; border-radius: 999px; display: grid; place-items: center; background: #1a1a1a; color: #fff; font-size: 3cqw; font-weight: 600; transition: background-color .6s ease, color .6s ease; }
html[data-sky="night"] .kd-back b { background: #f2f2f7; color: #111114; }
.kd-chat-head { position: absolute; top: 15cqw; left: 3.6cqw; right: 3.6cqw; z-index: 3; display: grid; grid-template-columns: auto 1fr auto; align-items: start; }
.kd-chat-head::before { content: ''; position: absolute; top: -15cqw; left: -3.6cqw; right: -3.6cqw; z-index: -1; height: 52cqw; background: linear-gradient(var(--scr-bg) 72%, var(--scr-bg-0)); transition: background .6s ease; }
.kd-chat-contact { justify-self: center; display: flex; flex-direction: column; align-items: center; }
.kd-avatar { width: 17cqw; height: 17cqw; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 .25cqw rgba(0, 0, 0, .05); }
.kd-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kd-name { position: relative; margin-top: -3.2cqw; display: inline-flex; align-items: center; gap: .9cqw; padding: 1.1cqw 2.8cqw; border-radius: 999px; font-size: 3.9cqw; font-weight: 700; }
.kd-name svg { width: 1.6cqw; height: 2.5cqw; opacity: .45; }
.kd-compose { position: absolute; left: 3.6cqw; right: 3.6cqw; bottom: 7.6cqw; z-index: 3; display: flex; align-items: center; gap: 2.2cqw; }
.kd-compose::before { content: ''; position: absolute; left: -3.6cqw; right: -3.6cqw; bottom: -7.6cqw; z-index: -1; height: 30cqw; background: linear-gradient(to top, var(--scr-bg) 50%, var(--scr-bg-0)); transition: background .6s ease; }
.kd-field { flex: 1; height: 10.8cqw; display: flex; align-items: center; justify-content: space-between; padding: 0 3.4cqw 0 4.2cqw; border-radius: 999px; font-size: 4cqw; color: var(--scr-placeholder); }
.kd-field svg { width: 4.2cqw; height: 4.2cqw; }
.kd-home { position: absolute; bottom: 2.3cqw; left: 50%; z-index: 4; width: 34cqw; height: 1.35cqw; border-radius: 1cqw; background: var(--scr-ink); transform: translateX(-50%); transition: background-color .6s ease; }

/* The thread, top-anchored like a short conversation in Messages until it
   fills the screen; landing-day.js then slides it up under the glass header
   as each message lands. */
.kd-thread-view { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.kd-thread-inner { display: flex; flex-direction: column; gap: 1.6cqw; padding: 43cqw 3.6cqw 25cqw; transition: transform .5s cubic-bezier(.2, .9, .3, 1); }
.kd-stamp { padding: 2.2cqw 0 .4cqw; text-align: center; font-size: 3cqw; color: var(--scr-stamp); transition: color .6s ease; }
.kd-stamp b { font-weight: 600; }
.kd-msg { position: relative; width: fit-content; max-width: 74%; padding: 2.2cqw 3.6cqw; border-radius: 5.4cqw; font-size: 4.2cqw; line-height: 1.3; overflow-wrap: anywhere; transition: background-color .6s ease, color .6s ease; }
.kd-msg.them { align-self: flex-start; background: var(--bub-in); color: var(--bub-in-ink); transform-origin: 0 100%; }
.kd-msg.me { align-self: flex-end; background: var(--bub-me); color: #fff; transform-origin: 100% 100%; }
/* Runs from one sender sit tight, like Messages. */
.kd-msg.them + .kd-msg.them, .kd-msg.me + .kd-msg.me { margin-top: -1.1cqw; }
/* Modern Messages draws a tail only on the last bubble of a run. The tail is
   a mask over the bubble's own colour, so it follows it into dark mode and
   scales with the phone. */
.kd-msg.tail::after { content: ''; position: absolute; bottom: 0; width: 5cqw; height: 5.6cqw; background: inherit; -webkit-mask: var(--tail) center / 100% 100% no-repeat; mask: var(--tail) center / 100% 100% no-repeat; }
.kd-msg.tail.me::after { right: -1.5cqw; }
.kd-msg.tail.them::after { left: -1.5cqw; transform: scaleX(-1); }
.kd-tapback { position: absolute; top: -4.4cqw; left: -4.4cqw; width: 7.8cqw; height: 7.8cqw; border-radius: 50%; background: var(--bub-in); display: grid; place-items: center; font-size: 3.5cqw; box-shadow: 0 0 0 .7cqw var(--scr-bg); transition: background-color .6s ease, box-shadow .6s ease; }
.kd-msg.has-tapback { margin-top: 2.8cqw; }
.kd-receipt { display: none; align-self: flex-end; margin: -.6cqw 1cqw 0 0; font-size: 2.9cqw; font-weight: 500; color: var(--scr-stamp); }
.kd-receipt.is-in { display: block; }

.kd-js .kd-thread-inner > .kd-stamp, .kd-js .kd-thread-inner > .kd-msg { display: none; }
.kd-js .kd-thread-inner > .kd-stamp.is-in, .kd-js .kd-thread-inner > .kd-msg.is-in { display: block; }
.kd-js .kd-thread-inner > .kd-msg.is-in { animation: kdPop .44s cubic-bezier(.2, 1.25, .32, 1) both; }
@keyframes kdPop { from { opacity: 0; transform: translateY(2.6cqw) scale(.86); } to { opacity: 1; transform: none; } }

.kd-typing { display: none; align-self: flex-start; align-items: center; gap: 1.1cqw; padding: 3.2cqw 3.8cqw; border-radius: 5.4cqw; background: var(--bub-in); }
.kd-typing.is-in { display: flex; animation: kdPop .3s cubic-bezier(.2, 1.25, .32, 1) both; }
.kd-typing i { width: 1.9cqw; height: 1.9cqw; border-radius: 50%; background: currentColor; color: var(--bub-in-ink); opacity: .4; animation: kdDot 1.2s ease-in-out infinite; }
.kd-typing i:nth-child(2) { animation-delay: .16s; }
.kd-typing i:nth-child(3) { animation-delay: .32s; }
@keyframes kdDot { 30% { opacity: .9; transform: translateY(-.7cqw); } 60%, 100% { opacity: .4; transform: none; } }

/* Cards Khio texts: a link preview, the nutrition card, a booking, a draft. */
.kd-msg.is-card { width: 70%; padding: 0; overflow: hidden; background: var(--card); color: var(--card-ink); box-shadow: 0 0 0 1px var(--card-line); }
.kd-link { display: block; }
.kd-link-art { position: relative; display: block; height: 29cqw; background: linear-gradient(135deg, #f6d9c4, #c9d3f2); overflow: hidden; }
.kd-link-art i { position: absolute; left: 50%; top: 50%; font-style: normal; width: 44cqw; height: 20cqw; border-radius: 3cqw; background: #fff; box-shadow: 0 2cqw 5cqw -2.6cqw rgba(15, 23, 42, .45); }
.kd-link-art i:nth-child(1) { transform: translate(-50%, -50%) translate(3.4cqw, -2.8cqw) rotate(6deg); opacity: .7; }
.kd-link-art i:nth-child(2) { transform: translate(-50%, -50%) translate(1.7cqw, -1.4cqw) rotate(3deg); opacity: .85; }
.kd-link-art i:nth-child(3) { transform: translate(-50%, -50%); display: grid; place-items: center; padding: 2.4cqw 3.8cqw; }
.kd-link-art b { font-size: 3.2cqw; font-weight: 600; line-height: 1.3; color: #1c1c1e; text-align: center; }
.kd-link-meta { display: flex; flex-direction: column; padding: 2.3cqw 3.3cqw 2.5cqw; background: var(--bub-in); transition: background-color .6s ease; }
.kd-link-meta b { font-size: 3.5cqw; font-weight: 600; }
.kd-link-meta small { font-size: 3.1cqw; color: var(--card-2); }

.kd-nutri { display: flex; flex-direction: column; gap: 2.5cqw; padding: 3.3cqw 3.8cqw 3.5cqw; }
.kd-nutri-head { display: flex; align-items: center; justify-content: space-between; }
.kd-nutri-head b { font-size: 3.5cqw; font-weight: 700; }
.kd-nutri-head em { padding: .8cqw 2cqw; border-radius: 999px; background: rgba(48, 209, 88, .15); color: #1d9e43; font-size: 2.7cqw; font-style: normal; font-weight: 600; }
.kd-nutri-big b { font-size: 6.8cqw; font-weight: 800; letter-spacing: -.03em; }
.kd-nutri-big small { margin-left: 1.2cqw; font-size: 3.3cqw; color: var(--card-2); }
.kd-nutri-bars { display: flex; flex-direction: column; gap: 1.7cqw; }
.kd-nutri-bars > span { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2.5cqw; }
.kd-nutri-bars i { position: relative; height: 1.5cqw; border-radius: 1cqw; background: var(--card-line); overflow: hidden; }
.kd-nutri-bars i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: calc(var(--w) * 100%); border-radius: inherit; background: var(--c); }
.kd-nutri-bars small { min-width: 19cqw; font-size: 2.9cqw; color: var(--card-2); }

.kd-book { display: flex; flex-direction: column; gap: .8cqw; padding: 3.3cqw 3.8cqw 3.5cqw; }
.kd-book-ok { display: inline-flex; align-items: center; gap: 1.2cqw; width: fit-content; margin-bottom: 1.4cqw; padding: .8cqw 2.4cqw .8cqw 1.6cqw; border-radius: 999px; background: rgba(48, 209, 88, .15); color: #1d9e43; font-size: 2.9cqw; font-weight: 600; }
.kd-book-ok svg { width: 3.3cqw; height: 3.3cqw; }
.kd-book b { font-size: 5.2cqw; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.kd-book small { font-size: 3.4cqw; color: var(--card-2); }
.kd-book-cal { margin-top: 2.1cqw; padding-top: 2.1cqw; border-top: 1px solid var(--card-line); font-size: 3.1cqw; color: var(--card-2); }

.kd-draft { display: flex; flex-direction: column; gap: 1.4cqw; padding: 3.1cqw 3.8cqw 3.3cqw; border-left: .8cqw solid var(--blue); }
.kd-draft small { font-size: 2.9cqw; font-weight: 600; color: var(--card-2); }
.kd-draft span { font-size: 3.8cqw; line-height: 1.38; }

/* ── Memory: the night sky ───────────────────────────────────────────────── */
.kd-memory { position: relative; padding: 24vh var(--gutter) 26vh; text-align: center; color: #f5f4f0; }
.kd-memory h2 { font-family: var(--display); font-weight: 500; font-size: clamp(50px, 5.2vw, 80px); line-height: 1; letter-spacing: -.025em; }
.kd-memory h2 span { color: rgba(245, 244, 240, .5); }
.kd-constellation { position: relative; width: min(1140px, 100%); aspect-ratio: 100 / 44; margin: 9vh auto 0; }
.kd-constellation svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* The box keeps the viewBox's 100:44 ratio, so user units scale evenly and a
   .1 stroke is about a pixel. No non-scaling-stroke: it would measure the dash
   in screen pixels and break the pathLength="1" draw-in. */
.kd-constellation line { stroke: rgba(210, 222, 255, .38); stroke-width: .1; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s var(--ease); }
.kd-constellation.is-in line { stroke-dashoffset: 0; }
.kd-constellation.is-in line:nth-child(n+4) { transition-delay: .35s; }
.kd-constellation.is-in line:nth-child(n+7) { transition-delay: .7s; }
.kd-star { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) / 44 * 100%); display: flex; align-items: center; gap: 12px; transform: translate(-7px, -50%); white-space: nowrap; }
.kd-star > i { position: relative; flex: none; width: 14px; height: 14px; display: grid; place-items: center; }
.kd-star > i::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 2px rgba(255, 255, 255, .7), 0 0 26px 8px rgba(150, 180, 255, .28); animation: kdTwinkle 4s ease-in-out infinite; animation-delay: calc(var(--x) * -.13s); }
@keyframes kdTwinkle { 50% { opacity: .55; transform: scale(.8); } }
.kd-star.is-bright > i::before { width: 7px; height: 7px; box-shadow: 0 0 12px 3px rgba(255, 255, 255, .8), 0 0 34px 10px rgba(150, 180, 255, .32); }
.kd-star > span { font-family: var(--display); font-style: italic; font-size: clamp(16px, 1.4vw, 19px); color: rgba(245, 244, 240, .9); }
.kd-star::after { content: attr(data-when); position: absolute; top: calc(100% + 4px); left: 26px; font-size: 11.5px; color: rgba(245, 244, 240, .55); opacity: 0; transform: translateY(-3px); transition: opacity .3s, transform .3s; pointer-events: none; }
.kd-star:hover::after { opacity: 1; transform: none; }
.kd-star:hover > i::before { transform: scale(1.6); }
.kd-js .kd-star { opacity: 0; transition: opacity .9s ease; }
.kd-js .kd-constellation.is-in .kd-star { opacity: 1; }
.kd-constellation.is-in .kd-star:nth-of-type(3n+2) { transition-delay: .3s; }
.kd-constellation.is-in .kd-star:nth-of-type(3n) { transition-delay: .6s; }

/* ── The paper sheet ─────────────────────────────────────────────────────── */
.kd-sheet { position: relative; margin: 0 clamp(10px, 1.4vw, 22px); border-radius: clamp(28px, 3.2vw, 48px); background: var(--paper); box-shadow: 0 -40px 90px -50px rgba(0, 0, 0, .7); overflow: hidden; }
/* Section titles in poke.com's form: the second line goes grey, not italic. */
.kd-sec-title { font-family: var(--display); font-weight: 500; font-size: clamp(46px, 4.8vw, 72px); line-height: 1.02; letter-spacing: -.025em; }
.kd-sec-title span { color: var(--ink-3); }
.kd-js .kd-rise { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform 1s var(--ease); }
.kd-js .kd-rise.is-in { opacity: 1; transform: none; }
.kd-cta .kd-contact.kd-rise { transition-delay: .15s; }

/* Everyday feature examples are styled in landing-features.css. */
/* And a lot more: a centred finale, one cloud of what else Khio does and
   the way to all of it. */
.kd-more-end { display: flex; flex-direction: column; align-items: center; gap: 28px; padding: clamp(64px, 8vw, 104px) 0 clamp(40px, 5vw, 60px); text-align: center; }
.kd-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 720px; }
.kd-chips li { padding: 10px 18px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 6px 16px -12px rgba(15, 23, 42, .3); font-size: 15px; font-weight: 500; color: var(--ink); }

/* ── Khio AI on the web ──────────────────────────────────────────────────── */
.kd-web { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(40px, 5vw, 80px); max-width: 1240px; margin: 0 auto; padding: 90px var(--gutter) clamp(110px, 12vw, 170px); }
.kd-web-lede { margin: 18px 0 0; max-width: 46ch; font-size: 17px; line-height: 1.5; color: var(--ink-2); }
.kd-web-list { margin: 30px 0 32px; border-top: 1px solid var(--line); }
.kd-web-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--ink-2); }
.kd-web-list b { font-family: var(--display); font-size: 21px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }

.kd-window-wrap { position: relative; padding: 0 0 44px 36px; }
.kd-window { border-radius: 18px; background: #f7f6f3; box-shadow: 0 0 0 1px rgba(15, 23, 42, .08), 0 50px 90px -46px rgba(15, 23, 42, .55); overflow: hidden; font-family: 'Manrope', var(--sans); }
.kd-window-bar { display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; background: #efede8; border-bottom: 1px solid var(--line); }
.kd-window-bar i { width: 11px; height: 11px; border-radius: 50%; background: #d9d6cf; }
.kd-window-bar span { margin: 0 auto; transform: translateX(-24px); padding: 4px 16px; border-radius: 8px; background: rgba(255, 255, 255, .8); font-size: 12px; color: var(--ink-3); }
.kd-window-body { display: grid; grid-template-columns: 150px 1fr; min-height: 400px; }
.kd-app-side { display: flex; flex-direction: column; gap: 3px; padding: 14px 10px; background: #fff; border-right: 1px solid var(--line); }
.kd-app-brand { padding: 2px 8px 12px; font-size: 13px; font-weight: 700; }
.kd-app-side span:not(.kd-app-brand) { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; font-size: 12.5px; font-weight: 500; color: #3a3f4b; }
.kd-app-side span.is-on { background: #f3f2ee; box-shadow: 0 0 0 1px var(--line); }
.kd-app-side svg { width: 15px; height: 15px; flex: none; }
.kd-app-main { display: flex; flex-direction: column; gap: 14px; padding: 22px 24px 18px; }
.kd-app-q { align-self: flex-end; max-width: 78%; padding: 9px 14px; border-radius: 16px 16px 4px 16px; background: #fff; box-shadow: 0 0 0 1px var(--line); font-size: 13px; font-weight: 500; line-height: 1.4; }
.kd-app-a { display: flex; flex-direction: column; gap: 10px; font-size: 13px; line-height: 1.55; color: #2a2f3a; }
.kd-app-points { display: flex; flex-direction: column; gap: 6px; }
.kd-app-points span { display: flex; align-items: flex-start; gap: 9px; }
.kd-app-points i { flex: none; width: 19px; height: 19px; margin-top: 1px; border-radius: 50%; background: #e8eefc; color: #2f5fd0; display: grid; place-items: center; font: normal 700 10.5px var(--sans); }
.kd-app-src { display: flex; flex-wrap: wrap; gap: 6px; }
.kd-app-src i { font-style: normal; padding: 4px 10px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--line); font-size: 11px; color: var(--ink-3); }
.kd-app-compose { margin-top: auto; display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 6px 0 16px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 10px 24px -18px rgba(15, 23, 42, .4); font-size: 12.5px; color: var(--ink-3); }
.kd-app-compose i { width: 32px; height: 32px; border-radius: 50%; background: #2563eb; }

/* A flashcard from a study set, flipping on its own, overlapping the window. */
.kd-flash { position: absolute; left: 0; bottom: -6px; width: 236px; height: 150px; perspective: 900px; transform: rotate(-5deg); }
.kd-flash-card { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; animation: kdFlip 8s var(--ease) infinite; }
@keyframes kdFlip { 0%, 42% { transform: rotateY(0); } 50%, 92% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } }
.kd-flash-face { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 18px 20px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 30px 50px -26px rgba(15, 23, 42, .6); -webkit-backface-visibility: hidden; backface-visibility: hidden; font-family: var(--display); font-size: 19px; font-weight: 500; line-height: 1.2; letter-spacing: -.01em; }
.kd-flash-face small { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.kd-flash-face.is-back { transform: rotateY(180deg); background: #111114; color: #fbfaf7; }
.kd-flash-face.is-back small { color: rgba(251, 250, 247, .55); }

/* ── Last call: pre-dawn ─────────────────────────────────────────────────── */
.kd-cta { position: relative; display: flex; flex-direction: column; align-items: center; padding: 24vh var(--gutter) 14vh; text-align: center; }
.kd-cta h2 { font-family: var(--display); font-weight: 500; font-size: clamp(54px, 6vw, 92px); line-height: 1; letter-spacing: -.025em; color: var(--on-sky); transition: color .6s ease; }
.kd-cta h2 span { color: var(--on-sky-2); transition: color .6s ease; }
.kd-contact { width: min(360px, 100%); margin-top: 48px; display: flex; flex-direction: column; align-items: center; padding: 28px 28px 22px; border-radius: 32px; background: rgba(251, 250, 247, .9); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .5) inset, 0 40px 80px -40px rgba(10, 14, 40, .7); color: var(--ink); }
.kd-contact-avatar { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; display: block; box-shadow: 0 0 0 1px var(--line), 0 10px 26px -12px rgba(15, 23, 42, .4); }
.kd-contact-avatar img { display: block; width: 100%; height: 100%; }
.kd-contact-name { margin-top: 12px; font-family: var(--display); font-size: 28px; font-weight: 600; letter-spacing: -.025em; line-height: 1; }
.kd-contact-kind { margin-top: 5px; font-size: 13px; color: var(--ink-3); }
.kd-contact-qr { width: 100%; min-height: 60px; margin-top: 18px; font-size: 14px; color: var(--ink-3); }
/* text-khio-qr.js renders the code, the number and a copy button in here with
   its own .ktq-* styles; these only fit them to the card. */
.kd-contact-qr .ktq-qr { width: 188px; height: 188px; margin: 0 auto 14px; border-color: var(--line); border-radius: 18px; }
.kd-contact-qr .ktq-or { font-size: 11px; margin-bottom: 8px; }
.kd-contact-qr .ktq-digits { font-family: var(--display); font-size: 23px; font-weight: 600; letter-spacing: -.015em; color: var(--ink); }
.kd-contact-hint { margin-top: 12px; font-size: 13px; color: var(--ink-3); }
.kd-cta-alt { margin-top: 26px; font-size: 15px; font-weight: 500; }
.kd-cta-alt a { color: var(--on-sky); border-bottom: 1px solid currentColor; padding-bottom: 1px; transition: color .6s ease; }

/* ── Footer ────────────────────────────────────────────────────────────────
   Under the night the wordmark is cut into the dark, not printed on it
   (James 2026-09-29: the grey type read as "above the background"): a face
   near black that hides the stars behind it, shaded inside the top of each
   stroke and catching starlight inside the bottom, the way a carved letter
   takes light from above. The #kdCarve filter is in landing.html. The paper
   pages keep site-chrome.css's pressed-ink mark. */
html[data-sky="night"] .kd-footer-mark { opacity: 1; color: #12141d; filter: url(#kdCarve); }

/* ── Narrow windows and tablets ──────────────────────────────────────────── */
@media (max-width: 1180px) {
    .kd-flash { width: 204px; height: 132px; }
    .kd-flash-face { font-size: 17px; }
}
@media (max-height: 780px) {
    .kd-hero { padding-top: 112px; }
}
@media (max-width: 900px) {
    /* Stacked: the clock and line on top, the phone under them, centred. */
    .kd-grid { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); align-items: start; justify-items: center; gap: 18px; padding-top: 88px; text-align: center; }
    .kd-day-copy { width: 100%; max-width: 560px; }
    .kd-clock { justify-content: center; font-size: 60px; }
    .kd-day-texts { min-height: 64px; margin-top: 10px; }
    .kd-js .kd-day-text { left: 0; right: 0; margin: 0 auto; }
    .kd-day-text { font-size: 26px; }
    .kd-rail { display: none; }
    .kd-device { --dev-w: clamp(220px, calc((100vh - 300px) * .4965), 340px); }
    .kd-web { grid-template-columns: 1fr; }
    .kd-star > span { font-size: 14px; }
    .kd-star::after { display: none; }
}
@media (max-width: 640px) {
    .kd-constellation { aspect-ratio: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 22px; }
    .kd-constellation svg { display: none; }
    .kd-star { position: static; transform: none; }
    .kd-window-body { grid-template-columns: 1fr; }
    .kd-app-side { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .kd-js .kd-day-text, .kd-js .kd-rise, .kd-js .kd-star, .kd-constellation line, .kd-thread-inner, .kd-nav, .kd-js .kd-feat-demo .kd-im-row { transition: none; }
    .kd-js .kd-nav, .kd-js .kd-l1, .kd-js .kd-l2, .kd-js .kd-hero-cta, .kd-js .kd-phone-col,
    .kd-js .kd-thread-inner > .kd-msg.is-in, .kd-typing.is-in, .kd-rot-w, .kd-star > i::before, .kd-live-bar i, .kd-flash-card, .kd-feat-demo.is-in .kd-audio .kd-wave i { animation: none; }
}