/* Theme 4 - Warm Consultant (drafted for /russell-tunick)
   Colorway lifted from the client's existing brand: linen cream paper,
   forest green from the dog mark, cocoa brown text, a lake-blue tint held
   back for imagery washes only. Figtree (display) + Source Sans 3 (body),
   the same families his current site uses. Type runs a step large for a
   62+ reader. Shape rule: buttons and chips are pills, cards are 16px.
   Motion: transform + opacity only. Reveals via [data-reveal].is-visible.
   Progress bar is a CSS scroll-driven animation (no scroll listeners). */

@import url("https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500;1,600&family=Source+Sans+3:ital,wght@0,400;0,500;0,600;1,400&display=swap");

:root {
  --t4-cream: #f7f3eb;
  --t4-cream-deep: #efe8da;
  --t4-surface: #fffdf9;
  --t4-forest: #5d7257;
  --t4-forest-deep: #46583f;
  --t4-forest-ink: #2f3c2b;
  --t4-forest-soft: rgba(93, 114, 87, 0.12);
  --t4-forest-tint: #e3e8de;
  --t4-lake: #6e89a8;
  --t4-lake-tint: #e2e8ef;
  --t4-cocoa: #3a322c;
  --t4-cocoa-deep: #241e1a;
  --t4-text: #3a322c;
  --t4-muted: #6b625b;
  --t4-line: rgba(58, 50, 44, 0.12);
  --t4-line-strong: rgba(58, 50, 44, 0.24);
  --t4-shadow:
    0 1px 2px rgba(58, 50, 44, 0.05),
    0 18px 40px rgba(93, 114, 87, 0.12);
  --t4-shadow-lg:
    0 2px 4px rgba(58, 50, 44, 0.06),
    0 32px 64px rgba(58, 50, 44, 0.18);
  --t4-display: "Figtree", "Avenir Next", "Segoe UI", sans-serif;
  --t4-body: "Source Sans 3", "Source Sans Pro", system-ui, sans-serif;
  --t4-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t4-ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --t4-radius: 1rem;
  --t4-radius-sm: 0.625rem;
  --t4-pill: 999px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

.t4-page section[id] {
  scroll-margin-top: 5rem;
}

html,
body.t4-page {
  overflow-x: clip;
}

body.t4-page {
  margin: 0;
  font-family: var(--t4-body);
  font-size: 1.125rem;
  color: var(--t4-text);
  background: var(--t4-cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga";
}

.t4-page a:not(.t4-btn) {
  color: inherit;
}

.t4-page :focus-visible {
  outline: 3px solid var(--t4-forest);
  outline-offset: 3px;
  border-radius: var(--t4-radius-sm);
}

.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;
}

.sr-only:focus {
  position: fixed;
  top: 1rem;
  left: 1rem;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0.6rem 1rem;
  clip: auto;
  background: var(--t4-cocoa);
  color: var(--t4-cream);
  z-index: 100;
  border-radius: var(--t4-pill);
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

.t4-wrap {
  width: min(1180px, calc(100% - 2.5rem));
  margin: 0 auto;
}

.t4-narrow {
  max-width: 46rem;
}

/* ---- Type ---- */
.t4-kicker {
  margin: 0 0 0.9rem;
  font-family: var(--t4-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--t4-forest);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.t4-kicker::before {
  content: "";
  width: 1.5rem;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  opacity: 0.8;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 700ms var(--t4-ease) 150ms;
}

.is-visible .t4-kicker::before,
.t4-kicker.is-visible::before,
.t4-rise.t4-kicker::before,
html:not(.js) .t4-kicker::before {
  transform: scaleX(1);
}

.t4-headline {
  margin: 0 0 1.1rem;
  font-family: var(--t4-display);
  font-weight: 800;
  font-size: clamp(2.1rem, 3.2vw, 2.55rem);
  line-height: 1.06;
  letter-spacing: -0.028em;
  color: var(--t4-cocoa);
  text-wrap: balance;
}

.t4-headline em {
  font-style: normal;
  font-weight: 800;
  color: var(--t4-forest);
}

.t4-h2 {
  margin: 0 0 1rem;
  font-family: var(--t4-display);
  font-weight: 700;
  font-size: clamp(1.85rem, 3.1vw, 2.65rem);
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: var(--t4-cocoa);
  text-wrap: balance;
}

.t4-h2--light {
  color: var(--t4-cream);
}

.t4-h3 {
  margin: 0;
  font-family: var(--t4-display);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--t4-cocoa);
}

.t4-lead {
  margin: 0 0 1.6rem;
  font-size: clamp(1.15rem, 1.45vw, 1.3rem);
  line-height: 1.5;
  color: var(--t4-muted);
  max-width: 32rem;
  text-wrap: pretty;
}

.t4-muted {
  margin: 0 0 1.1rem;
  color: var(--t4-muted);
  max-width: 40rem;
  text-wrap: pretty;
}

.t4-muted strong {
  color: var(--t4-cocoa);
  font-weight: 600;
}

/* ---- Buttons ---- */
.t4-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.6rem;
  font-family: var(--t4-display);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.1;
  text-decoration: none;
  border-radius: var(--t4-pill);
  border: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition:
    transform 240ms var(--t4-ease),
    background-color 240ms var(--t4-ease),
    border-color 240ms var(--t4-ease),
    color 240ms var(--t4-ease),
    box-shadow 240ms var(--t4-ease);
}

.t4-btn svg {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  transition: transform 240ms var(--t4-ease);
}

.t4-btn:hover svg {
  transform: translateX(3px);
}

.t4-btn:active {
  transform: translateY(1px) scale(0.985);
}

.t4-btn--forest {
  background: var(--t4-forest);
  color: var(--t4-cream);
  box-shadow:
    0 1px 2px rgba(47, 60, 43, 0.2),
    0 12px 28px rgba(93, 114, 87, 0.32);
}

.t4-btn--forest:hover {
  background: var(--t4-forest-deep);
  color: #fff;
  transform: translateY(-2px);
  box-shadow:
    0 2px 4px rgba(47, 60, 43, 0.22),
    0 18px 36px rgba(93, 114, 87, 0.36);
}

.t4-btn--cocoa {
  background: var(--t4-cocoa);
  color: var(--t4-cream);
}

.t4-btn--cocoa:hover {
  background: var(--t4-cocoa-deep);
  transform: translateY(-2px);
}

.t4-btn--ghost {
  background: transparent;
  color: var(--t4-cocoa);
  border-color: var(--t4-line-strong);
}

.t4-btn--ghost:hover {
  border-color: var(--t4-cocoa);
  background: rgba(58, 50, 44, 0.04);
  transform: translateY(-2px);
}

.t4-btn--ghost-light {
  background: rgba(255, 255, 255, 0.08);
  color: var(--t4-cream);
  border-color: rgba(247, 243, 235, 0.45);
}

.t4-btn--ghost-light:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: var(--t4-cream);
  transform: translateY(-2px);
}

