/* Gold — beREEL brand default */
.theme-gold {
  --accent: #C9A227;
  --accent-bright: #E8B931;
  --accent-glow: #F3D56A;
  --accent-soft: #F3E6B3;
  --accent-wash: #FBF6E4;
}

/* Electric blue — Mark OS register */
.theme-periwinkle {
  --accent: #2F5BFF;
  --accent-bright: #5B7CFF;
  --accent-glow: #9BB0FF;
  --accent-soft: #D6DEFF;
  --accent-wash: #EEF1FF;
}

.theme-indigo {
  --accent: #1E1B4B;
  --accent-bright: #A99BFF;
  --accent-glow: #C4B8FF;
  --accent-soft: #D4CCF2;
  --accent-wash: #EDEAF5;
}

/* Sage */
.theme-sage {
  --accent: #5F7A68;
  --accent-bright: #8FA496;
  --accent-glow: #B7C9BC;
  --accent-soft: #DDE7DF;
  --accent-wash: #F3F7F4;
}

/* Teal */
.theme-teal {
  --accent: #1B7F79;
  --accent-bright: #4DA9A3;
  --accent-glow: #82C7C2;
  --accent-soft: #CDECE9;
  --accent-wash: #EDF8F7;
}

/* Forest */
.theme-forest {
  --accent: #2E5D4E;
  --accent-bright: #5B8B79;
  --accent-glow: #88B39F;
  --accent-soft: #D7E6DF;
  --accent-wash: #F1F7F4;
}

/* Dusty Cyan */
.theme-cyan {
  --accent: #3E7C92;
  --accent-bright: #72A8BD;
  --accent-glow: #9FC9D8;
  --accent-soft: #D9EBF2;
  --accent-wash: #F3FAFC;
}

/* Burgundy */
.theme-burgundy {
  --accent: #6A314C;
  --accent-bright: #A15D79;
  --accent-glow: #C38AA1;
  --accent-soft: #EBD8E0;
  --accent-wash: #F8F2F4;
}

/* Voltage — Supahub-style action violet */
.theme-voltage {
  --accent: #862FE7;
  --accent-bright: #A855F7;
  --accent-glow: #C4B5FD;
  --accent-soft: #E9D5FF;
  --accent-wash: #F5F0FF;
}

/* Coral — Pendo-style pank rose */
.theme-coral {
  --accent: #E11D5A;
  --accent-bright: #FF4876;
  --accent-glow: #FF8AAD;
  --accent-soft: #FFD0DC;
  --accent-wash: #FFF0F4;
}

/* Amber — warm SaaS pulse */
.theme-amber {
  --accent: #C2410C;
  --accent-bright: #EA580C;
  --accent-glow: #FDBA74;
  --accent-soft: #FED7AA;
  --accent-wash: #FFF7ED;
}

/* Sky — modern product primary */
.theme-sky {
  --accent: #0284C7;
  --accent-bright: #0EA5E9;
  --accent-glow: #7DD3FC;
  --accent-soft: #BAE6FD;
  --accent-wash: #F0F9FF;
}

/* Signal — electric mint / success green for CTAs */
.theme-signal {
  --accent: #059669;
  --accent-bright: #10B981;
  --accent-glow: #6EE7B7;
  --accent-soft: #A7F3D0;
  --accent-wash: #ECFDF5;
}

/* Magenta — hot accent, consumer-SaaS energy */
.theme-magenta {
  --accent: #C026D3;
  --accent-bright: #E879F9;
  --accent-glow: #F0ABFC;
  --accent-soft: #F5D0FE;
  --accent-wash: #FDF4FF;
}

/* —— Green register (documented 2025–26 / design-system greens) —— */

/* Emerald — Tailwind emerald-700 #047857 (CTA / success depth) */
.theme-emerald {
  --accent: #047857;
  --accent-bright: #10B981;
  --accent-glow: #6EE7B7;
  --accent-soft: #A7F3D0;
  --accent-wash: #ECFDF5;
}

/* Lime — Tailwind lime-600 #65A30D (high-energy product accent) */
.theme-lime {
  --accent: #65A30D;
  --accent-bright: #84CC16;
  --accent-glow: #BEF264;
  --accent-soft: #ECFCCB;
  --accent-wash: #F7FEE7;
}

/* Moss — ColorArchive 2026 Digital Sage (Leaf Shadow → Moss Tone) */
.theme-moss {
  --accent: #3F543B;
  --accent-bright: #8DBC76;
  --accent-glow: #A9BC9F;
  --accent-soft: #C4C8BC;
  --accent-wash: #E5E8E3;
}

/* Leaf — LandingPageFlow 2026 leaf green #3D9970 */
.theme-leaf {
  --accent: #3D9970;
  --accent-bright: #5CB88A;
  --accent-glow: #8FD4B0;
  --accent-soft: #CDEBD9;
  --accent-wash: #EEF8F2;
}

/* Pine — Tailwind green-800 #166534 */
.theme-pine {
  --accent: #166534;
  --accent-bright: #16A34A;
  --accent-glow: #4ADE80;
  --accent-soft: #BBF7D0;
  --accent-wash: #F0FDF4;
}

/* Earth — Tentackles 2026 “Radioactive Earth” forest #1F4D3A */
.theme-earth {
  --accent: #1F4D3A;
  --accent-bright: #2E7A5A;
  --accent-glow: #5BA884;
  --accent-soft: #B8D9C8;
  --accent-wash: #E8F2EC;
}

/* Verdant — Biznamelab 2026 eco-tech forest #1F5E3D / leaf #6CB35C */
.theme-verdant {
  --accent: #1F5E3D;
  --accent-bright: #6CB35C;
  --accent-glow: #98D08A;
  --accent-soft: #D4EBCB;
  --accent-wash: #F0F5F2;
}

/* Jade — Tailwind teal-700 #0F766E (jade/green-teal for product UI) */
.theme-jade {
  --accent: #0F766E;
  --accent-bright: #14B8A6;
  --accent-glow: #5EEAD4;
  --accent-soft: #99F6E4;
  --accent-wash: #F0FDFA;
}

/* Greenery — Pantone 15-0343 Greenery #88B04B */
.theme-greenery {
  --accent: #88B04B;
  --accent-bright: #A3C96A;
  --accent-glow: #C5DEA0;
  --accent-soft: #E4F0CC;
  --accent-wash: #F4F9EB;
}

/* Fern — classic fern green #4F7942 (botanical landing accent) */
.theme-fern {
  --accent: #4F7942;
  --accent-bright: #6B9B5A;
  --accent-glow: #9ABC8C;
  --accent-soft: #D0E0CA;
  --accent-wash: #F0F5ED;
}

/* —— Wine / burgundy register (Theme&Color · ColorUX Lab documented) —— */

/* Merlot — canonical burgundy #800020 (Theme&Color / Canva / ColorUX) */
.theme-merlot {
  --accent: #800020;
  --accent-bright: #A0525C;
  --accent-glow: #C9848A;
  --accent-soft: #E8B4B8;
  --accent-wash: #F8E8EA;
}

/* Wine — Theme&Color wine companion #722F37 */
.theme-wine {
  --accent: #722F37;
  --accent-bright: #9A4A52;
  --accent-glow: #C9848A;
  --accent-soft: #E8B4B8;
  --accent-wash: #F8E8EA;
}

/* Oxblood — Theme&Color oxblood #4A0E0E */
.theme-oxblood {
  --accent: #4A0E0E;
  --accent-bright: #7A2A2A;
  --accent-glow: #A0525C;
  --accent-soft: #E8B4B8;
  --accent-wash: #F8E8EA;
}

/* Garnet — ColorUX Rose Burgundy #9B1C31 */
.theme-garnet {
  --accent: #9B1C31;
  --accent-bright: #C23A4E;
  --accent-glow: #E08A96;
  --accent-soft: #F0C8CE;
  --accent-wash: #FBF0F2;
}

/* Port — ColorUX Deep Burgundy #6B1626 */
.theme-port {
  --accent: #6B1626;
  --accent-bright: #92283C;
  --accent-glow: #C9848A;
  --accent-soft: #E8B4B8;
  --accent-wash: #F8E8EA;
}

/* Cabernet — Theme&Color deep wine #5C1A1A */
.theme-cabernet {
  --accent: #5C1A1A;
  --accent-bright: #8A3434;
  --accent-glow: #B86A6A;
  --accent-soft: #E8C4C4;
  --accent-wash: #F7EDED;
}

/* Bordeaux — Theme&Color dark burgundy #3D0814 */
.theme-bordeaux {
  --accent: #3D0814;
  --accent-bright: #722F37;
  --accent-glow: #A0525C;
  --accent-soft: #E8B4B8;
  --accent-wash: #F8E8EA;
}

/* Berry — Theme&Color muted berry #A0525C */
.theme-berry {
  --accent: #A0525C;
  --accent-bright: #C9848A;
  --accent-glow: #E8B4B8;
  --accent-soft: #F3D6D9;
  --accent-wash: #FBF2F3;
}

/* Maroon — canonical maroon #800000 (distinct brown-red vs burgundy) */
.theme-maroon {
  --accent: #800000;
  --accent-bright: #A33A3A;
  --accent-glow: #C98484;
  --accent-soft: #E8B8B8;
  --accent-wash: #F8EAEA;
}

/* Velvet — Theme&Color near-black wine #2A0610 (evening / luxury band) */
.theme-velvet {
  --accent: #2A0610;
  --accent-bright: #5C1A1A;
  --accent-glow: #A0525C;
  --accent-soft: #E8B4B8;
  --accent-wash: #F8E8EA;
}

/* —— Rust / latte register (Icons8 · ColorUX · PhotoTones · Pantone Mocha Mousse 2025/26) —— */

/* Oxide — canonical rust #B7410E (Icons8 / Figma / ColorUX Lab) */
.theme-oxide {
  --accent: #B7410E;
  --accent-bright: #D2691E;
  --accent-glow: #E8A06A;
  --accent-soft: #F0D0B8;
  --accent-wash: #F9EFE8;
}

/* Copper — ColorUX rust range #C75B39 */
.theme-copper {
  --accent: #C75B39;
  --accent-bright: #E07858;
  --accent-glow: #ECA890;
  --accent-soft: #F5D4C8;
  --accent-wash: #FBF0EC;
}

/* Cinnamon — ColorUX / CSS chocolate #D2691E */
.theme-cinnamon {
  --accent: #D2691E;
  --accent-bright: #E08940;
  --accent-glow: #F0B878;
  --accent-soft: #F5DCC0;
  --accent-wash: #FBF3EA;
}

/* Iron — ColorUX deep rust brown #854321 */
.theme-iron {
  --accent: #854321;
  --accent-bright: #A85C35;
  --accent-glow: #C88860;
  --accent-soft: #E8CDB8;
  --accent-wash: #F6EEE7;
}

/* Forge — ArtyClick rust orange #C45508 */
.theme-forge {
  --accent: #C45508;
  --accent-bright: #E07020;
  --accent-glow: #F0A060;
  --accent-soft: #F5D4B8;
  --accent-wash: #FBF1E8;
}

/* Cotta — ColorUX / Theme&Color terracotta #E2725B */
.theme-cotta {
  --accent: #E2725B;
  --accent-bright: #EC9480;
  --accent-glow: #F4B8AA;
  --accent-soft: #F8DCD4;
  --accent-wash: #FCF3F0;
}

/* Latte — PhotoTones coffee: roast #8B5A2B → latte #E0C097 → foam #F5EDD6 */
.theme-latte {
  --accent: #8B5A2B;
  --accent-bright: #C08552;
  --accent-glow: #E0C097;
  --accent-soft: #F5EDD6;
  --accent-wash: #FAF6EC;
}

/* Espresso — PhotoTones espresso #5A3A22 */
.theme-espresso {
  --accent: #5A3A22;
  --accent-bright: #8B5A2B;
  --accent-glow: #C08552;
  --accent-soft: #E0C097;
  --accent-wash: #F5EDD6;
}

/* Mousse — ColorUI / Pantone Mocha Mousse 2025–26 #A47864 */
.theme-mousse {
  --accent: #A47864;
  --accent-bright: #C8A48A;
  --accent-glow: #E3CDB6;
  --accent-soft: #F5E6D3;
  --accent-wash: #FAF4EC;
}

/* Bean — PhotoTones dark bean #2E1A0F */
.theme-bean {
  --accent: #2E1A0F;
  --accent-bright: #5A3A22;
  --accent-glow: #8B5A2B;
  --accent-soft: #E0C097;
  --accent-wash: #F5EDD6;
}

/* —— Purple register (Theme&Color Purple Dream · SaaS Violet Growth · media.io) —— */

/* Violet — Purple Dream / Tailwind violet-600 #7C3AED */
.theme-violet {
  --accent: #7C3AED;
  --accent-bright: #8B5CF6;
  --accent-glow: #A78BFA;
  --accent-soft: #C4B5FD;
  --accent-wash: #EDE9FE;
}

/* Purple — Purple Dream secondary #8B5CF6 (Tailwind violet-500) */
.theme-purple {
  --accent: #8B5CF6;
  --accent-bright: #A78BFA;
  --accent-glow: #C4B5FD;
  --accent-soft: #DDD6FE;
  --accent-wash: #F5F3FF;
}

/* Regal — GEC Designs SaaS Violet Growth primary #4C1D95 */
.theme-regal {
  --accent: #4C1D95;
  --accent-bright: #7C3AED;
  --accent-glow: #A78BFA;
  --accent-soft: #C4B5FD;
  --accent-wash: #FAF5FF;
}

/* Plum — media.io Plum and Pearl #6B2348 */
.theme-plum {
  --accent: #6B2348;
  --accent-bright: #8E3D6B;
  --accent-glow: #B86A90;
  --accent-soft: #D9C6D3;
  --accent-wash: #F8F6F7;
}

/* Amethyst — media.io Amethyst Dusk #6A3D8F */
.theme-amethyst {
  --accent: #6A3D8F;
  --accent-bright: #8E5FC9;
  --accent-glow: #A68BD6;
  --accent-soft: #D9D3F2;
  --accent-wash: #F2EFFA;
}

/* Lilac — media.io Lilac Mist mid #8A6AD6 */
.theme-lilac {
  --accent: #8A6AD6;
  --accent-bright: #A189E6;
  --accent-glow: #CDB6FF;
  --accent-soft: #E7DAFF;
  --accent-wash: #F8F4FF;
}

/* Eggplant — media.io Eggplant Noir #24102F */
.theme-eggplant {
  --accent: #24102F;
  --accent-bright: #4A1D5E;
  --accent-glow: #7A4A8C;
  --accent-soft: #BFA9C8;
  --accent-wash: #F3EEF5;
}

/* Mulberry — media.io Mulberry Forest #6A2E5B */
.theme-mulberry {
  --accent: #6A2E5B;
  --accent-bright: #8B4A6F;
  --accent-glow: #B88AAE;
  --accent-soft: #EAD7E6;
  --accent-wash: #F7F1F5;
}

/* Wisteria — media.io Spring Wisteria #7C5CC7 */
.theme-wisteria {
  --accent: #7C5CC7;
  --accent-bright: #A189E6;
  --accent-glow: #CDB6FF;
  --accent-soft: #E7DAFF;
  --accent-wash: #F8F4FF;
}

/* Nebula — media.io Tech Violet Gradient #4B2FA8 */
.theme-nebula {
  --accent: #4B2FA8;
  --accent-bright: #7D5CFF;
  --accent-glow: #A890FF;
  --accent-soft: #E2DAFF;
  --accent-wash: #F4F1FF;
}

/* —— Quiet / warm register (elegant, muted, brand-soft) —— */

/* Mocha — Pantone Mocha Mousse–adjacent, grounded brown */
.theme-mocha {
  --accent: #8F6A56;
  --accent-bright: #A8826E;
  --accent-glow: #C4A994;
  --accent-soft: #E4D5CB;
  --accent-wash: #F6F0EC;
}

/* Ochre — soft antique gold, not neon amber */
.theme-ochre {
  --accent: #A8874A;
  --accent-bright: #C0A06A;
  --accent-glow: #D6C29A;
  --accent-soft: #EBE1CF;
  --accent-wash: #F8F4EB;
}

/* Clay — copper-clay terracotta, sun-baked quiet */
.theme-clay {
  --accent: #A66B4E;
  --accent-bright: #C0866A;
  --accent-glow: #D4A990;
  --accent-soft: #EBD9CE;
  --accent-wash: #F7F0EB;
}

/* Blush — dusty stone rose, soft not candy */
.theme-blush {
  --accent: #9B6E76;
  --accent-bright: #B58A90;
  --accent-glow: #D0B0B6;
  --accent-soft: #EADDE0;
  --accent-wash: #F7F1F2;
}

/* Olive — warm khaki olive, heritage quiet */
.theme-olive {
  --accent: #6E6F52;
  --accent-bright: #8C8D6E;
  --accent-glow: #B0B198;
  --accent-soft: #DBDBCE;
  --accent-wash: #F3F3EE;
}

/* Haze — blue-smoke slate, calm professional */
.theme-haze {
  --accent: #5E6B78;
  --accent-bright: #7A8894;
  --accent-glow: #A3AEB8;
  --accent-soft: #D4DAE0;
  --accent-wash: #F0F3F5;
}

/* Mauve — heather mist, muted floral plum */
.theme-mauve {
  --accent: #7D6574;
  --accent-bright: #9A8492;
  --accent-glow: #BCAAB4;
  --accent-soft: #E0D5DB;
  --accent-wash: #F5F1F3;
}

/* Bronze — brushed metal warmth */
.theme-bronze {
  --accent: #8F6E52;
  --accent-bright: #A88A6C;
  --accent-glow: #C4AE94;
  --accent-soft: #E5D9CB;
  --accent-wash: #F6F1EB;
}

/* —— Warm register (2026 earth revival — emotional, material, not neon) —— */

/* Terra — BrandGene classic terracotta #C67B5C */
.theme-terra {
  --accent: #C67B5C;
  --accent-bright: #D49278;
  --accent-glow: #E4B49E;
  --accent-soft: #F0D9CC;
  --accent-wash: #F9F1EC;
}

/* Sienna — deep burnt sienna / deep terracotta #A0522D */
.theme-sienna {
  --accent: #A0522D;
  --accent-bright: #C06A42;
  --accent-glow: #D49274;
  --accent-soft: #E8C9B8;
  --accent-wash: #F6EDE7;
}

/* Caramel — SS26 smoked caramel quiet luxury #9E7B56 */
.theme-caramel {
  --accent: #9E7B56;
  --accent-bright: #B89572;
  --accent-glow: #D0B598;
  --accent-soft: #E8D9C8;
  --accent-wash: #F6F0E9;
}

/* Apricot — SS26 solar warmth, CTA-capable */
.theme-apricot {
  --accent: #C48968;
  --accent-bright: #D4A286;
  --accent-glow: #E4C0AA;
  --accent-soft: #F0DDD0;
  --accent-wash: #F9F2ED;
}

/* Saffron — 2026 native-earth spice, muted not neon */
.theme-saffron {
  --accent: #B8893E;
  --accent-bright: #CFA45C;
  --accent-glow: #E0C488;
  --accent-soft: #EEDDB8;
  --accent-wash: #F8F3E8;
}

/* Sand — golden sand from 2026 solar warmth sets */
.theme-sand {
  --accent: #B88860;
  --accent-bright: #CFA47E;
  --accent-glow: #E0C4A4;
  --accent-soft: #EEDDCC;
  --accent-wash: #F8F2EB;
}

/* Rust — mineral rust, honest earth pigment */
.theme-rust {
  --accent: #B85C3A;
  --accent-bright: #D07858;
  --accent-glow: #E0A088;
  --accent-soft: #F0D0C2;
  --accent-wash: #F9EEE9;
}

/* Rose — Pantone Tea Rose / dusty rose Spring 2026 */
.theme-rose {
  --accent: #A86B74;
  --accent-bright: #C08890;
  --accent-glow: #D4AEB4;
  --accent-soft: #EAD8DB;
  --accent-wash: #F7F0F1;
}

/* Adobe — ColorArchive warm-earth coral-muted #9F8A75 lineage */
.theme-adobe {
  --accent: #8B735C;
  --accent-bright: #A89078;
  --accent-glow: #C4B09A;
  --accent-soft: #E2D6C8;
  --accent-wash: #F4EFE9;
}

/* —— Cool register (B2B trust, calm authority, cool emotion) —— */

/* Navy — institutional trust, fintech/SaaS depth */
.theme-navy {
  --accent: #1B3A6B;
  --accent-bright: #3A5F9A;
  --accent-glow: #7A96C4;
  --accent-soft: #C5D2E6;
  --accent-wash: #EBF0F7;
}

/* Cobalt — tech-brand cobalt from enterprise navy systems */
.theme-cobalt {
  --accent: #174197;
  --accent-bright: #3B63B8;
  --accent-glow: #7A97D4;
  --accent-soft: #C5D2EC;
  --accent-wash: #EBF0F8;
}

/* Steel — Stripe-adjacent steel, calm structure */
.theme-steel {
  --accent: #50617A;
  --accent-bright: #6B7D96;
  --accent-glow: #9AABC0;
  --accent-soft: #D0D8E2;
  --accent-wash: #EFF2F6;
}

/* Twilight — 2026 “Digital Twilight” AI indigo */
.theme-twilight {
  --accent: #2C2A72;
  --accent-bright: #5A56A8;
  --accent-glow: #8C7AE6;
  --accent-soft: #D0CBF0;
  --accent-wash: #F0EEFA;
}

/* Iris — Stripe-style trust indigo, modern not neon */
.theme-iris {
  --accent: #5350E0;
  --accent-bright: #6F6BFF;
  --accent-glow: #A8A4FF;
  --accent-soft: #D8D6FF;
  --accent-wash: #F0EFFE;
}

/* Ice — arctic powder blue, serene product calm */
.theme-ice {
  --accent: #4A7F98;
  --accent-bright: #6B9BB2;
  --accent-glow: #9BC0D0;
  --accent-soft: #D2E4EC;
  --accent-wash: #EFF6F9;
}

/* Delft — porcelain cool blue, crafted restraint */
.theme-delft {
  --accent: #3F5F8A;
  --accent-bright: #5F7FA8;
  --accent-glow: #8FA8C8;
  --accent-soft: #CDD8E8;
  --accent-wash: #EEF2F7;
}

/* Glacier — cool blue-teal, analytics clarity */
.theme-glacier {
  --accent: #3A6F80;
  --accent-bright: #5A8FA0;
  --accent-glow: #8BB4C0;
  --accent-soft: #C9DEE4;
  --accent-wash: #ECF4F6;
}

/* ==========================================================================
   beREEL.pro
   Glass nav, mega menu, and tone swap ported from the DIMA landing.
   Paper body; black hero. Accent is film gold for the mark only.
   ========================================================================== */

:root {
  color-scheme: light;

  --paper: #F4F2ED;
  --band: #EAE7E0;
  --card: #FFFFFF;
  --ink: #111111;
  --ink-2: #3D3D42;
  --muted: #6B6B70;
  --mist: #F7F6F2;

  --accent: #C9A227;
  --accent-bright: #E8B931;
  --accent-glow: #F3D56A;
  --accent-soft: #F3E6B3;
  --accent-wash: #FBF6E4;

  --line: rgba(17, 17, 17, 0.09);
  --line-2: rgba(17, 17, 17, 0.16);
  --rule: #E6E4DE;
  --rule-ink: #232327;

  --shadow-tint: 17, 17, 20;
  --shadow-soft: 0 1px 2px rgba(var(--shadow-tint), 0.04);
  --shadow-lift: 0 1px 2px rgba(var(--shadow-tint), 0.04), 0 10px 24px rgba(var(--shadow-tint), 0.06);
  --shadow-deep: 0 2px 4px rgba(var(--shadow-tint), 0.04), 0 28px 64px rgba(var(--shadow-tint), 0.10);

  --r-lg: 16px;
  --r-md: 12px;
  --r-ctl: 10px;
  --r-sm: 6px;
  --r-pill: 999px;

  --ink-deep: #0E0E10;
  --ink-panel: #16161A;
  --on-ink: #F5F5F4;
  --on-ink-2: rgba(245, 245, 244, 0.64);
  --on-ink-3: rgba(245, 245, 244, 0.42);
  --line-ink: rgba(245, 245, 244, 0.11);
  --line-ink-2: rgba(245, 245, 244, 0.18);

  --shell: 1280px;
  --shell-wide: 1400px;
  --gutter: clamp(20px, 4vw, 56px);
  --gap-xl: clamp(74px, 6.8vw, 108px);
  --gap-lg: clamp(58px, 5.4vw, 82px);
  --nav-offset: 98px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-offset) + 22px);
  overflow-x: clip;
}

html.is-ready body {
  visibility: visible;
}

[data-lucide] {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.58;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

p {
  margin: 0;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: "Outfit", ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.032em;
  line-height: 1.0;
  color: var(--ink);
  text-wrap: balance;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: var(--accent-soft);
  color: var(--ink);
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.shell--wide {
  max-width: var(--shell-wide);
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -64px;
  z-index: 100;
  padding: 11px 20px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--paper);
  font-weight: 500;
  transition: top 0.2s var(--ease);
}

.skip-link:focus {
  top: 16px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 26px;
  padding: 6px 14px;
  border-radius: var(--r-sm);
  background: transparent;
  border: 1px solid var(--line-2);
  font-family: "Outfit", sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.lede {
  max-width: 38rem;
  font-size: 1.05rem;
  color: var(--ink-2);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: 13px 26px;
  border-radius: var(--r-ctl);
  border: 1px solid transparent;
  font-family: "Outfit", sans-serif;
  font-size: 0.96rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease),
    color 0.2s var(--ease), opacity 0.2s var(--ease);
}

.btn--primary {
  background: var(--ink);
  color: #FFFFFF;
}

.btn--primary:hover {
  background: var(--accent);
}

.btn--primary:active {
  background: color-mix(in srgb, var(--accent) 84%, #000);
}

.btn--ghost {
  background: transparent;
  border-color: var(--line-2);
  color: var(--ink);
}

.btn--ghost:hover {
  border-color: var(--ink);
  background: rgba(17, 17, 17, 0.03);
}

.btn--sm {
  padding: 10px 18px;
  font-size: 0.9rem;
}

.btn--block {
  width: 100%;
}

/* --------------------------------------------------------------------------
   Brand mark
   -------------------------------------------------------------------------- */

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--nav-fg, var(--ink));
}

.brand__mark {
  display: flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--accent-bright);
  color: #111111;
  flex-shrink: 0;
  transition: none;
}

.brand__mark svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  stroke: none;
}

.brand__word {
  display: inline-flex;
  align-items: baseline;
  letter-spacing: -0.02em;
  font-family: "Outfit", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.05rem;
  line-height: 1;
}

.brand__be {
  font-weight: 300;
  font-size: 0.95em;
}

.brand__reel {
  font-weight: 800;
  letter-spacing: -0.02em;
}

