/* ==========================================================================
   Lynkko Corp — hoja de estilos compartida
   Audiencia: gerencia, presidencia, vicepresidencias. Tono formal (usted).
   Reglas:
   - Todo color sale de los tokens de :root. Nunca hex sueltos en componentes.
   - Componentes disponibles (usar estas clases, no inventar paralelas):
     Layout ....... .container .section .section.alt .section-head .grid-2 .grid-3 .grid-4
     Hero ......... .hero .hero-grid .hero-copy .breadcrumb .kicker .display .lead .actions
     Botones ...... .btn .btn-primary .btn-secondary .btn-sm .link-arrow
     Bloques ...... .card .card-link .outcome .check-list .stat .badge
     Interactivo .. .tabs/.tab[aria-selected]  .chips/.chip[aria-pressed]  input.range
     Panel demo ... .demo .demo-head .demo-title .demo-live .demo-body .demo-foot
                    .demo-tabs/.demo-tab[aria-selected] .kpis .kpi .kpi-label .kpi-value .kpi-sub
                    .feed li > .tag(.ai|.warn|.alert) + span + time   .meter > i   .demo-note
     Cierre ....... .cta-band
     Formularios .. .form-grid .field (label > input|select|textarea) .field-row
   ========================================================================== */

:root{
  /* Paleta de la marca (manual de marca, brand/kit): azul Lynkko, verde transformación y menta.
     Tema claro por defecto; el oscuro se define abajo en :root[data-theme="dark"] (selector del header, js/theme.js). */
  color-scheme: light;
  --ground:#ffffff;
  --subtle:#f5f6f7;          /* papel */
  --surface:#ffffff;
  --ink:#16181b;
  --ink-2:#4d535b;
  --ink-3:#7a808a;
  --line:#e5e7ea;
  --line-strong:#d3d7dc;
  --navy:#0f2a47;          /* azul Lynkko: botones, logo y franjas de marca */
  --navy-hover:#1b4470;
  --navy-2:#17385c;        /* supergráfico y bordes sobre azul */
  --on-navy:#ffffff;
  --on-navy-2:#c9d3de;
  --mint:#7fd1b9;          /* acento sobre fondos azules; nunca para texto sobre blanco */
  --brand-navy:#0f2a47;    /* azul de marca fijo en ambos temas (texto sobre menta) */
  --band:#0f2a47;          /* franja de cierre y footer */
  --on-band:#ffffff;
  --on-band-2:#c9d3de;
  --accent:#2f6b5a;        /* verde transformación: detalles, enlaces e íconos */
  --accent-soft:#e3eee9;
  --ok:#2f6b5a;
  --warn:#8a6100;
  --alert:#a3321f;

  /* Panel de demostración: gris claro con tarjetas blancas */
  --panel:#f5f6f7;
  --panel-2:#ffffff;
  --panel-ink:#16181b;
  --panel-ink-2:#6a7079;
  --panel-line:#e5e7ea;
  --panel-accent:#2f6b5a;
  --panel-warn:#8a6100;
  --panel-alert:#a3321f;
  --panel-3:#eceef0;       /* fondo de pestañas y etiquetas */
  --tag-warn-bg:#fbf3e0;
  --tag-alert-bg:#fbeae6;
  --meter-bg:#e6e8eb;
  --shadow-sm:0 1px 2px rgba(22,24,27,.08);

  --shadow:0 18px 40px -30px rgba(15,42,71,.38);
  --serif:"Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r:6px;
  --r-lg:10px;
  --header-h:68px;
}

