/* ============================================================================
   Bonus non AAMS - shared stylesheet, linked by EVERY page.
   ALL colour lives in the ONE :root block below. Never a hex anywhere else in
   this file or in any page, so partial theming is structurally impossible.
   ============================================================================ */

:root{
  /* --- palette ------------------------------------------------------------ */
  --ink:#211a24;          /* body copy */
  --ink-soft:#635a67;     /* meta, captions */
  --primary:#3b1d3d;      /* masthead rule, footer, H1/H2 */
  --primary-d:#2a1230;    /* footer base */
  --accent:#a34a10;       /* copper: rank badge, stars, rules, BONUS figure */
  --accent-soft:#fbeee4;  /* copper tint */

  /* ⛔ RESERVED. Rule 19: --cta appears on the .cta button class and NOWHERE
     else - not headings, ranks, bonuses, ribbons, links, borders or icons.
     Azure is the complement of the copper accent, so on a plum-and-copper page
     the money action cannot dissolve into the palette. Grep before you reuse it. */
  --cta:#1064a8;
  --cta-d:#0b4d84;

  --bg:#ffffff;
  --bg-soft:#f8f5f8;
  --bg-tint:#f2ecf3;
  --line:#e2dae3;
  --line-strong:#c3b6c6;
  --ok:#1c6b4a;
  --no:#9a3324;

  /* On-dark text, tuned to --primary-d. Tokenised because a sibling domain that
     re-themes the :root would otherwise inherit greys mixed for THIS plum and
     the footer would drift out of the palette. */
  --on-dark:#ffffff;
  --on-dark-soft:#dcd0de;
  --on-dark-dim:#bfaec2;
  --hairline-dark:rgba(255,255,255,.16);
  --shadow-tint:rgba(33,26,36,.07);
  --shadow-tint-2:rgba(33,26,36,.05);

  /* --- type -------------------------------------------------------------- */
  --f-head:"Newsreader",Georgia,"Times New Roman",serif;
  --f-body:"Barlow",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  /* --- shape ------------------------------------------------------------- */
  --r-sm:2px;
  --r-md:4px;
  --r-lg:6px;
  --r-pill:999px;
  --shadow:0 1px 2px rgba(33,26,36,.07),0 4px 14px rgba(33,26,36,.05);
  --maxw:1120px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.68;
  color:var(--ink);
  background:var(--bg);
  overflow-x:hidden;
}
img{max-width:100%;height:auto}

/* ⛔ .wrap owns the horizontal gutter. Never set `padding` (the shorthand) on
   .wrap or on anything that also needs the gutter - a shorthand clobbers the
   inline padding and the content squashes to the left edge on mobile. */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-left:20px;padding-right:20px}

a{color:var(--primary);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--primary-d)}

h1,h2,h3,h4{font-family:var(--f-head);color:var(--primary);line-height:1.24;margin:0}
h1{font-size:2.05rem;font-weight:700;letter-spacing:-.01em}
h2{font-size:1.55rem;font-weight:700;margin-top:2.6rem;margin-bottom:.85rem;padding-top:.9rem;border-top:2px solid var(--accent)}
h3{font-size:1.2rem;font-weight:600;margin-top:1.9rem;margin-bottom:.6rem}
h4{font-size:1.03rem;font-weight:600;margin-top:1.3rem;margin-bottom:.4rem}
p{margin:0 0 1.05rem}
ul,ol{margin:0 0 1.15rem;padding-left:1.35rem}
li{margin-bottom:.45rem}
strong{font-weight:600}

/* ---------------------------------------------------------------- masthead */
/* Non-sticky by design (rule 7). Light bar because the wordmark is dark. */
.masthead{background:var(--bg);border-bottom:3px solid var(--primary);position:static}
.masthead__in{display:flex;align-items:center;gap:18px;min-height:76px;padding-top:10px;padding-bottom:10px}
.masthead__logo{display:block;flex:0 0 auto;line-height:0}
.masthead__logo img{height:52px;width:auto;display:block}
.nav{margin-left:auto;display:flex;align-items:center;gap:20px}
.nav a{font-size:.94rem;text-decoration:none;color:var(--primary);font-weight:500}
.nav a:hover{text-decoration:underline}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line-strong);border-radius:var(--r-sm);width:44px;height:40px;cursor:pointer;align-items:center;justify-content:center}
.burger span{display:block;width:20px;height:2px;background:var(--primary);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--primary)}
.burger span::before{top:-6px}
.burger span::after{top:6px}

