@charset "UTF-8";
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
}

img,
video,
svg,
canvas {
  display: block;
  max-width: 100%;
}

button,
input,
textarea,
select {
  font: inherit;
}

button,
[role=button] {
  border: 0;
  background: none;
}

ul {
  list-style: none;
  padding: 0;
}

body {
  min-height: 100vh;
}

:root {
  color-scheme: light;
  --ink: #17212b;
  --muted: #536170;
  --soft: #eef2f4;
  --line: #d8e0e5;
  --paper: #fbfcfc;
  --white: #ffffff;
  --teal: #176d72;
  --teal-dark: #0f4f54;
  --coral: #c35b45;
  --orange: #f4a261;
  --gold: #b0832c;
  --blue: #2e6695;
  --avatar-overlay-bg: rgba(255, 255, 255, 0.055);
  --avatar-overlay-bg-warm: rgba(244, 162, 97, 0.2);
  --avatar-overlay-bg-strong: rgba(5, 16, 20, 0.82);
  --avatar-overlay-border: rgba(255, 255, 255, 0.14);
  --avatar-overlay-text: rgba(255, 255, 255, 0.9);
  --avatar-overlay-accent: #ffcf9f;
  --avatar-panel-bg: #13282d;
  --avatar-text-muted: rgba(255, 255, 255, 0.72);
  --avatar-time-label-color: rgba(255, 255, 255, 0.8);
  --avatar-ring-border: rgba(120, 204, 204, 0.22);
  --avatar-ring-inner: rgba(244, 162, 97, 0.22);
  --avatar-ring-core: rgba(255, 255, 255, 0.18);
  --avatar-portrait-border: rgba(255, 255, 255, 0.2);
  --avatar-portrait-shadow: rgba(0, 0, 0, 0.34);
  --avatar-portrait-glow: rgba(120, 204, 204, 0.06);
  --avatar-speech-pulse: rgba(255, 255, 255, 0.78);
  --avatar-speaking-ring: rgba(244, 162, 97, 0.6);
  --avatar-listening-border: rgba(244, 162, 97, 0.34);
  --mic-btn-border: rgba(255, 255, 255, 0.34);
  --mic-btn-bg: rgba(255, 255, 255, 0.13);
  --mic-btn-shadow: rgba(0, 0, 0, 0.22);
  --mic-btn-halo-border: rgba(255, 255, 255, 0.22);
  --mic-btn-idle-glow: rgba(255, 255, 255, 0.08);
  --mic-btn-hover-border: rgba(244, 162, 97, 0.72);
  --mic-btn-hover-bg: rgba(244, 162, 97, 0.28);
  --mic-btn-hover-shadow: rgba(0, 0, 0, 0.28);
  --mic-btn-hover-glow: rgba(244, 162, 97, 0.12);
  --mic-btn-stop-border: rgba(244, 162, 97, 0.5);
  --mic-btn-stop-bg: rgba(244, 162, 97, 0.24);
  --mic-btn-loading-border: rgba(244, 162, 97, 0.62);
  --mic-btn-focus-outline: rgba(244, 162, 97, 0.34);
  --feedback-note-border: rgba(255, 255, 255, 0.08);
  --feedback-note-bg: rgba(255, 255, 255, 0.055);
  --hero-bg: #0d1c23;
  --bg-dark: #101f25;
  --bg-deep: #12242a;
  --btn-primary-text: #111c20;
  --btn-icon-active-text: #14232a;
  --btn-spinner-border: rgba(17, 28, 32, 0.24);
  --btn-disabled-bg: #d5dcdf;
  --teal-wash: #eaf4f2;
  --teal-surface: #f1f5f2;
  --teal-soft: #f7faf9;
  --teal-faint: #f2f8f4;
  --teal-note-bg: #f1f7f6;
  --teal-art-bg: #eef7f4;
  --teal-service-bg: #e8f1ef;
  --card-warning-bg: #fff3f0;
  --card-warning-border: #efc1b7;
  --warm-surface: #fff7f3;
  --coral-deep: #a44f3f;
  --hero-eyebrow: #ffb49d;
  --chain-warm-text: #f0ded3;
  --on-dark-76: rgba(255, 255, 255, 0.76);
  --on-dark-82: rgba(255, 255, 255, 0.82);
  --on-dark-86: rgba(255, 255, 255, 0.86);
  --on-dark-92: rgba(255, 255, 255, 0.92);
  --overlay-white-4p5: rgba(255, 255, 255, 0.045);
  --overlay-white-10: rgba(255, 255, 255, 0.1);
  --overlay-white-12: rgba(255, 255, 255, 0.12);
  --overlay-white-16: rgba(255, 255, 255, 0.16);
  --overlay-white-22: rgba(255, 255, 255, 0.22);
  --overlay-white-28: rgba(255, 255, 255, 0.28);
  --overlay-white-68: rgba(255, 255, 255, 0.68);
  --teal-overlay-12: rgba(23, 109, 114, 0.12);
  --teal-overlay-28: rgba(23, 109, 114, 0.28);
  --teal-overlay-56: rgba(23, 109, 114, 0.56);
  --teal-mid-overlay-12: rgba(29, 78, 86, 0.12);
  --nav-bg: rgba(251, 252, 252, 0.9);
  --nav-bg-scrolled: rgba(251, 252, 252, 0.96);
  --emotion-joy-bg: #fff5cc;
  --emotion-joy-text: #8b5a00;
  --emotion-sadness-bg: #e7f0ff;
  --emotion-sadness-text: #31537a;
  --emotion-anger-bg: #ffe5df;
  --emotion-anger-text: #973722;
  --emotion-fear-bg: #ede7ff;
  --emotion-fear-text: #58428f;
  --emotion-disgust-bg: #e7f7df;
  --emotion-disgust-text: #426d32;
  --emotion-surprise-bg: #fff0df;
  --emotion-surprise-text: #8b5428;
  --ail-eyebrow-color: var(--coral-deep);
  --scroll-wheel-track: #2a2e33;
  --font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-awesome: "Font Awesome 7 Free", "Font Awesome 6 Free", sans-serif;
  --avatar-live-font-size: 0.88rem;
  --avatar-live-font-size-mobile: 0.8rem;
  --avatar-live-line-height: 1.34;
  --avatar-live-font-weight: 420;
  --avatar-time-label-font-size: 0.8rem;
  --avatar-time-label-font-size-mobile: 0.74rem;
  --shadow: 0 22px 70px rgba(25, 39, 52, 0.14);
  --radius: 8px;
  --radius-sm: 6px;
  --radius-pill: 999px;
  --border-hairline: 1px solid var(--line);
  --avatar-overlay-border-style: 1px solid var(--avatar-overlay-border);
  --max-content-width: 1180px;
  --max-content-width-narrow: 980px;
  --mobile-inset-width: var(--mobile-inset-width);
  --transition-fast: 160ms ease;
  --avatar-overlay-radius: 6px;
  --avatar-time-label-width: 4.8ch;
  --control-padding-mobile: 8px 11px;
  --avatar-circle-size-base: min(72%, 340px);
  --avatar-circle-size-tablet: min(72vw, 280px);
  --avatar-circle-size-mobile: min(86vw, 320px);
  --avatar-live-box-height: calc(2em * var(--avatar-live-line-height) + 20px);
  --avatar-live-box-height-mobile: calc(2em * var(--avatar-live-line-height) + 16px);
  --avatar-live-box-height-compact-mobile: calc(2em * var(--avatar-live-line-height) + 18px);
  --ail-page-top: 44px;
  --ail-page-heading-gap: 32px;
}

/* Base typography and shared page structure. Design tokens live in variables.scss. */
* {
  box-sizing: border-box;
}

html.content-settling body {
  visibility: hidden;
}

html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  overflow-y: scroll;
  overflow-anchor: none;
}

[id] {
  scroll-margin-top: 92px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.5;
}

a {
  color: inherit;
  text-decoration: none;
}

.text-link {
  color: var(--avatar-overlay-accent);
  font-weight: inherit;
  text-decoration: none;
  margin-left: 0.16em;
}

.text-link:hover,
.text-link:focus-visible {
  color: var(--orange);
}

.community-link {
  color: var(--orange);
  font-weight: inherit;
  text-decoration: none;
}

.community-link:hover,
.community-link:focus-visible {
  color: var(--coral);
}

button {
  font: inherit;
}

.eyebrow,
.tag {
  margin: 0 0 12px;
  color: var(--coral);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  max-width: 940px;
  margin-bottom: 22px;
  font-size: clamp(2.2rem, 5.4vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: 0;
}

h2 {
  margin-bottom: 14px;
  font-size: clamp(1.65rem, 3vw, 3rem);
  line-height: 1.08;
  letter-spacing: 0;
}

h3 {
  margin-bottom: 8px;
  font-size: 1rem;
}

.section {
  padding: 86px 5vw;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.intro-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.intro-grid article {
  padding: 26px;
  background: var(--white);
  border: var(--border-hairline);
  border-radius: var(--radius);
  box-shadow: 0 12px 35px rgba(25, 39, 52, 0.06);
}

.info-block,
.about-section {
  background: var(--bg-dark);
  color: var(--white);
}

.about-card-section + .about-card-section {
  margin-top: 28px;
}

.info-block > .page-intro,
.info-block > .section-heading,
.info-block > .about-layout {
  width: 100%;
  max-width: none;
}

.info-block .section-heading p,
.about-section .section-heading p,
.about-copy p {
  color: var(--on-dark-76);
}

.about-layout {
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  gap: 34px;
}

.single-about-card {
  grid-template-columns: minmax(0, 1fr);
}

.about-copy {
  max-width: 780px;
  font-size: 1.08rem;
}

.about-copy .result-actions {
  margin-top: auto;
}

.about-background-note {
  padding-top: 30px;
  padding-bottom: 30px;
}

.about-background-note p {
  width: min(980px, 100%);
  margin: 0 auto;
  padding: 22px 24px;
  border-left: 4px solid var(--coral);
  background: var(--paper);
  color: var(--muted);
  font-size: 1.04rem;
  line-height: 1.7;
}

.profile-stack {
  gap: 10px;
}

.profile-stack span {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-pill);
  background: var(--mic-btn-idle-glow);
  color: var(--white);
  font-weight: 700;
}

.profile-stack span:nth-child(2),
.profile-stack span:nth-child(5) {
  margin-left: auto;
}

.profile-stack span:nth-child(3) {
  margin-left: 18%;
}

.profile-stack span:nth-child(4) {
  margin-left: 8%;
}

@media (max-width: 1180px) {
  .info-block .about-layout,
  .about-layout {
    grid-template-columns: 1fr;
  }
  .about-copy,
  .profile-stack,
  .about-layout > * {
    width: 100%;
    max-width: none;
  }
  .profile-stack span:nth-child(n) {
    margin-left: 0;
  }
}
@media (max-width: 860px) {
  .section {
    padding-inline: 5vw;
  }
}
.info-block .about-copy {
  width: var(--max-content-width-narrow);
  max-width: 100%;
}

/* Shared native-feeling scrollbar for general tall fields and carousel panels. */
.form-control-tall::-webkit-scrollbar,
.home-agent-slide::-webkit-scrollbar {
  width: 10px;
}

.form-control-tall,
.home-agent-slide {
  scrollbar-width: thin;
  scrollbar-color: var(--line) var(--soft);
}

.form-control-tall::-webkit-scrollbar-track,
.home-agent-slide::-webkit-scrollbar-track {
  background: var(--soft);
  border-radius: var(--radius-pill);
}

.form-control-tall::-webkit-scrollbar-thumb,
.home-agent-slide::-webkit-scrollbar-thumb {
  background: var(--line);
  border: 2px solid var(--soft);
  border-radius: var(--radius-pill);
}

.form-control-tall::-webkit-scrollbar-thumb:hover,
.home-agent-slide::-webkit-scrollbar-thumb:hover {
  background: var(--muted);
}

/* Transcript-only wheel scrollbar: a white scroll-wheel thumb with animated grooves.
   Applies to every panel where live speech text can appear (multi-line transcript
   boxes and the per-agent live-caption line), not just the muppets transcript. */
.form-control-transcript.has-transcript-wheel-scrollbar,
.scrolling-transcript.has-transcript-wheel-scrollbar,
.agent-live-line.has-transcript-wheel-scrollbar,
.single-agent-live-line.has-transcript-wheel-scrollbar,
.avatar-status-line.has-transcript-wheel-scrollbar,
.status-pill.has-transcript-wheel-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: var(--white) var(--soft);
}

.form-control-transcript.has-transcript-wheel-scrollbar::-webkit-scrollbar,
.scrolling-transcript.has-transcript-wheel-scrollbar::-webkit-scrollbar,
.agent-live-line.has-transcript-wheel-scrollbar::-webkit-scrollbar,
.single-agent-live-line.has-transcript-wheel-scrollbar::-webkit-scrollbar,
.avatar-status-line.has-transcript-wheel-scrollbar::-webkit-scrollbar,
.status-pill.has-transcript-wheel-scrollbar::-webkit-scrollbar {
  width: 12px;
}

.form-control-transcript.has-transcript-wheel-scrollbar::-webkit-scrollbar-track,
.scrolling-transcript.has-transcript-wheel-scrollbar::-webkit-scrollbar-track,
.agent-live-line.has-transcript-wheel-scrollbar::-webkit-scrollbar-track,
.single-agent-live-line.has-transcript-wheel-scrollbar::-webkit-scrollbar-track,
.avatar-status-line.has-transcript-wheel-scrollbar::-webkit-scrollbar-track,
.status-pill.has-transcript-wheel-scrollbar::-webkit-scrollbar-track {
  background: linear-gradient(90deg, transparent 0 1px, var(--soft) 1px 11px, transparent 11px 100%);
  border-radius: var(--radius-pill);
  margin-block: 8px;
}

.form-control-transcript.has-transcript-wheel-scrollbar::-webkit-scrollbar-thumb,
.scrolling-transcript.has-transcript-wheel-scrollbar::-webkit-scrollbar-thumb,
.agent-live-line.has-transcript-wheel-scrollbar::-webkit-scrollbar-thumb,
.single-agent-live-line.has-transcript-wheel-scrollbar::-webkit-scrollbar-thumb,
.avatar-status-line.has-transcript-wheel-scrollbar::-webkit-scrollbar-thumb,
.status-pill.has-transcript-wheel-scrollbar::-webkit-scrollbar-thumb {
  min-height: 42px;
  border: 2px solid var(--soft);
  border-radius: var(--radius-pill);
  background: radial-gradient(ellipse at 72% 16%, var(--white) 0 16%, transparent 17%), linear-gradient(118deg, transparent 0 21%, var(--line) 22% 25%, transparent 26% 42%, var(--line) 43% 46%, transparent 47% 63%, var(--line) 64% 67%, transparent 68% 100%), linear-gradient(90deg, var(--white) 0 22%, var(--paper) 44%, var(--white) 68%, var(--line) 100%);
  background-size: 100% 100%, 16px 28px, 100% 100%;
  box-shadow: inset 2px 0 0 var(--white), inset -3px 0 0 var(--line);
}

.form-control-transcript.has-transcript-wheel-scrollbar::-webkit-scrollbar-thumb:hover,
.scrolling-transcript.has-transcript-wheel-scrollbar::-webkit-scrollbar-thumb:hover,
.agent-live-line.has-transcript-wheel-scrollbar::-webkit-scrollbar-thumb:hover,
.single-agent-live-line.has-transcript-wheel-scrollbar::-webkit-scrollbar-thumb:hover,
.avatar-status-line.has-transcript-wheel-scrollbar::-webkit-scrollbar-thumb:hover,
.status-pill.has-transcript-wheel-scrollbar::-webkit-scrollbar-thumb:hover {
  background: radial-gradient(ellipse at 72% 16%, var(--white) 0 16%, transparent 17%), linear-gradient(118deg, transparent 0 21%, var(--muted) 22% 25%, transparent 26% 42%, var(--muted) 43% 46%, transparent 47% 63%, var(--muted) 64% 67%, transparent 68% 100%), linear-gradient(90deg, var(--white) 0 22%, var(--paper) 44%, var(--white) 68%, var(--muted) 100%);
}

.form-control-transcript.is-transcript-wheel-spinning::-webkit-scrollbar-thumb,
.scrolling-transcript.is-transcript-wheel-spinning::-webkit-scrollbar-thumb,
.agent-live-line.is-transcript-wheel-spinning::-webkit-scrollbar-thumb,
.single-agent-live-line.is-transcript-wheel-spinning::-webkit-scrollbar-thumb {
  animation: transcriptWheelSpin 760ms cubic-bezier(0.2, 0.78, 0.18, 1) both;
}

@keyframes transcriptWheelSpin {
  0% {
    background-position: 0 0, 0 18px, 0 0;
  }
  18% {
    background-position: 0 0, 0 7px, 0 0;
  }
  52% {
    background-position: 0 0, 0 -18px, 0 0;
  }
  78% {
    background-position: 0 0, 0 -29px, 0 0;
  }
  100% {
    background-position: 0 0, 0 -34px, 0 0;
  }
}
.info-block .about-layout {
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
}

.about-card-section .about-layout,
.about-card-section .about-copy {
  width: 100%;
  max-width: none;
}

.about-card-section .about-layout {
  grid-template-columns: minmax(0, 1fr);
}

.info-block .about-copy,
.info-block .section-heading p {
  width: var(--max-content-width-narrow);
  max-width: 100%;
}

/* Final responsive about layout guard. */
@media (max-width: 1180px) {
  .info-block .about-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Mobile profile-stack stagger: keep the black visual block feeling like an image, not a plain list. */
@media (max-width: 640px) {
  .profile-stack {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 9px;
  }
  .profile-stack span {
    width: max-content;
    max-width: 92%;
  }
  .profile-stack span:nth-child(n) {
    margin-left: 0;
  }
  .profile-stack span:nth-child(2) {
    margin-left: 8%;
  }
  .profile-stack span:nth-child(3) {
    margin-left: 20%;
  }
  .profile-stack span:nth-child(4) {
    margin-left: 6%;
  }
  .profile-stack span:nth-child(5) {
    margin-left: 24%;
  }
  .profile-stack span:nth-child(6) {
    margin-left: 12%;
  }
}
/* Mobile rhythm: compact vertical spacing site-wide on small screens. */
@media (max-width: 640px) {
  .section {
    padding-block: 22px;
  }
  .intro-grid {
    gap: 14px;
  }
  .intro-grid article {
    padding: 20px;
  }
  .about-card-section + .about-card-section {
    margin-top: 18px;
  }
  /* h1/h2 sit at their clamp() floor on every phone width (the vw term never
     grows enough to matter below ~880px), so this is the actual site-wide
     mobile size, not a per-page override. Step it down one notch so long
     headings (4+ line wraps in dark contact/about bands) read as a heading,
     not a wall of bold text. */
  h1 {
    font-size: clamp(1.9rem, 5.4vw, 4.6rem);
  }
  h2 {
    font-size: clamp(1.42rem, 3vw, 3rem);
  }
}
@media (max-width: 420px) {
  .section {
    padding-block: 20px;
  }
}
/* Compact mobile spacing between adjacent homepage bands. */
@media (max-width: 640px) {
  .intro-grid {
    padding-bottom: 14px;
  }
  .intro-grid + .agent-demo,
  .home-agent-demo + .home-agent-demo {
    padding-top: 16px;
  }
}
.container {
  width: min(100%, var(--max-content-width));
  margin-inline: auto;
  padding-inline: 5vw;
}

.lead {
  max-width: 690px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Top navigation component. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: stretch;
  gap: 24px;
  min-height: 68px;
  padding: 0 5vw;
  background: var(--nav-bg);
  border-bottom: 1px solid rgba(216, 224, 229, 0.8);
  backdrop-filter: blur(14px);
}

/* Beat Bootstrap layout utilities on the header element. */
.topbar.d-flex {
  display: grid;
}

.brand {
  grid-column: 1;
  justify-self: start;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 220px;
  font-weight: 750;
}

.brand-mark {
  width: 24px;
  height: 24px;
  border: 2px solid var(--teal);
  border-radius: 50%;
  box-shadow: inset 7px 0 0 var(--coral);
}

.nav-links {
  grid-column: 2;
  justify-self: stretch;
  display: flex;
  align-items: stretch;
  align-self: stretch;
  justify-content: flex-end;
  gap: clamp(12px, 1.25vw, 20px);
  color: var(--muted);
  font-size: 0.94rem;
}

.nav-links-center {
  flex: 1 1 auto;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: clamp(12px, 1.25vw, 20px);
}

.nav-links-right {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  gap: clamp(12px, 1.25vw, 20px);
}

/* Beat Bootstrap .align-items-center on every page header nav. */
.topbar > .nav-links {
  align-items: stretch;
  align-self: stretch;
}

.nav-links a {
  position: relative;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  flex: 0 0 auto;
  -webkit-tap-highlight-color: transparent;
}

.nav-links a:hover,
.nav-links a:focus-visible,
.nav-links a.is-active,
.nav-links a[aria-current=page] {
  color: var(--ink);
}

.mobile-menu-toggle,
.mobile-site-menu,
.mobile-agent-nav {
  display: none;
}

@media (min-width: 1025px) {
  .topbar > .mobile-menu-toggle {
    grid-column: 3;
    justify-self: end;
    align-self: center;
  }
  .topbar .nav-links a {
    display: flex;
    align-items: center;
    align-self: stretch;
    height: 100%;
    box-shadow: none;
  }
  .topbar .nav-links a[href*=more-agents] {
    margin-left: clamp(16px, 2.4vw, 36px);
    color: var(--coral);
    font-weight: inherit;
  }
  .topbar .nav-links a[href*=join-the-community] {
    margin-left: 8px;
    color: var(--coral);
    font-weight: inherit;
  }
  .topbar .nav-links a[href*=more-agents]:hover,
  .topbar .nav-links a[href*=more-agents]:focus-visible,
  .topbar .nav-links a[href*=join-the-community]:hover,
  .topbar .nav-links a[href*=join-the-community]:focus-visible,
  .topbar .nav-links a[href*=more-agents][aria-current=page],
  .topbar .nav-links a[href*=join-the-community][aria-current=page] {
    color: var(--coral);
  }
  .topbar .nav-links a.is-active::after,
  .topbar .nav-links a[aria-current=page]::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--orange);
  }
}
@media (max-width: 720px) {
  .topbar {
    padding-inline: 4vw;
  }
}
@media (max-width: 1024px) {
  body.has-mobile-agent-nav {
    padding-bottom: 74px;
  }
  .topbar {
    display: flex;
    align-items: center;
    min-height: 60px;
    padding: 8px 14px;
    gap: 12px;
  }
  .topbar.d-flex {
    display: flex;
  }
  .brand {
    max-width: none;
    min-width: 0;
    flex: 1 1 auto;
  }
  .brand span:last-child {
    display: inline-block;
    overflow: hidden;
    max-width: 100%;
    font-size: clamp(0.66rem, 4.6vw, 0.9rem);
    line-height: 1.1;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .topbar > .nav-links {
    display: none;
  }
  .mobile-menu-toggle {
    display: inline-grid;
    margin-left: auto;
    background: var(--white);
    color: var(--teal-dark);
    border-color: var(--line);
  }
  .mobile-site-menu {
    position: fixed;
    top: 68px;
    right: 12px;
    left: auto;
    width: min(228px, 100vw - 52px);
    z-index: 40;
    gap: 4px;
    padding: 10px 12px;
    border: var(--border-hairline);
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: var(--shadow);
  }
  .mobile-site-menu:not([hidden]) {
    display: grid;
  }
  .mobile-site-menu a,
  .mobile-site-menu .mobile-menu-row {
    min-height: 32px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ink);
    padding: 0;
    appearance: none;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 700;
    text-align: left;
    justify-content: flex-start;
    width: 100%;
    border: 0;
    background: transparent;
  }
  .mobile-agents-toggle::after {
    content: "\f078";
    font-family: var(--font-awesome);
    font-weight: 900;
    font-size: 0.72rem;
  }
  .mobile-agents-toggle[aria-expanded=true]::after {
    content: "\f077";
  }
  .mobile-agents-panel {
    display: grid;
    gap: 3px;
    padding: 2px 0 8px;
  }
  .mobile-agents-panel[hidden] {
    display: none;
  }
  .mobile-agents-panel a {
    min-height: 30px;
    padding-left: 26px;
    color: var(--muted);
    font-size: 0.9rem;
  }
  .mobile-agent-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 39;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 2px;
    padding: 6px max(8px, env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-right));
    border-top: var(--border-hairline);
    background: var(--nav-bg-scrolled);
    backdrop-filter: blur(14px);
  }
  .mobile-agent-nav a {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 3px;
    min-width: 0;
    min-height: 54px;
    padding: 4px 2px;
    color: var(--muted);
    font-size: 0.56rem;
    font-weight: 750;
    line-height: 1;
    text-align: center;
  }
  .mobile-agent-nav a::before,
  .mobile-site-menu a::before,
  .mobile-site-menu .mobile-menu-row::before,
  .mobile-menu-toggle::before {
    display: grid;
    place-items: center;
    flex: 0 0 18px;
    width: 18px;
    min-width: 18px;
    max-width: 18px;
    color: var(--teal-dark);
    font-family: var(--font-awesome);
    font-weight: 900;
    line-height: 1;
    text-align: center;
  }
  .mobile-site-menu .mobile-agents-toggle::before {
    font-size: 0.84em;
  }
  .mobile-agent-nav a::before {
    width: 22px;
    height: 22px;
    font-size: 0.86rem;
  }
  .mobile-agents-toggle::before {
    content: "\f0c0";
  }
  .mobile-menu-toggle::before {
    content: "\f0c9";
  }
  .mobile-menu-toggle[aria-expanded=true]::before {
    content: "\f00d";
  }
  .mobile-agent-nav a[href*=eva]::before,
  .mobile-site-menu a[href*=eva]::before {
    content: "\f4ad";
  }
  .mobile-agent-nav a[href*=solution]::before,
  .mobile-site-menu a[href*=solution]::before {
    content: "\f542";
  }
  .mobile-agent-nav a[href*="3d"]::before,
  .mobile-site-menu a[href*="3d"]::before {
    content: "\f1b3";
  }
  .mobile-agent-nav a[href*=idea]::before,
  .mobile-site-menu a[href*=idea]::before {
    content: "\f0eb";
  }
  .mobile-agent-nav a[href*=emotion-regulator]::before,
  .mobile-site-menu a[href*=emotion-regulator]::before {
    content: "\f004";
  }
  .mobile-agent-nav a[href*=agent-builder]::before,
  .mobile-site-menu a[href*=agent-builder]::before {
    content: "\f544";
  }
  .mobile-site-menu a[href*=about]::before {
    content: "\f05a";
  }
  .mobile-site-menu a[href*=eva-research]::before {
    content: "\f02d";
  }
  .mobile-site-menu a[href*=agent-concept-design]::before {
    content: "\f0ad";
  }
  .mobile-site-menu a[href*=more-agents]::before {
    content: "\f0c0";
  }
  .mobile-site-menu a[href*=join-the-community]::before {
    content: "\f234";
  }
  .mobile-site-menu a[href*=contact]::before {
    content: "\f0e0";
  }
  .mobile-site-menu a[href*=privacy]::before {
    content: "\f023";
  }
  .mobile-agent-nav a[aria-current=page],
  .mobile-agent-nav a.is-active {
    color: var(--ink);
  }
  .mobile-agent-nav a[aria-current=page]::after,
  .mobile-agent-nav a.is-active::after {
    content: "";
    width: 24px;
    height: 3px;
    border-radius: var(--radius-pill);
    background: var(--orange);
  }
}
/* Homepage hero component: the large first-screen introduction block. */
.hero {
  position: relative;
  min-height: min(690px, 80vh - 68px);
  display: grid;
  align-items: center;
  padding: 5.5vh 5vw 9vh;
  background: var(--hero-bg);
  color: var(--white);
}

.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 12vh;
  background: linear-gradient(to bottom, rgba(13, 28, 35, 0), var(--paper));
  pointer-events: none;
}

.hero-media {
  position: absolute;
  inset: 0;
}

.hero-media canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.hero-content {
  position: relative;
  z-index: 1;
  width: min(980px, 100%);
}

.hero h1 {
  caret-color: transparent;
}

.hero .eyebrow {
  color: var(--hero-eyebrow);
}

.hero .lead {
  width: min(980px, 80vw);
  max-width: 100%;
  color: var(--on-dark-82);
  font-size: 1.16rem;
}

.hero-subtitle {
  width: min(760px, 100%);
  margin-bottom: 18px;
  color: var(--avatar-overlay-accent);
  font-size: clamp(1.25rem, 2.2vw, 1.9rem);
  font-weight: 750;
}

.hero-scroll-actions {
  position: absolute;
  left: 5vw;
  right: 5vw;
  bottom: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
  padding-top: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.34);
  color: var(--on-dark-86);
  font-size: 0.82rem;
  font-weight: 300;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0;
}

.hero-scroll-actions a {
  display: grid;
  grid-template-rows: minmax(2.4em, auto) 28px;
  justify-items: center;
  align-items: start;
  align-content: end;
  min-height: 64px;
  gap: 8px;
  padding-top: 8px;
  color: inherit;
  text-decoration: none;
  transition: color 240ms ease, text-shadow 240ms ease;
}

.hero-scroll-actions a.is-auto-highlight {
  color: var(--orange);
  text-shadow: 0 0 18px var(--avatar-overlay-bg-warm);
}

.hero-scroll-actions a::after {
  content: "";
  display: block;
  align-self: end;
  width: 1px;
  height: 28px;
  margin-bottom: -1px;
  background: var(--overlay-white-68);
  transition: background 240ms ease, box-shadow 240ms ease;
}

.hero-scroll-actions a.is-auto-highlight::after {
  background: var(--orange);
  box-shadow: 0 0 18px var(--avatar-overlay-bg-warm);
}