/* Tema oscuro: mismos tokens, valores de la marca sobre azul profundo. */
:root[data-theme="dark"]{
  color-scheme: dark;
  --ground:#0b1522;
  --subtle:#0f1d2e;
  --surface:#122236;
  --ink:#e8edf2;
  --ink-2:#b4c0cc;
  --ink-3:#8593a3;
  --line:#1f3550;
  --line-strong:#2b4a6d;
  --navy:#7fd1b9;          /* en oscuro los botones y acentos fuertes son menta con texto azul */
  --navy-hover:#a6e2d0;
  --on-navy:#0f2a47;
  --on-navy-2:#0f2a47;
  --accent:#7fd1b9;
  --accent-soft:#15302b;
  --ok:#7fd1b9;
  --warn:#e3b341;
  --alert:#f08a80;
  --band:#0f2a47;
  --panel:#0f1d2e;
  --panel-2:#142840;
  --panel-ink:#e8edf2;
  --panel-ink-2:#9aa7b5;
  --panel-line:#22395a;
  --panel-accent:#7fd1b9;
  --panel-warn:#e3b341;
  --panel-alert:#f08a80;
  --panel-3:#1a2e46;
  --tag-warn-bg:#2a2414;
  --tag-alert-bg:#2c1a1a;
  --meter-bg:#22395a;
  --shadow:0 18px 40px -30px rgba(0,0,0,.7);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
}

/* Base ------------------------------------------------------------------ */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;text-wrap:balance;margin:0;letter-spacing:-.01em;color:var(--ink)}
p{margin:0}
ul{margin:0;padding:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#app{outline:none;min-height:60vh}
#app > .page{animation:page-in .35s ease both}
@keyframes page-in{from{opacity:.001;transform:translateY(6px)}}

.container{max-width:1160px;margin:0 auto;padding-inline:24px}
@media (max-width:520px){.container{padding-inline:16px}}

/* Header ---------------------------------------------------------------- */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb,var(--ground) 94%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;gap:32px;height:var(--header-h)}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:18px;letter-spacing:-.01em;text-decoration:none;color:var(--ink)}
.brand svg,.brand-logo{flex:none}
.brand-logo{display:block;height:32px;width:auto}
.brand-logo.logo-dark{display:none}
:root[data-theme="dark"] .site-header .brand-logo.logo-light{display:none}
:root[data-theme="dark"] .site-header .brand-logo.logo-dark{display:block}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;background:none;border:1px solid var(--line);border-radius:var(--r);padding:0;cursor:pointer;color:var(--ink)}
.theme-toggle:hover{border-color:var(--ink-3)}
@media (min-width:901px) and (max-width:1120px){.nav-links a,.nav-links button{padding:8px 8px}.nav-links{font-size:13.5px}}
.theme-toggle .i-sun{display:none}
:root[data-theme="dark"] .theme-toggle .i-sun{display:block}
:root[data-theme="dark"] .theme-toggle .i-moon{display:none}
.nav-links{display:flex;align-items:center;gap:4px;list-style:none;font-size:14px}
.nav-links > li{position:relative}
.nav-links a,.nav-links button{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;white-space:nowrap;border-radius:var(--r);color:var(--ink-2);text-decoration:none;font:inherit;background:none;border:0;cursor:pointer}
.nav-links a:hover,.nav-links button:hover,.nav-links [aria-current="page"],.nav-links button[data-active="true"]{color:var(--ink)}
.nav-links [aria-current="page"],.nav-links button[data-active="true"]{font-weight:600}
.nav-links button svg{transition:transform .2s}
.nav-links button[aria-expanded="true"] svg{transform:rotate(180deg)}
.mega{position:absolute;top:calc(100% + 10px);left:-12px;width:560px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:10px;display:grid;grid-template-columns:1fr 1fr;gap:2px}
.mega a{display:grid;gap:2px;padding:14px 14px;border-radius:var(--r);color:var(--ink)}
.mega a:hover{background:var(--subtle)}
.mega b{font-weight:600;font-size:14px}
.mega span{font-size:13px;color:var(--ink-3);line-height:1.45}
.nav-cta{margin-left:auto;display:flex;align-items:center;gap:12px}
.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:var(--r);padding:8px;cursor:pointer;color:var(--ink)}
@media (max-width:900px){
  .nav-links{display:none;position:absolute;top:var(--header-h);left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--ground);border-bottom:1px solid var(--line);padding:8px 16px 16px;box-shadow:var(--shadow)}
  .nav-links.open{display:flex}
  .nav-links a,.nav-links button{padding:12px 4px;width:100%;justify-content:space-between;font-size:15px}
  .mega{position:static;width:auto;box-shadow:none;border:0;padding:0 0 8px;grid-template-columns:1fr}
  .mega a{padding:10px 12px}
  .nav-toggle{display:inline-flex}
  .nav-cta .btn{display:none}
  .nav-cta{margin-left:auto}
}

