/* Crode mobile layer — all max-width<=900px rules live here.
   Loaded after crode.css; edit mobile here without touching desktop. */

@media (max-width:768px){
  header a[aria-label="Crode home"],footer a[aria-label="Crode home"]{display:inline-flex;align-items:center;min-height:44px}
  footer a{display:inline-flex;align-items:center;min-height:40px}
  footer li{margin:0!important}
  #cat-tabs button,[data-cat]{min-height:40px}
  #vid-pause,button[aria-label="Pause film"]{width:44px!important;height:44px!important}
}

@media (max-width:800px){
  .end-scene{padding:96px 16px 16px}
  .es-cols{grid-template-columns:1fr 1fr}
  .es-cols>div{padding:32px 24px;border-right:0;border-bottom:1px solid rgba(255,255,255,.12)}
  .es-cols>div:nth-child(odd){border-right:1px solid rgba(255,255,255,.12)}
  .es-cols>div:last-child{grid-column:1/-1;border-right:0;border-bottom:0}
  .es-base{grid-template-columns:1fr}
  .es-logo{padding:36px 24px}
  .es-side{border-left:0;border-top:1px solid rgba(255,255,255,.12);padding:28px 24px}
  .es-foot a{min-height:40px;display:inline-flex;align-items:center}
  .es-foot ul{gap:2px}
}

