/* landing.css — sistema de diseño compartido por las landings de la familia
   Santé (/psique, /kinesis). La landing del estético (/index.html) conserva su
   CSS embebido a propósito: no se toca una página viva por una refactorización.
   Generado a partir de psique/index.html el 2026-08-14. */
  @import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
  :root{
    --ink:#17191B; --bone:#F1EDE4; --bone-hi:#FBF9F4; --green:#1F8A5B; --green-hi:#2FB37A;
    --bg:var(--bone); --fg:var(--ink); --muted:#6d685d; --faint:#8b8578;
    --surface:#FBF9F4; --surface-2:#efe9dc; --border:#e4ddce;
    --logo-fg:var(--ink); --logo-bg:var(--bone); --accent:var(--green);
    --shadow:0 1px 2px rgba(23,25,27,.04), 0 12px 30px -12px rgba(23,25,27,.14);
  }
  @media (prefers-color-scheme:dark){
    :root{ --bg:var(--ink); --fg:var(--bone); --muted:#a8a294; --faint:#7c776b;
      --surface:#202226; --surface-2:#25282c; --border:#2d3034;
      --logo-fg:var(--bone); --logo-bg:var(--ink); --accent:var(--green-hi);
      --shadow:0 1px 2px rgba(0,0,0,.3), 0 16px 40px -16px rgba(0,0,0,.6);}
  }
  :root[data-theme="light"]{ --bg:var(--bone); --fg:var(--ink); --muted:#6d685d; --faint:#8b8578;
    --surface:#FBF9F4; --surface-2:#efe9dc; --border:#e4ddce; --logo-fg:var(--ink); --logo-bg:var(--bone); --accent:var(--green);
    --shadow:0 1px 2px rgba(23,25,27,.04), 0 12px 30px -12px rgba(23,25,27,.14);}
  :root[data-theme="dark"]{ --bg:var(--ink); --fg:var(--bone); --muted:#a8a294; --faint:#7c776b;
    --surface:#202226; --surface-2:#25282c; --border:#2d3034; --logo-fg:var(--bone); --logo-bg:var(--ink); --accent:var(--green-hi);
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 16px 40px -16px rgba(0,0,0,.6);}

  *{box-sizing:border-box}
  .sn{ --sans:"Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
       --mono:"IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
       background:var(--bg); color:var(--fg); font-family:var(--sans);
       -webkit-font-smoothing:antialiased; line-height:1.5; font-size:17px; overflow-x:hidden;}
  .sn ::selection{ background:var(--accent); color:var(--bone);}
  .wrap{ max-width:1120px; margin:0 auto; padding:0 clamp(20px,5vw,48px);}
  .sn a{ color:inherit; text-decoration:none;}
  .sn a:focus-visible, .sn button:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px;}
  .eyebrow{ font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint);}
  h1,h2,h3{ margin:0; text-wrap:balance; letter-spacing:-.02em; font-weight:800; line-height:1.06;}
  p{ margin:0;}

  /* logo */
  .mark{ display:block;}
  .brand{ display:flex; align-items:center; gap:12px;}
  .brand .name{ font-size:22px; font-weight:800; letter-spacing:-.02em;}
  .brand .name .sub{ color:var(--muted); font-weight:600; font-size:13px;}

  /* nav */
  header.nav{ position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--bg) 86%, transparent);
    backdrop-filter:saturate(1.2) blur(10px); border-bottom:1px solid transparent;}
  header.nav.scrolled{ border-bottom-color:var(--border);}
  .nav .wrap{ display:flex; align-items:center; justify-content:space-between; height:72px;}
  .nav .links{ display:flex; align-items:center; gap:26px; font-size:14px; color:var(--muted);}
  .nav .links a:hover{ color:var(--fg);}
  .btn{ font-family:var(--sans); font-size:14px; font-weight:600; cursor:pointer; border:1px solid var(--border);
    background:transparent; color:var(--fg); padding:9px 16px; border-radius:999px; transition:.18s ease; display:inline-block;}
  .btn:hover{ border-color:var(--accent); color:var(--accent);}
  .btn.solid{ background:var(--accent); color:var(--bone); border-color:var(--accent);}
  .btn.solid:hover{ filter:brightness(1.06); color:var(--bone);}
  @media(max-width:920px){ .nav .links a.navlink{ display:none;} }
  /* En móvil el nombre completo + la pastilla de beta + el botón no caben: el
     nombre se parte en dos renglones y queda pegado a la pastilla. Se deja lo
     esencial (marca y descarga); el aviso de beta lo da la franja bajo el hero. */
  @media(max-width:600px){ .nav .pill-beta{ display:none;} .brand .name .sub{ display:none;} }

  /* distintivo de producto y de beta */
  .pill-beta{ font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
    color:var(--accent); border:1px solid color-mix(in srgb,var(--accent) 45%, var(--border));
    background:color-mix(in srgb,var(--accent) 10%, transparent); border-radius:999px; padding:3px 10px; white-space:nowrap;}

  /* section frame */
  section{ padding:clamp(56px,9vw,104px) 0; position:relative;}
  .sec-head{ max-width:660px; margin:0 auto clamp(36px,6vw,56px); text-align:center;}
  .sec-head .eyebrow{ display:block; margin-bottom:14px;}
  .sec-head h2{ font-size:clamp(28px,4.6vw,44px); margin-bottom:14px;}
  .sec-head p{ color:var(--muted); font-size:18px;}

  /* hero */
  .hero{ padding:clamp(52px,8vw,96px) 0 clamp(40px,6vw,72px);}
  .hero .grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,64px); align-items:center;}
  @media(max-width:900px){ .hero .grid{ grid-template-columns:1fr; gap:40px;} }
  .hero .eyebrow{ display:inline-block; margin-bottom:20px;}
  .hero h1{ font-size:clamp(36px,5.6vw,58px); margin:0 0 20px;}
  .hero h1 .j{ color:var(--accent);}
  .hero .lede{ font-size:clamp(17px,2vw,20px); color:var(--muted); max-width:52ch; margin-bottom:30px;}
  .hero .cta{ display:flex; flex-wrap:wrap; gap:14px;}
  .hero .cta .btn{ padding:13px 24px; font-size:15px;}
  .hero .sig{ font-family:var(--mono); font-size:12px; color:var(--faint); margin-top:24px; letter-spacing:.03em;}

  /* device stage */
  .stage{ position:relative; border-radius:24px; padding:clamp(20px,3vw,34px);
    background:radial-gradient(120% 120% at 70% 10%, #223 0%, #14161a 60%, #0e1013 100%);
    border:1px solid rgba(255,255,255,.08); box-shadow:0 30px 60px -30px rgba(0,0,0,.6); overflow:hidden;}
  .stage img{ display:block; width:100%; height:auto; border-radius:10px;}
  .status{ position:absolute; left:50%; bottom:22px; transform:translateX(-50%);
    display:inline-flex; align-items:center; gap:14px; white-space:nowrap;
    background:rgba(20,22,26,.72); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.14);
    border-radius:100px; padding:8px 16px;}
  .status .item{ display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11.5px; color:#eef; letter-spacing:.02em;}
  .status .item.off{ color:#8b93a1;}
  .status .dot{ width:8px; height:8px; border-radius:50%; background:var(--green-hi); box-shadow:0 0 8px var(--green-hi);}
  .status .item.off .dot{ background:#6b7280; box-shadow:none;}
  .status .sep{ width:1px; height:14px; background:rgba(255,255,255,.2);}
  @media(max-width:560px){ .status{ white-space:normal; flex-wrap:wrap; justify-content:center; max-width:calc(100% - 20px); padding:8px 12px;}
    .status .item{ font-size:10.5px;} .status .sep{ display:none;} }

  /* franja de aviso de beta */
  .avisobeta{ background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border);
    padding:18px 0;}
  .avisobeta .wrap{ display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; text-align:center;}
  .avisobeta p{ color:var(--muted); font-size:15px; line-height:1.55; max-width:78ch;}
  .avisobeta strong{ color:var(--fg);}
  .avisobeta a{ color:var(--accent); font-weight:600; text-decoration:underline; text-underline-offset:2px;}

  /* problem cards */
  .why{ background:var(--surface-2);}
  .painlist{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
  @media(max-width:860px){ .painlist{ grid-template-columns:1fr;} }
  .pain{ background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:24px 22px;}
  .pain h4{ margin:0 0 8px; font-size:17px; font-weight:800; letter-spacing:-.01em;}
  .pain p{ color:var(--muted); font-size:15px; line-height:1.6;}
  .pain p + p{ margin-top:8px;}
  .pain .fuente{ font-family:var(--mono); font-size:11.5px; color:var(--faint); letter-spacing:.02em; line-height:1.5;}

  /* modules grid */
  .mods{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
  @media(max-width:900px){ .mods{ grid-template-columns:repeat(2,1fr);} }
  @media(max-width:520px){ .mods{ grid-template-columns:1fr;} }
  .mod{ background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:24px 22px; transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;}
  .mod:hover{ transform:translateY(-4px); border-color:color-mix(in srgb,var(--accent) 45%, var(--border)); box-shadow:var(--shadow);}
  .mod .ic{ width:38px; height:38px; border-radius:10px; display:grid; place-items:center; margin-bottom:14px;
    background:color-mix(in srgb,var(--accent) 14%, transparent); color:var(--accent);}
  .mod .ic svg{ width:20px; height:20px;}
  .mod h4{ margin:0 0 7px; font-size:17px; font-weight:800; letter-spacing:-.01em;}
  .mod p{ color:var(--muted); font-size:14.5px; line-height:1.55;}

  /* bloques de característica destacada (escalas, notas, dictado) */
  .feat{ background:var(--surface);}
  .feat.alt{ background:var(--surface-2);}
  .feat-box{ max-width:920px; margin:0 auto; padding:clamp(32px,5vw,52px); border-radius:24px; box-shadow:var(--shadow);
    border:1px solid color-mix(in srgb,var(--accent) 40%, var(--border));
    background:linear-gradient(180deg, color-mix(in srgb,var(--accent) 9%, var(--surface)), var(--surface));}
  .feat-box .eyebrow{ display:block; margin-bottom:14px; color:var(--accent);}
  .feat-box h2{ font-size:clamp(26px,4.4vw,42px); margin-bottom:16px;}
  .feat-box > p{ color:var(--muted); font-size:17.5px; line-height:1.62; max-width:62ch;}
  .feat-points{ list-style:none; margin:24px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:14px 28px;}
  @media(max-width:640px){ .feat-points{ grid-template-columns:1fr;} }
  .feat-points li{ font-size:15px; line-height:1.55; padding-left:28px; position:relative; color:var(--fg);}
  .feat-points li::before{ content:"\2713"; position:absolute; left:0; top:1px; color:var(--accent); font-family:var(--mono); font-weight:700;}
  .feat-points li strong{ color:var(--fg);}
  .feat-nota{ margin-top:24px; padding:16px 18px; border-radius:14px; background:var(--surface);
    border:1px solid var(--border); font-size:14.5px; color:var(--muted); line-height:1.6;}
  .feat-nota strong{ color:var(--fg);}
  .feat-nota .titulo{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:.14em;
    text-transform:uppercase; color:var(--accent); margin-bottom:8px;}

  /* comparison */
  .diff{ background:var(--surface-2);}
  .cmp{ display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:920px; margin:0 auto;}
  @media(max-width:720px){ .cmp{ grid-template-columns:1fr;} }
  .cmp .col{ border-radius:20px; padding:28px; border:1px solid var(--border); background:var(--surface);}
  .cmp .col.win{ border-color:color-mix(in srgb,var(--accent) 40%, var(--border));
    background:linear-gradient(180deg, color-mix(in srgb,var(--accent) 8%, var(--surface)), var(--surface));}
  .cmp .col .lbl{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin-bottom:16px;}
  .cmp .col.win .lbl{ color:var(--accent);}
  .cmp ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px;}
  .cmp li{ font-size:15px; line-height:1.45; padding-left:28px; position:relative; color:var(--fg);}
  .cmp li::before{ position:absolute; left:0; top:0; font-family:var(--mono); font-weight:600;}
  .cmp .col.old li{ color:var(--muted);}
  .cmp .col.old li::before{ content:"\00d7"; color:var(--faint); font-size:18px; top:-1px;}
  .cmp .col.win li::before{ content:"\2713"; color:var(--accent);}

  /* normativa / privacidad */
  .norm .box{ max-width:860px; margin:0 auto; text-align:center; background:var(--surface); border:1px solid var(--border);
    border-radius:24px; padding:clamp(36px,6vw,60px);}
  .norm .noms{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:22px 0 24px;}
  .norm .nom{ font-family:var(--mono); font-size:12.5px; font-weight:600; color:var(--accent);
    border:1px solid color-mix(in srgb,var(--accent) 40%, var(--border)); border-radius:999px; padding:8px 16px;}
  .norm .box p{ color:var(--muted); font-size:16.5px; line-height:1.65; max-width:60ch; margin:0 auto 14px;}
  .norm .box p:last-child{ margin-bottom:0;}
  .norm .box strong{ color:var(--fg);}

  /* nosotros */
  .about .box{ max-width:820px; margin:0 auto; background:var(--surface); border:1px solid var(--border);
    border-radius:24px; padding:clamp(32px,5vw,52px);}
  .about .eyebrow{ display:block; margin-bottom:14px;}
  .about h2{ font-size:clamp(26px,4vw,40px); margin-bottom:18px;}
  .about p{ color:var(--muted); font-size:16.5px; line-height:1.65; margin-bottom:14px;}
  .about p:last-child{ margin-bottom:0;}
  .about strong{ color:var(--fg);}

  /* programa de beta (sustituye a precios) */
  .beta{ background:var(--surface-2);}
  .beta .cajas{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:980px; margin:0 auto;}
  @media(max-width:860px){ .beta .cajas{ grid-template-columns:1fr;} }
  .beta .caja{ background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:26px 24px;}
  .beta .caja .plan-tag{ font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent);}
  .beta .caja h4{ margin:10px 0 12px; font-size:19px; font-weight:800; letter-spacing:-.01em;}
  .beta .caja ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px;}
  .beta .caja li{ font-size:14.5px; line-height:1.55; padding-left:26px; position:relative; color:var(--fg);}
  .beta .caja li::before{ content:"\2713"; position:absolute; left:0; top:0; color:var(--accent); font-family:var(--mono); font-weight:700;}
  .beta .caja p{ color:var(--muted); font-size:14.5px; line-height:1.6;}
  /* tarjeta de precio de fundador */
  .precio-card{ position:relative; max-width:640px; margin:clamp(30px,5vw,46px) auto 0;
    background:linear-gradient(180deg, color-mix(in srgb,var(--accent) 10%, var(--surface)), var(--surface));
    border:1px solid color-mix(in srgb,var(--accent) 45%, var(--border)); border-radius:22px;
    padding:34px 30px 30px; box-shadow:var(--shadow); text-align:center;}
  .precio-card .badge{ position:absolute; top:-13px; left:50%; transform:translateX(-50%);
    background:var(--accent); color:var(--bone); font-family:var(--mono); font-size:11px;
    letter-spacing:.1em; text-transform:uppercase; padding:5px 14px; border-radius:999px; white-space:nowrap;}
  .precio-card .antes{ display:block; font-size:17px; color:var(--faint); text-decoration:line-through; margin-top:6px;}
  .precio-card .ahora{ display:block; font-size:clamp(44px,8vw,60px); font-weight:800; letter-spacing:-.03em; line-height:1;}
  .precio-card .ahora .moneda{ font-size:18px; font-weight:600; color:var(--muted);}
  .precio-card .unidad{ display:block; font-size:14.5px; color:var(--muted); margin-top:8px;}
  .precio-card .msi{ margin:18px auto 0; max-width:46ch; font-size:16px; color:var(--fg); line-height:1.6;}
  .precio-card .msi strong{ color:var(--accent);}
  /* El comparativo mensual es la frase que gana la venta: el prospecto ya piensa
     en mensualidades, así que se le contesta en su unidad de medida. */
  .precio-card .msi-vs{ display:inline-block; margin-top:10px; padding:10px 14px; border-radius:12px;
    background:color-mix(in srgb,var(--accent) 12%, transparent); font-size:15px; font-weight:600;
    color:var(--fg); line-height:1.5;}
  .precio-card .features{ list-style:none; margin:22px 0 0; padding:0; display:flex; flex-direction:column;
    gap:11px; text-align:left; max-width:46ch; margin-inline:auto;}
  .precio-card .features li{ font-size:14.5px; line-height:1.55; padding-left:26px; position:relative; color:var(--fg);}
  .precio-card .features li::before{ content:"\2713"; position:absolute; left:0; top:0; color:var(--accent);
    font-family:var(--mono); font-weight:700;}
  .precio-card .letra{ margin-top:20px; font-size:13px; color:var(--faint); line-height:1.6;}
  .beta .contraste{ max-width:640px; margin:clamp(22px,4vw,32px) auto 0; text-align:center;
    color:var(--muted); font-size:16.5px; line-height:1.65;}
  .beta .contraste strong{ color:var(--fg);}
  .beta .beta-cta{ display:flex; justify-content:center; margin-top:clamp(26px,4vw,38px);}
  .beta .beta-cta .btn{ padding:14px 28px; font-size:15px;}

  /* requisitos */
  .reqs .pasos{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; max-width:920px; margin:0 auto;}
  @media(max-width:760px){ .reqs .pasos{ grid-template-columns:1fr;} }
  .reqs .paso{ background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:22px 24px;}
  .reqs .paso h4{ margin:0 0 10px; font-size:16px; font-weight:800; letter-spacing:-.01em; display:flex; align-items:center; gap:9px;}
  .reqs .paso h4 .pin{ color:var(--accent); font-family:var(--mono); font-weight:700; font-size:12px;
                       border:1px solid var(--border); border-radius:6px; padding:2px 7px;}
  .reqs .paso p{ margin:0 0 10px; color:var(--muted); font-size:14.5px; line-height:1.55;}
  .reqs .paso p:last-child{ margin-bottom:0;}
  .reqs .paso strong{ color:var(--fg);}
  .reqs-nota{ max-width:760px; margin:clamp(24px,4vw,34px) auto 0; text-align:center;
              color:var(--muted); font-size:14.5px; line-height:1.6;}
  .reqs-nota strong{ color:var(--fg);}

  /* galería "en uso" */
  .uso{ background:var(--surface-2);}
  .uso .shots{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(18px,3vw,28px);}
  @media(max-width:760px){ .uso .shots{ grid-template-columns:1fr;} }
  .shot{ background:var(--surface); border:1px solid var(--border); border-radius:20px; overflow:hidden;
    box-shadow:var(--shadow); transition:transform .2s ease, border-color .2s ease;}
  .shot:hover{ transform:translateY(-4px); border-color:color-mix(in srgb,var(--accent) 40%, var(--border));}
  .shot .frame{ background:radial-gradient(120% 120% at 70% 10%, #223 0%, #14161a 60%, #0e1013 100%);
    padding:clamp(12px,2vw,20px);}
  .shot .frame img{ display:block; width:100%; height:auto; border-radius:8px; border:1px solid rgba(255,255,255,.08);}
  .shot .cap{ padding:16px 22px 20px;}
  .shot .cap .tag{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
    color:var(--accent); display:block; margin-bottom:8px;}
  .shot .cap h4{ margin:0 0 5px; font-size:16px; font-weight:800; letter-spacing:-.01em;}
  .shot .cap p{ margin:0; color:var(--muted); font-size:14px; line-height:1.5;}

  /* demo / form */
  .demo{ background:var(--surface);}
  .demo .box{ max-width:760px; margin:0 auto; text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px;}
  .demo .eyebrow{ display:block; margin-bottom:8px; color:var(--accent);}
  .demo h2{ font-size:clamp(30px,5vw,50px);}
  .demo p{ color:var(--muted); font-size:18px; max-width:52ch; margin-top:8px;}
  .demo .incl{ list-style:none; margin:24px 0 8px; padding:0; display:flex; flex-direction:column; gap:11px; text-align:left;}
  .demo .incl li{ font-size:15.5px; padding-left:26px; position:relative;}
  .demo .incl li::before{ content:"\2713"; position:absolute; left:0; color:var(--accent); font-family:var(--mono); font-weight:600;}
  .demo .mail{ font-family:var(--mono); font-size:13px; color:var(--faint); margin-top:22px; letter-spacing:.04em;}
  .demo .dlform{ width:100%; max-width:640px; margin:28px auto 0; display:flex; flex-direction:column; gap:14px; text-align:left;}
  .demo .ff-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px;}
  @media(max-width:560px){ .demo .ff-row{ grid-template-columns:1fr;} }
  .demo .dlform label{ display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:600; color:var(--fg);}
  .demo .dlform input, .demo .dlform select{ font-family:var(--sans); font-size:15px; color:var(--fg); background:var(--surface);
    border:1px solid var(--border); border-radius:12px; padding:12px 14px; width:100%; -webkit-appearance:none; appearance:none;}
  .demo .dlform input::placeholder{ color:var(--faint);}
  .demo .dlform input:focus, .demo .dlform select:focus{ outline:none; border-color:var(--accent);
    box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%, transparent);}
  .demo .ff-submit{ margin-top:8px; padding:14px 24px; font-size:15px; border:0; width:100%; cursor:pointer;}
  .demo .ff-submit:disabled{ opacity:.65; cursor:default;}
  .demo .ff-err{ color:#c0392b; font-size:14px; min-height:1px; margin:0;}
  .demo .ff-nota{ font-size:12.5px; color:var(--faint); margin:4px 0 0; line-height:1.5;}
  .demo .gracias{ width:100%; max-width:560px; margin:22px auto 0; text-align:center; display:flex; flex-direction:column; gap:12px; align-items:center;}
  .demo .gracias .ok{ width:56px; height:56px; border-radius:50%; display:grid; place-items:center; font-size:28px;
    background:color-mix(in srgb,var(--accent) 16%, transparent); color:var(--accent);}
  .demo .gracias h3{ font-size:22px;}
  .demo .gsub{ color:var(--muted); font-size:15px;}
  .demo .gracias .dl{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:4px;}
  .demo .gracias .dl .btn{ padding:13px 22px; font-size:15px;}
  .demo .mac-nota, .demo .win-nota{ font-size:13px; color:var(--muted); background:var(--surface-2); border:1px solid var(--border);
    border-radius:12px; padding:12px 14px; text-align:left; max-width:520px; line-height:1.55;}
  .demo .win-nota strong, .demo .mac-nota strong{ color:var(--fg);}

  /* footer */
  footer.ft{ border-top:1px solid var(--border); padding:40px 0;}
  .ft .wrap{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;}
  .ft .tiny{ font-family:var(--mono); font-size:12px; color:var(--faint); letter-spacing:.03em;}
  .ft a.home{ font-size:13px; color:var(--muted);} .ft a.home:hover{ color:var(--accent);}

  /* motion */
  @keyframes rise{ from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:none;} }
  @keyframes pop{ 0%{opacity:0; transform:scale(.4);} 70%{transform:scale(1.12);} 100%{opacity:1; transform:scale(1);} }
  @keyframes glow{ 0%,100%{opacity:.85;} 50%{opacity:1; filter:drop-shadow(0 0 3px var(--accent));} }
  .sn .rise{ animation:rise .7s cubic-bezier(.2,.7,.3,1) both;}
  .hero .eyebrow{ animation:rise .6s .02s both;} .hero h1{ animation:rise .7s .08s both;}
  .hero .lede{ animation:rise .7s .16s both;} .hero .cta{ animation:rise .7s .24s both;}
  .hero .stage{ animation:rise .8s .2s both;}
  .mark .pip, .mark .green{ transform-box:fill-box; transform-origin:center;}
  .brand .mark .pip, .brand .mark .green{ animation:pop .5s calc(var(--i,0)*.06s + .1s) both;}
  .mark .green{ animation:glow 3.4s ease-in-out 1.6s infinite;}
  @media (prefers-reduced-motion:reduce){ .sn *, .sn *::before{ animation:none !important; transition:none !important;} }

  /* lightbox */
  img.zoomable{ cursor:zoom-in;}
  .lb{ position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center;
    background:rgba(10,12,14,.86); backdrop-filter:blur(4px); padding:clamp(16px,4vw,48px);}
  .lb.open{ display:flex;}
  .lb img{ max-width:96vw; max-height:92vh; width:auto; height:auto; border-radius:10px;
    box-shadow:0 30px 80px -20px rgba(0,0,0,.8); border:1px solid rgba(255,255,255,.12);}
  .lb .lb-close{ position:absolute; top:clamp(12px,3vw,24px); right:clamp(12px,3vw,24px);
    width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.2);
    background:rgba(20,22,26,.7); color:#fff; font-size:24px; line-height:1; cursor:pointer;
    display:grid; place-items:center;}
  .lb .lb-close:hover{ background:rgba(40,44,50,.9);}
  @media(prefers-reduced-motion:no-preference){ .lb.open img{ animation:rise .3s ease both;} }