/* Botones --------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:500 15px/1 var(--sans);padding:14px 22px;border-radius:var(--r);text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background .15s,border-color .15s,color .15s;white-space:nowrap}
.btn-primary{background:var(--navy);color:var(--on-navy)}
.btn-primary:hover{background:var(--navy-hover)}
.btn-secondary{border-color:var(--line-strong);color:var(--ink);background:transparent}
.btn-secondary:hover{border-color:var(--ink-3)}
.btn-sm{padding:10px 16px;font-size:14px}
.link-arrow{display:inline-flex;align-items:center;gap:6px;font-weight:500;font-size:15px;color:var(--ink);text-decoration:none}
.link-arrow svg{transition:transform .15s}
.link-arrow:hover svg{transform:translateX(3px)}

/* Tipografía de página --------------------------------------------------- */
.kicker{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.breadcrumb{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--ink-3)}
.breadcrumb a{text-decoration:none}
.breadcrumb a:hover{color:var(--ink)}
.display{font-size:clamp(34px,4.3vw,52px);line-height:1.1}
.lead{font-size:18px;color:var(--ink-2);max-width:34em}
.actions{display:flex;flex-wrap:wrap;gap:12px}

/* Hero ------------------------------------------------------------------ */
.hero{padding-block:56px 64px;border-bottom:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:64px;align-items:center}
.hero-copy{display:grid;gap:22px;align-content:start}
@media (max-width:980px){.hero-grid{grid-template-columns:minmax(0,1fr);gap:40px}.hero{padding-block:40px 48px}}

/* Secciones ------------------------------------------------------------- */
.section{padding-block:80px}
.section.alt{background:var(--subtle);border-block:1px solid var(--line)}
.section-head{display:grid;gap:14px;max-width:680px;margin-bottom:44px}
.section-head h2{font-size:clamp(28px,3vw,38px);line-height:1.18}
.section-head p{color:var(--ink-2);font-size:17px}
.section-head.split{max-width:none;grid-template-columns:1fr 1fr;align-items:end;gap:40px}
@media (max-width:860px){.section-head.split{grid-template-columns:1fr;gap:14px}.section{padding-block:64px}}
.grid-2,.grid-3,.grid-4{display:grid;gap:24px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){.grid-3{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.grid-2,.grid-4{grid-template-columns:minmax(0,1fr)}}

/* Bloques --------------------------------------------------------------- */
.card{border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;background:var(--surface);display:flex;flex-direction:column;gap:12px}
.card h3{font-size:22px;line-height:1.25}
.card p{color:var(--ink-2);font-size:15px}
.card-link{text-decoration:none;transition:border-color .15s,transform .15s}
.card-link:hover{border-color:var(--ink-3);transform:translateY(-2px)}
.card-link .link-arrow{margin-top:auto;padding-top:8px}
.card .icon{width:40px;height:40px;border-radius:8px;background:var(--accent-soft);display:grid;place-items:center;color:var(--accent)}
.outcome{border-top:1px solid var(--line-strong);padding-top:18px;display:grid;gap:8px;align-content:start}
.outcome h3{font-size:21px;line-height:1.3}
.outcome p{color:var(--ink-2);font-size:15px}
.check-list{list-style:none;display:grid;gap:10px}
.check-list li{display:grid;grid-template-columns:18px 1fr;gap:10px;font-size:15px;color:var(--ink-2)}
.check-list svg{margin-top:5px;color:var(--accent)}
.stat{display:grid;gap:4px}
.stat b{font-family:var(--serif);font-weight:500;font-size:36px;line-height:1;font-variant-numeric:tabular-nums}
.stat span{font-size:14px;color:var(--ink-3)}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--accent-soft);color:var(--accent)}

/* Controles interactivos (sobre fondo claro) ----------------------------- */
.tabs{display:flex;flex-wrap:wrap;gap:4px;border-bottom:1px solid var(--line)}
.tab{font:500 15px/1 var(--sans);padding:14px 16px;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;color:var(--ink-3);cursor:pointer}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--navy)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:500 14px/1 var(--sans);padding:10px 14px;border-radius:999px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-2);cursor:pointer;transition:all .15s}
.chip:hover{border-color:var(--ink-3);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:var(--on-navy)}
input.range{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:2px;background:var(--panel-line);outline:none}
input.range::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--panel-accent);border:3px solid var(--panel);box-shadow:0 0 0 1px var(--panel-accent);cursor:pointer}
input.range::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--panel-accent);border:3px solid var(--panel);cursor:pointer}
input.range:focus-visible{outline:2px solid var(--panel-accent);outline-offset:6px}

