/* Mareana EBR product page - page-specific styles only.
   Navbar / mobile menu / footer rules removed: the theme's global header and footer supply those. */

/* ─────────── TOKENS ─────────── */
:root {
  /* Brand */
  --mareana-primary:    #4361EE;
  --mareana-primary-2:  #5A1AEE;
  --mareana-secondary:  #8EA0F5;
  --mareana-cyan:       #4CC9F0;

  /* Accent */
  --accent-success: #42EAD4;
  --accent-danger:  #F94E9B;

  /* Neutral */
  --surface-white: #FFFFFF;
  --surface-light: #F8F8F8;
  --surface-hover: #F5F6FF;
  --ink:           #1A181B;
  --black:         #000000;

  --foreground-primary:   #1A181B;
  --foreground-secondary: #505050;
  --foreground-white:     #FFFFFF;
  --foreground-muted:     #D9D9D9;
  --foreground-faint:     #A4A4A4;

  --mareana-border: #E7E7E7;
  --border-dark:    #2E2C2F;
  --hairline:       #ACACAC;
  --border-bento:   #313131;
  --bar-inactive:   #EBEBEB;
  --foreground-dim: #777777;

  /* Alpha overlays */
  --glass-bg-default:      rgba(255,255,255,0.08);
  --glass-bg-scrolled:     rgba(10,10,10,0.7);
  --glass-border:          rgba(255,255,255,0.05);
  --glass-border-scrolled: rgba(255,255,255,0.15);
  --on-dark-90: rgba(255,255,255,0.85);
  --on-dark-70: rgba(255,255,255,0.70);
  --on-dark-50: rgba(255,255,255,0.50);
  --on-dark-15: rgba(255,255,255,0.15);
  --on-light-08: rgba(0,0,0,0.08);

  /* Gradients */
  --bg-gradient:     linear-gradient(225deg, #4361EE 0%, #8EA0F5 100%);
  --bg-gradient-259: linear-gradient(259deg, #4361EE 0%, #8EA0F5 100%);
  --bg-gradient-180: linear-gradient(180deg, #4361EE 0%, #8EA0F5 100%);
  --text-gradient:      linear-gradient(90deg, #8EA0F5 0%, #4361EE 100%);
  --text-gradient-blue: linear-gradient(90deg, #6B85FF 0%, #D5DCFF 100%);
  --text-gradient-pink: linear-gradient(90deg, #F94E9B 0%, #932E5C 100%);
  --surface-elevated-dark: linear-gradient(180deg, #282828 0%, #0C0C0C 100%);
  --surface-bubble-dark:   linear-gradient(180deg, #242424 0%, #151515 100%);
  --border-gradient-top:  linear-gradient(180deg, rgba(255,255,255,0.30) 0%, transparent 100%);
  --border-gradient-hard: linear-gradient(180deg, #FFFFFF 0%, transparent 100%);
  --divider-fade: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%);
  --surface-pill-dark: linear-gradient(90deg, #1A181B 0%, #404040 100%);
  --glow-soft-grey:    linear-gradient(180deg, #888888 0%, #AAAAAA 100%);
  --surface-column-light: linear-gradient(180deg, #FFFFFF 0%, #EFEFEF 100%);
  --surface-badge-dark:   linear-gradient(90deg, #555555 0%, #2B2B2B 100%);
  --accordion-open-toggle: linear-gradient(180deg, #1A181B 0%, #5F5F5F 100%);

  /* Type scale */
  --fs-hero:       clamp(36px, 5vw, 52px);
  --fs-section:    clamp(32px, 4vw, 48px);
  --fs-section-sm: clamp(30px, 4vw, 44px);
  --fs-cta:        clamp(22px, 2.8vw, 38px);
  --fs-32: 32px; --fs-28: 28px; --fs-24: 24px; --fs-22: 22px; --fs-20: 20px; --fs-18: 18px;
  --fs-16: 16px; --fs-15: 15px; --fs-14: 14px; --fs-13: 13px; --fs-12: 12px;
  --fs-11: 11px; --fs-10: 10px;

  /* Spacing */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-7: 28px; --sp-8: 32px; --sp-9: 36px; --sp-10: 40px; --sp-12: 48px;
  --sp-14: 56px; --sp-16: 64px; --sp-20: 80px; --sp-25: 100px;

  /* Radius */
  --radius-xs: 4px;   --radius-sm: 6px;   --radius-md: 8px;
  --radius-lg: 12px;  --radius-xl: 14px;  --radius-2xl: 16px;
  --radius-3xl: 18px; --radius-4xl: 20px; --radius-5xl: 24px;
  --radius-pill: 100px; --radius-circle: 50%;

  /* Shadow */
  --shadow-badge:  0 8px 8px 0 rgba(0,0,0,0.02), 0 3px 3px 0 rgba(0,0,0,0.05), 0 1px 1px 0 rgba(0,0,0,0.15);
  --shadow-card:   0 21px 21px 0 rgba(0,0,0,0.10), 0 5px 12px 0 rgba(0,0,0,0.14);
  --shadow-subtle: 0 4px 4px 0 rgba(0,0,0,0.02);
  --shadow-nav-scrolled: 0 10px 40px rgba(0,0,0,0.5);
  --glow-primary: 0 0 24px rgba(67,97,238,0.45);

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 0.15s; --dur-base: 0.2s; --dur-mid: 0.3s; --dur-slow: 0.4s;
}

/* ─────────── BASE ─────────── */
html { scroll-behavior: smooth; }
body {
  font-family: "Poppins", "Barlow", -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--foreground-primary);
}

/* ─────────── LAYOUT ─────────── */
.ebr-container {
  width: 100%;
  max-width: clamp(1400px, max(1400px, calc(1120px + (100vw - 768px) * 0.2152777778)), 1368px);
  margin-inline: auto;
  padding-left: 80px;
  padding-right: 80px;
}
.mn-section { padding: var(--sp-25) 0; }
.mn-section--light { background: var(--surface-white); }
.mn-section--muted { background: var(--surface-light); }
.mn-section--dark  { background: var(--black); color: var(--foreground-white); }

/* ─────────── TYPOGRAPHY UTILITIES ─────────── */
.mn-title {
  font-size: var(--fs-section); font-weight: 500; line-height: 1.3;
  letter-spacing: -1.92px; color: var(--foreground-primary); margin-bottom: var(--sp-4);
}
.mn-title--dark { color: var(--foreground-white); }
.mn-subtitle {
  font-size: var(--fs-16); font-weight: 400; line-height: 2.3;
  color: var(--foreground-secondary); margin-bottom: 0;
}
.mn-subtitle--dark { color: var(--foreground-muted); }

.text-gradient,
.text-gradient-blue,
.text-gradient-pink {
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.text-gradient      { background: var(--text-gradient); }
.text-gradient-blue { background: var(--text-gradient-blue); }
.text-gradient-pink { background: var(--text-gradient-pink); }
.text-accent-pink   { color: var(--accent-danger); }

/* ─────────── BUTTONS ─────────── */
.btn-pill {
  border: none; border-radius: var(--radius-pill);
  padding: 6px 6px 6px var(--sp-5);
  font-size: var(--fs-16); cursor: pointer; text-decoration: none;
  position: relative; overflow: hidden; gap: var(--sp-4);
  display: inline-flex; align-items: center;
}
.btn-text-inner {
  position: relative; height: 1.2em; overflow: hidden;
  display: flex; flex-direction: column; line-height: 1.2;
}
.btn-text-main, .btn-text-hover {
  display: block; height: 100%;
  transition: transform var(--dur-slow) var(--ease);
}
.btn-pill:hover .btn-text-main,
.btn-pill:hover .btn-text-hover { transform: translateY(-100%); }
.btn-pill .arrow-circle {
  width: 44px; height: 44px; border-radius: var(--radius-circle);
  transition: all var(--dur-mid); position: relative;
  display: flex; align-items: center; justify-content: center;
}
.arrow-inner-wrapper {
  display: flex; gap: var(--sp-6); transform: translateX(-22px);
  transition: transform var(--dur-slow) var(--ease);
}
.arrow-inner-wrapper svg { flex-shrink: 0; }
.btn-pill:hover .arrow-inner-wrapper { transform: translateX(22px); }

.btn-primary { background: var(--bg-gradient); color: var(--foreground-white); }
.btn-primary .arrow-circle { background: var(--surface-white); }
.btn-primary .arrow-circle svg path { stroke: var(--foreground-primary); }

.btn-white { background: var(--surface-white); color: var(--ink); }
.btn-white .arrow-circle { background: var(--bg-gradient); }
.btn-white .arrow-circle svg path { stroke: var(--foreground-white); }

/* ─────────── BADGES ─────────── */
.ebr-hero-badge {
  position: relative; display: inline-flex; align-items: center; gap: var(--sp-2);
  background: var(--ink); border: none; border-radius: var(--radius-pill);
  box-shadow: var(--shadow-badge); padding: 10px var(--sp-5);
  color: var(--foreground-white); font-size: var(--fs-13); font-weight: 500;
  letter-spacing: 0.5px; text-transform: uppercase;
  margin-bottom: var(--sp-7); isolation: isolate;
}
.ebr-hero-badge::before {
  content: ''; position: absolute; inset: -1px;
  border-radius: var(--radius-pill); padding: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.45) 50%, transparent 100%);
  background-size: 300% 100%;
  animation: badge-shimmer 5s ease-in-out infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
@keyframes badge-shimmer {
  0%   { background-position: -100% center; }
  100% { background-position: 200% center; }
}

.ebr-how-badge-wrap {
  display: flex; align-items: center; justify-content: center;
  gap: 0; margin-bottom: var(--sp-7);
}
.ebr-how-badge-line {
  flex: 0 0 120px; height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--hairline) 100%);
}
.ebr-how-badge-line.rev {
  background: linear-gradient(270deg, transparent 0%, var(--hairline) 100%);
}
.ebr-how-badge-dot {
  width: var(--sp-2); height: var(--sp-2); border-radius: 2px;
  border: 1px solid var(--hairline); background: var(--surface-white); flex-shrink: 0;
}
.ebr-how-badge-wrap > :nth-child(2) { margin-right: var(--sp-4); }
.ebr-how-badge-wrap > :nth-child(4) { margin-left: var(--sp-4); }
.ebr-how-badge {
  display: inline-block; border-radius: var(--radius-sm);
  border: 0.5px solid transparent;
  background: var(--surface-badge-dark) padding-box,
              var(--border-gradient-hard) border-box;
  box-shadow: var(--shadow-badge); padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-13); font-weight: 600; color: var(--foreground-white);
  letter-spacing: 1.5px; text-transform: uppercase; white-space: nowrap;
}
.ebr-faq-badge { background: var(--surface-white); border-color: transparent; color: var(--ink); }
.mn-section--muted .ebr-how-badge-dot { background: var(--surface-light); }

/* ─────────── HERO ─────────── */
.ebr-hero {
  position: relative; background: var(--black);
  padding: 150px 0 0; text-align: center; overflow: hidden;
}
.ebr-hero-bg-img {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100vw; pointer-events: none; z-index: 2;
  mix-blend-mode: screen; opacity: 0.85; display: block;
}
.ebr-hero-inner {
  position: relative; z-index: 3; max-width: 800px;
  margin: 0 auto; padding: 0 var(--sp-5);
}
.ebr-hero-title {
  font-size: var(--fs-hero); font-weight: 500; line-height: 1.3;
  letter-spacing: -2px; color: var(--foreground-white); margin: 0 0 var(--sp-5);
}
.ebr-hero-subtitle {
  font-size: var(--fs-16); font-weight: 400; line-height: 2.3;
  color: rgba(255,255,255,0.65); max-width: 700px; margin: 0 auto var(--sp-9);
}
.ebr-hero-chat {
  width: 100%;
  max-width: clamp(1400px, max(1400px, calc(1120px + (100vw - 768px) * 0.2152777778)), 1368px);
  padding: 0 var(--sp-20) var(--sp-20); margin: var(--sp-20) auto 0;
  position: relative; z-index: 3; box-sizing: border-box;
}
.ebr-hero-chat-inner {
  border-radius: var(--radius-4xl);
  background: rgba(255,255,255,0.10); padding: 10px;
}
.ebr-hero-chat img { width: 100%; display: block; border-radius: var(--radius-lg); }

/* ─────────── STAT STRIP ─────────── */
.ebr-stall-stats {
  background: var(--surface-light); border-radius: var(--radius-md);
  box-shadow: var(--shadow-subtle);
  display: flex; align-items: stretch; margin-top: var(--sp-10);
}
.ebr-stat-block {
  flex: 1; padding: 22px 18px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.ebr-stat-block + .ebr-stat-block { border-left: 1px solid var(--on-light-08); }
.ebr-stat-num {
  font-size: var(--fs-32); font-weight: 600; line-height: 1.3; letter-spacing: -1.28px;
}
.ebr-stat-label {
  font-size: var(--fs-14); font-weight: 400; line-height: 1.8;
  color: var(--foreground-secondary);
}

/* ─────────── BENTO CARD ─────────── */
.ebr-bento-card {
  background: var(--black); border: 8px solid var(--border-bento);
  border-radius: var(--radius-2xl); overflow: hidden;
  position: relative; height: 560px;
}
.ebr-bento-glow {
  position: absolute; top: -30px; right: 0; width: 300px; height: var(--sp-14);
  border-radius: var(--radius-circle);
  background: var(--glow-soft-grey);
  filter: blur(30px); opacity: 0.4; pointer-events: none; z-index: 1;
}
.ebr-bento-label {
  position: absolute; top: var(--sp-4); left: var(--sp-4); right: var(--sp-4);
  display: flex; align-items: center; justify-content: space-between; z-index: 2;
}
.ebr-bento-label-text {
  font-size: var(--fs-12); font-weight: 500; color: var(--on-dark-50);
  letter-spacing: 0.5px; text-transform: uppercase;
}
.ebr-bento-bars { display: flex; gap: 5px; align-items: center; }
.ebr-bento-bar { width: var(--sp-1); height: 18px; border-radius: 1px; background: var(--bar-inactive); }
.ebr-bento-bar.active { background: var(--bg-gradient-259); }
.ebr-bento-content {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: var(--sp-5) var(--sp-5) var(--sp-6); text-align: center; z-index: 4;
  display: flex; flex-direction: column; justify-content: flex-start;
}
.ebr-bento-card-title {
  font-size: var(--fs-18); font-weight: 500; color: var(--foreground-white);
  letter-spacing: -0.8px; margin-bottom: var(--sp-3);
}
.ebr-bento-divider {
  width: 180px; height: 1px; margin: 0 auto var(--sp-3); background: var(--divider-fade);
}
.ebr-bento-desc {
  font-size: var(--fs-14); font-weight: 400; line-height: 1.8;
  color: var(--foreground-muted); margin-bottom: 0; min-height: 76px;
}

/* ─────────── FEATURE PILL ─────────── */
.ebr-feature-item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-5) var(--sp-2) 6px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(224,224,224,0.14);
  background: var(--surface-pill-dark);
  backdrop-filter: blur(12px); margin-bottom: var(--sp-3);
}
.ebr-feature-icon-wrap {
  width: 38px; height: 38px; border-radius: var(--radius-circle);
  background: var(--bg-gradient);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ebr-feature-icon-wrap svg { width: 18px; height: 18px; }
.ebr-feature-text {
  font-size: var(--fs-15); font-weight: 400; color: var(--foreground-white); white-space: nowrap;
}

/* ─────────── ICON CARD ─────────── */
.mn-icon-card {
  background: var(--surface-white); border: 1px solid var(--mareana-border);
  border-radius: var(--radius-2xl); padding: var(--sp-8); height: 100%;
}
.mn-icon-card__icon {
  width: var(--sp-16); height: var(--sp-16); border-radius: var(--radius-lg);
  background: var(--bg-gradient);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: var(--sp-8); color: var(--foreground-white);
}
.mn-icon-card__title {
  font-size: var(--fs-24); font-weight: 500; letter-spacing: -0.8px;
  color: var(--foreground-primary); margin-bottom: var(--sp-2);
}
.mn-icon-card__desc {
  font-size: var(--fs-14); line-height: 1.8; color: var(--foreground-secondary); margin: 0;
}

/* ─────────── COMPARISON TABLE ─────────── */
.ebr-compare-outer {
  background: var(--surface-white); border-radius: var(--radius-3xl);
  padding: 6px; box-shadow: var(--shadow-badge);
}
.ebr-compare-table {
  border-radius: var(--radius-2xl); border: 1px solid rgba(208,208,208,0.70);
  overflow: hidden; width: 100%;
  border-collapse: separate; border-spacing: 0; table-layout: fixed;
}
.col-dim { width: 33.333%; }
.col-vec { width: 33.333%; background: var(--surface-column-light); }
.col-lum { width: 33.333%; background: var(--ink); }
.ebr-compare-th {
  padding: var(--sp-5) var(--sp-7); font-size: var(--fs-20); font-weight: 500;
  color: var(--foreground-primary); letter-spacing: 0.8px; text-transform: uppercase;
  text-align: center;
  border-bottom: 1px solid rgba(208,208,208,0.35);
  border-left: 1px solid rgba(208,208,208,0.35);
}
.ebr-compare-th:first-child { border-left: none; }
.ebr-compare-th.lum-th {
  color: var(--foreground-white);
  border-left: 1px solid rgba(255,255,255,0.12);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  border-radius: 0 var(--radius-2xl) 0 0;
}
.ebr-compare-td {
  padding: var(--sp-5) var(--sp-7); font-size: var(--fs-15); font-weight: 400;
  color: var(--foreground-primary); border-left: 1px solid rgba(208,208,208,0.35);
}
.ebr-compare-td:first-child { border-left: none; }
.ebr-compare-td.lum-td { color: var(--on-dark-90); border-left: 1px solid rgba(255,255,255,0.12); }
tbody tr:last-child .lum-td { border-radius: 0 0 var(--radius-2xl) 0; }

/* ─────────── FAQ ACCORDION ─────────── */
.custom-faq-accordion .accordion-item {
  border: none !important; border-radius: var(--radius-3xl) !important;
  background: var(--surface-white); box-shadow: var(--shadow-card);
  display: flex; padding: 6px; flex-direction: column; align-items: flex-start;
  gap: 10px; margin-bottom: var(--sp-5); overflow: visible;
}
.faq-inner-card {
  display: flex; width: 100%;
  padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-6);
  flex-direction: column; align-items: flex-start; gap: var(--sp-5);
  border-radius: var(--radius-xl); border: 1px solid var(--mareana-border);
  background: var(--surface-white); overflow: hidden;
}
.faq-inner-card .accordion-header,
.faq-inner-card .accordion-collapse { width: 100%; }
.custom-faq-accordion .accordion-button {
  padding: 0; font-size: var(--fs-18); font-weight: 500;
  color: var(--foreground-primary);
  background-color: transparent !important; box-shadow: none !important;
  display: flex; justify-content: space-between; align-items: center;
  gap: 15px; font-family: "Poppins", sans-serif; width: 100%;
}
.custom-faq-accordion .accordion-button::after { display: none; }
.custom-faq-accordion .accordion-button::before {
  content: ""; order: 2; width: 50px; height: 50px; flex-shrink: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'%3E%3C/line%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E"),
    var(--bg-gradient-180);
  background-repeat: no-repeat; background-position: center;
  border-radius: var(--radius-circle);
  transition: all var(--dur-mid) var(--ease);
}
.custom-faq-accordion .accordion-button:not(.collapsed)::before {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E"),
    var(--accordion-open-toggle);
  background-repeat: no-repeat; background-position: center;
  transform: rotate(180deg);
}
.custom-faq-accordion .accordion-body {
  padding: 0 0 var(--sp-2) 0; color: var(--foreground-secondary);
  line-height: 1.7; font-size: var(--fs-16); font-family: "Poppins", sans-serif;
}
.faq-outer-card {
  border-radius: var(--radius-3xl); background: var(--surface-white);
  box-shadow: var(--shadow-card); padding: 6px;
}
.faq-cta-banner {
  background: var(--black); border-radius: var(--radius-xl);
  position: relative; overflow: hidden; padding: var(--sp-7) var(--sp-6);
}
.faq-card-title {
  font-size: var(--fs-22); font-weight: 500; color: var(--foreground-white);
  margin-bottom: var(--sp-3); line-height: 1.35; letter-spacing: -0.4px;
}
.need-more-info-desc {
  font-size: var(--fs-15); color: var(--on-dark-70); line-height: 1.75; margin: 0;
}

/* ─────────── CTA BANNER ─────────── */
.ebr-cta { background: var(--surface-light); padding: 90px 0; }
.ebr-cta-card {
  max-width: 1280px; margin: 0 auto; border-radius: var(--radius-5xl);
  overflow: hidden; position: relative; background: var(--black); padding: 0;
}
.ebr-cta-moon {
  position: absolute; left: 50%; transform: translateX(-50%);
  border-radius: var(--radius-circle); pointer-events: none;
  mix-blend-mode: plus-lighter; z-index: 0;
}
.ebr-cta-moon-1 { width: 860px; height: 620px; top: -560px; background: rgba(67,97,238,0.55); filter: blur(80px); }
.ebr-cta-moon-2 { width: 580px; height: 420px; top: -370px; background: rgba(87,117,255,0.65); filter: blur(50px); }
.ebr-cta-moon-3 { width: 340px; height: 240px; top: -200px; background: rgba(114,138,255,0.75); filter: blur(28px); }
.ebr-cta-bars {
  position: absolute; inset: 0; display: flex; gap: 0;
  pointer-events: none; z-index: 1; border-radius: var(--radius-5xl); overflow: hidden;
}
.ebr-cta-bar {
  flex: 1 0 0; align-self: stretch; background: rgba(0,0,0,0.03);
  backdrop-filter: blur(100px); -webkit-backdrop-filter: blur(100px); max-width: 120px;
}
.ebr-cta-content {
  position: relative; z-index: 2; text-align: center;
  padding: var(--sp-20) var(--sp-12);
}
.ebr-cta-title {
  font-size: var(--fs-cta); font-weight: 500; line-height: 1.3;
  letter-spacing: -1.5px; color: var(--foreground-white); margin-bottom: var(--sp-5);
}
.ebr-cta-desc {
  font-size: var(--fs-16); font-weight: 400; line-height: 1.8;
  color: var(--on-dark-70); max-width: 540px; margin: 0 auto var(--sp-8);
}
.ebr-cta-pills {
  display: flex; justify-content: center; gap: var(--sp-4);
  flex-wrap: wrap; margin-bottom: 36px;
}
.ebr-cta-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 14px 6px 6px; border-radius: var(--radius-pill);
  border: 1px solid var(--on-dark-15); background: rgba(255,255,255,0.07);
  backdrop-filter: blur(8px);
  font-size: var(--fs-14); font-weight: 500; color: var(--foreground-white);
}
.ebr-cta-pill-icon {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: var(--bg-gradient); border-radius: var(--radius-circle); padding: 6px;
}

/* ─────────── SHARED ANIMATIONS ─────────── */
@keyframes flow-dash { to { stroke-dashoffset: -16; } }
@keyframes chat-fade-in { to { opacity: 1; transform: translateY(0); } }
.mn-flow-path {
  stroke: rgba(210,215,220,0.6); stroke-width: 1; fill: none;
  stroke-dasharray: 4 4; animation: flow-dash 1.2s linear infinite;
}

/* ═══════════ RESPONSIVE (desktop-first) ═══════════ */

@media (max-width: 1200px) {
  .ebr-container { padding-left: var(--sp-10); padding-right: var(--sp-10); }
}

@media (max-width: 992px) {
  .mn-section, .ebr-cta { padding: var(--sp-16) 0; }
  .ebr-container { padding-left: var(--sp-6); padding-right: var(--sp-6); }
  .ebr-hero { padding: 120px 0 0; }
  .ebr-hero-title { font-size: 38px; letter-spacing: -1.6px; }
  .ebr-hero-chat { padding: 0 var(--sp-6) 60px; margin-top: var(--sp-12); }
  .mn-title, .ebr-cta-title { font-size: var(--fs-32); letter-spacing: -1.2px; }
  .ebr-bento-card { height: 460px; }
  .ebr-stat-num { font-size: var(--fs-24); }
  .ebr-compare-th { font-size: var(--fs-15); padding: var(--sp-4) var(--sp-4); }
  .ebr-compare-td { font-size: var(--fs-13); padding: var(--sp-4) var(--sp-4); }
  .ebr-cta-card { margin-inline: var(--sp-4); width: calc(100% - var(--sp-8)); }
  .ebr-cta-bar:nth-child(n+13) { display: none; }
  .ebr-cta-content { padding: 60px var(--sp-8); }
}

@media (max-width: 768px) {
  .mn-section, .ebr-cta { padding: var(--sp-12) 0; }
  .ebr-hero { padding: var(--sp-25) 0 0; }
  .ebr-hero-title { font-size: var(--fs-28); letter-spacing: -1px; margin-bottom: 14px; }
  .ebr-hero-subtitle { font-size: var(--fs-14); line-height: 1.9; margin-bottom: var(--sp-6); }
  .ebr-hero-chat { padding: 0 var(--sp-4) var(--sp-10); margin-top: 36px; }
  .ebr-hero-badge { font-size: var(--fs-11); padding: var(--sp-2) 14px; margin-bottom: var(--sp-5); }
  .mn-title, .ebr-cta-title { font-size: var(--fs-28); letter-spacing: -0.8px; }
  .mn-subtitle { font-size: var(--fs-14); line-height: 1.9; }
  .ebr-stall-stats { flex-direction: column; }
  .ebr-stat-block + .ebr-stat-block { border-left: none; border-top: 1px solid var(--on-light-08); }
  .ebr-stat-num { font-size: var(--fs-28); }
  .ebr-bento-card { height: 440px; }
  .ebr-bento-card-title { font-size: var(--fs-16); }
  .ebr-bento-desc { font-size: var(--fs-13); min-height: auto; }
  .ebr-compare-outer { overflow-x: auto; }
  .col-dim { display: none; }
  .ebr-compare-th:nth-child(1), .ebr-compare-td:nth-child(1) { display: none; }
  .ebr-compare-th, .ebr-compare-td { font-size: var(--fs-13); padding: var(--sp-3) var(--sp-3); }
  .custom-faq-accordion .accordion-button { font-size: var(--fs-15); }
  .custom-faq-accordion .accordion-body { font-size: var(--fs-14); }
  .custom-faq-accordion .accordion-button::before { width: var(--sp-10); height: var(--sp-10); }
  .faq-card-title { font-size: var(--fs-20); }
  .ebr-cta-content { padding: var(--sp-12) var(--sp-5); }
  .ebr-cta-pills { flex-direction: column; align-items: center; gap: 10px; }
  .ebr-cta-card { border-radius: var(--radius-2xl); margin-inline: var(--sp-3); width: calc(100% - var(--sp-6)); }
  .ebr-cta-bar:nth-child(n+9) { display: none; }
}

@media (max-width: 576px) {
  .ebr-hero-title { font-size: var(--fs-24); }
  .ebr-bento-card { height: 400px; }
  .btn-pill { width: auto; justify-content: flex-start; }
  .ebr-cta-pills { gap: var(--sp-2); }
  .custom-faq-accordion .accordion-button { font-size: var(--fs-14); }
  .custom-faq-accordion .accordion-button::before { width: 36px; height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ═══════════════════════════════════════════════════
   EBR — Electronic Batch Record page
   Page-specific styles. Uses the design tokens defined at the top of this file.
   ═══════════════════════════════════════════════════ */

/* Core bug: hidden second arrow bleeds over the label. */
.btn-pill .arrow-circle { overflow: hidden; }
/* Core bug: the 52px arrow track (14 + 24 + 14) needs ±19px, not ±22px, to centre each arrow in the 44px circle. */
.arrow-inner-wrapper { transform: translateX(-19px); }
.btn-pill:hover .arrow-inner-wrapper { transform: translateX(19px); }
/* Core bug: the `background` shorthand in .text-gradient* resets background-clip. */
.text-gradient, .text-gradient-blue, .text-gradient-pink {
  -webkit-background-clip: text; background-clip: text;
}

/* Core bug: .ebr-container's clamp() has min > max, so content is 1240px at 1440 instead of
   Figma's 1280px (1440 − 2 × 80). */
.ebr-container { max-width: 1440px; }

/* ─────────── SHARED PAGE PATTERNS ─────────── */
.ebr-title-sm {
  font-size: var(--fs-section-sm); letter-spacing: -1.76px; line-height: 1.4;
}
.ebr-split-head { row-gap: var(--sp-4); margin-bottom: var(--sp-14); }
.ebr-split-head .mn-title { margin-bottom: 0; }
@media (min-width: 992px) { .ebr-title-narrow { max-width: 488px; } }

/* Two-column splits at Figma's exact ratios (desktop only; stacks via Bootstrap below 992px). */
@media (min-width: 992px) {
  .ebr-split-2 { display: grid; column-gap: var(--sp-14); margin: 0; align-items: center; }
  .ebr-split-2 > * { width: auto; max-width: none; padding: 0; margin-top: 0; }
  .ebr-split-2--operator { grid-template-columns: 556fr 664fr; }
  .ebr-split-2--trace    { grid-template-columns: 536fr 684fr; align-items: start; }
  .ebr-split-2--demo     { grid-template-columns: 558fr 660fr; column-gap: var(--sp-12); align-items: stretch; }
}
.ebr-scale--lift { border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }

.ebr-media { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); }

.ebr-glow {
  position: absolute; border-radius: var(--radius-circle);
  background: var(--mareana-primary); pointer-events: none; z-index: 0;
}

/* Title + description list inside a rounded panel (operator, genealogy) */
.ebr-list-panel {
  background: var(--surface-light); border-radius: var(--radius-2xl);
  padding: var(--sp-8);
}
.ebr-list-item + .ebr-list-item {
  border-top: 1px solid var(--mareana-border);
  margin-top: var(--sp-7); padding-top: var(--sp-7);
}
.ebr-list-title {
  font-size: var(--fs-20); font-weight: 500; line-height: 1.7;
  color: var(--foreground-primary); margin: 0;
}
.ebr-list-desc {
  font-size: var(--fs-16); line-height: 2; color: var(--foreground-secondary); margin: 0;
}
.ebr-list-panel--dark { background: var(--ink); }
.ebr-list-panel--dark .ebr-list-item + .ebr-list-item { border-top-color: var(--border-dark); }
.ebr-list-panel--dark .ebr-list-title { color: var(--foreground-white); }
.ebr-list-panel--dark .ebr-list-desc { color: var(--foreground-muted); }

/* ─────────── HERO ─────────── */
.ebr-hero { padding-top: 200px; }
.ebr-hero .ebr-hero-inner { max-width: 1240px; }
.ebr-hero .ebr-hero-title {
  font-size: var(--fs-section); letter-spacing: -1.92px; margin-bottom: var(--sp-3);
  background: linear-gradient(180deg, var(--foreground-white) 0%, var(--foreground-muted) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.ebr-hero .ebr-hero-subtitle { color: var(--foreground-muted); max-width: 864px; }
.ebr-hero-ctas { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--sp-4); }

/* Figma's hero background layers (blue swoosh, white highlight, blue ellipse, bottom white blur),
   rendered by Figma and composited 1:1 — CSS blur can't reproduce Figma's layer blur exactly. */
.ebr-hero {
  background: var(--black) url("../images/ebr-product/ebr-hero-bg.jpg") center top / max(100%, 1440px) auto no-repeat;
}
/* Glass frame lines up with the page container (80px sides), not the core rule's 100px. */
.ebr-hero .ebr-hero-chat { position: relative; z-index: 3; padding-bottom: 0; max-width: 1440px; }
@media (min-width: 992px) and (max-width: 1199.98px) { .ebr-hero .ebr-hero-chat { padding-inline: var(--sp-10); } }
.ebr-hero .ebr-hero-chat-inner {
  border-radius: var(--radius-5xl); padding: var(--sp-2);
  background: var(--border-gradient-top); border: 0; box-shadow: inset 0 0 0 1px var(--glass-border);
}
.ebr-hero { --ebr-fade: linear-gradient(180deg,
    color-mix(in srgb, var(--surface-white) 0.0%, transparent) 0%,
    color-mix(in srgb, var(--surface-white) 0.5%, transparent) 8%,
    color-mix(in srgb, var(--surface-white) 3.5%, transparent) 17%,
    color-mix(in srgb, var(--surface-white) 10.4%, transparent) 25%,
    color-mix(in srgb, var(--surface-white) 21.0%, transparent) 33%,
    color-mix(in srgb, var(--surface-white) 34.7%, transparent) 42%,
    color-mix(in srgb, var(--surface-white) 50.0%, transparent) 50%,
    color-mix(in srgb, var(--surface-white) 65.3%, transparent) 58%,
    color-mix(in srgb, var(--surface-white) 79.0%, transparent) 67%,
    color-mix(in srgb, var(--surface-white) 89.6%, transparent) 75%,
    color-mix(in srgb, var(--surface-white) 96.5%, transparent) 83%,
    color-mix(in srgb, var(--surface-white) 99.5%, transparent) 92%,
    color-mix(in srgb, var(--surface-white) 100.0%, transparent) 100%); }
/* Two layers: a tall one behind the dashboard blends the dark hero background (incl. the sides) into white;
   a shorter one over the dashboard fades the UI itself. */
.ebr-hero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 720px; z-index: 2; pointer-events: none;
  background: var(--ebr-fade);
}
.ebr-hero-fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 208px; z-index: 4; pointer-events: none;
  background: var(--ebr-fade);
}

/* Covers the sub-pixel seam where the black hero meets the white section. */
.ebr-hero + .mn-section { position: relative; margin-top: -2px; }

/* ─────────── STATEMENT ─────────── */
.ebr-statement {
  font-size: var(--fs-section-sm); font-weight: 500; line-height: 2; letter-spacing: -1.76px;
  color: var(--foreground-primary); margin: 0 0 var(--sp-14);
}
.ebr-statement-muted { color: var(--foreground-secondary); }

/* ─────────── CONVERSION WORKFLOW ─────────── */
.ebr-workflow {
  background: color-mix(in srgb, var(--ink) 60%, var(--black)); border: 1px solid var(--border-dark);
  border-radius: var(--radius-2xl); padding: 8px;
}
.ebr-workflow-images { position: relative; width: 100%; aspect-ratio: 767 / 619; overflow: hidden; border-radius: 12px; }
.ebr-workflow-image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity var(--dur-slow) var(--ease); }
.ebr-workflow-image.is-active { opacity: 1; }
.ebr-workflow-body { padding: var(--sp-6); height: 100%; display: flex; flex-direction: column; }
.ebr-workflow-cta { align-self: flex-start; margin-top: auto; }
.ebr-steps { margin-bottom: var(--sp-8) !important; }
.ebr-workflow-head { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: 12px; }
.ebr-workflow-icon { width: var(--sp-8); height: var(--sp-8); flex-shrink: 0; }
/* Figma icon: two identical stroke layers with a blue gradient, blended plus-lighter (Linear Dodge) over the card. */
.wf-ico-l { stroke: url(#wfIco); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; mix-blend-mode: plus-lighter; }
.ebr-workflow-title {
  font-size: var(--fs-24); font-weight: 500; letter-spacing: -0.8px; line-height: 1.4;
  color: var(--foreground-white); margin: 0;
}
.ebr-workflow-intro { margin-bottom: var(--sp-8); }

.ebr-steps { list-style: none; padding: 0; margin: 0; }
.ebr-step { position: relative; padding: var(--sp-6) 0; border-top: 1px solid var(--border-dark); }
.ebr-step:first-child { padding-top: var(--sp-6); }
.ebr-step::before {
  content: ""; position: absolute; top: -1px; left: 0; height: 1px; width: 0;
  background: var(--bg-gradient-259);
}
/* The active line fills over the step's dwell time — a countdown to the next step. */
.ebr-step.is-active::before { animation: ebr-step-line var(--dwell, 5s) linear forwards; }
.ebr-steps.is-static .ebr-step.is-active::before { animation: none; width: 100%; }
@keyframes ebr-step-line { from { width: 0; } to { width: 100%; } }
.ebr-step-btn {
  display: flex; gap: var(--sp-3); width: 100%; padding: 0; border: 0; background: none;
  text-align: left; cursor: pointer; color: inherit; font-family: inherit;
}
.ebr-step-num,
.ebr-step-title { font-size: var(--fs-18); font-weight: 500; line-height: 1; }
.ebr-step-num { color: var(--foreground-secondary); min-width: 24px; transition: color var(--dur-base); }
.ebr-step-title { color: var(--foreground-white); }
.ebr-step.is-active .ebr-step-num { color: var(--foreground-white); }
/* ─────────── WHAT YOUR TEAM DOES ─────────── */
.ebr-team-head { max-width: 864px; margin: 0 auto var(--sp-14); }
.ebr-team-card {
  position: relative; height: 100%; min-height: 504px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-6);
  padding: var(--sp-8); border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-card); color: var(--foreground-white);
  background-color: var(--black); background-size: cover; background-position: center;
  border: 1px solid var(--on-dark-15);
}
.ebr-team-card--art-1 { background-image: url("../images/ebr-product/team-card-art-1.webp"); }
.ebr-team-card--art-3 { background-image: url("../images/ebr-product/team-card-art-3.webp"); }
.ebr-team-card--light {
  background: var(--surface-white); color: var(--foreground-primary);
  border-color: var(--on-light-08); text-align: center;
}
.ebr-team-chip {
  display: inline-block; padding: 4px var(--sp-2); border-radius: var(--radius-sm);
  font-size: var(--fs-14); font-weight: 500; line-height: 20px; letter-spacing: 0; text-transform: uppercase;
  color: var(--foreground-white);
  background: color-mix(in srgb, var(--surface-light) 30%, transparent);
  border: 0; box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--surface-white) 34%, transparent);
  margin-bottom: var(--sp-3);
}
.ebr-team-card--light .ebr-team-chip { background: var(--surface-light); color: var(--black); }
.ebr-team-title {
  font-size: var(--fs-cta); font-weight: 500; line-height: 1.2; letter-spacing: -1.5px; margin: 0;
}
.ebr-team-desc { font-size: var(--fs-16); line-height: 2.3; margin: 0; }
.ebr-team-card--light .ebr-team-desc { color: var(--foreground-secondary); text-align: left; }
.ebr-team-mark { width: 120px; height: auto; margin: 0 auto; display: block; }

/* ─────────── WHERE AI OPERATES ─────────── */
.ebr-ai { position: relative; overflow: hidden; }
.ebr-ai > .ebr-container { position: relative; z-index: 1; }
.ebr-ai-glow { width: 1100px; height: 900px; right: -784px; top: -584px; filter: blur(160px); }
.ebr-ai-glow-core { width: 424px; height: 360px; right: -344px; top: -312px; background: var(--mareana-secondary); filter: blur(120px); }
.ebr-ai-row {
  display: flex; align-items: center; gap: var(--sp-12);
  padding: var(--sp-8) var(--sp-6); border-bottom: 1px solid var(--on-dark-15);
}
.ebr-ai-name { flex: 0 0 41.8%; display: flex; align-items: baseline; gap: var(--sp-8); }
.ebr-ai-num,
.ebr-ai-label {
  font-size: var(--fs-section); font-weight: 500; line-height: 1.3; letter-spacing: -1.92px;
  transition: color var(--dur-base);
}
.ebr-ai-num { color: var(--foreground-secondary); min-width: 60px; }
.ebr-ai-label { color: var(--foreground-white); }
.ebr-ai-row.is-active .ebr-ai-num,
.ebr-ai-row.is-active .ebr-ai-label {
  background: var(--text-gradient-blue);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.ebr-ai-title {
  font-size: var(--fs-28); font-weight: 500; line-height: 1.3; letter-spacing: -0.8px;
  color: var(--foreground-white); margin: 0 0 var(--sp-3);
}
.ebr-ai-desc { font-size: var(--fs-16); line-height: 1.9; color: var(--foreground-muted); margin: 0; }
.ebr-ai-quote {
  max-width: 816px; margin: var(--sp-16) auto var(--sp-16);
  font-size: var(--fs-32); font-weight: 500; line-height: 1.7; letter-spacing: -1.28px;
  color: var(--foreground-white); text-align: center;
}
.ebr-ai-quote span { color: var(--foreground-muted); }

/* ─────────── OPERATOR ADOPTION ─────────── */
.ebr-operator-copy .ebr-list-panel { margin-bottom: var(--sp-12); }
.ebr-tablet { display: block; width: 100%; max-width: 664px; height: auto; margin-left: auto; }

/* ─────────── EBRX REAL-TIME CHECKS ─────────── */
.ebr-checks-shell {
  background: var(--surface-white); border-radius: var(--radius-2xl); padding: var(--sp-4);
}
.ebr-checks-inner {
  background: var(--surface-light); border-radius: var(--radius-xl); padding: var(--sp-4);
}
.ebr-checks-list {
  height: 100%; border: 1px solid var(--mareana-border); border-radius: var(--radius-lg);
  padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-4);
}
.ebr-check-card {
  flex: 1; background: var(--surface-white); border-radius: var(--radius-lg);
  padding: var(--sp-4) var(--sp-9); display: flex; flex-direction: column; justify-content: center;
}

/* ─────────── BATCH GENEALOGY ─────────── */
.ebr-trace-copy .mn-subtitle { margin-bottom: var(--sp-12); }
.ebr-trace-copy .ebr-list-panel { margin-bottom: var(--sp-12); }

/* ─────────── FAQ ─────────── */
.ebr-faq-head { text-align: center; margin-bottom: var(--sp-14); }
.ebr-faq-head .ebr-statement-muted { display: block; }
.ebr-faq-cta {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-20);
  padding: var(--sp-6) var(--sp-8) var(--sp-6) var(--sp-6); border-radius: var(--radius-xl);
  --gx: 0%; --gy: 100%;
}
/* Figma glow: one radial gradient (large tilted ellipse), stretched to the banner width but kept at the frame's 151px height
   and anchored to the bottom, so a taller (wrapped) banner does not make the glow taller. */
.ebr-faq-bg { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 152px; z-index: 0; pointer-events: none; }
.ebr-faq-cta > :not(.ebr-faq-bg) { position: relative; z-index: 1; }
.ebr-faq-cta .faq-card-title { font-size: var(--fs-20); line-height: 1.5; margin-bottom: 8px; }
.ebr-faq-cta .need-more-info-desc { font-size: var(--fs-16); line-height: 2; color: var(--foreground-white); max-width: 680px; }
.ebr-faq-cta .btn-pill { flex-shrink: 0; }

/* ─────────── DEMO FORM ─────────── */

.ebr-demo-card {
  position: relative; overflow: hidden; background: var(--black);
  border-radius: var(--radius-2xl); padding: var(--sp-4);
}
.ebr-demo-card > .row { position: relative; z-index: 1; }
/* Figma glow: two radial gradients stretched over the card (SVG keeps their tilted ellipses and Figma's blend). */
.ebr-demo-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.ebr-demo-copy {
  height: 100%; padding: var(--sp-6); display: flex; flex-direction: column;
  justify-content: space-between; gap: var(--sp-10);
}
.ebr-demo-desc { font-size: var(--fs-16); line-height: 2; color: var(--foreground-white); margin: 0; max-width: 512px; }
.ebr-demo-form-card {
  background: var(--surface-white); border-radius: var(--radius-lg);
  padding: var(--sp-16) var(--sp-6); height: 100%;
}
.ebr-demo-form { max-width: 480px; margin: 0 auto; }
.ebr-form-title {
  font-size: var(--fs-24); font-weight: 500; letter-spacing: -0.8px; line-height: 1.2;
  color: var(--foreground-primary); text-align: center; margin: 0 0 8px;
}
.ebr-form-sub {
  font-size: var(--fs-14); line-height: 1.8; color: var(--foreground-secondary);
  text-align: center; margin: 0 calc(-1 * var(--sp-5)) var(--sp-14);
}
.ebr-form-label {
  display: block; font-size: var(--fs-14); line-height: 1; color: var(--black); margin-bottom: var(--sp-3);
}
.ebr-form-label .req { color: var(--accent-danger); }
.ebr-form-input {
  width: 100%; height: 52px; padding: 0 var(--sp-4);
  border: 1px solid var(--mareana-border); border-radius: var(--radius-pill);
  background: var(--surface-light); font-family: inherit; font-size: var(--fs-16);
  color: var(--foreground-primary); outline: none;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.ebr-form-input:focus { border-color: var(--mareana-primary); box-shadow: none; }
.ebr-form-input.is-invalid { border-color: var(--accent-danger); }
/* Browser autofill keeps the field's own background and text colour (no yellow/blue autofill tint). */
.ebr-form-input:-webkit-autofill,
.ebr-form-input:-webkit-autofill:hover,
.ebr-form-input:-webkit-autofill:focus,
.ebr-form-input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--surface-light) inset !important;
          box-shadow: 0 0 0 1000px var(--surface-light) inset !important;
  -webkit-text-fill-color: var(--foreground-primary);
  caret-color: var(--foreground-primary);
  transition: background-color 600000s 0s, color 600000s 0s;
}
.ebr-form-submit {
  width: 100%; height: 56px; border: 0; border-radius: var(--radius-pill);
  background: var(--bg-gradient); color: var(--foreground-white);
  font-family: inherit; font-size: var(--fs-14); font-weight: 500; cursor: pointer;
  transition: opacity var(--dur-base) var(--ease);
}
.ebr-form-submit:hover { opacity: 0.88; }
.ebr-form-consent {
  font-size: var(--fs-12); line-height: 2.2; color: var(--foreground-secondary);
  text-align: center; margin: var(--sp-6) 0 0;
}
.ebr-form-consent a { color: var(--mareana-primary); font-weight: 600; text-decoration: none; }
.ebr-form-success {
  font-size: var(--fs-14); color: var(--foreground-primary); text-align: center; margin: var(--sp-4) 0 0;
}

/* ═══════════════════════════════════════════════════
   PRODUCT MOCKUPS — live HTML recreations of the Figma UI
   Mockup-only palette, derived from system tokens (no raw colour values).
   ═══════════════════════════════════════════════════ */
.ebr-mock {
  --mock-bg:      color-mix(in srgb, var(--ink) 35%, var(--black));
  --mock-surface: color-mix(in srgb, var(--ink) 60%, var(--black));
  --mock-raised:  color-mix(in srgb, var(--ink) 85%, var(--black));
  --mock-line:    var(--border-dark);
  --mock-text:    var(--foreground-white);
  --mock-dim:     var(--foreground-faint);
  --mock-mute:    var(--foreground-secondary);
  --mock-hover:   color-mix(in srgb, var(--mareana-primary) 12%, transparent);
  --mock-success: var(--accent-success);
  --mock-veil:    color-mix(in srgb, var(--black) 70%, transparent);
  font-family: "Poppins", sans-serif; color: var(--mock-text); line-height: 1.3; text-align: left;
}
.ebr-mock *, .ebr-mock *::before, .ebr-mock *::after { box-sizing: border-box; }
.ebr-mock p, .ebr-mock h4, .ebr-mock h5 { margin: 0; }

/* Fixed-size artboard, scaled to its container by JS (sets --s). */
.ebr-scale { position: relative; width: 100%; overflow: hidden; }
.ebr-scale.is-pan { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.ebr-scale > .ebr-mock {
  position: absolute; top: 0; left: 0; transform-origin: 0 0;
  transform: scale(var(--s, 1));
}

/* Shared radial glow used by the dark product panels. */
.ebr-radial {
  background:
    radial-gradient(90% 75% at var(--gx, 0%) var(--gy, 100%),
      var(--mareana-secondary) 0%, var(--mareana-primary) 22%, transparent 60%),
    var(--black);
}


/* ─────────── HERO DASHBOARD (1201 × 840) ─────────── */
.ebr-dash { width: 1201px; height: 860px; } /* extra 100px is the runway for the hero's white bottom fade */
.ebr-dash-screen {
  position: relative; display: flex; width: 100%; height: 100%;
  background: var(--mock-bg); border: 1px solid var(--mock-raised);
  border-radius: var(--radius-2xl); overflow: hidden;
}
.ebr-dash-side { width: 230px; flex-shrink: 0; border-right: 1px solid var(--mock-line); padding: 15px var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-4); }
.ebr-dash-top { display: flex; align-items: center; justify-content: space-between; height: 25px; }
.ebr-dash-brand { display: flex; align-items: center; gap: 6px; padding: 3px; }
.ebr-dash-brand img { height: 18px; width: auto; filter: brightness(0) invert(1); }
/* Core rounds and stretches every image inside .ebr-hero-chat; the mockup logo must stay untouched. */
.ebr-hero-chat .ebr-mock img { width: auto; border-radius: 0; }
.ebr-dash-brand i, .ebr-dash-top > i { font-size: 10px; color: var(--mock-dim); }
.ebr-dash-top > i { font-size: 14px; }
.ebr-dash-nav { display: flex; flex-direction: column; gap: 14px; }
.ebr-dash-group { display: flex; flex-direction: column; }
.ebr-dash-item {
  display: flex; align-items: center; gap: var(--sp-2); padding: 10px var(--sp-3);
  border-radius: var(--radius-md); font-size: var(--fs-12); font-weight: 500; line-height: 20px;
  color: var(--on-dark-50);
}
.ebr-dash-item i { font-size: 14px; width: 16px; text-align: center; }
.ebr-dash-group--lo .ebr-dash-item { padding: var(--sp-3); color: var(--foreground-dim); }
.ebr-dash-item.is-current { background: var(--mock-raised); color: var(--mock-text); padding: var(--sp-2) var(--sp-3); }
.ebr-dash-rule { height: 1px; margin: 0 var(--sp-2); background: var(--on-dark-15); }

.ebr-dash-main { flex: 1; padding: 7px 7px 7px 0; position: relative; }
.ebr-dash-docs {
  height: 100%; background: var(--mock-surface); border: 1px solid var(--mock-line);
  border-radius: var(--radius-lg); overflow: hidden;
}
.ebr-dash-docs-head {
  display: flex; align-items: center; justify-content: space-between;
  height: 33px; padding: 0 var(--sp-5) 0 var(--sp-6); font-size: var(--fs-11); font-weight: 500;
}
.ebr-dash-docs-head span:last-child { display: flex; gap: var(--sp-3); color: var(--mock-dim); font-size: 12px; }
.ebr-dash-doc {
  display: flex; align-items: center; justify-content: space-between;
  height: 37px; padding: 0 var(--sp-6);
}
.ebr-dash-doc-l { display: flex; align-items: center; gap: 18px; }
.ebr-dash-doc-id { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-11); color: var(--mock-dim); width: 66px; }
.ebr-dash-doc-name { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-10); font-weight: 500; color: var(--foreground-muted); }
.ebr-dash-doc-name i { color: var(--mareana-primary); font-size: 12px; }
.ebr-dash-live {
  display: inline-flex; align-items: center; gap: var(--sp-1); padding: 5px 7px;
  border: 1px solid var(--mock-line); border-radius: var(--radius-pill);
  font-size: var(--fs-10); color: var(--mock-dim);
}

