/* =====================================================
   LOYALTY CONNECTOR — Static site stylesheet
   Skeleti nga magazina-app/website; token-at nga brand/tokens.css
   ===================================================== */

/* =================== FONTS =================== */
@font-face { font-family:'Manrope'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('../fonts/manrope-var.woff2') format('woff2'); }
@font-face { font-family:'Sora'; font-style:normal; font-weight:600 700; font-display:swap;
  src:url('../fonts/sora-var.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400 500; font-display:swap;
  src:url('../fonts/jbm-regular.woff2') format('woff2'), url('../fonts/jbm-regular.woff') format('woff'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:600 700; font-display:swap;
  src:url('../fonts/jbm-semibold.woff2') format('woff2'), url('../fonts/jbm-semibold.woff') format('woff'); }
@font-face { font-family:'DynaPuff'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/dynapuff-regular.woff2') format('woff2'), url('../fonts/dynapuff-regular.woff') format('woff'); }
@font-face { font-family:'DynaPuff'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/dynapuff-bold.woff2') format('woff2'), url('../fonts/dynapuff-bold.woff') format('woff'); }

/* =================== TOKENS =================== */
:root {
  --amber:       #FFB300;
  --amber-soft:  #FFE7A8;
  --navy:        #0D1B2A;
  --navy-2:      #1C2E42;
  --paper:       #F7F5F0;
  --paper-2:     #EEEBE3;
  --ink:         #11141C;
  --muted:       #5B6573;
  --muted-2:     #AEB6C1;
  --rule:        #E4E1D9;
  --rule-dark:   rgba(13,27,42,0.10);
  --bg:          #FBFAF7;
  --white:       #ffffff;
  --display:     'Sora','Manrope',sans-serif;
}

/* =================== RESET =================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin:0; padding:0; background:var(--bg); color:var(--ink);
  font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased; font-feature-settings:'cv11','ss01','ss03'; }
html { scroll-behavior:smooth; scroll-padding-top:88px; overflow-x:hidden; }
body { overflow-x:hidden; }
h1, h2, h3, .brand .name, .dl-card .platform .nm { font-family:var(--display); }
::selection { background:var(--amber); color:var(--navy); }
a { color:inherit; }
img, svg { display:block; }

/* =================== UTILITIES =================== */
.mono { font-family:'JetBrains Mono',monospace; font-feature-settings:'tnum','zero'; }
.eyebrow {
  font-family:'JetBrains Mono',monospace;
  font-size:11px; letter-spacing:0.14em; color:var(--muted); text-transform:uppercase;
}

/* =================== NAV =================== */
.nav {
  position:sticky; top:0; z-index:50;
  background:rgba(251,250,247,0.92);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
}
.nav-inner {
  max-width:1240px; margin:0 auto; padding:16px 40px;
  display:flex; align-items:center; gap:40px;
}
.brand { display:flex; align-items:center; gap:6px; text-decoration:none; }
.brand .logo { display:block; flex-shrink:0; }
.brand .stack { display:flex; flex-direction:column; align-items:flex-end; line-height:1.1; margin-right:0; }
.brand .name { font-size:16px; font-weight:700; color:var(--navy); letter-spacing:-0.015em; }
.brand .name span { font-weight:500; opacity:0.55; }
.brand .powered {
  margin-top:2px; font-family:'DynaPuff',cursive; font-size:9px; font-weight:400;
  text-transform:lowercase; letter-spacing:-0.005em; color:#0d1b2a;
}
.brand .powered b { color:#0d1b2a; font-weight:700; }
.nav-links { margin-left:auto; display:flex; gap:28px; font-size:13px; color:var(--ink); }
.nav-links a { text-decoration:none; opacity:0.7; }
.nav-links a:hover { opacity:1; color:var(--navy); }
.nav-links .mobile-cta { display:none; }
.nav-cta { margin-left:auto; display:flex; gap:10px; align-items:center; }

/* =================== BUTTONS =================== */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 18px; font-size:13px; font-weight:600;
  text-decoration:none; border:1px solid transparent;
  transition:transform 0.12s ease, background 0.12s ease; cursor:pointer;
  font-family:inherit;
}
.btn:hover { transform:translateY(-1px); }
.btn-primary { background:var(--navy); color:var(--amber); }
.btn-primary:hover { background:#142536; }
.btn-ghost { background:transparent; color:var(--navy); border-color:var(--rule-dark); }
.btn-ghost:hover { background:var(--paper); }
.btn-amber { background:var(--amber); color:var(--navy); }
.btn-amber:hover { background:#ffc233; }

/* =================== LAYOUT =================== */
.container { max-width:1240px; margin:0 auto; padding-left:40px; padding-right:40px; }
section { padding:96px 0; }

.section-head {
  display:flex; flex-direction:column; gap:20px; margin-bottom:56px;
  border-bottom:1px solid var(--rule); padding-bottom:28px;
}
.section-head .left .tag {
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.14em;
  color:var(--muted); text-transform:uppercase;
}
.section-head .left h2 {
  margin:12px 0 0; font-size:clamp(28px,3.4vw,40px); font-weight:700;
  letter-spacing:-0.025em; line-height:1.1; color:var(--navy); white-space:nowrap;
}
.section-head .left h2 .light { font-weight:500; color:rgba(13,27,42,0.5); }
.section-head .right { font-size:15px; color:var(--muted); width:75%; line-height:1.55; }

/* =================== HERO =================== */
.hero { background:var(--paper); border-bottom:1px solid var(--rule); padding:0; }
.hero-inner {
  max-width:1240px; margin:0 auto; padding:80px 40px 96px;
  display:grid; grid-template-columns:1.05fr 1fr; gap:48px; align-items:center;
}
.hero .eyebrow-row {
  display:inline-flex; align-items:center; gap:10px;
  background:var(--navy); color:var(--amber); padding:6px 12px;
  font-family:'JetBrains Mono',monospace; font-size:10px;
  letter-spacing:0.14em; text-transform:uppercase;
}
.hero .eyebrow-row .dot { width:6px; height:6px; background:var(--amber); }
.hero h1 { margin:24px 0 0; font-size:76px; font-weight:700; letter-spacing:-0.035em; line-height:0.98; color:var(--navy); }
.hero h1 .light { font-weight:500; color:rgba(13,27,42,0.45); }
.hero .lede { margin:28px 0 0; font-size:18px; line-height:1.5; color:rgba(13,27,42,0.72); max-width:480px; }
.hero .cta-row { display:flex; gap:12px; margin-top:36px; flex-wrap:wrap; }
.hero .specs {
  display:flex; gap:32px; margin-top:40px; padding-top:28px;
  border-top:1px solid rgba(13,27,42,0.1); max-width:540px;
}
.hero .spec .k { font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--muted); letter-spacing:0.12em; text-transform:uppercase; }
.hero .spec .v { font-size:18px; font-weight:700; color:var(--navy); margin-top:4px; letter-spacing:-0.015em; }
.hero-art {
  position:relative; aspect-ratio:1; background:var(--paper-2);
  display:grid; place-items:center; border:1px solid var(--rule-dark);
}
.hero-art .corner {
  position:absolute; font-family:'JetBrains Mono',monospace; font-size:10px;
  color:var(--muted); letter-spacing:0.12em; text-transform:uppercase;
}
.hero-art .corner.tl { top:16px; left:16px; }
.hero-art .corner.tr { top:16px; right:16px; }
.hero-art .corner.bl { bottom:16px; left:16px; }
.hero-art .ca-mark { position:absolute; bottom:14px; right:14px; width:72px; height:72px; display:grid; place-items:center; }
.hero-art svg { width:360px; height:360px; }

/* =================== STRIP =================== */
.strip { background:var(--white); border-bottom:1px solid var(--rule); padding:32px 0; }
.strip-inner { max-width:1240px; margin:0 auto; padding:0 40px; display:flex; align-items:center; gap:40px; flex-wrap:wrap; }
.strip .lab { font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--muted); letter-spacing:0.12em; text-transform:uppercase; padding-right:24px; border-right:1px solid var(--rule); }
.strip .channels { display:flex; gap:36px; flex-wrap:wrap; align-items:center; font-size:18px; font-weight:600; color:var(--navy); letter-spacing:-0.02em; }
.strip .ch { display:flex; align-items:center; gap:10px; }
.strip .ch .badge { width:24px; height:24px; display:grid; place-items:center; background:var(--paper); font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:600; color:var(--navy); }

/* =================== FEATURES =================== */
.features-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  border-top:1px solid var(--rule); border-left:1px solid var(--rule);
}
.feature {
  background:var(--white); border-right:1px solid var(--rule); border-bottom:1px solid var(--rule);
  padding:36px 32px; min-height:280px; display:flex; flex-direction:column; position:relative;
}
.feature .num { font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--muted); letter-spacing:0.12em; margin-bottom:24px; }
.feature .glyph { width:48px; height:48px; background:var(--paper); display:grid; place-items:center; margin-bottom:24px; }
.feature h3 { margin:0; font-size:19px; font-weight:700; letter-spacing:-0.02em; color:var(--navy); }
.feature p { margin:12px 0 0; font-size:14px; line-height:1.55; color:var(--muted); }
.feature.highlight { background:var(--navy); color:var(--paper); }
.feature.highlight h3 { color:var(--amber); }
.feature.highlight p { color:rgba(247,245,240,0.7); }
.feature.highlight .num { color:rgba(255,179,0,0.6); }
.feature.highlight .glyph { background:rgba(255,179,0,0.12); }

/* =================== HOW IT WORKS =================== */
.how { background:var(--paper); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--rule-dark); }
.step { padding:40px 32px 36px 0; border-right:1px solid var(--rule-dark); position:relative; }
.step:last-child { border-right:0; padding-right:0; }
.step:not(:first-child) { padding-left:32px; }
.step .n { font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--muted); letter-spacing:0.14em; }
.step .arrow { position:absolute; top:40px; right:28px; color:var(--amber); font-family:'JetBrains Mono',monospace; font-size:18px; }
.step:last-child .arrow { display:none; }
.step h3 { margin:24px 0 0; font-size:22px; font-weight:700; letter-spacing:-0.02em; color:var(--navy); }
.step p { margin:12px 0 0; font-size:14px; line-height:1.55; color:var(--muted); max-width:320px; }
.step .pill {
  display:inline-block; margin-top:20px; padding:4px 10px;
  background:var(--amber); color:var(--navy);
  font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.1em; text-transform:uppercase;
}

