/* <style> inline */

/* Design system Viaggio Digitale — sottoinsieme necessario alla pagina AEO / GEO */
:root{
  --bg:#05161D;--surface-1:#0A2530;--surface-2:#10323F;--border:#1C4757;--border-soft:#123542;
  --text:#E6F0F4;--text-muted:#9DB6C2;--accent:#5DB2E4;--accent-hover:#86CBEF;--accent-deep:#015470;
  --accent-ink:#05161D;--tick:#2A5A6E;
  --font-sans:"IBM Plex Sans",-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --step--1:0.875rem;--step-0:1.0625rem;--step-1:1.25rem;--step-2:1.5rem;--step-3:2rem;--step-4:2.625rem;
  --space-1:0.5rem;--space-2:1rem;--space-3:1.5rem;--space-4:2.5rem;--space-5:4rem;--space-6:6.5rem;
  --container:1200px;--measure:68ch;--radius:4px;
}
:root[data-theme="light"]{
  --bg:#FFFFFF;--surface-1:#F1F6F8;--surface-2:#E3EEF2;--border:#C3D7DF;--border-soft:#D8E6EB;
  --text:#05161D;--text-muted:#42606E;--accent:#015470;--accent-hover:#02729A;--accent-deep:#015470;
  --accent-ink:#FFFFFF;--tick:#A9C6D1;
}
.vd-page,.vd-page *,.vd-page *::before,.vd-page *::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text)}
.vd-page{background:var(--bg);color:var(--text);font-family:var(--font-sans);font-size:var(--step-0);line-height:1.65;-webkit-font-smoothing:antialiased}
.vd-page [id]{scroll-margin-top:75px}
.vd-page img,.vd-page svg{max-width:100%;height:auto}
.vd-page a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:3px}
.vd-page a:hover{color:var(--accent-hover)}
.vd-page :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.vd-page h1,.vd-page h2,.vd-page h3,.vd-page h4{color:var(--text);font-family:var(--font-sans);line-height:1.15;margin:0 0 var(--space-2);letter-spacing:-0.015em}
.vd-page h1{font-size:var(--step-4);font-weight:700}
.vd-page h2{font-size:var(--step-3);font-weight:600}
.vd-page h3{font-size:var(--step-1);font-weight:600}
.vd-page h4{font-size:var(--step-0);font-weight:600}
.vd-page p,.vd-page ul.prose,.vd-page ol.prose{margin:0 0 var(--space-2);max-width:var(--measure)}
.vd-page ul.prose,.vd-page ol.prose{padding-left:1.2em}
.vd-page ul.prose li{margin-bottom:.4rem}
.vd-page .container{max-width:var(--container);margin-inline:auto;padding-inline:var(--space-3)}
.vd-page .mono{font-family:var(--font-mono);font-size:var(--step--1)}
.vd-page .muted{color:var(--text-muted)}
.vd-page figure{margin:0}
.vd-page figcaption{color:var(--text-muted);font-size:var(--step--1);margin-top:var(--space-2);max-width:36em}

/* scala di misurazione: motivo grafico del sito */
.vd-page .scale-rule{position:relative;height:14px;margin:0 0 var(--space-3);
  background:repeating-linear-gradient(90deg,var(--tick) 0 1px,transparent 1px 24px) left bottom/100% 6px no-repeat,
  repeating-linear-gradient(90deg,var(--tick) 0 1px,transparent 1px 120px) left bottom/100% 13px no-repeat,
  linear-gradient(var(--border) 0 0) left bottom/100% 1px no-repeat}
.vd-page .scale-rule::after{content:"";position:absolute;left:0;bottom:0;width:120px;height:2px;background:var(--accent)}

/* hero pagina interna */
.vd-page .page-hero{padding:var(--space-5) 0 var(--space-4)}
.vd-page .hero-grid{display:grid;grid-template-columns:7fr 5fr;gap:var(--space-5);align-items:center}
.vd-page .page-hero .lead{font-size:var(--step-1);color:var(--text-muted);max-width:38em}
.vd-page .breadcrumb{font-family:var(--font-mono);font-size:.8125rem;color:var(--text-muted);margin-bottom:var(--space-3)}
.vd-page .breadcrumb a{color:var(--text-muted);text-decoration:none}
.vd-page .breadcrumb a:hover{color:var(--accent)}
.vd-page .hero-ctas{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-3)}
.vd-page .btn{display:inline-block;padding:.85rem 1.5rem;border-radius:var(--radius);text-decoration:none;font-weight:600;font-size:var(--step--1);border:1px solid transparent;cursor:pointer;font-family:inherit}
.vd-page .btn-primary{background:var(--accent);color:var(--accent-ink)}
.vd-page .btn-primary:hover{background:var(--accent-hover);color:var(--accent-ink)}
.vd-page .btn-secondary{border-color:var(--border);color:var(--text);background:none}
.vd-page .btn-secondary:hover{border-color:var(--accent);color:var(--accent)}

