/* MetaMap Landing — design system 2026
   Allineato all'app React (post-G10 audit Thomas).
   Cream + Inter + Plex Mono. Zero gradient di superficie.
   Zero glassmorphism. Zero shadow colorate.

   Nota: classi specifiche di sezione (wow-*, hero-media,
   h-scroll, plan-*, beta-block, faq, demo-*, ecc.) sono
   stub minimi qui — riscritte fine in G2-G7. */

@import url("https://rsms.me/inter/inter.css");
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;700&display=swap");

/* ──────────── TOKEN ──────────── */
:root{
  /* palette */
  --bg:#F2EFE6;
  --surface:#FAF8F1;
  --surface-2:#E9E4D6;
  --ink:#0B0F1A;
  --muted:#5B6476;
  --muted-2:#8A94A8;
  --accent:#1445C6;
  --positive:#2E7D5C;
  --negative:#B5351A;
  --warning:#B5843E;
  --stroke:#E5E0D5;
  --stroke-2:rgba(11,15,26,.22);

  /* shadow unica */
  --shadow-flat:0 1px 0 rgba(11,15,26,.06),
                0 1px 2px rgba(11,15,26,.04);

  /* radius (app-aligned) */
  --r:4px;
  --r-2:6px;
  --r-3:8px;
  --r-pill:999px;

  /* spacing 4px-base */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px;
  --s-5:20px; --s-6:24px; --s-7:32px; --s-8:40px;
  --s-9:48px; --s-10:64px; --s-11:80px; --s-12:96px;

  /* layout */
  --topbar-h:56px;
  --container:1080px;
  --container-narrow:720px;

  /* font */
  --font-ui:'Inter',ui-sans-serif,system-ui,
            -apple-system,'Segoe UI',sans-serif;
  --font-hero:'Inter',ui-sans-serif,system-ui;
  --font-mono:'IBM Plex Mono','SF Mono',
              Menlo,Consolas,monospace;

  color-scheme:light;
}