.brand__pro {
  padding-left: 0.06em;
  font-size: 0.68em;
  font-weight: 400;
  letter-spacing: -0.01em;
  opacity: 0.55;
}

.footer .brand {
  --nav-fg: var(--ink);
}

/* --------------------------------------------------------------------------
   Nav
   -------------------------------------------------------------------------- */

.nav {
  --nav-cta-bg: #111111;
  --nav-cta-fg: #FFFFFF;
  position: sticky;
  top: 0;
  z-index: 40;
  padding-top: 20px;
  padding-bottom: 10px;
  background: transparent;
  overflow: visible;
}

.nav[data-on-hero="true"] {
  --nav-cta-bg: #F5F5F4;
  --nav-cta-fg: #0E0E10;
}

.nav__inner {
  --nav-fg: #111111;
  --nav-fg-mute: #56565C;
  --nav-cta-bg: #111111;
  --nav-cta-fg: #FFFFFF;
  position: relative;
  z-index: 2;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
  height: 68px;
  padding: 0 20px;
  border-radius: var(--r-pill);
  background-color: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(11, 18, 32, 0.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 -1px 0 rgba(11, 18, 32, 0.04),
    0 4px 24px rgba(var(--shadow-tint), 0.08);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  overflow: visible;
  transition:
    background-color 0.32s var(--ease),
    border-color 0.32s var(--ease),
    box-shadow 0.32s var(--ease);
}

.nav[data-on-hero="true"] .nav__inner {
  --nav-fg: #F5F5F4;
  --nav-fg-mute: rgba(245, 245, 244, 0.62);
  --nav-cta-bg: #F5F5F4;
  --nav-cta-fg: #0E0E10;
  background-color: rgba(10, 10, 12, 0.66);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 8px 28px rgba(0, 0, 0, 0.35);
}

@media (min-width: 961px) {
  .nav>.shell:hover .nav__inner,
  .nav:has(#mega[data-open="true"]) .nav__inner {
    background-color: var(--mist);
  }

  .nav[data-on-hero="true"]>.shell:hover .nav__inner,
  .nav[data-on-hero="true"]:has(#mega[data-open="true"]) .nav__inner {
    background-color: var(--mega-bg, #14141a);
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav__inner {
    background-color: rgba(255, 255, 255, 0.94);
  }

  .nav[data-on-hero="true"] .nav__inner {
    background-color: rgba(12, 11, 10, 0.94);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .nav__inner {
    background-color: rgba(255, 255, 255, 0.96);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .nav[data-on-hero="true"] .nav__inner {
    background-color: #0c0b0a;
  }
}

.nav__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  min-width: 0;
}

.nav__links {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.8vw, 24px);
  width: max-content;
  max-width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
}

.nav__links > li {
  pointer-events: auto;
}

.nav__links>li>a,
.nav__drop-trigger {
  position: relative;
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: "Outfit", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-align: inherit;
  color: var(--nav-fg-mute);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: color 0.2s var(--ease);
}

.nav__drop-trigger::before {
  content: "";
  position: absolute;
  inset: -10px -6px;
}

.nav__links>li>a:hover,
.nav__drop-trigger:hover,
.nav__item--dropdown[data-open="true"] .nav__drop-trigger {
  color: var(--nav-fg);
}

.nav__item--dropdown {
  position: relative;
}

.nav__dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  z-index: 50;
  min-width: 180px;
  margin: 0;
  padding: 8px;
  list-style: none;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(11, 18, 32, 0.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 10px 28px rgba(var(--shadow-tint), 0.12);
  transform: translateX(-50%);
}

.nav__dropdown[hidden] {
  display: none;
}

.nav__dropdown a {
  display: block;
  padding: 10px 12px;
  border-radius: 6px;
  font-family: "Outfit", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink-2, #3d3429);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.nav__dropdown a:hover {
  background: rgba(11, 18, 32, 0.06);
  color: var(--ink, #191510);
}

.nav[data-on-hero="true"] .nav__dropdown {
  background: rgba(18, 16, 14, 0.96);
  border-color: rgba(240, 235, 227, 0.12);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
}

.nav[data-on-hero="true"] .nav__dropdown a {
  color: rgba(240, 235, 227, 0.82);
}

.nav[data-on-hero="true"] .nav__dropdown a:hover {
  background: rgba(240, 235, 227, 0.08);
  color: #f5efe2;
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  min-width: 0;
}

.nav__login {
  padding: 11px 16px;
  font-family: "Outfit", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--nav-fg-mute);
  transition: color 0.2s var(--ease);
}

.nav__login:hover {
  color: var(--nav-fg);
}

.nav__actions .btn--primary {
  border-radius: var(--r-pill);
  background-color: var(--nav-cta-bg);
  color: var(--nav-cta-fg);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.nav__actions .btn--primary:hover {
  background-color: var(--accent);
  color: #FFFFFF;
}

@property --nav-trace-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.nav__start {
  position: relative;
  isolation: isolate;
  overflow: visible;
  --nav-trace-lead: var(--accent-bright);
  --nav-trace-glow: color-mix(in srgb, var(--accent-glow) 38%, transparent);
  --nav-trace-peak: 0.9;
}

.nav[data-on-hero="true"] .nav__start {
  --nav-trace-lead: var(--accent-glow);
  --nav-trace-glow: color-mix(in srgb, var(--accent-bright) 62%, transparent);
  --nav-trace-peak: 0.88;
}

.nav__start::after {
  content: "";
  position: absolute;
  inset: -5px;
  z-index: 2;
  padding: 3px;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: conic-gradient(
    from var(--nav-trace-angle),
    transparent 0 48%,
    var(--nav-trace-glow) 56%,
    var(--nav-trace-glow) 68%,
    var(--nav-trace-lead) 76%,
    var(--nav-trace-lead) 84%,
    var(--nav-trace-glow) 92%,
    transparent 100%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.nav__start.is-attention::after {
  animation: nav-cta-trace 1.9s cubic-bezier(0.22, 0.72, 0.24, 1) both;
}

@keyframes nav-cta-trace {
  0% {
    --nav-trace-angle: 0deg;
    opacity: 0;
  }
  14% {
    opacity: var(--nav-trace-peak);
  }
  84% {
    opacity: var(--nav-trace-peak);
  }
  100% {
    --nav-trace-angle: 430deg;
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav__start.is-attention::after {
    animation: none;
  }
}

.nav__burger {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  place-items: center;
  flex-shrink: 0;
  overflow: visible;
}

.nav__burger span {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: 16px;
  height: 1.7px;
  margin: 0;
  background: var(--nav-fg);
  border-radius: 1px;
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}

.nav__burger span:nth-child(1) {
  transform: translate(-50%, calc(-50% - 6px));
}

.nav__burger span:nth-child(2) {
  transform: translate(-50%, -50%);
}

.nav__burger span:nth-child(3) {
  transform: translate(-50%, calc(-50% + 6px));
}

.nav[data-open="true"] .nav__burger span:nth-child(1) {
  transform: translate(-50%, -50%) rotate(45deg);
}

.nav[data-open="true"] .nav__burger span:nth-child(2) {
  opacity: 0;
}

.nav[data-open="true"] .nav__burger span:nth-child(3) {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.nav__drawer {
  display: none;
}

/* --------------------------------------------------------------------------
   Mega menu
   -------------------------------------------------------------------------- */

.nav>.shell {
  position: relative;
}

.nav__mega-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.nav__mega-trigger::after {
  content: none;
}

.nav__caret {
  flex-shrink: 0;
  width: 7px;
  height: 5px;
  opacity: 0.42;
  translate: 0 0.5px;
  transition: transform 0.28s var(--ease), opacity 0.2s var(--ease), color 0.2s var(--ease);
}

.nav__mega-trigger:hover .nav__caret {
  opacity: 0.8;
}

.nav__mega-trigger[data-mega-active="true"] {
  color: var(--nav-fg);
}

.nav__mega-trigger[data-mega-active="true"] .nav__caret {
  opacity: 1;
  color: var(--accent);
  transform: rotate(180deg);
}

@property --mega-w {
  syntax: "<length>";
  inherits: true;
  initial-value: 860px;
}

@property --mega-h {
  syntax: "<length>";
  inherits: true;
  initial-value: 300px;
}

@property --mega-x {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

@property --mega-y {
  syntax: "<length>";
  inherits: true;
  initial-value: -8px;
}

.mega {
  --mega-r: 24px;
  --mega-scoop-w: 32px;
  --mega-scoop-h: 52px;
  --mega-bg: var(--mist);
  --mega-line: rgba(17, 17, 17, 0.12);
  position: absolute;
  top: calc(100% - 2px);
  left: var(--gutter);
  right: var(--gutter);
  z-index: 1;
  pointer-events: none;
}

.mega__surface {
  --mega-w: 860px;
  --mega-h: 300px;
  --mega-x: 0px;
  --mega-y: -8px;
  position: absolute;
  top: 0;
  left: 0;
  width: var(--mega-w);
  height: var(--mega-h);
  border-radius: 0 0 var(--mega-r) var(--mega-r);
  background-color: var(--mega-bg);
  border: 0;
  box-shadow:
    0 1px 2px rgba(var(--shadow-tint), 0.04),
    0 18px 40px rgba(var(--shadow-tint), 0.10);
  opacity: 0;
  visibility: hidden;
  transform: translate3d(var(--mega-x), var(--mega-y), 0);
  transition:
    --mega-y 0.22s var(--ease),
    opacity 0.16s var(--ease),
    background-color 0.3s var(--ease),
    border-color 0.3s var(--ease),
    visibility 0s linear 0.2s;
}

.mega[data-open="true"] .mega__surface {
  --mega-y: 0px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    --mega-w 0.32s var(--ease),
    --mega-h 0.32s var(--ease),
    --mega-x 0.32s var(--ease),
    --mega-y 0.22s var(--ease),
    opacity 0.16s var(--ease),
    background-color 0.3s var(--ease),
    border-color 0.3s var(--ease);
}

.mega__surface.is-snap {
  transition: none !important;
}

.mega__surface::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--mega-line);
  border-top: 0;
  border-radius: inherit;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent var(--mega-scoop-h), #000 var(--mega-scoop-h));
  mask-image: linear-gradient(to bottom, transparent var(--mega-scoop-h), #000 var(--mega-scoop-h));
  transition: border-color 0.3s var(--ease);
}

.mega__surface::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -28px;
  height: 28px;
}

.mega__scoop {
  position: absolute;
  top: 0;
  width: var(--mega-scoop-w);
  height: var(--mega-scoop-h);
  color: var(--mega-bg);
  pointer-events: none;
}

.mega__scoop svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  fill: currentColor;
}

.mega__scoop-line {
  fill: none;
  stroke: var(--mega-line);
  stroke-width: 1;
  stroke-linecap: butt;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.mega__scoop--left {
  left: calc(-1 * var(--mega-scoop-w) + 2px);
}

.mega__scoop--right {
  right: calc(-1 * var(--mega-scoop-w) + 2px);
}

.mega__clip {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
}

.mega__panel {
  --panel-w: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.22s var(--ease),
    visibility 0s linear 0.22s;
}

.mega__panel.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.22s var(--ease);
}

.mega__panel[data-panel="product"] {
  --panel-w: 860px;
}

.mega__panel[data-panel="solutions"] {
  --panel-w: 720px;
}

.mega__panel[data-panel="resources"] {
  --panel-w: 640px;
}

.mega__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 32px;
  padding: 22px 24px 16px;
  align-items: stretch;
}

.mega__panel[data-panel="product"] .mega__body,
.mega__panel[data-panel="solutions"] .mega__body {
  grid-template-columns: minmax(0, 1fr) 240px;
}

.mega__panel[data-panel="resources"] .mega__body {
  grid-template-columns: minmax(0, 1fr) 220px;
}

.mega__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 32px;
  align-content: start;
}

.mega__cols--one {
  grid-template-columns: minmax(0, 1fr);
}

.mega__label {
  margin: 2px 0 10px;
  padding-left: 10px;
  font-family: "Outfit", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.3s var(--ease);
}

.mega__item {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  transition: background-color 0.2s var(--ease);
}

.mega__item:hover,
.mega__item:focus-visible {
  background-color: rgba(17, 17, 17, 0.05);
}

.mega__glyph {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  color: var(--ink-2);
  transition: color 0.2s var(--ease);
}

.mega__glyph svg {
  display: block;
  width: 16px;
  height: 16px;
  stroke-width: 1.5;
}

.mega__item:hover .mega__glyph,
.mega__item:focus-visible .mega__glyph {
  color: var(--ink);
}

.mega__title {
  font-family: "Outfit", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
  transition: color 0.3s var(--ease);
}

.mega__feat {
  display: block;
  align-self: start;
  width: 100%;
  max-width: 180px;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  background-color: #EEECE7;
  border: 1px solid var(--line);
  justify-self: end;
}

.mega__feat img,
.mega__feat-shot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mega__feat-shot {
  background:
    linear-gradient(160deg, rgba(17, 17, 17, 0.06), transparent 55%),
    repeating-linear-gradient(
      90deg,
      transparent 0 18px,
      rgba(17, 17, 17, 0.04) 18px 19px
    );
}

.mega__feat-shot--product {
  background:
    radial-gradient(circle at 70% 30%, color-mix(in srgb, var(--accent-glow) 40%, transparent), transparent 46%),
    linear-gradient(180deg, #1a1a1e, #0e0e10);
}

.mega__feat-shot--solutions {
  background:
    linear-gradient(135deg, #2a2418, #111111 60%);
}

.mega__feat-shot--resources {
  background:
    linear-gradient(180deg, #efece4, #d9d4c8);
}

.mega__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
  padding: 12px 20px 14px;
  background-color: #64717e;
  border-top: 0;
}

.mega__foot-say {
  margin: 0;
  font-family: "Outfit", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.82);
}

.mega__foot-act {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.mega__foot-link {
  padding: 7px 10px;
  border-radius: var(--r-sm);
  font-family: "Outfit", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.78);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.mega__foot-link:hover {
  background-color: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.mega__go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: var(--r-ctl);
  background-color: #ffffff;
  font-family: "Outfit", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.mega__go:hover {
  background-color: #f4f4f2;
  color: var(--ink);
}

.mega__go svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.8;
  transition: transform 0.3s var(--ease);
}

.mega__go:hover svg {
  transform: translateX(3px);
}

.nav[data-on-hero="true"] .mega {
  --mega-bg: #14141a;
  --mega-line: var(--line-ink);
}

.nav[data-on-hero="true"] .mega__surface {
  background-color: var(--mega-bg);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.5);
}

.nav[data-on-hero="true"] .mega__label {
  color: var(--on-ink-3);
}

.nav[data-on-hero="true"] .mega__title {
  color: var(--on-ink);
}

.nav[data-on-hero="true"] .mega__item:hover,
.nav[data-on-hero="true"] .mega__item:focus-visible {
  background-color: rgba(245, 245, 244, 0.06);
}

.nav[data-on-hero="true"] .mega__glyph {
  color: var(--on-ink-2);
}

.nav[data-on-hero="true"] .mega__item:hover .mega__glyph,
.nav[data-on-hero="true"] .mega__item:focus-visible .mega__glyph {
  color: var(--on-ink);
}

.nav[data-on-hero="true"] .mega__feat {
  background-color: rgba(245, 245, 244, 0.05);
  border-color: var(--line-ink);
}

@media (max-width: 960px) {
  .mega {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mega__surface,
  .mega__panel,
  .nav__caret,
  .nav__inner {
    transition-duration: 0.01s;
    transition-delay: 0s;
    animation-duration: 0.01s;
  }
}

/* --------------------------------------------------------------------------
   Hero + body
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  z-index: 0;
  margin-top: calc(-1 * var(--nav-offset));
  padding-top: calc(var(--nav-offset) + var(--hero-band));
  padding-bottom: clamp(88px, 12vh, 140px);
  background: #000;
  color: rgba(245, 245, 244, 0.9);
  --hero-band: clamp(72px, 9vh, 112px);
}

.hero>.shell {
  position: relative;
  z-index: 1;
}

.hero-backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.hero-backdrop::before {
  content: "";
  position: absolute;
  inset: -10% -8% -4%;
  z-index: 5;
  pointer-events: none;
  background:
    radial-gradient(ellipse 72% 52% at 50% 72%,
      var(--accent) 0%,
      color-mix(in srgb, var(--accent) 78%, var(--accent-bright)) 38%,
      color-mix(in srgb, var(--accent) 42%, transparent) 58%,
      transparent 78%);
  mix-blend-mode: color;
  opacity: 0.18;
}

.hero__stage {
  max-width: 40rem;
  padding-top: clamp(28px, 6vh, 64px);
}

.hero__kicker {
  margin: 0 0 18px;
  font-family: "Outfit", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245, 245, 244, 0.48);
}

.hero h1 {
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  color: #F5F5F4;
  letter-spacing: -0.045em;
}

.hero__sub {
  margin-top: 22px;
  max-width: 32rem;
  font-size: 1.08rem;
  color: rgba(245, 245, 244, 0.62);
}

.sec {
  padding-block: var(--gap-xl);
}

.sec--soft {
  background: var(--card);
  border-block: 1px solid var(--line);
}

.sec--ink {
  background: var(--ink-deep);
  color: var(--on-ink-2);
}

.sec h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  margin-bottom: 28px;
}

.split {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: 8px;
}

.split__card {
  padding: 8px 28px 8px 0;
  border-right: 1px solid var(--line);
}

.split__card:last-child {
  padding-right: 0;
  padding-left: 28px;
  border-right: 0;
}

.split__card:nth-child(2) {
  padding-inline: 28px;
}

.split__card h3 {
  font-size: 1.15rem;
  margin-bottom: 10px;
}

.split__card p {
  color: var(--ink-2);
  max-width: 28ch;
}

.pagehead {
  padding-top: clamp(36px, 5vw, 64px);
  padding-bottom: clamp(72px, 10vw, 120px);
}

.pagehead h1 {
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  margin-bottom: 16px;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer {
  padding-top: clamp(64px, 7vw, 104px);
  padding-bottom: clamp(28px, 3vw, 40px);
  background: color-mix(in srgb, var(--paper) 62%, var(--mist));
  border-top: 1px solid rgba(17, 17, 17, 0.05);
}

.footer__shell {
  width: 100%;
  max-width: 1680px;
  margin-inline: auto;
  padding-inline: clamp(28px, 4.2vw, 72px);
}

.footer__main {
  display: grid;
  grid-template-columns: minmax(240px, 0.72fr) minmax(0, 1.85fr);
  gap: clamp(48px, 7vw, 112px);
  align-items: start;
}

.footer__logo {
  display: inline-flex;
}

.footer__tagline {
  margin-top: 22px;
  max-width: none;
  font-family: "Outfit", sans-serif;
  font-size: clamp(1.55rem, 2.1vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.12;
  color: var(--ink);
}

.footer__cta {
  display: inline-flex;
  align-items: stretch;
  margin-top: 28px;
  overflow: hidden;
  border-radius: var(--r-ctl);
  background: var(--ink);
  color: #fff;
  font-family: "Outfit", sans-serif;
  font-size: 0.94rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.footer__cta > span:first-child {
  display: flex;
  align-items: center;
  padding: 13px 20px 13px 22px;
}

.footer__cta-go {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: auto 8px auto 0;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
}

.footer__cta:hover {
  background: var(--accent);
}

.footer__cta:hover .footer__cta-go {
  color: var(--accent);
}

.footer__nav {
  display: grid;
  grid-template-columns:
    minmax(0, 1.35fr)
    minmax(0, 1.55fr)
    minmax(140px, 0.78fr)
    minmax(120px, 0.62fr);
  min-width: 0;
}

.footer__col {
  min-width: 0;
  padding-left: clamp(20px, 2vw, 36px);
  border-left: 1px solid rgba(17, 17, 17, 0.045);
}

.footer__col h4 {
  margin: 0 0 18px;
  font-family: "Outfit", sans-serif;
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.footer__links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(16px, 1.6vw, 28px);
  row-gap: 2px;
}

.footer__col a,
.footer__col .footer__theme {
  display: block;
  margin: 0;
  padding: 6px 0;
  font-size: 0.92rem;
  line-height: 1.35;
  overflow-wrap: break-word;
  color: var(--muted);
  transition: color 0.2s var(--ease);
}

.footer__col a:hover,
.footer__col .footer__theme:hover {
  color: var(--ink);
}

.footer__col--connect a {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer__col--connect svg {
  flex-shrink: 0;
  opacity: 0.72;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 28px;
  margin-top: clamp(48px, 5.5vw, 80px);
  padding-top: 22px;
  border-top: 1px solid rgba(17, 17, 17, 0.05);
  font-size: 0.82rem;
  color: var(--muted);
}

.footer__legal {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 22px;
}

.footer__legal a:hover,
.footer__legal-btn:hover {
  color: var(--ink);
}

.footer__legal-btn {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.footer__col .footer__theme {
  width: 100%;
  border: 0;
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.theme-drawer {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
}

.theme-drawer[data-open="true"] {
  pointer-events: auto;
}

.theme-drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(14, 14, 16, 0.36);
  opacity: 0;
  transition: opacity 0.28s var(--ease);
}

.theme-drawer[data-open="true"] .theme-drawer__scrim {
  opacity: 1;
}

.theme-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: min(380px, 100%);
  background: var(--card);
  border-left: 1px solid var(--line-2);
  box-shadow: -16px 0 48px rgba(var(--shadow-tint), 0.16);
  transform: translateX(100%);
  transition: transform 0.36s var(--ease);
}

.theme-drawer[data-open="true"] .theme-drawer__panel {
  transform: translateX(0);
}

.theme-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  padding: 22px 20px 16px;
  border-bottom: 1px solid var(--line);
}

.theme-drawer__title {
  margin: 0;
  font-family: "Outfit", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.theme-drawer__close {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--r-ctl);
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.theme-drawer__close:hover {
  background: var(--band);
  color: var(--ink);
}

.theme-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  padding: 12px 14px 28px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.theme-selector__rule {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 4px 4px;
  font-family: "Outfit", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.theme-selector__rule::before,
.theme-selector__rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.theme-selector button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 8px;
  border: 0;
  border-radius: var(--r-ctl);
  background: transparent;
  font-family: "Outfit", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink-2);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.theme-selector button:hover,
.theme-selector button[aria-pressed="true"] {
  background: var(--band);
  color: var(--ink);
}

.theme-selector button[aria-pressed="true"] {
  box-shadow: inset 0 0 0 1px var(--line-2);
}

.theme-swatch {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--swatch);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
  flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
  .theme-drawer__scrim,
  .theme-drawer__panel {
    transition-duration: 0.01s;
  }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .footer__main {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .footer__nav {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr);
  }

  .footer__col:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }

  .footer__col:nth-child(even) {
    padding-left: clamp(18px, 3vw, 32px);
  }

  .footer__col:nth-child(n + 3) {
    margin-top: 28px;
  }

  .split {
    grid-template-columns: minmax(0, 1fr);
  }

  .split__card,
  .split__card:nth-child(2),
  .split__card:last-child {
    padding: 0 0 22px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .split__card:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }
}

@media (max-width: 980px) {
  :root {
    --nav-offset: 90px;
  }

  .nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    padding: 0 16px;
    gap: 12px;
    overflow: visible;
  }

  .nav__logo,
  .nav__actions {
    grid-column: auto;
    grid-row: auto;
    justify-self: auto;
  }

  .nav__links,
  .nav__login {
    display: none;
    position: static;
    inset: auto;
    pointer-events: auto;
    transform: none;
  }

  .nav__actions {
    gap: 8px;
  }

  .nav__actions .btn--sm {
    height: 40px;
    padding: 0 16px;
  }

  .nav__burger {
    display: block;
    margin-right: 0;
  }

  .nav__drawer {
    position: absolute;
    top: calc(100% + 10px);
    left: var(--gutter);
    right: var(--gutter);
    z-index: 39;
    display: block;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.44s var(--ease);
  }

  .nav[data-open="true"] .nav__drawer {
    max-height: calc(100vh - 90px);
    max-height: calc(100dvh - 90px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
  }

  .nav__drawer-inner {
    margin-top: 12px;
    margin-bottom: 4px;
    padding: 8px 16px 32px;
    border-radius: var(--r-lg);
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(11, 18, 32, 0.1);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.7),
      0 8px 28px rgba(var(--shadow-tint), 0.1);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
  }

  .nav[data-on-hero="true"] .nav__drawer-inner {
    background: rgba(28, 25, 22, 0.98);
    border-color: rgba(240, 235, 227, 0.18);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.55);
  }

  .nav__drawer-inner a:not(.btn),
  .nav__drawer-inner .nav__drawer-contact {
    display: block;
    width: 100%;
    padding: 13px 10px;
    border: 0;
    background: none;
    font-family: "Outfit", ui-sans-serif, system-ui, sans-serif;
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-align: left;
    color: var(--ink-2);
    border-bottom: 1px solid var(--line);
    cursor: pointer;
  }

  .nav__drawer-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 13px 10px;
    font-family: "Outfit", ui-sans-serif, system-ui, sans-serif;
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-align: left;
    color: var(--ink-2);
    border-bottom: 1px solid var(--line);
  }

  .nav__drawer-trigger>span:last-child {
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1;
    transition: transform 0.25s var(--ease);
  }

  .nav__drawer-trigger[aria-expanded="true"]>span:last-child {
    transform: rotate(45deg);
  }

  .nav__drawer-submenu {
    padding: 2px 0 6px 14px;
    border-bottom: 1px solid var(--line);
  }

  .nav__drawer-submenu a {
    padding-block: 10px;
    font-size: 0.96rem;
    font-weight: 400;
    border-bottom: 0;
    color: var(--muted);
  }

  .nav[data-on-hero="true"] .nav__drawer-inner a:not(.btn),
  .nav[data-on-hero="true"] .nav__drawer-inner .nav__drawer-contact {
    color: rgba(240, 235, 227, 0.82);
    border-bottom-color: rgba(240, 235, 227, 0.1);
  }

  .nav[data-on-hero="true"] .nav__drawer-trigger {
    color: rgba(240, 235, 227, 0.88);
    border-bottom-color: rgba(240, 235, 227, 0.1);
  }

  .nav[data-on-hero="true"] .nav__drawer-submenu {
    border-bottom-color: rgba(240, 235, 227, 0.1);
  }

  .nav[data-on-hero="true"] .nav__drawer-submenu a {
    color: rgba(240, 235, 227, 0.62);
  }

  .nav__drawer-inner a:last-of-type {
    border-bottom: 0;
  }

  .nav__drawer-inner a.btn--primary {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    margin-top: 14px;
    padding: 13px 20px;
    text-align: center;
    background-color: var(--nav-cta-bg);
    color: var(--nav-cta-fg);
    border-bottom: 0;
  }

  .nav__drawer-inner a.btn--primary:hover {
    background-color: var(--accent);
    color: #111;
  }

  .hero {
    --hero-band: clamp(68px, 10vh, 104px);
  }
}

@media (max-width: 700px) {
  .footer__main {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }

  .footer__tagline {
    margin-top: 16px;
    font-size: clamp(1.2rem, 5vw, 1.42rem);
  }

  .footer__cta {
    margin-top: 18px;
  }

  .footer__nav {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 22px 0;
  }

  .footer__col:nth-child(n + 3) {
    margin-top: 0;
  }

  .footer__links {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 520px) {
  .footer__shell {
    padding-inline: 20px;
  }

  .footer__bottom {
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
  }

  .footer__legal {
    flex: 0 1 auto;
    flex-wrap: nowrap;
    gap: 10px 14px;
    min-width: 0;
  }

  .footer__legal a,
  .footer__legal-btn {
    white-space: nowrap;
    font-size: 0.72rem;
  }

  .footer__copy {
    flex: 0 1 auto;
    margin-left: auto;
    text-align: right;
    font-size: 0.68rem;
    line-height: 1.35;
  }

  .footer__nav {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px 0;
  }

  .footer__col:nth-child(n + 3) {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(17, 17, 17, 0.045);
  }

  .nav__actions .nav__start {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Cookie consent — full-bleed paper bar + settings sheet
   -------------------------------------------------------------------------- */

.consent {
  position: fixed;
  inset: auto 0 0;
  z-index: 80;
  pointer-events: none;
}

.consent[data-on="true"],
.consent[data-sheet="true"] {
  pointer-events: auto;
}

.consent__bar {
  position: relative;
  z-index: 1;
  isolation: isolate;
  transform: translate3d(0, 110%, 0);
  border-top: 1px solid rgba(11, 18, 32, 0.1);
  background-color: rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.66), 0 -8px 28px rgba(var(--shadow-tint), 0.08);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  padding-bottom: env(safe-area-inset-bottom);
  transition: transform 0.55s var(--ease);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .consent__bar {
    background-color: rgba(255, 255, 255, 0.94);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .consent__bar {
    background-color: rgba(255, 255, 255, 0.96);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

.consent[data-on="true"] .consent__bar {
  transform: translate3d(0, 0, 0);
}

.consent__bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 2.4vw, 32px);
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding: 10px var(--gutter) 10px;
}

.consent__copy {
  min-width: 0;
  max-width: 52rem;
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink-2);
}

.consent__line--short,
.consent__act-short {
  display: none;
}

.consent__kicker {
  display: inline;
  margin-right: 0.55em;
  font-family: "Outfit", sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.consent__privacy {
  margin-left: 0.35em;
  font-family: "Outfit", sans-serif;
  font-size: inherit;
  font-weight: 500;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.consent__privacy:hover {
  color: var(--accent);
}

.consent__acts {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 10px;
}

.consent__acts .btn {
  padding: 6px 12px;
  font-size: 0.78rem;
  line-height: 1.2;
}

.consent__text {
  padding: 2px 0;
  border: 0;
  background: none;
  font-family: "Outfit", sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink-2);
  cursor: pointer;
}

.consent__text:hover {
  color: var(--ink);
}

.consent__layer {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: grid;
  place-items: center;
  padding: 24px var(--gutter);
}

.consent__layer[hidden] {
  display: none;
}

.consent__scrim {
  position: absolute;
  inset: 0;
  background: rgba(14, 14, 16, 0.28);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}

.consent[data-sheet="true"] .consent__scrim {
  opacity: 1;
}

.consent__sheet {
  position: relative;
  width: min(34rem, 100%);
  padding: 26px 26px 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: 0 24px 60px rgba(17, 17, 17, 0.14);
  transform: translate3d(0, 16px, 0);
  opacity: 0;
  transition: transform 0.45s var(--ease), opacity 0.35s var(--ease);
}

.consent[data-sheet="true"] .consent__sheet {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

.consent__sheet-head {
  margin-bottom: 6px;
}

.consent__sheet-head .sec-label {
  margin: 0 0 8px;
}

.consent__sheet-title {
  margin: 0;
  font-family: "Outfit", sans-serif;
  font-size: clamp(1.35rem, 2vw, 1.55rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--ink);
}

.consent__sheet-lede {
  margin: 8px 0 0;
  max-width: 38ch;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink-2);
}

.consent__rows {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.consent__row {
  display: grid;
  gap: 8px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.consent__row-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
}

.consent__more {
  min-width: 0;
}

.consent__more summary {
  width: fit-content;
  font-family: "Outfit", sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

.consent__more summary::-webkit-details-marker {
  display: none;
}

.consent__more summary::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 7px;
  margin-bottom: 1px;
  border-right: 1.4px solid currentColor;
  border-bottom: 1.4px solid currentColor;
  transform: rotate(45deg);
  vertical-align: middle;
}

.consent__more[open] summary::after {
  transform: rotate(-135deg);
  margin-bottom: -1px;
}

.consent__more ul {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.consent__more li {
  position: relative;
  padding: 3px 0 3px 12px;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--ink-2);
}

.consent__more li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 5px;
  height: 1px;
  background: var(--line-2);
}

.consent__row-name {
  margin: 0;
  font-family: "Outfit", sans-serif;
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.consent__row-note {
  margin: 4px 0 0;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--ink-2);
}

.consent__toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: none;
  font-family: "Outfit", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
}

.consent__toggle.is-locked {
  cursor: default;
}

.consent__toggle-track {
  position: relative;
  width: 40px;
  height: 22px;
  border-radius: 10px;
  background: var(--band);
  box-shadow: inset 0 0 0 1px var(--line-2);
  transition: background-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.consent__toggle-track i {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 6px;
  background: var(--card);
  box-shadow: 0 1px 3px rgba(17, 17, 17, 0.16);
  transition: transform 0.25s var(--ease);
}

.consent__toggle.is-on {
  color: var(--ink);
}

.consent__toggle.is-on .consent__toggle-track {
  background: var(--accent);
  box-shadow: none;
}

.consent__toggle.is-on .consent__toggle-track i {
  transform: translateX(18px);
}

.consent__sheet-acts {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

@media (max-width: 720px) {
  .consent__bar-inner {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
  }

  .consent__copy {
    font-size: 0.75rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .consent__kicker,
  .consent__privacy,
  .consent__line--full,
  .consent__act-full {
    display: none;
  }

  .consent__line--short,
  .consent__act-short {
    display: inline;
  }

  .consent__acts {
    gap: 8px;
  }

  .consent__acts .btn {
    flex: 0 0 auto;
    padding: 5px 9px;
    font-size: 0.72rem;
  }

  .consent__text {
    font-size: 0.72rem;
  }

  .consent__sheet {
    padding: 22px 18px 18px;
  }

  .consent__row {
    align-items: start;
    gap: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .consent__bar,
  .consent__sheet,
  .consent__scrim,
  .consent__toggle-track,
  .consent__toggle-track i {
    transition-duration: 0.01s;
  }
}

/* ==========================================================================
   beREEL landing + pattern book
   Hero reel phone, then paper / gold / ink wells. Fraunces titles.
   ========================================================================== */

:root {
  --display: "Fraunces", "Times New Roman", serif;
  --r-well: 28px;
  --r-card: 20px;
  --r-phone: 28px;
  --shadow-float: 0 10px 28px rgba(17, 17, 20, 0.18);
}

.page-home {
  --shell: 1360px;
  --gutter: clamp(28px, 6.5vw, 88px);
}

body.page-home {
  position: relative;
}

/* Black behind the floating nav only — do not change nav padding or sticky offset. */
body.page-home::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-offset);
  background: #000;
  z-index: 1;
  pointer-events: none;
}

.display,
.sec-title {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
  text-wrap: balance;
}

.sec-title {
  font-size: clamp(1.55rem, 2.6vw, 2.1rem);
  margin: 0 0 28px;
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-family: "Outfit", sans-serif;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.kicker--pill {
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #111;
}

.btn--pill {
  border-radius: var(--r-pill);
  padding: 11px 20px;
}

.btn--on-ink {
  background: #F5F5F4;
  color: #0E0E10;
}

.btn--on-ink:hover {
  background: var(--accent-bright);
  color: #111;
}

.btn--ghost-ink {
  background: transparent;
  border-color: rgba(245, 245, 244, 0.28);
  color: #F5F5F4;
}

.btn--ghost-ink:hover {
  border-color: #F5F5F4;
  background: rgba(245, 245, 244, 0.06);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero--reel {
  background: #000;
  padding-bottom: 72px;
  --hero-band: clamp(40px, 5vh, 64px);
}

.hero--reel .hero-backdrop,
.hero--reel .hero-backdrop::before {
  display: none;
}

.hero__copy {
  text-align: center;
  max-width: 44rem;
  margin-inline: auto;
  padding-top: clamp(8px, 2vh, 20px);
  padding-bottom: 8px;
}

.hero--reel .hero__kicker {
  color: rgba(245, 245, 244, 0.5);
}

.hero--reel h1 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2.2rem, 5.2vw, 4rem);
  letter-spacing: -0.038em;
  line-height: 1.02;
}

.hero--reel .hero__sub {
  margin-inline: auto;
  max-width: 32rem;
  font-size: 1rem;
  color: rgba(245, 245, 244, 0.62);
}

.hero__actions {
  justify-content: center;
  margin-top: 18px;
}

/* --------------------------------------------------------------------------
   Hero reel deck - drag / auto coverflow of real 9:16 cuts
   -------------------------------------------------------------------------- */

.reelwall {
  --card-w: clamp(220px, 17.6vw, 286px);
  --card-h: calc(var(--card-w) * 2.16);
  --bezel: clamp(9px, 0.85vw, 13px);
  --screen-r: clamp(22px, 2vw, 34px);
  position: relative;
  z-index: 1;
  margin-top: clamp(24px, 3.4vw, 44px);
}

.reelwall::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(var(--card-h) / 2 + 24px);
  z-index: 0;
  width: calc(var(--card-w) * 3.4);
  height: calc(var(--card-h) * 1.06);
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.08), transparent 66%);
  pointer-events: none;
}

.reeldeck {
  position: relative;
  height: calc(var(--card-h) + 48px);
  perspective: 1800px;
  cursor: grab;
  touch-action: pan-y;
}

.reeldeck::before,
.reeldeck::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 5;
  width: 18%;
  pointer-events: none;
}

.reeldeck::before {
  left: 0;
  background: linear-gradient(90deg, #000 0%, transparent 100%);
}

.reeldeck::after {
  right: 0;
  background: linear-gradient(270deg, #000 0%, transparent 100%);
}

.reeldeck.is-drag {
  cursor: grabbing;
}

@media (hover: none) {
  .reeldeck {
    perspective: none;
  }

  .reeltrack {
    transform-style: flat;
  }
}

.reeltrack {
  position: absolute;
  inset: 0;
  z-index: 2;
  margin: 0;
  padding: 0;
  list-style: none;
  transform-style: preserve-3d;
}

.reelcard {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--card-w);
  height: var(--card-h);
  transform: translate3d(-50%, -50%, 0);
  transform-origin: 50% 50%;
  will-change: transform, filter, opacity;
}

/* No-JS / pre-init: only the lead cut shows */
.reeltrack:not(.is-live) .reelcard + .reelcard,
.reelwall:not(.is-ready) .reelcard + .reelcard {
  opacity: 0;
  visibility: hidden;
}

.reelcard__frame {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--screen-r);
  background: #0A0A0C;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.07),
    0 30px 56px -20px rgba(0, 0, 0, 0.9);
  transition: box-shadow 0.5s ease;
}

.reelcard video,
.reelcard img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

.reelcard__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.32), transparent 20%, transparent 54%, rgba(0, 0, 0, 0.66));
  transition: opacity 0.55s ease;
}

