/* IOCOS PRO: stili condivisi tra /iocos-pro (elenco) e /iocos-pro/<soluzione> (pagine dedicate). */
.pro-hero h1 .pro-word{background:linear-gradient(120deg, var(--accent), var(--accent-2) 45%, var(--teal)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.pro-chips{position:relative; z-index:2; display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:30px;}
.pro-chip{
  display:inline-flex; align-items:center; gap:8px; padding:8px 14px 8px 8px; border-radius:999px;
  background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-sm);
  text-decoration:none; color:var(--text); font-size:13.5px; font-weight:700; transition:transform .2s ease, border-color .2s ease;
}
.pro-chip:hover{transform:translateY(-2px); border-color:var(--app);}
.pro-chip .material-symbols-outlined{
  width:30px; height:30px; display:grid; place-items:center; border-radius:999px; font-size:18px;
  color:#fff; background:var(--app);
}
.pro-chip small{font-weight:500; color:var(--text-mute);}

.pro-why{display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:18px; margin-top:32px;}
.pro-why-card{padding:22px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); box-shadow:var(--shadow-sm);}
.pro-why-card .material-symbols-outlined{
  width:42px; height:42px; display:grid; place-items:center; border-radius:10px;
  color:var(--teal); background:color-mix(in srgb, var(--teal) 14%, transparent);
}
.pro-why-card h3{margin:14px 0 6px; font-size:16px; color:var(--text);}
.pro-why-card p{margin:0; font-size:14px; line-height:1.55; color:var(--text-dim);}

