/* site/story/story-phone.css */
/*
 * The scroll story's phone (partials/story-phone.html, driven by story-phone.js): the hero's device frame and iOS
 * chrome from phone.css (.tk-phone, .tk-app, the status bar, the Dynamic Island, the Liquid Glass tab bar and its
 * scroll edge, per-theme glass through --tk-ios-*), around a stack of four live screens (the story-*.css scenes).
 * This sheet holds only what the story adds: scaling before script, the stack and its crossfade, the tab bar that
 * follows the story, and the hooks a scene may use.
 *
 * Layers inside .tk-app (one stacking context): the screens (no z-index, so a scene's own z-indexed layers join this
 * context), the tab bar's scroll edge 10, the tab bar 20, the status bar 40, the Dynamic Island 50. A scene layer that
 * should cover the tab bar but not the status bar (a pushed screen, a sheet, a toast) takes a z-index from 30 to 39.
 *
 * Hooks, as a class on a slot (story-phone.html: the scene is such a screen throughout) or on a scene's root (it
 * toggles it while it pushes one): tks-chrome-notabs (a pushed screen or a sheet covers the tab bar, which slides away
 * with its scroll edge) and tks-chrome-status-light (the status bar sits over a dark backdrop).
 * Motion is transform and opacity only. A theme change restyles in place through the app's tokens (the page crossfades
 * the whole frame in a View Transition), so nothing here restarts.
 */

.tk-phone--story {
  --tks-ease: cubic-bezier(0.32, 0.72, 0, 1);
}

/* The screen fits the frame from the first paint, with or without script: the display's width over the app's 402 pt,
   from container units, as tan(atan2(width, 402px)). The angle goes through a registered property first, because WebKit
   evaluates tan(atan2(<container unit>, …)) wrongly in place (0.377 for 0.783) but gets a computed angle right.
   story-phone.js then keeps --tk-scale in step through a ResizeObserver, as the hero does. */
