/* Sales landing (buy/) — builds on site.css tokens */
.sale-hero{padding:64px 0 30px;position:relative;overflow:hidden}
.sale-hero::before{content:"";position:absolute;inset:-200px -200px auto auto;width:620px;height:620px;border-radius:50%;background:radial-gradient(circle,rgba(228,87,46,.18),transparent 65%);pointer-events:none}
.sale-hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;position:relative}
.sale-hero h1{font-size:clamp(30px,4.4vw,50px);line-height:1.35;margin:16px 0;letter-spacing:-.4px}
.sale-hero h1 em{font-style:normal;color:var(--brand)}
.sale-hero .lead{font-size:18px;color:var(--muted);margin:0 0 22px}
.checks{list-style:none;padding:0;margin:0 0 26px;display:grid;gap:8px}
.checks li{display:flex;gap:10px;align-items:flex-start}
.checks li::before{content:"";flex:none;width:22px;height:22px;margin-top:4px;border-radius:50%;background:var(--brand-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e4572e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/14px no-repeat}
.trust{display:flex;gap:22px;flex-wrap:wrap;margin-top:26px;color:var(--muted);font-size:14px}
.trust b{color:var(--ink)}
.fan{position:relative;height:580px}
.fan .phone{position:absolute;top:30px}
.fan .phone:nth-child(1){right:50%;transform:translateX(60%) rotate(-9deg) scale(.86);top:60px;z-index:1}
.fan .phone:nth-child(2){right:50%;transform:translateX(50%);z-index:3}
.fan .phone:nth-child(3){right:50%;transform:translateX(40%) rotate(9deg) scale(.86);top:60px;z-index:2}
.fan .phone:nth-child(1){transform:translateX(-5%) rotate(-9deg) scale(.86)}
.fan .phone:nth-child(3){transform:translateX(105%) rotate(9deg) scale(.86)}
@media (max-width:920px){.sale-hero .wrap{grid-template-columns:1fr}.fan{height:520px}}
@media (max-width:560px){.fan{height:440px}.fan .phone{width:200px}.fan .phone:nth-child(1),.fan .phone:nth-child(3){display:none}}

/* pain → gain */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:760px){.compare{grid-template-columns:1fr}}
.compare .col{border-radius:24px;padding:28px;border:1px solid var(--line);background:var(--surface)}
.compare .col.good{background:#14141a;color:#f1f0ec;border-color:#14141a}
.compare h3{margin:0 0 14px;font-size:20px}
.compare ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.compare li{display:flex;gap:10px;font-size:15px}
.compare .bad li::before{content:"✕";color:#c0392b;font-weight:700}
.compare .good li::before{content:"✓";color:#ffb59c;font-weight:700}
.compare .good li{color:#d9d9e0}

/* showcase strip: grid on desktop, swipe row on phones */
.strip{display:flex;flex-wrap:wrap;justify-content:center;gap:26px 18px;padding:10px 0 26px}
.strip a{flex:0 0 calc((100% - 72px) / 5)}
.strip a{text-decoration:none;text-align:center;color:var(--muted);font-size:14.5px;font-weight:500}
.strip .phone{width:100%;max-width:190px;margin:0 auto 12px;transition:transform .2s}
.strip a:hover .phone{transform:translateY(-4px)}
.strip a:hover{color:var(--ink)}
@media (max-width:1000px){.strip a{flex-basis:calc((100% - 36px) / 3)}}
@media (max-width:640px){
  .strip{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding:6px 2px 20px;scrollbar-width:none}
  .strip::-webkit-scrollbar{display:none}
  .strip a{flex:0 0 46%;scroll-snap-align:start}
}

/* plans */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
@media (max-width:960px){.plans{grid-template-columns:1fr;max-width:520px;margin:0 auto}}
.plan{background:var(--surface);border:1px solid var(--line);border-radius:26px;padding:30px 26px;display:flex;flex-direction:column;position:relative}
.plan.hot{border:2px solid var(--brand);box-shadow:0 20px 50px rgba(228,87,46,.16)}
.plan .badge{position:absolute;top:-14px;right:24px;background:var(--brand);color:#fff;font-size:12.5px;font-weight:700;padding:4px 14px;border-radius:999px}
.plan h3{margin:0;font-size:22px}
.plan .for{color:var(--muted);font-size:14px;margin:4px 0 18px}
.plan .price{font-size:20px;font-weight:700;margin-bottom:18px}
.plan .price small{display:block;font-size:13px;color:var(--muted);font-weight:500}
.plan ul{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:9px;font-size:14.5px;flex:1}
.plan li{display:flex;gap:9px}
.plan li::before{content:"✓";color:var(--brand);font-weight:700}
.plan li.no{color:var(--muted);opacity:.65}
.plan li.no::before{content:"–";color:var(--muted)}
.plan .btn{justify-content:center}

/* comparison table */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:20px;background:var(--surface)}
table.feat-table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:560px}
.feat-table th,.feat-table td{padding:13px 16px;border-bottom:1px solid var(--line);text-align:center}
.feat-table th:first-child,.feat-table td:first-child{text-align:right}
.feat-table thead th{background:var(--bg);font-size:15px}
.feat-table tr.group td{background:var(--bg);font-weight:700;color:var(--muted);font-size:13px}
.feat-table .y{color:var(--brand);font-weight:700}
.feat-table .n{color:var(--muted)}

/* included */
.included{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:900px){.included{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.included{grid-template-columns:1fr}}
.included div{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px}
.included b{display:block;margin-bottom:4px}
.included span{font-size:14px;color:var(--muted)}

/* contact */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:28px;background:var(--surface);border:1px solid var(--line);border-radius:30px;padding:36px}
@media (max-width:860px){.contact{grid-template-columns:1fr;padding:24px}}
.contact h2{margin:0 0 10px;font-size:clamp(24px,3vw,34px);line-height:1.4}
.contact p{color:var(--muted);margin:0 0 20px}
.ways{display:grid;gap:10px}
.ways a{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--line);border-radius:16px;text-decoration:none;background:var(--bg)}
.ways a:hover{border-color:var(--brand)}
.ways .ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand);flex:none}
.ways .ic svg{width:22px;height:22px}
.ways small{display:block;color:var(--muted);font-size:13px}
.ways strong{direction:ltr;unicode-bidi:embed}
form.lead-form{display:grid;gap:12px}
.lead-form label{font-size:14px;font-weight:500;display:grid;gap:6px}
.lead-form input,.lead-form select,.lead-form textarea{font:inherit;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--ink)}
.lead-form input:focus,.lead-form select:focus,.lead-form textarea:focus{outline:2px solid var(--brand);outline-offset:1px}
.lead-form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:520px){.lead-form .row{grid-template-columns:1fr}}
.lead-form .btn{justify-content:center}
.lead-form .note{font-size:12.5px;color:var(--muted);margin:0}

.sticky-cta{position:fixed;bottom:14px;left:50%;transform:translateX(-50%);z-index:30;display:none;box-shadow:0 10px 30px rgba(0,0,0,.25)}
@media (max-width:700px){.sticky-cta{display:inline-flex}}