/* ============================================================
   SOMA — Sales-First homepage variant (review/compare build)
   Layered on top of soma.css. Solution-led hero, "how we fix it"
   offer band, demoted proof.
   ============================================================ */

/* ---- floating compare switcher (review tool) ---- */
.compare-bar {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  z-index: 600; display: flex; align-items: center; gap: 2px;
  background: var(--ink); border-radius: 100px; padding: 5px 6px 5px 14px;
  box-shadow: 0 18px 40px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.2);
}
.compare-bar .cl { font-family: var(--mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted-dark); padding-right: 8px; }
.compare-bar a { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--paper); padding: 8px 15px; border-radius: 100px; transition: background .2s, color .2s; }
.compare-bar a:hover { color: #fff; }
.compare-bar a.active { background: var(--pen); color: #fff; }
@media (max-width: 540px) { .compare-bar { bottom: 12px; } .compare-bar .cl { display: none; } }

/* ---- solution hero ---- */
.hero-sol { padding-top: clamp(46px, 7vw, 92px); padding-bottom: clamp(40px, 5vw, 64px); }
.hero-sol .hero-eyebrow { margin-bottom: 28px; }
.hero-sol h1 { font-family: var(--sans); font-weight: 700; letter-spacing: -.035em; line-height: .98; font-size: clamp(40px, 6.6vw, 86px); max-width: 17ch; margin-bottom: 26px; }
.hero-sol h1 .pen-ink { color: var(--pen); }
.hero-sol .sol-sub { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.55; color: var(--ink-soft); max-width: 60ch; }
.hero-sol .sol-sub strong { color: var(--ink); font-weight: 600; }
.hero-sol .who-for { display: flex; align-items: center; gap: 12px; margin-top: 22px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.hero-sol .who-for .ln { width: 26px; height: 1px; background: var(--pen); flex: none; }
.hero-sol .hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; align-items: stretch; }
.hero-sol .hero-cta .btn { align-items: center; }

/* trust strip */
.trust-strip { display: flex; flex-wrap: wrap; gap: 0; margin-top: clamp(40px, 5vw, 60px); border-top: 1px solid var(--rule); }
.trust-strip .ts { flex: 1; min-width: 160px; padding: 22px 30px; border-right: 1px solid var(--rule); }
.trust-strip .ts:first-child { padding-left: 0; }
.trust-strip .ts:last-child { border-right: none; padding-right: 0; }
.trust-strip .ts .tn { font-family: var(--serif); font-size: clamp(26px, 3vw, 38px); line-height: 1; letter-spacing: -.02em; }
.trust-strip .ts .tn .u { color: var(--pen); }
.trust-strip .ts .tl { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 10px; line-height: 1.5; }
@media (max-width: 720px) {
  .trust-strip .ts { flex-basis: 50%; border-right: none; padding-right: 0; }
}

/* ---- "here's how we fix it" — the offer ---- */
.fix { background: var(--obsidian); color: var(--on-dark); }
.fix .fix-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; flex-wrap: wrap; margin-bottom: clamp(32px, 4vw, 48px); }
.fix .fix-head .label { color: var(--pen); }
.fix .fix-head h2 { color: var(--on-dark); max-width: 18ch; margin-top: 14px; }
.fix .fix-head .fh-sub { font-family: var(--serif); font-style: italic; font-size: clamp(18px, 1.8vw, 23px); color: var(--muted-dark); max-width: 26ch; text-align: right; }

/* product-led: the Dossier leads */
.offer-lead { display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: stretch; }
.ol-main { display: flex; flex-direction: column; }
.ol-tag { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--pen); font-weight: 600; margin-bottom: 18px; }
.ol-main h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 3.6vw, 46px); line-height: 1.04; letter-spacing: -.018em; color: var(--on-dark); margin-bottom: 18px; text-wrap: balance; }
.ol-main p { font-size: 16.5px; line-height: 1.6; color: var(--muted-dark); max-width: 52ch; margin-bottom: 26px; }
.ol-main p strong { color: var(--on-dark); font-weight: 600; }
.ol-cta { display: flex; flex-wrap: wrap; gap: 13px; margin-top: auto; }

/* scope card beside it */
.ol-card { border: 1px solid var(--pen); background: rgba(206,22,32,.06); display: flex; flex-direction: column; }
.ol-card .olc-h { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--rule-dark); }
.ol-card .olc-h .k { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-dark); }
.ol-card .olc-h .s { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--pen); }
.ol-card .price { padding: 22px 18px 6px; font-family: var(--serif); font-weight: 300; font-size: clamp(44px, 5vw, 60px); line-height: 1; letter-spacing: -.02em; color: var(--on-dark); }
.ol-card .price .cur { font-size: .48em; vertical-align: super; }
.ol-card .price-sub { padding: 0 18px 18px; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-dark); }
.ol-card .olc-rows { padding: 4px 18px 18px; margin-top: auto; }
.ol-card .olc-rows .r { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px dotted var(--rule-dark); font-family: var(--mono); font-size: 11px; letter-spacing: .02em; }
.ol-card .olc-rows .r .rk { color: var(--muted-dark); text-transform: uppercase; letter-spacing: .1em; font-size: 9.5px; }
.ol-card .olc-rows .r .rv { color: var(--on-dark); }

