/* Hey Telly site. The system is the taste skill's kit in /kit (system.css and friends, never edited); this file holds
   the font, the palette as start.mjs printed it for Hey Telly's own colours, and the page CSS the kit leaves to a page:
   what sits inside a visual, one --p-h per card group, the document pages. Every class here starts with ht-. */

@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

/* start.mjs brand --page software --bg "#f2f2f2" --ink "#1f242b" --accent "#d92d2d" --surface "#dde6f2" --type archivo
   --radius round --force (Archivo is the brand face; the wordmark is set in it). Mono is never used, so not loaded. */
:root {
  --p-bg: #f2f2f2; --p-surface: #dde6f2; --p-ink: #1f242b; --p-muted: #61656a;
  --p-accent: #d92d2d; --p-accent-ink: #ffffff; --p-action: #d92d2d; --p-action-ink: #ffffff;
  --p-inv-bg: #1f242b; --p-inv-surface: #2b3037; --p-inv-ink: #f2f2f2; --p-inv-muted: #9a9da0;
  --p-inv-accent: #d92d2d; --p-inv-accent-ink: #ffffff; --p-inv-action: #d92d2d; --p-inv-action-ink: #ffffff;
  --font-display: "Archivo", system-ui, sans-serif;
  --font-text: "Archivo", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --display-weight: 500;
  --display-tracking: -0.025em;
  --display-tracking-xl: -0.035em;
  --display-stretch: 110%;
  --ly-scale: 0.9;
}

