/* ShortDrama Downloader sites - shared stylesheet.
   Mobile first: base < 768px, then md >= 768, lg >= 1024, xl >= 1280, xxl >= 1921 (section 9).
   Sizes are in rem: 1rem = 16 design px. The root is pinned at 16px up to 1920 px wide and grows above that, so
   the whole design scales on large screens. Only 1px hairlines, the 999px pill radius and media queries stay in px. */

/* ==========================================================================
   0. Fonts: self-hosted in /assets/fonts/ (no request to any other site). Mona Sans, Onest and Cascadia Mono,
   each under the SIL Open Font License 1.1 (OFL.txt in each font folder). Same files, unicode-range subsets
   and axes as Google Fonts serves: the variable woff2 files, Latin + Latin Extended (+ Onest math/symbols,
   for arrows such as the one in "Settings -> Plan").
   ========================================================================== */
/* Mona Sans, latin-ext */
@font-face {
  font-family: 'Mona Sans';
  font-style: normal;
  font-weight: 500 900;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url(/assets/fonts/mona-sans/MonaSans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Mona Sans, latin */
@font-face {
  font-family: 'Mona Sans';
  font-style: normal;
  font-weight: 500 900;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url(/assets/fonts/mona-sans/MonaSans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Onest, math */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/onest/Onest-math.woff2) format('woff2');
  unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E, U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
}
/* Onest, symbols */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/onest/Onest-symbols.woff2) format('woff2');
  unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8, U+1FB00-1FBFF;
}
/* Onest, latin-ext */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/onest/Onest-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Onest, latin */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/onest/Onest-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Cascadia Mono, latin-ext */
@font-face {
  font-family: 'Cascadia Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/cascadia-mono/CascadiaMono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Cascadia Mono, latin */
@font-face {
  font-family: 'Cascadia Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/cascadia-mono/CascadiaMono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   1. Tokens (light = :root; dark = [data-theme="dark"] and the no-JS media query)
   ========================================================================== */
:root {
  color-scheme: light;
  --bg: #F4F5F7;             /* page ground */
  --surface: #FFFFFF;        /* cards, bars, footer */
  --surface-2: #FAFAFC;      /* inputs, queue rows */
  --stage: #EBECEF;          /* showcase stage */
  --app-bg: #F3F5F7;         /* the app's own window background in the screenshots */
  --fill: #EFEFF3;           /* chips, tracks, idle tiles, toggle track */
  --line: #E5E5EA;           /* hairlines, card borders */
  --line-2: #DFDFE6;         /* step rail */
  --line-strong: #D7D7DE;    /* outline buttons, inputs, dashed rules */
  --line-faint: #C4C4CC;     /* inline "|" separators */
  --ink: #16161A;            /* primary text */
  --ink-2: #4A4A55;          /* secondary text */
  --ink-3: #62626C;          /* muted text, mono meta */
  --ink-4: #6E6E78;          /* idle step titles */
  --teal: #0A757A;
  --teal-soft: #E1F1F1;
  --link: #BE2756;
  --coral: #FF4D82;
  --coral-hover: #ED4576;
  --coral-press: #D63A68;
  --coral-deep: #D63A68;     /* nav CTA, FREE badge, selected episode tiles */
  --coral-deep-hover: #C92A5C;
  --coral-soft: #FFE8EF;
  --coral-softer: #FFF6F9;
  --on-coral: #FFFFFF;
  --on-coral-strong: #1A0B11;
  --green: #2EB56A;
  --green-soft: #E3F5EA;
  --green-ink: #17693B;
  --wall: #C9A89A;           /* wallpaper base under the blurred cover */
  --wall-veil: rgba(244, 245, 247, .20);
  --wall-tone: brightness(1.08);
  --glass: rgba(255, 255, 255, .82);
  --glass-badge: rgba(255, 255, 255, .94);
  --btn-o-hover: #F4F5F7;
  --btn-k-hover: #2A2A31;
  --toggle-on-bg: #FFFFFF;
  --toggle-on-ink: #16161A;
  --toggle-off-ink: #4A4A55;
  --focus: #16161A;
  --sh-1: 0 0.0625rem 0.125rem rgba(22, 22, 26, .06);
  --sh-card: 0 0.0625rem 0.125rem rgba(22, 22, 26, .06), 0 0.25rem 0.5rem rgba(22, 22, 26, .04);
  --sh-bar: 0 0.0625rem 0.125rem rgba(22, 22, 26, .14);
  --sh-raise: 0 0.25rem 0.5rem rgba(22, 22, 26, .14);
  --sh-feature: 0 0.5rem 1rem rgba(22, 22, 26, .14);
  --sh-window: 0 2rem 4rem -0.75rem rgba(22, 22, 26, .22), 0 0.125rem 0.5rem rgba(22, 22, 26, .08), 0 0 0 1px rgba(22, 22, 26, .08);
  --sh-figure: 0 0.5rem 1rem rgba(22, 22, 26, .10), 0 0 0 1px rgba(22, 22, 26, .08);
  --sh-ring: 0 0 0 1px rgba(22, 22, 26, .08);
  --scroll-shade: rgba(22, 22, 26, .16);   /* the edge shadow of a table that scrolls sideways */
  --sh-toggle: 0 0.0625rem 0.125rem rgba(22, 22, 26, .14);
  --sh-coral: inset 0 -1px 0 rgba(0, 0, 0, .10), 0 0.0625rem 0.125rem rgba(214, 58, 104, .30), 0 0.625rem 1.5rem -0.5rem rgba(255, 77, 130, .50);

  --font-display: 'Mona Sans', 'Segoe UI Variable Display', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Onest', 'Segoe UI Variable Text', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'Cascadia Mono', 'Cascadia Code', Consolas, monospace;

  --gutter: 1.25rem;
  --content: 80rem;
  --section-gap: 4.5rem;
  --theme-dur: 300ms;
  --theme-ease: cubic-bezier(.4, 0, .2, 1);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #202020;
  --surface: #2A2A2A;
  --surface-2: #262626;
  --stage: #262626;
  --app-bg: #1F1F1F;
  --fill: #333338;
  --line: #3A3A40;
  --line-2: #3A3A40;
  --line-strong: #4A4A52;
  --line-faint: #5A5A63;
  --ink: #F3F3F5;
  --ink-2: #C8C8D0;
  --ink-3: #A0A0AA;
  --ink-4: #888892;
  --teal: #26DDE3;
  --teal-soft: #1F4446;
  --link: #FF7AA2;
  --coral-soft: #3D2530;
  --coral-softer: #33242A;
  --green-soft: #1E3A2A;
  --green-ink: #6FD89A;
  --wall: #4A3C37;
  --wall-veil: rgba(32, 32, 32, .34);
  --wall-tone: brightness(.62);
  --glass: rgba(42, 42, 42, .82);
  --glass-badge: rgba(32, 32, 32, .90);
  --btn-o-hover: #333338;
  --btn-k-hover: #DADAE0;
  --toggle-on-bg: #4A4A52;
  --toggle-on-ink: #F3F3F5;
  --toggle-off-ink: #A0A0AA;
  --focus: #F3F3F5;
  --sh-1: 0 0.0625rem 0.125rem rgba(0, 0, 0, .28);
  --sh-card: 0 0.0625rem 0.125rem rgba(0, 0, 0, .28), 0 0.25rem 0.5rem rgba(0, 0, 0, .22);
  --sh-bar: 0 0.0625rem 0.125rem rgba(0, 0, 0, .45);
  --sh-raise: 0 0.25rem 0.5rem rgba(0, 0, 0, .45);
  --sh-feature: 0 0.5rem 1rem rgba(0, 0, 0, .45);
  --sh-window: 0 2rem 4rem -0.75rem rgba(0, 0, 0, .55), 0 0.125rem 0.5rem rgba(0, 0, 0, .34), 0 0 0 1px rgba(0, 0, 0, .34);
  --sh-figure: 0 0.5rem 1rem rgba(0, 0, 0, .40), 0 0 0 1px rgba(0, 0, 0, .34);
  --sh-ring: 0 0 0 1px rgba(0, 0, 0, .34);
  --sh-toggle: 0 0.0625rem 0.125rem rgba(0, 0, 0, .45);
  --scroll-shade: rgba(0, 0, 0, .55);
}

/* No JS: follow the system setting (theme-init.js normally stamps data-theme before paint). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #202020;
    --surface: #2A2A2A;
    --surface-2: #262626;
    --stage: #262626;
    --app-bg: #1F1F1F;
    --fill: #333338;
    --line: #3A3A40;
    --line-2: #3A3A40;
    --line-strong: #4A4A52;
    --line-faint: #5A5A63;
    --ink: #F3F3F5;
    --ink-2: #C8C8D0;
    --ink-3: #A0A0AA;
    --ink-4: #888892;
    --teal: #26DDE3;
    --teal-soft: #1F4446;
    --link: #FF7AA2;
    --coral-soft: #3D2530;
    --coral-softer: #33242A;
    --green-soft: #1E3A2A;
    --green-ink: #6FD89A;
    --wall: #4A3C37;
    --wall-veil: rgba(32, 32, 32, .34);
    --wall-tone: brightness(.62);
    --glass: rgba(42, 42, 42, .82);
    --glass-badge: rgba(32, 32, 32, .90);
    --btn-o-hover: #333338;
    --btn-k-hover: #DADAE0;
    --toggle-on-bg: #4A4A52;
    --toggle-on-ink: #F3F3F5;
    --toggle-off-ink: #A0A0AA;
    --focus: #F3F3F5;
    --sh-1: 0 0.0625rem 0.125rem rgba(0, 0, 0, .28);
    --sh-card: 0 0.0625rem 0.125rem rgba(0, 0, 0, .28), 0 0.25rem 0.5rem rgba(0, 0, 0, .22);
    --sh-bar: 0 0.0625rem 0.125rem rgba(0, 0, 0, .45);
    --sh-raise: 0 0.25rem 0.5rem rgba(0, 0, 0, .45);
    --sh-feature: 0 0.5rem 1rem rgba(0, 0, 0, .45);
    --sh-window: 0 2rem 4rem -0.75rem rgba(0, 0, 0, .55), 0 0.125rem 0.5rem rgba(0, 0, 0, .34), 0 0 0 1px rgba(0, 0, 0, .34);
    --sh-figure: 0 0.5rem 1rem rgba(0, 0, 0, .40), 0 0 0 1px rgba(0, 0, 0, .34);
    --sh-ring: 0 0 0 1px rgba(0, 0, 0, .34);
    --sh-toggle: 0 0.0625rem 0.125rem rgba(0, 0, 0, .45);
    --scroll-shade: rgba(0, 0, 0, .55);
  }
}

@media (min-width: 768px) { :root { --gutter: 2rem; --section-gap: 6rem; } }
@media (min-width: 1024px) { :root { --gutter: 2.5rem; } }
@media (min-width: 1280px) { :root { --section-gap: 8rem; } }

/* ==========================================================================
   2. Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
/* scroll-padding keeps anchor targets and keyboard-focused controls clear of the fixed nav capsule */
html { font-size: 16px; scroll-padding-top: 5.5rem; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.625rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
  display: flex; flex-direction: column;
}
body > main { flex: 1 0 auto; }
img, svg { display: block; }
img { max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font-family: inherit; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 0.25rem; text-decoration-thickness: 1px; }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 0.125rem solid var(--focus);
  outline-offset: 0.1875rem;
}

.mono { font-family: var(--font-mono); font-variant-ligatures: none; font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: 0.75rem; top: 0.75rem; z-index: 100;
  padding: 0.625rem 1rem; border-radius: 999px;
  background: var(--ink); color: var(--bg); font-weight: 600; font-size: 0.9375rem; line-height: 1.25rem;
  transform: translateY(-150%);
}
.skip-link:focus { transform: none; text-decoration: none; }

/* breakpoint-only copy variants */
@media (max-width: 767.98px) { .only-md-up { display: none !important; } }
@media (min-width: 768px) { .only-sm { display: none !important; } }

/* ==========================================================================
   3. Layout
   ========================================================================== */
.container { width: min(var(--content), 100% - 2 * var(--gutter)); margin-inline: auto; }
.section { padding-bottom: var(--section-gap); }

.section-head { max-width: 46.0625rem; }
.h-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 110%;
  font-size: 2rem;
  line-height: 2.25rem;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-wrap: balance;
}
.lead { margin-top: 1rem; max-width: 38.75rem; font-size: 1.0625rem; line-height: 1.6875rem; color: var(--ink-2); text-wrap: pretty; }
.h-card {
  font-family: var(--font-display);
  font-weight: 650;
  font-stretch: 100%;
  font-size: 1.25rem;
  line-height: 1.625rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}
@media (min-width: 768px) {
  .section-head--center { margin-inline: auto; text-align: center; }
  .section-head--center .lead { margin-inline: auto; max-width: 40rem; text-wrap: balance; }
  .h-display { font-size: 2.75rem; line-height: 3rem; }
  .lead { margin-top: 1.25rem; font-size: 1.1875rem; line-height: 1.875rem; }
  .h-card { font-size: 1.375rem; line-height: 1.75rem; }
}
@media (min-width: 1280px) {
  .h-display { font-size: 3.5rem; line-height: 3.75rem; }
  .lead { font-size: 1.25rem; line-height: 2rem; }
}

/* ==========================================================================
   4. Components
   ========================================================================== */

