/* =============================================================================
   HelloMula Landing Page & Legal Page Styles
   Scoped under body.hellomula-landing and body.hellomula-policy to prevent
   Avada theme conflicts. Color palette from mainapp/css/style.css :root.
   ============================================================================= */

/* --- Custom Properties ---------------------------------------------------- */
body.hellomula-landing {
  --ti-navy:       #000080;
  --ti-deep-blue:  #004080;
  --ti-bright-blue:#0095c5;
  --ti-sky-blue:   #6194BC;
  --ti-red:        #E4001B;
  --ti-red-hover:  #c0001a;
  --ti-bg:         #f2f7fc;
  --ti-white:      #ffffff;
  --ti-ink:        #1a1a2e;
  --ti-muted:      #64748b;
  --ti-border:     #e2e8f0;
  --ti-shadow-sm:  0 1px 4px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);
  --ti-shadow-md:  0 4px 16px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
  --ti-shadow-lg:  0 12px 40px rgba(0,0,0,.10), 0 4px 12px rgba(0,0,0,.06);
  --ti-radius-sm:  8px;
  --ti-radius-md:  12px;
  --ti-radius-lg:  20px;
  --ti-font:       -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                   'Helvetica Neue', Arial, sans-serif;
}

/* --- Reset & Base ---------------------------------------------------------- */
body.hellomula-landing {
  margin: 0;
  padding: 0;
  font-family: var(--ti-font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ti-ink);
  background: var(--ti-white);
  /* Override any Avada padding/margin on body */
  padding-top: 0 !important;
}

body.hellomula-landing *,
body.hellomula-landing *::before,
body.hellomula-landing *::after { box-sizing: border-box; }

body.hellomula-landing h1,
body.hellomula-landing h2,
body.hellomula-landing h3,
body.hellomula-landing h4 {
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 .875rem;
  color: var(--ti-ink);
}

body.hellomula-landing p { margin: 0 0 1rem; }

body.hellomula-landing a { color: var(--ti-bright-blue); text-decoration: none; }

body.hellomula-landing img { max-width: 100%; height: auto; display: block; }

body.hellomula-landing ul { list-style: none; margin: 0; padding: 0; }

/* --- Layout --------------------------------------------------------------- */
body.hellomula-landing .ti-container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* --- Section Header ------------------------------------------------------- */
body.hellomula-landing .ti-section-header {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 4rem;
}

body.hellomula-landing .ti-section-header h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.375rem);
  margin-bottom: .75rem;
}

body.hellomula-landing .ti-section-header p {
  font-size: 1.0625rem;
  color: var(--ti-muted);
  margin: 0;
  line-height: 1.65;
}

/* --- Buttons -------------------------------------------------------------- */
body.hellomula-landing .ti-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .625rem 1.375rem;
  border-radius: var(--ti-radius-sm);
  font-size: .9375rem;
  font-family: var(--ti-font);
  font-weight: 600;
  text-decoration: none !important;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background .18s ease, border-color .18s ease,
              box-shadow .18s ease, transform .18s ease, color .18s ease;
  white-space: nowrap;
  line-height: 1;
}

body.hellomula-landing .ti-btn--primary {
  background: var(--ti-red);
  color: var(--ti-white) !important;
  border-color: var(--ti-red);
}
body.hellomula-landing .ti-btn--primary:hover {
  background: var(--ti-red-hover);
  border-color: var(--ti-red-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(228,0,27,.35);
}

body.hellomula-landing .ti-btn--ghost {
  background: transparent;
  color: var(--ti-white) !important;
  border-color: rgba(255,255,255,.45);
}
body.hellomula-landing .ti-btn--ghost:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.75);
}

body.hellomula-landing .ti-btn--outline-light {
  background: transparent;
  color: var(--ti-white) !important;
  border-color: rgba(255,255,255,.55);
}
body.hellomula-landing .ti-btn--outline-light:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.9);
}

body.hellomula-landing .ti-btn--outline-navy {
  background: transparent;
  color: var(--ti-navy) !important;
  border-color: var(--ti-navy);
}
body.hellomula-landing .ti-btn--outline-navy:hover {
  background: var(--ti-navy);
  color: var(--ti-white) !important;
}

body.hellomula-landing .ti-btn--white {
  background: var(--ti-white);
  color: var(--ti-navy) !important;
  border-color: var(--ti-white);
}
body.hellomula-landing .ti-btn--white:hover {
  background: #eef3fb;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
}

body.hellomula-landing .ti-btn--lg {
  padding: .875rem 2rem;
  font-size: 1rem;
  border-radius: var(--ti-radius-sm);
}

body.hellomula-landing .ti-btn--full {
  width: 100%;
  display: flex;
}

/* --- Badge ---------------------------------------------------------------- */
body.hellomula-landing .ti-badge {
  display: inline-block;
  background: rgba(0,149,197,.14);
  color: #0095c5;
  border: 1px solid rgba(0,149,197,.3);
  padding: .25rem .875rem;
  border-radius: 100px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}

/* =============================================================================
   NAVIGATION
   ============================================================================= */
body.hellomula-landing #ti-nav {
  position: sticky;
  top: 0;
  z-index: 9999;
  background: rgba(0, 0, 128, .97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.07);
}

body.hellomula-landing .ti-nav__inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 2rem;
  height: 66px;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

body.hellomula-landing .ti-nav__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}
/* Make logo white on dark nav — remove filter if logo is already light-on-transparent */
body.hellomula-landing .ti-nav__logo img { height: 34px; width: auto; filter: brightness(0) invert(1); }

body.hellomula-landing .ti-nav__links {
  display: flex;
  gap: .125rem;
  flex: 1;
  margin: 0;
  padding: 0;
}
body.hellomula-landing .ti-nav__links li { margin: 0; padding: 0; }
body.hellomula-landing .ti-nav__links a {
  display: block;
  padding: .5rem .6875rem;
  white-space: nowrap;
  color: rgba(255,255,255,.78);
  font-size: .9375rem;
  font-weight: 500;
  border-radius: 6px;
  transition: all .15s ease;
  text-decoration: none !important;
}
body.hellomula-landing .ti-nav__links a:hover { color: var(--ti-white); background: rgba(255,255,255,.1); }

body.hellomula-landing .ti-nav__actions {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-left: auto;
}

/* Mobile toggle */
body.hellomula-landing .ti-nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  margin-left: auto;
}
body.hellomula-landing .ti-nav__toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: rgba(255,255,255,.8);
  border-radius: 2px;
  transition: all .2s ease;
}

@media (max-width: 1120px) {
  body.hellomula-landing .ti-nav__links,
  body.hellomula-landing .ti-nav__actions { display: none; }
  body.hellomula-landing .ti-nav__toggle { display: flex; }
  body.hellomula-landing #ti-nav.is-open .ti-nav__inner {
    flex-wrap: wrap;
    height: auto;
    padding-bottom: 1rem;
  }
  body.hellomula-landing #ti-nav.is-open .ti-nav__links,
  body.hellomula-landing #ti-nav.is-open .ti-nav__actions { display: flex; width: 100%; }
  body.hellomula-landing #ti-nav.is-open .ti-nav__links { flex-direction: column; }
  body.hellomula-landing #ti-nav.is-open .ti-nav__links a { padding: .75rem .875rem; }
  body.hellomula-landing #ti-nav.is-open .ti-nav__actions { flex-wrap: wrap; }
}

/* =============================================================================
   HERO
   ============================================================================= */
body.hellomula-landing .ti-hero {
  background: linear-gradient(140deg, #000080 0%, #003570 55%, #005090 100%);
  padding: 5.5rem 0 0;
  position: relative;
  overflow: hidden;
}
/* Radial glow */
body.hellomula-landing .ti-hero::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -15%;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(0,149,197,.14) 0%, transparent 68%);
  pointer-events: none;
}
body.hellomula-landing .ti-hero::after {
  content: '';
  position: absolute;
  bottom: 20%;
  left: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(97,148,188,.1) 0%, transparent 65%);
  pointer-events: none;
}

body.hellomula-landing .ti-hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center;
  padding-bottom: 4.5rem;
  position: relative;
  z-index: 1;
}

body.hellomula-landing .ti-hero__text { color: var(--ti-white); }

/* Sized for the longest line in the headline — "Should you buy the house?" at
   25 characters. The hero text column is ~520px (1160px container, less 4rem
   padding, split 1fr 1fr with a 3.5rem gap), and the previous 3.125rem ceiling
   was set for a 20-character line. At that size the question overflows the
   column. 2.5rem keeps all three questions on the single lines their <br>s
   intend at every width above the mobile breakpoint. */
body.hellomula-landing .ti-hero__headline {
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
  font-weight: 800;
  color: var(--ti-white);
  line-height: 1.2;
  margin-bottom: 1.25rem;
  letter-spacing: -.02em;
}

body.hellomula-landing .ti-hero__headline em {
  font-style: normal;
  color: #63d0f5;
}

body.hellomula-landing .ti-hero__sub {
  font-size: 1.125rem;
  color: rgba(255,255,255,.8);
  line-height: 1.65;
  margin-bottom: 2rem;
  max-width: 460px;
}

body.hellomula-landing .ti-hero__ctas {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

body.hellomula-landing .ti-hero__note {
  font-size: .8rem;
  color: rgba(255,255,255,.45);
  margin: 0;
}

/* Hero wave divider */
body.hellomula-landing .ti-hero__wave {
  line-height: 0;
  position: relative;
  z-index: 1;
}
body.hellomula-landing .ti-hero__wave svg {
  width: 100%;
  height: 64px;
  display: block;
}

/* =============================================================================
   DASHBOARD MOCKUP (hero visual)
   ============================================================================= */
body.hellomula-landing .ti-hero__visual {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  position: relative;
  z-index: 2;
}

body.hellomula-landing .ti-mockup {
  width: 100%;
  max-width: 460px;
  background: var(--ti-white);
  border-radius: var(--ti-radius-lg);
  box-shadow: 0 40px 100px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.2);
  overflow: hidden;
  font-family: var(--ti-font);
}

