/* Tasks4Access site CSS — implements 01_Design_System.pdf component rules. */

/* ---------- Reset / base ---------- */
.t4a-site-header, .t4a-site-header *, .t4a-site-footer, .t4a-site-footer *,
.t4a-modal, .t4a-modal *,
[class^="t4a-"], [class^="t4a-"] * { box-sizing: border-box; }

body {
  background: var(--t4a-bg);
  color: var(--t4a-text);
  font-family: var(--t4a-font);
}

/* Locks page scroll behind an open modal (html.t4a-modal-open, toggled in site.js). */
html.t4a-modal-open,
html.t4a-modal-open body {
  overflow: hidden;
  height: 100%;
}

.t4a-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--t4a-navy);
  color: #fff;
  padding: 12px 20px;
  z-index: 10000;
  border-radius: 0 0 8px 0;
}
.t4a-skip-link:focus {
  left: 0;
}

[class^="t4a-"] :focus-visible,
[class^="t4a-"].t4a-button:focus-visible,
a.t4a-button:focus-visible,
button:focus-visible {
  outline: 2px solid var(--t4a-purple);
  outline-offset: 2px;
}

.t4a-container {
  max-width: var(--t4a-container);
  margin: 0 auto;
  padding: 0 32px;
}
@media (max-width: 1023px) { .t4a-container { padding: 0 24px; } }
@media (max-width: 639px)  { .t4a-container { padding: 0 20px; } }

.t4a-badge {
  display: inline-block;
  background: var(--t4a-lilac);
  color: var(--t4a-purple);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
}

/* ---------- Headings ---------- */
/* Page H1 (Design System p.5: 54-64px desktop, 40-44px mobile, 700-800, line-height 1.05) */
[class^="t4a-"] h1 { color: var(--t4a-navy); font-weight: 800; line-height: 1.05; font-size: clamp(40px, 5vw, 64px); margin: 20px 0 16px; overflow-wrap: break-word; }
/* Hero H1 (Design System p.5: 64-72px desktop, 42-48px mobile, 700-800, line-height 1.02-1.08) */
.t4a-hero h1 { font-size: clamp(42px, 6.5vw, 72px); line-height: 1.05; }
[class^="t4a-"] h2.t4a-section-title { color: var(--t4a-navy); font-weight: 700; line-height: 1.1; font-size: clamp(30px, 4vw, 42px); margin: 0 0 12px; text-align: center; }
[class^="t4a-"] h3 { color: var(--t4a-navy); font-weight: 700; font-size: clamp(21px, 2.4vw, 26px); line-height: 1.2; }
[class^="t4a-"] p { color: var(--t4a-text); line-height: 1.6; font-size: 17px; }
[class^="t4a-"] h1, [class^="t4a-"] h2, [class^="t4a-"] h3, [class^="t4a-"] p { overflow-wrap: break-word; }
/* Small text role (Design System p.5: 13-14px, 400-500, line-height 1.50) */
.t4a-badge, .t4a-footer-copy, .t4a-form-error, .t4a-form-note, .t4a-hero-trust,
.t4a-pricing-desc, .t4a-billing-toggle button, .t4a-auth-links { line-height: 1.5; }
.t4a-eyebrow { display: block; color: var(--t4a-purple); font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 14px; }
.t4a-emph { background: var(--t4a-gradient-primary); -webkit-background-clip: text; background-clip: text; color: transparent; }
.t4a-section-sub { text-align: center; color: var(--t4a-muted); font-size: 18px; max-width: 640px; margin: 0 auto 48px; }

/* ---------- Site header ---------- */
.t4a-site-header {
  background: rgba(251,251,254,.94);
  border-bottom: 1px solid var(--t4a-border);
  position: sticky;
  top: 0;
  z-index: 500;
  backdrop-filter: saturate(180%) blur(6px);
}
.t4a-site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  gap: 24px;
}
.t4a-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.t4a-logo-img { height: 28px; width: auto; display: block; }

.t4a-primary-nav { display: flex; gap: 32px; }
.t4a-primary-nav a {
  color: var(--t4a-text);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.t4a-primary-nav a:hover,
.t4a-primary-nav a.t4a-active { color: var(--t4a-purple); }
.t4a-primary-nav a.t4a-active { border-bottom-color: var(--t4a-purple); }

.t4a-header-actions { display: flex; align-items: center; gap: 14px; }

.t4a-nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--t4a-border);
  border-radius: 12px;
  background: var(--t4a-surface);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
}
.t4a-nav-toggle span { display: block; width: 20px; height: 2px; background: var(--t4a-navy); border-radius: 2px; }

.t4a-mobile-nav { display: none; }
.t4a-mobile-nav nav { display: flex; flex-direction: column; padding: 12px 20px 28px; gap: 4px; }
.t4a-mobile-nav a {
  color: var(--t4a-navy);
  text-decoration: none;
  font-weight: 600;
  font-size: 17px;
  padding: 12px 4px;
  min-height: 44px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--t4a-border);
}
.t4a-mobile-nav a.t4a-button { border: none; margin-top: 12px; justify-content: center; }

/* Six-item primary nav (added App Tour alongside How It Works) needs a tighter
   gap in the narrower part of the desktop range so it never wraps/collides
   with the logo or the waitlist button before the 1023px hamburger breakpoint. */
@media (min-width: 1024px) and (max-width: 1180px) {
  .t4a-primary-nav { gap: 18px; }
  .t4a-primary-nav a { font-size: 14px; }
}
@media (max-width: 1023px) {
  .t4a-primary-nav { display: none; }
  .t4a-nav-toggle { display: flex; }
  .t4a-header-actions .t4a-button-sm { display: none; }
  .t4a-mobile-nav.t4a-open { display: block; border-top: 1px solid var(--t4a-border); background: var(--t4a-surface); }
}

/* ---------- Buttons ---------- */
.t4a-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 26px;
  border-radius: var(--t4a-radius-button);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: transform .18s ease, filter .18s ease, background .18s ease;
  min-width: 44px;
}
.t4a-button-primary {
  background: var(--t4a-gradient-primary);
  color: #fff;
  box-shadow: 0 10px 24px rgba(91,66,243,.28);
}
.t4a-button-primary:hover { filter: brightness(1.06); transform: translateY(-1px); }
.t4a-button-primary:active { transform: translateY(0); }
.t4a-button-ghost {
  background: var(--t4a-surface);
  color: var(--t4a-navy);
  border: 1px solid var(--t4a-border);
}
.t4a-button-ghost:hover { border-color: var(--t4a-purple); color: var(--t4a-purple); transform: translateY(-1px); }
.t4a-button-sm { min-height: 42px; padding: 0 18px; font-size: 14px; }
.t4a-button-lg { min-height: 56px; padding: 0 32px; font-size: 17px; }
.t4a-button[disabled] { opacity: .45; box-shadow: none; cursor: not-allowed; }
.t4a-button-full { width: 100%; }

.t4a-text-link {
  color: var(--t4a-purple);
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.t4a-text-link:hover { text-decoration: underline; }
.t4a-text-link::after { content: '\2192'; }

/* ---------- Hero ---------- */
.t4a-hero { padding: 64px 0 96px; background:
    radial-gradient(circle at 75% 25%, rgba(119, 86, 255, .15), transparent 34%),
    radial-gradient(circle at 95% 20%, rgba(176, 147, 255, .12), transparent 26%),
    var(--t4a-bg);
}
.t4a-hero-inner { display: grid; grid-template-columns: 6fr 6fr; gap: 48px; align-items: center; }
.t4a-hero-inner > * { min-width: 0; }
.t4a-hero-copy .t4a-hero-sub { font-size: 20px; line-height: 1.55; color: var(--t4a-muted); max-width: 480px; margin: 0 0 28px; }
.t4a-hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.t4a-hero-trust { color: var(--t4a-muted); font-size: 14px; }
.t4a-hero-visual { position: relative; display: flex; justify-content: center; }

.t4a-phone {
  width: 260px;
  aspect-ratio: 9 / 19;
  display: flex;
  flex-direction: column;
  border-radius: 36px;
  background: var(--t4a-navy);
  padding: 10px;
  box-shadow: var(--t4a-shadow-card), 0 30px 60px rgba(38,29,83,.14);
  position: relative;
}
.t4a-phone-secondary { position: absolute; left: -70px; bottom: -24px; width: 220px; opacity: .92; transform: scale(.92); z-index: 1; }
.t4a-phone-primary { position: relative; z-index: 2; }
.t4a-phone-notch { flex-shrink: 0; width: 60px; height: 6px; background: rgba(255,255,255,.25); border-radius: 4px; margin: 6px auto 8px; }
.t4a-phone-screen { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--t4a-surface); border-radius: 26px; padding: 18px 16px 12px; }

