/* FuffaCheck: sito. Sistema di design in DESIGN.md.
   Un solo carattere (Archivo, larghezza variabile), colori solo dove dicono qualcosa (i giudizi),
   un solo elemento audace: l'etichetta in raso nel primo schermo. Scritto partendo dal telefono. */

@font-face {
  font-family: 'Archivo';
  src: url('fonts/archivo-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  src: url('fonts/archivo-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --paper: #f6f6f3;
  --satin: #fcfcfa;
  --heather: #d9d8d4;
  --ink: #1d2330;
  --ink-2: #4e5666;
  --line: rgba(29, 35, 48, .12);
  --seam: rgba(29, 35, 48, .35);
  --photo: #ebe9e5;

  --top: #8f6a00;
  --good: #1d7a3e;
  --ok: #5d6b78;
  --meh: #b25000;
  --bad: #c4281c;
  --unknown: #8e8e93;

  --font: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  /* Il negozio inventato ha un carattere suo, diverso da quello del sito: come un negozio vero. */
  --store-font: 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --gutter: 24px;
  --band: 72px;
  --max: 1180px;

  --shadow-object: 0 1px 1px rgba(29, 35, 48, .06), 0 14px 28px -12px rgba(29, 35, 48, .28);
  --shadow-window: 0 0 0 1px rgba(29, 35, 48, .08), 0 40px 70px -40px rgba(29, 35, 48, .45);

  color-scheme: light;
}
@media (min-width: 760px) {
  :root { --gutter: 40px; --band: 96px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.55 var(--font);
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }

.wrap { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding-inline: var(--gutter); }

.skip {
  position: absolute; left: 12px; top: -48px; z-index: 10;
  background: var(--ink); color: var(--satin); padding: 10px 14px; border-radius: 6px; text-decoration: none;
}
.skip:focus { top: 12px; }

/* ---- Tipografia ---- */
h1, h2, h3 { font-weight: 700; text-wrap: balance; }
h1 {
  font-stretch: 62%;
  font-size: clamp(2.9rem, 1.6rem + 4.9vw, 5.4rem);
  line-height: .92;
  letter-spacing: -.012em;
}
h2 {
  font-stretch: 70%;
  font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.5rem);
  line-height: .98;
  letter-spacing: -.01em;
  max-width: 16ch;
}
h3 { font-stretch: 88%; font-size: 1.25rem; line-height: 1.2; }
p { max-width: 62ch; }
.split__text p, .lede { margin-top: 20px; }
.lede { font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); line-height: 1.5; max-width: 38ch; }
.note, .aside, figcaption { color: var(--ink-2); font-size: .875rem; line-height: 1.5; }

