/* 2.4.6 — literal sweep: a literal whose value IS a token became it; the rest is a value this
   file paints by hand and is counted in the report. The names are global-2026.css's own aliases (2.4.2); a value only the system holds is written --pui-*. */
    /* ── Design Tokens ─────────────────────────────────────────── */
    :root {


      --shadow-hero: 0px 23px 132.287px -14px rgba(14,16,30,0.66);

      /* font sizes */
      --fs-headline-md: clamp(32px, 3vw, 45px);

      --max-w: 1296px;
      --side-pad: clamp(16px, 7.14vw, 108px);
    }

    /* Jul 2026 review: the local `PoppinsRegular` @font-face that used to live here
       was removed. It loaded ONE face (Poppins-Regular.ttf = weight 400), so every
       `font-weight: 500` / `600` on this page silently fell back to 400 — this page
       rendered visibly lighter than the rest of the site (caught on the "Email us"
       line, which looked thinner here than the identical line on MAFO / iRTB /
       Careers). The page now uses the global Poppins that layout-new already loads
       from Google Fonts with all nine weights, like every other 2026 page. */

    /* ── Reset ─────────────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    /* html keeps the global `overflow-x: clip` from global-2026.css. The July
       override to `visible` (meant for the sticky .cap-stack cards, which stick
       fine under the clip) let the hero gradient and the contact blob widen the
       document: on mobile/responsive emulation the layout viewport then grew to
       ~1390px and the whole page rendered scaled down. */
    html { scroll-behavior: smooth; }
    body {
      font-family: var(--pui-font-family-poppins);
       font-weight: var(--pui-font-weight-400);
       color: var(--pui-color-neutral-900);
        /* `clip` (not `hidden`) clips the wide hero/CTA gradients horizontally WITHOUT
           making <body> a scroll container. `overflow-x: hidden` forces overflow-y to
           compute to `auto` (CSS spec), which turned <body> into a scroller that counted
           the footer-blob's 30px overhang as extra height — an empty band below the footer
           on very wide / zoomed-out screens. `clip` keeps overflow-y `visible`, so no band. */
        background: var(--pui-color-neutral-0); overflow-x: clip;
       }
    img { display: block; max-width: 100%; }
    button, input, select, textarea { font-family: inherit; }
    a { text-decoration: none; color: inherit; }


    /* ── Layout helpers ─────────────────────────────────────────── */
    .container {
      width: 100%;
      max-width: calc(var(--max-w) + var(--side-pad) * 2);
      margin: 0 auto;
      padding-left: var(--side-pad);
      padding-right: var(--side-pad);
    }

    /* ═══════════════════════════════════════════════════════════
       ENQUIRE MORE BUTTON — animated
    ═══════════════════════════════════════════════════════════ */
    /* Matches the home-2026 .btn.btn--dark hero CTA exactly (text-only,
       compact, subtle background hover — no arrow animation). */
/* P2 — the black Enquire button and its hover are .pui-button — button.css draws the same 8/16 at radius 8 */


    /* Small "Enquire more" button (no animation — in description) */
