/* ==========================================================================
   Subtitl — PHONE LAYOUT (homepage, ≤700px)
   --------------------------------------------------------------------------
   Owner 2026-09-25, after comparing two directions (A editorial / B cards)
   section by section:
     · hero       — exactly the live site's phone hero + a chrome CTA
                    (hero.css owns it; nothing here touches the hero)
     · platforms  — B: the pinned 400vh coverflow becomes 2×2 tiles
                    (platforms.js builds .pw-list)
     · templates  — neither: a swipeable card DECK (app.js initTemplateDeck)
     · why        — A: left-aligned Inter heading, cards stacked with a bit
                    more air, each plays while on screen (initFeatureBento)
     · pricing    — as it was; the fine print quieter (all still shown)
     · story      — B: centred Gabarito heading, a centred portrait founder card
                    (was wide and short until 2026-11-01)
   ========================================================================== */
.pw-list,.tdeck-ui,.td-back,.td-cover{display:none}

@media (max-width:700px){
:root{--section-y:48px}

/* ---------------------------------------------------------- platforms (B) */
/* pulled up INTO the hero (owner 2026-10-27: "it should just be below it…
   some part of it could even be on top of the gradient"). The phone hero keeps
   460px of bottom room for its wave; the section starts 412px up into it, so
   the heading sits 48px under the CTA on every phone (both hang off the same
   bottom padding). The heading is on the navy, so it's white; the tiles ride
   the fade, with the dark dissolving to white behind them (hero.css moves the
   wave down to make room). The section sits above the hero (z-index), clear
   at the top and solid white well before its own bottom, which runs PAST the
   hero's edge so no sliver of the hero's blue can show as a seam. */
.platforms{height:auto;padding:0 var(--gutter) 36px;margin-top:-412px;position:relative;z-index:4;
  background:linear-gradient(180deg,rgba(255,255,255,0) 0,rgba(255,255,255,0) 170px,rgba(255,255,255,.6) 290px,#fff 370px)}
.platforms .pw-head h2.pw-title{color:#fff;text-shadow:0 2px 12px rgba(2,10,34,.34),0 3px 30px rgba(2,14,44,.28)}
/* the wave's white now reaches below the hero, which stacks above the page:
   lift the next section over it so it can't wash out its heading */
#templates{z-index:4}
/* platforms.js builds the list after first paint; on a slow phone that pushed
   the next section down (CLS .061). Hold its exact room (22px margin + 307px,
   constant at every phone width) until it exists. */
.platforms:not(:has(.pw-list)){padding-bottom:calc(36px + 329px)}
.platforms .sticky{position:static;height:auto;min-height:0;display:block;padding:0;overflow:visible}
.platforms .wheel-col,.platforms .copy{display:none}
.platforms .pw-head{padding:0}
.pw-list{display:grid;grid-template-columns:1fr 1fr;gap:10px;list-style:none;margin:22px 0 0;padding:0}
.pw-li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:18px 10px 16px;border-radius:22px;
  background:linear-gradient(180deg,#fff,#f4f7fb);box-shadow:0 0 0 1px rgba(20,40,80,.07),0 10px 24px -16px rgba(10,30,80,.35)}
.pw-li img{display:block;flex:none;width:56px;height:56px;border-radius:14px}
.pw-li.is-soon img{opacity:.8}
.pw-li-top{display:flex;flex-direction:column;align-items:center;gap:8px}
.pw-li-top b{font:600 1.02rem/1.2 var(--sans);letter-spacing:-.01em;color:var(--ink)}
.pw-li-st{font:600 11px/1 var(--body);letter-spacing:.02em;border-radius:999px;padding:5px 9px;
  color:#0f7a3a;background:rgba(22,163,74,.1);white-space:nowrap}
.pw-li.is-soon .pw-li-st{color:var(--brand-blue-ink,#0d63aa);background:rgba(18,134,230,.09)}
.pw-li p{display:none}

/* ------------------------------------------------------ templates: DECK */
/* the preview, the two back cards and the flying ghost share ONE grid cell,
   so they stack exactly without any absolute maths; the controls sit below */
#templates .tcloud{--tdw:min(248px,63vw);display:grid;grid-template-columns:1fr;justify-items:center;max-width:none;gap:0;
  margin-top:30px;padding-bottom:4px}
#templates .tcloud .styles-gallery{display:none}
#templates .tcloud .styles-preview{grid-area:1/1;order:0;width:var(--tdw);z-index:3;touch-action:pan-y;cursor:grab;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
#templates .tcloud.td-dragging .styles-preview{cursor:grabbing}
#templates .styles-card{width:100%;max-height:none}
#templates .styles-card .style-chip{z-index:6}
.td-back,.td-ghost{grid-area:1/1;width:var(--tdw);aspect-ratio:9/16;border-radius:26px;overflow:hidden;background:#0c0c10;pointer-events:none;
  box-shadow:0 0 0 6px #fff,0 0 0 7px rgba(20,30,60,.08),0 30px 50px -30px rgba(9,28,66,.55)}
.td-back img,.td-ghost img,.td-cover img{display:block;width:100%;height:100%;object-fit:cover}
.td-back{display:block}
.td-back1{z-index:2;transform:translate(34px,8px) rotate(7deg) scale(.93);filter:brightness(.92)}
.td-back2{z-index:1;transform:translate(-34px,16px) rotate(-8deg) scale(.88);filter:brightness(.82)}
.td-ghost{z-index:5}
.td-cover{display:block;position:absolute;inset:0;z-index:5;opacity:0;pointer-events:none;transition:opacity .2s linear}
.td-cover.is-on{opacity:1;transition:none}
.tdeck-ui{grid-area:2/1;display:flex;align-items:center;justify-content:space-between;gap:12px;width:min(330px,88vw);margin-top:44px}
.td-nav{flex:none;width:46px;height:46px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;color:var(--ink);
  background:linear-gradient(180deg,#fff,#eef1f6);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(20,30,60,.09),0 10px 20px -12px rgba(10,30,70,.5)}
.td-nav svg{width:20px;height:20px}
.td-nav:active{transform:scale(.94)}
.td-mid{min-width:0;text-align:center}
.td-name{display:block;font:800 1.55rem/1.05 var(--sans);letter-spacing:-.035em;color:var(--ink)}
.td-count{display:block;margin-top:7px;font:600 11.5px/1 var(--body);letter-spacing:.04em;color:var(--ink-faint);white-space:pre}

/* ---------------------------------------------------------------- why (A) */
#why .section-head{text-align:left;margin-inline:0}
#why .section-head h2{font-family:var(--body);font-weight:600;font-size:clamp(2.1rem,9.4vw,2.6rem);line-height:1.02;letter-spacing:-.05em;text-align:left}
#why .section-head .sub{margin-inline:0;font-size:1rem}
#why .bento-grid{gap:28px}

/* ------------------------------------------------------ pricing fine print */
#pricing .price-terms{padding:16px 16px 6px;border-radius:18px;background:#f6f7f9}
#pricing .price-terms h3{font-size:.95rem}
#pricing .price-terms li{font-size:.82rem;line-height:1.55;margin-bottom:10px}

/* -------------------------------------------------------------- story (B) */
#story .story h2{font-family:var(--sans);font-weight:800;font-size:clamp(2.1rem,9.6vw,2.6rem);line-height:1;letter-spacing:-.04em}
/* owner 2026-11-01: the wide, short card (4/3.2, full width) cropped in on the
   face and laid the caption scrim across the chin. A centred portrait card,
   the desktop shape, reads as a photo again. */
.founder{max-width:min(290px,78vw);width:100%;margin-inline:auto}
.founder-card{aspect-ratio:4/5}
.fc-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.story-copy{text-align:center}
.story-sign{justify-content:center}
}