/* ============================================================================
   H33 Custody · site styles
   ============================================================================ */

@import url("./tokens.css");
@import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,700&family=Inter:wght@400;500;600;700&display=swap");

/* ---- reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, h5, p, figure, blockquote, dl, dd, ul, ol, pre { margin: 0; }
ul, ol { padding-left: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: none; cursor: pointer; padding: 0; color: inherit; }
input, textarea, select { font: inherit; }

/* ---- base ---- */
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-ink);
  background: var(--c-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--c-ink);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p { max-width: 64ch; }

a:not(.btn):not(.nav__link):not(.card):not(.footer__link) {
  color: var(--c-accent);
  border-bottom: 1px solid currentColor;
  transition: color var(--transition);
}
a:not(.btn):not(.nav__link):not(.card):not(.footer__link):hover { color: var(--c-accent-deep); }

/* ---- layout ---- */
.wrap {
  width: 100%;
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 var(--s-6);
}
.wrap--prose { max-width: var(--max-prose); }
.wrap--narrow { max-width: var(--max-narrow); }

.section {
  padding: var(--s-16) 0;
}
.section--alt { background: var(--c-paper-alt); }
.section--ink { background: var(--c-ink); color: var(--c-paper); }
.section--ink h1,
.section--ink h2,
.section--ink h3 { color: var(--c-paper); }

@media (max-width: 720px) {
  .section { padding: var(--s-12) 0; }
  .wrap    { padding: 0 var(--s-5); }
}

/* ---- typography utilities ---- */
.eyebrow {
  display: inline-block;
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--c-ink-mute);
  margin-bottom: var(--s-4);
}
.lede {
  font-size: var(--fs-lede);
  line-height: var(--lh-snug);
  color: var(--c-ink-soft);
  max-width: 56ch;
}
.muted { color: var(--c-ink-mute); }
.center { text-align: center; }
.center .lede,
.center p { margin-left: auto; margin-right: auto; }

/* ---- header / nav ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251, 249, 244, 0.92);
  backdrop-filter: saturate(180%) blur(6px);
  -webkit-backdrop-filter: saturate(180%) blur(6px);
  border-bottom: 1px solid var(--c-rule);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-4) var(--s-6);
  max-width: var(--max-content);
  margin: 0 auto;
  gap: var(--s-8);
}
.brand {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--c-ink);
}
.brand__mark {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--c-accent);
}
.nav { display: flex; align-items: center; gap: var(--s-6); flex: 1; justify-content: flex-end; }
.nav__list { display: flex; gap: var(--s-5); align-items: center; }
.nav__link {
  font-size: var(--fs-body-sm);
  color: var(--c-ink-soft);
  font-weight: 500;
  transition: color var(--transition);
  padding: var(--s-2) 0;
  border-bottom: 1px solid transparent;
}
.nav__link:hover {
  color: var(--c-ink);
  border-bottom-color: var(--c-accent);
}
.nav__link.is-active { color: var(--c-ink); border-bottom-color: var(--c-accent); }
.nav__menu { display: none; }

@media (max-width: 920px) {
  .nav__list { display: none; }
  .nav__menu {
    display: block;
    font-size: var(--fs-body-sm);
    color: var(--c-ink);
    padding: var(--s-2) var(--s-4);
    border: 1px solid var(--c-rule);
    border-radius: var(--radius);
  }
}

/* ---- buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 0.95rem 1.75rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: var(--fs-body-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}
.btn--primary {
  background: var(--c-ink);
  color: var(--c-paper);
}
.btn--primary:hover {
  background: var(--c-accent-deep);
}
.btn--secondary {
  background: transparent;
  color: var(--c-ink);
  border-color: var(--c-ink);
}
.btn--secondary:hover {
  background: var(--c-ink);
  color: var(--c-paper);
}
.btn--accent {
  background: var(--c-accent);
  color: var(--c-paper);
}
.btn--accent:hover {
  background: var(--c-accent-deep);
}
.btn--ghost {
  background: transparent;
  color: var(--c-ink-soft);
  padding-left: 0;
  padding-right: 0;
}
.btn--ghost::after {
  content: "→";
  margin-left: var(--s-2);
  transition: transform var(--transition);
}
.btn--ghost:hover { color: var(--c-ink); }
.btn--ghost:hover::after { transform: translateX(4px); }

.cta-row {
  display: flex;
  gap: var(--s-4);
  align-items: center;
  flex-wrap: wrap;
}

/* ---- hero ---- */
.hero {
  padding: var(--s-16) 0 var(--s-12);
  border-bottom: 1px solid var(--c-rule);
}
.hero__inner {
  max-width: 880px;
}
.hero__title {
  font-size: var(--fs-hero);
  letter-spacing: -0.018em;
  line-height: 1.04;
  margin-bottom: var(--s-6);
}
.hero__sub {
  font-size: var(--fs-lede);
  line-height: 1.4;
  color: var(--c-ink-soft);
  max-width: 60ch;
  margin-bottom: var(--s-8);
}
.hero__ctas { margin-top: var(--s-8); }