/* ---- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem;
  height: 2.75rem; padding: 0 1.125rem;
  border: 0; border-radius: 999px;
  font-family: inherit; font-size: 0.9375rem; line-height: 1.25rem; font-weight: 600;
  white-space: nowrap; text-decoration: none; cursor: pointer;
}
.btn:hover { text-decoration: none; }
.btn svg { flex: none; }
.btn--lg > svg { width: 1.25rem; height: 1.25rem; }
.co-app__link > svg, .link-arrow > svg { width: 1rem; height: 1rem; }
.btn--coral { background: var(--coral); color: var(--on-coral); box-shadow: var(--sh-coral); }
.btn--coral:hover { background: var(--coral-hover); }
.btn--coral:active { background: var(--coral-press); }
.btn--deep { background: var(--coral-deep); color: var(--on-coral); }
.btn--deep:hover { background: var(--coral-deep-hover); }
.btn--outline { background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); }
.btn--outline:hover { background: var(--btn-o-hover); }
.btn--outline svg { fill: var(--ink-3); }
.btn--lg { height: 3.25rem; padding: 0 1.75rem; font-size: 1.1875rem; line-height: 1.5rem; font-weight: 700; }
.btn--sm { height: 2.5rem; }
.btn--block { display: flex; width: 100%; }
.btn--plan { font-size: 1.0625rem; line-height: 1.5rem; font-weight: 600; }
.btn--lg.btn--plan { font-weight: 600; }
.btn[aria-disabled="true"], .btn:disabled, .btn.is-disabled {
  background: var(--fill); color: var(--ink-3); box-shadow: none; border: 1px solid var(--line-strong);
  cursor: not-allowed;
}
@media (min-width: 768px) { .btn--lg { height: 3.5rem; } }
/* very narrow phones: let the big buttons wrap instead of clipping */
@media (max-width: 359.98px) {
  .btn--lg { height: auto; min-height: 3.25rem; padding: 0.5rem 1rem; gap: 0.5rem; white-space: normal; text-align: center; }
}

/* text link with an arrow ("See all plans") */
.link-arrow {
  display: inline-flex; align-items: center; gap: 0.375rem;
  font-size: 1.0625rem; line-height: 1.5rem; font-weight: 600; color: var(--ink);
}
.link-arrow svg { stroke: currentColor; }

/* ---- Chips / badges ------------------------------------------------------ */
.chip {
  display: inline-flex; align-items: center; height: 1.75rem; padding: 0 0.75rem;
  border-radius: 999px; background: var(--fill); color: var(--ink-2);
  font-size: 0.8125rem; line-height: 1.125rem; font-weight: 500; white-space: nowrap;
}
.chip--active { background: var(--coral-soft); color: var(--link); border: 1px solid var(--coral); }
.chip--teal { height: 1.5rem; padding: 0 0.625rem; background: var(--teal-soft); color: var(--teal); font-size: 0.75rem; line-height: 1rem; font-weight: 600; }
.badge-status {
  flex: none; display: inline-flex; align-items: center; height: 1.25rem; padding: 0 0.375rem; border-radius: 0.25rem;
  background: var(--green-soft); color: var(--green-ink);
  font-family: var(--font-mono); font-variant-ligatures: none; font-size: 0.625rem; line-height: 0.875rem; font-weight: 600; letter-spacing: 0;
}
@media (min-width: 768px) { .badge-status { padding: 0 0.4375rem; font-size: 0.6875rem; letter-spacing: .02em; } }

/* ---- Icons (currentColor or token fills) ------------------------------- */
.ico-teal { fill: var(--teal); }
.ico-muted { fill: var(--ink-3); }
.check { flex: none; width: 1.125rem; height: 1.125rem; margin-top: 0.1875rem; fill: var(--teal); }
.check-circle { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.1875rem; }
.check-circle circle { fill: var(--teal-soft); }
.check-circle path { fill: none; stroke: var(--teal); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* check lists */
.check-list { display: flex; flex-direction: column; gap: 0.625rem; }
.check-list li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 1rem; line-height: 1.5rem; color: var(--ink); text-wrap: pretty; }

/* ---- Theme toggle (sun | moon pill) ------------------------------------ */
.theme-toggle {
  display: flex; flex: none; width: 4.5rem; height: 2rem; padding: 0.1875rem;
  border-radius: 999px; background: var(--fill);
}
.theme-toggle button {
  flex: 1; display: flex; align-items: center; justify-content: center;
  border: 0; padding: 0; border-radius: 999px; background: transparent;
  color: var(--toggle-off-ink); cursor: pointer;
}
.theme-toggle button:hover { color: var(--ink); }
.theme-toggle svg { width: 0.875rem; height: 0.875rem; fill: currentColor; }
/* the pressed look follows the page theme itself, so it is right on first paint */
:root:not([data-theme="dark"]) .theme-toggle [data-theme-set="light"],
:root[data-theme="dark"] .theme-toggle [data-theme-set="dark"] {
  background: var(--toggle-on-bg); box-shadow: var(--sh-toggle); color: var(--toggle-on-ink);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .theme-toggle [data-theme-set="light"] { background: transparent; box-shadow: none; color: var(--toggle-off-ink); }
  :root:not([data-theme]) .theme-toggle [data-theme-set="dark"] { background: var(--toggle-on-bg); box-shadow: var(--sh-toggle); color: var(--toggle-on-ink); }
}
.theme-toggle--lg { width: 5.5rem; height: 2.75rem; padding: 0.25rem; }
.theme-toggle--lg button, .footer__meta .theme-toggle button { position: relative; }
.theme-toggle--lg button::after { content: ""; position: absolute; inset: -0.25rem -0.125rem; }
.nav--company > .theme-toggle button { position: relative; }
@media (max-width: 767.98px) {
  .footer__meta .theme-toggle button::after { content: ""; position: absolute; inset: -0.25rem -0.125rem; }
}
/* the toggles and the menu button need JS; hide them without it */
:root:not(.js) .theme-toggle, :root:not(.js) .theme-row, :root:not(.js) .nav__menu-btn { display: none; }

/* ---- Screenshot pair (light + dark shot taken at the same moment) ------ */
.shot { position: relative; display: block; overflow: hidden; }
.shot > img {
  position: absolute; left: -0.0625rem; top: -0.0625rem;
  width: calc(100% + 0.125rem); max-width: none; height: auto;
}
/* The other theme's copy is left out of the layout (display: none), so it is not downloaded: every shot <img> is
   loading="lazy" (the landing pages' hero shots are fetched early by the preload theme-init.js adds for the theme
   shown), and a lazy image with no layout box is never fetched. html.theme-warm (site.js: set when the pointer, a
   finger or focus reaches a theme toggle, when the phone menu opens, and before any theme change) lays both copies
   out again, the other one hidden, so it loads before the switch and the switch crossfades. The images are
   absolutely placed, so none of this moves anything */
.shot__dark { display: none; opacity: 0; visibility: hidden; }
:root[data-theme="dark"] .shot__light { display: none; visibility: hidden; }
:root[data-theme="dark"] .shot__dark { display: block; opacity: 1; visibility: visible; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .shot__light { display: none; visibility: hidden; }
  :root:not([data-theme]) .shot__dark { display: block; opacity: 1; visibility: visible; }
}
:root.theme-warm .shot__light, :root.theme-warm .shot__dark { display: block; }
/* A theme switch before the incoming copy has loaded keeps the outgoing copy drawn until the incoming one is ready
   (site.js hold(): data-hold names the outgoing theme), so a window never shows empty. The dark copy is drawn on
   top, so when it is the incoming one it waits at opacity 0 (no half-loaded image over the light one) */
.shot[data-hold="light"] > .shot__light, .shot[data-hold="dark"] > .shot__dark { display: block; visibility: visible; opacity: 1; }
.shot[data-hold="light"] > .shot__dark { opacity: 0; }
/* app window frame around a shot */
.window { border-radius: 0.625rem; box-shadow: var(--sh-window); background: var(--surface); }
/* frame aspect ratios (window size as drawn, 1px screenshot edge cropped) */
.shot--app { aspect-ratio: 960 / 627; }        /* full 1440x940 app window */
.shot--detail { aspect-ratio: 440 / 388; }     /* 840x740 drama detail window */
.shot--app-short { aspect-ratio: 765 / 392; }  /* app window, bottom trimmed (queue, library) */

/* ---- Blurred cover wallpaper panel -------------------------------------- */
.wall { position: relative; overflow: hidden; background: var(--wall); isolation: isolate; }
.wall__img {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; transform: scale(1.4);
  filter: blur(2.75rem) saturate(1.4) var(--wall-tone);
  z-index: -2;
}
.wall::before { content: ""; position: absolute; inset: 0; background: var(--wall-veil); z-index: -1; }
@media (min-width: 1024px) { .wall__img { filter: blur(3.5rem) saturate(1.4) var(--wall-tone); } }

/* ---- Card ----------------------------------------------------------------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 0.75rem; box-shadow: var(--sh-card); }

/* ---- Nav (floating capsule) ---------------------------------------------- */
.site-header { position: fixed; left: 0; right: 0; top: 0.75rem; z-index: 50; pointer-events: none; }
.nav {
  pointer-events: auto;
  position: relative;
  width: calc(100% - 1.5rem); margin-inline: auto;
  height: 3.25rem; padding: 0 0.25rem 0 0.875rem;
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  border-radius: 999px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(1.25rem) saturate(1.4);
  backdrop-filter: blur(1.25rem) saturate(1.4);
  border: 1px solid var(--line);
  box-shadow: var(--sh-raise);
}
.brand { display: flex; align-items: center; gap: 0.5rem; min-width: 0; color: var(--ink); text-decoration: none; }
.brand:hover { text-decoration: none; }
.nav .brand { min-height: 2.75rem; }
.brand img { flex: none; width: 1.5rem; height: 1.5rem; }
.brand__name {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 0.875rem; line-height: 1.125rem; font-weight: 600; letter-spacing: -0.005em;
}
.nav__links, .nav__end { display: none; }
.nav__links a { font-size: 0.9375rem; line-height: 1.25rem; font-weight: 500; color: var(--ink-2); }
.nav__links a:hover { color: var(--ink); }
.nav__end { align-items: center; gap: 0.75rem; justify-self: end; }
.nav__menu-btn {
  flex: none; display: inline-flex; align-items: center; gap: 0.375rem;
  height: 2.75rem; padding: 0 1rem; border: 0; border-radius: 999px;
  background: var(--fill); color: var(--ink);
  font-size: 0.9375rem; line-height: 1.25rem; font-weight: 600; cursor: pointer;
}
.nav__menu-btn svg { width: 1rem; height: 1rem; fill: currentColor; }
.nav__menu-btn .ico-close { display: none; }
.nav__menu-btn[aria-expanded="true"] .ico-open { display: none; }
.nav__menu-btn[aria-expanded="true"] .ico-close { display: block; }
/* Narrow phones: the longest brand name ("TikTok ShortDrama Downloader") must never truncate.
   Below 390 the Menu button goes icon-only; 390-409 keeps the label with a 13px name for headroom. */
@media (max-width: 409.98px) {
  .brand__name { font-size: 0.8125rem; }
}
@media (max-width: 389.98px) {
  .brand { gap: 0.375rem; }
  .nav__menu-btn { width: 2.75rem; padding: 0; justify-content: center; }
  .nav__menu-btn .nav__menu-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
@media (max-width: 359.98px) {
  .nav { padding-left: 0.75rem; }
}
@media (min-width: 768px) {
  .site-header { top: 1rem; }
  .nav { width: calc(100% - 2 * var(--gutter)); }
}
@media (min-width: 1280px) {
  .nav {
    width: min(75rem, 100% - 2 * var(--gutter) - 5rem);
    height: 3.75rem; padding: 0 0.625rem 0 1.25rem;
    display: grid; grid-template-columns: 1fr auto 1fr;
  }
  .brand { gap: 0.625rem; justify-self: start; }
  .brand img { width: 1.75rem; height: 1.75rem; }
  .brand__name { font-size: 1rem; line-height: 1.25rem; }
  .nav__links { display: flex; align-items: center; gap: 1.75rem; }
  .nav__end { display: flex; }
  .nav__menu-btn { display: none; }
}

/* mobile menu panel (under the capsule) */
.menu {
  pointer-events: auto;
  width: calc(100% - 1.5rem); margin: 0.5rem auto 0;
  max-height: calc(100vh - 5.5rem); overflow-y: auto; overscroll-behavior: contain;
  padding: 0.5rem; border-radius: 1.25rem;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-raise);
}
.menu[hidden] { display: none; }
.menu__links a {
  display: flex; align-items: center; min-height: 3rem; padding: 0 1rem; border-radius: 0.75rem;
  font-size: 1rem; line-height: 1.375rem; font-weight: 600; color: var(--ink);
}
.menu__links a:hover { background: var(--fill); text-decoration: none; }
.menu__foot { margin-top: 0.5rem; padding: 0.75rem 0.5rem 0.5rem; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 0.75rem; }
.theme-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.theme-row__label { font-size: 0.8125rem; line-height: 1.25rem; font-weight: 500; color: var(--ink-3); }
@media (min-width: 768px) { .menu { width: min(26.25rem, 100% - 2 * var(--gutter)); margin-right: var(--gutter); } }
@media (min-width: 1280px) { .menu { display: none !important; } }

/* ---- FAQ (native disclosure) --------------------------------------------- */
.faq-list { background: var(--surface); border: 1px solid var(--line); border-radius: 0.75rem; box-shadow: var(--sh-card); }
.faq-item { padding: 0.75rem 1.25rem; }
.faq-item + .faq-item { border-top: 1px solid var(--line); }
.faq-item > summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  min-height: 3rem; cursor: pointer;
  font-size: 1.0625rem; line-height: 1.5rem; font-weight: 600; color: var(--ink);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::marker { content: ""; }
.faq-item > summary svg { flex: none; width: 1rem; height: 1rem; fill: var(--ink-3); }
.faq-item[open] > summary svg { fill: var(--ink); transform: rotate(180deg); }
.faq-item > p { margin: 0.375rem 0 0.5rem; max-width: 38.75rem; font-size: 1rem; line-height: 1.625rem; color: var(--ink-2); text-wrap: pretty; }
@media (max-width: 767.98px) {
  .faq-item:first-child { padding: 1.25rem 1.25rem 0.75rem; }
  .faq-item:first-child > summary { min-height: 2.75rem; }
}
@media (min-width: 768px) {
  .faq-item { padding: 1.5rem 1.75rem; }
  .faq-item > summary { min-height: 0; gap: 1rem; font-size: 1.125rem; line-height: 1.625rem; }
  .faq-item > p { margin: 0.625rem 0 0; }
}

