:root {
  /* === U.S. TREASURY / USAGOV PALETTE — deep navy + flag red, no yellow === */
  --ps-ink: #1a202c;
  --ps-ink-2: #1a202c;
  --ps-text: #1a202c;
  --ps-text-2: #4a5568;
  --ps-ink-soft: #4a5568;
  --ps-muted: #718096;
  --ps-muted-2: #a9aeb1;
  --ps-line: #dfe1e2;
  --ps-line-2: #a9aeb1;
  --ps-border: #dfe1e2;
  --ps-border-2: #a9aeb1;
  --ps-bg: #f7fafc;
  --ps-bg-2: #f0f0f0;
  --ps-surface: #ffffff;
  --ps-white: #ffffff;
  --ps-navy: #122f4e;
  --ps-navy-2: #2c5282;
  --ps-blue: #122f4e;
  --ps-blue-2: #2c5282;
  --ps-blue-light: #d9e8f6;
  --ps-blue-tint: #f0f7fc;
  --ps-success: #2f855a;
  --ps-success-bg: #f0f7f3;
  --ps-success-dark: #22543d;
  --ps-warning: #b22234;
  --ps-warning-bg: #fdf3f3;
  --ps-warning-bd: #f4c7c7;
  --ps-warning-border: #f4c7c7;
  --ps-error: #c53030;
  --ps-gold: #b22234;
  --ps-gold-dark: #8b1818;
  --ps-msg-time: #a9aeb1;

  --ps-radius: 4px;
  --ps-radius-sm: 2px;
  --ps-radius-pill: 999px;
  --ps-focus: #b22234;
  --ps-shadow-sm: none;
  --ps-shadow: none;
  --ps-shadow-lg: none;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  --font-body: "Source Sans Pro", "Public Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: "Merriweather", Georgia, serif;
  --font-mono: "JetBrains Mono", "Roboto Mono", ui-monospace, Menlo, "SF Mono", monospace;

  --gov-navy: #122f4e;
  --gov-navy-dk: #0a1f33;
  --gov-navy-lt: #2c5282;
  --gov-blue: #122f4e;
  --gov-blue-dk: #0a1f33;
  --gov-blue-tint: #d9e8f6;
  --gov-blue-tint-2: #f0f7fc;
  --gov-gold: #b22234;
  --gov-red: #b22234;
  --gov-red-dk: #8b1818;
  --gov-text: #1a202c;
  --gov-text-2: #4a5568;
  --gov-text-meta: #718096;
  --gov-line: #dfe1e2;
  --gov-line-soft: #edf2f7;
  --gov-bg: #ffffff;
  --gov-bg-2: #f0f0f0;
  --gov-bg-3: #f7fafc;

  --wa-font: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Helvetica", "Lucida Grande", Arial, Ubuntu, Cantarell, "Fira Sans", sans-serif;
  --wa-bg-app: var(--gov-bg);
  --wa-bg-chat: #FBFCFD;             
  --wa-bg-pattern: rgba(22, 46, 81, 0.06);
  --wa-header: var(--gov-navy);              
  --wa-header-2: var(--gov-navy-dk);
  --wa-header-text: #FFFFFF;
  --wa-header-sub: rgba(255, 255, 255, 0.78);
  --wa-icon: #FFFFFF;
  --wa-icon-hover: rgba(255, 255, 255, 0.85);
  --wa-icon-blue: #FFFFFF;                    
  --wa-divider: var(--gov-line);
  --wa-divider-2: var(--gov-line);
  --wa-bubble-in: #FFFFFF;                    
  --wa-bubble-out: var(--gov-blue-tint);     
  --wa-text: var(--gov-text);
  --wa-text-2: var(--gov-text-2);
  --wa-text-meta: var(--gov-text-meta);
  --wa-text-meta-out: var(--gov-blue-dk);    
  --wa-tick-sent: #8696A0;
  --wa-tick-read: var(--gov-blue);            
  --wa-link: var(--gov-blue);
  --wa-verified-blue: var(--gov-blue);        
  --wa-system-bg: rgba(0, 94, 162, 0.08);    
  --wa-system-text: var(--gov-blue-dk);
  --wa-input-bg: var(--gov-bg-3);
  --wa-input-pill: #FFFFFF;
  --wa-input-wrapper: var(--gov-bg-3);
  --wa-send: var(--gov-blue);                 
  --wa-send-hover: var(--gov-navy);
  --wa-send-active: var(--gov-blue-dk);
  --wa-quoted-border: var(--gov-blue);
  --wa-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
  --wa-shadow-2: 0 2px 5px rgba(11, 20, 26, 0.06);
  --wa-radius: 7.5px;
  --wa-radius-tail: 0;
}

.presell b, .presell strong {
  color: var(--ps-navy);
  font-weight: 700;
}
.presell .ps-modal-content b,
.presell .ps-modal-content strong {
  color: var(--ps-ink);
  font-weight: 700;
  border-bottom: 1px solid var(--ps-line);
  padding-bottom: 1px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--font-body);
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-tap-highlight-color: transparent;
}

*::-webkit-scrollbar { display: none; }

html, body {
  touch-action: manipulation;
  height: 100%;
  height: -webkit-fill-available;
  margin: 0;
  padding: 0;
  overscroll-behavior: none;
}

body {
  background: var(--ps-bg);
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
  color: var(--ps-ink);
}

body.presell-active .app,
body.presell-active .embed-overlay { display: none !important; }

body.presell-active {
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--ps-white);
}

.presell {
  display: none;
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--ps-white);
  font-family: var(--font-body);
  color: var(--ps-text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.presell-active .presell { display: block; }
.presell *, .presell *::before, .presell *::after { box-sizing: border-box; }

.ps-section { padding: 56px 24px; }
.ps-section-inner { max-width: 640px; margin: 0 auto; }
.ps-section.bordered {
  border-bottom: 1px solid var(--ps-border);
  position: relative;
}
.ps-section.bordered::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  transform: translateX(-50%) rotate(45deg);
  width: 8px;
  height: 8px;
  background: var(--ps-white);
  border: 1px solid var(--ps-border);
  z-index: 1;
}
.ps-section.bordered + .ps-section::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -5px;
  transform: translateX(-50%) rotate(45deg);
  width: 6px;
  height: 6px;
  background: var(--ps-navy);
  z-index: 2;
}
.ps-section.white { background: transparent; }
.ps-section.gray {
  background: var(--ps-bg);
  background-image:
    linear-gradient(to right, rgba(29, 78, 216, 0.020) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(29, 78, 216, 0.020) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: -1px -1px;
}
.ps-section { position: relative; }

.ps-top-accent {
  position: relative;
  height: 12px;
  background: var(--ps-navy);
  background-image:
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12' preserveAspectRatio='xMidYMid meet'%3E%3Cg fill='%23ffffff' fill-opacity='0.14'%3E%3Cpath d='M12 2 L13.4 5 L16.6 5 L14 7 L15 10 L12 8 L9 10 L10 7 L7.4 5 L10.6 5 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 24px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.20);
}
.ps-top-accent::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--ps-line);
}

.news-topbar {
  background: #000;
  color: #fff;
}
.news-topbar-inner {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  gap: 12px;
}
.news-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.news-brand-mark {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.04em;
  background: var(--gov-red);
  color: #fff;
  padding: 5px 10px 4px;
  line-height: 1;
}
.news-topbar-right {
  display: inline-flex;
  align-items: center;
}
.news-clock {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.78);
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.news-nav {
  background: #fff;
  border-bottom: 1px solid #E5E5E5;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.news-nav::-webkit-scrollbar { display: none; }
.news-nav-inner {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  padding: 0 12px;
  min-width: max-content;
}
.news-nav-item {
  flex: 0 0 auto;
  text-decoration: none;
  color: #222;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  padding: 14px 12px 12px;
  border-bottom: 3px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
  white-space: nowrap;
  line-height: 1;
}
.news-nav-item:hover { color: #000; }
.news-nav-item.is-current {
  color: #000;
  border-bottom-color: var(--gov-red);
}

.news-section-tag {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--gov-red);
  text-decoration: none;
  margin-bottom: 8px;
  letter-spacing: 0;
}
.news-section-tag:hover { text-decoration: underline; }

.news-article h1 {
  font-weight: 800;
  letter-spacing: -0.024em;
  margin-bottom: 12px;
}

.news-byline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 12.5px;
  color: #5A5A5A;
  margin: 2px 0 22px;
  padding: 0;
  border: none;
  line-height: 1.4;
}
.news-byline-name {
  font-weight: 700;
  color: #1A1A1A;
}
.news-byline-role { color: #5A5A5A; }
.news-byline-sep {
  color: #B0B0B0;
  font-weight: 400;
}
.news-byline-date {
  color: #767676;
  margin-left: auto;
  padding-left: 8px;
  font-size: 12px;
}

.ps-video-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--gov-red);
  margin-bottom: 8px;
  text-transform: uppercase;
}
.ps-video-label i { font-size: 12px; }
.ps-video-dot {
  opacity: 0.5;
  font-weight: 400;
}
.ps-video-duration {
  color: #767676;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.ps-video-caption {
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.5;
  color: #5A5A5A;
  margin: 10px 0 0;
  padding: 0;
  border: none;
}

.ps-section-num {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ps-muted);
  margin: 0 0 20px;
}
.ps-section-num::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--ps-navy);
  display: inline-block;
  flex-shrink: 0;
}
.ps-section-num .num {
  color: var(--ps-navy);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.1em;
}
.ps-section-num .lbl { color: var(--ps-muted); font-weight: 500; }

.ps-hero {
  background: transparent;
  padding: 28px 24px 56px;
  position: relative;
  overflow: hidden;
}
.ps-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 80% 0%, rgba(29, 78, 216, 0.04), transparent 70%),
    radial-gradient(ellipse 50% 35% at 0% 100%, rgba(29, 78, 216, 0.025), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.ps-hero .ps-section-inner { position: relative; z-index: 2; }
.ps-hero .ps-section-inner::before {
  content: "";
  display: block;
  width: 32px;
  height: 1px;
  background: var(--ps-navy);
  margin: 0 0 22px;
}

.ps-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  margin: 0 0 18px;
  background: transparent;
  border: none;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ps-navy);
  max-width: 100%;
  flex-wrap: wrap;
}
.ps-eyebrow .dot {
  width: 6px; height: 6px;
  background: var(--ps-success);
  border-radius: 50%;
  flex-shrink: 0;
}
.ps-eyebrow .sep { color: var(--ps-border-2); font-weight: 400; }

.ps-ornament { display: none; }

.ps-hero h1 {
  font-family: var(--font-body);
  font-size: clamp(20px, 4.8vw, 30px);
  font-weight: 800;
  letter-spacing: -0.024em;
  line-height: 1.2;
  color: #141414;
  margin: 0 0 14px;
  word-wrap: normal;
  overflow-wrap: break-word;
  hyphens: manual;
  -webkit-hyphens: manual;
  text-wrap: balance;
  max-width: 100%;
}
.ps-hero h1 em {
  font-style: normal;
  font-weight: 800;
  color: var(--gov-red);
  white-space: nowrap;
}
.ps-hero-sub {
  font-size: clamp(14px, 3.6vw, 16px);
  color: #3D3D3D;
  margin: 0 0 20px;
  max-width: 580px;
  line-height: 1.6;
  font-weight: 400;
  word-wrap: normal;
  overflow-wrap: break-word;
  hyphens: manual;
  -webkit-hyphens: manual;
  text-wrap: pretty;
}
.ps-hero-sub strong {
  color: #141414;
  font-weight: 700;
}

.ps-video {
  margin: 0 0 24px;
  width: 100%;
}
.ps-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border: none;
  border-radius: 0;
  overflow: hidden;
}
.ps-video-el {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: #000;
}

.ps-video-unmute {
  position: absolute;
  top: 12px; right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  background: rgba(10, 10, 10, 0.78);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 999px;
  cursor: pointer;
  z-index: 6;
  -webkit-appearance: none;
  animation: psVidPulse 2.4s ease-in-out infinite;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.ps-video-unmute:hover { background: rgba(10, 10, 10, 0.92); border-color: rgba(255, 255, 255, 0.30); }
.ps-video-unmute i { font-size: 10px; }
@keyframes psVidPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

@media (max-width: 480px) {
  .ps-video { margin-bottom: 20px; }
  .ps-video-frame { border-radius: 0; }
  .ps-video-unmute { font-size: 9px; padding: 6px 10px; gap: 6px; top: 10px; right: 10px; }
}

.ps-cta {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 17px 24px;
  background: var(--ps-navy);
  color: #fff;
  border: 1px solid var(--ps-navy);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  -webkit-appearance: none;
  text-transform: none;
  border-radius: var(--ps-radius);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.ps-cta:hover {
  background: var(--ps-navy-2);
  border-color: var(--ps-navy-2);
}
.ps-cta:focus-visible {
  outline: 4px solid var(--ps-focus);
  outline-offset: 0;
}
.ps-cta i { font-size: 11px; opacity: 0.9; }

.ps-cta-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 2;
  min-width: 0;
  max-width: calc(100% - 28px);
}
.ps-cta-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.ps-cta-arrow {
  position: relative;
  z-index: 2;
  transition: transform 0.18s ease;
}
.ps-cta:hover .ps-cta-arrow { transform: translateX(3px); }
.ps-cta-lock {
  font-size: 11px;
  opacity: 0.85;
}

.ps-cta-progress {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.08);
}
.ps-cta-progress-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: rgba(255, 255, 255, 0.14);
  transition: width 0.25s linear;
}

.ps-cta.is-locked {
  background: var(--ps-bg-2);
  border-color: var(--ps-line);
  color: var(--ps-muted);
  cursor: not-allowed;
}
.ps-cta.is-locked:hover {
  background: var(--ps-bg-2);
  border-color: var(--ps-line);
}
.ps-cta.is-locked .ps-cta-arrow { opacity: 0.45; }
.ps-cta.is-locked .ps-cta-progress { background: var(--ps-bg); }
.ps-cta.is-locked .ps-cta-progress-fill {
  background: rgba(29, 78, 216, 0.10);
}

.ps-cta.is-unlocked {
  animation: psCtaUnlock 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
.ps-cta.is-unlocked .ps-cta-lock { color: #BBF7D0; }
@keyframes psCtaUnlock {
  0% { transform: scale(0.985); }
  50% { transform: scale(1.012); }
  100% { transform: scale(1); }
}

.ps-cta-note {
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ps-muted);
  margin-top: 16px;
  font-weight: 500;
  letter-spacing: 0.005em;
}
.ps-cta-note i { color: var(--ps-success); font-size: 11px; }

.ps-section-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ps-blue);
  margin: 0 0 10px;
  padding: 0 10px 0 0;
  position: relative;
}
.ps-section-eyebrow::after {
  content: "";
  position: absolute;
  right: -28px;
  top: 50%;
  width: 22px;
  height: 1px;
  background: var(--ps-border-2);
}
.ps-title {
  font-family: var(--font-body);
  font-size: clamp(18px, 5vw, 28px);
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--ps-ink);
  line-height: 1.26;
  margin: 0 0 14px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}
.ps-lead {
  font-size: 15px;
  color: var(--ps-text-2);
  margin: 0 0 28px;
  max-width: 560px;
  line-height: 1.62;
  font-weight: 400;
}

.ps-alert {
  background: var(--ps-white);
  border: 1px solid var(--ps-border);
  border-left: 6px solid var(--ps-navy);
  padding: 18px 18px 18px 16px;
  display: flex; gap: 14px;
  border-radius: var(--ps-radius-sm);
  position: relative;
}
.ps-alert-icon {
  width: 32px;
  height: 32px;
  background: var(--ps-navy);
  color: #fff;
  font-size: 14px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ps-radius-sm);
  margin-top: 0;
}
.ps-alert .t {
  font-size: 14.5px; font-weight: 700;
  color: var(--ps-ink); margin-bottom: 4px;
  letter-spacing: -0.005em;
}
.ps-alert .s {
  font-size: 13.5px; color: var(--ps-text-2); line-height: 1.6;
}

.ps-cat-list {
  background: #fff;
  border: 1px solid var(--ps-border);
  margin-top: 22px;
  border-radius: var(--ps-radius);
  overflow: hidden;
  position: relative;
}
.ps-cat-list::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--ps-navy);
  z-index: 1;
}
.ps-cat-row {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--ps-border);
  font-size: 14.5px;
  transition: background 0.18s ease;
  position: relative;
  counter-increment: catlist;
}
.ps-cat-list { counter-reset: catlist; }
.ps-cat-row::before {
  content: counter(catlist, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--ps-navy);
  letter-spacing: 0.12em;
  flex-shrink: 0;
  width: 22px;
  text-align: left;
  padding-right: 4px;
  border-right: 1px solid var(--ps-line);
  margin-right: 4px;
  align-self: stretch;
  display: flex;
  align-items: center;
}
.ps-cat-row:last-child { border-bottom: none; }
.ps-cat-row:hover {
  background: var(--ps-bg);
}
.ps-cat-icon {
  width: 32px; height: 32px;
  background: transparent;
  color: var(--ps-navy);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; flex-shrink: 0;
  border: 1px solid var(--ps-navy);
  border-radius: var(--ps-radius-sm);
  position: relative;
}
.ps-cat-row .label {
  flex: 1; min-width: 0;
  color: var(--ps-ink);
  font-weight: 500;
  letter-spacing: -0.005em;
  font-size: 14.5px;
}
.ps-cat-row .tag {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  color: var(--ps-success-dark);
  background: transparent;
  border: 1px solid #A7F3D0;
  padding: 4px 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  flex-shrink: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ps-cat-row .tag::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--ps-success);
}

.ps-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  background: #fff;
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius);
  overflow: hidden;
  position: relative;
}
.ps-steps::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--ps-navy);
}
.ps-step {
  display: flex; gap: 20px;
  padding: 24px 22px;
  border-bottom: 1px solid var(--ps-border);
  align-items: flex-start;
  position: relative;
}
.ps-step:last-child { border-bottom: none; }
.ps-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 41px;
  top: 64px;
  bottom: -1px;
  width: 1px;
  background: var(--ps-navy);
  opacity: 0.20;
  pointer-events: none;
}
.ps-step-num {
  width: 36px; height: 36px;
  background: var(--ps-navy);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  flex-shrink: 0;
  border: 1px solid var(--ps-navy);
  border-radius: 50%;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  position: relative;
  z-index: 1;
}
.ps-step-num::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 1px solid var(--ps-line);
  border-radius: 50%;
  pointer-events: none;
}
.ps-step-num::before {
  content: "";
  position: absolute;
  inset: -8px;
  border: 1px solid var(--ps-line);
  border-radius: 50%;
  opacity: 0.5;
  pointer-events: none;
}
.ps-step-body { min-width: 0; flex: 1; padding-top: 4px; }
.ps-step-body .t {
  font-size: 15px;
  font-weight: 600;
  color: var(--ps-ink);
  margin-bottom: 6px;
  letter-spacing: -0.008em;
}
.ps-step-body .s {
  font-size: 13.5px;
  color: var(--ps-text-2);
  line-height: 1.6;
}

.ps-faq {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius);
  overflow: hidden;
  position: relative;
}
.ps-faq::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--ps-navy);
  z-index: 1;
}
.ps-faq-item {
  border-bottom: 1px solid var(--ps-border);
  counter-increment: faqlist;
}
.ps-faq { counter-reset: faqlist; }
.ps-faq-item:last-child { border-bottom: none; }
.ps-faq-q {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 24px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  color: var(--ps-ink);
  user-select: none; gap: 14px;
  transition: color 0.12s, background 0.18s;
  letter-spacing: -0.008em;
  position: relative;
}
.ps-faq-q::before {
  content: counter(faqlist, decimal-leading-zero) " /";
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  color: var(--ps-muted);
  letter-spacing: 0.18em;
  flex-shrink: 0;
  width: 32px;
  margin-right: 4px;
  transition: color 0.18s ease;
}
.ps-faq-q:hover::before,
.ps-faq-item.open .ps-faq-q::before { color: var(--ps-navy); }
.ps-faq-q:hover { color: var(--ps-navy); background: var(--ps-bg); }
.ps-faq-q i {
  color: var(--ps-muted);
  font-size: 11px;
  width: 28px; height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ps-line);
  border-radius: 50%;
  transition: transform 0.32s ease, color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
  flex-shrink: 0;
}
.ps-faq-item.open .ps-faq-q { color: var(--ps-navy); background: var(--ps-bg); font-weight: 600; }
.ps-faq-item.open .ps-faq-q i {
  transform: rotate(180deg);
  color: #fff;
  background: var(--ps-navy);
  border-color: var(--ps-navy);
}
.ps-faq-a {
  max-height: 0; overflow: hidden;
  transition: max-height 0.3s ease;
  padding: 0 24px 0 60px;
  font-size: 13.5px;
  color: var(--ps-text-2);
  line-height: 1.6;
}
.ps-faq-item.open .ps-faq-a {
  max-height: 360px;
  padding: 0 24px 22px 60px;
}

.ps-cta-section {
  background: var(--ps-bg);
  background-image:
    linear-gradient(to right, rgba(29, 78, 216, 0.022) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(29, 78, 216, 0.022) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: -1px -1px;
  color: var(--ps-ink);
  padding: 56px 24px 60px;
  text-align: center;
  border-top: 1px solid var(--ps-border);
  position: relative;
}
.ps-cta-section::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -4px;
  height: 1px;
  background: var(--ps-border);
}
.ps-cta-section .ps-section-inner {
  position: relative;
  padding: 4px 0;
}
.ps-cta-section .ps-section-inner::before,
.ps-cta-section .ps-section-inner::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid var(--ps-navy);
  pointer-events: none;
}
.ps-cta-section .ps-section-inner::before {
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  border-right: none;
  border-bottom: none;
  width: 24px;
  height: 8px;
  border-top-width: 2px;
}
.ps-cta-section .ps-section-inner::after {
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  border-right: none;
  border-top: none;
  border-left: none;
  width: 24px;
  height: 8px;
  border-bottom-width: 2px;
}
.ps-cta-section .ps-section-num {
  justify-content: center;
}
.ps-cta-section .ps-section-num::before {
  width: 24px;
}
.ps-cta-section h3 {
  font-family: var(--font-body);
  font-size: clamp(20px, 5vw, 26px);
  font-weight: 700;
  color: var(--ps-ink);
  margin: 0 0 10px;
  letter-spacing: -0.022em;
  line-height: 1.24;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.ps-cta-section p {
  font-size: 14px;
  color: var(--ps-text-2);
  margin: 0 0 28px;
  font-weight: 400;
}
.ps-cta-section .ps-cta { max-width: 420px; margin: 0 auto; }

.ps-footer {
  background: var(--ps-bg);
  color: var(--ps-muted);
  padding: 40px 24px 44px;
  font-size: 12px;
  line-height: 1.6;
  border-top: 12px solid var(--ps-navy);
  position: relative;
}
.ps-footer::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0; right: 0;
  height: 12px;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cg fill='%23ffffff' fill-opacity='0.14'%3E%3Cpath d='M12 2 L13.4 5 L16.6 5 L14 7 L15 10 L12 8 L9 10 L10 7 L7.4 5 L10.6 5 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 24px 12px;
}
.ps-footer::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.20);
}
.ps-footer-inner { max-width: 640px; margin: 0 auto; }
.ps-footer-mark {
  display: flex; align-items: center;
  gap: 12px; margin-bottom: 22px;
  color: var(--ps-ink); font-weight: 600; font-size: 13.5px;
  letter-spacing: 0;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--ps-border);
}
.ps-footer-mark i {
  color: var(--ps-navy);
  font-size: 16px;
  background: transparent;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ps-navy);
  border-radius: var(--ps-radius-sm);
  flex-shrink: 0;
}
.ps-footer-links {
  display: flex; flex-wrap: wrap;
  gap: 8px 22px;
  margin-bottom: 18px;
}
.ps-footer-links a {
  color: var(--ps-text-2);
  text-decoration: none;
  font-weight: 500;
  font-size: 12.5px;
  transition: color 0.12s ease;
  letter-spacing: 0;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}
.ps-footer-links a:hover {
  color: var(--ps-navy);
  border-bottom-color: var(--ps-navy);
}

.ps-cookie {
  position: fixed;
  left: 12px; right: 12px;
  bottom: 12px;
  z-index: 9999;
  background: #fff;
  border: 1px solid var(--ps-border);
  padding: 22px 22px 18px;
  box-shadow: none;
  max-width: 460px;
  margin: 0 auto;
  transform: translateY(140%);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(.22,1,.36,1), opacity 0.4s ease;
  border-radius: var(--ps-radius);
}
.ps-cookie.open { transform: translateY(0); opacity: 1; }
.ps-cookie.hidden { display: none; }
.ps-cookie-head {
  display: flex; align-items: center; gap: 12px; margin-bottom: 10px;
}
.ps-cookie-head .icon {
  width: auto; height: auto;
  background: transparent;
  color: var(--ps-navy);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
.ps-cookie-head .t { font-size: 15px; font-weight: 600; color: var(--ps-ink); }
.ps-cookie-body {
  font-size: 13px; color: var(--ps-text-2);
  line-height: 1.55; margin-bottom: 14px;
}
.ps-cookie-body a { color: var(--ps-blue); font-weight: 600; text-decoration: underline; }

.ps-cookie-prefs {
  display: none;
  background: var(--ps-bg-2);
  border: 1px solid var(--ps-border);
  padding: 4px 16px;
  margin-bottom: 14px;
  border-radius: var(--ps-radius-sm);
}
.ps-cookie-prefs.open { display: block; }
.ps-cookie-pref {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--ps-border);
  gap: 12px;
}
.ps-cookie-pref:last-child { border-bottom: none; }
.ps-cookie-pref .l {
  font-size: 13.5px; font-weight: 600; color: var(--ps-ink);
  flex: 1; min-width: 0;
}
.ps-cookie-pref .l .s {
  display: block; font-size: 11.5px; color: var(--ps-muted);
  font-weight: 400; margin-top: 2px;
}

.ps-switch {
  position: relative;
  width: 38px; height: 22px;
  background: var(--ps-border-2);
  cursor: pointer;
  transition: background 0.18s;
  flex-shrink: 0;
  border-radius: 999px;
}
.ps-switch::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  background: #fff;
  transition: transform 0.18s;
  box-shadow: none;
  border-radius: 50%;
}
.ps-switch.on { background: var(--ps-blue); }
.ps-switch.on::after { transform: translateX(16px); }
.ps-switch.disabled { opacity: 0.85; cursor: not-allowed; background: var(--ps-success); }

.ps-cookie-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ps-btn {
  flex: 1; min-width: 110px;
  padding: 11px 16px;
  font-family: inherit;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  -webkit-appearance: none;
  border: 1px solid var(--ps-border-2);
  border-radius: var(--ps-radius-sm);
}
.ps-btn-ghost { background: #fff; color: var(--ps-text); }
.ps-btn-ghost:hover { background: var(--ps-bg-2); border-color: var(--ps-muted-2); }
.ps-btn-primary {
  background: var(--ps-navy);
  color: #fff;
  border-color: var(--ps-navy);
}
.ps-btn-primary:hover { background: var(--ps-navy-2); border-color: var(--ps-navy-2); }

.ps-cookie-link {
  display: inline-block;
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--ps-blue);
  text-decoration: underline;
  cursor: pointer;
  font-weight: 600;
}

body:not(.presell-active) .ps-cookie { display: none; }

.ps-loader {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: #fff;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.ps-loader.on { display: flex; }
.ps-loader-spin {
  width: 36px; height: 36px;
  border: 3px solid var(--ps-border);
  border-top-color: var(--ps-navy);
  animation: psSpin 0.9s linear infinite;
  border-radius: 50%;
}
@keyframes psSpin { to { transform: rotate(360deg); } }
.ps-loader-text {
  font-size: 13px;
  color: var(--ps-muted);
  letter-spacing: 0.02em;
}

.ps-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(10, 10, 10, 0.55);
  
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.ps-modal.open { opacity: 1; pointer-events: auto; }
.ps-modal-content {
  background: #fff;
  width: 100%;
  max-width: 680px;
  max-height: 88vh;
  overflow-y: auto;
  position: relative;
  padding: 48px 40px 40px;
  box-shadow: none;
  border-radius: var(--ps-radius);
  border: 1px solid var(--ps-border);
  transform: translateY(20px) scale(0.98);
  transition: transform 0.25s ease;
}
.ps-modal-content::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 8px;
  background: var(--ps-navy);
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 8'%3E%3Cg fill='%23ffffff' fill-opacity='0.16'%3E%3Cpath d='M12 1 L13 3.4 L15.5 3.4 L13.5 4.8 L14.2 7 L12 5.6 L9.8 7 L10.5 4.8 L8.5 3.4 L11 3.4 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 24px 8px;
  border-radius: var(--ps-radius) var(--ps-radius) 0 0;
}
.ps-modal.open .ps-modal-content { transform: translateY(0) scale(1); }
.ps-modal-close {
  position: absolute;
  top: 18px; right: 18px;
  background: var(--ps-white);
  border: 1px solid var(--ps-border);
  font-size: 16px;
  color: var(--ps-ink);
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border-radius: var(--ps-radius-sm);
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
  z-index: 5;
}
.ps-modal-close:hover { background: var(--ps-bg); border-color: var(--ps-navy); color: var(--ps-navy); }
.ps-modal-content h2 {
  margin: 0 0 12px;
  font-size: 26px;
  font-weight: 700;
  color: var(--ps-ink);
  letter-spacing: -0.022em;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--ps-navy);
  display: inline-block;
}
.ps-modal-content h3 {
  margin: 30px 0 12px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ps-ink);
  letter-spacing: -0.005em;
  padding-left: 14px;
  border-left: 3px solid var(--ps-navy);
  line-height: 1.3;
}
.ps-modal-content p { margin: 0 0 16px; font-size: 14.5px; color: var(--ps-text-2); line-height: 1.7; }
.ps-modal-content ul { margin: 0 0 16px; padding-left: 22px; list-style-type: square; }
.ps-modal-content li { margin-bottom: 10px; font-size: 14.5px; color: var(--ps-text-2); line-height: 1.65; padding-left: 4px; }
.ps-modal-content li::marker { color: var(--ps-navy); }
.ps-modal-content .date {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ps-muted);
  margin: 0 0 28px;
  display: inline-flex;
  padding: 6px 10px;
  background: var(--ps-bg);
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
}
.ps-modal-content strong { color: var(--ps-ink); font-weight: 700; }