.reelcard.is-live .reelcard__frame::after {
  opacity: 1;
}

.reelcard.is-live .reelcard__frame {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.17),
    0 46px 84px -26px rgba(0, 0, 0, 1);
}

/* Phone mockup - fixed device, reels run through the screen */
.reelphone {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  box-sizing: border-box;
  width: calc(var(--card-w) + var(--bezel) * 2);
  height: calc(var(--card-h) + var(--bezel) * 2);
  padding: var(--bezel);
  transform: translate(-50%, -50%);
  background: #15151A;
  border-radius: calc(var(--screen-r) + var(--bezel));
  pointer-events: none;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.13),
    0 60px 100px -44px rgba(0, 0, 0, 1);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.reelphone__key {
  position: absolute;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(#26262F, #13131A);
}

.reelphone__key--vol {
  left: calc(var(--bezel) * -1 - 2px);
  top: 20%;
  height: 6.5%;
}

.reelphone__key--vol2 {
  left: calc(var(--bezel) * -1 - 2px);
  top: 29%;
  height: 6.5%;
}

.reelphone__key--power {
  right: calc(var(--bezel) * -1 - 2px);
  top: 24%;
  height: 10.5%;
}

.reelphone__ui {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  width: var(--card-w);
  height: var(--card-h);
  overflow: hidden;
  border-radius: var(--screen-r);
  color: #fff;
  background: transparent;
  transform: translate3d(-50%, -50%, 0);
  pointer-events: none;
  opacity: var(--hud-o, 1);
  isolation: isolate;
  backface-visibility: hidden;
}

.reelphone__island {
  position: absolute;
  top: 9px;
  left: 50%;
  width: 30%;
  height: 17px;
  border-radius: 999px;
  background: #05050A;
  transform: translateX(-50%);
}

/* Story segments - one per reel */
.story {
  position: absolute;
  top: 34px;
  left: 12px;
  right: 12px;
  display: flex;
  gap: 3px;
}

.story i {
  position: relative;
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.32);
  overflow: hidden;
}

.story i::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  border-radius: inherit;
  background: #fff;
  transform: scaleX(var(--f, 0));
  transform-origin: left center;
}

.story__head {
  position: absolute;
  top: 46px;
  left: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.story__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.story__who b {
  font-family: "Outfit", sans-serif;
  font-size: 0.76rem;
  font-weight: 600;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

.story__who i {
  margin-left: 7px;
  font-style: normal;
  font-family: "Outfit", sans-serif;
  font-size: 0.68rem;
  opacity: 0.6;
}

.story__rail {
  position: absolute;
  right: 11px;
  bottom: 108px;
  display: grid;
  gap: 18px;
  justify-items: center;
}

.react {
  display: grid;
  justify-items: center;
  gap: 3px;
  font-family: "Outfit", sans-serif;
  font-size: 0.66rem;
  font-weight: 600;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

.react svg {
  width: 23px;
  height: 23px;
  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.55));
}

.react i {
  font-style: normal;
  opacity: 0.92;
}

.story__foot {
  position: absolute;
  left: 12px;
  right: 62px;
  bottom: 14px;
}

.story__caption {
  font-size: 0.8rem;
  line-height: 1.35;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}

.story__shop {
  display: inline-flex;
  margin-top: 10px;
  padding: 7px 13px;
  border-radius: var(--r-pill);
  background: #fff;
  color: #111;
  font-family: "Outfit", sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
}

/* Per-reel performance widgets - mirrored around the phone */
.wid {
  position: absolute;
  left: 50%;
  top: calc(var(--card-h) / 2 + 24px);
  z-index: 320;
  width: clamp(176px, 13.2vw, 208px);
  margin: 0;
  padding: 15px 16px 14px;
  border-radius: 18px;
  background: rgba(16, 16, 19, 0.72);
  border: 1px solid rgba(255, 255, 244, 0.14);
  box-shadow: 0 26px 52px -24px rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(20px) saturate(135%);
  -webkit-backdrop-filter: blur(20px) saturate(135%);
  color: #F5F5F4;
  overflow: hidden;
  isolation: isolate;
  transition: opacity 0.35s ease;
}

.wid--tap {
  transform: translate(calc(-50% - var(--card-w) * 1.34), -124%);
}

.wid--conv {
  transform: translate(calc(-50% - var(--card-w) * 1.06), 16%);
}

.wid--eng {
  width: clamp(176px, 13.4vw, 208px);
  transform: translate(calc(-50% + var(--card-w) * 1.1), -128%);
}

.wid--save {
  transform: translate(calc(-50% + var(--card-w) * 1.38), 12%);
}

.reelwall.is-drag .wid {
  opacity: 0.88;
}

.wid figcaption {
  font-family: "Outfit", sans-serif;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-bright);
}

.wid strong {
  display: block;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.55rem, 2.2vw, 1.95rem);
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.wid__lead {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.wid__lead b {
  display: block;
  font-family: "Outfit", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(245, 245, 244, 0.62);
}

.wid__lead strong {
  margin-top: 2px;
}

.plat {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  overflow: hidden;
  isolation: isolate;
  border-radius: 11px;
  background: #F4F4F1;
  transform: translateZ(0);
}

.plat[data-plat="snapchat"] {
  background: #111114;
}

.plat svg {
  width: 16px;
  height: 16px;
}

.wid__mix {
  display: grid;
  gap: 7px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.wid__mix li {
  display: grid;
  grid-template-columns: 22px 4.2em 1fr;
  align-items: center;
  gap: 7px;
}

.wid__mix .plat {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  clip-path: inset(0 round 7px);
}

.wid__mix .plat svg {
  display: block;
  width: 11px;
  height: 11px;
  overflow: visible;
  flex: none;
}

.wid__mix b {
  font-family: "Outfit", sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  color: rgba(245, 245, 244, 0.62);
}

.wid__mix li.is-top b {
  color: #F5F5F4;
}

.wid__mix i {
  display: block;
  height: 5px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.wid__mix i::after {
  content: "";
  display: block;
  width: var(--w, 40%);
  height: 100%;
  border-radius: inherit;
  background: rgba(255, 255, 244, 0.35);
  transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.wid__mix li.is-top i::after {
  background: var(--accent-bright);
}

.wid__note,
.wid__chip {
  display: block;
  margin-top: 8px;
  font-style: normal;
  font-family: "Outfit", sans-serif;
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1.3;
  color: rgba(245, 245, 244, 0.52);
}

.wid__chip {
  margin-top: 7px;
  font-weight: 600;
  color: var(--accent-bright);
}

.wid--conv strong,
.wid--eng strong {
  margin-top: 6px;
}

.wid__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 8px;
}

.wid__split b {
  display: block;
  font-family: "Outfit", sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(245, 245, 244, 0.48);
}

.wid__split strong {
  margin-top: 4px;
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
}

.reelnav {
  position: relative;
  z-index: 320;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(20px, 2.6vw, 32px);
}

.reelnav__btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(245, 245, 244, 0.78);
  cursor: pointer;
  transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.reelnav__btn:hover {
  border-color: rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
}

.reelnav__btn svg {
  width: 19px;
  height: 19px;
}

.reelnav__count {
  min-width: 5.4ch;
  text-align: center;
  font-family: "Outfit", sans-serif;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: rgba(245, 245, 244, 0.72);
}

.reelnav__count i {
  font-style: normal;
  margin: 0 4px;
  opacity: 0.35;
}

@media (max-width: 1420px) {
  .wid--tap { transform: translate(calc(-50% - var(--card-w) * 1.16), -122%); }
  .wid--conv { transform: translate(calc(-50% - var(--card-w) * 0.96), 14%); }
  .wid--eng { transform: translate(calc(-50% + var(--card-w) * 0.98), -126%); }
  .wid--save { transform: translate(calc(-50% + var(--card-w) * 1.18), 10%); }
}

@media (max-width: 1180px) {
  .reelwall {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding-inline: var(--gutter);
  }

  .reelwall::before {
    display: none;
  }

  .reeldeck {
    order: 1;
    grid-column: 1 / -1;
    margin-inline: calc(var(--gutter) * -1);
  }

  .reelnav {
    order: 2;
    grid-column: 1 / -1;
    margin-bottom: 8px;
  }

  .wid {
    position: static;
    transform: none;
    width: auto;
  }

  .wid--tap { order: 3; }
  .wid--eng { order: 4; width: auto; }
  .wid--conv { order: 5; }
  .wid--save { order: 6; }
}

@media (max-width: 620px) {
  .reelwall {
    grid-template-columns: minmax(0, 1fr);
  }

  .reelnav {
    display: none;
  }

  .wid--conv,
  .wid--save {
    display: none;
  }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.hero__pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  font-family: "Outfit", sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(245, 245, 244, 0.42);
}

.hero__pills li + li {
  position: relative;
}

.hero__pills li + li::before {
  content: "";
  position: absolute;
  left: -11px;
  top: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  transform: translateY(-50%);
  opacity: 0.5;
}

.page-home h2 {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -0.035em;
  font-size: clamp(2rem, 3.8vw, 3.05rem);
  line-height: 1.08;
}

/* --------------------------------------------------------------------------
   Template explore feed
   -------------------------------------------------------------------------- */

.explore {
  padding-block: 10px 22px;
}

.explore__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}

.explore__chips button {
  padding: 8px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-2);
  background: #fff;
  font-family: "Outfit", sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
}

.explore__chips button.is-on,
.explore__chips button[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #111;
}

.tile {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: #111;
  height: 260px;
}

.tile video,
.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tile__meta {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 12px 12px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.72));
  color: #fff;
  font-family: "Outfit", sans-serif;
  font-size: 0.76rem;
  font-weight: 600;
}