/* ---- Footer ---------------------------------------------------------------- */
.site-footer { padding: 3rem 0 2rem; background: var(--surface); border-top: 1px solid var(--line); }
.footer__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1rem; }
.footer__brand { grid-column: 1 / -1; margin-bottom: 0.25rem; }
.footer__brand .brand { gap: 0.625rem; }
@media (max-width: 767.98px) { .footer__brand .brand { min-height: 2.75rem; } }
.footer__brand .brand img { width: 1.75rem; height: 1.75rem; }
.footer__brand .brand__name { font-size: 1rem; line-height: 1.25rem; white-space: normal; overflow: visible; }
.footer__by { margin-top: 0.75rem; font-size: 0.875rem; line-height: 1.375rem; color: var(--ink-3); }
.footer__by a { color: var(--ink-3); }
.footer__label { font-size: 0.8125rem; line-height: 1.125rem; font-weight: 600; color: var(--ink-3); }
.footer__col ul { margin-top: 0.5rem; font-size: 0.9375rem; line-height: 1.25rem; }
.footer__col a { display: block; padding: 0.75rem 0; color: var(--ink-2); overflow-wrap: anywhere; }
.footer__col a:hover { color: var(--ink); }
.footer__col--support { grid-column: 1 / -1; }
.footer__col--product { order: 1; }
.footer__col--legal { order: 2; }
.footer__col--support { order: 3; }
.footer__bottom { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.footer__note { font-size: 0.8125rem; line-height: 1.25rem; color: var(--ink-3); }
.footer__meta { margin-top: 1rem; display: flex; flex-direction: column; gap: 1.25rem; }
.footer__copy { font-family: var(--font-mono); font-variant-ligatures: none; font-variant-numeric: tabular-nums; font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: var(--ink-3); }
.footer__meta .theme-toggle { width: 5.5rem; height: 2.75rem; padding: 0.25rem; }
@media (min-width: 768px) {
  .footer__col--support { grid-column: auto; }
  .footer__col--product, .footer__col--support, .footer__col--legal { order: 0; }
  .footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; flex-wrap: wrap; margin-top: 3rem; }
  .footer__meta { margin-top: 0; flex-direction: row; align-items: center; gap: 1rem; }
  .footer__meta .theme-row__label { display: none; }
  .footer__meta .theme-toggle { width: 4.5rem; height: 2rem; padding: 0.1875rem; }
}
@media (min-width: 768px) {
  .footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr); column-gap: 1.5rem; }
}
@media (min-width: 1024px) {
  .footer__grid { gap: 2rem 2.25rem; }
}
@media (min-width: 1280px) {
  .site-footer { padding: 4rem 0 2rem; }
  .footer__grid { grid-template-columns: minmax(0, 18.75rem) 10.5rem 16.75rem 8.5rem; column-gap: 2.25rem; }
  .footer__brand { grid-column: auto; margin: 0; }
  .footer__by { margin-top: 0.875rem; }
  .footer__col ul { margin-top: 0.75rem; line-height: 1.75rem; }
  .footer__col a { display: inline; padding: 0; }
  .footer__bottom { margin-top: 3.5rem; flex-wrap: nowrap; }
}

/* ---- Simple text page shell (legal pages, download, 404) ---------------- */
.page { padding: 6rem 0 var(--section-gap); }
.page__head { max-width: 46.0625rem; }
.page__kicker { font-family: var(--font-mono); font-variant-ligatures: none; font-size: 0.8125rem; line-height: 1.125rem; font-weight: 600; color: var(--teal); }
.page__title {
  margin-top: 0.75rem;
  font-family: var(--font-display); font-weight: 700; font-stretch: 110%;
  font-size: 2.25rem; line-height: 2.5rem; letter-spacing: -0.03em; color: var(--ink); text-wrap: balance;
}
.page__meta { margin-top: 0.75rem; font-family: var(--font-mono); font-variant-ligatures: none; font-size: 0.8125rem; line-height: 1.25rem; font-weight: 500; color: var(--ink-3); }
.page__lead { margin-top: 1rem; font-size: 1.0625rem; line-height: 1.6875rem; color: var(--ink-2); max-width: 40rem; }
.page__body { margin-top: 2rem; max-width: 47.5rem; padding: 1.5rem; }
.page__aside { display: none; }
@media (min-width: 1024px) {
  .page__grid { margin-top: 3rem; display: grid; grid-template-columns: minmax(0, 47.5rem) minmax(0, 1fr); gap: 2rem; align-items: start; }
  .page__grid > .page__body { margin-top: 0; }
  .page__aside { display: block; position: sticky; top: 6.5rem; aspect-ratio: 4 / 5; border-radius: 0.75rem; border: 1px solid var(--line); box-shadow: var(--sh-card); }
  .dl-visual__shot { position: absolute; left: 2rem; top: 2rem; width: 56.25rem; }
}
.page__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; }
.page__actions + .prose, .page__actions + * { margin-top: 2rem; }
.page__note { font-family: var(--font-mono); font-variant-ligatures: none; font-size: 0.8125rem; line-height: 1.25rem; font-weight: 500; color: var(--ink-3); }
.prose { font-size: 1rem; line-height: 1.625rem; color: var(--ink-2); }
.prose > * + * { margin-top: 0.875rem; }
.prose h2 { margin-top: 2.25rem; font-family: var(--font-display); font-weight: 650; font-size: 1.375rem; line-height: 1.75rem; letter-spacing: -0.01em; color: var(--ink); }
.prose h3 { margin-top: 1.5rem; font-size: 1.0625rem; line-height: 1.5rem; font-weight: 600; color: var(--ink); }
.prose > h2:first-child, .prose > h3:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.375rem; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: 0.375rem; }
.prose li::marker { color: var(--ink-3); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { font-weight: 500; text-decoration: underline; text-underline-offset: 0.1875rem; text-decoration-thickness: 1px; }
.prose code { font-family: var(--font-mono); font-size: 0.875rem; padding: 0.0625rem 0.375rem; border-radius: 0.375rem; background: var(--fill); color: var(--ink); }
.prose hr { border: 0; height: 1px; background: var(--line); margin: 1.75rem 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.375rem; }
.prose th, .prose td { text-align: left; padding: 0.625rem 0.75rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { color: var(--ink); font-weight: 600; }
/* a table wider than its column scrolls sideways (a guide table also shows an edge shadow: section 10) */
.table-scroll { overflow-x: auto; }
@media (min-width: 768px) {
  .page { padding-top: 8.5rem; }
  .page__title { font-size: 3rem; line-height: 3.25rem; }
  .page__body { padding: 2.5rem; }
}
@media (min-width: 1280px) {
  .page { padding-top: 9.75rem; }
  .page__title { font-size: 3.5rem; line-height: 3.75rem; }
  .page__lead { font-size: 1.25rem; line-height: 2rem; margin-top: 1.25rem; }
  .page__body { margin-top: 3rem; padding: 3rem 3.5rem; }
}

/* ==========================================================================
   5. Landing page sections
   ========================================================================== */

/* ---- Hero ------------------------------------------------------------------- */
.hero {
  display: grid;
  grid-template-columns: [full-start] minmax(var(--gutter), 1fr) [content-start] minmax(0, var(--content)) [content-end] minmax(var(--gutter), 1fr) [full-end];
  padding-top: 6rem;
  overflow-x: clip;
}
.hero > * { grid-column: content; min-width: 0; }
.hero-pill {
  justify-self: start; max-width: 100%;
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 2.25rem; padding: 0.25rem 0.75rem 0.25rem 0.25rem;
  border-radius: 999px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1);
  color: var(--ink);
}
.hero-pill:hover { text-decoration: none; }
.hero-pill { position: relative; }
.hero-pill::after { content: ""; position: absolute; left: 0; right: 0; top: -0.25rem; bottom: -0.25rem; }
.hero-pill__badge {
  flex: none; display: inline-flex; align-items: center; height: 1.625rem; padding: 0 0.5625rem; border-radius: 999px;
  background: var(--coral-deep); color: var(--on-coral);
  font-family: var(--font-mono); font-variant-ligatures: none; font-size: 0.75rem; line-height: 1rem; font-weight: 700; letter-spacing: .06em;
}
.hero-pill__main { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; color: var(--ink); }
.hero-pill__rule { display: none; width: 1px; height: 1rem; background: var(--line-strong); }
.hero-pill__sub { display: none; font-size: 0.9375rem; line-height: 1.25rem; font-weight: 500; color: var(--ink-2); }
.hero-pill svg { flex: none; width: 0.875rem; height: 0.875rem; stroke: var(--ink-3); }
.hero__title {
  margin-top: 1.25rem;
  font-family: var(--font-display); font-weight: 750; font-stretch: 100%;
  font-size: clamp(1.875rem, 9.3vw, 2.625rem); line-height: 1; letter-spacing: -0.03em; color: var(--ink);
}
.hero__text { margin-top: 1.25rem; }
.hero__lead { font-size: 1.0625rem; line-height: 1.6875rem; color: var(--ink-2); text-wrap: pretty; }
.hero__cta { margin-top: 1.75rem; }
.hero__cta .btn { display: flex; width: 100%; }
.hero__plans { margin-top: 0.375rem; height: 2.75rem; }
.hero__points { margin-top: 1.25rem; gap: 0.375rem; }
.hero__points li { gap: 0.625rem; }
.hero__points .check { width: 1.25rem; height: 1.25rem; margin-top: 0.125rem; }
.hero__meta { margin-top: 0.375rem; font-family: var(--font-mono); font-variant-ligatures: none; font-variant-numeric: tabular-nums; font-size: 0.75rem; line-height: 1.125rem; font-weight: 500; color: var(--ink-3); }
@media (max-width: 389.98px) { .hero__meta .nowrap, .cta-card__meta .nowrap { white-space: normal; } }
/* phones: the first four points in a tighter list, so the app screenshot still starts on the first screen
   (the other two are repeated under Two sources and Features) */
@media (max-width: 767.98px) {
  .hero__points { gap: 0.25rem; }
  .hero__points li { font-size: 0.9375rem; line-height: 1.375rem; }
  .hero__points .check { margin-top: 0.0625rem; }
  .hero__points li:nth-child(n+5) { display: none; }
}
/* tablets: the six points in two columns of three (read down), wider than the lead, so the app screenshot
   still starts high on the first screen */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .hero__points {
    display: grid; grid-template-rows: repeat(3, auto); grid-auto-flow: column; column-gap: 1.5rem;
    width: max-content; max-width: calc(100vw - 2 * var(--gutter));
  }
}
.hero__visual { grid-column: full; margin-top: 2.25rem; height: clamp(18.75rem, 76.92vw, 27.5rem); }
.hero__browse { position: absolute; left: 1.5rem; top: 1.75rem; width: clamp(32.5rem, 133.33%, 62.5rem); }
.hero__detail { display: none; }
@media (min-width: 768px) {
  .hero { padding-top: 7.75rem; }
  .hero-pill { gap: 0.625rem; }
  .hero-pill__badge { padding: 0 0.625rem; }
  .hero-pill__main { font-size: 0.9375rem; }
  .hero-pill__rule, .hero-pill__sub { display: block; }
  .hero__title { font-size: clamp(3.5rem, 6.667vw, 6rem); line-height: .958; letter-spacing: -0.04em; font-stretch: 112%; }
  .hero__text { max-width: 35rem; margin-top: 2rem; }
  .hero__lead { font-size: 1.25rem; line-height: 2rem; }
  .hero__cta { margin-top: 2rem; }
  .hero__cta .btn { display: inline-flex; width: auto; }
  .hero__plans { margin-top: 1rem; height: auto; }
  .hero__points { margin-top: 1.5rem; }
  .hero__points li { font-size: 1.0625rem; line-height: 1.625rem; }
  .hero__points .check { margin-top: 0.1875rem; }
  .hero__meta { margin-top: 1.25rem; font-size: 0.8125rem; line-height: 1.25rem; }
  .hero__visual { margin-top: 3rem; height: 28.75rem; }
  .hero__browse { left: var(--gutter); top: 2.5rem; width: 56.25rem; }
}
@media (min-width: 1024px) {
  .hero { padding-bottom: 2.5rem; }
  .hero-pill { grid-row: 1; height: 2.25rem; padding-block: 0; }
  .hero__title { grid-row: 2; }
  /* Hero geometry, set once. --hero-win is the app window's width (it grows above 1920, section 9). The wall panel
     shows the window from 4.5rem in, down to 588/960 of its width. The detail window is 440/960 of the app window
     wide, starts --hero-detail-x from the column edge and 8.25rem + 260/960 of the window down. The points stop
     0.625rem short of the detail window, so no point is ever hidden under it. */
  .hero { --hero-win: 60rem; --hero-detail-x: 22.5rem; }
  .hero__text { grid-row: 3; width: 25rem; margin-top: 3.75rem; }
  .hero__points { max-width: calc(var(--hero-detail-x) - 0.625rem); }
  .hero__visual {
    grid-row: 3; grid-column: content-start / full-end;
    margin: 3.75rem 0 0 27.5rem; height: calc(4.5rem + var(--hero-win) * 588 / 960); border-radius: 0.75rem 0 0 0.75rem;
  }
  .hero__browse { left: 4.5rem; top: 4.5rem; width: var(--hero-win); }
  .hero__detail {
    display: block; grid-row: 3; position: relative; z-index: 2;
    justify-self: start; align-self: start;
    width: calc(var(--hero-win) * 440 / 960);
    margin: calc(8.25rem + var(--hero-win) * 260 / 960) 0 0 var(--hero-detail-x);
  }
}

/* ---- Trust bar -------------------------------------------------------------- */
.trust { padding-top: 2rem; }
.trust__list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  background: var(--surface); border: 1px solid var(--line); border-radius: 0.75rem; box-shadow: var(--sh-bar); overflow: hidden;
}
.trust__list li { display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--ink-2); }
.trust__list svg { flex: none; width: 1.125rem; height: 1.125rem; fill: var(--teal); }
.trust__list li:nth-child(even) { border-left: 1px solid var(--line); }
.trust__list li:nth-child(n+3) { border-top: 1px solid var(--line); }
.trust__list li:last-child { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 0.625rem; }
@media (max-width: 359.98px) { .trust__list .nowrap { white-space: normal; } }
@media (min-width: 768px) { .trust { padding-top: 2.5rem; } }
@media (min-width: 1024px) {
  .trust__list { grid-template-columns: repeat(5, minmax(0, 1fr)); min-height: 5.5rem; }
  .trust__list li, .trust__list li:last-child {
    grid-column: auto; flex-direction: row; align-items: center; justify-content: center; gap: 0.625rem;
    padding: 0.75rem 1.5rem; border-top: 0;
  }
  .trust__list li + li { border-left: 1px solid var(--line); }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .trust__list li, .trust__list li:last-child { padding: 0.75rem 1rem; }
}

