/* Copyright © 2026 Justus Mwanthi. Reg. No. RZ105835. All rights reserved.
   Digital Elimu — proprietary software. See LICENSE in the repository root. */

/* =====================================================================
   Digital Elimu website styles

   Sizes are in rem, so the whole site scales from one place: the html
   font-size set in SCREEN SIZES at the bottom. Phones, tablets, laptops,
   desktops and TVs each get a base size, and everything grows with it.

   Parts, in order:
     1. Tokens and base         5. Sections
     2. Layout helpers          6. Pages (blog, legal, 404)
     3. Header and footer       7. Screen sizes (phones to 4K TVs)
     4. Buttons, video, forms
   New section styles go in part 5, under their own heading.
   ===================================================================== */

/* ---------- 1. Tokens and base ---------- */
@font-face { font-family: 'Outfit'; src: url('/fonts/outfit-latin-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'DM Serif Display'; src: url('/fonts/dm-serif-display-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }

:root {
  --ink: #0b0f1a;
  --panel: #131a2a;
  --line: rgba(255, 255, 255, .1);
  --text: #e8ecf3;
  --muted: #a3aec0;
  --amber: #f0a500;
  --amber-2: #ffbe2e;
  --amber-dark: #8a5d00;
  --sky: #38bdf8;
  --paper: #f7f5f0;
  --paper-ink: #1a1f2b;
  --paper-muted: #545d6e;
  --paper-line: rgba(0, 0, 0, .09);
  --max: 74rem;
  --gutter: 1.5rem;
  --section: 6rem;
  --radius: 1rem;
  --header: 4.5rem;
  --serif: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --sans: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header) + 1rem); }
body { margin: 0; background: var(--ink); color: var(--text); font-family: var(--sans); font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1rem; }
h1, h2, h3, h4 { margin: 0; }
em { font-style: normal; color: var(--amber); }
b, strong { font-weight: 600; }
button { font: inherit; }

/* Clear focus for keyboards and TV remotes */
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; border-radius: .25rem; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--amber); color: #1b1300; padding: .6rem 1rem; border-radius: .5rem; font-weight: 600; }
.skip:focus { top: 1rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- 2. Layout helpers ---------- */
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); }
.wrap.narrow { max-width: 48rem; }
section { padding: var(--section) 0; }
.light { background: var(--paper); color: var(--paper-ink); }
.grid-2, .grid-3 { display: grid; gap: 1.125rem; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 4rem; align-items: start; }
.center-row { display: flex; justify-content: center; margin-top: 2.5rem; }

.section-head { max-width: 42rem; margin-bottom: 3.25rem; }
.section-head.center { text-align: center; margin-left: auto; margin-right: auto; }
.split .section-head { margin-bottom: 0; }
.kicker { font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; color: var(--amber); font-weight: 600; }
.light .kicker { color: var(--amber-dark); }
h2, .page-title { font-family: var(--serif); font-weight: 400; font-size: clamp(1.875rem, 1.4rem + 1.8vw, 2.75rem); line-height: 1.12; margin: .6rem 0 .9rem; }
.section-head p { color: var(--muted); font-size: 1.125rem; margin: 0; }
.light .section-head p { color: var(--paper-muted); }
.section-head p a, .lead a { text-decoration: underline; text-underline-offset: .2em; }

