/* ==========================================================================
   Home page
   Page-scoped styles for index.html only. Every selector lives under
   .home-page or a .tk-* class, so nothing here can reach the legal pages,
   the plans page or the shared footer used everywhere else.

   Requires css/nav.css, which must be linked FIRST: it owns the navbar plus
   the shared primitives this file builds on - the .tk-btn family, the store
   badges and the foundation tokens (--tk-ease, --tk-nav-h ...). The home
   page re-tunes some of those tokens on .home-page; other pages keep theirs.

   Concept - "the listening room":
     Tokify is a call you can make at any hour, and the page runs through
     a whole night and day: the hero is deep blue night with a first light
     of dawn along its foot, each section below it one step further round
     the colour wheel (orange, coral, pink, magenta, purple, violet, blue),
     and the closing band and footer end in blue and cyan, back where the
     hero began.
     The moments that are the call itself - the hero, the stats band and
     the footer - are deep; the reading sections between them stay light,
     each with its own soft tint, so the colour has somewhere to rest.

     The motif is listening: rings that ripple out from the phone like a call
     ringing, and the closing band opening as one of those rings.

   Colour system - see "Tokify colour system" just below. Three layers:
     1. the raw palette on :root (the brand's orange, coral, pink, magenta
        and purple, continued through violet, cobalt and blue to cyan; a
        text-safe ink and a light tint for each; warm neutrals),
     2. semantic tokens on .home-page (text, surfaces, lines, the accent,
        focus, and the gradient set) - every component reads these,
     3. the journey (in "Section colour"), where each section sets its own
        stage of the accent, so its labels, links, icons and glows all
        move together.
   Vivid colour is kept for the hero, primary actions, key visuals and the
   closing band; content sections are light. White text only ever sits on
   the deep end of a gradient; on orange, coral, pink, sky or aqua the text
   is dark.

   Type: Poppins (the app's and the wordmark's face) for headings, its bold
   italic reserved for the <em> phrases already in the copy. Inter for
   everything read at length. No text-transform anywhere: the copy renders
   exactly as it is written.

   Motion: each section moves in its own way (see "Scroll scenes"). Scenes
   follow the scroll and never take it over; loops are slow, compositor-only
   where possible, paused off-screen, and off under prefers-reduced-motion.
   ========================================================================== */

/* ==========================================================================
   Tokify colour system
   ========================================================================== */

/* --- 1. raw palette (index.html alone loads this file) ------------------ */
:root {
  /* the journey, in order: sunset (orange) to night (cyan). Each hue is a
     step round the wheel from the one before it. */
  --tk-orange: #FF8A12;
  --tk-coral: #FF5E57;
  --tk-pink: #FF4797;
  --tk-magenta: #D22F9E;
  --tk-purple: #8B45E6;
  --tk-violet: #6D5CF6;
  --tk-cobalt: #496CEF;
  --tk-blue: #4F86F0;
  --tk-sky: #38AEFA;
  --tk-cyan: #22C3E6;
  --tk-aqua: #4DDAE9;

  /* supporting accents - small amounts only */
  --tk-teal: #14B8A6;
  --tk-yellow: #FFC23D;
  --tk-yellow-soft: #FFDB7A;
  --tk-peach: #FFC08A;
  --tk-blush: #FFB8D6;
  --tk-lilac-soft: #DDC4FC;
  --tk-sky-soft: #A4D8FE;

  /* text-safe shades: 5:1 or better on white, on every wash and on their
     own tint; white holds 5.5:1 or better on each */
  --tk-orange-ink: #A3480A;
  --tk-coral-ink: #BA2D1F;
  --tk-pink-ink: #B8134F;
  --tk-magenta-ink: #A21C8A;
  --tk-purple-ink: #6D28D9;
  --tk-violet-ink: #4F3CD4;
  --tk-cobalt-ink: #304CCC;
  --tk-blue-ink: #1F5FD1;
  --tk-sky-ink: #0269A0;
  --tk-cyan-ink: #026E89;
  --tk-teal-ink: #0F766E;

  /* the same, one step darker, for hover */
  --tk-orange-ink-hover: #893B07;
  --tk-pink-ink-hover: #960C40;
  --tk-magenta-ink-hover: #870E72;
  --tk-violet-ink-hover: #3F2AB1;
  --tk-cobalt-ink-hover: #233AAA;
  --tk-blue-ink-hover: #174BA8;
  --tk-cyan-ink-hover: #04596E;

  /* deep shades - the hero's night blues, the stats band, the night. The
     hero's blues climb steadily in lightness (OKLCH L 0.17 > 0.43) at one
     hue, turning a little violet only at the far end. */
  --tk-navy-950: #060E28;
  --tk-blue-900: #061748;
  --tk-blue-800: #092571;
  --tk-blue-700: #0E399A;
  --tk-indigo-600: #3D3AAF;
  --tk-grape-900: #4D1240;
  --tk-grape-800: #5A1974;
  --tk-grape-700: #6226B0;
  --tk-blue-deep: #224BB2;
  --tk-cyan-deep: #03657D;
  --tk-navy-700: #162B6F;
  --tk-navy-900: #091025;

  /* light tints, for icon tiles */
  --tk-orange-50: #FFF1E4;
  --tk-pink-50: #FFEEF5;
  --tk-pink-100: #FFD9E8;
  --tk-magenta-50: #FFEEF9;
  --tk-purple-50: #F4EDFD;
  --tk-violet-50: #F1F2FE;
  --tk-cobalt-50: #EFF3FF;
  --tk-blue-50: #EAF1FF;
  --tk-cyan-50: #E4F7FE;

  /* the section washes: one per section boundary, in journey order, all
     at the same lightness (OKLCH L 0.945). Each section runs from its own
     wash to the next, so the page never changes colour at an edge. Body
     text holds 5.9:1 on every one. */
  --tk-wash-apricot: #FEE8D6;
  --tk-wash-salmon: #FFE7E0;
  --tk-wash-blush: #FEE6EA;
  --tk-wash-orchid: #FEE4F9;
  --tk-wash-lavender: #F1E8FF;
  --tk-wash-periwinkle: #E9EBFF;
  --tk-wash-sky: #E2EEFF;
  --tk-wash-ice: #DBF1FF;
  --tk-wash-aqua: #CFF5FD;
  --tk-wash-orchid-rgb: 254, 228, 249;
  --tk-wash-lavender-rgb: 241, 232, 255;
  --tk-wash-aqua-rgb: 207, 245, 253;

  /* neutrals - warm, never grey-blue */
  --tk-white: #FFFFFF;
  --tk-paper: #FFFCFA;
  --tk-surface: #FBF7F9;
  --tk-surface-2: #F3ECF1;
  --tk-neutral-300: #E6DDE4;
  --tk-neutral-500: #ADA4B3;
  --tk-text: #1B1420;
  --tk-muted: #5D5666;
  --tk-subtle: #6E6776;
  --tk-dark: #16101D;
  --tk-dark-2: #221630;
  --tk-dark-3: #33184F;

  /* status */
  --tk-live: #22C55E;
  --tk-success: #16A34A;

  /* channels, for tints at any opacity: rgba(var(--tk-pink-rgb), 0.2) */
  --tk-orange-rgb: 255, 138, 18;
  --tk-coral-rgb: 255, 94, 87;
  --tk-pink-rgb: 255, 71, 151;
  --tk-magenta-rgb: 210, 47, 158;
  --tk-purple-rgb: 139, 69, 230;
  --tk-violet-rgb: 109, 92, 246;
  --tk-cobalt-rgb: 73, 108, 239;
  --tk-blue-rgb: 79, 134, 240;
  --tk-sky-rgb: 56, 174, 250;
  --tk-cyan-rgb: 34, 195, 230;
  --tk-aqua-rgb: 77, 218, 233;
  --tk-teal-rgb: 20, 184, 166;
  --tk-yellow-rgb: 255, 194, 61;
  --tk-peach-rgb: 255, 192, 138;
  --tk-blush-rgb: 255, 184, 214;
  --tk-orange-ink-rgb: 163, 72, 10;
  --tk-paper-rgb: 255, 252, 250;
  --tk-mist-rgb: 253, 240, 246;
  --tk-text-rgb: 27, 20, 32;
  --tk-dark-rgb: 22, 16, 29;
  --tk-dark-2-rgb: 34, 22, 48;
  --tk-navy-900-rgb: 9, 16, 37;
  --tk-navy-700-rgb: 22, 43, 111;
  --tk-sky-soft-rgb: 164, 216, 254;
  --tk-live-rgb: 34, 197, 94;

  /* gradients - each one a stretch of the journey */
  --tk-grad-primary: linear-gradient(110deg, var(--tk-orange) 0%, var(--tk-coral) 50%, var(--tk-pink) 100%);     /* orange > coral > pink: dark text */
  --tk-grad-secondary: linear-gradient(110deg, var(--tk-pink) 0%, var(--tk-magenta) 50%, var(--tk-purple) 100%); /* pink > magenta > purple */
  --tk-grad-accent: linear-gradient(110deg, var(--tk-violet) 0%, var(--tk-cobalt) 50%, var(--tk-sky) 100%);      /* violet > cobalt > sky */
  --tk-grad-cool: linear-gradient(110deg, var(--tk-sky) 0%, var(--tk-aqua) 100%);                                /* sky > aqua */
  /* the whole page, end to end */
  --tk-grad-journey: linear-gradient(90deg, var(--tk-orange) 0%, var(--tk-coral) 12%, var(--tk-pink) 25%,
    var(--tk-magenta) 38%, var(--tk-purple) 50%, var(--tk-violet) 62%, var(--tk-cobalt) 74%, var(--tk-sky) 87%, var(--tk-aqua) 100%);
  --tk-grad-ink: linear-gradient(110deg, #D11A6A 0%, #A21C8A 50%, #6D28D9 100%);       /* deep pink > purple: white text 5:1+ */
  --tk-grad-ink-loop: linear-gradient(110deg, #D11A6A 0%, #A21C8A 40%, #6D28D9 70%, #D11A6A 100%);
  /* the hero: deep navy under the words, opening through deep blue to a
     blue with a hint of indigo behind the phone; the stacked version runs
     top to bottom. White holds 8.6:1 or better on every stop. */
  --tk-grad-hero: linear-gradient(120deg, var(--tk-navy-950) 0%, var(--tk-blue-900) 30%, var(--tk-blue-800) 55%,
    var(--tk-blue-700) 78%, var(--tk-indigo-600) 100%);
  --tk-grad-hero-stacked: linear-gradient(175deg, var(--tk-navy-950) 0%, var(--tk-blue-900) 35%, var(--tk-blue-800) 62%,
    var(--tk-blue-700) 84%, var(--tk-indigo-600) 100%);
  --tk-grad-primary-loop: linear-gradient(110deg, #FFC23D 0%, #FF8A12 30%, #FF5E57 60%, #FF4797 100%, #FFC23D 140%);
  /* the stats band: magenta into purple */
  --tk-grad-stats: linear-gradient(160deg, var(--tk-grape-900) 0%, var(--tk-grape-800) 55%, var(--tk-grape-700) 100%);
  /* the closing band: periwinkle > sky > aqua, dark text 7:1 or better */
  --tk-grad-close: linear-gradient(100deg, #8F9CF5 0%, #6DB7FC 45%, #69E3F0 100%);
}

.home-page {
  /* --- 2. semantic tokens - what every component reads ------------------
     Each section re-points the accent ones to its own stage of the
     journey (see "Section colour"); these are the page defaults, which
     the navigation and anything outside a section keep. */
  --tk-accent-rgb: var(--tk-pink-rgb);          /* tints and glows */
  --tk-accent-2-rgb: var(--tk-orange-rgb);      /* the glow's second colour */
  --tk-ink-from: var(--tk-pink-ink);            /* the section's ink gradient, */
  --tk-ink-to: var(--tk-purple-ink);            /* which points to the next stage */

  /* the names below predate the system; each now points into it */
  --tk-night: var(--tk-dark);
  --tk-night-2: var(--tk-dark-2);
  --tk-night-3: var(--tk-dark-3);
  --tk-indigo: var(--tk-pink-ink);              /* accent text, icons, focus */
  --tk-indigo-hover: var(--tk-pink-ink-hover);
  --tk-iris: var(--tk-blush);                   /* accent on dark surfaces */
  --tk-ember: var(--tk-orange);
  --tk-ember-soft: var(--tk-peach);
  --tk-ember-ink: var(--tk-orange-ink);
  --tk-mist: #FDF0F6;
  --tk-mist-2: var(--tk-pink-100);
  --tk-indigo-50: var(--tk-pink-50);            /* accent tile */

  /* --- ink -------------------------------------------------------------- */
  --tk-fg: var(--tk-text);
  --tk-fg-soft: var(--tk-muted);
  --tk-fg-faint: var(--tk-subtle);
  --tk-on-night: var(--tk-white);
  --tk-on-night-soft: rgba(255, 240, 247, 0.86);
  --tk-on-night-faint: rgba(255, 232, 242, 0.72);
  --tk-on-navy-soft: rgba(236, 242, 255, 0.86);  /* the same, cool, for the blue hero */

  /* --- lines ------------------------------------------------------------ */
  --tk-line: rgba(var(--tk-text-rgb), 0.09);
  --tk-line-strong: rgba(var(--tk-pink-rgb), 0.26);
  --tk-line-night: rgba(255, 255, 255, 0.12);

  /* --- type ------------------------------------------------------------- */
  --tk-display: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* --- shape: radius follows hierarchy, never one value for everything -- */
  --tk-r-xl: clamp(28px, 3.2vw, 44px);   /* whole sections */
  --tk-r-lg: 28px;                        /* feature and story cards */
  --tk-r-md: 20px;                        /* inner panels */
  --tk-r-sm: 14px;                        /* icon tiles */

  /* --- elevation, warm-tinted ------------------------------------------- */
  --tk-shadow-1: 0 1px 2px rgba(var(--tk-text-rgb), 0.04), 0 10px 28px -14px rgba(var(--tk-text-rgb), 0.16);
  --tk-shadow-2: 0 2px 6px rgba(var(--tk-text-rgb), 0.05), 0 34px 64px -28px rgba(var(--tk-text-rgb), 0.3);
  --tk-glow: 0 18px 44px -14px rgba(var(--tk-pink-rgb), 0.55);

  --tk-grad: linear-gradient(110deg, var(--tk-ink-from) 0%, var(--tk-ink-to) 100%);
  --tk-grad-text: var(--tk-grad);
  --tk-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tk-ease-io: cubic-bezier(0.65, 0, 0.35, 1);

  /* film grain for the night surfaces: one static tile, never animated */
  --tk-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--tk-fg);
  background-color: var(--tk-wash-lavender);
  /* the page behind the sections only shows around the stats card and the
     closing band while they open. The stats band sits between 44% and 58%
     of the page at every width: orchid at its top (as Features ends),
     lavender at its foot (as Safety starts). Aqua under the closing band
     (as Contact ends). */
  background-image: linear-gradient(180deg, var(--tk-wash-orchid) 0%, var(--tk-wash-orchid) 44%,
    var(--tk-wash-lavender) 58%, var(--tk-wash-lavender) 66%, var(--tk-wash-aqua) 80%, var(--tk-wash-aqua) 100%);
  overflow-x: hidden;            /* belt and braces against decorative layers */
}

/* The derived tokens are declared again on every section, so they resolve
   against that section's own stage rather than the page default. */
.tk-hero,
.tk-band {
  --tk-line-strong: rgba(var(--tk-accent-rgb), 0.26);
  --tk-grad: linear-gradient(110deg, var(--tk-ink-from) 0%, var(--tk-ink-to) 100%);
  --tk-grad-text: var(--tk-grad);
}

/* styles.css sets a blanket `section { padding: 4rem 0 }`. Every home section
   carries .tk-hero or .tk-band, whose class-level padding wins over it. */

.home-page h1,
.home-page h2,
.home-page h3,
.home-page h4 {
  font-family: var(--tk-display);
  font-weight: 600;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.home-page h3 {
  letter-spacing: -0.012em;
}

.home-page p {
  text-wrap: pretty;
}

/* index.html alone loads this file, so `html` here cannot reach another
   page. Anchored sections clear the floating bar; the midnight only shows
   in an overscroll bounce, matching the hero above and the footer below. */
html {
  scroll-padding-top: calc(var(--tk-nav-h, 4.5rem) + 1.5rem);
  background-color: var(--tk-dark);
}

/* The page gutter, a little wider than the legal pages' 1200px */
.home-page .tk-shell {
  max-width: 1280px;
}

.tk-shell--narrow {
  max-width: 960px;
}

/* --- reading progress: the whole journey as a hairline across the top -----
   Scroll-driven, so it only exists where the browser supports that.     */
@supports (animation-timeline: scroll()) {
  .home-page::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 260;
    height: 2px;
    background-image: var(--tk-grad-journey);
    transform-origin: 0 50%;
    transform: scaleX(0);
    animation: tk-progress linear both;
    animation-timeline: scroll(root block);
    pointer-events: none;
  }

  @keyframes tk-progress {
    to { transform: scaleX(1); }
  }
}

/* ==========================================================================
   Navigation (home-only refinements of the shared css/nav.css bar)
   A compact floating capsule. js/home.js adds .is-dark while a night
   surface is under it and slides a pill to the section in view.
   ========================================================================== */

.home-page .tk-nav {
  padding: 0.875rem 0;
}

.home-page .tk-nav__inner {
  max-width: 68rem;
  margin-inline: auto;
  padding: 0 0.5rem 0 0.875rem;
  border-color: rgba(var(--tk-text-rgb), 0.07);
  background-color: rgba(var(--tk-paper-rgb), 0.74);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  box-shadow: 0 1px 2px rgba(var(--tk-text-rgb), 0.04), 0 12px 32px -16px rgba(var(--tk-text-rgb), 0.22);
  transition: background-color 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease,
    max-width 0.6s var(--tk-ease);
}

.home-page .tk-nav.is-stuck .tk-nav__inner {
  max-width: 64rem;
  border-color: rgba(var(--tk-text-rgb), 0.08);
  background-color: rgba(var(--tk-paper-rgb), 0.84);
}

/* the wordmark next to the logo tile, set like the logo itself */
.home-page .tk-brand span {
  font-family: var(--tk-display);
  font-style: italic;
  font-weight: 700;
  letter-spacing: -0.02em;
  transition: color 0.45s ease;
}

.home-page .tk-brand img {
  transition: transform 0.5s var(--tk-ease);
}

.home-page .tk-brand:hover img {
  transform: rotate(-8deg) scale(1.06);
}

.home-page .tk-nav__links {
  position: relative;
  gap: 0.125rem;
}

.home-page .tk-nav__links a {
  position: relative;
  z-index: 1;
  padding: 0.5rem 0.8125rem;
  font-size: 0.875rem;
  color: var(--tk-fg-soft);
  transition: color 0.3s ease, background-color 0.3s ease;
}

.home-page .tk-nav__links a:hover {
  color: var(--tk-fg);
  background-color: rgba(var(--tk-text-rgb), 0.05);
}

.home-page .tk-nav__links a.is-current {
  color: var(--tk-indigo);
  background-color: var(--tk-indigo-50);
}

/* The sliding pill. Once it exists (html.tk-pill) the links stop painting
   their own backgrounds and the pill travels between them instead. */
.tk-nav__pill {
  position: absolute;
  top: 50%;
  left: 0;
  height: 2.25rem;
  width: var(--w, 0);
  margin-top: -1.125rem;
  border-radius: 999px;
  background-color: var(--tk-indigo-50);
  transform: translateX(var(--x, 0));
  opacity: 0;
  transition: transform 0.5s var(--tk-ease), width 0.5s var(--tk-ease), opacity 0.3s ease,
    background-color 0.45s ease;
  pointer-events: none;
}

.tk-nav__pill.is-on {
  opacity: 1;
}

.tk-pill .home-page .tk-nav__links a,
.tk-pill .home-page .tk-nav__links a:hover,
.tk-pill .home-page .tk-nav__links a.is-current {
  background-color: transparent;
}

.tk-pill .home-page .tk-nav__links a.is-hot {
  color: var(--tk-indigo);
}

/* --- over a night surface -------------------------------------------- */

.home-page .tk-nav.is-dark .tk-nav__inner {
  border-color: rgba(255, 255, 255, 0.1);
  background-color: rgba(var(--tk-dark-rgb), 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 16px 40px -18px rgba(0, 0, 0, 0.6);
}

.home-page .tk-nav.is-dark .tk-brand {
  color: var(--color-white);
}

.home-page .tk-nav.is-dark .tk-nav__links a {
  color: var(--tk-on-night-soft);
}

.home-page .tk-nav.is-dark .tk-nav__links a:hover,
.home-page .tk-nav.is-dark .tk-nav__links a.is-current,
.tk-pill .home-page .tk-nav.is-dark .tk-nav__links a.is-hot {
  color: var(--color-white);
}

.home-page .tk-nav.is-dark .tk-nav__links a:hover,
.home-page .tk-nav.is-dark .tk-nav__links a.is-current {
  background-color: rgba(255, 255, 255, 0.09);
}

.home-page .tk-nav.is-dark .tk-nav__pill {
  background-color: rgba(255, 255, 255, 0.12);
}

.home-page .tk-nav.is-dark .tk-nav__burger span {
  background-color: var(--color-white);
}

.home-page .tk-nav.is-dark .tk-nav__burger:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* an open sheet is a light panel, so the bar above it goes light too */
.home-page .tk-nav.is-dark.is-open .tk-nav__inner {
  border-color: rgba(var(--tk-text-rgb), 0.08);
  background-color: rgba(var(--tk-paper-rgb), 0.92);
}

.home-page .tk-nav.is-dark.is-open .tk-brand {
  color: var(--tk-fg);
}

.home-page .tk-nav.is-dark.is-open .tk-nav__burger span {
  background-color: var(--tk-fg);
}

/* --- mobile sheet ------------------------------------------------------ */

/* never taller than the screen: on a landscape phone the sheet scrolls
   instead of running off the bottom with the CTA out of reach */
.home-page .tk-nav__sheet {
  max-height: calc(100vh - var(--tk-nav-h) - 1rem);
  max-height: calc(100dvh - var(--tk-nav-h) - 1rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.625rem;
  border-radius: var(--tk-r-lg);
  background-color: rgba(var(--tk-paper-rgb), 0.95);
}

.home-page .tk-nav__sheet ul a {
  min-height: 3.25rem;
  font-family: var(--tk-display);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.015em;
}

/* a quiet chevron: each row is a jump to a section */
.home-page .tk-nav__sheet ul a::after {
  content: '';
  width: 0.4375rem;
  height: 0.4375rem;
  flex-shrink: 0;
  margin-right: 0.25rem;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.3;
  transition: transform 0.2s var(--tk-ease), opacity 0.2s ease;
}

.home-page .tk-nav__sheet ul a:hover::after,
.home-page .tk-nav__sheet ul a.is-current::after {
  opacity: 0.9;
  transform: translateX(2px) rotate(45deg);
}

.home-page .tk-nav__sheet ul a.is-current {
  color: var(--tk-indigo);
  background-color: var(--tk-indigo-50);
}

/* the shared `.tk-nav__sheet a` row style also lands on the CTA and the
   store badges; put them back */
.home-page .tk-nav__sheet .tk-btn {
  justify-content: center;
  min-height: 3.25rem;
  border-radius: 999px;
  font-family: inherit;
  color: var(--color-white);
}

.home-page .tk-nav__sheet .tk-btn:hover {
  color: var(--color-white);
}

.home-page .tk-nav__sheet .tk-store,
.home-page .tk-nav__sheet .tk-store:hover {
  padding: 0;
  border-radius: 10px;
  background-color: transparent;
}

/* rows settle in one after another as the sheet opens */
@keyframes tk-sheet-row {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

.home-page .tk-nav.is-open .tk-nav__sheet li,
.home-page .tk-nav.is-open .tk-nav__sheet-foot {
  animation: tk-sheet-row 0.42s var(--tk-ease) both;
}

.home-page .tk-nav.is-open .tk-nav__sheet li:nth-child(2) { animation-delay: 0.03s; }
.home-page .tk-nav.is-open .tk-nav__sheet li:nth-child(3) { animation-delay: 0.06s; }
.home-page .tk-nav.is-open .tk-nav__sheet li:nth-child(4) { animation-delay: 0.09s; }
.home-page .tk-nav.is-open .tk-nav__sheet li:nth-child(5) { animation-delay: 0.12s; }
.home-page .tk-nav.is-open .tk-nav__sheet li:nth-child(6) { animation-delay: 0.15s; }
.home-page .tk-nav.is-open .tk-nav__sheet-foot { animation-delay: 0.18s; }

/* landscape phones: two columns of rows, so most of the sheet fits */
@media (max-width: 1040px) and (orientation: landscape) and (max-height: 540px) {
  .home-page .tk-nav__sheet ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 0.25rem;
  }

  .home-page .tk-nav__sheet-foot {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    align-items: center;
  }
}

@media (max-width: 1040px) {
  .home-page .tk-nav__inner {
    max-width: none;
  }

  .home-page .tk-nav.is-stuck .tk-nav__inner {
    max-width: none;
  }
}

/* ==========================================================================
   Buttons (home overrides of the shared nav.css primitives)
   ========================================================================== */

.home-page .tk-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: transform 0.35s var(--tk-ease), box-shadow 0.35s var(--tk-ease),
    background-color 0.3s ease, background-position 0.7s var(--tk-ease),
    border-color 0.3s ease, color 0.3s ease;
}

/* indigo into violet; the gradient slides on hover and a sheen crosses it */
.home-page .tk-btn--primary {
  background-color: var(--tk-indigo);
  background-image: var(--tk-grad-ink-loop);
  background-size: 220% 100%;
  background-position: 0% 50%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 10px 26px -10px rgba(var(--tk-accent-rgb), 0.75);
}

.home-page .tk-btn--primary::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -45%;
  z-index: -1;
  width: 35%;
  background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.34) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-18deg);
  pointer-events: none;
}

.home-page .tk-btn--primary:hover {
  transform: translateY(-2px);
  background-position: 70% 50%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 0 0 5px rgba(var(--tk-magenta-rgb), 0.16),
    0 20px 38px -12px rgba(var(--tk-accent-rgb), 0.8);
}

.home-page .tk-btn--primary:hover::after {
  left: 125%;
  transition: left 0.8s var(--tk-ease);
}

.home-page .tk-btn--ghost {
  border-color: var(--tk-line-strong);
  background-color: var(--color-white);
  color: var(--tk-fg);
  box-shadow: 0 1px 2px rgba(var(--tk-text-rgb), 0.04);
}

.home-page .tk-btn--ghost:hover {
  transform: translateY(-2px);
  border-color: var(--tk-indigo);
  background-color: var(--tk-indigo-50);
  color: var(--tk-indigo);
}

.home-page .tk-btn--light {
  background-color: var(--color-white);
  color: var(--tk-indigo);
  box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.6);
}

