/* ==========================================================================
   Talespoke on the app page kit (15 October 2026).

   The world is the Game Master's table at night, as the App Store art has it:
   the film's night blue for the ground, New York for display, and the app's own
   signature, a name underlined in its kind's colour where it was said (wax for an
   NPC, ochre for a thread, moss for a place: solid when filed, double when new).
   One band is the app's own light page, the warm grey and white leaf it sets
   the GM's words on. Loaded by the app's page and its four child pages, after
   /apps/kit/kit.css.
   ========================================================================== */

body.k-page.k-talespoke {
  --k-bg: #171A3D;            /* the night table: the film's own ground */
  --k-bg-2: #10122C;          /* the deep night, for bands and the child pages' heads */
  --k-ink: #F3F0FA;
  --k-ink-2: #BDB8DC;
  --k-accent: #D9AE55;        /* candle gold: the app's dark-mode thread ochre */
  --k-accent-ink: #171A3D;
  --k-card: #1F2352;
  --k-line: rgba(243, 240, 250, .15);
  --k-display: ui-serif, "New York", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

  /* the app's kind hues, dark mode (on the night) and light mode (on the paper) */
  --ts-npc: #E88A96; --ts-thr: #D9AE55; --ts-plc: #74BDB4;
  --ts-npc-l: #A3303F; --ts-thr-l: #8A6200; --ts-plc-l: #2B6B65;
  /* the app's light page */
  --ts-paper: #F6F5F2; --ts-leaf: #FFFFFF; --ts-ink-l: #1C1B19; --ts-ink-l2: #66625C;
  --ts-rule-l: #DEDBD5; --ts-hair-l: #EFEDE9; --ts-sunken-l: #ECEAE5;
  --ts-serif: ui-serif, "New York", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

  background: var(--k-bg);
  color: var(--k-ink);
}
.k-talespoke main { overflow-x: clip; }
.k-talespoke :focus-visible { outline: 2px solid var(--k-accent); outline-offset: 3px; border-radius: 6px; }
.k-talespoke .k-h1, .k-talespoke .k-h2 { font-weight: 600; letter-spacing: -0.02em; }
.k-talespoke .k-btn-primary { background: var(--k-ink); color: var(--k-bg); }
.k-talespoke .k-btn-quiet { color: var(--k-ink); }
.k-talespoke .k-lockup img { box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 6px 18px rgba(0,0,0,.35); }
.k-talespoke .k-lockup b { font-family: var(--k-display); font-size: 21px; }
.k-talespoke main a { color: inherit; }

/* ---------- The marks: a name underlined in its kind's colour, where it was said ---------- */
.ts-m { text-decoration-line: underline; text-decoration-thickness: 2px; text-underline-offset: .22em;
  text-decoration-skip-ink: none; text-decoration-color: var(--c, currentColor); transition: text-decoration-color .3s ease; }
.ts-m.n { --c: var(--ts-npc); }
.ts-m.t { --c: var(--ts-thr); }
.ts-m.p { --c: var(--ts-plc); }
.ts-m.new { text-decoration-style: double; text-decoration-thickness: 1.5px; }
.ts-light .ts-m.n, .ts-leaf .ts-m.n { --c: var(--ts-npc-l); }
.ts-light .ts-m.t, .ts-leaf .ts-m.t { --c: var(--ts-thr-l); }
.ts-light .ts-m.p, .ts-leaf .ts-m.p { --c: var(--ts-plc-l); }
.ts-kind { font: 600 12px/1.2 var(--k-text); letter-spacing: .07em; text-transform: uppercase; }
.ts-kind.n { color: var(--ts-npc); } .ts-kind.t { color: var(--ts-thr); } .ts-kind.p { color: var(--ts-plc); }
.ts-leaf .ts-kind.n, .ts-light .ts-kind.n { color: var(--ts-npc-l); }
.ts-leaf .ts-kind.t, .ts-light .ts-kind.t { color: var(--ts-thr-l); }
.ts-leaf .ts-kind.p, .ts-light .ts-kind.p { color: var(--ts-plc-l); }

/* A leaf: the app's white page for the GM's words */
.ts-leaf { background: var(--ts-leaf); color: var(--ts-ink-l); border-radius: 16px; box-shadow: 0 30px 60px -28px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.04); }

