/* Vest V7 homepage (and /pricing): product-first structure. Builds on site.css (same tokens, type and motion). */

/* ---------- hero ---------- */
.hero .display { font-size: clamp(44px, 6.2vw, 92px); max-width: 15ch; }
.h1-accent { color: var(--green); }

/* ---------- network demonstration: four scenes, Vest as the layer underneath ---------- */
.ln-direct, .direct-label { display: none !important; }
.net-grid { padding-top: 40px; grid-template-columns: minmax(0, .95fr) minmax(0, 1.3fr) minmax(0, .7fr); column-gap: clamp(48px, 7vw, 104px); }
@media (max-width: 960px) { .net-grid { grid-template-columns: 1fr; } }
/* Vest appears in the third scene, not with the partners */
.b1 .vest-layer { opacity: 0; }
.b2 .vest-layer { opacity: 1; }
[data-beat="1"] .vest-layer::after { animation: none; }
[data-beat="2"] .vest-layer::after { animation: scan 1.6s var(--io) .2s 1 both; }
/* partners carry no status until Vest discovers them */
.b1 .pt:not(.is-recruited):not(.is-active) .s-id { opacity: 0; transform: scale(.92); transition-delay: 0s; }
.b2 .pt:not(.is-recruited):not(.is-active) .s-id { opacity: 1; transform: none; transition-delay: .35s; }
.deal.is-live:not(.is-static) .net-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) {
  .col-partners .col-k { display: block; margin: 0 0 10px 8px; opacity: 0; }
  .b1 .col-partners .col-k { opacity: 1; }
  .b2 .col-partners .col-k { opacity: 0; }
}
@media (max-width: 520px) {
  .deal.is-live:not(.is-static) .net-steps button { font-size: 12px; }
}