/* ──────────── RESET / BASE ──────────── */
*{ box-sizing:border-box; }
html,body{ height:100%; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
html.js{ scroll-behavior:auto; }
html.no-scroll, body.no-scroll{ overflow:hidden; }

body{
  margin:0;
  font-family:var(--font-ui);
  font-size:15px;
  line-height:1.55;
  color:var(--ink);
  background:var(--bg);
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; }

:where(button,a,input,summary,textarea,select):focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

.skip-link{
  position:absolute;
  left:10px; top:10px;
  z-index:999;
  padding:10px 14px;
  border-radius:var(--r);
  border:1px solid var(--stroke);
  background:var(--surface);
  color:var(--ink);
  transform:translateY(-160%);
  transition:transform .14s ease;
  font:600 13px/1 var(--font-ui);
}
.skip-link:focus{ transform:translateY(0); }

/* ──────────── LAYOUT PRIMITIVES ──────────── */
.main{
  position:relative;
  isolation:isolate;
  padding-top:0;
}
.container{
  width:min(var(--container), calc(100% - 32px));
  margin:0 auto;
}
.container.narrow{
  width:min(var(--container-narrow), calc(100% - 32px));
}
.section{
  padding:var(--s-12) 0;
  position:relative;
  z-index:1;
}
.divider{
  width:min(var(--container), calc(100% - 32px));
  margin:0 auto;
  height:1px;
  background:var(--stroke);
}
.divider.strong{ background:var(--stroke-2); }

/* ──────────── TIPOGRAFIA ──────────── */
.h1{
  margin:0;
  font-family:var(--font-hero);
  font-size:clamp(36px, 5vw, 56px);
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.03em;
  color:var(--ink);
}
.h2{
  margin:0;
  font-family:var(--font-hero);
  font-size:clamp(24px, 3.5vw, 32px);
  font-weight:800;
  line-height:1.1;
  letter-spacing:-.02em;
  color:var(--ink);
}
.h3{
  margin:0;
  font-family:var(--font-ui);
  font-size:18px;
  font-weight:700;
  line-height:1.25;
  letter-spacing:-.01em;
  color:var(--ink);
}
.p{
  margin:var(--s-3) 0 0;
  font-family:var(--font-ui);
  font-size:15px;
  line-height:1.6;
  color:var(--ink);
}
.lead{
  margin:var(--s-4) 0 0;
  font-family:var(--font-ui);
  font-size:17px;
  font-weight:400;
  line-height:1.55;
  color:var(--ink);
}
.muted{ color:var(--muted) !important; }
.p.muted{ color:var(--muted); }

.section-kicker,
.pill{
  margin:0 0 var(--s-3);
  font-family:var(--font-ui);
  font-size:10px;
  font-weight:700;
  line-height:1.1;
  letter-spacing:.18em;
  color:var(--muted);
  text-transform:uppercase;
  background:transparent;
  border:0;
  padding:0;
  display:inline-block;
}

/* numeri tabular */
.tnum, .price-main, .plan-price,
[data-drift-number]{
  font-variant-numeric:tabular-nums;
}

/* ──────────── BOTTONI ──────────── */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--s-2);
  height:48px;
  padding:0 var(--s-6);
  border-radius:var(--r-pill);
  border:1px solid var(--stroke);
  background:var(--surface);
  color:var(--ink);
  font-family:var(--font-ui);
  font-size:14px;
  font-weight:600;
  letter-spacing:.01em;
  white-space:nowrap;
  cursor:pointer;
  transition:background .12s ease,
             border-color .12s ease,
             color .12s ease;
}
.btn:hover{
  background:var(--surface-2);
  border-color:var(--stroke-2);
}
.btn:active{ background:var(--surface-2); }
.btn-sm{
  height:36px;
  padding:0 var(--s-4);
  font-size:13px;
}
.btn-primary{
  background:var(--ink);
  color:var(--surface);
  border-color:var(--ink);
  box-shadow:var(--shadow-flat);
}
.btn-primary:hover{
  background:rgba(11,15,26,.86);
  border-color:rgba(11,15,26,.86);
}
.btn-primary:active{ background:#000; }
.btn-ghost{
  background:transparent;
  border-color:var(--stroke);
  color:var(--ink);
}
.btn-ghost:hover{
  background:var(--surface-2);
  border-color:var(--stroke-2);
}
.link-btn{
  background:transparent;
  border:0;
  padding:0;
  color:var(--ink);
  font-family:var(--font-ui);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
}
.link-btn:hover{ color:var(--accent); }

.icon-btn{
  width:36px;
  height:36px;
  border-radius:var(--r);
  border:1px solid var(--stroke);
  background:var(--surface);
  color:var(--ink);
  display:inline-grid;
  place-items:center;
  cursor:pointer;
  position:relative;
  flex:0 0 auto;
}
.icon-btn:hover{
  background:var(--surface-2);
  border-color:var(--stroke-2);
}
.icon-btn span{ display:none !important; }
/* X glyph via pseudo-elements (clean) */
.icon-btn::before,
.icon-btn::after{
  content:"";
  position:absolute;
  width:14px;
  height:1.5px;
  background:var(--ink);
  border-radius:1px;
}
.icon-btn::before{ transform:rotate(45deg); }
.icon-btn::after{ transform:rotate(-45deg); }

/* ──────────── TOPBAR ──────────── */
.topbar{
  position:fixed;
  inset:0 0 auto 0;
  height:var(--topbar-h);
  z-index:60;
  background:var(--surface);
  border-bottom:1px solid var(--stroke);
}
.topbar-inner{
  width:min(var(--container), calc(100% - 32px));
  margin:0 auto;
  height:100%;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:var(--s-6);
  min-width:0;
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:var(--s-3);
  min-width:0;
  white-space:nowrap;
}
.brand-logo{
  height:22px;
  width:auto;
  display:none; /* logo image rimosso, brand text-only */
}
.brand-word{
  font-family:var(--font-ui);
  font-size:14px;
  font-weight:600;
  letter-spacing:-.025em;
  color:currentColor;
  text-transform:none;
  line-height:1;
}
.brand-lockup{
  display:inline-flex;
  align-items:center;
  gap:3px;
  color:var(--ink);
  line-height:1;
}
.brand-tick{
  display:inline-block;
  width:12px;
  height:8px;
  color:currentColor;
  flex-shrink:0;
  margin-bottom:-1px;
}
.brand--drawer .brand-lockup{
  font-size:18px;
}
.brand--drawer .brand-word{
  font-size:18px;
}
.brand--drawer .brand-tick{
  width:16px;
  height:10px;
}
.brand-tag{
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:500;
  letter-spacing:.04em;
  color:var(--muted);
  padding:2px 6px;
  border:1px solid var(--stroke);
  border-radius:var(--r);
  text-transform:uppercase;
}
.top-nav{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:var(--s-6);
  min-width:0;
}
.top-nav a{
  font-family:var(--font-ui);
  font-size:13px;
  font-weight:500;
  color:var(--muted);
  letter-spacing:0;
  transition:color .12s ease;
}
.top-nav a:hover{ color:var(--ink); }
.topbar-actions{
  display:flex;
  align-items:center;
  gap:var(--s-2);
  flex:0 0 auto;
}
.menu-btn{
  display:none; /* visibile solo <768 via media query */
  height:36px;
  padding:0 var(--s-3);
  background:transparent;
  border:1px solid var(--stroke);
  border-radius:var(--r);
  color:var(--ink);
  font-family:var(--font-ui);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
}
.menu-btn span{ opacity:.55; margin-left:6px; }

/* ──────────── CARD BASE ──────────── */
.card{
  background:var(--surface);
  border:1px solid var(--stroke);
  border-radius:var(--r-3);
  padding:var(--s-7) var(--s-6);
  box-shadow:var(--shadow-flat);
  display:flex;
  flex-direction:column;
  gap:var(--s-3);
}
.card--recommended{
  border:2px solid var(--ink);
  background:var(--surface-2);
  padding:calc(var(--s-7) - 1px) calc(var(--s-6) - 1px);
}

/* ──────────── GRID UTILITIES ──────────── */
.grid-3{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:var(--s-4);
}
@media (max-width:980px){
  .grid-3{ grid-template-columns:1fr; }
}

/* ──────────── LISTE / TAG ──────────── */
.list,
.price-bullets{
  list-style:none;
  margin:var(--s-3) 0 0;
  padding:0;
  display:grid;
  gap:var(--s-2);
  font-family:var(--font-ui);
  font-size:13.5px;
  line-height:1.5;
  color:var(--ink);
}
.list li,
.price-bullets li{
  padding-left:var(--s-4);
  position:relative;
}
.list li::before,
.price-bullets li::before{
  content:"";
  position:absolute;
  left:0; top:9px;
  width:10px; height:1px;
  background:var(--ink);
}
.note{
  margin:var(--s-3) 0 0;
  font-family:var(--font-ui);
  font-size:11.5px;
  font-style:italic;
  line-height:1.45;
  color:var(--muted);
}

.tag{
  display:inline-flex;
  align-items:center;
  height:22px;
  padding:0 var(--s-3);
  border-radius:var(--r);
  background:var(--surface-2);
  border:1px solid var(--stroke);
  color:var(--muted);
  font-family:var(--font-ui);
  font-size:10px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.tag--recommended{
  background:var(--ink);
  color:var(--surface);
  border-color:var(--ink);
}
.tag.ghost{ background:transparent; }

.badge{
  display:inline-flex;
  align-items:center;
  height:20px;
  padding:0 var(--s-2);
  background:var(--ink);
  color:var(--surface);
  font-family:var(--font-ui);
  font-size:10px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  border-radius:var(--r);
}
.cta-badge{
  display:inline-block;
  padding:4px 10px;
  border-radius:var(--r);
  background:rgba(46,125,92,.10);
  color:var(--positive);
  border:1px solid rgba(46,125,92,.30);
  font-family:var(--font-ui);
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin:0 0 var(--s-3);
}

/* ──────────── SECTION HEAD ──────────── */
.section-head{
  margin-bottom:var(--s-6);
}
.section-head .h2{ margin-bottom:var(--s-3); }
.section-head .p{ margin-top:0; max-width:680px; }
.section-head--row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--s-4);
  flex-wrap:wrap;
}
.section-head-actions{
  display:flex;
  align-items:center;
  gap:var(--s-2);
  margin-left:auto;
}