/* =================== DOWNLOAD =================== */
.download-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--rule); border:1px solid var(--rule); }
.dl-card { background:var(--white); padding:36px 36px 32px; display:flex; flex-direction:column; min-height:320px; position:relative; }
.dl-card .platform { display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.dl-card .platform .badge { width:44px; height:44px; background:var(--paper); display:grid; place-items:center; font-family:'JetBrains Mono',monospace; font-size:18px; font-weight:700; color:var(--navy); flex-shrink:0; }
.dl-card .platform .nm { font-size:22px; font-weight:700; letter-spacing:-0.02em; color:var(--navy); line-height:1; }
.dl-card .platform .sub { font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--muted); letter-spacing:0.14em; text-transform:uppercase; margin-top:4px; }
.dl-card p { margin:0 0 24px; font-size:14px; line-height:1.55; color:var(--muted); flex:1; }
.dl-card .meta { display:flex; gap:24px; padding:14px 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); margin-bottom:20px; }
.dl-card .meta .k { font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--muted); letter-spacing:0.12em; text-transform:uppercase; }
.dl-card .meta .v { font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:600; color:var(--navy); margin-top:2px; }
.dl-card .cta-row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.dl-card .list { list-style:none; margin:0 0 24px; padding:0; display:flex; flex-direction:column; gap:10px; flex:1; }
.dl-card .list li { display:flex; gap:10px; font-size:14px; line-height:1.5; color:var(--ink); }
.dl-card .list .chk { color:var(--amber); font-weight:700; flex-shrink:0; }
.dl-card .list + .meta { margin-top:auto; }
.dl-card .pin { position:absolute; top:20px; right:20px; font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--muted); letter-spacing:0.14em; text-transform:uppercase; }

