/* benvenutogioco.com — foglio di stile unico
   Struttura: @layer reset, base, layout, components
   Colori: oklch() con fallback esadecimale */

@layer reset, base, layout, components;

/* ------------------------------------------------------------------ reset */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }

  :where(html) {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-block-start: 6.5rem;
  }

  :where(body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul) { margin: 0; }
  :where(ol, ul)[class] { padding: 0; list-style: none; }
  :where(svg, img) { display: block; max-inline-size: 100%; }
  :where(button, input, textarea, select) { font: inherit; color: inherit; }
  :where(table) { border-collapse: collapse; inline-size: 100%; }
  :where(a) { color: inherit; }
  :where([hidden]) { display: none !important; }

  @media (prefers-reduced-motion: reduce) {
    :where(html) { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
    }
  }
}

/* ------------------------------------------------------------------- base */
@layer base {
  :root {
    --peach: #ffe8d6;
    --cream: #fffaf5;
    --coral: #e76f51;
    --ember: #c44a2a;
    --teal: #2a9d8f;
    --pine: #1f7a6f;
    --plum: #3d2c3e;
    --mauve: #6b566d;
    --sand: #f6d3b8;
    --blush: #f4a58d;
    --mint: #d5efe9;
    --sun: #f4c95d;
    --white: #fff;

    --r: 24px;
    --r-s: 16px;
    --lift: 0 10px 0 -4px var(--sand), 0 26px 44px -26px rgb(61 44 62 / .28);
    --head: "Fraunces", "Iowan Old Style", Georgia, serif;
    --body: "Nunito", "Segoe UI", system-ui, sans-serif;
    --blob-a: 58% 42% 63% 37% / 45% 55% 45% 55%;
    --blob-b: 42% 58% 38% 62% / 56% 44% 56% 44%;
  }

  @supports (color: oklch(50% .1 180)) {
    :root {
      --peach: oklch(94.5% .035 60.4);
      --cream: oklch(98.8% .009 67.7);
      --coral: oklch(67.8% .156 35.2);
      --ember: oklch(57% .163 35.5);
      --teal: oklch(63% .101 183);
      --pine: oklch(52.5% .084 183.1);
      --plum: oklch(32% .039 324.6);
      --mauve: oklch(48.3% .045 323.4);
      --sand: oklch(89% .053 59.7);
      --blush: oklch(79.3% .1 37.6);
      --mint: oklch(93.1% .028 180.2);
      --sun: oklch(85.3% .134 87.5);
    }
  }

  body {
    font-family: var(--body);
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--plum);
    background: var(--cream);
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
  }

  :is(h1, h2, h3, h4) {
    font-family: var(--head);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.015em;
    text-wrap: balance;
  }

  h1 { font-size: clamp(2.05rem, 4.6vw + 1rem, 3.7rem); }
  h2 { font-size: clamp(1.6rem, 2.2vw + 1.05rem, 2.45rem); }
  h3 { font-size: clamp(1.2rem, .6vw + 1.05rem, 1.4rem); line-height: 1.2; }
  h4 { font-size: 1.05rem; }

  a {
    text-decoration-thickness: 2px;
    text-underline-offset: .18em;
    text-decoration-color: var(--coral);
    transition: color .15s, text-decoration-color .15s;

    &:hover { color: var(--ember); text-decoration-color: currentColor; }
  }

  :focus-visible {
    outline: 3px solid var(--pine);
    outline-offset: 3px;
    border-radius: 6px;
  }

  ::selection { background: var(--sun); color: var(--plum); }

  strong, b { font-weight: 800; }
  small { font-size: .875rem; }
}

/* ----------------------------------------------------------------- layout */
@layer layout {
  .wrap {
    inline-size: min(100% - 2rem, 70rem);
    margin-inline: auto;
  }

  main > section { padding-block: clamp(2.5rem, 5.5vw, 4.75rem); }

  /* blocco pesca arrotondato */
  .band {
    background: var(--peach);
    margin-inline: clamp(.5rem, 1.5vw, 1.25rem);
    border-radius: clamp(1.75rem, 4vw, 3.25rem);
  }

  .head {
    max-inline-size: 46rem;
    margin-block-end: clamp(1.5rem, 3vw, 2.5rem);

    & > * + * { margin-block-start: .85rem; }
    & p:not(.eyebrow) { color: var(--mauve); font-size: 1.1rem; }
  }

  .split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;

    & > * { min-inline-size: 0; }

    @media (min-width: 62rem) {
      grid-template-columns: 17rem minmax(0, 1fr);
      align-items: start;
      gap: 3rem;
    }
  }

  .cards {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr));
  }

  .duo {
    display: grid;
    gap: 1.25rem;

    @media (min-width: 46rem) { grid-template-columns: 1fr 1fr; }
  }
}