/* ---- pillar grid ---- */
.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-5);
  margin-top: var(--s-10);
}
.pillar-card {
  display: block;
  padding: var(--s-6) var(--s-6) var(--s-5);
  background: var(--c-card);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-card);
  transition: all var(--transition);
  position: relative;
}
.pillar-card:hover {
  border-color: var(--c-accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px var(--c-shadow);
}
.pillar-card__question {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-style: italic;
  color: var(--c-ink-mute);
  margin-bottom: var(--s-2);
  font-weight: 400;
}
.pillar-card__name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--c-ink);
  margin-bottom: var(--s-3);
  letter-spacing: -0.01em;
}
.pillar-card__copy {
  font-size: var(--fs-body-sm);
  color: var(--c-ink-soft);
  line-height: 1.55;
  margin-bottom: var(--s-4);
}
.pillar-card__more {
  color: var(--c-accent);
  font-size: 0.875rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.pillar-card__more::after { content: "→"; transition: transform var(--transition); }
.pillar-card:hover .pillar-card__more::after { transform: translateX(4px); }

/* ---- featured / spotlight ---- */
.spotlight {
  background: var(--c-ink);
  color: var(--c-paper);
  padding: var(--s-12) var(--s-8);
  border-radius: var(--radius-lg);
  margin: var(--s-12) 0;
  position: relative;
  overflow: hidden;
}
.spotlight__eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--c-accent-soft);
  margin-bottom: var(--s-4);
}
.spotlight__title {
  font-size: var(--fs-h1);
  color: var(--c-paper);
  max-width: 14ch;
  margin-bottom: var(--s-5);
}
.spotlight__copy {
  font-size: var(--fs-lede);
  color: rgba(251, 249, 244, 0.85);
  max-width: 56ch;
  margin-bottom: var(--s-8);
}
.spotlight .btn--primary {
  background: var(--c-paper);
  color: var(--c-ink);
}
.spotlight .btn--primary:hover {
  background: var(--c-accent-soft);
}

/* ---- prose ---- */
.prose {
  max-width: var(--max-prose);
}
.prose h2 {
  font-size: var(--fs-h2);
  margin: var(--s-10) 0 var(--s-5);
  letter-spacing: -0.012em;
}
.prose h3 {
  font-size: var(--fs-h3);
  margin: var(--s-8) 0 var(--s-3);
}
.prose p {
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--c-ink);
  margin-bottom: var(--s-5);
}
.prose ul, .prose ol {
  padding-left: var(--s-6);
  margin: var(--s-5) 0;
  list-style: disc;
}
.prose ol { list-style: decimal; }
.prose li {
  margin-bottom: var(--s-3);
  line-height: var(--lh-body);
}
.prose blockquote {
  padding-left: var(--s-6);
  border-left: 3px solid var(--c-accent);
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-style: italic;
  color: var(--c-ink-soft);
  margin: var(--s-8) 0;
  line-height: 1.4;
}
.prose hr {
  border: none;
  border-top: 1px solid var(--c-rule);
  margin: var(--s-10) 0;
}

/* ---- 2-col / 3-col content ---- */
.cols-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-8);
}
.cols-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-6);
}

/* ---- feature blocks ---- */
.feature {
  padding: var(--s-6) 0;
  border-top: 1px solid var(--c-rule);
}
.feature__label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--c-ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--s-2);
}
.feature__title {
  font-family: var(--font-display);
  font-size: 1.375rem;
  margin-bottom: var(--s-3);
}
.feature__copy {
  font-size: var(--fs-body-sm);
  color: var(--c-ink-soft);
  line-height: 1.55;
}