.tile__like {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.tile__like svg {
  width: 16px;
  height: 16px;
}

.tile__like[aria-pressed="true"] {
  background: #fff;
  color: #E11D48;
}

.explore__trained {
  margin-top: 16px;
  font-family: "Outfit", sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   FAQ / close
   -------------------------------------------------------------------------- */

.close {
  background: #08080A;
  color: #F5F5F4;
  padding: clamp(56px, 8vw, 88px) 0;
  text-align: center;
}

.close .kicker--pill {
  background: var(--accent);
  color: #111;
}

.close h2 {
  color: #F5F5F4;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
}

.close p {
  margin: 14px auto 28px;
  max-width: 32rem;
  color: var(--on-ink-2);
}

.close .cta-row {
  justify-content: center;
}

/* --------------------------------------------------------------------------
   Pattern book
   -------------------------------------------------------------------------- */

.pb { padding-bottom: 64px; }
.pb__hero { padding: 28px 0 8px; }
.pb__hero h1 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
}
.pb__block { padding-block: 28px; border-top: 1px solid var(--line); }
.pb__block h2 { font-family: var(--display); font-weight: 500; font-size: 1.6rem; margin-bottom: 6px; }
.pb__hint { margin-bottom: 16px; color: var(--ink-2); max-width: 40rem; }
.swatches { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.swatch { overflow: hidden; border-radius: 12px; border: 1px solid var(--line); background: #fff; }
.swatch i { display: block; height: 56px; }
.swatch span { display: block; padding: 8px 10px 10px; font-family: "Outfit", sans-serif; font-size: 0.74rem; }
.type-row { display: grid; gap: 12px; }
.type-row .display { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.row-gap { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pb-stage { padding: 24px 16px 16px; border-radius: var(--r-well); background: #08080A; }
.lede { max-width: 40rem; color: var(--ink-2); }

@media (max-width: 720px) {
  .swatches { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .reelcard,
  .reelcard__frame,
  .tile video,
  .page-home .scan__led,
  .page-home .convey__col--up,
  .page-home .convey__col--down,
  .page-home .viral__rail,
  :is(.page-home, .page-generator, .page-brand-dna) .taste__card--live.is-idle,
  :is(.page-home, .page-generator, .page-brand-dna) .taste__card--live.is-enter,
  :is(.page-home, .page-generator, .page-brand-dna) .taste__btn.is-hit,
  :is(.page-home, .page-generator, .page-brand-dna) .taste__btn.is-hit::after,
  :is(.page-home, .page-generator, .page-brand-dna) .taste__card--live.is-gone .taste__stamp--yes,
  :is(.page-home, .page-generator, .page-brand-dna) .taste__card--live.is-gone .taste__stamp--no,
  .page-home .broadcast__rings::before,
  .page-home .broadcast__rings::after,
  .page-home .broadcast__node.is-sending,
  .page-home .broadcast__node.is-live,
  .page-home .broadcast__node.is-live em,
  :is(.page-home, .page-generator, .page-brand-dna) .dna-train__points div::before,
  .page-home .runcard,
  .page-home .runcard:not(:last-child)::after,
  :is(.page-home, .page-brand-dna) .inspire__live i,
  :is(.page-home, .page-brand-dna) .inspire__dots i,
  .page-home .buzz__heart svg {
    animation: none;
    transition: none;
  }

  .page-home .studio__app,
  .page-home .studio__tabs button,
  .page-home .studio__thumb,
  .page-home .studio__panel,
  .page-home .studio__frame {
    transition: none;
  }

  :is(.page-home, .page-brand-dna) .inspire__spot-copy,
  .page-home .fits__shots,
  .page-home .fits__tab,
  .page-home .fits__body,
  .page-home .fits__chev {
    transition: none;
  }

  .page-home .viral__shot {
    transition: none;
    transform: none;
    opacity: 1;
  }

  .page-home .viral__tags li,
  .page-home .viral__tag-float,
  .page-home .viral__tag-label {
    transform: none;
    animation: none;
  }

  :is(.page-home, .page-generator, .page-brand-dna) .taste__card--live.is-settling,
  :is(.page-home, .page-generator, .page-brand-dna) .taste__card--live.is-gone,
  :is(.page-home, .page-generator, .page-brand-dna) .taste__btn,
  :is(.page-home, .page-generator, .page-brand-dna) .taste__learn-essence,
  :is(.page-home, .page-generator, .page-brand-dna) .taste__learn-list li {
    transition: none;
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   Brand wells — paper stage, gold rule, Fraunces titles. No pink bands.
   ========================================================================== */

.page-home h2.display {
  font-family: var(--display);
  font-weight: 640;
  font-size: clamp(2.15rem, 4.1vw, 3.25rem);
  letter-spacing: -0.038em;
}

.page-home .rooms,
:is(.page-home, .page-generator, .page-brand-dna) .dna-train,
.page-home .word {
  padding-block: clamp(36px, 5vw, 56px);
  background: transparent;
  color: inherit;
}

.page-home .queue {
  padding-top: 0;
  padding-bottom: clamp(56px, 8vw, 104px);
  background: transparent;
  color: inherit;
}

.page-home .rooms {
  padding-bottom: clamp(80px, 10vw, 128px);
}

.well {
  border-radius: clamp(24px, 3vw, 36px);
  padding: clamp(52px, 7vw, 88px);
}

.well--gold {
  background: var(--accent-soft);
  border: 0;
  box-shadow: none;
}

.well--paper {
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: none;
}

.well--ink {
  background: #111114;
  color: #F5F5F4;
}

.page-home .forge {
  padding-block: clamp(88px, 11vw, 140px);
  background: #08080A;
  color: #F5F5F4;
}

.page-home .forge h2 {
  color: #F5F5F4;
}

.page-home .forge__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 64px;
  align-items: center;
}

.well--ink h2,
.well--ink p,
.well--ink .kicker {
  color: inherit;
}

.well--ink .kicker {
  color: rgba(245, 245, 244, 0.5);
}

.well--ink p {
  color: rgba(245, 245, 244, 0.62);
}

.page-home .marks {
  padding: 40px 0 8px;
  border-bottom: 0;
}

.page-home .marks__label {
  font-size: 0.66rem !important;
  font-family: "Outfit", sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.run__rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
}

.run__rail li {
  padding: 0;
}

.run__rail b {
  display: block;
  margin-bottom: 4px;
  font-family: "Outfit", sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.run__rail h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.25rem;
  letter-spacing: -0.03em;
  margin: 0 0 8px;
}

.run__rail p,
.run__rail span {
  font-size: 0.95rem;
  color: var(--ink-2);
}

.run__shot {
  margin: 0 0 18px;
  overflow: hidden;
  width: 100%;
  height: 200px;
  border-radius: 18px;
  background: #111;
  box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.08);
}

.run__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-home .run {
  padding-block: clamp(80px, 10vw, 128px);
  background: transparent;
  color: inherit;
}

.page-home .run__head {
  max-width: min(100%, 42rem);
  margin: 0 auto 52px;
  text-align: center;
}

.page-home #run-title {
  text-wrap: nowrap;
}

.page-home .run__head .kicker {
  justify-content: center;
}

.page-home .run__head p:not(.kicker) {
  margin: 10px auto 0;
  color: var(--ink-2);
}

.page-home .run__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: stretch;
}

.page-home .runcard {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  padding: 14px 14px 20px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.08);
  box-shadow: 0 16px 36px -22px rgba(17, 17, 20, 0.4);
  container-type: inline-size;
}

@keyframes run-flow-arrow-1 {
  0%, 8%, 16%, 100% {
    transform: translate(-50%, -50%) scale(1);
  }

  12% {
    transform: translate(-50%, -50%) scale(1.34);
  }
}

@keyframes run-flow-arrow-2 {
  0%, 24%, 32%, 100% {
    transform: translate(-50%, -50%) scale(1);
  }

  28% {
    transform: translate(-50%, -50%) scale(1.34);
  }
}

.page-home .runcard:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  z-index: 2;
  width: 16px;
  height: 16px;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.page-home .runcard:nth-child(1):not(:last-child)::after {
  animation: run-flow-arrow-1 2s ease-in-out infinite;
}

.page-home .runcard:nth-child(2):not(:last-child)::after {
  animation: run-flow-arrow-2 2s ease-in-out infinite;
}

.page-home .runcard h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.45rem;
  letter-spacing: -0.03em;
  margin: 16px 4px 6px;
}

.page-home .runcard p {
  margin: 0 4px;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--ink-2);
}

.page-home .runcard__stage {
  position: relative;
  height: auto;
  aspect-ratio: 1;
  margin: 0;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
}

.page-home .runcard__stage--cut,
.page-home .runcard__stage--week,
.page-home .runcard__stage--keep {
  padding: 0;
  background: #fff;
}

.page-home .runcard__stage--cut img,
.page-home .runcard__stage--week img,
.page-home .runcard__stage--keep img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.page-home .rooms .well--gold {
  padding: clamp(40px, 4.8vw, 60px);
}

.page-home .rooms__top {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(440px, 1.14fr);
  gap: clamp(24px, 3.4vw, 40px);
  align-items: center;
}

.page-home .rooms__head {
  display: flex;
  flex-direction: column;
  max-width: 38rem;
  margin: 0;
  text-align: left;
}

.page-home .rooms__head p:not(.kicker):not(.rooms__feeds) {
  margin: 14px 0 0;
  max-width: 26rem;
  color: var(--ink-2);
}

.page-home .rooms__feeds {
  margin: 18px 0 0;
  font-family: "Outfit", sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.page-home .rooms__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 22px;
  padding-top: 0;
}

.page-home .rooms__note {
  font-family: "Outfit", sans-serif;
  font-size: 0.78rem;
  color: var(--muted);
}

/* Broadcast map — one branded Reel radiating into five feeds. */

.page-home .broadcast {
  margin: 0;
}

.page-home .broadcast__canvas {
  position: relative;
  min-height: 528px;
  overflow: visible;
  background:
    radial-gradient(circle at 42% 50%, rgba(255, 255, 255, 0.5), transparent 38%);
}

.page-home .broadcast__rings {
  position: absolute;
  left: 42%;
  top: 50%;
  width: 420px;
  height: 420px;
  border: 1px solid color-mix(in srgb, var(--accent) 44%, transparent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.page-home .broadcast__rings::before,
.page-home .broadcast__rings::after {
  content: "";
  position: absolute;
  inset: 24px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  border-radius: inherit;
  animation: broadcast-ring 2.8s ease-out infinite;
}

.page-home .broadcast__rings::after {
  inset: 50px;
  animation-delay: 1.4s;
}

@keyframes broadcast-ring {
  0% { transform: scale(0.72); opacity: 0; }
  30% { opacity: 0.7; }
  100% { transform: scale(1.32); opacity: 0; }
}

.page-home .broadcast__phone {
  position: absolute;
  z-index: 2;
  left: 42%;
  top: 50%;
  width: 280px;
  height: 498px;
  overflow: hidden;
  border: 11px solid #08080A;
  border-radius: 40px;
  background: #08080A;
  box-shadow: 0 22px 42px -12px rgba(17, 17, 20, 0.42);
  transform: translate(-50%, -50%);
}

.page-home .broadcast__phone::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 9px;
  z-index: 3;
  width: 38%;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
  transform: translateX(-50%);
}

.page-home .broadcast__brand {
  position: absolute;
  inset: 10px 10px auto;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  font-family: "Outfit", sans-serif;
  font-size: 0.62rem;
}

.page-home .broadcast__brand span {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: rgba(8, 8, 10, 0.82);
  font-family: var(--display);
}

.page-home .broadcast__phone video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.32s ease;
}

.page-home .broadcast__nodes {
  position: absolute;
  z-index: 3;
  top: 50%;
  right: -6px;
  display: grid;
  gap: 14px;
  width: 52%;
  margin: 0;
  padding: 0;
  list-style: none;
  transform: translateY(-50%);
}

.page-home .broadcast__node {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--ink);
  font-family: "Outfit", sans-serif;
  box-shadow:
    0 10px 22px -12px rgba(17, 17, 20, 0.32),
    0 2px 6px rgba(17, 17, 20, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  -webkit-font-smoothing: antialiased;
  backface-visibility: hidden;
  --tilt: 0deg;
  transform: rotate(var(--tilt)) translateZ(0);
  transition: transform 0.34s ease, background 0.34s ease, border-color 0.34s ease, box-shadow 0.34s ease;
}

.page-home .broadcast__node--tt { --tilt: 1.6deg; }
.page-home .broadcast__node--ig { --tilt: -1.2deg; margin-right: -10px; }
.page-home .broadcast__node--yt { --tilt: 0.7deg; margin-right: 6px; }
.page-home .broadcast__node--fb { --tilt: 1.1deg; margin-right: -8px; }
.page-home .broadcast__node--sc { --tilt: -1.5deg; }

.page-home .broadcast__node .plat {
  width: 32px;
  height: 32px;
  border-radius: 10px;
}

.page-home .broadcast__node .plat svg {
  width: 16px;
  height: 16px;
}

.page-home .broadcast__node > span:nth-child(2) {
  display: grid;
  gap: 1px;
}

.page-home .broadcast__node b {
  font-size: 0.8rem;
  font-weight: 600;
}

.page-home .broadcast__node i {
  font-style: normal;
  font-size: 0.63rem;
  color: var(--muted);
}

.page-home .broadcast__node em {
  padding: 3px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 16%, #fff);
  color: var(--muted);
  font-style: normal;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  transition: background 0.28s ease, color 0.28s ease, transform 0.28s ease;
}

.page-home .broadcast__node.is-sending {
  transform: translateX(-8px) scale(1.02) rotate(var(--tilt)) translateZ(0);
  border-color: color-mix(in srgb, var(--accent) 56%, transparent);
  background: rgba(255, 255, 255, 0.94);
  box-shadow:
    0 12px 26px -12px rgba(17, 17, 20, 0.36),
    0 2px 6px rgba(17, 17, 20, 0.08),
    inset 0 1px 0 #fff;
  animation: broadcast-send-pulse 0.62s ease-in-out infinite;
}

@keyframes broadcast-send-pulse {
  0%, 100% {
    box-shadow:
      0 12px 26px -12px rgba(17, 17, 20, 0.36),
      0 2px 6px rgba(17, 17, 20, 0.08),
      inset 0 1px 0 #fff;
  }

  50% {
    box-shadow:
      0 14px 28px -10px rgba(17, 17, 20, 0.4),
      0 0 0 2px color-mix(in srgb, var(--accent) 34%, transparent),
      inset 0 1px 0 #fff;
  }
}

.page-home .broadcast__node.is-sending em {
  color: var(--ink);
}

.page-home .broadcast__node.is-live {
  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
  background: rgba(255, 255, 255, 0.96);
  box-shadow:
    0 14px 28px -12px rgba(17, 17, 20, 0.34),
    0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent),
    inset 0 1px 0 #fff;
  animation: broadcast-node-live 0.72s cubic-bezier(0.22, 1.12, 0.36, 1) both;
}

@keyframes broadcast-node-live {
  0% {
    transform: translateX(-8px) scale(1.02) rotate(var(--tilt)) translateZ(0);
    box-shadow:
      0 12px 26px -12px rgba(17, 17, 20, 0.36),
      0 2px 6px rgba(17, 17, 20, 0.08),
      inset 0 1px 0 #fff;
  }

  38% {
    transform: translateX(3px) scale(1.06) rotate(var(--tilt)) translateZ(0);
    box-shadow:
      0 18px 34px -10px rgba(17, 17, 20, 0.38),
      0 0 0 4px color-mix(in srgb, var(--accent) 38%, transparent),
      inset 0 1px 0 #fff;
  }

  68% {
    transform: translateX(-1px) scale(1.015) rotate(var(--tilt)) translateZ(0);
  }

  100% {
    transform: rotate(var(--tilt)) translateZ(0);
    box-shadow:
      0 14px 28px -12px rgba(17, 17, 20, 0.34),
      0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent),
      inset 0 1px 0 #fff;
  }
}

.page-home .broadcast__node.is-live em {
  background: #F2D56A;
  color: #111114;
  animation: broadcast-live-badge 0.58s cubic-bezier(0.22, 1.24, 0.36, 1) 0.1s both;
}

@keyframes broadcast-live-badge {
  0% {
    transform: scale(0.72);
    opacity: 0.55;
  }

  55% {
    transform: scale(1.16);
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.page-home .rooms__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: clamp(28px, 3vw, 38px) 0 0;
  padding: clamp(22px, 2.5vw, 30px) 0 0;
  border-top: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
}

.page-home .rooms__stats div {
  margin: 0;
  padding: 0 24px;
}

.page-home .rooms__stats div:first-child {
  padding-left: 0;
}

.page-home .rooms__stats div + div {
  border-left: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
}

.page-home .rooms__stats dt {
  font-family: var(--display);
  font-weight: 640;
  font-size: clamp(1.65rem, 2.4vw, 2.15rem);
  letter-spacing: -0.035em;
  line-height: 1;
}

.page-home .rooms__stats dd {
  margin: 10px 0 0;
  max-width: 17rem;
  font-family: "Outfit", sans-serif;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--ink-2);
}

/* Taste deck — fanned, tilted, tactile. */

:is(.page-home, .page-generator, .page-brand-dna) .taste {
  padding: 8px 18px 32px;
  overflow: visible;
}

:is(.page-home, .page-generator, .page-brand-dna) .taste__deck {
  --taste-x: 0px;
  --taste-rot: 0deg;
  --taste-scale: 1;
  --taste-lift: 0;
  --taste-yes: 0;
  --taste-no: 0;
  position: relative;
  width: 220px;
  margin-inline: auto;
  overflow: visible;
}

:is(.page-home, .page-generator, .page-brand-dna) .taste__stack {
  position: relative;
  height: 292px;
  perspective: 1100px;
  overflow: visible;
  z-index: 1;
}

:is(.page-home, .page-generator, .page-brand-dna) .taste__card {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
  border-radius: 22px;
  background: #111114;
  box-shadow:
    0 18px 36px -16px rgba(17, 17, 20, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

:is(.page-home, .page-generator, .page-brand-dna) .taste__card video,
:is(.page-home, .page-generator, .page-brand-dna) .taste__card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

:is(.page-home, .page-generator, .page-brand-dna) .taste__card--d2 {
  z-index: 0;
  transform: translate3d(22px, 14px, -40px) rotate(9deg) scale(0.92);
  opacity: calc(0.42 + (var(--taste-lift) * 0.18));
}

:is(.page-home, .page-generator, .page-brand-dna) .taste__card--d1 {
  z-index: 1;
  transform: translate3d(-16px, 10px, -20px) rotate(-7deg) scale(calc(0.96 + (var(--taste-lift) * 0.03)));
  opacity: calc(0.78 + (var(--taste-lift) * 0.16));
}

:is(.page-home, .page-generator, .page-brand-dna) .taste__card--live {
  z-index: 4;
  cursor: grab;
  touch-action: none;
  transform: translate3d(var(--taste-x), 0, 0) rotate(var(--taste-rot)) scale(var(--taste-scale));
  box-shadow:
    0 18px 36px -16px rgba(17, 17, 20, 0.45),
    inset 0 0 0 2px rgba(74, 222, 128, calc(var(--taste-yes) * 0.9)),
    inset 0 0 0 2px rgba(251, 113, 133, calc(var(--taste-no) * 0.9));
}

@media (hover: none) {
  :is(.page-home, .page-generator, .page-brand-dna) .taste__stack {
    perspective: none;
  }

  :is(.page-home, .page-generator, .page-brand-dna) .taste__card--d2 {
    transform: translate(18px, 12px) rotate(8deg) scale(0.9);
  }

  :is(.page-home, .page-generator, .page-brand-dna) .taste__card--d1 {
    transform: translate(-12px, 8px) rotate(-6deg) scale(0.96);
  }

  :is(.page-home, .page-generator, .page-brand-dna) .taste__card--live {
    transform: translate(var(--taste-x), 0) rotate(var(--taste-rot)) scale(var(--taste-scale));
  }
}

:is(.page-home, .page-generator, .page-brand-dna) .taste__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(225, 29, 72, calc(var(--taste-no) * 0.28)) 0%, transparent 46%),
    linear-gradient(270deg, rgba(22, 163, 74, calc(var(--taste-yes) * 0.28)) 0%, transparent 46%);
}

:is(.page-home, .page-generator, .page-brand-dna) .taste__card--live.is-idle {
  animation: taste-idle 3.6s ease-in-out infinite;
}

:is(.page-home, .page-generator, .page-brand-dna) .taste__card--live.is-dragging {
  cursor: grabbing;
  animation: none;
}

:is(.page-home, .page-generator, .page-brand-dna) .taste__card--live.is-settling {
  animation: none;
  transition: transform 0.34s cubic-bezier(0.2, 0.7, 0.2, 1);
}

:is(.page-home, .page-generator, .page-brand-dna) .taste__card--live.is-gone {
  animation: none;
  pointer-events: none;
  transition: transform 0.38s cubic-bezier(0.22, 0.82, 0.2, 1), opacity 0.28s ease;
  opacity: 0;
}

:is(.page-home, .page-generator, .page-brand-dna) .taste__card--live.is-enter {
  animation: taste-enter 0.38s cubic-bezier(0.2, 0.85, 0.25, 1);
}

@keyframes taste-idle {
  0%,
  100% { transform: translate3d(0, 0, 0) rotate(-1.4deg) scale(1); }
  40% { transform: translate3d(5px, -4px, 0) rotate(1.8deg) scale(1); }
  70% { transform: translate3d(-4px, 3px, 0) rotate(-0.8deg) scale(1); }
}

@keyframes taste-enter {
  0% { transform: translate3d(0, 18px, 0) rotate(-2deg) scale(0.9); opacity: 0.55; }
  100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); opacity: 1; }
}

:is(.page-home, .page-generator, .page-brand-dna) .taste__stamp {
  position: absolute;
  top: 18px;
  z-index: 2;
  padding: 6px 12px;
  border-radius: 8px;
  border: 2px solid currentColor;
  font-family: "Outfit", sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0;
  transform: rotate(-14deg) scale(0.92);
}

:is(.page-home, .page-generator, .page-brand-dna) .taste__stamp--yes {
  left: 14px;
  color: #4ade80;
  background: rgba(8, 8, 10, 0.42);
  opacity: var(--taste-yes, 0);
  transform: rotate(-14deg) scale(calc(0.9 + var(--taste-yes) * 0.12));
}

:is(.page-home, .page-generator, .page-brand-dna) .taste__stamp--no {
  right: 14px;
  color: #fb7185;
  background: rgba(8, 8, 10, 0.42);
  opacity: var(--taste-no, 0);
  transform: rotate(14deg) scale(calc(0.9 + var(--taste-no) * 0.12));
}

:is(.page-home, .page-generator, .page-brand-dna) .taste__card--live.is-gone .taste__stamp--yes,
:is(.page-home, .page-generator, .page-brand-dna) .taste__card--live.is-gone .taste__stamp--no {
  animation: taste-stamp-hit 0.34s cubic-bezier(0.2, 0.9, 0.3, 1);
}

@keyframes taste-stamp-hit {
  0% { transform: rotate(-8deg) scale(0.7); }
  55% { transform: rotate(-16deg) scale(1.12); }
  100% { transform: rotate(-14deg) scale(1); }
}

:is(.page-home, .page-generator, .page-brand-dna) .taste__btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.16s ease;
}

:is(.page-home, .page-generator, .page-brand-dna) .taste__btn.is-hit {
  animation: taste-btn-hit 0.38s cubic-bezier(0.2, 0.9, 0.3, 1);
}

:is(.page-home, .page-generator, .page-brand-dna) .taste__btn.is-hit::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid currentColor;
  pointer-events: none;
  animation: taste-btn-ring 0.48s ease-out forwards;
}

@keyframes taste-btn-hit {
  0% { transform: scale(1); }
  40% { transform: scale(1.14); }
  100% { transform: scale(1); }
}

@keyframes taste-btn-ring {
  0% { opacity: 0.7; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.7); }
}

:is(.page-home, .page-generator, .page-brand-dna) .taste__cap {
  position: absolute;
  inset: auto 0 0;
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 40px 14px 16px;
  background: linear-gradient(transparent, rgba(8, 8, 10, 0.8));
  color: #fff;
}

:is(.page-home, .page-generator, .page-brand-dna) .taste__cap b {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}

:is(.page-home, .page-generator, .page-brand-dna) .taste__cap span {
  font-family: "Outfit", sans-serif;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.68);
}

:is(.page-home, .page-generator, .page-brand-dna) .taste__acts {
  position: relative;
  z-index: 4;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  margin-top: -22px;
}

:is(.page-home, .page-generator, .page-brand-dna) .taste__btn svg {
  width: 19px;
  height: 19px;
}

:is(.page-home, .page-generator, .page-brand-dna) .taste__btn:hover {
  transform: scale(1.08);
}

:is(.page-home, .page-generator, .page-brand-dna) .taste__btn--no {
  background: #fff;
  color: #E11D48;
  box-shadow: 0 10px 22px -8px rgba(225, 29, 72, 0.35);
}

:is(.page-home, .page-generator, .page-brand-dna) .taste__btn--yes {
  background: #16A34A;
  color: #fff;
  box-shadow: 0 10px 22px -8px rgba(22, 163, 74, 0.45);
}

:is(.page-home, .page-generator, .page-brand-dna) .taste__hint {
  margin: 28px 0 0;
  text-align: center;
  font-family: "Outfit", sans-serif;
  font-size: 0.88rem;
  color: var(--ink-2);
}

:is(.page-home, .page-generator, .page-brand-dna) .taste__hint b {
  color: var(--ink);
  font-weight: 700;
}

:is(.page-home, .page-generator, .page-brand-dna) .taste__learn {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(18px, 3.6vw, 44px);
  max-width: 980px;
  margin-inline: auto;
}

:is(.page-home, .page-generator, .page-brand-dna) .taste__learn-col {
  min-height: 220px;
  align-self: center;
}