/* ---------- 3. Header and footer ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(11, 15, 26, .88); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top); }
.bar { display: flex; align-items: center; gap: 1.75rem; min-height: var(--header); }
.brand { display: inline-flex; align-items: center; gap: .75rem; font-weight: 600; font-size: 1.1875rem; white-space: nowrap; flex: none; }
.brand img { width: 2.5rem; height: 2.5rem; }
.brand b { color: var(--amber); font-weight: 600; }
.nav-wrap { display: flex; align-items: center; flex: 1; gap: 1.75rem; }
.links { display: flex; gap: .25rem; }
.links a { padding: .5rem .875rem; border-radius: .5rem; color: var(--muted); font-size: .97rem; font-weight: 500; transition: color .15s, background .15s; }
.links a:hover, .links a[aria-current="page"] { color: var(--text); }
.links a:hover { background: rgba(255, 255, 255, .06); }
.actions { margin-left: auto; display: flex; gap: .625rem; }
.menu-toggle { display: none; margin-left: auto; background: none; border: 1px solid rgba(255, 255, 255, .22); color: var(--text); border-radius: .5rem; padding: .55rem 1rem; font-weight: 600; font-size: .95rem; cursor: pointer; min-height: 2.75rem; }

.site-footer { border-top: 1px solid var(--line); padding: 3.5rem 0 2.25rem; color: var(--muted); font-size: .95rem; padding-bottom: max(2.25rem, env(safe-area-inset-bottom)); }
.foot { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; }
.foot h4 { color: var(--text); font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 .9rem; font-weight: 600; }
.foot a { display: block; padding: .3rem 0; }
.foot a:hover { color: var(--text); }
.foot .brand { color: var(--text); margin-bottom: .9rem; display: inline-flex; padding: 0; }
.foot .brand img { width: 2.125rem; height: 2.125rem; }
.legal { margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: .75rem; font-size: .875rem; }

/* ---------- 4. Buttons, video, forms ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: .625rem 1.125rem; min-height: 2.75rem; border-radius: .625rem; font-weight: 600; font-size: .95rem; border: 1px solid transparent; transition: transform .12s, background .15s, border-color .15s; white-space: nowrap; cursor: pointer; text-align: center; }
.btn:hover { transform: translateY(-1px); }
.btn.big { padding: .8rem 1.5rem; font-size: 1rem; min-height: 3rem; }
.btn-amber { background: var(--amber); color: #1b1300; }
.btn-amber:hover { background: var(--amber-2); }
.btn-outline { border-color: rgba(255, 255, 255, .28); color: var(--text); }
.btn-outline:hover { border-color: rgba(255, 255, 255, .55); }
.btn-dark { background: var(--paper-ink); color: #fff; }
.btn-disabled { background: rgba(255, 255, 255, .08); color: var(--muted); cursor: default; }
.btn-disabled:hover { transform: none; }

.video { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; cursor: pointer; border-radius: 0; }
.video img { width: 100%; height: 100%; object-fit: cover; opacity: .82; transition: opacity .2s; }
.video:hover img { opacity: 1; }
.video img.missing { visibility: hidden; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgba(11, 15, 26, .78); color: #fff; border: 1px solid rgba(255, 255, 255, .35); border-radius: 0; padding: .7rem 1.4rem; font-weight: 600; font-size: 1rem; cursor: pointer; white-space: nowrap; }
.video:hover .video-play { background: var(--amber); color: #1b1300; border-color: var(--amber); }
.video.playing { cursor: default; }
/* No video yet: the same 16:9 frame with a short note */
.video-empty { cursor: default; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #141c2e, #0b0f1a 70%); }
.video-empty span { color: var(--muted); font-size: .95rem; letter-spacing: .04em; }

.form { background: #fff; border: 1px solid var(--paper-line); border-radius: 1.125rem; padding: 2rem; box-shadow: 0 1.875rem 3.75rem -2.25rem rgba(15, 20, 35, .35); }
.form label { display: block; font-size: .92rem; font-weight: 600; color: var(--paper-ink); margin-bottom: 1rem; }
.form input, .form select, .form textarea { display: block; width: 100%; margin-top: .45rem; padding: .75rem .875rem; min-height: 3rem; border: 1px solid #d3d8e1; border-radius: .625rem; font: 400 1rem var(--sans); color: var(--paper-ink); background: #fbfbfc; transition: border-color .15s, box-shadow .15s; }
.form textarea { resize: vertical; min-height: 8.75rem; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(240, 165, 0, .22); background: #fff; }
.form .invalid { border-color: #c2410c; }
.form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-foot { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: .4rem; }
.form button[disabled] { opacity: .6; cursor: default; }
.form-status { font-size: .95rem; color: var(--paper-muted); }
.form-status.ok { color: #15803d; font-weight: 600; }
.form-status.err { color: #b42318; font-weight: 600; }
.form-note { font-size: .85rem; color: var(--paper-muted); margin: 1rem 0 0; }
.form-note a { color: var(--amber-dark); text-decoration: underline; }

/* ---------- 5. Sections ---------- */

/* Hero */
/* The hero fits in the first screen: headline near the header, then the
   video, sized to fill what is left (see FIRST SCREEN in part 7). */
.hero { padding: 1.75rem 0 1.5rem; position: relative; overflow: hidden; }
.hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(56rem 26rem at 50% 4%, rgba(56, 189, 248, .13), transparent 70%),
  radial-gradient(44rem 22rem at 88% 72%, rgba(240, 165, 0, .1), transparent 70%); }
.hero .wrap { position: relative; display: flex; flex-direction: column; }
.hero-head { text-align: center; max-width: 52rem; margin: 0 auto 1.25rem; }
.eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sky); font-weight: 600; }
.eyebrow::before { content: ''; width: .45rem; height: .45rem; border-radius: 50%; background: var(--sky); box-shadow: 0 0 .75rem var(--sky); flex: none; }
.hero h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.25rem, 1.3rem + 4vw, 4rem); line-height: 1.08; margin: .6rem 0 .6rem; letter-spacing: -.01em; }
.hero-head p { color: var(--muted); font-size: 1.1875rem; margin: 0 auto; max-width: 40rem; }
.hero-stage { display: flex; justify-content: center; }
.video-frame { width: 100%; max-width: 72rem; margin: 0 auto; border-radius: 0; padding: .5rem; background: linear-gradient(145deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03)); box-shadow: 0 2.5rem 5.6rem -1.9rem rgba(0, 0, 0, .8), 0 0 0 1px var(--line); }
.hero-points { display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem 1rem; margin-top: 1rem; color: var(--muted); font-size: .92rem; }
.hero-points .sep { color: var(--amber); }

/* Features */
.card { background: var(--panel); border: 1px solid var(--line); border-top: 2px solid var(--amber); border-radius: var(--radius); padding: 1.75rem; }
.card h3 { font-size: 1.1875rem; font-weight: 600; margin-bottom: .5rem; }
.card p { color: var(--muted); font-size: 1rem; margin: 0; }

/* Showcase rows */
.row { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 4rem; align-items: center; }
.row + .row { margin-top: 6rem; }
.media { border-radius: var(--radius); overflow: hidden; box-shadow: 0 1.875rem 3.75rem -1.75rem rgba(15, 20, 35, .45); border: 1px solid rgba(0, 0, 0, .06); background: #fff; }
.media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.row h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.625rem, 1.3rem + 1vw, 2rem); line-height: 1.15; margin: .5rem 0 .875rem; }
.row p { color: var(--paper-muted); }
.lines { list-style: none; padding: 0; margin: 1.25rem 0 0; }
.lines li { padding: .65rem 0; border-top: 1px solid var(--paper-line); }
.lines li:last-child { border-bottom: 1px solid var(--paper-line); }

