/* TiviGlass website design system (2026-11 redesign).

   ONE look for every page: the TV app at night. Deep ink navy, the app's own
   typeface (Outfit) for headings and controls, Inter for reading, glass blue for
   the main action, the app's bright focus colour for keyboard focus, and amber kept
   for Premium only. No glow blobs, no gradient-filled letters, no gloss: depth comes
   from layered surfaces and fine borders, the way the app draws its cards.

   Loaded LAST by website-src/partials/layout.html, on every page. It re-declares the
   shared tokens (tokens.css) and the older brand-poster tokens (--bp-*) on <body>,
   so pages and portals that still use the older classes render in the same palette.
   New and rebuilt pages use the .tg-* components below. The site is dark only: the
   theme toggle is gone and site.js always sets data-theme="dark".

   Motion: three durations and one curve (--tg-dur-*, --tg-ease). Content never waits
   for JavaScript to become visible. Section entrances use CSS scroll-driven
   animation where the browser supports it, and nothing at all where it does not or
   where the visitor asked for reduced motion. */

/* ===== Tokens ========================================================= */

:root,
html[data-theme] {
    color-scheme: dark;
}

body {
    /* Palette */
    --tg-ink: #070a1a;
    --tg-ink-2: #0b0f24;
    --tg-surface-1: #10152f;
    --tg-surface-2: #161c3d;
    --tg-surface-3: #1d2450;
    --tg-line: rgb(255 255 255 / 8%);
    --tg-line-strong: rgb(255 255 255 / 14%);
    --tg-text: #eef0fb;
    --tg-text-soft: #b7bdd9;
    --tg-text-faint: #8d94b8;
    --tg-blue: #3d63ff;
    --tg-blue-hover: #5577ff;
    --tg-blue-soft: rgb(61 99 255 / 16%);
    --tg-violet: #6b4dff;
    --tg-focus: #59dcff;
    --tg-premium: #f4b740;
    --tg-premium-ink: #231800;
    --tg-premium-soft: rgb(244 183 64 / 14%);
    --tg-success: #3ad29f;
    --tg-success-soft: rgb(58 210 159 / 14%);
    --tg-warning: #ffb547;
    --tg-error: #ff6b6b;
    --tg-error-soft: rgb(255 107 107 / 14%);
    --tg-live: #ff4d6a;

    /* Type */
    --tg-font-display: 'Outfit', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --tg-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --tg-font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;
    --tg-size-hero: clamp(2.6rem, 5.4vw + 0.6rem, 4.6rem);
    --tg-size-h1: clamp(2.2rem, 3.6vw + 0.8rem, 3.4rem);
    --tg-size-h2: clamp(1.75rem, 2.2vw + 0.9rem, 2.6rem);
    --tg-size-h3: 1.25rem;
    --tg-size-lede: clamp(1.05rem, 0.4vw + 0.95rem, 1.25rem);
    --tg-size-body: 1rem;
    --tg-size-small: 0.875rem;

    /* Space and shape */
    --tg-space-1: 4px;
    --tg-space-2: 8px;
    --tg-space-3: 12px;
    --tg-space-4: 16px;
    --tg-space-5: 24px;
    --tg-space-6: 32px;
    --tg-space-7: 48px;
    --tg-space-8: 72px;
    --tg-space-9: 112px;
    --tg-section: clamp(64px, 8vw, 112px);
    --tg-wrap: 1180px;
    --tg-wrap-narrow: 760px;
    --tg-gutter: clamp(16px, 4vw, 32px);
    --tg-radius-sm: 10px;
    --tg-radius: 16px;
    --tg-radius-lg: 24px;
    --tg-radius-pill: 999px;
    --tg-shadow: 0 1px 0 rgb(255 255 255 / 4%) inset, 0 18px 40px -24px rgb(0 0 0 / 70%);
    --tg-shadow-lift: 0 1px 0 rgb(255 255 255 / 6%) inset, 0 26px 50px -24px rgb(0 0 0 / 80%);

    /* Motion */
    --tg-dur-fast: 150ms;
    --tg-dur: 220ms;
    --tg-dur-slow: 320ms;
    --tg-ease: cubic-bezier(0.2, 0.7, 0.2, 1);

    /* The shared tokens (tokens.css, components.css, the portals) in this palette. */
    --font-sans: var(--tg-font-body);
    --font-display: var(--tg-font-display);
    --bg: var(--tg-ink);
    --bg-deep: #05071a;
    --surface: var(--tg-surface-1);
    --surface-soft: var(--tg-surface-2);
    --surface-strong: var(--tg-surface-2);
    --surface-raised: var(--tg-surface-3);
    --text: var(--tg-text);
    --text-strong: #ffffff;
    --text-soft: var(--tg-text-soft);
    --text-faint: var(--tg-text-faint);
    --line: var(--tg-line);
    --line-strong: var(--tg-line-strong);
    --accent: #7d95ff;
    --accent-bright: #9aadff;
    --accent-ink: #ffffff;
    --accent-link: #9cb0ff;
    --accent-soft: var(--tg-blue-soft);
    --accent-strong: rgb(61 99 255 / 26%);
    --ring: rgb(89 220 255 / 45%);
    --focus-ring: 0 0 0 3px var(--ring);
    --brand-1: var(--tg-blue);
    --brand-2: var(--tg-violet);
    --brand-3: var(--accent-link);
    --brand-gradient: linear-gradient(110deg, var(--tg-blue), var(--tg-violet));
    --success: var(--tg-success);
    --warning: var(--tg-warning);
    --error: var(--tg-error);
    --live: var(--tg-live);
    --pro-from: #ffd27a;
    --pro-to: var(--tg-premium);
    --pro-ink: var(--tg-premium-ink);
    --pro-gradient: linear-gradient(180deg, #ffd27a, #f0a92a);
    --shadow-card: var(--tg-shadow);
    --shadow-button: none;
    --radius-md: var(--tg-radius);
    --radius-lg: var(--tg-radius-lg);
    --radius-xl: var(--tg-radius-lg);
    --dur-fast: var(--tg-dur-fast);
    --dur-slow: var(--tg-dur-slow);
    --ease-out-soft: var(--tg-ease);

    /* The older brand-poster tokens, so pages still using .bp-* classes match. */
    --bp-violet: var(--tg-blue);
    --bp-violet-deep: #2f4fe0;
    --bp-on-violet: #ffffff;
    --bp-on-violet-soft: var(--tg-text-soft);
    --bp-on-violet-faint: var(--tg-text-faint);
    --bp-lilac: var(--tg-surface-2);
    --bp-lilac-ink: var(--tg-text);
    --bp-lilac-soft: var(--tg-text-soft);
    --bp-ink: var(--tg-ink);
    --bp-ink-panel: var(--tg-surface-1);
    --bp-ink-text: var(--tg-text);
    --bp-ink-soft: var(--tg-text-soft);
    --bp-ink-raised: var(--tg-surface-3);
    --bp-amber: var(--tg-premium);
    --bp-amber-ink: var(--tg-premium-ink);
    --bp-amber-soft: var(--tg-premium-soft);
    --bp-cta-bg: var(--tg-blue);
    --bp-cta-fg: #ffffff;
    --bp-cta-hover: var(--tg-blue-hover);
    --bp-card: var(--tg-surface-1);
    --bp-chip: var(--tg-surface-2);
    --bp-tv-bezel: #05060f;
    --bp-tv-screen: #070a1a;
    --bp-tv-cell: var(--tg-surface-2);
    --bp-tv-focus: var(--tg-focus);

    margin: 0;
    background: var(--tg-ink);
    color: var(--tg-text);
    font-family: var(--tg-font-body);
    font-size: var(--tg-size-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Every page category (marketing, legal, utility, portals) uses the same ground. */
body[data-page-category],
body[data-brand='poster'],
body.utility-page,
body.legal-page {
    background: var(--tg-ink);
    color: var(--tg-text);
    font-family: var(--tg-font-body);
}

body :is(h1, h2, h3, h4) {
    font-family: var(--tg-font-display);
    color: #ffffff;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

body :is(h1, h2) {
    font-weight: 700;
    letter-spacing: -0.03em;
}

body p {
    text-wrap: pretty;
}

body a {
    color: var(--accent-link);
    text-underline-offset: 3px;
}

body ::selection {
    background: rgb(61 99 255 / 45%);
    color: #ffffff;
}

/* One focus treatment everywhere: the app's focus colour, never removed. */
body :focus-visible {
    outline: 2px solid var(--tg-focus);
    outline-offset: 3px;
    border-radius: 6px;
}

/* ===== Layout ========================================================= */

.tg-wrap {
    width: min(var(--tg-wrap), 100% - 2 * var(--tg-gutter));
    margin-inline: auto;
}

.tg-wrap--narrow {
    width: min(var(--tg-wrap-narrow), 100% - 2 * var(--tg-gutter));
}

.tg-section {
    padding-block: var(--tg-section);
}

.tg-section--tight {
    padding-block: calc(var(--tg-section) * 0.6);
}

.tg-section--raised {
    background: var(--tg-ink-2);
    border-block: 1px solid var(--tg-line);
}

.tg-stack {
    display: flex;
    flex-direction: column;
    gap: var(--tg-space-4);
}

.tg-grid {
    display: grid;
    gap: var(--tg-space-5);
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

.tg-grid--2 {
    grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
}

.tg-grid--3 {
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

.tg-split {
    display: grid;
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
}

@media (max-width: 1024px) {
    .tg-split {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ===== Type =========================================================== */

.tg-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--tg-space-2);
    margin: 0;
    color: var(--tg-text-soft);
    font-family: var(--tg-font-display);
    font-size: var(--tg-size-small);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.tg-eyebrow::before {
    content: '';
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: var(--tg-blue);
}

.tg-hero-title,
.tg-h1,
.tg-h2,
.tg-h3 {
    margin: 0;
    color: #ffffff;
    font-family: var(--tg-font-display);
}

.tg-hero-title {
    font-size: var(--tg-size-hero);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.035em;
}

.tg-h1 {
    font-size: var(--tg-size-h1);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -0.03em;
}

.tg-h2 {
    font-size: var(--tg-size-h2);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.tg-h3 {
    font-size: var(--tg-size-h3);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.tg-accent {
    color: #9cb0ff;
}

.tg-lede {
    margin: 0;
    max-width: 60ch;
    color: var(--tg-text-soft);
    font-size: var(--tg-size-lede);
    line-height: 1.55;
}

.tg-muted {
    color: var(--tg-text-faint);
}

.tg-small {
    font-size: var(--tg-size-small);
}

.tg-head {
    display: flex;
    flex-direction: column;
    gap: var(--tg-space-3);
    margin-bottom: clamp(28px, 4vw, 48px);
    max-width: 720px;
}

.tg-head--center {
    margin-inline: auto;
    align-items: center;
    text-align: center;
}

/* ===== Buttons ======================================================== */

.tg-btn {
    --tg-btn-bg: var(--tg-surface-2);
    --tg-btn-fg: #ffffff;
    --tg-btn-line: var(--tg-line-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tg-space-2);
    min-height: 48px;
    padding: 0 22px;
    border: 1px solid var(--tg-btn-line);
    border-radius: var(--tg-radius-pill);
    background: var(--tg-btn-bg);
    color: var(--tg-btn-fg);
    font-family: var(--tg-font-display);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background-color var(--tg-dur-fast) var(--tg-ease),
        border-color var(--tg-dur-fast) var(--tg-ease),
        filter var(--tg-dur-fast) var(--tg-ease),
        transform var(--tg-dur-fast) var(--tg-ease),
        box-shadow var(--tg-dur-fast) var(--tg-ease);
}

.tg-btn:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.tg-btn:active {
    transform: translateY(0) scale(0.985);
    filter: brightness(0.96);
}

.tg-btn--primary {
    --tg-btn-bg: var(--tg-blue);
    --tg-btn-line: transparent;
    box-shadow: 0 10px 24px -12px rgb(61 99 255 / 70%);
}

.tg-btn--primary:hover {
    --tg-btn-bg: var(--tg-blue-hover);
}

.tg-btn--ghost {
    --tg-btn-bg: transparent;
}

.tg-btn--ghost:hover {
    --tg-btn-bg: rgb(255 255 255 / 6%);
}

.tg-btn--premium {
    --tg-btn-bg: var(--tg-premium);
    --tg-btn-fg: var(--tg-premium-ink);
    --tg-btn-line: transparent;
}

.tg-btn--lg {
    min-height: 54px;
    padding: 0 28px;
    font-size: 1.05rem;
}

@media (max-width: 600px) {
    .tg-btn--lg {
        min-height: 52px;
        padding: 0 18px;
        font-size: 1rem;
    }

    .tg-actions > .tg-btn--lg {
        flex: 1 1 0;
        min-width: max-content;
    }
}

.tg-btn--sm {
    min-height: 40px;
    padding: 0 16px;
    font-size: 0.925rem;
}

.tg-btn--block {
    width: 100%;
}

.tg-btn[aria-disabled='true'],
.tg-btn:disabled {
    opacity: 0.5;
    pointer-events: none;
}

.tg-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tg-space-3);
    align-items: center;
}

.tg-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #c6d1ff;
    font-family: var(--tg-font-display);
    font-weight: 600;
    text-decoration: none;
}

.tg-link::after {
    content: '\2192';
    transition: transform var(--tg-dur-fast) var(--tg-ease);
}

.tg-link:hover::after {
    transform: translateX(3px);
}

/* ===== Cards ========================================================== */

.tg-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--tg-space-3);
    padding: clamp(20px, 2.4vw, 28px);
    border: 1px solid var(--tg-line);
    border-radius: var(--tg-radius-lg);
    background: linear-gradient(180deg, rgb(255 255 255 / 3%), rgb(255 255 255 / 0%)), var(--tg-surface-1);
    box-shadow: var(--tg-shadow);
    transition:
        border-color var(--tg-dur) var(--tg-ease),
        transform var(--tg-dur) var(--tg-ease),
        box-shadow var(--tg-dur) var(--tg-ease);
}

.tg-card :is(h2, h3, p) {
    margin: 0;
}

.tg-card p {
    color: var(--tg-text-soft);
}

a.tg-card {
    color: inherit;
    text-decoration: none;
}

a.tg-card:hover,
.tg-card--interactive:hover {
    border-color: var(--tg-line-strong);
    transform: translateY(-2px);
    box-shadow: var(--tg-shadow-lift);
}

.tg-card--flat {
    background: var(--tg-surface-1);
    box-shadow: none;
}

.tg-card--premium {
    border-color: rgb(244 183 64 / 45%);
    background:
        linear-gradient(180deg, rgb(244 183 64 / 8%), rgb(244 183 64 / 0%) 55%),
        var(--tg-surface-1);
}

/* A small square icon tile, as the app's Settings cards use. */
.tg-icon {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: 12px;
    background: var(--tg-blue-soft);
    color: #b9c6ff;
}

.tg-icon svg {
    width: 22px;
    height: 22px;
}

.tg-icon--premium {
    background: var(--tg-premium-soft);
    color: var(--tg-premium);
}

.tg-icon--success {
    background: var(--tg-success-soft);
    color: var(--tg-success);
}

/* ===== Badges, chips and lists ======================================== */

.tg-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--tg-line-strong);
    border-radius: var(--tg-radius-pill);
    color: var(--tg-text-soft);
    font-family: var(--tg-font-display);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.tg-badge--premium {
    border-color: rgb(244 183 64 / 45%);
    background: var(--tg-premium-soft);
    color: #ffd27a;
}

.tg-badge--free {
    border-color: rgb(58 210 159 / 40%);
    background: var(--tg-success-soft);
    color: #7ee8c2;
}

.tg-badge--blue {
    border-color: rgb(61 99 255 / 45%);
    background: var(--tg-blue-soft);
    color: #c6d1ff;
}

.tg-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tg-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.tg-chips li {
    padding: 8px 14px;
    border: 1px solid var(--tg-line);
    border-radius: var(--tg-radius-pill);
    background: var(--tg-surface-1);
    color: var(--tg-text-soft);
    font-size: var(--tg-size-small);
}

.tg-ticks {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tg-ticks li {
    position: relative;
    padding-left: 28px;
    color: var(--tg-text-soft);
}

.tg-ticks li::before {
    content: '';
    position: absolute;
    top: 0.42em;
    left: 2px;
    width: 14px;
    height: 8px;
    border-left: 2px solid var(--tg-success);
    border-bottom: 2px solid var(--tg-success);
    transform: rotate(-45deg);
}

.tg-ticks--premium li::before {
    border-color: var(--tg-premium);
}

/* ===== Product screenshot in a TV frame =============================== */

.tg-tv {
    position: relative;
    margin: 0;
    padding: clamp(6px, 0.8vw, 10px);
    border: 1px solid var(--tg-line-strong);
    border-radius: clamp(14px, 1.8vw, 22px);
    background: #04050c;
    box-shadow:
        0 1px 0 rgb(255 255 255 / 8%) inset,
        0 40px 80px -40px rgb(0 0 0 / 90%),
        0 30px 60px -50px rgb(61 99 255 / 50%);
}

.tg-tv img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: clamp(8px, 1.1vw, 14px);
}

.tg-tv figcaption {
    margin-top: var(--tg-space-3);
    color: var(--tg-text-faint);
    font-size: var(--tg-size-small);
    text-align: center;
}

/* ===== Scenes: the apps on a TV in a room (2026-11) ===================
   Night-time living rooms lit by the TV, in the site's own navy, blue and violet.
   The rooms are illustrations; every screen on a TV is a real TiviGlass capture.
   A soft scene dissolves into the page at its edges instead of sitting in a box. */
.tg-scene {
    position: relative;
    margin: 0;
}

.tg-scene img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--tg-radius-lg);
}

.tg-scene--soft img {
    border-radius: 0;
    -webkit-mask-image: radial-gradient(ellipse 72% 68% at 50% 46%, #000 58%, transparent 100%);
    mask-image: radial-gradient(ellipse 72% 68% at 50% 46%, #000 58%, transparent 100%);
}

.tg-home-hero-shot {
    margin-inline: clamp(-40px, -3vw, 0px);
}

.tg-features-hero-scene {
    max-width: 1100px;
    margin-top: clamp(24px, 4vw, 48px);
}

.tg-features-household-scene,
.tg-home-start-scene {
    max-width: 1100px;
    margin: 0 auto var(--tg-space-6);
}

/* Movie night: one room across the full width, the words over its quiet corner. Top and
   bottom fade into the sections around it. */
.tg-band {
    position: relative;
    display: grid;
    align-items: end;
    min-height: clamp(460px, 56.25vw, 900px);
    overflow: hidden;
    isolation: isolate;
    background: var(--tg-ink);
}

.tg-band-media {
    position: absolute;
    inset: 0;
    z-index: -1;
    margin: 0;
}

.tg-band-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 80%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 80%, transparent 100%);
}

/* Darkens the lower right, where the words sit over the coffee table, so they read on
   any screen; the couple on the left stays clear. */
.tg-band::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(0deg, var(--tg-ink) 0%, rgb(7 10 26 / 55%) 18%, transparent 40%),
        linear-gradient(270deg, rgb(7 10 26 / 78%) 0%, rgb(7 10 26 / 40%) 30%, transparent 52%);
    pointer-events: none;
}