/* ---- pillar page hero ---- */
.pillar-hero {
  padding: var(--s-12) 0 var(--s-10);
  border-bottom: 1px solid var(--c-rule);
}
.pillar-hero__question {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--c-ink-mute);
  margin-bottom: var(--s-4);
  font-weight: 400;
}
.pillar-hero__title {
  font-size: var(--fs-h1);
  max-width: 16ch;
  margin-bottom: var(--s-5);
}
.pillar-hero__lede {
  max-width: 56ch;
  font-size: var(--fs-lede);
  color: var(--c-ink-soft);
  line-height: 1.5;
}

/* ---- breadcrumbs ---- */
.crumbs {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--c-ink-mute);
  margin-bottom: var(--s-6);
}
.crumbs a {
  color: var(--c-ink-mute);
  text-decoration: none;
}
.crumbs a:hover { color: var(--c-ink); }
.crumbs__sep { margin: 0 var(--s-2); color: var(--c-ink-mute); }

/* ---- audience ribbon ---- */
.audiences {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin: var(--s-6) 0;
}
.audience-tag {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--c-rule);
  border-radius: 999px;
  font-size: 0.8125rem;
  color: var(--c-ink-soft);
  background: var(--c-card);
  transition: all var(--transition);
}
.audience-tag:hover {
  border-color: var(--c-ink);
  color: var(--c-ink);
}

/* ---- forms ---- */
.form {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
.form__field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.form__label {
  font-size: var(--fs-body-sm);
  font-weight: 500;
  color: var(--c-ink);
}
.form__input,
.form__select,
.form__textarea {
  padding: 0.85rem 1rem;
  border: 1px solid var(--c-rule);
  border-radius: var(--radius);
  background: var(--c-card);
  color: var(--c-ink);
  font-size: var(--fs-body);
  transition: border-color var(--transition);
}
.form__input:focus,
.form__select:focus,
.form__textarea:focus {
  outline: none;
  border-color: var(--c-accent);
}
.form__textarea { resize: vertical; min-height: 8rem; font-family: var(--font-body); }
.form__help {
  font-size: 0.8125rem;
  color: var(--c-ink-mute);
}

/* ---- footer ---- */
.site-footer {
  background: var(--c-paper-alt);
  border-top: 1px solid var(--c-rule);
  padding: var(--s-12) 0 var(--s-8);
  margin-top: var(--s-16);
}
.footer__cols {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: var(--s-6);
  margin-bottom: var(--s-10);
}
.footer__col h4 {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-ink);
  margin-bottom: var(--s-4);
}
.footer__col ul { display: flex; flex-direction: column; gap: var(--s-3); }
.footer__link {
  font-size: var(--fs-body-sm);
  color: var(--c-ink-soft);
  transition: color var(--transition);
}
.footer__link:hover { color: var(--c-ink); }
.footer__bottom {
  padding-top: var(--s-6);
  border-top: 1px solid var(--c-rule);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-4);
  font-size: 0.875rem;
  color: var(--c-ink-mute);
}
.footer__brand-blurb {
  color: var(--c-ink-soft);
  font-size: var(--fs-body-sm);
  line-height: 1.6;
  margin-top: var(--s-3);
  max-width: 30ch;
}

@media (max-width: 920px) {
  .footer__cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .footer__cols { grid-template-columns: 1fr; }
}

/* ---- platform credit (Stripe/Shopify-style "powered by") ---- */
.platform-credit {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 0.8125rem;
  color: var(--c-ink-mute);
}
.platform-credit__mark {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--c-ink-soft);
}

/* ============================================================================
   PHONE-FRAME MOCKUPS — show, don't tell
   Obsidian chrome · copper accent · cream text (per H33 brand)
   ============================================================================ */
:root {
  --obsidian:       #0e0f12;
  --obsidian-soft:  #1a1d22;
  --obsidian-line:  #2a2e36;
  --copper:         #c98a47;
  --copper-soft:    #e2b07a;
  --cream:          #f3ece0;
  --cream-mute:     rgba(243, 236, 224, 0.62);
  --cream-soft:     rgba(243, 236, 224, 0.82);
  --ok:             #6fcf97;
  --warn:           #e57373;
}

/* ---- hero kicker (eyebrow line above the title) ---- */
.kicker {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--c-accent);
  margin-bottom: var(--s-5);
  max-width: 28ch;
  border-top: 2px solid var(--c-accent);
  padding-top: var(--s-5);
}