@property --tks-fit { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

.tk-phone--story .tk-phone__display {
  container-type: inline-size;
}

.tk-phone--story .tk-app {
  visibility: visible;
}

@supports (transform: scale(tan(atan2(1cqw, 402px)))) {
  .tk-phone--story:not(.tk-phone--sized) .tk-app {
    --tks-fit: atan2(100cqw, 402px);
    transform: scale(tan(var(--tks-fit)));
  }
}

/* ---------- the screens ---------- */

/* Each scene sits in a slot the phone owns: the crossfade moves the slot, so a scene that pauses every animation in its
   own subtree can never freeze it. A scene fills the screen unless its own CSS says otherwise. */
.tks-stack,
.tks-slot,
:where(.tks-slot) > :where(.tk-scene) {
  position: absolute;
  inset: 0;
}

/* Without script (and until story.js starts), the first screen; the others skip rendering altogether, as parked screens
   do once live. */
.tk-phone--story:not(.tks-live) .tks-slot:not(:first-child) {
  visibility: hidden;
  content-visibility: hidden;
}

/* Live: the screen in front, and one leaving it. The others wait at their first frame, parked: nothing to style, lay out
   or paint. Hidden screens sit a little to the side they will enter from, so the story moves like a carousel. A slot
   at rest has no transform, opacity or z-index, so a scene's z-indexed layers share the phone's stacking context. */
.tks-live .tks-slot {
  visibility: hidden;
  opacity: 0;
  translate: 24px 0;
}

.tks-live .tks-slot.is-before {
  translate: -24px 0;
}

.tks-live .tks-slot.is-current {
  visibility: visible;
  opacity: 1;
  translate: none;
}

.tks-live .tks-slot.is-parked {
  content-visibility: hidden;
}

/* A switch fades through: the leaving screen clears in 150 ms as it slides on, then the new one fades and slides in
   (360 ms in all). Every screen sets its large title in the same place, so the two never show on top of each other. */
.tks-live:not(.tks-instant) .tks-slot {
  transition:
    opacity 150ms ease-out,
    translate 360ms var(--tks-ease),
    visibility 0s 360ms;
}

.tks-live:not(.tks-instant) .tks-slot.is-current {
  transition:
    opacity 230ms ease-out 130ms,
    translate 300ms var(--tks-ease) 60ms;
}

/* A switch that overtakes one still in flight (a fast scroll through several steps): the newcomer fades in at once, over
   the screens still leaving, so the phone never shows an empty screen (story-phone.js: tks-hurry). */
.tks-live.tks-hurry:not(.tks-instant) .tks-slot.is-current {
  transition:
    opacity 200ms ease-out,
    translate 300ms var(--tks-ease);
}

/* ---------- chrome layers ---------- */

.tks-app .tks-edge {
  z-index: 10;
}

.tks-app .tks-tabbar {
  z-index: 20;
}

.tks-app .tk-status {
  z-index: 40;
}

.tks-app .tk-island {
  z-index: 50;
}

/* ---------- the tab bar follows the story ---------- */

/* The selection lens moves one tab (68.05 pt) per index, with a slight swell on the way (iOS 26). */
.tks-tabbar .tk-tabbar__active {
  translate: calc(var(--tks-tab, 0) * 68.05px) 0;
}

.tks-live:not(.tks-instant) .tks-tabbar .tk-tabbar__active {
  transition: translate 480ms var(--tks-ease);
}

.tks-live:not(.tks-instant) .tks-tabbar.is-moving-a .tk-tabbar__active {
  animation: tks-lens-a 480ms var(--tks-ease);
}

.tks-live:not(.tks-instant) .tks-tabbar.is-moving-b .tk-tabbar__active {
  animation: tks-lens-b 480ms var(--tks-ease);
}

@keyframes tks-lens-a {
  40% { scale: 1.07 1.04; }
}

@keyframes tks-lens-b {
  40% { scale: 1.07 1.04; }
}

/* Each tab's SF Symbol and its selected (.fill) variant: the selected tab shows the filled one, tinted (phone.css). */
.tks-tabbar .tks-on,
.tks-tabbar .tk-tab--on .tks-off {
  opacity: 0;
}

.tks-tabbar .tk-tab--on .tks-on {
  opacity: 1;
}

/* A badge a scene clears (api.badge) shrinks away; a new count springs in. */
.tks-tabbar .tk-tab__badge.is-hidden {
  opacity: 0;
  scale: 0.4;
}

.tks-live:not(.tks-instant) .tks-tabbar .tk-tab__badge {
  transition:
    opacity 200ms ease,
    scale 360ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- hooks ---------- */

/* A pushed screen or a sheet covers the tab bar: it leaves with the screen beneath (UINavigationController's parallax).
   On a slot (a scene that is such a screen throughout) or on a scene's root (while it pushes one). It goes once the
   screen has landed (360 ms), so the lens is seen reaching the new tab first, and a screen a fast scroll only passes
   through never takes it away. */
.tks-app:has(> .tks-stack > .tks-slot.is-current.tks-chrome-notabs) :is(.tks-tabbar, .tks-edge),
.tks-app:has(> .tks-stack > .tks-slot.is-current > .tks-chrome-notabs) :is(.tks-tabbar, .tks-edge) {
  opacity: 0;
  translate: -30% 0;
}

.tks-live:not(.tks-instant) :is(.tks-tabbar, .tks-edge) {
  transition:
    opacity 260ms ease,
    translate 420ms var(--tks-ease);
}

.tks-live:not(.tks-instant) .tks-app:has(> .tks-stack > .tks-slot.is-current.tks-chrome-notabs) :is(.tks-tabbar, .tks-edge),
.tks-live:not(.tks-instant) .tks-app:has(> .tks-stack > .tks-slot.is-current > .tks-chrome-notabs) :is(.tks-tabbar, .tks-edge) {
  transition:
    opacity 260ms ease 360ms,
    translate 420ms var(--tks-ease) 360ms;
}

/* Between the pushed screen and a tab after it (story-phone.js: tks-bar-fade) the screens slide the other way, so the
   bar only fades; its place moves while it is invisible: before it fades in, after it has faded out. */
.tks-live.tks-bar-fade:not(.tks-instant) :is(.tks-tabbar, .tks-edge) {
  transition:
    opacity 260ms ease,
    translate 0s;
}

.tks-live.tks-bar-fade:not(.tks-instant) .tks-app:has(> .tks-stack > .tks-slot.is-current.tks-chrome-notabs) :is(.tks-tabbar, .tks-edge),
.tks-live.tks-bar-fade:not(.tks-instant) .tks-app:has(> .tks-stack > .tks-slot.is-current > .tks-chrome-notabs) :is(.tks-tabbar, .tks-edge) {
  transition:
    opacity 260ms ease 360ms,
    translate 0s 620ms;
}

/* The status bar over a dark backdrop (a sheet's receded screen in light mode) turns light, as iOS does. */
.tks-app:has(> .tks-stack > .tks-slot.is-current.tks-chrome-status-light) .tk-status,
.tks-app:has(> .tks-stack > .tks-slot.is-current > .tks-chrome-status-light) .tk-status {
  --tk-ios-label: 255 255 255;
}

/* Windows contrast themes: the replica stays a picture of the app, as the screenshots it replaced did (it is aria-hidden
   decoration; system colours would leave a wireframe without its tones). */
.tk-phone--story .tk-phone__body {
  forced-color-adjust: none;
}

/* site/story/today.css */
/* Story scene "today" at 402 × 874 pt: the rest state, which is the still frame (today.js animates over it). App tokens,
   plus phone.css's --tk-ios-* and --tk-toast-shadow. ".td.td" outranks phone.css's .tk-app reset in any load order. */

.tk-scene--today { position: absolute; top: 0; left: 0; width: 402px; height: 874px; overflow: hidden; isolation: isolate; background: rgb(var(--background)); color: rgb(var(--foreground)); font: 400 16px/24px var(--font-sans, "Manrope", system-ui, sans-serif); letter-spacing: 0; text-align: left; text-transform: none; -webkit-font-smoothing: antialiased; -webkit-user-select: none; user-select: none; }
.td.td { position: absolute; inset: 0; }
.td.td :where(p, div, span, svg) { box-sizing: border-box; margin: 0; padding: 0; border: 0; font: inherit; letter-spacing: inherit; text-wrap: wrap; max-width: none; }
.td.td svg { display: block; overflow: visible; fill: currentColor; flex: none; }
.td.td .td-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* theme/tones.ts */
.td-d { --tone: var(--destructive); --tone-soft: var(--destructive-soft); }
.td-a { --tone: var(--accent); --tone-soft: var(--accent-soft); }
.td-w { --tone: var(--warning); --tone-soft: var(--warning-soft); }
.td-g { --tone: var(--gold); --tone-soft: var(--gold-soft); }
.td-i { --tone: var(--info); --tone-soft: var(--info-soft); }
.td-p { --tone: var(--primary); --tone-soft: var(--primary-soft); }
.td-s { --tone: var(--success); --tone-soft: var(--success-soft); }
.td-ln { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.td-cut { fill: none; stroke: rgb(var(--tone-soft)); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.td-thin { stroke-width: 1.1; }
.td-bold { stroke-width: 1.9; }
.td-fc { fill: rgb(var(--tone-soft)); }

.td.td :is(.td-tile, .td-card, .td-ac) { border: 1px solid rgb(var(--border)); border-radius: 24px; background: rgb(var(--card)); }
.td.td :is(.td-it, .td-ait, .td-av, .td-cta, .td-mail) { background: rgb(var(--tone-soft)); color: rgb(var(--tone)); }
.td.td :is(.td-it, .td-ait, .td-av, .td-nb) { display: flex; flex: none; align-items: center; justify-content: center; }
.td.td :is(.td-ov, .td-tl, .td-tc, .td-de, .td-pu) { color: rgb(var(--muted-foreground)); }
.td.td :is(.td-badge, .td-cta, .td-mail, .td-act, .td-btn) { border-radius: 999px; }

/* <Screen> (px-5, gap-7), scrolled to "Needs you"; KpiGrid's second row passes under the bar. */
.td.td .td-scroll { position: absolute; top: -52px; left: 20px; width: 362px; display: flex; flex-direction: column; gap: 28px; }
.td.td .td-ov { font-weight: 700; font-size: 11px; line-height: 14px; letter-spacing: 1.3px; text-transform: uppercase; }
.td.td .td-t2 { position: relative; top: -0.67px; font-family: var(--font-serif, "Instrument Serif", serif); font-size: 24px; line-height: 30px; }

.td.td .td-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.td.td .td-tile { display: flex; flex-direction: column; padding: 58px 16px 16px; }
.td.td .td-m { position: relative; top: -3px; font-weight: 800; font-size: 26px; line-height: 30px; letter-spacing: -0.6px; white-space: nowrap; }
.td.td .td-tl { font-weight: 500; font-size: 13px; line-height: 18px; white-space: nowrap; }
.td.td .td-tc { margin-top: 2px; font-weight: 600; font-size: 12px; line-height: 16px; white-space: nowrap; }

.td.td .td-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.td.td .td-head > p { display: flex; flex: 1; flex-direction: column; gap: 4px; }
.td.td .td-badge { display: grid; margin-bottom: 4px; padding: 3px 8px; background: rgb(var(--accent)); color: rgb(var(--accent-foreground)); font-weight: 600; font-size: 11px; line-height: 14px; text-align: center; }
.td.td .td-badge > span { grid-area: 1 / 1; }
.td.td .td-b7 { opacity: 0; }

/* NeedsYou: SectionHeader, AttentionCard, and the ghost "Show five more"; the other five wait hidden in its place. */
.td.td .td-list { display: flex; flex-direction: column; gap: 12px; }
.td.td .td-card { position: relative; display: flex; gap: 14px; padding: 16px 16px 16px 20px; overflow: hidden; }
.td.td .td-card::before { content: ""; position: absolute; top: 16px; bottom: 16px; left: 0; width: 3px; border-radius: 0 999px 999px 0; background: rgb(var(--tone)); }
.td.td .td-it { width: 38px; height: 38px; border-radius: 12px; }
.td.td .td-tx { display: flex; flex: 1; flex-direction: column; gap: 4px; min-width: 0; }
.td.td .td-ti { overflow: hidden; font-weight: 600; font-size: 15px; line-height: 21px; white-space: nowrap; text-overflow: ellipsis; }
.td.td .td-de { font-weight: 500; font-size: 13px; line-height: 18px; }
.td.td .td-cta { display: flex; align-items: center; align-self: flex-start; gap: 4px; margin-top: 6px; padding: 4px 10px; font-weight: 600; font-size: 12px; line-height: 16px; white-space: nowrap; }
.td.td .td-cta svg { width: 9px; height: 9px; }

.td.td .td-more { position: relative; display: flex; justify-content: center; height: 36px; }
.td.td .td-btn { display: flex; height: 36px; padding: 0 14px; color: rgb(var(--primary)); font-weight: 700; font-size: 14px; line-height: 18px; }
.td.td .td-press { display: grid; align-items: center; }
.td.td .td-press > span { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; }
.td.td .td-l2 { opacity: 0; }
.td.td .td-dn { width: 11.5px; height: 7.5px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.td.td .td-l2 .td-dn { transform: rotate(180deg); }
.td.td .td-rest { position: absolute; z-index: 1; top: 0; left: 0; right: 0; display: flex; flex-direction: column; gap: 12px; }
.td.td .td-rest > .td-card { opacity: 0; transform: translateY(25px); }
.td.td .td-touch { position: absolute; z-index: 2; top: -4px; left: 50%; width: 44px; height: 44px; margin-left: -22px; border-radius: 50%; background: rgb(var(--foreground) / 0.16); box-shadow: inset 0 0 0 1px rgb(var(--foreground) / 0.12); opacity: 0; pointer-events: none; }

/* AssistantPreview: three drafts left once Linh's reminder went out. */
.td.td .td-ait { width: 30px; height: 30px; margin-bottom: 4px; border-radius: 9px; }
.td.td .td-ac { display: flex; flex-direction: column; gap: 12px; min-height: 240px; padding: 20px; }
.td.td .td-ar { display: flex; align-items: center; gap: 12px; }
.td.td .td-av { width: 40px; height: 40px; border-radius: 50%; font-weight: 700; font-size: 14px; line-height: 16px; }
.td.td .td-an { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.td.td .td-nm { font-weight: 700; font-size: 16px; line-height: 22px; white-space: nowrap; }
.td.td .td-pu { display: flex; align-items: center; gap: 4px; font-weight: 500; font-size: 13px; line-height: 18px; white-space: nowrap; }
.td.td .td-mail { display: flex; align-items: center; gap: 4px; padding: 3px 8px; font-weight: 600; font-size: 11px; line-height: 14px; }
.td.td .td-ab { display: -webkit-box; overflow: hidden; font-weight: 500; font-size: 14px; line-height: 20px; color: rgb(var(--foreground) / 0.8); -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

/* iOS 26 top scroll edge, nav bar (title, glass pill) and toast (ToastHost: insets.top + 6), as phone.css. The bottom
   edge, under the tab bar, is the story phone's own (story-phone.html), drawn over every screen with a tab bar. */
.td.td .td-edge { position: absolute; z-index: 3; left: 0; right: 0; pointer-events: none; }
.td.td .td-edge::before { content: ""; position: absolute; inset: 0; background-color: rgb(var(--background)); }
.td.td .td-top { top: 0; left: 12px; right: 12px; height: 128px; }
.td.td .td-top::after { content: ""; position: absolute; inset: 0 0 auto; height: 112px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); -webkit-mask-image: linear-gradient(#000 72%, transparent); }
.td.td .td-top::before { -webkit-mask-image: linear-gradient(rgb(0 0 0 / 0.85) 76.5%, rgb(0 0 0 / 0.5) 83%, rgb(0 0 0 / 0.28) 87.5%, rgb(0 0 0 / 0.14) 92%, rgb(0 0 0 / 0.04) 97%, transparent); }

.td.td :is(.td-navt, .td-pill, .td-toast) { position: absolute; z-index: 3; }
.td.td .td-navt { top: 73px; left: 0; right: 0; font-weight: 700; font-size: 17px; line-height: 22px; text-align: center; }
.td.td .td-pill { top: 62px; left: 284.67px; width: 101px; height: 44px; border-radius: 22px; background-color: rgb(var(--tk-ios-glass)); box-shadow: var(--tk-ios-glass-edge); -webkit-backdrop-filter: var(--tk-ios-glass-filter); backdrop-filter: var(--tk-ios-glass-filter); color: rgb(var(--tk-ios-bar-item)); }
.td.td .td-msg { position: absolute; top: 12.5px; left: 10.85px; width: 23.7px; height: 18.7px; }
.td.td .td-me { position: absolute; top: 10.85px; left: 66.2px; width: 21.9px; height: 21.9px; }
.td.td .td-nb { position: absolute; top: -4px; left: 24px; width: 20.67px; height: 20.67px; border-radius: 50%; background: rgb(var(--accent)); color: rgb(var(--accent-foreground)); font: 15px/1 -apple-system, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif; }

.td.td .td-toast { top: 68px; left: 12px; right: 12px; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid rgb(var(--border)); border-radius: 24px; background: rgb(var(--elevated)); box-shadow: var(--tk-toast-shadow); opacity: 0; transform: translateY(-25px); }
.td.td .td-toast .td-tx { gap: 0; }
.td.td .td-toast .td-it svg { width: 15px; height: 15px; }
.td.td .td-act { flex: none; padding: 6px 12px; background: rgb(var(--primary-soft)); color: rgb(var(--primary)); font-weight: 700; font-size: 12px; line-height: 16px; }

/* A theme switch (html.theme-switching): colours fade with the page. */
@media (prefers-reduced-motion: no-preference) {
  :where(html.theme-switching) .tk-scene--today,
  :where(html.theme-switching) .td.td :is(.td-ov, .td-tl, .td-tc, .td-de, .td-pu, .td-ab, .td-badge, .td-card, .td-tile, .td-ac, .td-it, .td-ait, .td-av, .td-cta, .td-mail, .td-btn, .td-pill, .td-nb, .td-toast, .td-act, .td-cut, .td-fc) { transition: color .25s, fill .25s, stroke .25s, background-color .25s, border-color .25s, box-shadow .25s; }
}

/* site/story/pipeline.css */
/* Story scene "pipeline": the app's Pipeline tab, 402 × 874 design px, app tokens. Custom elements dodge phone.css's .tk-app
   reset; fractional tops match the app's baselines. .pl-paused freezes the animations, .pl-still drops them. */
pl-scene{position:absolute;inset:0;overflow:hidden;--f:var(--font-sans);--m:rgb(var(--muted-foreground));--b:1px solid rgb(var(--border));color:rgb(var(--foreground));font:400 16px/24px var(--f);white-space:nowrap;-webkit-font-smoothing:antialiased}
pl-scene *{box-sizing:border-box}
pl-scene :where(:not(:defined)){display:block}
pl-scene svg{display:block;flex:none;overflow:visible;fill:currentColor}
pl-scene>svg{position:absolute;width:0;height:0}
.pl-k,.pl-cut{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.pl-cut{stroke:rgb(var(--tone-soft))}
.pl-fcut{fill:rgb(var(--tone-soft))}
pl-badge{--tone:var(--muted-foreground);--tone-soft:var(--muted)}
pl-scene [data-t=primary]{--tone:var(--primary);--tone-soft:var(--primary-soft)}
pl-scene [data-t=accent]{--tone:var(--accent);--tone-soft:var(--accent-soft)}
pl-scene [data-t=gold]{--tone:var(--gold);--tone-soft:var(--gold-soft)}
pl-scene [data-t=success]{--tone:var(--success);--tone-soft:var(--success-soft)}
pl-scene [data-t=warning]{--tone:var(--warning);--tone-soft:var(--warning-soft)}
pl-scene [data-t=info]{--tone:var(--info);--tone-soft:var(--info-soft)}
pl-chip,pl-card,pl-tile,pl-av,pl-badge,pl-hint,pl-toast,pl-dot,pl-metric,pl-chips,pl-meta{display:flex;align-items:center}
pl-tile,pl-av,pl-dot,pl-hint{justify-content:center}
pl-tile,pl-av,pl-badge{background:rgb(var(--tone-soft));color:rgb(var(--tone))}
pl-content,pl-stat,pl-main,pl-txt,pl-tt,pl-list,pl-age{display:flex;flex-direction:column}
pl-main,pl-txt,pl-tt{flex:1;min-width:0}
pl-stats,pl-card,pl-toast{border:var(--b);border-radius:24px;background:rgb(var(--card))}
pl-title,pl-content,pl-pill,pl-pill svg,pl-dot,pl-toast{position:absolute}
pl-cap,pl-src,pl-age,pl-hint,pl-desc,pl-name,pl-eyebrow,pl-h2,pl-metric,pl-metric svg,pl-chip,pl-lists{position:relative}
pl-cap,pl-src,pl-age,pl-hint,pl-chip b{font:600 12px/16px var(--f);color:var(--m)}
pl-cap,pl-src,pl-age,pl-hint,pl-desc{top:.8px}
pl-sub,pl-body,pl-tt{font:500 13px/18px var(--f);color:var(--m)}
pl-age b,pl-tt b{font:600 15px/21px var(--f);color:rgb(var(--foreground))}

/* Title, Screen, PipelineStats, ChipGroup, header, InboxCallout, LeadCard (ClientRow). */
pl-title{top:117.6px;left:16px;font:38px/46px var(--font-serif)}
pl-content{top:181.67px;left:20px;width:362px;gap:28px}
pl-stats{display:flex;overflow:hidden}
pl-stat{flex:1;min-width:0;gap:2px;padding:14px}
pl-metric{top:-2.67px;gap:4px;font:800 26px/30px var(--f);letter-spacing:-.6px}
pl-metric svg{top:3px;width:15px;height:15px}
pl-metric.pl-gold{color:rgb(var(--gold))}
pl-label{font:600 13px/18px var(--f)}
.pl-fit{top:1.67px;font-size:10px}
.pl-fit2{top:.6px;font-size:11.7px}
pl-vr{width:.5px;margin:14px 0;background:rgb(var(--border))}

pl-chips{gap:8px;margin:0 -20px;padding:0 20px}
pl-chip{flex:none;gap:6px;height:36px;padding:1.5px 14px 0;border:var(--b);border-radius:18px;background:rgb(var(--card));font:500 14px/20px var(--f)}
pl-chip b{height:16px;min-width:20px;margin-top:-1.5px;padding:.8px 6px 0;border-radius:8px;background:rgb(var(--muted));text-align:center}
pl-chip.is-on{border-color:rgb(var(--primary));background:rgb(var(--primary));color:rgb(var(--primary-foreground));font-weight:700}
pl-chip.is-on b{background:rgb(var(--primary-foreground)/.2);color:inherit}
pl-chip:after{content:"";position:absolute;top:-3px;left:calc(50% - 20px);width:40px;height:40px;border-radius:50%;background:rgb(var(--foreground)/.16);opacity:0}
pl-head{margin-top:24px}
pl-eyebrow{top:.3px;margin-bottom:4px;font:700 11px/14px var(--f);letter-spacing:1.3px;text-transform:uppercase;color:var(--m)}
pl-h2{top:-.2px;margin-bottom:4px;font:24px/30px var(--font-serif)}
pl-desc{font:500 14px/20px var(--f);color:var(--m)}
pl-lists{margin-top:16px}
pl-list{display:none;gap:12px}
pl-list.is-on,pl-list.is-out{display:flex}
pl-hint{gap:6px;margin-top:20px}
pl-hint svg{width:13px;height:13px}

pl-card{gap:14px;padding:16px}
pl-card>svg{width:13px;height:13px;color:var(--m)}
pl-tile{flex:none;width:38px;height:38px;border-radius:12px}
pl-tile svg{width:18px;height:18px}
pl-main{gap:4px}
pl-txt{gap:2px}
pl-body{white-space:normal}
pl-name,pl-sub{overflow:hidden;text-overflow:ellipsis}
pl-name{top:.5px;font:700 16px/22px var(--f)}
pl-av{flex:none;width:56px;height:56px;padding-bottom:3px;border-radius:50%;font:700 19px/22px var(--f)}
pl-meta{flex-wrap:wrap;gap:6px;margin-top:4px}
pl-badge{gap:4px;padding:3.5px 8px 2.5px;border-radius:10px;font:600 11px/14px var(--f)}
pl-badge svg{width:11px;height:11px}
pl-age{flex:none;align-items:flex-end;padding-left:4px}
pl-age.pl-gold b{color:rgb(var(--gold))}

/* Bar items: a glass capsule in light, bare glyphs in dark, as iOS 26 draws this screen (--tk-ios-*). */
pl-pill{top:62px;left:280px;width:106px;height:44px;border-radius:22px;color:rgb(var(--tk-ios-bar-item))}
pl-pill:before{content:"";position:absolute;inset:0;border-radius:inherit;background-color:rgb(var(--tk-ios-glass));box-shadow:var(--tk-ios-glass-edge);-webkit-backdrop-filter:var(--tk-ios-glass-filter);backdrop-filter:var(--tk-ios-glass-filter);opacity:var(--pl-glass,0)}
:root[data-theme=light] pl-pill{--pl-glass:1}
@media (prefers-color-scheme:light){:root:not([data-theme]) pl-pill{--pl-glass:1}}
pl-pill svg{top:12.33px;left:12.67px;width:27px;height:20px}
pl-pill svg:last-child{top:13.6px;left:74.25px;width:18px;height:18px}
pl-dot{top:-4px;left:31.33px;width:20.67px;height:20.67px;border-radius:50%;background:rgb(var(--accent));color:rgb(var(--accent-foreground));font:15px/1 -apple-system,"SF Pro Text",system-ui,sans-serif}

pl-toast{top:68px;left:12px;right:12px;gap:12px;padding:12px 14px;background:rgb(var(--elevated));box-shadow:var(--tk-toast-shadow);opacity:0}
pl-toast svg{width:15px;height:13.5px}
pl-tt b{overflow:hidden;text-overflow:ellipsis}
pl-ta{flex:none;padding:6px 12px;border-radius:14px;background:rgb(var(--primary-soft));color:rgb(var(--primary));font:700 12px/16px var(--f)}

/* Motion in the app's values: PressableScale, FADE_ENTER, EXIT, enterAt, ToastHost. Transform and opacity only (an
   animated visibility would keep the toast off the compositor), so everything hidden is simply transparent. The hint
   under the list moves with the list's height, as in the app; it fades in there with the new rows rather than jump. */
pl-chip.is-tap,pl-chip.is-tap:after{animation:pl-press .56s cubic-bezier(.2,.8,.2,1) both}
pl-chip.is-tap:after{animation-name:pl-touch}
pl-head.is-in{animation:pl-fade .26s ease-in-out both}
pl-hint.is-in{animation:pl-fade .34s ease-in-out both}
pl-list.is-in>*{animation:pl-rise .34s ease-in-out both}
pl-list.is-in>:last-child{animation-delay:40ms}
pl-list.is-out{position:absolute;top:0;left:0;right:0;animation:pl-out .18s ease-in-out both}
pl-toast.is-in{animation:pl-in .72s cubic-bezier(.28,.25,.16,1) both}
pl-toast.is-out{animation:pl-in .22s ease-in-out reverse both}
.pl-paused *,.pl-paused :after{animation-play-state:paused!important}
.pl-still *,.pl-still :after{animation:none!important}
@keyframes pl-press{20%,25%{transform:scale(.95)}}
@keyframes pl-touch{from{transform:scale(.6)}20%,30%{opacity:1;transform:none}to{transform:scale(1.2)}}
@keyframes pl-fade{from{opacity:0}}
@keyframes pl-rise{from{opacity:0;transform:translateY(25px)}}
@keyframes pl-out{to{opacity:0}}
@keyframes pl-in{from{opacity:0;transform:translateY(-25px)}to{opacity:1}}

/* site/story/family.css */
/* Story scene 03 · the family record. The loop animates translate and opacity only, so all of it runs on the compositor. */
.tk-scene--family{--f:var(--font-sans);position:absolute;top:0;left:0;width:402px;height:874px;overflow:hidden;background:rgb(var(--background));color:rgb(var(--foreground));font:400 16px/24px var(--f);text-align:left}
.tk-scene--family :where(b,i,svg){display:block;box-sizing:border-box;font:inherit}
.tk-scene--family svg{flex:none;overflow:visible;fill:currentColor}
.fm-success{--t:var(--success);--ts:var(--success-soft)}
.fm-gold{--t:var(--gold);--ts:var(--gold-soft)}
.fm-primary,.fm-acts{--t:var(--primary);--ts:var(--primary-soft)}
.fm-accent{--t:var(--accent);--ts:var(--accent-soft)}
.fm-neutral{--t:var(--muted-foreground);--ts:var(--muted)}
.fm-info{--t:var(--info);--ts:var(--info-soft)}
.fm-scroll,.fm-hero,.fm-ring,.fm-acts>b,.fm-labor,.fm-lt,.fm-txt{display:flex;flex-direction:column}
.fm-scroll{position:absolute;top:0;left:0;gap:28px;width:402px;padding:132px 20px 0}
.fm-hero,.fm-ring,.fm-acts>b{align-items:center}
.fm-hero{text-align:center}
.fm-ring{position:relative;justify-content:center;width:96px;height:96px}
.fm-ring svg{position:absolute;inset:0;rotate:-90deg}
.fm-ring circle{fill:none;stroke:rgb(var(--accent)/.16);stroke-width:7}
.fm-ring circle+circle{stroke:rgb(var(--accent));stroke-linecap:round;stroke-dasharray:279.6;stroke-dashoffset:3}
.fm-ring b,.fm-name,.fm-t2{position:relative;top:-3.33px;font:800 24.96px/28.8px var(--f)}
.fm-ring b+b{top:-.67px;font:600 14.4px/17.28px var(--f)}
.fm-name{top:-1px;margin-top:16px;font:30px/36px var(--font-serif)}
.fm-status,.fm-city{margin-top:4px;font:600 15px/21px var(--f)}
.fm-city{font:500 14px/20px var(--f)}
.fm-ring b+b,.fm-city,.fm-ov,.fm-txt>b+b{color:rgb(var(--muted-foreground))}
.fm-chips,.fm-b,.fm-acts,.fm-acts i,.fm-lrow,.fm-tile,.fm-btn,.fm-row,.fm-av,.fm-toast{display:flex;align-items:center}
.fm-chips,.fm-acts i,.fm-tile,.fm-btn,.fm-av{justify-content:center}
.fm-chips{gap:6px;margin-top:16px}
.fm-chips+.fm-chips{margin-top:8px}
.fm-b,.fm-tile,.fm-av{flex:none;background:rgb(var(--ts));color:rgb(var(--t))}
.fm-b{gap:4px;padding:3px 8px;border-radius:99px;font:600 11px/14px var(--f)}
.fm-md{gap:6px;padding:4px 10px;font-size:12px;line-height:16px}
/* Badge variant="outline", tone neutral: muted text, a hairline, no fill. */
.fm-out{--t:var(--muted-foreground);border:1px solid rgb(var(--border));background:0 0}
.fm-dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.fm-acts{margin-top:-4px}
.fm-acts>b{flex:1;gap:8px;color:rgb(var(--primary));font:600 12px/16px var(--f)}
.fm-acts i{width:56px;height:56px;border-radius:50%;background:rgb(var(--ts))}
.fm-labor{gap:16px;padding:20px;border:1px solid rgb(var(--accent)/.3);border-radius:24px;background:rgb(var(--accent-soft))}
.fm-lrow{align-items:flex-start;gap:14px}
.fm-lt{flex:1;gap:4px}
.fm-t3{color:rgb(var(--accent));font:700 18px/24px var(--f);letter-spacing:-.2px}
.fm-sub{color:rgb(var(--foreground)/.8);font:500 14px/20px var(--f)}
.fm-tile{width:30px;height:30px;border-radius:9px}
.fm-lg,.fm-btn{background:rgb(var(--accent));color:rgb(var(--accent-foreground))}
.fm-lg{width:48px;height:48px;border-radius:16px}
.fm-lg svg{stroke:currentColor;stroke-width:.7;stroke-linejoin:round}
.fm-btn{gap:8px;height:56px;border-radius:99px;font:700 17px/22px var(--f)}
.fm-ov{font:700 11px/14px var(--f);letter-spacing:1.3px;text-transform:uppercase}
.fm-t2{top:-.67px;margin:4px 0 12px;font:24px/30px var(--font-serif)}
.fm-list,.fm-toast{border:1px solid rgb(var(--border));border-radius:24px}
.fm-list{overflow:hidden;background:rgb(var(--card))}
.fm-shell{height:160px}
.fm-row{gap:12px;min-height:56px;padding:12px 16px}
.fm-hair{height:.5px;margin-left:16px;background:rgb(var(--border))}
.fm-txt{flex:1;min-width:0}
.fm-txt>b{font:600 15px/21px var(--f)}
.fm-txt>b+b{font:500 13px/18px var(--f)}
.fm-oc .fm-txt>b{font:600 14px/20px var(--f)}
.fm-oc .fm-txt>b+b{font:600 12px/16px var(--f)}
.fm-av{position:relative;width:40px;height:40px;border-radius:50%;font:700 14px/16px var(--f)}
.fm-av i{position:absolute;right:0;bottom:0;width:11.2px;height:11.2px;border:2px solid rgb(var(--card));border-radius:50%;background:rgb(var(--accent))}
.fm-edge,.fm-edge:after,.fm-back,.fm-nav,.fm-toast{position:absolute}
.fm-edge{top:0;left:12px;right:12px;height:128px;background:linear-gradient(rgb(var(--background)/.85) 76%,#0000)}
.fm-edge:after{content:"";inset:0 0 auto;height:112px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);-webkit-mask-image:linear-gradient(#000 72%,#0000)}
.fm-back{top:62px;left:16px;width:44px;height:44px;border-radius:50%;background:rgb(var(--tk-ios-glass));box-shadow:var(--tk-ios-glass-edge);-webkit-backdrop-filter:var(--tk-ios-glass-filter);backdrop-filter:var(--tk-ios-glass-filter);color:rgb(var(--tk-ios-tab))}
.fm-back svg{position:absolute;top:12.85px;left:14.85px;fill:none;stroke:currentColor;stroke-width:2.35;stroke-linecap:round;stroke-linejoin:round}
.fm-nav{top:73px;left:70px;right:70px;font:700 17px/22px var(--f);text-align:center}
.fm-toast{top:68px;left:12px;right:12px;gap:12px;padding:12px 14px;background:rgb(var(--elevated));box-shadow:var(--tk-toast-shadow)}
.fm-toast .fm-tile{width:38px;height:38px;border-radius:12px}
.fm-toast .fm-txt>b+b{text-wrap:pretty}
.fm-act{padding:6px 12px;font:700 12px/16px var(--f)}
.fm-nav,.fm-toast{opacity:0}
.fm-on .fm-a{animation:12s ease-in infinite both}
.fm-on .fm-scroll{animation-name:fm-s}
.fm-on .fm-nav{animation-name:fm-n}
.fm-on .fm-toast{animation-name:fm-t}
.fm-paused .fm-a{animation-play-state:paused}
@keyframes fm-s{0%,11%{translate:0}13.5%{translate:0 -66px;animation-timing-function:cubic-bezier(.2,.6,.35,1)}26%,78.5%{translate:0 -256px}81%{translate:0 -190px;animation-timing-function:cubic-bezier(.2,.6,.35,1)}93.5%,to{translate:0}}
@keyframes fm-n{0%,16.3%{opacity:0}18%,81.6%{opacity:1}83.3%,to{opacity:0}}
@keyframes fm-t{0%,30.83%{opacity:0;translate:0 -25px;animation-timing-function:cubic-bezier(.3,.28,.16,1)}36.83%,74.17%{opacity:1;translate:0;animation-timing-function:ease-in-out}76%,to{opacity:0;translate:0 -25px}}

/* site/story/billing.css */
/* Scene "billing": 402x874 design px, app tokens; no script = still frame. .tkb.tkb outranks phone.css's reset. */
.tk-scene--billing{position:absolute;top:0;left:0;width:402px;height:874px;overflow:hidden;background:rgb(var(--background));color:rgb(var(--foreground));font:16px/24px var(--font-sans);letter-spacing:0;text-align:left;-webkit-font-smoothing:antialiased}
.tkb{--s:var(--font-sans);--r:var(--font-serif);position:absolute;inset:0}
.tkb *{box-sizing:border-box;margin:0;padding:0}
.tkb svg{display:block;overflow:visible;fill:currentColor}
.tkb .sp{position:absolute;width:0;height:0}
.tkb-k{fill:none;stroke:rgb(var(--ts));stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tkb.tkb .ov{font:700 11px/14px var(--s);letter-spacing:1.3px;text-transform:uppercase}
.tkb.tkb .t2{position:relative;top:-.6px;font:24px/30px var(--r)}
.tkb.tkb .t3{font:700 18px/24px var(--s);letter-spacing:-.2px;font-variant-numeric:tabular-nums}
.tkb.tkb .hd{font:700 16px/22px var(--s)}
.tkb.tkb .cl{font:600 15px/21px var(--s);font-variant-numeric:tabular-nums}
.tkb.tkb .fn{font:500 13px/18px var(--s)}
.tkb.tkb .cp{font:600 12px/16px var(--s)}
/* iOS trims the ascent of a line shorter than its font: the display sits 4.9pt higher, its top clipped (the $). */
.tkb.tkb .dp{position:relative;top:-4.9px;clip-path:inset(4.9px -20px -20px);font:46px/50px var(--r);letter-spacing:-.5px}
.tkb .mu{color:rgb(var(--muted-foreground))}
.tkb .w{display:grid}
.tkb .w>*{grid-area:1/1}
.tkb .w>:last-child{opacity:0}
.tkb .de{--t:var(--destructive);--ts:var(--destructive-soft)}
.tkb .pr{--t:var(--primary);--ts:var(--primary-soft)}
.tkb .in{--t:var(--info);--ts:var(--info-soft)}
.tkb .go{--t:var(--gold);--ts:var(--gold-soft)}
.tkb .su{--t:var(--success);--ts:var(--success-soft)}
.tkb .sc{position:absolute;top:0;left:0;width:402px}
.tkb.tkb .lt{position:absolute;top:117.6px;left:16px;font:38px/46px var(--r);white-space:nowrap}
.tkb .ct{position:absolute;top:181.67px;left:20px;width:362px;display:grid;gap:28px}
.tkb.tkb .sg{position:relative;display:flex;height:44px;padding:4px;border-radius:22px;background:rgb(var(--muted))}
.tkb .sg::before{content:"";position:absolute;inset:4px auto 4px 4px;width:177px;border-radius:18px;background:rgb(var(--card));box-shadow:0 1px 2px rgb(0 0 0/.1)}
.tkb.tkb .sg>span{position:relative;flex:1;display:grid;place-items:center;font:500 14px/20px var(--s);color:rgb(var(--muted-foreground))}
.tkb.tkb .sg>:first-child{font-weight:700;color:rgb(var(--foreground))}
.tkb.tkb .en{position:relative;display:grid;gap:20px;padding:20px;overflow:hidden;border-radius:24px;background:rgb(var(--hero));color:rgb(var(--hero-foreground))}
.tkb .en::before{content:"";position:absolute;inset:0;background:linear-gradient(216.65deg,rgb(var(--primary)/.2),rgb(var(--primary)/0) 85.3%)}
.tkb .en>*{position:relative}
.tkb .tp{display:flex;align-items:center;gap:16px}
.tkb .hl{flex:1;display:grid;gap:4px;min-width:0}
.tkb .ac{color:rgb(var(--hero-accent))}
.tkb .fl{display:flex;align-items:center;gap:6px}
.tkb .pd{position:relative;width:6px;height:6px;border-radius:50%;background:rgb(var(--info))}
.tkb .pd>i{position:absolute;inset:0;border-radius:50%;background:inherit;opacity:.155;transform:scale(2.1)}
.tkb .rg{position:relative;flex:none;display:grid;place-content:center;justify-items:center;width:96px;height:96px}
.tkb .rg svg{position:absolute;inset:0;width:96px;height:96px;transform:rotate(-90deg)}
.tkb .rg circle{fill:none;stroke-width:10;stroke-linecap:round}
.tkb .c2{stroke:rgb(var(--chart-2))}
.tkb .c3{stroke:rgb(var(--chart-3))}
.tkb .g1{opacity:0}
.tkb.tkb .py{margin-top:-4px}
.tkb .pg{display:grid;gap:10px}
.tkb .co{display:flex;gap:16px}
.tkb .co>span{flex:1;display:grid;gap:4px;min-width:0}
.tkb .dt{display:flex;align-items:center;gap:6px}
.tkb .dt::before{content:"";width:8px;height:8px;border-radius:50%;background:rgb(var(--chart-3))}
.tkb .md::before{background:rgb(var(--chart-2))}
.tkb.tkb .co i{font:500 13px/1 var(--s);font-variant-numeric:inherit;white-space:pre;color:rgb(var(--muted-foreground))}
.tkb .ln{height:.5px;background:rgb(var(--hero-foreground)/.15)}
.tkb .st{display:flex;gap:12px}
.tkb .st>span{flex:1;display:grid;gap:2px;min-width:0}
.tkb.tkb .sh{display:grid;margin-bottom:12px}
.tkb.tkb .sh .ov{margin-bottom:4px}
.tkb.tkb .rt{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.tkb .rt>p{flex:1;display:grid}
.tkb.tkb .bt{display:flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:18px;background:rgb(var(--primary));color:rgb(var(--primary-foreground));font:700 14px/18px var(--s);white-space:nowrap}
.tkb .bt svg{width:15px;height:15px}
.tkb .ls{display:grid;gap:12px}
.tkb.tkb .cd{display:grid;gap:8px;padding:16px;border:1px solid rgb(var(--border));border-radius:24px;background:rgb(var(--card))}
.tkb.tkb .dn{border-color:rgb(var(--destructive)/.25)}
.tkb :is(.r1,.r2,.r3){display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.tkb .r1{align-items:center}
.tkb .r2{align-items:baseline}
.tkb .r2>.hd{flex:1;white-space:nowrap}
.tkb .r3>.fn{flex:1}
.tkb .r1 .w>*{justify-self:end}
.tkb.tkb .bg{display:flex;align-items:center;gap:4px;padding:3px 8px;border-radius:99px;background:rgb(var(--ts));color:rgb(var(--t));font:600 11px/14px var(--s);white-space:nowrap}
.tkb .bg svg{width:11px;height:11px}
.tkb.tkb .nt{display:flex;align-items:flex-start;gap:8px;margin-top:4px;padding:10px 12px;border-radius:16px;background:rgb(var(--ts));color:rgb(var(--t));font:500 13px/18px var(--s)}
.tkb.tkb .nt svg{flex:none;width:13px;height:13px;margin-top:2px}
/* Over the screen: the top scroll edge (as phone.css; the bottom one is the story phone's), inline title, toast. */
.tkb .e{position:absolute;left:0;right:0}
.tkb .e::before{content:"";position:absolute;inset:0;background:rgb(var(--background))}
.tkb .et{top:0;left:12px;right:12px;height:128px}
.tkb .et::after{content:"";position:absolute;inset:0 0 auto;height:112px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);-webkit-mask-image:linear-gradient(#000 72%,#0000)}
.tkb .et::before{-webkit-mask-image:linear-gradient(#000000d9 76.5%,#00000080 83%,#00000047 87.5%,#00000024 92%,#0000000a 97%,#0000)}
.tkb.tkb .nv{position:absolute;top:73px;left:0;right:0;font:700 17px/22px var(--s);text-align:center;opacity:0}
.tkb.tkb .to{position:absolute;top:68px;left:12px;right:12px;display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid rgb(var(--border));border-radius:24px;background:rgb(var(--elevated));box-shadow:var(--tk-toast-shadow,0 10px 30px -8px #00000026,0 3px 8px -3px #00000014);opacity:0}
.tkb .it{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:rgb(var(--ts));color:rgb(var(--t))}
.tkb .it svg{width:18px;height:18px}
.tkb .tt{flex:1;display:grid;min-width:0}
.tkb.tkb .tl{font:600 15px/21px var(--s)}
.tkb.tkb .ta{flex:none;padding:6px 12px;border-radius:99px;background:rgb(var(--primary-soft));color:rgb(var(--primary));font:700 12px/16px var(--s)}