@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap");

:root {
  --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: "Playfair Display", Georgia, serif;
  --background: 120 10% 98%;
  --foreground: 150 20% 10%;
  --card: 0 0% 100%;
  --card-foreground: 150 20% 10%;
  --primary: 152 44% 28%;
  --primary-foreground: 0 0% 100%;
  --muted: 140 10% 94%;
  --muted-foreground: 150 10% 42%;
  --accent: 145 30% 90%;
  --accent-foreground: 150 25% 18%;
  --destructive: 0 84% 60%;
  --border: 140 12% 88%;
  --input: 140 12% 88%;
  --ring: 152 44% 28%;
  --radius: .625rem;
  --shadow: 0 1px 2px rgb(0 0 0 / .05);
  --shadow-md: 0 8px 24px rgb(0 0 0 / .08);
}

* { box-sizing: border-box; border-color: hsl(var(--border)); }
html { -webkit-text-size-adjust: 100%; font-family: var(--font-sans); }
body { margin: 0; background: hsl(var(--background)); color: hsl(var(--foreground)); line-height: 1.5; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: transparent; border: 0; }
svg { display: block; }
img { max-width: 100%; display: block; }

.site-shell { min-height: 100vh; display: flex; flex-direction: column; }
.site-main { flex: 1; }
.container { width: 100%; max-width: 72rem; margin-inline: auto; padding-inline: 1rem; }
.container--narrow { max-width: 56rem; }
.section { padding-block: 3rem; }
.section--bottom { padding-top: 0; padding-bottom: 5rem; }
.section__header { margin-bottom: 2rem; }
.section__title { font-family: var(--font-serif); font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem); line-height: 1.2; font-weight: 600; margin: 0; }
.section__subtitle { margin: .5rem 0 0; color: hsl(var(--muted-foreground)); }

.site-header { position: sticky; top: 0; z-index: 50; background: hsl(var(--card) / .9); backdrop-filter: blur(12px); border-bottom: 1px solid hsl(var(--border)); }
.site-header__inner { height: 4rem; display: flex; align-items: center; justify-content: space-between; }
.brand, .footer-brand { display: inline-flex; align-items: center; gap: .625rem; }
.brand__mark, .footer-brand__mark { display: grid; place-items: center; border-radius: .5rem; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.brand__mark { width: 2rem; height: 2rem; }
.footer-brand__mark { width: 1.75rem; height: 1.75rem; }
.brand__name, .footer-brand__name { font-family: var(--font-serif); font-weight: 600; color: hsl(var(--foreground)); }
.brand__name { font-size: 1.125rem; letter-spacing: -.01em; }
.site-nav { display: none; align-items: center; gap: .25rem; }
.site-nav__link { display: inline-flex; padding: .5rem .75rem; border-radius: .375rem; font-size: .875rem; font-weight: 500; color: hsl(var(--muted-foreground)); transition: background-color .2s, color .2s; }
.site-nav__link:hover { color: hsl(var(--foreground)); background: hsl(var(--accent) / .5); }
.site-nav__link--active { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.site-nav-toggle { width: 2.25rem; height: 2.25rem; display: inline-flex; align-items: center; justify-content: center; border-radius: .375rem; color: hsl(var(--foreground)); }
.site-nav-toggle:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }

.hero { border-bottom: 1px solid hsl(var(--border)); background: linear-gradient(to bottom, hsl(var(--accent) / .6), hsl(var(--background))); }
.hero--home { background: linear-gradient(to bottom, hsl(var(--accent) / .6), hsl(var(--accent) / .3), hsl(var(--background))); }
.hero__container { padding-block: 3rem 4rem; }
.hero__container--large { padding-block: 4rem 6rem; }
.hero__content { max-width: 48rem; }
.eyebrow { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1.5rem; padding: .25rem .75rem; border-radius: 999px; background: hsl(var(--primary) / .1); color: hsl(var(--primary)); font-size: .875rem; font-weight: 500; }
.hero__title { margin: 0; font-family: var(--font-serif); font-size: clamp(1.875rem, 1.5rem + 1.5vw, 2.25rem); line-height: 1.15; font-weight: 600; letter-spacing: -.02em; }
.hero__title--large { font-size: clamp(2.25rem, 1.6rem + 3vw, 3.75rem); font-weight: 700; }
.hero__lead { max-width: 42rem; margin: 1rem 0 0; color: hsl(var(--muted-foreground)); font-size: 1.125rem; line-height: 1.65; }

.button-row, .tab-list { display: flex; flex-wrap: wrap; gap: .75rem; }
.button-row { margin-top: 2rem; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: .375rem; font-weight: 500; transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s; }
.button--primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); box-shadow: var(--shadow); }
.button--primary:hover { background: hsl(var(--primary) / .9); }
.button--secondary { border: 1px solid hsl(var(--input)); background: transparent; box-shadow: var(--shadow); }
.button--secondary:hover, .button--ghost:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.button--ghost { color: hsl(var(--muted-foreground)); }
.button--large { height: 2.5rem; padding-inline: 2rem; font-size: .875rem; }
.button--small { height: 2rem; padding-inline: .75rem; font-size: .75rem; }

