/* Phones only. Loaded last on every page with media="(max-width: 760px)", and every rule is also
   inside the same query, so laptops and desktops never read a line of this file.
   What it does: a smaller type scale and tighter spacing, a compact header with a scrim so the page
   never runs into it, smaller floating buttons and app icons, and phone-sized demo screens. */
@media (max-width: 760px) {

/* ---------- Base ---------- */
body { font-size: 15.5px; line-height: 1.5; }
.mono { font-size: 11px; }
.eyebrow { font-size: 11px; letter-spacing: .16em; gap: 8px; }
.eyebrow::before { width: 16px; }
.display { font-size: clamp(36px, 10.2vw, 44px); line-height: .96; }
.h2 { font-size: clamp(28px, 7.8vw, 32px); line-height: 1.04; }
.h3 { font-size: 18px; }
.lede { font-size: 16px; line-height: 1.5; }
.note { font-size: 12px; }

/* ---------- Header: one slim bar with a dark scrim behind it ---------- */
.site-head { inset: 0 0 auto; padding: calc(8px + env(safe-area-inset-top, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px)) 8px max(var(--gutter), env(safe-area-inset-left, 0px)); }
.site-head::before { content: ""; position: absolute; inset: 0 0 -22px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 6, 10, .88) 0%, rgba(5, 6, 10, .62) 55%, rgba(5, 6, 10, 0) 100%); }
.brand { gap: 8px; padding: 6px 12px 6px 8px; font-size: 10.5px; letter-spacing: .14em; }
.brand svg { width: 20px; height: 20px; }
.menu-btn { padding: 8px 13px; font-size: 10.5px; }
.nav { inset: calc(54px + env(safe-area-inset-top, 0px)) var(--gutter) auto; border-radius: 18px; padding: 8px; max-height: calc(100svh - 72px); overflow-y: auto; }
.nav a, .nav .calm-toggle { padding: 11px 14px; font-size: 15px; }
.nav .cta { margin-top: 4px; text-align: center; }

/* ---------- Buttons ---------- */
.btn { min-height: 46px; padding: 0 20px; gap: 8px; font-size: 15px; }
.btn-ghost { min-height: 40px; }
.btn-row { gap: 10px; }

/* ---------- Sections, cards, chips ---------- */
.pad { padding-block: 64px; }
.pad-s { padding-block: 48px; }
.shead { gap: 14px; margin-bottom: 28px; }
.grid { gap: 12px; }
.card { padding: 18px; border-radius: 16px; }
.card h3 { margin: 8px 0 6px; }
.card p { font-size: 15px; }
.feat-ico { width: 34px; height: 34px; border-radius: 10px; margin-bottom: 12px; }
.feat-ico svg { width: 18px; height: 18px; }
.chip { padding: 5px 10px; font-size: 12px; gap: 6px; }
.chips { gap: 6px; }

/* App heroes */
.hero { padding-top: 92px; padding-bottom: 36px; }
.hero h1 { margin: 10px 0 14px; }
.hero .app-mark { width: 56px; height: 56px; border-radius: 15px; margin-bottom: 16px; }
.hero .chips { margin-top: 18px; }

/* Timeline */
.chron::before, .chron::after { left: 19px; }
.chron li { grid-template-columns: 40px 1fr; gap: 14px; padding-bottom: 24px; }
.chron .node { width: 39px; height: 39px; font-size: 11px; }
.chron h3 { font-size: 17px; margin: 8px 0 4px; }
.chron p { font-size: 15px; }

.split2 { gap: 26px; }
.cta-band { padding: 30px 22px; border-radius: 22px; }
.cta-band .h2 { margin: 12px 0 14px; }
.cta-band .lede { margin-bottom: 22px; }
.next-app { padding: 24px 0; gap: 14px; }
.next-app .arrow-c { width: 50px; height: 50px; }
.phone { width: min(250px, 64vw); border-radius: 36px; padding: 8px; }
.phone .scr { border-radius: 29px; }
/* App demo phones: phone-sized on a phone, not the full width of it. */
.dev:not(.desk):not(.land) { width: min(250px, 66vw); margin-inline: auto; padding: 8px; border-radius: 36px; }
.dev:not(.desk):not(.land) .sc { border-radius: 29px; }

/* ---------- Footer ---------- */
.site-foot { padding: 44px 0 calc(32px + env(safe-area-inset-bottom, 0px)); margin-top: 24px; font-size: 14px; }
.site-foot .cols { gap: 26px 18px; }
.site-foot h4 { margin-bottom: 10px; }
.site-foot a { padding: 5px 0; }
.site-foot .base { margin-top: 32px; padding-top: 18px; font-size: 12px; }
.foot-brand { gap: 10px; margin-bottom: 10px; }
.foot-brand svg { width: 30px; height: 30px; }
.foot-brand .serif { font-size: 22px !important; }