/* Animated overlay states sit over the main body. */
.ebr-dash-state {
  position: absolute; left: 230px; top: 0; right: 0; bottom: 0; opacity: 0;
  background: var(--mock-bg);
  overflow: hidden;
}
/* Scene sequencer (JS): the table stays underneath; each scene fades in over the previous one,
   which is removed once covered. Inner interactions key off data-pane / data-step. */
.ebr-dash-state--table { opacity: 1; }
.ebr-scene { transition: opacity var(--dur-slow) var(--ease); }
.ebr-scene.is-on { opacity: 1; }
.is-press { animation: dash-press var(--dur-mid) var(--ease); }
@keyframes dash-press { 50% { scale: 0.95; opacity: 0.8; } }

/* Every dashboard screen: 66px header bar (24px sides) + 24px content padding. */
.ebr-bt-table { padding: 0 0 var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-6); height: 100%; }
.ebr-bt-table > :not(.ebr-bt-head) { margin-inline: var(--sp-6); }
.ebr-bt-head,
.ebr-form-bar {
  display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
  height: 66px; padding: 0 var(--sp-6); background: var(--mock-surface); border-bottom: 1px solid var(--mock-line);
}
.ebr-bt-head .ebr-mbtn { padding: var(--sp-2) var(--sp-4); }
.ebr-bt-title { font-size: var(--fs-16); font-weight: 600; line-height: 24px; }
.ebr-bt-sub { font-size: var(--fs-11); color: var(--mock-dim); }
.ebr-mbtn {
  display: inline-flex; align-items: center; gap: var(--sp-2); border: 0; border-radius: var(--radius-pill);
  padding: var(--sp-3) var(--sp-5); font-family: inherit; font-size: var(--fs-13); font-weight: 400;
  line-height: 20px; color: var(--mock-text); background: var(--bg-gradient);
}
.ebr-mbtn--muted { background: var(--foreground-dim); }
.ebr-mbtn--ghost {
  background: var(--mock-surface); border: 1px solid var(--mock-line); color: var(--mock-dim); padding: 10px var(--sp-4);
}
.ebr-mbtn--off { background: var(--mock-line); color: var(--mock-mute); opacity: 0.5; padding: 10px var(--sp-4); }
.ebr-bt-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.ebr-bt-stat {
  background: var(--mock-surface); border: 1px solid var(--mock-line); border-radius: var(--radius-md);
  padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2);
}
.ebr-bt-stat span { font-size: var(--fs-11); color: var(--mock-dim); }
.ebr-bt-stat strong { font-size: var(--fs-20); font-weight: 600; line-height: 30px; }
.ebr-bt-grid {
  background: var(--mock-surface); border: 1px solid var(--mock-line); border-radius: var(--radius-lg); overflow: hidden;
}
.ebr-bt-row {
  display: grid; grid-template-columns: 120px 270px 160px 140px 120px; gap: var(--sp-4);
  align-items: center; padding: var(--sp-4); height: 57px; font-size: var(--fs-13); color: var(--mock-dim);
}
.ebr-bt-row > :nth-child(2) { color: var(--mock-text); }
.ebr-bt-row > :first-child { font-weight: 600; }
.ebr-bt-row--head { height: 50px; background: var(--mock-raised); font-size: var(--fs-12); font-weight: 600; }
.ebr-bt-row--head > :nth-child(2) { color: var(--mock-dim); }
.ebr-bt-row--hi { background: var(--mock-hover); }
.ebr-bt-row--hi > :first-child { color: var(--mock-text); }
.ebr-bt-stage {
  justify-self: start; padding: var(--sp-1) 10px; border-radius: var(--radius-4xl);
  background: var(--ink); border: 1px solid var(--mock-line); font-size: var(--fs-11); font-weight: 500;
}
.ebr-bt-foot { display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-12); color: var(--mock-dim); margin-top: auto; }
.ebr-bt-pages { display: flex; gap: var(--sp-2); }
.ebr-bt-pages span {
  padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-pill);
  background: var(--mock-surface); border: 1px solid var(--mock-line);
}
.ebr-bt-pages span:last-child { color: var(--mock-text); }