@media (max-width:900px){.hx{flex-direction:column;height:auto}.hx-card,.hx-card.on{flex:none;background:#F5F5F7;cursor:default;padding:24px 24px 0}html body .hx-card .hx-d{opacity:1;max-height:none}.hx-mock{margin-right:-24px}html body .hx-t{font-size:20px!important}html body .hx-d{font-size:15px!important}}

@media (max-width:900px){html body.nd main .tpl-sec{padding:40px 16px 0!important}}

@media (max-width:900px){html body.nd main .qc,html body.nd main .sg{grid-template-columns:1fr}html body.nd main .tl{grid-template-columns:1fr 1fr;row-gap:28px}}

@media (max-width:900px){
html body.nd main .mc .mc-board{padding:18px!important;border-radius:24px!important}
html body.nd main .mc .mc-models{grid-template-columns:repeat(5,minmax(130px,1fr))!important;overflow-x:auto!important;scroll-snap-type:x mandatory}
html body.nd main .mc .mc-row{flex-wrap:wrap;row-gap:8px}
html body.nd main .mc .mc-label{width:100%!important}
html body.nd main .mc .mc-track{max-width:100%;overflow-x:auto;scrollbar-width:none}html body.nd main .mc .mc-track>.mc-pill{padding:8px 14px!important;white-space:nowrap}
html body.nd main .mc .mc-sum{flex-direction:column!important;align-items:flex-start!important;gap:14px}
}

@media (max-width:900px){html body.nd main .mc .mc-board.mc-board{padding:0!important}}

@media (max-width:900px){html body.nd main .sgt{grid-template-columns:1fr;gap:24px}}

@media (max-width:900px){
html body.nd main #pricing.pv{padding:48px 16px 0}
html body.nd main .pv-ctrl{margin:40px -16px 0;padding:28px 16px 0}
html body.nd main #pricing .price-group{margin:0 -16px!important;padding:20px 16px 48px;display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px!important}
html body.nd main #pricing .price-card{flex:0 0 84%;scroll-snap-align:start}
html body.nd main #pricing>p.text-center{margin:0 -16px!important;padding:0 16px 16px}
}

@media (max-width:900px){html body.nd main ul[aria-label="Every plan includes"]{flex-wrap:wrap!important;justify-content:flex-start!important;overflow:visible!important;padding:0 16px}html body.nd main ul[aria-label="Every plan includes"] li{white-space:normal!important}}

@media (max-width:900px){html body.nd main #compare>div.-mx-6{margin-left:-16px!important;margin-right:-16px!important;padding-left:16px!important;padding-right:16px!important}}

@media (max-width:900px){html body.nd main .tpl-sec{padding-top:40px!important}}

@media (max-width:900px){
html body.nd main #pricing>ul[aria-label="Every plan includes"]{margin:0 -16px!important;padding:8px 16px 16px!important}
html body.nd main #pricing>.pv-more{margin:0 -16px;padding:0 16px 48px}html body.nd main .pv-more-in{flex-direction:column;align-items:flex-start;padding:20px}
html body.nd main .tpl-sec>.bg-canvas{padding:28px 20px!important;border-radius:24px!important}
}

@media (max-width:900px){html body.nd main #pricing>.pv-inc{margin:0 -16px;padding:4px 16px 20px}}

@media (max-width:900px){html body.nd main .gk{grid-template-columns:1fr 1fr;gap:28px 20px}}

@media (max-width:520px){html body.nd main .gk{grid-template-columns:1fr}}

@media (max-width:700px){html body.nd main .ag-head,html body.nd main .ag-row{grid-template-columns:1fr 1fr}html body.nd main .ag-head>span:first-child,html body.nd main .ag-foot>span:not(.ag-c){display:none}html body.nd main .ag-row .ag-l{grid-column:1/-1;margin-bottom:8px;font-size:15px;color:var(--t3)}html body.nd main .ag-p{font-size:24px}}

@media (max-width:700px){html body.nd main .ag-head{column-gap:16px}html body.nd main .ag-p{font-size:20px!important}html body.nd main .ag-row{column-gap:16px}html body.nd main .ag-foot .btn-dark{white-space:nowrap}}

@media (max-width:900px){
html body.nd main .fg-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto;height:auto}
html body.nd main .fg-grid figure{aspect-ratio:4/5}
html body.nd main .fg-grid figure:first-child{grid-column:1/-1;grid-row:auto;aspect-ratio:4/5}
html body.nd main .fg-tabs .cat-tab{font-size:15px!important;padding:0 12px 12px!important}
html body.nd main .gk.gk3{grid-template-columns:1fr 1fr}
html body.nd main .sp-band{margin:32px -16px 0;padding:24px 16px}
html body.nd main .sp-grid{grid-template-columns:1fr}
}

@media (max-width:900px){html body.nd main .wg{grid-template-columns:1fr;gap:32px}html body.nd main .wg-l{position:static}html body.nd main .wg-list li{grid-template-columns:1fr;gap:6px;padding:18px 0}}

@media (max-width:900px){html body.nd main .m-swipe{margin-left:-16px!important;margin-right:-16px!important;padding-left:16px!important;padding-right:16px!important;max-width:none!important;width:auto!important}}

@media (max-width:900px){html body.nd main .dg3,html body.nd main .dg2{grid-template-columns:1fr}}

@media (max-width:900px){html body.nd main .ps{grid-template-columns:1fr 1.6fr}html body.nd main .ps-out>div{aspect-ratio:3/4}html body.nd main .dg6{grid-template-columns:repeat(2,1fr)}html body.nd main .sp-grid.sp-3{grid-template-columns:1fr}}

@media (max-width:900px){html body.nd main .kf{grid-template-columns:1fr 1fr;gap:20px}html body.nd main .rg-card{grid-template-columns:1fr;grid-template-areas:"k" "t" "d" "a";justify-items:start;padding:24px}html body.nd main .rg-t{font-size:19px}}

@media (max-width:900px){html body.nd main .rf{grid-template-columns:1fr;border-radius:24px}html body.nd main .rf-img{min-height:0;aspect-ratio:16/10}html body.nd main .rf-body{padding:24px}}

@media (max-width:760px){html body.nd main .sp-grid.sp-3{grid-template-columns:1fr}}

@media (max-width:900px){html body.nd main .sv-grid{grid-template-columns:1fr}html body.nd main :is(.soon-media,.ab-img){aspect-ratio:4/3;border-radius:22px}}

@media (max-width:640px){
.hx-row{white-space:normal;flex-wrap:wrap;border-radius:10px}
.hx-k{width:100%;flex:1 0 100%}
html body.nd main>article th,html body.nd main>article td{white-space:normal!important;padding:11px 12px!important}
html body.nd main>article .rg-toc a{min-height:36px;display:inline-flex;align-items:center}
}

@media (max-width:360px){
  /* Meta results: phone mock and stats must fit */
  #top .m2-phone{max-width:100%!important}
  #top .m2-stats{grid-template-columns:1fr!important}
  #top .m2-left,#top .m2-right,#top .m2-pane{min-width:0!important}
  #top .m2-pane{grid-template-columns:minmax(0,1fr)!important}
  /* Model picker row: let the pill track wrap and shrink */
  html body.nd main .mc .mc-row{flex-wrap:wrap!important;row-gap:10px}
  html body.nd main .mc .mc-track{flex-wrap:wrap!important;max-width:100%!important;border-radius:10px!important}
  html body.nd main .mc .mc-label{width:100%!important;flex:1 0 100%!important}
  /* Article sidebar: never a fixed 300px column */
  html body.nd main>article .rs-main{grid-template-columns:minmax(0,1fr)!important}
  html body.nd main>article .rs-aside,html body.nd main>article .rs-card{width:auto!important;max-width:100%!important;min-width:0!important}
}

/* ============ Mobile pass 2 (Oct 2026): feed gallery + type scale ============ */
@media (max-width:767px){
  /* Feed gallery: 3 categories only, 4 images, smaller blocks */
  #cat-tabs{overflow:visible!important;flex-wrap:wrap!important;gap:18px!important;margin-top:20px!important}
  #cat-tabs .cat-tab:nth-of-type(n+4){display:none!important}
  #cat-grid{gap:10px!important;margin-top:18px!important}
  #cat-grid>div:first-child{aspect-ratio:4/3!important}
  #cat-grid .grid-cols-2{gap:10px!important}
  #cat-grid .grid-cols-2>div{aspect-ratio:1/1!important}
  #cat-grid .grid-cols-2>div:nth-child(4){display:none!important}
  #cat-grid [class*="rounded-[24px]"]{border-radius:14px!important}

  /* Type scale: headings and body down a step */
  html body main .display{font-size:30px!important;line-height:1.1!important;letter-spacing:-.03em!important}
  html body main h1.display{font-size:34px!important}
  html body main p:not(.pr2-price):not(.sp-price):not(.m2-big):not(.pr2-amt){font-size:15px!important;line-height:1.55!important}
  html body main .text-lg,html body main .text-xl{font-size:15px!important;line-height:1.55!important}
  html body main .text-3xl{font-size:22px!important}
  html body main .text-2xl{font-size:19px!important}
  html body main h2:not(.display){font-size:20px!important;line-height:1.2!important}
  html body main h3{font-size:17px!important}

  /* No scroll traps on horizontal strips */
  #cat-tabs,#features .sv2 [role="tablist"]{overscroll-behavior-x:contain}
}

/* Feed gallery: 4 equal squares, 2x2, filling the width */
@media (max-width:767px){
  #cat-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}
  #cat-grid>div:first-child{aspect-ratio:1/1!important;border-radius:14px!important}
  #cat-grid .grid-cols-2{display:contents!important}
  #cat-grid .grid-cols-2>div{aspect-ratio:1/1!important;border-radius:14px!important}
  #cat-grid .grid-cols-2>div:nth-child(4){display:none!important}
}

/* Meta results: fit the ad and the numbers in one screen */
@media (max-width:767px){
  #top .m2-pane{grid-template-columns:132px minmax(0,1fr)!important;gap:14px!important;align-items:start!important}
  #top .m2-phone{max-width:132px!important;margin:0!important}
  #top .m2-adph{aspect-ratio:1/1!important}
  #top .m2-ph{padding:6px 8px!important}
  #top .m2-av{width:22px!important;height:22px!important;font-size:11px!important}
  #top .m2-hn b{font-size:12px!important}
  #top .m2-hn small{font-size:10px!important}
  #top .m2-cta{padding:7px 8px!important;font-size:11px!important}
  #top .m2-cta svg{width:12px!important;height:12px!important}
  #top .m2-dots{margin-top:8px!important}
  #top .m2-stats{grid-template-columns:1fr 1fr!important;gap:8px 10px!important}
  #top .m2-roas{grid-column:1 / -1!important}
  #top .m2-big{font-size:30px!important;line-height:1!important}
  #top .m2-k{font-size:11px!important}
  #top .m2-v{font-size:16px!important}
  #top .m2-s{font-size:11px!important;margin-top:4px!important}
  #top .m2-st{padding:6px 0!important}
}
@media (max-width:360px){
  #top .m2-pane{grid-template-columns:110px minmax(0,1fr)!important;gap:10px!important}
  #top .m2-phone{max-width:110px!important}
  #top .m2-big{font-size:26px!important}
  #top .m2-v{font-size:15px!important}
}
@media (max-width:767px){
  #top .m2-stats,#top .m2-stats>*,#top .m2-roas,#top .m2-roas>*{min-width:0!important;max-width:100%!important}
  #top .m2-roas{display:block!important}
  #top .m2-k,#top .m2-big,#top .m2-s,#top .m2-v{overflow-wrap:anywhere!important}
}
/* Meta results: one compact column of numbers beside the ad */
@media (max-width:767px){
  #top .m2-stats{display:flex!important;flex-direction:column!important;gap:0!important}
  #top .m2-roas{display:block!important;padding:0 0 8px!important;border-bottom:1px solid #E3E3E8!important;margin-bottom:6px!important}
  #top .m2-st{display:flex!important;align-items:baseline!important;justify-content:space-between!important;gap:8px!important;padding:5px 0!important;border:0!important}
  #top .m2-st .m2-k{margin:0!important;font-size:11.5px!important}
  #top .m2-st .m2-v{margin:0!important;font-size:14px!important;font-weight:600!important;white-space:nowrap!important}
  #top .m2-big{font-size:28px!important}
}

/* How it works mock: compact single-line rows that fit the frame */
@media (max-width:767px){
  html body.nd main .hx-card{padding:20px 18px 0!important;border-radius:18px!important}
  html body.nd main .hx-mock{margin-right:-18px!important;padding-top:16px!important}
  html body.nd main .hx-win{min-height:0!important;border-radius:12px 0 0 0!important}
  html body.nd main .hx-bar{padding:9px 12px!important}
  html body.nd main .hx-bar i{width:6px!important;height:6px!important}
  html body.nd main .hx-form{padding:0 0 12px 12px!important;gap:6px!important}
  html body.nd main .hx-row{display:flex!important;flex-wrap:nowrap!important;align-items:center!important;gap:6px!important;padding:6px 8px!important;border-radius:8px 0 0 8px!important;overflow:hidden!important}
  html body.nd main .hx-k{width:auto!important;flex:0 0 auto!important;min-width:62px!important;font-size:11px!important}
  html body.nd main .hx-chip{font-size:11px!important;padding:4px 8px!important;border-radius:5px!important;white-space:nowrap!important;flex:0 0 auto!important}
  html body.nd main .hx-tiles{padding:0 0 12px 12px!important;gap:6px!important}
  html body.nd main .hx-tiles figure{flex:0 0 82px!important;border-radius:8px!important}
  html body.nd main .hx-tiles figcaption{font-size:9px!important;padding:3px 6px!important;left:5px!important;bottom:5px!important}
  html body.nd main .hx-done{padding:0 0 12px 12px!important;gap:10px!important}
  html body.nd main .hx-done img{width:92px!important;border-radius:8px!important}
  html body.nd main .hx-list{gap:5px!important}
  html body.nd main .hx-li{font-size:11.5px!important}
}

/* ============ Mobile pass 3: mock rows, pricing cards, footer ============ */
@media (max-width:767px){
  /* How it works mock: one line per row, no wrapping */
  html body .hx-row{flex-wrap:nowrap!important;overflow:hidden!important;gap:6px!important;padding:6px 8px!important}
  html body .hx-k{width:auto!important;min-width:56px!important;flex:0 0 auto!important;font-size:11px!important}
  html body .hx-chip{font-size:11px!important;padding:4px 8px!important;flex:0 0 auto!important;white-space:nowrap!important}
  html body .hx-card{padding:18px 16px 0!important;border-radius:16px!important}
  html body .hx-h{font-size:18px!important}
  html body .hx-d,html body .hx-card p{font-size:13px!important;line-height:1.45!important}

  /* Home pricing cards: smaller image, price and text */
  html body .pr2-img{aspect-ratio:16/10!important;border-radius:12px!important}
  html body .pr2-card{padding:8px!important;border-radius:16px!important}
  html body .pr2-name{font-size:15px!important}
  html body .pr2-amt,html body .pr2-price .pr2-amt{font-size:30px!important}
  html body .pr2-from,html body .pr2-per{font-size:12px!important}
  html body .pr2-desc{font-size:13px!important}
  html body .pr2-list li{font-size:13px!important;line-height:1.4!important;gap:8px!important}
  html body .pr2-body{padding:12px 10px 10px!important;gap:8px!important}
  html body .pr2-btn{padding:11px 14px!important;font-size:13.5px!important}
  html body .pr2-save{font-size:11px!important;padding:3px 7px!important}

  /* Footer: short and quiet */
  html body footer.es-foot{border-radius:16px!important}
  html body .es-cols{grid-template-columns:1fr 1fr!important}
  html body .es-cols>div{padding:20px 16px!important;border-right:1px solid rgba(255,255,255,.12)!important;border-bottom:1px solid rgba(255,255,255,.12)!important}
  html body .es-cols>div:nth-child(2n){border-right:0!important}
  html body .es-cols>div:last-child{grid-column:1 / -1!important;border-bottom:0!important}
  html body .es-k{font-size:11px!important;margin:0 0 10px!important}
  html body .es-foot ul{gap:8px!important}
  html body .es-foot a{font-size:13px!important}
  html body .es-base{grid-template-columns:1fr!important}
  html body .es-logo{padding:18px 16px 6px!important}
  html body .es-mark{max-width:190px!important}
  html body .es-side{border-left:0!important;border-top:1px solid rgba(255,255,255,.12)!important;padding:16px!important}
  html body .es-small{font-size:12.5px!important;line-height:1.5!important}
  html body .es-legal{padding-top:14px!important;font-size:11.5px!important}
  html body .es-legal a{font-size:11.5px!important}

  /* Closing CTA: less empty space above the footer */
  html body .es-cta{padding-bottom:56px!important}
  html body .es-h{font-size:28px!important;line-height:1.08!important}
  html body .es-p{font-size:14px!important;margin-top:14px!important}
  html body .es-btns{margin-top:20px!important;gap:8px!important}
  html body .es-btn{padding:11px 16px!important;font-size:13.5px!important}
}

/* Tighter vertical rhythm on phones: the page was far too long */
@media (max-width:767px){
  html body .tpl-sec{padding-top:40px!important;padding-bottom:40px!important}
  html body main [class*="py-16"],html body main [class*="py-20"],html body main [class*="py-24"],html body main [class*="py-28"]{padding-top:36px!important;padding-bottom:36px!important}
  html body main [class*="pt-16"],html body main [class*="pt-20"],html body main [class*="pt-24"],html body main [class*="pt-28"]{padding-top:32px!important}
  html body main [class*="pb-16"],html body main [class*="pb-20"],html body main [class*="pb-24"],html body main [class*="pb-28"]{padding-bottom:32px!important}
  html body main .mt-20,html body main .mt-24,html body main .mt-28{margin-top:28px!important}
  html body main .mt-16{margin-top:24px!important}
  html body main .mt-14,html body main .mt-12{margin-top:20px!important}
  html body main .mt-10{margin-top:18px!important}
  html body main .pt-14,html body main .pt-16,html body main .pt-20{padding-top:28px!important}
  html body .es-cols>div:last-child{padding-bottom:16px!important}
}

/* ============ Mobile pass 4: FAQ, footer, numbers, Meta ============ */
@media (max-width:767px){
  /* FAQ: keep the three questions that matter */
  html body #faq .faq-item:nth-of-type(n+4){display:none!important}

  /* Numbers: three side by side */
  html body #numbers>div{display:grid!important;grid-template-columns:repeat(3,1fr)!important;
    padding:14px 10px!important;border-radius:16px!important;gap:0!important;
    border-width:1px!important;divide-y:0!important}
  html body #numbers>div>div{padding:4px 6px!important;border-top:0!important;border-bottom:0!important;
    border-right:1px solid #E3E3E8!important;text-align:center!important}
  html body #numbers>div>div:last-child{border-right:0!important}
  html body #numbers .display{font-size:24px!important;line-height:1.05!important}
  html body #numbers p.mt-3{margin-top:5px!important;font-size:11px!important;line-height:1.3!important}

  /* Meta: numbers that fit, thinner phone frame */
  html body .m2-phone{border-radius:18px!important;padding:4px!important;box-shadow:none!important}
  html body .m2-scr{border-radius:14px!important;padding-top:0!important}
  html body .m2-big{font-size:22px!important;line-height:1.05!important;letter-spacing:-.02em!important}
  html body .m2-roas{padding:10px!important;border-radius:10px!important}
  html body .m2-s{font-size:10.5px!important;line-height:1.35!important}
  html body .m2-adph{aspect-ratio:1/1!important;padding:0!important}
  html body .m2-adph img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important}

  /* Footer: logo, three links and the email */
  html body .es-cols{display:block!important}
  html body .es-cols>div{display:none!important}
  html body .es-cols>div:last-child{display:block!important;padding:16px!important;border:0!important}
  html body .es-cols>div:last-child ul li:nth-child(n+4){display:none!important}
  html body .es-base{grid-template-columns:1fr!important}
  html body .es-logo{padding:14px 16px 4px!important}
  html body .es-mark{max-width:140px!important}
  html body .es-side{border-left:0!important;border-top:1px solid rgba(255,255,255,.12)!important;padding:12px 16px 16px!important}
  html body .es-small{display:none!important}
  html body .es-legal{padding-top:0!important;margin-top:0!important;font-size:11px!important}
}

/* ============ Mobile pass 5: how it works swipe, footer, Meta numbers ============ */
@media (max-width:767px){
  /* How it works: side by side, swipe instead of a tall stack */
  html body .hx{flex-direction:row!important;height:auto!important;gap:10px!important;margin-top:22px!important;
    overflow-x:auto!important;scroll-snap-type:x mandatory!important;scrollbar-width:none!important;
    margin-left:-16px!important;margin-right:-16px!important;padding:0 16px 4px!important}
  html body .hx::-webkit-scrollbar{display:none}
  html body .hx-card,html body .hx-card.on{flex:0 0 84%!important;scroll-snap-align:start!important;
    padding:16px 14px 0!important;border-radius:16px!important}
  html body .hx-mock{margin-right:-14px!important}

  /* Meta: numbers on one line, flat rows */
  html body .m2-big{font-size:19px!important;white-space:nowrap!important;letter-spacing:-.02em!important}
  html body .m2-roas{padding:9px 10px!important;border-radius:10px!important}
  html body .m2-roas .m2-k{font-size:11px!important}
  html body .m2-s{font-size:10px!important;line-height:1.3!important}
  html body .m2-st{background:transparent!important;border-radius:0!important;
    border-bottom:1px solid #E8E8ED!important;padding:6px 2px!important}
  html body .m2-stats>.m2-st:last-child{border-bottom:0!important}

  /* Footer: three page links and the email, nothing else */
  html body .es-cols{display:flex!important;flex-wrap:wrap!important;gap:0!important;padding:14px 16px 6px!important}
  html body .es-cols>div{display:none!important;padding:0!important;border:0!important}
  html body .es-cols>div:nth-child(2),html body .es-cols>div:nth-child(3){display:block!important;width:100%!important}
  html body .es-cols>div:nth-child(2) ul li:nth-child(n+4){display:none!important}
  html body .es-cols>div:nth-child(3) ul li:nth-child(-n+2){display:none!important}
  html body .es-cols .es-k{display:none!important}
  html body .es-foot ul{display:flex!important;flex-wrap:wrap!important;gap:8px 18px!important}
  html body .es-foot a{font-size:13px!important}
  html body .es-base{grid-template-columns:1fr!important;border-top:1px solid rgba(255,255,255,.12)!important}
  html body .es-logo{padding:12px 16px 2px!important}
  html body .es-mark{max-width:110px!important}
  html body .es-side{border-left:0!important;border-top:0!important;padding:4px 16px 14px!important}
  html body .es-legal{padding-top:0!important;display:flex!important;gap:10px!important;font-size:11px!important}
}

/* Beat the page-level #top rules */
@media (max-width:767px){
  html body main#top .m2-big{font-size:19px!important;line-height:1.1!important;white-space:nowrap!important}
  html body main#top .m2-k{font-size:11px!important}
  html body main#top .m2-v{font-size:14px!important}
  html body main#top .m2-s{font-size:10px!important}
  /* Swipe row without full-bleed negative margins */
  html body .hx{margin-left:0!important;margin-right:0!important;padding:0 0 4px!important}
  html body .hx-card,html body .hx-card.on{flex:0 0 90%!important}
}

/* ============ Mobile pass 6: Meta box, footer base, numbers, gutters ============ */
@media (max-width:767px){
  /* Meta: the highlight box reads number first */
  html body main#top .m2-roas{display:block!important;padding:11px 12px!important;border-radius:10px!important}
  html body main#top .m2-roas .m2-k{font-size:10.5px!important;margin:0!important;line-height:1.3!important;opacity:.8}
  html body main#top .m2-big{font-size:26px!important;line-height:1.1!important;margin:3px 0 5px!important;white-space:nowrap!important}
  html body main#top .m2-s{font-size:10px!important;line-height:1.35!important;margin:0!important}

  /* Numbers: aligned tops, quiet labels */
  html body #numbers>div>div{padding:2px 8px!important;display:flex!important;flex-direction:column!important;
    align-items:center!important;justify-content:flex-start!important}
  html body #numbers .display{font-size:22px!important;margin:0!important}
  html body #numbers p.mt-3{margin-top:4px!important;font-size:10.5px!important;line-height:1.25!important;
    text-wrap:balance!important;max-width:11ch!important}

  /* Footer: one clean row of links, tidy base */
  html body .es-cols{display:flex!important;flex-wrap:wrap!important;align-items:baseline!important;
    gap:6px 16px!important;padding:14px 16px 12px!important}
  html body .es-cols>div:nth-child(2),html body .es-cols>div:nth-child(3){display:contents!important}
  html body .es-foot ul{display:contents!important}
  html body .es-foot li{list-style:none!important;margin:0!important}
  html body .es-side .es-k,html body .es-small{display:none!important}
  html body .es-logo{padding:10px 16px 0!important}
  html body .es-mark{max-width:100px!important}
  html body .es-side{padding:6px 16px 14px!important;border-left:0!important;border-top:0!important}
  html body .es-legal{display:flex!important;align-items:baseline!important;gap:12px!important;
    padding-top:0!important;margin-top:0!important;font-size:11px!important}
  html body .es-legal p{margin:0!important}

  /* One gutter for the whole page */
  html body main#top>section,html body main>section,html body .tpl-sec{padding-left:16px!important;padding-right:16px!important}
  html body main .px-6,html body main .px-4,html body main .px-5{padding-left:16px!important;padding-right:16px!important}
}
@media (max-width:767px){
  /* testimonials row: full bleed matched to the 16px gutter */
  html body main#top .tst-row{margin-left:-16px!important;margin-right:-16px!important;
    padding-left:16px!important;padding-right:16px!important;scroll-padding-left:16px!important;gap:10px!important}
}

