/* Page-specific rules: src/pages/pricing.astro (redesign). Shared tokens and chrome live in /styles/lp/base.css. */

/* ---------- type (page overrides) ---------- */
.h1{font-size:clamp(40px,5.6vw,78px);line-height:1;letter-spacing:-.035em}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--ink);padding:calc(78px + clamp(64px,9vh,120px)) 0 clamp(48px,6vw,80px)}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 85% 0%,rgba(25,181,122,.14),transparent 60%),radial-gradient(40% 40% at 10% 100%,rgba(244,242,241,.04),transparent 70%);pointer-events:none}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:32px clamp(32px,6vw,96px);align-items:end}
.hero .eyebrow{margin-bottom:26px}
.hero .h1{margin-bottom:26px;max-width:14ch}
.hero .lede{max-width:52ch}
.hero-aside{border-left:1px solid var(--line);padding-left:clamp(20px,3vw,40px)}
.steps{display:grid;gap:0}
.step{display:grid;grid-template-columns:34px 1fr;gap:14px;padding:16px 0;border-top:1px solid var(--line);font-size:14.5px;color:var(--fg-2);line-height:1.5}
.step:first-child{border-top:0;padding-top:0}
.step i{width:28px;height:28px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:600;color:var(--fg);letter-spacing:.04em}
.step b{display:block;color:var(--fg);font-weight:500;margin-bottom:2px}
.step.live i{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.hero-note{margin-top:22px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3);display:flex;flex-wrap:wrap;gap:8px 26px}
.hero-note span{display:inline-flex;align-items:center;gap:8px}
.hero-note span::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--accent)}

/* ---------- audience toggle + plans ---------- */
.plans-sec{padding-top:clamp(24px,3vw,40px)}
.toggle-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-bottom:34px}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden}
.seg button{padding:12px 18px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2);transition:background .2s,color .2s}
.seg button[aria-pressed="true"]{background:var(--bone);color:var(--ink)}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
.plan{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:34px 32px 32px;display:flex;flex-direction:column;transition:transform .4s var(--ease),box-shadow .4s,opacity .4s,filter .4s}
.plan:hover{transform:translateY(-4px)}
.plan.dim{opacity:.38;filter:saturate(.6)}
.plan.featured{background:var(--card-2);border-color:var(--line-2);box-shadow:0 0 0 1px rgba(25,181,122,.25),0 40px 80px rgba(0,0,0,.35)}
.plan-tag{position:absolute;top:18px;right:18px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;padding:7px 10px;border-radius:3px;background:var(--accent);color:var(--on-accent);font-weight:500}
.plan-name{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-2);font-weight:500}
.plan-for{margin-top:10px;font-size:20px;font-weight:500;letter-spacing:-.02em;line-height:1.25;min-height:2.5em}
.price{display:flex;align-items:baseline;gap:8px;margin:22px 0 6px}
.price b{font-size:64px;font-weight:600;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.price small{font-size:13px;color:var(--fg-2);letter-spacing:.06em;text-transform:uppercase}
.plan-seats{font-size:13px;color:var(--fg-2);display:inline-flex;align-items:center;gap:8px}
.plan-seats::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.plan .btn{margin:26px 0 8px}
.incl{margin-top:22px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.plan ul{margin-top:8px}
.plan li{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-top:1px solid var(--line);font-size:14.5px;line-height:1.45}
.plan li i{flex:none;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:10px;font-weight:700;background:rgba(25,181,122,.16);color:var(--accent-text);margin-top:2px}
.plan li.off{color:var(--fg-3)}
.plan li.off i{background:transparent;border:1px solid var(--line-2);color:var(--fg-3)}
.plan li.addon i{background:transparent;border:1px solid var(--accent);color:var(--accent-text)}
.plan-foot{margin-top:auto;padding-top:22px;font-size:12.5px;color:var(--fg-3);line-height:1.5}

/* ---------- add-ons ---------- */
.addons{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.addon{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:32px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 32px;align-items:start}
.addon .eyebrow{margin-bottom:14px}
.addon h3{margin-bottom:10px}
.addon p{color:var(--fg-2);font-size:15px;max-width:48ch}
.addon-price{text-align:right}
.addon-price b{display:block;font-size:40px;font-weight:600;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.addon-price small{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2);margin-top:8px}
.addon-meta{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;padding-top:18px;border-top:1px solid var(--line)}
.chip{display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border:1px solid var(--line-2);border-radius:999px;font-size:12.5px;color:var(--fg)}
.chip i{width:6px;height:6px;border-radius:50%;background:var(--accent)}

/* ---------- custom sites (enterprise block) ---------- */
.custom{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);gap:clamp(32px,6vw,96px);align-items:start}
.custom-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.cg{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 26px 24px;min-height:180px;display:flex;flex-direction:column}
.cg svg{width:24px;height:24px;color:var(--accent-text);margin-bottom:auto}
.cg b{display:block;font-size:17px;font-weight:500;letter-spacing:-.01em;margin:22px 0 6px}
.cg p{font-size:14px;color:var(--fg-2);line-height:1.5}
.custom-cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:30px}
.custom-cta .small{max-width:32ch}

/* ---------- compare table ---------- */
.cmp-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}
.cmp-tabs{display:none}
.cmp-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card)}
.cmp{min-width:760px}
.cmp th,.cmp td{text-align:left;padding:16px 20px;border-top:1px solid var(--line);font-size:15px;vertical-align:middle}
.cmp thead th{background:var(--card);border-top:0;border-bottom:1px solid var(--line-2);padding:22px 20px 18px}
.cmp thead th:not(:first-child){text-align:center;width:19%}
.cmp thead b{display:block;font-size:17px;font-weight:500;letter-spacing:-.01em}
.cmp thead small{display:block;font-size:12px;color:var(--fg-2);margin-top:4px;letter-spacing:.04em;text-transform:uppercase}
.cmp thead th.hi{background:var(--card-2);box-shadow:inset 0 2px 0 var(--accent)}
.cmp td:not(:first-child){text-align:center;font-variant-numeric:tabular-nums}
.cmp td.hi{background:var(--card-2)}
.cmp tr.grp td{background:var(--ink);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3);padding:14px 20px 10px;border-top:1px solid var(--line-2)}
.cmp .yes{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(25,181,122,.16);color:var(--accent-text);font-size:11px;font-weight:700}
.cmp .no{color:var(--fg-3)}
.cmp .val{font-weight:500}
.cmp .add{color:var(--accent-text);font-weight:500}
.cmp tfoot td{padding:22px 20px 24px;border-top:1px solid var(--line-2)}
.cmp tfoot .btn{width:100%;padding:15px 12px;font-size:11.5px}
.cmp-note{margin-top:18px;font-size:13px;color:var(--fg-2)}
@media (max-width:900px){
  .cmp-tabs{display:inline-flex}
  .cmp{min-width:0}
  .cmp thead th:not(:first-child),.cmp td:not(:first-child){display:none}
  .cmp thead th.on,.cmp td.on{display:table-cell}
  .cmp thead th:not(:first-child){width:36%}
  .cmp tfoot td:first-child{display:none}
}

