/* ===== FONT FACES ===== */
    @font-face { font-family: "The Future"; src: url("fonts/the-future-thin.woff2") format("woff2"); font-weight: 100; font-style: normal; font-display: swap; }
    @font-face { font-family: "The Future"; src: url("fonts/the-future-thin-italic.woff2") format("woff2"); font-weight: 100; font-style: italic; font-display: swap; }
    @font-face { font-family: "The Future"; src: url("fonts/the-future-extralight.woff2") format("woff2"); font-weight: 200; font-style: normal; font-display: swap; }
    @font-face { font-family: "The Future"; src: url("fonts/the-future-extralight-italic.woff2") format("woff2"); font-weight: 200; font-style: italic; font-display: swap; }
    @font-face { font-family: "The Future"; src: url("fonts/the-future-light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
    @font-face { font-family: "The Future"; src: url("fonts/the-future-light-italic.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
    @font-face { font-family: "The Future"; src: url("fonts/the-future-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
    @font-face { font-family: "The Future"; src: url("fonts/the-future-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
    @font-face { font-family: "The Future"; src: url("fonts/the-future-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
    @font-face { font-family: "The Future"; src: url("fonts/the-future-medium-italic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
    @font-face { font-family: "The Future"; src: url("fonts/the-future-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
    @font-face { font-family: "The Future"; src: url("fonts/the-future-bold-italic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }
    @font-face { font-family: "The Future"; src: url("fonts/the-future-black.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }
    @font-face { font-family: "The Future Mono"; src: url("fonts/the-future-mono-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
    @font-face { font-family: "The Future Mono"; src: url("fonts/the-future-mono-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
    @font-face { font-family: "The Future Mono"; src: url("fonts/the-future-mono-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

    /* ===== CSS CUSTOM PROPERTIES ===== */
    :root {
      /* ---- ACCENT SYSTEM -------------------------------------------------
         Identical block to index-v2-lime.html, so the two pages are provably
         the same theme: set --accent and --accent-rgb and every lime on the
         sheet follows. There are no hardcoded accent literals below.
         Measured contrast (WCAG 2.1 relative luminance):
           #D8FF3E on #000000  = 18.29 : 1   (AAA, safe as text)
           #D8FF3E on #1e1f20  = 14.37 : 1   (AAA, safe as text on cards)
           #000000 on #D8FF3E  = 18.29 : 1   (black on lime fills -- never white)
         Lime is unusable on the eggshell sections (1.04 : 1 on #f1f4f4), so
         --accent-ink is the same hue darkened for light backgrounds:
           #4B5B00 on #f1f4f4  =  6.79 : 1   (AA)
           #4B5B00 on #cfdadc  =  5.26 : 1   (AA)
           #4B5B00 on #ffffff  =  7.51 : 1   (AA)
         Hue held constant: 72.1deg vs 70.5deg.                             */
      --accent: #D8FF3E;
      --accent-rgb: 216, 255, 62;          /* same colour, as channels, for alpha use */
      --accent-dim: rgba(var(--accent-rgb), 0.16);
      --accent-text: var(--accent);        /* 18.29 : 1 on black */
      --accent-ink: #4B5B00;               /* the light-section accent */
      --accent-ink-rgb: 75, 91, 0;
      /* Kept as an alias so the light-section rules written against the old
         name keep resolving. One colour, two spellings, no second value. */
      --accent-on-light: var(--accent-ink);
      /* Per-context icon duotone. Overridden inside the light sections. */
      --ic-key: var(--accent);
      --ic-sub: rgba(255,255,255,0.85);

      --color-black: #000;
      --color-off-black: #1e1f20;
      --color-deep-gray: #323536;
      --color-white: #fff;
      --color-eggshell: #f1f4f4;
      --color-eggshell-dark: #cfdadc;
      /* was literally #ffffff - a dead token. Folded into the accent system. */
      --color-cyan: var(--accent);
      /* was 0.5 (3.95 : 1, below AA). 0.62 measures 7.85 : 1 on black. */
      --color-text-secondary: rgba(255,255,255,0.62);
      /* Text on the light sections. rgba(0,0,0,0.45) measured 3.35:1 on
         white and 4.33:1 on the eggshell - both below AA. These two are
         6.21:1 on white and 5.47:1 on eggshell. */
      --color-on-light-muted: rgba(0,0,0,0.62);
      --color-on-light-strong: rgba(0,0,0,0.72);
      --color-border: rgba(255,255,255,0.2);
      --font-future: "The Future", ui-sans-serif, system-ui, -apple-system, sans-serif;
      --font-future-mono: "The Future Mono", ui-monospace, SFMono-Regular, monospace;
      --layout-max-width: 1440px;
      --px-mobile: 1.88rem;
      --px-desktop: 6.24rem;
      --transition: all 300ms ease-in-out;
      --nav-offset: 88px;
    }
    @media (min-width: 1024px) {
      :root { --nav-offset: 100px; }
    }

    /* ===== RESET & BASE ===== */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    /* FIX: smooth scrolling had no scroll-padding, so every in-page anchor
       (#pricing, #work, #contact) landed underneath the fixed nav bar. */
    html {
      scroll-behavior: smooth;
      scroll-padding-top: var(--nav-offset);
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
    }
    body {
      font-family: var(--font-future);
      color: var(--color-white);
      background: var(--color-black);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      overflow-x: hidden;
      line-height: 1.6;
    }
    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; }
    button { font-family: inherit; cursor: pointer; }

    /* FIX: there was no visible keyboard focus anywhere on this page. */
    :focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 3px;
    }
    .Section--eggshell-dark :focus-visible,
    .Section--eggshell :focus-visible {
      outline-color: var(--accent-on-light);
    }
    .Skip-link {
      position: absolute;
      left: 12px;
      top: -60px;
      z-index: 400;
      background: var(--accent);
      color: #000;
      font-family: var(--font-future-mono);
      font-size: 0.75rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 10px 16px;
      border-radius: 999px;
      transition: top 0.2s ease;
    }
    .Skip-link:focus { top: 12px; }

    /* ===== ICON SYSTEM =====
       One chip, one grid, one optical weight, used everywhere this page shows
       an icon. 44px rounded square, a 10% lime wash, a 22% lime hairline, and
       inside it a 23px glyph drawn on a 24x24 grid at a heavy 1.9 stroke (or
       solid fill). The part of the glyph that carries the MEANING is lime;
       the housing around it is white at 0.85. Nothing decorative. */
    .Ic {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: rgba(var(--accent-rgb), 0.10);
      border: 1px solid rgba(var(--accent-rgb), 0.22);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      transition: background 0.25s ease, border-color 0.25s ease;
    }
    .Ic svg { width: 23px; height: 23px; display: block; overflow: visible; }
    .Ic-key { stroke: var(--ic-key); }
    .Ic-sub { stroke: var(--ic-sub); }
    .Ic-key-f { fill: var(--ic-key); stroke: none; }
    .Ic-sub-f { fill: var(--ic-sub); stroke: none; }
    /* On the eggshell sections lime strokes measure 1.15 : 1 on white, so the
       chip flips to a solid lime fill with a black glyph on it instead. */
    .Section--eggshell-dark .Ic,
    .Section--eggshell .Ic {
      background: var(--accent);
      border-color: rgba(0,0,0,0.14);
      --ic-key: #000;
      --ic-sub: rgba(0,0,0,0.5);
    }

    /* ===== ACCENT TYPE HELPERS ===== */
    /* One coloured key word (or one coloured initial) per big heading. */
    .hl { color: var(--accent-text); }
    .Section--eggshell-dark .hl,
    .Section--eggshell .hl { color: var(--accent-on-light); }

    /* Mono eyebrow label above a section. */
    .Eyebrow {
      display: flex;
      align-items: center;
      gap: 10px;
      font-family: var(--font-future-mono);
      font-size: 0.6875rem;
      font-weight: 500;
      line-height: 1;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--accent-text);
      margin-bottom: 0.875rem;
    }
    .Eyebrow::before {
      content: "";
      flex: 0 0 auto;
      width: 20px;
      height: 1px;
      background: currentColor;
    }
    @media (min-width: 1024px) {
      .Eyebrow { font-size: 0.75rem; margin-bottom: 1.125rem; }
      .Eyebrow::before { width: 28px; }
    }
    .Section--eggshell-dark .Eyebrow,
    .Section--eggshell .Eyebrow { color: var(--accent-on-light); }

    .container {
      max-width: calc(var(--layout-max-width) + 2 * var(--px-mobile));
      margin: 0 auto;
      padding: 0 var(--px-mobile);
    }
    @media (min-width: 1024px) {
      .container {
        max-width: calc(var(--layout-max-width) + 2 * var(--px-desktop));
        padding: 0 var(--px-desktop);
      }
    }

    /* ===== PILL BUTTONS (cosmos exact) ===== */
    .Pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 9999px;
      white-space: nowrap;
      flex-shrink: 0;
      cursor: pointer;
      transition: var(--transition);
      text-decoration: none;
      border: none;
      font-family: var(--font-future);
      font-weight: 500;
      height: 34px;
      padding: 0 16px;
      font-size: 0.75rem;
      line-height: 1;
    }
    @media (min-width: 1024px) {
      .Pill { height: 42px; font-size: 0.875rem; }
    }
    .Pill--black { background: var(--color-black); color: var(--color-white); }
    .Pill--black:hover { background: var(--color-white); color: var(--color-black); }
    .Pill--white { background: var(--color-white); color: var(--color-black); }
    .Pill--white:hover { background: var(--color-off-black); color: var(--color-white); }
    .Pill--off-black { background: var(--color-off-black); color: var(--color-white); }
    .Pill--off-black:hover { background: var(--color-white); color: var(--color-black); }
    .Pill--deep-gray { background: var(--color-deep-gray); color: var(--color-white); }
    .Pill--deep-gray:hover { background: var(--color-white); color: var(--color-black); }
    .Pill--outline {
      background: transparent;
      color: var(--color-white);
      border: 1px solid var(--color-border);
    }
    /* The one lime-filled button treatment. Text on lime is always black. */
    .Pill--accent {
      background: var(--accent);
      color: var(--color-black);
      font-weight: 700;
      box-shadow: 0 6px 26px var(--accent-dim);
    }
    .Pill--accent:hover {
      background: var(--color-white);
      color: var(--color-black);
      box-shadow: 0 6px 26px rgba(255,255,255,0.14);
    }
    .Pill--outline:hover {
      background: var(--color-white);
      color: var(--color-black);
      border-color: var(--color-white);
    }

    /* ===== NAVIGATION (cosmos style) ===== */
    .Nav {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 250;
      background: var(--color-black);
    }
    .Nav__bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px var(--px-mobile);
      max-width: calc(var(--layout-max-width) + 2 * var(--px-mobile));
      margin: 0 auto;
    }
    @media (min-width: 1024px) {
      .Nav__bar {
        padding: 20px var(--px-desktop);
        max-width: calc(var(--layout-max-width) + 2 * var(--px-desktop));
      }
    }
    .Nav__logo-link {
      display: flex;
      align-items: center;
      flex-shrink: 0;
    }
    .Nav__logo {
      height: 44px;
      width: 44px;
      object-fit: cover;
      border-radius: 8px;
    }
    @media (min-width: 1024px) {
      .Nav__logo { height: 48px; width: 48px; }
    }
    .Nav__center {
      display: none;
      align-items: center;
      gap: 6px;
    }
    @media (min-width: 1024px) {
      .Nav__center { display: flex; }
    }
    .Nav__right {
      display: none;
      align-items: center;
      gap: 6px;
    }
    @media (min-width: 1024px) {
      .Nav__right { display: flex; }
    }
    .Nav__lang-btn {
      font-family: var(--font-future-mono);
      font-weight: 700;
      font-size: 0.75rem;
      letter-spacing: 0.08em;
    }
    .Nav__lang-btn[data-active="true"] {
      background: var(--accent);
      color: var(--color-black);
    }
    .Nav__lang-btn[data-active="false"] {
      background: transparent;
      color: var(--color-text-secondary);
      border: 1px solid var(--color-border);
    }

    /* ===== NAVIGATION =====
       The same five pills as the main page, in the same order. Solutions /
       Work / FAQ / Contact take you back to index.html; Websites is this page
       and wears the active (white) pill. The thin rule before Websites is the
       only thing that sets it apart. Mirrored in the burger menu below. */
    .Nav__divider {
      width: 1px;
      align-self: stretch;
      min-height: 24px;
      margin: 0 18px;
      background: rgba(255,255,255,0.22);
      flex: 0 0 auto;
    }
    @media (max-width: 1200px) {
      .Nav__divider { margin: 0 12px; }
    }
    .Nav__lang-btn[data-active="false"]:hover {
      background: var(--color-white);
      color: var(--color-black);
    }

    /* Mobile right group (globe + burger) */
    .Nav__mobile-right {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    @media (min-width: 1024px) {
      .Nav__mobile-right { display: none; }
    }

    /* Burger */
    .Nav__burger {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 5px;
      background: var(--color-deep-gray);
      border: none;
      cursor: pointer;
      z-index: 210;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      padding: 0;
      transition: background 0.2s ease;
    }
    .Nav__burger span {
      display: block;
      width: 18px;
      height: 1.5px;
      background: var(--color-white);
      transition: var(--transition);
      border-radius: 1px;
    }
    .Nav__burger.active span:nth-child(1) {
      transform: translateY(3.25px) rotate(45deg);
    }
    .Nav__burger.active span:nth-child(2) {
      transform: translateY(0) rotate(-45deg);
      margin-top: -3.25px;
    }
    @media (min-width: 1024px) {
      .Nav__burger { display: none; }
    }

    /* Globe language selector (mobile only) */
    .Nav__globe-wrap {
      position: relative;
      display: flex;
      align-items: center;
      z-index: 210;
    }
    @media (min-width: 1024px) {
      .Nav__globe-wrap { display: none; }
    }
    .Nav__globe-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      background: none;
      border: none;
      color: var(--color-white);
      padding: 8px;
      cursor: pointer;
      transition: opacity 0.3s;
    }
    .Nav__globe-btn:hover { opacity: 0.7; }
    .Nav__globe-dropdown {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      background: var(--color-off-black);
      border: 1px solid var(--color-border);
      border-radius: 12px;
      padding: 6px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-8px);
      transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    }
    .Nav__globe-dropdown.open {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
    .Nav__globe-opt {
      display: block;
      width: 100%;
      padding: 8px 16px;
      border-radius: 8px;
      border: none;
      background: transparent;
      color: var(--color-white);
      font-family: var(--font-future);
      font-size: 0.8125rem;
      font-weight: 600;
      letter-spacing: 0.5px;
      cursor: pointer;
      text-align: center;
      transition: background 0.2s;
    }
    .Nav__globe-opt:hover {
      background: rgba(255,255,255,0.08);
    }
    .Nav__globe-opt[data-active="true"] {
      background: var(--color-white);
      color: var(--color-black);
    }

    /* Mobile menu overlay */
    .Nav__mobile {
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(0,0,0,0.95);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      z-index: 200;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      padding: calc(var(--nav-offset) + 24px) var(--px-mobile) 40px;
      overflow-y: auto;
      overscroll-behavior: contain;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateY(-100%);
      transition: transform 0.5s cubic-bezier(0.33,1,0.68,1), opacity 0.5s ease, visibility 0.5s;
    }
    .Nav__mobile.open {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateY(0);
    }
    .Nav__mobile-links {
      display: flex;
      flex-direction: column;
      gap: 22px;
      width: 100%;
    }
    /* Horizontal twin of .Nav__divider. Decorative only. */
    .Nav__mobile-divider {
      display: block;
      width: 100%;
      height: 1px;
      background: rgba(255,255,255,0.16);
    }
    .Nav__mobile-link {
      font-size: 1.875rem;
      font-weight: 500;
      color: var(--color-white);
      text-decoration: none;
      line-height: 1.3;
      opacity: 0;
      transform: translateY(-16px);
      transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34,1.56,0.64,1), color 0.3s;
    }
    .Nav__mobile.open .Nav__mobile-link {
      opacity: 1;
      transform: translateY(0);
    }
    .Nav__mobile-link:hover { color: var(--accent); }
    /* was var(--color-black): black text on a near-black sheet, i.e. invisible */
    .Nav__mobile-link:active { color: var(--accent); -webkit-tap-highlight-color: transparent; }
    .Nav__mobile-lang {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 48px;
      opacity: 0;
      transform: translateY(-10px);
      transition: opacity 0.4s ease 0.3s, transform 0.4s ease 0.3s;
    }
    .Nav__mobile.open .Nav__mobile-lang {
      opacity: 1;
      transform: translateY(0);
    }
    @media (min-width: 1024px) {
      .Nav__mobile { display: none !important; }
    }

    /* ===== HERO SECTION ===== */
    .Hero {
      position: relative;
      min-height: 100vh;
      min-height: 100svh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 0 var(--px-mobile);
      padding-top: 74px;
      padding-bottom: 100px;
      overflow: hidden;
    }
    @media (min-width: 1024px) {
      .Hero {
        min-height: 100vh;
        padding-top: 112px;
        padding-bottom: 60px;
        max-height: 950px;
        flex-direction: row;
        align-items: center;
        max-width: calc(var(--layout-max-width) + 2 * var(--px-desktop));
        margin: 0 auto;
        padding-left: var(--px-desktop);
        padding-right: var(--px-desktop);
        gap: 2rem;
      }
    }
    .Hero__content {
      position: relative;
      z-index: 2;
      text-align: left;
      max-width: 600px;
    }
    @media (min-width: 1024px) {
      .Hero__content { flex: 0 0 50%; padding-left: 1.5rem; }
    }
    .Hero__title {
      font-size: 2.25rem;
      font-weight: 400;
      line-height: 1.22;
      letter-spacing: -0.5px;
      font-feature-settings: "ss02", "ss09";
      margin-bottom: 24px;
      position: relative;
    }
    .Hero__title strong {
      font-weight: 400;
    }
    @media (min-width: 1024px) {
      .Hero__title { font-size: 3.75rem; line-height: 1.13; letter-spacing: -1.5px; }
    }
    .Hero__desc {
      color: var(--color-text-secondary);
      font-size: 0.9375rem;
      max-width: 480px;
      margin-bottom: 32px;
      line-height: 1.7;
      font-weight: 300;
    }
    @media (min-width: 1024px) {
      .Hero__desc { font-size: 1.0625rem; max-width: 520px; }
    }
    .Hero__cta {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }
    @media (min-width: 1024px) {
      .Hero__cta { gap: 10px; }
    }
    .Hero__visual {
      position: relative;
      width: 100%;
      height: 320px;
      margin-top: 2rem;
    }
    @media (min-width: 1024px) {
      .Hero__visual {
        flex: 0 0 45%;
        height: auto;
        min-height: 480px;
        margin-top: 0;
      }
    }
    .Hero__visual canvas {
      width: 100%;
      height: 100%;
      display: block;
    }
    .Hero__stats {
      position: absolute;
      bottom: 24px;
      left: 0;
      right: 0;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      padding: 0 var(--px-mobile);
      z-index: 3;
    }
    @media (min-width: 1024px) {
      .Hero__stats {
        bottom: 40px;
        padding: 0 var(--px-desktop);
        justify-content: flex-start;
        gap: 4rem;
        max-width: calc(var(--layout-max-width) + 2 * var(--px-desktop));
        margin: 0 auto;
      }
    }
    .Hero__stat-number {
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--color-white);
      line-height: 1;
    }
    @media (min-width: 1024px) {
      .Hero__stat-number { font-size: 1.75rem; }
    }
    .Hero__stat-label {
      font-size: 0.8125rem;
      color: var(--color-text-secondary);
      font-weight: 300;
    }
    .Hero__scroll-hint {
      position: absolute;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%);
      opacity: 0.4;
      display: none;
    }

    /* ===== SECTION STYLES ===== */
    .Section {
      border-top: 1px solid var(--color-border);
      padding: 3.5rem 0;
    }
    @media (min-width: 1024px) {
      .Section { padding: 5.5rem 0; }
    }
    /* Same clamp as index-v2-lime.html: one type scale across both pages. */
    .Section__title {
      font-size: clamp(1.625rem, 1.05rem + 2.4vw, 2.75rem);
      font-weight: 700;
      line-height: 1.08;
      letter-spacing: -0.03em;
      margin-bottom: 2rem;
    }
    @media (min-width: 1024px) {
      .Section__title { margin-bottom: 2.5rem; }
    }

    /* ===== ABOUT SECTION ===== */
    .About {
      padding: 3rem 0.94rem;
    }
    @media (min-width: 1024px) {
      .About { padding: 4.5rem 3.12rem; }
    }
    .About__box {
      background: var(--color-off-black);
      border-radius: 2rem;
      padding: 2rem 1.5rem;
      max-width: calc(var(--layout-max-width) + 5.88rem);
      margin: 0 auto;
    }
    @media (min-width: 1024px) {
      .About__box { padding: 3.5rem 6rem; }
    }
    .About__title {
      font-size: 1.5rem;
      font-weight: 700;
      margin-bottom: 1.25rem;
    }
    @media (min-width: 1024px) {
      .About__title { font-size: 2rem; }
    }
    .About__text {
      color: var(--color-text-secondary);
      font-size: 0.9375rem;
      line-height: 1.7;
      font-weight: 300;
    }
    .About__more {
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      transition: max-height 0.45s ease, opacity 0.35s ease;
    }
    .About__box[data-open="true"] .About__more {
      max-height: 600px;
      opacity: 1;
    }
    .About__toggle {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 42px;
      height: 42px;
      margin: 16px auto 0;
      border-radius: 50%;
      border: 1px solid var(--color-border);
      background: transparent;
      color: var(--color-white);
      transition: var(--transition);
    }
    .About__toggle:hover {
      border-color: rgba(255,255,255,0.5);
      background: rgba(255,255,255,0.05);
    }
    .About__toggle-icon {
      width: 10px;
      height: 10px;
      border-right: 1.5px solid currentColor;
      border-bottom: 1.5px solid currentColor;
      transform: translateY(-2px) rotate(45deg);
      transition: transform 0.3s ease;
    }
    .About__box[data-open="true"] .About__toggle-icon {
      transform: translateY(2px) rotate(225deg);
    }

    /* ===== CARDS (cosmos style) ===== */
    .Card {
      background: var(--color-off-black);
      border: 1px solid var(--color-border);
      border-radius: 20px;
      padding: 1.5rem;
      display: flex;
      flex-direction: column;
      position: relative;
      overflow: hidden;
      transition: var(--transition);
    }
    .Card:hover {
      border-color: rgba(255,255,255,0.35);
    }

    /* Gradient animation on cards */
    .Card--glow::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 20px;
      padding: 1px;
      background: linear-gradient(180deg, transparent, rgba(255,255,255,0.15) 50%, transparent) 0 100% / 100% 200%;
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      animation: gradient-flow 5s ease-in-out infinite;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.3s;
    }
    .Card--glow:hover::before { opacity: 1; }

    @keyframes gradient-flow {
      0% { background-position: 0 100%; opacity: 1; }
      50% { background-position: 0 50%; opacity: 0.6; }
      100% { background-position: 0 0%; opacity: 0; }
    }

    /* ===== SHARED CAROUSEL (mobile-only arrows + track; desktop = grid) ===== */
    .Carousel__header {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 16px;
      margin-bottom: 1.5rem;
    }
    .Carousel__nav {
      display: flex;
      gap: 8px;
      flex-shrink: 0;
    }
    @media (min-width: 1024px) {
      .Carousel__nav--mobile { display: none; }
    }
    .Carousel__slider {
      overflow: hidden;
      overflow: clip;
      overflow-clip-margin: 6px;
      width: 100%;
    }
    .Carousel__track {
      display: flex;
      gap: 10px;
      align-items: stretch;
      transition: transform 0.35s ease;
      will-change: transform;
    }
    @media (min-width: 1024px) {
      .Carousel__slider {
        overflow: visible;
        overflow-clip-margin: 0;
      }
      .Carousel__track {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        transform: none !important;
      }
    }

    /* ===== BOTS / PRODUCTS ===== */
    .Bots__card { height: 100%; }
    .Bot__header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 14px;
    }
    .Bot__logo {
      width: 48px;
      height: 48px;
      object-fit: contain;
      border-radius: 12px;
      border: none;
      background: transparent;
      padding: 0;
    }
    .Bot__name {
      font-size: 1.125rem;
      font-weight: 600;
    }
    .Bot__desc {
      color: var(--color-text-secondary);
      font-size: 0.875rem;
      line-height: 1.7;
      font-weight: 300;
      flex: 1;
    }
    .Bot__desc b { color: var(--color-white); font-weight: 500; }
    .Bot__actions {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      margin-top: auto;
      padding-top: 18px;
    }
    @media (min-width: 1024px) {
      .Bot__actions { gap: 10px; }
    }

    /* Mobile carousel: all cards equal height; desktop: grid cell */
    .Bots__track > .Card, .FAQ__track > .Card, .FAQ__track > .FAQ__card {
      flex: 0 0 100%;
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-self: stretch;
    }
    .Bots__track > .Card { min-height: 280px; }
    .FAQ__track > .Card, .FAQ__track > .FAQ__card { min-height: 240px; }
    @media (min-width: 1024px) {
      .Bots__track > .Card, .FAQ__track > .Card, .FAQ__track > .FAQ__card {
        flex: unset;
        min-height: 0;
        height: auto;
      }
    }

    /* Arrow buttons */
    .Arrow-btn {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      border: 1px solid var(--color-border);
      background: transparent;
      color: var(--color-white);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: var(--transition);
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      cursor: pointer;
      padding: 0;
    }
    @media (min-width: 1024px) {
      .Arrow-btn { width: 40px; height: 40px; }
    }
    .Arrow-btn:hover {
      border-color: rgba(255,255,255,0.5);
      background: rgba(255,255,255,0.05);
    }
    .Arrow-btn:active {
      background: rgba(255,255,255,0.1);
    }
    .Arrow-btn:disabled, .Arrow-btn.is-disabled {
      opacity: 0.3;
      pointer-events: none;
    }
    .Arrow-btn svg { width: 16px; height: 16px; }
    @media (min-width: 1024px) {
      .Arrow-btn svg { width: 14px; height: 14px; }
    }

    /* ===== PRICING ===== */
    .Pricing__grid {
      display: grid;
      gap: 10px;
      grid-template-columns: 1fr;
    }
    @media (min-width: 1024px) {
      .Pricing__grid--3 { grid-template-columns: repeat(3, 1fr); }
      .Pricing__grid--4 { grid-template-columns: repeat(4, 1fr); }
    }
    .Pricing__card-title {
      font-size: 1.25rem;
      font-weight: 600;
      text-align: center;
      margin-bottom: 6px;
    }
    .Pricing__qty {
      text-align: center;
      font-size: 0.9375rem;
      font-weight: 400;
      color: var(--color-text-secondary);
      margin-bottom: 16px;
    }
    .Price-stack {
      display: grid;
      gap: 6px;
    }
    .Price-line {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 14px;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.05);
      background: rgba(255,255,255,0.02);
      color: var(--color-text-secondary);
      font-size: 0.8125rem;
    }
    .Price-line b {
      font-size: 0.9375rem;
      font-weight: 500;
      color: var(--color-white);
    }
    .Pack-note {
      margin-top: auto;
      padding-top: 14px;
      display: inline-flex;
      padding: 8px 14px;
      border-radius: 999px;
      background: rgba(255,255,255,0.06);
      color: var(--accent);
      font-size: 0.8125rem;
      font-weight: 500;
      align-self: center;
      text-align: center;
    }

    /* ===== FAQ ===== */
    .FAQ__card {
      border: 1px solid var(--color-border);
      border-radius: 20px;
      padding: 1.5rem;
      background: var(--color-off-black);
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .FAQ__question {
      font-size: 1rem;
      font-weight: 600;
      margin-bottom: 0;
    }
    .FAQ__answer {
      color: var(--color-text-secondary);
      font-size: 0.875rem;
      line-height: 1.65;
      font-weight: 300;
      margin: 0;
    }

    /* ===== REVIEWS ===== */
    .Reviews__header {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-bottom: 1.5rem;
    }
    .Reviews__nav {
      display: flex;
      gap: 8px;
    }
    .Reviews__slider {
      overflow: hidden;
      width: 100%;
    }
    .Reviews__track {
      display: flex;
      gap: 10px;
      transition: transform 0.35s ease;
      will-change: transform;
    }
    .Reviews__card {
      flex: 0 0 100%;
      border: 1px solid var(--color-border);
      border-radius: 20px;
      padding: 1.5rem;
      background: var(--color-off-black);
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    @media (min-width: 1024px) {
      .Reviews__card { flex: 0 0 calc((100% - 10px) / 2); }
    }
    .Review__head {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .Review__avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--color-deep-gray);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      font-size: 0.8rem;
      color: var(--color-white);
      flex-shrink: 0;
    }
    .Review__name {
      font-size: 0.9375rem;
      font-weight: 600;
    }
    .Review__text {
      color: var(--color-text-secondary);
      font-size: 0.875rem;
      line-height: 1.65;
      font-weight: 300;
    }

    /* ===== CONTACT ===== */
    .Contact {
      border-top: 1px solid var(--color-border);
      padding: 4rem 0;
      position: relative;
      overflow: hidden;
    }
    .Contact::before {
      content: "";
      position: absolute;
      inset: 0;
      background: url("images/texture-bg.webp") center / cover no-repeat;
      opacity: 0.25;
      pointer-events: none;
      z-index: 0;
    }
    .Contact::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(80,48,160,0.35) 0%, rgba(64,28,123,0.28) 50%, rgba(40,20,90,0.15) 100%);
      pointer-events: none;
      z-index: 0;
    }
    .Contact .container {
      position: relative;
      z-index: 1;
    }
    @media (min-width: 1024px) {
      .Contact { padding: 6rem 0; }
    }
    .Contact__grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 2.5rem;
      align-items: start;
    }
    @media (min-width: 900px) {
      .Contact__grid {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
      }
    }
    .Contact__info { text-align: left; }
    .Contact__title {
      font-size: 2rem;
      font-weight: 700;
      margin-bottom: 0.75rem;
      letter-spacing: -0.01em;
    }
    @media (min-width: 1024px) {
      .Contact__title { font-size: 2.5rem; }
    }
    .Contact__desc {
      color: var(--color-text-secondary);
      font-size: 0.9375rem;
      max-width: 440px;
      margin: 0 0 2rem;
      line-height: 1.7;
      font-weight: 300;
    }
    .Contact__details {
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
      max-width: 440px;
    }
    .Contact__detail {
      display: flex;
      flex-direction: column;
      gap: 4px;
      padding-top: 1.25rem;
      border-top: 1px solid var(--color-border);
    }
    .Contact__label {
      color: var(--color-text-secondary);
      font-size: 0.75rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      font-weight: 500;
    }
    .Contact__value {
      color: var(--color-white);
      font-size: 1.125rem;
      font-weight: 500;
      letter-spacing: 0.01em;
      transition: var(--transition);
    }
    .Contact__value:hover { opacity: 0.7; }
    .Contact__form {
      display: flex;
      flex-direction: column;
      gap: 14px;
      padding: 1.75rem;
      border: 1px solid var(--color-border);
      border-radius: 16px;
      background: rgba(255,255,255,0.02);
    }
    @media (min-width: 1024px) {
      .Contact__form { padding: 2rem; }
    }
    .Contact__field-label {
      display: block;
      color: var(--color-text-secondary);
      font-size: 0.75rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      font-weight: 500;
      margin-bottom: 6px;
    }
    .Contact__input {
      width: 100%;
      border: 1px solid var(--color-border);
      border-radius: 10px;
      background: transparent;
      color: var(--color-white);
      padding: 12px 14px;
      font-family: var(--font-future);
      font-size: 0.9375rem;
      outline: none;
      text-align: left;
      transition: var(--transition);
    }
    .Contact__input--textarea {
      min-height: 120px;
      resize: vertical;
      line-height: 1.5;
      font-family: inherit;
    }
    .Contact__input::placeholder { color: rgba(255,255,255,0.28); }
    .Contact__input:focus {
      border-color: rgba(255,255,255,0.5);
      background: rgba(255,255,255,0.03);
    }
    .Contact__submit {
      align-self: flex-start;
      margin-top: 4px;
    }
    .Contact__note {
      font-size: 0.8125rem;
      min-height: 1.2em;
      color: var(--color-text-secondary);
    }
    .Contact__note.error { color: #ff8d8d; }
    .Contact__note.success { color: var(--color-white); }

    /* ===== SOLUTION CARDS ===== */
    .Solution__icon {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.18);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--color-white);
      margin-bottom: 0.625rem;
      flex-shrink: 0;
    }
    .Solution__icon svg { width: 22px; height: 22px; }
    .Solution__name {
      font-size: 1.125rem;
      font-weight: 700;
      margin-bottom: 0.5rem;
      color: var(--color-white);
    }
    @media (min-width: 1024px) {
      .Solution__name { font-size: 1.25rem; }
    }

    /* ===== FOOTER ===== */
    .Footer {
      border-top: 1px solid var(--color-border);
      padding-top: 3rem;
    }
    @media (min-width: 1024px) {
      .Footer { padding-top: 5rem; }
    }
    .Footer__logo {
      height: 64px;
      width: 64px;
      object-fit: cover;
      border-radius: 12px;
      margin-bottom: 3rem;
      margin-left: -12px;
      display: block;
    }
    @media (min-width: 1024px) {
      .Footer__logo { height: 72px; width: 72px; margin-bottom: 3.5rem; margin-left: -16px; }
    }
    .Footer__grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 2rem;
    }
    @media (min-width: 1024px) {
      .Footer__grid { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
    }
    .Footer__col-title {
      font-size: 0.875rem;
      font-weight: 600;
      margin-bottom: 1.25rem;
      color: var(--color-white);
    }
    @media (min-width: 1024px) {
      .Footer__col-title { font-size: 1rem; margin-bottom: 1.5rem; }
    }
    .Footer__link {
      display: block;
      color: var(--color-text-secondary);
      font-size: 0.875rem;
      margin-bottom: 0.625rem;
      transition: opacity 0.3s;
      font-weight: 300;
    }
    .Footer__link:hover { color: var(--color-white); }
    .Footer__link--static { pointer-events: none; }
    .Footer__link--static:hover { color: var(--color-text-secondary); }
    .Footer__bottom {
      border-top: 1px solid var(--color-border);
      padding: 1.5rem 0 2rem;
      margin-top: 3rem;
      color: var(--color-text-secondary);
      font-size: 0.8125rem;
    }

    /* ===== MODAL ===== */
    .Modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.7);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 18px;
      z-index: 300;
    }
    .Modal-overlay[data-open="true"] { display: flex; }
    .Modal {
      width: min(920px, 100%);
      max-height: min(80vh, 760px);
      border-radius: 20px;
      border: 1px solid var(--color-border);
      background: var(--color-off-black);
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    .Modal__header {
      flex: 0 0 auto;
      background: var(--color-black);
      border-bottom: 1px solid var(--color-border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 20px;
    }
    .Modal__title {
      font-size: 1.125rem;
      font-weight: 700;
    }
    .Modal__close {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: 1px solid var(--color-border);
      background: transparent;
      color: var(--color-white);
      font-size: 1rem;
      transition: var(--transition);
    }
    .Modal__close:hover { border-color: var(--color-white); }
    .Modal__body {
      flex: 1 1 auto;
      overflow: auto;
      padding: 20px;
      color: var(--color-text-secondary);
      line-height: 1.65;
      font-size: 0.9375rem;
    }
    .Modal__body h3 {
      color: var(--color-white);
      margin: 20px 0 8px;
      font-size: 1rem;
      font-weight: 600;
    }
    .Modal__body ul {
      margin: 8px 0 14px;
      padding-left: 20px;
    }
    .Modal__body .note {
      border: 1px solid var(--color-border);
      border-radius: 12px;
      padding: 16px;
      background: rgba(255,255,255,0.02);
    }
    .Modal__body a { color: var(--accent); }
    .Modal__body a:hover { text-decoration: underline; }

    /* ===== SCROLL REVEAL =====
       FIX: scoped to html.js. Before, a script error (or a browser that
       blocks the script) left every [data-reveal] element stranded at
       opacity:0 - i.e. a blank page. Now the page fails open. */
    html.js [data-reveal] {
      opacity: 0;
      transform: translate3d(0, 22px, 0) scale(0.985);
      filter: blur(8px);
      transition:
        opacity 0.7s ease,
        transform 0.7s cubic-bezier(0.2,0.9,0.2,1),
        filter 0.7s ease;
      will-change: opacity, transform, filter;
    }
    html.js [data-reveal].is-visible {
      opacity: 1;
      transform: translate3d(0,0,0) scale(1);
      filter: blur(0);
    }
    html.js [data-reveal="left"] { transform: translate3d(-26px,0,0) scale(0.985); }
    html.js [data-reveal="right"] { transform: translate3d(26px,0,0) scale(0.985); }

    @media (prefers-reduced-motion: reduce) {
      html.js [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
      }
    }

    /* ===== SCROLLBAR HIDE UTILITY ===== */
    .hide-scrollbar { scrollbar-width: none; }
    .hide-scrollbar::-webkit-scrollbar { display: none; }

    /* ===== ABOUT WRAPPER (cosmos-style half black / half textured) ===== */
    .About-wrapper {
      position: relative;
      overflow: hidden;
    }
    .About-wrapper__bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
    }
    .About-wrapper__bg-top {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 50%;
      background: var(--color-black);
    }
    .About-wrapper__bg-bottom {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 50%;
      background: var(--color-eggshell-dark);
      overflow: hidden;
    }
    .About-wrapper__bg-bottom img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 200%;
      object-fit: cover;
      object-position: center bottom;
      opacity: 0.6;
    }
    .About-wrapper__features-fade {
      position: absolute;
      z-index: 1;
      top: 0;
      left: 0;
      width: 100%;
      height: 180px;
      background: linear-gradient(to bottom, var(--color-black) 0%, transparent 100%);
      pointer-events: none;
    }
    .About-wrapper .About {
      position: relative;
      z-index: 2;
    }

    /* ===== LIGHT SECTIONS ===== */
    .Section--eggshell-dark {
      background: var(--color-eggshell-dark);
      color: var(--color-black);
      border-top: none;
      padding: 3rem 0 1.5rem;
    }
    @media (min-width: 1024px) {
      .Section--eggshell-dark { padding: 4.5rem 0 2rem; }
    }
    .Section--eggshell-dark .Section__title { color: var(--color-black); }
    .Section--eggshell-dark .Section__subtitle {
      color: var(--color-on-light-muted);
      font-size: 0.9375rem;
      font-weight: 300;
      margin-top: -1.5rem;
      margin-bottom: 0;
      line-height: 1.7;
    }

    .Section--eggshell {
      background: var(--color-eggshell);
      color: var(--color-black);
      border-top: none;
      padding: 2rem 0 3rem;
    }
    @media (min-width: 1024px) {
      .Section--eggshell { padding: 2.5rem 0 4.5rem; }
    }
    .Section--eggshell .Section__title {
      color: var(--color-black);
      font-size: 1.25rem;
      font-weight: 600;
      margin-bottom: 1.25rem;
    }
    @media (min-width: 1024px) {
      .Section--eggshell .Section__title { font-size: 1.5rem; margin-bottom: 1.5rem; }
    }

    /* ===== PRICING CAROUSEL (mobile) / GRID (desktop) ===== */
    .Pricing__header {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-bottom: 1.25rem;
    }
    .Pricing__nav {
      display: flex;
      gap: 8px;
    }
    .Pricing__nav--mobile .Arrow-btn {
      background: rgba(0,0,0,0.06);
      border-color: rgba(0,0,0,0.1);
      color: var(--color-black);
    }
    .Pricing__nav--mobile .Arrow-btn:hover {
      background: rgba(0,0,0,0.12);
    }
    .Pricing__slider {
      overflow: hidden;
      width: 100%;
      /* Horizontal swipe is handled in JS; this keeps vertical page
         scrolling working while a finger is on the track. */
      touch-action: pan-y;
    }
    .Pricing__track {
      display: flex;
      gap: 12px;
      transition: transform 0.35s ease;
      will-change: transform;
    }
    @media (prefers-reduced-motion: reduce) {
      .Pricing__track { transition: none; }
    }
    @media (min-width: 1024px) {
      .Pricing__nav--mobile { display: none; }
      .Pricing__status { display: none; }
      /* update() clears the inline transform when the grid takes over, so
         no !important is needed - and an !important here would fight the
         inline transform the carousel sets below 1024px. */
      .Pricing__track { display: grid; gap: 12px; }
      .Pricing__track[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
      .Pricing__track[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
    }
    .Pricing__status {
      font-family: var(--font-future-mono);
      font-size: 0.6875rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--color-on-light-muted);
      align-self: center;
    }
    .Pricing__card {
      flex: 0 0 100%;
      background: #fff;
      border: 1px solid rgba(0,0,0,0.08);
      border-radius: 20px;
      padding: 1.5rem;
      display: flex;
      flex-direction: column;
      text-align: center;
      transition: var(--transition);
    }
    @media (min-width: 1024px) {
      .Pricing__card { padding: 2rem 1.5rem; border-radius: 24px; }
    }
    /* FIX: from 640px to 1023px - every tablet and landscape phone - the JS
       assumed two cards were visible while this rule kept them at 100%.
       maxIndex came out as 2 instead of 3, so the fourth card (the most
       expensive product) could never be reached. Now the CSS actually shows
       two, and the JS measures rather than assumes. */
    @media (min-width: 640px) and (max-width: 1023px) {
      .Pricing__card { flex: 0 0 calc((100% - 12px) / 2); }
    }
    .Pricing__card:hover {
      border-color: rgba(0,0,0,0.18);
      box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    }
    .Pricing__card-title {
      font-size: 1.25rem;
      font-weight: 700;
      color: var(--color-black);
      margin-bottom: 4px;
    }
    /* FIX: was rgba(0,0,0,0.45) = 3.35:1 on white. Now 6.21:1. */
    .Pricing__card-sub {
      font-size: 0.875rem;
      font-weight: 300;
      color: var(--color-on-light-muted);
      margin-bottom: 20px;
      min-height: 2.6em;
    }
    .Pricing__prices {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 16px;
    }
    .Pricing__price-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 14px;
      border-radius: 10px;
      background: rgba(0,0,0,0.03);
      font-size: 0.8125rem;
      color: var(--color-on-light-muted);
    }
    .Pricing__price-row b {
      font-weight: 600;
      color: var(--color-black);
      font-size: 0.9375rem;
    }
    .Pricing__card-note {
      margin-top: auto;
      padding-top: 12px;
      display: inline-flex;
      align-self: center;
      padding: 6px 14px;
      border-radius: 9999px;
      background: rgba(0,0,0,0.05);
      color: rgba(0,0,0,0.6);
      font-size: 0.8125rem;
      font-weight: 500;
    }
    /* Pill button overrides for light sections */
    .Section--eggshell .Pill--black,
    .Section--eggshell-dark .Pill--black {
      background: var(--color-black);
      color: var(--color-white);
    }
    .Section--eggshell .Pill--black:hover,
    .Section--eggshell-dark .Pill--black:hover {
      background: var(--color-white);
      color: var(--color-black);
    }
    .Pill--eggshell {
      background: var(--color-eggshell);
      color: var(--color-black);
    }
    .Pill--eggshell:hover {
      background: var(--color-off-black);
      color: var(--color-white);
    }

    /* ===== BOTS CARDS ON LIGHT BACKGROUND ===== */
    .Section--eggshell-dark .Card {
      background: #fff;
      border-color: rgba(0,0,0,0.08);
      color: var(--color-black);
    }
    .Section--eggshell-dark .Card:hover {
      border-color: rgba(0,0,0,0.18);
      box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    }
    .Section--eggshell-dark .Bot__name {
      color: var(--color-black);
    }
    .Section--eggshell-dark .Bot__desc {
      color: var(--color-on-light-muted);
    }
    .Section--eggshell-dark .Bot__desc b {
      color: var(--color-black);
    }
    .Section--eggshell-dark .Bot__logo {
      border: none;
      background: transparent;
    }
    .Section--eggshell-dark .Pill--off-black {
      background: var(--color-black);
      color: var(--color-white);
    }
    .Section--eggshell-dark .Pill--off-black:hover {
      background: var(--color-white);
      color: var(--color-black);
    }
    .Section--eggshell-dark .Pill--outline {
      color: var(--color-black);
      border-color: rgba(0,0,0,0.2);
    }
    .Section--eggshell-dark .Pill--outline:hover {
      background: var(--color-black);
      color: var(--color-white);
      border-color: var(--color-black);
    }
    .Section--eggshell-dark .Section__title {
      color: var(--color-black);
    }
    .Section--eggshell-dark .Arrow-btn {
      color: var(--color-black);
      border-color: rgba(0,0,0,0.2);
    }
    .Section--eggshell-dark .Arrow-btn:hover {
      border-color: rgba(0,0,0,0.5);
      background: rgba(0,0,0,0.05);
    }
    .Section--eggshell-dark .Card--glow::before {
      display: none;
    }
    .Section--eggshell-dark .Solution__icon {
      background: rgba(0,0,0,0.05);
      border-color: rgba(0,0,0,0.12);
      color: var(--color-black);
    }
    .Section--eggshell-dark .Solution__name {
      color: var(--color-black);
    }

    /* ===== PRICING HEADER on eggshell ===== */
    #pricing .Section__title {
      font-size: 1.5rem;
      font-weight: 700;
      margin-bottom: 2rem;
    }
    @media (min-width: 1024px) {
      #pricing .Section__title { font-size: 2.25rem; margin-bottom: 2.5rem; }
    }
    .Section--eggshell .Section__subtitle {
      color: var(--color-on-light-muted);
      font-size: 0.9375rem;
      font-weight: 300;
      margin-top: -1.5rem;
      margin-bottom: 0;
      line-height: 1.7;
    }

    /* Remove border-top on light sections */
    .Section--eggshell-dark.Section,
    .Section--eggshell.Section,
    .Section--eggshell-dark,
    .Section--eggshell {
      border-top: none;
    }

    /* ===== MOBILE-ONLY OVERRIDES ===== */
    @media (max-width: 1023px) {

      /* Prevent double-tap zoom on buttons/links */
      button, a, .Arrow-btn {
        touch-action: manipulation;
      }

      .Hero__visual {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        margin-top: 0;
        z-index: 0;
        pointer-events: none;
      }

      /* Hide lang switcher in mobile menu */
      .Nav__mobile-lang {
        display: none;
      }

      /* Instant show/hide for mobile menu + gray background */
      .Nav__mobile {
        transform: none;
        transition: opacity 0.15s ease, visibility 0.15s;
        background: var(--color-off-black);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
      }
      .Nav__mobile.open {
        transform: none;
      }

      /* Remove staggered link animations */
      .Nav__mobile-link {
        opacity: 1;
        transform: none;
        transition: color 0.3s;
        -webkit-tap-highlight-color: transparent;
      }
      /* was var(--color-black) on an off-black sheet: a focused link vanished */
      .Nav__mobile-link:active,
      .Nav__mobile-link:focus {
        color: var(--accent);
      }
    }
  

    /* ===== SUBPAGE HERO ===== */
    .PageHero {
      position: relative;
      padding: 8.25rem var(--px-mobile) 3.5rem;
      overflow: hidden;
    }
    @media (min-width: 1024px) {
      .PageHero {
        padding: 11.5rem var(--px-desktop) 5rem;
        max-width: calc(var(--layout-max-width) + 2 * var(--px-desktop));
        margin: 0 auto;
      }
    }
    .PageHero__inner { position: relative; z-index: 2; max-width: var(--layout-max-width); margin: 0 auto; }
    .PageHero__eyebrow {
      font-family: var(--font-future-mono);
      font-size: 0.6875rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--color-text-secondary);
      margin-bottom: 1rem;
      display: block;
    }
    /* Same clamp, weight, tracking and feature settings as the home page
       hero, so the two headlines are visibly one type system. */
    .PageHero__title {
      font-size: clamp(2.15rem, 1.2rem + 4.2vw, 4.25rem);
      font-weight: 500;
      line-height: 1.06;
      letter-spacing: -0.035em;
      font-feature-settings: "ss02", "ss09";
      max-width: 16ch;
      text-wrap: balance;
    }
    .PageHero__title strong { font-weight: 500; }
    .PageHero__desc {
      margin-top: 1.5rem;
      font-size: 1rem;
      font-weight: 300;
      color: var(--color-text-secondary);
      max-width: 56ch;
      line-height: 1.65;
    }
    @media (min-width: 1024px) {
      .PageHero__desc { font-size: 1.125rem; }
    }
    .PageHero__cta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2rem; }
    @media (min-width: 1024px) {
      .PageHero__cta { gap: 10px; }
    }
    /* Same backdrop recipe as the home page: one slow low-contrast grid and
       one soft lime glow. Two composited layers, one transform animation. */
    .PageHero__bg {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      overflow: hidden;
    }
    .PageHero__grid-bg {
      position: absolute;
      inset: -80px;
      background-image:
        linear-gradient(to right, rgba(255,255,255,0.055) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.055) 1px, transparent 1px);
      background-size: 64px 64px;
      -webkit-mask-image: radial-gradient(112% 88% at 22% 42%, #000 0%, rgba(0,0,0,0.55) 46%, transparent 78%);
      mask-image: radial-gradient(112% 88% at 22% 42%, #000 0%, rgba(0,0,0,0.55) 46%, transparent 78%);
      animation: grid-drift 44s linear infinite;
      will-change: transform;
    }
    @keyframes grid-drift {
      from { transform: translate3d(0, 0, 0); }
      to   { transform: translate3d(-64px, -64px, 0); }
    }
    .PageHero__glow {
      position: absolute;
      left: -12%;
      top: 4%;
      width: min(1100px, 118%);
      aspect-ratio: 1.35 / 1;
      background: radial-gradient(closest-side,
        rgba(var(--accent-rgb), 0.125) 0%,
        rgba(var(--accent-rgb), 0.055) 38%,
        rgba(var(--accent-rgb), 0.018) 62%,
        transparent 78%);
      filter: blur(18px);
    }
    @media (min-width: 1024px) {
      .PageHero__glow { left: -6%; top: 0; width: min(1200px, 82%); }
    }
    @media (prefers-reduced-motion: reduce) {
      .PageHero__grid-bg { animation: none; }
    }

    /* ===== SECTION SUBTITLE (dark) ===== */
    .Section__lead {
      color: var(--color-text-secondary);
      font-size: 0.9375rem;
      font-weight: 300;
      line-height: 1.7;
      max-width: 62ch;
      margin: -1.25rem 0 2rem;
    }
    /* FIX: was rgba(0,0,0,0.55) = 4.33:1 on the eggshell. Now 5.47:1. */
    .Section--eggshell-dark .Section__lead { color: var(--color-on-light-muted); }

    /* ===== WORK / PORTFOLIO ===== */
    .Work__grid {
      display: grid;
      gap: 12px;
      grid-template-columns: 1fr;
    }
    @media (min-width: 640px) { .Work__grid { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 1024px) { .Work__grid--3 { grid-template-columns: repeat(3, 1fr); } }
    .Work__card {
      background: var(--color-off-black);
      border: 1px solid var(--color-border);
      border-radius: 20px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition: border-color 300ms ease-in-out, transform 300ms ease-in-out, box-shadow 300ms ease-in-out;
    }
    .Work__card:hover,
    .Work__card:focus-within {
      border-color: rgba(var(--accent-rgb), 0.45);
      transform: translateY(-2px);
      box-shadow: 0 10px 34px rgba(0,0,0,0.45);
    }
    @media (prefers-reduced-motion: reduce) {
      .Work__card:hover, .Work__card:focus-within { transform: none; }
    }
    .Work__body { padding: 1.25rem; display: flex; flex-direction: column; gap: 8px; flex: 1; }
    @media (min-width: 1024px) { .Work__body { padding: 1.5rem; } }
    .Work__meta {
      font-family: var(--font-future-mono);
      font-size: 0.625rem;
      font-weight: 500;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--accent-text);
    }
    .Work__name {
      font-size: 1.25rem;
      font-weight: 700;
      letter-spacing: -0.015em;
      line-height: 1.2;
    }
    .Work__desc { font-size: 0.875rem; font-weight: 300; color: var(--color-text-secondary); line-height: 1.65; }
    .Work__facts {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 5px;
      margin-top: 2px;
    }
    .Work__facts li {
      position: relative;
      padding-left: 16px;
      font-size: 0.8125rem;
      font-weight: 300;
      color: var(--color-text-secondary);
      line-height: 1.5;
    }
    .Work__facts li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 7px;
      width: 6px;
      height: 6px;
      border-radius: 2px;
      background: var(--accent);
    }
    .Work__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 14px; }
    .Work__tag {
      font-family: var(--font-future-mono);
      font-size: 0.6875rem;
      letter-spacing: 0.04em;
      padding: 4px 10px;
      border-radius: 9999px;
      border: 1px solid var(--color-border);
      color: var(--color-text-secondary);
    }
    .Work__link {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      margin-top: 4px;
      font-family: var(--font-future-mono);
      font-size: 0.6875rem;
      font-weight: 500;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--accent);
      border-bottom: 1px solid rgba(var(--accent-rgb), 0.35);
      padding-bottom: 3px;
      align-self: flex-start;
      transition: border-color 0.25s ease;
    }
    .Work__link:hover { border-bottom-color: var(--accent); }
    .Work__link svg { width: 12px; height: 12px; flex: 0 0 auto; }
    .Work__note {
      margin-top: 4px;
      font-family: var(--font-future-mono);
      font-size: 0.6875rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.55);
      align-self: flex-start;
    }

    /* ===== STEPS / PROCESS ===== */
    .Steps {
      display: grid;
      gap: 12px;
      grid-template-columns: 1fr;
      counter-reset: step;
    }
    @media (min-width: 640px) { .Steps { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 1024px) { .Steps { grid-template-columns: repeat(4, 1fr); } }
    .Step {
      border-top: 1px solid var(--color-border);
      padding-top: 1rem;
    }
    .Step {
      border-top: 1px solid var(--color-border);
      padding-top: 1.25rem;
      transition: border-color 0.3s ease;
    }
    .Step:hover { border-top-color: rgba(var(--accent-rgb), 0.55); }
    .Step__num {
      font-family: var(--font-future-mono);
      font-size: 0.75rem;
      font-weight: 500;
      letter-spacing: 0.2em;
      color: var(--accent);
      display: block;
      margin-bottom: 12px;
    }
    .Step__title { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 8px; }
    .Step__text { font-size: 0.875rem; font-weight: 300; color: var(--color-text-secondary); line-height: 1.65; }
    .Section--eggshell-dark .Step { border-color: rgba(0,0,0,0.14); }
    .Section--eggshell-dark .Step__num { color: var(--accent-ink); }
    .Section--eggshell-dark .Step__text { color: var(--color-on-light-muted); }
    .Section--eggshell-dark .Step__title { color: var(--color-black); }

    /* ===== AI ADD-ON STRIP ===== */
    .Addons { display: grid; gap: 10px; grid-template-columns: 1fr; }
    @media (min-width: 640px) { .Addons { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 1024px) { .Addons { grid-template-columns: repeat(4, 1fr); } }
    .Addon {
      border: 1px solid var(--color-border);
      border-radius: 16px;
      padding: 1.125rem;
      display: flex;
      flex-direction: column;
      gap: 8px;
      transition: var(--transition);
    }
    .Addon:hover { border-color: rgba(255,255,255,0.35); }
    .Addon__title { font-size: 0.9375rem; font-weight: 500; }
    .Addon__text { font-size: 0.8125rem; font-weight: 300; color: var(--color-text-secondary); line-height: 1.6; }
    .Addon__price {
      font-family: var(--font-future-mono);
      font-size: 0.75rem;
      color: var(--color-white);
      opacity: 0.85;
      margin-top: auto;
      padding-top: 8px;
    }

    /* ===== PRICE FEATURE LIST (inside Pricing__card) ===== */
    .Price__feats {
      list-style: none;
      text-align: left;
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 18px;
    }
    .Price__feats li {
      font-size: 0.8125rem;
      font-weight: 300;
      color: var(--color-on-light-muted);
      line-height: 1.5;
      padding-left: 22px;
      position: relative;
    }
    .Price__feats li::before {
      content: "";
      position: absolute;
      left: 3px;
      top: 6px;
      width: 8px;
      height: 5px;
      border-left: 2px solid var(--accent-ink);
      border-bottom: 2px solid var(--accent-ink);
      transform: rotate(-45deg);
    }
    /* The two things that are free and are the reason to choose us get the
       weight of a statement, not of a bullet. */
    .Price__feats li.is-included {
      color: var(--color-black);
      font-weight: 500;
    }
    .Pricing__amount {
      font-size: 1.875rem;
      font-weight: 700;
      color: var(--color-black);
      line-height: 1.1;
      letter-spacing: -0.02em;
      display: block;
    }
    /* The "from" / "nuo" qualifier, set apart from the figure itself. */
    .Pricing__amount .Pricing__from {
      display: block;
      font-family: var(--font-future-mono);
      font-size: 0.625rem;
      font-weight: 500;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--accent-on-light);
      margin-bottom: 4px;
    }
    .Pricing__amount .Pricing__from[hidden] { display: none; }
    /* FIX: was rgba(0,0,0,0.45) = 3.35:1 on white. Now 6.21:1. */
    .Pricing__amount small {
      display: block;
      font-size: 0.75rem;
      font-weight: 400;
      color: var(--color-on-light-muted);
      margin-top: 6px;
      letter-spacing: 0;
    }
    .Pricing__card--featured {
      border-color: var(--color-black);
      box-shadow: 0 6px 26px rgba(0,0,0,0.12);
    }
    /* Black chip, lime word: 18.29 : 1, and it carries the accent onto the
       light section without ever putting lime on a light ground. */
    .Pricing__badge {
      align-self: center;
      font-family: var(--font-future-mono);
      font-size: 0.6875rem;
      font-weight: 500;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      background: var(--color-black);
      color: var(--accent);
      padding: 5px 13px;
      border-radius: 9999px;
      margin-bottom: 12px;
    }
    /* Keeps the un-badged cards' titles on the same baseline as the
       badged one, so the four cards read as a row and not a staircase. */
    .Pricing__badge-spacer { display: block; height: 25px; margin-bottom: 12px; }
    @media (max-width: 1023px) { .Pricing__badge-spacer { display: none; } }
    .Pricing__divider {
      border: 0;
      border-top: 1px solid rgba(0,0,0,0.10);
      margin: 18px 0;
    }
    .Pricing__foot {
      margin-top: 1.5rem;
      font-size: 0.8125rem;
      font-weight: 300;
      color: var(--color-on-light-muted);
      line-height: 1.7;
      max-width: 70ch;
    }

    /* ===== FAQ ACCORDION =====
       Recovered from the deleted websites-a.html draft (a2d6957) and
       rebuilt as a real disclosure widget: a <button aria-expanded>
       per row, so it is reachable and announced by a screen reader. */
    .FAQ__list {
      display: grid;
      gap: 10px;
      grid-template-columns: 1fr;
      max-width: 900px;
    }
    .FAQ__item {
      border: 1px solid var(--color-border);
      border-radius: 16px;
      background: var(--color-off-black);
      overflow: hidden;
      transition: border-color 300ms ease-in-out;
    }
    .FAQ__item:hover { border-color: rgba(var(--accent-rgb), 0.4); }
    /* The heading carries the outline entry; the button inside it carries
       the interaction. Neither should impose its own type scale. */
    .FAQ__h { margin: 0; font-size: inherit; font-weight: inherit; }
    .FAQ__trigger {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      background: transparent;
      border: 0;
      color: var(--color-white);
      text-align: left;
      padding: 1.125rem 1.25rem;
      font-size: 0.9375rem;
      font-weight: 500;
      line-height: 1.4;
    }
    .FAQ__icon {
      flex: 0 0 auto;
      width: 22px;
      height: 22px;
      position: relative;
      border-radius: 50%;
      border: 1px solid rgba(var(--accent-rgb), 0.3);
      transition: transform 300ms ease, border-color 300ms ease;
    }
    .FAQ__icon::before,
    .FAQ__icon::after {
      content: "";
      position: absolute;
      background: var(--accent);
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    .FAQ__icon::before { width: 10px; height: 2px; }
    .FAQ__icon::after  { width: 2px; height: 10px; transition: opacity 200ms ease; }
    .FAQ__item[data-open="true"] .FAQ__icon { border-color: var(--accent); }
    .FAQ__item[data-open="true"] .FAQ__icon::after { opacity: 0; }
    .FAQ__panel {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows 300ms ease;
    }
    .FAQ__item[data-open="true"] .FAQ__panel { grid-template-rows: 1fr; }
    .FAQ__panel > div { overflow: hidden; }
    .FAQ__answer {
      padding: 0 1.25rem 1.25rem;
      font-size: 0.875rem;
      font-weight: 300;
      line-height: 1.7;
      color: var(--color-text-secondary);
      max-width: 68ch;
    }
    @media (prefers-reduced-motion: reduce) {
      .FAQ__panel, .FAQ__icon, .FAQ__icon::after { transition: none; }
    }
    /* No JS? Every answer is simply open. */
    html:not(.js) .FAQ__panel { grid-template-rows: 1fr; }
    html:not(.js) .FAQ__icon { display: none; }

    /* ===== SCREENSHOT SLOT =====
       Deliberately un-designed and visibly dashed: an empty frame, not a
       claim. Nothing goes in it until a real screenshot exists. */
    .Shot {
      position: relative;
      aspect-ratio: 16 / 10;
      border-bottom: 1px solid var(--color-border);
      background:
        radial-gradient(120% 90% at 50% 0%, rgba(var(--accent-rgb), 0.10), transparent 62%),
        var(--color-off-black);
      overflow: hidden;
    }
    .Shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
    .Shot__empty {
      position: absolute;
      inset: 12px;
      border: 1.5px dashed rgba(var(--accent-rgb), 0.5);
      border-radius: 12px;
      background: rgba(var(--accent-rgb), 0.035);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      text-align: center;
      padding: 12px;
    }
    .Shot__label {
      font-family: var(--font-future-mono);
      font-size: 0.625rem;
      font-weight: 500;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--accent-text);
    }
    .Shot__spec {
      font-family: var(--font-future-mono);
      font-size: 0.625rem;
      letter-spacing: 0.08em;
      color: var(--color-text-secondary);
    }


    /* ==================================================================
       THE ESTIMATOR
       ------------------------------------------------------------------
       Rebuilt on the configurator model. It used to be one tall dark box
       with every control stacked inside it and the price -- the entire
       payoff -- below the fold on a laptop. Now:
         - it is a section of its own, not a widget parked in the hero;
         - the options run down the LEFT in numbered steps;
         - the price rides along on the RIGHT in a sticky panel that also
           itemises what produced it, one line per chosen thing;
         - below 1024px that panel becomes a bar pinned to the bottom of
           the viewport, showing the running total and opening on tap.
       ================================================================== */
    .Est-section { scroll-margin-top: var(--nav-offset); }
    .Est__layout {
      display: grid;
      grid-template-columns: 1fr;
      gap: 2rem;
      align-items: start;
    }
    @media (min-width: 1024px) {
      .Est__layout {
        grid-template-columns: minmax(0, 1fr) minmax(340px, 400px);
        gap: 4rem;
      }
    }

    /* ---- LEFT: numbered steps ---------------------------------------- */
    .Est__steps { min-width: 0; }
    @media (max-width: 1023px) {
      /* clearance for the pinned summary bar */
      .Est__steps { padding-bottom: 92px; }
    }
    .Est__step {
      border: 0;
      min-width: 0;
      padding: 2.25rem 0 0;
      margin: 0;
      border-top: 1px solid var(--color-border);
    }
    .Est__step:first-of-type { border-top: 0; padding-top: 0; }
    .Est__step + .Est__step { margin-top: 2.25rem; }
    @media (min-width: 1024px) {
      .Est__step { padding-top: 2.75rem; }
      .Est__step + .Est__step { margin-top: 2.75rem; }
    }
    .Est__legend {
      display: block;
      width: 100%;
      padding: 0;
      margin-bottom: 1.125rem;
    }
    .Est__legend-row {
      display: flex;
      align-items: baseline;
      gap: 14px;
    }
    .Est__num {
      font-family: var(--font-future-mono);
      font-size: 0.75rem;
      font-weight: 500;
      letter-spacing: 0.2em;
      color: var(--accent);
      line-height: 1;
      flex: 0 0 auto;
    }
    .Est__step-title {
      font-size: 1.0625rem;
      font-weight: 600;
      letter-spacing: -0.015em;
      line-height: 1.25;
      color: var(--color-white);
    }
    @media (min-width: 1024px) {
      .Est__step-title { font-size: 1.1875rem; }
    }
    .Est__step-hint {
      display: block;
      margin: 8px 0 0 34px;
      font-size: 0.8125rem;
      font-weight: 300;
      line-height: 1.55;
      color: var(--color-text-secondary);
      max-width: 46ch;
    }

    /* ---- Options ------------------------------------------------------ */
    .Opts { display: flex; flex-wrap: wrap; gap: 8px; }
    .Opts--cards {
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
    }
    @media (min-width: 560px) {
      .Opts--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    .Opt { position: relative; display: block; cursor: pointer; min-width: 0; }
    .Opt input {
      position: absolute;
      opacity: 0;
      width: 0;
      height: 0;
    }
    /* --- plain chip option (step 02) --- */
    .Opt__chip {
      display: flex;
      align-items: baseline;
      gap: 8px;
      border: 1px solid var(--color-border);
      border-radius: 12px;
      padding: 10px 15px;
      font-size: 0.875rem;
      font-weight: 400;
      color: var(--color-text-secondary);
      line-height: 1.35;
      transition: var(--transition);
    }
    .Opt:hover .Opt__chip { border-color: rgba(255,255,255,0.4); color: var(--color-white); }
    .Opt input:checked ~ .Opt__chip {
      background: var(--accent);
      border-color: var(--accent);
      color: var(--color-black);   /* black on lime, always */
      font-weight: 500;
    }
    .Opt__price {
      font-family: var(--font-future-mono);
      font-size: 0.75rem;
      opacity: 0.72;
      white-space: nowrap;
    }
    .Opt input:checked ~ .Opt__chip .Opt__price { opacity: 0.62; }
    .Opt__price:empty { display: none; }

    /* --- icon card option (steps 01 and 04) --- */
    .Opt__card {
      display: flex;
      align-items: center;
      gap: 13px;
      height: 100%;
      border: 1px solid var(--color-border);
      border-radius: 16px;
      padding: 13px 15px;
      background: rgba(255,255,255,0.015);
      transition: var(--transition);
    }
    .Opt:hover .Opt__card {
      border-color: rgba(var(--accent-rgb), 0.4);
      background: rgba(255,255,255,0.03);
    }
    .Opt input:checked ~ .Opt__card {
      border-color: var(--accent);
      background: rgba(var(--accent-rgb), 0.09);
    }
    .Opt input:checked ~ .Opt__card .Ic {
      background: var(--accent);
      border-color: var(--accent);
      --ic-key: #000;
      --ic-sub: rgba(0,0,0,0.5);
    }
    .Opt__body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
    .Opt__name {
      font-size: 0.9375rem;
      font-weight: 500;
      color: var(--color-white);
      line-height: 1.25;
    }
    .Opt__card .Opt__price {
      font-size: 0.6875rem;
      letter-spacing: 0.06em;
      color: var(--color-text-secondary);
      opacity: 1;
    }
    .Opt input:checked ~ .Opt__card .Opt__price { color: var(--accent); }
    .Opt input:focus-visible ~ .Opt__chip,
    .Opt input:focus-visible ~ .Opt__card {
      outline: 2px solid var(--accent);
      outline-offset: 3px;
    }
    /* A checkbox option earns a tick box; a radio option does not. */
    .Opt__tick {
      margin-left: auto;
      flex: 0 0 auto;
      width: 20px;
      height: 20px;
      border-radius: 6px;
      border: 1px solid var(--color-border);
      position: relative;
      transition: var(--transition);
    }
    .Opt input:checked ~ .Opt__card .Opt__tick {
      background: var(--accent);
      border-color: var(--accent);
    }
    .Opt__tick::after {
      content: "";
      position: absolute;
      left: 5px;
      top: 5.5px;
      width: 8px;
      height: 4px;
      border-left: 2px solid var(--color-black);
      border-bottom: 2px solid var(--color-black);
      transform: rotate(-45deg) scale(0.6);
      opacity: 0;
      transition: opacity 0.2s ease, transform 0.2s ease;
    }
    .Opt input:checked ~ .Opt__card .Opt__tick::after { opacity: 1; transform: rotate(-45deg) scale(1); }

    /* ---- LANGUAGE STEPPER --------------------------------------------
       Two language versions are included. The control only asks how many
       EXTRA ones you want, at a flat rate each. */
    .Stepper {
      display: flex;
      align-items: center;
      gap: 12px;
      border: 1px solid var(--color-border);
      border-radius: 14px;
      padding: 8px 12px;
      width: max-content;
      max-width: 100%;
    }
    .Stepper__btn {
      width: 34px;
      height: 34px;
      flex: 0 0 auto;
      border-radius: 50%;
      border: 1px solid var(--color-border);
      background: transparent;
      color: var(--color-white);
      font-size: 1.125rem;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: var(--transition);
    }
    .Stepper__btn:hover:not(:disabled) {
      background: var(--accent);
      color: var(--color-black);
      border-color: var(--accent);
    }
    .Stepper__btn:disabled { opacity: 0.32; cursor: not-allowed; }
    .Stepper__value {
      min-width: 2.5ch;
      text-align: center;
      font-family: var(--font-future-mono);
      font-size: 1.0625rem;
      font-weight: 700;
      color: var(--color-white);
    }
    .Stepper__total {
      font-family: var(--font-future-mono);
      font-size: 0.75rem;
      letter-spacing: 0.06em;
      color: var(--accent);
      padding-left: 4px;
      white-space: nowrap;
    }

    /* ---- RIGHT: the summary panel ------------------------------------- */
    .Est__summary {
      border: 1px solid rgba(var(--accent-rgb), 0.24);
      border-radius: 20px;
      background:
        linear-gradient(180deg, rgba(var(--accent-rgb), 0.055), rgba(var(--accent-rgb), 0) 46%),
        var(--color-off-black);
      min-width: 0;
    }
    @media (min-width: 1024px) {
      .Est__summary {
        position: sticky;
        top: calc(var(--nav-offset) + 18px);
      }
    }
    .Est__panel { padding: 1.5rem; }
    @media (min-width: 1024px) { .Est__panel { padding: 1.625rem; } }
    .Est__sum-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 1.125rem;
    }
    .Est__sum-title {
      font-family: var(--font-future-mono);
      font-size: 0.6875rem;
      font-weight: 500;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--accent);
    }
    .Est__weeks {
      font-family: var(--font-future-mono);
      font-size: 0.6875rem;
      letter-spacing: 0.06em;
      color: var(--color-text-secondary);
      border: 1px solid var(--color-border);
      border-radius: 999px;
      padding: 4px 10px;
      white-space: nowrap;
    }

    /* ---- itemised breakdown ---- */
    .Est__lines { list-style: none; display: block; }
    .Est__line {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 14px;
      padding: 10px 0;
      border-bottom: 1px solid rgba(255,255,255,0.075);
    }
    .Est__line-k {
      font-size: 0.875rem;
      font-weight: 300;
      color: rgba(255,255,255,0.82);
      line-height: 1.4;
      min-width: 0;
    }
    .Est__line-v {
      font-family: var(--font-future-mono);
      font-size: 0.8125rem;
      font-weight: 500;
      color: var(--color-white);
      white-space: nowrap;
      flex: 0 0 auto;
    }
    /* An included line states the word, not a zero. */
    .Est__line--incl .Est__line-v {
      font-size: 0.6875rem;
      font-weight: 500;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--accent);
    }
    .Est__rule {
      border: 0;
      border-top: 1px solid rgba(var(--accent-rgb), 0.3);
      margin: 14px 0 12px;
    }
    .Est__total {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 14px;
    }
    .Est__total-k {
      font-family: var(--font-future-mono);
      font-size: 0.6875rem;
      font-weight: 500;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--color-text-secondary);
      padding-bottom: 5px;
    }
    .Est__figure { text-align: right; min-width: 0; }
    .Est__from {
      display: block;
      font-family: var(--font-future-mono);
      font-size: 0.625rem;
      font-weight: 500;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 3px;
    }
    .Est__from:empty { display: none; }
    .Est__amount {
      font-size: 1.75rem;
      font-weight: 700;
      line-height: 1.05;
      letter-spacing: -0.03em;
      color: var(--color-white);
      overflow-wrap: anywhere;
    }
    @media (min-width: 1024px) { .Est__amount { font-size: 2rem; } }
    /* Only shown for the one package the owner published as a band. The
       lines above the rule always sum to the LOW end; this says what moves
       the figure towards the high end. */
    .Est__bandnote {
      margin-top: 8px;
      font-family: var(--font-future-mono);
      font-size: 0.6875rem;
      letter-spacing: 0.05em;
      color: var(--color-text-secondary);
      text-align: right;
    }
    .Est__bandnote[hidden] { display: none; }

    /* A recurring cost is not part of a one-off total, so it sits under the
       rule on its own line and never inside the sum. */
    .Est__monthly {
      display: none;
      align-items: baseline;
      justify-content: space-between;
      gap: 14px;
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px dashed rgba(255,255,255,0.14);
      font-size: 0.8125rem;
      font-weight: 300;
      color: var(--color-text-secondary);
    }
    .Est__monthly[data-show="true"] { display: flex; }
    .Est__monthly b {
      font-family: var(--font-future-mono);
      font-size: 0.8125rem;
      font-weight: 500;
      color: var(--color-white);
      white-space: nowrap;
    }

    /* ---- UPSELL NOTICE -----------------------------------------------
       Shown when a configuration crosses into the next package's starting
       price. Without it a cheaper product could be configured to cost more
       than the better product that already contains it. It is the smartest
       thing on the page, so it is the one solid lime object in the panel. */
    .Est__upsell {
      display: none;
      gap: 12px;
      align-items: flex-start;
      margin-top: 18px;
      border: 1px solid rgba(var(--accent-rgb), 0.34);
      border-radius: 14px;
      background: rgba(var(--accent-rgb), 0.07);
      padding: 13px 14px;
    }
    .Est__upsell[data-show="true"] { display: flex; }
    .Est__upsell-ic {
      flex: 0 0 auto;
      width: 28px;
      height: 28px;
      border-radius: 9px;
      background: var(--accent);
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .Est__upsell-ic svg { width: 15px; height: 15px; color: var(--color-black); }
    .Est__upsell-body { min-width: 0; }
    .Est__upsell-tag {
      display: block;
      font-family: var(--font-future-mono);
      font-size: 0.625rem;
      font-weight: 500;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 4px;
    }
    .Est__upsell-text {
      font-size: 0.8125rem;
      font-weight: 300;
      line-height: 1.55;
      color: rgba(255,255,255,0.85);
    }
    .Est__upsell-text b { color: var(--accent); font-weight: 500; }

    .Est__note {
      font-size: 0.75rem;
      font-weight: 300;
      color: var(--color-text-secondary);
      line-height: 1.6;
      margin-top: 16px;
    }
    .Est__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1.125rem; }

    /* ---- MOBILE: the summary becomes a pinned bar ---------------------- */
    .Est__bar { display: none; }
    @media (max-width: 1023px) {
      .Est__summary {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 180;
        border-radius: 18px 18px 0 0;
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
        background: var(--color-off-black);
        box-shadow: 0 -16px 44px rgba(0,0,0,0.6);
        display: flex;
        flex-direction: column;
        max-height: 84vh;
        transform: translateY(105%);
        transition: transform 0.28s cubic-bezier(0.33,1,0.68,1);
      }
      /* It only rides the viewport while the options are on screen; the rest
         of the page is not covered by a bar that has nothing to say. */
      .Est__summary[data-visible="true"] { transform: translateY(0); }
      .Est__bar {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        flex: 0 0 auto;
        background: transparent;
        border: 0;
        color: var(--color-white);
        padding: 15px var(--px-mobile);
        text-align: left;
      }
      .Est__bar-k {
        font-family: var(--font-future-mono);
        font-size: 0.6875rem;
        font-weight: 500;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--accent);
      }
      .Est__bar-v {
        margin-left: auto;
        font-size: 1.125rem;
        font-weight: 700;
        letter-spacing: -0.02em;
      }
      .Est__bar-chev {
        flex: 0 0 auto;
        width: 9px;
        height: 9px;
        border-right: 2px solid var(--accent);
        border-bottom: 2px solid var(--accent);
        transform: translateY(-2px) rotate(-135deg);
        transition: transform 0.25s ease;
      }
      .Est__summary[data-open="true"] .Est__bar-chev {
        transform: translateY(2px) rotate(45deg);
      }
      .Est__panel {
        display: none;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 0 var(--px-mobile) calc(18px + env(safe-area-inset-bottom));
        border-top: 1px solid rgba(var(--accent-rgb), 0.24);
        padding-top: 16px;
      }
      .Est__summary[data-open="true"] .Est__panel { display: block; }
      .Est__sum-head { margin-bottom: 0.875rem; }
      /* No JS: nothing can open the sheet, so it is not a sheet. It drops back
         into the flow under the options as a plain card. */
      html:not(.js) .Est__summary {
        position: static;
        transform: none;
        max-height: none;
        border: 1px solid rgba(var(--accent-rgb), 0.24);
        border-radius: 18px;
        box-shadow: none;
      }
      html:not(.js) .Est__bar { display: none; }
      html:not(.js) .Est__panel {
        display: block;
        padding: 1.5rem;
        border-top: 0;
      }
      html:not(.js) .Est__steps { padding-bottom: 0; }
    }
    @media (prefers-reduced-motion: reduce) {
      .Est__summary { transition: none; }
    }

    /* Screen-reader-only live region: the running total is announced even
       when the panel is collapsed into the bar. */
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      clip-path: inset(50%);
      white-space: nowrap;
      border: 0;
    }

    /* ===== FACT STRIP under the hero copy ===== */
    .Hero__facts {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
      margin-top: 2.25rem;
      padding-top: 1.75rem;
      border-top: 1px solid var(--color-border);
      list-style: none;
    }
    @media (min-width: 720px) {
      .Hero__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 32px; }
    }
    .Hero__facts li {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      font-size: 0.875rem;
      font-weight: 300;
      color: rgba(255,255,255,0.78);
      line-height: 1.5;
      min-width: 0;
    }
    .Hero__tick {
      flex: 0 0 auto;
      width: 18px;
      height: 18px;
      border-radius: 6px;
      background: var(--accent);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-top: 1px;
    }
    .Hero__tick svg { width: 11px; height: 11px; color: var(--color-black); display: block; }