.home-page .tk-btn--light:hover {
  transform: translateY(-2px);
  background-color: var(--color-white);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.12), 0 20px 42px -12px rgba(0, 0, 0, 0.65);
}

/* pressed: settles back down, after every hover lift above */
.home-page .tk-btn:active {
  transform: translateY(0) scale(0.975);
  transition-duration: 0.08s;
}

/* not used by any button today; defined so a future one is covered */
.home-page .tk-btn:disabled,
.home-page .tk-btn[aria-disabled="true"] {
  opacity: 0.5;
  box-shadow: none;
  transform: none;
  pointer-events: none;
}

/* ==========================================================================
   Shared section parts
   ========================================================================== */

.tk-band {
  position: relative;
  background-color: var(--tk-paper);
  padding-block: clamp(4rem, 8vw, 7rem);
}

/* the pinned stories scene centres itself in the screen, which already
   leaves air above it */
.tk-safety {
  padding-bottom: clamp(3rem, 5vw, 4rem);
}

.tk-band > .tk-shell {
  position: relative;
}

/* the night surface, used by the stats band and the closing band */
.tk-band--dark {
  background-color: var(--tk-night);
  color: var(--color-white);
  overflow: hidden;
  isolation: isolate;
}

.tk-band--dark::after,
.tk-hero__bg::after,
.tk-footer::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--tk-grain);
  opacity: 0.06;
  pointer-events: none;
}

/* Section label. Sentence case as written, led by a small listening ring. */
.tk-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--tk-indigo);
}

.tk-eyebrow::before {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: currentColor;
  box-shadow: 0 0 0 3px rgba(var(--tk-accent-rgb), 0.14), 0 0 0 7px rgba(var(--tk-accent-rgb), 0.06);
}

.tk-band--dark .tk-eyebrow {
  color: var(--tk-iris);
}

.tk-band--dark .tk-eyebrow::before {
  box-shadow: 0 0 0 3px rgba(var(--tk-blush-rgb), 0.16), 0 0 0 7px rgba(var(--tk-blush-rgb), 0.07);
}

/* Section masthead: label + title + standfirst, stacked and left-aligned.
   Sections that want the standfirst beside the title opt in below. */
.tk-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  margin: 0 0 clamp(2.5rem, 5vw, 4.5rem);
  text-align: left;
}