/* ------------------------------------------------------------- components */
@layer components {

  /* --- skip link --- */
  .skip {
    position: absolute;
    inset-block-start: -6rem;
    inset-inline-start: 1rem;
    z-index: 100;
    background: var(--plum);
    color: var(--cream);
    padding: .7rem 1.1rem;
    border-radius: 999px;
    font-weight: 800;

    &:focus { inset-block-start: 1rem; color: var(--cream); }
  }

  /* --- header flottante --- */
  :is(.pill, .sheet) ul { padding: 0; list-style: none; }

  .top {
    position: sticky;
    inset-block-start: .75rem;
    z-index: 50;
    margin-block-start: .75rem;
    padding-inline: .75rem;
  }

  .pill {
    display: flex;
    align-items: center;
    gap: .75rem;
    max-inline-size: 70rem;
    min-block-size: 3.75rem;
    margin-inline: auto;
    padding-block: .5rem;
    padding-inline: 1.15rem .5rem;
    background: rgb(255 255 255 / .94);
    border: 2px solid var(--white);
    border-radius: 999px;
    box-shadow: 0 2px 0 var(--sand), 0 18px 34px -18px rgb(61 44 62 / .4);
    backdrop-filter: blur(10px);

    & nav {
      display: none;
      margin-inline: auto;

      & ul { display: flex; gap: .15rem; }

      & a {
        display: block;
        padding: .45rem .62rem;
        border-radius: 999px;
        font-weight: 700;
        font-size: .92rem;
        white-space: nowrap;
        text-decoration: none;

        &:hover { background: var(--peach); color: var(--plum); }
        &[aria-current] { background: var(--peach); box-shadow: inset 0 -2px 0 var(--coral); }
      }
    }

    & > .btn { display: none; }

    @media (min-width: 72rem) {
      & nav { display: block; }
      & > .btn { display: inline-flex; }
      & > .menu { display: none; }
    }
  }

  .mark {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--head);
    font-weight: 800;
    font-size: 1.22rem;
    letter-spacing: -.02em;
    text-decoration: none;
    color: var(--plum);
    margin-inline-end: auto;

    & svg { inline-size: 2.1rem; block-size: 2.1rem; flex: none; }
    & b { color: var(--ember); font-weight: 800; }
    &:hover { color: var(--plum); }

    @media (min-width: 72rem) { margin-inline-end: 0; }
  }

  .menu {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem 1.05rem;
    border: 0;
    border-radius: 999px;
    background: var(--plum);
    color: var(--cream);
    font-weight: 800;
    cursor: pointer;

    &::before {
      content: "";
      inline-size: 1rem;
      block-size: .7rem;
      border-block: 2px solid currentColor;
      transition: block-size .2s;
    }

    &[aria-expanded="true"]::before { block-size: .15rem; }
  }

  .sheet {
    max-inline-size: 70rem;
    margin-block-start: .6rem;
    margin-inline: auto;
    padding: .85rem;
    background: var(--white);
    border-radius: var(--r);
    box-shadow: 0 2px 0 var(--sand), 0 26px 44px -18px rgb(61 44 62 / .45);

    & ul { display: grid; gap: .2rem; }

    & a:not(.btn) {
      display: block;
      padding: .75rem 1rem;
      border-radius: var(--r-s);
      font-weight: 700;
      text-decoration: none;

      &:hover, &[aria-current] { background: var(--peach); color: var(--plum); }
    }

    & .btn { inline-size: 100%; margin-block-start: .6rem; }

    @media (min-width: 72rem) { display: none; }
  }

  /* --- bottoni --- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .85rem 1.6rem;
    border: 0;
    border-radius: 999px;
    background: var(--ember);
    color: var(--white);
    font-weight: 800;
    font-size: 1.02rem;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 4px 0 #8f3119;
    transition: translate .15s, box-shadow .15s, background-color .15s;

    &:hover { color: var(--white); translate: 0 -2px; box-shadow: 0 6px 0 #8f3119; }
    &:active { translate: 0 2px; box-shadow: 0 2px 0 #8f3119; }

    & svg { inline-size: 1.25rem; block-size: 1.25rem; flex: none; }
    &.small { padding: .6rem 1.1rem; font-size: .93rem; box-shadow: 0 3px 0 #8f3119; }

    &.green {
      background: var(--pine);
      box-shadow: 0 4px 0 #14564e;

      &:hover { box-shadow: 0 6px 0 #14564e; }
    }

    &.ghost {
      background: transparent;
      color: var(--plum);
      box-shadow: inset 0 0 0 2px var(--plum);

      &:hover { background: var(--plum); color: var(--cream); }
    }
  }

  .more {
    font-weight: 800;

    &::after { content: " →"; }
  }

  /* --- hero --- */
  .hero {
    position: relative;
    overflow: clip;
    background: var(--peach);
    padding-block: 7.25rem 0;
    margin-block-start: -4.5rem;

    & > .wrap {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 1.5rem;
      padding-block-end: clamp(1.5rem, 4vw, 3rem);
    }

    & h1 em { font-style: italic; color: var(--ember); }

    & figure {
      max-inline-size: 15rem;
      margin-inline: auto;
    }

    @media (min-width: 56rem) {
      & > .wrap { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); align-items: center; gap: 3rem; }
      & figure { max-inline-size: 24rem; inline-size: 100%; }
    }

    /* variante per le pagine interne */
    &.inner {
      & h1 { font-size: clamp(1.9rem, 3.4vw + 1rem, 3rem); }
      & figure { display: none; }

      @media (min-width: 56rem) {
        & > .wrap { grid-template-columns: minmax(0, 1fr) 13rem; }
        & figure { display: block; }
      }
    }
  }

  .blob {
    position: absolute;
    z-index: 0;
    inline-size: clamp(14rem, 34vw, 30rem);
    aspect-ratio: 1;
    border-radius: var(--blob-a);
    background: var(--blush);
    opacity: .38;
    inset-block-start: -6rem;
    inset-inline-end: -7rem;
    pointer-events: none;

    & + & {
      inline-size: clamp(9rem, 20vw, 17rem);
      border-radius: var(--blob-b);
      background: var(--teal);
      opacity: .16;
      inset-block-start: auto;
      inset-block-end: 1rem;
      inset-inline: -4rem auto;
    }
  }

  .wave {
    position: relative;
    z-index: 1;
    inline-size: 100%;
    block-size: clamp(1.75rem, 5vw, 4.5rem);
    fill: var(--cream);
  }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 800;
    font-size: .82rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--pine);

    &::before {
      content: "";
      inline-size: 1.4rem;
      block-size: .55rem;
      background: radial-gradient(circle at 25% 100%, transparent 42%, currentColor 43% 62%, transparent 63%) 0 0 / .7rem .55rem repeat-x;
      transform: scaleY(-1);
    }
  }

  .lead {
    font-size: clamp(1.1rem, .6vw + 1rem, 1.28rem);
    line-height: 1.6;
    max-inline-size: 40rem;
  }

  .text {
    display: grid;
    gap: 1.1rem;
    align-content: start;
  }

  .stamp {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.1rem;
    font-size: .93rem;
    color: var(--mauve);

    & span { display: inline-flex; align-items: center; gap: .4rem; }
    & span::before { content: ""; inline-size: .5rem; aspect-ratio: 1; border-radius: 50%; background: var(--coral); }
    & span:nth-child(even)::before { background: var(--teal); }
  }

  .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .9rem 1.4rem;
  }

  /* --- avvisi: affiliazione, 18+, licenze --- */
  .note {
    display: grid;
    gap: .5rem;
    padding: 1rem 1.15rem;
    background: rgb(255 255 255 / .75);
    border: 2px dashed var(--blush);
    border-radius: var(--r-s);
    font-size: .9rem;
    line-height: 1.5;
    color: var(--plum);

    & p { display: flex; gap: .6rem; align-items: baseline; }

    & b:first-child {
      flex: none;
      min-inline-size: 3rem;
      padding: .05rem .45rem;
      border-radius: 999px;
      background: var(--plum);
      color: var(--cream);
      font-size: .74rem;
      letter-spacing: .04em;
      text-align: center;
    }
  }

  /* --- briciole --- */
  .crumbs {
    font-size: .9rem;
    font-weight: 700;

    & ol { display: flex; flex-wrap: wrap; gap: .15rem .5rem; padding: 0; list-style: none; }
    & li + li::before { content: "›"; margin-inline-end: .5rem; color: var(--ember); }
    & [aria-current] { color: var(--mauve); font-weight: 600; }
  }

  /* --- illustrazioni --- */
  .art {
    inline-size: 100%;
    block-size: auto;

    & :is(path, circle, rect, ellipse) {
      stroke: var(--plum);
      stroke-width: 4;
      stroke-linecap: round;
      stroke-linejoin: round;
      fill: none;
    }

    & .c { fill: var(--coral); }
    & .t { fill: var(--teal); }
    & .w { fill: var(--cream); }
    & .s { fill: var(--sun); }
    & .b { fill: var(--blush); }
    & .m { fill: var(--mint); }
    & .g { fill: var(--sand); stroke: none; }
    & .k { fill: var(--plum); stroke: none; }
  }

  /* --- toplist: gift card a zig-zag --- */
  .gifts {
    display: grid;
    gap: 2.25rem;

    & > li { container: gift / inline-size; }

    @media (min-width: 64rem) {
      &:not(.slim) > li:nth-child(odd) { margin-inline-end: 5rem; }
      &:not(.slim) > li:nth-child(even) { margin-inline-start: 5rem; }
    }
  }

  .gift {
    position: relative;
    display: grid;
    gap: 1.1rem;
    padding: 1.5rem 1.15rem 1.35rem;
    background: var(--white);
    border: 2px solid var(--sand);
    border-radius: var(--r);
    box-shadow: var(--lift);

    & figure {
      display: grid;
      place-items: center;
      inline-size: 8.5rem;
      aspect-ratio: 1;
      margin-inline: auto;
      padding: .9rem;
      background: var(--peach);
      border-radius: var(--blob-a);
    }

    & > div { display: grid; gap: .9rem; min-inline-size: 0; }

    & header {
      display: flex;
      align-items: center;
      gap: .85rem;

      & div { display: grid; gap: .15rem; }
      & small { color: var(--mauve); }
    }

    & h3 { font-size: 1.2rem; }

    & footer {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: .8rem 1.3rem;
      margin-block-start: .25rem;
    }

    @container gift (min-width: 40rem) {
      grid-template-columns: 13.5rem minmax(0, 1fr);
      align-items: center;
      gap: 2rem;
      padding: 2rem;

      & figure { inline-size: 100%; padding: 1.25rem; }
    }
  }

  /* alternanza illustrazione sinistra / destra */
  .gifts:not(.slim) > li:nth-child(even) {
    & figure { background: var(--mint); border-radius: var(--blob-b); }
    & .ribbon { background: var(--pine); }

    @container gift (min-width: 40rem) {
      & .gift { grid-template-columns: minmax(0, 1fr) 13.5rem; }
      & figure { order: 2; }
      & .ribbon { inset-inline: auto 1.75rem; }
    }
  }

  /* variante compatta senza illustrazione */
  .slim {
    gap: 1.5rem;

    & .gift { padding-block-start: 1.35rem; }
    & figure { display: none; }
    & .ribbon { inset-inline: auto 1.25rem; }
    & header { padding-inline-end: 3.5rem; }

    @container gift (min-width: 40rem) {
      & .gift { grid-template-columns: 1fr; padding: 1.75rem 2rem; }
      & .gift > div { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; align-items: start; }
      & .incl { grid-column: 2; grid-row: 1 / span 2; }
      & :is(.terms, footer) { grid-column: 1 / -1; }
    }
  }

  .ribbon {
    position: absolute;
    inset-block-start: -8px;
    inset-inline-start: 1.25rem;
    z-index: 2;
    display: grid;
    place-items: start center;
    inline-size: 2.9rem;
    block-size: 4rem;
    padding-block-start: .6rem;
    background: var(--ember);
    color: var(--white);
    font-family: var(--head);
    font-weight: 800;
    font-size: 1.35rem;
    line-height: 1;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);

    & small { display: block; font-family: var(--body); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; text-align: center; }
  }

  .logo {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 3.6rem;
    aspect-ratio: 1;
    border-radius: 34% 66% 61% 39% / 44% 39% 61% 56%;
    background: var(--plum);
    color: var(--sun);
    font-family: var(--head);
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: -.02em;

    &.big { inline-size: 5rem; font-size: 1.6rem; }
  }

  .bonus {
    font-family: var(--head);
    font-weight: 700;
    font-size: clamp(1.55rem, 1.2vw + 1.25rem, 2.15rem);
    line-height: 1.1;
    letter-spacing: -.02em;

    & small { display: block; margin-block-end: .3rem; font-family: var(--body); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mauve); }
    & em { display: block; font-size: .62em; font-style: italic; color: var(--pine); margin-block-start: .2rem; }
  }

  .incl {
    display: grid;
    gap: .45rem;

    & li {
      display: grid;
      grid-template-columns: 1.4rem 1fr;
      gap: .6rem;
      align-items: start;
      line-height: 1.45;

      &::before {
        content: "";
        inline-size: 1.4rem;
        aspect-ratio: 1;
        margin-block-start: .1rem;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%231f7a6f'/%3E%3Cpath d='M6.5 12.5l3.6 3.6 7.4-8' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
      }
    }
  }

  .terms {
    padding: .6rem .9rem;
    background: var(--cream);
    border-radius: 12px;
    font-size: .86rem;
    line-height: 1.45;
    color: var(--mauve);
  }

  /* --- cuori (valutazione) --- */
  .hearts {
    --v: 5;
    display: inline-block;
    inline-size: 6.25rem;
    block-size: 1.25rem;
    vertical-align: middle;
    background: linear-gradient(90deg, var(--coral) calc(var(--v) / 5 * 100%), var(--sand) 0);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.3C.9 8.2 2.9 4.5 6.6 4.5c2 0 3.6 1 5.4 3 1.8-2 3.4-3 5.4-3 3.7 0 5.7 3.7 4.2 7.2C19.5 16.400 12 21 12 21z'/%3E%3C/svg%3E") 0 0 / 1.25rem 1.25rem repeat-x;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.3C.9 8.2 2.9 4.5 6.6 4.5c2 0 3.6 1 5.4 3 1.8-2 3.4-3 5.4-3 3.7 0 5.7 3.7 4.2 7.2C19.5 16.400 12 21 12 21z'/%3E%3C/svg%3E") 0 0 / 1.25rem 1.25rem repeat-x;
  }

  /* --- tabelle --- */
  .scroll {
    overflow-x: auto;
    background: var(--white);
    border: 2px solid var(--sand);
    border-radius: var(--r);
    box-shadow: var(--lift);

    & table { min-inline-size: 35rem; font-size: .97rem; }

    & caption {
      caption-side: bottom;
      padding: .8rem 1.1rem;
      font-size: .85rem;
      color: var(--mauve);
      text-align: start;
      border-block-start: 2px dashed var(--sand);
    }

    & :is(th, td) { padding: .85rem 1.1rem; text-align: start; vertical-align: middle; }

    & thead th {
      background: var(--plum);
      color: var(--cream);
      font-size: .8rem;
      font-weight: 800;
      letter-spacing: .06em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    &:not(.facts) :is(th, td) { white-space: nowrap; }
    & tbody tr + tr :is(th, td) { border-block-start: 1px solid var(--peach); }
    & tbody tr:nth-child(even) { background: var(--cream); }
    & tbody th { font-family: var(--head); font-size: 1.05rem; }
    & td a { font-weight: 800; }

    /* tabella chiave/valore senza intestazione */
    &.facts table { min-inline-size: 0; }
    &.facts tbody th { inline-size: 42%; font-family: var(--body); font-size: .95rem; color: var(--mauve); font-weight: 700; }
  }

  /* tabella "calcolatore" illustrativa */
  .calc {
    & tbody td {
      font-family: var(--head);
      font-weight: 700;
      font-size: 1.2rem;
      white-space: nowrap;
    }

    & tbody td + td::before { content: "→"; margin-inline-end: .7rem; color: var(--coral); font-family: var(--body); }
    & tbody td:last-child { color: var(--ember); }
    & tbody td:nth-child(2) { color: var(--pine); }
  }

  .chips {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;

    & li {
      padding: .25rem .8rem;
      border-radius: 999px;
      background: var(--mint);
      font-size: .86rem;
      font-weight: 700;
      white-space: nowrap;
    }

    & li:nth-child(3n + 2) { background: var(--peach); }
    & li:nth-child(3n) { background: #fbeec4; }
  }

  /* --- riquadri consiglio --- */
  .tip {
    position: relative;
    display: grid;
    gap: .35rem;
    padding: 1.15rem 1.25rem 1.15rem 4.4rem;
    background: var(--mint);
    border-radius: var(--r);
    border-end-start-radius: 6px;

    &::before {
      content: "!";
      position: absolute;
      inset-block-start: 1rem;
      inset-inline-start: 1.05rem;
      display: grid;
      place-items: center;
      inline-size: 2.5rem;
      aspect-ratio: 1;
      border-radius: var(--blob-a);
      background: var(--pine);
      color: var(--white);
      font-family: var(--head);
      font-weight: 800;
      font-size: 1.35rem;
      rotate: -6deg;
    }

    & strong:first-child { font-family: var(--head); font-size: 1.1rem; }

    &.warn {
      background: #fde3da;
      &::before { background: var(--ember); border-radius: var(--blob-b); rotate: 5deg; }
    }

    &.sun {
      background: #fbeec4;
      &::before { content: "★"; background: var(--plum); color: var(--sun); font-size: 1.1rem; }
    }
  }

  /* --- passi come pietre da guado --- */
  .stones {
    counter-reset: stone;
    display: grid;
    gap: 1.6rem;

    & > li {
      counter-increment: stone;
      display: grid;
      grid-template-columns: 4.4rem minmax(0, 1fr);
      gap: 1rem;
      align-items: start;

      &::before {
        content: counter(stone);
        display: grid;
        place-items: center;
        inline-size: 4.4rem;
        aspect-ratio: 1;
        border-radius: var(--blob-a);
        background: var(--pine);
        color: var(--white);
        font-family: var(--head);
        font-weight: 800;
        font-size: 2rem;
        box-shadow: 0 7px 0 #14564e;
        rotate: -5deg;
      }

      &:nth-child(even) {
        margin-inline-start: 1.25rem;

        &::before { border-radius: var(--blob-b); background: var(--ember); box-shadow: 0 7px 0 #8f3119; rotate: 6deg; }
      }

      & div { display: grid; gap: .3rem; }
    }

    @media (min-width: 58rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 1.75rem;
      padding-block-end: 3rem;

      & > li {
        grid-template-columns: 1fr;
        position: relative;

        &::before { inline-size: 5.5rem; font-size: 2.5rem; }
        &:nth-child(even) { margin-inline-start: 0; translate: 0 3rem; }

        /* tratteggio tra una pietra e l'altra */
        &:not(:last-child)::after {
          content: "";
          position: absolute;
          inset-block-start: 2.75rem;
          inset-inline: 6.5rem .25rem;
          border-block-start: 3px dashed var(--blush);
          rotate: 9deg;
        }

        &:nth-child(even):not(:last-child)::after { rotate: -9deg; }
      }
    }
  }

  /* --- schede generiche --- */
  ol.cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }

  .card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-inline-size: 0;
    gap: .6rem;
    align-content: start;
    padding: 1.5rem;
    background: var(--white);
    border: 2px solid var(--sand);
    border-radius: var(--r);
    transition: translate .2s, box-shadow .2s;

    &:hover { translate: 0 -4px; box-shadow: var(--lift); }

    & > svg { inline-size: 4.5rem; }
    & p { color: var(--mauve); }
    & header { flex-wrap: nowrap; gap: .85rem; & div { display: grid; gap: .15rem; } & small { color: var(--mauve); } }
    & h2 { font-size: 1.3rem; }
    & .more { margin-block-start: .25rem; }
  }

  /* --- pro e contro --- */
  :is(.pro, .con) {
    padding: 1.5rem;
    border-radius: var(--r);
    background: var(--mint);

    & h3 { margin-block-end: .9rem; }
    & ul { display: grid; gap: .65rem; padding: 0; list-style: none; }

    & li {
      display: grid;
      grid-template-columns: 1.5rem 1fr;
      gap: .65rem;
      line-height: 1.45;

      &::before {
        content: "+";
        display: grid;
        place-items: center;
        inline-size: 1.5rem;
        aspect-ratio: 1;
        border-radius: 50%;
        background: var(--pine);
        color: var(--white);
        font-weight: 800;
        line-height: 1;
      }
    }
  }

  .con {
    background: #fde3da;

    & li::before { content: "−"; background: var(--ember); }
  }

  /* --- testo lungo --- */
  .prose {
    max-inline-size: 46rem;

    & > * + * { margin-block-start: 1.15rem; }
    & > :is(h2, h3) { margin-block-start: 2.6rem; }
    & > h3 { margin-block-start: 1.9rem; }
    & > :is(h2, h3) + * { margin-block-start: .8rem; }
    & > :first-child { margin-block-start: 0; }

    & > :is(ul, ol):not([class]) {
      padding-inline-start: 1.4rem;

      & li + li { margin-block-start: .4rem; }
      & li::marker { color: var(--ember); font-weight: 800; }
    }

    & > :is(.scroll, .tip, .promo, .duo, .stones) { margin-block: 1.75rem; }
  }

  /* foglio bianco per pagine legali e articoli */
  .paper {
    padding: clamp(1.25rem, 4vw, 3rem);
    background: var(--white);
    border: 2px solid var(--sand);
    border-radius: var(--r);
    box-shadow: var(--lift);
    min-inline-size: 0;
  }

  /* --- indice --- */
  .toc {
    padding: 1.35rem;
    background: var(--peach);
    border-radius: var(--r);

    & h2 { font-size: 1.15rem; margin-block-end: .7rem; }

    & ol {
      counter-reset: toc;
      display: grid;
      gap: .1rem;
      padding: 0;
      list-style: none;
    }

    & li { counter-increment: toc; }
    & p a { overflow-wrap: anywhere; }

    & ol a {
      display: grid;
      grid-template-columns: 1.5rem 1fr;
      gap: .4rem;
      padding: .4rem .5rem;
      border-radius: 12px;
      font-weight: 700;
      font-size: .95rem;
      line-height: 1.35;
      text-decoration: none;

      &::before { content: counter(toc); font-family: var(--head); color: var(--ember); }
      &:hover { background: var(--white); color: var(--plum); }
    }

    @media (min-width: 62rem) { position: sticky; inset-block-start: 6rem; }
  }

  /* --- invito alla classifica --- */
  .promo {
    display: grid;
    gap: 1rem;
    align-items: center;
    padding: 1.5rem;
    background: var(--plum);
    color: var(--cream);
    border-radius: var(--r);

    & h3 { color: var(--sun); }
    & svg { inline-size: 6rem; }
    & div { display: grid; gap: .4rem; }

    @media (min-width: 40rem) { grid-template-columns: auto 1fr auto; gap: 1.5rem; }
  }

  /* --- FAQ --- */
  .faq {
    display: grid;
    gap: .85rem;
    max-inline-size: 50rem;

    & details {
      background: var(--white);
      border: 2px solid var(--sand);
      border-radius: var(--r);
      transition: border-color .2s;

      &[open] { border-color: var(--teal); }
    }

    & summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 1.1rem 1.3rem;
      font-family: var(--head);
      font-weight: 700;
      font-size: 1.14rem;
      line-height: 1.3;
      cursor: pointer;
      list-style: none;
      border-radius: var(--r);

      &::-webkit-details-marker { display: none; }

      &::after {
        content: "";
        flex: none;
        inline-size: 2rem;
        aspect-ratio: 1;
        border-radius: 50%;
        background:
          linear-gradient(var(--white), var(--white)) center / .9rem 3px no-repeat,
          linear-gradient(var(--white), var(--white)) center / 3px .9rem no-repeat,
          var(--pine);
        transition: rotate .25s, background-color .25s;
      }
    }

    & details[open] summary::after { rotate: 135deg; background-color: var(--ember); }
    & details > :not(summary) { padding: 0 1.3rem 1.25rem; color: var(--mauve); max-inline-size: 44rem; }
    & h3 { font: inherit; display: inline; letter-spacing: 0; }
  }

  /* --- autore --- */
  .author {
    display: grid;
    gap: 1.25rem;
    padding: clamp(1.25rem, 3vw, 2rem);
    background: var(--white);
    border: 2px solid var(--sand);
    border-radius: var(--r);
    box-shadow: var(--lift);
    max-inline-size: 50rem;

    & > span {
      display: grid;
      place-items: center;
      inline-size: 5.5rem;
      aspect-ratio: 1;
      border-radius: var(--blob-b);
      background: var(--teal);
      color: var(--white);
      font-family: var(--head);
      font-weight: 800;
      font-size: 1.7rem;
      box-shadow: 8px 8px 0 var(--sun);
    }

    & div { display: grid; gap: .45rem; }
    & h2, & h3 { font-size: 1.4rem; }
    & small { color: var(--pine); font-weight: 800; letter-spacing: .05em; text-transform: uppercase; font-size: .78rem; }

    @media (min-width: 40rem) { grid-template-columns: auto 1fr; align-items: start; gap: 1.75rem; }
  }

  /* --- riquadro punteggio (recensione) --- */
  .score {
    display: grid;
    gap: 1.5rem;
    padding: clamp(1.25rem, 3vw, 2.25rem);
    background: var(--white);
    border: 2px solid var(--sand);
    border-radius: var(--r);
    box-shadow: var(--lift);

    & > div:first-child {
      display: grid;
      justify-items: center;
      gap: .5rem;
      text-align: center;
    }

    & output, & > div:first-child > strong {
      display: grid;
      place-items: center;
      inline-size: 8.5rem;
      aspect-ratio: 1;
      border-radius: var(--blob-a);
      background: var(--ember);
      color: var(--white);
      font-family: var(--head);
      font-weight: 800;
      font-size: 3.1rem;
      line-height: 1;
      box-shadow: 10px 10px 0 var(--sun);
      margin-block-end: .6rem;

      & small { font-size: .95rem; font-family: var(--body); opacity: .9; }
    }

    & dl { display: grid; gap: .7rem; align-content: center; }

    & dl div {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: .15rem .75rem;
      font-weight: 700;
      font-size: .95rem;
    }

    & dd { font-family: var(--head); }

    & dl span {
      grid-column: 1 / -1;
      block-size: .6rem;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--teal) calc(var(--v) / 5 * 100%), var(--peach) 0);
    }

    & > div:nth-child(2):not(:last-child) { display: grid; gap: 1.25rem; min-inline-size: 0; }
    & > div:last-child { display: grid; gap: .8rem; align-content: center; justify-items: start; }
    & .bonus { font-size: 1.6rem; }

    @media (min-width: 58rem) {
      grid-template-columns: auto minmax(0, 1fr) minmax(0, 17rem);
      gap: 2.5rem;
      align-items: center;
    }
  }

  /* --- modulo contatti --- */
  .form {
    display: grid;
    gap: 1.1rem;

    & label { display: grid; gap: .35rem; font-weight: 800; font-size: .95rem; }

    & :is(input:not([type="checkbox"]), textarea, select) {
      inline-size: 100%;
      padding: .8rem 1rem;
      background: var(--cream);
      border: 2px solid var(--sand);
      border-radius: var(--r-s);
      font-weight: 600;
      transition: border-color .15s, background-color .15s;

      &:hover { border-color: var(--blush); }
      &:focus-visible { outline: 0; border-color: var(--pine); background: var(--white); box-shadow: 0 0 0 4px var(--mint); }
    }

    & textarea { min-block-size: 9rem; resize: vertical; }
    & .btn { justify-self: start; }
  }

  /* --- lista di autovalutazione / consenso --- */
  .check {
    display: grid;
    gap: .6rem;

    & label {
      display: grid;
      grid-template-columns: 1.5rem 1fr;
      gap: .8rem;
      align-items: start;
      padding: .9rem 1.1rem;
      background: var(--white);
      border: 2px solid var(--sand);
      border-radius: var(--r-s);
      font-weight: 600;
      line-height: 1.45;
      cursor: pointer;

      &:has(:checked) { background: var(--mint); border-color: var(--teal); }
    }

    & input { inline-size: 1.35rem; block-size: 1.35rem; margin: .1rem 0 0; accent-color: var(--pine); }
  }

  /* --- risorse di aiuto --- */
  .help {
    display: grid;
    gap: .5rem;
    align-content: start;
    padding: 1.5rem;
    background: var(--plum);
    color: var(--cream);
    border-radius: var(--r);

    & h3 { color: var(--sun); }
    & a { color: var(--cream); }

    & strong {
      font-family: var(--head);
      font-size: clamp(1.7rem, 3vw + 1rem, 2.3rem);
      line-height: 1.1;
      white-space: nowrap;
    }

    & :focus-visible { outline-color: var(--sun); }
  }

  .age {
    display: inline-grid;
    place-items: center;
    flex: none;
    inline-size: 3rem;
    aspect-ratio: 1;
    border: 3px solid currentColor;
    border-radius: 50%;
    font-family: var(--head);
    font-weight: 800;
    font-size: 1.02rem;
  }

  /* --- metriche in evidenza --- */
  .stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
  }

  .stat {
    display: grid;
    gap: .2rem;
    padding: .85rem 1rem;
    border-radius: var(--r-s);
    background: var(--peach);

    & small { font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--mauve); line-height: 1.3; }
    & b { font-family: var(--head); font-size: clamp(1.35rem, 1vw + 1.1rem, 1.8rem); line-height: 1.1; color: var(--ember); white-space: nowrap; }

    & + & { background: var(--mint); & b { color: var(--pine); } }
  }

  /* --- codici bonus: coupon --- */
  .coupons {
    display: grid;
    gap: 1.75rem;

    & > li { container: coupon / inline-size; }
  }

  .coupon {
    position: relative;
    display: grid;
    background: var(--white);
    border: 2px solid var(--sand);
    border-radius: var(--r);
    box-shadow: var(--lift);

    & > div { display: grid; gap: .9rem; padding: 1.35rem 1.15rem; min-inline-size: 0; }

    & header {
      display: flex;
      align-items: center;
      gap: .85rem;
      padding-inline-end: 3.25rem;

      & div { display: grid; gap: .15rem; }
      & small { color: var(--mauve); }
    }

    & h3 { font-size: 1.2rem; }
    & .ribbon { inset-inline: auto 1.25rem; }

    & aside {
      position: relative;
      display: grid;
      gap: .6rem;
      justify-items: center;
      align-content: center;
      padding: 1.35rem 1.15rem 1.5rem;
      background: var(--peach);
      border-block-start: 3px dashed var(--blush);
      border-radius: 0 0 22px 22px;
      text-align: center;

      & small { font-weight: 800; letter-spacing: .05em; text-transform: uppercase; font-size: .72rem; color: var(--mauve); }

      /* tacche del coupon */
      &::before, &::after {
        content: "";
        position: absolute;
        inset-block-start: -.8rem;
        inline-size: 1.5rem;
        aspect-ratio: 1;
        border-radius: 50%;
        background: var(--cream);
        box-shadow: inset 0 0 0 2px var(--sand);
      }

      &::before { inset-inline-start: -.8rem; clip-path: inset(0 0 0 50%); }
      &::after { inset-inline-end: -.8rem; clip-path: inset(0 50% 0 0); }
    }

    @container coupon (min-width: 42rem) {
      grid-template-columns: minmax(0, 1fr) 17rem;

      & > div { padding: 1.75rem 2rem; }
      & header { padding-inline-end: 0; }
      & .ribbon { inset-inline: auto 1.5rem; }

      & aside {
        padding-block-start: 4.25rem;
        border-block-start: 0;
        border-inline-start: 3px dashed var(--blush);
        border-radius: 0 22px 22px 0;

        &::before, &::after { display: none; }
      }
    }
  }

  code {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-weight: 700;
    font-size: .92em;
    letter-spacing: .04em;
  }

  .coupon code {
    padding: .55rem .9rem;
    background: var(--white);
    border: 2px dashed var(--plum);
    border-radius: 12px;
    font-size: 1.12rem;
    letter-spacing: .1em;
    user-select: all;
    max-inline-size: 100%;
    overflow-wrap: anywhere;
  }

  /* --- riquadro "come abbiamo testato" --- */
  .test {
    display: grid;
    gap: 1rem;
    padding: clamp(1.15rem, 3vw, 1.75rem);
    background: #fbeec4;
    border: 2px dashed var(--plum);
    border-radius: var(--r);

    & h2 { font-size: 1.35rem; }

    & dl {
      display: grid;
      gap: .5rem;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    }

    & dl div { padding: .7rem .9rem; background: rgb(255 255 255 / .75); border-radius: 12px; }
    & dt { font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--mauve); }
    & dd { font-weight: 700; font-size: .95rem; }
    & p { font-size: .95rem; }
  }

  .prose > .test { margin-block: 2.25rem; }
  .prose > .author { margin-block: 1.5rem; box-shadow: none; }

  /* --- fonti --- */
  .sources {
    max-inline-size: 50rem;
    margin-block-end: 2rem;
    padding: 1.35rem 1.5rem;
    background: var(--peach);
    border-radius: var(--r);

    & h2 { font-size: 1.25rem; margin-block-end: .6rem; }
    & ol { padding-inline-start: 1.3rem; font-size: .93rem; color: var(--mauve); }
    & li + li { margin-block-start: .3rem; }
    & li::marker { color: var(--ember); font-weight: 800; }
  }

  /* --- ritratto segnaposto (pagina autore) --- */
  .face {
    display: grid;
    place-items: center;
    inline-size: 7.5rem;
    aspect-ratio: 1;
    border-radius: var(--blob-b);
    background: var(--teal);
    color: var(--white);
    font-family: var(--head);
    font-weight: 800;
    font-size: 2.5rem;
    box-shadow: 10px 10px 0 var(--sun);
    margin-block: .5rem;
  }

  /* --- pagina 404 --- */
  .lost {
    display: grid;
    justify-items: center;
    gap: 1.25rem;
    text-align: center;
    padding-block-end: 2rem;

    & svg { inline-size: min(100%, 15rem); }
    & p { max-inline-size: 34rem; }
  }

  /* --- footer --- */
  .foot {
    margin-block-start: clamp(2rem, 5vw, 4rem);
    color: var(--cream);

    & > svg { inline-size: 100%; block-size: clamp(1.75rem, 5vw, 4.5rem); fill: var(--plum); margin-block-end: -1px; }

    & > div { background: var(--plum); padding-block: 2rem 2.5rem; }

    & .wrap { display: grid; gap: 2rem; }

    & nav {
      display: grid;
      gap: 2rem;

      @media (min-width: 46rem) { grid-template-columns: 1.5fr 1fr 1fr; }
    }

    & h2 { font-size: 1.05rem; color: var(--sun); margin-block-end: .7rem; letter-spacing: 0; }
    & ul { display: grid; gap: .4rem; padding: 0; list-style: none; }
    & a { color: var(--cream); text-decoration-color: transparent; &:hover { color: var(--sun); text-decoration-color: currentColor; } }
    & .mark { color: var(--cream); font-size: 1.4rem; margin-block-end: .7rem; & b { color: var(--blush); } }
    & p { font-size: .93rem; color: #e9dcea; max-inline-size: 60rem; }
    & :focus-visible { outline-color: var(--sun); }

    & aside {
      display: grid;
      gap: .9rem;
      padding: 1.25rem;
      border: 2px dashed rgb(255 255 255 / .3);
      border-radius: var(--r);

      & > div { display: flex; gap: 1rem; align-items: center; }
      & strong { color: var(--white); }
    }

    & small { display: block; color: #cdbcce; padding-block-start: 1.25rem; border-block-start: 1px solid rgb(255 255 255 / .15); }
  }
}

/* ---------- aggiunte del build ---------- */
@layer components {
  :root { --ease-out: cubic-bezier(.23, 1, .32, 1); }

  html { -webkit-tap-highlight-color: transparent; }
  :is(.btn, .chip-btn, .tendina-btn, .menu, summary) {
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
  }
  :is(.btn, .chip-btn) { transition: transform 140ms var(--ease-out), background-color 150ms ease, color 150ms ease; }
  :is(.btn, .chip-btn):active { transform: scale(.97); }
  .top { padding-top: env(safe-area-inset-top, 0px); }

  .vh { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .blocco + .blocco { padding-block-start: 0; }

  /* logo reale dentro il blob */
  .logo-img {
    background: var(--white);
    border: 2px solid var(--sand);
    overflow: hidden;
    & img { inline-size: 78%; block-size: auto; border-radius: 22%; }
  }
  .gift figure .logo-img { inline-size: 6rem; border-color: transparent; box-shadow: 0 8px 0 -3px var(--sand); }
  .score .logo-img.big { inline-size: 5.5rem; }

  /* tendina «Altri bonus» */
  .tendina { position: relative; }
  .tendina-btn {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .45rem .62rem; border: 0; border-radius: 999px;
    background: transparent; color: inherit; font-weight: 700; font-size: .92rem; line-height: inherit; white-space: nowrap; cursor: pointer;
    & span { inline-size: .45rem; aspect-ratio: 1; border: solid currentColor; border-width: 0 2px 2px 0; rotate: 45deg; translate: 0 -2px; transition: rotate 180ms var(--ease-out); }
    &[aria-expanded="true"] span { rotate: 225deg; translate: 0 2px; }
    &[data-attivo] { background: var(--peach); box-shadow: inset 0 -2px 0 var(--coral); }
  }
  .tendina-menu {
    position: absolute; inset-block-start: calc(100% + .5rem); inset-inline-start: 0; z-index: 30;
    display: grid; gap: .1rem; min-inline-size: 13rem; padding: .5rem;
    background: var(--white); border: 2px solid var(--sand); border-radius: var(--r-s);
    box-shadow: 0 18px 40px -22px rgb(61 44 62 / .45);
    transform-origin: top left;
    transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out);
    @starting-style { opacity: 0; transform: scale(.96) translateY(-4px); }
    & a { display: block; padding: .5rem .75rem; border-radius: 10px; text-decoration: none; }
    & a[aria-current] { background: var(--peach); font-weight: 800; }
  }
  @media (hover: hover) and (pointer: fine) {
    .tendina-btn:hover { background: var(--peach); }
    .tendina-menu a:hover { background: var(--mint); color: var(--plum); }
  }

  /* Bilancia del benvenuto */
  .bilancia {
    display: grid; gap: 1.25rem;
    padding: clamp(1.1rem, 3vw, 2rem);
    background: var(--white);
    border: 2px solid var(--sand);
    border-radius: var(--r);
    box-shadow: var(--lift);
  }
  .bil-bolli { margin: 0; }
  .bil-campi {
    display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    align-items: end;
  }
  .bil-grande { grid-column: 1 / -1; }
  .bil-campo {
    display: grid; gap: .35rem; font-weight: 700;
    & > span:first-child { font-size: .95rem; color: var(--mauve); }
    & select, & input {
      inline-size: 100%; min-block-size: 3rem; padding: .55rem .85rem;
      font-size: 16px; font-weight: 700; color: var(--plum);
      background: var(--cream); border: 2px solid var(--sand); border-radius: var(--r-s);
      transition: border-color 150ms ease, background-color 150ms ease;
    }
    & :is(select, input):focus-visible { outline: 3px solid var(--pine); outline-offset: 2px; border-color: var(--pine); background: var(--white); }
  }
  .bil-in {
    position: relative; display: block;
    & i { position: absolute; inset-inline-end: .9rem; inset-block-start: 50%; translate: 0 -50%; font-style: normal; color: var(--mauve); pointer-events: none; }
    & input { padding-inline-end: 2.4rem; }
  }
  .bil-grande .bil-in input { font-family: var(--head); font-size: clamp(1.6rem, 3vw + 1rem, 2.4rem); min-block-size: 4rem; }
  .bil-rapidi { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem; margin-block-start: -.35rem; }
  .chip-btn {
    padding: .45rem .95rem; border: 2px solid var(--sand); border-radius: 999px;
    background: var(--cream); color: var(--plum); font-weight: 800; cursor: pointer;
  }
  @media (hover: hover) and (pointer: fine) { .chip-btn:hover { background: var(--peach); border-color: var(--blush); } }
  .bil-esito { display: grid; gap: .9rem; }
  .bil-frase {
    padding: .9rem 1.1rem; border-radius: var(--r-s);
    background: var(--mint); font-weight: 700; line-height: 1.45;
  }
  .bilancia.bil-nuovo .bil-frase { animation: bil-pop 260ms var(--ease-out); }
  @keyframes bil-pop { from { opacity: .55; transform: translateY(3px); } }
  .bil-tabella { margin: 0; }
  .bil-tabella td { white-space: nowrap; }
  .bil-piu { color: var(--pine); font-weight: 800; }
  .bil-meno { color: var(--ember); font-weight: 800; }
  .bil-n { color: var(--mauve); font-style: italic; white-space: normal !important; }
  .bil-nota { font-size: .85rem; color: var(--mauve); }

  /* esiti nelle tabelle */
  .esito-no { color: var(--ember); font-weight: 700; }
  .esito-si { color: var(--pine); font-weight: 700; }
  .postilla { margin-block-start: .75rem; font-size: .9rem; color: var(--mauve); }
  .more.esterno::after { content: " ↗"; }
  .scroll td .more { white-space: nowrap; }
  .scroll + .prose { margin-block-start: 1.75rem; }

  /* coupon senza codice */
  .coupon code.senza { letter-spacing: .08em; opacity: .75; }

  /* ritratti */
  img.face { inline-size: 6rem; block-size: 6rem; border-radius: var(--blob-a); object-fit: cover; flex: none; }
  img.face.big { inline-size: 10rem; block-size: 10rem; }
  .author > img.face { align-self: start; }
  .chips-link a { text-decoration: none; }
  .team { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
  .persona {
    display: flex; gap: 1rem; align-items: flex-start; padding: 1.25rem;
    background: var(--white); border: 2px solid var(--sand); border-radius: var(--r);
    & h3 { margin-block-end: .25rem; }
    & p { margin: 0; }
    & small { color: var(--mauve); font-weight: 700; }
  }
}