/* ── HOME PAGE v3 ──
   Sections rebuilt from the Claude Design home page v3 handoff
   (design-handoffs/design_handoff_home_page_v3/). Everything here is scoped
   to .v3-* classes, plus three small additions to the live hero (.hv-h1--roll,
   .hv-roll, .hv-facts) and the blog title size. Linked after the page's
   inline <style>, so equal-specificity rules here win.

   Kept exactly as live and NOT restyled here: header + mobile menu, ticker,
   the MCP graphic (moved from the hero to #integrations on Oct 16), the AI
   Strategist composer, the Claude + ChatGPT tabs, the blog band and the
   Operator Brief newsletter.

   Tokens, shared type (.v3-eyebrow, .v3-h2, .v3-textlink ...) and the footer
   live in site-v3.css, linked just before this file.

   Section titles follow the site rule: Bebas at the live section size with
   the same synthetic bold as "Watch the growth engine in motion". Small blue
   text on light surfaces uses #006BDB (AA), the large accent stays #2C8BFF. */

/* ---------- hero additions (live hero, live graphic) ---------- */
.hero-v2 .hv-h1--roll {
  font-size: clamp(46px, 4.6vw, 66px);
  line-height: 0.95;
  max-width: 700px;
}
.hv-roll { display: grid; }
.hv-roll__sizer, .hv-roll__live { grid-area: 1 / 1; }
.hv-roll__sizer { visibility: hidden; }
.hv-roll__caret {
  display: inline-block;
  width: 4px;
  height: 0.8em;
  margin-left: 4px;
  vertical-align: -0.05em;
  background: var(--hv-blue, #2F7BFF);
}
.hv-roll.is-caret-off .hv-roll__caret { opacity: 0; }
.hv-facts {
  margin: 14px 0 0;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0B0B0B;
}
.hv-facts span { color: #B9B6AE; }
/* Trust badges under the CTAs (Oct 16): replace the "5.0 Shopify App Store
   rating" line, so the rating shows once. Rating only, never a review count. */
.hv-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.hv-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(10, 10, 10, 0.12);
  border-radius: 999px;
  background: #fff;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  color: var(--hv-ink-900, #0A0A0A);
  white-space: nowrap;
}
.hv-badge-icon { flex: none; color: var(--hv-mint-700, #00A183); }
/* Oct 17: one row wherever the three fit. DM Sans 500 widths: 72.9 + 77.0 +
   96.4px of text at 12px, plus border, padding, icon and gaps = 375.3px under
   430px (fits from a 412px viewport, 18px stage padding each side); 388.5px at
   12.5px (fits from 425px). Below 412px they wrap to two rows. */
@media (min-width: 412px) {
  .hv-badges { flex-wrap: nowrap; }
}
@media (max-width: 1199px) {
  .hero-v2 .hv-h1--roll { font-size: clamp(46px, 6vw, 66px); max-width: none; }
}
@media (max-width: 767px) {
  .hero-v2 .hv-h1--roll { font-size: clamp(38px, 11vw, 46px); }
  .hv-facts { font-size: 10px; letter-spacing: 0.1em; }
  .hv-badges { gap: 6px; margin-top: 14px; }
  .hv-badge { height: 28px; padding: 0 10px; font-size: 12.5px; }
}
@media (max-width: 429px) {
  .hv-badge { gap: 5px; font-size: 12px; }
}

/* ---------- video band + founder quote ---------- */
.v3-video { background: #F8F6F3; color: var(--v3-ink); }
.v3-video__grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(72px, 8vw, 120px) var(--v3-gutter) clamp(56px, 6vw, 80px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
}
.v3-video__copy .v3-lede { max-width: 480px; }
.v3-video__frame {
  position: relative;
  min-width: 0;
  padding: 10px;
  border-radius: 18px;
  background: #0B0B0B;
  box-shadow: 0 24px 60px rgba(11, 11, 11, 0.18);
}
.v3-video__frame video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; background: #000; }

/* Founder quote (Oct 11 option A): the same two-column grid and edges as the
   video row above, so the band reads as one composed section. Name and link on
   the left, the quote on a green rule on the right; quote first on phones. */
.v3-quote { padding: 0 var(--v3-gutter) clamp(64px, 7vw, 96px); }
.v3-qa {
  max-width: calc(1200px - 2 * var(--v3-gutter));
  margin: 0 auto;
  padding-top: clamp(40px, 4vw, 56px);
  border-top: 1px solid var(--v3-line);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}
.v3-qa__side { margin: 0; }
.v3-qa__side .v3-eyebrow { margin-bottom: 22px; }
.v3-qa__who { display: flex; align-items: center; gap: 14px; }
.v3-qa__av {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #0B0B0B;
  color: var(--v3-green);
  font-family: var(--display, 'Bebas Neue', sans-serif);
  font-weight: bold;
  font-size: 24px;
  line-height: 1;
  -webkit-text-stroke: 0.6px currentColor;
}
.v3-qa__name { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--v3-ink); }
.v3-qa__role { display: block; margin-top: 4px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #6A6A6A; }
.v3-qa__side .v3-textlink { margin-top: 22px; }
.v3-qa blockquote { margin: 0; padding: 0 0 0 28px; border-left: 3px solid var(--v3-green); }
.v3-qa blockquote p { margin: 0; font-family: var(--sans); font-size: clamp(19px, 1.8vw, 24px); line-height: 1.5; color: var(--v3-ink); text-wrap: pretty; }
@media (max-width: 860px) {
  .v3-qa { grid-template-columns: 1fr; gap: 24px; }
  .v3-qa blockquote { order: -1; padding-left: 20px; }
  .v3-qa__side .v3-eyebrow { display: none; }
}

/* ---------- owner's dilemma ---------- */
.v3-dilemma__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: clamp(36px, 4vw, 64px);
  align-items: start;
}
.v3-dilemma .v3-lede { max-width: 460px; }
.v3-dilemma__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.v3-dilemma__list li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 6px 12px;
  padding: 24px;
  border: 1px solid #1F1F1F;
  border-radius: 12px;
  background: #0D0D0D;
}
.v3-dilemma__list h3 { margin: 0; font-family: var(--sans); font-size: 17px; font-weight: 600; line-height: 1.35; color: #F7F7F7; }
.v3-dilemma__list p { grid-column: 2; margin: 0; font-family: var(--sans); font-size: 15px; line-height: 1.55; color: #BDBDBD; text-wrap: pretty; }

/* ---------- photo cards (wants + where) ---------- */
.v3-wants { background: var(--v3-stone); }
.v3-cards {
  margin-top: clamp(40px, 4vw, 60px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 22px;
}
.v3-card {
  /* three shared rows (photo, title + body, stat/cta): titles start on one
     line across the row, the body follows its title, and the stats and CTAs
     start on one line too */
  grid-row: span 3;
  display: grid;
  grid-template-rows: subgrid;
  row-gap: 0;
  padding-bottom: 40px;
  min-width: 0;
  color: var(--v3-ink);
  text-decoration: none;
}
.v3-photo { aspect-ratio: 3 / 2; overflow: hidden; margin-bottom: 24px; background: #E2DFD8; }
.v3-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.v3-card__text { align-self: start; min-width: 0; }
.v3-card h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: 30px;
  line-height: 0.98;
  text-transform: uppercase;
  color: var(--v3-ink);
}
.v3-card p { margin: 12px 0 0; font-family: var(--sans); font-size: 15px; line-height: 1.55; color: var(--v3-ink-2); text-wrap: pretty; }
.v3-card__stat {
  align-self: start;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid #D9D6CF;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.v3-soon {
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: var(--v3-ink-2);
  border: 1px solid #B9B6AE;
  border-radius: 999px;
  padding: 3px 8px;
}
/* card CTAs (Oct 16): same small mono link as the how-it-works steps; it sits
   in the text row, so the stat dividers stay on one line across the subgrid.
   Oct 17: #006BDB (--aa-blue-ink) instead of #2F7BFF, darker for contrast. */
.st, .v3-wants { --aa-blue-ink: #006BDB; }
.v3-want__cta { display: inline-block; margin-top: 14px; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--aa-blue-ink); text-decoration: none; }
.v3-want__cta:hover { text-decoration: underline; text-underline-offset: 3px; }
/* two per row below 1100px, phones included (Oct 11) */
@media (max-width: 1099px) {
  .v3-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* cards side by side (Oct 17): the subgrid gives the text row one height, so
   the text block fills it, the paragraph grows and every CTA lands on one line
   just above the stat divider. Stacked phones keep the natural flow. */
@media (min-width: 760px) {
  .v3-wants .v3-card__text { align-self: stretch; display: flex; flex-direction: column; }
  .v3-wants .v3-card__text p { flex: 1; margin-bottom: 14px; }
  .v3-wants .v3-want__cta { align-self: flex-start; margin-top: auto; }
}
/* phones: What owners want stays one per row (longer copy reads better full
   width) */
@media (max-width: 759px) {
  .v3-wants .v3-cards { grid-template-columns: 1fr; }
}

/* ---------- AI Creative Studio ---------- */
.v3-studio { position: relative; overflow: hidden; padding-top: clamp(80px, 9vw, 128px); padding-bottom: clamp(80px, 9vw, 128px); }
.v3-studio__collage {
  position: absolute;
  inset: -60px;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 14px;
  align-items: start;
  transform: rotate(-5deg);
}
.v3-studio__collage span { display: block; overflow: hidden; border-radius: 8px; background: #1A1A1A; }
.v3-studio__collage img { display: block; width: 100%; height: 100%; object-fit: cover; }
.v3-studio__veil { position: absolute; inset: 0; background: rgba(6, 6, 6, 0.88); }
.v3-studio__inner { position: relative; }
.v3-studio__h2 { max-width: 900px; }
.v3-studio .v3-lede { max-width: 600px; }
.v3-studio__grid {
  margin-top: clamp(40px, 4vw, 56px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: clamp(36px, 4vw, 64px);
  align-items: center;
}
.v3-studio__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid #2A2A2A; }
.v3-studio__list li { display: grid; grid-template-columns: 48px 1fr; gap: 4px 12px; padding: 18px 0; border-bottom: 1px solid #2A2A2A; }
.v3-studio__list .v3-num { padding-top: 4px; }
.v3-studio__t { display: block; font-family: var(--display); font-size: 26px; line-height: 1; text-transform: uppercase; color: #F7F7F7; }
.v3-studio__d { display: block; margin-top: 6px; font-family: var(--sans); font-size: 14.5px; line-height: 1.5; color: #C8C8C8; }
/* Genie bleeds past the right edge of the viewport (Oct 16): its width is the
   column plus the gap to the viewport edge, times 1.13, so about 12% of it is
   cut off. The section's overflow: hidden does the clipping, so the page never
   scrolls sideways. */
.v3-studio__genie {
  display: block;
  width: calc((100% + max((100vw - 1200px) / 2, var(--v3-gutter))) * 1.13);
  max-width: none;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
/* phones: the screenshot sits between the 01 to 05 list and the buttons */
@media (max-width: 759px) {
  .v3-studio__grid > div { display: contents; }
  .v3-studio__genie { order: 1; }
  .v3-studio__grid .v3-actions { order: 2; margin-top: 0; }
}

/* "Say it. Approve it. It's live." player frame and clip pills: shared with
   /affiliates, so they live in v3-player.css (linked just before this file). */

.v3-clipinfo[hidden] { display: none; }
.v3-clipinfo__cap { margin: 14px 0 0; text-align: center; font-family: var(--sans); font-size: 15px; line-height: 1.5; color: #1A1A1A; }
.v3-clipinfo__skills { margin: 8px 0 0; text-align: center; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--v3-green-dark); }
.v3-transcript { margin-top: 16px; padding-top: 12px; border-top: 1px solid #E2E0DA; }
.v3-transcript summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v3-ink-2);
}
.v3-transcript summary::-webkit-details-marker { display: none; }
.v3-transcript p { margin: 12px 0 0; font-family: var(--sans); font-size: 14px; line-height: 1.55; color: var(--v3-ink-2); }

/* skills panel */
.v3-skills {
  position: relative;
  margin-top: clamp(48px, 5vw, 72px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  border: 1px solid #2A2A2A;
  border-radius: 16px;
  background: #0D0D0D;
  pointer-events: none;
  user-select: none;
}
.v3-skills__left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 20px 22px;
  border-right: 1px solid #1E1E1E;
}
.v3-skills__status { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #8A8A8A; }
.v3-skills__status b { font-weight: 400; color: #BDBDBD; }
.v3-skills.is-done .v3-skills__status b { color: var(--v3-green); }
.v3-skills__bar { display: block; height: 2px; border-radius: 2px; overflow: hidden; background: #1E1E1E; }
.v3-skills__bar span { display: block; height: 100%; background: var(--v3-green); }
.v3-skills__h { margin: 2px 0 0; font-family: var(--display); font-size: clamp(32px, 3.2vw, 40px); line-height: 0.95; text-transform: uppercase; color: #F7F7F7; }
.v3-skills__h span { color: var(--v3-green); }
.v3-skills__sub { margin: 0; font-family: var(--sans); font-size: 13.5px; line-height: 1.45; color: #BDBDBD; }
.v3-skills__log {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 9px;
  min-width: 0;
  padding: 16px 22px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1;
}
.v3-skills__row { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: center; transition: opacity 0.3s ease; }
.v3-skills__chk { color: var(--v3-green); }
.v3-skills__name { color: #D6D6D6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v3-skills__row.is-hot .v3-skills__name { color: var(--v3-green); }
.v3-skills__fam { font-size: 9.5px; letter-spacing: 0.1em; color: #6A6A6A; }
@media (max-width: 759px) {
  .v3-skills { grid-template-columns: minmax(0, 1fr); }
  .v3-skills__left { border-right: 0; border-bottom: 1px solid #1E1E1E; }
}

/* feature index */
.v3-features { margin-top: clamp(48px, 5vw, 72px); padding-top: 28px; border-top: 1.5px solid var(--v3-ink); }
.v3-features__k { margin: 0 0 20px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--v3-muted); }
.v3-features dl {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
  column-gap: 56px;
}
.v3-features dl > div {
  display: grid;
  grid-template-columns: minmax(140px, 190px) 1fr;
  gap: 6px 16px;
  padding: 16px 0;
  border-bottom: 1px solid #E2E0DA;
}
.v3-features dt { font-family: var(--display); font-size: 22px; line-height: 1.1; letter-spacing: 0.01em; text-transform: uppercase; color: var(--v3-ink); }
.v3-features dd { margin: 0; font-family: var(--sans); font-size: 14.5px; line-height: 1.55; color: var(--v3-ink-2); }
/* phones: the first four, then "See all 12 features" (the full list stays in
   the page; home-v3.js adds .is-collapsed, so without JS everything shows) */
.v3-features__more { display: none; }
@media (max-width: 759px) {
  .v3-features dl > div { grid-template-columns: 1fr; }
  .v3-features.is-collapsed dl > div:nth-child(n+5) { display: none; }
  .v3-features.is-collapsed .v3-features__more {
    display: block;
    width: 100%;
    margin-top: 20px;
    padding: 14px 16px;
    border: 1px solid var(--v3-ink);
    border-radius: 999px;
    background: transparent;
    color: var(--v3-ink);
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
  }
}

/* ---------- marquee ----------
   Oct 17: half size (was 18px padding, clamp(26px, 2.6vw, 38px) type, 13px
   separators, 26px gaps). Every horizontal size halved too, so the run is half
   as wide and 25s (was 50s) keeps the same on-screen speed in px/s. */
.v3-marquee {
  overflow: hidden;
  padding: 9px 0;
  background: var(--v3-black);
  border-top: 1px solid var(--v3-green);
  border-bottom: 1px solid var(--v3-green);
}
.v3-marquee__track { display: flex; width: max-content; animation: v3Marquee 25s linear infinite; }
.v3-marquee__run { display: flex; flex: none; }
.v3-marquee__run span {
  display: flex;
  align-items: center;
  gap: 13px;
  padding-right: 13px;
  white-space: nowrap;
  font-family: var(--display);
  font-size: clamp(13px, 1.3vw, 19px);
  line-height: 1;
  letter-spacing: 0.02em;
}
.v3-marquee__run .is-g { color: var(--v3-green); }
.v3-marquee__run .is-w { color: #F7F7F7; }
.v3-marquee__run i { font-style: normal; font-family: var(--mono); font-size: 6.5px; color: var(--v3-green); }
.v3-marquee:hover .v3-marquee__track,
.v3-marquee.is-off .v3-marquee__track { animation-play-state: paused; }
@keyframes v3Marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- compare ---------- */
.v3-compare { padding-top: 96px; }
/* desktop (Oct 16): narrower content column so the section reads smaller;
   tablet and phone layouts are unchanged */
@media (min-width: 1100px) {
  .v3-compare > .v3-wrap { max-width: 1120px; }
}
.v3-center--narrow .v3-lede { max-width: 560px; font-size: 16px; color: #C8C8C8; }
.v3-compare__scroll { margin-top: 44px; }
.v3-compare__table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.v3-compare__table thead th, .v3-compare__table thead td { padding: 16px 16px 14px; text-align: left; vertical-align: bottom; border-bottom: 1px solid #2A2A2A; }
.v3-compare__table thead td { width: 21%; }
.v3-compare__table thead th.is-us { background: rgba(51, 214, 159, 0.07); border-top: 2px solid var(--v3-green); border-radius: 10px 10px 0 0; }
.v3-compare__chip {
  display: inline-block;
  margin-bottom: 10px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--v3-green);
  color: var(--v3-green-ink);
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.v3-compare__chip-short { display: none; }
.v3-compare__col { display: block; font-family: var(--display); font-weight: 400; font-size: 30px; line-height: 1; text-transform: uppercase; color: #F2F2F2; }
.v3-compare__table th.is-us .v3-compare__col { color: #F7F7F7; }
.v3-compare__table tbody tr { border-bottom: 1px solid #1E1E1E; }
.v3-compare__table tbody th {
  padding: 14px 16px 14px 0;
  text-align: left;
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
  color: #F2F2F2;
  background: var(--v3-black);
}
.v3-compare__table tbody td { padding: 14px 16px; height: 60px; font-family: var(--sans); font-size: 14px; line-height: 1.4; color: #C8C8C8; }
.v3-compare__table tbody td.is-us { background: rgba(51, 214, 159, 0.06); color: #F7F7F7; font-weight: 600; }
.v3-compare__table tbody td { vertical-align: middle; }
.v3-cell { display: flex; align-items: center; gap: 10px; }
.v3-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  vertical-align: middle;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--sans);
}
.v3-mark--y { background: var(--v3-green); color: var(--v3-green-ink); }
.v3-mark--p { background: #3A2E12; color: #F5B83D; }
.v3-mark--n { background: #262626; color: #8A8A8A; }
.v3-mark { flex: none; }
@media (max-width: 759px) {
  .v3-compare__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .v3-compare__table { width: 720px; table-layout: fixed; }
  .v3-compare__table thead td, .v3-compare__table tbody th { position: sticky; left: 0; z-index: 1; width: 150px; background: var(--v3-black); }
}
/* phones: Agency AI side by side with one other option at a time, picked
   with a switch. home-v3.js adds .is-switch; without it the table scrolls
   sideways as before. (Oct 11) */
.v3-compare__switch { display: none; }
@media (max-width: 759px) {
  .v3-compare.is-switch .v3-compare__switch { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 36px; }
  .v3-compare__vs { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: #8A8A8A; }
  .v3-compare__opts { display: flex; width: 100%; padding: 4px; border: 1px solid #2A2A2A; border-radius: 999px; background: #111; }
  .v3-compare__opts button { flex: 1; padding: 11px 6px; border: 0; border-radius: 999px; background: transparent; color: #BDBDBD; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; }
  .v3-compare__opts button[aria-pressed="true"] { background: #F2F2F2; color: #0B0B0B; }
  .v3-compare.is-switch .v3-compare__scroll { margin-top: 20px; overflow: visible; }
  .v3-compare.is-switch .v3-compare__table,
  .v3-compare.is-switch .v3-compare__table thead,
  .v3-compare.is-switch .v3-compare__table tbody { display: block; width: 100%; }
  .v3-compare.is-switch .v3-compare__table tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .v3-compare.is-switch .v3-compare__table thead td { display: none; }
  .v3-compare.is-switch .v3-compare__table thead th { align-self: end; padding: 14px 12px 12px; }
  .v3-compare.is-switch .v3-compare__col { font-size: 24px; }
  .v3-compare.is-switch .v3-compare__table tbody th { grid-column: 1 / -1; position: static; width: auto; padding: 16px 0 8px; background: none; font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: #8A8A8A; }
  .v3-compare.is-switch .v3-compare__table tbody td { height: auto; padding: 12px; font-size: 13.5px; vertical-align: top; }
  .v3-compare.is-switch .v3-cell { align-items: flex-start; gap: 8px; }
  .v3-compare.is-vs-3 .v3-compare__table tr > :nth-child(4),
  .v3-compare.is-vs-4 .v3-compare__table tr > :nth-child(3) { display: none; }
}
/* below 1000px the full chip no longer fits its column on one line:
   show the short label, keep the full text for screen readers */
@media (max-width: 999px) {
  .v3-compare__chip-full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .v3-compare__chip-short { display: inline; }
}

.v3-math {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 24px;
  align-items: end;
  padding: clamp(22px, 2.6vw, 32px);
  border: 1px solid #222;
  border-radius: 12px;
  background: #111;
}
.v3-math > p { margin: 0; font-family: var(--sans); font-size: 15px; line-height: 1.55; color: #D6D6D6; text-wrap: pretty; }
.v3-math > p b { font-family: var(--mono); font-weight: 400; color: #fff; }
.v3-math__stat { padding-top: 12px; border-top: 1px solid #333; }
.v3-math__stat--us { border-top-color: var(--v3-green); }
.v3-math__k { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: #8A8A8A; }
.v3-math__stat--us .v3-math__k { color: var(--v3-green); }
.v3-math__v { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 6px; font-family: var(--mono); }
.v3-math__v b { font-size: 44px; font-weight: 500; letter-spacing: -0.03em; color: #F2F2F2; }
.v3-math__stat--us .v3-math__v b { color: var(--v3-green); }
.v3-math__v small { font-size: 12px; color: #9A9A9A; }
.v3-math__foot { margin-top: 14px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px 24px; }
.v3-math__foot p { margin: 0; max-width: 640px; font-family: var(--mono); font-size: 10.5px; line-height: 1.6; color: #8A8A8A; }
.v3-math__foot .v3-textlink { margin-top: 0; }

/* ---------- integrations: the MCP graphic (moved from the hero, Oct 16) ----------
   Graphic CSS lives with the rest of it in index.html (.hv-panel-* ...). The
   stone band (#EFEEEA) is a touch darker than the hero cream (#FAF7F2); the
   tiles are white with their own border and shadow, so they still read.
   Oct 17: the owner-approved split (option 2). 1100px up: copy and the
   Launching soon block in a 460px column, the graphic right-aligned in the
   rest, up to 680px wide. Below 1100px one column: copy, graphic, Launching
   soon. The flow lines run past the viewport edge; overflow-x: clip stops
   sideways scrolling without making the section a scroll container. */
.v3-ledger { overflow-x: clip; }
.int-split { display: grid; grid-template-columns: 460px minmax(0, 1fr); gap: 60px; align-items: center; }
.int-copy { display: flex; flex-direction: column; min-width: 0; }
.int-graphic .hv-panel-wrap { justify-content: flex-end; }
.v3-ledger__head { max-width: 760px; }
.v3-ledger .v3-lede { font-size: 16px; }
.int-soon { margin-top: 40px; padding-top: 22px; border-top: 1px solid #D4D0C9; display: flex; flex-direction: column; gap: 14px; }
.int-soon__label { margin: 0; font-family: var(--mono); font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: 0.22em; text-transform: uppercase; color: #57554F; }
.int-soon__list { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.int-soon__list li { padding: 8px 14px; border: 1px dashed #A9A6A0; border-radius: 999px; font-family: var(--mono); font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: 0.18em; text-transform: uppercase; color: #3B3B3B; }
@media (max-width: 1099px) {
  .int-split { display: flex; flex-direction: column; gap: 0; }
  .int-copy { display: contents; }
  .int-graphic { order: 1; margin-top: 36px; }
  .int-graphic .hv-panel-wrap { justify-content: center; }
  .int-soon { order: 2; margin-top: 36px; }
}
@media (max-width: 759px) {
  .int-graphic { margin-top: 28px; }
  .int-soon { margin-top: 28px; }
}

/* ---------- founder quote (Oct 16): white band between pricing and proof ---------- */
.v3-founder { text-align: center; }
.v3-founder__fig { margin: 0 auto; max-width: 980px; }
.v3-founder__q { margin: 0; }
.v3-founder__q p { margin: 0; font-family: var(--display); font-weight: bold; font-size: clamp(32px, 3.4vw, 50px); line-height: 1.04; letter-spacing: 0.01em; text-transform: uppercase; color: var(--v3-ink); text-wrap: balance; }
.v3-founder__by { margin-top: 28px; display: flex; flex-direction: column; align-items: center; font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--v3-muted); }
.v3-founder__by b { font-weight: 500; color: var(--v3-ink); }
.v3-founder__by .v3-textlink { margin-top: 18px; }

/* ---------- proof ---------- */
.v3-proof__nums { margin-top: 44px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 2px; }
.v3-proof__num { display: flex; flex-direction: column; padding: 30px; border: 1px solid #1F1F1F; background: #0E0E0E; }
.v3-proof__k { margin: 0; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; color: #BDBDBD; }
.v3-proof__v { margin: 12px 0 0; font-family: var(--mono); font-size: clamp(34px, 4vw, 50px); font-weight: 500; letter-spacing: -0.02em; color: #F2F2F2; }
.v3-proof__v small { font-size: 0.42em; letter-spacing: 0.08em; text-transform: uppercase; color: #8A8A8A; }
.v3-proof__v b { font-weight: 500; color: var(--v3-green); }
.v3-proof__line { margin: 10px 0 0; font-family: var(--sans); font-size: 14.5px; line-height: 1.5; color: #D6D6D6; }
.v3-proof__ctx { flex: 1; margin: 6px 0 0; font-family: var(--sans); font-size: 13.5px; line-height: 1.5; color: #A8A8A8; }
.v3-proof__num .v3-textlink { align-self: flex-start; margin-top: 16px; }
.v3-proof__quotes { margin-top: 2px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 2px; }
.v3-proof__quotes figure { margin: 0; display: flex; flex-direction: column; gap: 24px; padding: 30px; border: 1px solid #1F1F1F; background: #121212; }
.v3-proof__quotes blockquote { flex: 1; margin: 0; font-family: var(--sans); font-size: 15px; line-height: 1.6; font-style: italic; color: #D6D6D6; }
.v3-proof__quotes figcaption { display: flex; align-items: center; gap: 12px; }
.v3-proof__quotes b { display: block; font-family: var(--sans); font-size: 14px; font-weight: 600; color: #F2F2F2; }
.v3-proof__quotes small { display: block; margin-top: 2px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #A8A8A8; }
.v3-proof__logo { flex: none; width: 38px; height: 38px; border-radius: 6px; background-color: #fff; background-size: cover; background-position: center; }

.v3-own {
  margin-top: 20px;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr) minmax(0, 0.8fr) auto;
  gap: 14px 32px;
  align-items: center;
  padding: 22px 0;
  border-top: 1px solid #2A2A2A;
  border-bottom: 1px solid #2A2A2A;
}
.v3-own__k { margin: 0; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--v3-green); }
.v3-own__h { margin: 6px 0 0; font-family: var(--display); font-size: clamp(28px, 2.8vw, 36px); line-height: 1; text-transform: uppercase; color: #F7F7F7; }
.v3-own__body { margin: 0; font-family: var(--sans); font-size: 14.5px; line-height: 1.55; color: #D6D6D6; }
.v3-own .v3-textlink { margin-top: 0; justify-self: end; white-space: nowrap; }
@media (max-width: 759px) {
  .v3-own { grid-template-columns: minmax(0, 1fr); }
  .v3-own .v3-textlink { justify-self: start; }
}

/* ---------- blog band: title matches the FAQ title size (owner QC, Oct 11) ---------- */
.aa-blog .aa-blog__title {
  font-size: clamp(48px, 5vw, 80px);
  line-height: 0.92;
  -webkit-text-stroke-width: 1px;
}

/* ---------- FAQ ---------- */
.v3-faq { padding-top: clamp(56px, 6vw, 88px); padding-bottom: clamp(72px, 8vw, 112px); }
.v3-faq__h2 { margin-bottom: 44px; }
.v3-faq__list { border-top: 1px solid var(--v3-line); }
.v3-faq__item { border-bottom: 1px solid var(--v3-line); }
.v3-faq__item summary {
  display: grid;
  grid-template-columns: clamp(40px, 8vw, 90px) 1fr 24px;
  align-items: center;
  gap: 8px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
}
.v3-faq__item summary::-webkit-details-marker { display: none; }
.v3-faq__n { font-family: var(--mono); font-size: 11px; color: #8A877F; }
.v3-faq__item h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--v3-ink);
}
.v3-faq__plus { position: relative; width: 24px; height: 24px; }
.v3-faq__plus::before, .v3-faq__plus::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 11px;
  width: 14px;
  height: 1.5px;
  background: #6A6A6A;
  transition: transform 0.18s ease;
}
.v3-faq__plus::after { transform: rotate(90deg); }
.v3-faq__item[open] .v3-faq__plus::after { transform: rotate(0deg); }
.v3-faq__item summary:hover .v3-faq__n,
.v3-faq__item[open] .v3-faq__n { color: var(--v3-blue-ink); }
.v3-faq__item summary:focus-visible { outline: 2px solid var(--v3-ink); outline-offset: 2px; }
.v3-faq__a {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 760px;
  padding: 0 0 24px clamp(48px, calc(8vw + 8px), 98px);
}
.v3-faq__a p { margin: 0; font-family: var(--sans); font-size: 15px; line-height: 1.6; color: var(--v3-ink-2); }
.v3-mono { font-family: var(--mono); font-size: 0.92em; }
.v3-faq__link { align-self: flex-start; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--v3-blue-ink); text-decoration: none; }
.v3-faq__link:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) {
  .v3-faq__plus::before, .v3-faq__plus::after { transition: none; }
}

/* ---------- reduced motion: static end states ---------- */
@media (prefers-reduced-motion: reduce) {
  .v3-marquee__track { animation: none; }
  .v3-skills__row { transition: none; }
}

/* Steps head (live section): same type scale as the v3 section heads, so
   "Up & running in 4 steps" matches "One app instead of a stack" (Oct 11). */
.st-eyebrow { gap: 10px; margin-bottom: 16px; }
.st-eyebrow__rule { width: 28px; height: 1px; }
.st-eyebrow__label { font-size: 11px; font-weight: 400; letter-spacing: 0.16em; line-height: 1.4; }
.st-title { text-wrap: balance; }
/* step CTAs (Oct 16): small mono text link; Oct 17: --aa-blue-ink (#006BDB), set with the wants cards */
.st-step__cta { display: inline-block; margin-top: 14px; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--aa-blue-ink); text-decoration: none; }
.st-step__cta:hover { text-decoration: underline; text-underline-offset: 3px; }

/* AI Strategist (live section): the two sample-question capsules under the
   composer are hidden on phones to shorten the section (Oct 11). */
@media (max-width: 639px) {
  .cb-chips { display: none; }
}