.tg-band-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-bottom: clamp(40px, 6vw, 88px);
    text-align: right;
}

.tg-band-copy .tg-h2 {
    max-width: 14ch;
    margin: var(--tg-space-2) 0 0;
    font-size: clamp(2rem, 3vw + 1rem, 3.4rem);
    letter-spacing: -0.02em;
}

.tg-band-lede {
    max-width: 46ch;
    margin: var(--tg-space-4) 0 0;
    color: var(--tg-text-soft);
    font-size: var(--tg-size-lede);
}

@media (max-width: 760px) {
    .tg-band {
        display: block;
        min-height: 0;
    }

    .tg-band-media {
        position: relative;
        inset: auto;
        aspect-ratio: 16 / 9;
    }

    .tg-band-media img {
        -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 78%, transparent 100%);
        mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 78%, transparent 100%);
    }

    .tg-band::after {
        content: none;
    }

    .tg-band-copy {
        align-items: flex-start;
        padding-top: var(--tg-space-2);
        text-align: left;
    }
}

/* ===== Showcase (home page, js/site.js initShowcase) ===================
   A feature tour: the screens listed in words on the left, the one picked shown
   large on the right in a slim frame. The picture is swapped, never stacked, and
   the next one fades in over the last. Below 1000px it stacks: the screen, its
   sentence, then the screens as a row of chips. */
