/* Home page: storytelling landing. Uses site.css tokens and components. */
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.page-home .section-head .lead { margin-top: .25rem; }
.section--dark kbd, .on-dark kbd { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .25); color: #fff; }

/* ---------- Leak chips (shared within the page) ---------- */
.leak-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .7rem; border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 600; line-height: 1.35; background: #E6ECEA; color: var(--midnight); }
.leak-chip::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; opacity: .8; }
.leak-chip--quote { background: #FCEFD3; color: #6B4A06; }
.leak-chip--overdue { background: #FBE7D3; color: #8A4A0F; }
.leak-chip--dormant { background: #E3ECF8; color: #24497F; }
.leak-chip--renewal { background: #DDF5EA; color: #075E3F; }
.leak-chip--lead { background: #E6ECEA; color: var(--midnight); }
.leak-chip--handoff { background: #EDEFF0; color: var(--slate); }

/* ---------- Chapter rail (wide screens only) ---------- */
.chapter-rail { display: none; }
@media (min-width: 1360px) {
  /* visibility (not just opacity) keeps the hidden rail out of the tab order and the accessibility tree */
  .chapter-rail { display: block; position: fixed; inset-inline-start: 1rem; top: 50%; transform: translateY(-50%); z-index: 60; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s, visibility 0s linear .3s; }
  .chapter-rail.is-shown { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .3s, visibility 0s; }
  .chapter-rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
  .chapter-rail a { display: flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--midnight); }
  .chapter-rail__n { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500; background: rgba(255, 255, 255, .94); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: .2rem .5rem; box-shadow: var(--shadow-sm); transition: background-color .2s, color .2s; }
  .chapter-rail__t { font-size: var(--fs-xs); font-weight: 600; background: var(--midnight); color: #fff; border-radius: var(--radius-pill); padding: .2rem .6rem; opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .2s; white-space: nowrap; pointer-events: none; }
  .chapter-rail a:hover .chapter-rail__t, .chapter-rail a:focus-visible .chapter-rail__t { opacity: 1; transform: none; }
  .chapter-rail a.is-active .chapter-rail__n { background: var(--deep); border-color: var(--deep); color: #fff; }
}

/* ---------- 1. Hero ---------- */
.home-hero { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5.5rem) clamp(3rem, 2rem + 5vw, 6rem); }
.home-hero .eyebrow { color: var(--signal); max-width: 34ch; line-height: 1.5; }
.home-hero h1 { margin-bottom: .2em; }
.home-hero .text-green { color: var(--signal); }
.home-hero__h1-sub { display: block; margin-top: .7em; max-width: 36ch; font-family: var(--font-text); font-weight: 500; font-size: clamp(1.05rem, .95rem + .55vw, 1.4rem); line-height: 1.4; letter-spacing: 0; color: #E6EFEC; text-wrap: balance; }
.home-hero a:not(.btn) { color: var(--signal); }
.home-hero__grid { align-items: center; }
.home-hero__copy { min-width: 0; }
.home-hero__ctas { display: grid; gap: 1rem; justify-items: start; }
.home-hero__story-link { font-size: var(--fs-sm); }
.home-hero__counter { display: flex; align-items: center; gap: .65rem; font-size: var(--fs-sm); color: #C7D8D3; margin-bottom: 0; }
.home-hero__counter strong { color: var(--gold); font-family: var(--font-mono); font-weight: 500; }
.home-hero__trust { list-style: none; padding: 0; margin-bottom: 0; color: #A9BDB8; padding-top: var(--space-4); border-top: 1px solid var(--line-dark); }
.home-hero__trust li { display: inline-flex; align-items: center; gap: .45rem; }
.home-hero__trust .icon { color: var(--signal); }
.home-hero__visual { min-width: 0; }
@media (max-width: 479px) {
  .home-hero__ctas .cluster { display: grid; grid-template-columns: 1fr; width: 100%; }
  .home-hero__ctas .btn { width: 100%; }
}

/* Leak radar */
.radar-wrap { max-width: 540px; margin-inline: auto; }
.radar { position: relative; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6), 0 0 0 1px rgba(43, 212, 143, .15); }
.radar .window__bar { flex-wrap: nowrap; }
.radar__example { margin-inline-start: auto; }
.radar__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .25rem .25rem .5rem; }
.radar__label { margin: 0; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .12em; color: #8FA8A2; }
.radar__total { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem); color: var(--signal); letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.radar__scope { width: 72px; height: 72px; flex: none; }
.radar__sweep { transform-origin: 40px 40px; animation: radarSpin 3.2s linear infinite; }
.radar__blip { animation: blip 3.2s ease-in-out infinite; }
.radar__blip--2 { animation-delay: 1.6s; }
.radar:not(.is-scanning) .radar__sweep { animation-duration: 6s; }
.radar__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.opp { min-width: 0; }
.opp > span:nth-child(2) { min-width: 0; display: grid; }
.opp__type .icon { width: 18px; height: 18px; }
.opp__amount--muted { color: #A9BDB8; font-family: var(--font-text); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.opp.is-pending { opacity: .16; transform: translateX(-6px); }
.radar__draft { display: flex; align-items: center; gap: .65rem; margin-top: .35rem; padding: .7rem .8rem; border-radius: 12px; border: 1px dashed rgba(43, 212, 143, .35); background: rgba(43, 212, 143, .06); color: #C7D8D3; font-size: var(--fs-xs); opacity: .3; transition: opacity .4s, background-color .4s, border-color .4s; }
.radar__draft.is-ready { opacity: 1; border-style: solid; border-color: rgba(43, 212, 143, .5); background: rgba(43, 212, 143, .1); }
.radar__draft strong { color: #fff; }
.radar__draft-icon { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--signal); color: var(--midnight); flex: none; }
.radar__draft-icon .icon { width: 16px; height: 16px; }
.radar__draft-text { flex: 1; min-width: 0; }
.radar__approve { flex: none; background: var(--signal); color: var(--midnight); font-weight: 700; border-radius: var(--radius-pill); padding: .3rem .75rem; font-size: var(--fs-xs); }
.radar__draft.is-ready .radar__approve { animation: approvePulse 2s ease-in-out infinite; }
.radar__caption { color: #8FA8A2; text-align: center; }
@keyframes radarSpin { to { transform: rotate(360deg); } }
@keyframes blip { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
@keyframes approvePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(43, 212, 143, .5); } 60% { box-shadow: 0 0 0 8px rgba(43, 212, 143, 0); } }

/* ---------- 2. Story ---------- */
.home-story__steps { display: grid; min-width: 0; }
.scrolly__step { max-width: 34rem; }
.scrolly__step h3 { font-size: clamp(1.4rem, 1.2rem + .9vw, 2rem); margin-top: .5rem; }
.scrolly__step p { color: var(--slate); font-size: var(--fs-lg); }
.scrolly__step p strong { color: var(--ink); }
.scrolly__step .badge { align-self: flex-start; }
.home-story__kicker { display: inline-flex; align-items: center; gap: .5rem; margin: 0; font-family: var(--font-mono); font-size: var(--fs-xs) !important; text-transform: uppercase; letter-spacing: .12em; color: var(--slate); }
.home-story__kicker::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--slate); }
.home-story__kicker--quote::before { background: var(--gold); }
.home-story__kicker--overdue::before { background: var(--overdue); }
.home-story__kicker--dormant::before { background: var(--dormant); }
.home-story__kicker--renewal::before { background: var(--green); }
.home-story__kicker--lead::before { background: var(--midnight); }
.home-story__kicker--done::before { background: var(--signal); box-shadow: 0 0 0 4px rgba(43, 212, 143, .2); }
.story-mini { display: flex; align-items: center; gap: .75rem; padding: .7rem .9rem; border-radius: 14px; background: var(--midnight-2); color: #E6EFEC; font-size: var(--fs-sm); margin-top: .5rem; max-width: 26rem; }
.story-mini > span:nth-child(2) { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: var(--fs-xs); color: #A9BDB8; }
.story-mini .amount { color: var(--gold); }
.story-mini .opp__type { flex: none; }
.home-story__sticky { display: none; }
@media (min-width: 980px) {
  .home-story__scrolly { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: var(--space-8); }
  .home-story__sticky { display: block; }
  .story-mini { display: none; }
  .scrolly__step { min-height: 55vh; }
  .scrolly__step:first-child { min-height: 48vh; justify-content: flex-start; }
}
.story-window .window__body { gap: .55rem; }
.story-window .opp { transition: opacity .35s, background-color .35s, border-color .35s, transform .35s var(--ease); }
.story-window .opp.is-dim { opacity: .35; }
.story-window .opp.is-approved { opacity: 1; background: rgba(43, 212, 143, .12); border-color: var(--signal); }
.story-window .opp.is-approved .opp__meta::after { content: " · Approved"; color: var(--signal); font-weight: 600; }
.story-evidence { margin-top: .4rem; padding: .85rem .95rem; border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px dashed var(--line-dark); }
.story-evidence__label { margin: 0 0 .25rem; font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--signal); }
.story-evidence__text { margin: 0; color: #E6EFEC; min-height: 3.2em; }
.story-window.is-done { box-shadow: var(--shadow-lg), var(--shadow-glow); }
.home-story__punch { margin-top: var(--space-8); text-align: center; display: grid; justify-items: center; gap: var(--space-5); }
.home-story__line { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3rem); line-height: 1.15; letter-spacing: -.025em; max-width: 22ch; margin: 0; text-wrap: balance; }
.home-story__punch .cluster { justify-content: center; }

/* ---------- 3. Business cycle ---------- */
.cycle-layout { display: grid; gap: var(--space-7); align-items: start; }
@media (min-width: 980px) { .cycle-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; } }
.cycle-stage { width: 100%; max-width: 520px; margin-inline: auto; display: grid; justify-items: center; gap: 1rem; }
.cycle { width: 100%; aspect-ratio: 1; }
.cycle__svg { position: absolute; inset: 0; }
.cycle-arc { fill: none; stroke: #9DBBB1; stroke-width: 3; stroke-linecap: round; marker-end: url(#cycle-arrow); transition: stroke .35s; }
.cycle-arc.is-done { stroke: var(--deep); marker-end: url(#cycle-arrow-on); }
.cycle-arc.is-next { stroke: var(--green); stroke-dasharray: 7 7; marker-end: url(#cycle-arrow-on); animation: cycleDash 1.1s linear infinite; }
.cycle-referral { font-family: var(--font-mono); font-size: 12px; fill: var(--slate); letter-spacing: .08em; text-transform: uppercase; }
.cycle__center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 46%; text-align: center; pointer-events: none; }
.cycle__center-label { margin: 0 0 .25rem; font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--slate); }
.cycle__center-leak { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1rem, .8rem + 1vw, 1.45rem); line-height: 1.2; color: var(--midnight); text-wrap: balance; }
.cycle__nodes { position: absolute; inset: 0; }
.cycle-node { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -28px); display: flex; flex-direction: column; align-items: center; gap: .35rem; background: none; border: 0; padding: 0; font: inherit; color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cycle-node__dot { width: 56px; height: 56px; border-radius: 50%; background: #fff; border: 2px solid var(--line); display: grid; place-items: center; color: var(--deep); box-shadow: var(--shadow-sm); transition: background-color .3s, color .3s, border-color .3s, box-shadow .3s, transform .3s var(--ease); }
.cycle-node__dot .icon { width: 24px; height: 24px; }
.cycle-node__label { font-size: .8125rem; font-weight: 600; white-space: nowrap; background: rgba(255, 255, 255, .9); border-radius: var(--radius-pill); padding: .1rem .55rem; box-shadow: 0 0 0 1px var(--line); }
.cycle-node:hover .cycle-node__dot { transform: scale(1.06); border-color: var(--green); }
.cycle-node.is-done .cycle-node__dot { border-color: var(--green); }
.cycle-node.is-active .cycle-node__dot { background: var(--deep); border-color: var(--deep); color: #fff; box-shadow: 0 0 0 8px rgba(18, 160, 108, .16), var(--shadow); }
.cycle-node.is-active .cycle-node__label { background: var(--midnight); color: #fff; box-shadow: none; }
.cycle-node:focus-visible { box-shadow: none; }
.cycle-node:focus-visible .cycle-node__dot { box-shadow: var(--focus); }
@media (max-width: 479px) {
  .cycle-node { transform: translate(-50%, -22px); }
  .cycle-node__dot { width: 44px; height: 44px; }
  .cycle-node__dot .icon { width: 20px; height: 20px; }
  .cycle-node__label { font-size: .75rem; padding: .05rem .45rem; }
  .cycle__center { width: 40%; }
}
.cycle-autoplay { display: inline-flex; align-items: center; gap: .45rem; background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius-pill); padding: .5rem .95rem; min-height: 44px; font: 600 var(--fs-sm) var(--font-text); color: var(--midnight); cursor: pointer; }
.cycle-autoplay:hover { border-color: var(--deep); }
.cycle-autoplay .icon { width: 16px; height: 16px; }
.cycle-details { min-width: 0; }
.cycle-detail { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-xl); padding: clamp(1.25rem, 1rem + 1.2vw, 2rem); box-shadow: var(--shadow); }
.cycle-detail + .cycle-detail { margin-top: 1rem; }
.cycle-detail.is-active { animation: fadeUp .4s var(--ease); }
.cycle-detail__step { margin: 0 0 .35rem; font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .12em; color: var(--deep); }
.cycle-detail h3 { margin-bottom: .5rem; }
.cycle-detail > p { color: var(--slate); }
.cycle-detail__grid { display: grid; gap: .9rem; margin: 1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); }
.cycle-detail__grid dt { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--slate); margin-bottom: .2rem; }
.cycle-detail__grid dd { margin: 0; font-size: var(--fs-sm); }
.story-pop { margin-top: 1.25rem; background: var(--midnight); color: #E6EFEC; border-radius: 18px 18px 18px 6px; padding: 1rem 1.1rem; font-size: var(--fs-sm); display: grid; gap: .5rem; box-shadow: var(--shadow); transform-origin: 0 100%; }
.story-pop .badge { justify-self: start; margin: 0; }
.story-pop .amount { color: var(--gold); }
.cycle-detail.is-active .story-pop { animation: popIn .5s var(--ease) .2s both; }
.cycle-details__more { margin-top: 1rem; }
@keyframes cycleDash { to { stroke-dashoffset: -28; } }
@keyframes popIn { from { opacity: 0; transform: translateY(10px) scale(.94); } to { opacity: 1; transform: none; } }

/* ---------- 4. Why customers quit ---------- */
.quit-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.quit-card { min-height: 330px; }
.quit-card .flip__face { border: 1px solid var(--line-dark); }
.quit-card__front { background: var(--midnight-2); }
.quit-card__front p { color: #C7D8D3; margin: 0; }
.quit-card__title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; line-height: 1.2; letter-spacing: -.01em; color: #fff; }
.quit-card__front .quit-card__title { color: #fff; }
.quit-card__num { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--signal); letter-spacing: .12em; }
.quit-card__hint { margin-top: auto; font-size: var(--fs-xs); font-weight: 600; color: var(--signal); display: inline-flex; align-items: center; gap: .4rem; }
.quit-card__hint::after { content: "↻"; font-size: 1rem; }
.quit-card__back { background: #fff; color: var(--ink); border-color: #fff; justify-content: center; gap: .7rem; }
.quit-card__back p { margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--slate); }
.quit-card__back strong { color: var(--deep); }
.quit-card--silent .quit-card__front { background: linear-gradient(160deg, rgba(242, 181, 68, .16), rgba(242, 181, 68, .03) 60%), var(--midnight-2); border-color: rgba(242, 181, 68, .55); }
.quit-card--silent .quit-card__front .quit-card__title { color: var(--gold); }
.quit-card--silent .badge { align-self: flex-start; margin: 0; }
.quit-card--silent .quit-card__back { background: #FFF8E8; border-color: #F4D58E; }
.flip:not(.is-flipped):hover .flip__inner { transform: rotateY(-7deg); }
.flip.is-flipped:hover .flip__inner { transform: rotateY(173deg); }
.home-quit__more { margin-top: var(--space-7); }
.quit-swipe { display: none; }
@media (max-width: 599px) {
  .quit-swipe { display: flex; align-items: center; gap: .5rem; font-size: var(--fs-xs); color: #A9BDB8; margin: 0 0 .75rem; }
  .quit-swipe::after { content: "→"; color: var(--signal); }
  .quit-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; margin-inline: -1rem; padding: .25rem 1rem 1rem; scroll-padding-inline: 1rem; scrollbar-width: thin; }
  .quit-card { scroll-snap-align: start; min-height: 290px; }
}

/* ---------- 5. Economics ---------- */
.econ-stats { display: grid; gap: clamp(1rem, .6rem + 1.2vw, 1.75rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.econ-stat { display: grid; gap: 1rem; align-content: start; }
.econ-stat__big { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .75rem; }
.econ-stat__from { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--slate); }
.econ-stat__arrow { color: var(--green); font-size: 1.5rem; font-weight: 700; }
.econ-stat .stat { white-space: nowrap; }
.econ-stat__text { font-weight: 600; font-size: var(--fs-lg); margin-bottom: .5rem; }
.econ-body { margin-top: var(--space-8); align-items: start; }
.econ-points { list-style: none; padding: 0; margin: 0; counter-reset: econ; display: grid; gap: 1rem; }
.econ-points li { counter-increment: econ; position: relative; padding-inline-start: 2.75rem; color: var(--slate); }
.econ-points li strong { color: var(--ink); }
.econ-points li::before { content: counter(econ); position: absolute; inset-inline-start: 0; top: 0; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--mist); color: var(--deep); font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-sm); }
.econ-calc { min-width: 0; }
.calc-fallback { padding: 1.5rem; border-radius: var(--radius-lg); background: var(--mist-2); border: 1px solid var(--line); color: var(--slate); margin: 0; }

/* ---------- 6. How it works ---------- */
.how-tabs__list { gap: .5rem; }
.how-tabs__list .tabs__tab { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; }
.how-tabs__n { width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-size: .75rem; background: var(--mist); color: var(--deep); }
.tabs__tab[aria-selected="true"] .how-tabs__n { background: var(--signal); color: var(--midnight); }
.how-panel { display: grid; gap: var(--space-6); align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-xl); padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); box-shadow: var(--shadow-sm); }
@media (min-width: 920px) { .how-panel { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } }
.how-panel__text p { color: var(--slate); }
.how-panel__shot { min-width: 0; }
.how-panel__shot .media { padding: .35rem; }
.how-panel__shot img { border-radius: calc(var(--radius-lg) - 6px); }
/* Companion screenshots are wide UI strips: on small screens keep them readable and let them scroll sideways */
.shot-scroll:focus-visible { outline: none; box-shadow: var(--focus); }
.shot-swipe { display: none; }
@media (max-width: 719px) {
  .shot-scroll { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .shot-scroll img { width: 720px; max-width: none; }
  .shot-swipe { display: inline-flex; align-items: center; gap: .35rem; margin-inline-end: .35rem; font-weight: 600; color: var(--deep); }
  .shot-swipe::after { content: "→"; }
  .section--dark .shot-swipe { color: var(--signal); }
}

/* Approval demo */
.approve-demo { margin-top: var(--space-8); display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 920px) { .approve-demo { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
.approve-demo__intro h3 { font-size: var(--fs-h2); margin: 0; }
.approve-demo__intro > p { color: var(--slate); }
.approve-demo__counter { margin-top: var(--space-5) !important; background: var(--midnight); color: #E6EFEC; border-radius: var(--radius-lg); padding: 1.1rem 1.25rem; max-width: 22rem; }
.approve-demo__counter-label { margin: 0; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .1em; color: #A9BDB8; }
.approve-demo__counter-value { margin: .2rem 0 .4rem; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.5rem); color: var(--signal); line-height: 1.1; font-variant-numeric: tabular-nums; }
.approve-demo__counter-value.is-bump { animation: bump .6s var(--ease); }
.approve-demo__counter .muted { color: #A9BDB8; margin: 0; }
.draft-card { position: relative; background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius-xl); padding: clamp(1.1rem, .9rem + 1vw, 1.75rem); box-shadow: var(--shadow-lg); display: grid; gap: .9rem; transition: border-color .3s; min-width: 0; }
.draft-card__head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.draft-card__amount { font-size: 1.25rem; color: var(--midnight); }
.draft-card__meta { margin: 0; display: grid; gap: .25rem; font-size: var(--fs-sm); }
.draft-card__meta div { display: flex; gap: .75rem; min-width: 0; }
.draft-card__meta dt { color: var(--slate); width: 4.5rem; flex: none; }
.draft-card__meta dd { margin: 0; font-weight: 600; min-width: 0; }
.draft-card__body { background: var(--mist-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; font-size: var(--fs-sm); transition: opacity .3s; }
.draft-card__body p { margin: 0 0 .7em; }
.draft-card__body p:last-child { margin: 0; }
.draft-card__edit .textarea { font-size: var(--fs-sm); min-height: 180px; }
.draft-card__evidence { display: flex; gap: .5rem; align-items: flex-start; margin: 0; font-size: var(--fs-xs); color: var(--slate); }
.draft-card__evidence .icon { color: var(--deep); width: 1.1rem; height: 1.1rem; }
.draft-card__actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; }
.draft-card__actions .btn { min-height: 44px; }
/* transparent fill: the key hint keeps the button's own contrast (white on Deep Green 5.7:1) */
.draft-card__actions kbd { font-size: .75rem; padding: 0 .35rem; background: transparent; border-color: currentColor; color: inherit; }
.draft-card__result { margin: 0; font-weight: 600; color: var(--deep); }
.draft-card.is-rejected { border-color: #E9B8B4; }
.draft-card.is-rejected .draft-card__result { color: var(--error); }
.draft-card.is-rejected .draft-card__body { opacity: .5; }
.draft-card.is-approved { border-color: var(--green); }
.draft-card.is-approved::after { content: ""; position: absolute; top: -18px; inset-inline-end: -10px; width: 56px; height: 56px; border-radius: 50%; background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/60% no-repeat; box-shadow: 0 0 0 6px rgba(18, 160, 108, .18), var(--shadow); animation: stamp .55s var(--ease) both; }
.draft-card__funnel { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.draft-card__funnel li { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .75rem; border-radius: var(--radius-pill); background: var(--mist); color: var(--slate); font-size: var(--fs-xs); font-weight: 600; transition: background-color .3s, color .3s; }
.draft-card__funnel li + li { position: relative; margin-inline-start: 1rem; }
.draft-card__funnel li + li::before { content: ""; position: absolute; inset-inline-start: -1.15rem; top: 50%; width: .9rem; height: 2px; background: var(--line); }
.draft-card__funnel li.is-on + li.is-on::before { background: var(--deep); }
.draft-card__funnel li.is-on { background: var(--deep); color: #fff; }
.draft-card__next { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; }
@keyframes stamp { from { opacity: 0; transform: scale(1.8) rotate(-20deg); } to { opacity: 1; transform: none; } }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } }

/* ---------- 7. People + AI ---------- */
.roles { display: grid; gap: 1.25rem; }
.roles__picker { display: flex; flex-wrap: wrap; gap: .5rem; }
.roles__btn { border: 1.5px solid var(--line); background: #fff; border-radius: var(--radius-pill); padding: .6rem 1.15rem; min-height: 44px; font: 600 .95rem var(--font-text); color: var(--slate); cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; }
.roles__btn:hover { border-color: var(--deep); color: var(--midnight); }
.roles__btn[aria-pressed="true"] { background: var(--midnight); color: #fff; border-color: var(--midnight); }
.role-panel { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); animation: fadeUp .35s var(--ease); }
.role-panel__item { background: var(--mist-2); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.25rem; }
.role-panel__item p { margin: 0; }
.role-panel__item p + p { margin-top: .4rem; }
.role-panel__label { font-family: var(--font-mono); font-size: var(--fs-xs) !important; text-transform: uppercase; letter-spacing: .1em; color: var(--deep); margin-bottom: .5rem !important; }
.role-panel__item--reva { background: var(--midnight); border-color: var(--midnight); color: #E6EFEC; position: relative; }
.role-panel__item--reva .role-panel__label { color: var(--signal); }
.role-panel__item--reva .muted { color: #A9BDB8; }
.roles__soon { margin-top: 1rem !important; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; color: var(--slate); font-size: var(--fs-sm); }
.skills-intro { margin-top: var(--space-8); padding-top: var(--space-8); border-top: 1px solid var(--line); display: grid; gap: var(--space-6); }
.skills-intro__text { display: grid; gap: var(--space-5) var(--space-8); align-items: start; }
@media (min-width: 920px) { .skills-intro__text { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
.skills-intro__text > * { min-width: 0; }
.skills-intro__title { font-size: var(--fs-h2); }
.skills-intro__text .list-check { margin: 0; }

/* ---------- 8. Meet Reva ---------- */
.home-reva__top { align-items: center; }
.home-reva__hero { min-width: 0; }
.home-reva__media { background: #E9EAEA; }
.home-reva__cards { margin-top: var(--space-8); }
.reva-card { display: flex; flex-direction: column; gap: .85rem; }
.reva-card .badge { align-self: flex-start; margin: 0; }
.reva-card h3 { margin: 0; }
.reva-card p { margin: 0; color: #C7D8D3; }
.reva-card .list-check { margin: 0; font-size: var(--fs-sm); color: #E6EFEC; }
.reva-card .link-arrow { margin-top: auto; }
.reva-card__figure { margin: 0; min-width: 0; }
.reva-card__figure figcaption { margin-top: .45rem; }
.reva-card__shot { border-radius: var(--radius); box-shadow: none; border: 1px solid var(--line-dark); }
.reva-states { margin-top: var(--space-8); }
.reva-states__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.reva-states__head h3 { margin: 0; }
.reva-states__picker { display: flex; flex-wrap: wrap; gap: .4rem; }
.reva-states__picker button { border: 1.5px solid rgba(255, 255, 255, .2); background: transparent; color: #C7D8D3; border-radius: var(--radius-pill); padding: .45rem .9rem; min-height: 44px; font: 600 .9rem var(--font-text); cursor: pointer; }
.reva-states__picker button:hover { border-color: var(--signal); color: #fff; }
.reva-states__picker button[aria-pressed="true"] { background: var(--signal); border-color: var(--signal); color: var(--midnight); }
.reva-states__media { position: relative; background: #E9EAEA; }
.reva-states__focus { position: absolute; top: 0; bottom: 0; left: calc(var(--state, 1) * 20%); width: 20%; border: 2px solid var(--gold); border-radius: 14px; box-shadow: 0 0 0 100vmax rgba(11, 31, 36, .45); transition: left .45s var(--ease); pointer-events: none; }

/* ---------- 9. Free vs paid ---------- */
.offer-grid { display: grid; gap: clamp(1rem, .6rem + 1.2vw, 1.75rem); align-items: stretch; }
@media (min-width: 980px) { .offer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); } }
.offer-col { border-radius: var(--radius-xl); padding: clamp(1.25rem, 1rem + 1.4vw, 2.25rem); border: 1px solid var(--line); display: grid; gap: 1.25rem; align-content: start; min-width: 0; }
.offer-col--free { background: var(--mist-2); }
.offer-col--paid { background: #fff; box-shadow: var(--shadow); }
.offer-col__head h3 { margin: .5rem 0 0; }
.offer-col__head .badge { margin: 0; }
.offer-col__head--paid { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.offer-col__head--paid .segmented button { padding: .55rem .9rem; min-height: 44px; }
.free-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.free-list li { display: flex; gap: .85rem; align-items: flex-start; }
.free-list .icon { width: 1.5rem; height: 1.5rem; color: var(--deep); margin-top: .1rem; }
.free-list a { font-weight: 600; }
.free-list p { margin: .1rem 0 0; font-size: var(--fs-sm); color: var(--slate); }
.plan-rows { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.plan-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .75rem 1.25rem; align-items: center; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.plan-row--featured { border: 2px solid var(--deep); background: #F4FBF8; }
.plan-row__info { min-width: 0; }
.plan-row__name { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.plan-row__name .badge { margin: 0; }
.plan-row__blurb { margin: .2rem 0 0; font-size: var(--fs-xs); color: var(--slate); }
.plan-row__price { display: flex; align-items: baseline; gap: .2rem; white-space: nowrap; }
.plan-row__amount { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; letter-spacing: -.02em; }
.plan-row__per { font-size: var(--fs-sm); color: var(--slate); }
@media (max-width: 560px) {
  .plan-row { grid-template-columns: minmax(0, 1fr) auto; }
  .plan-row__info { grid-column: 1 / -1; }
}
.offer-col__includes { margin: 0; font-size: var(--fs-sm); }
.offer-col .xsmall { margin: 0; }
.early-callout { margin-top: var(--space-7); display: grid; gap: var(--space-5); align-items: center; background: var(--midnight) url("/assets/img/brand/pattern-ledger-checks-dark.svg") center/420px; color: #E6EFEC; border-radius: var(--radius-xl); padding: clamp(1.5rem, 1rem + 2vw, 2.75rem); box-shadow: var(--shadow-lg); }
@media (min-width: 900px) { .early-callout { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-6); } }
.early-callout .eyebrow { color: var(--gold); margin-bottom: .4rem; }
.early-callout h3 { color: #fff; margin-bottom: .5rem; }
.early-callout p { color: #C7D8D3; }
.early-callout strong { color: var(--gold); }
.early-callout .progress { background: rgba(255, 255, 255, .12); max-width: 26rem; margin-block: .75rem .4rem; }
.early-callout__badge { width: 112px; height: 112px; border-radius: 50%; background: var(--gold); color: var(--midnight); display: grid; place-content: center; text-align: center; box-shadow: 0 0 0 10px rgba(242, 181, 68, .16); }
.early-callout__badge span { font-family: var(--font-display); font-weight: 700; font-size: 2.2rem; line-height: 1; letter-spacing: -.03em; }
.early-callout__badge small { font-weight: 600; text-transform: uppercase; letter-spacing: .14em; font-size: .75rem; }
.early-callout__cta { display: grid; gap: .75rem; justify-items: center; }
.early-callout__cta .link-arrow { color: var(--signal); font-size: var(--fs-sm); }
@media (max-width: 899px) { .early-callout__badge { width: 84px; height: 84px; } .early-callout__badge span { font-size: 1.7rem; } .early-callout__cta { justify-items: start; } }

/* ---------- 10. Trust ---------- */
.trust-card h3 { font-size: 1.2rem; }
.trust-card p { color: var(--slate); margin: 0; font-size: var(--fs-sm); }
.home-trust__more { margin-top: var(--space-7); }

/* ---------- 11. FAQ ---------- */
.faq-list { border-top: 1px solid var(--line); }
.home-faq__more { margin-top: var(--space-6); color: var(--slate); }
.link-button { background: none; border: 0; padding: 0; font: inherit; color: var(--deep); text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .18em; cursor: pointer; }
.link-button:hover { color: var(--deep-2); }

/* ---------- 12. Final CTA ---------- */
.home-final .cta-band { box-shadow: var(--shadow-lg); }
.home-final .cta-band .eyebrow { color: var(--signal); }
.home-final .cta-band a:not(.btn) { color: var(--signal); }
.home-final__left { display: flex; align-items: center; gap: .6rem; color: #C7D8D3; }
.home-final__left strong { color: var(--gold); font-family: var(--font-mono); font-weight: 500; }
.home-final__form { background: rgba(255, 255, 255, .04); border: 1px solid var(--line-dark); border-radius: var(--radius-lg); padding: clamp(1rem, .8rem + 1vw, 1.5rem); min-width: 0; }
.home-final__form-title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: #fff; }
.home-final__form .form-inline .btn { flex: 1 0 auto; }
.home-final__form .checkbox { color: #C7D8D3; }
.home-final__legal { color: #8FA8A2; margin: 0; }
.home-final__secondary { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--line-dark); }
.home-final form.is-done .form-inline, .home-final form.is-done .checkbox { display: none; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .radar__sweep, .radar__blip, .radar__draft.is-ready .radar__approve, .cycle-arc.is-next { animation: none; }
  .flip:not(.is-flipped):hover .flip__inner { transform: none; }
  .flip.is-flipped:hover .flip__inner { transform: rotateY(180deg); }
}