@media (max-width:768px) {
  .driver {
    height:auto !important;
  }
  .pin {
    position:relative !important;
    height:auto !important;
    overflow:visible !important;
    contain:none !important;
  }
  #blackPanel, #greenPanel {
    display:none !important;
  }
  #layer1, #layer2, #layer3, #layer4, #layer5, #layer6 {
    position:relative !important;
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    pointer-events:auto !important;
    will-change:auto !important;
    backface-visibility:visible !important;
    /* `contain:layout style paint` - Cash.app-style perf trick. Tells
       the browser each fold is its own layout/paint root, so scrolling
       past one doesn't re-paint others. ~30-40% scroll perf improvement
       on mid-range Android. */
    contain:layout style paint !important;
    /* `content-visibility:auto` - browser skips rendering off-screen
       folds entirely until they're scrolled into view. Pair with
       contain-intrinsic-size to reserve scroll space. */
    content-visibility:auto;
    contain-intrinsic-size:auto 100svh;
  }
  .layer {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    /* Tightened 25% from 100svh - folds size to content (or 75svh floor)
       so adjacent folds feel less padded out on mobile. */
    min-height:75svh;
    min-height:75vh;
    /* fallback for older browsers */
    padding:0;
  }
  /* Mobile marquee starts PAUSED. It only runs while the offers section
     is actually intersecting the viewport (driven by an IntersectionObserver
     in the inline script below - adds `.in-view` to the section). This
     stops the marquee from continuously animating a 50,000+px-wide track
     while the user is scrolled to a completely different fold, which
     was burning the GPU for no visible result. */
  #fold2OffersSection.in-view .fold2-offers-track {
    animation-play-state:running !important;
  }
  .fold2-offers-track {
    animation-play-state:paused !important;
  }
  #stage2 .f2-header, #stage2 .f2-steps .f2-step, #stage2 .f2-cta, #stage1 .grid>.title, #stage1 .grid>.phone, #stage1 .grid>.copy, #stage3 .grid>.darkTitle, #stage3 .grid>.stackWrap, #stage3 .grid>.copy, #fold2OffersContainer, #layer4 .fold2-offers-row.row-large, #layer4 .fold2-offers-row.row-small, #layer4 .fold2-view-all-container, #stage5 .grid>.darkTitle, #stage5 .grid>.phone, #stage5 .grid>.copy, .faq-fold-container .faq-title, .faq-fold-container .faq-list {
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    transition:none !important;
  }
  .fold2-offers-wrapper {
    transform:none !important;
    opacity:1 !important;
  }
  .stage {
    position:relative !important;
    left:auto !important;
    top:auto !important;
    width:100% !important;
    height:auto !important;
    transform:none !important;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .grid {
    position:relative !important;
    inset:auto !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    /* Padding + gap reduced ~25% (30-22, 18-14) per request to bring
       sections closer together vertically. */
    text-align:center;
    gap:14px;
    padding:22px 24px;
    width:100%;
    grid-template-columns:none !important;
    column-gap:0 !important;
    transform:none !important;
  }
  #stage3 .grid, #stage5 .grid {
    grid-template-columns:1fr !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    gap:14px;
  }
  #stage2 .fold2-inner {
    position:relative !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    padding:22px 24px !important;
    width:100% !important;
  }
  #stage2 .f2-header {
    margin-bottom:24px;
  }
  #stage2 .f2-header h1 {
    font-size:40px !important;
  }
  #stage2 .f2-header p {
    font-size:20px !important;
  }
  #stage2 .f2-steps {
    grid-template-columns:repeat(2, 1fr) !important;
    gap:18px;
    margin-bottom:24px;
  }
  #stage2 .f2-icon-wrap {
    width:70px;
    height:70px;
    border-radius:var(--earn-radius-card);
  }
  #stage2 .f2-icon {
    width:42px;
    height:42px;
  }
  #stage2 .f2-desc {
    font-size:12px;
    max-width:180px;
  }
  #stage2 .f2-email {
    width:auto;
    flex:1 1 0%;
    min-width:0;
  }
  #stage2 .f2-cta {
    flex-wrap:nowrap;
    max-width:380px;
  }
  .title {
    width:auto !important;
    font-size:44px !important;
    text-align:center;
  }
  .fold--green .title {
    margin-top:0 !important;
  }
  .darkTitle {
    width:auto !important;
    font-size:44px !important;
    text-align:center;
  }
  #stage3 .darkTitle {
    transform:none !important;
  }
  #stage3 .darkTitle .accent {
    white-space:normal !important;
  }
  #stage5 .darkTitle {
    white-space:normal !important;
  }
  .copy {
    width:auto !important;
    max-width:380px;
    text-align:center;
    font-size:16px !important;
  }
  .phone {
    transform:none !important;
  }
  .phoneDevice {
    height:440px !important;
  }
  #phone1Wrap {
    --pScale:1 !important;
    --pY:0px !important;
  }
  /* Stack wrap sized to FULLY contain the fanned cards.
     Card cN's bounding box at --ox=-110, --oy=-58 with a 240-150 card
     extends -230px to the left and -133px above the wrap center.
     A 360-280 wrap (180-140 half-extents) reserves room so the cards
     don't bleed into the title above. Plus 24px top + bottom padding
     in the grid keeps them visually clear. */
  .stackWrap {
    width:360px !important;
    height:280px !important;
    transform:none !important;
    perspective:800px;
    margin:8px auto;
    flex-shrink:0;
    overflow:visible;
    /* Mobile fan-in animation - the cards start in a tight stack and
       fan out when this wrap scrolls into view. Set by IntersectionObserver
       in the JS section below adding `.gc-mobile-fan` to the wrap.
       Cards transition between the stacked CSS vars and fanned CSS vars.*/
    --gc-fan-progress:0;
  }
  .card {
    width:240px !important;
    height:150px !important;
    /* Smooth transition between stacked state (progress=0) and fanned
       state (progress=1) - driven by JS toggling .gc-mobile-fan on the
       parent wrap, which sets --gc-fan-progress to 1. The cards CSS
       vars (--ox, --oy, etc.) are interpolated via calc(). */
    transition: transform 0.85s cubic-bezier(0.34, 1.36, 0.64, 1), opacity 0.4s ease;
  }
  /* Stacked initial state (all three on top of each other) */
  .stackWrap:not(.gc-mobile-fan) .card.cA, .stackWrap:not(.gc-mobile-fan) .card.cB, .stackWrap:not(.gc-mobile-fan) .card.cN {
    --ox:0px !important;
    --oy:0px !important;
    --rz:-3deg !important;
    --sc:1 !important;
  }
  .stackWrap:not(.gc-mobile-fan) .card.cA {
    --tz:48px !important;
  }
  .stackWrap:not(.gc-mobile-fan) .card.cB {
    --tz:24px !important;
  }
  .stackWrap:not(.gc-mobile-fan) .card.cN {
    --tz:0px !important;
  }
  /* Fanned state */
  .stackWrap.gc-mobile-fan .card.cA {
    --ox:0px !important;
    --oy:0px !important;
    --tz:48px !important;
    --rz:-3deg !important;
    --sc:1 !important;
    transition-delay:0.05s;
  }
  .stackWrap.gc-mobile-fan .card.cB {
    --ox:-58px !important;
    --oy:-30px !important;
    --tz:24px !important;
    --rz:-20deg !important;
    --sc:1 !important;
    transition-delay:0.15s;
  }
  .stackWrap.gc-mobile-fan .card.cN {
    --ox:-110px !important;
    --oy:-58px !important;
    --tz:0px !important;
    --rz:-38deg !important;
    --sc:1 !important;
    transition-delay:0.25s;
  }
  .card img {
    border-radius:0;
  }
  .email-entry {
    flex-wrap:nowrap;
    justify-content:center;
    gap:10px;
    width:100%;
    max-width:380px;
    margin-top:16px;
  }
  .email-input {
    width:100% !important;
    max-width:none !important;
    min-width:0;
    flex:1 1 0%;
    height:44px;
    font-size:15px !important;
  }
  .email-entry .earn-btn {
    padding:0 22px;
    flex-shrink:0;
  }
  .fold2-offers-row {
    padding:5px 0;
  }
  /* Inline min-heights on these rows are sized for desktop cards
     (356/232 px). Mobile cards are much smaller so the desktop reservation
     leaves a huge empty band inside each row. Override to fit mobile cards. */
  #fold2OffersRow1 {
    min-height:300px !important;
  }
  #fold2OffersRow2 {
    min-height:215px !important;
  }
  .faq-fold-container {
    max-width:100%;
  }
}
@media (max-width:480px) {
  /* Reduced ~25%: 22-16, 14-10 - keeps mobile content visually closer
     together per user request. */
  .grid {
    padding:16px 18px !important;
    gap:10px !important;
  }
  .title {
    font-size:36px !important;
  }
  .darkTitle {
    font-size:36px !important;
  }
  .phoneDevice {
    height:370px !important;
  }
  .stackWrap {
    width:320px !important;
    height:240px !important;
  }
  .card {
    width:210px !important;
    height:131px !important;
  }
  /* Re-define both stacked + fanned states at this breakpoint because
     CSS specificity requires us to repeat the cascade hooks here. */
  /* Symmetric fan: cA stays centered, cB fans left, cN fans right.
     Keeps the 1st card in the visual center and balances the spread. */
  .stackWrap.gc-mobile-fan .card.cA {
    --ox:0px !important;
    --oy:0px !important;
    --tz:42px !important;
    --rz:-3deg !important;
  }
  .stackWrap.gc-mobile-fan .card.cB {
    --ox:-42px !important;
    --oy:-12px !important;
    --tz:21px !important;
    --rz:-14deg !important;
  }
  .stackWrap.gc-mobile-fan .card.cN {
    --ox:42px !important;
    --oy:-12px !important;
    --tz:0px !important;
    --rz:14deg !important;
  }
  .email-input {
    max-width:none !important;
    height:44px !important;
    font-size:14px !important;
    padding:0 16px !important;
  }
  .email-entry .earn-btn {
    padding:0 18px !important;
  }
  #stage2 .f2-header h1 {
    font-size:32px !important;
  }
  #stage2 .f2-header p {
    font-size:18px !important;
  }
  #stage2 .f2-steps {
    gap:14px !important;
  }
  #stage2 .f2-icon-wrap {
    width:60px;
    height:60px;
    border-radius:var(--earn-radius-card);
  }
  #stage2 .f2-icon {
    width:36px;
    height:36px;
  }
  /* More vertical breathing room between the two offers rows on small
     phones - at 5px padding the rows visually crowd each other. */
  .fold2-offers-row {
    padding:10px 0 !important;
  }
  #fold2OffersRow1 {
    min-height:222px !important;
  }
  #fold2OffersRow2 {
    min-height:196px !important;
  }
  #layer4 .grid, #stage2 .fold2-inner {
    gap:24px !important;
  }
}
@media (max-width:375px) {
  .title {
    font-size:32px !important;
  }
  .darkTitle {
    font-size:32px !important;
  }
  .phoneDevice {
    height:320px !important;
  }
  .stackWrap {
    width:280px !important;
    height:220px !important;
  }
  .card {
    width:185px !important;
    height:115px !important;
  }
  .stackWrap.gc-mobile-fan .card.cA {
    --ox:0px !important;
    --oy:0px !important;
    --tz:36px !important;
    --rz:-3deg !important;
  }
  .stackWrap.gc-mobile-fan .card.cB {
    --ox:-36px !important;
    --oy:-10px !important;
    --tz:18px !important;
    --rz:-14deg !important;
  }
  .stackWrap.gc-mobile-fan .card.cN {
    --ox:36px !important;
    --oy:-10px !important;
    --tz:0px !important;
    --rz:14deg !important;
  }
  .card img {
    border-radius:0;
  }
  .faq-title {
    font-size:28px !important;
  }
}