.tg-showcase-section {
    display: grid;
    gap: var(--tg-space-7);
}

.tg-showcase {
    display: grid;
    grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
    grid-template-areas:
        'intro tv'
        'list tv';
    grid-template-rows: auto 1fr;
    column-gap: clamp(32px, 5vw, 72px);
    row-gap: var(--tg-space-6);
    align-items: start;
}

.tg-showcase-intro {
    grid-area: intro;
}

.tg-showcase-intro .tg-h2 {
    margin: 0;
    font-size: clamp(1.75rem, 1.2vw + 1.05rem, 2.25rem);
    text-wrap: balance;
}

.tg-showcase-lede {
    margin: var(--tg-space-3) 0 0;
    color: var(--tg-text-soft);
}

.tg-showcase-looks {
    margin-top: var(--tg-space-5);
}

.tg-showcase-list {
    grid-area: list;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--tg-line-strong);
}

.tg-showcase-item {
    position: relative;
    display: grid;
    padding: 8px 0 8px 20px;
    border: 0;
    background: none;
    color: var(--tg-text-faint);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

/* The lit edge: the list's own rule turns blue beside the screen being shown. */
.tg-showcase-item::before {
    content: '';
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: -1px;
    width: 2px;
    border-radius: 2px;
    background: transparent;
    transition: background-color var(--tg-dur) var(--tg-ease);
}

.tg-showcase-item-title {
    color: var(--tg-text-soft);
    font-family: var(--tg-font-display);
    font-size: 1.05rem;
    font-weight: 600;
    transition: color var(--tg-dur-fast) var(--tg-ease);
}

/* Only the chosen screen's sentence shows; it opens smoothly (0fr to 1fr). */
.tg-showcase-item-text {
    display: grid;
    grid-template-rows: 0fr;
    color: var(--tg-text-soft);
    font-size: 0.95rem;
    line-height: 1.5;
    transition: grid-template-rows var(--tg-dur-slow) var(--tg-ease);
}

.tg-showcase-item-text > span {
    overflow: hidden;
}

.tg-showcase-item:hover .tg-showcase-item-title {
    color: #ffffff;
}

.tg-showcase-item[aria-selected='true']::before {
    background: var(--tg-blue);
}

.tg-showcase-item[aria-selected='true'] .tg-showcase-item-title {
    color: #ffffff;
}

.tg-showcase-item[aria-selected='true'] .tg-showcase-item-text {
    grid-template-rows: 1fr;
    padding-top: 4px;
}

.tg-showcase-tv {
    grid-area: tv;
    align-self: center;
    margin: 0;
    padding: clamp(6px, 0.7vw, 9px);
    border: 1px solid var(--tg-line-strong);
    border-radius: clamp(14px, 1.6vw, 20px);
    background: #05070f;
    box-shadow:
        0 1px 0 rgb(255 255 255 / 7%) inset,
        0 40px 70px -40px rgb(0 0 0 / 85%);
}

.tg-showcase-screen {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border-radius: clamp(8px, 1vw, 12px);
    background: #0b1120;
}

.tg-showcase-screen img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    transform: none;
    transition:
        opacity 420ms var(--tg-ease),
        transform 620ms var(--tg-ease);
}

