/* public/css/site.css
   trykhio.com, Khio Match's front door (public/index.html) and its three
   policy pages, which share the bar and footer.
   The landing is a stack of chapters. Each chapter pins its photo (.tk-ch-bg is sticky,
   one screen tall, with a negative bottom margin so the content scrolls over
   it), and every chapter after the first slides up over the one before with
   a torn zigzag top edge. Over every photo: a tint and a fine dot screen.
   Type: Instrument Serif for display, Instrument Sans for body, Caveat Brush
   for the hand-written accent. Mobile first; the wide layout starts at
   761px, and the three-up lists have a phone-only block of their own. The
   page is dark by design, so it ignores the system dark setting. */

/* ── Tokens ──────────────────────────────────────────────────────────── */
:root {
    --tk-ink: #0d0b10;
    --tk-white: #ffffff;
    --tk-soft: rgba(255, 255, 255, .78);
    --tk-pink: #ff4fa3;
    --tk-gold: #ffc94a;
    --tk-blue: #6fb6ff;
    --tk-glass: rgba(255, 255, 255, .12);
    --tk-glass-2: rgba(255, 255, 255, .2);
    --tk-glass-line: rgba(255, 255, 255, .34);
    --tk-err: #ffd2dc;
    --tk-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
    --tk-body: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --tk-script: 'Caveat Brush', 'Comic Sans MS', cursive;
    --tk-ease: cubic-bezier(.2, .7, .2, 1);
    --tk-tooth: 14px;
    color-scheme: dark;
}

/* ── Base ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body.tk {
    margin: 0;
    background: var(--tk-ink);
    color: var(--tk-white);
    font: 16px/1.5 var(--tk-body);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
.tk a { color: inherit; }
.tk h1, .tk h2, .tk h3 { margin: 0; font-family: var(--tk-display); font-weight: 400; letter-spacing: -.01em; line-height: 1; }
:where(.tk) p { margin: 0; }
.tk-wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.tk-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tk-small { font-size: 14px; color: var(--tk-soft); }
.tk-center { text-align: center; }
[hidden] { display: none !important; }
/* /how-it-works, /faq (src/landing.ts) land with the heading clear of the fixed bar. */
[data-section] { scroll-margin-top: 88px; }

/* ── Bar: always see-through, like the photo is the page ─────────────── */
.tk-bar {
    position: fixed; inset: 0 0 auto 0; z-index: 30;
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; padding-top: max(14px, env(safe-area-inset-top));
    background: linear-gradient(180deg, rgba(13, 11, 16, .45), rgba(13, 11, 16, 0));
}
.tk-logo { font-family: var(--tk-display); font-size: 30px; line-height: 1; text-decoration: none; letter-spacing: -.02em; text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }
.tk-bar-mid { display: none; font-size: 12px; color: var(--tk-soft); }
/* The two links share one dark glass capsule; "join now" is the white pill inside it. */
.tk-bar-right {
    margin-left: auto; display: flex; gap: 2px; padding: 4px;
    border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px;
    background: rgba(13, 11, 16, .34);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 12px 30px -14px rgba(0, 0, 0, .6);
    backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
}
.tk-pill-ghost, .tk-pill-solid {
    display: inline-flex; align-items: center; min-height: 34px; padding: 0 16px;
    border-radius: 999px; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap;
    transition: background .2s, transform .15s var(--tk-ease);
}
.tk-pill-ghost { color: rgba(255, 255, 255, .86) !important; }
.tk-pill-ghost:hover { background: rgba(255, 255, 255, .12); color: var(--tk-white) !important; }
.tk-pill-solid { background: var(--tk-white); color: var(--tk-ink) !important; box-shadow: 0 2px 10px -3px rgba(0, 0, 0, .45); }
.tk-pill-solid:active { transform: scale(.97); }
.tk-bar .tk-pill-ghost { display: none; }

/* ── Chapters ────────────────────────────────────────────────────────── */
.tk-ch { position: relative; isolation: isolate; overflow: clip; }
/* Spacers, not padding: the pinned photo may only travel through the content
   box, so padding would leave a strip with no photo at the chapter's foot. */