/* ---------- how Vest works: one connected flow ---------- */
.ways { background: var(--paper); }
.how .h2 { max-width: 760px; }
.flow { list-style: none; margin: clamp(48px, 6vw, 80px) 0 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px clamp(24px, 3vw, 48px); }
.flow::before { content: ""; position: absolute; left: 14px; right: 14px; top: 14px; height: 2px; background: var(--rule); }
.flow::after { content: ""; position: absolute; left: 14px; right: 14px; top: 14px; height: 2px; background: var(--green); transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--io) .2s; }
.flow.is-in::after, html:not(.js) .flow::after { transform: scaleX(1); }
.flow li { position: relative; padding-top: 48px; }
.flow-n { position: absolute; top: 0; left: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--white); border: 2px solid var(--rule); color: var(--grey); font-size: 12px; font-weight: 700; display: grid; place-items: center; transition: background-color .4s var(--out), border-color .4s var(--out), color .4s var(--out); }
.flow.is-in .flow-n, html:not(.js) .flow-n { background: var(--green); border-color: var(--green); color: var(--white); }
.flow.is-in li:nth-child(2) .flow-n { transition-delay: .55s; }
.flow.is-in li:nth-child(3) .flow-n { transition-delay: .95s; }
.flow.is-in li:nth-child(4) .flow-n { transition-delay: 1.35s; }
.flow h3 { font-size: clamp(24px, 2.4vw, 30px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
.flow p { margin-top: 10px; color: var(--grey); font-size: 16.5px; max-width: 280px; }
@media (max-width: 860px) {
  .flow { grid-template-columns: 1fr; gap: 28px; }
  .flow::before, .flow::after { left: 14px; right: auto; top: 14px; bottom: 14px; width: 2px; height: auto; }
  .flow::after { transform: scaleY(0); transform-origin: top; }
  .flow.is-in::after, html:not(.js) .flow::after { transform: scaleY(1); }
  .flow li { padding: 0 0 0 52px; }
}

/* ---------- two ways to work with Vest ---------- */
.ways-foot { margin-top: 24px; font-size: 16px; }
.ways-grid { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 860px) { .ways-grid { grid-template-columns: 1fr; } }
.way { border-radius: 24px; padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; align-items: flex-start; scroll-margin-top: 96px; }
.way-k { font-size: 14px; font-weight: 650; display: flex; align-items: center; gap: 10px; }
.way h3 { margin-top: 14px; font-size: clamp(24px, 2.4vw, 32px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; }
.way > p:not(.way-k):not(.way-price) { margin-top: 12px; font-size: 16.5px; line-height: 1.55; max-width: 460px; }
.way-price { margin: auto 0 20px; padding-top: 28px; font-size: 32px; font-weight: 600; letter-spacing: -0.04em; line-height: 1.25; }
.way-price span { font-size: 15px; font-weight: 500; letter-spacing: 0; margin-left: 4px; }
.way-platform { background: var(--white); border: 1px solid var(--rule); box-shadow: 0 1px 2px rgba(23,23,23,.04), 0 18px 48px rgba(23,23,23,.06); }
.way-platform > p:not(.way-k):not(.way-price), .way-platform .way-price span { color: var(--grey); }
.way-ui { list-style: none; margin: 22px 0 0; padding: 12px; width: 100%; background: var(--paper); border-radius: 14px; display: grid; gap: 8px; }
.way-ui li { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--white); border: 1px solid rgba(23,23,23,.06); border-radius: 10px; padding: 10px 12px; font-size: 14px; font-weight: 600; }
.way-ui i { font-style: normal; font-size: 11.5px; font-weight: 650; color: var(--grey); border: 1px solid #CFCFCA; border-radius: 999px; padding: 2px 9px; }
.way-ui i.s-on { color: var(--white); background: var(--green); border-color: var(--green); }
.way-managed { background: var(--ink); color: var(--white); }
.way-managed > p:not(.way-k):not(.way-price), .way-managed .way-price span { color: #B5B5B5; }
.way-list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.way-list li { display: flex; gap: 10px; align-items: baseline; font-size: 15.5px; }
.way-list li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #9CC7B3; flex: none; transform: translateY(-1px); }
.tag { font-size: 11.5px; font-weight: 650; color: var(--green); background: var(--green-soft); border-radius: 999px; padding: 3px 9px; letter-spacing: 0; text-transform: none; }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--white); }
.btn-light { background: var(--white); color: var(--ink); }
.btn-light:hover { background: #E9E9E4; }

/* ---------- pricing ---------- */
.pricing-head .lead { margin-top: 16px; }
.plans { margin-top: clamp(40px, 5vw, 56px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
@media (max-width: 960px) { .plans { grid-template-columns: 1fr; } }
.plan { background: var(--white); border-radius: 22px; padding: clamp(22px, 2.6vw, 32px); display: flex; flex-direction: column; align-items: flex-start; box-shadow: 0 1px 2px rgba(23,23,23,.04), 0 12px 32px rgba(23,23,23,.05); }
.plan-k { font-size: 15px; font-weight: 650; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.plan-price { margin-top: 12px; font-size: 40px; font-weight: 600; letter-spacing: -0.045em; line-height: 1.1; }
.plan-price small { font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--grey); }
.plan-price span { font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--grey); margin-left: 3px; }
.plan dl { margin: 22px 0 26px; width: 100%; }
.plan dl div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--rule); font-size: 14.5px; }
.plan dt { color: var(--grey); min-width: 0; }
.plan dd { margin: 0; font-weight: 600; text-align: right; white-space: nowrap; }
.plan .btn { margin-top: auto; }
.early { margin-top: 20px; background: var(--white); border-radius: 22px; padding: clamp(20px, 2.6vw, 28px) clamp(22px, 2.6vw, 32px); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: 16px 40px; align-items: center; scroll-margin-top: 96px; }
@media (max-width: 960px) { .early { grid-template-columns: 1fr; } }
.early-k { font-size: 15px; font-weight: 650; }
.early-t { margin-top: 4px; font-size: 15px; color: var(--grey); max-width: 420px; }
.early-row { display: flex; flex-wrap: wrap; gap: 10px; }
.early-row .btn { flex: none; }
.early-row input { flex: 1 1 150px; min-width: 0; font: inherit; font-size: 16px; color: var(--ink); background: var(--white); border: 1px solid #8F8F8F; border-radius: 999px; padding: 0 18px; min-height: 48px; }
.early-row input:focus { outline: 2px solid var(--green); outline-offset: 1px; border-color: var(--green); }
.early-row input[aria-invalid="true"] { border-color: #A12D2D; }
.pricing .fineprint { margin-top: 28px; font-size: 14px; color: var(--grey); display: block; max-width: 860px; }


/* ================= V7 ================= */
/* hero: one promise, one sentence, one action */
.hero-v7 .display { font-size: clamp(44px, 6.6vw, 96px); max-width: 13ch; }
.hero-v7 .hero-row { gap: 28px; }
.hero-v7 .hero-actions { gap: 12px 20px; }
.hero-note { font-size: 15px; color: var(--grey); }

/* product demo: example recommendations that move to an outreach-ready state */
.recs { margin-top: clamp(48px, 6vw, 72px); }
.recs-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.recs-title { font-size: 18px; font-weight: 650; letter-spacing: -0.015em; }
.recs-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.rec { display: grid; background: var(--white); border: 1px solid rgba(23,23,23,.08); border-radius: 20px; box-shadow: 0 1px 2px rgba(23,23,23,.04), 0 12px 32px rgba(23,23,23,.06); overflow: hidden; }
.rec-found, .rec-ready { grid-area: 1 / 1; padding: clamp(20px, 2.2vw, 26px); display: flex; flex-direction: column; align-items: flex-start; transition: opacity .35s var(--out), transform .45s var(--out), visibility 0s linear .35s; }
.rec[data-state="found"] .rec-ready, .rec[data-state="ready"] .rec-found { opacity: 0; visibility: hidden; transform: translateY(6px); }
.rec[data-state="found"] .rec-found, .rec[data-state="ready"] .rec-ready { transition-delay: 0s; }
.rec-type { font-size: 11.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--green); }
.rec-name { margin-top: 8px; font-size: 21px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.2; }
.rec-sub { margin-top: 2px; font-size: 14px; color: var(--grey); }
.rec-why, .rec-kit { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 7px; }
.rec-why li, .rec-kit li { display: flex; gap: 9px; align-items: baseline; font-size: 14.5px; font-weight: 550; }
.rec-why li::before, .rec-kit li::before { content: "✓"; color: var(--green); font-weight: 700; font-size: 13px; flex: none; }
.rec-dl { margin: 16px 0 20px; display: grid; gap: 10px; width: 100%; }
.rec-dl div { border-top: 1px solid var(--rule); padding-top: 10px; }
.rec-dl dt { font-size: 12px; font-weight: 650; color: var(--grey); }
.rec-dl dd { margin: 3px 0 0; font-size: 14.5px; line-height: 1.45; }
.rec-go { margin-top: auto; }
.rec-ready { background: var(--green-soft); }
.rec-ok { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 650; letter-spacing: -0.02em; }
.rec-ok::before { content: "✓"; width: 26px; height: 26px; border-radius: 50%; background: var(--green); color: var(--white); font-size: 13px; display: grid; place-items: center; flex: none; }
.rec-for { margin-top: 4px; font-size: 14px; color: var(--grey); }
.rec-kit li { font-weight: 600; }
.rec-draft { margin: 14px 0 0; padding: 12px 14px; background: var(--white); border-radius: 12px; font-size: 13.5px; line-height: 1.5; color: #3D3D3D; }
.rec-draft span { display: block; }
.rec-draft-k { font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--green); margin-bottom: 4px; }
.rec-launch { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: 999px; background: var(--green); color: var(--white); font-size: 15px; font-weight: 600; }
.rec-ready .rec-kit { margin-bottom: 22px; }
.rec-back { margin-top: 12px; font: inherit; font-size: 13.5px; color: var(--grey); background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 32px; }
.recs-foot { margin-top: 20px; font-size: 15px; color: var(--grey); }
@media (max-width: 960px) {
  .recs-list { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) 18px; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .recs-list::-webkit-scrollbar { display: none; }
  .rec { flex: 0 0 min(84%, 360px); scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) { .rec-found, .rec-ready { transition: none; } }
html:not(.js) .rec-go, html:not(.js) .rec-back { display: none; }
@media (max-width: 520px) {
  .rec-go { font-size: 14px; padding: 0 14px; white-space: nowrap; }
  .way-price span { display: block; margin: 2px 0 0; }
}

/* plans on the homepage; Growth is the featured plan */
.ways-lead { margin-top: 16px; max-width: 620px; }
.plan { position: relative; scroll-margin-top: 96px; }
.plan-featured { background: var(--ink); color: var(--white); box-shadow: 0 0 0 2px var(--green), 0 24px 56px rgba(23,23,23,.20); }
.plan-featured .plan-price { font-size: 46px; }
.plan-featured .plan-price span, .plan-featured .plan-price small, .plan-featured dt { color: #B5B5B5; }
.plan-featured dl div { border-top-color: rgba(255,255,255,.14); }
.plan-featured .tag { color: #CFE5D8; background: rgba(156,199,179,.18); }
.plan-flag { position: absolute; top: 0; left: clamp(22px, 2.6vw, 32px); transform: translateY(-50%); background: var(--green); color: var(--white); font-size: 12px; font-weight: 700; letter-spacing: .04em; border-radius: 999px; padding: 5px 12px; }
@media (min-width: 961px) { .plan-featured { margin-top: -16px; } .plans { padding-top: 16px; } }
@media (max-width: 960px) { .plans { row-gap: 32px; } }