:root {
    /* Colour */
    --hero-gradient: linear-gradient(
      90deg,
      rgb(32, 173, 255)  0%,
      rgb(62, 104, 245)  47.115%,
      rgb(157, 101, 217) 65.865%,
      rgb(207, 128, 138) 100%
    );
    --card-gradient: linear-gradient(to bottom, #ffffff 50%, #f59e0b 317.42%);
    --card-rule: #4fa3f7;
    --card-shadow: 0 4px 5px rgba(26, 111, 232, 0.7);
    --card-ink: #0d2482;

    --cta-fill: #ffb325;
    --cta-ink: #1a1a1a;

    --accent-strong: #ffd53d;   /* "one" */
    --accent-soft:   #ffdc68;   /* qualifier line */
    --on-hero:       rgba(255, 255, 255, 0.85);

    --body-color: #212529;      /* Figma style: Body Text/Body Color */
    --main-accent: #4165f5;     /* Figma style: MainAccent */
    --movestar-orange: #f58020; /* Figma style: MoveStar-Orange */

    --deep-ink:  #1a3c6e;
    --muted-ink: #5a6e8a;
    --main-navy: #2d4191;      /* Figma style: MainNavy */

    /* Comparison table */
    --table-line: #dde4ee;
    --table-head-bg: #eef3ff;
    --table-head-ink: #243140;
    --table-ink: #0a0f1e;
    --table-before: #8494a8;
    --table-after: #0ea67a;
    --autos-heading: #243474;

    /* Commercial band */
    --accent-warm: #f3a710;    /* Figma style: Accent-Warm/Normal */
    --eyebrow-amber: #f59e0b;
    --panel-dash: rgba(200, 214, 236, 0.45);

    /* Military band */
    --mil-bg: #2d4191;
    --mil-tick: #4a90d9;
    --mil-panel-dash: rgba(200, 214, 236, 0.3);
    --forms-bg: #d8f0fa;
    --forms-line: rgba(59, 130, 246, 0.13);
    --badge-fill: #9ffdc6;
    --badge-ring: rgba(59, 130, 246, 0.33);
    --phone-shell: #97acff;
    --chip-fill: #1ba8ff;

    /* Marquee */
    --marquee-muted: #8898b0;

    /* Shared surfaces */
    --surface-tint: #f0f4fa;
    --testi-card-line: #dce8f8;

    /* Latest news */
    --eyebrow-gold: #f5a623;
    --news-rule: #f59e0b;
    --news-body: #4b5a6e;

    /* Awards */
    --awards-head-line: rgba(65, 101, 245, 0.75);
    --awards-row-line: rgba(65, 101, 245, 0.2);

    /* Segments band */
    --segments-tint: rgba(81, 104, 240, 0.1);
    --segment-rule-commercial: #f5a623;
    --segment-rule-military: #3bbbe2;
    --segment-rule-both: #2a52a0;
    --segment-heading: var(--deep-ink);
    --segment-copy: var(--muted-ink);
    --pill-ink: #1a6fe8;

    /* Stats grid */
    --stat-figure: #2a52a0;
    --stat-hairline: #c8d6ec;

    /* Type */
    --font-display: 'Geist', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    /* Layout */
    --container-max: 1320px;
    --hero-pad-block: 80px;
    --column-gap: 63px;
    --copy-width: 576px;
    --frame-pad: 196px;
  }

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

  html { -webkit-text-size-adjust: 100%; }

  body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--body-color);
    background: #ffffff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  img { display: block; }

  a { text-decoration: none; }

  :where(a, button):focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 3px;
    border-radius: 4px;
  }

  /* ============================================================
     Hero shell
     ============================================================ */
  .hero {
    position: relative;
    display: flex;
    align-items: center;
    padding: var(--hero-pad-block) 0;
    background-image: var(--hero-gradient);
    isolation: isolate;
    overflow: hidden;
  }

  /* Dot field that fades in over the violet half of the gradient */
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: radial-gradient(
      circle at center,
      rgba(255, 255, 255, 0.22) 0 1.5px,
      transparent 1.6px
    );
    background-size: 30px 30px;
    -webkit-mask-image: linear-gradient(90deg, transparent 40%, #000 56%);
            mask-image: linear-gradient(90deg, transparent 40%, #000 56%);
  }

  .hero__align {
    flex: 1 0 0;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }

  .hero__container {
    display: flex;
    align-items: center;
    gap: var(--column-gap);
    width: var(--container-max);
    max-width: var(--container-max);
    flex-shrink: 0;
    padding-top: 60px;
  }

  /* ============================================================
     Left column — copy
     ============================================================ */
  .hero__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: var(--copy-width);
    flex-shrink: 0;
  }

  .hero__eyebrow {
    margin: 0;
    width: 100%;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 12px;
    line-height: 16.5px;
    letter-spacing: 1.32px;
    text-transform: uppercase;
    color: var(--on-hero);
    white-space: nowrap;
  }

  .hero__title {
    margin: 0;
    padding-top: 20px;
    width: 100%;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 64px;
    line-height: 69.12px;
    letter-spacing: normal;
    color: #ffffff;
    overflow-wrap: break-word;
  }

  .hero__title-accent {
    font-family: var(--font-display);
    font-weight: 900;
    color: var(--accent-strong);
  }

  .hero__lede {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding-top: 24px;
    width: 510px;
    max-width: 100%;
    font-size: 16px;
    line-height: 25.6px;
    overflow-wrap: break-word;
  }

  .hero__lede p { margin: 0; }

  .hero__lede-body {
    font-weight: 400;
    color: var(--on-hero);
    width: 100%;
  }

  .hero__lede-note {
    font-weight: 700;
    color: var(--accent-soft);
    max-width: 100%;
  }

  /* ---- Actions ---- */
  .hero__actions {
    display: flex;
    align-items: center;
    gap: 24px;
    height: 87px;
    padding-top: 36px;
    width: 100%;
  }

  .btn {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 22.5px;
    text-align: center;
    white-space: nowrap;
    flex-shrink: 0;
    transition: transform 160ms ease, background-color 160ms ease, opacity 160ms ease;
  }

  .btn--primary {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    border-radius: 50px;
    background: var(--cta-fill);
    color: var(--cta-ink);
    font-weight: 700;
  }

  .btn--primary:hover { background: #ffc04a; transform: translateY(-1px); }
  .btn--primary:active { transform: translateY(0); }

  .btn--quiet {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #ffffff;
    font-weight: 500;
  }

  .btn--quiet:hover { opacity: 0.85; }

  .btn__chevron {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    font-weight: 500;
    line-height: 22.5px;
    transition: transform 160ms ease;
  }

  .btn--quiet:hover .btn__chevron { transform: translateX(3px); }

  /* ============================================================
     Right column — feature cards
     ============================================================ */
  .hero__panel {
    flex: 1 0 0;
    min-width: 0;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
  }

  .feature-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 25px;
    margin: 0;
    list-style: none;
    flex-shrink: 0;
  }

  .feature-h-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 30px;
    border-left: 10px solid var(--card-rule);
    border-radius: 10px;
    background-image: var(--card-gradient);
    filter: drop-shadow(var(--card-shadow));
    flex-shrink: 0;
  }

  .feature-h-card__label {
    margin: 0;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 18px;
    line-height: normal;
    color: var(--card-ink);
    white-space: nowrap;
    overflow-wrap: break-word;
    flex-shrink: 0;
  }
 

  /* Icon holders. The icon-wrapper component is multi-size, so each
     glyph keeps its own outer box and leaf dimensions — never one
     shared size across unlike assets. */
  .icon-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
  }

  .icon-wrapper > img {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
  }

  .icon-wrapper--ai {
    align-items: flex-start;
    justify-content: flex-start;
    padding: 8px 0;
    width: 47.998px;
  }

  .icon-wrapper--ai > img {
    width: 47.998px;
    height: 32.821px;
  }

  /* ============================================================
     Responsive
     ============================================================ */
  @media (max-width: 1440px) {
    .hero__align { padding: 0 40px; }
    .hero__container { width: 100%; }
  }

  @media (max-width: 1200px) {
    :root { --column-gap: 40px; --copy-width: 520px; }
    .hero__title { font-size: 54px; line-height: 60px; }
    .feature-h-card__label { font-size: 20px; }
    .feature-h-card .icon-wrapper > img { width: 40px; height: 40px; }
    .feature-h-card .icon-wrapper--ai { width: 40px; }
    .feature-h-card .icon-wrapper--ai > img { width: 40px; height: 27.35px; }
  }

  @media (max-width: 900px) {
    :root { --hero-pad-block: 56px; }
    .hero__align { padding: 0 24px; }
    .hero__container { flex-direction: column; align-items: flex-start; gap: 24px; }
    .hero__copy { width: 100%; max-width: 100%; }
    .hero__lede { width: 100%; }
    .hero__panel { align-self: stretch; align-items: flex-start; }
    .feature-list { padding: 8px 0 0; gap: 16px; width: 100%; }
    .feature-h-card { width: 100%; padding: 12px 20px; }
    .feature-h-card__label { white-space: normal;flex-shrink: 1; min-width: 0; }
  }

  @media (max-width: 600px) {
    .hero__title { font-size: 40px; line-height: 46px; }
    .hero__lede { font-size: 15px; line-height: 24px; }
    .hero__actions { height: auto; padding-top: 28px; gap: 16px; flex-wrap: wrap; }
    .feature-h-card__label { font-size: 18px; }
  }

  /* ============================================================
     Proof frame — Figma node 69:1966
     ============================================================ */
  .proof {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 87px;
    padding: 0 var(--frame-pad) 71px;
    background: #ffffff;
    overflow: hidden;
  }

  /* ---- Arc backdrop (69:1899 "backg 1") ----
     The three wrappers between the layer and the arcs are display:contents
     in the source, so every arc inset resolves against this 2191x921 box.
     Boxes and mask offsets below are the resolved values. */
  .proof__arcs {
    /* Every length in the arc composition is expressed as a multiple of
       --arc-u instead of a raw pixel. At 2191px and below --arc-u is 1px,
       so the artwork renders exactly as Figma exported it. Past 2191px the
       unit grows with the viewport, scaling the whole composition so it
       always reaches both edges instead of stopping at a hard 2191px seam.
       100vw is used rather than 100% so the value never resolves against a
       parent height; the few pixels of scrollbar it over-counts are clipped. */
    --arc-u: max(1px, calc(100vw / 2191));

    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: calc(2191 * var(--arc-u));
    height: calc(921 * var(--arc-u));
    opacity: 0.12;
    overflow: hidden;
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 0;
  }

  .proof__arc {
    position: absolute;
    -webkit-mask-image: url("/images/home/mask-proof-arc.svg");
            mask-image: url("/images/home/mask-proof-arc.svg");
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: calc(2191 * var(--arc-u)) calc(1052.571 * var(--arc-u));
            mask-size: calc(2191 * var(--arc-u)) calc(1052.571 * var(--arc-u));
    -webkit-mask-position: calc(var(--mask-x) * var(--arc-u)) calc(var(--mask-y) * var(--arc-u));
            mask-position: calc(var(--mask-x) * var(--arc-u)) calc(var(--mask-y) * var(--arc-u));
    -webkit-mask-composite: source-in;
            mask-composite: intersect;
            mask-mode: luminance;
            mask-clip: no-clip;
  }

  .proof__arc > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
  }

  /* Concentric rings sharing a centre at the bottom-middle of the box
     (1095.5, 921). The numbers are the Figma pixel values, now multiplied
     by --arc-u so the whole set scales as one. */

  .proof__arc:nth-child(1) {
    left:   calc(-425.930 * var(--arc-u));
    top:    calc(-394.741 * var(--arc-u));
    width:  calc(3042.861 * var(--arc-u));
    height: calc(2631.481 * var(--arc-u));
    --mask-x: 426.027;
    --mask-y: 263.143;
  }

  .proof__arc:nth-child(2) {
    left:   calc(-273.875 * var(--arc-u));
    top:    calc(-263.130 * var(--arc-u));
    width:  calc(2738.750 * var(--arc-u));
    height: calc(2368.259 * var(--arc-u));
    --mask-x: 273.875;
    --mask-y: 131.571;
  }

  .proof__arc:nth-child(3) {
    left:   calc(-121.820 * var(--arc-u));
    top:    calc(-131.611 * var(--arc-u));
    width:  calc(2434.639 * var(--arc-u));
    height: calc(2105.222 * var(--arc-u));
    --mask-x: 121.722;
    --mask-y: 0.000;
  }

  .proof__arc:nth-child(4) {
    left:   calc(30.455 * var(--arc-u));
    top:    calc(0.000 * var(--arc-u));
    width:  calc(2130.090 * var(--arc-u));
    height: calc(1842.000 * var(--arc-u));
    --mask-x: -30.431;
    --mask-y: -131.571;
  }

  .proof__arc:nth-child(5) {
    left:   calc(182.510 * var(--arc-u));
    top:    calc(131.611 * var(--arc-u));
    width:  calc(1825.979 * var(--arc-u));
    height: calc(1578.778 * var(--arc-u));
    --mask-x: -182.584;
    --mask-y: -263.143;
  }

  .proof__arc:nth-child(6) {
    left:   calc(365.240 * var(--arc-u));
    top:    calc(289.470 * var(--arc-u));
    width:  calc(1460.521 * var(--arc-u));
    height: calc(1263.059 * var(--arc-u));
    --mask-x: -365.167;
    --mask-y: -421.029;
  }

  .proof__arc:nth-child(7) {
    left:   calc(334.785 * var(--arc-u));
    top:    calc(263.130 * var(--arc-u));
    width:  calc(1521.430 * var(--arc-u));
    height: calc(1315.741 * var(--arc-u));
    --mask-x: -334.736;
    --mask-y: -394.714;
  }

  .proof__arc:nth-child(8) {
    left:   calc(486.840 * var(--arc-u));
    top:    calc(394.741 * var(--arc-u));
    width:  calc(1217.320 * var(--arc-u));
    height: calc(1052.519 * var(--arc-u));
    --mask-x: -486.890;
    --mask-y: -526.286;
  }

  .proof__arc:nth-child(9) {
    left:   calc(639.115 * var(--arc-u));
    top:    calc(526.259 * var(--arc-u));
    width:  calc(912.771 * var(--arc-u));
    height: calc(789.481 * var(--arc-u));
    --mask-x: -639.042;
    --mask-y: -657.857;
  }

  /* ============================================================
     Segments band — Figma node 66:660 (BusinessTypeSection)
     Full-bleed: breaks out of the frame's horizontal padding.
     ============================================================ */
  .segments {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 288px;
    padding: 48px 0;
    width: calc(100% + (var(--frame-pad) * 2));
    margin: 0 calc(var(--frame-pad) * -1);
    background: var(--segments-tint);
  }

  .segments__align {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    flex-shrink: 0;
  }

  .segments__container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: var(--container-max);
    max-width: var(--container-max);
    flex-shrink: 0;
  }

  .eyebrow {
    margin: 0;
    width: 100%;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 12px;
    line-height: 16.5px;
    letter-spacing: 1.32px;
    text-transform: uppercase;
    color: var(--main-accent);
    white-space: nowrap;
  }

  .segments__grid {
    display: grid;
    grid-template-columns: 420px 420px 420px;
    column-gap: 40px;
    row-gap: 16px;
    margin: 0;
    padding: 20px 0 0;
    width: 100%;
    list-style: none;
  }

  .segment-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0px;
    padding: 20px 32px;
    border-radius: 10px;
    background: #ffffff;
    border-top: 1px solid var(--segment-rule-commercial);
    border-right: 1px solid var(--segment-rule-commercial);
    border-bottom: 1px solid var(--segment-rule-commercial);
    border-left: 4px solid var(--segment-rule-commercial);
    justify-self: stretch;
    align-self: stretch;
  }


  .segment-card--military {
    justify-content: space-between;
    gap: 0;
    border-top-color: var(--segment-rule-military);
    border-right-color: var(--segment-rule-military);
    border-bottom-color: var(--segment-rule-military);
    border-left-color: var(--segment-rule-military);
  }  