/* P2 — the small one is .pui-button--small; its own hover was an opacity fade, the Button's is action/primary/bg-hover */

    /* ═══════════════════════════════════════════════════════════
       HERO
    ═══════════════════════════════════════════════════════════ */
    .hero {
      position: relative;
      overflow: hidden;
      /* No min-height: the old 1500px floor (from the video era) left a
         variable empty band before the stats on tablet widths, where the
         scaled browser window makes the hero shorter than 1500. */
      padding-top: 115px;
    }
    .hero-bg {
      position: absolute;
      /* Centre the static gradient horizontally so the centred white Echo AI
         logo always sits over the gradient's coloured core. Fixes very wide /
         zoomed-out screens where the old left-pinned bg drifted off-centre and
         the white logo washed out over the light edge. */
      top: -653px; left: 50%;
      transform: translateX(-50%);
      width: 1694.94px; height: 1450.919px;
      pointer-events: none;
      z-index: 0;
    }
    .hero-bg img { width: 100%; height: 100%; }

    .hero-content {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
    .hero-logo-wrap {
      margin-top: 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 17px;
    }
    .hero-logo-img {
      display: inline-block;
    }
    .hero-logo-img img {
      height: 164.858px;
      width: auto;
      display: block;
    }
    .hero-powered {
      font-size: var(--pui-font-size-28);
      font-weight: var(--pui-font-weight-400);
      color: var(--pui-color-neutral-0);
    }
    .hero-tagline {
      margin-top: 54px;
      font-size: var(--fs-headline-md);
      font-weight: 300;
      color: var(--pui-color-neutral-800);
      text-align: center;
      white-space: nowrap;
    }
    .hero-cta-wrap {
      margin-top: 45px;
    }
    /* ── Hero showcase — browser-window slider (shared product showcase) ──
       The shared showcase component from the MAFO / iRTB / MobuppsX product
       pages, in its browser-window chassis at EVERY breakpoint (the laptop
       chassis is not used here). Every part is a Figma px multiplied by --bu,
       one 770th of the stage width, so a single definition covers all widths:
       at the 1296px desktop container --bu = 1.6831 and the toolbar lands on
       Figma's 44px, the frame on its 32px radius / 2px stroke and the content
       area on 1296 x 729 (16:9, the slides' own aspect — nothing is cropped).
       The slide deck, its cross-fade and the chrome icons are the same as on
       the other three product pages. */
    .hero-showcase {
      margin-top: 57px;           /* CTA -> window, Figma 514 -> 571 */
      width: 100%;
      max-width: var(--max-w);
      container-type: inline-size;
    }
    .hero-showcase .showcase-device {
      --bu: calc(100cqw / 770);   /* 1 browser-window design px */
      position: relative;
      /* Own stacking context, so the stroke overlay (::after, z-index 3) stays
         inside the window and never paints over the glass card that overlaps
         the window's bottom edge (card = z-index 2 in the hero context). */
      isolation: isolate;
      z-index: 1;
      display: flex;
      flex-direction: column;
      border-radius: calc(19.0123 * var(--bu));
      overflow: hidden;
      box-shadow: 0 calc(19.0123 * var(--bu)) calc(38.0247 * var(--bu)) 0 var(--pui-color-alpha-black-14);
    }
    /* Frame stroke as an overlay, not a border: Figma lays the chrome over the
       stroked frame, so the stroke must not eat into the toolbar and screen
       heights (26.14 + 0.59 + 433.13 has to add up to 459.86 exactly). */
    .hero-showcase .showcase-device::after {
      content: "";
      position: absolute;
      inset: 0;
      border: calc(1.1883 * var(--bu)) solid var(--pui-illustration-chrome-line);   /* D — the browser window's chrome (var(--pui-illustration-chrome-line), var(--pui-illustration-chrome-bar), var(--pui-illustration-chrome-well), var(--pui-illustration-chrome-text), the three lights) is a device illustration; no token holds it — stated, request 20 */
      border-radius: inherit;
      pointer-events: none;
      z-index: 3;
    }

    .hero-showcase .browser__bar {
      display: flex;
      align-items: center;
      flex: 0 0 auto;
      box-sizing: content-box;   /* toolbar 26.14 + its 0.59 divider = Figma 44 + 1 */
      height: calc(26.14 * var(--bu));
      padding: 0 calc(8.3179 * var(--bu));
      background: var(--pui-illustration-chrome-bar);
      border-bottom: calc(0.59 * var(--bu)) solid var(--pui-illustration-chrome-line);
    }
    .hero-showcase .browser__lights {
      display: flex;
      align-items: center;
      flex: 0 0 calc(40.4 * var(--bu));
      gap: calc(4.7531 * var(--bu));
    }
    .hero-showcase .browser__lights i {
      width: calc(7.7238 * var(--bu));
      height: calc(7.7238 * var(--bu));
      border-radius: 50%;
    }
    .hero-showcase .browser__lights i:nth-child(1) { background: var(--pui-illustration-chrome-light-red); }
    .hero-showcase .browser__lights i:nth-child(2) { background: var(--pui-illustration-chrome-light-amber); }
    .hero-showcase .browser__lights i:nth-child(3) { background: var(--pui-illustration-chrome-light-green); }

    .hero-showcase .browser__nav,
    .hero-showcase .browser__tools {
      display: flex;
      align-items: center;
      flex: 0 0 auto;
      gap: calc(3.5648 * var(--bu));
    }
    .hero-showcase .browser__nav   { padding: 0 calc(5.9414 * var(--bu)) 0 calc(3.5648 * var(--bu)); }
    .hero-showcase .browser__tools { padding-left: calc(5.9414 * var(--bu)); }
    .hero-showcase .browser__btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: calc(13.07 * var(--bu));
      height: calc(13.07 * var(--bu));
    }
    .hero-showcase .browser__btn .pui-icon { width: auto; height: auto; max-width: none; }
    .hero-showcase .browser__nav .browser__btn:nth-child(1) .pui-icon,
    .hero-showcase .browser__nav .browser__btn:nth-child(2) .pui-icon {
      width: calc(5.9414 * var(--bu));
      height: calc(8.3179 * var(--bu));
    }
    .hero-showcase .browser__nav .browser__btn:nth-child(3) .pui-icon {
      width: calc(7.7238 * var(--bu));
      height: calc(7.7238 * var(--bu));
    }
    .hero-showcase .browser__tools .browser__btn:nth-child(1) .pui-icon,
    .hero-showcase .browser__tools .browser__btn:nth-child(2) .pui-icon {
      width: calc(8.3179 * var(--bu));
      height: calc(8.3179 * var(--bu));
    }
    .hero-showcase .browser__tools .browser__btn:nth-child(3) .pui-icon {
      width: calc(8.3179 * var(--bu));
      height: calc(5.9414 * var(--bu));
    }

    .hero-showcase .browser__url {
      display: flex;
      align-items: center;
      flex: 1 1 auto;
      min-width: 0;
      height: calc(15.4475 * var(--bu));
      padding: 0 calc(5.9414 * var(--bu));
      gap: calc(4.7531 * var(--bu));
      background: var(--pui-illustration-chrome-well);
      border-radius: calc(7.7238 * var(--bu));
    }
    .hero-showcase :where(.browser__url) > .pui-icon { flex: 0 0 auto; max-width: none; }
    .hero-showcase :where(.browser__url) > .pui-icon:first-child {
      width: calc(5.9414 * var(--bu));
      height: calc(7.1296 * var(--bu));
    }
    .hero-showcase :where(.browser__url) > .pui-icon:last-child {
      width: calc(7.1296 * var(--bu));
      height: calc(7.1296 * var(--bu));
    }
    /* Browser chrome, so it takes the platform UI face rather than the page's
       Poppins — Figma specifies Inter, which the site does not load. */
    .hero-showcase .browser__url-text {
      flex: 1 1 auto;
      min-width: 0;
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
      font-weight: var(--pui-font-weight-400);
      font-size: calc(7.1296 * var(--bu));
      line-height: 1;
      text-align: center;
      color: var(--pui-illustration-chrome-text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* 770 x 433.13 = the Figma window's 1296 x 729 content area, exactly 16:9,
       so the shared slide rule (inset 0 / cover) fills it without a crop. */
    .hero-showcase .showcase-screen {
      position: relative;   /* the slides' containing block */
      width: auto;
      height: calc(433.13 * var(--bu));
      flex: 0 0 auto;
      background: var(--pui-color-neutral-0);
      overflow: hidden;
      isolation: isolate;
    }
    .hero-showcase .showcase-slides { position: absolute; inset: 0; }
    .hero-showcase .showcase-slide {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      max-width: none;
      object-fit: cover;
      opacity: 0;
      z-index: 0;
      transition: opacity 900ms var(--pui-motion-easing);   /* D — the easing by name (CSS ease is the kit's standard curve); 900 ms is the slideshow's own cross-fade, three times the longest motion token — stated */
    }
    /* The outgoing slide holds full opacity underneath while the incoming one
       fades in over it — fading both at once lets the white screen wash
       through the middle of the transition. */
    .hero-showcase .showcase-slide.is-leaving { opacity: 1; z-index: 1; transition: none; }
    .hero-showcase .showcase-slide.is-active { opacity: 1; z-index: 2; }
    @media (prefers-reduced-motion: reduce) {
      .hero-showcase .showcase-slide { transition: none; }
    }

    /* Glass description card — 50px in from the content edge, overlapping the
       browser window's bottom edge by 84px (Figma 1261 vs 1345). Every length
       is a Figma px times --hu, one 1296th of the hero content column, so the
       composition keeps its proportions when the column is narrower than 1296
       (a fixed 636px card swallowed the scaled-down window at ~1050). At the
       full 1296 column every value lands on the Figma integer. */
    .hero-content { container-type: inline-size; }
    .hero-desc-card {
      --hu: calc(100cqw / 1296);
      margin-top: calc(-84 * var(--hu));
      margin-left: calc(50 * var(--hu));
      align-self: flex-start;
      width: calc(636 * var(--hu));
      padding: calc(35 * var(--hu)) calc(59 * var(--hu));
      border-radius: var(--pui-radius-16);
      backdrop-filter: blur(18.2px);
      background: linear-gradient(136.78deg, color-mix(in srgb, var(--pui-color-blue-400) 51%, transparent) 30.59%, rgba(242,66,136,0.51) 125.66%);
      box-shadow: var(--pui-elevation-modal);
      position: relative;
      z-index: 2;
    }
    .hero-desc-card p {
      font-size: clamp(20px, calc(28 * var(--hu)), 28px);
      font-weight: var(--pui-font-weight-400);
      color: var(--pui-color-neutral-0);
      line-height: var(--pui-font-line-height-relaxed);
      font-family: var(--pui-font-family-poppins);
      text-align: left;
      margin-bottom: 0;   /* bootstrap's p margin made the card 254 tall; Figma is 239 */
    }

    /* Description text below */
    .hero-desc-text {
      --hu: calc(100cqw / 1296);
      margin-top: calc(43 * var(--hu));   /* card bottom 1500 -> text 1543 */
      margin-bottom: var(--pui-space-80);
      margin-left: calc(50 * var(--hu));
      width: calc(636 * var(--hu));
      text-align: left;
      align-self: flex-start;
    }
    .hero-desc-text p {
      font-family: var(--pui-font-family-poppins);   /* was an empty `font-family: ;` — invalid, dropped by the parser */
      font-size: var(--pui-type-body-medium-font-size);
      font-weight: var(--pui-font-weight-400);
      color: var(--pui-color-neutral-900);
      line-height: 1.6;
      margin-bottom: var(--pui-space-12);
    }

    /* ═══════════════════════════════════════════════════════════
       STATS
    ═══════════════════════════════════════════════════════════ */
    .stats-section {
      padding: var(--pui-space-80) 0;
    }
    :where(.stats-section) .pui-text--headline-small {
      color: var(--pui-text-default);
      margin-bottom: 43px;
    }
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--pui-space-20);
    }
    @media (min-width: 1024px) {
      .stats-grid { grid-template-columns: 1fr 320px 1fr 1fr; }   /* C2 — Fedor, 2026-09-25: the E-commerce tile (the second) is 320 at desktop so its tag stays beside the value; the other three share the rest — his number, stated */
    }
    .stats-grid > * { min-height: 193px; }   /* the row's height is the grid's — the site's number; the tile itself (.pui-kpi-tile) is the kit's, untouched (2026-10-05) */
