/* Homepage v2 (approved by Hannah 6 Nov 2026). Loads after home-leads.css. */
.hero .h1{max-width:26ch}
.hero .hero-lines{max-width:64ch;margin:24px auto 0;display:grid;gap:10px}
.hero .hero-lines .lead{margin:0;max-width:none;text-align:left}
.hero .hero-lines b{font-weight:700;color:var(--text)}
.price-tabs{display:grid;grid-template-columns:repeat(3,auto);gap:4px;width:fit-content;max-width:100%;margin:32px auto 28px;padding:4px;background:#f8fafc;border:1px solid var(--rule);border-radius:16px}
.price-tab{font:700 15px var(--sans);color:var(--copy);background:none;border:1px solid transparent;border-radius:12px;min-height:44px;padding:0 22px;cursor:pointer;white-space:nowrap}
.price-tab:hover{color:var(--text)}
.price-tab[aria-selected="true"]{background:#fff;color:var(--accent,#2f4bd8);border-color:var(--rule);box-shadow:0 1px 2px rgba(2,8,23,.08)}
.price-tab:focus-visible{outline:2px solid var(--accent,#2f4bd8);outline-offset:2px}
.plans.plans-one{grid-template-columns:minmax(0,380px);justify-content:center;max-width:none}
.plans-one .plan{padding:28px}
.plans-one .plan-price{font-size:60px}
.plans-one .plan-price small{display:inline;margin:0 0 0 4px}
.plan-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.plan-tag{font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;background:#ecf6f0;color:#2f7d5b;white-space:nowrap}
.price-open{background:#fdf3dc;color:#92600a;border:1px solid #efd9a4;border-radius:6px;padding:1px 6px;font-weight:700}
.plans-detail .plan{gap:14px;padding:24px}
.plan-pitch{margin:0;font-size:14.5px;line-height:1.4;color:var(--copy);min-height:41px}
.plan-incl{margin:0;font-size:13.5px;font-weight:700;color:var(--ink-2)}
.plans-detail ul{gap:11px}
.plans-detail li{grid-template-columns:18px minmax(0,1fr) 20px;gap:2px 10px;line-height:1.35}
.plans-detail li::before{margin-top:1px}
.plans-detail li .li-t{grid-column:2;font-size:14.5px;color:var(--text)}
.plans-detail li .li-t span,.plan-help-text span{font-size:inherit;color:inherit}
.plans-detail li.off .li-t{color:var(--dim)}
.plans-detail li.off::before{background:var(--dim);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center/100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center/100% no-repeat}
.plan-help{grid-column:3;width:20px;height:20px;padding:0;border:1px solid var(--rule);border-radius:50%;background:none;color:var(--copy);font:700 12px/1 var(--sans);cursor:pointer}
.plan-help:hover{color:var(--text)}
.plan-help[aria-expanded="true"]{background:var(--accent-fill);color:var(--accent);border-color:var(--accent)}
.plan-help:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.plan-help-text{grid-column:2/-1;margin:4px 0 2px;font-size:13px;line-height:1.4;color:var(--copy)}
.price-fine{margin:20px auto 0;font-size:14.5px;color:var(--copy);text-align:center;max-width:70ch}
@media(max-width:560px){.price-tabs{grid-template-columns:repeat(2,minmax(0,1fr));width:100%}.price-tab{padding:0 8px}}
.pt-live{border:1px solid var(--rule);border-radius:16px;background:#fff;box-shadow:var(--sh-lg);padding:16px;max-height:720px;overflow:auto;min-width:0}
.pt-live .pt-sample{margin:0 0 12px;padding:8px 12px;border-radius:8px;background:#f1f5f9;color:#475569;font-size:13px;line-height:1.45}

/* Original design with tabs doing the shortening. Everything is visible at rest. */
:root{--out:cubic-bezier(.16,1,.3,1)}
.duo{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:center}
.duo .sec-head,.duo .fig,.duo .pt-live{min-width:0}
.pt-live{max-height:620px;overflow:auto}
.card-tabs{padding:12px 22px;border-bottom:1px solid var(--rule)}
.card-tabs+div .prow:first-child{border-top:0}
.tabs-row{margin-top:32px}
.seg button{transition:color .2s}
.seg button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
#screens .step{margin-top:32px}
.flow-panel .ui{min-width:0}
.strong-lines{display:grid;gap:6px;margin-top:8px}
.strong-lines .pt{font-size:15.5px}
#sell .sell-panel{margin-top:36px}
@media(max-width:900px){.duo{grid-template-columns:minmax(0,1fr);gap:28px}}
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes panel{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes rowin{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
@keyframes caret{50%{border-color:transparent}}
@media(prefers-reduced-motion:no-preference){
  .go .load{animation:rise 1s var(--out) both;animation-delay:var(--d,0ms)}
  [data-reveal].play{animation:rise 1s var(--out) both}
  [data-panel-group]:not([hidden]){animation:panel .55s var(--out) both}
  [data-panel-group="flow"]:not([hidden]) .lt-table tbody tr{animation:rowin .6s var(--out) both;animation-delay:calc(var(--i,0)*110ms + 150ms)}
  .typing{border-right:2px solid var(--accent);animation:caret .9s step-end infinite}
  .btn{transition:transform .25s var(--out)}
  .btn:hover{transform:translateY(-1px)}
  .btn:active{transform:translateY(0) scale(.98)}
}
[hidden]{display:none!important}
@media(min-width:901px){.sell-panel{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

/* v6: each section gets its own layout */
.report-split{margin-top:40px}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:32px}
.trio .pp,.facts .pp{margin-top:4px}
.facts{display:grid;gap:18px;margin-top:12px}
.web-fig{margin-top:36px;max-height:520px}
.sell-stack .sec-head{max-width:760px}
#agents{background:var(--surface-2);padding:96px 0;margin-top:var(--sec)}
#faq{padding-top:var(--sec)}
@media(min-width:901px){
  #campaigns .plan-split{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center}
  #campaigns .plan-split>.ui{order:-1}
  .tool-panel{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
  .tool-panel .pt-live{order:-1}
}
@media(max-width:900px){
  .trio{grid-template-columns:minmax(0,1fr);gap:20px}
  .web-fig{max-height:none}
  .web-fig.crop::after{display:none}
  #agents{padding:64px 0;margin-top:88px}
}
.tool-panel .h2{text-wrap:wrap}

/* v7: each tab reads on one screen, tabs stay in reach */
#sell .seg[data-group="sell"]{position:sticky;top:76px;z-index:20;display:flex;width:fit-content;box-shadow:0 6px 18px -10px rgba(2,8,23,.25)}
#sell .sell-panel{margin-top:28px;scroll-margin-top:140px}
.sell-stack .sec-head{max-width:none;gap:10px}
.sell-stack .sec-head .lead{max-width:860px}
.report-split{margin-top:24px;align-items:start}
.report-split .fig.crop{max-height:340px}
#sell li{padding:12px 0}
#sell li:first-child{padding-top:0}
#sell li .pp{font-size:14.5px;line-height:1.5}
#sell li .n{width:30px;height:30px;font-size:13px;border-radius:8px}
#sell li{grid-template-columns:30px minmax(0,1fr);gap:2px 14px}
.web-fig{display:block;margin:24px auto 0;max-width:760px;max-height:300px}
.trio{margin-top:24px}
.tool-list{margin-top:6px}
.tool-panel .sec-head{gap:10px}
.tool-panel .h2{font-size:clamp(1.9rem,1.5rem + 1.4vw,2.6rem)}
.tool-panel{align-items:start}
.pt-live{max-height:540px}
@media(max-width:900px){
  #sell .seg[data-group="sell"]{top:64px}
  .report-split .fig.crop{max-height:none}
  .report-split .fig.crop::after{display:none}
  .web-fig{max-height:260px}
}
#agents{background:none;padding:var(--sec) 0 0;margin-top:0}
.web-fig{max-width:580px;max-height:300px}
@media(max-width:767px){#agents{padding:88px 0 0;margin-top:0}}
#sell .seg[data-group="sell"]{position:static;box-shadow:none}
.tabs-bar{position:sticky;top:64px;z-index:20;background:var(--bg);padding:10px 0;margin:-10px 0}
@media(max-width:900px){.tabs-bar{top:56px}}

/* websites: Waterline in front, two other looks behind, each fading to nothing */
.skins{position:relative;aspect-ratio:3.3;margin-top:28px}
.skin{position:absolute;display:block;height:auto;border-radius:14px;border:1px solid var(--rule);box-shadow:var(--sh-lg);background:#fff;
  -webkit-mask-image:linear-gradient(to bottom,#000 42%,transparent 98%);mask-image:linear-gradient(to bottom,#000 42%,transparent 98%)}
.skin-c{width:52%;left:24%;top:0;z-index:2}
.skin-l{width:30%;left:0;top:13%;z-index:1}
.skin-r{width:30%;right:0;top:13%;z-index:1}
.skins+.trio{margin-top:4px}
@keyframes skinl{from{opacity:0;transform:translateX(70px)}to{opacity:1;transform:none}}
@keyframes skinr{from{opacity:0;transform:translateX(-70px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:no-preference){
  [data-panel-group="sell"]:not([hidden]) .skin-l{animation:skinl .9s var(--out) .1s backwards}
  [data-panel-group="sell"]:not([hidden]) .skin-r{animation:skinr .9s var(--out) .1s backwards}
  [data-panel-group="flow"]:not([hidden]) .lt-table tbody tr{animation-fill-mode:backwards}
}
.filters-stage .ui-panel{z-index:30}
@media(max-width:900px){
  .skins{aspect-ratio:2.15}
  .skin-c{width:78%;left:11%}
  .skin-l,.skin-r{width:42%;top:9%}
}
.skin-c{-webkit-mask-image:linear-gradient(to bottom,#000 66%,transparent 99%);mask-image:linear-gradient(to bottom,#000 66%,transparent 99%)}

/* Selected tab, all homepage tab rows: soft blue so the tabs are noticed while scrolling (Hannah, 6 Nov 2026). Same tint family as the numbered chips. */
.seg button[aria-selected="true"]{background:#eef1fd;color:var(--accent,#2f4bd8);box-shadow:0 0 0 1px #d5dcf9}
.price-tab[aria-selected="true"]{background:#eef1fd;border-color:#d5dcf9;box-shadow:none}