/* FlameCode LLC (flamecode.app) - site stylesheet.
   One design system: warm neutrals, an orange-to-red fire gradient and ember accents, the same type, spacing,
   components and breakpoints on every page; FlameCode's own sections are in section 12.
   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)
   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; }

/* app window frame around a shot */
.window { border-radius: 0.625rem; box-shadow: var(--sh-window); background: var(--surface); }

/* ---- 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 brand name 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. Support buttons
   ========================================================================== */
/* ---- 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. Card grids (two, three or four cards 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 - 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; }
}

/* 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); }
  .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. Fire additions (new class names only)
   ========================================================================== */
/* brand: the flame tile + the name; 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);
}
.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%); }

/* 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; } }

/* ==========================================================================
   12. FlameCode additions (flamecode.app): products, the Drama Studio story, the studio window.
       New class names only (fl-*, reel, float, studio, schip, lchip, wave, state, voices, tracks, progress).
       The pictures of Drama Studio are drawn in HTML and CSS (no screenshots yet: the app is not out).
   ========================================================================== */
:root {
  /* languages in their own scripts (Vietnamese, Chinese, Thai, Japanese, Korean...): the system fonts cover them all */
  --font-intl: 'Segoe UI', system-ui, -apple-system, 'Noto Sans', 'PingFang SC', 'Hiragino Sans', 'Microsoft YaHei', 'Malgun Gothic', 'Leelawadee UI', sans-serif;
}

/* a mono kicker above a section title */
.fl-kicker { margin-bottom: 0.75rem; }
@media (min-width: 768px) { .fl-kicker { margin-bottom: 1rem; } }

/* ---- Our products: Drama Studio (featured) and "more on the way" ---------- */
.fl-products { margin-top: 2rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.fl-product { display: flex; flex-direction: column; overflow: hidden; }
.fl-product__visual { aspect-ratio: 1 / 1; border-bottom: 1px solid var(--line); }
.fl-product__body { flex: 1; display: flex; flex-direction: column; padding: 1.5rem; }
.fl-product__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 0.875rem; }
.fl-product__logo { flex: none; width: 2.75rem; height: 2.75rem; }
.fl-product__name { min-width: 0; }
.fl-product__tag { margin-top: 0.125rem; font-size: 0.8125rem; line-height: 1.25rem; font-weight: 500; color: var(--ink-3); }
.fl-product__head .chip { margin-left: auto; }
@media (max-width: 479.98px) { .fl-product__head .chip { margin-left: 3.625rem; } }   /* its own line, under the name */
.fl-product__text { margin-top: 1.125rem; font-size: 1rem; line-height: 1.625rem; color: var(--ink-2); text-wrap: pretty; }
.fl-product__list { margin-top: 1.25rem; }
.fl-product__actions { margin-top: 1.75rem; display: flex; flex-direction: column; gap: 0.625rem; }
.fl-product__actions .btn { display: flex; width: 100%; height: 3rem; }
.fl-product__actions .btn svg { width: 1.125rem; height: 1.125rem; }
.fl-product__actions .btn--outline svg { fill: none; stroke: currentColor; }
@media (min-width: 600px) { .fl-product__visual { aspect-ratio: 16 / 10; } }
@media (min-width: 768px) {
  .fl-products { margin-top: 2.5rem; gap: 1.5rem; }
  .fl-product__body { padding: 1.75rem 2rem 2rem; }
  .fl-product__logo { width: 3rem; height: 3rem; }
  .fl-product__text { font-size: 1.0625rem; line-height: 1.6875rem; }
  .fl-product__actions { flex-direction: row; flex-wrap: wrap; gap: 0.75rem; }
  .fl-product__actions .btn { display: inline-flex; width: auto; height: 2.75rem; }
}
@media (min-width: 1024px) {
  .fl-product { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); }
  .fl-product__visual { aspect-ratio: auto; min-height: 33rem; border-bottom: 0; border-right: 1px solid var(--line); }
  .fl-product__body { justify-content: center; padding: 2.5rem 2.75rem; }
}
@media (min-width: 1280px) {
  .fl-products { margin-top: 3.5rem; gap: 2rem; }
  .fl-product__visual { min-height: 36rem; }
  .fl-product__body { padding: 3rem 3.5rem; }
}

