:root {
    --hero-edge-balance: max(32px, calc(27% - min(343px, 26.92vw)));
    --button-gradient: linear-gradient(135deg, #51A3F3 0%, #3878CF 100%);
  }
  html { scroll-behavior: smooth; }
  body { background-color: #0A0B0D; }
  .dot { width: 6px; height: 6px; border-radius: 999px; }
  .brand-gradient { background: var(--button-gradient); }
  .brand-gradient:hover { filter: brightness(1.08); }
  /* Button treatment adapted from Uiverse.io by TCdesign-dev. */
  .button-name {
    align-items: center;
    appearance: none;
    background: var(--button-gradient);
    border-radius: 4px;
    border-width: 0;
    box-shadow:
      rgba(24,68,122,0.28) 0 2px 4px,
      rgba(24,68,122,0.22) 0 7px 13px -3px,
      #2C64AC 0 -3px 0 inset;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    height: 48px;
    justify-content: center;
    line-height: 1;
    list-style: none;
    overflow: hidden;
    padding-right: 16px;
    padding-left: 16px;
    position: relative;
    text-align: left;
    text-decoration: none;
    transition:
      box-shadow 0.15s,
      transform 0.15s;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    white-space: nowrap;
    will-change: box-shadow, transform;
    font-size: 18px;
  }
  .button-name:focus {
    background: var(--button-gradient);
    box-shadow:
      #8FC8FA 0 0 0 1.5px inset,
      rgba(24,68,122,0.42) 0 2px 4px,
      rgba(24,68,122,0.32) 0 7px 13px -3px,
      #2C64AC 0 -3px 0 inset;
  }
  .button-name:hover {
    background: var(--button-gradient);
    box-shadow:
      rgba(24,68,122,0.38) 0 4px 8px,
      rgba(24,68,122,0.28) 0 7px 13px -3px,
      #2C64AC 0 -3px 0 inset;
    transform: translateY(-2px);
  }
  .button-name:active {
    background: var(--button-gradient);
    box-shadow: #2C64AC 0 3px 7px inset;
    transform: translateY(2px);
  }
  .brand-text-gradient { background: var(--button-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .transcript-line { opacity: 0; transform: translateY(6px); animation: rise 0.5s ease forwards; }
  @keyframes rise { to { opacity: 1; transform: translateY(0); } }
  .chip { opacity: 0; transform: scale(0.92); animation: pop 0.4s ease forwards; }
  @keyframes pop { to { opacity: 1; transform: scale(1); } }
  .pulse-dot { box-shadow: 0 0 0 0 rgba(63,203,184,0.5); animation: pulse 2s infinite; }
  @keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(63,203,184,0.45); }
    70% { box-shadow: 0 0 0 8px rgba(63,203,184,0); }
    100% { box-shadow: 0 0 0 0 rgba(63,203,184,0); }
  }
  .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
  .faq-item.open .faq-answer { max-height: 240px; }
  .faq-item.open .faq-icon { transform: rotate(45deg); }
  .faq-icon { transition: transform 0.25s ease; }
  .hero-grid {
    overflow-x: clip;
    overflow-y: visible;
    background-color: #FFFFFF;
    background-image: none;
  }
  .nav-layout {
    width: 100%;
    max-width: none !important;
    padding-right: var(--hero-edge-balance) !important;
    padding-left: var(--hero-edge-balance) !important;
  }
  .nav-menu-trigger.button-name {
    gap: 12px;
    min-width: 0;
    height: 44px;
    padding: 0 17px;
    border: 1px solid rgba(61,130,217,0.28);
    border-radius: 999px;
    background: rgba(255,255,255,0.9);
    box-shadow: 0 8px 24px rgba(24,68,122,0.1), inset 0 0 0 1px rgba(255,255,255,0.9);
    color: #172A42;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: -0.01em;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, transform 0.2s ease;
  }
  .nav-menu-trigger.button-name:hover,
  .nav-menu-trigger.button-name:focus {
    border-color: rgba(61,130,217,0.55);
    background: #FFFFFF;
    box-shadow: 0 12px 30px rgba(24,68,122,0.14), inset 0 0 0 1px rgba(255,255,255,0.9);
    color: #176AC1;
    transform: translateY(-1px);
  }
  .nav-menu-trigger.button-name:active {
    background: #F4F9FF;
    box-shadow: 0 4px 12px rgba(24,68,122,0.12);
    transform: translateY(0);
  }
  .nav-menu-trigger-icon {
    display: grid;
    gap: 5px;
    width: 18px;
  }
  .nav-menu-trigger-icon i {
    display: block;
    width: 100%;
    height: 1px;
    background: #3D82D9;
    transition: transform 0.25s ease;
  }
  .nav-menu-trigger-icon i:last-child {
    width: 12px;
    justify-self: end;
  }
  .site-menu {
    position: fixed;
    z-index: 100;
    inset: 0;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: visibility 0s linear 0.3s, opacity 0.3s ease;
  }
  .site-menu.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0s;
  }
  .site-menu-backdrop {
    position: absolute;
    inset: 0;
    padding: 0;
    border: 0;
    background: rgba(10,21,34,0.22);
    cursor: default;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }
  .site-menu-panel {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    width: min(680px, 100%);
    height: 100%;
    flex-direction: column;
    overflow-y: auto;
    padding: 34px clamp(28px, 4vw, 54px) 38px;
    transform: translateX(32px);
    background: #FFFFFF;
    box-shadow: -24px 0 70px rgba(20,45,72,0.16);
    opacity: 0;
    transition: transform 0.32s cubic-bezier(.22,.8,.24,1), opacity 0.25s ease;
  }
  .site-menu.is-open .site-menu-panel {
    transform: translateX(0);
    opacity: 1;
  }
  .site-menu-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 30px;
    padding-bottom: 28px;
  }
  .site-menu-kicker {
    color: #3D82D9;
    font: 300 10px/1 var(--ui-font);
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .site-menu-header h2 {
    max-width: 440px;
    margin-top: 14px;
    color: #172A42;
    font: 300 clamp(32px, 3.4vw, 48px)/1.02 var(--ui-font);
    letter-spacing: -0.05em;
  }
  .site-menu-close {
    display: inline-flex;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(18,34,56,0.14);
    border-radius: 50%;
    background: #FFFFFF;
    color: #172A42;
    cursor: pointer;
    font-size: 23px;
    line-height: 1;
    transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
  }
  .site-menu-close:hover {
    border-color: rgba(61,130,217,0.5);
    color: #3D82D9;
    transform: rotate(4deg);
  }
  .site-menu-close:focus-visible {
    outline: 2px solid #4A99EE;
    outline-offset: 3px;
  }
  .site-menu-links {
    border-bottom: 1px solid rgba(18,34,56,0.14);
  }
  .site-menu-link {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    padding: 18px 0;
    border-top: 1px solid rgba(18,34,56,0.14);
    color: #172A42;
    text-decoration: none;
  }
  .site-menu-link-index {
    color: #4A99EE;
    font: 300 13px/1 var(--ui-font);
  }
  .site-menu-link-copy {
    display: grid;
    gap: 5px;
  }
  .site-menu-link-copy strong {
    color: #172A42;
    font: 300 18px/1.2 var(--ui-font);
    letter-spacing: -0.025em;
    transition: color 0.2s ease;
  }
  .site-menu-link-copy span {
    color: #687A8E;
    font-size: 13px;
    line-height: 1.45;
  }
  .site-menu-link-arrow {
    color: #91A1B1;
    font-size: 20px;
    transition: color 0.2s ease, transform 0.2s ease;
  }
  .site-menu-link:hover .site-menu-link-copy strong,
  .site-menu-link:hover .site-menu-link-arrow {
    color: #3D82D9;
  }
  .site-menu-link:hover .site-menu-link-arrow {
    transform: translateX(4px);
  }
  .site-menu-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: auto;
    padding-top: 30px;
  }
  .site-menu-footer p {
    max-width: 280px;
    color: #687A8E;
    font-size: 13px;
    line-height: 1.5;
  }
  .site-menu-footer .button-name {
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 300;
  }
  body.menu-open {
    overflow: hidden;
  }
  .hero-layout {
    width: 100%;
    max-width: none !important;
    min-height: max(820px, 100svh);
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    justify-items: start;
    gap: 0;
    padding-top: max(152px, calc(25svh - 53px));
    padding-bottom: 158px;
    padding-right: var(--hero-edge-balance) !important;
    padding-left: var(--hero-edge-balance) !important;
  }
  .hero-copy {
    position: relative;
    z-index: 30;
    width: min(760px, 52vw);
    max-width: 760px;
    margin: 0;
    text-align: left;
  }
  .hero-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    color: #3D82D9;
    font: 300 10px/1 var(--ui-font);
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .hero-eyebrow::before {
    content: "";
    width: 30px;
    height: 1px;
    flex: 0 0 30px;
    background: #4A99EE;
  }
  .hero-title {
    max-width: 760px;
    margin: 0;
    font-family: var(--ui-font) !important;
    font-size: clamp(58px, 4.35vw, 82px);
    font-weight: 300 !important;
    line-height: 1.04;
    letter-spacing: -0.06em;
    text-wrap: balance;
  }
  .hero-title > span {
    display: block;
  }
  .hero-title-accent {
    width: max-content;
    max-width: 100%;
    color: #438FDF;
  }
  .hero-subtitle {
    max-width: 650px;
    margin: 26px 0 0;
    padding-left: 20px;
    border-left: 1px solid rgba(61,130,217,0.48);
    color: #5C7086;
    font-family: var(--ui-font);
    font-size: clamp(17px, 1.08vw, 20px);
    font-weight: 300;
    line-height: 1.55;
  }
  .hero-subtitle strong {
    display: block;
    margin-bottom: 4px;
    color: #172A42;
    font-weight: 300;
  }
  .hero-actions {
    margin-top: 26px !important;
    justify-content: flex-start;
  }
  .iceberg-story {
    --hero-extension: max(0px, calc(100svh - 820px));
    --water-top: calc(690px + var(--hero-extension));
    position: relative;
    isolation: isolate;
    overflow: clip;
  }
  .site-iceberg {
    position: absolute;
    z-index: 10;
    top: calc(70px + var(--hero-extension));
    left: 73vw;
    width: min(790px, 62vw);
    height: 3020px;
    transform: translate3d(-50%, 0, 0);
    backface-visibility: hidden;
    animation: iceberg-bob 9s cubic-bezier(0.37, 0, 0.63, 1) infinite;
    will-change: transform;
    pointer-events: none;
  }
  .water-surface-gradient {
    position: absolute;
    z-index: 7;
    right: 0;
    bottom: 0;
    left: 0;
    height: 150px;
    background: linear-gradient(
      to bottom,
      rgba(10,11,13,0),
      rgba(10,11,13,0.16)
    );
    pointer-events: none;
  }
  .story-water {
    position: absolute;
    top: var(--water-top);
    left: 0;
    width: 200%;
    height: calc(100% - var(--water-top));
    pointer-events: none;
    will-change: transform;
  }
  .story-water-back {
    z-index: 8;
    animation: wave-drift 18s linear infinite reverse;
  }
  .story-water-base {
    z-index: 9;
    animation: wave-drift 14s linear infinite;
  }
  .story-water-tint {
    z-index: 20;
    animation: wave-drift 14s linear infinite;
  }
  @keyframes iceberg-bob {
    0%, 100% { transform: translate3d(-50%, 0, 0); }
    50% { transform: translate3d(-50%, 4px, 0); }
  }
  @keyframes wave-drift {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }
  .iceberg-journey {
    --spine-gap: clamp(150px, 15vw, 230px);
    position: relative;
    overflow: hidden;
    background:
      radial-gradient(circle at 50% 20%, rgba(61,130,217,0.09), transparent 26%),
      radial-gradient(circle at 50% 68%, rgba(63,203,184,0.045), transparent 22%),
      #0A0B0D;
  }
  .iceberg-journey::before {
    content: none;
  }
  .journey-section {
    position: relative;
    z-index: 30;
    display: flex;
    min-height: 1000px;
    align-items: center;
    padding: 104px clamp(24px, 4vw, 64px);
    border-color: transparent !important;
    background: transparent !important;
  }
  .journey-section::before {
    content: none;
  }
  .journey-section > .journey-panel {
    position: relative;
    box-sizing: border-box;
    width: clamp(390px, 32vw, 500px);
    max-width: none;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }
  .journey-left > .journey-panel {
    margin-right: calc(50% + var(--section-gap, var(--spine-gap)));
    margin-left: auto;
  }
  .journey-right > .journey-panel {
    margin-right: auto;
    margin-left: calc(50% + var(--section-gap, var(--spine-gap)));
  }
  .journey-section > .journey-panel::before {
    content: "";
    position: absolute;
    top: 50%;
    width: var(--section-gap, var(--spine-gap));
    height: 1px;
    opacity: 0.82;
  }
  .journey-left > .journey-panel::before {
    right: calc(-1 * var(--section-gap, var(--spine-gap)));
    background: linear-gradient(90deg, rgba(61,130,217,0.62), rgba(61,130,217,0.06));
  }
  .journey-right > .journey-panel::before {
    left: calc(-1 * var(--section-gap, var(--spine-gap)));
    background: linear-gradient(90deg, rgba(61,130,217,0.06), rgba(63,203,184,0.58));
  }
  .journey-section > .journey-panel::after {
    content: none;
  }
  .journey-section::after {
    content: attr(data-depth) "  /  " attr(data-meter);
    position: absolute;
    z-index: 31;
    top: 50%;
    left: 50%;
    display: inline-flex;
    min-width: 78px;
    height: 28px;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(111,176,237,0.3);
    border-radius: 999px;
    background: rgba(5,12,19,0.82);
    box-shadow: 0 0 0 7px rgba(61,130,217,0.035);
    color: rgba(154,204,247,0.86);
    font: 300 9px/1 var(--ui-font);
    letter-spacing: 0.08em;
    backdrop-filter: blur(10px);
  }

  .journey-heading {
    position: relative;
    max-width: 500px;
    padding-left: 22px;
  }
  .journey-heading::before {
    content: "";
    position: absolute;
    top: 2px;
    bottom: 3px;
    left: 0;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(to bottom, #51A3F3, rgba(63,203,184,0.12));
  }
  .journey-heading > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #73B7F7 !important;
  }
  .journey-heading > span::before {
    content: "";
    width: 18px;
    height: 1px;
    background: currentColor;
    opacity: 0.7;
  }
  .journey-heading h2 {
    max-width: 470px;
    margin-top: 12px;
    font-size: clamp(32px, 3vw, 46px);
    line-height: 1.04;
    letter-spacing: -0.045em;
  }
  .journey-heading p {
    max-width: 450px;
    margin-top: 18px;
    font-size: 16px !important;
    line-height: 1.7 !important;
  }
  .journey-section .text-center,
  .journey-section > .journey-panel.text-center {
    text-align: left;
  }

  .journey-package .journey-heading h2 {
    font-size: clamp(30px, 2.65vw, 42px);
  }
  .journey-package {
    min-height: 0;
    justify-content: center;
    padding: 48px 24px;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .journey-package > .journey-panel,
  .journey-left.journey-package > .journey-panel,
  .journey-right.journey-package > .journey-panel {
    width: min(600px, calc(100vw - 48px));
    margin: 0 auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    text-align: left;
  }
  .journey-package > .journey-panel::before,
  .journey-package > .journey-panel::after,
  .journey-package::after {
    display: none;
  }
  .journey-package .journey-heading {
    max-width: 520px;
    padding-left: 22px;
    text-align: left;
  }
  .journey-package .journey-heading::before {
    display: block;
  }
  .journey-package .journey-heading > span {
    justify-content: flex-start;
  }
  .journey-package .journey-heading > span::after {
    content: none;
  }
  .journey-package .journey-heading h2 {
    margin-right: 0;
    margin-left: 0;
  }
  .package-features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 20px;
    margin-top: 28px;
    border: 0;
  }
  .package-feature {
    display: flex;
    min-width: 0;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 0;
    border: 0;
    text-align: left;
  }
  .package-feature:last-child:nth-child(odd) {
    grid-column: auto;
    width: auto;
    justify-self: stretch;
  }
  .package-check {
    display: grid;
    width: 18px;
    height: 18px;
    margin-top: 0;
    place-items: center;
    border: 1px solid rgba(81,163,243,0.42);
    border-radius: 6px;
    background: rgba(61,130,217,0.1);
    color: #73B7F7;
    font-size: 10px;
    font-weight: 300;
    flex: 0 0 18px;
  }
  .package-feature strong {
    display: block;
    color: rgba(255,255,255,0.9);
    font: 300 13px/1.35 var(--ui-font);
  }
  .package-visual {
    position: relative;
    min-height: 178px;
    margin-top: 26px;
    overflow: hidden;
    border: 1px solid rgba(117,183,244,0.18);
    border-radius: 18px;
    background:
      linear-gradient(145deg, rgba(21,31,42,0.92), rgba(5,9,13,0.96)),
      #0A0B0D;
    box-shadow: 0 22px 50px rgba(0,0,0,0.22);
  }
  .package-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 1px rgba(255,255,255,0.04);
    pointer-events: none;
  }
  .package-window-bar {
    display: flex;
    height: 34px;
    align-items: center;
    gap: 6px;
    padding: 0 13px;
    border-bottom: 1px solid rgba(255,255,255,0.075);
  }
  .package-window-bar i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
  }
  .package-window-bar span {
    margin-left: 5px;
    color: rgba(255,255,255,0.32);
    font: 300 8px/1 var(--ui-font);
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .starter-empty {
    display: grid;
    min-height: 143px;
    place-items: center;
    padding: 18px;
    text-align: center;
  }
  .starter-empty-icon {
    display: grid;
    width: 36px;
    height: 36px;
    margin: 0 auto 10px;
    place-items: center;
    border: 1px solid rgba(81,163,243,0.28);
    border-radius: 12px;
    background: rgba(61,130,217,0.1);
    color: #73B7F7;
    font-size: 21px;
    font-weight: 300;
  }
  .starter-empty strong {
    display: block;
    color: rgba(255,255,255,0.86);
    font-size: 12px;
  }
  .starter-empty p {
    margin-top: 4px;
    color: rgba(255,255,255,0.34);
    font-size: 9px;
  }
  .starter-action {
    display: inline-block;
    margin-top: 12px;
    border: 1px solid rgba(81,163,243,0.42);
    border-radius: 999px;
    background: rgba(61,130,217,0.14);
    padding: 6px 12px;
    color: #8FC8FA;
    font-size: 9px;
  }
  .business-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    min-height: 178px;
    padding: 12px;
  }
  .business-pane {
    min-width: 0;
    border: 1px solid rgba(255,255,255,0.075);
    border-radius: 13px;
    background: rgba(3,7,11,0.38);
    padding: 12px;
  }
  .business-pane-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: rgba(255,255,255,0.5);
    font: 300 8px/1 var(--ui-font);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .business-pane-label i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #3FCBB8;
    box-shadow: 0 0 12px rgba(63,203,184,0.45);
  }
  .calendar-row {
    display: grid;
    grid-template-columns: 25px minmax(0, 1fr);
    gap: 7px;
    margin-top: 11px;
    align-items: center;
  }
  .calendar-row time {
    color: rgba(255,255,255,0.25);
    font: 300 7px/1 var(--ui-font);
  }
  .calendar-event {
    height: 17px;
    border-left: 2px solid #51A3F3;
    border-radius: 4px;
    background: rgba(81,163,243,0.13);
  }
  .calendar-row:nth-child(3) .calendar-event {
    width: 78%;
    border-color: #3FCBB8;
    background: rgba(63,203,184,0.1);
  }
  .calendar-row:nth-child(4) .calendar-event {
    width: 88%;
  }
  .revenue-total {
    margin-top: 14px;
    color: rgba(255,255,255,0.9);
    font: 300 21px/1 var(--ui-font);
    letter-spacing: -0.04em;
  }
  .revenue-total span {
    margin-left: 4px;
    color: #3FCBB8;
    font: 300 7px/1 var(--ui-font);
    letter-spacing: 0;
  }
  .revenue-chart {
    display: flex;
    height: 63px;
    align-items: flex-end;
    gap: 5px;
    margin-top: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .revenue-chart i {
    width: 100%;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(to top, rgba(61,130,217,0.28), rgba(81,163,243,0.78));
  }
  .voice-console {
    position: relative;
    display: grid;
    min-height: 178px;
    align-content: center;
    padding: 24px 164px 24px 22px;
  }
  .voice-status {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,0.48);
    font: 300 8px/1 var(--ui-font);
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .voice-status i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #3FCBB8;
    box-shadow: 0 0 14px rgba(63,203,184,0.5);
  }
  .voice-waveform {
    display: flex;
    height: 58px;
    align-items: center;
    gap: 4px;
    margin-top: 10px;
  }
  .voice-waveform i {
    width: 4px;
    height: var(--bar-height);
    border-radius: 99px;
    background: linear-gradient(to top, #3D82D9, #73B7F7);
    transform-origin: center;
    animation: voice-pulse 1.35s ease-in-out infinite;
    animation-delay: var(--bar-delay);
  }
  .booking-card {
    position: absolute;
    top: 31px;
    right: 17px;
    width: 138px;
    border: 1px solid rgba(81,163,243,0.25);
    border-radius: 14px;
    background: rgba(10,16,22,0.94);
    padding: 13px;
    box-shadow: 0 18px 42px rgba(0,0,0,0.3);
  }
  .booking-check {
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border-radius: 50%;
    background: rgba(63,203,184,0.14);
    color: #57D8C5;
    font-size: 11px;
  }
  .booking-card strong {
    display: block;
    margin-top: 9px;
    color: rgba(255,255,255,0.9);
    font-size: 10px;
  }
  .booking-card p {
    margin-top: 4px;
    color: rgba(255,255,255,0.38);
    font: 300 8px/1.45 var(--ui-font);
  }
  @keyframes voice-pulse {
    0%, 100% { transform: scaleY(0.55); opacity: 0.55; }
    50% { transform: scaleY(1); opacity: 1; }
  }

  .journey-demo .journey-panel {
    text-align: left !important;
  }
  .journey-form {
    width: 100%;
    max-width: none !important;
    margin-top: 36px !important;
    padding: 24px !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-left-color: rgba(81,163,243,0.7) !important;
    border-radius: 18px !important;
    background: rgba(11,16,22,0.62) !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.16);
    backdrop-filter: blur(14px);
  }
  .journey-form input {
    border-color: rgba(255,255,255,0.1) !important;
    background: rgba(3,6,10,0.52) !important;
  }

  .journey-faq .journey-heading h2 {
    text-align: left;
  }
  .journey-faq .faq-list {
    margin-top: 36px !important;
    border: 0 !important;
  }
  .journey-faq .faq-item {
    padding: 18px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    background: transparent;
  }
  .journey-faq .faq-toggle {
    gap: 18px;
  }
  .journey-faq .faq-toggle > span:first-child {
    font-size: 14px;
    line-height: 1.45;
  }
  .journey-faq .faq-icon {
    display: grid;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    place-items: center;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 50%;
    font-size: 18px;
  }
  .iceberg-journey footer {
    position: relative;
    z-index: 30;
    background: transparent !important;
  }
  @keyframes connector-flow {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
  }
  @keyframes connector-breathe {
    0%, 100% {
      box-shadow:
        0 0 0 5px rgba(81,163,243,0.045),
        0 0 14px rgba(81,163,243,0.18);
    }
    50% {
      box-shadow:
        0 0 0 9px rgba(81,163,243,0.075),
        0 0 24px rgba(81,163,243,0.34);
    }
  }
  @media (min-width: 1024px) {
    .hero-copy {
      position: absolute;
      top: calc((var(--water-top) + 64px) / 2);
      left: var(--hero-edge-balance);
      transform: translateY(-50%);
    }
    .journey-section {
      min-height: 900px;
      justify-content: flex-start;
      padding-right: 0;
      padding-left: 0;
    }
    .journey-section > .journey-panel,
    .journey-left > .journey-panel,
    .journey-right > .journey-panel {
      --connector-length: calc(
        73vw - 100% - max(40px, calc((100vw - 1248px) / 2 + 72px))
      );
      width: clamp(440px, 36vw, 560px);
      margin-right: auto;
      margin-left: max(40px, calc((100vw - 1248px) / 2 + 72px));
    }
    .journey-section::after {
      display: none;
    }
    .journey-section > .journey-panel::before {
      content: "";
      position: absolute;
      top: calc(50% + 18px);
      right: auto;
      left: 100%;
      display: block;
      width: var(--connector-length);
      height: 1px;
      opacity: 0.9;
      background: linear-gradient(
        90deg,
        rgba(81,163,243,0.18),
        rgba(115,183,247,0.78) 48%,
        rgba(81,163,243,0.2)
      );
      background-size: 200% 100%;
      animation: connector-flow 5s linear infinite;
    }
    .journey-section > .journey-panel::after {
      content: "";
      position: absolute;
      top: calc(50% + 18px);
      left: calc(100% + var(--connector-length));
      display: block;
      width: 10px;
      height: 10px;
      transform: translate(-50%, -50%) rotate(45deg);
      border: 1px solid rgba(143,200,250,0.72);
      border-radius: 2px;
      background: rgba(31,66,99,0.92);
      animation: connector-breathe 3.2s ease-in-out infinite;
    }
    .journey-package {
      min-height: 700px;
      justify-content: flex-start;
      padding: 82px 0;
    }
    .journey-package > .journey-panel,
    .journey-left.journey-package > .journey-panel,
    .journey-right.journey-package > .journey-panel {
      width: clamp(440px, 36vw, 560px);
      margin-right: auto;
      margin-left: max(40px, calc((100vw - 1248px) / 2 + 72px));
    }
  }
  @media (max-width: 1023px) {
    .iceberg-story {
      --water-top: 1030px;
    }
    .hero-layout {
      min-height: calc(var(--water-top) + 90px);
      grid-template-columns: 1fr;
      gap: 0;
      padding-top: 128px;
    }
    .hero-copy {
      width: 100%;
      max-width: 680px;
      margin: 0 auto;
      text-align: center;
    }
    .hero-eyebrow {
      justify-content: center;
    }
    .hero-title {
      max-width: 680px;
      margin: 0 auto;
      font-size: clamp(46px, 7.5vw, 58px);
    }
    .hero-subtitle {
      max-width: 620px;
      margin-right: auto;
      margin-left: auto;
      padding-left: 0;
      border-left: 0;
      font-size: 18px;
      text-align: center;
    }
    .hero-actions {
      justify-content: center;
    }
    .site-iceberg {
      top: 150px;
      left: 50%;
      width: min(720px, 115vw);
      height: 3320px;
    }
    .iceberg-product-strata {
      display: none;
    }
    .iceberg-journey {
      --spine-gap: 0px;
    }
    .journey-section {
      min-height: 930px;
      padding: 68px 24px;
    }
    .journey-section > .journey-panel,
    .journey-left > .journey-panel,
    .journey-right > .journey-panel {
      width: min(100%, 680px);
      margin: 0 auto;
      padding: clamp(26px, 6vw, 42px);
      border: 1px solid rgba(255,255,255,0.09);
      border-radius: 28px;
      background: rgba(9,13,18,0.9);
      box-shadow: 0 24px 60px rgba(0,0,0,0.2);
      backdrop-filter: blur(18px);
    }
    .journey-section > .journey-panel::before,
    .journey-section > .journey-panel::after,
    .journey-section::before,
    .journey-section::after {
      display: none;
    }
    .journey-package > .journey-panel {
      border: 0;
      background: transparent;
      box-shadow: none;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
  }
  @media (max-width: 639px) {
    .nav-menu-trigger.button-name {
      min-width: 0;
      height: 42px;
      padding: 0 15px;
    }
    .site-menu-panel {
      padding: 24px 20px 28px;
    }
    .site-menu-header {
      padding-bottom: 22px;
    }
    .site-menu-header h2 {
      font-size: 34px;
    }
    .site-menu-link {
      grid-template-columns: 34px minmax(0, 1fr) auto;
      gap: 12px;
      padding: 15px 0;
    }
    .site-menu-link-copy strong {
      font-size: 16px;
    }
    .site-menu-link-copy span {
      font-size: 12px;
    }
    .site-menu-footer {
      align-items: stretch;
      flex-direction: column;
      margin-top: 26px;
      padding-top: 0;
    }
    .site-menu-footer p {
      max-width: none;
    }
    .site-menu-footer .button-name {
      width: 100%;
    }
    .iceberg-story {
      --water-top: 1095px;
    }
    .hero-layout {
      gap: 0;
      padding-top: 104px;
    }
    .hero-title {
      font-size: 40px;
      line-height: 1;
    }
    .hero-eyebrow {
      margin-bottom: 18px;
      font-size: 9px;
    }
    .hero-subtitle {
      margin-top: 20px;
      font-size: 17px;
      line-height: 1.6;
    }
    .site-iceberg {
      top: 595px;
      width: 154vw;
      height: 2700px;
    }
    .journey-section {
      padding: 48px 16px;
    }
    .journey-section > .journey-panel {
      border-radius: 24px;
      padding: 24px 20px;
    }
    .journey-heading {
      padding-left: 16px;
    }
    .journey-heading h2 {
      font-size: 30px;
    }
    .journey-package {
      min-height: 0;
      padding-top: 32px;
      padding-bottom: 32px;
    }
    .journey-package > .journey-panel {
      padding: 24px 20px;
    }
    .package-features {
      grid-template-columns: 1fr;
    }
    .package-feature:last-child:nth-child(odd) {
      grid-column: auto;
      width: 100%;
    }
    .business-split {
      gap: 7px;
      padding: 9px;
    }
    .business-pane {
      padding: 9px;
    }
    .voice-console {
      padding-right: 144px;
      padding-left: 16px;
    }
    .booking-card {
      right: 10px;
      width: 126px;
    }
    .journey-form {
      padding: 18px !important;
    }
  }
  .journey-demo,
  .journey-faq {
    justify-content: center;
  }
  .journey-demo > .journey-panel,
  .journey-faq > .journey-panel,
  .journey-left.journey-demo > .journey-panel,
  .journey-left.journey-faq > .journey-panel {
    width: min(100%, 720px);
    margin-right: auto;
    margin-left: auto;
  }
  .journey-demo > .journey-panel::before,
  .journey-demo > .journey-panel::after,
  .journey-faq > .journey-panel::before,
  .journey-faq > .journey-panel::after {
    display: none;
  }
  .journey-demo .journey-panel,
  .journey-faq .journey-panel {
    text-align: center !important;
  }
  .journey-demo .journey-heading,
  .journey-faq .journey-heading {
    max-width: 620px;
    margin-right: auto;
    margin-left: auto;
    padding-left: 0;
    text-align: center;
  }
  .journey-demo .journey-heading::before,
  .journey-faq .journey-heading::before {
    display: none;
  }
  .journey-demo .journey-heading > span,
  .journey-faq .journey-heading > span {
    justify-content: center;
  }
  .journey-demo .journey-heading h2,
  .journey-faq .journey-heading h2,
  .journey-demo .journey-heading p {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
  }
  .journey-demo .journey-form {
    width: min(100%, 560px);
    margin-top: 36px !important;
    margin-right: auto;
    margin-left: auto;
  }
  .journey-faq .faq-list {
    width: min(100%, 720px);
    margin-right: auto;
    margin-left: auto;
    text-align: left;
  }
  @media (min-width: 1024px) {
    .journey-demo {
      padding-top: 184px;
      padding-bottom: 24px;
    }
  }

  /* Ice-card product system, inspired by clean SaaS onboarding panels. */
  .journey-package > .package-card,
  .journey-left.journey-package > .package-card,
  .journey-right.journey-package > .package-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: min(590px, calc(100vw - 48px));
    overflow: visible;
    padding: 0;
    border: 1px solid rgba(201, 215, 232, 0.94);
    border-radius: 28px;
    background:
      linear-gradient(145deg, rgba(255,255,255,0.99), rgba(244,248,253,0.98));
    box-shadow:
      0 28px 70px rgba(0, 20, 46, 0.24),
      0 6px 18px rgba(13, 73, 142, 0.1),
      inset 0 1px rgba(255,255,255,0.96);
    color: #10223A;
    text-align: left;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .package-copy,
  .package-preview {
    min-width: 0;
    padding: 30px 26px;
  }
  .package-copy {
    border-right: 0;
  }
  .journey-package .journey-heading {
    max-width: none;
    padding-left: 0;
  }
  .journey-package .journey-heading::before,
  .journey-package .journey-heading > span::before {
    display: none;
  }
  .journey-package .journey-heading > span {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    justify-content: flex-start;
    border: 1px solid #AFCBFA;
    border-radius: 999px;
    background: rgba(238, 245, 255, 0.88);
    padding: 7px 11px;
    color: #1269DD !important;
    font-family: var(--ui-font);
    font-size: 10px;
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: 0.015em;
    text-transform: none;
  }
  .journey-package .journey-heading h2 {
    max-width: none;
    margin-top: 18px;
    color: #10223A;
    font-family: var(--ui-font);
    font-size: clamp(26px, 2.1vw, 34px);
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -0.045em;
  }
  .package-features {
    display: block;
    margin-top: 28px;
  }
  .package-feature,
  .package-feature:last-child:nth-child(odd) {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid #D8E2EE;
  }
  .package-feature:first-child {
    border-top: 1px solid #D8E2EE;
  }
  .package-check {
    display: grid;
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: #E7F0FF;
    color: #176DE5;
    font-family: var(--ui-font);
    font-size: 17px;
    font-weight: 300;
  }
  .package-feature strong {
    color: #10223A;
    font-family: var(--ui-font);
    font-size: 13px;
    font-weight: 300;
    line-height: 1.35;
  }
  .package-learn {
    gap: 10px;
    height: 46px;
    margin-top: 26px;
    padding-right: 18px;
    padding-left: 18px;
    font-family: var(--ui-font);
    font-size: 14px;
    font-weight: 300;
  }
  .package-learn svg {
    transition: transform 0.15s ease;
  }
  .package-learn:hover svg {
    transform: translateX(3px);
  }
  .package-preview {
    display: flex;
    flex-direction: column;
  }
  .package-preview h3 {
    color: #10223A;
    font-family: var(--ui-font);
    font-size: 18px;
    font-weight: 300;
    letter-spacing: -0.025em;
  }
  .package-visual {
    flex: 1;
    min-height: 250px;
    margin-top: 16px;
    overflow: hidden;
    border: 1.5px dashed #B7D1FA;
    border-radius: 18px;
    background:
      radial-gradient(circle at 50% 52%, rgba(61,130,217,0.09), transparent 38%),
      rgba(252,253,255,0.86);
    box-shadow: none;
  }
  .package-visual::after {
    display: none;
  }
  .package-window-bar {
    height: 34px;
    border-bottom: 1px solid #D8E2EE;
    background: rgba(244,248,253,0.78);
  }
  .package-window-bar i {
    border: 1px solid #438DF0;
    background: #F9FBFF;
  }
  .package-window-bar span {
    color: #71829A;
    font-size: 7px;
    font-weight: 300;
  }
  .starter-empty {
    min-height: 214px;
  }
  .starter-empty-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 14px;
    border: 1px solid #8FB8F5;
    border-radius: 50%;
    background: #F6FAFF;
    color: #176DE5;
    font-size: 28px;
  }
  .starter-empty strong {
    color: #10223A;
    font-family: var(--ui-font);
    font-size: 13px;
  }
  .starter-empty p {
    margin-top: 6px;
    color: #708096;
    font-size: 9px;
  }
  .starter-action {
    margin-top: 16px;
    border: 0;
    border-radius: 8px;
    background: linear-gradient(135deg, #4CA2F4, #2C77D4);
    box-shadow: 0 8px 18px rgba(44,119,212,0.2);
    padding: 8px 15px;
    color: #FFFFFF;
    font-size: 9px;
    font-weight: 300;
  }
  .business-split {
    grid-template-columns: 1fr;
    gap: 9px;
    min-height: 250px;
    padding: 10px;
  }
  .business-pane {
    border: 1px solid #D5E1EF;
    border-radius: 12px;
    background: rgba(255,255,255,0.72);
    padding: 11px;
  }
  .business-pane-label {
    color: #60738D;
    font-weight: 300;
  }
  .business-pane-label i {
    background: #36B9A5;
    box-shadow: 0 0 0 4px rgba(54,185,165,0.1);
  }
  .calendar-row time {
    color: #8A99AB;
  }
  .calendar-event {
    background: rgba(81,163,243,0.17);
  }
  .calendar-row:nth-child(3) .calendar-event {
    background: rgba(54,185,165,0.14);
  }
  .revenue-total {
    color: #10223A;
    font-family: var(--ui-font);
    font-size: 18px;
  }
  .revenue-total span {
    color: #249D8B;
  }
  .revenue-chart {
    height: 42px;
    margin-top: 8px;
    border-color: #D8E2EE;
  }
  .voice-console {
    min-height: 250px;
    padding: 28px 20px 112px;
  }
  .voice-status {
    color: #60738D;
    font-weight: 300;
  }
  .voice-status i {
    background: #36B9A5;
    box-shadow: 0 0 0 4px rgba(54,185,165,0.1);
  }
  .voice-waveform {
    justify-content: center;
    gap: 5px;
    margin-top: 18px;
  }
  .voice-waveform i {
    width: 5px;
  }
  .booking-card {
    top: auto;
    right: 16px;
    bottom: 16px;
    left: 16px;
    width: auto;
    border: 1px solid #C9DDF6;
    border-radius: 13px;
    background: rgba(255,255,255,0.95);
    padding: 12px;
    box-shadow: 0 12px 28px rgba(37,92,155,0.12);
  }
  .booking-check {
    background: #E6F7F4;
    color: #249D8B;
  }
  .booking-card strong {
    color: #10223A;
    font-family: var(--ui-font);
  }
  .booking-card p {
    color: #708096;
  }
  @media (min-width: 1024px) {
    .journey-package > .package-card,
    .journey-left.journey-package > .package-card,
    .journey-right.journey-package > .package-card {
      --package-left: max(40px, calc((100vw - 1248px) / 2 + 72px));
      width: min(
        590px,
        calc(73vw - min(395px, 31vw) - var(--package-left) - 24px)
      );
      margin-left: var(--package-left);
    }
  }
  @media (min-width: 1024px) and (max-width: 1719px) {
    .journey-package {
      padding-top: 12px;
      padding-bottom: 12px;
    }
    .journey-package > .package-card,
    .journey-left.journey-package > .package-card,
    .journey-right.journey-package > .package-card {
      grid-template-columns: 1fr;
    }
    .package-copy {
      border-right: 0;
      border-bottom: 1px solid #D8E2EE;
    }
    .package-copy,
    .package-preview {
      padding: 24px;
    }
    .package-visual {
      min-height: 210px;
    }
    .starter-empty {
      min-height: 174px;
    }
    .business-split,
    .voice-console {
      min-height: 210px;
    }
  }
  @media (max-width: 639px) {
    .journey-package > .package-card,
    .journey-left.journey-package > .package-card,
    .journey-right.journey-package > .package-card {
      grid-template-columns: 1fr;
      padding: 0;
      border-radius: 22px;
    }
    .package-copy {
      border-right: 0;
      border-bottom: 1px solid #D8E2EE;
    }
    .package-copy,
    .package-preview {
      padding: 22px 18px;
    }
    .journey-package .journey-heading h2 {
      font-size: 27px;
    }
    .package-visual {
      min-height: 220px;
    }
    .starter-empty {
      min-height: 184px;
    }
    .business-split,
    .voice-console {
      min-height: 220px;
    }
  }

  /* Product architecture: two products first, then two dashboard plans. */
  .product-overview-panel,
  .journey-left.product-overview-section > .product-overview-panel {
    display: grid;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .overview-card {
    display: flex;
    min-height: 248px;
    flex-direction: column;
    align-items: flex-start;
    border: 1px solid rgba(201, 215, 232, 0.94);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(255,255,255,0.99), rgba(244,248,253,0.98));
    box-shadow:
      0 24px 58px rgba(0, 20, 46, 0.2),
      inset 0 1px rgba(255,255,255,0.96);
    padding: 26px;
    color: #10223A;
  }
  .overview-label,
  .dashboard-pricing-label,
  .ai-home-eyebrow {
    display: inline-flex;
    width: fit-content;
    border: 1px solid #AFCBFA;
    border-radius: 999px;
    background: rgba(238,245,255,0.9);
    padding: 7px 11px;
    color: #1269DD;
    font-family: var(--ui-font);
    font-size: 10px;
    font-weight: 300;
    letter-spacing: 0.02em;
  }
  .overview-card h2 {
    margin-top: 16px;
    color: #10223A;
    font-family: var(--ui-font);
    font-size: clamp(25px, 2vw, 32px);
    font-weight: 300;
    line-height: 1.08;
    letter-spacing: -0.045em;
  }
  .overview-card p {
    max-width: 480px;
    margin-top: 12px;
    color: #66778D;
    font-size: 14px;
    line-height: 1.65;
  }
  .overview-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-top: auto;
    padding-top: 22px;
  }
  .overview-actions .button-name {
    min-height: 44px;
    padding-right: 17px;
    padding-left: 17px;
    font-size: 13px;
    font-weight: 300;
  }
  .overview-link {
    border-bottom: 1px solid rgba(16,34,58,0.28);
    color: #40536B;
    font-size: 13px;
    font-weight: 300;
    transition: border-color 0.15s, color 0.15s;
  }
  .overview-link:hover {
    border-color: #176DE5;
    color: #176DE5;
  }
  .dashboard-pricing-intro {
    margin-bottom: 24px;
  }
  .dashboard-pricing-intro h2 {
    max-width: 500px;
    margin-top: 13px;
    color: #10223A;
    font-family: var(--ui-font);
    font-size: clamp(23px, 1.8vw, 30px);
    font-weight: 300;
    line-height: 1.12;
    letter-spacing: -0.04em;
  }
  .dashboard-pricing-label {
    border: 0;
    background: transparent;
    padding: 0;
    font-family: var(--ui-font);
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .ai-home-section {
    position: relative;
    z-index: 30;
    padding: 112px 24px;
    border-top: 1px solid rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background:
      radial-gradient(circle at 82% 36%, rgba(81,163,243,0.12), transparent 30%),
      #07090B;
  }
  .ai-home-card {
    display: grid;
    width: min(1120px, 100%);
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
    gap: clamp(54px, 8vw, 110px);
    align-items: center;
    margin: 0 auto;
  }
  .ai-home-eyebrow {
    border-color: rgba(115,183,247,0.34);
    background: rgba(81,163,243,0.08);
    color: #73B7F7;
    font-family: var(--ui-font);
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .ai-home-copy h2 {
    max-width: 650px;
    margin-top: 20px;
    color: #FFFFFF;
    font-family: var(--ui-font);
    font-size: clamp(42px, 5vw, 68px);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.055em;
  }
  .ai-home-copy > p {
    max-width: 650px;
    margin-top: 22px;
    color: rgba(255,255,255,0.58);
    font-size: clamp(16px, 1.5vw, 19px);
    line-height: 1.7;
  }
  .ai-home-copy .independence-note {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    color: rgba(255,255,255,0.82);
    font-size: 14px;
    font-weight: 300;
  }
  .independence-note::before {
    content: "";
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: #3FCBB8;
    box-shadow: 0 0 0 5px rgba(63,203,184,0.08);
  }
  .ai-home-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    margin-top: 30px;
  }
  .ai-home-link {
    border-bottom: 1px solid rgba(255,255,255,0.3);
    color: rgba(255,255,255,0.78);
    font-size: 14px;
    font-weight: 300;
  }
  .ai-home-link:hover {
    border-color: #73B7F7;
    color: #FFFFFF;
  }
  .ai-home-features {
    overflow: hidden;
    border: 1px solid rgba(115,183,247,0.18);
    border-radius: 26px;
    background: rgba(12,18,25,0.72);
    box-shadow: 0 28px 70px rgba(0,0,0,0.24);
  }
  .ai-home-features li {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 21px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.88);
    font-size: 15px;
    font-weight: 300;
  }
  .ai-home-features li:last-child {
    border-bottom: 0;
  }
  .ai-feature-check {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 50%;
    background: rgba(81,163,243,0.13);
    color: #73B7F7;
    font-size: 17px;
  }
  @media (min-width: 1024px) {
    .product-overview-section {
      min-height: 700px;
      padding-top: 44px;
      padding-bottom: 44px;
    }
  }
  @media (max-width: 1023px) {
    .product-overview-panel,
    .journey-left.product-overview-section > .product-overview-panel {
      width: min(100%, 680px);
      padding: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
    }
    .ai-home-card {
      grid-template-columns: 1fr;
      gap: 48px;
    }
  }
  @media (max-width: 639px) {
    .overview-card {
      min-height: 0;
      border-radius: 22px;
      padding: 22px 20px;
    }
    .overview-actions {
      align-items: flex-start;
      flex-direction: column;
    }
    .ai-home-section {
      padding: 82px 18px;
    }
    .ai-home-card {
      gap: 36px;
    }
    .ai-home-copy h2 {
      font-size: 42px;
    }
    .ai-home-actions {
      align-items: flex-start;
      flex-direction: column;
    }
    .ai-home-features li {
      padding: 18px;
    }
  }

  /* The products begin only after the iceberg has reached its endpoint. */
  .product-showcase-section {
    position: relative;
    z-index: 30;
    padding: 900px clamp(24px, 4vw, 64px) 128px;
  }
  .iceberg-differences {
    position: absolute;
    top: 404px;
    left: var(--hero-edge-balance);
    transform: translateY(-50%);
    width: min(
      560px,
      calc(
        73vw - min(395px, 31vw) - var(--hero-edge-balance) - 56px
      )
    );
  }
  .iceberg-differences-kicker {
    color: #73B7F7;
    font: 300 10px/1 var(--ui-font);
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .iceberg-differences h2 {
    max-width: 480px;
    margin-top: 15px;
    color: rgba(255,255,255,0.95);
    font-family: var(--ui-font);
    font-size: clamp(30px, 2.7vw, 42px);
    font-weight: 300;
    line-height: 1.04;
    letter-spacing: -0.045em;
    text-wrap: balance;
  }
  .iceberg-differences-list {
    margin-top: 30px;
  }
  .iceberg-difference {
    position: relative;
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding: 17px 0;
    border-top: 1px solid rgba(255,255,255,0.1);
  }
  .iceberg-difference:last-child {
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  .iceberg-difference:nth-child(2) {
    margin-left: 14px;
  }
  .iceberg-difference:nth-child(3) {
    margin-left: 28px;
  }
  .iceberg-difference:nth-child(4) {
    margin-left: 42px;
  }
  .iceberg-difference:nth-child(5) {
    margin-left: 56px;
  }
  .iceberg-difference::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -32px;
    width: 32px;
    height: 1px;
    background: linear-gradient(90deg, rgba(81,163,243,0.5), transparent);
  }
  .iceberg-difference-number {
    color: #51A3F3;
    font: 300 30px/0.9 var(--ui-font);
    letter-spacing: -0.06em;
  }
  .iceberg-difference h3 {
    color: rgba(255,255,255,0.88);
    font-size: 14px;
    font-weight: 300;
    line-height: 1.35;
  }
  .iceberg-difference p {
    margin-top: 5px;
    color: rgba(255,255,255,0.44);
    font-size: 12px;
    line-height: 1.5;
  }
  .product-showcase-wrap {
    width: min(1240px, 100%);
    margin: 0 auto;
    scroll-margin-top: 72px;
  }
  .product-showcase-intro {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    align-items: center;
    margin-bottom: 9.2px;
    padding-bottom: 9.2px;
    border-bottom: 0;
  }
  .product-showcase-kicker,
  .product-box-label {
    color: #73B7F7;
    font: 300 10px/1 var(--ui-font);
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .product-showcase-intro h2 {
    max-width: none;
    margin-top: 16px;
    color: rgba(255,255,255,0.97);
    font-family: var(--ui-font);
    font-size: clamp(38px, 4.2vw, 64px);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.055em;
    text-wrap: balance;
  }
  .product-showcase-intro p {
    max-width: 520px;
    justify-self: end;
    color: rgba(255,255,255,0.5);
    font-size: 17px;
    line-height: 1.7;
  }
  .product-showcase-grid {
    display: grid;
    gap: 28px;
  }
  .product-box {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(115,183,247,0.22);
    border-radius: 30px;
    background:
      linear-gradient(145deg, rgba(20,29,39,0.97), rgba(8,13,19,0.98));
    box-shadow:
      0 30px 80px rgba(0,0,0,0.28),
      inset 0 1px rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.94);
  }
  .product-box::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 2px;
    background: linear-gradient(90deg, #51A3F3, rgba(81,163,243,0.08));
  }
  .voice-product-box {
    display: grid;
    grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
    gap: 58px;
    padding: clamp(34px, 4vw, 58px);
  }
  .product-box h3 {
    max-width: 520px;
    margin-top: 20px;
    color: rgba(255,255,255,0.98);
    font-family: var(--ui-font);
    font-size: clamp(36px, 3.4vw, 52px);
    font-weight: 300;
    line-height: 1.02;
    letter-spacing: -0.05em;
    text-wrap: balance;
  }
  .product-box-summary {
    max-width: 440px;
    margin-top: 20px;
    color: rgba(255,255,255,0.5);
    font-size: 15px;
    line-height: 1.7;
  }
  .product-box-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    margin-top: 32px;
  }
  .product-box-actions .button-name {
    min-height: 46px;
    padding-right: 18px;
    padding-left: 18px;
    font-size: 14px;
    font-weight: 300;
  }
  .product-box-link {
    border-bottom: 1px solid rgba(255,255,255,0.25);
    color: rgba(255,255,255,0.67);
    font-size: 13px;
    font-weight: 300;
  }
  .product-box-link:hover {
    border-color: #73B7F7;
    color: #9FD1FF;
  }
  .product-proof-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid rgba(255,255,255,0.1);
  }
  .product-proof-list li {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 15px;
    min-height: 205px;
    padding: 26px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  .product-proof-list li:nth-child(odd) {
    border-right: 1px solid rgba(255,255,255,0.1);
  }
  .product-proof-number {
    color: #73B7F7;
    font: 300 11px/1.3 var(--ui-font);
  }
  .product-proof-list h4 {
    color: rgba(255,255,255,0.9);
    font-size: 15px;
    font-weight: 300;
    line-height: 1.4;
  }
  .product-proof-list p {
    margin-top: 10px;
    color: rgba(255,255,255,0.48);
    font-size: 13px;
    line-height: 1.65;
  }
  .dashboard-product-box,
  .ai-product-box {
    display: grid;
    grid-template-columns: minmax(300px, 0.78fr) minmax(480px, 1.22fr);
    gap: clamp(36px, 4vw, 62px);
    align-items: stretch;
    padding: clamp(30px, 3.4vw, 46px);
  }
  .ai-product-box {
    grid-template-columns: minmax(330px, 0.67fr) minmax(620px, 1.33fr);
    gap: 32px;
    padding: 32px;
  }
  .dashboard-product-box h3,
  .ai-product-box h3 {
    font-size: clamp(36px, 3.1vw, 49px);
  }
  .dashboard-benefit-list,
  .ai-benefit-list {
    display: grid;
    gap: 0;
    margin-top: 28px;
    border-top: 1px solid rgba(18,34,56,0.1);
  }
  .dashboard-benefit-list li,
  .ai-benefit-list li {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 13px 0;
    border-bottom: 1px solid rgba(18,34,56,0.1);
    color: #42576E;
    font-size: 13px;
    font-weight: 300;
  }
  .dashboard-benefit-list span,
  .ai-benefit-list span {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border: 1px solid rgba(61,130,217,0.25);
    border-radius: 50%;
    background: rgba(81,163,243,0.08);
    color: #2F7ED8;
    font-size: 11px;
  }
  .dashboard-product-preview,
  .ai-product-preview {
    width: 100%;
    align-self: center;
    overflow: hidden;
    border: 1px solid rgba(70,103,139,0.17);
    border-radius: 20px;
    background: rgba(248,251,254,0.92);
    box-shadow:
      0 24px 50px rgba(35,72,108,0.1),
      inset 0 1px rgba(255,255,255,0.95);
  }
  .ai-product-preview {
    height: clamp(450px, 37vw, 500px);
  }
  .dashboard-dashboard-svg {
    display: block;
    width: 100%;
    height: auto;
    background: #EEECE7;
  }
  .ai-assistant-svg {
    display: block;
    width: 100%;
    height: 100%;
    background: #EEF5FB;
  }
  .legacy-dashboard-svg {
    display: none;
  }
  .dashboard-preview-toolbar {
    display: flex;
    min-height: 50px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 0 18px;
    border-bottom: 1px solid rgba(18,34,56,0.09);
    background: rgba(255,255,255,0.8);
  }
  .dashboard-preview-toolbar strong {
    color: #172A42;
    font-size: 13px;
    font-weight: 300;
  }
  .dashboard-preview-toolbar span {
    color: #7C8DA0;
    font: 300 9px/1 var(--ui-font);
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .dashboard-preview-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-bottom: 1px solid rgba(18,34,56,0.09);
  }
  .dashboard-preview-metric {
    min-width: 0;
    padding: 16px 18px;
  }
  .dashboard-preview-metric + .dashboard-preview-metric {
    border-left: 1px solid rgba(18,34,56,0.09);
  }
  .dashboard-preview-metric strong {
    display: block;
    color: #172A42;
    font-family: var(--ui-font);
    font-size: 24px;
    line-height: 1;
    letter-spacing: -0.04em;
  }
  .dashboard-preview-metric span {
    display: block;
    margin-top: 7px;
    color: #7B8C9E;
    font-size: 10px;
    font-weight: 300;
  }
  .dashboard-preview-board {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 14px;
  }
  .dashboard-preview-column {
    min-width: 0;
    padding: 10px;
    border-radius: 13px;
    background: rgba(228,237,246,0.55);
  }
  .dashboard-preview-column-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #63778D;
    font-size: 9px;
    font-weight: 300;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .dashboard-preview-column-head span {
    display: grid;
    width: 18px;
    height: 18px;
    place-items: center;
    border-radius: 50%;
    background: rgba(81,163,243,0.12);
    color: #2F7ED8;
    font-size: 9px;
  }
  .dashboard-preview-card {
    margin-top: 9px;
    padding: 11px;
    border: 1px solid rgba(70,103,139,0.12);
    border-radius: 10px;
    background: rgba(255,255,255,0.94);
    box-shadow: 0 8px 18px rgba(36,68,101,0.06);
  }
  .dashboard-preview-card strong {
    display: block;
    overflow: hidden;
    color: #20344D;
    font-size: 11px;
    font-weight: 300;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .dashboard-preview-card span {
    display: block;
    margin-top: 6px;
    color: #8392A3;
    font-size: 9px;
    line-height: 1.35;
  }
  .dashboard-preview-card em {
    display: inline-block;
    margin-top: 10px;
    padding: 5px 7px;
    border-radius: 999px;
    background: rgba(81,163,243,0.1);
    color: #2F7ED8;
    font-size: 8px;
    font-style: normal;
    font-weight: 300;
  }
  .dashboard-preview-activity {
    padding: 4px 18px 10px;
    border-top: 1px solid rgba(18,34,56,0.09);
    background: rgba(255,255,255,0.48);
  }
  .dashboard-preview-activity-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0 7px;
  }
  .dashboard-preview-activity-head strong {
    color: #172A42;
    font-size: 11px;
    font-weight: 300;
  }
  .dashboard-preview-activity-head span {
    color: #7C8DA0;
    font: 300 8px/1 var(--ui-font);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .dashboard-preview-action {
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 9px 0;
    border-top: 1px solid rgba(18,34,56,0.07);
  }
  .dashboard-preview-action i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #51A3F3;
    box-shadow: 0 0 0 4px rgba(81,163,243,0.1);
  }
  .dashboard-preview-action strong {
    overflow: hidden;
    color: #3D5168;
    font-size: 10px;
    font-weight: 300;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .dashboard-preview-action span {
    color: #8796A6;
    font-size: 9px;
    white-space: nowrap;
  }
  .dashboard-options-cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(28px, 4vw, 58px);
    align-items: center;
    margin-top: 64px;
    padding: 34px 0 36px;
    border-top: 1px solid rgba(18,34,56,0.14);
    border-bottom: 1px solid rgba(18,34,56,0.14);
    background: transparent;
  }
  .dashboard-options-copy h3 {
    margin-top: 0;
    color: #172A42;
    font: 300 clamp(28px, 3vw, 42px)/1.08 var(--ui-font);
    letter-spacing: -0.035em;
  }
  .dashboard-options-copy p {
    max-width: 680px;
    margin-top: 10px;
    color: #607187;
    font-size: 14px;
    line-height: 1.6;
  }
  .dashboard-options-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
  }
  .business-model-launch {
    margin-top: 24px;
    margin-left: 56px;
  }
  .business-model-trigger.button-name {
    gap: 12px;
    font-size: 13px;
    font-weight: 300;
  }
  .business-model-trigger.button-name::after {
    content: "+";
    color: #FFFFFF;
    font-size: 18px;
    line-height: 1;
  }
  .business-model-modal {
    max-width: none;
    max-height: none;
    padding: 0;
    border: 0;
    background: transparent;
    color: #172A42;
  }
  body.modal-open {
    overflow: hidden;
  }
  .business-model-modal[open] {
    position: fixed;
    inset: 0;
    display: grid;
    width: 100%;
    height: 100%;
    padding: 24px;
    place-items: center;
    overflow: auto;
  }
  .business-model-modal::backdrop {
    background: rgba(3,8,13,0.78);
    backdrop-filter: blur(9px);
  }
  .business-model-modal-card {
    position: relative;
    width: min(680px, 100%);
    overflow: hidden;
    padding: clamp(34px, 5vw, 54px);
    border: 1px solid rgba(81,132,184,0.2);
    border-radius: 28px;
    background:
      radial-gradient(circle at 92% 0%, rgba(81,163,243,0.14), transparent 34%),
      #F8FBFE;
    box-shadow: 0 36px 100px rgba(0,0,0,0.42);
    animation: businessModelIn 180ms ease-out both;
  }
  .business-model-modal-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, #3E8FE8, #73B7F7, transparent);
  }
  .business-model-modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid rgba(23,42,66,0.1);
    border-radius: 50%;
    background: rgba(255,255,255,0.7);
    color: #51657B;
    font-size: 22px;
    line-height: 1;
    transition: transform 150ms ease, background-color 150ms ease;
  }
  .business-model-modal-close:hover {
    background: #FFFFFF;
    transform: rotate(4deg) scale(1.04);
  }
  .business-model-modal-close:focus-visible {
    outline: 2px solid #3E8FE8;
    outline-offset: 3px;
  }
  .business-model-modal-kicker {
    color: #3E8FE8;
    font: 300 10px/1 var(--ui-font);
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .business-model-modal-card h2 {
    max-width: 560px;
    margin-top: 18px;
    color: #172A42;
    font: 300 clamp(34px, 5vw, 52px)/1.02 var(--ui-font);
    letter-spacing: -0.05em;
    text-wrap: balance;
  }
  .business-model-modal-card p {
    max-width: 570px;
    margin-top: 22px;
    color: #607187;
    font-size: 16px;
    line-height: 1.75;
  }
  @keyframes businessModelIn {
    from {
      opacity: 0;
      transform: translateY(14px) scale(0.985);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
  @media (max-width: 1023px) {
    .product-showcase-section {
      padding-top: 830px;
    }
    .iceberg-differences {
      position: relative;
      top: auto;
      left: auto;
      width: min(680px, 100%);
      margin: 0 auto 88px;
      transform: translateY(-64px);
    }
    .product-showcase-intro,
    .voice-product-box,
    .dashboard-product-box,
    .ai-product-box {
      grid-template-columns: 1fr;
    }
    .product-showcase-intro p {
      justify-self: start;
    }
    .voice-product-box,
    .dashboard-product-box,
    .ai-product-box {
      gap: 38px;
    }
    .ai-product-preview {
      height: auto;
    }
    .ai-assistant-svg {
      height: auto;
    }
  }
  @media (max-width: 639px) {
    .product-showcase-section {
      padding: 830px 16px 76px;
    }
    .iceberg-differences {
      margin-bottom: 68px;
      transform: translateY(-40px);
    }
    .iceberg-difference:nth-child(n) {
      margin-left: 0;
    }
    .iceberg-difference::after {
      display: none;
    }
    .iceberg-difference {
      grid-template-columns: 50px minmax(0, 1fr);
      gap: 12px;
    }
    .product-showcase-intro {
      gap: 22px;
      margin-bottom: 9.2px;
    }
    .product-showcase-intro h2 {
      font-size: 39px;
    }
    .product-box {
      border-radius: 22px;
    }
    .voice-product-box,
    .dashboard-product-box,
    .ai-product-box {
      gap: 32px;
      padding: 26px 20px;
    }
    .dashboard-product-box h3,
    .ai-product-box h3 {
      font-size: 35px;
    }
    .dashboard-preview-toolbar {
      padding: 0 14px;
    }
    .dashboard-preview-metric {
      padding: 14px 10px;
    }
    .dashboard-preview-board {
      gap: 7px;
      padding: 10px;
    }
    .dashboard-preview-column {
      padding: 7px;
    }
    .dashboard-preview-card {
      padding: 8px;
    }
    .dashboard-preview-activity {
      padding-right: 12px;
      padding-left: 12px;
    }
    .product-box h3 {
      font-size: 34px;
    }
    .product-proof-list {
      grid-template-columns: 1fr;
    }
    .product-proof-list li {
      min-height: 0;
      padding: 22px 0;
      border-right: 0 !important;
    }
    .dashboard-product-flow li {
      min-height: 104px;
      padding: 18px;
    }
    .product-box-actions {
      align-items: flex-start;
      flex-direction: column;
    }
    .dashboard-options-cta {
      grid-template-columns: 1fr;
      align-items: flex-start;
      gap: 22px;
      padding: 28px 0 30px;
    }
    .dashboard-options-actions {
      align-items: flex-start;
      flex-direction: column;
    }
    .business-model-launch {
      margin-left: 0;
    }
    .business-model-modal[open] {
      padding: 16px;
    }
    .business-model-modal-card {
      padding: 34px 24px 30px;
      border-radius: 22px;
    }
    .business-model-modal-card h2 {
      padding-right: 28px;
      font-size: 36px;
    }
    .business-model-modal-card p {
      font-size: 14px;
      line-height: 1.65;
    }
  }

  /* The underwater story ends here; every section below returns to daylight. */
  .product-showcase-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    padding-top: 64px;
    color: #122238;
  }
  .product-showcase-wrap::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: -92px;
    bottom: -128px;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: #FFFFFF;
    clip-path: polygon(
      0 56px,
      17% 36px,
      36% 48px,
      58% 14px,
      79% 42px,
      100% 24px,
      100% 100%,
      0 100%
    );
    pointer-events: none;
  }
  .product-showcase-wrap::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: -92px;
    left: 50%;
    width: 100vw;
    height: 64px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, #2F7ED8, #59B1F6 56%, #2F7ED8);
    clip-path: polygon(
      0 56px,
      17% 36px,
      36% 48px,
      58% 14px,
      79% 42px,
      100% 24px,
      100% 27px,
      79% 45px,
      58% 17px,
      36% 51px,
      17% 39px,
      0 59px
    );
    box-shadow: 0 3px 12px rgba(47,126,216,0.2);
    pointer-events: none;
  }
  .product-showcase-wrap > * {
    position: relative;
    z-index: 1;
  }
  .product-showcase-intro {
    border-bottom-color: rgba(18,34,56,0.13);
  }
  .product-showcase-intro h2 {
    color: #102136;
  }
  .product-showcase-intro p {
    color: #607187;
  }
  .product-box {
    border-color: rgba(81,132,184,0.2);
    background:
      linear-gradient(145deg, rgba(255,255,255,0.99), rgba(241,246,251,0.98));
    box-shadow:
      0 30px 80px rgba(24,54,86,0.12),
      inset 0 1px rgba(255,255,255,0.95);
    color: #122238;
  }
  .product-box::before {
    background: linear-gradient(90deg, #3D82D9, rgba(81,163,243,0.08));
  }
  .product-box h3 {
    color: #102136;
  }
  .product-box-summary {
    color: #607187;
  }
  .product-box-link {
    border-bottom-color: rgba(35,77,119,0.3);
    color: #315879;
  }
  .product-box-link:hover {
    border-color: #3D82D9;
    color: #176AC1;
  }
  .product-proof-list,
  .product-proof-list li,
  .dashboard-product-flow,
  .dashboard-product-flow li {
    border-color: rgba(18,34,56,0.11);
  }
  .product-proof-list h4,
  .dashboard-product-flow strong {
    color: #172A42;
  }
  .product-proof-list p {
    color: #68798D;
  }

  .product-showcase-intro {
    order: 1;
  }
  .product-showcase-grid {
    order: 2;
  }
  .dashboard-options-cta {
    order: 3;
  }

  .integration-strip {
    position: relative;
    left: 50%;
    order: 4;
    display: block;
    width: 100vw;
    margin: clamp(58px, 6vw, 88px) 0 0 -50vw;
    padding: 19px 0;
    border-top: 1px solid rgba(18,34,56,0.12);
    border-bottom: 1px solid rgba(18,34,56,0.12);
  }
  .integration-marquee {
    min-width: 0;
    width: 100%;
    overflow: hidden;
  }
  .integration-marquee-track {
    display: flex;
    width: max-content;
    transform: translate3d(0, 0, 0);
    will-change: transform;
  }
  .integration-marquee-track.is-ready {
    animation: integration-scroll 34s linear infinite;
  }
  .integration-marquee:hover .integration-marquee-track {
    animation-play-state: paused;
  }
  .integration-marquee-set {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-around;
    min-width: 100vw;
    box-sizing: border-box;
    gap: clamp(34px, 4vw, 58px);
    padding-right: clamp(34px, 4vw, 58px);
  }
  .integration-logo {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
    color: #34465B;
    font: 300 15px/1 var(--ui-font);
    white-space: nowrap;
  }
  .integration-logo svg {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    overflow: visible;
  }
  .integration-logo-stripe {
    color: #635BFF;
    font-size: 18px;
    letter-spacing: -0.045em;
  }
  .integration-logo-square {
    color: #111820;
  }

  .integration-story {
    order: 5;
    padding: clamp(72px, 8vw, 108px) 0 16px;
  }
  .integration-story-head {
    max-width: 900px;
  }
  .integration-story-kicker,
  .integration-api-label {
    color: #3D82D9;
    font: 300 9px/1 var(--ui-font);
    letter-spacing: 0.13em;
    text-transform: uppercase;
  }
  .integration-story-head h2 {
    max-width: 820px;
    margin-top: 14px;
    color: #102136;
    font: 300 clamp(42px, 5vw, 68px)/0.98 var(--ui-font);
    letter-spacing: -0.06em;
    text-wrap: balance;
  }
  .integration-story-head p {
    max-width: 660px;
    margin-top: 22px;
    color: #607187;
    font-size: 17px;
    line-height: 1.68;
  }
  .integration-api-products {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: clamp(52px, 6vw, 76px);
    border-top: 1px solid rgba(18,34,56,0.14);
    border-bottom: 1px solid rgba(18,34,56,0.14);
  }
  .integration-api-product {
    padding: 38px clamp(34px, 4vw, 62px) 42px;
  }
  .integration-api-product:first-child {
    padding-left: 0;
    border-right: 1px solid rgba(18,34,56,0.12);
  }
  .integration-api-product:last-child {
    padding-right: 0;
  }
  .integration-api-product h3 {
    max-width: 500px;
    margin-top: 16px;
    color: #172A42;
    font: 300 clamp(28px, 3vw, 40px)/1.08 var(--ui-font);
    letter-spacing: -0.05em;
    text-wrap: balance;
  }
  .integration-api-product > p {
    max-width: 540px;
    margin-top: 18px;
    color: #68798D;
    font-size: 14px;
    line-height: 1.7;
  }
  .integration-api-list {
    margin-top: 28px;
    border-top: 1px solid rgba(18,34,56,0.11);
  }
  .integration-api-list li {
    display: flex;
    gap: 13px;
    align-items: center;
    min-height: 44px;
    padding: 11px 0;
    border-bottom: 1px solid rgba(18,34,56,0.1);
    color: #31506F;
    font-size: 13px;
    font-weight: 300;
  }
  .integration-api-list li::before {
    content: "";
    width: 14px;
    height: 1px;
    flex: 0 0 14px;
    background: #3D82D9;
  }
  .integration-api-note {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 28px;
    align-items: center;
    padding-top: 28px;
  }
  .integration-api-note span {
    color: #3D82D9;
    font: 300 9px/1 var(--ui-font);
    letter-spacing: 0.13em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .integration-api-note p {
    width: 100%;
    max-width: none;
    color: #526A83;
    font-size: 14px;
    line-height: 1.6;
  }

  @keyframes integration-scroll {
    to {
      transform: translate3d(-50%, 0, 0);
    }
  }

  @media (max-width: 767px) {
    .integration-strip {
      margin-top: 44px;
      padding-top: 18px;
      padding-bottom: 18px;
    }
    .integration-marquee {
      margin-inline: 0;
    }
    .integration-marquee-set {
      gap: 34px;
      padding-right: 34px;
    }
    .integration-story {
      padding-top: 58px;
    }
    .integration-story-head h2 {
      font-size: 42px;
    }
    .integration-story-head p {
      font-size: 15px;
    }
    .integration-api-products {
      grid-template-columns: 1fr;
      margin-top: 42px;
    }
    .integration-api-product,
    .integration-api-product:first-child,
    .integration-api-product:last-child {
      padding: 30px 0 34px;
      border-right: 0;
      border-bottom: 1px solid rgba(18,34,56,0.11);
    }
    .integration-api-product:last-child {
      border-bottom: 0;
    }
    .integration-api-product h3 {
      font-size: 31px;
    }
    .integration-api-note {
      grid-template-columns: 1fr;
      gap: 10px;
      padding-top: 24px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .site-menu,
    .site-menu-panel {
      transition: none;
    }
    .integration-marquee {
      overflow-x: auto;
      scrollbar-width: none;
    }
    .integration-marquee::-webkit-scrollbar {
      display: none;
    }
    .integration-marquee-track.is-ready {
      animation: none;
    }
    .integration-marquee-set[data-marquee-clone] {
      display: none;
    }
  }

  .journey-demo,
  .journey-faq {
    color: #122238;
    border-color: rgba(18,34,56,0.1) !important;
  }
  .journey-demo {
    background: #FFFFFF !important;
  }
  .journey-faq {
    background: #FFFFFF !important;
  }
  .journey-demo .journey-heading h2,
  .journey-faq .journey-heading h2 {
    color: #102136;
  }
  .journey-demo .journey-heading p {
    color: #607187 !important;
  }
  .journey-form {
    border-color: rgba(81,132,184,0.2) !important;
    border-left-color: #3D82D9 !important;
    background: rgba(255,255,255,0.94) !important;
    box-shadow: 0 24px 70px rgba(24,54,86,0.12);
    backdrop-filter: blur(14px);
  }
  .journey-form label {
    color: #52667D !important;
  }
  .journey-form input {
    border-color: rgba(18,34,56,0.13) !important;
    background: #F7FAFD !important;
    color: #102136 !important;
  }
  .journey-form input::placeholder {
    color: #98A6B5;
  }
  .journey-form #formNote {
    color: #607187 !important;
  }
  .contact-section {
    min-height: 0 !important;
    padding: 88px clamp(24px, 4vw, 64px) !important;
    background: #FFFFFF !important;
  }
  .contact-section > .contact-panel,
  .journey-left.contact-section > .contact-panel {
    display: block;
    width: min(1180px, 100%) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: left !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .contact-section .journey-heading {
    display: grid;
    max-width: none;
    grid-template-columns: minmax(0, 1fr);
    align-items: end;
    margin: 0 0 38px;
    padding: 0;
    text-align: left;
  }
  .contact-section .journey-heading > span {
    grid-column: 1;
    justify-content: flex-start;
  }
  .contact-section .journey-heading h2 {
    grid-column: 1;
    max-width: 760px;
    margin: 16px 0 0;
    color: #102136;
    font: 300 clamp(38px, 3.7vw, 54px)/1.02 var(--ui-font);
    letter-spacing: -0.05em;
    text-align: left;
    text-wrap: balance;
  }
  .contact-section .journey-heading p {
    max-width: 740px;
    margin: 20px 0 0;
    color: #607187 !important;
    font-size: 15px;
    line-height: 1.7;
    text-align: left;
  }
  .contact-response-note {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0 0;
    color: #52667D;
    font-size: 12px;
    line-height: 1.4;
  }
  .contact-response-note::before {
    content: "";
    width: 28px;
    height: 1px;
    flex: 0 0 28px;
    background: #3D82D9;
  }
  .contact-response-note strong {
    color: #304A65;
    font-weight: 300;
  }
  .contact-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: clamp(64px, 7vw, 104px);
    align-items: start;
  }
  .contact-content-grid::before {
    content: none;
  }
  .contact-section .contact-form {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none;
    text-align: left;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .contact-form-kicker {
    display: block;
    margin-bottom: 26px;
    color: #3D82D9;
    font: 300 10px/1 var(--ui-font);
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .contact-form-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
  .contact-field-wide {
    grid-column: 1 / -1;
  }
  .contact-field label {
    display: block;
    color: #6B7E93;
    font: 300 9px/1 var(--ui-font);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .contact-field label span {
    color: #94A2B1;
    font-weight: 300;
  }
  .contact-field input,
  .contact-field textarea {
    width: 100%;
    margin-top: 6px;
    padding: 11px 0 12px;
    border: 0 !important;
    border-bottom: 1px solid rgba(18,34,56,0.2) !important;
    border-radius: 0;
    outline: none;
    background: transparent !important;
    color: #102136;
    font-family: var(--ui-font);
    font-size: 14px;
    transition: border-color 0.18s, box-shadow 0.18s;
  }
  .contact-field textarea {
    min-height: 96px;
    resize: vertical;
    line-height: 1.55;
  }
  .contact-field input::placeholder,
  .contact-field textarea::placeholder {
    color: #98A6B5;
  }
  .contact-field input:focus,
  .contact-field textarea:focus {
    border-bottom-color: #3D82D9 !important;
    box-shadow: none;
  }
  .contact-submit {
    min-width: 180px;
    margin-top: 22px;
    font-size: 14px;
  }
  .contact-form-note {
    margin-top: 14px;
    color: #607187;
    font-size: 12px;
  }
  .contact-faq-panel {
    min-width: 0;
    padding: 0 0 0 clamp(48px, 5vw, 76px);
    border: 0;
    border-left: 1px solid rgba(81,132,184,0.16);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .contact-faq-header {
    margin-bottom: 12px;
  }
  .contact-faq-header span {
    color: #3D82D9;
    font: 300 10px/1 var(--ui-font);
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .contact-faq-header h3 {
    margin-top: 10px;
    color: #102136;
    font: 300 clamp(25px, 2.3vw, 34px)/1.08 var(--ui-font);
    letter-spacing: -0.04em;
  }
  .contact-faq-panel .faq-list {
    width: 100%;
    margin: 14px 0 0 !important;
    border-top: 1px solid rgba(18,34,56,0.12) !important;
    border-bottom: 0 !important;
    text-align: left;
  }
  .contact-faq-panel .faq-item {
    padding: 17px 0;
  }
  .contact-faq-panel .faq-icon {
    display: block;
    width: auto;
    height: auto;
    flex: 0 0 auto;
    border: 0;
    border-radius: 0;
    color: #3D82D9 !important;
    font-size: 20px;
  }
  @media (max-width: 1023px) {
    .contact-section {
      padding: 72px 24px !important;
    }
    .contact-content-grid {
      grid-template-columns: 1fr;
      gap: 42px;
    }
    .contact-section .journey-heading {
      display: block;
      max-width: 620px;
    }
    .contact-response-note {
      margin-top: 20px;
      margin-bottom: 0;
    }
    .contact-faq-panel {
      padding: 42px 0 0;
      border-top: 1px solid rgba(81,132,184,0.16);
      border-left: 0;
    }
  }
  @media (max-width: 639px) {
    .contact-section {
      padding: 58px 18px !important;
    }
    .contact-section .contact-form {
      padding: 0 !important;
    }
    .contact-faq-panel {
      padding: 38px 0 0;
    }
    .contact-form-fields {
      grid-template-columns: 1fr;
    }
    .contact-field-wide {
      grid-column: auto;
    }
    .contact-submit {
      width: 100%;
    }
  }
  .journey-faq .faq-item {
    border-bottom-color: rgba(18,34,56,0.12);
  }
  .journey-faq .faq-toggle > span:first-child {
    color: #172A42;
  }
  .journey-faq .faq-icon {
    border-color: rgba(18,34,56,0.14);
    color: #607187 !important;
  }
  .journey-faq .faq-answer p {
    color: #607187 !important;
  }
  .iceberg-journey footer {
    border-top: 1px solid rgba(18,34,56,0.1);
    background: #FFFFFF !important;
    color: #122238;
  }
  .iceberg-journey footer [class*="text-white"] {
    color: #6A798B !important;
  }
  .iceberg-journey footer a {
    color: #52667D !important;
  }
  .iceberg-journey footer a:hover {
    color: #176AC1 !important;
  }
  @media (max-width: 639px) {
    .product-showcase-wrap {
      padding-top: 50px;
    }
  }

  /* Phone layout: keep the desktop composition intact while fitting the story to the viewport. */
  @media (max-width: 639px) {
    html,
    body {
      max-width: 100%;
      overflow-x: clip;
    }

    .nav-layout {
      padding-right: 16px !important;
      padding-left: 16px !important;
    }
    .nav-layout > a img {
      width: auto;
      max-width: 145px;
      height: auto;
    }

    .hero-layout {
      box-sizing: border-box;
      width: 100%;
      min-height: 770px;
      padding-right: 20px !important;
      padding-left: 20px !important;
    }
    .hero-copy {
      width: calc(100vw - 40px);
      max-width: 100%;
      min-width: 0;
    }
    .hero-title {
      font-size: clamp(36px, 10.2vw, 40px);
    }
    .hero-title-accent {
      width: auto;
      max-width: 100%;
    }
    .hero-subtitle,
    .hero-actions {
      width: 100%;
      min-width: 0;
    }

    .iceberg-story {
      --water-top: 720px;
    }
    .site-iceberg {
      top: var(--water-top);
      left: 50%;
      width: calc(100vw - 24px);
      max-width: 420px;
      height: auto;
      aspect-ratio: 790 / 3020;
      transform: translate3d(-50%, -22.02%, 0);
      animation-name: iceberg-bob-mobile;
    }
    @keyframes iceberg-bob-mobile {
      0%, 100% { transform: translate3d(-50%, -22.02%, 0); }
      50% { transform: translate3d(-50%, calc(-22.02% + 4px), 0); }
    }

    .product-showcase-section {
      padding: 0 16px 76px;
    }
    .iceberg-differences {
      z-index: 31;
      width: min(calc(100% - 8px), 330px);
      margin-right: auto;
      margin-bottom: 88px;
      margin-left: auto;
      transform: translateY(-40px);
    }
    .iceberg-differences h2 {
      margin-top: 10px;
      font-size: clamp(24px, 7.6vw, 28px);
    }
    .iceberg-differences-list {
      margin-top: 15px;
    }
    .iceberg-difference {
      grid-template-columns: 36px minmax(0, 1fr);
      gap: 8px;
      align-items: center;
      padding: 9px 0;
    }
    .iceberg-difference-number {
      font-size: 23px;
    }
    .iceberg-difference h3 {
      font-size: 11.5px;
      line-height: 1.28;
    }
    .iceberg-difference p {
      display: none;
    }
    .business-model-launch {
      margin-top: 14px;
      margin-left: 0;
    }
    .business-model-trigger.button-name {
      width: 100%;
      max-width: 100%;
      height: auto;
      min-height: 44px;
      padding: 10px 12px;
      white-space: normal;
      text-align: center;
      font-size: 11px;
      line-height: 1.3;
    }

    .product-showcase-wrap,
    .product-showcase-grid,
    .product-box,
    .product-box-copy,
    .ai-product-preview,
    .integration-story,
    .contact-content-grid,
    .contact-form,
    .contact-faq-panel {
      min-width: 0;
      max-width: 100%;
    }
    .ai-assistant-svg {
      display: block;
      width: 100%;
      max-width: 100%;
    }
    .product-showcase-intro h2 {
      font-size: clamp(34px, 10vw, 39px);
    }
    .integration-story-head h2 {
      font-size: clamp(34px, 10vw, 42px);
    }
    .integration-api-product h3 {
      font-size: clamp(28px, 8.5vw, 31px);
    }
    .contact-section .journey-heading h2 {
      font-size: clamp(34px, 10vw, 44px);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .button-name,
    .button-name:hover,
    .button-name:active {
      transition: none;
      transform: none;
    }
    .transcript-line, .chip, .pulse-dot {
      animation: none !important;
      opacity: 1 !important;
      transform: none !important;
    }
    .story-water {
      animation: none !important;
      transform: none !important;
    }
    .site-iceberg {
      animation: none !important;
      transform: translate3d(-50%, 0, 0) !important;
    }
    .voice-waveform i {
      animation: none !important;
      opacity: 0.8;
      transform: none !important;
    }
    .journey-section > .journey-panel::before,
    .journey-section > .journey-panel::after {
      animation: none !important;
    }
  }
  @media (max-width: 639px) and (prefers-reduced-motion: reduce) {
    .site-iceberg {
      transform: translate3d(-50%, -22.02%, 0) !important;
    }
  }