/* --- selettore mensile/annuale --- */
.pro-billing{display:flex; justify-content:center; margin:0 auto; padding:0 24px;}
.pro-billing-inner{
  display:inline-flex; gap:4px; padding:4px; border-radius:999px; background:var(--surface);
  border:1px solid var(--border-2); box-shadow:var(--shadow-sm);
}
.pro-billing button{
  border:none; background:transparent; cursor:pointer; padding:9px 18px; border-radius:999px;
  font:inherit; font-size:14px; font-weight:700; color:var(--text-dim);
}
.pro-billing button[aria-pressed="true"]{background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff;}
.pro-billing .save{margin-left:6px; padding:1px 7px; border-radius:999px; font-size:11px; background:color-mix(in srgb, var(--teal) 18%, transparent); color:var(--link);}
.pro-billing button[aria-pressed="true"] .save{background:rgba(255,255,255,.25); color:#fff;}

/* --- scheda prodotto --- */
.pro-app{scroll-margin-top:90px;}
.pro-app-top{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:44px; align-items:center;}
.pro-badge{
  display:inline-flex; align-items:center; gap:8px; padding:5px 12px 5px 6px; border-radius:999px;
  font-size:12.5px; font-weight:700; color:color-mix(in srgb, var(--app) 80%, #000);
  background:color-mix(in srgb, var(--app) 12%, transparent);
}
.pro-badge .material-symbols-outlined{width:26px; height:26px; display:grid; place-items:center; border-radius:999px; font-size:16px; color:#fff; background:var(--app);}
.pro-app h2{margin:14px 0 8px;}
.pro-app h2 span{color:var(--app);}
.pro-tagline{margin:0 0 12px; font-size:18px; font-weight:600; color:var(--text);}
.pro-intro{margin:0; font-size:15px; line-height:1.65; color:var(--text-dim);}
/* Riga prezzo + CTA: stessa struttura e stesse misure per ogni soluzione,
   così i pulsanti cadono sempre nello stesso punto. */
.pro-from{
  margin-top:22px; display:flex; align-items:center; justify-content:space-between; gap:16px 20px;
  padding:14px 14px 14px 20px; border-radius:var(--radius); background:var(--surface);
  border:1px solid color-mix(in srgb, var(--app) 25%, var(--border)); box-shadow:var(--shadow-sm);
}
.pro-from-price{display:flex; flex-direction:column; line-height:1.15; color:var(--text-dim); font-size:13px; white-space:nowrap;}
.pro-from-price small{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-mute);}
.pro-from-price b{font-size:26px; font-weight:800; color:var(--text);}
.pro-cta-pair{display:grid; grid-template-columns:repeat(2, 176px); gap:10px;}
/* Pulsanti pieni e outline con la stessa altezza (il pieno ha bordo trasparente) */
.pro-cta-pair .pub-cta, .pro-plan .pub-cta{
  display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box;
  min-height:44px; padding:10px 16px; border:1px solid transparent; text-align:center;
}
.pro-cta-pair .pub-cta.outline, .pro-plan .pub-cta.outline{border-color:var(--border-2); background:var(--surface);}

.pro-benefits{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; margin-top:34px;}
.pro-benefit{display:flex; gap:12px; padding:16px; border-radius:var(--radius-sm); background:var(--surface); border:1px solid var(--border);}
.pro-benefit .material-symbols-outlined{
  flex:none; width:36px; height:36px; display:grid; place-items:center; border-radius:9px; font-size:20px;
  color:var(--app); background:color-mix(in srgb, var(--app) 12%, transparent);
}
.pro-benefit h3{margin:0 0 4px; font-size:14.5px; color:var(--text);}
.pro-benefit p{margin:0; font-size:13px; line-height:1.5; color:var(--text-dim);}

/* --- anteprima interfaccia --- */
.pro-mock-wrap{position:relative;}
.pro-mock-wrap::before{
  content:''; position:absolute; inset:-18px; border-radius:30px; z-index:0;
  background:radial-gradient(circle at 70% 20%, color-mix(in srgb, var(--app) 22%, transparent), transparent 65%);
}
.pro-mock{
  position:relative; z-index:1; border-radius:18px; overflow:hidden; background:var(--surface);
  border:1px solid var(--border-2); box-shadow:var(--shadow);
}
.pm-bar{display:flex; align-items:center; gap:6px; padding:10px 14px; background:var(--surface-2); border-bottom:1px solid var(--border);}
.pm-bar i{width:9px; height:9px; border-radius:50%; background:var(--border-2);}
.pm-bar span{margin-left:8px; font-size:12px; font-weight:700; color:var(--text-dim);}
.pm-body{padding:16px; display:flex; flex-direction:column; gap:10px;}
.pm-head{display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:13.5px; font-weight:700; color:var(--text);}
.pm-pill{padding:3px 9px; border-radius:999px; font-size:11px; font-weight:700; color:color-mix(in srgb, var(--app) 80%, #000); background:color-mix(in srgb, var(--app) 12%, transparent); white-space:nowrap;}
.pm-row{display:flex; align-items:center; gap:9px; padding:9px 11px; border-radius:10px; background:var(--surface-2); font-size:12.5px; color:var(--text-dim);}
.pm-row b{color:var(--text);}
.pm-row em{margin-left:auto; font-style:normal; font-size:11px; font-weight:700; color:var(--app);}
.pm-dot{flex:none; width:8px; height:8px; border-radius:50%;}
.pm-ico{font-size:17px; color:var(--app);}
.pm-tables{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}
.pm-table{display:grid; place-items:center; height:44px; border-radius:10px; font-weight:800; font-size:14px; border:1px solid var(--border);}
.pm-table.is-free{background:var(--surface); color:var(--text-mute);}
.pm-table.is-busy{background:color-mix(in srgb, var(--app) 16%, var(--surface)); color:color-mix(in srgb, var(--app) 80%, #000);}
.pm-table.is-bill{background:color-mix(in srgb, var(--teal) 16%, var(--surface)); color:var(--link);}
.pm-agenda{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.pm-col{display:flex; flex-direction:column; gap:6px;}
.pm-col small{font-size:11px; font-weight:700; color:var(--text-mute); text-transform:uppercase; letter-spacing:.06em;}
.pm-slot{min-height:calc(var(--h) * 30px); padding:6px 8px; border-radius:8px; font-size:11.5px; font-weight:600; color:var(--text); background:color-mix(in srgb, var(--app) 14%, var(--surface)); border-left:3px solid var(--app);}
.pm-slot.is-pause{background:repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 6px, var(--surface) 6px, var(--surface) 12px); border-left-color:var(--border-2); color:var(--text-mute);}
.pm-slot.is-web{background:color-mix(in srgb, var(--accent) 14%, var(--surface)); border-left-color:var(--accent);}
.pm-slot.is-free{background:var(--surface); border:1px dashed var(--border-2); color:var(--text-mute);}
.pm-pack{display:flex; flex-direction:column; gap:8px; padding:12px; border-radius:12px; border:1px solid var(--border);}
.pm-pack > div:first-child{display:flex; justify-content:space-between; font-size:13px; color:var(--text);}
.pm-pack small{font-size:11.5px; color:var(--text-mute);}
.pm-sessions{display:flex; gap:6px;}
.pm-sessions span{flex:1; height:8px; border-radius:99px; background:var(--surface-2); border:1px solid var(--border);}
.pm-sessions span.done{background:var(--app); border-color:var(--app);}
.pm-teeth{display:grid; grid-template-columns:repeat(8,1fr); gap:5px;}
.pm-teeth span{display:grid; place-items:center; height:34px; border-radius:8px 8px 12px 12px; font-size:11px; font-weight:700; color:var(--text-mute); background:var(--surface-2); border:1px solid var(--border);}
.pm-teeth span.is-todo{background:color-mix(in srgb, var(--app) 16%, var(--surface)); color:var(--app); border-color:color-mix(in srgb, var(--app) 40%, transparent);}
.pm-teeth span.is-done{background:color-mix(in srgb, var(--teal) 16%, var(--surface)); color:var(--link);}

/* --- piani --- */
.pro-plans{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; margin-top:22px;}
.pro-plan{position:relative; display:flex; flex-direction:column; padding:24px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-sm);}
.pro-plan.is-top{border-color:color-mix(in srgb, var(--app) 50%, var(--border)); background-image:radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--app) 10%, transparent), transparent 60%);}
.pro-plan-flag{position:absolute; top:-11px; right:20px; padding:3px 10px; border-radius:999px; font-size:11px; font-weight:700; color:#fff; background:var(--app);}
.pro-plan-name{font-size:13px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--app);}
.pro-plan-for{font-size:13px; color:var(--text-mute);}
.pro-plan-price{margin:12px 0 2px; font-size:38px; font-weight:800; line-height:1; color:var(--text);}
.pro-plan-price small{font-size:14px; font-weight:500; color:var(--text-mute);}
.pro-plan-note{min-height:20px; font-size:12.5px; color:var(--text-dim);}
.pro-plan ul{list-style:none; margin:16px 0 20px; padding:0; display:flex; flex-direction:column; gap:8px;}
.pro-plan li{display:flex; gap:9px; font-size:14px; color:var(--text-dim);}
.pro-plan li::before{content:'✓'; flex:none; font-weight:800; color:var(--app);}
.pro-plan .pub-cta{margin-top:auto; justify-content:center; text-align:center;}
[data-billing="annual"] .only-monthly, [data-billing="monthly"] .only-annual{display:none;}

.pro-divider{max-width:1120px; margin:0 auto; height:1px; background:linear-gradient(90deg, transparent, var(--border-2), transparent);}

/* --- confronto e passaggi --- */
.pro-compare{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:32px;}
.pro-col{padding:26px 24px; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--surface); box-shadow:var(--shadow-sm);}
.pro-col.is-us{border-color:color-mix(in srgb, var(--accent) 45%, var(--border)); background-image:radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%);}
.pro-col h3{margin:0 0 14px; font-size:17px; color:var(--text);}
.pro-col ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px;}
.pro-col li{display:flex; gap:10px; font-size:14px; line-height:1.5; color:var(--text-dim);}
.pro-col li::before{flex:none; font-weight:700;}
.pro-col.is-them li::before{content:'—'; color:var(--text-mute);}
.pro-col.is-us li::before{content:'✓'; color:var(--teal);}
.pro-steps{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:20px; margin-top:32px; counter-reset:pro;}
.pro-step{padding:26px 22px 22px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); box-shadow:var(--shadow-sm);}
.pro-step::before{counter-increment:pro; content:counter(pro, decimal-leading-zero); font-family:var(--font-mono); font-size:12px; font-weight:700; color:var(--accent-2); letter-spacing:.05em;}
.pro-step h3{margin:10px 0 8px; font-size:16px; color:var(--text);}
.pro-step p{margin:0; font-size:13.5px; color:var(--text-dim);}