/* ============ Mobile pass 7: how it works intro, pricing note ============ */
@media (max-width:767px){
  /* "Tell us about your brand once" intro out, one CTA under the cards */
  html body #how-it-works{display:flex!important;flex-direction:column!important}
  html body #how-it-works .hx{order:1!important;margin-top:0!important}
  html body #how-it-works .hiw-head{order:2!important;margin-top:16px!important}
  html body #how-it-works .hiw-side>p{display:none!important}
  html body #how-it-works .hiw-side>div{margin-top:0!important}
  html body #how-it-works .hiw-side>div a:nth-of-type(2){display:none!important}
  html body #how-it-works .hiw-side>div a{width:100%!important;justify-content:center!important;
    border-radius:6px!important;padding:13px 18px!important;font-size:14px!important}

  /* "Already paying a freelancer or agency?" block out */
  html body .pr-note{display:none!important}
}

/* ============ Mobile pass 8: one vertical rhythm ============ */
@media (max-width:767px){
  html body main#top>section,html body main#top>div.anchor{
    padding-top:40px!important;padding-bottom:0!important;margin-top:0!important;margin-bottom:0!important}
  html body main#top>section.hz{padding-top:0!important;margin-top:-64px!important;padding-bottom:0!important}
  html body main#top>section:last-of-type{padding-bottom:40px!important}
  html body main>section,html body main>div.anchor{margin-top:0!important;margin-bottom:0!important}
  html body main>section:not(.hz){padding-top:40px!important;padding-bottom:0!important}
  html body main>section:last-of-type{padding-bottom:40px!important}
  html body .tpl-sec{padding-top:40px!important;padding-bottom:0!important}
  html body main .tpl-sec:last-of-type{padding-bottom:40px!important}
}
@media (max-width:767px){
  html body main#top>section#pricing,html body main#top>section#numbers,
  html body main#top>section#features,html body main#top>section#results,
  html body main#top>section#how-it-works,html body main#top>section#testimonials,
  html body main#top>section#faq,html body main#top>section.why-s{
    padding-top:40px!important;padding-bottom:0!important;margin-top:0!important;margin-bottom:0!important}
  html body main#top>section#faq{padding-bottom:40px!important}
}
@media (max-width:767px){
  html body main#top>#features{padding-top:40px!important;padding-bottom:0!important}
  html body main#top>section:nth-of-type(2){padding-top:40px!important}
}
@media (max-width:767px){
  /* subpages: same 40px rhythm as the home page */
  html body.nd main .tpl-sec.tpl-sec.tpl-sec,
  html body.nd main>section.tpl-sec,
  html body.nd main>section{padding-top:40px!important;padding-bottom:0!important}
  html body.nd main>section:last-of-type,
  html body.nd main .tpl-sec.tpl-sec.tpl-sec:last-of-type{padding-bottom:40px!important}
  html body main#top>section:nth-of-type(2){padding-top:40px!important}
  html body.nd main>article{padding-top:28px!important}
}
@media (max-width:767px){
  html body.nd main .tpl-sec.tpl-pt72,html body.nd main .tpl-sec.tpl-pt56,
  html body.nd main .tpl-sec.tpl-pt48,html body.nd main .tpl-sec.tpl-pt24{padding-top:40px!important}
}
@media (max-width:767px){
  html body main#top>section.why-s{padding-top:40px!important}
}
@media (max-width:767px){
  html body main#top section.why-s.why-s.why-s{padding-top:40px!important}
}