/* ---------- App switcher bar ---------- */
.app-rail { --rs: 38px; gap: 6px; padding: 7px; border-radius: 20px; }
.app-rail .ri { border-radius: 11px; }
.app-rail a[aria-current]::before { bottom: -6px; width: 16px; }
body:has(.app-rail) .site-foot { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }

/* ---------- Sections button (pages with tabs) ---------- */
.fft-t { padding: 8px 13px; font-size: 13.5px; }
.fft-hint { font-size: 10.5px; padding: 5px 11px; }
.fft-next { gap: 16px; margin-top: 40px; }
.fft-next a { gap: 12px; padding: 10px 12px 10px 18px; border-radius: 16px; }
.fft-next small { font-size: 10px; margin-bottom: 4px; }
.fft-next b { font-size: 20px; }
.fft-next i { width: 34px; height: 34px; }
.fft.docked .wrap { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
.fft.docked .fft-fab { gap: 8px; padding: 6px 13px 6px 7px; font-size: 13px; }
.fft-fab-i { width: 24px; height: 24px; }
.fft-fab-i i { width: 10px; }
/* Name the button: a small "Sections" over the section you're in. */
.fft.docked .fft-fab .fft-fab-l { display: block; font: 600 8.5px/1 var(--mono, monospace); letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.fft.docked .fft-fab { display: inline-grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 8px; row-gap: 2px; text-align: left; }
.fft.docked .fft-fab .fft-fab-i { grid-row: 1 / 3; }
.fft.docked .fft-fab b { line-height: 1.05; }
.fft.docked.open .fft-bar { max-height: calc(100svh - 150px); }
.fft.docked .fft-t { font-size: 13.5px; padding: 9px 13px; }
body:has(.app-rail) .fft.docked .wrap { bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }

/* ================= Home ================= */
.forge .stage { min-height: 520px; }
.beat { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
.beat .btn-row { margin-top: 22px; }
.beat .lede { margin-top: 12px; }
.beat-top { top: 96px; }
/* The scroll cue sat on top of the buttons; the "See the work" button does the same job. */
.forge .to-work { display: none; }
.cast-meter { bottom: calc(22px + env(safe-area-inset-bottom, 0px)); gap: 12px; font-size: 10px; }
.statement { font-size: clamp(26px, 7.4vw, 30px); }
.facts { gap: 8px; margin-top: 32px; }
.facts div { padding-top: 16px; }
.facts b { font-size: 36px; }
.facts span { font-size: 14px; }
.doors { gap: 14px; }
.door { border-radius: 20px; padding-bottom: 20px; }
.door > :not(.dmedia):not(.top):not(.light) { margin-left: 18px; margin-right: 18px; }
.door .icon { width: 36px; height: 36px; border-radius: 10px; }
.door .top { top: 12px; left: 12px; right: 12px; }
.door h3 { margin-top: 10px; }
.door .go { margin-top: 16px; padding: 7px 7px 7px 16px; font-size: 14px; }
.door .go i { width: 30px; height: 30px; }
.studio-band { min-height: 0; border-radius: 22px; }
.process { row-gap: 28px; }

/* ================= Website Studio ================= */
.world-studio .st-kick { font-size: 10.5px; padding: 5px 10px; gap: 8px; }
.world-studio .st-kick::before { width: 7px; height: 7px; }
.world-studio .st-btn, .world-studio .st-ghost { min-height: 46px; padding: 0 18px; font-size: 15px; border-radius: 11px; }
.world-studio .st-h2 { font-size: clamp(27px, 7.6vw, 31px); line-height: 1.05; margin: 14px 0 12px; }
.world-studio .st-lede { font-size: 15.5px; }
.world-studio .st-pad { padding-block: 64px; }
.world-studio .st-head { margin-bottom: 24px; }
.world-studio .fft-p { padding-block: 44px; scroll-margin-top: 110px; }
.world-studio .fft-p .st-head { margin-bottom: 22px; }
.world-studio .fft-t { font-size: 13.5px; padding: 8px 13px; }
.world-studio .fft-next b { font-size: 20px; }
.world-studio .tap-hint { font-size: 10px; padding: 5px 11px; margin-bottom: 10px; }
.world-studio .st-cta { padding: 28px 22px; box-shadow: 6px 6px 0 var(--pop); }

/* Film hero */
.sr-title { font-size: clamp(36px, 10.4vw, 42px); margin: 14px 0 12px; }
.sr-sub { font-size: 15.5px; margin-bottom: 20px; }
.sr-copy { bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }
.sr-acts { gap: 10px; }
.sr-cap { font-size: clamp(24px, 7vw, 30px); top: 84px; }
.sr-labels { font-size: 9.5px; letter-spacing: .16em; }

/* Device toggle and frames: phone-sized phones */
.dv { gap: 14px; }
.dv-tog button { padding: 8px 13px; font-size: 13px; }
.dv-frame[data-dev="ios"], .dv-frame[data-dev="and"] { width: min(250px, 66vw); height: min(520px, 138vw); }
.dv-frame[data-dev="ios"] { padding: 9px; border-radius: 42px; }
.dv-frame[data-dev="ios"] .dv-screen { border-radius: 34px; }
.dv-frame[data-dev="and"] { padding: 8px; border-radius: 28px; }
.dv-frame[data-dev="and"] .dv-screen { border-radius: 21px; }
.dv-island { top: 17px; width: 76px; height: 22px; }
.dv-punch { top: 17px; width: 11px; height: 11px; }

/* Style picker */
.sy-roster { gap: 8px; margin-bottom: 24px; }
.sy-pick { column-gap: 10px; padding: 10px 30px 10px 10px; border-radius: 13px; }
.sy-pick::after { top: 9px; right: 9px; width: 18px; height: 18px; font-size: 10px; }
.sy-pick .sy-n { width: 26px; height: 26px; font-size: 11px; border-radius: 8px; }
.sy-pick b { font-size: 15.5px; }
.sy-pick i { font-size: 12px; margin-top: 2px; }
.sy-sw { right: 9px; bottom: 9px; }
.sy-sw i { width: 10px; height: 10px; }
.sy-stage { gap: 22px; }
.sy-about h3 { font-size: 26px; margin: 10px 0 8px; }
.sy-about p { font-size: 15px; }
.sy-tags { margin: 4px 0 16px; }
.sy-tags span { font-size: 11px; padding: 5px 8px; }
.sy-next .st-ghost { min-width: 46px; }

/* Hero openings, motion and scroll pickers */
.hx-pick, .mx-pick { padding: 9px; gap: 9px; }
.hx-pick b, .mx-pick b { font-size: 14px; }
.hx-ic, .mx-n { width: 28px; height: 28px; border-radius: 9px; font-size: 11px; }
.sl-phone { width: min(260px, 70vw); height: min(540px, 145vw); }
.sl-ch button { padding-block: 10px; }

/* Button lab */
.bl { gap: 8px; }
.bl-c { gap: 16px; padding: 24px 10px 14px; border-radius: 16px; }
.bl-c figcaption { font-size: 12px; }
.bl-c figcaption b { font-size: 15px; }
.bl-b { min-height: 46px; padding: 0 18px; font-size: 14.5px; }
.rk { height: 76px; padding-right: 12px; }
.rolo-meta { font-size: 11px; margin-top: 16px; }
.rolo-meta .tip { font-size: 13px; }

/* Six layers: a smaller preview that stays in view, and slimmer switches */
.lx { gap: 14px; }
.lx-view { top: calc(50px + env(safe-area-inset-top, 0px)); padding: 6px var(--gutter) 10px; }
.lx-view .hb { width: 88%; margin-inline: auto; }
.lx-list { gap: 6px; }
.lx-row { grid-template-columns: 38px 1fr; gap: 12px; padding: 10px 12px; }
.lx-row b { font-size: 15.5px; }
.lx-row i { font-size: 12.5px; }
.lx-sw { width: 38px; height: 22px; }
.lx-sw::after { width: 16px; height: 16px; }
.lx-row[aria-pressed="true"] .lx-sw::after { transform: translateX(16px); }

/* Process and "what you get" */
.flow, .gets { gap: 10px; }
.gets b { font-size: 16px; }
.dirs { grid-template-columns: 1fr 1fr; gap: 8px; }
.dir2 { min-height: 0; gap: 6px; padding: 14px; border-radius: 12px; }
.dir2 .sw i { width: 15px; height: 15px; border-radius: 4px; }
.dir2 b { font-size: 18px; margin-top: 8px; }
.dir2 > span:not(.sw) { font-size: 12.5px; line-height: 1.35; }
.dir2 em { font-size: 12px; }

/* ================= Dashboards ================= */
.d-h2 { font-size: clamp(28px, 7.8vw, 32px); margin: 14px 0 12px; }
.dh-title { font-size: clamp(42px, 12vw, 50px); margin: 16px 0 16px; }
.dh-proof { gap: 14px; margin-top: 22px; padding-top: 18px; }
.dh-proof b { font-size: 22px; }
.dh-proof span { font-size: 9.5px; letter-spacing: .1em; }
.db-btn, .db-ghost { min-height: 46px; padding: 0 18px; font-size: 15px; border-radius: 12px; }

/* ---------- Support ---------- */
.sup-ways { gap: 12px; }
.sup-way { padding: 18px; border-radius: 18px; }
.sup-way b { font-size: 22px; }

}