/* the next products: an empty, dashed slot */
.fl-next {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1rem;
  padding: 1.5rem; border: 1.5px dashed var(--line-strong); border-radius: 0.75rem;
}
.fl-next__icon { flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 0.875rem; background: var(--fill); color: var(--ink-3); }
.fl-next__icon svg { width: 1.25rem; height: 1.25rem; fill: currentColor; }
.fl-next__title { margin-top: 0.375rem; }
.fl-next__text { margin-top: 0.375rem; font-size: 1rem; line-height: 1.625rem; color: var(--ink-2); text-wrap: pretty; }
@media (min-width: 768px) { .fl-next { flex-direction: row; align-items: center; gap: 1.5rem; padding: 1.75rem 2rem; } }

/* ---- The product picture: a short drama playing, its subtitle going through the languages ---- */
.fl-scene { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.fl-stage { position: relative; height: 86%; aspect-ratio: 9 / 16; }
.fl-stage > .reel { width: 100%; height: 100%; }

/* floating cards beside the frame */
.float {
  position: absolute; z-index: 1;
  padding: 0.75rem; border-radius: 0.875rem;
  background: var(--glass-badge); border: 1px solid var(--line); box-shadow: var(--sh-feature);
  -webkit-backdrop-filter: blur(0.75rem); backdrop-filter: blur(0.75rem);
  font-size: 0.75rem; line-height: 1rem; color: var(--ink);
}
.float__label { font-family: var(--font-mono); font-variant-ligatures: none; font-size: 0.625rem; line-height: 0.875rem; font-weight: 600; color: var(--ink-3); }
.float--langs { right: calc(100% - 1.25rem); top: 9%; width: 9.75rem; }
.float--langs ul { margin-top: 0.5rem; display: grid; gap: 0.125rem; }
.float--langs li {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  height: 1.625rem; padding: 0 0.5rem; border-radius: 0.5rem;
  font-family: var(--font-intl); font-size: 0.75rem; font-weight: 500; color: var(--ink-2); white-space: nowrap;
}
.float--langs small { font-family: var(--font-mono); font-variant-ligatures: none; font-size: 0.5625rem; color: var(--ink-3); }
.float--voice {
  left: calc(100% - 1.75rem); bottom: 13%; width: 12rem;
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.625rem;
}
.float--voice .wave { grid-column: 1 / -1; height: 1.5rem; color: var(--fire-solid); }
.float__who b { display: block; font-size: 0.8125rem; line-height: 1.125rem; font-weight: 600; color: var(--ink); }
.float__who small { display: block; font-size: 0.6875rem; line-height: 1rem; color: var(--ink-3); }
@media (max-width: 599.98px) { .float { display: none; } }
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .fl-stage { height: 74%; }
  .float--langs { width: 8.75rem; }
  .float--voice { width: 10.5rem; }
}