.t4-btn--lg {
  padding: 1.15rem 2rem;
  font-size: 1.12rem;
}

.t4-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: center;
}

.t4-cta-row--center {
  justify-content: center;
}

@media (max-width: 480px) {
  .t4-cta-row .t4-btn {
    width: 100%;
  }
}

/* ---- Header ---- */
.t4-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(247, 243, 235, 0.82);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--t4-line);
}

.t4-progress {
  position: absolute;
  left: 0;
  top: 0;
  height: 3px;
  width: 100%;
  background: var(--t4-forest);
  transform-origin: left center;
  transform: scaleX(0);
  pointer-events: none;
}

@supports (animation-timeline: scroll()) {
  .t4-progress {
    animation: t4-progress linear both;
    animation-timeline: scroll(root);
  }
}

@keyframes t4-progress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.t4-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.5rem;
  padding: 0.6rem 0;
}

.t4-header.is-compact .t4-topbar {
  min-height: 3.9rem;
}

.t4-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  text-decoration: none;
  min-width: 0;
}

.t4-wordmark__mark {
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  transition: transform 500ms var(--t4-ease);
}

.t4-wordmark:hover .t4-wordmark__mark {
  transform: rotate(-6deg);
}

.t4-wordmark__text {
  display: grid;
  line-height: 1.15;
  min-width: 0;
}

.t4-wordmark strong {
  font-family: var(--t4-display);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  color: var(--t4-cocoa);
}

/* Client logo replaces the name line. Hide the square mark so the same file is not shown twice. */
.t4-wordmark__logo {
  display: block;
  height: 2.5rem;
  width: auto;
  max-width: min(46vw, 12rem);
  object-fit: contain;
  object-position: left center;
}

.t4-wordmark:has(.t4-wordmark__logo) .t4-wordmark__mark {
  display: none;
}

@media (max-width: 639px) {
  .t4-wordmark__logo {
    height: 2.15rem;
  }
}

.t4-wordmark span {
  font-size: 0.78rem;
  color: var(--t4-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition:
    opacity 300ms var(--t4-ease),
    transform 300ms var(--t4-ease);
}

.t4-header.is-compact .t4-wordmark span {
  opacity: 0;
  transform: translateY(-4px);
  height: 0;
}

.t4-topbar__right {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.t4-powered {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--t4-muted);
  text-decoration: none;
}

.t4-powered img,
.t4-company-logo {
  height: 1.55rem;
  width: auto;
}

.t4-topbar__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--t4-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--t4-cocoa);
  text-decoration: none;
}

.t4-topbar__phone svg {
  width: 1.2rem;
  height: 1.2rem;
  color: var(--t4-forest);
}

.t4-topbar__phone:hover {
  color: var(--t4-forest-deep);
}

@media (max-width: 760px) {
  .t4-powered,
  .t4-topbar__phone {
    display: none;
  }
  .t4-wordmark span {
    display: none;
  }
  /* The name column is a span. Keep it when it holds the logo, and still hide the sub line. */
  .t4-wordmark:has(.t4-wordmark__logo) .t4-wordmark__text,
  .t4-wordmark:has(.t4-wordmark__logo) .t4-wordmark__text > span {
    display: grid;
  }
  .t4-wordmark:has(.t4-wordmark__logo) .t4-wordmark__text > span {
    display: block;
  }
  .t4-header .t4-btn {
    padding: 0.75rem 1.1rem;
    font-size: 0.95rem;
  }
}

/* ---- Hero (landing) ---- */
.t4-hero {
  position: relative;
  padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(3rem, 6vw, 5.5rem);
  overflow: hidden;
  isolation: isolate;
}

.t4-hero__wash {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(60% 55% at 78% 18%, rgba(93, 114, 87, 0.16), transparent 70%),
    radial-gradient(40% 40% at 8% 95%, rgba(110, 137, 168, 0.12), transparent 70%),
    linear-gradient(180deg, var(--t4-cream) 0%, var(--t4-cream) 70%, var(--t4-cream-deep) 100%);
}

.t4-grain {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.23 0 0 0 0 0.2 0 0 0 0 0.17 0 0 0 0.10 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

/* Landing stacks intro, then the equity card, then the fine print.
   Thank-you overrides this grid with its own copy / photo pair. */
.t4-hero__grid {
  display: grid;
  align-items: center;
  row-gap: 1.5rem;
  grid-template-areas:
    "intro"
    "figure";
}

.t4-hero:not(.t4-hero--ty) .t4-hero__intro,
.t4-hero:not(.t4-hero--ty) .t4-hero__figure,
.t4-hero:not(.t4-hero--ty) .t4-hero__fine {
  min-width: 0;
}

.t4-hero:not(.t4-hero--ty) .t4-hero__intro {
  grid-area: intro;
  width: 100%;
}

/* Desktop: one row, two columns, both centred on the same axis. The fine
   print lives inside the intro column so the text block is a single grid
   item, which is what lets `align-items: center` hold no matter how the
   headline wraps or how tall the card gets. No magic offsets. */
@media (min-width: 900px) {
  .t4-hero:not(.t4-hero--ty) .t4-hero__grid {
    grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
    grid-template-areas: "intro figure";
    align-items: center;
    column-gap: clamp(2rem, 4vw, 3.5rem);
    row-gap: 0;
  }

  .t4-hero:not(.t4-hero--ty) .t4-hero__intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    grid-area: intro;
  }

  .t4-hero:not(.t4-hero--ty) .t4-hero__figure {
    grid-area: figure;
    align-self: center;
    justify-self: stretch;
    position: static;
    width: 100%;
    margin: 0;
  }

  .t4-hero:not(.t4-hero--ty) .t4-equity {
    position: static;
    transform: none;
  }
}