/* ============ Mobile pass 9: pricing page ============ */
@media (max-width:767px){
  /* FAQ: three questions on every page, not just the home page */
  html body main .faq-item:nth-of-type(n+4){display:none!important}

  /* Plan cards: smaller image, price and text */
  html body .price-card{padding:8px!important;border-radius:16px!important}
  html body .price-card>div:first-child{aspect-ratio:16/10!important;border-radius:12px!important}
  html body .price-card h3{font-size:18px!important}
  html body .price-card .text-5xl{font-size:30px!important}
  html body .price-card ul{margin-top:14px!important;gap:8px!important}
  html body .price-card ul li{font-size:13px!important;line-height:1.4!important;gap:8px!important}
  html body .price-card p.mt-2{margin-top:6px!important;min-height:0!important;font-size:13px!important}
  html body .price-card p.mt-6{margin-top:12px!important}
  html body .price-card a.mt-6{margin-top:12px!important;padding:11px 14px!important;font-size:13.5px!important;border-radius:6px!important}
  html body .price-card p.mt-7,html body .price-card ul.mt-7{margin-top:12px!important}
  html body .price-card>div:last-child{padding:12px 10px 10px!important}

  /* A touch of green instead of all that grey */
  html body .pv-inc{background:#F5FFE6!important;border-color:rgba(2,46,19,.12)!important}
  html body .gk>div:first-child{border-top-color:#94D04A!important}
}
@media (max-width:767px){
  html body.nd main .price-card{padding:8px!important;border-radius:16px!important}
  html body.nd main .price-card>div:first-child{aspect-ratio:16/10!important;border-radius:12px!important}
  html body.nd main .price-card h3{font-size:18px!important;line-height:1.2!important}
  html body.nd main .price-card .text-5xl{font-size:30px!important}
  html body.nd main .price-card p.mt-2{margin-top:6px!important;min-height:0!important;font-size:13px!important}
  html body.nd main .price-card p.mt-6{margin-top:12px!important;font-size:13px!important}
  html body.nd main .price-card a.mt-6{margin-top:12px!important;padding:11px 14px!important;font-size:13.5px!important;border-radius:6px!important}
  html body.nd main .price-card ul.mt-7{margin-top:12px!important;gap:8px!important}
  html body.nd main .price-card ul li{font-size:13px!important;line-height:1.4!important;gap:8px!important}
  html body.nd main .price-card p.mt-7{margin-top:12px!important;font-size:12.5px!important;padding:9px 12px!important}
  html body.nd main .price-card>div:last-child{padding:12px 10px 10px!important}
}
@media (max-width:767px){
  html body.nd main #pricing .price-card h3{font-size:18px!important;line-height:1.2!important}
  html body.nd main #pricing .price-card .text-5xl{font-size:30px!important}
  html body.nd main #pricing .price-card p.mt-2{margin-top:6px!important;min-height:0!important;font-size:13px!important}
  html body.nd main #pricing .price-card ul li{font-size:13px!important;line-height:1.4!important}
  html body.nd main #pricing .price-card ul.mt-7{margin-top:12px!important;gap:8px!important}
  html body.nd main #pricing .price-card a.mt-6{margin-top:12px!important;padding:11px 14px!important;font-size:13.5px!important}
  html body.nd main #pricing .price-card p.mt-7{margin-top:12px!important;font-size:12.5px!important;padding:9px 12px!important}
  html body.nd main #pricing .price-card>div:last-child{padding:12px 10px 10px!important}
}

/* ============ Mobile pass 10: pricing top, cards, long sections ============ */
@media (max-width:767px){
  /* Top: one tidy control row, no swipe hint */
  html body.nd main #pricing p.md\:hidden{display:none!important}
  html body.nd main #pricing .pv-ctrl{gap:8px!important;padding:0!important;background:transparent!important;
    border:0!important;margin-top:18px!important}
  html body.nd main #pricing .price-tab{font-size:13px!important;padding:9px 14px!important}
  html body.nd main #pricing .bill-tab{font-size:12px!important;padding:8px 12px!important}
  html body.nd main #pricing h1.display{font-size:30px!important}
  html body.nd main #pricing>div>p,html body.nd main #pricing .pv-lead{font-size:14px!important;line-height:1.5!important}

  /* Price card: shorter cover, one price line */
  html body.nd main #pricing .price-card>div:first-child{aspect-ratio:16/7!important}
  html body.nd main #pricing .price-card p.mt-6{display:flex!important;align-items:baseline!important;
    flex-wrap:wrap!important;gap:4px 8px!important;margin-top:10px!important}
  html body.nd main #pricing .price-card .orig{margin-left:0!important}
  html body.nd main #pricing .price-card .per{font-size:12px!important}

  /* Long, low value blocks out of the way on a phone */
  html body.nd main #compare{display:none!important}
  html body.nd main>section.tpl-sec:nth-of-type(2){display:none!important}
}