.pro-faq{margin-top:28px; display:flex; flex-direction:column; gap:10px;}
.pro-faq details{border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); padding:0 20px;}
.pro-faq summary{cursor:pointer; list-style:none; padding:16px 0; font-weight:700; font-size:15px; color:var(--text); display:flex; justify-content:space-between; gap:12px;}
.pro-faq summary::-webkit-details-marker{display:none;}
.pro-faq summary::after{content:'+'; font-size:20px; line-height:1; color:var(--accent);}
.pro-faq details[open] summary::after{content:'−';}
.pro-faq details p{margin:0 0 16px; font-size:14px; line-height:1.6; color:var(--text-dim);}

@media (max-width:920px){
  .pro-app-top{grid-template-columns:1fr; gap:34px;}
  .pro-benefits{grid-template-columns:repeat(2, minmax(0,1fr));}
}
@media (max-width:1100px) and (min-width:921px){
  .pro-from{flex-direction:column; align-items:stretch;}
  .pro-cta-pair{grid-template-columns:repeat(2, minmax(0,1fr));}
}
@media (max-width:640px){
  .pro-from{flex-direction:column; align-items:stretch; padding:16px;}
  .pro-cta-pair{grid-template-columns:repeat(2, minmax(0,1fr));}
  .pro-benefits, .pro-plans, .pro-compare{grid-template-columns:1fr;}
  .pro-chip small{display:none;}
}

