/* ============================================================ Portico tokens */
:root{
  --travertino:#F6F1E8;
  --carta:#FFFFFF;
  --carta-calda:#FCF8F1;
  --inchiostro:#23201B;
  --fumo:#6B6459;
  --terra:#9C3B24;
  --terra-scuro:#7A2C19;
  --terra-velo:#F3E2DB;
  --ottone:#B08A3E;
  --ottone-velo:#F0E5CE;
  --lime:#D3E512;
  --bordo:#E3DACB;
  --ombra:0 1px 2px rgba(35,32,27,.06), 0 8px 26px rgba(35,32,27,.07);
  --ombra-alta:0 2px 4px rgba(35,32,27,.08), 0 18px 44px rgba(35,32,27,.12);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

/* ================================================================== reset-ish */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--travertino);
  color:var(--inchiostro);
  font:400 17px/1.72 var(--sans);
  letter-spacing:.005em;
}
img{max-width:100%;height:auto}
a{color:var(--terra);text-underline-offset:.18em}
a:hover{color:var(--terra-scuro)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.22;letter-spacing:-.012em;margin:0}
h1{font-size:2.12rem;margin-bottom:.5rem}
h2{font-size:1.52rem;margin:2.6rem 0 .85rem}
h3{font-size:1.16rem;margin:1.8rem 0 .6rem;font-family:var(--sans);font-weight:700;letter-spacing:0}
p{margin:0 0 1.05rem}
ul,ol{margin:0 0 1.15rem;padding-left:1.25rem}
li{margin:0 0 .5rem}
strong{font-weight:650}
:focus-visible{outline:3px solid var(--ottone);outline-offset:2px;border-radius:3px}

/* ===================================================== the one gutter wrapper */
.pt-guscio{
  width:100%;
  max-width:1060px;
  margin-left:auto;
  margin-right:auto;
  padding-left:18px;
  padding-right:18px;
}

/* ===================================================================== header */
.pt-head{
  background:var(--carta);
  border-bottom:1px solid var(--bordo);
  position:sticky;
  top:0;
  z-index:40;
}
.pt-head__bar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  padding-top:11px;
  padding-bottom:11px;
}
.pt-head__logo{
  display:flex;
  align-items:center;
  max-width:150px;
  flex:0 0 auto;
}
/* The SpinBetter mark is a TWO-TONE wordmark: "Spin" is #fff and "better" is
   lime. On this leaf's travertine/white masthead the white half would simply
   disappear, so the mark sits on a DARK chip. The SVG itself is never
   recoloured — it is the genuine brand asset. The footer needs no chip: it is
   already ink-dark. No gate can see contrast, so this is checked by eye. */
