/* Invokard — ruled geometric chrome against maximalist comic art.
   Motifs borrowed from the cards themselves: chamfered corners, double keylines,
   Ben-Day halftone. Zero border-radius anywhere. */

:root{
  --white:#FFFFFF;
  --ink:#0C0F16;
  --ink-2:#565C6B;
  --line:#D6D8DE;
  --line-soft:#E6E7EB;
  --panel:#F7F7F9;

  --accent:#E4432B;        /* fills and rules — no text */
  --accent-ink:#C4351F;    /* text and buttons — 5.4:1 on white */
  --gold:#F5B942;

  --deck-core:#C9971A;
  --deck-zero:#8A93A4;
  --deck-dev:#5B5FE0;
  --deck-marketing:#E85F5C;
  --deck-creator:#0FA671;
  --deck-data:#17A8C4;
  --deck-strategy:#DE8B0B;
  --deck-nexus:#A874E8;
  --deck-academy:#1BAD9E;
  --deck-life:#7FB222;
  --deck-pro:#C87B3E;

  --font:"Archivo",system-ui,-apple-system,sans-serif;
  --display:"Archivo Black","Archivo",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;

  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px;
  --maxw:1320px;
  --nav-h:66px;

  --chamfer:10px;
}

*,*::before,*::after{ box-sizing:border-box; border-radius:0; margin:0; padding:0; }

html{
  scroll-behavior:smooth;
  scroll-snap-type:y proximity;
  scroll-padding-top:var(--nav-h);
}
body{
  background:var(--white); color:var(--ink);
  font-family:var(--font); font-size:17.5px; line-height:1.62; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; text-align:left; }

/* ── Display type: the single most important rule here ──── */
h1,h2,h3,.sec-title,.cta h2,.hstat b,.stat b,.panel-head h3{ line-height:.96; }
.sec-title,.cta h2{ line-height:.94; letter-spacing:-.015em; }
h1{ line-height:.94; letter-spacing:-.02em; }
.step h3,.card-cell .name,.cd-body h2{ line-height:1.16; }

/* Sections span the full viewport; only their CONTENT is constrained. A capped
   .sheet left dark blocks floating as a narrow strip between white margins. */
.sheet{ width:100%; }
.inner,.block-in,.hero-in,.foot-in,.origin-in{
  max-width:calc(var(--maxw) + var(--s4) * 2); margin-inline:auto; width:100%;
  padding-inline:var(--s4); }
.block-in > .sec-head{ margin-inline:0; }
.block{ scroll-snap-align:start; width:100%; min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding-block:var(--s7); border-bottom:1px solid var(--line); }
.hero,.cta{ padding-block:0; }
.block-in{ width:100%; }
.strip{ scroll-snap-align:none; border-bottom:1px solid var(--line); }

.skip{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--ink); color:#fff; padding:12px 18px; font-weight:600; }
.skip:focus{ left:0; }
:focus-visible{ outline:2.5px solid var(--accent-ink); outline-offset:2px; }

.star{ display:inline-block; width:11px; height:11px; background:var(--accent); flex:0 0 auto;
  clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }

/* Chamfered corners — the card frame's cut-corner motif, not a radius. */
.chamfer{ clip-path:polygon(var(--chamfer) 0,100% 0,100% calc(100% - var(--chamfer)),calc(100% - var(--chamfer)) 100%,0 100%,0 var(--chamfer)); }

/* ── Reveal ─────────────────────────────────────────────── */
.js .reveal{ opacity:0; transform:translateY(22px); transition:opacity .65s cubic-bezier(.2,.7,.2,1),transform .65s cubic-bezier(.2,.7,.2,1); }
.js .reveal.in{ opacity:1; transform:none; }
.js .reveal-stagger > *{ opacity:0; transform:translateY(18px); transition:opacity .55s cubic-bezier(.2,.7,.2,1),transform .55s cubic-bezier(.2,.7,.2,1); }
.js .reveal-stagger.in > *{ opacity:1; transform:none; }
.js .reveal-stagger.in > *:nth-child(1){ transition-delay:.04s }
.js .reveal-stagger.in > *:nth-child(2){ transition-delay:.10s }
.js .reveal-stagger.in > *:nth-child(3){ transition-delay:.16s }
.js .reveal-stagger.in > *:nth-child(4){ transition-delay:.22s }
.js .reveal-stagger.in > *:nth-child(5){ transition-delay:.28s }

