/* benharveyfit ai — landing page (10x rebuild, 2026-06-30).
   Builds on styles.css (the "Jailhouse" base: #161413 concrete, one burnt-rust accent,
   Oswald/Anton poster type, double rust frame, tally streak). This file owns the marketing
   page: coach-first hero with a live self-typing chat, the loop, the score ring, pricing,
   scroll-reveal motion. Positioning: the AI accountability coach is the product; the
   Physique Score is the free proof beat; the law is NEVER MISS TWICE. */

:root {
  --anton: "Anton", "Oswald", "Arial Narrow", system-ui, sans-serif;
  --rust2: #E0703F;            /* a touch brighter for gradients/highlights */
  --maxw: 1160px;
}

/* ── shared rhythm ─────────────────────────────────────────────── */
/* overflow-x clip on the root kills any stray horizontal scroll WITHOUT breaking the
   sticky nav (clipping on a wrapper element would). */
html { overflow-x: clip; }
.land { position: relative; z-index: 1; }
.section { max-width: var(--maxw); margin: 0 auto; padding: 104px 24px; }
.eyebrow { display: inline-block; font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; font-size: 12.5px; color: var(--rust-text); }
.eyebrow-new { color: var(--text); background: var(--rust); padding: 5px 12px; border-radius: 999px; letter-spacing: 0.12em; }
.h2 { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.005em; line-height: 0.96; font-size: clamp(34px, 5.4vw, 58px); margin-top: 14px; }
.lede { color: var(--text70); font-size: 17px; line-height: 1.62; margin-top: 18px; max-width: 560px; }
.center { text-align: center; }
.center-lede { margin-left: auto; margin-right: auto; }
.center .lede { margin-left: auto; margin-right: auto; }
b { color: var(--text); font-weight: 700; }

/* ── scroll-reveal ─────────────────────────────────────────────── */
/* Hidden state is gated behind html.js so anyone without JS (or before JS runs)
   always sees content — the primary CTAs can never stay invisible. */
html.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); will-change: opacity, transform; }
html.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.js .reveal { opacity: 1 !important; transform: none !important; transition: none; } }

/* ── top nav ───────────────────────────────────────────────────── */
.nav { position: sticky; top: 0; z-index: 60; backdrop-filter: blur(12px); background: rgba(22,20,19,0.55); border-bottom: 1px solid transparent; transition: background .25s ease, border-color .25s ease; }
.nav.scrolled { background: rgba(18,16,15,0.85); border-bottom: 1px solid var(--hairline); }
.nav-in { max-width: var(--maxw); margin: 0 auto; padding: 15px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.nav .brand { font-size: 19px; text-decoration: none; color: var(--text); }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a:not(.btn) { color: var(--text70); text-decoration: none; font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: 13px; transition: color .15s ease; }
.nav-links a:not(.btn):hover { color: var(--text); }
.btn.small { width: auto; padding: 11px 20px; font-size: 13px; }

/* mobile hamburger — hidden on desktop; below 860px it replaces the in-page nav links
   with a full-width dropdown instead of deleting them outright */
.nav-burger { display: none; width: 42px; height: 42px; border: 1px solid var(--hairline); border-radius: 10px; background: transparent; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.nav-burger span { display: block; width: 18px; height: 2px; background: var(--text); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.nav.nav-open .nav-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
.nav.nav-open .nav-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 860px) {
  .nav-burger { display: inline-flex; }
  .nav-links { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: rgba(18,16,15,0.97); backdrop-filter: blur(12px); border-bottom: 1px solid var(--hairline); padding: 6px 24px 18px; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .2s ease, transform .2s ease, visibility .2s ease; }
  .nav.nav-open .nav-links { opacity: 1; visibility: visible; transform: none; }
  .nav-links .navlink { display: block; padding: 13px 0; border-bottom: 1px solid var(--hairline); font-size: 14px; }
  .nav-links .btn.small { width: 100%; margin-top: 14px; }
}

/* pause every infinite ambient animation when the tab is backgrounded — no compositor/battery
   burn while nobody is watching (fx.js/landing.js toggle body.fx-paused on visibilitychange) */
body.fx-paused .fx-aurora span,
body.fx-paused .fx-progress,
body.fx-paused .phone,
body.fx-paused .outnow .dot,
body.fx-paused .appstore-btn::after { animation-play-state: paused !important; }

/* ── ambient hero backdrop ─────────────────────────────────────── */
.hero-land { position: relative; display: grid; grid-template-columns: 1.06fr 0.94fr; gap: 48px; align-items: center; max-width: var(--maxw); margin: 0 auto; padding: 72px 24px 56px; }
.hero-land::before { content: ""; position: absolute; inset: -30% 0 -10% 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(50% 50% at 72% 38%, rgba(191,84,48,0.20), transparent 70%),
    radial-gradient(40% 40% at 18% 8%, rgba(191,84,48,0.10), transparent 70%);
  filter: blur(8px); }
.hero-copy h1 { font-family: var(--anton); font-weight: 400; text-transform: uppercase; line-height: 0.9; letter-spacing: 0.004em; font-size: clamp(42px, 6.6vw, 84px); margin: 16px 0 0; }
.hero-copy h1 .rust { color: var(--rust); }
.hero-copy .lede { font-size: 19px; max-width: 510px; }

/* "OUT NOW" pill with a live dot */
.outnow { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--rust-mid); background: var(--rust-ghost); font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; font-size: 12.5px; color: var(--text); }
.outnow .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--rust); box-shadow: 0 0 0 0 rgba(191,84,48,0.6); animation: pulse 2.4s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(191,84,48,0.55); } 70% { box-shadow: 0 0 0 12px rgba(191,84,48,0); } 100% { box-shadow: 0 0 0 0 rgba(191,84,48,0); } }

.cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; align-items: center; }
.cta-note { margin-top: 18px; color: var(--text45); font-size: 13px; max-width: 520px; }
.center .cta-note { margin-left: auto; margin-right: auto; }
.cta-note b { color: var(--text70); }
.cta-note-inline { margin-top: 14px; color: var(--text45); font-size: 13.5px; max-width: 520px; }

/* App Store button (drawn in CSS, stays crisp, no asset) */
.appstore-btn { display: inline-flex; align-items: center; gap: 12px; padding: 13px 22px; border-radius: 13px; background: var(--text); color: #0c0b0a; text-decoration: none; transition: transform .06s ease, filter .15s ease; }
.appstore-btn:hover { filter: brightness(0.94); }
.appstore-btn:active { transform: translateY(1px); }
.appstore-btn svg { width: 28px; height: 28px; flex: none; }
.appstore-btn .as-txt { display: flex; flex-direction: column; line-height: 1.05; text-align: left; }
.appstore-btn .as-sm { font-size: 11px; font-weight: 600; letter-spacing: 0.02em; }
.appstore-btn .as-lg { font-family: var(--display); font-weight: 700; font-size: 21px; letter-spacing: 0.01em; }
.appstore-btn.full { width: 100%; justify-content: center; }

.btn.web-login { width: auto; padding: 15px 26px; font-size: 16px; }
.btn.full { width: 100%; }

/* ── phone device + recreated app UI ───────────────────────────── */
/* min-width:0 lets these grid/flex children shrink below their content's intrinsic
   width instead of forcing the column wider than the viewport (mobile overflow fix). */
.hero-copy, .hero-device, .media, .split > * { min-width: 0; }
.hero-device, .media { display: flex; justify-content: center; }
.phone { position: relative; width: min(340px, 82vw); aspect-ratio: 1170 / 2400; border-radius: 50px; padding: 11px;
  background: linear-gradient(160deg, #353029, #100f0e 62%);
  box-shadow: 0 50px 110px rgba(0,0,0,0.62), 0 0 0 2px rgba(255,255,255,0.05), inset 0 0 0 2px rgba(0,0,0,0.55);
  animation: float 8s ease-in-out infinite; }
.phone-static { animation: none; }
.phone-glow { position: absolute; inset: -14% -10%; z-index: -1; background: radial-gradient(closest-side, rgba(191,84,48,0.30), transparent 72%); filter: blur(26px); }
.phone-screen { position: relative; height: 100%; border-radius: 40px; overflow: hidden; background: #100E0D; display: flex; flex-direction: column;
  background-image: radial-gradient(120% 60% at 50% -10%, rgba(191,84,48,0.10), transparent 55%); }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@media (prefers-reduced-motion: reduce) { .phone, .outnow .dot { animation: none; } }

.app-status { display: flex; justify-content: space-between; align-items: center; padding: 12px 22px 4px; font-size: 12.5px; font-weight: 700; color: var(--text); }
.app-status-r { display: inline-flex; gap: 6px; align-items: center; }
.app-status .sig { width: 16px; height: 10px; background: var(--text); -webkit-mask: linear-gradient(90deg,#000 60%,transparent 0) bottom/4px 100% repeat-x; mask: none; border-radius: 1px; opacity: .9; }
.app-status .bat { width: 22px; height: 11px; border: 1.5px solid var(--text); border-radius: 3px; position: relative; opacity: .9; }
.app-status .bat::after { content: ""; position: absolute; inset: 1.5px; background: var(--text); border-radius: 1px; }
.app-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 18px 12px; border-bottom: 1px solid var(--hairline); }
.app-brand { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; font-size: 16px; }
.app-streak { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.app-streak .tally { height: 14px; }
.app-streak .tally i { height: 13px; }
.streak-n { font-family: var(--display); font-weight: 600; letter-spacing: 0.1em; font-size: 8.5px; color: var(--text45); }

/* chat scroll area */
.chat { flex: 1; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 9px; padding: 16px 14px 8px; }
.bub { max-width: 82%; padding: 9px 13px; font-size: 12.5px; line-height: 1.4; border-radius: 14px; }
.bub.coach { align-self: flex-start; background: #221F1D; color: var(--text); border-bottom-left-radius: 5px; }
.bub.me { align-self: flex-end; background: var(--rust); color: #160D08; font-weight: 600; border-bottom-right-radius: 5px; }
.bub.typing { display: inline-flex; gap: 4px; align-items: center; padding: 13px 14px; }
.bub.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--text45); animation: blink 1.2s infinite; }
.bub.typing i:nth-child(2) { animation-delay: .2s; }
.bub.typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%,60%,100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }

/* live-chat entrance */
.bub.enter { animation: bubIn .34s cubic-bezier(.2,.8,.2,1) both; }
@keyframes bubIn { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }

.adjust-card { border: 1px solid var(--rust-mid); border-radius: 12px; padding: 12px 13px; background: linear-gradient(180deg, rgba(191,84,48,0.08), transparent); }
.adjust-h { display: flex; justify-content: space-between; font-family: var(--display); font-weight: 600; letter-spacing: 0.12em; font-size: 9px; color: var(--text45); }
.adjust-t { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 16px; margin-top: 6px; }
.adjust-s { font-size: 11px; line-height: 1.45; color: var(--text70); margin-top: 5px; }

.chip-row { display: flex; gap: 7px; align-self: flex-start; flex-wrap: wrap; }
.dchip { font-family: var(--display); font-weight: 700; letter-spacing: 0.06em; font-size: 11px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--rust-mid); color: var(--text); }
.dchip.done { background: var(--rust); color: #160D08; border-color: transparent; }

.app-bar { padding: 8px 12px 14px; border-top: 1px solid var(--hairline); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.qchip { font-family: var(--display); font-weight: 700; letter-spacing: 0.04em; font-size: 10px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--rust-mid); color: var(--text); }
.qchip.on { background: var(--rust); color: #160D08; border-color: transparent; }
.app-input { flex: 1 1 100%; margin-top: 8px; display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-radius: 999px; background: #1A1817; border: 1px solid var(--hairline); color: var(--text45); font-size: 12px; }
.app-input .send { width: 22px; height: 22px; border-radius: 50%; background: var(--rust-ghost); position: relative; flex: none; }
.app-input .send::after { content: "↑"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--rust); font-size: 13px; font-weight: 700; }

@media (max-width: 900px) {
  .hero-land { grid-template-columns: 1fr; text-align: center; padding-top: 44px; gap: 30px; }
  .hero-copy .lede, .hero-copy .outnow { margin-left: auto; margin-right: auto; }
  .cta-row { justify-content: center; }
  /* Copy leads on mobile — the headline + both CTAs must own the first screen for App-Store
     traffic; the decorative phone follows (was order:-1, which buried the whole pitch below the
     fold on a 390px viewport). */
  .cta-note { margin-left: auto; margin-right: auto; }
}
@media (max-width: 480px) {
  .section { padding-left: 20px; padding-right: 20px; }
  .hero-land { padding-left: 20px; padding-right: 20px; }
  .phone { width: min(312px, 84vw); }
  .nav-in { padding: 13px 18px; }
  .nav .brand { font-size: 17px; }
  .btn.small { padding: 9px 14px; font-size: 12px; }
  .cta-row .appstore-btn, .cta-row .btn.web-login, .cta-band .appstore-btn, .cta-band .btn.web-login { width: 100%; justify-content: center; }
}

/* ── trust strip ───────────────────────────────────────────────── */
.trust { border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); background: linear-gradient(180deg, rgba(255,255,255,0.015), transparent); }
.trust-in { max-width: var(--maxw); margin: 0 auto; padding: 26px 24px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.trust-item { flex: 1; min-width: 140px; text-align: center; }
.trust-item .tn { font-family: var(--anton); font-weight: 400; font-size: clamp(26px, 3.4vw, 38px); line-height: 0.96; color: var(--text); text-transform: uppercase; }
.trust-item .tn.law { color: var(--rust); font-size: clamp(18px, 2.2vw, 24px); line-height: 1.04; }
.trust-item .tl { margin-top: 8px; font-size: 12px; color: var(--text45); letter-spacing: 0.02em; }
.trust-sep { width: 1px; align-self: stretch; background: var(--hairline); }
@media (max-width: 720px) { .trust-sep { display: none; } .trust-item { min-width: 42%; } }

/* ── problem block ─────────────────────────────────────────────── */
.problem { padding-bottom: 84px; }
.bigquote { font-family: var(--anton); font-weight: 400; text-transform: uppercase; line-height: 1.02; letter-spacing: 0.004em; font-size: clamp(28px, 4.6vw, 52px); margin: 16px auto 0; max-width: 880px; }
.bigquote .rust { color: var(--rust); }
.problem .lede { max-width: 620px; }

/* ── launch film ───────────────────────────────────────────────── */
.video-wrap { position: relative; margin: 44px auto 0; max-width: 920px; border-radius: 18px; overflow: hidden; border: 1px solid var(--hairline); box-shadow: 0 50px 110px rgba(0,0,0,0.55); }
.video-wrap::before { content: ""; position: absolute; inset: -40% -10%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(191,84,48,0.22), transparent 70%); filter: blur(20px); }
.video-wrap video { width: 100%; display: block; background: #000; }

/* ── split feature rows ────────────────────────────────────────── */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split.reverse .media { order: 2; }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 38px; }
  .split.reverse .media { order: 0; }
}

/* "what you can say" list */
.say-list { list-style: none; display: grid; gap: 11px; margin-top: 26px; }
.say-list li { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 14.5px; color: var(--text70); }
.say-list .say { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; color: var(--text); background: var(--surface); border: 1px solid var(--hairline); padding: 7px 12px; border-radius: 8px; }
.say-list .arr { color: var(--rust); font-weight: 700; }

/* ── the loop ──────────────────────────────────────────────────── */
.loop-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 48px; }
.loop-card { position: relative; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--corner); padding: 26px 22px; text-align: left; transition: border-color .2s ease, transform .2s ease; }
.loop-card:hover { border-color: var(--rust-mid); transform: translateY(-3px); }
.loop-ico { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--rust-ghost); color: var(--rust); border: 1px solid var(--rust-mid); }
.loop-ico svg { width: 24px; height: 24px; }
.loop-n { position: absolute; top: 22px; right: 24px; font-family: var(--display); font-weight: 700; color: var(--text25); font-size: 16px; }
.loop-card h3 { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; font-size: 20px; margin: 18px 0 8px; }
.loop-card p { color: var(--text70); font-size: 13.5px; line-height: 1.55; }
@media (max-width: 900px) { .loop-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .loop-grid { grid-template-columns: 1fr; } }