/* sezioni */
.vd-page .section{padding:var(--space-5) 0}
.vd-page .section-tight{padding:var(--space-4) 0}
.vd-page .section-head{max-width:var(--measure);margin-bottom:var(--space-4)}
.vd-page .section-head p{color:var(--text-muted)}
.vd-page .definition-box{background:var(--surface-1);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:var(--radius);padding:var(--space-3) var(--space-4);max-width:var(--measure);margin-bottom:var(--space-4)}
.vd-page .definition-box p{margin:0}
.vd-page .definition-box b{color:var(--accent)}

/* diagrammi SVG */
.vd-page .diagram{display:block;width:100%;height:auto}
.vd-page .diagram .d-box{fill:var(--surface-1);stroke:var(--border);stroke-width:1}
.vd-page .diagram .d-box-accent{fill:var(--surface-2);stroke:var(--accent);stroke-width:1}
.vd-page .diagram .d-line{stroke:var(--accent);stroke-width:1.5;fill:none}
.vd-page .diagram .d-rule{stroke:var(--border-soft);stroke-width:1;stroke-dasharray:3 4}
.vd-page .diagram .d-head{fill:var(--accent);stroke:none}
.vd-page .diagram .d-lbl{font-family:var(--font-sans);font-weight:600;font-size:15px;fill:var(--text)}
.vd-page .diagram .d-lbl-sm{font-family:var(--font-sans);font-weight:600;font-size:13px;fill:var(--text)}
.vd-page .diagram .d-sub{font-family:var(--font-mono);font-size:11px;fill:var(--text-muted)}
.vd-page .diagram .d-tag{font-family:var(--font-mono);font-size:10.5px;fill:var(--accent)}

/* card */
.vd-page .card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3)}
.vd-page .card-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
.vd-page .card{background:var(--surface-1);border:1px solid var(--border-soft);border-radius:var(--radius);padding:var(--space-3)}
.vd-page .card h3{margin-bottom:var(--space-1)}
.vd-page .card p{color:var(--text-muted);font-size:var(--step--1);margin:0}
.vd-page .card ul{color:var(--text-muted);font-size:var(--step--1);margin:.75rem 0 0;padding-left:1.1em}
.vd-page .card ul li{margin-bottom:.35rem}
.vd-page .card .mono{color:var(--accent);display:block;margin-bottom:var(--space-1)}
.vd-page .card-accent{border-top:2px solid var(--accent)}
.vd-page .two-col{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5);align-items:start}

/* tabelle */
.vd-page .table-scroll{overflow-x:auto}
.vd-page .comparison-table{width:100%;border-collapse:collapse;font-size:var(--step--1)}
.vd-page .comparison-table caption{text-align:left;color:var(--text-muted);padding-bottom:var(--space-2);font-size:var(--step--1)}
.vd-page .comparison-table th,.vd-page .comparison-table td{padding:.7rem .9rem;border:1px solid var(--border-soft);text-align:left;vertical-align:top}
.vd-page .comparison-table thead th{background:var(--surface-2);font-weight:600}
.vd-page .comparison-table tbody th{font-weight:600;color:var(--text);background:var(--surface-1)}
.vd-page .comparison-table td{color:var(--text-muted)}
.vd-page .comparison-table .yes{color:var(--accent);font-weight:600}

/* fasi */
.vd-page .steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3);counter-reset:step}
.vd-page .steps li{counter-increment:step;background:var(--surface-1);border-top:2px solid var(--accent-deep);padding:var(--space-3);border-radius:0 0 var(--radius) var(--radius)}
.vd-page .steps li.is-goal{border-top-color:var(--accent)}
.vd-page .steps li::before{content:counter(step,decimal-leading-zero);font-family:var(--font-mono);color:var(--accent);font-size:var(--step--1);display:block;margin-bottom:var(--space-1)}
.vd-page .steps h3{font-size:var(--step-0)}
.vd-page .steps p{color:var(--text-muted);font-size:var(--step--1);margin:0}
.vd-page .steps .tag{display:inline-block;font-family:var(--font-mono);font-size:.75rem;color:var(--accent);border:1px solid var(--border);border-radius:var(--radius);padding:.1rem .45rem;margin-bottom:var(--space-1)}