/* the lit ground takes the app's own sky (its SkyBackground: #89acd7 at the top to #dde6f2) */
html[data-ground="sky"] { --ground-bg: #a9c2e2; --ground-surface: #dde6f2; --ground-ink: #1f242b; --ground-muted: #3d4a5a; --ground-accent: #c9d9ee; }

/* ---------------------------------------------------------------- hero */
/* Apple's badge, unchanged: at least 40px tall, clear space a quarter of its height */
.ht-badge { display: inline-flex; padding: 0; border-radius: 9px; }
.ht-badge img { display: block; height: 52px; width: auto; }
.hero--centred .btn-row { align-items: center; gap: var(--s-5); }
.hero--centred .hero__lead { color: var(--ink); }

/* every app picture is a whole iPhone screen from the release build, never cropped: the screen's own
   rounded corners (13% across, 6% down, the 1320x2868 display's radius) and a hairline so it stands off
   the sky. Apple asks for its own bezels or none, so no phone is drawn around it. */
.ht-shot { display: block; height: auto; max-width: none; border-radius: 13% / 6%; box-shadow: 0 0 0 1px rgba(31, 36, 43, .16); }

/* the hero grows past the first screen so its three phones stand whole in the lit window: the controls
   page, the remote (larger, in the middle) and Ask Telly. A phone shows the remote alone. */
main > .hero.hero--centred { height: auto; min-height: 100vh; min-height: 100svh; }
.hero--centred .hero__window { flex: 0 0 auto; min-height: 0; padding: var(--s-7) var(--s-5);
  -webkit-mask-image: none; mask-image: none; }
.hero--centred .hero__window > .ly-piece.ht-phones { position: relative; left: auto; top: auto; transform: none; width: auto;
  display: flex; justify-content: center; align-items: center; gap: clamp(16px, 3.4vw, 56px); }
.ht-phones__main { width: clamp(170px, 24vw, 280px); }
.ht-phones__side { width: clamp(140px, 20vw, 236px); }
@media (max-width: 639px) {
  .hero--centred .hero__window { padding: var(--s-6) var(--s-4); }
  .ht-phones__side { display: none; }
  .ht-phones__main { width: min(230px, 64vw); }
}

/* ---------------------------------------------------------------- text beside a visual */
.ht-copy > * + * { margin-top: var(--s-5); }
.ht-copy > .link { display: inline-block; }
.ht-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.ht-facts li { font-size: var(--t-body, 16px); line-height: 1.5; color: var(--ink); }

/* the two splits' frames keep the kit's 5:4 (the lit frame drops it to 2:1) */
#find .frame--split, #buttons .frame--split { --ratio: 80%; }
.ht-find .dg { width: 100%; height: 100%; }
@media (min-width: 1024px) and (max-width: 1279px) { #find .frame--split, #buttons .frame--split { --ratio: 100%; } }
@media (max-width: 1023px) { #find .frame--split, #buttons .frame--split { --ratio: 62%; } }
@media (max-width: 639px) {
  #find .frame--split { --ratio: 92%; }
  #buttons .frame--split { --ratio: 70%; }
  #find .ht-facts, #buttons .ht-facts { display: none; }
}

/* ---------------------------------------------------------------- every button: three whole screens */
/* the section grows with its three screens rather than holding to one screen */
main > #remote { height: auto; min-height: 100vh; min-height: 100svh; }
#remote .ht-part { height: auto; min-height: 0; padding: var(--s-6) var(--s-5); display: flex; justify-content: center; align-items: flex-start; background: var(--ground-surface, #dde6f2); }
#remote .ht-part > .ht-shot { position: relative; z-index: 1; width: clamp(150px, 14vw, 196px); }
/* three across down to the tablet */
@media (min-width: 640px) and (max-width: 1279px) {
  #remote .grid > .card.span-4 { grid-column: auto / span 4; }
}
/* a phone: each card a row, the whole screen beside its words */
@media (max-width: 639px) {
  #remote .card--row { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: var(--s-4); row-gap: var(--s-2); align-items: start; }
  #remote .card--row > h3 { grid-column: 2; grid-row: 1; margin: 0; }
  #remote .card--row > p { grid-column: 2; grid-row: 2; margin: 0; }
  #remote .card--row > .panel { grid-column: 1; grid-row: 1 / span 3; margin: 0; padding: 0; background: none; }
  #remote .ht-part > .ht-shot { width: 112px; }
}

/* ---------------------------------------------------------------- the routine checklist */
.ht-routine { --w: 420px; --ax: max(24px, 50% - 210px); --ay: 56px; --ay-sm: 24px; }
.ht-routine [data-checks-bar] { --k: 0.2; }

/* ---------------------------------------------------------------- lock screen, on the dark band: two whole screens */
.ht-lock { display: flex; justify-content: center; align-items: center; gap: clamp(16px, 4vw, 64px); margin-top: var(--s-7); }
.ht-lock__phone { width: clamp(140px, 17vw, 250px); box-shadow: 0 0 0 1px rgba(242, 242, 242, .22); }
@media (max-width: 639px) {

  .ht-lock { gap: var(--s-4); }
  .ht-lock__phone { width: calc((100% - var(--s-4)) / 2); max-width: 200px; }
}

.ht-more { margin-top: var(--s-6); }

/* ---------------------------------------------------------------- the menu cards: a whole screen in each */
.ht-menu-shot { background: var(--ground-surface, #dde6f2); }
.ht-menu-shot > .ht-shot { position: absolute; z-index: 1; left: 50%; top: var(--s-4); bottom: var(--s-4); height: calc(100% - 2 * var(--s-4)); width: auto; transform: translateX(-50%); }

/* ---------------------------------------------------------------- the Assistant's window */
.ht-ask { margin-top: var(--s-7); }
.ht-ask__chat { --fit-max: 440px; --ax: max(24px, 50% - 220px); --ay: 48px; --ay-sm: 24px; }

/* ---------------------------------------------------------------- the privacy statement's three lines */
.ht-facts--statement { margin-top: var(--s-6); }
.ht-facts--statement li { font-size: var(--t-lead); }
#privacy .wrap > p:last-child { margin-top: var(--s-6); }

/* ---------------------------------------------------------------- plans, without prices */
.ht-plans { margin-top: var(--s-7); }
.ht-plans .card--plan { display: flex; flex-direction: column; gap: var(--s-3); }
.ht-plan-mark { display: block; width: 32px; height: 32px; }
.ht-plan-list { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: var(--s-3); }
.ht-plan-list li { font-size: 16px; line-height: 1.5; padding-left: 24px; position: relative; }
.ht-plan-list li::before { content: ""; position: absolute; left: 0; top: .45em; width: 12px; height: 7px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
@media (max-width: 639px) { #plans { --hm: 2; } }

/* ---------------------------------------------------------------- questions: four answers in two columns */
.ht-faq { margin-top: var(--s-7); align-items: start; }
@media (min-width: 640px) and (max-width: 1023px) {
  .ht-faq > .faq { grid-column: auto / span 6; }
}
@media (max-width: 639px) {
  #faq { --hm: 2; }
  .ht-faq { row-gap: 0; }
  .ht-faq > .faq + .faq > .faq__item:first-child { padding-top: var(--s-4); }
}

/* ---------------------------------------------------------------- the close and the footer */
.close--type .section-head { max-width: none; }
#privacy .mo-la__sub { color: var(--ink); }
@media (max-width: 359px) { .closing .btn--xl { font-size: 16px; padding-inline: var(--s-4); } }
.ht-legal { margin-top: var(--s-5); font-size: 13px; line-height: 1.6; color: var(--muted); max-width: 120ch; }
.ht-legal a { color: inherit; }

/* ================================================================ document pages: privacy, support, 404 */
.ht-doc { padding-top: calc(var(--nav) + var(--s-9)); padding-bottom: var(--s-9); }
.ht-doc__title { max-width: 880px; }
.ht-doc__title h1 { font-size: var(--t-h1); }
.ht-doc__title .t-lead { margin-top: var(--s-4); }
.ht-doc__title .ht-date { margin-top: var(--s-4); color: var(--muted); font-size: 14px; }
.ht-doc__cols { margin-top: var(--s-9); align-items: start; }
.ht-doc__nav { display: grid; gap: var(--s-2); }
.ht-doc__nav a { color: var(--muted); text-decoration: none; font-size: 15px; line-height: 1.4; padding-block: var(--s-1); }
.ht-doc__nav a:hover { color: var(--ink); }
.ht-doc__body { max-width: 68ch; }
.ht-doc__body > section + section { margin-top: var(--s-8); }
.ht-doc__body h2 { font-size: var(--t-h3); margin-bottom: var(--s-4); scroll-margin-top: calc(var(--nav) + var(--s-5)); }
.ht-doc__body h3 { font-size: 20px; margin: var(--s-6) 0 var(--s-3); }
.ht-doc__body p, .ht-doc__body li { font-size: 17px; line-height: 1.65; }
.ht-doc__body p + p, .ht-doc__body p + ul, .ht-doc__body ul + p, .ht-doc__body ol + p { margin-top: var(--s-4); }
.ht-doc__body ul, .ht-doc__body ol { padding-left: 1.3em; margin: var(--s-4) 0 0; }
.ht-doc__body ul { list-style: disc; }
.ht-doc__body ol { list-style: decimal; }
.ht-doc__body li::marker { color: var(--muted); }
.ht-doc__body li + li { margin-top: var(--s-2); }
.ht-doc__body a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ht-callout { padding: var(--s-6); border-radius: var(--r-lg); background: var(--surface); }
.ht-callout p { font-size: 18px; }
.ht-foot { border-top: 1px solid var(--line); padding-block: var(--s-7) var(--s-8); }
.ht-foot__row { display: flex; flex-wrap: wrap; gap: var(--s-5) var(--s-7); align-items: center; justify-content: space-between; }
.ht-foot__row nav { display: flex; gap: var(--s-5); }
.ht-foot__row a { color: var(--ink); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.ht-404 { min-height: calc(100svh - 160px); display: grid; align-content: center; gap: var(--s-5); }
@media (max-width: 1023px) {
  .ht-doc__nav { display: none; }
}
@media (max-width: 639px) {
  .ht-doc { padding-top: calc(var(--nav) + var(--s-7)); }
  .ht-doc__cols { margin-top: var(--s-7); }
}