.pro-plan-name{margin:0;}
.pro-h-link{color:inherit; text-decoration:none;}
.pro-h-link:hover span{text-decoration:underline; text-underline-offset:4px;}
.pro-more{margin:18px 0 0; text-align:center;}
.pro-more a{display:inline-flex; align-items:center; gap:6px; color:var(--link); font-weight:700; font-size:14px; text-decoration:none;}
.pro-more a .material-symbols-outlined{font-size:18px; transition:transform .2s ease;}
.pro-more a:hover .material-symbols-outlined{transform:translateX(4px);}

/* ===== pagina dedicata /iocos-pro/<soluzione> ===== */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
.pro-detail-logo{
  position:relative; z-index:2; display:inline-flex; align-items:center; gap:10px; margin-bottom:16px;
  padding:6px 16px 6px 6px; border-radius:999px; font-weight:800; font-size:15px; color:var(--text);
  background:var(--surface); border:1px solid color-mix(in srgb, var(--app) 35%, var(--border)); box-shadow:var(--shadow-sm);
}
.pro-detail-logo .material-symbols-outlined{width:34px; height:34px; display:grid; place-items:center; border-radius:999px; color:#fff; background:var(--app); font-size:20px;}
.pro-detail-tagline{position:relative; z-index:2; margin:0 auto 10px; max-width:640px; font-size:19px; font-weight:600; color:var(--text);}
.pro-facts{position:relative; z-index:2; list-style:none; margin:30px auto 0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:10px 22px;}
.pro-facts li{display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600; color:var(--text-dim);}
.pro-facts .material-symbols-outlined{font-size:19px; color:var(--app);}
.pro-par + .pro-par{margin-top:14px;}

.pro-audience{list-style:none; margin:24px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px;}
.pro-audience li{
  display:inline-flex; align-items:center; gap:8px; padding:9px 16px 9px 12px; border-radius:999px;
  font-size:14px; font-weight:600; color:var(--text); background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-sm);
}
.pro-audience .material-symbols-outlined{font-size:19px; color:var(--app);}

.pro-pains{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:28px;}
.pro-pain{display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch; gap:10px;}
.pro-pain > div{padding:14px 16px; border-radius:var(--radius-sm); font-size:14px; line-height:1.5;}
.pro-pain small{display:block; margin-bottom:4px; font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;}
.pro-pain-before{background:var(--surface-2); border:1px dashed var(--border-2); color:var(--text-dim);}
.pro-pain-before small{color:var(--text-mute);}
.pro-pain-after{background:color-mix(in srgb, var(--app) 9%, var(--surface)); border:1px solid color-mix(in srgb, var(--app) 30%, var(--border)); color:var(--text);}
.pro-pain-after small{color:var(--app);}
.pro-pain-arrow{align-self:center; color:var(--app); font-size:20px;}

