/* Shared by every atlas page, from the Tech Intelligence redesign: header, hero stage, cards and the firmable.ai footer. */
:root {
  --brand-ember: #f15b06; --brand-flame: #913704; --brand-ember-50: #fff1e8;
  --brand-ink: #181d27; --brand-fg-2: #4a5060; --brand-fg-3: #6b7280; --brand-line: #e9eaeb; --brand-line-2: #d4d7dc;
  --brand-subtle: #f6f7f8; --brand-twilight: #a48afb;
  --brand-display: Figtree, Inter, ui-sans-serif, sans-serif;
  --brand-body: Inter, ui-sans-serif, system-ui, sans-serif;
  --brand-gradient: linear-gradient(120deg, #f15b06 0%, #f15b06 46%, #d96a6b 68%, #b98bd8 86%, #a48afb 100%);
  --brand-stroke: linear-gradient(120deg, #f15b06 0%, #c57ac0 50%, #a48afb 100%);
  --brand-wash: linear-gradient(120deg, rgba(241, 91, 6, 0.10) 0%, rgba(241, 91, 6, 0.06) 30%, rgba(164, 138, 251, 0.08) 70%, rgba(164, 138, 251, 0.12) 100%);
  --brand-shadow-sm: 0 1px 2px rgba(14, 17, 24, 0.06), 0 1px 3px rgba(14, 17, 24, 0.04);
  --brand-shadow-xl: 0 24px 48px -12px rgba(14, 17, 24, 0.18), 0 8px 16px -8px rgba(14, 17, 24, 0.08);
  --brand-shadow-ember: 0 8px 24px -8px rgba(241, 91, 6, 0.45);
  --brand-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  /* The theme's buttons: a hairline and a soft lip, and on orange a white highlight fading down. */
  --brand-btn-shadow: 0 1px 2px rgba(10, 13, 18, 0.05), inset 0 -2px 0 rgba(10, 13, 18, 0.05), inset 0 0 0 1px rgba(10, 13, 18, 0.18);
  --brand-btn-shine: linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0));
  /* firmable.ai's hover for white and outline buttons: Brand-1-100 fill, 2px Brand-1-400 ring. */
  --brand-btn-hover-bg: #fcdecd;
  --brand-btn-hover-ring: inset 0 0 0 2px #f47c38;
  /* As firmable.ai's theme: from 992 wide, sizes are the 1440 design times min(100vw, 1800px) / 1440. */
  --brand-scale: 1px;
  /* The theme's --spacing-6xl, the header gutter: 24px, 32px from 768. */
  --brand-gutter: 24px;
  /* The theme's --spacing-4xl, the page column's padding: 16px, 20px from 768, 24px from 1024, 32px from 1200. */
  --brand-pad: 16px;
  --brand-wrap-max: 1280px;
  --brand-header-h: calc(80 * var(--brand-scale));
}
@media (min-width: 768px) { :root { --brand-gutter: 32px; --brand-pad: 20px; } }
@media (min-width: 1024px) { :root { --brand-pad: 24px; } }
@media (min-width: 1200px) { :root { --brand-pad: 32px; } }
@media (min-width: 1441px) { :root { --brand-pad: calc(32 * var(--brand-scale)); --brand-wrap-max: 1600px; } }
@media (min-width: 992px) {
  /* The header's content stops at 2440px, the theme's 2560px container less its padding. */
  :root { --brand-scale: calc(min(100vw, 1800px) / 1440); --brand-gutter: max(calc(48 * var(--brand-scale)), calc(50vw - 1220px)); }
}