/* ---- "Prove more. Reveal less." marquee section ---- */
.marquee {
  background: var(--obsidian);
  color: var(--cream);
  padding: var(--s-16) 0;
  border-bottom: 1px solid var(--obsidian-line);
}
.marquee__inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--s-12);
  align-items: center;
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 var(--s-6);
}
@media (max-width: 920px) {
  .marquee { padding: var(--s-12) 0; }
  .marquee__inner { grid-template-columns: 1fr; gap: var(--s-8); }
}
.marquee__eyebrow {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--copper-soft);
  font-weight: 600;
  margin-bottom: var(--s-4);
}
.marquee__title {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 5.5vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.022em;
  font-weight: 500;
  color: var(--cream);
  margin-bottom: var(--s-5);
  max-width: 14ch;
}
.marquee__antibullets {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--s-6) 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  font-family: var(--font-display);
  font-size: 1.375rem;
  color: var(--cream);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.marquee__quote {
  padding: var(--s-5) var(--s-6);
  border-left: 2px solid var(--copper);
  background: rgba(201, 138, 71, 0.06);
  border-radius: 4px;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--cream-soft);
  max-width: 56ch;
}
.marquee__quote strong { color: var(--copper-soft); font-weight: 600; }

/* the verify panel — ✓ proven · ✗ not shared */
.verify-panel {
  background: var(--obsidian-soft);
  border: 1px solid var(--obsidian-line);
  border-radius: 18px;
  padding: var(--s-8);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.5);
}
.verify-panel__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--obsidian-line);
  margin-bottom: var(--s-5);
}
.verify-panel__head-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--copper-soft);
  font-weight: 600;
}
.verify-panel__head-status {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--ok);
  font-weight: 500;
}
.verify-panel__big {
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--cream);
  margin-bottom: var(--s-5);
  max-width: 22ch;
  line-height: 1.2;
}
.verify-panel__group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: var(--s-5);
}
.verify-panel__group:last-child { margin-bottom: 0; }
.verify-panel__group-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 6px;
}
.verify-panel__group--pass .verify-panel__group-label { color: var(--ok); }
.verify-panel__group--block .verify-panel__group-label { color: var(--warn); }
.verify-line {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  padding: 6px 0;
  color: var(--cream);
  font-weight: 500;
}
.verify-line__mark {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex: 0 0 auto;
}
.verify-line--pass .verify-line__mark {
  background: var(--ok);
  color: var(--obsidian);
}
.verify-line--block .verify-line__mark {
  background: rgba(229, 115, 115, 0.15);
  color: var(--warn);
  border: 1.5px solid var(--warn);
}
.verify-line--block { color: var(--cream-mute); }
.verify-line--block .verify-line__what {
  text-decoration: line-through;
  text-decoration-color: var(--warn);
}

/* ---- wire-approval phone variant (Act 10) ---- */
.phone__signers {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: var(--s-3) 0;
}
.phone__signer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(111, 207, 151, 0.06);
  border: 1px solid rgba(111, 207, 151, 0.2);
  border-radius: 8px;
}
.phone__signer-role {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--cream);
  font-weight: 500;
  flex: 1;
}
.phone__signer-time {
  font-size: 10.5px;
  color: var(--cream-mute);
  letter-spacing: 0.02em;
}
.phone__signer-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ok);
  color: var(--obsidian);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}

/* ---- dual-audience CTA (Personal · Institutional) ---- */
.cta-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
  max-width: 720px;
  margin-top: var(--s-8);
}
.cta-split__btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--s-5) var(--s-6);
  border-radius: var(--radius-card);
  text-align: left;
  text-decoration: none;
  transition: var(--transition);
  border: 1.5px solid transparent;
}
.cta-split__btn--primary {
  background: var(--c-ink);
  color: var(--c-paper);
  border-color: var(--c-ink);
}
.cta-split__btn--primary:hover {
  background: var(--c-accent-deep);
  border-color: var(--c-accent-deep);
}
.cta-split__btn--secondary {
  background: transparent;
  color: var(--c-ink);
  border-color: var(--c-ink);
}
.cta-split__btn--secondary:hover {
  background: var(--c-ink);
  color: var(--c-paper);
}
.cta-split__btn--invert-primary {
  background: var(--c-paper);
  color: var(--c-ink);
  border-color: var(--c-paper);
}
.cta-split__btn--invert-primary:hover {
  background: var(--c-accent-soft);
  border-color: var(--c-accent-soft);
}
.cta-split__btn--invert-secondary {
  background: transparent;
  color: var(--c-paper);
  border-color: var(--c-paper);
}
.cta-split__btn--invert-secondary:hover {
  background: var(--c-paper);
  color: var(--c-ink);
}
.cta-split__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
  line-height: 1.2;
}
.cta-split__sub {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  opacity: 0.78;
  letter-spacing: 0.01em;
  font-weight: 400;
  line-height: 1.35;
}
@media (max-width: 720px) {
  .cta-split { grid-template-columns: 1fr; }
}