/* ──────────── HERO (stub G2 finalizza) ──────────── */
.hero{
  padding-top:calc(var(--topbar-h) + var(--s-10));
  padding-bottom:var(--s-12);
}
.hero-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--s-7);
  max-width:var(--container-narrow);
}
.hero-copy{
  display:flex;
  flex-direction:column;
  gap:var(--s-4);
}
.hero-copy .pill{ margin-bottom:0; }
.hero-copy .lead{ margin-top:0; }
.cta-row{
  display:flex;
  gap:var(--s-3);
  flex-wrap:wrap;
  margin-top:var(--s-2);
}
.micro-note{
  margin:var(--s-3) 0 0;
  font-family:var(--font-ui);
  font-size:12px;
  color:var(--muted-2);
}

/* Media card (usata da #demo video) */
.media-card{
  position:relative;
  background:var(--surface);
  border:1px solid var(--stroke);
  border-radius:var(--r-3);
  box-shadow:var(--shadow-flat);
  overflow:hidden;
}
.media-vid{
  display:block;
  width:100%;
  height:auto;
}

/* ──────────── PROOF (hero list) ──────────── */
.proof{
  display:grid;
  gap:var(--s-2);
  padding:var(--s-4) 0 0;
  border-top:1px solid var(--stroke);
  margin-top:var(--s-3);
}
.proof-k{
  font-family:var(--font-ui);
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink);
}
.proof-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:6px;
  font-family:var(--font-ui);
  font-size:14px;
  line-height:1.5;
  color:var(--ink);
}
.proof-list li{
  padding-left:var(--s-2);
  border-left:2px solid var(--ink);
}
/* ──────────── DIFFERENZIAZIONE ──────────── */
.diff-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:var(--s-4);
  margin-top:var(--s-6);
}
@media (max-width:780px){
  .diff-grid{ grid-template-columns:1fr; }
}
.diff-card{
  background:var(--surface);
  border:1px solid var(--stroke);
  border-radius:var(--r-3);
  padding:var(--s-6);
  display:grid;
  gap:var(--s-3);
  box-shadow:var(--shadow-flat);
}
.diff-card--passive{
  background:var(--surface-2);
  border:1px dashed var(--stroke-2);
  opacity:.85;
}
.diff-card--active{
  background:var(--surface);
  border:2px solid var(--ink);
  padding:calc(var(--s-6) - 1px);
}
.diff-kicker{
  margin:0;
  font-family:var(--font-ui);
  font-size:10px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
}
.diff-card--active .diff-kicker{ color:var(--ink); }
.diff-card .h3{ margin:0; font-size:18px; }
.diff-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:8px;
  font-family:var(--font-ui);
  font-size:14px;
  line-height:1.5;
  color:var(--ink);
}
.diff-list li{
  padding-left:var(--s-4);
  position:relative;
}
.diff-list li::before{
  content:"";
  position:absolute;
  left:0; top:9px;
  width:8px; height:1px;
  background:var(--ink);
}
.diff-card--passive .diff-list li::before{
  background:var(--muted-2);
}
.diff-note{
  margin:var(--s-6) 0 0;
  text-align:center;
  font-family:var(--font-ui);
  font-size:14px;
  font-weight:600;
  font-style:italic;
  color:var(--muted);
}

/* ──────────── PIANI (stub G5 finalizza) ──────────── */
.plan{
  display:flex;
  flex-direction:column;
  gap:var(--s-3);
}
.plan-tagline{
  margin:0;
  font-family:var(--font-ui);
  font-size:13px;
  font-weight:500;
  line-height:1.45;
  color:var(--muted);
}
.price-main{
  margin:var(--s-2) 0 4px;
  font-family:var(--font-hero);
  font-size:36px;
  font-weight:800;
  letter-spacing:-.03em;
  color:var(--ink);
  display:inline-flex;
  align-items:baseline;
  gap:6px;
}
.price-sub,
.plan-per{
  font-family:var(--font-ui);
  font-size:14px;
  font-weight:500;
  color:var(--muted);
  letter-spacing:0;
}
.price-alt{
  margin:0 0 var(--s-2);
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:500;
  color:var(--muted);
  letter-spacing:.02em;
}
.card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-3);
  flex-wrap:wrap;
}
.mini-trust{
  font-family:var(--font-ui);
  font-size:11px;
  color:var(--muted-2);
  margin-top:auto;
}

/* ──────────── BETA ──────────── */
.beta-block{
  background:var(--surface);
  border:1px solid var(--stroke);
  border-left:3px solid var(--positive);
  border-radius:var(--r-3);
  padding:var(--s-7) var(--s-6);
  display:grid;
  gap:var(--s-3);
  box-shadow:var(--shadow-flat);
}
.beta-block .section-kicker{
  color:var(--positive);
  margin-bottom:0;
}
.beta-block .h2{
  margin:0;
  font-size:24px;
}
.beta-block .p{ margin:0; }
.beta-pact{
  margin-top:var(--s-3);
  padding-top:var(--s-3);
  border-top:1px dashed var(--stroke);
  font-family:var(--font-ui);
  font-size:13.5px;
  font-style:italic;
  color:var(--muted);
}

/* ──────────── FAQ (stub G6) ──────────── */
.faq{ display:grid; gap:0; }
.faq-item{
  border-bottom:1px solid var(--stroke);
  padding:var(--s-5) 0;
}
.faq-item summary{
  font-family:var(--font-ui);
  font-size:16px;
  font-weight:600;
  color:var(--ink);
  cursor:pointer;
  list-style:none;
  position:relative;
  padding-right:var(--s-6);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+";
  position:absolute;
  right:0; top:0;
  font-family:var(--font-ui);
  font-size:18px;
  font-weight:600;
  color:var(--muted);
  transition:transform .15s ease;
}
.faq-item[open] summary::after{
  transform:rotate(45deg);
  color:var(--ink);
}
.faq-body{
  margin-top:var(--s-3);
  font-family:var(--font-ui);
  font-size:15px;
  line-height:1.6;
  color:var(--muted);
}

/* ──────────── DEMO ──────────── */
.demo-video{
  margin-top:var(--s-5);
}