/* ── Nav ────────────────────────────────────────────────── */
.nav{ position:sticky; top:0; z-index:40; background:rgba(255,255,255,.94); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.nav-in{ max-width:var(--maxw); margin-inline:auto; display:flex; align-items:stretch; height:var(--nav-h); border-inline:1px solid var(--line); }
.logo{ display:flex; align-items:center; gap:9px; padding-inline:var(--s3); font-family:var(--display); font-size:15px; letter-spacing:.15em; border-right:1px solid var(--line); }
.links{ display:flex; margin-right:auto; }
.links a{ display:flex; align-items:center; padding-inline:22px; font-size:15px; font-weight:500; color:var(--ink-2); border-right:1px solid var(--line); transition:background .15s,color .15s; }
.links a:hover{ background:var(--ink); color:var(--white); }
/* Flags are CSS, not emoji: emoji flags do not render at all on Windows. */
.lang-switch{ display:flex; align-items:center; border-left:1px solid var(--line); }
.flag{ display:flex; align-items:center; justify-content:center; width:52px; align-self:stretch;
  border-right:1px solid var(--line); opacity:.4; transition:opacity .15s,background .15s; }
.flag:hover{ opacity:1; background:var(--panel); }
.flag.active{ opacity:1; }
.flag.active .fl{ outline:2px solid var(--accent); outline-offset:2px; }
.fl{ display:block; width:26px; height:18px; border:1px solid rgba(12,15,22,.28); }
.fl-es{ background:linear-gradient(to bottom,#AA151B 0 25%,#F1BF00 25% 75%,#AA151B 75% 100%); }
.fl-en{ background:
   linear-gradient(to bottom,transparent 40%,#C8102E 40% 60%,transparent 60%),
   linear-gradient(to right,transparent 40%,#C8102E 40% 60%,transparent 60%),
   linear-gradient(to bottom,transparent 33%,#fff 33% 67%,transparent 67%),
   linear-gradient(to right,transparent 33%,#fff 33% 67%,transparent 67%),
   #012169; }
.vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media (max-width:860px){ .flag{ width:44px } }

.nav-cta{ display:flex; align-items:center; padding-inline:var(--s3); font-size:15px; font-weight:700; background:var(--accent-ink); color:var(--white); border-left:1px solid var(--line); transition:background .15s; white-space:nowrap; }
.nav-cta:hover{ background:var(--ink); }

/* Acceso al Vault desde la barra. Sobrio a proposito: el CTA rojo es el que
   tiene que ganar la mirada, este solo tiene que estar donde se busca. */
.nav-signin{ display:flex; align-items:center; padding-inline:var(--s3); font-size:15px;
  font-weight:600; color:var(--ink-2); border-left:1px solid var(--line);
  white-space:nowrap; transition:background .15s,color .15s; }
.nav-signin:hover{ background:var(--ink); color:var(--white); }
.nav-signin.is-vault{ color:var(--accent-ink); font-weight:700; }
.nav-signin.is-vault:hover{ color:var(--white); }
@media (max-width:860px){ .links{ display:none } .logo{ margin-right:auto } }

/* Por debajo de ~560px ya no caben logo + banderas + CTA con la métrica de
   escritorio, y el CTA se salía del viewport: a 320px el documento medía 427px
   en inglés y 488px en castellano, es decir TODA la portada hacía scroll
   horizontal, no solo la barra. El texto del CTA vive en el HTML que genera
   build_site.py, así que no se puede acortar desde aquí.
   Se aprieta la métrica y se le quita el nowrap al CTA para que parta en dos
   líneas dentro de los 66px de la barra: así el reclamo —que es el único punto
   de conversión de la barra— sigue visible y el logotipo no se recorta.
   Medido con el CTA más largo de los dos idiomas ("Consigue 9 cartas gratis"):
   a 320px suma 318px de 320 disponibles. Nada baja de 12.5px.
   Todo va colgado de .nav-in a propósito: .logo lo reutiliza el pie y .flag lo
   reutilizan la bóveda y las páginas legales. Sin ese ancla, apretar la barra
   de la portada encogería también el logotipo del pie y las banderas de la
   zona privada. */
@media (max-width:560px){
  .nav-in{ min-width:0; }
  .nav-in .logo{ padding-inline:var(--s2); font-size:12.5px; letter-spacing:.08em; gap:7px; flex:0 0 auto; }
  .nav-in .flag{ width:34px; }
  .nav-in .nav-cta{ padding-inline:10px; font-size:12.5px; white-space:normal; line-height:1.15; text-align:center; min-width:0; }
}

/* ── Hero ───────────────────────────────────────────────── */
.hero{ background:var(--ink); color:var(--white); position:relative; overflow:hidden; }
.hero-in{ display:grid; grid-template-columns:1.06fr .94fr; position:relative; }
.hero::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.20) 1.5px,transparent 1.5px); background-size:9px 9px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 78% 45%,#000,transparent 72%);
  mask-image:radial-gradient(ellipse 70% 60% at 78% 45%,#000,transparent 72%); }
.hero-txt{ padding:var(--s6) var(--s5) var(--s6) 0; border-right:1px solid rgba(255,255,255,.14); display:flex; flex-direction:column; justify-content:center; position:relative; }
.kicker{ display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin-bottom:var(--s3); }
.kicker .star{ background:var(--gold); }
h1{ font-family:var(--display); font-size:clamp(38px,4.5vw,62px); margin-bottom:var(--s3); max-width:15ch; text-wrap:balance; }
h1 .hl{ color:var(--accent); }
.lede{ max-width:50ch; font-size:19px; color:rgba(255,255,255,.70); margin-bottom:var(--s4); }
.lede strong{ color:var(--white); font-weight:600; }
.ctas{ display:flex; flex-wrap:wrap; margin-bottom:var(--s5); }
.btn{ font-size:15px; font-weight:700; padding:16px 30px; background:var(--accent); color:var(--white); border:1px solid var(--accent); transition:background .15s,border-color .15s,transform .15s; }
.btn:hover{ background:var(--white); color:var(--ink); border-color:var(--white); transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--white); border-color:rgba(255,255,255,.3); border-left:0; }
.btn-ghost:hover{ background:rgba(255,255,255,.12); color:var(--white); border-color:rgba(255,255,255,.55); }
.hero-stats{ display:flex; border-top:1px solid rgba(255,255,255,.14); max-width:520px; }
.hstat{ padding:var(--s3) var(--s3) 0 0; flex:1; }
.hstat + .hstat{ border-left:1px solid rgba(255,255,255,.14); padding-left:var(--s3); }
.hstat b{ display:block; font-family:var(--display); font-size:30px; font-variant-numeric:tabular-nums; margin-bottom:6px; }
.hstat span{ display:block; max-width:16ch; font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.55); }

.hero-cards{ position:relative; padding:var(--s5) var(--s3); min-height:470px; }
.hero-cards .hc{ position:absolute; top:50%; left:50%; width:min(40%,250px); opacity:0; }
.js .hero-cards .hc-l{ transform:translate(-150%,-50%) rotate(-26deg); z-index:1; filter:brightness(.62); transition:transform .9s cubic-bezier(.2,.8,.2,1) .22s,opacity .6s ease .22s; }
.js .hero-cards .hc-r{ transform:translate(50%,-50%) rotate(26deg); z-index:1; filter:brightness(.62); transition:transform .9s cubic-bezier(.2,.8,.2,1) .34s,opacity .6s ease .34s; }
.js .hero-cards .hc-m{ width:min(58%,368px); transform:translate(-50%,-34%) scale(.88); z-index:2; transition:transform .9s cubic-bezier(.2,.8,.2,1) .06s,opacity .45s ease .06s; }
.hero-cards.play .hc,.no-js .hero-cards .hc{ opacity:1; box-shadow:0 38px 84px -26px rgba(0,0,0,.75); }
.hero-cards.play .hc-l,.no-js .hero-cards .hc-l{ transform:translate(-50%,-50%) translateX(-62%) rotate(-11deg); }
.hero-cards.play .hc-r,.no-js .hero-cards .hc-r{ transform:translate(-50%,-50%) translateX(62%) rotate(11deg); }
.hero-cards.play .hc-m,.no-js .hero-cards .hc-m{ transform:translate(-50%,-50%) scale(1); outline:1px solid rgba(245,185,66,.5); outline-offset:5px; box-shadow:0 44px 96px -22px rgba(0,0,0,.8); }
@media (max-width:960px){
  .block{ justify-content:flex-start }
  .hero-in{ grid-template-columns:1fr }
  .hero-txt{ border-right:0; border-bottom:1px solid rgba(255,255,255,.14); padding:calc(var(--nav-h) + var(--s4)) 0 var(--s4) }
  .hero-cards{ padding:var(--s4) 0; min-height:340px }
  .hero-cards .hc-l,.hero-cards .hc-r{ display:none }
}

/* ── Compat strip ───────────────────────────────────────── */
.compat{ padding:var(--s3) 0; display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; }
.compat .lbl{ font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); }
.compat .tools{ display:flex; gap:var(--s3); flex-wrap:wrap; font-weight:600; font-size:16px; color:var(--ink-2); }

/* ── Section heads ──────────────────────────────────────── */
.sec-head{ padding:0 0 var(--s4); max-width:66ch; width:100%; }
.sec-tag{ display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink); margin-bottom:var(--s2); }
.sec-title{ font-family:var(--display); font-size:clamp(28px,3.3vw,44px); margin-bottom:var(--s2); text-wrap:balance; }
.sec-desc{ font-size:17.5px; color:var(--ink-2); max-width:60ch; }
.on-dark{ color:var(--white); }
.on-dark .sec-tag{ color:var(--gold); }
.on-dark .sec-tag .star{ background:var(--gold); }
.on-dark .sec-desc{ color:rgba(255,255,255,.66); }

/* ── Tabs ───────────────────────────────────────────────── */
.tabs-wrap{ position:sticky; top:var(--nav-h); z-index:20; background:var(--white); }
.tabs-bar{ display:grid; grid-template-columns:repeat(6,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--white); }
.tab-btn{ display:flex; align-items:center; gap:8px; min-width:0; padding:15px 14px; font-size:15px; font-weight:600; color:var(--ink-2); border-right:1px solid var(--line); transition:background .15s,color .15s; overflow:hidden; }
.tab-btn > span:not(.n){ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tab-btn:nth-child(6n){ border-right:0; }
.tab-btn:nth-child(-n+6){ border-bottom:1px solid var(--line); }
.tab-btn i{ width:9px; height:9px; flex:0 0 auto; }
.tab-btn .n{ margin-left:auto; font-family:var(--mono); font-size:12px; color:var(--ink-2); }
.tab-btn:hover{ background:var(--panel); color:var(--ink); }
.tab-btn.active{ background:var(--ink); color:var(--white); }
.tab-btn.active .n{ color:rgba(255,255,255,.6); }
@media (max-width:1100px){
  .tabs-bar{ grid-template-columns:repeat(4,1fr) }
  .tab-btn:nth-child(6n){ border-right:1px solid var(--line) }
  .tab-btn:nth-child(4n){ border-right:0 }
  .tab-btn:nth-child(-n+6){ border-bottom:1px solid var(--line) }
}
@media (max-width:620px){
  .inner,.block-in,.hero-in,.foot-in,.origin-in{ padding-inline:var(--s3) }
}

/* En movil las doce pestañas en rejilla ocupaban seis filas — 379px, casi la
   mitad de la pantalla, y encima pegadas. Pasan a una sola fila que se desliza:
   48px en vez de 379. El degradado del borde derecho avisa de que hay mas. */
@media (max-width:760px){
  .tabs-bar{ display:flex; flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; -ms-overflow-style:none; }
  .tabs-bar::-webkit-scrollbar{ display:none; }
  .tab-btn{ flex:0 0 auto; scroll-snap-align:start; padding:13px 14px; font-size:14px;
    border-right:1px solid var(--line); border-bottom:0; gap:7px; }
  .tab-btn > span:not(.n){ overflow:visible; text-overflow:clip; }
  .tab-btn .n{ margin-left:4px; }
  .tab-btn:last-child{ border-right:0; }
  /* El degradado vive en el contenedor, no en la barra: dentro se desplazaria.
     OJO: NO poner position:relative aqui. La barra ya es sticky (linea ~214) y
     eso basta para anclar el ::after. Ponerlo la degradaba a relative con su
     top:66px intacto, y un relative con top DESPLAZA sin mover el layout: la
     barra se montaba 66px encima de la primera fila de cartas y las cortaba. */
  .tabs-wrap::after{ content:""; position:absolute; top:0; right:0; bottom:0; width:28px;
    pointer-events:none; background:linear-gradient(to right,transparent,var(--white)); }
}

.tab-panel{ padding:var(--s4) 0; width:100%; }
.tab-panel[hidden]{ display:none; }
.js .panel-in .card-cell{ animation:cellIn .42s cubic-bezier(.2,.7,.2,1) both; }
.js .panel-in .card-cell:nth-child(1){animation-delay:.01s} .js .panel-in .card-cell:nth-child(2){animation-delay:.03s}
.js .panel-in .card-cell:nth-child(3){animation-delay:.05s} .js .panel-in .card-cell:nth-child(4){animation-delay:.07s}
.js .panel-in .card-cell:nth-child(5){animation-delay:.09s} .js .panel-in .card-cell:nth-child(6){animation-delay:.11s}
@keyframes cellIn{ from{ opacity:0; transform:translateY(12px) } to{ opacity:1; transform:none } }

.panel-head{ display:flex; align-items:baseline; gap:var(--s2); margin-bottom:var(--s4); padding-left:var(--s2); border-left:5px solid var(--d); flex-wrap:wrap; }
.panel-head h3{ font-family:var(--display); font-size:26px; }
.panel-head p{ color:var(--ink-2); font-size:15.5px; }

/* ── The wall ───────────────────────────────────────────── */
.wall{ display:grid; grid-template-columns:repeat(auto-fill,minmax(196px,1fr)); gap:var(--s4) var(--s3); }
@media (max-width:560px){ .wall{ grid-template-columns:repeat(2,1fr); gap:var(--s2) 10px } .tab-panel{ padding:var(--s3) var(--s2) } }
.card-cell{ display:block; min-width:0; perspective:900px; content-visibility:auto; contain-intrinsic-size:auto 250px; }
.card-cell:active .thumb{ transform:scale(.985); }
.card-cell .thumb{ display:block; position:relative; overflow:hidden;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transform-style:preserve-3d;
  transition:transform .42s cubic-bezier(.2,1.25,.4,1),box-shadow .25s;
  box-shadow:0 10px 22px -12px rgba(12,15,22,.4); }
.card-cell .thumb img{ width:100%; aspect-ratio:3/4; object-fit:cover; }
/* foil sheen — follows the pointer, invisible until hover */
.card-cell .thumb::after{ content:""; position:absolute; inset:0; opacity:0; transition:opacity .28s; pointer-events:none;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.42),rgba(255,255,255,.07) 34%,transparent 60%); }
.card-cell:hover .thumb,.card-cell:focus-visible .thumb{ box-shadow:0 24px 46px -16px rgba(12,15,22,.55); }
.card-cell:hover .thumb::after{ opacity:1; }
.card-cell .meta{ display:flex; align-items:center; gap:7px; margin-top:10px; }
.card-cell .sw{ width:8px; height:8px; background:var(--d); flex:0 0 auto; }
.card-cell .name{ font-size:16px; font-weight:600; }
.card-cell:hover .name{ color:var(--accent-ink); }

/* ── Origin (the five machinery cards) ──────────────────── */
.origin{ background:var(--ink); position:relative; overflow:hidden; }
.origin::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.14) 1.4px,transparent 1.4px); background-size:9px 9px; }
.origin-in{ position:relative; padding-block:var(--s5); }
.origin-grid{ display:grid; grid-template-columns:repeat(5,1fr); border-top:1px solid rgba(255,255,255,.14); }
.origin-cell{ display:block; padding:var(--s3); border-left:1px solid rgba(255,255,255,.14); color:var(--white); perspective:800px; }
.origin-cell:first-child{ border-left:0; }
.origin-cell img{ width:100%; margin-bottom:var(--s2); box-shadow:0 16px 34px -14px rgba(0,0,0,.75);
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .35s cubic-bezier(.2,.7,.2,1); }
.origin-cell .oc-badge{ display:block; font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--d); margin-bottom:8px; }
.origin-cell .oc-head{ display:block; font-family:var(--display); font-size:18px; line-height:1.1; margin-bottom:8px; }
.origin-cell .oc-line{ display:block; font-size:16px; line-height:1.55; color:rgba(255,255,255,.62); }
.origin-cell:hover .oc-head{ color:var(--d); }
@media (max-width:1080px){ .origin-grid{ grid-template-columns:repeat(3,1fr) } .origin-cell:nth-child(3n+1){ border-left:0 } .origin-cell:nth-child(n+4){ border-top:1px solid rgba(255,255,255,.14) } }
@media (max-width:680px){ .origin-grid{ grid-template-columns:repeat(2,1fr) } .origin-cell:nth-child(3n+1){ border-left:1px solid rgba(255,255,255,.14) } .origin-cell:nth-child(2n+1){ border-left:0 } .origin-cell:nth-child(n+3){ border-top:1px solid rgba(255,255,255,.14) } }