@media (max-width: 600px) {
  .ps-hero h1 { font-size: clamp(19px, 5vw, 24px); letter-spacing: -0.018em; line-height: 1.24; margin-bottom: 14px; }
  .ps-hero-sub { font-size: 13.5px; line-height: 1.55; margin-bottom: 22px; }
  .ps-title { font-size: clamp(19px, 5.2vw, 24px); line-height: 1.24; }
  .ps-lead { font-size: 14px; line-height: 1.6; margin-bottom: 22px; }
  .ps-cta-section h3 { font-size: clamp(20px, 5.6vw, 24px); }
  .ps-cta-section p { font-size: 13.5px; }
  .ps-cta { font-size: 14px; padding: 13px 20px; }
  .ps-cta-note { font-size: 11.5px; }
}

@media (max-width: 480px) {
  .ps-hero { padding: 20px 20px 36px; }
  .news-topbar-inner { padding: 9px 16px; }
  .news-brand-mark { font-size: 15px; padding: 4px 9px 3px; }
  .news-clock { font-size: 11.5px; }
  .news-nav-inner { padding: 0 10px; }
  .news-nav-item { font-size: 13px; padding: 12px 10px 10px; }
  .news-section-tag { font-size: 13px; }
  .news-byline { font-size: 12px; }
  .news-byline-date { font-size: 11.5px; }
  .ps-video-label { font-size: 11px; }
  .ps-video-caption { font-size: 12px; }
  .ps-hero .ps-section-inner::before { width: 24px; margin-bottom: 16px; }
  .ps-section { padding: 40px 20px; }
  .ps-cta-section { padding: 44px 20px 48px; }
  .ps-section-num { font-size: 9px; gap: 10px; letter-spacing: 0.18em; margin-bottom: 16px; }
  .ps-section-num::before { width: 24px; }
  .ps-section-num .num { font-size: 10px; }
  .ps-cat-row { padding: 16px 18px; gap: 14px; }
  .ps-cat-row .label { font-size: 13.5px; }
  .ps-cat-row .tag { font-size: 8.5px; padding: 3px 8px; letter-spacing: 0.12em; }
  .ps-cat-icon { width: 32px; height: 32px; font-size: 12px; }
  .ps-step { padding: 20px 18px; gap: 16px; }
  .ps-step:not(:last-child)::after { left: 32px; top: 52px; }
  .ps-step-num { width: 28px; height: 28px; font-size: 10.5px; }
  .ps-step-body .t { font-size: 14px; }
  .ps-step-body .s { font-size: 13px; }
  .ps-faq-q { padding: 18px 18px; font-size: 14px; gap: 10px; }
  .ps-faq-q i { width: 24px; height: 24px; font-size: 10px; }
  .ps-faq-item.open .ps-faq-a { padding: 0 18px 18px; font-size: 13px; }
  .ps-faq-a { padding: 0 18px; font-size: 13px; line-height: 1.55; }
  .ps-cookie { left: 10px; right: 10px; bottom: 10px; padding: 18px; }
  .ps-cookie-head .t { font-size: 14px; }
  .ps-cookie-body { font-size: 12.5px; }
  .ps-modal-content { padding: 36px 22px 28px; }
  .ps-modal-content h2 { font-size: 22px; }
  .ps-modal-content h3 { font-size: 15.5px; margin-top: 22px; }
  .ps-modal-content p,
  .ps-modal-content li { font-size: 13.5px; line-height: 1.6; }
  .ps-footer { padding: 28px 20px 32px; }
  .ps-footer-mark { font-size: 13px; }
  .ps-footer-links a { font-size: 12px; }
}

@media (max-width: 380px) {
  .ps-hero { padding: 16px 16px 30px; }
  .ps-hero h1 { font-size: clamp(17px, 5.2vw, 21px); line-height: 1.25; }
  .ps-hero-sub { font-size: 13px; line-height: 1.5; }
  .news-topbar-inner { padding: 8px 14px; }
  .news-brand-mark { font-size: 14px; padding: 4px 8px 3px; }
  .news-clock { font-size: 11px; }
  .news-nav-inner { padding: 0 8px; }
  .news-nav-item { font-size: 12.5px; padding: 11px 9px 9px; }
  .news-section-tag { font-size: 12.5px; margin-bottom: 8px; }
  .news-byline { font-size: 11.5px; margin: 4px 0 20px; }
  .news-byline-date { font-size: 11px; }
  .ps-section { padding: 32px 16px; }
  .ps-cta-section { padding: 38px 16px 42px; }
  .ps-section-num { font-size: 8.5px; letter-spacing: 0.16em; gap: 8px; }
  .ps-section-num::before { width: 20px; }
  .ps-section-num .num { font-size: 9.5px; }
  .ps-title { font-size: clamp(18px, 5vw, 22px); }
  .ps-lead { font-size: 13.5px; margin-bottom: 20px; }
  .ps-cookie-actions { flex-direction: column; }
  .ps-btn { width: 100%; }
  .ps-cat-row { padding: 14px 16px; gap: 12px; }
  .ps-cat-row .label { font-size: 13px; }
  .ps-cat-row .tag { font-size: 8px; padding: 3px 7px; }
  .ps-cat-icon { width: 30px; height: 30px; }
  .ps-step { padding: 18px 16px; gap: 14px; }
  .ps-step:not(:last-child)::after { left: 30px; top: 50px; }
  .ps-step-num { width: 26px; height: 26px; font-size: 10px; }
  .ps-step-body .t { font-size: 13.5px; }
  .ps-step-body .s { font-size: 12.5px; }
  .ps-faq-q { padding: 16px 16px; font-size: 13.5px; }
  .ps-faq-item.open .ps-faq-a { padding: 0 16px 16px; }
  .ps-faq-a { padding: 0 16px; font-size: 12.5px; }
  .ps-modal-content { padding: 32px 18px 24px; }
  .ps-modal-content h2 { font-size: 20px; }
  .ps-modal-content h3 { font-size: 15px; }
  .ps-modal-content p,
  .ps-modal-content li { font-size: 13px; }
  .ps-cookie { padding: 16px; }
}

@media (max-width: 320px) {
  .ps-hero { padding: 14px 14px 26px; }
  .ps-hero h1 { font-size: 16px; line-height: 1.26; margin-bottom: 12px; }
  .ps-hero-sub { font-size: 12.5px; line-height: 1.5; margin-bottom: 20px; }
  .news-topbar-inner { padding: 7px 12px; }
  .news-brand-mark { font-size: 13px; padding: 4px 7px 3px; }
  .news-clock { font-size: 10.5px; }
  .news-nav-item { font-size: 12px; padding: 10px 8px 8px; }
  .news-section-tag { font-size: 12px; }
  .news-byline { font-size: 11px; gap: 5px; }
  .news-byline-date { width: 100%; margin-left: 0; padding-left: 0; font-size: 10.5px; }
  .ps-section { padding: 28px 14px; }
  .ps-cta-section { padding: 34px 14px 38px; }
  .ps-cta { font-size: 13px; padding: 12px 16px; }
  .ps-section-num { font-size: 8px; letter-spacing: 0.14em; }
  .ps-section-num .num { font-size: 9px; }
  .ps-title { font-size: 17px; line-height: 1.24; }
  .ps-lead { font-size: 12.5px; }
  .ps-cat-row { padding: 12px 14px; gap: 10px; }
  .ps-cat-row .label { font-size: 12.5px; }
  .ps-cat-row .tag { font-size: 7.5px; padding: 2px 6px; }
  .ps-cat-icon { width: 28px; height: 28px; font-size: 11px; }
  .ps-step { padding: 16px 14px; gap: 12px; }
  .ps-step:not(:last-child)::after { left: 28px; top: 46px; }
  .ps-step-num { width: 24px; height: 24px; font-size: 9.5px; }
  .ps-step-body .t { font-size: 13px; }
  .ps-step-body .s { font-size: 12px; }
  .ps-faq-q { padding: 14px 14px; font-size: 13px; }
  .ps-faq-q i { width: 22px; height: 22px; font-size: 9px; }
  .ps-faq-item.open .ps-faq-a { padding: 0 14px 14px; }
  .ps-faq-a { padding: 0 14px; font-size: 12px; }
  .ps-cta-section h3 { font-size: 18px; }
  .ps-cta-section p { font-size: 12.5px; }
  .ps-modal-content { padding: 28px 16px 22px; }
  .ps-modal-content h2 { font-size: 18px; }
  .ps-modal-content h3 { font-size: 14px; }
  .ps-modal-content p,
  .ps-modal-content li { font-size: 12.5px; }
  .ps-footer-mark { font-size: 12.5px; }
}

@media (min-width: 481px) and (max-width: 767px) {
  .ps-hero { padding: 26px 28px 44px; }
  .ps-section { padding: 44px 28px; }
  .ps-cta-section { padding: 52px 28px; }
}

@media (min-width: 768px) and (max-width: 900px) {
  .ps-hero { padding: 30px 36px 52px; }
  .ps-hero h1 { font-size: 28px; }
  .ps-section { padding: 52px 36px; }
  .ps-cta-section { padding: 60px 36px; }
  .ps-modal-content { padding: 44px 40px; }
}

@media (min-width: 401px) and (max-width: 480px) {
  .ps-hero h1 { font-size: clamp(20px, 5.4vw, 24px); }
  .ps-title { font-size: clamp(20px, 5.4vw, 24px); }
}

@media (max-height: 480px) and (orientation: landscape) and (max-width: 900px) {
  .ps-hero { padding: 32px 24px 24px; }
  .ps-hero h1 { font-size: clamp(20px, 4vw, 26px); }
  .ps-hero-sub { margin-bottom: 18px; }
  .ps-section { padding: 28px 24px; }
  .ps-cta-section { padding: 32px 24px; }
}

@media (min-width: 601px) and (max-width: 767px) {
  .ps-hero h1 { font-size: clamp(22px, 4.4vw, 26px); }
  .ps-title { font-size: clamp(22px, 4.4vw, 28px); }
  .ps-hero-sub { font-size: 14.5px; }
  .ps-cat-row { padding: 20px 24px; }
  .ps-step { padding: 24px; }
  .ps-faq-q { padding: 22px 24px; }
}

@media (min-width: 901px) and (max-width: 1100px) {
  .chat-area { padding: 20px 18px 22px 18px; }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .ps-cat-list,
  .ps-steps,
  .ps-faq,
  .ps-footer-mark i,
  .ch-avatar::before,
  .message,
  .chat-header,
  .input-box {
    border-width: 0.5px;
  }
}

@media (min-width: 901px) {
  body.presell-active {
    background: var(--ps-bg);
    padding: 48px 16px;
  }
  .presell {
    max-width: 600px;
    margin: 0 auto;
    min-height: auto;
    overflow: hidden;
    background: var(--ps-white);
    border: 1px solid var(--ps-border);
    border-radius: 12px;
  }
  .ps-hero { padding: 32px 40px 52px; }
  .ps-section { padding: 52px 40px; }
  .ps-cta-section { padding: 56px 40px 60px; }
  .ps-footer { padding: 36px 40px 40px; }
  .ps-cookie {
    left: 50%;
    transform: translate(-50%, 140%);
    max-width: 460px;
    bottom: 32px;
  }
  .ps-cookie.open { transform: translate(-50%, 0); }
  .news-topbar-inner { padding: 12px 24px; }
  .news-brand-mark { font-size: 17px; padding: 5px 11px 4px; }
  .news-clock { font-size: 12.5px; }
  .news-nav-inner { padding: 0 14px; }
  .news-nav-item { font-size: 14px; padding: 14px 13px 11px; }
}

@media (min-width: 1280px) {
  body.presell-active { padding: 56px 16px; }
}

@media (max-height: 480px) and (orientation: landscape) {
  .ps-hero { padding: 18px 24px 28px; }
  .ps-section { padding: 32px 24px; }
  .news-topbar-inner { padding: 7px 16px; }
  .news-nav-item { padding: 10px 12px 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .ps-cookie,
  .ps-loader-spin,
  .ps-faq-q i,
  .ps-cat-row,
  .ps-cta {
    transition: none !important;
    animation: none !important;
  }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .ps-cat-list,
  .ps-steps,
  .ps-faq { border-width: 0.5px; }
}

.app {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: 100%;
  margin: 0;
  height: 100%;
  height: 100dvh;
  background: var(--wa-header);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  font-family: var(--wa-font);
  color: var(--wa-text);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  overscroll-behavior: none;
}

.main-layout {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--wa-bg-chat);
  min-height: 0;
  width: 100%;
}

.chat-wrapper {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  background: var(--wa-bg-chat);
  width: 100%;
}

.mobile-navbar { display: none !important; }

.message-group.notice-group:has(.fa-building-columns) { display: none !important; }

.chat-header {
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px 8px 6px;
  padding-top: calc(8px + var(--safe-top));
  background: var(--wa-header);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(0,0,0,0.05) 100%),
    linear-gradient(180deg, var(--gov-navy) 0%, var(--gov-navy-dk) 100%);
  border-bottom: none;
  z-index: 10;
  font-family: var(--wa-font);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
  min-height: calc(56px + var(--safe-top));
  box-sizing: border-box;
  width: 100%;
  -webkit-user-select: none;
  user-select: none;
}
.chat-header::before { content: none; display: none; }

.ch-back {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: #FFFFFF;
  font-size: 20px;
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.15s ease;
  -webkit-appearance: none;
  font-family: inherit;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
}
.ch-back:hover { background: rgba(255, 255, 255, 0.10); }
.ch-back:active { background: rgba(255, 255, 255, 0.18); }

.ch-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
  cursor: pointer;
  padding: 2px 0;
}
.ch-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #FFFFFF;
  color: var(--wa-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
  position: relative;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.15);
  overflow: visible; 
  aspect-ratio: 1 / 1;
}
.ch-avatar::before { content: none; display: none; }
.ch-avatar::after { content: none; display: none; }
.ch-avatar-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  border-radius: 50%; 
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  background: #FFFFFF;
}
.ch-avatar-svg {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
}
.ch-avatar i { display: none; }

.ch-avatar-status {
  position: absolute;
  bottom: 0 !important;
  right: 0 !important;
  width: 11px;
  height: 11px;
  background: #2EB875;
  border: 2px solid var(--gov-navy);
  border-radius: 50%;
  z-index: 3;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.20);
  transform: translate(15%, 15%);
}
.ch-profile-info {
  min-width: 0;
  flex: 1 1 auto;
  line-height: 1.2;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}
.ch-name-row {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  overflow: hidden;
}
.ch-name {
  font-size: 17px;
  font-weight: 600;
  color: var(--wa-header-text);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--wa-font);
  line-height: 1.2;
  min-width: 0;
}
.ch-verified {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 0;
}
.ch-verified svg {
  width: 16px;
  height: 16px;
  display: block;
}

.ch-status {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 0;
  font-size: 13px;
  color: var(--wa-header-sub);
  font-weight: 400;
  min-width: 0;
  overflow: hidden;
  line-height: 1.2;
  white-space: nowrap;
}
.ch-status-text {
  color: var(--wa-header-sub);
  font-weight: 400;
  flex-shrink: 0;
  text-transform: lowercase;
  font-style: normal;
  display: inline-block;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app:has(#typingIndicator) .ch-status-text {
  color: transparent !important;
  position: relative;
  min-width: 70px;
  display: inline-block;
}
.app:has(#typingIndicator) .ch-status-text::before {
  content: "typing…";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.95);
  font-style: normal;
  font-weight: 400;
  font-size: inherit;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: 0;
  text-transform: lowercase;
}
.ch-status-meta {
  color: var(--wa-header-sub);
  font-weight: 400;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ch-status-sep {
  color: var(--wa-header-sub);
  font-weight: 400;
  flex-shrink: 0;
  opacity: 0.7;
}
.ch-status-ref {
  font-family: var(--wa-font);
  font-size: 12px;
  color: var(--wa-header-sub);
  font-weight: 400;
  letter-spacing: 0;
  flex-shrink: 0;
}

.ch-actions {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
  margin-left: 4px;
}
.ch-action {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: #FFFFFF;
  font-size: 18px;
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.15s ease;
  -webkit-appearance: none;
  font-family: inherit;
  padding: 0;
}
.ch-action:hover {
  background: rgba(255, 255, 255, 0.10);
  color: #FFFFFF;
}
.ch-action:active { background: rgba(255, 255, 255, 0.18); }

@media screen and (max-width: 600px) {
  .chat-header { padding: 6px 8px 6px 4px; gap: 4px; min-height: 56px; }
  .ch-back { width: 38px; height: 38px; font-size: 18px; }
  .ch-profile { gap: 9px; }
  .ch-action { width: 38px; height: 38px; font-size: 17px; }
  .ch-actions { gap: 0; margin-left: 0; }
}

@media screen and (max-width: 480px) {
  .chat-header { padding: 6px 6px 6px 2px; gap: 3px; min-height: 54px; }
  .ch-avatar { width: 38px; height: 38px; }
  .ch-avatar-status { width: 11px; height: 11px; border-width: 2px; }
  .ch-name { font-size: 16.5px; }
  .ch-verified svg { width: 15px; height: 15px; }
  .ch-status { font-size: 12.5px; gap: 4px; }
  .ch-status-ref { font-size: 12px; }
}

@media screen and (max-width: 420px) {
  .ch-status-sep-ref,
  .ch-status-ref,
  .ch-status-sep,
  .ch-status-meta { display: none; }
}

@media screen and (max-width: 380px) {
  .ch-action[aria-label="Voice call"] { display: none; }
}

@media screen and (max-width: 360px) {
  .chat-header { padding: 5px 4px 5px 0; gap: 2px; }
  .ch-back { width: 36px; height: 36px; font-size: 17px; }
  .ch-profile { gap: 8px; }
  .ch-avatar { width: 36px; height: 36px; }
  .ch-avatar-status { width: 10px; height: 10px; }
  .ch-name { font-size: 16px; }
  .ch-verified svg { width: 14px; height: 14px; }
  .ch-action { width: 36px; height: 36px; font-size: 16px; }
  .ch-action[aria-label="Video call"] { display: none; }
}

@media screen and (max-width: 320px) {
  .chat-header { padding: 4px 4px 4px 0; min-height: 50px; }
  .ch-back { width: 34px; height: 34px; font-size: 16px; }
  .ch-avatar { width: 34px; height: 34px; }
  .ch-avatar-status { width: 9px; height: 9px; border-width: 1.5px; }
  .ch-name { font-size: 15.5px; }
  .ch-verified svg { width: 13px; height: 13px; }
  .ch-status { font-size: 11.5px; }
  .ch-action { width: 34px; height: 34px; font-size: 15px; }
}

.chat-area {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  padding: 10px 8px 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
  background-color: var(--wa-bg-chat);
  width: 100%;
  box-sizing: border-box;
  min-height: 0;
  -webkit-user-select: text;
  user-select: text;
  
  background-image:
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 540 540'%3E%3Cdefs%3E%3Cg id='shd'%3E%3Cpath d='M0 -14 L13 -9 L13 6 C13 16 7 22 0 26 C-7 22 -13 16 -13 6 L-13 -9 Z' fill='none' stroke='%23162E51' stroke-width='1.4'/%3E%3Cpath d='M-5 0 L-1 5 L6 -4' fill='none' stroke='%23162E51' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cg id='eag'%3E%3Cpath d='M-18 -2 C-12 -8 -6 -6 0 0 C6 -6 12 -8 18 -2 L15 4 C9 -2 5 0 0 6 C-5 0 -9 -2 -15 4 Z' fill='%23162E51'/%3E%3Ccircle cx='0' cy='5' r='2.5' fill='%23162E51'/%3E%3Cpath d='M-6 8 L0 14 L6 8' fill='%23162E51'/%3E%3C/g%3E%3Cg id='cwn'%3E%3Cpath d='M-14 8 L-12 -10 L-7 0 L0 -14 L7 0 L12 -10 L14 8 Z' fill='none' stroke='%23162E51' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cline x1='-14' y1='12' x2='14' y2='12' stroke='%23162E51' stroke-width='1.6'/%3E%3Ccircle cx='-12' cy='-10' r='1.5' fill='%23162E51'/%3E%3Ccircle cx='0' cy='-14' r='1.8' fill='%23162E51'/%3E%3Ccircle cx='12' cy='-10' r='1.5' fill='%23162E51'/%3E%3C/g%3E%3Cg id='str'%3E%3Cpath d='M0 -13 L4 -4 L13 -4 L6 2 L8 11 L0 5 L-8 11 L-6 2 L-13 -4 L-4 -4 Z' fill='none' stroke='%23162E51' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/g%3E%3Cg id='col'%3E%3Cpath d='M-15 -8 L0 -14 L15 -8 Z' fill='none' stroke='%23162E51' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cline x1='-16' y1='-6' x2='16' y2='-6' stroke='%23162E51' stroke-width='1.4'/%3E%3Cline x1='-12' y1='-6' x2='-12' y2='10' stroke='%23162E51' stroke-width='1.4'/%3E%3Cline x1='-4' y1='-6' x2='-4' y2='10' stroke='%23162E51' stroke-width='1.4'/%3E%3Cline x1='4' y1='-6' x2='4' y2='10' stroke='%23162E51' stroke-width='1.4'/%3E%3Cline x1='12' y1='-6' x2='12' y2='10' stroke='%23162E51' stroke-width='1.4'/%3E%3Cline x1='-16' y1='10' x2='16' y2='10' stroke='%23162E51' stroke-width='1.4'/%3E%3Cline x1='-18' y1='13' x2='18' y2='13' stroke='%23162E51' stroke-width='1.6'/%3E%3C/g%3E%3Cg id='lck'%3E%3Cpath d='M-7 -3 L-7 -10 C-7 -15 -3 -18 0 -18 C3 -18 7 -15 7 -10 L7 -3' fill='none' stroke='%23162E51' stroke-width='1.4'/%3E%3Crect x='-10' y='-3' width='20' height='17' rx='2' fill='none' stroke='%23162E51' stroke-width='1.4'/%3E%3Ccircle cx='0' cy='5' r='1.6' fill='%23162E51'/%3E%3C/g%3E%3Cg id='key'%3E%3Ccircle cx='-9' cy='0' r='6' fill='none' stroke='%23162E51' stroke-width='1.4'/%3E%3Ccircle cx='-9' cy='0' r='2' fill='%23162E51'/%3E%3Cline x1='-3' y1='0' x2='15' y2='0' stroke='%23162E51' stroke-width='1.4'/%3E%3Cline x1='9' y1='0' x2='9' y2='5' stroke='%23162E51' stroke-width='1.4'/%3E%3Cline x1='15' y1='0' x2='15' y2='6' stroke='%23162E51' stroke-width='1.4'/%3E%3C/g%3E%3Cg id='stp'%3E%3Ccircle r='12' fill='none' stroke='%23162E51' stroke-width='1.4'/%3E%3Ccircle r='9' fill='none' stroke='%23162E51' stroke-width='0.8'/%3E%3Cpath d='M-5 -1 L-1 3 L5 -4' fill='none' stroke='%23162E51' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cline x1='-15' y1='14' x2='15' y2='14' stroke='%23162E51' stroke-width='1.6'/%3E%3C/g%3E%3Cg id='doc'%3E%3Cpath d='M-9 -14 L7 -14 L11 -10 L11 14 L-9 14 Z' fill='none' stroke='%23162E51' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cpath d='M7 -14 L7 -10 L11 -10' fill='none' stroke='%23162E51' stroke-width='1.4'/%3E%3Cline x1='-5' y1='-4' x2='7' y2='-4' stroke='%23162E51' stroke-width='0.8'/%3E%3Cline x1='-5' y1='1' x2='7' y2='1' stroke='%23162E51' stroke-width='0.8'/%3E%3Cline x1='-5' y1='6' x2='7' y2='6' stroke='%23162E51' stroke-width='0.8'/%3E%3Cline x1='-5' y1='11' x2='3' y2='11' stroke='%23162E51' stroke-width='0.8'/%3E%3C/g%3E%3Cg id='lau'%3E%3Cpath d='M-12 8 Q0 -10 12 8' fill='none' stroke='%23162E51' stroke-width='1.4'/%3E%3Cellipse cx='-9' cy='5' rx='3' ry='1.4' fill='%23162E51' transform='rotate(-30 -9 5)'/%3E%3Cellipse cx='-5' cy='-1' rx='3' ry='1.4' fill='%23162E51' transform='rotate(-15 -5 -1)'/%3E%3Cellipse cx='0' cy='-5' rx='3' ry='1.4' fill='%23162E51'/%3E%3Cellipse cx='5' cy='-1' rx='3' ry='1.4' fill='%23162E51' transform='rotate(15 5 -1)'/%3E%3Cellipse cx='9' cy='5' rx='3' ry='1.4' fill='%23162E51' transform='rotate(30 9 5)'/%3E%3C/g%3E%3Cg id='eye'%3E%3Cpath d='M-14 8 L0 -14 L14 8 Z' fill='none' stroke='%23162E51' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cellipse cx='0' cy='1' rx='6' ry='3' fill='none' stroke='%23162E51' stroke-width='1.2'/%3E%3Ccircle cx='0' cy='1' r='1.6' fill='%23162E51'/%3E%3C/g%3E%3Cg id='scl'%3E%3Cline x1='0' y1='-14' x2='0' y2='12' stroke='%23162E51' stroke-width='1.4'/%3E%3Cline x1='-12' y1='-10' x2='12' y2='-10' stroke='%23162E51' stroke-width='1.4'/%3E%3Cline x1='-9' y1='12' x2='9' y2='12' stroke='%23162E51' stroke-width='1.6'/%3E%3Cpath d='M-12 -10 L-15 -2 L-9 -2 Z' fill='none' stroke='%23162E51' stroke-width='1.2'/%3E%3Cpath d='M12 -10 L9 -2 L15 -2 Z' fill='none' stroke='%23162E51' stroke-width='1.2'/%3E%3C/g%3E%3Cg id='anc'%3E%3Ccircle cx='0' cy='-12' r='3' fill='none' stroke='%23162E51' stroke-width='1.4'/%3E%3Cline x1='0' y1='-9' x2='0' y2='12' stroke='%23162E51' stroke-width='1.4'/%3E%3Cline x1='-7' y1='-5' x2='7' y2='-5' stroke='%23162E51' stroke-width='1.4'/%3E%3Cpath d='M-10 6 Q-10 14 0 14 Q10 14 10 6' fill='none' stroke='%23162E51' stroke-width='1.4'/%3E%3C/g%3E%3Cg id='pyr'%3E%3Cpath d='M-14 10 L0 -14 L14 10 Z' fill='none' stroke='%23162E51' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cline x1='0' y1='-14' x2='0' y2='10' stroke='%23162E51' stroke-width='0.8'/%3E%3Cline x1='-7' y1='-2' x2='7' y2='-2' stroke='%23162E51' stroke-width='0.8'/%3E%3C/g%3E%3Cg id='cmp'%3E%3Ccircle r='12' fill='none' stroke='%23162E51' stroke-width='1.4'/%3E%3Cpath d='M0 -10 L3 0 L0 10 L-3 0 Z' fill='%23162E51'/%3E%3Cpath d='M-10 0 L0 -3 L10 0 L0 3 Z' fill='none' stroke='%23162E51' stroke-width='1'/%3E%3C/g%3E%3Cg id='swd'%3E%3Cpath d='M0 -16 L3 -13 L3 8 L-3 8 L-3 -13 Z' fill='none' stroke='%23162E51' stroke-width='1.4'/%3E%3Cline x1='-7' y1='8' x2='7' y2='8' stroke='%23162E51' stroke-width='1.6'/%3E%3Cline x1='-1' y1='8' x2='-1' y2='14' stroke='%23162E51' stroke-width='1.4'/%3E%3Cline x1='1' y1='8' x2='1' y2='14' stroke='%23162E51' stroke-width='1.4'/%3E%3C/g%3E%3Cg id='fpr'%3E%3Cpath d='M-9 -2 C-9 -8 -4 -12 0 -12 C4 -12 9 -8 9 -2' fill='none' stroke='%23162E51' stroke-width='1.2'/%3E%3Cpath d='M-6 0 C-6 -5 -3 -8 0 -8 C3 -8 6 -5 6 0' fill='none' stroke='%23162E51' stroke-width='1.2'/%3E%3Cpath d='M-3 2 C-3 -2 -1 -4 0 -4 C1 -4 3 -2 3 2' fill='none' stroke='%23162E51' stroke-width='1.2'/%3E%3Cpath d='M-9 4 Q-7 8 -3 9' fill='none' stroke='%23162E51' stroke-width='1.2'/%3E%3Cpath d='M9 4 Q7 8 3 9' fill='none' stroke='%23162E51' stroke-width='1.2'/%3E%3Cline x1='-2' y1='6' x2='-1' y2='10' stroke='%23162E51' stroke-width='1.2'/%3E%3Cline x1='2' y1='6' x2='1' y2='10' stroke='%23162E51' stroke-width='1.2'/%3E%3C/g%3E%3Cg id='mag'%3E%3Ccircle cx='-4' cy='-4' r='8' fill='none' stroke='%23162E51' stroke-width='1.4'/%3E%3Cline x1='2' y1='2' x2='12' y2='12' stroke='%23162E51' stroke-width='1.6'/%3E%3C/g%3E%3Cg id='gav'%3E%3Cpath d='M-12 -6 L-4 -14 L8 -2 L0 6 Z' fill='none' stroke='%23162E51' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cline x1='-8' y1='-10' x2='-2' y2='-4' stroke='%23162E51' stroke-width='1.4'/%3E%3Cline x1='4' y1='2' x2='10' y2='8' stroke='%23162E51' stroke-width='1.4'/%3E%3Cline x1='-12' y1='14' x2='14' y2='14' stroke='%23162E51' stroke-width='1.6'/%3E%3C/g%3E%3Cg id='cap'%3E%3Cpath d='M-14 8 C-14 -2 -8 -10 0 -10 C8 -10 14 -2 14 8' fill='none' stroke='%23162E51' stroke-width='1.4'/%3E%3Cline x1='0' y1='-14' x2='0' y2='-10' stroke='%23162E51' stroke-width='1.4'/%3E%3Ccircle cx='0' cy='-15' r='1.5' fill='%23162E51'/%3E%3Cline x1='-15' y1='8' x2='15' y2='8' stroke='%23162E51' stroke-width='1.4'/%3E%3Cline x1='-15' y1='12' x2='15' y2='12' stroke='%23162E51' stroke-width='1.6'/%3E%3C/g%3E%3Cg id='rib'%3E%3Ccircle r='8' fill='none' stroke='%23162E51' stroke-width='1.4'/%3E%3Cpath d='M-6 6 L-9 16 L-3 14 L0 18 L3 14 L9 16 L6 6' fill='none' stroke='%23162E51' stroke-width='1.4' stroke-linejoin='round'/%3E%3Ccircle r='4' fill='none' stroke='%23162E51' stroke-width='1'/%3E%3C/g%3E%3Cg id='coi'%3E%3Ccircle r='12' fill='none' stroke='%23162E51' stroke-width='1.4'/%3E%3Ccircle r='9' fill='none' stroke='%23162E51' stroke-width='0.6'/%3E%3Cpath d='M0 -6 L1.8 -2 L6 -2 L2.6 1 L4 5 L0 2.5 L-4 5 L-2.6 1 L-6 -2 L-1.8 -2 Z' fill='%23162E51'/%3E%3C/g%3E%3Cg id='dol'%3E%3Ccircle r='12' fill='none' stroke='%23162E51' stroke-width='1.4'/%3E%3Cline x1='0' y1='-8' x2='0' y2='8' stroke='%23162E51' stroke-width='1.4'/%3E%3Cpath d='M-4 -3 C-4 -6 -1 -7 0 -7 C3 -7 4 -5 4 -4 C4 -1 0 -1 0 -1 C-3 -1 -4 1 -4 3 C-4 5 -1 7 0 7 C3 7 4 5 4 3' fill='none' stroke='%23162E51' stroke-width='1.4' stroke-linecap='round'/%3E%3C/g%3E%3Cg id='chk'%3E%3Ccircle r='12' fill='none' stroke='%23162E51' stroke-width='1.4'/%3E%3Cpath d='M-5 0 L-1 4 L6 -4' fill='none' stroke='%23162E51' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cg id='mdl'%3E%3Ccircle r='9' fill='none' stroke='%23162E51' stroke-width='1.4'/%3E%3Cpath d='M0 -6 L1.5 -1.5 L6 -1.5 L2.5 1 L4 5.5 L0 3 L-4 5.5 L-2.5 1 L-6 -1.5 L-1.5 -1.5 Z' fill='%23162E51'/%3E%3Cpath d='M-7 -7 L-12 -16 L-3 -16 L0 -10' fill='none' stroke='%23162E51' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cpath d='M7 -7 L12 -16 L3 -16 L0 -10' fill='none' stroke='%23162E51' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/g%3E%3C/defs%3E%3Crect width='540' height='540' fill='%23FBFCFD'/%3E%3Cg opacity='0.05'%3E%3Cuse href='%23shd' transform='translate(51.6 24.8) rotate(-18.0) scale(0.91)'/%3E%3Cuse href='%23mag' transform='translate(93.4 34.4) rotate(-23.5) scale(0.97)'/%3E%3Cuse href='%23shd' transform='translate(196.2 50.2) rotate(10.1) scale(1.08)'/%3E%3Cuse href='%23doc' transform='translate(286.7 11.9) rotate(15.3) scale(1.23)'/%3E%3Cuse href='%23col' transform='translate(331.8 52.8) rotate(-19.9) scale(1.06)'/%3E%3Cuse href='%23scl' transform='translate(429.9 55.2) rotate(11.5) scale(1.14)'/%3E%3Cuse href='%23anc' transform='translate(478.7 27.4) rotate(6.4) scale(1.34)'/%3E%3Cuse href='%23key' transform='translate(49.6 91.2) rotate(-13.6) scale(1.01)'/%3E%3Cuse href='%23str' transform='translate(186.4 113.2) rotate(16.7) scale(0.94)'/%3E%3Cuse href='%23coi' transform='translate(257.4 139.3) rotate(7.4) scale(1.19)'/%3E%3Cuse href='%23lck' transform='translate(422.2 103.3) rotate(21.3) scale(1.23)'/%3E%3Cuse href='%23eye' transform='translate(519.9 130.6) rotate(-13.5) scale(0.87)'/%3E%3Cuse href='%23doc' transform='translate(15.1 215.2) rotate(3.4) scale(1.24)'/%3E%3Cuse href='%23swd' transform='translate(110.1 215.2) rotate(-2.1) scale(1.00)'/%3E%3Cuse href='%23mag' transform='translate(195.0 206.2) rotate(-3.6) scale(1.17)'/%3E%3Cuse href='%23col' transform='translate(270.5 170.8) rotate(-22.6) scale(0.91)'/%3E%3Cuse href='%23coi' transform='translate(342.9 169.3) rotate(-5.9) scale(1.40)'/%3E%3Cuse href='%23mag' transform='translate(443.8 166.5) rotate(11.0) scale(1.22)'/%3E%3Cuse href='%23doc' transform='translate(515.9 184.2) rotate(-10.3) scale(0.94)'/%3E%3Cuse href='%23chk' transform='translate(102.9 270.0) rotate(-16.1) scale(1.35)'/%3E%3Cuse href='%23lau' transform='translate(211.3 270.4) rotate(-15.1) scale(1.06)'/%3E%3Cuse href='%23fpr' transform='translate(369.7 275.3) rotate(-0.6) scale(0.91)'/%3E%3Cuse href='%23lau' transform='translate(410.2 256.0) rotate(3.4) scale(0.89)'/%3E%3Cuse href='%23cwn' transform='translate(527.2 271.8) rotate(-18.7) scale(1.21)'/%3E%3Cuse href='%23lck' transform='translate(25.9 367.3) rotate(-3.8) scale(0.97)'/%3E%3Cuse href='%23chk' transform='translate(126.0 358.6) rotate(-5.1) scale(1.22)'/%3E%3Cuse href='%23fpr' transform='translate(190.2 333.5) rotate(-21.8) scale(0.86)'/%3E%3Cuse href='%23gav' transform='translate(254.9 324.0) rotate(6.6) scale(0.98)'/%3E%3Cuse href='%23eye' transform='translate(324.0 333.0) rotate(8.4) scale(0.97)'/%3E%3Cuse href='%23gav' transform='translate(505.5 333.3) rotate(-1.4) scale(1.07)'/%3E%3Cuse href='%23scl' transform='translate(111.6 422.5) rotate(11.5) scale(1.22)'/%3E%3Cuse href='%23str' transform='translate(169.1 436.6) rotate(15.0) scale(0.91)'/%3E%3Cuse href='%23mag' transform='translate(267.2 420.1) rotate(-11.1) scale(0.99)'/%3E%3Cuse href='%23cmp' transform='translate(363.8 443.5) rotate(-20.1) scale(1.21)'/%3E%3Cuse href='%23shd' transform='translate(449.6 447.3) rotate(17.4) scale(0.94)'/%3E%3Cuse href='%23key' transform='translate(521.1 446.0) rotate(-16.8) scale(0.85)'/%3E%3Cuse href='%23cmp' transform='translate(27.0 512.0) rotate(11.5) scale(1.28)'/%3E%3Cuse href='%23swd' transform='translate(97.1 490.5) rotate(23.4) scale(1.17)'/%3E%3Cuse href='%23chk' transform='translate(182.8 477.1) rotate(-1.2) scale(1.36)'/%3E%3Cuse href='%23eag' transform='translate(294.9 478.8) rotate(-15.7) scale(1.18)'/%3E%3Cuse href='%23stp' transform='translate(341.9 525.3) rotate(3.5) scale(1.17)'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 760px 760px;
  background-position: 0 0;
  background-attachment: local;
}

.chat-area {
  background-size: clamp(380px, 80vw, 540px) clamp(380px, 80vw, 540px);
}
@media screen and (max-width: 600px) { .chat-area { padding: 8px 8px 10px 8px; } }
@media screen and (max-width: 480px) { .chat-area { padding: 8px 7px 10px 7px; } }
@media screen and (max-width: 380px) { .chat-area { padding: 7px 6px 9px 6px; } }
@media screen and (max-width: 320px) { .chat-area { padding: 6px 5px 8px 5px; } }

.chat-sep-line { display: none; }

.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #25D366;
  border-radius: 50%;
  margin-left: 2px;
}