:is(.page-home, .page-generator, .page-brand-dna) .taste__learn-kicker {
  margin: 0 0 12px;
  font-family: "Outfit", sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

:is(.page-home, .page-generator, .page-brand-dna) .taste__learn-col--dont {
  text-align: right;
}

:is(.page-home, .page-generator, .page-brand-dna) .taste__learn-col--dont .taste__learn-kicker {
  color: #e11d48;
}

:is(.page-home, .page-generator, .page-brand-dna) .taste__learn-col--dont .taste__learn-essence {
  color: var(--ink);
}

:is(.page-home, .page-generator, .page-brand-dna) .taste__learn-col--do .taste__learn-kicker {
  color: #16a34a;
}

:is(.page-home, .page-generator, .page-brand-dna) .taste__learn-essence {
  margin: 0 0 12px;
  font-family: var(--display);
  font-size: 0.98rem;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.35;
  color: var(--ink);
  transition: opacity 0.34s ease, transform 0.34s ease;
}

:is(.page-home, .page-generator, .page-brand-dna) .taste__learn-essence.is-swap {
  opacity: 0;
  transform: translateY(6px);
}

:is(.page-home, .page-generator, .page-brand-dna) .taste__learn-essence:not([hidden]) {
  animation: taste-learn-in 0.48s cubic-bezier(0.22, 1, 0.36, 1) both;
}

:is(.page-home, .page-generator, .page-brand-dna) .taste__learn-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

:is(.page-home, .page-generator, .page-brand-dna) .taste__learn-col--dont .taste__learn-list {
  justify-items: end;
}

:is(.page-home, .page-generator, .page-brand-dna) .taste__learn-list li {
  max-width: 100%;
  padding: 7px 10px;
  border-radius: 8px;
  font-family: "Outfit", sans-serif;
  font-size: 0.76rem;
  font-weight: 500;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transform: translateY(8px);
  animation: taste-learn-in 0.46s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

:is(.page-home, .page-generator, .page-brand-dna) .taste__learn-col--dont .taste__learn-list li {
  color: #be123c;
  background: rgba(225, 29, 72, 0.07);
}

:is(.page-home, .page-generator, .page-brand-dna) .taste__learn-col--do .taste__learn-list li {
  color: #166534;
  background: rgba(22, 163, 74, 0.08);
}

:is(.page-home, .page-generator, .page-brand-dna) .taste__learn-list li.is-out {
  animation: taste-learn-out 0.3s ease forwards;
}

@keyframes taste-learn-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes taste-learn-out {
  to {
    opacity: 0;
    transform: translateY(-6px);
  }
}

.page-home .forge .well--ink {
  display: contents;
}

.page-home .forge__copy {
  display: block;
  padding: 0;
  max-width: none;
}

.page-home .forge__copy p:not(.kicker) {
  margin: 16px 0 28px;
  max-width: 32rem;
  color: rgba(245, 245, 244, 0.62);
}

.page-home .forge__points {
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
  max-width: 32rem;
  color: rgba(245, 245, 244, 0.72);
}

.page-home .forge__points li {
  padding-left: 16px;
  border-left: 2px solid var(--accent);
}

.page-home .convey {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  height: 560px;
  overflow: hidden;
  position: relative;
}

.page-home .convey::before,
.page-home .convey::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  height: 10%;
  pointer-events: none;
}

.page-home .convey::before {
  top: 0;
  background: linear-gradient(180deg, var(--bg, #08080A), transparent);
}

.page-home .convey::after {
  bottom: 0;
  background: linear-gradient(0deg, var(--bg, #08080A), transparent);
}

.page-home .convey__col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.page-home .convey__col--up {
  animation: convey-up 32s linear infinite;
}

.page-home .convey__col--down {
  animation: convey-down 32s linear infinite;
}

.page-home .convey video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 18px;
  background: #111;
}

@keyframes convey-up {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}

@keyframes convey-down {
  from { transform: translateY(-50%); }
  to { transform: translateY(0); }
}

.page-home .viral {
  padding: clamp(72px, 9vw, 120px) 0 clamp(48px, 6vw, 72px);
  overflow: hidden;
  background: #08080A;
  color: #F5F5F4;
}

.page-home .viral h2 {
  color: #F5F5F4;
}

.page-home .viral__top {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: 32px;
  align-items: center;
  margin-bottom: clamp(36px, 5vw, 56px);
}

.page-home .viral__copy {
  max-width: 36rem;
}

.page-home .viral__copy p:not(.kicker) {
  margin: 16px 0 0;
  max-width: 32rem;
  color: rgba(245, 245, 244, 0.62);
}

.page-home .viral__tags {
  position: relative;
  height: 228px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-home .viral__tags li {
  position: absolute;
}

.page-home .viral__tag-float {
  display: block;
  transform: scale(0.5);
  transform-origin: center center;
  backface-visibility: hidden;
  animation: viral-tag-drift var(--drift, 9s) ease-in-out infinite;
}

.page-home .viral__tags .is-a .viral__tag-float { --drift: 8.4s; animation-name: viral-tag-drift-a; }
.page-home .viral__tags .is-b .viral__tag-float { --drift: 10.2s; animation-name: viral-tag-drift-b; animation-delay: -2.1s; }
.page-home .viral__tags .is-c .viral__tag-float { --drift: 9.1s; animation-name: viral-tag-drift-c; animation-delay: -4.4s; }
.page-home .viral__tags .is-d .viral__tag-float { --drift: 11s; animation-name: viral-tag-drift-d; animation-delay: -1.2s; }
.page-home .viral__tags .is-e .viral__tag-float { --drift: 8.8s; animation-name: viral-tag-drift-e; animation-delay: -3.6s; }
.page-home .viral__tags .is-f .viral__tag-float { --drift: 10.6s; animation-name: viral-tag-drift-f; animation-delay: -5.5s; }
.page-home .viral__tags .is-g .viral__tag-float { --drift: 9.4s; animation-name: viral-tag-drift-g; animation-delay: -0.8s; }

.page-home .viral__tag-label {
  display: block;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--pill-wash, #e2d9f7);
  font-family: "Outfit", sans-serif;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #111;
  white-space: nowrap;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
  transform: rotate(var(--rot, 0deg)) scale(2);
  transform-origin: center center;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

.page-home .viral__tags .is-a { left: 0%; top: 38%; --pill-wash: #e2d9f7; }
.page-home .viral__tags .is-b { left: 22%; top: 72%; --pill-wash: #f3e6b3; }
.page-home .viral__tags .is-c { left: calc(36% + 28px); top: 2%; --pill-wash: #c5ead4; }
.page-home .viral__tags .is-d { left: 6%; top: 4%; --pill-wash: #f6d5e0; }
.page-home .viral__tags .is-e { left: 38%; top: 44%; --pill-wash: #d7defc; }
.page-home .viral__tags .is-f { left: 58%; top: 78%; --pill-wash: #f3dcc4; }
.page-home .viral__tags .is-g { left: 68%; top: 38%; --pill-wash: #c7ebf0; }

@keyframes viral-tag-drift-a {
  0%, 100% { transform: scale(0.5) translate3d(0, 0, 0); }
  50% { transform: scale(0.5) translate3d(12px, -10px, 0); }
}

@keyframes viral-tag-drift-b {
  0%, 100% { transform: scale(0.5) translate3d(0, 0, 0); }
  50% { transform: scale(0.5) translate3d(-10px, 12px, 0); }
}

@keyframes viral-tag-drift-c {
  0%, 100% { transform: scale(0.5) translate3d(0, 0, 0); }
  50% { transform: scale(0.5) translate3d(14px, 8px, 0); }
}

@keyframes viral-tag-drift-d {
  0%, 100% { transform: scale(0.5) translate3d(0, 0, 0); }
  50% { transform: scale(0.5) translate3d(-8px, -12px, 0); }
}

@keyframes viral-tag-drift-e {
  0%, 100% { transform: scale(0.5) translate3d(0, 0, 0); }
  50% { transform: scale(0.5) translate3d(10px, 14px, 0); }
}

@keyframes viral-tag-drift-f {
  0%, 100% { transform: scale(0.5) translate3d(0, 0, 0); }
  50% { transform: scale(0.5) translate3d(-12px, 6px, 0); }
}

@keyframes viral-tag-drift-g {
  0%, 100% { transform: scale(0.5) translate3d(0, 0, 0); }
  50% { transform: scale(0.5) translate3d(8px, -14px, 0); }
}

.page-home .viral__strip {
  --viral-h: clamp(248px, 33vw, 368px);
  isolation: isolate;
  overflow: hidden;
  padding-block: 22px;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  position: relative;
}

.page-home .viral__strip::before,
.page-home .viral__strip::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 6%;
  pointer-events: none;
}

.page-home .viral__strip::before {
  left: 0;
  background: linear-gradient(90deg, var(--bg, #08080A), transparent);
}

.page-home .viral__strip::after {
  right: 0;
  background: linear-gradient(270deg, var(--bg, #08080A), transparent);
}

.page-home .viral__strip.is-drag,
.page-home .viral__strip.is-coast {
  cursor: grabbing;
}

.page-home .viral__rail {
  display: flex;
  gap: 14px;
  width: max-content;
  will-change: transform;
}

.page-home .viral__set {
  display: flex;
  gap: 14px;
}

.page-home .viral__shot {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  flex: none;
  width: calc(var(--viral-h) * 2 / 3);
  margin: 0;
  overflow: hidden;
  border-radius: 28px;
  background: #111;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.42);
  transform: scale(1);
  transform-origin: center center;
  transition:
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.page-home .viral__shot video,
.page-home .viral__shot img {
  display: block;
  flex: none;
  width: 100%;
  height: var(--viral-h);
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

.page-home .viral__shot figcaption {
  flex: none;
  margin: 0;
  padding: 11px 12px 12px;
  color: #111;
  font-family: "Outfit", sans-serif;
  font-size: 0.95rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-align: center;
}

.page-home .viral__set .viral__shot:nth-child(7n + 1) figcaption { background: #e2d9f7; }
.page-home .viral__set .viral__shot:nth-child(7n + 2) figcaption { background: #f3e6b3; }
.page-home .viral__set .viral__shot:nth-child(7n + 3) figcaption { background: #c5ead4; }
.page-home .viral__set .viral__shot:nth-child(7n + 4) figcaption { background: #f6d5e0; }
.page-home .viral__set .viral__shot:nth-child(7n + 5) figcaption { background: #d7defc; }
.page-home .viral__set .viral__shot:nth-child(7n + 6) figcaption { background: #f3dcc4; }
.page-home .viral__set .viral__shot:nth-child(7n + 7) figcaption { background: #c7ebf0; }

@media (hover: hover) and (pointer: fine) {
  .page-home .viral__strip:has(.viral__shot:hover) .viral__shot:not(:hover) {
    opacity: 0.4;
  }

  .page-home .viral__strip .viral__shot:hover {
    z-index: 2;
    transform: scale(1.1);
    box-shadow: 0 26px 52px rgba(0, 0, 0, 0.5);
  }

  .page-home .viral__strip.is-drag .viral__shot,
  .page-home .viral__strip.is-drag .viral__shot:hover,
  .page-home .viral__strip.is-drag:has(.viral__shot:hover) .viral__shot:not(:hover),
  .page-home .viral__strip.is-coast .viral__shot,
  .page-home .viral__strip.is-coast .viral__shot:hover,
  .page-home .viral__strip.is-coast:has(.viral__shot:hover) .viral__shot:not(:hover) {
    z-index: 0;
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.42);
    transition: none;
  }
}

.page-home .explore {
  padding-block: clamp(52px, 7vw, 88px);
}

.page-home .sec-head {
  max-width: 42rem;
  margin-bottom: 40px;
}

.page-home .sec-head p:not(.kicker) {
  margin-top: 8px;
  color: var(--ink-2);
}

.page-home .marks__row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink-2);
}

.page-home .explore__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.page-home .explore__chips button {
  padding: 8px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-2);
  background: #fff;
  font-family: "Outfit", sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
}

.page-home .explore__chips button.is-on,
.page-home .explore__chips button[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #111;
}

.page-home .tile video,
.page-home .tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-home .tile__meta {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 10px 10px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.72));
  color: #fff;
  font-family: "Outfit", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
}

.page-home .tile__like {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.page-home .tile__like svg {
  width: 14px;
  height: 14px;
}

.page-home .tile__like[aria-pressed="true"] {
  background: #fff;
  color: #E11D48;
}

.page-home .booth__tabs {
  display: flex;
  flex-wrap: wrap;
}

.page-home .booth__panel img,
.page-home .booth__panel video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-home .close {
  background: #08080A;
  color: #F5F5F4;
  text-align: center;
}

.page-home .close .cta-row {
  justify-content: center;
}

.page-home .close p {
  margin: 12px auto 22px;
  max-width: 30rem;
  color: var(--on-ink-2);
}

.page-home .explore .well--gold,
.page-home .explore .well--paper {
  display: block;
}

.page-home .explore .well--gold .explore__chips button {
  background: #fff;
}

.page-home .explore .well--gold .explore__chips button.is-on,
.page-home .explore .well--gold .explore__chips button[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.page-home .explore__strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-home .explore__strip li[hidden] {
  display: none;
}

.page-home .tile {
  position: relative;
  overflow: hidden;
  aspect-ratio: auto;
  height: 260px;
  border-radius: 18px;
}

:is(.page-home, .page-generator, .page-brand-dna) .dna-train {
  padding-block: clamp(56px, 8vw, 96px);
  background: #fff;
}

.page-generator .dna-train .editor-matrix__head {
  max-width: 38rem;
  margin: 0 auto clamp(28px, 4vw, 40px);
}

.page-generator .dna-train .editor-matrix__head h2 {
  margin: 0 0 10px;
  font-size: clamp(1.75rem, 3vw, 2.35rem);
}

.page-generator .dna-train .editor-matrix__head p {
  margin: 0;
  color: var(--ink-2);
  line-height: 1.5;
}

:is(.page-home, .page-generator, .page-brand-dna) .dna-train__head {
  max-width: 36rem;
  margin: 0 auto 36px;
  text-align: center;
}

:is(.page-home, .page-generator, .page-brand-dna) .dna-train__head .kicker {
  justify-content: center;
}

:is(.page-home, .page-generator, .page-brand-dna) .dna-train__head p:not(.kicker) {
  margin: 12px auto 0;
  color: var(--ink-2);
}

:is(.page-home, .page-generator, .page-brand-dna) .dna-train__points {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  max-width: 58rem;
  margin: clamp(32px, 4vw, 48px) auto 40px;
  padding: 0;
}

:is(.page-home, .page-generator, .page-brand-dna) .dna-train__points div {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
  padding: 16px 18px;
  overflow: hidden;
}

:is(.page-home, .page-generator, .page-brand-dna) .dna-train__icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: var(--point-wash, var(--accent-wash));
  color: var(--ink);
  flex-shrink: 0;
}

:is(.page-home, .page-generator, .page-brand-dna) .dna-train__icon svg {
  display: block;
  width: 16px;
  height: 16px;
  stroke-width: 1.5;
}

:is(.page-home, .page-generator, .page-brand-dna) .dna-train__points div::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--point-wash, var(--accent-wash));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

:is(.page-home, .page-generator, .page-brand-dna) .dna-train__points div:hover::before,
:is(.page-home, .page-generator, .page-brand-dna) .dna-train__points div:focus-within::before {
  transform: scaleX(1);
}

:is(.page-home, .page-generator, .page-brand-dna) .dna-train__points div:nth-child(1) {
  --point-wash: #f3e6b3;
}

:is(.page-home, .page-generator, .page-brand-dna) .dna-train__points div:nth-child(2) {
  --point-wash: #c5ead4;
}

:is(.page-home, .page-generator, .page-brand-dna) .dna-train__points div:nth-child(3) {
  --point-wash: #d7defc;
}

:is(.page-home, .page-generator, .page-brand-dna) .dna-train__points div:nth-child(4) {
  --point-wash: #e2d9f7;
}

:is(.page-home, .page-generator, .page-brand-dna) .dna-train__points div:first-child {
  padding-left: 16px;
}

:is(.page-home, .page-generator, .page-brand-dna) .dna-train__points div + div {
  border-left: 1px solid var(--line);
}

:is(.page-home, .page-generator, .page-brand-dna) .dna-train__points dt,
:is(.page-home, .page-generator, .page-brand-dna) .dna-train__points dd {
  position: relative;
  z-index: 1;
}

:is(.page-home, .page-generator, .page-brand-dna) .dna-train__points dt {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.12rem;
  letter-spacing: -0.03em;
}

:is(.page-home, .page-generator, .page-brand-dna) .dna-train__points dd {
  margin: 6px 0 0;
  font-family: "Outfit", sans-serif;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--ink-2);
}

:is(.page-home, .page-generator, .page-brand-dna) .dna-train .taste {
  margin-top: clamp(24px, 6.5vw, 7vw);
  margin-bottom: 0;
  padding: 0;
}

:is(.page-home, .page-generator, .page-brand-dna) .dna-train .taste__learn {
  max-width: 1120px;
  gap: clamp(40px, 8vw, 108px);
}

:is(.page-home, .page-generator, .page-brand-dna) .dna-train .taste__learn-col--dont {
  padding-right: clamp(4px, 1.5vw, 20px);
}

:is(.page-home, .page-generator, .page-brand-dna) .dna-train .taste__learn-col--do {
  padding-left: clamp(4px, 1.5vw, 20px);
}

:is(.page-home, .page-generator, .page-brand-dna) .dna-train .taste__learn-col {
  min-height: 320px;
}

:is(.page-home, .page-generator, .page-brand-dna) .dna-train .taste__learn-essence {
  font-size: 1.05rem;
}

:is(.page-home, .page-generator, .page-brand-dna) .dna-train .taste__learn-list li {
  max-width: 17rem;
  font-size: 0.8rem;
}

:is(.page-home, .page-generator, .page-brand-dna) .dna-train .taste__learn-col--dont .taste__learn-list li {
  max-width: 17rem;
}

:is(.page-home, .page-generator, .page-brand-dna) .dna-train .taste__deck {
  width: 268px;
}

:is(.page-home, .page-generator, .page-brand-dna) .dna-train .taste__stack {
  height: 476px;
}

:is(.page-home, .page-generator, .page-brand-dna) .dna-train .taste__card {
  border-radius: 28px;
}

:is(.page-home, .page-generator, .page-brand-dna) .dna-train .taste__btn {
  width: 56px;
  height: 56px;
}

:is(.page-home, .page-generator, .page-brand-dna) .dna-train .taste__cap b {
  font-size: 1.28rem;
}

.page-home .studio {
  --studio-step: 62vh;
  position: relative;
  height: calc((100svh - var(--nav-offset)) + 5 * var(--studio-step));
  padding: 0;
  background: #fff;
}

.page-home .studio__pin {
  position: sticky;
  top: var(--nav-offset);
  height: calc(100svh - var(--nav-offset));
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.page-home .studio #templates {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.page-home .studio__pin .shell {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 100%;
  max-width: 1560px;
  padding-block: 12px;
}

.page-home .studio__app {
  --studio-tint: #0f7a45;
  --studio-inset: clamp(24px, 3.4vw, 52px);
  --studio-pad: clamp(22px, 2.8vw, 36px);
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: var(--studio-pad) 0 var(--studio-pad) var(--studio-inset);
  border-radius: 28px;
  background: #c5ead4;
}

.page-home .studio__app.is-hot {
  transition: background-color 0.5s ease;
}

.page-home .studio__app::before,
.page-home .studio__app::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.page-home .studio__app::before {
  background:
    radial-gradient(ellipse 56% 48% at 88% 6%, rgba(255, 255, 255, 0.55), transparent 72%),
    radial-gradient(ellipse 48% 42% at 8% 96%, rgba(255, 255, 255, 0.22), transparent 70%),
    linear-gradient(165deg, rgba(255, 255, 255, 0.18) 0%, transparent 42%, rgba(17, 17, 20, 0.06) 100%);
}

.page-home .studio__app::after {
  background: radial-gradient(ellipse 78% 72% at 52% 48%, transparent 48%, rgba(17, 17, 20, 0.08) 100%);
  opacity: 0.55;
}

.page-home .studio__app > * {
  position: relative;
  z-index: 1;
}

.page-home .studio__tabs {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 3px;
  width: fit-content;
  max-width: calc(100% - var(--studio-inset));
  margin: 0 auto var(--studio-pad);
  padding: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.42);
  border: 1px solid rgba(17, 17, 20, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 10px 28px -20px rgba(17, 17, 20, 0.35);
  backdrop-filter: blur(14px);
}

.page-home .studio__thumb {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  border-radius: 999px;
  background: #0f7a45;
  pointer-events: none;
  opacity: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 6px 14px -10px rgba(17, 17, 20, 0.35);
  transition:
    transform 0.38s cubic-bezier(0.4, 0, 0.2, 1),
    width 0.38s cubic-bezier(0.4, 0, 0.2, 1),
    height 0.38s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.45s linear;
}

.page-home .studio__thumb.is-set {
  opacity: 1;
}

.page-home .studio__tabs button {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 9px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  font-family: "Outfit", sans-serif;
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.28s ease, background-color 0.28s ease;
}

.page-home .studio__tabs button:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.45);
}

.page-home .studio__tabs button[aria-selected="true"] {
  color: #fff;
  background: transparent;
}

.page-home .studio__tabs button[aria-selected="true"]:hover {
  color: #fff;
  background: transparent;
}

.page-home .studio__tabs button:focus-visible {
  outline: 2px solid var(--studio-tint);
  outline-offset: 3px;
}

.page-home .studio__stage {
  display: grid;
  grid-template-columns: minmax(15rem, 0.48fr) minmax(0, 1fr);
  gap: clamp(22px, 2.4vw, 38px);
  align-items: center;
  min-height: 0;
}

.page-home .studio__copy {
  display: grid;
  align-content: center;
  padding-bottom: 6px;
}

.page-home .studio__pill {
  display: none;
}

.page-home .studio__swap {
  display: none;
}

.page-home .studio__panel {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

.page-home .studio__app.is-hot .studio__panel {
  transition: opacity 0.32s ease, transform 0.32s ease;
}

.page-home .studio__panel.is-on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.page-home .studio__panel h2 {
  margin: 0 0 clamp(16px, 1.8vw, 24px);
  font-family: var(--display);
  font-weight: 640;
  font-size: clamp(1.82rem, 2.75vw, 2.45rem);
  letter-spacing: -0.038em;
  line-height: 1.14;
}

.page-home .studio__panel ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: clamp(10px, 1.2vw, 14px);
  max-width: 21rem;
}

.page-home .studio__panel li {
  position: relative;
  padding-left: 1.15rem;
  color: var(--ink);
  font-size: clamp(0.98rem, 1.1vw, 1.06rem);
  line-height: 1.5;
}

.page-home .studio__panel li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--studio-tint);
}

.page-home .studio__shot {
  margin: 0;
  min-height: 0;
  width: 100%;
  justify-self: end;
}

.page-home .studio__browser {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 14px 0 0 14px;
  background: #0e0e12;
  box-shadow:
    0 0 0 1px rgba(17, 17, 20, 0.32),
    -14px 18px 40px -22px rgba(17, 17, 20, 0.4);
}

.page-home .studio__chrome {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  background: #131317;
}

.page-home .studio__dots {
  display: flex;
  gap: 6px;
}

.page-home .studio__dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.page-home .studio__dots i:nth-child(1) { background: #f2635b; }
.page-home .studio__dots i:nth-child(2) { background: #e0ae3c; }
.page-home .studio__dots i:nth-child(3) { background: #43b95c; }

.page-home .studio__url {
  justify-self: center;
  width: min(100%, 210px);
  padding: 3px 12px;
  border-radius: 6px;
  background: #0b0b0e;
  color: rgba(245, 245, 244, 0.5);
  font-family: "Outfit", sans-serif;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: center;
}

.page-home .studio__viewport {
  position: relative;
  aspect-ratio: 1330 / 894;
  max-height: calc(100svh - var(--nav-offset) - 300px);
  flex: none;
  overflow: hidden;
  background: #fff;
}

.page-home .studio__track {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #fff;
  isolation: isolate;
}

.page-home .studio__frame {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  user-select: none;
  pointer-events: none;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  transition: transform 0.78s cubic-bezier(0.22, 1, 0.32, 1);
  will-change: transform;
}

.page-home .studio__frame.is-swap {
  z-index: 2;
}

.page-home .studio__track.is-duo .studio__frame {
  left: -1px;
  width: calc(100% + 2px);
  max-width: none;
}

:is(.page-home, .page-brand-dna) .inspire {
  padding-block: clamp(56px, 8vw, 104px);
}

:is(.page-home, .page-brand-dna) .inspire__board {
  display: grid;
  grid-template-columns: auto minmax(0, 1.15fr) minmax(0, 0.95fr);
  grid-template-rows: minmax(0, 1.15fr) minmax(0, 0.85fr);
  grid-template-areas:
    "hero spot spot"
    "hero pack pitch";
  align-items: stretch;
  gap: 14px;
  height: clamp(520px, 54vw, 600px);
  padding: 16px;
  border-radius: clamp(24px, 3vw, 36px);
  background: #111114;
  color: #F5F5F4;
}

:is(.page-home, .page-brand-dna) .inspire__hero {
  grid-area: hero;
  position: relative;
  display: flex;
  flex-direction: column;
  width: auto;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
}

:is(.page-home, .page-brand-dna) .inspire__phone {
  position: relative;
  flex: 1;
  width: auto;
  height: 100%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 22px;
  background: #0a0a0c;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 18px 40px -24px rgba(0, 0, 0, 0.65);
}

:is(.page-home, .page-brand-dna) .inspire__hero video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

:is(.page-home, .page-brand-dna) .inspire__dots {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(10, 1fr);
  padding: 18% 16% 20%;
  pointer-events: none;
}

:is(.page-home, .page-brand-dna) .inspire__dots i {
  width: 3px;
  height: 3px;
  margin: auto;
  border-radius: 50%;
  background: rgba(243, 213, 106, 0);
  opacity: 0;
  transform: scale(0.35);
}

:is(.page-home, .page-brand-dna) .inspire__dots.is-scan i {
  animation: inspire-dot 4.2s ease-in-out both;
  animation-delay: calc(var(--r) * 160ms + var(--c) * 55ms);
}

:is(.page-home, .page-brand-dna) .inspire__hero figcaption {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 14px 14px 18px;
  background: linear-gradient(180deg, rgba(8, 8, 10, 0.5) 0%, transparent 34%);
  color: #fff;
  pointer-events: none;
}

:is(.page-home, .page-brand-dna) .inspire__live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(8, 8, 10, 0.62);
  backdrop-filter: blur(8px);
  font-family: "Outfit", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

:is(.page-home, .page-brand-dna) .inspire__live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
  animation: inspire-live 1.6s ease-out infinite;
}

:is(.page-home, .page-brand-dna) .inspire__spot {
  grid-area: spot;
  display: flex;
  min-height: 0;
  overflow: hidden;
  border-radius: 22px;
  background: #fff;
  color: var(--ink);
}

:is(.page-home, .page-brand-dna) .inspire__spot-copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  min-height: 0;
  padding: 18px 20px 16px;
  transition: opacity 0.22s ease;
}

:is(.page-home, .page-brand-dna) .inspire__kicker {
  margin: 0 0 10px;
  font-family: "Outfit", sans-serif;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

:is(.page-home, .page-brand-dna) .inspire__detect {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

:is(.page-home, .page-brand-dna) .inspire__quote {
  margin: 0;
  flex: 1;
  font-family: var(--display);
  font-weight: 640;
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  letter-spacing: -0.03em;
  line-height: 1.18;
}

:is(.page-home, .page-brand-dna) .inspire__lift {
  flex-shrink: 0;
  padding: 6px 10px;
  border-radius: 999px;
  background: #e8f5ec;
  color: #0f7a45;
  font-family: "Outfit", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

:is(.page-home, .page-brand-dna) .inspire__spot-copy.is-flash .inspire__lift {
  transform: scale(1.08);
}

:is(.page-home, .page-brand-dna) .inspire__feed {
  display: grid;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  flex: 1;
  min-height: 0;
}

:is(.page-home, .page-brand-dna) .inspire__feed li {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 0;
  padding: 0 12px;
  border-radius: 10px;
  background: rgba(17, 17, 17, 0.04);
  border: 1px solid transparent;
  font-family: "Outfit", sans-serif;
  font-size: 0.72rem;
  transition:
    background 0.28s ease,
    border-color 0.28s ease,
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

:is(.page-home, .page-brand-dna) .inspire__feed li.is-active {
  background: #f3e6b3;
  border-color: rgba(201, 162, 39, 0.28);
  transform: translateX(4px);
  box-shadow: 0 8px 18px -14px rgba(201, 162, 39, 0.55);
}

:is(.page-home, .page-brand-dna) .inspire__feed li span {
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
}

:is(.page-home, .page-brand-dna) .inspire__feed li b {
  font-weight: 600;
  color: var(--ink);
}

:is(.page-home, .page-brand-dna) .inspire__feed li i {
  font-style: normal;
  font-weight: 700;
  color: #0f7a45;
}

:is(.page-home, .page-brand-dna) .inspire__mark {
  margin: 10px 0 0;
  font-family: "Outfit", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink);
}

:is(.page-home, .page-brand-dna) .inspire__pack {
  grid-area: pack;
  display: flex;
  flex-direction: column;
  min-height: 0;
  gap: 10px;
  padding: 14px;
  border-radius: 22px;
  background: #ece4c8;
  color: var(--ink);
}

:is(.page-home, .page-brand-dna) .inspire__pack-kicker {
  margin: 0;
  font-family: "Outfit", sans-serif;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}

:is(.page-home, .page-brand-dna) .inspire__thumbs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  flex: 1;
  min-height: 0;
}

:is(.page-home, .page-brand-dna) .inspire__thumbs figure {
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin: 0;
}

:is(.page-home, .page-brand-dna) .inspire__thumbs video {
  display: block;
  flex: 1;
  width: 100%;
  min-height: 0;
  height: auto;
  object-fit: cover;
  border-radius: 12px;
  background: #111;
}

:is(.page-home, .page-brand-dna) .inspire__thumbs figcaption {
  margin-top: 6px;
  font-family: "Outfit", sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

:is(.page-home, .page-brand-dna) .inspire__pitch {
  grid-area: pitch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  min-height: 0;
  padding: 18px 18px 16px;
  border-radius: 22px;
  background: #1c1c20;
}

:is(.page-home, .page-brand-dna) .inspire__pitch > p {
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.05rem, 1.5vw, 1.28rem);
  letter-spacing: -0.03em;
  line-height: 1.28;
  color: rgba(245, 245, 244, 0.92);
}

:is(.page-home, .page-brand-dna) .inspire__pitch .btn {
  width: max-content;
}

:is(.page-home, .page-brand-dna) .inspire__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: "Outfit", sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(245, 245, 244, 0.42);
}

:is(.page-home, .page-brand-dna) .inspire__pills li + li {
  position: relative;
}

:is(.page-home, .page-brand-dna) .inspire__pills li + li::before {
  content: "";
  position: absolute;
  left: -11px;
  top: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  transform: translateY(-50%);
  opacity: 0.5;
}

:is(.page-home, .page-brand-dna) .inspire__head {
  max-width: 40rem;
  margin: 0 auto;
  text-align: center;
}

:is(.page-home, .page-brand-dna) .inspire__faces {
  display: flex;
  justify-content: center;
  margin: 0 0 18px;
}

:is(.page-home, .page-brand-dna) .inspire__faces img {
  width: 36px;
  height: 36px;
  margin-left: -8px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--paper);
}

:is(.page-home, .page-brand-dna) .inspire__faces img:first-child {
  margin-left: 0;
}

:is(.page-home, .page-brand-dna) .inspire__head p:not(.kicker) {
  margin: 12px auto 0;
  max-width: 32rem;
  color: var(--ink-2);
}

:is(.page-home, .page-brand-dna) .inspire__lanes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: clamp(28px, 4vw, 44px) 0 clamp(36px, 5vw, 56px);
}

:is(.page-home, .page-brand-dna) .inspire__lanes div {
  display: flex;
  flex-direction: column;
  min-height: 188px;
  margin: 0;
  padding: 20px 18px 18px;
  border-radius: 20px;
}

:is(.page-home, .page-brand-dna) .inspire__lanes div:nth-child(1) { background: #e2d9f7; }
:is(.page-home, .page-brand-dna) .inspire__lanes div:nth-child(2) { background: #c5ead4; }
:is(.page-home, .page-brand-dna) .inspire__lanes div:nth-child(3) { background: #f3dcc4; }
:is(.page-home, .page-brand-dna) .inspire__lanes div:nth-child(4) { background: #d7defc; }

:is(.page-home, .page-brand-dna) .inspire__ico {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: 18px;
  border-radius: 10px;
  background: rgba(17, 17, 20, 0.08);
  color: var(--ink);
  flex-shrink: 0;
}

:is(.page-home, .page-brand-dna) .inspire__ico svg {
  display: block;
  width: 16px;
  height: 16px;
  stroke-width: 1.5;
}

:is(.page-home, .page-brand-dna) .inspire__lanes dt {
  margin-top: auto;
  font-family: var(--display);
  font-weight: 640;
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  letter-spacing: -0.035em;
}

:is(.page-home, .page-brand-dna) .inspire__lanes dd {
  margin: 8px 0 0;
  font-family: "Outfit", sans-serif;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--ink-2);
}

@keyframes inspire-live {
  0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55); }
  70% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

@keyframes inspire-dot {
  0%, 8% {
    opacity: 0;
    transform: scale(0.35);
    background: rgba(243, 213, 106, 0);
  }
  18% {
    opacity: 0.92;
    transform: scale(1);
    background: rgba(243, 213, 106, 0.9);
    box-shadow: 0 0 8px rgba(232, 185, 49, 0.35);
  }
  36%, 100% {
    opacity: 0;
    transform: scale(0.35);
    background: rgba(243, 213, 106, 0);
    box-shadow: none;
  }
}

.page-home .fits {
  padding-block: clamp(56px, 8vw, 104px);
}

.page-home .fits__head {
  max-width: 40rem;
  margin: 0 auto clamp(36px, 5vw, 56px);
  text-align: center;
}

.page-home .fits__head p {
  margin: 12px auto 0;
  max-width: 34rem;
  color: var(--ink-2);
}

.page-home .fits__stage {
  display: grid;
  grid-template-columns: minmax(280px, 0.88fr) minmax(0, 1.22fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.page-home .fits__nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.page-home .fits__tab {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  min-height: 58px;
  margin: 0;
  padding: 0 20px;
  border: 1.5px solid #111;
  border-radius: 22px;
  background: #e2d9f7;
  color: #111;
  text-align: left;
  cursor: pointer;
  font: inherit;
  box-shadow: 3px 3px 0 #111;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease, padding 0.22s ease;
}

.page-home .fits__tab:nth-child(1) { background: #e2d9f7; }
.page-home .fits__tab:nth-child(2) { background: #d7defc; }
.page-home .fits__tab:nth-child(3) { background: #f3e6b3; }
.page-home .fits__tab:nth-child(4) { background: #c5ead4; }
.page-home .fits__tab:nth-child(5) { background: #f6d5e0; }
.page-home .fits__tab:nth-child(6) { background: #f3dcc4; }
.page-home .fits__tab:nth-child(7) { background: #c7ebf0; }

.page-home .fits__tab:not(.is-on) {
  filter: saturate(0.88);
  box-shadow: 2px 2px 0 #111;
}

.page-home .fits__tab:not(.is-on):hover {
  filter: none;
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 #111;
}

.page-home .fits__tab.is-on {
  padding: 16px 22px 18px;
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 #111;
  filter: none;
}

.page-home .fits__tab:focus-visible {
  outline: 2px solid #111;
  outline-offset: 3px;
}

.page-home .fits__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
}

.page-home .fits__tab.is-on .fits__top {
  min-height: 0;
}

.page-home .fits__pill {
  display: block;
  min-width: 0;
  font-family: var(--display);
  font-size: clamp(1.22rem, 1.9vw, 1.55rem);
  font-weight: 640;
  letter-spacing: -0.038em;
  line-height: 1;
  white-space: nowrap;
  color: #111;
}

.page-home .fits__chev {
  flex: none;
  width: 18px;
  height: 18px;
  color: #111;
  opacity: 0.45;
  transform: rotate(-90deg);
  transition: transform 0.22s ease, opacity 0.18s ease;
}

.page-home .fits__tab.is-on .fits__chev {
  opacity: 1;
  transform: rotate(0deg);
}

.page-home .fits__body {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  overflow: hidden;
  transition: grid-template-rows 0.28s ease, opacity 0.18s ease;
}

.page-home .fits__tab:not(.is-on) .fits__body {
  visibility: hidden;
  max-height: 0;
}

.page-home .fits__body-in {
  overflow: hidden;
  min-height: 0;
}

.page-home .fits__tab.is-on .fits__body {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
}

.page-home .fits__via {
  display: block;
  margin: 0 0 8px;
  padding-top: 12px;
  border-top: 1.5px solid rgba(17, 17, 17, 0.16);
  font-family: "Outfit", sans-serif;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.58);
}

.page-home .fits__copy {
  display: block;
  max-width: 28ch;
  font-family: var(--display);
  font-size: clamp(1.05rem, 1.5vw, 1.22rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.28;
  color: #111;
}

.page-home .fits__shots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
  transition: opacity 0.18s ease;
}

.page-home .fits__shots.is-swap {
  opacity: 0;
}

.page-home .fits__phone {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 22px;
  background: #111114;
  aspect-ratio: 9 / 16;
  box-shadow: var(--shadow-lift);
}

.page-home .fits__phone:nth-child(2) {
  margin-top: 28px;
}

.page-home .fits__phone video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-home .fits__phone figcaption {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 14px 14px 16px;
  background:
    linear-gradient(180deg, rgba(8, 8, 10, 0.32) 0%, transparent 26%),
    linear-gradient(180deg, transparent 54%, rgba(8, 8, 10, 0.78) 100%);
  color: #fff;
  pointer-events: none;
}

.page-home .fits__views {
  align-self: flex-start;
  font-family: "Outfit", sans-serif;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.02em;
}

.page-home .fits__views::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-right: 6px;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent #fff;
  vertical-align: 0.05em;
}

.page-home .fits__line {
  margin: auto 0 10px;
  font-family: var(--display);
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
  text-wrap: balance;
}

.page-home .fits__who {
  display: flex;
  align-items: center;
  gap: 8px;
}

.page-home .fits__who img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
}

.page-home .fits__who b {
  font-family: "Outfit", sans-serif;
  font-size: 0.72rem;
  font-weight: 550;
}

.page-home .queue .well--gold {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(0, 0.78fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  padding: clamp(40px, 5vw, 60px) clamp(36px, 5vw, 64px);
}

.page-home .queue__copy {
  max-width: none;
  padding-right: clamp(8px, 2vw, 24px);
}

.page-home .queue__copy h2 {
  max-width: none;
  font-size: clamp(2rem, 3.5vw, 2.95rem);
  line-height: 1.06;
}

.page-home .queue__copy p:not(.kicker) {
  margin: 16px 0 28px;
  color: var(--ink-2);
}

.page-home .queue__copy .brand-mark {
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 600;
}

.page-home .queue__copy .brand-mark b {
  font-weight: 800;
}

.page-home .queue__copy h2 .brand-mark {
  letter-spacing: inherit;
}

.page-home .buzz {
  display: grid;
  justify-items: center;
  gap: 20px;
  min-height: 0;
  padding: 0;
}

.page-home .buzz__faces {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.page-home .buzz__faces img {
  width: 40px;
  height: 40px;
  margin-left: -10px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #111;
  background: #fff;
}

.page-home .buzz__faces img:first-child {
  margin-left: 0;
}

.page-home .buzz__faces span {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-left: -10px;
  border-radius: 50%;
  border: 2px solid #111;
  background: #fff;
  font-family: "Outfit", sans-serif;
  font-size: 0.64rem;
  font-weight: 700;
  color: #111;
}

.page-home .buzz__faces em {
  margin-left: 12px;
  padding: 6px 11px;
  border: 1.5px solid #111;
  border-radius: var(--r-pill);
  background: #e2d9f7;
  box-shadow: 2px 2px 0 #111;
  font-family: "Outfit", sans-serif;
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #111;
}

.page-home .buzz__board {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px 14px;
  width: 100%;
  max-width: 420px;
}

.page-home .buzz__col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-home .buzz__col:first-child {
  align-items: flex-end;
}

.page-home .buzz__col:last-child {
  align-items: flex-start;
}

.page-home .buzz__col li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1.5px solid #111;
  border-radius: var(--r-pill);
  font-family: "Outfit", sans-serif;
  font-size: 0.76rem;
  font-weight: 650;
  color: #111;
  box-shadow: 2px 2px 0 #111;
  white-space: nowrap;
}

.page-home .buzz__col li.is-love { background: #f6d5e0; }
.page-home .buzz__col li.is-fire { background: #f3dcc4; }
.page-home .buzz__col li.is-chat { background: #d7defc; }
.page-home .buzz__col li.is-save { background: #c5ead4; }

.page-home .buzz__hero {
  display: grid;
  justify-items: center;
  text-align: center;
  padding: 0 4px;
}

.page-home .buzz__heart {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  margin-bottom: 14px;
  border-radius: 50%;
  border: 1.5px solid #111;
  background: #f6d5e0;
  color: #111;
  box-shadow: 3px 3px 0 #111;
}

.page-home .buzz__heart svg {
  width: 30px;
  height: 30px;
  animation: buzz-pulse 2.6s ease-in-out infinite;
}

.page-home .buzz__hero b {
  font-family: var(--display);
  font-size: clamp(2.2rem, 3.4vw, 3rem);
  font-weight: 640;
  letter-spacing: -0.05em;
  line-height: 0.9;
  color: #111;
}

.page-home .buzz__hero em {
  margin-top: 8px;
  font-family: "Outfit", sans-serif;
  font-style: normal;
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.55);
}

@keyframes buzz-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

.page-home .word {
  padding-block: clamp(28px, 4vw, 48px);
}

.page-home .word__card {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 0;
  padding: 28px 32px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid var(--line);
  grid-template-columns: none;
}

.page-home .word__card img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}

.page-home .word__card p {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.3;
}

.page-home .word__card cite {
  display: block;
  margin-top: 6px;
  font-style: normal;
  font-size: 0.8rem;
  color: var(--muted);
}

.page-home .close {
  padding: clamp(88px, 11vw, 140px) 0;
}

.page-home .close h2 {
  color: #F5F5F4;
  font-size: clamp(2.1rem, 4.4vw, 3.2rem);
}

@media (max-width: 480px) {
  .page-home #run-title {
    text-wrap: balance;
  }
}

@media (max-width: 980px) {
  .run__rail,
  .page-home .run__rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-home .run__cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    max-width: 22rem;
    margin-inline: auto;
  }

  @keyframes run-flow-arrow-1-mobile {
    0%, 8%, 16%, 100% {
      transform: translate(-50%, 50%) rotate(90deg) scale(1);
    }

    12% {
      transform: translate(-50%, 50%) rotate(90deg) scale(1.34);
    }
  }

  @keyframes run-flow-arrow-2-mobile {
    0%, 24%, 32%, 100% {
      transform: translate(-50%, 50%) rotate(90deg) scale(1);
    }

    28% {
      transform: translate(-50%, 50%) rotate(90deg) scale(1.34);
    }
  }

  .page-home .runcard:not(:last-child)::after {
    top: auto;
    left: 50%;
    bottom: -14px;
    transform: translate(-50%, 50%) rotate(90deg);
  }

  .page-home .runcard:nth-child(1):not(:last-child)::after {
    animation: run-flow-arrow-1-mobile 2s ease-in-out infinite;
  }

  .page-home .runcard:nth-child(2):not(:last-child)::after {
    animation: run-flow-arrow-2-mobile 2s ease-in-out infinite;
  }

  .page-home .forge__inner,
  .page-home .viral__top,
  .page-home .queue .well--gold,
  .page-home .studio__stage,
  .page-home .explore__strip {
    grid-template-columns: minmax(0, 1fr);
  }

  :is(.page-home, .page-generator, .page-brand-dna) .taste__learn-col {
    display: none;
  }

  :is(.page-home, .page-generator, .page-brand-dna) .taste__learn,
  :is(.page-home, .page-generator, .page-brand-dna) .dna-train .taste__learn {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 0;
  }

  .page-home .studio {
    height: auto;
    padding: 0 0 clamp(56px, 8vw, 96px);
  }

  .page-home .studio__pin {
    position: static;
    height: auto;
    display: block;
  }

  .page-home .studio__pin .shell {
    display: block;
    padding-block: 0;
  }

  .page-home .studio__app {
    display: block;
    padding: 22px 20px 24px;
    overflow: hidden;
  }

  .page-home .studio__tabs {
    width: 100%;
    max-width: 100%;
    flex-wrap: wrap;
    border-radius: 20px;
    margin-bottom: 28px;
  }

  .page-home .studio__shot {
    width: 100%;
    max-width: none;
    justify-self: stretch;
  }

  .page-home .studio__browser {
    border-radius: 16px;
  }

  .page-home .studio__shot,
  .page-home .studio__browser {
    height: auto;
  }

  .page-home .studio__viewport {
    aspect-ratio: 1330 / 894;
    max-height: none;
  }

  .page-home .studio__frame {
    height: 100%;
  }

  .page-home .studio__copy {
    min-height: 0;
    padding: 0 0 8px;
  }

  .page-home .explore__strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  :is(.page-home, .page-brand-dna) .inspire__board {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas:
      "hero hero"
      "spot spot"
      "pack pitch";
    height: auto;
  }

  :is(.page-home, .page-brand-dna) .inspire__hero {
    width: 100%;
    height: auto;
  }

  :is(.page-home, .page-brand-dna) .inspire__phone {
    width: min(100%, 280px);
    height: auto;
    margin-inline: auto;
    aspect-ratio: 9 / 16;
  }

  :is(.page-home, .page-brand-dna) .inspire__lanes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-home .fits__stage {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .page-home .fits__phone:nth-child(2) {
    margin-top: 0;
  }

  .page-home .fits__shots {
    max-width: 560px;
    margin-inline: auto;
  }

  .page-home .rooms__top {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-home .rooms__head {
    max-width: none;
  }

  .page-home .broadcast {
    width: 100%;
    max-width: 580px;
    margin-inline: auto;
  }

  .page-home .viral__tags {
    height: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .page-home .viral__tags li {
    position: static;
    transform: none;
  }

  .page-home .viral__tag-float {
    animation: none;
    transform: none;
  }

  .page-home .viral__tag-label {
    transform: none;
  }

  .page-home .convey {
    height: 440px;
    width: min(100%, 340px);
    margin-inline: auto;
  }
}

@media (max-width: 620px) {
  .page-home h2,
  .page-home h2.display {
    font-size: clamp(2.45rem, 9.2vw, 3.05rem);
    letter-spacing: -0.045em;
    text-wrap: balance;
  }

  .page-home #run-title {
    text-wrap: balance;
  }

  .page-home #dna-train-title {
    font-size: clamp(2.15rem, 8vw, 2.65rem);
    text-wrap: unset;
  }

  .page-home #dna-train-title .dna-train__lead {
    white-space: nowrap;
  }

  .page-home #dna-train-title .dna-train__break {
    display: block;
  }

  .page-home #forge-title {
    text-wrap: unset;
  }

  .page-home #forge-title .forge__lead {
    white-space: nowrap;
  }

  .page-home #forge-title .forge__break {
    display: block;
  }

  .page-home #forge-title .forge__tag {
    display: none;
  }

  .page-home .studio {
    height: auto;
    padding: 32px 16px 48px;
    background: #fff;
  }

  .page-home .studio__pin {
    position: static;
    height: auto;
    display: block;
    background: transparent;
  }

  .page-home .studio__pin .shell {
    display: block;
    width: 100%;
    max-width: none;
    min-height: 0;
    max-height: none;
    padding: 0;
  }

  .page-home .studio__app {
    display: flex;
    flex-direction: column;
    flex: none;
    min-height: 0;
    width: 100%;
    padding: 28px 0 0;
    border-radius: 28px;
    overflow: hidden;
    background: var(--studio-wash, #c5ead4);
    transition: background-color 0.5s ease;
  }

  .page-home .studio__app::before,
  .page-home .studio__app::after {
    display: none;
  }

  .page-home .studio__tabs {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    pointer-events: none;
  }

  .page-home .studio__stage {
    display: flex;
    flex-direction: column;
    flex: none;
    min-height: 0;
    gap: 18px;
    touch-action: pan-y;
  }

  .page-home .studio__copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 0;
    padding: 4px 24px 8px;
    text-align: center;
  }

  .page-home .studio__pill {
    display: none;
  }

  .page-home .studio__swap {
    display: grid;
    grid-template-columns: 40px minmax(7.5rem, auto) 40px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: auto;
    margin: 0 auto 18px;
  }

  .page-home .studio__swap-name {
    margin: 0;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--studio-tint, #0f7a45);
    color: #fff;
    font-family: "Outfit", sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
  }

  .page-home .studio__swap-btn {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(17, 17, 20, 0.12);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.62);
    color: var(--ink);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
    cursor: pointer;
  }

  .page-home .studio__swap-btn::before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    margin: 0 auto;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
  }

  .page-home .studio__swap-btn[data-studio-next]::before {
    transform: rotate(-135deg);
  }

  .page-home .studio__swap-btn:focus-visible {
    outline: 2px solid var(--studio-tint, #0f7a45);
    outline-offset: 2px;
    border-radius: 50%;
  }

  .page-home .studio__panel {
    display: none;
    grid-area: auto;
    width: 100%;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .page-home .studio__panel.is-on {
    display: block;
  }

  .page-home .studio__panel h2.display,
  .page-home .studio__panel h3 {
    margin: 0 0 12px;
    font-family: var(--display);
    font-size: clamp(2.45rem, 9.2vw, 3.05rem);
    font-weight: 500;
    letter-spacing: -0.045em;
    line-height: 1.08;
    text-align: center;
    text-wrap: balance;
  }

  .page-home .studio__panel ul {
    width: fit-content;
    max-width: 22rem;
    margin-inline: auto;
    gap: 8px;
    text-align: left;
  }

  .page-home .studio__panel li {
    font-size: 0.86rem;
    line-height: 1.35;
  }

  .page-home .studio__shot,
  .page-home .studio__browser {
    height: auto;
    min-height: 0;
  }

  .page-home .studio__shot {
    display: flex;
    flex: none;
    flex-direction: column;
    align-self: stretch;
    box-sizing: border-box;
    width: calc(100% - 18px);
    max-width: none;
    margin: 8px 0 0 18px;
  }

  .page-home .studio__browser {
    display: flex;
    flex-direction: column;
    flex: none;
    width: 100%;
    min-height: 0;
    margin: 0;
    overflow: hidden;
    border-radius: 16px 0 0 0;
    background: #0e0e12;
    box-shadow: none;
  }

  .page-home .studio__chrome {
    flex: none;
  }

  .page-home .studio__viewport {
    position: relative;
    flex: none;
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 1330 / 894;
    max-height: none;
    overflow: hidden;
    background: #0e0e12;
  }

  .page-home .studio__track {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    flex: none;
    aspect-ratio: auto;
    max-height: none;
    overflow: hidden;
    background: #0e0e12;
  }

  .page-home .studio__frame {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left top;
  }

  :is(.page-home, .page-brand-dna) .inspire__board {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas:
      "hero"
      "spot"
      "pack"
      "pitch";
    height: auto;
  }

  :is(.page-home, .page-brand-dna) .inspire__hero {
    width: 100%;
    height: auto;
  }

  :is(.page-home, .page-brand-dna) .inspire__phone {
    width: min(100%, 240px);
    margin-inline: auto;
  }

  :is(.page-home, .page-brand-dna) .inspire__detect {
    flex-direction: column;
    align-items: flex-start;
  }

  :is(.page-home, .page-brand-dna) .inspire__pitch {
    padding: 16px;
  }

  :is(.page-home, .page-brand-dna) .inspire__pitch .btn {
    display: flex;
    width: 100%;
    max-width: none;
    justify-content: center;
    text-align: center;
    margin: 0;
    padding: 12px 16px;
    border-radius: 12px;
  }

  :is(.page-home, .page-brand-dna) .inspire__lanes {
    grid-template-columns: minmax(0, 1fr);
  }

  :is(.page-home, .page-brand-dna) .inspire__lanes div {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "icon title"
      "desc desc";
    align-items: center;
    column-gap: 12px;
    row-gap: 10px;
    min-height: 0;
    padding: 16px;
  }

  :is(.page-home, .page-brand-dna) .inspire__ico {
    grid-area: icon;
    width: 38px;
    height: 38px;
    margin-bottom: 0;
    border-radius: 10px;
  }

  :is(.page-home, .page-brand-dna) .inspire__ico svg {
    width: 18px;
    height: 18px;
  }

  :is(.page-home, .page-brand-dna) .inspire__lanes dt {
    grid-area: title;
    margin-top: 0;
    font-size: 1.48rem;
    line-height: 1.08;
  }

  :is(.page-home, .page-brand-dna) .inspire__lanes dd {
    grid-area: desc;
    grid-column: 1 / -1;
    margin: 0;
  }

  .page-home .explore__strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  :is(.page-home, .page-generator, .page-brand-dna) .dna-train__points {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 0;
    text-align: left;
  }

  :is(.page-home, .page-generator, .page-brand-dna) .dna-train__points div {
    align-items: flex-start;
    padding: 0 16px;
  }

  :is(.page-home, .page-generator, .page-brand-dna) .dna-train__points dt,
  :is(.page-home, .page-generator, .page-brand-dna) .dna-train__points dd {
    width: 100%;
    text-align: left;
  }

  :is(.page-home, .page-generator, .page-brand-dna) .dna-train__points div:nth-child(odd) {
    padding-left: 0;
  }

  :is(.page-home, .page-generator, .page-brand-dna) .dna-train__points div + div {
    border-left: 0;
  }

  :is(.page-home, .page-generator, .page-brand-dna) .dna-train__points div:nth-child(even) {
    align-items: flex-end;
    border-left: 1px solid var(--line);
    text-align: right;
  }

  :is(.page-home, .page-generator, .page-brand-dna) .dna-train__points div:nth-child(even) dt,
  :is(.page-home, .page-generator, .page-brand-dna) .dna-train__points div:nth-child(even) dd {
    text-align: right;
  }

  :is(.page-home, .page-generator, .page-brand-dna) .dna-train__points div:nth-child(n + 3) {
    padding-top: 18px;
    border-top: 1px solid var(--line);
  }

  .page-home .queue .well--gold {
    padding: 28px 20px 24px;
    overflow: hidden;
    justify-items: center;
    text-align: center;
  }

  .page-home .queue__copy {
    width: 100%;
    padding-right: 0;
    text-align: center;
  }

  .page-home .queue__copy .kicker {
    justify-content: center;
  }

  .page-home .queue__copy h2 {
    text-wrap: balance;
  }

  .page-home .queue__copy p:not(.kicker) {
    max-width: 22rem;
    margin-inline: auto;
  }

  .page-home .buzz {
    width: 100%;
    max-width: min(100%, 320px);
    margin-inline: auto;
    overflow: hidden;
  }

  .page-home .buzz__faces {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    max-width: 100%;
  }

  .page-home .buzz__faces em {
    margin-left: 0;
  }

  .page-home .buzz__board {
    width: 100%;
    max-width: 100%;
    gap: 8px 4px;
    padding-inline: 2px;
    box-sizing: border-box;
  }

  .page-home .buzz__col {
    gap: 8px;
    min-width: 0;
  }

  .page-home .buzz__col:first-child,
  .page-home .buzz__col:last-child {
    align-items: center;
  }

  .page-home .buzz__col li {
    max-width: 100%;
    padding: 5px 8px;
    font-size: 0.66rem;
    box-shadow: 1.5px 1.5px 0 #111;
  }

  .page-home .buzz__hero {
    padding: 0;
  }

  .page-home .buzz__heart {
    width: 58px;
    height: 58px;
    margin-bottom: 10px;
    box-shadow: 2px 2px 0 #111;
  }

  .page-home .buzz__heart svg {
    width: 26px;
    height: 26px;
  }

  .page-home .buzz__hero b {
    font-size: 2rem;
  }

  .page-home .rooms .well--gold {
    padding: 24px 18px 20px;
  }

  .page-home .rooms__top {
    justify-items: center;
    gap: 16px;
  }

  .page-home .rooms__head {
    align-items: center;
    max-width: 22.5rem;
    margin-inline: auto;
    text-align: center;
  }

  .page-home #rooms-title {
    font-size: clamp(2.2rem, 8.2vw, 2.7rem);
  }

  .page-home #rooms-title .rooms__lead {
    white-space: nowrap;
  }

  .page-home #rooms-title .rooms__break {
    display: block;
  }

  .page-home .rooms__head p:not(.kicker):not(.rooms__feeds) {
    max-width: none;
  }

  .page-home .rooms__cta {
    justify-content: center;
  }

  .page-home .broadcast {
    width: 100%;
    max-width: none;
  }

  .page-home .broadcast__canvas {
    min-height: 330px;
  }

  .page-home .broadcast__phone,
  .page-home .broadcast__rings {
    left: 28%;
  }

  .page-home .broadcast__phone {
    width: 156px;
    height: 318px;
    aspect-ratio: auto;
    border-width: 7px;
    border-radius: 28px;
  }

  .page-home .broadcast__rings {
    width: 250px;
    height: 250px;
  }

  .page-home .broadcast__nodes {
    left: 28%;
    right: auto;
    width: min(168px, 46vw);
    transform: translate(22px, -50%);
    gap: 10px;
  }

  .page-home .broadcast__node {
    grid-template-columns: 26px minmax(0, 1fr) auto;
    gap: 7px;
    padding: 7px 8px;
  }

  .page-home .broadcast__node--ig,
  .page-home .broadcast__node--yt,
  .page-home .broadcast__node--fb,
  .page-home .broadcast__node--sc {
    margin-right: 0;
  }

  .page-home .broadcast__node i {
    display: none;
  }

  .page-home .broadcast__node em {
    padding-inline: 5px;
    font-size: 0.48rem;
  }

  .page-home .rooms__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 0;
  }

  .page-home .rooms__stats div {
    padding: 0 12px;
  }

  .page-home .rooms__stats div:nth-child(odd) {
    padding-left: 0;
  }

  .page-home .rooms__stats div:nth-child(even) {
    border-left: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  }

  .page-home .rooms__stats div:nth-child(n + 3) {
    padding-top: 16px;
    border-top: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  }

  .close,
  .page-home .close {
    padding: 52px 0;
  }

  .page-home .close .shell {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .page-home .close .kicker.kicker--pill {
    margin-inline: auto;
  }

  .page-home .close h2 {
    width: 100%;
    max-width: 16rem;
    margin-inline: auto;
    text-wrap: balance;
  }

  .page-home .close p {
    width: 100%;
    max-width: 18rem;
    margin: 14px auto 22px;
  }

  .page-home .close .cta-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 280px;
    margin-inline: auto;
    gap: 10px;
  }

  .page-home .close .cta-row .btn {
    width: 100%;
    padding: 12px 16px;
    font-size: 0.9rem;
    white-space: normal;
    text-align: center;
  }
}

/* ==========================================================================
   Pricing
   Plan cards + featured comparison column + FAQ pills.
   ========================================================================== */

.page-pricing {
  --rates-hot: #f0c75a;
  --rates-hot-ink: #141414;
}

.page-pricing .pagehead {
  padding-top: clamp(16px, 2.4vw, 28px);
  padding-bottom: 22px;
}

.page-pricing .rates-head .shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 44rem;
}

.page-pricing .pagehead h1 {
  max-width: 22em;
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.12;
  font-size: clamp(1.9rem, 3.4vw, 2.85rem);
  margin: 0 0 8px;
  text-wrap: balance;
}

.page-pricing .pagehead .lede {
  max-width: 38rem;
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.45;
}

.page-pricing .rates-stack {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.page-pricing .rates-stack li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 8px 10px;
  border-radius: 16px;
  background: var(--card);
  border: 1px solid rgba(17, 17, 17, 0.07);
  font-family: "Outfit", sans-serif;
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.page-pricing .rates-stack svg {
  width: 18px;
  height: 18px;
  color: var(--ink);
}

.page-pricing .rates-offer {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 16px 20px;
  margin-top: 16px;
  padding: 8px 18px 8px 8px;
  border-radius: 999px;
  background: var(--ink-deep);
  color: #f5f5f4;
  font-family: "Outfit", sans-serif;
  font-size: 0.86rem;
  font-weight: 500;
  white-space: nowrap;
}

.page-pricing .rates-offer__cut {
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--rates-hot);
  color: var(--rates-hot-ink);
  font-weight: 700;
}

.page-pricing .rates-offer__copy {
  color: #f5f5f4;
  font-weight: 500;
}

.page-pricing .rates-clock {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-left: 4px;
}

.page-pricing .rates-tick {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  min-width: 2.6em;
  font-variant-numeric: tabular-nums;
}

.page-pricing .rates-tick b {
  display: inline-block;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  color: #f5f5f4;
}

.page-pricing .rates-tick i {
  font-style: normal;
  font-size: 0.68em;
  font-weight: 600;
  opacity: 0.55;
  color: #f5f5f4;
}

.page-pricing .rates-tick.is-drop b {
  animation: rates-drop 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes rates-drop {
  0% {
    transform: translateY(-0.5em);
    opacity: 0.2;
    color: #ff2d20;
  }
  35% {
    color: #ff3b30;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
    color: #f5f5f4;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-pricing .rates-tick.is-drop b {
    animation: none;
    color: #f5f5f4;
  }
}

.page-pricing.is-offer-over .rates-offer,
.page-pricing.is-offer-over .plan-card__cut,
.page-pricing.is-offer-over .plan-card__save--deal {
  display: none;
}

.page-pricing .rates-plans {
  padding-bottom: 8px;
}

.page-pricing .rates-plans__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

.page-pricing .plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 26px 24px 22px;
  border-radius: 24px;
  background: var(--card);
  border: 1px solid rgba(17, 17, 17, 0.08);
  box-shadow: var(--shadow-soft);
}

.page-pricing .plan-card--hot {
  background: color-mix(in srgb, var(--rates-hot) 28%, #fff);
  border-color: color-mix(in srgb, var(--rates-hot) 70%, #111);
  box-shadow: 0 16px 40px rgba(201, 162, 39, 0.16);
}

.page-pricing .plan-card__badge {
  position: absolute;
  top: -11px;
  left: 22px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--rates-hot);
  color: var(--rates-hot-ink);
  font-family: "Outfit", sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.page-pricing .plan-card__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--ink-deep);
  color: var(--rates-hot);
}

.page-pricing .plan-card__icon svg {
  width: 20px;
  height: 20px;
}

.page-pricing .plan-card h2 {
  margin: 18px 0 0;
  font-family: var(--display);
  font-size: 1.55rem;
  font-weight: 560;
  letter-spacing: -0.03em;
}

.page-pricing .plan-card__for {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.page-pricing .plan-card__price {
  display: grid;
  justify-items: start;
  gap: 2px;
  margin: 16px 0 0;
}

.page-pricing .plan-card__was {
  min-height: 1.2em;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--muted);
}

.page-pricing .plan-card__cut {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}

.page-pricing .plan-card__now {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.page-pricing .plan-card__now b {
  font-family: var(--display);
  font-size: 2.55rem;
  font-weight: 560;
  letter-spacing: -0.04em;
  line-height: 1;
}

.page-pricing .plan-card__now span {
  color: var(--muted);
  font-size: 0.92rem;
}

.page-pricing .plan-card__save {
  min-height: 1.2em;
  margin: 6px 0 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-2);
}

.page-pricing .plan-card__fine {
  margin-top: 8px;
  text-align: center;
  font-size: 0.75rem;
  color: var(--muted);
}

.page-pricing .plan-card ul {
  list-style: none;
  margin: 20px 0 22px;
  padding: 0;
  display: grid;
  gap: 9px;
  flex: 1;
}

.page-pricing .plan-card li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--ink-2);
}

.page-pricing .plan-card li svg {
  width: 15px;
  height: 15px;
  margin-top: 2px;
  flex-shrink: 0;
  color: #1f7a4a;
}

.page-pricing .plan-card .btn {
  width: 100%;
  border-radius: 12px;
}

.page-pricing .plan-card--hot .btn--primary {
  background: var(--ink-deep);
}

.page-pricing .plan-card--hot .btn--primary:hover {
  background: #111;
  color: var(--rates-hot);
}

.page-pricing .rates-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 18px;
  padding: 13px 18px;
  border-radius: 14px;
  border: 1px solid rgba(17, 17, 17, 0.1);
  background: color-mix(in srgb, var(--card) 70%, var(--mist));
  color: var(--ink);
  font-family: "Outfit", sans-serif;
  font-size: 0.92rem;
  font-weight: 560;
  cursor: pointer;
}

.page-pricing .rates-toggle:hover {
  background: var(--card);
}

.page-pricing .rates-toggle svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s var(--ease);
}

.page-pricing .rates-toggle.is-open svg {
  transform: rotate(180deg);
}

.page-pricing .rates-break {
  padding: 20px 0 36px;
}

.page-pricing .rates-scroll {
  overflow: visible;
}

.page-pricing .rates-board {
  display: grid;
  grid-template-columns: minmax(188px, 1.35fr) repeat(3, minmax(148px, 1fr));
  grid-template-rows: auto repeat(25, auto) auto;
  width: 100%;
  background: var(--card);
  border-radius: 28px;
}

.page-pricing .rates-board__col {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: 1 / -1;
  position: relative;
  z-index: 0;
}

.page-pricing .rates-board__col.is-labels {
  background: var(--ink-deep);
  color: #f5f5f4;
  border-radius: 28px 0 0 28px;
  padding: 8px 0;
}

.page-pricing .rates-board__col.is-hot {
  z-index: 1;
  background: var(--rates-hot);
  color: var(--rates-hot-ink);
  border-radius: 28px;
  padding-block: 8px;
  box-shadow: 0 18px 42px rgba(17, 17, 20, 0.12);
}

.page-pricing .rates-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(17, 17, 17, 0.06);
  font-size: 0.86rem;
  text-align: center;
}

.page-pricing .rates-board__col.is-labels .rates-cell {
  justify-content: flex-start;
  text-align: left;
  border-bottom-color: rgba(245, 245, 244, 0.08);
  font-size: 0.82rem;
  line-height: 1.3;
  padding-inline: 22px;
}

.page-pricing .rates-cell.is-head {
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  min-height: 118px;
  padding-top: 18px;
  padding-bottom: 16px;
  border-bottom: 0;
}

.page-pricing .rates-board__col.is-labels .rates-cell.is-head {
  align-items: flex-start;
  justify-content: flex-end;
  font-family: "Outfit", sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245, 245, 244, 0.5);
}

.page-pricing .rates-plan {
  font-family: var(--display);
  font-size: 1.55rem;
  font-weight: 560;
  letter-spacing: -0.03em;
  line-height: 1;
}

.page-pricing .rates-note {
  font-size: 0.75rem;
  color: var(--muted);
}

.page-pricing .rates-board__col.is-hot .rates-note {
  color: rgba(20, 20, 20, 0.62);
}

.page-pricing .rates-note s {
  color: inherit;
  opacity: 0.55;
}

.page-pricing .rates-cell.is-head strong {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin-top: 8px;
  font-family: var(--display);
  font-size: 1.85rem;
  font-weight: 560;
  letter-spacing: -0.04em;
}

.page-pricing .rates-cell.is-head strong span {
  font-family: "Inter Tight", sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--muted);
}

.page-pricing .rates-board__col.is-hot .rates-cell.is-head strong span {
  color: rgba(20, 20, 20, 0.58);
}

.page-pricing .rates-cell.is-cta {
  border-bottom: 0;
  padding-top: 16px;
  padding-bottom: 8px;
}

.page-pricing .rates-cell.is-cta .btn {
  width: 100%;
  border-radius: 12px;
  padding: 11px 14px;
}

.page-pricing .rates-board__col.is-hot .btn--primary {
  background: var(--ink-deep);
  color: #fff;
}

.page-pricing .rates-board__col.is-hot .btn--primary:hover {
  background: #111;
  color: var(--rates-hot);
}

.page-pricing .rates-board__col.is-hot .rates-cell {
  border-bottom-color: rgba(20, 20, 20, 0.08);
}

.page-pricing .rates-y,
.page-pricing .rates-x {
  display: grid;
  place-items: center;
}

.page-pricing .rates-y svg {
  width: 16px;
  height: 16px;
  color: #1f7a4a;
}

.page-pricing .rates-x svg {
  width: 16px;
  height: 16px;
  color: rgba(17, 17, 17, 0.28);
}

.page-pricing .rates-board__col.is-labels .rates-y svg,
.page-pricing .rates-board__col.is-hot .rates-y svg {
  color: #146b40;
}

.page-pricing .rates-board__col.is-hot .rates-x svg {
  color: rgba(20, 20, 20, 0.28);
}

.page-pricing .ask {
  padding: 48px 0 88px;
}

.page-pricing .ask__shell {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}

.page-pricing .ask__head h2 {
  font-size: clamp(2rem, 4vw, 3.1rem);
  margin: 0;
}

.page-pricing .ask__head em {
  font-style: italic;
  font-weight: 520;
  position: relative;
  z-index: 0;
}

.page-pricing .ask__head em::after {
  content: "";
  position: absolute;
  left: -4%;
  right: -4%;
  bottom: 0.08em;
  height: 0.22em;
  background: var(--rates-hot);
  border-radius: 2px;
  z-index: -1;
}

.page-pricing .ask__list {
  display: grid;
  gap: 12px;
}

.page-pricing .ask__item {
  background: var(--card);
  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(17, 17, 20, 0.05);
}

.page-pricing .ask__item[open] {
  background: var(--rates-hot);
  border-radius: 28px;
}

.page-pricing .ask__item summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
  font-family: "Outfit", sans-serif;
  font-size: 0.98rem;
  font-weight: 560;
}

.page-pricing .ask__item summary::-webkit-details-marker {
  display: none;
}

.page-pricing .ask__mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ink-deep);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
}

.page-pricing .ask__item[open] .ask__mark {
  background: rgba(20, 20, 20, 0.16);
  color: var(--rates-hot-ink);
}

.page-pricing .ask__plus {
  width: 18px;
  height: 18px;
  position: relative;
}

.page-pricing .ask__plus::before,
.page-pricing .ask__plus::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  background: var(--ink);
}

.page-pricing .ask__plus::before {
  width: 14px;
  height: 1.5px;
  transform: translate(-50%, -50%);
}

.page-pricing .ask__plus::after {
  width: 1.5px;
  height: 14px;
  transform: translate(-50%, -50%);
}

.page-pricing .ask__item[open] .ask__plus::after {
  display: none;
}

.page-pricing .ask__item p {
  margin: 0;
  padding: 0 52px 20px 58px;
  color: rgba(20, 20, 20, 0.72);
  font-size: 0.92rem;
}

@media (max-width: 980px) {
  .page-pricing .rates-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
  }

  .page-pricing .rates-board {
    min-width: 680px;
  }

  .page-pricing .rates-plans__grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-inline: auto;
  }

  .page-pricing .ask__shell {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}