.tk-head__title {
  margin-top: 1.125rem;
  font-size: clamp(2.125rem, 1.35rem + 3vw, 3.75rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.038em;
}

.tk-head__title em {
  font-style: italic;
  font-weight: 700;
  color: var(--tk-indigo);
  background-image: var(--tk-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-right: 0.08em;           /* keeps the italic overhang inside the clip */
}

.tk-head__text {
  max-width: 36rem;
  margin-top: 1.25rem;
  font-size: clamp(1rem, 0.96rem + 0.22vw, 1.125rem);
  line-height: 1.7;
  color: var(--tk-fg-soft);
}

.tk-band--dark .tk-head__title {
  color: var(--color-white);
}

.tk-band--dark .tk-head__text {
  color: var(--tk-on-night-soft);
}

/* the page-spread masthead: title left, standfirst in a second column */
@media (min-width: 960px) {
  .tk-features .tk-head,
  .tk-stories .tk-head,
  .tk-contact-band .tk-head {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    column-gap: clamp(3rem, 7vw, 7rem);
    align-items: end;
  }

  .tk-features .tk-head > .tk-eyebrow,
  .tk-features .tk-head > .tk-head__title,
  .tk-stories .tk-head > .tk-eyebrow,
  .tk-stories .tk-head > .tk-head__title,
  .tk-contact-band .tk-head > .tk-eyebrow,
  .tk-contact-band .tk-head > .tk-head__title {
    grid-column: 1;
  }

  .tk-features .tk-head__text,
  .tk-stories .tk-head__text,
  .tk-contact-band .tk-head__text {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin-top: 0;
    padding-bottom: 0.4rem;
  }
}

/* Inline links: always underlined (colour alone is not a link cue), the
   underline firming up on hover. */
.tk-link {
  font-weight: 600;
  color: var(--tk-indigo);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.22em;
  text-decoration-color: rgba(var(--tk-accent-rgb), 0.32);
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.tk-link:hover {
  color: var(--tk-indigo-hover);
  text-decoration-color: currentColor;
}

.tk-band--dark .tk-link {
  color: var(--tk-iris);
  text-decoration-color: rgba(var(--tk-blush-rgb), 0.4);
}

.tk-band--dark .tk-link:hover {
  color: var(--color-white);
}

/* --- app store badges, on the night surfaces --------------------------
   The black artwork needs a rim to read as an object on midnight.       */
.tk-hero .tk-store,
.tk-band--dark .tk-store,
.tk-footer .tk-store {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2), 0 10px 26px rgba(0, 0, 0, 0.45);
}

.tk-hero .tk-store:hover,
.tk-band--dark .tk-store:hover,
.tk-footer .tk-store:hover {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.42), 0 16px 34px rgba(0, 0, 0, 0.55);
}

/* --- focus ------------------------------------------------------------- */

.home-page a:focus-visible,
.home-page button:focus-visible {
  outline: 2px solid var(--tk-indigo);
  outline-offset: 3px;
}

/* nav.css squares every focused control in the bar to 6px; the ring should
   follow each control's own shape instead */
.home-page .tk-btn:focus-visible,
.home-page .tk-nav__links a:focus-visible,
.home-page .tk-nav__burger:focus-visible,
.home-page .tk-step__tag:focus-visible {
  border-radius: 999px;
}

.home-page .tk-nav__sheet ul a:focus-visible,
.home-page .tk-faq__q:focus-visible {
  border-radius: var(--tk-r-sm);
}

.home-page .tk-store:focus-visible,
.home-page .tk-brand:focus-visible {
  border-radius: 10px;
}

.tk-hero a:focus-visible,
.tk-band--dark a:focus-visible,
.tk-band--dark button:focus-visible,
.tk-footer a:focus-visible,
.tk-contact__card:first-child a:focus-visible,
.tk-step--highlight a:focus-visible,
.home-page .tk-nav.is-dark:not(.is-open) a:focus-visible,
.home-page .tk-nav.is-dark:not(.is-open) button:focus-visible {
  outline-color: var(--color-white);
}

.home-page .tk-band--cta a:focus-visible,
.home-page .tk-band--cta button:focus-visible,
.home-page .tk-step--highlight a:focus-visible {
  outline-color: var(--tk-text);
}

/* --- shared loops ------------------------------------------------------ */

@keyframes tk-pulse {
  0% { box-shadow: 0 0 0 0 rgba(var(--tk-live-rgb), 0.55); }
  70% { box-shadow: 0 0 0 8px rgba(var(--tk-live-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--tk-live-rgb), 0); }
}

@keyframes tk-ripple {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(2.35); opacity: 0; }
}

@keyframes tk-spin {
  to { transform: rotate(360deg); }
}

@keyframes tk-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -10px, 0); }
}

@keyframes tk-twinkle {
  0%, 100% { opacity: 0.35; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1); }
}

@keyframes tk-bar {
  0%, 100% { transform: scaleY(0.35); }
  50% { transform: scaleY(1); }
}

/* ==========================================================================
   Card spotlight
   js/home.js writes the pointer position into --mx / --my on hover (fine
   pointers only). ::before is a soft wash under the pointer, ::after a
   glowing edge that follows it. Without the script both stay hidden.
   ========================================================================== */

.tk-card,
.tk-story,
.tk-contact__card {
  position: relative;
  isolation: isolate;
}

.tk-card::before,
.tk-story::before,
.tk-contact__card:not(:first-child)::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(440px circle at var(--mx, 50%) var(--my, 0%), rgba(var(--tk-accent-rgb), 0.09), rgba(var(--tk-accent-rgb), 0) 45%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.tk-card::after,
.tk-story::after,
.tk-contact__card:not(:first-child)::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 0%), rgba(var(--tk-accent-rgb), 0.9), rgba(var(--tk-accent-2-rgb), 0.45) 40%, rgba(var(--tk-accent-2-rgb), 0) 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.tk-card:hover::before,
.tk-card:hover::after,
.tk-story:hover::before,
.tk-story:hover::after,
.tk-contact__card:not(:first-child):hover::before,
.tk-contact__card:not(:first-child):hover::after {
  opacity: 1;
}

/* ==========================================================================
   Hero - the night, the phone, and the rings of a call ringing out
   ========================================================================== */

.tk-hero {
  position: relative;
  z-index: 0;
  isolation: isolate;
  overflow: hidden;
  padding-top: calc(var(--tk-nav-h) + clamp(3rem, 7vw, 6.5rem));
  padding-bottom: calc(clamp(5.5rem, 9vw, 8rem) + var(--tk-r-xl));
  color: var(--color-white);
  background-color: var(--tk-night);
}

.tk-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background:
    /* the reference's two circles, in the journey's own colours: a sky
       light top-left (above the words) and a violet one top-right */
    radial-gradient(16% 22% at 0% 0%, rgba(var(--tk-sky-rgb), 0.32) 0%, rgba(var(--tk-sky-rgb), 0) 70%),
    radial-gradient(18% 26% at 100% 0%, rgba(var(--tk-violet-rgb), 0.45) 0%, rgba(var(--tk-violet-rgb), 0) 70%),
    /* a low dawn along the foot, where the About panel rises: the first
       warmth of the journey below */
    radial-gradient(42% 30% at 82% 100%, rgba(var(--tk-coral-rgb), 0.38) 0%, rgba(var(--tk-coral-rgb), 0) 70%),
    var(--tk-grad-hero);
}

/* stacked hero: the words take the top, so the gradient runs downward and
   the blue opens out behind the phone */
@media (max-width: 960px) {
  .tk-hero__bg {
    background:
      radial-gradient(16% 10% at 0% 0%, rgba(var(--tk-sky-rgb), 0.4) 0%, rgba(var(--tk-sky-rgb), 0) 70%),
      radial-gradient(40% 12% at 100% 0%, rgba(var(--tk-violet-rgb), 0.4) 0%, rgba(var(--tk-violet-rgb), 0) 70%),
      radial-gradient(70% 12% at 70% 100%, rgba(var(--tk-coral-rgb), 0.38) 0%, rgba(var(--tk-coral-rgb), 0) 70%),
      var(--tk-grad-hero-stacked);
  }
}

/* a slow turning aurora behind the phone - a conic field faded at its
   edge by a radial mask, so it needs no blur filter */
.tk-hero__aurora {
  position: absolute;
  top: 50%;
  left: 72%;
  width: min(72rem, 110vw);
  aspect-ratio: 1;
  margin: calc(min(72rem, 110vw) / -2) 0 0 calc(min(72rem, 110vw) / -2);
  /* three blues of near-equal lightness, so the field's centre doesn't
     show as a point against the navy */
  background: conic-gradient(from 90deg,
    rgba(var(--tk-blue-rgb), 0) 0deg,
    rgba(var(--tk-blue-rgb), 0.24) 70deg,
    rgba(var(--tk-violet-rgb), 0.26) 140deg,
    rgba(var(--tk-cobalt-rgb), 0.24) 220deg,
    rgba(var(--tk-blue-rgb), 0) 300deg,
    rgba(var(--tk-blue-rgb), 0) 360deg);
  border-radius: 50%;
  -webkit-mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, 0.5) 45%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, 0.5) 45%, transparent 100%);
  opacity: 0.8;
  animation: tk-spin 60s linear infinite;
  will-change: transform;
}

/* the lamp: a soft light that follows the pointer across the night */
.tk-hero__lamp {
  position: absolute;
  top: 0;
  left: 0;
  width: 44rem;
  height: 44rem;
  margin: -22rem 0 0 -22rem;
  background: radial-gradient(closest-side, rgba(var(--tk-sky-soft-rgb), 0.16), rgba(var(--tk-sky-soft-rgb), 0));
  transform: translate3d(var(--lx, 70vw), var(--ly, 40vh), 0);
  opacity: 0;
  transition: opacity 0.8s ease;
  will-change: transform;
}

.tk-hero.is-lit .tk-hero__lamp {
  opacity: 1;
}

.tk-hero > .tk-shell {
  position: relative;
  transform-origin: 50% 0;
}

.tk-hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}

.tk-hero__copy {
  position: relative;
  z-index: 2;
}

/* hero label: a glass pill with a warm live dot */
.tk-hero .tk-eyebrow {
  padding: 0.5rem 1rem 0.5rem 0.8125rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.9);
}

.tk-hero .tk-eyebrow::before {
  width: 0.4375rem;
  height: 0.4375rem;
  background-color: var(--tk-ember);
  box-shadow: 0 0 0 3px rgba(var(--tk-orange-rgb), 0.2), 0 0 12px rgba(var(--tk-orange-rgb), 0.9);
}

/* The headline may run past its column into the rings - the phone sits
   far enough right that it never meets the words. */
.tk-hero__title {
  margin-top: 1.5rem;
  width: max-content;
  max-width: calc(100% + 8rem);
  font-size: clamp(2.6rem, 5.3vw, 4.875rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.045em;
  color: var(--color-white);
}

/* each line rides up out of its own mask on arrival */
.tk-line {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0 0.12em 0.14em 0;
  margin-bottom: -0.14em;
}

.tk-line > span,
.tk-line > em {
  display: inline-block;
}

.tk-hero__title em {
  font-style: italic;
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--tk-peach);
  background-image: linear-gradient(98deg, var(--tk-white) 0%, var(--tk-yellow-soft) 34%, var(--tk-peach) 64%, var(--tk-blush) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-right: 0.08em;
}

.tk-hero__text {
  max-width: 36rem;
  margin-top: 1.75rem;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.72;
  color: var(--tk-on-night-soft);
}

/* the hero copy carries hard line breaks so the paragraph reads exactly as
   authored; below the wide breakpoint the column is too narrow for them, so
   the text falls back to natural wrapping */
@media (min-width: 1201px) {
  .tk-hero__text {
    max-width: none;
  }
}

@media (max-width: 1200px) {
  .tk-hero__text br {
    display: none;
  }
}

.tk-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: clamp(2rem, 3vw, 2.5rem);
}

.tk-hero__actions .tk-btn {
  padding: 1.0625rem 1.75rem;
  font-size: 1rem;
}

.home-page .tk-hero .tk-btn--primary {
  background-color: var(--tk-orange);
  background-image: var(--tk-grad-primary-loop);
  color: var(--tk-text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 14px 32px -10px rgba(var(--tk-orange-rgb), 0.65);
}

.home-page .tk-hero .tk-btn--primary:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 0 5px rgba(var(--tk-yellow-rgb), 0.25),
    0 20px 40px -12px rgba(var(--tk-pink-rgb), 0.7);
}

.home-page .tk-hero .tk-btn--primary::after {
  background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.45) 50%, rgba(255, 255, 255, 0) 100%);
}

.tk-hero .tk-btn--ghost {
  border-color: rgba(255, 255, 255, 0.2);
  background-color: rgba(255, 255, 255, 0.04);
  color: var(--color-white);
  box-shadow: none;
}

.tk-hero .tk-btn--ghost:hover {
  border-color: rgba(255, 255, 255, 0.5);
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--color-white);
}

.tk-hero__stores {
  margin-top: 1.25rem;
}

.tk-hero__note {
  margin-top: 1rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--tk-on-night-soft);
}

.tk-hero__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  gap: 0.875rem 2rem;
  margin-top: 2.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--tk-line-night);
}

.tk-hero__facts li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9063rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
}

.tk-hero__facts svg {
  width: 2.125rem;
  height: 2.125rem;
  flex-shrink: 0;
  padding: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--tk-iris);
}

/* --- the phone and its rings ----------------------------------------- */

.tk-hero__visual {
  position: relative;
  z-index: 1;
  perspective: 1400px;
}

.tk-rings {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.tk-rings i,
.tk-rings b {
  position: absolute;
  border-radius: 50%;
}

.tk-rings i {
  border: 1px solid rgba(var(--tk-sky-soft-rgb), 0.14);
}

.tk-rings i:nth-child(1) { inset: 34%; border-color: rgba(var(--tk-sky-soft-rgb), 0.24); }
.tk-rings i:nth-child(2) { inset: 24%; }
.tk-rings i:nth-child(3) { inset: 12%; border-color: rgba(var(--tk-sky-soft-rgb), 0.1); }
.tk-rings i:nth-child(4) { inset: 0; border-color: rgba(var(--tk-sky-soft-rgb), 0.05); }

/* the ripple: a ring leaving the phone every few seconds */
.tk-rings b {
  inset: 34%;
  border: 1.5px solid rgba(var(--tk-sky-soft-rgb), 0.55);
  opacity: 0;
  animation: tk-ripple 6s cubic-bezier(0.2, 0.6, 0.35, 1) infinite;
  will-change: transform, opacity;
}

.tk-rings b + b {
  animation-delay: 3s;
  border-color: rgba(var(--tk-aqua-rgb), 0.45);
}

.tk-hero__device {
  position: relative;
  width: min(100%, 36rem);
  margin-inline: auto;
  transform: rotateX(calc(var(--py, 0) * -5deg)) rotateY(calc(var(--px, 0) * 7deg));
  transition: transform 0.9s var(--tk-ease);
}

/* the mockup PNG carries wide transparent margins, so the phone is scaled up
   past its box; `scale` composes with the float animation's transform */
.tk-hero__phone {
  width: 100%;
  height: auto;
  scale: 1.42;
  filter: drop-shadow(0 50px 60px rgba(var(--tk-dark-rgb), 0.55));
  animation: tk-float 9s ease-in-out infinite;
}

/* --- status chips: dark glass, each at its own depth ----------------- */

.tk-chip {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem 0.75rem 0.8125rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  background-color: rgba(var(--tk-navy-900-rgb), 0.8);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 24px 44px -20px rgba(0, 0, 0, 0.7);
  white-space: nowrap;
  transform: translate3d(calc(var(--px, 0) * var(--depth) * 1px), calc(var(--py, 0) * var(--depth) * 1px), 0);
  transition: transform 0.9s var(--tk-ease);
}

.tk-chip__label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-white);
}

