/* ==========================================================================
   Ned marketing — mobile / tablet reflow
   Loaded after v4.css. Desktop is untouched: everything here lives inside a
   single max-width media query.

   v4.css mirrors a fixed 1425px Figma artboard built entirely from absolutely
   positioned layers, and v4.js scales that whole artboard down to fit. On a
   390px phone that lands at 27%, so body copy renders around 4-6px. There is
   no breakpoint to nudge — the mobile layout has to be authored.

   What this file does:
     1. switches the scaling shell off and lets the page flow,
     2. drops every Figma coordinate so layers stack in DOM order,
     3. hides the decorative artwork that only reads at artboard coordinates,
     4. restores natural type sizes and 44px tap targets,
     5. turns the pinned How-it-works board into a swipeable carousel.

   `!important` is used deliberately and only for the coordinate reset. It is
   overriding roughly 800 left/top/width/height declarations from an override
   sheet; matching each one by specificity would be far more fragile.
   ========================================================================== */

@media (max-width: 700px) {
  :root {
    /* The flow container sizes itself from content now, so the artboard
       height variables must stop contributing. */
    --how-extra: 0px;
    --faq-extra: 0px;

    --m-gutter: 20px;
    --m-max: 620px;
    --m-radius: 22px;
    /* Drives both the quadrant circle and its sketch outline. */
    --m-circle: min(56vw, 210px);
  }

  /* ------------------------------------------------------------------------
     1. Scaling shell off
     ------------------------------------------------------------------------ */

  .stage {
    height: auto !important;
    overflow: visible;
  }

  .scaler {
    width: 100% !important;
    height: auto !important;
    transform: none !important;
  }

  .canvas {
    width: 100% !important;
  }

  /* ------------------------------------------------------------------------
     2. Coordinate reset — layers stop being positioned and flow in DOM order
     ------------------------------------------------------------------------ */

  .layer,
  .layer.crop,
  .tape,
  .tape.crop,
  .quad,
  .how-pin,
  .how-after,
  .how-scene,
  .how-slides,
  .how-slide,
  .shot-slot {
    position: static !important;
    inset: auto !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    transform: none !important;
  }

  /* The pin is driven by a scroll-linked animation where supported. Nothing
     is pinned on mobile, so that animation must not run. */
  html.has-how-pin-css .how-pin,
  .how-pin {
    animation: none !important;
  }

  .how-pin::before {
    display: none !important;
  }

  /* .how-scene blocks pointer events on desktop because it overlays the
     board; on mobile it contains the carousel and must accept touch. */
  .how-scene {
    pointer-events: auto !important;
  }

  /* Text layers keep a fixed Figma box and centre inside it. In flow they
     should just be text. */
  .tbox {
    display: block;
    justify-content: flex-start;
  }

  /* ------------------------------------------------------------------------
     3. Artwork that only reads at artboard coordinates
     ------------------------------------------------------------------------ */

  .hero-flag,
  .hero-flag-outline,
  .hero-fig,
  .trust-figures-a,
  .trust-figures-b,
  .board-pin,
  .board-frame-bar,
  .tape,
  .note-arrow,
  .note-smiley,
  .note-years,
  .note-hbdi,
  .note-countries,
  .icon-magnifier,
  .icon-bulb,
  .icon-heart,
  .icon-clock,
  .how-doodle,
  .beta-doodle-l,
  .beta-doodle-r,
  .beta-figures,
  .shot-slot,
  .stars-a,
  .stars-b,
  .decoder-doodle,
  .faq-doodle,
  .footer-art,
  .glass {
    display: none !important;
  }

  /* ------------------------------------------------------------------------
     4. Section shells — one centred column per section
     ------------------------------------------------------------------------ */

  .hero .canvas,
  .trust .canvas,
  .flow .canvas,
  .site-footer .canvas {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: auto !important;
    overflow: visible !important;
    padding: 0 var(--m-gutter);
  }

  .flow .canvas {
    /* Gradient was pinned to the artboard height; let it track content. */
    background-size: 100% 100% !important;
    padding: 0;
  }

  .hero .canvas > *,
  .trust .canvas > * {
    width: 100%;
    max-width: var(--m-max);
  }

  /* ------------------------------------------------------------------------
     5. Nav — logo and CTA on one row, links wrapping beneath
     ------------------------------------------------------------------------ */

  /* Fixed, not sticky or static: the header is a sibling *before* .stage, so
     anything in flow pushes the hero gradient down and leaves a white band
     above it. Fixed takes it out of flow, so the gradient starts at y=0 and
     the bar floats over it. */
  .nav-wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    padding-top: env(safe-area-inset-top, 0px);
    transform: none !important;
  }

  /* The how-pin used to hide the nav while the board was pinned. Nothing is
     pinned here, so the nav must never be hidden. */
  .nav-wrap.is-away {
    opacity: 1;
    visibility: visible;
  }
  .nav-wrap.is-away .nav {
    pointer-events: auto;
  }

  .nav {
    position: relative;
    top: auto;
    left: auto;
    flex-wrap: wrap;
    gap: 8px 14px;
    width: auto;
    height: auto;
    margin: 10px var(--m-gutter);
    padding: 10px 12px;
    /* Same treatment as the desktop bar: translucent white over a blur, 4px
       white border, pill radius. Inherited from v4.css — restated here only
       so the two states stay in step. */
    background: rgba(255, 255, 255, 0.4);
    border: 4px solid #fff;
    border-radius: 50px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(12.5px);
    -webkit-backdrop-filter: blur(12.5px);
    transition:
      gap 0.26s ease,
      padding 0.26s ease,
      margin 0.26s ease,
      border-radius 0.26s ease;
  }

  .nav-logo {
    font-size: 21px;
    gap: 8px;
    transition: font-size 0.26s ease;
  }
  .nav-logo img {
    width: 34px;
    height: 33px;
    transition:
      width 0.26s ease,
      height 0.26s ease;
  }

  .nav-links {
    position: static;
    order: 3;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px 14px;
    width: 100%;
    max-height: 44px;
    overflow: hidden;
    transform: none;
    transition:
      max-height 0.26s ease,
      opacity 0.2s ease;
  }
  .nav-links a {
    display: flex;
    align-items: center;
    min-height: 40px;
    font-size: 14px;
  }

  .nav-cta {
    width: auto;
    min-height: 44px;
    height: auto;
    margin-left: auto;
    padding: 0 20px;
    font-size: 15px;
    line-height: 1.2;
    transition:
      min-height 0.26s ease,
      padding 0.26s ease,
      font-size 0.26s ease;
  }

  /* Scrolled state — the link row folds away and the bar tightens, so the
     sticky header costs about 64px instead of 130px. */
  /* The compact state only tightens the box — the surface treatment (0.4
     white, 4px border, blur, shadow) is the desktop one and does not change. */
  .nav-wrap.is-compact .nav {
    gap: 0 14px;
    margin-top: 6px;
    margin-bottom: 6px;
    padding: 6px 10px;
  }
  .nav-wrap.is-compact .nav-links {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
  }
  .nav-wrap.is-compact .nav-logo {
    font-size: 18px;
  }
  .nav-wrap.is-compact .nav-logo img {
    width: 28px;
    height: 27px;
  }
  .nav-wrap.is-compact .nav-cta {
    min-height: 38px;
    padding: 0 16px;
    font-size: 14px;
  }

  @media (prefers-reduced-motion: reduce) {
    .nav,
    .nav-logo,
    .nav-logo img,
    .nav-links,
    .nav-cta {
      transition: none;
    }
  }

  /* ------------------------------------------------------------------------
     6. Hero
     ------------------------------------------------------------------------ */

  .hero .canvas {
    position: relative;
    /* Clears the expanded nav, which is out of flow. */
    padding-top: calc(152px + env(safe-area-inset-top, 0px));
    padding-bottom: 0;
    gap: 18px;
  }

  .hero-title {
    order: 1;
    font-size: clamp(34px, 9vw, 52px);
    line-height: 1.1;
    letter-spacing: 0.5px;
  }
  .hero-title-lead {
    transform: none;
  }
  /* The hidden sizer reserves the width of the longest word ("authentically"),
     which on a centred mobile line leaves a visible gap after "Working". Let
     the word size itself instead; it is one word on its own centred line. */
  .hero-title .hero-rotate {
    display: inline;
  }
  .hero-title .hero-rotate-sizer {
    display: none;
  }

  .hero-sub {
    order: 2;
    font-size: 17px;
    line-height: 1.45;
    letter-spacing: 0.2px;
    text-align: center;
  }

  .hero-actions {
    order: 3;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 320px;
  }
  .hero-actions .btn,
  .hero-actions .btn-white {
    width: 100%;
  }

  /* Keep the hero copy above the artwork so the mountain can tuck up behind
     it the way it does on desktop. z-index needs a position to take effect. */
  .hero-title,
  .hero-sub,
  .hero-actions {
    position: relative;
    z-index: 2;
  }

  /* The mountain closes the hero. Its left half is empty sky, so without the
     pull-up there is a ~215px void between the buttons and the ink. */
  .hero-art {
    display: block;
    order: 4;
    position: relative;
    z-index: 0;
    width: 100vw !important;
    max-width: 100vw !important;
    height: auto !important;
    /* The art is 100vw wide at a fixed 0.575 ratio, so the void scales with
       the viewport and the pull-up has to as well. */
    /* The art sits below the button block, whose height and surrounding gaps
       are fixed pixels, so the distance from the subhead down to the art's
       natural top is ~136px at every width — not a ratio. A constant pull-up
       therefore holds the same composition from 320px to 700px; measured,
       it leaves an even 12px between the subhead and the artwork throughout.
       This is the limit: any more and the peak runs into "Launching soon." */
    margin-top: -132px;
    margin-inline: calc(var(--m-gutter) * -1);
  }

  /* A thick stroked path that patches a vertical gap in the mountain line art
     — without it there is a visible white seam through the ridge.

     It has to be placed against the artwork, not the flow. On the artboard the
     art box is 1425 x 819.194 at y=108 and the stem is 11.958 x 77.154 at
     (907.651, 490.664), so as fractions of the art it sits 63.695% across,
     0.839% wide, 9.418% tall, with its base 43.870% up from the bottom. The
     art is 100vw wide at a 0.57487 ratio and its bottom is the hero's bottom,
     so those fractions convert straight to vw against the canvas. Anchoring
     from the bottom keeps it correct whatever the pull-up above is. */
  .hero-stem {
    display: block !important;
    position: absolute !important;
    left: 63.695vw !important;
    bottom: 25.22vw !important;
    width: 0.839vw !important;
    height: 5.414vw !important;
    /* Over the artwork, under the copy. */
    z-index: 1;
  }

  /* ------------------------------------------------------------------------
     7. Trust
     ------------------------------------------------------------------------ */

  .trust .canvas {
    gap: 10px;
    padding-top: 44px;
    padding-bottom: 44px;
  }

  .trust-title {
    font-size: 25px;
    line-height: 1.3;
    letter-spacing: -0.2px;
  }
  .trust-sub {
    font-size: 17px;
    line-height: 1.4;
    letter-spacing: -0.2px;
  }

  .logo-marquee {
    overflow: hidden !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-inline: calc(var(--m-gutter) * -1);
    margin-top: 18px;
  }
  .logo-marquee .marquee-track {
    height: auto;
  }
  /* Logo widths are set per item to keep each mark's aspect ratio; only the
     spacing needs to come in. */
  .logo-marquee .logo-row {
    align-items: center;
    gap: 46px;
    padding: 8px 46px 8px 0;
  }

  /* ------------------------------------------------------------------------
     8. Mission and pain point
     ------------------------------------------------------------------------ */

  .flow .canvas > .pill,
  .flow .canvas > .tbox,
  .flow .canvas > img {
    width: 100%;
    max-width: calc(var(--m-max) + var(--m-gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--m-gutter);
  }

  /* The pill's own padding is its interior, so the gutter has to come from
     the margin or the pill sits flush against the screen edge. */
  .mission-pill,
  .pain-pill,
  .how-pill,
  .decoder-pill,
  .faq-pill {
    width: max-content !important;
    max-width: calc(100% - var(--m-gutter) * 2) !important;
    height: 46px !important;
    gap: 8px !important;
    margin: 0 auto 14px !important;
    padding: 0 18px !important;
    overflow: visible !important;
  }
  .pill-icon {
    width: 28px !important;
    height: 28px !important;
    object-fit: contain;
  }
  .pill-label {
    height: auto;
    font-size: 15px;
  }

  /* These two read left-aligned in the design, and a long paragraph centred in
     a narrow column is harder to scan, so they stay left here. */
  .mission-pill {
    margin: 48px auto 14px var(--m-gutter) !important;
  }
  .pain-pill {
    margin: 52px auto 14px var(--m-gutter) !important;
  }

  .mission-title,
  .pain-title {
    font-size: 24px;
    line-height: 1.28;
    letter-spacing: 0.2px;
    text-align: left;
  }

  .mission-body,
  .pain-body {
    margin-top: 14px;
    font-size: 16px;
    line-height: 1.55;
    text-align: left;
  }

  .mission-doodle,
  .pain-doodle {
    width: min(100%, 320px) !important;
    height: auto !important;
    margin: 22px auto 0 !important;
    object-fit: contain !important;
  }

  /* ------------------------------------------------------------------------
     9. How it works — swipeable carousel
     ------------------------------------------------------------------------ */

  .how-scene {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 56px 0 0;
  }

  .how-pill {
    order: 1;
  }

  .how-title {
    order: 2;
    width: 100% !important;
    max-width: var(--m-max) !important;
    margin-inline: auto;
    padding: 0 var(--m-gutter);
    font-size: 22px;
    line-height: 1.3;
    text-align: center;
  }

  /* The framework circle is a board-level graphic on desktop, shared by every
     card. It shows once here, above the deck, with its hand-drawn outline
     laid back over it.

     Geometry is carried over from the artboard, where the sketch box is
     402.308 x 441.105 at (466.95, 1707.87) and the circle is 350.58 x 359.807
     at (492.65, 1753.56). That makes the sketch 1.1476x the circle's width,
     concentric to within a fraction of a pixel, so it can be re-derived from
     one variable at any size. */
  .quad-circle {
    order: 3;
    display: block;
    width: var(--m-circle) !important;
    height: auto !important;
    margin: 20px auto 0 !important;
  }

  .brain-sketch {
    order: 3;
    display: block;
    width: calc(var(--m-circle) * 1.1476) !important;
    height: auto !important;
    /* Pulls back over the circle it follows: one circle height, plus the
       amount the taller sketch overhangs the top. */
    margin: calc(var(--m-circle) * -1.1435) auto 4px !important;
    pointer-events: none;
  }

  .how-slides {
    order: 4;
    display: flex;
    /* Cards hug their own content. Stretching them all to the tallest card
       leaves a few hundred pixels of blank white inside the shorter ones. */
    align-items: flex-start;
    gap: 14px;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 18px;
    padding: 4px var(--m-gutter) 8px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--m-gutter);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .how-slides::-webkit-scrollbar {
    display: none;
  }

  .how-slide,
  .how-slide.is-active {
    flex: 0 0 min(86vw, 420px);
    scroll-snap-align: center;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 14px;
    align-content: start;
    padding: 22px 20px 20px;
    /* Every card is visible in a carousel — the desktop show/hide is off. */
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: none !important;
    background: #fff;
    border-radius: var(--m-radius);
    box-shadow:
      0 1px 2px rgba(0, 0, 0, 0.06),
      0 8px 20px rgba(0, 0, 0, 0.1);
  }

  .how-slide > .board-eyebrow,
  .how-slide > .board-title,
  .how-slide > .board-intro,
  .how-slide > .board-disclaimer {
    grid-column: 1 / -1;
  }

  /* Quadrants read down the columns, as on the board: A and B stacked on the
     left, C and D on the right. The grid fills row by row, so visiting them
     in the order A, C, B, D puts each pair in its own column. Using `order`
     rather than explicit row numbers keeps this independent of how many
     elements sit above. */
  .how-slide > .quad-a {
    order: 2;
  }
  .how-slide > .quad-c {
    order: 3;
  }
  .how-slide > .quad-b {
    order: 4;
  }
  .how-slide > .quad-d {
    order: 5;
  }
  .how-slide > .board-disclaimer {
    order: 6;
  }

  .board-eyebrow,
  .board-eyebrow.board-eyebrow-wide {
    width: auto !important;
    font-size: 16px;
    color: var(--ink-6c);
    white-space: normal;
  }

  .how-slide .board-title,
  .how-slide[data-how-slide="6"] .board-title {
    width: auto !important;
    font-size: 21px;
    line-height: 1.25;
  }
  .how-slide .board-title .t {
    line-height: 1.25;
  }

  .how-slide .board-intro {
    width: auto !important;
    margin-bottom: 2px;
    font-size: 14.5px;
    line-height: 1.45;
    color: var(--ink-1e);
  }

  .quad {
    display: block;
    width: auto !important;
    max-width: none !important;
  }
  .quad h3,
  .quad-a h3,
  .quad-b h3,
  .quad-c h3,
  .quad-d h3,
  .how-slide[data-how-slide="4"] .quad-a h3,
  .how-slide[data-how-slide="4"] .quad-b h3 {
    max-width: none;
    font-size: 15px;
    line-height: 1.25;
    white-space: normal;
  }
  .quad ul {
    margin-top: 4px;
    padding-left: 0;
    font-size: 13.5px;
  }
  /* Figma pinned these to one line; at phone widths they have to wrap. */
  .quad ul li {
    line-height: 1.35;
    white-space: normal;
    color: var(--ink-3e);
  }

  .how-slide .board-disclaimer,
  .how-slide .board-disclaimer-cite {
    width: auto !important;
    margin-top: 4px;
    padding-top: 12px;
    font-size: 11.5px;
    line-height: 1.45;
    text-align: left;
    color: var(--ink-6c);
    border-top: 1px solid rgba(0, 0, 0, 0.09);
  }

  /* Pagination dots under the deck. The progress track is a desktop device
     tied to scroll distance and does not map onto a swipe, so it is off. */
  .how-rule {
    order: 5;
    display: flex;
    justify-content: center;
    width: 100% !important;
    margin: 16px 0 0;
    padding-bottom: 8px;
  }
  .how-rule-track {
    display: none;
  }
  .how-dots {
    width: auto;
    height: auto;
    margin-left: 0;
    gap: 6px;
    justify-content: center;
  }
  .how-dot {
    width: 9px;
    height: 9px;
    background: rgba(0, 0, 0, 0.22);
  }
  .how-dot.is-filled {
    background: rgba(0, 0, 0, 0.22);
  }
  .how-dot[aria-current="true"] {
    background: #000;
    transform: scale(1.35);
  }
  /* 9px dots need a real tap target. */
  .how-dot::before {
    inset: -17px -9px;
  }
  .how-dot[aria-current="true"]::after {
    display: none;
  }

  /* ------------------------------------------------------------------------
     10. Private beta
     ------------------------------------------------------------------------ */

  .how-after {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .how-after > .pill,
  .how-after > .tbox,
  .how-after > .beta-form,
  .how-after > .beta-status,
  .how-after > .decoder-cta,
  .how-after > .faq-list {
    width: 100%;
    max-width: var(--m-max);
    margin-inline: auto;
    padding-inline: var(--m-gutter);
  }

  .beta-title {
    margin-top: 64px;
    font-size: clamp(30px, 8vw, 44px);
    line-height: 1.08;
    text-align: center;
  }
  .beta-sub {
    margin-top: 14px;
    font-size: 17px;
    line-height: 1.4;
    text-align: center;
  }

  .beta-form {
    display: flex;
    gap: 10px;
    margin-top: 20px;
  }
  .beta-form input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: 48px;
    padding: 12px 16px;
    /* Anything under 16px makes iOS Safari zoom the page on focus. */
    font-size: 16px;
    text-align: left;
  }
  .beta-form .btn {
    flex: none;
    height: 48px;
    min-width: 84px;
    padding: 0 22px;
  }

  .beta-note {
    margin-top: 16px;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
  }
  .beta-status {
    margin-top: 10px;
    font-size: 14px;
    text-align: center;
  }

  /* ------------------------------------------------------------------------
     11. Team
     ------------------------------------------------------------------------ */

  .team-title {
    margin-top: 64px;
    font-size: 26px;
    text-align: center;
  }

  .team-scroll {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 22px;
    padding-inline: var(--m-gutter);
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .team-scroll::-webkit-scrollbar {
    display: none;
  }
  /* Swiping, not marquee-ing — an auto-scrolling track fights the finger. */
  .team-scroll .marquee-track {
    animation: none !important;
    gap: 14px;
  }
  /* The duplicate row exists only to make the marquee loop seamlessly. */
  .team-scroll .team-row[aria-hidden="true"] {
    display: none;
  }
  .team-scroll .team-row {
    gap: 14px;
    padding: 0 0 12px;
  }
  .team-card {
    width: 190px;
    scroll-snap-align: center;
  }
  .team-card img {
    width: 190px;
    height: 244px;
    border-radius: 26px;
  }
  /* The desktop rule gives these a 347px box, a 64px line and a centring
     translate, all of which overflow a 190px card. */
  .team-card h3 {
    width: auto;
    margin: 12px 0 2px;
    transform: none;
    font-size: 17px;
    line-height: 1.25;
    white-space: normal;
  }
  .team-card p {
    width: auto;
    margin: 0;
    font-size: 14px;
    line-height: 1.35;
  }

  /* ------------------------------------------------------------------------
     12. Decoder
     ------------------------------------------------------------------------ */

  .decoder-pill {
    margin-top: 72px !important;
  }
  .decoder-title {
    font-size: 24px;
    line-height: 1.28;
    text-align: center;
  }
  .decoder-title br {
    display: none;
  }
  .decoder-cta {
    display: flex;
    gap: 10px;
    width: auto !important;
    max-width: 320px !important;
    height: 52px !important;
    margin: 20px auto 0 !important;
    font-size: 17px;
  }
  .decoder-note {
    margin-top: 14px;
    font-size: 14.5px;
    line-height: 1.5;
    text-align: center;
  }

  /* ------------------------------------------------------------------------
     13. FAQ
     ------------------------------------------------------------------------ */

  .faq-pill {
    margin-top: 72px !important;
  }
  .faq-title {
    font-size: 24px;
    text-align: center;
  }

  .faq-list {
    margin-top: 22px;
    padding-bottom: 64px;
  }
  .faq-list li + li {
    margin-top: 12px;
  }
  .faq-list details {
    border-width: 4px;
    border-radius: 22px;
  }
  .faq-list summary {
    gap: 14px;
    min-height: 56px;
    padding: 14px 18px;
    font-size: 16px;
    line-height: 1.35;
  }
  .faq-list summary .chev {
    flex: none;
    width: 20px;
    height: 20px;
  }
  .faq-list details > p {
    padding: 0 18px 20px;
    font-size: 15px;
    line-height: 1.55;
  }

  /* ------------------------------------------------------------------------
     14. Footer
     ------------------------------------------------------------------------ */

  /* Row-wrap so the three links share one line between the brand and the
     copyright, which each take a full row of their own. */
  .site-footer .canvas {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    padding-top: 44px;
    padding-bottom: 44px;
    text-align: center;
  }

  .footer-brand {
    order: 1;
    /* The coordinate reset sets width with !important, so claim the row
       through flex-basis instead. */
    flex: 0 0 100%;
    font-size: 40px;
    line-height: 1.15;
    text-align: center;
  }
  .footer-copy {
    order: 5;
    flex: 0 0 100%;
    margin-top: 14px;
    font-size: 15px;
    line-height: 1.4;
    text-align: center;
  }

  /* Links are rotated and scattered across the artboard art on desktop, and
     the 70px line-height there gives each one a 70px box. Flat row here. */
  .footer-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto !important;
    min-height: 44px;
    padding: 0 14px;
    font-size: 17px;
    line-height: 1.3;
  }
  .footer-link > span {
    width: auto !important;
    transform: none !important;
  }
  .link-privacy {
    order: 2;
  }
  .link-terms {
    order: 3;
  }
  .link-contact {
    order: 4;
  }

  /* ------------------------------------------------------------------------
     15. Shared
     ------------------------------------------------------------------------ */

  .btn {
    min-height: 48px;
    height: auto;
    font-size: 16px;
  }

  /* Blur on large surfaces is expensive on phone GPUs and the fills are
     nearly opaque anyway. */
  .pill {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Narrow phones: one column of quadrants reads better than two cramped ones.
   With a single column the A, C, B, D visiting order would scramble them, so
   they go back to reading A, B, C, D straight down. */
@media (max-width: 380px) {
  .how-slide,
  .how-slide.is-active {
    grid-template-columns: 1fr;
  }
  .how-slide > .quad-a,
  .how-slide > .quad-b,
  .how-slide > .quad-c,
  .how-slide > .quad-d {
    order: 2;
  }
}