@media (max-width: 620px) {
  .page-pricing .rates-offer {
    font-size: 0.74rem;
    gap: 8px;
    padding-right: 10px;
  }

  .page-pricing .rates-tick {
    min-width: 2em;
  }

  .page-pricing .rates-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-pricing .pagehead {
    padding-top: 12px;
    padding-bottom: 18px;
  }

  .page-pricing .pagehead h1 {
    font-size: 1.85rem;
  }

  .page-pricing .plan-card {
    padding: 22px 18px 18px;
  }

  .page-pricing .ask__item,
  .page-pricing .ask__item[open] {
    border-radius: 22px;
  }

  .page-pricing .ask__item p {
    padding: 0 18px 18px 56px;
  }
}

/* ==========================================================================
   Legal — Terms & Privacy
   Comfortable width, open spacing, definition lists, tables.
   ========================================================================== */

.page-legal .pagehead {
  padding-top: clamp(36px, 5vw, 64px);
  padding-bottom: clamp(28px, 4vw, 44px);
}

.page-legal .shell--legal {
  max-width: min(var(--shell-wide), 100%);
}

.page-legal .pagehead h1 {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.12;
  font-size: clamp(2rem, 3.8vw, 2.85rem);
  margin-bottom: 10px;
}

.page-legal .legal-updated {
  margin: 0;
  font-family: "Outfit", sans-serif;
  font-size: 0.92rem;
  color: var(--muted);
}

