/* =============================================================================
   RESPONSIVE.CSS — Bullet Website
   Mobile-first. All overrides scale UP via min-width queries.

   Load order: 6th (last)
   Depends on: everything above
   ============================================================================= */


/* -----------------------------------------------------------------------------
   MOBILE ONLY — <768px — hero and header use a centered/overlapping layout
----------------------------------------------------------------------------- */

@media (max-width: 767px) {

  .br--desktop-only { display: none; }

  /* Header on mobile matches desktop layout: logo left, nav right.
     Distance from the top doubled compared to the previous offset. */
  .site-header .site-header__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-top: 0;
    padding-inline: var(--space-6);
    margin-top: 0;
    min-height: 0;
  }

  /* Mobile header: transparent at the top; when scrolled, ::after shows a
     vertical black gradient (no solid bar). Padding is locked to a
     single value so the logo + menu do not jump up when the scrolled
     state changes it from 40px to 20px on desktop. */
  .site-header,
  .site-header--scrolled {
    background-color: transparent !important;
    background-image: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  .site-header::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: -80px;
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.85) 0%,
      rgba(0, 0, 0, 0.60) 40%,
      rgba(0, 0, 0, 0.30) 70%,
      rgba(0, 0, 0, 0)    100%
    );
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s var(--ease-default);
  }

  .site-header--scrolled::after {
    opacity: 1;
  }


  /* Hero spans the full viewport (next section never peeks through).
     svh instead of dvh: small viewport (stable) — does not change when
     the browser bar shows/hides, preventing scroll "jumps" */
  .hero {
    padding-top: 0;
    height: 100svh;
    min-height: 100svh;
    max-height: 100svh;
    position: relative;
  }

  /* Mobile: text and button overlay the phone (same grid cell) */
  .hero .hero__inner {
    grid-template-columns: 1fr;
    height: 100svh;
    min-height: 100svh;
  }

  .hero .hero__visual,
  .hero .hero__copy {
    grid-column: 1;
    grid-row: 1;
  }

  /* Phone is fixed-positioned during the hero; blur + scale progress driven
     by CSS custom properties updated from JS */
  .hero .hero__visual {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100%;
    max-width: 600px;
    z-index: 0;
    transform: translate(-50%, -50%) scale(var(--scroll-scale, 1.25));
    transform-origin: center;
    margin: 0;
    filter: blur(var(--scroll-blur, 0));
    transition: filter 0.15s linear, transform 0.15s linear;
  }

  /* Text + button anchored near the bottom of the viewport.
     Hero CTA is positioned by this padding alone — it is independent
     of the storytelling section below; the section's own offset starts
     fresh after the 100svh hero ends. */
  .hero .hero__copy {
    z-index: 3;
    align-self: end;
    justify-self: stretch;
    text-align: center;
    align-items: center;
    margin-top: 0;
    padding-bottom: 66px;
  }

  .hero .hero__title {
    font-size: clamp(3.5rem, 18vw, 5.5rem);
  }

  /* Mobile: keep "The Future" on a single unbroken line */
  .hero__title,
  .hero__title-static,
  .hero__title-future {
    white-space: nowrap;
  }

  .hero .hero__subtitle {
    max-width: none;
  }

  /* Centered hero CTA on mobile, same visual as desktop */
  .hero .hero__cta {
    align-self: center;
  }

  /* Stronger, taller bottom gradient to seat the text/CTA over the video bg */
  .hero::after {
    height: 420px;
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.95) 0%,
      rgba(0, 0, 0, 0.85) 30%,
      rgba(0, 0, 0, 0.6)  60%,
      rgba(0, 0, 0, 0.25) 85%,
      transparent         100%
    );
  }

  .hero .hero__visual img {
    max-width: 100%;
    width: 100%;
    opacity: 1;
    transform: none;
    margin: 0 auto;
  }

  /* After hero entry: a blurred copy of the phone overlays the lower half
     (blurs only the phone, not the background) */
  .hero .hero__visual::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url('/images/hero-phone.png');
    background-size: 100% auto;
    background-position: center center;
    background-repeat: no-repeat;
    filter: blur(7px);
    -webkit-mask-image: linear-gradient(to bottom,
      transparent 0%,
      transparent 35%,
      rgba(0, 0, 0, 0.6) 65%,
      black 100%);
    mask-image: linear-gradient(to bottom,
      transparent 0%,
      transparent 35%,
      rgba(0, 0, 0, 0.6) 65%,
      black 100%);
    opacity: 0;
    transition: opacity 0.7s ease;
  }

  .hero .hero__visual.is-animating::after {
    opacity: 1;
    transition-delay: 1.5s;
  }

  /* "The Power of Blockchain" section — larger centered title, smaller highlight */
  .section--blockchain .section__title {
    text-align: center;
    align-self: center;
    font-size: clamp(2.75rem, 9vw, 4.25rem);
    position: relative;
    z-index: 1;
  }

  .section--blockchain .section__highlight {
    font-size: 15px;
    align-self: center;
    text-align: center;
    position: relative;
    z-index: 1;
  }

  /* Keyboard image: anchored to the title itself so its center aligns
     exactly with the title's center, both vertically and horizontally. */
  .section--blockchain .split {
    position: relative;
  }
  .section--blockchain .split__media {
    display: none;
  }
  .section--blockchain .split__copy {
    position: relative;
    z-index: 1;
  }
  .section--blockchain .section__title {
    position: relative;
    z-index: 1;
    isolation: isolate;
  }
  .section--blockchain .section__title::after {
    content: "";
    position: absolute;
    top: calc(50% + 10px);
    left: 50%;
    width: 320px;
    height: 320px;
    max-width: 78vw;
    max-height: 78vw;
    background: url("/images/keyboard.png") no-repeat center / contain;
    opacity: 0.32;
    transform: translate(-50%, -50%);
    z-index: -1;
    pointer-events: none;
  }

  /* Banks Break — Screen 1 always visible on mobile (no entry animations) */
  .manifesto-intro__eyebrow,
  .manifesto-intro__marquee-wrap {
    opacity: 1 !important;
    animation: none !important;
  }

  /* Marquee: force GPU and run unconditionally, even without is-visible */
  .manifesto-intro__marquee-track {
    font-size: clamp(2.8rem, 13vw, 4.5rem);
    -webkit-animation: marqueeScroll 18s linear infinite !important;
    animation: marqueeScroll 18s linear infinite !important;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
  }

  /* Mobile carousels — pure slide (no opacity fade, card stays visible) */

  /* Containers break out of the section padding and fill 100vw with inner padding.
     Wider gutter narrows the carousel cards on mobile. */
  .section--different .card-grid,
  .manifesto-reveal__cards,
  .section--blockchain .bullet-list {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    padding-inline: 32px;
    box-sizing: border-box;
  }

  /* Tighter line-height for the descriptive copy inside every carousel
     card (Banking, Storytelling, Blockchain). */
  .section--different .card__body,
  .manifesto-reveal__card,
  .manifesto-reveal__card p,
  .section--blockchain .bullet-list__body p {
    line-height: 1.35;
  }

  /* Banking Without a Bank — larger title on mobile */
  .section--different .section__title {
    font-size: clamp(2.75rem, 9vw, 4.25rem);
  }

  /* "Same products..." subtitle — match the "Everything your bank does"
     statement size + color + line-height so both pieces of supporting
     copy read as part of the same visual layer. */
  .section--different .section__subtitle {
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    color: var(--color-text-primary);
    font-weight: var(--font-weight-light);
    line-height: 1.3;
  }

  /* Banking Without a Bank — stacked grid container */
  .section--different .card-grid {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr;
  }

  .section--different .card {
    grid-row: 1;
    grid-column: 1;
    transition: transform 1.5s cubic-bezier(0.22, 1, 0.36, 1);
    transform: translate3d(100%, 0, 0);
    opacity: 1;
    pointer-events: none;
  }

  /* Manifesto-reveal (Screen 2) — same carousel pattern */
  .manifesto-reveal__cards {
    grid-template-columns: 1fr;
    position: relative;
    overflow: hidden;
  }

  .manifesto-reveal__card {
    grid-row: 1;
    grid-column: 1;
    transition: transform 1.5s cubic-bezier(0.22, 1, 0.36, 1);
    transform: translate3d(100%, 0, 0);
    opacity: 1;
    pointer-events: none;
  }

  /* Blockchain — bullet-list as a carousel */
  .section--blockchain .bullet-list {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
  }

  .section--blockchain .bullet-list__item {
    grid-row: 1;
    grid-column: 1;
    transition: transform 1.5s cubic-bezier(0.22, 1, 0.36, 1);
    transform: translate3d(100%, 0, 0);
    opacity: 1;
    pointer-events: none;
    background-color: var(--color-bg-card);
    border-radius: var(--radius-2xl);
    padding: var(--space-6);
    text-align: left;
    line-height: 1.4;
  }

  .section--blockchain .bullet-list__item::before {
    display: none;
  }

  /* Bullet header on mobile — green icon + title */
  .section--blockchain .bullet-list__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
  }

  .section--blockchain .bullet-list__icon {
    display: inline-flex;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--color-bg-black);
    color: var(--color-accent);
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  /* Body always visible on mobile (no hover state) */
  .section--blockchain .bullet-list__body {
    display: block;
    padding-left: 0;
  }
  .section--blockchain .bullet-list__body p {
    overflow: visible;
    margin: 0;
  }

  /* Keep this section above the fixed hero phone.
     Mobile uses the same bg color as Banking Without a Bank for
     visual continuity between adjacent sections.
     Extra top padding leaves room for the keyboard backdrop image
     (positioned behind the title) so its upper half does not get
     cropped by the section boundary. */
  .section--blockchain {
    position: relative;
    z-index: 10;
    background-color: var(--color-bg-different);
    padding-top: clamp(var(--space-24), 22vw, var(--space-32));
  }

  /* Carousel rest positions — 24px gap between cards */
  .section--different .card[data-state="left"],
  .manifesto-reveal__card[data-state="left"],
  .section--blockchain .bullet-list__item[data-state="left"] {
    transform: translate3d(calc(-100% - 24px), 0, 0);
  }

  .section--different .card[data-state="right"],
  .manifesto-reveal__card[data-state="right"],
  .section--blockchain .bullet-list__item[data-state="right"] {
    transform: translate3d(calc(100% + 24px), 0, 0);
  }

  .section--different .card[data-state="active"],
  .manifesto-reveal__card[data-state="active"],
  .section--blockchain .bullet-list__item[data-state="active"] {
    transform: translate3d(0, 0, 0);
    pointer-events: auto;
  }

  /* Match wallet image to the same size as cartao/coins on mobile,
     overriding the desktop wallet override in components.css. */
  .section--different .card__media--wallet img {
    height: 80%;
    max-width: 90%;
  }

  /* Dots — 16px gap between card box and dots (Blockchain baseline) */
  .card-carousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-3);
    padding-top: 0;
    /* Parent gap var(--space-5)=20px; -4px nets 16px effective */
    margin-top: calc(var(--space-5) * -1 + var(--space-4));
  }

  /* Banking — parent gap var(--space-6)=24px; -8px nets 16px effective */
  .section--different .card-carousel-dots {
    margin-top: calc(var(--space-6) * -1 + var(--space-4));
  }

  .card-carousel-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    transition: background 0.3s ease;
    cursor: pointer;
  }

  .card-carousel-dot.card-carousel-dot--active {
    background: var(--color-accent);
  }

  /* Mobile locks — cadeado_02 (front) static, cadeado_01 (back) descends
     via transition when entering the viewport. Both shrunk a bit
     overall so the lock occupies less vertical space. */
  .lock-animation__front {
    transform: translateY(0) scale(0.58) !important;
    animation: none !important;
    transition: none !important;
  }

  /* Initial state: cadeado_01 starts above its resting position */
  .lock-animation__back {
    transform: translateY(-125px) scale(0.42) !important;
    animation: none !important;
    transition: transform 0.9s var(--ease-default) 0.35s !important;
  }

  /* Visible state: descend to resting position (movement halved) */
  .section--oneaccount.is-visible .lock-animation__back {
    transform: translateY(-93px) scale(0.42) !important;
  }

  /* Free scroll on mobile — no snap, no smooth */
  html,
  html:focus-within {
    scroll-snap-type: none;
    scroll-behavior: auto;
  }

  .hero,
  .section {
    height: auto;
    min-height: 0;
    scroll-snap-align: none;
  }

  .site-footer {
    scroll-snap-align: none;
    position: relative;
    z-index: 10;
    background-color: var(--color-bg-footer);
  }

  /* Banks Break: both screens stacked. Lighter base color than the
     desktop pure-black so the cubes bg-video reads against a softer
     surface on mobile. */
  .section--storytelling {
    height: auto;
    position: relative;
    z-index: 10; /* sits above the fixed hero phone */
    background-color: var(--color-bg-primary);
  }

  /* Soft top gradient on the next section so it doesn't cut hard over the phone */
  .section--storytelling::before {
    content: "";
    position: absolute;
    top: -70px;
    left: 0;
    right: 0;
    height: 70px;
    background: linear-gradient(to bottom, transparent 0%, var(--color-bg-black) 100%);
    pointer-events: none;
    z-index: 0;
  }

  .manifesto-intro,
  .manifesto-reveal {
    position: relative;
    inset: auto;
    height: auto;
  }

  /* Screen 1 — eyebrow + marquee centered vertically inside the
     intro band, with breathing room before the manifesto-reveal block. */
  .manifesto-intro {
    min-height: 35vh;
    gap: var(--space-2);
    padding-top: 60px;
    padding-bottom: 60px;
    justify-content: center;
  }
  .manifesto-intro__eyebrow {
    line-height: 1.45;
  }

  .manifesto-reveal {
    min-height: 70vh;
    padding-top: 30px;
    padding-bottom: 30px;
    justify-content: center;
    align-items: center;
  }

  /* Screen 2 always visible on mobile (independent of data-phase).
     Higher-specificity selector + visibility/display ensures the title
     never falls back to the desktop entry-animation hidden state.
     Bumped z-index and added a background so the title sits above the
     bg-video even if the layer stack reflows during scroll. */
  .section--storytelling .manifesto-reveal__title-wrap,
  .section--storytelling .manifesto-reveal__title,
  .section--storytelling .manifesto-reveal__cards {
    opacity: 1 !important;
    transform: translateY(0) !important;
    filter: none !important;
    animation: none !important;
    transition: none !important;
    visibility: visible !important;
  }
  .section--storytelling .manifesto-reveal__title-wrap {
    display: block !important;
    position: relative;
    z-index: 5;
    isolation: isolate;
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    min-height: 5em;
    width: 100%;
  }
  .section--storytelling .manifesto-reveal__title {
    color: var(--color-text-primary);
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.65);
    transform: translate3d(0, 0, 0);
  }

  .manifesto-reveal__bg-video {
    opacity: 0.4 !important;
    animation: none !important;
    transition: none !important;
    z-index: 0;
  }

  /* Screen 1 on mobile: clear all entry transforms — texts always visible */
  .manifesto-intro__eyebrow,
  .manifesto-intro__marquee-wrap {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  /* Screen 2 — normalize parent gap to match the other carousels */
  .manifesto-reveal {
    gap: var(--space-5);
  }

  .manifesto-reveal__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-3);
    /* 16px gap from card to dots, matching the other carousels */
    margin-top: 16px;
    padding-bottom: var(--space-8);
    grid-row: 2;
  }

  /* Borderless on mobile: full-bleed solid black, no animated card.
     Hide the .borderless__shrink overlay and paint the section itself
     in black so the whole area reads as one flat surface. */
  .section--borderless {
    background-color: var(--color-bg-black);
  }
  .section--borderless .borderless__shrink,
  .section--borderless.is-visible .borderless__shrink {
    display: none;
  }

  /* Borderless mobile — height, overflow, chip wrap, centered globe, larger title */
  .section--borderless {
    padding-top: 0;
    padding-bottom: 0;
    min-height: 0;
    height: auto;
  }

  .section--borderless .container {
    padding-top: clamp(var(--space-16), 14vw, var(--space-20));
    padding-bottom: clamp(var(--space-16), 14vw, var(--space-20));
    padding-inline: clamp(var(--space-6), 5vw, var(--space-10));
    max-width: 100%;
    overflow: hidden;
  }

  .section--borderless .split__copy {
    max-width: 100%;
    margin: 0 auto;
    width: 100%;
    text-align: center;
    align-items: center;
  }

  .section--borderless .section__title {
    font-size: clamp(3rem, 11vw, 4.75rem);
    line-height: 1.05;
    text-align: center;
    white-space: normal;
  }

  .section--borderless .section__lede {
    font-size: var(--font-size-base);
    text-align: center;
    margin-inline: auto;
    max-width: 38ch;
  }

  .section--borderless .chip-list {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }

  .section--borderless .chip-list li {
    padding: 7px 12px;
    font-size: 12px;
  }

  .section--borderless .split__media--video {
    margin-inline: auto;
    max-width: clamp(220px, 48vw, 320px);
  }

  /* New Foundation on mobile: a single black panel sits behind BOTH
     the lock and the text, centered within the section. Top padding
     doubled so the title clears the panel edge with extra headroom. */
  .section--oneaccount .split {
    background-color: rgba(0, 0, 0, 0.75);
    border-radius: var(--radius-2xl);
    padding: var(--space-12) var(--space-5) var(--space-6);
    margin-inline: auto;
    max-width: 92%;
    position: relative;
    z-index: 1;
  }
  .section--oneaccount .split__copy--glass {
    margin-top: 0;
    padding: 0;
    background-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: none;
  }

  .section--oneaccount .section__body {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
  }

  /* Anti-jank: drop backdrop-filter on mobile (causes scroll lag on Android) */
  .site-header--scrolled {
    background-color: rgba(22, 22, 22, 0.92);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .btn--ghost {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-color: rgba(22, 22, 22, 0.85);
  }

  /* Anti-jank: remove unnecessary will-change and mix-blend-mode on mobile */
  .borderless__shrink {
    will-change: auto;
  }

  .oneaccount__bg {
    mix-blend-mode: normal;
    opacity: 0.15;
    filter: grayscale(100%);
  }

  /* Disable hover/will-change on Banking cards — hover gets stuck on touch devices */
  .card__media img {
    will-change: auto;
    transition: none;
  }

  .card:hover,
  .card:hover .card__media img {
    transform: none;
    background-color: var(--color-bg-card);
  }

  /* Safety net against accidental horizontal overflow */
  html,
  body {
    overflow-x: clip;
  }
}


