:root {
      --bg: #000;
      --fg: #fff;
      --muted: #999;
      --line: #444;
      --pad: clamp(1.25rem, 4vw, 3rem);
      --pad-x: clamp(0.625rem, 2vw, 1.5rem);
      --max: 72rem;
      --ease-apple: cubic-bezier(0.4, 0, 0.6, 1);
      --ease-apple-out: cubic-bezier(0.32, 0.08, 0.24, 1);
      --ease-apple-expo: cubic-bezier(0.86, 0, 0.07, 1);
      --font: "Inter", system-ui, sans-serif;
      --fill: #3a3a3a;
      --glow-blue: rgba(88, 176, 232, 0.52);
      --glow-gold: rgba(212, 158, 52, 0.28);
      --radius-btn: 0.95rem;
      --radius-tile: 1.5rem;
      --corner-smooth: superellipse(1.6);
      --frost: color-mix(in srgb, var(--fg) 9%, transparent);
      --frost-line: color-mix(in srgb, var(--fg) 12%, transparent);
      --frost-blur: saturate(1.25) blur(22px);
      --alert: #ff453a;
    }

    * { box-sizing: border-box; }
    html {
      scroll-behavior: smooth;
      scroll-padding-top: 4.75rem;
      background-color: var(--bg);
    }
    html::before {
      content: "";
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: min(52rem, 88vh);
      pointer-events: none;
      z-index: 0;
      background:
        radial-gradient(ellipse 78% 82% at 18% -8%, var(--glow-blue), transparent 62%),
        radial-gradient(ellipse 46% 58% at 88% -12%, var(--glow-gold), transparent 56%);
      background-repeat: no-repeat;
      background-position: center top;
      background-size: 100% 100%;
      animation: glow-breathe 18s var(--ease-apple) infinite alternate;
    }
    html::after {
      content: none;
    }
    @keyframes glow-breathe {
      0% {
        opacity: 0.78;
        background-size: 100% 100%;
      }
      100% {
        opacity: 1;
        background-size: 118% 112%;
      }
    }
    body {
      margin: 0;
      background: transparent;
      color: var(--fg);
      font-family: var(--font);
      font-size: 1.05rem;
      line-height: 1.5;
      position: relative;
      z-index: 1;
    }
    button, input, select, textarea { font-family: inherit; }

    a { color: var(--fg); }
    a.brand { text-decoration: none; color: var(--fg); }
    .wrap { max-width: var(--max); margin: 0 auto; padding: var(--pad) var(--pad-x); }
    main.wrap { padding-top: 0.45rem; }

    .hero-headline {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      width: 100%;
      max-width: none;
      margin: 0 0 1.25rem;
    }
    .hero-headline h1 {
      width: 100%;
      max-width: 22em;
      margin: 0 auto;
      text-align: center;
      align-self: center;
      font-size: clamp(1.35rem, 3.1vw, 2.15rem);
      line-height: 1.2;
    }
    .hero-headline h1 .hero-break {
      display: block;
    }
    .hero-copy .ticker {
      width: 100%;
      max-width: none;
      overflow: hidden;
      margin-top: 0.7rem;
      -webkit-mask-image: linear-gradient(
        to right,
        transparent,
        #000 3.5rem,
        #000 calc(100% - 3.5rem),
        transparent
      );
      mask-image: linear-gradient(
        to right,
        transparent,
        #000 3.5rem,
        #000 calc(100% - 3.5rem),
        transparent
      );
      -webkit-mask-size: 100% 100%;
      mask-size: 100% 100%;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
    }
    .ticker-track {
      display: flex;
      align-items: center;
      gap: 0.35rem;
      width: max-content;
      animation: ticker-run 28s linear infinite;
      will-change: transform;
    }
    .ticker-tag {
      flex: 0 0 auto;
      font-family: var(--font);
      font-size: 0.75rem;
      line-height: 1.2;
      color: var(--muted);
      border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
      padding: 0.28rem 0.62rem;
      white-space: nowrap;
      border-radius: 999px;
      corner-shape: var(--corner-smooth);
    }
    @keyframes ticker-run {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }
    @media (prefers-reduced-motion: reduce) {
      .ticker-track,
      .res-track { animation: none; }
      html::before,
      .header-scrim,
      .header-scrim span,
      .mega,
      .mega::after,
      .mega-inner,
      .nav-chevron,
      .hl-dot-fill,
      .hl-city-stat span,
      .cal-ev.is-enter,
      .cal-ev.is-leave,
      #hero .btn { animation: none !important; }
      .hl-city-stat span {
        opacity: 1 !important;
        transform: none !important;
      }
      .bento-int-icons .int-icon,
      .bento-int-stat { transition: none !important; }
      .bento-int-icons .int-icon,
      .ill-orbit-ring,
      .ill-svc,
      .ill-svc img,
      .hero-bento > .bento-tile.is-eco .bento-shot { animation: none !important; }
      .problem-ill.has-art.is-chaos .ill-logo-in {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
      }
      .problem-ill.has-art .ill-logo-face,
      .problem-ill.has-art .ill-logo-name { transition: none !important; animation: none !important; }
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 20;
      overflow: visible;
      background: transparent;
      border-bottom: 1px solid transparent;
    }
    .header-scrim {
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      height: 5.5rem;
      z-index: 19;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.5s var(--ease-apple);
    }
    body:has(.site-header.is-scrolled) .header-scrim,
    body.is-inner .header-scrim {
      opacity: 1;
    }
    .header-scrim span {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: 100%;
      backdrop-filter: saturate(1.2) blur(var(--blur));
      -webkit-backdrop-filter: saturate(1.2) blur(var(--blur));
      -webkit-mask-image: var(--mask);
      mask-image: var(--mask);
    }
    .header-scrim span:nth-child(1) {
      --blur: 22px;
      --mask: linear-gradient(to bottom, #000 0%, #000 28%, transparent 58%);
    }
    .header-scrim span:nth-child(2) {
      --blur: 12px;
      --mask: linear-gradient(to bottom, transparent 16%, #000 34%, #000 46%, transparent 72%);
    }
    .header-scrim span:nth-child(3) {
      --blur: 6px;
      --mask: linear-gradient(to bottom, transparent 36%, #000 52%, #000 62%, transparent 88%);
    }
    .header-scrim span:nth-child(4) {
      --blur: 2px;
      --mask: linear-gradient(to bottom, transparent 54%, #000 70%, #000 78%, transparent 100%);
    }
    .header-scrim span:nth-child(5) {
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      -webkit-mask-image: none;
      mask-image: none;
      background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--bg) 58%, transparent) 0%,
        color-mix(in srgb, var(--bg) 18%, transparent) 48%,
        transparent 100%
      );
    }
    .site-header > .wrap {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem 1.5rem;
      flex-wrap: nowrap;
      padding-top: 0.85rem;
      padding-bottom: 0.85rem;
    }
    .header-brand {
      display: flex;
      align-items: center;
      gap: 1.25rem 1.75rem;
      min-width: 0;
    }
    .header-burger {
      display: none;
      position: relative;
      width: 2.5rem;
      height: 2.5rem;
      margin: 0;
      padding: 0;
      border: none;
      border-radius: 0.55rem;
      background: transparent;
      color: var(--fg);
      cursor: pointer;
      place-items: center;
      flex-shrink: 0;
      z-index: 2;
    }
    .header-burger-icon {
      display: block;
      width: 24px;
      height: 24px;
      transition: opacity 0.2s var(--ease-apple);
    }
    .header-burger-x {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      pointer-events: none;
    }
    .header-burger-x span {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 1.05rem;
      height: 1.5px;
      margin: -0.75px 0 0 -0.525rem;
      border-radius: 1px;
      background: currentColor;
      opacity: 0;
      transition: transform 0.32s var(--ease-apple-out), opacity 0.2s var(--ease-apple);
    }
    .site-header.is-mega-open .header-burger-icon { opacity: 0; }
    .site-header.is-mega-open .header-burger-x span { opacity: 1; }
    .site-header.is-mega-open .header-burger-x span:nth-child(1) {
      transform: rotate(45deg);
    }
    .site-header.is-mega-open .header-burger-x span:nth-child(2) {
      transform: rotate(-45deg);
    }
    .mega-mobile-only { display: none; }
    .site-header .brand {
      font-size: 1.35rem;
      font-weight: 700;
      line-height: 1;
      margin: 0;
      letter-spacing: -0.02em;
    }
    .header-end {
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      gap: 0.65rem 0.85rem;
      flex-shrink: 0;
    }
    .lang-switch {
      --lang-pad: 2px;
      position: relative;
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: stretch;
      isolation: isolate;
      flex-shrink: 0;
      height: 1.75rem;
      min-width: 5.1rem;
      padding: var(--lang-pad);
      border: none;
      border-radius: 0.55rem;
      background: rgba(120, 120, 128, 0.32);
      box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.06);
    }
    .lang-switch-thumb {
      position: absolute;
      top: var(--lang-pad);
      bottom: var(--lang-pad);
      left: var(--lang-pad);
      width: calc(50% - var(--lang-pad));
      border-radius: 0.42rem;
      background: #636366;
      box-shadow:
        0 1px 1px rgba(0, 0, 0, 0.18),
        0 1px 3px rgba(0, 0, 0, 0.28),
        inset 0 0.5px 0 rgba(255, 255, 255, 0.22);
      pointer-events: none;
      z-index: 0;
      transition: transform 0.32s var(--ease-apple-out);
    }
    .lang-switch.is-en .lang-switch-thumb {
      transform: translateX(100%);
    }
    .lang-switch button {
      appearance: none;
      position: relative;
      z-index: 1;
      border: 0;
      background: transparent;
      color: rgba(255, 255, 255, 0.55);
      cursor: pointer;
      font-family: var(--font);
      font-size: 0.7rem;
      font-weight: 650;
      letter-spacing: 0.04em;
      line-height: 1;
      padding: 0 0.55rem;
      border-radius: 0.42rem;
    }
    .lang-switch button[aria-selected="true"] {
      color: #fff;
    }
    .lang-switch button:focus-visible {
      outline: 2px solid color-mix(in srgb, var(--fg) 55%, transparent);
      outline-offset: 2px;
    }
    @media (prefers-reduced-motion: reduce) {
      .lang-switch-thumb { transition: none; }
    }
    .header-nav {
      display: none;
      align-items: center;
      gap: 1.5rem;
      font-family: var(--font);
      font-size: 1rem;
      line-height: 1;
    }
    .header-nav > a,
    .nav-item > a {
      color: var(--fg);
      text-decoration: none;
      line-height: 1;
    }
    .header-nav > a:hover,
    .nav-item > a:hover { opacity: 0.65; }
    .nav-item {
      position: static;
    }
    .nav-item.has-mega {
      display: flex;
      align-items: center;
    }
    .nav-item.has-mega > a {
      display: inline-flex;
      align-items: center;
      gap: 0.28rem;
    }
    .nav-chevron {
      width: 0.72em;
      height: 0.72em;
      flex-shrink: 0;
      transform-origin: 50% 50%;
      transition: transform 0.48s var(--ease-apple-expo);
    }
    .mega {
      display: block;
      visibility: hidden;
      pointer-events: none;
      position: absolute;
      left: 0;
      right: 0;
      top: 100%;
      z-index: 21;
      padding: 2rem 0 2.4rem;
      overflow: visible;
      transition: visibility 0s linear 0.48s;
    }
    .mega::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 100%;
      height: 1.75rem;
    }
    .mega::after {
      content: "";
      position: absolute;
      inset: 0;
      background: var(--frost);
      backdrop-filter: var(--frost-blur);
      -webkit-backdrop-filter: var(--frost-blur);
      border: 1px solid var(--frost-line);
      border-radius: var(--radius-tile);
      corner-shape: var(--corner-smooth);
      z-index: -1;
      transform: scaleY(0);
      transform-origin: top;
      transition: transform 0.48s var(--ease-apple-out);
    }
    .mega-inner {
      position: relative;
      opacity: 0;
      transform: translateY(-12px);
      transition:
        opacity 0.24s var(--ease-apple),
        transform 0.32s var(--ease-apple);
    }
    @media (min-width: 900px) {
      .nav-item.has-mega:hover .nav-chevron,
      .nav-item.has-mega:focus-within .nav-chevron {
        transform: rotate(180deg);
      }
      .nav-item.has-mega:hover .mega,
      .nav-item.has-mega:focus-within .mega {
        visibility: visible;
        pointer-events: auto;
        transition-delay: 0s;
      }
      .nav-item.has-mega:hover .mega::after,
      .nav-item.has-mega:focus-within .mega::after {
        transform: scaleY(1);
      }
      .nav-item.has-mega:hover .mega-inner,
      .nav-item.has-mega:focus-within .mega-inner {
        opacity: 1;
        transform: none;
        transition:
          opacity 0.4s var(--ease-apple) 0.08s,
          transform 0.5s var(--ease-apple-out) 0.08s;
      }
      body:has(.nav-item.has-mega:hover)::before,
      body:has(.nav-item.has-mega:focus-within)::before {
        opacity: 1;
        visibility: visible;
        transition:
          opacity 0.32s var(--ease-apple),
          visibility 0s linear 0s;
      }
    }
    .mega-inner {
      display: grid;
      grid-template-columns: minmax(12rem, 1.2fr) 0.9fr 0.9fr;
      gap: 1.85rem 3rem;
      align-items: start;
    }
    .mega-label {
      font-family: var(--font);
      font-size: 0.7rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--muted);
      line-height: 1;
      margin: 0 0 calc(-0.38rem + 0.22rem);
    }
    .mega-col {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0.38rem;
    }
    .mega-col a {
      color: var(--fg);
      text-decoration: none;
      font-family: var(--font);
      font-size: 1rem;
      line-height: 1.25;
    }
    .mega-col a:hover { opacity: 0.65; }
    .mega-col-main a {
      font-size: 1.35rem;
      font-weight: 700;
    }
    .mega-col-main a.mega-sub {
      font-size: 0.95rem;
      font-weight: 400;
      color: var(--muted);
      margin-top: 0.35rem;
    }
    body::before {
      content: "";
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.55);
      z-index: 19;
      pointer-events: none;
      opacity: 0;
      visibility: hidden;
      transition:
        opacity 0.32s var(--ease-apple),
        visibility 0s linear 0.32s;
    }
    .header-actions {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      width: 0;
      opacity: 0;
      overflow: hidden;
      pointer-events: none;
      transform: translateY(-4px);
      transition: opacity 0.25s ease, transform 0.25s ease, width 0.25s ease;
    }
    .header-actions.is-visible {
      width: auto;
      opacity: 1;
      overflow: visible;
      pointer-events: auto;
      transform: none;
    }
    .header-actions .btn {
      padding: 0.45rem 0.8rem;
      font-size: 0.75rem;
      white-space: nowrap;
    }
    .site-header.is-past-hero .tagline { display: none; }
    .section {
      border: 1px solid var(--line);
      margin: 0 0 1.5rem;
      padding: var(--pad) var(--pad-x);
    }
    #hero.section,
    #audience.section,
    #problem.section,
    #solution.section,
    #modules.section,
    #integrations.section,
    #powered.section,
    #proof.section,
    #pricing.section,
    #how.section,
    #final-cta.section {
      border: none;
      background: transparent;
    }
    #powered.section { overflow: visible; }
    #hero.section { padding-top: 0; }
    #hero > .label { display: none; }
    .label {
      font-family: var(--font);
      font-size: 0.7rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--muted);
      margin: 0 0 1rem;
    }
    .label.is-alert {
      font-size: 0.68rem;
      font-weight: 600;
      letter-spacing: 0.14em;
      color: var(--alert);
      margin: 0 0 0.45rem;
    }
    #problem h2 {
      max-width: none;
    }
    @media (min-width: 900px) {
      #problem h2 { white-space: nowrap; }
    }
    .brand {
      font-size: clamp(2.5rem, 8vw, 5rem);
      font-weight: 700;
      line-height: 1;
      margin: 0;
      letter-spacing: -0.02em;
    }
    .brand-sub {
      font-size: 1rem;
      color: var(--muted);
      margin: 0.35rem 0 2rem;
    }
    .hero-layout {
      display: flex;
      flex-direction: column;
      gap: 1.75rem;
    }
    .hero-copy {
      text-align: center;
    }
    .hero-copy .secondary {
      font-size: clamp(0.92rem, 1.5vw, 1.05rem);
      color: var(--muted);
      margin: 0 0 0.15rem;
      max-width: none;
      font-weight: 400;
    }
    .hero-copy .cta-row {
      margin-top: 0.35rem;
      justify-content: center;
    }
    .hero-bento {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0.7rem;
    }
    .hero-bento-cluster {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0.7rem;
      min-width: 0;
    }
    .hero-bento-minis {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.7rem;
      min-width: 0;
    }
    .bento-tile {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      min-height: 13.5rem;
      padding: 1.15rem 1.2rem;
      border: 1px dashed var(--line);
      border-radius: var(--radius-tile);
      corner-shape: var(--corner-smooth);
      background: var(--fill);
      text-decoration: none;
      color: var(--fg);
      overflow: hidden;
    }
    .bento-tile:hover { border-color: var(--fg); }
    .bento-tile.bento-tall { min-height: 17rem; }
    .bento-stat {
      position: relative;
      z-index: 1;
      font-size: clamp(2rem, 4.2vw, 3.4rem);
      line-height: 0.95;
      font-weight: 700;
      letter-spacing: -0.03em;
      margin: 0 0 0.4rem;
    }
    .bento-tile.has-shot {
      border-style: solid;
      padding: 0.75rem 0.75rem 1.1rem;
      justify-content: flex-end;
    }
    .hero-bento .bento-tile,
    .hero-bento .bento-tile.has-shot {
      aspect-ratio: 3 / 2;
      min-width: 0;
      min-height: 0;
      border: 1px solid var(--frost-line);
      justify-content: flex-start;
      padding: 1.5rem 1.55rem 1.45rem;
      background: var(--frost);
      backdrop-filter: var(--frost-blur);
      -webkit-backdrop-filter: var(--frost-blur);
    }
    .hero-bento .bento-tile.is-mini {
      aspect-ratio: 1;
      width: 100%;
      height: auto;
      padding: 1.5rem 1.05rem 1rem;
    }
    .hero-bento .bento-tile.is-mini .bento-ph {
      font-size: 0.62rem;
    }
    .hero-bento .bento-tile.is-int,
    .hero-bento .bento-tile.is-mods,
    .hero-bento .bento-tile.is-profit,
    .hero-bento .bento-tile.is-eco {
      overflow: hidden;
    }
    .hero-bento .bento-tile.is-int .bento-head,
    .hero-bento .bento-tile.is-mods .bento-head,
    .hero-bento .bento-tile.is-profit .bento-head {
      position: relative;
      z-index: 3;
    }
    .bento-mods {
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      align-content: flex-start;
      align-items: flex-start;
      gap: 0.32rem 0.42rem;
      flex: 1 1 auto;
      min-height: 0;
      overflow: hidden;
    }
    .mod-chip {
      display: inline-flex;
      align-items: center;
      gap: 0.28rem;
      font-size: 0.58rem;
      line-height: 1.15;
      color: var(--muted);
      white-space: nowrap;
      transition: color 0.1s var(--ease-apple);
    }
    .mod-chip.is-hot {
      color: #dedede;
    }
    @media (hover: hover) and (min-width: 900px) {
      .bento-tile.is-mods:hover .mod-chip {
        color: #dedede;
      }
    }
    .mod-icon {
      --mod: #919191;
      --icon: none;
      width: 1.28rem;
      height: 1.28rem;
      border-radius: 0.32rem;
      display: grid;
      place-items: center;
      flex-shrink: 0;
      position: relative;
      background: color-mix(in srgb, var(--fg) 12%, transparent);
      border: 1px solid color-mix(in srgb, var(--fg) 10%, transparent);
      backdrop-filter: saturate(1.2) blur(10px);
      -webkit-backdrop-filter: saturate(1.2) blur(10px);
      transition: background 0.1s var(--ease-apple), border-color 0.1s var(--ease-apple);
    }
    .mod-icon img {
      width: 0.78rem;
      height: 0.78rem;
      object-fit: contain;
      display: block;
      opacity: 0;
    }
    .mod-icon::after {
      content: "";
      position: absolute;
      width: 0.78rem;
      height: 0.78rem;
      background: var(--mod-idle, var(--mod));
      -webkit-mask: var(--icon) center / contain no-repeat;
      mask: var(--icon) center / contain no-repeat;
      transition: background 0.1s var(--ease-apple);
    }
    .mod-icon.is-cyan { --mod: #32ade6; --icon: url("assets/icons/modules/groups.svg?v=2"); }
    .mod-icon.is-blue { --mod: #007aff; --mod-idle: #5eb1ff; --icon: url("assets/icons/modules/users.svg?v=2"); }
    .mod-icon.is-indigo { --mod: #5856d6; --mod-idle: #8b89f0; --icon: url("assets/icons/modules/locations.svg?v=2"); }
    .mod-icon.is-green { --mod: #34c759; --icon: url("assets/icons/modules/news.svg"); }
    .mod-icon.is-yellow { --mod: #fc0; --icon: url("assets/icons/modules/verification.svg"); }
    .mod-icon.is-pink { --mod: #ff2d55; --icon: url("assets/icons/modules/bookings.svg"); }
    .mod-icon.is-gray { --mod: #919191; --mod-idle: #d0d0d0; --icon: url("assets/icons/modules/support.svg"); }
    .mod-icon.is-parking { --mod: #007aff; --mod-idle: #5eb1ff; --icon: url("assets/icons/modules/parking.svg"); }
    .mod-chip.is-hot .mod-icon {
      background: var(--mod);
      border-color: transparent;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    .mod-chip.is-hot .mod-icon::after {
      background: #fff;
    }
    @media (hover: hover) and (min-width: 900px) {
      .bento-tile.is-mods:hover .mod-icon {
        background: var(--mod);
        border-color: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
      }
      .bento-tile.is-mods:hover .mod-icon::after {
        background: #fff;
      }
    }
    .bento-int {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      overflow: hidden;
      pointer-events: none;
    }
    .bento-int-glow {
      position: absolute;
      left: 50%;
      top: 58%;
      width: 8.4rem;
      height: 8.4rem;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      background:
        conic-gradient(from 200deg at 50% 50%,
          rgba(88, 176, 232, 0.95),
          rgba(88, 176, 232, 0.4),
          rgba(232, 181, 106, 0.42),
          rgba(88, 176, 232, 0.95));
      filter: blur(22px);
      opacity: 0.95;
    }
    .bento-int-stat {
      position: relative;
      z-index: 2;
      margin-top: 1.15rem;
      font-size: clamp(3.1rem, 6vw, 4.15rem);
      font-weight: 700;
      letter-spacing: -0.1em;
      line-height: 0.78;
      color: #fff;
      transform: scale(1);
      transform-origin: center center;
      transition:
        transform 0.55s var(--ease-apple-out),
        opacity 0.4s var(--ease-apple),
        filter 0.45s var(--ease-apple);
    }
    .bento-int-icons {
      position: absolute;
      inset: 0;
      z-index: 1;
    }
    .bento-int-icons .int-icon {
      position: absolute;
      right: auto;
      bottom: auto;
      width: 1.55rem;
      height: 1.55rem;
      opacity: 0.94;
      box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
      transition:
        top 0.55s var(--ease-apple-out),
        left 0.55s var(--ease-apple-out),
        width 0.55s var(--ease-apple-out),
        height 0.55s var(--ease-apple-out),
        transform 0.55s var(--ease-apple-out),
        filter 0.5s var(--ease-apple),
        opacity 0.45s var(--ease-apple),
        box-shadow 0.45s var(--ease-apple);
    }
    .bento-int-icons .int-icon:nth-child(1) {
      --r: -10deg;
      top: 28%;
      left: 6%;
      width: 1.28rem;
      height: 1.28rem;
      transform: rotate(var(--r));
      filter: blur(2.4px);
      opacity: 0.82;
    }
    .bento-int-icons .int-icon:nth-child(2) {
      --r: 12deg;
      top: 24%;
      left: calc(95% - 1.42rem);
      width: 1.42rem;
      height: 1.42rem;
      transform: rotate(var(--r));
      filter: blur(1.4px);
      opacity: 0.88;
    }
    .bento-int-icons .int-icon:nth-child(3) {
      --r: -16deg;
      top: 52%;
      left: -0.4rem;
      width: 1.72rem;
      height: 1.72rem;
      transform: rotate(var(--r));
      filter: blur(0);
    }
    .bento-int-icons .int-icon:nth-child(4) {
      --r: 14deg;
      top: 48%;
      left: calc(100% + 0.45rem - 1.58rem);
      width: 1.58rem;
      height: 1.58rem;
      transform: rotate(var(--r));
      filter: blur(0.55px);
    }
    .bento-int-icons .int-icon:nth-child(5) {
      --r: 8deg;
      top: calc(90% - 1.12rem);
      left: 14%;
      width: 1.12rem;
      height: 1.12rem;
      transform: rotate(var(--r));
      filter: blur(3.4px);
      opacity: 0.74;
    }
    .bento-int-icons .int-icon:nth-child(6) {
      --r: -7deg;
      top: calc(88% - 0.98rem);
      left: calc(90% - 0.98rem);
      width: 0.98rem;
      height: 0.98rem;
      transform: rotate(var(--r));
      filter: blur(4.6px);
      opacity: 0.68;
    }
    @media (hover: hover) {
    .bento-tile.is-int:hover .bento-int-stat {
      transform: scale(0.28);
      opacity: 0;
      filter: blur(10px);
      z-index: 0;
    }
    .bento-tile.is-int:hover .bento-int-icons {
      z-index: 3;
    }
    .bento-tile.is-int:hover .bento-int-icons .int-icon {
      width: 1.42rem;
      height: 1.42rem;
      transform: rotate(0deg);
      filter: blur(0);
      opacity: 1;
      box-shadow: 0 6px 14px rgba(0, 0, 0, 0.28);
    }
    .bento-tile.is-int:hover .bento-int-icons .int-icon:nth-child(1) {
      top: calc(48% - 1.6rem);
      left: calc(50% - 2.49rem);
    }
    .bento-tile.is-int:hover .bento-int-icons .int-icon:nth-child(2) {
      top: calc(48% - 1.6rem);
      left: calc(50% - 0.71rem);
    }
    .bento-tile.is-int:hover .bento-int-icons .int-icon:nth-child(3) {
      top: calc(48% - 1.6rem);
      left: calc(50% + 1.07rem);
    }
    .bento-tile.is-int:hover .bento-int-icons .int-icon:nth-child(4) {
      top: calc(48% + 0.18rem);
      left: calc(50% - 2.49rem);
    }
    .bento-tile.is-int:hover .bento-int-icons .int-icon:nth-child(5) {
      top: calc(48% + 0.18rem);
      left: calc(50% - 0.71rem);
    }
    .bento-tile.is-int:hover .bento-int-icons .int-icon:nth-child(6) {
      top: calc(48% + 0.18rem);
      left: calc(50% + 1.07rem);
    }
    }
    .bento-cal {
      --cal-ev-h: 16px;
      --cal-gap: 1px;
      --cal-more-h: 12px;
      --cal-day-pad-top: 1.05rem;
      --cal-day-pad-bot: 3px;
      --cal-day-h: calc(
        var(--cal-day-pad-top)
        + (4 * var(--cal-ev-h))
        + (3 * var(--cal-gap))
        + var(--cal-gap)
        + var(--cal-more-h)
        + var(--cal-day-pad-bot)
      );
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      min-height: 0;
      overflow: hidden;
      pointer-events: none;
      background: #fff;
      color: #111;
      border-radius: 8px;
      border: 0.5px solid #d8d8d8;
    }
    .cal-weekdays {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      flex-shrink: 0;
      padding: 0.28rem 0 0.18rem;
    }
    .cal-weekdays span {
      font-size: 0.5rem;
      line-height: 1.4;
      font-weight: 400;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: #919191;
      text-align: center;
    }
    .cal-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
      flex: 1 1 auto;
      min-height: 0;
    }
    .cal-day {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 1px;
      min-width: 0;
      min-height: 0;
      overflow: hidden;
      padding: 1.05rem 2px 3px;
      border-top: 0.5px solid #d8d8d8;
      border-right: 0.5px solid #d8d8d8;
    }
    .cal-day:nth-child(4n) {
      border-right: none;
    }
    .cal-num {
      position: absolute;
      top: 3px;
      right: 5px;
      font-size: 0.62rem;
      line-height: 1;
      font-weight: 400;
      color: #111;
    }
    .cal-ev {
      display: block;
      height: 16px;
      flex-shrink: 0;
      padding: 0 4px 0 6px;
      border-radius: 4px;
      font-size: 0.5rem;
      line-height: 16px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      position: relative;
      background: var(--ev-bg);
      color: #111;
    }
    .cal-ev::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 2px;
      border-radius: 1px;
      background: var(--ev-accent);
    }
    .cal-ev.is-enter {
      animation: cal-ev-in 0.24s var(--ease-apple-out) both;
    }
    .cal-ev.is-leave {
      animation: cal-ev-out 0.15s var(--ease-apple) forwards;
    }
    @keyframes cal-ev-in {
      from {
        opacity: 0;
        height: 0;
        line-height: 0;
        transform: translateY(-4px);
      }
      to {
        opacity: 1;
        height: 16px;
        line-height: 16px;
        transform: translateY(0);
      }
    }
    @keyframes cal-ev-out {
      to {
        opacity: 0;
        height: 0;
        line-height: 0;
        transform: translateY(-3px);
      }
    }
    .cal-ev.is-indigo { --ev-bg: #ebebfa; --ev-accent: #5856d6; }
    .cal-ev.is-pink { --ev-bg: #ffe6eb; --ev-accent: #ff2d55; }
    .cal-ev.is-cyan { --ev-bg: #ebf8fe; --ev-accent: #5ac8fa; }
    .cal-ev.is-orange { --ev-bg: #fff2e0; --ev-accent: #ff9500; }
    .cal-ev.is-green { --ev-bg: #e7f8eb; --ev-accent: #34c759; }
    .cal-ev.is-blue { --ev-bg: #e0efff; --ev-accent: #007aff; }
    .cal-more {
      display: block;
      height: 12px;
      flex-shrink: 0;
      font-size: 0.5rem;
      line-height: 12px;
      color: #007aff;
      padding: 0 4px;
      white-space: nowrap;
      overflow: hidden;
    }
    .hero-bento .bento-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 0.85rem;
      flex-shrink: 0;
      margin: 0 0 1rem;
    }
    .hero-bento .bento-copy {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
      min-width: 0;
    }
    .hero-bento .bento-label,
    .hero-bento .bento-tile.has-shot .bento-label {
      max-width: none;
      min-width: 0;
      flex: 1 1 auto;
      flex-shrink: 1;
      white-space: normal;
      padding-right: 0;
      margin: 0;
    }
    .hero-bento .bento-secondary {
      font-size: 0.95rem;
      font-weight: 400;
      line-height: 1.45;
      color: var(--muted);
    }
    .hero-bento .bento-tile.has-shot .bento-label {
      margin: 0;
    }
    .hero-bento .bento-go {
      display: none;
    }
    .hero-bento .bento-ph {
      position: relative;
      inset: auto;
      flex: 1 1 auto;
      min-height: 0;
      padding: 0;
    }
    .hero-bento > .bento-tile.has-bleed {
      padding: 0;
    }
    .hero-bento > .bento-tile.has-bleed .bento-head {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      z-index: 2;
      margin: 0;
      padding: 1.5rem 1.55rem 0;
    }
    .hero-bento > .bento-tile.has-bleed .bento-shot {
      flex: 1 1 auto;
      width: 100%;
      height: 100%;
      max-height: none;
      object-fit: cover;
      object-position: center;
      opacity: 1;
      mix-blend-mode: normal;
    }
    .hero-bento > .bento-tile.is-eco {
      padding-left: 0;
      padding-bottom: 0;
    }
    .hero-bento > .bento-tile.is-eco .bento-head {
      padding-left: 1.55rem;
    }
    .hero-bento > .bento-tile.is-eco .bento-shot {
      width: 118%;
      max-width: none;
      flex: 1 1 0;
      min-height: 0;
      height: 0;
      margin: auto 0 0;
      align-self: stretch;
      object-fit: contain;
      object-position: left bottom;
      transform: scale(1.28);
      transform-origin: 0% 97.75%;
    }
    .bento-shot {
      position: relative;
      flex: 1 1 auto;
      width: 100%;
      min-height: 0;
      height: auto;
      max-height: 100%;
      object-fit: contain;
      object-position: center;
    }
    .bento-tile.has-shot .bento-label {
      position: relative;
      z-index: 1;
      flex-shrink: 0;
      margin-top: 0.65rem;
    }
    .bento-ph {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 3.35rem;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font);
      font-size: 0.72rem;
      color: var(--muted);
      padding: 1.5rem 1.5rem 0;
      text-align: center;
      pointer-events: none;
    }
    .bento-label {
      position: relative;
      z-index: 1;
      font-size: clamp(1.05rem, 1.8vw, 1.35rem);
      font-weight: 700;
      line-height: 1.2;
      max-width: 14ch;
      margin: 0;
      padding-right: 2.6rem;
    }
    .bento-go {
      position: absolute;
      right: 1rem;
      bottom: 1rem;
      width: 2rem;
      height: 2rem;
      border-radius: 50%;
      border: 1px solid var(--line);
      display: grid;
      place-items: center;
      font-size: 0.9rem;
      line-height: 1;
      z-index: 1;
    }
    .bento-tile:hover .bento-go { border-color: var(--fg); }
    .problem-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0.7rem;
      margin-top: 1.5rem;
    }
    .problem-block {
      display: flex;
      flex-direction: column;
      gap: 1.75rem;
      height: auto;
      min-height: 0;
      padding: 1.5rem 1.55rem 1.45rem;
      border: 1px solid var(--frost-line);
      border-radius: var(--radius-tile);
      corner-shape: var(--corner-smooth);
      background: var(--frost);
      backdrop-filter: var(--frost-blur);
      -webkit-backdrop-filter: var(--frost-blur);
      overflow: hidden;
    }
    .problem-block .secondary {
      font-size: 1.15rem;
      font-weight: 700;
      line-height: 1.25;
      color: var(--fg);
      margin: 0;
      max-width: none;
    }
    .problem-block p {
      margin: 0;
      max-width: none;
      font-size: 0.95rem;
      line-height: 1.45;
      color: var(--muted);
    }
    .problem-block .problem-lead {
      color: var(--muted);
    }
    #solution h2 {
      max-width: none;
    }
    @media (min-width: 900px) {
      #solution h2 { white-space: nowrap; }
    }
    .problem-block .caption {
      max-width: none;
      color: #c8c8c8;
    }
    .problem-ill {
      flex: 0 0 auto;
      width: 100%;
      aspect-ratio: 1 / 1;
      height: auto;
      min-height: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1rem;
      border: 1px dashed var(--frost-line);
      border-radius: 1rem;
      corner-shape: var(--corner-smooth);
      background: transparent;
      font-family: var(--font);
      font-size: 0.75rem;
      color: var(--muted);
      text-align: center;
    }
    .problem-ill.has-art {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0;
      width: 100%;
      margin-inline: 0;
      min-height: 0;
      padding: 0;
      border: none;
      overflow: hidden;
      color: var(--fg);
      text-align: center;
    }
    .problem-ill.has-art .ill-dots {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 148%;
      height: auto;
      aspect-ratio: 1 / 1;
      transform: translate(-50%, -50%);
      object-fit: cover;
      pointer-events: none;
    }
    .problem-block:has(> .is-chaos),
    .problem-block:has(> .is-revenue),
    .problem-block:has(> .is-channels),
    .problem-block:has(> .is-pnl) {
      overflow: visible;
    }
    #problem .problem-block {
      min-width: 0;
    }
    #problem .problem-block:has(> .is-chaos) {
      overflow-x: clip;
      overflow-y: visible;
    }
    #problem .problem-block:has(> .is-revenue) {
      overflow: visible;
    }
    .problem-ill.has-art.is-chaos,
    .problem-ill.has-art.is-revenue,
    .problem-ill.has-art.is-channels {
      width: 100%;
      margin-inline: 0;
      margin-top: 0;
      margin-bottom: 0;
      aspect-ratio: auto;
      height: auto;
      min-height: 0;
      overflow: visible;
    }
    .problem-ill.has-art.is-solve .ill-dots {
      opacity: 0.72;
    }
    .problem-ill.has-art.is-safari {
      overflow: hidden;
      align-items: stretch;
      justify-content: flex-start;
      padding: 0;
      margin: 0;
      width: 100%;
      background: transparent;
      border-radius: 1rem;
      corner-shape: round;
      clip-path: inset(0 round 1rem);
    }
    .safari-win {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 160%;
      min-height: 9.5rem;
      border: 0;
      border-radius: 0;
      corner-shape: round;
      background: transparent;
      box-shadow: none;
      overflow: hidden;
      color: #f5f5f7;
      text-align: left;
    }
    .safari-bar {
      display: flex;
      align-items: center;
      gap: 0.32rem;
      height: 2.7rem;
      padding: 0 0.45rem 0 0.65rem;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 58%),
        #121214;
      backdrop-filter: saturate(1.6) blur(22px);
      -webkit-backdrop-filter: saturate(1.6) blur(22px);
      border-bottom: 0.5px solid rgba(255, 255, 255, 0.06);
      flex: 0 0 auto;
    }
    .safari-lights {
      display: flex;
      align-items: center;
      gap: 0.42rem;
      flex: 0 0 auto;
      margin-right: 0.18rem;
    }
    .safari-lights i {
      display: block;
      width: 0.72rem;
      height: 0.72rem;
      border-radius: 100px;
      border: 0.5px solid rgba(0, 0, 0, 0.12);
      font-style: normal;
    }
    .safari-lights .is-close { background: #ff736a; }
    .safari-lights .is-min { background: #febc2e; }
    .safari-lights .is-max { background: #19c332; }
    .safari-tool {
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      width: 1.55rem;
      height: 1.55rem;
      color: rgba(255, 255, 255, 0.88);
      background: rgba(255, 255, 255, 0.08);
      box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.08);
      border-radius: 100px;
    }
    .safari-nav {
      display: none;
    }
    .safari-tool svg,
    .safari-nav svg,
    .safari-url svg {
      display: block;
      flex: 0 0 auto;
    }
    .safari-tool svg {
      width: 0.88rem;
      height: 0.88rem;
    }
    .safari-nav {
      gap: 0;
      padding: 0 0.12rem;
    }
    .safari-nav svg {
      width: 1.35rem;
      height: 1.35rem;
      padding: 0.18rem;
    }
    .safari-nav .is-mute {
      color: rgba(255, 255, 255, 0.28);
    }
    .safari-nav i {
      display: block;
      width: 1px;
      height: 0.85rem;
      background: rgba(230, 230, 230, 0.2);
      font-style: normal;
    }
    .safari-url {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 0.32rem;
      flex: 1 1 auto;
      min-width: 0;
      height: 1.7rem;
      padding: 0 0.45rem;
      border-radius: 100px;
      background: rgba(255, 255, 255, 0.08);
      box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.1);
      color: #fff;
    }
    .safari-url-mark {
      display: grid;
      place-items: center;
      width: 1rem;
      height: 1rem;
      border-radius: 0.28rem;
      background: #cfcfd4;
      color: #2c2c30;
      font-family: var(--font);
      font-size: 0.66rem;
      font-weight: 700;
      letter-spacing: -0.08em;
      line-height: 1;
      flex: 0 0 auto;
    }
    .safari-url-text {
      flex: 1 1 auto;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: center;
      font-family: var(--font);
      font-size: 0.68rem;
      font-weight: 510;
      letter-spacing: -0.02em;
      line-height: 1;
    }
    .safari-page {
      position: relative;
      flex: 1 1 auto;
      min-height: 0;
      overflow: hidden;
      background: #e6e6e6;
    }
    .safari-page img {
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 118%;
      max-width: none;
      height: auto;
    }
    .problem-ill.has-art .ill-logos {
      position: relative;
      inset: auto;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding: 0;
      overflow: visible;
    }
    .problem-ill.has-art .ill-logo {
      --s: 4rem;
      --d: 0ms;
      position: relative;
      flex: 0 0 auto;
      width: var(--s);
      height: var(--s);
      margin-left: calc(var(--s) * -0.64);
      padding: 0;
      box-sizing: border-box;
      background: transparent;
      overflow: visible;
      cursor: pointer;
    }
    .problem-ill.has-art .ill-logo-in {
      display: block;
      width: 100%;
      height: 100%;
    }
    .problem-ill.has-art.is-chaos .ill-logo-in {
      opacity: 0;
      transform: translateX(-130%);
    }
    .problem-ill.has-art.is-chaos .ill-logos.is-in .ill-logo-in {
      animation: ill-logo-slide 0.72s var(--ease-apple-out) var(--d) forwards;
    }
    @keyframes ill-logo-slide {
      from {
        opacity: 0;
        transform: translateX(-130%);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }
    .problem-ill.has-art .ill-logo-face {
      display: block;
      position: relative;
      width: 100%;
      height: 100%;
      transform: translateY(0);
      transition: transform 0.45s var(--ease-apple-out);
      filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.48)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.32));
    }
    .problem-ill.has-art .ill-logo-name {
      position: absolute;
      left: 50%;
      bottom: calc(100% + 0.4rem);
      top: auto;
      transform: translateX(-50%);
      font-family: var(--font);
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: -0.02em;
      line-height: 1.2;
      color: var(--fg);
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      text-shadow: 0 1px 8px rgba(0, 0, 0, 0.65);
      transition: opacity 0.22s var(--ease-apple-out);
    }
    .problem-ill.has-art .ill-logo:first-child { margin-left: 0; }
    .problem-ill.has-art .ill-logo:nth-child(1) { --s: 8rem; --d: 0ms; z-index: 7; }
    .problem-ill.has-art .ill-logo:nth-child(2) { --s: 6.95rem; --d: 80ms; z-index: 6; }
    .problem-ill.has-art .ill-logo:nth-child(3) { --s: 5.9rem; --d: 160ms; z-index: 5; }
    .problem-ill.has-art .ill-logo:nth-child(4) { --s: 4.85rem; --d: 240ms; z-index: 4; }
    .problem-ill.has-art .ill-logo:nth-child(5) { --s: 3.8rem; --d: 320ms; z-index: 3; }
    .problem-ill.has-art .ill-logo:nth-child(6) { --s: 2.75rem; --d: 400ms; z-index: 2; }
    .problem-ill.has-art .ill-logo:nth-child(7) { --s: 1.7rem; --d: 480ms; z-index: 1; }
    @media (hover: hover) {
      .problem-ill.has-art .ill-logo:hover .ill-logo-face { transform: translateY(-100%); }
      .problem-ill.has-art .ill-logo:hover .ill-logo-name { opacity: 1; }
    }
    .problem-ill.has-art .ill-logo svg,
    .problem-ill.has-art .ill-logo img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 32%;
      corner-shape: var(--corner-smooth);
      clip-path: url(#ios-squircle);
    }
    .problem-ill.has-art .is-gcal img {
      border-radius: 0;
      corner-shape: initial;
      clip-path: none;
      object-fit: contain;
    }
    #problem .problem-ill,
    #solution .problem-ill {
      aspect-ratio: auto;
      min-height: 10.25rem;
    }
    .problem-ill.has-art.is-revenue {
      overflow: hidden;
      width: calc(100% + 3.1rem);
      margin-inline: -1.55rem;
      padding-block: 0.75rem;
    }
    .ill-orbit {
      position: relative;
      width: 10.25rem;
      height: 10.25rem;
      flex: 0 0 auto;
    }
    .ill-orbit-ring {
      position: absolute;
      inset: 0;
    }
    @keyframes ill-orbit-spin {
      from {
        transform: rotate(var(--a)) translateY(-3.55rem) rotate(calc(-1 * var(--a)));
      }
      to {
        transform: rotate(calc(var(--a) + 360deg)) translateY(-3.55rem) rotate(calc(-1 * (var(--a) + 360deg)));
      }
    }
    @keyframes ill-orbit-spin-rev {
      to { transform: rotate(-360deg); }
    }
    .ill-orbit::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 7.1rem;
      height: 7.1rem;
      transform: translate(-50%, -50%);
      border: 1px dashed color-mix(in srgb, var(--fg) 16%, transparent);
      border-radius: 50%;
      pointer-events: none;
    }
    .ill-person {
      position: absolute;
      inset: 0;
      z-index: 2;
      display: grid;
      place-items: center;
      pointer-events: none;
    }
    .ill-person-face {
      display: grid;
      place-items: center;
      width: 3.35rem;
      height: 3.35rem;
      background: #5a5a5a;
      color: #fff;
      border-radius: 32%;
      corner-shape: var(--corner-smooth);
      clip-path: url(#ios-squircle);
      filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.48)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.32));
    }
    .ill-person-face img {
      display: block;
      width: 1.62rem;
      height: 1.62rem;
    }
    .ill-svc {
      --s: 1.9rem;
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 3;
      width: var(--s);
      height: var(--s);
      margin: calc(var(--s) / -2);
      display: grid;
      place-items: center;
      background: #5a5a5a;
      border-radius: 32%;
      corner-shape: var(--corner-smooth);
      clip-path: url(#ios-squircle);
      transform: rotate(var(--a)) translateY(-3.55rem) rotate(calc(-1 * var(--a)));
      animation: ill-orbit-spin 32s linear infinite;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
      transition: transform 0.35s var(--ease-apple-out);
    }
    .ill-svc img {
      display: block;
      width: 54%;
      height: 54%;
      filter: brightness(0) invert(1);
    }
    .ill-svc.is-tg img,
    .ill-svc.is-wa img,
    .ill-svc.is-ig img {
      width: 72%;
      height: 72%;
    }
    @media (hover: hover) {
      .ill-svc:hover {
        z-index: 4;
        transform: rotate(var(--a)) translateY(-3.95rem) rotate(calc(-1 * var(--a))) scale(1.08);
      }
    }
    .res-line {
      position: relative;
      overflow: visible;
      width: 100%;
    }
    .res-scroller {
      overflow-x: auto;
      overflow-y: hidden;
      width: 100%;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-x: contain;
      user-select: none;
      -webkit-user-select: none;
    }
    .res-scroller::-webkit-scrollbar {
      display: none;
    }
    .res-fade {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 1.15rem;
      z-index: 2;
      pointer-events: none;
    }
    .res-fade.is-start {
      left: 0;
      background: linear-gradient(to right, #000, transparent);
    }
    .res-fade.is-end {
      right: 0;
      background: linear-gradient(to left, #000, transparent);
    }
    .res-track {
      display: flex;
      align-items: stretch;
      gap: 0.55rem;
      width: max-content;
      animation: res-line-run 48s linear infinite;
      will-change: transform;
    }
    .res-line.is-js .res-track {
      animation: none;
      will-change: auto;
      transform: none;
    }
    .res-card {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      position: relative;
      z-index: 0;
      flex: 0 0 8.85rem;
      width: 8.85rem;
      box-sizing: border-box;
      padding: 0.38rem 0.38rem 0.5rem;
      background: color-mix(in srgb, var(--fg) 8%, transparent);
      border: 1px solid var(--frost-line);
      border-radius: 1rem;
      corner-shape: var(--corner-smooth);
      transition: transform 0.35s var(--ease-apple-out), background 0.35s var(--ease-apple-out);
    }
    .res-card img {
      display: block;
      width: 100%;
      height: 6.1rem;
      object-fit: cover;
      border-radius: 0.72rem;
      corner-shape: var(--corner-smooth);
      clip-path: none;
      filter: grayscale(1);
    }
    .res-card-copy {
      display: flex;
      flex-direction: column;
      gap: 0.12rem;
      min-width: 0;
      padding: 0.42rem 0.22rem 0 0.28rem;
    }
    .res-card-name {
      font-family: var(--font);
      font-size: 0.78rem;
      font-weight: 600;
      letter-spacing: -0.02em;
      line-height: 1.2;
      color: var(--fg);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .res-card-price {
      font-family: var(--font);
      font-size: 0.7rem;
      font-weight: 500;
      letter-spacing: -0.01em;
      line-height: 1.2;
      color: var(--muted);
      white-space: nowrap;
    }
    @keyframes res-line-run {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }
    @media (hover: hover) {
      .res-card:hover {
        z-index: 1;
        transform: translateY(-3px);
        background: color-mix(in srgb, var(--fg) 13%, transparent);
      }
    }
    #solution .problem-block {
      position: relative;
      z-index: 1;
    }
    #solution .problem-block:has(> .is-pnl) {
      z-index: 0;
    }
    .problem-ill.has-art.is-pnl {
      overflow: visible;
      align-items: center;
      justify-content: center;
      padding: 0.85rem 0.45rem 0.55rem;
    }
    .pnl-glow {
      position: absolute;
      left: 50%;
      top: 38%;
      width: 8.4rem;
      height: 5.4rem;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      background: rgb(232, 181, 106);
      box-shadow:
        2.4rem 0.9rem 0 0.7rem rgba(48, 209, 88, 0.48),
        -2.1rem 0.4rem 0 0.45rem rgba(118, 190, 236, 0.38);
      filter: blur(58px);
      opacity: 0.94;
      pointer-events: none;
    }
    .pnl-scene {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1.85rem;
      width: min(17.25rem, 100%);
    }
    .pnl-thumbs {
      position: relative;
      overflow: visible;
      width: 11.4rem;
      height: 5.15rem;
      flex: 0 0 auto;
    }
    .pnl-thumb {
      position: absolute;
      top: 0.35rem;
      left: 50%;
      width: 4.15rem;
      height: 4.15rem;
      margin-left: -2.075rem;
      overflow: visible;
      background: transparent;
      filter:
        drop-shadow(0 12px 16px rgba(0, 0, 0, 0.72))
        drop-shadow(0 3px 5px rgba(0, 0, 0, 0.45));
    }
    .pnl-thumb-face {
      display: block;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background: #2a2a2e;
      border-radius: 32%;
      corner-shape: var(--corner-smooth);
      clip-path: url(#ios-squircle);
    }
    .pnl-thumb img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .pnl-thumb.is-a { transform: rotate(-16deg) translate(-2.05rem, 0.28rem); z-index: 1; }
    .pnl-thumb.is-b { transform: rotate(2deg) translate(0, -0.18rem); z-index: 3; }
    .pnl-thumb.is-c { transform: rotate(14deg) translate(2.05rem, 0.22rem); z-index: 2; }
    @media (prefers-reduced-motion: no-preference) {
      .pnl-thumb.is-a { animation: pnl-idle-a 4.8s var(--ease-apple) infinite; }
      .pnl-thumb.is-b { animation: pnl-idle-b 5.4s var(--ease-apple) infinite 0.35s; }
      .pnl-thumb.is-c { animation: pnl-idle-c 5.1s var(--ease-apple) infinite 0.7s; }
      .pnl-thumb img { animation: pnl-ken 7.2s var(--ease-apple) infinite alternate; }
    }
    @keyframes pnl-idle-a {
      0%, 100% { transform: rotate(-16deg) translate(-2.05rem, 0.28rem); }
      50% { transform: rotate(-20deg) translate(-2.2rem, -0.28rem); }
    }
    @keyframes pnl-idle-b {
      0%, 100% { transform: rotate(2deg) translate(0, -0.18rem); }
      50% { transform: rotate(-1deg) translate(0.08rem, -0.52rem); }
    }
    @keyframes pnl-idle-c {
      0%, 100% { transform: rotate(14deg) translate(2.05rem, 0.22rem); }
      50% { transform: rotate(18deg) translate(2.22rem, -0.22rem); }
    }
    @keyframes pnl-ken {
      from { transform: scale(1); }
      to { transform: scale(1.12); }
    }
    .pnl-sheet {
      display: flex;
      flex-direction: column;
      gap: 0.38rem;
      width: 100%;
      padding: 0.72rem 0.85rem 0.78rem;
      text-align: left;
      background: color-mix(in srgb, var(--fg) 8%, transparent);
      border: 1px solid var(--frost-line);
      border-radius: 1.05rem;
      corner-shape: var(--corner-smooth);
      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
    }
    .pnl-kicker {
      font-size: 0.62rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 0.12rem;
    }
    .pnl-row,
    .pnl-total {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 0.7rem;
    }
    .pnl-name {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 0.78rem;
      font-weight: 500;
      letter-spacing: -0.02em;
      color: color-mix(in srgb, var(--fg) 78%, transparent);
    }
    .pnl-amt {
      flex: 0 0 auto;
      font-size: 0.78rem;
      font-weight: 600;
      letter-spacing: -0.02em;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
      color: #30d158;
    }
    .pnl-total {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.18rem;
      margin-top: 0.22rem;
      padding-top: 0.52rem;
      border-top: 1px solid var(--frost-line);
    }
    .pnl-total-label {
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: -0.01em;
      color: var(--muted);
    }
    .pnl-total strong {
      font-size: 1.28rem;
      font-weight: 700;
      letter-spacing: -0.045em;
      line-height: 1;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
      color: #30d158;
    }
    .problem-block.is-app-fill {
      position: relative;
      justify-content: flex-end;
      gap: 0;
      padding: 0;
      overflow: hidden;
      background: #10244d;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    .problem-block.is-app-fill .app-fill-space {
      position: relative;
      z-index: 0;
      flex: 1 1 auto;
      min-height: 24rem;
      overflow: hidden;
    }
    .problem-block.is-app-fill .app-fill-shot {
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 0;
      display: block;
      width: 88%;
      max-width: 18rem;
      height: auto;
      object-fit: contain;
      object-position: center top;
      transform: translate(-50%, -46%);
      pointer-events: none;
    }
    .problem-block.is-app-fill .problem-frost {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      gap: 0.65rem;
      margin: 0.55rem;
      padding: 1.15rem 1.2rem 1.2rem;
      overflow: hidden;
      border-radius: 1.15rem;
      corner-shape: var(--corner-smooth);
      background: color-mix(in srgb, #000 52%, transparent);
      border: 1px solid color-mix(in srgb, #fff 10%, transparent);
      backdrop-filter: saturate(1.4) blur(22px);
      -webkit-backdrop-filter: saturate(1.4) blur(22px);
      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
    }
    .problem-copy,
    #solution .problem-frost {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .problem-block.is-app-fill .secondary {
      color: #fff;
    }
    .problem-block.is-app-fill .problem-lead {
      color: color-mix(in srgb, #fff 78%, transparent);
    }
    .problem-ill.has-art .ill-app {
      position: absolute;
      inset: 0;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .problem-ill.has-art .ill-caption {
      position: absolute;
      top: calc(50% + 3.85rem);
      font-family: var(--font);
      font-size: 0.68rem;
      font-weight: 500;
      line-height: 1.2;
      color: var(--muted);
      white-space: nowrap;
    }
    .problem-ill.has-art .ill-app-mark {
      display: grid;
      place-items: center;
      width: 7rem;
      height: 7rem;
      background: #fff;
      border-radius: 32%;
      corner-shape: var(--corner-smooth);
      clip-path: url(#ios-squircle);
    }
    .problem-ill.has-art .ill-squircle {
      width: 6.25rem;
      height: 6.25rem;
      display: grid;
      place-items: center;
      background: #fff;
      color: #111;
      border-radius: 32%;
      corner-shape: var(--corner-smooth);
      overflow: hidden;
      clip-path: url(#ios-squircle);
      box-shadow: none;
    }
    .problem-ill.has-art .ill-unite {
      font-family: var(--font);
      font-size: 1.72rem;
      font-weight: 700;
      letter-spacing: -0.055em;
      line-height: 1;
    }
    h1 {
      font-size: clamp(1.75rem, 4.5vw, 3rem);
      line-height: 1.15;
      font-weight: 700;
      margin: 0 0 1rem;
      max-width: 18ch;
    }
    h2 {
      font-size: clamp(1.4rem, 3vw, 2rem);
      line-height: 1.2;
      margin: 0 0 1rem;
      max-width: 28ch;
    }
    h3 {
      font-size: 1.15rem;
      margin: 0 0 0.5rem;
    }
    p { margin: 0 0 1rem; max-width: 52ch; }
    .lede { font-size: 1.15rem; max-width: 46ch; }
    .caption {
      font-family: var(--font);
      font-size: 0.8rem;
      color: var(--muted);
      max-width: 48ch;
      margin: 0;
    }
    .cta-row {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      margin: 1.5rem 0 0.75rem;
    }
    .btn {
      display: inline-block;
      border: 1px solid var(--fg);
      padding: 0.7rem 1.2rem;
      text-decoration: none;
      font-family: var(--font);
      font-size: 0.85rem;
      background: var(--fg);
      color: var(--bg);
      border-radius: var(--radius-btn);
      corner-shape: var(--corner-smooth);
    }
    .btn:visited,
    .btn:hover { text-decoration: none; color: var(--bg); }
    #hero .btn {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      z-index: 0;
      background-color: var(--fg);
      background-image: none;
      background-repeat: no-repeat;
      transition: background-image 0.25s ease;
    }
    #hero .btn:hover,
    #hero .btn:focus-visible {
      background-color: var(--fg);
      background-image:
        radial-gradient(ellipse 140% 160% at -20% 10%, rgba(126, 196, 238, 0.22), transparent 58%),
        radial-gradient(ellipse 130% 150% at 120% 90%, rgba(232, 181, 106, 0.2), transparent 55%),
        radial-gradient(ellipse 110% 130% at 80% -30%, rgba(88, 176, 232, 0.14), transparent 52%),
        radial-gradient(ellipse 100% 120% at 10% 130%, rgba(232, 181, 106, 0.12), transparent 50%);
      background-size: 100% 100%;
      background-position: 0 0;
      animation: btn-iridescent 3.2s var(--ease-apple) infinite alternate;
    }
    @keyframes btn-iridescent {
      0% {
        background-image:
          radial-gradient(ellipse 140% 160% at -20% 10%, rgba(126, 196, 238, 0.22), transparent 58%),
          radial-gradient(ellipse 130% 150% at 120% 90%, rgba(232, 181, 106, 0.2), transparent 55%),
          radial-gradient(ellipse 110% 130% at 80% -30%, rgba(88, 176, 232, 0.14), transparent 52%),
          radial-gradient(ellipse 100% 120% at 10% 130%, rgba(232, 181, 106, 0.12), transparent 50%);
      }
      50% {
        background-image:
          radial-gradient(ellipse 150% 140% at 110% 0%, rgba(126, 196, 238, 0.2), transparent 58%),
          radial-gradient(ellipse 140% 160% at -15% 85%, rgba(232, 181, 106, 0.18), transparent 55%),
          radial-gradient(ellipse 120% 130% at 30% 120%, rgba(88, 176, 232, 0.14), transparent 52%),
          radial-gradient(ellipse 110% 140% at 100% 40%, rgba(232, 181, 106, 0.12), transparent 50%);
      }
      100% {
        background-image:
          radial-gradient(ellipse 130% 170% at 40% -25%, rgba(126, 196, 238, 0.2), transparent 58%),
          radial-gradient(ellipse 150% 140% at 130% 60%, rgba(232, 181, 106, 0.18), transparent 55%),
          radial-gradient(ellipse 120% 150% at -25% 50%, rgba(88, 176, 232, 0.14), transparent 52%),
          radial-gradient(ellipse 110% 130% at 70% 125%, rgba(232, 181, 106, 0.12), transparent 50%);
      }
    }
    .btn-ghost,
    .btn-ghost:visited,
    .btn-ghost:hover {
      background: transparent;
      color: var(--fg);
    }
    .pillars {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
      gap: 1rem;
      margin-top: 1.5rem;
    }
    .pillar {
      border: 1px solid var(--line);
      padding: 1rem;
    }
    .pillar p { margin: 0; font-size: 0.95rem; }

    /* Modules switcher (Apple-style) */
    .mod-panel {
      padding: 1.5rem 1.55rem 1.45rem;
      border: 1px solid var(--frost-line);
      border-radius: var(--radius-tile);
      corner-shape: var(--corner-smooth);
      background: var(--frost);
      backdrop-filter: var(--frost-blur);
      -webkit-backdrop-filter: var(--frost-blur);
    }
    #modules h2 {
      max-width: none;
      margin: 0 0 1.5rem;
    }
    @media (min-width: 900px) {
      #modules h2 { white-space: nowrap; }
    }
    .mod-switcher {
      display: grid;
      gap: 1.5rem;
      position: relative;
      min-height: 28rem;
      align-items: start;
    }
    .mod-col {
      display: flex;
      align-items: stretch;
      gap: 0.75rem;
      min-width: 0;
    }
    .mod-list {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0.55rem;
      flex: 1;
      min-width: 0;
      container-type: inline-size;
      container-name: mods;
    }
    .mod-group-label {
      font-family: var(--font);
      font-size: 0.7rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--muted);
      margin: 0.45rem 0 0.1rem;
      padding-left: 0.95rem;
    }
    .mod-group-label:first-child { margin-top: 0; }
    .mod-item {
      position: relative;
      max-width: 100%;
      width: max-content;
      transition: width 0.5s var(--ease-apple-out);
    }
    .mod-item.is-open {
      width: min(22rem, 100%);
    }
    .mod-pill {
      display: block;
      width: 100%;
      box-sizing: border-box;
      border: none;
      border-radius: 1rem;
      background: rgba(255, 255, 255, 0.08);
      box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.1);
      color: #fff;
      padding: 0.45rem 0.95rem;
      text-align: left;
      cursor: pointer;
      font-family: var(--font);
      font-size: 1rem;
      font-weight: 510;
      line-height: 1.3;
      max-width: 100%;
      overflow: hidden;
      transition:
        padding 0.5s var(--ease-apple-out),
        background 0.2s var(--ease-apple);
    }
    .mod-pill:hover { background: rgba(255, 255, 255, 0.14); }
    .mod-item.is-open .mod-pill {
      padding: 0.85rem 0.95rem 0.95rem;
      background: rgba(255, 255, 255, 0.08);
      box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.1);
      cursor: default;
    }
    .mod-item.is-open .mod-pill:hover { background: rgba(255, 255, 255, 0.08); }
    .mod-pill-name {
      display: block;
      width: max-content;
      max-width: 100%;
      font-weight: 510;
      font-size: 1rem;
      line-height: 1.3;
      transition: margin 0.5s var(--ease-apple-out);
    }
    .mod-item.is-open .mod-pill-name {
      width: auto;
      font-weight: 510;
      font-size: 1rem;
      margin-bottom: 0.45rem;
    }
    .mod-pill-body {
      display: grid;
      grid-template-rows: 0fr;
      width: 100%;
      min-width: 0;
      overflow: hidden;
      contain: inline-size;
      transition: grid-template-rows 0.5s var(--ease-apple-out);
    }
    .mod-item.is-open .mod-pill-body {
      grid-template-rows: 1fr;
    }
    .mod-pill-body-inner {
      min-height: 0;
      overflow: hidden;
      width: 20.1rem;
      opacity: 0;
      transform: translate3d(0, 10px, 0);
    }
    @supports (width: 1cqi) {
      .mod-pill-body-inner {
        width: calc(min(22rem, 100cqi) - 1.9rem);
      }
    }
    .mod-item.is-open .mod-pill-body-inner {
      opacity: 1;
      transform: translate3d(0, 0, 0);
      transition:
        opacity 0.5s var(--ease-apple-out) 0.08s,
        transform 0.55s var(--ease-apple-out) 0.08s;
    }
    .mod-item:not(.is-open) .mod-pill-body-inner {
      transition:
        opacity 0.16s var(--ease-apple),
        transform 0.2s var(--ease-apple);
    }
    .mod-pill-body p {
      margin: 0 0 0.55rem;
      max-width: none;
      font-size: 0.92rem;
      font-weight: 400;
      color: var(--muted);
    }
    .mod-pill-body p:last-child { margin-bottom: 0; }
    .mod-media {
      position: relative;
      border: 1px dashed var(--frost-line);
      border-radius: 1rem;
      corner-shape: var(--corner-smooth);
      min-height: 28rem;
      height: 28rem;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font);
      font-size: 0.75rem;
      color: var(--muted);
      text-align: center;
    }
    .mod-media-ph {
      font-family: var(--font);
      font-size: 0.75rem;
      color: var(--muted);
      text-align: center;
      padding: 1rem;
      margin: 0;
    }
    .mod-media.has-shot {
      border-style: dashed;
      padding: 0;
      overflow: hidden;
      align-items: stretch;
      background: transparent;
    }
    .mod-media.has-shot img {
      display: block;
      width: 100%;
      height: 100%;
      min-height: 0;
      object-fit: cover;
      object-position: top center;
    }
    .mod-media.has-shot.is-fit {
      align-items: center;
      justify-content: center;
      background: transparent;
      padding: 0.75rem;
      min-height: 0;
    }
    .mod-media.has-shot.is-fit img {
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: 100%;
      min-height: 0;
      object-fit: contain;
      object-position: center;
    }
    .mod-media.is-pair {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0.45rem;
      border: none;
      overflow: visible;
      background: transparent;
    }
    .mod-media.is-pair img {
      min-height: 12rem;
      border: 1px dashed var(--frost-line);
      border-radius: 0.65rem;
      background: transparent;
    }
    .mod-media.is-trio {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0.45rem;
      border: none;
      overflow: visible;
      background: transparent;
    }
    .mod-media.is-trio img {
      min-height: 12rem;
      border: 1px dashed var(--frost-line);
      border-radius: 0.65rem;
      background: transparent;
    }
    .mod-media.is-trio img:first-child {
      min-height: 18rem;
      object-fit: contain;
      object-position: center;
    }
    .mod-media.is-reel {
      overflow: hidden;
      padding: 0;
      border: none;
      background: transparent;
      min-width: 0;
      max-width: 100%;
      min-height: 28rem;
      height: 28rem;
      align-self: start;
      justify-self: stretch;
    }
    .mod-reel {
      position: relative;
      width: 100%;
      height: 100%;
      min-height: inherit;
      min-width: 0;
      overflow: hidden;
    }
    .mod-reel-track {
      position: relative;
      width: 100%;
      height: 100%;
      min-height: 0;
      overflow: hidden;
    }
    .mod-reel-slide {
      position: absolute;
      inset: 0;
      display: grid;
      grid-template-rows: minmax(0, 1fr) 2.7em;
      align-items: stretch;
      gap: 0.45rem;
      min-width: 0;
      min-height: 0;
      overflow: hidden;
      opacity: 0;
      transform: translate3d(36%, 0, 0);
      transition:
        transform 0.64s var(--ease-apple-out),
        opacity 0.64s var(--ease-apple-out);
      pointer-events: none;
      z-index: 0;
    }
    .mod-reel-slide.is-active {
      opacity: 1;
      transform: translate3d(0, 0, 0);
      pointer-events: auto;
      z-index: 2;
    }
    .mod-reel-slide.is-leaving {
      opacity: 0;
      transform: translate3d(36%, 0, 0);
      z-index: 1;
    }
    .mod-reel-slide.is-prep {
      transition: none;
      opacity: 0;
      transform: translate3d(36%, 0, 0);
    }
    .mod-reel-frame {
      flex: 1 1 auto;
      min-height: 0;
      min-width: 0;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      border: none;
      background: transparent;
    }
    .mod-media.is-reel .mod-reel-slide img {
      display: block;
      width: 100%;
      height: 100%;
      max-width: 100%;
      max-height: 100%;
      min-height: 0;
      object-fit: contain;
      object-position: center;
    }
    .mod-media.is-reel .mod-reel-slide.is-phone .mod-reel-frame {
      justify-content: center;
      align-items: center;
    }
    .mod-media.is-reel .mod-reel-slide.is-phone img {
      width: auto;
      height: 100%;
      max-width: 100%;
      max-height: 100%;
      aspect-ratio: 495 / 1024;
      padding: 0.35rem;
      box-sizing: border-box;
      object-fit: contain;
      object-position: center;
    }
    .mod-reel-slide.is-crop .mod-reel-frame {
      justify-content: flex-start;
      align-items: center;
      padding: 0.7rem 0.55rem 0.95rem;
    }
    .mod-media.is-reel .mod-reel-slide.is-crop img {
      width: auto;
      height: 82%;
      max-width: none;
      max-height: 82%;
      object-fit: contain;
      object-position: left center;
      flex-shrink: 0;
    }
    .mod-reel-cap {
      flex: 0 0 auto;
      margin: 0;
      padding: 0 0.35rem 0.1rem;
      max-width: none;
      height: 2.7em;
      font-family: var(--font);
      font-size: 0.75rem;
      font-weight: 400;
      line-height: 1.35;
      color: var(--muted);
      text-align: center;
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
    @media (prefers-reduced-motion: reduce) {
      .mod-reel-slide {
        transition: none;
        transform: none;
      }
      .mod-reel-slide:not(.is-active) {
        display: none;
      }
      .mod-item,
      .mod-pill,
      .mod-pill-name,
      .mod-pill-body,
      .mod-pill-body-inner,
      .mod-more {
        transition: none;
        transform: none;
      }
    }
    .mod-more {
      display: block;
      height: 0;
      margin: 0 1.15rem 0;
      font-family: var(--font);
      font-size: 0.75rem;
      font-weight: 510;
      color: var(--fg);
      text-decoration: none;
      border-bottom: 1px solid transparent;
      padding-bottom: 0;
      width: fit-content;
      max-width: calc(100% - 2.3rem);
      opacity: 0;
      overflow: hidden;
      pointer-events: none;
      transform: translate3d(0, 8px, 0);
      interpolate-size: allow-keywords;
      transition:
        height 0.5s var(--ease-apple-out),
        margin 0.5s var(--ease-apple-out),
        border-color 0.4s var(--ease-apple-out) 0.14s;
    }
    .mod-more > span { overflow: hidden; min-height: 0; }
    .mod-item.is-open .mod-more {
      height: auto;
      margin: 0.15rem 1.15rem 1rem;
      padding-bottom: 0.08rem;
      border-bottom-color: var(--fg);
      opacity: 1;
      transform: translate3d(0, 0, 0);
      pointer-events: auto;
      transition:
        height 0.5s var(--ease-apple-out),
        margin 0.5s var(--ease-apple-out),
        opacity 0.4s var(--ease-apple-out) 0.14s,
        transform 0.5s var(--ease-apple-out) 0.14s,
        border-color 0.4s var(--ease-apple-out) 0.14s;
    }
    .mod-item:not(.is-open) .mod-more {
      transition:
        height 0.4s var(--ease-apple-out),
        margin 0.4s var(--ease-apple-out),
        opacity 0.16s var(--ease-apple),
        transform 0.16s var(--ease-apple),
        border-color 0.16s var(--ease-apple);
    }
    .mod-more:visited { color: var(--fg); }
    .mod-more:hover { color: var(--muted); border-bottom-color: var(--muted); }
    .mod-more.is-mock {
      color: var(--muted);
      border-bottom-color: var(--line);
      cursor: default;
    }
    .mod-more.is-mock:hover { color: var(--muted); border-bottom-color: var(--line); }
    .mod-pill-icon { display: none; }
    .mod-close,
    .mod-read,
    .mod-col > .mod-nav,
    .mod-detail-bar,
    .mod-seg-thumb { display: none; }

    .logo-row {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      margin: 1rem 0;
    }
    .logo-ph {
      border: 1px dashed var(--line);
      padding: 0.6rem 0.9rem;
      font-family: var(--font);
      font-size: 0.8rem;
    }
    .int-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0.7rem;
      margin-top: 1.5rem;
    }
    .int-defs {
      position: absolute;
      width: 0;
      height: 0;
      overflow: hidden;
    }
    .int-card {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0.85rem;
      min-height: 0;
      padding: 1.25rem 1.4rem 1.2rem;
      border: 1px solid var(--frost-line);
      border-radius: var(--radius-tile);
      corner-shape: var(--corner-smooth);
      background: var(--frost);
      backdrop-filter: var(--frost-blur);
      -webkit-backdrop-filter: var(--frost-blur);
      overflow: hidden;
    }
    .int-tag {
      position: absolute;
      top: 1.05rem;
      right: 1.05rem;
      font-family: var(--font);
      font-size: 0.72rem;
      line-height: 1.2;
      color: var(--muted);
      border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
      padding: 0.26rem 0.58rem;
      white-space: nowrap;
      border-radius: 999px;
      corner-shape: var(--corner-smooth);
    }
    #integrations h2,
    #proof h2,
    #pricing h2,
    #how h2,
    #final-cta h2 {
      max-width: none;
      margin-bottom: 0.45rem;
    }
    .int-lead,
    .proof-lead {
      margin: 0;
      color: var(--muted);
      font-size: 1.05rem;
      line-height: 1.4;
      max-width: 38em;
    }
    #proof h2 + .proof-lead,
    .proof-lead.is-oneline {
      max-width: none;
    }
    .int-more {
      margin: 1.35rem 0 0;
      color: var(--muted);
      font-size: 0.95rem;
      line-height: 1.45;
      max-width: none;
    }
    .int-more a {
      color: var(--fg);
      text-underline-offset: 0.18em;
    }
    .int-more a:hover { opacity: 0.65; }
    #proof h2 a {
      color: inherit;
      text-underline-offset: 0.14em;
    }
    #proof h2 a:hover { opacity: 0.65; }
    @media (min-width: 900px) {
      #integrations h2,
      #proof h2,
      #pricing h2,
      #how h2,
      #proof h2 + .proof-lead,
      .proof-lead.is-oneline { white-space: nowrap; }
    }
    .int-icon {
      width: 3.6rem;
      height: 3.6rem;
      border: none;
      border-radius: 22.37%;
      padding: 0;
      display: block;
      overflow: hidden;
      clip-path: url(#ios-squircle);
      flex-shrink: 0;
    }
    .int-icon svg,
    .int-icon img {
      display: block;
      width: 100%;
      height: 100%;
    }
    .int-icon img {
      object-fit: cover;
    }
    .int-icon.is-light {
      background: #fff;
    }
    .int-icon.is-light img {
      object-fit: contain;
      padding: 28% 8%;
      box-sizing: border-box;
    }
    .int-copy {
      margin-top: auto;
      display: flex;
      flex-direction: column;
      gap: 0.45rem;
    }
    .int-card h3 {
      margin: 0;
      font-size: 1.15rem;
      font-weight: 700;
      line-height: 1.25;
    }
    .int-card p {
      margin: 0;
      max-width: none;
      font-size: 0.95rem;
      line-height: 1.45;
      color: var(--muted);
      min-height: calc(0.95rem * 1.45 * 3);
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
    }
    .stats {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
      gap: 0.75rem;
      margin: 1.25rem 0;
    }
    .stat {
      border: 1px solid var(--line);
      padding: 0.85rem;
    }
    .stat strong {
      display: block;
      font-size: 1.5rem;
      line-height: 1.1;
      margin-bottom: 0.25rem;
    }
    .stat span {
      font-family: var(--font);
      font-size: 0.7rem;
      color: var(--muted);
    }
    .steps {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
      gap: 1rem;
      counter-reset: step;
      margin-top: 1rem;
    }
    .step {
      border: 1px solid var(--line);
      padding: 1rem;
      counter-increment: step;
    }
    .step::before {
      content: "0" counter(step);
      font-family: var(--font);
      font-size: 0.75rem;
      color: var(--muted);
      display: block;
      margin-bottom: 0.5rem;
    }
    .price-box {
      border: 1px solid var(--fg);
      padding: 1.25rem;
      margin: 1rem 0;
      max-width: 40rem;
    }
    .price-box p:last-child { margin-bottom: 0; }
    .site-footer {
      border-top: 1px solid var(--line);
      margin-top: 2rem;
    }
    .site-footer .wrap {
      padding-top: 2.5rem;
      padding-bottom: 2.5rem;
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 1fr;
      grid-template-areas:
        "lockup"
        "tagline"
        "nav-h"
        "nav";
      gap: 0.85rem 1.5rem;
      align-items: baseline;
    }
    .footer-lockup {
      grid-area: lockup;
      display: block;
      margin: 0;
      line-height: 1;
    }
    .footer-lockup .brand {
      display: inline;
      font-size: 1.75rem;
      line-height: 1;
      margin: 0 0.5rem 0 0;
      vertical-align: baseline;
    }
    .footer-lockup .brand-sub {
      display: inline;
      font-size: 0.9rem;
      line-height: 1;
      margin: 0;
      vertical-align: baseline;
    }
    .footer-tagline {
      grid-area: tagline;
      margin: 0;
      max-width: 28ch;
      font-size: 0.95rem;
    }
    .footer-heading {
      font-family: var(--font);
      font-size: 0.7rem;
      line-height: 1;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--muted);
      margin: 0;
    }
    .footer-heading:nth-of-type(1) { grid-area: nav-h; }
    .footer-col {
      min-width: 0;
    }
    .footer-col:nth-of-type(1) { grid-area: nav; }
    .footer-col ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 0.55rem;
    }
    .footer-col a {
      color: var(--fg);
      text-decoration: none;
      font-size: 0.95rem;
    }
    .footer-col a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
    .footer-col p {
      margin: 0 0 0.45rem;
      max-width: 28ch;
      font-size: 0.95rem;
    }
    .footer-col .caption { max-width: none; }
    .footer-bottom {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 0.75rem 1.5rem;
      margin-top: 2.25rem;
      padding-top: 1.25rem;
      border-top: 1px solid var(--line);
      font-family: var(--font);
      font-size: 0.75rem;
      color: var(--muted);
    }
    .footer-legal {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem 1.1rem;
    }
    .footer-legal a { color: var(--muted); }
    .hero-media-ph {
      border: 1px dashed var(--line);
      margin-top: 2rem;
      min-height: 10rem;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font);
      font-size: 0.75rem;
      color: var(--muted);
    }

    @media (min-width: 900px) {
      .header-nav { display: flex; }
      .header-actions { margin-left: 0; }
      .hero-layout {
        gap: 2.25rem;
      }
      .hero-bento {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        gap: 0.75rem;
        align-items: stretch;
        height: min(30rem, 58vh);
      }
      .hero-bento-cluster {
        grid-template-columns: minmax(0, 1fr) 9rem;
        gap: 0.75rem;
        align-items: stretch;
        min-width: 0;
        min-height: 0;
        height: 100%;
        overflow: hidden;
      }
      .hero-bento-minis {
        display: grid;
        grid-template-columns: 9rem;
        grid-template-rows: 1fr 1fr;
        gap: 0.75rem;
        width: 9rem;
        height: 100%;
        max-height: 100%;
        min-height: 0;
        align-self: stretch;
        overflow: hidden;
      }
      .hero-bento > .bento-tile,
      .hero-bento > .bento-tile.has-shot,
      .hero-bento-cluster > .bento-tile,
      .hero-bento-cluster > .bento-tile.has-shot {
        aspect-ratio: auto;
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        min-width: 0;
        min-height: 0;
      }
      .hero-bento .hero-bento-minis > .bento-tile.is-mini {
        width: 9rem;
        height: 100%;
        aspect-ratio: auto;
        max-width: 100%;
        min-height: 0;
      }
      .problem-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
        align-items: stretch;
      }
      .problem-block {
        height: 100%;
      }
      @supports (grid-template-rows: subgrid) {
        .problem-grid {
          grid-template-rows: auto auto;
          column-gap: 0.75rem;
          row-gap: 1.75rem;
        }
        .problem-block {
          display: grid;
          grid-template-rows: subgrid;
          grid-row: span 2;
          gap: 1.75rem;
        }
        .problem-block.is-app-fill {
          display: grid;
          grid-template-rows: subgrid;
          grid-row: span 2;
          gap: 1.75rem;
          padding: 1.5rem 1.55rem 1.45rem;
          justify-content: stretch;
        }
        .problem-block.is-app-fill .app-fill-space {
          position: static;
          flex: none;
          min-height: 0;
          overflow: visible;
        }
        .problem-block.is-app-fill .app-fill-shot {
          inset: 0;
          left: 0;
          top: 0;
          width: 100%;
          max-width: none;
          height: 100%;
          transform: none;
          object-fit: cover;
          object-position: center top;
        }
        .problem-block.is-app-fill .problem-frost {
          grid-row: 2;
          display: grid;
          grid-template-rows: subgrid;
          gap: 1.75rem;
          z-index: 1;
          margin: -0.85rem -1rem -0.35rem;
          padding: 0.85rem 1rem 0.35rem;
        }
        #solution .problem-block.is-app-fill .problem-frost {
          grid-row: 2;
          display: flex;
          flex-direction: column;
          gap: 8px;
        }
        #problem .problem-ill,
        #solution .problem-ill {
          min-height: 10.25rem;
          height: 100%;
        }
        .problem-ill {
          min-height: 0;
          height: auto;
        }
      }
      .mod-switcher {
        grid-template-columns: minmax(22rem, 0.8fr) minmax(0, 1.28fr);
        gap: 2rem;
        align-items: start;
        min-height: 46rem;
      }
      .mod-switcher .mod-col,
      .mod-switcher .mod-media {
        min-width: 0;
      }
      .mod-media {
        min-height: 46rem;
        height: 46rem;
      }
      .mod-media.has-shot img { min-height: 0; }
      .mod-media.has-shot.is-fit { min-height: 0; }
      .mod-media.has-shot.is-fit img { min-height: 0; max-height: 100%; }
      .mod-media.is-pair {
        grid-template-columns: 1fr 1fr;
        min-height: 46rem;
        height: 46rem;
      }
      .mod-media.is-pair img { min-height: 0; }
      .mod-media.is-trio {
        grid-template-columns: minmax(10rem, 0.72fr) 1fr;
        grid-template-rows: 1fr 1fr;
        min-height: 46rem;
        height: 46rem;
      }
      .mod-media.is-trio img { min-height: 0; }
      .mod-media.is-trio img:first-child {
        grid-row: 1 / -1;
        height: 100%;
        min-height: 0;
        object-fit: contain;
      }
      .mod-media.is-reel {
        min-height: 46rem;
        height: 46rem;
      }
      .mod-reel {
        min-height: 0;
        height: 100%;
      }
      .mod-reel-slide,
      .mod-media.is-reel .mod-reel-slide img {
        min-height: 0;
      }
      .footer-grid {
        grid-template-columns: 1.4fr 1fr;
        grid-template-areas:
          "lockup nav-h"
          "tagline nav";
        gap: 0.85rem 2rem;
        align-items: baseline;
      }
      .footer-heading { margin-top: 0; }
      .ov-grid { grid-template-columns: repeat(3, 1fr); }
      .int-grid { grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
    }

    @media (min-width: 640px) and (max-width: 899px) {
      .int-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
    }

    body.is-inner .header-actions {
      width: auto;
      opacity: 1;
      overflow: visible;
      pointer-events: auto;
      transform: none;
    }
    body.is-inner .site-header .tagline { display: none; }
    body.is-inner .section {
      border: none;
      background: transparent;
    }
    body.is-inner main.wrap {
      padding-top: 0.2rem;
    }
    body.is-inner .page-hero {
      padding-top: 0.35rem;
    }
    body.is-inner .page-hero h1 {
      max-width: 12ch;
      font-size: clamp(2.15rem, 6vw, 3.35rem);
      letter-spacing: -0.045em;
      line-height: 1.08;
      margin-bottom: 0.85rem;
    }
    body.is-inner .page-hero .lede {
      color: var(--muted);
      font-size: clamp(1.02rem, 1.8vw, 1.18rem);
      line-height: 1.45;
      margin-bottom: 0;
    }
    .mega-col a[aria-current="page"] { opacity: 0.55; }

    /* Powered-by highlights (Apple-style carousel) */
    #powered h2 { max-width: none; }
    @media (min-width: 900px) {
      #powered h2 { white-space: nowrap; }
    }
    .hl-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 1rem 1.5rem;
      flex-wrap: wrap;
      margin-bottom: 1.25rem;
    }
    .hl-head h2 { margin: 0; max-width: none; }
    .hl-film {
      font-family: var(--font);
      font-size: 0.8rem;
      color: var(--muted);
      text-decoration: none;
      white-space: nowrap;
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
    }
    .hl-film:hover { color: var(--fg); }
    .hl-film .hl-play-icon {
      display: inline-flex;
      width: 1.15rem;
      height: 1.15rem;
      border: 1px solid currentColor;
      border-radius: 50%;
      align-items: center;
      justify-content: center;
      font-size: 0.55rem;
      line-height: 1;
    }
    .hl-scroller {
      --hl-gap: 1.5rem;
      --hl-card: min(72rem, 94vw);
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: var(--hl-card);
      column-gap: var(--hl-gap);
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      width: 100vw;
      max-width: 100vw;
      margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
      padding: 0.15rem max(0.75rem, calc((100vw - var(--hl-card)) / 2)) 1.5rem;
    }
    .hl-scroller::-webkit-scrollbar { display: none; }
    .hl-slide {
      scroll-snap-align: center;
      border: 1px solid var(--frost-line);
      border-radius: var(--radius-tile);
      corner-shape: var(--corner-smooth);
      background: var(--frost);
      backdrop-filter: var(--frost-blur);
      -webkit-backdrop-filter: var(--frost-blur);
      height: auto;
      min-height: 0;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 2.5rem 1.25rem 0;
      text-align: center;
      overflow: hidden;
      opacity: 0.32;
      transition: opacity 0.5s var(--ease-apple-out);
    }
    .hl-slide.is-active {
      opacity: 1;
    }
    .hl-slide > p {
      margin: 0;
      max-width: 36ch;
      font-size: clamp(1.18rem, 2.2vw, 1.55rem);
      font-weight: 600;
      line-height: 1.32;
      color: var(--fg);
      flex-shrink: 0;
      z-index: 1;
    }
    .hl-visual {
      margin-top: auto;
      width: 100%;
      flex: 0 0 auto;
      min-height: 0;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      overflow: visible;
      pointer-events: none;
    }
    .hl-visual.hl-mods,
    .hl-visual.hl-int-hero,
    .hl-visual.hl-city {
      margin-top: 0;
      flex: 1 1 auto;
      align-items: center;
      justify-content: center;
    }
    .hl-shot {
      display: block;
      width: 96%;
      height: auto;
      object-fit: contain;
      object-position: center bottom;
      background: none;
      filter: none;
    }
    .hl-shot.is-pair {
      max-width: 96%;
      max-height: none;
      margin-bottom: 0.2rem;
    }
    .hl-shot.is-laptop {
      /* Match MacBook screen width to slide 1 (pair lid 742/1024 at 96% width). */
      max-width: none;
      width: 84.5%;
      max-height: none;
      margin-bottom: 0.2rem;
      object-position: center bottom;
    }
    .hl-int-hero {
      position: relative;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-height: 0;
      overflow: visible;
      padding: 0.8rem 2.8rem;
      box-sizing: border-box;
    }
    .hl-int-cluster {
      position: relative;
      width: min(24rem, 78%);
      aspect-ratio: 1;
      display: grid;
      place-items: center;
      container-type: inline-size;
      overflow: visible;
    }
    .hl-int-glow {
      position: absolute;
      left: 50%;
      top: 54%;
      width: 7.2rem;
      height: 4.2rem;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      background: rgb(118, 190, 236);
      box-shadow: 2.6rem 0.15rem 0 0.7rem rgba(232, 181, 106, 0.72);
      filter: blur(64px);
      opacity: 0.92;
      pointer-events: none;
    }
    .hl-int-stat {
      position: relative;
      z-index: 2;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin: 0;
      margin-top: 8%;
      max-width: none;
      overflow: visible;
      font-size: 42cqw;
      padding: 0;
      border: 0;
      background: none;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    .hl-int-stat > span {
      display: block;
      font-size: 1em;
      font-weight: 700;
      letter-spacing: -0.03em;
      line-height: 0.9;
      padding: 0 0.06em 0 0;
      overflow: visible;
      color: #fff;
      text-shadow: 0 0 10px rgba(0, 0, 0, 0.5), 0 0 22px rgba(0, 0, 0, 0.32);
    }
    .hl-int-icons {
      position: absolute;
      inset: 0;
      z-index: 1;
    }
    .hl-int-icons .int-icon {
      position: absolute;
      right: auto;
      bottom: auto;
      overflow: visible;
      clip-path: none;
      box-shadow: none;
      filter: blur(3.2px);
    }
    .hl-int-icons .int-icon img,
    .hl-int-icons .int-icon svg {
      filter: none;
      transform: none;
    }
    .hl-int-icons .int-icon:nth-child(1) {
      top: 16%;
      left: 10%;
      width: 18%;
      height: 18%;
      transform: rotate(-8deg);
      opacity: 0.86;
    }
    .hl-int-icons .int-icon:nth-child(2) {
      top: 16%;
      left: auto;
      right: 10%;
      width: 18%;
      height: 18%;
      transform: rotate(9deg);
      opacity: 0.88;
    }
    .hl-int-icons .int-icon:nth-child(3) {
      top: 42%;
      left: 4%;
      width: 22%;
      height: 22%;
      transform: rotate(-12deg);
    }
    .hl-int-icons .int-icon:nth-child(4) {
      top: 42%;
      left: auto;
      right: 4%;
      width: 21%;
      height: 21%;
      transform: rotate(11deg);
    }
    .hl-int-icons .int-icon:nth-child(5) {
      top: 70%;
      left: 12%;
      width: 15%;
      height: 15%;
      transform: rotate(7deg);
      opacity: 0.78;
    }
    .hl-int-icons .int-icon:nth-child(6) {
      top: 70%;
      left: auto;
      right: 12%;
      width: 14%;
      height: 14%;
      transform: rotate(-6deg);
      opacity: 0.74;
    }
    .hl-mods {
      align-items: center;
      justify-content: center;
      min-height: 0;
      padding: 0.8rem 8%;
    }
    .hl-mods-grid {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      gap: 0.55rem;
      width: max-content;
      max-width: none;
    }
    .hl-mods .mod-chip {
      font-size: 1.12rem;
      gap: 0.45rem;
      color: #dedede;
    }
    .hl-mods .mod-check {
      width: 1.22rem;
      height: 1.22rem;
      border-radius: 50%;
      border: 1.5px solid color-mix(in srgb, var(--fg) 32%, transparent);
      background: transparent;
      flex-shrink: 0;
      display: grid;
      place-items: center;
      box-sizing: border-box;
      transition:
        background 0.15s var(--ease-apple-out),
        border-color 0.15s var(--ease-apple-out);
    }
    .hl-mods .mod-check::after {
      content: "";
      width: 0.38rem;
      height: 0.2rem;
      margin-top: -0.14rem;
      border-left: 2px solid #fff;
      border-bottom: 2px solid #fff;
      transform: rotate(-45deg) scale(0.4);
      opacity: 0;
      transition:
        transform 0.14s var(--ease-apple-out),
        opacity 0.1s var(--ease-apple);
    }
    .hl-mods .mod-check.is-on {
      background: #0a84ff;
      border-color: #0a84ff;
    }
    .hl-mods .mod-check.is-on::after {
      transform: rotate(-45deg) scale(1);
      opacity: 1;
    }
    .hl-mods .mod-check.is-locked.is-on {
      background: #7d7d82;
      border-color: #7d7d82;
      -webkit-mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round' d='M1.1 5.1 4.4 8.3 10.8 1.5'/%3E%3C/svg%3E"),
        linear-gradient(#000 0 0);
      -webkit-mask-size: 52% 44%, 100% 100%;
      -webkit-mask-position: 54% 56%, 0 0;
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-composite: xor;
      mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round' d='M1.1 5.1 4.4 8.3 10.8 1.5'/%3E%3C/svg%3E"),
        linear-gradient(#000 0 0);
      mask-size: 52% 44%, 100% 100%;
      mask-position: 54% 56%, 0 0;
      mask-repeat: no-repeat;
      mask-composite: exclude;
    }
    .hl-mods .mod-check.is-locked::after {
      content: none;
    }
    .hl-mods .mod-check.is-pop {
      animation: mod-check-pop 0.18s var(--ease-apple-out);
    }
    @keyframes mod-check-pop {
      0% { transform: scale(0.78); }
      58% { transform: scale(1.14); }
      100% { transform: scale(1); }
    }
    .hl-mods .mod-icon {
      width: 2.15rem;
      height: 2.15rem;
      border-radius: 0.48rem;
      background: var(--mod);
      border-color: transparent;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    .hl-mods .mod-icon img,
    .hl-mods .mod-icon::after {
      width: 1.2rem;
      height: 1.2rem;
    }
    .hl-mods .mod-icon::after {
      background: #fff;
    }
    .hl-city {
      position: relative;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.15rem;
      min-height: 22rem;
      padding: 0.8rem 0;
      overflow: hidden;
    }
    .hl-city-crowd-wrap {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      -webkit-mask-image: radial-gradient(ellipse 72% 68% at 50% 48%, #000 0%, #000 28%, rgba(0,0,0,0.45) 58%, transparent 82%);
      mask-image: radial-gradient(ellipse 72% 68% at 50% 48%, #000 0%, #000 28%, rgba(0,0,0,0.45) 58%, transparent 82%);
    }
    .hl-city-crowd {
      display: block;
      width: 100%;
      height: 100%;
    }
    .hl-city-stat {
      position: relative;
      z-index: 1;
      margin: 0;
      font-size: clamp(5rem, 10vw, 8rem);
      font-weight: 700;
      letter-spacing: -0.04em;
      line-height: 0.95;
      max-width: none;
    }
    .hl-city-stat span {
      display: inline-block;
      opacity: 0;
      transform: translateY(-0.72em);
    }
    .hl-slide.is-active .hl-city-stat span {
      animation: city-bounce-in 0.52s cubic-bezier(0.22, 1.45, 0.32, 1) forwards;
    }
    .hl-slide.is-active .hl-city-stat span:nth-child(1) { animation-delay: 0s; }
    .hl-slide.is-active .hl-city-stat span:nth-child(2) { animation-delay: 0.06s; }
    .hl-slide.is-active .hl-city-stat span:nth-child(3) { animation-delay: 0.12s; }
    .hl-slide.is-active .hl-city-stat span:nth-child(4) { animation-delay: 0.18s; }
    .hl-slide.is-active .hl-city-stat span:nth-child(5) { animation-delay: 0.24s; }
    @keyframes city-bounce-in {
      0% { opacity: 0; transform: translateY(-0.72em) scale(0.86); }
      62% { opacity: 1; transform: translateY(0.1em) scale(1.06); }
      100% { opacity: 1; transform: translateY(0) scale(1); }
    }
    .hl-city-label {
      position: relative;
      z-index: 1;
      margin: 0;
      font-size: clamp(1.2rem, 2.2vw, 1.55rem);
      font-weight: 600;
      color: var(--fg);
      max-width: none;
    }
    .hl-bar {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 0.55rem;
    }
    .hl-step {
      width: 2rem;
      height: 2rem;
      border-radius: 100px;
      border: none;
      background: rgba(255, 255, 255, 0.08);
      box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.1);
      color: rgba(255, 255, 255, 0.88);
      font-size: 0.85rem;
      line-height: 1;
      cursor: pointer;
      padding: 0;
      flex-shrink: 0;
      transition: background 0.25s var(--ease-apple);
    }
    .hl-step:hover { background: rgba(255, 255, 255, 0.14); }
    .hl-controls {
      display: flex;
      align-items: center;
      gap: 0.45rem;
      border: 1px solid var(--frost-line);
      border-radius: 999px;
      padding: 0.3rem 0.4rem 0.3rem 0.7rem;
      background: var(--frost);
      backdrop-filter: var(--frost-blur);
      -webkit-backdrop-filter: var(--frost-blur);
    }
    .hl-dots {
      display: flex;
      align-items: center;
      gap: 0.38rem;
    }
    .hl-dot {
      position: relative;
      width: 0.42rem;
      height: 0.42rem;
      border-radius: 999px;
      border: none;
      background: color-mix(in srgb, var(--fg) 28%, transparent);
      padding: 0;
      overflow: hidden;
      cursor: pointer;
      transition: width 0.35s var(--ease-apple-out);
    }
    .hl-dot.is-active {
      width: 1.7rem;
      background: color-mix(in srgb, var(--fg) 28%, transparent);
    }
    .hl-dot-fill {
      position: absolute;
      inset: 0;
      background: var(--fg);
      border-radius: inherit;
      transform: scaleX(0);
      transform-origin: left center;
      pointer-events: none;
    }
    .hl-dots.is-paused .hl-dot.is-active .hl-dot-fill {
      animation-play-state: paused;
    }
    @keyframes hl-progress {
      from { transform: scaleX(0); }
      to { transform: scaleX(1); }
    }
    .hl-toggle {
      width: 1.85rem;
      height: 1.85rem;
      border-radius: 100px;
      border: none;
      background: rgba(255, 255, 255, 0.08);
      box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.1);
      color: rgba(255, 255, 255, 0.88);
      cursor: pointer;
      font-size: 0.65rem;
      line-height: 1;
      padding: 0;
      transition: background 0.25s var(--ease-apple);
    }
    .hl-toggle:hover { background: rgba(255, 255, 255, 0.14); }
    @media (max-width: 699px) {
      .hl-scroller {
        --hl-card: min(72rem, 88vw);
        padding-inline: 6vw;
      }
      .hl-slide {
        height: auto;
        min-height: 0;
        padding: 2.2rem 1rem 0;
      }
      .hl-slide > p { max-width: 28ch; }
      .hl-int-stat { font-size: 42cqw; }
      .hl-int-glow { filter: blur(48px); }
      .hl-city { min-height: 16rem; padding-bottom: 1rem; }
      .hl-shot.is-laptop { margin-bottom: 0.2rem; }
      .hl-mods .mod-chip { font-size: 0.92rem; }
      .hl-mods .mod-icon { width: 1.7rem; height: 1.7rem; }
      .hl-mods .mod-check { width: 1.05rem; height: 1.05rem; }
      .hl-mods-grid { gap: 0.4rem; }
    }
    @media (prefers-reduced-motion: reduce) {
      .hl-slide { transition: none; }
      .hl-mods .mod-chip { animation: none; }
      .hl-mods .mod-check.is-pop { animation: none; }
    }

    /* Module detail page */
    .crumb {
      font-family: var(--font);
      font-size: 0.75rem;
      color: var(--muted);
      margin: 0 0 1rem;
    }
    .crumb a { color: var(--muted); text-decoration: none; }
    .crumb a:hover { color: var(--fg); }
    .feat-stage { text-align: left; }
    .feat-visual {
      width: 100%;
      height: min(22rem, 72vw);
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--radius-tile);
      corner-shape: var(--corner-smooth);
      overflow: hidden;
      border: 1px solid var(--frost-line);
      background: var(--frost);
      backdrop-filter: var(--frost-blur);
      -webkit-backdrop-filter: var(--frost-blur);
    }
    .feat-visual img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: left top;
    }
    .feat-ph {
      font-family: var(--font);
      font-size: 0.85rem;
      color: var(--muted);
      margin: 0;
      padding: 1rem;
    }
    .feat-caption {
      margin: 1rem 0 0;
      max-width: 48ch;
      min-height: calc(1em * 1.45 * 3);
      color: var(--muted);
      font-size: 1rem;
      line-height: 1.45;
    }
    .feat-bar {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: stretch;
      justify-content: flex-start;
      gap: 0.18rem;
      overflow: hidden;
      width: 100%;
      min-height: 4.15rem;
      padding: 0.28rem;
      margin: 1.35rem 0 0;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 1.35rem;
    }
    .feat-tab {
      flex: 0 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0;
      width: auto;
      min-width: 0;
      min-height: 100%;
      padding: 0.28rem;
      border: none;
      border-radius: 1rem;
      background: transparent;
      color: #fff;
      cursor: pointer;
      font-family: var(--font);
      font-size: 0.8rem;
      font-weight: 650;
      line-height: 1;
      overflow: hidden;
      transition:
        flex-grow 0.42s var(--ease-apple-out),
        background 0.28s var(--ease-apple-out);
    }
    .feat-tab.is-active {
      flex: 1 1 0%;
      width: auto;
      padding: 0.28rem 0.4rem;
      background: #5c5c60;
      color: #fff;
    }
    .feat-tab-icon {
      display: grid;
      place-items: center;
      width: 1.52rem;
      height: 1.52rem;
      margin: 0;
      border-radius: 0.4rem;
      background: color-mix(in srgb, var(--fg) 12%, transparent);
      border: 1px solid color-mix(in srgb, var(--fg) 10%, transparent);
      backdrop-filter: saturate(1.2) blur(10px);
      -webkit-backdrop-filter: saturate(1.2) blur(10px);
      color: #d0d0d0;
      transition:
        background 0.28s var(--ease-apple-out),
        border-color 0.28s var(--ease-apple-out),
        transform 0.42s var(--ease-apple-out),
        color 0.28s var(--ease-apple-out);
    }
    .feat-tab.is-active .feat-tab-icon {
      background: #fff;
      border-color: transparent;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      color: #111;
      transform: scale(1.04);
    }
    .feat-tab-icon svg {
      display: block;
      width: 0.92rem;
      height: 0.92rem;
    }
    .feat-tab-name {
      display: block;
      width: 0;
      max-width: 0;
      height: 0;
      margin: 0;
      min-width: 0;
      overflow: hidden;
      opacity: 0;
      transform: translateY(6px);
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 0.78rem;
      font-weight: 650;
      line-height: 1.15;
      text-align: center;
      color: #fff;
      pointer-events: none;
      transition:
        height 0.42s var(--ease-apple-out),
        margin 0.42s var(--ease-apple-out),
        opacity 0.28s var(--ease-apple-out),
        transform 0.42s var(--ease-apple-out);
    }
    .feat-tab.is-active .feat-tab-name {
      width: auto;
      max-width: 100%;
      height: 1.15em;
      margin-top: 0.22rem;
      font-size: 0.82rem;
      opacity: 1;
      transform: none;
    }

    #overview h2 { margin-bottom: 0.45rem; }
    #overview .proof-lead { margin-bottom: 1.5rem; }
    .ov-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 1rem 1.5rem;
      flex-wrap: wrap;
      margin-bottom: 1.35rem;
    }
    .ov-head h2 { margin: 0; max-width: 16ch; }
    .ov-sub {
      color: var(--muted);
      margin: 0.4rem 0 0;
      max-width: 36ch;
      font-size: 1rem;
    }
    .ov-head label {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 0.4rem;
      max-width: none;
    }
    .ov-select {
      font-family: var(--font);
      font-size: 0.75rem;
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 0.7rem 2rem 0.7rem 1rem;
      background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='none' stroke='%23999' stroke-width='1.5' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 0.9rem center;
      color: var(--muted);
      appearance: none;
      min-width: 16rem;
      display: block;
    }
    .ov-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0.7rem;
    }
    .ov-card {
      border: 1px solid var(--frost-line);
      border-radius: var(--radius-tile);
      corner-shape: var(--corner-smooth);
      padding: 1.35rem 1.4rem 1.3rem;
      min-height: 13.5rem;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      text-align: left;
      background: var(--frost);
      backdrop-filter: var(--frost-blur);
      -webkit-backdrop-filter: var(--frost-blur);
    }
    .ov-kicker {
      font-family: var(--font);
      font-size: 0.7rem;
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--muted);
      margin: 0 0 0.55rem;
      max-width: none;
    }
    .ov-stat {
      font-size: clamp(1.35rem, 2.6vw, 1.75rem);
      font-weight: 700;
      line-height: 1.15;
      letter-spacing: -0.03em;
      margin: 0;
      max-width: 14ch;
    }
    .ov-note {
      font-size: 0.95rem;
      line-height: 1.45;
      color: var(--muted);
      margin: 0.55rem 0 0;
      max-width: none;
      margin-top: auto;
      padding-top: 0.85rem;
    }
    .ov-ph {
      border: 1px dashed var(--line);
      width: 100%;
      min-height: 7.5rem;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font);
      font-size: 0.7rem;
      color: var(--muted);
      margin-top: 0.85rem;
      border-radius: 0.9rem;
    }
    @media (min-width: 640px) and (max-width: 899px) {
      .ov-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (min-width: 900px) {
      .ov-grid { grid-template-columns: repeat(3, 1fr); }
    }

    /* v2 — BA revision (index-v2.html) */
    .hero-copy h1 {
      max-width: 22em;
      margin-left: auto;
      margin-right: auto;
    }
    .hero-sub {
      margin: 0 auto 1rem;
      max-width: 46ch;
      text-align: center;
      font-size: clamp(0.95rem, 1.6vw, 1.12rem);
      line-height: 1.45;
      color: #dedede;
    }
    .hero-caption {
      margin: 0.85rem auto 0;
      text-align: center;
      max-width: 48ch;
    }
    .audience-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1rem;
      margin-top: 1.25rem;
    }
    .audience-card {
      border: 1px solid var(--line);
      padding: 1.35rem 1.25rem 1.4rem;
      display: flex;
      flex-direction: column;
      gap: 0.7rem;
    }
    .audience-card h3 { margin: 0; }
    .audience-card p { margin: 0; max-width: none; font-size: 0.98rem; }
    .audience-card .caption { max-width: none; }
    .ops-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1rem;
      margin-top: 1.25rem;
    }
    .ops-card {
      border: 1px solid var(--line);
      padding: 1rem;
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      min-width: 0;
    }
    .ops-card h3 { margin: 0; }
    .ops-card p { margin: 0; max-width: none; font-size: 0.95rem; }
    .ops-shot {
      width: 100%;
      height: 12rem;
      object-fit: cover;
      object-position: top center;
      border-radius: 0.9rem;
      background: var(--fill);
    }
    .ops-ph {
      border: 1px dashed var(--line);
      width: 100%;
      height: 12rem;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font);
      font-size: 0.7rem;
      color: var(--muted);
      border-radius: 0.9rem;
      text-align: center;
      padding: 1rem;
    }
    .proof-quote {
      margin: 1.5rem 0 0;
      padding: 1.45rem 1.55rem 1.35rem;
      border: 1px solid var(--frost-line);
      border-radius: var(--radius-tile);
      corner-shape: var(--corner-smooth);
      background: var(--frost);
      backdrop-filter: var(--frost-blur);
      -webkit-backdrop-filter: var(--frost-blur);
    }
    .proof-quote p {
      margin: 0 0 0.75rem;
      max-width: 38em;
      font-size: clamp(1.15rem, 2vw, 1.45rem);
      font-weight: 510;
      line-height: 1.35;
    }
    .proof-quote .caption {
      margin: 0;
      max-width: none;
    }
    .proof-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0.7rem;
      margin-top: 1.5rem;
    }
    .proof-stat {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 0.85rem;
      min-height: 9.75rem;
      padding: 1.25rem 1.4rem 1.2rem;
      border: 1px solid var(--frost-line);
      border-radius: var(--radius-tile);
      corner-shape: var(--corner-smooth);
      background: var(--frost);
      backdrop-filter: var(--frost-blur);
      -webkit-backdrop-filter: var(--frost-blur);
    }
    .proof-stat strong {
      font-size: clamp(2.1rem, 3.8vw, 3rem);
      font-weight: 700;
      letter-spacing: -0.04em;
      line-height: 0.95;
    }
    .proof-stat span {
      color: var(--muted);
      font-size: 0.92rem;
      line-height: 1.3;
      max-width: none;
      white-space: nowrap;
    }
    .proof-kicker {
      font-family: var(--font);
      font-size: 0.7rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--muted);
      margin: 2.75rem 0 0.7rem;
    }
    @media (min-width: 640px) and (max-width: 899px) {
      .proof-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
    }
    @media (min-width: 900px) {
      .proof-grid { grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
    }
    .price-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0.7rem;
      margin-top: 1.5rem;
    }
    .price-example {
      margin: 1.15rem 0 0;
      color: var(--muted);
      font-size: 1.05rem;
      line-height: 1.4;
      max-width: none;
    }
    .price-example strong {
      color: var(--fg);
      font-weight: 600;
    }
    .price-example a {
      color: var(--fg);
      text-underline-offset: 0.18em;
    }
    .price-example a:hover { opacity: 0.65; }
    .price-star {
      font-size: 0.78em;
      font-weight: 500;
      vertical-align: super;
      margin-left: 0.06em;
    }
    .price-note {
      margin: 0.5rem 0 0;
      color: var(--muted);
      font-size: 0.95rem;
      line-height: 1.4;
      max-width: none;
    }
    .price-asterisk {
      margin: 0.9rem 0 0;
      color: var(--muted);
      font-size: 0.88rem;
      line-height: 1.45;
      max-width: 42em;
    }
    .mod-asterisk {
      margin: 1rem 0 0;
      color: var(--muted);
      font-size: 0.88rem;
      line-height: 1.45;
      max-width: 42em;
    }
    .aud-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0.7rem;
      margin-top: 1.5rem;
    }
    .aud-card {
      display: flex;
      flex-direction: column;
      gap: 0.45rem;
      min-height: 12.5rem;
      padding: 1.25rem 1.4rem 1.2rem;
      border: 1px solid var(--frost-line);
      border-radius: var(--radius-tile);
      corner-shape: var(--corner-smooth);
      background: var(--frost);
      backdrop-filter: var(--frost-blur);
      -webkit-backdrop-filter: var(--frost-blur);
    }
    .aud-kicker {
      font-family: var(--font);
      font-size: 0.7rem;
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--muted);
      margin: 0;
    }
    .aud-card h3 {
      margin: 0;
      font-size: clamp(1.25rem, 2.2vw, 1.55rem);
      line-height: 1.2;
    }
    .aud-card p {
      margin: 0.4rem 0 0;
      margin-top: auto;
      max-width: none;
      color: var(--muted);
      font-size: 0.95rem;
      line-height: 1.45;
    }
    @media (min-width: 640px) {
      .aud-grid { grid-template-columns: repeat(3, 1fr); }
    }
    .how-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0.7rem;
      margin-top: 1.5rem;
    }
    .how-step {
      display: flex;
      flex-direction: column;
      gap: 0.45rem;
      min-height: 12.5rem;
      padding: 1.25rem 1.4rem 1.2rem;
      border: 1px solid var(--frost-line);
      border-radius: var(--radius-tile);
      corner-shape: var(--corner-smooth);
      background: var(--frost);
      backdrop-filter: var(--frost-blur);
      -webkit-backdrop-filter: var(--frost-blur);
    }
    .how-step strong {
      font-family: var(--font);
      font-size: 0.7rem;
      font-weight: 500;
      letter-spacing: 0.08em;
      color: var(--muted);
      white-space: nowrap;
    }
    .how-step h3 {
      margin: 0;
      font-size: clamp(1.25rem, 2.2vw, 1.55rem);
      line-height: 1.2;
    }
    .how-step p {
      margin: 0.4rem 0 0;
      margin-top: auto;
      max-width: none;
      color: var(--muted);
      font-size: 0.95rem;
      line-height: 1.45;
    }
    @media (min-width: 640px) {
      .price-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
    }
    @media (min-width: 900px) {
      .how-grid { grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
    }
    .price-box ul {
      margin: 0.75rem 0 0;
      padding: 0 0 0 1.1rem;
      max-width: 40rem;
    }
    .price-box li {
      margin: 0 0 0.4rem;
      font-size: 0.95rem;
    }
    .how-note {
      margin-top: 1.15rem;
      max-width: 52ch;
    }
    .cta-split {
      display: grid;
      gap: 1.75rem;
    }
    .cta-split .cta-copy h2 { margin-top: 0; }
    .cta-copy .proof-lead { margin-top: 0.45rem; }
    .demo-form {
      display: grid;
      gap: 0.85rem;
      max-width: 32rem;
      margin-top: 1.35rem;
      padding: 1.45rem 1.55rem 1.35rem;
      position: relative;
      border: 1px solid var(--frost-line);
      border-radius: var(--radius-tile);
      corner-shape: var(--corner-smooth);
      background: var(--frost);
      backdrop-filter: var(--frost-blur);
      -webkit-backdrop-filter: var(--frost-blur);
    }
    .cta-split .demo-form {
      margin-top: 0;
      max-width: none;
    }
    .demo-form label {
      display: grid;
      gap: 0.35rem;
      font-size: 0.8rem;
      color: var(--muted);
    }
    .demo-form label > span { white-space: nowrap; }
    .demo-form label span span { opacity: 0.7; }
    .demo-form input,
    .demo-form select,
    .demo-form textarea {
      width: 100%;
      background: color-mix(in srgb, var(--fg) 4%, transparent);
      border: 1px solid var(--frost-line);
      color: var(--fg);
      padding: 0.7rem 0.85rem;
      border-radius: var(--radius-btn);
      corner-shape: var(--corner-smooth);
      font-family: inherit;
      font-size: 1rem;
    }
    .demo-form input:focus,
    .demo-form select:focus,
    .demo-form textarea:focus {
      outline: none;
      border-color: color-mix(in srgb, var(--fg) 45%, transparent);
    }
    .demo-form input::placeholder,
    .demo-form textarea::placeholder {
      color: var(--muted);
      opacity: 0.7;
    }
    .demo-form select {
      appearance: none;
      background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
      background-position: calc(100% - 1.1rem) 1.15rem, calc(100% - 0.75rem) 1.15rem;
      background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
      background-repeat: no-repeat;
    }
    .demo-form textarea { min-height: 6rem; resize: vertical; }
    .demo-form .btn {
      width: 100%;
      justify-self: stretch;
      text-align: center;
      cursor: pointer;
      appearance: none;
      font-family: inherit;
      font-size: 0.85rem;
      margin-top: 0.25rem;
    }
    .demo-form .btn:disabled {
      opacity: 0.55;
      pointer-events: none;
    }
    .demo-form .hp {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
    }
    .demo-form .form-status {
      margin: 0;
      font-size: 0.82rem;
      color: color-mix(in srgb, #ff8b8b 82%, var(--fg));
    }
    .demo-form.is-sent {
      align-content: start;
    }
    .demo-form.is-sent p {
      margin: 0;
      color: var(--muted);
      max-width: none;
    }
    .legal-block h2 { margin-top: 0; }
    .legal-block p { max-width: 52ch; }
    @media (min-width: 900px) {
      .audience-grid,
      .ops-grid { grid-template-columns: repeat(3, 1fr); }
      .ops-shot,
      .ops-ph { height: 14rem; }
      .cta-split {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        gap: 2.5rem 3rem;
        align-items: start;
      }
    }

    @media (max-width: 899px) {
      .hero-headline h1 .hero-split { display: block; }
      .header-burger {
        display: grid;
      }
      .site-header > .wrap {
        display: flex;
        align-items: center;
        gap: 0.15rem 0.55rem;
      }
      .header-brand {
        justify-self: start;
        gap: 0;
        margin-right: auto;
      }
      .header-end { justify-self: end; }
      .header-nav {
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        width: auto;
        height: 0;
        overflow: visible;
        pointer-events: none;
      }
      .header-nav > a,
      .nav-item.has-mega > a { display: none; }
      .mega-mobile-only { display: inline; }
      .site-header.is-mega-open .mega {
        visibility: visible;
        pointer-events: auto;
        transition-delay: 0s;
      }
      .site-header.is-mega-open .mega::after { transform: scaleY(1); }
      .site-header.is-mega-open .mega-inner {
        opacity: 1;
        transform: none;
        transition:
          opacity 0.4s var(--ease-apple) 0.08s,
          transform 0.5s var(--ease-apple-out) 0.08s;
      }
      body:has(.site-header.is-mega-open)::before {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition:
          opacity 0.32s var(--ease-apple),
          visibility 0s linear 0s;
      }
      html.is-mega-open { overflow: hidden; }
      .mega {
        padding: 1.15rem 0 1.6rem;
      }
      .mega-inner {
        grid-template-columns: 1fr;
        gap: 2.75rem;
      }
      .mega-col {
        gap: 0.5rem;
      }
      .mega-label {
        margin: 0 0 calc(-0.5rem + 0.2rem);
      }
      .mega-col-main a { font-size: 1.2rem; }

      .hero-bento > .bento-tile.is-eco {
        aspect-ratio: auto;
        min-height: 25rem;
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 0;
      }
      .hero-bento > .bento-tile.is-eco .bento-head {
        position: relative;
        z-index: 4;
        padding-left: 1.55rem;
        padding-right: 1.2rem;
      }
      .hero-bento > .bento-tile.is-eco .bento-shot {
        width: 148%;
        max-width: none;
        max-height: none;
        margin-left: -1.15rem;
        margin-right: auto;
        align-self: flex-start;
        object-fit: contain;
        object-position: left bottom;
        transform: scale(1.28);
        transform-origin: 0% 100%;
        animation: eco-slide-in 0.95s var(--ease-apple-out) both;
      }
      @keyframes eco-slide-in {
        from { transform: translateX(-22%) scale(1.28); }
        to { transform: scale(1.28); }
      }
      .hero-bento .bento-tile.is-int .bento-int-icons .int-icon {
        animation: int-drift 5.4s ease-in-out infinite alternate;
      }
      .hero-bento .bento-tile.is-int .bento-int-icons .int-icon:nth-child(1) { animation-duration: 5.2s; animation-delay: 0s; }
      .hero-bento .bento-tile.is-int .bento-int-icons .int-icon:nth-child(2) { animation-duration: 6.1s; animation-delay: 0.35s; }
      .hero-bento .bento-tile.is-int .bento-int-icons .int-icon:nth-child(3) { animation-duration: 4.8s; animation-delay: 0.15s; }
      .hero-bento .bento-tile.is-int .bento-int-icons .int-icon:nth-child(4) { animation-duration: 5.7s; animation-delay: 0.55s; }
      .hero-bento .bento-tile.is-int .bento-int-icons .int-icon:nth-child(5) { animation-duration: 6.4s; animation-delay: 0.2s; }
      .hero-bento .bento-tile.is-int .bento-int-icons .int-icon:nth-child(6) { animation-duration: 5s; animation-delay: 0.7s; }
      @keyframes int-drift {
        from { transform: rotate(var(--r)) translate(0, 0); }
        to { transform: rotate(calc(var(--r) + 9deg)) translate(0.32rem, -0.48rem); }
      }

      .problem-ill.has-art.is-chaos,
      .problem-ill.has-art.is-channels {
        align-items: flex-start;
        justify-content: flex-start;
      }
      .problem-ill.has-art.is-chaos .ill-logos {
        justify-content: flex-start;
        width: 100%;
      }
      .problem-ill.has-art.is-channels .ill-orbit {
        align-self: flex-start;
        margin-left: 0;
      }
      .problem-ill.has-art.is-chaos .ill-logo-name { display: none; }
      .problem-ill.has-art.is-chaos .ill-logo-in {
        opacity: 0;
        transform: translateY(0.28em);
      }
      .problem-ill.has-art.is-chaos .ill-logos.is-in .ill-logo-in {
        animation: ill-logo-wave-in 0.55s var(--ease-apple-out) var(--d) forwards;
      }
      .problem-ill.has-art.is-chaos .ill-logos.is-in .ill-logo-face {
        animation: ill-logo-wave 2.2s var(--ease-apple) infinite;
      }
      .problem-ill.has-art.is-chaos .ill-logo:nth-child(1) .ill-logo-face { animation-delay: 0.55s; }
      .problem-ill.has-art.is-chaos .ill-logo:nth-child(2) .ill-logo-face { animation-delay: 0.7s; }
      .problem-ill.has-art.is-chaos .ill-logo:nth-child(3) .ill-logo-face { animation-delay: 0.85s; }
      .problem-ill.has-art.is-chaos .ill-logo:nth-child(4) .ill-logo-face { animation-delay: 1s; }
      .problem-ill.has-art.is-chaos .ill-logo:nth-child(5) .ill-logo-face { animation-delay: 1.15s; }
      .problem-ill.has-art.is-chaos .ill-logo:nth-child(6) .ill-logo-face { animation-delay: 1.3s; }
      .problem-ill.has-art.is-chaos .ill-logo:nth-child(7) .ill-logo-face { animation-delay: 1.45s; }
      @keyframes ill-logo-wave-in {
        from { opacity: 0; transform: translateY(0.28em); }
        to { opacity: 1; transform: none; }
      }
      @keyframes ill-logo-wave {
        0%, 22%, 100% { transform: translateY(0) scale(1); }
        11% { transform: translateY(-0.42em) scale(1.06); }
      }

      .hl-slide:nth-child(1),
      .hl-slide:nth-child(2) {
        min-height: 28rem;
      }
      .hl-slide:nth-child(1) .hl-visual,
      .hl-slide:nth-child(2) .hl-visual {
        margin-top: 0;
        flex: 1 1 auto;
        align-items: center;
        justify-content: center;
      }
      .hl-shot.is-pair,
      .hl-shot.is-laptop {
        object-position: center center;
        margin-bottom: 0;
      }
      .hero-bento .bento-tile.is-profit {
        aspect-ratio: auto;
        min-height: 0;
        height: auto;
      }
      .hero-bento .bento-tile.is-profit .bento-cal {
        flex: 0 0 auto;
        height: auto;
      }
      .hero-bento .bento-tile.is-profit .cal-grid {
        flex: 0 0 auto;
        grid-template-rows: var(--cal-day-h) var(--cal-day-h);
      }
      .hero-bento .bento-tile.is-profit .cal-day {
        height: var(--cal-day-h);
        min-height: var(--cal-day-h);
        padding-bottom: var(--cal-day-pad-bot);
      }
      .hero-bento .bento-tile.is-profit .cal-weekdays,
      .hero-bento .bento-tile.is-profit .cal-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .hero-bento .bento-tile.is-profit .cal-weekdays span:nth-child(n + 3) {
        display: none;
      }
      .hero-bento .bento-tile.is-profit .cal-day:nth-child(n + 5) {
        display: none;
      }
      .hero-bento .bento-tile.is-profit .cal-day:nth-child(4n) {
        border-right: 0.5px solid #d8d8d8;
      }
      .hero-bento .bento-tile.is-profit .cal-day:nth-child(2n) {
        border-right: none;
      }
      .hero-bento .bento-tile.is-mini {
        aspect-ratio: auto;
        min-height: 19.5rem;
        height: auto;
      }
      .hero-bento .bento-tile.is-mods .bento-mods {
        overflow: visible;
      }

      #solution .problem-ill.has-art.is-safari {
        min-height: 22.5rem;
      }
      #solution .safari-win {
        height: 100%;
      }
      #solution .safari-page img {
        width: 118%;
      }

      html.is-mod-detail {
        overflow: hidden;
      }
      #modules.section {
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        padding-left: 0;
        padding-right: 0;
      }
      #modules > .label,
      #modules .mod-panel > h2,
      #modules .mod-asterisk {
        padding-left: var(--pad-x);
        padding-right: var(--pad-x);
      }
      #modules .mod-panel {
        position: relative;
        padding: 0 0 0.35rem;
        border: none;
        border-radius: 0;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
      }
      #modules .mod-panel > h2 {
        margin-bottom: 1rem;
      }
      .mod-switcher {
        display: flex;
        flex-direction: column;
        gap: 0.85rem;
        min-height: 0;
      }
      .mod-media,
      .mod-media.is-reel {
        order: -1;
        width: 100%;
        min-height: 32rem;
        height: min(92vw, 36rem);
        border-radius: 0;
        align-self: stretch;
        cursor: pointer;
      }
      .mod-reel-cap {
        display: none;
      }
      .mod-reel-slide {
        grid-template-rows: minmax(0, 1fr);
        gap: 0;
      }
      .mod-reel-slide.is-crop .mod-reel-frame {
        padding: 0;
        justify-content: center;
      }
      .mod-media.is-reel .mod-reel-slide.is-crop img {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        object-fit: cover;
        object-position: left center;
      }
      .mod-media.is-reel .mod-reel-slide.is-phone img {
        padding: 0;
        height: 100%;
        max-height: none;
      }
      .mod-col {
        order: 2;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        display: grid;
        grid-template-columns: 1fr auto auto 1fr;
        grid-template-areas:
          "list list list list"
          ". prev next .";
        align-items: center;
        column-gap: 0.45rem;
        row-gap: 0.5rem;
        padding: 0 var(--pad-x) 0.55rem;
      }
      .mod-read {
        order: 1;
        position: relative;
        overflow: hidden;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        align-self: center;
        margin: 0.05rem 0 0;
        border: none;
        border-radius: 999px;
        padding: 0.55rem 1.15rem;
        background: rgba(255, 255, 255, 0.1);
        box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.14);
        color: #fff;
        cursor: pointer;
        font-family: var(--font);
        font-size: 0.88rem;
        font-weight: 510;
        line-height: 1;
        isolation: isolate;
        animation: mod-read-idle 2.8s var(--ease-apple) infinite;
      }
      .mod-read::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: linear-gradient(
          110deg,
          transparent 25%,
          rgba(255, 255, 255, 0.22) 48%,
          transparent 72%
        );
        background-size: 220% 100%;
        background-position: 120% 0;
        animation: mod-read-shine 3.4s var(--ease-apple) infinite;
        pointer-events: none;
        z-index: 0;
      }
      .mod-read.is-swap {
        animation: mod-read-pop 0.52s var(--ease-apple-out);
      }
      @keyframes mod-read-idle {
        0%, 100% {
          background: rgba(255, 255, 255, 0.1);
          box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.14);
        }
        50% {
          background: rgba(255, 255, 255, 0.18);
          box-shadow:
            inset 0 0 0 0.5px rgba(255, 255, 255, 0.3),
            0 0 18px rgba(255, 255, 255, 0.1);
        }
      }
      @keyframes mod-read-shine {
        0% { background-position: 130% 0; }
        100% { background-position: -30% 0; }
      }
      @keyframes mod-read-pop {
        0% { transform: translateY(7px) scale(0.96); opacity: 0.4; }
        58% { transform: translateY(-2px) scale(1.04); opacity: 1; }
        100% { transform: none; opacity: 1; }
      }
      .mod-list {
        grid-area: list;
        position: relative;
        display: flex;
        flex: none;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0.18rem;
        overflow: hidden;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        min-height: 4.15rem;
        padding: 0.28rem;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 1.35rem;
        scrollbar-width: none;
      }
      .mod-seg-thumb {
        display: none;
      }
      @media (prefers-reduced-motion: reduce) {
        .mod-item,
        .mod-item.is-open,
        #mod-list > .mod-item,
        #mod-list > .mod-item.is-open,
        .mod-pill,
        .mod-item.is-open .mod-pill {
          transition: none;
        }
        .mod-read,
        .mod-read::after,
        .mod-read.is-swap {
          animation: none;
        }
        .mod-pill-icon,
        .mod-pill-name {
          transition: none;
        }
      }
      .mod-list::-webkit-scrollbar { display: none; }
      .mod-list::after { display: none; }
      .mod-group-label,
      .mod-pill-body,
      .mod-more {
        display: none !important;
      }
      #mod-list > .mod-item,
      #mod-list > .mod-item.is-open {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: stretch;
        align-self: stretch;
        width: auto;
        max-width: none;
        flex: 0 0 auto;
        min-width: 0;
        min-height: 0;
        transition: flex-grow 0.42s var(--ease-apple-out);
      }
      #mod-list > .mod-item.is-open {
        flex: 1 1 0%;
        width: auto;
        min-width: 0;
        max-width: none;
      }
      .mod-pill,
      .mod-item.is-open .mod-pill {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0;
        width: auto;
        max-width: none;
        min-height: 100%;
        height: auto;
        padding: 0.28rem;
        border-radius: 1rem;
        cursor: pointer;
        background: transparent;
        box-shadow: none;
        line-height: 1;
        font-size: 0.8rem;
        overflow: hidden;
        transition: background 0.28s var(--ease-apple-out);
      }
      .mod-item:not(.is-open) .mod-pill {
        align-self: stretch;
        height: auto;
        min-height: 100%;
      }
      .mod-item.is-open .mod-pill,
      .mod-item.is-open .mod-pill:hover {
        width: 100%;
        min-height: 100%;
        padding: 0.28rem 0.4rem;
        background: #5c5c60;
        color: #fff;
        cursor: default;
      }
      .mod-pill-icon {
        display: grid;
        width: 1.52rem;
        height: 1.52rem;
        margin: 0;
        border-radius: 0.4rem;
        transition:
          background 0.28s var(--ease-apple-out),
          border-color 0.28s var(--ease-apple-out),
          transform 0.42s var(--ease-apple-out);
      }
      .mod-item.is-open .mod-pill-icon {
        margin: 0;
        background: var(--mod);
        border-color: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        transform: scale(1.04);
      }
      .mod-pill-icon::after {
        width: 0.92rem;
        height: 0.92rem;
      }
      .mod-item.is-open .mod-pill-icon::after {
        background: #fff;
      }
      .mod-pill-name {
        display: block;
        width: 0;
        max-width: 0;
        height: 0;
        margin: 0;
        min-width: 0;
        overflow: hidden;
        opacity: 0;
        transform: translateY(6px);
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.78rem;
        font-weight: 650;
        line-height: 1.15;
        text-align: center;
        color: #fff;
        pointer-events: none;
        transition:
          height 0.42s var(--ease-apple-out),
          margin 0.42s var(--ease-apple-out),
          opacity 0.28s var(--ease-apple-out),
          transform 0.42s var(--ease-apple-out);
      }
      .mod-item.is-open .mod-pill-name {
        width: auto;
        max-width: 100%;
        height: 1.15em;
        margin-top: 0.22rem;
        margin-bottom: 0;
        font-size: 0.82rem;
        font-weight: 650;
        line-height: 1.15;
        opacity: 1;
        transform: none;
      }
      .mod-close,
      .mod-nav {
        width: 2.15rem;
        height: 2.15rem;
        border: none;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.16);
        -webkit-backdrop-filter: blur(16px);
        backdrop-filter: blur(16px);
        box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.22);
        color: #fff;
        cursor: pointer;
        padding: 0;
        display: grid;
        place-items: center;
      }
      .mod-col > .mod-nav {
        display: grid;
        position: static;
        transform: none;
      }
      #mod-prev { grid-area: prev; }
      #mod-next { grid-area: next; }
      .mod-close {
        display: none;
        position: absolute;
        top: 0.75rem;
        right: 0.75rem;
        z-index: 6;
      }
      .mod-close svg,
      .mod-nav svg {
        width: 0.78rem;
        height: 0.78rem;
        display: block;
      }
      .mod-detail-bar {
        display: none;
        padding: 0 var(--pad-x) 1.1rem;
      }
      .mod-nav {
        flex: 0 0 auto;
      }
      .mod-detail-card {
        flex: 1 1 auto;
        min-width: 0;
        padding: 0.95rem 1.05rem 1rem;
        border-radius: 1.15rem;
        background: rgba(255, 255, 255, 0.1);
        box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.12);
      }
      .mod-detail-card h3 {
        margin: 0 0 0.35rem;
        font-size: 1.05rem;
        font-weight: 650;
        line-height: 1.25;
      }
      .mod-detail-copy p {
        margin: 0 0 0.45rem;
        max-width: none;
        font-size: 0.88rem;
        line-height: 1.4;
        color: var(--muted);
      }
      .mod-detail-copy p:last-child { margin-bottom: 0; }
      .mod-detail-more[hidden] { display: none !important; }
      #modules.is-detail.section {
        min-height: 100svh;
      }
      #modules.is-detail .mod-panel {
        position: fixed;
        inset: 0;
        z-index: 50;
        margin: 0;
        padding: 0;
        background: var(--bg);
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }
      #modules.is-detail > .label,
      #modules.is-detail .mod-panel > h2,
      #modules.is-detail .mod-col,
      #modules.is-detail .mod-read {
        display: none;
      }
      #modules.is-detail .mod-close {
        display: grid;
      }
      #modules.is-detail .mod-switcher {
        flex: 1 1 auto;
        min-height: 0;
        gap: 0;
      }
      #modules.is-detail .mod-media,
      #modules.is-detail .mod-media.is-reel {
        flex: 1 1 auto;
        height: auto;
        min-height: 0;
      }
      #modules.is-detail .mod-detail-bar {
        display: block;
        padding-top: 0.85rem;
        padding-bottom: max(1.15rem, env(safe-area-inset-bottom));
      }
      #modules.is-detail .mod-reel-cap {
        display: none;
      }
      #modules.is-detail .mod-reel-slide {
        grid-template-rows: minmax(0, 1fr);
      }

      #powered.section {
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        padding-left: 0;
        padding-right: 0;
      }
      #powered > .label,
      #powered > .hl-head,
      #powered > .hl-bar {
        padding-left: var(--pad-x);
        padding-right: var(--pad-x);
      }
      .hl-scroller {
        --hl-card: 100vw;
        --hl-gap: 0;
        padding-inline: 0;
        width: 100vw;
        max-width: 100vw;
      }
      .hl-slide {
        border-radius: 0;
        border-left: none;
        border-right: none;
      }

      .proof-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.7rem;
      }
      .proof-stat {
        min-width: 0;
      }
      .proof-stat span {
        white-space: normal;
      }

      .how-step {
        min-height: 0;
        padding: 0.9rem 1.05rem 0.85rem;
        gap: 0.2rem;
      }
      .how-step p {
        margin-top: 0.2rem;
      }

      .footer-heading {
        margin-top: 1.85rem;
      }
    }