.feature-grid, .footer__grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.two-column-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.compact-grid, .stat-grid { display: grid; grid-template-columns: 1fr; gap: .75rem; }
.feature-card, .card, .news-card, .broker-card, .accordion__item { background: hsl(var(--card)); color: hsl(var(--card-foreground)); border: 1px solid hsl(var(--border)); border-radius: .75rem; box-shadow: var(--shadow); }
.broker-card, .news-card { overflow: hidden; }
.broker-card { transition: box-shadow .2s; }
.broker-card:hover { box-shadow: var(--shadow-md); }
.card--spaced { margin-bottom: 2.5rem; }
.card__body, .feature-card { padding: 1.5rem; }
.card__body--large { padding: 1.5rem; }
.card__title, .subheading { margin: 0 0 .375rem; font-weight: 600; color: hsl(var(--foreground)); }
.card__heading, .content-heading, .cta-box__title { margin: 0 0 1.25rem; font-family: var(--font-serif); font-size: 1.25rem; line-height: 1.25; font-weight: 600; }
.content-heading--large { font-size: clamp(1.25rem, 1.1rem + .7vw, 1.5rem); margin-bottom: .75rem; }
.card__separator { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid hsl(var(--border)); }
.feature-card__icon { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; margin-bottom: 1rem; border-radius: .5rem; background: hsl(var(--accent)); }