/* ──────────── DRAWER MOBILE ──────────── */
.drawer{
  position:fixed;
  inset:0 0 0 auto;
  width:min(320px, 86vw);
  background:var(--surface);
  border-left:1px solid var(--stroke);
  z-index:1000;
  transform:translateX(100%);
  transition:transform .22s ease;
  display:flex;
  flex-direction:column;
}
body.drawer-open .drawer,
.drawer[aria-hidden="false"]{
  transform:translateX(0);
}
.drawer-inner{
  display:flex;
  flex-direction:column;
  height:100%;
}
.drawer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-3);
  padding:var(--s-4) var(--s-5);
  border-bottom:1px solid var(--stroke);
}
.brand--drawer{
  display:flex;
  flex-direction:column;
  gap:2px;
  font-family:var(--font-ui);
}
.brand--drawer .brand-tag{
  font-size:10px;
  color:var(--muted);
}
.drawer-nav{
  flex:1;
  overflow-y:auto;
  padding:var(--s-3) var(--s-2);
  display:grid;
  gap:2px;
}
.nav-item{
  display:block;
  width:100%;
  padding:var(--s-3) var(--s-4);
  background:transparent;
  border:0;
  color:var(--ink);
  font-family:var(--font-ui);
  font-size:15px;
  font-weight:500;
  text-align:left;
  border-radius:var(--r);
  cursor:pointer;
  transition:background .12s ease;
}
.nav-item:hover{ background:var(--surface-2); }
.nav-item.is-active{
  background:var(--surface-2);
  color:var(--ink);
  font-weight:600;
}
.drawer-cta{
  padding:var(--s-4) var(--s-5);
  border-top:1px solid var(--stroke);
  display:grid;
  gap:var(--s-2);
}
.drawer-cta .btn{ width:100%; }

/* ──────────── MODAL ──────────── */
.modal-bg{
  position:fixed;
  inset:0;
  background:rgba(11,15,26,.7);
  z-index:1100;
  opacity:0;
  pointer-events:none;
  transition:opacity .14s ease;
}
.modal-bg[aria-hidden="false"],
body.modal-open .modal-bg{
  opacity:1;
  pointer-events:auto;
}
.modal{
  position:fixed;
  inset:0;
  z-index:1101;
  display:none;
  align-items:center;
  justify-content:center;
  padding:var(--s-5);
}
.modal[aria-hidden="false"],
body.modal-open .modal{
  display:flex;
}
.modal-inner{
  position:relative;
  width:100%;
  max-width:560px;
  background:var(--surface);
  border:1px solid var(--stroke);
  border-radius:var(--r-3);
  box-shadow:var(--shadow-flat);
  padding:var(--s-7);
  max-height:calc(100vh - var(--s-8));
  overflow-y:auto;
}
.modal-close{
  position:absolute;
  top:var(--s-3);
  right:var(--s-3);
}
.modal-head{
  display:grid;
  gap:var(--s-1);
  margin-bottom:var(--s-5);
  padding-right:var(--s-8);
}
.modal-kicker{
  font-family:var(--font-ui);
  font-size:10px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
}
.modal-head .h3{
  font-size:20px;
  font-weight:700;
  letter-spacing:-.01em;
}
.modal-sub{
  margin:0;
  font-family:var(--font-ui);
  font-size:13px;
  color:var(--muted);
  line-height:1.5;
}
.modal-body{
  display:grid;
  gap:var(--s-4);
}
.modal-panel{ display:grid; gap:var(--s-4); }
.panel-card{
  display:grid;
  gap:var(--s-4);
}
.panel-title{
  font-family:var(--font-ui);
  font-size:15px;
  font-weight:700;
  color:var(--ink);
}
.panel-actions{
  display:flex;
  gap:var(--s-2);
  flex-wrap:wrap;
  padding-top:var(--s-3);
  border-top:1px solid var(--stroke);
}
.modal-foot{
  margin:var(--s-2) 0 0;
  font-family:var(--font-ui);
  font-size:11px;
  color:var(--muted-2);
  text-align:center;
}

/* plan-card dentro modale (stub G7 finalizza) */
.plan-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--s-2);
}
.plan-card{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:var(--s-4);
  background:var(--surface);
  border:1px solid var(--stroke);
  border-radius:var(--r-3);
  text-align:left;
  cursor:pointer;
  font:inherit;
  transition:border-color .12s ease, background .12s ease;
}
.plan-card:hover{
  background:var(--surface-2);
  border-color:var(--stroke-2);
}
.plan-card.is-selected{
  border:2px solid var(--ink);
  background:var(--surface-2);
  padding:calc(var(--s-4) - 1px);
}
.plan-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-3);
}
.plan-top .plan-price{
  margin:0;
  font-family:var(--font-hero);
  font-size:20px;
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.plan-per{
  font-family:var(--font-ui);
  font-size:12px;
  font-weight:500;
  color:var(--muted);
  margin-left:2px;
}
.plan-desc{
  font-family:var(--font-ui);
  font-size:12px;
  color:var(--muted);
  line-height:1.5;
}

/* billing toggle (modal) */
.billing-toggle{
  display:inline-flex;
  gap:var(--s-1);
  padding:3px;
  background:var(--surface-2);
  border:1px solid var(--stroke);
  border-radius:var(--r-pill);
  width:fit-content;
}
.billing-item{
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:32px;
  padding:0 var(--s-3);
  border-radius:var(--r-pill);
  font-family:var(--font-ui);
  font-size:12px;
  font-weight:600;
  color:var(--muted);
  cursor:pointer;
  transition:background .12s ease, color .12s ease;
}
.billing-item input{ display:none; }
.billing-item:has(input:checked){
  background:var(--ink);
  color:var(--surface);
}
.billing-save{
  font-family:var(--font-ui);
  font-size:9px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--positive);
  margin-left:4px;
}
.billing-item:has(input:checked) .billing-save{
  color:#86E2BC;
}

.checkout-box{
  background:var(--surface-2);
  border:1px solid var(--stroke);
  border-radius:var(--r-3);
  padding:var(--s-4);
  display:grid;
  gap:var(--s-2);
}
.checkout-line{
  display:flex;
  justify-content:space-between;
  font-family:var(--font-ui);
  font-size:14px;
  color:var(--ink);
}
.checkout-line span{ color:var(--muted); }