/* =================== ABOUT =================== */
.about-grid { display:grid; grid-template-columns:1.1fr 0.9fr; gap:64px; align-items:flex-start; }
.about-grid p { font-size:17px; line-height:1.6; color:var(--ink); margin:0 0 20px; max-width:56ch; }
.about-grid p.lede { font-size:22px; font-weight:500; color:var(--navy); letter-spacing:-0.01em; line-height:1.4; }
.about-facts { display:flex; flex-direction:column; gap:1px; background:var(--rule); border:1px solid var(--rule); }
.fact { background:var(--white); padding:22px 24px; display:flex; align-items:baseline; justify-content:space-between; gap:24px; }
.fact .k { font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--muted); letter-spacing:0.12em; text-transform:uppercase; }
.fact .v { font-size:16px; font-weight:600; color:var(--navy); letter-spacing:-0.01em; text-align:right; }

/* =================== FAQ =================== */
.faq { background:var(--white); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.faq-list { display:flex; flex-direction:column; }
details.q { border-bottom:1px solid var(--rule); padding:0; }
details.q:first-child { border-top:1px solid var(--rule); }
details.q summary {
  list-style:none; cursor:pointer; padding:26px 0;
  display:flex; align-items:baseline; gap:24px;
  font-size:18px; font-weight:600; color:var(--navy); letter-spacing:-0.015em;
}
details.q summary::-webkit-details-marker { display:none; }
details.q summary .n { font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--muted); letter-spacing:0.12em; min-width:32px; }
details.q summary .tx { flex:1; }
details.q summary .pm { font-family:'JetBrains Mono',monospace; font-size:20px; color:var(--amber); transition:transform 0.2s ease; }
details.q[open] summary .pm { transform:rotate(45deg); }
details.q .a { padding:0 0 28px 56px; font-size:15px; color:var(--muted); line-height:1.6; max-width:64ch; }
details.q .a p { margin:0; }