/* -----------------------------------------------------------------------------
   ≥ 600px — small tablets / large phones
----------------------------------------------------------------------------- */

@media (min-width: 600px) {
  .site-footer__columns {
    grid-template-columns: repeat(4, 1fr);
  }
}


/* -----------------------------------------------------------------------------
   ≥ 768px — tablet
----------------------------------------------------------------------------- */

@media (min-width: 768px) {

  .br--mobile-only  { display: none; }
  .br--desktop-only { display: block; }

  /* Banking section footer statement — same size as the subtitle */
  .section__statement {
    font-size: clamp(1rem, 2vw, 1.25rem);
  }

  /* Banking Without a Bank cards — image + title only; copy appears on hover */
  .section--different .card {
    position: relative;
    overflow: hidden;
  }

  .section--different .card__title {
    font-size: 2.625rem;
    line-height: 1.1;
    transition: filter 0.35s ease, opacity 0.35s ease;
  }

  .section--different .card__media {
    transition: filter 0.35s ease, opacity 0.35s ease;
  }

  .section--different .card__body {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: var(--space-6) var(--space-12);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    text-align: left;
    color: var(--color-text-primary);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
    z-index: 2;
  }

  .section--different .card:hover .card__title,
  .section--different .card:hover .card__media {
    filter: blur(10px);
    opacity: 0.35;
  }

  .section--different .card:hover .card__body {
    opacity: 1;
  }

  /* Banks Break Screen 1 — eyebrow 2x larger on desktop */
  .manifesto-intro__eyebrow {
    font-size: clamp(2rem, 2.8vw, 2.4rem);
    max-width: none;
  }

  /* Cards container is positioned so tabs can anchor absolutely */
  .manifesto-reveal__cards {
    position: relative;
  }

  /* Blockchain answers — 1 card per scroll step (data-phase 1=Every, 2=We, 3=The)
     Outgoing card blurs and recedes; incoming card rises from below */
  .section--storytelling .manifesto-reveal__card {
    font-size: clamp(1.125rem, 1.5vw, 1.5rem);
    line-height: 1.55;
    padding: clamp(var(--space-6), 3vw, var(--space-10));
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transform: translateY(60px) scale(0.94);
    filter: blur(10px);
    transition: opacity 0.55s ease,
                transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
                filter 0.55s ease;
  }

  .section--storytelling[data-phase="1"] .manifesto-reveal__card:nth-child(1),
  .section--storytelling[data-phase="2"] .manifesto-reveal__card:nth-child(2),
  .section--storytelling[data-phase="3"] .manifesto-reveal__card:nth-child(3) {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }

  /* Vertical tab navigator — floats absolutely to the left of the cards,
     gap = var(--space-6) between the tab and the card edge */
  .section--storytelling[data-phase="1"] .manifesto-reveal__dots,
  .section--storytelling[data-phase="2"] .manifesto-reveal__dots,
  .section--storytelling[data-phase="3"] .manifesto-reveal__dots {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
    gap: 10px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: calc(100% + var(--space-6));
    width: 8px;
    padding: 0;
    z-index: 2;
  }

  .manifesto-reveal__dots .card-carousel-dot {
    width: 6px;
    height: auto;
    flex: 1;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    transition: background 0.3s ease;
    cursor: pointer;
    margin-left: auto;
  }

  .manifesto-reveal__dots .card-carousel-dot.card-carousel-dot--active {
    background: var(--color-accent);
  }

  /* Screen 1 becomes non-interactive during Screen 2 phases */
  .section--storytelling[data-phase="1"] .manifesto-intro,
  .section--storytelling[data-phase="2"] .manifesto-intro,
  .section--storytelling[data-phase="3"] .manifesto-intro {
    pointer-events: none;
  }

  /* Hero: copy + phone side by side */
  .hero__inner {
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--space-16);
  }

  /* Split: 50 / 50
     Default → media left, copy right (matches source order)
     --reverse → copy left, media right */
  .split {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
  }

  .split .split__copy  { order: 2; }
  .split .split__media { order: 1; }

  .split--reverse .split__copy  { order: 1; }
  .split--reverse .split__media { order: 2; }

  /* Card grid: 2 columns */
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
  }

  .section__inner { gap: var(--space-8); }

  /* The Power of Blockchain — desktop:
     icon disc replaces the bullet, body expands on hover */
  .section--blockchain .bullet-list {
    margin-top: var(--space-6);
    gap: var(--space-4);
  }

  .section--blockchain .bullet-list__item {
    padding-left: 0;
    opacity: 1;
  }

  .section--blockchain .bullet-list__item::before {
    display: none;
  }

  .section--blockchain .bullet-list__head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
  }

  .section--blockchain .bullet-list__icon {
    display: inline-flex;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--color-bg-black);
    color: var(--color-accent);
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.3s var(--ease-default);
  }

  .section--blockchain .bullet-list__item:hover .bullet-list__icon {
    transform: scale(1.08);
  }

  .section--blockchain .bullet-list__head strong {
    margin-right: 0;
    font-size: 1.0625rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
  }

  /* "Governed by code." pill — same font size as bullet titles */
  .section--blockchain .section__highlight {
    font-size: 1.0625rem;
    padding: var(--space-2) var(--space-5);
    line-height: 1.3;
  }

  /* Body collapsed by default — uses the grid-template-rows trick to animate height */
  .section--blockchain .bullet-list__body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s var(--ease-default);
    margin: 0;
    padding-left: calc(36px + var(--space-3));
  }

  .section--blockchain .bullet-list__item:hover .bullet-list__body {
    grid-template-rows: 1fr;
  }

  .section--blockchain .bullet-list__body p {
    overflow: hidden;
    margin: 0;
    padding-top: var(--space-2);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
  }

  /* Letter-by-letter typewriter — JS injects spans, CSS handles the fade */
  .typewriter-char {
    opacity: 0;
    transition: opacity 0.05s linear;
  }

  .typewriter-char.is-typed {
    opacity: 1;
  }
}