.typing-indicator {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 12px 14px;
  background: var(--wa-bubble-in);
  border: none;
  width: fit-content;
  max-width: 64px;
  align-self: flex-start;
  position: relative;
  margin: 2px 0 6px 8px;
  border-radius: 0 7.5px 7.5px 7.5px;
  box-shadow: var(--wa-shadow);
}
.typing-indicator::before {
  content: "";
  position: absolute;
  top: 0;
  left: -8px;
  width: 8px;
  height: 13px;
  background: var(--wa-bubble-in);
  -webkit-clip-path: polygon(100% 0, 100% 100%, 0 0);
  clip-path: polygon(100% 0, 100% 100%, 0 0);
  filter: drop-shadow(-1px 0.5px 0.4px rgba(11, 20, 26, 0.13));
}

.typing-dot {
  width: 6px;
  height: 6px;
  background: var(--gov-blue);
  opacity: 0.55;
  border-radius: 50%;
  animation: typingBounce 1.4s infinite ease-in-out;
}
.typing-dot:nth-child(1) { animation-delay: 0s; }
.typing-dot:nth-child(2) { animation-delay: 0.18s; }
.typing-dot:nth-child(3) { animation-delay: 0.36s; }

@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0) scale(1); opacity: 0.30; }
  30% { transform: translateY(-3px) scale(1.05); opacity: 1; }
}

.message {
  padding: clamp(7px, 1.7vw, 10px) clamp(11px, 2.6vw, 14px);
  font-size: clamp(13.5px, 3.4vw, 14.6px);
  line-height: 1.42;
  max-width: 100%;
  width: fit-content;
  min-width: clamp(52px, 14vw, 60px);
  position: relative;
  animation: msgSlideIn 0.18s ease-out;
  transform-origin: bottom;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
  border: 1px solid rgba(22, 46, 81, 0.08);
  background: var(--wa-bubble-in);
  color: var(--wa-text);
  border-radius: clamp(11px, 3vw, 14px);
  box-shadow: 0 1px 2px rgba(22, 46, 81, 0.05), 0 0 0 0.5px rgba(22, 46, 81, 0.02);
  letter-spacing: 0;
  font-family: var(--wa-font);
  font-weight: 400;
  box-sizing: border-box;
}

.message-group > .message:first-child:not(.user) {
  border-top-left-radius: 0;
}
.message-group.user-group > .message:first-child {
  border-top-right-radius: 0;
}
.message .msg-content {
  padding-right: clamp(50px, 13vw, 64px);
  display: block;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}
.message b, .message strong {
  word-break: break-word;
  overflow-wrap: anywhere;
  font-weight: 600;
  color: inherit;
}
.message a {
  word-break: break-all;
  color: var(--wa-link);
  text-decoration: underline;
}

.message:not(.user):not(.notice):not(.flat):not(.video-msg)::before { content: none !important; display: none !important; }
.message-group > .message:first-child:not(.user):not(.notice):not(.flat):not(.video-msg)::before {
  content: none !important;
  display: none !important;
}

.message-group {
  display: flex;
  flex-direction: column;
  gap: clamp(3px, 1vw, 4px);
  align-self: flex-start;
  max-width: min(86%, 720px);
  margin-bottom: clamp(7px, 1.8vw, 10px);
  margin-left: clamp(2px, 0.8vw, 4px);
  margin-right: 0;
  min-width: 0;
  box-sizing: border-box;
  position: relative;
}

.message-group:not(.user-group):not(.notice-group):not(.flat-group)::before {
  content: "";
  position: absolute;
  left: calc(-1 * clamp(28px, 9vw, 44px));
  bottom: 0;
  width: clamp(24px, 7.5vw, 34px);
  height: clamp(24px, 7.5vw, 34px);
  border-radius: 50%;
  background: #FFFFFF url("Logo.avif") center/cover no-repeat;
  border: clamp(1px, 0.4vw, 2px) solid #FFFFFF;
  box-shadow:
    0 0 0 1px var(--gov-line),
    0 2px 4px rgba(22, 46, 81, 0.12);
  z-index: 1;
}
.message-group.user-group::after {
  content: "";
  position: absolute;
  right: calc(-1 * clamp(28px, 9vw, 44px));
  bottom: 0;
  width: clamp(24px, 7.5vw, 34px);
  height: clamp(24px, 7.5vw, 34px);
  border-radius: 50%;
  background-color: var(--gov-blue);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(0,0,0,0.05) 100%),
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFFFFF'%3E%3Ccircle cx='12' cy='8.5' r='4.2'/%3E%3Cpath d='M4 20.5c0-3.5 3.6-6 8-6s8 2.5 8 6v0.5H4v-0.5z'/%3E%3C/svg%3E");
  background-size: cover, 64% 64%;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  border: clamp(1px, 0.4vw, 2px) solid #FFFFFF;
  box-shadow:
    0 0 0 1px var(--gov-blue),
    0 2px 4px rgba(0, 94, 162, 0.20);
  z-index: 1;
}
.message-group:not(.user-group):not(.notice-group):not(.flat-group) {
  margin-left: clamp(32px, 10vw, 48px);
}
.message-group.user-group {
  margin-right: clamp(32px, 10vw, 48px);
}

.message-group:not(.user-group):not(.notice-group):not(.flat-group):has(+ .message-group:not(.user-group):not(.notice-group):not(.flat-group))::before {
  display: none;
}
.message-group.user-group:has(+ .message-group.user-group)::after {
  display: none;
}

.message-group:not(.user-group):not(.notice-group):not(.flat-group):has(+ .message-group.notice-group + .message-group:not(.user-group):not(.notice-group):not(.flat-group))::before {
  display: none;
}
.message-group.user-group:has(+ .message-group.notice-group + .message-group.user-group)::after {
  display: none;
}

.message-group.user-group + .message-group.user-group,
.message-group:not(.user-group):not(.notice-group) + .message-group:not(.user-group):not(.notice-group) {
  margin-top: -3px;
}

.message-group.flat-group {
  width: 100%;
  max-width: 100%;
  align-self: stretch;
  margin-left: 0;
  margin-bottom: 6px;
}

.message-group.notice-group {
  align-self: center;
  margin: 8px auto;
  max-width: min(420px, 92%);
  width: auto;
  min-width: 0;
}

.message.notice {
  background: var(--wa-system-bg) !important;
  color: var(--wa-system-text) !important;
  text-align: center;
  font-size: 12.5px;
  letter-spacing: 0;
  font-weight: 400;
  border: none !important;
  padding: 7px 14px !important;
  max-width: 100% !important;
  width: auto !important;
  margin: 0 auto;
  line-height: 1.45;
  border-radius: 7.5px !important;
  box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  font-family: var(--wa-font);
}
.message.notice::before { display: none !important; }
.message.notice::after { display: none !important; }
.message.notice .msg-content { padding-right: 0; }
.message.notice i {
  color: var(--wa-system-text);
  margin-right: 4px;
}
.notice-group .msg-sender-label,
.notice-group .msg-timestamp { display: none !important; }

.message-group.user-group {
  align-self: flex-end;
  margin-left: 0;
  
}

.msg-sender-label { display: none; }
.msg-timestamp { display: none; }

.msg-meta-inline {
  position: absolute;
  right: clamp(7px, 2vw, 10px);
  bottom: clamp(4px, 1.4vw, 6px);
  display: inline-flex;
  align-items: center;
  gap: clamp(3px, 0.8vw, 4px);
  line-height: 1;
  pointer-events: none;
}
.message.notice .msg-meta-inline,
.message.flat .msg-meta-inline { display: none !important; }

.msg-time-inline {
  font-size: clamp(9.5px, 2.5vw, 10.5px);
  color: var(--gov-text-meta);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
  font-family: var(--wa-font);
  text-transform: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.msg-checks {
  display: inline-flex;
  align-items: center;
  color: var(--wa-tick-read);
  line-height: 1;
  margin-left: 1px;
}
.msg-checks svg {
  width: 16px;
  height: 11px;
  display: block;
}

.message.notice .msg-meta-inline { display: none; }
.message::after { content: none; }
.msg-meta { display: none !important; }
.flat-group .msg-timestamp { display: none !important; }

.ai,
.agent,
.system {
  background: var(--wa-bubble-in);
  color: var(--wa-text);
  align-self: flex-start;
  border: 1px solid rgba(22, 46, 81, 0.08);
  border-radius: clamp(11px, 3vw, 14px);
  box-shadow: 0 1px 2px rgba(22, 46, 81, 0.05), 0 0 0 0.5px rgba(22, 46, 81, 0.02);
}

.message.flat {
  padding: 3px !important;
  background: var(--wa-bubble-in) !important;
  border: none !important;
  max-width: 100% !important;
  width: 100% !important;
  align-self: stretch !important;
  border-radius: 7.5px !important;
  overflow: hidden;
  min-width: 0;
  box-sizing: border-box;
  box-shadow: var(--wa-shadow);
}
.message.flat .msg-content { padding-right: 0; }

.message.video-msg {
  max-width: clamp(300px, 90vw, 540px) !important;
  width: 100% !important;
  padding: 4px !important;
  background: var(--wa-bubble-in) !important;
  border: 1px solid rgba(22, 46, 81, 0.08) !important;
  align-self: flex-start !important;
  border-radius: clamp(12px, 3vw, 16px) !important;
  overflow: hidden;
  box-sizing: border-box;
  box-shadow: 0 1px 2px rgba(22, 46, 81, 0.05), 0 0 0 0.5px rgba(22, 46, 81, 0.02);
}
.message.video-msg .msg-content { padding-right: 0; }
.message.video-msg::before { content: none !important; display: none !important; }
.message.video-msg .msg-meta-inline { display: none !important; }

.message-group.flat-group:has(.video-container) {
  max-width: clamp(300px, 90vw, 540px);
  width: 100%;
  align-self: flex-start;
}

.video-container {
  position: relative;
  overflow: hidden;
  margin: 0;
  background: #000;
  line-height: 0;
  width: 100%;
  max-height: clamp(45vh, 60vw, 65vh);
  border-radius: clamp(8px, 2vw, 12px);
  border: none;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-container video {
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: clamp(45vh, 60vw, 65vh);
  display: block;
  object-fit: contain;
}

.big-play-btn { display: none !important; }

.unmute-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border: none;
  font-family: var(--wa-font);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  z-index: 12;
  border-radius: 999px;
  -webkit-appearance: none;
  animation: unmutePulse 2.4s ease-in-out infinite;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.unmute-badge i { font-size: 11px; }

@keyframes unmutePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

.custom-controls,
.control-btn,
.volume-container,
.volume-slider,
.big-play-btn,
#bigPlayBtn { display: none !important; }

.video-container video::-webkit-media-controls,
.video-container video::-webkit-media-controls-panel,
.video-container video::-webkit-media-controls-play-button,
.video-container video::-webkit-media-controls-start-playback-button,
.video-container video::-webkit-media-controls-fullscreen-button,
.video-container video::-webkit-media-controls-overlay-play-button,
.video-container video::-webkit-media-controls-enclosure,
.video-container video::-webkit-media-controls-timeline,
.video-container video::-webkit-media-controls-current-time-display,
.video-container video::-webkit-media-controls-time-remaining-display,
.video-container video::-webkit-media-controls-mute-button,
.video-container video::-webkit-media-controls-toggle-closed-captions-button,
.video-container video::-webkit-media-controls-volume-slider {
  display: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.video-container video {
  -webkit-appearance: none;
  appearance: none;
}

.user {
  background: var(--wa-bubble-out);
  color: var(--gov-navy);
  align-self: flex-end;
  border: 1px solid rgba(0, 94, 162, 0.20);
  border-radius: clamp(11px, 3vw, 14px);
  font-size: clamp(13.5px, 3.4vw, 14.6px);
  line-height: 1.42;
  font-weight: 400;
  width: fit-content;
  white-space: normal;
  max-width: 100%;
  box-shadow: 0 1px 2px rgba(0, 94, 162, 0.10), 0 0 0 0.5px rgba(0, 94, 162, 0.04);
  position: relative;
}

.user::before { content: none !important; display: none !important; }
.message-group.user-group > .user:first-child::before {
  content: none !important;
  display: none !important;
}
.user .msg-time-inline { color: var(--gov-blue-dk); opacity: 0.85; font-weight: 500; }
.user .msg-checks { color: var(--gov-blue); }
.user b, .user strong { color: var(--gov-navy); font-weight: 700; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(2px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes msgSlideIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.fade-out {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.input-area {
  padding: 10px 14px 12px 14px;
  padding-bottom: calc(12px + var(--safe-bottom));
  background: var(--gov-bg-3);
  border-top: 1px solid var(--gov-line);
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  font-family: var(--wa-font);
  z-index: 6;
}
.input-area::before { content: none; display: none; }

.chat-input-container {
  display: flex;
  gap: 10px;
  background: transparent;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding: 0;
}

.input-box {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  background: #FFFFFF;
  border: 1px solid var(--gov-line);
  min-height: 44px;
  padding: 0 8px 0 0;
  border-radius: 24px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  position: relative;
  box-shadow: none;
  min-width: 0;
}
.input-box:focus-within {
  background: #FFFFFF;
  border-color: var(--gov-blue);
  box-shadow: 0 0 0 2px rgba(0, 94, 162, 0.10);
}

.input-box::before { content: none; display: none; }

.input-box:focus-within {
  background: var(--wa-input-pill);
  border: none;
}
.input-box:focus-within::before { content: none; }

.input-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gov-text-meta);
  font-size: 20px;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0 8px;
  transition: color 0.15s ease;
  width: 32px;
  height: 32px;
}
.input-icon:hover { color: var(--gov-blue); }

.input-emoji { padding: 0 4px 0 12px; font-size: 22px; color: var(--gov-text-meta); }
.input-attach { font-size: 19px; transform: rotate(-45deg); padding: 0 4px; color: var(--gov-text-meta); }
.input-camera { font-size: 19px; padding: 0 12px 0 4px; color: var(--gov-text-meta); }

.chat-input {
  flex: 1 1 auto;
  padding: 11px 4px 11px 6px;
  border: none;
  font-size: 15.5px;
  font-family: var(--wa-font);
  color: var(--gov-text);
  background: transparent;
  outline: none;
  transition: none;
  min-height: 44px;
  line-height: 22px;
  -webkit-appearance: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  min-width: 0;
  letter-spacing: 0;
  font-weight: 400;
}

.chat-input::placeholder {
  color: var(--gov-text-meta);
  font-style: normal;
  opacity: 0.85;
  font-weight: 400;
}

input.chat-input,
input[type="text"].chat-input,
input[type="number"].chat-input,
input[type="tel"].chat-input,
input[type="email"].chat-input,
input[type="search"].chat-input {
  font-size: 16px !important;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.chat-input:focus { border: none; background: transparent; }

.send-btn {
  padding: 0;
  width: 44px;
  height: 44px;
  min-width: 44px;
  background: var(--gov-blue);
  color: #FFFFFF;
  border: none;
  font-size: 17px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.1s ease, box-shadow 0.18s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  -webkit-appearance: none;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 94, 162, 0.30);
}
.send-btn:hover {
  background: var(--gov-navy);
  box-shadow: 0 2px 6px rgba(22, 46, 81, 0.35);
}
.send-btn:active {
  background: var(--gov-blue-dk);
  transform: scale(0.95);
  box-shadow: 0 1px 2px rgba(0, 94, 162, 0.25);
}
.send-btn:disabled { background: var(--gov-blue); cursor: pointer; opacity: 1; }
.send-btn.has-text:disabled,
.send-btn.has-text { opacity: 1; background: var(--gov-blue); }
.send-btn i { line-height: 1; }

.dropdown-container {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  flex-wrap: wrap;
  padding: 4px 0;
}

.chat-select {
  flex: 1;
  min-width: 0;
  padding: 11px 38px 11px 16px;
  border: none;
  font-size: 14.5px;
  font-family: var(--wa-font);
  color: var(--wa-text);
  background: var(--wa-input-pill);
  outline: none;
  min-height: 42px;
  cursor: pointer;
  max-width: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%2354656F' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  border-radius: 21px;
  box-shadow: none;
}

.chat-select:focus {
  border: none;
  box-shadow: none;
  background-color: var(--wa-input-pill);
}

.dropdown-confirm-btn {
  width: auto !important;
  min-width: 96px !important;
  height: 42px !important;
  padding: 0 22px !important;
  background: var(--wa-send) !important;
  color: #fff !important;
  border: none !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  -webkit-appearance: none;
  border-radius: 21px !important;
  transition: background 0.15s ease;
  text-transform: none;
  font-family: var(--wa-font) !important;
}
.dropdown-confirm-btn:hover:not(:disabled) { background: var(--wa-send-hover) !important; }
.dropdown-confirm-btn:disabled {
  background: #BFD9D2 !important;
  color: #fff !important;
  cursor: not-allowed;
}

.mini-footer,
.ai-brand-bar { display: none; }

.mobile-navbar {
  display: flex;
  justify-content: space-around;
  padding: 6px 0;
  padding-bottom: max(6px, var(--safe-bottom));
  border-top: 1px solid var(--wa-divider);
  background: var(--wa-bg-app);
  flex-shrink: 0;
  font-family: var(--wa-font);
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: var(--wa-text-meta);
  cursor: pointer;
  padding: 6px 8px;
  position: relative;
  flex: 1;
  transition: color 0.15s ease;
  border-radius: 8px;
}
.nav-item i {
  font-size: 20px;
  position: relative;
  z-index: 1;
  opacity: 0.85;
}
.nav-item span {
  font-size: 11px;
  font-weight: 500;
  position: relative;
  z-index: 1;
  letter-spacing: 0;
  text-transform: none;
}
.nav-item.active { color: var(--wa-send); }
.nav-item.active i { opacity: 1; }
.nav-item.active span { font-weight: 600; }
.nav-item:hover { color: var(--wa-text); }
.nav-item.active:hover { color: var(--wa-send); }

.progress-bar-container,
.progress-bar { display: none !important; }

.hidden { display: none !important; }

.options-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  padding: 6px 4px;
  width: 100%;
  box-sizing: border-box;
}

.chat-action-btn {
  background: #FFFFFF;
  color: var(--wa-send);
  border: 1px solid var(--wa-send);
  padding: 9px 22px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
  letter-spacing: 0;
  -webkit-appearance: none;
  white-space: normal;
  word-break: break-word;
  text-align: center;
  font-family: var(--wa-font);
  border-radius: 24px;
  box-shadow: 0 1px 1px rgba(11, 20, 26, 0.06);
  min-height: 40px;
  max-width: 100%;
  flex: 0 1 auto;
  text-transform: none;
}
.chat-action-btn:focus-visible,
.send-btn:focus-visible,
.ps-btn:focus-visible {
  outline: 2px solid var(--wa-send);
  outline-offset: 2px;
}
.chat-action-btn:hover {
  background: rgba(0, 94, 162, 0.08);
  color: var(--wa-send-hover);
  border-color: var(--wa-send-hover);
  box-shadow: 0 1px 2px rgba(11, 20, 26, 0.1);
}
.chat-action-btn:active {
  background: rgba(0, 94, 162, 0.14);
  transform: scale(0.98);
}
.chat-action-btn.secondary {
  background: #FFFFFF;
  color: var(--wa-text-2);
  border-color: var(--wa-divider-2);
}
.chat-action-btn.secondary:hover {
  background: rgba(11, 20, 26, 0.04);
  color: var(--wa-text);
  border-color: var(--wa-text-meta);
}

.embed-loader-container,
.embed1-loader-container,
.embed2-loader-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  background: var(--wa-bubble-in);
  border: none;
  padding: 12px 14px;
  width: 100%;
  max-width: 100%;
  margin: 0;
  position: relative;
  border-radius: 7.5px;
  box-shadow: var(--wa-shadow);
  box-sizing: border-box;
  min-width: 0;
  overflow: hidden;
  font-family: var(--wa-font);
}

.embed-loader-spinner {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  position: relative;
  border-radius: 50%;
}
.embed-loader-spinner::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--wa-divider);
  border-radius: 50%;
}
.embed-loader-spinner::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  border-top-color: var(--wa-send);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