.ebr-dash-veil { position: absolute; inset: 0; background: var(--mock-veil); }
/* Extends the modal backdrop over the sidebar while the upload/parse/done modals are open. */
.ebr-dash-sideveil {
  position: absolute; left: 0; top: 0; bottom: 0; width: 230px; opacity: 0; pointer-events: none;
  background: var(--mock-veil); transition: opacity var(--dur-slow) var(--ease);
}
.ebr-dash-sideveil.is-on { opacity: 1; }
.ebr-modal {
  position: absolute; left: calc(50% - 115px); top: 50%; translate: -50% -50%; width: 540px;
  background: var(--mock-raised); border: 1px solid var(--mock-line); border-radius: var(--radius-2xl);
  padding: var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-6);
}
/* States start after the 230px sidebar; shifting by half of it centres modals on the whole dashboard. */
/* One modal for upload → analyzing → completed: height eases to the active pane (set by JS), content crossfades. */
.ebr-modal--flow { display: block; padding: 0; overflow: hidden; height: 442px; transition: height var(--dur-slow) var(--ease); }
.ebr-modal-pane {
  position: absolute; top: 0; left: 0; right: 0; padding: 0;
  display: flex; flex-direction: column; opacity: 0; transition: opacity var(--dur-mid) var(--ease);
}
[data-pane="1"] .ebr-modal-pane--1, [data-pane="2"] .ebr-modal-pane--2, [data-pane="3"] .ebr-modal-pane--3 { opacity: 1; transition-delay: var(--dur-base); }
.ebr-btn-mute { transition: opacity var(--dur-mid) var(--ease); }
[data-pane="2"] .ebr-btn-mute { opacity: 0.45; }
/* Modal parts — shared by every step so padding, header and footer never shift. */
.ebr-mh { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-6); border-bottom: 1px solid var(--mock-line); }
.ebr-mb { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-5) var(--sp-6) var(--sp-6); }
.ebr-mh-ico {
  width: 36px; height: 36px; flex-shrink: 0; display: grid; place-items: center; border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--mareana-primary) 10%, transparent); color: var(--mareana-primary); font-size: 18px;
}
.ebr-mh-text { flex: 1; min-width: 0; }
.ebr-mh-title { font-size: var(--fs-16); font-weight: 600; line-height: 24px; }
.ebr-mh-desc { font-size: var(--fs-13); line-height: 1.6; color: var(--mock-dim); }
.ebr-mh-close {
  width: 28px; height: 28px; flex-shrink: 0; display: grid; place-items: center; border-radius: var(--radius-circle);
  border: 1px solid var(--mock-line); color: var(--mock-dim); font-size: 12px;
}
.ebr-mf {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-6); border-top: 1px solid var(--mock-line); background: var(--mock-surface);
  font-size: var(--fs-11); color: var(--mock-mute);
}
.ebr-mf > div { display: flex; gap: var(--sp-2); }
.ebr-modal .ebr-mbtn { height: 36px; padding: 0 var(--sp-4); font-size: var(--fs-13); }
.ebr-file-done { margin-left: auto; color: var(--mareana-primary); font-size: 16px; }

/* Segmented progress strip in the brand gradient: 64 thin segments, filling one segment at a time. */
@property --pct { syntax: "<integer>"; inherits: false; initial-value: 0; }
.ebr-prog-label { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--sp-2); font-size: var(--fs-13); font-weight: 500; }
.ebr-prog-label > :last-child { color: var(--mareana-primary); font-weight: 600; font-variant-numeric: tabular-nums; }
.ebr-pct { counter-reset: pct var(--pct); }
[data-pane="2"] .ebr-pct, [data-pane="3"] .ebr-pct { animation: dash-pct 1.9s linear 0.3s forwards; }
.ebr-pct::after { content: counter(pct) "%"; }
.ebr-seg {
  position: relative; height: 20px; background: var(--mock-line);
  -webkit-mask: linear-gradient(90deg, var(--black) 0 55%, transparent 55% 100%) 0 0 / calc(100% / 64) 100% repeat-x;
          mask: linear-gradient(90deg, var(--black) 0 55%, transparent 55% 100%) 0 0 / calc(100% / 64) 100% repeat-x;
}
.ebr-seg > span { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--bg-gradient-259); }
[data-pane="2"] .ebr-seg-run, [data-pane="3"] .ebr-seg-run { animation: dash-seg 1.9s steps(64, end) 0.3s forwards; }
.ebr-seg > span.is-full { width: 100%; }
@keyframes dash-seg { to { width: 100%; } }
@keyframes dash-pct { to { --pct: 100; } }