/* ---------- Hero: the night table across the whole first screen ---------- */
.ts-hero { padding-top: 112px; padding-bottom: 40px; }
.ts-hero .k-h1 { font-size: clamp(40px, min(4.4vw, 7.2svh), 72px); line-height: 1.02; max-width: 9.6em; text-wrap: balance; }
.ts-hero .k-hero-copy .k-btn { font-size: 15px; padding: 0 16px; }
.ts-hero .k-lead { max-width: 33ch; color: var(--k-ink); font-size: clamp(17px, min(1.4vw, 2.6svh), 21px); text-wrap: pretty; }
.ts-price { font-size: 16px; color: var(--k-ink-2); max-width: 40ch; text-wrap: pretty; }
.ts-price strong { color: var(--k-ink); font-weight: 600; }
.ts-hero .k-hero-copy > * + *, .ts-hero .k-hero-head > * + *, .ts-hero .k-hero-more > * + * { margin-top: clamp(14px, 2.4svh, 22px); }
.ts-hero .k-meta { font-size: 14px; }
.ts-hero .k-hero-copy { position: relative; z-index: 2; }

/* The showpiece: the film on its canvas. On a desktop it fills the hero below the site's nav,
   the frame set right of the copy so the dragon never crosses the words; the night it was
   rendered on is the page's, and its edges fade into it. */
.ts-show { position: relative; }
.ts-film { position: absolute; inset: 0; --fx: .5; --fy: .5; --fz: 1; }
.ts-film img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  object-position: calc(var(--fx) * 100%) calc(var(--fy) * 100%);
  transform: scale(var(--fz)); transform-origin: calc(var(--fx) * 100%) calc(var(--fy) * 100%); }
.ts-film canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .3s ease; }
.ts-film.is-live canvas { opacity: 1; }
.ts-film .ts-poster-end { display: none; }
html:not(.k-motion) .ts-film .ts-poster-start { display: none; }
html:not(.k-motion) .ts-film .ts-poster-end { display: block; }
html:not(.k-motion) .ts-film canvas { display: none; }

/* What the recap filed: the app's own rows. A name the recap uses but nothing has filed yet is
   dotted grey, as the app marks it; filed, it takes its kind's colour. Every row is there from
   the first frame; the first is filed at rest. */
.ts-found { padding: 12px 16px 14px; max-width: 470px; }
.ts-found-head { margin: 0 0 8px !important; font: 600 12px/1.2 var(--k-text); letter-spacing: .07em; text-transform: uppercase; color: var(--ts-ink-l2); }
.ts-found ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, auto)); justify-content: start; gap: 6px 18px; }
.ts-found li { display: grid; grid-template-columns: 3px auto; column-gap: 9px; align-items: center; }
.ts-found li::before { content: ""; width: 3px; height: 100%; grid-row: span 2; border-radius: 2px; background: var(--k); }
.ts-found li.n { --k: var(--ts-npc-l); } .ts-found li.t { --k: var(--ts-thr-l); } .ts-found li.p { --k: var(--ts-plc-l); }
.ts-found b { font: 500 18px/1.2 var(--ts-serif); color: var(--ts-ink-l); text-decoration: underline solid var(--k) 2px; text-underline-offset: .22em; text-decoration-skip-ink: none; white-space: nowrap; }
.ts-found .ts-kind { font-size: 11px; margin-top: 3px; }
html.k-motion .ts-found li:not(.is-on) { --k: #B8B3AB; }
html.k-motion .ts-found li:not(.is-on) b { text-decoration-style: dotted; text-decoration-color: var(--ts-ink-l2); }
html.k-motion .ts-found li:not(.is-on) .ts-kind { color: var(--ts-ink-l2); }
.ts-found li, .ts-found li::before, .ts-found b, .ts-found .ts-kind { transition: color .3s ease, background-color .3s ease, text-decoration-color .3s ease; }

@media (min-width: 900px) {
  .ts-hero { min-height: 100svh; }
  .ts-hero .k-hero-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: calc(100svh - 152px); align-items: center; }
  .ts-hero .k-hero-copy { min-width: min(500px, 100%); }
  .ts-hero .k-actions { flex-wrap: nowrap; }
  .ts-show { position: absolute; left: 0; right: 0; top: 96px; bottom: 0; z-index: 0; overflow: hidden; }
  .ts-show::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(to right, var(--k-bg) 0, rgba(23,26,61,.86) calc(var(--k-gutter) + 22%), rgba(23,26,61,0) 50%); }
  /* the whole frame, top to bottom, at a 1470x840 window: the candle and the recap's page inside
     the right edge, the d20 above the bottom; shorter windows lose a little sky first */
  .ts-film { left: 10%; right: -2%; --fx: .5; --fy: .72;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14%), linear-gradient(to bottom, transparent 0, #000 4%, #000 94%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(to right, transparent 0, #000 14%), linear-gradient(to bottom, transparent 0, #000 4%, #000 94%, transparent 100%);
            mask-composite: intersect; }
}
/* Pinned for about a screen and a half while the story plays, in any desktop window the copy fits
   (from 600 tall: a 1366x768 laptop's browser is about 657), so the moment never plays off-screen. */