.t4a-app-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.t4a-app-title { display: block; font-size: 17px; font-weight: 700; color: var(--t4a-navy); }
.t4a-app-account { color: var(--t4a-muted); flex-shrink: 0; }
.t4a-app-add-task { display: block; background: var(--t4a-purple); color: #fff; font-size: 13px; font-weight: 700; text-align: center; border-radius: 12px; padding: 11px; margin-bottom: 14px; }
.t4a-app-stats { display: flex; gap: 8px; margin-bottom: 14px; }
.t4a-app-stat { flex: 1; background: var(--t4a-lilac); border-radius: 12px; padding: 10px 6px; text-align: center; }
.t4a-app-stat-num { display: block; font-size: 18px; font-weight: 800; color: var(--t4a-navy); }
.t4a-app-stat-label { display: block; font-size: 10px; color: var(--t4a-muted); font-weight: 600; }
.t4a-app-section-label { font-size: 12px; color: var(--t4a-muted); font-weight: 700; letter-spacing: .02em; margin-bottom: 8px; }
.t4a-approval-card, .t4a-pending-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--t4a-surface); border: 1px solid var(--t4a-border); border-radius: 14px; padding: 12px 14px; margin-bottom: 8px; }
.t4a-approval-name { font-size: 13px; font-weight: 700; color: var(--t4a-navy); display: block; }
.t4a-approval-meta { display: block; font-size: 11px; color: var(--t4a-muted); font-weight: 500; margin-top: 2px; }
.t4a-approval-chevron { font-size: 20px; line-height: 1; color: var(--t4a-muted); flex-shrink: 0; }
.t4a-phone-tabbar { display: flex; justify-content: space-between; flex-shrink: 0; border-top: 1px solid var(--t4a-border); margin-top: auto; padding-top: 10px; }
.t4a-tab { font-size: 10px; color: var(--t4a-muted); position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1; }
.t4a-tab-active { color: var(--t4a-purple); font-weight: 700; }
.t4a-tab-icon-wrap { display: flex; align-items: center; justify-content: center; width: 34px; height: 22px; border-radius: 11px; }
.t4a-tab-active .t4a-tab-icon-wrap { background: var(--t4a-lilac); }
.t4a-tab-icon { color: inherit; }
.t4a-tab-badge { position: absolute; top: -2px; right: 6px; background: var(--t4a-danger); color: #fff; font-size: 9px; padding: 1px 5px; border-radius: 999px; }

/* ---------- Three-value strip ---------- */
.t4a-value-strip {
  background: var(--t4a-surface);
  border: 1px solid var(--t4a-border);
  border-radius: var(--t4a-radius-card);
  box-shadow: var(--t4a-shadow-card);
  padding: 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin: -48px auto 0;
  max-width: var(--t4a-container);
}
.t4a-value-item { text-align: center; }

/* ---------- Icon badges & cards ---------- */
.t4a-icon-badge {
  width: 52px; height: 52px;
  border-radius: 16px;
  background: var(--t4a-lilac);
  color: var(--t4a-purple);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
}
.t4a-card {
  background: var(--t4a-surface);
  border: 1px solid var(--t4a-border);
  border-radius: var(--t4a-radius-card);
  box-shadow: var(--t4a-shadow-card);
  padding: 32px;
}

/* ---------- Sections ---------- */
.t4a-section { padding: 104px 0; }
.t4a-section-alt { background: var(--t4a-lilac); }
@media (max-width: 1023px) { .t4a-section { padding: 80px 0; } }
@media (max-width: 639px)  { .t4a-section { padding: 64px 0; } }

/* A page-hero's own bottom padding plus the following section's full
   104px top padding compounded into an oversized empty gap on every
   inner page (Pricing, Features, How It Works, For Families, FAQ) —
   most visible where the hero has no button directly under its
   sub-copy to fill the space. Trimmed only for the section immediately
   after the hero; every other inter-section gap keeps the full rhythm. */
.t4a-page-hero + .t4a-section { padding-top: 56px; }
@media (max-width: 1023px) { .t4a-page-hero + .t4a-section { padding-top: 44px; } }
@media (max-width: 639px)  { .t4a-page-hero + .t4a-section { padding-top: 36px; } }

/* Same over-compounding problem, one level down: two full-padded
   sections back to back (e.g. a light "Related reading" section
   sandwiched between a denser FAQ/alt section and a CTA banner) stack
   104px + 104px into a ~200px empty gap around content that's often
   just a heading and one line. Halves the top padding for any section
   that directly follows another section; a page's first section (after
   the hero, or at the very top) is unaffected since there's no
   preceding .t4a-section to match against. */
.t4a-section + .t4a-section { padding-top: 56px; }
@media (max-width: 1023px) { .t4a-section + .t4a-section { padding-top: 44px; } }
@media (max-width: 639px)  { .t4a-section + .t4a-section { padding-top: 36px; } }

/* The rule above only trims the LEADING edge of a section-to-section
   boundary (the second section's top padding) — the first section's
   own full-size bottom padding is still untouched, so a short section
   like "Related reading" still had 104px of empty space trailing it
   before the next section's already-reduced 56px top padding even
   started (104 + 56 = 160px around one line of links). Trims the
   TRAILING edge symmetrically: any section immediately followed by
   another section also gets its own bottom padding halved, so the
   shared boundary is ~112px total instead of ~160px. */
.t4a-section:has(+ .t4a-section) { padding-bottom: 56px; }
@media (max-width: 1023px) { .t4a-section:has(+ .t4a-section) { padding-bottom: 44px; } }
@media (max-width: 639px)  { .t4a-section:has(+ .t4a-section) { padding-bottom: 36px; } }

/* A third contributor to the same hero gap: .t4a-section-sub's own
   48px bottom margin is meant to separate a heading+subtitle from
   content further down the SAME section (where it's still needed) —
   but as the last element inside .t4a-page-hero, that margin just adds
   to the hero's own bottom padding for no reason, since the hero
   already provides the gap before whatever section comes next. */
.t4a-page-hero .t4a-section-sub { margin-bottom: 0; }

/* How-it-works cards */
.t4a-how-grid, .t4a-steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.t4a-how-card, .t4a-step-card {
  background: var(--t4a-surface);
  border: 1px solid var(--t4a-border);
  border-radius: var(--t4a-radius-card);
  box-shadow: var(--t4a-shadow-card);
  padding: 28px;
  text-align: left;
}
.t4a-step-number { color: var(--t4a-purple); font-weight: 800; font-size: 14px; margin-bottom: 8px; display: block; }

/* Feature spotlight bands */
.t4a-feature-band { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; margin-bottom: 96px; }
.t4a-feature-band:last-child { margin-bottom: 0; }
.t4a-feature-band.t4a-reverse .t4a-feature-visual { order: -1; }
.t4a-feature-visual {
  background: var(--t4a-lilac);
  border-radius: var(--t4a-radius-card);
  min-height: 280px;
  display: flex; align-items: center; justify-content: center;
  color: var(--t4a-purple);
}

/* Feature grid (cards) */
.t4a-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

/* ---------- Feature flow (homepage "Everything you need, nothing you don't.") ----------
   Three connected step-tiles reading as a sequence (Restrict -> Approve -> Unlock), not a
   flat block: equal-height white cards on the section's lilac background, a numbered step
   chip per card, and arrow connectors reading left-to-right so the sequence is unmistakable
   without needing an uneven vertical offset (a staggered version read as accidental rather
   than intentional once the three cards had different natural heights). "One family
   dashboard" is a full-width white card below, matching the three cards' surface/border/
   shadow treatment exactly and linked to them with a short connector, so it reads as an
   anchored supporting summary rather than a disconnected outline box. Collapses to a plain
   vertical stack with rotated connectors on mobile/tablet. */
.t4a-flow {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-top: 56px;
}
.t4a-flow-card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--t4a-surface);
  border: 1px solid var(--t4a-border);
  border-radius: var(--t4a-radius-card);
  box-shadow: var(--t4a-shadow-card);
  padding: 32px 28px;
  text-align: left;
}
.t4a-flow-step {
  display: inline-block;
  align-self: flex-start;
  background: var(--t4a-lilac);
  color: var(--t4a-purple);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.t4a-flow-card .t4a-icon-badge { margin: 0 0 16px; }
.t4a-flow-card h3 { margin-bottom: 8px; }
.t4a-flow-card p { color: var(--t4a-muted); font-size: 15px; margin: 0; }
.t4a-flow-connector {
  flex: 0 0 auto;
  width: 56px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 88px; /* centers on the icon row, now identical for all three equal-height cards */
  color: var(--t4a-purple);
  opacity: .5;
}
.t4a-flow-connector svg { width: 26px; height: 26px; }

.t4a-flow-coda-connector {
  display: flex;
  justify-content: center;
  padding: 14px 0;
  color: var(--t4a-purple);
  opacity: .5;
}
.t4a-flow-coda-connector svg { width: 22px; height: 22px; }

.t4a-flow-coda {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
  background: var(--t4a-surface);
  border: 1px solid var(--t4a-border);
  border-radius: var(--t4a-radius-card);
  box-shadow: var(--t4a-shadow-card);
  padding: 30px 36px;
  text-align: left;
}
.t4a-flow-coda .t4a-icon-badge {
  flex: 0 0 auto;
  margin: 0;
}
.t4a-flow-coda-text h3 { margin-bottom: 4px; }
.t4a-flow-coda-text p { color: var(--t4a-muted); font-size: 15px; margin: 0; }

@media (max-width: 1023px) {
  .t4a-flow { flex-direction: column; gap: 16px; }
  .t4a-flow-connector { width: auto; padding: 0; align-self: center; transform: rotate(90deg); opacity: .45; }
  .t4a-flow-connector svg { width: 22px; height: 22px; }
  .t4a-flow-coda-connector { padding: 4px 0 10px; }
  .t4a-flow-coda { flex-direction: column; text-align: center; gap: 14px; padding: 28px 24px; }
}
@media (max-width: 639px) {
  .t4a-flow-card { padding: 24px 20px; }
  .t4a-flow-coda { padding: 24px 20px; }
}

/* Outcome panel */
.t4a-outcome { text-align: center; max-width: 720px; margin: 0 auto; }

/* ---------- FAQ accordion ---------- */
.t4a-faq-list { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.t4a-faq-item {
  background: var(--t4a-surface);
  border: 1px solid var(--t4a-border);
  border-radius: 16px;
  overflow: hidden;
}
.t4a-faq-question {
  width: 100%;
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 24px;
  background: none;
  border: none;
  text-align: left;
  font-family: var(--t4a-font);
  font-weight: 700;
  font-size: 16px;
  color: var(--t4a-navy);
  cursor: pointer;
}
.t4a-faq-chevron { flex-shrink: 0; transition: transform .2s ease; }
.t4a-faq-item[data-open="true"] .t4a-faq-chevron { transform: rotate(180deg); }
.t4a-faq-answer { padding: 0 24px 0; max-height: 0; overflow: hidden; transition: max-height .25s ease, padding .25s ease; }
.t4a-faq-item[data-open="true"] .t4a-faq-answer { padding: 0 24px 22px; max-height: 400px; }
.t4a-faq-answer p { color: var(--t4a-muted); font-size: 15px; }
.t4a-faq-category { font-weight: 800; color: var(--t4a-navy); font-size: 20px; margin: 40px 0 16px; }
.t4a-faq-category:first-child { margin-top: 0; }

/* ---------- CTA banner ---------- */
.t4a-cta-banner {
  background: var(--t4a-gradient-primary);
  border-radius: 26px;
  padding: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.t4a-cta-banner h2 { color: #fff; font-size: clamp(28px, 3.4vw, 38px); margin: 0; max-width: 560px; }
.t4a-cta-banner .t4a-button-primary { background: #fff; color: var(--t4a-purple); box-shadow: none; }
.t4a-cta-banner .t4a-button-primary:hover { filter: none; background: #F4F0FF; }

/* ---------- Forms ---------- */
.t4a-form-field { margin-bottom: 20px; }
.t4a-form-field label { display: block; font-weight: 700; font-size: 14px; color: var(--t4a-navy); margin-bottom: 8px; }
.t4a-form-field input,
.t4a-form-field select,
.t4a-form-field textarea {
  width: 100%;
  min-height: 50px;
  border: 1px solid var(--t4a-border);
  border-radius: var(--t4a-radius-input);
  background: var(--t4a-surface);
  padding: 12px 16px;
  font-family: var(--t4a-font);
  font-size: 16px;
  color: var(--t4a-text);
}
.t4a-form-field textarea { min-height: 140px; resize: vertical; }
.t4a-form-field input:focus,
.t4a-form-field select:focus,
.t4a-form-field textarea:focus { border-color: var(--t4a-purple); outline: none; box-shadow: 0 0 0 3px rgba(91,66,243,.12); }
.t4a-form-error { color: var(--t4a-danger); font-size: 13px; margin-top: 6px; }
.t4a-form-note { color: var(--t4a-muted); font-size: 13px; margin-top: 10px; }

/* ---------- Contact page: form card + full WPForms restyle ---------- */
.t4a-contact-card {
  max-width: 720px;
  margin: 0 auto;
  background: var(--t4a-surface);
  border: 1px solid var(--t4a-border);
  border-radius: var(--t4a-radius-card);
  box-shadow: var(--t4a-shadow-card);
  padding: 40px;
}
@media (max-width: 639px) {
  .t4a-contact-card { padding: 24px 20px; }
}

.wpforms-container { max-width: 100%; margin: 0; }
.wpforms-container .wpforms-form { display: block; }

/* Field spacing/rhythm */
.wpforms-container .wpforms-field { padding: 0 !important; margin-bottom: 22px !important; }
.wpforms-container .wpforms-field:last-of-type { margin-bottom: 0 !important; }

/* Labels */
.wpforms-container .wpforms-field label.wpforms-field-label,
.wpforms-container .wpforms-field label.wpforms-field-label-inline {
  font-family: var(--t4a-font) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  color: var(--t4a-navy) !important;
  margin-bottom: 8px !important;
  display: block;
}
.wpforms-container .wpforms-required-label { color: var(--t4a-purple) !important; }
.wpforms-container .wpforms-field-sublabel {
  font-family: var(--t4a-font) !important;
  color: var(--t4a-muted) !important;
  font-size: 12px !important;
}

/* Text / email / textarea inputs — same visual language as the waitlist form's inputs */
.wpforms-container input[type=text],
.wpforms-container input[type=email],
.wpforms-container input[type=tel],
.wpforms-container select,
.wpforms-container textarea {
  width: 100% !important;
  border: 1px solid var(--t4a-border) !important;
  border-radius: var(--t4a-radius-input) !important;
  min-height: 50px !important;
  padding: 12px 16px !important;
  font-family: var(--t4a-font) !important;
  font-size: 16px !important;
  color: var(--t4a-text) !important;
  background: var(--t4a-surface) !important;
  box-shadow: none !important;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.wpforms-container textarea { min-height: 150px !important; resize: vertical; }
.wpforms-container input[type=text]:focus,
.wpforms-container input[type=email]:focus,
.wpforms-container input[type=tel]:focus,
.wpforms-container select:focus,
.wpforms-container textarea:focus {
  border-color: var(--t4a-purple) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(91,66,243,.12) !important;
}

/* Validation states */
.wpforms-container .wpforms-field.wpforms-has-error input[type=text],
.wpforms-container .wpforms-field.wpforms-has-error input[type=email],
.wpforms-container .wpforms-field.wpforms-has-error textarea,
.wpforms-container .wpforms-error-container ~ input,
.wpforms-container input.wpforms-error,
.wpforms-container textarea.wpforms-error {
  border-color: var(--t4a-danger) !important;
  box-shadow: 0 0 0 3px rgba(226,85,99,.1) !important;
}
.wpforms-container label.wpforms-error {
  color: var(--t4a-danger) !important;
  font-family: var(--t4a-font) !important;
  font-size: 13px !important;
  margin-top: 6px !important;
  display: block;
}

/* Category field, styled as selectable tiles (this IS the "contact category" UI — a real,
   required, keyboard-navigable radio group, not a decorative row of divs beside the form). */
.wpforms-container .wpforms-field.t4a-category-field .wpforms-field-label {
  font-size: 16px !important;
  margin-bottom: 14px !important;
}
div.wpforms-container-full .wpforms-field.t4a-category-field ul.wpforms-list-inline,
div.wpforms-container-full .wpforms-field.t4a-category-field ul {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
div.wpforms-container-full .wpforms-field.t4a-category-field ul > li {
  margin: 0 !important;
  padding: 0 !important;
}
.wpforms-container .t4a-category-field input[type=radio] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
div.wpforms-container-full .wpforms-field.t4a-category-field label {
  display: flex !important;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 60px;
  padding: 14px 12px !important;
  border: 1px solid var(--t4a-border) !important;
  border-radius: 14px !important;
  background: var(--t4a-surface) !important;
  color: var(--t4a-navy) !important;
  font-family: var(--t4a-font) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
  margin: 0 !important;
}
div.wpforms-container-full .wpforms-field.t4a-category-field label:hover {
  border-color: var(--t4a-purple) !important;
  background: var(--t4a-lilac) !important;
}
div.wpforms-container-full .wpforms-field.t4a-category-field input[type=radio]:checked + label,
div.wpforms-container-full .wpforms-field.t4a-category-field input[type=radio]:checked ~ label {
  border-color: var(--t4a-purple) !important;
  background: var(--t4a-lilac) !important;
  color: var(--t4a-purple) !important;
  box-shadow: 0 0 0 1px var(--t4a-purple) inset;
}
div.wpforms-container-full .wpforms-field.t4a-category-field input[type=radio]:focus-visible + label {
  outline: 2px solid var(--t4a-purple);
  outline-offset: 2px;
}
@media (max-width: 639px) {
  div.wpforms-container-full .wpforms-field.t4a-category-field ul.wpforms-list-inline,
  div.wpforms-container-full .wpforms-field.t4a-category-field ul { grid-template-columns: 1fr !important; }
}

/* Submit button — full-width, same primary-button language as the rest of the site */
.wpforms-container .wpforms-submit-container { margin-top: 8px !important; }
.wpforms-container button[type=submit].wpforms-submit {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  background: var(--t4a-gradient-primary) !important;
  border: none !important;
  border-radius: var(--t4a-radius-button) !important;
  color: #fff !important;
  font-family: var(--t4a-font) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  min-height: 52px !important;
  padding: 0 26px !important;
  cursor: pointer;
  transition: filter .18s ease, transform .18s ease;
}
.wpforms-container button[type=submit].wpforms-submit:hover { filter: brightness(1.06); transform: translateY(-1px); }
.wpforms-container button[type=submit].wpforms-submit:focus-visible { outline: 2px solid var(--t4a-purple); outline-offset: 2px; }

/* Confirmation / success message */
.wpforms-container .wpforms-confirmation-container-full {
  background: var(--t4a-lilac) !important;
  border: 1px solid var(--t4a-border) !important;
  border-radius: 14px !important;
  padding: 24px !important;
  color: var(--t4a-navy) !important;
  font-family: var(--t4a-font) !important;
  text-align: center;
}

/* ---------- Brevo waitlist form (shared by the modal and /waitlist/) ---------- */
/* Brevo's own runtime (enqueued in functions.php) toggles visibility by adding/removing
   the class "sib-form-message-panel--active" and by setting inline display on .entry__error
   — these defaults make sure nothing is visible until that JS actually says it should be. */
.sib-form-message-panel,
.entry__error {
  display: none;
}
.sib-form-message-panel.sib-form-message-panel--active {
  display: block;
}
.input--hidden {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.t4a-sib-form { text-align: left; }
.t4a-sib-container {
  max-width: 100%;
  text-align: left;
  background: transparent;
  margin: 0;
}
.t4a-sib-message {
  border-radius: 12px;
  border: 1px solid transparent;
  padding: 14px 16px;
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 1.5;
}
.t4a-sib-message-error {
  color: #7A1F1F;
  background: #FDEDED;
  border-color: #F5C2C2;
}
.t4a-sib-message-success {
  color: #0B4B2C;
  background: #E7FAF0;
  border-color: #B8EDD1;
}
.t4a-sib-form .sib-form-block { margin-bottom: 20px; }
.t4a-sib-form .sib-form-block:first-child p {
  font-size: 22px;
  font-weight: 700;
  color: var(--t4a-navy);
  margin: 0;
  padding-right: 40px; /* reserves space so the title never runs under .t4a-modal-close */
}
.t4a-sib-form .sib-text-form-block p {
  font-size: 15px;
  color: var(--t4a-muted);
  margin: 0;
}
.t4a-sib-form .entry__label {
  display: block;
  font-weight: 700;
  font-size: 14px;
  color: var(--t4a-navy);
  margin-bottom: 8px;
}
.t4a-sib-form .entry__field { margin: 0; }
.t4a-sib-form input[type="text"].input,
.t4a-sib-form input[type="email"].input {
  width: 100%;
  min-height: 50px;
  border: 1px solid var(--t4a-border);
  border-radius: var(--t4a-radius-input);
  background: var(--t4a-surface);
  padding: 12px 16px;
  font-family: var(--t4a-font);
  font-size: 16px;
  color: var(--t4a-text);
}
.t4a-sib-form input.input:focus {
  border-color: var(--t4a-purple);
  outline: none;
  box-shadow: 0 0 0 3px rgba(91,66,243,.12);
}
.t4a-sib-form .form__entry.entry_errored input.input {
  border-color: var(--t4a-danger);
  box-shadow: 0 0 0 3px rgba(226,85,99,.12);
}
.t4a-sib-form .entry__error {
  color: var(--t4a-danger);
  font-size: 13px;
  margin-top: 6px;
}
.t4a-sib-form .entry__specification {
  color: var(--t4a-muted);
  font-size: 13px;
  margin-top: 6px;
  display: block;
}
.t4a-sib-form .sib-optin .form__label-row { margin-bottom: 0; }
.t4a-sib-form .entry__choice { display: flex; }
.t4a-optin-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}
.t4a-optin-label input[type="checkbox"] {
  width: 20px;
  height: 20px;
  min-width: 20px;
  margin-top: 2px;
  accent-color: var(--t4a-purple);
}
.t4a-optin-text { font-size: 14px; color: var(--t4a-text); line-height: 1.5; }
.t4a-sib-form .sib-optin.form__entry.entry_errored .t4a-optin-label,
.t4a-sib-form .sib-optin .form__entry.entry_errored .t4a-optin-label {
  outline: 2px solid var(--t4a-danger);
  outline-offset: 4px;
  border-radius: 6px;
}
.t4a-sib-submit-block { margin-bottom: 0 !important; }
.t4a-sib-form .sib-form-block__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 50px;
  padding: 0 26px;
  border: none;
  border-radius: var(--t4a-radius-button);
  background: var(--t4a-gradient-primary);
  color: #fff;
  font-family: var(--t4a-font);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: transform .18s ease, filter .18s ease, opacity .18s ease;
}
.t4a-sib-form .sib-form-block__button:hover { filter: brightness(1.06); transform: translateY(-1px); }
.t4a-sib-form .sib-form-block__button:focus-visible { outline: 2px solid var(--t4a-purple); outline-offset: 2px; }
.t4a-sib-form .sib-form-block__button[disabled] { opacity: .6; cursor: not-allowed; transform: none; }
.t4a-sib-form .sib-form-block__button svg {
  width: 16px;
  height: 16px;
  fill: #fff;
  display: none;
  animation: t4aSpin .8s linear infinite;
}
.t4a-sib-form .sib-form-block__button svg:not(.sib-hide-loader-icon) { display: inline-block; }
@keyframes t4aSpin { to { transform: rotate(360deg); } }

/* ---------- Modal ---------- */
.t4a-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.t4a-modal[hidden] { display: none; }
.t4a-modal-overlay { position: absolute; inset: 0; background: rgba(16,22,47,.5); }
.t4a-modal-dialog {
  position: relative;
  background: var(--t4a-surface);
  border-radius: var(--t4a-radius-card);
  padding: 32px;
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 30px 80px rgba(16,22,47,.28);
}
.t4a-modal-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--t4a-border);
  background: var(--t4a-surface);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: var(--t4a-muted);
}

/* ---------- Pricing ---------- */
.t4a-pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.t4a-pricing-card { display: flex; flex-direction: column; }
.t4a-pricing-card.t4a-popular { border-color: var(--t4a-purple); box-shadow: 0 0 0 2px var(--t4a-purple), var(--t4a-shadow-card); }
.t4a-pricing-tier { font-weight: 800; font-size: 20px; color: var(--t4a-navy); }
.t4a-pricing-desc { color: var(--t4a-muted); font-size: 14px; margin: 6px 0 20px; }
.t4a-pricing-price { font-size: 34px; font-weight: 800; color: var(--t4a-navy); margin-bottom: 4px; }
.t4a-pricing-list { list-style: none; padding: 0; margin: 20px 0 28px; display: flex; flex-direction: column; gap: 10px; }
.t4a-pricing-list li { color: var(--t4a-text); font-size: 15px; padding-left: 26px; position: relative; }
.t4a-pricing-list li::before { content: '\2713'; position: absolute; left: 0; color: var(--t4a-success); font-weight: 700; }

.t4a-billing-toggle { display: flex; justify-content: center; gap: 4px; background: var(--t4a-lilac); border-radius: 999px; padding: 4px; width: fit-content; margin: 0 auto 48px; }
.t4a-billing-toggle button { border: none; background: none; padding: 10px 22px; border-radius: 999px; font-weight: 700; font-size: 14px; color: var(--t4a-muted); cursor: pointer; font-family: var(--t4a-font); }
.t4a-billing-toggle button[aria-pressed="true"] { background: var(--t4a-surface); color: var(--t4a-purple); box-shadow: var(--t4a-shadow-card); }
.t4a-billing-toggle { max-width: 100%; }
.t4a-billing-toggle button { white-space: normal; }
@media (max-width: 420px) {
  .t4a-billing-toggle { width: 100%; }
  .t4a-billing-toggle button { flex: 1; padding: 10px 8px; }
}

/* ---------- Everyday examples / problems solved grids ---------- */
.t4a-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.t4a-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.t4a-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

/* ---------- Page shell (content / privacy-terms / login) ---------- */
.t4a-page-hero { padding: 72px 0 24px; text-align: center; }
.t4a-page-hero .t4a-eyebrow { text-align: center; }
.t4a-content-shell { max-width: 800px; margin: 0 auto; padding: 24px 0 96px; }
.t4a-content-shell h2 { margin-top: 40px; }
.t4a-content-shell p, .t4a-content-shell li { color: var(--t4a-muted); }

/* ---------- Login shell ---------- */
.t4a-auth-shell { max-width: 420px; margin: 0 auto; padding: 96px 0; text-align: center; }
.t4a-auth-card { background: var(--t4a-surface); border: 1px solid var(--t4a-border); border-radius: var(--t4a-radius-card); box-shadow: var(--t4a-shadow-card); padding: 40px; text-align: left; }
.t4a-auth-links { display: flex; justify-content: space-between; font-size: 14px; margin-top: 8px; }

/* ---------- Site footer ---------- */
.t4a-site-footer { background: var(--t4a-lilac); padding: 64px 0 28px; margin-top: 40px; }
.t4a-site-footer-inner { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 40px; }
.t4a-footer-tagline { color: var(--t4a-muted); font-size: 15px; margin: 14px 0 0; max-width: 240px; }
.t4a-footer-col h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--t4a-navy); margin: 0 0 14px; }
.t4a-footer-col a { display: block; color: var(--t4a-muted); text-decoration: none; font-size: 15px; padding: 6px 0; }
.t4a-footer-col a:hover { color: var(--t4a-purple); }
.t4a-footer-copy { color: var(--t4a-muted); font-size: 13px; border-top: 1px solid var(--t4a-border); padding-top: 24px; }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .t4a-reveal { animation: t4aFadeUp .35s ease both; }
}
@keyframes t4aFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  [class^="t4a-"] * { animation: none !important; transition: none !important; }
}

/* ---------- Partner dashboard (/partner/report) ---------- */
.t4a-status-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; padding: 6px 14px; border-radius: 999px; }
.t4a-status-pill::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.t4a-status-pill-active { background: #E7FAF0; color: #0B4B2C; }
.t4a-status-pill-inactive { background: #FDEDED; color: #7A1F1F; }

.t4a-share-card { border: 2px solid var(--t4a-purple); }
.t4a-share-field { margin-bottom: 18px; }
.t4a-share-field:last-child { margin-bottom: 0; }
.t4a-share-field-label { display: block; font-weight: 700; font-size: 13px; color: var(--t4a-navy); margin-bottom: 8px; }
.t4a-share-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--t4a-lilac);
  border-radius: var(--t4a-radius-input);
  padding: 12px 16px;
}
.t4a-share-value {
  flex: 1 1 220px;
  min-width: 0;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 15px;
  font-weight: 600;
  color: var(--t4a-navy);
  overflow-wrap: anywhere;
}
.t4a-share-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.t4a-share-status { min-height: 20px; margin: 10px 0 0; font-size: 13px; font-weight: 600; color: var(--t4a-success); }
.t4a-share-status[data-state="error"] { color: var(--t4a-danger); }