/* ---- Showcase tour ---------------------------------------------------------- */
.showcase { padding-block: var(--section-gap); }
.tour { margin-top: 2.5rem; display: grid; grid-template-columns: minmax(0, 1fr); }
.tour__rail { position: relative; display: flex; flex-direction: column; gap: 1.5rem; padding-left: 1.1875rem; }
.tour__rail::before { content: ""; position: absolute; left: calc(0.09375rem - 0.5px); top: 0.25rem; bottom: 0.25rem; width: 1px; background: var(--line-2); }
.tour__step {
  position: relative; display: block; width: 100%; max-width: 23.75rem;
  padding: 0; border: 0; background: transparent; text-align: left; font: inherit; color: inherit; cursor: pointer;
  border-radius: 0.25rem;
}
.tour__step::before {
  content: ""; position: absolute; left: -1.1875rem; top: 1.75rem; width: 0.1875rem; height: 1.125rem; border-radius: 0.125rem;
  background: var(--coral); opacity: 0;
}
.tour__step[aria-selected="true"]::before { opacity: 1; }
.tour__label { display: block; font-family: var(--font-mono); font-variant-ligatures: none; font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: var(--ink-3); }
.tour__step[aria-selected="true"] .tour__label { font-weight: 600; color: var(--link); }
.tour__title {
  display: block; margin-top: 0.5rem;
  font-family: var(--font-display); font-weight: 650; font-stretch: 100%;
  font-size: 1.25rem; line-height: 1.625rem; letter-spacing: -0.01em; color: var(--ink-4); text-wrap: balance;
}
.tour__step:hover .tour__title { color: var(--ink-2); }
.tour__step[aria-selected="true"] .tour__title { color: var(--ink); }
.tour__desc { display: none; margin-top: 0.5rem; max-width: 22.5rem; font-size: 1rem; line-height: 1.625rem; color: var(--ink-2); text-wrap: pretty; }
.tour__step[aria-selected="true"] .tour__desc { display: block; }
@media (max-width: 767.98px) {
  .tour__rail { padding-left: 0; }
  .tour__rail::before, .tour__step::before { display: none; }
  .tour__label { display: flex; align-items: center; gap: 0.625rem; }
  .tour__label::before { content: ""; flex: none; width: 0.1875rem; height: 1.125rem; border-radius: 0.125rem; background: var(--line-2); }
  .tour__step[aria-selected="true"] .tour__label { font-weight: 500; color: var(--ink-3); }
  .tour__step[aria-selected="true"] .tour__label::before { background: var(--coral); }
}

