:root {
        --ink: #1d1d1f;
        --graphite: #707070;
        --slate: #474747;
        --ash: #333333;
        --fog: #f5f5f7;
        --snow: #ffffff;
        --silver-mist: #e8e8ed;
        --azure: #0071e3;
        --cobalt: #0066cc;
        --line: rgba(29, 29, 31, 0.1);
        --frost: rgba(255, 255, 255, 0.72);
        --radius-card: 28px;
        --max: 1200px;
        --display: clamp(56px, 10vw, 112px);
        --heading: clamp(40px, 6vw, 76px);
        --subheading: clamp(20px, 2.4vw, 28px);
        color-scheme: light;
      }

      * {
        box-sizing: border-box;
      }

      html {
        scroll-behavior: smooth;
      }

      body {
        margin: 0;
        background: var(--fog);
        color: var(--ink);
        font-family: "SF Pro Text", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        font-size: 17px;
        line-height: 1.47;
        letter-spacing: -0.006em;
        text-rendering: geometricPrecision;
        -webkit-font-smoothing: antialiased;
      }

      a {
        color: inherit;
        text-decoration: none;
      }

      .site-nav {
        position: fixed;
        z-index: 20;
        top: 0;
        left: 0;
        right: 0;
        height: 48px;
        background: rgba(245, 245, 247, 0.78);
        border-bottom: 1px solid rgba(232, 232, 237, 0.5);
        backdrop-filter: blur(22px);
        -webkit-backdrop-filter: blur(22px);
        transition: background 220ms ease, border-color 220ms ease;
      }

      .site-nav.is-scrolled {
        background: rgba(255, 255, 255, 0.82);
        border-color: var(--silver-mist);
      }

      .nav-inner {
        width: min(var(--max), calc(100% - 32px));
        height: 100%;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
      }

      .brand {
        /* never let a long link row squeeze the logo out of the bar */
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: -0.003em;
        white-space: nowrap;
      }

      .brand-mark {
        flex: 0 0 auto;
        width: 18px;
        height: 18px;
        border-radius: 6px;
        background:
          radial-gradient(circle at 70% 22%, #ffffff 0 8%, transparent 9%),
          linear-gradient(135deg, #1d1d1f 0%, #515154 100%);
      }

      .nav-links {
        display: flex;
        align-items: center;
        min-width: 0;
        gap: clamp(14px, 3vw, 28px);
        color: var(--ash);
        font-size: 12px;
        letter-spacing: -0.003em;
      }

      .nav-links a {
        flex: 0 0 auto;
        opacity: 0.86;
        transition: opacity 180ms ease;
      }

      .nav-links a:hover {
        opacity: 1;
      }

      .download {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 32px;
        padding: 6px 14px;
        border-radius: 999px;
        background: var(--azure);
        color: var(--snow);
        font-size: 13px;
        line-height: 1.2;
        letter-spacing: -0.003em;
        white-space: nowrap;
        transition: transform 180ms ease, filter 180ms ease;
      }

      .download:hover {
        filter: brightness(0.96);
        transform: translateY(-1px);
      }

      main {
        overflow: hidden;
      }

      .section {
        padding: clamp(48px, 7vw, 88px) 0;
      }

      .page-record .section:not(.app-hero) {
        padding: clamp(28px, 3.5vw, 44px) 0;
      }

      .section.hero {
        min-height: auto;
        display: grid;
        align-items: start;
        padding-top: clamp(92px, 11vw, 124px);
        padding-bottom: clamp(40px, 6vw, 72px);
      }

      /* the hero artwork already fades out into the page — start Apps
         right at that transition instead of adding a full section gap */
      .section#apps {
        padding-top: clamp(4px, 1vw, 12px);
      }

      .container {
        width: min(var(--max), calc(100% - 32px));
        margin: 0 auto;
      }

      .hero-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(24px, 4vw, 44px);
        text-align: center;
      }

      .eyebrow {
        margin: 0 0 8px;
        color: var(--graphite);
        font-size: clamp(18px, 2.2vw, 24px);
        font-weight: 600;
        line-height: 1.29;
        letter-spacing: -0.005em;
      }

      h1,
      h2,
      h3,
      p {
        margin-top: 0;
      }

      h1 {
        max-width: 1000px;
        margin: 0 auto 18px;
        font-family: "SF Pro Display", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        font-size: var(--display);
        font-weight: 700;
        line-height: 1.02;
        letter-spacing: -0.022em;
      }

      .hero-subtitle {
        margin: 0 auto 28px;
        max-width: 620px;
        color: var(--slate);
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(19px, 2.6vw, 26px);
        font-weight: 400;
        line-height: 1.36;
        letter-spacing: 0;
      }

      .hero-actions {
        display: flex;
        justify-content: center;
        gap: 12px;
      }

      .hero-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 36px;
        padding: 7px 20px;
        border-radius: 999px;
        font-size: 15px;
        font-weight: 400;
        letter-spacing: -0.003em;
        white-space: nowrap;
        transition: transform 180ms ease, filter 180ms ease;
      }

      .hero-btn:hover {
        transform: translateY(-1px);
        filter: brightness(0.96);
      }

      .hero-btn--light {
        background: rgba(210, 210, 215, 0.5);
        color: var(--ink);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
      }

      .hero-btn--dark {
        background: transparent;
        color: var(--ink);
        border: 1.5px solid rgba(29, 29, 31, 0.35);
      }

      .visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
      }

      .hero-art {
        position: relative;
        width: 100%;
        padding-top: 48px;
      }

      .hero-art-frame {
        position: relative;
        width: 100%;
      }

      .hero-art-img {
        display: block;
        width: 100%;
        height: auto;
        -webkit-mask-image: linear-gradient(to bottom, #000 74%, rgba(0, 0, 0, 0) 100%);
        mask-image: linear-gradient(to bottom, #000 74%, rgba(0, 0, 0, 0) 100%);
      }

      .hero-art-btn {
        position: absolute;
        display: block;
        border-radius: 999px;
        cursor: pointer;
        transition: background 180ms ease;
      }

      .hero-art-btn:hover {
        background: rgba(255, 255, 255, 0.22);
      }

      .hero-art-btn:focus-visible {
        outline: 2px solid rgba(29, 29, 31, 0.55);
        outline-offset: 3px;
      }

      .hero-art-btn--learn {
        left: 33.1%;
        top: 80.6%;
        width: 16.4%;
        height: 8.6%;
      }

      .hero-art-btn--support {
        left: 50.9%;
        top: 80.6%;
        width: 16.8%;
        height: 8.6%;
      }

      .hero-stage {
        position: relative;
        aspect-ratio: 3 / 2;
        min-height: 0;
        padding: 0;
        border-radius: var(--radius-card);
        background: #000000;
        overflow: hidden;
        isolation: isolate;
      }

      .wall-type {
        position: absolute;
        inset: 2% -5% auto;
        z-index: 0;
        color: rgba(29, 29, 31, 0.045);
        font-family: "SF Pro Display", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        font-size: clamp(92px, 18vw, 230px);
        font-weight: 700;
        line-height: 0.84;
        letter-spacing: -0.022em;
        text-align: center;
        pointer-events: none;
        user-select: none;
      }

      .hero-product-image {
        position: relative;
        z-index: 1;
        width: 100%;
        height: 100%;
        max-height: none;
        display: block;
        object-fit: cover;
        transform: none;
      }

      .studio-visual {
        position: absolute;
        z-index: 1;
        left: 50%;
        bottom: clamp(28px, 5vw, 58px);
        width: min(850px, 92%);
        aspect-ratio: 16 / 9;
        transform: translateX(-50%);
        border-radius: 32px;
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0)),
          linear-gradient(135deg, #242426 0%, #0f1012 48%, #22242a 100%);
        border: 12px solid #1d1d1f;
      }

      .studio-visual::before {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -34px;
        width: 112%;
        height: 32px;
        border-radius: 0 0 34px 34px;
        transform: translateX(-50%);
        background: linear-gradient(90deg, #d9d9dd, #ffffff 48%, #cfcfd4);
      }

      .studio-visual::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -43px;
        width: 18%;
        height: 7px;
        border-radius: 0 0 10px 10px;
        transform: translateX(-50%);
        background: #b9b9be;
      }

      .screen-grid {
        position: absolute;
        inset: 22px;
        display: grid;
        grid-template-columns: 1.12fr 0.88fr;
        gap: 16px;
      }

      .screen-panel {
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.1);
        overflow: hidden;
      }

      .record-panel {
        display: grid;
        place-items: center;
        background:
          radial-gradient(circle at 48% 42%, rgba(255, 255, 255, 0.34), transparent 22%),
          linear-gradient(155deg, #101114 0%, #303138 52%, #efefef 100%);
      }

      .record-disc {
        width: min(230px, 60%);
        aspect-ratio: 1;
        border-radius: 50%;
        background:
          radial-gradient(circle, #f6f6f7 0 10%, #1d1d1f 11% 20%, transparent 21%),
          conic-gradient(from 24deg, #f5f5f7, #98989d, #1d1d1f, #f5f5f7, #3a3a3c, #f5f5f7);
      }

      .brand-type {
        font-family: "SF Pro Display", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        font-weight: 700;
        letter-spacing: -0.018em;
      }

      .content-panel {
        padding: 22px;
        display: grid;
        align-content: end;
        gap: 12px;
        background: #f5f5f7;
      }

      .content-line {
        height: 12px;
        border-radius: 999px;
        background: #c7c7cc;
      }

      .content-line:first-child {
        width: 52%;
        height: 26px;
        background: #1d1d1f;
      }

      .content-line:nth-child(2) {
        width: 86%;
      }

      .content-line:nth-child(3) {
        width: 68%;
      }

      .section-title {
        max-width: 900px;
        margin-bottom: clamp(28px, 5vw, 52px);
      }

      .section-title h2 {
        margin-bottom: 12px;
        font-family: "SF Pro Display", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        font-size: var(--heading);
        font-weight: 700;
        line-height: 1.05;
        letter-spacing: -0.019em;
      }

      .section-title p {
        max-width: 620px;
        margin-bottom: 0;
        color: var(--slate);
        font-family: Georgia, "Times New Roman", serif;
        font-size: var(--subheading);
        font-weight: 400;
        line-height: 1.36;
        letter-spacing: 0;
      }

      .apps-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
      }

      .card {
        border-radius: var(--radius-card);
        background: var(--snow);
        overflow: hidden;
      }

      .app-tile {
        position: relative;
        min-height: 280px;
        aspect-ratio: 1;
        padding: 28px;
        display: grid;
      }

      .app-tile .app-copy {
        display: flex;
        flex-direction: column;
        height: 100%;
      }

      .app-tile .app-copy .tile-actions {
        margin-top: auto;
      }

      .app-card {
        min-height: 680px;
        padding: clamp(28px, 5vw, 52px);
        display: grid;
        grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1.25fr);
        gap: 36px;
        align-items: center;
      }

      .app-logo-wrap {
        width: 92px;
        height: 92px;
        margin-bottom: 16px;
        border-radius: 24px;
        display: grid;
        place-items: center;
        background: var(--fog);
      }

      .app-logo {
        width: 72px;
        height: 72px;
        border-radius: 20px;
        display: grid;
        place-items: center;
        background: var(--snow);
        color: var(--snow);
        font-family: "SF Pro Display", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        font-size: 32px;
        font-weight: 700;
        letter-spacing: -0.018em;
      }

      .app-logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        border-radius: inherit;
      }

      .status-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        margin-top: 28px;
      }

      .soft-pill {
        min-height: 34px;
        padding: 7px 13px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        background: rgba(210, 210, 215, 0.64);
        color: rgba(0, 0, 0, 0.58);
        font-size: 14px;
        line-height: 1.2;
        letter-spacing: -0.003em;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
      }

      .app-copy h3 {
        margin-bottom: 12px;
        font-family: "SF Pro Display", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        font-size: clamp(40px, 5vw, 64px);
        font-weight: 700;
        line-height: 1.04;
        letter-spacing: -0.019em;
      }

      .app-copy p {
        margin-bottom: 24px;
        color: var(--slate);
        font-size: 20px;
        line-height: 1.4;
        letter-spacing: -0.01em;
      }

      .app-tile .app-copy h3 {
        font-size: clamp(28px, 3vw, 40px);
      }

      .app-tile .app-copy p {
        font-size: 17px;
        line-height: 1.38;
      }

      .ghost-link {
        display: inline-flex;
        color: var(--cobalt);
        font-size: 17px;
        font-weight: 400;
      }

      .record-gallery {
        min-width: 0;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.88fr);
        gap: 16px;
        align-items: stretch;
      }

      .record-promo {
        min-height: clamp(460px, 45vw, 620px);
        border-radius: 28px;
        background: var(--fog);
        overflow: hidden;
      }

      .record-promo img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        object-position: center top;
      }

      .record-promo.is-watch {
        margin-top: clamp(34px, 6vw, 74px);
        min-height: clamp(390px, 39vw, 540px);
      }

      .record-preview-tile {
        padding: 0;
        background: var(--fog);
      }

      .record-preview-tile img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        object-position: center top;
      }

      .phone {
        position: relative;
        width: min(330px, 100%);
        aspect-ratio: 0.49;
        justify-self: center;
        border: 12px solid #1d1d1f;
        border-radius: 46px;
        background: #f5f5f7;
        overflow: hidden;
      }

      .phone::before {
        content: "";
        position: absolute;
        z-index: 3;
        top: 10px;
        left: 50%;
        width: 34%;
        height: 24px;
        border-radius: 999px;
        transform: translateX(-50%);
        background: #1d1d1f;
      }

      .phone-screen {
        position: absolute;
        inset: 0;
        padding: 56px 22px 22px;
        display: grid;
        align-content: space-between;
        background:
          radial-gradient(circle at 50% 26%, rgba(29, 29, 31, 0.12), transparent 26%),
          linear-gradient(180deg, #ffffff 0%, #f5f5f7 100%);
      }

      .phone-title {
        font-family: "SF Pro Display", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        font-size: 38px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: -0.019em;
      }

      .waveform {
        display: flex;
        align-items: end;
        justify-content: center;
        gap: 7px;
        height: 168px;
      }

      .bar {
        width: 11px;
        border-radius: 999px;
        background: var(--ink);
        animation: wave 1.8s ease-in-out infinite;
      }

      .bar:nth-child(1) { height: 34%; animation-delay: -0.2s; }
      .bar:nth-child(2) { height: 62%; animation-delay: -0.5s; }
      .bar:nth-child(3) { height: 46%; animation-delay: -0.8s; }
      .bar:nth-child(4) { height: 78%; animation-delay: -0.1s; }
      .bar:nth-child(5) { height: 52%; animation-delay: -0.7s; }
      .bar:nth-child(6) { height: 88%; animation-delay: -0.4s; }
      .bar:nth-child(7) { height: 38%; animation-delay: -0.9s; }

      .mini-control {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        min-height: 68px;
        padding: 14px 16px;
        border-radius: 24px;
        background: rgba(210, 210, 215, 0.64);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
      }

      .control-dot {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: #ff3b30;
      }

      .control-text {
        flex: 1;
        color: var(--ash);
        font-size: 14px;
        line-height: 1.3;
        letter-spacing: -0.003em;
      }

      .secret-card {
        position: relative;
        min-height: 280px;
        padding: 28px;
        display: grid;
        align-content: start;
        gap: 16px;
        isolation: isolate;
        background: #000000;
        color: var(--snow);
      }

      .secret-card h3 {
        margin-bottom: 10px;
        font-family: "SF Pro Display", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        font-size: clamp(32px, 4vw, 48px);
        line-height: 1.05;
        letter-spacing: -0.016em;
      }

      .secret-card p {
        color: rgba(255, 255, 255, 0.72);
        font-size: 18px;
        line-height: 1.42;
      }

      .secret-preview {
        position: absolute;
        inset: 28px;
        display: grid;
        grid-template-columns: 1fr 0.85fr;
        gap: 12px;
        opacity: 0.74;
        filter: blur(14px);
        transform: scale(1.03);
        pointer-events: none;
      }

      .secret-window,
      .secret-stack span {
        border-radius: 24px;
        background: rgba(255, 255, 255, 0.12);
      }

      .secret-window {
        min-height: 100%;
        background:
          radial-gradient(circle at 45% 35%, rgba(255, 255, 255, 0.35), transparent 20%),
          linear-gradient(145deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.06));
      }

      .secret-stack {
        display: grid;
        grid-template-rows: repeat(3, 1fr);
        gap: 12px;
      }

      .secret-stack span {
        min-height: 86px;
      }

      .secret-stack span:nth-child(2) {
        opacity: 0.76;
      }

      .secret-stack span:nth-child(3) {
        opacity: 0.48;
      }

      .secret-content {
        position: relative;
        z-index: 1;
        min-height: 100%;
        display: grid;
        align-content: start;
        gap: 20px;
      }

      .secret-lock {
        width: 52px;
        height: 52px;
        border-radius: 18px;
        display: grid;
        place-items: center;
        background: rgba(255, 255, 255, 0.16);
        color: var(--snow);
        font-size: 24px;
        line-height: 1;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
      }

      .launch-date {
        color: var(--snow);
        font-size: clamp(30px, 4vw, 48px);
        line-height: 1.02;
        letter-spacing: -0.019em;
      }

      .socials {
        background: var(--snow);
      }

      .social-language-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
      }

      .language-card {
        position: relative;
        min-height: auto;
        padding: 28px;
        display: grid;
        grid-template-rows: auto 1fr;
        gap: 26px;
        background: var(--fog);
        border-radius: var(--radius-card);
      }

      .language-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 18px;
      }

      .language-card h3 {
        margin-bottom: 8px;
        font-family: "SF Pro Display", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        font-size: clamp(32px, 4vw, 48px);
        font-weight: 700;
        line-height: 1.08;
        letter-spacing: -0.015em;
      }

      .language-card p {
        margin: 0;
        color: var(--graphite);
        font-size: 14px;
        line-height: 1.43;
        letter-spacing: -0.003em;
      }

      .language-code {
        min-width: 54px;
        min-height: 34px;
        padding: 7px 12px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--snow);
        color: var(--ash);
        font-size: 12px;
        font-weight: 600;
        letter-spacing: -0.003em;
      }

      .social-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-content: start;
        gap: 10px;
      }

      .social-list--english {
        justify-content: flex-start;
      }

      .social-link {
        flex: 0 1 calc((100% - 50px) / 6);
        min-width: 0;
        min-height: 118px;
        aspect-ratio: 1;
        padding: 14px;
        border-radius: 18px;
        display: grid;
        align-content: space-between;
        align-items: start;
        justify-content: space-between;
        gap: 12px;
        background: var(--snow);
        transition: background 180ms ease, transform 180ms ease;
      }

      :where(.social-list--seven) .social-link {
        flex-basis: calc((100% - 60px) / 7);
      }

      .social-link:hover {
        transform: translateY(-1px);
        background: #fbfbfd;
      }

      .social-link.is-pending {
        cursor: default;
      }

      .social-icon {
        font-size: 22px;
        color: var(--ink);
      }

      .social-name {
        color: var(--ink);
        font-size: 17px;
        line-height: 1.24;
        letter-spacing: -0.006em;
      }

      .social-handle {
        color: var(--graphite);
        font-size: 12px;
        line-height: 1.33;
        letter-spacing: -0.003em;
      }

      /* ===== Socials — light airy glass =====
         Two blob layers drift continuously behind the panel; the cards are
         mostly transparent with a heavy backdrop blur, so the moving colour
         underneath is what reads as glass. */

      .socials {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        margin: 0 16px;
        border-radius: clamp(28px, 4vw, 44px);
        background: linear-gradient(180deg, #f8fbfc 0%, #edf4f7 100%);
      }

      .socials::before,
      .socials::after {
        content: "";
        position: absolute;
        inset: -35%;
        z-index: -1;
        pointer-events: none;
        filter: blur(80px);
      }

      .socials::before {
        background:
          radial-gradient(38% 42% at 20% 24%, rgba(64, 152, 214, 0.069), transparent 64%),
          radial-gradient(34% 40% at 82% 18%, rgba(122, 180, 232, 0.064), transparent 66%),
          radial-gradient(44% 48% at 58% 84%, rgba(86, 155, 210, 0.067), transparent 68%);
        animation: socials-drift-a 22s ease-in-out infinite alternate;
      }

      .socials::after {
        background:
          radial-gradient(32% 36% at 14% 76%, rgba(150, 206, 240, 0.067), transparent 66%),
          radial-gradient(34% 40% at 90% 62%, rgba(96, 176, 222, 0.061), transparent 68%),
          radial-gradient(28% 32% at 48% 12%, rgba(186, 226, 246, 0.056), transparent 66%);
        animation: socials-drift-b 29s ease-in-out infinite alternate;
      }

      @keyframes socials-drift-a {
        0% {
          transform: translate3d(-8%, -5%, 0) scale(1.05) rotate(0deg);
        }
        35% {
          transform: translate3d(6%, 4%, 0) scale(1.22) rotate(9deg);
        }
        70% {
          transform: translate3d(9%, -6%, 0) scale(1.1) rotate(-7deg);
        }
        100% {
          transform: translate3d(-5%, 8%, 0) scale(1.18) rotate(5deg);
        }
      }

      @keyframes socials-drift-b {
        0% {
          transform: translate3d(7%, 6%, 0) scale(1.14) rotate(-6deg);
        }
        40% {
          transform: translate3d(-9%, -4%, 0) scale(1.02) rotate(8deg);
        }
        75% {
          transform: translate3d(4%, 9%, 0) scale(1.2) rotate(-3deg);
        }
        100% {
          transform: translate3d(-6%, -7%, 0) scale(1.08) rotate(6deg);
        }
      }

      .socials .section-title h2 {
        color: var(--ink);
      }

      .socials .section-title p {
        color: var(--slate);
      }

      .socials .language-card {
        background: linear-gradient(165deg, #ffffff 0%, #fbfdfe 100%);
        border: 1px solid rgba(255, 255, 255, 0.9);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 1),
          0 24px 60px rgba(26, 62, 88, 0.1);
      }

      .socials .language-card h3 {
        color: var(--ink);
      }

      .socials .language-card p {
        color: var(--graphite);
      }

      .socials .language-code {
        background: #f3f7f7;
        border: 1px solid rgba(26, 62, 88, 0.1);
        color: var(--slate);
      }

      .socials .social-link {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        background: linear-gradient(158deg, rgba(244, 249, 253, 0.94) 0%, rgba(219, 233, 244, 0.9) 100%);
        border: 1px solid rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(8px) saturate(135%);
        -webkit-backdrop-filter: blur(8px) saturate(135%);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 1),
          inset 1px 0 0 rgba(255, 255, 255, 0.65),
          inset 0 -1px 0 rgba(104, 138, 168, 0.22),
          0 8px 18px rgba(38, 78, 112, 0.1);
        will-change: transform;
        transition:
          transform 340ms cubic-bezier(0.22, 1.25, 0.36, 1),
          background 300ms ease,
          border-color 300ms ease,
          box-shadow 340ms ease;
      }

      /* diagonal gloss */
      .socials .social-link::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background-image: linear-gradient(
          140deg,
          rgba(255, 255, 255, 0.4) 0%,
          rgba(255, 255, 255, 0.16) 14%,
          rgba(255, 255, 255, 0.02) 26%,
          rgba(255, 255, 255, 0) 34%
        );
        background-size: 180% 180%;
        background-position: 0% 0%;
        transition: background-position 520ms ease, opacity 460ms ease;
      }

      /* light bounced off the bottom edge */
      .socials .social-link::after {
        content: "";
        position: absolute;
        inset: auto 0 0 0;
        height: 52%;
        z-index: -1;
        pointer-events: none;
        background: linear-gradient(
          to top,
          rgba(255, 255, 255, 0.5) 0%,
          rgba(255, 255, 255, 0.14) 30%,
          rgba(255, 255, 255, 0) 64%
        );
        transition: opacity 340ms ease;
      }

      .socials .social-link:hover {
        transform: translateY(-12px);
        /* the tile switches on like a lamp */
        background: linear-gradient(158deg, rgba(120, 214, 252, 0.96) 0%, rgba(38, 152, 224, 0.97) 100%);
        border-color: rgba(255, 255, 255, 0.72);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.85),
          inset 0 -1px 0 rgba(12, 68, 110, 0.35),
          0 18px 34px rgba(8, 44, 74, 0.3),
          0 0 26px rgba(104, 202, 255, 0.7),
          0 0 62px rgba(104, 202, 255, 0.42);
      }

      .socials .social-link:hover::before {
        background-position: 42% 42%;
        opacity: 0.9;
      }

      .socials .social-link:hover::after {
        opacity: 0.7;
      }

      .socials .social-link:focus-visible {
        outline: 2px solid rgba(29, 29, 31, 0.55);
        outline-offset: 3px;
      }

      .socials .social-icon,
      .socials .social-name {
        color: var(--ink);
      }

      .socials .social-handle {
        color: var(--graphite);
      }

      .socials .social-link:hover .social-icon,
      .socials .social-link:hover .social-name {
        color: #ffffff;
      }

      .socials .social-link:hover .social-handle {
        color: rgba(255, 255, 255, 0.92);
      }

      @media (prefers-reduced-motion: reduce) {
        .socials::before,
        .socials::after {
          animation: none;
        }
      }

      .ai-card {
        display: grid;
        grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1fr);
        gap: clamp(24px, 5vw, 56px);
        align-items: center;
        padding: clamp(28px, 5vw, 56px);
        border-radius: var(--radius-card);
        background: var(--snow);
      }

      .ai-visual {
        border-radius: 26px;
        background: var(--fog);
        padding: 18px;
      }

      .ai-visual img {
        width: 100%;
        display: block;
        border-radius: 20px;
      }

      .ai-copy h2 {
        margin-bottom: 12px;
        font-family: "SF Pro Display", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        font-size: clamp(34px, 5vw, 64px);
        font-weight: 700;
        line-height: 1.05;
        letter-spacing: -0.019em;
      }

      .ai-copy p {
        max-width: 620px;
        margin-bottom: 0;
        color: var(--slate);
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(19px, 2.5vw, 26px);
        font-weight: 400;
        line-height: 1.34;
        letter-spacing: 0;
      }

      .footer {
        padding: 32px 0 44px;
        color: var(--graphite);
        font-size: 12px;
        line-height: 1.33;
        letter-spacing: -0.003em;
      }

      .footer-inner {
        width: min(var(--max), calc(100% - 32px));
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        gap: 16px;
        border-top: 1px solid var(--silver-mist);
        padding-top: 18px;
      }

      .reveal {
        opacity: 0;
        transform: translateY(32px);
        transition: opacity 700ms ease, transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
      }

      .reveal.is-visible {
        opacity: 1;
        transform: translateY(0);
      }

      @keyframes wave {
        0%, 100% {
          transform: scaleY(0.76);
        }
        50% {
          transform: scaleY(1.08);
        }
      }

      @media (max-width: 900px) {
        .apps-grid,
        .app-card,
        .social-language-grid,
        .ai-card {
          grid-template-columns: 1fr;
        }

        .app-card,
        .secret-card {
          min-height: auto;
        }

        .app-copy {
          text-align: center;
        }

        .app-logo-wrap {
          margin-right: auto;
          margin-left: auto;
        }

        .status-row {
          justify-content: center;
        }

        .language-card {
          min-height: auto;
        }

        .social-link {
          flex-basis: calc((100% - 30px) / 4);
        }
      }

      @media (max-width: 640px) {
        .site-nav {
          height: 52px;
        }

        .hero-art {
          padding-top: 52px;
        }

        .hero-art-btn--learn {
          left: 31%;
          top: 76%;
          width: 19.5%;
          height: 17%;
        }

        .hero-art-btn--support {
          left: 50.5%;
          top: 76%;
          width: 19.5%;
          height: 17%;
        }

        /* hide the wordmark on small screens, keep the logo itself */
        .brand span:not(.brand-mark) {
          display: none;
        }

        .nav-links {
          gap: 12px;
          /* pages with five links scroll instead of crushing the logo */
          overflow-x: auto;
          scrollbar-width: none;
          -ms-overflow-style: none;
        }

        .nav-links::-webkit-scrollbar {
          display: none;
        }

        .download {
          min-height: 34px;
          padding: 7px 14px;
          font-size: 14px;
        }

        .section.hero {
          min-height: auto;
          padding-top: 92px;
        }

        .hero-stage {
          aspect-ratio: 3 / 2;
        }

        .app-card {
          padding: 28px;
        }

        .social-link {
          flex-basis: calc((100% - 10px) / 2);
        }

        .record-gallery {
          grid-template-columns: 1fr;
        }

        .record-promo,
        .record-promo.is-watch {
          min-height: 420px;
          margin-top: 0;
        }

        .phone {
          width: min(280px, 100%);
        }

        .secret-preview {
          inset: 18px;
          grid-template-columns: 1fr;
        }

        .secret-content {
          gap: 88px;
        }

        .footer-inner {
          flex-direction: column;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
          animation-duration: 1ms !important;
          scroll-behavior: auto !important;
          transition-duration: 1ms !important;
        }

        .reveal {
          opacity: 1;
          transform: none;
        }
      }

      /* ===== App detail pages ===== */
      .app-hero {
        padding-top: clamp(96px, 12vw, 140px);
        padding-bottom: clamp(32px, 5vw, 56px);
        text-align: center;
      }

      .app-hero .container {
        display: grid;
        justify-items: center;
        gap: 22px;
      }

      .app-hero-icon {
        width: 108px;
        height: 108px;
        border-radius: 26px;
        display: grid;
        place-items: center;
        background: var(--snow);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
        overflow: hidden;
      }

      .app-hero-icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        border-radius: inherit;
      }

      .app-hero h1 {
        font-size: clamp(44px, 8vw, 88px);
        margin: 0;
      }

      .app-shot {
        aspect-ratio: 3 / 2;
        border-radius: var(--radius-card);
        overflow: hidden;
        background: var(--snow);
      }

      .app-shot img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: contain;
      }

      .record-showcase-section {
        padding-top: 0 !important;
      }

      .record-gallery-intro {
        padding: clamp(58px, 9vw, 116px) clamp(2px, 2vw, 22px) clamp(46px, 7vw, 82px);
        border-top: 1px solid var(--line);
        text-align: left;
      }

      .record-gallery-meta {
        display: flex;
        justify-content: space-between;
        gap: 24px;
        margin-bottom: clamp(32px, 5vw, 64px);
        color: var(--graphite);
        font-size: 11px;
        font-weight: 600;
        line-height: 1.2;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .record-gallery-intro h2 {
        max-width: 1100px;
        margin: 0;
        color: var(--ink);
        font-family: "SF Pro Display", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        font-size: clamp(52px, 9vw, 112px);
        font-weight: 670;
        line-height: 0.9;
        letter-spacing: -0.055em;
      }

      .record-gallery-intro h2 span {
        color: var(--graphite);
        font-weight: 420;
      }

      .record-gallery-intro > p {
        max-width: 520px;
        margin: clamp(28px, 4vw, 48px) 0 0 auto;
        color: var(--slate);
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(17px, 2vw, 21px);
        line-height: 1.5;
      }

      /* Gallery cards are scaled so the image top and the caption bottom
         fit the viewport together — one frame per screen. */
      .page-record {
        --shot-space: calc(100vh - 96px);
        --gallery-gap: clamp(16px, 2.5vw, 36px);
        --gallery-inset: clamp(20px, 4vw, 56px);
      }

      @supports (height: 100svh) {
        .page-record {
          --shot-space: calc(100svh - 96px);
        }
      }

      /* Every block down the page is separated by the same gap as the
         gallery photos. */
      .page-record main {
        display: flex;
        flex-direction: column;
        gap: var(--gallery-gap);
      }

      .page-record .section,
      .page-record .section:not(.app-hero) {
        padding-top: 0;
        padding-bottom: 0;
      }

      .page-record .app-hero {
        padding-top: clamp(96px, 12vw, 140px);
      }

      .page-record .feature-grid {
        gap: var(--gallery-gap);
      }

      .page-record .record-showcase-section,
      .page-record #privacy .container {
        display: flex;
        flex-direction: column;
        gap: var(--gallery-gap);
      }

      .page-record .record-gallery-intro {
        padding-block: 0;
        border-top: none;
      }

      .page-record .footer {
        padding-top: var(--gallery-gap);
      }

      .record-showcase {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--gallery-gap);
        padding: 0 var(--gallery-inset);
      }

      .record-showcase-pair {
        /* sum of both cards' aspect ratios — lets a mixed pair share one
           image height instead of splitting the row in equal halves */
        --ar-sum: 2;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
        gap: var(--gallery-gap);
      }

      .record-showcase-shot {
        --ar: 1.5;
        --caption-h: 160px;
        container-type: inline-size;
        width: 100%;
        max-width: calc((var(--shot-space) - var(--caption-h)) * var(--ar));
        margin: 0 auto;
        min-width: 0;
        overflow: hidden;
        border-radius: clamp(18px, 2.4vw, 30px);
        background: var(--snow);
        box-shadow: 0 18px 42px rgba(29, 29, 31, 0.07);
      }

      .record-showcase-pair .record-showcase-shot {
        /* auto margins would absorb the flex free space and split the pair */
        margin: 0;
        max-width: min(
          calc((var(--shot-space) - var(--caption-h)) * var(--ar)),
          calc((100% - var(--gallery-gap)) * var(--ar) / var(--ar-sum))
        );
      }

      .page-record #preview .container {
        width: calc(100% - 2 * var(--gallery-inset));
        max-width: none;
      }

      .page-record .app-shot {
        max-width: calc(var(--shot-space) * 1.5);
        margin: 0 auto;
      }

      .record-showcase-shot img {
        display: block;
        width: 100%;
        height: auto;
      }

      .record-showcase-caption {
        display: grid;
        grid-template-columns: minmax(72px, 0.22fr) minmax(0, 1fr);
        gap: clamp(18px, 3.4cqi, 48px);
        padding: clamp(16px, 2.1cqi, 26px);
        border-top: 1px solid var(--line);
        background: var(--snow);
        text-align: left;
      }

      /* Narrow cards get a stacked, tighter caption so the frame still
         fits one screen. */
      @container (max-width: 560px) {
        .record-showcase-caption {
          grid-template-columns: minmax(0, 1fr);
          gap: 10px;
        }

        .record-caption-index {
          padding-top: 0;
        }

        .record-caption-kicker {
          margin-bottom: 6px;
        }
      }

      .record-caption-index {
        padding-top: 7px;
        color: var(--graphite);
        font-size: 11px;
        font-weight: 600;
        line-height: 1;
        letter-spacing: 0.08em;
      }

      .record-caption-copy {
        max-width: 680px;
      }

      .record-caption-kicker {
        display: block;
        margin-bottom: 10px;
        color: var(--cobalt);
        font-size: 12px;
        font-weight: 600;
        line-height: 1.2;
        letter-spacing: 0.07em;
        text-transform: uppercase;
      }

      .record-caption-copy h3 {
        margin: 0 0 7px;
        color: var(--ink);
        font-family: "SF Pro Display", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        font-size: clamp(19px, 2.5cqi, 27px);
        font-weight: 650;
        line-height: 1.06;
        letter-spacing: -0.035em;
      }

      .record-caption-copy p {
        max-width: 620px;
        margin: 0;
        color: var(--slate);
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(14px, 1.4cqi, 16px);
        line-height: 1.42;
      }

      @media (max-width: 640px) {
        .record-gallery-intro {
          padding: 48px 2px 38px;
        }

        .record-gallery-meta {
          margin-bottom: 30px;
        }

        .record-gallery-meta span:last-child {
          max-width: 150px;
          text-align: right;
        }

        .record-gallery-intro h2 {
          font-size: clamp(46px, 14.5vw, 64px);
        }

        .record-gallery-intro > p {
          margin-top: 24px;
        }

        .record-showcase-caption {
          grid-template-columns: 1fr;
          gap: 16px;
          padding: 24px 20px 28px;
        }

        .record-showcase-pair .record-showcase-shot {
          max-width: calc((var(--shot-space) - var(--caption-h)) * var(--ar));
        }

        .record-caption-index {
          padding-top: 0;
        }

        .record-caption-copy h3 {
          font-size: 30px;
        }
      }

      .app-hero-sub {
        max-width: 640px;
        margin: 0;
        color: var(--slate);
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(19px, 2.6vw, 26px);
        line-height: 1.36;
      }

      .pill-row {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        margin-top: 4px;
      }

      .breadcrumb {
        width: min(var(--max), calc(100% - 32px));
        margin: 0 auto;
        padding-top: 12px;
        font-size: 14px;
        color: var(--cobalt);
      }

      .feature-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
      }

      .feature {
        padding: 28px;
        border-radius: var(--radius-card);
        background: var(--snow);
        display: grid;
        gap: 10px;
        align-content: start;
      }

      .feature .fi {
        font-size: 26px;
        color: var(--azure);
      }

      .feature h3 {
        margin: 0;
        font-family: "SF Pro Display", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        font-size: 22px;
        font-weight: 700;
        letter-spacing: -0.014em;
      }

      .feature p {
        margin: 0;
        color: var(--slate);
        font-size: 16px;
        line-height: 1.42;
      }

      .support-card,
      .legal-card {
        padding: clamp(28px, 5vw, 56px);
        border-radius: var(--radius-card);
        background: var(--snow);
      }

      .support-grid {
        display: grid;
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        gap: clamp(28px, 5vw, 56px);
        align-items: start;
      }

      .support-intro h2 {
        margin: 0 0 12px;
        font-family: "SF Pro Display", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        font-size: clamp(32px, 4.4vw, 54px);
        font-weight: 700;
        line-height: 1.05;
        letter-spacing: -0.019em;
      }

      .support-intro p {
        margin: 0 0 18px;
        color: var(--slate);
        font-size: 18px;
        line-height: 1.44;
      }

      .support-meta {
        display: grid;
        gap: 10px;
        margin-top: 8px;
      }

      .support-meta a {
        color: var(--cobalt);
      }

      .contact-form {
        display: grid;
        gap: 14px;
      }

      .field {
        display: grid;
        gap: 6px;
      }

      .field label {
        font-size: 14px;
        font-weight: 600;
        color: var(--ash);
      }

      .field input,
      .field textarea {
        width: 100%;
        padding: 13px 15px;
        border-radius: 14px;
        border: 1px solid var(--silver-mist);
        background: var(--fog);
        color: var(--ink);
        font-family: inherit;
        font-size: 16px;
        transition: border-color 160ms ease, background 160ms ease;
      }

      .field input:focus,
      .field textarea:focus {
        outline: none;
        border-color: var(--azure);
        background: var(--snow);
      }

      .field textarea {
        min-height: 130px;
        resize: vertical;
      }

      .form-submit {
        justify-self: start;
        min-height: 44px;
        padding: 11px 26px;
        border: none;
        border-radius: 999px;
        background: var(--azure);
        color: var(--snow);
        font-family: inherit;
        font-size: 16px;
        cursor: pointer;
        transition: transform 160ms ease, filter 160ms ease;
      }

      .form-submit:hover {
        transform: translateY(-1px);
        filter: brightness(0.96);
      }

      .form-note {
        margin: 2px 0 0;
        font-size: 13px;
        color: var(--graphite);
      }

      .legal-card h2 {
        font-family: "SF Pro Display", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        font-size: clamp(30px, 4vw, 48px);
        font-weight: 700;
        letter-spacing: -0.019em;
        margin: 0 0 6px;
      }

      .legal-card .updated {
        color: var(--graphite);
        font-size: 14px;
        margin: 0 0 24px;
      }

      .legal-card h3 {
        font-family: "SF Pro Display", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        font-size: 21px;
        font-weight: 700;
        letter-spacing: -0.012em;
        margin: 26px 0 8px;
      }

      .legal-card p,
      .legal-card li {
        color: var(--slate);
        font-size: 16px;
        line-height: 1.5;
      }

      .legal-card ul {
        padding-left: 20px;
        margin: 8px 0;
      }

      .app-tile-link {
        color: inherit;
      }

      .tile-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 18px;
        margin-top: 20px;
      }

      .tile-more {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--cobalt);
        font-size: 16px;
      }

      .app-tile--dark {
        background: #000000;
        color: var(--snow);
      }

      .app-tile--dark .app-logo-wrap {
        background: rgba(255, 255, 255, 0.08);
      }

      .app-tile--dark .eyebrow {
        color: rgba(255, 255, 255, 0.56);
      }

      .app-tile--dark h3,
      .app-tile--dark h3 a {
        color: var(--snow);
      }

      .app-tile--dark .app-copy p {
        color: rgba(255, 255, 255, 0.7);
      }

      .app-tile--dark .tile-more {
        color: #ffffff;
      }

      @property --os-angle {
        syntax: "<angle>";
        initial-value: 0deg;
        inherits: false;
      }

      .os-promo {
        position: relative;
        max-width: 880px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: clamp(18px, 3vw, 28px);
        padding: clamp(24px, 3vw, 32px) clamp(26px, 4vw, 38px);
        border-radius: var(--radius-card);
        background:
          radial-gradient(circle at 6% 0%, rgba(0, 113, 227, 0.07), transparent 48%),
          linear-gradient(135deg, #ffffff 0%, #f3f7ff 100%);
        color: var(--ink);
        transition: transform 200ms ease, box-shadow 200ms ease;
      }

      /* Animated Apple-Intelligence-style rainbow edge */
      .os-promo::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 1.6px;
        background: conic-gradient(
          from var(--os-angle),
          #ff5f6d, #ffc371, #47e0a0, #4d96ff, #b06ab3, #ff5f6d
        );
        -webkit-mask:
          linear-gradient(#000 0 0) content-box,
          linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        opacity: 0.9;
        pointer-events: none;
        animation: osSpin 6s linear infinite;
      }

      .os-promo::after {
        content: "";
        position: absolute;
        inset: -1px;
        z-index: -1;
        border-radius: inherit;
        background: conic-gradient(
          from var(--os-angle),
          #ff5f6d, #ffc371, #47e0a0, #4d96ff, #b06ab3, #ff5f6d
        );
        filter: blur(13px);
        opacity: 0.22;
        pointer-events: none;
        animation: osSpin 6s linear infinite;
      }

      @keyframes osSpin {
        to { --os-angle: 360deg; }
      }

      .os-promo:hover {
        transform: translateY(-2px);
        box-shadow: 0 16px 44px rgba(0, 113, 227, 0.1);
      }

      @media (prefers-reduced-motion: reduce) {
        .os-promo::before,
        .os-promo::after {
          animation: none;
        }
      }

      .os-promo-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 14px;
      }

      .os-promo-tags span {
        padding: 5px 11px;
        border-radius: 999px;
        background: rgba(0, 113, 227, 0.08);
        color: var(--cobalt);
        font-size: 12px;
        font-weight: 500;
      }

      .os-promo-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 10px 20px;
        border-radius: 999px;
        background: var(--azure);
        color: var(--snow);
        font-size: 15px;
        white-space: nowrap;
        transition: filter 180ms ease;
      }

      .os-promo:hover .os-promo-btn {
        filter: brightness(0.96);
      }

      .os-promo-icon {
        width: 72px;
        height: 72px;
        border-radius: 20px;
        overflow: hidden;
        flex: none;
      }

      .os-promo-icon img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .os-promo-copy .eyebrow {
        color: #ef7d2d;
        font-size: 13px;
        margin-bottom: 4px;
      }

      .os-promo-copy h3 {
        margin: 0 0 6px;
        font-family: "SF Pro Display", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        font-size: clamp(26px, 3vw, 36px);
        font-weight: 700;
        letter-spacing: -0.016em;
        color: var(--ink);
      }

      .os-promo-copy p {
        margin: 0;
        color: var(--slate);
        font-size: 16px;
        line-height: 1.42;
        max-width: 560px;
      }

      .os-promo-cta {
        color: var(--cobalt);
        white-space: nowrap;
      }

      @media (max-width: 640px) {
        .os-promo {
          grid-template-columns: 1fr;
          justify-items: start;
          gap: 16px;
        }
      }

      @media (max-width: 900px) {
        .feature-grid,
        .support-grid {
          grid-template-columns: 1fr;
        }
      }

      /* ===== Tritter hero animation & beta button ===== */
      .download.is-beta {
        background: rgba(0, 113, 227, 0.42);
        color: rgba(255, 255, 255, 0.92);
        pointer-events: none;
        cursor: default;
        min-height: 36px;
        padding: 7px 20px;
        font-size: 15px;
        line-height: 1.15;
        text-align: center;
      }

      .feed-line {
        height: 24px;
        margin: 0 0 4px;
        font-family: "SF Pro Display", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        font-size: 17px;
        font-weight: 600;
        letter-spacing: -0.01em;
        color: var(--graphite);
      }

      .app-hero .feed-line {
        height: 20px;
        margin: -12px 0 -14px;
      }

      .app-subname {
        margin: -14px 0 -6px;
        font-family: "SF Pro Display", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        font-size: clamp(14px, 1.5vw, 17px);
        font-weight: 600;
        letter-spacing: -0.008em;
        color: var(--graphite);
      }

      .feed-word {
        display: inline-block;
        animation: feedSwap 0.45s ease;
      }

      @keyframes feedSwap {
        0% { opacity: 0; transform: translateY(6px); }
        100% { opacity: 1; transform: translateY(0); }
      }

      /* "Tether ri tron trove er" collapses into "Tritter" */
      .assemble .ch {
        display: inline-block;
        max-width: 1.2em;
        overflow: hidden;
        vertical-align: bottom;
        transition:
          max-width 560ms cubic-bezier(0.2, 0.8, 0.2, 1),
          opacity 320ms ease,
          transform 360ms ease;
      }

      .assemble .ch.space {
        max-width: 0.34em;
      }

      .assemble.collapsed .ch.drop {
        max-width: 0;
        opacity: 0;
        transform: translateY(-8px) scale(0.4);
      }

      @media (prefers-reduced-motion: reduce) {
        .assemble .ch {
          transition: none;
        }
        .assemble.collapsed .ch.drop {
          max-width: 0;
          opacity: 0;
        }
      }

      /* Mobile app-detail pages */
      @media (max-width: 640px) {
        .page-record main {
          padding-top: 52px;
        }

        .page-record .nav-inner {
          width: calc(100% - 24px);
          gap: 10px;
        }

        .page-record .nav-links {
          flex: 1;
          justify-content: flex-end;
          gap: 8px;
        }

        .page-record .nav-links a:nth-child(-n + 2) {
          display: none;
        }

        .page-record .nav-links a:not(.download) {
          font-size: 12px;
        }

        .page-record .nav-links .download {
          min-height: 32px;
          padding: 6px 10px;
          font-size: 12px;
        }

        .page-record .breadcrumb {
          width: calc(100% - 24px);
          padding-top: 12px;
          font-size: 13px;
        }

        .page-record .app-hero {
          padding-top: 36px;
          padding-bottom: 28px;
        }

        .app-hero .container {
          grid-template-columns: minmax(0, 1fr);
          gap: 14px;
        }

        .app-hero-icon {
          width: 84px;
          height: 84px;
          border-radius: 22px;
        }

        .app-hero h1,
        .app-hero .eyebrow,
        .app-hero .feed-line,
        .app-hero .app-subname,
        .app-hero .app-hero-sub,
        .app-hero .pill-row,
        .app-hero .hero-actions {
          max-width: 100%;
        }

        .app-hero h1 {
          font-size: clamp(42px, 14vw, 60px);
        }

        .app-hero .assemble {
          /* shrink-wrap the nowrap phrase so the grid can centre it —
             capped at 100% it would overflow to the right only */
          width: max-content;
          max-width: none;
          justify-self: center;
          white-space: nowrap;
          transform-origin: center;
          transition: transform 560ms cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        .app-hero .assemble:not(.collapsed) {
          transform: scale(0.62);
        }

        .app-hero .app-hero-sub {
          width: 100%;
          font-size: 18px;
          line-height: 1.4;
        }

        .app-hero .app-subname {
          margin: -4px 0 0;
          font-size: 14px;
        }

        .app-hero .pill-row,
        .app-hero .hero-actions {
          width: 100%;
          gap: 8px;
        }

        .app-hero .hero-actions {
          flex-wrap: wrap;
          min-width: 0;
        }

        .app-hero .hero-actions .download {
          flex: 1 0 100%;
          white-space: normal;
        }

        .app-hero .hero-actions .hero-btn {
          min-height: 40px;
          padding: 8px 14px;
          font-size: 14px;
        }

        .soft-pill {
          min-height: 32px;
          padding: 6px 11px;
          font-size: 13px;
        }

        .feature {
          padding: 24px;
        }

        .support-card,
        .legal-card {
          padding: 24px 20px;
          border-radius: 22px;
        }

        .support-meta a,
        .legal-card a {
          overflow-wrap: anywhere;
        }

        .record-showcase-shot {
          border-radius: 18px;
        }
      }