/* -----------------------------------------------------------------------------
   ≥ 1024px — desktop
----------------------------------------------------------------------------- */

@media (min-width: 1024px) {

  /* Card grid: 3 columns */
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Hero: bigger visual */
  .hero__visual img { max-width: 640px; }

  /* Split media max size grows */
  .split__media img,
  .split__media video { max-width: 600px; }

  .section__header { margin-bottom: var(--space-6); }
}


/* -----------------------------------------------------------------------------
   Desktop on short viewports (13" laptops, 720p, etc.)
   The fixed header (~80–100px) covers section tops when titles are big.
   Reduce paddings/titles so content fits above the header.
----------------------------------------------------------------------------- */

@media (min-width: 768px) and (max-height: 850px) {

  /* Sections: increase padding-top to clear the header, trim total padding */
  .section {
    padding-top: 110px;
    padding-bottom: var(--space-10);
  }

  .hero {
    padding-top: 110px;
    padding-bottom: var(--space-8);
  }

  .hero__inner {
    align-items: center;
  }

  /* Hero title: still large, capped for short viewports */
  .hero__title {
    font-size: clamp(3.75rem, 8vw, 6.5rem);
    line-height: 1.05;
  }

  /* Subtitle ~1/3 smaller to give more breathing room */
  .hero__subtitle {
    font-size: clamp(0.8rem, 1.35vw, 1rem);
  }

  .section__title {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
  }

  /* Storytelling — Screen 2 (Blockchain answers to no one) */
  .manifesto-reveal__title {
    font-size: clamp(3rem, 6.5vw, 4.5rem);
  }

  .section--manifesto .section__title {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
  }

  /* Screen 2 — smaller card + text to fit short viewports */
  .section--storytelling .manifesto-reveal__card {
    font-size: clamp(0.85rem, 1.2vw, 1.05rem);
    line-height: 1.5;
    padding: clamp(var(--space-4), 2vw, var(--space-6));
    max-width: 600px;
    margin-inline: auto;
  }

  /* Banking Without a Bank cards — smaller title and capped height */
  .section--different .card {
    aspect-ratio: auto;
    min-height: 0;
    max-height: clamp(320px, 50vh, 460px);
  }
  .section--different .card__title {
    font-size: clamp(1.4rem, 2.2vw, 2rem);
    line-height: 1.1;
  }
  .section--different .card__media {
    aspect-ratio: 16 / 8;
  }
  /* Equal top/bottom card spacing — halved from default */
  .section--different .section__inner {
    gap: var(--space-4);
  }
  .section--different .section__header {
    margin-bottom: 0;
    gap: var(--space-2);
  }
  .section--different .section__footer {
    margin-top: 0;
  }
  .section--different .section__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
  }
  /* "Same products..." subtitle — same size as the statement below */
  .section--different .section__subtitle {
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    font-weight: var(--font-weight-light);
    color: var(--color-text-primary);
  }

  .section--faq .section__title {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
  }

  /* Manifesto-intro (Screen 1) — smaller text + marquee */
  .manifesto-intro__marquee-track {
    font-size: clamp(2.5rem, 8vw, 4.5rem);
  }

  /* Borderless uses clamp(min, min(vw,vh), max) in layout.css and scales
     smoothly without an override here. */
}