/* Landing headline: two beats, left aligned, sized to land in about 3 lines. */
.t4-hero:not(.t4-hero--ty) .t4-headline {
  max-width: 39rem;
  margin: 0 0 24px;
  font-weight: 600;
  /* 36px is the working size. A 40px ceiling left "Payments." alone on its own line. */
  font-size: clamp(30px, 3.2vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-align: left;
  text-wrap: balance;
}

.t4-nowrap {
  white-space: nowrap;
}

.t4-hero:not(.t4-hero--ty) .t4-headline em {
  font-style: normal;
  font-weight: 600;
  color: var(--t4-cocoa);
  background: var(--t4-forest-tint);
  border-radius: 0.16em;
  padding: 0.02em 0.16em 0.05em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.t4-hero:not(.t4-hero--ty) .t4-lead {
  max-width: 30rem;
  margin: 0 0 32px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  color: #7c736b;
}

.t4-hero:not(.t4-hero--ty) .t4-hero__actions {
  justify-content: flex-start;
  gap: 14px;
  margin: 0 0 20px;
}

.t4-hero:not(.t4-hero--ty) .t4-btn--lg {
  min-height: 56px;
  padding: 0 1.55rem;
  font-size: 18px;
}

.t4-hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.05rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--t4-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.3;
  color: var(--t4-forest-ink);
}

.t4-hero__trust li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  list-style: none;
}

.t4-hero__trust li::marker {
  content: "";
  font-size: 0;
}

.t4-hero__trust svg {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  max-width: 16px;
  max-height: 16px;
  flex: 0 0 16px;
  color: var(--t4-forest);
}

.t4-hero:not(.t4-hero--ty) .t4-consent {
  max-width: 34rem;
  margin: 20px 0 0;
  font-size: 12px;
  line-height: 1.45;
  text-align: left;
  color: #8f877f;
}

@media (max-width: 899px) {
  .t4-hero:not(.t4-hero--ty) .t4-hero__actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .t4-hero:not(.t4-hero--ty) .t4-hero__actions .t4-btn--forest {
    width: 100%;
  }

  .t4-hero:not(.t4-hero--ty) .t4-hero__how {
    align-self: flex-start;
    width: auto;
    min-height: 0;
    padding: 0.1rem 0;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    font-size: 16px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    justify-content: flex-start;
  }

  .t4-hero:not(.t4-hero--ty) .t4-hero__how:hover,
  .t4-hero:not(.t4-hero--ty) .t4-hero__how:active {
    transform: none;
    background: transparent;
    border-color: transparent;
  }

  .t4-hero:not(.t4-hero--ty) .t4-hero__trust {
    margin-bottom: 0;
  }
}

/* Sentence case on purpose: this line is a recognition, not a label, and a
   10-word uppercase tracked string is punishing for a 62+ reader. */
.t4-hero__eyebrow {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  margin: 0 0 16px;
  font-family: var(--t4-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--t4-forest-deep);
}

.t4-hero__eyebrow::before {
  content: "";
  flex: none;
  width: 1.5rem;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  opacity: 0.75;
  transform: translateY(-0.3em);
}

.t4-hero__actions {
  margin: 1.75rem 0 1.1rem;
}

.t4-consent {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--t4-muted);
  max-width: 34rem;
}

