/* ===========================================================
   CadenSpark · "What We've Built" — shared design system
   Used by the home (index.html) and every product detail page.
   =========================================================== */
:root{
/* ============================================================
   SISTEMA v3 — traducido de waabi.ai, medido en el navegador.
   Tres reglas: (1) display ENORME en peso normal, nunca bold;
   (2) cuanto más grande, más apretado; (3) UN SOLO acento.
   Ver partner-landing-v3/README.md.

   🔴 Los nombres de variables viejos se conservan TODOS: las 7
   páginas los usan en su markup y en las 350 reglas de este
   archivo. Cambia el valor, no el nombre.
   ============================================================ */
  /* Tinta única. Antes navy #0a0f2c / #0a0f2c y tinta #0a0f2c. */
  --navy-deep:#0a0f2c;--navy:#0a0f2c;--ink:#0a0f2c;--ink-2:#2a3354;
  --ink-soft:#2a3354;--kicker:#5a647c;--muted:#5a647c;
  /* Un solo acento. El azul #2563eb y el dorado #2563eb (que venía del
     brief de Krym y no es de la marca) desaparecen. */
  --blue:#2563eb;--accent:#2563eb;--accent-dark:#1d4ed8;--accent-soft:#e8effd;
  --gold:#2563eb;--fill-bg:#e8effd;--fill-ink:#1d4ed8;
  /* --accent-light se usa SOLO como color de texto sobre la tinta (13 veces):
     el acento ahí daría 3.68 y AA pide 4.5, así que va blanco al 72%. */
  --accent-light:rgba(255,255,255,.72);
  /* Superficies. --card pasa a ser la banda cálida, que es el rol que cumplía. */
  --paper:#FFFFFF;--band:#f1efec;--card:#f1efec;--card-2:#f5f7fa;--panel:#f5f7fa;
  --card-border:#e6e8ef;--hairline:#e6e8ef;--line:#e6e8ef;--line-soft:#eef0f5;
  /* Tipografía: Newsreader → Playfair Display, Hanken Grotesk → Inter. */
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  /* Escala de display de Waabi + espaciado base 8 + radios. */
  --d1:clamp(50px,9.4vw,132px);--d2:clamp(38px,6.2vw,92px);
  --d3:clamp(31px,4.3vw,60px);--d4:clamp(23px,2.5vw,38px);--d5:21px;
  --t-lead:clamp(17px,1.5vw,21px);--t-body:17px;--t-sm:15px;--t-xs:13px;--t-xxs:11px;
  --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:48px;--s6:64px;--s7:96px;--s8:128px;
  --r-s:8px;--r-m:16px;--r-l:24px;--r-pill:999px;
  --shadow:0 1px 2px rgba(10,15,44,.04),0 8px 28px -12px rgba(10,15,44,.10);
  --maxw:1240px;
  /* ============================================================
     UNA SOLA COLUMNA — 🔴 medido, no supuesto.
     Había DOS maneras de armar una banda conviviendo en la misma página:
       A) padding en la banda + .wrap de --maxw adentro   → hero, closing, build
       B) max-width:--maxw CON el padding encima          → section, results, gallery
     Arriba de 1344px de ventana no dan lo mismo: a 1440 la miga de pan y el
     titular arrancaban en 100 y "The problem" en 152. Cincuenta y dos píxeles
     de diferencia entre dos secciones pegadas, invisibles hasta que ponés una
     regla al lado. Debajo de 1344 coinciden, así que en una notebook no se ve.
     --colbox le suma el padding al ancho máximo: así el patrón B da exactamente
     la misma columna que el A, y todo arranca donde arranca el titular.
     ============================================================ */
  --pad:clamp(20px, 6vw, 52px);
  --colbox:calc(var(--maxw) + 2 * var(--pad));
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);font-size:var(--t-body);color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased;line-height:1.6;text-rendering:optimizeLegibility}
img,video{display:block;max-width:100%}
a{color:inherit}

/* ============================================================
   TOP NAV — la MISMA pastilla flotante de la landing v3,
   pero ALINEADA a la columna de contenido en vez de centrada.

   🔴 Qué estaba mal: el nav viejo era una barra de tinta a sangre
   con `padding:16px clamp(18px,5vw,52px)`, así que el logo arrancaba
   a 52px del borde de la ventana — mientras que TODO lo de abajo
   (.hero .wrap, .section, .results, .closing) vive en una columna de
   --maxw centrada, que a 1440 arranca en 100. Dos alineaciones
   distintas, una encima de la otra, en las 8 páginas.

   Ahora la cápsula usa el mismo max-width y el mismo padding lateral
   que .section, así que su borde izquierdo cae exactamente donde
   arranca la miga de pan y el derecho donde termina la tarjeta.
   Y se esconde al bajar, igual que en la landing (ver su README).
   ============================================================ */
.nav{
  position:fixed;top:var(--s3);left:0;right:0;z-index:200;
  display:flex;justify-content:center;pointer-events:none;
  padding:0 var(--pad);
  transition:transform .28s cubic-bezier(.2,.6,.2,1),opacity .2s ease;
}
@media(min-width:900px){.nav{top:var(--s4)}}
.nav.oculto{transform:translateY(calc(-100% - var(--s4)));opacity:0}
@media(prefers-reduced-motion:reduce){.nav{transition:none}}

.nav-cap{
  pointer-events:auto;position:relative;
  width:100%;max-width:var(--maxw);
  display:flex;align-items:center;gap:var(--s3);
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  backdrop-filter:saturate(180%) blur(16px);
  border:1px solid rgba(10,15,44,.06);
  border-radius:var(--r-pill);
  padding:8px 8px 8px var(--s3);
  box-shadow:0 1px 2px rgba(10,15,44,.04),0 12px 32px -18px rgba(10,15,44,.4);
}
@media(max-width:560px){.nav-cap{gap:var(--s2);padding-left:var(--s2)}}
/* min-height 44: el <a> abrazaba sólo al logo, que mide 22px de alto. */
.nav-cap .brand{display:flex;align-items:center;flex:0 0 auto;min-height:44px;text-decoration:none}
.nav-cap .brand img{height:22px;width:auto;display:block}
/* 🔴 En teléfono el wordmark completo (124px) desbordaba la cápsula 29px: el
   botón azul quedaba colgando fuera del vidrio. Se recorta al isotipo con
   object-fit, sin archivo nuevo y sin tocar la marca.
   Los 26px están MEDIDOS pintando el SVG en un canvas: la marca ocupa
   x∈[7,5 · 136,8] del viewBox y el texto arranca en 164,6 — 26px a 22 de alto
   cae justo en la mitad de ese hueco, así que no se cuela ni un pedazo de la C. */