/* form lead (modale) */
.lead-form{
  display:grid;
  gap:var(--s-3);
}
.field{
  display:grid;
  gap:6px;
}
.label{
  font-family:var(--font-ui);
  font-size:10px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
}
.input{
  height:44px;
  padding:0 var(--s-4);
  background:var(--surface);
  border:1px solid var(--stroke);
  border-radius:var(--r);
  color:var(--ink);
  font-family:var(--font-ui);
  font-size:14px;
}
.input:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(20,69,198,.18);
}
select.input{
  appearance:none;
  background-image:linear-gradient(45deg, transparent 50%, var(--ink) 50%),
                   linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position:calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  padding-right:var(--s-7);
}

/* ──────────── FOOTER ──────────── */
.footer{
  background:var(--surface);
  border-top:1px solid var(--stroke);
  padding:var(--s-5) 0;
  margin-top:var(--s-10);
}
.footer-inner{
  width:min(var(--container), calc(100% - 32px));
  margin:0 auto;
}
/* ──────────── REVEAL (G8: IntersectionObserver) ──────────── */
/* Reveal entry — JS attiva .is-in
   via IntersectionObserver (G8).
   Fallback no-JS o reduced-motion:
   contenuto visibile da subito. */
html:not(.js) .reveal{
  opacity:1;
  transform:none;
}
html.js .reveal{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .32s cubic-bezier(0.16, 1, 0.3, 1),
             transform .32s cubic-bezier(0.16, 1, 0.3, 1);
}
html.js .reveal.is-in{
  opacity:1;
  transform:none;
}
@media (prefers-reduced-motion: reduce){
  html.js .reveal{
    opacity:1;
    transform:none;
    transition:none;
  }
}

/* ──────────── MEDIA QUERIES ──────────── */
@media (max-width:1023px){
  .top-nav{ display:none; }
  .topbar-actions .btn-primary{ display:none; }
}
@media (max-width:768px){
  .menu-btn{ display:inline-flex; align-items:center; }
  .topbar-inner{ grid-template-columns:auto auto auto; }
  .section{ padding:var(--s-9) 0; }
  .grid-3{ grid-template-columns:1fr; }
  .hero{ padding-top:calc(var(--topbar-h) + var(--s-7)); }
}
@media (max-width:480px){
  .h1{ font-size:32px; }
  .h2{ font-size:22px; }
  .lead{ font-size:15px; }
  .container{ width:calc(100% - 24px); }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
}

/* ──────────── G4: COME FUNZIONA + INTEGRAZIONI ──────────── */

/* Steps grid (sezione #come-funziona) */
.steps-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:0;
  margin-top:var(--s-6);
}
.step{
  padding:var(--s-6) var(--s-5) 0;
  border-top:1px solid var(--ink);
  display:grid;
  gap:var(--s-3);
  align-content:start;
}
.step + .step{
  border-left:1px solid var(--stroke);
}
.step-num{
  margin:0;
  font-family:var(--font-mono);
  font-size:32px;
  font-weight:700;
  line-height:1;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
}
.step-title{
  margin:0;
  font-family:var(--font-ui);
  font-size:16px;
  font-weight:700;
  line-height:1.3;
  letter-spacing:-.01em;
  color:var(--ink);
}
.step-body{
  margin:0;
  font-family:var(--font-ui);
  font-size:13px;
  line-height:1.55;
  color:var(--muted);
}

/* Strip integrazioni (sezione #integrazioni) */
.integrations-strip{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s-3);
  align-items:center;
  justify-content:center;
  padding:var(--s-7) var(--s-6);
  background:var(--surface);
  border:1px solid var(--stroke);
  border-radius:var(--r-3);
  box-shadow:var(--shadow-flat);
  margin-top:var(--s-6);
}
.integration-chip{
  display:inline-flex;
  align-items:center;
  height:32px;
  padding:0 var(--s-4);
  border-radius:var(--r-pill);
  background:var(--surface-2);
  border:1px solid var(--stroke);
  color:var(--muted);
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.04em;
  transition:color .12s ease, border-color .12s ease;
}
.integration-chip:hover{
  color:var(--ink);
  border-color:var(--stroke-2);
}

@media (max-width:1023px){
  .steps-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .step:nth-child(2){ border-left:1px solid var(--stroke); }
  .step:nth-child(3){
    border-left:0;
    border-top:1px solid var(--ink);
  }
  .step:nth-child(4){
    border-left:1px solid var(--stroke);
    border-top:1px solid var(--ink);
  }
}
@media (max-width:768px){
  .steps-grid{
    grid-template-columns:1fr;
  }
  .step,
  .step:nth-child(2),
  .step:nth-child(3),
  .step:nth-child(4){
    border-left:0;
    border-top:1px solid var(--ink);
  }
}

/* ──────────── G5: PIANI 3-COL + VERIFY BANNER ──────────── */

/* Grid statica 3 col desktop, 1 col tablet/mobile */
.plans-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:var(--s-4);
  margin-top:var(--s-6);
  align-items:stretch;
}
@media (max-width:1023px){
  .plans-grid{
    grid-template-columns:1fr;
    max-width:520px;
    margin-left:auto;
    margin-right:auto;
  }
}

/* Plan card: stretch verticale + bottone in fondo */
.plans-grid .card.plan{
  display:flex;
  flex-direction:column;
  gap:var(--s-3);
  height:100%;
}
/* Bullet list espande, bottone push to bottom */
.plans-grid .price-bullets{
  flex:1 1 auto;
}

/* Card consigliato Pro: lift -8px solo desktop */
@media (min-width:1024px){
  .plans-grid .card.card--recommended{
    transform:translateY(-8px);
  }
}

/* Verify banner sotto la grid */
.verify-banner{
  margin-top:var(--s-7);
  padding:var(--s-5) var(--s-6);
  background:var(--surface-2);
  border:1px solid var(--stroke);
  border-radius:var(--r-3);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-4);
  flex-wrap:wrap;
}
.verify-banner-text{
  flex:1 1 320px;
  min-width:0;
}
.verify-banner-kicker{
  margin:0 0 4px;
  font-family:var(--font-ui);
  font-size:15px;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--ink);
}
.verify-banner-body{
  margin:0;
  font-family:var(--font-ui);
  font-size:13px;
  line-height:1.5;
  color:var(--muted);
}
.verify-banner .btn{
  flex:0 0 auto;
}