/* ---- Reel: a vertical (9:16) short-drama frame -------------------------------------------------- */
.reel {
  position: relative; overflow: hidden; isolation: isolate;
  width: 100%; aspect-ratio: 9 / 16; border-radius: 1.125rem;
  background: #1B0E0A; color: #FFFFFF;
  box-shadow: 0 1.75rem 3.5rem -1rem rgba(36, 22, 14, .5), inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.reel__scene { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.reel__top { position: absolute; left: 0.75rem; right: 0.75rem; top: 0.75rem; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.reel__badge {
  display: inline-flex; align-items: center; gap: 0.375rem; height: 1.375rem; padding: 0 0.5rem; border-radius: 999px;
  background: rgba(0, 0, 0, .42); font-family: var(--font-mono); font-variant-ligatures: none;
  font-size: 0.625rem; line-height: 1; font-weight: 700; letter-spacing: .04em;
}
.reel__badge i { width: 0.375rem; height: 0.375rem; border-radius: 50%; background: #FF6A2A; box-shadow: 0 0 0 0.1875rem rgba(255, 106, 42, .28); }
.reel__ep { font-family: var(--font-mono); font-variant-ligatures: none; font-size: 0.625rem; line-height: 1; font-weight: 600; color: rgba(255, 255, 255, .8); text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.reel__lines { position: absolute; left: 0.625rem; right: 0.625rem; bottom: 1.625rem; height: 4.25rem; }
.reel__line {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; align-items: center; gap: 0.4375rem; text-align: center; opacity: 0;
}
.reel__lang {
  display: inline-flex; align-items: center; height: 1.125rem; padding: 0 0.5rem; border-radius: 999px;
  background: var(--fire-grad); color: #FFFFFF;
  font-family: var(--font-intl); font-size: 0.5625rem; line-height: 1; font-weight: 700; letter-spacing: .06em; white-space: nowrap;
}
.reel__sub {
  font-family: var(--font-intl); font-size: 0.9375rem; line-height: 1.25rem; font-weight: 600; text-wrap: balance;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .75), 0 0 0.875rem rgba(0, 0, 0, .5);
}
.reel__bar { position: absolute; left: 0.75rem; right: 0.75rem; bottom: 0.75rem; height: 0.1875rem; border-radius: 999px; background: rgba(255, 255, 255, .24); overflow: hidden; }
.reel__bar i { display: block; width: 38%; height: 100%; border-radius: inherit; background: #FFFFFF; }

/* six lines, three seconds each; the language list beside the frame lights up in step */
@keyframes fl-cycle {
  0% { opacity: 0; transform: translateY(0.375rem); }
  2.5%, 14% { opacity: 1; transform: none; }
  16.67%, 100% { opacity: 0; transform: translateY(-0.25rem); }
}
@keyframes fl-on {
  0% { background-color: transparent; color: var(--ink-2); }
  2.5%, 14% { background-color: var(--fire-soft); color: var(--link); }
  16.67%, 100% { background-color: transparent; color: var(--ink-2); }
}
@keyframes fl-play { from { width: 6%; } to { width: 94%; } }
.reel--live .reel__line { animation: fl-cycle 18s linear infinite; }
.fl-scene .float--langs li { animation: fl-on 18s linear infinite; }
.reel--live .reel__line:nth-child(2), .fl-scene .float--langs li:nth-child(2) { animation-delay: 3s; }
.reel--live .reel__line:nth-child(3), .fl-scene .float--langs li:nth-child(3) { animation-delay: 6s; }
.reel--live .reel__line:nth-child(4), .fl-scene .float--langs li:nth-child(4) { animation-delay: 9s; }
.reel--live .reel__line:nth-child(5), .fl-scene .float--langs li:nth-child(5) { animation-delay: 12s; }
.reel--live .reel__line:nth-child(6), .fl-scene .float--langs li:nth-child(6) { animation-delay: 15s; }
.reel--live .reel__bar i { animation: fl-play 18s linear infinite; }
/* a still frame (the studio window), and anyone who asked for less motion: the English line only */
.reel--still .reel__line--en { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .reel--live .reel__line, .fl-scene .float--langs li, .reel--live .reel__bar i { animation: none; }
  .reel--live .reel__line--en { opacity: 1; }
  .fl-scene .float--langs li.is-en { background: var(--fire-soft); color: var(--link); }
}

/* ---- Waveform: bars drawn by CSS (heights follow a fixed pattern) ----------------------------- */
.wave { display: flex; align-items: center; gap: 0.1875rem; min-width: 0; height: 1.5rem; overflow: hidden; color: var(--ink-3); }
.wave i { flex: 0 0 0.1875rem; height: 30%; border-radius: 999px; background: currentColor; }
.wave i:nth-child(2n) { height: 55%; }
.wave i:nth-child(3n) { height: 82%; }
.wave i:nth-child(5n) { height: 42%; }
.wave i:nth-child(7n) { height: 100%; }
.wave i:nth-child(11n) { height: 22%; }
.wave--alt { flex-direction: row-reverse; justify-content: flex-end; }
.wave--live i { animation: fl-wave 1.2s ease-in-out infinite; }
.wave--live i:nth-child(3n+1) { animation-delay: -0.3s; }
.wave--live i:nth-child(3n+2) { animation-delay: -0.7s; }
.wave--live i:nth-child(4n) { animation-delay: -0.95s; }
@keyframes fl-wave { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.45); } }
@media (prefers-reduced-motion: reduce) { .wave--live i { animation: none; } }

/* small round initials for a character */
.avatar {
  flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--fire-soft); color: var(--ember);
  font-family: var(--font-display); font-size: 0.8125rem; line-height: 1; font-weight: 700;
}
.avatar--b { background: var(--fill); color: var(--ink-2); }
.avatar--c { background: var(--green-soft); color: var(--green-ink); }

/* ---- The studio window (Drama Studio section): the app as we are building it ------------------- */
.fl-studio { margin-top: 2rem; padding: 1rem; border-radius: 0.75rem; }
.studio {
  position: relative; overflow: hidden; border-radius: 0.75rem;
  background: var(--surface); box-shadow: var(--sh-window); color: var(--ink);
  font-size: 0.8125rem; line-height: 1.125rem;
}
.studio__bar { display: flex; align-items: center; gap: 0.5rem; height: 2.5rem; padding: 0 0.875rem; border-bottom: 1px solid var(--line); background: var(--surface); }
.studio__bar img { flex: none; width: 1.125rem; height: 1.125rem; }
.studio__app { flex: none; font-weight: 600; }
.studio__file { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-3); }
.studio__file::before { content: "/"; margin: 0 0.5rem 0 0.125rem; color: var(--line-faint); }
.studio__ctl { margin-left: auto; display: flex; align-items: center; gap: 1.125rem; color: var(--ink-3); }
.studio__ctl svg { width: 0.625rem; height: 0.625rem; fill: none; stroke: currentColor; stroke-width: 1.25; }
.studio__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.875rem; padding: 0.875rem; background: var(--bg); }
.studio__stage { display: grid; place-items: center; padding: 1rem 0; border-radius: 0.625rem; background: var(--stage); }
.studio__stage .reel { width: min(12rem, 62%); }
.studio__panel { display: grid; gap: 0.875rem; min-width: 0; align-content: start; }
.studio__group { min-width: 0; padding: 0.875rem; border: 1px solid var(--line); border-radius: 0.625rem; background: var(--surface); }
.studio__label {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  font-family: var(--font-mono); font-variant-ligatures: none; font-size: 0.6875rem; line-height: 1rem; font-weight: 600; color: var(--ink-3);
}
.studio__label span:last-child { font-weight: 500; }
.studio__chips { margin-top: 0.625rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }
.studio__arrow { flex: none; width: 1rem; height: 1rem; fill: none; stroke: var(--ink-3); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.schip {
  display: inline-flex; align-items: center; gap: 0.3125rem; height: 1.75rem; padding: 0 0.625rem; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--surface-2);
  font-family: var(--font-intl); font-size: 0.75rem; line-height: 1; font-weight: 500; color: var(--ink-2); white-space: nowrap;
}
.schip small { font-family: var(--font-mono); font-variant-ligatures: none; font-size: 0.5625rem; color: var(--ink-3); }
.schip--src { border-color: var(--line); background: var(--fill); color: var(--ink); }
.schip--on { border-color: var(--fire-solid); background: var(--fire-soft); color: var(--link); font-weight: 600; }
.schip--on svg { width: 0.75rem; height: 0.75rem; fill: currentColor; }
.schip--more { border-style: dashed; background: transparent; color: var(--ink-3); }

