/* tivipro.app: a living room at night, lit only by the television.
   Design record: Design/Website/SITE.md. Privacy and Terms keep site.css. */

@font-face {
  font-family: "Mona Sans";
  src: url(/assets/mona-sans.woff2) format("woff2");
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-display: swap;
}

/* The light's strength, animated when a channel is tuned. */
@property --level { syntax: "<number>"; inherits: true; initial-value: 1; }

:root {
  color-scheme: dark;
  --ground: #0a0a0b;
  --raised: #161618;
  --ink: #f4f3ef;
  --ink-2: #abaaa4;
  --ink-3: #8a8984;
  --rule: rgba(244, 243, 239, .12);
  --light: #bf613b;
  --level: 1;
  --margin: 64px;
  --bar: 76px;
  --text: "Mona Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --rise: cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 17px/1.55 var(--text);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
a:focus-visible, label:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3, p, ul, ol, dl, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
p, li, dd, figcaption { text-wrap: pretty; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 5; padding: 12px 16px; background: var(--ink); color: var(--ground); border-radius: 8px; font-weight: 650; text-decoration: none; }
.skip:focus { top: 12px; }

/* Display type: Mona Sans at its widest, the web's SF Pro Expanded. */
h1, h2 { font-weight: 800; font-stretch: 125%; text-wrap: balance; }
h1 { font-size: clamp(40px, 5.3vw, 76px); line-height: .98; letter-spacing: -.035em; }
h2 { font-size: clamp(30px, 3.1vw, 44px); line-height: 1.04; letter-spacing: -.025em; }
h3 { font-size: 22px; line-height: 1.25; font-weight: 700; font-stretch: 112%; letter-spacing: -.01em; text-wrap: balance; }

/* ---------------------------------------------------------------- The bar */

.bar {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: var(--bar); padding: 0 var(--margin);
  max-width: calc(1312px + 2 * var(--margin)); margin: 0 auto;
}
.brand { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-size: 19px; font-weight: 700; font-stretch: 112%; letter-spacing: -.01em; text-decoration: none; }
.brand img { width: 32px; height: 32px; border-radius: 8px; }
.bar nav { display: flex; }
.bar nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; font-size: 15px; font-weight: 500; color: var(--ink-2); text-decoration: none; }
.bar nav a:hover, .bar nav a[aria-current] { color: var(--ink); }
.bar nav a:last-child { padding-right: 0; }

/* ---------------------------------------------------------------- The room
   The room starts under the bar, so the television's light reaches the top of
   the page. Every lit television casts it: see .tv::before and ::after. */

/* The light may spill up and down into the next room, never sideways off the page. */
.room, .section { position: relative; isolation: isolate; overflow-x: clip; }
.room {
  margin-top: calc(-1 * var(--bar));
  padding: calc(var(--bar) + 40px) var(--margin) 112px;
}
.room > .frame {
  max-width: 1312px; margin: 0 auto;
  display: grid; column-gap: 64px; row-gap: 0;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas: "head set" "rest set";
}
.room-head { grid-area: head; align-self: end; }
.room-rest { grid-area: rest; align-self: start; }
.set { grid-area: set; }
.devices { font-size: 15px; color: var(--ink-2); margin-bottom: 20px; }
.room h1 { margin-bottom: 28px; }
.lede { font-size: 19px; line-height: 1.5; color: var(--ink-2); max-width: 30em; margin-bottom: 36px; }
.lede strong { color: var(--ink); font-weight: 600; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 26px; border-radius: 25px; background: var(--ink); color: var(--ground); font-size: 16px; font-weight: 650; text-decoration: none; }
.button:hover { background: #fff; }
.button:focus-visible { border-radius: 25px; }
.link { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.link:hover { text-decoration-thickness: 2px; }

/* ---------------------------------------------------------------- The television and its light */

.tv {
  position: relative; container-type: inline-size;
  aspect-ratio: 16 / 9; padding: 7px; border-radius: 10px;
  background: #000;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 40px 60px -30px rgba(0, 0, 0, .7);
}
/* The wall: a quarter of the channel's colour at the bezel, gone by about 1.1 screen widths. */
.tv::before { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.tv::before {
  inset: -62% -58%;
  background: radial-gradient(closest-side,
    color-mix(in oklab, var(--light) calc(var(--level) * 30%), transparent) 0%,
    color-mix(in oklab, var(--light) calc(var(--level) * 25%), transparent) 46%,
    color-mix(in oklab, var(--light) calc(var(--level) * 9%), transparent) 74%,
    transparent 100%);
}
/* The floor: a pool on the floor below the guide, 12% of the channel's colour. */
.set { position: relative; container-type: inline-size; }
.set:has(.guide)::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 15%; width: 70%; top: calc(100% + 40px - 9cqw); height: 18cqw;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--light) calc(var(--level) * 12%), transparent), transparent);
}
.screen {
  display: none; position: absolute; inset: 7px; overflow: hidden; border-radius: 4px;
  background: color-mix(in oklab, var(--light) 52%, #000);
}
.screen:first-child { display: block; }
.ident { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 2.4cqi; text-align: center; animation: ident-out .1s ease-in .9s both; }
.ident img { width: 17cqi; height: 17cqi; border-radius: 3.6cqi; }
.ident b { font-size: max(15px, 3.1cqi); line-height: 1.15; font-weight: 750; font-stretch: 118%; letter-spacing: -.01em; }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .3); border-top-color: #fff; animation: spin .9s linear infinite; }
.feed { position: absolute; inset: 0; animation: feed-in .4s ease-out 1s both; }
.picture { width: 100%; height: 100%; object-fit: cover; }
/* A channel bug, as broadcasters put in the corner. */
.bug { position: absolute; top: 5%; right: 5%; width: 9%; height: auto; opacity: .72; filter: drop-shadow(0 0 3px rgb(0 0 0 / .45)); }
@keyframes ident-out { to { opacity: 0; visibility: hidden; } }
@keyframes feed-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes spin { to { transform: rotate(1turn); } }