/* ── protocol strip ────────────────────────────────────────────── */
.proto-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 44px; }
.proto-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--tile-corner); padding: 24px 18px; text-align: left; transition: border-color .2s ease; }
.proto-card:hover { border-color: var(--rust-mid); }
.proto-card .n { font-family: var(--display); font-weight: 700; color: var(--rust); font-size: 14px; }
.proto-card .t { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 27px; margin-top: 6px; letter-spacing: 0.01em; }
.proto-card .s { color: var(--text45); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; margin-top: 6px; }
.proto-law { text-align: center; margin-top: 36px; font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: clamp(22px, 4vw, 34px); color: var(--rust); }
@media (max-width: 720px) { .proto-grid { grid-template-columns: repeat(2, 1fr); } }

/* ── physique score ring + bars ────────────────────────────────── */
.score-stage { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--hairline); border-radius: 20px; padding: 30px 26px; box-shadow: 0 30px 70px rgba(0,0,0,0.4); position: relative; }
.score-stage::before { content: ""; position: absolute; inset: -1px; border-radius: 20px; padding: 1px; background: linear-gradient(160deg, var(--rust-mid), transparent 50%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.ring { position: relative; width: 220px; height: 220px; margin: 0 auto 12px; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-track { fill: none; stroke: var(--surface-hi); stroke-width: 13; }
.ring-fill { fill: none; stroke: var(--rust); stroke-width: 13; stroke-linecap: round; stroke-dasharray: 540; stroke-dashoffset: 540; transition: stroke-dashoffset 1.5s cubic-bezier(.2,.7,.2,1); filter: drop-shadow(0 0 6px rgba(191,84,48,0.5)); }
.ring-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.ring-label { font-family: var(--display); font-weight: 600; letter-spacing: 0.16em; font-size: 10px; color: var(--text45); }
.ring-num { font-family: var(--anton); font-weight: 400; font-size: 72px; line-height: 0.9; color: var(--rust); margin-top: 4px; }
.ring-sub { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 12px; letter-spacing: 0.02em; margin-top: 4px; }
.ring-delta { font-family: var(--display); font-weight: 700; font-size: 12px; color: var(--rust); margin-top: 6px; }
.bars { display: grid; gap: 11px; margin-top: 8px; }
.bar { display: grid; grid-template-columns: 92px 1fr 26px; align-items: center; gap: 10px; font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; font-size: 11px; }
.bar .bl { color: var(--text70); }
.bar .bt { height: 6px; border-radius: 3px; background: var(--surface-hi); overflow: hidden; }
.bar .bt i { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--rust); transition: width 1.1s cubic-bezier(.2,.7,.2,1); }
.score-stage.in .bar .bt i { width: var(--w); }
.bar .bv { color: var(--text); text-align: right; }

/* ── everywhere ────────────────────────────────────────────────── */
.where-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 48px; }
.where { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--corner); padding: 30px 26px; transition: border-color .2s ease, transform .2s ease; }
.where:hover { border-color: var(--rust-mid); transform: translateY(-3px); }
.where-ico { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: var(--rust-ghost); color: var(--rust); border: 1px solid var(--rust-mid); margin: 0 auto; }
.where-ico svg { width: 26px; height: 26px; }
.where h3 { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; font-size: 20px; margin: 16px 0 8px; }
.where p { color: var(--text70); font-size: 13.5px; line-height: 1.55; }
@media (max-width: 760px) { .where-grid { grid-template-columns: 1fr; } }