.embed-loader-checkmark {
  display: none;
  width: 22px;
  height: 22px;
  border: 2px solid var(--wa-send);
  background: var(--wa-send);
  color: #fff;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
  border-radius: 50%;
  animation: scaleIn 0.26s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.embed-loader-container.success {
  background: var(--wa-bubble-in);
  border: none;
}
.embed-loader-container.success .embed-loader-spinner { display: none; }
.embed-loader-container.success .embed-loader-checkmark { display: flex; }

.embed-loader-status-text {
  font-size: 14px;
  font-weight: 400;
  color: var(--wa-text);
  letter-spacing: 0;
  flex: 1;
  min-width: 0;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  line-height: 1.4;
  font-family: var(--wa-font);
}
.embed-loader-container.success .embed-loader-status-text {
  color: var(--wa-text);
  font-weight: 400;
}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes scaleIn {
  from { transform: scale(0.4); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

.info-box {
  padding: 10px 12px;
  border: none;
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  background: var(--wa-bubble-in);
  color: var(--wa-text);
  width: 100%;
  max-width: 100%;
  position: relative;
  border-radius: 7.5px;
  box-shadow: var(--wa-shadow);
  box-sizing: border-box;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  font-family: var(--wa-font);
}
.info-box::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 8px;
  bottom: 8px;
  width: 4px;
  background: var(--wa-quoted-border);
  border-radius: 4px;
}
.info-box h3,
.info-box p {
  padding-left: 10px;
}
.info-box h3 {
  margin: 0 0 4px 0;
  font-size: 13.5px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--wa-quoted-border);
  letter-spacing: 0;
}
.info-box h3 i { font-size: 12px; flex-shrink: 0; color: var(--wa-quoted-border); }
.info-box p {
  margin: 0 0 4px;
  padding-left: 10px;
  color: var(--wa-text);
  font-size: 13.5px;
  line-height: 1.45;
}
.info-box p:last-child { margin-bottom: 0; }
.info-box p b { color: var(--wa-text); font-weight: 600; }

.audio-player {
  background: #FFFFFF;
  padding: 12px 14px 12px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 360px;
  margin: 0;
  border: 1px solid var(--gov-line);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(22, 46, 81, 0.06);
  box-sizing: border-box;
  min-width: 0;
  position: relative;
  font-family: var(--wa-font);
}

.message.flat:has(.audio-player) {
  width: auto !important;
  max-width: 360px !important;
  align-self: flex-start !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.message-group.flat-group:has(.audio-player) {
  align-self: flex-start;
  max-width: 360px;
  margin-left: 8px;
}

.audio-control {
  width: 42px;
  height: 42px;
  min-width: 42px;
  background: var(--gov-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
  color: #FFFFFF;
  font-size: 14px;
  flex-shrink: 0;
  border-radius: 50%;
  position: relative;
  border: none;
  -webkit-appearance: none;
  box-shadow: 0 1px 3px rgba(0, 94, 162, 0.30);
}
.audio-control::before { content: none; display: none; }
.audio-control::after { content: none; display: none; }
.audio-control:hover {
  background: var(--gov-navy);
  box-shadow: 0 2px 6px rgba(22, 46, 81, 0.30);
}
.audio-control:active {
  background: var(--gov-blue-dk);
  transform: scale(0.94);
  box-shadow: 0 1px 2px rgba(0, 94, 162, 0.25);
}
.audio-control i { font-size: 14px; line-height: 1; }

.audio-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  overflow: hidden;
  min-width: 0;
  padding-right: 4px;
}
.audio-info::before {
  content: "VOICE MEMO";
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--gov-blue);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-family: var(--wa-font);
  line-height: 1;
  margin-bottom: 1px;
}

.audio-waveform-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  height: 22px;
  cursor: pointer;
  overflow: hidden;
  width: 100%;
  position: relative;
}
.audio-waveform-container::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 11px;
  height: 11px;
  background: var(--wa-send);
  border-radius: 50%;
  pointer-events: none;
  border: 2px solid var(--wa-bubble-in);
  display: none;
}

.audio-bar {
  flex: 1;
  min-width: 2px;
  max-width: 3px;
  background: #D7DCE0;
  transition: height 0.1s, background 0.15s;
  align-self: center;
  border-radius: 999px;
  opacity: 1;
}
.audio-bar.played {
  background: var(--gov-blue);
  opacity: 1;
}

.audio-time {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  color: var(--gov-text-meta);
  font-variant-numeric: tabular-nums;
  font-family: var(--wa-font);
  letter-spacing: 0.02em;
  text-transform: none;
}
.audio-time::before {
  content: "";
  display: none;
}

.premium-card {
  background: var(--wa-bubble-in);
  overflow: hidden;
  margin: 0 0 4px 0;
  width: 100%;
  max-width: 100%;
  border: none;
  border-radius: 7.5px;
  box-shadow: var(--wa-shadow);
  box-sizing: border-box;
  min-width: 0;
  font-family: var(--wa-font);
}

.card-header {
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--wa-divider);
  background: transparent;
}

.card-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--wa-text-2);
  letter-spacing: 0;
  font-family: var(--wa-font);
}

.card-hero {
  background: linear-gradient(135deg, #00A884 0%, #06CF9C 100%);
  color: #fff;
  padding: 20px 18px;
  position: relative;
  overflow: hidden;
}

.hero-label {
  font-size: 12px;
  opacity: 0.92;
  margin-bottom: 6px;
  letter-spacing: 0;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.95);
}

.hero-value {
  font-size: clamp(22px, 6vw, 30px);
  font-weight: 600;
  margin-bottom: 16px;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: #fff;
  word-break: break-word;
}

.hero-stats {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  padding-top: 12px;
  position: relative;
  z-index: 1;
  gap: 12px;
}

.stat-item span {
  display: block;
  font-size: 11px;
  opacity: 0.92;
  margin-bottom: 3px;
  letter-spacing: 0;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.95);
}

.stat-item {
  min-width: 0;
  flex: 1;
}
.stat-item b {
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0;
  color: #fff;
  word-break: break-word;
  display: block;
}

.card-content { padding: 14px 16px; }

.data-grid {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.data-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--wa-divider);
  min-width: 0;
}
.data-item:last-child { border-bottom: none; padding-bottom: 0; }

.data-label {
  font-size: 13px;
  color: var(--wa-text-meta);
  font-weight: 400;
  flex-shrink: 0;
  letter-spacing: 0;
  min-width: 0;
}

.data-value {
  font-size: 13.5px;
  color: var(--wa-text);
  font-weight: 500;
  text-align: right;
  word-break: break-word;
  overflow-wrap: anywhere;
  letter-spacing: 0;
  min-width: 0;
  flex: 1;
}
.data-value.success { color: var(--wa-send); }
.data-value.warning { color: var(--ps-warning); }

.card-footer { padding: 4px 14px 14px; }

.confirm-panel-btn {
  width: 100%;
  background: var(--wa-send);
  color: #fff;
  border: none;
  padding: 12px 16px;
  font-weight: 500;
  font-size: 14.5px;
  letter-spacing: 0;
  cursor: pointer;
  transition: background 0.15s ease;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--wa-font);
  border-radius: 24px;
  text-transform: none;
}
.confirm-panel-btn:hover { background: var(--wa-send-hover); }
.confirm-panel-btn:active { background: var(--wa-send); transform: scale(0.99); }

.embed-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  background: #fff;
  z-index: 1001;
  display: none;
  overflow: hidden;
}
.embed-overlay.active { display: block; }
.embed-overlay iframe {
  width: 100%;
  height: 100%;
  height: 100dvh;
  border: none;
  display: block;
  -webkit-overflow-scrolling: touch;
}

@media screen and (max-width: 600px) {
  .app { max-width: 100%; }
  
  .message.flat {
    max-width: 100% !important;
    width: 100% !important;
  }
  .message.video-msg {
    max-width: 360px !important;
    width: 100% !important;
  }
  .message-group.flat-group {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
  }
  
  .typing-indicator { padding: 12px 14px; max-width: 64px; }
  .info-box,
  .embed-loader-container,
  .embed1-loader-container,
  .embed2-loader-container,
  .audio-player,
  .premium-card {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
  }
  .embed-overlay iframe {
    width: 100%;
    height: 100%;
    height: 100dvh;
  }
  
  .premium-card .card-hero { padding: 18px 16px; }
  .premium-card .hero-value { font-size: clamp(20px, 6.5vw, 26px); }
  .premium-card .card-content { padding: 14px; }
  .premium-card .data-item { gap: 8px; }
}

@media screen and (max-width: 480px) {
  
  .typing-indicator { padding: 11px 13px; max-width: 62px; margin-left: 6px; }
  .typing-dot { width: 6px; height: 6px; }
  .embed-loader-container,
  .embed1-loader-container,
  .embed2-loader-container {
    padding: 12px 14px;
    gap: 12px;
    border-radius: 7.5px;
  }
  .embed-loader-spinner,
  .embed-loader-checkmark { width: 20px; height: 20px; }
  .embed-loader-checkmark { font-size: 11px; }
  .embed-loader-status-text { font-size: 13.5px; line-height: 1.4; }
  .info-box { padding: 9px 12px; font-size: 13.5px; border-radius: 7.5px; }
  .info-box h3 { font-size: 13px; gap: 6px; }
  .info-box p { font-size: 13px; line-height: 1.45; }
  .msg-time-inline { font-size: 11px; }
  .audio-player { padding: 10px 12px 10px 10px; gap: 10px; border-radius: 11px; max-width: 340px; }
  .audio-control { width: 38px; height: 38px; min-width: 38px; font-size: 13px; }
  .audio-info::before { font-size: 9px; letter-spacing: 0.12em; }
  .audio-waveform-container { height: 20px; }
  .message.flat:has(.audio-player) { max-width: 340px !important; }
  .message-group.flat-group:has(.audio-player) { max-width: 340px; }
  .premium-card { border-radius: 7.5px; }
  .premium-card .card-header { padding: 10px 14px; }
  .premium-card .card-title { font-size: 12.5px; }
  .premium-card .card-hero { padding: 16px 14px; }
  .premium-card .card-content { padding: 12px 14px; }
  .premium-card .hero-stats { gap: 8px; padding-top: 12px; }
  .stat-item span { font-size: 11px; }
  .stat-item b { font-size: 13px; }
  .data-label { font-size: 12.5px; }
  .data-value { font-size: 13px; }
  .data-grid { gap: 10px; }
  
}

@media screen and (max-width: 360px) {
  
  .typing-indicator { padding: 9px 12px; max-width: 64px; gap: 4px; }
  .typing-dot { width: 5px; height: 5px; }
  .chat-action-btn { padding: 8px 18px; font-size: 13px; min-height: 38px; }
  .options-container { gap: 6px; }
  .msg-time-inline { font-size: 10.5px; letter-spacing: 0; }
  .msg-meta-inline { gap: 3px; right: 6px; bottom: 3px; }
  .embed-loader-container,
  .embed1-loader-container,
  .embed2-loader-container {
    padding: 10px 12px;
    gap: 10px;
  }
  .embed-loader-spinner,
  .embed-loader-checkmark { width: 18px; height: 18px; }
  .embed-loader-status-text { font-size: 13px; }
  .info-box { padding: 9px 11px; font-size: 13px; }
  .info-box h3 { font-size: 12.5px; }
  .info-box p { font-size: 12.5px; }
  .audio-player { padding: 9px 11px 9px 9px; gap: 9px; max-width: 300px; border-radius: 10px; }
  .audio-control { width: 36px; height: 36px; min-width: 36px; font-size: 12px; }
  .audio-info::before { font-size: 8.5px; }
  .audio-waveform-container { height: 18px; }
  .audio-time { font-size: 10.5px; }
  .message.flat:has(.audio-player) { max-width: 300px !important; }
  .message-group.flat-group:has(.audio-player) { max-width: 300px; }
  .premium-card .card-hero { padding: 14px 12px; }
  .premium-card .card-content { padding: 10px 12px; }
  .premium-card .card-header { padding: 9px 12px; }
  .premium-card .card-title { font-size: 12px; }
  .premium-card .card-footer { padding: 4px 12px 12px; }
  .hero-value { font-size: clamp(18px, 6vw, 22px); }
  .stat-item b { font-size: 12.5px; }
  .stat-item span { font-size: 10.5px; }
  .data-label { font-size: 12px; }
  .data-value { font-size: 12.5px; }
  
}

@media screen and (max-width: 320px) {
  
  .input-area { padding: 8px 8px; padding-bottom: calc(8px + var(--safe-bottom)); }
  .chat-input-container { gap: 8px; }
  .input-box { min-height: 40px; border-radius: 22px; }
  .send-btn { width: 40px; height: 40px; min-width: 40px; font-size: 16px; }
  .input-emoji { padding: 0 2px 0 10px; font-size: 20px; }
  .input-attach { font-size: 17px; padding: 0 3px; }
  .input-camera { font-size: 17px; padding: 0 10px 0 2px; }
  .chat-input { font-size: 16px; padding: 9px 4px; min-height: 40px; }
  .msg-meta-inline { right: 5px; bottom: 3px; }
  .typing-indicator { padding: 8px 11px; max-width: 58px; gap: 3px; }
  .typing-dot { width: 5px; height: 5px; }
  .chat-input { font-size: 16px; min-height: 38px; padding: 7px 6px; }
  .input-box { min-height: 38px; }
  .input-emoji { font-size: 20px; padding: 0 4px 0 10px; }
  .input-attach { font-size: 18px; padding: 0 4px; }
  .input-camera { font-size: 18px; padding: 0 8px 0 4px; }
  .send-btn { width: 38px; height: 38px; min-width: 38px; font-size: 16px; }
  .input-area { padding: 4px 8px; }
  .nav-item i { font-size: 18px; }
  .nav-item span { font-size: 10px; }
  .embed-loader-container,
  .embed1-loader-container,
  .embed2-loader-container { padding: 9px 11px; gap: 9px; border-radius: 7.5px; }
  .embed-loader-spinner,
  .embed-loader-checkmark { width: 16px; height: 16px; border-width: 2px; }
  .embed-loader-status-text { font-size: 12.5px; }
  .info-box { padding: 8px 10px; font-size: 12.5px; border-radius: 7.5px; }
  .info-box h3 { font-size: 12px; }
  .info-box p { font-size: 12.5px; }
  .audio-player { padding: 8px 10px 8px 8px; gap: 8px; border-radius: 10px; max-width: 260px; }
  .audio-control { width: 34px; height: 34px; min-width: 34px; font-size: 11px; }
  .audio-info::before { font-size: 8px; letter-spacing: 0.10em; }
  .audio-time { font-size: 10px; }
  .message.flat:has(.audio-player) { max-width: 260px !important; }
  .message-group.flat-group:has(.audio-player) { max-width: 260px; }
  .premium-card { border-radius: 7.5px; }
  .premium-card .card-hero { padding: 12px 10px; }
  .premium-card .hero-value { font-size: 18px; margin-bottom: 12px; }
  .premium-card .card-content { padding: 10px; }
  .premium-card .card-header { padding: 8px 10px; }
  .premium-card .card-title { font-size: 11px; }
  .premium-card .data-label { font-size: 11px; }
  .premium-card .data-value { font-size: 12px; }
  .premium-card .card-footer { padding: 4px 10px 10px; }
  .confirm-panel-btn { font-size: 13px; padding: 10px; }
  
  .unmute-badge { font-size: 10.5px; padding: 6px 10px; gap: 6px; top: 8px; right: 8px; }
  .msg-time-inline { font-size: 10px; }
}

@media screen and (min-width: 321px) and (max-width: 375px) {
  .message { font-size: 14px; line-height: 19px; }
  .chat-action-btn { padding: 8px 18px; font-size: 13.5px; }
  .chat-input { font-size: 16px; min-height: 40px; padding: 8px 6px; }
  .input-box { min-height: 40px; }
  .send-btn { width: 40px; height: 40px; min-width: 40px; font-size: 17px; }
  .hero-value { font-size: 24px; }
}

@media screen and (min-width: 431px) and (max-width: 600px) {
  .message { font-size: 14.5px; line-height: 20px; }
  .chat-input { font-size: 16px; }
}

@media screen and (min-width: 601px) {
  body:not(.presell-active) {
    background: #d2dbdc;
  }
  body:not(.presell-active) .app {
    max-width: 100%;
    width: 100%;
    height: 100dvh;
    margin: 0;
    background: var(--wa-header);
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
  }
  .message { font-size: 14.6px; line-height: 20px; }
  .message-group { max-width: 65%; }
  .message-group.flat-group { max-width: 720px; }
  .chat-area {
    padding: 16px 6% 18px 6%;
    align-items: stretch;
  }
  .chat-input { font-size: 15px; min-height: 44px; }
  .send-btn { width: 46px; height: 46px; min-width: 46px; }
  .chat-header { padding: 10px 16px; }
  .input-area { padding: 8px 16px; padding-bottom: max(8px, var(--safe-bottom)); }
  .input-box { max-width: none; margin: 0; width: auto; flex: 1 1 auto; }
  .chat-input-container { max-width: none; margin: 0; width: 100%; }
}

@media screen and (min-width: 901px) {
  .chat-area { padding: 18px 7%; }
  .message-group { max-width: 60%; }
  .message-group.flat-group { max-width: 760px; }
  .chat-header { padding: 10px 22px; }
  .input-area { padding: 10px 22px; }
}

@media screen and (max-height: 500px) and (orientation: landscape) {
  .mobile-navbar { padding: 3px 0; }
  .nav-item {
    flex-direction: row;
    gap: 5px;
    padding: 4px 8px;
  }
  .nav-item i { font-size: 16px; }
  .nav-item span { font-size: 11px; }
  .chat-input { min-height: 36px; padding: 7px 6px; font-size: 16px; }
  .input-box { min-height: 36px; }
  .input-emoji { font-size: 19px; padding: 0 4px 0 8px; }
  .input-attach { font-size: 17px; padding: 0 4px; }
  .input-camera { font-size: 17px; padding: 0 6px 0 4px; }
  .send-btn { width: 36px; height: 36px; min-width: 36px; font-size: 15px; }
  .input-area { padding: 4px 8px; }
}

@media screen and (max-width: 290px) {
  .message { font-size: 12.5px; padding: 5px 6px 7px 8px; }
  .options-container {
    flex-direction: column;
    align-items: stretch;
  }
  .chat-action-btn {
    text-align: center;
    font-size: 12px;
    padding: 7px 14px;
  }
}

@supports (padding-top: env(safe-area-inset-top)) {
  .mobile-navbar { padding-bottom: max(6px, env(safe-area-inset-bottom)); }
  .input-area { padding-bottom: max(5px, env(safe-area-inset-bottom)); }
  .embed-overlay iframe { padding-top: env(safe-area-inset-top); }
}

/* ============================================================
   GOV REFINEMENT LAYER — #122f4e navy + flag red, no yellow
   Applied to presell page + chat + modals + cookie banner
   ============================================================ */

/* --- Typography: Source Sans Pro body + Merriweather hero headings --- */
body, .presell, .presell *, .app, .app * {
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.presell h1,
.presell .ps-hero h1,
.presell .ps-title,
.presell h2,
.ps-cta-section h3,
.ps-modal-content h2 {
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ps-navy);
}

.presell h1 em,
.presell .ps-hero h1 em,
.presell em,
.presell i.fa-italic,
em {
  font-style: normal;
}
.presell h1 em,
.presell .ps-hero h1 em {
  color: var(--ps-navy);
  background: linear-gradient(to bottom, transparent 65%, rgba(178, 34, 52, 0.18) 65%, rgba(178, 34, 52, 0.18) 92%, transparent 92%);
  padding: 0 2px;
}

.presell b, .presell strong { color: var(--ps-navy); font-weight: 700; }

/* --- Presell hero: cleaner gov-style header section --- */
.ps-hero {
  background: var(--ps-white);
  border-bottom: 2px solid var(--gov-red);
}
.ps-hero::before { display: none; }
.ps-hero .ps-section-inner::before { display: none; }

/* --- Presell section dividers (the diamond decorations) — simplified --- */
.ps-section.bordered::after,
.ps-section.bordered + .ps-section::before { display: none; }

.ps-section.bordered { border-bottom-color: var(--gov-line); }
.ps-section.gray { background: var(--gov-bg-3); }

/* --- Section numbers refined --- */
.ps-section-num .num {
  color: var(--gov-red);
  font-family: var(--font-mono);
  font-weight: 700;
}
.ps-section-num .lbl {
  color: var(--ps-navy);
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* --- Top accent bar at the very top: red gov stripe --- */
.ps-top-accent {
  background: var(--gov-red);
  height: 3px;
}

/* --- Presell CTA button — cleaner gov primary --- */
.ps-cta {
  background: var(--ps-navy);
  border: 1px solid var(--ps-navy);
  color: var(--ps-white);
  border-radius: 4px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 700;
  box-shadow: none;
  min-height: 52px;
  font-size: 0.95rem;
}
.ps-cta:hover {
  background: var(--gov-navy-dk);
  border-color: var(--gov-navy-dk);
  box-shadow: none;
}
.ps-cta-progress { background: rgba(255, 255, 255, 0.08); }
.ps-cta-progress-fill { background: rgba(255, 255, 255, 0.18); }

.ps-cta.is-locked {
  background: var(--gov-bg-2);
  border-color: var(--gov-line);
  color: var(--gov-text-meta);
  cursor: not-allowed;
}
.ps-cta.is-locked:hover {
  background: var(--gov-bg-2);
  border-color: var(--gov-line);
}
.ps-cta.is-locked .ps-cta-lock { color: var(--gov-text-meta); opacity: 0.8; }
.ps-cta.is-locked .ps-cta-arrow { opacity: 0.35; }
.ps-cta.is-locked .ps-cta-progress { background: var(--ps-white); }
.ps-cta.is-locked .ps-cta-progress-fill { background: rgba(18, 47, 78, 0.08); }

.ps-cta.is-unlocked {
  background: var(--ps-navy);
  border-color: var(--ps-navy);
  color: var(--ps-white);
}
.ps-cta.is-unlocked:hover {
  background: var(--gov-navy-dk);
  border-color: var(--gov-navy-dk);
}
.ps-cta.is-unlocked .ps-cta-lock { display: none; }

/* --- Alerts (info box) — gov style --- */
.ps-alert {
  background: var(--gov-blue-tint-2);
  border-left: 4px solid var(--ps-navy);
  border-radius: 0 4px 4px 0;
  padding: 14px 16px;
}
.ps-alert-icon {
  color: var(--ps-navy);
  background: transparent;
}
.ps-alert .t {
  color: var(--ps-navy);
  font-weight: 700;
}
.ps-alert .s {
  color: var(--gov-text-2);
}

/* --- Category rows refined --- */
.ps-cat-row {
  background: var(--ps-white);
  border: 1px solid var(--gov-line);
  border-radius: 4px;
}
.ps-cat-row .ps-cat-icon {
  background: var(--gov-blue-tint-2);
  color: var(--ps-navy);
}
.ps-cat-row .label {
  color: var(--gov-text);
  font-weight: 600;
}
.ps-cat-row .tag {
  background: var(--ps-success-bg);
  color: var(--ps-success-dark);
  border: 1px solid var(--ps-success);
  border-radius: 4px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* --- Steps refined --- */
.ps-step {
  background: var(--ps-white);
  border: 1px solid var(--gov-line);
  border-left: 4px solid var(--ps-navy);
  border-radius: 0 4px 4px 0;
  padding: 14px 16px;
}
.ps-step-num {
  background: var(--ps-navy);
  color: var(--ps-white);
  font-family: var(--font-mono);
  font-weight: 700;
}
.ps-step-body .t {
  color: var(--gov-text);
  font-weight: 700;
}
.ps-step-body .s { color: var(--gov-text-2); }

/* --- FAQ refined --- */
.ps-faq-item {
  border-bottom-color: var(--gov-line);
}
.ps-faq-q {
  color: var(--gov-text);
  font-weight: 700;
}
.ps-faq-q i { color: var(--ps-navy); }
.ps-faq-a { color: var(--gov-text-2); }

/* --- CTA Section (Activation block) --- */
.ps-cta-section {
  background: var(--ps-navy);
  color: var(--ps-white);
  padding: 48px 24px;
  text-align: center;
  border-top: 3px solid var(--gov-red);
}
.ps-cta-section h3 {
  color: var(--ps-white);
  font-family: var(--font-serif);
  font-weight: 700;
}
.ps-cta-section p { color: rgba(255, 255, 255, 0.85); }
.ps-cta-section .ps-section-num .num { color: var(--gov-red); }
.ps-cta-section .ps-section-num .lbl { color: var(--ps-white); }
.ps-cta-section .ps-cta {
  background: var(--ps-white);
  color: var(--ps-navy);
  border-color: var(--ps-white);
}
.ps-cta-section .ps-cta:hover {
  background: var(--gov-bg-3);
  color: var(--ps-navy);
  border-color: var(--gov-bg-3);
}
.ps-cta-section .ps-cta.is-unlocked {
  background: var(--ps-white);
  color: var(--ps-navy);
  border-color: var(--ps-white);
}
.ps-cta-section .ps-cta.is-unlocked:hover {
  background: var(--gov-bg-3);
  border-color: var(--gov-bg-3);
}
.ps-cta-section .ps-cta-progress { background: rgba(18, 47, 78, 0.05); }
.ps-cta-section .ps-cta-progress-fill { background: rgba(18, 47, 78, 0.12); }
.ps-cta-section .ps-cta.is-locked {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.55);
  border-color: rgba(255, 255, 255, 0.18);
  cursor: not-allowed;
}
.ps-cta-section .ps-cta.is-locked:hover {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.55);
  border-color: rgba(255, 255, 255, 0.18);
}
.ps-cta-section .ps-cta.is-locked .ps-cta-lock { color: rgba(255, 255, 255, 0.55); }
.ps-cta-section .ps-cta.is-locked .ps-cta-arrow { opacity: 0.3; }
.ps-cta-section .ps-cta.is-locked .ps-cta-progress { background: rgba(255, 255, 255, 0.06); }
.ps-cta-section .ps-cta.is-locked .ps-cta-progress-fill { background: rgba(255, 255, 255, 0.18); }
.ps-cta-note {
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
  letter-spacing: 0.04em;
}

/* --- Presell footer --- */
.ps-footer {
  background: var(--gov-navy-dk);
  color: rgba(255, 255, 255, 0.85);
  border-top: 0;
}
.ps-footer-mark {
  color: var(--ps-white);
  font-weight: 700;
}
.ps-footer-mark i { color: var(--ps-white); }
.ps-footer-links a {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.88rem;
}
.ps-footer-links a:hover {
  color: var(--ps-white);
  text-decoration: underline;
}