.pro-modules{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; margin-top:32px;}
.pro-module{padding:24px; border-radius:var(--radius-sm); background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-sm);}
.pro-module-head{display:flex; align-items:center; gap:12px;}
.pro-module-head .material-symbols-outlined{
  flex:none; width:42px; height:42px; display:grid; place-items:center; border-radius:11px; font-size:22px;
  color:var(--app); background:color-mix(in srgb, var(--app) 13%, transparent);
}
.pro-module h3{margin:0; font-size:17px; color:var(--text);}
.pro-module p{margin:12px 0 12px; font-size:14px; line-height:1.6; color:var(--text-dim);}
.pro-module ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:6px 14px;}
.pro-module li{display:flex; gap:7px; font-size:13px; line-height:1.45; color:var(--text);}
.pro-module li::before{content:'✓'; flex:none; font-weight:800; color:var(--app);}

.pro-day{list-style:none; margin:30px 0 0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; position:relative;}
.pro-day::before{content:''; position:absolute; left:0; right:0; top:19px; height:2px; background:linear-gradient(90deg, var(--app), color-mix(in srgb, var(--app) 20%, transparent));}
.pro-day li{position:relative;}
.pro-day time{
  position:relative; display:inline-block; padding:8px 14px; border-radius:999px; font-family:var(--font-mono); font-weight:700; font-size:13px;
  color:#fff; background:var(--app); box-shadow:0 8px 16px -10px var(--app);
}
.pro-day p{margin:12px 0 0; font-size:14px; line-height:1.55; color:var(--text-dim);}

.pro-billing-left{justify-content:flex-start; padding:0; margin:22px 0 4px;}
.pro-table-title{margin:40px 0 14px; font-size:18px; color:var(--text);}
.pro-table-wrap{overflow-x:auto; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--surface); box-shadow:var(--shadow-sm);}
.pro-table{width:100%; border-collapse:collapse; font-size:14px; min-width:420px;}
.pro-table th, .pro-table td{padding:12px 16px; text-align:left; border-bottom:1px solid var(--border);}
.pro-table thead th{font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-mute); background:var(--surface-2);}
.pro-table thead th + th, .pro-table td{text-align:center; width:24%;}
.pro-table tbody th{font-weight:600; color:var(--text);}
.pro-table td{color:var(--text-dim);}
.pro-table tr:last-child th, .pro-table tr:last-child td{border-bottom:none;}
.pro-table-price td{font-weight:800; color:var(--text);}
.pro-yes{font-weight:800; color:var(--app);}
.pro-no{color:var(--text-mute);}
.pro-included{display:flex; gap:10px; align-items:flex-start; margin:22px 0 0; font-size:14px; line-height:1.55; color:var(--text-dim);}
.pro-included .material-symbols-outlined{color:var(--teal); font-size:20px;}

.pro-others{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; margin-top:24px;}
.pro-other{
  display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:var(--radius-sm); text-decoration:none; color:var(--text);
  background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-sm); transition:transform .2s ease, border-color .2s ease;
}
.pro-other:hover{transform:translateY(-2px); border-color:var(--app);}
.pro-other > .material-symbols-outlined:first-child{flex:none; width:40px; height:40px; display:grid; place-items:center; border-radius:11px; color:#fff; background:var(--app);}
.pro-other b{display:block; font-size:15px;}
.pro-other small{display:block; font-size:12.5px; color:var(--text-mute);}
.pro-other-go{margin-left:auto; color:var(--app); font-size:19px;}

@media (max-width:920px){
  .pro-pains, .pro-modules{grid-template-columns:1fr;}
  .pro-day{grid-template-columns:1fr 1fr; row-gap:24px;}
  .pro-day::before{display:none;}
  .pro-others{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .pro-pain{grid-template-columns:1fr; gap:6px;}
  .pro-pain-arrow{transform:rotate(90deg); justify-self:center;}
  .pro-module ul{grid-template-columns:1fr;}
  .pro-day{grid-template-columns:1fr;}
  .pro-table th, .pro-table td{padding:10px 10px;}
}
.pro-included a{color:var(--link); font-weight:600;}
@media (max-width:420px){
  .pro-cta-pair{grid-template-columns:1fr;}
}
.pro-from-amount{display:flex; align-items:baseline; gap:5px;}