.t4-consent a {
  color: var(--t4-forest-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.t4-consent--on-ink {
  color: rgba(247, 243, 235, 0.72);
}

.t4-consent--on-ink a {
  color: var(--t4-cream);
}

/* Photo frame: rounded image with an offset forest slab behind it */
.t4-hero__figure {
  position: relative;
  margin: 0;
  max-width: 34rem;
  justify-self: end;
  align-self: center;
  grid-area: figure;
  width: 100%;
}

.t4-hero__figure::before {
  content: "";
  position: absolute;
  inset: 1.5rem -1.25rem -1.5rem 1.5rem;
  border-radius: var(--t4-radius);
  background: var(--t4-forest);
  opacity: 0.92;
  z-index: -1;
  transform: rotate(1.5deg);
}

/* Graphic variant drops the rotated slab: the diagram carries its own weight. */
.t4-hero__figure--graphic::before {
  content: none;
}

/* Equity-split house: filled lower section is equity owned, outlined upper
   section is the balance left. Doubles as a silent qualifier, the picture only
   looks like "my house" to someone who owns most of it. */
/* The card sits under the CTA on small screens, so the diagram can be
   stacked and large enough to read. Desktop fills the 45% column. */
.t4-equity {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.15rem 1.1rem;
  border-radius: var(--t4-radius);
  background: var(--t4-surface);
  box-shadow: var(--t4-shadow-lg);
}

.t4-equity__svg {
  display: block;
  width: 100%;
  max-width: 17.5rem;
  height: auto;
  margin: 0 auto;
}

.t4-hero:not(.t4-hero--ty) .t4-hero__figure {
  justify-self: stretch;
  max-width: none;
}

@media (min-width: 900px) {
  .t4-equity {
    gap: 0.75rem;
    padding: 1.05rem 1.2rem 1.15rem;
  }
  .t4-equity__svg {
    max-width: 21rem;
  }
}

/* Tinted rather than empty: the balance left is still part of the same house. */
.t4-equity__shell {
  fill: var(--t4-forest-tint);
  stroke: var(--t4-forest);
  stroke-width: 4;
  stroke-linejoin: round;
}

.t4-equity__fill {
  fill: var(--t4-forest);
}

/* Two loops, both cut from the diagram's own parts.
   1. The waterline breathes: fill and split line travel together between
      "a lot of the house" (y 204) and "most of the house" (y 170) and back.
      The range is narrow on purpose so every frame still reads as high equity.
   2. A drop leaves the green, rides the arrow, and dissolves into the coin.
   The coin swells a few percent at the high-equity end, in step with the
   waterline. Reduced motion holds the high-equity frame with no drop. */
.t4-equity__riser,
.t4-equity__drop,
.t4-equity__cash,
.t4-equity__coin-group {
  transform-box: fill-box;
  transform-origin: center;
}

.t4-equity__riser {
  animation: t4-equity-breathe 4200ms ease-in-out infinite alternate;
}

@keyframes t4-equity-breathe {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(34px);
  }
}

.t4-equity__split {
  stroke: var(--t4-forest);
  stroke-width: 4;
  stroke-linecap: round;
}

.t4-equity__coin-group {
  animation: t4-equity-swell 4200ms ease-in-out infinite alternate;
}

@keyframes t4-equity-swell {
  from {
    transform: scale(1.05);
  }
  to {
    transform: scale(1);
  }
}

.t4-equity__drop {
  fill: var(--t4-surface);
  stroke: var(--t4-forest);
  stroke-width: 2.5;
  animation: t4-equity-drop 2600ms cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

@keyframes t4-equity-drop {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  12% {
    opacity: 1;
  }
  78% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(96px);
  }
}

.t4-equity__cash {
  animation: t4-equity-cash 700ms var(--t4-ease-enter) 420ms both;
}

@keyframes t4-equity-cash {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.t4-equity__flow-in,
.t4-equity__flow-out,
.t4-equity__tip {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.t4-equity__flow-in {
  stroke: var(--t4-cream);
}

.t4-equity__flow-out,
.t4-equity__tip {
  stroke: var(--t4-forest);
}

.t4-equity__coin {
  fill: var(--t4-forest);
}

.t4-equity__coin-mark {
  fill: var(--t4-surface);
  font-family: var(--t4-display);
  font-weight: 800;
  font-size: 27px;
  text-anchor: middle;
  dominant-baseline: central;
}

.t4-equity__amount-value,
.t4-equity__amount-note {
  font-family: var(--t4-display);
  fill: var(--t4-surface);
  text-anchor: middle;
}

.t4-equity__amount-value {
  font-weight: 700;
  font-size: 22px;
}

.t4-equity__amount-note {
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.04em;
  fill: rgba(255, 253, 249, 0.82);
}

.t4-equity__legend {
  margin: 0;
  display: grid;
  gap: 0.75rem;
}

.t4-equity__legend > div {
  display: grid;
  gap: 0.12rem;
}

.t4-equity__legend dt {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--t4-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  color: var(--t4-cocoa);
}

.t4-equity__legend dd {
  display: block;
  margin: 0 0 0 1.7rem;
  font-family: var(--t4-display);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--t4-cocoa);
}

.t4-equity__sample {
  margin: 0;
  font-size: 16px;
  line-height: 1.35;
  color: var(--t4-muted);
}

.t4-equity__key {
  flex: none;
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 0.25rem;
}

.t4-equity__key--owned {
  background: var(--t4-forest);
}

.t4-equity__key--owed {
  background: var(--t4-cream);
  box-shadow: inset 0 0 0 2px var(--t4-forest);
}

.t4-hero__photo {
  border-radius: var(--t4-radius);
  overflow: hidden;
  box-shadow: var(--t4-shadow-lg);
  aspect-ratio: 5 / 4;
  background: var(--t4-cream-deep);
}

.t4-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.03);
  animation: t4-settle 1600ms var(--t4-ease-enter) both;
}

@keyframes t4-settle {
  from {
    transform: scale(1.08);
  }
  to {
    transform: scale(1.03);
  }
}

.t4-hero__plate {
  position: absolute;
  left: 1rem;
  bottom: -1.25rem;
  max-width: calc(100% - 2rem);
  display: grid;
  gap: 0.1rem;
  padding: 0.85rem 1.1rem;
  border-radius: var(--t4-radius-sm);
  background: var(--t4-surface);
  border: 1px solid var(--t4-line);
  box-shadow: var(--t4-shadow);
}

.t4-hero__plate-name {
  font-family: var(--t4-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--t4-cocoa);
}

.t4-hero__plate-role {
  font-size: 0.82rem;
  color: var(--t4-muted);
}

@media (max-width: 899px) {
  .t4-hero__figure {
    justify-self: stretch;
    max-width: none;
    margin-top: 0.5rem;
  }
  .t4-hero__figure::before {
    inset: 1rem -0.75rem -1rem 1rem;
  }
}

/* ---- Proof strip (static, under the hero) ---- */
.t4-proof {
  border-top: 1px solid var(--t4-line);
  border-bottom: 1px solid var(--t4-line);
  background: var(--t4-surface);
}

.t4-proof__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem 1rem;
  padding: 1.6rem 0;
  list-style: none;
  margin: 0;
}

@media (min-width: 860px) {
  .t4-proof__grid {
    grid-template-columns: repeat(4, 1fr);
    padding: 1.4rem 0;
  }
}

.t4-proof__grid li {
  display: grid;
  gap: 0.15rem;
  padding-left: 1rem;
  border-left: 2px solid var(--t4-forest-tint);
}

.t4-proof__grid strong {
  font-family: var(--t4-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--t4-cocoa);
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
}

.t4-proof__grid li > span {
  font-size: 0.86rem;
  color: var(--t4-muted);
}

.t4-stars {
  display: inline-flex;
  gap: 1px;
  color: var(--t4-forest);
}

.t4-stars svg {
  width: 0.95rem;
  height: 0.95rem;
}

.t4-proof__logo {
  align-self: center;
  grid-column: 1 / -1;
}

@media (min-width: 900px) {
  .t4-proof__logo {
    grid-column: auto;
  }
}

.t4-proof__logo a {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.6rem;
  text-decoration: none;
}

.t4-proof__logo img {
  height: 1.9rem;
  width: auto;
}

.t4-proof__logo span {
  font-size: 0.86rem;
  color: var(--t4-muted);
}

/* ---- Sections ---- */
.t4-section {
  padding: clamp(3.5rem, 7vw, 6.5rem) 0;
}

.t4-section--tint {
  background: var(--t4-cream-deep);
}

.t4-section__head {
  max-width: 44rem;
  margin-bottom: clamp(1.75rem, 3vw, 2.75rem);
}