.tk-chip__sub {
  display: block;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--tk-iris);
}

/* Out at the phone's edges, clear of the screen. The device box is the
   phone image at 1/1.42 (see .tk-hero__phone), so these hold the same
   distance from the phone at every width. The first sits on the phone's
   upper-left edge rather than above its corner: the headline runs on
   past its column, and above the corner it would meet the last word. */
.tk-chip--online {
  --depth: -26;
  top: 10%;
  left: -8%;
}

/* never past the page gutter: where the phone runs to the content edge,
   the chip stops short of the screen edge instead of being clipped */
.tk-chip--call {
  --depth: 34;
  top: 44%;
  right: max(-15%, calc((min(100vw, 1280px) - 100vw) / 2 - clamp(1.15rem, 4vw, 2rem) + 1rem));
}

.tk-chip--safe {
  --depth: -18;
  bottom: -6%;
  left: -10%;
}

.tk-dot-live {
  position: relative;
  width: 0.625rem;
  height: 0.625rem;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--tk-live);
  animation: tk-pulse 2.4s ease-out infinite;
}

.tk-wave {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 1.25rem;
}

.tk-wave span {
  width: 3px;
  height: 100%;
  border-radius: 3px;
  background-image: linear-gradient(180deg, var(--tk-pink), var(--tk-orange));
  transform-origin: 50% 50%;
  animation: tk-bar 1.1s ease-in-out infinite;
}

.tk-wave span:nth-child(2) { animation-delay: -0.25s; }
.tk-wave span:nth-child(3) { animation-delay: -0.5s; }
.tk-wave span:nth-child(4) { animation-delay: -0.15s; }
.tk-wave span:nth-child(5) { animation-delay: -0.4s; }

.tk-chip__icon {
  display: grid;
  place-items: center;
  width: 1.875rem;
  height: 1.875rem;
  flex-shrink: 0;
  border-radius: 50%;
  background-image: var(--tk-grad);
  color: var(--color-white);
  box-shadow: 0 4px 14px rgba(var(--tk-accent-rgb), 0.6);
}

.tk-chip__icon svg {
  width: 0.9375rem;
  height: 0.9375rem;
}

/* --- scroll cue: a drop travelling down a thread --------------------- */

.tk-hero__cue {
  position: absolute;
  left: 50%;
  bottom: calc(var(--tk-r-xl) + 1.5rem);
  width: 1px;
  height: 3rem;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.14);
}

.tk-hero__cue i {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1rem;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--tk-white));
  animation: tk-cue 2.4s var(--tk-ease-io) infinite;
}

@keyframes tk-cue {
  from { transform: translateY(-1rem); }
  to { transform: translateY(3rem); }
}

/* --- arrival: one orchestrated sequence on load -----------------------
   Pure CSS, so it plays even if the script never arrives.               */

@keyframes tk-enter {
  from { opacity: 0; transform: translateY(18px); filter: blur(8px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}

@keyframes tk-rise {
  from { transform: translateY(108%); }
  to { transform: none; }
}

@keyframes tk-stage {
  from { opacity: 0; transform: translateY(30px) scale(0.92); }
  to { opacity: 1; transform: none; }
}

.tk-hero [data-enter] {
  animation: tk-enter 1s var(--tk-ease) both;
  animation-delay: calc(var(--d, 0) * 1ms + 120ms);
}

.tk-line > span,
.tk-line > em {
  animation: tk-rise 1.15s var(--tk-ease) both;
  animation-delay: calc(var(--d, 0) * 1ms + 120ms);
}

.tk-hero .tk-hero__visual[data-enter] {
  animation-name: tk-stage;
  animation-duration: 1.5s;
}

/* --- hero responsive -------------------------------------------------- */

@media (max-width: 960px) {
  .tk-hero {
    padding-top: calc(var(--tk-nav-h) + 3rem);
  }

  .tk-hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 3.5rem;
  }

  .tk-hero__title {
    width: auto;
    max-width: none;
    font-size: clamp(2rem, 8.4vw, 4rem);
  }

  .tk-hero__visual {
    max-width: 34rem;
    width: 100%;
    margin-inline: auto;
  }

  .tk-hero__phone {
    scale: 1.15;
  }

  /* stacked, the phone image is 1.15x its box: these put the two chips
     at the phone's top-left and right, clear of the screen, and leave
     the third out - there is no room beside the phone for it */
  .tk-chip--online { top: 3%; left: 6%; }
  .tk-chip--call { top: 45%; right: 6%; }
  .tk-chip--safe { display: none; }

  .tk-hero__cue {
    display: none;
  }
}

@media (max-width: 560px) {
  /* the label holds one line on a phone */
  .tk-hero .tk-eyebrow {
    padding-inline: 0.75rem 0.875rem;
    font-size: 0.6875rem;
    letter-spacing: 0.03em;
  }

  .tk-hero__actions .tk-btn {
    flex: 1 1 100%;
  }

  .tk-hero__facts {
    grid-template-columns: minmax(0, 1fr);
  }

  .tk-rings {
    width: 125%;
  }

  .tk-chip {
    gap: 0.5rem;
    padding: 0.5rem 0.75rem 0.5rem 0.625rem;
    border-radius: 14px;
  }

  .tk-chip__label {
    font-size: 0.75rem;
  }

  .tk-chip__sub {
    font-size: 0.6875rem;
  }

  /* on a phone: one chip above the phone's top-left, one below its
     bottom-right */
  .tk-chip--online { top: 4%; left: 7%; }
  .tk-chip--call { top: auto; bottom: 12%; right: 7%; }
}

@media (max-height: 760px) {
  .tk-hero__cue {
    display: none;
  }
}

/* ==========================================================================
   About - a paper panel that slides over the night. The heading holds its
   place while the lead paragraph inks in, word by word, as it is read.
   ========================================================================== */

.tk-about {
  z-index: 2;
  margin-top: calc(var(--tk-r-xl) * -1);
  border-radius: var(--tk-r-xl) var(--tk-r-xl) 0 0;
  box-shadow: 0 -30px 60px -24px rgba(var(--tk-dark-rgb), 0.6);
}

.tk-about__grid {
  display: grid;
  gap: clamp(3.5rem, 7vw, 6rem);
}

.tk-about__lead {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

.tk-about__lead > .tk-head {
  position: sticky;
  top: calc(var(--tk-nav-h) + 2.5rem);
  margin: 0;
}

.tk-about .tk-head__title {
  font-size: clamp(2.125rem, 1.3rem + 2.6vw, 3.5rem);
}

.tk-about__prose {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem clamp(1.5rem, 3vw, 2.75rem);
  padding-top: 2.4rem;
}

.tk-about__prose p {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--tk-fg-soft);
}

.tk-about__prose p:first-child {
  grid-column: 1 / -1;
  margin-bottom: 0.75rem;
  font-family: var(--tk-display);
  font-size: clamp(1.375rem, 0.95rem + 1.45vw, 2.125rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.022em;
  color: var(--tk-fg);
}

/* the ink: js/home.js wraps each word and writes --f (0 -> 1) on the
   paragraph; a word is lit once the fill passes its index. With no script
   (or reduced motion) --f is 1 and every word is simply ink. */
.tk-ink {
  opacity: clamp(0.14, calc(var(--f, 1) * var(--n, 1) - var(--i, 0)), 1);
  transition: opacity 0.25s linear;
}

/* the four notes: an index row under hairlines, not four more cards */
.tk-about__cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 clamp(1.5rem, 3vw, 2.5rem);
}

.tk-note {
  display: grid;
  align-content: start;
  gap: 1.125rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--tk-line);
  position: relative;
}

/* the hairline above each note draws in on hover, in the warm stretch of
   the journey that About sits in */
.tk-note::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background-image: var(--tk-grad-primary);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.7s var(--tk-ease);
}

.tk-note:hover::before {
  transform: scaleX(1);
}

.tk-note__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--tk-r-sm);
  background-color: var(--tk-indigo-50);
  color: var(--tk-indigo);
  transition: background-color 0.4s ease, color 0.4s ease, transform 0.5s var(--tk-ease);
}

.tk-note__icon svg {
  width: 1.3125rem;
  height: 1.3125rem;
}

.tk-note:hover .tk-note__icon {
  background-color: var(--tk-indigo);
  color: var(--color-white);
  transform: rotate(-6deg);
}

.tk-note h3 {
  font-size: 1.0625rem;
  line-height: 1.35;
}

.tk-note p {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--tk-fg-soft);
}

@media (max-width: 1100px) {
  .tk-about__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 2.5rem;
  }
}

@media (max-width: 900px) {
  .tk-about__lead {
    grid-template-columns: minmax(0, 1fr);
  }

  .tk-about__lead > .tk-head {
    position: static;
  }

  .tk-about__prose {
    padding-top: 0;
  }
}

@media (max-width: 640px) {
  .tk-about__prose,
  .tk-about__cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .tk-about__cards {
    row-gap: 2rem;
  }
}

/* ==========================================================================
   How it works - six steps. On a large screen they stack as you scroll,
   each settling over the last with the one before it receding; elsewhere
   they are a plain sequence of panels.
   ========================================================================== */

.tk-how > .tk-shell {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

.tk-how .tk-head {
  position: sticky;
  top: calc(var(--tk-nav-h) + 3rem);
  margin: 0;
}

.tk-steps {
  display: grid;
  gap: 1rem;
}

.tk-step {
  --i: 0;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: start;
  column-gap: 1.5rem;
  min-height: 13rem;
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  border: 1px solid var(--tk-line);
  border-radius: var(--tk-r-lg);
  background-color: var(--color-white);
  box-shadow: var(--tk-shadow-1);
  transform-origin: 50% 0;
}

.tk-step:nth-child(2) { --i: 1; }
.tk-step:nth-child(3) { --i: 2; }
.tk-step:nth-child(4) { --i: 3; }
.tk-step:nth-child(5) { --i: 4; }
.tk-step:nth-child(6) { --i: 5; }

.tk-step__num {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--tk-display);
  font-size: clamp(2.75rem, 2rem + 2vw, 3.75rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--tk-indigo);
  background-image: linear-gradient(180deg, var(--tk-ink-from) 0%, var(--tk-ink-to) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.tk-step__icon {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.6875rem;
  border-radius: var(--tk-r-sm);
  background-color: var(--tk-indigo-50);
  color: var(--tk-indigo);
}

.tk-step h3 {
  grid-column: 1 / -1;
  margin-top: 1.5rem;
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  line-height: 1.25;
}

.tk-step p {
  grid-column: 1 / -1;
  max-width: 34rem;
  margin-top: 0.5rem;
  font-size: 0.9688rem;
  line-height: 1.65;
  color: var(--tk-fg-soft);
}

/* the free first call: the one step in brand colour */
.tk-step--highlight {
  /* the bright card: orange > coral > pink, dark text (4.9:1 or better) */
  border-color: transparent;
  background-color: var(--tk-orange);
  background-image:
    radial-gradient(55% 90% at 100% 0%, rgba(var(--tk-yellow-rgb), 0.5) 0%, rgba(var(--tk-yellow-rgb), 0) 70%),
    linear-gradient(135deg, var(--tk-orange) 0%, var(--tk-coral) 55%, var(--tk-pink) 100%);
  color: var(--tk-text);
  box-shadow: 0 22px 48px -18px rgba(var(--tk-pink-rgb), 0.6);
}

.tk-step--highlight .tk-step__num {
  color: var(--tk-text);
  background-image: linear-gradient(180deg, var(--tk-text) 0%, rgba(var(--tk-text-rgb), 0.62) 100%);
}

.tk-step--highlight .tk-step__icon {
  background-color: rgba(255, 255, 255, 0.35);
  color: var(--tk-text);
}

.tk-step--highlight h3,
.tk-step--highlight p {
  color: var(--tk-text);
}

/* The spark bursts off the top of the gift tile, outside it. The mark is
   drawn as two mirrored three-stroke bursts; it is centred on the tile
   (the 2.75rem tile sits in the card's top-right corner, at the card's
   padding), turned a quarter so the right-hand burst fans upward, and the
   other burst - which would point down into the card - is clipped away.
   At this size the strokes start ~6px above the tile and reach ~17px. */
.tk-step__spark {
  --pad: clamp(1.5rem, 2.6vw, 2.25rem);
  position: absolute;
  top: calc(var(--pad) + 1.375rem);
  right: calc(var(--pad) + 1.375rem);
  width: 5rem;
  color: var(--tk-text);
  opacity: 0.9;
  pointer-events: none;
  /* keep the right half (the slight overhang leaves the round caps whole),
     then turn it to point up */
  clip-path: inset(-0.25rem -0.25rem -0.25rem 50%);
  transform: translate(50%, -50%) rotate(-90deg);
}

.tk-step__spark svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.tk-step__tag {
  grid-column: 1 / -1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding: 0.5625rem 1rem 0.5625rem 0.8125rem;
  border-radius: 999px;
  background-color: var(--tk-text);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--tk-white);
  box-shadow: 0 10px 24px -10px rgba(var(--tk-dark-rgb), 0.55);
  transition: transform 0.35s var(--tk-ease), box-shadow 0.35s var(--tk-ease);
}

.tk-step__tag svg {
  width: 1rem;
  height: 1rem;
  color: var(--tk-yellow);
}

.tk-step__tag:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.16), 0 14px 28px -10px rgba(var(--tk-dark-rgb), 0.6);
}

/* each covered panel dims a touch as the next settles over it */
.tk-step::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: var(--tk-night);
  opacity: calc(var(--depth, 0) * 0.035);
  pointer-events: none;
}

@media (max-width: 960px) {
  .tk-how > .tk-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .tk-how .tk-head {
    position: static;
    margin-bottom: 0.5rem;
  }
}

@media (max-width: 480px) {
  .tk-step {
    min-height: 0;
  }
}

/* ==========================================================================
   Features - a bento, weighted by what matters most. Each card holds a
   small piece of the product rather than a generic illustration.
   ========================================================================== */

.tk-bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1.25rem;
}

.tk-card {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: clamp(1.625rem, 2.5vw, 2.25rem);
  border: 1px solid var(--tk-line);
  border-radius: var(--tk-r-lg);
  background-color: var(--color-white);
  box-shadow: var(--tk-shadow-1);
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.6s var(--tk-ease), box-shadow 0.5s var(--tk-ease);
}