.pt-marchio{
  display:block;
  background:var(--inchiostro);
  padding:9px 12px;
  border-radius:10px;
}
.pt-marchio img{display:block;width:100%;height:auto}
.pt-head__burger{
  width:40px;
  height:40px;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--carta-calda);
  border:1px solid var(--bordo);
  border-radius:9px;
  cursor:pointer;
  color:var(--inchiostro);
}
.pt-head__burger span{
  display:block;
  width:17px;
  height:2px;
  background:currentColor;
  position:relative;
}
.pt-head__burger span::before,.pt-head__burger span::after{
  content:"";position:absolute;left:0;width:17px;height:2px;background:currentColor;
}
.pt-head__burger span::before{top:-6px}
.pt-head__burger span::after{top:6px}
.pt-head__nav{display:flex;align-items:center;gap:20px;flex:0 1 auto;margin-left:auto}
.pt-head__nav a{
  font:600 14.5px/1 var(--sans);
  color:var(--fumo);
  text-decoration:none;
  letter-spacing:.015em;
  padding:6px 0;
  border-bottom:2px solid transparent;
}
.pt-head__nav a:hover{color:var(--terra);border-bottom-color:var(--ottone)}
.pt-head__nav a[aria-current="page"]{color:var(--inchiostro);border-bottom-color:var(--terra)}
.pt-head__cta{
  flex:0 0 auto;
  background:var(--lime);
  color:var(--inchiostro);
  font:700 14px/1 var(--sans);
  text-decoration:none;
  padding:11px 16px;
  border-radius:9px;
  border:1px solid #BFCF10;
}
.pt-head__cta:hover{background:#C6D80F;color:var(--inchiostro)}
.pt-head__nav--open{display:flex}

/* ====================================================================== main */
.pt-pagina{padding-top:34px;padding-bottom:16px}

/* =============================================================== soglia (hero) */
.pt-soglia{
  position:relative;
  background:var(--carta);
  border:1px solid var(--bordo);
  border-radius:20px;
  box-shadow:var(--ombra);
  padding:30px 26px 26px;
  margin-bottom:12px;
  overflow:hidden;
}
.pt-soglia::before{
  content:"";
  position:absolute;
  inset:0 auto auto 0;
  width:100%;
  height:5px;
  background:linear-gradient(90deg,var(--terra) 0 33%,var(--ottone) 33% 66%,var(--lime) 66% 100%);
}
.pt-soglia__occhiello{
  font:700 11.5px/1 var(--sans);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--terra);
  margin:0 0 .8rem;
}
.pt-soglia__lede{font-size:1.07rem;color:#37322B;margin-bottom:1.15rem}
.pt-soglia__note{font-size:.92rem;color:var(--fumo);margin:0}

/* the arch motif — pure CSS, no image file to collide with a sibling */
.pt-arco{
  display:flex;
  gap:10px;
  align-items:flex-end;
  margin:1.3rem 0 .2rem;
}
.pt-arco__voce{
  flex:1 1 0;
  min-width:0;
  background:var(--carta-calda);
  border:1px solid var(--bordo);
  border-top-left-radius:999px 60px;
  border-top-right-radius:999px 60px;
  padding:18px 12px 12px;
  text-align:center;
}
.pt-arco__cifra{
  display:block;
  font:600 1.42rem/1 var(--serif);
  color:var(--terra);
  margin-bottom:.25rem;
}
.pt-arco__voce span:last-child{font-size:.83rem;color:var(--fumo);line-height:1.35;display:block}

/* ================================================================== gradini */
.pt-gradini{list-style:none;counter-reset:gradino;padding:0;margin:1.3rem 0 1.5rem}
.pt-gradini li{
  counter-increment:gradino;
  position:relative;
  padding:14px 16px 14px 58px;
  background:var(--carta);
  border:1px solid var(--bordo);
  border-left:4px solid var(--ottone);
  border-radius:0 12px 12px 0;
  margin-bottom:10px;
}
.pt-gradini li::before{
  content:counter(gradino);
  position:absolute;
  left:16px;
  top:13px;
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--terra);
  color:#fff;
  font:700 14px/28px var(--sans);
  text-align:center;
}

/* =================================================================== chiave */
.pt-chiave{list-style:none;padding:0;margin:1.2rem 0 1.4rem;display:grid;gap:10px}
.pt-chiave li{
  position:relative;
  padding:12px 14px 12px 42px;
  background:var(--ottone-velo);
  border-radius:11px;
  margin:0;
  font-size:.97rem;
}
.pt-chiave li::before{
  content:"";
  position:absolute;
  left:15px;
  top:18px;
  width:13px;
  height:8px;
  border-left:2.5px solid var(--terra);
  border-bottom:2.5px solid var(--terra);
  transform:rotate(-45deg);
}

/* ================================================================== sigillo */
.pt-sigillo{
  background:var(--terra-velo);
  border:1px solid #E2C6BB;
  border-radius:14px;
  padding:18px 20px;
  margin:1.5rem 0;
}
.pt-sigillo__titolo{
  font:700 12px/1 var(--sans);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--terra-scuro);
  margin:0 0 .6rem;
}
.pt-sigillo__note{margin:0;font-size:.97rem}