/* ============ Mobile pass 11: one inset for every block on pricing ============ */
@media (max-width:767px){
  html body.nd main #pricing>.pv-ctrl{margin:18px 0 0!important;padding:0!important;background:transparent!important;border:0!important}
  html body.nd main #pricing>.price-group{margin:18px -16px 0!important;padding:0 16px 8px!important}
  html body.nd main #pricing>.pv-inc{margin:18px 0 0!important;padding:12px 14px!important;border-radius:10px!important;
    font-size:13px!important;line-height:1.5!important}
  html body.nd main #pricing>.pv-more{margin:14px 0 0!important;padding:0!important}
  html body.nd main #pricing .pv-more-in{padding:14px!important;border-radius:12px!important}
  html body.nd main #pricing .pv-more-in p{font-size:13px!important;line-height:1.5!important}
  html body.nd main #pricing .pv-head{margin-bottom:0!important}
}
@media (max-width:767px){
  html body.nd main #pricing>.price-group{scroll-padding-left:16px!important;scroll-padding-right:16px!important}
}
@media (max-width:767px){
  /* plan band: inset like every other block, not edge to edge */
  html body.nd main .sp-band{margin-left:0!important;margin-right:0!important;padding:14px 0 14px 14px!important;
    border-radius:14px!important;background:#F5FFE6!important}
  html body.nd main .sp-band .sp-grid{padding-right:14px!important}
  html body.nd main .sp-band .sp-inc{padding-right:14px!important;margin-top:12px!important;font-size:12.5px!important;line-height:1.5!important}
}
@media (max-width:767px){
  /* cards sit on the page, no edge to edge grey band behind them */
  html body.nd main #pricing>.price-group{background:transparent!important}
}

/* ============ Mobile pass 12: billing switch under the cards ============ */
@media (max-width:767px){
  html body.nd main #pricing{display:flex!important;flex-direction:column!important}
  html body.nd main #pricing>.pv-head{order:1!important}
  html body.nd main #pricing>.pv-ctrl{display:contents!important}
  html body.nd main #pricing #price-tabs{order:2!important;margin:18px 0 0!important;align-self:flex-start!important}
  html body.nd main #pricing>.price-group{order:3!important;margin:16px -16px 0!important}
  html body.nd main #pricing #bill-tabs{order:4!important;margin:14px 0 0!important;align-self:flex-start!important}
  html body.nd main #pricing>.pv-inc{order:5!important;margin:16px 0 0!important}
  html body.nd main #pricing>.pv-more{order:6!important;margin:14px 0 0!important}
}
@media (max-width:767px){
  /* Need more: text and button side by side */
  html body.nd main #pricing .pv-more-in{flex-direction:row!important;align-items:center!important;
    justify-content:space-between!important;gap:12px!important;padding:12px 14px!important}
  html body.nd main #pricing .pv-more-in p{flex:1 1 auto!important;min-width:0!important;font-size:12.5px!important;line-height:1.45!important}
  html body.nd main #pricing .pv-more-in a{flex:0 0 auto!important;white-space:nowrap!important;
    padding:10px 14px!important;font-size:13px!important;border-radius:6px!important}
}