/* Page frame: the stage on top, white content, the footer meeting the bottom of the window. */
body.brand-page { display: flex; flex-direction: column; min-height: 100vh; margin: 0; background: #fff; }
.brand-panel { box-sizing: border-box; width: 100%; flex: 1 0 auto; background: #fff; }
/* The theme's .container less its padding, written as a width so sections keep their own padding. */
.brand-wrap { box-sizing: border-box; width: calc(min(var(--brand-wrap-max), 100%) - 2 * var(--brand-pad)); margin: 0 auto; }

/* Hero stage, as firmable.ai's inner banner: ember ground, a slowly turning gradient and one faint diamond glow. */
/* The header sits above the stage in the page, so the stage slides up behind it by the header's height. */
/* Not overflow: hidden, which would crop the search suggestions; the art clips itself. z-index lifts them over the page. */
.brand-stage { position: relative; z-index: 1; isolation: isolate; background: var(--brand-ember); color: #fff; margin-top: calc(-1 * var(--brand-header-h)); padding: var(--brand-header-h) 0 64px; }
.brand-stage-art { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.brand-stage-disc { position: absolute; left: 50%; top: 0; width: 100%; min-width: 1440px; aspect-ratio: 1.25; transform: translateX(-50%) scaleY(0.85); transform-origin: 50% 0; }
.brand-stage-disc::before { content: ""; position: absolute; top: 50%; left: 50%; width: 149.7222%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -64.7%); background: linear-gradient(154.87deg, #bca3ff 27.43%, #ef5e11 40.72%, #f15b06 45.86%, #9c72dc 71.48%); animation: brand-turn 10s ease-out infinite alternate; }
@keyframes brand-turn { to { transform: translate(-50%, -64.7%) rotate(-180deg); } }
.brand-stage-frost { position: absolute; left: 50%; top: 0; width: 100%; height: 100%; transform: translateX(-50%); }
/* The theme's inner banner shows only its left glow; the two frosted shapes at the foot belong to its hero banner. */
.brand-stage-frost::before { content: ""; position: absolute; top: 43%; left: 23%; width: 87.4306%; aspect-ratio: 1; border-radius: min(6.6667%, 96px); background: rgba(229, 229, 229, 0.01); box-shadow: inset 0 0 200px #f6f6f6; opacity: 0.5; transform: translate(-50%, -50%) rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .brand-stage-disc::before { animation: none; } }
/* A stage taller than the disc: the disc fades into the brand gradient instead of ending in an arc. */
.brand-stage-long { background: var(--brand-gradient); }
.brand-stage-long .brand-stage-disc { -webkit-mask-image: linear-gradient(#000 55%, transparent 95%); mask-image: linear-gradient(#000 55%, transparent 95%); }

/* Site header. */
/* Sticky, as on firmable.ai: transparent over the stage, then white with dark text once the page scrolls. */
.brand-header { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; height: var(--brand-header-h); box-sizing: border-box; padding: 0 var(--brand-gutter); font-family: var(--brand-body); letter-spacing: -0.012em; transition: background 300ms var(--brand-ease), box-shadow 300ms var(--brand-ease); }
.brand-header.is-stuck { background: #fff; box-shadow: 0 8px 24px -4px rgba(24, 39, 75, 0.08), 0 6px 12px -6px rgba(24, 39, 75, 0.12); }
.brand-logo { display: flex; }
.brand-logo img { display: block; width: auto; height: 30px; }
.brand-header .brand-logo img, .brand-footer .brand-logo img { height: calc(36 * var(--brand-scale)); }
.brand-header .brand-logo-dark, .brand-header:is(.is-stuck, .is-open) .brand-logo-white { display: none; }
.brand-header:is(.is-stuck, .is-open) .brand-logo-dark { display: block; }
.brand-nav { display: flex; align-items: center; gap: calc(14 * var(--brand-scale)); margin-left: calc(54 * var(--brand-scale)); }
.brand-nav a, .brand-actions a { font: 500 calc(16 * var(--brand-scale))/calc(24 * var(--brand-scale)) var(--brand-body); color: #feefe6; text-decoration: none; padding: 0 2px; }
.brand-nav a:hover { color: #fff; }
/* The theme pads plain links 18px on the right, which spaces Pricing and Contact us wider than the menus. */
.brand-nav > a { padding-right: calc(12 * var(--brand-scale)); }
/* Solutions, Role and Resources open a full-width panel below the header, as on firmable.ai. */
.brand-drop > button { display: inline-flex; align-items: center; gap: calc(4 * var(--brand-scale)); padding: 0 2px; border: 0; background: none; font: 500 calc(16 * var(--brand-scale))/calc(24 * var(--brand-scale)) var(--brand-body); letter-spacing: inherit; color: #feefe6; cursor: pointer; }
.brand-drop > button:hover, .brand-drop.open > button { color: #fff; }
.brand-drop > button svg { width: calc(16 * var(--brand-scale)); height: calc(16 * var(--brand-scale)); transition: transform 180ms var(--brand-ease); }
.brand-drop.open > button svg { transform: rotate(180deg); }
.brand-header:is(.is-stuck, .is-open) .brand-drop > button { color: #535862; }
.brand-header:is(.is-stuck, .is-open) .brand-drop > button svg { color: #a4a7ae; }
.brand-header:is(.is-stuck, .is-open) .brand-drop.open > button svg { color: #c14905; }
/* As the theme's .mega-menu: white with a faint glow, covering the header too, so header and menu share one ground. */
/* The header's logo, links and buttons stay above it. Its content keeps the page column. */
.brand-header > .brand-logo, .brand-header > .brand-actions, .brand-nav > a, .brand-drop > button { position: relative; z-index: 2; }
.brand-mega { display: none; position: absolute; z-index: 1; left: 0; right: 0; top: 0; overflow: hidden; box-sizing: border-box; padding: calc(var(--brand-header-h) + calc(24 * var(--brand-scale))) calc((100% - min(var(--brand-wrap-max), 100%)) / 2 + var(--brand-pad)) calc(48 * var(--brand-scale)); background: #fff; }
.brand-mega::before { content: ""; position: absolute; z-index: -1; top: -5%; left: 64%; width: 76.6576%; min-width: calc(1103.87 * var(--brand-scale)); aspect-ratio: 1; border-radius: calc(144.13 * var(--brand-scale)); transform: translate(-50%, 0) rotate(45deg); background: linear-gradient(111.03deg, #bca3ff 8.88%, #f15b06 35.53%, #9c72dc 62.18%); opacity: 0.2; filter: blur(66px); pointer-events: none; }
.brand-mega::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: var(--brand-header-h); box-sizing: border-box; border-bottom: 1px solid #e9eaeb; pointer-events: none; }
.brand-drop.open .brand-mega { display: grid; grid-template-columns: 656fr 560fr; align-items: start; }
.brand-mega-items { columns: 2; column-gap: calc(20 * var(--brand-scale)); padding-right: calc(24 * var(--brand-scale)); }
.brand-nav .brand-mega a { padding: 0; color: #252b37; }
.brand-nav .brand-mega .brand-mega-card { display: flex; gap: calc(12 * var(--brand-scale)); break-inside: avoid; padding: calc(16 * var(--brand-scale)) calc(16 * var(--brand-scale)) calc(24 * var(--brand-scale)); border-radius: calc(8 * var(--brand-scale)); transition: background 300ms; }
.brand-nav .brand-mega-card:hover { background: #fff; color: #252b37; }
.brand-mega-card img { flex: none; width: calc(20 * var(--brand-scale)); height: calc(20 * var(--brand-scale)); margin-top: calc(2 * var(--brand-scale)); object-fit: contain; }
.brand-mega-card strong { display: block; font: 600 calc(16 * var(--brand-scale))/calc(24 * var(--brand-scale)) var(--brand-body); }
.brand-mega-card span span { display: block; margin-top: calc(8 * var(--brand-scale)); font: 400 calc(14 * var(--brand-scale))/calc(20 * var(--brand-scale)) var(--brand-body); color: #535862; }
.brand-nav .brand-mega .is-compact .brand-mega-card { align-items: center; padding: calc(12 * var(--brand-scale)) calc(16 * var(--brand-scale)); }
.brand-mega-side { display: flex; flex-direction: column; gap: calc(24 * var(--brand-scale)); padding: calc(24 * var(--brand-scale)); border-radius: calc(24 * var(--brand-scale)); background: #fff; }
.brand-mega-side p { margin: 0 0 calc(-4 * var(--brand-scale)); font: 600 calc(14 * var(--brand-scale))/calc(20 * var(--brand-scale)) var(--brand-body); color: #a94004; }
.brand-nav .brand-mega-post { display: flex; gap: calc(16 * var(--brand-scale)); }
.brand-mega-post img { flex: none; width: calc(176 * var(--brand-scale)); height: calc(99 * var(--brand-scale)); border-radius: calc(8 * var(--brand-scale)); object-fit: cover; }
.brand-mega-post > span { display: flex; flex-direction: column; justify-content: space-between; }
.brand-mega-post strong { font: 600 calc(14 * var(--brand-scale))/calc(20 * var(--brand-scale)) var(--brand-body); }
.brand-mega-post em { display: inline-flex; align-items: center; gap: calc(6 * var(--brand-scale)); font: 600 calc(14 * var(--brand-scale))/calc(24 * var(--brand-scale)) var(--brand-body); font-style: normal; color: #a94004; }
.brand-mega-post .brand-chev { width: calc(16 * var(--brand-scale)); height: calc(16 * var(--brand-scale)); }
.brand-menu .brand-sub summary { display: flex; width: auto; height: auto; justify-content: space-between; align-items: center; padding: 12px 14px; border-radius: 10px; font: 500 16px/1.3 var(--brand-body); color: var(--brand-ink); cursor: pointer; list-style: none; }
.brand-menu .brand-sub summary::-webkit-details-marker { display: none; }
.brand-menu .brand-sub summary::after { content: ""; width: 8px; height: 8px; margin-right: 4px; border: solid #717680; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); transition: transform 180ms var(--brand-ease); }
.brand-menu .brand-sub[open] summary::after { transform: rotate(-135deg); }
.brand-menu .brand-sub a { display: block; padding-left: 28px; font-size: 15px; color: #535862; }
.brand-actions { display: flex; align-items: center; gap: calc(14 * var(--brand-scale)); margin-left: auto; }
.brand-actions a { display: inline-flex; align-items: center; height: calc(44 * var(--brand-scale)); box-sizing: border-box; padding: calc(10 * var(--brand-scale)) calc(16 * var(--brand-scale)); border-radius: calc(8 * var(--brand-scale)); font-weight: 600; color: #fff; box-shadow: var(--brand-btn-shadow); transition: background 180ms var(--brand-ease); }
.brand-actions a:hover, .brand-actions a.brand-trial:hover { background: var(--brand-btn-hover-bg); color: #252b37; box-shadow: var(--brand-btn-hover-ring); }
.brand-actions a.brand-login { border: 1px solid #d5d7da; }
.brand-actions a.brand-trial { background: #fff; color: #252b37; }
.brand-header:is(.is-stuck, .is-open) .brand-nav > a { color: #535862; }
.brand-header:is(.is-stuck, .is-open) .brand-nav > a:hover { color: #d95205; }
.brand-header:is(.is-stuck, .is-open) .brand-login { background: #fff; color: #252b37; }
.brand-header:is(.is-stuck, .is-open) .brand-login:hover { background: var(--brand-btn-hover-bg); box-shadow: var(--brand-btn-hover-ring); }
.brand-header:is(.is-stuck, .is-open) .brand-trial { background: var(--brand-btn-shine) #d95205; color: #fff; }
.brand-header:is(.is-stuck, .is-open) .brand-trial:hover { background: var(--brand-btn-shine) #c14905; color: #fff; box-shadow: var(--brand-btn-shadow); }
.brand-header:is(.is-stuck, .is-open) .brand-menu summary { color: #535862; }
.brand-menu { display: none; margin-left: auto; margin-right: -10px; }
.brand-menu summary { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: #fff; cursor: pointer; list-style: none; }
.brand-menu summary::-webkit-details-marker { display: none; }
.brand-menu nav { position: absolute; z-index: 20; top: calc(100% - 8px); left: 16px; right: 16px; display: flex; flex-direction: column; padding: 8px; border-radius: 16px; background: #fff; box-shadow: var(--brand-shadow-xl); }
.brand-menu nav a { padding: 12px 14px; border-radius: 10px; font: 500 16px/1.3 var(--brand-body); color: var(--brand-ink); text-decoration: none; }
.brand-menu nav a:hover { background: var(--brand-subtle); }
/* Below 1200 the theme swaps the menus and buttons for the burger. */
@media (max-width: 1199.98px) {
  .brand-nav, .brand-actions { display: none; }
  .brand-menu { display: block; }
}

/* Hero content on the stage: breadcrumb, headline, lead, and a white stat card on the right. */
.brand-hero { position: relative; padding-top: 40px; }
.brand-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font: 400 14px/1.4 var(--brand-body); color: rgba(255, 255, 255, 0.9); }
.brand-crumbs a { color: #fff; text-decoration: none; }
.brand-crumbs a:hover { text-decoration: underline; }
.brand-hero-row { display: flex; gap: 48px; align-items: flex-end; justify-content: space-between; margin-top: 28px; }
.brand-hero-text { flex: 1 1 auto; max-width: 740px; min-width: 0; }
.brand-hero h1 { margin: 0; font: 500 56px/1.06 var(--brand-display); letter-spacing: -0.03em; color: #fff; font-synthesis-weight: none; text-wrap: balance; }
.brand-crumbs + h1 { margin-top: 16px; }
.brand-lead { margin: 20px 0 0; font: 400 19px/1.5 var(--brand-body); color: rgba(255, 255, 255, 0.95); text-wrap: pretty; }
.brand-lead b { font-weight: 600; color: #fff; }
.brand-hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 28px; font: 400 14px/1.4 var(--brand-body); color: rgba(255, 255, 255, 0.9); }
.brand-stat { flex: 0 0 360px; box-sizing: border-box; padding: 28px; border-radius: 16px; background: #fff; color: var(--brand-ink); box-shadow: var(--brand-shadow-xl); font-family: var(--brand-body); }
.brand-stat-big { font: 500 52px/1 var(--brand-display); letter-spacing: -0.03em; }
.brand-stat-big.ember { color: var(--brand-flame); }
.brand-stat-label { margin-top: 8px; font-size: 14px; line-height: 1.4; color: var(--brand-fg-2); }
.brand-stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--brand-line); }
.brand-stat-grid b { display: block; font: 500 24px/1.2 var(--brand-display); color: var(--brand-ink); }
.brand-stat-grid span { font-size: 13px; color: var(--brand-fg-3); }
.brand-stat-note { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--brand-line); font-size: 13px; line-height: 1.45; color: var(--brand-fg-3); }
.brand-stat-note b { font-weight: 600; color: var(--brand-ink); }

/* Buttons. */
.brand-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; box-sizing: border-box; padding: 12px 22px; border: 1px solid transparent; border-radius: 8px; font: 600 16px/24px var(--brand-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background 180ms var(--brand-ease), box-shadow 180ms var(--brand-ease); }
.brand-btn-white { background: #fff; color: #252b37; box-shadow: var(--brand-btn-shadow); }
.brand-btn-white:hover, .brand-band .brand-btn-white:hover { background: var(--brand-btn-hover-bg); color: #252b37; box-shadow: var(--brand-btn-hover-ring); }
/* Ember, as the design review asked, though white on Ember is below the brand's contrast minimum. */
.brand-btn-ember { background: var(--brand-btn-shine) #d95205; color: #fff; box-shadow: var(--brand-btn-shadow); }
.brand-btn-ember:hover { background: var(--brand-btn-shine) #c14905; color: #fff; }
.brand-btn-pill { height: auto; padding: 12px 22px; border-color: var(--brand-line-2); border-radius: 999px; background: #fff; color: var(--brand-ink); font-weight: 500; font-size: 15px; line-height: 1; }
.brand-btn-pill:hover { border-color: var(--brand-ember); color: var(--brand-ink); }

/* Sections and cards on the white panel. */
.brand-main { padding: 72px 0 104px; font-family: var(--brand-body); color: var(--brand-fg-2); }
.brand-h2 { margin: 0; font: 500 40px/1.1 var(--brand-display); letter-spacing: -0.02em; color: var(--brand-ink); font-synthesis-weight: none; }
.brand-h3 { margin: 0; font: 500 22px/1.25 var(--brand-display); letter-spacing: -0.02em; color: var(--brand-ink); font-synthesis-weight: none; }
.brand-sub { margin: 12px 0 0; font-size: 16px; line-height: 1.5; color: var(--brand-fg-3); }
.brand-section + .brand-section { margin-top: 96px; }
.brand-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 32px 0 0; padding: 0; list-style: none; }
.brand-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.brand-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.brand-box { box-sizing: border-box; padding: 24px; border: 1px solid var(--brand-line); border-radius: 16px; background: #fff; }
.brand-card { box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; height: 100%; min-height: 156px; padding: 24px; border: 1px solid var(--brand-line); border-radius: 16px; background: #fff; box-shadow: var(--brand-shadow-sm); color: inherit; text-decoration: none; transition: border-color 180ms var(--brand-ease), box-shadow 180ms var(--brand-ease); }
a.brand-card:hover { border-color: var(--brand-ember); box-shadow: var(--brand-shadow-ember); color: inherit; }
.brand-card-name { font: 500 18px/1.3 var(--brand-display); letter-spacing: -0.02em; color: var(--brand-ink); }
.brand-card-meta { display: block; margin-top: 4px; font-size: 13px; line-height: 1.4; color: var(--brand-fg-3); }
.brand-card-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.brand-card-count { font: 500 36px/1 var(--brand-display); letter-spacing: -0.03em; color: var(--brand-ink); }
.brand-card-unit { margin-top: 6px; font-size: 13px; color: var(--brand-fg-3); }
.brand-chev { flex: none; color: #a7adb7; transition: transform 180ms var(--brand-ease), color 180ms; }
a.brand-card:hover .brand-chev { transform: translateX(3px); color: var(--brand-ember); }

/* Bar rows inside breakdown cards. */
.brand-bars { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.brand-bar-row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--brand-ink); }
.brand-bar-row b { font-weight: 600; white-space: nowrap; }
.brand-bar { height: 6px; margin-top: 6px; border-radius: 999px; background: var(--brand-subtle); }
.brand-bar > span { display: block; height: 6px; min-width: 6px; border-radius: 999px; background: var(--brand-ember); }
.brand-box-note { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--brand-line); font-size: 13px; color: var(--brand-fg-3); }

/* Call-to-action band, as the CTA on firmable.ai's Tech Intelligence page: a frosted panel on the gradient. */
.brand-band { margin-top: 96px; padding: 48px 64px; border-radius: 24px; background: linear-gradient(129.16deg, #bca3ff -0.39%, #f15b06 19.39%, #f15b06 40.68%, #9c72dc 90.04%); color: #fff; }
.brand-band-panel { padding: 40px; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 16px; background: linear-gradient(121.53deg, rgba(0, 0, 0, 0.2) 50%, rgba(102, 102, 102, 0) 100%); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); text-align: center; }
.brand-band h2, .brand-band h3 { margin: 0; font: 500 36px/42px var(--brand-display); letter-spacing: -0.02em; font-synthesis-weight: none; text-wrap: balance; }
.brand-band p { max-width: 700px; margin: 20px auto 0; font-size: 18px; line-height: 28px; color: #feefe6; }
.brand-band-row { display: flex; justify-content: center; gap: 32px; margin-top: 28px; }
.brand-band .brand-btn { padding: 12px 40px; border-radius: 10px; color: #0a0d12; box-shadow: none; }
.brand-band-row { align-items: center; }
/* Quiet text link with a 1px rule, as on firmable.ai's Tech Intelligence page. */
.brand-band-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; border-bottom: 1px solid rgba(255, 255, 255, 0.45); font: 500 16px/24px var(--brand-body); color: #fff; text-decoration: none; }
.brand-band-link:hover, .brand-band-link:focus-visible { border-bottom-color: #fff; color: #fff; }

@media (max-width: 1100px) {
  .brand-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .brand-hero-row { flex-direction: column; align-items: stretch; }
  .brand-stat { flex-basis: auto; }
  .brand-grid, .brand-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .brand-stage { padding-bottom: 40px; }
  .brand-hero { padding-top: 24px; }
  .brand-hero h1 { font-size: 36px; line-height: 1.08; }
  .brand-lead { font-size: 16px; }
  .brand-main { padding: 48px 0 72px; }
  .brand-h2 { font-size: 30px; }
  .brand-section + .brand-section { margin-top: 64px; }
  .brand-grid, .brand-grid-3, .brand-grid-2 { grid-template-columns: 1fr; gap: 12px; margin-top: 24px; }
  /* On a phone the count sits beside its unit, so each card is one short row. */
  .brand-card { min-height: 0; padding: 20px; }
  .brand-card-foot > div { display: flex; align-items: baseline; gap: 8px; }
  .brand-card-count { font-size: 30px; }
  .brand-card-unit { margin-top: 0; }
  .brand-band { margin-top: 64px; padding: 20px; border-radius: 16px; }
  .brand-band-panel { padding: 20px; border-radius: 12px; }
  .brand-band h2, .brand-band h3 { font-size: 24px; line-height: 28px; }
  .brand-band p { margin-top: 12px; font-size: 16px; line-height: 24px; }
  .brand-band-row { flex-direction: column; align-items: stretch; gap: 16px; margin-top: 24px; }
  .brand-band .brand-btn { padding: 12px 24px; }
}

/* The firmable.ai footer. */
.brand-footer { color: #fff; background: linear-gradient(118deg, #b8809b 0%, #c85a22 22%, #c25a24 48%, #a0607a 75%, #8b63b0 100%); padding: calc(66 * var(--brand-scale)) 0 calc(40 * var(--brand-scale)); font-family: var(--brand-body); }
.brand-footer a { color: #fff; text-decoration: none; }
.brand-footer a:hover { text-decoration: underline; }
.brand-footer p { margin: 0; }
.brand-footer-grid { display: grid; grid-template-columns: calc(388 * var(--brand-scale)) repeat(4, minmax(0, calc(258 * var(--brand-scale)))); }
.brand-footer-grid > div > p { width: calc(300 * var(--brand-scale)); max-width: 100%; margin-top: calc(24 * var(--brand-scale)); font: 400 calc(17 * var(--brand-scale))/calc(24 * var(--brand-scale)) var(--brand-body); color: rgba(255, 255, 255, 0.85); }
.brand-seals { display: flex; gap: calc(22 * var(--brand-scale)); margin-top: calc(25 * var(--brand-scale)); }
.brand-seals img { width: calc(68 * var(--brand-scale)); height: calc(68 * var(--brand-scale)); object-fit: contain; }
.brand-seals img + img { border-radius: 999px; object-fit: cover; }
.brand-ask-title { margin-top: calc(32 * var(--brand-scale)); font: 600 calc(15 * var(--brand-scale))/calc(20 * var(--brand-scale)) var(--brand-body); color: #f6b58f; }
.brand-ask { display: flex; gap: calc(16 * var(--brand-scale)); margin-top: calc(18 * var(--brand-scale)); }
.brand-ask a { display: flex; width: calc(40 * var(--brand-scale)); height: calc(40 * var(--brand-scale)); border-radius: calc(9 * var(--brand-scale)); overflow: hidden; }
.brand-ask img { width: 100%; height: 100%; object-fit: cover; }
.brand-footer-col { display: flex; flex-direction: column; gap: calc(12 * var(--brand-scale)); font: 500 calc(15 * var(--brand-scale))/calc(20 * var(--brand-scale)) var(--brand-body); }
.brand-footer-h { margin-bottom: calc(4 * var(--brand-scale)); color: #f6b58f; }
.brand-legal { display: flex; align-items: center; margin-top: calc(56 * var(--brand-scale)); padding-top: calc(33 * var(--brand-scale)); border-top: 1px solid rgba(255, 255, 255, 0.3); }
.brand-legal > span { flex: 0 0 calc(388 * var(--brand-scale)); font: 400 calc(16 * var(--brand-scale))/calc(24 * var(--brand-scale)) var(--brand-body); color: rgba(255, 255, 255, 0.9); }
.brand-legal-links { display: flex; flex-wrap: wrap; gap: calc(16 * var(--brand-scale)); font: 500 calc(15 * var(--brand-scale))/calc(20 * var(--brand-scale)) var(--brand-body); }
.brand-social { display: flex; gap: calc(22 * var(--brand-scale)); align-items: center; margin-left: auto; }
.brand-social a { display: flex; }
@media (max-width: 1240px) {
  .brand-footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 48px; }
  .brand-footer-grid > div:first-child { grid-column: 1 / -1; }
  .brand-legal { flex-wrap: wrap; gap: 20px; }
  .brand-legal > span { flex-basis: 100%; }
}
@media (max-width: 720px) {
  .brand-footer { padding: 48px 0 32px; }
  .brand-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; row-gap: 40px; }
  .brand-legal { flex-direction: column; align-items: flex-start; }
  .brand-legal > span { flex-basis: auto; order: 1; font-size: 14px; }
  .brand-social { order: 2; margin-left: 0; }
}