.tg-showcase-screen img.is-entering {
    opacity: 0;
    transform: scale(1.012);
}

/* On a wide screen the list says what is shown; the caption is for the stacked layout. */
.tg-showcase-caption {
    display: none;
}

.tg-showcase-credit {
    margin: 0;
    text-align: center;
}

@media (max-width: 1000px) {
    .tg-showcase {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            'intro'
            'tv'
            'list';
        grid-template-rows: none;
        row-gap: var(--tg-space-5);
    }

    .tg-showcase-tv {
        align-self: stretch;
    }

    .tg-showcase-caption {
        display: block;
        margin: var(--tg-space-3) 4px 2px;
        color: var(--tg-text-soft);
        font-size: 0.95rem;
        text-align: center;
    }

    .tg-showcase-list {
        flex-direction: row;
        gap: var(--tg-space-2);
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        padding: 2px 2px var(--tg-space-2);
        border-left: 0;
        scrollbar-width: thin;
    }

    .tg-showcase-item {
        flex: none;
        align-items: center;
        min-height: 44px;
        padding: 0 18px;
        border: 1px solid var(--tg-line);
        border-radius: var(--tg-radius-pill);
        background: var(--tg-surface-1);
        scroll-snap-align: start;
    }

    .tg-showcase-item::before,
    .tg-showcase-item-text {
        display: none;
    }

    .tg-showcase-item-title {
        font-size: 0.95rem;
        white-space: nowrap;
    }

    .tg-showcase-item[aria-selected='true'] {
        border-color: var(--tg-blue);
        background: var(--tg-blue-soft);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tg-showcase-screen img,
    .tg-showcase-item::before,
    .tg-showcase-item-text {
        transition: none;
    }

    .tg-showcase-screen img.is-entering {
        transform: none;
    }
}

/* ===== Tabs and segmented selectors =================================== */

.tg-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--tg-line);
    border-radius: var(--tg-radius-pill);
    background: var(--tg-surface-1);
}