/* ---------- one bill ---------- */
.bill{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px)}
.bill h3{margin:18px 0 26px}
.bill-list{display:grid;gap:0}
.bill-list li{display:grid;grid-template-columns:28px 1fr;gap:14px;padding:18px 0;border-top:1px solid var(--line);font-size:15px;color:var(--fg-2);line-height:1.55}
.bill-list b{display:block;color:var(--fg);font-weight:500;font-size:16px;margin-bottom:4px}
.bill-list i{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:700;margin-top:2px}
.bill-list.bad i{border:1px solid var(--line-2);color:var(--fg-3)}
.bill-list.good i{background:rgba(25,181,122,.16);color:var(--accent-text)}
.stack-vis{margin-top:30px;display:flex;flex-wrap:wrap;gap:8px}
.stack-vis span{font-size:12px;letter-spacing:.06em;padding:8px 12px;border:1px dashed var(--line-2);border-radius:3px;color:var(--fg-3);text-decoration:line-through;text-decoration-color:rgba(230,83,49,.6)}
.stack-vis .one{border:1px solid var(--accent);color:var(--fg);text-decoration:none;background:rgba(25,181,122,.08)}

/* ---------- quotes ---------- */
.quotes{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.q{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:34px 34px 30px;display:flex;flex-direction:column}
.q-mark{font-family:var(--font-serif);font-style:italic;font-size:72px;line-height:.5;color:var(--accent);display:block;margin:12px 0 10px}
.q-text{font-size:clamp(20px,1.8vw,26px);font-weight:500;letter-spacing:-.02em;line-height:1.28;text-wrap:balance}
.q-by{display:flex;align-items:center;gap:14px;margin-top:auto;padding-top:28px}
.av{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:600;letter-spacing:.04em;background:var(--ink);color:var(--bone);flex:none}
.q-by b{display:block;font-size:14.5px;font-weight:500}
.q-by small{font-size:13px;color:var(--fg-2)}

/* ---------- faq ---------- */
.faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,96px)}
.sticky{position:sticky;top:110px}
details{border-top:1px solid var(--line)}
details:last-child{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 0;font-size:clamp(17px,1.5vw,20px);font-weight:500;letter-spacing:-.01em}
summary::-webkit-details-marker{display:none}
summary i{flex:none;width:30px;height:30px;border:1px solid var(--line-2);border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:16px;transition:transform .3s var(--ease),background .2s,color .2s}
details[open] summary i{transform:rotate(45deg);background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
details p{padding:0 56px 26px 0;color:var(--fg-2);max-width:62ch;font-size:16px}

/* ---------- responsive ---------- */
@media (max-width:1100px){
}
@media (max-width:980px){
  .hero-grid,.custom,.bill,.faq{grid-template-columns:1fr}
  .hero-aside{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:28px}
  .plans{grid-template-columns:1fr 1fr}
  .addons{grid-template-columns:1fr}
  .quotes{grid-template-columns:1fr}
  .sticky{position:static}
}
@media (max-width:700px){
  .plans{grid-template-columns:1fr}
  .custom-grid{grid-template-columns:1fr}
  .addon{grid-template-columns:1fr}
  .addon-price{text-align:left}
  .h1{font-size:clamp(38px,11vw,56px)}
  details p{padding-right:0}
}