/* Lira Capital — foglio di stile comune a tutte le pagine del sito.
   Estratto da index.html quando sono nate privacy e cookie policy: la palette
   e la tipografia devono stare in un posto solo, altrimenti le tre pagine
   divergono alla prima modifica. */

:root{
  --ink:#0B1D2E;
  --parchment:#F6F2E9;
  --brass:#8C7A54;
  --harbor:#2F4A47;
  --rope:#C9C2AE;
  --offwhite:#E8E2D0;
  --muted:#4A5A68;
  --font-display:"Fraunces","Newsreader",Georgia,serif;
  --font-body:"IBM Plex Sans","Inter",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--parchment);color:var(--ink);
  font-family:var(--font-body);font-size:16px;line-height:1.6;
  font-variant-numeric:oldstyle-nums;-webkit-font-smoothing:antialiased;
}
.wrap{max-width:56rem;margin:0 auto;padding:0 1.5rem}
@media(min-width:768px){.wrap{padding:0 2.5rem}}

/* Header */
header .bar{display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--brass);padding:2rem 0 1rem}
.wordmark{font-family:var(--font-display);font-style:italic;font-size:1.5rem;color:var(--ink);text-decoration:none}
@media(min-width:768px){.wordmark{font-size:1.875rem}
  header .bar{padding-top:3rem}}
.mark{height:2rem;width:auto}
@media(min-width:768px){.mark{height:2.5rem}}

/* Sezioni */
section{padding:2.5rem 0}
section+section{border-top:1px solid var(--brass)}
@media(min-width:768px){section{padding:3.5rem 0}}
.hero{padding:3rem 0}
@media(min-width:768px){.hero{padding:5rem 0}}
h1{font-family:var(--font-display);font-weight:400;font-size:1.875rem;line-height:1.3;max-width:48rem;
  animation:settle .6s ease-out both}
@media(min-width:768px){h1{font-size:2.25rem}}
@media(min-width:1024px){h1{font-size:3rem}}
.lead{margin-top:1.5rem;max-width:70ch;color:var(--muted);font-size:1.0625rem}
h2{font-family:var(--font-display);font-weight:500;font-size:1.125rem;color:var(--ink)}
section p.body{margin-top:1rem;max-width:60ch}

/* Ledger rows */
.rule{border-top:1px dotted var(--brass)}
.product{display:flex;flex-direction:column;gap:.75rem;padding:1rem 0}
.product-main{display:flex;flex-direction:column;gap:.75rem}
.product-name{display:flex;align-items:center;gap:.75rem}
.product-name img{height:2rem;width:auto}
.product-name span{font-family:var(--font-display);font-weight:500}
.product-desc{color:var(--muted);font-size:.9375rem;max-width:32rem}
@media(min-width:768px){
  .product{flex-direction:row;align-items:center;justify-content:space-between;gap:2rem}
  .product-main{flex-direction:row;align-items:center;gap:1.5rem}
  .product-desc{font-size:1rem}
}
a.link{color:var(--harbor);text-decoration:underline;text-decoration-color:var(--brass);text-underline-offset:4px;font-weight:500}
a.link:hover{color:var(--ink)}
dl{margin-top:1.5rem}
.row{display:flex;flex-direction:column;gap:.25rem;padding:.75rem 0}
dt{font-size:.875rem;font-weight:500;color:var(--muted)}
dd{color:var(--ink)}
@media(min-width:768px){
  .row{flex-direction:row;align-items:baseline;justify-content:space-between;gap:2rem;padding:.5rem 0}
  dt{width:10rem;flex:0 0 auto}
}
.mt6{margin-top:1.5rem}

footer{border-top:1px solid var(--brass);padding:2rem 0}
footer p{font-size:.875rem;color:var(--muted)}

:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
a:focus-visible{outline-offset:4px}
@keyframes settle{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  h1{animation:none;opacity:1;transform:none}
}

/* ── Pagine di testo (privacy, cookie) ─────────────────────────────────── */
.doc h2{margin-top:2.5rem}
.doc h3{font-family:var(--font-display);font-weight:500;font-size:1rem;margin-top:1.5rem}
.doc p,.doc li{max-width:70ch;color:var(--ink);margin-top:.75rem}
.doc ul{margin-top:.75rem;padding-left:1.25rem}
.doc li{margin-top:.35rem}
.doc .updated{color:var(--muted);font-size:.875rem;margin-top:.5rem}
.doc table{width:100%;border-collapse:collapse;margin-top:1rem;font-size:.9375rem}
.doc th,.doc td{text-align:left;padding:.6rem .75rem;border-bottom:1px dotted var(--brass);vertical-align:top}
.doc th{font-weight:500;color:var(--muted);font-size:.875rem}
.back{display:inline-block;margin-top:2.5rem;font-size:.9375rem}

/* ── Banner consenso ───────────────────────────────────────────────────── */
.consent{position:fixed;inset-inline:0;bottom:0;z-index:50;padding:1rem;
  background:var(--offwhite);border-top:1px solid var(--brass)}
.consent[hidden]{display:none}
.consent-inner{max-width:56rem;margin:0 auto;display:flex;flex-direction:column;gap:1rem}
.consent p{font-size:.9375rem;color:var(--ink);max-width:70ch}
.consent-actions{display:flex;gap:.75rem;flex-wrap:wrap}
.btn{font-family:var(--font-body);font-size:.9375rem;padding:.55rem 1.1rem;border:1px solid var(--brass);
  background:transparent;color:var(--ink);cursor:pointer}
.btn-primary{background:var(--ink);color:var(--parchment);border-color:var(--ink)}
.btn:hover{background:var(--rope)}
.btn-primary:hover{background:var(--harbor);color:var(--parchment)}
@media(min-width:768px){
  .consent-inner{flex-direction:row;align-items:center;justify-content:space-between;gap:2rem}
  .consent-actions{flex-shrink:0}
}

/* ── Footer con i collegamenti legali ──────────────────────────────────── */
footer nav{margin-top:.5rem;display:flex;flex-wrap:wrap;gap:1rem;font-size:.875rem}
footer nav a,footer nav button{font-size:.875rem}
.linkish{background:none;border:0;padding:0;font-family:inherit;cursor:pointer;
  color:var(--harbor);text-decoration:underline;text-decoration-color:var(--brass);text-underline-offset:4px}
.linkish:hover{color:var(--ink)}