@media (max-width:768px){
  .verify-banner{
    flex-direction:column;
    align-items:stretch;
    text-align:left;
  }
  .verify-banner .btn{
    width:100%;
  }
}

/* ──────────── G6: STORIA + FOOTER + FIX VERIFY-BANNER MOBILE ──────────── */

/* Storia: 3 paragrafi liberi, no card box */
.story{
  display:grid;
  gap:var(--s-4);
  margin-top:var(--s-4);
}
.story-p{
  margin:0;
  font-family:var(--font-ui);
  font-size:16px;
  font-weight:400;
  line-height:1.65;
  color:var(--ink);
}

/* Sezione final CTA centrata */
.section--final{
  padding-bottom:var(--s-12);
}

/* Footer one-line */
.footer-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-5);
  flex-wrap:wrap;
  font-family:var(--font-ui);
  font-size:12px;
  color:var(--muted-2);
}
.footer-brand{
  letter-spacing:.02em;
}
.footer-links{
  display:inline-flex;
  align-items:center;
  gap:var(--s-3);
  flex-wrap:wrap;
}
.footer-links .link-btn{
  font-size:12px;
  color:var(--muted-2);
  font-weight:500;
}
.footer-links .link-btn:hover{
  color:var(--ink);
}
.footer-sep{
  color:var(--muted-2);
  opacity:.6;
}
@media (max-width:768px){
  .footer-row{
    flex-direction:column;
    align-items:flex-start;
    gap:var(--s-3);
  }
  .footer-links{
    gap:var(--s-2);
  }
}

/* FIX cosmetico verify-banner mobile (G5 follow-up):
   `.verify-banner-text` aveva flex:1 1 320px che in
   column su mobile creava ~240px di vuoto verticale.
   Su mobile flex:0 → height intrinseca. */
@media (max-width:768px){
  .verify-banner-text{
    flex:0 0 auto;
  }
}

/* G7 bugfix: `.modal-panel { display:grid }` da G1 sovrascriveva
   l'attributo [hidden] dei pannelli nascosti (specificity classe >
   UA `[hidden]{display:none}`). Senza questa riga il swap
   buy↔lead mostrava entrambi i pannelli. */
.modal-panel[hidden]{ display:none !important; }

/* ═══════════════════════════════════════════
   G9: MOBILE QA + RESPONSIVE FIXES + TOUCH
   ═══════════════════════════════════════════ */

/* Scroll-margin per smooth-scroll anchor */
.section{
  scroll-margin-top:calc(var(--topbar-h) + var(--s-3));
}

/* Scrollbar gutter — no layout shift */
html{
  scrollbar-gutter:stable;
}

/* Touch targets: ≥ 44px */
.faq-item summary{
  min-height:44px;
  display:flex;
  align-items:center;
  padding-right:var(--s-7);
}
.nav-item{
  min-height:44px;
  display:flex;
  align-items:center;
}

/* Mobile <768px */
@media (max-width:768px){
  /* Topbar 4-zone: hamburger | brand | (spacer) | actions */
  .topbar-inner{
    grid-template-columns:auto auto 1fr auto;
    gap:var(--s-3);
  }
  .menu-btn{ order:0; }
  .brand{ order:1; }
  .top-nav{ order:2; }
  .topbar-actions{ order:3; }

  /* Hero respira di più */
  .hero{
    padding-top:calc(var(--topbar-h) + var(--s-9));
  }

  /* Bottoni press-friendly */
  .btn{
    height:52px;
    padding:0 var(--s-6);
    font-size:14px;
  }
  .btn-sm{
    height:40px;
    padding:0 var(--s-4);
    font-size:13px;
  }

  /* Card piano padding ridotto */
  .plans-grid .card.plan{
    padding:var(--s-6) var(--s-5);
  }
  .plans-grid .card.card--recommended{
    padding:calc(var(--s-6) - 1px) calc(var(--s-5) - 1px);
  }

  /* Steps padding */
  .step{
    padding:var(--s-5) 0;
  }

  /* Diff cards gap più stretto */
  .diff-grid{
    gap:var(--s-3);
  }

  /* Verify banner btn full-width */
  .verify-banner .btn{
    width:100%;
    justify-content:center;
  }
}

/* Mobile <1024px: ordine plan card (Pro primo) */
@media (max-width:1023px){
  .plans-grid .plan--pro{ order:1; }
  .plans-grid .plan--start{ order:2; }
  .plans-grid .plan--studio{ order:3; }
}

/* Mobile <480px: edge cases */
@media (max-width:480px){
  .brand-tag{ display:none; }
  .topbar-actions .topbar-lead{ display:none; }
  .modal-inner{ padding:var(--s-6); }
  .section-kicker,
  .pill,
  .diff-kicker,
  .verify-banner-kicker{
    font-size:11px;
    letter-spacing:.16em;
  }
  .final-cta-actions{
    flex-direction:column;
    align-items:stretch;
  }
  .final-cta-actions .btn{
    width:100%;
  }
}

/* FIX: bottoni Final CTA con testo lungo —
   permetti wrap + altezza auto, evita overflow
   testo dai margini del bottone */
.final-cta-actions .btn{
  white-space:normal;
  text-align:center;
  line-height:1.3;
  height:auto;
  min-height:48px;
  padding-top:12px;
  padding-bottom:12px;
  max-width:100%;
}
@media (max-width:768px){
  .final-cta-actions .btn{
    min-height:52px;
  }
}

/* ═══════════════════════════════════════════
   G11: MODALI MOBILE — bottom-sheet,
   100dvh, safe-area, scroll lock iOS-safe
   ═══════════════════════════════════════════ */

/* Use dvh ovunque per evitare
   iOS address bar trick */
@supports (height: 100dvh){
  .modal-inner{
    max-height:calc(100dvh - var(--s-8));
  }
}

/* Mobile ≤768px: bottom-sheet pattern.
   - Outer padding 0
   - Modal align bottom invece di center
   - Inner attaccato al bottom, slide-up
   - Border-radius solo top
   - Safe-area iOS bottom inset */
