:root{
  --ink:#111;
  --paper:#fff7e8;
  --yellow:#ffd84d;
  --pink:#ff77ad;
  --pink-soft:#f6a9c4;
  --mint:#b9e7d3;
  --blue:#9fdcf4;
  --white:#fffdf7;
  --radius:28px;
  --shadow:0 10px 0 rgba(17,17,17,.12);
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  overflow-x:hidden
}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{width:min(var(--max),calc(100% - 34px));margin:0 auto}
header{padding:22px 0 8px;position:relative;z-index:10}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;font-weight:800;text-transform:uppercase;font-size:14px}
.brand{font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;font-size:22px;letter-spacing:.5px;text-decoration:none}
.menu{display:flex;gap:28px;list-style:none;padding:0;margin:0}
.menu a{text-decoration:none;position:relative}
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:4px;background:var(--pink);transform:scaleX(0);transform-origin:left;transition:.18s ease;border-radius:50%}
.menu a:hover::after{transform:scaleX(1)}
.hero{position:relative;padding:42px 0 44px;min-height:420px;display:flex;align-items:center;justify-content:center;text-align:center}
.hero-inner{position:relative;z-index:2;width:min(960px,100%)}
.title-sticker{display:inline-block;position:relative;padding:18px 34px 16px;margin-bottom:18px;isolation:isolate}
.title-sticker::before{content:"";position:absolute;inset:5% -2%;background:var(--yellow);border-radius:42% 58% 44% 56% / 48% 45% 55% 52%;transform:rotate(-1.2deg);z-index:-1}
h1{margin:0;font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;font-size:clamp(66px,12vw,154px);line-height:.82;letter-spacing:-3px;text-transform:uppercase;transform:rotate(-1deg)}
.payoff{display:inline-block;position:relative;margin:10px 0 0;font-family:"Trebuchet MS",Arial,sans-serif;font-weight:900;font-size:clamp(22px,3.4vw,38px);line-height:1.08}
.payoff::after{content:"";position:absolute;left:8%;right:6%;bottom:-13px;height:6px;background:var(--pink);border-radius:50%;transform:rotate(.8deg)}
.doodle{position:absolute;font-family:"Trebuchet MS",Arial,sans-serif;font-weight:900;user-select:none;pointer-events:none}
.d1{font-size:54px;top:35px;left:13%;transform:rotate(-18deg)}
.d2{font-size:50px;top:72px;right:14%;transform:rotate(18deg)}
.d3{font-size:40px;bottom:36px;left:21%;transform:rotate(7deg)}
.d4{font-size:48px;bottom:32px;right:20%;transform:rotate(-8deg)}
.tests{padding:18px 0 52px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{border-radius:var(--radius);overflow:hidden;min-height:560px;padding:22px 24px 24px;display:flex;flex-direction:column;align-items:center;text-align:center;box-shadow:var(--shadow);border:2px solid rgba(17,17,17,.08);transition:transform .18s ease,box-shadow .18s ease}
.card:hover{transform:translateY(-6px) rotate(-.35deg);box-shadow:0 16px 0 rgba(17,17,17,.11)}
.pink{background:#f6a9c4}.mint{background:#b9e7d3}.blue{background:#9fdcf4}
.illustration{width:100%;height:220px;display:grid;place-items:center;margin-bottom:6px;position:relative}
.illustration img{max-width:92%;max-height:215px;object-fit:contain;filter:drop-shadow(0 10px 0 rgba(17,17,17,.12));transition:transform .2s ease}
.card:hover .illustration img{transform:rotate(-2deg) scale(1.035)}
.ransom{margin:2px auto 16px;display:flex;flex-wrap:wrap;justify-content:center;gap:5px 7px;max-width:320px;font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;font-size:36px;line-height:.96;text-transform:uppercase}
.ransom span{display:inline-block;padding:4px 8px 3px;background:var(--white);transform:rotate(var(--r,0deg));box-shadow:2px 3px 0 rgba(17,17,17,.08)}
.ransom .y{background:var(--yellow)} .ransom .p{background:#ff5ca7}
.card p{font-family:Georgia,"Times New Roman",serif;font-size:18px;line-height:1.35;margin:0 auto 22px;max-width:310px}
.cta{margin-top:auto;display:inline-flex;justify-content:center;align-items:center;gap:10px;width:min(260px,100%);padding:16px 20px;background:var(--ink);color:#fff;border-radius:999px;font-family:"Trebuchet MS",Arial,sans-serif;font-weight:900;font-size:22px;text-decoration:none;box-shadow:0 5px 0 rgba(255,255,255,.15) inset;transition:transform .15s ease}
.cta:hover{transform:scale(1.035)}
.cta:focus-visible,.menu a:focus-visible,.brand:focus-visible{outline:4px solid var(--yellow);outline-offset:4px}
.footer-wave{margin-top:14px;background:var(--pink-soft);position:relative;padding:70px 0 48px}
.footer-wave::before{content:"";position:absolute;top:-26px;left:-2%;width:104%;height:58px;background:var(--pink-soft);border-radius:55% 45% 49% 51% / 65% 72% 28% 35%;transform:rotate(-.4deg)}
.features{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;text-align:center}
.feature .ico{font-size:54px;margin-bottom:8px}
.feature strong{display:block;font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;font-size:26px;text-transform:uppercase;letter-spacing:.4px;margin-bottom:8px}
.feature span{display:block;font-family:Georgia,"Times New Roman",serif;font-size:16px;line-height:1.3}
.tiny{margin-top:42px;text-align:center;font-size:12px;opacity:.75}

/* Pagine test placeholder */
.test-shell{min-height:calc(100vh - 90px);display:grid;place-items:center;padding:34px 0 70px}
.test-panel{width:min(760px,100%);border-radius:32px;padding:34px 28px 32px;text-align:center;box-shadow:var(--shadow);border:2px solid rgba(17,17,17,.08)}
.test-panel img{width:min(320px,76vw);height:260px;object-fit:contain;margin:0 auto 14px;filter:drop-shadow(0 10px 0 rgba(17,17,17,.12))}
.test-panel h1{font-size:clamp(54px,10vw,92px);line-height:.92;letter-spacing:-1px;transform:none}
.test-panel p{font-family:Georgia,"Times New Roman",serif;font-size:20px;line-height:1.45;max-width:560px;margin:20px auto 28px}
.back{display:inline-flex;padding:14px 20px;border:3px solid var(--ink);border-radius:999px;text-decoration:none;font-weight:900;background:var(--white);box-shadow:4px 4px 0 var(--ink)}
.back:hover{transform:translate(-1px,-1px);box-shadow:6px 6px 0 var(--ink)}
.badge{display:inline-block;background:var(--yellow);font-weight:900;text-transform:uppercase;padding:7px 12px;transform:rotate(-2deg);margin-bottom:18px}

@media(max-width:900px){
  .hero{min-height:360px;padding-top:26px}
  .cards{grid-template-columns:1fr}
  .card{min-height:500px}
  .features{grid-template-columns:repeat(2,1fr)}
  .d1,.d2,.d3,.d4{display:none}
}
@media(max-width:620px){
  header{padding-top:16px}
  .nav{align-items:flex-start}
  .menu{gap:12px;font-size:11px;flex-wrap:wrap;justify-content:flex-end}
  .hero{min-height:330px;padding-bottom:30px}
  h1{font-size:clamp(62px,20vw,102px);letter-spacing:-2px}
  .title-sticker{padding:16px 16px 12px}
  .payoff{font-size:22px;max-width:310px}
  .cards{gap:18px}
  .card{padding:20px 18px;min-height:485px}
  .illustration{height:180px}
  .illustration img{max-height:176px}
  .ransom{font-size:32px}
  .features{grid-template-columns:1fr;gap:34px}
  .footer-wave{padding-top:56px}
  .test-panel{padding:26px 18px}
  .test-panel img{height:210px}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;transition:none!important}
}


/* Quiz */
.quiz-wrap{width:min(820px,calc(100% - 28px));margin:26px auto 70px}
.quiz-top{text-align:center;margin:18px auto 26px}
.quiz-kicker{display:inline-block;background:var(--yellow);font-weight:900;padding:7px 12px;transform:rotate(-1.5deg);text-transform:uppercase}
.quiz-title{font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;font-size:clamp(48px,8vw,86px);line-height:.92;margin:18px 0 10px;text-transform:uppercase}
.quiz-sub{font-family:Georgia,"Times New Roman",serif;font-size:19px;line-height:1.4;max-width:650px;margin:0 auto}
.progress-shell{height:14px;background:#fff;border:3px solid var(--ink);border-radius:999px;overflow:hidden;margin:24px 0 26px;box-shadow:3px 3px 0 var(--ink)}
.progress-bar{height:100%;width:0;background:var(--pink);transition:width .22s ease}
.question-card{background:#fffdf7;border:3px solid var(--ink);border-radius:28px;padding:30px 26px;box-shadow:8px 8px 0 var(--ink)}
.question-count{font-weight:900;text-transform:uppercase;font-size:13px;letter-spacing:.3px;opacity:.65;margin-bottom:10px}
.question-text{font-family:"Trebuchet MS",Arial,sans-serif;font-size:clamp(28px,5vw,42px);line-height:1.08;font-weight:900;margin:0 0 24px}
.answers{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.answer{
  width:100%;border:3px solid var(--ink);border-radius:18px;background:var(--paper);
  padding:18px 16px;text-align:left;font:800 17px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;
  cursor:pointer;box-shadow:4px 4px 0 var(--ink);transition:transform .12s ease,box-shadow .12s ease,background .12s ease
}

.answer:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.quiz-start{
  margin-top:26px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--ink);color:#fff;border-radius:999px;padding:17px 26px;
  font-family:"Trebuchet MS",Arial,sans-serif;font-weight:900;font-size:22px;text-decoration:none;border:0;cursor:pointer
}
.quiz-screen[hidden]{display:none!important}
.result-card{
  border:3px solid var(--ink);border-radius:30px;padding:34px 26px 30px;text-align:center;
  background:var(--pink-soft);box-shadow:9px 9px 0 var(--ink)
}
.result-icon{font-size:94px;line-height:1;margin-bottom:12px}
.result-pre{display:inline-block;background:var(--yellow);padding:6px 10px;font-weight:900;text-transform:uppercase;transform:rotate(-1deg)}
.result-title{font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;font-size:clamp(54px,9vw,96px);line-height:.92;margin:14px 0 18px;text-transform:uppercase}
.result-copy{font-family:Georgia,"Times New Roman",serif;font-size:21px;line-height:1.45;max-width:620px;margin:0 auto 24px}
.result-zinger{font-weight:900;font-size:18px;line-height:1.35;max-width:600px;margin:0 auto 28px}
.result-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.btn-dark,.btn-light{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 20px;border-radius:999px;
  font-weight:900;text-decoration:none;border:3px solid var(--ink);cursor:pointer
}
.btn-dark{background:var(--ink);color:#fff}
.btn-light{background:#fff;color:var(--ink);box-shadow:4px 4px 0 var(--ink)}
.share-note{font-size:12px;opacity:.6;margin-top:18px}
@media(max-width:650px){
  .answers{grid-template-columns:1fr}
  .question-card{padding:24px 18px}
  .answer{font-size:16px}
}

.result-image-wrap{display:flex;justify-content:center;align-items:center;margin:12px 0 10px}
.result-image{width:min(220px,60vw);max-height:180px;object-fit:contain;filter:drop-shadow(0 10px 0 rgba(17,17,17,.12))}

/* Header completo pagina test */
.test-header .nav{padding-bottom:8px}
.test-header .menu{align-items:center}

/* Footer completo pagine test */
.test-footer{margin-top:70px;background:var(--pink-soft);position:relative;padding:58px 0 34px}
.test-footer::before{
  content:"";position:absolute;top:-22px;left:-2%;width:104%;height:48px;background:var(--pink-soft);
  border-radius:55% 45% 49% 51% / 65% 72% 28% 35%;transform:rotate(-.35deg)
}
.test-footer .features{grid-template-columns:repeat(4,1fr)}
.footer-links{
  display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:32px;font-size:13px;font-weight:900;text-transform:uppercase
}
.footer-links a{text-decoration:none}
.footer-links a:hover{text-decoration:underline}

/* Social share */
.social-share{
  margin-top:28px;padding-top:22px;border-top:2px dashed rgba(17,17,17,.35)
}
.social-share-title{
  font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;
  font-size:28px;text-transform:uppercase;margin:0 0 14px
}
.social-grid{
  display:flex;justify-content:center;gap:10px;flex-wrap:wrap
}
.social-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:3px solid var(--ink);border-radius:999px;padding:11px 15px;
  background:#fff;color:var(--ink);text-decoration:none;font-weight:900;
  box-shadow:3px 3px 0 var(--ink);cursor:pointer
}
.social-btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}
.social-btn.whatsapp{background:#dcf8c6}
.social-btn.facebook{background:#dbe7ff}
.social-btn.x{background:#eee}
.social-btn.telegram{background:#d9f3ff}
.social-btn.linkedin{background:#dcecff}
.social-btn.instagram{background:#ffe3f0}

@media(max-width:900px){
  .test-footer .features{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:620px){
  .test-header .menu{display:flex}
  .test-footer .features{grid-template-columns:1fr}
  .social-btn{flex:1 1 44%;min-width:140px}
}


/* Home: tutta la card è cliccabile */
.card-link{
  display:block;
  color:inherit;
  text-decoration:none;
  border-radius:var(--radius);
}
.card-link:focus-visible{
  outline:5px solid var(--yellow);
  outline-offset:7px;
}
.card-link .card{
  height:100%;
}
.card-link:hover .card{
  transform:translateY(-6px) rotate(-.35deg);
  box-shadow:0 16px 0 rgba(17,17,17,.11);
}
.card-link:hover .illustration img{
  transform:rotate(-2deg) scale(1.035);
}
.card-link .cta{
  pointer-events:none;
}


/* v8 — mobile typography + header alignment fix */
.cta,
.quiz-start{
  font-family:"Trebuchet MS",Arial,sans-serif !important;
  font-style:normal;
  letter-spacing:.2px;
}

@media(max-width:620px){
  header{
    padding:16px 0 6px;
  }

  .nav{
    align-items:center !important;
    justify-content:space-between;
    gap:14px;
  }

  .brand{
    flex:0 0 auto;
    font-size:clamp(20px,5.8vw,27px);
    line-height:1;
    white-space:nowrap;
  }

  .menu{
    flex:0 1 auto;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    flex-wrap:nowrap;
    gap:14px;
    margin:0;
    padding:0;
    font-family:"Trebuchet MS",Arial,sans-serif;
    font-size:12px;
    line-height:1;
    white-space:nowrap;
  }

  .menu li{
    display:flex;
    align-items:center;
  }

  .menu a{
    display:flex;
    align-items:center;
    min-height:28px;
    line-height:1;
  }

  .menu a::after{
    bottom:-3px;
  }

  .cta{
    font-size:20px !important;
    font-weight:900;
    text-transform:uppercase;
  }
}

@media(max-width:430px){
  .wrap{
    width:min(var(--max),calc(100% - 24px));
  }

  .nav{
    gap:10px;
  }

  .brand{
    font-size:19px;
  }

  .menu{
    gap:10px;
    font-size:10px;
  }

  .cta{
    font-size:18px !important;
  }
}

.tiny a{
  font-weight:900;
  text-decoration:none;
}
.tiny a:hover{
  text-decoration:underline;
}


/* Chi siamo */
.about-wrap{
  width:min(1080px,calc(100% - 34px));
  margin:38px auto 70px;
}
.about-hero{
  text-align:center;
}
.about-badge{
  display:inline-block;
  background:var(--yellow);
  padding:8px 14px;
  font-weight:900;
  text-transform:uppercase;
  transform:rotate(-1deg);
  margin-bottom:24px;
}
.about-image-card{
  width:min(920px,100%);
  margin:0 auto 34px;
  border-radius:32px;
  overflow:hidden;
  border:3px solid var(--ink);
  box-shadow:10px 10px 0 var(--ink);
  background:#fff;
}
.about-image-card img{
  width:100%;
  height:auto;
  display:block;
}
.about-copy{
  width:min(820px,100%);
  margin:0 auto;
}
.about-copy h1{
  font-size:clamp(52px,8vw,92px);
  line-height:.9;
  margin:0 0 30px;
  transform:none;
}
.about-copy p{
  font-family:Georgia,"Times New Roman",serif;
  font-size:22px;
  line-height:1.5;
  margin:0 auto 24px;
  max-width:760px;
}
.about-copy strong{
  font-weight:700;
}
.about-ending{
  font-family:"Trebuchet MS",Arial,sans-serif !important;
  font-weight:900;
  font-size:30px !important;
  line-height:1.2 !important;
  margin-top:30px !important;
}
.about-signature{
  margin:36px auto 30px;
  padding:22px 24px;
  width:min(620px,100%);
  background:var(--pink-soft);
  border:3px solid var(--ink);
  border-radius:22px;
  box-shadow:6px 6px 0 var(--ink);
  font-weight:900;
  line-height:1.45;
}
.about-signature a{
  color:inherit;
  text-decoration:none;
}
.about-signature a:hover{
  text-decoration:underline;
}
.about-signature span{
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
}
.about-cta{
  text-decoration:none;
  margin-top:6px;
}
@media(max-width:620px){
  .about-wrap{
    width:calc(100% - 24px);
    margin-top:24px;
  }
  .about-image-card{
    border-radius:24px;
    box-shadow:7px 7px 0 var(--ink);
  }
  .about-copy p{
    font-size:19px;
  }
  .about-ending{
    font-size:25px !important;
  }
}


/* v21 — Chi siamo layout definitivo */
body:has(.about-wrap){
  overflow-x:hidden;
}

.about-wrap{
  width:min(1180px,calc(100% - 40px)) !important;
  margin:42px auto 84px !important;
}

.about-hero{
  display:grid !important;
  grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);
  grid-template-areas:
    "badge badge"
    "image copy";
  gap:34px 46px;
  align-items:center;
  text-align:left !important;
}

.about-badge{
  grid-area:badge;
  justify-self:center;
  margin:0 0 2px !important;
}

.about-image-card{
  grid-area:image;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  border-radius:32px !important;
  overflow:hidden !important;
  border:3px solid var(--ink) !important;
  box-shadow:10px 10px 0 var(--ink) !important;
  background:#fff !important;
}

.about-image-card img{
  display:block !important;
  width:100% !important;
  height:auto !important;
}

.about-copy{
  grid-area:copy;
  width:100% !important;
  margin:0 !important;
}

.about-copy h1{
  margin:0 0 26px !important;
  font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif !important;
  font-size:clamp(54px,5.2vw,82px) !important;
  line-height:.9 !important;
  letter-spacing:-2px !important;
  text-transform:uppercase !important;
  transform:none !important;
  max-width:100% !important;
}

.about-copy p{
  max-width:100% !important;
  margin:0 0 22px !important;
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:20px !important;
  line-height:1.48 !important;
}

.about-copy strong{
  font-weight:700 !important;
}

.about-ending{
  margin:28px 0 0 !important;
  font-family:"Trebuchet MS",Arial,sans-serif !important;
  font-size:28px !important;
  line-height:1.15 !important;
  font-weight:900 !important;
}

.about-signature{
  width:100% !important;
  max-width:620px !important;
  margin:30px 0 26px !important;
  padding:20px 22px !important;
  box-sizing:border-box !important;
}

.about-cta{
  margin:0 !important;
}

@media(max-width:900px){
  .about-hero{
    grid-template-columns:1fr;
    grid-template-areas:
      "badge"
      "image"
      "copy";
    gap:26px;
    text-align:center !important;
  }

  .about-copy{
    width:min(760px,100%) !important;
    margin:0 auto !important;
  }

  .about-copy h1{
    font-size:clamp(48px,10vw,74px) !important;
  }

  .about-signature{
    margin:30px auto 26px !important;
  }
}

@media(max-width:620px){
  .about-wrap{
    width:calc(100% - 24px) !important;
    margin:24px auto 58px !important;
  }

  .about-hero{
    gap:22px;
  }

  .about-image-card{
    border-radius:22px !important;
    box-shadow:7px 7px 0 var(--ink) !important;
  }

  .about-copy h1{
    font-size:clamp(44px,14vw,62px) !important;
    letter-spacing:-1px !important;
  }

  .about-copy p{
    font-size:18px !important;
    line-height:1.45 !important;
  }

  .about-ending{
    font-size:24px !important;
  }
}


/* v22 — fix "sticky hover" sui pulsanti risposta in Safari/Chrome mobile */
.answer{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

/* Hover visuale solo sui dispositivi che hanno davvero un mouse/trackpad. */
@media (hover:hover) and (pointer:fine){
  .answer:hover{
    background:var(--yellow);
    transform:translate(-1px,-1px);
    box-shadow:6px 6px 0 var(--ink);
  }
}

/* Feedback solo durante il tap: sparisce appena il dito si alza. */
.answer:active{
  background:var(--yellow);
  transform:translate(3px,3px);
  box-shadow:1px 1px 0 var(--ink);
}

/* Focus da tastiera sì, ma senza simulare una selezione persistente su touch. */
.answer:focus{
  outline:none;
}
.answer:focus-visible{
  outline:4px solid var(--yellow);
  outline-offset:3px;
}


/* v33 — graceful API error state */
.api-error{
  width:min(620px,92%);
  margin:24px auto 0;
  padding:18px 18px 16px;
  border:4px solid #111;
  border-radius:24px;
  background:#fff7e8;
  box-shadow:8px 8px 0 #111;
  text-align:center;
}
.api-error[hidden]{display:none!important}
.api-error-mark{
  display:inline-block;
  margin-bottom:10px;
  padding:7px 13px 6px;
  background:#ffd84d;
  border:3px solid #111;
  transform:rotate(-2deg);
  font:900 20px/1 "Courier New",monospace;
  letter-spacing:.03em;
}
.api-error-title{
  display:block;
  font:900 clamp(26px,5vw,40px)/1 Impact,"Arial Black",sans-serif;
  text-transform:uppercase;
}
.api-error-message{
  margin:10px auto 14px;
  max-width:500px;
  font:700 17px/1.35 "Trebuchet MS",Arial,sans-serif;
}
.api-error-retry{cursor:pointer}
.api-error.is-offline .api-error-mark{background:#b9e7d3}
.api-error.is-server .api-error-mark{background:#ff77ad}

@media (max-width:600px){
  .api-error{
    margin-top:18px;
    padding:15px 14px 14px;
    border-width:3px;
    box-shadow:5px 5px 0 #111;
  }
}


/* v38 — authenticated editorial preview */
.preview-ribbon{
  position:sticky;
  top:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  padding:9px 14px;
  border-bottom:4px solid #111;
  background:#ffd84d;
  color:#111;
  font:900 14px/1.2 "Courier New",monospace;
}
.preview-ribbon strong{
  display:inline-block;
  padding:4px 8px;
  background:#111;
  color:#fff;
  border-radius:6px;
}
.preview-ribbon a{
  color:#111;
  font-weight:900;
}
.preview-page{
  outline:0;
}
@media(max-width:600px){
  .preview-ribbon{gap:7px;padding:8px;font-size:12px}
}


/* v41 — legal pages */
.legal-wrap{
  padding:42px 0 72px;
}
.legal-hero{
  max-width:900px;
  margin:0 0 30px;
}
.legal-hero h1{
  margin:10px 0 12px;
  font:900 clamp(46px,9vw,92px)/.95 Impact,"Arial Black",sans-serif;
}
.legal-hero > p{
  max-width:760px;
  font-size:clamp(18px,2.5vw,24px);
  line-height:1.4;
}
.legal-section{
  max-width:900px;
  margin:18px 0;
  padding:22px;
  border:4px solid #111;
  border-radius:20px;
  background:#fff;
  box-shadow:7px 7px 0 #111;
}
.legal-section:nth-of-type(3n+1){background:#fff7e8}
.legal-section:nth-of-type(3n+2){background:#b9e7d3}
.legal-section:nth-of-type(3n){background:#9fdcf4}
.legal-section h2{
  margin:0 0 12px;
  font:900 clamp(24px,4vw,38px)/1 Impact,"Arial Black",sans-serif;
}
.legal-section p,.legal-section li{
  font-size:16px;
  line-height:1.65;
}
.legal-section a,.legal-links a{
  color:inherit;
  font-weight:900;
}
.legal-links{
  display:inline-block;
  margin:5px 0;
}


/* v42 — FAQ */
.faq-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
.faq-card{
  border:4px solid #111;
  border-radius:20px;
  padding:20px;
  background:#fff;
  box-shadow:6px 6px 0 #111;
}
.faq-card:nth-child(4n+1){background:#fff7e8}
.faq-card:nth-child(4n+2){background:#ffd84d}
.faq-card:nth-child(4n+3){background:#b9e7d3}
.faq-card:nth-child(4n){background:#9fdcf4}
.faq-card h2{
  margin:0 0 10px;
  font:900 clamp(24px,3.5vw,34px)/1 Impact,"Arial Black",sans-serif;
}
.faq-card p{
  margin:0;
  font-size:16px;
  line-height:1.6;
}
.faq-card a{
  color:inherit;
  font-weight:900;
}
@media(max-width:760px){
  .faq-grid{grid-template-columns:1fr}
}