/* =====================================================
   Mobile port — AWR mobile design system (≤760px)
   Loads after styles.css + pages.css. Every rule lives
   inside the media query; desktop is untouched.
   Reference: mobile-mockup.html (approved) + the
   AWR-Website-Mobile-Responsive skill spec.
   ===================================================== */

:root { --px-shadow: inset -2px -2px 0 0 rgba(18, 18, 18, 0.18); }

/* the sticky bottom CTA bar exists in the markup on every offer page;
   it only ever renders on mobile */
.ctabar { display: none; }

/* mobile-only controls injected by JS (pricing rail nav, reserve view-more)
   stay hidden everywhere else; layer__ext is an <i> purely as a marker,
   never italic */
.sellmore { display: none; }
.layer__ext { font-style: normal; }

@media (max-width: 760px) {

  html, body { overflow-x: clip; }
  section { scroll-margin-top: 64px; }
  .wrap { padding-left: 14px; padding-right: 14px; }

  /* ---------- app shell: compact fixed header ---------- */
  .pillnav { padding: 8px 14px; gap: 10px; }
  .pillnav__brand img { height: 17px; }
  .pillnav > .btn { display: none; } /* the bottom CTA bar owns the action */
  .mmenu-btn {
    margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
    background: #fff; border: 1px solid var(--line); border-radius: 6px;
    padding: 6px 10px; box-shadow: var(--px-shadow);
  }
  .mmenu-btn:active { transform: translateY(1px); }
  .pillnav__brand, .mmenu-btn { position: relative; z-index: 2; }

  /* ---------- full-screen menu sheet ---------- */
  .mmenu {
    position: fixed; inset: 0; top: 0; left: 0; width: auto; max-width: none;
    transform: none; border: 0; border-radius: 0; box-shadow: none;
    background: rgba(255, 255, 255, 0.97);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    padding: 96px 22px 30px; overflow-y: auto;
    display: flex; flex-direction: column; gap: 2px;
  }
  .mmenu.open { transform: none; }
  .mmenu__group { font-size: 8px; letter-spacing: 0.22em; color: var(--ink-3); padding: 14px 0 6px; }
  .mmenu a {
    font-family: var(--display); font-weight: 700; font-size: 30px; line-height: 1.05;
    color: var(--ink); padding: 6px 0; border-radius: 0; border-bottom: 1px solid var(--line);
  }
  .mmenu a:hover { background: none; color: var(--blue); }

  /* ---------- shared section grammar ---------- */
  .section {
    padding: 64px 0; min-height: calc(100svh - 60px);
    display: flex; flex-direction: column; justify-content: center;
  }
  .section > .wrap { width: 100%; }
  .section.whynow { padding: 0; min-height: 0; display: block; } /* owns its own scroll story */
  #guarantee, .finalcta, #team-section, #next { min-height: 0; padding: 56px 0; }
  #videos { min-height: 0; padding: 48px 0 42px; }
  #videos .wol__videos { margin-top: 26px; }

  /* ---------- Trustpilot: three narrow vertical streams ---------- */
  #trustpilot { min-height: 748px; padding: 0; }
  body[data-page="selfpaced"] #trustpilot { padding-top: 48px; }
  .trustwall__stage {
    width: 100%; height: 748px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px; padding: 0 8px;
  }
  .trustwall__set { gap: 8px; padding: 8px 0; }
  .trustwall__set--mobile { display: flex; }
  .trustwall__set img { border-radius: 8px; box-shadow: none; }
  .trustwall__column:nth-child(1),
  .trustwall__column:nth-child(3) { transform: none; }
  .trustwall__column[data-direction="up"] .trustwall__track { animation-name: trustwall-up-mobile; }
  .trustwall__column[data-direction="down"] .trustwall__track { animation-name: trustwall-down-mobile; }
  @keyframes trustwall-up-mobile {
    from { transform: translateY(0); }
    to { transform: translateY(-25%); }
  }
  @keyframes trustwall-down-mobile {
    from { transform: translateY(-25%); }
    to { transform: translateY(0); }
  }
  .trustwall__brand { gap: 12px; padding: 16px 18px 18px; border-radius: 12px; }
  .trustwall__rating { gap: 8px; }
  .trustwall__wordmark { font-size: 19px; }
  .trustwall__stars { gap: 3px; }
  .trustwall__star { width: 27px; height: 27px; font-size: 16px; }
  .trustwall__cta { min-height: 44px; margin-top: 2px; font-size: 9px; }

  body[data-page="enterprise"] .trustwall ~ .section {
    min-height: 100svh !important;
    padding: 64px 0 !important;
  }

  /* Page section rhythm: match Enterprise breathing room on every offer. */
  body:is([data-page="index"], [data-page="selfpaced"], [data-page="bwm"]) .section:not(.trustwall) {
    min-height: 100svh !important;
    padding: 64px 0 !important;
  }
  body[data-page="index"] .section.remy-profile {
    min-height: 748px !important;
    padding: 0 !important;
    display: block;
  }
  .remy-profile__grid {
    min-height: 748px;
    grid-template-columns: 1fr;
    grid-template-rows: 220px auto;
  }
  .remy-profile__portrait {
    grid-row: 1;
    min-height: 0;
  }
  .remy-profile__portrait img { object-position: center 38%; }
  .remy-profile__copy {
    grid-row: 2;
    padding: 24px 14px 28px;
  }
  .remy-profile__title {
    max-width: 350px;
    font-size: 34px;
    line-height: 0.9;
  }
  .remy-profile__body {
    margin-top: 16px;
    font-size: 11px;
    line-height: 1.45;
  }
  .plugin-install { min-height: 748px !important; padding: 64px 0 !important; }
  .plugin-install__track { height: 260vh; }
  .plugin-install__sticky { min-height: 748px; }
  .plugin-install__strip { grid-template-columns: 1fr; gap: 18px; text-align: center; max-width: 340px; }
  .plugin-install__flyer img { width: 132px; }
  .plugin-install__copy h2 { margin: 12px auto 14px; font-size: 30px; }
  .plugin-install__copy p { font-size: 11px; line-height: 1.45; }
  .plugin-install__list { display: inline-grid; text-align: left; gap: 8px; margin-top: 16px; font-size: 11px; }
  .plugin-install__computer { width: min(330px, 86vw); }
  .plugin-install__screen { min-height: 210px; padding: 12px; }
  .plugin-install__terminal { padding: 13px; font-size: 9px; }
  .remy-profile__body p + p { margin-top: 10px; }
  .remy-profile__cta { margin-top: 18px; }
  body[data-page="selfpaced"] .section.whynow {
    min-height: 0 !important;
    padding: 0 !important;
    display: block;
  }

  .sec-head { max-width: none; margin: 0 0 22px; text-align: left; }
  .finalcta .sec-head, .finalcta { text-align: center; }
  .eyebrow { font-size: 9px; letter-spacing: 0.2em; margin-bottom: 10px; }
  h2 { font-size: 30px; line-height: 0.95; }
  .pixlines .swaphead { font-size: 28px; }
  .lead { margin-top: 12px; font-size: 12px; line-height: 1.5; }
  .prose p { font-size: 12px; }

  /* ---------- buttons: pixel inset, soft radius ---------- */
  .btn { border-radius: 9px; font-size: 11px; padding: 12px 18px; }
  .btn--raised { box-shadow: var(--px-shadow); }
  .btn--blue { box-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.28); }
  .btn:active { transform: translateY(1px); }
  .btn--lg { padding: 14px 22px; font-size: 12px; }
  .btn--sm { padding: 8px 14px; font-size: 10px; }

  /* ---------- hero: one full paywall screen ---------- */
  .hero, .hero--page {
    padding: 84px 0 24px; min-height: 100svh;
    display: flex; flex-direction: column; justify-content: center;
  }
  .hero__row { gap: 16px; }
  .hero__copy { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .hero .hero__headline, .hero--page .hero__headline {
    font-size: 50px; line-height: 0.9; text-wrap: balance; margin-bottom: 20px;
  }
  body[data-page="selfpaced"] .hero .hero__headline { font-size: 44px; }
  body[data-page="selfpaced"] .hero .hl-lavender--nowrap { white-space: normal; }
  .hero__sub { font-size: 12px; line-height: 1.5; max-width: 320px; margin-bottom: 22px; }
  /* the sub's longer middle clause folds away on a phone */
  .sub-ext { display: none; }
  .hero__ctas { flex-direction: column; width: 100%; gap: 12px; margin-bottom: 12px; }
  .hero__ctas .btn { width: 100%; height: 52px; border-radius: 10px; font-size: 12px; }
  .hero__micro { font-size: 8px; }
  .hero__badge { margin-bottom: 14px; }
  .hero__ascii { gap: 6px; }
  #brainhero { width: min(230px, 60vw); }
  #sand { width: min(220px, 58vw); }
  #portrait { width: min(300px, 80vw); }
  #network { width: min(270px, 72vw); }
  /* hover/click interaction prompts make no sense on touch — drop them */
  .hero__hint { display: none; }
  /* the rotating eyebrow shrinks to sit in proportion with the headline:
     smaller face height means the 3D faces need a matching translateZ */
  .hero__badge--3d { height: 26px; }
  .b3d__face { height: 26px; font-size: 8px; letter-spacing: 0.02em; padding: 0 10px; gap: 6px; }
  .b3d__face:nth-child(1) { transform: rotateX(0deg) translateZ(13px); }
  .b3d__face:nth-child(2) { transform: rotateX(90deg) translateZ(13px); }
  .b3d__face:nth-child(3) { transform: rotateX(180deg) translateZ(13px); }
  .b3d__face:nth-child(4) { transform: rotateX(270deg) translateZ(13px); }
  .hero__badge .livedot { width: 5px; height: 5px; }

  /* hero scroll scene (index): shorter run on mobile */
  .heroScene { height: 320vh; }
  .heroScene .hero { padding: 84px 0 24px; }
  /* while the scene is live the pinned hero compacts to the REAL visible
     viewport (Safari chrome leaves ~550-750px): the brain sits on top and
     takes ALL spare height — its canvas resolves detail from CSS size at
     init, so it stays as large as fits — while copy + CTAs anchor to the
     bottom of the screen like the approved paywall layout */
  .heroScene:not(.scene-off) .hero { padding: 48px 0 12px; }
  .heroScene:not(.scene-off) .hero__row { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; gap: 8px; }
  .heroScene:not(.scene-off) .hero__ascii { order: -1; flex: 1 1 auto; min-height: 110px; justify-content: center; }
  .heroScene:not(.scene-off) .hero #brainhero { width: auto; height: 100%; max-height: min(230px, 60vw); }
  .heroScene:not(.scene-off) .hero__copy { flex: 0 0 auto; }
  .heroScene:not(.scene-off) .hero .hero__headline { font-size: min(50px, 6svh); margin-bottom: 16px; }
  /* at fractional svh-derived font sizes the 1.02em letter window leaks the
     top pixels of the roll-flip's duplicate glyph — 0.95em still shows the
     full glyph box (0.9 line-height, -0.05em half-leading) with no leak */
  .heroScene:not(.scene-off) .hero__headline .swl { height: 0.95em; }
  .heroScene:not(.scene-off) .hero__badge { margin-bottom: 12px; }
  .heroScene:not(.scene-off) .hero__sub { margin-bottom: 18px; }
  .heroScene:not(.scene-off) .hero__ctas { margin-bottom: 8px; }
  .heroScene:not(.scene-off) .hero__ctas .btn { height: min(52px, 7svh); }
  .heroScene.scene-off .hero { padding: 84px 0 24px; min-height: 100svh; height: auto; }

  /* ---------- featured marquee: slim strip ---------- */
  .marquee { padding: 12px 0; }
  .marquee__label { font-size: 7px; padding-bottom: 8px; }
  .marquee__set { gap: 18px; padding-right: 18px; font-size: 9px; }
  .marquee__pod img { height: 44px; }

  /* ---------- operating-system chat ---------- */
  .macwin { border-radius: 10px; }
  .macwin__body { padding: 16px 12px; }
  #difference .lead { font-size: 14px; }
  #difference .macwin__bar { padding: 10px 12px; }
  #difference .macwin__bar em { font-size: 12px; margin-left: 5px; }
  .demo__thread { gap: 10px; min-height: 684px; }
  .demo__meta { font-size: 12px; }
  .demo__bubble { max-width: 88%; padding: 10px 12px; font-size: 13px; }
  .demo__typing { padding: 11px 13px; }
  .demo__event {
    width: 96%; grid-template-columns: 26px minmax(0, 1fr);
    gap: 9px; padding: 10px;
  }
  .demo__number { width: 26px; height: 26px; font-size: 10px; }
  .demo__eventcopy strong { font-size: 12px; }
  .demo__eventcopy small { font-size: 12px; }
  .demo__event > em { grid-column: 2; font-size: 11px; margin-top: -4px; }
  .demo__tools { gap: 5px; margin-top: 7px; }
  .demo__tool { gap: 4px; padding: 4px 6px; font-size: 11px; }
  .demo__tool img { width: 14px; height: 14px; }
  .demo__replay { font-size: 11px; }

  /* ---------- what's inside: 2-col card bento ---------- */
  .cards { grid-template-columns: 1fr 1fr; gap: 10px; }
  .card { padding: 13px; border-radius: 10px; }
  .card h3 { font-size: 16px; line-height: 0.95; margin-bottom: 7px; }
  .card p {
    font-size: 10px; line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .card__viz { height: 40px; margin-bottom: 12px; }
  .card__viz--library b { font-size: 17px; }

  /* ---------- layers / modules ---------- */
  .layers { gap: 12px; }
  .layer { padding: 12px 14px 10px; border-radius: 10px; }
  .layer__name, .modlist .layer__name { font-size: 17px; }
  /* one size per line: the "/ context" suffix rides the display type at full
     size, keeping only its blue accent (two sizes on one line read broken) */
  .layer__name em { font-family: inherit; font-size: inherit; letter-spacing: 0; text-transform: none; margin-left: 2px; }
  .layer__body { font-size: 11px; }
  /* the longer sentences fold away so each tile reads in a glance */
  .layer__ext { display: none; }
  /* the open tile: words left two-thirds, the live visual in its own
     card on the right third (app.js moves .layers__viz inside it) */
  #layersList .layer.is-on, #bwmList .layer.is-on {
    display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(92px, 1fr);
    column-gap: 12px; align-items: start;
  }
  #layersList .layer.is-on .layer__num, #bwmList .layer.is-on .layer__num { grid-area: 1 / 1 / 2 / 2; }
  #layersList .layer.is-on .layer__name, #bwmList .layer.is-on .layer__name { grid-area: 2 / 1 / 3 / 2; }
  #layersList .layer.is-on .layer__body, #bwmList .layer.is-on .layer__body { grid-area: 3 / 1 / 4 / 2; }
  #layersList .layer.is-on .layer__bar, #bwmList .layer.is-on .layer__bar { grid-area: 4 / 1 / 5 / 3; }
  .layer .layers__viz {
    grid-area: 1 / 2 / 4 / 3; align-self: stretch;
    min-height: 116px; margin: 0; border-radius: 8px;
  }
  .layer .layers__vizlabel { display: none; }
  .layers__viz { min-height: 210px; border-radius: 10px; }
  .layers__close { margin: 24px auto 0; font-size: 11px; }
  .mod__outcomes li { font-size: 10.5px; }
  .mod__leave { font-size: 8px; }

  /* ---------- office hours ---------- */
  .office { gap: 16px; }
  .office__cardtop { font-size: 9px; padding: 10px 12px; }
  .office__cardbody { font-size: 10px; line-height: 1.7; padding: 12px; }

  /* ---------- testimonials: the desktop orbit, scaled to the phone ----------
     same design as the website — cards ride the rotating ring; the plain
     .quotes rail below only ever renders under reduced motion */
  .qorbit { height: 330px; }
  .qorbit .quote { width: 236px; }
  .qorbit .q-view { top: 18px; left: 18px; }
  .qorbit .q-view--compact { width: 200px; }
  .qorbit .q-view--compact blockquote p { font-size: 10px; line-height: 1.32; margin-bottom: 7px; }
  .qorbit .quote figcaption { gap: 8px; margin-top: 10px; }
  .qorbit .quote figcaption img { width: 26px; height: 26px; }
  .qorbit .quote figcaption b { font-size: 11px; }
  .qorbit .quote figcaption em { font-size: 8px; }
  .qorbit .quote.is-open { width: calc(100vw - 28px); }
  .qorbit .q-view--full { width: calc(100vw - 64px); grid-template-columns: 64px 1fr; column-gap: 12px; }
  .qorbit .q-view--full img { width: 64px; height: 64px; }
  .qorbit .q-view--full blockquote p { font-size: 10px; line-height: 1.32; margin-bottom: 7px; }
  .qorbit .q-who b { font-size: 11px; }
  .qorbit .q-who em { font-size: 8px; }
  /* interaction directions have no place on touch */
  .qorbit__hint { display: none; }

  .quotes {
    display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 2px 14px 4px; margin: 0 -14px; scrollbar-width: none;
    max-width: none;
  }
  .quotes::-webkit-scrollbar { display: none; }
  .quote { flex: 0 0 272px; scroll-snap-align: center; margin-bottom: 0; padding: 16px; border-radius: 10px; }
  .quote blockquote p { font-size: 13px; line-height: 1.4; margin-bottom: 8px; }
  .quote figcaption { gap: 8px; margin-top: 10px; }
  .quote figcaption img { width: 26px; height: 26px; }
  .quote figcaption b { font-size: 11px; }
  .quote figcaption em { font-size: 8px; }

  /* ---------- pricing: cards stack as full-width overlays ----------
     No scroll container. The old swipe rail (horizontal scroll-snap,
     100vw-wide cards, edge-bleed margins) made the page jump while
     scrolling through pricing and opened up pinch-zoom-out on iOS. */
  .tiers { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; }
  .tiers .tier { width: 100%; }
  .tier { padding: 16px; border-radius: 10px; }
  .tier__tag { font-size: 7.5px; margin-bottom: 10px; }
  .tier__name { font-size: 22px; margin-bottom: 8px; }
  .tier__price b, .tier--main .tier__price b { font-size: 26px; }
  .tier__price span { font-size: 7px; }
  .tier__seats { font-size: 11px; margin-bottom: 12px; }
  .tier__flash { padding: 8px 10px; margin-bottom: 12px; }
  .tier__flash b { font-size: 17px; }
  .tier__flash span { font-size: 7.5px; }
  .tier__lines { margin: 4px 0 12px; }
  .tier__linerow { font-size: 10px; }
  .dlist { margin-bottom: 14px; }
  .dlist li { font-size: 10px; padding: 4px 0 4px 14px; }
  .dlist li::before { font-size: 5px; top: 7px; }
  .dlist--roomy li { font-size: 11px; padding: 7px 0 7px 18px; }
  .dlist--roomy li::before { top: 9px; }
  .tier .btn { min-height: 44px; width: 100%; padding: 12px 8px; font-size: 10px; }
  .tier__sub { font-size: 7.5px; }
  .tier__for { padding: 10px 12px; margin: 2px 0 12px; }
  .tier__forlabel { font-size: 7px; }
  .tier__for p { font-size: 10.5px; }
  .tier__more { font-size: 9px; margin-bottom: 10px; }
  .tiers--compact .tier { padding: 14px; }
  .tiers--compact .tier__tag { margin-bottom: 8px; }
  .tiers--compact .tier__name { font-size: 20px; margin-bottom: 6px; }
  .tiers--compact .tier__price { margin-bottom: 8px; }
  .tiers--compact .tier__price b,
  .tiers--compact .tier--main .tier__price b { font-size: 24px; }
  .tiers--compact .tier__summary { min-height: 0; margin-bottom: 9px; font-size: 10px; line-height: 1.4; }
  .tiers--compact .dlist { margin-bottom: 10px; }
  .tiers--compact .dlist li { font-size: 9.5px; padding-top: 3px; padding-bottom: 3px; }
  .tiers--compact .dlist li::before { top: 6px; }
  .tiers--compact .tier .btn { min-height: 44px; }
  .tiers--compact .tier__sub { height: auto; margin-top: 7px; }
  /* ---------- seat stepper + ledger (index tier, #reserve checkout) ---------- */
  .seatbuy__stepper { gap: 12px; margin-bottom: 10px; }
  .seatbuy__btn, .tier .seatbuy__btn { width: 44px; height: 44px; border-radius: 7px; box-shadow: var(--px-shadow); }
  .seatbuy__count, .tier .seatbuy__count { font-size: 24px; min-width: 40px; }
  input.seatbuy__count, .tier input.seatbuy__count { width: 56px; }
  .seatbuy__chip { font-size: 9px; padding: 5px 10px; border-radius: 6px; }
  .seatbuy__label { font-size: 8px; margin-bottom: 8px; }
  .seatbuy__total { font-size: 10px; margin-bottom: 12px; }
  .ledger { border-radius: 8px; padding: 2px 12px; margin-bottom: 14px; }
  .ledger__row, .tier .ledger__row { font-size: 10px; padding: 8px 0; }
  .ledger__save b, .tier .ledger__save b { font-size: 15px; }

  /* ---------- checkout (self-paced #reserve) — wiring untouched ---------- */
  .checkout { gap: 24px; margin-top: 28px; }
  /* the long include-lists fold behind a view-more so the order card
     isn't buried under a wall of bullets */
  .checkout__sell:not(.is-open) .sell-ext { display: none; }
  .sellmore {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; margin: 12px 0 0; padding: 10px 12px; cursor: pointer;
    background: #fff; border: 1px solid var(--line); border-radius: 8px;
    box-shadow: var(--px-shadow);
    font-family: var(--mono); font-size: 9px; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink);
  }
  .sellmore:active { transform: translateY(1px); }
  .sellmore i { font-style: normal; color: var(--blue); }
  .checkout__order { padding: 18px 14px; border-radius: 12px; }
  .checkout__name { font-size: 20px; }
  .checkout__pitch { font-size: 12px; }
  .checkout__group { font-size: 8px; margin: 18px 0 4px; }
  .checkout__team { font-size: 11px; margin: 12px 0 12px; }
  .checkout__trust { font-size: 8px; }
  .checkout__error { font-size: 10px; }
  #reserve .checkout--compact { gap: 16px; margin-top: 22px; }
  #reserve .checkout--compact .checkout__sell { padding: 0; }
  #reserve .checkout__price { margin: 7px 0 10px; }
  #reserve .checkout__price b { font-size: 28px; }
  #reserve .checkout__price span { font-size: 7px; }
  #reserve .checkout--compact .checkout__pitch { font-size: 11px; line-height: 1.45; }
  #reserve .checkout--compact .dlist { margin-top: 10px; margin-bottom: 0; }
  #reserve .checkout--compact .checkout__order { padding: 14px; }
  #reserve .checkout--compact .seatbuy__stepper { margin-bottom: 7px; }
  #reserve .checkout--compact .seatbuy__total { margin-bottom: 10px; }
  #reserve .checkout--compact .btn { min-height: 44px; }
  #reserve .checkout--compact .checkout__trust { margin-top: 10px; padding-top: 9px; }

  /* ---------- price table: rows stay side-by-side, one line ---------- */
  .ptable { margin-top: 24px; border-radius: 10px; }
  .ptable__row { grid-template-columns: 1.2fr 0.6fr 0.85fr 0.95fr; gap: 6px; padding: 10px; font-size: 10px; }
  .ptable__row--head { font-size: 6.5px; }
  .ptable__row b, .plock { font-size: 14px; }
  .ptable__foot { font-size: 8px; line-height: 1.7; padding: 10px 12px; }

  /* ---------- steps timeline ---------- */
  .steps { gap: 26px; margin-top: 28px; }
  .steps .step { transform: none; } /* fade-only entrance: the 30px slide-in overflows a 390px viewport */
  .steps::before, .steps::after { left: 19px; }
  .step { grid-template-columns: 40px 1fr; gap: 14px; }
  .step__num { width: 40px; height: 40px; font-size: 22px; border-radius: 8px; }
  .step__t { font-size: 16px; margin-bottom: 4px; }
  .step__d { font-size: 11px; }

  /* ---------- skill cards ---------- */
  .skcards { gap: 10px; margin-top: 24px; }
  .skc { padding: 14px; border-radius: 10px; }
  .skc__cmd { font-size: 11px; padding: 8px 10px; margin-bottom: 10px; }
  .skc__out { font-size: 8px; }
  .skc h3 { font-size: 16px; }
  .skc p { font-size: 10.5px; }

  /* ---------- scope rows ---------- */
  .scoperows { gap: 8px; }
  .srow { padding: 12px 14px; gap: 10px; border-radius: 10px; }
  .srow__num { font-size: 8px; }
  .srow__body b { font-size: 16px; margin-bottom: 3px; }
  .srow__body span { font-size: 10.5px; }

  /* ---------- chat demo (direct line) ---------- */
  .dline { margin-top: 24px; }
  .dline .macwin__body { min-height: 240px; padding: 14px 12px; }
  .dline__meta { font-size: 7px; }
  .msg { font-size: 11px; padding: 9px 12px; max-width: 84%; }

  /* ---------- why-now deck: drake beside the words ---------- */
  .whystep { font-size: 21px; line-height: 1.05; }
  .whystep__sub { font-size: 11px; margin-top: 10px; }
  .whystep__cta { margin-top: 14px; }
  #drakeAscii { width: min(150px, 38vw); }
  .whysteps { min-height: 200px; }

  /* ---------- 3D list cube: smaller box, no hover directions ---------- */
  .cube3d { --cw: min(250px, calc(100vw - 110px)); --ch: 150px !important; }
  .cube3d__face { padding: 12px 14px; gap: 6px; }
  .cube3d__face i { font-size: 6.5px; }
  .cube3d__face b { font-size: 15px; }
  .cube3d__face span { font-size: 9.5px; }
  .cube3d__hint { display: none; }
  /* the fit-check follow link sits centred under the spinning box */
  .cube3d + .lead { text-align: center; margin-top: 22px !important; }

  /* ---------- FAQ terminal: the vertical deck, questions above the answer ----------
     same cycler as desktop, scaled down: the active question holds the middle
     slot, the previous one slides out the top, the next rises from the bottom;
     the up/down arrows ride the right-hand side of the deck */
  .cq { gap: 14px; margin-top: 22px; grid-template-columns: minmax(0, 1fr); }
  .cq__side {
    min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px; align-items: center;
  }
  .cq__viewport { height: 240px; }
  .cq__item { height: 48px; padding: 0 4px; grid-template-columns: 24px 1fr; gap: 6px; font-size: 11px; }
  .cq__idx { font-size: 7px; }
  .cq__arrows { flex-direction: column; gap: 8px; }
  .cq__arrow { width: 40px; height: 40px; border-radius: 8px; box-shadow: var(--px-shadow); }
  .cq__term .macwin__body { min-height: 230px; padding: 14px 12px; }
  .cq__row { grid-template-columns: 34px 1fr; margin-bottom: 12px; }
  .cq__label { font-size: 7px; }
  .cq__tq { font-size: 10px; }
  .cq__ta { font-size: 11px; line-height: 1.6; }

  /* ---------- wall of love ---------- */
  .wol__rows { gap: 10px; margin-top: 24px; }
  .wol__card { padding: 5px; border-radius: 8px; }
  .wol__card img { height: 64px; }
  .wol__row--rev .wol__card img { height: 56px; }
  .vidwall-card { width: 96px; }
  .vidwall-play { width: 28px; height: 28px; font-size: 10px; }
  .vidwall-cred { font-size: 7px; padding: 18px 6px 6px; }
  .vidwall-cred__pic { width: 18px; height: 18px; }

  /* ---------- members (proof wall): full viewport here too (64px matches
     mobile's scroll-margin-top clearance below the fixed nav) so #inside
     never peeks in; rows/text stay centred via the grid stretch */
  .members { display: grid; min-height: calc(100svh - 64px); padding: 40px 0; }
  .members__wall { gap: 12px; }
  .members__set { gap: 16px; padding-right: 16px; }
  .members__face { width: 52px; height: 52px; }
  .members__row:nth-child(2) { margin-left: -20px; }
  .members__row:nth-child(3) { margin-left: -36px; }
  .members__row:nth-child(4) { margin-left: -10px; }
  .members__over { padding: 0 16px; }
  .members__over .sec-head {
    text-align: center; margin: 0; max-width: 340px; padding: 32px 28px;
    background: #fff;
    -webkit-mask-image:
      linear-gradient(90deg, transparent, #000 30px, #000 calc(100% - 30px), transparent),
      linear-gradient(180deg, transparent, #000 30px, #000 calc(100% - 30px), transparent);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(90deg, transparent, #000 30px, #000 calc(100% - 30px), transparent),
      linear-gradient(180deg, transparent, #000 30px, #000 calc(100% - 30px), transparent);
    mask-composite: intersect;
  }
  .members__over .lead { margin-top: 10px; }

  /* ---------- guarantee: a proper panel with a circular seal ---------- */
  .guarantee {
    background: #fff; border: 1px solid var(--line); border-radius: 12px;
    padding: 28px 18px 24px; box-shadow: var(--px-shadow);
  }
  .guarantee__stamp { display: none; }
  .guarantee__seal { display: block; width: 104px; height: 104px; margin: 0 auto 20px; color: var(--blue); }
  .guarantee__seal svg { display: block; width: 100%; height: 100%; animation: sealspin 34s linear infinite; }
  @keyframes sealspin { to { transform: rotate(360deg); } }
  .guarantee__seal .guarantee__sealstar { animation: sealspin 34s linear infinite reverse; transform-origin: 60px 60px; }
  .guarantee h2 { font-size: 25px; line-height: 1; text-wrap: balance; margin-bottom: 16px; }
  .guarantee .prose { max-width: 300px; }
  .guarantee .prose p { font-size: 11.5px; line-height: 1.7; margin-bottom: 10px; }
  .guarantee .prose p:last-child { margin-bottom: 0; font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue); text-align: center; margin-top: 14px; }

  /* ---------- final CTA ---------- */
  .finalcta .lead { margin-top: 12px; }
  .finalcta .hero__ctas { margin-top: 20px; }

  /* ---------- thanks: team form ---------- */
  .teamform input { font-size: 12px; padding: 11px 12px; }
  .thanks-micro { font-size: 8px; }

  .bookwin__slack-choice span { min-height: 44px; }
  .bookwin__slack-email input { min-height: 44px; }

  /* ---------- footer: the blue sand band, scaled to the phone ---------- */
  .foot { padding: 48px 18px 150px; }
  .foot__inner { gap: 16px; }
  .foot__brand img { width: 170px; }
  .foot__nav { gap: 8px 16px; }
  .foot__nav a { font-size: 9px; }
  .foot__contact { font-size: 12px; line-height: 1.65; max-width: 300px; }
  .foot__legal { font-size: 8.5px; gap: 10px; }
  .foot__tag { font-size: 8.5px; }

  /* ---------- sticky bottom CTA bar ---------- */
  .ctabar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.88);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
    transform: translateY(110%); transition: transform 0.35s ease;
  }
  .ctabar.show { transform: none; }
  .ctabar__info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  .ctabar__info b { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; color: var(--ink); white-space: nowrap; }
  .ctabar__info span { font-family: var(--mono); font-size: 8px; letter-spacing: 0.05em; color: var(--blue); white-space: nowrap; }
  .ctabar .btn { margin-left: auto; min-height: 44px; padding: 0 16px; font-size: 10px; flex: 0 0 auto; border-radius: 9px; }

}

