/* StoreSuite – Settori */
.ss-wrap {
	--ss-accent: #0f766e;
	--ss-accent-ink: #ffffff;
	--ss-ink: #16202a;
	--ss-muted: #5b6673;
	--ss-line: #e3e7eb;
	--ss-soft: #f4f7f8;
	--ss-card: #ffffff;
	--ss-radius: 14px;
	color: var(--ss-ink);
	max-width: 1120px;
	margin: 0 auto;
	padding: 0 16px 48px;
	line-height: 1.6;
	box-sizing: border-box;
}
.ss-wrap *, .ss-wrap *::before, .ss-wrap *::after { box-sizing: border-box; }

.ss-hero { padding: 48px 0 32px; max-width: 760px; }
.ss-hero--hub { margin: 0 auto; text-align: center; }
.ss-kicker { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ss-accent); margin: 0 0 12px; }
.ss-h1 { font-size: clamp(1.75rem, 4vw, 2.6rem); line-height: 1.15; margin: 0 0 16px; color: var(--ss-ink); }
.ss-h2 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); line-height: 1.25; margin: 0 0 16px; color: var(--ss-ink); }
.ss-lead { font-size: 1.1rem; color: var(--ss-muted); margin: 0 0 24px; }
.ss-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.ss-center { text-align: center; }

.ss-btn {
	display: inline-block; padding: 12px 22px; border-radius: 999px;
	background: var(--ss-accent); color: var(--ss-accent-ink) !important;
	font-weight: 600; text-decoration: none !important; border: 2px solid var(--ss-accent);
	transition: filter .15s ease, background .15s ease;
}
.ss-btn:hover, .ss-btn:focus-visible { filter: brightness(1.08); }
.ss-btn--ghost { background: transparent; color: var(--ss-accent) !important; }
.ss-btn--ghost:hover, .ss-btn--ghost:focus-visible { background: var(--ss-soft); filter: none; }
.ss-btn--full { display: block; width: 100%; text-align: center; }
.ss-btn:focus-visible { outline: 3px solid var(--ss-ink); outline-offset: 2px; }

.ss-section { padding: 32px 0; border-top: 1px solid var(--ss-line); }