@media (max-width:768px){
  .modal{
    padding:0;
    align-items:flex-end;
  }
  .modal-inner{
    width:100%;
    max-width:100%;
    max-height:90dvh;
    border-radius:var(--r-3) var(--r-3) 0 0;
    border-left:0;
    border-right:0;
    border-bottom:0;
    padding:var(--s-6) var(--s-5);
    padding-bottom:max(var(--s-6),
      env(safe-area-inset-bottom));
    animation:modal-slide-up .28s
      cubic-bezier(0.16, 1, 0.3, 1);
  }
  .modal-close{
    top:var(--s-3);
    right:var(--s-3);
    /* Touch target esplicito */
    width:40px;
    height:40px;
  }
  .modal-head{
    padding-right:var(--s-9);
    margin-bottom:var(--s-4);
  }
  .modal-bg{
    /* Safe-area top per non finire
       sotto la status bar quando
       tap su elementi alti */
    padding-top:env(safe-area-inset-top);
  }
  /* Touch backdrop: prevent scroll
     chain quando modale aperta */
  body.modal-open .modal-bg{
    touch-action:none;
  }
}

@keyframes modal-slide-up{
  from{
    transform:translateY(100%);
    opacity:0;
  }
  to{
    transform:translateY(0);
    opacity:1;
  }
}

@media (prefers-reduced-motion: reduce){
  .modal-inner{
    animation:none;
  }
}

/* Body scroll lock iOS-safe:
   position:fixed + width:100% per
   mantenere la posizione visivamente
   senza che Safari permetta scroll */
body.modal-open,
body.drawer-open{
  position:fixed;
  width:100%;
  overflow:hidden;
}

/* ═══════════════════════════════════════════
   G11B: SEZIONI NUOVE + CHIUSURA CLASSI G11A
   ═══════════════════════════════════════════ */

/* ─── Chiusura classi G11A ─── */

/* Plan badge "⚡ Cancelli in 1 click"
   sopra il prezzo (card Start) */
.plan-badge-cancel{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px 10px;
  background:rgba(46,125,92,0.10);
  color:var(--positive);
  border:1px solid rgba(46,125,92,0.25);
  border-radius:var(--r);
  font-family:var(--font-ui);
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  width:fit-content;
  margin:0 0 var(--s-2);
}

/* Etichette gruppi integrazioni
   ("In arrivo con la web app" / "...
   con l'app mobile") */
.integrations-label{
  margin:0 0 var(--s-3);
  text-align:center;
  font-family:var(--font-ui);
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
}
.integrations-group{
  display:grid;
  gap:var(--s-3);
}

/* Closing della sezione differenziazione
   ("Un tracker è un contatore...") */
.diff-closing{
  margin:var(--s-6) auto 0;
  max-width:680px;
  text-align:center;
  font-family:var(--font-ui);
  font-size:15px;
  line-height:1.55;
  color:var(--ink);
}

/* Esempi integrazioni mobile 1-col */
@media (max-width:768px){
  .integrations-examples{
    grid-template-columns:1fr !important;
  }
}

/* ─── Screenshot annotato ─── */

.shot-section{ background:transparent; }

.shot-figure{
  margin:var(--s-7) 0 0;
  text-align:center;
}
.shot-img{
  width:100%;
  max-width:1100px;
  height:auto;
  margin:0 auto;
  border-radius:var(--r-3);
  border:1px solid var(--stroke);
  box-shadow:var(--shadow-flat);
  background:var(--surface-2);
  display:block;
  /* Aspect ratio reale dell'asset (1920×1200, 8:5)
     — riservato sempre per evitare CLS */
  aspect-ratio:1920 / 1200;
}
/* Fallback gradient mentre l'asset carica
   o se non è ancora deployato (placeholder
   0-byte). Stesso aspect-ratio del file reale. */
.shot-img:not([src]),
.shot-img[src=""],
.shot-img[src*="metamap-cc-annotato"]:not([data-loaded]){
  background:
    linear-gradient(135deg,
      var(--surface-2) 0%,
      var(--surface) 100%);
}
.shot-caption{
  margin:var(--s-3) 0 0;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--muted);
  letter-spacing:.04em;
}

.annotation-list{
  list-style:none;
  margin:var(--s-7) auto 0;
  padding:0;
  max-width:880px;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:var(--s-4);
  counter-reset:annotation;
}
.annotation-item{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:var(--s-4);
  align-items:start;
  padding:var(--s-5);
  background:var(--surface);
  border:1px solid var(--stroke);
  border-radius:var(--r-3);
  box-shadow:var(--shadow-flat);
}
.annotation-item--lead{
  grid-column:1 / -1;
  border:2px solid var(--ink);
  background:var(--surface-2);
  padding:calc(var(--s-5) - 1px);
}
.annotation-num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--ink);
  color:var(--surface);
  font-family:var(--font-mono);
  font-size:14px;
  font-weight:700;
  flex-shrink:0;
  font-variant-numeric:tabular-nums;
}
.annotation-item--lead .annotation-num{
  width:40px;
  height:40px;
  font-size:18px;
}
.annotation-body{
  display:grid;
  gap:6px;
  min-width:0;
}
.annotation-title{
  margin:0;
  font-family:var(--font-ui);
  font-size:15px;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--ink);
  line-height:1.3;
}
.annotation-item--lead .annotation-title{
  font-size:18px;
}
.annotation-text{
  margin:0;
  font-family:var(--font-ui);
  font-size:13px;
  line-height:1.55;
  color:var(--muted);
}
.annotation-item--lead .annotation-text{
  font-size:14px;
  color:var(--ink);
}

@media (max-width:780px){
  .annotation-list{
    grid-template-columns:1fr;
  }
  .annotation-item--lead{
    grid-column:1;
  }
}

/* ─── Dentro il motore ─── */

.engine-section{ background:transparent; }
.engine-figure{
  margin:var(--s-7) auto 0;
  text-align:center;
  max-width:560px;
}
.engine-img{
  width:100%;
  max-width:560px;
  height:auto;
  margin:0 auto;
  display:block;
  background:var(--surface-2);
  border-radius:2px;
  /* Niente border — lo scontrino ha
     già l'estetica carta su fondo cream */
  /* Aspect ratio reale carta termica
     scontrino MetaMap (560×1074). Riservato
     sempre per evitare CLS. */
  aspect-ratio:560 / 1074;
}
.engine-img:not([src]),
.engine-img[src=""],
.engine-img[src*="metamap-scontrino"]:not([data-loaded]){
  background:
    linear-gradient(180deg,
      var(--surface-2) 0%,
      var(--surface) 100%);
}
.engine-caption{
  margin:var(--s-3) 0 0;
  font-family:var(--font-ui);
  font-size:13px;
  font-style:italic;
  color:var(--muted);
  line-height:1.5;
}