.tk-card:hover {
  box-shadow: var(--tk-shadow-2);
}

.tk-card--wide {
  grid-column: span 7;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
  background-image: radial-gradient(70% 90% at 100% 100%, var(--tk-mist) 0%, rgba(var(--tk-mist-rgb), 0) 70%);
}

.tk-card--voice {
  grid-column: span 5;
}

.tk-card--coins,
.tk-card--night {
  grid-column: span 6;
}

.tk-card__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 1.375rem;
  border-radius: var(--tk-r-sm);
  background-color: var(--tk-indigo-50);
  color: var(--tk-indigo);
  transition: transform 0.6s var(--tk-ease), background-color 0.4s ease, color 0.4s ease;
}

.tk-card__icon svg {
  width: 1.3125rem;
  height: 1.3125rem;
}

.tk-card:hover .tk-card__icon {
  transform: translateY(-2px) rotate(-6deg);
  background-color: var(--tk-indigo);
  color: var(--color-white);
}

.tk-card h3 {
  font-size: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem);
  line-height: 1.25;
}

.tk-card p {
  margin-top: 0.625rem;
  font-size: 0.9688rem;
  line-height: 1.68;
  color: var(--tk-fg-soft);
}

.tk-card > .tk-link {
  margin-top: 1rem;
  align-self: flex-start;
}

.tk-card p .tk-link {
  display: inline-block;
  margin-top: 0.375rem;
}

/* --- the Discover miniature: status at a glance ----------------------- */

.tk-mini {
  display: grid;
  gap: 0.5rem;
  padding: 0.875rem;
  border: 1px solid var(--tk-line);
  border-radius: var(--tk-r-md);
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: var(--tk-shadow-2);
  transform: rotate(2deg);
  transition: transform 0.7s var(--tk-ease);
}

.tk-card--wide:hover .tk-mini {
  transform: rotate(0deg) translateY(-4px);
}

.tk-mini__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.25rem 0.25rem 0.375rem;
  font-family: var(--tk-display);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--tk-fg);
}

.tk-mini__lang {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--tk-line);
  border-radius: 999px;
  background-color: var(--color-white);
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--tk-fg-soft);
}

.tk-mini__row {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) 2rem;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5625rem;
  border: 1px solid var(--tk-line);
  border-radius: var(--tk-r-sm);
  background-color: var(--color-white);
}

.tk-mini__avatar {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background-image: linear-gradient(135deg, var(--tk-peach), var(--tk-orange));
}

.tk-mini__row--busy .tk-mini__avatar {
  background-image: linear-gradient(135deg, var(--tk-pink-100), var(--tk-pink));
}

.tk-mini__row--off .tk-mini__avatar {
  background-image: linear-gradient(135deg, var(--tk-surface-2), var(--tk-neutral-300));
}

.tk-mini__lines {
  display: grid;
  gap: 0.375rem;
}

.tk-mini__lines i {
  display: block;
  height: 0.4375rem;
  border-radius: 4px;
  background-color: var(--tk-mist-2);
}

.tk-mini__lines i:first-child { width: 72%; background-color: var(--tk-neutral-300); }
.tk-mini__lines i:last-child { width: 46%; }

.tk-mini__call {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: var(--tk-success);
  color: var(--color-white);
  animation: tk-pulse 2.4s ease-out infinite;
}

.tk-mini__call svg {
  width: 0.875rem;
  height: 0.875rem;
}

.tk-mini__row--busy .tk-mini__call {
  background-color: var(--tk-yellow);
  animation: none;
}

.tk-mini__row--off .tk-mini__call {
  background-color: var(--tk-neutral-500);
  animation: none;
}

.tk-mini__row--off {
  opacity: 0.7;
}

/* --- audio & video: two voices, one line between them ----------------- */

.tk-art-voice {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  height: 4.5rem;
  margin-bottom: 1.75rem;
  padding: 0 1rem;
  border-radius: var(--tk-r-md);
  background-color: var(--tk-mist);
}

.tk-art-voice__dot {
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  border-radius: 50%;
  background-image: linear-gradient(135deg, var(--tk-pink), var(--tk-magenta));
  box-shadow: 0 0 0 4px rgba(var(--tk-accent-rgb), 0.12);
}

.tk-art-voice__dot--b {
  background-image: linear-gradient(135deg, var(--tk-peach), var(--tk-orange));
  box-shadow: 0 0 0 4px rgba(var(--tk-orange-rgb), 0.14);
}

.tk-art-voice__bars {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  height: 2.25rem;
}

.tk-art-voice__bars i {
  width: 3px;
  height: 100%;
  border-radius: 3px;
  background-image: linear-gradient(180deg, var(--tk-pink), var(--tk-orange));
  transform: scaleY(0.3);
  animation: tk-bar 1.4s ease-in-out infinite;
}

.tk-art-voice__bars i:nth-child(3n) { animation-delay: -0.3s; animation-duration: 1.1s; }
.tk-art-voice__bars i:nth-child(3n + 1) { animation-delay: -0.7s; animation-duration: 1.6s; }
.tk-art-voice__bars i:nth-child(4n) { animation-delay: -0.1s; }
.tk-art-voice__bars i:nth-child(5n) { animation-delay: -0.9s; animation-duration: 1.2s; }

/* --- languages: a small turning globe --------------------------------- */

.tk-art-globe {
  position: absolute;
  top: clamp(1.625rem, 2.5vw, 2.25rem);
  right: clamp(1.625rem, 2.5vw, 2.25rem);
  z-index: -1;
  width: 4.5rem;
  height: 4.5rem;
  overflow: hidden;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--tk-white) 0%, var(--tk-mist) 55%, var(--tk-mist-2) 100%);
  box-shadow: inset -10px -14px 30px rgba(var(--tk-accent-rgb), 0.14), 0 0 0 1px var(--tk-line);
  opacity: 0.9;
  pointer-events: none;
}

/* meridians slide across; the latitudes stay still */
.tk-art-globe i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 200%;
  background-image: repeating-linear-gradient(90deg, rgba(var(--tk-accent-rgb), 0.3) 0 1px, transparent 1px 12px);
  -webkit-mask-image: radial-gradient(50% 50% at 25% 50%, #000 60%, transparent 100%), radial-gradient(50% 50% at 75% 50%, #000 60%, transparent 100%);
  mask-image: radial-gradient(50% 50% at 25% 50%, #000 60%, transparent 100%), radial-gradient(50% 50% at 75% 50%, #000 60%, transparent 100%);
  animation: tk-globe 18s linear infinite;
}

.tk-art-globe::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-image: repeating-linear-gradient(0deg, rgba(var(--tk-accent-rgb), 0.16) 0 1px, transparent 1px 12px);
}

@keyframes tk-globe {
  to { transform: translateX(-50%); }
}

/* --- prepaid: a small stack of coins ---------------------------------- */

.tk-art-coins {
  position: absolute;
  right: clamp(1.25rem, 3vw, 2.5rem);
  bottom: clamp(1.25rem, 3vw, 2.25rem);
  width: 4.5rem;
  height: 5.5rem;
  pointer-events: none;
}

.tk-art-coins i {
  position: absolute;
  left: 0;
  width: 4.5rem;
  height: 1.375rem;
  border-radius: 50%;
  background-image: linear-gradient(180deg, var(--tk-yellow-soft) 0%, var(--tk-yellow) 55%, var(--tk-orange) 100%);
  box-shadow: inset 0 -3px 0 rgba(var(--tk-orange-ink-rgb), 0.3), 0 4px 8px -2px rgba(var(--tk-orange-ink-rgb), 0.35);
  transition: transform 0.6s var(--tk-ease);
}

.tk-art-coins i:nth-child(1) { bottom: 0; }
.tk-art-coins i:nth-child(2) { bottom: 0.625rem; transition-delay: 0.04s; }
.tk-art-coins i:nth-child(3) { bottom: 1.25rem; transition-delay: 0.08s; }
.tk-art-coins i:nth-child(4) { bottom: 1.875rem; transition-delay: 0.12s; }

.tk-card--coins:hover .tk-art-coins i:nth-child(2) { transform: translate(3px, -3px); }
.tk-card--coins:hover .tk-art-coins i:nth-child(3) { transform: translate(-2px, -7px); }
.tk-card--coins:hover .tk-art-coins i:nth-child(4) { transform: translate(4px, -12px) rotate(-6deg); }

.tk-card--coins > :not(.tk-art-coins) {
  max-width: calc(100% - 5.5rem);
}

/* --- no office hours: the one night card ----------------------------- */

.tk-card--night {
  border-color: transparent;
  background-color: var(--tk-dark);
  background-image:
    radial-gradient(70% 90% at 100% 0%, rgba(var(--tk-magenta-rgb), 0.5) 0%, rgba(var(--tk-magenta-rgb), 0) 65%),
    radial-gradient(50% 70% at 0% 100%, rgba(var(--tk-purple-rgb), 0.3) 0%, rgba(var(--tk-purple-rgb), 0) 70%),
    linear-gradient(160deg, var(--tk-dark) 0%, var(--tk-dark-3) 100%);
  color: var(--color-white);
  box-shadow: 0 30px 60px -30px rgba(var(--tk-dark-rgb), 0.7);
}

.tk-card--night p {
  color: var(--tk-on-night-soft);
}

.tk-card--night .tk-card__icon {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--tk-peach);
}

.tk-card--night:hover .tk-card__icon {
  background-color: rgba(255, 255, 255, 0.18);
  color: var(--color-white);
}

.tk-card--night::before {
  background: radial-gradient(440px circle at var(--mx, 50%) var(--my, 0%), rgba(var(--tk-blush-rgb), 0.14), rgba(var(--tk-blush-rgb), 0) 45%);
}

.tk-art-night {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* the moon's path across the night */
.tk-art-night__arc {
  position: absolute;
  top: 22%;
  right: -12%;
  width: 60%;
  aspect-ratio: 1;
  border: 1px dashed rgba(var(--tk-blush-rgb), 0.28);
  border-radius: 50%;
}

.tk-art-night__arc::before {
  content: '';
  position: absolute;
  top: 8%;
  left: 10%;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background-color: var(--tk-yellow-soft);
  box-shadow: 0 0 18px 4px rgba(var(--tk-peach-rgb), 0.55);
}

.tk-art-night i {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: var(--color-white);
  animation: tk-twinkle 3.6s ease-in-out infinite;
}

.tk-art-night i:nth-of-type(1) { top: 16%; left: 58%; }
.tk-art-night i:nth-of-type(2) { top: 30%; left: 82%; animation-delay: -1.2s; }
.tk-art-night i:nth-of-type(3) { top: 12%; left: 90%; animation-delay: -2.1s; width: 2px; height: 2px; }
.tk-art-night i:nth-of-type(4) { top: 48%; left: 70%; animation-delay: -0.6s; width: 2px; height: 2px; }
.tk-art-night i:nth-of-type(5) { top: 64%; left: 92%; animation-delay: -2.8s; }
.tk-art-night i:nth-of-type(6) { top: 22%; left: 40%; animation-delay: -1.7s; width: 2px; height: 2px; }
.tk-art-night i:nth-of-type(7) { top: 72%; left: 60%; animation-delay: -3.2s; width: 2px; height: 2px; }

@media (max-width: 1100px) {
  .tk-card--wide,
  .tk-card--voice {
    grid-column: span 12;
  }

  .tk-card--span2 {
    grid-column: span 4;
  }
}

@media (max-width: 900px) {
  .tk-card--span2 {
    grid-column: span 6;
  }

  .tk-card--globe {
    grid-column: span 12;
  }
}

@media (max-width: 720px) {
  .tk-bento {
    grid-template-columns: minmax(0, 1fr);
  }

  .tk-bento > .tk-card {
    grid-column: auto;
  }

  .tk-card--wide {
    grid-template-columns: minmax(0, 1fr);
  }

  .tk-mini {
    transform: none;
  }
}

/* ==========================================================================
   Stats - the night band. It arrives set into the page like a card and
   opens out to the full width as it reaches the middle of the screen.
   ========================================================================== */

.tk-band--stats {
  --tk-inset: clamp(12px, 3vw, 48px);
  --tk-stats-pad: clamp(5.5rem, 11vw, 9rem);
  padding-block: var(--tk-stats-pad);
}

.tk-band--stats::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    /* blends in from the orchid Features ends on and out to the lavender
       Safety starts on, inside the padding, so no words sit on the blend */
    linear-gradient(180deg,
      var(--tk-wash-orchid) 0%,
      rgba(var(--tk-wash-orchid-rgb), 0) calc(var(--tk-stats-pad) * 0.8),
      rgba(var(--tk-wash-lavender-rgb), 0) calc(100% - var(--tk-stats-pad) * 0.8),
      var(--tk-wash-lavender) 100%),
    /* magenta light where it meets Features, violet towards Safety */
    radial-gradient(50% 60% at 50% 115%, rgba(var(--tk-pink-rgb), 0.28) 0%, rgba(var(--tk-pink-rgb), 0) 70%),
    radial-gradient(35% 45% at 0% 0%, rgba(var(--tk-magenta-rgb), 0.32) 0%, rgba(var(--tk-magenta-rgb), 0) 70%),
    radial-gradient(40% 50% at 100% 100%, rgba(var(--tk-violet-rgb), 0.3) 0%, rgba(var(--tk-violet-rgb), 0) 70%),
    var(--tk-grad-stats);
}

/* the horizon: rings rising from below the band */
.tk-stats__horizon {
  position: absolute;
  left: 50%;
  bottom: -62%;
  z-index: -1;
  width: max(110%, 60rem);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: repeating-radial-gradient(circle at 50% 50%, rgba(var(--tk-blush-rgb), 0) 0 5.5%, rgba(var(--tk-blush-rgb), 0.12) 5.5% 5.65%);
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 30%, transparent 100%);
  pointer-events: none;
}

.tk-band--stats .tk-head__title {
  max-width: 44rem;
}

.tk-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--tk-line-night);
}

.tk-stat {
  display: grid;
  align-content: start;
  gap: 1rem;
  padding: 2.25rem clamp(1rem, 2.5vw, 2rem) 0.5rem 0;
}

.tk-stat + .tk-stat {
  padding-left: clamp(1rem, 2.5vw, 2rem);
  border-left: 1px solid var(--tk-line-night);
}

.tk-stat__value {
  font-family: var(--tk-display);
  font-size: clamp(3.25rem, 1.8rem + 5vw, 6.5rem);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.055em;
  color: var(--color-white);
  background-image: linear-gradient(180deg, var(--tk-white) 20%, var(--tk-blush) 62%, var(--tk-lilac-soft) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
}

.tk-stat__label {
  max-width: 17rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--tk-on-night-soft);
}