.tg-tab {
    min-height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: var(--tg-radius-pill);
    background: transparent;
    color: var(--tg-text-soft);
    font-family: var(--tg-font-display);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition:
        background-color var(--tg-dur-fast) var(--tg-ease),
        color var(--tg-dur-fast) var(--tg-ease);
}

.tg-tab:hover {
    color: #ffffff;
}

.tg-tab[aria-selected='true'],
.tg-tab[aria-pressed='true'],
.tg-tab.is-active {
    background: var(--tg-surface-3);
    color: #ffffff;
    box-shadow: 0 1px 0 rgb(255 255 255 / 8%) inset;
}

/* Large selectable cards (device picker, plan picker). */
.tg-choice {
    display: flex;
    align-items: center;
    gap: var(--tg-space-3);
    width: 100%;
    min-height: 64px;
    padding: 14px 16px;
    border: 1px solid var(--tg-line);
    border-radius: var(--tg-radius);
    background: var(--tg-surface-1);
    color: var(--tg-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition:
        border-color var(--tg-dur-fast) var(--tg-ease),
        background-color var(--tg-dur-fast) var(--tg-ease),
        transform var(--tg-dur-fast) var(--tg-ease);
}

.tg-choice:hover {
    border-color: var(--tg-line-strong);
    background: var(--tg-surface-2);
}

.tg-choice[aria-pressed='true'],
.tg-choice[aria-selected='true'],
.tg-choice[aria-checked='true'],
.tg-choice[aria-current='true'],
.tg-choice[aria-current='page'] {
    border-color: var(--tg-blue);
    background: linear-gradient(180deg, rgb(61 99 255 / 14%), rgb(61 99 255 / 6%)), var(--tg-surface-1);
    box-shadow: 0 0 0 1px var(--tg-blue) inset;
}

.tg-choice strong {
    display: block;
    color: #ffffff;
    font-family: var(--tg-font-display);
    font-weight: 600;
}

.tg-choice span {
    color: var(--tg-text-faint);
    font-size: var(--tg-size-small);
}

/* ===== Downloader code: big, copyable ================================= */

.tg-code {
    display: inline-flex;
    align-items: center;
    gap: var(--tg-space-3);
    padding: 10px 10px 10px 18px;
    border: 1px solid var(--tg-line-strong);
    border-radius: var(--tg-radius);
    background: var(--tg-ink-2);
}

.tg-code-value {
    color: #ffffff;
    font-family: var(--tg-font-display);
    font-size: clamp(1.6rem, 2.2vw + 0.8rem, 2.2rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.08em;
}

.tg-code-label {
    display: block;
    color: var(--tg-text-faint);
    font-size: 0.8rem;
    letter-spacing: 0.02em;
}

/* Copy confirmation (js/site.js initCopyButtons). */
.tg-copy[data-copied='true'] {
    --tg-btn-bg: var(--tg-success-soft);
    --tg-btn-line: rgb(58 210 159 / 50%);
    color: #7ee8c2;
}

/* ===== Steps ========================================================== */

.tg-steps {
    display: grid;
    gap: var(--tg-space-4);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: tg-step;
}

.tg-steps > li {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 20px 18px 68px;
    border: 1px solid var(--tg-line);
    border-radius: var(--tg-radius);
    background: var(--tg-surface-1);
    counter-increment: tg-step;
}

.tg-steps > li::before {
    content: counter(tg-step);
    position: absolute;
    top: 16px;
    left: 18px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--tg-blue-soft);
    color: #c6d1ff;
    font-family: var(--tg-font-display);
    font-weight: 700;
}

.tg-steps strong {
    color: #ffffff;
    font-family: var(--tg-font-display);
    font-weight: 600;
}

.tg-steps p {
    margin: 0;
    color: var(--tg-text-soft);
}

.tg-steps--row {
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

/* ===== Disclosure (FAQ and advanced detail) =========================== */

.tg-faq {
    display: flex;
    flex-direction: column;
    gap: var(--tg-space-2);
}

.tg-faq details {
    border: 1px solid var(--tg-line);
    border-radius: var(--tg-radius);
    background: var(--tg-surface-1);
    transition: border-color var(--tg-dur-fast) var(--tg-ease);
}

.tg-faq details[open] {
    border-color: var(--tg-line-strong);
}

.tg-faq summary {
    position: relative;
    padding: 18px 56px 18px 20px;
    color: #ffffff;
    font-family: var(--tg-font-display);
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}

.tg-faq summary::-webkit-details-marker {
    display: none;
}

.tg-faq summary::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 22px;
    width: 9px;
    height: 9px;
    margin-top: -6px;
    border-right: 2px solid var(--tg-text-soft);
    border-bottom: 2px solid var(--tg-text-soft);
    transform: rotate(45deg);
    transition: transform var(--tg-dur) var(--tg-ease);
}

.tg-faq details[open] summary::after {
    margin-top: -2px;
    transform: rotate(-135deg);
}

.tg-faq-body {
    padding: 0 20px 20px;
    color: var(--tg-text-soft);
}

.tg-faq-body > :first-child {
    margin-top: 0;
}

.tg-faq-body > :last-child {
    margin-bottom: 0;
}

/* ===== Notices ======================================================== */

.tg-note {
    display: flex;
    gap: var(--tg-space-3);
    align-items: flex-start;
    padding: 14px 16px;
    border: 1px solid var(--tg-line);
    border-radius: var(--tg-radius);
    background: var(--tg-surface-1);
    color: var(--tg-text-soft);
    font-size: var(--tg-size-small);
}

.tg-note strong {
    color: #ffffff;
}

.tg-note--warn {
    border-color: rgb(255 181 71 / 35%);
    background: rgb(255 181 71 / 8%);
}

/* ===== Plans ========================================================== */

.tg-plans {
    display: grid;
    gap: var(--tg-space-4);
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    align-items: stretch;
}

.tg-plan {
    gap: var(--tg-space-4);
}

.tg-plan-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0;
    color: #ffffff;
    font-family: var(--tg-font-display);
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
}