/* =================== CONTACT =================== */
.contact { background:var(--navy); color:var(--paper); border-top:1px solid var(--rule); }
.contact h2 { color:var(--paper) !important; }
.contact .section-head { border-color:rgba(247,245,240,0.18); }
.contact .section-head .tag { color:rgba(247,245,240,0.55); }
.contact .section-head .right { color:rgba(247,245,240,0.7); }
.contact h2 .light { color:rgba(247,245,240,0.45) !important; }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:flex-start; }
.contact-info { display:flex; flex-direction:column; gap:28px; }
.ci-row { border-top:1px solid rgba(247,245,240,0.15); padding-top:20px; }
.ci-row .k { font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.14em; color:rgba(247,245,240,0.55); text-transform:uppercase; }
.ci-row .v { margin-top:8px; font-size:20px; font-weight:500; color:var(--paper); letter-spacing:-0.01em; }
.ci-row .v a { text-decoration:none; }
.ci-row .v a:hover { color:var(--amber); }
.ci-row .sub { margin-top:6px; font-size:13px; color:rgba(247,245,240,0.6); }

/* =================== FOOTER =================== */
.footer { background:var(--navy); color:rgba(247,245,240,0.6); border-top:1px solid rgba(247,245,240,0.12); padding:0; }
.footer-credit { background:var(--paper); color:var(--navy); padding:28px 0; border-bottom:1px solid rgba(13,27,42,0.1); }
.footer-credit-inner { max-width:1240px; margin:0 auto; padding:0 40px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.footer-credit .made { font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--muted); letter-spacing:0.14em; text-transform:uppercase; }
.footer-inner { max-width:1240px; margin:0 auto; padding:32px 40px; display:flex; align-items:center; justify-content:space-between; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.08em; flex-wrap:wrap; gap:16px; }
.footer .brand .name { color:var(--paper); }
.footer .brand .name span { color:rgba(247,245,240,0.5); }
.footer .links { display:flex; gap:24px; }
.footer .links a { text-decoration:none; }
.footer .links a:hover { color:var(--amber); }

/* =================== MOBILE NAV TOGGLE =================== */
.nav-toggle { display:none; margin-left:auto; width:44px; height:44px; background:transparent; border:1px solid var(--rule-dark); cursor:pointer; padding:0; align-items:center; justify-content:center; flex-direction:column; gap:5px; }
.nav-toggle span { display:block; width:18px; height:2px; background:var(--navy); transition:transform 0.2s ease, opacity 0.2s ease; }
body.nav-open { overflow:hidden; }
body.nav-open .nav-toggle span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity:0; }
body.nav-open .nav-toggle span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* =================== REVEAL ON SCROLL =================== */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity:0; transform:translateY(32px); transition:opacity 0.7s cubic-bezier(0.22,0.61,0.36,1), transform 0.85s cubic-bezier(0.22,0.61,0.36,1); will-change:opacity,transform; }
  .reveal.is-in { opacity:1; transform:translateY(0); }
  .reveal.is-in .features-grid > *, .reveal.is-in .steps > *, .reveal.is-in .download-grid > * { animation:rise-in 0.7s cubic-bezier(0.22,0.61,0.36,1) both; }
  .reveal.is-in .features-grid > *:nth-child(1),.reveal.is-in .steps > *:nth-child(1),.reveal.is-in .download-grid > *:nth-child(1) { animation-delay:0.05s; }
  .reveal.is-in .features-grid > *:nth-child(2),.reveal.is-in .steps > *:nth-child(2),.reveal.is-in .download-grid > *:nth-child(2) { animation-delay:0.12s; }
  .reveal.is-in .features-grid > *:nth-child(3),.reveal.is-in .steps > *:nth-child(3) { animation-delay:0.19s; }
  .reveal.is-in .features-grid > *:nth-child(4) { animation-delay:0.26s; }
  .reveal.is-in .features-grid > *:nth-child(5) { animation-delay:0.33s; }
  .reveal.is-in .features-grid > *:nth-child(6) { animation-delay:0.40s; }
  @keyframes rise-in { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }
}