@media (max-width: 900px) {
  .tk-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tk-stat:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }

  .tk-stat:nth-child(n + 3) {
    border-top: 1px solid var(--tk-line-night);
    margin-top: 1.5rem;
  }
}

@media (max-width: 440px) {
  .tk-stats {
    grid-template-columns: minmax(0, 1fr);
  }

  .tk-stat + .tk-stat {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--tk-line-night);
    margin-top: 1.25rem;
  }
}

/* ==========================================================================
   Safety - the phone holds still while the three layers pass it; each
   layer shows itself on the screen as it crosses the middle of the page.
   ========================================================================== */

.tk-safety__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(3rem, 7vw, 7rem);
  align-items: start;
}

.tk-safety__shot {
  position: relative;
  display: grid;
  place-items: center;
  padding-block: 2rem;
}

/* a soft lit floor under the phone */
.tk-safety__shot::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(34rem, 100vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(var(--tk-accent-rgb), 0.16), rgba(var(--tk-accent-rgb), 0) 70%),
    repeating-radial-gradient(circle, rgba(var(--tk-accent-rgb), 0) 0 11%, rgba(var(--tk-accent-rgb), 0.08) 11% 11.3%);
  -webkit-mask-image: radial-gradient(closest-side, #000 50%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 50%, transparent 100%);
  pointer-events: none;
}

.tk-phone {
  position: relative;
  width: min(18rem, calc((100vh - 12rem) * 0.485));
  min-width: 13rem;
  padding: 0.5rem;
  border-radius: 2.5rem;
  background-image: linear-gradient(160deg, var(--tk-dark-3) 0%, var(--tk-dark) 60%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 0 0 1px rgba(var(--tk-text-rgb), 0.2),
    0 50px 80px -30px rgba(var(--tk-text-rgb), 0.55), 0 20px 40px -24px rgba(var(--tk-accent-rgb), 0.5);
}

.tk-phone img {
  width: 100%;
  height: auto;
  border-radius: 2.0625rem;
}

/* layer 1 - the automated check: a band of light passing down the screen */
.tk-phone__scan {
  position: absolute;
  inset: 0.5rem;
  z-index: 2;
  overflow: hidden;
  border-radius: 2.0625rem;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

.tk-phone__scan::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 22%;
  background-image: linear-gradient(180deg, rgba(var(--tk-accent-rgb), 0) 0%, rgba(var(--tk-accent-rgb), 0.22) 85%, rgba(var(--tk-accent-2-rgb), 0.9) 100%);
  animation: tk-scan 2.8s var(--tk-ease-io) infinite;
}

@keyframes tk-scan {
  from { transform: translateY(-100%); }
  to { transform: translateY(460%); }
}

/* layer 2 - human review: a reviewer's check lands on the flagged call */
.tk-phone__review {
  position: absolute;
  top: 17%;
  right: -0.75rem;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background-image: var(--tk-grad);
  color: var(--color-white);
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.9), 0 12px 24px -8px rgba(var(--tk-accent-rgb), 0.7);
  transform: scale(0);
  transition: transform 0.6s var(--tk-ease);
}

.tk-phone__review svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* layer 3 - reporting: the report sheet itself is outlined */
.tk-phone__sheet {
  position: absolute;
  left: 0.5rem;
  right: 0.5rem;
  bottom: 0.5rem;
  z-index: 2;
  height: 57%;
  border-radius: 1.75rem 1.75rem 2.0625rem 2.0625rem;
  box-shadow: inset 0 0 0 2px var(--tk-indigo), 0 0 0 6px rgba(var(--tk-accent-rgb), 0.14);
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

.tk-safety[data-layer="0"] .tk-phone__scan,
.tk-safety[data-layer="2"] .tk-phone__sheet {
  opacity: 1;
}

.tk-safety[data-layer="1"] .tk-phone__review {
  transform: scale(1);
}

.tk-report-badge {
  position: absolute;
  top: 60%;
  /* beside the phone, but never past the column's left edge */
  right: min(calc(50% + 7.5rem), calc(100% - 9.75rem));
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.875rem 0.625rem 0.625rem;
  border: 1px solid var(--tk-line);
  border-radius: 16px;
  background-color: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: var(--tk-shadow-2);
  transition: transform 0.6s var(--tk-ease), box-shadow 0.6s var(--tk-ease);
}

.tk-report-badge__icon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 12px;
  background-color: var(--tk-indigo-50);
  color: var(--tk-indigo);
}

.tk-report-badge__icon svg {
  width: 1.125rem;
  height: 1.125rem;
}

.tk-report-badge__label {
  font-family: var(--tk-display);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--tk-fg);
}

/* the cue's arrow: a full curve from under the badge's right-hand side,
   its head just past the badge, touching the report sheet's edge */
.tk-report-badge__arrow {
  position: absolute;
  top: calc(100% + 0.25rem);
  right: -1.6875rem;
  width: 4.5rem;
  height: auto;
  color: var(--tk-indigo);
  opacity: 0.7;
}

.tk-safety[data-layer="2"] .tk-report-badge {
  transform: translateX(-0.5rem) scale(1.04);
  box-shadow: 0 0 0 4px rgba(var(--tk-accent-rgb), 0.12), var(--tk-shadow-2);
}

.tk-safety__list {
  position: relative;
  display: grid;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.tk-safety__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.25rem;
  padding: 1.5rem 1.75rem 1.625rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--tk-r-lg);
  transition: background-color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}

.tk-safety__item h3 {
  font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);
  line-height: 1.3;
}

.tk-safety__item p {
  margin-top: 0.5rem;
  font-size: 0.9688rem;
  line-height: 1.68;
  color: var(--tk-fg-soft);
}

.tk-safety__item .tk-note__icon {
  background-color: transparent;
  box-shadow: inset 0 0 0 1px var(--tk-line-strong);
}

.tk-safety__item.is-active {
  border-color: var(--tk-line);
  background-color: var(--color-white);
  box-shadow: var(--tk-shadow-2);
}

.tk-safety__item.is-active .tk-note__icon {
  background-color: var(--tk-indigo);
  color: var(--color-white);
  box-shadow: 0 8px 20px -8px rgba(var(--tk-accent-rgb), 0.7);
}

.tk-safety__cta {
  margin-top: 2rem;
  padding-left: 1.5rem;
}

@media (min-width: 961px) {
  /* the phone holds the middle of the screen while the layers pass */
  .tk-safety__shot {
    position: sticky;
    top: calc(var(--tk-nav-h) + 1rem);
    min-height: calc(100vh - var(--tk-nav-h) - 2rem);
    padding-block: 0;
  }

  /* each layer gets room to be read on its own */
  .tk-safety__item {
    min-height: 26vh;
    align-content: center;
  }

  /* The "Report in seconds" cue sits beside the phone rather than over
     it, so its arrow reaches the report options from outside the phone.
     It is placed from the phone's own size - the .tk-phone width above
     and the screenshot's 555 x 1144 ratio - so it holds at every screen
     size: the badge ends 0.625rem short of the phone, and the arrow's
     head lands two-thirds of the way down the screen, at the options. */
  .tk-safety__shot {
    --ph-w: clamp(13rem, calc((100vh - 12rem) * 0.485), 18rem);
    --sc-h: calc((var(--ph-w) - 1rem) * 2.0613);
    /* the column's width and the page edge left of it (the shell's
       gutter), so a narrow screen can be allowed for */
    --sh-w: calc((min(100vw, 1280px) - 4rem - min(7vw, 7rem)) * 0.45);
    --gut: calc((100vw - min(100vw, 1280px)) / 2 + 2rem);
    /* where there is no room beside the phone, the badge gives way
       toward it by this much, and the arrow moves back by the same */
    --give: max(0px, calc(var(--ph-w) / 2 + 10.875rem - var(--sh-w) / 2 - var(--gut)));
  }

  /* max-content: so far out, a shrink-to-fit box would otherwise wrap
     the label onto three lines */
  .tk-report-badge {
    top: auto;
    bottom: calc(50% - 0.16 * var(--sc-h) + 4.1875rem);
    right: calc(50% + var(--ph-w) / 2 + 0.625rem - var(--give));
    width: max-content;
  }

  .tk-report-badge__arrow {
    right: calc(var(--give) - 1.6875rem);
  }
}

@media (max-width: 960px) {
  .tk-safety__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .tk-safety__shot {
    order: 2;
  }

  .tk-phone {
    width: min(16rem, 70vw);
  }

  /* stacked, the badge stays but its arrow goes, as on the live site */
  .tk-report-badge__arrow {
    display: none;
  }

  .tk-safety__cta {
    padding-left: 0;
  }
}

@media (max-width: 560px) {
  .tk-report-badge {
    top: auto;
    bottom: 12%;
    right: auto;
    left: 0;
  }

  .tk-safety__item {
    padding: 1.25rem 1.125rem;
  }
}

/* ==========================================================================
   Stories - who Tokify is for. Each card is a moment with its own sky.
   On a large screen the row travels sideways as the page scrolls; on a
   small one it is a swipeable, snapping row.
   ========================================================================== */

/* Clips the row's sideways entrance. On the wrapper, not the section: an
   overflow on the section would make it the scroller its sticky pin sticks
   to, and on a phone an unclipped row widens the whole layout viewport. */
.tk-stories__pin {
  overflow: hidden;
}

.tk-marquee {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: max(clamp(1.15rem, 4vw, 2rem), calc((100vw - 1280px) / 2 + 2rem));
  padding: 1rem max(clamp(1.15rem, 4vw, 2rem), calc((100vw - 1280px) / 2 + 2rem)) 2.5rem;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.tk-marquee::-webkit-scrollbar {
  display: none;
}

.tk-marquee__track {
  display: flex;
  gap: 1.25rem;
  flex-shrink: 0;
}

/* The second track is a visual duplicate kept from the old looping
   marquee (aria-hidden, identical copy). Neither layout here loops, so it
   stays out of the way. */
.tk-marquee__track[aria-hidden="true"] {
  display: none;
}

.tk-story {
  --sky: linear-gradient(160deg, var(--tk-purple-ink) 0%, var(--tk-violet-ink) 100%);
  --orb: var(--tk-yellow);
  --orb-x: 80%;
  --orb-y: 26%;
  display: flex;
  flex-direction: column;
  width: clamp(17rem, 24vw, 21.5rem);
  flex-shrink: 0;
  overflow: hidden;
  scroll-snap-align: start;
  border: 1px solid var(--tk-line);
  border-radius: var(--tk-r-lg);
  background-color: var(--color-white);
  box-shadow: var(--tk-shadow-1);
  transition: transform 0.6s var(--tk-ease), box-shadow 0.6s var(--tk-ease);
}

.tk-story:hover {
  transform: translateY(-6px);
  box-shadow: var(--tk-shadow-2);
}

/* the sky: a time of day for each situation, all from the violet-to-blue
   stretch of the journey this section sits in. White text holds 5.8:1 or
   better on every one. */
.tk-story:nth-child(2) { --sky: linear-gradient(160deg, var(--tk-violet-ink) 0%, var(--tk-cobalt-ink) 100%); --orb: var(--tk-peach); --orb-x: 70%; --orb-y: 38%; }
.tk-story:nth-child(3) { --sky: linear-gradient(160deg, var(--tk-cobalt-ink) 0%, var(--tk-blue-ink) 100%); --orb: var(--tk-yellow-soft); --orb-x: 62%; --orb-y: 30%; }
.tk-story:nth-child(4) { --sky: linear-gradient(160deg, var(--tk-navy-900) 0%, var(--tk-navy-700) 100%); --orb: var(--tk-pink-50); --orb-x: 84%; --orb-y: 20%; }
.tk-story:nth-child(5) { --sky: linear-gradient(160deg, var(--tk-blue-ink) 0%, var(--tk-sky-ink) 100%); --orb: var(--tk-peach); --orb-x: 74%; --orb-y: 24%; }
.tk-story:nth-child(6) { --sky: linear-gradient(160deg, var(--tk-purple-ink) 0%, var(--tk-cobalt-ink) 100%); --orb: var(--tk-yellow-soft); --orb-x: 86%; --orb-y: 36%; }
.tk-story:nth-child(7) { --sky: linear-gradient(160deg, var(--tk-cobalt-ink) 0%, var(--tk-sky-ink) 100%); --orb: var(--tk-blush); --orb-x: 68%; --orb-y: 18%; }

.tk-story__top {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  gap: 0.875rem;
  min-height: 9.5rem;
  padding: 1.5rem;
  overflow: hidden;
  background-image: var(--sky);
  color: var(--color-white);
}

/* sun or moon, low or high, depending on the hour */
.tk-story__top::before {
  content: '';
  position: absolute;
  top: var(--orb-y);
  left: var(--orb-x);
  z-index: -1;
  width: 1.75rem;
  height: 1.75rem;
  margin: -0.875rem 0 0 -0.875rem;
  border-radius: 50%;
  background-color: var(--orb);
  box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.07), 0 0 0 16px rgba(255, 255, 255, 0.04), 0 0 34px 6px var(--orb);
  opacity: 0.9;
  transition: transform 0.9s var(--tk-ease);
}

.tk-story:hover .tk-story__top::before {
  transform: translateY(-8px) scale(1.1);
}

.tk-story__top::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--tk-grain);
  opacity: 0.08;
}

.tk-story__avatar {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.tk-story__avatar svg {
  width: 1.25rem;
  height: 1.25rem;
}

.tk-story__who {
  font-size: 1.0625rem;
  line-height: 1.3;
  color: var(--color-white);
}

.tk-story__tag {
  display: inline-block;
  margin-top: 0.375rem;
  padding: 0.1875rem 0.625rem;
  border-radius: 999px;
  /* light enough to read as a pill, faint enough that the small white
     label keeps 4.5:1 on the lightest (blue) skies */
  background-color: rgba(255, 255, 255, 0.1);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-white);
}

.tk-story > p {
  padding: 1.5rem 1.5rem 1.75rem;
  font-family: var(--tk-display);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.012em;
  color: var(--tk-fg);
}

/* --- the sideways scene (js/home.js adds .tk-hscroll where it fits) ---- */

.tk-hscroll {
  height: calc(100vh + var(--tk-hs-dist, 0px));
  padding-block: 0;
}

.tk-hscroll .tk-stories__pin {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
  padding-top: var(--tk-nav-h);
  overflow: hidden;
}

.tk-hscroll .tk-head {
  margin-bottom: clamp(2rem, 4vh, 3rem);
}

.tk-hscroll .tk-marquee {
  overflow: visible;
  scroll-snap-type: none;
}

.tk-hscroll .tk-marquee__track {
  transform: translate3d(calc(var(--x, 0) * -1px), 0, 0);
  will-change: transform;
}

/* a thin progress line under the row */
.tk-stories__pin::after {
  content: '';
  display: none;
}