@media(max-width:560px){
  .nav-cap .brand img{width:26px;object-fit:cover;object-position:left center}
}
@media(max-width:400px){.nav-cap{gap:14px}}

/* El selector de producto: UN control que resuelve las dos cosas que faltaban
   —volver al catálogo y saltar de un servicio a otro— sin salir de la página. */
.nav-switch{position:relative;margin-right:auto}
.nav-switch > button{
  display:inline-flex;align-items:center;gap:7px;
  font-family:inherit;font-size:var(--t-xs);font-weight:400;color:var(--ink-2);
  background:none;border:none;cursor:pointer;padding:11px 4px;min-height:44px;
  white-space:nowrap;transition:color .16s ease;
}
.nav-switch > button:hover{color:var(--ink)}
.nav-switch > button svg{width:11px;height:11px;flex:0 0 auto;transition:transform .18s ease}
.nav-switch[data-open="true"] > button{color:var(--ink)}
.nav-switch[data-open="true"] > button svg{transform:rotate(180deg)}

.nav-menu{
  position:absolute;top:calc(100% + 9px);left:-10px;z-index:10;
  /* 320 medido, no elegido: la fila más larga ("Outbound Intelligence" +
     "REVENUE AUDIT") necesita 302px. Con 288 rompía en dos líneas y esa sola
     fila quedaba de 64px contra 44 de las otras siete. */
  min-width:320px;max-width:calc(100vw - 32px);padding:6px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-m);
  box-shadow:0 1px 2px rgba(10,15,44,.04),0 24px 48px -20px rgba(10,15,44,.45);
  /* `visibility` además de la opacidad: si no, los 8 links del menú cerrado
     siguen en el orden de tabulación y el teclado cae en enlaces invisibles. */
  opacity:0;transform:translateY(-6px);pointer-events:none;visibility:hidden;
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
}
.nav-switch[data-open="true"] .nav-menu{opacity:1;transform:none;pointer-events:auto;visibility:visible}
@media(prefers-reduced-motion:reduce){.nav-menu{transition:none}}
.nav-menu a{
  display:flex;align-items:center;gap:12px;min-height:44px;
  padding:8px 12px;border-radius:10px;text-decoration:none;
  font-size:var(--t-sm);color:var(--ink);transition:background .14s ease;
}
.nav-menu a:hover{background:var(--card-2)}
.nav-menu a .r{margin-left:auto;font-size:var(--t-xxs);letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap}
.nav-menu a[aria-current="page"]{color:var(--accent);font-weight:500}
.nav-menu a[aria-current="page"] .r{color:var(--accent)}
.nav-menu .all{margin-bottom:5px;padding-bottom:12px;
  border-bottom:1px solid var(--line-soft);border-radius:10px 10px 0 0;color:var(--ink-2)}

/* Selector de idioma. Apunta al PAR EXACTO de la página, nunca a la portada:
   mandar a alguien a la home porque cambió de idioma le hace perder el lugar,
   que es justo el reclamo que resolvimos con el selector de producto.
   El idioma actual no es un link (sería un link a la página en la que estás):
   es un <span aria-current>. En teléfono se esconde y queda sólo la salida. */
.lang{flex:0 0 auto;display:inline-flex;align-items:center;
  font-size:var(--t-xxs);letter-spacing:.06em;font-weight:500;white-space:nowrap}
.lang > a,.lang > span[aria-current]{display:inline-flex;align-items:center;
  justify-content:center;min-height:44px;padding:0 9px;border-radius:var(--r-s);
  text-decoration:none;transition:color .16s ease,background .16s ease}
.lang > span[aria-current]{color:var(--ink)}
.lang > a{color:var(--muted)}
.lang > a:hover{color:var(--ink);background:var(--card-2)}
.lang .bar{color:var(--line);font-weight:300}
@media(max-width:520px){.lang > span[aria-current],.lang .bar{display:none}}

.nav .cta{flex:0 0 auto;background:var(--accent);color:#fff;
  padding:11px 22px;border-radius:var(--r-pill);font-size:var(--t-xs);font-weight:500;
  text-decoration:none;white-space:nowrap;min-height:44px;
  display:inline-flex;align-items:center;transition:background .18s ease}
.nav .cta:hover{background:var(--accent-dark)}
@media(max-width:520px){.nav .cta{padding:11px 16px}}
/* 🔴 EL BOTÓN SE SALÍA DE LA CÁPSULA EN TELÉFONO, y ya se salía ANTES del
   selector de idioma: medido a 375px, "Back to catalog →" colgaba 12px fuera del
   vidrio y en español ("Volver al catálogo →") 36. No es un problema de idioma
   sino de presupuesto: a 375 la cápsula deja 305px de contenido y entre logo,
   selector de producto, selector de idioma y botón no entran.
   La salida es decir menos, no achicar la letra: el botón lleva las dos
   etiquetas y el CSS elige. Es el mismo patrón que .cta-mini del sitio principal.
   ⚠️ Con un <span> adentro, el regex de casePage() en el worker DEJA de matchear
   si pide [^<]* — ya está cambiado a [\s\S]*?, pero si alguien lo revierte el
   portal deja de sacar el Calendly y nadie se entera. */
.nav .cta .cta-mini{display:none}
@media(max-width:560px){
  .nav .cta .cta-full{display:none}
  .nav .cta .cta-mini{display:inline}
  .nav .cta{padding:11px 14px}
  .lang > a{padding:0 6px}
}

/* En teléfono el menú NO se puede anclar al botón: nace después del logo, y
   320px desde ahí se salen 82px de la pantalla. Con position:static el ancla
   pasa a ser la cápsula (que es relative), y left/right lo pegan a sus bordes
   — sin números mágicos que se despeguen si cambia el alto del nav. */
@media(max-width:640px){
  .nav-switch{position:static}
  .nav-menu{left:0;right:0;min-width:0;max-width:none}
}

/* Los anclas no pueden aterrizar debajo de una barra fija. */
[id]{scroll-margin-top:112px}

/* ---------- hero (home + detail share base) ---------- */
/* El piso de 112px NO es estético: el nav ahora es fijo y mide ~60px con
   24-32px de aire arriba. Con el 72px de antes, en teléfono la cápsula se
   comía la miga de pan. Medido: borde inferior del nav a 86px a 375px. */
.hero{position:relative;background:var(--ink);color:#fff;
  padding:clamp(112px,12vw,150px) var(--pad) clamp(64px,9vw,110px);overflow:hidden}