/* the free on-ramp, demoted */
.offer-path { margin-top: clamp(28px, 3.5vw, 44px); padding-top: clamp(26px, 3vw, 36px); border-top: 1px solid var(--rule-dark); }
.offer-path .op-label { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-dark); margin-bottom: 18px; }
.offer-path .op-label b { color: var(--on-dark); font-weight: 600; }
.op-steps { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; }
.op-step { flex: 1; min-width: 150px; border: 1px solid var(--rule-dark); padding: 15px 16px; display: flex; flex-direction: column; gap: 7px; position: relative; transition: border-color .2s, background .2s; text-align: left; }
.op-step:hover { border-color: var(--pen); background: rgba(236,232,221,.02); }
.op-step .ops-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.op-step .ops-n { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--muted-dark); }
.op-step .ops-tag { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; font-weight: 600; }
.op-step .ops-tag.free { color: var(--pen); }
.op-step .ops-name { font-family: var(--serif); font-size: clamp(16px, 1.7vw, 19px); line-height: 1.1; letter-spacing: -.01em; color: var(--on-dark); }
.op-step .ops-arr { color: var(--pen); transition: transform .2s; font-family: var(--mono); }
.op-step:hover .ops-arr { transform: translateX(3px); }
.op-step:not(:last-child)::after { content: "→"; position: absolute; top: 50%; right: -8px; transform: translateY(-50%); z-index: 2; font-family: var(--mono); font-size: 13px; color: var(--rule-dark); background: var(--obsidian); padding: 1px 0; }
.op-step.hot { border-color: var(--pen); background: rgba(206,22,32,.06); padding-top: 28px; }
.op-step.hot .ops-tag { color: var(--pen); }
.op-step.hot .ops-here { position: absolute; top: -1px; right: -1px; background: var(--pen); color: #fff; font-family: var(--mono); font-size: 7.5px; letter-spacing: .12em; text-transform: uppercase; padding: 3px 7px; }
.op-dest { flex: 0 0 auto; min-width: 130px; border: 1px solid var(--pen); background: var(--pen); color: #fff; padding: 15px 16px; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.op-dest .od-k { font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.op-dest .od-n { font-family: var(--serif); font-size: clamp(16px, 1.7vw, 19px); line-height: 1; }

@media (max-width: 860px) {
  .offer-lead { grid-template-columns: 1fr; }
  .fix .fix-head .fh-sub { text-align: left; }
  .op-steps { flex-direction: column; }
  .op-step:not(:last-child)::after { content: "↓"; top: auto; bottom: -8px; right: auto; left: 22px; }
}

/* ---- demoted "why now" proof ---- */
.why { padding-top: clamp(50px, 6vw, 88px); padding-bottom: clamp(50px, 6vw, 88px); }
.why .why-head { display: flex; align-items: center; gap: 13px; margin-bottom: clamp(28px, 3vw, 40px); }
.why .why-head .section-no { white-space: nowrap; }
.why .why-head .ln { flex: 1; height: 1px; background: var(--rule); }
.why .why-head .lk { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
.why .why-head .lk:hover { color: var(--pen); }

.why-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 2px solid var(--ink); }
.why-stat { padding: 24px 30px; border-right: 1px solid var(--rule); }
.why-stat:first-child { padding-left: 0; }
.why-stat:last-child { border-right: none; padding-right: 0; }
.why-stat .ws-n { font-family: var(--serif); font-weight: 320; font-size: clamp(40px, 5vw, 64px); line-height: .9; letter-spacing: -.03em; }
.why-stat .ws-n .u { font-size: .42em; }
.why-stat .ws-n .pen-ink { color: var(--pen); }
.why-stat .ws-d { color: var(--ink-soft); font-size: 14.5px; line-height: 1.5; margin-top: 12px; max-width: 32ch; }

.why-doc { margin-top: clamp(34px, 4vw, 52px); border-top: 1px solid var(--rule); }
.why-doc .wd { display: grid; grid-template-columns: 200px 1fr; gap: clamp(16px, 3vw, 40px); padding: 18px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.why-doc .wd .wdk { font-family: var(--serif); font-size: clamp(17px, 1.7vw, 21px); letter-spacing: -.01em; }
.why-doc .wd .wdv { color: var(--ink-soft); font-size: 15px; line-height: 1.5; }
@media (max-width: 640px) {
  .why-stats { grid-template-columns: 1fr; }
  .why-stat { border-right: none; border-bottom: 1px solid var(--rule); padding-right: 0; }
  .why-stat:last-child { border-bottom: none; }
  .why-doc .wd { grid-template-columns: 1fr; gap: 4px; }
}