/* A2 — the tint is the tile's tone (kpi/tone/{tone}/bg); below the desktop width the kit stacks the tile's top row itself (request 42) */
/* A2 — the tag's tint and ink are tint/{tone} */


    /* ═══════════════════════════════════════════════════════════
       THE PROBLEM
    ═══════════════════════════════════════════════════════════ */
    .problem-section {
      padding: var(--pui-space-80) 0;
    }
    :where(.problem-section) .pui-text--headline-small {
      font-size: var(--pui-font-size-40);
      color: var(--pui-text-default);
      margin-bottom: 35px;
    }
    .problem-cards {
      display: flex;
      flex-wrap: wrap;
      gap: var(--pui-space-48);
      margin-bottom: var(--pui-space-64);
    }
    .problem-cards > .pui-card { background: var(--pui-color-neutral-800); color: var(--pui-text-on-inverse); flex: 1 1 380px; max-width: 420px; }   /* the Card on the dark ground: neutral/800 under text/on-inverse (the difference from the basic Card is the colour) */
    .problem-solution {
      border-radius: var(--pui-radius-16);
      background: linear-gradient(165.42deg, var(--pui-color-blue-300) 30.59%, var(--pui-color-gradient-stop-pink) 125.66%);
      padding: 32px 43px;
      display: flex;
      align-items: center;
      gap: 43px;
      box-shadow: var(--pui-elevation-modal);
    }
    .problem-solution-logo {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      height: 70.803px;
    }
    .problem-solution-logo img {
      height: 70.803px;
      width: auto;
    }
    :where(.problem-solution) > .pui-text--title-small {
      color: var(--pui-color-neutral-0);
      flex: 1;
    }

    /* ═══════════════════════════════════════════════════════════
       CORE CAPABILITIES — Stacking Cards
    ═══════════════════════════════════════════════════════════ */
    .capabilities-section {
      padding-top: var(--pui-space-80);
      padding-bottom: var(--pui-space-80);
    }
    :where(.capabilities-section) .pui-text--headline-small {
      color: var(--pui-text-default);
      margin-bottom: 41px;
    }

    .cap-stack-outer {
      position: relative;
    }
    .cap-stack {
      position: relative;
      padding-bottom: var(--pui-space-80);
    }
    .cap-stack > .pui-card {
      container-type: inline-size;   /* --mu on .cap-card-media reads 50cqw of this card */
      position: sticky;
      top: 90px;
      width: 100%;
      max-width: var(--max-w);
      margin-left: auto;
      margin-right: auto;
      margin-bottom: var(--pui-space-20);   /* D — space/20 by name */
      flex-direction: row;
      box-shadow: var(--pui-elevation-modal);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: var(--pui-space-32);   /* D — space/32 by name; the sticky offsets (90 … 170), the min-heights (343 / 414) and the widths (477 / 653 / 538 / 1250) are the stack's own geometry — no token holds a layout measure; stated */
      min-height: 343px;
      transform-origin: top center;
      will-change: transform;
    }
    .cap-stack > .pui-card:nth-child(2) { top: 110px; }
    .cap-stack > .pui-card:nth-child(3) { top: 130px; }
    .cap-stack > .pui-card:nth-child(4) { top: 150px; }
    .cap-stack > .pui-card:nth-child(5) { top: 170px; }
    .cap-stack > .pui-card:last-child { min-height: 414px; margin-bottom: 0;}

    .cap-card-text {
      width: 477px;
      max-width: 48%;
      display: flex;
      flex-direction: column;
      gap: var(--pui-space-12);   /* D — space/12 by name */
    }
    .cap-card-text > .pui-text--title-small {
      color: var(--pui-text-default);
    }
    .cap-card-text > .pui-text--body-medium {
      color: var(--pui-text-default);
    }
    .cap-card-media {
      /* Proportional composition (Fedor, Sep 4 2026). The DESKTOP RENDER is the source
         of truth — a 616×279 tinted box (50% of the card's content width), a 538×255
         screenshot window at (39, 51) that runs 27px past the bottom edge and is cut
         there — and it scales as ONE unit on tablet + mobile. --mu = box width ÷ 616,
         measured against the card (.cap-stack > .pui-card / .tab-panel are the query containers),
         so it is exactly 1px at desktop; every inner value below is a Figma px × --mu. */
      --mu: calc(min(653px, 50cqw) / 616);
      width: 653px;
      max-width: 50%;
      aspect-ratio: 616 / 279;
      height: auto;
      border-radius: calc(16 * var(--mu));
      overflow: hidden;
      position: relative;
      flex-shrink: 0;
    }
    .cap-stack > .pui-card:last-child .cap-card-media {
      height: auto;
      aspect-ratio: auto;
      border-radius: var(--pui-radius-16);
      align-self: stretch;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .cap-card-media .media-bg {
      position: absolute;
      inset: 0;
      border-radius: calc(16 * var(--mu));
    }
    .cap-card-media .media-bg img {
      width: 100%; height: 100%;
      object-fit: cover;
      position: absolute; inset: 0;
    }
    .cap-card-media .media-overlay {
      position: absolute; inset: 0;
      border-radius: calc(16 * var(--mu));
    }
    .cap-card-media .media-screenshot {
      position: absolute;
      left: calc(39 * var(--mu));
      top: calc(51 * var(--mu));
      width: calc(538 * var(--mu));
      height: calc(255 * var(--mu));
      border-radius: calc(8 * var(--mu));
      box-shadow: 0 calc(25 * var(--mu)) calc(37.7 * var(--mu)) calc(10 * var(--mu)) rgba(18,12,41,0.11);   /* D — a shadow that scales with the composition (--mu); the elevation ladder is fixed-size — stated */
      overflow: hidden;
    }
    .cap-card-media .media-screenshot img {
      width: 100%; height: 100%; object-fit: cover;
      object-position: 50% 0;   /* 16:9 slides in a 2.1:1 window — keep the dashboard top bar, crop the bottom */
    }

    /* Slide 1: pink */
    /* Slide 2: yellow */
    .cap-stack > .pui-card[data-slide="2"] .media-overlay { background: var(--pui-color-yellow-200); }
    /* Slide 3: purple */
    .cap-stack > .pui-card[data-slide="3"] .media-overlay { background: var(--pui-color-blue-200); }
    /* Slide 4: gray */
    .cap-stack > .pui-card[data-slide="4"] .media-overlay { background: var(--pui-color-neutral-200); }
    /* Slide 5: gradient */
    .cap-stack > .pui-card[data-slide="5"] .cap-card-media {
      background: linear-gradient(126.72deg, var(--pui-color-blue-300) 30.59%, var(--pui-color-gradient-stop-pink) 125.66%);
        width: 538px;
    }

    .media-overlay { background: var(--pui-color-red-200); }

    /* Slide 5 — checklist layout */

    .cap-logos-card img {padding: 5%;}

    /* ═══════════════════════════════════════════════════════════
       HOW DOES ECHO AI WORK
    ═══════════════════════════════════════════════════════════ */
    .how-section {
      padding: var(--pui-space-80) 0;
      z-index: 1000;
    }
    .how-left { max-width: 709px; }
    :where(.how-left) > .pui-text--headline-small {
      color: var(--pui-text-default);
      margin-bottom: var(--pui-space-12);
    }
    :where(.how-left) > .pui-text--title-small {
      color: var(--pui-color-neutral-400);
      margin-bottom: 22px;
    }
    .tabs-wrap {
      display: flex;
      flex-direction: column;
      gap: var(--pui-space-24);   /* B — on the scale (was 22) */
      align-items: center;
    }
    .tab-panel {
      container-type: inline-size;   /* same composition as the cap cards */
      display: none;
      width: 100%;
      background: var(--pui-color-light-blue-100);
      border-radius: var(--pui-radius-16);
      box-shadow: var(--pui-elevation-modal);
      padding: var(--pui-space-32);
      align-items: center;
      justify-content: space-between;
      gap: var(--pui-space-24);
    }
    .tab-panel.active { display: flex; }

    .tab-content-left {
      width: 436px;
      max-width: 45%;
      display: flex;
      flex-direction: column;
      gap: var(--pui-space-12);
    }
    .tab-content-left > .pui-text--title-small {
      color: var(--pui-text-default);
    }
    :where(.tab-content-left) > .pui-button {
      align-self: flex-start;
  /* A1 — the tab panels' black button is .pui-button (medium; the page's 8 / 12 at 16 Regular, stated); `align-self: flex-start` stays — the panel is a flex column and the button must not stretch */
}
/* A1 — its opacity hover is the Button's action/primary/bg-hover */

    .tab-content-right {
      flex: 1;
      align-self: stretch;
      border-radius: var(--pui-radius-16);
      overflow: hidden;
      position: relative;
      min-height: 364px;
    }
    .tab-content-right.pink-bg  { background: var(--pui-color-red-200); }
    .tab-content-right.purple-bg { background: var(--pui-color-blue-200); }
    .tab-content-right .tab-screenshot {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 20%;
      width: calc(100% - 74px);

      border-radius: var(--pui-radius-8);
      box-shadow: var(--pui-elevation-card);
      overflow: hidden;
    }
    .tab-content-right .tab-screenshot img {
      width: 100%; height: 100%; object-fit: cover;
    }

    /* ═══════════════════════════════════════════════════════════
       CTA + FORM
    ═══════════════════════════════════════════════════════════ */
    .cta-section {
      position: relative;
      padding: var(--pui-space-80) 0;
      /* Clip ONLY the gradient's horizontal over-size (no side band / horizontal
         scrollbar); `clip` (not `hidden`) makes no scroll container. overflow-y
         stays visible so the glow still bleeds softly up/down into the
         neighbouring blocks, as it always has. */
      overflow-x: clip;
      overflow-y: visible;
    }
    /* Full-bleed gradient behind the card — mirrors MAFO's .mafo-contact__gradient.
       Vertical position is CARD-relative: `top` is a % of .cta-section (which
       hugs the card + its 80px padding), so the bright centre stays ~79% down the
       card at EVERY width instead of drifting. Width stays 110% for edge-to-edge
       coverage. The old `margin-top:-27%` scaled the offset with viewport WIDTH
       while the card centre is fixed, so it could never stay centred (pooled too
       high). translate(-50%,-50%) centres the glow's own centre on that point
       regardless of the gradient's rendered height. */
    .cta-blob {
      position: absolute;
      top: 73%;                 /* ≈ 79% down the card (section = card + 80px top/bottom padding) */
      left: 50%;
      transform: translate(-50%, -50%);
      width: 110%;
      max-width: none;
      height: auto;
      z-index: 0;
      pointer-events: none;
      user-select: none;
    }


    .cta-card {
      position: relative;
      z-index: 1;
      background: color-mix(in srgb, var(--pui-color-neutral-0) 66%, transparent);
      backdrop-filter: blur(15.1px);
      border-radius: var(--pui-radius-32);
      box-shadow: var(--pui-shadow-xxl-soft);
      padding: 66px 59px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 60px;
    }
    .cta-text-col { flex: 1; }
    :where(.cta-text-col) > .pui-text--headline-small {
      color: var(--pui-text-default);
      white-space: nowrap;
      margin-bottom: 10px;
    }
    :where(.cta-text-col) > .pui-text--title-small {
      color: var(--pui-color-neutral-400);
      max-width: 590px;
    }
    /* Figma 3604:10526 — Poppins Medium 22 / neutral-600, 22px below the subtitle.
       Link colour + underline set explicitly: the local `a` reset above kills both, and
       layout.min.css adds `body a { text-decoration: none !important }` — hence !important. */
    :where(.cta-text-col) > .pui-text--body-large {
      margin-top: 22px;
      color: var(--color-neutral-600, var(--pui-color-neutral-600));
    }
    :where(.cta-text-col) > .pui-text--body-large a {
      color: inherit;
      text-decoration: underline !important;
      text-underline-position: from-font;
    }

    /* FORM */
    .cta-card > .form-card {
      width: 444px;      /* Figma form_wrapper 3604:10026 — was 435, which wrapped the shared 22px .ui-form__title onto two lines */
      flex-shrink: 0;
      /* F — the card is the form's own (blocks/form-2026: .form-card.pui-card.pui-card--lined); the page keeps its width in the row */
    }
    /* F — the form is the site's one form (blocks/form-2026): the column, the title, the fields, the consent, the
       button and the result are its own (global-2026.css § FORM + the kit); the page's `form-field` / `form-label` /
       `field-error` / `checkbox-item` family went (2026-09-28), and with it the checkbox label's own grey — the
       label reads text/default like every form's. What stays the page's — the two states its own script gives,
       because that script is legacy and is kept to the letter (Fedor, 2026-09-28): a message shown by `.visible`
       (every other form's script says `.is-visible`), and the button dimmed while sending by `.loading` (the other
       forms disable theirs). */
    .ui-form .field__error.visible { display: block; }
    .ui-form .pui-button.loading { opacity: 0.6; pointer-events: none; }

    /* Success message now uses the shared `.form-success-msg` standard component
       (global-2026.css), revealed by `.is-success` on #echoForm. */

    .media-overlay.publishers {
        background: var(--pui-color-blue-200);
      }
    /* ═══════════════════════════════════════════════════════════
       FAQ
    ═══════════════════════════════════════════════════════════ */
    .faq-section {
      position: relative;
      /* No bottom padding: the footer's own space/128 above IS the gap between
         the last FAQ row and the footer card, on every breakpoint (Fedor, Sep 4 2026). */
      padding: 80px 0 0;
      overflow: hidden;
    }
    .faq-blob {
      position: absolute;
      right: -200px;
      bottom: -300px;
      width: 900px;
      opacity: 0.5;
      pointer-events: none;
      z-index: 0;
    }
    .faq-section > [role="list"] { position: relative; z-index: 1; }   /* the list over the blob — the section's layering, not the accordion's */
    /* The site's <button> for the kit's <summary>: the reset stands on the site's class beside the kit's (`pui-accordion-item__question faq-question`),
       never on the kit's class (2026-10-05); the row itself is the kit's. A button form of the question is asked of the kit (request 52). */
    .faq-question {
      width: 100%;
      background: none;
      border: none;
      text-align: left;
      color: inherit;
    }
    .faq-question p {
      margin: 0;   /* A3 — Bootstrap's 1rem paragraph margin sat under every question (the row was 105 tall for 32 / 25 / 32); the kit's row is symmetric */
      max-width: 700px;
      flex: 1;
  /* A3 — the question's type (18 Medium, text/default, 1.4 — the site's clamp 15…18 at every width, stated) is the row's; `max-width` and `flex` stay the site's */
}
/* A3 — the kit turns the marker on [data-state=open] */
    /* Smooth accordion: animate the REAL content height with a 0fr→1fr grid row
       instead of max-height. max-height:300px was much taller than the actual
       answer, so closing felt like a pause-then-snap (and it clipped long
       answers). The grid row eases to the exact height in both directions. */
    .faq-answer {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows 0.35s ease;
    }
    .pui-accordion-item.open .faq-answer {
      grid-template-rows: 1fr;
    }
    /* The animated grid item — collapses to exactly 0. It carries NO padding
       (padding on the item would leave a residual the row can't close past),
       only overflow:hidden + min-height:0 so the content clips as it shrinks. */
    .faq-answer__inner {
      overflow: hidden;
      min-height: 0;
    }
    .faq-answer p {
      margin: 0;
      opacity: 0;
      transition: opacity 0.3s ease;   /* fade in/out as it expands/collapses */
  /* A3 — the answer (padding 0 32 24; 16 Regular text/muted on a 1.7 line — the site's #555) is .pui-accordion-item__answer; `margin`, the fade and the site's mobile inset stay */
}
    .pui-accordion-item.open .faq-answer p { opacity: 1; }

    /* ═══════════════════════════════════════════════════════════
       FOOTER
    ═══════════════════════════════════════════════════════════ */


    .footer-container {
      z-index: 10;
      position: relative;
    }

    /* 2026-10-05 — the page's own rules on the footer card (.pui-footer) went: the footer is blocks/footer-2026, the same on every page */
    .footer-col-nav { display: flex; flex-direction: column; gap: var(--pui-space-4); }
/* 2.4.2 — guard: the page's anti-cascade resets (`button`, `a:link…`) outrank a one-class component (0,1,1 / 0,2,1 over
   0,1,0); they now skip any element carrying a pui- class (inside :where(), so their specificity is unchanged — D60) and the package paints its own. */
    .footer-col-nav a:where(:not([class*="pui-"])):visited {color: var(--pui-color-neutral-200);}
    .footer-col-nav a:where(:not([class*="pui-"])):hover {color: var(--pui-color-neutral-0);}

    .footer-menu-label {
      font-size: var(--pui-type-body-x-small-font-size);
      font-weight: var(--pui-font-weight-600);
      color: var(--pui-color-neutral-400);
      line-height: var(--pui-font-line-height-relaxed);
      margin-bottom: var(--pui-space-2);
    }
    .footer-nav-link {
      font-size: var(--pui-type-body-x-small-font-size);
      color: var(--pui-color-neutral-200);
      line-height: 1.3;
      display: block;
      transition: color 0.15s;
    }
    .footer-nav-link:hover { color: var(--pui-color-neutral-0); }

    .footer-col-extra { display: flex; flex-direction: column; gap: var(--pui-space-32); }
    .footer-col-extra h4 {
      font-size: var(--pui-type-body-x-small-font-size);
      font-weight: var(--pui-font-weight-600);
      color: var(--pui-color-neutral-400);
      line-height: var(--pui-font-line-height-loose);
    }
    .footer-links { display: flex; flex-direction: column; }
    .footer-social { display: flex; gap: var(--pui-space-16); align-items: center; }
    .footer-social a { display: flex; align-items: center; }
    .footer-social img { width: 29px; height: 29px; }
    .footer-subscribe { display: flex; flex-direction: column; gap: var(--pui-space-4); margin-top: 0; }
    .footer-email-row {
      background: color-mix(in srgb, var(--pui-color-neutral-0) 5%, transparent);
      border: 1px solid #404040;
      border-radius: var(--pui-radius-8);
      height: 36px;
      display: flex;
      align-items: center;
      padding: var(--pui-space-4) var(--pui-space-8) var(--pui-space-4) var(--pui-space-12);
      gap: var(--pui-space-8);
      width: 303px;
    }
    .footer-email-row input {
      flex: 1;
      background: none;
      border: none;
      outline: none;
      font-size: var(--pui-type-label-medium-font-size);
      color: var(--pui-text-caption);   /* P2 STATED — was a grey no token holds; the field placeholder took text/caption in the pilot (D43) and this text is the same role */
    }
    .footer-email-row input::placeholder { color: var(--pui-text-caption); }
    .footer-email-btn {
      background: #f5f5f5;
      border: none;
      border-radius: var(--pui-radius-4);
      padding: var(--pui-space-4) var(--pui-space-8);
      font-size: var(--pui-type-label-medium-font-size);
      cursor: pointer;
      color: #0a0a0a;
      white-space: nowrap;
    }

    .footer-col-right {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      align-self: anchor-center;
    }
    .footer-certs {
      display: flex;
      align-items: flex-start;
      gap: var(--pui-space-40);
      flex-wrap: wrap;
    }
    .footer-certs img { height: auto; width: auto;}
    .footer-certs  { width: 100%; max-width: 508px;}
    .footer-copy {
      font-size: var(--pui-type-label-medium-font-size);
      color: var(--pui-color-neutral-400);
      text-align: center;
      margin-top: var(--pui-space-32);
    }

    @media (min-width: 1272px) {
      .cap-stack > .pui-card:last-child {width: 1250px;}
    }


    /* ═══════════════════════════════════════════════════════════
       RESPONSIVE — TABLET
       Stack the CTA card so the fixed-width form never overflows the
       viewport (mirrors MAFO stacking its .mafo-contact card at ≤1023).
    ═══════════════════════════════════════════════════════════ */
    @media (max-width: 1023px) {
      .cta-card {
        flex-direction: column;
        align-items: stretch;
        gap: var(--pui-space-32);
        padding: var(--pui-space-40);
      }
      .cta-text-col { flex: 1 1 100%; }
      :where(.cta-text-col) > .pui-text--headline-small { white-space: normal; }
      .cta-card > .form-card { width: 100%; flex-shrink: 1; }
    }

    /* ═══════════════════════════════════════════════════════════
       RESPONSIVE — HERO STACK, TABLET + MOBILE (≤1023)
       The desktop overlap composition only reads well from 1024 up. Below
       it the tablet shares the MOBILE hero (Fedor, Sep 3 2026): the browser
       window runs the full content width and the glass card + description
       sit underneath it at full width instead of overlapping.
    ═══════════════════════════════════════════════════════════ */
    @media (max-width: 1023px) {
      .hero-showcase { margin-top: var(--pui-space-40); }

      .hero-desc-card {
        width: 100%;
        max-width: 100%;
        padding: var(--pui-space-32);
        border-radius: var(--pui-radius-16);
        margin-top: var(--pui-space-20);
        margin-left: 0;
        align-self: auto;
      }
      .hero-desc-card p { font-size: var(--pui-font-size-20); }
      .hero-desc-text { width: 100%; max-width: 100%; align-self: auto; margin-left: 0; margin-top: 43px; }
      .hero-desc-text p { font-size: var(--pui-font-size-16); }
    }

    /* ═══════════════════════════════════════════════════════════
       RESPONSIVE — MOBILE
    ═══════════════════════════════════════════════════════════ */
    @media (max-width: 768px) {
      :root { --side-pad: 16px; }

      /* hero — no bottom padding: the stats section's 80px top padding IS the
         hero → stats gap on mobile (Fedor, Sep 4 2026: exactly 80). */
      .hero { padding-top: 90px;  padding-bottom: 0;  }
      .hero-bg { top: -237px; width: 860px; height: 736px; }  /* left:50% + translateX(-50%) inherited from base — stays centred */
      /* Logo size is handled by the fluid `width: min(728px, 88vw)` base rule
         (below), which the appended block would override here anyway. */
      .hero-powered { font-size: var(--pui-font-size-20); }
      .hero-tagline {
        margin-top: var(--pui-space-20);
        font-size: var(--pui-font-size-32);
        white-space: normal;
        line-height: 1.27;
        padding: 0 var(--pui-space-8);
      }
      .hero-desc-text { margin-bottom: 0; }   /* the hero's padding-bottom takes over */

      /* stats */
      .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--pui-space-16);
      }
      .stats-section {
        padding-bottom: 97px;
      }
      :where(.stats-section) .pui-text--headline-small { font-size: var(--pui-font-size-28); margin-bottom: var(--pui-space-24); }   /* heading → content = 24 on mobile */
      .stats-grid > * { min-height: 160px; }   /* the row's phone height — the site's number on the grid, not on the tile */

      /* problem */
      .problem-section {padding: 0;}
      :where(.problem-section) .pui-text--headline-small { margin-bottom: var(--pui-space-24); }   /* heading → content = 24 on mobile */
      .problem-cards { gap: var(--pui-space-12); margin-bottom: var(--pui-space-32);}
      .problem-solution {
        flex-direction: column;
        align-items: flex-start;
        padding: var(--pui-space-24);
        gap: var(--pui-space-24);
      }
      .problem-solution-logo .sol-logo-group { height: 50px; }
      .problem-solution-logo .sol-logo-ai { height: 50px; }

      /* capabilities */
      .capabilities-section {
        padding-bottom: 0px;
      }
      :where(.capabilities-section) .pui-text--headline-small { margin-bottom: var(--pui-space-24); }   /* heading → content = 24 on mobile */
      .cap-stack > .pui-card {
        position: relative;
        top: auto !important;
        flex-direction: column;
        min-height: auto;
        margin-bottom: 41px;
      }
      .cap-card-text { width: 100%; max-width: 100%; font-size: var(--pui-font-size-25); }   /* D — font-size/25 by name */
      .cap-card-media { --mu: calc(100cqw / 616); width: 100%; max-width: 100%; height: auto; margin-top: var(--pui-space-16); }   /* D — space/16 by name; the 41 under each stacked card at mobile is the page's own — stated */   /* full-width box, same proportions */
      .cap-stack > .pui-card:last-child .cap-card-media { width: 100%; height: auto; min-height: 144px; }   /* gradient card fills the column like the other slides; hugs the logo strip */
      .cap-logos-card { width: 100%; flex-wrap: wrap; height: auto; padding: var(--pui-space-16); }

      /* how section */
      .tab-panel { flex-direction: column; }
      .tab-content-left { width: 100%; max-width: 100%; }
      .tab-content-right { width: 100%; max-width: 100%; min-height: 200px; }


      .tab-screenshot {

        position: absolute;
        left: calc(50% - 269px);
        top: 51px;
        width: 538px;
        height: 255px;
        border-radius: var(--pui-radius-8);
        box-shadow: var(--pui-elevation-card);
        overflow: hidden;
      }
      .tab-screenshot img {
        left: 16px;
        top: 14px;
        width: calc(100% - 32px);
        height: calc(100% - 28px);
      }


      .how-section {
        padding: var(--pui-space-40) 0;
      }


      .tab-panel {
        padding: var(--pui-space-12);
      }

      :where(.tab-content-left) > .pui-button {
        width: 100%;
      }

      /* cta */
      .cta-section {
        padding: 66px 0;
      }
      .cta-card {
        flex-direction: column;
        padding: var(--pui-space-12);
        gap: var(--pui-space-24);
        border-radius: var(--pui-radius-16);
      }
      .cta-text-col {
        padding: 0 var(--pui-space-12);
        font-size: var(--pui-font-size-25);
      }

      /* Keep the gradient on mobile too. The stacked card is tall & narrow, so a
         110%-wide glow renders too short (width-tied height); oversize the width
         so its height covers the whole card. Still card-relative via base top:73%;
         body{overflow-x:hidden} clips the horizontal over-size. */
      .cta-blob {
        width: 320%;
      }
      .cta-card > .form-card { width: 100%; }

      /* faq */
      .faq-section {padding: 0;}
      /* 2026-10-05 — the phone inset of the question row is the kit's (space/32); the site's 20 / 16 went with the rule on the kit's class */
      .faq-answer p { padding: 0 var(--pui-space-16) var(--pui-space-20); }

      .footer-col-right {

        align-items: flex-start;
      }
      .footer-certs img { height: 60px; }
      .footer-email-row { width: 100%; }


  :where(.problem-solution) > .pui-text--title-small { font-size: var(--pui-font-size-20); }   /* the size pin stays (request 61) — restored 2026-10-05 */
}

    @media (max-width: 480px) {
      .stats-grid { grid-template-columns: repeat(2, 1fr); }
    }

    /* ── Utility ─────────────────────────────────────────────── */
    .visually-hidden {
      position: absolute; width: 1px; height: 1px;
      overflow: hidden; clip: rect(0,0,0,0);
    }
  


    /* ═══════════════════════════════════════════════════════════
       HERO LOGO — interactive hover spotlight
       White EchoAI wordmark at rest; a cursor-following gradient
       reveal masked to the wordmark on hover. Ported from the
       home-2026 .echo-logo; sized to match the old static logo.
    ═══════════════════════════════════════════════════════════ */