.t4a-stat-card { text-align: center; padding: 24px 20px; }
.t4a-stat-value { display: block; font-size: 32px; font-weight: 800; color: var(--t4a-navy); line-height: 1.1; margin-bottom: 6px; }
.t4a-stat-label { display: block; font-size: 14px; color: var(--t4a-muted); font-weight: 600; }

.t4a-earning-card { text-align: center; padding: 24px 20px; }
.t4a-earning-value { display: block; font-size: 26px; font-weight: 800; color: var(--t4a-navy); margin-bottom: 6px; }
.t4a-earning-label { display: block; font-size: 14px; color: var(--t4a-muted); font-weight: 600; }
.t4a-earning-card-highlight { background: var(--t4a-lilac); border-color: var(--t4a-purple); }

.t4a-table-wrap { overflow-x: auto; }
.t4a-table { width: 100%; border-collapse: collapse; }
.t4a-table th, .t4a-table td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--t4a-border); font-size: 15px; }
.t4a-table th { color: var(--t4a-muted); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.t4a-table td { color: var(--t4a-text); }
.t4a-table tr:last-child td { border-bottom: none; }

.t4a-empty-state { text-align: center; padding: 40px 20px; color: var(--t4a-muted); }
.t4a-empty-state p { margin: 0; }

.t4a-dashboard-secondary { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; margin-top: 8px; }
.t4a-dashboard-secondary form { display: inline; }
.t4a-dashboard-secondary button.t4a-text-link-button {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--t4a-purple);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.t4a-dashboard-secondary button.t4a-text-link-button:hover { text-decoration: underline; }

@media (max-width: 639px) {
  .t4a-share-row { flex-direction: column; align-items: stretch; }
  .t4a-share-actions { width: 100%; }
  .t4a-share-actions .t4a-button { flex: 1; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
  .t4a-hero-inner { grid-template-columns: 1fr; }
  .t4a-hero-visual { order: 2; margin-top: 32px; }
  .t4a-value-strip { grid-template-columns: 1fr; margin-top: 32px; }
  .t4a-how-grid, .t4a-steps-grid { grid-template-columns: repeat(2, 1fr); }
  .t4a-feature-band, .t4a-feature-band.t4a-reverse { grid-template-columns: 1fr; }
  .t4a-feature-band.t4a-reverse .t4a-feature-visual { order: 0; }
  .t4a-feature-grid, .t4a-grid-3, .t4a-grid-4, .t4a-grid-2 { grid-template-columns: repeat(2, 1fr); }
  .t4a-pricing-grid { grid-template-columns: 1fr; }
  .t4a-site-footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 639px) {
  .t4a-how-grid, .t4a-steps-grid,
  .t4a-feature-grid, .t4a-grid-3, .t4a-grid-4, .t4a-grid-2 { grid-template-columns: 1fr; }
  .t4a-site-footer-inner { grid-template-columns: 1fr; }
  .t4a-cta-banner { flex-direction: column; text-align: center; padding: 40px 28px; }
  .t4a-cta-banner .t4a-button { width: 100%; }
  .t4a-hero-actions .t4a-button { width: 100%; }
  .t4a-card, .t4a-how-card, .t4a-step-card { padding: 20px; }
  .t4a-value-strip { padding: 24px; }
  .t4a-modal-dialog { padding: 24px; }
}

/* ---------- App walkthrough (real product screenshots, /app-walkthrough/) ---------- */
.t4a-walk-step { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; margin-bottom: 88px; }
.t4a-walk-step:last-child { margin-bottom: 0; }
.t4a-walk-step.t4a-reverse .t4a-walk-visual { order: -1; }
.t4a-walk-visual { display: flex; align-items: center; justify-content: center; }
.t4a-walk-shots { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
.t4a-walk-phone {
  width: 100%;
  max-width: 260px;
  flex: 1 1 200px;
  background: var(--t4a-navy);
  border-radius: 34px;
  padding: 10px;
  box-shadow: var(--t4a-shadow-card), 0 24px 48px rgba(15,23,42,.16);
}
/* Fixed real-device aspect ratio so every step's phone frame renders the same
   outer shape regardless of how tall that particular screen's content is;
   object-fit: contain (never fill) letterboxes shorter screens on a neutral
   background that matches the app's own screen colour instead of stretching. */
.t4a-walk-phone-screen {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 17.6;
  border-radius: 25px;
  overflow: hidden;
  background: #F8F9FD;
}
.t4a-walk-phone-screen img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* Product fix: the generic 9/17.6 frame ratio above doesn't match either
   real screenshot set (Android captures are 945x2048, ratio ~.461;
   iPhone captures are 750x1334, ratio ~.562) -- object-fit: contain
   inside a mismatched frame pillarboxed every image, visibly cutting
   the purple header banner short of the frame's own edges. Every
   Android screenshot in this walkthrough shares one exact ratio, and
   every iPhone one shares another, so each can get its own precise
   frame ratio instead of a generic compromise -- full-bleed, no bars,
   on every single image, not just a closer approximation. */
.t4a-walk-phone-screen--android { aspect-ratio: 945 / 2048; }
.t4a-walk-phone-screen--iphone { aspect-ratio: 750 / 1334; }
.t4a-walk-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.t4a-walk-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--t4a-lilac); color: var(--t4a-purple);
  font-weight: 800; font-size: 15px; flex-shrink: 0;
}
.t4a-walk-role {
  display: inline-flex; align-items: center; padding: 4px 12px;
  border-radius: 999px; font-size: 12px; font-weight: 700;
  letter-spacing: .02em; text-transform: uppercase;
}
.t4a-walk-role-parent { background: var(--t4a-lilac-2); color: var(--t4a-purple-2); }
.t4a-walk-role-child  { background: #E6F7EF; color: var(--t4a-success); }
.t4a-walk-copy h3 { margin-bottom: 10px; }
.t4a-walk-copy p { color: var(--t4a-muted); font-size: 17px; line-height: 1.6; }

@media (max-width: 1023px) {
  .t4a-walk-step, .t4a-walk-step.t4a-reverse { grid-template-columns: 1fr; gap: 28px; margin-bottom: 56px; }
  .t4a-walk-step.t4a-reverse .t4a-walk-visual { order: 0; }
}
@media (max-width: 639px) {
  .t4a-walk-phone { max-width: 220px; }
  .t4a-walk-shots { gap: 14px; }
}

/* User-requested reference styling, September 2026. Existing logo assets are unchanged. */
:root{--t4a-purple:#5b3ff4;--t4a-purple-2:#4930d8;--t4a-navy:#0c103a;--t4a-text:#161c3c;--t4a-muted:#3c4260;--t4a-lilac:#eeebff;--t4a-lilac-2:#ded8ff;--t4a-border:#ece9fc;--t4a-radius-card:16px;--t4a-radius-button:9px;--t4a-gradient-primary:linear-gradient(120deg,#6347ef,#5c39f5);--t4a-shadow-card:0 5px 24px #4f36ad08}
.t4a-site-header-inner{height:64px;gap:20px}.t4a-primary-nav{gap:24px}.t4a-primary-nav a{font-size:13px;font-weight:500}.t4a-button{font-weight:600;box-shadow:none}.t4a-button-primary{box-shadow:0 5px 14px #6242ee16}.t4a-button-ghost{border-color:var(--t4a-purple);color:var(--t4a-navy)}
.t4a-home-refresh{background:#fff;overflow:clip}.t4a-home-refresh .t4a-container{max-width:1200px;padding-inline:40px}.t4a-home-refresh .t4a-eyebrow{display:inline-block;padding:4px 11px;border-radius:99px;background:#eeeaff;font-size:11px;font-weight:500;letter-spacing:0;line-height:1.3;margin-bottom:12px}.t4a-home-refresh .t4a-hero{padding:24px 0 0;background:radial-gradient(ellipse at 80% 60%,#e6e0ff 0,transparent 65%),linear-gradient(115deg,#faf9ff,#f4f1ff);border-bottom:1px solid #efebff}.t4a-home-refresh .t4a-hero-inner{grid-template-columns:1.08fr 1fr;gap:10px;min-height:515px}.t4a-home-refresh .t4a-hero-copy{padding-block:35px;z-index:2}.t4a-home-refresh .t4a-hero-copy>.t4a-eyebrow{border:1px solid #cbc2ff;background:#ffffff88}.t4a-home-refresh .t4a-hero h1{font-size:clamp(30px,3.6vw,44px);line-height:1.12;letter-spacing:-1.3px;margin:5px 0 20px;font-weight:750}.t4a-home-refresh .t4a-hero-copy .t4a-hero-sub{font-size:17px;line-height:1.5;max-width:420px;margin-bottom:25px}.t4a-home-refresh .t4a-hero-actions{gap:16px}.t4a-home-refresh .t4a-button-lg{font-size:14px;min-height:48px;padding:0 22px}.t4a-home-refresh .t4a-hero-trust{display:flex;gap:20px;flex-wrap:wrap;font-size:12px;margin-top:27px;line-height:1.4}.t4a-hero-trust span:before{content:'✓';color:var(--t4a-purple);margin-right:7px;font-weight:700}
.t4a-home-refresh .t4a-hero-visual{height:510px;display:block}.t4a-home-refresh .t4a-phone-primary{position:absolute;left:5%;top:10px;width:235px;height:480px;min-height:0;transform:rotate(3deg);border-radius:38px;padding:12px 8px 8px;background:#11131b;box-shadow:3px 5px 0 #a6a5ae,8px 15px 22px #15133824;z-index:2;border:2px solid #43454d}.t4a-home-refresh .t4a-phone-screen{height:100%;min-height:0;border-radius:27px;padding:22px 12px 8px;background:linear-gradient(#faf9ff,#fff)}.t4a-home-refresh .t4a-phone-notch{width:46px;height:4px;top:7px}.t4a-home-refresh .t4a-app-title{font-size:16px}.t4a-home-refresh .t4a-app-stat-num{font-size:16px}.t4a-home-refresh .t4a-app-stats{gap:5px}.t4a-home-refresh .t4a-app-stat{padding:9px 2px}.t4a-home-refresh .t4a-tab{font-size:8px}.t4a-refresh-phone-back{position:absolute;width:215px;height:428px;left:43%;top:65px;background:#16181e;border:3px solid #555861;border-radius:33px;padding:10px 6px;transform:rotate(2deg);box-shadow:6px 12px 22px #14162b22;overflow:hidden}.t4a-refresh-phone-back img{width:100%;height:100%;object-fit:cover;border-radius:24px;display:block}.t4a-float{position:absolute;display:flex;align-items:center;gap:13px;border:1px solid #fff;background:#ffffffef;border-radius:17px;padding:15px 18px;box-shadow:0 8px 30px #6046d514;font-size:12px;line-height:1.4;z-index:3}.t4a-float strong{font-weight:600}.t4a-float-icon{font-size:25px;color:var(--t4a-purple)}.t4a-float-approved{right:-8px;top:18px}.t4a-float-approved .t4a-float-icon{border-radius:50%;background:#22b96a;color:white;width:30px;height:30px;display:grid;place-items:center;font-size:20px}.t4a-float-review{right:-20px;top:164px}.t4a-hand-note{position:absolute;right:-10px;bottom:45px;font-family:'Segoe Print','Comic Sans MS',cursive;font-style:italic;font-size:17px;line-height:1.6;transform:rotate(-10deg);z-index:3}.t4a-hand-note>span{display:block;color:var(--t4a-purple);font-size:48px;line-height:1;margin-left:22px}
.t4a-home-refresh .t4a-value-strip{background:none;border:0;box-shadow:none;padding:20px 0 0;margin:0;gap:20px}.t4a-home-refresh .t4a-value-item{background:white;border:1px solid var(--t4a-border);border-radius:15px;padding:20px 22px;box-shadow:var(--t4a-shadow-card)}.t4a-home-refresh .t4a-icon-badge{width:62px;height:62px;border-radius:50%;margin-bottom:12px}.t4a-home-refresh .t4a-value-item h3{font-size:19px;letter-spacing:-.5px;margin:10px 0 7px}.t4a-home-refresh .t4a-value-item p{font-size:14px;line-height:1.45;margin:0}.t4a-home-refresh .t4a-section{padding:44px 0}.t4a-home-refresh h2.t4a-section-title{font-size:29px;letter-spacing:-.9px}.t4a-home-refresh .t4a-section-sub{font-size:15px;line-height:1.5;margin-bottom:22px}.t4a-section-label{text-align:center}.t4a-home-refresh .t4a-how-grid{gap:32px}.t4a-home-refresh .t4a-how-card{position:relative;border:0;box-shadow:none;background:none;padding:0 5px;text-align:center}.t4a-home-refresh .t4a-step-number{border:1px solid #d7d0ff;border-radius:50%;width:35px;height:35px;line-height:35px;background:#f2efff;margin:0 auto -5px;font-size:12px}.t4a-home-refresh .t4a-how-card h3{font-size:17px;letter-spacing:-.4px;margin:8px 0}.t4a-home-refresh .t4a-how-card p{font-size:14px;line-height:1.45;margin:0}.t4a-home-refresh .t4a-how-card:not(:last-child):after{content:'→';position:absolute;right:-25px;top:45px;font-size:25px;color:var(--t4a-purple)}
.t4a-refresh-spotlight{background:linear-gradient(110deg,#f6f3ff,#f0edff);overflow:hidden}.t4a-refresh-split{display:grid;grid-template-columns:1.1fr 1fr;gap:50px;align-items:center}.t4a-refresh-split>div:first-child{padding:36px 0}.t4a-home-refresh .t4a-refresh-split h2,.t4a-home-refresh .t4a-refresh-price-copy h2{font-size:32px;letter-spacing:-1px;line-height:1.13;margin:0 0 12px}.t4a-home-refresh .t4a-refresh-split p{font-size:15px;line-height:1.5;margin:0 0 15px}.t4a-refresh-checks{list-style:none;padding:0;margin:12px 0 20px}.t4a-refresh-checks li{font-size:13px;line-height:1.65;margin:4px 0;padding-left:22px;position:relative}.t4a-refresh-checks li:before{content:'✓';position:absolute;left:0;color:var(--t4a-purple);font-weight:700}.t4a-refresh-app-visual{height:390px;position:relative;align-self:end}.t4a-refresh-app-visual:before{content:'';position:absolute;border-radius:50%;width:390px;height:390px;background:#ded7ff;left:-20px;top:45px}.t4a-refresh-app-phone{position:absolute;background:#fff;width:235px;height:430px;border:8px solid #17191f;border-radius:34px;padding:24px 14px;transform:rotate(5deg);left:55px;top:16px;box-shadow:4px 6px 0 #afb0b8,9px 10px 20px #25264522}.t4a-home-refresh .t4a-refresh-app-phone h3{font-size:19px;margin:0 0 7px}.t4a-home-refresh .t4a-refresh-app-phone p{font-size:10px;line-height:1.4}.t4a-refresh-speaker{position:absolute;top:7px;left:88px;width:40px;height:4px;border-radius:4px;background:#a5a3af}.t4a-demo-app{display:flex;gap:9px;align-items:center;border-bottom:1px solid #eeedf4;padding:12px 0;font-size:12px}.t4a-demo-symbol{width:22px;height:22px;display:grid;place-items:center;background:#ebe7ff;border-radius:6px;color:#593ce4;font-size:17px}.t4a-demo-app i{width:29px;height:16px;border-radius:20px;background:#dfdfe8;margin-left:auto;position:relative}.t4a-demo-app i:after{content:'';width:12px;height:12px;position:absolute;left:2px;top:2px;border-radius:50%;background:white}.t4a-demo-app i.on{background:#6040f6}.t4a-demo-app i.on:after{left:15px}.t4a-refresh-app-phone small{font-size:9px;color:#68687d}.t4a-refresh-app-visual .t4a-hand-note{right:0;top:45px;bottom:auto}.t4a-float-lock{right:0;bottom:65px}.t4a-refresh-pricing{padding:28px 0;background:radial-gradient(ellipse at bottom left,#efeaff,transparent 65%)}.t4a-refresh-price-grid{display:grid;grid-template-columns:1.45fr 1fr 1fr;gap:18px;align-items:center}.t4a-home-refresh .t4a-refresh-price-copy p{font-size:16px;line-height:1.5}.t4a-refresh-price-card{border:1px solid #e3dcff;box-shadow:0 3px 14px #7154e90a;border-radius:13px;padding:20px;background:#ffffffd9}.t4a-home-refresh .t4a-refresh-price-card h3{font-size:17px;margin:0}.t4a-home-refresh p.t4a-refresh-small{font-size:12px;line-height:1.5;margin:3px 0 12px}.t4a-home-refresh p.t4a-refresh-price{font-size:27px;font-weight:700;margin:6px 0;line-height:1.2}.t4a-refresh-price span{font-size:11px;font-weight:400;color:var(--t4a-muted)}.t4a-refresh-price-card .t4a-refresh-checks{margin:12px 0}.t4a-refresh-price-card .t4a-refresh-checks li{font-size:12px;margin:0}.t4a-refresh-price-card .t4a-button{width:100%;font-size:12px;min-height:38px;padding:8px}.t4a-refresh-price-card .t4a-eyebrow{font-size:9px}.t4a-home-refresh .t4a-flow-card h3{font-size:21px}
@media(max-width:1100px){.t4a-primary-nav{gap:15px}.t4a-home-refresh .t4a-container{padding-inline:30px}.t4a-home-refresh .t4a-hero-inner{min-height:490px}.t4a-home-refresh .t4a-hero-visual{transform:scale(.88);transform-origin:left center;width:112%;margin-left:-5px}.t4a-home-refresh .t4a-hero-trust{gap:10px;font-size:11px}.t4a-refresh-split{gap:15px}.t4a-refresh-app-visual .t4a-hand-note{font-size:14px}.t4a-home-refresh .t4a-refresh-price-copy h2{font-size:28px}}
@media(max-width:800px){.t4a-home-refresh .t4a-hero-inner{grid-template-columns:1fr;gap:0}.t4a-home-refresh .t4a-hero-copy{text-align:center;padding:28px 0 10px}.t4a-home-refresh .t4a-hero h1{font-size:clamp(30px,5.4vw,44px)}.t4a-home-refresh .t4a-hero-copy .t4a-hero-sub{margin-inline:auto}.t4a-home-refresh .t4a-hero-actions,.t4a-home-refresh .t4a-hero-trust{justify-content:center}.t4a-home-refresh .t4a-hero-visual{width:450px;max-width:100%;margin:auto;transform:none}.t4a-home-refresh .t4a-value-strip{gap:10px}.t4a-home-refresh .t4a-value-item{padding:18px 10px}.t4a-home-refresh .t4a-value-item h3{font-size:16px}.t4a-home-refresh .t4a-how-grid{grid-template-columns:repeat(2,1fr);gap:28px}.t4a-home-refresh .t4a-how-card:after{display:none}.t4a-refresh-split{grid-template-columns:1fr}.t4a-refresh-app-visual{width:440px;max-width:100%;margin:auto}.t4a-refresh-price-grid{grid-template-columns:1fr 1fr}.t4a-refresh-price-copy{grid-column:1/-1;text-align:center}.t4a-refresh-price-grid{align-items:stretch}}
@media(max-width:480px){.t4a-home-refresh .t4a-container{padding-inline:20px}.t4a-home-refresh .t4a-hero-visual{height:430px;transform:scale(.8);transform-origin:top left;width:420px;max-width:none;margin-left:calc((100% - 336px)/2);margin-bottom:-24px}.t4a-home-refresh .t4a-hero h1{letter-spacing:-.9px}.t4a-home-refresh .t4a-hero-copy .t4a-hero-sub{font-size:16px}.t4a-home-refresh .t4a-hero-actions{gap:10px}.t4a-home-refresh .t4a-button-lg{font-size:12px;padding:0 14px}.t4a-home-refresh .t4a-value-strip{grid-template-columns:1fr}.t4a-home-refresh .t4a-value-item{padding:20px}.t4a-home-refresh .t4a-value-item h3{font-size:19px}.t4a-home-refresh h2.t4a-section-title{font-size:26px}.t4a-home-refresh .t4a-section{padding:32px 0}.t4a-home-refresh .t4a-how-grid{gap:26px 15px}.t4a-home-refresh .t4a-how-card h3{font-size:16px}.t4a-home-refresh .t4a-how-card p{font-size:13px}.t4a-home-refresh .t4a-refresh-split h2{font-size:28px}.t4a-refresh-app-phone{left:15px}.t4a-float-lock{right:-5px;padding:12px}.t4a-refresh-app-visual .t4a-hand-note{right:0;font-size:13px}.t4a-refresh-price-grid{grid-template-columns:1fr}.t4a-refresh-price-card{padding:24px}.t4a-refresh-price-card .t4a-button{min-height:44px}.t4a-refresh-price-card .t4a-refresh-checks li{font-size:14px}.t4a-hand-note{right:0}.t4a-site-header-inner{height:64px}}

.t4a-refresh-split > *{min-width:0}.t4a-refresh-split{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}@media(max-width:800px){.t4a-refresh-split{grid-template-columns:minmax(0,1fr)}}
/* Actual app captures: preserve screenshot proportions inside decorative frames. */
.t4a-home-refresh .t4a-real-screen{padding:10px 6px 6px;overflow:hidden;background:#14161d}
.t4a-real-screen img{display:block;width:100%;height:100%;object-fit:contain;background:#f8f9ff;border-radius:25px}
.t4a-refresh-app-visual{height:460px}
.t4a-refresh-app-phone.t4a-real-screen{height:430px;padding:4px;border-radius:34px}
.t4a-refresh-app-visual .t4a-hand-note{right:-5px;top:15px}
@media(max-width:480px){.t4a-refresh-app-visual .t4a-hand-note{display:none}}
/* Hero fidelity: expose the original dashboard and navigation without cropping. */
.t4a-home-refresh .t4a-hero-visual .t4a-phone-primary{left:0;top:20px;width:235px;height:auto;aspect-ratio:945 / 1900;transform:rotate(-3deg);padding:6px}
.t4a-home-refresh .t4a-hero-visual .t4a-real-screen img{height:auto;object-fit:contain;border-radius:28px}
.t4a-home-refresh .t4a-refresh-phone-back{left:46%;top:62px;width:215px;height:auto;padding:6px;aspect-ratio:auto;transform:rotate(3deg)}
.t4a-home-refresh .t4a-refresh-phone-back img{height:auto;object-fit:contain}
.t4a-home-refresh .t4a-hero-visual .t4a-hand-note{display:none}
.t4a-home-refresh .t4a-float-approved{top:0;right:-5px;padding:10px 13px}
.t4a-home-refresh .t4a-float-review{top:auto;bottom:0;right:0;padding:9px 13px}
.t4a-home-refresh .t4a-hero-visual .t4a-phone-primary{aspect-ratio:auto;min-height:0}

/* Homepage process spacing, requested 12 September 2026. */
.t4a-home-refresh #how-it-works { padding: 60px 0 52px; }
.t4a-home-refresh #how-it-works .t4a-section-sub { margin-bottom: 36px; }
.t4a-home-refresh .t4a-how-card .t4a-step-number { margin: 0 auto 14px; }
.t4a-home-refresh .t4a-how-card .t4a-icon-badge { margin: 0 auto 20px; }
.t4a-home-refresh .t4a-how-card h3 { margin: 0 0 12px; }
.t4a-home-refresh .t4a-how-card:not(:last-child):after { top: 67px; }
@media (max-width: 800px) {
  .t4a-home-refresh #how-it-works { padding: 40px 0; }
  .t4a-home-refresh .t4a-how-grid { row-gap: 36px; }
}

/* Two actual approval screens supplied for the homepage. */
.t4a-refresh-app-visual .t4a-approval-back{left:170px;top:48px;transform:rotate(7deg);z-index:1}
.t4a-refresh-app-visual .t4a-approval-front{left:25px;top:10px;transform:rotate(-4deg);z-index:2}
@media(max-width:480px){.t4a-refresh-app-visual .t4a-approval-back{left:125px}.t4a-refresh-app-visual .t4a-approval-front{left:5px}}

/* Keep the supplied portrait captures at their natural ratio inside the frames. */
.t4a-home-refresh .t4a-refresh-app-visual{height:490px}
.t4a-home-refresh .t4a-refresh-app-phone.t4a-real-screen{height:436px}
.t4a-home-refresh .t4a-refresh-app-visual .t4a-approval-back{top:30px}
.t4a-home-refresh .t4a-refresh-app-visual .t4a-hand-note{top:8px;right:0;bottom:auto;max-width:150px;padding:8px 12px;background:#fff;border:1px solid #e3dcff;border-radius:12px;box-shadow:0 6px 20px #3a2d781c;color:#25213a;font-size:16px;line-height:1.35;transform:rotate(-4deg);z-index:5}
.t4a-home-refresh .t4a-refresh-app-visual .t4a-hand-note>span{display:none}
@media(max-width:480px){.t4a-home-refresh .t4a-refresh-app-visual .t4a-hand-note{display:block;top:0;right:0;max-width:125px;font-size:13px}}

/* ==========================================================================
   Interactive "How It Works" journey (/app-walkthrough/).
   Base markup is a plain, accessible stacked list of real-screenshot stage
   cards -- identical in spirit to the original .t4a-walk-step gallery, and
   exactly what renders with JS/CSS disabled or on mobile. Desktop adds a
   sticky two-device panel (progressively) and hides each stage's own inline
   screenshot, since the sticky panel shows it instead. All colour/spacing
   comes from the site's existing custom properties -- this file never
   hardcodes a brand colour, so it always matches whichever :root block
   currently wins the cascade.
   ========================================================================== */

.t4a-hiw-intro { max-width: 640px; margin: 0 auto 40px; text-align: center; }

/* Step nav -- direct-jump tabs. Lives inside .t4a-hiw-sticky (below) so it
   stays reachable the whole time a visitor is scrolling through the stage
   list, on both desktop and mobile -- product fix: it used to sit above
   the sticky panel as an ordinary block, scrolling out of view with the
   rest of the page the moment the visitor moved past stage 1, which meant
   jumping to the next stage required scrolling back up to find it again. */
.t4a-hiw-nav {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 10px 2px 10px;
  scrollbar-width: none;
}
.t4a-hiw-nav::-webkit-scrollbar { display: none; }
.t4a-hiw-nav-btn {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--t4a-surface);
  border: 1px solid var(--t4a-border);
  border-radius: 999px;
  padding: 8px 16px 8px 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--t4a-muted);
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.t4a-hiw-nav-btn-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--t4a-lilac); color: var(--t4a-purple);
  font-size: 12px; font-weight: 800; flex-shrink: 0;
}
.t4a-hiw-nav-btn[aria-selected="true"] {
  border-color: var(--t4a-purple);
  color: var(--t4a-navy);
  background: var(--t4a-lilac);
}
.t4a-hiw-nav-btn[aria-selected="true"] .t4a-hiw-nav-btn-num { background: var(--t4a-purple); color: #fff; }

/* Track: two-column on desktop (sticky visual | scrolling stage list),
   single column (plain stack) on mobile/no-JS. */
.t4a-hiw-track { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.t4a-hiw-stagelist { display: flex; flex-direction: column; gap: 18px; }

.t4a-hiw-sticky {
  position: sticky;
  top: 76px; /* clears the 64px site header + a small gutter */
  z-index: 40;
  background: var(--t4a-bg);
  padding-bottom: 14px;
}
/* Product fix: right above the 1023px breakpoint where .t4a-hiw-devices
   drops to the mobile single-phone layout, the sticky column is only
   ~450px wide (a 50/50 grid split of a ~960px content area) -- two
   220px-wide phones plus the connector never actually fit there, and
   the connector's absolutely-positioned chip ended up overlapping a
   phone. Sized down so the two-phone row comfortably fits with room to
   spare at the narrowest width this ever renders at (just above
   1023px), not just at a wide desktop viewport. */
.t4a-hiw-devices { display: flex; align-items: center; justify-content: center; gap: 14px; padding-top: 6px; }
.t4a-hiw-device {
  flex: 1 1 0;
  max-width: 180px;
  transition: opacity .25s ease, transform .25s ease;
}
.t4a-hiw-device .t4a-walk-phone { margin: 0 auto; }
.t4a-hiw-device.is-dimmed { opacity: .38; transform: scale(.94); }
.t4a-hiw-device.is-active { opacity: 1; transform: scale(1); }
.t4a-hiw-device-label {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-bottom: 10px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--t4a-muted);
}
.t4a-hiw-device.is-active .t4a-hiw-device-label { color: var(--t4a-purple-2); }

/* The image actually shown inside the sticky panel's two frames -- JS
   swaps [src]/[alt] per active stage and toggles this class for a brief
   crossfade (a no-op snap under prefers-reduced-motion, per the site-wide
   reduced-motion rule near the top of this file). */
.t4a-hiw-shot { opacity: 1; transition: opacity .2s ease; }
.t4a-hiw-shot.is-swapping { opacity: 0; }
.t4a-hiw-empty {
  display: flex; align-items: center; justify-content: center;
  height: 100%; padding: 24px; text-align: center;
  font-size: 13px; font-weight: 600; color: var(--t4a-muted);
}
.t4a-hiw-empty[hidden] { display: none; }

/* Connector zone between the two phones -- where a small status chip
   animates to show information travelling from one device to the other. */
.t4a-hiw-connector { position: relative; width: 28px; align-self: center; height: 90px; flex: 0 0 auto; }
.t4a-hiw-connector-line {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 2px;
  background: var(--t4a-border); transform: translateX(-50%);
}
/* Product fix: fixed at a single-line, unconstrained white-space, this
   chip overlapped (and looked "cut off" behind) the phone frame on
   either side once the two-phone row was narrowed to fit the ~1024px-
   1150px range -- there simply isn't 56-90px of clear horizontal room
   between the phones at that width for a nowrap chip. A max-width plus
   ordinary text wrapping means the chip grows taller instead of wider
   when space is tight, so it can never spill into a phone regardless of
   label length or viewport width. */
.t4a-hiw-chip {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(.85);
  display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 6px;
  max-width: 54px;
  background: var(--t4a-surface); border: 1px solid var(--t4a-border);
  border-radius: 14px; padding: 6px 8px;
  font-size: 10.5px; line-height: 1.25; font-weight: 700; color: var(--t4a-navy);
  text-align: center;
  box-shadow: var(--t4a-shadow-card);
  white-space: normal;
  overflow-wrap: break-word;
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.t4a-hiw-chip.is-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.t4a-hiw-chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--t4a-purple); flex-shrink: 0; }
.t4a-hiw-chip-success .t4a-hiw-chip-dot { background: var(--t4a-success); }

/* Small badge-count tick on the parent phone's frame, echoing the real
   Approvals-tab red count badge (.t4a-tab-badge) rather than inventing a
   new visual language for the same fact. */
.t4a-hiw-badge-tick {
  position: absolute; top: -6px; right: -6px;
  background: var(--t4a-danger); color: #fff;
  font-size: 11px; font-weight: 800; line-height: 1;
  min-width: 18px; height: 18px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
  opacity: 0; transform: scale(.5);
  transition: opacity .2s ease, transform .2s ease;
}
.t4a-hiw-badge-tick.is-visible { opacity: 1; transform: scale(1); }

/* Lock state indicator overlaid on the child device -- swaps icon/colour
   between "locked" (amber) and "unlocked" (green) as the active stage
   changes, giving the single biggest "aha" moment its own small, explicit
   visual instead of relying on the screenshot text alone. */
.t4a-hiw-lock-flag {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px; padding: 5px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 700;
  background: #FDF3D8; color: #8A6200;
  transition: background .25s ease, color .25s ease;
}
.t4a-hiw-lock-flag.is-unlocked { background: #E6F7EF; color: #0B4B2C; }
.t4a-hiw-lock-flag[hidden] { display: none; }

.t4a-hiw-stage {
  background: var(--t4a-surface);
  border: 1px solid var(--t4a-border);
  border-radius: var(--t4a-radius-card);
  padding: 32px 28px;
  scroll-margin-top: 110px;
  opacity: .55;
  transition: opacity .2s ease, border-color .2s ease;
  /* Desktop only: real scroll-dwell room per stage, so the sticky panel
     beside it has a deliberate scroll distance to update within rather
     than every stage flicking past in an instant. Product fix (round 2):
     56vh, then 42vh, both still taller than a typical stage's actual
     content (role pill + heading + one paragraph is usually well under
     300px even with generous padding) -- anchoring to the top only moved
     the dead space from split top/bottom to all-bottom, it didn't remove
     it. A fixed, content-scaled height closes that gap for ordinary
     stages; the two stages with real extra content (the inset callout,
     the toggle+aside) already exceed this naturally and are unaffected,
     since min-height only ever raises a floor, never caps growth. */
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.t4a-hiw-stage[data-active="true"] { opacity: 1; border-color: var(--t4a-lilac-2); box-shadow: var(--t4a-shadow-card); }
.t4a-hiw-stage-visual { display: none; } /* shown on mobile only, see breakpoint below */
.t4a-hiw-stage h3 { margin-bottom: 8px; }
.t4a-hiw-stage p { color: var(--t4a-muted); font-size: 16px; line-height: 1.6; margin: 0; }

/* Small real-screenshot detail callout (e.g. stage 2's lock screen) --
   supplementary to a stage's main device image, not a third phone frame. */
.t4a-hiw-inset {
  display: flex; align-items: center; gap: 12px;
  margin-top: 16px; padding: 10px; border-radius: 14px;
  background: var(--t4a-lilac);
}
.t4a-hiw-inset img {
  width: 54px; height: auto; border-radius: 8px; flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(15,23,42,.18);
}
.t4a-hiw-inset span { font-size: 13px; font-weight: 600; color: var(--t4a-navy); }

/* Stage 5's optional "needs more work" branch -- an in-stage disclosure,
   not a forced extra scroll stage. */
.t4a-hiw-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 16px; background: none; border: none; padding: 0;
  color: var(--t4a-purple); font-weight: 700; font-size: 14px; cursor: pointer;
}
.t4a-hiw-toggle-arrow { transition: transform .2s ease; }
.t4a-hiw-stage[data-branch-open="true"] .t4a-hiw-toggle-arrow { transform: rotate(90deg); }
.t4a-hiw-aside {
  margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--t4a-border);
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height .25s ease, opacity .2s ease;
}
/* Generous, not exact: max-height transitions can't animate to "auto", so
   this only needs to comfortably clear the real content's tallest case
   (two full phone-frame screenshots stacked on narrow mobile, ~1150px) --
   it does not need to match it precisely. */
.t4a-hiw-stage[data-branch-open="true"] .t4a-hiw-aside { max-height: 1600px; opacity: 1; }
.t4a-hiw-aside p { font-size: 14px; }

/* Compact "getting started" pair (protection/dashboard screenshots) --
   deliberately reuses .t4a-walk-step as-is: secondary, not the opening
   beat of the main story. */
.t4a-hiw-setup-label { text-align: center; margin: 0 0 8px; }
.t4a-hiw-setup-sub { margin-bottom: 40px; }

@media (max-width: 1023px) {
  .t4a-hiw-track { grid-template-columns: 1fr; gap: 32px; }
  /* The device mirror panel only makes sense paired with the sticky
     two-column layout -- on mobile each stage already carries its own
     single relevant screenshot inline (.t4a-hiw-stage-visual below), so
     the panel is dropped. The nav strip above it stays: still sticky,
     still the fastest way to jump between stages without scrolling back
     up, and it's cheap (one pill row) to keep pinned at this width. */
  .t4a-hiw-devices { display: none; }
  .t4a-hiw-sticky { padding-bottom: 6px; }
  .t4a-hiw-stage { opacity: 1; min-height: 0; display: block; }
  .t4a-hiw-stage[data-active="true"] { box-shadow: none; }
  .t4a-hiw-stage-visual { display: block; margin-bottom: 18px; }
  /* Product fix: the shared .t4a-walk-phone bezel (10px padding, 34px
     radius) is sized for its original ~260px desktop frame -- shrunk to
     a 240px mobile frame with no other change, that same bezel reads as
     a thick, toy-like border rather than a slim real-device edge. Scaled
     the chrome down to match, not just the frame itself. */
  .t4a-hiw-stage-visual .t4a-walk-phone {
    max-width: 210px;
    margin: 0 auto;
    padding: 6px;
    border-radius: 22px;
  }
  .t4a-hiw-stage-visual .t4a-walk-phone-screen { border-radius: 16px; }
}
@media (max-width: 639px) {
  .t4a-hiw-nav-btn-label { display: none; } /* numbered dot only once labels don't fit */
  .t4a-hiw-stage { padding: 20px; }
}