/* =================================================================== lastra */
.pt-lastra{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin:1.3rem 0 1.5rem;
  border:1px solid var(--bordo);
  border-radius:13px;
  background:var(--carta);
}
.pt-lastra table{border-collapse:collapse;width:100%;font-size:.94rem}
.pt-lastra th,.pt-lastra td{
  text-align:left;
  padding:11px 14px;
  border-bottom:1px solid var(--bordo);
  vertical-align:top;
}
.pt-lastra th{
  background:var(--carta-calda);
  font:700 12.5px/1.35 var(--sans);
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--fumo);
  white-space:nowrap;
}
.pt-lastra tr:last-child td{border-bottom:0}

/* ================================================================== tessera */
.pt-tessera{
  background:var(--carta);
  border:1px solid var(--bordo);
  border-radius:16px;
  box-shadow:var(--ombra);
  padding:22px;
  margin:1.5rem 0;
}
.pt-tessera__titolo{
  font:600 1.12rem/1.3 var(--serif);
  margin:0 0 .7rem;
}
.pt-tessera__riga{
  display:flex;
  flex-wrap:wrap;
  gap:8px 16px;
  padding:9px 0;
  border-top:1px dashed var(--bordo);
  font-size:.95rem;
}
.pt-tessera__riga b{flex:0 0 auto;color:var(--terra-scuro)}
.pt-tessera__note{font-size:.88rem;color:var(--fumo);margin:.8rem 0 0}

/* =================================================================== quadro */
.pt-quadro{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:1.4rem 0}
.pt-quadro__cella{
  background:var(--carta);
  border:1px solid var(--bordo);
  border-radius:13px;
  padding:16px 16px 14px;
}
.pt-quadro__cifra{
  display:block;
  font:600 1.35rem/1.1 var(--serif);
  color:var(--terra);
  margin-bottom:.3rem;
}
.pt-quadro__voce{display:block;font-size:.88rem;color:var(--fumo);line-height:1.4}