.hero-logo-img .echo-logo {
  --echo-mask: url("data:image/svg+xml,%3Csvg%20width%3D%22548%22%20height%3D%22124%22%20viewBox%3D%220%200%20548%20124%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M63.7044%201.43215L72.332%2035.8086C73.276%2039.5761%2075.2258%2043.0143%2077.9721%2045.7602C80.7183%2048.506%2084.157%2050.4556%2087.925%2051.3995L122.304%2060.024C124.214%2060.5028%20124.214%2063.217%20122.304%2063.6958L87.923%2072.3223C84.157%2073.2661%2080.7183%2075.2157%2077.9721%2077.9616C75.2258%2080.7075%2073.276%2084.1477%2072.332%2087.9132L63.7044%20122.29C63.2254%20124.198%2060.5113%20124.198%2060.032%20122.29L51.4064%2087.9132C50.4604%2084.1477%2048.5105%2080.7075%2045.7643%2077.9616C43.02%2075.2157%2039.5794%2073.2661%2035.8134%2072.3223L1.43234%2063.6958C-0.477448%2063.217%20-0.477448%2060.5032%201.43234%2060.024L35.8134%2051.3995C39.5794%2050.4536%2043.0181%2048.5041%2045.7643%2045.7602C48.5105%2043.0143%2050.4604%2039.5761%2051.4064%2035.8086L60.032%201.43215C60.5109%20-0.477384%2063.2251%20-0.477384%2063.7044%201.43215Z%22%20fill%3D%22white%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M389.651%2095.7314C392.593%2095.7314%20395.175%2095.4541%20397.402%2094.897C399.707%2094.3404%20401.615%2093.2267%20403.126%2091.5588C404.637%2089.8885%20405.79%2087.3843%20406.584%2084.0456C407.379%2080.7074%20407.778%2076.2952%20407.778%2070.8094C407.778%2065.2458%20407.379%2060.834%20406.584%2057.5732C405.79%2054.3147%20404.637%2051.8501%20403.126%2050.1798C401.615%2048.5115%20399.707%2047.3983%20397.402%2046.8416C395.175%2046.285%20392.593%2046.0073%20389.651%2046.0073C386.629%2046.0073%20384.005%2046.2846%20381.779%2046.8416C379.552%2047.3983%20377.684%2048.5119%20376.173%2050.1798C374.663%2051.8501%20373.511%2054.3147%20372.715%2057.5732C371.921%2060.8336%20371.523%2065.2458%20371.523%2070.8094C371.523%2076.2952%20371.921%2080.707%20372.715%2084.0456C373.511%2087.3839%20374.663%2089.8885%20376.173%2091.5588C377.684%2093.2271%20379.552%2094.3404%20381.779%2094.897C384.005%2095.4537%20386.629%2095.7314%20389.651%2095.7314ZM389.651%20103.484C385.038%20103.484%20380.983%20103.005%20377.484%20102.052C374.066%20101.098%20371.204%2099.4295%20368.899%2097.0446C366.594%2094.6602%20364.883%2091.3597%20363.769%2087.147C362.658%2082.8546%20362.101%2077.4089%20362.101%2070.8098C362.101%2064.133%20362.658%2058.6872%20363.769%2054.4746C364.883%2050.1802%20366.594%2046.8817%20368.899%2044.577C371.204%2042.1925%20374.066%2040.5619%20377.484%2039.6879C380.983%2038.7341%20385.038%2038.2572%20389.651%2038.2572C394.263%2038.2572%20398.276%2038.7341%20401.695%2039.6879C405.194%2040.6417%20408.096%2042.31%20410.401%2044.6964C412.706%2047.0011%20414.416%2050.2997%20415.53%2054.592C416.721%2058.8067%20417.318%2064.2123%20417.318%2070.8094C417.318%2077.4882%20416.721%2082.9721%20415.53%2087.2664C414.416%2091.4787%20412.706%2094.7776%20410.401%2097.1621C408.175%2099.4687%20405.313%20101.097%20401.815%20102.051C398.316%20103.005%20394.261%20103.484%20389.65%20103.484M294.256%20102.768V11.7852H303.678V46.1275C306.619%2043.9803%20310.118%2042.1128%20314.171%2040.5222C318.306%2038.8539%20322.599%2038.018%20327.052%2038.018C331.504%2038.018%20335.16%2038.9718%20338.024%2040.8793C340.966%2042.7869%20343.112%2045.3713%20344.463%2048.6317C345.896%2051.8902%20346.61%2055.5081%20346.61%2059.4811V102.767H337.188V60.4349C337.188%2057.7331%20336.632%2055.3482%20335.52%2053.2812C334.486%2051.2137%20332.975%2049.5855%20330.988%2048.3921C329%2047.1987%20326.615%2046.604%20323.833%2046.604C321.208%2046.604%20318.784%2046.8813%20316.556%2047.4383C314.331%2047.9152%20312.184%2048.6317%20310.118%2049.5855C308.05%2050.4595%20305.903%2051.5331%20303.678%2052.8043V102.768H294.256ZM258.926%20103.484C255.348%20103.484%20252.009%20103.005%20248.909%20102.052C245.808%20101.098%20243.104%2099.4295%20240.799%2097.0446C238.494%2094.6602%20236.703%2091.3597%20235.432%2087.147C234.161%2082.9324%20233.524%2077.5664%20233.524%2071.0495C233.524%2064.4504%20234.121%2059.0447%20235.313%2054.8321C236.506%2050.5397%20238.214%2047.1995%20240.442%2044.8146C242.667%2042.4302%20245.371%2040.7619%20248.551%2039.8077C251.732%2038.8539%20255.27%2038.3751%20259.166%2038.3751C262.345%2038.3751%20265.804%2038.5346%20269.54%2038.8539C273.278%2039.0912%20276.855%2039.4883%20280.273%2040.0454V45.6506H261.669C257.615%2045.6506%20254.197%2046.3251%20251.413%2047.678C248.631%2049.0289%20246.523%2051.5732%20245.092%2055.3086C243.661%2058.9642%20242.947%2064.2925%20242.947%2071.2867C242.947%2078.0433%20243.701%2083.2117%20245.212%2086.7895C246.723%2090.3654%20248.87%2092.83%20251.652%2094.1809C254.434%2095.4541%20257.813%2096.0909%20261.789%2096.0909H281.23V101.574C279.4%20101.894%20277.254%20102.211%20274.789%20102.528C272.405%20102.847%20269.86%20103.085%20267.156%20103.244C264.454%20103.404%20261.709%20103.484%20258.927%20103.484M184.518%20103.245C182.611%20103.245%20180.583%20103.085%20178.437%20102.768C176.29%20102.371%20174.262%20101.614%20172.355%20100.503C170.447%2099.3894%20168.896%2097.7191%20167.704%2095.4941C166.511%2093.1895%20165.914%2090.0885%20165.914%2086.1932V32.652C165.914%2029.2336%20166.391%2026.412%20167.345%2024.185C168.379%2021.8804%20169.73%2020.0922%20171.4%2018.821C173.071%2017.4681%20174.939%2016.5144%20177.006%2015.9573C179.072%2015.3225%20181.139%2015.0036%20183.207%2015.0036C188.136%2015.0833%20192.709%2015.2031%20196.922%2015.3626C201.135%2015.4404%20205.111%2015.5602%20208.849%2015.7197C212.665%2015.7994%20216.361%2015.9173%20219.939%2016.0768V23.7074H185.592C182.491%2023.7074%20180.026%2024.5433%20178.198%2026.2116C176.37%2027.8819%20175.455%2030.5437%20175.455%2034.2017V54.9507L214.692%2055.5454V62.8209L175.455%2063.4157V84.0453C175.455%2086.9867%20175.932%2089.2137%20176.886%2090.7241C177.92%2092.2329%20179.271%2093.2264%20180.942%2093.7032C182.61%2094.1801%20184.32%2094.4194%20186.069%2094.4194H219.939V102.05C216.281%20102.29%20212.424%20102.489%20208.371%20102.647C204.396%20102.807%20200.38%20102.926%20196.325%20103.004C192.349%20103.084%20188.413%20103.164%20184.518%20103.244%22%20fill%3D%22white%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M547.01%2021.7676V103.565H530.602V21.7676H547.01Z%22%20fill%3D%22white%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M496.867%2087.9788H464.284L458.893%20103.565H441.664L471.082%2021.6504H490.186L519.605%20103.565H502.258L496.867%2087.9788ZM492.413%2074.8538L480.576%2040.6349L468.738%2074.8538H492.413Z%22%20fill%3D%22white%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
  --echo-spot: 200px;
  --echo-gscale: 100%;   /* gradient scale inside the logo (Claude-design tweak) */
  --echo-fade: 0.5s;     /* fade-out duration on mouse leave */
  /* Fluid width so the wordmark scales DOWN on tablet/mobile instead of
     overflowing. Capped at 728px = the previous fixed desktop size (height
     164.858 x 548/124). Below ~828px viewport it shrinks with the screen.
     `height:auto` + aspect-ratio keeps the shape; a fixed height couldn't
     scale and the inline-block parent made max-width:100% a no-op. */
  width: min(728px, 88vw);
  height: auto;
  max-width: 100%;
  aspect-ratio: 548 / 124;
  position: relative;
  /* cursor stays default on hover (latest design — no crosshair) */
  -webkit-mask: var(--echo-mask) center / contain no-repeat;
          mask: var(--echo-mask) center / contain no-repeat;
}

.hero-logo-img .echo-logo__rest {
  position: absolute;
  inset: 0;
  background: var(--pui-color-neutral-0);
}

.hero-logo-img .echo-logo__grad {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 16% 38%, #ea5956, transparent 55%),
    radial-gradient(circle at 44% 72%, #e280e0, transparent 55%),
    radial-gradient(circle at 70% 28%, #fbd25a, transparent 55%),
    radial-gradient(circle at 92% 66%, var(--pui-color-blue-400), transparent 62%),
    #ea5956;
  background-size: var(--echo-gscale) var(--echo-gscale);
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  -webkit-mask: radial-gradient(circle var(--echo-spot) at var(--emx) var(--emy), var(--pui-color-neutral-1000) 0%, var(--pui-color-neutral-1000) 30%, transparent 72%);
          mask: radial-gradient(circle var(--echo-spot) at var(--emx) var(--emy), var(--pui-color-neutral-1000) 0%, var(--pui-color-neutral-1000) 30%, transparent 72%);
  transition: opacity var(--echo-fade) ease, --emx 0.16s ease-out, --emy 0.16s ease-out;
}

/* C — the ink of every glyph the kit does not paint itself, bound by name (the file's colour → its token; 2026-09-25). Glyphs inside a
   kit slot (.pui-card__icon, .pui-badge, .pui-icon-button, .pui-input-group__icon, .pui-select__chevron, .pui-nav-link__caret, .pui-form-result__icon) take the kit's ink. */
.hero-showcase .browser__btn .pui-icon, .hero-showcase :where(.browser__url) > .pui-icon { color: var(--pui-illustration-chrome-text); }

/* STEP 12 (2026-09-28) — a design-system part carries the design system's classes only; this page reaches a part through the block that holds it
   and states only what is the page's (a width in a row, a place in a grid, a picture's ratio). */
/* STEP 12 · TOKENS — the site's alias names became the design system's; a typed value that equals a token is the token */