@media (max-width: 760px) {
  .hero {
    min-height: min(590px, 70vh - 58px);
    align-items: start;
    padding: 44px 5vw 96px;
  }
  .hero .lead {
    width: 100%;
    font-size: 1rem;
    line-height: 1.46;
  }
  .hero-content {
    width: 100%;
  }
  .hero-subtitle {
    width: 100%;
    margin-bottom: 12px;
    font-size: clamp(1.05rem, 5vw, 1.35rem);
  }
}
@media (max-width: 460px) {
  .hero {
    min-height: min(372px, 68vh - 58px);
    padding-top: 38px;
  }
}
/* Homepage scroll actions baseline: label, vertical marker and bottom line should read as one clean control. */
@media (max-width: 640px) {
  .hero-scroll-actions {
    bottom: 0;
    gap: 12px;
    padding-top: 10px;
    font-size: 0.66rem;
  }
  .hero-scroll-actions a {
    min-height: 52px;
    grid-template-rows: minmax(2.8em, auto) 24px;
    gap: 6px;
  }
  .hero-scroll-actions a::after {
    height: 24px;
  }
}
.btn,
.btn-icon {
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform var(--transition-fast, 160ms ease), background var(--transition-fast, 160ms ease), border-color var(--transition-fast, 160ms ease);
  vertical-align: middle;
  white-space: nowrap;
  text-wrap: nowrap;
  text-decoration: none;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  padding: 0 18px;
  font-weight: 750;
  line-height: 1;
}

.btn-icon {
  display: inline-grid;
  place-items: center;
  width: 46px;
  background: var(--overlay-white-10);
  color: var(--white);
  border-color: var(--overlay-white-22);
  font-weight: 900;
}

.btn-icon[aria-pressed=true] {
  background: var(--orange);
  color: var(--btn-icon-active-text);
}

.btn:hover,
.btn-icon:hover {
  transform: translateY(-1px);
}

.btn:disabled {
  cursor: wait;
  opacity: 0.76;
  transform: none;
}

.btn:disabled:not(.is-loading) {
  cursor: not-allowed;
  opacity: 0.46;
}

.btn.is-loading {
  gap: 9px;
}

.btn-spinner,
.button-spinner {
  width: 17px;
  height: 17px;
  border: 2px solid var(--btn-spinner-border);
  border-top-color: var(--btn-primary-text);
  border-radius: 50%;
  animation: spin 740ms linear infinite;
}

.btn-primary {
  background: var(--orange);
  color: var(--btn-primary-text);
}

.btn-secondary {
  background: var(--overlay-white-10);
  color: var(--white);
  border-color: var(--overlay-white-28);
}

.btn-secondary.btn-on-light {
  background: var(--white);
  color: var(--teal-dark);
  border-color: var(--teal-overlay-28);
}

.social-icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: var(--overlay-white-10);
  border: 1px solid var(--overlay-white-28);
  color: var(--white);
  font-size: 1.1rem;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.social-icon-link:hover,
.social-icon-link:focus-visible {
  border-color: var(--orange);
  color: var(--orange);
}

.social-icon-link.btn-on-light {
  background: var(--white);
  color: var(--teal-dark);
  border-color: var(--teal-overlay-28);
}

.social-icon-link.btn-on-light:hover,
.social-icon-link.btn-on-light:focus-visible {
  border-color: var(--orange);
  color: var(--orange);
}

.form-inline-actions .btn,
.contact-cta-row .btn,
.review-action-row .btn,
.result-next-actions .btn,
.result-actions .btn,
.form-actions .btn,
.form-panel .btn {
  width: fit-content;
  max-width: 100%;
  line-height: 1.15;
}

.form-inline-actions .btn:only-child,
.form-panel .form-inline-actions .btn:only-child {
  margin-left: auto;
}

.form-inline-actions,
.contact-cta-row,
.review-action-row,
.result-next-actions,
.result-actions {
  gap: 12px;
}

.form-actions:has(.btn-primary) .btn-secondary:first-child,
.form-inline-actions:has(.btn-primary) .btn-secondary:first-child,
.contact-cta-row:has(.btn-primary) .btn-secondary:first-child,
.review-action-row:has(.btn-primary) .btn-secondary:first-child,
.result-next-actions:has(.btn-primary) .btn-secondary:first-child,
.result-actions:not(:has(.btn-primary[href*=review])):has(.btn-primary) .btn-secondary:first-child {
  margin-right: auto;
}

.form-actions .btn-primary:last-child,
.form-inline-actions .btn-primary:last-child,
.contact-cta-row .btn-primary:last-child,
.review-action-row .btn-primary:last-child,
.result-next-actions .btn-primary:last-child,
.result-actions .btn-primary:last-child {
  margin-left: auto;
}

.transcript-card .result-actions .btn {
  margin-left: 0;
  margin-right: 0;
}

.btn.is-disabled,
.btn[aria-disabled=true] {
  cursor: default;
  opacity: 0.58;
  pointer-events: none;
}

.btn.btn-primary.is-disabled,
.btn.btn-primary[aria-disabled=true] {
  background: var(--btn-disabled-bg);
  border-color: var(--btn-disabled-bg);
  color: var(--muted);
  box-shadow: none;
}

@media (max-width: 1180px) {
  .btn,
  .tab-button,
  .home-agent-tab {
    padding-inline: 12px;
    font-size: clamp(0.72rem, 1.9vw, 0.92rem);
  }
}
@media (max-width: 900px) {
  .result-actions .btn,
  .download-actions .btn,
  .result-brief-group .btn {
    min-height: 36px;
    padding-inline: 8px;
    font-size: clamp(0.62rem, 1.65vw, 0.78rem);
  }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.result-brief-actions > .btn-secondary:first-child,
.idea-result-actions > .btn-secondary:first-child {
  margin-right: auto;
}

.result-brief-group {
  gap: 12px;
  margin-left: auto;
}

.result-brief-group .btn,
.result-brief-group .btn-primary[href*=review] {
  order: initial;
  margin: 0;
}

/* Small-phone button compactness. */
@media (max-width: 640px) {
  .btn {
    min-height: 34px;
    padding-inline: 8px;
    border-radius: calc(var(--radius) - 2px);
    font-size: clamp(0.6rem, 2.35vw, 0.7rem);
  }
  .form-actions,
  .form-inline-actions,
  .contact-cta-row,
  .review-action-row,
  .result-next-actions,
  .result-actions,
  .result-brief-group {
    gap: 8px;
  }
  .idea-result-actions {
    flex-wrap: nowrap;
    gap: 6px;
  }
  .idea-result-actions > .btn-secondary:first-child {
    margin-right: 0;
  }
  .idea-result-actions .result-brief-group {
    flex-wrap: nowrap;
    gap: 6px;
    margin-left: auto;
  }
  .idea-result-actions .result-brief-group .btn-primary[href*=review] {
    order: 2;
  }
  .idea-result-actions .result-brief-group .btn-secondary {
    order: 1;
  }
}
/* Result action variant: secondary improvement left, review handoff right. */
.result-actions.review-right > .btn-secondary:first-child {
  order: 0;
  margin-right: auto;
}

.result-actions.review-right .result-brief-group {
  order: 1;
  margin-left: auto;
}

.result-actions.review-right .btn-secondary:first-child {
  margin-right: auto;
}

.result-actions.review-right .btn-primary[href*=review] {
  order: 2;
  margin-left: 0;
  margin-right: 0;
}

.result-actions.review-right .result-brief-group .btn-primary[href*=review] {
  order: 2;
}

.result-actions.review-right .result-brief-group .btn-secondary {
  order: 1;
}

@media (max-width: 640px) {
  .result-actions.review-right {
    flex-wrap: nowrap;
  }
}
/* Download action variant: supporting brief left, primary artifact right. */
.result-actions.download-actions .btn-secondary:first-child {
  margin-right: auto;
}

.result-actions.download-actions .btn-primary:last-child {
  margin-left: auto;
}

/* Component action-row contract: one secondary action sits left; primary action sits right. */
.form-inline-actions:has(.btn-secondary):has(.btn-primary),
.form-actions:has(.btn-secondary):has(.btn-primary),
.result-actions:has(.btn-secondary):has(.btn-primary),
.review-action-row:has(.btn-secondary):has(.btn-primary),
.result-next-actions:has(.btn-secondary):has(.btn-primary) {
  justify-content: space-between;
}

.form-inline-actions:has(.btn-secondary):has(.btn-primary) .btn-secondary:first-child,
.form-actions:has(.btn-secondary):has(.btn-primary) .btn-secondary:first-child,
.result-actions:has(.btn-secondary):has(.btn-primary) .btn-secondary:first-child,
.review-action-row:has(.btn-secondary):has(.btn-primary) .btn-secondary:first-child,
.result-next-actions:has(.btn-secondary):has(.btn-primary) .btn-secondary:first-child {
  margin-left: 0;
  margin-right: auto;
}

.form-inline-actions:has(.btn-secondary):has(.btn-primary) .btn-primary:last-child,
.form-actions:has(.btn-secondary):has(.btn-primary) .btn-primary:last-child,
.result-actions:has(.btn-secondary):has(.btn-primary) .btn-primary:last-child,
.review-action-row:has(.btn-secondary):has(.btn-primary) .btn-primary:last-child,
.result-next-actions:has(.btn-secondary):has(.btn-primary) .btn-primary:last-child {
  margin-left: auto;
  margin-right: 0;
}

.card {
  background: var(--white);
  border: var(--border-hairline);
  border-radius: var(--radius);
  box-shadow: 0 12px 35px rgba(25, 39, 52, 0.06);
}

.card-compact {
  padding: 18px;
}

.card-comfortable {
  padding: 22px;
}

.card-spacious {
  padding: 24px;
}

.card-large {
  padding: 28px;
}

.card-grid {
  gap: 10px;
  min-height: 132px;
}

.card-stack > .btn,
.card > .btn,
.loop-steps article > .btn,
.success-layout .card-stack .btn,
.idea-related-strip .btn,
.future-agent-grid .card .btn {
  margin-top: auto;
  align-self: flex-end;
  justify-self: end;
}

.card-warning {
  background: var(--card-warning-bg);
  border-color: var(--card-warning-border);
}

.card-soft {
  background: var(--teal-soft);
}

.card-result {
  background: var(--paper);
}

.card-note {
  padding: 12px 14px;
  background: var(--teal-note-bg);
  color: var(--teal-dark);
  font-weight: 750;
}

.future-agent-grid .card {
  min-height: 220px;
  gap: 14px;
}

.more-agents-page .future-agent-grid .card {
  min-height: 0;
  gap: 0;
  padding: 18px;
  overflow: hidden;
  background: linear-gradient(0deg, var(--overlay-white-10), var(--overlay-white-10)), var(--avatar-panel-bg);
  color: var(--white);
  border-color: var(--overlay-white-16);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.more-agents-page .agent-card-link {
  height: 100%;
  min-height: 0;
  color: inherit;
  text-decoration: none;
  outline: 0;
}

.more-agents-page .future-agent-grid .card:has(.agent-card-link:hover),
.more-agents-page .future-agent-grid .card:has(.agent-card-link:focus-visible) {
  border-color: var(--orange);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.more-agents-page .agent-card-link:focus-visible {
  box-shadow: inset 0 0 0 3px var(--orange);
}

.more-agents-page .future-agent-grid .card h3 {
  margin-bottom: 0;
}

.more-agents-page .agent-card-link > .eyebrow {
  display: none;
}

.more-agents-page .agent-card-link > h3,
.more-agents-page .agent-card-link > p {
  width: calc(100% + 36px);
  margin-inline: -18px;
  padding-inline: 18px;
  background: linear-gradient(0deg, var(--overlay-white-10), var(--overlay-white-10)), var(--avatar-panel-bg);
}

.more-agents-page .agent-card-link > h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 11px;
  font-size: clamp(0.86rem, 1.6vw + 0.5rem, 1rem);
  color: var(--orange);
}

.more-agents-page .agent-card-link > p {
  margin-bottom: 0;
  padding-top: 3px;
  padding-bottom: 10px;
  overflow: hidden;
  color: var(--white);
  font-size: clamp(0.74rem, 1.1vw + 0.5rem, 0.86rem);
  line-height: 1.38;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.agent-card-arrow {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-pill);
  background: var(--overlay-white-12);
  color: var(--white);
  font-size: 0.72rem;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.more-agents-page .agent-card-link:hover .agent-card-arrow,
.more-agents-page .agent-card-link:focus-visible .agent-card-arrow {
  background: var(--overlay-white-22);
  transform: translateX(3px);
}

.agent-card-avatar {
  display: grid;
  align-items: center;
  min-height: 128px;
  padding: 16px;
  overflow: hidden;
  border: var(--border-hairline);
  border-color: var(--teal-mid-overlay-12);
  border-radius: var(--radius);
  background: radial-gradient(circle at 28% 24%, var(--avatar-ring-inner), transparent 34%), radial-gradient(circle at 78% 18%, var(--avatar-ring-border), transparent 28%), var(--avatar-panel-bg);
}

.more-agents-page .agent-card-avatar {
  min-height: 390px;
  margin: -18px -18px 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius) var(--radius) 0 0;
}

.agent-card-avatar-single {
  justify-items: center;
}

.agent-card-avatar-duo {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.agent-card-avatar img,
.agent-card-portrait {
  width: 96px;
  height: 96px;
  border: 1px solid var(--avatar-portrait-border);
  border-radius: 50%;
  box-shadow: 0 18px 34px var(--avatar-portrait-shadow);
  background: var(--teal-wash);
}

.agent-card-avatar img {
  display: block;
  object-fit: cover;
  object-position: center center;
}

.agent-card-portrait {
  display: grid;
  place-items: center;
  color: var(--avatar-overlay-accent);
  font-size: 2rem;
}

.agent-card-avatar-object .agent-card-portrait {
  border-radius: var(--radius);
}

.more-agents-page .agent-card-avatar img,
.more-agents-page .agent-card-portrait {
  width: 100%;
  height: 390px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.more-agents-page .agent-card-avatar img {
  object-position: center 38%;
  transition: transform var(--transition-fast);
}

.more-agents-page .agent-card-link:hover .agent-card-avatar img,
.more-agents-page .agent-card-link:focus-visible .agent-card-avatar img {
  transform: scale(1.025);
}

.more-agents-page .agent-card-portrait {
  background: transparent;
  font-size: 1.35rem;
}

.more-agents-page .agent-card-avatar-preview {
  background: var(--avatar-panel-bg);
}

.more-agents-page .agent-card-avatar-preview > .agent-page-visual {
  width: 100%;
  min-height: 390px;
  height: 390px;
  border-radius: 0;
  box-shadow: none;
}

.more-agents-page .agent-card-avatar-preview > .agent-chain-visual {
  gap: 16px;
  padding: 12px;
}

.more-agents-page .agent-card-avatar-preview > .agent-chain-visual span {
  font-size: clamp(1.05rem, 1.6vw, 1.45rem);
}

.more-agents-page .agent-card-avatar-preview > .agent-chain-visual strong {
  font-size: clamp(1rem, 1.45vw, 1.25rem);
  white-space: normal;
  text-align: center;
}

.more-agents-page .agent-card-avatar-preview > .agent-chain-visual .chain-separator {
  height: 58px;
}

.more-agents-page .agent-card-avatar-preview > .design-agent-visual {
  min-height: 390px;
  height: 390px;
}

.more-agents-page .agent-card-avatar-preview .design-object-preview {
  width: min(330px, 90%);
  height: min(330px, 90%);
}

.entry-card,
.use-case-strip article,
.loop-steps article {
  border-color: var(--teal-mid-overlay-12);
}

.use-case-strip article,
.loop-steps article {
  width: 100%;
  min-width: 0;
  gap: 10px;
  padding: 18px;
  background: var(--white);
  border: var(--border-hairline);
  border-radius: var(--radius);
  box-shadow: 0 12px 35px rgba(25, 39, 52, 0.06);
}

.agent-round,
.solution-summary-group {
  gap: 16px;
}

.design-result-preview {
  grid-template-columns: minmax(220px, 0.9fr) minmax(260px, 1fr);
  gap: 18px;
  margin-bottom: 16px;
}

.idea-related-strip article {
  width: 100%;
  min-width: 0;
  gap: 12px;
  align-content: start;
}

.idea-related-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.use-case-strip.idea-related-strip {
  gap: 18px;
  align-items: stretch;
  justify-self: stretch;
  align-self: stretch;
  width: 100%;
  max-width: none;
  grid-column: 1/-1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.scenario-avatar-line {
  margin-top: 1em;
}

.scenario-meta,
.insight-item {
  margin-top: 16px;
}

.research-side-stack {
  gap: 14px;
}

.insight-item {
  grid-template-columns: auto 1fr;
  gap: 14px;
  padding: 18px;
}

.intro-grid p,
.section-heading p,
.card p,
.insight-item p,
.research-side-stack .entry-card p,
.scope-card p,
.loop-steps p,
.use-case-strip p,
.site-mode-notice p {
  color: var(--muted);
}

.signal-dot {
  width: 13px;
  height: 13px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--teal);
}

.signal-dot.warning {
  background: var(--coral);
}

.signal-dot.note {
  background: var(--gold);
}

/* Eva's per-insight cards read as a wall of separate boxes. Group them onto
   one shared light panel instead, with a hairline divider between items
   rather than each carrying its own border/shadow/background. */
#insightList {
  gap: 0;
  padding: 6px;
  background: var(--teal-wash);
  border-radius: var(--radius);
}

#insightList .insight-item {
  margin-top: 0;
  padding: 14px 12px;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#insightList .insight-item + .insight-item {
  border-top: 1px solid rgba(19, 40, 45, 0.08);
}

/* In the homepage carousel, the three insights sit side by side in one row
   instead of stacked — a vertical divider between them reads correctly
   there, a horizontal one would not. */
@media (min-width: 1181px) {
  #feedback-agent.home-agent-slide #insightList .insight-item + .insight-item {
    border-top: 0;
    border-left: 1px solid rgba(19, 40, 45, 0.08);
  }
}
.entry-card p {
  margin: 0;
  color: var(--muted);
  overflow: visible;
}

.source-card-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.eva-research-section .source-card-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.contact-band {
  gap: 18px;
  padding: 28px;
  border-radius: var(--radius);
}

.contact-band > div {
  min-width: 0;
}

.contact-band .btn {
  margin-left: auto;
  align-self: flex-end;
}

.loop-steps {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 24px;
}

.inline-result-card .insight-list {
  gap: 14px;
}

/* The per-fragment observations (second insight-list) join into one shared
   light panel, same idea as #insightList above, instead of each fragment
   reading as its own separate white box. */
.inline-result-card > .insight-list + .insight-list {
  gap: 0;
  margin-top: 16px;
  padding: 6px;
  padding-top: 6px;
  border-top: 0;
  background: var(--teal-wash);
  border-radius: var(--radius);
}

.inline-result-card > .insight-list + .insight-list > .insight-item {
  margin-top: 0;
  padding: 14px 12px;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.inline-result-card > .insight-list + .insight-list > .insight-item + .insight-item {
  border-top: 1px solid rgba(19, 40, 45, 0.08);
}

.inline-result-card .insight-item + .insight-item {
  margin-top: 0;
}

.limit-card p {
  color: var(--muted);
}

@media (max-width: 860px) {
  .intro-grid,
  .agent-flow,
  .use-case-strip,
  .future-agent-grid,
  .source-card-grid,
  .design-result-preview {
    grid-template-columns: 1fr;
  }
  .loop-steps {
    grid-template-columns: 1fr;
  }
  .eva-research-section .source-card-grid {
    grid-template-columns: 1fr;
  }
}
.card > .result-actions,
.card-stack > .result-actions {
  margin-top: auto;
}

/* Mobile related-agent strips show one random suggestion to keep compact pages readable. */
@media (max-width: 640px) {
  .mobile-random-related {
    grid-template-columns: 1fr;
    align-items: stretch;
    justify-self: stretch;
    align-self: stretch;
    width: 100%;
    max-width: none;
  }
  .mobile-random-related > article {
    width: 100%;
    max-width: none;
  }
  .mobile-random-related > article:not([data-mobile-random-visible=true]) {
    display: none;
  }
  .use-case-strip.idea-related-strip {
    grid-template-columns: 1fr;
  }
}
.form-panel {
  gap: 16px;
  min-width: 0;
}

.form-label {
  gap: 8px;
  color: var(--teal-dark);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.form-control {
  width: 100%;
  padding: 12px;
  border: var(--border-hairline);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 400;
  line-height: 1.5;
  text-transform: none;
  box-shadow: inset 0 1px 3px rgba(23, 33, 43, 0.07);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.form-control:focus {
  border-color: var(--teal);
  box-shadow: inset 0 1px 3px rgba(23, 33, 43, 0.07), 0 0 0 3px var(--teal-wash);
  outline: none;
}

input.form-control,
select.form-control {
  min-height: 48px;
}

select.form-control option {
  font: inherit;
}

textarea.form-control {
  min-height: var(--textarea-height, 180px);
  height: var(--textarea-height, 180px);
  resize: vertical;
}

.form-control-transcript {
  --textarea-height: 150px;
  --textarea-height-mobile: 116px;
}

.transcript-card {
  align-content: start;
  gap: 14px;
  margin-top: 0;
}

.scrolling-transcript {
  --transcript-height: 150px;
  --transcript-height-mobile: 116px;
  height: var(--transcript-height);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 12px;
  background: var(--teal-soft);
  border: var(--border-hairline);
  border-radius: var(--radius);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58);
  scroll-behavior: smooth;
}
.scrolling-transcript .transcript-line {
  margin: 0;
  padding: 1px 0;
}
.scrolling-transcript .transcript-line--interim {
  opacity: 0.55;
}
.scrolling-transcript .transcript-line:not(.transcript-line--interim) {
  animation: transcriptLineIn 180ms ease-out both;
}

@keyframes transcriptLineIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 640px) {
  .scrolling-transcript {
    height: var(--transcript-height-mobile);
  }
}
.transcript-card > .form-inline-actions {
  align-self: start;
  margin-top: 0;
}

.form-panel form {
  gap: 14px;
}

/* Small-phone form compactness: keep speaking-agent transcripts visible above the fold. */
@media (max-width: 640px) {
  .form-panel {
    gap: 12px;
  }
  .form-control {
    padding: 10px;
    font-size: 0.86rem;
  }
  input.form-control,
  select.form-control {
    min-height: 42px;
  }
  textarea.form-control {
    min-height: var(--textarea-height-mobile, 118px);
    height: var(--textarea-height-mobile, 118px);
  }
  .mock-input,
  .transcript-card .mock-input {
    padding: 10px;
  }
}
/* Shared placeholder typography: textarea/input suggestion text is consistent site-wide. */
.form-control::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--muted);
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 400;
  line-height: 1.5;
  opacity: 1;
  text-transform: none;
}

/* Mobile form rhythm: put start/stop actions below textareas now avatars have mic buttons. */
@media (max-width: 640px) {
  .form-panel .idea-input-header {
    display: contents;
  }
  .form-panel .idea-input-header .form-label {
    order: 10;
    width: 100%;
    max-width: none;
  }
  .form-panel .idea-input-header + .mock-input,
  .form-panel .idea-input-header + textarea.form-control {
    order: 20;
  }
  .form-panel .idea-input-header .form-inline-actions,
  .form-panel .mock-input + .form-inline-actions,
  .form-panel textarea.form-control + .form-inline-actions,
  #builderForm > .form-inline-actions {
    order: 30;
    width: 100%;
    justify-content: flex-end;
    margin-left: 0;
  }
  #builderForm > .form-label:first-of-type {
    order: 20;
  }
  .form-control::placeholder,
  input::placeholder,
  textarea::placeholder {
    font-size: 0.86rem;
  }
}
.interaction-progress {
  grid-template-columns: minmax(0, 1fr) minmax(var(--avatar-time-label-width), auto);
  column-gap: 10px;
  align-items: center;
  flex: 1;
  min-width: 0;
  max-width: none;
}

.interaction-progress-bar {
  height: 9px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--overlay-white-16);
}

.interaction-progress-bar span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #75c6c3, #f4a261);
  transition: width 180ms linear;
}

.interaction-progress > span {
  justify-self: end;
  min-width: var(--avatar-time-label-width);
  color: var(--avatar-time-label-color);
  font-size: var(--avatar-time-label-font-size);
  font-weight: 500;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .interaction-progress > span {
    font-size: var(--avatar-time-label-font-size-mobile);
  }
}
/* Dimension chips used below agent introductions. */
.dimension-list {
  gap: 8px;
  margin-top: 18px;
  overflow: visible;
}

.dimension-list span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
  min-height: 32px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  background: var(--soft);
  color: var(--teal-dark);
  font-size: 0.84rem;
  font-weight: 800;
  white-space: nowrap;
}