/* Browser chrome bar */
body.hellomula-landing .ti-mockup__chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: .625rem 1rem;
  background: #f1f5f9;
  border-bottom: 1px solid var(--ti-border);
}
body.hellomula-landing .ti-mockup__dot {
  width: 10px; height: 10px; border-radius: 50%;
}
body.hellomula-landing .ti-mockup__dot:nth-child(1) { background: #fc5f57; }
body.hellomula-landing .ti-mockup__dot:nth-child(2) { background: #fdbc2c; }
body.hellomula-landing .ti-mockup__dot:nth-child(3) { background: #34c84a; }
body.hellomula-landing .ti-mockup__chrome-title {
  margin-left: auto;
  font-size: .7rem;
  font-weight: 600;
  color: #94a3b8;
  letter-spacing: .03em;
}

/* Mockup body */
body.hellomula-landing .ti-mockup__body {
  padding: 1.125rem;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

/* --- Decision mockup (.ti-dm__*) — the hero visual ------------------------
   Sized so every element stays legible in a 460px-wide card. Nothing here goes
   below 11px, and the two figures that carry the whole idea are 1.5rem. That
   constraint is why this is a mockup and not a screenshot: a real capture of
   the same analysis scales into this slot at roughly 0.37 and its body text
   lands near 5.5px. Six elements, each large, beats forty elements unreadable.
   -------------------------------------------------------------------------- */
body.hellomula-landing .ti-dm__question {
  margin: 0;
  font-size: .9375rem;
  font-weight: 700;
  color: var(--ti-navy);
  line-height: 1.35;
}

body.hellomula-landing .ti-dm__compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .625rem;
}
body.hellomula-landing .ti-dm__side {
  background: var(--ti-white);
  border: 1px solid var(--ti-border);
  border-radius: var(--ti-radius-sm);
  padding: .75rem .8125rem;
  display: flex;
  flex-direction: column;
  gap: .1875rem;
}
/* The alternative the analysis happens to favour for this household. Tinted,
   not flagged as a winner — the product compares, it does not instruct. */
body.hellomula-landing .ti-dm__side--alt {
  background: #eff6ff;
  border-color: rgba(0,149,197,.35);
}
body.hellomula-landing .ti-dm__side-label {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #64748b;
}
/* Clamped rather than fixed: the widest figure here is 8 characters, and at a
   326px card (390px phone) a flat 1.5rem runs into the tile edge. */
body.hellomula-landing .ti-dm__side-value {
  font-size: clamp(1.3125rem, 5.5vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ti-navy);
  line-height: 1.1;
}
body.hellomula-landing .ti-dm__side--alt .ti-dm__side-value { color: var(--ti-deep-blue); }
body.hellomula-landing .ti-dm__side-note {
  font-size: .6875rem;
  color: #64748b;
  line-height: 1.4;
}

body.hellomula-landing .ti-dm__answer {
  margin: 0;
  font-size: .8125rem;
  line-height: 1.5;
  color: #374151;
  background: var(--ti-white);
  border-left: 3px solid var(--ti-bright-blue);
  border-radius: 0 var(--ti-radius-sm) var(--ti-radius-sm) 0;
  padding: .625rem .75rem;
}

body.hellomula-landing .ti-dm__meta {
  display: flex;
  align-items: center;
  gap: .5rem;
}
body.hellomula-landing .ti-dm__chip {
  font-size: .6875rem;
  font-weight: 600;
  color: #15803d;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 100px;
  padding: .1875rem .5rem;
}
body.hellomula-landing .ti-dm__example {
  margin-left: auto;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #94a3b8;
}

/* Net worth card */
body.hellomula-landing .ti-mockup__networth {
  background: var(--ti-white);
  border-radius: var(--ti-radius-sm);
  padding: .875rem 1rem;
  border: 1px solid var(--ti-border);
}
body.hellomula-landing .ti-mockup__kpi-label {
  font-size: .65rem;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .25rem;
}
body.hellomula-landing .ti-mockup__kpi-value {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--ti-deep-blue);
  line-height: 1;
  margin-bottom: .3rem;
}
body.hellomula-landing .ti-mockup__kpi-trend {
  font-size: .72rem;
  font-weight: 600;
  color: #16a34a;
}

/* Account summary cards */
body.hellomula-landing .ti-mockup__accounts {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: .5rem;
}
body.hellomula-landing .ti-mockup__acct {
  background: var(--ti-white);
  border-radius: var(--ti-radius-sm);
  padding: .5rem .625rem;
  border: 1px solid var(--ti-border);
}
body.hellomula-landing .ti-mockup__acct-label {
  display: block;
  font-size: .6rem;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: .2rem;
}
body.hellomula-landing .ti-mockup__acct-value {
  display: block;
  font-size: .8125rem;
  font-weight: 700;
}
body.hellomula-landing .ti-mockup__acct--cash  .ti-mockup__acct-value { color: var(--ti-deep-blue); }
body.hellomula-landing .ti-mockup__acct--invest .ti-mockup__acct-value { color: #16a34a; }
body.hellomula-landing .ti-mockup__acct--credit .ti-mockup__acct-value { color: var(--ti-red); }

/* Chart */
body.hellomula-landing .ti-mockup__chart {
  background: var(--ti-white);
  border-radius: var(--ti-radius-sm);
  padding: .875rem 1rem;
  border: 1px solid var(--ti-border);
}
body.hellomula-landing .ti-mockup__chart-title {
  font-size: .65rem;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: .625rem;
}
body.hellomula-landing .ti-mockup__chart-bars {
  display: flex;
  gap: .375rem;
  align-items: flex-end;
  height: 72px;
  padding-bottom: 1.25rem;
  position: relative;
}
body.hellomula-landing .ti-mockup__bar-group {
  flex: 1;
  display: flex;
  gap: 2px;
  align-items: flex-end;
  height: 100%;
  position: relative;
}
body.hellomula-landing .ti-mockup__bar-group span {
  position: absolute;
  bottom: -1.2rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: .575rem;
  color: #94a3b8;
  white-space: nowrap;
}
body.hellomula-landing .ti-mockup__bar-income { flex:1; border-radius: 3px 3px 0 0; background: var(--ti-bright-blue); }
body.hellomula-landing .ti-mockup__bar-expense { flex:1; border-radius: 3px 3px 0 0; background: #fca5a5; }

body.hellomula-landing .ti-mockup__legend {
  display: flex;
  gap: 1rem;
  margin-top: .25rem;
}
body.hellomula-landing .ti-mockup__legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: .62rem;
  font-weight: 600;
  color: #64748b;
}
body.hellomula-landing .ti-mockup__legend-swatch {
  display: inline-block;
  width: 10px;
  height: 8px;
  border-radius: 2px;
}
body.hellomula-landing .ti-mockup__legend-swatch--income { background: var(--ti-bright-blue); }
body.hellomula-landing .ti-mockup__legend-swatch--expense { background: #fca5a5; }

@media (max-width: 880px) {
  body.hellomula-landing .ti-hero__grid { grid-template-columns: 1fr; }
  /* Kept visible on mobile. It was hidden when this slot held a dense dashboard
     mockup that was unreadable at phone width; the decision mockup is six
     elements and reads fine, and most cold traffic arrives on a phone — hiding
     it left those visitors with no picture of the product at all. */
  body.hellomula-landing .ti-hero__visual {
    max-width: 460px;
    margin: 2.5rem auto 0;
  }
  body.hellomula-landing .ti-hero__sub { max-width: 100%; }
}

/* =============================================================================
   STATS BAR
   ============================================================================= */
body.hellomula-landing .ti-stats {
  padding: 2.25rem 0;
  background: var(--ti-white);
  border-bottom: 1px solid var(--ti-border);
}
body.hellomula-landing .ti-stats__grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 1.5rem;
}
body.hellomula-landing .ti-stat {
  text-align: center;
  padding: .5rem 1rem;
  position: relative;
}
body.hellomula-landing .ti-stat + .ti-stat::before {
  content: '';
  position: absolute;
  left: 0; top: 10%; height: 80%;
  width: 1px;
  background: var(--ti-border);
}
body.hellomula-landing .ti-stat strong {
  display: block;
  font-size: .9375rem;
  font-weight: 700;
  color: var(--ti-navy);
  margin-bottom: .25rem;
}
body.hellomula-landing .ti-stat span {
  font-size: .8rem;
  color: var(--ti-muted);
  line-height: 1.4;
}

@media (max-width: 680px) {
  body.hellomula-landing .ti-stats__grid { grid-template-columns: 1fr 1fr; }
  body.hellomula-landing .ti-stat + .ti-stat::before { display: none; }
}

/* =============================================================================
   FEATURES
   ============================================================================= */
body.hellomula-landing .ti-features {
  padding: 6rem 0;
  background: var(--ti-bg);
}

body.hellomula-landing .ti-features__grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1.25rem;
}

body.hellomula-landing .ti-feature-card {
  background: var(--ti-white);
  border-radius: var(--ti-radius-md);
  padding: 1.75rem;
  border: 1px solid var(--ti-border);
  transition: box-shadow .2s ease, transform .2s ease;
}
body.hellomula-landing .ti-feature-card:hover {
  box-shadow: var(--ti-shadow-lg);
  transform: translateY(-3px);
}

body.hellomula-landing .ti-feature-card__icon {
  width: 46px; height: 46px;
  border-radius: var(--ti-radius-sm);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.125rem;
  flex-shrink: 0;
}
body.hellomula-landing .ti-feature-card__icon svg { width: 22px; height: 22px; }

body.hellomula-landing .ti-feature-card__icon--blue   { background: #dbeafe; color: #004080; }
body.hellomula-landing .ti-feature-card__icon--green  { background: #dcfce7; color: #166534; }
body.hellomula-landing .ti-feature-card__icon--purple { background: #f3e8ff; color: #6b21a8; }
body.hellomula-landing .ti-feature-card__icon--red    { background: #fee2e2; color: #991b1b; }
body.hellomula-landing .ti-feature-card__icon--cyan   { background: #e0f2fe; color: #0369a1; }
body.hellomula-landing .ti-feature-card__icon--navy   { background: #eff6ff; color: #000080; }

body.hellomula-landing .ti-feature-card h3 {
  font-size: 1.0625rem;
  margin-bottom: .5rem;
}
body.hellomula-landing .ti-feature-card p {
  font-size: .875rem;
  color: var(--ti-muted);
  line-height: 1.65;
  margin: 0;
}

@media (max-width: 860px) { body.hellomula-landing .ti-features__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { body.hellomula-landing .ti-features__grid { grid-template-columns: 1fr; } }

/* =============================================================================
   HOW IT WORKS
   ============================================================================= */
body.hellomula-landing .ti-how {
  padding: 6rem 0;
  background: var(--ti-white);
}

body.hellomula-landing .ti-how__steps {
  display: grid;
  grid-template-columns: 1fr 48px 1fr 48px 1fr;
  gap: 1rem;
  align-items: start;
}

body.hellomula-landing .ti-step { text-align: center; }

body.hellomula-landing .ti-step__num {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--ti-navy);
  color: var(--ti-white);
  font-size: 1.125rem;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.25rem;
  box-shadow: 0 4px 14px rgba(0,0,128,.3);
}

body.hellomula-landing .ti-step__visual {
  display: flex;
  justify-content: center;
  margin-bottom: 1.375rem;
}

body.hellomula-landing .ti-step__card {
  width: 185px; height: 155px;
  border-radius: var(--ti-radius-md);
  background: var(--ti-bg);
  border: 1px solid var(--ti-border);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  box-shadow: var(--ti-shadow-sm);
}

body.hellomula-landing .ti-step h3 { font-size: 1.0625rem; margin-bottom: .5rem; }
body.hellomula-landing .ti-step p {
  font-size: .875rem;
  color: var(--ti-muted);
  line-height: 1.6;
  margin: 0;
}

body.hellomula-landing .ti-step__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 80px;
  color: #cbd5e1;
  font-size: 1.5rem;
  font-weight: 300;
}

/* Step 1 – form mockup */
body.hellomula-landing .ti-form-mock { width: 100%; display: flex; flex-direction: column; gap: 8px; }
body.hellomula-landing .ti-form-mock__label {
  font-size: .6rem;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: .05em;
}
body.hellomula-landing .ti-form-mock__field {
  height: 26px;
  background: var(--ti-white);
  border: 1px solid var(--ti-border);
  border-radius: 5px;
}
body.hellomula-landing .ti-form-mock__btn {
  height: 28px;
  background: var(--ti-red);
  border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  font-size: .675rem;
  font-weight: 700;
  color: var(--ti-white);
  margin-top: 4px;
}

/* Step 2 – accounts mockup */
body.hellomula-landing .ti-acct-list { width: 100%; display: flex; flex-direction: column; gap: 5px; }
body.hellomula-landing .ti-acct-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 8px;
  border-radius: 6px;
  background: var(--ti-white);
  border: 1px solid var(--ti-border);
  font-size: .65rem;
}
body.hellomula-landing .ti-acct-row span { color: #64748b; font-weight: 500; }
body.hellomula-landing .ti-acct-row strong { font-weight: 700; }
body.hellomula-landing .ti-acct-row--cash  strong { color: var(--ti-deep-blue); }
body.hellomula-landing .ti-acct-row--invest strong { color: #166534; }
body.hellomula-landing .ti-acct-row--credit strong { color: var(--ti-red); }
body.hellomula-landing .ti-acct-row--add {
  border: 1px dashed #cbd5e1;
  background: transparent;
  justify-content: center;
  color: #94a3b8;
}

/* Step 3 – mini dashboard mockup */
body.hellomula-landing .ti-mini-dash { width: 100%; display: flex; flex-direction: column; gap: .5rem; }
body.hellomula-landing .ti-mini-kpi {
  background: var(--ti-white);
  border-radius: 7px;
  padding: .5rem .625rem;
  border: 1px solid var(--ti-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
body.hellomula-landing .ti-mini-kpi span { font-size: .6rem; color: #94a3b8; font-weight: 600; }
body.hellomula-landing .ti-mini-kpi strong { font-size: .8125rem; font-weight: 800; color: var(--ti-deep-blue); }
body.hellomula-landing .ti-mini-chart-bars {
  background: var(--ti-white);
  border-radius: 7px;
  padding: .5rem .625rem;
  border: 1px solid var(--ti-border);
  display: flex;
  gap: 4px;
  align-items: flex-end;
  height: 56px;
}
body.hellomula-landing .ti-mini-bar {
  flex: 1;
  border-radius: 3px 3px 0 0;
  min-height: 4px;
}

@media (max-width: 780px) {
  body.hellomula-landing .ti-how__steps {
    grid-template-columns: 1fr;
    max-width: 360px;
    margin: 0 auto;
  }
  body.hellomula-landing .ti-step__arrow { display: none; }
  body.hellomula-landing .ti-step__card { width: 100%; height: 130px; }
}

/* =============================================================================
   PRICING
   ============================================================================= */
body.hellomula-landing .ti-pricing {
  padding: 6rem 0;
  background: var(--ti-bg);
}

body.hellomula-landing .ti-pricing__grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1.5rem;
  align-items: start;
}
/* Two-tier layout — see the hellomula-content copy of this rule. Both body
   classes carry their own pricing styles, so a change to the tier count has
   to land in both places or the homepage and /pricing/ disagree. */
body.hellomula-landing .ti-pricing__grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 760px;
  margin: 0 auto;
}

body.hellomula-landing .ti-plan {
  background: var(--ti-white);
  border-radius: var(--ti-radius-lg);
  padding: 2rem;
  border: 1.5px solid var(--ti-border);
  position: relative;
}

body.hellomula-landing .ti-plan--featured {
  border-color: var(--ti-navy);
  border-width: 2px;
  box-shadow: 0 16px 50px rgba(0,0,128,.12);
  transform: scale(1.025);
}

body.hellomula-landing .ti-plan__badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ti-navy);
  color: var(--ti-white);
  font-size: .7rem;
  font-weight: 700;
  padding: .25rem 1rem;
  border-radius: 100px;
  white-space: nowrap;
  letter-spacing: .04em;
  text-transform: uppercase;
}

body.hellomula-landing .ti-plan__header {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--ti-border);
}
body.hellomula-landing .ti-plan__name {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--ti-ink);
  margin-bottom: .75rem;
}
body.hellomula-landing .ti-plan__price {
  display: flex;
  align-items: baseline;
  gap: .375rem;
}
body.hellomula-landing .ti-plan__amount {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--ti-navy);
  line-height: 1;
}
body.hellomula-landing .ti-plan__amount sup {
  font-size: 1.25rem;
  vertical-align: super;
}
body.hellomula-landing .ti-plan__period {
  font-size: .875rem;
  color: #94a3b8;
}
body.hellomula-landing .ti-plan__coming-soon {
  display: inline-block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ti-muted);
  font-style: italic;
}
body.hellomula-landing .ti-plan__pitch {
  font-size: .9375rem;
  font-weight: 600;
  color: var(--ti-navy);
  margin: 0 0 1.25rem;
}

body.hellomula-landing .ti-plan__features {
  margin: 0 0 1.5rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
body.hellomula-landing .ti-plan__features li {
  font-size: .9rem;
  color: #475569;
  display: flex;
  align-items: flex-start;
  gap: .625rem;
}
body.hellomula-landing .ti-plan__features li::before {
  content: '';
  display: block;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2316a34a'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E") center/contain no-repeat;
  flex-shrink: 0;
  margin-top: 1px;
}
body.hellomula-landing .ti-plan__features li strong { color: var(--ti-ink); }

body.hellomula-landing .ti-plan__note {
  font-size: .75rem;
  color: #94a3b8;
  text-align: center;
  margin: .875rem 0 0;
  line-height: 1.45;
}

body.hellomula-landing .ti-plan__subprice {
  font-size: .8125rem;
  color: var(--ti-muted);
  margin: .5rem 0 0;
  line-height: 1.5;
}
body.hellomula-landing .ti-plan__subprice strong { color: #16a34a; }

@media (max-width: 860px) {
  body.hellomula-landing .ti-pricing__grid {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin: 0 auto;
  }
  body.hellomula-landing .ti-plan--featured { transform: none; }
}

/* =============================================================================
   CTA BAND
   ============================================================================= */
body.hellomula-landing .ti-cta-band {
  padding: 5rem 0;
  background: linear-gradient(140deg, #000080 0%, var(--ti-deep-blue) 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
}
body.hellomula-landing .ti-cta-band::before {
  content: '';
  position: absolute;
  top: -50%; left: 50%; transform: translateX(-50%);
  width: 800px; height: 800px;
  background: radial-gradient(circle, rgba(255,255,255,.04) 0%, transparent 65%);
  pointer-events: none;
}
body.hellomula-landing .ti-cta-band h2 {
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  color: var(--ti-white);
  max-width: 620px;
  margin: 0 auto .875rem;
}
body.hellomula-landing .ti-cta-band p {
  color: rgba(255,255,255,.72);
  font-size: 1.0625rem;
  margin-bottom: 2rem;
}

/* =============================================================================
   FOOTER
   ============================================================================= */
body.hellomula-landing .ti-footer {
  background: #0d1526;
  padding: 2.5rem 0;
}
body.hellomula-landing .ti-footer__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
body.hellomula-landing .ti-footer__brand img {
  height: 28px;
  margin-bottom: .625rem;
  filter: brightness(0) invert(1);
}
body.hellomula-landing .ti-footer__brand p {
  font-size: .8125rem;
  color: rgba(255,255,255,.38);
  margin: 0;
  max-width: 260px;
  line-height: 1.5;
}
body.hellomula-landing .ti-footer__links {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  align-items: center;
}
body.hellomula-landing .ti-footer__links a {
  font-size: .875rem;
  color: rgba(255,255,255,.5);
  transition: color .15s ease;
  text-decoration: none !important;
}
body.hellomula-landing .ti-footer__links a:hover { color: var(--ti-white); }
body.hellomula-landing .ti-footer__legal {
  font-size: .8125rem;
  color: rgba(255,255,255,.28);
  margin: 0;
}

/* =============================================================================
   SCROLL ANIMATION — fade-in-up on scroll
   ============================================================================= */
body.hellomula-landing .ti-animate {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .55s ease, transform .55s ease;
}
body.hellomula-landing .ti-animate.is-visible {
  opacity: 1;
  transform: none;
}
body.hellomula-landing .ti-animate--delay-1 { transition-delay: .1s; }
body.hellomula-landing .ti-animate--delay-2 { transition-delay: .2s; }
body.hellomula-landing .ti-animate--delay-3 { transition-delay: .3s; }
body.hellomula-landing .ti-animate--delay-4 { transition-delay: .4s; }
body.hellomula-landing .ti-animate--delay-5 { transition-delay: .5s; }

/* =============================================================================
   POLICY PAGES (Privacy Policy, Terms, etc.)
   Scoped under body.hellomula-policy
   Also shares nav/footer/button selectors with body.hellomula-content below.
   ============================================================================= */

body.hellomula-policy {
  --ti-navy:      #000080;
  --ti-deep-blue: #004080;
  --ti-bright-blue:#0095c5;
  --ti-red:       #E4001B;
  --ti-bg:        #f2f7fc;
  --ti-white:     #ffffff;
  --ti-ink:       #1a1a2e;
  --ti-muted:     #64748b;
  --ti-border:    #e2e8f0;
  --ti-font:      -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                  'Helvetica Neue', Arial, sans-serif;
  margin: 0;
  padding: 0 !important;
  font-family: var(--ti-font);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ti-ink);
  background: var(--ti-white);
}

body.hellomula-policy *,
body.hellomula-policy *::before,
body.hellomula-policy *::after,
body.hellomula-content *,
body.hellomula-content *::before,
body.hellomula-content *::after { box-sizing: border-box; }

body.hellomula-policy img,
body.hellomula-content img { max-width: 100%; height: auto; display: block; }

/* Nav & footer shared between policy and content page templates */
body.hellomula-policy #ti-nav,
body.hellomula-content #ti-nav {
  position: sticky;
  top: 0;
  z-index: 9999;
  background: rgba(0, 0, 128, .97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
body.hellomula-policy .ti-nav__inner,
body.hellomula-content .ti-nav__inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 2rem;
  height: 66px;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
body.hellomula-policy .ti-nav__logo,
body.hellomula-content .ti-nav__logo {
  display: flex; align-items: center; flex-shrink: 0; text-decoration: none;
}
body.hellomula-policy .ti-nav__logo img,
body.hellomula-content .ti-nav__logo img {
  height: 34px; width: auto; filter: brightness(0) invert(1);
}
body.hellomula-policy .ti-nav__links,
body.hellomula-content .ti-nav__links {
  display: flex; gap: .125rem; flex: 1; margin: 0; padding: 0; list-style: none;
}
body.hellomula-policy .ti-nav__links li,
body.hellomula-content .ti-nav__links li { margin: 0; padding: 0; }
body.hellomula-policy .ti-nav__links a,
body.hellomula-content .ti-nav__links a {
  display: block; padding: .5rem .6875rem; white-space: nowrap;
  color: rgba(255,255,255,.78); font-size: .9375rem; font-weight: 500;
  border-radius: 6px; transition: all .15s ease; text-decoration: none !important;
}
body.hellomula-policy .ti-nav__links a:hover,
body.hellomula-content .ti-nav__links a:hover { color: #fff; background: rgba(255,255,255,.1); }
body.hellomula-policy .ti-nav__actions,
body.hellomula-content .ti-nav__actions {
  display: flex; align-items: center; gap: .75rem; margin-left: auto;
}
body.hellomula-policy .ti-nav__toggle,
body.hellomula-content .ti-nav__toggle {
  display: none; flex-direction: column; justify-content: center;
  gap: 5px; width: 36px; height: 36px;
  background: none; border: none; cursor: pointer; padding: 6px; margin-left: auto;
}
body.hellomula-policy .ti-nav__toggle span,
body.hellomula-content .ti-nav__toggle span {
  display: block; width: 100%; height: 2px;
  background: rgba(255,255,255,.8); border-radius: 2px;
}
body.hellomula-policy .ti-btn,
body.hellomula-content .ti-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .625rem 1.375rem; border-radius: 8px; font-size: .9375rem;
  font-family: var(--ti-font); font-weight: 600;
  text-decoration: none !important; cursor: pointer;
  border: 2px solid transparent; transition: all .18s ease;
  white-space: nowrap; line-height: 1;
}
body.hellomula-policy .ti-btn--primary,
body.hellomula-content .ti-btn--primary {
  background: var(--ti-red); color: #fff !important; border-color: var(--ti-red);
}
body.hellomula-policy .ti-btn--primary:hover,
body.hellomula-content .ti-btn--primary:hover { background: #c0001a; border-color: #c0001a; }
body.hellomula-policy .ti-btn--ghost,
body.hellomula-content .ti-btn--ghost {
  background: transparent; color: #fff !important; border-color: rgba(255,255,255,.45);
}
body.hellomula-policy .ti-btn--ghost:hover,
body.hellomula-content .ti-btn--ghost:hover { background: rgba(255,255,255,.1); }

@media (max-width: 1120px) {
  body.hellomula-policy .ti-nav__links,
  body.hellomula-policy .ti-nav__actions,
  body.hellomula-content .ti-nav__links,
  body.hellomula-content .ti-nav__actions { display: none; }
  body.hellomula-policy .ti-nav__toggle,
  body.hellomula-content .ti-nav__toggle { display: flex; }
  body.hellomula-policy #ti-nav.is-open .ti-nav__inner,
  body.hellomula-content #ti-nav.is-open .ti-nav__inner { flex-wrap: wrap; height: auto; padding-bottom: 1rem; }
  body.hellomula-policy #ti-nav.is-open .ti-nav__links,
  body.hellomula-policy #ti-nav.is-open .ti-nav__actions,
  body.hellomula-content #ti-nav.is-open .ti-nav__links,
  body.hellomula-content #ti-nav.is-open .ti-nav__actions { display: flex; width: 100%; }
  body.hellomula-policy #ti-nav.is-open .ti-nav__links,
  body.hellomula-content #ti-nav.is-open .ti-nav__links { flex-direction: column; }
}

/* Policy hero banner */
body.hellomula-policy .ti-policy-hero {
  background: linear-gradient(140deg, #000080 0%, #003570 55%, #005090 100%);
  padding: 4rem 0;
  text-align: center;
}
body.hellomula-policy .ti-policy-hero h1 {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 .75rem;
  line-height: 1.15;
}
body.hellomula-policy .ti-policy-hero p {
  font-size: 1rem;
  color: rgba(255,255,255,.65);
  margin: 0;
}

/* Policy document body */
body.hellomula-policy .ti-policy-wrap {
  max-width: 780px;
  margin: 0 auto;
  padding: 4rem 2rem 5rem;
}

/* Table of contents */
body.hellomula-policy .ti-toc {
  background: var(--ti-bg);
  border: 1px solid var(--ti-border);
  border-radius: 12px;
  padding: 1.5rem 1.75rem;
  margin-bottom: 3rem;
}
body.hellomula-policy .ti-toc h2 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ti-ink);
  margin: 0 0 .875rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}
body.hellomula-policy .ti-toc ol {
  margin: 0; padding: 0 0 0 1.25rem;
  display: grid; grid-template-columns: 1fr 1fr; gap: .25rem .5rem;
}
body.hellomula-policy .ti-toc li { font-size: .875rem; line-height: 1.6; }
body.hellomula-policy .ti-toc a {
  color: var(--ti-bright-blue); text-decoration: none;
}
body.hellomula-policy .ti-toc a:hover { text-decoration: underline; }

@media (max-width: 540px) {
  body.hellomula-policy .ti-toc ol { grid-template-columns: 1fr; }
}

/* Section styling */
body.hellomula-policy .ti-policy-section {
  margin-bottom: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--ti-border);
  scroll-margin-top: 90px; /* account for sticky nav */
}
body.hellomula-policy .ti-policy-section:last-child {
  border-bottom: none; margin-bottom: 0;
}

body.hellomula-policy .ti-policy-section h2 {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--ti-navy);
  margin: 0 0 1rem;
  padding-bottom: .625rem;
  border-bottom: 2px solid var(--ti-bg);
}
body.hellomula-policy .ti-policy-section h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ti-ink);
  margin: 1.5rem 0 .5rem;
}
body.hellomula-policy .ti-policy-section p {
  font-size: .9375rem;
  color: #374151;
  line-height: 1.75;
  margin: 0 0 .875rem;
}
body.hellomula-policy .ti-policy-section p:last-child { margin-bottom: 0; }
body.hellomula-policy .ti-policy-section ul,
body.hellomula-policy .ti-policy-section ol {
  margin: .5rem 0 .875rem;
  padding-left: 1.375rem;
}
body.hellomula-policy .ti-policy-section li {
  font-size: .9375rem;
  color: #374151;
  line-height: 1.75;
  margin-bottom: .25rem;
}
body.hellomula-policy .ti-policy-section a {
  color: var(--ti-bright-blue);
}

/* Highlight box */
body.hellomula-policy .ti-policy-note {
  background: #eff6ff;
  border-left: 4px solid var(--ti-deep-blue);
  border-radius: 0 8px 8px 0;
  padding: 1rem 1.25rem;
  margin: 1rem 0;
}
body.hellomula-policy .ti-policy-note p {
  margin: 0;
  font-size: .9rem;
  color: var(--ti-deep-blue);
  font-weight: 500;
}

/* Contact card */
body.hellomula-policy .ti-contact-card {
  background: var(--ti-bg);
  border-radius: 12px;
  padding: 1.5rem;
  border: 1px solid var(--ti-border);
  margin-top: 1rem;
}
body.hellomula-policy .ti-contact-card p {
  margin: 0 0 .375rem;
}
body.hellomula-policy .ti-contact-card p:last-child { margin: 0; }

/* Footer (reused across policy and content templates) */
body.hellomula-policy .ti-footer,
body.hellomula-content .ti-footer {
  background: #0d1526;
  padding: 2.5rem 0;
}
body.hellomula-policy .ti-footer .ti-container,
body.hellomula-content .ti-footer .ti-container {
  max-width: 1160px; margin: 0 auto; padding: 0 2rem;
}
body.hellomula-policy .ti-footer__top,
body.hellomula-content .ti-footer__top {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 2rem; padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
  margin-bottom: 1.25rem; flex-wrap: wrap;
}
body.hellomula-policy .ti-footer__brand img,
body.hellomula-content .ti-footer__brand img {
  height: 28px; margin-bottom: .625rem; filter: brightness(0) invert(1);
}
body.hellomula-policy .ti-footer__brand p,
body.hellomula-content .ti-footer__brand p {
  font-size: .8125rem; color: rgba(255,255,255,.38);
  margin: 0; max-width: 260px; line-height: 1.5;
}
body.hellomula-policy .ti-footer__links,
body.hellomula-content .ti-footer__links {
  display: flex; gap: 2rem; flex-wrap: wrap; align-items: center;
}
body.hellomula-policy .ti-footer__links a,
body.hellomula-content .ti-footer__links a {
  font-size: .875rem; color: rgba(255,255,255,.5);
  transition: color .15s ease; text-decoration: none !important;
}
body.hellomula-policy .ti-footer__links a:hover,
body.hellomula-content .ti-footer__links a:hover { color: #fff; }
body.hellomula-policy .ti-footer__legal,
body.hellomula-content .ti-footer__legal {
  font-size: .8125rem; color: rgba(255,255,255,.28); margin: 0;
}

/* =============================================================================
   WORDPRESS EDITOR OUTPUT inside .ti-policy-wrap
   Styles raw h2/h3/p/ul/ol/hr output from the WordPress editor so that
   pages using the "HelloMula Content Page" template render consistently
   with the policy page section styles. These selectors do not apply
   inside .ti-policy-section (which has its own rules above).
   ============================================================================= */

body.hellomula-policy .ti-policy-wrap > h2,
body.hellomula-policy .ti-policy-wrap > div > h2 {
  font-size: 1.375rem;
  font-weight: 700;
  color: #000080;
  margin: 2.5rem 0 .75rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--ti-bg);
  line-height: 1.3;
}
body.hellomula-policy .ti-policy-wrap > h2:first-child,
body.hellomula-policy .ti-policy-wrap > div > h2:first-child { margin-top: 0; }

body.hellomula-policy .ti-policy-wrap > h3,
body.hellomula-policy .ti-policy-wrap > div > h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  color: #1a1a2e;
  margin: 1.75rem 0 .5rem;
  line-height: 1.3;
}

body.hellomula-policy .ti-policy-wrap > p,
body.hellomula-policy .ti-policy-wrap > div > p {
  font-size: .9375rem;
  color: #374151;
  line-height: 1.75;
  margin: 0 0 .875rem;
}
body.hellomula-policy .ti-policy-wrap > p.intro,
body.hellomula-policy .ti-policy-wrap > div > p.intro {
  font-size: 1.0625rem;
  color: #1e293b;
  line-height: 1.75;
  margin-bottom: 1.75rem;
}

body.hellomula-policy .ti-policy-wrap > ul,
body.hellomula-policy .ti-policy-wrap > ol,
body.hellomula-policy .ti-policy-wrap > div > ul,
body.hellomula-policy .ti-policy-wrap > div > ol {
  margin: .5rem 0 1rem;
  padding-left: 1.375rem;
}
body.hellomula-policy .ti-policy-wrap > ul li,
body.hellomula-policy .ti-policy-wrap > ol li,
body.hellomula-policy .ti-policy-wrap > div > ul li,
body.hellomula-policy .ti-policy-wrap > div > ol li {
  font-size: .9375rem;
  color: #374151;
  line-height: 1.7;
  margin-bottom: .375rem;
}

body.hellomula-policy .ti-policy-wrap > hr,
body.hellomula-policy .ti-policy-wrap > div > hr {
  border: none;
  border-top: 1px solid var(--ti-border);
  margin: 2.5rem 0;
}

body.hellomula-policy .ti-policy-wrap > a,
body.hellomula-policy .ti-policy-wrap > div > a,
body.hellomula-policy .ti-policy-wrap > p > a,
body.hellomula-policy .ti-policy-wrap > div > p > a {
  color: var(--ti-bright-blue);
  text-decoration: none;
}
body.hellomula-policy .ti-policy-wrap > p > a:hover,
body.hellomula-policy .ti-policy-wrap > div > p > a:hover { text-decoration: underline; }

/* =============================================================================
   FOOTER COLUMNS — shared across all page types
   ============================================================================= */
body.hellomula-landing .ti-footer__cols,
body.hellomula-policy .ti-footer__cols,
body.hellomula-content .ti-footer__cols {
  display: flex;
  gap: 3rem;
  flex-wrap: wrap;
}
body.hellomula-landing .ti-footer__col,
body.hellomula-policy .ti-footer__col,
body.hellomula-content .ti-footer__col {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  min-width: 120px;
}
body.hellomula-landing .ti-footer__col strong,
body.hellomula-policy .ti-footer__col strong,
body.hellomula-content .ti-footer__col strong {
  font-size: .75rem;
  font-weight: 700;
  color: rgba(255,255,255,.55);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: .25rem;
}
body.hellomula-landing .ti-footer__col a,
body.hellomula-policy .ti-footer__col a,
body.hellomula-content .ti-footer__col a {
  font-size: .8125rem;
  color: rgba(255,255,255,.45);
  text-decoration: none !important;
  transition: color .15s ease;
}
body.hellomula-landing .ti-footer__col a:hover,
body.hellomula-policy .ti-footer__col a:hover,
body.hellomula-content .ti-footer__col a:hover { color: #fff; }

body.hellomula-landing .ti-footer__social,
body.hellomula-policy .ti-footer__social,
body.hellomula-content .ti-footer__social {
  display: flex; gap: .875rem; margin-top: 1rem;
}
body.hellomula-landing .ti-footer__social a,
body.hellomula-policy .ti-footer__social a,
body.hellomula-content .ti-footer__social a {
  display: inline-flex; color: rgba(255,255,255,.45);
  transition: color .15s ease;
}
body.hellomula-landing .ti-footer__social a:hover,
body.hellomula-policy .ti-footer__social a:hover,
body.hellomula-content .ti-footer__social a:hover { color: #fff; }
body.hellomula-landing .ti-footer__social svg,
body.hellomula-policy .ti-footer__social svg,
body.hellomula-content .ti-footer__social svg { width: 20px; height: 20px; }

@media (max-width: 640px) {
  body.hellomula-landing .ti-footer__cols,
  body.hellomula-policy .ti-footer__cols,
  body.hellomula-content .ti-footer__cols { gap: 2rem; }
  body.hellomula-landing .ti-footer__col,
  body.hellomula-policy .ti-footer__col,
  body.hellomula-content .ti-footer__col { min-width: calc(50% - 1rem); }
}

/* =============================================================================
   CONTENT PAGES — body.hellomula-content
   Nav, footer, and buttons are already defined for this class (shared with
   hellomula-policy above). These rules cover page-level layout and components.
   ============================================================================= */

body.hellomula-content {
  --ti-navy:       #000080;
  --ti-deep-blue:  #004080;
  --ti-bright-blue:#0095c5;
  --ti-sky-blue:   #6194BC;
  --ti-red:        #E4001B;
  --ti-red-hover:  #c0001a;
  --ti-bg:         #f2f7fc;
  --ti-white:      #ffffff;
  --ti-ink:        #1a1a2e;
  --ti-muted:      #64748b;
  --ti-border:     #e2e8f0;
  --ti-shadow-sm:  0 1px 4px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);
  --ti-shadow-md:  0 4px 16px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
  --ti-shadow-lg:  0 12px 40px rgba(0,0,0,.10), 0 4px 12px rgba(0,0,0,.06);
  --ti-radius-sm:  8px;
  --ti-radius-md:  12px;
  --ti-radius-lg:  20px;
  --ti-font:       -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                   'Helvetica Neue', Arial, sans-serif;
  margin: 0;
  padding: 0 !important;
  font-family: var(--ti-font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ti-ink);
  background: var(--ti-white);
}

body.hellomula-content h1,
body.hellomula-content h2,
body.hellomula-content h3,
body.hellomula-content h4 {
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 .875rem;
  color: var(--ti-ink);
}
body.hellomula-content p { margin: 0 0 1rem; }
body.hellomula-content a { color: var(--ti-bright-blue); text-decoration: none; }
body.hellomula-content img { max-width: 100%; height: auto; display: block; }
body.hellomula-content ul { list-style: none; margin: 0; padding: 0; }

body.hellomula-content .ti-container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 2rem;
}
body.hellomula-content .ti-section-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 3.5rem;
}
body.hellomula-content .ti-section-header h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.25rem);
  margin-bottom: .625rem;
}
body.hellomula-content .ti-section-header p {
  font-size: 1.0625rem;
  color: var(--ti-muted);
  line-height: 1.65;
  margin: 0;
}