/* Pricing hero: CTA above the supporting line */
@media (max-width:767px){
  html body.nd main #pricing .pv-head>div{display:flex!important;flex-direction:column!important}
  html body.nd main #pricing .pv-head h1{order:1!important}
  html body.nd main #pricing .pv-head>div>div{order:2!important;margin-top:18px!important}
  html body.nd main #pricing .pv-head p.lead{order:3!important;margin-top:16px!important}
}

/* ============ Mobile pass 13: subpages audit fixes ============ */
@media (max-width:1023px){
  /* Article was stuck in a two column grid: the text column collapsed to 26px */
  html body.nd main>article .rs-main,
  html body.nd main>article .rs-main.rs-main{grid-template-columns:minmax(0,1fr)!important;gap:28px!important}
  html body.nd main>article .rs-aside,html body.nd main>article .rs-card{width:auto!important;max-width:100%!important;min-width:0!important}
  html body.nd main>article .rs-aside .sticky{position:static!important}
}
@media (max-width:767px){
  /* Legal pages: same 16px gutter as everywhere else */
  html body .legal{padding-left:0!important;padding-right:0!important}
  html body main .legal h2{font-size:18px!important;margin-top:22px!important}
  html body main .legal p,html body main .legal li{font-size:14.5px!important;line-height:1.6!important}

  /* Service plan cards: same compact treatment as the pricing cards */
  html body.nd main .sp-card{border-radius:14px!important}
  html body.nd main .sp-card .sp-img{aspect-ratio:16/7!important;border-radius:10px!important}
  html body.nd main .sp-card .sp-name{font-size:15px!important}
  html body.nd main .sp-card .sp-body{padding:12px 12px 12px!important}
  html body.nd main .sp-card .sp-amt{font-size:26px!important}
  html body.nd main .sp-card .sp-per{font-size:12px!important}
  html body.nd main .sp-card .sp-desc{font-size:13px!important;margin-top:4px!important}
  html body.nd main .sp-card ul{margin-top:10px!important;gap:6px!important}
  html body.nd main .sp-card li{font-size:12.5px!important;line-height:1.4!important}
  html body.nd main .sp-card .sp-btn{margin-top:12px!important;padding:10px 14px!important;font-size:13px!important;border-radius:6px!important}

  /* Category tabs: three on a phone, so the strip no longer scrolls sideways */
  html body.nd main .fg-tabs{overflow-x:visible!important;flex-wrap:wrap!important}
  html body.nd main .fg-tabs .cat-tab:nth-of-type(n+4){display:none!important}

  /* Every horizontal strip keeps its scrolling to itself */
  html body main [style*="overflow-x"],html body main .m-swipe,html body main .hx,
  html body main .tst-row,html body main .mc-models,html body main .sp-grid,
  html body main .price-group,html body main .dg,html body main .fg-grid{overscroll-behavior-x:contain!important}
}
@media (max-width:767px){
  html body main.max-w-\[760px\]{padding-left:16px!important;padding-right:16px!important}
  html body article.legal{padding-left:0!important;padding-right:0!important}
}
@media (max-width:767px){
  /* legal pages: single 16px gutter, not 16 + 16 */
  html body main article.legal.legal.legal{padding-left:0!important;padding-right:0!important}
  /* home pricing cards: the page level #top rules need matching specificity */
  html body main#top .pr2-amt{font-size:30px!important}
  html body main#top .pr2-img{aspect-ratio:16/9!important}
  html body main#top .pr2-list li{font-size:13px!important;line-height:1.4!important}
  html body main#top .pr2-desc{font-size:13px!important}
  html body main#top .pr2-name{font-size:15px!important}
  html body main#top .pr2-from,html body main#top .pr2-per{font-size:12px!important}
  html body main#top .pr2-body{padding:12px 10px 10px!important;gap:8px!important}
  html body main#top .pr2-btn{padding:11px 14px!important;font-size:13.5px!important}
}