.legal-doc {
  padding-bottom: clamp(72px, 10vw, 120px);
}

.legal-prose {
  font-size: 1rem;
  line-height: 1.72;
  color: var(--ink-2);
}

.legal-prose > * + * {
  margin-top: 1.15em;
}

.legal-prose .legal-intro {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--ink);
}

.legal-prose h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.38rem;
  letter-spacing: -0.02em;
  line-height: 1.28;
  color: var(--ink);
  margin-top: 2.8em;
  margin-bottom: 0.65em;
  padding-top: 2em;
  border-top: 1px solid var(--rule);
}

.legal-prose h2:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.legal-prose h3 {
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-size: 1.04rem;
  letter-spacing: -0.01em;
  line-height: 1.4;
  color: var(--ink);
  margin-top: 1.75em;
  margin-bottom: 0.45em;
}

.legal-prose p strong,
.legal-prose li strong {
  color: var(--ink);
  font-weight: 600;
}

.legal-prose a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent);
  text-underline-offset: 0.18em;
  transition: text-decoration-color 0.2s var(--ease);
}

.legal-prose a:hover {
  text-decoration-color: var(--accent);
}

.legal-prose ul {
  margin: 0.75em 0 0;
  padding-left: 1.35em;
}

.legal-prose ul li + li {
  margin-top: 0.55em;
}

.legal-prose ul.legal-contact {
  list-style: none;
  padding-left: 0;
}

.legal-prose ul.legal-contact li + li {
  margin-top: 0.45em;
}

.legal-defs {
  margin: 1em 0 0;
  display: grid;
  gap: 1.35em;
}

.legal-defs > div {
  padding: 0 0 0 1.1em;
  border-left: 2px solid color-mix(in srgb, var(--accent) 35%, var(--rule));
  background: transparent;
  border-radius: 0;
}

.legal-defs dt {
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--ink);
  margin-bottom: 0.4em;
}

.legal-defs dd {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.68;
}

.legal-defs--compact > div {
  padding-left: 1.1em;
}

.legal-placeholder {
  color: var(--muted);
  font-style: italic;
}

.legal-table-wrap {
  margin: 0.85em 0 0;
  overflow-x: auto;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--card);
}

.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.96rem;
  line-height: 1.6;
}

.legal-table th,
.legal-table td {
  padding: 14px 18px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}

.legal-table tr:last-child th,
.legal-table tr:last-child td {
  border-bottom: 0;
}

.legal-table th {
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  background: color-mix(in srgb, var(--paper) 80%, var(--mist));
}

.legal-table td:first-child {
  width: 30%;
  color: var(--ink);
  font-weight: 500;
}

.legal-prose code {
  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", monospace;
  font-size: 0.88em;
  padding: 0.12em 0.38em;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--paper) 65%, var(--band));
  color: var(--ink);
}

@media (max-width: 640px) {
  .legal-table td:first-child {
    width: auto;
  }

  .legal-table th,
  .legal-table td {
    padding: 12px 14px;
  }
}

/* ==========================================================================
   Blog — listing + article (wired to /blog-system)
   ========================================================================== */

.sec-label {
  margin: 0 0 8px;
  font-family: "Outfit", sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.field__input {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-ctl);
  background: var(--card);
  color: var(--ink);
  font: inherit;
}

.page-blog .pagehead,
.page-entry .entry-head {
  padding-top: clamp(28px, 4vw, 48px);
  padding-bottom: clamp(36px, 5vw, 64px);
}

.entry-crumbs {
  padding-top: calc(var(--nav-offset) + 8px);
}

.entry-crumbs--inhead {
  padding-top: 0;
  margin-bottom: 28px;
}

.entry-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: "Outfit", sans-serif;
  font-size: 0.86rem;
  color: var(--muted);
}

.entry-crumbs a:hover {
  color: var(--ink);
}

.entry-crumbs [aria-current="page"] {
  color: var(--ink-2);
}

.journal-lead {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: end;
}

.journal-lead:only-child,
.journal-lead:has(> :only-child) {
  grid-template-columns: 1fr;
}

.journal-lead h1,
.entry-head__title {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.12;
  font-size: clamp(2rem, 4vw, 3.15rem);
  margin: 0 0 16px;
}

.journal-lead h1 em,
.entry-head__title em {
  font-style: italic;
  color: color-mix(in srgb, var(--ink) 82%, var(--accent));
}

.phero__lede,
.entry-head__standfirst {
  max-width: 42rem;
  font-size: 1.08rem;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 22px;
}

.phero__cta,
.entry-close__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

.journal__hero-by {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  font-size: 0.92rem;
  color: var(--muted);
}

.journal__hero-by img,
.entry-head__by img,
.entry-bio img,
.journal__who img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--band);
}

.phero__shot,
.journal__hero-shot {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--band);
  aspect-ratio: 16 / 10;
}

.phero__shot img,
.journal__shot img,
.entry-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.journal-index {
  padding-bottom: clamp(64px, 8vw, 110px);
}

.aisle__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

.aisle__search {
  flex: 1 1 220px;
  max-width: 360px;
}

.aisle__count {
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted);
}

.aisle__cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 28px;
}

.aisle__cat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  font-family: "Outfit", sans-serif;
  font-size: 0.84rem;
  color: var(--ink-2);
}

.aisle__cat.is-active,
.aisle__cat:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.aisle__cat span {
  color: var(--muted);
  font-size: 0.78rem;
}

.aisle__empty {
  margin: 24px 0 0;
  color: var(--muted);
}

.aisle__pages {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 36px;
}

.aisle__page,
.aisle__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--r-ctl);
  border: 1px solid var(--line);
  color: var(--ink-2);
}

.aisle__page.is-active,
.aisle__page:hover,
.aisle__nav:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.journal__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.journal__card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--card);
  border: 1px solid var(--line);
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.journal__card:hover {
  border-color: var(--line-2);
  transform: translateY(-2px);
}

.journal__shot {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--band);
}

.journal__chip,
.journal__mins {
  position: absolute;
  top: 12px;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  font-family: "Outfit", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.journal__chip {
  left: 12px;
}

.journal__mins {
  right: 12px;
  color: var(--muted);
}

.journal__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 18px 20px;
}

.journal__body h3 {
  margin: 0;
  font-family: "Outfit", sans-serif;
  font-size: 1.08rem;
  letter-spacing: -0.02em;
  line-height: 1.28;
}

.journal__body p {
  color: var(--ink-2);
  font-size: 0.94rem;
}

.journal__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 8px;
  font-size: 0.86rem;
  color: var(--muted);
}

.journal__who {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.journal__who img {
  width: 24px;
  height: 24px;
}

.journal__go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
}

.entry__progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 80;
  height: 2px;
  background: transparent;
  pointer-events: none;
}

.entry__progress i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
}

.page-entry .entry-head {
  padding-top: 12px;
}

.entry-head__kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 0 0 18px;
  font-family: "Outfit", sans-serif;
  font-size: 0.86rem;
  color: var(--muted);
}

.entry-head__cat {
  color: var(--ink);
  font-weight: 600;
}

.entry-head__by {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
}

.entry-head__by-name {
  font-weight: 600;
}

.entry-head__by-role,
.entry-bio__role {
  color: var(--muted);
}

.entry-shot {
  margin-bottom: clamp(36px, 5vw, 56px);
}

.entry-shot figure {
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--band);
  aspect-ratio: 1200 / 630;
}

.entry-body {
  padding-bottom: clamp(48px, 6vw, 80px);
}

.entry-layout,
.entry__layout {
  width: min(var(--shell), calc(100% - 2 * var(--gutter)));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: clamp(32px, 4vw, 56px);
  align-items: start;
}

.entry-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule);
  font-size: 0.9rem;
  color: var(--ink-2);
}

.entry-share,
.entry__share {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-left: auto;
}

.entry-share a,
.entry-share button,
.entry__share a,
.entry__share button {
  color: var(--muted);
  font-family: "Outfit", sans-serif;
  font-size: 0.84rem;
}

.entry-share a:hover,
.entry-share button:hover {
  color: var(--ink);
}

.entry-prose {
  font-size: 1.04rem;
  line-height: 1.72;
  color: var(--ink-2);
}

.entry-prose > * + * {
  margin-top: 1.15em;
}

.entry-prose h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.42rem;
  letter-spacing: -0.02em;
  line-height: 1.28;
  color: var(--ink);
  margin-top: 2.4em;
}

.entry-prose h3,
.entry-prose h4 {
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  color: var(--ink);
  margin-top: 1.7em;
}

.entry-prose a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent);
  text-underline-offset: 0.18em;
}

.entry-prose a:hover {
  text-decoration-color: var(--accent);
}

.entry-prose ul,
.entry-prose ol {
  padding-left: 1.3em;
}

.entry-prose li + li {
  margin-top: 0.45em;
}

.entry-prose blockquote {
  margin: 1.6em 0;
  padding: 4px 0 4px 18px;
  border-left: 2px solid var(--accent);
  color: var(--ink);
}

.entry-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94rem;
}

.entry-prose th,
.entry-prose td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--rule);
  text-align: left;
}

.entry-prose img {
  border-radius: var(--r-md);
}

.entry-prose figcaption {
  margin-top: 8px;
  font-size: 0.86rem;
  color: var(--muted);
}

.entry-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 36px;
}

.entry-tag,
.entry__tag {
  padding: 6px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  font-family: "Outfit", sans-serif;
  font-size: 0.8rem;
}

.entry-bio,
.entry__bio {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 16px;
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
}

.entry-bio__name,
.entry__bio-name {
  margin: 0 0 2px;
  font-family: "Outfit", sans-serif;
  font-weight: 600;
}

.entry__rail {
  position: sticky;
  top: calc(var(--nav-offset) + 16px);
}

.entry__offer {
  padding: 22px;
  border-radius: var(--r-lg);
  background: var(--ink);
  color: var(--on-ink);
}

.entry__offer .sec-label,
.entry__offer-note {
  color: var(--on-ink-2);
}