/* --- Modals (Privacy / Terms) — clean gov style --- */
.ps-modal-content {
  background: var(--ps-white);
  border: 1px solid var(--gov-line);
  border-radius: 4px;
  border-top: 3px solid var(--gov-red);
}
.ps-modal-content h2 {
  color: var(--ps-navy);
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.ps-modal-content h3 {
  color: var(--ps-navy);
  font-family: var(--font-serif);
  font-weight: 700;
}
.ps-modal-content .date {
  color: var(--gov-text-meta);
  font-family: var(--font-mono);
  font-size: 0.78rem;
}
.ps-modal-content p, .ps-modal-content li {
  color: var(--gov-text-2);
}
.ps-modal-close {
  color: var(--gov-text-meta);
  background: var(--ps-white);
  border: 1px solid var(--gov-line);
  border-radius: 50%;
  width: 32px;
  height: 32px;
}
.ps-modal-close:hover {
  color: var(--gov-red);
  border-color: var(--gov-red);
}

/* --- Cookie banner — clean gov style --- */
.ps-cookie {
  background: var(--ps-white);
  border-top: 3px solid var(--gov-red);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
}
.ps-cookie h3 {
  color: var(--ps-navy);
  font-family: var(--font-serif);
}
.ps-cookie p { color: var(--gov-text-2); }
.ps-cookie .ck-actions button {
  border-radius: 4px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}

/* --- Chat header — deep navy with red stripe accent --- */
.chat-header {
  background: var(--ps-navy);
  border-bottom: 2px solid var(--gov-red);
  color: var(--ps-white);
}
.ch-name { color: var(--ps-white); font-weight: 700; }
.ch-status-text { color: rgba(255, 255, 255, 0.78); }
.ch-back, .ch-action {
  color: var(--ps-white);
  background: transparent;
}
.ch-back:hover, .ch-action:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* --- Chat area background — subtle gov tint --- */
.chat-area {
  background: var(--gov-bg-3);
}

/* --- Chat bubbles — flatter and cleaner --- */
.message.in .bubble {
  background: var(--ps-white);
  border: 1px solid var(--gov-line);
}
.message.out .bubble {
  background: var(--gov-blue-tint);
  border: 1px solid var(--gov-blue-tint);
}
.bubble {
  border-radius: 8px;
  box-shadow: none;
}

/* --- Input area — clean gov style --- */
.input-area {
  background: var(--ps-white);
  border-top: 1px solid var(--gov-line);
}
.input-wrap {
  background: var(--gov-bg-3);
  border: 1px solid var(--gov-line);
  border-radius: 8px;
}
.input-wrap:focus-within {
  border-color: var(--ps-navy);
  box-shadow: 0 0 0 2px rgba(18, 47, 78, 0.15);
}
.send-btn, .mic-btn {
  background: var(--ps-navy);
  color: var(--ps-white);
  border-radius: 50%;
}
.send-btn:hover, .mic-btn:hover {
  background: var(--gov-navy-dk);
}

/* --- Mobile navbar --- */
.mobile-navbar {
  background: var(--ps-white);
  border-top: 1px solid var(--gov-line);
}
.nav-item {
  color: var(--gov-text-meta);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.nav-item i { color: var(--gov-text-meta); }
.nav-item.active { color: var(--ps-navy); }
.nav-item.active i { color: var(--ps-navy); }

/* --- Buttons everywhere — sentence case, no uppercase --- */
.ps-cta, button[class*="btn"], .ck-actions button {
  text-transform: none;
  letter-spacing: 0;
}

/* --- Focus rings — red gov accent --- */
.ps-cta:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 3px solid rgba(178, 34, 52, 0.55);
  outline-offset: 2px;
}

/* --- Responsive refinements --- */
@media (max-width: 480px) {
  .ps-hero h1 { font-size: 1.6rem; line-height: 1.25; }
  .ps-title { font-size: 1.25rem; }
  .ps-cta-section h3 { font-size: 1.1rem; }
  .ps-cta-section { padding: 36px 18px; }
  .ps-section { padding: 36px 18px; }
  .ps-footer-links { gap: 0.875rem; }
  .ps-footer-links a { font-size: 0.82rem; }
  .ch-name { font-size: 0.95rem; }
}

@media (max-width: 360px) {
  .ps-hero h1 { font-size: 1.4rem; }
  .ps-title { font-size: 1.1rem; }
  .ps-section { padding: 28px 14px; }
  .ps-cta { min-height: 48px; font-size: 0.92rem; }
}

@media (min-width: 768px) {
  .ps-hero h1 { font-size: 2.2rem; }
  .ps-title { font-size: 1.55rem; }
  .ps-section-inner { max-width: 720px; }
}

/* --- Selection color --- */
::selection {
  background: var(--ps-navy);
  color: var(--ps-white);
}

/* --- Section eyebrow (small uppercase label above titles) — refined --- */
.ps-section-eyebrow {
  color: var(--gov-red);
  font-family: var(--font-mono);
  letter-spacing: 0.12em;
}

/* --- Hero subtext / lead text refinement --- */
.ps-hero-sub, .ps-lead {
  color: var(--gov-text-2);
  line-height: 1.55;
  font-size: 0.95rem;
}
.ps-hero-sub strong, .ps-lead strong { color: var(--ps-navy); }

/* --- Video block (the briefing video) — clean frame --- */
.ps-video {
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--gov-line);
}
.ps-video-frame { background: #000; }
.ps-video-unmute {
  background: var(--ps-navy);
  color: var(--ps-white);
  border: 0;
  border-radius: 4px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}
.ps-video-label {
  color: var(--gov-red);
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
}

/* --- Chat header avatar — cleaner border --- */
.ch-avatar {
  border: 2px solid var(--ps-white);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.ch-avatar-status {
  background: var(--ps-success);
  border: 2px solid var(--ps-navy);
}

/* --- Privacy / Terms modal: cleaner heading sizes --- */
.ps-modal-content h2 {
  font-size: 1.5rem;
  line-height: 1.25;
  margin-bottom: 0.5rem;
}
.ps-modal-content h3 {
  font-size: 1.1rem;
  margin: 1.25rem 0 0.5rem;
  color: var(--ps-navy);
}
.ps-modal-content p {
  font-size: 0.95rem;
  line-height: 1.55;
}
.ps-modal-content ul {
  padding-left: 1.25rem;
}
.ps-modal-content li {
  margin-bottom: 0.4rem;
  font-size: 0.92rem;
  line-height: 1.5;
}

/* --- Cookie banner refined --- */
.ps-cookie {
  border-radius: 4px;
  padding: 1.25rem;
}
.ps-cookie-head .icon {
  background: var(--gov-blue-tint-2);
  color: var(--ps-navy);
}
.ps-cookie-head .t {
  color: var(--ps-navy);
  font-weight: 700;
  font-family: var(--font-serif);
}
.ps-cookie-body {
  color: var(--gov-text-2);
  font-size: 0.92rem;
  line-height: 1.5;
}
.ps-btn {
  border-radius: 4px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  padding: 0.625rem 1rem;
  min-height: 40px;
}
.ps-btn-ghost {
  border-color: var(--gov-line);
  color: var(--gov-text-2);
}
.ps-btn-ghost:hover {
  background: var(--gov-bg-3);
  border-color: var(--gov-text-meta);
  color: var(--ps-navy);
}
.ps-btn-primary {
  background: var(--ps-navy);
  border-color: var(--ps-navy);
  color: var(--ps-white);
}
.ps-btn-primary:hover {
  background: var(--gov-navy-dk);
  border-color: var(--gov-navy-dk);
}
.ps-cookie-pref {
  border-bottom-color: var(--gov-line);
}
.ps-cookie-pref .l {
  color: var(--gov-text);
}
.ps-cookie-pref .l .s {
  color: var(--gov-text-2);
}
.ps-switch.on {
  background: var(--ps-navy);
}

/* --- Final no-italic enforcement everywhere --- */
em, i:not(.fa-solid):not(.fa-regular):not(.fa-brands) {
  font-style: normal;
}

/* --- Smoother button transitions globally --- */
.ps-cta, .ps-btn, button {
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

/* ============================================================
   FULL PRESELL REFINEMENT — Hero + 4 sections + footer
   Cleaner gov US, more whitespace, less decoration
   ============================================================ */

/* Hero — text + video + CTA, centered on inner column */
.ps-hero {
  padding: 2.5rem 1rem 2.75rem;
  background: var(--ps-white);
  border-bottom: 1px solid var(--gov-line);
}
.ps-hero .ps-section-inner {
  max-width: 38rem;
  margin: 0 auto;
}
.ps-hero h1 {
  font-family: var(--font-serif);
  font-size: 1.65rem;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ps-navy);
  margin: 0 0 0.875rem;
}
.ps-hero-sub {
  color: var(--gov-text-2);
  line-height: 1.55;
  font-size: 0.95rem;
  margin: 0 0 1.5rem;
}
.ps-hero .ps-video {
  width: 100%;
  margin: 0 0 1.25rem;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--gov-line);
}
.ps-hero .ps-cta { width: 100%; }

.ps-video-frame { position: relative; background: #000; overflow: hidden; }
.ps-video-unmute {
  position: absolute !important;
  top: auto !important;
  bottom: 12px !important;
  right: 12px !important;
  left: auto !important;
  background: rgba(18, 47, 78, 0.92) !important;
  color: var(--ps-white) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 999px !important;
  padding: 0.45rem 0.875rem !important;
  font-family: var(--font-body) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center;
  gap: 0.4rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  z-index: 6;
  animation: none !important;
}
.ps-video-unmute i { font-size: 0.78rem !important; }
.ps-video-unmute:hover { background: var(--gov-navy-dk) !important; }
.ps-video-unmute.is-hidden,
.ps-video-unmute[hidden],
.ps-video-unmute[aria-hidden="true"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Tap-to-play overlay — centered when video can't autoplay */
.ps-video-tapplay {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(18,47,78,0.65) 100%);
  border: 0;
  cursor: pointer;
  z-index: 7;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  color: var(--ps-white);
  font-family: var(--font-body);
  padding: 0;
  width: 100%;
  height: 100%;
}
.ps-video-frame.needs-tap .ps-video-tapplay,
#psVideoWrap.needs-tap .ps-video-tapplay {
  display: flex;
}
.ps-video-tapplay-icon {
  width: 80px;
  height: 80px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,0.35));
  transition: transform 0.18s ease;
  animation: tapplayPulse 1.8s ease-in-out infinite;
}
.ps-video-tapplay-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.ps-video-tapplay:hover .ps-video-tapplay-icon,
.ps-video-tapplay:active .ps-video-tapplay-icon {
  transform: scale(1.06);
  animation-play-state: paused;
}
@keyframes tapplayPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

.ps-video-tapplay-text {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ps-white);
  background: rgba(18, 47, 78, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 0.5rem 0.875rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  text-shadow: none;
}
.ps-video-tapplay-text i {
  font-size: 0.82rem;
  color: var(--ps-white);
  animation: tapHand 1.6s ease-in-out infinite;
}
@keyframes tapHand {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@media (max-width: 480px) {
  .ps-video-tapplay-icon { width: 68px; height: 68px; }
  .ps-video-tapplay-text { font-size: 0.8rem; padding: 0.4rem 0.75rem; gap: 0.4rem; }
  .ps-video-tapplay-text i { font-size: 0.75rem; }
  .ps-video-unmute { font-size: 0.72rem !important; padding: 0.4rem 0.75rem !important; bottom: 10px !important; right: 10px !important; }
}

@media (max-width: 360px) {
  .ps-video-tapplay-icon { width: 60px; height: 60px; }
  .ps-video-tapplay-text { font-size: 0.75rem; padding: 0.35rem 0.65rem; }
}

/* Sections — generous padding, thin dividers */
.ps-section {
  padding: 2.75rem 1rem;
  position: relative;
}
.ps-section-inner {
  max-width: 38rem;
  margin: 0 auto;
}
.ps-section.bordered {
  background: var(--ps-white);
  border-bottom: 1px solid var(--gov-line);
}
.ps-section.gray {
  background: var(--gov-bg-3);
  border-bottom: 1px solid var(--gov-line);
}

/* Section number eyebrow */
.ps-section-num {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.875rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ps-section-num::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--gov-red);
}
.ps-section-num .num { color: var(--gov-red); }
.ps-section-num .lbl { color: var(--ps-navy); }

/* Section titles */
.ps-title {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  line-height: 1.25;
  font-weight: 700;
  color: var(--ps-navy);
  letter-spacing: -0.01em;
  margin: 0 0 0.625rem;
}
.ps-lead {
  color: var(--gov-text-2);
  line-height: 1.55;
  font-size: 0.95rem;
  margin: 0 0 1.25rem;
}

/* Info alert — clean USWDS-style */
.ps-alert {
  display: flex;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  background: var(--gov-blue-tint-2);
  border-left: 4px solid var(--ps-navy);
  border-radius: 0 4px 4px 0;
  margin: 0 0 1.25rem;
}
.ps-alert-icon {
  flex-shrink: 0;
  color: var(--ps-navy);
  font-size: 1.05rem;
  line-height: 1.3;
  margin-top: 1px;
}
.ps-alert .t {
  color: var(--ps-navy);
  font-weight: 700;
  margin-bottom: 2px;
  font-size: 0.95rem;
}
.ps-alert .s {
  color: var(--gov-text-2);
  font-size: 0.88rem;
  line-height: 1.5;
}

/* Categories — flat clean cards */
.ps-cat-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.ps-cat-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.875rem;
  padding: 0.875rem 1rem;
  background: var(--ps-white);
  border: 1px solid var(--gov-line);
  border-radius: 4px;
}
.ps-cat-icon {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  background: var(--gov-blue-tint-2);
  color: var(--ps-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}
.ps-cat-row .label {
  color: var(--gov-text);
  font-weight: 600;
  font-size: 0.95rem;
}
.ps-cat-row .tag {
  background: var(--ps-success-bg);
  color: var(--ps-success-dark);
  border: 1px solid var(--ps-success);
  border-radius: 999px;
  padding: 0.25rem 0.625rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ps-cat-row .tag::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  margin-right: 5px;
  vertical-align: middle;
  transform: translateY(-1px);
}

/* Steps — clean numbered list */
.ps-steps {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.ps-step {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 0.875rem 1rem;
  background: var(--ps-white);
  border: 1px solid var(--gov-line);
  border-left: 3px solid var(--ps-navy);
  border-radius: 0 4px 4px 0;
}
.ps-step-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ps-navy);
  color: var(--ps-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0;
  flex-shrink: 0;
  margin-top: 2px;
}
.ps-step-body .t {
  color: var(--gov-text);
  font-weight: 700;
  font-size: 0.98rem;
  margin-bottom: 2px;
  line-height: 1.3;
}
.ps-step-body .s {
  color: var(--gov-text-2);
  font-size: 0.88rem;
  line-height: 1.5;
}

/* FAQ — hairline accordion */
.ps-faq {
  border-top: 1px solid var(--gov-line);
}
.ps-faq-item {
  border-bottom: 1px solid var(--gov-line);
}
.ps-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.875rem;
  padding: 1rem 0;
  cursor: pointer;
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--gov-text);
}
.ps-faq-q i {
  color: var(--ps-navy);
  font-size: 0.78rem;
  transition: transform 0.18s ease;
}
.ps-faq-item.open .ps-faq-q i { transform: rotate(180deg); }
.ps-faq-a {
  max-height: 0;
  overflow: hidden;
  color: var(--gov-text-2);
  font-size: 0.92rem;
  line-height: 1.55;
  transition: max-height 0.22s ease, padding 0.22s ease;
}
.ps-faq-item.open .ps-faq-a {
  max-height: 240px;
  padding: 0 0 1rem;
}

/* Activation section — navy w/ red stripe at top */
.ps-cta-section {
  background: var(--ps-navy);
  color: var(--ps-white);
  padding: 3rem 1rem;
  text-align: center;
  border-top: 3px solid var(--gov-red);
}
.ps-cta-section .ps-section-num {
  color: var(--ps-white);
  margin-bottom: 1rem;
}
.ps-cta-section .ps-section-num::before { background: var(--gov-red); }
.ps-cta-section .ps-section-num .num { color: var(--gov-red); }
.ps-cta-section .ps-section-num .lbl { color: var(--ps-white); }
.ps-cta-section h3 {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--ps-white);
  letter-spacing: -0.005em;
  margin: 0 0 0.4rem;
}
.ps-cta-section p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.95rem;
  margin: 0 0 1.5rem;
}
.ps-cta-section .ps-cta {
  max-width: 32rem;
  margin: 0 auto;
}
.ps-cta-note {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.78rem;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}
.ps-cta-note i {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.78rem;
}

/* Footer */
.ps-footer {
  background: var(--gov-navy-dk);
  border-top: 0;
  padding: 0;
}
.ps-footer-inner {
  padding: 1.75rem 1rem 1.5rem;
  max-width: 38rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;
  text-align: center;
}
.ps-footer-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ps-white);
  font-weight: 700;
  font-size: 0.92rem;
}
.ps-footer-mark i { color: var(--ps-white); }
.ps-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1rem;
}
.ps-footer-links a {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.82rem;
  text-decoration: none;
  transition: color 0.15s ease;
}
.ps-footer-links a:hover {
  color: var(--ps-white);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* === RESPONSIVE === */
@media (max-width: 480px) {
  .ps-hero { padding: 2rem 0.875rem 2rem; }
  .ps-hero h1 { font-size: 1.4rem; }
  .ps-hero-sub { font-size: 0.92rem; }
  .ps-section { padding: 2rem 0.875rem; }
  .ps-title { font-size: 1.2rem; }
  .ps-lead { font-size: 0.92rem; }
  .ps-cta-section { padding: 2.25rem 0.875rem; }
  .ps-cta-section h3 { font-size: 1.15rem; }
  .ps-step { padding: 0.75rem 0.875rem; gap: 0.75rem; }
  .ps-step-num { width: 28px; height: 28px; font-size: 0.72rem; }
  .ps-step-body .t { font-size: 0.92rem; }
  .ps-step-body .s { font-size: 0.84rem; }
  .ps-cat-row { padding: 0.75rem 0.875rem; gap: 0.75rem; }
  .ps-cat-icon { width: 32px; height: 32px; }
  .ps-cat-row .label { font-size: 0.9rem; }
  .ps-cat-row .tag { font-size: 0.62rem; padding: 0.2rem 0.5rem; }
  .ps-faq-q { font-size: 0.92rem; padding: 0.875rem 0; }
  .ps-faq-a { font-size: 0.88rem; }
  .ps-footer-inner { padding: 1.5rem 0.875rem 1.25rem; }
  .ps-footer-links { gap: 0.35rem 0.875rem; }
  .ps-footer-links a { font-size: 0.78rem; }
}

@media (max-width: 360px) {
  .ps-hero { padding: 1.75rem 0.75rem 1.75rem; }
  .ps-hero h1 { font-size: 1.25rem; }
  .ps-section { padding: 1.75rem 0.75rem; }
  .ps-title { font-size: 1.1rem; }
  .ps-cta-section { padding: 2rem 0.75rem; }
  .ps-cta-section h3 { font-size: 1.05rem; }
}

@media (min-width: 768px) {
  .ps-hero { padding: 3.5rem 1.5rem 3.5rem; }
  .ps-hero h1 { font-size: 2rem; }
  .ps-section { padding: 3.5rem 1.5rem; }
  .ps-title { font-size: 1.65rem; }
  .ps-cta-section { padding: 4rem 1.5rem; }
  .ps-cta-section h3 { font-size: 1.6rem; }
}

body.presell-active {
  background: var(--ps-white);
}

/* ============================================================
   RESPONSIVE ENFORCEMENT — overrides original media queries
   Guarantees clean, ordered layout on all viewport sizes
   ============================================================ */

.presell *, .presell *::before, .presell *::after {
  box-sizing: border-box;
}

.presell, .presell .ps-section, .presell .ps-hero, .presell .ps-cta-section {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

.presell .ps-section-inner {
  max-width: 38rem;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

/* Hero — clean stack */
.ps-hero {
  padding: 2.25rem 1rem 2.5rem !important;
  background: var(--ps-white) !important;
}
.ps-hero h1 {
  font-family: var(--font-serif) !important;
  font-size: clamp(1.25rem, 4.5vw, 1.85rem) !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: var(--ps-navy) !important;
  margin: 0 0 0.875rem !important;
}
.ps-hero h1 em {
  font-style: normal !important;
  color: var(--ps-navy);
  background: linear-gradient(to bottom, transparent 60%, rgba(178, 34, 52, 0.18) 60%, rgba(178, 34, 52, 0.18) 92%, transparent 92%);
  padding: 0 3px;
}
.ps-hero-sub {
  color: var(--gov-text-2) !important;
  line-height: 1.55 !important;
  font-size: clamp(0.88rem, 2.5vw, 0.98rem) !important;
  margin: 0 0 1.5rem !important;
}

/* Video — strict aspect ratio, no overflow */
.ps-video {
  width: 100% !important;
  margin: 0 0 1.25rem !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  border: 1px solid var(--gov-line) !important;
}
.ps-video-frame {
  position: relative !important;
  width: 100% !important;
  padding-top: 56.25% !important;
  height: 0 !important;
  background: #000 !important;
  border-radius: 4px !important;
  overflow: hidden !important;
}
.ps-video-frame > .ps-video-el {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
@supports (aspect-ratio: 16 / 9) {
  .ps-video-frame {
    padding-top: 0 !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
  }
}

/* CTA — full width, clean tap target */
.ps-cta {
  width: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  padding: 0.875rem 1.25rem !important;
  min-height: 50px !important;
  font-size: clamp(0.9rem, 2.6vw, 1rem) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border-radius: 4px !important;
}

/* Sections — consistent generous padding */
.ps-section {
  padding: clamp(2rem, 5vw, 3rem) clamp(0.875rem, 3vw, 1.5rem) !important;
}
.ps-section.bordered {
  background: var(--ps-white) !important;
  border-bottom: 1px solid var(--gov-line) !important;
}
.ps-section.gray {
  background: var(--gov-bg-3) !important;
  border-bottom: 1px solid var(--gov-line) !important;
}
.ps-section.bordered::after,
.ps-section.bordered + .ps-section::before { display: none !important; }

/* Section eyebrow — clean horizontal line + label */
.ps-section-num {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.625rem !important;
  margin-bottom: 0.875rem !important;
  font-family: var(--font-mono) !important;
  font-size: clamp(0.68rem, 1.8vw, 0.74rem) !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}
.ps-section-num::before {
  content: "" !important;
  display: inline-block !important;
  width: 24px !important;
  height: 2px !important;
  background: var(--gov-red) !important;
  flex-shrink: 0 !important;
}
.ps-section-num .num { color: var(--gov-red) !important; }
.ps-section-num .lbl { color: var(--ps-navy) !important; }

/* Section title (h2) */
.ps-title {
  font-family: var(--font-serif) !important;
  font-size: clamp(1.15rem, 3.6vw, 1.55rem) !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  color: var(--ps-navy) !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 0.625rem !important;
}

/* Lead paragraph */
.ps-lead {
  color: var(--gov-text-2) !important;
  line-height: 1.55 !important;
  font-size: clamp(0.88rem, 2.4vw, 0.96rem) !important;
  margin: 0 0 1.25rem !important;
}

/* Categories — full width, no overflow */
.ps-cat-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
  margin: 0 !important;
}
.ps-cat-row {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  gap: 0.75rem !important;
  padding: 0.875rem 1rem !important;
  background: var(--ps-white) !important;
  border: 1px solid var(--gov-line) !important;
  border-radius: 4px !important;
  min-width: 0 !important;
}
.ps-cat-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 4px !important;
  background: var(--gov-blue-tint-2) !important;
  color: var(--ps-navy) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.95rem !important;
  flex-shrink: 0 !important;
}
.ps-cat-row .label {
  color: var(--gov-text) !important;
  font-weight: 600 !important;
  font-size: clamp(0.85rem, 2.4vw, 0.95rem) !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.ps-cat-row .tag {
  background: var(--ps-success-bg) !important;
  color: var(--ps-success-dark) !important;
  border: 1px solid var(--ps-success) !important;
  border-radius: 999px !important;
  padding: 0.2rem 0.55rem !important;
  font-family: var(--font-mono) !important;
  font-size: clamp(0.6rem, 1.6vw, 0.66rem) !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* Steps — clean grid */
.ps-steps {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.625rem !important;
  margin: 0 !important;
}
.ps-step {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  align-items: flex-start !important;
  gap: 0.875rem !important;
  padding: 0.875rem 1rem !important;
  background: var(--ps-white) !important;
  border: 1px solid var(--gov-line) !important;
  border-left: 3px solid var(--ps-navy) !important;
  border-radius: 0 4px 4px 0 !important;
  min-width: 0 !important;
}
.ps-step::after { display: none !important; }
.ps-step-num {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: var(--ps-navy) !important;
  color: var(--ps-white) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--font-mono) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
  margin-top: 1px !important;
}
.ps-step-body { min-width: 0 !important; }
.ps-step-body .t {
  color: var(--gov-text) !important;
  font-weight: 700 !important;
  font-size: clamp(0.92rem, 2.4vw, 1rem) !important;
  margin-bottom: 2px !important;
  line-height: 1.3 !important;
}
.ps-step-body .s {
  color: var(--gov-text-2) !important;
  font-size: clamp(0.82rem, 2.2vw, 0.9rem) !important;
  line-height: 1.5 !important;
}

/* FAQ — hairline accordion */
.ps-faq {
  border-top: 1px solid var(--gov-line) !important;
  margin: 0 !important;
}
.ps-faq-item {
  border-bottom: 1px solid var(--gov-line) !important;
  background: var(--ps-white) !important;
}
.ps-faq-q {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.875rem !important;
  padding: 1rem 0.875rem !important;
  cursor: pointer !important;
  font-size: clamp(0.88rem, 2.4vw, 0.96rem) !important;
  font-weight: 700 !important;
  color: var(--gov-text) !important;
  background: transparent !important;
  border: 0 !important;
}
.ps-faq-q i {
  color: var(--ps-navy) !important;
  font-size: 0.78rem !important;
  transition: transform 0.18s ease !important;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  border: 0 !important;
}
.ps-faq-item.open .ps-faq-q i { transform: rotate(180deg) !important; }
.ps-faq-a {
  max-height: 0 !important;
  overflow: hidden !important;
  color: var(--gov-text-2) !important;
  font-size: clamp(0.85rem, 2.3vw, 0.92rem) !important;
  line-height: 1.55 !important;
  padding: 0 0.875rem !important;
  transition: max-height 0.22s ease, padding 0.22s ease !important;
}
.ps-faq-item.open .ps-faq-a {
  max-height: 280px !important;
  padding: 0 0.875rem 1rem !important;
}

/* Activation CTA section */
.ps-cta-section {
  background: var(--ps-navy) !important;
  color: var(--ps-white) !important;
  padding: clamp(2.25rem, 5vw, 3.5rem) clamp(1rem, 3vw, 1.5rem) !important;
  text-align: center !important;
  border-top: 3px solid var(--gov-red) !important;
}
.ps-cta-section .ps-section-num {
  justify-content: center !important;
  margin-bottom: 1rem !important;
  color: var(--ps-white) !important;
}
.ps-cta-section .ps-section-num::before { background: var(--gov-red) !important; }
.ps-cta-section .ps-section-num .num { color: var(--gov-red) !important; }
.ps-cta-section .ps-section-num .lbl { color: var(--ps-white) !important; }
.ps-cta-section h3 {
  font-family: var(--font-serif) !important;
  font-size: clamp(1.1rem, 3.4vw, 1.55rem) !important;
  font-weight: 700 !important;
  color: var(--ps-white) !important;
  letter-spacing: -0.005em !important;
  margin: 0 0 0.5rem !important;
  line-height: 1.25 !important;
}
.ps-cta-section p {
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: clamp(0.88rem, 2.4vw, 0.95rem) !important;
  margin: 0 0 1.5rem !important;
  line-height: 1.5 !important;
}
.ps-cta-section .ps-cta {
  max-width: 28rem !important;
  margin: 0 auto !important;
}
.ps-cta-note {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  margin-top: 1.25rem !important;
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: clamp(0.7rem, 2vw, 0.78rem) !important;
  font-family: var(--font-mono) !important;
  letter-spacing: 0.04em !important;
  line-height: 1.4 !important;
  text-align: center !important;
  flex-wrap: wrap !important;
}
.ps-cta-note i {
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 0.78rem !important;
}

/* Alert info box */
.ps-alert {
  display: flex !important;
  gap: 0.75rem !important;
  padding: 0.875rem 1rem !important;
  background: var(--gov-blue-tint-2) !important;
  border-left: 4px solid var(--ps-navy) !important;
  border-radius: 0 4px 4px 0 !important;
  margin: 0 0 1.25rem !important;
}
.ps-alert-icon {
  flex-shrink: 0 !important;
  color: var(--ps-navy) !important;
  font-size: 1.05rem !important;
  margin-top: 1px !important;
  background: transparent !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
}
.ps-alert .t {
  color: var(--ps-navy) !important;
  font-weight: 700 !important;
  margin-bottom: 2px !important;
  font-size: clamp(0.88rem, 2.4vw, 0.95rem) !important;
}
.ps-alert .s {
  color: var(--gov-text-2) !important;
  font-size: clamp(0.8rem, 2.2vw, 0.88rem) !important;
  line-height: 1.5 !important;
}

/* Footer */
.ps-footer {
  background: var(--gov-navy-dk) !important;
  border-top: 0 !important;
  padding: 0 !important;
}
.ps-footer-inner {
  padding: clamp(1.25rem, 4vw, 2rem) clamp(0.875rem, 3vw, 1.5rem) clamp(1rem, 3vw, 1.5rem) !important;
  max-width: 38rem !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0.875rem !important;
  text-align: center !important;
}
.ps-footer-links {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 0.4rem 1rem !important;
}
.ps-footer-links a {
  font-size: clamp(0.72rem, 2vw, 0.82rem) !important;
}

/* Top accent — always visible */
.ps-top-accent {
  height: 3px !important;
  background: var(--gov-red) !important;
  width: 100% !important;
}

/* ============================================================
   ICON SYSTEM — refined gov icons, consistent + responsive
   ============================================================ */

/* Step icon combo (semantic icon + small numeric badge) */
.ps-step-icon {
  position: relative !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 8px !important;
  background: var(--gov-blue-tint-2) !important;
  color: var(--ps-navy) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  border: 1px solid var(--gov-blue-tint) !important;
  margin-top: 1px !important;
}
.ps-step-icon i {
  font-size: 1.05rem !important;
  line-height: 1 !important;
}
.ps-step-badge {
  position: absolute !important;
  bottom: -4px !important;
  right: -4px !important;
  background: var(--ps-navy) !important;
  color: var(--ps-white) !important;
  font-family: var(--font-mono) !important;
  font-size: 0.6rem !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  padding: 2px 5px !important;
  border-radius: 999px !important;
  line-height: 1 !important;
  border: 2px solid var(--ps-white) !important;
  min-width: 22px !important;
  text-align: center !important;
}

/* Alert icon — circle badge with shield */
.ps-alert {
  align-items: flex-start !important;
  padding: 1rem 1.125rem !important;
}
.ps-alert-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: var(--ps-navy) !important;
  color: var(--ps-white) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  font-size: 0.95rem !important;
  margin-top: 0 !important;
  border: 0 !important;
}
.ps-alert-icon i {
  font-size: 0.95rem !important;
  color: var(--ps-white) !important;
}

/* CTA arrow refined */
.ps-cta-arrow {
  font-size: 0.78rem !important;
  opacity: 0.9 !important;
  transition: transform 0.18s ease !important;
  margin-left: auto !important;
}
.ps-cta:hover .ps-cta-arrow,
.ps-cta:active .ps-cta-arrow {
  transform: translateX(3px) !important;
}
.ps-cta-lock {
  font-size: 0.75rem !important;
  opacity: 0.85 !important;
}

/* FAQ chevron refined */
.ps-faq-q i {
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  background: var(--gov-blue-tint-2) !important;
  color: var(--ps-navy) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.7rem !important;
  transition: transform 0.18s ease, background 0.15s ease !important;
  flex-shrink: 0 !important;
}
.ps-faq-item.open .ps-faq-q i {
  background: var(--ps-navy) !important;
  color: var(--ps-white) !important;
  transform: rotate(180deg) !important;
}

/* CTA section shield (in the note) */
.ps-cta-note i {
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.12) !important;
  color: var(--ps-white) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.68rem !important;
  flex-shrink: 0 !important;
}

/* Footer mark shield */
.ps-footer-mark i {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.14) !important;
  color: var(--ps-white) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.72rem !important;
  flex-shrink: 0 !important;
}