@media (max-width: 1180px) {
  .dimension-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
    gap: 6px;
    width: 100%;
  }
  .dimension-list span {
    min-width: 0;
    padding-inline: 6px;
    overflow: hidden;
    font-size: clamp(0.62rem, 1.35vw, 0.78rem);
    line-height: 1.05;
    text-overflow: ellipsis;
  }
}
@media (max-width: 620px) {
  .dimension-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* Shared panel and visual-panel components. */
.agent-page-visual {
  min-height: 320px;
  padding: 28px;
  border-radius: var(--radius);
  background: var(--avatar-panel-bg);
  color: var(--white);
  box-shadow: var(--shadow);
}

.result-actions.align-end,
.form-actions,
.form-panel .btn,
.form-actions .btn {
  justify-self: end;
}

.contact-cta-row {
  margin-top: 18px;
}

.card-stack .contact-cta-row {
  margin-top: 18px;
}

.form-actions {
  gap: 10px;
}

.review-success-actions {
  gap: 12px;
  margin-top: auto;
}

.review-success-actions .btn {
  width: auto;
}

.value-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.value-grid .entry-card,
.value-grid .card {
  height: 100%;
}

.value-grid .entry-card p {
  display: block;
  -webkit-line-clamp: unset;
  -webkit-box-orient: initial;
  overflow: visible;
}

.site-mode-notice {
  width: min(1120px, 100% - 40px);
  margin: 24px auto 0;
  padding: 22px;
  border: 1px solid rgba(19, 40, 45, 0.14);
  background: var(--teal-faint);
  box-shadow: var(--shadow-soft);
}

@media (max-width: 760px) {
  .value-grid {
    grid-template-columns: 1fr;
  }
}
.feedback-panel {
  gap: 14px;
}

@media (max-width: 620px) {
  .control-strip {
    flex-wrap: wrap;
  }
}
/* Shared status label component for agent pages, result pages and demo headers. */
.demo-status {
  justify-self: end;
  width: fit-content;
  max-width: 280px;
  margin: 0 0 10px auto;
  padding: 9px 12px;
  border: 1px solid rgba(23, 109, 114, 0.24);
  border-radius: var(--radius-pill);
  background: var(--teal-wash);
  color: var(--teal-dark);
  font-size: 0.86rem;
  font-weight: 800;
  white-space: nowrap;
}

.section-heading.with-status .demo-status,
.agent-detail-page .demo-status,
.idea-sharper-page .demo-status,
.emotion-regulator-page .demo-status,
.agent-builder-page .demo-status,
.result-section .demo-status,
.review-page-section .demo-status {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  align-self: start;
}

@media (max-width: 520px) {
  .demo-status {
    padding: 7px 9px;
    font-size: 0.74rem;
  }
}
.status-pill:not(.avatar-live-surface) {
  min-width: 0;
  padding: 9px 12px;
  border-radius: var(--radius-pill);
  background: var(--overlay-white-12);
  color: var(--white);
  font-size: 0.9rem;
}

@media (max-width: 620px) {
  .status-pill:not(.avatar-live-surface) {
    width: 100%;
    margin-left: 0;
  }
}
/* Mobile compact headers hide demo status pills so content moves up. */
@media (max-width: 640px) {
  .section-heading.with-status .demo-status,
  .agent-detail-page .demo-status,
  .home-agent-demo .demo-status,
  .result-section .demo-status,
  .review-page-section .demo-status {
    display: none;
  }
}
/* Shared agent chain visuals and labels. */
.agent-chain-visual,
.home-solution-chain,
.result-solution-chain {
  justify-items: center;
  align-content: center;
  gap: 14px;
  min-height: 320px;
  padding: 28px;
  border-radius: var(--radius);
  background: var(--avatar-panel-bg);
  color: var(--white);
  box-shadow: var(--shadow);
}

.agent-chain-visual span,
.home-solution-chain span,
.result-solution-chain span,
.chain-agent-label {
  color: var(--on-dark-92);
  font-weight: 800;
  white-space: nowrap;
}

.agent-chain-visual strong,
.home-solution-chain strong,
.result-solution-chain strong,
.agent-pair-chain strong {
  color: var(--chain-warm-text);
  font-size: clamp(0.82rem, 1.2vw, 1rem);
  white-space: nowrap;
}

.chain-agent-label {
  min-width: 130px;
}

.chain-person {
  width: 54px;
  height: 54px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
}

.agent-pair-chain {
  grid-template-columns: auto auto auto auto auto;
  column-gap: 14px;
  justify-items: center;
}

.chain-divider {
  display: none;
}

.chain-separator,
.agent-chain-visual .chain-separator,
.home-solution-chain .chain-separator,
.result-solution-chain .chain-separator,
.agent-pair-chain .chain-separator {
  display: inline-grid;
  place-items: center;
  width: 3px;
  min-width: 3px;
  height: 42px;
  padding: 0;
  border-radius: var(--radius-pill);
  background: var(--avatar-text-muted);
  color: transparent;
  font-size: 0;
  font-weight: 300;
  line-height: 0;
  font-style: normal;
}

@media (max-width: 860px) {
  .agent-chain-visual,
  .home-solution-chain,
  .result-solution-chain {
    grid-template-columns: 1fr;
  }
}
/* Shared paired speaking-agent component. Uses the same avatar-panel base as Eva. */
.agent-pair {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  width: min(1180px, 100%);
  justify-self: center;
  padding: 18px;
  background: var(--avatar-panel-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.agent-pair .avatar-panel,
.agent-pair-member {
  position: relative;
  min-height: 560px;
  background: var(--overlay-white-4p5);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: none;
  overflow: hidden;
}

.avatar-panel.is-speaking-panel {
  border-color: var(--mic-btn-hover-border);
  box-shadow: 0 0 0 2px rgba(244, 162, 97, 0.16), 0 22px 58px rgba(0, 0, 0, 0.28);
}

.agent-pair .avatar-info {
  display: grid;
  gap: 12px;
  padding: 22px 22px 0;
}

.agent-pair .agent-live-line {
  order: 3;
  align-self: end;
  justify-self: stretch;
  display: block;
  width: auto;
  max-width: none;
  margin: 14px 22px 12px;
  padding: 10px 14px;
  border-radius: var(--avatar-overlay-radius);
  overflow: hidden;
  box-sizing: border-box;
}

.agent-pair .agent-intro-line:not(.agent-tile-live):not([hidden]) {
  height: auto;
  min-height: calc(1em * var(--avatar-live-line-height) + 20px);
  max-height: var(--avatar-live-box-height);
  border: var(--avatar-overlay-border-style);
  border-radius: var(--avatar-overlay-radius);
  background: var(--avatar-overlay-bg);
  color: var(--avatar-overlay-text);
  font-size: var(--avatar-live-font-size);
  font-weight: var(--avatar-live-font-weight);
  line-height: var(--avatar-live-line-height);
}

.agent-pair .agent-tile-live,
.agent-pair .avatar-panel[data-tile-mode=live] .agent-tile-live {
  height: var(--avatar-live-box-height);
  min-height: var(--avatar-live-box-height);
  max-height: var(--avatar-live-box-height);
  border-radius: var(--avatar-overlay-radius);
  border: var(--avatar-overlay-border-style);
  background: var(--avatar-overlay-bg-strong);
  color: var(--avatar-overlay-accent);
  font-size: var(--avatar-live-font-size);
  font-weight: var(--avatar-live-font-weight);
  line-height: var(--avatar-live-line-height);
  white-space: normal;
  -webkit-line-clamp: unset;
  line-clamp: unset;
}

.agent-pair .agent-live-line[hidden] {
  display: none;
}

.agent-pair .avatar-panel.is-listening-panel:not(.is-speaking-panel) .agent-intro-line:not(.agent-tile-live):not([hidden]),
.agent-pair .avatar-panel.is-listening-panel:not(.is-speaking-panel) .agent-live-line:not(.agent-tile-live):not([hidden]) {
  background: var(--avatar-overlay-bg-warm);
  border-color: var(--avatar-listening-border);
  color: var(--avatar-overlay-accent);
}

.agent-pair .avatar-panel.is-speaking-panel .agent-intro-line:not(.agent-tile-live):not([hidden]) {
  border-radius: var(--avatar-overlay-radius);
  border: var(--avatar-overlay-border-style);
  background: var(--avatar-overlay-bg-strong);
  color: var(--avatar-overlay-accent);
}

.agent-pair .avatar-stage,
.agent-pair .compact-avatar-stage {
  min-height: 360px;
}

.agent-pair .idea-session-progress {
  grid-column: 1/-1;
  width: 100%;
  padding: 4px 0 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--white);
  box-shadow: none;
}

.agent-pair .idea-session-progress .tag {
  display: none;
}

.agent-pair .interaction-progress {
  color: var(--on-dark-82);
}

.agent-pair .interaction-progress-bar {
  background: var(--overlay-white-16);
}

.mobile-agent-intro {
  display: none;
}

@media (max-width: 1180px) {
  .agent-pair {
    grid-template-columns: 1fr;
  }
  .agent-pair .avatar-panel,
  .agent-pair-member {
    min-height: 500px;
  }
}
@media (max-width: 640px) {
  .agent-pair {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 10px;
    padding: 10px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
    overflow-x: clip;
    contain: layout paint;
    justify-items: stretch;
  }
  .agent-pair .avatar-panel,
  .agent-pair-member {
    grid-column: 1;
    grid-row: 1;
    display: grid;
    grid-template-rows: auto auto auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    justify-self: stretch;
    min-height: 430px;
    border-radius: calc(var(--radius) - 2px);
    opacity: 1;
    transform: none;
    translate: none;
    left: auto;
    right: auto;
    z-index: 1;
    transition: opacity 1800ms ease-in-out, visibility 1800ms ease-in-out;
  }
  .agent-pair:not([data-active-agent=focus]) > .agent-pair-member:nth-of-type(2),
  .agent-pair[data-active-agent=focus] > .agent-pair-member:first-of-type {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: none;
    translate: none;
  }
  .agent-pair[data-active-agent=focus] > .agent-pair-member:nth-of-type(2) {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    translate: none;
    z-index: 2;
  }
  .agent-pair:not([data-active-agent=focus]) > .agent-pair-member:first-of-type {
    z-index: 2;
  }
  .agent-pair .avatar-info {
    gap: 7px;
    padding: 14px 72px 0 14px;
  }
  .agent-pair .tag {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
  }
  .agent-pair .agent-live-line {
    align-self: end;
    justify-self: stretch;
    width: auto;
    max-width: none;
    margin: 12px 14px;
    padding: var(--control-padding-mobile);
  }
  .agent-pair .agent-intro-line:not(.agent-tile-live):not([hidden]) {
    height: auto;
    min-height: calc(1em * var(--avatar-live-line-height) + 16px);
    max-height: var(--avatar-live-box-height-mobile);
    font-size: var(--avatar-live-font-size-mobile);
  }
  .agent-pair .agent-tile-live,
  .agent-pair .avatar-panel[data-tile-mode=live] .agent-tile-live {
    display: block;
    height: var(--avatar-live-box-height-mobile);
    min-height: var(--avatar-live-box-height-mobile);
    max-height: var(--avatar-live-box-height-mobile);
    border-radius: var(--avatar-overlay-radius);
    border: var(--avatar-overlay-border-style);
    background: var(--avatar-overlay-bg-strong);
    color: var(--avatar-overlay-accent);
    font-size: var(--avatar-live-font-size-mobile);
    font-weight: var(--avatar-live-font-weight);
    line-height: var(--avatar-live-line-height);
    overflow: hidden;
    white-space: normal;
    -webkit-line-clamp: unset;
    line-clamp: unset;
  }
  .agent-pair .avatar-panel.is-speaking-panel .agent-intro-line:not(.agent-tile-live):not([hidden]) {
    border-radius: var(--avatar-overlay-radius);
  }
  .agent-pair .avatar-stage,
  .agent-pair .compact-avatar-stage {
    min-height: 280px;
    padding-block: 8px 12px;
    --avatar-circle-size: var(--avatar-circle-size-tablet);
  }
  .agent-pair .portrait-avatar {
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.26), 0 0 0 12px rgba(120, 204, 204, 0.045);
  }
  .agent-pair .idea-session-progress {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 2px 4px 0;
    box-sizing: border-box;
  }
  .agent-pair .idea-session-progress .interaction-progress {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .desktop-agent-intro {
    display: none;
  }
  .mobile-agent-intro {
    display: inline;
  }
  .agent-pair .agent-live-line[hidden] {
    display: none;
  }
}
/* Homepage agent demo component. */
.agent-demo {
  padding-top: 70px;
}

.agent-demo.is-active-agent-demo {
  background: var(--teal-surface);
}

.agent-demo .section-heading.with-status {
  margin-bottom: 22px;
}

.agent-demo .feedback-panel.has-analysis .scenario-tabs,
.agent-demo .feedback-panel.has-analysis #scenarioCard,
.agent-demo .feedback-panel.has-analysis #insightList,
.agent-detail-page .feedback-panel.has-analysis .scenario-tabs,
.agent-detail-page .feedback-panel.has-analysis #scenarioCard,
.agent-detail-page .feedback-panel.has-analysis #insightList {
  display: none;
}

.agent-demo .feedback-panel.has-analysis,
.agent-detail-page .feedback-panel.has-analysis {
  display: none;
}

.agent-demo .agent-layout,
.agent-demo .multi-agent-layout,
.agent-demo .design-layout {
  gap: 24px;
}

.agent-demo .agent-layout {
  grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr);
}

.agent-demo .agent-layout > .avatar-panel {
  grid-column: 1;
  grid-row: 1/span 2;
}

.agent-demo .agent-layout > .transcript-card {
  grid-column: 2;
  grid-row: 1;
}

.agent-demo .agent-layout > .feedback-panel {
  grid-column: 2;
  grid-row: 2;
}

/* Only the three result-insight cards span the full card width, below the
   avatar/transcript/tabs row — the tabs and scenario card stay in their
   narrower column next to the avatar as before. */
.agent-demo .agent-layout > #insightList {
  grid-column: 1/-1;
  grid-row: 3;
}

.agent-demo .multi-agent-layout {
  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
}

.agent-demo .design-layout {
  grid-template-columns: minmax(260px, 1fr) minmax(520px, 2fr);
}

.agent-demo .form-panel,
.agent-demo canvas,
.agent-demo .home-solution-chain,
.agent-demo .agent-flow,
.agent-demo .design-layout > #designPrompt,
.agent-demo .design-layout > #designNotes {
  width: 100%;
  max-width: none;
}

.agent-demo .multi-agent-layout .form-panel {
  grid-column: 1;
  grid-row: 1;
}

.agent-demo .home-solution-chain {
  grid-column: 2;
  grid-row: 1;
}

.agent-demo .agent-flow {
  grid-column: 1/-1;
  grid-row: 2;
}

.agent-demo .design-layout > #designPrompt {
  grid-column: 2;
  grid-row: 1;
}

.agent-demo .design-layout > #designNotes {
  grid-column: 1/-1;
  grid-row: 2;
}

.agent-demo canvas {
  grid-column: 1;
  grid-row: 1;
}

@media (max-width: 1180px) {
  .agent-demo .agent-layout,
  .agent-demo .multi-agent-layout,
  .agent-demo .design-layout {
    grid-template-columns: 1fr;
    width: 100%;
    max-width: none;
  }
  .agent-demo .agent-layout > *,
  .agent-demo .multi-agent-layout > *,
  .agent-demo .design-layout > * {
    width: 100%;
    max-width: none;
  }
  .agent-demo .agent-layout > .avatar-panel,
  .agent-demo .agent-layout > .transcript-card,
  .agent-demo .agent-layout > .feedback-panel,
  .agent-demo .home-solution-chain,
  .agent-demo .agent-flow,
  .agent-demo .form-panel,
  .agent-demo .design-notes,
  .agent-demo canvas {
    grid-column: 1/-1;
    grid-row: auto;
  }
}
.agent-demo .agent-layout > .inline-result,
.agent-detail-page .agent-layout > .inline-result {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
}

@media (max-width: 1180px) {
  .agent-demo .agent-layout > .inline-result,
  .agent-detail-page .agent-layout > .inline-result {
    grid-column: 1;
  }
}
/* Mobile home tabs to active demo rhythm: keep the active label visually attached to its tab. */
@media (max-width: 640px) {
  .agent-demo {
    padding-top: 32px;
  }
  .agent-demo .section-heading.with-status {
    margin-bottom: 16px;
  }
}
/* Mobile home agent demo labels: hide the repeated status pills under the main tabs. */
@media (max-width: 640px) {
  .agent-demo .demo-status {
    display: none;
  }
}
.scenario-tabs {
  overflow: visible;
  border-bottom: 1px solid var(--line);
}

.scenario-tabs {
  display: flex;
  width: 100%;
  max-width: 100%;
  gap: 1px;
  flex-wrap: nowrap;
  overflow: hidden;
  border: var(--border-hairline);
  border-radius: var(--radius);
  background: var(--line);
}

.tab-button {
  flex: 1 1 0;
  min-width: 0;
  min-height: 42px;
  border-bottom: 3px solid transparent;
  color: var(--muted);
  cursor: pointer;
  font-weight: 750;
  white-space: nowrap;
  text-wrap: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: none;
}

.tab-button {
  padding: 0 10px;
  border: 0;
  border-radius: 0;
  background: var(--white);
  font-size: 0.82rem;
}

.tab-button.is-active {
  background: var(--teal-wash);
  color: var(--teal-dark);
  border-bottom-color: var(--orange);
  box-shadow: none;
}

@media (max-width: 1180px) {
  .btn,
  .tab-button {
    padding-inline: 12px;
    font-size: clamp(0.72rem, 1.9vw, 0.92rem);
  }
}
@media (max-width: 740px) {
  .home-agent-demo .scenario-tabs {
    width: 100%;
  }
  .home-agent-demo .scenario-tabs .tab-button,
  .agent-detail-page .scenario-tabs .tab-button {
    flex: 1 1 0;
    min-width: 0;
    font-size: clamp(0.58rem, 2.45vw, 0.74rem);
    padding-inline: 5px;
  }
}
@media (max-width: 720px) {
  .home-agent-demo .tab-button {
    padding: 0 7px;
    font-size: 0.72rem;
  }
}
/* Shared avatar component. Used by Eva, future speaking agents and compact portrait agents. */
.avatar-panel {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  min-width: 0;
  min-height: 600px;
  background: var(--avatar-panel-bg);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.avatar-info {
  order: 1;
  padding: 22px 72px 0 22px;
  color: var(--white);
}

.avatar-panel .avatar-info .tag {
  margin-bottom: 0;
  line-height: 1.2;
}

.avatar-info:empty {
  min-height: 0;
  padding: 0;
}

.avatar-info:not(:has(.tag)) {
  min-height: 0;
  padding: 0;
}

.avatar-info h3 {
  margin-bottom: 8px;
  font-size: 1.22rem;
}

.avatar-info p {
  color: var(--avatar-text-muted);
}

.avatar-stage,
.compact-avatar-stage {
  order: 2;
  position: relative;
  display: grid;
  /* An explicit 1fr column gives the grid area a definite width. Without it
     the column auto-sizes to its content, which makes any percentage width
     on .avatar/.portrait-avatar circular (resolves to a much smaller "auto"
     size instead of the intended percentage). */
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  min-height: 360px;
  padding-top: 12px;
  /* Single source of truth for the ring size. The portrait derives its size
     from this so it can never grow larger than the ring around it. */
  --avatar-circle-size: var(--avatar-circle-size-base);
}

.compact-avatar-stage {
  min-height: 320px;
}

.listening-ring {
  position: absolute;
  width: var(--avatar-circle-size);
  aspect-ratio: 1;
  border: 1px solid var(--avatar-ring-border);
  border-radius: 50%;
}

.listening-ring::before,
.listening-ring::after {
  content: "";
  position: absolute;
  inset: 12%;
  border: 1px solid var(--avatar-ring-inner);
  border-radius: inherit;
}

.listening-ring::after {
  inset: 26%;
  border-color: var(--avatar-ring-core);
}

.avatar {
  position: relative;
  display: grid;
  justify-items: center;
  min-width: 0;
  min-height: 0;
  transform-origin: 50% 85%;
}

.portrait-avatar {
  --avatar-image-y: 9px;
  --avatar-image-scale: 1.08;
  --avatar-image-speaking-scale: 1.09;
  --avatar-image-position: center 46%;
  /* Same size as the listening ring so the photo always fills it edge to
     edge, regardless of which breakpoint sets --avatar-circle-size. */
  width: var(--avatar-circle-size);
  aspect-ratio: 1;
  place-items: center;
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--avatar-portrait-border);
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 26px 70px var(--avatar-portrait-shadow), 0 0 0 24px var(--avatar-portrait-glow);
}

.avatar img,
.portrait-avatar img,
.idea-portrait img,
.eva-portrait {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  object-fit: var(--avatar-image-fit, cover);
  object-position: var(--avatar-image-position, center center);
  transform: translateY(var(--avatar-image-y, 0)) scale(var(--avatar-image-scale, 1));
}

.speech-pulse {
  position: absolute;
  left: 50%;
  bottom: 18%;
  width: 42px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--avatar-speech-pulse);
  opacity: 0;
  transform: translateX(-50%);
}

.avatar.is-listening,
.avatar.is-speaking {
  animation: avatarSlowFloat 6.8s ease-in-out infinite;
}

.avatar.is-speaking .speech-pulse {
  animation: talk 420ms ease-in-out infinite;
  opacity: 1;
}

.portrait-avatar.is-listening::after,
.portrait-avatar.is-speaking::after {
  content: "";
  position: absolute;
  inset: 7%;
  border: 2px solid var(--avatar-speaking-ring);
  border-radius: 50%;
  animation: avatarWave 1.4s ease-out infinite;
}

.avatar.is-speaking .portrait-avatar img,
.avatar.is-speaking .eva-portrait,
.portrait-avatar.is-speaking .eva-portrait {
  transform: translateY(var(--avatar-image-y, 0)) scale(var(--avatar-image-speaking-scale, 1.01));
}

.portrait-avatar.is-listening .eva-portrait {
  animation: listeningDrift 1.8s ease-in-out infinite;
}

@keyframes avatarSlowFloat {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  34% {
    transform: translateY(-3px) rotate(-0.18deg);
  }
  68% {
    transform: translateY(2px) rotate(0.16deg);
  }
}
@keyframes talk {
  0%, 100% {
    height: 8px;
    width: 42px;
  }
  50% {
    height: 16px;
    width: 58px;
  }
}
@keyframes avatarWave {
  0% {
    opacity: 0.72;
    transform: scale(0.88);
  }
  100% {
    opacity: 0;
    transform: scale(1.18);
  }
}
@keyframes speakingBob {
  0%, 100% {
    transform: scale(1.01) translateY(0);
  }
  50% {
    transform: scale(1.035) translateY(-4px);
  }
}
@keyframes speakingProsody {
  0%, 100% {
    transform: scale(1.012) rotate(0deg) translateY(0);
  }
  18% {
    transform: scale(1.018) rotate(-1.35deg) translateY(-2px);
  }
  38% {
    transform: scale(1.022) rotate(1.15deg) translateY(1px);
  }
  58% {
    transform: scale(1.018) rotate(0deg) translateY(-3px);
  }
  76% {
    transform: scale(1.015) rotate(0.85deg) translateY(0);
  }
}
@keyframes prosodyNod {
  0%, 100% {
    transform: rotate(0deg) translateY(0);
  }
  28% {
    transform: rotate(-0.8deg) translateY(-2px);
  }
  54% {
    transform: rotate(0.65deg) translateY(1px);
  }
  74% {
    transform: rotate(0deg) translateY(-2px);
  }
}
.avatar.prosody-nod {
  animation: prosodyNodOnce 520ms cubic-bezier(0.42, 0, 0.2, 1) 1;
}

.avatar.prosody-tilt-left {
  animation: prosodyTiltLeft 620ms cubic-bezier(0.42, 0, 0.2, 1) 1;
}

.avatar.prosody-tilt-right {
  animation: prosodyTiltRight 620ms cubic-bezier(0.42, 0, 0.2, 1) 1;
}

.avatar.prosody-listen {
  animation: prosodyListen 760ms cubic-bezier(0.42, 0, 0.2, 1) 1;
}

.avatar.prosody-glance .portrait-avatar img,
.avatar.prosody-glance .eva-portrait {
  animation: prosodyGlance 680ms cubic-bezier(0.42, 0, 0.2, 1) 1;
}

@keyframes prosodyNodOnce {
  0%, 100% {
    transform: rotate(0deg) translateY(0);
  }
  42% {
    transform: rotate(0deg) translateY(3px);
  }
  68% {
    transform: rotate(0deg) translateY(-1px);
  }
}
@keyframes prosodyTiltLeft {
  0%, 100% {
    transform: rotate(0deg) translateX(0);
  }
  45% {
    transform: rotate(-1.4deg) translateX(-2px);
  }
}
@keyframes prosodyTiltRight {
  0%, 100% {
    transform: rotate(0deg) translateX(0);
  }
  45% {
    transform: rotate(1.3deg) translateX(2px);
  }
}
@keyframes prosodyListen {
  0%, 100% {
    transform: rotate(0deg) translateY(0);
  }
  36% {
    transform: rotate(-0.7deg) translateY(2px);
  }
  72% {
    transform: rotate(0.4deg) translateY(1px);
  }
}
@keyframes prosodyGlance {
  0%, 100% {
    object-position: center center;
    transform: scale(1.01);
  }
  42% {
    object-position: 48% 50%;
    transform: scale(1.012) translateX(-1px);
  }
}
@keyframes listeningDrift {
  0%, 100% {
    transform: translateX(-2px) scale(1.01);
  }
  50% {
    transform: translateX(2px) scale(1.02);
  }
}
@media (max-width: 620px) {
  .avatar-panel {
    min-height: 500px;
  }
}
@media (max-width: 480px) {
  .avatar-panel {
    min-height: 495px;
  }
  .avatar-stage {
    min-height: 220px;
    padding-block: 8px;
    --avatar-circle-size: var(--avatar-circle-size-mobile);
  }
}
.avatar-live-surface {
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
  font-family: inherit;
}

.agent-live-line:not(.agent-tile-live),
.single-agent-live-line {
  display: -webkit-box;
  min-height: 2.7em;
  overflow: hidden;
  color: var(--avatar-overlay-text);
  font-size: var(--avatar-live-font-size);
  font-weight: var(--avatar-live-font-weight);
  line-height: var(--avatar-live-line-height);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.agent-live-line,
.single-agent-live-line {
  margin: 0;
}

.avatar-panel > .single-agent-live-line {
  align-self: start;
  justify-self: stretch;
  width: 100%;
  margin: 0 0 14px;
  padding-right: 72px;
  font-family: inherit;
  text-align: left;
}

.agent-live-line[hidden],
.single-agent-live-line[hidden] {
  display: none;
}

.avatar-panel.is-speaking-panel .agent-live-line:not([hidden]):not(.agent-tile-live),
.avatar-panel.is-speaking-panel .single-agent-live-line:not([hidden]),
.avatar.is-speaking ~ .agent-live-line:not([hidden]):not(.agent-tile-live),
.single-agent-live-line.is-active:not([hidden]) {
  display: block;
  width: 100%;
  max-width: 100%;
  height: var(--avatar-live-box-height);
  min-height: var(--avatar-live-box-height);
  max-height: var(--avatar-live-box-height);
  padding: 10px 14px;
  box-sizing: border-box;
  border: var(--avatar-overlay-border-style);
  border-radius: var(--avatar-overlay-radius);
  background: var(--avatar-overlay-bg-strong);
  color: var(--avatar-overlay-accent);
  overflow-y: auto;
  overflow-x: hidden;
  white-space: normal;
  scroll-behavior: smooth;
}

.avatar-panel.is-listening-panel:not(.is-speaking-panel) .status-pill,
.avatar-panel.is-listening-panel:not(.is-speaking-panel) .avatar-status-line,
.avatar-panel.is-listening-panel:not(.is-speaking-panel) .agent-intro-line:not(.agent-tile-live):not([hidden]),
.avatar-panel.is-listening-panel:not(.is-speaking-panel) .agent-live-line:not(.agent-tile-live):not([hidden]) {
  background: var(--avatar-overlay-bg-warm);
  border-color: var(--avatar-listening-border);
  color: var(--avatar-overlay-accent);
}

.avatar-panel.is-speaking-panel .agent-live-line[hidden],
.avatar-panel.is-speaking-panel .single-agent-live-line[hidden] {
  display: none;
}

.mobile-avatar-start {
  position: absolute;
  top: 18px;
  right: 18px;
  left: auto;
  z-index: 6;
  display: inline-grid;
  margin: 0;
  transform: none;
}

.mobile-avatar-icon-button {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  padding: 0;
  border: 1px solid var(--mic-btn-border);
  border-radius: var(--radius-pill);
  background: var(--mic-btn-bg);
  color: var(--white);
  box-shadow: 0 12px 28px var(--mic-btn-shadow);
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
  animation: micIdlePulse 2.8s ease-in-out infinite;
}

.mobile-avatar-icon-button i {
  font-size: 0.95rem;
}

.mobile-avatar-icon-button::after {
  content: "";
  position: absolute;
  inset: -6px;
  border: 1px solid var(--mic-btn-halo-border);
  border-radius: inherit;
  opacity: 0;
  transform: scale(0.86);
  pointer-events: none;
}

.mobile-avatar-icon-button:hover,
.mobile-avatar-icon-button:active {
  border-color: var(--mic-btn-hover-border);
  background: var(--mic-btn-hover-bg);
  box-shadow: 0 14px 32px var(--mic-btn-hover-shadow), 0 0 0 6px var(--mic-btn-hover-glow);
  transform: none;
}

.mobile-avatar-icon-button:hover::after,
.mobile-avatar-icon-button:focus-visible::after {
  animation: micHalo 980ms ease-out infinite;
}

.mobile-avatar-icon-button.is-stop-state {
  border-color: var(--mic-btn-stop-border);
  background: var(--mic-btn-stop-bg);
  color: var(--white);
}

.mobile-avatar-icon-button.is-loading {
  border-color: var(--mic-btn-loading-border);
  background: var(--avatar-overlay-bg-warm);
  color: var(--white);
  animation: none;
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  cursor: wait;
}

.mobile-avatar-icon-button:focus-visible {
  outline: 3px solid var(--mic-btn-focus-outline);
  outline-offset: 3px;
}

@keyframes micIdlePulse {
  0%, 100% {
    box-shadow: 0 12px 28px var(--mic-btn-shadow);
  }
  50% {
    box-shadow: 0 12px 28px var(--mic-btn-shadow), 0 0 0 5px var(--mic-btn-idle-glow);
  }
}
@keyframes micHalo {
  0% {
    opacity: 0.62;
    transform: scale(0.86);
  }
  100% {
    opacity: 0;
    transform: scale(1.18);
  }
}
@media (max-width: 640px) {
  .mobile-avatar-start {
    top: 18px;
    right: 18px;
  }
}
/* Shared lower avatar intro/status note. Intro copy sits below the portrait, not above it. */
.avatar-intro-note {
  order: 4;
  display: grid;
  gap: 8px;
  margin: 18px 22px 12px;
  padding: 14px 16px;
  border: var(--avatar-overlay-border-style);
  border-radius: var(--avatar-overlay-radius);
  background: var(--avatar-overlay-bg);
  color: var(--avatar-overlay-text);
}

.avatar-panel > .control-strip {
  order: 5;
  display: grid;
  grid-template-columns: minmax(240px, 0.45fr) minmax(0, 0.55fr);
  align-items: center;
  gap: 16px;
  margin: 0 22px 22px;
  padding-inline: 0;
  padding-top: 0;
  padding-bottom: 18px;
  min-width: 0;
  width: calc(100% - 44px);
  box-sizing: border-box;
}

.avatar-intro-note h3 {
  margin: 0;
  font-size: var(--avatar-live-font-size);
  font-weight: 700;
  line-height: var(--avatar-live-line-height);
  letter-spacing: 0.01em;
}

.avatar-intro-note p {
  margin: 0;
  color: var(--avatar-overlay-text);
  font-size: var(--avatar-live-font-size);
  font-weight: var(--avatar-live-font-weight);
  line-height: var(--avatar-live-line-height);
}

@media (max-width: 640px) {
  .avatar-intro-note {
    gap: 6px;
    margin: 14px 14px 12px;
    padding: 14px 16px;
  }
  .avatar-intro-note h3,
  .avatar-intro-note p {
    font-size: var(--avatar-live-font-size-mobile);
    line-height: var(--avatar-live-line-height);
  }
}
.avatar-status-line,
.avatar-panel .status-pill {
  display: flex;
  align-items: center;
  align-content: center;
  width: 100%;
  max-width: 100%;
  min-height: var(--avatar-live-box-height);
  max-height: var(--avatar-live-box-height);
  padding: 10px 14px;
  border: var(--avatar-overlay-border-style);
  border-radius: var(--avatar-overlay-radius);
  background: var(--avatar-overlay-bg);
  color: var(--avatar-overlay-text);
  font-size: var(--avatar-live-font-size);
  font-weight: var(--avatar-live-font-weight);
  line-height: var(--avatar-live-line-height);
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

.control-strip .status-pill {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 100%;
  min-height: var(--avatar-live-box-height);
  max-height: var(--avatar-live-box-height);
  border-radius: var(--avatar-overlay-radius);
  white-space: nowrap;
  text-overflow: ellipsis;
}

#feedback-agent .avatar-panel > .control-strip {
  order: 5;
  grid-template-columns: minmax(0, 1fr);
  width: calc(100% - 44px);
  margin-inline: 22px;
  margin-bottom: 10px;
  padding-bottom: 0;
}

#feedback-agent .control-strip .status-pill {
  display: none;
}

#feedback-agent .control-strip .interaction-progress {
  grid-column: 1/-1;
  width: 100%;
  min-width: 0;
}

#feedback-agent .avatar-intro-note {
  display: grid;
}

.avatar-intro-note.is-live-line {
  align-content: center;
  min-height: var(--avatar-live-box-height);
  color: var(--avatar-overlay-accent);
}

.avatar-intro-note.is-live-line p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-size: var(--avatar-live-font-size);
  font-weight: var(--avatar-live-font-weight);
  line-height: var(--avatar-live-line-height);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.avatar-panel.is-speaking-panel .avatar-status-line {
  border-radius: var(--avatar-overlay-radius);
  background: var(--avatar-overlay-bg-strong);
  color: var(--avatar-overlay-accent);
}

@media (max-width: 640px) {
  .avatar-status-line,
  .avatar-panel .status-pill {
    min-height: var(--avatar-live-box-height-mobile);
    max-height: var(--avatar-live-box-height-mobile);
    padding: var(--control-padding-mobile);
    font-size: var(--avatar-live-font-size-mobile);
  }
  .control-strip .status-pill {
    width: 100%;
    max-width: 100%;
    justify-self: start;
    padding: var(--control-padding-mobile);
    font-size: var(--avatar-live-font-size-mobile);
  }
  .avatar-panel.is-speaking-panel .avatar-status-line,
  .avatar-panel.is-speaking-panel .single-agent-live-line:not([hidden]),
  .single-agent-live-line.is-active:not([hidden]) {
    display: block;
    height: calc(1em * var(--avatar-live-line-height) + 16px);
    min-height: calc(1em * var(--avatar-live-line-height) + 16px);
    max-height: calc(1em * var(--avatar-live-line-height) + 16px);
    box-sizing: border-box;
    line-height: var(--avatar-live-line-height);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    line-clamp: 1;
  }
  .avatar-panel > .control-strip {
    display: grid;
    grid-template-columns: minmax(0, 0.48fr) minmax(0, 0.52fr);
    width: var(--mobile-inset-width);
    margin: 0 14px 14px;
    gap: 9px;
  }
  .avatar-panel > .control-strip .interaction-progress {
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .avatar-panel > .control-strip .interaction-progress-bar {
    height: 12px;
  }
  .avatar-intro-note.is-live-line {
    min-height: var(--avatar-live-box-height-compact-mobile);
  }
  .avatar-intro-note.is-live-line p {
    font-size: var(--avatar-live-font-size-mobile);
    line-height: var(--avatar-live-line-height);
  }
}
/* Avatar panels keep a small breathing space above on compact layouts. */
@media (max-width: 640px) {
  .agent-layout > .avatar-panel,
  .agent-tool-layout > .avatar-panel,
  .agent-pair {
    margin-top: 10px;
  }
}
@media (max-width: 640px) {
  #feedback-agent .avatar-intro-note {
    width: var(--mobile-inset-width);
    margin: 14px 14px 10px;
    padding: 14px 16px;
    border-top: 1px solid var(--feedback-note-border);
    background: var(--feedback-note-bg);
  }
  #feedback-agent .avatar-intro-note h3,
  #feedback-agent .avatar-intro-note p {
    font-size: var(--avatar-live-font-size-mobile);
    line-height: var(--avatar-live-line-height);
  }
}
/* Homepage agent support components that are not avatar-specific. */
.demo-section.alt {
  background: var(--teal-surface);
}