@media (min-width: 900px) and (min-height: 600px) {
  html.k-motion .ts-hero-run { height: 250svh; }
  html.k-motion .ts-hero { position: sticky; top: 0; height: 100svh; min-height: 0; padding-top: 104px; }
}
@media (min-width: 900px) and (max-height: 760px) {
  .ts-hero .k-meta { display: none; }
  .ts-hero .k-lockup img { width: 44px; height: 44px; border-radius: 10px; }
  .ts-hero .k-lockup b { font-size: 19px; }
  html.k-motion .ts-hero { padding-top: 100px; }
}
@media (max-width: 899px) {
  .ts-hero { padding-top: 96px; }
  .ts-hero .k-hero-grid { gap: 16px; }
  .ts-hero .k-h1 { font-size: clamp(38px, 10.5vw, 52px); }
  .ts-hero .k-hero-copy > .k-hero-more { display: contents; }
  .ts-hero .k-hero-more > * { order: 4; margin-top: 0 !important; }
  .ts-hero .k-hero-more > .ts-found { order: 3; }
  .ts-show { height: clamp(290px, 90vw, 420px); margin: 0 calc(-1 * var(--k-gutter)); }   /* a height, not aspect-ratio: WebKit gave the grid item none */
  .ts-film { --fx: .5; --fy: .26; --fz: 1.43;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 84%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 84%, transparent 100%); }
  .ts-hero .k-hero-more > .ts-found { margin-top: -60px !important; margin-bottom: 4px !important; }
  .ts-found { position: relative; z-index: 2; margin: -60px auto 6px; width: max-content; max-width: 100%; box-sizing: border-box; padding: 10px 12px 12px; }
  .ts-found ul { gap: 6px 12px; }
  .ts-found b { font-size: 15px; }
}
@media (max-width: 380px) { .ts-found b { font-size: 14px; } .ts-found ul { gap: 6px 9px; } }