/* ── How it works ───────────────────────────────────────── */
#how{ background-image:radial-gradient(rgba(12,15,22,.09) 1.3px,transparent 1.3px); background-size:8px 8px; }
.steps{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.step{ position:relative; padding:var(--s5) var(--s3) var(--s6); border-left:1px solid var(--line); background:var(--white); }
.step:first-child{ border-left:0; }
.step .num{ font-family:var(--display); font-size:clamp(64px,6.5vw,104px); line-height:.8; color:transparent;
  -webkit-text-stroke:1.5px var(--line); margin-bottom:-18px; }
.step h3{ font-size:19px; font-weight:700; margin-bottom:10px; position:relative; }
.step p{ font-size:16px; color:var(--ink-2); }
@media (max-width:900px){ .steps{ grid-template-columns:repeat(2,1fr) } .step:nth-child(2n+1){ border-left:0 } .step:nth-child(n+3){ border-top:1px solid var(--line) } }
@media (max-width:520px){ .steps{ grid-template-columns:1fr } .step{ border-left:0!important } .step + .step{ border-top:1px solid var(--line) } }

/* ── Plans ─────────────────────────────────────────────── */
.plans{ display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.plan{ padding:var(--s5) var(--s4); border-left:1px solid var(--line); display:flex; flex-direction:column; }
.plan:first-child{ border-left:0; }
.plan-full{ background:var(--ink); color:var(--white); position:relative; }
.plan-full::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.13) 1.4px,transparent 1.4px); background-size:9px 9px; }
.plan > *{ position:relative; }
.plan-badge{ display:inline-block; width:fit-content; font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  background:var(--accent); color:#fff; padding:6px 11px; margin-bottom:var(--s3); }
.plan h3{ font-family:var(--display); font-size:19px; margin-bottom:var(--s2); }
.plan-price{ display:flex; align-items:baseline; gap:6px; margin-bottom:var(--s3); }
.plan-price b{ font-family:var(--display); font-size:clamp(40px,4.6vw,58px); line-height:.9; letter-spacing:-.02em; }
.plan-price span{ font-family:var(--mono); font-size:13px; color:var(--ink-2); }
.plan-full .plan-price span{ color:rgba(255,255,255,.6); }
.plan-desc{ font-size:16px; color:var(--ink-2); margin-bottom:var(--s3); }
.plan-full .plan-desc{ color:rgba(255,255,255,.7); }
.plan ul{ list-style:none; margin-bottom:var(--s4); display:grid; gap:11px; }
.plan li{ position:relative; padding-left:22px; font-size:16px; }
.plan li::before{ content:""; position:absolute; left:0; top:.58em; width:8px; height:8px; background:var(--accent); }
.plan-full li::before{ background:var(--gold); }
.plan .btn{ width:fit-content; margin-top:auto; }
.btn-plain{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn-plain:hover{ background:var(--ink); color:var(--white); border-color:var(--ink); transform:translateY(-2px); }
.plan-note{ margin-top:14px; font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--ink-2); }
.plan-full .plan-note{ color:rgba(255,255,255,.45); }
@media (max-width:780px){ .plans{ grid-template-columns:1fr } .plan{ border-left:0 } .plan + .plan{ border-top:1px solid var(--line) } }

/* ── CTA ────────────────────────────────────────────────── */
.cta{ text-align:center; padding:var(--s6) 0; background:var(--ink); color:var(--white); position:relative; overflow:hidden; border-bottom:0; }
.cta::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.16) 1.5px,transparent 1.5px); background-size:9px 9px;
  -webkit-mask-image:radial-gradient(ellipse 60% 70% at 50% 50%,#000,transparent 70%);
  mask-image:radial-gradient(ellipse 60% 70% at 50% 50%,#000,transparent 70%); }
.cta > *{ position:relative; }
.cta-line{ font-family:var(--mono); font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:var(--s3); }
.cta h2{ font-family:var(--display); font-size:clamp(32px,4.4vw,54px); margin-bottom:var(--s2); max-width:16ch; margin-inline:auto; text-wrap:balance; }
.cta p{ color:rgba(255,255,255,.66); font-size:18px; max-width:46ch; margin:0 auto var(--s4); }
.cta .btn{ padding:18px 38px; font-size:16px; }

/* ── Footer ─────────────────────────────────────────────── */
footer{ padding-block:var(--s4); background:var(--ink); color:rgba(255,255,255,.55); }
.foot-in{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3); flex-wrap:wrap; }
footer .logo{ padding-inline:0; border-right:0; color:var(--white); }
.foot-links{ display:flex; gap:var(--s3); font-size:15px; }
.foot-links a:hover{ color:var(--white); }
footer .fine{ font-size:14px; }

/* ── Card dialog ────────────────────────────────────────── */
/* margin:auto restores the centring that the universal `*{margin:0}` reset kills. */
#card-dialog{ border:0; padding:0; margin:auto; background:transparent; max-width:min(1060px,94vw); max-height:92vh; width:100%; color:var(--white); }
#card-dialog::backdrop{ background:rgba(6,8,13,.86); backdrop-filter:blur(3px); }
.cd-in{ display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); background:var(--ink); border:1px solid rgba(255,255,255,.16); position:relative; max-height:92vh; }
.cd-close{ position:absolute; top:0; right:0; z-index:2; width:46px; height:46px; display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.7); border-left:1px solid rgba(255,255,255,.16); border-bottom:1px solid rgba(255,255,255,.16); transition:background .15s,color .15s; }
.cd-close:hover{ background:var(--accent); color:#fff; }
.cd-art{ padding:var(--s4); display:flex; align-items:center; justify-content:center; border-right:1px solid rgba(255,255,255,.16); background-image:radial-gradient(rgba(255,255,255,.10) 1.4px,transparent 1.4px); background-size:9px 9px; }
.cd-art img{ width:100%; height:auto; box-shadow:0 30px 66px -20px rgba(0,0,0,.8); outline:1px solid var(--d); outline-offset:5px; }
.cd-body{ padding:var(--s5) var(--s4) var(--s4); overflow-y:auto; }
.cd-deck{ display:flex; align-items:center; gap:9px; font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--d); margin-bottom:var(--s2); flex-wrap:wrap; }
.cd-sw{ width:9px; height:9px; background:var(--d); }
.cd-type{ color:rgba(255,255,255,.5); border-left:1px solid rgba(255,255,255,.2); padding-left:9px; }
.cd-body h2{ font-family:var(--display); font-size:clamp(24px,2.7vw,34px); margin-bottom:var(--s2); }
.cd-desc{ color:rgba(255,255,255,.72); font-size:16.5px; margin-bottom:var(--s4); }
.cd-block{ border-top:1px solid rgba(255,255,255,.16); padding-top:var(--s3); margin-bottom:var(--s3); }
.cd-block h3{ font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:12px; }
.cd-block p{ font-size:15.5px; color:rgba(255,255,255,.74); line-height:1.65; }
.cd-depth .cd-words{ display:flex; align-items:baseline; gap:10px; }
.cd-depth .cd-words b{ font-family:var(--display); font-size:34px; color:var(--white); font-variant-numeric:tabular-nums; line-height:1; }
.cd-depth .cd-words span{ font-size:14px; color:rgba(255,255,255,.7); }
.cd-depth .cd-note{ font-family:var(--mono); font-size:12px; letter-spacing:.05em; color:rgba(255,255,255,.42); margin-top:8px; }
.cd-tags{ display:flex; gap:7px; flex-wrap:wrap; margin-top:var(--s3); }
.cd-tags span{ font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; padding:6px 10px; border:1px solid rgba(255,255,255,.22); color:rgba(255,255,255,.72); }
@media (max-width:820px){
  .cd-in{ grid-template-columns:1fr; overflow-y:auto }
  .cd-art{ border-right:0; border-bottom:1px solid rgba(255,255,255,.16); padding:var(--s4) var(--s4) var(--s3) }
  .cd-art img{ max-width:230px }
  .cd-body{ padding:var(--s4) var(--s3) }
}

@media (prefers-contrast:more){ :root{ --line:#9AA0AC; --line-soft:#B9BEC7; --ink-2:#3C4250; } }

@media (prefers-reduced-motion:reduce){
  *{ transition:none!important; animation:none!important; scroll-behavior:auto!important; }
  html{ scroll-snap-type:none; }
  .js .reveal,.js .reveal-stagger > *{ opacity:1!important; transform:none!important; }
  .hero-cards .hc{ opacity:1!important; }
}