/* Video unmute icon size refined */
.ps-video-unmute i { font-size: 0.78rem !important; }

/* Tap-to-play icon refined */
.ps-video-tapplay-circle i {
  margin-left: 4px !important;
  font-size: 1.5rem !important;
}

/* Responsive icon sizing */
@media (max-width: 480px) {
  .ps-step-icon { width: 40px !important; height: 40px !important; }
  .ps-step-icon i { font-size: 0.95rem !important; }
  .ps-step-badge { font-size: 0.56rem !important; padding: 1px 4px !important; min-width: 20px !important; }
  .ps-alert-icon { width: 32px !important; height: 32px !important; font-size: 0.85rem !important; }
  .ps-alert-icon i { font-size: 0.85rem !important; }
  .ps-faq-q i { width: 22px !important; height: 22px !important; font-size: 0.62rem !important; }
  .ps-cta-arrow { font-size: 0.72rem !important; }
}

@media (max-width: 360px) {
  .ps-step-icon { width: 36px !important; height: 36px !important; }
  .ps-step-icon i { font-size: 0.88rem !important; }
  .ps-step-badge { font-size: 0.52rem !important; min-width: 18px !important; bottom: -3px !important; right: -3px !important; }
}

/* ============================================================
   FONT AWESOME ENFORCEMENT — restore FA glyphs that were
   being broken by the `* { font-family: var(--font-body) }` rule
   ============================================================ */

i.fa,
i.fas,
i.far,
i.fab,
i.fal,
i.fad,
i.fa-solid,
i.fa-regular,
i.fa-brands,
i.fa-light,
i.fa-duotone,
i.fa-sharp,
[class*="fa-"]::before,
[class^="fa-"]::before {
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "Font Awesome 5 Free", "Font Awesome 5 Brands", "FontAwesome" !important;
  font-style: normal !important;
  font-variant: normal !important;
  text-rendering: auto !important;
  line-height: 1 !important;
  -webkit-font-smoothing: antialiased !important;
  display: inline-block !important;
}

i.fa-solid,
i.fas,
.fa-solid::before,
.fas::before {
  font-weight: 900 !important;
}

i.fa-regular,
i.far,
.fa-regular::before,
.far::before {
  font-weight: 400 !important;
}

i.fa-brands,
i.fab,
.fa-brands::before,
.fab::before {
  font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands" !important;
  font-weight: 400 !important;
}

/* ============================================================
   FINAL CLEAN PRESELL LAYER — tightened, ultra-responsive
   ============================================================ */

/* Container limit + auto-margin everywhere */
.presell, .presell .ps-section, .presell .ps-hero, .presell .ps-cta-section, .ps-footer {
  width: 100% !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
}
.presell .ps-section-inner,
.ps-footer-inner {
  max-width: 36rem !important;
  margin: 0 auto !important;
}

/* HERO — tightened, cleaner */
.ps-hero {
  padding: clamp(1.5rem, 4.5vw, 2.5rem) clamp(1rem, 3.5vw, 1.5rem) clamp(1.75rem, 5vw, 2.75rem) !important;
  background: var(--ps-white) !important;
  border-bottom: 1px solid var(--gov-line) !important;
}
.ps-hero h1 {
  font-family: var(--font-serif) !important;
  font-size: clamp(1.25rem, 5vw, 2rem) !important;
  line-height: 1.22 !important;
  font-weight: 700 !important;
  letter-spacing: -0.012em !important;
  color: var(--ps-navy) !important;
  margin: 0 0 0.75rem !important;
}
.ps-hero h1 em {
  font-style: normal !important;
  color: var(--ps-navy) !important;
  background: linear-gradient(to bottom, transparent 62%, rgba(178, 34, 52, 0.16) 62%, rgba(178, 34, 52, 0.16) 92%, transparent 92%) !important;
  padding: 0 4px !important;
}
.ps-hero-sub {
  color: var(--gov-text-2) !important;
  line-height: 1.55 !important;
  font-size: clamp(0.85rem, 2.6vw, 0.95rem) !important;
  margin: 0 0 clamp(1rem, 3.5vw, 1.5rem) !important;
}
.ps-hero .ps-video {
  margin: 0 0 clamp(0.875rem, 2.8vw, 1.25rem) !important;
  border: 1px solid var(--gov-line) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
}

/* SECTIONS — tightened padding */
.ps-section {
  padding: clamp(1.75rem, 4.5vw, 2.75rem) clamp(1rem, 3.5vw, 1.5rem) !important;
}
.ps-section.gray { background: var(--gov-bg-3) !important; }
.ps-section.bordered { border-bottom: 1px solid var(--gov-line) !important; }

/* Eyebrow */
.ps-section-num {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.625rem !important;
  margin-bottom: clamp(0.625rem, 2vw, 0.875rem) !important;
  font-family: var(--font-mono) !important;
  font-size: clamp(0.68rem, 1.9vw, 0.74rem) !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}
.ps-section-num::before {
  content: "" !important;
  width: clamp(20px, 4.5vw, 28px) !important;
  height: 2px !important;
  background: var(--gov-red) !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
}

/* Section titles */
.ps-title {
  font-family: var(--font-serif) !important;
  font-size: clamp(1.1rem, 4.2vw, 1.55rem) !important;
  line-height: 1.22 !important;
  font-weight: 700 !important;
  color: var(--ps-navy) !important;
  letter-spacing: -0.012em !important;
  margin: 0 0 0.5rem !important;
}

/* Lead paragraph */
.ps-lead {
  color: var(--gov-text-2) !important;
  line-height: 1.55 !important;
  font-size: clamp(0.85rem, 2.6vw, 0.95rem) !important;
  margin: 0 0 clamp(1rem, 3vw, 1.25rem) !important;
}

/* ALERT — cleaner, more breathable */
.ps-alert {
  display: flex !important;
  align-items: flex-start !important;
  gap: clamp(0.625rem, 2vw, 0.875rem) !important;
  padding: clamp(0.875rem, 3vw, 1.125rem) clamp(0.875rem, 3vw, 1.125rem) !important;
  background: var(--gov-blue-tint-2) !important;
  border-left: 3px solid var(--ps-navy) !important;
  border-radius: 0 4px 4px 0 !important;
  margin: 0 !important;
}
.ps-alert-icon {
  width: clamp(32px, 8vw, 38px) !important;
  height: clamp(32px, 8vw, 38px) !important;
  border-radius: 50% !important;
  background: var(--ps-navy) !important;
  color: var(--ps-white) !important;
  font-size: clamp(0.82rem, 2.4vw, 0.95rem) !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.ps-alert-icon i { color: var(--ps-white) !important; font-size: inherit !important; }
.ps-alert .t {
  color: var(--ps-navy) !important;
  font-weight: 700 !important;
  font-size: clamp(0.88rem, 2.6vw, 0.96rem) !important;
  margin: 0 0 2px !important;
  line-height: 1.3 !important;
}
.ps-alert .s {
  color: var(--gov-text-2) !important;
  font-size: clamp(0.8rem, 2.4vw, 0.88rem) !important;
  line-height: 1.5 !important;
}

/* STEPS — more whitespace, cleaner cards */
.ps-steps {
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(0.5rem, 2vw, 0.75rem) !important;
}
.ps-step {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  align-items: center !important;
  gap: clamp(0.75rem, 2.5vw, 1rem) !important;
  padding: clamp(0.875rem, 3vw, 1.125rem) clamp(0.875rem, 3vw, 1.125rem) !important;
  background: var(--ps-white) !important;
  border: 1px solid var(--gov-line) !important;
  border-radius: 6px !important;
  border-left: 3px solid var(--ps-navy) !important;
}
.ps-step-icon {
  position: relative !important;
  width: clamp(40px, 10vw, 48px) !important;
  height: clamp(40px, 10vw, 48px) !important;
  border-radius: 8px !important;
  background: var(--gov-blue-tint-2) !important;
  color: var(--ps-navy) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  border: 1px solid var(--gov-blue-tint) !important;
}
.ps-step-icon i {
  font-size: clamp(0.95rem, 2.8vw, 1.15rem) !important;
  color: var(--ps-navy) !important;
}
.ps-step-badge {
  position: absolute !important;
  bottom: -4px !important;
  right: -4px !important;
  background: var(--ps-navy) !important;
  color: var(--ps-white) !important;
  font-family: var(--font-mono) !important;
  font-size: clamp(0.56rem, 1.6vw, 0.62rem) !important;
  font-weight: 700 !important;
  padding: 2px 5px !important;
  border-radius: 999px !important;
  border: 2px solid var(--ps-white) !important;
  min-width: 22px !important;
  text-align: center !important;
  line-height: 1 !important;
}
.ps-step-body { min-width: 0 !important; }
.ps-step-body .t {
  color: var(--gov-text) !important;
  font-weight: 700 !important;
  font-size: clamp(0.9rem, 2.6vw, 1rem) !important;
  margin: 0 0 0.125rem !important;
  line-height: 1.3 !important;
}
.ps-step-body .s {
  color: var(--gov-text-2) !important;
  font-size: clamp(0.8rem, 2.3vw, 0.9rem) !important;
  line-height: 1.5 !important;
}

/* FAQ — cleaner accordion */
.ps-faq {
  border-top: 1px solid var(--gov-line) !important;
  margin-top: clamp(0.75rem, 2vw, 1rem) !important;
}
.ps-faq-item {
  border-bottom: 1px solid var(--gov-line) !important;
  background: transparent !important;
}
.ps-faq-q {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: clamp(0.625rem, 2vw, 0.875rem) !important;
  padding: clamp(0.875rem, 3vw, 1rem) 0 !important;
  cursor: pointer !important;
  font-size: clamp(0.88rem, 2.6vw, 0.96rem) !important;
  font-weight: 700 !important;
  color: var(--gov-text) !important;
  line-height: 1.35 !important;
}
.ps-faq-q i {
  width: clamp(22px, 5.5vw, 26px) !important;
  height: clamp(22px, 5.5vw, 26px) !important;
  border-radius: 50% !important;
  background: var(--gov-blue-tint-2) !important;
  color: var(--ps-navy) !important;
  font-size: clamp(0.62rem, 1.8vw, 0.72rem) !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.22s ease, background 0.18s ease, color 0.18s ease !important;
}
.ps-faq-item.open .ps-faq-q i {
  background: var(--ps-navy) !important;
  color: var(--ps-white) !important;
  transform: rotate(180deg) !important;
}
.ps-faq-a {
  max-height: 0 !important;
  overflow: hidden !important;
  color: var(--gov-text-2) !important;
  font-size: clamp(0.84rem, 2.4vw, 0.92rem) !important;
  line-height: 1.55 !important;
  padding: 0 !important;
  transition: max-height 0.25s ease, padding-bottom 0.25s ease !important;
}
.ps-faq-item.open .ps-faq-a {
  max-height: 320px !important;
  padding: 0 0 clamp(0.875rem, 3vw, 1rem) !important;
}

/* ACTIVATION SECTION — lighter, less heavy */
.ps-cta-section {
  background: var(--ps-navy) !important;
  color: var(--ps-white) !important;
  padding: clamp(2rem, 5vw, 3rem) clamp(1rem, 3.5vw, 1.5rem) !important;
  text-align: center !important;
  border-top: 2px solid var(--gov-red) !important;
}
.ps-cta-section .ps-section-num {
  display: inline-flex !important;
  justify-content: center !important;
  margin-bottom: clamp(0.625rem, 2vw, 0.875rem) !important;
}
.ps-cta-section .ps-section-num::before { background: var(--gov-red) !important; }
.ps-cta-section .ps-section-num .num { color: var(--gov-red) !important; }
.ps-cta-section .ps-section-num .lbl { color: var(--ps-white) !important; }
.ps-cta-section h3 {
  font-family: var(--font-serif) !important;
  font-size: clamp(1.05rem, 3.6vw, 1.45rem) !important;
  font-weight: 700 !important;
  color: var(--ps-white) !important;
  letter-spacing: -0.008em !important;
  line-height: 1.3 !important;
  margin: 0 0 0.4rem !important;
}
.ps-cta-section p {
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: clamp(0.84rem, 2.4vw, 0.92rem) !important;
  margin: 0 0 clamp(1rem, 3vw, 1.5rem) !important;
  line-height: 1.5 !important;
}
.ps-cta-section .ps-cta {
  max-width: 26rem !important;
  margin: 0 auto !important;
}
.ps-cta-note {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  margin-top: clamp(0.875rem, 3vw, 1.25rem) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: clamp(0.68rem, 2vw, 0.78rem) !important;
  font-family: var(--font-mono) !important;
  letter-spacing: 0.04em !important;
  line-height: 1.4 !important;
  flex-wrap: wrap !important;
}
.ps-cta-note i {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: clamp(0.68rem, 2vw, 0.78rem) !important;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  border-radius: 0 !important;
}

/* CTA BUTTON — clean primary */
.ps-cta {
  width: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  padding: clamp(0.75rem, 2.8vw, 0.9rem) clamp(1rem, 3vw, 1.25rem) !important;
  min-height: clamp(48px, 13vw, 52px) !important;
  font-size: clamp(0.9rem, 2.6vw, 1rem) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border-radius: 4px !important;
  background: var(--ps-navy) !important;
  border: 1px solid var(--ps-navy) !important;
  color: var(--ps-white) !important;
  cursor: pointer !important;
}
.ps-cta:hover {
  background: var(--gov-navy-dk) !important;
  border-color: var(--gov-navy-dk) !important;
}
.ps-cta.is-locked {
  background: var(--gov-bg-2) !important;
  border-color: var(--gov-line) !important;
  color: var(--gov-text-meta) !important;
  cursor: not-allowed !important;
}
.ps-cta-arrow,
.ps-cta-lock {
  font-size: clamp(0.7rem, 2vw, 0.8rem) !important;
}

/* FOOTER — minimal */
.ps-footer {
  background: var(--gov-navy-dk) !important;
  padding: 0 !important;
}
.ps-footer-inner {
  padding: clamp(1.25rem, 4vw, 1.75rem) clamp(1rem, 3.5vw, 1.5rem) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: clamp(0.75rem, 2.5vw, 1rem) !important;
  text-align: center !important;
}
.ps-footer-mark {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  color: var(--ps-white) !important;
  font-weight: 700 !important;
  font-size: clamp(0.85rem, 2.5vw, 0.95rem) !important;
}
.ps-footer-mark i {
  width: clamp(20px, 5vw, 24px) !important;
  height: clamp(20px, 5vw, 24px) !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.12) !important;
  font-size: clamp(0.65rem, 1.8vw, 0.75rem) !important;
  color: var(--ps-white) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.ps-footer-links {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: clamp(0.3rem, 1.2vw, 0.5rem) clamp(0.75rem, 2.5vw, 1rem) !important;
}
.ps-footer-links a {
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: clamp(0.72rem, 2vw, 0.82rem) !important;
  text-decoration: none !important;
}
.ps-footer-links a:hover {
  color: var(--ps-white) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

/* TOP ACCENT — thin red gov flag stripe */
.ps-top-accent {
  height: 2px !important;
  background: var(--gov-red) !important;
}

/* Body neutralization for presell */
body.presell-active { background: var(--ps-white) !important; }

/* ============================================================
   CHATBOT CLEAN REFINEMENT — gov USA, 100% responsive
   Applied to: chat-header, chat-area, bubbles, input, navbar
   ============================================================ */

/* Base chat surfaces */
.app, .chat-wrapper, .chat-area, .input-area {
  background: var(--gov-bg-3) !important;
  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* CHAT HEADER — clean navy w/ red accent stripe */
.chat-header {
  background: var(--ps-navy) !important;
  border-bottom: 2px solid var(--gov-red) !important;
  padding: clamp(0.5rem, 2vw, 0.75rem) clamp(0.625rem, 2.5vw, 1rem) !important;
  display: flex !important;
  align-items: center !important;
  gap: clamp(0.5rem, 2vw, 0.75rem) !important;
  min-height: clamp(54px, 14vw, 64px) !important;
  box-shadow: none !important;
}

/* Header back button */
.ch-back {
  background: transparent !important;
  color: var(--ps-white) !important;
  border: 0 !important;
  width: clamp(36px, 9vw, 40px) !important;
  height: clamp(36px, 9vw, 40px) !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  font-size: clamp(0.95rem, 2.6vw, 1.05rem) !important;
  transition: background 0.15s ease !important;
}
.ch-back:hover { background: rgba(255, 255, 255, 0.12) !important; }
.ch-back:active { background: rgba(255, 255, 255, 0.2) !important; }
.ch-back i { color: var(--ps-white) !important; font-size: inherit !important; }

/* Header avatar */
.ch-avatar {
  width: clamp(38px, 9vw, 44px) !important;
  height: clamp(38px, 9vw, 44px) !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255, 255, 255, 0.18) !important;
  overflow: hidden !important;
  position: relative !important;
  flex-shrink: 0 !important;
  background: var(--gov-navy-dk) !important;
}
.ch-avatar-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
.ch-avatar-status {
  position: absolute !important;
  bottom: 0 !important;
  right: 0 !important;
  width: clamp(10px, 2.5vw, 12px) !important;
  height: clamp(10px, 2.5vw, 12px) !important;
  background: var(--ps-success) !important;
  border: 2px solid var(--ps-navy) !important;
  border-radius: 50% !important;
}

/* Header profile info */
.ch-profile {
  display: flex !important;
  align-items: center !important;
  gap: clamp(0.5rem, 2vw, 0.75rem) !important;
  flex: 1 !important;
  min-width: 0 !important;
}
.ch-profile-info {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  min-width: 0 !important;
}
.ch-name-row {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.375rem !important;
  min-width: 0 !important;
}
.ch-name {
  color: var(--ps-white) !important;
  font-weight: 700 !important;
  font-size: clamp(0.9rem, 2.6vw, 1rem) !important;
  letter-spacing: -0.005em !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.ch-verified {
  display: inline-flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}
.ch-verified svg {
  width: clamp(13px, 3.2vw, 15px) !important;
  height: clamp(13px, 3.2vw, 15px) !important;
}
.ch-status, .ch-status-text {
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: clamp(0.72rem, 2vw, 0.8rem) !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
}
.ch-status-meta { color: rgba(255, 255, 255, 0.55) !important; }

/* Header actions (video / phone / menu) */
.ch-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: clamp(0.125rem, 0.8vw, 0.25rem) !important;
  flex-shrink: 0 !important;
}
.ch-action {
  background: transparent !important;
  color: var(--ps-white) !important;
  border: 0 !important;
  width: clamp(34px, 8.5vw, 40px) !important;
  height: clamp(34px, 8.5vw, 40px) !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: clamp(0.88rem, 2.4vw, 1rem) !important;
  transition: background 0.15s ease !important;
}
.ch-action:hover { background: rgba(255, 255, 255, 0.12) !important; }
.ch-action:active { background: rgba(255, 255, 255, 0.2) !important; }
.ch-action i { color: var(--ps-white) !important; font-size: inherit !important; }

/* CHAT AREA — subtle gov bg, comfortable padding */
.chat-area {
  background: var(--gov-bg-3) !important;
  padding: clamp(0.75rem, 2.5vw, 1.125rem) clamp(0.625rem, 2.5vw, 1rem) clamp(0.625rem, 2vw, 1rem) !important;
}

/* MESSAGE BUBBLES — flatter, cleaner */
.message:not(.user):not(.notice):not(.flat):not(.video-msg) {
  background: var(--ps-white) !important;
  border: 1px solid var(--gov-line) !important;
  box-shadow: 0 1px 2px rgba(18, 47, 78, 0.04) !important;
  color: var(--gov-text) !important;
  border-radius: 12px !important;
  padding: clamp(0.5rem, 2vw, 0.7rem) clamp(0.75rem, 2.6vw, 0.95rem) !important;
  font-size: clamp(0.86rem, 2.6vw, 0.94rem) !important;
  line-height: 1.45 !important;
}
.message.user {
  background: var(--gov-blue-tint) !important;
  border: 1px solid var(--gov-blue-tint) !important;
  color: var(--ps-navy) !important;
  border-radius: 12px !important;
  padding: clamp(0.5rem, 2vw, 0.7rem) clamp(0.75rem, 2.6vw, 0.95rem) !important;
  font-size: clamp(0.86rem, 2.6vw, 0.94rem) !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;
}
.message.user b, .message.user strong { color: var(--ps-navy) !important; font-weight: 700 !important; }
.message b, .message strong { color: var(--ps-navy) !important; font-weight: 700 !important; }
.message a { color: var(--ps-navy) !important; text-decoration: underline !important; }

/* Message tail simplification */
.message-group:not(.user-group):not(.notice-group):not(.flat-group)::before {
  display: none !important;
}
.message-group.user-group::after { display: none !important; }

/* Notice / system messages */
.message.notice {
  background: var(--gov-blue-tint-2) !important;
  color: var(--ps-navy) !important;
  border: 1px solid var(--gov-blue-tint) !important;
  border-radius: 999px !important;
  padding: clamp(0.35rem, 1.5vw, 0.5rem) clamp(0.75rem, 2.5vw, 1rem) !important;
  font-size: clamp(0.72rem, 2vw, 0.8rem) !important;
  font-weight: 600 !important;
  font-family: var(--font-mono) !important;
  letter-spacing: 0.04em !important;
  align-self: center !important;
  margin: clamp(0.5rem, 2vw, 0.75rem) auto !important;
}

/* Message timestamps */
.message .time, .message .msg-time {
  font-family: var(--font-mono) !important;
  font-size: clamp(0.6rem, 1.7vw, 0.66rem) !important;
  color: var(--wa-text-meta) !important;
  letter-spacing: 0.03em !important;
}

/* INPUT AREA — clean dock */
.input-area {
  background: var(--ps-white) !important;
  border-top: 1px solid var(--gov-line) !important;
  padding: clamp(0.5rem, 2vw, 0.75rem) clamp(0.625rem, 2.5vw, 1rem) !important;
  display: flex !important;
  align-items: center !important;
  gap: clamp(0.4rem, 1.5vw, 0.625rem) !important;
}
.input-wrap, .input-pill, .input-shell {
  background: var(--gov-bg-3) !important;
  border: 1px solid var(--gov-line) !important;
  border-radius: 999px !important;
  padding: clamp(0.5rem, 2vw, 0.65rem) clamp(0.75rem, 2.6vw, 1rem) !important;
  flex: 1 !important;
  min-height: clamp(40px, 11vw, 46px) !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.input-wrap:focus-within, .input-pill:focus-within, .input-shell:focus-within {
  border-color: var(--ps-navy) !important;
  box-shadow: 0 0 0 3px rgba(18, 47, 78, 0.12) !important;
}
.input-text, .input-area input, .input-area textarea {
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  font-family: var(--font-body) !important;
  font-size: clamp(0.9rem, 2.5vw, 1rem) !important;
  color: var(--gov-text) !important;
  flex: 1 !important;
  min-width: 0 !important;
  line-height: 1.4 !important;
}
.input-text::placeholder, .input-area input::placeholder, .input-area textarea::placeholder {
  color: var(--gov-text-meta) !important;
}

/* Send & mic buttons — clean circular */
.send-btn, .mic-btn, button.send, button.mic {
  background: var(--ps-navy) !important;
  color: var(--ps-white) !important;
  border: 0 !important;
  width: clamp(40px, 10vw, 46px) !important;
  height: clamp(40px, 10vw, 46px) !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: clamp(0.92rem, 2.6vw, 1.05rem) !important;
  flex-shrink: 0 !important;
  transition: background 0.15s ease, transform 0.1s ease !important;
}
.send-btn:hover, .mic-btn:hover, button.send:hover, button.mic:hover {
  background: var(--gov-navy-dk) !important;
}
.send-btn:active, .mic-btn:active { transform: scale(0.96) !important; }
.send-btn i, .mic-btn i { color: var(--ps-white) !important; font-size: inherit !important; }
.send-btn:disabled, .mic-btn:disabled {
  background: var(--gov-line) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  cursor: not-allowed !important;
}

/* MOBILE NAVBAR (bottom dock) */
.mobile-navbar {
  background: var(--ps-white) !important;
  border-top: 1px solid var(--gov-line) !important;
  padding: clamp(0.35rem, 1.5vw, 0.5rem) clamp(0.25rem, 1vw, 0.5rem) max(0.5rem, env(safe-area-inset-bottom, 0.5rem)) !important;
  display: flex !important;
  justify-content: space-around !important;
  gap: 0 !important;
}
.nav-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.2rem !important;
  flex: 1 !important;
  padding: clamp(0.25rem, 1vw, 0.4rem) !important;
  color: var(--gov-text-meta) !important;
  font-size: clamp(0.62rem, 1.8vw, 0.7rem) !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  cursor: pointer !important;
  transition: color 0.15s ease !important;
  border-radius: 4px !important;
}
.nav-item i {
  font-size: clamp(0.95rem, 2.6vw, 1.1rem) !important;
  color: inherit !important;
}
.nav-item.active {
  color: var(--ps-navy) !important;
}
.nav-item.active i { color: var(--ps-navy) !important; }
.nav-item:hover { color: var(--ps-navy) !important; }

/* Quoted message — clean accent */
.quoted, .reply-quote, .msg-quote {
  border-left: 3px solid var(--ps-navy) !important;
  background: var(--gov-bg-3) !important;
  padding: clamp(0.4rem, 1.5vw, 0.55rem) clamp(0.625rem, 2vw, 0.75rem) !important;
  border-radius: 0 6px 6px 0 !important;
  margin-bottom: 0.4rem !important;
  font-size: clamp(0.78rem, 2.3vw, 0.86rem) !important;
  color: var(--gov-text-2) !important;
}

/* Embedded overlay (when iframe shows form) */
.embed-overlay {
  background: var(--gov-bg-3) !important;
  border: 0 !important;
}
.embed-overlay iframe {
  background: var(--gov-bg-3) !important;
  border: 0 !important;
}

/* Tighten chat container height/scroll */
.chat-wrapper {
  background: var(--gov-bg-3) !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}
.chat-area {
  flex: 1 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

/* Small screens — ultra compact */
@media (max-width: 380px) {
  .chat-header { gap: 0.5rem !important; padding: 0.5rem 0.625rem !important; }
  .ch-name { font-size: 0.88rem !important; }
  .ch-status, .ch-status-text { font-size: 0.7rem !important; }
  .ch-action, .ch-back { width: 36px !important; height: 36px !important; }
  .input-area { padding: 0.5rem 0.625rem !important; gap: 0.4rem !important; }
  .send-btn, .mic-btn { width: 40px !important; height: 40px !important; }
  .nav-item { font-size: 0.62rem !important; }
}

@media (min-width: 768px) {
  .chat-header { padding: 0.75rem 1.25rem !important; }
  .ch-name { font-size: 1.05rem !important; }
  .input-area { padding: 0.875rem 1.25rem !important; }
}

/* ============================================================
   CHAT HEADER REORDER — avatar to the RIGHT, name+online clean
   ============================================================ */

.chat-header {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto auto !important;
  align-items: center !important;
  gap: clamp(0.4rem, 1.5vw, 0.65rem) !important;
  padding: clamp(0.5rem, 2vw, 0.75rem) clamp(0.625rem, 2.5vw, 1rem) !important;
}

/* Name + status block (column 2 — flexible) */
.chat-header .ch-profile-info {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-width: 0 !important;
  gap: clamp(1px, 0.4vw, 3px) !important;
}
.chat-header .ch-name-row {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.375rem !important;
  min-width: 0 !important;
}
.chat-header .ch-name {
  color: var(--ps-white) !important;
  font-weight: 700 !important;
  font-size: clamp(0.88rem, 2.6vw, 1rem) !important;
  letter-spacing: -0.005em !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
}
.chat-header .ch-verified {
  display: inline-flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}
.chat-header .ch-verified svg {
  width: clamp(12px, 3vw, 14px) !important;
  height: clamp(12px, 3vw, 14px) !important;
  display: block !important;
}

/* "online" with green pulsing dot — clean, responsive */
.chat-header .ch-status {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  font-size: clamp(0.7rem, 2vw, 0.78rem) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.2 !important;
}
.chat-header .ch-status-text {
  color: rgba(255, 255, 255, 0.85) !important;
  font-weight: 500 !important;
  font-size: inherit !important;
  line-height: 1.2 !important;
}
.ch-status-dot {
  width: 7px !important;
  height: 7px !important;
  background: #4ade80 !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.55) !important;
  animation: chStatusPulse 1.8s ease-out infinite !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
}
@keyframes chStatusPulse {
  0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.55); }
  70%  { box-shadow: 0 0 0 6px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

/* Action buttons (column 3 — compact, partially hidden on small) */
.chat-header .ch-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: clamp(0.1rem, 0.6vw, 0.2rem) !important;
  flex-shrink: 0 !important;
}
.chat-header .ch-action {
  width: clamp(32px, 8vw, 38px) !important;
  height: clamp(32px, 8vw, 38px) !important;
  font-size: clamp(0.78rem, 2.2vw, 0.9rem) !important;
}

/* Avatar on the RIGHT (column 4) */
.chat-header .ch-avatar,
.chat-header .ch-avatar--right {
  order: 0 !important;
  width: clamp(36px, 9vw, 42px) !important;
  height: clamp(36px, 9vw, 42px) !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255, 255, 255, 0.22) !important;
  overflow: hidden !important;
  background: var(--gov-navy-dk) !important;
  flex-shrink: 0 !important;
  position: relative !important;
  margin-left: clamp(0.125rem, 0.6vw, 0.25rem) !important;
}
.chat-header .ch-avatar-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Mobile compact — hide phone/video buttons on small screens, keep menu */
@media (max-width: 420px) {
  .chat-header .ch-action[aria-label="Video call"],
  .chat-header .ch-action[aria-label="Voice call"] {
    display: none !important;
  }
}
@media (max-width: 340px) {
  .chat-header .ch-actions { display: none !important; }
}

/* ============================================================
   BOT MESSAGE AVATAR — Logo.avif on the LEFT of bot groups
   Re-enables the previously disabled ::before pseudo-element
   ============================================================ */

.message:not(.user):not(.notice):not(.flat):not(.video-msg)::before {
  content: none !important;
  display: none !important;
}

.message-group:not(.user-group):not(.notice-group):not(.flat-group) {
  margin-left: clamp(36px, 10vw, 46px) !important;
  position: relative !important;
}
.message-group:not(.user-group):not(.notice-group):not(.flat-group)::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: calc(-1 * clamp(36px, 10vw, 46px)) !important;
  bottom: 0 !important;
  width: clamp(28px, 8vw, 36px) !important;
  height: clamp(28px, 8vw, 36px) !important;
  border-radius: 50% !important;
  background: var(--ps-white) url("Logo.avif") center/cover no-repeat !important;
  border: 2px solid var(--ps-white) !important;
  box-shadow:
    0 0 0 1px var(--gov-line),
    0 2px 4px rgba(18, 47, 78, 0.12) !important;
  z-index: 1 !important;
}