/* ---------- Scenes ---------- */
.ts-scene .k-visual { gap: clamp(20px, 3vw, 44px); }
.k-talespoke .k-device { box-shadow: 0 0 0 1.5px #3A3A3D inset, 0 40px 90px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.06); }
.k-talespoke .k-step .k-h2 { font-size: clamp(34px, 3.6vw, 56px); }
.k-talespoke .k-step .k-body { color: var(--k-ink-2); }
.k-talespoke main :is(.k-lead, .k-body, .ts-price, .ts-small) { text-wrap: pretty; }

/* Chapter 1: tonight's recap, said; its names lifted into their columns */
@media (min-width: 900px) { .ts-said-scene .k-stage-grid { grid-template-columns: minmax(0, 4.3fr) minmax(0, 7.7fr); } }
.ts-said { width: min(360px, 100%); padding: 16px 18px 14px; flex: 0 1 360px; min-width: 0; }
.ts-said-head { font: 600 12px/1.2 var(--k-text); letter-spacing: .07em; text-transform: uppercase; color: var(--ts-ink-l2); margin-bottom: 8px !important; }
.ts-said-text { font: 400 clamp(13px, min(1vw, 1.75svh), 15px)/1.45 var(--ts-serif); color: var(--ts-ink-l); }
.ts-cols { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 10px; margin-top: 12px !important; padding-top: 10px; border-top: 1px solid var(--ts-rule-l); }
.ts-col-head { display: flex; align-items: baseline; gap: 5px; margin-bottom: 6px !important; }
.ts-cnt { font: 600 18px/1 var(--k-text); color: var(--ts-ink-l); font-variant-numeric: tabular-nums; min-width: 1ch; }
.ts-col .ts-kind { font-size: 10.5px; }
.ts-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.ts-col li { font: 400 12.5px/1.25 var(--ts-serif); color: var(--ts-ink-l); padding-left: 7px; border-left: 2.5px solid var(--k); }
.ts-col li.n { --k: var(--ts-npc-l); } .ts-col li.t { --k: var(--ts-thr-l); } .ts-col li.p { --k: var(--ts-plc-l); }
.ts-col li.new::after { content: " · new"; font: 500 10.5px/1 var(--k-text); color: var(--ts-ink-l2); }
html.k-motion .ts-col li { opacity: 0; transform: translateY(-10px); transition: opacity .3s ease, transform .3s ease; }
html.k-motion .ts-col li.is-on { opacity: 1; transform: none; }
.ts-filed { margin-top: 10px !important; font: 600 13px/1.3 var(--k-text); color: var(--ts-plc-l); transition: opacity .3s ease; }
html.k-motion .ts-said-text .ts-m { text-decoration-color: transparent; }
html.k-motion .ts-said-text .ts-m.is-on { text-decoration-color: var(--c); }
html.k-motion .ts-filed { opacity: 0; }

/* Chapter 3: a question, and the answer from the notes; then a name */
.ts-ask { width: min(340px, 100%); flex: none; display: grid; gap: 14px; }
.ts-field { position: relative; display: flex; align-items: center; gap: 10px; background: var(--ts-leaf); color: var(--ts-ink-l); border-radius: 999px; padding: 12px 18px;
  font: 400 17px/1.3 var(--k-text); box-shadow: 0 20px 40px -24px rgba(0,0,0,.6); }
.ts-field svg { width: 18px; height: 18px; flex: none; color: var(--ts-ink-l2); }
.ts-field-text { position: relative; display: block; flex: 1; min-width: 0; height: 1.3em; white-space: nowrap; }
.ts-field-text > span { position: absolute; left: 0; top: 0; }
.ts-field-ph { color: var(--ts-ink-l2); display: none; }
.ts-field-name { display: none; }
html.k-motion .ts-field-ph, html.k-motion .ts-field-name { display: inline; }
html.k-motion .ts-field-name { opacity: 0; }
html.k-motion .ts-field-q { clip-path: inset(0 100% 0 0); }
.ts-ask-out { display: grid; }
.ts-ask-out > * { grid-area: 1 / 1; align-self: start; }
html:not(.k-motion) .ts-ask-out { gap: 14px; }
html:not(.k-motion) .ts-ask-out > .ts-hits { grid-area: 2 / 1; }
.ts-answer { padding: 16px 18px; }
.ts-answer-head { font: 600 12px/1.2 var(--k-text); letter-spacing: .07em; text-transform: uppercase; color: var(--ts-ink-l2); margin-bottom: 8px !important; }
.ts-answer-text { font: 400 17px/1.5 var(--ts-serif); }
.ts-answer-foot { font: 400 13px/1.4 var(--k-text); color: var(--ts-ink-l2); margin-top: 10px !important; }
.ts-hits { padding: 4px 0; }
.ts-hits li { list-style: none; display: grid; grid-template-columns: 3px 1fr auto; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--ts-hair-l); align-items: center; }
.ts-hits li:first-child { border-top: 0; }
.ts-hits ul { margin: 0; padding: 0; }
.ts-hits li::before { content: ""; width: 3px; align-self: stretch; border-radius: 2px; background: var(--k); }
.ts-hits li.n { --k: var(--ts-npc-l); } .ts-hits li.t { --k: var(--ts-thr-l); }
.ts-hits b { font: 500 17px/1.25 var(--ts-serif); display: block; }
.ts-hits span { font: 400 13px/1.3 var(--k-text); color: var(--ts-ink-l2); }
.ts-hits em { font: 400 13px/1.3 var(--k-text); font-style: normal; color: var(--ts-ink-l2); white-space: nowrap; }
html.k-motion .ts-answer, html.k-motion .ts-hits { opacity: 0; }

@media (max-width: 899px) { .ts-said, .ts-ask { display: none; } }

/* The strip: each scene's moment on a phone */
.k-talespoke .k-strip { gap: 6px; }
.ts-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: rgba(243,240,250,.08);
  box-shadow: inset 0 0 0 1px var(--k-line); font: 500 14px/1.2 var(--k-text); color: var(--k-ink); white-space: nowrap; }