/* voices: one row per character */
.voices { margin-top: 0.375rem; display: grid; }
.voices li { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0; }
.voices li + li { border-top: 1px solid var(--line); }
.voices__who { flex: 1; min-width: 0; }
.voices__who b { display: block; font-weight: 600; color: var(--ink); }
.voices__who small { display: block; font-size: 0.6875rem; line-height: 1rem; color: var(--ink-3); }
.voices .wave { flex: 0 1 4.5rem; height: 1.25rem; color: var(--fire-solid); }

/* tracks: what the dub replaces and what it keeps */
.tracks { margin-top: 0.375rem; display: grid; }
.track { display: grid; grid-template-columns: minmax(0, 7.25rem) minmax(0, 1fr) auto; align-items: center; gap: 0.75rem; padding: 0.5rem 0; }
.track + .track { border-top: 1px solid var(--line); }
.track__name b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--ink); }
.track__name small { display: block; font-family: var(--font-intl); font-size: 0.6875rem; line-height: 1rem; color: var(--ink-3); }
.track .wave { height: 1.5rem; }
.track--orig .wave { color: var(--line-strong); }
.track--dub .wave { color: var(--fire-solid); }
.track--music .wave { color: var(--ink-3); }
.track__sub {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 0.25rem 0.5rem; border-radius: 0.375rem; background: var(--fill);
  font-family: var(--font-intl); font-size: 0.75rem; line-height: 1rem; color: var(--ink);
}
.state {
  display: inline-flex; align-items: center; height: 1.25rem; padding: 0 0.4375rem; border-radius: 0.3125rem;
  font-family: var(--font-mono); font-variant-ligatures: none; font-size: 0.625rem; line-height: 0.875rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
}
.state--new { background: var(--fire-soft); color: var(--link); }
.state--kept { background: var(--green-soft); color: var(--green-ink); }
.state--off { background: var(--fill); color: var(--ink-3); }

