/* Zahy's site on phones: site/build.mjs links it last on every page, for screens up to 760px.
   Not the desktop page stacked into one long column: the card grids become rails you swipe sideways (with dots),
   feature lists sit beside their icons, the footer folds into sections, a start bar stays under the thumb once
   the hero is gone, and every field is 16px so iOS never zooms. The phone menu itself is in site.css (≤1060px).
   Live posters (.dz) are never restyled here. */
body{font-size:15.5px}
.wrap{padding-inline:16px}

/* ---------- header (the floating bar itself is in site.css) ---------- */
.brand{font-size:16.5px;gap:8px}
.brand img{width:24px}
.sh-cta{height:40px;padding:0 14px;font-size:14px}

/* ---------- rhythm and type ---------- */
.sec{padding-block:56px}
.sec-tight{padding-block:40px}
.sec-head{margin-bottom:26px}
.sec-head .lead{margin-top:10px}
.eyebrow{font-size:13.5px;margin-bottom:10px}
.display{font-size:clamp(33px,9.4vw,40px);line-height:1.22}
.phero-grid .display{font-size:clamp(31px,8.8vw,38px)}
.h2{font-size:clamp(25px,7.2vw,30px);line-height:1.3}
.h3{font-size:20px}
.lead{font-size:16px;line-height:1.75}
.sec-foot{margin-top:28px}
.sec-foot .btn{flex:1 1 auto}

/* ---------- page heroes ---------- */
.phero{padding:calc(var(--head-h) + 32px) 0 44px}
.phero .lead{margin-top:14px}
.phero-acts{margin-top:24px;gap:10px}
.phero-acts .btn{flex:1 1 100%}
.phero-note{gap:8px 16px;margin-top:16px;font-size:13.5px}
.crumbs{margin-bottom:12px;font-size:13px}
.pill{font-size:12.5px;margin-bottom:16px}
.phero-grid{gap:28px}

/* ---------- cards, splits, stats ---------- */
.card{padding:20px;border-radius:22px}
.split{gap:26px}
.split+.split{margin-top:64px}
.split-txt .ticks{margin-top:20px}
.split-acts .btn{flex:1 1 auto}
.scene{min-height:0;padding:14px;border-radius:24px}
.stats{gap:8px}
.stat{padding:16px 14px;border-radius:18px}
.stat b{font-size:28px}
.stat>span{font-size:13px;margin-top:4px;line-height:1.55}
.ticks li{font-size:15px}

/* feature lists: the icon beside the words, not above them */
.fgrid{grid-template-columns:1fr;gap:22px}
.fgrid .fi{grid-template-columns:44px minmax(0,1fr);column-gap:14px;row-gap:3px;align-items:start}
.fgrid .fi>.it{grid-row:1/span 3;width:44px;height:44px;border-radius:13px}
.fgrid .fi>.it .ic{width:21px;height:21px}
.fgrid .fi .h4{margin:1px 0 0;font-size:16.5px}
.fgrid .fi p{font-size:14.5px;line-height:1.7}

/* ---------- rails: card grids you swipe sideways (site.js adds the dots) ---------- */
.bento,.steps,.tease,.plans,.values,.fcards,.prods{display:flex!important;flex-wrap:nowrap;gap:12px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-inline:16px;margin-inline:-16px;padding:6px 16px 8px;scrollbar-width:none;
  grid-template-columns:none;grid-template-areas:none;align-items:stretch;max-width:none;-webkit-overflow-scrolling:touch}
:is(.bento,.steps,.tease,.plans,.values,.fcards,.prods)::-webkit-scrollbar{display:none}
:is(.bento,.steps,.tease,.plans,.values,.fcards,.prods)>*{flex:0 0 84%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always;grid-area:auto!important}
.steps>*{flex-basis:76%}
.prods>*{flex-basis:58%}
.plans{padding-top:22px}
.plans>*{flex-basis:88%}
.fcards>*{flex-basis:80%}
/* the cards of a rail are on screen together: no reveal-on-scroll inside it */
.rv-on :is(.bento,.steps,.tease,.plans,.values,.fcards,.prods)>.rv{opacity:1;transform:none;transition:none}
/* the home page's starter examples (home.js fills them) */
#starterGrid{display:flex;flex-wrap:nowrap;gap:12px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:16px;
  margin-inline:-16px;padding:6px 16px 8px;scrollbar-width:none}