.broker-card__row { display: flex; flex-direction: column; gap: 1rem; }
.broker-card__main { display: flex; align-items: center; gap: 1rem; flex: 1; min-width: 0; }
.broker-card__logo { flex: 0 0 auto; width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: .5rem; background: hsl(var(--accent)); }
.broker-card__logo-text { color: hsl(var(--primary)); font-size: 1.125rem; font-weight: 700; }
.broker-card__title { margin: 0; font-size: 1.125rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.broker-card__description { margin: 0; color: hsl(var(--muted-foreground)); font-size: .875rem; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.broker-card__metrics { display: flex; flex-shrink: 0; gap: 1.5rem; }
.broker-card__metric { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.metric__label { margin: 0 0 .125rem; color: hsl(var(--muted-foreground)); font-size: .75rem; }
.metric__value { margin: 0; color: hsl(var(--foreground)); font-size: .875rem; font-weight: 500; }
.broker-card__details { padding: 1.25rem; border-top: 1px solid hsl(var(--border)); background: hsl(var(--muted) / .3); }

.accordion__item { padding-inline: 1.25rem; box-shadow: none; }
.accordion__trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; padding-block: 1rem; text-align: left; color: hsl(var(--foreground)); font-size: .875rem; font-weight: 500; }
.accordion__panel { overflow: hidden; font-size: .875rem; }
.accordion__content { padding: 0 0 1rem; color: hsl(var(--muted-foreground)); font-size: .875rem; line-height: 1.65; }

.news-card__title { margin: 0 0 .5rem; font-family: var(--font-serif); font-size: clamp(1.125rem, 1rem + .5vw, 1.25rem); font-weight: 600; }
.news-card__summary { margin: 0 0 .75rem; color: hsl(var(--muted-foreground)); font-size: .875rem; line-height: 1.65; }
.meta-row { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.meta { display: inline-flex; align-items: center; gap: .375rem; color: hsl(var(--muted-foreground)); font-size: .75rem; }

.pill { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1rem; border-radius: 999px; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); color: hsl(var(--muted-foreground)); font-size: .875rem; font-weight: 500; }
.pill:hover { background: hsl(var(--accent)); color: hsl(var(--foreground)); }
.pill--active { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: hsl(var(--primary)); box-shadow: var(--shadow); }
.scenario-card__header { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; }
.scenario-card__icon { flex: 0 0 auto; width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: .75rem; background: hsl(var(--accent)); }
.scenario-card__title-row { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.scenario-card__title { margin: 0; font-family: var(--font-serif); font-size: clamp(1.25rem, 1.1rem + .7vw, 1.5rem); font-weight: 600; }
.scenario-card__subtitle { margin: .25rem 0 0; color: hsl(var(--muted-foreground)); }
.badge { display: inline-flex; align-items: center; border-radius: .375rem; padding: .125rem .625rem; background: hsl(var(--primary) / .1); color: hsl(var(--primary)); font-size: .75rem; font-weight: 600; }
.highlight-box { padding: 1.25rem; border-radius: .75rem; border: 1px solid hsl(var(--border)); background: hsl(var(--accent) / .5); }

.stat-box { padding: 1rem; border-radius: .5rem; border: 1px solid hsl(var(--border)); background: hsl(var(--muted) / .5); }
.stat-box__label { margin: 0 0 .25rem; color: hsl(var(--muted-foreground)); font-size: .75rem; font-weight: 500; }
.link-list > * + *, .stack--md > * + * { margin-top: .5rem; }
.stack--lg > * + * { margin-top: 2rem; }
.stack--xl > * + * { margin-top: 1.5rem; }
.check-list__item, .list-row { display: flex; align-items: flex-start; gap: .625rem; }
.list-row { font-size: .875rem; }
.cta-box { margin-top: 3.5rem; padding: 2rem; border-radius: .75rem; border: 1px solid hsl(var(--border)); background: hsl(var(--accent) / .5); text-align: center; }
.cta-box__text { margin: 0 0 1.25rem; color: hsl(var(--muted-foreground)); }

.site-footer { margin-top: auto; border-top: 1px solid hsl(var(--border)); background: hsl(var(--card)); }
.footer__container { padding-block: 2.5rem; }
.footer-brand { margin-bottom: .75rem; }
.footer__heading { margin: 0 0 .75rem; color: hsl(var(--foreground)); font-size: .875rem; font-weight: 600; }
.footer__link { display: block; color: hsl(var(--muted-foreground)); font-size: .875rem; transition: color .2s; }
.footer__link:hover { color: hsl(var(--foreground)); }
.footer__bottom { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid hsl(var(--border)); text-align: center; }

.icon { flex-shrink: 0; }
.icon--brand { width: 1rem; height: 1rem; }
.icon--footer-brand { width: .875rem; height: .875rem; }
.icon--menu { width: 1.25rem; height: 1.25rem; }
.icon--xs, .icon--inline-end-sm { width: .875rem; height: .875rem; }
.icon--primary, .icon--pill, .icon--inline-end { width: 1rem; height: 1rem; }
.icon--primary-lg { width: 1.5rem; height: 1.5rem; }
.icon--primary, .icon--primary-lg, .icon--check, .icon--pill { color: hsl(var(--primary)); }
.icon--danger { color: hsl(var(--destructive)); }
.icon--check, .icon--danger { width: 1rem; height: 1rem; margin-top: .125rem; }
.icon--meta { width: .75rem; height: .75rem; }
.icon--inline-end { margin-left: .5rem; }
.icon--inline-end-sm { margin-left: .375rem; }

.text-muted { color: hsl(var(--muted-foreground)); }
.text-primary { color: hsl(var(--primary)); }
.text-foreground { color: hsl(var(--foreground)); }
.text-sm { font-size: .875rem; }
.text-xs { font-size: .75rem; }
.text-relaxed { line-height: 1.65; }
.text-center { text-align: center; }
.strong-text { font-weight: 600; color: hsl(var(--foreground)); }
.block { display: block; }
.flex { display: flex; }
.min-w-0 { min-width: 0; }
.no-padding { padding: 0; }
.mt-md { margin-top: 1rem; }
.link { color: hsl(var(--primary)); }
.link:hover { text-decoration: underline; }
.link--small { display: inline-flex; align-items: center; gap: .375rem; font-size: .75rem; }
.link--spaced { margin-top: 1rem; font-weight: 500; }
.toast-region { position: fixed; top: 0; z-index: 100; display: flex; width: 100%; max-height: 100vh; flex-direction: column-reverse; padding: 1rem; }

.note-box { margin-top: 2rem; padding: 1.25rem; border: 1px solid hsl(var(--border)); border-radius: .75rem; background: hsl(var(--muted) / .5); }
.detail-heading { margin: 0 0 .75rem; color: hsl(var(--foreground)); font-size: .875rem; font-weight: 600; }
.faq-sections { display: grid; gap: 2.5rem; }
.icon--link { width: .75rem; height: .75rem; }

@media (min-width: 640px) {
  .container { padding-inline: 1.5rem; }
  .broker-card__row { flex-direction: row; align-items: center; }
  .broker-card__metrics { gap: 2rem; }
  .card__body, .broker-card__details { padding: 1.5rem; }
  .card__body--large { padding: 2rem; }
  .compact-grid, .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .site-nav { display: flex; }
  .site-nav-toggle { display: none; }
  .feature-grid, .footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .two-column-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .site-nav.is-open { position: absolute; left: 1rem; right: 1rem; top: calc(100% + .5rem); display: grid; gap: .25rem; padding: .5rem; border: 1px solid hsl(var(--border)); border-radius: .75rem; background: hsl(var(--card)); box-shadow: var(--shadow-md); }
  .site-nav.is-open .site-nav__link { width: 100%; }
}
/* Accordion: FAQ */
.accordion__item { cursor: pointer; transition: box-shadow .2s ease, border-color .2s ease; }
.accordion__item[data-state="open"] { box-shadow: 0 1px 2px hsl(var(--foreground) / .05); }
.accordion__trigger { cursor: pointer; background: transparent; border: 0; font: inherit; }
.accordion__trigger:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 4px; border-radius: .375rem; }
.accordion__icon { transition: transform .2s ease; }
.accordion__trigger[data-state="open"] .accordion__icon { transform: rotate(180deg); }
.accordion__panel[hidden] { display: none; }


/* FAQ accordion typography/layout preservation */
.accordion__trigger {
  display: flex;
  flex: 1;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding-block: 1rem;
  text-align: left;
  color: hsl(var(--foreground));
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.25rem;
}
.accordion__trigger:hover { text-decoration: none; }
.accordion__icon { width: 1rem; height: 1rem; color: hsl(var(--muted-foreground)); flex-shrink: 0; }

/* Broker card disclosure */
.broker-card[data-state="open"] { box-shadow: var(--shadow-md); }
.broker-card__details[hidden] { display: none; }
.broker-card button[aria-expanded] .icon--inline-end { transition: transform .2s ease; }
.broker-card button[aria-expanded="open"] .icon--inline-end,
.broker-card button[aria-expanded="true"] .icon--inline-end { transform: rotate(180deg); }

/* WordPress theme integration layer: keep the static design intact inside WP. */
body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .site-header { top: 46px; } }

.site-nav__list,
.footer__list { list-style: none; margin: 0; padding: 0; }
.site-nav__list { display: flex; align-items: center; gap: .25rem; }
.site-nav__list li { margin: 0; }
.site-nav__list a { display: inline-flex; align-items: center; border-radius: .5rem; padding: .5rem .75rem; color: hsl(var(--muted-foreground)); font-size: .875rem; font-weight: 500; transition: color .2s ease, background-color .2s ease; }
.site-nav__list a:hover,
.site-nav__list .current-menu-item > a,
.site-nav__list .current_page_item > a { background: hsl(var(--accent)); color: hsl(var(--foreground)); }
.footer__list { display: grid; gap: .5rem; }
.footer__list a { color: hsl(var(--muted-foreground)); font-size: .875rem; }
.footer__list a:hover { color: hsl(var(--foreground)); }

.site-main > article,
.entry-content,
.wp-site-blocks,
.is-root-container { margin: 0; padding: 0; }
.entry-content > * { margin-block-start: 0; }
.entry-content > * + * { margin-block-start: 0; }
.wp-block-group,
.wp-block-post-content { margin: 0; }

.wp-block-depotcompass-hero,
.wp-block-depotcompass-broker-card,
.wp-block-depotcompass-faq-accordion,
.wp-block-depotcompass-scenario-tabs { margin: 0; }

/* Match original card behaviour when WP wraps custom blocks. */
.wp-block-depotcompass-broker-card + .wp-block-depotcompass-broker-card { margin-top: 1rem; }

@media (max-width: 767px) {
  .site-nav { position: absolute; left: 1rem; right: 1rem; top: calc(100% + .5rem); display: none; border: 1px solid hsl(var(--border)); border-radius: .75rem; background: hsl(var(--card)); box-shadow: 0 18px 40px hsl(var(--foreground) / .12); padding: .75rem; }
  .site-nav.is-open { display: block; }
  .site-nav__list { display: grid; gap: .25rem; }
  .site-nav__list a { width: 100%; justify-content: flex-start; }
}

/* Styling pass 2: Hero and section rhythm */
.site-main {
  background: hsl(var(--background));
}

.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid hsl(var(--border));
  background:
    radial-gradient(circle at top left, hsl(var(--primary) / .08), transparent 32rem),
    linear-gradient(180deg, hsl(var(--accent) / .62) 0%, hsl(var(--background)) 100%);
}
.hero--home {
  background:
    radial-gradient(circle at 18% 16%, hsl(var(--primary) / .12), transparent 28rem),
    radial-gradient(circle at 85% 24%, hsl(var(--accent) / .9), transparent 24rem),
    linear-gradient(180deg, hsl(var(--accent) / .72) 0%, hsl(var(--accent) / .28) 52%, hsl(var(--background)) 100%);
}
.hero__container {
  display: flex;
  align-items: center;
  min-height: 18rem;
  padding-block: 3.5rem 4.5rem;
}
.hero__container--large {
  min-height: 27rem;
  padding-block: 5rem 6.5rem;
}
.hero__content {
  width: 100%;
  max-width: 52rem;
}
.hero__title {
  max-width: 48rem;
  text-wrap: balance;
}
.hero__lead {
  max-width: 44rem;
  text-wrap: pretty;
}
.hero .button-row {
  align-items: center;
}