/* the bottom bar: the whole series, episode by episode */
.studio__foot {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0.875rem;
  border-top: 1px solid var(--line); background: var(--surface);
  font-size: 0.75rem; line-height: 1rem; color: var(--ink-2);
}
.studio__foot b { font-weight: 600; color: var(--ink); white-space: nowrap; }
.progress { flex: 1; min-width: 3rem; height: 0.375rem; border-radius: 999px; background: var(--fill); overflow: hidden; }
.progress i { display: block; width: 72%; height: 100%; border-radius: inherit; background: var(--fire-grad); }
.studio__count { font-family: var(--font-mono); font-variant-ligatures: none; font-variant-numeric: tabular-nums; font-size: 0.6875rem; color: var(--ink-3); white-space: nowrap; }
@media (max-width: 479.98px) {
  .studio__file, .studio__ctl, .voices .wave, .studio__what { display: none; }
  .track { grid-template-columns: minmax(0, 6.25rem) minmax(0, 1fr) auto; gap: 0.5rem; }
}
@media (min-width: 768px) {
  .fl-studio { margin-top: 2.5rem; padding: 2rem; }
  .studio { font-size: 0.875rem; line-height: 1.25rem; }
  .studio__bar { height: 2.75rem; padding: 0 1rem; }
  .studio__body { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 1rem; padding: 1rem; }
  .studio__stage { padding: 1.25rem; align-content: center; }
  .studio__stage .reel { width: 100%; }
  .studio__foot { padding: 0.875rem 1rem; }
}
@media (min-width: 1024px) {
  .fl-studio { padding: 3rem; }
  .studio__body { grid-template-columns: minmax(0, 13.5rem) minmax(0, 1fr); }
  .studio__panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); }
  .studio__group--langs { grid-column: 1 / -1; }
}
@media (min-width: 1280px) {
  .fl-studio { margin-top: 3.5rem; padding: 4rem 5rem; }
  .studio__body { grid-template-columns: minmax(0, 14.5rem) minmax(0, 1fr); gap: 1.25rem; padding: 1.25rem; }
}