/* ── the math (price anchor) ───────────────────────────────────── */
.vs-wrap { max-width: 820px; margin: 44px auto 0; background: var(--surface); border: 1px solid var(--hairline); border-radius: 18px; overflow: hidden; text-align: left; }
.vs-head, .vs-row { display: grid; grid-template-columns: 110px 1fr 1fr; gap: 14px; align-items: center; padding: 15px 22px; }
.vs-head { border-bottom: 1px solid var(--hairline); background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent); font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; }
.vs-head .vs-them { color: var(--text45); }
.vs-head .vs-us { color: var(--rust); }
.vs-row { border-bottom: 1px solid var(--hairline); font-size: 14px; }
.vs-row:last-child { border-bottom: none; }
.vs-col-label { font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; font-size: 11px; color: var(--text45); }
.vs-row .vs-them { color: var(--text70); }
.vs-row .vs-us { color: var(--text); font-weight: 600; }
@media (max-width: 640px) {
  .vs-head, .vs-row { grid-template-columns: 84px 1fr 1fr; padding: 13px 16px; gap: 10px; }
  .vs-row { font-size: 12.5px; }
  .vs-head { font-size: 10.5px; }
}

/* ── pricing ───────────────────────────────────────────────────── */
.price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 820px; margin: 48px auto 0; align-items: stretch; }
.price-card { position: relative; background: var(--surface); border: 1px solid var(--hairline); border-radius: 18px; padding: 32px 28px; display: flex; flex-direction: column; }
.price-card.hero-card { border-color: var(--rust-mid); background: linear-gradient(180deg, rgba(191,84,48,0.07), var(--surface) 60%); box-shadow: 0 30px 70px rgba(0,0,0,0.4); }
.price-badge { position: absolute; top: -13px; left: 28px; background: var(--rust); color: #160D08; font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 11px; padding: 6px 13px; border-radius: 999px; }
.price-tier { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 14px; color: var(--rust); }
.price-amt { font-family: var(--anton); font-weight: 400; font-size: 52px; line-height: 1; margin-top: 8px; }
.price-amt .price-yr { font-size: 22px; color: var(--text45); }
.price-per { color: var(--text45); font-size: 13px; margin-top: 6px; }
.price-feats { list-style: none; display: grid; gap: 11px; margin: 22px 0 26px; }
.price-feats li { position: relative; padding-left: 26px; font-size: 14px; color: var(--text70); line-height: 1.45; }
.price-feats li::before { content: ""; position: absolute; left: 0; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--rust-ghost);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BF5430' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); background-size: 11px; background-repeat: no-repeat; background-position: center; }
/* App-only feature tag. The card carries BOTH an App Store CTA and "Start free on web", so any
   line web can't deliver (no photo upload, no projection surface, no push nudges on web) gets an
   honest platform tag instead of dead-ending a visitor who starts on web. Same display-font
   pill language as .price-badge/.eyebrow-new, muted so it annotates rather than shouts. */
.price-feats .feat-app { display: inline-block; margin-left: 6px; font-family: var(--display); font-weight: 600; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text45); border: 1px solid var(--hairline); border-radius: 999px; padding: 2px 8px; vertical-align: 1px; white-space: nowrap; }
.price-card .btn, .price-card .appstore-btn { margin-top: auto; }
@media (max-width: 720px) { .price-grid { grid-template-columns: 1fr; } }