/* ---- Azioni ---- */
.btn {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px;
  background: var(--ink); color: var(--satin); border-radius: 6px;
  font-weight: 600; font-size: 1rem; text-decoration: none;
  transition: background-color .15s ease;
}
.btn:hover { background: #2c3446; }
.more { font-weight: 600; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.more:hover { text-decoration-thickness: 2px; }

/* ---- Testata ---- */
.top, .hero {
  background-color: var(--heather);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .11 0 0 0 0 .14 0 0 0 0 .19 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}
.top__in { display: flex; align-items: center; gap: 20px; min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-stretch: 75%; font-weight: 700; font-size: 1.2rem; letter-spacing: -.005em; }
.brand__ring { width: 24px; height: 24px; transform: rotate(-90deg); }
.brand__ring circle { fill: none; stroke-width: 3.5; stroke: rgba(29, 122, 62, .2); }
.brand__ring .arc { stroke: var(--good); stroke-linecap: round; stroke-dasharray: 56.55; stroke-dashoffset: 8.5; }
.top__nav { display: none; gap: 28px; margin-left: auto; font-size: .9375rem; }
.top__nav a { text-decoration: none; }
.top__nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.langs { display: flex; gap: 2px; margin-left: auto; font-size: .8125rem; font-weight: 600; }
.langs a { padding: 6px 7px; text-decoration: none; color: var(--ink-2); border-radius: 4px; }
.langs a:hover { color: var(--ink); }
.langs a[aria-current] { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
/* Sostieni il progetto: bordato, per non fare concorrenza al pulsante pieno del primo schermo.
   Sul telefono solo la tazzina (il testo resta per i lettori di schermo). */
.top__support { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 40px; padding: 0 10px; margin-left: auto;
  border: 1.5px solid var(--ink); border-radius: 6px; text-decoration: none; font-weight: 600; font-size: .9375rem; white-space: nowrap;
  transition: background-color .15s ease, color .15s ease; }
.top__support:hover { background: var(--ink); color: var(--satin); }
.top__support svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.top__support-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.top__support + .langs { margin-left: 8px; }
@media (min-width: 860px) {
  .top__nav { display: flex; }
  .top__support { margin-left: 24px; }
}
/* La scritta solo dove c'è posto accanto ai link (a 860px i link andrebbero a capo). */
@media (min-width: 1000px) {
  .top__support { padding: 0 14px 0 12px; }
  .top__support-label { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
}

/* ---- Primo schermo: fascia color melange, come l'interno di una felpa ---- */
.hero { position: relative; padding-top: 24px; background-position: 0 -68px; overflow-x: clip; } /* l'etichetta non deve mai far scorrere la pagina di lato */
.hero__grid { display: grid; gap: 48px; }
.hero__copy { padding-bottom: 8px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 32px; }
.hero .note { margin-top: 18px; }
/* La finestra scende oltre il bordo della fascia, verso la sezione successiva. */
.demo { position: relative; margin-bottom: -72px; z-index: 1; }
@media (min-width: 1000px) {
  .hero { padding-top: 48px; }
  .hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: 56px; }
  .hero__copy { padding-bottom: 88px; }
  .demo { margin-top: 10px; margin-bottom: -40px; }
}

/* ---- Finestra del browser e negozio inventato ---- */
.window {
  position: relative; z-index: 1;
  background: var(--satin); border-radius: 10px; overflow: hidden;
  box-shadow: var(--shadow-window);
  font-family: var(--store-font); font-stretch: 100%; color: #111;
}
.window__bar { display: flex; align-items: center; gap: 12px; height: 36px; padding: 0 12px; background: #ecebe8; border-bottom: 1px solid var(--line); }
.dots { display: flex; gap: 6px; }
.dots i { width: 10px; height: 10px; border-radius: 50%; background: #c9c7c2; }
.url { flex: 1; min-width: 0; height: 22px; padding: 0 10px; border-radius: 6px; background: #fff; color: #6b6b6b; font-size: 11px; line-height: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.store { padding: 0 16px 18px; }
.store__nav { display: flex; gap: 16px; align-items: baseline; padding: 12px 0; font-size: 11px; color: #555; border-bottom: 1px solid #eee; }
.store__nav b { color: #111; font-size: 13px; letter-spacing: .18em; margin-right: 6px; }
.store__search { margin-left: auto; }
.pdp { display: grid; gap: 16px; padding-top: 16px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.pdp--text { grid-template-columns: 1fr; }
.pdp__media { background: var(--photo); aspect-ratio: 4 / 5; display: grid; place-items: center; }
.garment { width: 74%; height: auto; }
.garment--trousers { --fabric: #3a3f47; }
.pdp__title { font-size: 14px; font-weight: 500; line-height: 1.3; }
.pdp__price { font-size: 13px; margin-top: 4px; }
.pdp__sizes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 14px; }
.pdp__sizes span { min-width: 30px; padding: 5px 0; text-align: center; font-size: 10.5px; border: 1px solid #ddd; }
.pdp__add { margin-top: 10px; padding: 9px 0; background: #111; color: #fff; text-align: center; font-size: 11px; letter-spacing: .04em; }
.pdp__acc { display: flex; justify-content: space-between; margin-top: 10px; padding-top: 9px; border-top: 1px solid #e6e6e6; font-size: 11px; color: #333; }
/* Sul telefono la scheda va in colonna, come in un negozio vero visto dal telefono. */
@media (max-width: 559px) {
  .pdp { grid-template-columns: 1fr; }
  .pdp__media { aspect-ratio: 16 / 10; }
  .pdp__media .garment { width: auto; height: 88%; }
}

/* ---- Il giudizio, come lo disegna l'estensione ---- */
.lv-top { --lv: var(--top); }
.lv-good { --lv: var(--good); }
.lv-ok { --lv: var(--ok); }
.lv-meh { --lv: var(--meh); }
.lv-bad { --lv: var(--bad); }

.fc { display: grid; grid-template-columns: 40px 1fr; gap: 10px; margin-top: 14px; padding-top: 2px; }
.fc__ring { position: relative; width: 40px; height: 40px; }
.fc__ring svg { width: 40px; height: 40px; transform: rotate(-90deg); }
.fc__ring circle { fill: none; stroke-width: 4; }
.fc__ring .trk { stroke: var(--lv); stroke-opacity: .16; }
.fc__ring .arc { stroke: var(--lv); stroke-linecap: round; stroke-dasharray: 119.38; stroke-dashoffset: calc(119.38px * (1 - var(--v))); }
.fc__ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.fc__h { font-size: 14px; font-weight: 600; line-height: 1.25; }
.fc__c { font-size: 12px; line-height: 1.4; margin-top: 2px; }
.fc__r { font-size: 11px; line-height: 1.4; margin-top: 3px; color: #6e6e73; }
.fc__r .neg { color: var(--bad); }
.fc__d { font-size: 11px; font-weight: 600; margin-top: 5px; text-decoration: underline; text-underline-offset: 2px; }

/* ---- L'etichetta in raso, cucita sul bordo della finestra ---- */
.tag {
  position: absolute; z-index: 2; right: -6px; bottom: -112px; width: 136px;
  padding: 24px 12px 14px;
  background-color: var(--satin);
  /* trama del raso: righe orizzontali fittissime e cimosa più scura ai lati */
  background-image:
    linear-gradient(90deg, rgba(29, 35, 48, .06), transparent 6px, transparent calc(100% - 6px), rgba(29, 35, 48, .06)),
    repeating-linear-gradient(0deg, rgba(29, 35, 48, .035) 0 1px, transparent 1px 3px);
  border-radius: 2px;
  box-shadow: var(--shadow-object);
  transform: rotate(-5deg);
  color: rgba(29, 35, 48, .88);
  font-stretch: 75%;
}
.tag__seam {
  position: absolute; left: 0; right: 0; top: 0; height: 14px;
  background: linear-gradient(rgba(29, 35, 48, .1), transparent);
  border-bottom: 1px dashed var(--seam);
}
.tag__line { text-transform: uppercase; font-weight: 500; font-size: 13px; line-height: 1.5; letter-spacing: .06em; width: fit-content;
  background: linear-gradient(var(--bad), var(--bad)) left bottom / 100% 1.5px no-repeat; padding-bottom: 1px; }
.tag__small { text-transform: uppercase; font-size: 9.5px; letter-spacing: .07em; line-height: 1.35; margin-top: 8px; color: var(--ink-2); }
.care { display: block; width: 100%; height: auto; margin-top: 10px; color: var(--ink-2); }
@media (min-width: 560px) {
  .tag { width: 168px; right: -18px; bottom: -64px; padding: 28px 16px 16px; }
  .tag__line { font-size: 15px; }
  .tag__small { font-size: 10.5px; }
}
@media (min-width: 1000px) {
  .tag { right: -24px; bottom: -140px; }
  .fc__h { font-size: 15px; }
  .fc__c { font-size: 13px; }
  .fc__r { font-size: 12px; }
  .pdp__title { font-size: 15px; }
}

/* Etichetta grande solo dove la finestra è abbastanza alta da lasciarle spazio sotto il pulsante. */
@media (min-width: 1280px) {
  .tag { width: 204px; right: -32px; bottom: -112px; padding: 32px 18px 18px; }
  .tag__line { font-size: 17px; }
  .tag__small { font-size: 11px; }
}

/* Il momento animato: per ogni capo mostrato (all'apertura e a ogni cambio) le righe dell'etichetta si sottolineano una
   dopo l'altra, poi l'anello del giudizio si riempie e compare il testo. Senza JS o con "Riduci movimento": stato finale. */
@media (prefers-reduced-motion: no-preference) {
  .js .demo .tag__line { background-size: 0 1.5px; transition: background-size .5s cubic-bezier(.2, .8, .2, 1); }
  .js .demo .tag__line:nth-of-type(2) { transition-delay: .18s; }
  .js .demo .tag__line:nth-of-type(3) { transition-delay: .36s; }
  .js .demo .fc__ring .arc { stroke-dashoffset: 119.38px; transition: stroke-dashoffset 1.1s cubic-bezier(.2, .8, .2, 1) .7s; }
  .js .demo .fc__ring b, .js .demo .fc__body { opacity: 0; transition: opacity .5s ease 1.1s; }
  /* Si anima solo il capo mostrato: a ogni cambio la sequenza riparte per il nuovo. */
  .js .demo.is-on .is-current .tag__line { background-size: 100% 1.5px; }
  .js .demo.is-on .is-current .fc__ring .arc { stroke-dashoffset: calc(119.38px * (1 - var(--v))); }
  .js .demo.is-on .is-current .fc__ring b, .js .demo.is-on .is-current .fc__body { opacity: 1; }
}

/* ---- Gli esempi del primo schermo: tre capi nello stesso posto, uno visibile alla volta ---- */
/* Tutti nella stessa cella della griglia: finestra ed etichetta restano alte quanto il capo più lungo, niente salti. */
.slides, .tag__slides { display: grid; }
.slide, .tag__slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s linear .6s; }
.slide.is-current, .tag__slide.is-current { opacity: 1; visibility: visible; transition: opacity .6s ease; }
.garment--shirt { --fabric: #a9b8c6; }
.garment--coat { --fabric: #a5845e; }
.fc__r .pos { color: var(--good); }
/* Sotto la finestra (fuori dal flusso, così l'etichetta non si sposta): un segno per capo e la pausa. */
.demo__controls { display: none; position: absolute; left: 0; top: calc(100% + 12px); align-items: center; }
.js .demo__controls { display: flex; }
.demo__dot { display: grid; place-items: center; width: 40px; height: 32px; padding: 0; background: none; border: 0; cursor: pointer; }
.demo__dot span { position: relative; width: 30px; height: 4px; border-radius: 2px; background: rgba(29, 35, 48, .18); overflow: hidden; }
.demo__dot span::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: left; }
.demo__dot.is-current span::after { transform: scaleX(1); }
.demo__dot:hover span { background: rgba(29, 35, 48, .32); }
.demo__pause { display: none; place-items: center; width: 32px; height: 32px; margin-left: 6px; padding: 0;
  background: var(--satin); color: var(--ink); border: 1px solid var(--line); border-radius: 50%; cursor: pointer; }
.demo__pause svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.demo__pause .icon-play, .demo__pause[aria-pressed="true"] .icon-pause { display: none; }
.demo__pause[aria-pressed="true"] .icon-play { display: block; }
/* La barra del capo mostrato si riempie in 8 secondi; alla fine site.js passa al capo dopo.
   Ferma col mouse sopra, con la tastiera dentro o col pulsante. Con "Riduci movimento" niente cambi automatici. */
@media (prefers-reduced-motion: no-preference) {
  .js .demo__pause { display: grid; }
  .js .demo .demo__dot.is-current span::after { transform: scaleX(0); }
  .js .demo.is-on .demo__dot.is-current span::after { animation: demo-progress 8s linear forwards; }
  .demo:has(:focus-visible) .demo__dot span::after, .demo.is-paused .demo__dot span::after { animation-play-state: paused; }
}
/* Solo con un mouse vero: sui telefoni l'hover resta attivo dopo un tocco e fermerebbe gli esempi per sempre. */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .demo:hover .demo__dot span::after { animation-play-state: paused; }
}
@keyframes demo-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---- Sezioni ---- */
.band { padding-block: var(--band); }
.band + .band { border-top: 1px solid var(--line); }

/* ---- Il nastro dei negozi: fettuccia in raso con le cuciture, ferma, sotto la finestra e l'etichetta del primo schermo ---- */
/* Lo spazio sopra lascia passare quello che sborda dal primo schermo (fino a 190px sul telefono, 143 sul tablet, 92 sul computer). */
.ribbon {
  position: relative; margin-top: 216px;
  background-color: var(--satin);
  background-image: repeating-linear-gradient(0deg, rgba(29, 35, 48, .03) 0 1px, transparent 1px 3px);
  border-block: 1px solid var(--line);
}
@media (min-width: 560px) { .ribbon { margin-top: 168px; } }
@media (min-width: 1000px) { .ribbon { margin-top: 120px; } }
.ribbon::before, .ribbon::after { content: ""; position: absolute; left: 0; right: 0; border-top: 1px dashed var(--seam); }
.ribbon::before { top: 6px; }
.ribbon::after { bottom: 6px; }
.ribbon__in { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 32px; padding-block: 24px; }
.ribbon__title { max-width: none; font-size: .8125rem; font-stretch: 75%; font-weight: 500; line-height: 1.3; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.ribbon__stores { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 26px; }
.ribbon__stores li { display: flex; align-items: center; white-space: nowrap;
  text-transform: uppercase; font-stretch: 75%; font-weight: 600; font-size: 1.1rem; letter-spacing: .08em; }
/* Sul telefono il titolo sta sopra e i nomi vanno su due righe: lì niente anelli, resterebbero appesi a fine riga. */
@media (max-width: 759px) { .ribbon__title { flex-basis: 100%; text-align: center; } }
@media (min-width: 760px) {
  .ribbon__stores { gap: 0; }
  .ribbon__stores li { font-size: 1.25rem; }
  /* Tra un nome e l'altro l'anello, il segno dell'estensione */
  .ribbon__stores li + li::before { content: ""; width: 11px; height: 11px; margin: 0 24px; border-radius: 50%; border: 2px solid var(--ink-2); opacity: .55; }
}

.split { display: grid; gap: 40px; }
@media (min-width: 1000px) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; align-items: center; }
  .split--wide { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
  .split--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
  .split--flip > figure { order: -1; }
}

/* Finestre ritagliate (senza barra) negli esempi */
.crop { max-width: 520px; }
.crop--grid { max-width: none; }
.window--crop .store { padding-top: 4px; }
.pdp__acc--hidden { position: relative; color: #111; font-weight: 600; outline: 1.5px dashed var(--bad); outline-offset: 6px; }

/* Prima e dopo: la stessa pagina del negozio, senza e con l'estensione. Etichetta grande sopra; dentro la scheda il
   resto del negozio si spegne e restano accesi solo la sezione chiusa (tratteggio rosso) e il riquadro (verde),
   ognuno con la sua nota. */
/* Le introduzioni a tutta larghezza vanno a capo solo dove lo dice il testo, su computer. */
.wrap > .split__text p { max-width: none; }
.wrap > .split__text h2 { max-width: none; }
.compare { display: grid; gap: 40px; margin-top: 48px; }
@media (min-width: 760px) { .compare { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-items: start; } }
.compare__label { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font-size: 1.5rem; font-weight: 700;
  font-stretch: 75%; line-height: 1.1; color: var(--ink-2); }
.compare__label::before { content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2.5px dashed var(--bad); }
.compare__item--after .compare__label { color: var(--good); }
.compare__item--after .compare__label::before { border: 2.5px solid var(--good); }
.compare .pdp__price, .compare .pdp__sizes, .compare .pdp__add, .compare .pdp__acc:not(.pdp__acc--hidden) { opacity: .3; }
.compare .fc { padding: 10px; margin-left: -10px; margin-right: -10px; outline: 2px solid var(--good); border-radius: 4px; background: #fff; }
.compare__note { margin-top: 12px; font-family: var(--font); font-size: 14px; font-weight: 700; color: var(--good); }
.compare__note::before { content: "↑ "; }
.compare__note--bad { color: var(--bad); }

/* ---- Come funziona: tre passi in ordine ---- */
.steps { display: grid; gap: 36px; margin-top: 64px; counter-reset: step; }
.steps li { counter-increment: step; border-top: 1px solid var(--ink); padding-top: 18px; }
.steps li::before { content: counter(step); display: block; font-stretch: 62%; font-weight: 300; font-size: 3.5rem; line-height: 1; color: var(--ink-2); margin-bottom: 14px; font-variant-numeric: tabular-nums; }
.steps p { margin-top: 10px; color: var(--ink-2); }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; } }

/* ---- La scala: un metro da sarta ---- */
.tape__scale { display: none; }
/* Sotto il metro: le eccezioni e il sesto stato, uno accanto all'altro sul computer. */
.scale__foot { display: grid; gap: 18px; margin-top: 22px; }
.unknown { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 12px; align-items: start; max-width: 62ch; color: var(--ink-2); font-size: .875rem; line-height: 1.5; }
.unknown b { color: var(--ink); font-weight: 600; }
.unknown__ring { width: 26px; height: 26px; }
.unknown__ring circle { fill: none; stroke: var(--unknown); stroke-width: 3; }
.unknown__ring text { fill: var(--unknown); font: 700 13px var(--font); }
.tape { display: grid; margin-top: 48px; background: var(--satin); border: 1px solid var(--line); border-radius: 2px; }
.tape__band { position: relative; padding: 18px 18px 20px 22px; border-left: 5px solid var(--lv); }
.tape__band + .tape__band { border-top: 1px solid var(--line); }
.tape__word { font-stretch: 70%; font-weight: 700; font-size: 1.6rem; line-height: 1; color: var(--lv); }
.tape__range { font-size: .8125rem; font-weight: 600; color: var(--ink-2); margin-top: 6px; font-variant-numeric: tabular-nums; }
@media (max-width: 1039px) {
  .tape__word, .tape__range { display: inline-block; }
  .tape__range { margin: 0 0 0 10px; }
  .tape__band { padding-block: 14px 16px; }
}
.tape__means { font-size: .9375rem; margin-top: 8px; }
.tape__ex { font-size: .8125rem; line-height: 1.45; color: var(--ink-2); margin-top: 10px; }
.tape__ex span { display: block; color: var(--ink); font-weight: 600; }
.tape__ex b { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 3px; background: var(--lv); color: #fff; font-size: .75rem; font-variant-numeric: tabular-nums; }
@media (min-width: 1040px) {
  /* Larghe come la loro fascia di punteggio: Fuffa copre 40 punti su 100, Pregiato 11. */
  .tape__scale { display: block; position: relative; height: 18px; margin-top: 48px; font-size: .75rem; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
  .tape__scale span { position: absolute; left: calc(var(--at) * 1%); transform: translateX(-50%); }
  .tape__scale span:first-child { transform: none; }
  .tape__scale span:last-child { transform: translateX(-100%); }
  /* Colonne esattamente come le fasce di punteggio (0–39, 40–61, 62–77, 78–89, 90–100): i bordi dei colori
     cadono su 40, 62, 78 e 90 del metro. Con la griglia il margine interno non cambia la larghezza delle fasce. */
  .tape { display: grid; grid-template-columns: minmax(0, 40fr) minmax(0, 22fr) minmax(0, 16fr) minmax(0, 12fr) minmax(0, 10fr);
    margin-top: 6px; padding-top: 28px; position: relative;
    /* Tacche come un metro vero: lunga ogni 10 punti, media al 5, corta a ogni punto (10 spazi tra due numeri). */
    background-image: linear-gradient(var(--ink), var(--ink)),
      repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 10%),
      repeating-linear-gradient(90deg, transparent 0 5%, var(--ink-2) 5% calc(5% + 1px), transparent calc(5% + 1px) 10%),
      repeating-linear-gradient(90deg, var(--seam) 0 1px, transparent 1px 1%);
    background-size: 1px 14px, 100% 14px, 100% 10px, 100% 6px; background-repeat: no-repeat; background-position: right top, 0 0, 0 0, 0 0; }
  .tape__band { min-width: 0; border-left: 0; border-top: 5px solid var(--lv); padding: 16px 14px 18px; }
  .tape__band + .tape__band { border-top: 5px solid var(--lv); box-shadow: inset 1px 0 0 var(--line); }
  /* Stesse colonne del metro: le eccezioni sotto Fuffa e Compromesso (0–61), il sesto stato da Nella media (62) in poi;
     il testo parte dove parte quello delle fasce. */
  .scale__foot { grid-template-columns: minmax(0, 62fr) minmax(0, 38fr); gap: 0; }
  .scale__foot > * { padding-inline: 15px 32px; }
}

/* ---- Cosa nota: pittogramma, titolo, una frase, e sotto l'esempio vero (etichetta del negozio + giudizio) ---- */
.catches { display: grid; gap: 40px; margin-top: 48px; }
@media (min-width: 700px) { .catches { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; } }
@media (min-width: 1040px) { .catches { gap: 56px 64px; } }
/* Ogni caso occupa 4 righe della griglia (pittogramma, titolo, testo, esempio): con subgrid le righe sono allineate
   tra le colonne, così gli esempi partono tutti alla stessa altezza anche con testi di lunghezza diversa. */
.catch { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
/* Pittogrammi a tratto, come i simboli di lavaggio di un'etichetta */
.catch__icon { width: 44px; height: 44px; fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.catch h3 { margin-top: 16px; font-size: 1.3rem; }
.catch__text { margin-top: 6px; color: var(--ink-2); font-size: 1rem; line-height: 1.5; }
.catch__ex { position: relative; align-self: start; margin-top: 18px; padding: 22px 14px 14px; background: var(--satin); border: 1px solid var(--line); border-radius: 2px; }
.catch__ex::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 9px; background: linear-gradient(rgba(29, 35, 48, .07), transparent); border-bottom: 1px dashed var(--seam); }
.catch__ex > p { max-width: none; }
.snip__name { font-weight: 600; font-size: .875rem; display: flex; justify-content: space-between; gap: 12px; }
.snip__name span { font-weight: 400; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.snip__comp { margin-top: 6px; text-transform: uppercase; font-stretch: 75%; font-weight: 500; font-size: .75rem; letter-spacing: .05em; line-height: 1.5; color: rgba(29, 35, 48, .8); }
/* Il giudizio dell'estensione: anello e parola colorati, poi la frase esatta */
.chip { display: grid; grid-template-columns: 14px 1fr; column-gap: 8px; align-items: baseline; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-family: var(--store-font); font-size: .8125rem; line-height: 1.45; }
.chip b { color: var(--lv); font-weight: 700; }
.chip span { grid-column: 2; color: var(--ink); }
.chip i { width: 13px; height: 13px; border-radius: 50%; transform: translateY(2px);
  background: conic-gradient(var(--lv) calc(var(--v) * 1turn), color-mix(in srgb, var(--lv) 18%, transparent) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px)); }
.catches + .aside { margin-top: 28px; }

/* ---- Liste ---- */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; padding: 16px; }
@media (min-width: 640px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.card__img { background: var(--photo); aspect-ratio: 3 / 4; display: grid; place-items: center; }
.garment--tee { --fabric: #e3dfd6; }
.garment--knit { --fabric: #b8a487; }
.garment--hoodie { --fabric: #8b929b; }
.garment--puffer { --fabric: #2f3b34; }
.card__name { font-size: 11.5px; margin-top: 8px; line-height: 1.3; }
.card__price { font-size: 11.5px; font-weight: 600; margin-top: 2px; }
.mini { display: flex; flex-wrap: wrap; align-items: center; gap: 0 5px; margin-top: 7px; font-size: 11px; line-height: 1.35; color: #6e6e73; }
.mini svg { width: 13px; height: 13px; transform: rotate(-90deg); }
.mini circle { fill: none; stroke-width: 2.5; }
.mini .trk { stroke: var(--lv); stroke-opacity: .16; }
.mini .arc { stroke: var(--lv); stroke-linecap: round; stroke-dasharray: 36.13; stroke-dashoffset: calc(36.13px * (1 - var(--v))); }
.mini b { color: #111; font-weight: 600; }
.mini span { flex-basis: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Privacy: i fatti su un'etichetta, accanto al pulsante per installare ---- */
.facts {
  background-color: var(--satin);
  background-image: repeating-linear-gradient(0deg, rgba(29, 35, 48, .03) 0 1px, transparent 1px 3px);
  border-radius: 2px; box-shadow: var(--shadow-object);
  padding: 30px 24px 10px; position: relative; width: 100%; max-width: 460px; justify-self: center;
}
.facts__title { font-size: 1.3rem; padding: 4px 0 10px; }
.facts::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14px; background: linear-gradient(rgba(29, 35, 48, .08), transparent); border-bottom: 1px dashed var(--seam); }
.facts li { padding: 14px 0; border-top: 1px solid var(--line); font-size: 1.0625rem; }
.facts li:first-child { border-top: 0; }

/* ---- Come averla ---- */
.install .aside { margin-top: 18px; }
.get { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--ink); }
.get .note { margin-top: 12px; }

/* ---- Sostegno: il cartellino del prezzo, appeso con il suo filo ---- */
.support .aside { margin-top: 16px; max-width: 52ch; }
.support__btn { margin-top: 28px; }
.pricetag { position: relative; justify-self: center; width: 220px; padding-top: 70px; }
/* Il filo finisce al centro del foro (calcolato con la rotazione di -5° del cartellino attorno al bordo alto). */
.pricetag__thread { position: absolute; z-index: 1; top: 0; left: calc(50% - 80px); width: 160px; height: 100px; overflow: visible; }
.pricetag__thread path { fill: none; stroke: var(--ink-2); stroke-width: 1.3; stroke-linecap: round; }
.pricetag__card {
  position: relative; padding: 58px 24px 24px; text-align: center;
  background-color: var(--satin);
  background-image: repeating-linear-gradient(0deg, rgba(29, 35, 48, .03) 0 1px, transparent 1px 3px);
  /* angoli superiori tagliati, come un cartellino vero */
  clip-path: polygon(22% 0, 78% 0, 100% 16%, 100% 100%, 0 100%, 0 16%);
  transform: rotate(-5deg); transform-origin: 50% 0;
}
.pricetag { filter: drop-shadow(0 1px 1px rgba(29, 35, 48, .08)) drop-shadow(0 16px 22px rgba(29, 35, 48, .2)); }
.pricetag__hole { position: absolute; top: 20px; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 4px rgba(29, 35, 48, .1); }
.pricetag__brand { font-stretch: 75%; font-weight: 700; font-size: 1rem; }
.pricetag__price { font-stretch: 62%; font-weight: 700; font-size: 4.5rem; line-height: 1; margin-top: 10px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.pricetag__small { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--seam); text-transform: uppercase; font-stretch: 75%; font-weight: 500; font-size: .75rem; letter-spacing: .08em; color: var(--ink-2); }
@media (min-width: 1000px) {
  .split--tag { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); }
  .pricetag { width: 240px; }
}

/* ---- Domande ---- */
.faq { display: grid; gap: 32px; }
.faq__list details { border-top: 1px solid var(--line); }
.faq__list details:last-child { border-bottom: 1px solid var(--line); }
.faq__list summary { display: flex; justify-content: space-between; gap: 16px; padding: 20px 0; cursor: pointer; list-style: none; font-weight: 600; font-size: 1.125rem; line-height: 1.35; }
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary::after { content: "+"; flex: none; font-weight: 400; font-size: 1.5rem; line-height: 1; transition: transform .2s ease; }
.faq__list details[open] summary::after { transform: rotate(45deg); }
.faq__list details p { padding-bottom: 22px; color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) { .faq__list summary::after { transition: none; } }
@media (min-width: 1000px) { .faq { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 72px; } }

/* ---- Piede ---- */
.foot { border-top: 1px solid var(--line); padding: 40px 0 56px; }
.foot__in { display: grid; gap: 10px; font-size: .875rem; color: var(--ink-2); }
.brand--foot { color: var(--ink); font-size: 1.05rem; margin-bottom: 6px; }
@media (min-width: 860px) { .foot__in { grid-template-columns: auto 1fr; column-gap: 48px; } .brand--foot { grid-row: span 2; align-self: start; } }

/* ---- Pagine di solo testo (privacy, 404): stessa tipografia, titoli più piccoli, una colonna da leggere ---- */
.doc { padding-block: calc(var(--band) * .6) var(--band); }
.doc__in > * + * { margin-top: 16px; }
.doc h1 { font-size: clamp(2.6rem, 1.8rem + 3vw, 4rem); }
.doc h1 + .aside { margin-top: 12px; }
.doc .lede { max-width: 52ch; margin-top: 24px; }
.doc h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); max-width: none; margin-top: 48px; }
.doc ul { display: grid; gap: 12px; max-width: 62ch; padding-left: 1.2em; list-style: disc; }
.doc li { padding-left: 4px; }
.doc .btn { margin-top: 8px; }

/* Paragrafi brevi dentro un blocco di testo: una frase per riga, con un po' d'aria (vedi escape in build.mjs) */
.br { display: block; height: .6em; }