/* ---------------------------------------------------------------- The guide under it */

.guide { border: 0; margin: 20px 0 0; padding: 0; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
.row {
  position: relative; display: grid; grid-template-columns: 22px 40px minmax(0, 1fr) 18px; align-items: center; gap: 12px;
  min-height: 64px; padding: 0 14px 0 8px; border-radius: 12px; cursor: pointer;
}
.row input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.row:hover { background: rgba(244, 243, 239, .05); }
.row .n { font-size: 15px; color: var(--ink-3); text-align: right; font-variant-numeric: tabular-nums; }
.row img { width: 40px; height: 40px; border-radius: 9px; }
.row b { display: block; font-size: 16px; line-height: 1.25; font-weight: 600; }
.row .on { display: block; font-size: 15px; line-height: 1.3; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row svg { visibility: hidden; }
.row:has(:checked) { background: color-mix(in oklab, var(--light) calc(var(--level) * 34%), var(--ground)); }
.row:has(:checked) .n, .row:has(:checked) .on { color: rgba(244, 243, 239, .84); }
.row:has(:checked) svg { visibility: visible; }
.caption { margin-top: 16px; padding-left: 8px; font-size: 13px; color: var(--ink-2); }

/* Tuning: the old light is cut, the new one rises (the app's lightIn), the
   screen shows the ident, then the picture fades in as the ident fades out. */
@keyframes rise-fieldside { from { --level: 0; } to { --level: 1; } }
@keyframes rise-atlas-wild { from { --level: 0; } to { --level: 1; } }
@keyframes rise-hearth { from { --level: 0; } to { --level: 1; } }
@keyframes rise-aster-classics { from { --level: 0; } to { --level: 1; } }
.room:has(.guide input:checked) .screen { display: none; }
.room:has(#ch-fieldside:checked) { --light: #30bf88; animation: rise-fieldside .45s var(--rise) .1s both; }
.room:has(#ch-atlas-wild:checked) { --light: #89bf60; animation: rise-atlas-wild .45s var(--rise) .1s both; }
.room:has(#ch-hearth:checked) { --light: #bf613b; animation: rise-hearth .45s var(--rise) .1s both; }
.room:has(#ch-aster-classics:checked) { --light: #bf9e60; animation: rise-aster-classics .45s var(--rise) .1s both; }
.room:has(#ch-fieldside:checked) .screen.fieldside,
.room:has(#ch-atlas-wild:checked) .screen.atlas-wild,
.room:has(#ch-hearth:checked) .screen.hearth,
.room:has(#ch-aster-classics:checked) .screen.aster-classics { display: block; }

/* ---------------------------------------------------------------- Sections */

.section { padding: 128px var(--margin) 0; }
.section > .frame { max-width: 1312px; margin: 0 auto; }
.section .intro { font-size: 19px; line-height: 1.5; color: var(--ink-2); max-width: 34em; margin-top: 20px; }

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; margin-top: 56px; }
.steps li { border-top: 1px solid var(--rule); padding-top: 24px; }
.steps h3 { margin-bottom: 12px; }
.steps p { color: var(--ink-2); }
.steps p + p { margin-top: 16px; font-size: 15px; }

/* Two televisions in one light: the Apple TV capture is playing Hearth. */
.screens { display: grid; grid-template-columns: minmax(0, 1fr) 236px; grid-template-rows: auto auto; column-gap: 56px; margin-top: 72px; }
.screens figure { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
.screens figure > div { align-self: end; }
.screens figcaption { margin-top: 24px; color: var(--ink-2); max-width: 34em; }
.screens figcaption b { color: var(--ink); font-weight: 650; }
.screens .fiction { color: var(--ink-3); }
.tv.still img { width: 100%; height: 100%; object-fit: cover; object-position: left center; border-radius: 4px; }
.screens .phone { position: relative; }
.phone { padding: 7px; border-radius: 42px; background: #000; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 40px 60px -30px rgba(0, 0, 0, .7); }
.phone img { width: 100%; height: auto; border-radius: 35px; }

.plans { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px; margin-top: 56px; }
.plans > div { grid-column: span 4; }
.plans > div + div { grid-column: span 8; }
.plans h3 { padding-bottom: 16px; margin-bottom: 20px; border-bottom: 1px solid var(--rule); }
.plans ul { display: grid; gap: 12px 48px; }
.plans > div + div ul { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); grid-auto-flow: column; }

/* On the same twelve columns as the steps and the plans above it. */
.help { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px; align-items: start; padding-bottom: 128px; }
.help > h2 { grid-column: span 4; }
.help > div { grid-column: span 8; }
.help p { margin-top: 6px; font-size: 19px; line-height: 1.5; color: var(--ink-2); margin-bottom: 24px; max-width: 30em; }

/* ---------------------------------------------------------------- Support */

.lamp { padding-bottom: 96px; }
.lamp > .frame { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "head set" "rest rest"; }
.lamp .room-head { align-self: start; }
.lamp .set { align-self: start; padding-top: 6px; }
.lamp .ident { animation: none; }
.lamp .ident b { font-size: clamp(17px, 4.4cqi, 22px); }
.lamp .ident svg { width: auto; height: 17cqi; fill: #fff; }
.address { display: inline-block; font-size: clamp(36px, 5.3vw, 76px); line-height: 1; letter-spacing: -.035em; text-decoration: none; }
.address:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; }
.tell { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 72px 0 40px; }
.tell li { border-top: 1px solid var(--rule); padding-top: 14px; color: var(--ink-2); }
.tell li b { display: block; color: var(--ink); font-weight: 650; }
.warning { margin-top: 48px; max-width: calc(50% - 12px); padding: 22px 26px; border-radius: 16px; background: var(--raised); color: var(--ink-2); }
.warning b { color: var(--ink); font-weight: 650; }

.faq { margin-top: 48px; }
/* On the four columns of "what to tell us": answers start where the note ends. */
.faq > div, .yours { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding: 28px 0; border-top: 1px solid var(--rule); }
.faq dt, .yours h3 { grid-column: span 2; }
.faq dd, .yours p { grid-column: span 2; }
.faq dt { font-size: 22px; line-height: 1.25; font-weight: 700; font-stretch: 112%; letter-spacing: -.01em; text-wrap: balance; }
.faq dd { margin: 0; color: var(--ink-2); }
.faq dd p + p { margin-top: 10px; }
.yours { padding-bottom: 128px; }
.yours p { color: var(--ink-2); }
.yours a { color: var(--ink); text-underline-offset: 3px; }

/* ---------------------------------------------------------------- Not found: the set is on, nothing is on the channel, so the room is dark */

.off .tv::before { display: none; }
.off .screen { display: block; background: linear-gradient(115deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 45%), #050506; }
.off .ident { animation: none; }
.no-signal { font-size: max(15px, 2.4cqi); color: var(--ink-3); font-weight: 600; letter-spacing: .02em; }

/* ---------------------------------------------------------------- Privacy and Terms: the policies' own words, set for reading
   No television on these pages, so no light: a quiet column on the twelve-column grid,
   with the sections listed beside it. */

.paper { padding: 48px var(--margin) 128px; }
.paper > .frame { max-width: 1312px; margin: 0 auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 48px; }
.paper-head { grid-column: 1 / -1; margin-bottom: 80px; }
.paper-head h1 { margin-bottom: 28px; }
.paper-head .lede { margin: 0; max-width: 34em; }
.contents { grid-column: 1 / span 3; align-self: start; position: sticky; top: 24px; }
.contents p { font-size: 13px; color: var(--ink-3); padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
.contents a { display: flex; align-items: center; min-height: 44px; padding: 6px 0; font-size: 15px; line-height: 1.35; color: var(--ink-2); text-decoration: none; }
.contents a:hover { color: var(--ink); }
.document { grid-column: 5 / span 7; max-width: 68ch; }
.clause { scroll-margin-top: 32px; }
.clause + .clause { margin-top: 64px; }
.document h2 { font-size: 24px; line-height: 1.2; font-weight: 700; font-stretch: 112%; letter-spacing: -.01em; margin-bottom: 16px; }
.document p { color: #d6d5cf; line-height: 1.7; }
.document p + p { margin-top: 16px; }
.document a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.document a:hover { text-decoration-thickness: 2px; }

/* ---------------------------------------------------------------- Footer */

.foot { border-top: 1px solid var(--rule); padding: 48px var(--margin) 40px; }
.foot > .frame { max-width: 1312px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto; gap: 24px 32px; align-items: center; }
.foot .brand-line { display: flex; align-items: center; gap: 12px; }
.foot .brand-line img { width: 32px; height: 32px; border-radius: 8px; }
.foot .brand-line b { display: block; font-size: 17px; font-weight: 700; font-stretch: 112%; }
.foot .brand-line span { display: block; font-size: 13px; color: var(--ink-3); }
.foot nav { display: flex; flex-wrap: wrap; }
.foot nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; font-size: 15px; color: var(--ink-2); text-decoration: none; }
.foot nav a:last-child { padding-right: 0; }
.foot nav a:hover { color: var(--ink); }
.foot .legal { grid-column: 1 / -1; margin-top: 16px; font-size: 13px; color: var(--ink-3); }

/* ---------------------------------------------------------------- Narrow screens */

@media (max-width: 1080px) {
  :root { --margin: 40px; }
  .room > .frame { column-gap: 40px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lamp > .frame { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .guide { grid-template-columns: 1fr; }
  .steps, .plans { gap: 32px; }
  .help { gap: 32px; }
  .tell { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .warning { max-width: none; }
  .paper > .frame { column-gap: 32px; }
  .document { grid-column: 4 / -1; }
}

@media (max-width: 720px) {
  :root { --margin: 20px; --bar: 64px; }
  .brand { font-size: 17px; gap: 10px; }
  .brand img { width: 28px; height: 28px; }
  .bar nav a { padding: 0 10px; }
  .room { padding-top: calc(var(--bar) + 24px); padding-bottom: 80px; }
  /* The ten-second answer first, then the television. */
  .room > .frame { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "rest" "set"; }
  .lamp > .frame { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "set" "rest"; }
  .room h1 { margin-bottom: 20px; }
  .devices { margin-bottom: 12px; }
  .lede { font-size: 17px; margin-bottom: 24px; }
  .set { margin-top: 48px; }
  .guide { margin-top: 12px; }
  .row { min-height: 60px; }
  .section { padding-top: 80px; }
  .steps, .plans, .tell { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 32px; }
  .steps li { padding: 20px 0 24px; }
  .plans { gap: 40px; }
  .plans > div, .plans > div + div { grid-column: auto; }
  .plans > div + div ul { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
  .tell li { padding: 12px 0 14px; }
  .screens { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 48px; margin-top: 40px; }
  .screens figure { grid-row: auto; grid-template-rows: none; }
  /* The Apple TV capture stays 16:9 and runs off the right edge, like a wide set seen up close. */
  /* Clip at the viewport's edges, not the gutter's, so the set's light still reaches both sides. */
  .screens figure:first-child { margin-inline: calc(-1 * var(--margin)); padding-left: var(--margin); overflow-x: clip; }
  .screens figure:first-child figcaption { padding-right: var(--margin); }
  .tv.still { width: 165%; border-radius: 10px 0 0 10px; padding-right: 0; }
  .tv.still img { border-radius: 4px 0 0 4px; }
  .screens figure:last-child > div { width: min(280px, 72%); justify-self: center; }
  .help, .faq > div, .yours { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .help > *, .faq dt, .faq dd, .yours h3, .yours p { grid-column: auto; }
  .help { padding-bottom: 80px; }
  .faq dt, h3 { font-size: 20px; }
  .yours { padding-bottom: 80px; }
  .lamp { padding-bottom: 64px; }
  .lamp .set { width: min(280px, 72%); justify-self: center; margin-top: 32px; padding-top: 0; }
  .tell { margin-top: 40px; }
  .warning { padding: 18px 20px; }
  .foot > .frame { grid-template-columns: minmax(0, 1fr); }
  .foot nav { margin-left: -12px; }
  .paper { padding-top: 24px; padding-bottom: 80px; }
  .paper > .frame { display: block; }
  .paper-head { margin-bottom: 48px; }
  .contents { display: none; }
  .clause + .clause { margin-top: 48px; }
  .document h2 { font-size: 22px; }
}

/* Reduce Motion keeps every fade; there is no travel to remove. */
@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 1.8s; }
}