/* Homepage hero: a calm business introduction and a shared product display. */
.brand-hero { background: #fbfaf7; border-top: 1px solid #f0eee7; }
.brand-hero-inner { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 54px; align-items: center; padding-block: 42px 32px; }
.brand-hero-copy { min-width: 0; padding-block: 10px; }
.brand-hero-copy > .eyebrow { display: flex; align-items: center; gap: 10px; color: #607083; font-size: 9px; letter-spacing: .12em; margin-bottom: 25px; }
.hero-brand-line { width: 25px; height: 3px; flex-shrink: 0; background: var(--yellow); }
.brand-hero-copy h1 { font-size: clamp(42px, 4.25vw, 61px); line-height: 1.08; font-weight: 700; letter-spacing: -.052em; color: var(--ink); }
.brand-hero-copy h1 > span { color: var(--blue); }
.brand-hero-description { margin-top: 24px; color: #697485; font-size: 14px; line-height: 1.85; max-width: 405px; }
.brand-hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 11px; margin-top: 28px; }
.brand-hero-actions .button { min-height: 49px; padding: 13px 19px; gap: 13px; font-size: 12px; border-radius: 7px; }
.brand-hero-actions .button-outline { background: transparent; border-color: #c8d2e0; }
.brand-hero-actions .button-outline:hover { background: #eef3fa; }
.brand-hero-actions .icon { width: 17px; height: 17px; }
.brand-hero-audience { margin-top: 19px; color: #7c8794; font-size: 11px; }
.hero-showcase { min-width: 0; padding: 4px 0 0; }
.hero-showcase-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 3px 20px; color: #7d8793; font-size: 8px; font-weight: 600; letter-spacing: .13em; }
.showcase-colors { display: flex; gap: 5px; flex-shrink: 0; }
.showcase-colors i { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.showcase-colors i:nth-child(2) { background: var(--green); }
.showcase-colors i:nth-child(3) { background: var(--yellow); }
.showcase-colors i:nth-child(4) { background: var(--purple); }
.hero-character-row { display: grid; grid-template-columns: minmax(0, .94fr) minmax(0, 1.1fr) minmax(0, .94fr); gap: 12px; height: 330px; align-items: end; }
.hero-character { --character-bg: #e9f0f5; display: grid; grid-template-rows: minmax(0, 1fr) 40px; width: 100%; height: 292px; min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 100px 100px 0 0; background: transparent; text-align: left; }
.hero-character-dog { --character-bg: #f6edda; height: 330px; }
.hero-character-bunny { --character-bg: #ece9f3; height: 292px; }
.hero-character-media { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: hidden; border-radius: 110px 110px 9px 9px; background: var(--character-bg); transition: background .18s; }
.hero-character-media > img { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; max-height: 100%; aspect-ratio: auto; object-fit: contain; padding: 15px 6px 4px; mix-blend-mode: multiply; transition: transform .2s ease; }
.hero-character:hover .hero-character-media > img { transform: translateY(-4px); }
.hero-character-name { display: flex; align-items: center; justify-content: space-between; gap: 7px; padding-inline: 3px; color: #516174; font-size: 10px; font-weight: 600; line-height: 1.4; }
.hero-character-name .icon { width: 13px; height: 13px; }
.hero-showcase-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 17px 3px 0; border-top: 1px solid #e6e7e2; margin-top: 10px; font-size: 10px; color: #7f8994; }
.hero-showcase-footer a { display: inline-flex; align-items: center; gap: 10px; color: var(--blue); font-weight: 600; }
.hero-showcase-footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
.hero-showcase-footer .icon { width: 15px; height: 15px; }
.hero-business-strip { display: grid; grid-template-columns: .9fr 1fr 1fr; gap: 20px; border-top: 1px solid #e6e6de; padding-block: 20px 22px; }
.hero-business-strip > a { display: flex; align-items: center; gap: 10px; color: #667487; font-size: 11px; line-height: 1.5; }
.hero-business-strip > a + a { border-left: 1px solid #dfE3df; padding-left: 32px; }
.hero-business-strip strong { font-size: 23px; font-weight: 600; color: var(--blue); letter-spacing: -.04em; line-height: 1; }
.hero-business-strip .icon { width: 15px; height: 15px; margin-left: auto; }
.hero-business-strip > a:hover { color: var(--blue); }
.business-dot { width: 7px; height: 7px; flex-shrink: 0; border-radius: 50%; }
.dot-purple { background: var(--purple); }
.dot-green { background: var(--green); }

@media (max-width: 1180px) {
  .brand-hero-inner { gap: 32px; padding-top: 32px; }
  .brand-hero-copy h1 { font-size: 49px; }
  .brand-hero-actions { gap: 9px; }
  .brand-hero-actions .button { padding-inline: 15px; font-size: 11px; gap: 10px; }
  .hero-character-row { height: 300px; gap: 9px; }
  .hero-character { height: 267px; }
  .hero-character-dog { height: 300px; }
  .hero-character-name { font-size: 9px; }
}
@media (max-width: 980px) {
  .brand-hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; padding-block: 28px; }
  .brand-hero-copy h1 { font-size: 42px; }
  .brand-hero-copy > .eyebrow { font-size: 8px; gap: 8px; margin-bottom: 20px; }
  .hero-brand-line { width: 15px; }
  .brand-hero-description { font-size: 13px; margin-top: 20px; }
  .brand-hero-actions { margin-top: 22px; }
  .hero-showcase-heading { font-size: 6px; gap: 8px; padding-bottom: 15px; }
  .showcase-colors { gap: 3px; }
  .hero-character-row { height: 277px; gap: 7px; }
  .hero-character { height: 246px; grid-template-rows: minmax(0, 1fr) 44px; }
  .hero-character-dog { height: 277px; }
  .hero-character-media > img { padding-inline: 2px; }
  .hero-character-name { font-size: 8px; padding-inline: 1px; gap: 3px; }
  .hero-character-name .icon { width: 11px; height: 11px; }
  .hero-showcase-footer { font-size: 9px; gap: 9px; }
  .hero-business-strip { gap: 12px; }
  .hero-business-strip > a { font-size: 10px; gap: 8px; }
  .hero-business-strip > a + a { padding-left: 19px; }
}
@media (max-width: 720px) {
  .brand-hero-inner { grid-template-columns: minmax(0, 1fr); gap: 30px; padding-block: 29px 24px; }
  .brand-hero-copy { padding-block: 0; }
  .brand-hero-copy > .eyebrow { font-size: 8px; margin-bottom: 18px; }
  .brand-hero-copy h1 { font-size: clamp(39px, 9vw, 56px); max-width: 540px; }
  .brand-hero-description { max-width: 440px; font-size: 13px; line-height: 1.8; margin-top: 18px; }
  .brand-hero-actions { gap: 9px; margin-top: 21px; }
  .brand-hero-actions .button { min-height: 45px; font-size: 11px; padding: 12px 15px; }
  .brand-hero-audience { margin-top: 15px; font-size: 10px; }
  .hero-showcase { width: 100%; max-width: 540px; margin-inline: auto; padding: 0; }
  .hero-showcase-heading { font-size: 7px; padding-bottom: 14px; }
  .hero-character-row { height: clamp(218px, 50vw, 300px); gap: 9px; }
  .hero-character { height: 89%; grid-template-rows: minmax(0, 1fr) 38px; }
  .hero-character-dog { height: 100%; }
  .hero-character-name { font-size: 8px; }
  .hero-character-media { border-radius: 90px 90px 8px 8px; }
  .hero-character-media > img { padding-top: 10px; }
  .hero-showcase-footer { margin-top: 5px; padding-top: 14px; font-size: 9px; }
  .hero-business-strip { grid-template-columns: 1fr 1fr; gap: 12px; padding-block: 17px 18px; }
  .hero-business-strip > a { font-size: 9px; }
  .hero-business-strip > a + a { padding-left: 14px; }
  .hero-business-strip > a:last-child { grid-column: 1 / -1; border-left: 0; border-top: 1px solid #e6e6de; padding: 13px 0 0; }
  .hero-business-strip strong { font-size: 21px; }
}
@media (max-width: 370px) {
  .brand-hero-copy h1 { font-size: 35px; }
  .brand-hero-actions .button { font-size: 10px; padding-inline: 11px; gap: 7px; }
  .hero-character-row { gap: 6px; }
  .hero-character-name { font-size: 7px; }
  .hero-showcase-heading { font-size: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-character-media, .hero-character-media > img { transition: none; }
  .hero-character:hover .hero-character-media > img { transform: none; }
}