.ebr-drop {
  background: var(--mock-surface); border: 1.5px dashed var(--foreground-dim); border-radius: var(--radius-lg);
  padding: var(--sp-10); display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); text-align: center;
}
.ebr-drop-icon {
  width: 56px; height: 56px; border-radius: var(--radius-circle); display: grid; place-items: center;
  background: color-mix(in srgb, var(--foreground-dim) 12%, transparent); font-size: 26px; color: var(--mock-dim);
}
.ebr-drop strong { display: block; font-size: var(--fs-14); font-weight: 500; }
.ebr-drop strong b { color: var(--mareana-secondary); font-weight: 500; }
.ebr-drop small { display: block; font-size: var(--fs-11); color: var(--mock-mute); margin-top: var(--sp-1); }
.ebr-file {
  display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4);
  background: var(--mock-surface); border: 1px solid var(--mock-line); border-radius: var(--radius-md);
}
.ebr-file-ico {
  width: 34px; height: 34px; border-radius: var(--radius-sm); display: grid; place-items: center; flex-shrink: 0;
  background: color-mix(in srgb, var(--mareana-primary) 10%, transparent); color: var(--mareana-primary); font-size: 16px;
}
.ebr-file-name { font-size: var(--fs-13); font-weight: 500; line-height: 20px; }
.ebr-file-meta { font-size: var(--fs-11); color: var(--mock-dim); }
.ebr-steps-mini { display: flex; flex-direction: column; gap: var(--sp-3); }
.ebr-steps-mini li { display: flex; align-items: center; gap: 10px; font-size: var(--fs-12); color: var(--mock-dim); opacity: 0; }
.ebr-steps-mini li i { font-size: 14px; color: var(--mareana-primary); }
.ebr-steps-mini li:last-child { color: var(--mock-text); font-weight: 500; }
[data-pane="2"] .ebr-steps-mini li, [data-pane="3"] .ebr-steps-mini li { animation: dash-rise var(--dur-slow) var(--ease) forwards; }
[data-pane="2"] .ebr-steps-mini li:nth-child(2) { animation-delay: 0.7s; }
[data-pane="2"] .ebr-steps-mini li:nth-child(3) { animation-delay: 1.3s; }
[data-pane="2"] .ebr-steps-mini li:nth-child(1) { animation-delay: 0.2s; }
@keyframes dash-rise { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
.ebr-steps-mini .ebr-spin {
  width: 14px; height: 14px; border-radius: var(--radius-circle);
  border: 1.5px solid var(--mareana-primary); border-top-color: transparent; animation: ebr-spin 0.9s linear infinite;
}
@keyframes ebr-spin { to { transform: rotate(360deg); } }
/* Parsing pane: an even vertical rhythm — description, file, progress, checklist. */
.ebr-modal-pane--2 .ebr-mb { gap: var(--sp-5); padding-bottom: var(--sp-8); }
.ebr-modal-pane--2 .ebr-prog-label { margin-bottom: var(--sp-3); }
.ebr-modal-pane--2 .ebr-steps-mini { gap: var(--sp-4); }

/* Data-entry state */
.ebr-form-bar-title { font-size: var(--fs-16); font-weight: 600; line-height: 24px; }
.ebr-form-bar-sub { font-size: var(--fs-11); color: var(--mock-dim); }
.ebr-wf { display: flex; align-items: center; gap: var(--sp-4); font-size: var(--fs-11); font-weight: 500; color: var(--mock-dim); }
.ebr-wf span { display: inline-flex; align-items: center; gap: 6px; }
.ebr-wf span::before { content: ""; width: 6px; height: 6px; border-radius: var(--radius-circle); background: var(--mock-mute); }
.ebr-wf .is-on { background: var(--ink); border-radius: var(--radius-xs); padding: var(--sp-1) var(--sp-2); color: var(--mock-text); font-weight: 600; }
.ebr-wf .is-on::before { background: var(--mareana-primary); }
.ebr-wf i { font-size: 9px; color: var(--mock-mute); }
.ebr-cfg {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px var(--sp-3); border-radius: var(--radius-sm);
  background: var(--ink); border: 1px solid var(--mock-line); font-size: var(--fs-11); font-weight: 500; color: var(--foreground-muted);
}
.ebr-form-ws {
  height: calc(100% - 66px); background: var(--mock-raised); padding: var(--sp-6);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-6);
}
.ebr-banner {
  align-self: stretch; display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4);
  background: var(--ink); border: 1px solid var(--mock-line); border-radius: var(--radius-md);
  font-size: var(--fs-12); color: var(--mock-dim);
}
.ebr-doc {
  width: 720px; background: var(--surface-white); border-radius: var(--radius-md); padding: var(--sp-10);
  color: var(--foreground-primary); display: flex; flex-direction: column; gap: var(--sp-6);
}
.ebr-doc-head {
  display: flex; align-items: baseline; justify-content: space-between; padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--mareana-border); font-size: var(--fs-12); font-weight: 500; color: var(--foreground-secondary);
}
.ebr-doc-head strong { font-size: var(--fs-14); font-weight: 700; color: var(--foreground-primary); letter-spacing: 0.5px; }
.ebr-doc-title { font-size: var(--fs-18); font-weight: 700; }

.ebr-mbtn--lg { padding: var(--sp-3) var(--sp-6); }

/* Light theme for the hero dashboard — same layout, palette remapped to light tokens. */
.ebr-dash--light {
  --mock-bg:      var(--surface-white);
  --mock-surface: var(--surface-light);
  --mock-raised:  var(--surface-hover);
  --mock-line:    var(--mareana-border);
  --mock-text:    var(--foreground-primary);
  --mock-dim:     var(--foreground-secondary);
  --mock-mute:    var(--foreground-dim);
  --mock-hover:   color-mix(in srgb, var(--ink) 6%, transparent);
  --mock-veil:    color-mix(in srgb, var(--ink) 35%, transparent);
  --mock-success: color-mix(in srgb, var(--accent-success) 55%, var(--ink));
}
.ebr-dash--light .ebr-dash-screen { border-color: var(--mareana-border); }
.ebr-dash--light .ebr-dash-side { background: var(--surface-light); border-right: 1px solid var(--mareana-border); }
.ebr-dash--light .ebr-dash-brand img { filter: none; }
.ebr-dash--light .ebr-dash-item { color: var(--foreground-secondary); }
.ebr-dash--light .ebr-dash-group--lo .ebr-dash-item { color: var(--foreground-dim); }
.ebr-dash--light .ebr-dash-item.is-current {
  background: var(--surface-white); color: var(--foreground-primary);
  box-shadow: var(--shadow-badge);
}
.ebr-dash--light .ebr-dash-item.is-current i { color: var(--black); }
.ebr-dash--light .ebr-dash-rule { background: var(--mareana-border); }
.ebr-dash--light .ebr-dash-main { background: var(--surface-light); }
.ebr-dash--light .ebr-dash-docs { background: var(--surface-white); }
.ebr-dash--light .ebr-dash-doc-name { color: var(--foreground-primary); }
.ebr-dash--light .ebr-bt-stat,
.ebr-dash--light .ebr-bt-grid,
.ebr-dash--light .ebr-bt-pages span,
.ebr-dash--light .ebr-mbtn--ghost,
.ebr-dash--light .ebr-file,
.ebr-dash--light .ebr-drop { background: var(--surface-white); }
.ebr-dash--light .ebr-bt-table,
.ebr-dash--light .ebr-dash-state { background: var(--surface-light); }
.ebr-dash--light .ebr-bt-row--head { background: var(--surface-light); }
.ebr-dash--light .ebr-bt-row + .ebr-bt-row { border-top: 1px solid var(--mareana-border); }
.ebr-dash--light .ebr-bt-stage { background: var(--surface-hover); border-color: var(--mareana-border); color: var(--foreground-secondary); }
.ebr-dash--light .ebr-mbtn { color: var(--foreground-white); }
.ebr-dash--light .ebr-mbtn--ghost { color: var(--foreground-secondary); }
.ebr-dash--light .ebr-mbtn--off { background: var(--mareana-border); color: var(--foreground-dim); }
.ebr-dash--light .ebr-mbtn--muted { background: var(--hairline); }
.ebr-dash--light .ebr-modal { background: var(--surface-white); box-shadow: var(--shadow-card); }
.ebr-dash--light .ebr-drop { border-color: var(--hairline); }
.ebr-dash--light .ebr-drop strong b { color: var(--mareana-primary); }
.ebr-dash--light .ebr-bt-head,
.ebr-dash--light .ebr-form-bar { background: var(--surface-white); border-bottom: 1px solid var(--mareana-border); }
.ebr-dash--light .ebr-wf .is-on { background: var(--surface-hover); }
.ebr-dash--light .ebr-cfg,
.ebr-dash--light .ebr-banner { background: var(--surface-white); color: var(--foreground-secondary); }
.ebr-dash--light .ebr-form-ws { background: var(--surface-light); }
.ebr-dash--light .ebr-doc { border: 1px solid var(--mareana-border); box-shadow: var(--shadow-subtle); }

/* ── Hero batch-run screens (Issue → Initiate → Execute → Review) ── */
.ebr-wf .is-done { color: var(--mock-text); }
.ebr-wf .is-done::before { background: var(--mareana-primary); opacity: 0.45; }
.ebr-persona {
  display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-3) var(--sp-1) var(--sp-1);
  border: 1px solid var(--mock-line); border-radius: var(--radius-pill); font-size: var(--fs-11); font-weight: 600; color: var(--mock-text);
}
.ebr-persona-av {
  width: 22px; height: 22px; display: grid; place-items: center; border-radius: var(--radius-circle);
  background: var(--bg-gradient); color: var(--foreground-white); font-size: 9px; font-weight: 700; letter-spacing: 0.3px;
}
.ebr-form-ws--row { flex-direction: row; align-items: flex-start; }
.ebr-form-ws--issue { display: grid; grid-template-columns: 1.6fr 1fr; align-content: start; align-items: stretch; }
.ebr-card { background: var(--mock-bg); border: 1px solid var(--mock-line); border-radius: var(--radius-lg); padding: var(--sp-5); }
.ebr-card-title { font-size: var(--fs-14); font-weight: 600; }
.ebr-card-sub { font-size: var(--fs-11); color: var(--mock-dim); margin-top: 2px !important; }
.ebr-issue-form { display: flex; flex-direction: column; gap: var(--sp-4); }
.ebr-issue-flow { display: flex; flex-direction: column; }
.ebr-fld label { display: block; font-size: var(--fs-11); font-weight: 500; color: var(--mock-dim); margin-bottom: 6px; }
.ebr-fld-in {
  height: 38px; display: flex; align-items: center; padding: 0 var(--sp-3); border: 1px solid var(--mock-line);
  border-radius: var(--radius-md); background: var(--mock-bg); font-size: var(--fs-13); color: var(--mock-text);
}
.ebr-fld--type .ebr-fld-in { transition: border-color var(--dur-base), box-shadow var(--dur-base); }
.ebr-chip { padding: 2px var(--sp-2); border-radius: var(--radius-xs); background: var(--mock-hover); font-size: var(--fs-12); font-weight: 500; }
.ebr-fld-group { font-size: var(--fs-11); font-weight: 600; color: var(--mock-mute); letter-spacing: 0.5px; text-transform: uppercase; margin-top: var(--sp-1) !important; }
.ebr-fld-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.ebr-card-actions { display: flex; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-2); }
.ebr-card-actions .ebr-mbtn, .ebr-doc-foot .ebr-mbtn, .ebr-drawer-actions .ebr-mbtn { height: 36px; padding: 0 var(--sp-4); }

/* Typing effect for values that get entered. */
.ebr-typed { display: inline-block; clip-path: inset(0 100% 0 0); }
@keyframes dash-type { to { clip-path: inset(0 0 0 0); } }
[data-scene="issue"][data-step] .ebr-typed { animation: dash-type 0.7s steps(9, end) forwards; }
[data-scene="issue"][data-step="1"] .ebr-fld--type .ebr-fld-in { border-color: var(--ink); background: var(--surface-light); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 8%, transparent); }

.ebr-flow { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding-top: var(--sp-4); }
.ebr-flow-node {
  position: relative; width: 200px; padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-lg); text-align: center;
  border: 1px solid var(--mock-line); background: var(--mock-bg); transition: border-color var(--dur-mid), box-shadow var(--dur-mid);
}
.ebr-flow-node b { display: block; font-size: var(--fs-14); font-weight: 600; }
.ebr-flow-node small { display: block; font-size: var(--fs-11); color: var(--mock-dim); margin-top: 2px; }
.ebr-flow-node--bmr { border-color: var(--mareana-secondary); }
[data-scene="issue"][data-step] .ebr-flow-node--bmr { border-color: var(--mareana-primary); box-shadow: var(--glow-primary); }
.ebr-flow-node--locked { background: var(--mock-surface); border-style: dashed; }
.ebr-flow-node--locked b { color: var(--mock-dim); }
.ebr-flow-node--locked > .lk { position: absolute; top: var(--sp-2); right: var(--sp-3); font-size: 12px; color: var(--mock-mute); }
.ebr-flow-link { width: 2px; height: 36px; background: var(--mock-line); }

.ebr-toast {
  position: absolute; left: 50%; top: 14px; translate: -50% -8px; opacity: 0; z-index: 3;
  display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-pill); background: var(--mock-bg); border: 1px solid var(--mock-line);
  box-shadow: var(--shadow-card); font-size: var(--fs-12); font-weight: 500; white-space: nowrap;
  transition: opacity var(--dur-slow) var(--ease), translate var(--dur-slow) var(--ease);
}
.ebr-toast i { color: var(--mareana-primary); font-size: 15px; }
[data-scene="issue"][data-step="3"] .ebr-toast,
[data-scene="initiate"][data-step] .ebr-toast,
[data-scene="review"][data-step="2"] .ebr-toast { opacity: 1; translate: -50% 0; }

/* Initiate */
.ebr-status { display: grid; }
.ebr-status em {
  grid-area: 1 / 1; font-style: normal; font-size: var(--fs-11); font-weight: 600; padding: 2px var(--sp-2);
  border-radius: var(--radius-pill); transition: opacity var(--dur-mid) var(--ease);
}
.ebr-status-a { background: var(--mock-surface); color: var(--mock-dim); }
.ebr-status-b { background: var(--mock-hover); color: var(--mareana-primary); opacity: 0; }
[data-scene="initiate"][data-step] .ebr-status-a { opacity: 0; }
[data-scene="initiate"][data-step] .ebr-status-b { opacity: 1; }
.ebr-idt { border: 1px solid var(--mareana-border); border-radius: var(--radius-md); overflow: hidden; }
.ebr-idt-row { display: grid; grid-template-columns: 220px 1fr; font-size: var(--fs-13); }
.ebr-idt-row + .ebr-idt-row { border-top: 1px solid var(--mareana-border); }
.ebr-idt-row > span { padding: var(--sp-3) var(--sp-4); }
.ebr-idt-row > span:first-child { background: var(--surface-light); font-weight: 600; }
.ebr-idt-row > span:last-child { display: flex; align-items: center; justify-content: space-between; color: var(--foreground-secondary); transition: background var(--dur-mid); }
/* Lucide lock: sized by the surrounding font-size, coloured by the surrounding text. */
.lk { width: 1em; height: 1em; flex-shrink: 0; display: inline-block; vertical-align: -0.125em; }
.ebr-lock { font-size: 12px; color: var(--hairline); opacity: 0.35; transition: opacity var(--dur-mid), color var(--dur-mid); }
[data-scene="initiate"][data-step] .is-locked > span:last-child { background: var(--mock-hover); }
[data-scene="initiate"][data-step] .ebr-lock { opacity: 1; color: var(--mareana-primary); }
.ebr-doc-foot { display: flex; align-items: center; justify-content: space-between; }
.ebr-lock-note { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-12); color: var(--foreground-dim); }

/* Execute: inputs type in, calculated cells fill from them; the 2nd A.R. row opens only on a shortage;
   e-sign dialog confirms, then Done by → Checked by → Verified by open in sequence.
   Steps: 1 = 1st A.R. + calc, 2 = 2nd A.R. + carry-over, 3 = e-sign dialog, 4 = signed. */
.ebr-doc--calc { width: 100%; gap: var(--sp-6); padding: var(--sp-6) var(--sp-8); }
.ebr-ct { position: relative; }
.ebr-ct-cap { font-size: var(--fs-12); font-weight: 600; margin-bottom: var(--sp-2) !important; }
.ebr-ct-cap em { font-style: normal; font-weight: 400; color: var(--foreground-dim); margin-left: var(--sp-1); }
.ebr-ct-row { display: grid; grid-template-columns: 90px repeat(5, 1fr); gap: var(--sp-2); align-items: center; }
.ebr-ct-row--head { font-size: var(--fs-10); font-weight: 700; letter-spacing: 0.3px; color: var(--foreground-dim); text-transform: uppercase; padding-bottom: 6px; }
.ebr-ct-row > span { min-height: 38px; display: flex; align-items: center; }
.ebr-ct-row--head > span { min-height: 0; }
.c-id { font-size: var(--fs-13); font-weight: 600; }
.c-in { padding: 0 var(--sp-3); border: 1px solid var(--mareana-border); border-radius: var(--radius-sm); font-size: var(--fs-13); font-weight: 500; background: var(--surface-white); }
.c-calc {
  gap: 6px; padding: 0 var(--sp-3); border-radius: var(--radius-sm); font-size: var(--fs-13);
  background: var(--surface-light); border: 1px dashed var(--mareana-border); color: var(--hairline);
  transition: background var(--dur-mid) var(--ease), border-color var(--dur-mid) var(--ease), color var(--dur-mid) var(--ease);
}
.c-calc b, .c-calc small { opacity: 0; transition: opacity var(--dur-mid) var(--ease); }
.c-calc b { color: var(--foreground-primary); }
.c-calc small { color: var(--foreground-secondary); }
.c-calc--short b { color: var(--accent-danger); }
[data-scene="execute"][data-step] .ebr-ct-row--1 .ebr-typed { animation: dash-type 0.45s steps(6, end) calc(var(--i) * 0.35s) forwards; }
[data-scene="execute"][data-step] .c-calc--a,
[data-scene="execute"][data-step] .c-calc--short { background: var(--surface-light); border: 1px solid var(--mareana-border); color: var(--foreground-primary); transition-delay: 1.1s; }
[data-scene="execute"][data-step] :is(.c-calc--a, .c-calc--short) :is(b, small) { opacity: 1; transition-delay: 1.1s; }

.ebr-ct--second .ebr-ct-row { opacity: 0.4; transition: opacity var(--dur-slow) var(--ease); }
.ebr-ct-lock {
  position: absolute; right: 0; top: -2px; display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-11); font-weight: 500; color: var(--foreground-dim); transition: opacity var(--dur-mid) var(--ease);
}
[data-scene="execute"]:is([data-step="2"], [data-step="3"], [data-step="4"]) .ebr-ct--second .ebr-ct-row { opacity: 1; }
[data-scene="execute"]:is([data-step="2"], [data-step="3"], [data-step="4"]) .ebr-ct-lock { opacity: 0; }
[data-scene="execute"]:is([data-step="2"], [data-step="3"], [data-step="4"]) .ebr-ct-row--2 .ebr-typed { animation: dash-type 0.45s steps(6, end) calc((var(--i) - 3) * 0.35s + 0.3s) forwards; }
[data-scene="execute"]:is([data-step="2"], [data-step="3"], [data-step="4"]) :is(.c-calc--c, .c-calc--d, .c-calc--mcc) { background: var(--surface-light); border: 1px solid var(--mareana-border); color: var(--foreground-primary); transition-delay: 1.1s; }
[data-scene="execute"]:is([data-step="2"], [data-step="3"], [data-step="4"]) :is(.c-calc--c, .c-calc--d, .c-calc--mcc) :is(b, small) { opacity: 1; transition-delay: 1.1s; }
[data-scene="execute"]:is([data-step="2"], [data-step="3"], [data-step="4"]) .c-calc--mcc,
[data-scene="execute"]:is([data-step="2"], [data-step="3"], [data-step="4"]) .c-calc--mcc :is(b, small) { transition-delay: 1.5s; }

.ebr-carry { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-md); background: var(--surface-light); font-size: var(--fs-12); color: var(--foreground-secondary); }
.ebr-carry b { color: var(--foreground-primary); font-weight: 600; }
.ebr-carry .c-calc { min-height: 32px; display: inline-flex; align-items: center; }
.ebr-carry-tag { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-11); font-weight: 500; color: var(--mareana-primary); opacity: 0; transition: opacity var(--dur-mid) var(--ease); }
[data-scene="execute"]:is([data-step="2"], [data-step="3"], [data-step="4"]) .ebr-carry-tag { opacity: 1; transition-delay: 1.9s; }