/* stage: small screens = one framed crop, md+ = the grey stage with a centred window */
.tour__stage { margin-top: 1.5rem; padding: 0.75rem; border-radius: 0.75rem; background: var(--stage); border: 1px solid var(--line); }
.tour__frame { position: relative; aspect-ratio: 324 / 216; border-radius: 0.5rem; overflow: hidden; box-shadow: var(--sh-figure); background: var(--surface); }
.tour__stage[data-active="pick"] .tour__frame { aspect-ratio: 324 / 285; }
.tour__shot { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
.tour__shot.is-active { opacity: 1; visibility: visible; }
.tour__frame > .tour__shot:not(.is-active) > img { visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .tour__shot { transition: opacity 200ms var(--theme-ease), visibility 200ms var(--theme-ease); }
  .tour__shot > img { transition: visibility 200ms var(--theme-ease); }
}
/* mobile crops (percent of the frame) */
.tour__shot--browse > img { width: 200%; left: -35.56%; top: -11.67%; }
.tour__shot--pick > img { width: 142.37%; left: -40.68%; top: -30.83%; }
.tour__shot--queue > img { width: 235.3%; left: -41.83%; top: -12.74%; }
.tour__shot--library > img { width: 240%; left: -42.67%; top: -13%; }

.tour__thumbs { margin-top: 2rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 0.5rem; }
.tour__thumb { display: block; padding: 0; border: 0; background: transparent; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.tour__thumb-img { aspect-ratio: 196 / 131; border-radius: 0.5rem; box-shadow: 0 0 0 1px var(--line); background: var(--surface); }
.tour__thumb.is-active .tour__thumb-img { box-shadow: 0 0 0 0.125rem var(--coral); }
.tour__thumb:hover .tour__thumb-img { box-shadow: 0 0 0 1px var(--line-strong); }
.tour__thumb.is-active:hover .tour__thumb-img { box-shadow: 0 0 0 0.125rem var(--coral); }
.tour__thumb-label { display: block; margin-top: 0.5rem; font-family: var(--font-mono); font-variant-ligatures: none; font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: var(--ink-3); }
.tour__thumb.is-active .tour__thumb-label { font-weight: 600; color: var(--ink); }
.tour__thumb--browse .shot > img { width: 200%; left: -35.56%; top: -11.63%; }
.tour__thumb--pick .shot > img { width: 142.37%; left: -40.68%; top: -40.57%; }
.tour__thumb--queue .shot > img { width: 235.3%; left: -41.83%; top: -12.71%; }
.tour__thumb--library .shot > img { width: 240%; left: -42.67%; top: -12.97%; }

@media (min-width: 768px) {
  .tour { margin-top: 3rem; }
  .tour__label { font-size: 0.8125rem; line-height: 1.125rem; }
  .tour__title { margin-top: 0.375rem; font-size: 1.375rem; line-height: 1.75rem; }
  .tour__step::before { top: 1.8125rem; }
  .tour__desc { margin-top: 0.625rem; }
  .tour__stage { margin-top: 2rem; padding: 0; position: relative; aspect-ratio: 845 / 620; overflow: hidden; }
  .tour__frame, .tour__stage[data-active="pick"] .tour__frame { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; overflow: visible; box-shadow: none; background: none; }
  .tour__shot {
    inset: auto; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 90.75%; border-radius: 0.625rem; box-shadow: var(--sh-window); background: var(--surface);
  }
  .tour__shot > img, .tour__shot--browse > img, .tour__shot--pick > img, .tour__shot--queue > img, .tour__shot--library > img {
    left: -0.0625rem; top: -0.0625rem; width: calc(100% + 0.125rem);
  }
  .tour__shot--browse { aspect-ratio: 765 / 499; }
  .tour__shot--pick { width: 67.33%; aspect-ratio: 440 / 388; }
  .tour__shot--queue, .tour__shot--library { aspect-ratio: 765 / 392; }
  .tour__thumbs { margin-top: 1rem; grid-template-columns: repeat(4, minmax(0, 12.25rem)); justify-content: space-between; gap: 0.75rem; }
}
@media (min-width: 1024px) {
  .tour { margin-top: 4rem; grid-template-columns: minmax(0, 411fr) minmax(0, 845fr); column-gap: 1.5rem; }
  .tour__rail { grid-row: 1; grid-column: 1; justify-content: space-between; gap: 2.5rem; }
  .tour__stage { grid-row: 1; grid-column: 2; margin-top: 0; }
  .tour__thumbs { grid-row: 2; grid-column: 2; }
}

/* ---- Features bento --------------------------------------------------------- */
.bento { margin-top: 2rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem 1rem; }
.bento__card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 1.5rem; overflow: hidden; }
.bento__card--wide { grid-column: 1 / -1; }
.bento__text { margin-top: 0.5rem; font-size: 0.9375rem; line-height: 1.375rem; color: var(--ink-2); text-wrap: pretty; }
.bento__demo { margin-top: 1.25rem; }
.bento__card--lib { order: 1; min-height: 18.25rem; }
.bento__card--stat, .bento__card--quality { order: 2; padding: 1.25rem; }
.bento__card--catalog, .bento__card--search { order: 3; }
@media (max-width: 359.98px) { .bento__card--stat, .bento__card--quality { grid-column: 1 / -1; } }
/* C1 episode picker */
.picker__drama { display: flex; align-items: center; gap: 0.75rem; }
.picker__drama img { flex: none; width: 2.5rem; height: 3.75rem; border-radius: 0.375rem; object-fit: cover; }
.picker__name { font-size: 0.9375rem; line-height: 1.25rem; font-weight: 600; color: var(--ink); }
.picker__meta { margin-top: 0.25rem; font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: var(--ink-3); }
.picker__controls { margin-top: 1rem; display: flex; align-items: center; gap: 0.5rem; }
.ctl {
  display: inline-flex; align-items: center; height: 2.5rem; padding: 0 1rem; border-radius: 0.5rem;
  background: var(--surface); border: 1px solid var(--line-strong); font-size: 0.9375rem; font-weight: 600; color: var(--ink);
}
.ctl--sm { display: none; padding: 0 0.875rem; }
.ctl--input {
  flex: 1; min-width: 0; padding: 0 0.875rem; background: var(--surface-2);
  font-family: var(--font-mono); font-variant-ligatures: none; font-size: 0.875rem; font-weight: 500;
}
.picker__grid { margin-top: 1rem; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.375rem; }
.ep {
  display: flex; align-items: center; justify-content: center; height: 2.5rem; border-radius: 0.5rem;
  background: var(--fill); color: var(--ink-2);
  font-family: var(--font-mono); font-variant-ligatures: none; font-variant-numeric: tabular-nums; font-size: 0.9375rem; font-weight: 600;
}
.ep--on { background: var(--coral-deep); color: var(--on-coral); }
.picker__grid .ep:nth-child(n+31) { display: none; }
.picker__foot { margin-top: 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.picker__count { font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: var(--ink-3); }
.pill-deep {
  display: inline-flex; align-items: center; gap: 0.375rem; height: 2.5rem; padding: 0 1rem; border-radius: 999px;
  background: var(--coral-deep); color: var(--on-coral); font-size: 0.9375rem; line-height: 1.25rem; font-weight: 600; white-space: nowrap;
}
.pill-deep svg { width: 0.875rem; height: 0.875rem; fill: currentColor; }
.pill-deep--sm { height: 2rem; padding: 0 0.875rem; font-size: 0.8125rem; line-height: 1.125rem; }
/* C2 queue rows */
.qlist { display: flex; flex-direction: column; gap: 0.5rem; }
.qrow {
  display: flex; align-items: center; gap: 0.625rem; height: 4rem; padding: 0 0.75rem 0 0.5rem;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 0.5rem;
}
.qrow img { flex: none; width: 2.25rem; height: 3.375rem; border-radius: 0.375rem; object-fit: cover; }
.qrow__body { flex: 1; min-width: 0; }
.qrow__top { display: flex; align-items: center; justify-content: space-between; gap: 0.375rem; }
.qrow__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8125rem; line-height: 1.125rem; font-weight: 600; color: var(--ink); }
.qrow__meta { margin-top: 0.125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: var(--ink-3); }
.progress { margin-top: 0.375rem; height: 0.3125rem; border-radius: 0.1875rem; background: var(--fill); overflow: hidden; }
.progress__bar { display: block; height: 0.3125rem; border-radius: 0.1875rem; background: var(--green); }
.progress__bar--100 { width: 100%; }
.progress__bar--18 { width: 18%; }
/* C3 stat */
.stat-block { margin-top: auto; padding-top: 1rem; }
.stat {
  font-family: var(--font-mono); font-variant-ligatures: none; font-variant-numeric: tabular-nums;
  font-size: 4rem; line-height: 4rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ink);
}
.stat-kicker { margin-top: 0.25rem; font-family: var(--font-mono); font-variant-ligatures: none; font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: var(--teal); }
.stat-text { margin-top: 0.75rem; font-size: 0.9375rem; line-height: 1.375rem; color: var(--ink-2); text-wrap: pretty; }
/* C4 quality radios */
.opt-label { font-size: 0.8125rem; line-height: 1.125rem; color: var(--ink-3); }
.opt-row { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
.opt { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9375rem; line-height: 1.25rem; font-weight: 500; color: var(--ink-2); }
.opt::before { content: ""; flex: none; width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 0.09375rem solid var(--ink-3); }
.opt--on { color: var(--ink); }
.opt--on::before { border: 0.125rem solid var(--coral); background: radial-gradient(circle, var(--coral) 0 0.28125rem, transparent 0.34375rem); }
.opt-extra { display: none; }
.subs-chip { display: inline-flex; align-items: center; gap: 0.375rem; height: 1.75rem; padding: 0 0.75rem; border-radius: 999px; background: var(--fill); font-size: 0.8125rem; line-height: 1.125rem; font-weight: 500; color: var(--ink-2); }
.subs-chip .mono { font-size: 0.75rem; }
/* C5 library crop */
.lib-shot {
  margin-top: auto; width: 100%; aspect-ratio: 300 / 132;
  border-radius: 0.5rem 0.5rem 0 0; box-shadow: 0 0 0 1px var(--line);
}
.lib-shot > img { width: 240%; left: -42.67%; top: -19.7%; }
.bento__card--lib .bento__text { margin-bottom: 1.25rem; }
.bento__card--lib .lib-shot { margin-bottom: -1.5rem; }
/* C6 catalog */
.shelves {
  display: flex; gap: 0.875rem; white-space: nowrap; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 1.5rem), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 1.5rem), transparent);
}
.shelves span { position: relative; padding-bottom: 0.6875rem; font-size: 0.875rem; line-height: 1.125rem; font-weight: 600; color: var(--ink-3); }
.shelves .is-on { color: var(--ink); }
.shelves .is-on::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 1rem; height: 0.1875rem; margin-left: -0.5rem; border-radius: 0.125rem; background: var(--coral); }
.chip-row { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
/* C7 search */
.search-field {
  display: flex; align-items: center; gap: 0.625rem; height: 2.5rem; padding: 0 0.75rem; border-radius: 0.5rem;
  background: var(--surface-2); border: 1px solid var(--line-strong); font-size: 0.9375rem; line-height: 1.25rem; color: var(--ink);
}
.search-field svg { flex: none; width: 1rem; height: 1rem; fill: var(--ink-3); }
.search-foot { margin-top: 0.75rem; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.search-count { font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: var(--ink-3); }

@media (min-width: 768px) {
  .bento { margin-top: 3rem; gap: 1rem; }
  .bento__card, .bento__card--stat, .bento__card--quality { padding: 1.75rem; }
  .bento__card--catalog, .bento__card--search { grid-column: auto; }
  .ctl--sm { display: inline-flex; }
  .picker__drama { gap: 0.875rem; }
  .picker__drama img { width: 2.75rem; height: 4.125rem; }
  .picker__controls { margin-top: 1.25rem; }
  .picker__grid { margin-top: 1.25rem; grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .picker__grid .ep:nth-child(n+31) { display: flex; }
  .picker__foot { margin-top: 1.5rem; }
  .picker__count { font-size: 0.8125rem; line-height: 1.125rem; }
  .pill-deep { padding: 0 1.125rem; }
  .pill-deep--sm { padding: 0 0.875rem; }
  .qrow { gap: 0.75rem; padding: 0 0.875rem 0 0.625rem; }
  .qrow__top { gap: 0.5rem; }
  .qrow__title { font-size: 0.875rem; }
  .stat { font-size: 5.5rem; line-height: 5.5rem; }
  .stat-kicker { margin-top: 0.125rem; font-size: 0.8125rem; line-height: 1.125rem; }
  .opt-row { flex-direction: row; gap: 1rem; }
  .opt-extra { display: block; }
  .opt-extra--codec { margin-top: 1.125rem; }
  .opt-extra--subs { margin-top: 1.25rem; }
  .lib-shot { aspect-ratio: 576 / 162; }
  .lib-shot > img { width: 179.1%; left: -31.84%; top: -23%; }
  .bento__card--lib .lib-shot { margin-bottom: -1.75rem; }
  .bento__card--lib { min-height: 18.75rem; }
  .shelves { gap: 1.375rem; }
  .shelves span { font-size: 0.8125rem; }
}
@media (max-width: 767.98px) {
  /* the half-width stat and quality cards keep only their demos on phones; the text stays for screen readers */
  .stat-text, .bento__card--quality .bento__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (min-width: 1280px) {
  /* the middle row (stat + quality) grows if its text needs more room, so nothing is clipped */
  .bento { margin-top: 3.5rem; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: 18.75rem minmax(18.75rem, auto) 18.75rem; }
  .bento__card { order: 0 !important; }
  .bento__card--pick { grid-column: 1 / span 2; grid-row: 1 / span 2; }
  .bento__card--queue { grid-column: 3 / span 2; grid-row: 1; }
  .bento__card--stat { grid-column: 3; grid-row: 2; }
  .bento__card--quality { grid-column: 4; grid-row: 2; }
  .bento__card--lib { grid-column: 1 / span 2; grid-row: 3; min-height: 0; }
  .bento__card--catalog { grid-column: 3; grid-row: 3; }
  .bento__card--search { grid-column: 4; grid-row: 3; }
  .bento__demo, .bento__card--queue .qlist { margin-top: auto; }
  .bento__card--pick .bento__demo { width: 100%; }
  .bento__card--lib .lib-shot { width: 36rem; max-width: 100%; }
}

/* ---- How it works ------------------------------------------------------------ */
.how__steps { margin-top: 2rem; background: var(--surface); border: 1px solid var(--line); border-radius: 0.75rem; box-shadow: var(--sh-bar); }
.how__step { display: flex; flex-direction: column; padding: 1.5rem; }
.how__step + .how__step { border-top: 1px solid var(--line); }
.how__num {
  display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.375rem; border-radius: 0.5rem;
  background: var(--coral); color: var(--on-coral);
  font-family: var(--font-mono); font-variant-ligatures: none; font-size: 1.1875rem; line-height: 1.5rem; font-weight: 700;
}
.how__step .h-card { margin-top: 1rem; }
.how__text { margin-top: 0.5rem; font-size: 1rem; line-height: 1.625rem; color: var(--ink-2); text-wrap: pretty; }
.how__tag { margin-top: 0.875rem; font-family: var(--font-mono); font-variant-ligatures: none; font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: var(--teal); }
.section--how { padding-bottom: 2.25rem; }
@media (min-width: 768px) {
  .section--how { padding-bottom: var(--section-gap); }
  .how__steps { margin-top: 3rem; }
  .how__step { padding: 2rem; }
}
@media (min-width: 1024px) {
  .how__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); min-height: 17.5rem; }
  .how__step { padding: 2.25rem; }
  .how__step + .how__step { border-top: 0; border-left: 1px solid var(--line); }
  .how__step .h-card { margin-top: 1.5rem; }
  .how__text { margin-top: 0.625rem; }
  .how__tag { margin-top: auto; padding-top: 1.5rem; font-size: 0.8125rem; line-height: 1.125rem; }
}
@media (min-width: 1280px) { .how__steps { margin-top: 3.5rem; } }

/* ---- Free plan ---------------------------------------------------------------- */
.section--free { padding-top: 2.25rem; }
.free { display: grid; grid-template-columns: minmax(0, 1fr); background: var(--surface); border: 1px solid var(--line); border-radius: 0.75rem; box-shadow: var(--sh-raise); overflow: hidden; }
.free__visual { display: flex; align-items: center; justify-content: center; padding: 1.75rem 1rem; }
.free-card {
  width: 19.75rem; max-width: 100%; padding: 0.875rem; border-radius: 0.75rem;
  background: var(--surface); box-shadow: var(--sh-window);
}
.free-card__head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.free-card__brand { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; line-height: 1.125rem; font-weight: 600; color: var(--ink); }
.free-card__brand img { width: 1.25rem; height: 1.25rem; }
.free-card__today { font-family: var(--font-mono); font-variant-ligatures: none; font-size: 0.75rem; line-height: 1rem; font-weight: 600; color: var(--teal); white-space: nowrap; }
.free-card__grid { margin-top: 0.875rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem; }
.free-card__cover { position: relative; aspect-ratio: 139 / 181; border-radius: 0.5rem; overflow: hidden; box-shadow: var(--sh-ring); }
.free-card__cover img { width: 100%; height: 100%; object-fit: cover; }
.free-card__badge {
  position: absolute; left: 0.5rem; top: 0.5rem; display: inline-flex; align-items: center; gap: 0.3125rem;
  height: 1.5rem; padding: 0 0.5625rem 0 0.4375rem; border-radius: 999px;
  background: var(--glass-badge); box-shadow: var(--sh-toggle); color: var(--teal);
  font-size: 0.75rem; line-height: 1rem; font-weight: 600; white-space: nowrap;
}
.free-card__badge svg { flex: none; width: 0.8125rem; height: 0.8125rem; }
.free-card__badge path { fill: none; stroke: var(--teal); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.free-card__title { margin-top: 0.625rem; font-size: 0.78125rem; line-height: 1.125rem; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.free-card__meta { margin-top: 0.1875rem; font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.free-card__foot { margin-top: 1rem; padding-top: 0.875rem; border-top: 1px dashed var(--line-strong); display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.free-card__more { font-size: 0.8125rem; line-height: 1.125rem; color: var(--ink-2); }
@media (max-width: 359.98px) {
  .free-card__title, .free-card__meta { white-space: normal; overflow: visible; }
  .free-card__badge { left: 0.375rem; top: 0.375rem; padding: 0 0.5rem; font-size: 0.6875rem; }
  .free-card__badge svg { display: none; }
  .qrow { height: auto; min-height: 4rem; padding-block: 0.5rem; }
  .qrow__top { flex-wrap: wrap; }
  .qrow__title, .qrow__meta { white-space: normal; overflow: visible; }
}
@media (min-width: 1024px) and (max-width: 1079.98px) {
  .free-card__meta .only-md-up { display: none !important; }
  .free-card__meta .only-sm { display: inline !important; }
}
.free-card__price { font-family: var(--font-mono); font-variant-ligatures: none; font-size: 0.8125rem; line-height: 1.125rem; font-weight: 600; color: var(--ink); }
.free__body { padding: 1.75rem 1.5rem; }
.kicker { font-family: var(--font-mono); font-variant-ligatures: none; font-size: 0.75rem; line-height: 1rem; font-weight: 600; color: var(--teal); }
.free__body .h-display { margin-top: 0.75rem; }
.free__lead { margin-top: 0.875rem; font-size: 1.0625rem; line-height: 1.6875rem; color: var(--ink-2); text-wrap: pretty; }
.free__list { margin-top: 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; }
.free__list li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 1rem; line-height: 1.5rem; color: var(--ink); }
.free__cta { margin-top: 1.75rem; }
.free__cta .btn { display: flex; width: 100%; }
.free__note { margin-top: 0.75rem; text-align: center; font-family: var(--font-mono); font-variant-ligatures: none; font-size: 0.75rem; line-height: 1.125rem; font-weight: 500; color: var(--ink-3); }
@media (min-width: 768px) {
  .section--free { padding-top: 0; }
  .free__visual { padding: 3rem 1.5rem; }
  .free-card { width: 27.5rem; padding: 1.25rem; }
  .free-card__grid { gap: 1rem; }
  .free-card__cover { aspect-ratio: 192 / 256; }
  .free-card__title { font-size: 0.875rem; }
  .free__body { padding: 3rem 2.5rem; }
  .kicker { font-size: 0.8125rem; line-height: 1.125rem; }
  .free__body .h-display { margin-top: 0.875rem; }
  .free__lead { margin-top: 1.25rem; max-width: 33.75rem; font-size: 1.25rem; line-height: 2rem; }
  .free__list { margin-top: 1.75rem; }
  .free__list li { font-size: 1.0625rem; line-height: 1.625rem; }
  .free__cta { margin-top: 2.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }
  .free__cta .btn { display: inline-flex; width: auto; }
  .free__note { margin-top: 0; text-align: left; font-size: 0.8125rem; line-height: 1.25rem; white-space: nowrap; }
}
@media (min-width: 1024px) {
  .free { grid-template-columns: minmax(0, 560fr) minmax(0, 720fr); }
  .free__visual { padding: 4rem 1.5rem; }
  .free__body { padding: 4.5rem 4.5rem 4.5rem 4rem; display: flex; flex-direction: column; justify-content: center; }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .free__body { padding: 3.5rem 3rem; }
}

/* ---- Pricing ------------------------------------------------------------------- */
.plans { margin-top: 2rem; display: flex; flex-direction: column; }
.plan {
  position: relative; display: flex; flex-direction: column; min-width: 0; margin-top: 1rem;
  padding: 1.75rem 1.5rem; border-radius: 0.75rem;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1);
}
.plan--free { order: 1; margin-top: 0; }
.plan--featured { order: 2; margin-top: 1.75rem; padding: calc(1.75rem + 1px - 0.125rem) calc(1.5rem + 1px - 0.125rem); border: 0.125rem solid var(--coral); box-shadow: var(--sh-feature); }
.plan--monthly { order: 3; }
.plan--lifetime { order: 4; }
.plan__flag {
  position: absolute; left: 50%; top: -0.75rem; transform: translateX(-50%);
  display: inline-flex; align-items: center; height: 1.375rem; padding: 0 0.625rem; border-radius: 999px;
  background: var(--coral); color: var(--on-coral-strong); font-size: 0.6875rem; line-height: 0.875rem; font-weight: 700; white-space: nowrap;
}
.plan__head { display: flex; align-items: center; justify-content: space-between; gap: 0.625rem; height: 1.75rem; }
.plan__name { font-size: 1.125rem; line-height: 1.625rem; font-weight: 600; color: var(--ink); }
.plan__price { margin-top: 0.625rem; display: flex; align-items: baseline; gap: 0.5rem; white-space: nowrap; }
.plan__amount {
  font-family: var(--font-display); font-weight: 800; font-stretch: 110%;
  font-size: clamp(2.625rem, 13.33vw, 3.25rem); line-height: 3.25rem; letter-spacing: -0.03em; color: var(--ink);
}
.plan__unit { font-family: var(--font-mono); font-variant-ligatures: none; font-size: 0.9375rem; line-height: 1.25rem; font-weight: 500; color: var(--ink-3); }
.plan__note { margin-top: 0.75rem; font-family: var(--font-mono); font-variant-ligatures: none; font-variant-numeric: tabular-nums; font-size: 0.8125rem; line-height: 1.25rem; font-weight: 500; color: var(--teal); }
.plan .btn { margin-top: 1.5rem; }
.plan__rule { margin: 1.5rem 0 0; height: 1px; border: 0; background: var(--line); }
.plan .check-list { margin-top: 1.25rem; }
.plan-extras { margin-top: 1.75rem; padding: 0 0.25rem; }
.plan-extras__title { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; color: var(--ink); white-space: nowrap; }
.plan-extras ul { margin-top: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; }
.plan-extras li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.9375rem; line-height: 1.375rem; color: var(--ink-2); }
.plan-extras .check { margin-top: 0.125rem; }
.pricing__foot { margin-top: 1.5rem; padding: 0 0.25rem; font-size: 0.875rem; line-height: 1.375rem; color: var(--ink-3); }
.pricing__foot a { color: var(--link); }
.pricing__start a { font-weight: 500; }
.pricing__foot > span { display: block; }
.pricing__sep { display: none !important; }
.pricing__legal { margin-top: 0.25rem; }
.pricing__legal a { display: inline-block; padding: 0.6875rem 0; }
@media (min-width: 768px) {
  .plans { margin-top: 3rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1rem; }
  .plan, .plan--featured { order: 0; margin-top: 0; padding: 2rem 1.75rem; }
  .plan--featured { padding: calc(2rem + 1px - 0.125rem) calc(1.75rem + 1px - 0.125rem); }
  .plan__name { font-size: 1.25rem; line-height: 1.75rem; }
  .plan__price { margin-top: 0.875rem; }
  .plan__amount { font-size: 3.25rem; }
  .plan__note { min-height: 2.5rem; }
  .plan__rule { margin-top: 1.75rem; }
  .plan .check-list { margin-top: 1.5rem; }
  .plan-extras { margin-top: 2rem; padding: 0; display: flex; align-items: center; justify-content: center; gap: 0.75rem 1.5rem; flex-wrap: wrap; }
  .plan-extras ul { margin-top: 0; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.5rem; }
  .plan-extras li { align-items: center; gap: 0.5rem; font-size: 0.875rem; line-height: 1.25rem; white-space: nowrap; }
  .plan-extras .check { margin-top: 0; }
  .pricing__foot { margin-top: 1.25rem; padding: 0; text-align: center; }
  .pricing__foot > span { display: inline; }
  .pricing__sep { display: inline !important; margin: 0 0.375rem; color: var(--line-faint); }
  .pricing__legal { margin-top: 0; }
  .pricing__legal a { display: inline; padding: 0; }
}
@media (min-width: 1280px) {
  .plans { margin-top: 4rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .plan__amount { font-size: min(3.25rem, 3.61vw); }
  .plan-extras { flex-wrap: nowrap; }
  .plan-extras ul { flex-wrap: nowrap; }
}

/* ---- FAQ section ----------------------------------------------------------------- */
.faq-section__intro { margin-top: 1rem; font-size: 1rem; line-height: 1.625rem; color: var(--ink-2); }
.faq-section__intro a { font-weight: 500; }
.support-btns { margin-top: 1.25rem; display: flex; flex-direction: column; gap: 0.625rem; }
.support-btns .btn { display: flex; width: 100%; height: 3rem; font-size: 1rem; line-height: 1.25rem; gap: 0.5rem; }
.support-btns svg { width: 1.125rem; height: 1.125rem; }
.faq-section .faq-list { margin-top: 2rem; }
@media (min-width: 768px) {
  .faq-section__intro { margin-top: 1.25rem; }
  .support-btns { margin-top: 1.5rem; flex-direction: row; }
  .support-btns .btn { display: inline-flex; width: auto; height: 2.75rem; font-size: 0.9375rem; padding: 0 1.125rem; }
  .faq-section .faq-list { margin-top: 2.5rem; }
}
@media (min-width: 1024px) {
  .faq-section { display: grid; grid-template-columns: minmax(0, 472fr) minmax(0, 737fr); column-gap: 5.55%; align-items: start; }
  .faq-section .faq-list { margin-top: 0; }
}

/* ---- Final CTA --------------------------------------------------------------------- */
.cta-card { position: relative; padding: 2rem 1.5rem 0; background: var(--surface); border: 1px solid var(--line); border-radius: 0.75rem; box-shadow: var(--sh-raise); overflow: hidden; }
.cta-card__logo { width: 3rem; height: 3rem; }
.cta-card .h-display { margin-top: 1.25rem; }
.cta-card__lead { margin-top: 0.75rem; font-size: 1rem; line-height: 1.625rem; color: var(--ink-2); text-wrap: pretty; }
.cta-card__btn { margin-top: 1.5rem; }
.cta-card__btn .btn { display: flex; width: 100%; }
.cta-card__meta { margin-top: 0.875rem; font-family: var(--font-mono); font-variant-ligatures: none; font-variant-numeric: tabular-nums; font-size: 0.75rem; line-height: 1.125rem; font-weight: 500; color: var(--ink-3); }
.cta-card__visual { margin: 1.75rem -1.5rem 0; height: 12.25rem; }
.cta-card__window { position: absolute; left: 1.5rem; top: 1.75rem; width: 27.5rem; aspect-ratio: 440 / 240; }
.cta-card__window > img { width: 131.14%; }
@media (min-width: 768px) {
  .cta-card { padding: 3rem 2.5rem 0; }
  .cta-card__logo { width: 3.5rem; height: 3.5rem; }
  .cta-card .h-display { margin-top: 1.5rem; }
  .cta-card__lead { margin-top: 1rem; max-width: 35rem; font-size: 1.125rem; line-height: 1.75rem; }
  .cta-card__btn { margin-top: 2rem; }
  .cta-card__btn .btn { display: inline-flex; width: auto; }
  .cta-card__meta { font-size: 0.8125rem; line-height: 1.25rem; }
  .cta-card__visual { margin: 2.5rem -2.5rem 0; height: 20rem; }
  .cta-card__window { left: 2.5rem; top: 2.5rem; width: 45rem; }
}
@media (min-width: 1024px) {
  .cta-card { padding: 0; min-height: 34rem; }
  .cta-card__text { position: relative; z-index: 1; width: 49.07%; padding: 4rem; }
  .cta-card__visual { position: absolute; left: 47.5%; top: 8rem; right: 0; bottom: 0; margin: 0; height: auto; border-radius: 0.75rem 0 0 0; }
  .cta-card__window { left: 4.5rem; top: 4.5rem; width: 56.25rem; aspect-ratio: 900 / 458; }
  .cta-card__window > img { width: 131.1%; }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .cta-card__text { width: 56%; padding: 3.5rem 3rem; }
  .cta-card__visual { left: 58%; }
}

/* ==========================================================================
   6. Theme switch animation (html.theme-anim is set for ~300 ms by site.js)
   ========================================================================== */
html.theme-anim,
html.theme-anim *,
html.theme-anim *::before,
html.theme-anim *::after {
  transition-property: background-color, color, border-color, box-shadow, fill, stroke, opacity, visibility, filter, outline-color, text-decoration-color !important;
  transition-duration: var(--theme-dur) !important;
  transition-timing-function: var(--theme-ease) !important;
  transition-delay: 0s !important;
}
@media (prefers-reduced-motion: reduce) {
  html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after { transition: none !important; }
}

/* ==========================================================================
   6b. Sources (landing pages): TikTok ShortDrama and PineDrama workflows side by side
   ========================================================================== */
.sources { margin-top: 2rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.sources__card { display: flex; flex-direction: column; padding: 1.5rem; }
.sources__title { margin-top: 0.5rem; }
.sources__list { margin-top: 1.25rem; }
.sources__note { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: 0.9375rem; line-height: 1.375rem; color: var(--ink-3); text-wrap: pretty; }
.sources__foot { margin-top: 1.5rem; max-width: 38.75rem; font-size: 1rem; line-height: 1.625rem; color: var(--ink-2); text-wrap: pretty; }
@media (min-width: 768px) {
  .sources { margin-top: 2.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
  .sources__card { padding: 2rem; }
  .sources__foot { margin-top: 2rem; font-size: 1.0625rem; line-height: 1.6875rem; }
}
@media (min-width: 1280px) {
  .sources { margin-top: 3.5rem; gap: 2rem; }
  .sources__card { padding: 2.5rem; }
}

/* ==========================================================================
   7. Company page (shortdramadownloader.com) - minimal additions only.
      Reuses the tokens and components above; every rule is scoped to co-* classes,
      .nav--company or .footer__grid--company.
   ========================================================================== */
/* nav: brand | links | theme toggle from 768 up. Below 768: brand | Menu button, and the links and the theme toggle
   are in the phone menu (#site-menu, the product sites' component in section 4, with the company nav's items) */
.nav--company { padding-right: 0.25rem; }
@media (max-width: 767.98px) {
  .nav--company > .theme-toggle { display: none; }
}
@media (min-width: 768px) {
  .nav--company .nav__links { display: flex; align-items: center; gap: 1.5rem; }
  .nav--company .nav__links a { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .nav--company > .theme-toggle { width: 4.5rem; height: 2rem; padding: 0.1875rem; margin-right: 0.375rem; }
  .nav--company > .nav__menu-btn { display: none; }
  .nav--company + .menu { display: none !important; }
}
@media (min-width: 1280px) {
  .nav--company .nav__links { gap: 1.75rem; }
  .nav--company > .theme-toggle { justify-self: end; margin-right: 0.25rem; }
}

/* hero */
.co-hero { padding: 6.75rem 0 3.5rem; }
.co-hero__title {
  margin-top: 0.875rem;
  font-family: var(--font-display); font-weight: 750; font-stretch: 100%;
  font-size: clamp(2rem, 10.26vw, 2.75rem); line-height: 1.02; letter-spacing: -0.03em; color: var(--ink);
  text-wrap: balance;
}
.co-hero__lead { margin-top: 1.25rem; max-width: 40rem; font-size: 1.0625rem; line-height: 1.6875rem; color: var(--ink-2); text-wrap: pretty; }
.co-hero__cta { margin-top: 1.75rem; }
.co-hero__cta .btn { display: flex; width: 100%; }
.co-hero__cta .btn svg { stroke: currentColor; }
.co-hero__cta .hero__meta { margin-top: 0.875rem; }
@media (min-width: 768px) {
  .co-hero { padding: 9.25rem 0 5rem; }
  .co-hero__title { font-size: clamp(3.5rem, 6.11vw, 5.5rem); line-height: .977; letter-spacing: -0.04em; font-stretch: 112%; }
  .co-hero__lead { margin-top: 1.75rem; font-size: 1.25rem; line-height: 2rem; }
  .co-hero__cta { margin-top: 2rem; display: flex; align-items: center; gap: 1.5rem; }
  .co-hero__cta .btn { display: inline-flex; width: auto; }
  .co-hero__cta .hero__meta { margin-top: 0; }
}
@media (min-width: 1280px) { .co-hero { padding: 10.75rem 0 6.5rem; } }

/* two product cards */
.co-apps { margin-top: 2rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.co-app { display: flex; flex-direction: column; overflow: hidden; }
.co-app__visual { aspect-ratio: 16 / 10; border-bottom: 1px solid var(--line); }
.co-app__shot { position: absolute; left: 1.5rem; top: 1.5rem; width: max(32.5rem, 150%); }
.co-app__body { flex: 1; display: flex; flex-direction: column; padding: 1.5rem; }
.co-app__head { display: flex; align-items: center; gap: 0.875rem; }
.co-app__logo { flex: none; width: 2.5rem; height: 2.5rem; }
.co-app__host { margin-top: 0.125rem; font-size: 0.8125rem; line-height: 1.25rem; font-weight: 500; color: var(--ink-3); overflow-wrap: break-word; }
@media (max-width: 767.98px) {
  .co-app__head { gap: 0.75rem; }
  .co-app__logo { width: 2rem; height: 2rem; }
  .co-app__host { font-size: 0.75rem; line-height: 1.125rem; }
}
.co-app__text { flex: 1; margin-top: 1rem; font-size: 1rem; line-height: 1.625rem; color: var(--ink-2); text-wrap: pretty; }
.co-app__link { margin-top: 1.5rem; display: flex; width: 100%; height: 3rem; }
@media (min-width: 768px) {
  .co-apps { margin-top: 2.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
  .co-app__shot { left: 2rem; top: 2rem; }
  .co-app__body { padding: 1.75rem 2rem 2rem; }
  .co-app__text { font-size: 1.0625rem; line-height: 1.6875rem; }
  .co-app__link { display: inline-flex; width: auto; align-self: flex-start; height: 2.75rem; }
}
@media (min-width: 1280px) { .co-apps { margin-top: 3.5rem; gap: 2rem; } }

/* free-plan line */
.co-free { display: flex; flex-direction: column; align-items: flex-start; gap: 0.875rem; padding: 1.5rem; }
.co-free__title { font-family: var(--font-display); font-weight: 650; font-size: 1.375rem; line-height: 1.75rem; letter-spacing: -0.01em; color: var(--ink); text-wrap: balance; }
.co-free__sub { margin-top: 0.375rem; font-size: 1rem; line-height: 1.625rem; color: var(--ink-2); text-wrap: pretty; }
@media (min-width: 768px) {
  .co-free { flex-direction: row; align-items: center; gap: 1.25rem; padding: 1.75rem 2rem; }
  .co-free__title { font-size: 1.625rem; line-height: 2rem; }
  .co-free__chip { margin-left: auto; }
}

/* plans: the landing-page plan cards; the renewal and refund terms sit under them */
.co-plans__foot > span { display: block; max-width: 45rem; margin-inline: auto; }
.co-plans__foot .pricing__legal { margin-top: 0.5rem; }
@media (min-width: 768px) { .co-plans__foot > span { display: block; } }

/* support */
.co-support { padding: 1.5rem; }
.co-support__text { margin-top: 0.875rem; max-width: 37.5rem; font-size: 1rem; line-height: 1.625rem; color: var(--ink-2); }
.co-support__text a { font-weight: 500; }
@media (min-width: 768px) {
  .co-support { padding: 2.5rem; }
  .co-support__text { margin-top: 1rem; font-size: 1.0625rem; line-height: 1.6875rem; }
}
@media (min-width: 1024px) {
  .co-support { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2rem; padding: 3rem 3.5rem; }
  .co-support__btns { margin-top: 0; }
}

/* footer: brand + Apps + Support + Legal (4 columns) */
@media (min-width: 1280px) {
  .footer__grid--company { grid-template-columns: minmax(0, 18.75rem) 15rem 16.75rem 8.5rem; }
}

/* ==========================================================================
   8. Legal and utility pages (terms, privacy, refund policy, billing link, download, 404)
   ========================================================================== */
.legal { overflow-wrap: break-word; }
.keypoints { padding: 1rem; border: 1px solid var(--line); border-radius: 0.75rem; background: var(--surface-2); }
.prose .keypoints__title { margin-top: 0; font-size: 1.125rem; line-height: 1.5rem; }
.keypoints ul { margin-top: 0.75rem; }
.keypoints__note { margin-top: 0.75rem; font-size: 0.875rem; line-height: 1.375rem; color: var(--ink-3); }
.prose .toc { margin-top: 2rem; }
.prose .toc__title { margin-top: 0; font-size: 1.125rem; line-height: 1.5rem; }
.prose .toc ol { margin-top: 0.5rem; padding-left: 0; list-style: none; }
.prose .toc li + li { margin-top: 0; }
.toc a { display: block; padding: 0.625rem 0; font-weight: 500; text-decoration: none; }
.toc a:hover { text-decoration: underline; }
.prose .legal__closing, .prose .legal__small { font-size: 0.875rem; line-height: 1.375rem; color: var(--ink-3); }
.prose h2 + h3 { margin-top: 1rem; }
.prose td:first-child { color: var(--ink); }
.prose .table-scroll table { min-width: 32.5rem; }
.page__body .support-btns + .prose, .page__body .prose + .support-btns { margin-top: 1.25rem; }
@media (min-width: 768px) {
  .keypoints { padding: 1.5rem 1.75rem; }
  .prose .toc ol { columns: 2; column-gap: 2rem; }
  .prose .toc li { break-inside: avoid; }
  .toc a { padding: 0.25rem 0; }
}

/* ==========================================================================
   9. Large screens (CSS width 1921px and up). Every size above is in rem, so the
      whole design scales with the root size; the rules below only change the
      composition where the extra room helps. Nothing here applies at 1920 or less.
   ========================================================================== */
@media (min-width: 1921px) {
  /* 1 unit = 1px at 1920, +1px per 200px of width: at 100% scaling a 16:9 screen gets about 19px at 2560,
     26px at 3840, 32px at 5120, 37px at 6016 and 45px at 7680, so on 5K to 8K screens the column fills 52-60%
     of the width. Height-bounded from 2:1 (ultrawide); a maximized browser on a 16:9 or 16:10 screen, shorter
     than the screen by the taskbar and its own bars, stays width-bounded. Max 3x (48px) from 8320 wide.
     Browser zoom still enlarges the text: on a 3840 screen 200% makes it 1.25x and 300% 1.9x (zoomed to
     1920 or less the root is the fixed 16px) */
  html { font-size: clamp(16px, min(100vw / 200, 100vh / 100) + 6.4px, 48px); }
  /* column grows 1280 -> 1440 units, then holds (the page scales, the measure does not) */
  :root { --content: clamp(80rem, 66.667vw, 90rem); }

  /* nav capsule keeps its 40-unit inset from the column */
  .nav { width: min(var(--content) - 5rem, 100% - 2 * var(--gutter) - 5rem); }

  /* Screenshots are 1440 px files with 2x versions of 2880 px and 3x versions of 4320 px (the detail window
     840 / 1680 / 2520 px); srcset picks the 2x file on high-density screens and wherever a shot is drawn wider
     than 1440 (840), and the 3x file where it is drawn wider than 2880 (1680) screen pixels (8K at 100%, 5K-8K
     screens at 125-200% scaling). No screenshot is drawn wider than its 3x file: each window frame and crop below
     stops at the 3x file's width (a frame's image is 0.125rem wider than the frame, which trims the 1px edge).
     The 48px root cap keeps every one of them below that (the widest, the two Library crops, reach about
     3540 px), so every shot keeps its 1080p composition at every size and the caps only guard a larger root */

  /* hero: the app window grows with the wall panel (fills it as at 1080p) up to 1200 units and at most its
     3x screenshot's 4320 px; panel height, detail window size and position follow --hero-win (section 5). Past
     that the wall beside the window widens, up to 320 units (about 5830 wide on a 16:9 screen): from there the
     panel ends 320 units after the window instead of running on to the far edge, and its right corners round
     in step with the gap that opens beside it (the same terms as the layout: the panel's natural width, half
     the viewport plus half the column less its 27.5-unit offset, minus the window and 24.5 units), so it
     becomes a card without a jump */
  .hero { --hero-win: clamp(min(60rem, 4320px - 0.125rem), 50vw + var(--content) / 2 - 40rem, min(75rem, 4320px - 0.125rem)); }
  .hero__visual {
    max-width: calc(var(--hero-win) + 24.5rem);
    border-top-right-radius: clamp(0px, (100vw + var(--content)) / 2 - 52rem - var(--hero-win), 0.75rem);
    border-bottom-right-radius: clamp(0px, (100vw + var(--content)) / 2 - 52rem - var(--hero-win), 0.75rem);
  }

  /* tour: the rail keeps its 411-unit column; the stage takes the rest of the column (at most 4760 px, where
     its window would pass its 3x file's width; the 48px root cap keeps it below that), never less than its
     845-unit 1080p size.
     Stage and thumbnails sit on the column's right edge. The window on the stage stops at its 3x file's width
     and stays centred */
  .tour { grid-template-columns: minmax(0, 25.6875rem) minmax(0, 1fr); }
  .tour__stage, .tour__thumbs { justify-self: end; width: 100%; max-width: max(52.8125rem, 4760px); }
  .tour__thumbs { grid-template-columns: repeat(4, minmax(0, 23.1953%)); }
  .tour__shot { max-width: calc(4320px - 0.125rem); }
  .tour__shot--pick { max-width: calc(2520px - 0.125rem); }

  /* trust bar: cells sized to their text, so each one fits on a single line; balanced if one ever wraps */
  .trust__list { grid-template-columns: repeat(5, auto); }
  .trust__list li span { text-wrap: balance; }

  /* two sources: roomier cards and hero-size points, so the wider cards do not read as a sparse strip */
  .sources__card { padding: 3rem; }
  .sources__list li { font-size: 1.0625rem; line-height: 1.625rem; }

  /* Library crop (bento) and Library window (final CTA): the frame keeps its 1080p proportions and its image
     (179.1% / 131.1% of the frame) would stop at the 3x file's 4320 px, past what the 48px root allows (about
     3520 / 3540 px), so both render exactly as at 1080p at every size. Were the cap ever reached, the image is cut
     just after the fourth poster (before the header buttons and window controls) and the app's own flat
     background fills the rest of the wider frame, so it would show more of the same Library view */
  .bento__card--lib .lib-shot { width: 100%; background: var(--app-bg); }
  .bento__card--lib .lib-shot > img {
    top: 0; left: 0; width: min(179.1%, 4320px);
    margin: calc(min(179.1%, 4320px) * -0.036111) 0 0 calc(min(179.1%, 4320px) * -0.17778);
    clip-path: inset(0 23.61% 0 0);
  }
  .cta-card__window { background: var(--app-bg); }
  .cta-card__window > img { width: min(131.1%, 4320px); clip-path: inset(0 23.61% 0 0); }

  /* download page and company cards: the Browse window stops at its 3x file's width (not reached with the 48px
     root). Below that it keeps its 1080p size and place, so its panel always cuts it as at 1080p (the window never
     ends just past the edge) */
  .dl-visual__shot, .co-app__shot { max-width: calc(4320px - 0.125rem); }

  /* short utility pages (404, billing link sent): when the page is shorter than the screen, centre the
     content in the space above the footer instead of leaving an empty band under it */
  body > main.page { display: flex; flex-direction: column; justify-content: center; }

  /* footer: brand column takes the free width, link columns sit on the right edge of the column */
  .footer__grid { grid-template-columns: minmax(0, 1fr) 10.5rem 16.75rem 8.5rem; column-gap: 4rem; }
  .footer__grid--company { grid-template-columns: minmax(0, 1fr) 15rem 16.75rem 8.5rem; }
}

/* ultrawide (21:9 and wider, only above 1920): the wall panel stops 128 units after the app window
   instead of running to the far edge, and becomes a card with all four corners rounded */
@media (min-width: 1921px) and (min-aspect-ratio: 21/9) {
  .hero__visual { max-width: calc(var(--hero-win) + 12.5rem); border-radius: 0.75rem; }
}

/* ==========================================================================
   10. Guides (shortdramadownloader.com/guides/, /about/, /facts/): the hub, topic pages and guide articles.
       Built by tools/build-guides.mjs on the text page shell (.page, .page__head, .card.page__body, .prose) and
       the tokens above; rem only, so section 9 scales it above 1920. The article column is at most 42.5rem
       with 17px text from 768 wide: about 73-75 characters a line (measured with headless Edge; 41 on a 390
       phone). GUIDE_FIG_SIZES in tools/guides/lib.mjs follows the column.
   ========================================================================== */
/* breadcrumb */
.crumbs { margin-bottom: 1.25rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--ink-3); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; }
.crumbs li { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
/* the separator is drawn, not read out ("/" with empty alt text; a browser without it shows the plain "/") */
.crumbs li + li::before { content: "/"; content: "/" / ""; color: var(--line-faint); }
.crumbs a { display: inline-flex; align-items: center; min-height: 1.5rem; font-weight: 500; color: var(--ink-2); }
.crumbs a:hover { color: var(--ink); }
.crumbs li:last-child { flex: 1 1 10rem; }
.crumbs [aria-current="page"] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* phones: the current page's own item repeats the h1 right under it, so the trail stops at the topic */
@media (max-width: 767.98px) { .crumbs li:last-child { display: none; } }

/* article head: a guide's h1 is a task or a question (up to about 90 characters), so it is smaller than the legal
   pages' title and the "In short" answer starts higher on a phone */
.guide .page__head, .guide .page__body, .guide-cta { max-width: 42.5rem; }
/* "On this page": the body's sections, beside the article from 1280 px (sticky, no script; the layout below), and a
   collapsed list after the "In short" box below that for a long guide (tools/guides/article.mjs) */
.guide-toc { display: none; }
.guide-toc__title { font-family: var(--font-mono); font-variant-ligatures: none; font-size: 0.8125rem; line-height: 1.125rem; font-weight: 600; color: var(--ink-3); }
.guide-toc ol { margin-top: 0.75rem; border-left: 1px solid var(--line); }
.guide-toc a { display: block; padding: 0.375rem 0 0.375rem 1rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--ink-2); }
.guide-toc a:hover { color: var(--ink); }
.prose > .guide-toc-inline { margin-top: 1.25rem; }
.guide-toc-inline details { border: 1px solid var(--line); border-radius: 0.75rem; background: var(--surface-2); }
.guide-toc-inline summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.75rem; padding: 0 1rem;
  font-weight: 600; color: var(--ink); cursor: pointer; list-style: none;
}
.guide-toc-inline summary::-webkit-details-marker { display: none; }
.guide-toc-inline summary::after {
  content: ""; flex: none; width: 0.5rem; height: 0.5rem; margin-top: -0.25rem;
  border-right: 0.125rem solid var(--ink-3); border-bottom: 0.125rem solid var(--ink-3); transform: rotate(45deg);
}
.guide-toc-inline details[open] summary::after { margin-top: 0.25rem; transform: rotate(-135deg); }
.prose .guide-toc-inline ol { margin: 0; padding: 0 1rem 0.5rem; list-style: none; }
.prose .guide-toc-inline li + li { margin-top: 0; }
.prose .guide-toc-inline a { display: block; padding: 0.5rem 0; border-top: 1px solid var(--line); text-decoration: none; }
.prose .guide-toc-inline a:hover { text-decoration: underline; }
.guide .page__title { font-size: 1.875rem; line-height: 2.375rem; }
.guide-meta { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; font-family: var(--font-mono); font-variant-ligatures: none; font-size: 0.8125rem; line-height: 1.25rem; font-weight: 500; color: var(--ink-3); }
.guide-meta a { color: var(--ink-2); }
.guide-disclosure { margin-top: 0.625rem; max-width: 40rem; font-size: 0.875rem; line-height: 1.375rem; color: var(--ink-3); }
.guide-disclosure a { font-weight: 500; }

/* links in running text outside .prose are underlined like .prose a, never told apart by colour alone (WCAG 1.4.1):
   the Guides pages, and the landing pages' new copy (the apex About paragraph, PineDrama's "Which PineDrama links
   work" note, the TikTok FAQ answer). The older .faq-section__intro and .co-support__text links keep their look. */
.lead a, .sources__foot a, .faq-item > p a, .hub-intro a, .guide-meta a, .guide-disclosure a {
  text-decoration: underline; text-underline-offset: 0.1875rem; text-decoration-thickness: 1px;
}

/* /about/ and /facts/ read like the guides: the same 42.5rem column, 17px text from 768 wide */
.page--reading .page__head, .page--reading .page__body { max-width: 42.5rem; }

/* the header's Guides links on the Guides pages (aria-current, set by renderPage in tools/pages/_lib.mjs): the nav's
   and the phone menu's */
.nav__links a[aria-current] { color: var(--ink); text-decoration: underline; text-underline-offset: 0.375rem; text-decoration-thickness: 0.125rem; }
.menu__links a[aria-current] { text-decoration: underline; text-underline-offset: 0.375rem; text-decoration-thickness: 0.125rem; }

/* article body */
.guide-applies { font-size: 0.9375rem; line-height: 1.5rem; color: var(--ink-3); }
.guide-applies strong { color: var(--ink-2); }
.prose .steps { padding-left: 0; list-style: none; counter-reset: step; }
.prose .steps > li { position: relative; min-height: 1.75rem; padding-left: 2.5rem; counter-increment: step; }
.prose .steps > li + li { margin-top: 0.75rem; }
.prose .steps > li::before {
  content: counter(step); position: absolute; left: 0; top: -0.0625rem;
  width: 1.75rem; height: 1.75rem; border-radius: 999px; background: var(--coral-soft); color: var(--link);
  font-family: var(--font-display); font-size: 0.875rem; line-height: 1.75rem; font-weight: 700; text-align: center;
}
.prose kbd {
  display: inline-block; padding: 0 0.375rem; border: 1px solid var(--line-strong); border-bottom-width: 0.125rem; border-radius: 0.375rem;
  background: var(--surface); color: var(--ink); font-family: var(--font-mono); font-size: 0.8125rem; line-height: 1.25rem; white-space: nowrap;
}
.prose blockquote { padding-left: 1rem; border-left: 0.1875rem solid var(--line-strong); color: var(--ink-2); }
/* the accent bar is the left hairline plus an inset shadow, so it follows the rounded corners (a 4px left border
   under a 12px radius bends into a bracket where it meets the 1px top and bottom borders) */
.callout {
  padding: 1rem 1.25rem 1rem 1.4375rem; border: 1px solid var(--line); border-left-color: var(--callout-bar, var(--line-strong)); border-radius: 0.75rem;
  background: var(--surface-2); box-shadow: inset 0.1875rem 0 0 var(--callout-bar, var(--line-strong));
}
.callout > * + * { margin-top: 0.5rem; }
.callout ul, .callout ol { padding-left: 1.25rem; }
.callout__label { font-family: var(--font-mono); font-variant-ligatures: none; font-size: 0.8125rem; line-height: 1.125rem; font-weight: 600; color: var(--teal); }
.callout--note { --callout-bar: var(--teal); }
.callout--tip { --callout-bar: var(--green); }
.callout--tip .callout__label { color: var(--green-ink); }
.callout--warning { --callout-bar: var(--coral); background: var(--coral-softer); }
.callout--warning .callout__label { color: var(--link); }
.callout--rights { --callout-bar: var(--ink-3); }
.callout--rights .callout__label { color: var(--ink-2); }
/* a first-hand test note (:::tested): smaller, on the card's own surface, labelled with the test day */
.callout--tested { --callout-bar: var(--ink-4); background: var(--surface); font-size: 0.9375rem; line-height: 1.5rem; }
.callout--tested .callout__label { color: var(--ink-3); }
.prose > .guide-fig, .prose > .guide-fig + * { margin-top: 1.5rem; }
.guide-fig figcaption { margin-top: 0.625rem; font-size: 0.875rem; line-height: 1.375rem; color: var(--ink-3); }
/* a guide's screenshot: the two theme copies share one grid cell (no aspect-ratio class needed), the 1px
   screenshot edge is trimmed as in the landing pages' windows */
.guide-shot { display: grid; overflow: hidden; border-radius: 0.5rem; box-shadow: var(--sh-ring); }
.guide-shot.window { border-radius: 0.625rem; box-shadow: var(--sh-figure); }
.guide-shot > img { position: static; grid-area: 1 / 1; width: calc(100% + 0.125rem); max-width: none; height: auto; margin: -0.0625rem; }
/* the frame holds the picture and, in the same grid cell, the link to its full-size file (the theme's own file for a
   light/dark pair), so a phone reader can open it and zoom; no script */
.guide-fig__frame { display: grid; }
.guide-fig__frame > * { grid-area: 1 / 1; }
.guide-zoom { position: relative; z-index: 1; border-radius: 0.5rem; cursor: zoom-in; }
.guide-zoom--dark { display: none; }
:root[data-theme="dark"] .guide-zoom--light { display: none; }
:root[data-theme="dark"] .guide-zoom--dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .guide-zoom--light { display: none; }
  :root:not([data-theme]) .guide-zoom--dark { display: block; }
}
/* a figure narrower than the column, or without a 2x file or a dark twin, is drawn at most at its own size (a
   density srcset: its 1x width), never enlarged (tools/guides/lib.mjs FIG_FIT_BELOW) */
.guide-fig--fit .guide-fig__frame { width: fit-content; max-width: 100%; }
.guide-fig--fit .guide-shot > img { width: auto; max-width: calc(100% + 0.125rem); }
/* one theme only (a Windows capture): a neutral mat instead of a picture that seems to ignore the page's theme */
.guide-fig--single .guide-fig__frame { padding: 0.75rem; border-radius: 0.75rem; background: var(--stage); }
/* a figure with its own phone crop (::figure phone=, tools/guides/lib.mjs): the crop below 768 px, the picture from 768
   (the phone rules below). The copy not shown has no layout box, so its lazy images are never fetched */
.guide-shot--phone { display: none; }
.guide-related, .guide-sources { margin-top: 2.25rem; }
.prose .guide-related ul, .prose .guide-sources ul { margin-top: 0.75rem; }
.guide-sources a { overflow-wrap: anywhere; }
/* guide tables fit the column from 768 px; below that each row is a block: the first cell as its label, the others as
   "Header: value" lines (the legal pages' wide tables scroll instead) */
.prose.guide-prose .table-scroll table { min-width: 0; }
/* a guide table still wider than the column (a long unbroken word) scrolls; a shadow at each edge that has more to show
   says so (the two surface-coloured covers scroll with the table and hide each shadow once that edge is reached) */
.guide-prose .table-scroll {
  background:
    linear-gradient(to right, var(--surface) 30%, transparent) left center / 2.5rem 100% no-repeat local,
    linear-gradient(to left, var(--surface) 30%, transparent) right center / 2.5rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, var(--scroll-shade), transparent) left center / 0.875rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, var(--scroll-shade), transparent) right center / 0.875rem 100% no-repeat scroll;
}
@media (max-width: 767.98px) {
  .prose.guide-prose .table-scroll { overflow: visible; background: none; }
  .guide-prose table.stack, .guide-prose table.stack > tbody, .guide-prose table.stack tr, .guide-prose table.stack td { display: block; }
  .guide-prose table.stack > thead {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .guide-prose table.stack tr { padding: 0.75rem 0; border-bottom: 1px solid var(--line); }
  .guide-prose table.stack > tbody > tr:first-child { border-top: 1px solid var(--line); }
  .guide-prose table.stack td { padding: 0; border: 0; }
  .guide-prose table.stack td + td { margin-top: 0.25rem; }
  .guide-prose table.stack td:first-child { font-weight: 600; color: var(--ink); }
  .guide-prose table.stack td:not(:first-child)::before, .guide-prose table.stack--keyed td:first-child::before {
    content: attr(data-label) ": "; content: attr(data-label) ": " / ""; font-weight: 600; color: var(--ink);
  }
  /* a label that ends in its own punctuation ("Supported?") takes a space, not ": " */
  .guide-prose table.stack td:not(:first-child):is([data-label$="?"], [data-label$="!"], [data-label$=":"], [data-label$="\2026"])::before,
  .guide-prose table.stack--keyed td:first-child:is([data-label$="?"], [data-label$="!"], [data-label$=":"], [data-label$="\2026"])::before {
    content: attr(data-label) " "; content: attr(data-label) " " / "";
  }
}
.prose > .guide-byline { margin-top: 2.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: 0.875rem; line-height: 1.375rem; color: var(--ink-3); }
.guide-byline > * + * { margin-top: 0.375rem; }

/* download box under an article */
.guide-cta { margin-top: 1.5rem; padding: 1.5rem; }
.guide-cta__title { font-family: var(--font-display); font-weight: 650; font-size: 1.25rem; line-height: 1.625rem; letter-spacing: -0.01em; color: var(--ink); }
.guide-cta__text { margin-top: 0.5rem; font-size: 1rem; line-height: 1.625rem; color: var(--ink-2); text-wrap: pretty; }
.guide-cta__actions { margin-top: 1.25rem; display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.guide-cta__actions--pair { display: grid; grid-template-columns: minmax(0, max-content); gap: 0.75rem; }
/* the buttons keep the .btn--lg text (19px bold): white on coral is 3.16:1, enough for large text only (WCAG 1.4.3),
   so the download box never shrinks it; the buttons may wrap instead */
.guide-cta__actions .btn { display: flex; width: 100%; height: auto; min-height: 3.25rem; padding: 0.625rem 1.25rem; white-space: normal; text-align: center; }

/* hub and topic pages */
.hub-intro { margin-top: 1rem; font-size: 0.9375rem; line-height: 1.5rem; color: var(--ink-3); }
.hub-intro a { font-weight: 500; }
.hub-section { margin-top: 2.5rem; }
.hub-section__title { font-family: var(--font-display); font-weight: 650; font-size: 1.375rem; line-height: 1.75rem; letter-spacing: -0.01em; color: var(--ink); }
.guide-cards { margin-top: 1rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.hub-section > .guide-cards:first-child { margin-top: 0; }
.guide-card {
  position: relative; display: flex; flex-direction: column; padding: 1.25rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 0.75rem; box-shadow: var(--sh-card);
}
.guide-card:hover { border-color: var(--line-strong); }
/* the card shows its title link's keyboard focus ring (not after a mouse click: :focus-visible); a browser without
   :has() rings the card on any focus */
.guide-card:focus-within { outline: 0.125rem solid var(--focus); outline-offset: 0.1875rem; }
@supports selector(:has(a:focus-visible)) {
  .guide-card:focus-within { outline: none; }
  .guide-card:has(a:focus-visible) { outline: 0.125rem solid var(--focus); outline-offset: 0.1875rem; }
}
.guide-card__topic { font-family: var(--font-mono); font-variant-ligatures: none; font-size: 0.75rem; line-height: 1rem; font-weight: 600; color: var(--teal); }
.guide-card__title { margin-top: 0.5rem; font-family: var(--font-display); font-weight: 650; font-size: 1.125rem; line-height: 1.5rem; letter-spacing: -0.01em; text-wrap: pretty; }
/* a topic page's cards carry no topic label: the title starts the card */
.guide-card__title:first-child { margin-top: 0; }
.guide-card__title a { color: var(--ink); }
.guide-card__title a:focus-visible { outline: none; }
/* the whole card is the link's target area */
.guide-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: 0.75rem; }
.guide-card__desc { flex: 1; margin-top: 0.5rem; font-size: 0.9375rem; line-height: 1.5rem; color: var(--ink-2); text-wrap: pretty; }
.guide-card__date { margin-top: 0.875rem; font-family: var(--font-mono); font-variant-ligatures: none; font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: var(--ink-3); }
.hub-topics { margin-top: 1rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
.hub-topic { padding: 1.25rem 1.25rem 0.75rem; }
.hub-topic__title { font-family: var(--font-display); font-weight: 650; font-size: 1.1875rem; line-height: 1.5rem; letter-spacing: -0.01em; color: var(--ink); }
.hub-topic__title a { color: inherit; }
.hub-topic__desc { margin-top: 0.375rem; font-size: 0.9375rem; line-height: 1.5rem; color: var(--ink-3); }
.guide-rows { margin-top: 0.75rem; }
/* the date always sits under the title, so the dates line up from row to row */
.guide-row { display: flex; flex-direction: column; align-items: flex-start; gap: 0.125rem; padding: 0.625rem 0; border-top: 1px solid var(--line); }
.guide-row a { font-weight: 500; color: var(--link); text-decoration: underline; text-underline-offset: 0.1875rem; text-decoration-thickness: 1px; }
.guide-row__date { font-family: var(--font-mono); font-variant-ligatures: none; font-size: 0.75rem; line-height: 1.25rem; color: var(--ink-3); white-space: nowrap; }
.hub-topic__more { padding: 0.625rem 0 0.25rem; border-top: 1px solid var(--line); }
.hub-topic__more .link-arrow { font-size: 0.9375rem; line-height: 1.5rem; }
.hub-back { margin-top: 2rem; }

/* /facts/: label and value rows */
.prose .facts-list { margin-bottom: 0; border-top: 1px solid var(--line); }
.facts-list > div { padding: 0.75rem 0; border-bottom: 1px solid var(--line); }
.facts-list dt { font-weight: 600; color: var(--ink); }
.facts-list dd { margin: 0.25rem 0 0; }
/* a contents box that opens the card (/facts/) starts at the card's padding */
.prose > .toc:first-child { margin-top: 0; }

/* the coral button has no border of its own: a transparent one keeps a pair of download buttons the same height (the
   outline one has a 1px border) */
.guide-cta__actions .btn--coral { border: 1px solid transparent; }
/* Windows high contrast: the download box's coral button keeps its outline */
@media (forced-colors: active) {
  .guide-cta .btn--coral { border: 1px solid ButtonText; }
}

/* phones: 44px tap targets (docs/COMPONENTS.md) for the ways back to the hub, and a taller hit area for the byline
   link, which sits in a 20px row (inline padding does not move the row) */
@media (max-width: 767.98px) {
  .guide .page__body { padding: 1.5rem 1rem; }
  .guide-prose .keypoints { padding: 0.75rem; }
  .guide-prose .callout { padding: 0.75rem 0.75rem 0.75rem 1rem; }
  .guide-prose .keypoints ul, .guide-prose .callout ul, .guide-prose .callout ol { padding-left: 1rem; }
  .guide-fig:not(.guide-fig--fit) .guide-fig__frame { margin-inline: -1rem; }
  .guide-fig:not(.guide-fig--fit) .guide-shot, .guide-fig:not(.guide-fig--fit) .guide-zoom { border-radius: 0; }
  .guide-fig:not(.guide-fig--fit) .guide-shot.window { box-shadow: var(--sh-ring); }
  .guide-fig--phone .guide-shot--wide { display: none; }
  .guide-fig--phone .guide-shot--phone { display: grid; }
  .guide-fig.guide-fig--phone .guide-fig__frame { width: fit-content; max-width: 100%; margin-inline: 0; }
  .guide-fig.guide-fig--phone .guide-shot, .guide-fig.guide-fig--phone .guide-zoom { border-radius: 0.5rem; }
  .guide-shot--phone > img { width: auto; max-width: calc(100% + 0.125rem); }
  .guide-cards:not(.guide-cards--topic) > .guide-card:nth-child(n+4) { display: none; }
  .crumbs { margin-bottom: 0.5rem; }
  .crumbs ol { row-gap: 0; }
  .crumbs a, .hub-back .link-arrow, .hub-topic__more .link-arrow { min-height: 2.75rem; }
  .hub-topic__title a { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .guide-meta a { padding-block: 0.375rem; }
}

@media (min-width: 768px) {
  .guide .page__body { padding: 2.5rem 3rem; }
  .guide .page__title { font-size: 2.5rem; line-height: 3rem; }
  .guide-prose, .page--reading .prose { font-size: 1.0625rem; line-height: 1.75rem; }
  .guide-cta { padding: 2rem 2.5rem; }
  .guide-cta__actions .btn { width: auto; min-height: 3.5rem; }
  .guide-cta__actions--pair .btn { width: 100%; }
  .guide-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
  .guide-card { padding: 1.5rem; }
  .hub-section { margin-top: 3.5rem; }
  .hub-section__title { font-size: 1.625rem; line-height: 2rem; }
  .hub-topic { padding: 1.5rem 1.75rem 1rem; }
  .facts-list > div { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 1.5rem; }
  .facts-list dd { margin: 0; }
}
@media (min-width: 1024px) {
  .hub-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
}
@media (min-width: 1280px) {
  .guide > .container { display: grid; grid-template-columns: minmax(0, 42.5rem) minmax(0, 15rem); column-gap: 4rem; align-items: start; }
  .guide > .container > * { grid-column: 1; }
  .guide > .container > .guide-toc {
    display: block; grid-column: 2; grid-row: 3 / span 2; position: sticky; top: 6.5rem; margin-top: 3rem;
    max-height: calc(100vh - 8rem); overflow-y: auto; overscroll-behavior: contain;
  }
  .guide-toc-inline { display: none; }
  .guide .page__body { padding: 3rem 3.5rem; }
  .guide .page__title { font-size: 2.75rem; line-height: 3.25rem; }
  .guide-cta { padding: 2.5rem 3.5rem; }
  .guide-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
  .guide-cards--topic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hub-section { margin-top: 4rem; }
}