.tg-plan-price small {
    color: var(--tg-text-faint);
    font-family: var(--tg-font-body);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0;
}

.tg-plan .tg-btn {
    margin-top: auto;
}

/* ===== Header (injected by js/components.js) ========================= */

body .site-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid transparent;
    background: rgb(7 10 26 / 72%);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    backdrop-filter: saturate(140%) blur(14px);
    transition: border-color var(--tg-dur) var(--tg-ease), background-color var(--tg-dur) var(--tg-ease);
}

body .site-nav.is-scrolled {
    border-bottom-color: var(--tg-line);
    background: rgb(7 10 26 / 88%);
}

body .site-nav .nav-row {
    display: flex;
    align-items: center;
    gap: var(--tg-space-5);
    width: min(var(--tg-wrap), 100% - 2 * var(--tg-gutter));
    min-height: 68px;
    margin-inline: auto;
    padding: 0;
}

body .site-nav .brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    text-decoration: none;
}

body .site-nav .brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    box-shadow: none;
}

body .site-nav .brand-wordmark,
body .brand-wordmark {
    color: #ffffff;
    font-family: var(--tg-font-display);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

body .site-nav .nav-links {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
}

/* design-system.css gives the scrolled bar's links a box of their own; the bar is the box. */
body .site-nav.is-scrolled .nav-links {
    border: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

body .site-nav .nav-links a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 14px;
    border-radius: var(--tg-radius-pill);
    color: var(--tg-text-soft);
    font-family: var(--tg-font-display);
    font-size: 0.975rem;
    font-weight: 500;
    text-decoration: none;
    transition:
        color var(--tg-dur-fast) var(--tg-ease),
        background-color var(--tg-dur-fast) var(--tg-ease);
}

body .site-nav .nav-links a:hover {
    color: #ffffff;
    background: rgb(255 255 255 / 5%);
}

body .site-nav .nav-links a.active,
body .site-nav .nav-links a[aria-current='page'] {
    color: #ffffff;
}

body .site-nav .nav-links a.active::after,
body .site-nav .nav-links a[aria-current='page']::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 6px;
    height: 2px;
    border-radius: 2px;
    background: var(--tg-blue);
}

body .site-nav .nav-actions {
    display: flex;
    align-items: center;
    gap: var(--tg-space-2);
}

body .site-nav .nav-links a.nav-links-mobile-only {
    display: none;
}

/* The account control: a round profile icon and its label (components.js siteHeader). */
body .site-nav .tg-nav-profile {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 14px 0 6px;
    border: 1px solid var(--tg-line-strong);
    border-radius: var(--tg-radius-pill);
    color: var(--tg-text);
    font-family: var(--tg-font-display);
    font-size: 0.925rem;
    font-weight: 600;
    text-decoration: none;
    transition:
        background-color var(--tg-dur-fast) var(--tg-ease),
        border-color var(--tg-dur-fast) var(--tg-ease);
}

body .site-nav .tg-nav-profile:hover {
    border-color: rgb(255 255 255 / 24%);
    background: rgb(255 255 255 / 6%);
}

body .site-nav .tg-nav-profile-icon {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--tg-surface-3);
    color: #c6d1ff;
}

body .site-nav .nav-toggle {
    display: none;
}

@media (max-width: 920px) {
    body .site-nav .nav-row {
        gap: var(--tg-space-3);
        min-height: 60px;
    }

    body .site-nav .nav-actions .tg-nav-profile {
        display: none;
    }

    body .site-nav .nav-actions {
        margin-left: auto;
    }

    body .site-nav .nav-toggle {
        position: relative;
        display: inline-grid;
        place-items: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 1px solid var(--tg-line-strong);
        border-radius: 12px;
        background: transparent;
        cursor: pointer;
    }

    body .site-nav .nav-toggle span {
        position: absolute;
        left: 13px;
        width: 18px;
        height: 2px;
        border-radius: 2px;
        background: #ffffff;
        transition: transform var(--tg-dur) var(--tg-ease), top var(--tg-dur) var(--tg-ease);
    }

    body .site-nav .nav-toggle span:first-child {
        top: 17px;
    }

    body .site-nav .nav-toggle span:last-child {
        top: 25px;
    }

    body .site-nav .nav-toggle.is-open span:first-child {
        top: 21px;
        transform: rotate(45deg);
    }

    body .site-nav .nav-toggle.is-open span:last-child {
        top: 21px;
        transform: rotate(-45deg);
    }

    /* The open menu is a full-width sheet under the bar: large rows, one column. */
    body .site-nav .nav-links {
        position: fixed;
        inset: 60px 0 auto 0;
        z-index: 60;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        max-height: calc(100dvh - 60px);
        margin: 0;
        padding: 12px var(--tg-gutter) 24px;
        overflow-y: auto;
        border-bottom: 1px solid var(--tg-line);
        background: var(--tg-ink-2);
        box-shadow: 0 32px 64px -16px rgb(0 0 0 / 75%);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition:
            opacity var(--tg-dur) var(--tg-ease),
            transform var(--tg-dur) var(--tg-ease),
            visibility 0s linear var(--tg-dur);
    }

    body .site-nav.is-scrolled .nav-links {
        background: var(--tg-ink-2);
        border-color: var(--tg-line);
    }

    body .site-nav .nav-links.is-open {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition:
            opacity var(--tg-dur) var(--tg-ease),
            transform var(--tg-dur) var(--tg-ease),
            visibility 0s;
    }

    body .site-nav .nav-links a {
        min-height: 52px;
        padding: 0 12px;
        border-radius: var(--tg-radius-sm);
        font-size: 1.1rem;
    }

    body .site-nav .nav-links a.active::after,
    body .site-nav .nav-links a[aria-current='page']::after {
        left: 0;
        right: auto;
        top: 14px;
        bottom: 14px;
        width: 3px;
        height: auto;
    }

    body .site-nav .nav-links a.nav-links-mobile-only {
        display: flex;
    }

    body.menu-open {
        overflow: hidden;
    }
}

@media (max-width: 420px) {
    body .site-nav .nav-actions .tg-btn {
        padding: 0 14px;
    }
}

/* The live download count under the wordmark (components.js BRAND_LIVE). */
body .brand-text {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.05;
}

