/* Pagina confronto canone fisso vs commissioni (Treatwell/Fresha). */

.cf-bc{padding:14px 22px;font-size:.82rem;color:var(--muted-d)}
.cf-bc a{color:var(--muted-d);text-decoration:none}
.cf-bc a:hover{color:var(--orange-d)}

.cf-hero{background:var(--ink);color:#fff;text-align:center;overflow:hidden;position:relative}
.cf-hero::before{content:"";position:absolute;top:-30%;left:50%;transform:translateX(-50%);width:80%;height:120%;background:radial-gradient(50% 45% at 50% 30%,rgba(245,132,60,.2),transparent 70%);z-index:0}
.cf-hero .wrap{position:relative;z-index:1;max-width:840px}
.cf-hero h1{color:#fff}
.cf-hero h1 .o{color:var(--orange)}
.cf-hero .sub{font-size:1.16rem;color:#d9cdbd;max-width:660px;margin:20px auto 22px}

.cf-lead{max-width:760px}
.cf-lead p{font-size:1.09rem;line-height:1.75;color:var(--grey)}
.cf-lead p+p{margin-top:16px}
.cf-lead a{color:var(--orange-text);text-decoration:underline}

/* Tabella confronto */
.cf-table-wrap{overflow-x:auto;margin-top:30px}
.cf-table{width:100%;border-collapse:separate;border-spacing:0;min-width:640px}
.cf-table th,.cf-table td{padding:16px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);font-size:.98rem}
.cf-table thead th{font-family:'Archivo',sans-serif;font-size:.9rem;text-transform:uppercase;letter-spacing:.04em}
.cf-table .row-h{font-weight:700;color:var(--ink);width:32%}
.cf-table .col-them{color:var(--grey)}
.cf-table .col-us{background:var(--cream);color:var(--ink);font-weight:600}
.cf-table thead .col-us{background:var(--ink);color:#fff;border-radius:12px 12px 0 0}
.cf-table thead .col-them{color:var(--grey)}
.cf-table tbody tr:last-child td{border-bottom:none}
.cf-table .col-us::before{content:"✓ ";color:var(--orange-d);font-weight:800}

/* Esempio ipotetico */
.cf-ex{background:var(--cream)}
.cf-ex .box{max-width:760px;margin:0 auto;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:32px 30px}
.cf-ex h3{font-size:1.4rem}
.cf-ex .fig{display:flex;flex-wrap:wrap;gap:20px;margin-top:22px}
.cf-ex .fig>div{flex:1;min-width:200px;border-radius:14px;padding:20px}
.cf-ex .them{background:#f3e7dd;border:1px solid var(--line)}
.cf-ex .us{background:var(--ink);color:#fff}
.cf-ex .fig .n{font-family:'Archivo',sans-serif;font-weight:800;font-size:2rem;line-height:1;margin-top:6px}
.cf-ex .us .n{color:var(--orange)}
.cf-ex .note{font-size:.82rem;color:var(--muted-d);margin-top:16px;font-style:italic}

/* Quando conviene cosa */
.cf-when{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:14px}
@media(max-width:760px){.cf-when{grid-template-columns:1fr}}
.cf-when .c{border-radius:16px;padding:26px;border:1px solid var(--line)}
.cf-when .c.them{background:var(--card)}
.cf-when .c.us{background:var(--ink);color:#fff;border-color:var(--ink)}
.cf-when .c h3{font-size:1.15rem;margin-bottom:10px}
.cf-when .c.us h3{color:#fff}
.cf-when .c ul{list-style:none;padding:0;margin:0}
.cf-when .c li{padding:6px 0 6px 24px;position:relative;font-size:.96rem}
.cf-when .c li::before{content:"";position:absolute;left:0;top:12px;width:8px;height:8px;border-radius:50%;background:var(--orange)}
.cf-when .c.them li::before{background:#c9b594}

.cf-faq{max-width:760px;margin:0 auto}
.cf-faq details{border-bottom:1px solid var(--line);padding:16px 0}
/* Stesso indicatore "+"/"–" di tutte le altre FAQ del sito: qui era rimasto il triangolino
   nativo del browser, cioe' una sesta variante di accordion su sei blocchi FAQ. */
.cf-faq summary{position:relative;padding-right:34px;font-weight:700;cursor:pointer;color:var(--ink);
  font-size:1.04rem;list-style:none}
.cf-faq summary::-webkit-details-marker{display:none}
.cf-faq summary::after{content:"+";position:absolute;right:2px;top:-2px;color:var(--orange-d);
  font-size:1.4rem;font-weight:700;line-height:1.2}
.cf-faq details[open] summary::after{content:"\2013"}
.cf-faq details .in{margin-top:10px;color:var(--grey);line-height:1.7}