/* the line under the studio window */
.fl-caption { margin-top: 1rem; font-family: var(--font-mono); font-variant-ligatures: none; font-size: 0.75rem; line-height: 1.125rem; font-weight: 500; color: var(--ink-3); text-wrap: pretty; }
@media (min-width: 768px) { .fl-caption { margin-top: 1.25rem; font-size: 0.8125rem; line-height: 1.25rem; } }

/* ---- How it works: three numbered steps ------------------------------------------------------- */
.fl-steps { margin-top: 2rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.fl-step { padding: 1.5rem; }
.fl-step__num {
  display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 0.75rem;
  background: var(--fire-grad); color: #FFFFFF; box-shadow: var(--sh-fire);
  font-family: var(--font-mono); font-variant-ligatures: none; font-size: 0.9375rem; line-height: 1; font-weight: 700;
}
.fl-step__title { margin-top: 1.25rem; }
.fl-step__text { margin-top: 0.625rem; font-size: 1rem; line-height: 1.625rem; color: var(--ink-2); text-wrap: pretty; }
@media (min-width: 768px) {
  .fl-steps { margin-top: 2.5rem; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
  .fl-step { padding: 2rem; }
}
@media (min-width: 1280px) {
  .fl-steps { margin-top: 3.5rem; gap: 2rem; }
  .fl-step { padding: 2.5rem; }
}

/* ---- Features: four cards (two by two, then four in a row) ---------------------------------- */
.fl-feature__text { margin-top: 0.75rem; font-size: 1rem; line-height: 1.625rem; color: var(--ink-2); text-wrap: pretty; }
@media (min-width: 1280px) {
  .sources--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sources--4 .sources__card { padding: 2rem; }
}

/* ---- Languages: chips in each language's own script ------------------------------------------ */
.fl-langs { display: grid; gap: 1.25rem; padding: 1.5rem; }
.fl-langs__title { margin-top: 0.5rem; }
.fl-langs__list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.lchip {
  display: inline-flex; align-items: center; height: 2.25rem; padding: 0 0.875rem; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--surface-2);
  font-family: var(--font-intl); font-size: 0.9375rem; line-height: 1; font-weight: 500; color: var(--ink); white-space: nowrap;
}
.lchip--src { border-color: var(--fire-solid); background: var(--fire-soft); color: var(--link); font-weight: 600; }
.lchip--more { border-style: dashed; background: transparent; color: var(--ink-3); }
.fl-langs__note { font-size: 0.875rem; line-height: 1.375rem; color: var(--ink-3); }
@media (min-width: 768px) { .fl-langs { padding: 2rem; } }
@media (min-width: 1024px) {
  .fl-langs { grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); align-items: center; column-gap: 3rem; padding: 2.5rem 3rem; }
  .fl-langs__note { grid-column: 2; margin-top: -0.25rem; }
}

/* ---- Who it is for: studios and creators first (the fire border), viewers second ------------- */
.fl-who__text { margin-top: 0.75rem; font-size: 1rem; line-height: 1.625rem; color: var(--ink-2); text-wrap: pretty; }
.fl-who--main {
  border-color: transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--fire-grad) border-box;
  box-shadow: var(--sh-fire-feature);
}

/* ---- Coming soon: the free-plan line's card, with a button ------------------------------------ */
.fl-soon .btn { flex: none; }
.fl-soon .btn svg { width: 1.125rem; height: 1.125rem; fill: currentColor; }
@media (max-width: 767.98px) { .fl-soon .btn { display: flex; width: 100%; height: 3rem; } }

/* ---- Large screens ---------------------------------------------------------------------------- */
@media (min-width: 1921px) {
  .sources--4 .sources__card { padding: 2.5rem; }
}