.tk-ch::after { content: ''; display: block; height: 96px; }
.tk-ch + .tk-ch::before { content: ''; display: block; height: calc(var(--tk-tooth) + 80px); }
.tk-ch + .tk-ch {
    margin-top: calc(var(--tk-tooth) * -1);
    /* The torn top edge: teeth along the top, solid below them. */
    -webkit-mask:
        conic-gradient(from 135deg at 50% 0, #0000, #000 1deg 89deg, #0000 90deg) 50% 0 / calc(var(--tk-tooth) * 2) var(--tk-tooth) repeat-x,
        linear-gradient(#000 0 0) 0 var(--tk-tooth) / 100% 100% no-repeat;
    mask:
        conic-gradient(from 135deg at 50% 0, #0000, #000 1deg 89deg, #0000 90deg) 50% 0 / calc(var(--tk-tooth) * 2) var(--tk-tooth) repeat-x,
        linear-gradient(#000 0 0) 0 var(--tk-tooth) / 100% 100% no-repeat;
}
.tk-ch-bg { position: sticky; top: 0; z-index: -1; height: 100svh; margin-bottom: -100svh; overflow: hidden; background: var(--tk-ink); }
/* The photo reaches up behind the spacer to the torn edge; the content after
   it starts below the spacer, or the teeth would bite the heading. */
.tk-ch + .tk-ch .tk-ch-bg { margin-top: calc((var(--tk-tooth) + 80px) * -1); margin-bottom: calc(var(--tk-tooth) + 80px - 100svh); }
.tk-bg-sharp, .tk-bg-sharp img, .tk-bg-soft { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tk-bg-sharp img { transform: scale(calc(1 + var(--tk-b, 0) * .06)); }
/* The soft copy is pre-blurred; scaling hides its soft edges. */
.tk-bg-soft { transform: scale(1.08); opacity: var(--tk-b, 0); }
.tk-bg-soft.is-on { opacity: 1; }
.tk-bg-tint { position: absolute; inset: 0; }
.tk-bg-dots {
    position: absolute; inset: 0; opacity: .5; mix-blend-mode: multiply;
    background-image: radial-gradient(rgba(0, 0, 0, .55) 1px, transparent 1.4px);
    background-size: 4px 4px;
}

.tk-ch-valley .tk-bg-tint { background: linear-gradient(180deg, rgba(40, 40, 110, calc(.16 + var(--tk-b, 0) * .26)), rgba(13, 11, 16, calc(.32 + var(--tk-b, 0) * .18))); }
.tk-ch-valley .tk-bg-sharp img { object-position: 50% 40%; }
.tk-ch-night .tk-bg-tint { background: linear-gradient(180deg, rgba(30, 24, 80, .55), rgba(13, 11, 16, .7)); }
.tk-ch-party .tk-bg-tint { background: linear-gradient(180deg, rgba(20, 30, 110, .55), rgba(13, 11, 30, .72)); }
.tk-ch-snow .tk-bg-tint { background: linear-gradient(180deg, rgba(10, 40, 110, .5), rgba(8, 20, 50, .72)); }
.tk-ch-finale .tk-bg-tint { background: rgba(20, 16, 40, .55); }

/* ── Hero ────────────────────────────────────────────────────────────── */
/* The headline sits at the top and the signup in the middle of the screen:
   two equal 1fr rows around the signup, so it centres unless the headline
   needs more room, and then it sits just under it. The one column is the
   screen's width, or the marquee's long track would stretch it. */
.tk-hero {
    min-height: 100svh;
    display: grid; grid-template-rows: 1fr auto 1fr; grid-template-columns: minmax(0, 1fr); justify-items: center;
    padding: clamp(100px, 15svh, 150px) 16px;
    text-align: center;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .3);
}
.tk-hero-top { align-self: start; width: 100%; display: flex; flex-direction: column; align-items: center; }
.tk-hero h1 { font-size: clamp(60px, 16vw, 132px); line-height: .9; letter-spacing: -.02em; }
/* On load the headline comes into focus, then the marquee and the signup
   rise in after it. */
.tk-hero h1 { animation: tk-focus 1.1s var(--tk-ease) both; }
.tk-marquee, .tk-marquee-note { animation: tk-rise .9s .3s var(--tk-ease) both; }
.tk-hero .tk-glass { animation: tk-rise .9s .45s var(--tk-ease) both; }

/* The neighbourhood marquee, faded at both ends. */
.tk-marquee {
    width: min(100%, 520px); margin-top: 28px; overflow: hidden;
    -webkit-mask: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
    mask: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
.tk-marquee-track { display: flex; width: max-content; animation: tk-slide 32s linear infinite; }
.tk-marquee-track span { padding: 0 14px; font-family: var(--tk-display); font-size: 30px; line-height: 1.1; text-transform: uppercase; letter-spacing: -.01em; white-space: nowrap; }
.tk-marquee-note { margin-top: 4px; font-size: 13px; color: var(--tk-soft); }

/* ── Clear glass signup ──────────────────────────────────────────────── */
.tk-glass {
    width: min(100%, 440px); margin-top: 18px; padding: 10px;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .08));
    border: 1px solid var(--tk-glass-line);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 24px 60px -24px rgba(0, 0, 0, .55);
    backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
    text-shadow: none;
}
.tk-step { display: flex; flex-direction: column; gap: 8px; }
.tk-step-title { font-family: var(--tk-display); font-size: 28px; line-height: 1.05; margin: 4px 0 2px; }
.tk-input {
    width: 100%; min-height: 46px; padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, .22); border-radius: 14px;
    background: rgba(255, 255, 255, .16); color: var(--tk-white);
    font: 500 16px var(--tk-body); text-align: center;
}
.tk-input::placeholder { color: rgba(255, 255, 255, .7); }
.tk-input-code { letter-spacing: .35em; font-weight: 700; }
/* The email step: the field and its button in one long pill. */
.tk-field { display: flex; gap: 6px; padding: 5px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; background: rgba(255, 255, 255, .16); }
.tk-field .tk-input { flex: 1; min-width: 0; border: 0; border-radius: 999px; background: none; text-align: left; }
.tk-field .tk-btn { flex: none; width: auto; }
/* A phone's field is narrow: a smaller placeholder and a slimmer button keep
   "you@yourschoolemail.ca" whole down to a 375px iPhone. */
@media (max-width: 760px) {
    .tk-field .tk-input { padding: 0 8px 0 12px; }
    .tk-field .tk-input::placeholder { font-size: 13px; }
    .tk-field .tk-btn { padding: 0 16px; }
}
.tk-btn {
    display: inline-flex; align-items: center; justify-content: center; width: 100%;
    min-height: 46px; padding: 0 20px; border: 0; border-radius: 999px;
    background: var(--tk-white); color: var(--tk-ink) !important;
    font: 700 16px/1 var(--tk-body); text-decoration: none; cursor: pointer;
    transition: transform .15s var(--tk-ease), box-shadow .15s;
}
.tk-btn:hover { box-shadow: 0 0 0 4px rgba(255, 255, 255, .25); }
.tk-btn:active { transform: scale(.98); }
.tk-btn:disabled { opacity: .6; cursor: progress; }
.tk-btn:focus-visible, .tk-link:focus-visible, .tk-pill-ghost:focus-visible, .tk-pill-solid:focus-visible { outline: 3px solid var(--tk-gold); outline-offset: 2px; }
/* A typing field shows focus with a soft white ring, not the gold one. */
.tk-input:focus-visible { outline: none; border-color: rgba(255, 255, 255, .75); box-shadow: 0 0 0 3px rgba(255, 255, 255, .22); }
.tk-field:focus-within { border-color: rgba(255, 255, 255, .75); box-shadow: 0 0 0 3px rgba(255, 255, 255, .22); }
.tk-field .tk-input:focus-visible { box-shadow: none; }
.tk-hint { font-size: 12px; color: var(--tk-soft); }
.tk-hint.is-good { color: var(--tk-gold); }
.tk-err { font-size: 14px; font-weight: 600; color: var(--tk-err); }
.tk-link { background: none; border: 0; padding: 0; color: inherit; font: 600 13px var(--tk-body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; opacity: .85; }
.tk-link:disabled { text-decoration: none; opacity: .55; cursor: default; }
.tk-row-small { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 4px; }
.tk-qr { display: flex; align-items: center; gap: 16px; padding: 14px 18px 14px 14px; border-radius: 16px; background: var(--tk-white); color: var(--tk-ink); font-size: 16px; text-align: left; }
.tk-qr img { width: 200px; height: 200px; flex: none; }
.tk-step [data-manual] { overflow-wrap: anywhere; }
/* "you're in" is the payoff, so it reads bigger than the steps before it. */
[data-step="done"] { gap: 12px; }
[data-step="done"] .tk-step-title { font-size: 44px; }
[data-step="done"] .tk-small { font-size: 16px; }
[data-step="done"] .tk-btn { min-height: 56px; font-size: 18px; }

/* ── Label headings: white type on a black strip, one word in pink ───── */
.tk .tk-label { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 0 auto 44px; text-align: center; font-size: clamp(36px, 8vw, 58px); line-height: 1; }
.tk-label span { display: inline-block; padding: .04em .2em .1em; background: var(--tk-ink); box-shadow: 0 8px 22px -10px rgba(0, 0, 0, .6); }
.tk-label span:nth-child(1) { transform: rotate(-1deg); }
.tk-label span:nth-child(2) { transform: rotate(1deg); }
.tk-label em { font-style: normal; color: var(--tk-pink); }
.tk-label-offset span:nth-child(2) { margin-left: 2.6em; }

/* ── How it works: four steps down a dotted line, each with a sticker ── */
/* A phone puts each sticker under its words; a wide screen beside them. */
.tk-how { padding: 40px 16px 24px; }
.tk-steps { list-style: none; margin: 0 auto; padding: 0; max-width: 420px; display: grid; gap: 44px; }
.tk-steps li { position: relative; display: grid; grid-template-columns: 26px 1fr; column-gap: 16px; row-gap: 6px; justify-items: start; }
.tk-steps li > :not(.tk-n) { grid-column: 2; }
.tk-steps li:not(:last-child)::before { content: ''; position: absolute; left: 12px; top: 40px; bottom: -36px; border-left: 2px dotted rgba(255, 255, 255, .32); }
.tk-steps h3 { font-size: 34px; }
.tk-steps p { max-width: 34ch; color: var(--tk-soft); font-size: 15px; }
.tk-n { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-top: 4px; border-radius: 50%; background: var(--tk-gold); color: var(--tk-ink); font: 700 14px var(--tk-body); }
.tk-steps li:nth-child(even) .tk-n { background: var(--tk-pink); color: var(--tk-white); }
.tk-st { position: relative; margin-top: 14px; }

/* stickers 1 and 3: illustrated stickers (a phone, a calendar) */
.tk-st-img { width: 150px; height: 150px; object-fit: contain; filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .45)); transform: rotate(-4deg); }

/* sticker 2: a fan of tinted drop posters */
.tk-st-fan { width: 220px; height: 130px; }
.tk-st-fan img { position: absolute; top: 0; width: 70px; height: 112px; object-fit: cover; border: 3px solid #fff; border-radius: 4px; box-shadow: 0 12px 22px -10px rgba(0, 0, 0, .7); }
.tk-st-fan img:nth-child(1) { left: 6px;  transform: rotate(-12deg); filter: sepia(1) saturate(4) hue-rotate(10deg); }
.tk-st-fan img:nth-child(2) { left: 56px; transform: rotate(-4deg) translateY(6px); filter: sepia(1) saturate(4) hue-rotate(185deg); }
.tk-st-fan img:nth-child(3) { left: 102px; transform: rotate(5deg); filter: sepia(1) saturate(3) hue-rotate(280deg); }
.tk-st-fan img:nth-child(4) { left: 148px; transform: rotate(13deg) translateY(8px); filter: sepia(1) saturate(4) hue-rotate(60deg); }

/* sticker 4 (and the safety photo): a polaroid */
.tk-st-pol { width: 136px; padding: 7px 7px 26px; background: #fff; box-shadow: 0 16px 26px -12px rgba(0, 0, 0, .7); transform: rotate(4deg); }
.tk-st-pol img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }

/* ── Chapter 2: the drop ─────────────────────────────────────────────── */
.tk-drop { display: grid; gap: 56px; justify-items: center; margin-bottom: 110px; }
/* The example Wednesday text: a picture of the thread on an iPhone. */
.tk-phone { margin: 0; width: min(100%, 340px); }
.tk-phone img { display: block; width: 100%; height: auto; filter: drop-shadow(0 40px 50px rgba(0, 0, 0, .6)); transform: rotate(-2deg); }
.tk-phone figcaption { margin-top: 14px; text-align: center; font-size: 12px; color: var(--tk-soft); }

/* The film collage with tape labels. */
.tk-film { position: relative; width: min(100%, 460px); height: 420px; }
.tk-frame { position: absolute; margin: 0; padding: 10px 10px 24px; background: #1b1a1e; box-shadow: 0 24px 40px -18px rgba(0, 0, 0, .8); }
.tk-frame::before, .tk-frame::after { content: ''; position: absolute; left: 6px; right: 6px; height: 6px; background: repeating-linear-gradient(90deg, #3a3940 0 6px, transparent 6px 12px); }
.tk-frame::before { top: 2px; }
.tk-frame::after { bottom: 8px; }
.tk-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tk-frame-a { left: 0; top: 10px; width: 54%; height: 220px; transform: rotate(-3deg); }
.tk-frame-b { right: 0; top: 70px; width: 50%; height: 170px; transform: rotate(4deg); }
.tk-frame-c { left: 22%; bottom: 0; width: 56%; height: 190px; transform: rotate(-1deg); }
.tk-tape {
    position: absolute; z-index: 2; padding: 6px 12px 8px;
    font: 26px/.95 var(--tk-display); color: var(--tk-ink);
    clip-path: polygon(2% 6%, 98% 0, 100% 92%, 96% 100%, 0 96%, 3% 52%);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .3);
}
.tk-tape-pink { background: #ff8cc4; left: 38%; top: -8px; transform: rotate(-4deg); }
.tk-tape-gold { background: #ffd65a; right: -6px; top: 210px; transform: rotate(-6deg); }
.tk-tape-blue { background: #8ec5ff; left: 2px; bottom: 34px; transform: rotate(5deg); }

/* Three columns with stickers (the matchmaker, and safety). */
.tk-three { list-style: none; margin: 0 auto; padding: 0; max-width: 980px; display: grid; gap: 48px; }
.tk-three li { display: grid; justify-items: center; text-align: center; gap: 10px; }
.tk-three h3 { font-size: 36px; }
.tk-three li > img { width: 170px; height: 170px; object-fit: contain; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .45)); }
.tk-three p { max-width: 28ch; color: var(--tk-soft); font-size: 15px; }

/* ── Chapter 3: the carousel and the comparison ──────────────────────── */
.tk-carousel { overflow: hidden; padding: 14px 0 34px; }
.tk-carousel-track { display: flex; gap: 18px; width: max-content; animation: tk-slide 60s linear infinite; }
.tk-carousel:hover .tk-carousel-track { animation-play-state: paused; }
.tk-card { position: relative; flex: none; width: 236px; aspect-ratio: 4 / 5.4; margin: 0; overflow: hidden; border-radius: 6px; box-shadow: 0 26px 40px -22px rgba(0, 0, 0, .9); }
.tk-card:nth-child(odd) { transform: rotate(-1.5deg); }
.tk-card:nth-child(even) { transform: rotate(1.5deg) translateY(10px); }
.tk-card img { width: 100%; height: 100%; object-fit: cover; }
.tk-card figcaption {
    position: absolute; left: 10px; right: 10px; bottom: 10px;
    padding: 9px 11px; border-radius: 14px;
    background: rgba(255, 255, 255, .95); color: #1a1a1a;
    font-size: 12.5px; line-height: 1.3;
}
.tk-card-who { display: block; margin-bottom: 2px; font-size: 10px; color: #8a8a8a; }
.tk-card-who i { font-style: normal; margin-left: 4px; padding: 0 5px; border-radius: 99px; background: #ffe2f0; color: #c2186b; }

.tk-vs-wrap { margin-top: 96px; }
.tk-vs { display: grid; gap: 44px; max-width: 860px; margin: 0 auto; }
.tk-vs-col { display: grid; grid-template-rows: auto auto 1fr; justify-items: center; gap: 4px; text-align: center; }
.tk-vs-k { font-size: 13px; color: var(--tk-soft); }
.tk-vs-col h3 { font-size: 34px; margin-bottom: 18px; }
/* The same Wednesday 7:00 lock screen twice. Khio's holds one text, with
   the Khio face and the app icon on its corner the way iOS shows a message;
   the dating apps' is a grey pile that fades out at the bottom. */
.tk-lock {
    width: min(100%, 340px); padding: 22px 12px 14px;
    border-radius: 32px; border: 1px solid var(--tk-glass-line);
    background: linear-gradient(180deg, rgba(160, 200, 255, .3), rgba(255, 255, 255, .08));
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 30px 60px -30px rgba(0, 0, 0, .8);
}
.tk-lock-day { font-size: 13px; font-weight: 600; color: var(--tk-soft); }
.tk-lock-time { margin: -2px 0 18px; font: 300 64px/1 var(--tk-body); letter-spacing: -.03em; }
.tk-notif { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 20px; background: rgba(255, 255, 255, .86); color: #1a1a1a; text-align: left; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .5); }
.tk-notif-av { position: relative; flex: none; width: 40px; height: 40px; }
.tk-notif-av img { display: block; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.tk-notif-av .tk-notif-app { position: absolute; right: -4px; bottom: -4px; width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid #fff; }
.tk-notif div { display: flex; flex-direction: column; font-size: 13px; line-height: 1.3; }
.tk-notif i { margin-left: auto; align-self: flex-start; font-style: normal; font-size: 11px; color: #888; }

.tk-lock-mess { background: linear-gradient(180deg, rgba(150, 150, 165, .28), rgba(255, 255, 255, .05)); }
.tk-mess {
    list-style: none; margin: 0; padding: 0; display: grid; gap: 6px;
    -webkit-mask: linear-gradient(#000 50%, transparent); mask: linear-gradient(#000 50%, transparent);
}
.tk-mess li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 18px; background: rgba(255, 255, 255, .5); color: #3a3a3a; font-size: 12.5px; line-height: 1.3; text-align: left; }
.tk-mess li > span:nth-child(2) { display: flex; flex-direction: column; }
.tk-mess i { margin-left: auto; align-self: flex-start; font-style: normal; font-size: 11px; color: #777; }
.tk-mess-ic { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(160deg, #c3c0c9, #8f8b98); color: #fff; font-size: 16px; }
.tk-mess-ic::before { content: '\2665'; }
.tk-mess-more { margin-top: -22px; font-size: 12px; font-weight: 600; color: var(--tk-soft); }

/* ── Chapter 4: safety, schools, questions ───────────────────────────── */
.tk-stamp { width: 170px; height: 170px; transform: rotate(-12deg); filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .35)); }
.tk-stamp circle { fill: none; stroke: #ff8cc4; stroke-width: 4; }
.tk-stamp text { fill: #ff8cc4; font: 700 15px var(--tk-body); letter-spacing: .14em; text-transform: uppercase; }
.tk-stamp-heart { fill: #ff8cc4; }
.tk-safe-pol { width: 150px; transform: rotate(-4deg); }
.tk-safe-k { font-size: 14px; color: var(--tk-soft); }
.tk-safe-line { max-width: 52ch; margin: 44px auto 0; text-align: center; color: var(--tk-soft); }

.tk-schools { margin-top: 110px; }
.tk-glass-list {
    list-style: none; margin: 0 auto 14px; padding: 6px 18px; max-width: 560px;
    border-radius: 22px; border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(10, 20, 50, .38);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.tk-glass-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); font: 24px/1.1 var(--tk-display); color: var(--tk-soft); }
.tk-glass-list li:last-child { border-bottom: 0; }
.tk-glass-list li.is-live { color: var(--tk-white); }
.tk-glass-list b { flex: none; padding: 4px 10px; border-radius: 99px; background: rgba(255, 255, 255, .12); font: 700 11px var(--tk-body); letter-spacing: .1em; text-transform: uppercase; }
.tk-glass-list li.is-live b { background: var(--tk-pink); }

.tk-faq { margin-top: 110px; }
.tk-faq-box {
    max-width: 680px; margin: 0 auto; padding: 4px 18px;
    border-radius: 22px; border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(10, 20, 50, .45);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.tk-faq details { border-bottom: 1px solid rgba(255, 255, 255, .12); }
.tk-faq details:last-child { border-bottom: 0; }
.tk-faq summary { list-style: none; display: flex; justify-content: space-between; gap: 14px; padding: 16px 2px; cursor: pointer; font-size: 15px; font-weight: 600; }
.tk-faq summary::-webkit-details-marker { display: none; }
.tk-faq summary::after { content: ''; flex: none; width: 8px; height: 8px; margin-top: 4px; border-right: 2px solid var(--tk-pink); border-bottom: 2px solid var(--tk-pink); transform: rotate(45deg); transition: transform .2s var(--tk-ease); }
.tk-faq details[open] summary::after { transform: rotate(225deg); }
.tk-faq details p { padding: 0 2px 16px; color: var(--tk-soft); font-size: 15px; }

/* ── Chapter 5: date without swiping ─────────────────────────────────── */
.tk-finale { position: relative; min-height: 80svh; display: grid; justify-items: center; align-content: center; padding: 0 16px; text-align: center; }
.tk-echo { font: clamp(34px, 9vw, 74px)/.95 var(--tk-display); white-space: nowrap; text-shadow: 0 2px 18px rgba(0, 0, 0, .35); }
.tk-finale .tk-script {
    margin: -.2em 0 -.12em; position: relative; z-index: 1;
    font: clamp(44px, 11.5vw, 124px)/1 var(--tk-script); color: var(--tk-pink); white-space: nowrap;
    transform: rotate(-4deg); text-shadow: 0 4px 24px rgba(0, 0, 0, .35);
}
.tk-finale-btn { width: auto; margin-top: 38px; min-height: 54px; padding: 0 30px; font-size: 17px; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .7); }

/* ── Policy pages (privacy, terms, guidelines) ───────────────────────── */
.tk-doc { max-width: 760px; margin: 0 auto; padding: 120px 16px 64px; }
.tk-doc h1 { font-size: clamp(48px, 12vw, 76px); }
.tk-doc-updated { margin: 12px 0 28px; color: var(--tk-soft); font-size: 15px; }
.tk-doc h2 { font-size: 32px; margin: 40px 0 10px; }
.tk-doc p, .tk-doc li { color: var(--tk-soft); }
.tk-doc b, .tk-doc th { color: var(--tk-white); }
.tk-doc a { color: var(--tk-pink); }
.tk-doc p + p { margin-top: 12px; }
.tk-doc ul { padding-left: 22px; margin: 10px 0 0; }
.tk-doc li + li { margin-top: 8px; }
.tk-doc-box { margin: 20px 0; padding: 18px 20px; border-radius: 18px; background: var(--tk-glass); border: 1px solid var(--tk-glass-line); }
.tk-doc table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 15px; }
.tk-doc th, .tk-doc td { text-align: left; vertical-align: top; padding: 10px 8px; border-bottom: 1px solid var(--tk-glass-line); }

/* ── khio not replying? (new-number.html): the signup card on a night photo */
.tk-help {
    position: relative; isolation: isolate; min-height: 100svh;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
    padding: 110px 16px 56px; text-align: center;
}
.tk-help-bg { position: fixed; inset: 0; z-index: -1; background: var(--tk-ink); }
.tk-help-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .8; }
.tk-help-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30, 24, 80, .45), rgba(13, 11, 16, .75)); }
.tk-help-face { width: 96px; height: 96px; border-radius: 50%; border: 3px solid var(--tk-white); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .7); }
.tk-help h1 { font-size: clamp(48px, 12vw, 84px); line-height: .95; }
.tk-help-lede { max-width: 38ch; color: var(--tk-soft); font-size: 17px; }
.tk-help .tk-glass { margin-top: 8px; }
.tk-help .tk-small a { color: var(--tk-white); }

/* ── Background tryout pills (?bg=, src/landing.ts); goes when it does ── */
.tk-bg-try {
    position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 40; transform: translateX(-50%);
    display: flex; gap: 4px; max-width: calc(100vw - 24px); overflow-x: auto; padding: 5px;
    border-radius: 999px; border: 1px solid var(--tk-glass-line); background: rgba(13, 11, 16, .72);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.tk-bg-try button { flex: none; padding: 8px 12px; border: 0; border-radius: 999px; background: none; color: var(--tk-white); font: 600 13px var(--tk-body); white-space: nowrap; cursor: pointer; }
.tk-bg-try button[aria-pressed="true"] { background: var(--tk-white); color: var(--tk-ink); }

/* ── Footer ──────────────────────────────────────────────────────────── */
.tk-foot { padding: 34px 0 calc(34px + env(safe-area-inset-bottom)); background: var(--tk-ink); color: var(--tk-soft); }
/* The beating heart drawn in text (src/heart.ts): 52 columns by 24 rows. */
.tk-heart {
    width: max-content; height: calc(24 * 1.2em); margin: 0 auto 14px; overflow: hidden;
    font: 7px/1.2 ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    color: var(--tk-pink); text-shadow: 0 0 8px rgba(255, 79, 163, .55);
}
.tk-foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.tk-foot .tk-logo { color: var(--tk-white); }
.tk-foot nav { display: flex; flex-wrap: wrap; gap: 18px; font-size: 14px; }
.tk-foot nav a { text-decoration: none; }
.tk-foot nav a:hover, .tk-foot nav a[aria-current] { color: var(--tk-white); }
.tk-foot-small { margin: 18px auto 0; font-size: 12px; opacity: .7; }

/* ── Reveal on scroll (trykhio-landing.ts adds .is-in) ───────────────── */
.tk-js [data-reveal] { opacity: 0; transform: translateY(30px) scale(.98); transition: opacity .8s var(--tk-ease), transform .8s var(--tk-ease); }
.tk-js [data-reveal].is-in { opacity: 1; transform: none; }
.tk-js .tk-three [data-reveal]:nth-child(2) { transition-delay: .12s; }
.tk-js .tk-three [data-reveal]:nth-child(3) { transition-delay: .24s; }

.tk-faq details[open] p { animation: tk-rise .35s var(--tk-ease); }

@keyframes tk-slide { to { transform: translateX(-50%); } }
@keyframes tk-focus { from { opacity: 0; filter: blur(14px); transform: translateY(14px); } }
@keyframes tk-rise { from { opacity: 0; transform: translateY(18px); } }

/* ── Hover: stickers wiggle, date cards lift (mouse only) ────────────── */
@media (hover: hover) {
    .tk-st-img, .tk-three li > img { transition: transform .45s cubic-bezier(.3, 1.6, .5, 1); }
    .tk-st-img:hover { transform: rotate(3deg) scale(1.07); }
    .tk-three li > img:hover { transform: rotate(-4deg) scale(1.07); }
    .tk-card { transition: transform .35s var(--tk-ease), box-shadow .35s; }
    .tk-card:hover { transform: translateY(-10px); box-shadow: 0 36px 50px -24px rgba(0, 0, 0, .95); }
}

/* ── Phone: each three-up list is rows, the picture beside the words ─── */
@media (max-width: 760px) {
    .tk-three { max-width: 440px; gap: 30px; }
    .tk-three li { grid-template: ". ." 1fr ". x" auto ". y" auto ". ." 1fr / 112px 1fr; column-gap: 18px; row-gap: 6px; justify-items: start; align-items: center; text-align: left; }
    .tk-three li > :is(img, svg, .tk-st-pol) { grid-row: 1 / 5; grid-column: 1; justify-self: center; }
    .tk-three li > h3:first-child, .tk-safe-k { grid-area: x; }
    .tk-three li > p:last-child, .tk-safe h3 { grid-area: y; }
    .tk-three h3 { font-size: 28px; }
    .tk-three li > img, .tk-stamp { width: 112px; height: 112px; }
    .tk-safe-pol { width: 100px; padding: 5px 5px 16px; }
}

/* ── Wide ────────────────────────────────────────────────────────────── */
@media (min-width: 761px) {
    :root { --tk-tooth: 18px; }
    .tk-wrap { padding: 0 32px; }
    .tk-bar { padding: 20px 40px; }
    .tk-bar-mid { display: block; position: absolute; left: 50%; transform: translateX(-50%); }
    .tk-bar .tk-pill-ghost { display: inline-flex; }
    .tk-glass { width: 560px; }
    /* The sticker sits to the right, across the step's rows; the last row
       (1fr) takes the extra height so the title and words stay together. */
    .tk-steps { max-width: 700px; gap: 56px; }
    .tk-steps li { grid-template-columns: 26px 1fr 220px; grid-template-rows: auto auto 1fr; column-gap: 24px; row-gap: 10px; }
    .tk-steps li > .tk-st { grid-column: 3; grid-row: 1 / 4; justify-self: center; margin: 0; }
    .tk-steps li:not(:last-child)::before { bottom: -48px; }
    .tk-steps h3 { font-size: 42px; }
    .tk-steps p { font-size: 16px; }
    .tk-drop { grid-template-columns: 1fr 1fr; align-items: center; }
    .tk-three { grid-template-columns: repeat(3, 1fr); }
    .tk-safe li { grid-template-rows: 200px auto auto; }
    .tk-safe li > :first-child { align-self: center; }
    .tk-vs { grid-template-columns: 1fr 1fr; }
    .tk-card { width: 270px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .tk-marquee-track, .tk-carousel-track, .tk-hero h1, .tk-marquee, .tk-marquee-note, .tk-hero .tk-glass, .tk-faq details[open] p { animation: none; }
    .tk-carousel { overflow-x: auto; }
    .tk-js [data-reveal] { opacity: 1; transform: none; transition: none; }
}