.segment-card--both {
    justify-content: space-between;
    gap: 0;
    border-top-color: var(--segment-rule-both);
    border-right-color: var(--segment-rule-both);
    border-bottom-color: var(--segment-rule-both);
    border-left-color: var(--segment-rule-both);
  }

  .segment-card__body {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex-shrink: 0;
  }

  .segment-card__text {
    display: flex;
    flex-direction: column;
    flex-direction: column;
    align-items: flex-start;
    width: 313.453px;
    flex-shrink: 0;
  }

  .segment-card--military .segment-card__text { width: 292.828px; }

  .segment-card__title {
    margin: 0;
    width: 100%;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 17px;
    line-height: 25.5px;
    color: var(--segment-heading);
    white-space: nowrap;
    overflow-wrap: break-word;
  }

  .segment-card__copy {
    margin: 0;
    width: 314px;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    color: var(--segment-copy);
    overflow-wrap: break-word;
  }

  .segment-card--military .segment-card__copy {
    width: 292.828px;
    white-space: nowrap;
  }

  .pill {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border: 1px solid var(--pill-ink);
    border-radius: 50px;
    background: transparent;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
    line-height: 19.5px;
    text-align: center;
    color: var(--pill-ink);
    white-space: nowrap;
    flex-shrink: 0;
    transition: background-color 160ms ease, color 160ms ease;
  }

  .pill:hover { background: var(--pill-ink); color: #ffffff; }
  .pill:focus-visible { outline-color: var(--pill-ink); }
  .pill__chevron { display: inline-block; transition: transform 160ms ease; margin-left: 5px;}
  .pill:hover .pill__chevron { transform: translateX(2px); }

  /* ============================================================
     Stats block — Figma node 69:1850
     ============================================================ */
  .stats {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: var(--container-max);
    max-width: var(--container-max);
    flex-shrink: 0;
  }

  .stats__heading {
    margin: 0;
    padding-top: 16px;
    width: 1240px;
    max-width: 100%;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 42px;
    line-height: 63px;
    color: var(--deep-ink);
    white-space: nowrap;
    overflow-wrap: break-word;
  }

  .stats__heading em {
    font-style: normal;
    color: var(--main-accent);
  }

  .stats__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    height: 284px;
    width: 100%;
    margin: 48px 0 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--stat-hairline);
    border-radius: 12px;
    overflow: hidden;
  }