/* ---- Outcomes bento (5 cells: 1 featured + 4) ---- */
.t4-bento {
  display: grid;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 700px) {
  .t4-bento {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .t4-bento {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(15rem, auto);
  }
  .t4-bento__cell--feature {
    grid-column: span 2;
    grid-row: span 2;
  }
}

.t4-bento__cell {
  position: relative;
  display: grid;
  align-content: end;
  gap: 0.5rem;
  padding: 1.6rem;
  border-radius: var(--t4-radius);
  background: var(--t4-surface);
  border: 1px solid var(--t4-line);
  overflow: hidden;
  min-height: 13rem;
  transition:
    transform 400ms var(--t4-ease),
    box-shadow 400ms var(--t4-ease);
}

.t4-bento__cell:hover {
  transform: translateY(-4px);
  box-shadow: var(--t4-shadow);
}

.t4-bento__cell h3 {
  margin: 0;
  font-family: var(--t4-display);
  font-weight: 700;
  font-size: 1.22rem;
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--t4-cocoa);
}

.t4-bento__cell p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--t4-muted);
}

.t4-bento__icon {
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  border-radius: var(--t4-pill);
  background: var(--t4-forest-soft);
  color: var(--t4-forest-deep);
  margin-bottom: 0.5rem;
}

.t4-bento__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.t4-bento__cell--feature {
  padding: 0;
  min-height: 22rem;
  border: 0;
  color: var(--t4-cream);
}

.t4-bento__cell--feature img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Bias toward the house in the window and the three faces. The empty
     table in the foreground is what the caption covers. */
  object-position: 62% 36%;
  transition: transform 900ms var(--t4-ease);
}

.t4-bento__cell--feature:hover img {
  transform: scale(1.04);
}

.t4-bento__cell--feature::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(36, 30, 26, 0) 30%,
    rgba(36, 30, 26, 0.55) 70%,
    rgba(36, 30, 26, 0.86) 100%
  );
}

.t4-bento__feature-copy {
  position: relative;
  z-index: 1;
  padding: 1.75rem;
  display: grid;
  gap: 0.5rem;
  align-self: end;
}

.t4-bento__cell--feature h3 {
  color: #fff;
  font-size: clamp(1.4rem, 2vw, 1.75rem);
}

.t4-bento__cell--feature p {
  color: rgba(247, 243, 235, 0.86);
  max-width: 30rem;
}

.t4-bento__cell--forest {
  background: var(--t4-forest);
  border-color: var(--t4-forest);
}

.t4-bento__cell--forest h3,
.t4-bento__cell--forest p {
  color: var(--t4-cream);
}

.t4-bento__cell--forest p {
  color: rgba(247, 243, 235, 0.82);
}

.t4-bento__cell--forest .t4-bento__icon {
  background: rgba(247, 243, 235, 0.16);
  color: var(--t4-cream);
}

.t4-bento__cell--lake {
  background: var(--t4-lake-tint);
  border-color: transparent;
}

.t4-bento__cell--lake .t4-bento__icon {
  background: rgba(110, 137, 168, 0.18);
  color: #3f5872;
}

.t4-bento__cell--tint {
  background: var(--t4-forest-tint);
  border-color: transparent;
}

.t4-bento__note {
  margin: 1.25rem 0 0;
  font-size: 0.9rem;
  color: var(--t4-muted);
  max-width: 46rem;
}

/* ---- Compare (Today vs With the program) ---- */
.t4-compare {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 760px) {
  .t4-compare {
    grid-template-columns: 1fr 1.15fr;
    align-items: stretch;
  }
}

.t4-compare__card {
  padding: 1.75rem;
  border-radius: var(--t4-radius);
  background: var(--t4-surface);
  border: 1px solid var(--t4-line);
  display: grid;
  gap: 1rem;
  align-content: start;
}

.t4-compare__card--on {
  background: var(--t4-cocoa);
  border-color: var(--t4-cocoa);
  color: var(--t4-cream);
  box-shadow: var(--t4-shadow-lg);
}

.t4-compare__title {
  margin: 0;
  font-family: var(--t4-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--t4-muted);
}

.t4-compare__card--on .t4-compare__title {
  color: #b9c9b3;
}

.t4-compare__card ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.75rem;
}

.t4-compare__card li {
  display: grid;
  grid-template-columns: 1.4rem 1fr;
  gap: 0.7rem;
  align-items: start;
  font-size: 1.05rem;
  line-height: 1.45;
}

.t4-compare__card li svg {
  width: 1.4rem;
  height: 1.4rem;
  margin-top: 0.1rem;
  color: var(--t4-muted);
}

.t4-compare__card--on li svg {
  color: #b9c9b3;
}

.t4-compare__card--on li strong {
  color: #fff;
  font-weight: 600;
}

.t4-compare__foot {
  margin: 1.25rem 0 0;
  font-size: 0.92rem;
  color: var(--t4-muted);
  max-width: 48rem;
}

/* ---- Process / timeline ---- */
.t4-process {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 760px) {
  .t4-process {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}

.t4-process li {
  display: grid;
  gap: 0.6rem;
  padding: 1.5rem 0 0;
  position: relative;
}

.t4-process__num {
  font-family: var(--t4-display);
  font-weight: 800;
  font-size: 2.4rem;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--t4-forest);
}

.t4-process h3 {
  margin: 0;
  font-family: var(--t4-display);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -0.012em;
  color: var(--t4-cocoa);
}

.t4-process p {
  margin: 0;
  font-size: 1rem;
  color: var(--t4-muted);
}

.t4-timeline {
  position: relative;
  padding-top: 1.25rem;
}

.t4-timeline__line {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--t4-forest);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1100ms var(--t4-ease) !important;
  opacity: 1 !important;
}

.t4-timeline__line.is-visible {
  transform: scaleX(1);
}

.t4-timeline__dot {
  position: absolute;
  top: -1.25rem;
  left: 0;
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 50%;
  background: var(--t4-forest);
  border: 3px solid var(--t4-cream);
  box-shadow: 0 0 0 2px var(--t4-forest);
  transform: translateY(-50%) scale(0);
  transition: transform 500ms var(--t4-ease) 700ms;
}

li.is-visible .t4-timeline__dot {
  transform: translateY(-50%) scale(1);
}

@media (max-width: 759px) {
  .t4-timeline {
    padding-top: 0;
    padding-left: 1.5rem;
  }
  .t4-timeline__line {
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    width: 2px;
    height: auto;
    transform: scaleY(0);
    transform-origin: top center;
  }
  .t4-timeline__line.is-visible {
    transform: scaleY(1);
  }
  .t4-timeline__dot {
    top: 1.9rem;
    left: -1.5rem;
    transform: translateX(-50%) scale(0);
  }
  li.is-visible .t4-timeline__dot {
    transform: translateX(-50%) scale(1);
  }
}