/* ---- hero subhead pattern (capability strip) ---- */
.cap-strip {
  font-size: 0.9375rem;
  color: var(--c-ink-mute);
  letter-spacing: 0.01em;
  line-height: 1.55;
  margin-top: var(--s-4);
  max-width: 64ch;
}
.cap-strip strong { color: var(--c-ink); font-weight: 500; }

/* ---- cinematic acts (alternating L/R phone scenes) ---- */
.act {
  padding: var(--s-16) 0;
  border-top: 1px solid var(--c-rule);
}
.act:first-of-type { border-top: none; }
.act--alt { background: var(--c-paper-alt); }
.act--dark { background: var(--obsidian); color: var(--cream); }
.act--dark .act__num { color: var(--copper-soft); }
.act--dark .act__title { color: var(--cream); }
.act--dark .act__result { color: var(--cream); }
.act--dark .act__before li { color: var(--cream-mute); }

.act__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-12);
  align-items: center;
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 var(--s-6);
}
.act--reverse .act__inner { direction: rtl; }
.act--reverse .act__visual,
.act--reverse .act__text { direction: ltr; }

@media (max-width: 920px) {
  .act { padding: var(--s-12) 0; }
  .act__inner {
    grid-template-columns: 1fr;
    gap: var(--s-8);
    direction: ltr !important;
  }
  .act__visual { order: -1; }
}

.act__visual {
  display: flex;
  justify-content: center;
  align-items: center;
}
.act__visual--dual {
  gap: var(--s-4);
}
.act__visual--dual .phone {
  width: 220px;
  height: 460px;
  border-radius: 32px;
}
.act__visual--dual .phone__screen { padding: 48px 16px 16px; border-radius: 24px; }

.act__num {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-accent);
  font-weight: 600;
  margin-bottom: var(--s-4);
}
.act__title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4.5vw, 3.75rem);
  line-height: 1.04;
  font-weight: 500;
  letter-spacing: -0.018em;
  color: var(--c-ink);
  margin-bottom: var(--s-6);
  max-width: 14ch;
}
.act__before {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--s-6) 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.act__before li {
  font-size: 1rem;
  color: var(--c-ink-mute);
  text-decoration: line-through;
  text-decoration-color: var(--c-rule);
  letter-spacing: 0;
}
.act__result {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2.125rem);
  line-height: 1.18;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--c-ink);
  margin: 0;
  padding-top: var(--s-5);
  border-top: 2px solid var(--c-accent);
  max-width: 28ch;
}
.act--dark .act__result {
  border-top-color: var(--copper);
}

/* ---- phone screen content patterns added for acts ---- */
.phone__stamp {
  position: absolute;
  top: 80px;
  right: 24px;
  transform: rotate(-12deg);
  padding: 6px 14px;
  border: 2px solid var(--ok);
  color: var(--ok);
  border-radius: 6px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.phone__seed-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: var(--s-3) 0;
}
.phone__seed-word {
  background: rgba(229, 115, 115, 0.08);
  border: 1px solid rgba(229, 115, 115, 0.2);
  padding: 6px 4px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--cream-mute);
  border-radius: 4px;
  text-decoration: line-through;
  text-decoration-color: var(--warn);
}
.phone__alert {
  padding: 12px;
  background: rgba(229, 115, 115, 0.1);
  border: 1px solid rgba(229, 115, 115, 0.3);
  border-radius: 8px;
  margin-bottom: var(--s-4);
}
.phone__alert-eyebrow {
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--warn);
  font-weight: 600;
  margin-bottom: 6px;
}
.phone__alert-title {
  font-size: 13px;
  color: var(--cream);
  font-weight: 500;
}
.phone__big-zero {
  font-family: var(--font-display);
  font-size: 96px;
  font-weight: 400;
  line-height: 1;
  color: var(--ok);
  text-align: center;
  margin: var(--s-4) 0 var(--s-2);
}
.phone__hardware-line {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--obsidian-line);
  font-size: 12px;
}
.phone__hardware-line:last-of-type { border-bottom: none; }
.phone__hardware-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(229, 115, 115, 0.1);
  border: 1px solid rgba(229, 115, 115, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--warn);
  flex: 0 0 auto;
}
.phone__hardware-name {
  flex: 1;
  text-decoration: line-through;
  text-decoration-color: var(--warn);
  color: var(--cream-mute);
}