/* ------------------------------------------------------------------- hero */
/* Compact for BOTH views so the toplist clears the fold (rule 1). Nothing
   sits above the H1 - no eyebrow, no chip, no disclosure (rule 5). */
.hero{padding-top:22px;padding-bottom:6px}
.hero__lede{font-size:1.06rem;color:var(--ink);margin-top:.7rem;margin-bottom:.9rem;max-width:62ch}

.byline{display:flex;align-items:center;gap:12px;padding-top:12px;padding-bottom:12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:18px}
.byline__img{width:46px;height:46px;border-radius:50%;flex:0 0 auto;object-fit:cover}
.byline__who{font-size:.93rem;line-height:1.42}
.byline__name{font-weight:600}
.byline__role{color:var(--ink-soft)}
.byline__meta{list-style:none;margin:.25rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.82rem;color:var(--ink-soft)}
.byline__meta li{margin:0}

/* The toplist's own H2 sits tight under the byline on every width, so the
   ranking clears the fold (rule 1). Later H2s keep the full breathing room. */
.h2--first{margin-top:1.4rem;padding-top:.6rem;margin-bottom:.6rem}

/* ---------------------------------------------------------------- toplist */
/* NEW card geometry for this batch: a vertical brass rank gutter on the left,
   then chip, name, bonus, CTA. Retired when the batch closes. */
.toplist{list-style:none;margin:0 0 1.4rem;padding:0}
.card{
  display:grid;
  grid-template-columns:46px 168px minmax(0,1fr) 200px 170px;
  align-items:center;
  gap:16px;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--bg);
  box-shadow:var(--shadow);
  margin-bottom:12px;
  overflow:hidden;
}
.card--top{border-color:var(--accent)}
.rank{
  align-self:stretch;display:flex;align-items:center;justify-content:center;
  background:var(--accent-soft);color:var(--accent);
  font-family:var(--f-head);font-weight:700;font-size:1.2rem;
  border-right:1px solid var(--line);
}
.chip{
  display:flex;align-items:center;justify-content:center;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);
  height:64px;margin-top:12px;margin-bottom:12px;padding-left:10px;padding-right:10px;
}
.chip img{max-height:44px;width:auto;object-fit:contain}
.card__mid{min-width:0;padding-top:12px;padding-bottom:12px}
.card__name{font-family:var(--f-head);font-weight:700;font-size:1.08rem;color:var(--primary);margin:0}
.stars{color:var(--accent);font-size:.95rem;letter-spacing:1px}
.score{font-size:.86rem;color:var(--ink-soft);margin-left:6px}
.tag{display:inline-block;font-size:.76rem;color:var(--ink-soft);border:1px solid var(--line-strong);border-radius:var(--r-pill);padding:2px 10px;margin-top:6px}
.bonus{padding-top:12px;padding-bottom:12px;min-width:0}
.bonus__lab{display:block;font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);font-weight:600}
.bonus__amt{display:block;font-family:var(--f-head);font-weight:700;font-size:1.24rem;line-height:1.2;color:var(--accent)}
.bonus__amt--none{color:var(--ink-soft);font-size:.95rem;font-family:var(--f-body);font-weight:500}
.bonus__date{display:block;font-size:.72rem;color:var(--ink-soft);margin-top:2px}
.card__act{padding-top:12px;padding-bottom:12px;padding-right:16px}

/* The one reserved colour. Nothing else in this file may use --cta. */
.cta{
  display:block;width:100%;text-align:center;
  background:var(--cta);color:var(--on-dark);text-decoration:none;
  font-weight:700;font-size:.95rem;letter-spacing:.02em;
  border-radius:var(--r-md);padding-top:13px;padding-bottom:13px;
  border:0;cursor:pointer;
}
.cta:hover{background:var(--cta-d);color:var(--on-dark)}
.cta--sm{font-size:.88rem;padding-top:10px;padding-bottom:10px}
.card__sub{grid-column:1/-1;border-top:1px solid var(--line);background:var(--bg-soft);font-size:.85rem;color:var(--ink-soft);padding:9px 16px}