/* =================== RESPONSIVE — TABLET (≤1024) =================== */
@media (max-width:1024px) {
  .container,.nav-inner,.hero-inner,.strip-inner,.footer-inner,.footer-credit-inner { padding-left:28px; padding-right:28px; }
  .nav-inner { gap:24px; }
  .nav-links { gap:20px; font-size:12px; }
  .hero-inner { padding:64px 28px 80px; gap:36px; }
  .hero h1 { font-size:60px; }
  .features-grid { grid-template-columns:repeat(2,1fr); }
  .download-grid { grid-template-columns:1fr; }
  .strip .channels { gap:24px; font-size:16px; }
}

/* =================== RESPONSIVE — MOBILE (≤768) =================== */
@media (max-width:768px) {
  section { padding:64px 0; }
  .container,.nav-inner,.hero-inner,.strip-inner,.footer-inner,.footer-credit-inner { padding-left:20px; padding-right:20px; }
  .nav-inner { padding:12px 20px; gap:12px; }
  .brand .name { font-size:14px; }
  .brand .powered { font-size:8px; }
  .brand .logo { width:42px; height:42px; }
  .nav-cta { display:none; }
  .nav-toggle { display:inline-flex; }
  .nav-links { position:fixed; inset:64px 0 0 0; background:var(--paper); flex-direction:column; gap:0; padding:24px; margin:0; font-size:18px; border-top:1px solid var(--rule); transform:translateY(-12px); opacity:0; pointer-events:none; transition:transform 0.2s ease, opacity 0.2s ease; z-index:60; overflow-y:auto; }
  .nav-links a { padding:16px 4px; border-bottom:1px solid var(--rule); opacity:1; font-weight:500; }
  .nav-links .mobile-cta { margin-top:20px; display:flex; flex-direction:column; gap:10px; }
  body.nav-open .nav-links { transform:translateY(0); opacity:1; pointer-events:auto; }
  .hero-inner { grid-template-columns:1fr; padding:48px 20px 64px; gap:32px; }
  .hero h1 { font-size:clamp(40px,11vw,56px); }
  .hero .lede { font-size:16px; }
  .hero .cta-row .btn { flex:1 1 auto; justify-content:center; }
  .hero .specs { gap:20px; flex-wrap:wrap; margin-top:32px; padding-top:24px; }
  .hero .spec { flex:1 1 40%; }
  .hero .spec .v { font-size:16px; }
  .hero-art { aspect-ratio:1; max-width:100%; }
  .hero-art svg { width:60%; height:auto; }
  .strip { padding:24px 0; }
  .strip-inner { gap:20px; }
  .strip .lab { padding-right:0; border-right:0; width:100%; padding-bottom:12px; border-bottom:1px solid var(--rule); }
  .strip .channels { gap:18px 24px; font-size:15px; }
  .section-head { gap:16px; margin-bottom:36px; padding-bottom:20px; }
  .section-head .left h2 { font-size:clamp(26px,6.5vw,32px); white-space:normal; }
  .section-head .right { font-size:14px; width:100%; }
  .features-grid { grid-template-columns:1fr; }
  .feature { padding:28px 22px; min-height:0; }
  .steps { grid-template-columns:1fr; }
  .step { padding:28px 0 !important; border-right:0; border-bottom:1px solid var(--rule-dark); }
  .step:last-child { border-bottom:0; }
  .step .arrow { display:none; }
  .step h3 { font-size:20px; }
  .step p { max-width:none; }
  .download-grid { grid-template-columns:1fr; }
  .dl-card { padding:28px 22px 24px; min-height:0; }
  .dl-card .list { list-style:none; margin:0 0 24px; padding:0; display:flex; flex-direction:column; gap:10px; flex:1; }
.dl-card .list li { display:flex; gap:10px; font-size:14px; line-height:1.5; color:var(--ink); }
.dl-card .list .chk { color:var(--amber); font-weight:700; flex-shrink:0; }
.dl-card .list + .meta { margin-top:auto; }
.dl-card .pin { position:static; display:inline-block; margin-bottom:14px; }
  .dl-card .meta { flex-wrap:wrap; gap:14px 22px; }
  .dl-card .cta-row .btn { flex:1 1 auto; justify-content:center; }
  .about-grid { grid-template-columns:1fr; gap:32px; }
  .about-grid p.lede { font-size:19px; }
  .about-grid p { font-size:15px; }
  details.q summary { padding:22px 0; font-size:15px; gap:14px; }
  details.q summary .n { min-width:24px; font-size:10px; }
  details.q .a { padding:0 0 24px 38px; font-size:14px; }
  .contact-grid { grid-template-columns:1fr; gap:36px; }
  .ci-row .v { font-size:17px; }
  .footer-credit-inner { flex-direction:column; align-items:flex-start; gap:14px; }
  .footer-inner { flex-direction:column; align-items:flex-start; gap:18px; padding:28px 20px; }
  .footer .links { flex-wrap:wrap; gap:14px 20px; }
}