.section {
  padding-block: 4rem;
}
.section--bottom {
  padding-top: 0;
  padding-bottom: 5.5rem;
}
.section + .section {
  padding-top: 1rem;
}
.section__header {
  max-width: 44rem;
  margin-bottom: 2rem;
}
.container--narrow.section,
.container.container--narrow.section {
  padding-block: 4rem 5.5rem;
}

.feature-grid {
  align-items: stretch;
}
.feature-card {
  min-height: 100%;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.feature-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: hsl(var(--primary) / .22);
}
.feature-card .card__title {
  margin-bottom: .5rem;
}

.card,
.feature-card,
.news-card,
.broker-card,
.accordion__item {
  border-radius: .875rem;
}
.card__body--large {
  padding: 1.75rem;
}
.cta-box {
  margin-top: 4rem;
  padding: 2rem;
}

/* Gutenberg wrapper normalization for page patterns and custom blocks */
.entry-content > .wp-block-depotcompass-hero,
.entry-content > .wp-block-depotcompass-scenario-tabs,
.entry-content > .wp-block-group,
.entry-content > section,
.entry-content > div {
  margin-top: 0;
}
.wp-block-depotcompass-hero .hero,
.wp-block-depotcompass-scenario-tabs .container.section {
  margin: 0;
}
.wp-block-depotcompass-hero + .wp-block-group,
.wp-block-depotcompass-hero + section,
.hero + .container.section {
  margin-top: 0;
}