body .brand-downloads {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.2rem;
    color: var(--tg-text-faint);
    font-family: var(--tg-font-body);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

body .brand-downloads[hidden] {
    display: none;
}

body .brand-downloads strong {
    color: var(--tg-text);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

body .brand-downloads__live {
    flex: none;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--tg-success);
    /* Three gentle pulses when the count appears, then still: nothing in the header
       moves for the rest of the visit. */
    animation: tg-live 2.4s ease-out 3;
}

@keyframes tg-live {
    0% {
        box-shadow: 0 0 0 0 rgb(58 210 159 / 55%);
    }
    70%,
    100% {
        box-shadow: 0 0 0 0.4rem rgb(58 210 159 / 0%);
    }
}

/* ===== Trial strip ==================================================== */

body .trial-banner {
    border-bottom: 1px solid var(--tg-line);
    background: var(--tg-ink-2);
    color: var(--tg-text-soft);
}

body .trial-banner a {
    color: #ffffff;
}

/* ===== Footer ========================================================= */

body .site-footer {
    margin-top: 0;
    /* The bottom space lets the legal line scroll clear of the floating Discord and assistant buttons. */
    padding: clamp(48px, 6vw, 72px) 0 96px;
    border-top: 1px solid var(--tg-line);
    background: var(--tg-ink);
    color: var(--tg-text-soft);
}

body .site-footer .footer-inner {
    display: grid;
    gap: clamp(32px, 5vw, 64px);
    grid-template-columns: minmax(220px, 1.2fr) minmax(0, 3fr);
    width: min(var(--tg-wrap), 100% - 2 * var(--tg-gutter));
    margin-inline: auto;
}

body .site-footer .footer-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--tg-space-4);
}

body .site-footer .footer-tagline,
body .site-footer .footer-compliance {
    margin: 0;
    max-width: 36ch;
    color: var(--tg-text-faint);
    font-size: var(--tg-size-small);
}

body .site-footer .footer-links {
    display: grid;
    gap: var(--tg-space-5);
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

body .site-footer .footer-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

body .site-footer .footer-col h2,
body .site-footer .footer-col h3,
body .site-footer .footer-col-title {
    margin: 0 0 8px;
    color: #ffffff;
    font-family: var(--tg-font-display);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0;
}

body .site-footer .footer-col nav {
    display: flex;
    flex-direction: column;
}

body .site-footer .footer-col a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    color: var(--tg-text-soft);
    font-size: var(--tg-size-small);
    text-decoration: none;
}

body .site-footer .footer-col a:hover {
    color: #ffffff;
}

body .site-footer .footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--tg-space-3);
    width: min(var(--tg-wrap), 100% - 2 * var(--tg-gutter));
    margin: clamp(32px, 4vw, 48px) auto 0;
    padding-top: 24px;
    border-top: 1px solid var(--tg-line);
    color: var(--tg-text-faint);
    font-size: 0.825rem;
}

body .site-footer .footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
}

body .site-footer .footer-legal a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    color: var(--tg-text-faint);
    text-decoration: none;
}

body .site-footer .footer-legal a:hover {
    color: #ffffff;
}

@media (max-width: 768px) {
    body .site-footer .footer-inner {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ===== Older shared pieces in the new palette ========================= */

body .btn {
    border-radius: var(--tg-radius-pill);
    font-family: var(--tg-font-display);
    font-weight: 600;
}

body .btn-primary {
    border-color: transparent;
    background: var(--tg-blue);
    color: #ffffff;
}

body .btn-primary:hover {
    background: var(--tg-blue-hover);
    color: #ffffff;
}

body .btn-secondary,
body .btn-ghost {
    border-color: var(--tg-line-strong);
    background: transparent;
    color: #ffffff;
}

body .btn-secondary:hover,
body .btn-ghost:hover {
    background: rgb(255 255 255 / 6%);
    color: #ffffff;
}

body :is(input, select, textarea) {
    color-scheme: dark;
}

/* Cookie notice (js/cookie-consent.js). */
body .cookie-consent {
    border: 1px solid var(--tg-line-strong);
    border-radius: var(--tg-radius);
    background: var(--tg-surface-2);
    color: var(--tg-text-soft);
    box-shadow: var(--tg-shadow-lift);
}

body .cookie-consent a {
    color: #c6d1ff;
}

/* ===== Motion ========================================================= */

/* Section entrances, only where the browser can run them from CSS alone: content is
   never hidden waiting for script, and an unsupported browser simply shows it. */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .tg-reveal {
            animation: tg-reveal linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 30%;
        }
    }
}

@keyframes tg-reveal {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    body *,
    body *::before,
    body *::after {
        transition-duration: 1ms !important;
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
    }

    .tg-btn:hover,
    a.tg-card:hover,
    .tg-card--interactive:hover {
        transform: none;
    }
}

/* ===== Phone card: "On your phone?" (js/send-link.js) ================= */

/* TiviGlass installs on the TV, so a visitor reading on a touch screen gets what to
   type there and a button that sends it to themselves. Hidden with a mouse. */
.send-to-tv {
    display: none;
}

@media (hover: none) and (pointer: coarse) {
    .send-to-tv {
        display: flex;
        align-items: flex-start;
    }

    .send-to-tv strong {
        color: #ffffff;
        font-family: var(--tg-font-display);
        letter-spacing: 0.04em;
    }

    .send-to-tv .send-to-tv-status:empty {
        display: none;
    }

    .send-to-tv .send-to-tv-status {
        overflow-wrap: anywhere;
    }
}

/* ===== Home =========================================================== */

.tg-home-hero {
    position: relative;
    padding-top: clamp(40px, 6vw, 88px);
    overflow: hidden;
    isolation: isolate;
}

/* One soft pool of the app's blue behind the screenshot: light, not a glow blob. */
.tg-home-hero::before {
    content: '';
    position: absolute;
    inset: -20% -10% auto 40%;
    z-index: -1;
    height: 80%;
    background: radial-gradient(closest-side, rgb(61 99 255 / 16%), transparent);
    pointer-events: none;
}

.tg-home-hero-copy {
    gap: var(--tg-space-5);
}

.tg-home-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--tg-text-faint);
    font-size: var(--tg-size-small);
}

.tg-home-meta li {
    position: relative;
    padding-left: 14px;
}

.tg-home-meta li::before {
    content: '';
    position: absolute;
    top: 0.6em;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--tg-success);
}