.ss-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin: 8px 0 24px; }
.ss-card--link {
	display: flex; flex-direction: column; gap: 8px; padding: 22px;
	background: var(--ss-card); border: 1px solid var(--ss-line); border-radius: var(--ss-radius);
	color: var(--ss-ink) !important; text-decoration: none !important;
	transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.ss-card--link:hover, .ss-card--link:focus-visible { border-color: var(--ss-accent); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(16, 32, 42, 0.08); }
.ss-icon { font-size: 1.8rem; line-height: 1; }
.ss-card-title { font-weight: 700; font-size: 1.05rem; }
.ss-card-text { color: var(--ss-muted); font-size: 0.95rem; flex: 1; }
.ss-card-price { font-weight: 600; color: var(--ss-accent); font-size: 0.95rem; }

.ss-problemi { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.ss-problemi li { padding: 14px 16px 14px 44px; background: var(--ss-soft); border-radius: 10px; position: relative; }
.ss-problemi li::before { content: "✕"; position: absolute; left: 16px; top: 14px; color: #b42318; font-weight: 700; }

.ss-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
.ss-tier {
	position: relative; display: flex; flex-direction: column; padding: 26px 22px;
	background: var(--ss-card); border: 1px solid var(--ss-line); border-radius: var(--ss-radius);
}
.ss-tier--top { border: 2px solid var(--ss-accent); box-shadow: 0 10px 30px rgba(15, 118, 110, 0.12); }
.ss-badge {
	position: absolute; top: -12px; left: 22px; background: var(--ss-accent); color: var(--ss-accent-ink);
	font-size: 0.75rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; letter-spacing: .03em;
}
.ss-tier-name { margin: 0 0 8px; font-size: 1.1rem; letter-spacing: .06em; color: var(--ss-ink); }
.ss-price { margin: 0; font-size: 1rem; color: var(--ss-muted); }
.ss-price strong { font-size: 2rem; color: var(--ss-ink); }
.ss-price-sub { margin: 4px 0 0; color: var(--ss-muted); font-size: 0.92rem; }
.ss-price-year { margin: 6px 0 16px; font-weight: 600; font-size: 0.92rem; }
.ss-list { list-style: none; margin: 0 0 20px; padding: 0; flex: 1; }
.ss-list li { padding: 6px 0 6px 26px; position: relative; border-bottom: 1px dashed var(--ss-line); font-size: 0.95rem; }
.ss-list li:last-child { border-bottom: 0; }
.ss-list li::before { content: "✓"; position: absolute; left: 2px; color: var(--ss-accent); font-weight: 700; }
.ss-tier-cta { display: grid; gap: 8px; }

.ss-table-wrap { overflow-x: auto; }
.ss-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.ss-table th, .ss-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--ss-line); }
.ss-table th { background: var(--ss-soft); font-weight: 600; }
.ss-table td:not(:first-child), .ss-table th:not(:first-child) { white-space: nowrap; }

.ss-regole { background: var(--ss-soft); border: 0; border-radius: var(--ss-radius); padding: 28px; margin: 32px 0; }
.ss-regole .ss-h2::before { content: "§ "; color: var(--ss-accent); }

.ss-faq { border-bottom: 1px solid var(--ss-line); padding: 12px 0; }
.ss-faq summary { cursor: pointer; font-weight: 600; }
.ss-faq p { margin: 8px 0 0; color: var(--ss-muted); }

.ss-final { text-align: center; }
.ss-back { margin-top: 20px; }
.ss-back a { color: var(--ss-muted); }

.ss-note { font-size: 0.85rem; color: var(--ss-muted); margin: 16px 0 0; }
.ss-attiv, .ss-canone { color: var(--ss-muted, #5b6673); font-weight: 400; }

@media (max-width: 860px) {
	.ss-tiers { grid-template-columns: 1fr; }
	.ss-tier--top { order: -1; }
	.ss-hero { padding-top: 32px; }
}

/* ---------- Configuratore ---------- */
.ss-presets { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 20px 0; }
.ss-preset { text-align: left; padding: 14px 16px; border: 1px solid var(--ss-line); border-radius: var(--ss-radius); background: var(--ss-card); color: var(--ss-ink); font: inherit; font-weight: 700; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.ss-preset small { font-weight: 400; color: var(--ss-muted); font-size: .85rem; }
.ss-preset:hover, .ss-preset.is-on { border-color: var(--ss-accent); box-shadow: 0 0 0 1px var(--ss-accent); }
.ss-conf { display: grid; gap: 18px; }
.ss-gruppo { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
.ss-gruppo legend { font-weight: 700; font-size: 1.05rem; margin-bottom: 8px; padding: 0; color: var(--ss-ink); }
.ss-gruppo legend span { font-weight: 400; font-size: .85rem; color: var(--ss-muted); margin-left: 6px; }
.ss-voce { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: start; padding: 14px 16px; border: 1px solid var(--ss-line); border-radius: var(--ss-radius); background: var(--ss-card); cursor: pointer; }
.ss-voce:has(input:checked) { border-color: var(--ss-accent); }
.ss-voce input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--ss-accent); }
.ss-voce-testo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ss-voce-testo strong { color: var(--ss-ink); }
.ss-voce-testo span { color: var(--ss-muted); font-size: .9rem; line-height: 1.45; }
.ss-voce-prezzo { text-align: right; white-space: nowrap; display: flex; flex-direction: column; align-items: flex-end; }
.ss-voce-prezzo s { color: var(--ss-muted); font-size: .85rem; }
.ss-voce-prezzo b { color: var(--ss-ink); }
.ss-voce.is-off { opacity: .55; cursor: default; }
.ss-voce.is-off em { color: var(--ss-muted); font-size: .85rem; }
.ss-totale { position: sticky; bottom: 12px; display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 16px; align-items: center; padding: 16px 20px; border: 1px solid var(--ss-accent); border-radius: var(--ss-radius); background: var(--ss-card); box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.ss-totale div { display: flex; flex-direction: column; }
.ss-totale span, .ss-totale small { color: var(--ss-muted); font-size: .8rem; }
.ss-totale strong { font-size: 1.35rem; color: var(--ss-ink); }
@media (max-width: 720px) {
	.ss-totale { grid-template-columns: 1fr 1fr; bottom: 8px; }
	.ss-totale .ss-btn { grid-column: 1 / -1; text-align: center; }
	.ss-voce { grid-template-columns: auto 1fr; }
	.ss-voce-prezzo { grid-column: 2; align-items: flex-start; flex-direction: row; gap: 8px; }
}

/* Demo */
.ss-grid--demo { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); align-items: stretch; }
.ss-demo { display: flex; flex-direction: column; gap: 12px; padding: 24px; background: var(--ss-card); border: 1px solid var(--ss-line); border-radius: var(--ss-radius); transition: border-color .15s ease, box-shadow .15s ease; }
.ss-demo:hover, .ss-demo:focus-within { border-color: #22c55e; box-shadow: 0 0 0 1px #22c55e; }
.ss-demo .ss-card-title { font-size: 1.4rem; line-height: 1.25; margin: 0; }
.ss-demo .ss-card-text { flex: 0; margin: 0; }
.ss-demo-top { display: flex; align-items: center; justify-content: space-between; margin: 0; }
.ss-demo-code { width: 44px; height: 44px; display: grid; place-items: center; border: 2px solid var(--ss-accent); border-radius: 6px; font: 700 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ss-accent); }
.ss-demo-live { display: inline-flex; align-items: center; gap: 8px; font: 600 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; letter-spacing: .06em; color: #15803d; }
.ss-demo-live i { width: 9px; height: 9px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,.6); animation: ss-demo-pulsa 1.8s infinite; }
@keyframes ss-demo-pulsa { 70% { box-shadow: 0 0 0 9px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }
.ss-demo-tag { display: inline-block; vertical-align: middle; padding: 3px 10px; border-radius: 999px; background: var(--ss-accent); color: var(--ss-accent-ink); font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.ss-demo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; flex: 1; }
.ss-demo-list li { position: relative; padding-left: 20px; font-size: .95rem; color: var(--ss-muted); }
.ss-demo-list li::before { content: "›"; position: absolute; left: 4px; top: 0; font-weight: 700; color: var(--ss-accent); }
.ss-demo-azioni { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 0; }
.ss-demo-soon { text-align: center; margin: 28px 0 16px; color: var(--ss-muted); }
.ss-demo-chip { display: inline-block; margin: 4px 4px 0; padding: 5px 14px; border: 1px dashed var(--ss-line); border-radius: 999px; font-size: .9rem; }
@media (prefers-reduced-motion: reduce) { .ss-demo-live i { animation: none; } }