/* callout e note */
.vd-page .callout{background:var(--surface-1);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:var(--radius);padding:var(--space-4)}
.vd-page .callout p{color:var(--text-muted)}
.vd-page .callout p:last-child{margin-bottom:0}
.vd-page .note-box{background:var(--surface-1);border:1px solid var(--border-soft);border-radius:var(--radius);padding:var(--space-2) var(--space-3);font-size:var(--step--1);color:var(--text-muted);max-width:var(--measure)}
.vd-page .full-width,.vd-page .note-box.full-width,.vd-page .callout.full-width,.vd-page .section-head.full-width,.vd-page .full-width>p,.vd-page .full-width>ul{max-width:none}

/* FAQ a tutta larghezza */
.vd-page .faq{max-width:none}
.vd-page .faq details{border-bottom:1px solid var(--border-soft)}
.vd-page .faq summary{cursor:pointer;font-weight:600;padding:var(--space-2) 2rem var(--space-2) 0;list-style:none;position:relative;color:var(--text)}
.vd-page .faq summary::-webkit-details-marker{display:none}
.vd-page .faq summary::after{content:"+";position:absolute;right:.25rem;top:50%;transform:translateY(-50%);font-family:var(--font-mono);color:var(--accent);font-size:var(--step-1)}
.vd-page .faq details[open] summary::after{content:"–"}
.vd-page .faq details p{color:var(--text-muted);font-size:var(--step--1);padding-bottom:var(--space-2);max-width:none}

/* banda CTA */
.vd-page .cta-band{background:var(--surface-2);border-block:1px solid var(--border);padding:var(--space-5) 0}
.vd-page .cta-band-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3)}
.vd-page .cta-band h2{margin-bottom:var(--space-1)}
.vd-page .cta-band p{color:var(--text-muted);margin:0}

/* form */
.vd-page .contact-grid{display:grid;grid-template-columns:2fr 3fr;gap:var(--space-5)}
.vd-page .contact-form{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2)}
.vd-page .field{display:flex;flex-direction:column;gap:.35rem}
.vd-page .field-full{grid-column:1/-1}
.vd-page .field label{font-weight:500;font-size:var(--step--1)}
.vd-page .field input,.vd-page .field select,.vd-page .field textarea{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font:inherit;font-size:var(--step--1);padding:.7rem .8rem}
.vd-page .field input:focus,.vd-page .field select:focus,.vd-page .field textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.vd-page .field input:-webkit-autofill,.vd-page .field textarea:-webkit-autofill{-webkit-text-fill-color:var(--text);-webkit-box-shadow:0 0 0 1000px var(--surface-1) inset;caret-color:var(--text);transition:background-color 9999s ease-in-out 0s}
.vd-page .consent{display:flex;gap:.6rem;align-items:flex-start;font-size:.8125rem;color:var(--text-muted)}
.vd-page .consent input{margin-top:.25rem;accent-color:var(--accent)}
.vd-page .form-note{font-size:.8125rem;color:var(--text-muted);margin-top:var(--space-1)}
.vd-page .form-status{margin-top:var(--space-2);padding:.85rem 1rem;border-radius:var(--radius);font-size:var(--step--1);font-weight:500;border:1px solid var(--border)}
.vd-page .form-status[hidden]{display:none}
.vd-page .form-status.is-ok{display:block;background:var(--surface-2);border-color:var(--accent);color:var(--text)}
.vd-page .form-status.is-ko{display:block;background:var(--surface-1);border-color:#B4553F;color:var(--text)}
.vd-page .form-status.is-wait{display:block;background:var(--surface-1);color:var(--text-muted)}

@media (prefers-reduced-motion:reduce){.vd-page *{transition:none!important;animation:none!important}}
@media (max-width:1024px){
  .vd-page .hero-grid,.vd-page .two-col,.vd-page .contact-grid{grid-template-columns:1fr}
  .vd-page .card-grid{grid-template-columns:1fr 1fr}
  .vd-page h1{font-size:var(--step-3)}
}
@media (max-width:760px){
  .vd-page .card-grid,.vd-page .card-grid-2,.vd-page .steps,.vd-page .contact-form{grid-template-columns:1fr}
  .vd-page .callout{padding:var(--space-3)}
  .vd-page .definition-box{padding:var(--space-3)}
}

/* <style> inline */

/* solo anteprima */
.vd-preview-header{border-bottom:1px solid var(--border-soft);font-family:var(--font-sans)}
.vd-preview-header .container{max-width:var(--container);margin-inline:auto;padding:1rem var(--space-3);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:center}
.vd-preview-header a{color:var(--text);font-weight:700;text-decoration:none}
.vd-preview-header .mono{font-family:var(--font-mono);font-size:.8125rem;color:var(--text-muted)}