/* User group: keep right alignment with optional avatar (or skip avatar) */
.message-group.user-group {
  align-self: flex-end !important;
  margin-right: 0 !important;
  margin-left: auto !important;
}
.message-group.user-group::after {
  display: none !important;
}

/* Make sure bot messages don't break on narrow screens */
.message-group:not(.user-group):not(.notice-group):not(.flat-group) {
  max-width: calc(100% - clamp(40px, 11vw, 52px)) !important;
}
@media (max-width: 360px) {
  .message-group:not(.user-group):not(.notice-group):not(.flat-group) {
    margin-left: clamp(34px, 9.5vw, 42px) !important;
    max-width: calc(100% - clamp(38px, 10.5vw, 48px)) !important;
  }
  .message-group:not(.user-group):not(.notice-group):not(.flat-group)::before {
    left: calc(-1 * clamp(34px, 9.5vw, 42px)) !important;
    width: clamp(26px, 7.5vw, 32px) !important;
    height: clamp(26px, 7.5vw, 32px) !important;
  }
}

/* ============================================================
   ULTIMATE RESPONSIVE ENFORCEMENT
   100% mobile-first, iOS/Android-safe, no horizontal scroll
   ============================================================ */

html {
  -webkit-text-size-adjust: 100% !important;
  -ms-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
  font-size: 16px;
}

@media (max-width: 360px) { html { font-size: 15px; } }
@media (min-width: 1280px) { html { font-size: 16.5px; } }

html, body {
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

* { min-width: 0; }
img, video, svg, iframe, object, embed {
  max-width: 100% !important;
  height: auto;
}
video, iframe { height: auto; }

/* iOS safe-area (notch / home indicator) */
.chat-header { padding-top: max(clamp(0.5rem, 2vw, 0.75rem), env(safe-area-inset-top, 0)) !important; }
.input-area { padding-bottom: max(clamp(0.5rem, 2vw, 0.75rem), env(safe-area-inset-bottom, 0)) !important; }
.mobile-navbar { padding-bottom: max(clamp(0.35rem, 1.5vw, 0.5rem), env(safe-area-inset-bottom, 0)) !important; }
.presell { padding-top: env(safe-area-inset-top, 0); }

/* Prevent layout-shift from autofill highlight in iOS */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--gov-bg-3) inset !important;
  -webkit-text-fill-color: var(--gov-text) !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

/* iOS — force input font-size ≥ 16px to prevent zoom-on-focus */
input, select, textarea {
  font-size: max(16px, 1rem) !important;
}

/* Landscape orientation tightening on phones */
@media (max-height: 480px) and (orientation: landscape) {
  .chat-header { min-height: 44px !important; padding: 0.35rem 0.5rem !important; }
  .input-area { padding: 0.35rem 0.5rem !important; }
  .ps-hero { padding: 0.875rem 0.75rem 1rem !important; }
  .ps-section { padding: 1.25rem 0.75rem !important; }
  .ps-hero h1 { font-size: 1.05rem !important; }
}

/* Touch targets — minimum 44×44px for any interactive element */
button,
.ch-action, .ch-back,
.nav-item,
.send-btn, .mic-btn,
.ps-cta, .ps-btn,
.btn, [role="button"] {
  min-height: 44px;
  min-width: 44px;
  touch-action: manipulation;
}

/* Smooth scroll */
.chat-area, html { scroll-behavior: smooth; }
.chat-area {
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
}

/* Long text wrapping — prevent overflow */
.message, .ps-lead, .ps-hero-sub, p, h1, h2, h3, h4 {
  overflow-wrap: anywhere;
  word-wrap: break-word;
  hyphens: auto;
}

/* Buttons / inputs — never wider than container */
button, input, select, textarea {
  max-width: 100%;
}

/* Embeds iframe — fluid */
.embed-overlay iframe {
  width: 100% !important;
  height: 100% !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
}

