:root {
  --ink:#111;
  --paper:#fff;
  --muted:#626262;
  --line:rgba(17,17,17,.14);
  --soft:#f5f5f5;
}

* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); }
.hidden { display:none !important; }

.plans-page {
  width:min(1240px, calc(100% - 48px));
  margin:0 auto;
  padding:54px 0 96px;
}

.plans-hero {
  display:grid;
  grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  gap:58px;
  align-items:start;
  padding:28px 0 68px;
  border-bottom:1px solid var(--line);
}

.plans-hero-media {
  position:relative;
  overflow:hidden;
  min-height:610px;
  border-radius:30px;
  background:#111;
}

.plans-hero-media img {
  display:block;
  width:100%;
  height:100%;
  min-height:610px;
  object-fit:cover;
}

.plans-hero-generic {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:48px;
  color:#fff;
  background:
    radial-gradient(circle at 78% 18%, rgba(255,255,255,.22), transparent 23%),
    radial-gradient(circle at 18% 42%, rgba(255,255,255,.12), transparent 26%),
    linear-gradient(145deg, #050505 0%, #272727 55%, #080808 100%);
}

.plans-hero-generic::before,
.plans-hero-generic::after {
  content:"";
  position:absolute;
  border:1px solid rgba(255,255,255,.18);
  border-radius:50%;
}

.plans-hero-generic::before { width:330px; height:330px; top:-80px; right:-100px; }
.plans-hero-generic::after { width:220px; height:220px; left:-90px; bottom:90px; }

.plans-hero-generic span,
.plans-hero-generic strong,
.plans-hero-generic small { position:relative; z-index:1; }
.plans-hero-generic span { font-size:13px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }
.plans-hero-generic strong { max-width:460px; margin-top:12px; font-size:clamp(44px,5vw,72px); line-height:.94; letter-spacing:-.055em; }
.plans-hero-generic small { margin-top:20px; color:rgba(255,255,255,.72); font-size:16px; }

.plans-kicker,
.plans-section-kicker {
  font-size:12px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.plans-hero h1 {
  max-width:760px;
  margin:15px 0 22px;
  font-size:clamp(44px,6vw,78px);
  line-height:.95;
  letter-spacing:-.055em;
}

.plans-lead { max-width:690px; margin:0; color:var(--muted); font-size:18px; line-height:1.7; }

.plans-selector-block { margin-top:26px; padding-top:22px; border-top:1px solid var(--line); }
.plans-group-selector { margin-top:20px; }
.plans-selector-heading { margin:0 0 6px; font-size:13px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.plans-selector-help { margin:0 0 15px; color:var(--muted); font-size:14px; line-height:1.55; }

.plans-option-grid { display:flex; flex-wrap:wrap; gap:9px; padding:2px 5px 5px 2px; scrollbar-width:thin; }
.plans-group-grid { max-height:210px; overflow:auto; }
.plans-theme-grid { max-height:none; }

.plans-option-btn {
  min-height:42px;
  padding:0 16px;
  border:1px solid var(--ink);
  border-radius:999px;
  background:#fff;
  color:var(--ink);
  font:inherit;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .18s ease, color .18s ease, transform .18s ease, opacity .18s ease;
}
.plans-option-btn:hover { transform:translateY(-1px); }
.plans-option-btn.is-active { background:var(--ink); color:#fff; }
.plans-option-btn.has-no-data { border-style:dashed; opacity:.52; }
.plans-option-btn:focus-visible { outline:3px solid rgba(17,17,17,.18); outline-offset:3px; }

.plans-selector-status { margin:14px 0 0; color:var(--muted); font-size:13px; line-height:1.5; }
.plans-selector-status strong { color:var(--ink); }
.plans-empty { width:100%; padding:16px 18px; border:1px dashed var(--line); border-radius:16px; color:var(--muted); font-size:13px; line-height:1.5; }

.plans-starting { display:inline-flex; align-items:baseline; gap:10px; margin-top:28px; padding:15px 18px; border:1px solid var(--ink); border-radius:16px; }
.plans-starting span { font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.plans-starting strong { font-size:31px; line-height:1; }

.plans-jump { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.plans-jump a { display:inline-flex; align-items:center; min-height:48px; padding:0 21px; border:1px solid var(--ink); border-radius:999px; color:var(--ink); font-size:11px; font-weight:800; letter-spacing:.12em; text-decoration:none; text-transform:uppercase; }
.plans-jump a.is-primary { background:var(--ink); color:#fff; }


.plans-section.plans-section-independent {
  margin-top:54px;
  padding:42px 0 0;
  border:0;
  border-radius:0;
  background:transparent;
}

.plans-section-independent .plans-section-head { max-width:900px; }
.plans-section-independent .plan-card { background:#fff; }
.plans-section-independent .plan-card.plan-card-featured { background:var(--ink); }

.plans-independent-note {
  margin:24px 0 0;
  color:var(--muted);
  font-size:13px;
  line-height:1.6;
}

.plans-selected-strip { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:54px; padding:22px 24px; border:1px solid var(--line); border-radius:22px; background:var(--soft); }
.plans-selected-strip span,
.plans-selected-strip strong { display:block; }
.plans-selected-strip span { color:var(--muted); font-size:11px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.plans-selected-strip strong { margin-top:5px; font-size:clamp(24px,3.5vw,38px); line-height:1; letter-spacing:-.035em; }
.plans-selected-count { flex:0 0 auto; padding:10px 14px; border:1px solid var(--ink); border-radius:999px; color:var(--ink); font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }

.plans-section { padding-top:74px; }
.plans-section-head { max-width:820px; margin-bottom:30px; }
.plans-section-head h2 { margin:10px 0 12px; font-size:clamp(34px,4.8vw,56px); line-height:1; letter-spacing:-.045em; }
.plans-section-head p { margin:0; color:var(--muted); font-size:16px; line-height:1.65; }

.plans-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start; gap:22px; }
.plan-card { position:relative; display:flex; flex-direction:column; min-height:0; padding:22px; border:1px solid var(--line); border-radius:26px; background:#fff; }
.plan-card.is-disabled { opacity:.52; pointer-events:none; }
.plan-card-featured { background:var(--ink); color:#fff; transform:translateY(-8px); box-shadow:0 24px 54px rgba(0,0,0,.13); }
.plan-topline { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:28px; }
.plan-type { font-size:10px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.plan-badge { padding:7px 10px; border:1px solid currentColor; border-radius:999px; font-size:9px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.plan-card h3 { margin:7px 0 9px; font-size:28px; line-height:1.02; letter-spacing:-.035em; }
.plan-description { min-height:0; margin:0; color:var(--muted); font-size:14px; line-height:1.55; }

.plan-duration-emphasis { display:flex; align-items:center; gap:12px; margin-top:15px; padding:14px 0; border-top:1px solid var(--line); }
.plan-duration-icon { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; flex:0 0 38px; border-radius:50%; background:var(--ink); color:#fff; }
.plan-duration-icon svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.plan-duration-copy { display:flex; flex-direction:column; gap:3px; }
.plan-duration-copy span { color:var(--muted); font-size:9px; font-weight:800; letter-spacing:.13em; line-height:1.25; text-transform:uppercase; }
.plan-duration-copy strong { color:var(--ink); font-size:22px; line-height:1.05; letter-spacing:-.025em; }

.plan-price-wrap { display:flex; align-items:flex-end; justify-content:space-between; gap:15px; margin-top:0; padding:15px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.plan-price-label,
.plan-normal span { display:block; margin-bottom:5px; font-size:9px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.plan-price { display:block; font-size:31px; line-height:1; }
.plan-normal { color:var(--muted); text-align:right; }
.plan-normal del { font-size:14px; }

.plan-list { margin:16px 0 0; padding-left:19px; font-size:14px; line-height:1.52; }
.plan-list li + li { margin-top:3px; }
.plan-group-line { font-weight:700; }

.plan-cta { display:flex; align-items:center; justify-content:center; min-height:48px; margin-top:16px; padding:0 20px; border:1px solid var(--ink); border-radius:999px; background:var(--ink); color:#fff; font-size:11px; font-weight:800; letter-spacing:.13em; text-decoration:none; text-transform:uppercase; }

.plan-card.plan-card-featured,
.plan-card.plan-card-featured h3,
.plan-card.plan-card-featured .plan-type,
.plan-card.plan-card-featured .plan-badge,
.plan-card.plan-card-featured .plan-price-label,
.plan-card.plan-card-featured .plan-price,
.plan-card.plan-card-featured .plan-list,
.plan-card.plan-card-featured .plan-list li { color:#fff !important; }
.plan-card.plan-card-featured .plan-description,
.plan-card.plan-card-featured .plan-normal,
.plan-card.plan-card-featured .plan-normal span,
.plan-card.plan-card-featured .plan-normal del { color:rgba(255,255,255,.72) !important; }
.plan-card.plan-card-featured .plan-price-wrap,
.plan-card.plan-card-featured .plan-duration-emphasis { border-color:rgba(255,255,255,.20) !important; }
.plan-card.plan-card-featured .plan-duration-icon { background:#fff; color:#111; }
.plan-card.plan-card-featured .plan-duration-copy span { color:rgba(255,255,255,.68) !important; }
.plan-card.plan-card-featured .plan-duration-copy strong { color:#fff !important; }
.plan-card.plan-card-featured .plan-cta { border-color:#fff !important; background:#fff !important; color:#111 !important; }
.plan-card.plan-card-featured .plan-cta:hover { background:#ececec !important; }

.plans-note { display:grid; grid-template-columns:1fr auto; gap:28px; align-items:center; margin-top:34px; padding:26px 28px; border-radius:22px; background:var(--soft); }
.plans-note h3 { margin:0 0 7px; font-size:21px; }
.plans-note p { margin:0; color:var(--muted); font-size:14px; line-height:1.6; }
.plans-note a { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 20px; border:1px solid var(--ink); border-radius:999px; color:var(--ink); font-size:11px; font-weight:800; letter-spacing:.12em; text-decoration:none; text-transform:uppercase; white-space:nowrap; }
.plans-conditions { margin-top:46px; padding-top:28px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; line-height:1.65; }

@media (max-width:1000px) {
  .plans-hero { grid-template-columns:1fr; }
  .plans-hero-media,
  .plans-hero-media img { min-height:500px; }
  .plans-grid { grid-template-columns:1fr; }
  .plan-card-featured { transform:none; }
  .plans-group-grid { max-height:none; }
}

@media (max-width:650px) {
  .plans-section.plans-section-independent { margin-top:36px; padding:24px 0 0; border-radius:0; }
  .plans-page { width:min(100% - 28px,1240px); padding-top:20px; }
  .plans-hero { gap:31px; padding-top:16px; }
  .plans-hero-media,
  .plans-hero-media img { min-height:400px; }
  .plans-hero-generic { padding:30px; }
  .plans-hero h1 { font-size:42px; }
  .plans-option-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .plans-option-btn { width:100%; padding:0 10px; font-size:10px; }
  .plans-selected-strip { align-items:flex-start; flex-direction:column; margin-top:36px; }
  .plan-card { padding:22px; }
  .plan-price-wrap,
  .plans-note { align-items:flex-start; grid-template-columns:1fr; }
  .plan-price-wrap { flex-direction:column; }
  .plan-normal { text-align:left; }
  .plan-duration-copy strong { font-size:21px; }
}