.agent-layout,
.design-layout,
.multi-agent-layout {
  display: grid;
  gap: 24px;
}

.feedback-panel,
.design-notes {
  min-width: 0;
}

.scenario-meta {
  gap: 8px;
  margin-bottom: 18px;
}

.chip {
  min-height: 28px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  background: var(--soft);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.insight-list,
.inline-result {
  gap: 16px;
}

.review-hint {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #efd8b7;
  color: var(--muted);
}

.review-hint.is-confirmed {
  color: var(--teal-dark);
  font-weight: inherit;
}

/* Homepage agent carousel — looks and feels like a physical slidable control
   (rolodex/coverflow): cards sit on a track you can drag or swipe, the centered
   card sits forward and in focus, side cards recede in scale and opacity. */
.home-agent-carousel-section {
  padding-block: 18px 8px;
  background: linear-gradient(180deg, var(--paper) 0%, var(--soft) 18%, var(--soft) 88%, var(--paper) 100%);
}

/* The shared .section side gutter (padding-inline: 5vw, see site-foundation)
   stacks with the carousel viewport/slide's own insets and leaves the card
   narrower than every other mobile section. Drop it just here so the card
   reaches the same edge the rest of the mobile page uses. */
@media (max-width: 520px) {
  .home-agent-carousel-section {
    padding-inline: 0;
  }
}
.home-agent-carousel-section + .use-case-strip-section {
  padding-top: 24px;
}

.home-agent-carousel {
  position: relative;
  padding: 28px 0 18px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--soft) 0%, var(--soft) 86%, var(--paper) 100%);
  box-shadow: inset 0 1px 0 var(--white);
}

.home-agent-carousel-viewport {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
  touch-action: pan-y;
}

.home-agent-carousel-viewport::-webkit-scrollbar {
  display: none;
}

.home-agent-carousel-viewport.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}

.home-agent-carousel-track {
  display: flex;
  align-items: stretch;
}

.home-agent-slide {
  flex: 0 0 auto;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-inline: clamp(16px, 2.2vw, 34px);
  box-sizing: border-box;
  transform: scale(0.97);
  opacity: 0.7;
  transition: transform 260ms ease, opacity 260ms ease;
}

.home-agent-slide > .demo-section {
  min-height: 100%;
  box-sizing: border-box;
  padding: 36px 40px;
  border-radius: var(--radius);
  background: var(--white);
  border: var(--border-hairline);
  box-shadow: var(--shadow);
}

@media (max-width: 720px) {
  .home-agent-slide > .demo-section {
    padding: 24px 20px;
  }
}
/* Inside the homepage carousel, .demo-section is already a visible white card
   (background/border/shadow added above), so the inner transcript boxes that
   normally provide their own card chrome on standalone agent pages would look
   like a card nested in a card here. Flatten just those, scoped to the
   carousel — standalone pages keep the original boxed look untouched. */
.home-agent-slide .scrolling-transcript {
  padding: 10px 0;
  background: none;
  border: 0;
  border-top: var(--border-hairline);
  border-radius: 0;
  box-shadow: none;
}

/* The demo-status pill ("Live demo" etc.) adds nothing inside the carousel
   context — every card here is already a live demo by definition — so hide
   it on every viewport, not just mobile, letting content sit higher in the
   card. */
.home-agent-slide .demo-status {
  display: none;
}

/* Eva's homepage carousel card is taller than the others. On desktop, keep
   the primary interaction/result area in focus — tablet and mobile already
   stack the blocks at full width. */
@media (min-width: 1181px) {
  /* The first insight-list is always exactly 3 fixed cards (summary,
     improvement, research cue) — one row. The second insight-list (variable
     fragment count) keeps its own 2-column wrap, scoped via the sibling
     selector below. */
  #feedback-agent.home-agent-slide .insight-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  #feedback-agent.home-agent-slide .insight-list + .insight-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Same idea for 3D Designer: its three concept notes sit on one row
     instead of stacking, here only — the standalone result page keeps its
     single-column layout. */
  #design-agent.home-agent-slide #designNotes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  .home-agent-slide .insight-list {
    grid-template-columns: 1fr;
  }
}
.home-agent-slide.is-active {
  transform: scale(1);
  opacity: 1;
}

.home-agent-slide.is-active > .demo-section {
  box-shadow: 0 30px 80px rgba(25, 39, 52, 0.22);
}

.home-agent-carousel-arrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  border: var(--border-hairline);
  border-radius: 50%;
  background: var(--white);
  color: var(--teal-dark);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: background 200ms ease, transform 200ms ease;
}

.home-agent-carousel-arrow:hover,
.home-agent-carousel-arrow:focus-visible {
  background: var(--soft);
  transform: translateY(-1px);
}

.home-agent-carousel-arrow-prev {
  left: clamp(4px, 1vw, 16px);
}

.home-agent-carousel-arrow-next {
  right: clamp(4px, 1vw, 16px);
}

@media (max-width: 720px) {
  .home-agent-carousel-arrow {
    display: none;
  }
}
.home-agent-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}

.home-agent-carousel-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--line);
  cursor: pointer;
  transition: background 200ms ease, transform 200ms ease;
}

.home-agent-carousel-dot.is-active {
  background: var(--orange);
  transform: scale(1.3);
}

@media (max-width: 720px) {
  .home-agent-carousel-viewport {
    padding: 0 2vw;
  }
  .home-agent-slide {
    flex-basis: 96vw;
  }
}
/* Phone widths: drop the layered viewport/slide insets entirely so the card
   sits edge-to-edge with the page margin only (one consistent gutter instead
   of three stacked ones), leaving more room for the avatar inside. */
@media (max-width: 520px) {
  .home-agent-carousel-viewport {
    padding: 0;
  }
  .home-agent-slide {
    flex-basis: 100vw;
    padding-inline: 4px;
  }
  .home-agent-slide > .demo-section {
    padding: 22px 16px;
  }
}
@media (max-width: 640px) {
  .home-agent-carousel {
    padding-bottom: 18px;
  }
  .home-agent-slide .dimension-list,
  .home-agent-slide .feedback-panel,
  .home-agent-slide .inline-result,
  .home-agent-slide .agent-flow,
  .home-agent-slide .home-solution-chain,
  .home-agent-slide .idea-agent-stream,
  .home-agent-slide .idea-result-panel,
  .home-agent-slide .agent-output-card,
  .home-agent-slide .mode-indicator,
  .home-agent-slide .speech-mode-indicator,
  .home-agent-slide #designNotes,
  .home-agent-slide label:has(#builderAudience),
  .home-agent-slide label:has(#builderModality) {
    display: none;
  }
}
/* Shared layout helpers for agent pages. Page-specific variants should live in component/page files. */
.agent-page-hero.with-status {
  display: grid;
  grid-template-columns: minmax(480px, 2fr) minmax(280px, 1fr);
  gap: 32px;
  align-items: center;
}

.agent-flow,
.use-case-strip,
.idea-result-grid {
  gap: 18px;
}

.agent-detail-page .agent-layout {
  display: grid;
  gap: 24px;
}

@media (min-width: 1181px) {
  #feedback-agent .agent-layout > .avatar-panel {
    margin-top: 0;
  }
  .agent-detail-page .agent-layout {
    grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.18fr);
  }
  .agent-detail-page .agent-layout > .avatar-panel {
    grid-column: 1;
    grid-row: 1/span 2;
    width: 100%;
    max-width: none;
  }
  .agent-detail-page .agent-layout > .transcript-card {
    grid-column: 2;
    grid-row: 1;
  }
  .agent-detail-page .agent-layout > .feedback-panel {
    grid-column: 2;
    grid-row: 2;
  }
  .agent-detail-page .agent-layout > #insightList {
    grid-column: 2;
    grid-row: 3;
  }
}
@media (max-width: 1180px) {
  .agent-page-hero.with-status,
  .result-layout,
  .agent-layout,
  .design-layout,
  .multi-agent-layout {
    grid-template-columns: 1fr;
  }
  .agent-detail-page .agent-layout > * {
    grid-column: 1/-1;
    grid-row: auto;
    width: 100%;
    max-width: none;
  }
}
/* Eva-specific result and research-page refinements only. Shared dimensions/avatar/layout live in components. */
#feedback-agent .inline-result-card .review-hint {
  margin-top: 20px;
  padding-top: 16px;
}

#feedback-agent .eva-result-actions {
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 18px;
}

#feedback-agent .eva-result-actions .btn.btn-primary {
  margin-left: auto;
}

#feedback-agent .transcript-card > .result-actions {
  justify-content: flex-end;
  align-items: center;
}

.eva-research-section .research-watch-layout {
  display: grid;
  grid-template-columns: 1fr;
}

.eva-research-section .watch-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.eva-research-section .research-watch-layout .watch-card-grid {
  width: 100%;
}

.eva-research-section .source-card-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 860px) {
  .eva-research-section .watch-card-grid,
  .eva-research-section .source-card-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  #feedback-agent .agent-layout:has(.inline-result-card) > .transcript-card {
    display: none;
  }
}
/* Service, solution, design, pricing and contact page layout rules. */
.use-case-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 24px;
}

.agent-flow {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.multi-agent-layout {
  grid-template-columns: minmax(480px, 2fr) minmax(280px, 1fr);
  gap: 18px;
}

.role-row {
  display: grid;
  grid-template-columns: 0.7fr 1.2fr 1.4fr;
  gap: 14px;
  padding: 15px 18px;
  border-top: var(--border-hairline);
}

.role-row:first-child {
  border-top: 0;
}

.role-row span {
  min-width: 0;
}

.role-head {
  background: var(--teal-service-bg);
  color: var(--teal-dark);
  font-weight: 850;
}

.flow-index {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--white);
  font-weight: 800;
}

#designCanvas {
  width: 100%;
  height: auto;
  display: block;
  background: var(--bg-deep);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  align-self: start;
}

.design-notes {
  gap: 12px;
}

#designNotes {
  display: grid;
  gap: 12px;
}

.architecture-card strong {
  color: var(--teal-dark);
}

.contact-section {
  padding-top: 44px;
}

.pricing-section {
  background: var(--paper);
  padding-top: 28px;
  padding-bottom: 54px;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.pricing-card h2 {
  margin-bottom: 8px;
  color: var(--coral-deep);
  font-size: clamp(1.22rem, 1.45vw, 1.55rem);
  text-transform: uppercase;
}

.pricing-price {
  margin-bottom: 16px;
  color: var(--teal-dark);
  font-size: clamp(1.05rem, 1.25vw, 1.3rem);
  font-weight: 850;
}

.pricing-card p {
  color: var(--muted);
}

.result-layout {
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.7fr);
  gap: 24px;
}

@media (max-width: 1180px) {
  .multi-agent-layout,
  .design-layout,
  .result-layout {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 860px) {
  .use-case-strip,
  .agent-flow,
  .pricing-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
  .pricing-section,
  .concept-service-hero {
    padding-inline: 5vw;
  }
  .research-content-layout,
  .multi-agent-layout,
  .research-side-stack,
  .source-card-grid {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .entry-card,
  .research-side-stack .entry-card,
  .role-row {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .role-row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 14px 16px;
  }
  .concept-service-hero .page-intro p:not(.eyebrow),
  .pricing-section .page-intro p:not(.eyebrow),
  .pricing-section .section-heading p:not(.eyebrow) {
    max-width: 100%;
  }
}
@media (max-width: 640px) {
  .pricing-section {
    padding-top: 20px;
    padding-bottom: 36px;
  }
  .entry-card.card-spacious,
  .entry-card.card-compact {
    padding: 18px;
  }
}
/* Result, review, research, concept design and success-page rules. */
.result-hero {
  padding-bottom: 18px;
}

.result-section {
  padding-top: 8px;
}

.success-layout {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.72fr);
  gap: 24px;
}

.consent-success {
  flex-basis: 100%;
  order: 3;
  margin-top: 14px;
  padding-top: 14px;
  border-top: var(--border-hairline);
  color: var(--muted);
}

.inline-result-card .result-actions .btn-primary {
  order: 2;
}

.inline-result-card .result-actions .btn-secondary {
  order: 1;
}

.inline-result-card > .result-actions {
  margin-top: 16px;
  justify-content: flex-start;
}

.result-process-note {
  margin: 10px 0 18px;
  max-width: 72ch;
  color: var(--muted);
}

.agent-round + .agent-round,
.agent-round + .solution-summary-group,
.solution-summary-group + .agent-round,
.solution-summary-group + .solution-summary-group {
  margin-top: 22px;
}

.agent-round h3,
.solution-summary-group h3 {
  margin: 0;
  color: var(--teal-dark);
}

.agent-turn-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 640px) {
  .agent-turn-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}
.summary-grid {
  grid-template-columns: 1fr;
}

.loading-result-card .entry-card {
  grid-template-columns: auto 1fr;
  align-items: center;
}

.suggested-agent-visual {
  min-height: 170px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: radial-gradient(circle at 45% 25%, rgba(255, 255, 255, 0.2), transparent 28%), linear-gradient(145deg, #13282d, #1c4f56);
  overflow: hidden;
}

.suggested-agent-visual img {
  max-width: 185px;
  width: 70%;
  display: block;
}

.psychology-turn {
  border-left: 4px solid var(--coral);
}

.architecture-turn {
  border-left: 4px solid var(--teal);
}

.design-preview-art {
  min-height: 260px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--teal-art-bg);
}

.design-preview-art svg {
  width: 100%;
  height: 100%;
  display: block;
}

.design-preview-copy {
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  align-content: start;
  gap: 12px;
  height: 100%;
}

.single-review-form-layout {
  grid-template-columns: 1fr;
  justify-content: start;
}

.merged-review-form {
  gap: 16px;
}

.eva-research-section {
  padding-top: 34px;
  padding-bottom: 34px;
}

.tight-section {
  padding-top: 18px;
}

.research-content-layout {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.72fr);
  gap: 24px;
}

.entry-card,
.research-side-stack .entry-card {
  color: var(--ink);
}

.emotion-reference-visual {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.emotion-face {
  position: relative;
  min-height: 92px;
  display: grid;
  place-items: start center;
  align-content: start;
  gap: 8px;
  padding-top: 12px;
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}

.face-icon {
  position: relative;
  width: 38px;
  height: 38px;
  display: block;
  border-radius: 50%;
  border: 2px solid currentColor;
}

.face-icon::before,
.face-icon::after {
  content: "";
  position: absolute;
  top: 12px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.face-icon::before {
  left: 10px;
}

.face-icon::after {
  right: 10px;
}

.emotion-face::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 43px;
  width: 18px;
  height: 8px;
  transform: translateX(-50%);
  border: 2px solid currentColor;
  border-top: 0;
  border-radius: 0 0 18px 18px;
}

.emotion-face.joy::after {
  top: 46px;
}

.emotion-face.sadness::after,
.emotion-face.anger::after {
  top: 47px;
  border-top: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
}

.emotion-face.fear::after,
.emotion-face.surprise::after {
  top: 39px;
  width: 13px;
  height: 13px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.emotion-face.fear .face-icon::before,
.emotion-face.fear .face-icon::after {
  transform: none;
}

.emotion-face.surprise .face-icon::before,
.emotion-face.surprise .face-icon::after {
  top: 9px;
  width: 7px;
  height: 7px;
}

.emotion-face.surprise .face-icon::before {
  left: 8px;
}

.emotion-face.surprise .face-icon::after {
  right: 8px;
}

.emotion-face.anger .face-icon::before,
.emotion-face.anger .face-icon::after {
  top: 11px;
  width: 10px;
  height: 2px;
  border-radius: 2px;
}

.emotion-face.anger .face-icon::before {
  transform: rotate(22deg);
}

.emotion-face.anger .face-icon::after {
  transform: rotate(-22deg);
}

.emotion-face.disgust .face-icon::before,
.emotion-face.disgust .face-icon::after {
  top: 11px;
  width: 9px;
  height: 3px;
  border-radius: 2px;
}

.emotion-face.disgust .face-icon::before {
  transform: rotate(-12deg);
}

.emotion-face.disgust .face-icon::after {
  transform: rotate(12deg);
}

.emotion-face.disgust::after {
  top: 47px;
  width: 16px;
  height: 7px;
  border: 0;
  background: transparent;
  border-top: 2px solid currentColor;
  border-radius: 60% 30% 0 0;
  transform: translateX(-50%) rotate(-10deg);
}

.emotion-face.joy {
  background: var(--emotion-joy-bg);
  color: var(--emotion-joy-text);
}

.emotion-face.sadness {
  background: var(--emotion-sadness-bg);
  color: var(--emotion-sadness-text);
}

.emotion-face.anger {
  background: var(--emotion-anger-bg);
  color: var(--emotion-anger-text);
}

.emotion-face.fear {
  background: var(--emotion-fear-bg);
  color: var(--emotion-fear-text);
}

.emotion-face.disgust {
  background: var(--emotion-disgust-bg);
  color: var(--emotion-disgust-text);
}

.emotion-face.surprise {
  background: var(--emotion-surprise-bg);
  color: var(--emotion-surprise-text);
}

/* Result page: hide empty summary paragraph so it doesn't add whitespace. */
.result-hero #resultSummary:empty {
  display: none;
}

.result-panel {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.eva-research-section .entry-card p,
.eva-research-section .card p,
.eva-research-section .research-side-stack .entry-card p,
.eva-research-section .source-card-grid .entry-card p {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
  -webkit-box-orient: initial;
}

.eva-research-section .entry-card,
.eva-research-section .card-grid {
  min-height: auto;
}

/* Eva model hero to research spacing: avoid a large mobile gap before the first information card. */
.result-hero.agent-page-hero:not(.concept-service-hero) {
  padding-bottom: 8px;
}

.result-hero.agent-page-hero:not(.concept-service-hero) + .eva-research-section {
  padding-top: 10px;
}

@media (max-width: 640px) {
  .result-hero.agent-page-hero:not(.concept-service-hero) {
    padding-bottom: 0;
  }
  .result-hero.agent-page-hero:not(.concept-service-hero) .section-heading {
    margin-bottom: 0;
  }
  .result-hero.agent-page-hero:not(.concept-service-hero) + .eva-research-section {
    padding-top: 8px;
  }
}
/* Result page rhythm: keep generated details close to the hero on every result page. */
.result-hero .section-heading {
  margin-bottom: 0;
}

.result-layout > .result-panel {
  align-content: start;
}

.result-layout > .card-stack > .consent-panel {
  margin-top: 22px;
  padding-top: 18px;
  border-top: var(--border-hairline);
}

.design-preview-note {
  max-width: 64ch;
}

.design-preview-copy .download-actions {
  margin-top: auto;
}

.design-agent-visual {
  position: relative;
  isolation: isolate;
  padding: 22px;
  min-height: 320px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, rgba(19, 40, 45, 0.96) 0%, rgba(19, 40, 45, 0.72) 100%);
  box-shadow: var(--shadow);
}

.design-agent-visual::before {
  content: "";
  position: absolute;
  inset: 28px;
  z-index: -1;
  border-radius: calc(var(--radius) - 4px);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(0deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(circle at 50% 46%, #000 0%, transparent 72%);
}

.design-agent-visual::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 34px;
  width: min(62%, 330px);
  height: 22px;
  border-radius: var(--radius-pill);
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.34), transparent 68%);
  transform: translateX(-50%);
}

.design-object-preview {
  position: relative;
  width: min(240px, 100%);
  height: min(240px, 100%);
  border-radius: 28px;
  background: radial-gradient(circle at 30% 30%, rgba(244, 162, 97, 0.34), transparent 55%), radial-gradient(circle at 72% 28%, rgba(117, 198, 195, 0.2), transparent 38%), linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  box-shadow: inset 0 12px 28px rgba(0, 0, 0, 0.16);
  overflow: hidden;
  animation: designObjectFloat 6.4s ease-in-out infinite;
}

.design-object-preview::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 42px;
  width: 108px;
  height: 156px;
  transform: translateX(-50%) rotate(-4deg);
  border-radius: 46% 54% 42% 48%;
  background: radial-gradient(circle at 66% 22%, rgba(117, 198, 195, 0.28), transparent 30%), radial-gradient(circle at 34% 76%, rgba(244, 162, 97, 0.34), transparent 34%), linear-gradient(150deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.08));
  box-shadow: inset 0 0 26px rgba(255, 255, 255, 0.13), 0 22px 36px rgba(0, 0, 0, 0.18);
}

.design-object-preview::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 45px;
  width: 90px;
  height: 22px;
  transform: translateX(-50%) rotate(-4deg);
  border-radius: var(--radius-pill);
  background: radial-gradient(ellipse at center, rgba(19, 40, 45, 0.94) 0 36%, transparent 38%), linear-gradient(180deg, rgba(255, 244, 218, 0.5), rgba(117, 198, 195, 0.16));
  box-shadow: 0 7px 15px rgba(0, 0, 0, 0.2);
}

@keyframes designObjectFloat {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  38% {
    transform: translateY(-7px) rotate(-1.2deg);
  }
  72% {
    transform: translateY(4px) rotate(0.8deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .design-object-preview {
    animation: none;
  }
}
@media (max-width: 860px) {
  .design-layout {
    grid-template-columns: 1fr;
  }
}
.idea-sharper-page {
  padding-bottom: 8px;
}

.idea-session-section {
  gap: 24px;
  padding-top: 8px;
  background: var(--paper);
}

.idea-session-progress,
.idea-agent-stream,
.form-panel,
.idea-result-panel {
  width: min(1180px, 100%);
  justify-self: center;
}

.idea-agent-stream {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.brainstorm-turn,
.sharper-turn {
  border-left-width: 4px;
  border-left-style: solid;
}

.brainstorm-turn {
  border-left-color: var(--teal);
}

.sharper-turn {
  border-left-color: var(--coral);
}

.idea-agent-stream p {
  display: block;
  overflow: visible;
}

.idea-session-section > .form-panel {
  gap: 14px;
}

.idea-input-header {
  gap: 14px;
}

.idea-input-header .form-inline-actions {
  margin-left: auto;
}

.idea-result-panel {
  gap: 18px;
}

.idea-agent-stream[hidden],
.idea-result-panel[hidden] {
  display: none;
}

.idea-result-grid {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(240px, 1fr) minmax(200px, 1fr);
  gap: 18px;
}

.featured-idea {
  gap: 8px;
}

.idea-agent-stream .entry-card {
  min-height: auto;
  gap: 8px;
}

.idea-agent-stream .tag,
.featured-idea .tag {
  margin-bottom: 0;
}

.featured-idea h3[hidden] {
  display: none;
}

.featured-idea p {
  margin: 0;
}

.idea-result-actions {
  justify-content: space-between;
}

.idea-result-actions > .btn-secondary {
  order: 1;
  margin-right: auto;
}

.idea-result-actions > .btn-primary[href*=review] {
  order: 2;
  margin-left: auto;
  margin-right: 0;
}

@media (max-width: 1180px) {
  .idea-agent-stream,
  .idea-result-grid,
  .idea-related-strip {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .idea-sharper-page,
  .idea-session-section {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
    box-sizing: border-box;
  }
  .idea-sharper-page {
    padding-bottom: 4px;
  }
  .idea-sharper-page .section-heading.with-status {
    gap: 12px;
  }
  .idea-sharper-page .dimension-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
  }
  .idea-sharper-page .dimension-list span {
    min-height: 28px;
    padding-inline: 4px;
    font-size: clamp(0.5rem, 2.1vw, 0.62rem);
  }
  .idea-session-section {
    gap: 14px;
    padding-top: 4px;
  }
  .idea-session-progress,
  .idea-agent-stream,
  .form-panel,
  .idea-result-panel {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .idea-agent-stream {
    order: 2;
    display: none;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .idea-agent-stream p {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .idea-session-section > .agent-pair {
    order: 1;
  }
  .idea-session-section > #ideaSharperForm {
    order: 3;
  }
  .idea-result-panel {
    order: 4;
    padding: 14px;
    overflow-x: clip;
  }
  .idea-related-strip {
    order: 5;
  }
  #ideaSharperForm {
    padding: 14px;
  }
  .idea-input-header {
    align-items: start;
    gap: 10px;
  }
  .idea-input-header .form-label {
    max-width: none;
  }
  .idea-input-header .form-inline-actions {
    margin-left: auto;
  }
  .idea-input-header .btn {
    min-height: 34px;
    padding-inline: 8px;
  }
  .idea-result-grid,
  .idea-result-panel .result-card,
  .idea-result-panel .featured-idea {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .idea-result-grid {
    gap: 12px;
  }
  .idea-result-panel .result-card {
    padding: 14px;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  #brainstormList,
  #whyList {
    margin: 0;
    padding-left: 1.2rem;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  #brainstormList li,
  #whyList li,
  #promisingIdeaText {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}
/* Experimental/future agent page specifics only. Shared cards, forms and layouts live in components/agent-tools.scss. */
.agent-output-card h3 {
  margin-bottom: 8px;
}

.form-panel .form-inline-actions,
.agent-output-card .result-actions {
  margin-top: 4px;
}

/* Agent Builder result cards: compact result content should sit near the top, not float mid-card. */
.agent-builder-page #builderResult {
  align-content: start;
  gap: 18px;
}

.agent-builder-page #builderResult .agent-output-card {
  align-content: start;
  min-height: 0;
}

.agent-builder-page #builderResult .agent-output-card p,
.agent-builder-page #builderResult .agent-output-card ul {
  margin-top: 0;
}

.muppets-page {
  padding-bottom: 8px;
}
.muppets-page .muppets-page-section {
  gap: 16px;
  background: var(--paper);
}
.muppets-page .muppets-page-intro {
  margin-bottom: 0;
  padding-bottom: 0;
}
.muppets-page .muppets-agent-pair {
  margin-top: 0;
}
.muppets-page .muppets-agent-pair .avatar-info {
  position: relative;
}
.muppets-page .muppets-agent-pair .mobile-avatar-start {
  top: 14px;
  right: 14px;
}
.muppets-page .muppets-agent-pair .avatar-panel.is-listening-panel:not(.is-speaking-panel) .agent-live-line:not([hidden]) {
  background: var(--avatar-overlay-bg-warm);
}
.muppets-page .muppets-agent-pair .avatar-panel.is-speaking-panel .agent-live-line:not([hidden]) {
  background: var(--avatar-overlay-bg-strong);
}
.muppets-page .muppet-portrait {
  --avatar-image-position: center 45%;
  --avatar-image-scale: 0.9;
  --avatar-image-speaking-scale: 0.92;
  --avatar-image-y: -1px;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  transform-origin: 50% 88%;
  transition: transform 180ms ease;
}
.muppets-page .muppet-portrait img.muppet-portrait-img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  filter: drop-shadow(0 10px 18px var(--avatar-portrait-shadow));
  object-fit: cover;
}
.muppets-page .muppet-portrait.is-speaking {
  animation-duration: 1.18s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.muppets-page .muppet-portrait[data-muppet=red].is-speaking {
  animation-name: muppetRedIdleCounter;
  animation-delay: -0.18s;
}
.muppets-page .muppet-portrait[data-muppet=blue].is-speaking {
  animation-name: muppetBlueIdleCounter;
  animation-duration: 1.34s;
  animation-delay: -0.52s;
}
.muppets-page .muppets-transcript-card {
  width: min(1180px, 100%);
  justify-self: center;
  align-content: start;
  align-items: start;
  grid-auto-rows: auto;
  gap: 10px;
}
.muppets-page .muppets-transcript-card .scrolling-transcript {
  --transcript-height: 138px;
  --transcript-height-mobile: 116px;
}
.muppets-page .muppets-transcript-card .form-inline-actions {
  align-self: start;
  margin-top: 0;
  padding-top: 0;
}
.muppets-page .muppets-agent-pair .muppets-session-progress {
  grid-column: 1/-1;
  width: 100%;
  padding: 4px 0 0;
}
.muppets-page .control-strip {
  gap: 10px;
}

@keyframes muppetRedIdleCounter {
  0%, 100% {
    transform: rotate(0deg) translateX(0) translateY(0) scale(1);
  }
  32% {
    transform: rotate(-2.8deg) translateX(-6px) translateY(5px) scale(1.01);
  }
  62% {
    transform: rotate(1.7deg) translateX(4px) translateY(-4px) scale(1.015);
  }
  82% {
    transform: rotate(0.8deg) translateX(2px) translateY(8px) scale(0.995);
  }
}
@keyframes muppetBlueIdleCounter {
  0%, 100% {
    transform: rotate(0deg) translateX(0) translateY(0) scale(1);
  }
  28% {
    transform: rotate(2.6deg) translateX(7px) translateY(-3px) scale(1.01);
  }
  58% {
    transform: rotate(-1.8deg) translateX(-5px) translateY(7px) scale(0.995);
  }
  78% {
    transform: rotate(-0.6deg) translateX(-2px) translateY(-5px) scale(1.012);
  }
}
@keyframes muppetNod {
  0%, 100% {
    transform: rotate(0deg) translateY(0) scale(1);
  }
  40% {
    transform: rotate(5.5deg) translateY(12px) scale(1.03);
  }
  70% {
    transform: rotate(-3.5deg) translateY(-6px) scale(0.98);
  }
}
@keyframes muppetTiltLeft {
  0%, 100% {
    transform: rotate(0deg) translateX(0) scale(1);
  }
  45% {
    transform: rotate(-9deg) translateX(-16px) translateY(6px) scale(1.04);
  }
}
@keyframes muppetTiltRight {
  0%, 100% {
    transform: rotate(0deg) translateX(0) scale(1);
  }
  45% {
    transform: rotate(9deg) translateX(16px) translateY(6px) scale(1.04);
  }
}
@keyframes muppetFlop {
  0%, 100% {
    transform: rotate(0deg) scale(1);
  }
  30% {
    transform: rotate(-6deg) scale(1.07) translateY(-10px);
  }
  55% {
    transform: rotate(7deg) scale(0.96) translateY(8px);
  }
}
@keyframes muppetShock {
  0%, 100% {
    transform: rotate(0deg) scale(1) translateY(0);
  }
  20% {
    transform: rotate(-2deg) scale(1.1) translateY(-14px);
  }
  45% {
    transform: rotate(4deg) scale(1.06) translateY(-4px);
  }
  70% {
    transform: rotate(-3deg) scale(1.02) translateY(2px);
  }
}
@keyframes muppetHeadUp {
  0%, 100% {
    transform: rotate(0deg) translateY(0) scale(1);
  }
  42% {
    transform: rotate(-3deg) translateY(-16px) scale(1.05);
  }
}
@keyframes muppetHeadDown {
  0%, 100% {
    transform: rotate(0deg) translateY(0) scale(1);
  }
  42% {
    transform: rotate(4deg) translateY(14px) scale(0.97);
  }
}
@keyframes muppetVortexRoll {
  0% {
    transform: rotate(0deg) scale(1);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}
@keyframes muppetEmphasisBounce {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  35% {
    transform: translateY(-14px) scale(1.04);
  }
  65% {
    transform: translateY(4px) scale(0.98);
  }
}
@keyframes muppetShoutBounce {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  20% {
    transform: translateY(-26px) scale(1.08);
  }
  50% {
    transform: translateY(6px) scale(0.95);
  }
  80% {
    transform: translateY(-18px) scale(1.06);
  }
}
.muppet-portrait[class*=muppet-red-motion-],
.muppet-portrait[class*=muppet-blue-motion-] {
  animation-duration: var(--muppet-motion-duration, 0.62s);
  animation-timing-function: cubic-bezier(0.42, 0, 0.2, 1);
  animation-iteration-count: 1;
}

.muppet-portrait.muppet-red-motion-bob {
  animation-name: muppetNod;
}

.muppet-portrait.muppet-red-motion-shock {
  animation-name: muppetShock;
  animation-timing-function: cubic-bezier(0.34, 1.2, 0.4, 1);
}

.muppet-portrait.muppet-red-motion-head-up {
  animation-name: muppetHeadUp;
}

.muppet-portrait.muppet-red-motion-head-down {
  animation-name: muppetHeadDown;
}

.muppet-portrait.muppet-red-motion-tilt-left {
  animation-name: muppetTiltLeft;
}

.muppet-portrait.muppet-red-motion-tilt-right {
  animation-name: muppetTiltRight;
}

.muppet-portrait.muppet-blue-motion-flop {
  animation-name: muppetFlop;
}

.muppet-portrait.muppet-blue-motion-tilt-left {
  animation-name: muppetTiltLeft;
}

.muppet-portrait.muppet-blue-motion-tilt-right {
  animation-name: muppetTiltRight;
}

.muppet-portrait.muppet-blue-motion-head-down {
  animation-name: muppetHeadDown;
}

.muppet-portrait.muppet-blue-motion-head-up {
  animation-name: muppetHeadUp;
}

.muppet-portrait.muppet-red-motion-vortex,
.muppet-portrait.muppet-blue-motion-vortex {
  animation-name: muppetVortexRoll;
  animation-duration: var(--muppet-vortex-duration, 0.62s);
  animation-timing-function: cubic-bezier(0.42, 0, 0.2, 1);
  animation-iteration-count: 1;
}

.muppet-portrait.muppet-red-motion-emphasis-bounce,
.muppet-portrait.muppet-blue-motion-emphasis-bounce {
  animation-name: muppetEmphasisBounce;
  animation-duration: var(--muppet-bounce-duration, 0.52s);
  animation-timing-function: cubic-bezier(0.34, 1.2, 0.4, 1);
  animation-iteration-count: 1;
}

.muppet-portrait.muppet-red-motion-shout-bounce,
.muppet-portrait.muppet-blue-motion-shout-bounce {
  animation-name: muppetShoutBounce;
  animation-duration: var(--muppet-bounce-duration, 0.9s);
  animation-timing-function: cubic-bezier(0.34, 1.2, 0.4, 1);
  animation-iteration-count: var(--muppet-bounce-count, 2);
}

.wall-page {
  min-height: 100vh;
  margin: 0;
  overflow: hidden;
  background: var(--bg-deep);
  color: var(--white);
}

.wall-shell,
.wall-stage {
  min-height: 100vh;
  position: relative;
}

.wall-stage {
  overflow: hidden;
  isolation: isolate;
  --wall-scene-bg: url("/assets/landscapes/flowering-ivy-wall.jpg");
  width: 100vw;
}

.wall-hidden {
  display: none;
}

.wall-surface {
  position: absolute;
  inset: -3vmax;
  z-index: -3;
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--bg-deep) 35%, transparent), color-mix(in srgb, var(--bg-deep) 75%, transparent)), url("/assets/landscapes/flowering-ivy-wall.jpg");
  background-position: center;
  background-size: cover;
  transform: scale(1.03);
  animation: wallFloat 16s ease-in-out infinite alternate;
  transition: opacity 10s ease-in-out;
}

.wall-stage[data-scene=navigation] .wall-surface {
  opacity: 0;
}

.wall-navigation {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  opacity: 0;
  transition: opacity 8s ease-in-out;
  pointer-events: none;
}

.wall-stage[data-scene=navigation] .wall-navigation {
  opacity: 1;
  pointer-events: auto;
}

.wall-navigation::before {
  content: "";
  position: absolute;
  inset: -3vmax;
  z-index: -2;
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--bg-deep) 8%, transparent), color-mix(in srgb, var(--bg-deep) 34%, transparent)), var(--wall-scene-bg);
  background-position: center;
  background-size: cover;
  transform: none;
}

