/* FireCode LLC (firecodellc.app) - site stylesheet.
   Built on the ShortDrama Downloader design system (same type, spacing, components and breakpoints), with the
   FireCode colour template: warm neutrals, an orange-to-red fire gradient and ember accents.
   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. */


/* ==========================================================================
   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)
   FireCode colour template: warm neutrals, the fire gradient (orange to red) for actions and highlights,
   ember (deep orange) for small accents. Contrast: white on every fire-gradient stop >= 3:1 (the gradient
   buttons carry large, bold text only); --fire-deep >= 4.5:1 for small white text; --fire-text >= 3:1 on --bg
   (display sizes only); --ember, --link and --ink-3 >= 4.5:1 on --bg and --surface.
   ========================================================================== */
:root {
  color-scheme: light;
  --bg: #F6F4F1;             /* page ground (warm) */
  --surface: #FFFFFF;        /* cards, bars, footer */
  --surface-2: #FCFAF8;      /* inputs, rows */
  --stage: #EFEBE7;          /* showcase stage */
  --app-bg: #F3F5F7;         /* the apps' own window background in the screenshots */
  --fill: #F1EDE9;           /* chips, tracks, toggle track */
  --line: #E9E4DF;           /* hairlines, card borders */
  --line-2: #E3DDD7;
  --line-strong: #D9D2CB;    /* outline buttons, inputs, dashed rules */
  --line-faint: #C8C0B8;     /* inline "|" separators */
  --ink: #1A1512;            /* primary text */
  --ink-2: #4D4540;          /* secondary text */
  --ink-3: #665D57;          /* muted text, mono meta */
  --ink-4: #736A63;
  --ember: #B2410F;          /* kickers, checks, plan notes */
  --ember-soft: #FDEBDD;
  --link: #C2410C;
  --fire-solid: #EF561D;     /* solid fire: indicators, rings, radio dots */
  --fire-hover: #E24B17;
  --fire-press: #CF3F14;
  --fire-deep: #C9420F;      /* small white text on fire (badges) */
  --fire-deep-hover: #B5380C;
  --fire-soft: #FFEBDD;
  --fire-softer: #FFF6EF;
  --on-fire: #FFFFFF;
  --on-fire-strong: #1F0D05; /* dark text on the bright fire (the "Most popular" flag) */
  --fire-grad: linear-gradient(100deg, #F4641A 0%, #EC4A1E 55%, #DA2E22 100%);
  --fire-grad-hover: linear-gradient(100deg, #E85916 0%, #E0411B 55%, #CC281F 100%);
  --fire-grad-press: linear-gradient(100deg, #D94E12 0%, #D03817 55%, #BC231C 100%);
  --fire-grad-deep: linear-gradient(100deg, #C9420F 0%, #B5301A 100%);
  --fire-bright: linear-gradient(90deg, #FFB547 0%, #FF7A2A 100%);
  --fire-text: linear-gradient(90deg, #EB5F0E 0%, #E2461A 50%, #CB2E20 100%);
  --fire-ring: rgba(244, 100, 26, .35);
  --glow-1: rgba(255, 140, 40, .26);   /* hero ember glow */
  --glow-2: rgba(240, 70, 35, .14);
  --wall-fire-base: #FFC49B;           /* product panels: a soft fire mesh behind the app windows */
  --wall-fire-1: #FFB23F;
  --wall-fire-2: #FF7840;
  --wall-fire-3: #EE4127;
  --green: #2EB56A;
  --green-soft: #E3F5EA;
  --green-ink: #17693B;
  --wall: #D9A07A;
  --wall-veil: rgba(246, 244, 241, .10);
  --wall-tone: brightness(1.04);
  --glass: rgba(255, 255, 255, .82);
  --glass-badge: rgba(255, 255, 255, .94);
  --btn-o-hover: #F6F4F1;
  --btn-k-hover: #2E2723;
  --toggle-on-bg: #FFFFFF;
  --toggle-on-ink: #1A1512;
  --toggle-off-ink: #4D4540;
  --focus: #1A1512;
  --sh-1: 0 0.0625rem 0.125rem rgba(36, 22, 14, .06);
  --sh-card: 0 0.0625rem 0.125rem rgba(36, 22, 14, .06), 0 0.25rem 0.5rem rgba(36, 22, 14, .04);
  --sh-bar: 0 0.0625rem 0.125rem rgba(36, 22, 14, .14);
  --sh-raise: 0 0.25rem 0.5rem rgba(36, 22, 14, .12);
  --sh-feature: 0 0.5rem 1rem rgba(36, 22, 14, .14);
  --sh-window: 0 2rem 4rem -0.75rem rgba(36, 22, 14, .26), 0 0.125rem 0.5rem rgba(36, 22, 14, .08), 0 0 0 1px rgba(36, 22, 14, .08);
  --sh-figure: 0 0.5rem 1rem rgba(36, 22, 14, .10), 0 0 0 1px rgba(36, 22, 14, .08);
  --sh-ring: 0 0 0 1px rgba(36, 22, 14, .08);
  --scroll-shade: rgba(36, 22, 14, .16);
  --sh-toggle: 0 0.0625rem 0.125rem rgba(36, 22, 14, .14);
  --sh-fire: inset 0 -1px 0 rgba(0, 0, 0, .10), 0 0.0625rem 0.125rem rgba(201, 66, 15, .30), 0 0.625rem 1.5rem -0.5rem rgba(244, 100, 26, .55);
  --sh-fire-feature: 0 0.75rem 2rem -0.5rem rgba(244, 100, 26, .35), 0 0.25rem 0.75rem rgba(36, 22, 14, .08);

  --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: #1C1917;
  --surface: #26221F;
  --surface-2: #221E1B;
  --stage: #221E1B;
  --app-bg: #1F1F1F;
  --fill: #332E2A;
  --line: #3B3531;
  --line-2: #3B3531;
  --line-strong: #4D4640;
  --line-faint: #5E5650;
  --ink: #F7F3EF;
  --ink-2: #D4CCC5;
  --ink-3: #ABA29A;
  --ink-4: #928981;
  --ember: #FFA45C;
  --ember-soft: #3A2418;
  --link: #FF9A55;
  --fire-soft: #3B2418;
  --fire-softer: #2E1F17;
  --fire-text: linear-gradient(90deg, #FFB547 0%, #FF8A2E 45%, #FF5A2A 100%);
  --fire-ring: rgba(255, 122, 42, .40);
  --glow-1: rgba(255, 110, 30, .22);
  --glow-2: rgba(230, 50, 30, .16);
  --wall-fire-base: #2B140C;
  --wall-fire-1: #9A3A12;
  --wall-fire-2: #C2481A;
  --wall-fire-3: #6A1C10;
  --green-soft: #1E3A2A;
  --green-ink: #6FD89A;
  --wall: #4A3027;
  --wall-veil: rgba(28, 25, 23, .16);
  --wall-tone: brightness(.62);
  --glass: rgba(38, 34, 31, .82);
  --glass-badge: rgba(28, 25, 23, .90);
  --btn-o-hover: #332E2A;
  --btn-k-hover: #E2DCD6;
  --toggle-on-bg: #4D4640;
  --toggle-on-ink: #F7F3EF;
  --toggle-off-ink: #ABA29A;
  --focus: #F7F3EF;
  --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);
  --sh-fire: inset 0 -1px 0 rgba(0, 0, 0, .18), 0 0.0625rem 0.125rem rgba(0, 0, 0, .40), 0 0.625rem 1.5rem -0.5rem rgba(244, 100, 26, .45);
  --sh-fire-feature: 0 0.75rem 2rem -0.5rem rgba(255, 110, 30, .30), 0 0.25rem 0.75rem rgba(0, 0, 0, .40);
}

/* 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: #1C1917;
    --surface: #26221F;
    --surface-2: #221E1B;
    --stage: #221E1B;
    --app-bg: #1F1F1F;
    --fill: #332E2A;
    --line: #3B3531;
    --line-2: #3B3531;
    --line-strong: #4D4640;
    --line-faint: #5E5650;
    --ink: #F7F3EF;
    --ink-2: #D4CCC5;
    --ink-3: #ABA29A;
    --ink-4: #928981;
    --ember: #FFA45C;
    --ember-soft: #3A2418;
    --link: #FF9A55;
    --fire-soft: #3B2418;
    --fire-softer: #2E1F17;
    --fire-text: linear-gradient(90deg, #FFB547 0%, #FF8A2E 45%, #FF5A2A 100%);
    --fire-ring: rgba(255, 122, 42, .40);
    --glow-1: rgba(255, 110, 30, .22);
    --glow-2: rgba(230, 50, 30, .16);
    --wall-fire-base: #2B140C;
    --wall-fire-1: #9A3A12;
    --wall-fire-2: #C2481A;
    --wall-fire-3: #6A1C10;
    --green-soft: #1E3A2A;
    --green-ink: #6FD89A;
    --wall: #4A3027;
    --wall-veil: rgba(28, 25, 23, .16);
    --wall-tone: brightness(.62);
    --glass: rgba(38, 34, 31, .82);
    --glass-badge: rgba(28, 25, 23, .90);
    --btn-o-hover: #332E2A;
    --btn-k-hover: #E2DCD6;
    --toggle-on-bg: #4D4640;
    --toggle-on-ink: #F7F3EF;
    --toggle-off-ink: #ABA29A;
    --focus: #F7F3EF;
    --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);
    --sh-fire: inset 0 -1px 0 rgba(0, 0, 0, .18), 0 0.0625rem 0.125rem rgba(0, 0, 0, .40), 0 0.625rem 1.5rem -0.5rem rgba(244, 100, 26, .45);
    --sh-fire-feature: 0 0.75rem 2rem -0.5rem rgba(255, 110, 30, .30), 0 0.25rem 0.75rem rgba(0, 0, 0, .40);
  }
}

@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--fire { background: var(--fire-grad); color: var(--on-fire); box-shadow: var(--sh-fire); }
.btn--fire:hover { background: var(--fire-grad-hover); }
.btn--fire:active { background: var(--fire-grad-press); }
.btn--deep { background: var(--fire-deep); color: var(--on-fire); }
.btn--deep:hover { background: var(--fire-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(--fire-soft); color: var(--link); border: 1px solid var(--fire-solid); }
.chip--ember { height: 1.5rem; padding: 0 0.625rem; background: var(--ember-soft); color: var(--ember); 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-ember { fill: var(--ember); }
.ico-muted { fill: var(--ink-3); }
.check { flex: none; width: 1.125rem; height: 1.125rem; margin-top: 0.1875rem; fill: var(--ember); }
.check-circle { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.1875rem; }
.check-circle circle { fill: var(--ember-soft); }
.check-circle path { fill: none; stroke: var(--ember); 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(--ember); }
.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. Pricing and support buttons
   ========================================================================== */

/* ---- 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(--fire-solid); 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(--fire-solid); color: var(--on-fire-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(--ember); }
.plan .btn { margin-top: 1.5rem; }
.plan__alt { display: block; margin-top: 0.25rem; padding: 0.625rem 0; text-align: center; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--link); }
.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; }
}


/* ==========================================================================
   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. Nothing here applies at 1920 or less.
   ========================================================================== */
@media (min-width: 1921px) {
  html { font-size: clamp(16px, min(100vw / 200, 100vh / 100) + 6.4px, 48px); }
  :root { --content: clamp(80rem, 66.667vw, 90rem); }
  .nav { width: min(var(--content) - 5rem, 100% - 2 * var(--gutter) - 5rem); }
  /* app windows never draw wider than their files (ShortDrama 2x: 2880 px, Hongguo: 1600 px) */
  .co-app__shot { max-width: calc(2880px - 0.125rem); }
  .co-app__shot.shot--hg { max-width: calc(1600px - 0.125rem); }
  .sources__card { padding: 3rem; }
  .sources__list li { font-size: 1.0625rem; line-height: 1.625rem; }
  body > main.page { display: flex; flex-direction: column; justify-content: center; }
  .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; }
}

/* ==========================================================================
   11. FireCode additions (new class names only)
   ========================================================================== */
/* brand: the flame tile + "FireCode"; the footer adds a muted LLC */
.brand__llc { margin-left: 0.3125rem; font-family: var(--font-mono); font-variant-ligatures: none; font-size: 0.75em; font-weight: 600; color: var(--ink-3); }

/* fire gradient text: display sizes only (>= 3:1 on --bg in both themes); each line gets the whole gradient */
.fire-text {
  padding-bottom: 0.12em;
  background: var(--fire-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
@media (forced-colors: active) {
  .fire-text { background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; }
}

/* FREE badge and the mono meta line (the product sites' hero pieces, used by the company page) */
.hero-pill__badge {
  flex: none; display: inline-flex; align-items: center; height: 1.625rem; padding: 0 0.5625rem; border-radius: 999px;
  background: var(--fire-grad-deep); color: #FFFFFF;
  font-family: var(--font-mono); font-variant-ligatures: none; font-size: 0.75rem; line-height: 1rem; font-weight: 700; letter-spacing: .06em;
}
.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 { white-space: normal; } }
@media (min-width: 768px) {
  .hero-pill__badge { padding: 0 0.625rem; }
  .hero__meta { font-size: 0.8125rem; line-height: 1.25rem; }
}
.btn--deep, .btn--deep:hover { color: #FFFFFF; }
/* small mono label over a card title (the product sites' kicker) */
.kicker { font-family: var(--font-mono); font-variant-ligatures: none; font-size: 0.75rem; line-height: 1rem; font-weight: 600; color: var(--ember); }
@media (min-width: 768px) { .kicker { font-size: 0.8125rem; line-height: 1.125rem; } }

/* hero: an ember glow behind the headline */
.co-hero { position: relative; isolation: isolate; overflow-x: clip; }
.co-hero::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: -14rem; width: max(70rem, 130%); height: calc(100% + 20rem); transform: translateX(-50%);
  background:
    radial-gradient(closest-side at 68% 46%, var(--glow-1), transparent),
    radial-gradient(closest-side at 84% 34%, var(--glow-2), transparent),
    radial-gradient(closest-side at 24% 40%, var(--glow-2), transparent);
}
.co-hero > .container { position: relative; }

/* product panels: a fire mesh behind each app window (the product sites use a blurred poster here) */
.wall--fire {
  background:
    radial-gradient(60% 75% at 12% 16%, var(--wall-fire-1), transparent 72%),
    radial-gradient(55% 70% at 94% 22%, var(--wall-fire-2), transparent 72%),
    radial-gradient(80% 85% at 55% 115%, var(--wall-fire-3), transparent 72%),
    var(--wall-fire-base);
}
.shot--hg { aspect-ratio: 1600 / 1000; }   /* Hongguo Downloader window, 1600 x 1000 */
.co-app__links { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.625rem; }
.co-app__links .co-app__link { margin-top: 0; }
.co-app__link svg { fill: none; stroke: currentColor; }
@media (min-width: 768px) {
  .co-app__links { flex-direction: row; flex-wrap: wrap; gap: 0.75rem; }
}

/* how we build: three cards on the "two sources" card component */
.value__icon {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-bottom: 1.25rem;
  border-radius: 0.75rem; background: var(--fire-soft);
}
.value__icon svg { width: 1.375rem; height: 1.375rem; fill: var(--ember); }
@media (min-width: 768px) and (max-width: 1023.98px) {
  .sources--3 > :last-child { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .sources--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* free-plan line: a warm wash from the left */
.co-free { background: linear-gradient(100deg, var(--fire-softer) 0%, var(--surface) 60%); }

/* plans: the same four plans in every app; the picker sets which app's website the buy buttons open */
.plan-picker {
  margin: 2rem auto 0; display: flex; width: 100%; max-width: 30rem; padding: 0.25rem;
  border-radius: 999px; background: var(--fill);
}
.plan-picker button {
  flex: 1 1 50%; min-width: 0; min-height: 2.75rem; padding: 0 0.875rem; border: 0; border-radius: 999px;
  background: transparent; color: var(--toggle-off-ink); cursor: pointer;
  font-size: 0.9375rem; line-height: 1.25rem; font-weight: 600; white-space: nowrap;
}
.plan-picker button:hover { color: var(--ink); }
.plan-picker button[aria-pressed="true"] { background: var(--toggle-on-bg); color: var(--toggle-on-ink); box-shadow: var(--sh-toggle); }
:root:not(.js) .plan-picker { display: none; }
@media (max-width: 767.98px) { .plan-picker { margin-top: 1.5rem; } }
@media (min-width: 768px) { .plans { margin-top: 2.5rem; } }
@media (min-width: 1280px) { .plans { margin-top: 3rem; } }
.plan--featured {
  border-color: transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--fire-grad) border-box;
  box-shadow: var(--sh-fire-feature);
}
.plan__flag { background: var(--fire-bright); color: var(--on-fire-strong); }

/* footer: the company's postal address under the brand */
.footer__addr { margin-top: 0.75rem; font-style: normal; font-size: 0.875rem; line-height: 1.375rem; color: var(--ink-3); }

/* 404 page: the two buttons under the heading */
.nf__actions { margin-top: 2rem; }
@media (min-width: 768px) { .nf__actions { margin-top: 2.5rem; } }