.ts-chip.n { box-shadow: inset 0 -2px 0 var(--ts-npc), inset 0 0 0 1px var(--k-line); }
.ts-chip.t { box-shadow: inset 0 -2px 0 var(--ts-thr), inset 0 0 0 1px var(--k-line); }
.ts-chip.p { box-shadow: inset 0 -2px 0 var(--ts-plc), inset 0 0 0 1px var(--k-line); }
.ts-chip.q { font-family: var(--ts-serif); }
.ts-chip.ts-tot { background: var(--k-ink); color: var(--k-bg); box-shadow: none; font-weight: 600; }
.ts-strip-answer { display: block; width: 100%; background: var(--ts-leaf); color: var(--ts-ink-l); border-radius: 12px; padding: 8px 12px; font: 400 15px/1.4 var(--ts-serif); }
.ts-strip-answer b { display: block; font: 600 11px/1.2 var(--k-text); letter-spacing: .07em; text-transform: uppercase; color: var(--ts-ink-l2); margin-bottom: 3px; }
html.k-motion .k-strip .ts-chip, html.k-motion .k-strip .ts-strip-answer { opacity: 0; transform: translateY(6px); transition: opacity .25s ease, transform .25s ease; }
/* the ask strip's two steps share one place, so the phone below never moves */
.ts-ask-strip .ts-g { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
@media (max-width: 899px) { html.k-motion .k-talespoke .ts-ask-strip { display: grid; } html.k-motion .ts-ask-strip .ts-g { grid-area: 1 / 1; align-self: start; } }
.ts-ask-strip .ts-g { width: 100%; }
html.k-motion .ts-ask-strip .ts-g2 { visibility: hidden; }

/* ---------- Band: Thessaly's page, on the app's own light page ---------- */
.ts-light { background: var(--ts-paper); color: var(--ts-ink-l); }
.ts-light .k-h2, .ts-light h2 { color: var(--ts-ink-l) !important; }
.ts-light .k-body, .ts-light .k-lead { color: var(--ts-ink-l2); }
.ts-light .k-eyebrow { color: var(--ts-npc-l); }
.ts-page { padding: 26px 0 0; max-width: 520px; width: 100%; justify-self: center; }
.ts-page-head { padding: 0 4px; }
.ts-page-kind { display: flex; align-items: center; gap: 8px; }
.ts-page-kind svg { width: 16px; height: 16px; color: var(--ts-npc-l); }
.ts-count { position: relative; display: inline-block; }
.ts-count span { display: inline-block; }
html.k-motion .ts-count span { position: absolute; left: 0; top: 0; opacity: 0; white-space: nowrap; }
html.k-motion .ts-count span:first-child { position: relative; }
html.k-motion .ts-count span.is-on { opacity: 1; }
html.k-motion .ts-count span:first-child:not(.is-on) { opacity: 0; }
.ts-page-name { font: 600 clamp(40px, 4.4vw, 60px)/1.05 var(--ts-serif); color: var(--ts-ink-l); margin: 8px 0 6px !important; letter-spacing: -0.02em; }
.ts-page-first { font: 400 15px/1.4 var(--k-text); color: var(--ts-ink-l2); padding-bottom: 18px; border-bottom: 1px solid var(--ts-rule-l); }
.ts-page-label { font: 600 13px/1.2 var(--k-text); letter-spacing: .07em; text-transform: uppercase; color: var(--ts-ink-l2); margin: 22px 4px 8px !important; }
.ts-said-list { list-style: none; margin: 0; padding: 6px 0; }
.ts-said-list li { display: grid; grid-template-columns: 64px 1fr; gap: 14px; padding: 12px 18px 12px 14px; border-top: 1px solid var(--ts-hair-l); }
.ts-said-list li:first-child { border-top: 0; }
.ts-said-list .ts-said-when { font: 600 11px/1.25 var(--k-text); letter-spacing: .07em; text-transform: uppercase; color: var(--ts-ink-l2); padding-top: 4px; }
.ts-said-list .ts-said-when b { display: block; font: 500 22px/1 var(--ts-serif); letter-spacing: 0; color: var(--ts-ink-l); margin-bottom: 3px; }
.ts-said-list p { font: 400 17px/1.5 var(--ts-serif); color: var(--ts-ink-l); }
html.k-motion .ts-said-list li { opacity: 0; transform: translateY(14px); }
.ts-light .k-section { padding-bottom: var(--k-sec); }
@media (min-width: 900px) { .ts-band-full > .k-section { min-height: 100svh; box-sizing: border-box; display: flex; align-items: center; } .ts-band-full > .k-section > .k-wrap { width: 100%; } }

/* ---------- Band: a thread across ten weeks ---------- */
.ts-deep { background: var(--k-bg-2); }
.ts-thread { position: relative; width: 100%; }
.ts-thread-head { padding-bottom: 20px; border-bottom: 1px solid var(--k-line); }
.ts-thread-name { font: 600 clamp(38px, 4vw, 58px)/1.05 var(--ts-serif); color: var(--k-ink); margin: 8px 0 6px !important; letter-spacing: -0.02em; }
.ts-thread-first { font: 400 15px/1.4 var(--k-text); color: var(--k-ink-2); }
.ts-seg { display: inline-grid; grid-template-columns: 1fr 1fr; margin-top: 16px !important; padding: 3px; border-radius: 10px; background: rgba(243,240,250,.09); min-width: 260px; }
.ts-seg span { text-align: center; padding: 7px 16px; border-radius: 8px; font: 500 15px/1.2 var(--k-text); color: var(--k-ink-2); }
.ts-seg span.is-on { background: var(--k-ink); color: var(--k-bg-2); font-weight: 600; }
.ts-thread-label { font: 600 13px/1.2 var(--k-text); letter-spacing: .07em; text-transform: uppercase; color: var(--k-ink-2); margin: 22px 0 16px !important; }
.ts-line { position: relative; list-style: none; margin: 0; padding: 0 0 0 34px; }
.ts-line::before { content: ""; position: absolute; left: 9px; top: 8px; bottom: 8px; width: 2px; background: var(--k-line); }
.ts-line-ink { position: absolute; left: 9px; top: 8px; bottom: 8px; width: 2px; background: var(--ts-thr); transform-origin: top; }
.ts-line li { position: relative; padding: 0 0 26px; }
.ts-line li:last-child { padding-bottom: 0; }
.ts-line li::before { content: ""; position: absolute; left: -31px; top: 5px; width: 14px; height: 14px; border-radius: 50%; background: var(--k-bg-2); box-shadow: inset 0 0 0 2px var(--ts-thr); }
.ts-line li.is-now::before { background: var(--ts-thr); }
.ts-line .ts-line-date { font: 600 12px/1.3 var(--k-text); letter-spacing: .07em; text-transform: uppercase; color: var(--k-ink-2); }
.ts-line p { font: 400 clamp(18px, 1.5vw, 21px)/1.45 var(--ts-serif); color: var(--k-ink); margin-top: 4px !important; max-width: 34ch; }
.ts-gap { font: italic 400 15px/1.4 var(--ts-serif); color: var(--k-ink-2); }
html.k-motion .ts-line li { opacity: 0; transform: translateX(-8px); }
html.k-motion .ts-line-ink { transform: scaleY(0); }

/* The thread band on candle gold, the app's thread colour (dark mode), with the night as its ink */
.ts-gold { background: var(--ts-thr); color: var(--k-bg); --g-ink: #171A3D; --g-ink-2: rgba(23, 26, 61, .74); --g-line: rgba(23, 26, 61, .22); }
.ts-gold .k-h2, .ts-gold h2 { color: var(--g-ink) !important; }
.ts-gold .k-body { color: var(--g-ink-2); }
.ts-gold .k-eyebrow { color: var(--g-ink-2); }
.ts-gold .ts-kind.t { color: var(--g-ink); }
.ts-gold .ts-thread-head { border-bottom-color: var(--g-line); }
.ts-gold .ts-thread-name, .ts-gold .ts-line p { color: var(--g-ink); }
.ts-gold .ts-thread-first, .ts-gold .ts-thread-label, .ts-gold .ts-line .ts-line-date { color: var(--g-ink-2); }
.ts-gold .ts-seg { background: rgba(23, 26, 61, .12); }
.ts-gold .ts-seg span { color: var(--g-ink-2); }
.ts-gold .ts-seg span.is-on { background: var(--g-ink); color: var(--ts-thr); }
.ts-gold .ts-line::before { background: var(--g-line); }
.ts-gold .ts-line-ink { background: var(--g-ink); }
.ts-gold .ts-line li::before { background: var(--ts-thr); box-shadow: inset 0 0 0 2px var(--g-ink); }
.ts-gold .ts-line li.is-now::before { background: var(--g-ink); }
.ts-gold .ts-m.n { --c: #8E2433; } .ts-gold .ts-m.p { --c: #1F5550; } .ts-gold .ts-m.t { --c: var(--g-ink); }

/* ---------- Tiles ---------- */
.ts-tiles .k-tile { background: var(--k-card); box-shadow: 0 0 0 1px var(--k-line); }
.ts-tiles .k-tile .k-h3 { color: var(--k-ink); }
.ts-tiles .k-tile p { color: var(--k-ink-2); }
.ts-art { margin-top: 10px; }
.ts-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 10px; }
.ts-flow > div { background: rgba(243,240,250,.06); border-radius: 14px; padding: 14px; box-shadow: inset 0 0 0 1px var(--k-line); }
.ts-flow b { display: block; font: 500 18px/1.25 var(--ts-serif); color: var(--k-ink); }
.ts-flow span { font: 400 13px/1.3 var(--k-text); color: var(--ts-plc); }
.ts-flow i { font-style: normal; color: var(--k-ink-2); font-size: 20px; }
@media (max-width: 599px) { .ts-flow { grid-template-columns: 1fr; } .ts-flow i { transform: rotate(90deg); justify-self: center; line-height: 1; } }
.ts-party { display: flex; flex-wrap: wrap; gap: 6px; }
.ts-party .ts-chip { background: transparent; }
.ts-party small { width: 100%; font: 600 11px/1.2 var(--k-text); letter-spacing: .07em; text-transform: uppercase; color: var(--k-ink-2); margin-bottom: 2px; }
.ts-near { padding: 12px 14px; }
.ts-near b { font: 500 17px/1.2 var(--ts-serif); display: block; text-decoration: underline double var(--ts-npc-l) 1.5px; text-underline-offset: .22em; }
.ts-near span { display: block; font: 400 13px/1.35 var(--k-text); color: var(--ts-ink-l2); margin-top: 4px; }
.ts-near em { display: flex; justify-content: space-between; align-items: center; gap: 10px; font: 400 14px/1.35 var(--k-text); font-style: normal; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--ts-hair-l); }
.ts-near em strong { font: 600 14px/1 var(--k-text); }
.ts-kept { padding: 12px 14px; display: grid; gap: 10px; }
.ts-kept p { font: 400 14px/1.4 var(--k-text) !important; color: var(--ts-ink-l) !important; }
.ts-kept strong { justify-self: start; font: 600 14px/1 var(--k-text); background: var(--ts-ink-l); color: #fff; border-radius: 999px; padding: 9px 14px; }
.ts-md { font: 400 13px/1.55 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--k-ink-2); background: rgba(0,0,0,.22); border-radius: 12px; padding: 12px 14px; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.ts-md b { color: var(--k-ink); font-weight: 600; }

/* ---------- Compare, plans, questions ---------- */
.k-talespoke .k-teaser li { background: var(--k-card); }
.k-talespoke .k-plan { background: var(--k-card); }
.k-talespoke .k-plan.k-plus { background: var(--ts-paper); color: var(--ts-ink-l); }
.k-talespoke .k-plan.k-plus .k-h3, .k-talespoke .k-plan.k-plus .k-plan-price { color: var(--ts-ink-l); }
.k-talespoke .k-plan.k-plus li::before { border-color: var(--ts-thr-l); }
.ts-plan-sub { font-size: 16px; color: var(--k-ink-2); }
.k-plus .ts-plan-sub { color: var(--ts-ink-l2); }
.ts-small { font-size: 15px; color: var(--k-ink-2); max-width: 78ch; margin-top: 26px !important; }
.ts-teaser-link { margin-top: 26px !important; }

/* ---------- The close, and the launch-notify form ---------- */
.ts-close { background: var(--k-bg-2); }
.ts-close .k-h2 { max-width: 16ch; }
.ts-close .k-lead { margin: 18px auto 0; text-align: center; }
.ts-notify { max-width: 520px; margin: 34px auto 0; padding: 22px; text-align: left; }
.ts-notify-title { font: 600 22px/1.2 var(--ts-serif); color: var(--ts-ink-l); margin-bottom: 14px !important; }
.ts-notify .form-group { display: grid; gap: 6px; }
.ts-notify label { font: 600 14px/1.2 var(--k-text); color: var(--ts-ink-l); }
.ts-notify-row { display: flex; gap: 10px; flex-wrap: wrap; }
.ts-notify input[type="email"] { flex: 1 1 220px; min-width: 0; min-height: 48px; box-sizing: border-box; border-radius: 12px; border: 1px solid var(--ts-rule-l);
  background: var(--ts-paper); color: var(--ts-ink-l); padding: 0 14px; font: 400 17px/1.2 var(--k-text); }
.ts-notify input[type="email"]:focus { outline: 2px solid var(--ts-ink-l); outline-offset: 1px; }
.ts-notify button { min-height: 48px; border: 0; border-radius: 12px; padding: 0 20px; background: var(--ts-ink-l); color: #fff; font: 600 17px/1 var(--k-text); cursor: pointer; }
.ts-notify button:disabled { opacity: .7; cursor: default; }
.ts-notify .sp-notify-status { font: 400 15px/1.4 var(--k-text); color: var(--ts-ink-l); margin-top: 10px !important; min-height: 0; }
.ts-notify .sp-notify-status:empty { display: none; }
.ts-notify .sp-notify-status.is-error { color: var(--ts-npc-l); }
.ts-notify .cf-turnstile { margin-top: 10px; }
.ts-notify-note { font-size: 14px; color: var(--k-ink-2); text-align: center; margin-top: 14px !important; }
.ts-notify-note a { color: var(--k-ink); }
.ts-close .k-subnav { justify-content: center; margin-top: 40px; }

/* ---------- Child pages: support, privacy, terms, compare ---------- */
.k-talespoke.k-child-page .k-sub-hero { background: var(--k-bg-2); }
.k-talespoke .k-doc a { color: var(--k-ink); }
.k-talespoke .k-doc strong { color: var(--k-ink); }
.k-talespoke .k-doc .k-note { background: var(--k-card); }
.k-talespoke .k-doc .em-ui, .k-talespoke .k-doc em { font-style: italic; }
.ts-docs .ts-layout { max-width: 1160px; display: grid; grid-template-columns: 220px minmax(0, 760px); gap: 56px; justify-content: center; }
.ts-toc { position: sticky; top: 110px; align-self: start; font-size: 15px; }
.ts-toc-title { font: 600 13px/1.2 var(--k-text) !important; letter-spacing: .07em; text-transform: uppercase; color: var(--k-ink-2) !important; margin-bottom: 10px !important; }
.ts-toc ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.ts-toc a { text-decoration: none; color: var(--k-ink-2) !important; }
.ts-toc a:hover { color: var(--k-ink) !important; }
.ts-toc-m { display: none; margin-bottom: 28px; }
.ts-toc-m details { background: var(--k-card); border-radius: 16px; padding: 14px 18px; box-shadow: 0 0 0 1px var(--k-line); }
.ts-toc-m summary { cursor: pointer; font: 600 16px/1.3 var(--k-text); color: var(--k-ink); }
.ts-toc-m ol { margin: 12px 0 4px; }
.ts-doc > h2:first-child, .ts-doc > .ts-toc-m + h2, .ts-doc .ts-short > h2:first-child { margin-top: 0; }
.ts-doc .k-note h2 { margin-top: 0; font-size: clamp(24px, 2.2vw, 30px); }
.ts-doc .k-faq { margin-top: 18px; }
.ts-doc .k-faq summary { font-size: 19px; }
.ts-doc .k-faq details > div p { padding-bottom: 18px; }
.ts-limits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.ts-limit { background: var(--k-card); border-radius: 18px; padding: 18px 20px; box-shadow: 0 0 0 1px var(--k-line); }
.ts-limit h3 { margin-top: 0 !important; }
.ts-form { background: var(--ts-paper); color: var(--ts-ink-l); border-radius: 20px; padding: 22px; margin: 22px 0 8px; }
.ts-form .sp-support-form a { color: var(--ts-ink-l); }
.ts-form .sp-support-form { max-width: none; margin: 0; }
@media (max-width: 1099px) {
  .ts-docs .ts-layout { grid-template-columns: minmax(0, 760px); }
  .ts-toc { display: none; }
  .ts-toc-m { display: block; }
}
@media (max-width: 759px) { .ts-limits { grid-template-columns: 1fr; } }

/* The compare table on the night */
.k-talespoke .k-table thead th { background: var(--k-bg); border-bottom-color: var(--k-ink); }
.k-talespoke .k-table td.is-us { background: color-mix(in srgb, var(--k-accent) 14%, transparent); }

@media (prefers-reduced-motion: reduce) {
  .ts-m, .ts-said-text .w { transition: none !important; }
}

/* On a phone the thread band reads heading first */
@media (max-width: 899px) { .ts-gold .k-band-grid > .k-stack { order: -1; } }
.k-talespoke .k-sub-hero .k-updated { margin-top: 18px !important; color: var(--k-ink-2); }
html:not(.k-motion) .ts-count span:not(:last-child) { display: none; }
.k-talespoke .k-sub-hero .k-lockup { margin-bottom: 20px; }
.k-talespoke .k-sub-hero .k-subnav { margin-top: 0; margin-bottom: 34px; }