.wall-landscape {
  display: none;
}

.wall-agent {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: relative;
}

.wall-agent .eyebrow,
.wall-agent h1,
.wall-agent p,
.wall-live-line {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
  white-space: nowrap;
}

.wall-agent .eyebrow,
.wall-agent h1 {
  margin: 0;
}

.wall-agent h1 {
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.02;
  text-shadow: 0 0.2rem 1rem rgba(7, 21, 23, 0.3);
}

.wall-avatar-wrap {
  width: min(68vw, 30rem);
  max-width: 30rem;
  animation: wallAgentFloat 8.5s ease-in-out infinite;
  display: block;
  z-index: 5;
  position: relative;
}

.wall-avatar-wrap::before {
  content: "";
  position: absolute;
  inset: -30% -26%;
  border-radius: 50%;
  /* Two softly offset, blurred clouds instead of one crisp circle so the
     fade reads as drifting mist rather than a hard vignette ring. Sits behind
     the photo (z-index below the img) so it frames the avatar instead of
     veiling it. */
  background: radial-gradient(ellipse 62% 56% at 44% 42%, color-mix(in srgb, var(--white) 0%, transparent) 14%, color-mix(in srgb, var(--white) 32%, transparent) 44%, color-mix(in srgb, var(--white) 62%, transparent) 68%, color-mix(in srgb, var(--white) 82%, transparent) 100%), radial-gradient(ellipse 58% 60% at 56% 54%, color-mix(in srgb, var(--white) 0%, transparent) 18%, color-mix(in srgb, var(--white) 30%, transparent) 48%, color-mix(in srgb, var(--white) 58%, transparent) 72%, color-mix(in srgb, var(--white) 78%, transparent) 100%);
  filter: blur(18px);
  z-index: 1;
  pointer-events: none;
}

.wall-avatar-wrap img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 50%;
  object-fit: cover;
  aspect-ratio: 1;
  position: relative;
  z-index: 2;
  /* Fade stretches almost to the box edge (92% ellipse) so there is no
     plateau-then-drop — the photo dissolves gradually into the mist behind
     it instead of showing a hard inner ring. */
  mask-image: radial-gradient(ellipse 92% 92% at 50% 46%, black 0%, rgba(0, 0, 0, 0.92) 38%, rgba(0, 0, 0, 0.6) 58%, rgba(0, 0, 0, 0.3) 74%, rgba(0, 0, 0, 0.1) 88%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 92% 92% at 50% 46%, black 0%, rgba(0, 0, 0, 0.92) 38%, rgba(0, 0, 0, 0.6) 58%, rgba(0, 0, 0, 0.3) 74%, rgba(0, 0, 0, 0.1) 88%, transparent 100%);
  filter: drop-shadow(0 0.8rem 3rem color-mix(in srgb, var(--bg-deep) 55%, transparent));
}

.wall-avatar-wrap.is-speaking img {
  animation: wallAvatarSpeaking 2.2s ease-in-out infinite;
}

.wall-avatar-wrap.prosody-nod {
  animation: prosodyNodOnce 520ms cubic-bezier(0.42, 0, 0.2, 1) 1;
}

.wall-avatar-wrap.prosody-tilt-left {
  animation: prosodyTiltLeft 620ms cubic-bezier(0.42, 0, 0.2, 1) 1;
}

.wall-avatar-wrap.prosody-tilt-right {
  animation: prosodyTiltRight 620ms cubic-bezier(0.42, 0, 0.2, 1) 1;
}

.wall-avatar-wrap.prosody-listen {
  animation: prosodyListen 760ms cubic-bezier(0.42, 0, 0.2, 1) 1;
}

.wall-avatar-wrap.prosody-glance img {
  animation: prosodyGlance 680ms cubic-bezier(0.42, 0, 0.2, 1) 1;
}

.wall-typewriter {
  position: absolute;
  bottom: 2rem;
  width: 100%;
  text-align: center;
  font-family: var(--font-monospace);
  color: var(--white);
  pointer-events: none;
  z-index: 10;
}

@media (max-width: 640px) {
  .wall-agent h1 {
    font-size: 1.8rem;
  }
  .wall-avatar-wrap {
    width: min(92vw, 26rem);
  }
}
@keyframes wallFloat {
  from {
    transform: scale(1.03) translate3d(-0.25rem, -0.2rem, 0);
  }
  to {
    transform: scale(1.06) translate3d(0.3rem, 0.24rem, 0);
  }
}
@keyframes wallAgentFloat {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -0.55rem, 0);
  }
}
@keyframes wallAvatarSpeaking {
  0%, 100% {
    transform: scale(1) translateY(0);
  }
  36% {
    transform: scale(1.018) translateY(-0.18rem);
  }
  70% {
    transform: scale(1.01) translateY(0.08rem);
  }
}
.wall-avatar-wrap.is-wizard-spin img {
  animation: wizardAvatarSpin 2400ms linear forwards;
}

.wall-stage.is-wizard-vortex {
  animation: wizardStageVortex 1500ms cubic-bezier(0.4, 0, 0.85, 0.3) forwards;
}

@keyframes wizardAvatarSpin {
  0% {
    transform: rotate(0deg) scale(1);
    animation-timing-function: cubic-bezier(0.3, 0, 0.7, 0.25);
  }
  45% {
    transform: rotate(620deg) scale(0.92);
    animation-timing-function: cubic-bezier(0.25, 0, 0.6, 1);
  }
  65% {
    transform: rotate(740deg) scale(0.88);
    animation-timing-function: cubic-bezier(0.4, 0, 0.85, 0.3);
  }
  100% {
    transform: rotate(1800deg) scale(0.08);
  }
}
@keyframes wizardStageVortex {
  0% {
    transform: rotate(0deg) scale(1);
    filter: blur(0) saturate(1);
    opacity: 1;
  }
  100% {
    transform: rotate(900deg) scale(0.04);
    filter: blur(12px) saturate(1.7);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .wall-avatar-wrap.is-wizard-spin img,
  .wall-stage.is-wizard-vortex {
    animation: none;
  }
}
/* Reserved for temporary cross-component fixes only.
  Keep this file nearly empty: component rules belong in their own SCSS files. */
/* Shared hidden state for panels/cards with component display rules. */
[hidden],
.card[hidden],
.agent-output-card[hidden],
.idea-result-panel[hidden],
.inline-result[hidden] {
  display: none;
}

/* Shared page shell and header layout. Homepage keeps its separate immersive hero. */
.section,
.result-hero,
.result-section,
.review-page-section,
.contact-page-section,
.pricing-hero,
.agent-detail-page {
  scroll-margin-top: 86px;
}

.agent-detail-page,
.idea-sharper-page,
.emotion-regulator-page,
.agent-builder-page,
.page-hero,
.contact-page-section,
.eva-research-section,
.concept-service-hero,
.articles-page,
.pricing-hero,
.result-section,
.review-page-section,
.review-success {
  padding-top: var(--ail-page-top);
}

.pricing-hero {
  padding-bottom: 28px;
}

.section-heading {
  max-width: none;
  margin-bottom: var(--ail-page-heading-gap);
}

.section-heading.with-status {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 16px;
}

.section-heading.with-status > div:first-child {
  grid-column: 1/-1;
  grid-row: 2;
  max-width: none;
}

.agent-detail-page.result-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
  grid-template-rows: auto;
  gap: 28px;
  align-items: start;
}

.agent-detail-page.result-hero > .demo-status {
  position: absolute;
  top: var(--ail-page-top);
  right: 0;
  z-index: 2;
}

.agent-detail-page.result-hero > .section-heading.with-status {
  grid-column: 1;
  grid-row: 1;
  display: block;
}

.agent-detail-page.result-hero > .section-heading.with-status > div:first-child {
  grid-column: auto;
  grid-row: auto;
}

.agent-detail-page.result-hero > .section-heading.with-status .demo-status {
  position: absolute;
  top: 0;
  right: clamp(56px, 5vw, 92px);
  z-index: 2;
}

@media (min-width: 1181px) {
  .agent-detail-page.result-hero > .section-heading.with-status > div:first-child {
    padding-top: 55px;
  }
}
.agent-detail-page.result-hero > .agent-side-column {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  gap: 12px;
  width: 100%;
  max-width: none;
  margin-top: 96px;
}

.about-page .page-hero .agent-page-hero {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
  gap: 28px;
  align-items: start;
  padding-top: 0;
}

.about-page .page-hero .agent-page-hero > div:first-child,
.about-page .page-hero .agent-page-hero > .agent-page-visual {
  width: 100%;
  max-width: none;
}

.about-page .page-hero .agent-page-hero > .agent-page-visual {
  margin-top: 96px;
}

.more-agents-page .page-hero,
.community-page .page-hero {
  padding-bottom: 44px;
}

.more-agents-page .page-hero .agent-page-hero {
  grid-template-columns: minmax(0, 1fr);
}

.community-page .page-hero .agent-page-hero {
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
  gap: 42px;
  align-items: start;
}

.more-agents-page .agent-page-hero > .page-intro,
.community-page .agent-page-hero > .page-intro {
  width: min(100%, var(--max-content-width-narrow));
}

.more-agents-page .page-intro .result-actions {
  margin-top: 18px;
}

.page-intro.result-actions,
.page-intro .result-actions,
.section-heading.result-actions,
.section-heading .result-actions,
.agent-page-hero > .page-intro .result-actions {
  width: 100%;
  max-width: min(100%, var(--max-content-width-narrow));
  justify-content: flex-end;
  align-items: flex-end;
}

.community-hero-media {
  width: 100%;
  min-width: 0;
  max-width: 620px;
  justify-self: end;
  margin: calc(0.858rem + 12px) 0 0;
}

.community-hero-media img {
  display: block;
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.more-agents-page .about-card-section,
.community-page .about-card-section {
  padding-top: 56px;
}

.more-agents-page .info-block .about-copy {
  width: 100%;
  max-width: none;
}

.more-agents-page .agent-preview-intro {
  width: min(100%, var(--max-content-width-narrow));
  margin: 0 0 34px;
  color: var(--on-dark-82);
  font-size: 1rem;
  line-height: 1.62;
}

.more-agents-page .future-agent-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 4vw, 56px);
}

@media (max-width: 900px) {
  .more-agents-page .future-agent-grid {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 1440px) {
  .more-agents-page .future-agent-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.review-form-layout {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.72fr);
  gap: 24px;
}

.compact-review-heading,
.single-review-form-layout,
.single-review-form-layout .merged-review-form,
.result-card,
.solution-summary-group,
.solution-process-note,
.stl-next-steps,
.entry-card,
.result-card #resultItems,
.result-card .insight-list,
.result-card .solution-summary-group,
.result-card .solution-process-note,
.result-card .design-result-preview {
  width: 100%;
  max-width: none;
}

.contact-page-section .review-form-layout {
  align-items: start;
}

.site-emergency-mode .agent-interaction-card,
.site-emergency-mode .form-panel,
.site-emergency-mode form[id] {
  opacity: 0.72;
}

.site-emergency-mode button[disabled],
.site-emergency-mode input[disabled],
.site-emergency-mode textarea[disabled],
.site-emergency-mode select[disabled] {
  cursor: not-allowed;
}

.btn:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(244, 162, 97, 0.78);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms;
    animation-iteration-count: 1;
    scroll-behavior: auto;
    transition-duration: 0.001ms;
  }
}
@media (max-width: 1180px) {
  .result-layout,
  .review-form-layout,
  .success-layout,
  .research-content-layout {
    grid-template-columns: 1fr;
    max-width: none;
  }
  .result-layout > *,
  .review-form-layout > *,
  .success-layout > *,
  .research-content-layout > * {
    width: 100%;
    max-width: none;
  }
  .agent-detail-page.result-hero,
  .about-page .page-hero .agent-page-hero {
    grid-template-columns: 1fr;
  }
  .agent-detail-page.result-hero > .demo-status,
  .agent-detail-page.result-hero > .section-heading.with-status,
  .agent-detail-page.result-hero > .section-heading.with-status .demo-status,
  .agent-detail-page.result-hero > .agent-side-column {
    position: static;
    grid-column: 1;
    grid-row: auto;
  }
  .agent-detail-page.result-hero > .agent-side-column,
  .about-page .page-hero .agent-page-hero > .agent-page-visual {
    margin-top: 0;
  }
}
@media (max-width: 520px) {
  :root {
    --ail-page-top: 14px;
    --ail-page-heading-gap: 14px;
  }
}
/* Mobile agent-page top rhythm: keep eyebrow/status distance consistent across all agents. */
@media (max-width: 760px) {
  :root {
    --ail-page-top: 12px;
    --ail-page-heading-gap: 14px;
  }
  .agent-detail-page,
  .idea-sharper-page,
  .emotion-regulator-page,
  .agent-builder-page {
    padding-top: var(--ail-page-top);
  }
  .agent-detail-page .section-heading,
  .agent-detail-page .section-heading.with-status {
    margin-bottom: var(--ail-page-heading-gap);
  }
  .section-heading.with-status {
    display: block;
  }
  .section-heading.with-status > div:first-child {
    display: block;
    grid-column: auto;
    grid-row: auto;
  }
  .agent-detail-page .page-intro > .eyebrow,
  .agent-detail-page .page-intro .eyebrow,
  .agent-detail-page .demo-status,
  .page-hero .page-intro > .eyebrow,
  .contact-page-section .page-intro > .eyebrow,
  .eva-research-section .page-intro > .eyebrow,
  .concept-service-hero .page-intro > .eyebrow,
  .pricing-hero .page-intro > .eyebrow,
  .articles-page .page-intro > .eyebrow,
  .review-page-section .page-intro > .eyebrow,
  .review-success .page-intro > .eyebrow,
  .result-section .page-intro > .eyebrow,
  .result-hero .page-intro > .eyebrow {
    display: none;
  }
  .home-agent-demo .page-intro .eyebrow,
  .home-agent-demo .demo-status {
    display: none;
  }
}
/* Compact mobile page-shell spacing after eyebrow/status labels are hidden. */
@media (max-width: 640px) {
  :root {
    --ail-page-top: 12px;
    --ail-page-heading-gap: 12px;
  }
  .page-hero,
  .contact-page-section,
  .eva-research-section,
  .concept-service-hero,
  .result-hero.agent-page-hero,
  .agent-detail-page,
  .idea-sharper-page,
  .emotion-regulator-page,
  .agent-builder-page {
    padding-top: var(--ail-page-top);
  }
  .page-intro,
  .section-heading,
  .agent-page-hero > .page-intro {
    margin-top: 0;
  }
  .solution-designer-page .agent-side-column {
    margin-bottom: 0;
  }
  .solution-designer-page .agent-page-visual {
    min-height: 0;
    padding: 18px;
  }
  .more-agents-page .future-agent-grid {
    grid-template-columns: 1fr;
  }
}
/* Shared page intro component: every normal page header uses the same title + intro rhythm. */
.page-intro,
.section-heading,
.agent-page-hero > .page-intro {
  max-width: none;
  margin-top: 0;
}

.page-intro .eyebrow,
.section-heading .eyebrow,
.agent-page-hero .eyebrow {
  margin: 0 0 12px;
  color: var(--ail-eyebrow-color, #a44f3f);
  font-size: 0.78rem;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.page-intro h1,
.section-heading h1,
.agent-page-hero h1,
.result-hero h1 {
  margin-top: 0;
  margin-bottom: 22px;
  font-size: clamp(1.85rem, 3.25vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: 0;
}

.page-intro p:not(.eyebrow),
.section-heading p:not(.eyebrow),
.agent-page-hero > .page-intro p:not(.eyebrow) {
  width: min(100%, var(--max-content-width-narrow));
  max-width: 100%;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.62;
}

.about-section .page-intro p:not(.eyebrow),
.about-section .section-heading p:not(.eyebrow),
.about-copy p {
  color: var(--on-dark-76);
}

@media (max-width: 640px) {
  .page-intro h1,
  .section-heading h1,
  .agent-page-hero h1,
  .result-hero h1 {
    font-size: clamp(1.52rem, 7.8vw, 2.16rem);
  }
}
.page-intro .result-actions,
.section-heading .result-actions {
  width: 100%;
  max-width: min(100%, var(--max-content-width-narrow));
  justify-content: flex-end;
  align-items: flex-end;
}

/* Mobile compact page intros: hide small-caps eyebrow labels so content moves up. */
@media (max-width: 640px) {
  .page-intro .eyebrow,
  .section-heading .eyebrow,
  .agent-page-hero .eyebrow,
  .result-hero .eyebrow {
    display: none;
  }
}
/* Shared speaking/agent tool component. Used by Emotion Regulator, Agent Builder and future agents. */
.future-agent-grid,
.agent-tool-layout {
  gap: 24px;
}

.future-agent-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.agent-tool-layout {
  grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.18fr);
}

.agent-tool-panel,
.agent-output-card,
.future-agent-grid .card {
  min-width: 0;
}

.agent-tool-panel {
  gap: 18px;
  min-width: 0;
}

.form-panel .btn,
.agent-output-card .btn {
  margin-top: auto;
  margin-left: auto;
}

.agent-output-card {
  gap: 16px;
}

.agent-output-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

/* Shown instead of agent-tool-layout/agent-layout when a server include is missing (see docs/coding_rules.md Golden Rule 7). */
.agent-tool-fallback {
  gap: 14px;
  padding: 32px 24px;
  justify-items: center;
}

.agent-tool-fallback .avatar.portrait-avatar {
  width: 96px;
  height: 96px;
}

.agent-tool-fallback p {
  margin: 0;
  color: var(--muted);
}

.agent-tool-layout > .avatar-panel {
  grid-template-rows: auto auto auto;
  align-content: stretch;
  min-height: 600px;
  padding: 22px;
}

.agent-tool-layout > .avatar-panel::before {
  content: attr(aria-label);
  align-self: start;
  justify-self: start;
  margin: 0 0 12px;
  color: var(--coral);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.agent-tool-layout > .avatar-panel .avatar-stage {
  min-height: 360px;
  place-items: start center;
  padding-top: 12px;
}

.agent-tool-layout > .avatar-panel .avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.control-strip {
  gap: 10px;
  padding: 12px 0 0;
  background: transparent;
}

.agent-tool-layout > .avatar-panel .control-strip {
  margin-top: auto;
}

.agent-tool-layout > .avatar-panel > .control-strip {
  display: grid;
  grid-template-columns: minmax(0, min(32ch, 42vw)) minmax(0, 1fr);
  width: var(--mobile-inset-width);
  margin-inline: 14px;
  margin-bottom: 0;
  padding-inline: 0;
  padding-bottom: 0;
  gap: 18px;
}

.agent-tool-layout > .avatar-panel > .control-strip .status-pill {
  justify-self: start;
  min-width: 0;
  width: 100%;
  max-width: min(32ch, 42vw);
}

.agent-tool-layout > .avatar-panel > .control-strip .interaction-progress {
  justify-self: stretch;
  width: 100%;
  max-width: none;
}

.agent-tool-layout > .avatar-panel > .control-strip .interaction-progress-bar {
  width: 100%;
}

.mode-indicator {
  gap: 10px;
}

.mode-meter {
  --mode-position: 20%;
  grid-template-columns: max-content minmax(220px, 1fr) max-content;
  gap: 14px;
  min-height: 0;
  padding: 4px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-weight: 750;
  cursor: default;
  user-select: none;
}

.mode-switch-label {
  font-size: 0.86rem;
  line-height: 1.2;
}

.mode-switch-label.is-active {
  color: var(--teal-dark);
}

.mode-switch-track {
  position: relative;
  width: 100%;
  height: 10px;
  overflow: visible;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, rgba(195, 91, 69, 0.16), rgba(23, 109, 114, 0.16));
  box-shadow: inset 0 0 0 1px rgba(23, 109, 114, 0.18);
}

.mode-switch-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--mode-position);
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(244, 162, 97, 0.44), rgba(23, 109, 114, 0.32));
  transition: width 360ms ease;
}

.mode-switch-thumb {
  position: absolute;
  top: 50%;
  left: var(--mode-position);
  width: 14px;
  height: 28px;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: var(--radius-pill);
  background: var(--coral);
  box-shadow: 0 3px 12px rgba(19, 40, 45, 0.22);
  transform: translate(-50%, -50%);
  transition: left 360ms ease, background 360ms ease, box-shadow 360ms ease;
}

.mode-switch[data-mode=analysis] .mode-switch-thumb {
  background: var(--teal);
}

.mode-switch.is-shifting .mode-switch-thumb {
  animation: modePulse 520ms ease;
}

.mode-switch[data-mode=analysis] .mode-switch-label:last-child,
.mode-switch[data-mode=comfort] .mode-switch-label:first-child {
  color: var(--teal-dark);
}

@keyframes modePulse {
  0%, 100% {
    box-shadow: 0 3px 12px rgba(19, 40, 45, 0.22);
  }
  50% {
    box-shadow: 0 0 0 7px rgba(244, 162, 97, 0.18), 0 3px 12px rgba(19, 40, 45, 0.22);
  }
}
.field-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.45;
}

.mode-toggle {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.mode-toggle .btn {
  margin: 0;
  width: 100%;
}

.mode-toggle .btn.is-active {
  border-color: var(--teal-overlay-56);
  background: var(--teal-overlay-12);
  color: var(--teal-dark);
}

.speech-mode-indicator {
  gap: 8px;
}

.speech-mode-toggle-row {
  grid-template-columns: max-content minmax(52px, 68px) max-content;
  align-items: center;
  justify-content: start;
  gap: 10px;
}

.speech-mode-option {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
  transition: color 220ms ease;
}

.speech-mode-slider {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0;
  cursor: pointer;
}

.speech-mode-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.speech-mode-slider-track {
  position: relative;
  display: block;
  width: 100%;
  height: 18px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, rgba(23, 109, 114, 0.2), rgba(195, 91, 69, 0.2));
  box-shadow: inset 0 0 0 1px rgba(23, 109, 114, 0.25);
  transition: background 220ms ease, box-shadow 220ms ease, opacity 220ms ease;
}

.speech-mode-slider-thumb {
  position: absolute;
  top: 50%;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  transform: translateY(-50%);
  transition: left 240ms ease, background 240ms ease;
}

.speech-mode-input:checked + .speech-mode-slider-track {
  background: linear-gradient(90deg, rgba(23, 109, 114, 0.16), rgba(195, 91, 69, 0.28));
}

.speech-mode-input:checked + .speech-mode-slider-track .speech-mode-slider-thumb {
  left: calc(100% - 16px);
  background: var(--coral);
}

.speech-mode-input:focus-visible + .speech-mode-slider-track {
  box-shadow: inset 0 0 0 1px rgba(23, 109, 114, 0.45), 0 0 0 3px rgba(23, 109, 114, 0.2);
}

.speech-mode-indicator[data-speech-mode=agentic] .speech-mode-option-agentic,
.speech-mode-indicator[data-speech-mode=human] .speech-mode-option-human {
  color: var(--teal-dark);
}

.speech-mode-indicator[data-locked=true] .speech-mode-slider {
  cursor: not-allowed;
}

.speech-mode-indicator[data-locked=true] .speech-mode-slider-track {
  opacity: 0.52;
}

.speech-mode-indicator[data-locked=true] .speech-mode-option {
  opacity: 0.65;
}

.crisis-note {
  border-left: 4px solid var(--coral);
  padding: 14px 16px;
  background: var(--warm-surface);
  color: var(--ink);
}

@media (max-width: 980px) {
  .future-agent-grid,
  .agent-tool-layout,
  .agent-output-grid {
    grid-template-columns: 1fr;
  }
  .agent-tool-layout > .avatar-panel {
    min-height: 0;
  }
  .agent-tool-layout > .avatar-panel .avatar-stage {
    min-height: 300px;
  }
  .mode-meter {
    grid-template-columns: minmax(0, 1fr) minmax(150px, 1.6fr) minmax(0, 1fr);
  }
}
@media (max-width: 560px) {
  .mode-meter {
    grid-template-columns: max-content minmax(120px, 1fr) max-content;
    gap: 8px;
  }
  .mode-switch-label {
    font-size: 0.72rem;
  }
  .emotion-regulator-page .dimension-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .speech-mode-toggle-row {
    grid-template-columns: max-content minmax(52px, 68px) max-content;
    gap: 6px;
  }
  .speech-mode-option {
    font-size: 0.74rem;
  }
}
.agent-builder-page .dimension-list {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.agent-builder-page .dimension-list span {
  padding-inline: 6px;
  font-size: clamp(0.58rem, 1.15vw, 0.76rem);
}

.emotion-regulator-page .form-panel.is-result-mode {
  padding-block: 14px;
}

.agent-builder-page #builderResult .agent-brief-compact p {
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 4;
  line-clamp: 4;
}

.agent-builder-page #builderResult .agent-brief-compact .result-actions {
  margin-top: auto;
}

.emotion-regulator-page .form-panel.is-result-mode .mode-indicator,
.emotion-regulator-page .form-panel.is-result-mode .speech-mode-indicator {
  display: none;
}

.agent-builder-page .form-panel.is-result-mode,
.emotion-regulator-page .form-panel.is-result-mode {
  display: none;
}

.agent-builder-page #builderResult:not([hidden]),
.emotion-regulator-page #emotionResult:not([hidden]) {
  width: 100%;
  max-width: none;
  min-width: 0;
}