.entry__offer-claim {
  margin: 8px 0 10px;
  font-family: "Outfit", sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.entry__offer-cta {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}

.entry__offer .btn--primary {
  background: var(--accent);
  color: #111;
}

.entry__offer .btn--ghost {
  border-color: var(--line-ink-2);
  color: var(--on-ink);
}

.entry__alike {
  margin-top: 22px;
  display: grid;
  gap: 12px;
}

.entry__alike-row {
  display: grid;
  gap: 4px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}

.entry__alike-title {
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.entry__alike-meta {
  font-size: 0.82rem;
  color: var(--muted);
}

.entry-related {
  padding: clamp(28px, 4vw, 48px) 0 clamp(64px, 8vw, 100px);
  background: color-mix(in srgb, var(--paper) 70%, var(--band));
}

.entry-related__title {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  margin: 0 0 28px;
}

.entry-close {
  padding: clamp(56px, 7vw, 96px) 0;
  background: var(--ink);
  color: var(--on-ink);
}

.entry-close .sec-label,
.entry-close p {
  color: var(--on-ink-2);
}

.entry-close h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  letter-spacing: -0.03em;
  margin: 8px 0 14px;
  color: var(--on-ink);
}

.entry-close .btn--primary {
  background: var(--accent);
  color: #111;
}

.entry-close .btn--ghost {
  border-color: var(--line-ink-2);
  color: var(--on-ink);
}

@media (max-width: 980px) {
  .journal-lead,
  .entry-layout,
  .entry__layout {
    grid-template-columns: 1fr;
  }

  .journal__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .entry__rail {
    position: static;
  }
}

@media (max-width: 640px) {
  .journal__grid,
  .journal__grid--related {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Editor product page
   ========================================================================== */

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) {
  background: var(--paper);
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-hero {
  padding-top: clamp(28px, 4vw, 48px);
  padding-bottom: clamp(44px, 6vw, 72px);
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-hero__copy {
  max-width: 36rem;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-hero h1 {
  font-size: clamp(2rem, 3.8vw, 3rem);
  line-height: 1.06;
  margin: 0 0 16px;
  letter-spacing: -0.035em;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-hero__lede {
  margin: 0 0 clamp(24px, 3vw, 32px);
  max-width: 30rem;
  font-size: clamp(0.98rem, 1.2vw, 1.06rem);
  line-height: 1.52;
  color: var(--ink-2);
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-hero__cta {
  margin: 0 0 clamp(20px, 2.5vw, 28px);
  flex-wrap: wrap;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-cta {
  max-width: 34rem;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-cta__form {
  margin: 0;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-cta__bar {
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 7px;
  border-radius: 999px;
  background: #111114;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 24px 48px -28px rgba(17, 17, 20, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-cta__field {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  gap: 10px;
  padding: 0 6px 0 12px;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-cta__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  color: rgba(245, 245, 244, 0.55);
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-cta__icon svg {
  display: block;
  width: 18px;
  height: 18px;
  stroke-width: 1.75;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-cta__input-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-cta__input {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 12px 8px 12px 0;
  border: 0;
  background: transparent;
  color: #f5f5f4;
  font-family: "Outfit", sans-serif;
  font-size: 0.94rem;
  line-height: 1.2;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-cta__input:focus {
  outline: none;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-cta__input::placeholder {
  color: transparent;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-cta__ghost {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  padding-right: 8px;
  color: rgba(245, 245, 244, 0.42);
  font-family: "Outfit", sans-serif;
  font-size: 0.94rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-cta__ghost.is-hidden {
  opacity: 0;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-cta__submit {
  flex-shrink: 0;
  margin: 0;
  padding: 0 clamp(18px, 2.2vw, 24px);
  min-height: 46px;
  border: 0;
  background: var(--accent-bright);
  color: #111;
  font-family: "Outfit", sans-serif;
  font-size: 0.88rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.2s ease,
    box-shadow 0.24s ease;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-cta__submit:hover {
  background: var(--accent-glow);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -14px rgba(232, 185, 49, 0.85);
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-cta__submit:active {
  transform: translateY(0);
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-cta__error {
  margin: 8px 0 0 16px;
  font-family: "Outfit", sans-serif;
  font-size: 0.78rem;
  font-weight: 560;
  color: #be717b;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-cta.is-error .editor-cta__bar {
  box-shadow:
    0 0 0 1px rgba(190, 113, 123, 0.55),
    0 24px 48px -28px rgba(17, 17, 20, 0.75);
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-cta__panel {
  margin-top: 12px;
  padding: 12px 16px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--accent-wash) 72%, #fff);
  border: 1px solid color-mix(in srgb, var(--accent-soft) 55%, var(--line));
  animation: editor-cta-panel-in 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-cta__panel p {
  margin: 0;
  font-family: "Outfit", sans-serif;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--ink-2);
}

@keyframes editor-cta-panel-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-hero__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: clamp(18px, 2.4vw, 24px) 0 0;
  padding: 0;
  list-style: none;
  font-family: "Outfit", sans-serif;
  font-size: 0.72rem;
  font-weight: 560;
  letter-spacing: 0.04em;
  color: var(--muted);
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-hero__pills li + li {
  position: relative;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-hero__pills li + li::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  transform: translateY(-50%);
  opacity: 0.45;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-shot {
  margin: 0;
  max-width: min(100%, 640px);
  justify-self: end;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-shot__browser {
  overflow: hidden;
  border-radius: 18px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-deep);
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-shot__chrome {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--mist);
  border-bottom: 1px solid var(--line);
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-shot__dots {
  display: flex;
  gap: 6px;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-shot__dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-shot__dots i:nth-child(1) { background: #f2635b; }
:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-shot__dots i:nth-child(2) { background: #e0ae3c; }
:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-shot__dots i:nth-child(3) { background: #43b95c; }

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-shot__url {
  justify-self: center;
  width: min(100%, 220px);
  padding: 4px 12px;
  border-radius: 6px;
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--muted);
  font-family: "Outfit", sans-serif;
  font-size: 0.68rem;
  text-align: center;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-shot img {
  display: block;
  width: 100%;
  height: auto;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-wins {
  padding-bottom: clamp(48px, 6vw, 72px);
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-wins__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-win {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 168px;
  padding: clamp(20px, 2.4vw, 24px);
  border-radius: 20px;
  border: 1px solid rgba(17, 17, 20, 0.06);
  color: var(--ink);
  text-decoration: none;
  overflow: hidden;
  transition:
    transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.24s ease;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-win--time {
  background: #f3e6b3;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-win--cost {
  background: #c5ead4;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-win--wins {
  background: #d7defc;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-win::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.42);
  opacity: 0;
  transition: opacity 0.34s ease;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-win:hover,
:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-win:focus-visible {
  transform: translateY(-5px);
  border-color: rgba(17, 17, 20, 0.1);
  box-shadow: 0 22px 44px -28px rgba(17, 17, 20, 0.55);
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-win:hover::before,
:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-win:focus-visible::before {
  opacity: 1;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-win:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-win__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 14px;
  border-radius: 11px;
  background: rgba(17, 17, 20, 0.08);
  color: var(--ink);
  transition:
    background 0.24s ease,
    box-shadow 0.24s ease;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-win__icon svg {
  display: block;
  width: 18px;
  height: 18px;
  stroke-width: 1.75;
  shape-rendering: geometricPrecision;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-win:hover .editor-win__icon,
:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-win:focus-visible .editor-win__icon {
  background: rgba(17, 17, 20, 0.14);
  box-shadow: inset 0 0 0 1px rgba(17, 17, 20, 0.06);
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-win__tag {
  margin: 0 0 8px;
  font-family: "Outfit", sans-serif;
  font-size: 0.64rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(17, 17, 20, 0.52);
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-win__title {
  margin: 0 0 6px;
  font-family: var(--display);
  font-weight: 640;
  font-size: clamp(1.28rem, 1.9vw, 1.55rem);
  letter-spacing: -0.035em;
  line-height: 1.08;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-win__text {
  margin: 0;
  flex: 1;
  max-width: 22ch;
  font-family: "Outfit", sans-serif;
  font-size: 0.84rem;
  line-height: 1.4;
  color: var(--ink-2);
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-win__go {
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(17, 17, 20, 0.08);
  color: var(--ink);
  transition:
    transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.24s ease;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-win__go svg {
  display: block;
  width: 16px;
  height: 16px;
  stroke-width: 2;
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-win:hover .editor-win__go,
:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-win:focus-visible .editor-win__go {
  background: rgba(17, 17, 20, 0.14);
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-win:hover .editor-win__go svg,
:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-win:focus-visible .editor-win__go svg {
  transform: translateX(2px);
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-split {
  padding-block: clamp(56px, 7vw, 88px);
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-split--flip {
  background: color-mix(in srgb, var(--mist) 72%, var(--paper));
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-split__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 4.5vw, 64px);
  align-items: center;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-split--flip .editor-split__grid {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-split--flip .editor-split__copy {
  order: 2;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-split--flip .editor-split__shot {
  order: 1;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-split__copy h2 {
  margin: 0 0 12px;
  font-size: clamp(1.75rem, 3vw, 2.35rem);
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-split__copy > p {
  margin: 0 0 18px;
  max-width: 34rem;
  color: var(--ink-2);
  line-height: 1.55;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-split__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-split__list li {
  position: relative;
  padding-left: 18px;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--ink-2);
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-split__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-split__shot {
  margin: 0;
  overflow: hidden;
  border-radius: 20px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lift);
  aspect-ratio: 4 / 5;
  max-width: 420px;
  justify-self: end;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-split--flip .editor-split__shot {
  justify-self: start;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-split__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-matrix {
  padding-block: clamp(56px, 7vw, 88px);
  background: color-mix(in srgb, var(--accent-wash) 55%, var(--paper));
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-matrix__head {
  max-width: 38rem;
  margin: 0 auto clamp(28px, 4vw, 40px);
  text-align: center;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-matrix__head h2 {
  margin: 0 0 10px;
  font-size: clamp(1.75rem, 3vw, 2.35rem);
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-matrix__head p {
  margin: 0;
  color: var(--ink-2);
  line-height: 1.5;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-matrix__bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 132px;
  margin: 0;
  padding: clamp(18px, 2.2vw, 22px);
  border-radius: 20px;
  background: #fff;
  border: 1px solid rgba(17, 17, 20, 0.08);
  box-shadow: 0 14px 32px -24px rgba(17, 17, 20, 0.35);
  transition:
    transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.24s ease,
    box-shadow 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-tile--lead,
:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-tile--wide {
  grid-column: span 2;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-tile--lead {
  min-height: 156px;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-tile:hover,
:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-tile:focus-within {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  box-shadow:
    0 20px 40px -26px rgba(17, 17, 20, 0.42),
    0 0 0 1px color-mix(in srgb, var(--accent-soft) 65%, transparent);
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-tile__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 14px;
  border-radius: 14px;
  background: var(--tile-wash, var(--accent-wash));
  color: var(--ink);
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-tile:hover .editor-tile__icon,
:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-tile:focus-within .editor-tile__icon {
  transform: scale(1.06);
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-tile__icon svg {
  display: block;
  width: 22px;
  height: 22px;
  stroke-width: 1.65;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-tile:nth-child(1) { --tile-wash: #f3e6b3; }
:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-tile:nth-child(2) { --tile-wash: #e2d9f7; }
:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-tile:nth-child(3) { --tile-wash: #c5ead4; }
:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-tile:nth-child(4) { --tile-wash: #f3dcc4; }
:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-tile:nth-child(5) { --tile-wash: #d7defc; }
:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-tile:nth-child(6) { --tile-wash: #f3e6b3; }
:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-tile:nth-child(7) { --tile-wash: #c5ead4; }
:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-tile:nth-child(8) { --tile-wash: #e2d9f7; }

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-tile h3 {
  margin: 0 0 6px;
  font-family: var(--display);
  font-weight: 640;
  font-size: clamp(1.08rem, 1.5vw, 1.22rem);
  letter-spacing: -0.03em;
  line-height: 1.12;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-tile p {
  margin: 0;
  max-width: 28ch;
  font-family: "Outfit", sans-serif;
  font-size: 0.88rem;
  line-height: 1.42;
  color: var(--ink-2);
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-tile--lead p,
:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-tile--wide p {
  max-width: 36ch;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-showcase {
  padding-block: clamp(56px, 7vw, 88px);
  border-top: 1px solid var(--line);
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-showcase__head {
  max-width: 32rem;
  margin: 0 auto clamp(22px, 3vw, 28px);
  text-align: center;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-showcase__head h2 {
  margin: 0;
  font-size: clamp(1.75rem, 3vw, 2.35rem);
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-showcase__head p:not(.kicker) {
  margin: 10px 0 0;
  color: var(--ink-2);
  line-height: 1.5;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-showcase__bullets {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 720px;
  margin: 0 auto clamp(28px, 4vw, 40px);
  padding: 0;
  list-style: none;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-showcase__bullets li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--mist);
  border: 1px solid var(--line);
  font-family: "Outfit", sans-serif;
  font-size: 0.78rem;
  font-weight: 560;
  letter-spacing: -0.01em;
  color: rgba(17, 17, 20, 0.72);
  white-space: nowrap;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-showcase__bullets li:nth-child(1) { background: #f3e6b3; border-color: rgba(17, 17, 20, 0.06); }
:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-showcase__bullets li:nth-child(2) { background: #e2d9f7; border-color: rgba(17, 17, 20, 0.06); }
:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-showcase__bullets li:nth-child(3) { background: #c5ead4; border-color: rgba(17, 17, 20, 0.06); }
:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-showcase__bullets li:nth-child(4) { background: #f3dcc4; border-color: rgba(17, 17, 20, 0.06); }
:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-showcase__bullets li:nth-child(5) { background: #d7defc; border-color: rgba(17, 17, 20, 0.06); }
:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-showcase__bullets li:nth-child(6) { background: #f3e6b3; border-color: rgba(17, 17, 20, 0.06); }
:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-showcase__bullets li:nth-child(7) { background: #c5ead4; border-color: rgba(17, 17, 20, 0.06); }
:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-showcase__bullets li:nth-child(8) { background: #e2d9f7; border-color: rgba(17, 17, 20, 0.06); }

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-showcase__bullets svg {
  display: block;
  width: 15px;
  height: 15px;
  stroke-width: 1.65;
  flex-shrink: 0;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-showcase__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(12px, 1.6vw, 16px);
  max-width: 940px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-showcase__grid > li {
  flex: 0 1 clamp(132px, 16.5vw, 172px);
  width: clamp(132px, 16.5vw, 172px);
  max-width: 172px;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-showcase__card {
  margin: 0;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-showcase__screen {
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 16px;
  background: #111114;
  border: 1px solid rgba(17, 17, 20, 0.1);
  box-shadow: 0 16px 32px -24px rgba(17, 17, 20, 0.38);
  transition:
    box-shadow 0.32s ease,
    border-color 0.24s ease,
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-showcase__card:hover .editor-showcase__screen,
:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-showcase__card:focus-within .editor-showcase__screen {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
  box-shadow: 0 22px 44px -22px rgba(17, 17, 20, 0.48);
  transform: translateY(-4px);
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-showcase__screen video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-showcase__card figcaption {
  margin: 10px 0 0;
  text-align: center;
  font-family: "Outfit", sans-serif;
  font-size: 0.76rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink-2);
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-showcase__card figcaption span {
  display: block;
  margin-bottom: 2px;
  font-size: 0.64rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-compare {
  padding-block: clamp(56px, 7vw, 88px);
  background: color-mix(in srgb, var(--accent-soft) 42%, var(--paper));
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-compare__head {
  max-width: 36rem;
  margin: 0 auto 28px;
  text-align: center;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-compare__head h2 {
  margin: 0 0 10px;
  font-size: clamp(1.75rem, 3vw, 2.35rem);
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-compare__head p {
  margin: 0;
  color: var(--ink-2);
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-compare__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  max-width: 920px;
  margin-inline: auto;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-pick {
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.8vw, 28px);
  border-radius: 22px;
  background: var(--card);
  border: 1px solid var(--line);
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-pick--hot {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
  box-shadow: var(--shadow-lift);
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-pick__tag {
  margin: 0 0 10px;
  font-family: "Outfit", sans-serif;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-pick--hot .editor-pick__tag {
  color: var(--accent);
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-pick h3 {
  margin: 0 0 12px;
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.35rem;
  letter-spacing: -0.03em;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-pick ul {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  flex: 1;
  display: grid;
  gap: 8px;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-pick li {
  position: relative;
  padding-left: 16px;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--ink-2);
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-pick li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-pick .btn {
  align-self: flex-start;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .ask {
  padding: 48px 0 72px;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .ask__shell {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .ask__head h2 {
  font-size: clamp(2rem, 4vw, 3.1rem);
  margin: 0;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .ask__head em {
  font-style: italic;
  font-weight: 520;
  position: relative;
  z-index: 0;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .ask__head em::after {
  content: "";
  position: absolute;
  left: -4%;
  right: -4%;
  bottom: 0.08em;
  height: 0.22em;
  background: var(--accent-soft);
  border-radius: 2px;
  z-index: -1;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .ask__list {
  display: grid;
  gap: 12px;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .ask__item {
  background: var(--card);
  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(17, 17, 20, 0.05);
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .ask__item[open] {
  background: var(--accent-soft);
  border-radius: 28px;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .ask__item summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
  font-family: "Outfit", sans-serif;
  font-size: 0.98rem;
  font-weight: 560;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .ask__item summary::-webkit-details-marker {
  display: none;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .ask__mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ink-deep);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .ask__item[open] .ask__mark {
  background: rgba(20, 20, 20, 0.12);
  color: var(--ink);
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .ask__plus {
  width: 18px;
  height: 18px;
  position: relative;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .ask__plus::before,
:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .ask__plus::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  background: var(--ink);
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .ask__plus::before {
  width: 14px;
  height: 1.5px;
  transform: translate(-50%, -50%);
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .ask__plus::after {
  width: 1.5px;
  height: 14px;
  transform: translate(-50%, -50%);
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .ask__item[open] .ask__plus::after {
  display: none;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .ask__item p {
  margin: 0;
  padding: 0 52px 20px 58px;
  color: var(--ink-2);
  font-size: 0.92rem;
  line-height: 1.5;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-close {
  padding-block: clamp(56px, 7vw, 80px);
  background: var(--ink-deep);
  color: var(--on-ink);
  text-align: center;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-close__inner {
  max-width: 36rem;
  margin-inline: auto;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-close h2 {
  margin: 0 0 10px;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  color: var(--on-ink);
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-close p {
  margin: 0;
  color: var(--on-ink-2);
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-close__cta {
  justify-content: center;
  margin-top: 22px;
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-close .btn--ghost {
  border-color: rgba(245, 245, 244, 0.28);
  color: var(--on-ink);
}

:is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-close .btn--ghost:hover {
  border-color: var(--on-ink);
  background: rgba(245, 245, 244, 0.06);
}

@media (max-width: 980px) {
  :is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-hero__grid,
  :is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-split__grid,
  :is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-split--flip .editor-split__grid {
    grid-template-columns: 1fr;
  }

  :is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-split--flip .editor-split__copy,
  :is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-split--flip .editor-split__shot {
    order: unset;
  }

  :is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-split__shot {
    max-width: none;
    justify-self: stretch;
  }

  :is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-shot {
    max-width: none;
    justify-self: stretch;
  }

  :is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-cta__bar {
    flex-direction: column;
    align-items: stretch;
    border-radius: 22px;
    padding: 10px;
  }

  :is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-cta__field {
    padding: 0 8px;
  }

  :is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-cta__submit {
    width: 100%;
    min-height: 48px;
  }

  :is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-wins__grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-inline: auto;
  }

  :is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-matrix__bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  :is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-tile--lead,
  :is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-tile--wide {
    grid-column: span 2;
  }

  :is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-showcase__grid > li {
    flex-basis: clamp(128px, 28vw, 160px);
    width: clamp(128px, 28vw, 160px);
  }

  :is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-compare__grid,
  :is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .ask__shell {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}

@media (max-width: 620px) {
  :is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-matrix__bento {
    grid-template-columns: 1fr;
  }

  :is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-tile--lead,
  :is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-tile--wide {
    grid-column: auto;
  }

  :is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-win {
    min-height: 0;
  }

  :is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-win__text {
    max-width: none;
    padding-right: 36px;
  }

  :is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-shot {
    max-width: none;
    justify-self: stretch;
  }

  :is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-close__cta {
    flex-direction: column;
    align-items: stretch;
  }

  :is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-close__cta .btn {
    width: 100%;
  }

  :is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .ask__item,
  :is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .ask__item[open] {
    border-radius: 22px;
  }

  :is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .ask__item p {
    padding: 0 18px 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-showcase__card,
  :is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-showcase__screen {
    transition: none;
  }

  :is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-showcase__card:hover .editor-showcase__screen,
  :is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-showcase__card:focus-within .editor-showcase__screen {
    transform: none;
  }

  :is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-cta__panel {
    animation: none;
  }

  :is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-cta__submit {
    transition: none;
  }

  :is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-win,
  :is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-win__icon,
  :is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-win__go,
  :is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-win__go svg,
  :is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-tile,
  :is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-tile__icon {
    transition: none;
  }

  :is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-win:hover,
  :is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-win:focus-visible,
  :is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-tile:hover,
  :is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-tile:focus-within {
    transform: none;
  }

  :is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-win:hover .editor-win__icon,
  :is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-win:focus-visible .editor-win__icon,
  :is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-tile:hover .editor-tile__icon,
  :is(.page-editor, .page-generator, .page-brand-dna, .page-schedule) .editor-tile:focus-within .editor-tile__icon {
    transform: none;
  }
}

/* ==========================================================================
   Generator product page (unique sections)
   ========================================================================== */

:is(.page-generator, .page-brand-dna, .page-schedule) .gen-booth {
  padding-block: clamp(56px, 7vw, 88px);
}

:is(.page-generator, .page-brand-dna, .page-schedule) .gen-booth__pipeline {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.16fr) minmax(0, 0.92fr);
  gap: 14px;
  align-items: stretch;
}

:is(.page-generator, .page-brand-dna, .page-schedule) .gen-booth__act {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  margin: 0;
  padding: clamp(20px, 2.4vw, 24px);
  border-radius: 20px;
  border: 1px solid rgba(17, 17, 20, 0.06);
}

:is(.page-generator, .page-brand-dna, .page-schedule) .gen-booth__act--in {
  background: #f3e6b3;
}

:is(.page-generator, .page-brand-dna, .page-schedule) .gen-booth__act--build {
  background: #c5ead4;
}

:is(.page-generator, .page-brand-dna, .page-schedule) .gen-booth__act--out {
  background: #d7defc;
}

:is(.page-generator, .page-brand-dna, .page-schedule) .gen-booth__tag {
  margin: 0 0 8px;
  font-family: "Outfit", sans-serif;
  font-size: 0.64rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(17, 17, 20, 0.52);
}

:is(.page-generator, .page-brand-dna, .page-schedule) .gen-booth__act h3 {
  margin: 0 0 16px;
  font-family: var(--display);
  font-weight: 640;
  font-size: clamp(1.2rem, 1.7vw, 1.42rem);
  letter-spacing: -0.035em;
  line-height: 1.1;
  color: var(--ink);
}

:is(.page-generator, .page-brand-dna, .page-schedule) .gen-booth__url {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 12px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #111114;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #f5f5f4;
  font-family: "Outfit", sans-serif;
  font-size: 0.74rem;
}

:is(.page-generator, .page-brand-dna, .page-schedule) .gen-booth__url svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: rgba(245, 245, 244, 0.55);
}

:is(.page-generator, .page-brand-dna, .page-schedule) .gen-booth__still {
  margin: 0;
  flex: 1;
  min-height: 220px;
  overflow: hidden;
  border-radius: 16px;
  background: rgba(17, 17, 20, 0.06);
}

:is(.page-generator, .page-brand-dna, .page-schedule) .gen-booth__still img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

:is(.page-generator, .page-brand-dna, .page-schedule) .gen-booth__app {
  margin: 0;
  flex: 1;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(17, 17, 20, 0.06);
}

:is(.page-generator, .page-brand-dna, .page-schedule) .gen-booth__app img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

:is(.page-generator, .page-brand-dna, .page-schedule) .gen-booth__reels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  flex: 1;
  min-height: 220px;
}

:is(.page-generator, .page-brand-dna, .page-schedule) .gen-booth__reel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
}

:is(.page-generator, .page-brand-dna, .page-schedule) .gen-booth__reel video {
  display: block;
  width: 100%;
  flex: 1;
  min-height: 0;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 14px;
  background: #111114;
}

:is(.page-generator, .page-brand-dna, .page-schedule) .gen-booth__reel figcaption {
  margin-top: 8px;
  font-family: "Outfit", sans-serif;
  font-size: 0.72rem;
  font-weight: 560;
  color: var(--ink-2);
}

:is(.page-generator, .page-brand-dna, .page-schedule) .gen-booth__proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: clamp(24px, 3vw, 32px) 0 0;
  padding: clamp(18px, 2.4vw, 24px) 0 0;
  border-top: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  list-style: none;
}

:is(.page-generator, .page-brand-dna, .page-schedule) .gen-booth__proof li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 clamp(10px, 1.6vw, 18px);
  font-family: "Outfit", sans-serif;
  font-size: 0.84rem;
  line-height: 1.4;
  color: var(--ink-2);
  white-space: nowrap;
}

:is(.page-generator, .page-brand-dna, .page-schedule) .gen-booth__proof li + li {
  border-left: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
}

:is(.page-generator, .page-brand-dna, .page-schedule) .gen-booth__proof svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--accent);
  stroke-width: 2.2;
}

:is(.page-generator, .page-brand-dna, .page-schedule) .gen-outcomes {
  padding-block: clamp(56px, 7vw, 88px);
  background: #fff;
}

:is(.page-generator, .page-brand-dna, .page-schedule) .gen-outcomes__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

:is(.page-generator, .page-brand-dna, .page-schedule) .gen-outcome {
  display: flex;
  flex-direction: column;
  min-height: 188px;
  margin: 0;
  padding: clamp(20px, 2.4vw, 26px);
  border-radius: 22px;
  border: 1px solid rgba(17, 17, 20, 0.07);
  box-shadow: 0 18px 36px -26px rgba(17, 17, 20, 0.32);
  transition:
    transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

:is(.page-generator, .page-brand-dna, .page-schedule) .gen-outcome:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -24px rgba(17, 17, 20, 0.4);
}

:is(.page-generator, .page-brand-dna, .page-schedule) .gen-outcome--hook { background: #f3e6b3; }
:is(.page-generator, .page-brand-dna, .page-schedule) .gen-outcome--save { background: #c5ead4; }
:is(.page-generator, .page-brand-dna, .page-schedule) .gen-outcome--click { background: #d7defc; }

:is(.page-generator, .page-brand-dna, .page-schedule) .gen-outcome__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  color: var(--ink);
}

:is(.page-generator, .page-brand-dna, .page-schedule) .gen-outcome__icon svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.65;
}

:is(.page-generator, .page-brand-dna, .page-schedule) .gen-outcome__tag {
  margin: 0 0 6px;
  font-family: "Outfit", sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(17, 17, 20, 0.52);
}

:is(.page-generator, .page-brand-dna, .page-schedule) .gen-outcome h3 {
  margin: 0 0 10px;
  font-family: var(--display);
  font-size: clamp(1.2rem, 1.7vw, 1.42rem);
  font-weight: 560;
  letter-spacing: -0.03em;
  line-height: 1.12;
}

:is(.page-generator, .page-brand-dna, .page-schedule) .gen-outcome > p:last-child {
  margin: 0;
  font-family: "Outfit", sans-serif;
  font-size: 0.88rem;
  line-height: 1.48;
  color: var(--ink-2);
}

:is(.page-generator, .page-brand-dna, .page-schedule) .gen-finish {
  padding-block: clamp(56px, 7vw, 88px);
  background: color-mix(in srgb, var(--accent-wash) 40%, var(--paper));
}

:is(.page-generator, .page-brand-dna, .page-schedule) .gen-finish__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.5vw, 24px);
}

:is(.page-generator, .page-brand-dna, .page-schedule) .gen-finish__card {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: clamp(24px, 3vw, 32px);
  border-radius: clamp(24px, 2.8vw, 32px);
  background: #fff;
  border: 1px solid rgba(17, 17, 20, 0.08);
  box-shadow: 0 24px 48px -28px rgba(17, 17, 20, 0.28);
  transition:
    transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

:is(.page-generator, .page-brand-dna, .page-schedule) .gen-finish__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 56px -26px rgba(17, 17, 20, 0.34);
}

:is(.page-generator, .page-brand-dna, .page-schedule) .gen-finish__card--schedule {
  background: linear-gradient(180deg, #fff 0%, #fbf7e8 100%);
}

:is(.page-generator, .page-brand-dna, .page-schedule) .gen-finish__card--edit {
  background: linear-gradient(180deg, #fff 0%, #eef8f1 100%);
}

:is(.page-generator, .page-brand-dna, .page-schedule) .gen-finish__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(17, 17, 20, 0.06);
  color: var(--ink);
}

:is(.page-generator, .page-brand-dna, .page-schedule) .gen-finish__icon svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.65;
}

:is(.page-generator, .page-brand-dna, .page-schedule) .gen-finish__card h3 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.35rem, 2vw, 1.65rem);
  font-weight: 560;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

:is(.page-generator, .page-brand-dna, .page-schedule) .gen-finish__card > p {
  margin: 0;
  font-family: "Outfit", sans-serif;
  font-size: 0.88rem;
  line-height: 1.48;
  color: var(--ink-2);
}

:is(.page-generator, .page-brand-dna, .page-schedule) .gen-finish__shot {
  margin: 4px 0 0;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(17, 17, 20, 0.08);
  background: #111114;
}

:is(.page-generator, .page-brand-dna, .page-schedule) .gen-finish__shot img {
  display: block;
  width: 100%;
  height: auto;
}

:is(.page-generator, .page-brand-dna, .page-schedule) .gen-finish__card .btn {
  justify-self: start;
  margin-top: 4px;
}

.page-generator .dna-train {
  padding-block: clamp(56px, 8vw, 96px);
  background: #fff;
}

@media (max-width: 1080px) {
  :is(.page-generator, .page-brand-dna, .page-schedule) .gen-outcomes__grid {
    grid-template-columns: 1fr;
  }

  :is(.page-generator, .page-brand-dna, .page-schedule) .gen-booth__pipeline {
    grid-template-columns: 1fr;
  }

  :is(.page-generator, .page-brand-dna, .page-schedule) .gen-booth__proof {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  :is(.page-generator, .page-brand-dna, .page-schedule) .gen-booth__proof li {
    white-space: normal;
    justify-content: flex-start;
    padding: 0;
  }

  :is(.page-generator, .page-brand-dna, .page-schedule) .gen-booth__proof li + li {
    border-left: 0;
    padding-top: 12px;
    border-top: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  }
}

@media (max-width: 720px) {
  :is(.page-generator, .page-brand-dna, .page-schedule) .gen-finish__grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(.page-generator, .page-brand-dna, .page-schedule) .gen-outcome,
  :is(.page-generator, .page-brand-dna, .page-schedule) .gen-finish__card {
    transition: none;
  }

  :is(.page-generator, .page-brand-dna, .page-schedule) .gen-outcome:hover,
  :is(.page-generator, .page-brand-dna, .page-schedule) .gen-finish__card:hover {
    transform: none;
  }
}