.ebr-sig3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); padding-top: var(--sp-2); }
.ebr-sig b { display: block; font-size: var(--fs-11); font-weight: 700; color: var(--foreground-dim); margin-bottom: 6px; }
.ebr-sig { border-top: 1px solid var(--mareana-border); padding-top: var(--sp-3); }
.ebr-sig-slot { display: grid; }
.ebr-sig-slot em {
  grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 6px; justify-self: start; font-style: normal;
  font-size: var(--fs-12); font-weight: 500; padding: var(--sp-1) var(--sp-3); border-radius: var(--radius-pill);
  transition: opacity var(--dur-mid) var(--ease);
}
.ebr-sig--done .ebr-sig-a { border: 1px solid var(--foreground-primary); color: var(--foreground-primary); }
.ebr-sig--done .ebr-sig-b { background: var(--surface-light); color: var(--foreground-primary); opacity: 0; }
.ebr-sig--check .ebr-sig-a, .ebr-sig--verify .ebr-sig-a { border: 1px dashed var(--mareana-border); color: var(--hairline); }
.ebr-sig--check .ebr-sig-b { background: var(--surface-light); color: var(--foreground-primary); opacity: 0; }
[data-scene="execute"][data-step="4"] :is(.ebr-sig--done, .ebr-sig--check) .ebr-sig-a { opacity: 0; }
[data-scene="execute"][data-step="4"] :is(.ebr-sig--done, .ebr-sig--check) .ebr-sig-b { opacity: 1; }
[data-scene="execute"][data-step="4"] .ebr-sig--check .ebr-sig-b { transition-delay: 0.5s; }

/* E-sign dialog (step 3), centred on the whole dashboard like the upload modal. */
.ebr-scene-veil { position: absolute; inset: 0; background: var(--mock-veil); opacity: 0; transition: opacity var(--dur-mid) var(--ease); pointer-events: none; }
.ebr-esign {
  position: absolute; left: calc(50% - 115px); top: 50%; width: 400px; translate: -50% -46%; opacity: 0;
  background: var(--mock-bg); border: 1px solid var(--mock-line); border-radius: var(--radius-2xl); overflow: hidden;
  box-shadow: var(--shadow-card); transition: opacity var(--dur-slow) var(--ease), translate var(--dur-slow) var(--ease);
}
.ebr-esign .ebr-mb { gap: var(--sp-3); }
.ebr-esign .ebr-mh-desc b { color: var(--mock-text); font-weight: 600; }
.ebr-esign .ebr-mbtn { height: 36px; padding: 0 var(--sp-4); }
.ebr-dots { display: inline-block; letter-spacing: 2px; clip-path: inset(0 100% 0 0); }
[data-scene="execute"][data-step="3"] .ebr-scene-veil { opacity: 1; }
[data-scene="execute"][data-step="3"] .ebr-esign { opacity: 1; translate: -50% -50%; }
[data-scene="execute"][data-step="3"] .ebr-dots { animation: dash-type 0.6s steps(10, end) 0.4s forwards; }
[data-scene="execute"][data-step="3"] .ebr-pw { border-color: var(--ink); background: var(--surface-light); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 8%, transparent); }

/* Review: out-of-range value flagged, supervisor disposition in a drawer. */
.ebr-doc--review { flex: 1; width: auto; align-self: flex-start; }
.ebr-crow { display: grid; grid-template-columns: 56px 1.3fr 1fr 1fr; align-items: center; padding: var(--sp-3) var(--sp-2); border-bottom: 1px solid var(--mareana-border); font-size: var(--fs-13); color: var(--foreground-secondary); transition: background var(--dur-mid); }
.ebr-crow > :nth-child(2) { color: var(--foreground-primary); font-weight: 600; }
.ebr-crow--head { font-size: var(--fs-10); font-weight: 700; letter-spacing: 0.5px; color: var(--foreground-dim); padding-top: 0; }
.ebr-crow--head > :nth-child(2) { color: var(--foreground-dim); font-weight: 700; }
.ebr-cval { display: flex; align-items: center; gap: var(--sp-2); font-weight: 600; color: var(--foreground-primary); }
.ebr-cval i { color: var(--accent-danger); font-size: 12px; }
.ebr-cval em { display: none; font-style: normal; font-size: var(--fs-10); font-weight: 600; padding: 2px var(--sp-2); border-radius: var(--radius-pill); background: var(--mock-hover); color: var(--mareana-primary); }
.ebr-crow.is-flag { background: color-mix(in srgb, var(--accent-danger) 8%, transparent); }
[data-scene="review"][data-step="2"] .ebr-crow.is-flag { background: transparent; }
[data-scene="review"][data-step="2"] .is-flag .ebr-cval i { display: none; }
[data-scene="review"][data-step="2"] .is-flag .ebr-cval em { display: inline-block; }
.ebr-drawer {
  width: 330px; flex-shrink: 0; align-self: flex-start; display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-5); background: var(--mock-bg); border: 1px solid var(--mock-line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); opacity: 0; translate: 24px 0; overflow: hidden;
  transition: opacity var(--dur-slow) var(--ease), translate var(--dur-slow) var(--ease),
              width var(--dur-slow) var(--ease) var(--dur-base), padding var(--dur-slow) var(--ease) var(--dur-base), margin var(--dur-slow) var(--ease) var(--dur-base);
}
[data-scene="review"][data-step="1"] .ebr-drawer { opacity: 1; translate: 0 0; }
[data-scene="review"][data-step="2"] .ebr-drawer { width: 0; padding-inline: 0; border-width: 0; margin-left: calc(-1 * var(--sp-6)); }
.ebr-drawer > * { min-width: 288px; }
.ebr-drawer-head { display: flex; gap: var(--sp-3); align-items: flex-start; padding-bottom: var(--sp-3); border-bottom: 1px solid var(--mock-line); }
.ebr-drawer-head > i { color: var(--accent-danger); font-size: 18px; }
.ebr-drawer-head b { display: block; font-size: var(--fs-14); font-weight: 600; }
.ebr-drawer-head small { font-size: var(--fs-11); color: var(--mock-dim); }
.ebr-issue { border: 1px solid color-mix(in srgb, var(--accent-danger) 35%, transparent); border-radius: var(--radius-md); padding: var(--sp-3); }
.ebr-issue-top { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); }
.ebr-issue-top b { font-size: var(--fs-11); font-weight: 600; }
.ebr-crit { font-size: var(--fs-10); font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--accent-danger); }
.ebr-issue-msg { font-size: var(--fs-12); margin-top: var(--sp-2) !important; padding: var(--sp-2); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--accent-danger) 8%, transparent); }
.ebr-issue-val { font-size: var(--fs-11); color: var(--mock-dim); margin-top: var(--sp-2) !important; }
.ebr-drawer-label { font-size: var(--fs-11); font-weight: 600; color: var(--mock-dim); }
.ebr-opt { display: flex; gap: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--mock-line); border-radius: var(--radius-md); }
.ebr-opt.is-on { border-color: var(--mareana-primary); background: var(--mock-hover); }
.ebr-opt b { display: block; font-size: var(--fs-12); font-weight: 600; }
.ebr-opt small { display: block; font-size: var(--fs-11); color: var(--mock-dim); }
.ebr-radio { width: 14px; height: 14px; margin-top: 2px; flex-shrink: 0; border-radius: var(--radius-circle); border: 1.5px solid var(--mock-line); }
.ebr-opt.is-on .ebr-radio { border: 4px solid var(--mareana-primary); }
.ebr-reason { height: 56px; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--mock-line); border-radius: var(--radius-md); font-size: var(--fs-11); color: var(--mock-mute); }
.ebr-drawer-actions { display: flex; justify-content: flex-end; gap: var(--sp-2); }

/* ─────────── TABLET (664 × 842) ─────────── */
.ebr-ipad { width: 664px; height: 842px; }
.ebr-ipad-body {
  position: absolute; left: 10px; top: 14px; width: 621px; height: 813px; border-radius: 53px;
  background: var(--black); border: 4.5px solid var(--hairline); padding: 18px 18px;
}
.ebr-ipad-cam { position: absolute; top: 7px; left: 50%; translate: -50% 0; display: flex; gap: 10px; }
.ebr-ipad-cam span { width: 5px; height: 5px; border-radius: var(--radius-circle); background: var(--ink); }
.ebr-ipad-screen {
  position: relative; width: 576px; height: 768px; border-radius: 38px; background: var(--surface-light);
  border: 2px solid var(--border-dark); padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-4);
  color: var(--foreground-primary); overflow: hidden;
}
.ebr-ipad-top { display: flex; align-items: center; justify-content: space-between; padding: 2px 2px 0; }
.ebr-ipad-top img { height: 22px; width: auto; }
.ebr-ipad-prog { display: flex; gap: 3px; }
.ebr-ipad-prog span { width: 4px; height: 19px; border-radius: 2px; background: var(--mareana-border); }
.ebr-ipad-prog span.is-on { background: var(--mareana-primary); }
.ebr-ipad-card { position: relative; background: var(--surface-white); border-radius: var(--radius-lg); padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-4); flex: 1; min-height: 0; }
.ebr-ipad-meta { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--fs-14); color: var(--foreground-secondary); }
.ebr-ipad-meta strong, .ebr-ipad-step { font-size: var(--fs-16); font-weight: 500; color: var(--foreground-primary); }
.ebr-ipad-card hr { margin: 0; border: 0; border-top: 1px solid var(--mareana-border); opacity: 1; }
.ebr-ipad-row { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; min-height: 44px; border-bottom: 1px solid var(--mareana-border); font-size: var(--fs-12); font-weight: 500; color: var(--foreground-secondary); }
.ebr-ipad-row > * { padding: 0 var(--sp-3); }
.ebr-ipad-row--head { min-height: 38px; background: var(--surface-light); border: 0; font-size: var(--fs-14); }
.ebr-ipad-val {
  display: flex; justify-content: space-between; align-items: center; margin: 0 var(--sp-3); padding: 10px var(--sp-3) !important;
  background: var(--surface-light); border: 1px solid var(--mareana-border); border-radius: var(--radius-sm);
}
.ebr-ipad-val small { font-size: var(--fs-10); color: color-mix(in srgb, var(--accent-success) 45%, var(--ink)); }
.ebr-ipad-check { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-12); font-weight: 600; color: var(--foreground-secondary); }
.ebr-ipad-check i { width: 20px; height: 20px; border-radius: var(--radius-xs); background: var(--mareana-primary); color: var(--foreground-white); display: grid; place-items: center; font-size: 14px; }
.ebr-ipad-signs { display: flex; gap: 118px; font-size: var(--fs-12); font-weight: 500; color: var(--foreground-secondary); }
.ebr-ipad-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.ebr-ipad-actions span {
  height: 44px; border-radius: var(--radius-pill); display: grid; place-items: center;
  font-size: var(--fs-14); font-weight: 500; background: var(--surface-white); color: var(--foreground-primary);
}
.ebr-ipad-actions span:last-child { background: var(--mareana-primary); color: var(--foreground-white); }
/* ── iPad: how it works on the floor ──
   Resting state (no .is-run) is the finished page from Figma. The script adds .is-run and steps through:
   operator enters values → out-of-range locks and alerts the supervisor → supervisor accepts, operator corrects →
   operator e-signs → supervisor verifies live from another station. */
.ipv-in { display: grid; align-items: center; }
.ipv-in > *, .ipv-stack > * { grid-area: 1 / 1; }
.ipv-stack { display: grid; justify-items: end; white-space: nowrap; }
.ipv-ph, .ipv-txt--a, .ipv-st--bad, .ipad-live, .ips-live, .ips-slot > .ips-a, .ips-slot > .ips-b { display: none; }
.ips--perf .ips-slot > .ips-b { display: inline-flex; }
.ipv-ph { font-size: var(--fs-10); font-weight: 400; color: var(--hairline); white-space: nowrap; }
.ips-slot { display: grid; margin-top: 10px; align-items: center; min-height: 30px; }
.ips-slot > em { grid-area: 1 / 1; font-style: normal; display: inline-flex; align-items: center; gap: 6px; color: var(--foreground-primary); }
.ips { position: relative; }
.ipad-toast, .ipad-veil, .ipad-sheet { pointer-events: none; }
.ipad-toast {
  position: absolute; left: var(--sp-3); right: var(--sp-3); top: 10px; z-index: 4; display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) 14px; border-radius: var(--radius-xl); background: var(--ink); color: var(--foreground-white);
  box-shadow: var(--shadow-card); opacity: 0; translate: 0 -16px;
  transition: opacity var(--dur-slow) var(--ease), translate var(--dur-slow) var(--ease);
}
.ipad-toast b { display: block; font-size: var(--fs-13); font-weight: 600; line-height: 1.3; }
.ipad-toast small { display: block; font-size: var(--fs-11); color: var(--foreground-muted); margin-top: 2px; }
.ipad-toast-ico { font-size: 20px; line-height: 1; }
.ipad-toast--bad .ipad-toast-ico { color: var(--accent-danger); }
.ipad-toast--ok .ipad-toast-ico { color: var(--accent-success); }
.ipad-veil { position: absolute; inset: 0; z-index: 5; background: color-mix(in srgb, var(--ink) 45%, transparent); opacity: 0; transition: opacity var(--dur-mid) var(--ease); }
.ipad-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; padding: var(--sp-2) var(--sp-8) var(--sp-8);
  background: var(--surface-white); border-radius: var(--radius-5xl) var(--radius-5xl) 0 0; box-shadow: var(--shadow-card);
  translate: 0 105%; transition: translate 0.5s var(--ease);
}
.ipad-grab { display: block; width: 40px; height: 4px; margin: 0 auto var(--sp-5); border-radius: 2px; background: var(--mareana-border); }
.ipad-sheet-title { font-size: var(--fs-18); font-weight: 500; letter-spacing: -0.4px; }
.ipad-sheet-sub { font-size: var(--fs-12); color: var(--foreground-secondary); margin-top: 2px !important; }
.ipad-pw { margin: var(--sp-5) 0; }
.ipad-pw label { display: block; font-size: var(--fs-11); font-weight: 500; color: var(--foreground-secondary); margin-bottom: 6px; }
.ipad-pw-in { height: 48px; display: flex; align-items: center; padding: 0 var(--sp-4); border: 1px solid var(--mareana-primary); border-radius: var(--radius-md); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mareana-primary) 14%, transparent); }
.ipad-dots { letter-spacing: 3px; font-size: var(--fs-16); clip-path: inset(0 100% 0 0); }
.ipad-sheet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.ipad-sheet-actions span { height: 48px; display: grid; place-items: center; border-radius: var(--radius-pill); font-size: var(--fs-14); border: 1px solid var(--mareana-border); }
.ipad-sheet-actions .ipad-sign { border: 0; background: var(--bg-gradient); color: var(--foreground-white); }
.ebr-ipad-prog span.ipad-p8 { background: var(--mareana-border); }

/* Run mode */
.is-run .ebr-ipad-card, .is-run .ebr-ipad-top { transition: opacity var(--dur-slow) var(--ease); }
.is-run.is-fade .ebr-ipad-card, .is-run.is-fade .ebr-ipad-top { opacity: 0; }
.is-run .ipad-live {
  display: inline-flex; align-items: center; gap: 6px; padding: var(--sp-1) 10px; border-radius: var(--radius-pill);
  background: var(--surface-white); border: 1px solid var(--mareana-border); font-size: var(--fs-11); font-weight: 500;
  color: var(--foreground-secondary); opacity: 0; transition: opacity var(--dur-mid) var(--ease);
}
.ipad-live-dot, .ips-live i { width: 6px; height: 6px; border-radius: var(--radius-circle); background: var(--mareana-primary); animation: ipad-pulse 1.6s ease-in-out infinite; }
@keyframes ipad-pulse { 50% { opacity: 0.35; } }
.is-run.s-live .ipad-live { opacity: 1; }

.is-run .ipv { background: var(--surface-white); transition: border-color var(--dur-mid) var(--ease), box-shadow var(--dur-mid) var(--ease), background var(--dur-mid) var(--ease); }
.is-run .ipv.is-ok { background: var(--surface-light); }
.is-run .ipv.is-focus { border-color: var(--mareana-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mareana-primary) 14%, transparent); }
.is-run .ipv.is-bad { background: color-mix(in srgb, var(--accent-danger) 7%, var(--surface-white)); border-color: color-mix(in srgb, var(--accent-danger) 55%, transparent); }
.is-run .ipv.is-bad .ipv-txt { color: var(--accent-danger); }
.is-run .ipv-ph { display: block; transition: opacity var(--dur-fast); }
.is-run .ipv.is-typed .ipv-ph { opacity: 0; }
.is-run .ipv-txt { clip-path: inset(0 100% 0 0); }
.is-run .ipv-txt--a { display: block; }
.is-run .ipv-txt--b { visibility: hidden; }
.is-run .ipv.is-typed .ipv-txt:not(.ipv-txt--b) { animation: dash-type 0.5s steps(8, end) forwards; }
.is-run .ipv.is-fixed .ipv-txt--a { display: none; }
.is-run .ipv.is-fixed .ipv-txt--b { visibility: visible; animation: dash-type 0.5s steps(8, end) forwards; }
.is-run .ipv-st { opacity: 0; transition: opacity var(--dur-mid) var(--ease); }
.is-run .ipv-st--bad { display: block; color: var(--accent-danger); font-weight: 600; }
.is-run .ipv.is-ok .ipv-st--ok, .is-run .ipv.is-bad .ipv-st--bad { opacity: 1; }

.is-run .ebr-ipad-check i { background: var(--surface-white); color: transparent; box-shadow: inset 0 0 0 1.5px var(--hairline); transition: all var(--dur-mid) var(--ease); }
.is-run.s-check .ebr-ipad-check i { background: var(--mareana-primary); color: var(--foreground-white); box-shadow: none; }

.is-run .ips-slot > em { display: inline-flex; opacity: 0; transition: opacity var(--dur-mid) var(--ease), box-shadow var(--dur-mid) var(--ease); }
.is-run .ips--perf .ips-a { opacity: 1; padding: 6px var(--sp-3); border: 1px solid var(--mareana-secondary); border-radius: var(--radius-pill); color: var(--mareana-primary); width: fit-content; }
.is-run.s-perf-focus .ips--perf .ips-a { box-shadow: 0 0 0 3px color-mix(in srgb, var(--mareana-primary) 14%, transparent); border-color: var(--mareana-primary); }
.is-run.s-perf .ips--perf .ips-a { opacity: 0; }
.is-run.s-perf .ips--perf .ips-b { opacity: 1; }
.is-run .ips--ver .ips-a { opacity: 1; color: var(--hairline); }
.is-run.s-ver .ips--ver .ips-a { opacity: 0; }
.is-run.s-ver .ips--ver .ips-w { opacity: 1; }
.is-run.s-verified .ips--ver .ips-w { opacity: 0; }
.is-run.s-verified .ips--ver .ips-b { opacity: 1; }
.is-run .ips-live { display: inline-flex; align-items: center; gap: 6px; position: absolute; left: 74px; top: 1px; white-space: nowrap; font-size: var(--fs-10); font-weight: 500; color: var(--mareana-primary); opacity: 0; transition: opacity var(--dur-mid) var(--ease); }
.is-run.s-verified .ips-live { opacity: 1; }
.is-run .ipad-primary { opacity: 0.4; transition: opacity var(--dur-mid) var(--ease); }
.is-run.s-verified .ipad-primary { opacity: 1; }
.is-run.s-verified .ebr-ipad-prog .ipad-p8 { background: var(--mareana-primary); }
.is-run .ebr-ipad-prog span { transition: background var(--dur-mid) var(--ease); }

.is-run.show-bad .ipad-toast--bad, .is-run.show-ok .ipad-toast--ok { opacity: 1; translate: 0 0; }
.is-run.show-sheet .ipad-veil { opacity: 1; }
.is-run.show-sheet .ipad-sheet { translate: 0 0; }
.is-run.s-typing .ipad-dots { animation: dash-type 0.7s steps(10, end) forwards; }

.ebr-pencil {
  position: absolute; left: 638px; top: 145px; width: 16px; height: 375px; border-radius: 8px 8px 3px 3px;
  background: linear-gradient(90deg, var(--mareana-border), var(--surface-white) 40%, var(--surface-white) 60%, var(--mareana-border));
  border: 0.8px solid var(--mareana-border);
}
.ebr-pencil::after {
  content: ""; position: absolute; left: 50%; bottom: -22px; translate: -50% 0; width: 11px; height: 22px;
  background: linear-gradient(180deg, var(--surface-white), var(--hairline));
  clip-path: polygon(0 0, 100% 0, 60% 100%, 40% 100%);
}