/* Panel de demostración (siempre navy) ----------------------------------- */
.demo{background:var(--panel);color:var(--panel-ink);border-radius:12px;overflow:hidden;border:1px solid var(--panel-line)}
.demo-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px 0;font-size:13px;color:var(--panel-ink-2)}
.demo-title{color:var(--panel-ink);font-weight:600}
.demo-live{display:none}
.demo-live i{width:7px;height:7px;border-radius:50%;background:var(--panel-accent);animation:pulse 1.8s infinite}
@keyframes pulse{50%{opacity:.3}}
.demo-body{padding:20px;display:grid;gap:16px}
.demo-foot{padding:0 20px 14px;font-size:12px;color:var(--panel-ink-2)}
.demo h3,.demo h4{color:var(--panel-ink);font-family:var(--serif)}
.demo-tabs{display:flex;gap:2px;padding:6px;background:var(--panel-3);border-radius:8px;overflow-x:auto}
.demo-tab{flex:1;white-space:nowrap;font:500 13px/1 var(--sans);padding:10px 12px;border-radius:6px;border:0;background:none;color:var(--panel-ink-2);cursor:pointer}
.demo-tab:hover{color:var(--panel-ink)}
.demo-tab[aria-selected="true"]{background:var(--panel-2);color:var(--panel-ink);box-shadow:var(--shadow-sm)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.kpi{padding:14px;border:1px solid var(--panel-line);border-radius:8px;background:var(--panel-2);display:grid;gap:4px;min-width:0}
.kpi-label{font-size:12px;color:var(--panel-ink-2)}
.kpi-value{font-family:var(--serif);font-size:28px;line-height:1.05;color:var(--panel-ink);font-variant-numeric:tabular-nums}
.kpi-sub{font-size:12px;color:var(--panel-ink-2)}
.kpi-sub.up{color:var(--panel-accent)}
.kpi-sub.down{color:var(--panel-alert)}
@media (max-width:480px){.kpis{grid-template-columns:1fr 1fr}.kpi-value{font-size:24px}}
.feed{list-style:none;display:grid;gap:8px}
.feed li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:start;padding:12px 14px;background:var(--panel-2);border:1px solid var(--panel-line);border-radius:8px;font-size:14px;line-height:1.5;animation:rise .4s both}
.feed li:nth-child(2){animation-delay:.07s}.feed li:nth-child(3){animation-delay:.14s}.feed li:nth-child(4){animation-delay:.21s}
@keyframes rise{from{opacity:.001;transform:translateY(5px)}}
.tag{font-size:11px;font-weight:600;letter-spacing:.02em;padding:3px 7px;border-radius:4px;background:var(--panel-3);color:var(--panel-ink-2);white-space:nowrap}
.tag.ai{background:var(--accent-soft);color:var(--panel-accent)}
.tag.warn{background:var(--tag-warn-bg);color:var(--panel-warn)}
.tag.alert{background:var(--tag-alert-bg);color:var(--panel-alert)}
.feed time{font-size:12px;color:var(--panel-ink-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.meter{height:6px;border-radius:3px;background:var(--meter-bg);overflow:hidden}
.meter > i{display:block;height:100%;background:var(--panel-accent);border-radius:3px;transition:width .4s}
.demo-note{font-size:13px;color:var(--panel-ink-2);padding:12px 14px;border:1px dashed var(--panel-line);border-radius:8px}
.demo-note b{color:var(--panel-ink);font-weight:600}
@media (max-width:480px){.demo-body{padding:16px}.demo-head,.demo-foot{padding-inline:16px}.feed li{grid-template-columns:auto minmax(0,1fr)}.feed time{grid-column:2}}

/* Banda de cierre -------------------------------------------------------- */
.cta-band{background:var(--band) url("brand/supergrafico-azul.svg") no-repeat right -40px top -36px/250px auto;color:var(--on-band);border-top:0}
.cta-band .container{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:28px;padding-block:56px}
.cta-band h2{color:var(--on-band);font-size:clamp(26px,2.8vw,36px);line-height:1.2;max-width:24ch}
.cta-band p{color:var(--on-band-2);margin-top:10px}
.cta-band .btn{background:var(--mint);color:var(--brand-navy);font-weight:600}
.cta-band .btn:hover{background:#ffffff}

/* Formularios ------------------------------------------------------------ */
.form-grid{display:grid;gap:16px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){.field-row{grid-template-columns:1fr}}
.field{display:grid;gap:6px;font-size:13px;font-weight:500;color:var(--ink)}
.field input,.field select,.field textarea{font:400 15px/1.35 var(--sans);color:var(--ink);background:var(--ground);border:1px solid var(--line-strong);border-radius:var(--r);padding:12px 13px;width:100%}
.field textarea{min-height:110px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3)}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:transparent}
.field .hint{font-weight:400;font-size:12px;color:var(--ink-3)}
.field.invalid input,.field.invalid select{border-color:var(--alert)}
.field .error{font-weight:400;font-size:12px;color:var(--alert)}

/* Footer ---------------------------------------------------------------- */
.site-footer{border-top:1px solid var(--navy-2);padding-block:56px 32px;font-size:14px;color:var(--on-band-2);background:var(--band) url("brand/supergrafico-azul.svg") no-repeat right -70px top 30px/380px auto}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.footer-grid h4{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--on-band);margin-bottom:14px}
.footer-grid ul{list-style:none;display:grid;gap:10px}
.footer-grid a{text-decoration:none}
.footer-grid a:hover{color:var(--mint)}
.footer-grid .about{max-width:30ch;margin-top:14px}
.footer-legal{margin-top:48px;padding-top:24px;border-top:1px solid var(--navy-2);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:13px;color:var(--on-band-2)}
.footer-legal a{text-decoration:none}
.footer-legal a:hover{color:var(--mint)}
.site-footer :focus-visible{outline-color:var(--mint)}
@media (max-width:860px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.footer-grid{grid-template-columns:1fr}.site-footer{background-size:240px auto;background-position:right -60px top 24px}}

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