.scenes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-10) var(--s-8);
  margin-top: var(--s-10);
}
@media (max-width: 1000px) { .scenes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .scenes { grid-template-columns: 1fr; gap: var(--s-8); } }

.scene { display: flex; flex-direction: column; align-items: center; }
.scene__caption {
  margin-top: var(--s-5);
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.18;
  color: var(--c-ink);
  text-align: center;
  max-width: 22ch;
  letter-spacing: -0.012em;
}
.scene__sub {
  margin-top: var(--s-2);
  font-size: 0.875rem;
  color: var(--c-ink-mute);
  text-align: center;
  max-width: 28ch;
}

/* ---- phone frame ---- */
.phone {
  width: 290px;
  height: 590px;
  background: var(--obsidian);
  border-radius: 38px;
  padding: 12px;
  box-shadow:
    0 0 0 2px var(--obsidian-line),
    0 30px 60px -20px rgba(14, 15, 18, 0.45),
    0 12px 24px -10px rgba(14, 15, 18, 0.3);
  position: relative;
}
.phone__notch {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 92px;
  height: 26px;
  background: var(--obsidian);
  border-radius: 14px;
  z-index: 5;
}
.phone__screen {
  width: 100%;
  height: 100%;
  background: var(--obsidian-soft);
  border-radius: 28px;
  padding: 56px 22px 22px;
  color: var(--cream);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
.phone__bar {
  position: absolute;
  top: 14px;
  left: 28px;
  right: 28px;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  color: var(--cream);
  letter-spacing: 0.02em;
  z-index: 6;
}
.phone__eyebrow {
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--copper-soft);
  font-weight: 600;
  margin-bottom: var(--s-2);
}
.phone__hed {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.012em;
  color: var(--cream);
  margin-bottom: var(--s-3);
}
.phone__amount {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--cream);
  line-height: 1;
  margin-bottom: var(--s-1);
}
.phone__amount-sub {
  font-size: 12px;
  color: var(--cream-mute);
  margin-bottom: var(--s-5);
}
.phone__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--obsidian-line);
  font-size: 12px;
}
.phone__row:last-of-type { border-bottom: none; }
.phone__row-label { color: var(--cream-mute); letter-spacing: 0.02em; }
.phone__row-value { color: var(--cream); font-weight: 500; }
.phone__check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ok);
  font-size: 11px;
  font-weight: 600;
}
.phone__check::before {
  content: "✓";
  display: inline-block;
  width: 14px;
  height: 14px;
  background: var(--ok);
  color: var(--obsidian);
  border-radius: 50%;
  text-align: center;
  line-height: 14px;
  font-size: 9px;
  font-weight: 700;
}
.phone__badge {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(201, 138, 71, 0.18);
  border: 1px solid rgba(201, 138, 71, 0.4);
  border-radius: 999px;
  color: var(--copper-soft);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}
.phone__cta {
  margin-top: auto;
  background: var(--copper);
  color: var(--obsidian);
  text-align: center;
  padding: 14px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
}
.phone__cta--ghost {
  background: transparent;
  color: var(--cream);
  border: 1px solid var(--obsidian-line);
}
.phone__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: var(--s-3);
}
.phone__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  background: rgba(14, 15, 18, 0.5);
  border: 1px solid var(--obsidian-line);
  border-radius: 10px;
}
.phone__item-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--cream);
  font-weight: 500;
}
.phone__item-sub {
  font-size: 10.5px;
  color: var(--cream-mute);
  letter-spacing: 0.02em;
}
.phone__strike {
  text-decoration: line-through;
  text-decoration-color: var(--warn);
  color: var(--cream-mute);
}
.phone__lock {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  text-align: center;
}
.phone__lock-glyph {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(229, 115, 115, 0.12);
  border: 1.5px solid var(--warn);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--warn);
  margin-bottom: var(--s-3);
}
.phone__bio-glyph {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 2px solid var(--copper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--copper-soft);
  margin: 18px auto 14px;
  background:
    radial-gradient(circle at 30% 30%, rgba(201, 138, 71, 0.22), transparent 60%);
}
.phone__big-num {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 400;
  letter-spacing: -0.018em;
  color: var(--cream);
  line-height: 1;
  margin: 4px 0;
}
.phone__heir {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px dashed var(--obsidian-line);
  font-size: 12px;
}
.phone__heir:last-child { border-bottom: none; }
.phone__heir-name { color: var(--cream); font-weight: 500; }
.phone__heir-share { color: var(--copper-soft); font-family: var(--font-display); font-size: 13px; }
.phone__counter {
  display: inline-block;
  padding: 6px 12px;
  background: rgba(201, 138, 71, 0.14);
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--copper-soft);
  letter-spacing: 0.05em;
}