/* =================== RESPONSIVE — SMALL (≤420) =================== */
@media (max-width:420px) {
  section { padding:52px 0; }
  .container,.nav-inner,.hero-inner,.strip-inner,.footer-inner,.footer-credit-inner { padding-left:16px; padding-right:16px; }
  .hero-inner { padding:36px 16px 52px; }
  .hero .eyebrow-row { font-size:9px; letter-spacing:0.08em; padding:6px 10px; }
  .hero h1 { font-size:clamp(34px,10vw,44px); }
  .hero .cta-row { flex-direction:column; }
  .hero .cta-row .btn { width:100%; }
  .hero .specs { gap:14px 24px; }
  .hero .spec { flex:1 1 100%; }
  .feature { padding:24px 18px; }
  .feature h3 { font-size:17px; }
  .strip .channels { gap:14px 18px; font-size:14px; }
  .dl-card { padding:24px 18px 20px; }
  .dl-card .platform .nm { font-size:19px; }
  .fact { flex-direction:column; align-items:flex-start; gap:4px; padding:18px 20px; }
  .fact .v { text-align:left; }
  details.q summary { font-size:14px; gap:10px; }
  details.q .a { padding-left:32px; }
}

/* =================== LEGAL PAGES =================== */
/* privacy.html, terms.html, support.html, 404.html — si te magazina-app/website */
.legal { max-width:820px; margin:0 auto; padding:72px 40px 96px; }
.legal .tag { font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--muted); letter-spacing:0.14em; text-transform:uppercase; }
.legal h1 { margin:16px 0 8px; font-size:44px; font-weight:700; letter-spacing:-0.035em; color:var(--navy); line-height:1.05; }
.legal .updated { font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--muted); margin-bottom:32px; }
.legal .summary { background:var(--paper); border-left:3px solid var(--amber); padding:18px 22px; margin:0 0 40px; font-size:15px; line-height:1.6; color:var(--ink); }
.legal h2 { margin:44px 0 12px; font-size:22px; font-weight:700; letter-spacing:-0.02em; color:var(--navy); }
.legal h3 { margin:28px 0 8px; font-size:17px; font-weight:700; letter-spacing:-0.01em; color:var(--navy); }
.legal p, .legal li { font-size:15px; line-height:1.65; color:var(--ink); }
.legal p { margin:0 0 14px; }
.legal ul { margin:0 0 14px; padding-left:22px; }
.legal li { margin-bottom:6px; }
.legal a { color:var(--navy); text-decoration:underline; text-decoration-color:var(--amber); text-underline-offset:3px; }
.legal code { font-family:'JetBrains Mono',monospace; font-size:0.9em; background:var(--paper); padding:1px 5px; }
.legal table { width:100%; border-collapse:collapse; margin:8px 0 18px; font-size:14px; }
.legal th, .legal td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--rule); vertical-align:top; }
.legal th { font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.legal .table-wrap { overflow-x:auto; }
@media (max-width:768px) {
  .legal { padding:48px 20px 72px; }
  .legal h1 { font-size:34px; }
}