.tg-home-why {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1024px) {
    .tg-home-why {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .tg-home-why {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* TiviGlass or TiviGlass², as one strip under the screenshots. */
/* Pick your look (home page, under the showcase): the two apps as two big cards,
   each opening on its own movie library, with its Downloader code and the way in.
   Each card carries its accent: TiviGlass the brand blue, TiviGlass² the violet. */
.tg-looks {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(16px, 2.4vw, 28px);
    width: 100%;
    max-width: 1100px;
    margin-inline: auto;
}

.tg-looks-head {
    grid-column: 1 / -1;
    text-align: center;
}

.tg-looks-title {
    margin: 0;
    color: #ffffff;
    font-family: var(--tg-font-display);
    font-size: clamp(1.6rem, 1.4vw + 1rem, 2.1rem);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.tg-looks-head p {
    margin: var(--tg-space-2) 0 0;
    color: var(--tg-text-soft);
}

.tg-look {
    --tg-look-accent: var(--tg-blue);
    --tg-look-accent-rgb: 61 99 255;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--tg-line-strong);
    border-radius: var(--tg-radius-lg);
    background: linear-gradient(180deg, var(--tg-surface-1), var(--tg-ink-2));
    box-shadow: var(--tg-shadow);
    transition:
        transform var(--tg-dur) var(--tg-ease),
        border-color var(--tg-dur) var(--tg-ease),
        box-shadow var(--tg-dur) var(--tg-ease);
}

.tg-look--tg2 {
    --tg-look-accent: var(--tg-violet);
    --tg-look-accent-rgb: 107 77 255;
}

/* The app's own screen, fading into the card so picture and words read as one. */
.tg-look-shot {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: #05070f;
}

.tg-look-shot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transform: scale(1.001);
    transition: transform 700ms var(--tg-ease);
}

.tg-look-shot::after {
    content: '';
    position: absolute;
    inset: 45% 0 0;
    background: linear-gradient(180deg, transparent, var(--tg-surface-1));
    pointer-events: none;
}

.tg-look-body {
    position: relative;
    display: grid;
    gap: var(--tg-space-3);
    margin-top: -56px;
    padding: 0 clamp(18px, 2.4vw, 28px) clamp(20px, 2.6vw, 30px);
}

.tg-look-tag {
    justify-self: start;
    margin: 0;
    padding: 4px 12px;
    border: 1px solid rgb(var(--tg-look-accent-rgb) / 55%);
    border-radius: var(--tg-radius-pill);
    background: rgb(var(--tg-look-accent-rgb) / 22%);
    color: #ffffff;
    font-family: var(--tg-font-display);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    backdrop-filter: blur(6px);
}

.tg-look-name {
    margin: 0;
    color: #ffffff;
    font-family: var(--tg-font-display);
    font-size: clamp(1.9rem, 2vw + 1rem, 2.6rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.05;
}

.tg-look-text {
    margin: 0;
    color: var(--tg-text-soft);
}

.tg-look-code {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tg-space-3);
    margin-top: var(--tg-space-1);
    padding: 12px 12px 12px 18px;
    border: 1px solid var(--tg-line-strong);
    border-radius: var(--tg-radius);
    background: rgb(5 7 15 / 70%);
}

.tg-look-code-value {
    display: block;
    color: #ffffff;
    font-family: var(--tg-font-display);
    font-size: clamp(1.5rem, 1.2vw + 1rem, 1.9rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.1em;
}

.tg-look-cta {
    justify-self: stretch;
}

.tg-look--tg2 .tg-look-cta {
    --tg-btn-bg: var(--tg-violet);
}

.tg-look--tg2 .tg-look-cta:hover {
    --tg-btn-bg: #7d63ff;
}

@media (hover: hover) {
    .tg-look:hover {
        transform: translateY(-4px);
        border-color: rgb(var(--tg-look-accent-rgb) / 60%);
        box-shadow:
            var(--tg-shadow-lift),
            0 24px 48px -28px rgb(var(--tg-look-accent-rgb) / 70%);
    }

    .tg-look:hover .tg-look-shot img {
        transform: scale(1.04);
    }
}

@media (max-width: 700px) {
    .tg-looks {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tg-look,
    .tg-look-shot img {
        transition: none;
    }

    .tg-look:hover,
    .tg-look:hover .tg-look-shot img {
        transform: none;
    }
}

.tg-home-plans-actions {
    margin-top: var(--tg-space-6);
    gap: var(--tg-space-5);
}

.tg-home-plans-note {
    margin: var(--tg-space-3) 0 0;
}

.tg-h3 .tg-badge {
    margin-left: 6px;
    vertical-align: 2px;
}

.tg-home-version-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--tg-space-2);
}

.tg-card > .tg-btn {
    align-self: flex-start;
    margin-top: var(--tg-space-2);
}

.tg-home-start-actions {
    margin-top: var(--tg-space-6);
}

/* ===== Features ======================================================= */

.tg-features-hero {
    margin-bottom: 0;
}

.tg-features-list {
    display: flex;
    flex-direction: column;
    gap: var(--tg-space-4);
    margin: var(--tg-space-2) 0 0;
    padding: 0;
    list-style: none;
}

.tg-features-list li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 16px;
    border-left: 2px solid var(--tg-line-strong);
}

.tg-features-list strong {
    color: #ffffff;
    font-family: var(--tg-font-display);
    font-weight: 600;
}

.tg-features-list span {
    color: var(--tg-text-soft);
}

.tg-features-list .tg-badge {
    margin-left: 6px;
    vertical-align: 1px;
}

/* Screenshot on the left for the second group on wide screens; text first on phones. */
@media (min-width: 1025px) {
    .tg-features-flip {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    }
}

@media (max-width: 1024px) {
    .tg-features-flip > .tg-tv {
        order: 2;
    }
}

.tg-features-plans-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: var(--tg-space-5) 0 0;
    color: var(--tg-text-faint);
    font-size: var(--tg-size-small);
}

.tg-features-providers {
    display: grid;
    gap: var(--tg-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.tg-features-providers li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 16px 20px;
    border: 1px solid var(--tg-line);
    border-radius: var(--tg-radius);
    background: var(--tg-surface-1);
}

.tg-features-providers strong {
    color: #ffffff;
    font-family: var(--tg-font-display);
    font-weight: 600;
}

.tg-features-providers span {
    color: var(--tg-text-soft);
    font-size: var(--tg-size-small);
}

/* ===== Utilities ====================================================== */

.tg-center {
    text-align: center;
}

.tg-hide-mobile {
    display: initial;
}

@media (max-width: 600px) {
    .tg-hide-mobile {
        display: none;
    }
}

.tg-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}