/* =========================================================
   RTD DEPLOY & CONNECT SECTION
   Full-width deployment and platform connection showcase
========================================================= */

.rtd-deploy-section {
  --rtd-deploy-ink: #101828;
  --rtd-deploy-text: #415166;
  --rtd-deploy-muted: #748296;

  --rtd-deploy-blue: #315f91;
  --rtd-deploy-blue-dark: #173b61;
  --rtd-deploy-blue-deep: #102a46;
  --rtd-deploy-blue-soft: #edf4fa;

  --rtd-deploy-green: #16745a;
  --rtd-deploy-green-soft: #e8f5ef;

  --rtd-deploy-amber: #9b671d;
  --rtd-deploy-amber-soft: #fbf1df;

  --rtd-deploy-paper: #f2f4f5;
  --rtd-deploy-surface: #ffffff;

  --rtd-deploy-line: rgba(53, 75, 101, 0.18);
  --rtd-deploy-dark-line: rgba(255, 255, 255, 0.14);

  position: relative;

  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  overflow: hidden;

  color: var(--rtd-deploy-ink);
  background: var(--rtd-deploy-paper);

  border-top: 1px solid var(--rtd-deploy-line);
  border-bottom: 1px solid var(--rtd-deploy-line);
}

.rtd-deploy-section *,
.rtd-deploy-section *::before,
.rtd-deploy-section *::after {
  box-sizing: border-box;
}

.rtd-deploy-section button,
.rtd-deploy-section input,
.rtd-deploy-section select {
  font: inherit;
}

.rtd-deploy-section button {
  cursor: pointer;
}

.rtd-deploy-section a {
  color: inherit;
}

/* =========================================================
   INTRODUCTION
========================================================= */

.rtd-deploy-section__intro {
  width: 100%;

  padding:
    clamp(56px, 5.4vw, 126px)
    clamp(22px, 5vw, 116px)
    clamp(72px, 6.6vw, 154px);

  border-bottom: 1px solid var(--rtd-deploy-line);

  background:
    radial-gradient(
      circle at 88% 20%,
      rgba(70, 121, 169, 0.15),
      transparent 33%
    ),
    linear-gradient(
      138deg,
      #fafaf7 0%,
      #f4f6f7 50%,
      #eaf1f7 100%
    );
}

.rtd-deploy-section__intro-meta {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.2vw, 48px);
}

.rtd-deploy-section__number {
  flex: 0 0 auto;

  color: rgba(49, 95, 145, 0.28);

  font-size: clamp(36px, 3.2vw, 76px);
  font-weight: 850;
  letter-spacing: -0.07em;
  line-height: 0.9;
}

.rtd-deploy-section__intro-meta > div {
  padding-left: clamp(18px, 2.1vw, 44px);
  border-left: 1px solid var(--rtd-deploy-line);
}

.rtd-deploy-section__eyebrow {
  display: block;

  color: var(--rtd-deploy-blue);

  font-size: clamp(9px, 0.66vw, 14px);
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.rtd-deploy-section__intro-meta p {
  margin: 7px 0 0;

  color: #7b8899;

  font-size: clamp(10px, 0.72vw, 16px);
  line-height: 1.5;
}

.rtd-deploy-section__intro-heading {
  width: 100%;
  margin-top: clamp(40px, 4.4vw, 94px);
}

.rtd-deploy-section__intro-heading h2 {
  width: 100%;
  margin: 0;

  color: var(--rtd-deploy-ink);

  font-size: clamp(46px, 5.3vw, 130px);
  font-weight: 760;
  letter-spacing: -0.065em;
  line-height: 0.96;

  text-wrap: balance;
}

.rtd-deploy-section__intro-heading h2 em {
  display: block;

  color: var(--rtd-deploy-blue);

  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  letter-spacing: -0.05em;
}

.rtd-deploy-section__intro-copy {
  width: 100%;

  margin-top: clamp(42px, 5vw, 104px);
  padding-left: clamp(0px, 20vw, 500px);

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(30px, 5vw, 112px);
}

.rtd-deploy-section__intro-copy p {
  margin: 0;

  color: var(--rtd-deploy-muted);

  font-size: clamp(15px, 1.03vw, 24px);
  line-height: 1.75;
}

/* =========================================================
   TWO PATHS
========================================================= */

.rtd-deploy-section__paths {
  width: 100%;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  border-bottom: 1px solid var(--rtd-deploy-line);
  background: var(--rtd-deploy-surface);
}

.rtd-deploy-section__path {
  min-width: 0;

  padding:
    clamp(38px, 4vw, 90px)
    clamp(26px, 4vw, 92px);

  border-right: 1px solid var(--rtd-deploy-line);
}

.rtd-deploy-section__path:last-child {
  border-right: 0;
}

.rtd-deploy-section__path.is-deploy {
  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      #f5f8fa 100%
    );
}

.rtd-deploy-section__path.is-connect {
  color: #ffffff;

  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(141, 187, 226, 0.17),
      transparent 38%
    ),
    linear-gradient(
      155deg,
      #102a46 0%,
      #173b61 58%,
      #214f7b 100%
    );
}

.rtd-deploy-section__path > header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(18px, 2vw, 42px);
  align-items: start;
}

.rtd-deploy-section__path-number {
  color: rgba(49, 95, 145, 0.28);

  font-size: clamp(30px, 2.5vw, 58px);
  font-weight: 850;
  letter-spacing: -0.06em;
  line-height: 0.9;
}

.rtd-deploy-section__path.is-connect
.rtd-deploy-section__path-number {
  color: rgba(255, 255, 255, 0.24);
}