/* ── final CTA band ────────────────────────────────────────────── */
.cta-band { text-align: center; border-top: 1px solid var(--hairline); background: linear-gradient(180deg, rgba(191,84,48,0.08), transparent); }
.cta-band .btn-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }

/* ── footer ────────────────────────────────────────────────────── */
.land-foot { text-align: center; padding: 52px 24px 70px; color: var(--text45); font-size: 13px; line-height: 2; border-top: 1px solid var(--hairline); }
.land-foot a { color: var(--text70); text-decoration: none; border-bottom: 1px solid var(--hairline); }
.land-foot a:hover { color: var(--text); }
.land-foot .brand { font-size: 16px; margin-bottom: 8px; display: inline-block; }

/* ── footer: built by Ben ──────────────────────────────────────── */
.built-by { max-width: 460px; margin: 26px auto 0; padding-top: 22px; border-top: 1px solid var(--hairline); }
.built-line { display: block; font-family: var(--display); font-weight: 600; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text70); margin-bottom: 14px; }
.built-line::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--rust); margin-right: 9px; vertical-align: 1px; }
.social-row { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.land-foot .social-row a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border: 1px solid var(--hairline); border-radius: 999px; color: var(--text70); font-size: 13px; line-height: 1; transition: color 0.15s ease, border-color 0.15s ease; }
.land-foot .social-row a:hover { color: var(--text); border-color: var(--rust-mid); }
.social-row svg { width: 15px; height: 15px; flex: none; color: var(--rust); }

