/* Offer page styling. Uses only the tokens already declared in base.css so the
   offer pages read as the same company as the niche pages. Per niche accent is
   inherited from the niche page's own :root override. */

/* ---- video slot ---- */
.vsl{
  position:relative;aspect-ratio:16/9;width:100%;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  overflow:hidden;display:grid;place-items:center;
}
.vsl .poster{
  position:absolute;inset:0;display:grid;place-items:center;gap:16px;
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb,var(--accent) 9%,transparent), transparent 62%),
    var(--panel);
  text-align:center;padding:24px;
}
.vsl .play{
  width:66px;height:66px;border-radius:50%;
  background:color-mix(in srgb,var(--accent) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 42%,transparent);
  display:grid;place-items:center;
}
.vsl .play svg{width:24px;height:24px;fill:var(--accent);margin-left:3px}
.vsl .lbl{font-family:var(--mono);font-size:.74rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dimmer)}
.vsl .say{color:var(--dim);font-size:.95rem;max-width:44ch;line-height:1.55}
/* the real embed drops in here and covers the poster */
.vsl iframe,.vsl video{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---- incremental buildup ---- */
.steps{display:grid;gap:14px;margin-top:8px}
.step{
  display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:start;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 22px;transition:border-color .15s;
}
.step:hover{border-color:color-mix(in srgb,var(--accent) 38%,transparent)}
.step .n{
  font-family:var(--mono);font-size:.74rem;color:var(--dimmer);
  border:1px solid var(--line);border-radius:5px;padding:4px 8px;margin-top:2px;
}
.step h3{margin-bottom:5px}
.step p{color:var(--dim);font-size:.93rem;line-height:1.55;max-width:60ch}
.step .amt{
  font-family:var(--mono);font-weight:640;font-size:1.02rem;white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.step .amt small{display:block;font-size:.72rem;color:var(--dimmer);font-weight:450;text-align:right}
@media(max-width:680px){
  .step{grid-template-columns:auto 1fr;gap:12px}
  .step .amt{grid-column:2;text-align:left;margin-top:6px}
  .step .amt small{text-align:left}
}
.step-note{
  margin-top:20px;padding-left:15px;
  border-left:2px solid color-mix(in srgb,var(--accent) 40%,transparent);
  color:var(--dim);font-size:.96rem;line-height:1.6;max-width:60ch;
}

/* ---- tier sections ----
   One full width section per tier, read top to bottom. The buyer is walked up
   the ladder rather than asked to compare four cards side by side. */
.tier-sec{padding:66px 0;border-top:1px solid var(--line)}
.tier-sec.feature{
  background:
    radial-gradient(90% 60% at 50% 0%, color-mix(in srgb,var(--accent) 7%,transparent), transparent 70%),
    var(--panel-2);
}
@media(max-width:820px){.tier-sec{padding:48px 0}}

.tier-top{
  display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end;
  padding-bottom:28px;margin-bottom:30px;border-bottom:1px solid var(--line);
}
@media(max-width:820px){
  .tier-top{grid-template-columns:1fr;gap:24px;align-items:start}
}
.tier-id .step-n{
  display:inline-block;font-family:var(--mono);font-size:.71rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dimmer);border:1px solid var(--line);
  border-radius:5px;padding:4px 9px;margin-bottom:14px;
}
.tier-sec.feature .tier-id .step-n{
  color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,transparent);
}
.tier-id h2{font-size:2.1rem;letter-spacing:-.03em;margin-bottom:10px}
.tier-id .lede{max-width:38ch;margin:0}

.tier-buy{text-align:right;flex:none}
@media(max-width:820px){.tier-buy{text-align:left}}
.tier-buy .amt{
  font-size:2.5rem;font-weight:670;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;line-height:1;
}
.tier-buy .amt span{font-size:.92rem;font-weight:450;color:var(--dimmer);letter-spacing:0}
.tier-buy .terms{font-size:.83rem;color:var(--dimmer);margin-top:7px}
.tier-buy .btn-row{margin-top:20px;justify-content:flex-end}
@media(max-width:820px){.tier-buy .btn-row{justify-content:flex-start}}

.tier-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
@media(max-width:820px){.tier-grid{grid-template-columns:1fr;gap:30px}}

/* the picture of the business once this tier is running, which is the part
   that actually sells. Prices alone do not do this work. */
.tier-story .story{
  color:var(--dim);font-size:1rem;line-height:1.68;max-width:56ch;margin:0;
}
.tier-story .gains{margin-top:24px}
.tier-story .gains .ttl{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--dimmer);margin-bottom:13px;
}
.tier-story .gains ul{list-style:none;padding:0;margin:0}
.tier-story .gains li{
  position:relative;padding-left:26px;margin-bottom:11px;
  font-size:.94rem;color:var(--ink);line-height:1.55;
}
.tier-story .gains li::before{
  content:"";position:absolute;left:0;top:.42em;width:11px;height:6px;
  border-left:2px solid var(--good);border-bottom:2px solid var(--good);
  transform:rotate(-45deg);border-radius:1px;
}

.tier-list{
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);padding:24px 26px;
}
.tier-sec.feature .tier-list{background:var(--panel)}
.tier-list .ttl{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--dimmer);margin-bottom:15px;
}
.tier-list ul{list-style:none;padding:0;margin:0;columns:2;column-gap:24px}
@media(max-width:560px){.tier-list ul{columns:1}}
.tier-list li{
  position:relative;padding-left:22px;margin-bottom:9px;font-size:.9rem;
  color:var(--dim);line-height:1.5;break-inside:avoid;
}
/* carried up from the tier below, versus new at this tier */
.tier-list li.new{color:var(--ink)}
.tier-list li::before{
  content:"";position:absolute;left:0;top:.52em;width:11px;height:2px;
  background:color-mix(in srgb,var(--accent) 70%,transparent);border-radius:2px;
}
.tier-list li.new::before{background:var(--accent)}
.tier-list .fine{
  margin-top:18px;padding-top:15px;border-top:1px solid var(--line-soft);
  font-size:.83rem;color:var(--dimmer);line-height:1.55;
}
.tier-list .fine a{color:var(--accent)}