.rtd-deploy-section__path header > div > span {
  display: block;

  color: var(--rtd-deploy-blue);

  font-size: clamp(8px, 0.58vw, 12px);
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.rtd-deploy-section__path.is-connect header > div > span {
  color: #9fc2e2;
}

.rtd-deploy-section__path h3 {
  margin: 12px 0 0;

  color: #263f5a;

  font-size: clamp(28px, 2.7vw, 66px);
  font-weight: 750;
  letter-spacing: -0.05em;
  line-height: 1.04;
}

.rtd-deploy-section__path.is-connect h3 {
  color: #ffffff;
}

.rtd-deploy-section__path > p {
  margin:
    clamp(28px, 3vw, 62px)
    0
    0;

  color: var(--rtd-deploy-muted);

  font-size: clamp(13px, 0.92vw, 20px);
  line-height: 1.72;
}

.rtd-deploy-section__path.is-connect > p {
  color: rgba(255, 255, 255, 0.67);
}

/* Deployment method list */

.rtd-deploy-section__path ul {
  margin:
    clamp(28px, 3vw, 62px)
    0
    0;

  padding: 0;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  border-top: 1px solid var(--rtd-deploy-line);
  border-left: 1px solid var(--rtd-deploy-line);

  list-style: none;
}

.rtd-deploy-section__path li {
  min-width: 0;

  padding:
    clamp(18px, 1.8vw, 38px);

  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 13px;
  align-items: start;

  border-right: 1px solid var(--rtd-deploy-line);
  border-bottom: 1px solid var(--rtd-deploy-line);

  background: rgba(255, 255, 255, 0.7);
}

.rtd-deploy-section__path li:last-child {
  grid-column: 1 / -1;
}

.rtd-deploy-section__path li > i {
  width: 38px;
  height: 38px;

  border-radius: 10px;

  display: grid;
  place-items: center;

  color: #ffffff;
  background: var(--rtd-deploy-blue);

  font-size: 13px;
}

.rtd-deploy-section__path li strong,
.rtd-deploy-section__path li span {
  display: block;
}

.rtd-deploy-section__path li strong {
  color: #2d4762;

  font-size: clamp(10px, 0.72vw, 16px);
}

.rtd-deploy-section__path li span {
  margin-top: 6px;

  color: #7b8898;

  font-size: clamp(8px, 0.56vw, 12px);
  line-height: 1.55;
}

/* Connection card */

.rtd-deploy-section__connection-card {
  margin-top: clamp(30px, 3vw, 66px);

  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;

  overflow: hidden;

  background: rgba(255, 255, 255, 0.07);
  box-shadow:
    0 30px 80px rgba(5, 17, 29, 0.2);
}

.rtd-deploy-section__connection-card > header {
  padding:
    clamp(20px, 2vw, 42px);

  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;

  border-bottom: 1px solid rgba(255, 255, 255, 0.13);
}

.rtd-deploy-section__connection-card
> header
> div {
  min-width: 0;

  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 13px;
  align-items: center;
}

.rtd-deploy-section__platform-mark {
  width: 48px;
  height: 48px;

  border-radius: 13px;

  display: grid;
  place-items: center;

  color: var(--rtd-deploy-blue-dark);
  background: #ffffff;

  font-size: 21px;
}

.rtd-deploy-section__connection-card header span,
.rtd-deploy-section__connection-card header strong {
  display: block;
}

.rtd-deploy-section__connection-card header div div span {
  color: #9fc1df;

  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.rtd-deploy-section__connection-card header strong {
  margin-top: 6px;

  color: #ffffff;

  font-size: clamp(14px, 1vw, 22px);
}

.rtd-deploy-section__connection-card header em {
  flex: 0 0 auto;

  padding: 7px 10px;
  border-radius: 999px;

  display: flex;
  align-items: center;
  gap: 7px;

  color: #a9dfc9;
  background: rgba(87, 178, 141, 0.13);

  font-size: 8px;
  font-style: normal;
  font-weight: 800;
}

.rtd-deploy-section__connection-card header em i {
  width: 7px;
  height: 7px;

  border-radius: 50%;
  background: #72c8a6;
}

.rtd-deploy-section__connection-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rtd-deploy-section__connection-details > div {
  min-width: 0;

  padding:
    clamp(17px, 1.8vw, 36px);

  border-right: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.rtd-deploy-section__connection-details
> div:nth-child(2n) {
  border-right: 0;
}

.rtd-deploy-section__connection-details
> div:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.rtd-deploy-section__connection-details span,
.rtd-deploy-section__connection-details strong {
  display: block;
}

.rtd-deploy-section__connection-details span {
  color: rgba(255, 255, 255, 0.46);

  font-size: 7px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rtd-deploy-section__connection-details strong {
  margin-top: 7px;

  color: #ffffff;

  font-size: clamp(9px, 0.66vw, 14px);
  overflow-wrap: anywhere;
}

.rtd-deploy-section__connection-card > footer {
  padding:
    clamp(18px, 1.8vw, 36px);

  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 9px;

  border-top: 1px solid rgba(255, 255, 255, 0.13);
}

.rtd-deploy-section__connection-card footer button {
  min-height: 40px;
  padding: 9px 13px;

  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;

  color: #ffffff;
  background: transparent;

  font-size: 8px;
  font-weight: 760;
}

.rtd-deploy-section__connection-card
footer
button.is-primary {
  color: var(--rtd-deploy-blue-dark);
  border-color: #ffffff;
  background: #ffffff;
}

/* =========================================================
   DEPLOYMENT EXPERIENCE
========================================================= */

.rtd-deploy-section__experience {
  width: 100%;

  display: grid;
  grid-template-columns:
    minmax(260px, 0.55fr)
    minmax(0, 1.75fr);

  border-bottom: 1px solid var(--rtd-deploy-line);
  background: #e9edf0;
}

.rtd-deploy-section__method-selector {
  min-width: 0;

  color: #ffffff;

  background:
    linear-gradient(
      165deg,
      #102a46 0%,
      #173b61 65%,
      #214f7b 100%
    );

  border-right: 1px solid var(--rtd-deploy-dark-line);
}

.rtd-deploy-section__method-selector > header {
  padding:
    clamp(24px, 2.5vw, 52px)
    clamp(22px, 2.4vw, 50px);

  border-bottom: 1px solid var(--rtd-deploy-dark-line);
}

.rtd-deploy-section__method-selector header span,
.rtd-deploy-section__method-selector header strong {
  display: block;
}

.rtd-deploy-section__method-selector header span {
  color: #9fc1df;

  font-size: 8px;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.rtd-deploy-section__method-selector header strong {
  margin-top: 8px;

  color: #ffffff;

  font-size: clamp(15px, 1.1vw, 24px);
  line-height: 1.3;
}

.rtd-deploy-section__method-selector > button {
  width: 100%;
  min-height: clamp(76px, 6.4vw, 132px);

  padding:
    clamp(17px, 1.8vw, 36px)
    clamp(22px, 2.4vw, 50px);

  border: 0;
  border-bottom: 1px solid var(--rtd-deploy-dark-line);

  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;

  color: rgba(255, 255, 255, 0.68);
  background: transparent;

  text-align: left;

  transition:
    color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.rtd-deploy-section__method-selector > button:hover,
.rtd-deploy-section__method-selector > button:focus-visible {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.07);
}

.rtd-deploy-section__method-selector > button.is-active {
  color: #ffffff;

  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 4px 0 0 #a8cae8;
}

.rtd-deploy-section__method-selector
> button
> i:first-child {
  color: #9fc1df;
  font-size: 15px;
}

.rtd-deploy-section__method-selector button strong,
.rtd-deploy-section__method-selector button small {
  display: block;
}

.rtd-deploy-section__method-selector button strong {
  color: inherit;
  font-size: clamp(10px, 0.72vw, 15px);
}

.rtd-deploy-section__method-selector button small {
  margin-top: 5px;

  color: rgba(255, 255, 255, 0.44);

  font-size: clamp(7px, 0.5vw, 10px);
  line-height: 1.4;
}

.rtd-deploy-section__method-selector
> button
> i:last-child {
  color: rgba(255, 255, 255, 0.34);
  font-size: 9px;
}

/* Preview */

.rtd-deploy-section__preview {
  min-width: 0;
  background: #f3f5f6;
}

.rtd-deploy-section__browser-bar {
  min-height: clamp(62px, 4.8vw, 94px);

  padding:
    14px
    clamp(18px, 2vw, 42px);

  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;

  border-bottom: 1px solid var(--rtd-deploy-line);
  background: #ffffff;
}

.rtd-deploy-section__browser-controls {
  display: flex;
  gap: 7px;
}

.rtd-deploy-section__browser-controls i {
  width: 9px;
  height: 9px;

  border-radius: 50%;
  background: #cbd3da;
}

.rtd-deploy-section__browser-controls i:first-child {
  background: #c98b8b;
}

.rtd-deploy-section__browser-controls i:nth-child(2) {
  background: #d3ae70;
}

.rtd-deploy-section__browser-controls i:nth-child(3) {
  background: #78aa91;
}

.rtd-deploy-section__browser-address {
  min-height: 34px;

  padding: 8px 13px;

  border: 1px solid #d4dde4;
  border-radius: 8px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  color: #6f7d8f;
  background: #f7f9fa;

  font-size: 8px;
}

.rtd-deploy-section__browser-bar > button {
  width: 34px;
  height: 34px;

  border: 0;
  border-radius: 8px;

  color: #657589;
  background: transparent;
}

.rtd-deploy-section__preview-screen {
  position: relative;

  min-height: clamp(520px, 45vw, 920px);

  padding:
    clamp(38px, 5vw, 110px)
    clamp(28px, 5vw, 110px);

  display: grid;
  grid-template-columns:
    minmax(0, 1.1fr)
    minmax(330px, 0.78fr);

  gap: clamp(40px, 6vw, 130px);
  align-items: center;

  overflow: hidden;

  background:
    linear-gradient(
      rgba(255, 255, 255, 0.82),
      rgba(255, 255, 255, 0.82)
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 79px,
      rgba(49, 95, 145, 0.05) 80px
    ),
    linear-gradient(
      135deg,
      #eff4f7,
      #ffffff
    );
}

.rtd-deploy-section__preview-screen::before {
  content: "";

  position: absolute;
  width: clamp(320px, 35vw, 780px);
  aspect-ratio: 1;

  top: 50%;
  right: -13%;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(49, 95, 145, 0.16),
      rgba(49, 95, 145, 0.02) 58%,
      transparent 70%
    );

  transform: translateY(-50%);
  pointer-events: none;
}

.rtd-deploy-section__website-copy {
  position: relative;
  z-index: 1;

  min-width: 0;
}

.rtd-deploy-section__website-copy > span {
  display: block;

  color: var(--rtd-deploy-blue);

  font-size: clamp(9px, 0.68vw, 15px);
  font-weight: 850;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.rtd-deploy-section__website-copy h4 {
  margin:
    clamp(20px, 2vw, 42px)
    0
    0;

  color: #172a3d;

  font-size: clamp(42px, 4vw, 94px);
  font-weight: 760;
  letter-spacing: -0.06em;
  line-height: 0.99;
}

.rtd-deploy-section__website-copy h4 em {
  color: var(--rtd-deploy-blue);

  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
}

.rtd-deploy-section__website-copy p {
  max-width: 760px;

  margin:
    clamp(24px, 2.5vw, 52px)
    0
    0;

  color: #68788b;

  font-size: clamp(13px, 0.96vw, 21px);
  line-height: 1.7;
}

.rtd-deploy-section__website-copy > button {
  min-height: 48px;

  margin-top: clamp(24px, 2.8vw, 58px);
  padding: 12px 19px;

  border: 1px solid var(--rtd-deploy-blue-dark);
  border-radius: 8px;

  color: #ffffff;
  background: var(--rtd-deploy-blue-dark);

  font-size: 10px;
  font-weight: 800;
}

/* Agent preview */

.rtd-deploy-section__agent-frame {
  position: relative;
  z-index: 2;

  min-width: 0;

  border: 1px solid #d2dce4;
  border-radius: 18px;

  overflow: hidden;

  background: #ffffff;

  box-shadow:
    0 40px 110px rgba(30, 55, 78, 0.18);
}

.rtd-deploy-section__agent-frame > header {
  padding:
    clamp(18px, 1.8vw, 36px);

  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;

  border-bottom: 1px solid var(--rtd-deploy-line);
}

.rtd-deploy-section__agent-frame
> header
> div {
  min-width: 0;

  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 11px;
  align-items: center;
}

.rtd-deploy-section__agent-avatar {
  width: 42px;
  height: 42px;

  border-radius: 12px;

  display: grid;
  place-items: center;

  color: #ffffff;
  background: var(--rtd-deploy-blue);

  font-size: 9px;
  font-weight: 900;
}

.rtd-deploy-section__agent-frame header strong,
.rtd-deploy-section__agent-frame header small {
  display: block;
}

.rtd-deploy-section__agent-frame header strong {
  color: #304963;

  font-size: clamp(10px, 0.72vw, 15px);
}

.rtd-deploy-section__agent-frame header small {
  margin-top: 5px;

  display: flex;
  align-items: center;
  gap: 7px;

  color: #7c8999;

  font-size: clamp(7px, 0.5vw, 10px);
}

.rtd-deploy-section__agent-frame header small i {
  width: 7px;
  height: 7px;

  border-radius: 50%;
  background: var(--rtd-deploy-green);
}

.rtd-deploy-section__agent-frame header button {
  width: 32px;
  height: 32px;

  border: 0;
  border-radius: 8px;

  color: #6a788a;
  background: #f2f5f7;
}

.rtd-deploy-section__agent-content {
  padding:
    clamp(32px, 3.4vw, 72px)
    clamp(22px, 2.7vw, 58px);
}

.rtd-deploy-section__agent-content > span {
  display: block;

  color: var(--rtd-deploy-blue);

  font-size: 8px;
  font-weight: 850;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.rtd-deploy-section__agent-content h5 {
  margin: 14px 0 0;

  color: #263f5a;

  font-size: clamp(22px, 2vw, 46px);
  font-weight: 740;
  letter-spacing: -0.045em;
  line-height: 1.08;
}

.rtd-deploy-section__agent-actions {
  margin-top: clamp(26px, 3vw, 62px);

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.rtd-deploy-section__agent-actions button {
  min-height: clamp(54px, 4.5vw, 84px);

  padding: 12px;

  border: 1px solid #ced9e1;
  border-radius: 10px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;

  color: #365570;
  background: #ffffff;

  font-size: clamp(8px, 0.58vw, 12px);
  font-weight: 780;
}

.rtd-deploy-section__agent-actions button:first-child {
  color: #ffffff;
  border-color: var(--rtd-deploy-blue);
  background: var(--rtd-deploy-blue);
}

.rtd-deploy-section__agent-frame > footer {
  padding:
    clamp(15px, 1.5vw, 28px)
    clamp(18px, 2vw, 42px);

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  color: #7a8797;
  background: #f7f9fa;

  border-top: 1px solid var(--rtd-deploy-line);

  font-size: clamp(7px, 0.5vw, 10px);
  text-align: center;
}

/* Preview footer */

.rtd-deploy-section__preview-footer {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));

  border-top: 1px solid var(--rtd-deploy-line);
  background: #ffffff;
}

.rtd-deploy-section__preview-footer > div {
  min-width: 0;

  padding:
    clamp(17px, 1.7vw, 34px);

  border-right: 1px solid var(--rtd-deploy-line);
}

.rtd-deploy-section__preview-footer > div:last-child {
  border-right: 0;
}

.rtd-deploy-section__preview-footer span,
.rtd-deploy-section__preview-footer strong {
  display: block;
}

.rtd-deploy-section__preview-footer span {
  color: #8390a0;

  font-size: 7px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rtd-deploy-section__preview-footer strong {
  margin-top: 7px;

  color: #344d68;

  font-size: clamp(8px, 0.58vw, 12px);
  overflow-wrap: anywhere;
}

.rtd-deploy-section__preview-footer strong.is-ready {
  display: flex;
  align-items: center;
  gap: 7px;

  color: var(--rtd-deploy-green);
}

.rtd-deploy-section__preview-footer strong.is-ready i {
  width: 7px;
  height: 7px;

  border-radius: 50%;
  background: currentColor;
}

/* =========================================================
   SUPPORTED PLATFORMS
========================================================= */

.rtd-deploy-section__platforms {
  width: 100%;

  padding:
    clamp(54px, 5.5vw, 126px)
    clamp(22px, 5vw, 116px);

  border-bottom: 1px solid var(--rtd-deploy-line);

  background:
    linear-gradient(
      135deg,
      #ffffff 0%,
      #f4f6f7 100%
    );
}

.rtd-deploy-section__platforms > header {
  width: 100%;

  display: grid;
  grid-template-columns:
    minmax(0, 1.1fr)
    minmax(300px, 0.9fr);

  gap: clamp(40px, 8vw, 190px);
  align-items: end;
}

.rtd-deploy-section__platforms header > div > span {
  display: block;

  color: var(--rtd-deploy-blue);

  font-size: clamp(8px, 0.6vw, 13px);
  font-weight: 850;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.rtd-deploy-section__platforms h3 {
  margin:
    clamp(15px, 1.8vw, 36px)
    0
    0;

  color: #20384f;

  font-size: clamp(34px, 3.5vw, 84px);
  font-weight: 750;
  letter-spacing: -0.055em;
  line-height: 1.02;
}

.rtd-deploy-section__platforms header > p {
  margin: 0;

  color: var(--rtd-deploy-muted);

  font-size: clamp(13px, 0.92vw, 20px);
  line-height: 1.72;
}

.rtd-deploy-section__platform-grid {
  margin-top: clamp(42px, 5vw, 108px);

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  border-top: 1px solid var(--rtd-deploy-line);
  border-left: 1px solid var(--rtd-deploy-line);
}

.rtd-deploy-section__platform-grid article {
  min-width: 0;

  padding:
    clamp(22px, 2.3vw, 50px);

  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;

  border-right: 1px solid var(--rtd-deploy-line);
  border-bottom: 1px solid var(--rtd-deploy-line);

  background: rgba(255, 255, 255, 0.72);
}

.rtd-deploy-section__platform-grid
article
> span {
  width: 44px;
  height: 44px;

  border-radius: 11px;

  display: grid;
  place-items: center;

  color: #ffffff;
  background: var(--rtd-deploy-blue);

  font-size: 17px;
  font-weight: 850;
}

.rtd-deploy-section__platform-grid
article
> span.is-letter {
  font-size: 10px;
  letter-spacing: -0.03em;
}

.rtd-deploy-section__platform-grid strong,
.rtd-deploy-section__platform-grid small {
  display: block;
}

.rtd-deploy-section__platform-grid strong {
  color: #304963;

  font-size: clamp(10px, 0.72vw, 15px);
}

.rtd-deploy-section__platform-grid small {
  margin-top: 6px;

  color: #7c8999;

  font-size: clamp(7px, 0.5vw, 10px);
  line-height: 1.5;
}

.rtd-deploy-section__platform-grid em {
  padding: 6px 8px;

  border-radius: 999px;

  color: var(--rtd-deploy-green);
  background: var(--rtd-deploy-green-soft);

  font-size: 7px;
  font-style: normal;
  font-weight: 800;
}

/* =========================================================
   CONNECTION FLOW
========================================================= */

.rtd-deploy-section__flow {
  width: 100%;

  padding:
    clamp(56px, 6vw, 138px)
    clamp(22px, 5vw, 116px);

  color: #ffffff;

  border-bottom: 1px solid var(--rtd-deploy-dark-line);

  background:
    radial-gradient(
      circle at 90% 12%,
      rgba(122, 176, 221, 0.18),
      transparent 34%
    ),
    linear-gradient(
      150deg,
      #102a46 0%,
      #173b61 60%,
      #214f7b 100%
    );
}

.rtd-deploy-section__flow > header {
  width: 100%;

  display: grid;
  grid-template-columns:
    minmax(220px, 0.38fr)
    minmax(0, 1.62fr);

  gap: clamp(40px, 8vw, 190px);
  align-items: start;
}

.rtd-deploy-section__flow > header > span {
  color: #9fc1df;

  font-size: clamp(8px, 0.62vw, 13px);
  font-weight: 850;
  letter-spacing: 0.13em;
  line-height: 1.5;
  text-transform: uppercase;
}

.rtd-deploy-section__flow h3 {
  margin: 0;

  color: #ffffff;

  font-size: clamp(38px, 4vw, 96px);
  font-weight: 730;
  letter-spacing: -0.06em;
  line-height: 0.99;
}

.rtd-deploy-section__flow h3 em {
  display: block;

  color: #a8cae8;

  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
}

.rtd-deploy-section__flow ol {
  margin:
    clamp(46px, 5vw, 108px)
    0
    0;

  padding: 0;

  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));

  border-top: 1px solid var(--rtd-deploy-dark-line);
  border-left: 1px solid var(--rtd-deploy-dark-line);

  list-style: none;
}

.rtd-deploy-section__flow li {
  min-width: 0;

  padding:
    clamp(26px, 3vw, 66px);

  border-right: 1px solid var(--rtd-deploy-dark-line);
  border-bottom: 1px solid var(--rtd-deploy-dark-line);
}

.rtd-deploy-section__flow li > span {
  display: block;

  color: rgba(255, 255, 255, 0.28);

  font-size: clamp(22px, 1.8vw, 42px);
  font-weight: 850;
  letter-spacing: -0.05em;
}

.rtd-deploy-section__flow li > div {
  margin-top: clamp(28px, 3vw, 62px);
}

.rtd-deploy-section__flow li i {
  width: 46px;
  height: 46px;

  border-radius: 12px;

  display: grid;
  place-items: center;

  color: var(--rtd-deploy-blue-dark);
  background: #ffffff;

  font-size: 15px;
}

.rtd-deploy-section__flow li strong {
  display: block;

  margin-top: clamp(20px, 2vw, 40px);

  color: #ffffff;

  font-size: clamp(17px, 1.3vw, 29px);
  letter-spacing: -0.03em;
}

.rtd-deploy-section__flow li p {
  margin: 13px 0 0;

  color: rgba(255, 255, 255, 0.58);

  font-size: clamp(10px, 0.7vw, 15px);
  line-height: 1.66;
}

/* =========================================================
   CLOSING
========================================================= */

.rtd-deploy-section__closing {
  width: 100%;

  padding:
    clamp(54px, 6vw, 136px)
    clamp(22px, 5vw, 116px);

  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(34px, 7vw, 150px);
  align-items: end;

  background:
    linear-gradient(
      135deg,
      #f4f5f3 0%,
      #edf1f3 100%
    );
}

.rtd-deploy-section__closing > div > span {
  display: block;

  color: var(--rtd-deploy-blue);

  font-size: clamp(8px, 0.62vw, 13px);
  font-weight: 850;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.rtd-deploy-section__closing p {
  max-width: 1500px;

  margin:
    clamp(18px, 2vw, 40px)
    0
    0;

  color: var(--rtd-deploy-ink);

  font-size: clamp(38px, 4vw, 96px);
  font-weight: 720;
  letter-spacing: -0.06em;
  line-height: 1;
}

.rtd-deploy-section__closing p strong {
  color: var(--rtd-deploy-blue);

  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
}

.rtd-deploy-section__closing > a {
  min-height: 52px;

  padding: 14px 18px;

  border: 1px solid var(--rtd-deploy-blue-dark);
  border-radius: 8px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;

  color: #ffffff;
  background: var(--rtd-deploy-blue-dark);

  font-size: 10px;
  font-weight: 800;
  text-decoration: none;

  white-space: nowrap;
}

/* =========================================================
   HOVER AND FOCUS
========================================================= */

.rtd-deploy-section button,
.rtd-deploy-section a {
  transition:
    color 160ms ease,
    background-color 160ms ease,
    border-color 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease;
}

.rtd-deploy-section__connection-card footer button:hover,
.rtd-deploy-section__agent-actions button:hover,
.rtd-deploy-section__website-copy > button:hover,
.rtd-deploy-section__closing > a:hover {
  transform: translateY(-2px);
}

.rtd-deploy-section button:focus-visible,
.rtd-deploy-section a:focus-visible {
  outline: 3px solid rgba(89, 153, 211, 0.5);
  outline-offset: 3px;
}

/* =========================================================
   RESPONSIVE — LARGE TABLET
========================================================= */

@media (max-width: 1280px) {
  .rtd-deploy-section__intro-copy {
    padding-left: 10vw;
  }

  .rtd-deploy-section__path ul {
    grid-template-columns: 1fr;
  }

  .rtd-deploy-section__path li:last-child {
    grid-column: auto;
  }

  .rtd-deploy-section__experience {
    grid-template-columns: 260px minmax(0, 1fr);
  }

  .rtd-deploy-section__preview-screen {
    grid-template-columns: 1fr;
  }

  .rtd-deploy-section__website-copy {
    max-width: 900px;
  }

  .rtd-deploy-section__agent-frame {
    width: min(100%, 620px);
    justify-self: end;
  }

  .rtd-deploy-section__platform-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 980px) {
  .rtd-deploy-section__intro-copy {
    padding-left: 0;
  }

  .rtd-deploy-section__paths {
    grid-template-columns: 1fr;
  }

  .rtd-deploy-section__path {
    border-right: 0;
    border-bottom: 1px solid var(--rtd-deploy-line);
  }

  .rtd-deploy-section__path:last-child {
    border-bottom: 0;
  }

  .rtd-deploy-section__experience {
    grid-template-columns: 1fr;
  }

  .rtd-deploy-section__method-selector {
    border-right: 0;
  }

  .rtd-deploy-section__method-selector {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rtd-deploy-section__method-selector > header {
    grid-column: 1 / -1;
  }

  .rtd-deploy-section__method-selector > button {
    border-right: 1px solid var(--rtd-deploy-dark-line);
  }

  .rtd-deploy-section__method-selector
  > button:nth-of-type(2n) {
    border-right: 0;
  }

  .rtd-deploy-section__method-selector
  > button:last-child {
    grid-column: 1 / -1;
    border-right: 0;
  }

  .rtd-deploy-section__platforms > header,
  .rtd-deploy-section__flow > header {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .rtd-deploy-section__flow ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rtd-deploy-section__closing {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .rtd-deploy-section__closing > a {
    width: max-content;
  }
}

/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 680px) {
  .rtd-deploy-section__intro {
    padding: 48px 16px 62px;
  }

  .rtd-deploy-section__intro-meta {
    align-items: flex-start;
  }

  .rtd-deploy-section__intro-heading h2 {
    font-size: clamp(40px, 12vw, 62px);
  }

  .rtd-deploy-section__intro-copy {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .rtd-deploy-section__intro-copy p {
    font-size: 15px;
  }

  .rtd-deploy-section__path {
    padding: 42px 16px;
  }

  .rtd-deploy-section__path > header {
    grid-template-columns: 1fr;
  }

  .rtd-deploy-section__path ul {
    border-left: 0;
  }

  .rtd-deploy-section__path li {
    border-left: 1px solid var(--rtd-deploy-line);
  }

  .rtd-deploy-section__connection-card > header {
    align-items: flex-start;
    flex-direction: column;
  }

  .rtd-deploy-section__connection-details {
    grid-template-columns: 1fr;
  }

  .rtd-deploy-section__connection-details > div,
  .rtd-deploy-section__connection-details
  > div:nth-child(2n),
  .rtd-deploy-section__connection-details
  > div:nth-last-child(-n + 2) {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .rtd-deploy-section__connection-details
  > div:last-child {
    border-bottom: 0;
  }

  .rtd-deploy-section__connection-card > footer {
    flex-direction: column;
  }

  .rtd-deploy-section__connection-card footer button {
    width: 100%;
  }

  .rtd-deploy-section__method-selector {
    grid-template-columns: 1fr;
  }

  .rtd-deploy-section__method-selector > header,
  .rtd-deploy-section__method-selector
  > button:last-child {
    grid-column: auto;
  }

  .rtd-deploy-section__method-selector > button,
  .rtd-deploy-section__method-selector
  > button:nth-of-type(2n) {
    border-right: 0;
  }

  .rtd-deploy-section__browser-bar {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .rtd-deploy-section__browser-bar > button {
    display: none;
  }

  .rtd-deploy-section__preview-screen {
    min-height: auto;
    padding: 52px 16px;
    gap: 42px;
  }

  .rtd-deploy-section__website-copy h4 {
    font-size: clamp(40px, 11vw, 58px);
  }

  .rtd-deploy-section__agent-frame {
    width: 100%;
  }

  .rtd-deploy-section__agent-actions {
    grid-template-columns: 1fr;
  }

  .rtd-deploy-section__preview-footer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rtd-deploy-section__preview-footer
  > div:nth-child(2n) {
    border-right: 0;
  }

  .rtd-deploy-section__preview-footer
  > div:nth-child(-n + 2) {
    border-bottom: 1px solid var(--rtd-deploy-line);
  }

  .rtd-deploy-section__platforms {
    padding: 54px 16px;
  }

  .rtd-deploy-section__platform-grid {
    grid-template-columns: 1fr;
  }

  .rtd-deploy-section__platform-grid article {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .rtd-deploy-section__platform-grid article em {
    grid-column: 2;
    width: max-content;
  }

  .rtd-deploy-section__flow {
    padding: 58px 16px;
  }

  .rtd-deploy-section__flow h3 {
    font-size: clamp(38px, 11vw, 58px);
  }

  .rtd-deploy-section__flow ol {
    grid-template-columns: 1fr;
  }

  .rtd-deploy-section__closing {
    padding: 58px 16px;
  }

  .rtd-deploy-section__closing p {
    font-size: clamp(38px, 11vw, 56px);
  }

  .rtd-deploy-section__closing > a {
    width: 100%;
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .rtd-deploy-section *,
  .rtd-deploy-section *::before,
  .rtd-deploy-section *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   RTD TRUST, SECURITY & ACCOUNT CONTROLS
   Compact full-width reassurance section
========================================================= */

.rtd-trust-section {
  --rtd-trust-ink: #101828;
  --rtd-trust-text: #44556a;
  --rtd-trust-muted: #748296;

  --rtd-trust-blue: #315f91;
  --rtd-trust-blue-dark: #173b61;
  --rtd-trust-blue-deep: #102a46;
  --rtd-trust-blue-soft: #edf4fa;

  --rtd-trust-green: #16745a;
  --rtd-trust-green-soft: #e8f5ef;

  --rtd-trust-paper: #f2f4f5;
  --rtd-trust-surface: #ffffff;

  --rtd-trust-line: rgba(53, 75, 101, 0.18);
  --rtd-trust-dark-line: rgba(255, 255, 255, 0.14);

  position: relative;

  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  overflow: hidden;

  color: var(--rtd-trust-ink);
  background: var(--rtd-trust-paper);

  border-top: 1px solid var(--rtd-trust-line);
  border-bottom: 1px solid var(--rtd-trust-line);
}

.rtd-trust-section *,
.rtd-trust-section *::before,
.rtd-trust-section *::after {
  box-sizing: border-box;
}

/* =========================================================
   INTRODUCTION
========================================================= */

.rtd-trust-section__intro {
  width: 100%;

  padding:
    clamp(54px, 5vw, 116px)
    clamp(22px, 5vw, 116px)
    clamp(64px, 5.8vw, 136px);

  border-bottom: 1px solid var(--rtd-trust-line);

  background:
    radial-gradient(
      circle at 86% 18%,
      rgba(72, 125, 174, 0.14),
      transparent 33%
    ),
    linear-gradient(
      138deg,
      #fafaf7 0%,
      #f4f6f7 54%,
      #eaf1f7 100%
    );
}

.rtd-trust-section__intro-meta {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.2vw, 48px);
}

.rtd-trust-section__number {
  flex: 0 0 auto;

  color: rgba(49, 95, 145, 0.28);

  font-size: clamp(36px, 3.2vw, 76px);
  font-weight: 850;
  letter-spacing: -0.07em;
  line-height: 0.9;
}

.rtd-trust-section__intro-meta > div {
  padding-left: clamp(18px, 2.1vw, 44px);
  border-left: 1px solid var(--rtd-trust-line);
}

.rtd-trust-section__eyebrow {
  display: block;

  color: var(--rtd-trust-blue);

  font-size: clamp(9px, 0.66vw, 14px);
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.rtd-trust-section__intro-meta p {
  margin: 7px 0 0;

  color: #7b8899;

  font-size: clamp(10px, 0.72vw, 16px);
  line-height: 1.5;
}

.rtd-trust-section__intro-heading {
  width: 100%;

  margin-top: clamp(38px, 4.2vw, 88px);

  display: grid;
  grid-template-columns:
    minmax(0, 1.45fr)
    minmax(300px, 0.55fr);

  gap: clamp(40px, 8vw, 190px);
  align-items: end;
}

.rtd-trust-section__intro-heading h2 {
  margin: 0;

  color: var(--rtd-trust-ink);

  font-size: clamp(44px, 4.8vw, 116px);
  font-weight: 760;
  letter-spacing: -0.064em;
  line-height: 0.98;

  text-wrap: balance;
}

.rtd-trust-section__intro-heading h2 em {
  display: block;

  color: var(--rtd-trust-blue);

  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  letter-spacing: -0.05em;
}

.rtd-trust-section__intro-heading > p {
  margin: 0;

  color: var(--rtd-trust-muted);

  font-size: clamp(14px, 0.98vw, 22px);
  line-height: 1.75;
}

/* =========================================================
   CONTROL GRID
========================================================= */

.rtd-trust-section__controls {
  width: 100%;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  border-left: 1px solid var(--rtd-trust-line);
  border-top: 1px solid var(--rtd-trust-line);

  background: var(--rtd-trust-surface);
}

.rtd-trust-section__controls > article {
  min-width: 0;

  padding:
    clamp(28px, 3vw, 66px);

  display: flex;
  flex-direction: column;

  border-right: 1px solid var(--rtd-trust-line);
  border-bottom: 1px solid var(--rtd-trust-line);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.98),
      rgba(246, 248, 249, 0.98)
    );
}

.rtd-trust-section__icon {
  width: clamp(44px, 3.2vw, 68px);
  height: clamp(44px, 3.2vw, 68px);

  border-radius: 15px;

  display: grid;
  place-items: center;

  color: #ffffff;
  background: var(--rtd-trust-blue);

  font-size: clamp(15px, 1.1vw, 23px);
}

.rtd-trust-section__controls article > div {
  margin-top: clamp(24px, 2.3vw, 48px);
}

.rtd-trust-section__controls article > div > span {
  display: block;

  color: var(--rtd-trust-blue);

  font-size: clamp(8px, 0.58vw, 12px);
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.rtd-trust-section__controls h3 {
  margin: 12px 0 0;

  color: #263f5a;

  font-size: clamp(21px, 1.7vw, 38px);
  font-weight: 750;
  letter-spacing: -0.04em;
  line-height: 1.08;
}

.rtd-trust-section__controls p {
  margin: 17px 0 0;

  color: var(--rtd-trust-muted);

  font-size: clamp(11px, 0.76vw, 17px);
  line-height: 1.68;
}

.rtd-trust-section__controls article > footer {
  margin-top: auto;
  padding-top: clamp(28px, 3vw, 60px);
}

.rtd-trust-section__controls footer > span {
  width: max-content;

  padding: 7px 10px;
  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  gap: 7px;

  color: var(--rtd-trust-green);
  background: var(--rtd-trust-green-soft);

  font-size: 8px;
  font-weight: 800;
}

/* =========================================================
   STATUS AREA
========================================================= */

.rtd-trust-section__status {
  width: 100%;

  display: grid;
  grid-template-columns:
    minmax(0, 1.05fr)
    minmax(420px, 0.95fr);

  border-bottom: 1px solid var(--rtd-trust-line);

  background:
    linear-gradient(
      150deg,
      #102a46 0%,
      #173b61 62%,
      #214f7b 100%
    );
}

.rtd-trust-section__status-copy {
  min-width: 0;

  padding:
    clamp(52px, 5vw, 116px)
    clamp(22px, 5vw, 116px);

  color: #ffffff;

  border-right: 1px solid var(--rtd-trust-dark-line);
}

.rtd-trust-section__status-copy > span {
  display: block;

  color: #9fc1df;

  font-size: clamp(8px, 0.62vw, 13px);
  font-weight: 850;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.rtd-trust-section__status-copy h3 {
  margin:
    clamp(18px, 2vw, 40px)
    0
    0;

  color: #ffffff;

  font-size: clamp(38px, 4vw, 92px);
  font-weight: 730;
  letter-spacing: -0.06em;
  line-height: 1;
}

.rtd-trust-section__status-copy h3 em {
  display: block;

  color: #a8cae8;

  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
}

.rtd-trust-section__status-copy p {
  max-width: 900px;

  margin:
    clamp(24px, 2.6vw, 54px)
    0
    0;

  color: rgba(255, 255, 255, 0.63);

  font-size: clamp(13px, 0.92vw, 20px);
  line-height: 1.72;
}

/* Status panel */

.rtd-trust-section__status-panel {
  min-width: 0;

  margin:
    clamp(34px, 4vw, 82px)
    clamp(22px, 4vw, 86px);

  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 17px;

  overflow: hidden;

  color: #ffffff;
  background: rgba(255, 255, 255, 0.07);

  box-shadow:
    0 36px 100px rgba(4, 16, 28, 0.23);
}

.rtd-trust-section__status-panel > header {
  padding:
    clamp(20px, 2vw, 42px);

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.13);
}

.rtd-trust-section__status-panel
> header
> div {
  min-width: 0;

  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 13px;
  align-items: center;
}

.rtd-trust-section__status-mark {
  width: 48px;
  height: 48px;

  border-radius: 13px;

  display: grid;
  place-items: center;

  color: var(--rtd-trust-blue-dark);
  background: #ffffff;

  font-size: 10px;
  font-weight: 900;
}

.rtd-trust-section__status-panel header strong,
.rtd-trust-section__status-panel header small {
  display: block;
}

.rtd-trust-section__status-panel header strong {
  color: #ffffff;

  font-size: clamp(12px, 0.86vw, 18px);
}

.rtd-trust-section__status-panel header small {
  margin-top: 5px;

  color: rgba(255, 255, 255, 0.5);

  font-size: clamp(7px, 0.5vw, 10px);
}

.rtd-trust-section__status-panel header > em {
  flex: 0 0 auto;

  padding: 7px 10px;
  border-radius: 999px;

  display: flex;
  align-items: center;
  gap: 7px;

  color: #a8dfc8;
  background: rgba(84, 175, 138, 0.13);

  font-size: 8px;
  font-style: normal;
  font-weight: 800;
}

.rtd-trust-section__status-panel header > em i {
  width: 7px;
  height: 7px;

  border-radius: 50%;
  background: #72c8a6;
}

.rtd-trust-section__status-list {
  display: grid;
}

.rtd-trust-section__status-list article {
  min-width: 0;

  padding:
    clamp(17px, 1.7vw, 34px)
    clamp(20px, 2vw, 42px);

  display: grid;
  grid-template-columns:
    minmax(150px, 0.8fr)
    minmax(130px, 0.8fr)
    auto;

  gap: 18px;
  align-items: center;

  border-bottom: 1px solid rgba(255, 255, 255, 0.11);
}

.rtd-trust-section__status-list article:last-child {
  border-bottom: 0;
}

.rtd-trust-section__status-list article > span {
  display: flex;
  align-items: center;
  gap: 9px;

  color: rgba(255, 255, 255, 0.68);

  font-size: clamp(8px, 0.58vw, 12px);
}

.rtd-trust-section__status-list article > span i {
  color: #a7c6e2;
}

.rtd-trust-section__status-list article > strong {
  color: #ffffff;

  font-size: clamp(9px, 0.66vw, 14px);
  overflow-wrap: anywhere;
}

.rtd-trust-section__status-list article > em {
  padding: 6px 8px;
  border-radius: 999px;

  color: #c3d5e6;
  background: rgba(255, 255, 255, 0.08);

  font-size: 7px;
  font-style: normal;
  font-weight: 800;
}

.rtd-trust-section__status-list article > em.is-success {
  color: #a8dfc8;
  background: rgba(84, 175, 138, 0.12);
}

.rtd-trust-section__status-panel > footer {
  padding:
    clamp(17px, 1.7vw, 34px)
    clamp(20px, 2vw, 42px);

  border-top: 1px solid rgba(255, 255, 255, 0.13);

  background: rgba(3, 18, 32, 0.12);
}

.rtd-trust-section__status-panel footer span {
  display: flex;
  align-items: flex-start;
  gap: 9px;

  color: rgba(255, 255, 255, 0.53);

  font-size: clamp(7px, 0.52vw, 11px);
  line-height: 1.55;
}

.rtd-trust-section__status-panel footer i {
  margin-top: 2px;
  color: #a7c6e2;
}

/* =========================================================
   CLOSING
========================================================= */

.rtd-trust-section__closing {
  width: 100%;

  padding:
    clamp(54px, 6vw, 136px)
    clamp(22px, 5vw, 116px);

  display: grid;
  grid-template-columns:
    minmax(220px, 0.34fr)
    minmax(0, 1.66fr);

  gap: clamp(38px, 8vw, 190px);
  align-items: start;

  background:
    linear-gradient(
      135deg,
      #f4f5f3 0%,
      #edf1f3 100%
    );
}

.rtd-trust-section__closing > span {
  color: var(--rtd-trust-blue);

  font-size: clamp(8px, 0.62vw, 13px);
  font-weight: 850;
  letter-spacing: 0.13em;
  line-height: 1.5;
  text-transform: uppercase;
}

.rtd-trust-section__closing p {
  max-width: 1500px;
  margin: 0;

  color: var(--rtd-trust-ink);

  font-size: clamp(38px, 4vw, 96px);
  font-weight: 720;
  letter-spacing: -0.06em;
  line-height: 1;
}

.rtd-trust-section__closing p strong {
  color: var(--rtd-trust-blue);

  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1180px) {
  .rtd-trust-section__intro-heading {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .rtd-trust-section__controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rtd-trust-section__status {
    grid-template-columns: 1fr;
  }

  .rtd-trust-section__status-copy {
    border-right: 0;
    border-bottom: 1px solid var(--rtd-trust-dark-line);
  }

  .rtd-trust-section__status-panel {
    width: auto;
  }
}

@media (max-width: 780px) {
  .rtd-trust-section__intro {
    padding: 48px 16px 62px;
  }

  .rtd-trust-section__intro-meta {
    align-items: flex-start;
  }

  .rtd-trust-section__intro-heading h2 {
    font-size: clamp(40px, 11.5vw, 60px);
  }

  .rtd-trust-section__controls {
    grid-template-columns: 1fr;
  }

  .rtd-trust-section__status-copy {
    padding: 56px 16px;
  }

  .rtd-trust-section__status-copy h3 {
    font-size: clamp(38px, 11vw, 58px);
  }

  .rtd-trust-section__status-panel {
    margin: 24px 16px 46px;
  }

  .rtd-trust-section__status-panel > header {
    align-items: flex-start;
    flex-direction: column;
  }

  .rtd-trust-section__status-list article {
    grid-template-columns: 1fr auto;
  }

  .rtd-trust-section__status-list article > strong {
    grid-column: 1;
  }

  .rtd-trust-section__status-list article > em {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .rtd-trust-section__closing {
    padding: 58px 16px;
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .rtd-trust-section__closing p {
    font-size: clamp(38px, 11vw, 56px);
  }
}

@media (max-width: 480px) {
  .rtd-trust-section__controls > article {
    padding: 34px 16px;
  }

  .rtd-trust-section__status-list article {
    grid-template-columns: 1fr;
  }

  .rtd-trust-section__status-list article > strong,
  .rtd-trust-section__status-list article > em {
    grid-column: auto;
    grid-row: auto;
  }

  .rtd-trust-section__status-list article > em {
    width: max-content;
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .rtd-trust-section *,
  .rtd-trust-section *::before,
  .rtd-trust-section *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   RTD FAQ SECTION
   Full-width split layout
   Left narrative + right scrollable FAQ panel
========================================================= */

.rtd-faq-section {
  --rtd-faq-ink: #101828;
  --rtd-faq-text: #43546a;
  --rtd-faq-muted: #748296;

  --rtd-faq-blue: #315f91;
  --rtd-faq-blue-dark: #173b61;
  --rtd-faq-blue-deep: #102a46;
  --rtd-faq-blue-soft: #edf4fa;

  --rtd-faq-green: #16745a;
  --rtd-faq-green-soft: #e8f5ef;

  --rtd-faq-paper: #f2f4f5;
  --rtd-faq-surface: #ffffff;

  --rtd-faq-line: rgba(53, 75, 101, 0.18);
  --rtd-faq-dark-line: rgba(255, 255, 255, 0.14);

  position: relative;

  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  display: grid;
  grid-template-columns:
    minmax(0, 0.9fr)
    minmax(520px, 1.1fr);

  overflow: hidden;

  color: var(--rtd-faq-ink);
  background: var(--rtd-faq-paper);

  border-top: 1px solid var(--rtd-faq-line);
  border-bottom: 1px solid var(--rtd-faq-line);
}

.rtd-faq-section *,
.rtd-faq-section *::before,
.rtd-faq-section *::after {
  box-sizing: border-box;
}

.rtd-faq-section button,
.rtd-faq-section input,
.rtd-faq-section select,
.rtd-faq-section textarea {
  font: inherit;
}

/* =========================================================
   LEFT NARRATIVE
========================================================= */

.rtd-faq-section__narrative {
  min-width: 0;

  color: #ffffff;

  border-right: 1px solid var(--rtd-faq-dark-line);

  background:
    radial-gradient(
      circle at 10% 12%,
      rgba(140, 188, 228, 0.15),
      transparent 34%
    ),
    linear-gradient(
      155deg,
      #102a46 0%,
      #173b61 60%,
      #214f7b 100%
    );
}

.rtd-faq-section__narrative-inner {
  position: sticky;
  top: 0;

  height: 100%;
  min-height: 0;

  padding:
    clamp(36px, 3.8vw, 78px)
    clamp(22px, 4vw, 88px);

  display: flex;
  flex-direction: column;
}

.rtd-faq-section__intro-meta {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.2vw, 48px);
}

.rtd-faq-section__number {
  flex: 0 0 auto;

  color: rgba(255, 255, 255, 0.22);

  font-size: clamp(36px, 3.2vw, 76px);
  font-weight: 850;
  letter-spacing: -0.07em;
  line-height: 0.9;
}

.rtd-faq-section__intro-meta > div {
  padding-left: clamp(18px, 2.1vw, 44px);
  border-left: 1px solid rgba(255, 255, 255, 0.16);
}

.rtd-faq-section__eyebrow {
  display: block;

  color: #a9cae6;

  font-size: clamp(9px, 0.66vw, 14px);
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.rtd-faq-section__intro-meta p {
  margin: 7px 0 0;

  color: rgba(255, 255, 255, 0.5);

  font-size: clamp(10px, 0.72vw, 16px);
  line-height: 1.5;
}

/* Heading */

.rtd-faq-section__heading {
  margin-top: clamp(42px, 5vw, 104px);
}

.rtd-faq-section__heading h2 {
  margin: 0;

  color: #ffffff;

  font-size: clamp(42px, 4.5vw, 108px);
  font-weight: 740;
  letter-spacing: -0.064em;
  line-height: 0.98;

  text-wrap: balance;
}

.rtd-faq-section__heading h2 em {
  display: block;

  color: #a8cae8;

  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  letter-spacing: -0.05em;
}

.rtd-faq-section__heading > p {
  max-width: 920px;

  margin:
    clamp(24px, 2.6vw, 54px)
    0
    0;

  color: rgba(255, 255, 255, 0.62);

  font-size: clamp(13px, 0.92vw, 20px);
  line-height: 1.72;
}

.rtd-faq-section__heading > p + p {
  margin-top: 18px;
}

/* Topics */

.rtd-faq-section__topics {
  margin-top: clamp(38px, 4vw, 84px);
  padding-top: clamp(28px, 3vw, 62px);

  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.rtd-faq-section__topics > span {
  display: block;

  color: #a6c5e1;

  font-size: 8px;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.rtd-faq-section__topics ul {
  margin: 20px 0 0;
  padding: 0;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px 22px;

  list-style: none;
}

.rtd-faq-section__topics li {
  min-width: 0;

  display: flex;
  align-items: flex-start;
  gap: 9px;

  color: rgba(255, 255, 255, 0.67);

  font-size: clamp(9px, 0.66vw, 14px);
  line-height: 1.55;
}

.rtd-faq-section__topics li i {
  flex: 0 0 auto;
  margin-top: 3px;

  color: #75c7a7;
}

/* Support note */

.rtd-faq-section__support {
  margin-top: clamp(34px, 4vw, 72px);
  padding-top: 0;

  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 15px;
  align-items: start;
}

.rtd-faq-section__support-icon {
  width: 44px;
  height: 44px;

  border-radius: 12px;

  display: grid;
  place-items: center;

  color: var(--rtd-faq-blue-dark);
  background: #ffffff;

  font-size: 15px;
}

.rtd-faq-section__support strong {
  display: block;

  color: #ffffff;

  font-size: clamp(10px, 0.76vw, 16px);
}

.rtd-faq-section__support p {
  margin: 7px 0 0;

  color: rgba(255, 255, 255, 0.5);

  font-size: clamp(8px, 0.58vw, 12px);
  line-height: 1.6;
}

/* =========================================================
   RIGHT FAQ PANEL
========================================================= */

.rtd-faq-section__questions {
  min-width: 0;

  padding:
    clamp(36px, 4vw, 84px)
    clamp(24px, 4vw, 88px);

  display: flex;
  flex-direction: column;

  background:
    linear-gradient(
      145deg,
      #f8fafb 0%,
      #eef2f5 100%
    );
}

/* Questions header */

.rtd-faq-section__questions-header {
  flex: 0 0 auto;

  padding:
    clamp(22px, 2.4vw, 50px);

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;

  border: 1px solid var(--rtd-faq-line);
  border-bottom: 0;
  border-radius: 18px 18px 0 0;

  background: #ffffff;
}

.rtd-faq-section__questions-header span,
.rtd-faq-section__questions-header strong {
  display: block;
}

.rtd-faq-section__questions-header span {
  color: var(--rtd-faq-blue);

  font-size: clamp(8px, 0.58vw, 12px);
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.rtd-faq-section__questions-header strong {
  margin-top: 8px;

  color: #2b445f;

  font-size: clamp(15px, 1.16vw, 25px);
  line-height: 1.3;
}

.rtd-faq-section__questions-header em {
  flex: 0 0 auto;

  padding: 7px 10px;
  border-radius: 999px;

  color: var(--rtd-faq-blue);
  background: var(--rtd-faq-blue-soft);

  font-size: 8px;
  font-style: normal;
  font-weight: 800;
}

/* =========================================================
   SCROLLABLE FAQ AREA
========================================================= */

.rtd-faq-section__scroll {
  position: relative;

  flex: 1 1 auto;

  height: min(82vh, 1050px);
  min-height: 560px;
  max-height: 1050px;

  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;

  border: 1px solid var(--rtd-faq-line);

  background: #ffffff;

  scroll-behavior: smooth;
}

/* Standard scrollbar */

.rtd-faq-section__scroll {
  scrollbar-width: thin;
  scrollbar-color:
    var(--rtd-faq-blue)
    #e4e9ed;
}

/* WebKit scrollbar */

.rtd-faq-section__scroll::-webkit-scrollbar {
  width: 11px;
}

.rtd-faq-section__scroll::-webkit-scrollbar-track {
  background: #e7ebef;
  border-left: 1px solid var(--rtd-faq-line);
}

.rtd-faq-section__scroll::-webkit-scrollbar-thumb {
  border: 3px solid #e7ebef;
  border-radius: 999px;

  background: var(--rtd-faq-blue);
}

.rtd-faq-section__scroll::-webkit-scrollbar-thumb:hover {
  background: var(--rtd-faq-blue-dark);
}

/* =========================================================
   FAQ ITEMS
========================================================= */

.rtd-faq-section__item {
  border-bottom: 1px solid var(--rtd-faq-line);
  background: #ffffff;
}

.rtd-faq-section__item:last-child {
  border-bottom: 0;
}

.rtd-faq-section__item[open] {
  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      #f7fafc 100%
    );
}

/* Summary */

.rtd-faq-section__item summary {
  min-height: clamp(84px, 7vw, 138px);

  padding:
    clamp(20px, 2.2vw, 46px);

  display: grid;
  grid-template-columns:
    auto
    minmax(0, 1fr)
    auto;

  gap: clamp(15px, 1.6vw, 32px);
  align-items: center;

  color: #2e4863;
  background: transparent;

  cursor: pointer;
  list-style: none;

  transition:
    background-color 160ms ease,
    color 160ms ease;
}

.rtd-faq-section__item summary::-webkit-details-marker {
  display: none;
}

.rtd-faq-section__item summary::marker {
  content: "";
}

.rtd-faq-section__item summary:hover {
  background: #f5f8fa;
}

.rtd-faq-section__item[open] summary {
  color: var(--rtd-faq-blue-dark);
  background: #edf4f9;
}

.rtd-faq-section__question-number {
  color: rgba(49, 95, 145, 0.34);

  font-size: clamp(16px, 1.25vw, 28px);
  font-weight: 850;
  letter-spacing: -0.05em;
}

.rtd-faq-section__question {
  color: inherit;

  font-size: clamp(15px, 1.18vw, 26px);
  font-weight: 740;
  letter-spacing: -0.025em;
  line-height: 1.25;
}

/* Plus / minus control */

.rtd-faq-section__toggle {
  position: relative;

  width: 38px;
  height: 38px;

  border: 1px solid #ccd7df;
  border-radius: 50%;

  display: grid;
  place-items: center;

  color: var(--rtd-faq-blue);
  background: #ffffff;

  font-size: 11px;

  transition:
    color 160ms ease,
    background-color 160ms ease,
    border-color 160ms ease,
    transform 160ms ease;
}

.rtd-faq-section__item[open]
.rtd-faq-section__toggle {
  color: #ffffff;
  border-color: var(--rtd-faq-blue);
  background: var(--rtd-faq-blue);
  transform: rotate(45deg);
}

/* =========================================================
   ANSWER
========================================================= */

.rtd-faq-section__answer {
  padding:
    0
    clamp(22px, 2.2vw, 46px)
    clamp(28px, 3vw, 64px)
    clamp(72px, 6.5vw, 142px);

  color: var(--rtd-faq-muted);

  animation: rtdFaqReveal 180ms ease;
}

.rtd-faq-section__answer p {
  max-width: 980px;

  margin: 0;

  font-size: clamp(12px, 0.84vw, 18px);
  line-height: 1.76;
}

.rtd-faq-section__answer p + p {
  margin-top: 17px;
}

@keyframes rtdFaqReveal {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================================
   QUESTIONS FOOTER
========================================================= */

.rtd-faq-section__questions-footer {
  flex: 0 0 auto;

  padding:
    clamp(16px, 1.7vw, 34px)
    clamp(22px, 2.4vw, 50px);

  border:
    1px solid
    var(--rtd-faq-line);

  border-top: 0;
  border-radius: 0 0 18px 18px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;

  color: #7c8999;
  background: #ffffff;

  font-size: clamp(7px, 0.52vw, 11px);
}

.rtd-faq-section__questions-footer span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rtd-faq-section__questions-footer i {
  color: var(--rtd-faq-blue);
}

/* =========================================================
   FOCUS
========================================================= */

.rtd-faq-section__item summary:focus-visible {
  position: relative;
  z-index: 2;

  outline: 3px solid rgba(79, 143, 201, 0.48);
  outline-offset: -3px;
}

/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 1180px) {
  .rtd-faq-section {
    grid-template-columns:
      minmax(0, 0.82fr)
      minmax(500px, 1.18fr);
  }

  .rtd-faq-section__narrative-inner {
    padding-left: clamp(22px, 3.5vw, 58px);
    padding-right: clamp(22px, 3.5vw, 58px);
  }

  .rtd-faq-section__topics ul {
    grid-template-columns: 1fr;
  }

  .rtd-faq-section__questions {
    padding-left: clamp(20px, 3vw, 52px);
    padding-right: clamp(20px, 3vw, 52px);
  }
}

/* =========================================================
   RESPONSIVE — STACKED
========================================================= */

@media (max-width: 920px) {
  .rtd-faq-section {
    grid-template-columns: 1fr;
  }

  .rtd-faq-section__narrative {
    border-right: 0;
    border-bottom: 1px solid var(--rtd-faq-dark-line);
  }

  .rtd-faq-section__narrative-inner {
    position: static;

    min-height: auto;

    padding:
      56px
      clamp(18px, 5vw, 52px);
  }

  .rtd-faq-section__support {
    margin-top: 50px;
  }

  .rtd-faq-section__questions {
    padding:
      42px
      clamp(16px, 4vw, 42px)
      56px;
  }

  .rtd-faq-section__scroll {
    height: 720px;
    min-height: 520px;
    max-height: 720px;
  }
}

/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 640px) {
  .rtd-faq-section__narrative-inner {
    padding: 48px 16px 58px;
  }

  .rtd-faq-section__intro-meta {
    align-items: flex-start;
  }

  .rtd-faq-section__heading h2 {
    font-size: clamp(40px, 11.5vw, 60px);
  }

  .rtd-faq-section__heading > p {
    font-size: 15px;
  }

  .rtd-faq-section__topics ul {
    gap: 12px;
  }

  .rtd-faq-section__questions {
    padding: 28px 12px 42px;
  }

  .rtd-faq-section__questions-header {
    padding: 20px 16px;
    align-items: flex-start;
    flex-direction: column;
  }

  .rtd-faq-section__scroll {
    height: 620px;
    min-height: 480px;
    max-height: 620px;
  }

  .rtd-faq-section__item summary {
    min-height: 82px;

    padding: 18px 14px;

    grid-template-columns:
      auto
      minmax(0, 1fr)
      auto;

    gap: 12px;
  }

  .rtd-faq-section__question-number {
    font-size: 15px;
  }

  .rtd-faq-section__question {
    font-size: 15px;
  }

  .rtd-faq-section__toggle {
    width: 32px;
    height: 32px;
  }

  .rtd-faq-section__answer {
    padding:
      0
      16px
      28px
      48px;
  }

  .rtd-faq-section__answer p {
    font-size: 13px;
  }

  .rtd-faq-section__questions-footer {
    padding: 16px;
    align-items: flex-start;
    flex-direction: column;
  }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {
  .rtd-faq-section__support {
    grid-template-columns: 1fr;
  }

  .rtd-faq-section__item summary {
    grid-template-columns:
      minmax(0, 1fr)
      auto;
  }

  .rtd-faq-section__question-number {
    grid-column: 1 / -1;
  }

  .rtd-faq-section__answer {
    padding-left: 14px;
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .rtd-faq-section *,
  .rtd-faq-section *::before,
  .rtd-faq-section *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   RTD LIVE VOICE SANDBOX
   Full-width demo section
========================================================= */

.wva-demo {
  --wva-ink: #10233a;
  --wva-text: #53677d;
  --wva-muted: #7b899a;

  --wva-blue: #315f91;
  --wva-blue-dark: #173b61;
  --wva-blue-deep: #0f2945;
  --wva-blue-soft: #edf4fa;

  --wva-green: #16745a;
  --wva-red: #a54848;

  --wva-surface: #ffffff;
  --wva-paper: #eef2f5;

  --wva-line: rgba(53, 75, 101, 0.18);
  --wva-dark-line: rgba(255, 255, 255, 0.14);

  position: relative;

  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  overflow: hidden;

  color: var(--wva-ink);
  background: var(--wva-paper);

  border-top: 1px solid var(--wva-line);
  border-bottom: 1px solid var(--wva-line);
}

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

.wva-demo button,
.wva-demo input,
.wva-demo select,
.wva-demo textarea {
  font: inherit;
}

.wva-demo button {
  cursor: pointer;
}

.wva-demo [hidden] {
  display: none !important;
}

/* =========================================================
   SHELL
========================================================= */

.wva-shell {
  width: 100%;
  max-width: none;
  margin: 0;
}

/* =========================================================
   SECTION HEADING
========================================================= */

.wva-demo-head {
  width: 100%;

  padding:
    clamp(56px, 5.5vw, 128px)
    clamp(22px, 5vw, 116px)
    clamp(68px, 6vw, 142px);

  color: #ffffff;

  border-bottom: 1px solid var(--wva-dark-line);

  background:
    radial-gradient(
      circle at 86% 14%,
      rgba(135, 189, 231, 0.2),
      transparent 33%
    ),
    radial-gradient(
      circle at 9% 92%,
      rgba(68, 126, 179, 0.17),
      transparent 32%
    ),
    linear-gradient(
      150deg,
      #0e2741 0%,
      #173b61 58%,
      #214f7b 100%
    );
}

.wva-kicker {
  margin: 0;

  font-size: clamp(9px, 0.7vw, 15px);
  font-weight: 850;
  letter-spacing: 0.13em;
  line-height: 1.5;
  text-transform: uppercase;
}

.wva-kicker-light {
  color: #a9cae6;
}

.wva-demo-head h2 {
  max-width: 1900px;

  margin:
    clamp(24px, 2.6vw, 56px)
    0
    0;

  color: #ffffff;

  font-size: clamp(46px, 5.2vw, 126px);
  font-weight: 740;
  letter-spacing: -0.065em;
  line-height: 0.96;

  text-wrap: balance;
}

.wva-demo-head > p:last-child {
  max-width: 1420px;

  margin:
    clamp(30px, 3.2vw, 68px)
    0
    0;

  color: rgba(255, 255, 255, 0.65);

  font-size: clamp(14px, 1vw, 23px);
  line-height: 1.78;
}

/* =========================================================
   MAIN DEMO CARD
========================================================= */

.wva-demo-card {
  width: 100%;

  display: grid;
  grid-template-columns:
    minmax(0, 1.1fr)
    minmax(420px, 0.9fr);

  background: #ffffff;
}

/* =========================================================
   LEFT PREVIEW
========================================================= */

.wva-demo-preview {
  position: relative;

  min-width: 0;
  min-height: clamp(700px, 58vw, 1180px);

  padding:
    clamp(48px, 6vw, 132px)
    clamp(28px, 5vw, 112px);

  display: grid;
  place-items: center;

  overflow: hidden;

  color: #ffffff;

  border-right: 1px solid var(--wva-dark-line);

  background:
    radial-gradient(
      circle at 50% 42%,
      rgba(109, 168, 217, 0.22),
      transparent 32%
    ),
    linear-gradient(
      155deg,
      #0e2741 0%,
      #173b61 60%,
      #214f7b 100%
    );
}

/* Orb */

.wva-demo-orb-wrap {
  position: absolute;
  inset: 0;

  display: grid;
  place-items: center;

  pointer-events: none;
}

.wva-demo-orb {
  width: clamp(210px, 21vw, 480px);
  aspect-ratio: 1;

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 34% 28%,
      rgba(255, 255, 255, 0.72),
      transparent 15%
    ),
    radial-gradient(
      circle at 50% 50%,
      #7cb4df 0%,
      #315f91 47%,
      #153a60 76%,
      #0f2945 100%
    );

  box-shadow:
    0 0 70px rgba(125, 184, 230, 0.28),
    0 0 180px rgba(62, 116, 167, 0.22),
    inset -22px -28px 54px rgba(5, 24, 42, 0.28);
}

.wva-demo-ring {
  position: absolute;

  border: 1px solid rgba(169, 205, 234, 0.18);
  border-radius: 50%;
}

.wva-demo-ring-one {
  width: clamp(330px, 34vw, 760px);
  aspect-ratio: 1;
}

.wva-demo-ring-two {
  width: clamp(470px, 47vw, 1050px);
  aspect-ratio: 1;
}

/* Preview window */

.wva-demo-window {
  position: relative;
  z-index: 2;

  width: min(100%, 920px);

  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 19px;

  overflow: hidden;

  background: rgba(255, 255, 255, 0.09);

  box-shadow:
    0 42px 120px rgba(4, 17, 29, 0.34);

  backdrop-filter: blur(18px);
}

.wva-demo-windowbar {
  min-height: 70px;

  padding:
    16px
    clamp(18px, 2vw, 38px);

  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;

  border-bottom: 1px solid rgba(255, 255, 255, 0.13);

  background: rgba(5, 23, 39, 0.24);
}

.wva-demo-dots {
  display: flex;
  gap: 7px;
}

.wva-demo-dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
}

.wva-demo-dots span:first-child {
  background: #d78f8f;
}

.wva-demo-dots span:nth-child(2) {
  background: #d6b26f;
}

.wva-demo-dots span:nth-child(3) {
  background: #76bd99;
}

.wva-demo-windowbar strong {
  color: #ffffff;

  font-size: clamp(10px, 0.75vw, 16px);
  text-align: center;
}

.wva-demo-windowbar em {
  padding: 6px 9px;

  border-radius: 999px;

  color: #b9d6ec;
  background: rgba(255, 255, 255, 0.08);

  font-size: 7px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* Conversation */

.wva-demo-conversation {
  padding:
    clamp(26px, 3vw, 64px);

  display: grid;
  gap: clamp(18px, 2vw, 38px);
}

.wva-demo-agent {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 13px;
  align-items: center;
}

.wva-demo-avatar {
  width: 46px;
  height: 46px;

  border-radius: 13px;

  display: grid;
  place-items: center;

  color: var(--wva-blue-dark);
  background: #ffffff;

  font-size: 9px;
  font-weight: 900;
}

.wva-demo-agent strong,
.wva-demo-agent span {
  display: block;
}

.wva-demo-agent strong {
  color: #ffffff;

  font-size: clamp(11px, 0.78vw, 17px);
}

.wva-demo-agent span {
  margin-top: 5px;

  color: rgba(255, 255, 255, 0.5);

  font-size: clamp(8px, 0.54vw, 11px);
}

.wva-demo-bubble {
  max-width: 82%;

  padding:
    clamp(16px, 1.6vw, 30px)
    clamp(18px, 1.8vw, 36px);

  border: 1px solid rgba(255, 255, 255, 0.15);

  font-size: clamp(11px, 0.8vw, 17px);
  line-height: 1.68;
}

.wva-demo-bubble-ai {
  border-radius: 6px 17px 17px 17px;

  color: #eaf4fc;
  background: rgba(255, 255, 255, 0.08);
}

.wva-demo-bubble-user {
  margin-left: auto;

  border-radius: 17px 6px 17px 17px;

  color: var(--wva-blue-dark);
  border-color: #ffffff;
  background: #ffffff;
}

/* Meter */

.wva-demo-meter {
  margin-top: clamp(10px, 1vw, 22px);

  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));

  border-top: 1px solid rgba(255, 255, 255, 0.14);
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.wva-demo-meter > div {
  min-width: 0;

  padding:
    clamp(14px, 1.5vw, 28px);

  border-right: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.wva-demo-meter span,
.wva-demo-meter strong {
  display: block;
}

.wva-demo-meter span {
  color: rgba(255, 255, 255, 0.46);

  font-size: 7px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.wva-demo-meter strong {
  margin-top: 7px;

  color: #ffffff;

  font-size: clamp(9px, 0.65vw, 14px);
  overflow-wrap: anywhere;
}

/* =========================================================
   RIGHT COPY
========================================================= */

.wva-demo-copy {
  min-width: 0;

  padding:
    clamp(48px, 5vw, 112px)
    clamp(28px, 4.5vw, 98px);

  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      #f3f6f8 100%
    );
}

.wva-demo-kicker {
  display: block;

  color: var(--wva-blue);

  font-size: clamp(8px, 0.62vw, 13px);
  font-weight: 850;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.wva-demo-copy h3 {
  margin:
    clamp(16px, 1.8vw, 36px)
    0
    0;

  color: #243d58;

  font-size: clamp(34px, 3.5vw, 82px);
  font-weight: 750;
  letter-spacing: -0.055em;
  line-height: 1.02;
}

.wva-demo-copy > p {
  margin:
    clamp(24px, 2.5vw, 52px)
    0
    0;

  color: var(--wva-text);

  font-size: clamp(13px, 0.95vw, 21px);
  line-height: 1.75;
}

/* Limit note */

.wva-demo-limit {
  margin-top: clamp(28px, 3vw, 62px);

  padding:
    clamp(18px, 1.8vw, 36px);

  border-left: 4px solid var(--wva-blue);

  background: #edf4f9;
}

.wva-demo-limit strong,
.wva-demo-limit span {
  display: block;
}

.wva-demo-limit strong {
  color: #29445f;

  font-size: clamp(10px, 0.72vw, 15px);
}

.wva-demo-limit span {
  margin-top: 7px;

  color: #65768a;

  font-size: clamp(9px, 0.64vw, 13px);
  line-height: 1.58;
}

/* =========================================================
   LIVE DEMO MOUNT
========================================================= */

.wva-demo-mount {
  margin-top: clamp(28px, 3vw, 62px);
}

.wva-live-demo-box {
  overflow: hidden;

  border: 1px solid #d1dce5;
  border-radius: 16px;

  background: #ffffff;

  box-shadow:
    0 22px 60px rgba(31, 58, 82, 0.1);
}

.wva-live-demo-top {
  padding:
    clamp(18px, 1.8vw, 36px);

  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;

  border-bottom: 1px solid var(--wva-line);
}

.wva-live-demo-icon {
  width: 46px;
  height: 46px;

  border-radius: 13px;

  display: grid;
  place-items: center;

  color: #ffffff;
  background: var(--wva-blue);

  font-size: 15px;
}

.wva-live-demo-copy strong,
.wva-live-demo-copy span {
  display: block;
}

.wva-live-demo-copy strong {
  color: #2d4762;

  font-size: clamp(11px, 0.8vw, 17px);
}

.wva-live-demo-copy span {
  margin-top: 5px;

  color: #7b8999;

  font-size: clamp(8px, 0.56vw, 12px);
}

.wva-live-demo-timer {
  min-width: 74px;

  padding: 9px 11px;

  border: 1px solid #d2dde5;
  border-radius: 10px;

  text-align: center;
  background: #f7f9fa;
}

.wva-live-demo-timer span,
.wva-live-demo-timer strong {
  display: block;
}

.wva-live-demo-timer span {
  color: #8793a2;

  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wva-live-demo-timer strong {
  margin-top: 4px;

  color: var(--wva-blue-dark);

  font-size: 15px;
  letter-spacing: 0.04em;
}

/* Wave */

.wva-live-demo-wave {
  min-height: 120px;

  padding: 26px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;

  background:
    linear-gradient(
      135deg,
      #edf4f9 0%,
      #f8fafb 100%
    );
}

.wva-live-demo-wave span {
  width: 8px;
  height: 38px;

  border-radius: 999px;

  background: var(--wva-blue);

  animation:
    wvaDemoWave 1.15s ease-in-out infinite;
}

.wva-live-demo-wave span:nth-child(2) {
  height: 68px;
  animation-delay: 0.08s;
}

.wva-live-demo-wave span:nth-child(3) {
  height: 92px;
  animation-delay: 0.16s;
}

.wva-live-demo-wave span:nth-child(4) {
  height: 58px;
  animation-delay: 0.24s;
}

.wva-live-demo-wave span:nth-child(5) {
  height: 82px;
  animation-delay: 0.32s;
}

.wva-live-demo-wave span:nth-child(6) {
  height: 44px;
  animation-delay: 0.4s;
}

@keyframes wvaDemoWave {
  0%,
  100% {
    transform: scaleY(0.55);
    opacity: 0.55;
  }

  50% {
    transform: scaleY(1);
    opacity: 1;
  }
}

.wva-live-demo-note {
  padding:
    clamp(16px, 1.6vw, 30px)
    clamp(18px, 1.8vw, 36px);

  color: #6e7e91;
  background: #ffffff;

  border-top: 1px solid var(--wva-line);

  font-size: clamp(8px, 0.58vw, 12px);
  line-height: 1.65;
}

.wva-live-demo-box audio {
  display: none;
}

/* =========================================================
   ACTIONS
========================================================= */

.wva-demo-actions {
  margin-top: clamp(24px, 2.6vw, 54px);

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 11px;
}

.wva-btn {
  min-height: 48px;

  padding: 12px 17px;

  border: 1px solid transparent;
  border-radius: 9px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  font-size: 10px;
  font-weight: 800;

  transition:
    transform 160ms ease,
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease;
}

.wva-btn-primary {
  color: #ffffff;
  border-color: var(--wva-blue-dark);
  background: var(--wva-blue-dark);
}

.wva-btn-primary:hover {
  background: var(--wva-blue);
  transform: translateY(-2px);
}

.wva-btn-end {
  color: #ffffff;
  border-color: var(--wva-red);
  background: var(--wva-red);
}

.wva-btn-end:hover {
  background: #8f3838;
  transform: translateY(-2px);
}

.wva-demo-action-link {
  min-height: 48px;

  padding: 12px 14px;

  border: 1px solid #cbd6df;
  border-radius: 9px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: #365570;
  background: #ffffff;

  font-size: 9px;
  font-weight: 780;
  text-decoration: none;

  transition:
    color 160ms ease,
    background-color 160ms ease,
    transform 160ms ease;
}

.wva-demo-action-link:hover {
  color: #ffffff;
  background: var(--wva-blue);
  transform: translateY(-2px);
}

/* Privacy */

.wva-demo-privacy {
  margin-top: clamp(24px, 2.8vw, 58px) !important;
  padding-top: clamp(20px, 2.2vw, 44px);

  border-top: 1px solid var(--wva-line);

  color: #8390a0 !important;

  font-size: clamp(8px, 0.58vw, 12px) !important;
  line-height: 1.7 !important;
}

/* =========================================================
   ACTIVE SESSION STATES
   Works when JS updates status or button visibility
========================================================= */

.wva-demo.is-live .wva-live-demo-box,
.wva-demo[data-demo-state="live"] .wva-live-demo-box {
  border-color: rgba(22, 116, 90, 0.45);

  box-shadow:
    0 22px 70px rgba(22, 116, 90, 0.13);
}

.wva-demo.is-live .wva-live-demo-icon,
.wva-demo[data-demo-state="live"] .wva-live-demo-icon {
  background: var(--wva-green);
}

.wva-demo.is-live .wva-live-demo-wave span,
.wva-demo[data-demo-state="live"] .wva-live-demo-wave span {
  background: var(--wva-green);
}

/* =========================================================
   FOCUS
========================================================= */

.wva-demo button:focus-visible,
.wva-demo a:focus-visible {
  outline: 3px solid rgba(77, 143, 204, 0.48);
  outline-offset: 3px;
}

/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 1120px) {
  .wva-demo-card {
    grid-template-columns: 1fr;
  }

  .wva-demo-preview {
    min-height: 760px;

    border-right: 0;
    border-bottom: 1px solid var(--wva-line);
  }

  .wva-demo-window {
    width: min(100%, 860px);
  }

  .wva-demo-copy {
    padding-left: clamp(24px, 6vw, 78px);
    padding-right: clamp(24px, 6vw, 78px);
  }
}

/* =========================================================
   RESPONSIVE — SMALL TABLET
========================================================= */

@media (max-width: 760px) {
  .wva-demo-head {
    padding: 50px 16px 64px;
  }

  .wva-demo-head h2 {
    font-size: clamp(40px, 11vw, 62px);
  }

  .wva-demo-head > p:last-child {
    font-size: 15px;
  }

  .wva-demo-preview {
    min-height: 680px;
    padding: 44px 16px;
  }

  .wva-demo-windowbar {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .wva-demo-windowbar em {
    grid-column: 2;
    width: max-content;
  }

  .wva-demo-meter {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wva-demo-copy {
    padding: 50px 16px 60px;
  }

  .wva-demo-copy h3 {
    font-size: clamp(38px, 10vw, 58px);
  }

  .wva-live-demo-top {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .wva-live-demo-timer {
    grid-column: 1 / -1;
    width: 100%;
  }

  .wva-demo-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .wva-btn,
  .wva-demo-action-link {
    width: 100%;
  }
}

/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 480px) {
  .wva-demo-preview {
    min-height: 620px;
  }

  .wva-demo-window {
    border-radius: 14px;
  }

  .wva-demo-conversation {
    padding: 20px 14px;
  }

  .wva-demo-bubble {
    max-width: 94%;
    padding: 14px;
  }

  .wva-demo-meter {
    grid-template-columns: 1fr;
  }

  .wva-demo-meter > div {
    border-right: 0;
  }

  .wva-demo-agent {
    align-items: flex-start;
  }

  .wva-live-demo-wave {
    gap: 6px;
  }

  .wva-live-demo-wave span {
    width: 6px;
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .wva-demo *,
  .wva-demo *::before,
  .wva-demo *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}