html, body { max-width: 100%; overflow-x: hidden; }

.vote-walkthrough { position:relative; margin-top:90px; padding:clamp(28px,4vw,52px); border:1px solid rgba(255,255,255,.7); border-radius:28px; background:#f7f7f1; color:#10251f; box-shadow:0 40px 100px rgba(0,0,0,.22); overflow:hidden; }
.vote-walkthrough::before { content:""; position:absolute; width:430px; height:430px; right:-180px; top:-240px; border-radius:50%; background:radial-gradient(circle,rgba(91,213,171,.34),transparent 68%); pointer-events:none; }
.walkthrough-top { position:relative; display:flex; align-items:flex-end; justify-content:space-between; gap:40px; }
.walkthrough-kicker { color:#087455; font-size:10px; font-weight:800; letter-spacing:.14em; }
.walkthrough-top h3 { margin:10px 0 8px; font-size:clamp(32px,4vw,50px); line-height:1; letter-spacing:-.055em; }
.walkthrough-top p { max-width:690px; margin:0; color:#65726d; font-size:14px; line-height:1.6; }
.step-count { color:#65726d; font-size:12px; white-space:nowrap; }
.step-count b { color:#10251f; }
.privacy-tabs { display:flex; gap:8px; margin:34px 0 24px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
.privacy-tabs::-webkit-scrollbar { display:none; }
.privacy-tab { flex:1; min-width:max-content; border:1px solid rgba(16,37,31,.13); color:#65726d; background:#fff; border-radius:12px; padding:12px 15px; font:700 11px Manrope,sans-serif; cursor:pointer; transition:.25s; }
.privacy-tab:hover { color:#10251f; border-color:rgba(8,116,85,.45); transform:translateY(-2px); }
.privacy-tab.done { background:#e9f6f0; color:#225e4d; }
.privacy-tab.active { background:#10251f; color:white; border-color:#10251f; box-shadow:0 10px 22px rgba(16,37,31,.16); }
.walkthrough-stage { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
.system-card,.ballot-journey { min-height:270px; border:1px solid rgba(16,37,31,.11); border-radius:18px; background:white; padding:22px; box-shadow:0 10px 30px rgba(16,37,31,.04); }
.ballot-journey { background:#10251f; color:white; border-color:#10251f; box-shadow:0 18px 38px rgba(16,37,31,.15); }
.system-title { display:flex; align-items:center; gap:10px; }
.system-title i { flex:none; width:9px; height:9px; border-radius:50%; background:#7cc8ec; box-shadow:0 0 0 5px rgba(124,200,236,.08); }
.ballot-journey .system-title i { border-radius:3px; background:#7fe9c2; }
.urn-card .system-title i { background:#39d59e; }
.system-title span { display:flex; flex-direction:column; gap:3px; }
.system-title b { font-size:13px; }
.system-title small { color:#7c8984; font-size:9px; }
.ballot-journey .system-title small { color:#8eaaa0; }
.system-card ul { list-style:none; padding:0; margin:25px 0 0; display:flex; flex-direction:column; gap:11px; }
.data-row { display:grid; grid-template-columns:16px 1fr auto; gap:7px; align-items:start; color:#34433e; font-size:11px; line-height:1.4; }
.data-row .yes { color:#0b966d; font-weight:800; }
.data-row .no { color:#c75d5d; font-weight:800; }
.data-row .empty { color:#78998d; }
.data-row em { font-style:normal; font-size:8px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; border-radius:999px; padding:3px 6px; color:#087455; background:#e5f6ef; }
.data-row.no-row { color:#77837f; }
.data-row.no-row em { color:#b34f4f; background:#faeaea; }
.ballot-code { min-height:85px; display:flex; flex-direction:column; justify-content:center; gap:7px; margin:20px 0 11px; padding:14px; border-radius:10px; background:rgba(0,0,0,.22); font:500 11px 'DM Mono',monospace; color:#8fd6f5; word-break:break-word; }
.ballot-code span:first-child { color:#e5f4ef; }
.signature-badge { display:none; width:max-content; max-width:100%; padding:5px 8px; border:1px solid rgba(127,233,194,.45); border-radius:999px; color:#7fe9c2; background:rgba(127,233,194,.08); font-size:8px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.signature-badge.visible { display:block; }
.ballot-journey>p { color:#82a398; font-size:10px; line-height:1.5; margin:12px 0 0; }
.walkthrough-copy { display:flex; justify-content:space-between; gap:30px; border-top:1px solid rgba(16,37,31,.12); margin-top:26px; padding-top:26px; }
.walkthrough-copy>div:first-child { max-width:800px; }
.walkthrough-copy span { color:#087455; font-size:9px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.walkthrough-copy h4 { font-size:18px; margin:7px 0; }
.walkthrough-copy p { color:#65726d; font-size:12px; line-height:1.6; margin:0; }
.walkthrough-controls { display:flex; gap:8px; align-self:flex-end; flex:none; }
.walkthrough-controls button { border:1px solid rgba(16,37,31,.16); border-radius:10px; background:white; color:#4d5b56; padding:11px 15px; font:700 11px Manrope,sans-serif; cursor:pointer; }
.walkthrough-controls button:last-child { color:white; background:#10251f; border-color:#10251f; }
.walkthrough-controls button:disabled { opacity:.35; cursor:not-allowed; }

.modal { position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:20px; opacity:0; visibility:hidden; transition:opacity .25s,visibility .25s; }
.modal.open { opacity:1; visibility:visible; }
.modal-backdrop { position:absolute; inset:0; background:rgba(5,18,14,.72); backdrop-filter:blur(12px); }
.modal-dialog { position:relative; width:min(920px,100%); max-height:calc(100vh - 40px); overflow:auto; display:grid; grid-template-columns:.82fr 1.18fr; border:1px solid rgba(255,255,255,.7); border-radius:26px; background:#f7f7f1; box-shadow:0 50px 120px rgba(0,0,0,.36); }
.modal-close { position:absolute; top:14px; right:14px; z-index:2; width:38px; height:38px; border:1px solid rgba(16,37,31,.12); border-radius:50%; background:white; color:#10251f; font-size:24px; cursor:pointer; }
.modal-copy { padding:52px 38px; background:#0a3d31; color:white; border-radius:25px 0 0 25px; }
.modal-kicker { color:#7fe9c2; font-size:10px; font-weight:800; letter-spacing:.14em; }
.modal-copy h2 { margin:18px 0; font-size:43px; line-height:1; letter-spacing:-.055em; }
.modal-copy>p { color:#b7d0c7; font-size:13px; line-height:1.65; }
.modal-proof { display:flex; gap:12px; margin-top:45px; padding-top:25px; border-top:1px solid rgba(255,255,255,.14); }
.modal-proof>span { display:grid; place-items:center; flex:none; width:33px; height:33px; border-radius:10px; background:#7fe9c2; color:#0a3d31; font-weight:800; }
.modal-proof p { margin:0; color:#aac5bb; font-size:11px; line-height:1.55; }
.modal-proof b { color:white; }
.demo-form { padding:52px 38px 32px; display:grid; grid-template-columns:1fr 1fr; gap:17px 14px; }
.demo-form label { display:flex; flex-direction:column; gap:7px; color:#34433e; font-size:11px; font-weight:800; }
.demo-form input,.demo-form select,.demo-form textarea { width:100%; border:1px solid rgba(16,37,31,.14); border-radius:10px; background:white; color:#10251f; padding:12px; font:500 13px Manrope,sans-serif; outline:none; }
.demo-form input:focus,.demo-form select:focus,.demo-form textarea:focus { border-color:#15906d; box-shadow:0 0 0 3px rgba(21,144,109,.12); }
.demo-form textarea { resize:vertical; }
.full-field { grid-column:1/-1; }
.privacy-check { flex-direction:row!important; align-items:flex-start; font-weight:500!important; line-height:1.45; }
.privacy-check input { width:16px; margin:1px 0 0; }
.demo-form>small { text-align:center; color:#7c8884; font-size:9px; }
body.modal-open { overflow:hidden; }

.pricing { background:#eef2ef; }
.pricing-heading { text-align:center; max-width:920px; margin-bottom:68px; }
.pricing-heading .lead { margin:28px auto 0; }
.offer-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; align-items:start; }
.offer-card { position:relative; display:flex; flex-direction:column; min-height:100%; padding:34px; border:1px solid rgba(16,37,31,.11); border-radius:24px; background:white; box-shadow:0 18px 55px rgba(16,37,31,.07); }
.offer-card h3 { margin:10px 0 24px; font-size:25px; line-height:1.15; letter-spacing:-.045em; }
.offer-card>p:not(.offer-name):not(.included-community):not(.offer-condition) { color:#65726d; font-size:13px; line-height:1.6; }
.offer-name { margin:0; color:#087455; font-size:10px; font-weight:800; letter-spacing:.12em; }
.offer-top { display:flex; justify-content:space-between; gap:15px; align-items:center; }
.offer-top>span { padding:6px 9px; border-radius:99px; background:#edf3f0; color:#65726d; font-size:9px; font-weight:800; }
.founder-offer { grid-column:1/-1; display:grid; grid-template-columns:1.15fr .85fr; gap:0 60px; padding:44px; overflow:hidden; background:linear-gradient(125deg,#dff7ed 0,#f8f8f2 58%,#e6f1ff 100%); border-color:rgba(40,180,137,.34); }
.founder-offer::after { content:"100"; position:absolute; right:-22px; bottom:-75px; color:rgba(16,37,31,.045); font-size:260px; line-height:1; font-weight:800; letter-spacing:-.1em; pointer-events:none; }
.founder-offer .offer-badges,.founder-offer .offer-name,.founder-offer h3,.founder-offer .offer-price,.founder-offer .included-community { grid-column:1; }
.founder-offer>ul,.founder-offer .offer-condition,.founder-offer .offer-actions { grid-column:2; }
.offer-badges { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:26px; }
.offer-badges span { border:1px solid rgba(8,116,85,.22); border-radius:999px; padding:7px 10px; background:rgba(255,255,255,.66); color:#087455; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.offer-price { display:flex; align-items:flex-end; gap:14px; margin:4px 0 18px; }
.offer-price b { font-size:clamp(48px,5vw,68px); line-height:.9; letter-spacing:-.075em; }
.offer-price span { color:#65726d; font-size:10px; line-height:1.4; }
.included-community { margin:0 0 22px; padding:12px 14px; border-radius:10px; background:#e4f7ef; color:#075f46; font-size:11px; font-weight:800; line-height:1.45; }
.founder-offer .included-community { background:rgba(255,255,255,.65); }
.offer-card ul { list-style:none; margin:15px 0 26px; padding:0; display:flex; flex-direction:column; gap:9px; }
.offer-card li { position:relative; padding-left:21px; color:#43514c; font-size:11px; line-height:1.45; }
.offer-card li::before { content:"✓"; position:absolute; left:0; color:#0a946b; font-weight:800; }
.offer-condition { margin:0 0 20px; color:#53615c; font-size:10px; line-height:1.55; }
.offer-condition b { color:#10251f; }
.offer-actions { display:flex; align-items:center; gap:20px; flex-wrap:wrap; align-self:end; }
.offer-secondary { color:#10251f; font-size:11px; font-weight:800; }
.offer-card>.button { margin-top:auto; }
.community-offer { background:#f7faf8; }
.renewal-box { margin-top:auto; padding:17px; display:grid; grid-template-columns:1fr auto; gap:7px 14px; border-radius:13px; background:#10251f; color:white; }
.renewal-box small { grid-column:1/-1; margin-bottom:5px; color:#7fe9c2; font-size:8px; font-weight:800; letter-spacing:.1em; }
.renewal-box b,.renewal-box span { font-size:10px; }
.renewal-box span { color:#b8cec6; }
.premium-card { margin-top:18px; display:grid; grid-template-columns:1fr auto; gap:50px; align-items:center; padding:32px 38px; border-radius:22px; background:#10251f; color:white; }
.premium-card h3 { margin:7px 0; font-size:26px; letter-spacing:-.04em; }
.premium-card>div>p:last-child { margin:0; max-width:620px; color:#a9c0b7; font-size:12px; line-height:1.6; }
.purchase-notes { display:grid; grid-template-columns:1fr 1fr; gap:30px; margin-top:24px; color:#65726d; font-size:10px; line-height:1.6; }
.faq-section { display:grid; grid-template-columns:.8fr 1.2fr; gap:90px; align-items:start; }
.faq-heading { position:sticky; top:120px; }
.faq-list { border-top:1px solid rgba(16,37,31,.13); }
.faq-list details { border-bottom:1px solid rgba(16,37,31,.13); }
.faq-list summary { list-style:none; display:flex; justify-content:space-between; gap:20px; padding:23px 0; cursor:pointer; font-size:15px; font-weight:800; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary span { flex:none; display:grid; place-items:center; width:25px; height:25px; border-radius:50%; background:#edf2ef; transition:transform .25s; }
.faq-list details[open] summary span { transform:rotate(45deg); background:#dff7ed; color:#087455; }
.faq-list details p { margin:-4px 45px 24px 0; color:#65726d; font-size:13px; line-height:1.7; }
.footer>p { max-width:550px; line-height:1.5; }

@media (max-width: 520px) {
  .product-stage { width: calc(100% - 28px); }
}

@media (max-width: 850px) {
  .vote-walkthrough { padding:22px 16px; }
  .walkthrough-stage { grid-template-columns:1fr; }
  .system-card,.ballot-journey { min-height:0; }
  .walkthrough-copy { flex-direction:column; }
  .walkthrough-controls { align-self:stretch; }
  .walkthrough-controls button { flex:1; }
  .modal-dialog { grid-template-columns:1fr; }
  .modal-copy { padding:42px 25px 30px; border-radius:25px 25px 0 0; }
  .modal-proof { display:none; }
  .demo-form { padding:28px 22px; }
  .offer-grid { grid-template-columns:1fr; }
  .founder-offer { grid-column:auto; display:flex; padding:30px; }
  .offer-card { padding:28px; }
  .premium-card { grid-template-columns:1fr; gap:22px; }
  .purchase-notes { grid-template-columns:1fr; gap:4px; }
  .faq-section { grid-template-columns:1fr; gap:45px; }
  .faq-heading { position:static; }
}

@media (max-width: 520px) {
  .demo-form { grid-template-columns:1fr; }
  .demo-form label { grid-column:1; }
  .modal-copy h2 { font-size:36px; }
  .offer-price b { font-size:52px; }
}

/* Topbar Actions & Menu Burger Responsive Styling */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}
.button.button-ghost.nav-login {
  background: transparent;
  color: #0b5b46;
  border: 1.5px solid rgba(11, 91, 70, 0.45);
  border-radius: 13px;
  padding: 11px 16px;
  font-size: 14px;
  font-weight: 800;
  transition: all .25s ease;
  min-height: 44px;
  text-decoration: none;
}
.button.button-ghost.nav-login span {
  font-size: 16px;
}
.button.button-ghost.nav-login:hover {
  background: rgba(11, 91, 70, 0.08);
  border-color: #0b5b46;
  transform: translateY(-2px);
}
.button.button-dark.nav-cta {
  border-radius: 13px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 800;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.mobile-only-btn {
  display: none !important;
}

/* Burger Menu Button Styling */
.menu-button {
  display: none;
  border: none;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  padding: 8px;
  border-radius: 10px;
  transition: background 0.2s ease;
}
.menu-button:hover {
  background: rgba(16, 37, 31, 0.06);
}
.menu-button .burger-icon {
  display: block;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.menu-button[aria-expanded="true"] .burger-top {
  transform: translateY(6px) rotate(45deg);
  transform-origin: center;
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.menu-button[aria-expanded="true"] .burger-mid {
  opacity: 0;
  transition: opacity 0.15s ease;
}
.menu-button[aria-expanded="true"] .burger-bot {
  transform: translateY(-6px) rotate(-45deg);
  transform-origin: center;
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (max-width: 850px) {
  .nav-actions {
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin-left: auto;
  }
  .nav-actions .nav-cta {
    display: none !important; /* Togli il tasto Richiedi una demo su mobile */
  }
  .nav-actions .nav-login {
    display: inline-flex !important;
    padding: 8px 14px !important;
    font-size: 13.5px !important;
    min-height: 38px !important;
  }
  .menu-button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-left: 4px !important;
  }
  .mobile-only-btn {
    display: none !important;
  }
  /* Fix menu burger mobile: togli il taglio overflow e posiziona il menu in assoluto sotto la barra */
  .nav {
    position: relative !important;
    overflow: visible !important;
  }
  .nav-links {
    display: none;
    position: absolute !important;
    top: calc(100% + 10px) !important;
    left: 0 !important;
    right: 0 !important;
    background: #ffffff !important;
    border: 1px solid rgba(16, 37, 31, 0.12) !important;
    border-radius: 18px !important;
    padding: 14px !important;
    box-shadow: 0 20px 50px rgba(16, 37, 31, 0.22) !important;
    z-index: 9999 !important;
  }
  .nav-links.open {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }
  .nav-links a {
    display: block !important;
    padding: 12px 16px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--ink, #10251f) !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    transition: background 0.2s ease !important;
  }
  .nav-links a:hover,
  .nav-links a:active {
    background: #f3f6f4 !important;
  }
  .nav-links .mobile-only-cta {
    display: block !important;
    margin-top: 6px !important;
    background: var(--ink, #10251f) !important;
    color: #ffffff !important;
    text-align: center !important;
  }
}

/* Barre di caricamento per rotazione automatica (screen smartphone e tab tappe del voto) */
.step, .privacy-tab { position: relative; overflow: hidden; }
.tab-loader { position: absolute; bottom: 0; left: 0; right: 0; height: 3.5px; background: rgba(255,255,255,0.18); pointer-events: none; z-index: 5; }
.privacy-tab .tab-loader { background: rgba(16,37,31,0.08); }
.step.active .tab-loader-bar { height: 100%; background: #28d39a; box-shadow: 0 0 10px rgba(40,211,154,0.85); }
.privacy-tab.active .tab-loader-bar { height: 100%; background: #28d39a; box-shadow: 0 0 8px rgba(40,211,154,0.6); }
.real-phone { position: relative; overflow: hidden; }
.phone-auto-progress { position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 50; pointer-events: none; }
.phone-auto-progress i { display: block; height: 100%; background: #28d39a; box-shadow: 0 0 8px #28d39a; }
@keyframes autoTimerLoad {
  from { width: 0%; }
  to { width: 100%; }
}

/* Mobile Privacy Diagram / Blind Signature Layout (come da input_file_0.png) */
@media (max-width: 850px) {
  .privacy-lab {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0 !important;
  }
  .privacy-lab .node {
    width: 100% !important;
    max-width: 100% !important;
    z-index: 2 !important;
    position: relative !important;
    background: #0a3d31 !important; /* Mantiene lo sfondo coprente affinché le linee tratteggiate si innestino esattamente sul bordo */
  }
  .privacy-lab .blind {
    width: 180px !important;
    height: 145px !important;
    margin: -8px auto !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: 1px dashed #55c9a2 !important;
    border-right: 1px dashed #55c9a2 !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 18px 12px !important;
    z-index: 1 !important;
  }
  .privacy-lab .blind b {
    font-size: 13.5px !important;
    letter-spacing: 0.12em !important;
    color: #fff !important;
    transform: none !important;
    margin-bottom: 5px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
  }
  .privacy-lab .blind b::before {
    content: "◆";
    color: #83e7c2;
    font-size: 13px;
  }
  .privacy-lab .blind small {
    font-size: 11.5px !important;
    color: #75ddba !important;
    transform: none !important;
    text-align: center !important;
    line-height: 1.35 !important;
  }
  .privacy-lab .blind .particle {
    display: block !important;
    position: absolute !important;
    width: 8px !important;
    height: 8px !important;
    background: #83e7c2 !important;
    transform: rotate(45deg) !important;
    animation: travel-vertical 3s infinite ease-in-out !important;
  }
  .privacy-lab .blind .p1 {
    left: -3.5px !important;
    top: 5% !important;
    animation-delay: 0.1s !important;
  }
  .privacy-lab .blind .p2 {
    left: auto !important;
    right: -3.5px !important;
    top: 15% !important;
    animation-delay: 0.8s !important;
  }
  .privacy-lab .blind .p3 {
    left: -3.5px !important;
    top: 0% !important;
    animation-delay: 1.6s !important;
  }

  /* Tappe del voto (Convocazione, Cifratura, ecc...) visibili a capo su smartphone */
  .privacy-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    overflow-x: visible !important;
    margin: 22px 0 !important;
    padding-bottom: 0 !important;
  }
  .privacy-tab {
    flex: 1 1 calc(50% - 8px) !important;
    min-width: 130px !important;
    text-align: center !important;
    padding: 11px 10px !important;
    font-size: 11.5px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

@keyframes travel-vertical {
  0% {
    top: 0%;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50% {
    top: 92%;
    opacity: 1;
  }
  51% {
    opacity: 0;
  }
  100% {
    top: 0%;
    opacity: 0;
  }
}