/* Samples */
.sample { background: var(--panel); border: 1px solid var(--line); border-radius: 0; overflow: hidden; transition: border-color .15s; }
.sample:hover { border-color: rgba(240, 165, 0, .45); }
.sample-body { padding: 1.25rem 1.375rem 1.4rem; }
.sample h3 { font-size: 1.125rem; font-weight: 600; margin-bottom: .35rem; }
.sample p { color: var(--muted); font-size: .95rem; margin: 0; }
.tag { font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; color: var(--sky); font-weight: 600; margin-bottom: .5rem; }

/* About */
.about-text p { color: var(--paper-muted); font-size: 1.09rem; margin-bottom: 1.125rem; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .875rem; margin-top: 1.9rem; }
.facts div { border-top: 2px solid var(--amber); padding-top: .75rem; }
.facts b { display: block; color: var(--paper-ink); }
.facts span { color: var(--paper-muted); font-size: .92rem; }

/* Get started */
.step { padding: 1.875rem 1.75rem; border-radius: var(--radius); border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255, 255, 255, .035), transparent); display: flex; flex-direction: column; align-items: flex-start; }
.step-n { font-family: var(--serif); font-size: 2.875rem; color: var(--amber); line-height: 1; margin-bottom: .875rem; }
.step h3 { font-size: 1.1875rem; font-weight: 600; margin-bottom: .5rem; }
.step p { color: var(--muted); font-size: 1rem; margin-bottom: 1.125rem; flex: 1; }
.panels { margin-top: 1.125rem; align-items: start; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 2.125rem; }
.panel h3 { font-family: var(--serif); font-weight: 400; font-size: 1.75rem; line-height: 1.2; margin: .5rem 0 .4rem; }
.panel h4 { margin: 1.75rem 0 .625rem; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.panel p { color: var(--muted); }
.panel .sub { font-size: .95rem; margin-bottom: 1.25rem; }
.panel-end { margin-top: 1.5rem; }
.req { width: 100%; border-collapse: collapse; font-size: .97rem; }
.req th, .req td { padding: .55rem 0; border-top: 1px solid var(--line); vertical-align: top; text-align: left; }
.req th { color: var(--text); width: 34%; font-weight: 500; padding-right: 1rem; }
.req td { color: var(--muted); }
.plain { margin: 0; padding-left: 1.25rem; color: var(--muted); }
.plain li { padding: .25rem 0 .25rem .25rem; }
.plain b { color: var(--text); }

/* Blog cards */
.post { padding: 1.625rem; border-radius: var(--radius); background: #fff; border: 1px solid rgba(0, 0, 0, .07); display: flex; flex-direction: column; color: var(--paper-ink); }
.post time { font-size: .82rem; color: var(--paper-muted); }
.post h3 { font-size: 1.1875rem; font-weight: 600; margin: .5rem 0; line-height: 1.3; }
.post h3 a:hover { color: var(--amber-dark); }
.post p { margin: 0 0 1rem; color: var(--paper-muted); font-size: .97rem; }
.post .more { margin-top: auto; color: var(--amber-dark); font-weight: 600; font-size: .95rem; }

/* Help */
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 1.25rem 0; font-weight: 600; font-size: 1.09rem; display: flex; justify-content: space-between; gap: 1.25rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--amber); font-weight: 400; font-size: 1.5rem; line-height: 1; flex: none; }
.faq details[open] summary::after { content: '\2212'; }
.faq details p { margin: -.25rem 0 1.25rem; color: var(--muted); max-width: 40rem; }
.faq b { color: var(--text); }