/* el radial de cyan se fue con el degradé */
.hero .wrap{max-width:var(--maxw);margin:0 auto;position:relative}
.kicker{font-size:var(--t-xxs);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-light)}
.hero h1{font-family:var(--serif);font-weight:500;font-size:var(--d2);line-height:1.05;letter-spacing:-.038em;margin-top:var(--s3);max-width:16ch;text-wrap:balance}
.hero h1 .ac{font-style:italic}
.hero p.lead{margin-top:var(--s3);font-size:var(--t-lead);font-weight:300;line-height:1.5;color:rgba(255,255,255,.86);max-width:62ch;text-wrap:pretty}
.hero .stats{margin-top:40px;display:flex;flex-wrap:wrap;gap:clamp(24px,5vw,56px)}
.hero .stat .n{font-family:var(--serif);font-weight:500;font-size:var(--d4);color:#fff;line-height:1.14;letter-spacing:-.026em}
.hero .stat .l{margin-top:6px;font-size:13px;letter-spacing:.04em;color:rgba(255,255,255,.7)}
.hero .herobtns{margin-top:38px;display:flex;flex-wrap:wrap;gap:14px}

/* ---------- buttons ---------- */
.btn{padding:14px 28px;border-radius:var(--r-pill);font-weight:500;text-decoration:none;font-size:var(--t-sm);letter-spacing:-.005em;display:inline-flex;align-items:center;gap:8px;border:1px solid transparent;transition:background .18s ease,border-color .18s ease,color .18s ease}
.btn.primary{background:#fff;color:var(--ink)}
.btn.primary:hover{background:#eef1f7}
.btn.ghost{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.42);color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.btn.ghost:hover{background:rgba(255,255,255,.24);border-color:rgba(255,255,255,.7)}
.btn.solid{background:var(--accent);color:#fff}
.btn.solid:hover{background:var(--accent-dark)}
.btn.line{border-color:var(--line);color:var(--ink);background:#fff}
.btn.line:hover{border-color:var(--ink-2);background:rgba(10,15,44,.02)}


/* ===========================================================
   HOME · product card grid
   =========================================================== */
.gallery{max-width:var(--colbox);margin:0 auto;padding:clamp(48px,8vw,88px) var(--pad)}
.gallery .head{max-width:62ch}
.gallery .head .eyebrow{margin-bottom:12px}
.gallery h2{font-family:var(--serif);font-weight:500;color:var(--ink);font-size:var(--d3);line-height:1.06;letter-spacing:-.030em;max-width:18ch;text-wrap:balance}
.gallery h2 .ac{font-style:italic}
.gallery .head p{margin-top:14px;font-size:clamp(15px,1.9vw,18px);line-height:1.6;color:var(--ink-soft)}

.cards{margin-top:clamp(30px,4vw,46px);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,24px)}
@media(max-width:860px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cards{grid-template-columns:1fr}}

.card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line-soft);
  border-radius:var(--r-m);overflow:hidden;text-decoration:none;color:inherit;transition:box-shadow .22s ease,border-color .22s ease}
.card:hover{box-shadow:var(--shadow);border-color:#d3dae6}
.card .thumb{position:relative;aspect-ratio:16/10;background:var(--ink);overflow:hidden;display:flex;align-items:center;justify-content:center}
.card .thumb img,.card .thumb video{width:100%;height:100%;object-fit:cover}
.card .thumb .ph{display:flex;flex-direction:column;align-items:center;gap:10px;color:rgba(255,255,255,.92);padding:18px;text-align:center}
.card .thumb .ph svg{width:40px;height:40px;opacity:.9}
.card .thumb .badge{position:absolute;top:12px;left:12px;display:inline-flex;align-items:center;gap:6px;
  font-size:11px;font-weight:600;letter-spacing:.04em;color:#fff;background:rgba(10,15,44,.6);
  border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(4px);padding:5px 10px;border-radius:20px}
.card .thumb .badge .dot{width:7px;height:7px;border-radius:50%;background:#34c759;box-shadow:0 0 0 3px rgba(52,199,89,.25)}
.card .body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.card .cat{font-size:var(--t-xxs);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--kicker)}
.card .nm{font-family:var(--serif);font-weight:500;font-size:var(--d5);line-height:1.22;letter-spacing:-.018em;color:var(--ink)}
.card .nm .ac{font-style:italic}
.card .ds{font-size:14.5px;line-height:1.55;color:var(--ink-soft);flex:1}
.card .more{margin-top:6px;font-size:14px;font-weight:600;color:var(--accent);display:inline-flex;align-items:center;gap:6px}
.card:hover .more{gap:10px}
.card .more svg{width:15px;height:15px;transition:transform .2s}

/* ===========================================================
   DETAIL · sections
   =========================================================== */
.section{max-width:var(--colbox);margin:0 auto;padding:clamp(48px,8vw,96px) var(--pad)}
.section + .section{border-top:1px solid var(--hairline)}
.eyebrow{font-size:var(--t-xxs);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--kicker);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.eyebrow .idx{font-family:var(--serif);font-style:italic;color:var(--accent);text-transform:none;letter-spacing:0;font-size:var(--t-sm)}
.section h2{font-family:var(--serif);font-weight:500;color:var(--ink);font-size:var(--d3);
  line-height:1.08;letter-spacing:-.01em;margin-top:12px;max-width:20ch}
.section h2 .ac{font-style:italic}
.section .sub{margin-top:16px;font-family:var(--serif);font-style:italic;font-size:clamp(17px,2.4vw,23px);
  line-height:1.5;color:var(--accent);max-width:58ch}
.section .lede{margin-top:16px;font-size:clamp(15px,1.9vw,18px);line-height:1.65;color:var(--ink);max-width:64ch}
.section .lede + .lede{margin-top:14px}

/* detail hero: text + main media side by side */
.dhero .wrap{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,48px)}
@media(min-width:880px){.dhero .wrap{grid-template-columns:1.02fr .98fr;align-items:center}}
.dhero .htext .crumb{font-size:13px;color:var(--accent-light);margin-bottom:18px}
.dhero .htext .crumb a{text-decoration:none;opacity:.85}
.dhero .htext .crumb a:hover{opacity:1;text-decoration:underline}
.dhero .htext h1{font-family:var(--serif);font-weight:500;font-size:var(--d2);line-height:1.05;letter-spacing:-.038em;margin-top:var(--s3);max-width:15ch;text-wrap:balance}
.dhero .htext h1 .ac{font-style:italic}
.dhero .htext p.lead{margin-top:20px;font-size:clamp(16px,2.1vw,20px);line-height:1.55;color:rgba(255,255,255,.86);max-width:54ch}
.dhero .htext .pills{margin-top:22px;display:flex;flex-wrap:wrap;gap:8px}
.dhero .htext .pills span{font-size:13px;font-weight:500;color:#eaf2f9;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);border-radius:22px;padding:7px 14px}
.dhero .htext .hstats{margin-top:30px;padding-top:26px;border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;gap:22px 38px}
.dhero .htext .hstats .s .n{font-family:var(--serif);font-size:clamp(24px,3.2vw,36px);color:#fff;line-height:1}
.dhero .htext .hstats .s .n .ac{font-style:italic}
.dhero .htext .hstats .s .l{margin-top:7px;font-size:12.5px;line-height:1.35;color:rgba(255,255,255,.66);letter-spacing:.02em;max-width:18ch}
.dhero .hmedia{position:relative}

/* feature rows: alternating media + text */
.feature{margin-top:clamp(34px,5vw,64px);display:grid;grid-template-columns:1fr;gap:clamp(22px,3.5vw,46px);align-items:center}
@media(min-width:880px){.feature{grid-template-columns:1fr 1fr}
  .feature.flip .fmedia{order:2}.feature.flip .ftext{order:1}}
.feature:first-of-type{margin-top:clamp(28px,4vw,44px)}
.ftext h3{font-family:var(--serif);font-weight:500;font-size:clamp(21px,2.8vw,29px);line-height:1.15;color:var(--navy-deep)}
.ftext .step{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.ftext p{margin-top:12px;font-size:clamp(15px,1.9vw,17px);line-height:1.65;color:var(--ink-soft)}
.ftext p b{font-weight:600;color:var(--navy-deep)}
.ftext ul{margin-top:14px;display:flex;flex-direction:column;gap:10px;list-style:none}
.ftext ul li{position:relative;padding-left:28px;font-size:15px;line-height:1.5;color:var(--ink)}
.ftext ul li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:50%;
  background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/13px no-repeat}

/* capability grid */
.caps{margin-top:clamp(28px,4vw,44px);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,20px)}
@media(max-width:780px){.caps{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.caps{grid-template-columns:1fr}}
.cap-c{background:var(--card-2);border:1px solid var(--card-border);border-radius:14px;padding:22px 22px 24px}
.cap-c .ic{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  background:var(--ink);color:#fff;margin-bottom:14px}
.cap-c .ic svg{width:22px;height:22px}
.cap-c h4{font-size:16px;font-weight:600;color:var(--navy-deep);line-height:1.25}
.cap-c p{margin-top:8px;font-size:14px;line-height:1.55;color:var(--ink-soft)}

/* results strip */
.results{background:var(--ink);color:#fff}
.results .wrap{max-width:var(--colbox);margin:0 auto;padding:clamp(44px,6vw,72px) var(--pad)}
.results .eyebrow{color:var(--accent-light)}
.results h2{font-family:var(--serif);font-weight:500;font-size:var(--d4);line-height:1.14;letter-spacing:-.026em;margin-top:var(--s2);max-width:20ch;text-wrap:balance}
.results h2 .ac{font-style:italic}
.results .rgrid{margin-top:clamp(28px,4vw,42px);display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px)}
@media(max-width:720px){.results .rgrid{grid-template-columns:1fr 1fr}}
.results .r .n{font-family:var(--serif);font-weight:500;font-size:var(--d3);line-height:1.06;letter-spacing:-.030em}
.results .r .l{margin-top:8px;font-size:13.5px;line-height:1.45;color:rgba(255,255,255,.72)}

/* tags */
.tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.tag{font-size:13px;font-weight:500;color:var(--blue);background:#E7EFF6;border:1px solid #CFE0EC;border-radius:20px;padding:6px 14px}

/* ---------- media cards (shared) ---------- */
.frame{border-radius:16px;overflow:hidden;background:#0a0f2c;box-shadow:0 24px 60px -28px rgba(10,15,44,.5);border:1px solid var(--card-border)}
.frame video{width:100%;height:auto;display:block;background:#0a0f2c}
.frame img{width:100%;height:auto;display:block}
.frame.live{aspect-ratio:16/10;position:relative;background:var(--card-2)}
.frame.live iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.cap{margin-top:12px;font-size:13.5px;color:var(--ink-soft);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cap .dot{width:8px;height:8px;border-radius:50%;background:#34c759;box-shadow:0 0 0 4px rgba(52,199,89,.18)}
.cap a{color:var(--accent);font-weight:600;text-decoration:none}
.cap a:hover{text-decoration:underline}
.cap.light{color:rgba(255,255,255,.7)}.cap.light a{color:var(--accent-light)}

/* before/after pair */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:520px){.ba{grid-template-columns:1fr}}
.ba .col .lbl{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--kicker);
  margin-bottom:8px;display:flex;align-items:center;gap:7px}
.ba .col .lbl .d{width:7px;height:7px;border-radius:2px}
.ba .col .lbl .raw{background:#b9c6d3}.ba .col .lbl .out{background:var(--accent)}
.ba .frame video{aspect-ratio:9/16;object-fit:cover}
.ba .frame video:fullscreen{object-fit:contain;background:#000}
.ba .frame video:-webkit-full-screen{object-fit:contain;background:#000}

/* person header (Grace / Ethan) */
.person{display:flex;align-items:center;gap:18px;margin-top:18px}
.person .pic{position:relative;flex:0 0 auto}
.person .pic img{width:96px;height:96px;border-radius:50%;object-fit:cover;object-position:50% 28%;
  border:3px solid #fff;box-shadow:0 12px 30px -10px rgba(10,15,44,.55),0 0 0 1px var(--card-border)}
.person .pic::after{content:"";position:absolute;inset:-6px;border-radius:50%;
  border:1.5px solid var(--accent-light);opacity:.55;pointer-events:none}
@media(max-width:520px){.person .pic img{width:78px;height:78px}}
.person .pn{font-family:var(--serif);font-weight:500;font-size:var(--d5);color:#fff;line-height:1.22;letter-spacing:-.018em}
.person .pr{font-size:13.5px;color:var(--ink-soft);margin-top:4px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.person .live{margin-left:4px;display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;
  letter-spacing:.06em;color:#12704b;background:#e7f6ed;border:1px solid #bfe6cd;padding:4px 10px;border-radius:20px}
.person .live .dot{width:7px;height:7px;border-radius:50%;background:#34c759}
/* on dark hero */
.dhero .person .pn{color:#fff}.dhero .person .pr{color:rgba(255,255,255,.78)}
.dhero .person .pic img{box-shadow:0 12px 30px -10px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.2)}

/* audio demo player */
.audio{background:var(--card);border:1px solid var(--card-border);border-radius:16px;padding:22px 22px 20px}
.audio .head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.audio .ico{width:44px;height:44px;border-radius:50%;flex:0 0 auto;background:var(--ink);
  display:flex;align-items:center;justify-content:center;color:#fff}
.audio .ico svg{width:22px;height:22px}
.audio .t{font-weight:600;color:var(--navy-deep);font-size:15px}
.audio .t span{display:block;font-weight:400;color:var(--ink-soft);font-size:13px;margin-top:2px}
.audio audio{width:100%;display:block}
.audio .ctx{margin-top:14px;padding-top:14px;border-top:1px solid var(--card-border);
  font-family:var(--serif);font-style:italic;font-size:14.5px;line-height:1.5;color:var(--ink-soft)}
.audio .ctx b{font-style:normal;font-weight:600;color:var(--navy-deep)}

/* screenshot slot placeholder */
.shot{aspect-ratio:16/10;border-radius:16px;overflow:hidden;border:1.5px dashed #d3dae6;
  background:repeating-linear-gradient(135deg,#f5f7fa 0 14px,#eef0f5 14px 28px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px}
.shot b{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:#a9bccb;font-weight:600;margin-bottom:8px}
.shot span{font-family:var(--serif);font-style:italic;color:#90a4b6;font-size:15px;max-width:34ch;line-height:1.45}
.shot code{font-style:normal;background:#e4edf4;color:#5a7a96;padding:1px 6px;border-radius:5px;font-size:13px}

/* ===========================================================
   IMPORTER · designed data mockups (not screenshots)
   =========================================================== */
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.mock{background:#fff;border:1px solid var(--card-border);border-radius:18px;
  box-shadow:0 26px 60px -34px rgba(10,15,44,.5);padding:clamp(18px,2.4vw,26px);color:var(--ink)}
.mock + .mock{margin-top:14px}
.mock .mhead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}
.mock .ttl{font-family:var(--serif);font-size:21px;color:var(--navy-deep);line-height:1.15}
.mock .sub{font-size:12.5px;color:var(--ink-soft);margin-top:3px}
.mock .flag{font-size:11px;font-weight:700;letter-spacing:.08em;color:#fff;background:var(--navy-deep);
  border-radius:7px;padding:4px 9px;display:inline-block;margin-bottom:8px}

.chipv{font-size:11px;font-weight:700;letter-spacing:.05em;border-radius:20px;padding:5px 11px;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.chipv .d{width:7px;height:7px;border-radius:50%;background:currentColor}
.chipv.ok{color:#12704b;background:#e7f6ed;border:1px solid #bfe6cd}
.chipv.warn{color:#7a4a08;background:#fbf0dc;border:1px solid #f0d6a8}
.chipv.bad{color:#983f2b;background:#fde9e7;border:1px solid #f3c6c0}
.chipc{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--kicker);
  background:#eef4f8;border:1px solid var(--card-border);border-radius:20px;padding:5px 11px;white-space:nowrap}

/* stat grid */
.mstats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.mstats .st{background:var(--card-2);border:1px solid var(--card-border);border-radius:12px;padding:13px 14px}
.mstats .st .n{font-family:var(--serif);font-size:23px;color:var(--navy-deep);line-height:1}
.mstats .st .n .up{color:#12704b;font-size:13px;font-family:var(--sans);font-weight:600}
.mstats .st .l{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--kicker);margin-top:7px;line-height:1.3}

/* sparkline */
.spark{margin-top:4px}
.spark svg{width:100%;height:64px;display:block}

/* competition lenses */
.lens{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0;border-top:1px solid var(--hairline)}
.lens:first-of-type{border-top:0;padding-top:4px}
.lens .ln{display:flex;align-items:center;gap:11px;min-width:0}
.lens .ico2{width:32px;height:32px;border-radius:9px;flex:0 0 auto;background:#eef4f8;border:1px solid var(--card-border);
  display:flex;align-items:center;justify-content:center;color:var(--blue);font-weight:700;font-size:12px}
.lens .nm2{font-size:13.5px;font-weight:600;color:var(--navy-deep)}
.lens .meta2{font-size:11.5px;color:var(--ink-soft);margin-top:1px}

/* economics ladder */
.econ{display:flex;align-items:stretch;gap:10px}
.econ .eb{flex:1;background:var(--card-2);border:1px solid var(--card-border);border-radius:12px;padding:14px;text-align:center}
.econ .eb .n{font-family:var(--serif);font-size:24px;color:var(--navy-deep);line-height:1}
.econ .eb .n.gold{color:var(--fill-ink)}
.econ .eb .l{font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--kicker);margin-top:7px}
.econ .ar{display:flex;align-items:center;color:var(--accent);font-size:18px}
.taxrow{margin-top:14px;padding-top:14px;border-top:1px solid var(--hairline);display:flex;flex-wrap:wrap;gap:8px}
.taxrow .t2{font-size:11px;color:var(--ink-soft);background:#f2f6fa;border:1px solid var(--card-border);border-radius:8px;padding:5px 9px}
.taxrow .t2 b{color:var(--navy-deep)}

/* supplier / RFQ list */
.supp{display:flex;flex-direction:column;gap:10px}
.supp .s2{display:flex;gap:11px;align-items:flex-start;background:var(--card-2);border:1px solid var(--card-border);border-radius:12px;padding:12px 13px}
.supp .s2 .ix{font-family:var(--serif);color:var(--accent);font-size:14px;flex:0 0 auto;line-height:1.5}
.supp .s2 .tx{font-size:12.5px;line-height:1.45;color:var(--ink-soft)}
.supp .s2 .tx b{color:var(--navy-deep);font-weight:600}

/* home card · importer candidate mini-mock thumb */
.impthumb{width:88%;background:#fff;border-radius:13px;box-shadow:0 18px 40px -22px rgba(0,0,0,.55);padding:14px 15px;color:var(--ink)}
.impthumb .top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:12px}
.impthumb .nm{font-family:var(--serif);font-size:15.5px;color:var(--navy-deep);line-height:1.12}
.impthumb .ct{font-size:10px;color:var(--ink-soft);margin-top:3px}
.impthumb .vd{flex:0 0 auto;font-size:9.5px;font-weight:700;letter-spacing:.03em;color:#12704b;background:#e7f6ed;
  border:1px solid #bfe6cd;border-radius:14px;padding:4px 9px;white-space:nowrap}
.impthumb .row{display:flex;gap:8px}
.impthumb .row .c{flex:1;background:var(--card-2);border:1px solid var(--card-border);border-radius:9px;padding:8px 6px;text-align:center}
.impthumb .row .c .n{font-family:var(--serif);font-size:15px;color:var(--navy-deep);line-height:1}
.impthumb .row .c .l{font-size:8px;letter-spacing:.06em;text-transform:uppercase;color:var(--kicker);margin-top:4px}

/* ===== mock extras: upload, preview, agenda, quote ===== */
.upz{border:1.5px dashed #d3dae6;border-radius:12px;background:var(--card-2);padding:24px 22px;text-align:center}
.upz .ic{width:48px;height:48px;border-radius:13px;margin:0 auto 13px;background:#eef4f8;border:1px solid var(--card-border);
  display:flex;align-items:center;justify-content:center;color:var(--blue)}
.upz .ic svg{width:24px;height:24px}
.upz .fn{font-weight:600;color:var(--navy-deep);font-size:14px}
.upz .fm{font-size:11.5px;color:var(--ink-soft);margin-top:3px}
.prog{height:7px;border-radius:6px;background:#e3ebf2;overflow:hidden;margin-top:16px}
.prog i{display:block;height:100%;background:var(--accent);border-radius:6px}
.upnote{margin-top:12px;font-size:12px;color:var(--ink-soft);display:flex;align-items:center;justify-content:center;gap:7px}
.upnote .ok{color:#12704b;font-weight:700}

/* dark video preview with burned-in caption */
.preview{position:relative;border-radius:12px;overflow:hidden;background:var(--ink);
  aspect-ratio:16/10;display:flex;align-items:flex-end;justify-content:center;padding:18px}
/* el velo de cyan se fue con el degradé */
.preview .cap2{position:relative;z-index:2;font-weight:800;font-size:clamp(15px,2.4vw,20px);text-transform:uppercase;
  text-align:center;color:#fff;line-height:1.15;letter-spacing:.01em;text-shadow:0 2px 10px rgba(0,0,0,.55)}
.preview .cap2 em{color:var(--gold);font-style:normal}
.preview .ply{position:absolute;z-index:2;top:13px;left:13px;font-size:11px;font-weight:600;color:rgba(255,255,255,.85);
  background:rgba(0,0,0,.35);border-radius:20px;padding:4px 11px;display:inline-flex;align-items:center;gap:6px}
.preview .ply .rec{width:7px;height:7px;border-radius:50%;background:#ff4d4d}

/* generic data rows (agenda / quote) */
.rows{display:flex;flex-direction:column}
.rowi{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-top:1px solid var(--hairline)}
.rowi:first-child{border-top:0;padding-top:2px}
.rowi .l1{font-size:13.5px;color:var(--navy-deep);font-weight:600}
.rowi .l2{font-size:11.5px;color:var(--ink-soft);margin-top:2px}
.rowi .rt{font-family:var(--serif);font-size:17px;color:var(--navy-deep);white-space:nowrap}
.rowtot{display:flex;align-items:center;justify-content:space-between;margin-top:12px;padding-top:13px;border-top:2px solid var(--card-border)}
.rowtot .l1{font-weight:700;color:var(--navy-deep);font-size:13.5px}
.rowtot .rt{font-family:var(--serif);font-size:21px;color:var(--navy-deep)}
.daylbl{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:16px 0 2px}
.daylbl:first-of-type{margin-top:2px}
.tdot{width:8px;height:8px;border-radius:50%;background:#34c759;flex:0 0 auto}

/* ===== outbound intelligence: doc viewer + message mock ===== */
.frame.doc{aspect-ratio:auto;height:clamp(420px,58vh,560px);background:#f1efe9;position:relative}
.frame.doc iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.msg{background:#fff;border:1px solid var(--card-border);border-radius:16px;
  box-shadow:0 26px 60px -34px rgba(10,15,44,.5);padding:20px 20px 22px;color:var(--ink)}
.msg .mfrom{display:flex;align-items:center;gap:11px;padding-bottom:13px;border-bottom:1px solid var(--hairline);margin-bottom:14px}
.msg .av{width:38px;height:38px;border-radius:50%;flex:0 0 auto;background:var(--accent);
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:13px}
.msg .mf{min-width:0}
.msg .mf .nm{font-size:13.5px;font-weight:600;color:var(--navy-deep)}
.msg .mf .em{font-size:11.5px;color:var(--ink-soft)}
.msg .subj{font-size:13px;color:var(--ink-soft);margin-bottom:10px}
.msg .subj b{color:var(--navy-deep)}
.msg .body{font-size:14px;line-height:1.62;color:var(--ink)}
.msg .body p{margin-bottom:10px}
.msg .body .hl{background:#fbf0dc;border-bottom:1px solid #f0d6a8;border-radius:3px;padding:0 3px;font-weight:600;color:var(--navy-deep)}
.msg .body .money{color:var(--green,#12704b);font-weight:700}
.msg .sig{margin-top:6px;color:var(--ink-soft);font-size:13px}

/* ===== web & automations: browser mock, automation flow ===== */
.browser{border-radius:14px;overflow:hidden;border:1px solid var(--card-border);box-shadow:0 26px 60px -34px rgba(10,15,44,.5);background:#fff}
.browser .bbar{display:flex;align-items:center;gap:11px;padding:10px 13px;background:#eef2f6;border-bottom:1px solid var(--card-border)}
.browser .bdots{display:flex;gap:5px}
.browser .bdots i{width:9px;height:9px;border-radius:50%;background:#cdd8e2;display:block}
.browser .burl{flex:1;font-size:11px;color:var(--ink-soft);background:#fff;border:1px solid var(--card-border);border-radius:7px;padding:5px 11px}
.snav{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--hairline)}
.snav .slogo{font-family:var(--serif);font-weight:600;color:var(--navy-deep);font-size:14px}
.snav .slinks{font-size:11px;color:var(--ink-soft)}
.shero{display:grid;grid-template-columns:1.05fr .95fr;gap:16px;padding:22px 16px 24px;align-items:center}
@media(max-width:520px){.shero{grid-template-columns:1fr}}
.shero .sh-h{font-family:var(--serif);font-size:21px;line-height:1.1;color:var(--navy-deep)}
.shero .sh-p{font-size:12.5px;color:var(--ink-soft);margin-top:8px;line-height:1.45}
.shero .sh-btn{display:inline-block;margin-top:14px;background:var(--navy-deep);color:#fff;font-size:12px;font-weight:600;padding:9px 14px;border-radius:8px}
.sform{background:var(--card-2);border:1px solid var(--card-border);border-radius:11px;padding:14px}
.sform .sf-t{font-size:12px;font-weight:700;color:var(--navy-deep);margin-bottom:10px}
.sform .sf-i{height:26px;border-radius:7px;background:#fff;border:1px solid var(--card-border);margin-bottom:8px}
.sform .sf-b{height:30px;border-radius:7px;background:var(--accent);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}

/* automation sequence (vertical) */
.flowv{display:flex;flex-direction:column}
.flowv .fv{display:flex;align-items:flex-start;gap:12px;padding:13px 0}
.flowv .fv + .fv{border-top:1px dashed var(--card-border)}
.flowv .fk{flex:0 0 auto;min-width:50px;font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--accent);padding-top:2px}
.flowv .ft{font-size:13.5px;color:var(--navy-deep);line-height:1.4}
.flowv .ft b{font-weight:600}

/* home card · web mini-browser thumb */
.webthumb{width:88%;background:#fff;border-radius:12px;overflow:hidden;border:1px solid var(--card-border);box-shadow:0 18px 40px -22px rgba(0,0,0,.55)}
.webthumb .wb{display:flex;gap:5px;padding:9px 11px;background:#eef2f6;border-bottom:1px solid var(--card-border)}
.webthumb .wb i{width:8px;height:8px;border-radius:50%;background:#cdd8e2;display:block}
.webthumb .wbody{padding:16px 16px 18px}
.webthumb .wh{font-family:var(--serif);font-size:16px;color:var(--navy-deep);line-height:1.12}
.webthumb .wp{height:7px;width:72%;border-radius:4px;background:#e3ebf2;margin-top:9px}
.webthumb .wrow{display:flex;gap:8px;margin-top:13px;align-items:center;flex-wrap:wrap}
.webthumb .wbtn{background:var(--navy-deep);color:#fff;font-size:10px;font-weight:700;padding:7px 11px;border-radius:7px}
.webthumb .wtag{font-size:10px;color:var(--ink-soft);background:var(--card-2);border:1px solid var(--card-border);border-radius:20px;padding:5px 9px}

/* ===== home card · LinkedIn post thumb (autopublisher) ===== */
.lithumb{width:90%;background:#fff;border-radius:12px;box-shadow:0 18px 40px -22px rgba(0,0,0,.55);padding:13px 14px;text-align:left}
.lithumb .li-h{display:flex;gap:9px;align-items:center}
.lithumb .li-av{width:34px;height:34px;border-radius:8px;flex:0 0 auto;background:#101828;color:#fff;font-weight:700;font-size:15px;
  display:flex;align-items:center;justify-content:center}
.lithumb .li-n{font-size:12.5px;font-weight:700;color:var(--navy-deep);display:flex;align-items:center;gap:5px}
.lithumb .li-n .in{font-size:9px;background:#0a66c2;color:#fff;border-radius:3px;padding:1px 3px;font-weight:800}
.lithumb .li-m{font-size:10px;color:var(--ink-soft);margin-top:1px}
.lithumb .li-txt{font-size:11.5px;color:var(--ink);margin-top:10px;line-height:1.42}
.lithumb .li-txt b{color:var(--navy-deep)}
.lithumb .li-img{height:58px;border-radius:8px;margin-top:10px;background:var(--ink);
  display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.85);font-size:10px;font-weight:600;letter-spacing:.04em}
.lithumb .li-foot{display:flex;align-items:center;gap:6px;margin-top:9px;font-size:10px;color:var(--ink-soft)}
.lithumb .li-react{color:#0a66c2}

/* ===== home card · search-trend thumb (importer) ===== */
.trendthumb{width:90%;background:#fff;border-radius:13px;box-shadow:0 18px 40px -22px rgba(0,0,0,.55);padding:15px 16px 13px}
.trendthumb .tt-h{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.trendthumb .tt-t{font-size:13px;font-weight:700;color:var(--navy-deep);line-height:1.15}
.trendthumb .tt-s{font-size:10px;color:var(--ink-soft);margin-top:2px}
.trendthumb .tt-up{flex:0 0 auto;font-size:12.5px;font-weight:800;color:#12704b;white-space:nowrap}
.trendthumb svg{width:100%;height:78px;display:block;margin-top:10px}
.trendthumb .tt-f{font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--kicker);font-weight:600;margin-top:8px}

/* ---------- "build anything" + live agent ---------- */
.build{position:relative;overflow:hidden;background:var(--ink);
  color:#fff;padding:clamp(64px,10vw,120px) var(--pad)}
.build::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:none}
.build .wrap{max-width:var(--maxw);margin:0 auto;position:relative}
.build .kicker{color:var(--accent-light)}
.build h2{font-family:var(--serif);font-weight:400;font-size:clamp(30px,5vw,54px);line-height:1.06;
  letter-spacing:-.01em;margin-top:14px;max-width:18ch}
.build h2 .ac{font-style:italic;color:var(--accent-light)}
.build .lead{margin-top:20px;font-size:clamp(16px,2.2vw,20px);line-height:1.55;color:rgba(255,255,255,.86);max-width:60ch}
.build .anylist{margin-top:26px;display:flex;flex-wrap:wrap;gap:10px}
.build .anylist span{font-size:14px;font-weight:500;color:#eaf2f9;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);border-radius:22px;padding:8px 16px}

/* live agent card */
.agentcard{margin-top:clamp(34px,5vw,48px);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  border-radius:22px;padding:clamp(26px,4vw,40px);display:flex;align-items:center;gap:clamp(22px,4vw,40px);
  backdrop-filter:blur(8px);flex-wrap:wrap}
.agentcard .left{flex:1 1 280px;min-width:260px}
.agentcard .tagline{font-family:var(--serif);font-size:clamp(20px,2.6vw,27px);line-height:1.25;color:#fff}
.agentcard .tagline .ac{font-style:italic;color:var(--accent-light)}
.agentcard .sub{margin-top:12px;font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.72);max-width:42ch}
.agentcard .right{flex:0 0 auto;display:flex;flex-direction:column;align-items:stretch;gap:16px;min-width:260px}
.agentid{display:flex;align-items:center;gap:14px}
.agentid .who{display:flex;flex-direction:column;gap:3px;min-width:0}
.agentid .who .nm{font-family:var(--serif);font-size:23px;color:#fff;line-height:1}
.agentid .who .rl{font-size:12.5px;color:rgba(255,255,255,.7);display:flex;align-items:center;gap:7px}
.agentid .who .rl .livedot{width:7px;height:7px;border-radius:50%;background:#34c759;box-shadow:0 0 0 3px rgba(52,199,89,.22)}

.orb{position:relative;flex:0 0 auto;width:68px;height:68px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--accent);box-shadow:0 14px 36px -12px rgba(45,102,160,.85)}
.orb svg{width:28px;height:28px;color:#fff;position:relative;z-index:2}
.orb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 26%;border-radius:50%;z-index:3}
.orb::before,.orb::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--accent-light);opacity:0}
.agentw.connecting .orb::before{animation:ping 1.3s ease-out infinite;opacity:.7}
.agentw.live .orb{background:#12704b;box-shadow:0 0 0 0 rgba(52,199,89,.5)}
.agentw.live .orb::before{animation:ping 1.6s ease-out infinite;opacity:.7;border-color:#9ff0bd}
.agentw.live.speaking .orb{animation:bob .6s ease-in-out infinite}
@keyframes ping{0%{transform:scale(1);opacity:.7}80%,100%{transform:scale(1.55);opacity:0}}
@keyframes bob{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}

.talkbtn{appearance:none;border:0;cursor:pointer;font:inherit;font-weight:700;font-size:16px;letter-spacing:-.01em;
  background:#fff;color:var(--navy-deep);padding:15px 26px;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;transition:transform .15s,box-shadow .15s;box-shadow:0 10px 26px -12px rgba(0,0,0,.5)}
.talkbtn:hover{transform:translateY(-1px);box-shadow:0 14px 30px -12px rgba(0,0,0,.55)}
.talkbtn:disabled{opacity:.6;cursor:default;transform:none}
.talkbtn.end{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.55);box-shadow:none}
.agentw .status{font-size:13px;letter-spacing:.04em;color:rgba(255,255,255,.78);min-height:18px;text-align:center}
.agentw .hint{font-size:12px;color:rgba(255,255,255,.5);text-align:center;max-width:30ch}
.build .btns{margin-top:clamp(34px,5vw,44px);display:flex;flex-wrap:wrap;gap:14px}
@media(prefers-reduced-motion:reduce){.orb,.orb::before,.orb::after{animation:none!important}}

/* closing CTA */
.closing{background:var(--ink);color:#fff;
  padding:clamp(64px,10vw,120px) var(--pad)}
.closing .wrap{max-width:var(--maxw);margin:0 auto}
.closing .kicker{color:var(--accent-light)}
.closing h2{font-family:var(--serif);font-weight:400;font-size:clamp(28px,4.6vw,50px);line-height:1.08;max-width:18ch;margin-top:12px}
.closing h2 .ac{font-style:italic;color:var(--accent-light)}
.closing p{margin-top:18px;font-size:clamp(16px,2.2vw,20px);color:rgba(255,255,255,.86);max-width:54ch}
.closing .btns{margin-top:34px;display:flex;flex-wrap:wrap;gap:14px}

/* ============================================================
   "More of what we've built" — la salida lateral.

   🔴 El problema que resuelve: terminabas la historia de un producto y el
   único camino era volver al catálogo, scrollear y buscar otra tarjeta.
   Tres pasos para pasar de un servicio al siguiente, siete servicios.
   Acá los otros seis están al final de cada historia, a un click.
   Va DESPUÉS de .results y ANTES de .closing para que el CTA siga siendo
   lo último — y sobrevive dentro del portal, que borra .closing entera.
   ============================================================ */
.alsosee{max-width:var(--colbox);margin:0 auto;
  padding:clamp(44px,6vw,72px) var(--pad);border-top:1px solid var(--hairline)}
.alsosee .top{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap}
.alsosee .allink{margin-left:auto;font-size:var(--t-sm);color:var(--accent);
  text-decoration:none;white-space:nowrap;transition:color .16s ease}
.alsosee .allink:hover{color:var(--accent-dark);text-decoration:underline}
.alsogrid{margin-top:clamp(20px,2.6vw,28px);display:grid;
  grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:860px){.alsogrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.alsogrid{grid-template-columns:1fr}}
.alsogrid a{display:flex;flex-direction:column;gap:4px;padding:16px 18px 17px;
  border:1px solid var(--line);border-radius:var(--r-m);background:#fff;
  text-decoration:none;transition:border-color .18s ease,background .18s ease}
.alsogrid a:hover{border-color:var(--ink-2);background:rgba(10,15,44,.02)}
.alsogrid .an{font-family:var(--serif);font-weight:500;font-size:var(--d5);
  color:var(--ink);letter-spacing:-.022em;line-height:1.2}
.alsogrid .ad{font-size:var(--t-xs);line-height:1.5;color:var(--muted)}

/* Era #0a223f: el ÚNICO navy viejo que quedaba suelto. El resto de la página
   usa --ink #0a0f2c, así que el pie se leía como de otro sitio. */
footer{padding:28px max(var(--pad), calc((100% - var(--maxw)) / 2));background:var(--ink);color:rgba(255,255,255,.6);font-size:13px;
  display:flex;gap:14px;flex-wrap:wrap;align-items:center}
footer .brand{display:flex;align-items:center;gap:8px;color:#fff;font-weight:600;text-decoration:none}
footer .brand img{height:20px;width:auto;display:block}
footer a{color:rgba(255,255,255,.8);text-decoration:none}
footer .sep{opacity:.3}
footer .spacer{margin-left:auto}

/* ============================================================
   ÁREAS TÁCTILES — 44px es el mínimo de Apple y de la WCAG 2.2.
   Estos seis enlaces medían entre 16 y 24px de alto en teléfono: el logo
   del nav, la miga de pan, "All products →", y los tres del pie.
   El truco del padding con margen negativo agranda el área SIN mover nada:
   la caja crece 28px y el margen se los devuelve al flujo.
   ============================================================ */
.dhero .htext .crumb a{display:inline-block;padding:14px 0;margin:-14px 0}
.alsosee .allink{display:inline-flex;align-items:center;min-height:44px}
footer .brand{min-height:44px}
footer a{display:inline-flex;align-items:center;min-height:44px}
/* Los enlaces de epígrafe bajo las capturas ("… ↗") medían 22px. */
.cap a{display:inline-block;padding:11px 0;margin:-11px 0}
/* El "Grace" suelto adentro de un párrafo de outbound-intelligence NO se toca:
   la WCAG 2.2 (2.5.8) exceptúa los enlaces en medio de una oración, y agrandarlo
   descuadraría el interlineado del texto. */

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}


/* ===========================================================
   🔴 SOBRE TINTA LA ESCALA SE INVIERTE
   Dos colores pensados para fondo blanco terminaron sobre #0a0f2c:
     .eyebrow .idx  — el acento #2563eb da 3.64 (AA pide 4.5)
     .ba .col .lbl  — el gris de volanta #5a647c da 3.18
   No alcanza con que el color sea "del sistema": el sistema tiene un
   valor para papel y otro para tinta. Mismo error que ya había pasado
   con las pestañas de "Fair question" en la landing.
   =========================================================== */
.results .eyebrow .idx,.build .eyebrow .idx,.dhero .eyebrow .idx{color:rgba(255,255,255,.86)}
.ba .col .lbl{color:rgba(255,255,255,.72)}