/* Buttons (content pages share policy button styles but we duplicate for scoping) */
body.hellomula-content .ti-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .625rem 1.375rem; border-radius: 8px; font-size: .9375rem;
  font-family: var(--ti-font); font-weight: 600;
  text-decoration: none !important; cursor: pointer;
  border: 2px solid transparent; transition: all .18s ease;
  white-space: nowrap; line-height: 1;
}
body.hellomula-content .ti-btn--primary { background: var(--ti-red); color: #fff !important; border-color: var(--ti-red); }
body.hellomula-content .ti-btn--primary:hover { background: var(--ti-red-hover); border-color: var(--ti-red-hover); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(228,0,27,.3); }
body.hellomula-content .ti-btn--outline-navy { background: transparent; color: var(--ti-navy) !important; border-color: var(--ti-navy); }
body.hellomula-content .ti-btn--outline-navy:hover { background: var(--ti-navy); color: #fff !important; }
body.hellomula-content .ti-btn--white { background: #fff; color: var(--ti-navy) !important; border-color: #fff; }
body.hellomula-content .ti-btn--white:hover { background: #eef3fb; transform: translateY(-1px); }
body.hellomula-content .ti-btn--lg { padding: .875rem 2rem; font-size: 1rem; }
body.hellomula-content .ti-btn--ghost { background: transparent; color: #fff !important; border-color: rgba(255,255,255,.45); }
body.hellomula-content .ti-btn--ghost:hover { background: rgba(255,255,255,.1); }

/* Free + paid call-to-action pair on the dark hero and CTA band. Free stays the
   solid button; the paid one is the ghost beside it, so the buyer has a direct
   path without the page pushing everyone to it. Stacks on phones. */
body.hellomula-content .ti-cta-pair { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: center; }
body.hellomula-content .ti-cta-pair__note { flex-basis: 100%; margin: .25rem 0 0 !important; font-size: .875rem !important; color: rgba(255,255,255,.65) !important; }
@media (max-width: 480px) {
  body.hellomula-content .ti-cta-pair .ti-btn { width: 100%; }
}

/* Page hero (content pages) */
body.hellomula-content .ti-page-hero {
  background: linear-gradient(140deg, #000080 0%, #003570 55%, #005090 100%);
  /* Bottom padding must stay 0. The wave divider is the last child of this
     section, so any padding-bottom here paints 64px of gradient UNDERNEATH the
     wave — a dark band floating below the very element whose job is to
     transition into the white content area. The spacing lives on the container
     instead, where it separates the copy from the wave as intended. */
  padding: 5rem 0 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
body.hellomula-content .ti-page-hero > .ti-container { padding-bottom: 2rem; }
body.hellomula-content .ti-page-hero::before {
  content: '';
  position: absolute;
  top: -40%; right: -10%;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(0,149,197,.12) 0%, transparent 70%);
  pointer-events: none;
}
/* Breadcrumb line above an archive title (category.php). Sits inside the dark
   hero, so it borrows the same translucent white as the hero paragraph but one
   step down in size — it is orientation, not copy. The `p` rule below would
   otherwise give it 1.125rem and a 2rem bottom margin, hence the overrides. */
body.hellomula-content .ti-page-hero .ti-crumb {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
  margin: 0 0 .75rem;
  position: relative;
}
body.hellomula-content .ti-page-hero .ti-crumb a {
  color: rgba(255,255,255,.85);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.3);
}
body.hellomula-content .ti-page-hero .ti-crumb a:hover {
  color: #63d0f5;
  border-bottom-color: #63d0f5;
}
body.hellomula-content .ti-page-hero h1 {
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 800;
  color: #fff;
  margin: 0 0 1rem;
  line-height: 1.13;
  letter-spacing: -.02em;
  position: relative;
}
body.hellomula-content .ti-page-hero h1 em {
  font-style: normal;
  color: #63d0f5;
}
body.hellomula-content .ti-page-hero p {
  font-size: 1.125rem;
  color: rgba(255,255,255,.78);
  max-width: 580px;
  margin: 0 auto 2rem;
  line-height: 1.65;
  position: relative;
}
body.hellomula-content .ti-page-hero .ti-badge {
  display: inline-block;
  background: rgba(99,208,245,.18);
  color: #63d0f5;
  border: 1px solid rgba(99,208,245,.35);
  padding: .25rem .875rem;
  border-radius: 100px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
  position: relative;
}
body.hellomula-content .ti-page-hero__wave {
  line-height: 0;
}
body.hellomula-content .ti-page-hero__wave svg {
  width: 100%; height: 56px; display: block;
}

/* Animate-in (reuse landing classes) */
body.hellomula-content .ti-animate { opacity: 0; transform: translateY(20px); transition: opacity .5s ease, transform .5s ease; }
body.hellomula-content .ti-animate.is-visible { opacity: 1; transform: none; }
body.hellomula-content .ti-animate--delay-1 { transition-delay: .1s; }
body.hellomula-content .ti-animate--delay-2 { transition-delay: .2s; }
body.hellomula-content .ti-animate--delay-3 { transition-delay: .3s; }

/* CTA band */
body.hellomula-content .ti-cta-band {
  padding: 5rem 0;
  background: linear-gradient(140deg, #000080 0%, var(--ti-deep-blue) 100%);
  text-align: center;
}
body.hellomula-content .ti-cta-band h2 { font-size: clamp(1.5rem, 3vw, 2.125rem); color: #fff; max-width: 600px; margin: 0 auto .875rem; }
body.hellomula-content .ti-cta-band p { color: rgba(255,255,255,.72); font-size: 1.0625rem; margin-bottom: 2rem; }

/* =============================================================================
   LONG-FORM CONTENT  (.ti-prose)
   Used by /how-it-works/ and /methodology/ — marketing pages that are mostly
   reading rather than cards.

   These two pages originally reused the .ti-policy-* classes, which are scoped
   to body.hellomula-policy. Both pages declare hellomula-content, so NONE of that
   CSS applied and they rendered as unstyled browser defaults: no hero band, no
   measure, no heading scale. Reusing the policy classes would have been the
   quick fix, but they are tuned for legal documents — 15px text, heavy rules
   between sections — and these are conversion pages.

   The measure is the point. At 780px and 17px, a line lands around 70
   characters, which is where sustained reading is comfortable. Section breaks
   are whitespace with a hairline rather than boxes, so nothing competes with
   the words. Everything else — hero, tables, screenshots, CTA band — reuses the
   components the rest of the site already ships.
   ============================================================================= */
body.hellomula-content .ti-prose {
  max-width: 780px;
  margin: 0 auto;
  padding: 3.5rem 2rem;
}
body.hellomula-content .ti-prose-section {
  border-bottom: 1px solid var(--ti-border);
  /* Sticky nav is ~72px; without this an anchored jump (/methodology/#monte-carlo
     is linked from the Decision Lab page) lands with the heading underneath it. */
  scroll-margin-top: 90px;
}
body.hellomula-content .ti-prose-section:last-of-type { border-bottom: none; }

body.hellomula-content .ti-prose h2 {
  font-size: clamp(1.5rem, 3vw, 1.875rem);
  font-weight: 800;
  color: var(--ti-navy);
  letter-spacing: -.01em;
  line-height: 1.25;
  margin: 0 0 1.25rem;
}
body.hellomula-content .ti-prose h3 {
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--ti-ink);
  line-height: 1.35;
  margin: 2.5rem 0 .75rem;
}
body.hellomula-content .ti-prose h3:first-of-type { margin-top: 2rem; }

body.hellomula-content .ti-prose p,
body.hellomula-content .ti-prose li {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: #374151;
}
body.hellomula-content .ti-prose p { margin: 0 0 1.125rem; }
body.hellomula-content .ti-prose p:last-child { margin-bottom: 0; }
body.hellomula-content .ti-prose strong { color: var(--ti-ink); font-weight: 700; }

body.hellomula-content .ti-prose ul,
body.hellomula-content .ti-prose ol {
  margin: 0 0 1.125rem;
  padding-left: 1.25rem;
}
body.hellomula-content .ti-prose li { margin-bottom: .625rem; }
body.hellomula-content .ti-prose li:last-child { margin-bottom: 0; }
body.hellomula-content .ti-prose li::marker { color: var(--ti-bright-blue); }

body.hellomula-content .ti-prose a {
  color: var(--ti-bright-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}
body.hellomula-content .ti-prose a:hover { color: var(--ti-deep-blue); }

body.hellomula-content .ti-prose code {
  font-size: .875em;
  background: var(--ti-bg);
  border: 1px solid var(--ti-border);
  border-radius: 4px;
  padding: .0625rem .3125rem;
}

/* Tables inside prose.

   .ti-compare is used two different ways in this theme. On the pricing page it
   is a <section> wrapping a <table>, so the base rules give it section padding
   and a page background, and style `.ti-compare table` for the card. In prose
   the class sits on the <table> itself — so those section rules land on the
   table (5rem of padding, grey fill) and `.ti-compare table` never matches at
   all, leaving the table with no card treatment.

   Rather than rewrite the markup on either page, restate the card here for the
   table-as-.ti-compare case. The th/td rules already work in both, because they
   are descendant selectors either way. */
body.hellomula-content .ti-prose table.ti-compare {
  width: 100%;
  padding: 0;
  margin: 0 0 1.5rem;
  border-collapse: collapse;
  background: var(--ti-white);
  border-radius: var(--ti-radius-md);
  overflow: hidden;
  box-shadow: var(--ti-shadow-sm);
  font-size: .9375rem;
}
body.hellomula-content .ti-prose table.ti-compare td { vertical-align: top; }
/* The base rule tints rows on hover, which reads as interactive. Nothing here
   is clickable. */
body.hellomula-content .ti-prose table.ti-compare tbody tr:hover td { background: none; }

/* Pull-quote / callout. Used for the one paragraph on a page that the reader
   must not skim past. */
body.hellomula-content .ti-prose-note {
  background: #eff6ff;
  border-left: 4px solid var(--ti-deep-blue);
  border-radius: 0 var(--ti-radius-sm) var(--ti-radius-sm) 0;
  padding: 1.25rem 1.5rem;
  margin: 0 0 1.125rem;
}
body.hellomula-content .ti-prose-note p { color: var(--ti-deep-blue); }

/* Lead-in under a section heading. Used where a reader can arrive mid-page
   from a deep link and needs to know what this section is and is not. */
body.hellomula-content .ti-prose-lede {
  font-size: 1.0625rem;
  color: var(--ti-muted);
  border-bottom: 1px solid var(--ti-border);
  padding-bottom: 1.125rem;
  margin-bottom: 1.75rem;
}

/* Collapsed reference material. The limitations table is disclosure, not
   sales copy: it must be present, indexable and one click from the summary,
   without dominating a page whose first job is explaining how the maths
   works. The summary line stays honest and visible when collapsed — the
   point is proportion, not concealment. */
body.hellomula-content .ti-details {
  border: 1px solid var(--ti-border);
  border-radius: var(--ti-radius-sm);
  margin: 0 0 1.5rem;
  background: var(--ti-bg);
}
body.hellomula-content .ti-details > summary {
  cursor: pointer;
  padding: .875rem 1.25rem;
  font-weight: 600;
  font-size: .9375rem;
  color: var(--ti-navy);
  list-style: none;
  display: flex;
  align-items: center;
  gap: .5rem;
}
body.hellomula-content .ti-details > summary::-webkit-details-marker { display: none; }
body.hellomula-content .ti-details > summary::before {
  content: '+';
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1;
  color: var(--ti-deep-blue);
}
body.hellomula-content .ti-details[open] > summary::before { content: '\2212'; }
body.hellomula-content .ti-details[open] > summary { border-bottom: 1px solid var(--ti-border); }
body.hellomula-content .ti-details > summary:hover { color: var(--ti-deep-blue); }
body.hellomula-content .ti-details > summary:focus-visible {
  outline: 2px solid var(--ti-deep-blue);
  outline-offset: -2px;
}
body.hellomula-content .ti-details__body { padding: 1.25rem; background: var(--ti-white); }
body.hellomula-content .ti-details__body table { margin-bottom: 0; }

/* Jump list — wayfinding for a long page that is also deep-linked into. */
body.hellomula-content .ti-prose-toc {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
body.hellomula-content .ti-prose-toc li { margin: 0; }
body.hellomula-content .ti-prose-toc a {
  display: inline-block;
  font-size: .875rem;
  font-weight: 600;
  color: var(--ti-deep-blue);
  background: var(--ti-bg);
  border: 1px solid var(--ti-border);
  border-radius: 100px;
  padding: .4375rem .875rem;
  text-decoration: none;
}
body.hellomula-content .ti-prose-toc a:hover {
  background: #eff6ff;
  border-color: var(--ti-bright-blue);
  color: var(--ti-deep-blue);
}

@media (max-width: 640px) {
  body.hellomula-content .ti-prose { padding: 2.5rem 1.25rem; }
  body.hellomula-content .ti-prose p,
  body.hellomula-content .ti-prose li { font-size: 1rem; }
  /* Wide tables scroll inside their own container rather than forcing the
     whole page to scroll sideways. */
  body.hellomula-content .ti-prose .ti-compare { overflow-x: auto; }
  body.hellomula-content .ti-prose .ti-compare table { min-width: 480px; }
}

/* =============================================================================
   FEATURES PAGE
   ============================================================================= */
body.hellomula-content .ti-feature-group {
  padding: 5rem 0;
}
body.hellomula-content .ti-feature-group:nth-child(even) {
  background: var(--ti-bg);
}
body.hellomula-content .ti-feature-group__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
body.hellomula-content .ti-feature-card {
  background: var(--ti-white);
  border-radius: var(--ti-radius-md);
  padding: 1.625rem;
  border: 1px solid var(--ti-border);
  transition: box-shadow .2s ease, transform .2s ease;
}
body.hellomula-content .ti-feature-card:hover {
  box-shadow: var(--ti-shadow-lg);
  transform: translateY(-3px);
}
body.hellomula-content .ti-feature-card__icon {
  width: 44px; height: 44px;
  border-radius: var(--ti-radius-sm);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
  flex-shrink: 0;
}
body.hellomula-content .ti-feature-card__icon svg { width: 22px; height: 22px; }
body.hellomula-content .ti-feature-card__icon--blue   { background: #dbeafe; color: #004080; }
body.hellomula-content .ti-feature-card__icon--green  { background: #dcfce7; color: #166534; }
body.hellomula-content .ti-feature-card__icon--purple { background: #f3e8ff; color: #6b21a8; }
body.hellomula-content .ti-feature-card__icon--red    { background: #fee2e2; color: #991b1b; }
body.hellomula-content .ti-feature-card__icon--cyan   { background: #e0f2fe; color: #0369a1; }
body.hellomula-content .ti-feature-card__icon--navy   { background: #eff6ff; color: #000080; }
body.hellomula-content .ti-feature-card__icon--amber  { background: #fef3c7; color: #92400e; }
body.hellomula-content .ti-feature-card__icon--teal   { background: #ccfbf1; color: #115e59; }
body.hellomula-content .ti-feature-card h3 { font-size: 1rem; margin-bottom: .375rem; }
body.hellomula-content .ti-feature-card p { font-size: .875rem; color: var(--ti-muted); line-height: 1.6; margin: 0; }

@media (max-width: 860px) { body.hellomula-content .ti-feature-group__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { body.hellomula-content .ti-feature-group__grid { grid-template-columns: 1fr; } }

/* Decision Lab highlight (on homepage) */
body.hellomula-landing .ti-dl-highlight {
  padding: 6rem 0;
  background: var(--ti-white);
}
body.hellomula-landing .ti-dl-highlight__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
body.hellomula-landing .ti-dl-highlight__text .ti-badge {
  display: inline-block;
  background: rgba(0,149,197,.14);
  color: #0095c5;
  border: 1px solid rgba(0,149,197,.3);
  padding: .25rem .875rem;
  border-radius: 100px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}
body.hellomula-landing .ti-dl-highlight__text h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 800;
  color: var(--ti-navy);
  margin-bottom: 1rem;
}
body.hellomula-landing .ti-dl-highlight__text p {
  font-size: 1.0625rem;
  color: var(--ti-muted);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}
body.hellomula-landing .ti-dl-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 2rem;
}
body.hellomula-landing .ti-dl-tag {
  background: var(--ti-bg);
  border: 1px solid var(--ti-border);
  border-radius: 100px;
  padding: .25rem .75rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--ti-ink);
}
body.hellomula-landing .ti-dl-tag--more {
  background: rgba(0,0,128,.08);
  border-color: rgba(0,0,128,.2);
  color: var(--ti-navy);
}
/* Decision Lab visual mockup */
body.hellomula-landing .ti-dl-mockup {
  background: var(--ti-white);
  border-radius: var(--ti-radius-lg);
  border: 1px solid var(--ti-border);
  box-shadow: var(--ti-shadow-lg);
  overflow: hidden;
  font-family: var(--ti-font);
}
body.hellomula-landing .ti-dl-mockup__header {
  background: var(--ti-navy);
  padding: .875rem 1.25rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
body.hellomula-landing .ti-dl-mockup__header span {
  font-size: .8rem;
  font-weight: 700;
  color: rgba(255,255,255,.85);
  text-transform: uppercase;
  letter-spacing: .05em;
}
body.hellomula-landing .ti-dl-mockup__body {
  padding: 1.25rem;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
body.hellomula-landing .ti-dl-category-row {
  background: var(--ti-white);
  border-radius: 10px;
  border: 1px solid var(--ti-border);
  padding: .875rem 1rem;
}
body.hellomula-landing .ti-dl-cat-label {
  font-size: .7rem;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .5rem;
  display: block;
}
body.hellomula-landing .ti-dl-mods {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
}
body.hellomula-landing .ti-dl-mod {
  font-size: .72rem;
  padding: .25rem .625rem;
  border-radius: 6px;
  background: var(--ti-bg);
  border: 1px solid var(--ti-border);
  color: #475569;
  font-weight: 500;
}
body.hellomula-landing .ti-dl-mod--active {
  background: rgba(0,0,128,.08);
  border-color: rgba(0,0,128,.25);
  color: var(--ti-navy);
  font-weight: 700;
}
body.hellomula-landing .ti-dl-result-box {
  background: linear-gradient(135deg, #000080 0%, #003570 100%);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
body.hellomula-landing .ti-dl-result-label {
  font-size: .65rem;
  font-weight: 700;
  color: rgba(255,255,255,.55);
  text-transform: uppercase;
  letter-spacing: .06em;
}
body.hellomula-landing .ti-dl-result-value {
  font-size: 1.75rem;
  font-weight: 800;
  color: #63d0f5;
  line-height: 1;
}
body.hellomula-landing .ti-dl-result-sub {
  font-size: .75rem;
  color: rgba(255,255,255,.6);
  font-weight: 500;
}
@media (max-width: 860px) {
  body.hellomula-landing .ti-dl-highlight__inner { grid-template-columns: 1fr; }
  body.hellomula-landing .ti-dl-highlight .ti-dl-visual { display: none; }
}

/* =============================================================================
   DECISION LAB PAGE
   ============================================================================= */
body.hellomula-content .ti-dl-categories {
  padding: 5rem 0;
}
body.hellomula-content .ti-dl-categories + .ti-dl-categories {
  padding-top: 0;
}
body.hellomula-content .ti-dl-cat-section {
  margin-bottom: 4rem;
}
body.hellomula-content .ti-dl-cat-section:last-child { margin-bottom: 0; }
body.hellomula-content .ti-dl-cat-header {
  display: flex;
  align-items: center;
  gap: .875rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--ti-bg);
}
body.hellomula-content .ti-dl-cat-icon {
  width: 40px; height: 40px;
  border-radius: var(--ti-radius-sm);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
body.hellomula-content .ti-dl-cat-icon svg { width: 20px; height: 20px; }
body.hellomula-content .ti-dl-cat-header h3 { font-size: 1.25rem; margin: 0; }
body.hellomula-content .ti-dl-cat-header p { font-size: .875rem; color: var(--ti-muted); margin: 0; }
body.hellomula-content .ti-dl-module-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
body.hellomula-content .ti-dl-module-card {
  background: var(--ti-white);
  border-radius: var(--ti-radius-md);
  padding: 1.375rem;
  border: 1px solid var(--ti-border);
  transition: box-shadow .2s ease, border-color .2s ease;
}
body.hellomula-content .ti-dl-module-card:hover {
  box-shadow: var(--ti-shadow-md);
  border-color: rgba(0,0,128,.2);
}
body.hellomula-content .ti-dl-module-card h4 {
  font-size: .9375rem;
  margin-bottom: .375rem;
  color: var(--ti-navy);
}
body.hellomula-content .ti-dl-module-card p {
  font-size: .8125rem;
  color: var(--ti-muted);
  line-height: 1.6;
  margin: 0;
}
body.hellomula-content .ti-dl-plan-badge {
  display: inline-block;
  font-size: .65rem;
  font-weight: 700;
  padding: .175rem .5rem;
  border-radius: 100px;
  margin-bottom: .625rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}
/* Two tiers. Green reads as "yours already", blue as "the paid one" — the
   free badge is the one doing conversion work on this page, so it gets the
   colour that stands out against the card. */
body.hellomula-content .ti-dl-plan-badge--free      { background: #dcfce7; color: #166534; }
body.hellomula-content .ti-dl-plan-badge--household { background: #dbeafe; color: #1e40af; }

@media (max-width: 860px) { body.hellomula-content .ti-dl-module-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { body.hellomula-content .ti-dl-module-grid { grid-template-columns: 1fr; } }

/* =============================================================================
   PRICING PAGE — comparison table
   ============================================================================= */
body.hellomula-content .ti-compare {
  padding: 5rem 0;
  background: var(--ti-bg);
  overflow-x: auto;
}
body.hellomula-content .ti-compare table {
  width: 100%;
  border-collapse: collapse;
  background: var(--ti-white);
  border-radius: var(--ti-radius-md);
  overflow: hidden;
  box-shadow: var(--ti-shadow-sm);
  font-size: .9rem;
}
body.hellomula-content .ti-compare th,
body.hellomula-content .ti-compare td {
  padding: .875rem 1.25rem;
  text-align: left;
  border-bottom: 1px solid var(--ti-border);
}
body.hellomula-content .ti-compare thead th {
  background: var(--ti-navy);
  color: #fff;
  font-size: .875rem;
  font-weight: 700;
}
body.hellomula-content .ti-compare thead th:first-child { border-radius: var(--ti-radius-sm) 0 0 0; }
body.hellomula-content .ti-compare thead th:last-child  { border-radius: 0 var(--ti-radius-sm) 0 0; }
body.hellomula-content .ti-compare td:first-child { font-weight: 600; color: var(--ti-ink); }
body.hellomula-content .ti-compare tbody tr:last-child td { border-bottom: none; }
body.hellomula-content .ti-compare tbody tr:hover td { background: var(--ti-bg); }
body.hellomula-content .ti-compare .ti-check { color: #16a34a; font-size: 1.1rem; }
body.hellomula-content .ti-compare .ti-dash  { color: #cbd5e1; }
body.hellomula-content .ti-compare .ti-cat-row td {
  background: var(--ti-bg);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ti-muted);
  padding: .5rem 1.25rem;
}
/* Qualifying footnote under a feature group — used to state that budget
   features need category-level entry, which the default summary-level
   tracking style does not produce. */
body.hellomula-content .ti-compare .ti-note-row td {
  font-size: .8rem;
  font-weight: 400;
  font-style: italic;
  color: var(--ti-muted);
  padding: .25rem 1.25rem .75rem;
  line-height: 1.5;
}
body.hellomula-content .ti-compare .ti-note-row td a { color: var(--ti-bright-blue); }

/* Pricing cards on pricing page (reuse landing styles, add page overrides) */
body.hellomula-content .ti-pricing { padding: 5rem 0; background: var(--ti-white); }
body.hellomula-content .ti-pricing__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: start;
}
/* Two-tier layout. Three narrow columns filled the row; two would stretch to
   half the container each and read as a pair of billboards, so cap the pair
   and centre it. */
body.hellomula-content .ti-pricing__grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 760px;
  margin: 0 auto;
}
body.hellomula-content .ti-plan {
  background: var(--ti-white);
  border-radius: var(--ti-radius-lg);
  padding: 2rem;
  border: 1.5px solid var(--ti-border);
  position: relative;
}
body.hellomula-content .ti-plan--featured {
  border-color: var(--ti-navy);
  border-width: 2px;
  box-shadow: 0 16px 50px rgba(0,0,128,.12);
  transform: scale(1.025);
}
body.hellomula-content .ti-plan__badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--ti-navy); color: #fff; font-size: .7rem; font-weight: 700;
  padding: .25rem 1rem; border-radius: 100px; white-space: nowrap;
  letter-spacing: .04em; text-transform: uppercase;
}
body.hellomula-content .ti-plan__header { margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--ti-border); }
body.hellomula-content .ti-plan__name { font-size: 1.125rem; font-weight: 700; color: var(--ti-ink); margin-bottom: .75rem; }
body.hellomula-content .ti-plan__amount { font-size: 2.25rem; font-weight: 800; color: var(--ti-navy); line-height: 1; }
body.hellomula-content .ti-plan__period { font-size: .875rem; color: #94a3b8; }
body.hellomula-content .ti-plan__coming-soon { display: inline-block; font-size: 1rem; font-weight: 700; color: var(--ti-muted); font-style: italic; }
/* One line under the price saying who the plan is for. Two tiers means the
   choice is now a real decision rather than a ladder, so each card has to
   answer "is this me?" before the feature list. */
body.hellomula-content .ti-plan__pitch { font-size: .9375rem; font-weight: 600; color: var(--ti-navy); margin: 0 0 1.25rem; }
body.hellomula-content .ti-plan__features { margin: 0 0 1.5rem; padding: 0; display: flex; flex-direction: column; gap: .625rem; }
body.hellomula-content .ti-plan__features li {
  font-size: .875rem; color: #475569;
  display: flex; align-items: flex-start; gap: .625rem;
}
body.hellomula-content .ti-plan__features li::before {
  content: '';
  display: block; width: 18px; height: 18px; border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2316a34a'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E") center/contain no-repeat;
  flex-shrink: 0; margin-top: 2px;
}
body.hellomula-content .ti-plan__features li strong { color: var(--ti-ink); }
body.hellomula-content .ti-plan__note { font-size: .75rem; color: #94a3b8; text-align: center; margin: .875rem 0 0; }

/* The browser's [hidden] rule is a plain `display: none`, so any author rule
   that sets display — `.ti-btn--full { display: flex }` below, and
   `.ti-plan__price { display: flex }` on the landing page — outranks it and the
   hidden element keeps showing. The toggle relies on [hidden], so it needs to
   actually win, on both the pricing page and the homepage pricing block. */
body.hellomula-content [hidden],
body.hellomula-landing [hidden] { display: none !important; }

/* ── Monthly / yearly billing toggle ─────────────────────────────────────────
   Both prices are in the markup and the toggle hides one, so the figures are
   whatever PHP rendered. With JS off nothing is hidden beyond the yearly
   default the server sends, and both CTAs remain reachable.

   Deliberately not scoped to a body class: this component renders on the
   pricing page (body.hellomula-content) and in the homepage pricing block
   (body.hellomula-landing), and landing.css only loads on HelloMula templates. */
.ti-billing-toggle {
  display: flex;
  justify-content: center;
  gap: .25rem;
  width: max-content;
  margin: 0 auto 2.5rem;
  padding: .25rem;
  background: var(--ti-bg);
  border: 1px solid var(--ti-border);
  border-radius: 100px;
}
.ti-billing-toggle__btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1.25rem;
  border: 0;
  border-radius: 100px;
  background: transparent;
  color: var(--ti-muted);
  font: inherit;
  font-size: .9375rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.ti-billing-toggle__btn:hover { color: var(--ti-ink); }
.ti-billing-toggle__btn.is-active { background: var(--ti-navy); color: #fff; }
.ti-billing-toggle__btn:focus-visible {
  outline: 2px solid var(--ti-bright-blue);
  outline-offset: 2px;
}
.ti-billing-toggle__save {
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: .125rem .5rem;
  border-radius: 100px;
  background: rgba(22, 163, 74, .14);
  color: #16a34a;
}
.ti-billing-toggle__btn.is-active .ti-billing-toggle__save {
  background: rgba(255, 255, 255, .2);
  color: #fff;
}

/* The line under the headline price carrying the other cycle's figure. */
body.hellomula-content .ti-plan__subprice {
  font-size: .8125rem;
  color: var(--ti-muted);
  margin: .5rem 0 0;
  line-height: 1.5;
}
body.hellomula-content .ti-plan__subprice strong { color: #16a34a; }

/* Founding member offer (TI_FOUNDING_OPEN in functions.php): the rate-lock
   line under the Household price, and the terms beneath the plan cards.
   Shared by the homepage (.hellomula-landing) and /pricing/ (.hellomula-content). */
body.hellomula-landing .ti-plan__founding,
body.hellomula-content .ti-plan__founding {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--ti-navy);
  background: #eef2ff;
  border-radius: 8px;
  padding: .5rem .75rem;
  margin: .875rem 0 0;
  line-height: 1.5;
}
body.hellomula-content .ti-pricing__fine {
  max-width: 640px;
  margin: 2rem auto 0;
  font-size: .8125rem;
  color: var(--ti-muted);
  line-height: 1.6;
  text-align: center;
}
body.hellomula-content .ti-btn--full { width: 100%; display: flex; }

@media (max-width: 860px) {
  body.hellomula-content .ti-pricing__grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
  body.hellomula-content .ti-plan--featured { transform: none; }
}

/* =============================================================================
   FAQ PAGE
   ============================================================================= */
body.hellomula-content .ti-faq-page { padding: 5rem 0; }
body.hellomula-content .ti-faq-section { margin-bottom: 3.5rem; }
body.hellomula-content .ti-faq-section h3 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--ti-navy);
  margin-bottom: 1.25rem;
  padding-bottom: .625rem;
  border-bottom: 2px solid var(--ti-bg);
}
body.hellomula-content .ti-faq-list { display: flex; flex-direction: column; gap: .5rem; }
body.hellomula-content .ti-faq-item {
  background: var(--ti-white);
  border: 1px solid var(--ti-border);
  border-radius: var(--ti-radius-sm);
  overflow: hidden;
}
body.hellomula-content .ti-faq-question {
  width: 100%; background: none; border: none; cursor: pointer;
  text-align: left; padding: 1.125rem 1.375rem;
  font-size: .9375rem; font-weight: 600; color: var(--ti-ink);
  font-family: var(--ti-font);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  transition: background .15s ease;
}
body.hellomula-content .ti-faq-question:hover { background: var(--ti-bg); }
body.hellomula-content .ti-faq-question__icon {
  width: 22px; height: 22px; flex-shrink: 0;
  border-radius: 50%; background: var(--ti-bg);
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s ease, background .15s ease;
  color: var(--ti-navy); font-size: 1.125rem; font-weight: 300; line-height: 1;
}
body.hellomula-content .ti-faq-item.is-open .ti-faq-question__icon { transform: rotate(45deg); background: var(--ti-navy); color: #fff; }
body.hellomula-content .ti-faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}
/* =============================================================================
   PRODUCT SCREENSHOTS
   Real captures of the app, shown with fictional example data. The caption is
   not decoration — the audit requires every marketing screenshot to be labelled
   as an example, and anything showing a projection to point at the methodology.
   ============================================================================= */
body.hellomula-content .ti-shot,
body.hellomula-landing .ti-shot {
  margin: 2rem auto;
  max-width: 900px;
}
body.hellomula-content .ti-shot img,
body.hellomula-landing .ti-shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--ti-border);
  border-radius: var(--ti-radius-md);
  box-shadow: var(--ti-shadow-md);
}
body.hellomula-content .ti-shot figcaption,
body.hellomula-landing .ti-shot figcaption {
  margin-top: .75rem;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--ti-muted);
  text-align: center;
}
body.hellomula-content .ti-shot figcaption a,
body.hellomula-landing .ti-shot figcaption a { color: var(--ti-bright-blue); }
body.hellomula-content .ti-shot--wide,
body.hellomula-landing .ti-shot--wide { max-width: 1100px; }
/* Captures that were cropped tight to the app chrome need a little breathing
   room inside the frame so the content is not flush against the border. */
body.hellomula-content .ti-shot--pad img,
body.hellomula-landing .ti-shot--pad img {
  padding: .25em;
  background: #fff;
}

body.hellomula-content .ti-faq-answer__inner {
  padding: 0 1.375rem 1.25rem;
  font-size: .9rem;
  color: #374151;
  line-height: 1.75;
}
/* Multi-paragraph answers need explicit spacing — the theme reset zeroes
   paragraph margins, so bare <p> tags would run together. */
body.hellomula-content .ti-faq-answer__inner p { margin: 0 0 .85em; }
body.hellomula-content .ti-faq-answer__inner p:last-child { margin-bottom: 0; }
/* Generous enough for the longest multi-paragraph answer at mobile widths;
   anything smaller clips the answer instead of animating it open. */
body.hellomula-content .ti-faq-item.is-open .ti-faq-answer { max-height: 1200px; }

/* =============================================================================
   BLOG PAGE
   ============================================================================= */
body.hellomula-content .ti-blog-page { padding: 5rem 0; }
body.hellomula-content .ti-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
body.hellomula-content .ti-blog-card {
  background: var(--ti-white);
  border-radius: var(--ti-radius-md);
  border: 1px solid var(--ti-border);
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}
body.hellomula-content .ti-blog-card:hover { box-shadow: var(--ti-shadow-lg); transform: translateY(-3px); }
body.hellomula-content .ti-blog-card__thumb {
  aspect-ratio: 16/9;
  background: var(--ti-bg);
  overflow: hidden;
}
body.hellomula-content .ti-blog-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
body.hellomula-content .ti-blog-card__body { padding: 1.375rem; }
body.hellomula-content .ti-blog-card__cat {
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ti-bright-blue); margin-bottom: .5rem; display: block;
}
body.hellomula-content .ti-blog-card__title {
  font-size: 1rem; font-weight: 700; color: var(--ti-ink);
  margin-bottom: .5rem; line-height: 1.35;
}
body.hellomula-content .ti-blog-card__title a { color: inherit; text-decoration: none; }
body.hellomula-content .ti-blog-card__title a:hover { color: var(--ti-navy); }
body.hellomula-content .ti-blog-card__excerpt {
  font-size: .875rem; color: var(--ti-muted); line-height: 1.6; margin-bottom: .875rem;
}
body.hellomula-content .ti-blog-card__meta {
  font-size: .78rem; color: #94a3b8;
}
body.hellomula-content .ti-blog-empty {
  text-align: center;
  padding: 5rem 2rem;
  background: var(--ti-bg);
  border-radius: var(--ti-radius-lg);
  border: 2px dashed var(--ti-border);
}
body.hellomula-content .ti-blog-empty h3 { font-size: 1.25rem; color: var(--ti-navy); margin-bottom: .625rem; }
body.hellomula-content .ti-blog-empty p { color: var(--ti-muted); font-size: .9375rem; margin: 0; }
body.hellomula-content .ti-blog-pagination {
  display: flex; justify-content: center; gap: .5rem; margin-top: 3rem; flex-wrap: wrap;
}
body.hellomula-content .ti-blog-pagination a,
body.hellomula-content .ti-blog-pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--ti-radius-sm);
  font-size: .875rem; font-weight: 600;
  border: 1px solid var(--ti-border); color: var(--ti-ink);
  text-decoration: none; transition: all .15s ease;
}
body.hellomula-content .ti-blog-pagination a:hover { background: var(--ti-navy); color: #fff; border-color: var(--ti-navy); }
body.hellomula-content .ti-blog-pagination .current { background: var(--ti-navy); color: #fff; border-color: var(--ti-navy); }

@media (max-width: 860px) { body.hellomula-content .ti-blog-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { body.hellomula-content .ti-blog-grid { grid-template-columns: 1fr; } }

/* =============================================================================
   ABOUT PAGE
   ============================================================================= */
body.hellomula-content .ti-about { padding: 5rem 0; }
body.hellomula-content .ti-about__mission {
  max-width: 780px; margin: 0 auto 5rem; text-align: center;
}
body.hellomula-content .ti-about__mission p { font-size: 1.125rem; color: #374151; line-height: 1.8; margin-bottom: 1rem; }
body.hellomula-content .ti-about__values {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-bottom: 5rem;
}
body.hellomula-content .ti-about__value {
  background: var(--ti-bg);
  border-radius: var(--ti-radius-md);
  padding: 2rem;
  text-align: center;
}
body.hellomula-content .ti-about__value h3 { font-size: 1.0625rem; margin-bottom: .5rem; }
body.hellomula-content .ti-about__value p { font-size: .875rem; color: var(--ti-muted); line-height: 1.65; margin: 0; }
@media (max-width: 760px) { body.hellomula-content .ti-about__values { grid-template-columns: 1fr; } }

/* =============================================================================
   CONTACT PAGE
   ============================================================================= */
body.hellomula-content .ti-contact { padding: 5rem 0; }
body.hellomula-content .ti-contact__grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 4rem;
  align-items: start;
}
body.hellomula-content .ti-contact__info h2 { font-size: 1.5rem; margin-bottom: 1rem; }
body.hellomula-content .ti-contact__info p { font-size: .9375rem; color: #374151; line-height: 1.7; margin-bottom: 1.5rem; }
body.hellomula-content .ti-contact__card {
  background: var(--ti-bg); border-radius: var(--ti-radius-md); padding: 1.5rem;
  border: 1px solid var(--ti-border); margin-bottom: 1rem;
}
body.hellomula-content .ti-contact__card strong { font-size: .875rem; font-weight: 700; color: var(--ti-navy); display: block; margin-bottom: .375rem; }
body.hellomula-content .ti-contact__card a { font-size: .9375rem; color: var(--ti-bright-blue); }
@media (max-width: 760px) { body.hellomula-content .ti-contact__grid { grid-template-columns: 1fr; } }

/* =============================================================================
   SECURITY PAGE
   ============================================================================= */
body.hellomula-content .ti-security { padding: 5rem 0; }
body.hellomula-content .ti-security__grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-bottom: 4rem;
}
body.hellomula-content .ti-security__card {
  background: var(--ti-white); border-radius: var(--ti-radius-md);
  padding: 1.75rem; border: 1px solid var(--ti-border);
  display: flex; gap: 1.125rem; align-items: flex-start;
}
body.hellomula-content .ti-security__card-icon {
  width: 44px; height: 44px; border-radius: var(--ti-radius-sm); flex-shrink: 0;
  background: #eff6ff; color: var(--ti-navy);
  display: flex; align-items: center; justify-content: center;
}
body.hellomula-content .ti-security__card-icon svg { width: 22px; height: 22px; }
body.hellomula-content .ti-security__card h3 { font-size: 1rem; margin-bottom: .375rem; }
body.hellomula-content .ti-security__card p { font-size: .875rem; color: var(--ti-muted); line-height: 1.65; margin: 0; }
@media (max-width: 680px) { body.hellomula-content .ti-security__grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------------
   Contact form (Contact Form 7)
   Replaces the inline styles that lived on the old hand-rolled mailto form.
   CF7 emits its own markup, so the fields are styled by element inside the
   card rather than by class — that keeps working if the form's fields change
   in the CF7 editor.
   --------------------------------------------------------------------------- */
body.hellomula-content .ti-contact__form-card {
  background: var(--ti-bg);
  border: 1px solid var(--ti-border);
  border-radius: var(--ti-radius-lg);
  padding: 2.5rem;
}
body.hellomula-content .ti-contact__form-card h3 {
  font-size: 1.125rem;
  margin-bottom: 1.5rem;
  color: var(--ti-navy);
}
body.hellomula-content .ti-contact__form-card label {
  display: block;
  font-size: .8125rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 1.125rem;
}
body.hellomula-content .ti-contact__form-card input[type="text"],
body.hellomula-content .ti-contact__form-card input[type="email"],
body.hellomula-content .ti-contact__form-card input[type="tel"],
body.hellomula-content .ti-contact__form-card select,
body.hellomula-content .ti-contact__form-card textarea {
  width: 100%;
  margin-top: .375rem;
  padding: .625rem .875rem;
  border: 1px solid var(--ti-border);
  border-radius: 8px;
  font-size: .9375rem;
  font-family: inherit;
  font-weight: 400;
  color: #111827;
  background: #fff;
  outline: none;
  transition: border-color .15s ease;
}
body.hellomula-content .ti-contact__form-card textarea { resize: vertical; min-height: 9rem; }

/* Avada wraps a CF7 select in .wpcf7-select-parent and overlays its own
   35x33px .select-arrow box at top/right 1px. Our fields are taller than 33px,
   so that box left a visible seam inside the rounded corner. Hide it and draw
   the chevron as a background image on the select itself, which scales with
   whatever height the field ends up at. */
body.hellomula-content .ti-contact__form-card .wpcf7-select-parent { overflow: visible; }
body.hellomula-content .ti-contact__form-card .select-arrow { display: none; }
body.hellomula-content .ti-contact__form-card select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  height: auto;
  cursor: pointer;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%2364748b' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .95rem center;
}
body.hellomula-content .ti-contact__form-card input:focus,
body.hellomula-content .ti-contact__form-card select:focus,
body.hellomula-content .ti-contact__form-card textarea:focus {
  border-color: var(--ti-bright-blue);
}
body.hellomula-content .ti-contact__form-card input[type="submit"] {
  display: inline-block;
  padding: .75rem 1.75rem;
  border: 0;
  border-radius: 8px;
  background: var(--ti-bright-blue);
  color: #fff;
  font-size: .9375rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s ease;
}
body.hellomula-content .ti-contact__form-card input[type="submit"]:hover { background: var(--ti-navy); }
body.hellomula-content .ti-contact__form-card .wpcf7-spinner { margin-left: .625rem; }
body.hellomula-content .ti-contact__form-card .wpcf7-not-valid-tip {
  font-size: .8125rem;
  font-weight: 400;
  color: #b91c1c;
  margin-top: .25rem;
}
body.hellomula-content .ti-contact__form-card .wpcf7-response-output {
  margin: 1.5rem 0 0;
  padding: .875rem 1rem;
  border-radius: 8px;
  font-size: .875rem;
  font-weight: 400;
  line-height: 1.6;
}

/* ===========================================================================
   Single blog post (single.php, body.hellomula-post)
   The post body is Gutenberg block output, so it is styled by element inside
   .ti-post-body rather than by class — that keeps working when the post is
   edited in the block editor and the markup changes.
   =========================================================================== */
body.hellomula-post {
  --ti-navy:       #000080;
  --ti-deep-blue:  #004080;
  --ti-bright-blue:#0095c5;
  --ti-red:        #E4001B;
  --ti-bg:         #f2f7fc;
  --ti-ink:        #1a1a2e;
  --ti-muted:      #64748b;
  --ti-border:     #e2e8f0;
  --ti-radius-lg:  20px;
}

/* Hero band — same gradient as the policy/page heroes */
body.hellomula-post .ti-post-hero {
  position: relative;
  padding: 4.5rem 0 4rem;
  background: linear-gradient(120deg, #000080 0%, #004080 55%, #0069a3 100%);
  color: #fff;
  text-align: center;
}
body.hellomula-post .ti-post-hero .ti-container { max-width: 820px; margin: 0 auto; padding: 0 2rem; }
body.hellomula-post .ti-post-hero__cat {
  display: inline-block;
  margin-bottom: 1rem;
  padding: .3rem .85rem;
  border-radius: 100px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.26);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
body.hellomula-post .ti-post-hero h1 {
  margin: 0 0 .9rem;
  font-size: clamp(2rem, 4.4vw, 3rem);
  line-height: 1.12;
  letter-spacing: -.02em;
  color: #fff;
}
body.hellomula-post .ti-post-hero__meta { margin: 0; font-size: .9375rem; color: rgba(255,255,255,.75); }
body.hellomula-post .ti-page-hero__wave { position: absolute; left: 0; right: 0; bottom: -1px; line-height: 0; }
body.hellomula-post .ti-page-hero__wave svg { width: 100%; height: 56px; display: block; }

/* Prose column. Paints its own white surface: Avada sets a #f2f3f5 body
   background site-wide, and every HelloMula template covers it section by
   section rather than fighting it on <body>. */
body.hellomula-post .ti-post-wrap { padding: 3.5rem 0 4.5rem; background: #fff; }
body.hellomula-post .ti-post-body {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 2rem;
  font-size: 1.0625rem;
  line-height: 1.78;
  color: #2b3240;
}
body.hellomula-post .ti-post-body > p { margin: 0 0 1.45rem; }
body.hellomula-post .ti-post-body .ti-lede { font-size: 1.1875rem; line-height: 1.72; color: #1f2937; }
body.hellomula-post .ti-post-body h2 {
  margin: 3rem 0 1.1rem;
  font-size: 1.625rem;
  line-height: 1.25;
  letter-spacing: -.015em;
  color: var(--ti-navy);
}
body.hellomula-post .ti-post-body h3 { margin: 2.25rem 0 .85rem; font-size: 1.1875rem; color: var(--ti-navy); }
body.hellomula-post .ti-post-body strong { color: var(--ti-ink); font-weight: 700; }
body.hellomula-post .ti-post-body a { color: var(--ti-bright-blue); text-decoration: underline; text-underline-offset: 2px; }
body.hellomula-post .ti-post-body ul,
body.hellomula-post .ti-post-body ol { margin: 0 0 1.6rem; padding-left: 1.3rem; }
body.hellomula-post .ti-post-body li { margin-bottom: .75rem; }

/* Charts break out of the prose column — they need the width */
body.hellomula-post .ti-post-body .ti-chart {
  margin: 2.5rem 0;
  width: calc(100% + 8rem);
  max-width: 100vw;
  margin-left: -4rem;
}
body.hellomula-post .ti-post-body .ti-chart img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--ti-border);
  border-radius: 14px;
}
body.hellomula-post .ti-post-body figcaption {
  margin-top: .7rem;
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--ti-muted);
  text-align: center;
}

body.hellomula-post .ti-post-body .ti-pullquote {
  margin: 2.5rem 0;
  padding: 1.5rem 0 1.5rem 1.75rem;
  border-left: 4px solid var(--ti-bright-blue);
  background: none;
}
body.hellomula-post .ti-post-body .ti-pullquote blockquote { margin: 0; }
body.hellomula-post .ti-post-body .ti-pullquote p {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.5;
  font-weight: 600;
  color: var(--ti-navy);
  text-align: left;
}

/* Closing CTA */
body.hellomula-post .ti-post-cta {
  margin: 3rem 0 2rem;
  padding: 2.25rem 2rem;
  background: var(--ti-bg);
  border: 1px solid var(--ti-border);
  border-radius: var(--ti-radius-lg);
  text-align: center;
}
body.hellomula-post .ti-post-cta h3 { margin: 0 0 .5rem; font-size: 1.375rem; }
body.hellomula-post .ti-post-cta > p { margin: 0 0 1.5rem; font-size: .9375rem; color: var(--ti-muted); }
body.hellomula-post .ti-post-cta .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: center;
}
body.hellomula-post .ti-post-cta .wp-block-button__link {
  display: inline-block;
  padding: .8rem 1.6rem;
  border-radius: 8px;
  background: var(--ti-red);
  color: #fff;
  font-size: .9375rem;
  font-weight: 700;
  text-decoration: none;
  transition: background .15s ease;
}
body.hellomula-post .ti-post-cta .wp-block-button__link:hover { background: #c0001a; }
body.hellomula-post .ti-post-cta .is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--ti-navy);
  box-shadow: inset 0 0 0 2px var(--ti-navy);
}
body.hellomula-post .ti-post-cta .is-style-outline .wp-block-button__link:hover {
  background: var(--ti-navy);
  color: #fff;
}

body.hellomula-post .ti-post-body .wp-block-separator {
  margin: 2.5rem 0 1.75rem;
  border: 0;
  border-top: 1px solid var(--ti-border);
}
body.hellomula-post .ti-post-body .ti-post-note { font-size: .8125rem; line-height: 1.65; color: var(--ti-muted); }

@media (max-width: 860px) {
  body.hellomula-post .ti-post-body .ti-chart { width: 100%; margin-left: 0; }
}

/* ===========================================================================
   Content pages built in the block editor (page-content.php, body.hellomula-policy)
   Charts, captions and comparison tables — the pieces the decision and
   comparison pages need that the policy pages never did.
   =========================================================================== */

/* Charts break out of the prose column; at the column width the axis labels
   in a 900px-wide chart render too small to read. */
body.hellomula-policy .ti-policy-wrap .ti-chart {
  margin: 2.5rem 0;
  width: calc(100% + 8rem);
  max-width: 100vw;
  margin-left: -4rem;
}
body.hellomula-policy .ti-policy-wrap .ti-chart img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--ti-border);
  border-radius: 14px;
}
body.hellomula-policy .ti-policy-wrap figcaption,
body.hellomula-policy .ti-policy-wrap .wp-element-caption {
  margin-top: .7rem;
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--ti-muted);
  text-align: center;
}

/* Comparison table. The HelloMula column is tinted so the eye can hold its
   place across ten rows — the label row stays plain so the tint reads as
   "this column" rather than as a recommendation. */
body.hellomula-policy .ti-compare-table { margin: 2rem 0; overflow-x: auto; }
body.hellomula-policy .ti-compare-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9375rem;
  background: #fff;
}
body.hellomula-policy .ti-compare-table th,
body.hellomula-policy .ti-compare-table td {
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--ti-border);
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
}
body.hellomula-policy .ti-compare-table thead th {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--ti-navy);
  border-bottom: 2px solid var(--ti-navy);
}
body.hellomula-policy .ti-compare-table tbody td:first-child {
  font-weight: 600;
  color: var(--ti-ink);
  width: 30%;
}
body.hellomula-policy .ti-compare-table thead th:nth-child(2),
body.hellomula-policy .ti-compare-table tbody td:nth-child(2) {
  background: var(--ti-bg);
}
body.hellomula-policy .ti-compare-table tbody tr:last-child td { border-bottom: 0; }

/* Closing CTA block, shared with the blog post styling */
body.hellomula-policy .ti-post-cta {
  margin: 3rem 0 2rem;
  padding: 2.25rem 2rem;
  background: var(--ti-bg);
  border: 1px solid var(--ti-border);
  border-radius: var(--ti-radius-lg);
  text-align: center;
}
body.hellomula-policy .ti-post-cta h3 { margin: 0 0 .5rem; font-size: 1.375rem; color: var(--ti-navy); }
body.hellomula-policy .ti-post-cta > p { margin: 0 0 1.5rem; font-size: .9375rem; color: var(--ti-muted); }
body.hellomula-policy .ti-post-cta .wp-block-buttons {
  display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center;
}
body.hellomula-policy .ti-post-cta .wp-block-button__link {
  display: inline-block; padding: .8rem 1.6rem; border-radius: 8px;
  background: var(--ti-red); color: #fff; font-size: .9375rem; font-weight: 700;
  text-decoration: none; transition: background .15s ease;
}
body.hellomula-policy .ti-post-cta .wp-block-button__link:hover { background: var(--ti-red-hover); }
body.hellomula-policy .ti-post-cta .is-style-outline .wp-block-button__link {
  background: transparent; color: var(--ti-navy); box-shadow: inset 0 0 0 2px var(--ti-navy);
}
body.hellomula-policy .ti-post-cta .is-style-outline .wp-block-button__link:hover {
  background: var(--ti-navy); color: #fff;
}
body.hellomula-policy .ti-policy-wrap .ti-post-note { font-size: .8125rem; line-height: 1.65; color: var(--ti-muted); }

@media (max-width: 860px) {
  body.hellomula-policy .ti-policy-wrap .ti-chart { width: 100%; margin-left: 0; }
}

/* ---------------------------------------------------------------------------
   Pre-launch bar and early-access page (inc/early-access.php).
   The bar is unscoped: it shows on every route the theme renders while
   PRELAUNCH=1, whatever the body class.
   --------------------------------------------------------------------------- */
.hm-prelaunch-bar {
  background: #000080; color: #fff; text-align: center;
  font: 600 .875rem/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  padding: .55rem 1rem;
}
.hm-prelaunch-bar a { color: #fff !important; text-decoration: underline; text-underline-offset: 2px; margin-left: .25rem; }
.hm-prelaunch-bar a:hover { color: #dbe7ff; }

body.hellomula-content .ti-ea__list { margin: 0 0 1.5rem; padding-left: 1.15rem; display: grid; gap: .75rem; color: var(--ti-ink); }
body.hellomula-content .ti-ea__fine { font-size: .8125rem; color: var(--ti-muted); line-height: 1.6; margin-top: 1rem; }
body.hellomula-content .ti-ea__submit { width: 100%; justify-content: center; }
body.hellomula-content .ti-ea__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
body.hellomula-content .ti-ea__msg { padding: .75rem 1rem; border-radius: 8px; font-size: .9375rem; margin-bottom: 1.25rem; }
body.hellomula-content .ti-ea__msg--ok  { background: #ecfdf3; color: #14532d; border: 1px solid #bbf7d0; }
body.hellomula-content .ti-ea__msg--err { background: #fef2f2; color: #7f1d1d; border: 1px solid #fecaca; }
/* Phones: the form first, the pitch after it. */
@media (max-width: 760px) {
  body.hellomula-content .ti-ea .ti-contact__grid { display: flex; flex-direction: column; }
  body.hellomula-content .ti-ea .ti-contact__form { order: -1; margin-bottom: 2rem; }
}

/* =====================================================================
   TUTORIAL VIDEOS (inc/tutorial-videos.php, assets/js/tutorial-video.js)
   Our poster until clicked, then YouTube's player in the same 16:9 box.
   ===================================================================== */
:is(body.hellomula-landing, body.hellomula-content) .ti-video { margin: 0; }
:is(body.hellomula-landing, body.hellomula-content) .ti-video__play,
:is(body.hellomula-landing, body.hellomula-content) .ti-video__frame {
  display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0;
  border-radius: var(--ti-radius-md); box-shadow: var(--ti-shadow-md); background: var(--ti-navy);
}
:is(body.hellomula-landing, body.hellomula-content) .ti-video__play { position: relative; overflow: hidden; cursor: pointer; }
:is(body.hellomula-landing, body.hellomula-content) .ti-video__play img {
  display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease;
}
:is(body.hellomula-landing, body.hellomula-content) .ti-video__play:hover img { transform: scale(1.02); }
/* Bottom-left, not centred: the posters carry their title on the left half
   and Maya on the right, so a centred button covered the title. */
:is(body.hellomula-landing, body.hellomula-content) .ti-video__icon {
  position: absolute; left: 4.5%; bottom: 6%; width: clamp(40px, 10%, 64px); height: auto; aspect-ratio: 68 / 48;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.35)); transition: transform .2s ease; transform-origin: left bottom;
}
:is(body.hellomula-landing, body.hellomula-content) .ti-video__icon svg { width: 100%; height: 100%; display: block; }
:is(body.hellomula-landing, body.hellomula-content) .ti-video__play:hover .ti-video__icon,
:is(body.hellomula-landing, body.hellomula-content) .ti-video__play:focus-visible .ti-video__icon { transform: scale(1.1); }
:is(body.hellomula-landing, body.hellomula-content) .ti-video__play:focus-visible { outline: 3px solid var(--ti-bright-blue); outline-offset: 3px; }
:is(body.hellomula-landing, body.hellomula-content) .ti-video__length {
  position: absolute; right: 12px; bottom: 12px; padding: 3px 8px; border-radius: 6px;
  background: rgba(0,0,0,.75); color: #fff; font-size: .8rem; font-weight: 600; letter-spacing: .02em;
}
:is(body.hellomula-landing, body.hellomula-content) .ti-video figcaption {
  margin-top: .75rem; font-size: .9rem; color: var(--ti-muted); text-align: center;
}
:is(body.hellomula-landing, body.hellomula-content) .ti-video figcaption strong { color: var(--ti-ink); }

/* In running text (how-it-works, user guide) */
body.hellomula-content .ti-prose .ti-video { margin: 2rem 0 2.25rem; }

/* Homepage: "See HelloMula in 30 seconds" band */
body.hellomula-landing .ti-video-band { padding: 4.5rem 0; background: var(--ti-bg); }
body.hellomula-landing .ti-video-band__grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem; align-items: center;
}
body.hellomula-landing .ti-video-band h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--ti-navy); margin: 0 0 .75rem; }
body.hellomula-landing .ti-video-band p { color: var(--ti-muted); margin: 0 0 1.5rem; }
body.hellomula-landing .ti-video-band__links { font-size: .95rem; }
@media (max-width: 880px) {
  body.hellomula-landing .ti-video-band__grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* A video under a feature group's heading */
body.hellomula-content .ti-feature-group__video { max-width: 760px; margin: 0 auto 2.75rem; }
body.hellomula-content .ti-feature-group__more { text-align: center; font-size: .92rem; color: var(--ti-muted); margin: -1.75rem 0 2.75rem; }

/* Two videos side by side (decision lab) */
body.hellomula-content .ti-video-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 2rem; }
@media (max-width: 780px) { body.hellomula-content .ti-video-pair { grid-template-columns: 1fr; } }

/* Early access: trailer above the "what you get" list */
body.hellomula-content .ti-ea .ti-video { margin: 0 0 2rem; }

/* /tutorials/ */
body.hellomula-content .ti-tutorials { padding: 3.5rem 0 4.5rem; }
body.hellomula-content .ti-tutorials__group { margin-bottom: 3.5rem; }
body.hellomula-content .ti-tutorials__group > h2 { color: var(--ti-navy); font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin: 0 0 .4rem; }
body.hellomula-content .ti-tutorials__group > p { color: var(--ti-muted); margin: 0 0 2rem; }
body.hellomula-content .ti-tutorial {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem; align-items: start;
  padding: 2rem 0; border-top: 1px solid var(--ti-border);
}
body.hellomula-content .ti-tutorial h3 { margin: 0 0 .5rem; font-size: 1.2rem; color: var(--ti-ink); }
body.hellomula-content .ti-tutorial__num { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .08em; color: var(--ti-red); text-transform: uppercase; margin-bottom: .25rem; }
body.hellomula-content .ti-tutorial p { color: var(--ti-muted); margin: 0 0 1rem; }
body.hellomula-content .ti-tutorial__note { font-size: .9rem; background: var(--ti-bg); border-radius: var(--ti-radius-sm); padding: .6rem .8rem; }
body.hellomula-content .ti-tutorial__chapters { list-style: none; margin: 0 0 1rem; padding: 0; font-size: .92rem; }
body.hellomula-content .ti-tutorial__chapters li { margin: .2rem 0; }
body.hellomula-content .ti-tutorial__chapters a { display: inline-flex; gap: .6rem; }
body.hellomula-content .ti-tutorial__chapters time { min-width: 2.6rem; color: var(--ti-muted); font-variant-numeric: tabular-nums; }
body.hellomula-content .ti-tutorial details { font-size: .92rem; }
body.hellomula-content .ti-tutorial summary { cursor: pointer; color: var(--ti-bright-blue); font-weight: 600; }
body.hellomula-content .ti-tutorial__transcript h4 { font-size: .9rem; margin: 1rem 0 .25rem; color: var(--ti-ink); }
body.hellomula-content .ti-tutorial__transcript p { color: var(--ti-ink); line-height: 1.6; }
@media (max-width: 860px) {
  body.hellomula-content .ti-tutorial { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* "Watch" links under FAQ answers */
body.hellomula-content .ti-faq-watch { margin: .9rem 0 0; }
body.hellomula-content .ti-watch { font-weight: 600; font-size: .92rem; }
body.hellomula-content .ti-watch span[aria-hidden] { color: var(--ti-red); margin-right: .2rem; }
body.hellomula-content .ti-watch__length { color: var(--ti-muted); font-weight: 400; }