.tk-hscroll .tk-stories__pin::after {
  display: block;
  width: min(20rem, 40vw);
  height: 2px;
  margin: 0 auto;
  border-radius: 2px;
  background-image:
    var(--tk-grad-accent),
    linear-gradient(90deg, rgba(var(--tk-accent-rgb), 0.16), rgba(var(--tk-accent-rgb), 0.16));
  background-size: calc(var(--p, 0) * 100%) 100%, 100% 100%;
  background-repeat: no-repeat;
}

/* ==========================================================================
   FAQ - a quiet page. The heading holds the left; questions run down the
   right as a divided list, one open at a time.
   ========================================================================== */

.tk-faq-band > .tk-shell {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 0 clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

.tk-faq-band .tk-head {
  position: sticky;
  top: calc(var(--tk-nav-h) + 3rem);
  grid-row: span 2;
  margin: 0;
}

.tk-faq {
  display: grid;
  border-top: 1px solid var(--tk-line);
}

.tk-faq__item {
  position: relative;
  border-bottom: 1px solid var(--tk-line);
}

.tk-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding: 1.5rem 0;
  text-align: left;
  font-family: var(--tk-display);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.012em;
  color: var(--tk-fg);
  transition: color 0.25s ease;
}

.tk-faq__q:hover,
.tk-faq__item.is-open .tk-faq__q {
  color: var(--tk-indigo);
}

.tk-faq__sign {
  position: relative;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--tk-line-strong);
  transition: background-color 0.35s ease, box-shadow 0.35s ease, transform 0.5s var(--tk-ease);
}

.tk-faq__sign::before,
.tk-faq__sign::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.75rem;
  height: 1.5px;
  margin: -0.75px 0 0 -0.375rem;
  border-radius: 2px;
  background-color: currentColor;
  transition: transform 0.5s var(--tk-ease);
}

.tk-faq__sign::after {
  transform: rotate(90deg);
}

.tk-faq__q:hover .tk-faq__sign {
  box-shadow: inset 0 0 0 1px var(--tk-indigo);
}

.tk-faq__item.is-open .tk-faq__sign {
  background-color: var(--tk-indigo);
  box-shadow: none;
  color: var(--color-white);
  transform: rotate(180deg);
}

.tk-faq__item.is-open .tk-faq__sign::after {
  transform: rotate(0deg);
}

/* Closed only while the script is running to open them: with JS blocked
   every answer stays readable. */
.tk-faq__panel {
  display: grid;
  grid-template-rows: 1fr;
}

.tk-js .tk-faq__panel {
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 0.45s var(--tk-ease), visibility 0s linear 0.45s;
}

.tk-js .tk-faq__item.is-open .tk-faq__panel {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows 0.45s var(--tk-ease), visibility 0s;
}

.tk-faq__panel > div {
  overflow: hidden;
}

.tk-faq__panel p {
  max-width: 62ch;
  padding: 0 3.75rem 1.75rem 0;
  font-size: 0.9688rem;
  line-height: 1.75;
  color: var(--tk-fg-soft);
  opacity: 1;
  transition: opacity 0.5s ease 0.1s, transform 0.5s var(--tk-ease) 0.1s;
}

.tk-js .tk-faq__item:not(.is-open) .tk-faq__panel p {
  opacity: 0;
  transform: translateY(-6px);
  transition-delay: 0s;
}

.tk-faq__panel strong {
  font-weight: 600;
  color: var(--tk-fg);
}

/* reset.css strips link colour and underline site-wide, so answers need their
   inline links marked explicitly - they are the routes into the policy pages */
.tk-faq__panel a {
  color: var(--tk-indigo);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: rgba(var(--tk-accent-rgb), 0.4);
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.tk-faq__panel a:hover {
  color: var(--tk-indigo-hover);
  text-decoration-color: currentColor;
}

.tk-faq__more {
  grid-column: 2;
  margin-top: 2rem;
  font-size: 0.9688rem;
  color: var(--tk-fg-soft);
}

@media (max-width: 960px) {
  .tk-faq-band > .tk-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .tk-faq-band .tk-head {
    position: static;
    grid-row: auto;
    margin-bottom: 2.5rem;
  }

  .tk-faq__more {
    grid-column: 1;
  }
}

@media (max-width: 560px) {
  .tk-faq__panel p {
    padding-right: 0;
  }
}

/* ==========================================================================
   Contact - one address, so the address is the hero of the section
   ========================================================================== */

.tk-contact {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 1.25rem;
}

.tk-contact__card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 1.25rem;
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  border: 1px solid var(--tk-line);
  border-radius: var(--tk-r-lg);
  background-color: var(--color-white);
  box-shadow: var(--tk-shadow-1);
}

.tk-contact__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--tk-r-sm);
  background-color: var(--tk-indigo-50);
  color: var(--tk-indigo);
}

.tk-contact__icon svg {
  width: 1.3125rem;
  height: 1.3125rem;
}

.tk-contact__body h3 {
  font-size: 1.125rem;
  line-height: 1.3;
}

.tk-contact__body p,
.tk-contact__body address {
  margin-top: 0.5rem;
  font-size: 0.9688rem;
  font-style: normal;
  line-height: 1.7;
  color: var(--tk-fg-soft);
}

.tk-contact__body .tk-contact__links {
  line-height: 2;
}

/* the email card: deep blue into cyan, and the address set large. White
   text would hold 4.7:1 anywhere on it, even under the corner light. */
.tk-contact__card:first-child {
  grid-row: span 2;
  grid-template-columns: minmax(0, 1fr);
  align-content: space-between;
  gap: 3rem;
  min-height: 22rem;
  overflow: hidden;
  border-color: transparent;
  background-color: var(--tk-blue-deep);
  background-image:
    radial-gradient(55% 65% at 100% 0%, rgba(var(--tk-cyan-rgb), 0.26) 0%, rgba(var(--tk-cyan-rgb), 0) 65%),
    linear-gradient(135deg, var(--tk-blue-deep) 0%, var(--tk-cyan-deep) 100%);
  color: var(--color-white);
  box-shadow: 0 34px 64px -30px rgba(var(--tk-cobalt-rgb), 0.6);
}

/* rings, answering from the corner */
.tk-contact__card:first-child::before {
  content: '';
  position: absolute;
  top: -9rem;
  right: -9rem;
  z-index: -1;
  width: 26rem;
  height: 26rem;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, rgba(var(--tk-aqua-rgb), 0) 0 12%, rgba(var(--tk-aqua-rgb), 0.16) 12% 12.4%);
  -webkit-mask-image: radial-gradient(closest-side, #000 40%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 40%, transparent 100%);
  transition: transform 1.2s var(--tk-ease);
}

.tk-contact__card:first-child:hover::before {
  transform: scale(1.12);
}

.tk-contact__card:first-child .tk-contact__icon {
  width: 3.25rem;
  height: 3.25rem;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background-color: rgba(255, 255, 255, 0.14);
  color: var(--color-white);
}

.tk-contact__card:first-child h3 {
  color: var(--tk-white);
  font-size: 1rem;
  font-weight: 500;
}

.tk-contact__mail {
  display: inline-block;
  margin-top: 0.75rem;
  font-family: var(--tk-display);
  font-size: clamp(1.5rem, 1rem + 2.1vw, 2.5rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.035em;
  color: var(--color-white);
  overflow-wrap: anywhere;
  background-image: var(--tk-grad-cool);
  background-size: 0% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 0.2rem;
  transition: background-size 0.7s var(--tk-ease);
}

.tk-contact__mail:hover {
  background-size: 100% 2px;
}

.tk-contact__card:first-child p {
  max-width: 28rem;
  color: rgba(255, 255, 255, 0.94);
}

@media (max-width: 860px) {
  .tk-contact {
    grid-template-columns: minmax(0, 1fr);
  }

  .tk-contact__card:first-child {
    grid-row: auto;
    min-height: 0;
  }
}

/* ==========================================================================
   Final call to action - a ring of night opens from the foot of the page
   and the invitation comes up inside it.
   ========================================================================== */

.tk-band--cta {
  --tk-cta-top: clamp(7rem, 15vw, 12rem);
  --tk-cta-foot: clamp(6rem, 12vw, 9rem);
  padding-block: var(--tk-cta-top) var(--tk-cta-foot);
  text-align: center;
  color: var(--tk-text);
  background-color: var(--tk-sky);
}

.tk-band--cta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    /* the top padding, above every word, takes over from the aqua that
       Contact ends on */
    linear-gradient(180deg, var(--tk-wash-aqua) 0%, rgba(var(--tk-wash-aqua-rgb), 0) calc(var(--tk-cta-top) * 0.85)),
    /* the foot - the bottom padding, below every word - deepens through
       blue into the footer's navy, so the two meet without an edge */
    linear-gradient(180deg,
      rgba(var(--tk-navy-700-rgb), 0) calc(100% - var(--tk-cta-foot) + 0.75rem),
      rgba(var(--tk-navy-700-rgb), 0.8) calc(100% - var(--tk-cta-foot) * 0.45),
      var(--tk-navy-900) 100%),
    /* the reference's two circles in the top corners: violet (where the
       journey came from) and a white light (where it ends) */
    radial-gradient(20% 36% at 3% 0%, rgba(var(--tk-violet-rgb), 0.38) 0%, rgba(var(--tk-violet-rgb), 0) 70%),
    radial-gradient(22% 36% at 98% 0%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 70%),
    /* periwinkle > sky > aqua: dark text holds 7:1 or better on every stop */
    var(--tk-grad-close);
}

.tk-cta__orb {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: -1;
  width: min(64rem, 150vw);
  aspect-ratio: 1;
  transform: translate(-50%, 50%);
  pointer-events: none;
}

.tk-cta__orb i {
  position: absolute;
  border: 1px solid rgba(var(--tk-aqua-rgb), 0.18);
  border-radius: 50%;
}

.tk-cta__orb i:nth-child(1) { inset: 30%; border-color: rgba(var(--tk-aqua-rgb), 0.32); }
.tk-cta__orb i:nth-child(2) { inset: 15%; }
.tk-cta__orb i:nth-child(3) { inset: 0; border-color: rgba(var(--tk-aqua-rgb), 0.09); }

.tk-cta__orb::after {
  content: '';
  position: absolute;
  inset: 30%;
  border: 1.5px solid rgba(var(--tk-aqua-rgb), 0.5);
  border-radius: 50%;
  animation: tk-ripple 6s cubic-bezier(0.2, 0.6, 0.35, 1) infinite;
}

.tk-band--cta .tk-shell > div:first-child {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* the closing band's label is a live status, so it keeps a pill + dot */
.tk-band--cta .tk-eyebrow {
  padding: 0.5rem 1rem;
  border: 1px solid rgba(var(--tk-text-rgb), 0.14);
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.42);
  color: var(--tk-text);
}

.tk-band--cta .tk-eyebrow__dot {
  background-color: var(--tk-success);
}

.tk-band--cta .tk-eyebrow::before {
  display: none;
}

.tk-eyebrow__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--tk-live);
  animation: tk-pulse 2.4s ease-out infinite;
}

.tk-cta__title {
  margin-top: 1.75rem;
  font-size: clamp(2.75rem, 1.4rem + 5.4vw, 6rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--tk-text);
}

.tk-cta__text {
  max-width: 36rem;
  margin: 1.75rem auto 0;
  font-size: clamp(1rem, 0.96rem + 0.3vw, 1.1875rem);
  line-height: 1.7;
  color: var(--tk-text);
}

.tk-cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.75rem;
}

.tk-cta__actions .tk-btn {
  padding: 1.0625rem 1.875rem;
  font-size: 1rem;
}

.tk-cta__note {
  margin-top: 1.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--tk-text);
}

/* on the bright band the main action is the dark one */
.home-page .tk-band--cta .tk-btn--light {
  background-color: var(--tk-text);
  color: var(--tk-white);
  box-shadow: 0 16px 34px -14px rgba(var(--tk-dark-rgb), 0.6);
}

.home-page .tk-band--cta .tk-btn--light:hover {
  background-color: var(--tk-navy-700);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.3), 0 22px 42px -14px rgba(var(--tk-dark-rgb), 0.65);
}

.tk-band--cta .tk-store {
  box-shadow: 0 10px 24px -10px rgba(var(--tk-dark-rgb), 0.5);
}

@media (max-width: 560px) {
  .tk-cta__actions .tk-btn {
    width: 100%;
  }

  .tk-cta__actions .tk-stores {
    justify-content: center;
  }
}

/* ==========================================================================
   Footer - the night continues under the closing band: the journey ends
   in navy, lit by its last two colours
   ========================================================================== */

.tk-footer {
  --tk-iris: var(--tk-sky-soft);
  position: relative;
  isolation: isolate;
  padding: clamp(3.5rem, 7vw, 5rem) 0 2rem;
  background-color: var(--tk-navy-900);
  background-image:
    radial-gradient(40% 70% at 0% 100%, rgba(var(--tk-cobalt-rgb), 0.2) 0%, rgba(var(--tk-cobalt-rgb), 0) 70%),
    radial-gradient(40% 70% at 100% 100%, rgba(var(--tk-cyan-rgb), 0.12) 0%, rgba(var(--tk-cyan-rgb), 0) 70%);
  color: var(--tk-on-night-soft);
}

.tk-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: min(1280px, 100%);
  height: 1px;
  transform: translateX(-50%);
  /* the closing band now fades into the footer, so no seam line */
  background-image: none;
}

.tk-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 4rem);
}

.tk-footer .tk-brand {
  color: var(--color-white);
}

.tk-footer__about {
  max-width: 24rem;
  margin-top: 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.7;
}

.tk-footer__stores {
  margin-top: 1.75rem;
}

.tk-footer__stores .tk-store img {
  height: 2.5rem;
}

.tk-footer nav h3 {
  font-family: var(--tk-display);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--color-white);
}

.tk-footer nav ul {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.tk-footer nav a {
  font-size: 0.9375rem;
  color: var(--tk-on-night-soft);
  transition: color 0.2s ease;
}

.tk-footer nav a:hover {
  color: var(--color-white);
}

.tk-footer address {
  margin-top: 1.5rem;
  font-size: 0.875rem;
  font-style: normal;
  line-height: 1.7;
  color: var(--tk-on-night-faint);
}

.tk-footer address .tk-footer__mail {
  color: var(--tk-iris);
}

.tk-footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--tk-line-night);
  font-size: 0.8125rem;
  color: var(--tk-on-night-faint);
}

.tk-footer__bar-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

.tk-footer__bar-links a {
  color: var(--tk-on-night-faint);
  transition: color 0.2s ease;
}

.tk-footer__bar-links a:hover {
  color: var(--color-white);
}