/* ---- the five fears (big numbered hero questions) ---- */
.fears {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: var(--s-10);
  border-top: 1px solid var(--c-rule);
}
.fear {
  display: grid;
  grid-template-columns: 80px 1fr 2fr;
  gap: var(--s-6);
  align-items: baseline;
  padding: var(--s-6) 0;
  border-bottom: 1px solid var(--c-rule);
}
@media (max-width: 720px) {
  .fear {
    grid-template-columns: 1fr;
    gap: var(--s-3);
    padding: var(--s-5) 0;
  }
}
.fear__num {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--c-accent);
  letter-spacing: 0;
}
.fear__name {
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 500;
  color: var(--c-ink);
  line-height: 1.15;
}
.fear__q {
  font-size: var(--fs-lede);
  color: var(--c-ink-soft);
  line-height: 1.4;
  margin: 0;
  max-width: 48ch;
}

/* ---- the five promises (large serif statements) ---- */
.promises {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: var(--s-10);
  gap: 0;
  border-top: 1px solid var(--c-rule);
}
.promise {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--s-8);
  align-items: baseline;
  padding: var(--s-6) 0;
  border-bottom: 1px solid var(--c-rule);
}
@media (max-width: 720px) {
  .promise {
    grid-template-columns: 1fr;
    gap: var(--s-2);
    padding: var(--s-5) 0;
  }
}
.promise__label {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--c-accent);
  align-self: center;
}
.promise__statement {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1.18;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--c-ink);
  margin: 0;
  max-width: 28ch;
}
@media (max-width: 720px) {
  .promise__statement { font-size: 1.375rem; }
}

/* ---- what H33 replaces (comparison table) ---- */
.replaces {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--c-rule);
  border-bottom: 1px solid var(--c-rule);
  margin-top: var(--s-8);
}
.replaces__row {
  display: contents;
}
.replaces__old,
.replaces__new {
  padding: var(--s-5) var(--s-6);
  border-bottom: 1px solid var(--c-rule);
  font-size: var(--fs-body);
  line-height: 1.45;
}
.replaces__row:last-child .replaces__old,
.replaces__row:last-child .replaces__new {
  border-bottom: none;
}
.replaces__old {
  color: var(--c-ink-mute);
  text-decoration: line-through;
  text-decoration-color: var(--c-rule);
  background: var(--c-paper-alt);
}
.replaces__new {
  color: var(--c-ink);
  font-weight: 500;
  border-left: 1px solid var(--c-rule);
}
@media (max-width: 720px) {
  .replaces { grid-template-columns: 1fr; }
  .replaces__new { border-left: none; border-top: none; padding-top: var(--s-2); }
  .replaces__old { padding-bottom: var(--s-2); border-bottom: none; }
}

/* ---- killer-line section ---- */
.killer {
  padding: var(--s-16) 0;
  background: var(--c-ink);
  color: var(--c-paper);
  text-align: center;
}
.killer__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 1.05;
  letter-spacing: -0.018em;
  color: var(--c-paper);
  max-width: 18ch;
  margin: 0 auto var(--s-6);
}
.killer__sub {
  color: rgba(251, 249, 244, 0.78);
  font-size: var(--fs-lede);
  max-width: 52ch;
  margin: 0 auto var(--s-8);
}

/* ---- differentiator grid (3-column hero proof) ---- */
.diff-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-8);
  margin-top: var(--s-10);
}
@media (max-width: 920px) {
  .diff-grid { grid-template-columns: 1fr; gap: var(--s-6); }
}
.diff {
  border-top: 2px solid var(--c-ink);
  padding-top: var(--s-6);
}
.diff__num {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: var(--s-3);
  font-weight: 500;
}
.diff__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.18;
  font-weight: 500;
  margin-bottom: var(--s-4);
  color: var(--c-ink);
}
.diff__copy {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-ink-soft);
}