/* ─────────── EBRX CHECKS PANEL (650 × 684) ─────────── */
.ebr-ebrx { width: 650px; height: 684px; padding: var(--sp-4); border-radius: var(--radius-lg); --gx: 0%; --gy: 100%; }
.ebr-ebrx-win {
  height: 100%; background: var(--ink); border: 1px solid var(--mock-line); border-radius: var(--radius-lg);
  display: flex; flex-direction: column; overflow: hidden;
}
.ebr-ebrx-body { flex: 1; padding: var(--sp-4) var(--sp-4) 0; border-bottom: 1px solid var(--mock-line); border-radius: var(--radius-lg); }
.ebr-ebrx-head { display: flex; align-items: center; gap: var(--sp-4); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--mock-line); }
.ebr-ebrx-ico {
  position: relative; width: 52px; height: 52px; border-radius: 10px; flex-shrink: 0; overflow: hidden;
  background: var(--black); border: 1px solid var(--foreground-secondary); display: grid; place-items: center;
  font-size: 22px; color: var(--foreground-white);
}
.ebr-ebrx-ico::before {
  content: ""; position: absolute; left: -4px; top: -3px; width: 32px; height: 32px; border-radius: var(--radius-circle);
  background: var(--foreground-muted); filter: blur(27px);
}
.ebr-ebrx-ico i { position: relative; }
.ebr-ebrx-title { font-size: var(--fs-16); font-weight: 500; line-height: 27px; }
.ebr-ebrx-sub { font-size: var(--fs-14); line-height: 28px; color: var(--foreground-muted); }
.ebr-ebrx-head > i { margin-left: auto; align-self: flex-start; color: var(--foreground-secondary); font-size: 18px; }
.ebr-ebrx-row { padding: var(--sp-4) 0 15px; border-bottom: 1px solid var(--mock-line); }
.ebr-ebrx-row:last-child { border-bottom: 0; padding-bottom: var(--sp-4); }
.ebr-ebrx-row-top { display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-14); color: var(--foreground-muted); }
.ebr-chip-st {
  display: grid; border-radius: var(--radius-pill); background: var(--foreground-secondary);
  transition: background var(--dur-mid) var(--ease), box-shadow var(--dur-mid) var(--ease);
}
.ebr-chip-st > em {
  grid-area: 1 / 1; padding: var(--sp-2) var(--sp-3); line-height: 1; font-style: normal; text-align: center;
  opacity: 0; transition: opacity var(--dur-mid) var(--ease);
}
[data-state="wait"] .ebr-chip-st { background: transparent; box-shadow: inset 0 0 0 1px var(--on-dark-15); color: var(--foreground-faint); }
[data-state="run"] .ebr-chip-st { background: color-mix(in srgb, var(--mareana-primary) 30%, transparent); color: var(--foreground-white); }
[data-state="ok"] .ebr-chip-st { background: var(--foreground-secondary); }
[data-state="bad"] .ebr-chip-st { background: color-mix(in srgb, var(--accent-danger) 22%, transparent); color: var(--accent-danger); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-danger) 45%, transparent); }
[data-state="wait"] .st-wait, [data-state="run"] .st-run, [data-state="ok"] .st-ok, [data-state="bad"] .st-bad { opacity: 1; }
.ebr-ebrx-bars { display: flex; gap: 2px; height: 29px; margin: var(--sp-3) 0; }
.ebr-ebrx-bars span { position: relative; flex: 1; background: var(--foreground-secondary); opacity: 0.25; transition: opacity 0.8s ease-in-out; }
.ebr-ebrx-bars span.is-on { opacity: 1; background: var(--surface-white); transition-duration: 0.04s; transition-timing-function: ease-out; }
.ebr-ebrx-src { font-size: var(--fs-12); line-height: 12px; color: var(--foreground-muted); opacity: 0; translate: 0 4px; transition: opacity var(--dur-slow) var(--ease), translate var(--dur-slow) var(--ease); }
[data-state="ok"] .ebr-ebrx-src, [data-state="bad"] .ebr-ebrx-src { opacity: 1; translate: 0 0; }
[data-state="bad"] .ebr-ebrx-src { color: var(--accent-danger); }
.ebr-ebrx-foot { flex: 0 0 auto; display: flex; align-items: center; padding: var(--sp-4); line-height: 21px; font-size: var(--fs-14); color: var(--foreground-muted); }
.ebr-shimmer {
  background: linear-gradient(100deg, var(--foreground-faint) 35%, var(--foreground-white) 50%, var(--foreground-faint) 65%) 0 0 / 250% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: ebr-shimmer 2.2s linear infinite;
}
@keyframes ebr-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ─────────── GENEALOGY GRAPH (684 × 601) ─────────── */
.ebr-gen { width: 684px; height: 601px; overflow: hidden; border-radius: 12px; --gx: 0%; --gy: 100%; }
/* Figma panel: #0E0E0E base + one radial glow. Its gradient handle is a large rotated ellipse (centre below the
   panel's bottom-left), so the gradient lives on a 1000px circle that is matrix-transformed into the panel.
   Figma fades to transparent black without premultiplying (the blue darkens as it fades); the extra stops reproduce that curve. */
.ebr-gen.ebr-radial { background: color-mix(in srgb, var(--surface-white) 5.5%, var(--black)); }
.ebr-gen::before {
  content: ""; position: absolute; left: 0; top: 0; width: 1000px; height: 1000px; transform-origin: 0 0;
  transform: matrix(2.2353, -2.9928, 2.9804, 5.5492, -2670.43, 7.61);
  background: radial-gradient(circle closest-side at 50% 50%,
    color-mix(in srgb, var(--mareana-secondary) 62%, var(--surface-white)) 23.8%,
    var(--mareana-primary) 31.2%,
    color-mix(in srgb, var(--mareana-primary) 76.6%, transparent) 34.0%,
    color-mix(in srgb, var(--mareana-primary) 56.2%, transparent) 36.8%,
    color-mix(in srgb, var(--mareana-primary) 39.1%, transparent) 39.6%,
    color-mix(in srgb, var(--mareana-primary) 25.0%, transparent) 42.4%,
    color-mix(in srgb, var(--mareana-primary) 14.1%, transparent) 45.2%,
    color-mix(in srgb, var(--mareana-primary) 6.2%, transparent) 48.0%,
    color-mix(in srgb, var(--mareana-primary) 1.6%, transparent) 50.8%,
    transparent 53.6%
  );
}
/* Rounded on the unscaled frame so the radius matches the neighbouring panel at every width. */
.ebr-scale--round { border-radius: var(--radius-2xl); }
.ebr-gen-title { position: absolute; left: 25px; top: 27px; }
.ebr-gen-title h5 { font-size: var(--fs-18); font-weight: 500; line-height: 31px; }
.ebr-gen-title p { font-size: var(--fs-14); line-height: 28px; color: var(--foreground-muted); margin-top: var(--sp-1) !important; }
.ebr-gen-foot { position: absolute; left: 19px; top: 554px; width: 640px; height: 28px; font-size: var(--fs-14); line-height: 28px; color: var(--foreground-muted); }
.gf { position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0; transition: opacity 0.5s var(--ease); }
.gf--idle { opacity: 1; }
.ebr-gen[data-phase] .gf--idle { opacity: 0; }
.ebr-gen[data-phase="idle"] .gf--idle, .ebr-gen[data-phase="up"] .gf--up, .ebr-gen[data-phase="down"] .gf--down { opacity: 1; }
.ebr-gen[data-phase="up"] .gf--up, .ebr-gen[data-phase="down"] .gf--down { color: var(--foreground-white); }

/* Trace highlight: solid connectors draw over the dim ones, nodes light up as the trace reaches them. */
.ebr-gen-lines .gl-hi path {
  stroke: var(--mareana-secondary); stroke-width: 1.75; stroke-linecap: round; opacity: 1;
  stroke-dasharray: 1 1; stroke-dashoffset: -1; transition: stroke-dashoffset 0.5s var(--ease);
}
.ebr-gen-lines .gl-up path, .ebr-gen-lines .gl-down path { stroke-dashoffset: 1; }   /* both drawn forward: start → end */
.ebr-gen-lines .gl-hi path.is-on { stroke-dashoffset: 0; }
.ebr-gen-lines .gl-up path.is-on, .ebr-gen-lines .gl-down path.is-on { stroke: var(--accent-danger); }
.ebr-gen-lines .gl-hi { transition: opacity 0.6s var(--ease); }
.ebr-gen.is-fade .gl-hi { opacity: 0; }
.ebr-gen.is-reset .gl-hi path, .ebr-gen.is-reset .ebr-node { transition: none; }
.ebr-node { transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease), background 0.4s var(--ease); }
.ebr-node.is-lit { border-color: var(--mareana-secondary); box-shadow: var(--glow-primary); }
.ebr-node.is-hit { border-color: var(--accent-danger); box-shadow: 0 0 24px color-mix(in srgb, var(--accent-danger) 40%, transparent); }
.ebr-node.is-hit small { color: var(--accent-danger); }
.ebr-gen.is-fade .ebr-node.is-lit, .ebr-gen.is-fade .ebr-node.is-hit { border-color: var(--on-dark-15); box-shadow: none; }
.ebr-node.is-pulse { animation: gen-ping 1.4s var(--ease) infinite; }
@keyframes gen-ping { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mareana-secondary) 60%, transparent); } to { box-shadow: 0 0 0 16px transparent; } }
.ebr-gen-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.ebr-gen-lines path { fill: none; stroke: var(--on-dark-50); stroke-width: 0.75; opacity: 0.6; }
.ebr-gen-lines .mn-flow-path { stroke: var(--mareana-secondary); stroke-width: 1; opacity: 1; }
.ebr-node {
  position: absolute; width: 148px; height: 40px; display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3) var(--sp-1) 6px; border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--black) 40%, transparent); border: 1px solid var(--on-dark-15);
  backdrop-filter: blur(2px);
}
.ebr-node--op { height: 44px; padding: 6px var(--sp-3); }
.ebr-node--sel { background: var(--mareana-primary); }
.ebr-node-ico { width: 28px; height: 28px; border-radius: var(--radius-sm); background: var(--bg-gradient-180); display: grid; place-items: center; font-size: 14px; flex-shrink: 0; }
.ebr-node b { display: block; font-size: var(--fs-10); font-weight: 600; line-height: 15px; }
.ebr-node small { display: block; font-size: var(--fs-10); line-height: 15px; color: var(--on-dark-70); margin-top: 2px; }

/* ─────────── FAQ (Figma variant) ─────────── */
.ebr-faq .accordion-item {
  background: var(--surface-white); border: 0.8px solid var(--mareana-border) !important;
  border-radius: var(--radius-2xl) !important; margin-bottom: var(--sp-4); overflow: hidden;
}
.ebr-faq .accordion-button {
  padding: var(--sp-6) var(--sp-6) var(--sp-6) var(--sp-6); background: transparent !important; box-shadow: none !important;
  font-family: inherit; font-size: var(--fs-18); font-weight: 500; line-height: 1.4; color: var(--foreground-primary);
  gap: var(--sp-6);
}
.ebr-faq .accordion-button::after {
  width: 24px; height: 24px; margin-left: auto; flex-shrink: 0;
  background: var(--foreground-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 24px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 24px no-repeat;
  transition: transform var(--dur-mid) var(--ease);
}
.ebr-faq .accordion-button:not(.collapsed)::after { transform: rotate(180deg); }
.ebr-faq .accordion-body {
  padding: 0 var(--sp-6) var(--sp-6); font-size: var(--fs-16); line-height: 1.8; color: var(--foreground-secondary);
}

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width: 1199.98px) {
  .ebr-ai-name { flex-basis: 45%; }
}

@media (max-width: 991.98px) {
  .ebr-hero { padding-top: 152px; }
  .ebr-hero .ebr-hero-title { font-size: var(--fs-32); letter-spacing: -1.2px; }
  .ebr-statement { font-size: var(--fs-32); letter-spacing: -1.2px; margin-bottom: var(--sp-10); }
  .ebr-split-head { margin-bottom: var(--sp-10); }
  .ebr-team-head { margin-bottom: var(--sp-10); }
  .ebr-faq-head { margin-bottom: var(--sp-10); }
  .ebr-team-card { min-height: 424px; }
  .ebr-ai-row { flex-direction: column; align-items: flex-start; gap: var(--sp-4); padding: var(--sp-6) 0; }
  .ebr-ai-name { flex-basis: auto; gap: var(--sp-5); }
  .ebr-ai-num, .ebr-ai-label { font-size: var(--fs-32); letter-spacing: -1.2px; }
  .ebr-ai-title { font-size: var(--fs-20); letter-spacing: -0.4px; }
  .ebr-ai-quote { font-size: var(--fs-24); letter-spacing: -0.8px; margin: var(--sp-12) auto; }
  .ebr-tablet { margin: 0 auto; } /* the section's shared subtitle → content gap already applies */
  .ebr-faq-cta { gap: var(--sp-6); }

  .ebr-demo-form-card { padding: var(--sp-10) var(--sp-6); }

  /* Tap targets ≥ 44px on touch layouts. */
  .ebr-step-btn { min-height: 44px; align-items: center; margin: calc(-1 * var(--sp-3)) 0; }
}

/* Small laptops (992–1199px): keep the desktop structure, tighten what the narrower columns make too tall. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .ebr-workflow-body { padding: var(--sp-5); }
  .ebr-workflow-title { font-size: var(--fs-20); }
  .ebr-workflow-intro { margin-bottom: var(--sp-5); }
  .ebr-team-card { min-height: 424px; padding: var(--sp-5); }
  .ebr-team-title { font-size: var(--fs-24); letter-spacing: -0.8px; }
  .ebr-team-desc { font-size: var(--fs-14); line-height: 1.9; }
  .ebr-team-mark { width: 96px; }
  .ebr-split-2--operator, .ebr-split-2--trace { grid-template-columns: 1fr 1fr; column-gap: var(--sp-8); }
  .ebr-list-panel { padding: var(--sp-6); }
  .ebr-list-item + .ebr-list-item { margin-top: var(--sp-5); padding-top: var(--sp-5); }
  .ebr-list-title { font-size: var(--fs-18); }
  .ebr-list-desc { font-size: var(--fs-14); line-height: 1.8; }
  .ebr-operator-copy .ebr-list-panel, .ebr-trace-copy .ebr-list-panel { margin-bottom: var(--sp-8); }
  .ebr-trace-copy .mn-subtitle { margin-bottom: var(--sp-8); font-size: var(--fs-14); line-height: 2; }
  .ebr-split-2--trace { align-items: center; }
  .ebr-check-card { padding: var(--sp-3) var(--sp-5); }
  .ebr-checks-list { gap: var(--sp-3); }
  .ebr-checks-inner .row { align-items: center; }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .ebr-team-card { height: 380px; min-height: 380px; padding: var(--sp-4); gap: var(--sp-4); }
  .ebr-team-title { font-size: var(--fs-24); letter-spacing: -0.8px; }
  .ebr-team-desc { font-size: var(--fs-14); line-height: 1.9; }
  .ebr-team-mark { width: 88px; }
}

@media (max-width: 767.98px) {
  .ebr-hero { padding-top: 144px; }
  .ebr-hero .ebr-hero-title { font-size: var(--fs-28); letter-spacing: -1px; }
  .ebr-hero-fade { height: 88px; }
  .ebr-title-sm { font-size: var(--fs-28); letter-spacing: -0.8px; }
  .ebr-statement { font-size: var(--fs-28); letter-spacing: -0.8px; }
  .ebr-workflow-body { padding: var(--sp-4); }
  .ebr-workflow-title { font-size: var(--fs-20); }
  .ebr-step-num, .ebr-step-title { font-size: var(--fs-16); line-height: 1.4; }
  .ebr-team-title { font-size: var(--fs-28); letter-spacing: -0.8px; }
  .ebr-team-desc { font-size: var(--fs-14); line-height: 1.9; }
  .ebr-ai-num, .ebr-ai-label { font-size: var(--fs-28); letter-spacing: -0.8px; }
  .ebr-ai-desc { font-size: var(--fs-14); }
  .ebr-ai-quote { font-size: var(--fs-20); }
  .ebr-list-panel { padding: var(--sp-6); }
  .ebr-list-title { font-size: var(--fs-18); }
  .ebr-list-desc { font-size: var(--fs-14); line-height: 1.9; }
  .ebr-check-card { padding: var(--sp-4) var(--sp-5); }
  .ebr-checks-shell, .ebr-checks-inner { padding: var(--sp-2); }
  .ebr-faq-cta { flex-direction: column; align-items: flex-start; padding: var(--sp-6) var(--sp-5); }

  .ebr-demo-card { padding: var(--sp-2); }
  .ebr-demo-copy { padding: var(--sp-6) var(--sp-4); } /* + 8px card padding = 24px, same as the page edge inset */
  .ebr-demo-form-card { padding: var(--sp-8) var(--sp-4); }
  .ebr-form-sub { margin-bottom: var(--sp-8); }

  /* Hero dashboard on phones: hide the sidebar and show only the working area (970px artboard, not 1201px). */
  .ebr-dash { width: 970px; }
  .ebr-dash .ebr-dash-side, .ebr-dash .ebr-dash-sideveil { display: none; }
  .ebr-dash .ebr-dash-main { padding-left: 7px; }
  .ebr-dash .ebr-dash-state { left: 0; }
  .ebr-dash .ebr-modal, .ebr-dash .ebr-esign { left: 50%; }
}