/* Modal content — never overflow viewport */
.ps-modal-content {
  max-width: min(90vw, 640px) !important;
  max-height: min(90vh, 90dvh) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

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

/* ============================================================
   CHATBOT — EXHAUSTIVE RESPONSIVE LAYER
   Every message type, every breakpoint, every detail.
   Bot messages, user messages, notices, flat, video-msg,
   avatars, timestamps, input area, header — all fluid.
   ============================================================ */

/* ─── Fluid universal text wrapping ─── */
.message,
.message .msg-content,
.message b, .message strong, .message em, .message i,
.message a, .message span, .message p, .message div {
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  hyphens: auto !important;
  min-width: 0 !important;
}
.message img, .message svg, .message video {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* ─── Better viewport units for mobile chrome ─── */
@supports (height: 100svh) {
  .app, .chat-screen {
    min-height: 100svh !important;
    min-height: 100dvh !important;
  }
}

/* ─── Touch targets for coarse pointers ─── */
@media (pointer: coarse) {
  .ch-back, .ch-action {
    min-width: 44px !important;
    min-height: 44px !important;
  }
  .send-btn, .text-input, button {
    min-height: 44px !important;
  }
}

/* ============================================================
   ULTRA-NARROW (≤ 320px) — micro phones
   ============================================================ */
@media (max-width: 320px) {
  .chat-area { padding: 6px 4px 8px 4px !important; }
  .message {
    padding: 6px 9px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    border-radius: 10px !important;
    min-width: 0 !important;
  }
  .message .msg-content { padding-right: 44px !important; }
  .message-group {
    max-width: calc(100% - 32px) !important;
    margin-bottom: 6px !important;
    gap: 2px !important;
  }
  .message-group:not(.user-group):not(.notice-group):not(.flat-group) {
    margin-left: 26px !important;
  }
  .message-group.user-group { margin-right: 26px !important; }
  .message-group:not(.user-group):not(.notice-group):not(.flat-group)::before,
  .message-group.user-group::after {
    width: 22px !important;
    height: 22px !important;
    left: -28px !important;
    right: auto !important;
    border-width: 1px !important;
  }
  .message-group.user-group::after { right: -28px !important; left: auto !important; }
  .message.notice {
    font-size: 11.5px !important;
    padding: 6px 10px !important;
  }
  .message-group.notice-group { max-width: 96% !important; margin: 6px auto !important; }
  .msg-meta-inline {
    font-size: 10px !important;
  }
}

/* ============================================================
   SMALL PHONES (321–360px)
   ============================================================ */
@media (min-width: 321px) and (max-width: 360px) {
  .chat-area { padding: 7px 5px 9px 5px !important; }
  .message {
    padding: 7px 10px !important;
    font-size: 13.5px !important;
    border-radius: 11px !important;
  }
  .message .msg-content { padding-right: 48px !important; }
  .message-group {
    max-width: calc(100% - 36px) !important;
    margin-bottom: 7px !important;
  }
  .message-group:not(.user-group):not(.notice-group):not(.flat-group) {
    margin-left: 30px !important;
  }
  .message-group.user-group { margin-right: 30px !important; }
  .message-group:not(.user-group):not(.notice-group):not(.flat-group)::before,
  .message-group.user-group::after {
    width: 24px !important;
    height: 24px !important;
    left: -32px !important;
  }
  .message-group.user-group::after { right: -32px !important; left: auto !important; }
  .message.notice { font-size: 12px !important; padding: 6px 11px !important; }
}

/* ============================================================
   STANDARD PHONES (361–480px)
   ============================================================ */
@media (min-width: 361px) and (max-width: 480px) {
  .chat-area { padding: 8px 7px 10px 7px !important; }
  .message {
    padding: 8px 11px !important;
    font-size: 14px !important;
    border-radius: 12px !important;
  }
  .message .msg-content { padding-right: 52px !important; }
  .message-group {
    max-width: calc(100% - 42px) !important;
    margin-bottom: 8px !important;
  }
  .message-group:not(.user-group):not(.notice-group):not(.flat-group) {
    margin-left: 34px !important;
  }
  .message-group.user-group { margin-right: 34px !important; }
  .message-group:not(.user-group):not(.notice-group):not(.flat-group)::before,
  .message-group.user-group::after {
    width: 26px !important;
    height: 26px !important;
    left: -34px !important;
  }
  .message-group.user-group::after { right: -34px !important; left: auto !important; }
}

/* ============================================================
   PHABLETS (481–600px)
   ============================================================ */
@media (min-width: 481px) and (max-width: 600px) {
  .chat-area { padding: 10px 9px 12px 9px !important; }
  .message {
    padding: 8.5px 12px !important;
    font-size: 14.2px !important;
    border-radius: 13px !important;
  }
  .message .msg-content { padding-right: 56px !important; }
  .message-group {
    max-width: min(82%, 540px) !important;
    margin-bottom: 9px !important;
  }
  .message-group:not(.user-group):not(.notice-group):not(.flat-group) {
    margin-left: 40px !important;
  }
  .message-group.user-group { margin-right: 40px !important; }
  .message-group:not(.user-group):not(.notice-group):not(.flat-group)::before,
  .message-group.user-group::after {
    width: 30px !important;
    height: 30px !important;
    left: -38px !important;
  }
  .message-group.user-group::after { right: -38px !important; left: auto !important; }
}

/* ============================================================
   TABLETS (601–767px)
   ============================================================ */
@media (min-width: 601px) and (max-width: 767px) {
  .chat-area { padding: 12px 14px 14px 14px !important; }
  .message {
    padding: 9px 13px !important;
    font-size: 14.4px !important;
    border-radius: 13px !important;
  }
  .message .msg-content { padding-right: 58px !important; }
  .message-group {
    max-width: min(78%, 580px) !important;
    margin-bottom: 9px !important;
  }
  .message-group:not(.user-group):not(.notice-group):not(.flat-group) {
    margin-left: 44px !important;
  }
  .message-group.user-group { margin-right: 44px !important; }
  .message-group:not(.user-group):not(.notice-group):not(.flat-group)::before,
  .message-group.user-group::after {
    width: 32px !important;
    height: 32px !important;
    left: -40px !important;
  }
  .message-group.user-group::after { right: -40px !important; left: auto !important; }
}

/* ============================================================
   LARGE TABLETS (768–1023px)
   ============================================================ */
@media (min-width: 768px) and (max-width: 1023px) {
  .chat-area { padding: 16px 18px 18px 18px !important; }
  .message {
    padding: 9.5px 14px !important;
    font-size: 14.6px !important;
    border-radius: 14px !important;
  }
  .message .msg-content { padding-right: 62px !important; }
  .message-group {
    max-width: min(75%, 640px) !important;
    margin-bottom: 10px !important;
  }
  .message-group:not(.user-group):not(.notice-group):not(.flat-group) {
    margin-left: 48px !important;
  }
  .message-group.user-group { margin-right: 48px !important; }
  .message-group:not(.user-group):not(.notice-group):not(.flat-group)::before,
  .message-group.user-group::after {
    width: 34px !important;
    height: 34px !important;
    left: -44px !important;
  }
  .message-group.user-group::after { right: -44px !important; left: auto !important; }
}

/* ============================================================
   DESKTOP (1024–1279px) — centered chat
   ============================================================ */
@media (min-width: 1024px) and (max-width: 1279px) {
  .chat-area { padding: 20px 22px 22px 22px !important; }
  .message {
    padding: 10px 15px !important;
    font-size: 14.8px !important;
    border-radius: 14px !important;
  }
  .message .msg-content { padding-right: 64px !important; }
  .message-group {
    max-width: min(72%, 680px) !important;
    margin-bottom: 11px !important;
  }
}

/* ============================================================
   LARGE DESKTOP (1280px+)
   ============================================================ */
@media (min-width: 1280px) {
  .chat-area { padding: 24px 26px 24px 26px !important; }
  .message {
    padding: 10px 16px !important;
    font-size: 15px !important;
    border-radius: 14px !important;
  }
  .message-group { max-width: min(68%, 720px) !important; }
}

/* ============================================================
   LANDSCAPE MOBILE — height-compressed
   ============================================================ */
@media (max-height: 520px) and (orientation: landscape) {
  .chat-area { padding: 6px 10px 8px 10px !important; }
  .message {
    padding: 6px 10px !important;
    font-size: 13.2px !important;
    line-height: 1.35 !important;
  }
  .message-group { margin-bottom: 5px !important; gap: 2px !important; }
  .message.notice { font-size: 11.5px !important; padding: 5px 10px !important; }
  .message-group.notice-group { margin: 4px auto !important; }
}

/* ============================================================
   MESSAGE.NOTICE — system notices (cross-breakpoint)
   ============================================================ */
.message-group.notice-group {
  max-width: min(440px, 94%) !important;
  margin: clamp(6px, 1.5vw, 10px) auto !important;
}
.message.notice {
  font-size: clamp(11.5px, 3vw, 12.5px) !important;
  padding: clamp(6px, 1.8vw, 8px) clamp(11px, 3vw, 14px) !important;
  line-height: 1.42 !important;
  border-radius: clamp(7px, 2vw, 8px) !important;
}
.message.notice i { font-size: clamp(11px, 2.8vw, 12.5px) !important; }

/* ============================================================
   MESSAGE.FLAT (full-width embeds like reaction polls)
   ============================================================ */
.message-group.flat-group {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.message.flat {
  width: 100% !important;
  max-width: 100% !important;
  padding: clamp(8px, 2vw, 12px) clamp(10px, 2.5vw, 14px) !important;
  font-size: clamp(13.5px, 3.4vw, 14.6px) !important;
  border-radius: clamp(10px, 2.5vw, 14px) !important;
}

/* ============================================================
   MESSAGE.VIDEO-MSG — preserve aspect ratio
   ============================================================ */
.message.video-msg {
  max-width: min(78%, 360px) !important;
  padding: 0 !important;
  overflow: hidden !important;
}
.message.video-msg video {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: cover !important;
  display: block !important;
}

/* ============================================================
   MSG-META-INLINE (timestamps + read receipts)
   ============================================================ */
.msg-meta-inline {
  font-size: clamp(9.5px, 2.4vw, 11px) !important;
  gap: clamp(2px, 0.8vw, 3px) !important;
}

/* ============================================================
   INPUT AREA — fluid + safe-area
   ============================================================ */
.input-area, .chat-footer {
  padding-bottom: max(env(safe-area-inset-bottom, 0), 0) !important;
}
.text-input, .input-wrapper input, .input-wrapper textarea {
  font-size: max(16px, clamp(14px, 3.5vw, 16px)) !important; /* prevents iOS zoom */
  min-height: clamp(40px, 10vw, 48px) !important;
}

/* ============================================================
   CHAT HEADER — proportional shrink
   ============================================================ */
@media (max-width: 320px) {
  .ch-name { font-size: 14.5px !important; }
  .ch-back, .ch-action { width: 32px !important; height: 32px !important; font-size: 14px !important; }
  .ch-avatar { width: 32px !important; height: 32px !important; }
}

/* ============================================================
   PRINT — clean print
   ============================================================ */
@media print {
  .chat-header, .input-area, .ch-actions { display: none !important; }
  .message-group::before, .message-group::after { display: none !important; }
  .message { box-shadow: none !important; border: 1px solid #ccc !important; }
}

/* ============================================================
   PREVENT iOS BOUNCE & OVERSCROLL inside chat
   ============================================================ */
.chat-area {
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

/* ============================================================
   AUDIO PLAYER — WHATSAPP-STYLE 1:1
   Avatar with mic overlay · inline play triangle · waveform bars
   real audio peaks · time below · 100% responsive
   ============================================================ */

/* ─── Bubble shell — WhatsApp pill ─── */
.audio-player {
  background: #f0f4f8 !important;
  border: 1px solid rgba(17, 46, 81, 0.07) !important;
  border-radius: clamp(16px, 4.5vw, 22px) !important;
  padding: clamp(8px, 2.4vw, 10px) clamp(14px, 3.6vw, 18px) clamp(8px, 2.4vw, 10px) clamp(8px, 2.4vw, 10px) !important;
  gap: clamp(8px, 2.4vw, 11px) !important;
  box-shadow:
    0 1px 1px rgba(17, 46, 81, 0.04),
    0 1px 2px rgba(17, 46, 81, 0.04) !important;
  position: relative !important;
  overflow: visible !important;
  display: flex !important;
  align-items: center !important;
  max-width: clamp(280px, 82vw, 360px) !important;
  width: 100% !important;
  isolation: isolate !important;
  min-height: clamp(54px, 14vw, 64px) !important;
}

/* Remove old accent + dot — WhatsApp style is clean */
.audio-player::before { content: none !important; display: none !important; }
.audio-player::after { content: none !important; display: none !important; }

/* ─── Avatar with mic overlay (left side) ─── */
.audio-avatar {
  position: relative !important;
  width: clamp(38px, 10vw, 44px) !important;
  height: clamp(38px, 10vw, 44px) !important;
  flex-shrink: 0 !important;
  border-radius: 50% !important;
  overflow: visible !important;
}
.audio-avatar-img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  background: #ffffff !important;
  border: 1.5px solid #ffffff !important;
  box-shadow: 0 1px 2px rgba(17, 46, 81, 0.08) !important;
}
.audio-avatar-mic {
  position: absolute !important;
  right: -2px !important;
  bottom: -2px !important;
  width: clamp(16px, 4.4vw, 19px) !important;
  height: clamp(16px, 4.4vw, 19px) !important;
  border-radius: 50% !important;
  background: linear-gradient(180deg, #2c5282 0%, #112e51 100%) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: clamp(8px, 2.2vw, 9.5px) !important;
  border: 2px solid #f0f4f8 !important;
  box-shadow: 0 1px 2px rgba(17, 46, 81, 0.15) !important;
  z-index: 2 !important;
  line-height: 1 !important;
}
.audio-avatar-mic i { line-height: 1 !important; }

/* ─── Hide the loud "VOICE MEMO" pseudo-label (WhatsApp doesn't have it) ─── */
.audio-info::before {
  content: none !important;
  display: none !important;
}

/* ─── Play / pause button — WhatsApp minimal (just the icon, no circle bg) ─── */
.audio-control {
  width: clamp(26px, 6.8vw, 30px) !important;
  height: clamp(26px, 6.8vw, 30px) !important;
  min-width: clamp(26px, 6.8vw, 30px) !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #5b616b !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  border: none !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  transition: color 0.15s ease, transform 0.14s cubic-bezier(0.22, 1, 0.36, 1) !important;
  box-shadow: none !important;
}
.audio-control:hover { color: #112e51 !important; background: rgba(17, 46, 81, 0.06) !important; }
.audio-control:active { transform: scale(0.94) !important; }
.audio-control:focus-visible {
  outline: 2px solid rgba(17, 46, 81, 0.45) !important;
  outline-offset: 2px !important;
}
.audio-control i {
  font-size: clamp(18px, 4.8vw, 22px) !important;
  line-height: 1 !important;
  margin-left: 1.5px !important;
  color: #4a5568 !important;
}
.audio-control i.fa-pause {
  margin-left: 0 !important;
  font-size: clamp(15px, 4vw, 18px) !important;
}

/* ─── Info area — WhatsApp vertical layout (waveform on top, time below) ─── */
.audio-info {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: clamp(3px, 1vw, 5px) !important;
  min-width: 0 !important;
  padding-right: 0 !important;
}

/* ─── Waveform — WhatsApp-style: thin dense bars, real audio peaks ─── */
.audio-waveform-container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: clamp(1px, 0.35vw, 1.5px) !important;
  height: clamp(24px, 6vw, 28px) !important;
  width: 100% !important;
  cursor: pointer !important;
  overflow: visible !important;
  position: relative !important;
  padding: 0 !important;
  touch-action: manipulation !important;
}

.audio-bar {
  display: block !important;
  flex: 1 1 0 !important;
  min-width: 1.5px !important;
  max-width: 2.5px !important;
  /* Bar fills full container height, then scales by peak ratio */
  height: 100% !important;
  background: #b0bac5 !important;
  border-radius: 999px !important;
  transform-origin: center center !important;
  transform: scaleY(max(0.18, var(--peak, 0.35))) !important;
  transition:
    background-color 0.15s ease,
    transform 0.18s cubic-bezier(0.22, 1, 0.36, 1) !important;
  opacity: 1 !important;
  will-change: transform, background-color !important;
}
/* Played portion — solid navy (like WhatsApp's deep teal) */
.audio-bar.played { background: #112e51 !important; }

@media (hover: hover) and (pointer: fine) {
  .audio-waveform-container:hover .audio-bar:not(.played) { background: #8a98a8 !important; }
}
.audio-waveform-container:focus-visible {
  outline: 2px solid rgba(17, 46, 81, 0.45) !important;
  outline-offset: 2px !important;
  border-radius: 4px !important;
}

/* ─── Time row — WhatsApp style (single time on the left) ─── */
.audio-time {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: clamp(3px, 1vw, 5px) !important;
  font-family: inherit !important;
  font-size: clamp(11px, 2.9vw, 12.5px) !important;
  font-weight: 400 !important;
  color: #6b7480 !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  text-transform: none !important;
}
.audio-time .current-time {
  color: #6b7480 !important;
  font-weight: 400 !important;
}
.audio-time .duration {
  color: #6b7480 !important;
  font-weight: 400 !important;
  margin-left: 0 !important;
}
.audio-time { word-spacing: 0 !important; }

/* ─── Optional "playing" pulsing dot indicator ─── */
.audio-player::after {
  content: "" !important;
  position: absolute !important;
  top: clamp(8px, 2.2vw, 10px) !important;
  right: clamp(8px, 2.2vw, 10px) !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #2e8540 !important;
  opacity: 0 !important;
  transform: scale(0.7) !important;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1) !important;
  box-shadow: 0 0 0 0 rgba(46, 133, 64, 0.55) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
.audio-player:has(.audio-control[data-playing="true"])::after,
.audio-player:has(.audio-control i.fa-pause)::after,
.audio-player.is-playing::after {
  opacity: 1 !important;
  transform: scale(1) !important;
  animation: audioPulse 1.8s ease-out infinite !important;
}
@keyframes audioPulse {
  0%   { box-shadow: 0 0 0 0 rgba(46, 133, 64, 0.5); }
  70%  { box-shadow: 0 0 0 7px rgba(46, 133, 64, 0); }
  100% { box-shadow: 0 0 0 0 rgba(46, 133, 64, 0); }
}

/* ─── Group wrapper — match audio-player size, transparent shell ─── */
.message.flat:has(.audio-player) {
  max-width: clamp(280px, 82vw, 360px) !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  border: none !important;
  width: 100% !important;
}
.message-group.flat-group:has(.audio-player) {
  align-self: flex-start !important;
  max-width: clamp(280px, 82vw, 360px) !important;
  margin-left: clamp(4px, 1.5vw, 8px) !important;
  margin-right: 0 !important;
}

/* ─── Hover refinements (fine pointers only) ─── */
@media (hover: hover) and (pointer: fine) {
  .audio-waveform-container:hover .audio-bar:not(.played) {
    background: #a0aec0 !important;
  }
  .audio-player:hover {
    border-color: rgba(17, 46, 81, 0.20) !important;
    box-shadow:
      0 2px 4px rgba(17, 46, 81, 0.06),
      0 1px 8px rgba(17, 46, 81, 0.06) !important;
  }
}

/* ─── Touch refinements ─── */
@media (pointer: coarse) {
  .audio-control { min-width: 42px !important; min-height: 42px !important; }
  .audio-waveform-container { min-height: 28px !important; }
}

/* ─── Mobile breakpoints — keep proportional ─── */
@media (max-width: 480px) {
  .audio-player {
    padding: 8px 14px 8px 8px !important;
    gap: 9px !important;
    max-width: min(340px, calc(100vw - 56px)) !important;
    border-radius: 18px !important;
  }
  .audio-avatar { width: 40px !important; height: 40px !important; }
  .audio-avatar-mic { width: 17px !important; height: 17px !important; font-size: 8.5px !important; }
  .audio-control { width: 28px !important; height: 28px !important; min-width: 28px !important; }
  .audio-control i { font-size: 20px !important; }
  .audio-control i.fa-pause { font-size: 16px !important; }
  .audio-waveform-container {
    height: 26px !important;
    gap: 1px !important;
  }
  .audio-bar { min-width: 1.5px !important; max-width: 2.5px !important; }
  .audio-time { font-size: 11px !important; }
}
@media (max-width: 380px) {
  .audio-player {
    padding: 7px 12px 7px 7px !important;
    gap: 8px !important;
    max-width: min(310px, calc(100vw - 50px)) !important;
    border-radius: 17px !important;
  }
  .audio-avatar { width: 38px !important; height: 38px !important; }
  .audio-avatar-mic { width: 16px !important; height: 16px !important; font-size: 8px !important; border-width: 1.5px !important; }
  .audio-control { width: 26px !important; height: 26px !important; min-width: 26px !important; }
  .audio-control i { font-size: 18px !important; }
  .audio-control i.fa-pause { font-size: 15px !important; }
  .audio-waveform-container { height: 24px !important; }
  .audio-bar { min-width: 1.5px !important; max-width: 2.5px !important; }
  .audio-time { font-size: 10.5px !important; }
}
@media (max-width: 320px) {
  .audio-player {
    padding: 6px 10px 6px 6px !important;
    gap: 7px !important;
    max-width: min(280px, calc(100vw - 40px)) !important;
    border-radius: 15px !important;
    min-height: 50px !important;
  }
  .audio-avatar { width: 34px !important; height: 34px !important; }
  .audio-avatar-mic { width: 14px !important; height: 14px !important; font-size: 7px !important; }
  .audio-control { width: 22px !important; height: 22px !important; min-width: 22px !important; }
  .audio-control i { font-size: 16px !important; }
  .audio-control i.fa-pause { font-size: 13px !important; }
  .audio-waveform-container { height: 22px !important; gap: 1px !important; }
  .audio-bar { min-width: 1px !important; max-width: 2px !important; }
  .audio-time { font-size: 10px !important; }
}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  .audio-player::after,
  .audio-bar,
  .audio-control { animation: none !important; transition: none !important; }
}

/* ─── Forced colors (high-contrast) ─── */
@media (forced-colors: active) {
  .audio-control { background: ButtonText !important; color: ButtonFace !important; }
  .audio-bar { background: GrayText !important; }
  .audio-bar.played { background: Highlight !important; }
  .audio-player { border-color: CanvasText !important; }
}

/* ============================================================
   SETTLEMENT SEARCH PANEL (ss-*) — in-chat mini gov dashboard
   USA flag banner · tricolor stripe · federal seal masthead ·
   table list with blurred entries · countdown · authority footer
   ============================================================ */

.ss-panel {
  background: #ffffff;
  border: 1px solid rgba(17, 46, 81, 0.10);
  border-radius: 10px;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(17, 46, 81, 0.05),
    0 4px 14px rgba(17, 46, 81, 0.06);
  font-family: var(--wa-font), -apple-system, system-ui, sans-serif;
  width: 100%;
  max-width: 24rem; /* compact widget — not full-bleed */
  margin: 0;
  isolation: isolate;
}

/* ─── .gov banner with US flag (top) ─── */
.ss-gov-banner {
  background: #f7fafc;
  border-bottom: 1px solid #e8ebee;
  padding: clamp(5px, 1.4vw, 7px) clamp(12px, 3vw, 15px);
  display: flex;
  align-items: flex-start;
  gap: clamp(6px, 1.8vw, 8px);
  font-size: clamp(10px, 2.6vw, 11.5px);
  color: #6b7480;
  line-height: 1.4;
}
.ss-gov-flag {
  width: clamp(13px, 3.4vw, 15px);
  height: clamp(9px, 2.4vw, 10.5px);
  flex-shrink: 0;
  margin-top: 2px;
  border-radius: 1px;
  overflow: hidden;
  display: block;
}
.ss-gov-flag svg { display: block; width: 100%; height: 100%; }
.ss-gov-text { flex: 1; min-width: 0; }
.ss-gov-text b { color: #323a45; font-weight: 700; }

/* ─── Tricolor rule (red/white/navy) ─── */
.ss-tricolor {
  height: 3px;
  background: linear-gradient(90deg, #b22234 33.33%, #ffffff 33.33% 66.66%, #112e51 66.66%);
}
/* When the masthead has been removed, give the tricolor extra breathing room
   so the document-title block doesn't start jammed against it */
.ss-tricolor + .ss-doctitle {
  border-top: 0;
}

/* ─── Navy masthead with federal seal — fully responsive ─── */
.ss-masthead {
  background: #112e51;
  color: #ffffff;
  padding: clamp(8px, 2.4vw, 11px) clamp(10px, 2.6vw, 13px);
  display: flex;
  align-items: center;
  gap: clamp(7px, 2vw, 10px);
  position: relative;
}
.ss-masthead::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: #ffbe2e;
  opacity: 0.35;
}
.ss-seal {
  width: clamp(30px, 8vw, 38px);
  height: clamp(30px, 8vw, 38px);
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  background: #ffffff;
  padding: 2px;
}
.ss-seal svg { width: 100%; height: 100%; display: block; }

/* Text block: takes remaining space, wraps in 2 lines max */
.ss-masthead-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
.ss-masthead-agency {
  font-family: "Merriweather", Georgia, serif;
  font-size: clamp(11px, 2.8vw, 13px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: #ffffff;
  /* Allow wrap up to 2 lines, then ellipsis */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.ss-masthead-bureau {
  font-size: clamp(9px, 2.3vw, 10.5px);
  color: rgba(255, 255, 255, 0.72);
  font-weight: 500;
  line-height: 1.3;
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* LIVE badge — compact, doesn't push other content */
.ss-livebadge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(46, 133, 64, 0.20);
  color: #ffffff;
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size: clamp(8.5px, 2.1vw, 10px);
  font-weight: 700;
  letter-spacing: 0.10em;
  padding: 2.5px 5px;
  border-radius: 3px;
  border: 1px solid rgba(46, 220, 96, 0.40);
  flex-shrink: 0;
  line-height: 1.1;
  white-space: nowrap;
}
.ss-livedot {
  width: 5px;
  height: 5px;
}

/* Inline variant — used inside the doctitle row (no masthead anymore) */
.ss-livebadge.ss-livebadge--inline {
  background: rgba(46, 133, 64, 0.10);
  color: #19381f;
  border: 1px solid rgba(46, 133, 64, 0.30);
  font-size: clamp(7.5px, 1.95vw, 9px);
  letter-spacing: 0.09em;
  padding: 2px 5px;
  margin-left: auto;
}
.ss-livebadge--inline .ss-livedot {
  background: #2e8540;
  box-shadow: 0 0 0 0 rgba(46, 133, 64, 0.55);
  animation: ssPulse 1.6s ease-out infinite;
}

/* ─── Narrow widths: stack agency name above badge if needed ─── */
@media (max-width: 380px) {
  .ss-masthead {
    padding: 8px 10px;
    gap: 8px;
  }
  .ss-seal {
    width: 32px;
    height: 32px;
  }
  .ss-masthead-agency {
    font-size: 11.5px;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
  .ss-masthead-bureau {
    font-size: 9px;
    -webkit-line-clamp: 1;
    line-clamp: 1;
  }
  .ss-livebadge {
    font-size: 8.5px;
    padding: 2px 4px;
    letter-spacing: 0.08em;
  }
}
@media (max-width: 320px) {
  .ss-seal { width: 28px; height: 28px; padding: 1.5px; }
  .ss-masthead-agency { font-size: 11px; }
  .ss-masthead-bureau { font-size: 8.5px; }
  /* Show just the dot on tiniest widths (label hidden) */
  .ss-livebadge {
    padding: 0;
    width: 14px;
    height: 14px;
    justify-content: center;
    border-radius: 50%;
    background: transparent;
    border: 0;
    font-size: 0;
  }
  .ss-livebadge .ss-livedot {
    width: 8px;
    height: 8px;
  }
}
.ss-livedot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #4ed080;
  box-shadow: 0 0 0 0 rgba(78, 208, 128, 0.55);
  animation: ssPulse 1.6s ease-out infinite;
}
@keyframes ssPulse {
  0%   { box-shadow: 0 0 0 0 rgba(78, 208, 128, 0.55); }
  70%  { box-shadow: 0 0 0 6px rgba(78, 208, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(78, 208, 128, 0); }
}

/* ─── Document title strip — fully responsive ─── */
.ss-doctitle {
  background: #ffffff;
  border-bottom: 1px solid #e8ebee;
  padding: clamp(10px, 2.6vw, 13px) clamp(11px, 2.8vw, 14px);
}
.ss-doctitle-row {
  display: flex;
  align-items: center;
  gap: clamp(7px, 1.8vw, 9px);
  margin-bottom: 4px;
  flex-wrap: wrap;
  row-gap: 5px;
}
.ss-doctitle-stamp {
  font-family: inherit;
  font-size: clamp(8px, 2.05vw, 9px);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #b22234;
  padding: 2px 5px;
  background: rgba(178, 34, 52, 0.08);
  border: 0;
  border-radius: 2px;
  line-height: 1.2;
  flex-shrink: 0;
  white-space: nowrap;
}
.ss-doctitle-text {
  font-family: "Merriweather", Georgia, serif;
  font-size: clamp(12px, 3vw, 14px);
  font-weight: 700;
  color: #112e51;
  letter-spacing: -0.005em;
  line-height: 1.25;
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.ss-doctitle-meta {
  font-size: clamp(10px, 2.5vw, 11.5px);
  color: #6b7480;
  letter-spacing: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  row-gap: 3px;
  line-height: 1.45;
  font-family: inherit;
}
.ss-doctitle-meta > span {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.ss-doctitle-meta b {
  color: #112e51;
  font-weight: 600;
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size: 0.95em;
  letter-spacing: 0.02em;
  word-break: break-all;
  overflow-wrap: anywhere;
}
.ss-sep { color: #d1d5db; }

@media (max-width: 380px) {
  .ss-doctitle { padding: 10px 11px; }
  .ss-doctitle-row {
    gap: 6px;
    row-gap: 4px;
  }
  .ss-doctitle-stamp { font-size: 8px; padding: 2px 5px; }
  .ss-doctitle-text { font-size: 12px; }
  .ss-doctitle-meta { font-size: 10px; }
}
@media (max-width: 320px) {
  .ss-doctitle-text { font-size: 11.5px; }
  .ss-doctitle-meta { font-size: 9.5px; }
  .ss-doctitle-meta b { font-size: 0.92em; }
}

/* ─── Table header row — slim ─── */
.ss-table-head {
  display: flex;
  align-items: center;
  background: #f7fafc;
  color: #6b7480;
  padding: clamp(5px, 1.6vw, 7px) clamp(10px, 2.6vw, 12px);
  font-family: inherit;
  font-size: clamp(8.5px, 2.1vw, 9.5px);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  gap: clamp(5px, 1.4vw, 7px);
  border-bottom: 1px solid #e8ebee;
}
.ss-th-name   { flex: 1; min-width: 0; }
.ss-th-status { flex: 0 0 auto; min-width: 3.4rem; text-align: center; }
.ss-th-value  { flex: 0 0 auto; min-width: 3.4rem; text-align: right; }
.message.flat:has(.ss-panel) {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  max-width: 24rem !important;
  width: 100% !important;
}
.message-group.flat-group:has(.ss-panel) {
  width: auto !important;
  max-width: 24rem !important;
  margin-left: clamp(6px, 2vw, 12px) !important;
  margin-right: 0 !important;
  align-self: flex-start !important;
}
/* On phones constrain to viewport */
@media (max-width: 480px) {
  .ss-panel,
  .message.flat:has(.ss-panel),
  .message-group.flat-group:has(.ss-panel) {
    max-width: calc(100vw - 22px) !important;
  }
}

/* ─── Panel head ─── */
.ss-panel-head {
  padding: clamp(10px, 3vw, 14px) clamp(12px, 3.4vw, 16px) clamp(8px, 2.5vw, 11px);
  background: linear-gradient(180deg, #f7fafc 0%, #ffffff 100%);
  border-bottom: 1px solid rgba(17, 46, 81, 0.08);
}
.ss-panel-headtop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 5px;
}
.ss-panel-titlewrap {
  display: flex;
  align-items: center;
  gap: clamp(6px, 1.8vw, 8px);
  min-width: 0;
}
.ss-panel-icon {
  width: clamp(22px, 6vw, 26px);
  height: clamp(22px, 6vw, 26px);
  border-radius: 50%;
  background: #112e51;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(10px, 2.6vw, 12px);
  flex-shrink: 0;
}
.ss-panel-title {
  font-family: "Merriweather", Georgia, serif;
  font-size: clamp(13px, 3.3vw, 14.5px);
  font-weight: 700;
  color: #112e51;
  letter-spacing: -0.005em;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ss-panel-livebadge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(46, 133, 64, 0.10);
  color: #19381f;
  font-size: clamp(9.5px, 2.4vw, 10.5px);
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 3px 7px;
  border-radius: 3px;
  border: 1px solid rgba(46, 133, 64, 0.25);
  flex-shrink: 0;
}
.ss-livedot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #2e8540;
  box-shadow: 0 0 0 0 rgba(46, 133, 64, 0.55);
  animation: ssPulse 1.6s ease-out infinite;
}
@keyframes ssPulse {
  0%   { box-shadow: 0 0 0 0 rgba(46, 133, 64, 0.55); }
  70%  { box-shadow: 0 0 0 6px rgba(46, 133, 64, 0); }
  100% { box-shadow: 0 0 0 0 rgba(46, 133, 64, 0); }
}

.ss-panel-headmeta {
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size: clamp(9.5px, 2.4vw, 10.5px);
  color: #5b616b;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  line-height: 1.4;
}
.ss-panel-headmeta b { color: #112e51; font-weight: 700; }
.ss-sep { color: #aeb0b5; }

/* ─── List ─── */
.ss-panel-list {
  background: #ffffff;
  max-height: clamp(150px, 34vh, 200px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.ss-panel-list::-webkit-scrollbar { width: 4px; }
.ss-panel-list::-webkit-scrollbar-thumb {
  background: rgba(17, 46, 81, 0.18);
  border-radius: 4px;
}

.ss-row {
  display: flex;
  align-items: center;
  padding: clamp(6px, 1.7vw, 8px) clamp(10px, 2.6vw, 12px);
  border-bottom: 1px solid #f1f3f6;
  gap: clamp(5px, 1.4vw, 7px);
  position: relative;
  background: #ffffff;
}
.ss-row:last-child { border-bottom: none; }
.ss-row:nth-child(even) { background: #fbfcfd; }

.ss-row-main {
  flex: 1;
  display: flex;
  align-items: center;
  gap: clamp(5px, 1.4vw, 7px);
  min-width: 0;
}

.ss-row-id {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  flex: 1;
}
.ss-name {
  font-size: clamp(11.5px, 2.85vw, 12.5px);
  font-weight: 600;
  color: #1b1b1b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}
.ss-dob {
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size: clamp(8.5px, 2.1vw, 9.5px);
  color: #6b7480;
  letter-spacing: 0.03em;
  margin-top: 1px;
  line-height: 1.2;
}

.ss-row-meta {
  display: flex;
  align-items: center;
  gap: clamp(5px, 1.4vw, 7px);
  flex-shrink: 0;
}
.ss-status {
  flex: 0 0 auto;
  min-width: 3.4rem;
  text-align: center;
}
.ss-value {
  flex: 0 0 auto;
  min-width: 3.4rem;
  text-align: right;
  font-family: "Merriweather", Georgia, serif;
  font-size: clamp(11.5px, 2.85vw, 12.5px);
  font-weight: 700;
  color: #112e51;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}

.ss-status {
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size: clamp(7.5px, 1.95vw, 8.5px);
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 1.5px 5px;
  border-radius: 2.5px;
  text-transform: uppercase;
  line-height: 1.1;
  white-space: nowrap;
}
.ss-status--approved {
  background: rgba(46, 133, 64, 0.12);
  color: #19381f;
  border: 1px solid rgba(46, 133, 64, 0.30);
}
.ss-status--pending {
  background: rgba(178, 34, 52, 0.10);
  color: #8b1818;
  border: 1px solid rgba(178, 34, 52, 0.30);
}
.ss-status--review {
  background: rgba(91, 97, 107, 0.10);
  color: #323a45;
  border: 1px solid rgba(91, 97, 107, 0.28);
}

/* Blur effect for non-user entries */
.ss-blur {
  filter: blur(3.5px) !important;
  user-select: none;
  pointer-events: none;
}
@media (max-width: 480px) {
  .ss-blur { filter: blur(3px) !important; }
}
@media (max-width: 360px) {
  .ss-blur { filter: blur(2.5px) !important; }
}

/* User row — subtle highlight, gov-credible */
.ss-row--user {
  background: #fffdf6 !important;
  box-shadow: inset 3px 0 0 0 #ffbe2e;
  position: relative;
  z-index: 1;
  animation: ssUserHighlight 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes ssUserHighlight {
  0%   { opacity: 0; transform: translateY(2px); }
  100% { opacity: 1; transform: translateY(0); }
}
.ss-row-flag {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(12px, 3.4vw, 15px);
  flex-shrink: 0;
  color: #b22234;
  font-size: clamp(10px, 2.6vw, 12px);
}
.ss-row--user .ss-name {
  color: #112e51;
  font-weight: 700;
}
.ss-row--user .ss-value {
  color: #112e51;
}
.ss-row--user .ss-dob { color: #5b616b; }

/* ─── Counter row — "+N Americans on this year's list" ─── */
.ss-list-counter {
  display: flex;
  align-items: center;
  gap: clamp(7px, 2vw, 9px);
  padding: clamp(8px, 2.2vw, 10px) clamp(10px, 2.6vw, 12px);
  background: #f7fafc;
  border-top: 1px solid #e8ebee;
  position: sticky;
  bottom: 0;
  z-index: 1;
}
.ss-list-counter-icon {
  width: clamp(22px, 5.5vw, 26px);
  height: clamp(22px, 5.5vw, 26px);
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #112e51;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(10px, 2.6vw, 12px);
  flex-shrink: 0;
}
.ss-list-counter-text {
  flex: 1;
  min-width: 0;
  font-size: clamp(10.5px, 2.6vw, 11.5px);
  color: #5b616b;
  line-height: 1.35;
  letter-spacing: 0;
}
.ss-list-counter-num {
  font-family: "Merriweather", Georgia, serif;
  font-weight: 700;
  color: #112e51;
  font-variant-numeric: tabular-nums;
  font-size: clamp(11.5px, 2.85vw, 12.5px);
  margin-right: 3px;
}
.ss-list-counter-year {
  color: #8a98a8;
  font-size: 0.92em;
  white-space: nowrap;
}

/* ─── Standalone deadline panel (appears 5s after the list) ─── */
.ss-deadline-panel {
  background: #ffffff;
  border: 1px solid rgba(17, 46, 81, 0.10);
  border-radius: 10px;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(17, 46, 81, 0.05),
    0 4px 14px rgba(17, 46, 81, 0.06);
  font-family: var(--wa-font), -apple-system, system-ui, sans-serif;
  width: 100%;
  max-width: 24rem;
  margin: 0;
  isolation: isolate;
  animation: ssDeadlineIn 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes ssDeadlineIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .ss-deadline-panel { animation: none !important; }
}

.message.flat:has(.ss-deadline-panel) {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  max-width: 24rem !important;
  width: 100% !important;
  border: none !important;
}
.message-group.flat-group:has(.ss-deadline-panel) {
  width: auto !important;
  max-width: 24rem !important;
  margin-left: clamp(6px, 2vw, 12px) !important;
  margin-right: 0 !important;
  align-self: flex-start !important;
}
@media (max-width: 480px) {
  .ss-deadline-panel,
  .message.flat:has(.ss-deadline-panel),
  .message-group.flat-group:has(.ss-deadline-panel) {
    max-width: calc(100vw - 22px) !important;
  }
}

/* Body wrapper inside the standalone deadline panel */
.ss-deadline-panel-body {
  background: #fafbfc;
  padding: clamp(13px, 3.4vw, 16px) clamp(13px, 3.4vw, 16px);
  display: flex;
  gap: clamp(10px, 2.6vw, 12px);
  align-items: flex-start;
  position: relative;
}
.ss-deadline-panel-body::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #b22234;
  opacity: 0.7;
}

/* Inner footer bar (Protocol + TLS + FIPS) — same as ss-panel-foot but adapted */
.ss-deadline-foot-bar {
  background: #ffffff;
  border-top: 1px solid #e8ebee;
  padding: clamp(7px, 2vw, 9px) clamp(11px, 2.8vw, 13px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(6px, 1.8vw, 10px);
  flex-wrap: wrap;
}

/* ─── Legacy in-panel deadline (no longer used but kept for safety) ─── */
.ss-panel-deadline {
  background: #fafbfc;
  border-top: 1px solid #e8ebee;
  padding: clamp(14px, 3.6vw, 18px) clamp(14px, 3.6vw, 18px);
  display: flex;
  gap: clamp(11px, 2.8vw, 14px);
  align-items: flex-start;
  position: relative;
}
.ss-panel-deadline::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #b22234;
  opacity: 0.7;
}
.ss-deadline-icon {
  width: clamp(30px, 8vw, 36px);
  height: clamp(30px, 8vw, 36px);
  border-radius: 50%;
  background: #ffffff;
  color: #b22234;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(13px, 3.4vw, 15px);
  flex-shrink: 0;
  border: 1.5px solid rgba(178, 34, 52, 0.35);
  box-shadow: none;
}
.ss-deadline-body {
  flex: 1;
  min-width: 0;
}
.ss-deadline-title {
  font-family: "Merriweather", Georgia, serif;
  font-size: clamp(12.5px, 3.1vw, 13.5px);
  color: #112e51;
  font-weight: 700;
  margin-bottom: 3px;
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.ss-deadline-sub {
  font-size: clamp(11px, 2.8vw, 12px);
  color: #5b616b;
  margin-bottom: 8px;
  line-height: 1.4;
}
.ss-deadline-clock {
  font-family: "Merriweather", Georgia, serif;
  font-size: clamp(22px, 6vw, 28px);
  font-weight: 700;
  color: #112e51;
  letter-spacing: 0;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin: 4px 0 9px;
  display: inline-block;
}
/* Use ::after on the clock for a thin accent under it */
.ss-deadline-clock::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: rgba(178, 34, 52, 0.35);
  margin-top: 4px;
}
.ss-deadline-foot {
  font-size: clamp(10.5px, 2.7vw, 11.5px);
  color: #5b616b;
  line-height: 1.5;
}
.ss-deadline-foot b { color: #112e51; font-weight: 700; }

/* ─── Responsive refinements ─── */
@media (max-width: 480px) {
  .ss-panel { border-radius: 9px; }
  .ss-panel-head { padding: 10px 12px 8px; }
  .ss-panel-list { max-height: 55vh; }
  .ss-row { padding: 9px 12px; }
  .ss-panel-deadline { padding: 12px; gap: 10px; }
  .ss-row-main { gap: 8px; }
  .ss-name, .ss-value { font-size: 12.5px; }
  .ss-dob { font-size: 10px; }
  .ss-status { font-size: 8.5px; padding: 2px 5px; }
  .ss-deadline-clock { font-size: 26px; }
}
@media (max-width: 360px) {
  .ss-panel-head { padding: 9px 10px 7px; }
  .ss-row { padding: 8px 10px; gap: 6px; }
  .ss-panel-deadline { padding: 10px; gap: 8px; }
  .ss-name, .ss-value { font-size: 12px; }
  .ss-dob { font-size: 9.5px; }
  .ss-status { font-size: 8px; padding: 2px 4px; letter-spacing: 0.06em; }
  .ss-deadline-clock { font-size: 22px; }
  .ss-deadline-title { font-size: 12.5px; }
  .ss-deadline-sub { font-size: 11px; }
  .ss-deadline-foot { font-size: 10px; }
}
@media (max-width: 320px) {
  .ss-row-main { flex-direction: column; align-items: stretch; gap: 4px; }
  .ss-row-meta { flex-direction: row; justify-content: space-between; align-items: center; }
  .ss-value { font-size: 12.5px; }
}

@media (min-width: 600px) {
  .ss-panel-list { max-height: 360px; }
  .ss-name, .ss-value { font-size: 14px; }
  .ss-deadline-clock { font-size: 34px; }
}
@media (min-width: 900px) {
  .ss-panel-list { max-height: 400px; }
}

@media (prefers-reduced-motion: reduce) {
  .ss-livedot { animation: none !important; }
  .ss-row--user { animation: none !important; }
}

/* ─── Authority footer — clean & minimal ─── */
.ss-panel-foot {
  background: #ffffff;
  border-top: 1px solid #e8ebee;
  padding: clamp(8px, 2.2vw, 10px) clamp(12px, 3vw, 15px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(6px, 1.8vw, 10px);
  flex-wrap: wrap;
}
.ss-foot-protocol {
  font-size: clamp(9.5px, 2.4vw, 10.5px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b7480;
  font-weight: 600;
  font-family: inherit;
}
.ss-foot-protocol b {
  color: #112e51;
  font-weight: 700;
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  letter-spacing: 0.04em;
  text-transform: none;
}
.ss-foot-trust {
  display: inline-flex;
  align-items: center;
  gap: clamp(8px, 2vw, 12px);
  flex-wrap: wrap;
}
.ss-foot-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: clamp(9.5px, 2.4vw, 10.5px);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #6b7480;
  font-family: inherit;
  text-transform: none;
}
.ss-foot-item i { color: #112e51; font-size: 0.95em; opacity: 0.85; }
.ss-foot-sep { color: #d1d5db; font-size: 0.9em; }

/* ─── Ultra-narrow refinements for the new gov panel ─── */
@media (max-width: 480px) {
  .ss-table-head { padding: 5px 10px; font-size: 8.5px; }
  .ss-th-status, .ss-th-value { min-width: 3rem; }
  .ss-row { padding: 6px 10px; gap: 5px; }
  .ss-row-main { gap: 5px; }
  .ss-status { min-width: 3rem; font-size: 7.5px; padding: 1.5px 4px; }
  .ss-value { min-width: 3rem; font-size: 12px; }
  .ss-name { font-size: 12px; }
  .ss-dob { font-size: 9px; }
  .ss-masthead { padding: 8px 10px; gap: 7px; }
  .ss-doctitle { padding: 9px 10px; }
  .ss-doctitle-row { gap: 6px; }
  .ss-panel-foot { padding: 6px 10px; }
}
@media (max-width: 360px) {
  .ss-masthead-bureau { font-size: 9.5px; }
  .ss-doctitle-text { font-size: 12px; }
  .ss-doctitle-stamp { font-size: 8px; padding: 2px 5px; }
  .ss-th-status, .ss-th-value { min-width: 2.8rem; }
  .ss-status { min-width: 2.8rem; font-size: 7.5px; padding: 1.5px 4px; }
  .ss-value { min-width: 2.8rem; font-size: 11.5px; }
  .ss-name { font-size: 11.5px; }
  .ss-dob { font-size: 8.5px; }
  .ss-row-meta { gap: 4px; }
  .ss-row { padding: 6px 9px; gap: 5px; }
}
@media (max-width: 320px) {
  /* Stack: name above, status+value below */
  .ss-row { flex-direction: column; align-items: stretch; gap: 3px; }
  .ss-row-main { width: 100%; }
  .ss-row-meta { width: 100%; justify-content: space-between; gap: 6px; }
  .ss-status, .ss-value { min-width: 0; }
}

/* ============================================================
   FINAL RESPONSIVE LAYER — search + deadline panels
   Every viewport-size breakpoint covered, no overflow anywhere.
   ============================================================ */

/* Ultra-narrow (≤ 280px — foldables/watches) */
@media (max-width: 280px) {
  .ss-panel, .ss-deadline-panel,
  .message.flat:has(.ss-panel),
  .message.flat:has(.ss-deadline-panel),
  .message-group.flat-group:has(.ss-panel),
  .message-group.flat-group:has(.ss-deadline-panel) {
    max-width: calc(100vw - 18px) !important;
  }
  .ss-gov-banner { padding: 4px 9px; gap: 5px; font-size: 9.5px; }
  .ss-doctitle { padding: 8px 9px; }
  .ss-doctitle-text { font-size: 11px; }
  .ss-doctitle-stamp { font-size: 7.5px; padding: 2px 4px; }
  .ss-doctitle-meta { font-size: 9px; }
  .ss-livebadge--inline { font-size: 7px; padding: 1.5px 4px; }
  .ss-table-head { padding: 4px 9px; font-size: 8px; }
  .ss-row { padding: 6px 9px; }
  .ss-name { font-size: 11px; }
  .ss-dob { font-size: 8.5px; }
  .ss-value { font-size: 11px; }
  .ss-status { font-size: 7px; }
  .ss-list-counter { padding: 7px 9px; }
  .ss-list-counter-icon { width: 20px; height: 20px; font-size: 9.5px; }
  .ss-list-counter-text { font-size: 10px; }
  .ss-list-counter-num { font-size: 10.5px; }
  .ss-deadline-panel-body { padding: 11px 11px; gap: 8px; }
  .ss-deadline-icon { width: 26px; height: 26px; font-size: 11px; }
  .ss-deadline-title { font-size: 11.5px; }
  .ss-deadline-sub { font-size: 10px; }
  .ss-deadline-clock { font-size: 19px; }
  .ss-deadline-foot { font-size: 9.5px; }
  .ss-deadline-foot-bar { padding: 6px 10px; }
  .ss-foot-protocol, .ss-foot-item { font-size: 9px; letter-spacing: 0.05em; }
}

/* Tablet/desktop (≥ 600px) — allow the widget to be slightly larger */
@media (min-width: 600px) {
  .ss-panel, .ss-deadline-panel,
  .message.flat:has(.ss-panel),
  .message.flat:has(.ss-deadline-panel),
  .message-group.flat-group:has(.ss-panel),
  .message-group.flat-group:has(.ss-deadline-panel) {
    max-width: 26rem !important;
  }
  .ss-panel-list { max-height: clamp(180px, 30vh, 220px); }
  .ss-deadline-clock { font-size: 32px; }
}
@media (min-width: 900px) {
  .ss-panel, .ss-deadline-panel,
  .message.flat:has(.ss-panel),
  .message.flat:has(.ss-deadline-panel),
  .message-group.flat-group:has(.ss-panel),
  .message-group.flat-group:has(.ss-deadline-panel) {
    max-width: 28rem !important;
  }
  .ss-panel-list { max-height: 240px; }
}

/* Landscape phones — keep list compact, deadline panel readable */
@media (max-height: 520px) and (orientation: landscape) {
  .ss-panel-list { max-height: 140px; }
  .ss-deadline-panel-body { padding: 11px 12px; }
  .ss-deadline-clock { font-size: 20px; margin: 3px 0 6px; }
  .ss-deadline-foot { font-size: 10px; }
}

/* ============================================================
   FINAL UNIVERSAL POLISH
   Prevents any horizontal overflow, ensures consistent feel
   ============================================================ */
html, body {
  max-width: 100vw !important;
  overflow-x: hidden !important;
}
img, svg, video, iframe { max-width: 100% !important; }
.app, .chat-screen, .chat-area, .input-area, .options-container {
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.message-group, .message, .info-box, .audio-player, .ss-panel,
.premium-card, .embed-loader-container {
  max-width: 100% !important;
  box-sizing: border-box !important;
}
/* Prevent ANY child from exceeding its parent width */
.chat-area * {
  max-width: 100%;
  box-sizing: border-box;
}
/* Reserve space for the iOS keyboard bar */
@supports (padding: max(0px)) {
  .input-area {
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 8px) !important;
  }
}

/* ============================================================
   GLOBAL SAFEGUARDS — last layer
   Cover edge-case overflows, smooth waveform animation when peaks
   arrive after audio is shown, and ensure no element overflows.
   ============================================================ */

/* Smooth animation when --peak gets patched in by JS */
.audio-bar {
  transition:
    background-color 0.15s ease,
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
/* Honor reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .audio-bar,
  .audio-player::after,
  .audio-control,
  .ss-row--user,
  .ss-deadline-panel { transition: none !important; animation: none !important; }
}

/* When images haven't loaded yet, reserve their box so layout doesn't jump */
.audio-avatar-img { background: #e2e8f0 !important; }

/* Universal safety: any element rendered in chat respects its container */
.chat-area > *, .chat-area > * * {
  max-width: 100%;
}

/* Ensure the iframe overlay covers the viewport on iOS */
.embed-overlay {
  width: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;
  height: 100svh !important;
  max-width: 100vw !important;
  overflow: hidden !important;
}
.embed-overlay iframe {
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
}

/* When iOS keyboard pushes the layout up */
@supports (-webkit-touch-callout: none) {
  .chat-screen { height: 100dvh; }
}

/* Better focus rings on interactive chat elements */
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid rgba(17, 46, 81, 0.55);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Prevent text-only links from breaking layout */
.message a {
  word-break: break-all;
  overflow-wrap: anywhere;
}

/* High-density rendering for SVGs (flags, seals, icons) */
svg { shape-rendering: geometricPrecision; }

/* Note: avoid `content-visibility: auto` on .message-group — it would
   clip the avatar pseudo-elements that sit OUTSIDE the box (left/right
   offsets via ::before/::after). The perf win isn't worth the visual bug. */

/* Print fallback: hide noisy chrome */
@media print {
  .input-area, .chat-header, .ch-actions, .embed-overlay,
  .audio-control, .ss-deadline-panel { display: none !important; }
  body { background: #fff !important; }
}