/* ═══════════════════════════════════════════════════════════════════════════
     mob-landing · CORE (N5 system / shadcn visual language) · inline verbatim
     ═══════════════════════════════════════════════════════════════════════════ */
  :root{
    --background:oklch(1 0 0);              --foreground:oklch(0.147 0.004 49.25);
    --card:oklch(1 0 0);                    --card-foreground:oklch(0.147 0.004 49.25);
    --primary:oklch(0.488 0.243 264.376);   --primary-foreground:oklch(0.97 0.014 254.604);
    --secondary:oklch(from var(--primary) 0.968 0.014 h); --secondary-foreground:oklch(0.21 0.006 285.885);
    --muted:oklch(from var(--primary) 0.972 0.016 h);      --muted-foreground:oklch(from var(--primary) 0.553 0.013 h);
    --accent:oklch(from var(--primary) 0.972 0.016 h);     --accent-foreground:oklch(0.216 0.006 56.043);
    --destructive:oklch(0.577 0.245 27.325);
    --border:oklch(from var(--primary) 0.923 0.009 h);     --input:oklch(from var(--primary) 0.923 0.009 h);
    --ring:oklch(0.709 0.01 56.259);
    --series-blue:oklch(0.700 0.149 246.66);--series-indigo:oklch(0.556 0.132 273.79);
    --series-teal:oklch(0.656 0.107 185.34);--series-green:oklch(0.718 0.142 144.89);
    --series-amber:oklch(0.862 0.168 88.31);--series-orange:oklch(0.797 0.164 69.62);
    --series-red:oklch(0.654 0.193 25.14);--series-pink:oklch(0.639 0.210 5.28);
    --series-purple:oklch(0.576 0.194 321.59);--series-grey:oklch(0.699 0.000 89.88);
    --success:var(--series-green);--warning:var(--series-amber);
    --info:var(--series-blue);--danger:var(--series-red);
    --radius:0.625rem;
    --radius-sm:calc(var(--radius) - 4px); --radius-md:calc(var(--radius) - 2px); --radius-lg:var(--radius);
    --radius-xl:calc(var(--radius) + 6px); --radius-2xl:calc(var(--radius) + 14px);
    --shadow-sm:0 1px 2px 0 rgb(0 0 0 / .05);
    --shadow-md:0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
    --shadow-lg:0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
    --shadow-xl:0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
    --ease-out:cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out:cubic-bezier(0.77, 0, 0.175, 1);
    --ease-drawer:cubic-bezier(0.32, 0.72, 0, 1);
    --dur-press:140ms; --dur-ui:200ms; --dur-panel:320ms; --dur-reveal:480ms;
    --density:1;
    --z-base:1; --z-sticky:100; --z-dropdown:200; --z-overlay:900;
    --z-modal:1000; --z-toast:1100; --z-tooltip:1200;
    --canvas:oklch(0.984 0.001 250);
    /* fondo de las ventanas de producto: el mock de sparring y las 3 de "Como funciona" */
    --mock-surface:oklch(0.945 0.02 120);
    --font-title:'Manrope','Work Sans',system-ui,sans-serif;
    --font-body:'DM Sans','Work Sans',system-ui,sans-serif;
    --font-mono:'Geist Mono',ui-monospace,'SFMono-Regular',monospace;
    --space-xs:4px; --space-sm:8px; --space-md:16px; --space-lg:32px; --space-xl:64px;
    --fs-display:clamp(2.5rem, 1.4rem + 4.6vw, 4.25rem);
    --fs-h1:clamp(2rem, 1.3rem + 3vw, 3rem);
    --fs-h2:clamp(1.6rem, 1.2rem + 1.8vw, 2.25rem);
    --fs-h3:clamp(1.25rem, 1.05rem + 0.9vw, 1.5rem);
    --fs-lead:clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem);
    --fs-body-web:1rem; --fs-small:0.875rem; --fs-eyebrow:0.8125rem;
    --content-max:1200px; --content-wide:1360px; --content-narrow:720px;
    --gutter:clamp(1.25rem, 5vw, 2rem);
    --section-y:calc(clamp(3.5rem, 8vw, 7rem) * var(--density));
    --gap:calc(clamp(1rem, 3vw, 2rem) * var(--density));
    --nav-h:64px; --nav-h-scrolled:60px;
  }
  .dark{
    --canvas:oklch(0.185 0.004 49);
    --mock-surface:oklch(0.22 0.008 120);
    --background:oklch(0.147 0.004 49.25);  --foreground:oklch(0.985 0.001 106.423);
    --card:oklch(0.216 0.006 56.043);       --card-foreground:oklch(0.985 0.001 106.423);
    --primary:oklch(0.488 0.243 264.376);   --primary-foreground:oklch(0.97 0.014 254.604);
    --secondary:oklch(from var(--primary) 0.30 0.03 h); --secondary-foreground:oklch(0.985 0 0);
    --muted:oklch(from var(--primary) 0.285 0.028 h);      --muted-foreground:oklch(from var(--primary) 0.709 0.01 h);
    --accent:oklch(from var(--primary) 0.285 0.028 h);     --accent-foreground:oklch(0.985 0.001 106.423);
    --destructive:oklch(0.704 0.191 22.216);
    --border:oklch(from var(--primary) 0.85 0.04 h / 14%);            --input:oklch(from var(--primary) 0.85 0.04 h / 17%);
    --ring:oklch(0.553 0.013 58.071);
  }
  *{box-sizing:border-box} *{margin:0}
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
  body{font-family:var(--font-body);font-size:var(--fs-body-web);line-height:1.6;
    background:var(--background);color:var(--foreground);-webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;overflow-x:hidden;transition:background .2s,color .2s}
  img,svg,video,canvas,picture{max-width:100%;height:auto;display:block}
  a{color:inherit;text-decoration:none}
  button,input,select,textarea{font:inherit}
  :where(h1,h2,h3,h4,h5,h6){line-height:1.15;text-wrap:balance}
  p{text-wrap:pretty}
  ul,ol{list-style:none;padding:0}
  .lucide{width:1em;height:1em;stroke-width:2;vertical-align:middle;flex-shrink:0}
  :focus-visible{outline:2px solid var(--ring);outline-offset:2px}
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
  .modal-title,.alert-title,.es-title{font-family:var(--font-title)}
  .tag,.helper,.eyebrow{font-family:var(--font-mono)}
  .container{width:100%;max-width:var(--content-max);margin-inline:auto;padding-inline:var(--gutter)}
  .container--wide{max-width:var(--content-wide)}
  .container--narrow{max-width:var(--content-narrow)}
  .section{padding-block:var(--section-y)}
  .section--sm{padding-block:clamp(2.5rem,5vw,4rem)}
  .section--muted{background:var(--muted)}
  .section--canvas{background:var(--canvas)}
  .section--card{background:var(--card)}
  .section--primary{background:var(--primary);color:var(--primary-foreground)}
  .section--primary .eyebrow,.section--primary .lead{color:oklch(from var(--primary-foreground) l c h / .85)}
  .section--dark{background:oklch(0.20 0.01 264);color:oklch(0.985 0 0)}
  .section--dark .lead{color:oklch(0.985 0 0 / .7)}
  .section--bordered{border-top:1px solid var(--border)}
  .section-head{max-width:var(--content-narrow);margin-inline:auto;text-align:center;margin-bottom:clamp(2rem,5vw,3.5rem)}
  .section-head--left{margin-inline:0;text-align:left}
  .section-head .eyebrow{margin-bottom:14px}
  .section-head .lead{margin-top:16px}
  .grid{display:grid;gap:var(--gap)}
  [data-density="compact"]{--density:.85}
  [data-density="airy"]{--density:1.25}
  .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))}
  .grid--auto{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
  .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,5vw,4rem);align-items:center}
  .split-text,.split-media{min-width:0}
  .hero{padding-block:clamp(3.5rem,7vw,6.5rem)}
  .hero-media,.alt-media{display:flex;align-items:center;justify-content:center;color:var(--muted-foreground)}
  .stack{display:flex;flex-direction:column}
  .stack>*+*{margin-top:var(--stack-gap,1rem)}
  .cluster{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cluster-gap,12px)}
  .cluster--center{justify-content:center}
  .eyebrow{display:inline-block;font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--primary)}
  .h-display{font-family:var(--font-title);font-size:var(--fs-display);font-weight:800;letter-spacing:-.02em;color:var(--foreground)}
  .h1{font-family:var(--font-title);font-size:var(--fs-h1);font-weight:800;letter-spacing:-.02em;color:var(--foreground)}
  .h2{font-family:var(--font-title);font-size:var(--fs-h2);font-weight:700;letter-spacing:-.015em;color:var(--foreground)}
  .h3{font-family:var(--font-title);font-size:var(--fs-h3);font-weight:700;letter-spacing:-.01em;color:var(--foreground)}
  .lead{font-size:var(--fs-lead);line-height:1.55;color:var(--muted-foreground)}
  .hl{color:var(--primary)}
  .hl-underline{background:linear-gradient(transparent 62%,oklch(from var(--primary) l c h / .22) 0);padding:0 .05em}
  .site-nav{position:sticky;top:0;z-index:var(--z-sticky);height:var(--nav-h);display:flex;align-items:center;
    background:oklch(from var(--background) l c h / 0);backdrop-filter:saturate(150%) blur(0);
    transition:height .2s,background .2s,box-shadow .2s,border-color .2s;border-bottom:1px solid transparent}
  .site-nav.is-scrolled{height:var(--nav-h-scrolled);background:oklch(from var(--background) l c h / .82);
    backdrop-filter:saturate(150%) blur(10px);border-bottom-color:var(--border);box-shadow:var(--shadow-sm)}
  .site-nav .container{display:flex;align-items:center;gap:20px;width:100%}
  .nav-brand{display:flex;align-items:center;gap:10px;flex-shrink:0;font-family:var(--font-title);font-weight:700;font-size:1.1rem}
  .nav-brand svg,.nav-brand img{height:28px;width:auto}
  .nav-links{display:flex;align-items:center;gap:4px;margin-left:auto}
  .nav-link{padding:8px 12px;border-radius:var(--radius-md);font-size:var(--fs-small);font-weight:500;
    color:var(--muted-foreground);cursor:pointer;transition:color .15s,background .15s;white-space:nowrap}
  .nav-link:hover{color:var(--foreground);background:var(--muted)}
  .nav-link.active{color:var(--foreground)}
  .nav-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
  .nav-links+.nav-actions{margin-left:0}
  .nav-links:not(:has(~.nav-actions)){margin-left:auto}
  .nav-burger{display:none;width:40px;height:40px;border:none;background:none;color:var(--foreground);
    align-items:center;justify-content:center;cursor:pointer;border-radius:var(--radius-md);margin-left:auto}
  .nav-burger:hover{background:var(--muted)}
  .nav-burger .lucide{font-size:24px}
  .nav-mobile{position:fixed;inset:var(--nav-h) 0 0;z-index:calc(var(--z-sticky) - 1);background:var(--background);
    padding:24px var(--gutter) 40px;display:flex;flex-direction:column;gap:6px;
    transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;overflow-y:auto}
  body.nav-open .nav-mobile{transform:translateY(0);opacity:1;pointer-events:auto}
  body.nav-open{overflow:hidden}
  .nav-mobile .nav-link{font-size:1.1rem;padding:14px 12px;border-radius:var(--radius-md)}
  .nav-mobile .nav-actions{flex-direction:column;align-items:stretch;gap:12px;margin-top:20px}
  .nav-mobile .nav-actions .btn{width:100%}
  .card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-xl);
    padding:calc(clamp(1.25rem,3vw,1.75rem) * var(--density));box-shadow:var(--shadow-sm)}
  .card--flush{padding:0;overflow:hidden}
  .card--interactive{transition:transform var(--dur-ui) var(--ease-out),box-shadow var(--dur-ui) var(--ease-out),border-color var(--dur-ui) var(--ease-out);cursor:pointer}
  @media (hover:hover) and (pointer:fine){
    .card--interactive:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:oklch(from var(--primary) l c h / .35)}
  }
  .card--interactive:active{transform:translateY(-1px) scale(.995)}
  .card--muted{background:var(--muted);border-color:transparent;box-shadow:none}
  .card-ico{width:48px;height:48px;border-radius:var(--radius-lg);display:inline-flex;align-items:center;justify-content:center;
    background:oklch(from var(--primary) 0.95 0.04 h);color:var(--primary);margin-bottom:16px}
  .card-ico .lucide{font-size:24px}
  .dark .card-ico{background:oklch(from var(--primary) 0.30 0.06 h)}
  .card-title{font-family:var(--font-title);font-size:var(--fs-h3);font-weight:700;margin-bottom:8px}
  .card-text{color:var(--muted-foreground);line-height:1.6}
  .site-footer{background:var(--canvas);border-top:1px solid var(--border);padding-block:clamp(2.5rem,6vw,4.5rem) 2rem}
  /* Marca + los grupos de enlaces. El diseno de PRO-1972 son tres grupos
     (Producto, Recursos, Empresa) pero Recursos todavia no tiene contenido
     detras (PRO-2015), asi que hoy van dos y el repeat() vuelve a 3 cuando entre.
     Al reflowear, lo primero que baja es el bloque de marca y los grupos se
     mantienen juntos en una fila. */
  .footer-grid{display:grid;grid-template-columns:1.5fr repeat(3,minmax(0,1fr));gap:clamp(1.5rem,4vw,3rem)}
  .footer-col h4{font-size:var(--fs-small);font-weight:600;margin-bottom:14px;color:var(--foreground)}
  .footer-col a{display:block;padding:5px 0;font-size:var(--fs-small);color:var(--muted-foreground)}
  .footer-col a:hover{color:var(--foreground)}
  /* Leyenda de Paddle como Merchant of Record: fila propia y centrada entre los
     enlaces y el pie de abajo. Va antes del borde de .footer-bottom, no dentro:
     esa linea es la de identidad y copyright, y el aviso de Paddle es otra cosa.
     El tope de 80ch con margin auto es lo que mantiene el bloque
     centrado: sin el, el texto se estira de borde a borde y el centrado no se ve. */
  .footer-mor{margin:clamp(2rem,5vw,3rem) auto 0;max-width:80ch;text-align:center;
    font-size:var(--fs-eyebrow);line-height:1.6;color:var(--muted-foreground)}
  .footer-mor+.footer-bottom{margin-top:1.25rem}
  .footer-bottom{margin-top:clamp(2rem,5vw,3rem);padding-top:2rem;border-top:1px solid var(--border);
    font-size:var(--fs-small);color:var(--muted-foreground)}
  .btn{--_bg:transparent;--_fg:var(--foreground);--_bd:transparent;
    display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;user-select:none;cursor:pointer;
    font-family:inherit;font-size:14px;font-weight:500;line-height:1;height:36px;padding:0 16px;border-radius:var(--radius-md);
    background:var(--_bg);color:var(--_fg);border:1px solid var(--_bd);
    transition:background .15s,border-color .15s,box-shadow .15s,opacity .15s,transform var(--dur-press) var(--ease-out)}
  .btn .lucide{font-size:18px}
  .btn--default{--_bg:var(--primary);--_fg:var(--primary-foreground);box-shadow:var(--shadow-sm)}
  .btn--default:hover,.btn--default.st-hover{--_bg:oklch(from var(--primary) calc(l - 0.04) c h)}
  .btn--outline{--_bg:var(--background);--_fg:var(--foreground);--_bd:var(--border);box-shadow:var(--shadow-sm)}
  .btn--outline:hover,.btn--outline.st-hover{--_bg:var(--muted)}
  .btn--secondary{--_bg:var(--secondary);--_fg:var(--secondary-foreground)}
  .btn--secondary:hover{--_bg:oklch(from var(--secondary) calc(l - 0.03) c h)}
  .btn--ghost{--_bg:transparent;--_fg:var(--foreground)}
  .btn--ghost:hover{--_bg:var(--muted)}
  .btn--link{--_bg:transparent;--_fg:var(--primary);height:auto;padding:0}
  .btn--link:hover{text-decoration:underline;text-underline-offset:4px}
  .btn--sm{height:32px;padding:0 12px;font-size:13px;border-radius:var(--radius-sm)}
  .btn--lg{height:40px;padding:0 24px;font-size:15px}
  .btn--xl{height:52px;padding:0 32px;font-size:16px;border-radius:var(--radius-lg)}
  .btn--xl .lucide{font-size:20px}
  .btn--icon{width:36px;height:36px;padding:0}
  .btn:not(.btn--link):active{transform:scale(.97)}
  .input{width:100%;height:40px;padding:0 12px;font-family:inherit;font-size:15px;color:var(--foreground);
    background:var(--background);border:1px solid var(--input);border-radius:var(--radius-md);
    box-shadow:var(--shadow-sm);transition:border-color .15s,box-shadow .15s;outline:none}
  .input::placeholder{color:var(--muted-foreground)}
  .input:focus{border-color:var(--ring);box-shadow:0 0 0 3px oklch(from var(--ring) l c h / .45)}
  .tag{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:400;letter-spacing:.4px;
    text-transform:uppercase;padding:3px 9px;border-radius:var(--radius-sm);line-height:1.4;white-space:nowrap}
  .tag .lucide{font-size:14px}
  .tag--default{background:var(--muted);color:var(--muted-foreground)}
  .tag--success{background:oklch(from var(--series-green) 0.95 0.04 h);color:oklch(from var(--series-green) 0.42 c h)}
  .tag--warning{background:oklch(from var(--series-amber) 0.95 0.05 h);color:oklch(from var(--series-amber) 0.42 c h)}
  .tag--info{background:oklch(from var(--series-blue) 0.95 0.04 h);color:oklch(from var(--series-blue) 0.42 c h)}
  .tag--teal{background:oklch(from var(--series-teal) 0.95 0.04 h);color:oklch(from var(--series-teal) 0.40 c h)}
  .tag--purple{background:oklch(from var(--series-purple) 0.95 0.04 h);color:oklch(from var(--series-purple) 0.42 c h)}
  .tag--dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
  .avatar{position:relative;width:32px;height:32px;border-radius:50%;background:var(--muted);color:var(--muted-foreground);
    display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:500;flex-shrink:0}
  .avatar--lg{width:40px;height:40px;font-size:14px}
  .accordion{border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;background:var(--card)}
  .acc-item+.acc-item{border-top:1px solid var(--border)}
  .acc-trigger{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;
    padding:18px 20px;background:none;border:none;cursor:pointer;text-align:left;
    font-family:var(--font-title);font-size:1.05rem;font-weight:600;color:var(--foreground);transition:background var(--dur-ui) var(--ease-out)}
  .acc-trigger:hover{background:var(--muted)}
  .acc-trigger .lucide{color:var(--muted-foreground);transition:transform .2s;flex-shrink:0}
  .acc-item.open .acc-trigger .lucide{transform:rotate(180deg)}
  .acc-panel{max-height:0;overflow:hidden;transition:max-height .25s ease}
  .acc-item.open .acc-panel{max-height:480px}
  .acc-panel-inner{padding:0 20px 20px;color:var(--muted-foreground);line-height:1.6}
  .logo-cloud{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(24px,5vw,56px)}
  .stat{text-align:center}
  .stat-value{font-family:var(--font-title);font-size:clamp(2.25rem,1.5rem+2.5vw,3.25rem);font-weight:800;
    letter-spacing:-.02em;color:var(--foreground);line-height:1}
  .section--primary .stat-value,.section--dark .stat-value{color:inherit}
  .stat-label{margin-top:8px;font-size:var(--fs-small);color:var(--muted-foreground)}
  .section--primary .stat-label{color:oklch(from var(--primary-foreground) l c h / .8)}
  .measure{padding-top:20px;border-top:1px solid oklch(from var(--primary-foreground) l c h / .24)}
  .measure-ic{display:inline-flex;color:oklch(from var(--primary-foreground) l c h / .92);margin-bottom:16px}
  .measure-ic .lucide{width:22px;height:22px;stroke-width:1.6}
  .measure-fig{font-family:var(--font-title);font-size:clamp(1.5rem,1.2rem + 1vw,1.9rem);font-weight:700;letter-spacing:-.015em;line-height:1.05;color:inherit}
  .measure-lab{margin-top:10px;font-size:var(--fs-small);line-height:1.55;color:oklch(from var(--primary-foreground) l c h / .82)}
  .measure-split{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
  .measure-photo{border-radius:18px;overflow:hidden;box-shadow:0 28px 70px oklch(from var(--foreground) l c h / .28)}
  .measure-photo img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
  .measure-grid2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,3vw,2.4rem)}
  @media (max-width:860px){ .measure-split{grid-template-columns:1fr;gap:2.2rem} .measure-photo img{aspect-ratio:16/10} }
  @media (max-width:480px){ .measure-grid2{grid-template-columns:1fr} }
  /* MEASUREMENT · full-bleed peek (workspace→dojo, mask follows the cursor) + title and figures baked in */
  .measure-holo{position:relative;margin-block:clamp(2.5rem,6vw,5rem)}
  .measure-holo .holo-stage{position:relative;width:100%;height:clamp(560px,56vw,880px);overflow:hidden}
  @media (hover:hover) and (pointer:fine){ .measure-holo .holo-stage{cursor:crosshair} }
  .holo-base,.holo-reveal{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
  .holo-reveal{z-index:1;clip-path:circle(var(--hr,18%) at var(--hcx,50%) var(--hcy,52%));-webkit-clip-path:circle(var(--hr,18%) at var(--hcx,50%) var(--hcy,52%))}
  .holo-reveal.intro{transition:clip-path 1.3s cubic-bezier(.22,1,.36,1);-webkit-transition:-webkit-clip-path 1.3s cubic-bezier(.22,1,.36,1)}
  .holo-reveal.peek{transition:clip-path .22s cubic-bezier(.22,1,.36,1);-webkit-transition:-webkit-clip-path .22s cubic-bezier(.22,1,.36,1)}
  .holo-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,oklch(from var(--background) l c h / .8) 0%,oklch(from var(--background) l c h / 0) 30%,oklch(from var(--background) l c h / 0) 70%,oklch(from var(--background) l c h / .45) 100%)}
  .holo-title{position:absolute;top:0;left:0;right:0;z-index:3;text-align:center;pointer-events:none;padding:clamp(1.5rem,3.6vw,2.6rem) clamp(1.2rem,5vw,3rem) 0}
  .holo-title .h1{font-size:clamp(1.5rem,3.1vw,2.5rem);line-height:1.08;max-width:20ch;margin-inline:auto;text-shadow:0 1px 24px oklch(from var(--background) l c h / .78),0 1px 5px oklch(from var(--background) l c h / .55)}
  .holo-title .kicker{text-shadow:0 1px 14px oklch(from var(--background) l c h / .85),0 0 4px oklch(from var(--background) l c h / .6)}
  .holo-cards{position:absolute;inset:0;pointer-events:none;z-index:4}
  .holo-card{position:absolute;display:flex;gap:10px;align-items:flex-start;width:min(26%,244px);
    background:oklch(from var(--background) l c h / .58);
    -webkit-backdrop-filter:blur(13px) saturate(1.3);backdrop-filter:blur(13px) saturate(1.3);
    border:1px solid oklch(from var(--primary) l c h / .5);border-radius:13px;padding:12px 14px;
    box-shadow:0 12px 36px oklch(from var(--foreground) l c h / .28), 0 0 22px oklch(from var(--primary) l c h / .22), inset 0 0 0 1px oklch(from var(--primary) l c h / .12)}
  .holo-card .hc-ic{display:inline-flex;flex-shrink:0;color:var(--primary)}
  .holo-card .hc-ic .lucide{width:20px;height:20px;stroke-width:1.7}
  .holo-card figcaption{display:flex;flex-direction:column;gap:3px}
  .holo-card b{font-family:var(--font-title);font-size:.98rem;font-weight:700;letter-spacing:-.01em;color:var(--foreground)}
  .holo-card figcaption span{font-size:.76rem;line-height:1.45;color:var(--muted-foreground)}
  .hc-1{top:36%;left:24%}
  .hc-2{top:36%;right:24%}
  .hc-3{bottom:9%;left:27%}
  .hc-4{bottom:9%;right:27%}
  /* hologram-style entrance (blur + scale + rise), with the site stagger */
  .js .holo-cards>*{opacity:0;transform:translateY(12px) scale(.97);filter:blur(6px);
    transition:opacity .6s var(--ease-out),transform .6s var(--ease-out),filter .6s var(--ease-out);will-change:opacity,transform,filter}
  .holo-cards.is-visible>*{opacity:1;transform:none;filter:none}
  @media (max-width:900px){ .hc-1,.hc-2{top:32%} .hc-1,.hc-3{left:10%} .hc-2,.hc-4{right:10%} .holo-card{width:min(34%,220px)} }
  @media (max-width:760px){
    .measure-holo .holo-stage{height:clamp(420px,92vw,560px)}
    .holo-title .h1{font-size:1.6rem}
    .holo-cards{position:static;display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px clamp(1rem,5vw,2rem) 0}
    .holo-card{position:static;width:auto}
  }
  @media (max-width:440px){ .holo-cards{grid-template-columns:1fr} }
  .text-center{text-align:center}
  .text-muted{color:var(--muted-foreground)}
  .mx-auto{margin-inline:auto}
  .mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}
  .full-w{width:100%}
  .js .reveal{opacity:0;transform:translateY(16px);transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out);will-change:opacity,transform}
  .reveal.is-visible{opacity:1;transform:none}
  .js .stagger>*{opacity:0;transform:translateY(16px);transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out)}
  .stagger.is-visible>*{opacity:1;transform:none}
  .stagger.is-visible>*:nth-child(1){transition-delay:0ms}
  .stagger.is-visible>*:nth-child(2){transition-delay:60ms}
  .stagger.is-visible>*:nth-child(3){transition-delay:120ms}
  .stagger.is-visible>*:nth-child(4){transition-delay:180ms}
  .stagger.is-visible>*:nth-child(5){transition-delay:240ms}
  .stagger.is-visible>*:nth-child(6){transition-delay:300ms}
  @media (max-width:1024px){
    .nav-links{display:none}.site-nav .nav-actions{display:none}.nav-burger{display:inline-flex}
    .grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
    /* la marca pasa a su propia fila y los grupos comparten la siguiente */
    .footer-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
    .footer-grid>:first-child{grid-column:1/-1}
  }
  @media (max-width:768px){
    .grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}.split{grid-template-columns:1fr}.split .split-media{order:-1}
  }
  @media (max-width:640px){
    .grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
    /* en movil los grupos van a 2 columnas y la marca a lo ancho: con los tres
       grupos a 320px cada columna mediria 77px, 'Diferenciales' se desborda y
       los enlaces largos parten en cuatro lineas. Aca van 2 + 1, con Empresa
       sola abajo, que es el mal menor. El grid-column:1/-1 de la marca ya viene
       del breakpoint de 1024px. */
    .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .btn--xl{width:100%}.cluster{width:100%}.cluster .btn{flex:1}
  }
  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
    .js .reveal,.js .stagger>*{opacity:1!important;transform:none!important}
    .card--interactive:hover,.btn:active{transform:none!important}
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     BRAND LAYER · DOJO by N5 · "The luminous dojo"
     Rebrand through tokens (everything is derived).
     Palette: paper + sage + crimson + sumi.
     ═══════════════════════════════════════════════════════════════════════════ */
  :root{
    /* raw brand palette (for details: ensō, seal, kanji, sage) */
    --dojo-cream:#EDE7DB; --dojo-cream-2:#F4F0E7; --dojo-cream-hi:#FAF7F0;
    --dojo-sage:#AEC0A3; --dojo-sage-deep:#94AB86; --dojo-sage-soft:#CBD6C0;
    --dojo-rose:#D6B2AB; --dojo-rose-soft:#E8D0CA;
    --dojo-crimson:#C4362D; --dojo-crimson-deep:#9E2A22;
    --dojo-ink:#2C2822; --dojo-ink-2:#4A443B; --dojo-ink-soft:#6E675C;
    --dojo-n5:#324f76; --dojo-n5-2:#3f6492;
    --font-jp:'Noto Serif JP',serif;

    /* mapped onto the system (light) */
    --background:oklch(0.958 0.012 84);          --foreground:oklch(0.265 0.008 66);
    --card:oklch(0.988 0.006 86);                --card-foreground:oklch(0.265 0.008 66);
    --primary:oklch(0.53 0.174 26);              --primary-foreground:oklch(0.975 0.01 84);
    --secondary:oklch(0.90 0.028 142);           --secondary-foreground:oklch(0.30 0.01 60);
    --muted:oklch(0.905 0.03 140);               --muted-foreground:oklch(0.505 0.012 74);
    --accent:oklch(0.93 0.03 40);                --accent-foreground:oklch(0.30 0.01 40);
    --border:oklch(0.87 0.014 78);               --input:oklch(0.87 0.014 78);
    --ring:oklch(0.60 0.12 26);
    --canvas:oklch(0.95 0.02 48);
  }
  .dark{
    --background:oklch(0.205 0.006 66);          --foreground:oklch(0.925 0.012 84);
    --card:oklch(0.255 0.007 62);                --card-foreground:oklch(0.925 0.012 84);
    --primary:oklch(0.60 0.17 27);               --primary-foreground:oklch(0.975 0.01 84);
    --secondary:oklch(0.33 0.018 142);           --secondary-foreground:oklch(0.94 0.01 84);
    --muted:oklch(0.31 0.012 130);               --muted-foreground:oklch(0.72 0.012 80);
    --accent:oklch(0.32 0.02 40);                --accent-foreground:oklch(0.93 0.01 84);
    --border:oklch(0.85 0.02 80 / 14%);          --input:oklch(0.85 0.02 80 / 18%);
    --ring:oklch(0.60 0.12 27);
    --canvas:oklch(0.18 0.005 60);
  }
  .section--dark{background:oklch(0.24 0.006 60);color:var(--dojo-cream-hi)}

  /* eyebrow slightly louder, with a crimson accent */
  .eyebrow{font-weight:500}

  /* ── Brand: seal (hanko) with kanji + wordmark ── */
  .nav-brand{gap:11px}
  .dojo-seal{width:34px;height:34px;flex-shrink:0;border-radius:9px;background:var(--primary);
    color:var(--dojo-cream-hi);display:grid;place-items:center;box-shadow:var(--shadow-sm);
    font-family:var(--font-jp);font-weight:700;font-size:19px;line-height:1;padding-bottom:1px}
  .dojo-word{display:flex;flex-direction:column;line-height:1;gap:2px}
  .dojo-word b{font-family:var(--font-title);font-weight:800;font-size:1.15rem;letter-spacing:.02em}
  .dojo-word .by{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
    color:var(--muted-foreground);display:flex;align-items:center;gap:4px}
  .n5mark{height:11px;width:auto;display:inline-block}
  .n5mark path{fill:var(--dojo-n5)}
  .n5mark path:nth-of-type(2),.n5mark path:nth-of-type(5),.n5mark path:nth-of-type(6),.n5mark path:nth-of-type(7){fill:var(--dojo-n5-2)}
  .dark .n5mark path{fill:#8fb0d8}
  .dark .n5mark path:nth-of-type(2),.dark .n5mark path:nth-of-type(5),.dark .n5mark path:nth-of-type(6),.dark .n5mark path:nth-of-type(7){fill:#a9c4e4}

  /* theme toggle */
  .theme-toggle{width:40px;height:40px;border-radius:var(--radius-md);border:1px solid var(--border);
    background:var(--card);color:var(--foreground);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,transform var(--dur-press) var(--ease-out)}
  .theme-toggle:hover{background:var(--muted)}
  .theme-toggle:active{transform:scale(.94)}
  .theme-toggle .lucide{font-size:19px}
  .theme-toggle .ic-sun{display:none}
  .dark .theme-toggle .ic-sun{display:inline-flex}
  .dark .theme-toggle .ic-moon{display:none}

  /* ── ensō (ink circle, brand motif) ── */
  .enso{position:absolute;pointer-events:none;z-index:0;color:var(--primary);opacity:.10}
  .enso path{fill:none;stroke:currentColor;stroke-width:9;stroke-linecap:round}

  /* ── kanji watermark ── */
  .kanji-wm{position:absolute;font-family:var(--font-jp);font-weight:200;color:var(--foreground);
    opacity:.045;line-height:.8;pointer-events:none;z-index:0;user-select:none}

  /* ── HERO ── */
  .hero{position:relative;overflow:hidden}
  .hero .container{position:relative;z-index:2}
  .hero .enso{width:min(70vw,620px);height:min(70vw,620px);right:-13%;top:-14%}
  .hero .kanji-wm{font-size:clamp(200px,34vw,460px);right:2%;bottom:-14%}
  .badge-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:22px}
  .hero .lead{max-width:42ch}
  .hero-note{margin-top:20px;font-size:var(--fs-small);color:var(--muted-foreground);display:flex;align-items:center;gap:8px}
  .hero-note .lucide{font-size:17px;color:var(--primary)}

  /* sparring mock-up */
  .mock{position:relative;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-2xl);
    box-shadow:var(--shadow-xl);overflow:hidden}
  .mock-bar{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--border)}
  .mock-dots{display:flex;gap:6px}.mock-dots i{width:10px;height:10px;border-radius:50%;background:var(--border)}
  .mock-title{font-size:13px;font-weight:600;margin-left:4px;font-family:var(--font-title)}
  .mock-title small{color:var(--muted-foreground);font-weight:400;font-family:var(--font-body)}
  .mock-body{padding:18px;display:flex;flex-direction:column;gap:13px;background:var(--mock-surface)}
  .bubble{max-width:84%;padding:11px 14px;border-radius:16px;font-size:13.5px;line-height:1.5;box-shadow:var(--shadow-sm)}
  .bubble .who{display:block;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px;opacity:.7}
  .bubble--ai{align-self:flex-start;background:var(--card);border:1px solid var(--border);border-bottom-left-radius:5px}
  .bubble--me{align-self:flex-end;background:var(--primary);color:var(--primary-foreground);border-bottom-right-radius:5px}
  .bubble--me .who{opacity:.85}
  .mock-score{display:flex;align-items:center;gap:14px;padding:15px 18px;border-top:1px solid var(--border);background:var(--card)}
  .score-ring{width:56px;height:56px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
    font-family:var(--font-title);font-weight:800;font-size:18px;color:var(--primary);
    background:conic-gradient(var(--primary) 0 87%, var(--border) 87% 100%)}
  .score-ring span{width:44px;height:44px;border-radius:50%;background:var(--card);display:grid;place-items:center}
  .score-meta{flex:1;min-width:0}
  .score-meta .st{font-size:13px;font-weight:600;font-family:var(--font-title)}
  .score-meta .sd{font-size:12px;color:var(--muted-foreground);margin-top:2px}
  .score-dims{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap}

  /* ── trust band ── */
  .trust-inner{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
  .trust-label{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-foreground);max-width:26ch}
  .trust-logos{display:flex;align-items:center;gap:clamp(18px,3.5vw,38px);flex-wrap:wrap}
  .trust-logos .tl{display:flex;align-items:center;gap:8px;font-family:var(--font-title);font-weight:700;font-size:1.05rem;color:var(--muted-foreground)}
  .trust-logos .tl .lucide{font-size:20px;color:var(--dojo-sage-deep)}

  /* ── manifesto: principle cards ── */
  .tenets{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
  .tenet{position:relative;padding:26px;border-radius:var(--radius-xl);border:1px solid var(--border);overflow:hidden}
  .tenet.a{background:var(--dojo-sage-soft)} .tenet.b{background:var(--dojo-rose-soft)} .tenet.c{background:var(--card)}
  .dark .tenet.a{background:oklch(0.30 0.02 142)} .dark .tenet.b{background:oklch(0.30 0.02 30)} .dark .tenet.c{background:var(--card)}
  .tenet .g{font-family:var(--font-jp);font-size:30px;color:var(--primary);line-height:1;display:block;margin-bottom:14px}
  .tenet h3{font-family:var(--font-title);font-size:1.15rem;font-weight:800;color:var(--dojo-ink)}
  .dark .tenet h3{color:var(--dojo-cream-hi)}
  .tenet p{margin-top:8px;font-size:var(--fs-small);line-height:1.6;color:var(--dojo-ink-2)}
  .dark .tenet p{color:oklch(0.85 0.01 84)}
  /* definitions of the name */
  .defs{display:flex;flex-direction:column;gap:14px}
  .def{display:grid;grid-template-columns:52px 1fr;gap:16px;align-items:start;padding-top:16px;border-top:1px solid var(--border)}
  .def .g{font-family:var(--font-jp);font-size:38px;color:var(--primary);line-height:1}
  .def .dt{font-size:var(--fs-small);line-height:1.55;color:var(--muted-foreground)}
  .def .dt b{color:var(--foreground);font-weight:700}

  /* ── how it works: step flow ── */
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1120px;margin-inline:auto}
  .step{display:flex;flex-direction:column;gap:14px;align-items:stretch}
  @media (max-width:760px){ .steps{grid-template-columns:1fr;max-width:520px} }
  .step-n{width:46px;height:46px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
    font-family:var(--font-title);font-weight:800;font-size:18px;background:var(--primary);color:var(--primary-foreground);box-shadow:var(--shadow-sm)}
  .step-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-xl);padding:16px;box-shadow:var(--shadow-sm);flex:1;display:flex;flex-direction:column;overflow:hidden}
  /* ── "Como funciona": la ventana animada de cada paso (PRO-2011) ─────────
     Reusa el lenguaje del mock de sparring -- barra, burbujas, tags -- para que
     las cuatro ventanas del sitio se lean como el mismo producto.

     Sin animacion la ventana muestra el RESULTADO, que es lo que promete el
     paso; el loop de 6s solo repone como se llego ahi. Por eso las piezas que
     son puro proceso (la barra de carga, el "armando el plan", los tres puntos
     de tipeo) van display:none y solo aparecen mientras corre.

     El disparador es la clase .is-playing, no :hover: en tactil no hay hover y
     el mismo estado tiene que poder encenderse al entrar en pantalla. Quien
     entra sin JS se queda en el resultado, que es el estado util.

     TODO adentro se mide en --u, no en px, y esa es la decision que sostiene la
     ventana: la caja es 16/10, asi que su alto sale del ancho de la columna, y
     entre 760px y 1120px de viewport las columnas se angostan hasta ~215px. Con
     medidas fijas el contenido no entraba y el chat perdia la ultima burbuja
     -- justo la del remate. Con --u atado a cqw la ventana escala entera, como
     una captura: se ve igual de proporcionada a 215px que a 355px. El diseno
     esta dibujado a 355px de ancho, asi que --u es 1px a ese ancho y cada
     numero de abajo se lee como el px del diseno. */
  .step-demo{--u:0.2817cqw;container-type:inline-size;
    order:-1;margin:-16px -16px 14px;aspect-ratio:16/10;position:relative;overflow:hidden;
    display:flex;flex-direction:column;background:var(--card);border-bottom:1px solid var(--border)}
  .step-demo .mock-bar{flex-shrink:0;gap:calc(var(--u)*8);padding:calc(var(--u)*8) calc(var(--u)*11)}
  .step-demo .mock-dots{gap:calc(var(--u)*5)}
  .step-demo .mock-dots i{width:calc(var(--u)*7);height:calc(var(--u)*7)}
  .step-demo .mock-title{font-size:calc(var(--u)*11);margin-left:calc(var(--u)*2)}
  .demo-body{flex:1;min-height:0;overflow:hidden;background:var(--mock-surface);
    padding:calc(var(--u)*9);display:flex;flex-direction:column;gap:calc(var(--u)*6)}

  /* paso 1: el documento que entra y el plan que se arma */
  .demo-doc{display:flex;align-items:center;gap:calc(var(--u)*8);background:var(--card);
    border:1px solid var(--border);border-radius:calc(var(--u)*9);padding:calc(var(--u)*7) calc(var(--u)*8)}
  .demo-file{width:calc(var(--u)*26);height:calc(var(--u)*26);flex-shrink:0;display:grid;place-items:center;
    border-radius:calc(var(--u)*7);background:oklch(from var(--primary) l c h / .12);color:var(--primary);
    font-family:var(--font-title);font-weight:800;font-size:calc(var(--u)*9.5)}
  .demo-dn{font-family:var(--font-title);font-weight:700;font-size:calc(var(--u)*11.5);color:var(--foreground)}
  .demo-dm{font-size:calc(var(--u)*10);color:var(--muted-foreground)}
  .demo-load{height:calc(var(--u)*4);border-radius:99px;background:var(--border);overflow:hidden}
  .demo-load i{display:block;height:100%;width:0;border-radius:99px;background:var(--primary)}
  .demo-arm{align-items:center;gap:calc(var(--u)*6);font-family:var(--font-mono);
    font-size:calc(var(--u)*10);color:var(--muted-foreground)}
  .demo-spin{font-size:calc(var(--u)*12);color:var(--primary);animation:demo-spin .8s linear infinite}
  @keyframes demo-spin{to{transform:rotate(360deg)}}
  .demo-item{display:flex;align-items:center;gap:calc(var(--u)*7);font-size:calc(var(--u)*11);color:var(--foreground)}
  .demo-item .lucide{font-size:calc(var(--u)*14);color:var(--series-green)}

  /* paso 2: el role play. Las burbujas son las del mock, en chico */
  .demo-body--chat{gap:calc(var(--u)*5)}
  .demo-body--chat .bubble{max-width:93%;box-shadow:none;line-height:1.45;
    padding:calc(var(--u)*5) calc(var(--u)*9);font-size:calc(var(--u)*10);border-radius:calc(var(--u)*12)}
  .demo-body--chat .bubble--ai{border-bottom-left-radius:calc(var(--u)*4)}
  .demo-body--chat .bubble--me{border-bottom-right-radius:calc(var(--u)*4)}
  .demo-body--chat .bubble .who{font-size:calc(var(--u)*7.5);margin-bottom:calc(var(--u)*1)}
  .demo-typing{align-self:flex-start;gap:calc(var(--u)*4);background:var(--card);border:1px solid var(--border);
    padding:calc(var(--u)*6) calc(var(--u)*10);border-radius:calc(var(--u)*12);border-bottom-left-radius:calc(var(--u)*4)}
  .demo-typing i{width:calc(var(--u)*5);height:calc(var(--u)*5);border-radius:50%;
    background:var(--muted-foreground);animation:demo-ty 1.2s infinite}
  .demo-typing i:nth-child(2){animation-delay:.2s}
  .demo-typing i:nth-child(3){animation-delay:.4s}
  @keyframes demo-ty{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

  /* paso 3: el puntaje. El anillo es SVG y no el conic-gradient de .score-ring
     porque este si se anima: stroke-dashoffset interpola, un conic-gradient no. */
  .demo-body--score{align-items:center;justify-content:center;gap:calc(var(--u)*9)}
  .demo-ring{position:relative;flex-shrink:0;width:calc(var(--u)*92);height:calc(var(--u)*92)}
  .demo-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
  .demo-rc{fill:none;stroke:var(--border);stroke-width:9}
  /* 283 = la circunferencia (2*pi*45) del viewBox. 37 deja el arco en 87%, el
     mismo numero que muestra el centro. */
  .demo-rp{fill:none;stroke:var(--primary);stroke-width:9;stroke-linecap:round;
    stroke-dasharray:283;stroke-dashoffset:37}
  .demo-rv{position:absolute;inset:0;display:grid;place-items:center;color:var(--foreground);
    font-family:var(--font-title);font-weight:800;letter-spacing:-.02em;font-size:calc(var(--u)*26)}
  .demo-dims{display:flex;flex-wrap:wrap;justify-content:center;gap:calc(var(--u)*5)}
  .demo-body--score .tag{font-size:calc(var(--u)*9.5);padding:calc(var(--u)*2) calc(var(--u)*7)}
  .demo-rank{font-family:var(--font-mono);font-size:calc(var(--u)*10);color:var(--muted-foreground)}
  .demo-rank b{color:var(--primary)}

  /* el aviso: solo donde hay puntero que pueda hacer hover */
  .demo-hint{position:absolute;z-index:2;pointer-events:none;
    right:calc(var(--u)*9);bottom:calc(var(--u)*8);padding:calc(var(--u)*3) calc(var(--u)*8);
    font-family:var(--font-mono);font-size:calc(var(--u)*9);letter-spacing:.06em;text-transform:uppercase;
    color:var(--muted-foreground);background:oklch(from var(--card) l c h / .9);
    border:1px solid var(--border);border-radius:100px;
    transition:opacity var(--dur-ui) var(--ease-out)}
  .step-demo.is-playing .demo-hint{opacity:0}
  @media (hover:none){ .demo-hint{display:none} }

  /* proceso: no existe en el estado estatico */
  .demo-load,.demo-arm,.demo-typing{display:none}
  .step-demo.is-playing .demo-load{display:block}
  .step-demo.is-playing .demo-arm{display:flex}
  .step-demo.is-playing .demo-typing{display:flex}

  /* el loop de 6s. Cada pieza entra con su propio retardo (--d en el markup),
     se sostiene hasta el 90% y sale, y el ciclo vuelve a empezar. */
  @keyframes demo-pop{0%{opacity:0;transform:translateY(9px) scale(.98)}7%,90%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-4px)}}
  .step-demo.is-playing .an{animation:demo-pop 6s var(--ease-out) var(--d,0s) infinite}
  @keyframes demo-load{0%{width:0}22%,100%{width:100%}}
  .step-demo.is-playing .demo-load i{animation:demo-load 6s linear infinite}
  @keyframes demo-ring{0%{stroke-dashoffset:283}30%,90%{stroke-dashoffset:37}100%{stroke-dashoffset:283}}
  .step-demo.is-playing .demo-rp{animation:demo-ring 6s cubic-bezier(.4,0,.2,1) infinite}
  .step-card h3{font-family:var(--font-title);font-size:1.1rem;font-weight:700;display:flex;align-items:center;gap:10px}
  .step-card h3 .lucide{color:var(--primary);font-size:20px}
  .step-card>p{margin-top:6px;color:var(--muted-foreground);font-size:var(--fs-small)}
  .step-card ul{margin-top:12px;display:flex;flex-direction:column;gap:8px}
  .step-card li{display:flex;gap:9px;font-size:var(--fs-small);color:var(--foreground)}
  .step-card li .lucide{font-size:17px;color:var(--primary);flex-shrink:0;margin-top:2px}

  /* ── scoring dimensions ── */
  .dim-list{display:flex;flex-direction:column;gap:12px}
  .dim{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:14px 16px}
  .dim .ic{width:40px;height:40px;border-radius:11px;flex-shrink:0;display:grid;place-items:center;background:oklch(from var(--primary) 0.94 0.045 h);color:var(--primary)}
  .dark .dim .ic{background:oklch(from var(--primary) 0.30 0.06 h)}
  .dim .ic .lucide{font-size:19px}
  .dim .dt{font-size:15px;font-weight:600;font-family:var(--font-title)}
  .dim .dd{font-size:12.5px;color:var(--muted-foreground)}

  /* ── modules ── */
  .mod-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
  .mod-top .lucide{font-size:24px;color:var(--primary)}

  /* ── roadmap ── */
  .road{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
  .road-col{padding:0 22px;position:relative}
  .road-col:not(:last-child)::after{content:"";position:absolute;top:7px;right:-.5px;width:1px;height:calc(100% - 7px);background:var(--border)}
  .road-node{display:flex;align-items:center;gap:10px;margin-bottom:16px}
  .road-node i.dot{width:14px;height:14px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 4px oklch(from var(--primary) 0.90 0.05 h)}
  .dark .road-node i.dot{box-shadow:0 0 0 4px oklch(from var(--primary) 0.30 0.06 h)}
  .road-node.future i.dot{background:var(--border);box-shadow:none}
  .road-ver{font-family:var(--font-title);font-weight:800;font-size:1.15rem}
  .road-when{font-family:var(--font-mono);font-size:12px;color:var(--muted-foreground);margin-bottom:14px}
  .road-col ul{display:flex;flex-direction:column;gap:9px}
  .road-col li{font-size:13px;color:var(--muted-foreground);display:flex;gap:8px}
  .road-col li .lucide{font-size:15px;color:var(--primary);flex-shrink:0;margin-top:2px}

  /* ── final CTA ── */
  .cta-band{position:relative;overflow:hidden;background:var(--primary);color:var(--primary-foreground);
    border-radius:var(--radius-2xl);padding:clamp(2.5rem,6vw,4rem);text-align:center;box-shadow:var(--shadow-lg)}
  .cta-band .enso{color:var(--dojo-cream-hi);opacity:.14;width:min(90vw,560px);height:min(90vw,560px);right:-10%;top:-40%}
  .cta-band .kanji-wm{color:var(--dojo-cream-hi);opacity:.08;font-size:clamp(160px,30vw,340px);left:-2%;bottom:-30%}
  .cta-band>*{position:relative;z-index:2}
  .cta-band h2{font-family:var(--font-title);font-size:clamp(1.7rem,3.4vw,2.5rem);font-weight:800}
  .cta-band p{margin-top:14px;font-size:var(--fs-lead);opacity:.9;max-width:52ch;margin-inline:auto}
  .btn--on-primary{--_bg:var(--dojo-cream-hi);--_fg:var(--dojo-crimson-deep)}
  .btn--on-primary:hover{--_bg:#fff}

  /* footer brand */
  .footer-about{font-size:var(--fs-small);color:var(--muted-foreground);max-width:34ch;margin-top:14px}

  /* ── typographic LOGO (nav) + DOJO by N5 lockup (footer) ── */
  .nav-brand--word{font-family:var(--font-title);font-weight:600;font-size:1.5rem;letter-spacing:.16em;
    text-transform:uppercase;color:var(--foreground)}
  .footer-lockup{display:inline-block}
  .footer-logo{height:clamp(34px,5vw,44px);width:auto;display:block}
  /* Logo readable in dark mode: DOJO crimson, "by" cream, N5 mark light blue */
  .dark .nav-logo path{fill:#C4362D}
  .dark .footer-logo path:nth-of-type(1){fill:#C4362D}
  .dark .footer-logo path:nth-of-type(2){fill:#EDE7DB}
  .dark .footer-logo path:nth-of-type(n+3){fill:#7C9BCB}

  /* ── N5 word-reveal (blur + slide + stagger). The N5 Now site signature. ── */
  @keyframes wordIn{from{opacity:0;transform:translateY(-16px);filter:blur(9px)}to{opacity:1;transform:none;filter:blur(0)}}
  .words .wr{display:inline-block}
  .js .words .wr{opacity:0;animation:wordIn .52s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--wi,0)*42ms + 90ms)}
  @media (prefers-reduced-motion:reduce){.js .words .wr{animation:none;opacity:1;filter:none;transform:none}}

  /* ── HERO: brand image + floating score chip ── */
  .hero-figure{position:relative;border-radius:var(--radius-2xl);overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow-xl)}
  .hero-figure img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/11}
  .hero-chip{position:absolute;left:14px;right:14px;bottom:14px;display:flex;align-items:center;gap:12px;
    background:oklch(from var(--card) l c h / .84);backdrop-filter:saturate(140%) blur(9px);
    border:1px solid var(--border);border-radius:var(--radius-lg);padding:11px 13px;box-shadow:var(--shadow-lg);
    font-size:12.5px;line-height:1.35;color:var(--foreground)}
  .hero-chip b{font-family:var(--font-title);font-weight:700}
  .hero-chip .r{width:44px;height:44px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;
    font-family:var(--font-title);font-weight:800;font-size:14px;color:var(--primary);
    background:conic-gradient(var(--primary) 0 87%, var(--border) 87% 100%)}
  .hero-chip .r b{width:34px;height:34px;border-radius:50%;background:var(--card);display:grid;place-items:center}

  /* ── sparring caption (next to the relocated mock-up) ── */
  .spar-cap{margin-top:16px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:var(--fs-small);color:var(--muted-foreground)}

  /* ── KEYWORDS MARQUEE (sumi band, N5 Now style) ── */
  .kw-band{background:oklch(0.225 0.006 60);overflow:hidden;padding-block:clamp(1.7rem,4.5vw,2.8rem)}
  .kw-track{display:flex;width:max-content;animation:kw 42s linear infinite}
  .kw-set{display:flex;align-items:center;flex-shrink:0;font-family:var(--font-title);font-weight:600;
    text-transform:uppercase;font-size:clamp(1.5rem,4.4vw,3rem);letter-spacing:.04em;
    color:oklch(0.92 0.014 84 / .85);white-space:nowrap}
  .kw-set .sep{margin:0 clamp(20px,3vw,44px);color:var(--primary);font-weight:400}
  .kw-set .jp{font-family:var(--font-jp);font-weight:200}
  @keyframes kw{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  .kw-band:hover .kw-track{animation-play-state:paused}
  @media (prefers-reduced-motion:reduce){.kw-track{animation:none}.kw-band{overflow-x:auto}}

  /* ═══════════════════════════════════════════════════════════════════════
     ELEVATION — full-bleed, cohesion, and imagery as design (not in little boxes)
     ═══════════════════════════════════════════════════════════════════════ */

  /* Cohesion: most sections share the paper background. The rhythm comes from
     whitespace and 4 art-directed moments (hero photo · sumi band · crimson ·
     CTA photo), not from a colour block per section. */
  .section--muted, .section--canvas{background:var(--background)}
  .section--rule{border-top:1px solid var(--border)}

  /* Editorial head (left, asymmetric). No uniform eyebrow on every section. */
  .head{max-width:min(100%,48rem);margin-bottom:clamp(2.2rem,5vw,3.4rem)}
  .head h2{margin:0}
  .head .lead{margin-top:16px;max-width:52ch}
  .head--center{margin-inline:auto;text-align:center}
  .kicker{display:inline-flex;align-items:center;gap:12px;margin-bottom:18px}
  .kicker::before{content:"";width:30px;height:2px;background:var(--primary);border-radius:2px}
  .kicker .jp{font-family:var(--font-jp);font-weight:500;font-size:1.6rem;color:var(--primary);line-height:1}
  .kicker span{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-foreground)}

  /* ── HERO full-bleed: the photo fills everything, text over a paper veil ── */
  .hero-full{position:relative;min-height:min(94vh,900px);display:flex;align-items:center;overflow:hidden;
    isolation:isolate;margin-top:calc(var(--nav-h) * -1);padding-top:var(--nav-h)}
  .hero-full-media{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:60% center;transform:scaleX(-1)}
  .hero-full-scrim{position:absolute;inset:0;z-index:1;background:
    linear-gradient(98deg, var(--background) 3%, oklch(from var(--background) l c h /.92) 30%, oklch(from var(--background) l c h /.55) 50%, oklch(from var(--background) l c h /.10) 72%, transparent 86%),
    linear-gradient(0deg, oklch(from var(--background) l c h /.45) 0%, transparent 32%)}
  .hero-full .container{position:relative;z-index:3;width:100%}
  .hero-copy{max-width:46rem}
  .hero-h{font-family:var(--font-title);font-weight:800;font-size:clamp(2.2rem,4.4vw,3.4rem);line-height:1.06;
    letter-spacing:-.025em;color:var(--foreground);text-wrap:balance;max-width:26ch;
    text-shadow:0 1px 26px oklch(from var(--background) l c h / .65), 0 1px 4px oklch(from var(--background) l c h / .45)}
  .hero-lead{margin-top:22px;font-size:var(--fs-lead);line-height:1.55;color:var(--foreground);opacity:.84;max-width:40ch}
  .hero-full .hero-note{margin-top:22px}
  .hero-chip{position:absolute;left:auto;right:clamp(1rem,4vw,3rem);bottom:clamp(1.6rem,5vw,3rem);z-index:3;
    display:flex;align-items:center;gap:12px;max-width:300px;
    background:oklch(from var(--card) l c h / .82);backdrop-filter:saturate(150%) blur(12px);
    border:1px solid oklch(from var(--card) l c h / .5);border-radius:var(--radius-lg);
    padding:12px 15px;box-shadow:var(--shadow-lg);font-size:12.5px;line-height:1.35;color:var(--foreground)}
  .hero-chip b{font-family:var(--font-title);font-weight:700}
  .hero-chip .r{width:44px;height:44px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;
    font-family:var(--font-title);font-weight:800;font-size:14px;color:var(--primary);
    background:conic-gradient(var(--primary) 0 87%, oklch(from var(--primary) 0.82 0.05 h) 87% 100%)}
  .hero-chip .r b{width:34px;height:34px;border-radius:50%;background:var(--card);display:grid;place-items:center}

  /* ── FEATURES without boxes: ruled grid, reads as a single panel ── */
  .features{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--border)}
  .feature{padding:clamp(1.7rem,3vw,2.5rem) clamp(1.4rem,2.4vw,2rem);border-top:1px solid var(--border);position:relative;border-radius:14px;transition:background .35s cubic-bezier(.22,1,.36,1),backdrop-filter .35s cubic-bezier(.22,1,.36,1),box-shadow .35s cubic-bezier(.22,1,.36,1),transform .35s cubic-bezier(.22,1,.36,1)}
  .feature:not(:nth-child(3n)){border-right:1px solid var(--border)}
  @media (hover:hover){
    .feature:hover{background:oklch(from var(--card) l c h / .40);-webkit-backdrop-filter:blur(11px) saturate(122%);backdrop-filter:blur(11px) saturate(122%);box-shadow:0 6px 20px oklch(from var(--foreground) l c h / .06);transform:translateY(-1px)}
  }
  .feature .fi{display:inline-flex;color:var(--primary);margin-bottom:16px}
  .feature .fi .lucide{font-size:26px;stroke-width:1.6}
  .feature h3{font-family:var(--font-title);font-size:1.15rem;font-weight:700;letter-spacing:-.01em}
  .feature p{margin-top:8px;color:var(--muted-foreground);font-size:var(--fs-small);line-height:1.6}
  @media (max-width:768px){ .features{grid-template-columns:1fr} .feature{border-right:none!important} }

  /* ── STATEMENT: full-bleed photo band with one line (breaks the paper) ── */
  .statement{position:relative;min-height:min(62vh,560px);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
  .statement img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:center 42%}
  .statement::after{content:"";position:absolute;inset:0;z-index:1;background:
    linear-gradient(90deg, oklch(0.19 0.006 60 /.80) 0%, oklch(0.19 0.006 60 /.45) 46%, oklch(0.19 0.006 60 /.12) 100%),
    linear-gradient(0deg, oklch(0.19 0.006 60 /.55), transparent 40%)}
  .statement .container{position:relative;z-index:2;padding-block:clamp(2.5rem,6vw,4.5rem)}
  .statement blockquote{max-width:22ch;font-family:var(--font-title);font-weight:800;
    font-size:clamp(1.9rem,4.4vw,3.2rem);line-height:1.08;letter-spacing:-.025em;color:var(--dojo-cream-hi);margin:0}
  .statement blockquote .hl{color:oklch(0.78 0.14 30)}
  .statement cite{display:block;margin-top:18px;font-family:var(--font-mono);font-size:.78rem;letter-spacing:.14em;
    text-transform:uppercase;color:oklch(0.9 0.02 84 /.82);font-style:normal}

  /* ── CTA full-bleed: photo under a crimson veil, no plate or frame ── */
  .cta-full{position:relative;overflow:hidden;isolation:isolate;text-align:center;
    padding-block:clamp(5rem,13vw,9.5rem)}
  .cta-full .cta-media{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:center 22%}
  .cta-full::after{content:"";position:absolute;inset:0;z-index:1;background:
    linear-gradient(180deg, oklch(from var(--primary) calc(l - 0.01) c h /.85), oklch(from var(--primary) calc(l - 0.11) c h /.93))}
  .cta-full .container{position:relative;z-index:2}
  .cta-full .kanji-wm{color:var(--dojo-cream-hi);opacity:.09;font-size:clamp(180px,32vw,360px);left:50%;top:50%;transform:translate(-50%,-50%);z-index:1}
  .cta-full h2{font-family:var(--font-title);font-weight:800;font-size:clamp(2rem,4.4vw,3.2rem);letter-spacing:-.02em;color:var(--primary-foreground)}
  .cta-full p{margin-top:14px;font-size:var(--fs-lead);color:oklch(from var(--primary-foreground) l c h /.9);max-width:50ch;margin-inline:auto}

  /* ── ensō that draws itself on entrance (stroke draw) ── */
  .enso-draw{display:block;color:var(--primary)}
  .enso-draw path{fill:none;stroke:currentColor;stroke-width:7;stroke-linecap:round;
    stroke-dasharray:620;stroke-dashoffset:620;transition:stroke-dashoffset 1.4s var(--ease-out)}
  .enso-draw.is-visible path{stroke-dashoffset:0}

  @media (max-width:1024px){ .road{grid-template-columns:repeat(2,1fr);row-gap:34px} .road-col:nth-child(2)::after{display:none} }
  @media (max-width:768px){
    .tenets{grid-template-columns:1fr}
    .hero-full{min-height:auto;padding-top:calc(var(--nav-h) + clamp(2rem,10vw,4rem));padding-bottom:clamp(2.5rem,10vw,4rem);align-items:flex-end}
    .hero-full-media{object-position:64% center}
    .hero-full-scrim{background:linear-gradient(0deg, var(--background) 8%, oklch(from var(--background) l c h /.86) 40%, oklch(from var(--background) l c h /.35) 66%, oklch(from var(--background) l c h /.12) 100%)}
    .hero-chip{display:none}
  }
  @media (max-width:640px){
    .road{grid-template-columns:1fr} .road-col{padding:0 0 0 2px} .road-col::after{display:none!important}
    .step{grid-template-columns:1fr;gap:12px} .trust-inner{justify-content:center;text-align:center}
  }
  @media (prefers-reduced-motion:reduce){ .enso-draw path{transition:none;stroke-dashoffset:0} }

  /* ═══════════════════════════════════════════════════════════════════════
     REFERENCES cantor8 (fluid scroll + lines that draw themselves) + wolverine
     (masked hero + hiding menu). Adapted to the brand.
     ═══════════════════════════════════════════════════════════════════════ */

  /* Lenis — smooth scroll with inertia (the feeling of unity and flow) */
  html.lenis,html.lenis body{height:auto}
  .lenis.lenis-smooth{scroll-behavior:auto!important}
  .lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
  .lenis.lenis-stopped{overflow:hidden}

  /* Scroll path — vertical line that draws itself with the scroll and ties the whole site together */
  .scroll-path{position:fixed;top:0;bottom:0;left:clamp(14px,3.2vw,40px);width:2px;z-index:60;pointer-events:none;
    background:oklch(from var(--foreground) l c h / .12);opacity:0;transition:opacity .5s var(--ease-out)}
  .scroll-path.on{opacity:1}
  .scroll-path i{position:absolute;inset:0;transform-origin:top;transform:scaleY(var(--sp,0));
    background:linear-gradient(var(--primary),oklch(from var(--primary) 0.64 0.15 h))}
  .scroll-path b{position:absolute;left:50%;top:calc(var(--sp,0) * 100%);width:9px;height:9px;border-radius:50%;
    background:var(--primary);transform:translate(-50%,-50%);box-shadow:0 0 0 4px oklch(from var(--primary) l c h / .16)}
  @media (max-width:900px){.scroll-path{display:none}}

  /* Menu (wolverine): hides going down, comes back going up */
  .site-nav{transition:transform .38s var(--ease-out),height .2s,background .2s,box-shadow .2s,border-color .2s}
  .site-nav.nav-hidden{transform:translateY(-105%)}

  /* Hero (wolverine): staggered entrance + mask wipe on the title */
  .js .hero-full .hero-copy>*{opacity:0;transform:translateY(24px);
    transition:opacity .8s var(--ease-out),transform .9s var(--ease-out)}
  .hero-full.in .hero-copy>*{opacity:1;transform:none}
  .hero-full.in .hero-copy>*:nth-child(1){transition-delay:.10s}
  .hero-full.in .hero-copy>*:nth-child(2){transition-delay:.20s}
  .hero-full.in .hero-copy>*:nth-child(3){transition-delay:.30s}
  .hero-full.in .hero-copy>*:nth-child(4){transition-delay:.42s}
  .hero-full.in .hero-copy>*:nth-child(5){transition-delay:.54s}
  .hero-h{overflow:hidden;padding-bottom:.12em}
  .js .hero-h .h-in{display:block;transform:translateY(108%);transition:transform 1s var(--ease-out) .22s}
  .hero-full.in .hero-h .h-in{transform:none}
  .js .hero-chip{opacity:0;transition:opacity .7s var(--ease-out) .75s}
  .hero-full.in .hero-chip{opacity:1}

  /* Lines that draw themselves between sections (cantor8) */
  .section--rule{border-top:none!important;position:relative}
  .section--rule::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--border);
    transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease-out)}
  .section--rule.is-visible::before{transform:scaleX(1)}
  /* The kicker tick draws itself when the section is revealed */
  .kicker::before{transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease-out) .15s}
  .reveal.is-visible .kicker::before{transform:scaleX(1)}

  @media (prefers-reduced-motion:reduce){
    .js .hero-full .hero-copy>*,.js .hero-h .h-in,.js .hero-chip{opacity:1;transform:none;transition:none}
    .section--rule::before,.kicker::before{transform:none}
    .scroll-path i,.site-nav{transition:none}
  }

  /* ═══ HERO that shrinks on scroll (wolverine "full → shrink") ═══ */
  /* The element that fills the stage is .hero-scene (defined further down).
     These rules used to target .hero-frame, a class from an older version of the
     markup that no longer exists: on desktop it went unnoticed because
     .hero-stage has height:100vh, but once it became height:auto on mobile
     nothing gave the hero any height and it collapsed to 0. */
  .hero-full{min-height:0;height:220vh;display:block;padding-top:0;overflow:visible}
  .hero-stage{position:sticky;top:0;height:100vh;overflow:clip;isolation:isolate}
  .hero-inner{position:relative;z-index:3;width:100%}
  @media (max-width:900px){
    .hero-full{height:auto}
    .hero-stage{position:static;height:auto;overflow:visible}
  }
  @media (prefers-reduced-motion:reduce){
    .hero-full{height:auto}
    .hero-stage{position:static;height:auto;overflow:visible}
  }
  /* the .hero-scene overrides live next to its base rule, further down: here
     they would lose the cascade against .hero-scene{position:absolute} */

  /* ═══ "The dojo" — Foundation layout (cantor8): title top-left, content
     bottom-right, flowing lines ═══ */
  .dojo-fnd{position:relative;overflow:hidden}
  .dojo-fnd .container{position:relative;z-index:1}
  .kicker--sq::before{width:9px;height:9px;border-radius:2px;transform:none}
  .dojo-huge{position:relative;z-index:2;font-family:var(--font-title);font-weight:800;font-size:clamp(2.2rem,4.8vw,3.6rem);line-height:1.05;
    letter-spacing:-.03em;margin-top:18px;max-width:min(100%,60rem)}
  .kicker--sq{position:relative;z-index:2}
  .dojo-lower{position:relative;z-index:2;margin-left:auto;max-width:min(100%,34rem);margin-top:clamp(2.5rem,8vw,6.5rem)}
  .dojo-sub{font-family:var(--font-title);font-weight:800;font-size:clamp(1.5rem,3vw,2.1rem);letter-spacing:-.02em;line-height:1.1;margin-bottom:14px}
  @media (max-width:860px){.dojo-lower{margin-left:0;max-width:none}}

  /* Card carousel (crimson, staggered) that moves WITH the scroll (precise) */
  .tenet-carousel{overflow:hidden;padding:8px 0 4px;margin-top:clamp(2.5rem,6vw,4rem);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
  .tenet-track{display:flex;align-items:flex-start;gap:clamp(16px,2vw,26px);width:max-content;
    padding:0 clamp(12px,2vw,24px) 44px;transform:translate3d(var(--tx,0px),0,0);will-change:transform}
  .tcard{flex:0 0 clamp(280px,26vw,340px);background:var(--primary);color:var(--primary-foreground);
    border-radius:var(--radius-xl);padding:clamp(1.5rem,2.4vw,2rem);display:flex;flex-direction:column;gap:12px;
    min-height:300px;box-shadow:var(--shadow-md)}
  .tenet-track .tcard:nth-child(3n+1){margin-top:60px}
  .tenet-track .tcard:nth-child(3n+2){margin-top:0}
  .tenet-track .tcard:nth-child(3n){margin-top:120px}
  .tcard .fi{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
    background:oklch(from var(--primary-foreground) l c h /.16);color:var(--primary-foreground);margin-bottom:4px}
  .tcard .fi .lucide{font-size:24px}
  .tcard h3{font-family:var(--font-title);font-size:1.2rem;font-weight:700;letter-spacing:-.01em}
  .tcard p{color:oklch(from var(--primary-foreground) l c h /.82);font-size:var(--fs-small);line-height:1.6;margin:0}
  @media (max-width:640px){
    .tenet-carousel{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
    .tenet-track{transform:none!important}
  }
  @media (prefers-reduced-motion:reduce){
    .tenet-track{transform:none!important;flex-wrap:wrap;width:auto;justify-content:center}
    .tenet-track .tcard{margin-top:0!important}
    .tenet-carousel{overflow:visible;-webkit-mask-image:none;mask-image:none}
    .tcard[aria-hidden="true"]{display:none}
  }

  /* ═══ Progressive blur at the bottom of the screen (primora.xyz effect) ═══ */
  .edge-blur{position:fixed;left:0;right:0;bottom:0;height:clamp(140px,24vh,300px);z-index:55;pointer-events:none;transition:opacity .25s var(--ease-out)}
  .edge-blur>span{position:absolute;inset:0;display:block}
  .edge-blur .eb1{backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px);
    -webkit-mask-image:linear-gradient(to bottom,transparent 50%,#000 68%);mask-image:linear-gradient(to bottom,transparent 50%,#000 68%)}
  .edge-blur .eb2{backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
    -webkit-mask-image:linear-gradient(to bottom,transparent 62%,#000 78%);mask-image:linear-gradient(to bottom,transparent 62%,#000 78%)}
  .edge-blur .eb3{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    -webkit-mask-image:linear-gradient(to bottom,transparent 74%,#000 88%);mask-image:linear-gradient(to bottom,transparent 74%,#000 88%)}
  .edge-blur .eb4{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    -webkit-mask-image:linear-gradient(to bottom,transparent 82%,#000 94%);mask-image:linear-gradient(to bottom,transparent 82%,#000 94%)}
  .edge-blur .eb5{backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
    -webkit-mask-image:linear-gradient(to bottom,transparent 88%,#000 100%);mask-image:linear-gradient(to bottom,transparent 88%,#000 100%)}

  /* ═══ HERO "dojo mode": circle that reveals the dojo over the workspace (scroll) ═══ */
  .hero-scene{position:absolute;inset:0;overflow:hidden;display:flex;align-items:center}
  .hero-scene .hero-inner{margin-top:calc(var(--nav-h) / 2)}
  .hero-base,.hero-reveal{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:78% center}
  .hero-base{z-index:0}
  .hero-reveal{z-index:1;clip-path:circle(var(--r,0%) at var(--cx,80%) var(--cy,62%));-webkit-clip-path:circle(var(--r,0%) at var(--cx,80%) var(--cy,62%))}
  .hero-reveal.intro{transition:clip-path 1.4s cubic-bezier(.22,1,.36,1)}
  .hero-scene .hero-full-scrim{z-index:2}
  .hero-scene .hero-inner{z-index:3}
  @media (max-width:900px){
    .hero-base,.hero-reveal{object-position:72% center}
    /* .hero-stage becomes height:auto on mobile; since .hero-scene is absolute,
     the hero was left with no height and collapsed. Here it goes back into the
     normal flow. */
    .hero-scene{position:relative;min-height:90vh}
  }
  @media (prefers-reduced-motion:reduce){
    .hero-scene{position:relative;min-height:92vh}
  }
  @media (prefers-reduced-motion:reduce){ .hero-reveal{clip-path:circle(150% at 50% 50%)} }

  /* ═══ The dojo as an AMBIENT background travelled by the scroll (option A) ═══ */
  body{background:transparent}
  .dojo-bg{position:fixed;inset:0;z-index:-2;pointer-events:none;
    background-image:url("../img/bg-textura.webp");background-size:cover;background-repeat:no-repeat;
    background-position:center calc(var(--sp,0) * 100%)}
  /* paper veil: the dojo stays subtle behind and the text stays readable */
  .dojo-veil{position:fixed;inset:0;z-index:-1;pointer-events:none;background:oklch(from var(--background) l c h / .88)}
  /* let the dojo breathe: neutral sections and footer go translucent */
  .section--muted,.section--canvas{background:transparent}
  .site-footer{background:transparent}
  /* mobile menu control row: the theme toggle */
  .nav-mobile-extras{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    margin-top:auto;padding-top:24px;border-top:1px solid var(--border);
  }
  .nav-mobile-extras .theme-toggle{width:44px;height:44px}

  /* With the menu open the nav has to be opaque: at scroll 0 it is transparent
     by design (the hero is full-bleed) and the hero showed through. */
  body.nav-open .site-nav{
    background:var(--background);
    backdrop-filter:none;-webkit-backdrop-filter:none;
    border-bottom-color:var(--border);
  }

  /* ── 404 page ─────────────────────────────────────────────────────── */
  .error-page{
    min-height:calc(100svh - var(--nav-h));
    display:flex;align-items:center;
    padding:clamp(3rem,10vh,7rem) 0;
  }
  .error-page .container{max-width:var(--content-narrow)}
  .error-code{
    font-family:var(--font-mono);font-weight:500;line-height:1;
    font-size:clamp(1.25rem,1.1rem + .8vw,1.75rem);
    letter-spacing:.22em;color:var(--dojo-crimson);margin:0 0 20px;
  }
  .error-title{
    font-family:var(--font-title);font-weight:800;
    font-size:clamp(1.9rem,1.3rem+2.6vw,3rem);line-height:1.08;letter-spacing:-.03em;
    margin:0 0 16px;text-wrap:balance;
  }
  .error-lead{
    font-size:var(--fs-lead);line-height:1.6;color:var(--dojo-ink-soft);
    margin:0 0 32px;max-width:46ch;
  }
  .dark .error-lead{color:var(--muted-foreground)}
  .error-actions{display:flex;flex-wrap:wrap;gap:12px}
  /* on mobile they stack full width, same as the menu CTAs: that way they end
     up the same width instead of each hugging its own label */
  @media (max-width:640px){
    .error-actions{flex-direction:column;align-items:stretch}
    .error-actions .btn{width:100%}
  }
  .error-links{
    display:flex;flex-wrap:wrap;gap:8px 24px;
    margin-top:36px;padding-top:24px;border-top:1px solid var(--border);
  }
  .error-links a{
    font-size:var(--fs-small);color:var(--dojo-ink-soft);text-decoration:none;
    transition:color var(--dur-ui) var(--ease-out);
  }
  .error-links a:hover{color:var(--dojo-crimson)}
  .dark .error-links a{color:var(--muted-foreground)}
  .dark .error-links a:hover{color:var(--foreground)}

  /* ── Cookie banner ───────────────────────────────────────────────────
     Accept and Reject are the same size on purpose: a Reject that is smaller or
     dimmer than Accept is exactly what European regulators keep flagging. */
  .cookie-bar{
    /* bottom-right corner: on the left it collides with the scroll-path line
       and with the side index of /legal/ */
    position:fixed;right:var(--gutter);bottom:var(--gutter);z-index:var(--z-toast);
    width:min(380px,calc(100vw - var(--gutter) * 2));
    padding:clamp(1.15rem,3vw,1.5rem);
    background:oklch(from var(--background) l c h / .92);
    backdrop-filter:saturate(150%) blur(12px);-webkit-backdrop-filter:saturate(150%) blur(12px);
    border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);
    opacity:0;transform:translateY(12px);
    transition:opacity var(--dur-panel) var(--ease-out),transform var(--dur-panel) var(--ease-out);
  }
  .cookie-bar.is-in{opacity:1;transform:none}
  /* An author display wins over the browser stylesheet's [hidden], so it has to
     be declared by hand or the details panel shows up always open. */
  .cookie-bar[hidden],.cookie-groups[hidden],.cookie-bar .btn[hidden]{display:none}
  .cookie-title{
    font-family:var(--font-title);font-size:1rem;font-weight:800;letter-spacing:-.01em;
    color:var(--foreground);margin:0 0 8px;
  }
  .cookie-text{font-size:var(--fs-small);line-height:1.6;color:var(--dojo-ink-soft);margin:0}
  .dark .cookie-text{color:var(--muted-foreground)}
  .cookie-groups{display:flex;flex-direction:column;gap:10px;margin-top:14px}
  .cookie-group{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
  .cookie-group:has(input:disabled){cursor:default}
  .cookie-group input{
    flex-shrink:0;width:16px;height:16px;margin:2px 0 0;accent-color:var(--primary);cursor:inherit;
  }
  .cookie-group span{font-size:var(--fs-eyebrow);line-height:1.5;color:var(--dojo-ink-soft)}
  .dark .cookie-group span{color:var(--muted-foreground)}
  .cookie-group b{display:block;font-weight:600;color:var(--foreground);font-size:var(--fs-small)}
  .cookie-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
  .cookie-actions .btn{flex:1 1 auto}
  .cookie-actions [data-cookie-details]{flex:0 0 auto}
  .cookie-footer{margin:12px 0 0;font-size:var(--fs-eyebrow);text-align:right}
  .cookie-footer a{color:var(--dojo-crimson);text-decoration:underline;text-underline-offset:.15em}
  .dark .cookie-footer a{color:oklch(0.78 0.13 25)}
  /* full width on mobile: buttons stacked in half the screen look broken */
  @media (max-width:640px){
    .cookie-bar{left:var(--gutter);right:var(--gutter);width:auto}
    .cookie-actions .btn{flex:1 1 100%}
  }
  @media (prefers-reduced-motion:reduce){
    .cookie-bar{transition:none;transform:none}
  }

  /* ── Waitlist modal · ALPHA ONLY (PRO-1991) ──────────────────────────
     Temporary. It only reaches dist/ while WAITLIST is on in build.js, and
     every selector is prefixed .wl- so undoing the alpha is deleting from this
     heading to the next one. --primary is the crimson in both themes, which is
     what the design asks for. */
  .wl-ov{
    position:fixed;inset:0;z-index:var(--z-modal);
    display:flex;align-items:center;justify-content:center;padding:var(--gutter);
    background:oklch(from var(--foreground) l c h / .55);
    backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  }
  /* An author display wins over the browser stylesheet's [hidden], so every
     element that toggles has to be declared by hand -- same as the cookie bar. */
  .wl-ov[hidden],.wl-plan[hidden],.wl-err[hidden],.wl-ok[hidden],[data-wl-form][hidden]{display:none}
  /* Its own class and not .nav-open: that one also slides the mobile menu in. */
  body.wl-open{overflow:hidden}
  .wl-card{
    position:relative;width:100%;max-width:440px;
    padding:clamp(1.5rem,4vw,1.9rem);
    background:var(--card);border:1px solid var(--border);
    border-radius:var(--radius-2xl);box-shadow:var(--shadow-xl);
  }
  .wl-x{
    position:absolute;top:13px;right:13px;width:34px;height:34px;
    border:0;border-radius:var(--radius-md);background:none;color:var(--muted-foreground);
    display:grid;place-items:center;cursor:pointer;
    transition:background var(--dur-ui) var(--ease-out);
  }
  .wl-x:hover{background:var(--muted)}
  .wl-x .lucide{font-size:18px}
  .wl-eh{
    font-family:var(--font-mono);font-size:var(--fs-eyebrow);
    letter-spacing:.18em;text-transform:uppercase;color:var(--primary);
  }
  .wl-h{
    font-family:var(--font-title);font-weight:800;font-size:1.5rem;letter-spacing:-.02em;
    color:var(--foreground);margin:9px 0 6px;
  }
  .wl-lead{font-size:var(--fs-small);line-height:1.55;color:var(--muted-foreground);margin:0 0 .4rem}
  .wl-lead:last-child{margin-bottom:0}
  .wl-plan{
    display:inline-flex;align-items:center;gap:7px;margin:13px 0 0;
    font-size:var(--fs-small);font-weight:700;color:var(--primary);
    background:oklch(from var(--primary) l c h / .1);
    border:1px solid oklch(from var(--primary) l c h / .3);
    padding:6px 13px;border-radius:100px;
  }
  .wl-form{margin-top:18px;display:flex;flex-direction:column;gap:11px}
  .wl-form input[type="email"]{
    border:1px solid var(--border);border-radius:var(--radius-xl);padding:14px 16px;
    font-family:var(--font-body);font-size:0.9375rem;
    background:var(--background);color:var(--foreground);
  }
  .wl-form input[type="email"]:focus{outline:none;border-color:var(--primary)}
  .wl-send{
    background:var(--primary);color:var(--primary-foreground);border:0;
    border-radius:var(--radius-xl);padding:15px;
    font-family:var(--font-title);font-weight:700;font-size:0.9375rem;cursor:pointer;
    transition:opacity var(--dur-ui) var(--ease-out);
  }
  .wl-send:disabled{opacity:.6;cursor:default}
  /* Honeypot: off-screen instead of display:none, because a bot that reads the
     computed style skips the ones that are not rendered. */
  .wl-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
  .wl-err{margin:0;font-size:var(--fs-eyebrow);line-height:1.5;color:var(--danger)}
  .wl-fine{font-size:var(--fs-eyebrow);color:var(--muted-foreground);text-align:center}
  .wl-fine a{color:var(--primary);text-decoration:underline;text-underline-offset:.15em}
  .wl-ok{text-align:center;padding:8px 0}
  .wl-ck{
    width:58px;height:58px;border-radius:50%;margin:0 auto 15px;
    background:oklch(from var(--primary) l c h / .12);color:var(--primary);
    display:grid;place-items:center;
  }
  .wl-ck .lucide{width:28px;height:28px}
  /* Discreet access for customers who already have an account: it is the only
     way in while the alpha lasts, so it has to be findable without competing
     with the waitlist CTA. */

  /* ── Legal: /legal/ hub and policy pages ─────────────────────────────
     Paddle-style layout: header with the date, sticky left column with the
     documents and the index, and the text in a single reading measure. The body
     is written by legal: nothing here depends on the content. */
  /* the dojo background is still there, just much dimmer: these are several
     screens of continuous text and the home veil is not enough to read them
     comfortably */
  body.legal .dojo-veil{background:oklch(from var(--background) l c h / .965)}
  .legal-page{padding-block:clamp(2rem,5vw,3.5rem) clamp(4rem,9vw,7rem)}
  .legal-head{
    max-width:62ch;margin-bottom:clamp(2rem,5vw,3.25rem);
    padding-bottom:clamp(1.5rem,4vw,2.25rem);border-bottom:1px solid var(--border);
  }
  .legal-kicker{
    font-family:var(--font-mono);font-size:var(--fs-eyebrow);font-weight:500;
    letter-spacing:.18em;text-transform:uppercase;color:var(--dojo-crimson);margin:0 0 18px;
  }
  .legal-kicker a{transition:opacity var(--dur-ui) var(--ease-out)}
  .legal-kicker a:hover{opacity:.7}
  .legal-title{
    font-family:var(--font-title);font-weight:800;
    font-size:clamp(1.85rem,1.3rem+2.2vw,2.75rem);line-height:1.1;letter-spacing:-.025em;
    margin:0;color:var(--foreground);
  }
  .legal-updated{
    font-family:var(--font-mono);font-size:var(--fs-small);
    color:var(--dojo-ink-soft);margin:14px 0 0;
  }
  .dark .legal-updated{color:var(--muted-foreground)}
  .legal-lead{font-size:var(--fs-lead);line-height:1.6;color:var(--dojo-ink-soft);margin:18px 0 0}
  .dark .legal-lead{color:var(--muted-foreground)}

  .legal-layout{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
  .legal-side{position:sticky;top:calc(var(--nav-h) + 24px);max-height:calc(100svh - var(--nav-h) - 48px);overflow-y:auto;padding-right:10px}
  /* The native scrollbar of the panel and the tables clashes with the document
     one: it is thinned down and dimmed until the pointer is over it. Firefox
     uses scrollbar-*; everyone else, the WebKit pseudo-elements. */
  .legal-side,.legal-toc,.legal-table-wrap{
    scrollbar-width:thin;
    scrollbar-color:oklch(from var(--foreground) l c h / .16) transparent;
  }
  .legal-side:hover,.legal-toc:hover,.legal-table-wrap:hover{
    scrollbar-color:oklch(from var(--foreground) l c h / .32) transparent;
  }
  .legal-side::-webkit-scrollbar,.legal-toc::-webkit-scrollbar,.legal-table-wrap::-webkit-scrollbar{width:6px;height:6px}
  .legal-side::-webkit-scrollbar-track,.legal-toc::-webkit-scrollbar-track,.legal-table-wrap::-webkit-scrollbar-track{background:transparent}
  .legal-side::-webkit-scrollbar-thumb,.legal-toc::-webkit-scrollbar-thumb,.legal-table-wrap::-webkit-scrollbar-thumb{
    background:oklch(from var(--foreground) l c h / .16);border-radius:99px;
  }
  .legal-side:hover::-webkit-scrollbar-thumb,.legal-toc:hover::-webkit-scrollbar-thumb,.legal-table-wrap:hover::-webkit-scrollbar-thumb{
    background:oklch(from var(--foreground) l c h / .32);
  }
  .legal-side-title{
    font-family:var(--font-mono);font-size:var(--fs-eyebrow);font-weight:500;
    letter-spacing:.14em;text-transform:uppercase;color:var(--dojo-ink-soft);
    margin:0 0 10px;
  }
  .dark .legal-side-title{color:var(--muted-foreground)}
  .legal-side-title+.legal-side-title,.legal-side>*+.legal-side-title{margin-top:28px}
  .legal-side-docs{display:flex;flex-direction:column;gap:2px}
  /* no negative margins here: .legal-side is a scroll container and clips them,
     which left the active document pill flush against its own text. The title
     carries the same padding so everything lines up on the left. */
  .legal-side-title{padding-left:10px}
  .legal-side-docs a{
    display:block;padding:7px 10px;border-radius:var(--radius-sm);
    font-size:var(--fs-small);line-height:1.4;color:var(--dojo-ink-soft);
    transition:color var(--dur-ui) var(--ease-out),background var(--dur-ui) var(--ease-out);
  }
  .legal-side-docs a:hover{color:var(--dojo-ink);background:rgb(0 0 0 / .04)}
  .legal-side-docs a[aria-current="page"]{color:var(--dojo-crimson);font-weight:600;background:rgb(0 0 0 / .04)}
  .dark .legal-side-docs a{color:var(--muted-foreground)}
  .dark .legal-side-docs a:hover{color:var(--foreground);background:rgb(255 255 255 / .06)}
  .dark .legal-side-docs a[aria-current="page"]{color:var(--foreground);background:rgb(255 255 255 / .08)}

  /* the rail is the border of each link, not of the container: that way the
     active one is marked without negative margins (which the panel scroll
     would clip) */
  .legal-toc{display:flex;flex-direction:column;margin-left:10px}
  .legal-toc a{
    display:flex;gap:7px;padding:5px 10px 5px 12px;font-size:var(--fs-eyebrow);line-height:1.45;
    color:var(--dojo-ink-soft);border-left:2px solid var(--border);
    transition:color var(--dur-ui) var(--ease-out),border-color var(--dur-ui) var(--ease-out);
  }
  .legal-toc a:hover{color:var(--dojo-ink)}
  .legal-toc a.is-active{color:var(--dojo-crimson);border-left-color:var(--dojo-crimson)}
  .legal-toc a.is-sub{padding-left:26px}
  .dark .legal-toc a{color:var(--muted-foreground)}
  .dark .legal-toc a:hover{color:var(--foreground)}
  .dark .legal-toc a.is-active{color:var(--foreground);border-left-color:var(--foreground)}
  .legal-toc-num{flex-shrink:0;font-family:var(--font-mono);opacity:.55;font-variant-numeric:tabular-nums}

  /* the document body: a single measure, restrained hierarchy */
  .legal-doc{min-width:0;max-width:74ch;font-size:1.0625rem;line-height:1.72;color:var(--dojo-ink-2)}
  .dark .legal-doc{color:oklch(from var(--foreground) l c h / .82)}
  .legal-doc h2{
    font-family:var(--font-title);font-weight:700;
    font-size:clamp(1.05rem,1rem + .35vw,1.25rem);line-height:1.3;letter-spacing:-.005em;
    color:var(--foreground);margin:clamp(2.5rem,5vw,3.25rem) 0 1rem;
    scroll-margin-top:calc(var(--nav-h) + 24px);
  }
  .legal-doc>h2:first-child{margin-top:0}
  .legal-doc h3{
    font-family:var(--font-title);font-weight:700;font-size:1rem;line-height:1.35;
    color:var(--foreground);margin:2rem 0 .75rem;
    scroll-margin-top:calc(var(--nav-h) + 24px);
  }
  .legal-num{color:var(--dojo-crimson);font-family:var(--font-mono);font-weight:500;margin-right:.35em;font-variant-numeric:tabular-nums}
  .legal-doc p{margin:0 0 1.15rem}
  .legal-doc a{color:var(--dojo-crimson);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em}
  .legal-doc a:hover{text-decoration-thickness:2px}
  .dark .legal-doc a{color:oklch(0.78 0.13 25)}
  .legal-doc strong{color:var(--foreground);font-weight:600}
  .legal-doc ul{margin:0 0 1.15rem;padding-left:1.35rem;list-style:disc}
  .legal-doc ul ul{margin:.5rem 0 0}
  .legal-doc li{margin-bottom:.7rem}
  .legal-doc li::marker{color:var(--dojo-ink-soft)}
  .legal-doc .legal-defs{list-style:none;padding-left:0}
  .legal-doc .legal-defs li{
    padding-left:16px;border-left:2px solid var(--border);margin-bottom:1rem;
  }
  .legal-doc .legal-bullets li{margin-bottom:.85rem}
  .legal-affirm{
    margin-top:2.5rem;padding:1.25rem 1.35rem;border-radius:var(--radius-lg);
    background:rgb(0 0 0 / .035);border:1px solid var(--border);
    font-size:var(--fs-small);line-height:1.65;color:var(--foreground);font-weight:500;
  }
  .dark .legal-affirm{background:rgb(255 255 255 / .05)}
  .legal-aside-note{
    margin-top:2.5rem;padding:1.25rem 1.35rem;border-radius:var(--radius-lg);
    border:1px dashed var(--border);font-size:var(--fs-small);line-height:1.65;
  }
  .legal-aside-note p{margin-bottom:.75rem}
  .legal-aside-note p:last-child{margin-bottom:0}
  .legal-aside-note__label{
    font-family:var(--font-mono);font-size:var(--fs-eyebrow);letter-spacing:.12em;
    text-transform:uppercase;color:var(--dojo-ink-soft);
  }
  .dark .legal-aside-note__label{color:var(--muted-foreground)}
  .legal-foot-note{
    margin-top:clamp(2.5rem,6vw,3.5rem);padding-top:1.5rem;border-top:1px solid var(--border);
    font-size:var(--fs-small);color:var(--dojo-ink-soft);
  }
  .dark .legal-foot-note{color:var(--muted-foreground)}
  .legal-foot-note:empty{display:none}

  /* document tables: they scroll on their own, they never push the page */
  .legal-table-wrap{margin:0 0 1.5rem;overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius-lg)}
  .legal-table{width:100%;border-collapse:collapse;font-size:var(--fs-small);line-height:1.6;min-width:520px}
  .legal-table caption{
    padding:12px 16px;text-align:left;font-family:var(--font-mono);font-size:var(--fs-eyebrow);
    letter-spacing:.12em;text-transform:uppercase;color:var(--dojo-ink-soft);
    border-bottom:1px solid var(--border);
  }
  .dark .legal-table caption{color:var(--muted-foreground)}
  .legal-table th,.legal-table td{padding:12px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--border)}
  .legal-table thead th{
    font-family:var(--font-title);font-weight:700;font-size:var(--fs-eyebrow);
    letter-spacing:.04em;text-transform:uppercase;color:var(--foreground);
    background:rgb(0 0 0 / .035);
  }
  .dark .legal-table thead th{background:rgb(255 255 255 / .05)}
  .legal-table tbody th{font-weight:600;color:var(--foreground)}
  .legal-table tbody tr:last-child th,.legal-table tbody tr:last-child td{border-bottom:0}
  .legal-table th[rowspan]{border-right:1px solid var(--border);background:rgb(0 0 0 / .02)}
  .dark .legal-table th[rowspan]{background:rgb(255 255 255 / .03)}
  .legal-table--kv tbody th{width:34%;min-width:150px}

  /* ── Help centre: /<lang>/help/ (PRO-2045) ───────────────────────────
     The layout approved in PRO-2044, on the site's tokens: crimson hero with
     the search box, tiles that jump to the categories, and the articles as an
     accordion. The measure is narrower than the home: these are 17 answers to
     read, not a page to sell. Nothing here repaints the brand -- the palette is
     the one in the BRAND LAYER above, which is where the prototype had copied
     it from. */
  body.help .dojo-veil{background:oklch(from var(--background) l c h / .965)}
  .help-page .container{max-width:960px}

  /* The crimson veil at 85-90% over the closing image of the home -- what is
     underneath only gives the band texture. Both are the background of the
     section and not layers with a z-index of their own: that is what lets the
     tiles climb over the band by DOM order while the search results still open
     above the tiles. */
  .help-hero{
    position:relative;overflow:hidden;text-align:center;
    color:var(--primary-foreground);
    padding-block:clamp(2.5rem,6vw,4rem) clamp(4.5rem,9vw,5.75rem);
    background-image:
      linear-gradient(180deg,
        oklch(from var(--primary) calc(l - 0.01) c h / .85),
        oklch(from var(--primary) calc(l - 0.11) c h / .93)),
      url("../img/cta-dojo.webp");
    background-size:cover,cover;
    background-position:center,center 22%;
    background-repeat:no-repeat,no-repeat;
  }
  .help-hero .container{position:relative}
  .help-kicker{
    font-family:var(--font-mono);font-size:var(--fs-eyebrow);font-weight:500;
    letter-spacing:.18em;text-transform:uppercase;margin:0 0 14px;
    color:oklch(from var(--primary-foreground) l c h / .72);
  }
  .help-hero-title{
    font-family:var(--font-title);font-weight:800;
    font-size:clamp(1.85rem,1.3rem + 2.2vw,2.75rem);line-height:1.1;letter-spacing:-.025em;
    color:var(--primary-foreground);margin:0 0 10px;
  }
  .help-accent{color:var(--dojo-rose)}
  .help-hero-lead{
    max-width:52ch;margin:0 auto;font-size:var(--fs-lead);
    color:oklch(from var(--primary-foreground) l c h / .74);
  }

  /* search: the box floats over the hero and the results hang from it */
  .help-search{display:block;position:relative;max-width:640px;margin:clamp(1.75rem,4vw,2.25rem) auto 0}
  .help-search-box{
    display:flex;align-items:center;gap:10px;background:var(--card);
    border-radius:var(--radius-md);padding:13px 18px;box-shadow:var(--shadow-lg);
  }
  .help-search-box:focus-within{outline:2px solid var(--ring);outline-offset:2px}
  .help-search-box .lucide{font-size:18px;color:var(--muted-foreground)}
  .help-search-box input{
    width:100%;border:0;outline:0;background:transparent;
    font-family:inherit;font-size:var(--fs-small);color:var(--foreground);
  }
  .help-search-box input::placeholder{color:var(--muted-foreground)}
  .help-search-box input::-webkit-search-cancel-button{-webkit-appearance:none}
  .help-results{
    position:absolute;top:calc(100% + 10px);left:0;right:0;z-index:var(--z-dropdown);
    background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
    box-shadow:var(--shadow-lg);text-align:left;overflow-y:auto;max-height:380px;
  }
  .help-result{
    display:block;width:100%;padding:12px 18px;cursor:pointer;text-align:left;
    background:transparent;border:0;border-bottom:1px solid var(--border);
    transition:background var(--dur-ui) var(--ease-out);
  }
  .help-result:last-child{border-bottom:0}
  .help-result:hover,.help-result.is-active{background:var(--accent)}
  .help-result-cat{
    display:block;font-family:var(--font-mono);font-size:10px;font-weight:700;
    letter-spacing:.08em;text-transform:uppercase;color:var(--primary);margin-bottom:2px;
  }
  .help-result-title{display:block;font-family:var(--font-title);font-size:13.5px;font-weight:600;color:var(--foreground)}
  .help-result-empty{padding:18px;text-align:center;font-size:var(--fs-small);color:var(--muted-foreground)}

  /* the tiles climb over the hero, as in the design */
  .help-body{position:relative;margin-top:-56px;padding-bottom:clamp(3rem,7vw,5rem)}
  .help-tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-md);margin-bottom:clamp(2.5rem,6vw,4rem)}
  .help-tile{
    flex:0 1 calc((100% - 2 * var(--space-md)) / 3);
    display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
    background:var(--card);border:1px solid var(--border);border-radius:var(--radius-xl);
    padding:var(--space-lg) var(--space-md);box-shadow:var(--shadow-md);
    transition:box-shadow var(--dur-ui) var(--ease-out),transform var(--dur-ui) var(--ease-out),
               border-color var(--dur-ui) var(--ease-out);
  }
  .help-tile:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px);border-color:var(--primary)}
  .help-tile b{font-family:var(--font-title);font-size:13.5px;font-weight:600;color:var(--foreground)}
  .help-tile span{font-size:11.5px;color:var(--muted-foreground)}
  @media (max-width:880px){.help-tile{flex-basis:calc((100% - var(--space-md)) / 2)}}

  .help-icon{
    display:grid;place-items:center;flex-shrink:0;width:48px;height:48px;
    border-radius:var(--radius-sm);background:var(--accent);color:var(--primary);
  }
  .help-icon svg{width:26px;height:26px}

  .help-cat{margin-bottom:clamp(2.5rem,6vw,4rem);scroll-margin-top:calc(var(--nav-h) + 16px)}
  .help-cat-head{display:flex;align-items:center;gap:14px;margin-bottom:var(--space-md)}
  .help-cat-head .help-icon{width:40px;height:40px}
  .help-cat-head .help-icon svg{width:22px;height:22px}
  .help-cat-title{font-family:var(--font-title);font-size:1.4rem;font-weight:700;color:var(--foreground);margin:0}
  .help-cat-count{font-family:var(--font-mono);font-size:12px;color:var(--muted-foreground);margin-left:auto;white-space:nowrap}

  /* the articles are <details>: they open with JS off, and help.js only adds
     the "one at a time" */
  .help-list{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);overflow:hidden}
  .help-article{border-bottom:1px solid var(--border);scroll-margin-top:calc(var(--nav-h) + 16px)}
  .help-article:last-child{border-bottom:0}
  .help-article-q{
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    padding:15px 20px;cursor:pointer;list-style:none;
    transition:background var(--dur-ui) var(--ease-out);
  }
  .help-article-q::-webkit-details-marker{display:none}
  .help-article-q:hover{background:var(--muted)}
  .help-article-q b{font-family:var(--font-title);font-size:13.5px;font-weight:600;color:var(--foreground)}
  .help-chevron{font-size:16px;color:var(--muted-foreground);transition:transform var(--dur-ui) var(--ease-out)}
  .help-article[open] .help-chevron{transform:rotate(180deg)}
  .help-answer{animation:help-open .16s var(--ease-out) both}
  .help-answer p{padding:0 20px 18px;max-width:68ch;font-size:13px;line-height:1.7;color:var(--muted-foreground)}
  @keyframes help-open{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
  /* where the search left the visitor */
  .help-article.is-hit>.help-article-q{background:var(--accent)}

  .help-support{
    display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);flex-wrap:wrap;
    background:var(--card);border:1px solid var(--border);border-radius:var(--radius-xl);
    padding:var(--space-lg);box-shadow:var(--shadow-sm);
  }
  .help-support b{display:block;font-family:var(--font-title);font-size:15px;color:var(--foreground);margin-bottom:3px}
  .help-support span{font-size:12.5px;color:var(--muted-foreground)}

/* ═══════════════════════════════════════════════════════════════════════════
     PRICING · plan showcase (PRO-1811). Ported from the admin's subscription
     screen so the landing and the in-product upgrade screen show the same card.
     ═══════════════════════════════════════════════════════════════════════════ */
  /* Type scale the ported markup expects. Kept apart from the site scale
     (--fs-*) because these come from the admin and are absolute, not fluid. */
  :root{
    --ts-kpi-value:34px;
    --ts-section-title:20px;
    --ts-subsection-title:16px;
    --ts-label:12px;
    --ts-body:14px;
  }

  .plan-grid{display:grid;grid-template-columns:repeat(var(--plan-n,4),minmax(0,1fr));gap:var(--space-md);align-items:stretch}
  @media(max-width:1100px){.plan-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media(max-width:767px){.plan-grid{grid-template-columns:1fr}}

  .plan-card{position:relative;display:flex;flex-direction:column;gap:14px;
    background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm);padding:20px var(--space-md) var(--space-md)}
  .plan-card__cta{margin-top:auto;display:flex}
  .plan-card__cta .btn{width:100%}
  .plan-card__top{display:flex;align-items:flex-start;gap:var(--space-sm)}
  .plan-card__name{font-family:var(--font-title);font-size:var(--ts-subsection-title);font-weight:700;color:var(--foreground)}
  /* Two lines reserved: with taglines of different length the price of every
     card has to sit on the same baseline or the grid reads crooked. */
  .plan-card__tagline{font-size:13px;color:var(--muted-foreground);line-height:1.45;margin-top:2px;min-height:calc(2 * 1.45em)}
  .plan-card__price{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
  .plan-card__amount{font-family:var(--font-title);font-size:var(--ts-kpi-value);font-weight:800;line-height:1;color:var(--foreground);font-variant-numeric:tabular-nums}
  .plan-card__amount--quote{font-size:var(--ts-section-title)}
  /* While Paddle resolves the local amount (PRO-1837). What is underneath is
     the USD figure the build already wrote, so there is nothing to reserve and
     nothing moves: the box is the same before, during and after. */
  [data-plan-amount][aria-busy="true"]{opacity:.4;transition:opacity .18s ease}
  .plan-card__per{font-size:13px;color:var(--muted-foreground)}
  /* Empty on the monthly-only showcase, and that is why it keeps its height:
     it is the line that will carry the annual saving, and reserving it now
     means adding the yearly cycle does not move every card down. */
  .plan-card__save{font-family:var(--font-mono);font-size:var(--ts-label);color:var(--muted-foreground);margin-top:6px;min-height:16px}
  .plan-card__meta{background:var(--muted);border-radius:var(--radius-md);padding:10px 12px;display:flex;flex-direction:column;gap:2px}
  .plan-card__meta b{font-size:13px;font-weight:600;color:var(--foreground)}
  .plan-card__sep{border:none;border-top:1px solid var(--border);margin:16px 0;padding:0}
  .plan-card__feats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
  .plan-card__feats li{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:var(--secondary-foreground);line-height:1.4}
  .plan-card__feats .lucide{font-size:15px;flex-shrink:0;margin-top:1px;color:var(--primary)}
  .plan-card--recomendado{border-color:var(--primary)}
  .plan-card__badge{position:absolute;top:0;left:var(--space-md);transform:translateY(-50%);
    display:inline-flex;align-items:center;gap:5px;
    background:var(--primary);color:var(--primary-foreground);
    font-family:var(--font-mono);font-size:var(--ts-label);letter-spacing:.4px;
    padding:3px 9px;border-radius:var(--radius-sm)}
  .plan-card__badge .lucide{font-size:13px}

  .plan-fineprint{margin-top:var(--space-lg);padding-top:var(--space-md);border-top:1px solid var(--border);
    display:flex;flex-direction:column;gap:6px}
  .plan-fineprint div{font-family:var(--font-mono);font-size:var(--ts-label);color:var(--muted-foreground);line-height:1.5;width:100%}

  /* ── full comparison ── */
  .plan-cmp-wrap{margin-top:var(--space-lg)}
  .disclose{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--card);overflow:hidden}
  .disclose__trigger{display:flex;align-items:center;gap:10px;width:100%;
    padding:12px var(--space-md);border:none;background:none;cursor:pointer;
    font-family:inherit;text-align:left;color:var(--foreground)}
  .disclose__trigger:hover{background:var(--muted)}
  .disclose__chev{font-size:16px;color:var(--muted-foreground);transition:transform .18s ease;flex-shrink:0}
  .disclose.open .disclose__chev{transform:rotate(90deg)}
  .disclose__title{font-size:var(--ts-body);font-weight:600}
  .disclose__hint{font-family:var(--font-mono);font-size:var(--ts-label);color:var(--muted-foreground);margin-left:auto}
  .disclose__body{display:none;padding:0 var(--space-md) var(--space-md);border-top:1px solid var(--border)}
  .disclose.open .disclose__body{display:block}
  .disclose__body .full-table{margin-top:var(--space-md)}

  .full-table{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--card);overflow:hidden}
  table.tbl{width:100%;border-collapse:collapse;font-size:14px}
  .tbl th{text-align:left;font-family:var(--font-body);font-size:12px;font-weight:500;
    color:var(--muted-foreground);padding:10px 14px;border-bottom:1px solid var(--border);white-space:nowrap}
  .tbl td{padding:9px 14px;border-bottom:1px solid var(--border);color:var(--foreground);vertical-align:middle}
  .tbl tbody tr:last-child td{border-bottom:none}
  .tbl tbody tr:hover td{background:var(--muted)}
  .tbl .num{text-align:right;font-variant-numeric:tabular-nums}

  /* The first column stays put: with four plans the table scrolls sideways and
     without this you lose sight of which parameter the row is about. */
  .plan-cmp{overflow-x:auto}
  .plan-cmp .tbl{min-width:560px}
  .plan-cmp .tbl td.num{white-space:normal}
  /* Values are centred here rather than right-aligned as in the admin: most of
     them are words ("A medida", "hasta 25"), not figures to compare digit by
     digit. The parameter column stays left. */
  .plan-cmp .tbl th.num,
  .plan-cmp .tbl td.num{text-align:center}
  .plan-cmp .tbl th:first-child,
  .plan-cmp .tbl td:first-child{position:sticky;left:0;z-index:1;background:var(--card)}
  .plan-cmp .tbl tbody tr:hover td:first-child{background:var(--muted)}
  .dark .plan-cmp .tbl th:first-child,
  .dark .plan-cmp .tbl td:first-child{background:var(--card)}
  .dark .plan-cmp .tbl tbody tr:hover td:first-child{background:var(--muted)}

  @media(max-width:767px){
    /* Stacked, the recommended plan leads instead of sitting second. */
    .plan-card--recomendado{order:-1}
    /* The hint competes with the title for the width and wraps both. On mobile
       the title alone is enough: the detail is in the table. */
    .disclose__hint{display:none}
  }
  .legal-table p{margin:0 0 .6rem}
  .legal-table p:last-child{margin-bottom:0}
  .legal-table ul{margin:.4rem 0 0;padding-left:1.15rem}
  .legal-table li{margin-bottom:.35rem}

  /* /legal/ hub */
  .legal-page--hub .legal-head{max-width:58ch}
  .legal-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:16px;list-style:none;padding:0}
  .legal-card{
    display:flex;flex-direction:column;gap:10px;height:100%;
    padding:clamp(1.25rem,3vw,1.6rem);border:1px solid var(--border);border-radius:var(--radius-xl);
    background:oklch(from var(--card) l c h / .55);
    transition:border-color var(--dur-ui) var(--ease-out),transform var(--dur-ui) var(--ease-out),box-shadow var(--dur-ui) var(--ease-out);
  }
  .legal-card:hover{border-color:var(--dojo-crimson);transform:translateY(-2px);box-shadow:var(--shadow-md)}
  .legal-card h2{font-family:var(--font-title);font-size:1.15rem;font-weight:800;letter-spacing:-.01em;color:var(--foreground);margin:0}
  .legal-card p{font-size:var(--fs-small);line-height:1.6;color:var(--dojo-ink-soft);margin:0}
  .dark .legal-card p{color:var(--muted-foreground)}
  .legal-card-meta{
    margin-top:auto;display:flex;align-items:center;gap:8px;
    font-family:var(--font-mono);font-size:var(--fs-eyebrow);letter-spacing:.06em;
    text-transform:uppercase;color:var(--dojo-crimson);
  }
  .legal-hub-extra{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));
    gap:clamp(1.5rem,4vw,3rem);
    margin-top:clamp(3rem,7vw,4.5rem);padding-top:clamp(2rem,5vw,3rem);border-top:1px solid var(--border);
  }
  .legal-hub-block h2{font-family:var(--font-title);font-size:1rem;font-weight:700;color:var(--foreground);margin:0 0 12px}
  .legal-hub-block p{font-size:var(--fs-small);line-height:1.65;color:var(--dojo-ink-soft);margin:0 0 .6rem}
  .dark .legal-hub-block p{color:var(--muted-foreground)}
  .legal-hub-block a{color:var(--dojo-crimson);text-decoration:underline;text-underline-offset:.15em}
  .dark .legal-hub-block a{color:oklch(0.78 0.13 25)}
  .legal-contacts{font-size:var(--fs-small);margin:0}
  .legal-contacts dt{color:var(--dojo-ink-soft);margin-top:10px}
  .legal-contacts dt:first-child{margin-top:0}
  .dark .legal-contacts dt{color:var(--muted-foreground)}
  .legal-contacts dd{margin:0 0 2px}
  .legal-entity{
    margin-top:clamp(2.5rem,6vw,3.5rem);font-size:var(--fs-eyebrow);line-height:1.6;
    color:var(--dojo-ink-soft);
  }
  .dark .legal-entity{color:var(--muted-foreground)}

  @media (max-width:900px){
    /* minmax(0,...) and not 1fr: with 1fr the min-content of the tables (520px)
       stretches the column and overflows the page instead of scrolling the
       table */
    .legal-layout{grid-template-columns:minmax(0,1fr);gap:2rem}
    .legal-side{
      position:static;max-height:none;padding:1rem 1.15rem;
      border:1px solid var(--border);border-radius:var(--radius-lg);
    }
    /* the index must not push the text half a screen down: it scrolls inside */
    .legal-toc{max-height:30vh;overflow-y:auto}
    .legal-doc{max-width:none}
  }