@media (min-width: 640px) {
  .section { padding-block: 4.5rem; }
  .section--bottom { padding-bottom: 6rem; }
  .hero__container { padding-block: 4rem 5rem; }
  .hero__container--large { padding-block: 5.75rem 7rem; }
  .card__body--large { padding: 2rem; }
  .cta-box { padding: 2.5rem; }
}

@media (min-width: 1024px) {
  .container { padding-inline: 2rem; }
  .hero__container--large { min-height: 31rem; padding-block: 6.5rem 8rem; }
  .hero__title--large { max-width: 52rem; }
  .section { padding-block: 5rem; }
  .section--bottom { padding-bottom: 7rem; }
  .section__header { margin-bottom: 2.25rem; }
}

@media (max-width: 639px) {
  .hero__container,
  .hero__container--large {
    min-height: auto;
    padding-block: 3rem 3.75rem;
  }
  .hero__lead {
    font-size: 1rem;
    line-height: 1.6;
  }
  .button-row {
    gap: .625rem;
  }
  .button-row .button {
    width: 100%;
  }
  .section {
    padding-block: 3rem;
  }
  .section--bottom {
    padding-bottom: 4rem;
  }
  .section__header {
    margin-bottom: 1.5rem;
  }
  .feature-card,
  .card__body,
  .card__body--large {
    padding: 1.25rem;
  }
  .cta-box {
    margin-top: 3rem;
    padding: 1.5rem;
  }
}