.stats__grid li{margin-top: 0px;}

  .stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 36px 54px;
    background: #ffffff;
    border-right: 1px solid var(--stat-hairline);
    border-bottom: 1px solid var(--stat-hairline);
    justify-self: stretch;
    align-self: stretch;
    min-width: 0;
  }

  /* Last column has no right rule; last row has no bottom rule. */
  .stats__grid > .stat:nth-child(3n) { border-right: none; }
  .stats__grid > .stat:nth-last-child(-n+3) { border-bottom: none; }

  .stat__figure {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-width: 0;
  }

  .stat__value {
    margin: 0;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 22px;
    line-height: 33px;
    color: var(--stat-figure);
    white-space: nowrap;
  }

  .stat__caption {
    margin: 0;
    padding-top: 10px;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 13px;
    line-height: 19.5px;
    color: var(--muted-ink);
    white-space: nowrap;
  }

  /* ---- Proof responsive ---- */
  @media (max-width: 1600px) {
    :root { --frame-pad: 64px; }
  }

  @media (max-width: 1440px) {
    .segments__container,
    .stats { width: 100%; }
    .segments__align { padding: 0 var(--frame-pad); }
    .segments__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-template-rows: auto;
      column-gap: 32px;
    }
    .segment-card__text,
    .segment-card--military .segment-card__text { width: auto; min-width: 0; flex-shrink: 1;}
    .segment-card__body { flex: 1 1 auto; min-width: 0; }
    .segment-card__copy,
    .segment-card--military .segment-card__copy { width: auto; }
    .stats__heading { white-space: normal; }
    .stats__grid { height: auto; grid-template-rows: auto auto; }
    .stat__caption { white-space: normal; }
  }

  @media (max-width: 1200px) {
    :root { --frame-pad: 40px; }
    .proof { gap: 64px; }
    .stats__heading { font-size: 34px; line-height: 48px; }
    .segment-card { flex-wrap: wrap; gap: 16px; }
    .segment-card--military { gap: 16px; justify-content: flex-start; }
    .segment-card__title { white-space: normal; }
    .segment-card--military .segment-card__copy { white-space: normal; }
    .stat { padding: 28px 32px; }
  }

  @media (max-width: 900px) {
    :root { --frame-pad: 24px; }
    .proof { gap: 48px; padding-bottom: 48px; }
    .segments { min-height: 0; padding: 40px 0; }
    .segments__grid { grid-template-columns: minmax(0, 1fr); }
    .stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stats__grid > .stat:nth-child(3n) { border-right: 1px solid var(--stat-hairline); }
    .stats__grid > .stat:nth-last-child(-n+3) { border-bottom: 1px solid var(--stat-hairline); }
    .stats__grid > .stat:nth-child(2n) { border-right: none; }
    .stats__grid > .stat:nth-last-child(-n+2) { border-bottom: none; }
  }

  @media (max-width: 600px) {
    .stats__heading { font-size: 28px; line-height: 38px; }
    .segment-card { padding: 20px; }
    .segment-card__body { flex-direction: column; gap: 12px; }
    .stats__grid { grid-template-columns: minmax(0, 1fr); }
    .stats__grid > .stat { border-right: none; border-bottom: 1px solid var(--stat-hairline); }
    .stats__grid > .stat:last-child { border-bottom: none; }
    .stat__value { font-size: 19px;      
        white-space: normal;
      min-width: 0;}
  }

  /* ============================================================
     AI features — Figma node 106:1187
     ============================================================ */
  /* ============================================================
   AI features — Figma node 106:1187
   ============================================================ */
.ai-section{
  position:relative;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:80px 0 40px;
  background:#fff;
  overflow:hidden;
}
/* Radial wash: ellipse (r 1554.5 x 513.27) centred on the top edge, laid over
   white at 20% opacity — matches the Figma fill exactly. */
.ai-section::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.2;
  background:radial-gradient(
    ellipse 70.95% 513.27px at 50% 0%,
    rgba(65,101,245,.58) 0%,
    rgba(113,140,248,.685) 25%,
    rgba(160,178,250,.79) 50%,
    rgba(208,217,253,.895) 75%,
    rgba(255,255,255,1) 100%
  );
}

.ai-margin{display:flex;flex-direction:column;align-items:center;width:100%;}
.ai-container{display:flex;flex-direction:column;align-items:flex-start;width:1320px;max-width:1320px;}

/* ---------- Header ---------- */

.eyebrow{
  font-weight:700;
  font-size:12px;
  line-height:16.5px;
  letter-spacing:1.32px;
  text-transform:uppercase;
  color:#4165f5;
  white-space:nowrap;
}
.heading-2{padding-top:16px;width:1240px;max-width:100%;}
.heading-2 h2{
  margin:0;
  font-weight:700;
  font-size:38px;
  line-height:57px;
  color:#1a3c6e;
  overflow-wrap:break-word;
}

/* ---------- Two-column body ---------- */

.body-margin{padding-top:48px;width:100%;}
.body-row{display:flex;gap:40px;align-items:flex-start;width:100%;}

/* ---------- Feature list (right column) ---------- */

.features{display:flex;flex-direction:column;gap:36px;align-items:flex-start;flex:1 0 0;min-width:0;}
.feature{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  width:100%;
  padding-left:20px;
  border-left:3px solid #4165f5;
}
.feature h3{
  margin:0;
  font-weight:700;
  font-size:16px;
  line-height:24px;
  color:#1a3c6e;
  white-space:nowrap;
}
.feature .copy{padding-top:8px;width:573px;max-width:100%;}
.feature .copy p{
  font-weight:400;
  font-size:14px;
  line-height:22.4px;
  color:#5a6e8a;
  width:573px;
  max-width:100%;
  overflow-wrap:break-word;
}

/* ---------- CTA ---------- */