/* ---- Fit check ---- */
.t4-fit {
  display: grid;
  gap: 2rem;
  align-items: center;
}

@media (min-width: 900px) {
  .t4-fit {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 4rem;
  }
}

.t4-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.t4-chips li {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.75rem 1.1rem 0.75rem 0.85rem;
  border-radius: var(--t4-pill);
  background: var(--t4-surface);
  border: 1px solid var(--t4-line);
  font-family: var(--t4-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--t4-cocoa);
}

.t4-chips li svg {
  width: 1.3rem;
  height: 1.3rem;
  color: var(--t4-forest);
  flex: none;
}

.t4-states {
  margin: 1.5rem 0 0;
  padding: 1.25rem 1.4rem;
  border-radius: var(--t4-radius);
  background: var(--t4-forest-tint);
  display: grid;
  gap: 0.5rem;
}

.t4-states strong {
  font-family: var(--t4-display);
  font-size: 0.95rem;
  color: var(--t4-forest-ink);
}

.t4-states ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.t4-states li {
  font-family: var(--t4-display);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.65rem;
  border-radius: var(--t4-pill);
  background: var(--t4-surface);
  color: var(--t4-forest-deep);
}

/* ---- Reviews marquee (the one marquee on the page) ---- */
.t4-reviews__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: 0.5rem;
}

.t4-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1rem 0.6rem 0.8rem;
  border-radius: var(--t4-pill);
  background: var(--t4-surface);
  border: 1px solid var(--t4-line);
  text-decoration: none;
  font-size: 0.92rem;
  color: var(--t4-muted);
}

.t4-rating strong {
  font-family: var(--t4-display);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--t4-cocoa);
  font-variant-numeric: tabular-nums;
}

.t4-reviews {
  position: relative;
  margin-top: 1.5rem;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.t4-reviews__viewport {
  overflow: hidden;
  padding: 0.5rem 0 1rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.t4-reviews__rail {
  display: flex;
  width: max-content;
  gap: 0;
}

.t4-reviews.is-ready .t4-reviews__rail {
  animation: t4-reviews-drift 80s linear infinite;
}

.t4-reviews__rail:hover,
.t4-reviews:focus-within .t4-reviews__rail {
  animation-play-state: paused;
}

.t4-reviews.is-static .t4-reviews__rail {
  animation: none;
  width: auto;
  max-width: min(1180px, calc(100vw - 2.5rem));
  margin: 0 auto;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
}

.t4-reviews.is-static .t4-reviews__group {
  flex-wrap: wrap;
  justify-content: center;
}

.t4-reviews__group {
  display: flex;
  gap: 1.25rem;
  padding-right: 1.25rem;
  flex-shrink: 0;
}

.t4-slide {
  flex: 0 0 min(86vw, 24rem);
  margin: 0;
  padding: 1.75rem 1.75rem 1.5rem;
  background: var(--t4-surface);
  border: 1px solid var(--t4-line);
  border-radius: var(--t4-radius);
  display: grid;
  gap: 1rem;
  position: relative;
}

.t4-slide:nth-child(3n + 2) {
  background: var(--t4-forest);
  border-color: var(--t4-forest);
}

.t4-slide::before {
  content: "\201C";
  position: absolute;
  top: 0.4rem;
  left: 1.2rem;
  font-family: var(--t4-display);
  font-weight: 800;
  font-size: 4rem;
  line-height: 1;
  color: var(--t4-forest);
  opacity: 0.35;
}

.t4-slide:nth-child(3n + 2)::before {
  color: var(--t4-cream);
  opacity: 0.4;
}

.t4-slide blockquote {
  margin: 1.35rem 0 0;
  font-family: var(--t4-display);
  font-weight: 500;
  font-size: 1.08rem;
  line-height: 1.45;
  color: var(--t4-cocoa);
  text-wrap: pretty;
}

.t4-slide:nth-child(3n + 2) blockquote {
  color: #fff;
}

.t4-slide figcaption {
  display: grid;
  gap: 0.1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--t4-line);
}

.t4-slide:nth-child(3n + 2) figcaption {
  border-top-color: rgba(247, 243, 235, 0.22);
}

.t4-slide figcaption strong {
  font-family: var(--t4-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--t4-cocoa);
}

.t4-slide:nth-child(3n + 2) figcaption strong {
  color: var(--t4-cream);
}

.t4-slide figcaption span {
  font-size: 0.82rem;
  color: var(--t4-muted);
}

.t4-slide:nth-child(3n + 2) figcaption span {
  color: rgba(247, 243, 235, 0.72);
}

@keyframes t4-reviews-drift {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* ---- Meet Russ ---- */
.t4-meet {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 900px) {
  .t4-meet {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 4rem;
  }
}

.t4-meet__photo {
  margin: 0;
  position: relative;
  border-radius: var(--t4-radius);
  overflow: hidden;
  aspect-ratio: 5 / 4;
  box-shadow: var(--t4-shadow);
}

.t4-meet__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--t4-ease);
}

.t4-meet__photo:hover img {
  transform: scale(1.03);
}

.t4-meet__body p {
  font-size: 1.1rem;
}

.t4-meet__points {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.t4-meet__points li {
  display: grid;
  grid-template-columns: 1.3rem 1fr;
  gap: 0.7rem;
  align-items: start;
  color: var(--t4-text);
}

.t4-meet__points svg {
  width: 1.3rem;
  height: 1.3rem;
  color: var(--t4-forest);
  margin-top: 0.15rem;
}

.t4-company {
  margin-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  padding: 1.1rem 1.3rem;
  border-radius: var(--t4-radius);
  background: var(--t4-surface);
  border: 1px solid var(--t4-line);
}

.t4-company img {
  height: 2.1rem;
  width: auto;
}

.t4-company p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--t4-muted);
  flex: 1 1 16rem;
}

/* ---- CTA band (full-bleed photo with forest scrim) ---- */
.t4-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(4rem, 9vw, 8rem) 0;
  color: var(--t4-cream);
  background: var(--t4-forest-ink);
}

.t4-band__photo {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: -2;
}

.t4-band__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

.t4-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(47, 60, 43, 0.92) 0%, rgba(47, 60, 43, 0.78) 45%, rgba(47, 60, 43, 0.35) 100%),
    linear-gradient(180deg, rgba(36, 30, 26, 0.2), rgba(36, 30, 26, 0.4));
}