@media (max-width: 640px) {
  .agent-builder-page .form-panel.is-result-mode,
  .emotion-regulator-page .form-panel.is-result-mode {
    display: none;
  }
  .agent-builder-page .agent-tool-panel:has(#builderResult:not([hidden])),
  .emotion-regulator-page .agent-tool-panel:has(#emotionResult:not([hidden])) {
    gap: 0;
  }
  .agent-builder-page #builderResult:not([hidden]),
  .emotion-regulator-page #emotionResult:not([hidden]) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .agent-builder-page #builderResult .agent-brief-compact p {
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }
}
.mode-long {
  display: inline;
}

.mode-short {
  display: none;
}

@media (min-width: 981px) {
  .emotion-regulator-page .mode-meter {
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    width: 100%;
    justify-content: stretch;
  }
}
@media (max-width: 760px) {
  .mode-long {
    display: none;
  }
  .mode-short {
    display: inline;
  }
}
@media (max-width: 640px) {
  .agent-tool-layout > .avatar-panel {
    gap: 8px;
    min-height: 0;
    padding: 18px;
  }
  .agent-tool-layout > .avatar-panel .avatar-stage {
    min-height: 280px;
    padding-top: 2px;
    --avatar-circle-size: var(--avatar-circle-size-tablet);
  }
  .agent-tool-layout > .avatar-panel > .control-strip {
    grid-template-columns: minmax(0, 1fr);
    width: var(--mobile-inset-width);
    margin: 4px 14px 14px;
    padding-inline: 0;
    padding-bottom: 0;
    gap: 8px;
  }
  .agent-tool-layout > .avatar-panel > .control-strip .status-pill {
    width: 100%;
    max-width: none;
    min-height: var(--avatar-live-box-height-compact-mobile);
    max-height: var(--avatar-live-box-height-compact-mobile);
    padding: var(--control-padding-mobile);
    font-size: var(--avatar-live-font-size-mobile);
    line-height: var(--avatar-live-line-height);
    white-space: normal;
    text-overflow: clip;
  }
  .agent-tool-layout > .avatar-panel > .control-strip .interaction-progress {
    width: 100%;
  }
  .agent-detail-page .tag,
  .agent-tool-layout .tag,
  .idea-related-strip .tag {
    display: block;
    width: 100%;
    max-width: 100%;
    margin-bottom: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
/* Shared footer component. */
.footer {
  gap: 12px 20px;
  padding: 34px 5vw 46px;
  color: var(--muted);
  border-top: var(--border-hairline);
}

.footer p {
  margin: 0;
}

.footer-links {
  gap: 10px 18px;
  line-height: 1.5;
}

.footer-links a {
  color: var(--coral);
  text-decoration: none;
  text-underline-offset: 4px;
  font-weight: 400;
}

.footer-links a:hover,
.footer-links a:focus-visible {
  color: var(--orange);
}

@media (max-width: 1024px) {
  .footer,
  footer.footer {
    display: none;
  }
}
/* Shared speech/quote-card stack used by Agent Concept Design examples. */
.concept-quote-stack {
  grid-column: 1/-1;
  position: relative;
  width: 100%;
  min-height: 420px;
}

.concept-quote-stack .entry-card {
  position: relative;
  max-width: 86%;
  overflow: visible;
  padding-bottom: 42px;
  border-radius: 18px;
}

.concept-quote-stack .entry-card::before {
  content: "";
  position: absolute;
  right: 34px;
  bottom: -11px;
  z-index: 2;
  width: 18px;
  height: 18px;
  border: var(--border-hairline);
  border-left: 0;
  border-top: 0;
  background: var(--white);
  transform: rotate(45deg);
}

.concept-quote-stack .entry-card::after {
  content: none;
  display: none;
}

.concept-quote-stack .entry-card:nth-child(2) {
  margin-left: auto;
  transform: translateY(14px);
}

.concept-quote-stack .entry-card:nth-child(3) {
  margin-left: 8%;
  transform: translateY(26px);
}

.concept-quote-stack .entry-card:nth-child(4) {
  margin-left: auto;
  transform: translateY(38px);
}

@media (max-width: 760px) {
  .concept-quote-stack {
    min-height: auto;
  }
  .concept-quote-stack .entry-card {
    max-width: 100%;
    margin-left: 0;
    transform: none;
  }
}
.align-baseline {
  vertical-align: baseline;
}

.align-top {
  vertical-align: top;
}

.align-middle {
  vertical-align: middle;
}

.align-bottom {
  vertical-align: bottom;
}

.align-text-bottom {
  vertical-align: text-bottom;
}

.align-text-top {
  vertical-align: text-top;
}

.float-start {
  float: left;
}

.float-end {
  float: right;
}

.float-none {
  float: none;
}

.object-fit-contain {
  object-fit: contain;
}

.object-fit-cover {
  object-fit: cover;
}

.object-fit-fill {
  object-fit: fill;
}

.object-fit-scale {
  object-fit: scale-down;
}

.object-fit-none {
  object-fit: none;
}

.opacity-0 {
  opacity: 0;
}

.opacity-25 {
  opacity: 0.25;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-75 {
  opacity: 0.75;
}

.opacity-100 {
  opacity: 1;
}

.overflow-auto {
  overflow: auto;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-visible {
  overflow: visible;
}

.overflow-scroll {
  overflow: scroll;
}

.overflow-x-auto {
  overflow-x: auto;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

.overflow-x-visible {
  overflow-x: visible;
}

.overflow-x-scroll {
  overflow-x: scroll;
}

.overflow-y-auto {
  overflow-y: auto;
}

.overflow-y-hidden {
  overflow-y: hidden;
}

.overflow-y-visible {
  overflow-y: visible;
}

.overflow-y-scroll {
  overflow-y: scroll;
}

.d-inline {
  display: inline;
}

.d-inline-block {
  display: inline-block;
}

.d-block {
  display: block;
}

.d-grid {
  display: grid;
}

.d-inline-grid {
  display: inline-grid;
}

.d-table {
  display: table;
}

.d-table-row {
  display: table-row;
}

.d-table-cell {
  display: table-cell;
}

.d-flex {
  display: flex;
}

.d-inline-flex {
  display: inline-flex;
}

.d-none {
  display: none;
}

.shadow {
  box-shadow: var(--bs-box-shadow);
}

.shadow-sm {
  box-shadow: var(--bs-box-shadow-sm);
}

.shadow-lg {
  box-shadow: var(--bs-box-shadow-lg);
}

.shadow-none {
  box-shadow: none;
}

.focus-ring-primary {
  --bs-focus-ring-color: rgba(var(--bs-primary-rgb), var(--bs-focus-ring-opacity));
}

.focus-ring-secondary {
  --bs-focus-ring-color: rgba(var(--bs-secondary-rgb), var(--bs-focus-ring-opacity));
}

.focus-ring-success {
  --bs-focus-ring-color: rgba(var(--bs-success-rgb), var(--bs-focus-ring-opacity));
}

.focus-ring-info {
  --bs-focus-ring-color: rgba(var(--bs-info-rgb), var(--bs-focus-ring-opacity));
}

.focus-ring-warning {
  --bs-focus-ring-color: rgba(var(--bs-warning-rgb), var(--bs-focus-ring-opacity));
}

.focus-ring-danger {
  --bs-focus-ring-color: rgba(var(--bs-danger-rgb), var(--bs-focus-ring-opacity));
}

.focus-ring-light {
  --bs-focus-ring-color: rgba(var(--bs-light-rgb), var(--bs-focus-ring-opacity));
}

.focus-ring-dark {
  --bs-focus-ring-color: rgba(var(--bs-dark-rgb), var(--bs-focus-ring-opacity));
}

.position-static {
  position: static;
}

.position-relative {
  position: relative;
}

.position-absolute {
  position: absolute;
}

.position-fixed {
  position: fixed;
}

.position-sticky {
  position: sticky;
}

.top-0 {
  top: 0;
}

.top-50 {
  top: 50%;
}

.top-100 {
  top: 100%;
}

.bottom-0 {
  bottom: 0;
}

.bottom-50 {
  bottom: 50%;
}

.bottom-100 {
  bottom: 100%;
}

.start-0 {
  left: 0;
}

.start-50 {
  left: 50%;
}

.start-100 {
  left: 100%;
}

.end-0 {
  right: 0;
}

.end-50 {
  right: 50%;
}

.end-100 {
  right: 100%;
}

.translate-middle {
  transform: translate(-50%, -50%);
}

.translate-middle-x {
  transform: translateX(-50%);
}

.translate-middle-y {
  transform: translateY(-50%);
}

.border {
  border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
}

.border-0 {
  border: 0;
}

.border-top {
  border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
}

.border-top-0 {
  border-top: 0;
}

.border-end {
  border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
}

.border-end-0 {
  border-right: 0;
}

.border-bottom {
  border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
}

.border-bottom-0 {
  border-bottom: 0;
}

.border-start {
  border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
}

.border-start-0 {
  border-left: 0;
}

.border-primary {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-primary-rgb), var(--bs-border-opacity));
}

.border-secondary {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-secondary-rgb), var(--bs-border-opacity));
}

.border-success {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-success-rgb), var(--bs-border-opacity));
}

.border-info {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-info-rgb), var(--bs-border-opacity));
}

.border-warning {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-warning-rgb), var(--bs-border-opacity));
}

.border-danger {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-danger-rgb), var(--bs-border-opacity));
}

.border-light {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-light-rgb), var(--bs-border-opacity));
}

.border-dark {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-dark-rgb), var(--bs-border-opacity));
}

.border-black {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-black-rgb), var(--bs-border-opacity));
}

.border-white {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-white-rgb), var(--bs-border-opacity));
}

.border-primary-subtle {
  border-color: var(--bs-primary-border-subtle);
}

.border-secondary-subtle {
  border-color: var(--bs-secondary-border-subtle);
}

.border-success-subtle {
  border-color: var(--bs-success-border-subtle);
}

.border-info-subtle {
  border-color: var(--bs-info-border-subtle);
}

.border-warning-subtle {
  border-color: var(--bs-warning-border-subtle);
}

.border-danger-subtle {
  border-color: var(--bs-danger-border-subtle);
}

.border-light-subtle {
  border-color: var(--bs-light-border-subtle);
}

.border-dark-subtle {
  border-color: var(--bs-dark-border-subtle);
}

.border-1 {
  border-width: 1px;
}

.border-2 {
  border-width: 2px;
}

.border-3 {
  border-width: 3px;
}

.border-4 {
  border-width: 4px;
}

.border-5 {
  border-width: 5px;
}

.border-opacity-10 {
  --bs-border-opacity: 0.1;
}

.border-opacity-25 {
  --bs-border-opacity: 0.25;
}

.border-opacity-50 {
  --bs-border-opacity: 0.5;
}

.border-opacity-75 {
  --bs-border-opacity: 0.75;
}

.border-opacity-100 {
  --bs-border-opacity: 1;
}

.w-25 {
  width: 25%;
}

.w-50 {
  width: 50%;
}

.w-75 {
  width: 75%;
}

.w-100 {
  width: 100%;
}

.w-auto {
  width: auto;
}

.mw-100 {
  max-width: 100%;
}

.vw-100 {
  width: 100vw;
}

.min-vw-100 {
  min-width: 100vw;
}

.h-25 {
  height: 25%;
}

.h-50 {
  height: 50%;
}

.h-75 {
  height: 75%;
}

.h-100 {
  height: 100%;
}

.h-auto {
  height: auto;
}

.mh-100 {
  max-height: 100%;
}

.vh-100 {
  height: 100vh;
}

.min-vh-100 {
  min-height: 100vh;
}

.flex-fill {
  flex: 1 1 auto;
}

.flex-row {
  flex-direction: row;
}

.flex-column {
  flex-direction: column;
}

.flex-row-reverse {
  flex-direction: row-reverse;
}

.flex-column-reverse {
  flex-direction: column-reverse;
}

.flex-grow-0 {
  flex-grow: 0;
}

.flex-grow-1 {
  flex-grow: 1;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.flex-shrink-1 {
  flex-shrink: 1;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.flex-wrap-reverse {
  flex-wrap: wrap-reverse;
}

.justify-content-start {
  justify-content: flex-start;
}

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

.justify-content-center {
  justify-content: center;
}

.justify-content-between {
  justify-content: space-between;
}

.justify-content-around {
  justify-content: space-around;
}

.justify-content-evenly {
  justify-content: space-evenly;
}

.align-items-start {
  align-items: flex-start;
}

.align-items-end {
  align-items: flex-end;
}

.align-items-center {
  align-items: center;
}

.align-items-baseline {
  align-items: baseline;
}

.align-items-stretch {
  align-items: stretch;
}

.align-content-start {
  align-content: flex-start;
}

.align-content-end {
  align-content: flex-end;
}

.align-content-center {
  align-content: center;
}

.align-content-between {
  align-content: space-between;
}

.align-content-around {
  align-content: space-around;
}

.align-content-stretch {
  align-content: stretch;
}

.align-self-auto {
  align-self: auto;
}

.align-self-start {
  align-self: flex-start;
}

.align-self-end {
  align-self: flex-end;
}

.align-self-center {
  align-self: center;
}

.align-self-baseline {
  align-self: baseline;
}

.align-self-stretch {
  align-self: stretch;
}

.order-first {
  order: -1;
}

.order-0 {
  order: 0;
}

.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}

.order-3 {
  order: 3;
}

.order-4 {
  order: 4;
}

.order-5 {
  order: 5;
}

.order-last {
  order: 6;
}

.m-0 {
  margin: 0;
}

.m-1 {
  margin: 0.25rem;
}

.m-2 {
  margin: 0.5rem;
}

.m-3 {
  margin: 1rem;
}

.m-4 {
  margin: 1.5rem;
}

.m-5 {
  margin: 3rem;
}

.m-auto {
  margin: auto;
}

.mx-0 {
  margin-right: 0;
  margin-left: 0;
}

.mx-1 {
  margin-right: 0.25rem;
  margin-left: 0.25rem;
}

.mx-2 {
  margin-right: 0.5rem;
  margin-left: 0.5rem;
}

.mx-3 {
  margin-right: 1rem;
  margin-left: 1rem;
}

.mx-4 {
  margin-right: 1.5rem;
  margin-left: 1.5rem;
}

.mx-5 {
  margin-right: 3rem;
  margin-left: 3rem;
}

.mx-auto {
  margin-right: auto;
  margin-left: auto;
}

.my-0 {
  margin-top: 0;
  margin-bottom: 0;
}

.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.my-2 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.my-3 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.my-4 {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.my-5 {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.my-auto {
  margin-top: auto;
  margin-bottom: auto;
}

.mt-0 {
  margin-top: 0;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-3 {
  margin-top: 1rem;
}

.mt-4 {
  margin-top: 1.5rem;
}

.mt-5 {
  margin-top: 3rem;
}

.mt-auto {
  margin-top: auto;
}

.me-0 {
  margin-right: 0;
}

.me-1 {
  margin-right: 0.25rem;
}

.me-2 {
  margin-right: 0.5rem;
}

.me-3 {
  margin-right: 1rem;
}

.me-4 {
  margin-right: 1.5rem;
}

.me-5 {
  margin-right: 3rem;
}

.me-auto {
  margin-right: auto;
}

.mb-0 {
  margin-bottom: 0;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-3 {
  margin-bottom: 1rem;
}

.mb-4 {
  margin-bottom: 1.5rem;
}

.mb-5 {
  margin-bottom: 3rem;
}

.mb-auto {
  margin-bottom: auto;
}

.ms-0 {
  margin-left: 0;
}

.ms-1 {
  margin-left: 0.25rem;
}

.ms-2 {
  margin-left: 0.5rem;
}

.ms-3 {
  margin-left: 1rem;
}

.ms-4 {
  margin-left: 1.5rem;
}

.ms-5 {
  margin-left: 3rem;
}

.ms-auto {
  margin-left: auto;
}

.p-0 {
  padding: 0;
}

.p-1 {
  padding: 0.25rem;
}

.p-2 {
  padding: 0.5rem;
}

.p-3 {
  padding: 1rem;
}

.p-4 {
  padding: 1.5rem;
}

.p-5 {
  padding: 3rem;
}

.px-0 {
  padding-right: 0;
  padding-left: 0;
}

.px-1 {
  padding-right: 0.25rem;
  padding-left: 0.25rem;
}

.px-2 {
  padding-right: 0.5rem;
  padding-left: 0.5rem;
}

.px-3 {
  padding-right: 1rem;
  padding-left: 1rem;
}

.px-4 {
  padding-right: 1.5rem;
  padding-left: 1.5rem;
}

.px-5 {
  padding-right: 3rem;
  padding-left: 3rem;
}

.py-0 {
  padding-top: 0;
  padding-bottom: 0;
}

.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-3 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-4 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.py-5 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.pt-0 {
  padding-top: 0;
}

.pt-1 {
  padding-top: 0.25rem;
}

.pt-2 {
  padding-top: 0.5rem;
}

.pt-3 {
  padding-top: 1rem;
}

.pt-4 {
  padding-top: 1.5rem;
}

.pt-5 {
  padding-top: 3rem;
}

.pe-0 {
  padding-right: 0;
}

.pe-1 {
  padding-right: 0.25rem;
}

.pe-2 {
  padding-right: 0.5rem;
}

.pe-3 {
  padding-right: 1rem;
}

.pe-4 {
  padding-right: 1.5rem;
}

.pe-5 {
  padding-right: 3rem;
}

.pb-0 {
  padding-bottom: 0;
}

.pb-1 {
  padding-bottom: 0.25rem;
}

.pb-2 {
  padding-bottom: 0.5rem;
}

.pb-3 {
  padding-bottom: 1rem;
}

.pb-4 {
  padding-bottom: 1.5rem;
}

.pb-5 {
  padding-bottom: 3rem;
}

.ps-0 {
  padding-left: 0;
}

.ps-1 {
  padding-left: 0.25rem;
}

.ps-2 {
  padding-left: 0.5rem;
}

.ps-3 {
  padding-left: 1rem;
}

.ps-4 {
  padding-left: 1.5rem;
}

.ps-5 {
  padding-left: 3rem;
}

.gap-0 {
  gap: 0;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-3 {
  gap: 1rem;
}

.gap-4 {
  gap: 1.5rem;
}

.gap-5 {
  gap: 3rem;
}

.row-gap-0 {
  row-gap: 0;
}

.row-gap-1 {
  row-gap: 0.25rem;
}

.row-gap-2 {
  row-gap: 0.5rem;
}

.row-gap-3 {
  row-gap: 1rem;
}

.row-gap-4 {
  row-gap: 1.5rem;
}

.row-gap-5 {
  row-gap: 3rem;
}

.column-gap-0 {
  column-gap: 0;
}

.column-gap-1 {
  column-gap: 0.25rem;
}

.column-gap-2 {
  column-gap: 0.5rem;
}

.column-gap-3 {
  column-gap: 1rem;
}

.column-gap-4 {
  column-gap: 1.5rem;
}

.column-gap-5 {
  column-gap: 3rem;
}

.font-monospace {
  font-family: var(--bs-font-monospace);
}

.fs-1 {
  font-size: calc(1.375rem + 1.5vw);
}

.fs-2 {
  font-size: calc(1.325rem + 0.9vw);
}

.fs-3 {
  font-size: calc(1.3rem + 0.6vw);
}

.fs-4 {
  font-size: calc(1.275rem + 0.3vw);
}

.fs-5 {
  font-size: 1.25rem;
}

.fs-6 {
  font-size: 1rem;
}

.fst-italic {
  font-style: italic;
}

.fst-normal {
  font-style: normal;
}

.fw-lighter {
  font-weight: lighter;
}

.fw-light {
  font-weight: 300;
}

.fw-normal {
  font-weight: 400;
}

.fw-medium {
  font-weight: 500;
}

.fw-semibold {
  font-weight: 600;
}

.fw-bold {
  font-weight: 700;
}

.fw-bolder {
  font-weight: bolder;
}

.lh-1 {
  line-height: 1;
}

.lh-sm {
  line-height: 1.25;
}

.lh-base {
  line-height: 1.5;
}

.lh-lg {
  line-height: 2;
}

.text-start {
  text-align: left;
}

.text-end {
  text-align: right;
}

.text-center {
  text-align: center;
}

.text-decoration-none {
  text-decoration: none;
}

.text-decoration-underline {
  text-decoration: underline;
}

.text-decoration-line-through {
  text-decoration: line-through;
}

.text-lowercase {
  text-transform: lowercase;
}

.text-uppercase {
  text-transform: uppercase;
}

.text-capitalize {
  text-transform: capitalize;
}

.text-wrap {
  white-space: normal;
}

.text-nowrap {
  white-space: nowrap;
}

/* rtl:begin:remove */
.text-break {
  word-wrap: break-word;
  word-break: break-word;
}

/* rtl:end:remove */
.text-primary {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity));
}

.text-secondary {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-secondary-rgb), var(--bs-text-opacity));
}

.text-success {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-success-rgb), var(--bs-text-opacity));
}

.text-info {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-info-rgb), var(--bs-text-opacity));
}

.text-warning {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-warning-rgb), var(--bs-text-opacity));
}

.text-danger {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-danger-rgb), var(--bs-text-opacity));
}

.text-light {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-light-rgb), var(--bs-text-opacity));
}

.text-dark {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-dark-rgb), var(--bs-text-opacity));
}

.text-black {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-black-rgb), var(--bs-text-opacity));
}

.text-white {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-white-rgb), var(--bs-text-opacity));
}

.text-body {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-body-color-rgb), var(--bs-text-opacity));
}

.text-muted {
  --bs-text-opacity: 1;
  color: var(--bs-secondary-color);
}

.text-black-50 {
  --bs-text-opacity: 1;
  color: rgba(0, 0, 0, 0.5);
}

.text-white-50 {
  --bs-text-opacity: 1;
  color: rgba(255, 255, 255, 0.5);
}

.text-body-secondary {
  --bs-text-opacity: 1;
  color: var(--bs-secondary-color);
}

.text-body-tertiary {
  --bs-text-opacity: 1;
  color: var(--bs-tertiary-color);
}

.text-body-emphasis {
  --bs-text-opacity: 1;
  color: var(--bs-emphasis-color);
}

.text-reset {
  --bs-text-opacity: 1;
  color: inherit;
}

.text-opacity-25 {
  --bs-text-opacity: 0.25;
}

.text-opacity-50 {
  --bs-text-opacity: 0.5;
}

.text-opacity-75 {
  --bs-text-opacity: 0.75;
}

.text-opacity-100 {
  --bs-text-opacity: 1;
}

.text-primary-emphasis {
  color: var(--bs-primary-text-emphasis);
}

.text-secondary-emphasis {
  color: var(--bs-secondary-text-emphasis);
}

.text-success-emphasis {
  color: var(--bs-success-text-emphasis);
}

.text-info-emphasis {
  color: var(--bs-info-text-emphasis);
}

.text-warning-emphasis {
  color: var(--bs-warning-text-emphasis);
}

.text-danger-emphasis {
  color: var(--bs-danger-text-emphasis);
}

.text-light-emphasis {
  color: var(--bs-light-text-emphasis);
}

.text-dark-emphasis {
  color: var(--bs-dark-text-emphasis);
}

.link-opacity-10 {
  --bs-link-opacity: 0.1;
}

.link-opacity-10-hover:hover {
  --bs-link-opacity: 0.1;
}

.link-opacity-25 {
  --bs-link-opacity: 0.25;
}

.link-opacity-25-hover:hover {
  --bs-link-opacity: 0.25;
}

.link-opacity-50 {
  --bs-link-opacity: 0.5;
}

.link-opacity-50-hover:hover {
  --bs-link-opacity: 0.5;
}

.link-opacity-75 {
  --bs-link-opacity: 0.75;
}

.link-opacity-75-hover:hover {
  --bs-link-opacity: 0.75;
}

.link-opacity-100 {
  --bs-link-opacity: 1;
}

.link-opacity-100-hover:hover {
  --bs-link-opacity: 1;
}

.link-offset-1 {
  text-underline-offset: 0.125em;
}

.link-offset-1-hover:hover {
  text-underline-offset: 0.125em;
}

.link-offset-2 {
  text-underline-offset: 0.25em;
}

.link-offset-2-hover:hover {
  text-underline-offset: 0.25em;
}

.link-offset-3 {
  text-underline-offset: 0.375em;
}

.link-offset-3-hover:hover {
  text-underline-offset: 0.375em;
}

.link-underline-primary {
  --bs-link-underline-opacity: 1;
  text-decoration-color: rgba(var(--bs-primary-rgb), var(--bs-link-underline-opacity));
}

.link-underline-secondary {
  --bs-link-underline-opacity: 1;
  text-decoration-color: rgba(var(--bs-secondary-rgb), var(--bs-link-underline-opacity));
}

.link-underline-success {
  --bs-link-underline-opacity: 1;
  text-decoration-color: rgba(var(--bs-success-rgb), var(--bs-link-underline-opacity));
}

.link-underline-info {
  --bs-link-underline-opacity: 1;
  text-decoration-color: rgba(var(--bs-info-rgb), var(--bs-link-underline-opacity));
}

.link-underline-warning {
  --bs-link-underline-opacity: 1;
  text-decoration-color: rgba(var(--bs-warning-rgb), var(--bs-link-underline-opacity));
}

.link-underline-danger {
  --bs-link-underline-opacity: 1;
  text-decoration-color: rgba(var(--bs-danger-rgb), var(--bs-link-underline-opacity));
}

.link-underline-light {
  --bs-link-underline-opacity: 1;
  text-decoration-color: rgba(var(--bs-light-rgb), var(--bs-link-underline-opacity));
}

.link-underline-dark {
  --bs-link-underline-opacity: 1;
  text-decoration-color: rgba(var(--bs-dark-rgb), var(--bs-link-underline-opacity));
}

.link-underline {
  --bs-link-underline-opacity: 1;
  text-decoration-color: rgba(var(--bs-link-color-rgb), var(--bs-link-underline-opacity, 1));
}

.link-underline-opacity-0 {
  --bs-link-underline-opacity: 0;
}

.link-underline-opacity-0-hover:hover {
  --bs-link-underline-opacity: 0;
}

.link-underline-opacity-10 {
  --bs-link-underline-opacity: 0.1;
}

.link-underline-opacity-10-hover:hover {
  --bs-link-underline-opacity: 0.1;
}

.link-underline-opacity-25 {
  --bs-link-underline-opacity: 0.25;
}

.link-underline-opacity-25-hover:hover {
  --bs-link-underline-opacity: 0.25;
}

.link-underline-opacity-50 {
  --bs-link-underline-opacity: 0.5;
}

.link-underline-opacity-50-hover:hover {
  --bs-link-underline-opacity: 0.5;
}

.link-underline-opacity-75 {
  --bs-link-underline-opacity: 0.75;
}

.link-underline-opacity-75-hover:hover {
  --bs-link-underline-opacity: 0.75;
}

.link-underline-opacity-100 {
  --bs-link-underline-opacity: 1;
}

.link-underline-opacity-100-hover:hover {
  --bs-link-underline-opacity: 1;
}

.bg-primary {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity));
}

.bg-secondary {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-secondary-rgb), var(--bs-bg-opacity));
}

.bg-success {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity));
}

.bg-info {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-info-rgb), var(--bs-bg-opacity));
}

.bg-warning {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity));
}

.bg-danger {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-danger-rgb), var(--bs-bg-opacity));
}

.bg-light {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity));
}

.bg-dark {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity));
}

.bg-black {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-black-rgb), var(--bs-bg-opacity));
}

.bg-white {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-white-rgb), var(--bs-bg-opacity));
}

.bg-body {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity));
}

.bg-transparent {
  --bs-bg-opacity: 1;
  background-color: transparent;
}

.bg-body-secondary {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-secondary-bg-rgb), var(--bs-bg-opacity));
}

.bg-body-tertiary {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-tertiary-bg-rgb), var(--bs-bg-opacity));
}

.bg-opacity-10 {
  --bs-bg-opacity: 0.1;
}

.bg-opacity-25 {
  --bs-bg-opacity: 0.25;
}

.bg-opacity-50 {
  --bs-bg-opacity: 0.5;
}

.bg-opacity-75 {
  --bs-bg-opacity: 0.75;
}

.bg-opacity-100 {
  --bs-bg-opacity: 1;
}

.bg-primary-subtle {
  background-color: var(--bs-primary-bg-subtle);
}

.bg-secondary-subtle {
  background-color: var(--bs-secondary-bg-subtle);
}

.bg-success-subtle {
  background-color: var(--bs-success-bg-subtle);
}

.bg-info-subtle {
  background-color: var(--bs-info-bg-subtle);
}

.bg-warning-subtle {
  background-color: var(--bs-warning-bg-subtle);
}

.bg-danger-subtle {
  background-color: var(--bs-danger-bg-subtle);
}

.bg-light-subtle {
  background-color: var(--bs-light-bg-subtle);
}

.bg-dark-subtle {
  background-color: var(--bs-dark-bg-subtle);
}

.bg-gradient {
  background-image: var(--bs-gradient);
}

.user-select-all {
  user-select: all;
}

.user-select-auto {
  user-select: auto;
}

.user-select-none {
  user-select: none;
}

.pe-none {
  pointer-events: none;
}

.pe-auto {
  pointer-events: auto;
}

.rounded {
  border-radius: var(--bs-border-radius);
}

.rounded-0 {
  border-radius: 0;
}

.rounded-1 {
  border-radius: var(--bs-border-radius-sm);
}

.rounded-2 {
  border-radius: var(--bs-border-radius);
}

.rounded-3 {
  border-radius: var(--bs-border-radius-lg);
}

.rounded-4 {
  border-radius: var(--bs-border-radius-xl);
}

.rounded-5 {
  border-radius: var(--bs-border-radius-xxl);
}

.rounded-circle {
  border-radius: 50%;
}

.rounded-pill {
  border-radius: var(--bs-border-radius-pill);
}

.rounded-top {
  border-top-left-radius: var(--bs-border-radius);
  border-top-right-radius: var(--bs-border-radius);
}

