/* =====================================================
   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 */
.tiersnav, .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; }

  .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;
  }
  .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; }

  /* ---------- macwin demo: 2×2 module grid ---------- */
  .macwin { border-radius: 10px; }
  .macwin__body { padding: 16px 12px; }
  .demo__prompt { font-size: 10px; padding: 12px; min-height: 0; }
  .demo__grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .demo__mod { padding: 10px; border-radius: 8px; }
  .demo__modhead b { font-size: 15px; }
  .demo__modhead span { font-size: 7px; }
  .demo__row { font-size: 8.5px; padding: 4px 0; }
  .chip { font-size: 7px; }
  .demo__result { font-size: 13px; min-height: 2.6em; margin-top: 14px; }
  .demo__label { font-size: 7.5px; margin-bottom: 10px; }

  /* ---------- 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: 13px; line-height: 1.4; margin-bottom: 8px; }
  .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: 12px; line-height: 1.45; margin-bottom: 8px; }
  .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: swipeable plan rail + condensed side plans ----------
     app.js adds .tiers--rail + the arrow nav when a page has 2+ plans
     (index); single-plan pages keep the plain stacked card */
  .tiersnav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; }
  .tiersnav__arrow {
    width: 44px; height: 40px; flex: 0 0 auto; cursor: pointer; font-size: 13px;
    background: #fff; border: 1px solid var(--line); border-radius: 8px;
    box-shadow: var(--px-shadow); color: var(--ink);
  }
  .tiersnav__arrow:active { transform: translateY(1px); }
  .tiersnav__label { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; text-align: center; }
  .tiersnav__label b {
    font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px;
  }
  .tiersnav__label i { font-style: normal; font-family: var(--mono); font-size: 8px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); }
  .tiers--rail {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    gap: 10px; margin: 0 -14px; padding: 2px 14px 6px; scrollbar-width: none;
  }
  .tiers--rail::-webkit-scrollbar { display: none; }
  .tiers--rail .tier { flex: 0 0 calc(100vw - 58px); scroll-snap-align: center; grid-column: auto; }
  .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; }
  /* build-with-me: testimonials sit close above the purchase card,
     and the card itself trims down */
  body[data-page="bwm"] #testimonials { min-height: 0; padding: 48px 0 26px; }
  body[data-page="bwm"] #pricing { min-height: 0; padding: 26px 0 48px; }
  body[data-page="bwm"] #pricing .sec-head { margin-bottom: 14px; }
  body[data-page="bwm"] #pricing .tier { padding: 14px; }
  body[data-page="bwm"] #pricing .tier__name { font-size: 20px; margin-bottom: 6px; }
  body[data-page="bwm"] #pricing .tier__price b { font-size: 22px; }
  body[data-page="bwm"] #pricing .dlist li { font-size: 9.5px; padding: 3px 0 3px 14px; }

  /* ---------- seat stepper + ledger (index tier, #reserve checkout) ---------- */
  .seatbuy__stepper { gap: 12px; margin-bottom: 10px; }
  .seatbuy__btn, .tier .seatbuy__btn { width: 34px; height: 34px; 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; }

  /* ---------- 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: 120px; }
  .vidwall-play { width: 34px; height: 34px; font-size: 11px; }
  .vidwall-cred { font-size: 8px; padding: 22px 8px 8px; }
  .vidwall-cred__pic { width: 18px; height: 18px; }

  /* ---------- 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; }

  /* ---------- 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; height: 38px; 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; }
}