@media (max-width: 900px) {
  .tk-footer__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tk-footer__brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .tk-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ==========================================================================
   Section colour
   ========================================================================== */

/* --- the journey ------------------------------------------------------
   Sunset into night, one step per section, never doubling back:

     Hero       navy > deep blue > blue, a violet light and a low coral
                dawn along its foot (the night the journey starts from;
                the footer returns to it)
     About      apricot > salmon        orange ink
     How        salmon > blush          pink ink   (the free call: orange > coral > pink)
     Features   blush > orchid          magenta ink (icons pink > magenta > purple)
     Stats      magenta > purple, deep
     Safety     lavender > periwinkle   violet ink
     Stories    periwinkle > sky        cobalt ink (skies violet > blue)
     FAQ        sky > ice               blue ink
     Contact    ice > aqua              cyan ink
     Closing    periwinkle > sky > aqua, bright, dark text
     Footer     navy, lit cobalt and cyan

   Each light section runs from its own wash to the next one's, so no edge
   ever changes colour. A section's stage is set here and nothing else
   needs to change: the label, links, focus ring, icon tiles, glows, active
   states and its ink gradient (--tk-ink-from > --tk-ink-to, pointing to
   the next stage) all read it. */

.tk-hero {
  --tk-accent-rgb: var(--tk-cobalt-rgb);
  --tk-ink-from: var(--tk-cobalt-ink);
  --tk-ink-to: var(--tk-violet-ink);
  --tk-iris: var(--tk-sky-soft);               /* accent text and icons on the blue */
  --tk-on-night-soft: var(--tk-on-navy-soft);
}

.tk-about {
  --tk-wash-from: var(--tk-wash-apricot);
  --tk-wash-to: var(--tk-wash-salmon);
  --tk-indigo: var(--tk-orange-ink);
  --tk-indigo-hover: var(--tk-orange-ink-hover);
  --tk-indigo-50: var(--tk-orange-50);
  --tk-accent-rgb: var(--tk-orange-rgb);
  --tk-accent-2-rgb: var(--tk-coral-rgb);
  --tk-ink-from: var(--tk-orange-ink);
  --tk-ink-to: var(--tk-pink-ink);
  --tk-glow-x: 100%;
}

.tk-how {
  --tk-wash-from: var(--tk-wash-salmon);
  --tk-wash-to: var(--tk-wash-blush);
  --tk-indigo: var(--tk-pink-ink);
  --tk-indigo-hover: var(--tk-pink-ink-hover);
  --tk-indigo-50: var(--tk-pink-50);
  --tk-accent-rgb: var(--tk-pink-rgb);
  --tk-accent-2-rgb: var(--tk-coral-rgb);
  --tk-ink-from: var(--tk-pink-ink);
  --tk-ink-to: var(--tk-magenta-ink);
  --tk-glow-x: 0%;
}

.tk-features {
  --tk-wash-from: var(--tk-wash-blush);
  --tk-wash-to: var(--tk-wash-orchid);
  --tk-indigo: var(--tk-magenta-ink);
  --tk-indigo-hover: var(--tk-magenta-ink-hover);
  --tk-indigo-50: var(--tk-magenta-50);
  --tk-accent-rgb: var(--tk-magenta-rgb);
  --tk-accent-2-rgb: var(--tk-pink-rgb);
  --tk-ink-from: var(--tk-magenta-ink);
  --tk-ink-to: var(--tk-purple-ink);
  --tk-glow-x: 100%;
}

.tk-safety {
  --tk-wash-from: var(--tk-wash-lavender);
  --tk-wash-to: var(--tk-wash-periwinkle);
  --tk-indigo: var(--tk-violet-ink);
  --tk-indigo-hover: var(--tk-violet-ink-hover);
  --tk-indigo-50: var(--tk-violet-50);
  --tk-accent-rgb: var(--tk-violet-rgb);
  --tk-accent-2-rgb: var(--tk-cobalt-rgb);
  --tk-ink-from: var(--tk-violet-ink);
  --tk-ink-to: var(--tk-blue-ink);
  --tk-glow-x: 0%;
}

.tk-stories {
  --tk-wash-from: var(--tk-wash-periwinkle);
  --tk-wash-to: var(--tk-wash-sky);
  --tk-indigo: var(--tk-cobalt-ink);
  --tk-indigo-hover: var(--tk-cobalt-ink-hover);
  --tk-indigo-50: var(--tk-cobalt-50);
  --tk-accent-rgb: var(--tk-cobalt-rgb);
  --tk-accent-2-rgb: var(--tk-violet-rgb);
  --tk-ink-from: var(--tk-cobalt-ink);
  --tk-ink-to: var(--tk-blue-ink);
  --tk-glow-x: 100%;
}

.tk-faq-band {
  --tk-wash-from: var(--tk-wash-sky);
  --tk-wash-to: var(--tk-wash-ice);
  --tk-indigo: var(--tk-blue-ink);
  --tk-indigo-hover: var(--tk-blue-ink-hover);
  --tk-indigo-50: var(--tk-blue-50);
  --tk-accent-rgb: var(--tk-blue-rgb);
  --tk-accent-2-rgb: var(--tk-sky-rgb);
  --tk-ink-from: var(--tk-blue-ink);
  --tk-ink-to: var(--tk-cyan-ink);
  --tk-glow-x: 0%;
}

.tk-contact-band {
  --tk-wash-from: var(--tk-wash-ice);
  --tk-wash-to: var(--tk-wash-aqua);
  --tk-indigo: var(--tk-cyan-ink);
  --tk-indigo-hover: var(--tk-cyan-ink-hover);
  --tk-indigo-50: var(--tk-cyan-50);
  --tk-accent-rgb: var(--tk-cyan-rgb);
  --tk-accent-2-rgb: var(--tk-cobalt-rgb);
  --tk-ink-from: var(--tk-cyan-ink);
  --tk-ink-to: var(--tk-teal-ink);
  --tk-glow-x: 100%;
}

/* Every light section is painted the same way from its stage: its wash
   top to bottom, plus a soft light in its own colour against one side
   (alternating sides down the page). The light fades out well inside the
   section, so the edges stay exactly on the shared washes. */
.tk-about,
.tk-how,
.tk-features,
.tk-safety,
.tk-stories,
.tk-faq-band,
.tk-contact-band {
  background-image:
    radial-gradient(42% 30% at var(--tk-glow-x) 50%, rgba(var(--tk-accent-rgb), 0.1) 0%, rgba(var(--tk-accent-rgb), 0) 70%),
    linear-gradient(180deg, var(--tk-wash-from) 0%, var(--tk-wash-to) 100%);
}

/* --- colour per feature icon ------------------------------------------
   The bento walks the section's own stretch of the journey, top to
   bottom: pink, then magenta, then purple. Each tile re-points the
   accent tokens; the tile rules above (tint at rest, filled on hover) do
   the rest. */
.tk-card--wide .tk-card__icon,
.tk-card--voice .tk-card__icon { --tk-indigo: var(--tk-pink-ink); --tk-indigo-50: var(--tk-pink-50); }
.tk-card--globe .tk-card__icon,
.tk-bento > .tk-card:nth-child(4) .tk-card__icon { --tk-indigo: var(--tk-magenta-ink); --tk-indigo-50: var(--tk-magenta-50); }
.tk-bento > .tk-card:nth-child(5) .tk-card__icon,
.tk-card--coins .tk-card__icon { --tk-indigo: var(--tk-purple-ink); --tk-indigo-50: var(--tk-purple-50); }

/* --- Safety: the filled marks take the section's violet > blue ink --- */
.tk-safety__item.is-active .tk-note__icon,
.tk-safety .tk-report-badge__icon,
.tk-safety .tk-phone__review {
  background-image: var(--tk-grad);
}

/* on that fill the badge's mark is white (it was ink on ink) */
.tk-safety .tk-report-badge__icon {
  color: var(--color-white);
}

/* ==========================================================================
   Scroll reveal
   The hidden state applies only while JS is running (html.tk-js), so the
   page is fully readable if the script fails or is blocked. Every hidden
   state is written against :not(.is-in), so however specific a section's
   own entrance is, arriving always wins. Reveals use the individual
   translate / scale properties, which leaves `transform` free for the card
   tilt and the scroll scenes.
   ========================================================================== */

.tk-js [data-reveal] {
  transition: opacity 0.9s var(--tk-ease), translate 0.9s var(--tk-ease), scale 0.9s var(--tk-ease),
    filter 0.9s var(--tk-ease);
  transition-delay: calc(var(--rd, 0) * 1ms);
}

.tk-js [data-reveal]:not(.is-in):not(.tk-head) {
  opacity: 0;
  translate: 0 1.75rem;
}

/* --- section mastheads: each section opens its own way --------------- */

.tk-js .tk-head[data-reveal] > * {
  transition: opacity 0.9s var(--tk-ease), translate 0.9s var(--tk-ease), filter 1.1s var(--tk-ease),
    clip-path 1.2s var(--tk-ease);
}

.tk-js .tk-head[data-reveal] > .tk-head__title { transition-delay: 0.08s; }
.tk-js .tk-head[data-reveal] > .tk-head__text { transition-delay: 0.2s; }

.tk-js .tk-head[data-reveal]:not(.is-in) > * {
  opacity: 0;
  translate: 0 1rem;
}

/* about: the heading comes into focus */
.tk-js .tk-about .tk-head[data-reveal]:not(.is-in) > .tk-head__title {
  filter: blur(14px);
  translate: none;
}

/* how, features, stories: the title wipes down out of a mask */
.tk-js .tk-how .tk-head[data-reveal] > .tk-head__title,
.tk-js .tk-features .tk-head[data-reveal] > .tk-head__title,
.tk-js .tk-stories .tk-head[data-reveal] > .tk-head__title {
  clip-path: inset(-0.3em -0.5em -0.4em -0.3em);
}

.tk-js .tk-how .tk-head[data-reveal]:not(.is-in) > .tk-head__title,
.tk-js .tk-features .tk-head[data-reveal]:not(.is-in) > .tk-head__title,
.tk-js .tk-stories .tk-head[data-reveal]:not(.is-in) > .tk-head__title {
  opacity: 1;
  clip-path: inset(0 0 100% 0);
  translate: 0 0.35em;
}

/* safety: arrives from the phone's side (the left, which also never
   widens the page the way an overshoot to the right would) */
.tk-js .tk-safety .tk-head[data-reveal]:not(.is-in) > * {
  translate: -2rem 0;
}

/* --- content, by kind -------------------------------------------------- */

.tk-js .tk-card[data-reveal]:not(.is-in) {
  translate: 0 3rem;
  scale: 0.96;
}

.tk-js .tk-note[data-reveal]:not(.is-in) {
  translate: 0 1.25rem;
}

.tk-js .tk-step[data-reveal]:not(.is-in) {
  translate: 0 2.5rem;
}

.tk-js .tk-stat[data-reveal]:not(.is-in) {
  translate: 0 1.5rem;
  filter: blur(10px);
}

.tk-js .tk-safety__item[data-reveal]:not(.is-in) {
  translate: -2rem 0;
}

.tk-js .tk-safety__shot[data-reveal] {
  transition-duration: 1.3s;
}

.tk-js .tk-safety__shot[data-reveal]:not(.is-in) {
  translate: none;
  scale: 0.94;
}

.tk-js .tk-marquee[data-reveal] {
  transition-duration: 1.2s;
}

.tk-js .tk-marquee[data-reveal]:not(.is-in) {
  translate: 5rem 0;
}

.tk-js .tk-contact__card[data-reveal]:not(.is-in) {
  translate: 0 2.5rem;
  scale: 0.97;
}

.tk-js .tk-band--cta [data-reveal] {
  transition-duration: 1.2s;
}

.tk-js .tk-band--cta [data-reveal]:not(.is-in) {
  translate: 0 2rem;
  filter: blur(10px);
}

.tk-js .tk-band--cta .tk-cta__actions[data-reveal] { transition-delay: 0.15s; }
.tk-js .tk-band--cta .tk-cta__note[data-reveal] { transition-delay: 0.3s; }

/* ==========================================================================
   Scroll scenes
   js/home.js sets html.tk-scenes (never under reduced motion) and drives
   each scene with one passive scroll listener, writing custom properties.
   Without the class every scene rests in its finished state.
   ========================================================================== */

/* --- hero: holds while the About panel slides up over it -------------- */
@media (min-width: 768px) {
  .tk-scenes .tk-hero {
    position: sticky;
    top: min(0px, calc(100vh - var(--tk-sec-h, 100vh)));
  }

  .tk-scenes .tk-hero > .tk-shell {
    transform: translate3d(0, calc(var(--c, 0) * 5vh), 0) scale(calc(1 - var(--c, 0) * 0.06));
    opacity: calc(1 - var(--c, 0) * 0.75);
  }

  /* fully covered: nothing left to paint, and the loops stop */
  .tk-scenes .tk-hero.tk-covered {
    visibility: hidden;
  }
}

/* --- how: the panels stack ------------------------------------------- */
@media (min-width: 961px) and (min-height: 640px) {
  /* a flex gap, not margins: sticky counts a margin against its range,
     which would shove the settled panels up unevenly at the end */
  .tk-scenes .tk-steps {
    display: flex;
    flex-direction: column;
    gap: 12vh;
  }

  .tk-scenes .tk-step {
    position: sticky;
    top: calc(var(--tk-nav-h) + 2.5rem + var(--i) * 1.125rem);
    transform: scale(calc(1 - var(--depth, 0) * 0.025));
  }
}

/* --- stats: the band opens out to full width ------------------------- */
.tk-scenes .tk-band--stats {
  clip-path: inset(0 calc(var(--tk-inset) * (1 - var(--e, 1))) round calc(var(--tk-r-xl) * (1 - var(--e, 1))));
}

.tk-scenes .tk-band--stats > .tk-shell {
  transform: scale(calc(0.97 + var(--e, 1) * 0.03));
}

/* --- cta: a ring of night opens from the foot of the band ------------ */
@media (min-width: 768px) {
  .tk-scenes .tk-band--cta {
    clip-path: circle(calc(18% + var(--o, 1) * 125%) at 50% 100%);
  }
}

/* ==========================================================================
   Off-screen sections hold their loops (js/home.js toggles .tk-paused)
   ========================================================================== */

.tk-paused,
.tk-paused::before,
.tk-paused::after,
.tk-paused *,
.tk-paused *::before,
.tk-paused *::after,
.tk-covered,
.tk-covered *,
.tk-covered *::before,
.tk-covered *::after {
  animation-play-state: paused !important;
}

/* ==========================================================================
   Reduced motion - everything decorative stops, nothing disappears
   ========================================================================== */

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

  .home-page *,
  .home-page *::before,
  .home-page *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
  }

  /* the ripples end invisible after one pass; hide them outright instead */
  .tk-rings b,
  .tk-cta__orb::after,
  .tk-hero__cue,
  .tk-phone__scan::before {
    display: none;
  }

  .tk-js [data-reveal]:not(.is-in),
  .tk-js .tk-head[data-reveal] > * {
    opacity: 1;
    translate: none;
    scale: none;
    filter: none;
    clip-path: none;
  }

  .tk-card,
  .tk-hero__device,
  .tk-chip {
    transform: none;
  }
}