/* Mobile: lo scontrino occupa tutto il
   container narrow (testo Courier resta
   leggibile fino a ~340px). */
@media (max-width:768px){
  .engine-figure,
  .engine-img{
    max-width:100%;
  }
}

/* ─── Storia split layout ─── */

.story-grid{
  display:grid;
  grid-template-columns:35% 1fr;
  gap:var(--s-8);
  align-items:start;
  max-width:960px;
  margin:0 auto;
}
.story-portrait{
  margin:0;
  display:flex;
  justify-content:center;
  align-items:flex-start;
}
.story-portrait-img{
  width:240px;
  height:240px;
  border-radius:50%;
  object-fit:cover;
  background:var(--surface-2);
  border:1px solid var(--stroke);
}
.story-portrait-img:not([src]),
.story-portrait-img[src=""],
.story-portrait-img[src*="samuele-ritratto"]:not([data-loaded]){
  background:
    radial-gradient(circle at 50% 40%,
      var(--surface-2) 0%,
      var(--surface) 100%);
}
.story-text{
  display:grid;
  gap:var(--s-4);
  min-width:0;
}
.story-text .section-kicker{
  margin:0;
}
.story-text .h2{
  margin:0;
}
.story-text .p{
  margin:0;
  font-size:16px;
  line-height:1.65;
}
.story-quote{
  margin:var(--s-4) 0;
  padding:var(--s-4) 0 var(--s-4) var(--s-5);
  border-left:3px solid var(--ink);
  font-family:var(--font-hero);
  font-size:22px;
  font-weight:600;
  font-style:italic;
  line-height:1.35;
  letter-spacing:-.015em;
  color:var(--ink);
}
.story-signature{
  margin:0;
  font-family:var(--font-ui);
  font-size:13px;
  font-weight:600;
  color:var(--muted);
  letter-spacing:.01em;
}
.story-cta{
  margin-top:var(--s-3);
}

@media (max-width:780px){
  .story-grid{
    grid-template-columns:1fr;
    gap:var(--s-5);
    text-align:center;
  }
  .story-portrait{
    justify-content:center;
  }
  .story-portrait-img{
    width:160px;
    height:160px;
  }
  .story-text{
    text-align:left;
  }
  .story-quote{
    font-size:18px;
    padding:var(--s-3) 0 var(--s-3) var(--s-4);
  }
  .story-cta{
    display:flex;
    justify-content:flex-start;
  }
  .story-cta .btn{
    width:100%;
  }
}

/* ═══════════════════════════════════════════
   G11C: QUOTE FOUNDER EDITORIALI
   3 varianti: inline (hero), feature
   (differenziazione), centered (cta-finale)
   ═══════════════════════════════════════════ */

.founder-quote{
  margin:var(--s-5) 0;
  padding:0;
  display:grid;
  gap:var(--s-2);
}
.founder-quote-text{
  margin:0;
  padding:0;
  font-family:var(--font-hero);
  font-style:italic;
  color:var(--ink);
  quotes:none;
}
/* Niente quote glyph automatici
   (le virgolette sono già nel testo) */
.founder-quote-text::before,
.founder-quote-text::after{
  content:none;
}
.founder-quote-cite{
  font-family:var(--font-ui);
  font-size:13px;
  font-weight:600;
  color:var(--muted);
  font-style:normal;
  letter-spacing:.01em;
}

/* ─── Variante 1 — inline (hero) ───
   Tra proof-list e CTA. Subtle:
   italic medium, border-left ink
   stretto, lascia l'occhio scendere
   verso le CTA. */
.founder-quote--inline{
  margin:var(--s-4) 0 var(--s-3);
  padding:var(--s-3) 0 var(--s-3) var(--s-4);
  border-left:2px solid var(--ink);
}
.founder-quote--inline .founder-quote-text{
  font-size:16px;
  line-height:1.45;
  font-weight:500;
  letter-spacing:-.01em;
}
.founder-quote--inline .founder-quote-cite{
  margin-top:var(--s-2);
}

/* ─── Variante 2 — feature
   (differenziazione) ───
   Sostituisce diff-note. Più peso,
   centrata, è la chiusura del
   ragionamento "tracker vs MetaMap". */
.founder-quote--feature{
  margin:var(--s-7) auto var(--s-4);
  max-width:680px;
  padding:var(--s-5) var(--s-6);
  background:var(--surface);
  border:1px solid var(--stroke);
  border-left:3px solid var(--ink);
  border-radius:var(--r-3);
  box-shadow:var(--shadow-flat);
  text-align:left;
}
.founder-quote--feature .founder-quote-text{
  font-size:18px;
  line-height:1.5;
  font-weight:500;
  letter-spacing:-.005em;
}
.founder-quote--feature .founder-quote-cite{
  margin-top:var(--s-3);
}

/* ─── Variante 3 — centered
   (cta-finale) ───
   Sopra le CTA conclusive.
   Centrata, pull-quote-style. */
.founder-quote--centered{
  margin:var(--s-6) auto;
  max-width:560px;
  padding:var(--s-5) 0;
  text-align:center;
  border-top:1px solid var(--stroke);
  border-bottom:1px solid var(--stroke);
  display:grid;
  gap:var(--s-3);
}
.founder-quote--centered .founder-quote-text{
  font-size:20px;
  line-height:1.4;
  font-weight:500;
  letter-spacing:-.01em;
}
.founder-quote--centered .founder-quote-cite{
  margin-top:0;
}

/* Mobile responsive */
@media (max-width:768px){
  .founder-quote--inline{
    padding-left:var(--s-3);
  }
  .founder-quote--inline .founder-quote-text{
    font-size:15px;
  }
  .founder-quote--feature{
    padding:var(--s-4) var(--s-5);
  }
  .founder-quote--feature .founder-quote-text{
    font-size:16px;
  }
  .founder-quote--centered{
    max-width:100%;
  }
  .founder-quote--centered .founder-quote-text{
    font-size:18px;
  }
}