@media (max-width: 575.98px) {
  .ebr-hero-ctas { flex-direction: column; align-items: stretch; }
  .ebr-hero-ctas .btn-pill { width: 100%; justify-content: flex-end; box-sizing: border-box; }
  /* label centered across the whole button; arrow stays on the right */
  .ebr-hero-ctas .btn-text-inner { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); }
  .ebr-hero-ctas .btn-text-main, .ebr-hero-ctas .btn-text-hover { text-align: center; }
  .ebr-ai-name { gap: var(--sp-3); }
  .ebr-ai-num { min-width: 44px; }

  .ebr-team-card { min-height: 344px; }
  .ebr-team-card--light { min-height: 0; }

  /* ── Hero dashboard, phone version: same screens on a 560px artboard (≈2× larger text than 970px) ── */
  .ebr-dash { width: 560px; height: 580px; } /* phone artboard is narrower, so its content ends earlier: no dead space below */
  .ebr-hero-fade { height: 112px; }
  .ebr-hero::after { height: 424px; }
  .ebr-dash .ebr-dash-screen { border-radius: 26px; }
  .ebr-dash .ebr-form-bar, .ebr-dash .ebr-bt-head { padding: 0 var(--sp-4); }
  .ebr-dash .ebr-form-bar-sub, .ebr-dash .ebr-bt-sub, .ebr-dash .ebr-wf { display: none; }
  .ebr-dash .ebr-bt-table { padding-bottom: var(--sp-4); gap: var(--sp-4); }
  .ebr-dash .ebr-bt-table > :not(.ebr-bt-head) { margin-inline: var(--sp-4); }
  .ebr-dash .ebr-bt-stats { gap: var(--sp-2); }
  .ebr-dash .ebr-bt-stat { padding: var(--sp-3); }
  .ebr-dash .ebr-bt-row { grid-template-columns: 84px 1fr 104px; gap: var(--sp-2); padding: var(--sp-3); }
  .ebr-dash .ebr-bt-row > :nth-child(n+4) { display: none; }
  .ebr-dash .ebr-modal { width: 500px; }
  .ebr-dash .ebr-esign { left: 50%; width: 400px; }
  .ebr-dash .ebr-form-ws { padding: var(--sp-4); }
  .ebr-dash .ebr-form-ws--issue { grid-template-columns: 1fr; }
  .ebr-dash .ebr-issue-flow { display: none; }
  .ebr-dash .ebr-doc { width: 100%; padding: var(--sp-5); }
  .ebr-dash .ebr-idt-row { grid-template-columns: 150px 1fr; }
  .ebr-dash .ebr-doc--calc { padding: var(--sp-5) var(--sp-4); }
  .ebr-dash .ebr-ct-row { grid-template-columns: 62px repeat(5, 1fr); gap: 6px; }
  .ebr-dash .ebr-ct-cap em, .ebr-dash .ebr-ct-lock { display: none; }
  .ebr-dash .c-in, .ebr-dash .c-calc { padding: 0 6px; font-size: var(--fs-12); }
  .ebr-dash .ebr-sig3 { gap: var(--sp-3); }
  .ebr-dash .ebr-toast { top: 76px; }
  [data-scene="initiate"] .ebr-doc-head > span:nth-child(2) { display: none; }
  .ebr-dash .ebr-form-ws { position: relative; }
  .ebr-dash .ebr-form-ws--row { flex-direction: column; }
  .ebr-dash .ebr-doc--review { width: 100%; }
  .ebr-dash .ebr-drawer {
    position: absolute; left: var(--sp-4); right: var(--sp-4); bottom: var(--sp-4); width: auto; margin: 0;
    translate: 0 24px; padding: var(--sp-4);
  }
  .ebr-dash .ebr-drawer > * { min-width: 0; }
  [data-scene="review"][data-step="1"] .ebr-drawer { translate: 0 0; opacity: 1; }
  [data-scene="review"][data-step="2"] .ebr-drawer { width: auto; padding: var(--sp-4); border-width: 1px; margin: 0; opacity: 0; translate: 0 24px; }

  /* ── Other mockups ── */
  .ebr-ebrx { width: 420px; }
  .ebr-ebrx-head > i { display: none; }
  .ebr-ebrx-sub { font-size: var(--fs-12); line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ebr-ebrx-head > div { min-width: 0; }

  /* iPad, phone version: a narrower device that fits the column whole (no pencil, no sideways pan) */
  .ebr-ipad { width: 520px; }
  .ebr-ipad-body { width: 500px; padding: 18px 16px; }
  .ebr-ipad-screen { width: 100%; }
  .ebr-pencil { display: none; }
  .ebr-ipad-row { grid-template-columns: 1.05fr 0.95fr 1.2fr; }
  .ebr-ipad-row--head { font-size: var(--fs-12); }
  .ipv-st { font-size: 9px; }
  .ebr-ipad-row > * { padding: 0 var(--sp-2); }
  .ebr-ipad-val { margin: 0 var(--sp-1); padding: 10px var(--sp-2) !important; }
  .ebr-ipad-signs { gap: var(--sp-10); }
  .ebr-ebrx-src { font-size: var(--fs-11); white-space: nowrap; }
  .ebr-scale.is-pan { -webkit-mask-image: linear-gradient(90deg, var(--black) 88%, transparent); mask-image: linear-gradient(90deg, var(--black) 88%, transparent); }
  .ebr-scale.is-pan.is-end { -webkit-mask-image: none; mask-image: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Hero animation type: medium weight only (buttons stay regular). */
.ebr-dash * { font-weight: 500 !important; }
.ebr-dash .ebr-mbtn, .ebr-dash .ebr-mbtn * { font-weight: 400 !important; }

/* Hero animation: icons and accents are grey-toned, not brand blue. */
.ebr-dash .ebr-dash-doc-name i,
.ebr-dash .ebr-file-done,
.ebr-dash .ebr-steps-mini li i,
.ebr-dash .ebr-toast i,
.ebr-dash .ebr-mh-ico,
.ebr-dash .ebr-file-ico,
.ebr-dash .ebr-carry-tag,
.ebr-dash .ebr-status-b,
.ebr-dash .ebr-cval em { color: var(--foreground-secondary); }
.ebr-dash .ebr-mh-ico,
.ebr-dash .ebr-file-ico { background: var(--mock-hover); }
.ebr-dash .ebr-steps-mini .ebr-spin { border-color: var(--foreground-secondary); border-top-color: transparent; }
.ebr-dash [data-scene="initiate"][data-step] .ebr-lock { color: var(--foreground-secondary); }
.ebr-dash .ebr-opt.is-on { border-color: var(--ink); }
.ebr-dash .ebr-opt.is-on .ebr-radio { border-color: var(--ink); }

/* Hero progress strip: solid ink segments. */
.ebr-dash .ebr-seg > span { background: var(--ink); }
.ebr-dash .ebr-prog-label > :last-child { color: var(--ink); }

/* Batch record page fills the workspace width in every scene (the review page shares the row with its drawer). */
.ebr-dash .ebr-doc:not(.ebr-doc--review) { width: 100%; }

/* Border beam (Magic UI BorderBeam): a gradient comet that travels an element's border.
   The masked span shows only the 1.5px border ring; its ::before runs along a rounded-rect offset-path. */
.ebr-beam {
  --beam-size: 100px; --beam-width: 1.5px;
  position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none;
  border: var(--beam-width) solid transparent;
  -webkit-mask: linear-gradient(transparent, transparent), linear-gradient(var(--black), var(--black));
  -webkit-mask-clip: padding-box, border-box; -webkit-mask-composite: xor;
          mask: linear-gradient(transparent, transparent), linear-gradient(var(--black), var(--black));
          mask-clip: padding-box, border-box; mask-composite: intersect;
}
.ebr-beam::before {
  content: ""; position: absolute; aspect-ratio: 1; width: var(--beam-size);
  background: linear-gradient(to left, var(--mareana-secondary), var(--mareana-primary), transparent);
  offset-path: rect(0 auto auto 0 round var(--beam-round, var(--beam-size))); offset-distance: 0%;
  animation: ebr-beam 8s linear infinite;
}
@keyframes ebr-beam { to { offset-distance: 100%; } }
@media (prefers-reduced-motion: reduce) { .ebr-beam { display: none; } }

/* Genealogy nodes: the beam circles a node's border while the trace has it lit (blue) or hit (pink). */
.ebr-node > .ebr-beam { --beam-size: 44px; --beam-width: 1px; --beam-round: var(--radius-md); opacity: 0; transition: opacity 0.4s var(--ease); }
.ebr-node > .ebr-beam::before { animation-duration: 2.6s; }
.ebr-node.is-lit > .ebr-beam, .ebr-node.is-hit > .ebr-beam { opacity: 1; }
.ebr-node.is-hit > .ebr-beam::before { background: linear-gradient(to left, var(--accent-danger), transparent); }
.ebr-gen.is-fade .ebr-node > .ebr-beam { opacity: 0; }

/* Finished lots: the icon tile cross-fades from the brand gradient to danger with the border and glow. */
.ebr-node-ico { position: relative; }
.ebr-node-ico > i { position: relative; }
.ebr-node-ico::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0;
  background: linear-gradient(180deg, var(--accent-danger), color-mix(in srgb, var(--accent-danger) 60%, var(--surface-white)));
  transition: opacity 0.4s var(--ease);
}
.ebr-node.is-hit .ebr-node-ico::before { opacity: 1; }
.ebr-gen.is-reset .ebr-node-ico::before { transition: none; }

/* Active "reviewer" row: "02" and the label share ONE gradient (on their wrapper), so the light band sweeps across both together. */
.ebr-ai-row.is-active .ebr-ai-num,
.ebr-ai-row.is-active .ebr-ai-label { background: none; -webkit-text-fill-color: transparent; }
.ebr-ai-row.is-active .ebr-ai-name {
  background:
    linear-gradient(100deg, transparent 38%, color-mix(in srgb, var(--surface-white) 95%, transparent) 50%, transparent 62%) 100% 0 / 250% 100% no-repeat,
    var(--text-gradient-blue);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: ebr-ai-shimmer 2.6s linear infinite;
}
@keyframes ebr-ai-shimmer { to { background-position: -100% 0, 0 0; } }

/* Waitlist modal: the same white form card as the demo section, floating over a dark scrim. */
.ebr-wl-modal .modal-dialog { max-width: 624px; padding: 0 var(--sp-4); }
.ebr-wl-modal .modal-content { background: transparent; border: 0; border-radius: var(--radius-lg); }
.ebr-wl-modal .modal-backdrop, .modal-backdrop { --bs-backdrop-bg: var(--ink); --bs-backdrop-opacity: 0.6; }
/* The fixed navbar sits at z-index 9999, so the modal and its scrim must sit above it. */
.modal-backdrop { z-index: 10040; }
.ebr-wl-modal { z-index: 10050; }
/* Phones: the scrim must always cover the full (large) viewport, even while the on-screen keyboard is open or the browser
   toolbar collapses mid-scroll, and the modal scrolls on its own with room under the form for the keyboard. */
.modal-backdrop { position: fixed; inset: 0; width: 100%; height: 100%; min-height: 100lvh; }
.ebr-wl-modal { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
@media (max-width: 575.98px) {
  .ebr-wl-modal .modal-dialog { margin: var(--sp-4) auto; padding-bottom: 40vh; }
}
.ebr-wl-card { position: relative; height: auto; padding: var(--sp-14) var(--sp-8) var(--sp-10); box-shadow: var(--shadow-card); }
.ebr-wl-card .ebr-form-sub { margin-bottom: var(--sp-10); }
.ebr-wl-close {
  position: absolute; top: var(--sp-4); right: var(--sp-4); width: 36px; height: 36px; display: grid; place-items: center;
  border: 1px solid var(--mareana-border); border-radius: var(--radius-circle); background: var(--surface-light);
  color: var(--foreground-secondary); font-size: 12px; cursor: pointer; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.ebr-wl-close:hover { background: var(--surface-hover); color: var(--foreground-primary); }
@media (max-width: 575.98px) { .ebr-wl-card { padding: var(--sp-12) var(--sp-5) var(--sp-8); } }

/* ───────── Hero scene: paper batch record → EBR (same page, input fields added) → approver flow.
   Lives in the dashboard's main content area (right of the document list). ───────── */
.ebr-dash .pv { display:flex; flex-direction:column; background:var(--surface-light,#F8F8F8); font-family:'Poppins',sans-serif; color:#1A181B;
  --pv-blue:var(--mareana-primary,#4361EE); --pv-green:#16A34A; --pv-line:#E7E7E7; --pv-mute:#6B7280; }
.pv-top { flex:none; height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 20px; background:#fff; border-bottom:1px solid var(--pv-line); }
.pv-top { position:relative; }
.pv-title { display:flex; align-items:center; justify-content:flex-start; gap:8px; font-size:14px; font-weight:500; white-space:nowrap; }
.pv-pill { margin-left:auto; } .pv-title i { color:#1A181B; font-size:16px; }
.pv-pill { display:inline-flex; align-items:center; gap:8px; font-size:12px; padding:4px 12px; border-radius:999px; background:#EDEDED; color:#1A181B; transition:background .3s,color .3s; }
.pv-pill b { font-weight:500; }
.pv[data-step="1"] .pv-pill i { animation:pvspin 1s linear infinite; } @keyframes pvspin { to { transform:rotate(360deg); } }
.pv.is-approved .pv-pill { background:#E7F8EE; color:var(--pv-green); }
.pv-steps { flex:none; display:flex; gap:8px; margin:0; padding:12px 20px; list-style:none; background:#fff; border-bottom:1px solid var(--pv-line); }
.pv-steps li { flex:1; display:flex; align-items:center; gap:8px; font-size:12px; color:#9AA0AE; transition:color .3s; }
.pv-steps li span { flex:none; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:600; background:#EBEBEB; transition:background .3s,color .3s; }
.pv-steps li.is-active { color:#1A181B; font-weight:500; } .pv-steps li.is-active span { background:#1A181B; color:#fff; }
.pv-steps li.is-done { color:#1A181B; } .pv-steps li.is-done span { background:#8A8A8A; color:#fff; font-size:0; } .pv-steps li.is-done span::after { content:'\f26e'; font-family:'bootstrap-icons'; font-size:12px; line-height:1; }  /* bi-check-lg: icon font instead of a text glyph, so it always renders */

.pv-body { flex:none; display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:16px; }
.pv-card { display:flex; flex-direction:column; background:#fff; border:1px solid var(--pv-line); border-radius:16px; box-shadow:0 2px 10px rgba(30,40,90,.05); overflow:hidden; }
.pv-card > header { flex:none; height:44px; display:flex; align-items:center; justify-content:space-between; padding:0 12px; border-bottom:1px solid var(--pv-line); font-size:12px; }
.pv-card > header > b { font-weight:600; }
.pv-view { padding:12px; background:#F8F8F8; }
.pv-file { display:inline-flex; align-items:center; gap:4px; font-size:12px; color:var(--pv-mute); opacity:0; transition:opacity .4s; } .pv-file > i { color:#E5484D; font-size:14px; }
.pv.is-drop .pv-file { opacity:1; }
.pv-badge { display:inline-flex; align-items:center; gap:8px; font-size:12px; padding:4px 12px; border-radius:999px; background:#FFF5E0; color:#B7791F; transition:background .3s,color .3s; }
.pv-badge i { font-size:8px; } .pv-badge b { font-weight:500; }
.pv[data-step="3"] .pv-badge { background:#EDEDED; color:#1A181B; } .pv.is-approved .pv-badge { background:#E7F8EE; color:var(--pv-green); }

/* the page — both panes use the same 1083×1453 sheet so fields land in the same places */
.pv-sheet { position:relative; width:100%; aspect-ratio:1083/1453; overflow:hidden; background:#fff; border-radius:4px; box-shadow:0 10px 26px rgba(30,40,90,.14); }
.pv-sheet img { display:block; width:100%; height:100%; user-select:none; }
.pv-sheet:not(.pv-sheet--ebr) { opacity:0; transform:translateY(-30px) rotate(-2deg); filter:grayscale(.5) sepia(.15);
  transition:transform .9s cubic-bezier(.2,.8,.2,1), opacity .5s, filter .8s; }
.pv.is-drop .pv-sheet:not(.pv-sheet--ebr) { opacity:1; transform:none; } .pv.is-convert .pv-sheet:not(.pv-sheet--ebr) { filter:none; }
.pv-scan { position:absolute; left:0; right:0; top:-88px; height:88px; opacity:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(26,24,27,0),rgba(26,24,27,.10) 85%,rgba(26,24,27,.42)); }
.pv[data-step="1"] .pv-scan { animation:pvscan 2.3s linear forwards; }
@keyframes pvscan { 0% { opacity:1; top:-90px; } 92% { opacity:1; } 100% { opacity:0; top:100%; } }
/* EBR replica of the paper form (drawn at paper size, scaled to the pane) */
.pv-empty { position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:12px; font-size:12px; font-weight:500;
  background:#fff; border:2px dashed #D2D2D2; border-radius:8px; overflow:hidden; transition:opacity .4s;
  color:transparent; background-image:linear-gradient(100deg,#A9A9A9 30%,#1A181B 50%,#A9A9A9 70%); background-size:250% 100%; background-clip:text; -webkit-background-clip:text;
  animation:pvtext 1.8s linear infinite; }
/* shimmer sweep across the whole placeholder */
.pv-empty::after { content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(0,0,0,.06) 50%,transparent 65%); background-size:250% 100%; animation:pvshimmer 1.8s linear infinite; }
.pv-empty i { font-size:28px; color:#BDBDBD; -webkit-text-fill-color:#BDBDBD; }
@keyframes pvshimmer { from { background-position:150% 0; } to { background-position:-150% 0; } }
@keyframes pvtext { from { background-position:150% 0; } to { background-position:-150% 0; } }
.pv.is-convert .pv-empty { opacity:0; pointer-events:none; }
.pf { position:absolute; left:0; top:0; width:1083px; height:1453px; transform:scale(var(--k,.3)); transform-origin:0 0; font-family:Arial,Helvetica,sans-serif; color:#111; }
.pf-t { position:absolute; margin:0; font-size:25px; font-weight:700; opacity:0; transition:opacity .4s; } .pv.is-convert .pf-t { opacity:1; transition-delay:.9s; }
.pf-c { position:absolute; box-sizing:border-box; border:1.5px solid #111; display:flex; align-items:center; padding:0 12px; font-size:18.5px; line-height:1.2; opacity:0; transition:opacity .35s; }
.pv.is-convert .pf-c { opacity:1; transition-delay:calc(var(--d)*2s); }
.pf-c.hd { gap:8px; padding:0 8px; font-size:17px; white-space:nowrap; } .pf-c .pf-v { position:absolute; } .pf-c.pval { font-size:19px; }
.pf-c.c { justify-content:center; text-align:center; } .pf-c.r { justify-content:flex-end; text-align:right; padding-right:14px; }
.pf-c.h { justify-content:center; font-weight:500; font-size:20px; background:#F0F0F0; } .pf-c.s { font-size:18px; line-height:1.28; }
.pf-f { position:absolute; box-sizing:border-box; display:flex; align-items:center; padding:0 10px; border:2px dashed #BDBDBD; border-radius:7px; background:#F6F6F6; z-index:1;
  opacity:0; transition:opacity .35s, border-color .4s, background .4s; }
.pv.is-convert .pf-f { opacity:1; transition-delay:calc(var(--d)*2s + .15s); }
.pf-f em { font-style:normal; font-family:'Poppins',sans-serif; font-weight:500; font-size:24px; white-space:nowrap; opacity:0; transform:translateY(4px); transition:opacity .4s, transform .4s; }
.pv.is-fields .pf-f { border:2px solid var(--pv-blue); background:#F4F5FA; }
.pv.is-fields .pf-f em { opacity:1; transform:none; transition-delay:calc(var(--i)*.1s + .15s); }
.pv.is-review .pf-f { border-color:#3FB56B; background:#F3FBF6; }

/* approver flow */
.pv-foot { flex:none; display:flex; align-items:center; gap:12px; padding:12px 16px 16px; background:#fff; border-top:1px solid var(--pv-line); }
.pv-appr { flex:1; display:flex; align-items:center; margin:0; padding:0; list-style:none; opacity:0; transform:translateY(6px); transition:opacity .4s .3s, transform .4s .3s; }
.pv.is-review .pv-appr { opacity:1; transform:none; }
.pv-a { position:relative; display:flex; align-items:center; gap:8px; padding:4px 12px 4px 4px; border:1px solid var(--pv-line); border-radius:999px; background:#fff; transition:border-color .4s, background .4s; }
.pv-a + .pv-a { margin-left:16px; }
.pv-a + .pv-a::before { content:''; position:absolute; left:-16px; top:50%; width:16px; height:2px; background:var(--pv-line); transition:background .4s; }
.pv-av { width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:600; background:#EBEBEB; color:#6B7280; transition:background .4s,color .4s; }
.pv-a > div { display:flex; flex-direction:column; line-height:1.2; } .pv-a b { font-size:12px; font-weight:600; white-space:nowrap; } .pv-a small { font-size:12px; color:var(--pv-mute); }
.pv-a .s-d { display:none; } .pv-a > i { color:var(--pv-green); font-size:14px; opacity:0; width:0; transform:scale(.4); transition:opacity .3s, transform .3s cubic-bezier(.3,1.6,.5,1); }
.pv.is-a1 .pv-a { border-color:#BFE8CE; background:#F3FBF6; }
.pv.is-a1 .pv-a .pv-av { background:var(--pv-green); color:#fff; }
.pv.is-a1 .pv-a .s-p { display:none; }
.pv.is-a1 .pv-a .s-d { display:block; }
.pv.is-a1 .pv-a > i { opacity:1; width:auto; transform:none; }
.pv-send { flex:none; display:inline-flex; align-items:center; gap:8px; padding:12px 16px; border-radius:12px; background:var(--pv-blue); color:#fff; font-size:12px; font-weight:500;
  transition:background .3s; margin-left:auto; }
.pv-send b { font-weight:500; white-space:nowrap; } .pv-send .b2, .pv-send .b3 { display:none; }
.pv.is-review .pv-send { background:#8EA0F5; } .pv.is-review .pv-send .b1, .pv.is-approved .pv-send .b1 { display:none; } .pv.is-review .pv-send .b2 { display:inline; }
.pv.is-approved .pv-send { background:var(--pv-blue); } .pv.is-approved .pv-send .b2 { display:none; } .pv.is-approved .pv-send .b3 { display:inline; }
@media (prefers-reduced-motion:reduce) { .pv, .pv * { transition:none !important; animation:none !important; } }

/* Last stage: Approve button replaces the Draft badge, then the supervisor e-signs with a password */
.pv-appbtn { display:none; align-items:center; gap:8px; padding:4px 16px; border-radius:8px; background:var(--pv-blue); color:#fff; font-size:12px; font-weight:500; }
.pv.is-review:not(.is-approved) .pv-appbtn { display:inline-flex; }
.pv.is-review:not(.is-approved) .pv-badge { display:none; }
.pv-sign { position:absolute; inset:0; z-index:10; display:flex; align-items:center; justify-content:center; padding-bottom:112px; border-radius:inherit;
  font-family:'Poppins',sans-serif; color:#1A181B; --pv-mute:#6B7280; --pv-blue:var(--mareana-primary,#4361EE);
  background:rgba(0,0,0,.55); opacity:0; pointer-events:none; transition:opacity .3s; }
.pv-sign.is-sign { opacity:1; }
.pv-signcard { width:400px; box-sizing:border-box; padding:24px; background:#fff; border:1px solid #E7E7E7; border-radius:24px; transform:translateY(12px) scale(.97); transition:transform .35s cubic-bezier(.2,.8,.2,1); }
.pv-sign.is-sign .pv-signcard { transform:none; }
.pv-signhead { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.pv-signicon { width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:#F1F1F1; color:#1A181B; font-size:18px; }
.pv-signt { margin:0; font-size:16px; font-weight:600; line-height:1.2; } .pv-signs { margin:2px 0 0; font-size:12px; color:var(--pv-mute); }
.pv-signx { margin-left:auto; color:#9A9A9A; font-size:12px; }
.pv-signdoc { display:flex; align-items:center; gap:12px; padding:12px 12px; margin-bottom:16px; background:#F8F8F8; border:1px solid #EDEDED; border-radius:12px; }
.pv-signdoc > i { font-size:20px; color:#6B7280; } .pv-signdoc div { line-height:1.25; } .pv-signdoc b { display:block; font-size:12px; font-weight:600; } .pv-signdoc small { font-size:12px; color:var(--pv-mute); }
.pv-signdoc > span { margin-left:auto; font-size:12px; font-weight:500; padding:4px 12px; border-radius:999px; background:#EBEBEB; }
.pv-signl { display:block; margin:0 0 8px; font-size:12px; font-weight:500; }
.pv-sigbox { position:relative; height:88px; margin-bottom:16px; border:1px solid #E0E0E0; border-radius:16px; background:#FBFBFB; display:grid; place-items:center; }
.pv-sigbox::after { content:''; position:absolute; left:16px; right:16px; bottom:20px; border-bottom:1px dashed #CFCFCF; }
.pv-sighint { position:absolute; left:16px; bottom:24px; font-size:12px; color:#B0B0B0; transition:opacity .3s; } .pv-sign.is-sig .pv-sighint { opacity:0; }
.pv-sigbox svg { position:relative; z-index:1; width:168px; height:52px; margin-top:-8px; }
.pv-sigpath { fill:none; stroke:#1A181B; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1; }
.pv-sign.is-sig .pv-sigtxt { animation:pvsig 1.1s cubic-bezier(.4,0,.2,1) forwards; }
.pv-sigbox .pv-sigflick { position:absolute; left:50%; top:auto; bottom:20px; width:112px; height:16px; margin:0 0 0 -52px; z-index:1; }
.pv-sigflick path { fill:none; stroke:#1B2A5E; stroke-width:1.6; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; }
.pv-sign.is-sig .pv-sigflick path { animation:pvsigfl .5s ease-out 1.05s forwards; }
@keyframes pvsigfl { to { stroke-dashoffset:0; } }
@keyframes pvsig { to { clip-path:inset(0 0 0 0); } }
.pv-pw { display:flex; align-items:center; gap:12px; height:44px; padding:0 16px; margin-bottom:12px; border:1px solid #E0E0E0; border-radius:999px; background:#fff; font-size:14px; }
.pv-pw i { color:var(--pv-mute); } .pv-eye { margin-left:auto; }
.pv-dots { letter-spacing:3px; clip-path:inset(0 100% 0 0); }
.pv-sign.is-pw .pv-dots { animation:pvtype 1.2s steps(8) forwards; }
@keyframes pvtype { to { clip-path:inset(0 0 0 0); } }
.pv-signnote { margin:0 0 20px; font-size:12px; line-height:1.5; color:var(--pv-mute); }
.pv-signrow { display:flex; justify-content:flex-end; gap:12px; }
.pv-signcancel { padding:12px 20px; border:1px solid #E0E0E0; border-radius:999px; font-size:12px; font-weight:500; }
/* Buttons in the hero animation: rounded, primary gradient, no shadow */
.pv-appbtn, .pv-signbtn, .ebr-dash .ebr-bt-head .ebr-mbtn { border-radius:999px; background:var(--bg-gradient,linear-gradient(225deg,#4361EE,#8EA0F5)); color:#fff; box-shadow:none; }
.pv-signbtn { display:inline-flex; align-items:center; gap:8px; padding:12px 24px; font-size:12px; font-weight:500; }
.pv-appbtn { padding:8px 16px; }
.pv-sigtxt { position:relative; z-index:1; font-family:'Momo Signature','Segoe Script','Snell Roundhand','Brush Script MT',cursive; font-size:28px; font-weight:400; font-synthesis:none; line-height:1; color:#1B2A5E; transform:rotate(-5deg) translateY(-2px); padding:0 8px; clip-path:inset(0 100% 0 0); }

/* Approver chip lives in the top bar (keeps the dashboard bottom free for the white fade) */
.pv-topr { display:flex; align-items:center; gap:12px; }
.pv-topr .pv-appr { flex:none; transition-delay:0s; }
.pv-topr .pv-a { padding:4px 12px 4px 4px; } .pv-topr .pv-av { width:24px; height:24px; }

/* Conversion workflow section (stacked layout): image on top, step list below it */
@media (max-width: 991.98px) {
  /* Operator adoption: tablet interaction on top, copy below it */
  .ebr-split-2--operator > .ebr-operator-visual { order: -1; }
  /* Demo block (stacked) */
  .ebr-demo-copy { gap: 0; } /* title → description = the title's own 16px margin, same as every other section */
  /* Trace any batch (stacked): title + subtitle, then the graph, then the list and button.
     The copy column is flattened (display: contents) so its children can be ordered around the graph. */
  .ebr-split-2--trace > .ebr-trace-copy { display: contents; }
  .ebr-split-2--trace > .ebr-trace-copy > * { width: 100%; box-sizing: border-box; padding-inline: calc(var(--bs-gutter-x, 1.5rem) * .5); }
  .ebr-split-2--trace > .ebr-trace-visual { order: 1; margin-top: 0; margin-bottom: var(--sp-8); }
  /* The panel has its own background, so it gets an outer margin (not the gutter padding) to keep it inside the container edges. */
  .ebr-split-2--trace > .ebr-trace-copy > .ebr-list-panel { order: 2; width: calc(100% - var(--bs-gutter-x, 1.5rem)); margin-inline: calc(var(--bs-gutter-x, 1.5rem) * .5); padding: var(--sp-6); }
  .ebr-split-2--trace > .ebr-trace-copy > .btn-pill { order: 3; width: auto; margin-left: calc(var(--bs-gutter-x, 1.5rem) * .5); padding-inline: 0 8px; padding-left: var(--sp-5); }
}

/* Consistent horizontal edges: hero text + dashboard line up with every other section's container padding
   (24px below 992px, 40px 992–1199px, 80px from 1200px). */
.ebr-hero .ebr-hero-inner { padding-inline: var(--sp-6); }
@media (max-width: 991.98px) {
  .ebr-hero .ebr-hero-chat { padding-inline: var(--sp-6); }
  /* Trace any batch (stacked): flattened copy column keeps the same top offset and gaps as the other split sections */
  .ebr-split-2--trace > .ebr-trace-copy > .mn-title { margin-top: var(--bs-gutter-y, 3rem); }
  /* subtitle → graph = 40px, same as every other section's subtitle → content gap */
  .ebr-split-2--trace > .ebr-trace-copy > .mn-subtitle { margin-bottom: 0; }
  .ebr-split-2--trace > .ebr-trace-visual { margin-top: var(--sp-10); margin-bottom: var(--sp-8); }
}

/* Where AI operates — phone/tablet: clear hierarchy (actor → what it does → why), tighter rows, smaller glow */
@media (max-width: 767.98px) {
  .ebr-ai-row { gap: var(--sp-2); padding: var(--sp-5) 0; }
  .ebr-ai-name { gap: var(--sp-3); }
  .ebr-ai-num, .ebr-ai-label { font-size: var(--fs-20); letter-spacing: -0.5px; }
  .ebr-ai-num { min-width: 36px; }
  .ebr-ai-title { font-size: var(--fs-18); letter-spacing: -0.2px; margin-bottom: 8px; }
  .ebr-ai-desc { font-size: var(--fs-14); line-height: 1.7; }
  .ebr-ai-quote { font-size: var(--fs-18); line-height: 1.6; letter-spacing: -0.3px; margin: var(--sp-10) auto; }
  .ebr-ai-glow { width: 520px; height: 464px; right: -328px; top: -304px; filter: blur(90px); }
  .ebr-ai-glow-core { width: 224px; height: 192px; right: -160px; top: -168px; filter: blur(70px); }
}

/* Phones: section CTAs (Learn More / Book a Demo / See Mareana in Action) are centered. The FAQ "need more info" CTA is left as is. */
@media (max-width: 575.98px) {
  .btn-pill.ebr-cta-center { display: flex; width: fit-content; margin-inline: auto; align-self: center; }
  .ebr-split-2--trace > .ebr-trace-copy > .btn-pill.ebr-cta-center { margin-inline: auto; }
}

/* "We convert it" card: smaller Mareana mark on phones */
@media (max-width: 575.98px) {
  .ebr-team-mark { width: 56px; }
}

/* Very small phones (≤ 359px, e.g. 320px): scale type and spacing down so nothing looks oversized.
   Gaps stay constant across sections (32px below every subtitle, 16px title → subtitle). */
@media (max-width: 359.98px) {
  .mn-section { padding: 40px 0; }
  .ebr-hero { padding-top: 124px; }
  .ebr-hero .ebr-hero-title { font-size: 24px; letter-spacing: -1px; }
  .ebr-hero .ebr-hero-subtitle { font-size: 14px; line-height: 1.9; }
  .ebr-title-sm, .ebr-team-title, .ebr-demo-copy .mn-title { font-size: 20px; line-height: 1.3; letter-spacing: -0.6px; }
  .ebr-statement { font-size: 20px; line-height: 1.7; letter-spacing: -0.6px; margin-bottom: var(--sp-8); }
  .mn-subtitle, .ebr-demo-desc, .ebr-team-desc, .ebr-list-desc, .ebr-ai-desc { font-size: 14px; line-height: 1.7; }
  .ebr-split-head, .ebr-team-head, .ebr-faq-head { margin-bottom: var(--sp-8); }
  .ebr-split-2--trace > .ebr-trace-visual { margin-top: var(--sp-8); }
  .ebr-ai-num, .ebr-ai-label { font-size: 18px; letter-spacing: -0.3px; }
  .ebr-ai-num { min-width: 28px; }
  .ebr-ai-title, .ebr-list-title { font-size: 16px; }
  .ebr-ai-quote { font-size: 16px; margin: var(--sp-8) auto; }
  .ebr-workflow-title { font-size: 18px; }
  .ebr-faq .accordion-button { font-size: 15px; padding: var(--sp-5); gap: var(--sp-4); }
  .ebr-faq .accordion-body { font-size: 13px; }
  .btn-pill { font-size: 14px; }
  .ebr-form-title { font-size: 20px; }
  /* side padding 24px → 16px: more room for content; every edge (hero, cards, row gutters) follows the same 16px */
  .ebr-container { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .ebr-hero .ebr-hero-inner, .ebr-hero .ebr-hero-chat { padding-inline: var(--sp-4); }
  .row.g-5 { --bs-gutter-x: 2rem; }
}

/* The form subtitle bleeds out of the card padding on desktop; on phones the card padding is smaller than that bleed, so keep it inside. */
@media (max-width: 575.98px) {
  .ebr-form-sub { margin-left: 0; margin-right: 0; }
}

/* Phones: "What your team does" cards use 16px padding */
@media (max-width: 767.98px) {
  .ebr-team-card { padding: var(--sp-4); }
}

/* Hero animation file chip: short name on phones, where the artboard is scaled down and the full name wraps */
.pv-fn-short { display: none; }
@media (max-width: 575.98px) {
  .pv-fn-full { display: none; }
  .pv-fn-short { display: inline; }
}

/* Selected unit operation: when the trace reaches it, the background turns red and the text stays white */
.ebr-node--sel { transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease), background 0.4s var(--ease); }
.ebr-node--sel.is-hit { background: var(--accent-danger); border-color: var(--accent-danger); }
.ebr-node--sel.is-hit small { color: var(--foreground-white); }
.ebr-gen.is-fade .ebr-node--sel.is-hit { background: var(--mareana-primary); }

/* Hero scene: explicit line-heights on the 4px grid so chips/buttons land on 4/8px heights (16px for 12px text, 20px for button labels). */
.pv-pill, .pv-badge, .pv-appbtn, .pv-signdoc > span { line-height: 16px; }
.pv-signcancel, .pv-signbtn, .pv-send, .pv-title, .pv-card > header, .pv-steps li { line-height: 20px; }

/* Statement section: text and button centered on every device */
.ebr-statement--center { text-align: center; }
.ebr-statement--center + .btn-pill { display: flex; width: fit-content; margin-inline: auto; }

/* HubSpot form (Book a Demo + Waitlist popup) - styled to match the built-in .ebr-form-* look
   on the white .ebr-demo-form-card. Shown only when Portal ID + Form ID are set on the
   Options Page; otherwise the built-in form is used. */
.ebr-demo-form--hubspot .ebr-hs-embed { margin-top: var(--sp-8); }
.ebr-demo-form--hubspot form.hs-form { margin: 0; font-family: inherit; }
.ebr-demo-form--hubspot form.hs-form fieldset { max-width: 100% !important; margin: 0; padding: 0; border: 0; }
.ebr-demo-form--hubspot form.hs-form .hs-form-field { margin-bottom: var(--sp-6); }
.ebr-demo-form--hubspot form.hs-form .hs-form-field .input { margin: 0 !important; }
.ebr-demo-form--hubspot form.hs-form fieldset.form-columns-2 { display: flex; gap: var(--sp-4); }
.ebr-demo-form--hubspot form.hs-form fieldset.form-columns-2 .hs-form-field { flex: 1 1 0; width: auto !important; float: none !important; }
.ebr-demo-form--hubspot form.hs-form fieldset.form-columns-2 .hs-form-field .input { margin-right: 0 !important; }

.ebr-demo-form--hubspot form.hs-form .hs-form-field > label {
  display: block; margin: 0 0 var(--sp-3);
  font-size: var(--fs-14); font-weight: 400; line-height: 1; color: var(--black);
}
.ebr-demo-form--hubspot form.hs-form .hs-form-required { color: var(--accent-danger); margin-left: 4px; }
.ebr-demo-form--hubspot form.hs-form .hs-field-desc { display: none; }

.ebr-demo-form--hubspot form.hs-form .hs-input:not([type="checkbox"]):not([type="radio"]) {
  display: block; box-sizing: border-box; width: 100% !important; height: 52px; margin: 0;
  padding: 0 var(--sp-4);
  border: 1px solid var(--mareana-border); border-radius: var(--radius-pill);
  background: var(--surface-light); box-shadow: none;
  font-family: inherit; font-size: var(--fs-16); line-height: normal; color: var(--foreground-primary);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease);
}
.ebr-demo-form--hubspot form.hs-form textarea.hs-input { height: auto; min-height: 120px; padding: var(--sp-4); border-radius: 20px; resize: vertical; }
.ebr-demo-form--hubspot form.hs-form select.hs-input { cursor: pointer; }
.ebr-demo-form--hubspot form.hs-form .hs-input:focus { border-color: var(--mareana-primary); box-shadow: none; outline: none; }
.ebr-demo-form--hubspot form.hs-form .hs-input.error:not([type="checkbox"]):not([type="radio"]),
.ebr-demo-form--hubspot form.hs-form .hs-input.invalid:not([type="checkbox"]):not([type="radio"]) { border-color: var(--accent-danger); }
.ebr-demo-form--hubspot form.hs-form .hs-input:-webkit-autofill,
.ebr-demo-form--hubspot form.hs-form .hs-input:-webkit-autofill:hover,
.ebr-demo-form--hubspot form.hs-form .hs-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--surface-light) inset !important;
          box-shadow: 0 0 0 1000px var(--surface-light) inset !important;
  -webkit-text-fill-color: var(--foreground-primary); caret-color: var(--foreground-primary);
}

.ebr-demo-form--hubspot form.hs-form .inputs-list { list-style: none; margin: 0; padding: 0; }
.ebr-demo-form--hubspot form.hs-form .hs-form-booleancheckbox-display,
.ebr-demo-form--hubspot form.hs-form .hs-form-checkbox-display {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: var(--fs-12); line-height: 1.7; color: var(--foreground-secondary);
}
.ebr-demo-form--hubspot form.hs-form .hs-form-booleancheckbox-display input,
.ebr-demo-form--hubspot form.hs-form .hs-form-checkbox-display input { width: auto !important; height: auto; margin-top: 4px; }

.ebr-demo-form--hubspot form.hs-form .hs-richtext,
.ebr-demo-form--hubspot form.hs-form .legal-consent-container {
  font-size: var(--fs-12); line-height: 2; color: var(--foreground-secondary); text-align: center;
}
.ebr-demo-form--hubspot form.hs-form .hs-richtext a,
.ebr-demo-form--hubspot form.hs-form .legal-consent-container a { color: var(--mareana-primary); font-weight: 600; text-decoration: none; }

.ebr-demo-form--hubspot form.hs-form .hs-error-msgs { list-style: none; margin: 6px 0 0; padding: 0; }
.ebr-demo-form--hubspot form.hs-form .hs-error-msgs label,
.ebr-demo-form--hubspot form.hs-form .hs-error-msg { font-size: var(--fs-12); color: var(--accent-danger); margin: 0; }

.ebr-demo-form--hubspot form.hs-form .hs_submit { margin: var(--sp-6) 0 0; }
.ebr-demo-form--hubspot form.hs-form .hs_submit .actions { margin: 0; padding: 0; }
.ebr-demo-form--hubspot form.hs-form .hs-button,
.ebr-demo-form--hubspot form.hs-form input[type="submit"] {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 56px; padding: 0 var(--sp-6);
  border: 0; border-radius: var(--radius-pill); background: var(--bg-gradient); box-shadow: none;
  font-family: inherit; font-size: var(--fs-14); font-weight: 500; line-height: 1; color: var(--foreground-white);
  text-shadow: none; cursor: pointer; transition: opacity var(--dur-base) var(--ease);
}
.ebr-demo-form--hubspot form.hs-form .hs-button:hover,
.ebr-demo-form--hubspot form.hs-form input[type="submit"]:hover { opacity: 0.88; background: var(--bg-gradient); }

.ebr-demo-form--hubspot .submitted-message { padding: var(--sp-6) 0; text-align: center; font-size: var(--fs-16); color: var(--foreground-primary); }

@media (max-width: 575.98px) {
  .ebr-demo-form--hubspot form.hs-form fieldset.form-columns-2 { flex-direction: column; gap: 0; }
}

.hs_error_rollup{
  text-align: center;
  width: 100%;
}
/* HubSpot: First Name + Last Name in two columns */
.ebr-demo-form--hubspot form.hs-form {
  display: flex;
  flex-wrap: wrap;
  column-gap: 16px;
}

/* First Name */
.ebr-demo-form--hubspot form.hs-form > .hs-firstname {
  flex: 0 0 calc(50% - 8px);
  width: calc(50% - 8px) !important;
  max-width: calc(50% - 8px);
  float: none !important;
}

/* Last Name */
.ebr-demo-form--hubspot form.hs-form > .hs-lastname {
  flex: 0 0 calc(50% - 8px);
  width: calc(50% - 8px) !important;
  max-width: calc(50% - 8px);
  float: none !important;
}

/* Email and all other fields remain full width */
.ebr-demo-form--hubspot form.hs-form > .hs-email,
.ebr-demo-form--hubspot form.hs-form > .legal-consent-container,
.ebr-demo-form--hubspot form.hs-form > .hs_submit {
  flex: 0 0 100%;
  width: 100% !important;
  max-width: 100%;
}

/* Mobile */
@media (max-width: 575.98px) {
  .ebr-demo-form--hubspot form.hs-form > .hs-firstname,
  .ebr-demo-form--hubspot form.hs-form > .hs-lastname {
    flex: 0 0 100%;
    width: 100% !important;
    max-width: 100%;
  }
}
@media (max-width: 1024px){
	.ebr-ai-details{
		margin-top: 20px;
	}
}