.cta-row{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;padding:40px 0 26px;}
.btn-demo{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 28px;
  border:0;
  border-radius:50px;
  background:#ffb325;
  font-family:inherit;
  font-weight:700;
  font-size:18px;
  line-height:22.5px;
  text-align:center;
  color:#1a1a1a;
  white-space:nowrap;
  cursor:pointer;
  transition:filter .18s ease,transform .18s ease;
}
.btn-demo:hover{filter:brightness(.95);}
.btn-demo:active{transform:translateY(1px);}
.btn-demo:focus-visible{outline:3px solid #1a3c6e;outline-offset:3px;}

/* ============================================================
   Illustration card (215:1226) — fixed 642 x 631 canvas.
   Inner stage is 583 x 594; every child is absolutely placed
   at its exact Figma coordinate.
   ============================================================ */

.illus-card{
  position:relative;
  flex-shrink:0;
  width:642px;
  height:650px;
  border:2px dashed #c8d6ec;
  border-radius:12px;
  background:#f0f4fa;
}
/* left 34 = padding-left; top 12 = flex centring of a 594px child in a 560px box */
.stage{position:absolute;left:34px;top:12px;width:583px;height:594px;}
.stage *{position:absolute;}

/* icon-wrapper (66:1408): centred, clipped box holding a fixed-size glyph */
.icw{display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;}
.icw > img{position:relative;flex:none;}

/* 1px connector rules, mirrored (rotate-180 in the source) */
.rule{height:1px;transform:scaleX(-1);}

/* glow dots: leaf overflows its 11.7px box by 63.89% / 63.24% on every side */
.dot{}
.dot > img{position:absolute;top:-63.89%;right:-63.89%;bottom:-63.89%;left:-63.89%;width:auto;height:auto;}
.dot--b > img{top:-63.24%;right:-63.24%;bottom:-63.24%;left:-63.24%;}

/* node cluster: halo 43.826 + disc 34.435 + 20px glyph */
.cluster{}

/* stage typography */
.stage p{white-space:nowrap;line-height:normal;}
.t-eyebrow{font-weight:700;font-size:12px;text-transform:uppercase;color:#4165f5;}
.t-blue10{font-weight:700;font-size:10px;color:#4165f5;}
.t-bold12{font-weight:700;font-size:12px;color:#000;text-align:center;}
.t-reg11{font-weight:400;font-size:11px;color:#000;text-align:center;}
.ctr{transform:translateX(-50%);}

/* prompt bar */
.prompt{filter:drop-shadow(0 4px 2px rgba(0,0,0,.05));}
.prompt-field{background:#fff;border:1px solid #ccc;border-radius:10px;}
.send-btn{
  display:flex;align-items:center;justify-content:center;gap:4px;
  padding:5px 10px;border-radius:5px;background:#138dab;
}
.send-btn p{font-weight:400;font-size:12px;color:#fff;margin: 0;}
.prompt-text{font-weight:400;font-size:12px;color:#000;}

/* MOVE pill */
.move-pill{
  display:flex;align-items:center;justify-content:center;
  padding:8px 18px;border-radius:10px;background:#138dab;
}
.move-pill p{position:relative;font-weight:700;font-size:16px;color:#fff;text-align:center;margin: 0;}

/* callout chips */
.chip-fill{border-radius:5px;}
.chip-outline{border-radius:5px;background:transparent;}

/* ============================================================
   Responsive fallback. The design is fixed-width; below the
   design width the columns stack and the illustration scales.
   ============================================================ */

@media (max-width:1400px){
  .ai-container{width:calc(100% - 80px);}
}
@media (max-width:1180px){
  .body-row{flex-direction:column;gap:48px;}
  .illus-card{align-self:center;}
  .heading-2{width:100%;}
}
@media (max-width:700px){
  .ai-section{padding:56px 0 32px;}
  .ai-container{width:calc(100% - 40px);}
  .heading-2 h2{font-size:28px;line-height:40px;}
  .feature h3{white-space:normal;}
  .illus-wrap{width:100%;overflow:hidden;}
  .illus-card{transform:scale(var(--illus-scale,.62));transform-origin:top left;margin-bottom:calc(-631px * (1 - var(--illus-scale,.62)));}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important;}
}

/* ai panel: scale steps computed so the fixed canvas always fits
   the available column width, verified down to a 320px viewport. */
@media (max-width: 700px) { .ai { --mock-scale: 0.95; } }
@media (max-width: 660px) { .ai { --mock-scale: 0.89; } }
@media (max-width: 620px) { .ai { --mock-scale: 0.83; } }
@media (max-width: 580px) { .ai { --mock-scale: 0.76; } }
@media (max-width: 540px) { .ai { --mock-scale: 0.70; } }
@media (max-width: 500px) { .ai { --mock-scale: 0.64; } }
@media (max-width: 460px) { .ai { --mock-scale: 0.58; } }
@media (max-width: 420px) { .ai { --mock-scale: 0.51; } }
@media (max-width: 380px) { .ai { --mock-scale: 0.45; } }
@media (max-width: 340px) { .ai { --mock-scale: 0.42; } }


  /* ============================================================
     Platform / ecosystem — Figma node 66:831
     ============================================================ */
  .platform {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 80px 0;
    background: #ffffff;
  }

  .platform__align {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    flex-shrink: 0;
  }

  .platform__container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: var(--container-max);
    max-width: var(--container-max);
    flex-shrink: 0;
  }

  .platform__heading {
    margin: 0;
    padding-top: 16px;
    width: 760px;
    max-width: 100%;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 44px;
    line-height: 66px;
    color: var(--deep-ink);
    overflow-wrap: break-word;
  }

  .platform__lede {
    margin: 0;
    padding-top: 12px;
    width: 830px;
    max-width: 100%;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1rem;
    line-height: 24px;
    color: var(--muted-ink);
    overflow-wrap: break-word;
  }

  /* Tracks total 1240 inside the 1320 container, leaving 80px of slack on the
     right exactly as designed. Row 2 is auto-sized: its cards overflow the
     173.39px track up to the grid's 408px total. */
  .platform__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 612px));
    grid-template-rows: 195.78px minmax(173.39px, auto);
    gap: 16px;
    min-height: 408px;
    width: 100%;
    margin: 48px 0 0;
    padding: 0;
    list-style: none;
  }

  .plat-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 36px;
    border-radius: 16px;
    justify-self: stretch;
    align-self: stretch;
    min-width: 0;
  }

  .plat-card--movestar { background-image: linear-gradient(162.2603deg, rgb(253, 232, 192) 0%, rgb(245, 200, 122) 100%); }
  .plat-card--easydps  { background-image: linear-gradient(162.2603deg, rgb(221, 238, 255) 0%, rgb(184, 216, 248) 100%); }
  .plat-card--gogistix { background-image: linear-gradient(162.2417deg, rgb( 26,  60, 110) 0%, rgb( 15,  35,  64) 100%); }
  .plat-card--merced   { background-image: linear-gradient(162.2417deg, rgb(107,  79, 160) 0%, rgb( 74,  45, 128) 100%); }

  .plat-card__title {
    margin: 0;
    width: 100%;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 28px;
    line-height: 30px;
    white-space: nowrap;
  }

  .plat-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 0 0;
    opacity: 0.85;
  }

  .plat-card__copy {
    margin: 0;
    max-width: 100%;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5;
    overflow-wrap: break-word;
  }

  /* Amber and pale-blue cards use deep ink; the two dark cards use white. */
  .plat-card--movestar .plat-card__title,
  .plat-card--movestar .plat-card__copy { color: #5a3a00; }

  .plat-card--easydps .plat-card__title,
  .plat-card--easydps .plat-card__copy { color: var(--deep-ink); }

  .plat-card--gogistix .plat-card__title,
  .plat-card--gogistix .plat-card__copy,
  .plat-card--merced .plat-card__title,
  .plat-card--merced .plat-card__copy { color: #ffffff; }

  /* 25px pill: the 21px label is vertically centred and intentionally
     overflows the 3px content box, as in the design. */
  .plat-link {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    padding: 5px 14px;
    border: 1px solid var(--pill-ink);
    border-radius: 15px;
    background: var(--pill-ink);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    line-height: 21px;
    color: #ffffff;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background-color 160ms ease, border-color 160ms ease;
  }

  .plat-link:hover { background: #1560cc; border-color: #1560cc; }
  .plat-link:hover .pill__chevron { transform: translateX(2px); }

  /* ---- Platform responsive ---- */
  @media (max-width: 1440px) {
    .platform__align { padding: 0 var(--frame-pad); }
    .platform__container { width: 100%; }
  }

  @media (max-width: 1200px) {
    .platform { padding: 64px 0; }
    .platform__heading { font-size: 36px; line-height: 52px; }
    .platform__grid { grid-template-rows: minmax(195.78px, auto) minmax(173.39px, auto); }
  }

  @media (max-width: 900px) {
    .platform__grid {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto;
      min-height: 0;
    }
    .plat-card { padding: 28px; }
  }

  @media (max-width: 600px) {
    .platform__heading { font-size: 28px; line-height: 40px; }
    .plat-card__title { font-size: 24px; white-space: normal; }
  }

  /* ============================================================
     Automations / savings — Figma node 69:1968
     The node's own fill is rgba(41,82,227,0) — fully transparent — so
     whatever sits behind it shows through.
     ============================================================ */
  .autos {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 107px 0;
    background: transparent;
  }

  .autos__align {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex-shrink: 0;
  }

  .autos__container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: var(--container-max);
    max-width: var(--container-max);
    flex-shrink: 0;
  }

  .autos__intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 700px;
    max-width: 100%;
  }

  .autos__heading {
    margin: 0;
    padding-top: 16px;
    width: 741px;
    max-width: 100%;
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 48px;
    line-height: 45px;
    color: var(--autos-heading);
    overflow-wrap: break-word;
  }

  /* ---- Outcome cards (69:1978) ---- */
  .autos__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: minmax(186.78px, auto);
    gap: 16px;
    width: 100%;
    margin: 40px 0 0;
    padding: 0;
    list-style: none;
  }

  .autos-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
    background: #ffffff;
    border: 0.909px solid var(--table-line);
    border-radius: 16px;
    justify-self: stretch;
    align-self: stretch;
    min-width: 0;
  }

  .autos-card__title {
    margin: 0;
    width: 100%;
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 1.8rem;
    line-height: 40px;
    color: var(--pill-ink);
    overflow-wrap: break-word;
  }

  .autos-card__note {
    margin: 0;
    padding-top: 8px;
    width: 100%;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.5;
    color: #666;
    overflow-wrap: break-word;
  }

  /* ---- Comparison table (69:2010) ---- */
  .autos__table {
    width: 100%;
    margin: 40px 0 0;
    background: #ffffff;
    border: 0.909px solid var(--table-line);
    border-radius: 16px;
    overflow: hidden;
  }

  /* Column widths are the design's 367.39 / 367.40 / 367.39 tracks with the
     row's 24px side padding folded into the outer cells, expressed as exact
     percentages of the 1319.182px row so they stay pixel-true and fluid. */
  .cmp {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
  }

  .cmp th,
  .cmp td {
    padding: 16px 0;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 20px;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
  }

  .cmp th:first-child,
  .cmp td:first-child { padding-left: 24px; }

  .cmp th:last-child,
  .cmp td:last-child { padding-right: 24px; }

  .cmp thead tr { border-bottom: 0.909px solid var(--table-line); }

  .cmp thead th {
    padding-top: 12px;
    padding-bottom: 12px;
    background: var(--table-head-bg);
    font-weight: 600;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--table-head-ink);
  }

  .cmp tbody tr { border-bottom: 0.909px solid var(--table-line); }
  .cmp tbody tr:last-child { border-bottom: none; }

  .cmp__task {
    font-weight: 500;
    color: var(--table-ink);
  }

  .cmp__before {
    font-weight: 400;
    color: var(--table-before);
    text-decoration: line-through;
    text-decoration-thickness: from-font;
    text-decoration-skip-ink: none;
  }

  .cmp__after {
    font-weight: 600;
    color: var(--table-after);
  }

  .cmp__reg { font-weight: 400; }

  /* ---- Automations responsive ---- */
  @media (max-width: 1440px) {
    .autos__align { padding: 0 var(--frame-pad); }
    .autos__container { width: 100%; }
    .cmp th,
    .cmp td { white-space: normal; }
  }

  @media (max-width: 1200px) {
    .autos { padding: 80px 0; }
    .autos__heading { font-size: 38px; line-height: 42px; }
    .autos-card__title { font-size: 30px; line-height: 34px; }
  }

  @media (max-width: 900px) {
    .autos { padding: 64px 0; }
    .autos__cards {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto;
    }
  }

  @media (max-width: 600px) {
    .autos__heading { font-size: 30px; line-height: 34px; }
    .autos-card { padding: 20px; }
    .autos-card__title { font-size: 26px; line-height: 30px; }
    .cmp th,
    .cmp td { padding: 12px 0; font-size: 13px; }
    .cmp th:first-child,
    .cmp td:first-child { padding-left: 16px; }
    .cmp th:last-child,
    .cmp td:last-child { padding-right: 16px; }
  }

  /* ============================================================
     Commercial movers — Figma node 66:891
     ============================================================ */
  .comm {
    --panel-scale: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 100px 0;
    background: var(--main-accent);
  }

  .comm__align {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 504px;
    width: 100%;
    flex-shrink: 0;
  }

  .comm__container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: var(--container-max);
    max-width: var(--container-max);
    flex-shrink: 0;
  }

  /* Figma has 580px tracks with a 60px gap and 620px children that overflow
     them; 620px tracks with a 20px gap put every edge in the same place
     (0-620, 640-1260) and leaves the designed 60px of slack. */
  .comm__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 620px));
    grid-template-rows: 472.03px;
    column-gap: 20px;
    row-gap: 80px;
    width: 100%;
  }

  .comm__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: center;
    min-width: 0;
  }

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

  .comm__heading {
    margin: 0;
    padding-top: 16px;
    width: 580px;
    max-width: 100%;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 44px;
    line-height: 50.6px;
    color: #ffffff;
    overflow-wrap: break-word;
  }

  .comm__lede {
    margin: 0;
    padding-top: 20px;
    width: 580px;
    max-width: 100%;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1rem;
    line-height: 24.75px;
    color: #ffffff;
    overflow-wrap: break-word;
  }

  /* Checklist (66:904): 278px tracks, 40px of slack inside the 620px column */
  .comm__checks {
    display: grid;
    grid-template-columns: 278px 278px;
    /* Rows follow the text rather than pinning it to the old 21px line box. */
    grid-template-rows: repeat(3, auto);
    column-gap: 24px;
    row-gap: 10px;
    width: 100%;
    margin: 28px 0 32px;
    padding: 0;
    list-style: none;
  }

  .comm-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    justify-self: stretch;
    align-self: stretch;
    min-width: 0;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5;
    color: #ffffff;
    white-space: nowrap;
  }

  .comm-check__mark {
    flex-shrink: 0;
    font-weight: 700;
  }

  /* CTA (66:947 / 66:941) */
  .comm__cta {
    position: relative;
    width: 100%;
    height: 50.5px;
    flex-shrink: 0;
  }

  .comm-btn {
    position: absolute;
    left: 0;
    top: 0;
    width: 150.125px;
    height: 50.5px;
    background: var(--accent-warm);
    border-radius: 50px;
    transition: background-color 160ms ease, transform 160ms ease;
  }

  .comm-btn:hover { background: #ffb42a; transform: translateY(-1px); }

  .comm-btn__label {
    position: absolute;
    left: 75.5px;
    top: 12px;
    transform: translateX(-50%);
    margin: 0;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 15px;
    line-height: 22.5px;
    text-align: center;
    color: #ffffff;
    white-space: nowrap;
  }

  /* ---- Dashed panel (149:1055): fixed 620x500 composition ---- */
  .comm-panel-frame {
    width: calc(620px * var(--panel-scale));
    height: calc(500px * var(--panel-scale));
    align-self: start;
    justify-self: start;
  }

  .comm-panel {
    position: relative;
    box-sizing: border-box;
    width: 620px;
    height: 500px;
    padding: 19px 44px;
    background: rgba(255, 255, 255, 0);
    border-radius: 12px;
    transform: scale(var(--panel-scale));
    transform-origin: top left;
  }

  /* Stroke as an overlay so the canvas stays exactly 532 x 462. */
  .comm-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px dashed var(--panel-dash);
    border-radius: 12px;
    pointer-events: none;
  }

  .comm-panel__canvas {
    position: relative;
    width: 532px;
    height: 462px;
  }

  .comm-shot {
    position: absolute;
    left: 0;
    top: 20px;
    width: 434px;
    height: 294px;
    box-shadow: 0 4px 8px 0 rgba(126, 152, 255, 0.94);
  }

  .comm-shot > img,
  .comm-menu > img,
  .comm-card__shot > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    pointer-events: none;
  }

  /* Menu strip (149:1060): alpha-masked; the offsets place the mask box at
     383,0 on the canvas, matching the Mask group wrapper. */
  .comm-menu {
    position: absolute;
    left: 391.73px;
    top: 11.22px;
    width: 147.183px;
    height: 633.903px;
    -webkit-mask-image: url("/images/home/mask-comm-menu.svg");
            mask-image: url("/images/home/mask-comm-menu.svg");
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: 163.353px 462px;
            mask-size: 163.353px 462px;
    -webkit-mask-position: -8.729px -11.223px;
            mask-position: -8.729px -11.223px;
    -webkit-mask-composite: source-in;
            mask-composite: intersect;
            mask-mode: alpha;
            mask-clip: no-clip;
  }

  /* Floating white card (149:1061) */
  .comm-card {
    position: absolute;
    left: 56px;
    top: 85px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 3px;
    background: #ffffff;
    border-radius: 5px;
    filter: drop-shadow(0 4px 4px #7e98ff);
  }

  .comm-card__inner {
    position: relative;
    width: 222.122px;
    height: 335.683px;
    flex-shrink: 0;
  }

  .comm-card__panel {
    position: absolute;
    box-sizing: border-box;
    left: 2.14px;
    top: 176.41px;
    width: 219.979px;
    height: 159.271px;
    border: 1px solid #dee2e6;
    border-radius: 5px;
  }

  .comm-card__shot {
    position: absolute;
    left: 0;
    top: 0;
    width: 222.122px;
    height: 308.543px;
  }

  /* ---- Commercial responsive ---- */
  /* Between 1600 and 1660 the 196px frame padding would squeeze the two 620px
     tracks, so borrow the tighter padding a little early. */
  @media (min-width: 1601px) and (max-width: 1660px) {
    .comm__align { padding: 0 64px; }
  }

  @media (max-width: 1600px) {
    .comm__align { padding: 0 var(--frame-pad); }
    .comm__container { width: 100%; }
  }

  @media (max-width: 1390px) {
    .comm__row {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto;
      row-gap: 48px;
    }
    .comm__copy { align-self: start; }
    .comm__align { min-height: 0; }
  }

  @media (max-width: 1200px) {
    .comm { padding: 80px 0; }
    .comm__heading { font-size: 36px; line-height: 44px; }
  }

  @media (max-width: 900px) {
    .comm { padding: 64px 0; }
    .comm__checks {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto;
    }
    .comm-check { white-space: normal; }
  }

  @media (max-width: 700px) {
    .comm { --panel-scale: 0.94; }
    .comm__heading { font-size: 28px; line-height: 36px; }
  }

  /* comm panel: scale steps computed so the fixed canvas always fits
     the available column width, verified down to a 320px viewport. */
  @media (max-width: 700px) { .comm { --panel-scale: 0.98; } }
  @media (max-width: 660px) { .comm { --panel-scale: 0.92; } }
  @media (max-width: 620px) { .comm { --panel-scale: 0.85; } }
  @media (max-width: 580px) { .comm { --panel-scale: 0.79; } }
  @media (max-width: 540px) { .comm { --panel-scale: 0.73; } }
  @media (max-width: 500px) { .comm { --panel-scale: 0.66; } }
  @media (max-width: 460px) { .comm { --panel-scale: 0.6; } }
  @media (max-width: 420px) { .comm { --panel-scale: 0.53; } }
  @media (max-width: 380px) { .comm { --panel-scale: 0.47; } }
  @media (max-width: 340px) { .comm { --panel-scale: 0.43; } }

  /* ============================================================
     Military moves — Figma node 66:985
     ============================================================ */
  .mil {
    --mil-scale: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 100px 0;
    /* A 20% black wash over MainNavy, as two stacked fills in the design. */
    background-image:
      linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
      linear-gradient(90deg, var(--mil-bg) 0%, var(--mil-bg) 100%);
  }

  .mil__align {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    flex-shrink: 0;
  }

  .mil__container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: var(--container-max);
    max-width: var(--container-max);
    flex-shrink: 0;
  }

  .mil__row {
    display: flex;
    align-items: flex-start;
    gap: 58px;
    width: 100%;
  }

  .mil__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 0 0;
    min-width: 0;
  }

  .eyebrow--warm { color: var(--accent-warm); }

  .mil__heading {
    margin: 0;
    padding-top: 16px;
    width: 580px;
    max-width: 100%;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 44px;
    line-height: 50.6px;
    color: #ffffff;
    overflow-wrap: break-word;
  }

  .mil__lede {
    margin: 0;
    padding-top: 20px;
    width: 580px;
    max-width: 100%;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 15px;
    line-height: 24.75px;
    color: rgba(255, 255, 255, 0.7);
    overflow-wrap: break-word;
  }

  /* Checklist (120:447): the design pads each row 6px, which is equivalent to
     a 12px row gap plus 6px folded into the block's own padding. */
  .mil__checks {
    display: grid;
    grid-template-columns: 278px 278px;
    column-gap: 50px;
    row-gap: 12px;
    align-items: start;
    box-sizing: border-box;
    min-height: 283px;
    width: 100%;
    margin: 0;
    padding: 34px 0 38px;
    list-style: none;
  }

  .mil-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    color: rgba(255, 255, 255, 0.85);
  }

  .mil-check__mark {
    flex-shrink: 0;
    font-weight: 700;
    color: var(--mil-tick);
  }

  .mil-check__text { width: 260px; max-width: 100%; }

  /* CTA (66:1041 / 66:1035) */
  .mil__cta {
    position: relative;
    width: 100%;
    height: 52.5px;
    flex-shrink: 0;
  }

  .mil-btn {
    position: absolute;
    left: 0;
    top: 0;
    width: 154.125px;
    height: 52.5px;
    background: var(--accent-warm);
    border-radius: 50px;
    transition: background-color 160ms ease, transform 160ms ease;
  }

  .mil-btn:hover { background: #ffb42a; transform: translateY(-1px); }

  .mil-btn__label {
    position: absolute;
    left: 77.5px;
    top: 13px;
    transform: translateX(-50%);
    margin: 0;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 15px;
    line-height: 22.5px;
    text-align: center;
    color: #ffffff;
    white-space: nowrap;
  }

  /* ---- Dashed panel (176:365): fixed 659x599 composition ---- */
  .mil-panel-frame {
    width: calc(659px * var(--mil-scale));
    height: calc(599px * var(--mil-scale));
    flex-shrink: 0;
  }

  .mil-panel {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 659px;
    height: 599px;
    padding: 27px 25px 40px 34px;
    border-radius: 12px;
    transform: scale(var(--mil-scale));
    transform-origin: top left;
  }

  .mil-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px dashed var(--mil-panel-dash);
    border-radius: 12px;
    pointer-events: none;
  }

  .mil-panel__canvas {
    position: relative;
    width: 559.099px;
    height: 464.856px;
    flex-shrink: 0;
  }

  /* Filing-forms card (176:367) */
  .mil-forms {
    position: absolute;
    box-sizing: border-box;
    left: 13.05px;
    top: 47.96px;
    width: 332px;
    height: 410px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 18px;
    background: var(--forms-bg);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    filter: drop-shadow(0 4px 4px rgba(38, 241, 255, 0.3));
  }

  .mil-forms__title {
    margin: 0;
    width: 100%;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 14px;
    line-height: 21px;
    color: var(--main-accent);
    white-space: nowrap;
  }

  .mil-forms__group {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 20px;
    width: 100%;
    flex-shrink: 0;
  }

  .mil-forms__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    width: 100%;
    border-top: 1px solid var(--forms-line);
    flex-shrink: 0;
  }

  .mil-forms__badge {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 4px;
    background: var(--badge-fill);
    border: 1px solid var(--badge-ring);
    border-radius: 50px;
    flex-shrink: 0;
  }

  .mil-forms__label {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    color: var(--main-accent);
    white-space: nowrap;
    flex-shrink: 0;
  }

  .mil-forms__label--pre { white-space: pre; }

  /* Phone shells (176:415 / 176:414) */
  .mil-phone-outer {
    position: absolute;
    box-sizing: border-box;
    left: 312.05px;
    top: 13.96px;
    width: 199px;
    height: 392px;
    background: var(--phone-shell);
    border: 1px solid var(--main-accent);
    border-radius: 24px;
  }

  .mil-phone-inner {
    position: absolute;
    left: 321.05px;
    top: 24.43px;
    width: 181px;
    height: 374px;
    background: var(--main-accent);
    border-radius: 24px;
  }

  /* Digital Inventories lockup (176:416) */
  .mil-inv {
    position: absolute;
    left: 347.55px;
    top: 132.43px;
    width: 133px;
    height: 158px;
  }

  .mil-inv__label {
    position: absolute;
    left: 66.5px;
    top: 100px;
    transform: translateX(-50%);
    margin: 0;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 24px;
    line-height: normal;
    text-align: center;
    color: #ffffff;
    white-space: nowrap;
  }

  .mil-inv__icon {
    position: absolute;
    left: 67px;
    top: 24px;
    transform: translate(-50%, -50%);
    display: block;
    width: 48px;
    height: 48px;
    max-width: none;
  }

  .mil-inv__rule {
    position: absolute;
    left: 0;
    top: 74px;
    width: 133px;
    height: 0;
  }

  .mil-inv__rule > img {
    position: absolute;
    left: 0;
    top: -4px;
    display: block;
    width: 133px;
    height: 4px;
    max-width: none;
  }

  /* Short-fuse chip (176:421) */
  .mil-chip {
    position: absolute;
    left: 146.05px;
    top: 313.96px;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px;
    background: var(--chip-fill);
    border: 1px solid rgba(180, 121, 215, 0.3);
    border-radius: 10px;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.3));
  }

  .mil-chip__label {
    margin: 0;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 24px;
    line-height: normal;
    color: #ffffff;
    white-space: pre;
    flex-shrink: 0;
  }

  /* 16px variant of the multi-size icon-wrapper */
  .icon-wrapper--i16 > img { width: 16px; height: 16px; }

  /* ---- Military responsive ---- */
  @media (max-width: 1600px) {
    .mil__align { padding: 0 var(--frame-pad); }
    .mil__container { width: 100%; }
  }

  @media (max-width: 1280px) {
    .mil__row { flex-direction: column; gap: 48px; }
    .mil__copy { width: 100%; }
  }

  @media (max-width: 1200px) {
    .mil { padding: 80px 0; }
    .mil__heading { font-size: 36px; line-height: 44px; }
  }

  @media (max-width: 900px) {
    .mil { padding: 64px 0; }
    .mil__checks {
      grid-template-columns: minmax(0, 1fr);
      min-height: 0;
      padding: 28px 0 32px;
    }
    .mil-check__text { width: auto; }
  }

  @media (max-width: 720px) {
    .mil { --mil-scale: 0.94; }
    .mil__heading { font-size: 28px; line-height: 36px; }
  }

