/* Compact page heroes (owner, 22 Oct. 2026): one rule for every navy page hero. A short title, one sentence, at most
   one line of guarantees; the first useful content shows in the first screen. Desktop ~180-220 px, phone ~260-320 px.
   Layout only: the navy style, the eyebrow and every guarantee stay. Loaded after zz_futello.css on purpose. */

.brand-continuity :is(.offers-hero, .strategy-finder__hero, .information-hero, .guides-index-header) {
  gap: 24px 32px;
  align-items: center;
  margin-block: 12px 24px;
  padding: 26px 32px;
}

.brand-continuity :is(.offers-hero, .strategy-finder__hero, .information-hero, .guides-index-header, .persona-v4-selector__intro) h1,
.fintech-site.brand-continuity .offers-hero h1 {
  max-width: none;
  margin: 4px 0 8px;
  font-size: clamp(1.75rem, 1.25rem + 1vw, 2.25rem);
  line-height: 1.1;
}

.brand-continuity :is(.offers-hero__intro, .strategy-finder__hero .page-intro, .information-hero .guide-article-intro,
  .guides-index-header__copy > p:last-child, .persona-v4-selector__intro > p:not(.eyebrow)) {
  max-width: 90ch;
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
}

.brand-continuity :is(.offers-hero, .strategy-finder__hero, .information-hero, .guides-index-header) :is(.eyebrow, .guide-meta, .programs-hero__eyebrow) {
  margin: 0 0 4px;
}

/* The decorative icon above the title is dropped; the eyebrow already names the page. */
.brand-continuity .information-hero__icon { display: none; }
.brand-continuity .information-hero__copy { max-width: none; }

/* Photos never set the height: a short band beside the copy on desktop, none on phone. */
.brand-continuity :is(.information-hero--illustrated, .guides-index-header) { grid-template-columns: minmax(0, 1fr) minmax(0, 260px); }
.brand-continuity .strategy-finder__hero { grid-template-columns: minmax(0, 1fr); }
.brand-continuity :is(.information-hero__photo, .guides-index-header__photo) {
  width: 100%;
  height: 150px;
  min-height: 0;
  aspect-ratio: auto;
  object-fit: cover;
}

/* Guarantees: one small line, never a block of three. */
.brand-continuity .offers-trust-markers,
.offers-trust-markers {
  display: flex;
  flex-wrap: wrap;
  margin: 12px 0 0;
  gap: 4px 20px;
}
.offers-trust-markers li {
  display: inline-flex;
  grid-template-columns: none;
  gap: 6px;
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.4;
}
.offers-trust-markers .offers-page-icon { flex: 0 0 auto; width: 1rem; height: 1rem; }

/* Strategy finder (no photo): the three steps as one row; each step keeps its short guarantee under its title. */
.brand-continuity .strategy-finder__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 14px; gap: 12px; }
.brand-continuity .strategy-finder__steps small { line-height: 1.35; }

/* Profile and usage selectors: the intro reads as a hero, compact. */
.brand-continuity .persona-v4-selector__intro { padding-bottom: 0; }

@media (max-width: 760px) {
  .brand-continuity :is(.offers-hero, .strategy-finder__hero, .information-hero, .guides-index-header) {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin-block: 8px 20px;
    padding: 20px;
  }
  .brand-continuity :is(.offers-hero, .strategy-finder__hero, .information-hero, .guides-index-header, .persona-v4-selector__intro) h1,
  .fintech-site.brand-continuity .offers-hero h1 {
    font-size: 1.375rem;
  }
  .brand-continuity :is(.offers-hero__intro, .strategy-finder__hero .page-intro, .information-hero .guide-article-intro,
    .guides-index-header__copy > p:last-child, .persona-v4-selector__intro > p:not(.eyebrow)) {
    font-size: .9375rem;
  }
  .brand-continuity :is(.information-hero__photo, .guides-index-header__photo) { display: none; }
  .brand-continuity .strategy-finder__steps { grid-template-columns: minmax(0, 1fr); gap: 6px; margin-top: 12px; }
  .brand-continuity .strategy-finder__steps li > span:last-child { line-height: 1.4; }
  .brand-continuity .strategy-finder__steps li > span:last-child > * { display: inline; margin: 0 4px 0 0; font-size: var(--text-xs); line-height: 1.4; }
  .brand-continuity .strategy-finder__steps strong { font-size: .8125rem; }
  .brand-continuity .strategy-finder__step-number { width: 1.35rem; height: 1.35rem; }
  /* On phone the guarantees flow as one small paragraph, separated by middots, without icons. */
  .brand-continuity .offers-trust-markers, .offers-trust-markers { display: block; margin-top: 10px; font-size: .75rem; line-height: 1.45; }
  .offers-trust-markers li { display: inline; font-size: .75rem; line-height: 1.45; }
  .offers-trust-markers li + li::before { content: "·"; margin: 0 6px; }
  .offers-trust-markers .offers-page-icon { display: none; }
}