/* Very short viewports (≤700px height) — more aggressive trim */
@media (min-width: 768px) and (max-height: 700px) {
  .section,
  .hero {
    padding-top: 95px;
    padding-bottom: var(--space-8);
  }

  .hero__title {
    font-size: clamp(3.25rem, 6.5vw, 5.5rem);
  }

  .hero__subtitle {
    font-size: clamp(0.75rem, 1.2vw, 0.9rem);
  }

  .section__title,
  .section--faq .section__title {
    font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  }

  .manifesto-reveal__title {
    font-size: clamp(2.5rem, 5.5vw, 3.75rem);
  }

  .section--manifesto .section__title {
    font-size: clamp(1.25rem, 3vw, 2rem);
  }

  .section--storytelling .manifesto-reveal__card {
    font-size: clamp(0.8rem, 1.1vw, 0.95rem);
    padding: clamp(var(--space-3), 1.5vw, var(--space-5));
    max-width: 540px;
  }

  /* Banking Without a Bank — more aggressive trim */
  .section--different .card {
    max-height: clamp(280px, 45vh, 380px);
  }
  .section--different .card__title {
    font-size: clamp(1.2rem, 2vw, 1.65rem);
  }
  .section--different .section__inner {
    gap: var(--space-3);
  }
  .section--different .section__footer {
    margin-top: 0;
  }
  .section--different .section__title {
    font-size: clamp(1.5rem, 3.5vw, 2.1rem);
  }
  .section--different .section__subtitle {
    font-size: clamp(0.95rem, 1.8vw, 1.2rem);
    font-weight: var(--font-weight-light);
    color: var(--color-text-primary);
  }
  .section--different .section__statement {
    font-size: clamp(0.95rem, 1.8vw, 1.2rem);
  }

  /* Borderless already scales smoothly in layout.css (clamp + min(vw, vh)) */
}


/* -----------------------------------------------------------------------------
   Reduced motion — respect user preference
----------------------------------------------------------------------------- */

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

  .btn--primary:hover,
  .card:hover {
    transform: none;
  }
}


/* -----------------------------------------------------------------------------
   Print — keep it minimal
----------------------------------------------------------------------------- */

@media print {
  .site-header,
  .site-footer,
  .faq__icon,
  .hero__cta,
  .manifest__cta { display: none; }

  body { background: white; color: black; }
  .faq__panel[hidden] { display: block !important; }
}