/* mil panel: scale steps computed so the fixed canvas always fits
     the available column width, verified down to a 320px viewport. */
  @media (max-width: 740px) { .mil { --mil-scale: 0.99; } }
  @media (max-width: 700px) { .mil { --mil-scale: 0.93; } }
  @media (max-width: 660px) { .mil { --mil-scale: 0.86; } }
  @media (max-width: 620px) { .mil { --mil-scale: 0.8; } }
  @media (max-width: 580px) { .mil { --mil-scale: 0.74; } }
  @media (max-width: 540px) { .mil { --mil-scale: 0.68; } }
  @media (max-width: 500px) { .mil { --mil-scale: 0.62; } }
  @media (max-width: 460px) { .mil { --mil-scale: 0.56; } }
  @media (max-width: 420px) { .mil { --mil-scale: 0.5; } }
  @media (max-width: 380px) { .mil { --mil-scale: 0.44; } }
  @media (max-width: 340px) { .mil { --mil-scale: 0.41; } }

  /* ============================================================
     Grid backdrop — shared by the customers band and the news band
     ------------------------------------------------------------
     Two repeating gradients: one draws the verticals, one the
     horizontals. Painted on a ::before at z-index -1 rather than as a
     background-image, so neither band's existing `background` shorthand
     has to be rewritten. `isolation: isolate` gives the band its own
     stacking context, which keeps the -1 layer above the band's own
     background but still behind all of its content.

     --grid-cell is 60px: measured off the reference crops at 34.5px and
     divided back out by their 0.585 scale (cap height of the 40px
     heading came out at 17px in both). ============================== */
  .cust__band,
  .news__band {
    position: relative;
    isolation: isolate;
  }

  .cust__band::before,
  .news__band::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
      repeating-linear-gradient(to right,  var(--grid-line) 0 1px, transparent 1px var(--grid-cell)),
      repeating-linear-gradient(to bottom, var(--grid-line) 0 1px, transparent 1px var(--grid-cell));
  }

  /* Light grey on white. */
  .cust__band {
    --grid-cell: 60px;
    --grid-line: rgba(0, 0, 0, 0.03);
  }

  /* White on the accent blue — needs more alpha to read at the same weight. */
  .news__band {
    --grid-cell: 60px;
    --grid-line: rgba(255, 255, 255, 0.06);
  }

  @media (prefers-contrast: more) {
    .cust__band::before,
    .news__band::before { display: none; }
  }

  /* ============================================================
     Customers marquee — Figma node 66:1070 / 92:948
     ============================================================ */
  .cust {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .cust__band {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 131px 0;
    width: 100%;
    background: #ffffff;
  }

  .cust__align {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    flex-shrink: 0;
  }

  .cust__container {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: var(--container-max);
    max-width: var(--container-max);
    padding: 0 40px;
    flex-shrink: 0;
  }

  .eyebrow--center {
    width: 100%;
    text-align: center;
  }

  .heading-40 {
    margin: 0;
    padding-top: 16px;
    width: 100%;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 40px;
    line-height: 50px;
    text-align: center;
    color: var(--deep-ink);
    white-space: nowrap;
  }

  /* ---- Marquee (92:955) ---- */
  .marquee {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 113px;
    padding-top: 48px;
    width: 1420px;
    max-width: 100%;
    flex-shrink: 0;
  }

  .marquee__rows {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
  }

  .marquee-row {
    position: relative;
    height: 22.5px;
    width: 100%;
    overflow: hidden;
  }

  /* The design captures a single frame of a scrolling row: the track is
     pre-offset by -794.8px / -1262.32px. Here the item list is duplicated and
     translated a full copy, so the negative delays below land the first
     painted frame on exactly those offsets. */
  .marquee-row__track {
    display: flex;
    align-items: flex-start;
    height: 23px;
    width: max-content;
    animation-name: marquee-scroll;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    will-change: transform;
  }

  @keyframes marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }

  /* Track 4007px, offset -794.8px = 19.835% -> -19.835% of 55s */
  .marquee-row--a .marquee-row__track {
    animation-duration: 55s;
    animation-delay: -10.909s;
  }

  /* Track 4185px, offset -1262.32px = 30.163% -> -30.163% of 70s */
  .marquee-row--b .marquee-row__track {
    animation-duration: 70s;
    animation-delay: -21.114s;
  }

  .marquee-row:hover .marquee-row__track,
  .marquee-row:focus-within .marquee-row__track { animation-play-state: paused; }

  .marquee-item {
    display: flex;
    align-items: center;
    gap: 20px;
    height: 100%;
    padding: 0 20px;
    flex-shrink: 0;
  }

  .marquee-item__name {
    margin: 0;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 15px;
    line-height: 22.5px;
    color: var(--marquee-muted);
    white-space: nowrap;
  }

  .marquee-item__name--navy { color: var(--deep-ink); }
  .marquee-item__name--lg { font-size: 20px; }

  .marquee-item__dot {
    margin: 0;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 6px;
    line-height: 9px;
    color: var(--stat-hairline);
    white-space: nowrap;
    flex-shrink: 0;
  }

  .btn--accent {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    border-radius: 50px;
    background: var(--main-accent);
    color: #ffffff;
    font-weight: 700;
  }

  .btn--accent:hover { background: #3454dd; transform: translateY(-1px); }
  .btn--accent:active { transform: translateY(0); }

  /* Frozen at the design's captured offsets when motion is reduced. */
  @media (prefers-reduced-motion: reduce) {
    .marquee-row--a .marquee-row__track { transform: translateX(-794.8px); }
    .marquee-row--b .marquee-row__track { transform: translateX(-1262.32px); }
  }

  /* ---- Customers responsive ---- */
  @media (max-width: 1440px) {
    .cust__container { width: 100%; }
  }

  @media (max-width: 1200px) {
    .cust__band { padding: 96px 0; }
    .heading-40 { font-size: 34px; line-height: 44px; }
  }

  @media (max-width: 900px) {
    .cust__band { padding: 72px 0; }
    .cust__container { padding: 0 24px; }
    .heading-40 { font-size: 28px; line-height: 38px; white-space: normal; }
  }

  @media (max-width: 600px) {
    .heading-40 { font-size: 24px; line-height: 32px; }
    .marquee { height: auto; padding-top: 40px; }
  }

  /* ============================================================
     Testimonials — Figma node 66:1115
     ============================================================ */
  .testi {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 80px 0;
    background: var(--surface-tint);
          background-image: radial-gradient(70.95% 48.28% at 50% 0%, rgba(65, 101, 245, 0.116) 0%, rgba(113, 140, 248, 0.137) 25%, rgba(160, 178, 250, 0.158) 50%, rgba(208, 217, 253, 0.179) 75%, rgba(255, 255, 255, 0.2) 100%), linear-gradient(90deg, #ffffff 0%, #ffffff 100%);
  }

  .testi__align {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    flex-shrink: 0;
  }

  .testi__container {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: var(--container-max);
    max-width: var(--container-max);
    padding: 0 40px;
    flex-shrink: 0;
  }

  .testi__intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }

  .testi__row {
    display: flex;
    align-items: center;
    gap: 24px;
    width: 100%;
    padding-top: 48px;
  }

  /* 40 + 24 + 1112 + 24 + 40 = 1240, the container's content width. */
  .testi__nav {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: var(--main-accent);
    border: 1px solid var(--stat-hairline);
    border-radius: 20px;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 18px;
    line-height: 27px;
    text-align: center;
    color: #fff;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 160ms ease, border-color 160ms ease;
  }

  .testi__nav:hover {
    background: var(--surface-tint);
    border-color: var(--deep-ink);
  }

  .testi-card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1112 0 0;
    min-width: 0;
    margin: 0;
    padding: 52px 64px;
    background: #ffffff;
    border: 1px solid var(--testi-card-line);
    border-radius: 14px;
  }

  .testi-card__quote {
    margin: 0;
    width: 982px;
    max-width: 100%;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 18px;
    line-height: 29.7px;
    text-align: center;
    color: var(--deep-ink);
    overflow-wrap: break-word;
  }

  .testi-card__meta {
    width: 982px;
    max-width: 100%;
  }

  .testi-card__name {
    margin: 0;
    padding-top: 32px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 15px;
    line-height: 22.5px;
    text-align: center;
    color: var(--deep-ink);
  }

  .testi-card__role {
    margin: 0;
    padding-top: 4px;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 13px;
    line-height: 19.5px;
    text-align: center;
    color: var(--marquee-muted);
  }

  .testi__dots {
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    height: 36px;
    width: 100%;
    padding-top: 28px;
  }

  .testi__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    background: var(--stat-hairline);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 160ms ease;
  }

  .testi__dot[aria-current="true"] { background: var(--segment-rule-commercial); }

  .testi__dot:hover { background: var(--deep-ink); }

  /* ---- Carousel mechanics ----
     The viewport takes the slot the single card used to occupy; the track
     holds every .testi-card side by side and slides horizontally. Slides
     stretch to a common height so the section never jumps between reviews. */
  .testi__viewport {
    flex: 1112 0 0;
    min-width: 0;
    overflow: hidden;
    border-radius: 14px;
    touch-action: pan-y;
  }

  .testi__track {
    display: flex;
    align-items: stretch;
    width: 100%;
    transition: transform 480ms cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
  }

  .testi__viewport.is-dragging .testi__track { transition: none; }

  .testi__track .testi-card {
    flex: 0 0 100%;
    width: 100%;
    justify-content: center;
  }

  /* ---- Slide-change animation ----
     Every rule here is scoped to .testi--ready, a class the script adds once
     it has taken control. Without JavaScript none of it applies and the first
     review renders exactly as it did before. */

  /* The card that is leaving dims; the one arriving comes back up to full. */
  .testi--ready .testi-card {
    transition: opacity 320ms ease, box-shadow 320ms ease;
  }

  .testi--ready .testi-card:not(.is-active) { opacity: 0.35; }

  .testi--ready .testi-card.is-active {
    box-shadow: 0 10px 30px rgba(26, 60, 110, 0.08);
  }

  /* Quote and attribution lift into place, attribution a beat behind. */
  .testi--ready .testi-card__quote,
  .testi--ready .testi-card__meta {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 200ms ease, transform 200ms ease;
  }

  .testi--ready .testi-card.is-active .testi-card__quote,
  .testi--ready .testi-card.is-active .testi-card__meta {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 460ms ease, transform 460ms cubic-bezier(0.2, 0.7, 0.3, 1);
  }

  .testi--ready .testi-card.is-active .testi-card__quote { transition-delay: 140ms; }
  .testi--ready .testi-card.is-active .testi-card__meta  { transition-delay: 230ms; }

  /* While a finger is dragging, show the incoming copy immediately —
     the reader is pulling it into view, so it should not be mid-fade. */
  .testi__viewport.is-dragging .testi-card__quote,
  .testi__viewport.is-dragging .testi-card__meta {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* ---- Dots ----
     The active dot stretches into a pill. With autoplay running it also acts
     as a progress bar for the time left on the current review. */
  .testi--ready .testi__dot {
    position: relative;
    overflow: hidden;
    transition: width 340ms cubic-bezier(0.2, 0.7, 0.3, 1), background-color 200ms ease;
  }

  .testi--ready .testi__dot[aria-current="true"] { width: 30px; }

  .testi__dot-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: var(--segment-rule-commercial);
    transform: scaleX(0);
    transform-origin: left center;
    pointer-events: none;
  }

  .testi--autoplay .testi__dot[aria-current="true"],
  .testi--autoplay .testi__dot[aria-current="true"]:hover {
    background: var(--stat-hairline);
  }

  .testi--autoplay .testi__dot[aria-current="true"] .testi__dot-fill {
    animation: testi-dot-fill var(--testi-autoplay, 8000ms) linear forwards;
  }

  .testi--autoplay.is-paused .testi__dot[aria-current="true"] .testi__dot-fill {
    animation-play-state: paused;
  }

  @keyframes testi-dot-fill {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }

  @media (prefers-reduced-motion: reduce) {
    .testi__track { transition: none; }

    .testi--ready .testi-card,
    .testi--ready .testi-card__quote,
    .testi--ready .testi-card__meta,
    .testi--ready .testi__dot { transition: none; }

    .testi--ready .testi-card:not(.is-active) { opacity: 1; }

    .testi--ready .testi-card__quote,
    .testi--ready .testi-card__meta {
      opacity: 1;
      transform: none;
    }

    .testi__dot-fill { animation: none; }
  }

  /* ---- Testimonials responsive ---- */
  @media (max-width: 1440px) {
    .testi__container { width: 100%; }
  }

  @media (max-width: 1000px) {
    .testi-card { padding: 40px; }
  }

  @media (max-width: 900px) {
    .testi { padding: 64px 0; }
    .testi__container { padding: 0 24px; }
    .testi__row { gap: 12px; padding-top: 36px; }
  }

  @media (max-width: 700px) {
    .testi-card { padding: 28px 20px; }
    .testi-card__quote { font-size: 16px; line-height: 26px; }
    .testi__nav { width: 32px; height: 32px; font-size: 16px; }
    .testi-card__name { padding-top: 24px; }
  }

  /* ============================================================
     Latest news — Figma node 109:1268
     ============================================================ */
  .news {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: var(--main-accent);
  }

  .news__band {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 131px 0;
    width: 100%;
  }

  .news__align {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    flex-shrink: 0;
  }

  .news__container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: var(--container-max);
    max-width: var(--container-max);
    flex-shrink: 0;
  }

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

  .heading-40--on-dark { color: #ffffff; }

  /* The heading block is a fixed 116px against a single 50px line, which is
     what puts ~50px of air between the title and the cards. */
  .news__heading-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 116px;
    width: 100%;
    flex-shrink: 0;
  }

  /* One filter on the row shadows each card shape individually. */
  .news__cards {
    display: flex;
    align-items: flex-start;
    gap: 25px;
    width: var(--container-max);
    max-width: var(--container-max);
    margin: 0;
    padding: 0;
    list-style: none;
    filter: drop-shadow(5px 4px 2px rgba(0, 0, 0, 0.16));
  }

  .news-card {
    --news-angle: 20.328deg;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    flex: 1 0 0;
    min-width: 0;
    min-height: 250px;
    padding: 35px;
    border-top: 8px solid var(--news-rule);
    border-radius: 15px;
    background-image:
      linear-gradient(var(--news-angle),
        rgba(255, 255, 255, 0.2) 50.494%,
        rgba(245, 158, 11, 0.2) 108.43%),
      linear-gradient(90deg, #ffffff 0%, #ffffff 100%);
  }

  /* Card three carries a slightly different angle in the design. */
  .news-card--c { --news-angle: 19.737deg; }

  .news-card__date {
    margin: 0;
    width: 100%;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 12px;
    line-height: normal;
    color: var(--pill-ink);
    white-space: nowrap;
  }

  .news-card__title {
    margin: 0;
    width: 100%;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 18px;
    line-height: 20px;
    color: var(--table-ink);
    overflow-wrap: break-word;
  }

  .news-card__body {
    margin: 0;
    width: 100%;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--news-body);
    overflow-wrap: break-word;
  }

  .news-card__link {
    width: 324px;
    max-width: 100%;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 12px;
    line-height: 19.5px;
    color: var(--main-accent);
    transition: color 160ms ease;
  }

  .news-card__link:hover {
    color: var(--pill-ink);
    text-decoration: underline;
  }

  /* ---- News responsive ---- */
  @media (max-width: 1440px) {
    .news__align { padding: 0 var(--frame-pad); }
    .news__container,
    .news__cards { width: 100%; }
  }

  @media (max-width: 1200px) {
    .news__band { padding: 96px 0; }
    .news__cards { gap: 16px; }
    .news-card { padding: 28px; }
  }

  @media (max-width: 900px) {
    .news__band { padding: 72px 0; }
    .news__cards { flex-direction: column; }
    .news-card { width: 100%;  }
  }

  /* ============================================================
     Awards & recognitions — Figma node 66:784
     ============================================================ */
  .awards {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 80px 0 40px;
    background: #ffffff;
  }

  .awards__align {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    flex-shrink: 0;
  }

  .awards__container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: var(--container-max);
    max-width: var(--container-max);
    flex-shrink: 0;
  }

  .awards__body {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    width: 100%;
    min-height: 429px;
    margin-top: 48px;
  }

  .awards__intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 565px;
    min-height: 360px;
    flex-shrink: 0;
    border-radius: 12px;
  }

  .awards__intro-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 17px;
    width: 419px;
    max-width: 100%;
    color: var(--deep-ink);
  }

  .awards__heading {
    margin: 0;
    width: 100%;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 38px;
    line-height: 57px;
    overflow-wrap: break-word;
  }

  .awards__lede {
    width: 410px;
    max-width: 100%;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 14px;
  }

  .awards__lede p {
    margin: 0;
    line-height: normal;
  }

  .awards__list {
    flex: 1 0 0;
    min-width: 0;
  }

  /* Genuinely tabular. The design's 20px row inset plus the 100px year column
     become a single 120px first track; the 10px flex gap between row blocks is
     reproduced as 10px above and below each cell, so the rule sits 10px under
     one row's text and 10px above the next. */
  .awards-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-family: var(--font-body);
    color: var(--deep-ink);
  }

  .awards-table th,
  .awards-table td {
    text-align: left;
    vertical-align: top;
  }

  .awards-table th:first-child,
  .awards-table td:first-child { padding-left: 20px; }

  .awards-table thead tr { border-bottom: 1px solid var(--awards-head-line); }

  .awards-table thead th {
    padding-bottom: 6px;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    white-space: nowrap;
  }

  .awards-table tbody tr { border-bottom: 1px solid var(--awards-row-line); }

  .awards-table tbody th {
    padding: 10px 0;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    white-space: nowrap;
  }

  .awards-table tbody td {
    padding: 10px 0;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    white-space: nowrap;
  }

  /* ---- Awards responsive ---- */
  @media (max-width: 1440px) {
    .awards__align { padding: 0 var(--frame-pad); }
    .awards__container { width: 100%; }
  }

  @media (max-width: 1200px) {
    .awards__intro { width: 460px; }
    .awards__heading { font-size: 30px; line-height: 44px; }
    .awards-table tbody td { white-space: normal; }
  }

  @media (max-width: 1000px) {
    .awards__body {
      flex-direction: column;
      gap: 32px;
      min-height: 0;
      margin-top: 36px;
    }
    .awards__intro { width: 100%; min-height: 0; }
    .awards__list { width: 100%; }
  }

  @media (max-width: 600px) {
    .awards__heading { font-size: 26px; line-height: 36px; }
    .awards-table th:first-child,
    .awards-table td:first-child { padding-left: 0; }
  }

 /* @media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
  }*/