/* content.css — utilities SOLO per le pagine contenuto (non usate dalla home).
   Usa i token del design system definiti in site.css (:root). */

/* skip link accessibilità */
.skip-link{position:absolute;left:-9999px;top:0;z-index:2000;background:var(--teal);color:#fff;padding:10px 16px;border-radius:0 0 10px 0;font-weight:600}
.skip-link:focus{left:0}

/* breadcrumb */
.breadcrumb{padding:96px 0 0}              /* spazio sotto la nav fixed */
.breadcrumb .container{font-size:13.5px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.breadcrumb a{color:var(--muted);transition:color .2s}
.breadcrumb a:hover{color:var(--teal)}
.breadcrumb .bc-sep{color:var(--muted-2)}
.breadcrumb [aria-current="page"]{color:var(--ink-2);font-weight:600}

/* article wrapper */
.page{overflow:hidden}

/* page hero (intro pagine contenuto) */
.page-hero{padding:34px 0 8px;position:relative}
.page-hero h1{font-size:clamp(2.1rem,4vw,3.2rem);font-weight:800;letter-spacing:-.03em;line-height:1.08}
.page-hero .lead{font-size:clamp(1.05rem,1.5vw,1.25rem);color:var(--slate);margin-top:18px;max-width:680px}
.page-hero .page-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}

/* prose: testo lungo (legali, blog, FAQ) */
.prose{max-width:760px;margin:0 auto;color:var(--ink-2);font-size:17px;line-height:1.75}
.prose h2{font-size:1.6rem;font-weight:800;letter-spacing:-.02em;margin:38px 0 12px}
.prose h3{font-size:1.22rem;font-weight:700;margin:26px 0 10px}
.prose p{margin:0 0 16px}
.prose ul,.prose ol{margin:0 0 18px;padding-left:22px}
.prose li{margin:0 0 8px}
.prose a{color:var(--accent-700);text-decoration:underline;text-underline-offset:2px}
.prose blockquote{margin:22px 0;padding:14px 20px;border-left:3px solid var(--teal);background:var(--bg-soft);border-radius:0 12px 12px 0;color:var(--ink-2);font-style:italic}
.prose time,.prose .muted{color:var(--muted);font-size:14px}

/* FAQ accordion (per FAQPage) */
.faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq-item{border:1px solid var(--line);border-radius:var(--radius);background:#fff;overflow:hidden}
.faq-q{display:flex;justify-content:space-between;align-items:center;gap:14px;width:100%;padding:18px 20px;font-weight:700;font-size:16.5px;color:var(--ink);background:none;text-align:left;cursor:pointer}
.faq-q .faq-chev{width:18px;height:18px;color:var(--muted-2);flex-shrink:0;transition:transform .3s var(--ease)}
.faq-item.open .faq-q{color:var(--teal)}
.faq-item.open .faq-q .faq-chev{transform:rotate(180deg);color:var(--teal)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s var(--ease)}
.faq-item.open .faq-a{max-height:520px}
.faq-a .faq-a-in{padding:0 20px 18px;color:var(--ink-2);line-height:1.7}

/* ===== content-page component kit (token-based, coerente col design system) ===== */
.section--surface{background:var(--bg-soft)}
.sec-head{text-align:center;max-width:720px;margin:0 auto 44px}
.sec-head h2{font-size:clamp(1.8rem,3.2vw,2.6rem);font-weight:800;letter-spacing:-.03em}
.sec-head p{color:var(--muted);margin-top:14px;font-size:1.05rem}

/* price chip */
.price-chip{display:inline-flex;align-items:center;gap:6px;background:var(--accent-soft);color:var(--accent-700);font-weight:600;font-size:14px;padding:7px 14px;border-radius:var(--pill);margin-bottom:18px}
.price-chip b{font-weight:800}

/* product hero (2 colonne) */
.prodhero{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.prodhero h1{font-size:clamp(2.1rem,4vw,3.2rem);font-weight:800;letter-spacing:-.03em;line-height:1.08}
.prodhero .lead{font-size:clamp(1.05rem,1.5vw,1.22rem);color:var(--slate);line-height:1.6;margin:16px 0 24px}
.prodhero .page-actions{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 18px}
@media(max-width:880px){.prodhero{grid-template-columns:1fr;gap:30px}}

/* media frame / placeholder */
.media-frame{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg)}
.media-frame img{display:block;width:100%;height:auto}
.media-ph{display:grid;place-items:center;aspect-ratio:16/10;border-radius:var(--radius-lg);background:linear-gradient(150deg,#EAF0FA,#DCE6F5);color:#7c8aa3;font-weight:600;text-align:center;padding:24px;box-shadow:var(--shadow-lg)}

/* griglia card */
.c-grid{display:grid;gap:22px}
.c-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.c-grid.cols-2{grid-template-columns:repeat(2,1fr)}
.c-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.c-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.c-card h4{font-size:1.12rem;font-weight:700;margin:16px 0 8px}
.c-card p{color:var(--muted);font-size:.97rem;line-height:1.6}
.c-ico{width:46px;height:46px;border-radius:13px;background:var(--accent-soft);color:var(--accent-700);display:grid;place-items:center}
.c-ico svg{width:23px;height:23px}
@media(max-width:880px){.c-grid.cols-3{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.c-grid.cols-3,.c-grid.cols-2{grid-template-columns:1fr}}

/* feature rows alternate */
.frow{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;margin:0 auto 56px;max-width:1040px}
.frow:last-child{margin-bottom:0}
.frow:nth-child(even) .frow__media{order:-1}
.frow h3{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;margin-bottom:12px}
.frow p{color:var(--slate);line-height:1.7}
@media(max-width:880px){.frow{grid-template-columns:1fr;gap:22px}.frow:nth-child(even) .frow__media{order:0}}

/* incluso + price teaser */
.included{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius-xl);padding:40px}
.bigprice{font-size:3rem;font-weight:800;color:var(--ink);letter-spacing:-.02em;line-height:1}
.bigprice small{display:block;font-size:.9rem;font-weight:500;color:var(--muted);margin-top:8px}
@media(max-width:760px){.included{grid-template-columns:1fr;gap:24px;text-align:center}}

/* tiles integrazioni */
.intgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;align-items:center}
.intgrid .tile{aspect-ratio:1;display:grid;place-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px}
.intgrid .tile img{max-width:68px;max-height:48px;width:auto;height:auto;object-fit:contain}
@media(max-width:760px){.intgrid{grid-template-columns:repeat(3,1fr)}}

/* final cta band (verde, shade su shade) */
.finalcta{background:linear-gradient(150deg,#0FA968,#0A7448);color:#fff;border-radius:var(--radius-xl);padding:54px 40px;text-align:center}
.finalcta h2{font-size:clamp(1.7rem,3vw,2.4rem);font-weight:800;letter-spacing:-.02em}
.finalcta p{color:rgba(255,255,255,.92);margin-top:12px;font-size:1.05rem}
.finalcta__cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:26px}
.finalcta .btn-teal{background:#fff;color:var(--teal-700)}
.finalcta .btn-teal:hover{background:#fff;color:var(--teal-700)}
.finalcta .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.finalcta .btn-ghost:hover{background:rgba(255,255,255,.12);color:#fff;border-color:#fff;box-shadow:none}

/* pricing cards (pagina prezzi) */
.pricing{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;align-items:stretch}
.price-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px;display:flex;flex-direction:column}
.price-card.featured{border-color:var(--teal);box-shadow:0 18px 50px rgba(15,169,104,.16);position:relative}
.price-card .pc-name{font-weight:700;font-size:1.1rem}
.price-card .pc-price{font-size:2.4rem;font-weight:800;letter-spacing:-.02em;margin:12px 0 2px;color:var(--ink)}
.price-card .pc-price small{font-size:.85rem;font-weight:500;color:var(--muted)}
.price-card .pc-feats{list-style:none;margin:18px 0 22px;padding:0;display:flex;flex-direction:column;gap:10px;flex:1}
.price-card .pc-feats li{display:flex;gap:9px;align-items:flex-start;font-size:.95rem;color:var(--ink-2)}
.price-card .pc-feats .ck{width:20px;height:20px;border-radius:50%;background:var(--accent-soft);display:grid;place-items:center;flex-shrink:0;margin-top:1px}
.price-card .pc-feats .ck svg{width:12px;height:12px;color:var(--accent-700)}
.price-card .pc-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--teal);color:#fff;font-size:12px;font-weight:700;padding:4px 12px;border-radius:99px;white-space:nowrap}
.price-note{text-align:center;color:var(--muted);font-size:14px;margin-top:20px}
/* tabella add-on / moduli prezzi */
.ptable{width:100%;border-collapse:collapse;font-size:.96rem;margin-top:8px}
.ptable th,.ptable td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line)}
.ptable th{font-weight:700;color:var(--ink)}
.ptable td:last-child,.ptable th:last-child{text-align:right;font-weight:700;color:var(--accent-700);white-space:nowrap}