/* ---- receipt cards ---- */
.receipts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-5);
  margin-top: var(--s-8);
}
@media (max-width: 720px) {
  .receipts { grid-template-columns: 1fr; }
}
.receipt {
  background: var(--c-card);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-card);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  box-shadow: 0 1px 0 var(--c-shadow);
}
.receipt__label {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--c-accent);
}
.receipt__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.15;
  font-weight: 500;
  color: var(--c-ink);
}
.receipt__sub {
  font-size: var(--fs-body-sm);
  color: var(--c-ink-mute);
  margin-bottom: var(--s-2);
}
.receipt__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.receipt__line {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  font-size: var(--fs-body-sm);
  color: var(--c-ink-soft);
  line-height: 1.45;
}
.receipt__check {
  flex: 0 0 auto;
  width: 1.25rem;
  color: var(--c-heritage);
  font-weight: 700;
  line-height: 1.45;
}
.receipt__footer {
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px dashed var(--c-rule);
  font-size: 0.8125rem;
  color: var(--c-ink-mute);
  font-style: italic;
}

/* ---- distribution matrix ---- */
.matrix {
  background: var(--c-card);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-card);
  padding: var(--s-6);
  margin-top: var(--s-6);
  max-width: 720px;
}
.matrix__row {
  display: grid;
  grid-template-columns: 1.4fr 2fr;
  gap: var(--s-5);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--c-rule);
}
.matrix__row:last-child { border-bottom: none; }
.matrix__asset {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--c-ink);
}
.matrix__asset-note {
  display: block;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--c-ink-mute);
  margin-top: var(--s-1);
  letter-spacing: 0;
}
.matrix__dist {
  font-size: var(--fs-body-sm);
  color: var(--c-ink-soft);
  line-height: 1.6;
}
.matrix__share {
  display: inline-block;
  padding: 2px 8px;
  background: var(--c-paper-alt);
  border: 1px solid var(--c-rule);
  border-radius: 999px;
  margin-right: var(--s-2);
  font-size: 0.8125rem;
  white-space: nowrap;
}
.matrix__trigger {
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-rule);
  font-size: var(--fs-body-sm);
  color: var(--c-ink-mute);
}
.matrix__trigger strong { color: var(--c-ink-soft); font-weight: 500; }

/* ---- agent capability cards ---- */
.agents {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-4);
  margin-top: var(--s-6);
}
@media (max-width: 720px) { .agents { grid-template-columns: 1fr; } }
.agent {
  background: var(--c-card);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-card);
  padding: var(--s-5);
}
.agent__name {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--c-ink);
  margin-bottom: var(--s-2);
}
.agent__scope {
  font-size: 0.8125rem;
  color: var(--c-ink-mute);
  margin-bottom: var(--s-3);
  letter-spacing: 0.04em;
}
.agent__copy {
  font-size: var(--fs-body-sm);
  color: var(--c-ink-soft);
  line-height: var(--lh-body);
}

/* ---- recovery path callouts ---- */
.paths {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
  margin-top: var(--s-8);
}
@media (max-width: 920px) { .paths { grid-template-columns: 1fr; gap: var(--s-5); } }
.path {
  border-left: 3px solid var(--c-accent);
  padding-left: var(--s-5);
}
.path__num {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--c-accent);
  margin-bottom: var(--s-2);
}
.path__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  margin-bottom: var(--s-3);
  color: var(--c-ink);
}
.path__copy {
  font-size: var(--fs-body-sm);
  color: var(--c-ink-soft);
  line-height: var(--lh-body);
}

/* ---- pillar question card revision (the substrate framing) ---- */
.pillar-card__primitive {
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px dashed var(--c-rule);
  font-size: 0.8125rem;
  color: var(--c-ink-mute);
  font-style: italic;
}

/* ---- utility: visually hidden but accessible ---- */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---- mobile nav drawer (progressive enhancement, hidden by default) ---- */
.nav__drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(360px, 88vw);
  background: var(--c-paper);
  border-left: 1px solid var(--c-rule);
  padding: var(--s-8) var(--s-6);
  transform: translateX(100%);
  transition: transform var(--transition);
  display: none;
  flex-direction: column;
  gap: var(--s-4);
  z-index: 60;
}
.nav__drawer.is-open { transform: translateX(0); }
@media (max-width: 920px) {
  .nav__drawer { display: flex; }
}