/* Styling pass 2.1: Hero rollback
   The hero block must keep the markup/visual behaviour from Styling Pass 1.
   Section rhythm changes remain, but hero-specific overrides from pass 2 are neutralized. */
.hero {
  position: static;
  overflow: visible;
  border-bottom: 1px solid hsl(var(--border));
  background: linear-gradient(to bottom, hsl(var(--accent) / .6), hsl(var(--background)));
}
.hero--home {
  background: linear-gradient(to bottom, hsl(var(--accent) / .6), hsl(var(--accent) / .3), hsl(var(--background)));
}
.hero__container {
  display: block;
  min-height: 0;
  padding-block: 3rem 4rem;
}
.hero__container--large {
  min-height: 0;
  padding-block: 4rem 6rem;
}
.hero__content {
  width: auto;
  max-width: 48rem;
}
.hero__title {
  max-width: none;
  text-wrap: initial;
}
.hero__title--large {
  max-width: none;
}
.hero__lead {
  max-width: 42rem;
  text-wrap: initial;
}
.hero .button-row {
  align-items: initial;
}

@media (min-width: 640px) {
  .hero__container { padding-block: 3rem 4rem; }
  .hero__container--large { padding-block: 4rem 6rem; }
}
@media (min-width: 1024px) {
  .hero__container--large { min-height: 0; padding-block: 4rem 6rem; }
  .hero__title--large { max-width: none; }
}
@media (max-width: 639px) {
  .hero__container,
  .hero__container--large {
    min-height: 0;
    padding-block: 3rem 4rem;
  }
  .hero__lead {
    font-size: 1.125rem;
    line-height: 1.65;
  }
  .button-row .button {
    width: auto;
  }
}


/* Styling pass 3.1: Broker cards – surgical fix based on static HTML reference.
   Header/Hero/Sections are intentionally not touched here. */
.wp-block-depotcompass-broker-card,
.stack > .wp-block-depotcompass-broker-card,
.stack > .broker-card {
  width: 100%;
  margin: 0;
}

.stack,
.stack--md {
  display: grid;
  gap: 1rem;
}

.broker-card {
  width: 100%;
  overflow: hidden;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: .875rem;
  box-shadow: var(--shadow);
  transition: box-shadow .2s ease, border-color .2s ease;
}

.broker-card:hover,
.broker-card[data-state="open"] {
  box-shadow: var(--shadow-md);
  border-color: hsl(var(--primary) / .18);
}

.broker-card .card__body {
  padding: 1.25rem;
}

.broker-card__row {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  cursor: pointer;
}

.broker-card__main {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1 1 auto;
  min-width: 0;
}

.broker-card__metrics {
  display: flex;
  flex-shrink: 0;
  gap: 1.5rem;
}