/* hero scene, very short phones (SE-class + landscape-ish heights):
   tighter still so the scene keeps running down to ~540px viewports */
@media (max-width: 760px) and (max-height: 690px) {
  .heroScene:not(.scene-off) .hero { padding: 48px 0 10px; }
  .heroScene:not(.scene-off) .hero .hero__headline { font-size: min(50px, 5.1svh); }
  .heroScene:not(.scene-off) .hero__sub { font-size: 11px; margin-bottom: 8px; }
  .heroScene:not(.scene-off) .hero__ctas .btn { height: min(52px, 6.5svh); }
  .heroScene:not(.scene-off) .hero__micro { display: none; }
}

/* Keep descenders visible on every section heading at mobile sizes. */
section h2 { line-height: 1.12 !important; overflow: visible; }

@media (max-width: 809px) {
  .plugin-install { min-height: 748px !important; padding: 0 !important; }
  .plugin-install__track { height: 360vh; }
  .plugin-install__sticky { min-height: 748px; }
  .plugin-install__strip { display: flex; grid-template-columns: none; gap: 30px; max-width: 520px; text-align: center; }
  .plugin-install__copy { width: min(520px, 100%); }
  .plugin-install__copy h2 { margin: 0 0 var(--space-5); font-size: 30px; }
  .plugin-install__copy p { font-size: 11px; line-height: 1.45; }
  .plugin-install__list { display: inline-block; text-align: left; gap: 8px; margin-top: 16px; font-size: 11px; }
  .plugin-install__computer { width: 180px; }
}