.t4-band__inner {
  max-width: 38rem;
}

.t4-band .t4-lead {
  color: rgba(247, 243, 235, 0.82);
}

.t4-band .t4-kicker {
  color: #b9c9b3;
}

.t4-band .t4-cta-row {
  margin: 1.5rem 0 1.1rem;
}

/* ---- Footer ---- */
.t4-footer {
  padding: 3rem 0 2.5rem;
  border-top: 1px solid var(--t4-line);
  background: var(--t4-cream-deep);
  font-size: 0.9rem;
  color: var(--t4-muted);
}

.t4-footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.75rem;
}

.t4-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  text-decoration: none;
}

.t4-footer__brand > img {
  width: 2.5rem;
  height: 2.5rem;
}

.t4-footer__brand:has(.t4-wordmark__logo) > img {
  display: none;
}

.t4-footer__brand .t4-wordmark__logo {
  height: 2.25rem;
  max-width: min(60vw, 12rem);
}

.t4-footer__brand strong {
  display: block;
  font-family: var(--t4-display);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--t4-cocoa);
  letter-spacing: -0.015em;
}

.t4-footer__brand span {
  display: block;
  font-size: 0.8rem;
}

.t4-footer__powered {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
}

.t4-footer__powered img {
  height: 1.7rem;
  width: auto;
}

.t4-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  margin: 0 0 1.25rem;
}

.t4-footer-links a {
  color: var(--t4-cocoa);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.t4-footer .site-legal,
.t4-footer .site-legal p,
.t4-footer .site-legal div {
  color: var(--t4-muted);
  font-size: 0.82rem;
  line-height: 1.55;
}

.t4-footer .site-legal a {
  color: var(--t4-cocoa);
}

.t4-footer .site-legal__title,
.t4-footer .site-legal__heading {
  font-family: var(--t4-display);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--t4-forest-deep);
  margin: 0 0 0.4rem;
}

.t4-footer .site-legal__block {
  margin-bottom: 1.1rem;
}

/* The shared footer renderer emits Tailwind utility classes; map the few it uses. */
.t4-page .site-legal svg {
  width: 1.75rem;
  height: 1.75rem;
  min-width: 1.75rem;
  min-height: 1.75rem;
  max-width: 1.75rem;
  max-height: 1.75rem;
  flex: 0 0 1.75rem;
}

/* Safari sizes a viewBox-only SVG in a flex or grid item from the
   page width. Lock every icon so a check cannot cover the hero. */
.t4-page li > svg,
.t4-page .t4-btn > svg,
.t4-page summary > svg,
.t4-page .t4-bento__icon > svg,
.t4-page .t4-stars > svg,
.t4-page .t4-stamp__check > svg,
.t4-page .t4-topbar__phone > svg {
  min-width: 0;
  max-width: 1.5rem;
  max-height: 1.5rem;
  flex-shrink: 0;
}

.t4-page .site-legal .flex {
  display: flex;
}

.t4-page .site-legal .flex-wrap {
  flex-wrap: wrap;
}

.t4-page .site-legal .items-end {
  align-items: flex-end;
}

.t4-page .site-legal .items-center {
  align-items: center;
}

.t4-page .site-legal .gap-6 {
  gap: 1.5rem;
}

.t4-page .site-legal [class*="gap-2"] {
  gap: 0.6rem;
}

.t4-page .site-legal .uppercase {
  text-transform: uppercase;
  font-family: var(--t4-display);
  font-size: 10px;
  letter-spacing: 0.1em;
  line-height: 1.35;
}

/* ---- Thank-you specifics ----
   The hero is a matched pair: copy and photo share one top edge and one
   bottom edge. The nameplate is the foot of the photo card, not a card
   hanging off it. */
.t4-hero--ty {
  padding-bottom: clamp(3.5rem, 6vw, 6rem);
}

.t4-hero--ty .t4-hero__grid {
  align-items: stretch;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto;
  grid-template-areas:
    "copy"
    "figure";
}

.t4-hero--ty .t4-hero__copy {
  grid-area: copy;
  display: flex;
  flex-direction: column;
}

.t4-hero--ty .t4-hero__figure {
  grid-area: figure;
  max-width: none;
  justify-self: stretch;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  margin: 0;
  border-radius: var(--t4-radius);
  overflow: hidden;
  background: var(--t4-surface);
  border: 1px solid var(--t4-line);
  box-shadow: var(--t4-shadow);
}

.t4-hero--ty .t4-hero__figure::before {
  content: none;
}

.t4-hero--ty .t4-hero__photo {
  flex: 1 1 auto;
  min-height: 16rem;
  aspect-ratio: 5 / 4;
  border-radius: 0;
  box-shadow: none;
}

.t4-hero--ty .t4-hero__photo img {
  object-position: center 18%;
}

.t4-hero--ty .t4-hero__plate {
  position: static;
  left: auto;
  bottom: auto;
  max-width: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  border-top: 1px solid var(--t4-line);
  padding: 1.15rem 1.35rem 1.25rem;
}

@media (min-width: 900px) {
  .t4-hero--ty .t4-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "copy figure";
    column-gap: clamp(1.25rem, 2.5vw, 2rem);
  }

  .t4-hero--ty .t4-callcard {
    margin-top: auto;
  }

  .t4-hero--ty .t4-hero__photo {
    aspect-ratio: auto;
    min-height: 18rem;
  }
}

.t4-stamp {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.25rem;
  padding: 0.5rem 1rem 0.5rem 0.55rem;
  border-radius: var(--t4-pill);
  background: var(--t4-forest-tint);
  color: var(--t4-forest-ink);
  font-family: var(--t4-display);
  font-weight: 700;
  font-size: 0.92rem;
}

.t4-stamp__check {
  width: 1.6rem;
  height: 1.6rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--t4-forest);
  color: var(--t4-cream);
}

.t4-stamp__check svg {
  width: 1rem;
  height: 1rem;
}

.t4-callcard {
  margin-top: 1.5rem;
  padding: 1.6rem 1.75rem;
  border-radius: var(--t4-radius);
  background: var(--t4-surface);
  border: 1px solid var(--t4-line);
  box-shadow: var(--t4-shadow);
  display: grid;
  gap: 0.6rem;
}