.rounded-top-0 {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.rounded-top-1 {
  border-top-left-radius: var(--bs-border-radius-sm);
  border-top-right-radius: var(--bs-border-radius-sm);
}

.rounded-top-2 {
  border-top-left-radius: var(--bs-border-radius);
  border-top-right-radius: var(--bs-border-radius);
}

.rounded-top-3 {
  border-top-left-radius: var(--bs-border-radius-lg);
  border-top-right-radius: var(--bs-border-radius-lg);
}

.rounded-top-4 {
  border-top-left-radius: var(--bs-border-radius-xl);
  border-top-right-radius: var(--bs-border-radius-xl);
}

.rounded-top-5 {
  border-top-left-radius: var(--bs-border-radius-xxl);
  border-top-right-radius: var(--bs-border-radius-xxl);
}

.rounded-top-circle {
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
}

.rounded-top-pill {
  border-top-left-radius: var(--bs-border-radius-pill);
  border-top-right-radius: var(--bs-border-radius-pill);
}

.rounded-end {
  border-top-right-radius: var(--bs-border-radius);
  border-bottom-right-radius: var(--bs-border-radius);
}

.rounded-end-0 {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.rounded-end-1 {
  border-top-right-radius: var(--bs-border-radius-sm);
  border-bottom-right-radius: var(--bs-border-radius-sm);
}

.rounded-end-2 {
  border-top-right-radius: var(--bs-border-radius);
  border-bottom-right-radius: var(--bs-border-radius);
}

.rounded-end-3 {
  border-top-right-radius: var(--bs-border-radius-lg);
  border-bottom-right-radius: var(--bs-border-radius-lg);
}

.rounded-end-4 {
  border-top-right-radius: var(--bs-border-radius-xl);
  border-bottom-right-radius: var(--bs-border-radius-xl);
}

.rounded-end-5 {
  border-top-right-radius: var(--bs-border-radius-xxl);
  border-bottom-right-radius: var(--bs-border-radius-xxl);
}

.rounded-end-circle {
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
}

.rounded-end-pill {
  border-top-right-radius: var(--bs-border-radius-pill);
  border-bottom-right-radius: var(--bs-border-radius-pill);
}

.rounded-bottom {
  border-bottom-right-radius: var(--bs-border-radius);
  border-bottom-left-radius: var(--bs-border-radius);
}

.rounded-bottom-0 {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.rounded-bottom-1 {
  border-bottom-right-radius: var(--bs-border-radius-sm);
  border-bottom-left-radius: var(--bs-border-radius-sm);
}

.rounded-bottom-2 {
  border-bottom-right-radius: var(--bs-border-radius);
  border-bottom-left-radius: var(--bs-border-radius);
}

.rounded-bottom-3 {
  border-bottom-right-radius: var(--bs-border-radius-lg);
  border-bottom-left-radius: var(--bs-border-radius-lg);
}

.rounded-bottom-4 {
  border-bottom-right-radius: var(--bs-border-radius-xl);
  border-bottom-left-radius: var(--bs-border-radius-xl);
}

.rounded-bottom-5 {
  border-bottom-right-radius: var(--bs-border-radius-xxl);
  border-bottom-left-radius: var(--bs-border-radius-xxl);
}

.rounded-bottom-circle {
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
}

.rounded-bottom-pill {
  border-bottom-right-radius: var(--bs-border-radius-pill);
  border-bottom-left-radius: var(--bs-border-radius-pill);
}

.rounded-start {
  border-bottom-left-radius: var(--bs-border-radius);
  border-top-left-radius: var(--bs-border-radius);
}

.rounded-start-0 {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}

.rounded-start-1 {
  border-bottom-left-radius: var(--bs-border-radius-sm);
  border-top-left-radius: var(--bs-border-radius-sm);
}

.rounded-start-2 {
  border-bottom-left-radius: var(--bs-border-radius);
  border-top-left-radius: var(--bs-border-radius);
}

.rounded-start-3 {
  border-bottom-left-radius: var(--bs-border-radius-lg);
  border-top-left-radius: var(--bs-border-radius-lg);
}

.rounded-start-4 {
  border-bottom-left-radius: var(--bs-border-radius-xl);
  border-top-left-radius: var(--bs-border-radius-xl);
}

.rounded-start-5 {
  border-bottom-left-radius: var(--bs-border-radius-xxl);
  border-top-left-radius: var(--bs-border-radius-xxl);
}

.rounded-start-circle {
  border-bottom-left-radius: 50%;
  border-top-left-radius: 50%;
}

.rounded-start-pill {
  border-bottom-left-radius: var(--bs-border-radius-pill);
  border-top-left-radius: var(--bs-border-radius-pill);
}

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

.z-n1 {
  z-index: -1;
}

.z-0 {
  z-index: 0;
}

.z-1 {
  z-index: 1;
}

.z-2 {
  z-index: 2;
}

.z-3 {
  z-index: 3;
}

@media (min-width: 576px) {
  .float-sm-start {
    float: left;
  }
  .float-sm-end {
    float: right;
  }
  .float-sm-none {
    float: none;
  }
  .object-fit-sm-contain {
    object-fit: contain;
  }
  .object-fit-sm-cover {
    object-fit: cover;
  }
  .object-fit-sm-fill {
    object-fit: fill;
  }
  .object-fit-sm-scale {
    object-fit: scale-down;
  }
  .object-fit-sm-none {
    object-fit: none;
  }
  .d-sm-inline {
    display: inline;
  }
  .d-sm-inline-block {
    display: inline-block;
  }
  .d-sm-block {
    display: block;
  }
  .d-sm-grid {
    display: grid;
  }
  .d-sm-inline-grid {
    display: inline-grid;
  }
  .d-sm-table {
    display: table;
  }
  .d-sm-table-row {
    display: table-row;
  }
  .d-sm-table-cell {
    display: table-cell;
  }
  .d-sm-flex {
    display: flex;
  }
  .d-sm-inline-flex {
    display: inline-flex;
  }
  .d-sm-none {
    display: none;
  }
  .flex-sm-fill {
    flex: 1 1 auto;
  }
  .flex-sm-row {
    flex-direction: row;
  }
  .flex-sm-column {
    flex-direction: column;
  }
  .flex-sm-row-reverse {
    flex-direction: row-reverse;
  }
  .flex-sm-column-reverse {
    flex-direction: column-reverse;
  }
  .flex-sm-grow-0 {
    flex-grow: 0;
  }
  .flex-sm-grow-1 {
    flex-grow: 1;
  }
  .flex-sm-shrink-0 {
    flex-shrink: 0;
  }
  .flex-sm-shrink-1 {
    flex-shrink: 1;
  }
  .flex-sm-wrap {
    flex-wrap: wrap;
  }
  .flex-sm-nowrap {
    flex-wrap: nowrap;
  }
  .flex-sm-wrap-reverse {
    flex-wrap: wrap-reverse;
  }
  .justify-content-sm-start {
    justify-content: flex-start;
  }
  .justify-content-sm-end {
    justify-content: flex-end;
  }
  .justify-content-sm-center {
    justify-content: center;
  }
  .justify-content-sm-between {
    justify-content: space-between;
  }
  .justify-content-sm-around {
    justify-content: space-around;
  }
  .justify-content-sm-evenly {
    justify-content: space-evenly;
  }
  .align-items-sm-start {
    align-items: flex-start;
  }
  .align-items-sm-end {
    align-items: flex-end;
  }
  .align-items-sm-center {
    align-items: center;
  }
  .align-items-sm-baseline {
    align-items: baseline;
  }
  .align-items-sm-stretch {
    align-items: stretch;
  }
  .align-content-sm-start {
    align-content: flex-start;
  }
  .align-content-sm-end {
    align-content: flex-end;
  }
  .align-content-sm-center {
    align-content: center;
  }
  .align-content-sm-between {
    align-content: space-between;
  }
  .align-content-sm-around {
    align-content: space-around;
  }
  .align-content-sm-stretch {
    align-content: stretch;
  }
  .align-self-sm-auto {
    align-self: auto;
  }
  .align-self-sm-start {
    align-self: flex-start;
  }
  .align-self-sm-end {
    align-self: flex-end;
  }
  .align-self-sm-center {
    align-self: center;
  }
  .align-self-sm-baseline {
    align-self: baseline;
  }
  .align-self-sm-stretch {
    align-self: stretch;
  }
  .order-sm-first {
    order: -1;
  }
  .order-sm-0 {
    order: 0;
  }
  .order-sm-1 {
    order: 1;
  }
  .order-sm-2 {
    order: 2;
  }
  .order-sm-3 {
    order: 3;
  }
  .order-sm-4 {
    order: 4;
  }
  .order-sm-5 {
    order: 5;
  }
  .order-sm-last {
    order: 6;
  }
  .m-sm-0 {
    margin: 0;
  }
  .m-sm-1 {
    margin: 0.25rem;
  }
  .m-sm-2 {
    margin: 0.5rem;
  }
  .m-sm-3 {
    margin: 1rem;
  }
  .m-sm-4 {
    margin: 1.5rem;
  }
  .m-sm-5 {
    margin: 3rem;
  }
  .m-sm-auto {
    margin: auto;
  }
  .mx-sm-0 {
    margin-right: 0;
    margin-left: 0;
  }
  .mx-sm-1 {
    margin-right: 0.25rem;
    margin-left: 0.25rem;
  }
  .mx-sm-2 {
    margin-right: 0.5rem;
    margin-left: 0.5rem;
  }
  .mx-sm-3 {
    margin-right: 1rem;
    margin-left: 1rem;
  }
  .mx-sm-4 {
    margin-right: 1.5rem;
    margin-left: 1.5rem;
  }
  .mx-sm-5 {
    margin-right: 3rem;
    margin-left: 3rem;
  }
  .mx-sm-auto {
    margin-right: auto;
    margin-left: auto;
  }
  .my-sm-0 {
    margin-top: 0;
    margin-bottom: 0;
  }
  .my-sm-1 {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
  }
  .my-sm-2 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }
  .my-sm-3 {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  .my-sm-4 {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }
  .my-sm-5 {
    margin-top: 3rem;
    margin-bottom: 3rem;
  }
  .my-sm-auto {
    margin-top: auto;
    margin-bottom: auto;
  }
  .mt-sm-0 {
    margin-top: 0;
  }
  .mt-sm-1 {
    margin-top: 0.25rem;
  }
  .mt-sm-2 {
    margin-top: 0.5rem;
  }
  .mt-sm-3 {
    margin-top: 1rem;
  }
  .mt-sm-4 {
    margin-top: 1.5rem;
  }
  .mt-sm-5 {
    margin-top: 3rem;
  }
  .mt-sm-auto {
    margin-top: auto;
  }
  .me-sm-0 {
    margin-right: 0;
  }
  .me-sm-1 {
    margin-right: 0.25rem;
  }
  .me-sm-2 {
    margin-right: 0.5rem;
  }
  .me-sm-3 {
    margin-right: 1rem;
  }
  .me-sm-4 {
    margin-right: 1.5rem;
  }
  .me-sm-5 {
    margin-right: 3rem;
  }
  .me-sm-auto {
    margin-right: auto;
  }
  .mb-sm-0 {
    margin-bottom: 0;
  }
  .mb-sm-1 {
    margin-bottom: 0.25rem;
  }
  .mb-sm-2 {
    margin-bottom: 0.5rem;
  }
  .mb-sm-3 {
    margin-bottom: 1rem;
  }
  .mb-sm-4 {
    margin-bottom: 1.5rem;
  }
  .mb-sm-5 {
    margin-bottom: 3rem;
  }
  .mb-sm-auto {
    margin-bottom: auto;
  }
  .ms-sm-0 {
    margin-left: 0;
  }
  .ms-sm-1 {
    margin-left: 0.25rem;
  }
  .ms-sm-2 {
    margin-left: 0.5rem;
  }
  .ms-sm-3 {
    margin-left: 1rem;
  }
  .ms-sm-4 {
    margin-left: 1.5rem;
  }
  .ms-sm-5 {
    margin-left: 3rem;
  }
  .ms-sm-auto {
    margin-left: auto;
  }
  .p-sm-0 {
    padding: 0;
  }
  .p-sm-1 {
    padding: 0.25rem;
  }
  .p-sm-2 {
    padding: 0.5rem;
  }
  .p-sm-3 {
    padding: 1rem;
  }
  .p-sm-4 {
    padding: 1.5rem;
  }
  .p-sm-5 {
    padding: 3rem;
  }
  .px-sm-0 {
    padding-right: 0;
    padding-left: 0;
  }
  .px-sm-1 {
    padding-right: 0.25rem;
    padding-left: 0.25rem;
  }
  .px-sm-2 {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
  .px-sm-3 {
    padding-right: 1rem;
    padding-left: 1rem;
  }
  .px-sm-4 {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
  .px-sm-5 {
    padding-right: 3rem;
    padding-left: 3rem;
  }
  .py-sm-0 {
    padding-top: 0;
    padding-bottom: 0;
  }
  .py-sm-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }
  .py-sm-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .py-sm-3 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .py-sm-4 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
  .py-sm-5 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  .pt-sm-0 {
    padding-top: 0;
  }
  .pt-sm-1 {
    padding-top: 0.25rem;
  }
  .pt-sm-2 {
    padding-top: 0.5rem;
  }
  .pt-sm-3 {
    padding-top: 1rem;
  }
  .pt-sm-4 {
    padding-top: 1.5rem;
  }
  .pt-sm-5 {
    padding-top: 3rem;
  }
  .pe-sm-0 {
    padding-right: 0;
  }
  .pe-sm-1 {
    padding-right: 0.25rem;
  }
  .pe-sm-2 {
    padding-right: 0.5rem;
  }
  .pe-sm-3 {
    padding-right: 1rem;
  }
  .pe-sm-4 {
    padding-right: 1.5rem;
  }
  .pe-sm-5 {
    padding-right: 3rem;
  }
  .pb-sm-0 {
    padding-bottom: 0;
  }
  .pb-sm-1 {
    padding-bottom: 0.25rem;
  }
  .pb-sm-2 {
    padding-bottom: 0.5rem;
  }
  .pb-sm-3 {
    padding-bottom: 1rem;
  }
  .pb-sm-4 {
    padding-bottom: 1.5rem;
  }
  .pb-sm-5 {
    padding-bottom: 3rem;
  }
  .ps-sm-0 {
    padding-left: 0;
  }
  .ps-sm-1 {
    padding-left: 0.25rem;
  }
  .ps-sm-2 {
    padding-left: 0.5rem;
  }
  .ps-sm-3 {
    padding-left: 1rem;
  }
  .ps-sm-4 {
    padding-left: 1.5rem;
  }
  .ps-sm-5 {
    padding-left: 3rem;
  }
  .gap-sm-0 {
    gap: 0;
  }
  .gap-sm-1 {
    gap: 0.25rem;
  }
  .gap-sm-2 {
    gap: 0.5rem;
  }
  .gap-sm-3 {
    gap: 1rem;
  }
  .gap-sm-4 {
    gap: 1.5rem;
  }
  .gap-sm-5 {
    gap: 3rem;
  }
  .row-gap-sm-0 {
    row-gap: 0;
  }
  .row-gap-sm-1 {
    row-gap: 0.25rem;
  }
  .row-gap-sm-2 {
    row-gap: 0.5rem;
  }
  .row-gap-sm-3 {
    row-gap: 1rem;
  }
  .row-gap-sm-4 {
    row-gap: 1.5rem;
  }
  .row-gap-sm-5 {
    row-gap: 3rem;
  }
  .column-gap-sm-0 {
    column-gap: 0;
  }
  .column-gap-sm-1 {
    column-gap: 0.25rem;
  }
  .column-gap-sm-2 {
    column-gap: 0.5rem;
  }
  .column-gap-sm-3 {
    column-gap: 1rem;
  }
  .column-gap-sm-4 {
    column-gap: 1.5rem;
  }
  .column-gap-sm-5 {
    column-gap: 3rem;
  }
  .text-sm-start {
    text-align: left;
  }
  .text-sm-end {
    text-align: right;
  }
  .text-sm-center {
    text-align: center;
  }
}
@media (min-width: 768px) {
  .float-md-start {
    float: left;
  }
  .float-md-end {
    float: right;
  }
  .float-md-none {
    float: none;
  }
  .object-fit-md-contain {
    object-fit: contain;
  }
  .object-fit-md-cover {
    object-fit: cover;
  }
  .object-fit-md-fill {
    object-fit: fill;
  }
  .object-fit-md-scale {
    object-fit: scale-down;
  }
  .object-fit-md-none {
    object-fit: none;
  }
  .d-md-inline {
    display: inline;
  }
  .d-md-inline-block {
    display: inline-block;
  }
  .d-md-block {
    display: block;
  }
  .d-md-grid {
    display: grid;
  }
  .d-md-inline-grid {
    display: inline-grid;
  }
  .d-md-table {
    display: table;
  }
  .d-md-table-row {
    display: table-row;
  }
  .d-md-table-cell {
    display: table-cell;
  }
  .d-md-flex {
    display: flex;
  }
  .d-md-inline-flex {
    display: inline-flex;
  }
  .d-md-none {
    display: none;
  }
  .flex-md-fill {
    flex: 1 1 auto;
  }
  .flex-md-row {
    flex-direction: row;
  }
  .flex-md-column {
    flex-direction: column;
  }
  .flex-md-row-reverse {
    flex-direction: row-reverse;
  }
  .flex-md-column-reverse {
    flex-direction: column-reverse;
  }
  .flex-md-grow-0 {
    flex-grow: 0;
  }
  .flex-md-grow-1 {
    flex-grow: 1;
  }
  .flex-md-shrink-0 {
    flex-shrink: 0;
  }
  .flex-md-shrink-1 {
    flex-shrink: 1;
  }
  .flex-md-wrap {
    flex-wrap: wrap;
  }
  .flex-md-nowrap {
    flex-wrap: nowrap;
  }
  .flex-md-wrap-reverse {
    flex-wrap: wrap-reverse;
  }
  .justify-content-md-start {
    justify-content: flex-start;
  }
  .justify-content-md-end {
    justify-content: flex-end;
  }
  .justify-content-md-center {
    justify-content: center;
  }
  .justify-content-md-between {
    justify-content: space-between;
  }
  .justify-content-md-around {
    justify-content: space-around;
  }
  .justify-content-md-evenly {
    justify-content: space-evenly;
  }
  .align-items-md-start {
    align-items: flex-start;
  }
  .align-items-md-end {
    align-items: flex-end;
  }
  .align-items-md-center {
    align-items: center;
  }
  .align-items-md-baseline {
    align-items: baseline;
  }
  .align-items-md-stretch {
    align-items: stretch;
  }
  .align-content-md-start {
    align-content: flex-start;
  }
  .align-content-md-end {
    align-content: flex-end;
  }
  .align-content-md-center {
    align-content: center;
  }
  .align-content-md-between {
    align-content: space-between;
  }
  .align-content-md-around {
    align-content: space-around;
  }
  .align-content-md-stretch {
    align-content: stretch;
  }
  .align-self-md-auto {
    align-self: auto;
  }
  .align-self-md-start {
    align-self: flex-start;
  }
  .align-self-md-end {
    align-self: flex-end;
  }
  .align-self-md-center {
    align-self: center;
  }
  .align-self-md-baseline {
    align-self: baseline;
  }
  .align-self-md-stretch {
    align-self: stretch;
  }
  .order-md-first {
    order: -1;
  }
  .order-md-0 {
    order: 0;
  }
  .order-md-1 {
    order: 1;
  }
  .order-md-2 {
    order: 2;
  }
  .order-md-3 {
    order: 3;
  }
  .order-md-4 {
    order: 4;
  }
  .order-md-5 {
    order: 5;
  }
  .order-md-last {
    order: 6;
  }
  .m-md-0 {
    margin: 0;
  }
  .m-md-1 {
    margin: 0.25rem;
  }
  .m-md-2 {
    margin: 0.5rem;
  }
  .m-md-3 {
    margin: 1rem;
  }
  .m-md-4 {
    margin: 1.5rem;
  }
  .m-md-5 {
    margin: 3rem;
  }
  .m-md-auto {
    margin: auto;
  }
  .mx-md-0 {
    margin-right: 0;
    margin-left: 0;
  }
  .mx-md-1 {
    margin-right: 0.25rem;
    margin-left: 0.25rem;
  }
  .mx-md-2 {
    margin-right: 0.5rem;
    margin-left: 0.5rem;
  }
  .mx-md-3 {
    margin-right: 1rem;
    margin-left: 1rem;
  }
  .mx-md-4 {
    margin-right: 1.5rem;
    margin-left: 1.5rem;
  }
  .mx-md-5 {
    margin-right: 3rem;
    margin-left: 3rem;
  }
  .mx-md-auto {
    margin-right: auto;
    margin-left: auto;
  }
  .my-md-0 {
    margin-top: 0;
    margin-bottom: 0;
  }
  .my-md-1 {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
  }
  .my-md-2 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }
  .my-md-3 {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  .my-md-4 {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }
  .my-md-5 {
    margin-top: 3rem;
    margin-bottom: 3rem;
  }
  .my-md-auto {
    margin-top: auto;
    margin-bottom: auto;
  }
  .mt-md-0 {
    margin-top: 0;
  }
  .mt-md-1 {
    margin-top: 0.25rem;
  }
  .mt-md-2 {
    margin-top: 0.5rem;
  }
  .mt-md-3 {
    margin-top: 1rem;
  }
  .mt-md-4 {
    margin-top: 1.5rem;
  }
  .mt-md-5 {
    margin-top: 3rem;
  }
  .mt-md-auto {
    margin-top: auto;
  }
  .me-md-0 {
    margin-right: 0;
  }
  .me-md-1 {
    margin-right: 0.25rem;
  }
  .me-md-2 {
    margin-right: 0.5rem;
  }
  .me-md-3 {
    margin-right: 1rem;
  }
  .me-md-4 {
    margin-right: 1.5rem;
  }
  .me-md-5 {
    margin-right: 3rem;
  }
  .me-md-auto {
    margin-right: auto;
  }
  .mb-md-0 {
    margin-bottom: 0;
  }
  .mb-md-1 {
    margin-bottom: 0.25rem;
  }
  .mb-md-2 {
    margin-bottom: 0.5rem;
  }
  .mb-md-3 {
    margin-bottom: 1rem;
  }
  .mb-md-4 {
    margin-bottom: 1.5rem;
  }
  .mb-md-5 {
    margin-bottom: 3rem;
  }
  .mb-md-auto {
    margin-bottom: auto;
  }
  .ms-md-0 {
    margin-left: 0;
  }
  .ms-md-1 {
    margin-left: 0.25rem;
  }
  .ms-md-2 {
    margin-left: 0.5rem;
  }
  .ms-md-3 {
    margin-left: 1rem;
  }
  .ms-md-4 {
    margin-left: 1.5rem;
  }
  .ms-md-5 {
    margin-left: 3rem;
  }
  .ms-md-auto {
    margin-left: auto;
  }
  .p-md-0 {
    padding: 0;
  }
  .p-md-1 {
    padding: 0.25rem;
  }
  .p-md-2 {
    padding: 0.5rem;
  }
  .p-md-3 {
    padding: 1rem;
  }
  .p-md-4 {
    padding: 1.5rem;
  }
  .p-md-5 {
    padding: 3rem;
  }
  .px-md-0 {
    padding-right: 0;
    padding-left: 0;
  }
  .px-md-1 {
    padding-right: 0.25rem;
    padding-left: 0.25rem;
  }
  .px-md-2 {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
  .px-md-3 {
    padding-right: 1rem;
    padding-left: 1rem;
  }
  .px-md-4 {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
  .px-md-5 {
    padding-right: 3rem;
    padding-left: 3rem;
  }
  .py-md-0 {
    padding-top: 0;
    padding-bottom: 0;
  }
  .py-md-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }
  .py-md-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .py-md-3 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .py-md-4 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
  .py-md-5 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  .pt-md-0 {
    padding-top: 0;
  }
  .pt-md-1 {
    padding-top: 0.25rem;
  }
  .pt-md-2 {
    padding-top: 0.5rem;
  }
  .pt-md-3 {
    padding-top: 1rem;
  }
  .pt-md-4 {
    padding-top: 1.5rem;
  }
  .pt-md-5 {
    padding-top: 3rem;
  }
  .pe-md-0 {
    padding-right: 0;
  }
  .pe-md-1 {
    padding-right: 0.25rem;
  }
  .pe-md-2 {
    padding-right: 0.5rem;
  }
  .pe-md-3 {
    padding-right: 1rem;
  }
  .pe-md-4 {
    padding-right: 1.5rem;
  }
  .pe-md-5 {
    padding-right: 3rem;
  }
  .pb-md-0 {
    padding-bottom: 0;
  }
  .pb-md-1 {
    padding-bottom: 0.25rem;
  }
  .pb-md-2 {
    padding-bottom: 0.5rem;
  }
  .pb-md-3 {
    padding-bottom: 1rem;
  }
  .pb-md-4 {
    padding-bottom: 1.5rem;
  }
  .pb-md-5 {
    padding-bottom: 3rem;
  }
  .ps-md-0 {
    padding-left: 0;
  }
  .ps-md-1 {
    padding-left: 0.25rem;
  }
  .ps-md-2 {
    padding-left: 0.5rem;
  }
  .ps-md-3 {
    padding-left: 1rem;
  }
  .ps-md-4 {
    padding-left: 1.5rem;
  }
  .ps-md-5 {
    padding-left: 3rem;
  }
  .gap-md-0 {
    gap: 0;
  }
  .gap-md-1 {
    gap: 0.25rem;
  }
  .gap-md-2 {
    gap: 0.5rem;
  }
  .gap-md-3 {
    gap: 1rem;
  }
  .gap-md-4 {
    gap: 1.5rem;
  }
  .gap-md-5 {
    gap: 3rem;
  }
  .row-gap-md-0 {
    row-gap: 0;
  }
  .row-gap-md-1 {
    row-gap: 0.25rem;
  }
  .row-gap-md-2 {
    row-gap: 0.5rem;
  }
  .row-gap-md-3 {
    row-gap: 1rem;
  }
  .row-gap-md-4 {
    row-gap: 1.5rem;
  }
  .row-gap-md-5 {
    row-gap: 3rem;
  }
  .column-gap-md-0 {
    column-gap: 0;
  }
  .column-gap-md-1 {
    column-gap: 0.25rem;
  }
  .column-gap-md-2 {
    column-gap: 0.5rem;
  }
  .column-gap-md-3 {
    column-gap: 1rem;
  }
  .column-gap-md-4 {
    column-gap: 1.5rem;
  }
  .column-gap-md-5 {
    column-gap: 3rem;
  }
  .text-md-start {
    text-align: left;
  }
  .text-md-end {
    text-align: right;
  }
  .text-md-center {
    text-align: center;
  }
}
@media (min-width: 992px) {
  .float-lg-start {
    float: left;
  }
  .float-lg-end {
    float: right;
  }
  .float-lg-none {
    float: none;
  }
  .object-fit-lg-contain {
    object-fit: contain;
  }
  .object-fit-lg-cover {
    object-fit: cover;
  }
  .object-fit-lg-fill {
    object-fit: fill;
  }
  .object-fit-lg-scale {
    object-fit: scale-down;
  }
  .object-fit-lg-none {
    object-fit: none;
  }
  .d-lg-inline {
    display: inline;
  }
  .d-lg-inline-block {
    display: inline-block;
  }
  .d-lg-block {
    display: block;
  }
  .d-lg-grid {
    display: grid;
  }
  .d-lg-inline-grid {
    display: inline-grid;
  }
  .d-lg-table {
    display: table;
  }
  .d-lg-table-row {
    display: table-row;
  }
  .d-lg-table-cell {
    display: table-cell;
  }
  .d-lg-flex {
    display: flex;
  }
  .d-lg-inline-flex {
    display: inline-flex;
  }
  .d-lg-none {
    display: none;
  }
  .flex-lg-fill {
    flex: 1 1 auto;
  }
  .flex-lg-row {
    flex-direction: row;
  }
  .flex-lg-column {
    flex-direction: column;
  }
  .flex-lg-row-reverse {
    flex-direction: row-reverse;
  }
  .flex-lg-column-reverse {
    flex-direction: column-reverse;
  }
  .flex-lg-grow-0 {
    flex-grow: 0;
  }
  .flex-lg-grow-1 {
    flex-grow: 1;
  }
  .flex-lg-shrink-0 {
    flex-shrink: 0;
  }
  .flex-lg-shrink-1 {
    flex-shrink: 1;
  }
  .flex-lg-wrap {
    flex-wrap: wrap;
  }
  .flex-lg-nowrap {
    flex-wrap: nowrap;
  }
  .flex-lg-wrap-reverse {
    flex-wrap: wrap-reverse;
  }
  .justify-content-lg-start {
    justify-content: flex-start;
  }
  .justify-content-lg-end {
    justify-content: flex-end;
  }
  .justify-content-lg-center {
    justify-content: center;
  }
  .justify-content-lg-between {
    justify-content: space-between;
  }
  .justify-content-lg-around {
    justify-content: space-around;
  }
  .justify-content-lg-evenly {
    justify-content: space-evenly;
  }
  .align-items-lg-start {
    align-items: flex-start;
  }
  .align-items-lg-end {
    align-items: flex-end;
  }
  .align-items-lg-center {
    align-items: center;
  }
  .align-items-lg-baseline {
    align-items: baseline;
  }
  .align-items-lg-stretch {
    align-items: stretch;
  }
  .align-content-lg-start {
    align-content: flex-start;
  }
  .align-content-lg-end {
    align-content: flex-end;
  }
  .align-content-lg-center {
    align-content: center;
  }
  .align-content-lg-between {
    align-content: space-between;
  }
  .align-content-lg-around {
    align-content: space-around;
  }
  .align-content-lg-stretch {
    align-content: stretch;
  }
  .align-self-lg-auto {
    align-self: auto;
  }
  .align-self-lg-start {
    align-self: flex-start;
  }
  .align-self-lg-end {
    align-self: flex-end;
  }
  .align-self-lg-center {
    align-self: center;
  }
  .align-self-lg-baseline {
    align-self: baseline;
  }
  .align-self-lg-stretch {
    align-self: stretch;
  }
  .order-lg-first {
    order: -1;
  }
  .order-lg-0 {
    order: 0;
  }
  .order-lg-1 {
    order: 1;
  }
  .order-lg-2 {
    order: 2;
  }
  .order-lg-3 {
    order: 3;
  }
  .order-lg-4 {
    order: 4;
  }
  .order-lg-5 {
    order: 5;
  }
  .order-lg-last {
    order: 6;
  }
  .m-lg-0 {
    margin: 0;
  }
  .m-lg-1 {
    margin: 0.25rem;
  }
  .m-lg-2 {
    margin: 0.5rem;
  }
  .m-lg-3 {
    margin: 1rem;
  }
  .m-lg-4 {
    margin: 1.5rem;
  }
  .m-lg-5 {
    margin: 3rem;
  }
  .m-lg-auto {
    margin: auto;
  }
  .mx-lg-0 {
    margin-right: 0;
    margin-left: 0;
  }
  .mx-lg-1 {
    margin-right: 0.25rem;
    margin-left: 0.25rem;
  }
  .mx-lg-2 {
    margin-right: 0.5rem;
    margin-left: 0.5rem;
  }
  .mx-lg-3 {
    margin-right: 1rem;
    margin-left: 1rem;
  }
  .mx-lg-4 {
    margin-right: 1.5rem;
    margin-left: 1.5rem;
  }
  .mx-lg-5 {
    margin-right: 3rem;
    margin-left: 3rem;
  }
  .mx-lg-auto {
    margin-right: auto;
    margin-left: auto;
  }
  .my-lg-0 {
    margin-top: 0;
    margin-bottom: 0;
  }
  .my-lg-1 {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
  }
  .my-lg-2 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }
  .my-lg-3 {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  .my-lg-4 {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }
  .my-lg-5 {
    margin-top: 3rem;
    margin-bottom: 3rem;
  }
  .my-lg-auto {
    margin-top: auto;
    margin-bottom: auto;
  }
  .mt-lg-0 {
    margin-top: 0;
  }
  .mt-lg-1 {
    margin-top: 0.25rem;
  }
  .mt-lg-2 {
    margin-top: 0.5rem;
  }
  .mt-lg-3 {
    margin-top: 1rem;
  }
  .mt-lg-4 {
    margin-top: 1.5rem;
  }
  .mt-lg-5 {
    margin-top: 3rem;
  }
  .mt-lg-auto {
    margin-top: auto;
  }
  .me-lg-0 {
    margin-right: 0;
  }
  .me-lg-1 {
    margin-right: 0.25rem;
  }
  .me-lg-2 {
    margin-right: 0.5rem;
  }
  .me-lg-3 {
    margin-right: 1rem;
  }
  .me-lg-4 {
    margin-right: 1.5rem;
  }
  .me-lg-5 {
    margin-right: 3rem;
  }
  .me-lg-auto {
    margin-right: auto;
  }
  .mb-lg-0 {
    margin-bottom: 0;
  }
  .mb-lg-1 {
    margin-bottom: 0.25rem;
  }
  .mb-lg-2 {
    margin-bottom: 0.5rem;
  }
  .mb-lg-3 {
    margin-bottom: 1rem;
  }
  .mb-lg-4 {
    margin-bottom: 1.5rem;
  }
  .mb-lg-5 {
    margin-bottom: 3rem;
  }
  .mb-lg-auto {
    margin-bottom: auto;
  }
  .ms-lg-0 {
    margin-left: 0;
  }
  .ms-lg-1 {
    margin-left: 0.25rem;
  }
  .ms-lg-2 {
    margin-left: 0.5rem;
  }
  .ms-lg-3 {
    margin-left: 1rem;
  }
  .ms-lg-4 {
    margin-left: 1.5rem;
  }
  .ms-lg-5 {
    margin-left: 3rem;
  }
  .ms-lg-auto {
    margin-left: auto;
  }
  .p-lg-0 {
    padding: 0;
  }
  .p-lg-1 {
    padding: 0.25rem;
  }
  .p-lg-2 {
    padding: 0.5rem;
  }
  .p-lg-3 {
    padding: 1rem;
  }
  .p-lg-4 {
    padding: 1.5rem;
  }
  .p-lg-5 {
    padding: 3rem;
  }
  .px-lg-0 {
    padding-right: 0;
    padding-left: 0;
  }
  .px-lg-1 {
    padding-right: 0.25rem;
    padding-left: 0.25rem;
  }
  .px-lg-2 {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
  .px-lg-3 {
    padding-right: 1rem;
    padding-left: 1rem;
  }
  .px-lg-4 {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
  .px-lg-5 {
    padding-right: 3rem;
    padding-left: 3rem;
  }
  .py-lg-0 {
    padding-top: 0;
    padding-bottom: 0;
  }
  .py-lg-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }
  .py-lg-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .py-lg-3 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .py-lg-4 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
  .py-lg-5 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  .pt-lg-0 {
    padding-top: 0;
  }
  .pt-lg-1 {
    padding-top: 0.25rem;
  }
  .pt-lg-2 {
    padding-top: 0.5rem;
  }
  .pt-lg-3 {
    padding-top: 1rem;
  }
  .pt-lg-4 {
    padding-top: 1.5rem;
  }
  .pt-lg-5 {
    padding-top: 3rem;
  }
  .pe-lg-0 {
    padding-right: 0;
  }
  .pe-lg-1 {
    padding-right: 0.25rem;
  }
  .pe-lg-2 {
    padding-right: 0.5rem;
  }
  .pe-lg-3 {
    padding-right: 1rem;
  }
  .pe-lg-4 {
    padding-right: 1.5rem;
  }
  .pe-lg-5 {
    padding-right: 3rem;
  }
  .pb-lg-0 {
    padding-bottom: 0;
  }
  .pb-lg-1 {
    padding-bottom: 0.25rem;
  }
  .pb-lg-2 {
    padding-bottom: 0.5rem;
  }
  .pb-lg-3 {
    padding-bottom: 1rem;
  }
  .pb-lg-4 {
    padding-bottom: 1.5rem;
  }
  .pb-lg-5 {
    padding-bottom: 3rem;
  }
  .ps-lg-0 {
    padding-left: 0;
  }
  .ps-lg-1 {
    padding-left: 0.25rem;
  }
  .ps-lg-2 {
    padding-left: 0.5rem;
  }
  .ps-lg-3 {
    padding-left: 1rem;
  }
  .ps-lg-4 {
    padding-left: 1.5rem;
  }
  .ps-lg-5 {
    padding-left: 3rem;
  }
  .gap-lg-0 {
    gap: 0;
  }
  .gap-lg-1 {
    gap: 0.25rem;
  }
  .gap-lg-2 {
    gap: 0.5rem;
  }
  .gap-lg-3 {
    gap: 1rem;
  }
  .gap-lg-4 {
    gap: 1.5rem;
  }
  .gap-lg-5 {
    gap: 3rem;
  }
  .row-gap-lg-0 {
    row-gap: 0;
  }
  .row-gap-lg-1 {
    row-gap: 0.25rem;
  }
  .row-gap-lg-2 {
    row-gap: 0.5rem;
  }
  .row-gap-lg-3 {
    row-gap: 1rem;
  }
  .row-gap-lg-4 {
    row-gap: 1.5rem;
  }
  .row-gap-lg-5 {
    row-gap: 3rem;
  }
  .column-gap-lg-0 {
    column-gap: 0;
  }
  .column-gap-lg-1 {
    column-gap: 0.25rem;
  }
  .column-gap-lg-2 {
    column-gap: 0.5rem;
  }
  .column-gap-lg-3 {
    column-gap: 1rem;
  }
  .column-gap-lg-4 {
    column-gap: 1.5rem;
  }
  .column-gap-lg-5 {
    column-gap: 3rem;
  }
  .text-lg-start {
    text-align: left;
  }
  .text-lg-end {
    text-align: right;
  }
  .text-lg-center {
    text-align: center;
  }
}
@media (min-width: 1200px) {
  .float-xl-start {
    float: left;
  }
  .float-xl-end {
    float: right;
  }
  .float-xl-none {
    float: none;
  }
  .object-fit-xl-contain {
    object-fit: contain;
  }
  .object-fit-xl-cover {
    object-fit: cover;
  }
  .object-fit-xl-fill {
    object-fit: fill;
  }
  .object-fit-xl-scale {
    object-fit: scale-down;
  }
  .object-fit-xl-none {
    object-fit: none;
  }
  .d-xl-inline {
    display: inline;
  }
  .d-xl-inline-block {
    display: inline-block;
  }
  .d-xl-block {
    display: block;
  }
  .d-xl-grid {
    display: grid;
  }
  .d-xl-inline-grid {
    display: inline-grid;
  }
  .d-xl-table {
    display: table;
  }
  .d-xl-table-row {
    display: table-row;
  }
  .d-xl-table-cell {
    display: table-cell;
  }
  .d-xl-flex {
    display: flex;
  }
  .d-xl-inline-flex {
    display: inline-flex;
  }
  .d-xl-none {
    display: none;
  }
  .flex-xl-fill {
    flex: 1 1 auto;
  }
  .flex-xl-row {
    flex-direction: row;
  }
  .flex-xl-column {
    flex-direction: column;
  }
  .flex-xl-row-reverse {
    flex-direction: row-reverse;
  }
  .flex-xl-column-reverse {
    flex-direction: column-reverse;
  }
  .flex-xl-grow-0 {
    flex-grow: 0;
  }
  .flex-xl-grow-1 {
    flex-grow: 1;
  }
  .flex-xl-shrink-0 {
    flex-shrink: 0;
  }
  .flex-xl-shrink-1 {
    flex-shrink: 1;
  }
  .flex-xl-wrap {
    flex-wrap: wrap;
  }
  .flex-xl-nowrap {
    flex-wrap: nowrap;
  }
  .flex-xl-wrap-reverse {
    flex-wrap: wrap-reverse;
  }
  .justify-content-xl-start {
    justify-content: flex-start;
  }
  .justify-content-xl-end {
    justify-content: flex-end;
  }
  .justify-content-xl-center {
    justify-content: center;
  }
  .justify-content-xl-between {
    justify-content: space-between;
  }
  .justify-content-xl-around {
    justify-content: space-around;
  }
  .justify-content-xl-evenly {
    justify-content: space-evenly;
  }
  .align-items-xl-start {
    align-items: flex-start;
  }
  .align-items-xl-end {
    align-items: flex-end;
  }
  .align-items-xl-center {
    align-items: center;
  }
  .align-items-xl-baseline {
    align-items: baseline;
  }
  .align-items-xl-stretch {
    align-items: stretch;
  }
  .align-content-xl-start {
    align-content: flex-start;
  }
  .align-content-xl-end {
    align-content: flex-end;
  }
  .align-content-xl-center {
    align-content: center;
  }
  .align-content-xl-between {
    align-content: space-between;
  }
  .align-content-xl-around {
    align-content: space-around;
  }
  .align-content-xl-stretch {
    align-content: stretch;
  }
  .align-self-xl-auto {
    align-self: auto;
  }
  .align-self-xl-start {
    align-self: flex-start;
  }
  .align-self-xl-end {
    align-self: flex-end;
  }
  .align-self-xl-center {
    align-self: center;
  }
  .align-self-xl-baseline {
    align-self: baseline;
  }
  .align-self-xl-stretch {
    align-self: stretch;
  }
  .order-xl-first {
    order: -1;
  }
  .order-xl-0 {
    order: 0;
  }
  .order-xl-1 {
    order: 1;
  }
  .order-xl-2 {
    order: 2;
  }
  .order-xl-3 {
    order: 3;
  }
  .order-xl-4 {
    order: 4;
  }
  .order-xl-5 {
    order: 5;
  }
  .order-xl-last {
    order: 6;
  }
  .m-xl-0 {
    margin: 0;
  }
  .m-xl-1 {
    margin: 0.25rem;
  }
  .m-xl-2 {
    margin: 0.5rem;
  }
  .m-xl-3 {
    margin: 1rem;
  }
  .m-xl-4 {
    margin: 1.5rem;
  }
  .m-xl-5 {
    margin: 3rem;
  }
  .m-xl-auto {
    margin: auto;
  }
  .mx-xl-0 {
    margin-right: 0;
    margin-left: 0;
  }
  .mx-xl-1 {
    margin-right: 0.25rem;
    margin-left: 0.25rem;
  }
  .mx-xl-2 {
    margin-right: 0.5rem;
    margin-left: 0.5rem;
  }
  .mx-xl-3 {
    margin-right: 1rem;
    margin-left: 1rem;
  }
  .mx-xl-4 {
    margin-right: 1.5rem;
    margin-left: 1.5rem;
  }
  .mx-xl-5 {
    margin-right: 3rem;
    margin-left: 3rem;
  }
  .mx-xl-auto {
    margin-right: auto;
    margin-left: auto;
  }
  .my-xl-0 {
    margin-top: 0;
    margin-bottom: 0;
  }
  .my-xl-1 {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
  }
  .my-xl-2 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }
  .my-xl-3 {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  .my-xl-4 {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }
  .my-xl-5 {
    margin-top: 3rem;
    margin-bottom: 3rem;
  }
  .my-xl-auto {
    margin-top: auto;
    margin-bottom: auto;
  }
  .mt-xl-0 {
    margin-top: 0;
  }
  .mt-xl-1 {
    margin-top: 0.25rem;
  }
  .mt-xl-2 {
    margin-top: 0.5rem;
  }
  .mt-xl-3 {
    margin-top: 1rem;
  }
  .mt-xl-4 {
    margin-top: 1.5rem;
  }
  .mt-xl-5 {
    margin-top: 3rem;
  }
  .mt-xl-auto {
    margin-top: auto;
  }
  .me-xl-0 {
    margin-right: 0;
  }
  .me-xl-1 {
    margin-right: 0.25rem;
  }
  .me-xl-2 {
    margin-right: 0.5rem;
  }
  .me-xl-3 {
    margin-right: 1rem;
  }
  .me-xl-4 {
    margin-right: 1.5rem;
  }
  .me-xl-5 {
    margin-right: 3rem;
  }
  .me-xl-auto {
    margin-right: auto;
  }
  .mb-xl-0 {
    margin-bottom: 0;
  }
  .mb-xl-1 {
    margin-bottom: 0.25rem;
  }
  .mb-xl-2 {
    margin-bottom: 0.5rem;
  }
  .mb-xl-3 {
    margin-bottom: 1rem;
  }
  .mb-xl-4 {
    margin-bottom: 1.5rem;
  }
  .mb-xl-5 {
    margin-bottom: 3rem;
  }
  .mb-xl-auto {
    margin-bottom: auto;
  }
  .ms-xl-0 {
    margin-left: 0;
  }
  .ms-xl-1 {
    margin-left: 0.25rem;
  }
  .ms-xl-2 {
    margin-left: 0.5rem;
  }
  .ms-xl-3 {
    margin-left: 1rem;
  }
  .ms-xl-4 {
    margin-left: 1.5rem;
  }
  .ms-xl-5 {
    margin-left: 3rem;
  }
  .ms-xl-auto {
    margin-left: auto;
  }
  .p-xl-0 {
    padding: 0;
  }
  .p-xl-1 {
    padding: 0.25rem;
  }
  .p-xl-2 {
    padding: 0.5rem;
  }
  .p-xl-3 {
    padding: 1rem;
  }
  .p-xl-4 {
    padding: 1.5rem;
  }
  .p-xl-5 {
    padding: 3rem;
  }
  .px-xl-0 {
    padding-right: 0;
    padding-left: 0;
  }
  .px-xl-1 {
    padding-right: 0.25rem;
    padding-left: 0.25rem;
  }
  .px-xl-2 {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
  .px-xl-3 {
    padding-right: 1rem;
    padding-left: 1rem;
  }
  .px-xl-4 {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
  .px-xl-5 {
    padding-right: 3rem;
    padding-left: 3rem;
  }
  .py-xl-0 {
    padding-top: 0;
    padding-bottom: 0;
  }
  .py-xl-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }
  .py-xl-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .py-xl-3 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .py-xl-4 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
  .py-xl-5 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  .pt-xl-0 {
    padding-top: 0;
  }
  .pt-xl-1 {
    padding-top: 0.25rem;
  }
  .pt-xl-2 {
    padding-top: 0.5rem;
  }
  .pt-xl-3 {
    padding-top: 1rem;
  }
  .pt-xl-4 {
    padding-top: 1.5rem;
  }
  .pt-xl-5 {
    padding-top: 3rem;
  }
  .pe-xl-0 {
    padding-right: 0;
  }
  .pe-xl-1 {
    padding-right: 0.25rem;
  }
  .pe-xl-2 {
    padding-right: 0.5rem;
  }
  .pe-xl-3 {
    padding-right: 1rem;
  }
  .pe-xl-4 {
    padding-right: 1.5rem;
  }
  .pe-xl-5 {
    padding-right: 3rem;
  }
  .pb-xl-0 {
    padding-bottom: 0;
  }
  .pb-xl-1 {
    padding-bottom: 0.25rem;
  }
  .pb-xl-2 {
    padding-bottom: 0.5rem;
  }
  .pb-xl-3 {
    padding-bottom: 1rem;
  }
  .pb-xl-4 {
    padding-bottom: 1.5rem;
  }
  .pb-xl-5 {
    padding-bottom: 3rem;
  }
  .ps-xl-0 {
    padding-left: 0;
  }
  .ps-xl-1 {
    padding-left: 0.25rem;
  }
  .ps-xl-2 {
    padding-left: 0.5rem;
  }
  .ps-xl-3 {
    padding-left: 1rem;
  }
  .ps-xl-4 {
    padding-left: 1.5rem;
  }
  .ps-xl-5 {
    padding-left: 3rem;
  }
  .gap-xl-0 {
    gap: 0;
  }
  .gap-xl-1 {
    gap: 0.25rem;
  }
  .gap-xl-2 {
    gap: 0.5rem;
  }
  .gap-xl-3 {
    gap: 1rem;
  }
  .gap-xl-4 {
    gap: 1.5rem;
  }
  .gap-xl-5 {
    gap: 3rem;
  }
  .row-gap-xl-0 {
    row-gap: 0;
  }
  .row-gap-xl-1 {
    row-gap: 0.25rem;
  }
  .row-gap-xl-2 {
    row-gap: 0.5rem;
  }
  .row-gap-xl-3 {
    row-gap: 1rem;
  }
  .row-gap-xl-4 {
    row-gap: 1.5rem;
  }
  .row-gap-xl-5 {
    row-gap: 3rem;
  }
  .column-gap-xl-0 {
    column-gap: 0;
  }
  .column-gap-xl-1 {
    column-gap: 0.25rem;
  }
  .column-gap-xl-2 {
    column-gap: 0.5rem;
  }
  .column-gap-xl-3 {
    column-gap: 1rem;
  }
  .column-gap-xl-4 {
    column-gap: 1.5rem;
  }
  .column-gap-xl-5 {
    column-gap: 3rem;
  }
  .text-xl-start {
    text-align: left;
  }
  .text-xl-end {
    text-align: right;
  }
  .text-xl-center {
    text-align: center;
  }
}
@media (min-width: 1400px) {
  .float-xxl-start {
    float: left;
  }
  .float-xxl-end {
    float: right;
  }
  .float-xxl-none {
    float: none;
  }
  .object-fit-xxl-contain {
    object-fit: contain;
  }
  .object-fit-xxl-cover {
    object-fit: cover;
  }
  .object-fit-xxl-fill {
    object-fit: fill;
  }
  .object-fit-xxl-scale {
    object-fit: scale-down;
  }
  .object-fit-xxl-none {
    object-fit: none;
  }
  .d-xxl-inline {
    display: inline;
  }
  .d-xxl-inline-block {
    display: inline-block;
  }
  .d-xxl-block {
    display: block;
  }
  .d-xxl-grid {
    display: grid;
  }
  .d-xxl-inline-grid {
    display: inline-grid;
  }
  .d-xxl-table {
    display: table;
  }
  .d-xxl-table-row {
    display: table-row;
  }
  .d-xxl-table-cell {
    display: table-cell;
  }
  .d-xxl-flex {
    display: flex;
  }
  .d-xxl-inline-flex {
    display: inline-flex;
  }
  .d-xxl-none {
    display: none;
  }
  .flex-xxl-fill {
    flex: 1 1 auto;
  }
  .flex-xxl-row {
    flex-direction: row;
  }
  .flex-xxl-column {
    flex-direction: column;
  }
  .flex-xxl-row-reverse {
    flex-direction: row-reverse;
  }
  .flex-xxl-column-reverse {
    flex-direction: column-reverse;
  }
  .flex-xxl-grow-0 {
    flex-grow: 0;
  }
  .flex-xxl-grow-1 {
    flex-grow: 1;
  }
  .flex-xxl-shrink-0 {
    flex-shrink: 0;
  }
  .flex-xxl-shrink-1 {
    flex-shrink: 1;
  }
  .flex-xxl-wrap {
    flex-wrap: wrap;
  }
  .flex-xxl-nowrap {
    flex-wrap: nowrap;
  }
  .flex-xxl-wrap-reverse {
    flex-wrap: wrap-reverse;
  }
  .justify-content-xxl-start {
    justify-content: flex-start;
  }
  .justify-content-xxl-end {
    justify-content: flex-end;
  }
  .justify-content-xxl-center {
    justify-content: center;
  }
  .justify-content-xxl-between {
    justify-content: space-between;
  }
  .justify-content-xxl-around {
    justify-content: space-around;
  }
  .justify-content-xxl-evenly {
    justify-content: space-evenly;
  }
  .align-items-xxl-start {
    align-items: flex-start;
  }
  .align-items-xxl-end {
    align-items: flex-end;
  }
  .align-items-xxl-center {
    align-items: center;
  }
  .align-items-xxl-baseline {
    align-items: baseline;
  }
  .align-items-xxl-stretch {
    align-items: stretch;
  }
  .align-content-xxl-start {
    align-content: flex-start;
  }
  .align-content-xxl-end {
    align-content: flex-end;
  }
  .align-content-xxl-center {
    align-content: center;
  }
  .align-content-xxl-between {
    align-content: space-between;
  }
  .align-content-xxl-around {
    align-content: space-around;
  }
  .align-content-xxl-stretch {
    align-content: stretch;
  }
  .align-self-xxl-auto {
    align-self: auto;
  }
  .align-self-xxl-start {
    align-self: flex-start;
  }
  .align-self-xxl-end {
    align-self: flex-end;
  }
  .align-self-xxl-center {
    align-self: center;
  }
  .align-self-xxl-baseline {
    align-self: baseline;
  }
  .align-self-xxl-stretch {
    align-self: stretch;
  }
  .order-xxl-first {
    order: -1;
  }
  .order-xxl-0 {
    order: 0;
  }
  .order-xxl-1 {
    order: 1;
  }
  .order-xxl-2 {
    order: 2;
  }
  .order-xxl-3 {
    order: 3;
  }
  .order-xxl-4 {
    order: 4;
  }
  .order-xxl-5 {
    order: 5;
  }
  .order-xxl-last {
    order: 6;
  }
  .m-xxl-0 {
    margin: 0;
  }
  .m-xxl-1 {
    margin: 0.25rem;
  }
  .m-xxl-2 {
    margin: 0.5rem;
  }
  .m-xxl-3 {
    margin: 1rem;
  }
  .m-xxl-4 {
    margin: 1.5rem;
  }
  .m-xxl-5 {
    margin: 3rem;
  }
  .m-xxl-auto {
    margin: auto;
  }
  .mx-xxl-0 {
    margin-right: 0;
    margin-left: 0;
  }
  .mx-xxl-1 {
    margin-right: 0.25rem;
    margin-left: 0.25rem;
  }
  .mx-xxl-2 {
    margin-right: 0.5rem;
    margin-left: 0.5rem;
  }
  .mx-xxl-3 {
    margin-right: 1rem;
    margin-left: 1rem;
  }
  .mx-xxl-4 {
    margin-right: 1.5rem;
    margin-left: 1.5rem;
  }
  .mx-xxl-5 {
    margin-right: 3rem;
    margin-left: 3rem;
  }
  .mx-xxl-auto {
    margin-right: auto;
    margin-left: auto;
  }
  .my-xxl-0 {
    margin-top: 0;
    margin-bottom: 0;
  }
  .my-xxl-1 {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
  }
  .my-xxl-2 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }
  .my-xxl-3 {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  .my-xxl-4 {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }
  .my-xxl-5 {
    margin-top: 3rem;
    margin-bottom: 3rem;
  }
  .my-xxl-auto {
    margin-top: auto;
    margin-bottom: auto;
  }
  .mt-xxl-0 {
    margin-top: 0;
  }
  .mt-xxl-1 {
    margin-top: 0.25rem;
  }
  .mt-xxl-2 {
    margin-top: 0.5rem;
  }
  .mt-xxl-3 {
    margin-top: 1rem;
  }
  .mt-xxl-4 {
    margin-top: 1.5rem;
  }
  .mt-xxl-5 {
    margin-top: 3rem;
  }
  .mt-xxl-auto {
    margin-top: auto;
  }
  .me-xxl-0 {
    margin-right: 0;
  }
  .me-xxl-1 {
    margin-right: 0.25rem;
  }
  .me-xxl-2 {
    margin-right: 0.5rem;
  }
  .me-xxl-3 {
    margin-right: 1rem;
  }
  .me-xxl-4 {
    margin-right: 1.5rem;
  }
  .me-xxl-5 {
    margin-right: 3rem;
  }
  .me-xxl-auto {
    margin-right: auto;
  }
  .mb-xxl-0 {
    margin-bottom: 0;
  }
  .mb-xxl-1 {
    margin-bottom: 0.25rem;
  }
  .mb-xxl-2 {
    margin-bottom: 0.5rem;
  }
  .mb-xxl-3 {
    margin-bottom: 1rem;
  }
  .mb-xxl-4 {
    margin-bottom: 1.5rem;
  }
  .mb-xxl-5 {
    margin-bottom: 3rem;
  }
  .mb-xxl-auto {
    margin-bottom: auto;
  }
  .ms-xxl-0 {
    margin-left: 0;
  }
  .ms-xxl-1 {
    margin-left: 0.25rem;
  }
  .ms-xxl-2 {
    margin-left: 0.5rem;
  }
  .ms-xxl-3 {
    margin-left: 1rem;
  }
  .ms-xxl-4 {
    margin-left: 1.5rem;
  }
  .ms-xxl-5 {
    margin-left: 3rem;
  }
  .ms-xxl-auto {
    margin-left: auto;
  }
  .p-xxl-0 {
    padding: 0;
  }
  .p-xxl-1 {
    padding: 0.25rem;
  }
  .p-xxl-2 {
    padding: 0.5rem;
  }
  .p-xxl-3 {
    padding: 1rem;
  }
  .p-xxl-4 {
    padding: 1.5rem;
  }
  .p-xxl-5 {
    padding: 3rem;
  }
  .px-xxl-0 {
    padding-right: 0;
    padding-left: 0;
  }
  .px-xxl-1 {
    padding-right: 0.25rem;
    padding-left: 0.25rem;
  }
  .px-xxl-2 {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
  .px-xxl-3 {
    padding-right: 1rem;
    padding-left: 1rem;
  }
  .px-xxl-4 {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
  .px-xxl-5 {
    padding-right: 3rem;
    padding-left: 3rem;
  }
  .py-xxl-0 {
    padding-top: 0;
    padding-bottom: 0;
  }
  .py-xxl-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }
  .py-xxl-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .py-xxl-3 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .py-xxl-4 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
  .py-xxl-5 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  .pt-xxl-0 {
    padding-top: 0;
  }
  .pt-xxl-1 {
    padding-top: 0.25rem;
  }
  .pt-xxl-2 {
    padding-top: 0.5rem;
  }
  .pt-xxl-3 {
    padding-top: 1rem;
  }
  .pt-xxl-4 {
    padding-top: 1.5rem;
  }
  .pt-xxl-5 {
    padding-top: 3rem;
  }
  .pe-xxl-0 {
    padding-right: 0;
  }
  .pe-xxl-1 {
    padding-right: 0.25rem;
  }
  .pe-xxl-2 {
    padding-right: 0.5rem;
  }
  .pe-xxl-3 {
    padding-right: 1rem;
  }
  .pe-xxl-4 {
    padding-right: 1.5rem;
  }
  .pe-xxl-5 {
    padding-right: 3rem;
  }
  .pb-xxl-0 {
    padding-bottom: 0;
  }
  .pb-xxl-1 {
    padding-bottom: 0.25rem;
  }
  .pb-xxl-2 {
    padding-bottom: 0.5rem;
  }
  .pb-xxl-3 {
    padding-bottom: 1rem;
  }
  .pb-xxl-4 {
    padding-bottom: 1.5rem;
  }
  .pb-xxl-5 {
    padding-bottom: 3rem;
  }
  .ps-xxl-0 {
    padding-left: 0;
  }
  .ps-xxl-1 {
    padding-left: 0.25rem;
  }
  .ps-xxl-2 {
    padding-left: 0.5rem;
  }
  .ps-xxl-3 {
    padding-left: 1rem;
  }
  .ps-xxl-4 {
    padding-left: 1.5rem;
  }
  .ps-xxl-5 {
    padding-left: 3rem;
  }
  .gap-xxl-0 {
    gap: 0;
  }
  .gap-xxl-1 {
    gap: 0.25rem;
  }
  .gap-xxl-2 {
    gap: 0.5rem;
  }
  .gap-xxl-3 {
    gap: 1rem;
  }
  .gap-xxl-4 {
    gap: 1.5rem;
  }
  .gap-xxl-5 {
    gap: 3rem;
  }
  .row-gap-xxl-0 {
    row-gap: 0;
  }
  .row-gap-xxl-1 {
    row-gap: 0.25rem;
  }
  .row-gap-xxl-2 {
    row-gap: 0.5rem;
  }
  .row-gap-xxl-3 {
    row-gap: 1rem;
  }
  .row-gap-xxl-4 {
    row-gap: 1.5rem;
  }
  .row-gap-xxl-5 {
    row-gap: 3rem;
  }
  .column-gap-xxl-0 {
    column-gap: 0;
  }
  .column-gap-xxl-1 {
    column-gap: 0.25rem;
  }
  .column-gap-xxl-2 {
    column-gap: 0.5rem;
  }
  .column-gap-xxl-3 {
    column-gap: 1rem;
  }
  .column-gap-xxl-4 {
    column-gap: 1.5rem;
  }
  .column-gap-xxl-5 {
    column-gap: 3rem;
  }
  .text-xxl-start {
    text-align: left;
  }
  .text-xxl-end {
    text-align: right;
  }
  .text-xxl-center {
    text-align: center;
  }
}
@media (min-width: 1200px) {
  .fs-1 {
    font-size: 2.5rem;
  }
  .fs-2 {
    font-size: 2rem;
  }
  .fs-3 {
    font-size: 1.75rem;
  }
  .fs-4 {
    font-size: 1.5rem;
  }
}
@media print {
  .d-print-inline {
    display: inline;
  }
  .d-print-inline-block {
    display: inline-block;
  }
  .d-print-block {
    display: block;
  }
  .d-print-grid {
    display: grid;
  }
  .d-print-inline-grid {
    display: inline-grid;
  }
  .d-print-table {
    display: table;
  }
  .d-print-table-row {
    display: table-row;
  }
  .d-print-table-cell {
    display: table-cell;
  }
  .d-print-flex {
    display: flex;
  }
  .d-print-inline-flex {
    display: inline-flex;
  }
  .d-print-none {
    display: none;
  }
}