:root{
  --ink:#161b2e; --ink-soft:#3b4260; --bone:#f7f4ee; --paper:#ffffff;
  --brass:#b8893f; --brass-lt:#e8d5b4; --teal:#1d7a70; --rust:#a8452f;
  --line:#ded6c8;
  --serif: Georgia,'Iowan Old Style','Palatino Linotype',Palatino,'Times New Roman',serif;
  --sans: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  color-scheme: light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bone);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.66}
img{max-width:100%;height:auto}
a{color:#0f5f58;text-underline-offset:2px}
a:hover{color:var(--rust)}

.bl-wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 18px}

/* ---------- masthead ---------- */
.bl-mast{background:var(--ink);color:#fff;border-bottom:3px solid var(--brass)}
.bl-mast__row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  padding:12px 0}
.bl-mast__logo{display:block;max-width:132px;flex:0 0 auto}
.bl-mast__logo img{display:block;width:100%;height:auto}
.bl-mast__burger{margin-left:auto;width:42px;height:38px;flex:0 0 auto;
  background:transparent;border:1px solid rgba(255,255,255,.45);border-radius:6px;
  color:#fff;font-size:17px;line-height:1;cursor:pointer;padding:0}
.bl-mast__nav{display:none}
.bl-mast__nav ul{list-style:none;margin:0;padding:8px 0 4px;display:flex;
  flex-direction:column;gap:2px}
.bl-mast__nav a{display:block;padding:9px 2px;color:#f2ede3;text-decoration:none;
  font-size:15px;border-bottom:1px solid rgba(255,255,255,.12)}
.bl-mast__nav a:hover{color:var(--brass-lt)}
.bl-nav--open{display:block;width:100%;flex:0 0 100%;order:9}
@media(min-width:900px){
  .bl-mast__burger{display:none}
  .bl-mast__nav{display:block;margin-left:auto;flex:0 0 auto;width:auto;order:0}
  .bl-nav--open{width:auto;flex:0 0 auto;order:0}
  .bl-mast__nav ul{flex-direction:row;gap:20px;padding:0}
  .bl-mast__nav a{border-bottom:0;padding:4px 0}
}

/* ---------- breadcrumbs ---------- */
.bl-crumbs{font-size:13px;color:var(--ink-soft);padding:14px 0 0}
.bl-crumbs a{color:var(--ink-soft)}

/* ---------- hero ---------- */
.bl-hero{background:linear-gradient(180deg,#1d2338 0%,#161b2e 100%);color:#fff;
  padding:26px 0 30px;border-bottom:1px solid #0d1120}
.bl-hero__eyebrow{font-family:var(--serif);font-size:13px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brass-lt);margin:0 0 10px}
.bl-hero__title{font-family:var(--serif);font-size:30px;line-height:1.2;margin:0;
  font-weight:700}
.bl-hero__rule{width:72px;height:3px;background:var(--brass);margin:16px 0 0}
@media(min-width:760px){.bl-hero__title{font-size:40px}}

/* ---------- body ---------- */
main{display:block;padding:0 0 10px}
.bl-body{background:var(--paper);border:1px solid var(--line);border-radius:10px;
  padding:22px 16px 28px;margin:18px 0 26px}
@media(min-width:760px){.bl-body{padding:30px 34px 38px}}
.bl-body h2{font-family:var(--serif);font-size:24px;line-height:1.26;margin:34px 0 12px;
  padding-bottom:9px;border-bottom:2px solid var(--brass-lt)}
.bl-body h3{font-family:var(--serif);font-size:19px;margin:24px 0 8px;color:var(--ink-soft)}
.bl-body p{margin:0 0 15px}
.bl-body ul,.bl-body ol{margin:0 0 16px;padding-left:20px}
.bl-body li{margin:0 0 7px}
.bl-lede{font-size:18px;line-height:1.6;border-left:4px solid var(--brass);
  padding:2px 0 2px 15px;margin:0 0 20px;color:var(--ink-soft)}

/* ---------- figure ---------- */
.bl-figure{margin:18px 0 20px}
.bl-figure img{display:block;width:100%;height:auto;border-radius:7px;
  box-shadow:0 2px 10px rgba(22,27,46,.14)}
.bl-figure figcaption{font-size:13.5px;color:var(--ink-soft);padding:8px 2px 0;
  font-style:italic}

/* ---------- widget 1: la bilancia ---------- */
.bl-scale{border:1px solid var(--line);border-left:4px solid var(--brass);
  border-radius:8px;background:#fdfbf7;padding:16px 14px 6px;margin:20px 0 24px}
.bl-scale__head{font-family:var(--serif);font-size:17px;margin:0 0 4px}
.bl-scale__row{padding:12px 0;border-top:1px solid var(--line)}
.bl-scale__name{font-size:15px;font-weight:600;margin:0 0 8px}
.bl-scale__bar{display:flex;align-items:center;gap:8px;margin:0 0 5px;font-size:13px}
.bl-scale__tag{flex:0 0 96px;color:var(--ink-soft)}
.bl-scale__track{flex:1 1 auto;height:12px;background:#ece5d8;border-radius:6px;
  overflow:hidden}
.bl-scale__fill{display:block;height:100%;border-radius:6px}
.bl-scale__fill--keep{background:var(--teal)}
.bl-scale__fill--cost{background:var(--rust)}
.bl-scale__val{flex:0 0 84px;text-align:right;font-variant-numeric:tabular-nums}

/* ---------- widget 2: comparatore ---------- */
.bl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 20px}
.bl-scroll table{border-collapse:collapse;width:100%;font-size:14.5px}
.bl-scroll caption{caption-side:top;text-align:left;font-family:var(--serif);
  font-size:15px;padding:0 0 9px;color:var(--ink-soft)}
.bl-scroll th,.bl-scroll td{border:1px solid var(--line);padding:9px 11px;
  text-align:left;vertical-align:top}
.bl-scroll thead th{background:var(--ink);color:#fff;font-weight:600;
  white-space:normal}
.bl-scroll tbody tr:nth-child(even) td{background:#faf7f1}

/* ---------- widget 3: barra delle scadenze ---------- */
.bl-clock{border:1px solid var(--line);border-radius:8px;padding:15px 14px 8px;
  margin:20px 0 24px;background:var(--paper)}
.bl-clock__head{font-family:var(--serif);font-size:17px;margin:0 0 12px}
.bl-clock__row{display:flex;align-items:center;gap:9px;margin:0 0 10px;font-size:13.5px}
.bl-clock__label{flex:0 0 108px;color:var(--ink-soft)}
.bl-clock__track{flex:1 1 auto;height:9px;background:#ece5d8;border-radius:5px}
.bl-clock__fill{display:block;height:100%;background:var(--brass);border-radius:5px}
.bl-clock__time{flex:0 0 72px;text-align:right;font-variant-numeric:tabular-nums}

/* ---------- highlight box (positive only) ---------- */
.bl-high{background:#f2f7f5;border:1px solid #c9e0da;border-radius:8px;
  padding:16px 16px 6px;margin:22px 0}
.bl-high__head{font-family:var(--serif);font-size:17px;margin:0 0 9px;color:#12554e}
.bl-high ul{margin:0 0 10px;padding-left:19px}

/* ---------- stat tiles ---------- */
.bl-tiles{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 22px}
.bl-tile{flex:1 1 150px;border:1px solid var(--line);border-radius:8px;
  background:var(--paper);padding:13px 13px 11px}
.bl-tile__num{font-family:var(--serif);font-size:23px;color:var(--brass);
  line-height:1.1}
.bl-tile__label{font-size:13px;color:var(--ink-soft);padding-top:4px}

/* ---------- CTA ---------- */
.bl-cta{margin:24px 0;text-align:center}
.bl-cta__btn{display:inline-block;background:var(--brass);color:#17110a;
  font-weight:700;font-size:16px;text-decoration:none;padding:14px 26px;
  border-radius:7px;border-bottom:3px solid #8e6829}
.bl-cta__btn:hover{background:#c9a057;color:#17110a}

/* ---------- FAQ ---------- */
.bl-faq{margin:28px 0 8px}
.bl-faq details{border:1px solid var(--line);border-radius:8px;background:var(--paper);
  margin:0 0 9px;padding:0}
.bl-faq summary{cursor:pointer;padding:13px 15px;font-weight:600;font-size:15.5px;
  list-style:none}
.bl-faq summary::-webkit-details-marker{display:none}
.bl-faq summary::after{content:"+";float:right;color:var(--brass);font-size:19px;
  line-height:1}
.bl-faq details[open] summary::after{content:"\2212"}
.bl-faq__a{padding:0 15px 14px;margin:0;font-size:15.5px;color:var(--ink-soft)}

/* ---------- footer ---------- */
.bl-foot{background:var(--ink);color:#cfc9bc;margin-top:30px;padding:26px 0 22px;
  font-size:14px}
.bl-foot__logo{display:block;max-width:124px;margin:0 0 14px}
.bl-foot__logo img{display:block;width:100%;height:auto}
.bl-foot__links{list-style:none;margin:0 0 16px;padding:0;display:flex;
  flex-wrap:wrap;gap:8px 20px}
.bl-foot__links a{color:#e4ddcf;text-decoration:none}
.bl-foot__links a:hover{color:var(--brass-lt)}
/* The badge is FLOATED, not inline-block: a 38px inline-block inside a ~22px
   line box inflates that first line and opens a visible gap between the first
   and second line of the same paragraph (reported by Marat, 2026-09-16).
   Floating takes it out of the line box, so the leading stays uniform and the
   text simply wraps beside it. */
.bl-foot__badge{float:left;border:1px solid var(--brass);color:var(--brass-lt);
  border-radius:50%;width:38px;height:38px;line-height:36px;text-align:center;
  font-weight:700;font-size:13px;margin:1px 12px 6px 0}
.bl-foot__legal::after{content:"";display:block;clear:both}
.bl-foot__legal{margin:0;font-size:13px;line-height:1.6;color:#9d968a}
.bl-foot__legal a{color:#bdb5a6}

/* ---------- 404 ---------- */
.bl-404{padding:36px 0 20px;text-align:center}
.bl-404 h1{font-family:var(--serif);font-size:30px;margin:0 0 12px}