/* =================================================================== rimedi */
.pt-rimedi{margin:1.4rem 0 1.6rem;border-top:2px solid var(--inchiostro)}
.pt-rimedi__riga{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:4px;
  padding:14px 0;
  border-bottom:1px solid var(--bordo);
}
.pt-rimedi__sintomo{font:700 .95rem/1.4 var(--sans);color:var(--inchiostro)}
.pt-rimedi__cura{font-size:.95rem;color:#3C3730;margin:0}

/* ====================================================================== figure */
figure{margin:1.7rem 0}
figure img{
  display:block;
  width:90%;
  height:auto;
  margin:0 auto;
  border-radius:8px;
  box-shadow:var(--ombra);
}
figcaption{
  margin-top:.65rem;
  text-align:center;
  font-size:.86rem;
  color:var(--fumo);
  font-style:italic;
}

/* ========================================================================= CTA */
.pt-cta{margin:1.9rem 0;text-align:center}
.pt-cta a{
  display:inline-block;
  background:var(--lime);
  color:var(--inchiostro);
  font:700 16px/1 var(--sans);
  text-decoration:none;
  padding:15px 30px;
  border-radius:11px;
  border:1px solid #BFCF10;
  box-shadow:var(--ombra);
}
.pt-cta a:hover{background:#C6D80F;color:var(--inchiostro)}

/* ========================================================================= FAQ */
.pt-faq{margin:2.2rem 0 1rem}
.pt-faq details{
  background:var(--carta);
  border:1px solid var(--bordo);
  border-radius:12px;
  margin-bottom:10px;
  overflow:hidden;
}
.pt-faq details[open]{box-shadow:var(--ombra)}
.query-title{
  cursor:pointer;
  list-style:none;
  padding:15px 46px 15px 18px;
  font:650 1rem/1.45 var(--sans);
  position:relative;
}
.query-title::-webkit-details-marker{display:none}
.query-title::after{
  content:"";
  position:absolute;
  right:19px;
  top:22px;
  width:9px;
  height:9px;
  border-right:2px solid var(--terra);
  border-bottom:2px solid var(--terra);
  transform:rotate(45deg);
}
.pt-faq details[open] .query-title::after{transform:rotate(-135deg);top:26px}
.pt-faq__risposta{padding:0 18px 16px;font-size:.97rem;color:#3C3730}
.pt-faq__risposta p{margin:0 0 .7rem}
.pt-faq__risposta p:last-child{margin:0}

/* ====================================================================== breadcrumb */
.pt-briciole{font-size:.85rem;color:var(--fumo);padding-top:14px}
.pt-briciole a{color:var(--fumo);text-decoration:none}
.pt-briciole a:hover{color:var(--terra);text-decoration:underline}

/* ==================================================================== footer */
.pt-piede{
  background:var(--inchiostro);
  color:#D9D2C6;
  margin-top:52px;
  padding-top:34px;
  padding-bottom:30px;
  font-size:.92rem;
}
.pt-piede a{color:#E8E1D4}
.pt-piede a:hover{color:var(--lime)}
.pt-piede__griglia{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.pt-piede__mark{max-width:158px;margin-bottom:12px}
.pt-piede__mark img{display:block;width:100%;height:auto}
.pt-piede__titolo{
  font:700 11.5px/1 var(--sans);
  letter-spacing:.15em;
  text-transform:uppercase;
  color:#9C9385;
  margin:0 0 .75rem;
}
.pt-piede__lista{list-style:none;padding:0;margin:0}
.pt-piede__lista li{margin-bottom:.45rem}
.pt-piede__eta{
  display:inline-block;
  border:2px solid var(--lime);
  color:var(--lime);
  border-radius:999px;
  font:700 12px/1 var(--sans);
  padding:6px 11px;
  margin-bottom:10px;
}
.pt-piede__legale{
  border-top:1px solid #3A352D;
  margin-top:26px;
  padding-top:18px;
  font-size:.85rem;
  color:#9C9385;
}
.pt-piede__legale p{margin:0 0 .5rem}
.pt-piede__legale p:last-child{margin:0}

/* ====================================================================== 404 */
.pt-vuoto{text-align:center;padding-top:40px;padding-bottom:40px}
.pt-vuoto__cifra{font:600 4.4rem/1 var(--serif);color:var(--terra);margin:0 0 .4rem}

/* ================================================================ breakpoints */
@media (min-width:760px){
  h1{font-size:2.62rem}
  h2{font-size:1.78rem}
  .pt-soglia{padding:40px 40px 34px}
  .pt-pagina{padding-top:44px}
  .pt-quadro{grid-template-columns:repeat(4,minmax(0,1fr))}
  .pt-chiave{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pt-rimedi__riga{grid-template-columns:minmax(0,34%) minmax(0,1fr);gap:18px}
  .pt-piede__griglia{grid-template-columns:1.4fr 1fr 1fr}
}
@media (max-width:759px){
  .pt-head__cta{display:none}
}
@media (max-width:560px){
  body{font-size:16.5px}
  .pt-head__logo{max-width:124px}
  .pt-soglia{padding:24px 18px 20px;border-radius:16px}
  .pt-arco{flex-wrap:wrap;gap:8px}
  .pt-arco__voce{flex:1 1 44%}
  .pt-gradini li{padding:12px 13px 12px 50px}
  .pt-tessera{padding:18px}
  figure img{width:100%}
}
@media (max-width:759px){
  /* the burger takes the right-hand end of the row; the nav is hidden until
     opened, so it cannot be the element pushing the burger across */
  .pt-head__burger{margin-left:auto}
  .pt-head__nav{
    display:none;
    margin-left:0;
    width:100%;
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
    padding-bottom:6px;
  }
  .pt-head__nav--open{display:flex;width:100%}
  .pt-head__nav a{padding:9px 0;width:100%;border-bottom:1px solid var(--bordo)}
}
@media (min-width:760px){
  .pt-head__burger{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}