/* ============ Mobile pass 14: galleries, section order ============ */
@media (max-width:767px){
  /* Feed gallery: 4 equal squares, same as the home page */
  html body.nd main .fg-grid{grid-template-columns:1fr 1fr!important;gap:8px!important}
  html body.nd main .fg-grid figure{aspect-ratio:1/1!important;border-radius:14px!important;overflow:hidden!important}
  html body.nd main .fg-grid figure:first-child{grid-column:auto!important;grid-row:auto!important}
  html body.nd main .fg-grid figure:nth-child(n+5){display:none!important}
  html body.nd main .fg-grid figure img{width:100%!important;height:100%!important;object-fit:cover!important}

  /* Design gallery: drop the story and the extra campaign tile */
  html body.nd main .dg.dg3 figure:nth-of-type(n+3){display:none!important}

  /* How it works comes right after the hero on every service page */
  html body.nd main{display:flex!important;flex-direction:column!important}
  html body.nd main>section,html body.nd main>article,html body.nd main>div{order:5!important}
  html body.nd main>section:nth-of-type(1){order:1!important}
  html body.nd main>section:nth-of-type(2){order:2!important}
  html body.nd main>section:has(.tl){order:3!important}
}

/* ============ Mobile pass 15: scene tabs, smaller category tiles ============ */
@media (max-width:767px){
  /* Product photography scenes: Lifestyle, Editorial, Seasonal */
  html body.nd main .fg-tabs .cat-tab{display:none!important}
  html body.nd main .fg-tabs .cat-tab[data-fg="1"],
  html body.nd main .fg-tabs .cat-tab[data-fg="2"],
  html body.nd main .fg-tabs .cat-tab[data-fg="5"]{display:inline-flex!important}
  /* if Studio is the active panel, show Lifestyle instead (panels fade, they do not toggle display) */
  html body.nd main .ps-img[data-fg="0"].on{opacity:0!important;z-index:0!important;pointer-events:none!important}
  html body.nd main .ps-img[data-fg="0"].on ~ .ps-img[data-fg="1"]{opacity:1!important;z-index:2!important;pointer-events:auto!important}

  /* Category tiles: smaller squares */
  html body.nd main .dg6 figure>div,html body.nd main .dg6 figure div{aspect-ratio:1/1!important;border-radius:12px!important}
  html body.nd main .dg6{gap:10px!important}
  html body.nd main .dg6 figcaption{font-size:12px!important;margin-bottom:6px!important}
  html body.nd main .dg6 img{width:100%!important;height:100%!important;object-fit:cover!important}
}