.t4-callcard__label {
  font-family: var(--t4-display);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t4-forest-deep);
}

.t4-phone-xl {
  font-family: var(--t4-display);
  font-weight: 800;
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--t4-cocoa);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

.t4-phone-xl:hover {
  color: var(--t4-forest-deep);
}

.t4-phone-xl--light {
  color: var(--t4-cream);
  display: inline-block;
  margin: 0.5rem 0 0;
}

.t4-phone-xl--light:hover {
  color: #fff;
}

.t4-callcard__hint {
  font-size: 0.92rem;
  color: var(--t4-muted);
}

.t4-callcard__actions {
  margin-top: 0.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.t4-hero__plate-steps {
  margin: 0.6rem 0 0;
  padding: 0.6rem 0 0 1.1rem;
  border-top: 1px solid var(--t4-line);
  font-size: 0.85rem;
  color: var(--t4-muted);
  display: grid;
  gap: 0.2rem;
}

/* Common questions accordion */
.t4-faq {
  display: grid;
  gap: 0.6rem;
  margin-top: 1.5rem;
}

.t4-faq__item {
  border-radius: var(--t4-radius);
  background: var(--t4-surface);
  border: 1px solid var(--t4-line);
  overflow: hidden;
}

.t4-faq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.3rem;
  font-family: var(--t4-display);
  font-weight: 700;
  font-size: 1.08rem;
  color: var(--t4-cocoa);
}

.t4-faq__item summary::-webkit-details-marker {
  display: none;
}

.t4-faq__item summary svg {
  width: 1.3rem;
  height: 1.3rem;
  flex: none;
  color: var(--t4-forest);
  transition: transform 300ms var(--t4-ease);
}

.t4-faq__item[open] summary svg {
  transform: rotate(180deg);
}

.t4-faq__body {
  padding: 0 1.3rem 1.2rem;
  color: var(--t4-muted);
}

.t4-faq__body p {
  margin: 0 0 0.6rem;
}

.t4-faq__body a {
  color: var(--t4-forest-deep);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Resources grid */
.t4-resources {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
}

@media (min-width: 700px) {
  .t4-resources {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .t4-resources {
    grid-template-columns: repeat(3, 1fr);
  }
}

.t4-resource {
  display: grid;
  gap: 0.4rem;
  padding: 1.4rem 1.5rem;
  border-radius: var(--t4-radius);
  background: var(--t4-surface);
  border: 1px solid var(--t4-line);
  text-decoration: none;
  transition:
    transform 300ms var(--t4-ease),
    box-shadow 300ms var(--t4-ease),
    border-color 300ms var(--t4-ease);
}

.t4-resource:hover {
  transform: translateY(-3px);
  box-shadow: var(--t4-shadow);
  border-color: var(--t4-forest);
}

.t4-resource strong {
  font-family: var(--t4-display);
  font-weight: 700;
  font-size: 1.08rem;
  color: var(--t4-cocoa);
}

.t4-resource span {
  font-size: 0.95rem;
  color: var(--t4-muted);
}

/* ---- Motion primitives ---- */
@keyframes t4-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.t4-rise {
  animation: t4-rise 700ms var(--t4-ease-enter) both;
}

.t4-rise--2 {
  animation-delay: 110ms;
}

.t4-rise--3 {
  animation-delay: 220ms;
}

.t4-rise--4 {
  animation-delay: 330ms;
}

.t4-rise--5 {
  animation-delay: 440ms;
}

.t4-words-ready .t4-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.35em);
  transition:
    opacity 600ms var(--t4-ease-enter),
    transform 600ms var(--t4-ease-enter);
}

.t4-words-ready.is-visible .t4-word {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition-property: opacity, transform;
  transition-duration: 650ms;
  transition-timing-function: var(--t4-ease);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

html:not(.js) [data-reveal] {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .t4-btn,
  .t4-rise,
  .t4-resource,
  .t4-hero__photo img,
  .t4-reviews__rail,
  .t4-slide,
  .t4-bento__cell,
  .t4-bento__cell--feature img,
  .t4-meet__photo img,
  .t4-equity__riser,
  .t4-equity__coin-group,
  .t4-equity__drop,
  .t4-equity__cash,
  .t4-progress {
    animation: none;
    transition-duration: 0.01ms;
  }
  .t4-progress,
  .t4-equity__drop {
    display: none;
  }
  [data-reveal],
  .t4-timeline__line,
  .t4-timeline__dot,
  .t4-words-ready .t4-word {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .t4-timeline__dot {
    transform: translateY(-50%);
  }
}

/* ---- Shared legal / SMS pages (t1- classes remapped to t4- at build) ---- */
.t4-legal-page .t4-topbar,
body.t4-page:has(.t4-sms-body) .t4-topbar {
  border-bottom: 1px solid var(--t4-line);
}

.t4-sms-body {
  display: grid;
  gap: 1.25rem;
  margin-top: 0.5rem;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--t4-muted);
}

.t4-sms-body p {
  margin: 0;
}

.t4-sms-h {
  margin: 0.5rem 0 0;
  font-family: var(--t4-display);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--t4-forest-deep);
}

.t4-sms-pending {
  margin: 0 0 1.5rem;
  padding: 0.85rem 1rem;
  border: 1px dashed rgba(93, 114, 87, 0.6);
  border-radius: var(--t4-radius-sm);
  background: var(--t4-forest-soft);
  font-size: 0.9rem;
  color: var(--t4-forest-ink);
}

.t4-legal-page__wrap {
  max-width: 42rem;
}

.t4-legal-page__body {
  margin-bottom: 2rem;
}

.t4-legal-page .site-legal,
.t4-legal-page .site-legal p,
.t4-legal-page .site-legal div {
  color: var(--t4-muted);
}

.t4-legal-page .site-legal__title,
.t4-legal-page .site-legal__heading {
  font-family: var(--t4-display);
  color: var(--t4-forest-deep);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 0.4rem;
}

.t4-legal-page .site-legal__block {
  margin-bottom: 1.35rem;
}

.t4-legal-page .site-legal a,
.t4-legal-page__links a,
.t4-sms-body a {
  color: var(--t4-forest-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.t4-legal-page__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  font-size: 0.9rem;
  color: var(--t4-muted);
}