/* ── footer: meet the founder → benharveyai.com ────────────────── */
.land-foot .founder-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 10px 20px; border: none; border-radius: 999px; background: var(--rust); color: #160D08; font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: 0.04em; transition: filter 0.15s ease, transform 0.15s ease; }
.land-foot .founder-link:hover { color: #160D08; filter: brightness(1.06); transform: translateY(-1px); }
.founder-arrow { transition: transform 0.15s ease; }
.land-foot .founder-link:hover .founder-arrow { transform: translateX(3px); }

/* ── conversation gallery (learn-by-example + proof) ───────────────────────── */
.gallery { display: grid; grid-template-columns: minmax(300px, 358px) minmax(0, 1fr); gap: 46px; align-items: start; max-width: var(--maxw); margin: 46px auto 0; }
.gallery-phone-wrap { display: flex; justify-content: center; position: sticky; top: 88px; }
.gallery .phone { animation: none; }
.gallery-index { min-width: 0; }
.gallery-index-head { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 13px; color: var(--text); margin-bottom: 4px; }
.gallery-index-head span { color: var(--text45); font-weight: 600; letter-spacing: 0.04em; }
.gchips { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; margin-top: 14px; }
.gchip-group { flex: 0 0 100%; font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; font-size: 10.5px; color: var(--rust); margin: 14px 0 2px; padding-top: 12px; border-top: 1px solid var(--hairline); }
.gchip-group:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.gchip { font-size: 13px; line-height: 1.2; color: var(--text70); background: var(--surface); border: 1px solid var(--hairline); padding: 8px 13px; border-radius: 999px; cursor: pointer; transition: border-color .18s ease, color .18s ease, background .18s ease, transform .18s ease; }
.gchip:hover { border-color: var(--rust-mid); color: var(--text); transform: translateY(-1px); }
.gchip.active { background: var(--rust); border-color: transparent; color: #160D08; font-weight: 600; }

/* interactive-looking cards inside the phone */
.gcard { align-self: flex-start; max-width: 90%; border: 1px solid var(--rust-mid); border-radius: 13px; padding: 12px 13px; background: linear-gradient(180deg, rgba(191,84,48,0.11), rgba(255,255,255,0.015)); }
.gcard-h { display: flex; justify-content: space-between; font-family: var(--display); font-weight: 600; letter-spacing: 0.12em; font-size: 9px; color: var(--text45); }
.gcard-h .x { opacity: .5; }
.gcard-t { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 15.5px; line-height: 1.06; margin-top: 6px; color: var(--text); }
.gcard-s { font-size: 11px; line-height: 1.45; color: var(--text70); margin-top: 5px; }
.gcard-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.gchip-pill { font-family: var(--display); font-weight: 700; letter-spacing: 0.06em; font-size: 10.5px; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--rust-mid); color: var(--text); }
.gcard-rows { display: grid; gap: 6px; margin-top: 10px; }
.gcard-row { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--hairline); padding-top: 6px; font-size: 11.5px; color: var(--text70); }
.gcard-row b { color: var(--text); font-weight: 700; }
.gcard-cta { display: block; width: 100%; margin-top: 11px; padding: 8px 12px; border-radius: 9px; border: 1px solid var(--rust-mid); background: var(--rust-ghost); color: var(--rust); font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 11px; cursor: pointer; transition: background .18s ease, color .18s ease; }
.gcard-cta:hover { background: var(--rust); color: #160D08; }
.gcard-cta.done { background: var(--rust); color: #160D08; border-color: transparent; cursor: default; }
.gcard-score { display: flex; align-items: baseline; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.gscore-num { font-family: var(--anton); font-weight: 400; font-size: 46px; line-height: 0.9; color: var(--rust); }
.gscore-max { font-family: var(--display); font-weight: 700; font-size: 14px; color: var(--text45); }
.gscore-delta { margin-left: auto; font-family: var(--display); font-weight: 700; font-size: 11px; color: var(--rust); letter-spacing: 0.02em; }
.gcard-trend { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.gtrend-stat { font-family: var(--anton); font-weight: 400; font-size: 30px; line-height: 0.85; color: var(--rust); }
.gtrend-stat span { display: block; font-family: var(--display); font-weight: 600; font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text45); margin-top: 4px; }
.spark { flex: 1; height: 44px; min-width: 0; }
.spark-line { fill: none; stroke: var(--rust); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.spark-area { fill: rgba(191,84,48,0.16); stroke: none; }
.spark-dot { fill: var(--rust); }
.gcard-streak { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.gstreak-num { font-family: var(--anton); font-weight: 400; font-size: 44px; line-height: 0.85; color: var(--rust); }
.gstreak-lbl { display: flex; flex-direction: column; font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 14px; color: var(--text); }
.gstreak-lbl b { font-weight: 600; font-size: 10px; letter-spacing: 0.1em; color: var(--text45); margin-top: 3px; }

@media (max-width: 900px) {
  .gallery { grid-template-columns: 1fr; gap: 30px; }
  .gallery-phone-wrap { position: static; }
}