/* Añadidos para el sitio en PHP ------------------------------------------ */
.skip-link{position:absolute;left:16px;top:-48px;z-index:100;background:var(--navy);color:var(--on-navy);padding:10px 16px;border-radius:var(--r);text-decoration:none;font-weight:500}
.skip-link:focus{top:12px}
main{outline:none;display:block}
main > .page{animation:page-in .35s ease both}
.footer-title{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--on-band);margin-bottom:14px}
.hero-plain{padding-block:96px}
.section-tight{padding-block:48px}
.trust-item{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start}
.trust-item .icon{width:40px;height:40px;border-radius:8px;background:var(--accent-soft);display:grid;place-items:center;color:var(--accent)}
.trust-item h3{font-size:19px;line-height:1.3}
.trust-item p{font-size:15px;color:var(--ink-2);margin-top:4px}
.hc-product{font-size:24px}
.demo .demo-link{color:var(--panel-ink);font-size:13px}
.lead-done{gap:16px}
.lead-done h2{font-size:26px;line-height:1.25}

/* Resultados: título a la izquierda, lista a la derecha (una sola unidad de lectura) */
.outcomes-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:64px;align-items:start}
.outcomes-grid h2{font-size:clamp(28px,3vw,38px);line-height:1.18}
.outcome-list{border-bottom:1px solid var(--line)}
.outcome-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:32px;padding-block:22px;border-top:1px solid var(--line)}
.outcome-row h3{font-size:19px;line-height:1.35}
.outcome-row p{color:var(--ink-2);font-size:15px}
@media (max-width:860px){.outcomes-grid{grid-template-columns:minmax(0,1fr);gap:24px}.outcome-row{grid-template-columns:minmax(0,1fr);gap:6px}}
.demo-title{font-weight:600;color:var(--panel-ink)}
.mega.mega-narrow{width:320px;grid-template-columns:1fr}
.footer-title-gap{margin-top:24px}