/* ---------------------------------------------------------------- reviews */
.review{border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;margin-bottom:20px;background:var(--bg)}
.review__head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.review__chip{flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);width:130px;height:56px;padding-left:8px;padding-right:8px}
.review__chip img{max-height:38px;width:auto;object-fit:contain}
.review h3{margin-top:0}
.scores{list-style:none;margin:0 0 1rem;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.scores li{margin:0;background:var(--bg-soft);border-radius:var(--r-md);padding:9px 10px;text-align:center}
.scores b{display:block;font-family:var(--f-head);font-size:1.05rem;color:var(--primary)}
.scores span{font-size:.74rem;color:var(--ink-soft);line-height:1.3;display:block}
.proscons{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:1rem}
.proscons h4{margin-top:0}
.proscons ul{list-style:none;margin:0;padding:0;font-size:.92rem}
.proscons li{padding-left:22px;position:relative}
.pros li::before{content:"+";position:absolute;left:2px;top:0;color:var(--ok);font-weight:700}
/* U+2212 MINUS SIGN, deliberately NOT U+2013 EN DASH. VOICE-SPEC bans en/em
   dashes on the rendered page, and a CSS escape like "\2013" is invisible to a
   grep for the literal character, so the ban has to be honoured here too. */
.cons li::before{content:"\2212";position:absolute;left:2px;top:0;color:var(--no);font-weight:700}
.review__act{max-width:280px}

/* ------------------------------------------------------------- runners-up */
.runners{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.runners li{margin:0;border:1px solid var(--line);border-radius:var(--r-lg);padding:16px;background:var(--bg)}
.runners__chip{display:flex;align-items:center;height:44px;margin-bottom:10px}
.runners__chip img{max-height:34px;width:auto;object-fit:contain}
.runners h3{font-size:1.02rem;margin-top:0;margin-bottom:.4rem}
.runners p{font-size:.9rem;margin-bottom:.8rem}

/* ---------------------------------------------------------------- tables */
/* Every wide block scrolls inside its own container so the page body itself
   never scrolls horizontally, down to 320px. */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:1.3rem;border:1px solid var(--line);border-radius:var(--r-lg)}
table{border-collapse:collapse;width:100%;min-width:600px;font-size:.92rem}
thead th{background:var(--primary);color:var(--on-dark);font-family:var(--f-head);font-weight:600;text-align:left;padding:11px 13px;white-space:nowrap}
tbody td{border-top:1px solid var(--line);padding:11px 13px;vertical-align:top}
tbody tr:nth-child(even){background:var(--bg-soft)}
/* .cell-date is deliberately absent: this build's comparison table gives the rilevazione
   date its OWN column instead of tucking it under the bonus string, so the class the
   reference chrome carried would be dead CSS here. Dead CSS multiplies when chrome clones. */
td .cell-none{color:var(--ink-soft)}
.tw--narrow table{min-width:520px}

/* ------------------------------------------------------------------ misc */
.note{background:var(--bg-tint);border-left:3px solid var(--accent);border-radius:var(--r-sm);padding:14px 16px;margin-bottom:1.3rem;font-size:.94rem}
.note p:last-child{margin-bottom:0}
.steps{counter-reset:s;list-style:none;padding-left:0}
.steps li{counter-increment:s;padding-left:44px;position:relative;margin-bottom:.85rem}
.steps li::before{content:counter(s);position:absolute;left:0;top:1px;width:30px;height:30px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-family:var(--f-head);font-weight:700;display:flex;align-items:center;justify-content:center;font-size:.95rem}
.faq{border-top:1px solid var(--line)}
.faq__q{border-bottom:1px solid var(--line);padding-top:16px;padding-bottom:16px}
.faq__q h3{margin-top:0;margin-bottom:.45rem;font-size:1.06rem}
.faq__q p:last-child{margin-bottom:0}
.tree{list-style:none;padding-left:0;margin-bottom:1.2rem}
.tree>li{border-left:3px solid var(--accent);padding-left:16px;margin-bottom:1.1rem}
.tree b{font-family:var(--f-head);color:var(--primary);display:block;margin-bottom:.2rem}
.authorbox{display:flex;gap:18px;align-items:flex-start;background:var(--bg-soft);border-radius:var(--r-lg);padding:20px;margin-top:2rem}
.authorbox img{width:96px;height:96px;border-radius:50%;flex:0 0 auto;object-fit:cover}
.authorbox h2{margin-top:0;border-top:0;padding-top:0;font-size:1.2rem}
.authorbox p:last-child{margin-bottom:0}
.prose{padding-bottom:2.4rem}
/* max-width in px alone overflows a 320px viewport once .wrap's gutter is
   subtracted, and body{overflow-x:hidden} hides it. Cap on BOTH axes. */
.portrait{border-radius:var(--r-lg);width:320px;max-width:100%;height:auto;display:block;margin-bottom:.4rem}
.lastmod{font-size:.84rem;color:var(--ink-soft);margin-top:1.6rem}

/* ------------------------------------------------------------------ footer */
.footer{background:var(--primary-d);color:var(--on-dark-soft);margin-top:3rem;padding-top:34px;padding-bottom:30px;font-size:.9rem}
.footer a{color:var(--on-dark);text-decoration:underline}
.footer h2{color:var(--on-dark);font-size:1rem;border-top:0;padding-top:0;margin-top:0;margin-bottom:.6rem}
.footer__cols{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:28px}
.footer ul{list-style:none;padding-left:0;margin:0}
.footer li{margin-bottom:.4rem}
.rg{border-top:1px solid var(--hairline-dark);margin-top:26px;padding-top:20px}
.rg__age{display:inline-block;border:2px solid var(--accent);color:var(--accent);border-radius:50%;width:42px;height:42px;line-height:38px;text-align:center;font-family:var(--f-head);font-weight:700;font-size:.95rem;float:left;margin-right:14px}
.rg__num{font-family:var(--f-head);font-size:1.28rem;font-weight:700;color:var(--on-dark);display:block}
.rg p{margin-bottom:.7rem}
.disclosure{border-top:1px solid var(--hairline-dark);margin-top:22px;padding-top:18px;font-size:.82rem;color:var(--on-dark-dim)}

/* ============================ responsive ============================== */
@media (max-width:900px){
  .footer__cols{grid-template-columns:1fr 1fr}
  .card{grid-template-columns:44px 140px minmax(0,1fr) 170px;}
  .card__act{grid-column:2/-1;padding-right:16px;padding-top:0}
  .scores{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width:760px){
  /* Same content, reflowed. No display:none on anything real (rule 2). */
  .nav{
    display:none;position:static;width:100%;
    flex-direction:column;align-items:stretch;gap:0;
    border-top:1px solid var(--line);
  }
  .nav.open{display:flex}
  .nav a{padding-top:13px;padding-bottom:13px;border-bottom:1px solid var(--line)}
  .burger{display:flex}
  .masthead__in{flex-wrap:wrap;min-height:64px}
  .masthead__logo img{height:42px}

  h1{font-size:1.52rem}
  h2{font-size:1.24rem;margin-top:2rem}
  h3{font-size:1.08rem}
  body{font-size:16px}
  /* Rule 1: the toplist has to clear the fold on mobile too, and the only
     sanctioned way is compacting the hero for BOTH views. Nothing is hidden. */
  .hero{padding-top:10px;padding-bottom:0}
  .hero__lede{font-size:1rem;margin-top:.4rem;margin-bottom:.5rem}
  .byline{margin-bottom:8px;padding-top:7px;padding-bottom:7px;gap:9px}
  .byline__img{width:38px;height:38px}
  .byline__who{font-size:.86rem;line-height:1.35}
  .byline__meta{font-size:.72rem;gap:2px 10px;margin-top:.15rem}
  .h2--first{margin-top:1rem;padding-top:.55rem;margin-bottom:.5rem}

  /* Cards centre and the CTA goes full-width and LAST; the "ideale per" tag
     sits below the bonus amount. */
  .card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:0;padding-bottom:14px}
  .rank{align-self:stretch;border-right:0;border-bottom:1px solid var(--line);padding-top:5px;padding-bottom:5px}
  .chip{width:100%;max-width:210px;margin-top:14px;margin-bottom:10px}
  .card__mid,.bonus,.card__act{width:100%;padding-top:0;padding-bottom:0;padding-left:16px;padding-right:16px}
  .card__mid{margin-bottom:8px}
  .bonus{margin-bottom:12px}
  .bonus__amt{font-size:1.3rem}
  .card__sub{width:100%;text-align:center;margin-top:12px}

  .proscons{grid-template-columns:1fr;gap:6px}
  .scores{grid-template-columns:repeat(2,minmax(0,1fr))}
  .review{padding:16px}
  .review__act{max-width:none}
  .authorbox{flex-direction:column;align-items:center;text-align:center}
  .runners{grid-template-columns:1fr}
}

@media (max-width:400px){
  .wrap{padding-left:14px;padding-right:14px}
  h1{font-size:1.34rem}
  h2{font-size:1.14rem}
  body{font-size:15.5px}
  .scores{grid-template-columns:1fr 1fr}
  .footer__cols{grid-template-columns:1fr}
  .steps li{padding-left:38px}
  .steps li::before{width:26px;height:26px;font-size:.85rem}
}

@media (max-width:340px){
  .wrap{padding-left:11px;padding-right:11px}
  h1{font-size:1.22rem}
  .chip{max-width:170px}
  .rg__age{float:none;margin-bottom:10px}
}