.broker-card__metric {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.broker-card__metric .button {
  white-space: nowrap;
}

.broker-card__details {
  padding: 1.25rem;
  border-top: 1px solid hsl(var(--border));
  background: hsl(var(--muted) / .3);
}

.broker-card__details[hidden] {
  display: none !important;
}

.broker-card button[aria-expanded] .icon--inline-end {
  transition: transform .2s ease;
}

.broker-card button[aria-expanded="true"] .icon--inline-end {
  transform: rotate(180deg);
}

@media (min-width: 768px) {
  .broker-card .card__body,
  .broker-card__details {
    padding: 1.5rem;
  }

  .broker-card__row {
    flex-direction: row;
    align-items: center;
  }

  .broker-card__metrics {
    gap: 2rem;
  }

  .broker-card__metric {
    justify-content: flex-end;
  }
}

@media (max-width: 767px) {
  .broker-card__main {
    align-items: flex-start;
  }

  .broker-card__metrics {
    width: 100%;
  }

  .broker-card__metric .button {
    flex: 1 1 auto;
  }
}


/* Gutenberg block additions: structural only */
.broker-grid {
  display: grid;
  gap: 1rem;
}
.broker-grid > .wp-block-depotcompass-broker-card,
.broker-grid > .broker-card {
  width: 100%;
}
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
}
.button-row--center {
  justify-content: center;
}
.highlight-box--tip {
  background: hsl(var(--accent) / .5);
}
.highlight-box--warning {
  background: hsl(var(--destructive) / .08);
}


/* Block additions: stable button styles for Hero/CTA and additional card variants */
.hero .button-row,
.cta-box .button-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
}
.hero .button-row { justify-content: flex-start; }
.cta-box .button-row { justify-content: center; }
.hero .button,
.cta-box .button,
.wp-block-depotcompass-hero .button,
.wp-block-depotcompass-cta-section .button {
  display: inline-flex;
  width: auto;
  min-height: 2.5rem;
  padding: .625rem 1rem;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.hero .button--large,
.wp-block-depotcompass-hero .button--large {
  min-height: 2.75rem;
  padding-inline: 2rem;
}
.highlight-box--highlight {
  background: hsl(var(--primary) / .08);
  border-color: hsl(var(--primary) / .25);
}
.highlight-box--muted {
  background: hsl(var(--muted));
}
.facts-card .link-list { margin-top: .75rem; }
.news-card__meta {
  margin: 0 0 .5rem;
  color: hsl(var(--muted-foreground));
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.wp-block-depotcompass-feature-grid,
.wp-block-depotcompass-news-grid {
  width: 100%;
}
.wp-block-depotcompass-feature-card,
.wp-block-depotcompass-news-card {
  min-width: 0;
}


/* WordPress content rhythm for native/core blocks that are not section-based.
   Custom DepotCompass blocks render their own section/container wrappers. */
.entry-content > :where(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, figure, table):not(.alignfull):not(.alignwide) {
  max-width: var(--container-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
.entry-content > :where(p, ul, ol, blockquote):not(.alignfull):not(.alignwide) {
  color: hsl(var(--muted-foreground));
  line-height: 1.7;
}
.entry-content > :where(p, ul, ol, blockquote):not(:first-child) { margin-top: 1rem; }
.entry-content > :where(h2, h3, h4):not(:first-child) { margin-top: 2.5rem; }
@media (min-width: 640px) {
  .entry-content > :where(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, figure, table):not(.alignfull):not(.alignwide) {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* Broker Card: logo upload and offer status variants */
.broker-card--published {
  border-color: hsl(var(--primary));
}
.broker-card--planned {
  border-color: hsl(35 92% 48%);
}
.broker-card__logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: .375rem;
}
.broker-card__status {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  width: fit-content;
  margin-bottom: .375rem;
  padding: .125rem .5rem;
  border-radius: 999px;
  font-size: .6875rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.broker-card__status-icon {
  display: inline-grid;
  place-items: center;
  width: .875rem;
  height: .875rem;
  border-radius: 999px;
  font-size: .6875rem;
  font-weight: 800;
  line-height: 1;
}
.broker-card__status--published {
  background: hsl(var(--primary) / .12);
  color: hsl(var(--primary));
}
.broker-card__status--planned {
  background: hsl(35 92% 48% / .14);
  color: hsl(30 92% 34%);
}
.broker-card__status--unknown {
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
}
.broker-card__status--published .broker-card__status-icon {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}
.broker-card__status--planned .broker-card__status-icon {
  background: hsl(35 92% 48%);
  color: white;
}
.broker-card__status--unknown .broker-card__status-icon {
  background: hsl(var(--muted-foreground));
  color: hsl(var(--card));
}