/* Contact */
.contact-alt div, .lead + .contact-alt div { padding: .75rem 0; border-top: 1px solid var(--paper-line); display: flex; flex-direction: column; }
.contact-alt span { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--paper-muted); }
.contact-alt a { color: var(--paper-ink); font-weight: 600; word-break: break-word; }
.lead { color: var(--paper-muted); font-size: 1.125rem; margin-bottom: 1.75rem; }

/* ---------- 6. Pages (blog, legal, 404) ---------- */
.page-top { padding-top: 4rem; }
.page-title { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); }
.article { background: var(--paper); color: var(--paper-ink); padding-bottom: 5rem; }
.back { display: inline-block; color: var(--amber-dark); font-weight: 600; margin-bottom: 1.75rem; }
.article-meta { display: flex; gap: .5rem 1.25rem; flex-wrap: wrap; color: var(--paper-muted); font-size: .92rem; margin-bottom: .25rem; }
.article-lead { font-size: 1.25rem; color: var(--paper-muted); }
.article-cover { margin: 2rem 0 2.25rem; overflow: hidden; }
.prose { font-size: 1.09rem; }
.prose h2 { font-family: var(--sans); font-weight: 600; font-size: 1.375rem; margin: 2.25rem 0 .6rem; line-height: 1.3; }
.prose h3 { font-size: 1.15rem; font-weight: 600; margin: 1.75rem 0 .5rem; }
.prose p, .prose li { color: #384050; }
.prose ul, .prose ol { padding-left: 1.4rem; margin: 0 0 1rem; }
.prose li { padding: .2rem 0; }
.prose a { color: var(--amber-dark); text-decoration: underline; text-underline-offset: .2em; }
.prose blockquote { margin: 1.5rem 0; padding: .25rem 0 .25rem 1.25rem; border-left: 3px solid var(--amber); font-size: 1.2rem; color: var(--paper-ink); }
.figure { margin: 1.75rem 0; }
.figure img { border-radius: .75rem; }
.figure .video { border-radius: 0; }
.figure figcaption { font-size: .9rem; color: var(--paper-muted); margin-top: .6rem; }
.empty { color: var(--paper-muted); }
.center-page { text-align: center; min-height: 55vh; display: flex; align-items: center; }
.center-page p { color: var(--muted); }

/* ---------- 7. Screen sizes ---------- */

/* Laptops (smaller ones) and large tablets: tighter header */
@media (max-width: 1199px) {
  .bar { gap: 1rem; }
  .nav-wrap { gap: 1rem; }
  .links a { padding: .5rem .6rem; }
}

/* Tablets and phones: menu button, stacked layouts */
@media (max-width: 1023px) {
  :root { --section: 4.75rem; }
  .menu-toggle { display: inline-flex; align-items: center; }
  .nav-wrap { display: none; }
  .site-header.open .bar { flex-wrap: wrap; }
  .site-header.open .nav-wrap { display: flex; flex-direction: column; align-items: stretch; flex: 0 0 100%; width: 100%; gap: .75rem; padding: .25rem 0 1.25rem; max-height: calc(100vh - var(--header)); overflow-y: auto; }
  .site-header.open .links { flex-direction: column; }
  .site-header.open .links a { padding: .85rem .75rem; font-size: 1.05rem; border-bottom: 1px solid var(--line); border-radius: 0; }
  .site-header.open .actions { margin: .25rem 0 0; }
  .site-header.open .actions .btn { flex: 1; }
  .split, .row { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .row + .row { margin-top: 4rem; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .foot { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot > div:first-child { grid-column: 1 / -1; }
}

/* Large phones and small tablets */
@media (max-width: 767px) {
  :root { --section: 4rem; --gutter: 1.25rem; }
  .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .hero { padding: 1.25rem 0 1.5rem; }
  .video-frame { padding: .3rem; }
  .facts { grid-template-columns: minmax(0, 1fr); gap: .875rem; }
  .panel, .form { padding: 1.5rem 1.25rem; }
  .form .two { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .section-head { margin-bottom: 2.25rem; }
  .page-top { padding-top: 2.75rem; }
}

/* Phones */
@media (max-width: 479px) {
  body { font-size: 1rem; }
  :root { --gutter: 1rem; --header: 4rem; }
  .brand { font-size: 1.0625rem; gap: .6rem; }
  .brand img { width: 2.25rem; height: 2.25rem; }
  .hero-head p { font-size: 1.0625rem; }
  .hero-points { flex-direction: column; align-items: center; gap: .25rem; }
  .hero-points .sep { display: none; }
  .foot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-header.open .actions { flex-direction: column; }
  .req th { width: 38%; }
  .btn.big { width: 100%; }
  .form-foot .btn { width: 100%; }
  .video-play { padding: .55rem 1.1rem; font-size: .92rem; }
}

/* Small phones (320 to 359 wide) */
@media (max-width: 359px) {
  html { font-size: 15px; }
  :root { --gutter: .875rem; }
  .brand span { font-size: 1rem; }
  .foot { grid-template-columns: minmax(0, 1fr); }
}

/* Phones turned sideways: short screens */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 1023px) {
  .site-header { position: relative; }
  .hero { padding: .75rem 0 .75rem; }
  .hero h1 { font-size: 1.75rem; margin: .3rem 0; }
  .hero-head { margin-bottom: .6rem; }
  .hero-head p { font-size: .95rem; line-height: 1.45; }
  .hero-points { display: none; }
  html { scroll-padding-top: 1rem; }
}

/* FIRST SCREEN: on any screen wider than it is tall (laptops, desktops,
   TVs, phones turned sideways) the hero is exactly the space under the
   header, and the video takes the largest 16:9 size that fits in what is
   left, so it is always visible without scrolling. */
@media (orientation: landscape) {
  .hero { height: calc(100vh - var(--header) - 1px); height: calc(100svh - var(--header) - 1px); min-height: 18rem; display: flex; }
  .hero .wrap { flex: 1; min-height: 0; }
  .hero-stage { flex: 1; min-height: 0; }
  @supports (container-type: size) {
    .hero-stage { container-type: size; }
    .video-frame { width: min(100cqw, calc((100cqh - 1rem) * 16 / 9 + 1rem)); max-width: 80rem; }
  }
  @supports not (container-type: size) {
    .video-frame { width: min(100%, calc((100vh - 17rem) * 16 / 9)); }
  }
}

/* ONE LINE PER STATEMENT on laptops, desktops and TVs: the eyebrow, the
   headline and the line under it never wrap. Sizes follow the screen width;
   js/features/fit-line.js shrinks any line that would still be too long. */
@media (min-width: 1024px) {
  .hero-head { max-width: none; width: 100%; }
  .hero [data-fit] { white-space: nowrap; }
  .hero h1 { font-size: min(4.25rem, 4.4vw); }
  .hero-head p { max-width: none; font-size: min(1.375rem, 1.5vw); }
  .hero [data-fit].fit-wrap { white-space: normal; }
}

/* Large desktops */
@media (min-width: 1600px) {
  html { font-size: 17px; }
  :root { --max: 80rem; }
}
@media (min-width: 1920px) {
  html { font-size: 18px; }
}

/* TVs and large displays (QHD, 4K): everything scales up so text reads
   from across a room, with a margin for TVs that crop the screen edges. */
@media (min-width: 2400px) {
  html { font-size: 22px; }
  :root { --max: 84rem; --gutter: 3rem; }
  :focus-visible { outline-width: 4px; outline-offset: 4px; }
}
@media (min-width: 3200px) {
  html { font-size: 30px; }
  :root { --gutter: 4rem; }
}
@media (min-width: 3800px) {
  html { font-size: 34px; }
}

/* Print: plain pages for Terms, Privacy and articles */
@media print {
  .site-header, .site-footer, .skip, .video, .back { display: none !important; }
  body, .article, .light { background: #fff; color: #000; }
}