#starterGrid::-webkit-scrollbar{display:none}
#starterGrid>*{flex:0 0 80%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always}
.rv-on #starterGrid>.rv{opacity:1;transform:none;transition:none}
.starter .stage{height:190px}
.sec-head-row>.btn{width:100%}
.rail-dots{display:flex;justify-content:center;gap:6px;margin-top:14px}
.rail-dots button{width:7px;height:7px;padding:0;border:0;border-radius:99px;background:rgba(20,20,22,.18);transition:width .25s var(--ease),background-color .25s}
.rail-dots button.on{width:22px;background:var(--primary)}
.sec-dark .rail-dots button{background:rgba(255,255,255,.25)}
.sec-dark .rail-dots button.on{background:#fff}
a.card:hover,.card.hover:hover,.bn:hover,.prod:hover{transform:none}

/* ---------- tabs and in-page bars ---------- */
.tabs{margin-inline:auto}
.tabs button{height:40px;padding:0 14px;font-size:14px}
.faq-toc{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding:2px 16px}
.faq-toc::-webkit-scrollbar{display:none}
.faq-toc a{flex:none}

/* ---------- FAQ, CTA band ---------- */
.faq{gap:8px}
.faq summary{padding:16px;font-size:15.5px;gap:12px}
.faq .ans{padding:0 16px 18px;font-size:15px;line-height:1.8}
.cta-band{padding:44px 20px 40px;border-radius:26px}
.cta-band p{font-size:16px}
.cta-acts{flex-direction:column;gap:10px;margin-top:26px}
.cta-acts .btn{width:100%}

/* ---------- forms: 16px fields, so iOS never zooms in ---------- */
.input{height:52px;font-size:16px}
textarea.input{min-height:130px}
.btn-lg{height:52px}

/* ---------- footer: the link groups fold ---------- */
.sf{padding:48px 0 calc(24px + env(safe-area-inset-bottom,0px))}
.sf-top{grid-template-columns:1fr!important;gap:0}
.sf-brand{margin-bottom:24px}
.sf-brand p{margin:12px 0 18px;font-size:14.5px}
.sf-acts .btn{flex:1 1 auto}
.sf-col{border-top:1px solid var(--line)}
.sf-col:last-of-type{border-bottom:1px solid var(--line)}
.sf-h{margin:0;padding:17px 2px;font-size:15.5px;cursor:pointer}
.sf-h .ic{display:block;width:18px;height:18px;opacity:.6;transition:transform .25s var(--ease)}
.sf-col[open] .sf-h .ic{transform:rotate(180deg)}
.sf-links{gap:0;padding:0 2px 12px}
.sf-links a{padding:9px 0;font-size:15px}
.sf-bottom{flex-direction:column;align-items:flex-start;gap:12px;margin-top:28px}

/* ---------- home page ---------- */
.hero{min-height:0;padding-top:calc(var(--head-h) + 28px);padding-bottom:36px}
.ideas{min-height:0;margin:16px -16px 0;padding:2px 16px;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none}
.ideas::-webkit-scrollbar{display:none}
.ideas button{flex:none}
.home-stats{margin-top:28px}
.show{padding:56px 0 20px}
.mq{height:230px;border-radius:14px}
.bn-txt{padding:18px 18px 20px}
.bn-vis{height:168px;min-height:0}
.bn-fan{height:168px}
.bn-b .bn-vis{height:168px;min-height:0}
.mini-phone{height:200px;margin-top:12px}
.mp-chip{font-size:11.5px;padding:6px 10px}
.bn-e .bn-txt{padding:18px 18px 20px}
.reel-stage .mk-phone{width:min(270px,74vw)}
.sec-head-row{gap:14px;margin-bottom:24px}

/* ---------- touch ---------- */
@media (hover:none){.mg:hover,.ml:hover,.prod:hover,.bn:hover{transform:none}}

/* ---------- live designs page ---------- */
.sc-bar{flex-direction:column;align-items:stretch;gap:10px}
.sc-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding:2px 16px}
.sc-chips::-webkit-scrollbar{display:none}
.sc-chips button{flex:none}
.sc-sizes{align-self:flex-start}
.sc-wall{columns:2;column-gap:10px}
.sc-card{margin-bottom:10px;padding:5px;border-radius:16px}
.sc-card .lv{border-radius:11px}
.sc-card figcaption{flex-direction:column;align-items:stretch;gap:6px;padding:8px 3px 3px}
.sc-card figcaption b{font-size:13px}
.sc-card figcaption small{font-size:12px}
.sc-try{height:34px;width:100%}
.see-more{height:52px;font-size:15px}