/* ---- checkout modal ---- */
.co-box{max-width:660px !important}
.co-tabs{display:flex;gap:6px;margin-bottom:20px;overflow-x:auto;padding-bottom:2px}
.co-tab{
  flex:1;min-width:104px;background:var(--bg);border:1px solid var(--line);color:var(--dim);
  border-radius:8px;padding:10px 8px;cursor:pointer;font-family:inherit;font-size:.86rem;
  transition:border-color .15s,color .15s,background .15s;text-align:center;line-height:1.3;
}
.co-tab b{display:block;font-weight:620;font-size:.9rem;color:inherit}
.co-tab i{display:block;font-style:normal;font-family:var(--mono);font-size:.78rem;margin-top:3px;opacity:.85}
.co-tab:hover{border-color:color-mix(in srgb,var(--accent) 45%,transparent);color:var(--ink)}
.co-tab.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}

/* The itemised breakdown: what each piece is, what it does, what it costs on
   its own. Single column, because a description per row needs the width. */
.co-inc{
  background:var(--bg);border:1px solid var(--line);border-radius:8px;
  padding:14px 16px;margin-bottom:16px;max-height:290px;overflow-y:auto;
}
.co-inc h4,.co-up h4{
  font-family:var(--mono);font-size:.71rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--dimmer);margin:0 0 10px;
}
.co-inc ul{list-style:none;padding:0;margin:0}
.co-inc li{
  padding:10px 0;border-bottom:1px solid var(--line-soft);
}
.co-inc li:first-child{padding-top:2px}
.co-inc li:last-child{border-bottom:none;padding-bottom:2px}
.co-inc .ln{display:flex;align-items:baseline;gap:12px}
.co-inc .nm{font-size:.89rem;color:var(--ink);font-weight:560;flex:1}
.co-inc .nm .q{color:var(--dimmer);font-family:var(--mono);font-size:.8rem}
.co-inc .pr{
  font-family:var(--mono);font-size:.85rem;color:var(--ink);white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.co-inc .pr small{color:var(--dimmer);font-size:.72rem}
.co-inc .pr s{color:var(--dimmer);text-decoration-thickness:1px;margin-right:5px;font-size:.79rem}
.co-inc .pr .rq{
  font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--dimmer);
}
.co-inc .ds{
  margin:5px 0 0;font-size:.82rem;color:var(--dim);line-height:1.5;max-width:52ch;
}
.co-save{
  margin:12px 0 0;padding-top:11px;border-top:1px solid var(--line);
  font-size:.82rem;color:var(--good);line-height:1.55;
}

.co-up{margin-bottom:18px}
/* `.m-box label{display:block}` styles the call booking form's labels and is
   two classes deep, so it outranks a bare `.co-add` and flattens these rows.
   Matched here rather than overridden with !important. */
.m-box label.co-add{
  display:flex;align-items:center;gap:12px;flex-wrap:nowrap;background:var(--bg);
  border:1px solid var(--line);border-radius:8px;padding:12px 14px;margin-bottom:8px;
  cursor:pointer;transition:border-color .15s,background .15s;
}
.co-add:hover{border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.co-add.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.co-add.inc{cursor:default;opacity:.9}
.co-add.inc:hover{border-color:var(--line)}
.m-box label.co-add input[type=checkbox]{
  appearance:none;-webkit-appearance:none;padding:0;
  width:18px;min-width:18px;max-width:18px;height:18px;flex:0 0 18px;margin:0;box-sizing:border-box;
  border:1px solid var(--line);border-radius:4px;background:var(--panel);cursor:pointer;
  display:grid;place-items:center;transition:background .15s,border-color .15s;
}
.m-box label.co-add input[type=checkbox]:checked{background:var(--accent);border-color:var(--accent)}
.m-box label.co-add input[type=checkbox]:checked::after{
  content:"";width:9px;height:5px;border-left:2px solid var(--accent-ink);
  border-bottom:2px solid var(--accent-ink);transform:rotate(-45deg) translate(1px,-1px);
}
.m-box label.co-add input[type=checkbox]:disabled{cursor:default;background:color-mix(in srgb,var(--good) 55%,transparent);
  border-color:color-mix(in srgb,var(--good) 55%,transparent)}
.m-box label.co-add input[type=checkbox]:disabled::after{
  content:"";width:9px;height:5px;border-left:2px solid var(--bg);
  border-bottom:2px solid var(--bg);transform:rotate(-45deg) translate(1px,-1px);
}
.co-add .nm{font-size:.9rem;flex:1}
.co-add .pr{font-family:var(--mono);font-size:.86rem;color:var(--dim);white-space:nowrap}
.co-add.inc .pr{color:var(--good);font-size:.78rem;letter-spacing:.04em;text-transform:uppercase}

.co-tot{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:15px 16px;margin-bottom:18px}
.co-tot .li{display:flex;justify-content:space-between;align-items:baseline;font-size:.9rem;color:var(--dim);margin-bottom:8px}
.co-tot .li:last-child{
  margin-bottom:0;padding-top:10px;border-top:1px solid var(--line);
  color:var(--ink);font-weight:620;font-size:1.02rem;
}
.co-tot .li .v{font-family:var(--mono);font-variant-numeric:tabular-nums}
.co-fine{font-size:.79rem;color:var(--dimmer);margin-top:12px;text-align:center;line-height:1.5}