/* Fresko marketing site: responsive overrides.
   Injected LAST into every page by build-site.py, so equal-specificity rules
   here win over the inline page styles. Desktop (>1024px) is intentionally
   untouched: the design is pixel-final there. Scoped to tablet/phone widths.
   Source of truth: deploy/responsive.css (site-src pages are design exports
   and are never hand-edited). */

/* ---------- global guards (phone + tablet) ---------- */
@media (max-width: 1023px) {
  body { overflow-x: hidden; }
  img, svg, video { max-width: 100%; }
}

/* ---------- index hero (rolling-headline template) ---------- */
/* The animated headline is a max-content block of nowrap lines (505px at the
   default size) and the Overview proof cards are a hard 460px: both centered,
   both clipped at each edge on phones. Scale, don't rewrap: the roll animation
   needs its line structure. Scoped via :has(.roll-track) so the vertical-page
   .hero-h1 (which wraps fine) is untouched. */
@media (max-width: 640px) {
  /* the rolling-phrase line keeps a fixed 38px font and cannot wrap, which
     inflates the flex parent's min-content width to ~504px */
  .hero-h1 .l3 { font-size: clamp(20px, 6.7vw, 28px); }
  .hero-inner > div { min-width: 0; max-width: 100%; }
  .pcard { width: min(460px, calc(100vw - 44px)); }
  .pcard img { max-width: 100%; height: auto; }
}
@media (min-width: 641px) and (max-width: 1023px) {
  .pcard { width: min(460px, calc(100vw - 80px)); }
}

/* ---------- squished grids at phone width ---------- */
@media (max-width: 640px) {
  /* restaurants (and template siblings): outcome grid measured 4 tracks x 83px;
     one instance carries an inline style, hence the !important */
  .og-grid, .og-grid.rv { grid-template-columns: repeat(2, 1fr) !important; }
  /* brands-teams: the loop-vs-line grid items cannot shrink below the fixed
     340px svg inside them (min-content sizing); allow shrink and scale the svg */
  .ai-cols > * { min-width: 0; }
  .ai-col { padding: 24px 18px; }
  .loopviz svg { width: 100%; height: auto; }
  /* owners: 4-column week/work columns measured 70px tracks */
  .wcols { grid-template-columns: repeat(2, 1fr) !important; }
  /* index: 3-column plan grid measured 82px tracks */
  .pgrid { grid-template-columns: 1fr; }
}
@media (min-width: 641px) and (max-width: 1023px) {
  .pgrid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- blog industry hub: sticky side nav 8px wider than viewport ---------- */
@media (max-width: 1023px) {
  nav.gside { max-width: 100%; box-sizing: border-box; margin-left: 0; margin-right: 0; }
}

/* ---------- tab rows scroll instead of clipping/overflowing ---------- */
@media (max-width: 640px) {
  .tabs, .tab-row, .cat-tabs, .sc-tabs, .faq-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: flex-start;
    max-width: 100%;
  }
  /* index footer: link row and fine print were wider than the padded column */
  .footer-links nav { flex-wrap: wrap; justify-content: center; max-width: 100%; row-gap: 6px; }
  .footer-links .fine { max-width: 100%; }
}

/* ---------- index rolling headline at tablet widths ---------- */
/* the nowrap top line is ~850px at its 50px desktop size */
@media (min-width: 641px) and (max-width: 1023px) {
  .hero-h1:has(.roll-track) { font-size: clamp(32px, 5vw, 44px); }
  .chat-input input { min-width: 0; }
}

/* ---------- post-preview cards (og-grid) on phones ---------- */
/* At 2-column phone width a card is ~170px wide; the caption block kept an
   86px right inset for the pill, wrapped into 8+ lines and climbed over the
   hook tile. Clamp the caption and tighten the pill. */
@media (max-width: 640px) {
  .og-cap { padding: 26px 58px 10px 12px; }
  .og-cap b {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 11.5px;
  }
  .og-cap span { font-size: 9.5px; }
  .og-hook { font-size: 15px; }
  .og-pill { font-size: 9px; padding: 3px 7px; }
}

/* ---------- product-UI screenshots used as card art ---------- */
/* Center-cropping a dashboard screenshot cuts interface text at both edges
   and reads as broken; anchor the crop to the left edge on phones. */
@media (max-width: 640px) {
  img[src*="assets/ui/"], img[src*="admin-"] { object-position: left center; }
}

/* ---------- input placeholder truncation ---------- */
@media (max-width: 1023px) {
  .chat-input input { text-overflow: ellipsis; }
}

/* ---------- campaign stat strip (posts / reels / carousels / platforms) ---------- */
/* The dossier header squeezed the stat row and clipped the last label on
   phones; let it wrap to its own full-width line. */
@media (max-width: 640px) {
  .camp-bar { flex-wrap: wrap; row-gap: 12px; }
  .camp-bar .stats { width: 100%; justify-content: space-between; min-width: 0; flex-wrap: wrap; }
  .camp-bar .st span { font-size: 10px; letter-spacing: .05em; }
}

/* ==========================================================================
   Phone pass 2 (GG orders 2026-09-16, plan FRESKO-DEV-MOBILE-NAV-1)
   ========================================================================== */

/* ---------- nav strip geometry (phone + tablet) ---------- */
/* "the menu strip [has] to be tighter than the purple section so that the
   different radiuses dont look like this, the purple block should start also at
   the half of the menu, so the top section is not covered by the menu".
   On desktop the pill is 1192px inside a 1400px hero card and the card's top
   edge runs behind the middle of the pill. Below desktop both were the same
   width, so a 999px pill sat on a 40px card corner, and the card began at the
   pill's top edge. Restore the desktop relationship: inset the pill, and set
   the nav's negative margin-bottom (which is what positions the card) so the
   card's top lands on the pill's midline. The pill rests in its normal flow
   position and its top offset applies only once it sticks, so the overlap is
   exactly half its height. */
@media (max-width: 640px) {
  .nav {
    margin-left: 12px;
    margin-right: 12px;
    margin-bottom: -30px;   /* half the 60px pill: the card top meets its midline */
    padding: 0 10px 0 16px;
  }
}
@media (min-width: 641px) and (max-width: 1100px) {
  .nav {
    margin-left: 32px;
    margin-right: 32px;
    margin-bottom: -36px;   /* half the 72px pill: same relationship on tablets */
    padding: 0 24px;
  }
}
/* GG 2026-09-17: "Tablet is also a mobile device. You have to make sure it works
   properly at all breakpoints." Every rule in this header block therefore runs
   to 1100px, the pages' OWN breakpoint where the link row disappears and the
   burger takes over. Stopping at 1023px left the 1024-1100 band with the full
   width pill on the card corner, the card starting at the pill's top edge, and
   Login floating in the middle of the bar. There is no protected band. */

/* ---------- header controls: CTA beside the burger ---------- */
/* "start for free CTA button should be always visible next to the hamburger".
   The page's own Login ghost button is hidden wherever the burger shows; this
   is the primary action, so it lives in the header rather than behind the menu. */
.rnav-actions { display: contents; }
/* only the script-built button is hidden by default; a page's own call to
   action, adopted in place, keeps the page's own visibility rules */
.rnav-cta-injected { display: none; }

.rnav-needed .rnav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.rnav-needed .rnav-cta-injected { display: inline-flex; }
.rnav-needed .rnav-cta {
  flex: 0 0 auto;
  margin-top: 0 !important;
}
.rnav-needed .nav-cta .btn-ghost { display: none; }
.rnav-needed .rnav-burger {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 11px;
}
.rnav-needed .rnav-cta-injected { height: 40px; padding: 0 18px; font-size: 14px; }
@media (max-width: 640px) {
  .rnav-needed .rnav-actions { gap: 4px; }
  .rnav-needed .rnav-cta { height: 36px; padding: 0 12px; font-size: 12px; }
  .rnav-needed .rnav-burger { width: 40px; height: 40px; padding: 9px; }
}

/* ---------- drill-down navigation (pairs with assets/responsive.js) ---------- */
/* "the navigation should be old ipod style left right scroll going one layer
   deeper": the panel holds one view at a time and slides horizontally between
   them, instead of listing every link at once. */
.rnav-burger { display: none; }
.rnav-panel { display: none; }
/* The panel is positioned against the header, which needs a containing block.
   The August pass used position:relative here, which silently overrode the
   page's own position:sticky, so the strip never stuck below desktop (GG,
   2026-09-16: "the navigation has to be sticky on mobile too"). Sticky gives the
   same containing block, so the page's own sticky and top offset are kept. */
.rnav-needed { position: sticky; }
.rnav-needed .rnav-burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: 0;
  cursor: pointer;
}
.rnav-burger span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--fs-ink, #1B1533);
  transition: transform .26s var(--fs-ease, ease), opacity .18s linear;
}
.rnav-open.rnav-needed .rnav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.rnav-open.rnav-needed .rnav-burger span:nth-child(2) { opacity: 0; }
.rnav-open.rnav-needed .rnav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.rnav-open.rnav-needed .rnav-panel {
  display: block;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: 0;
  z-index: 300;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 24px 54px -12px rgba(7, 0, 21, .28), inset 0 0 0 1px rgba(7, 0, 21, .06);
  padding: 10px;
  overflow: hidden;
}
/* the window: one view wide, height animated to the active view */
.rnav-viewport {
  overflow: hidden;
  max-height: min(70vh, 560px);
  transition: height .26s var(--fs-ease, ease);
}
/* a view taller than the capped window scrolls instead of being clipped */
.rnav-viewport.rnav-scrolls { overflow-y: auto; -webkit-overflow-scrolling: touch; }
/* one view per level: the root, plus one per group. Each is a full window wide
   and never shrinks, so the track shifts by whole views and exactly one is on
   screen. The shift itself is set on the element, since the number of views
   depends on the page's own nav. */
.rnav-track {
  display: flex;
  width: 100%;
  transform: translateX(0);
  transition: transform .26s var(--fs-ease, ease);
}
.rnav-view {
  width: 100%;
  flex: 0 0 100%;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-self: flex-start;
}
/* the inactive view is also inert and aria-hidden from the script */
.rnav-view[aria-hidden="true"] { visibility: hidden; }

.rnav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 12px;
  border: 0;
  border-radius: 12px;
  background: none;
  font-family: var(--fs-font, inherit);
  font-size: 15px;
  font-weight: 600;
  color: var(--fs-ink, #1B1533);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.rnav-row:hover, .rnav-row:focus-visible { background: #F4F2FA; color: var(--fs-ink, #1B1533); }
.rnav-chev { width: 16px; height: 16px; flex: 0 0 auto; color: #9A94B8; }
.rnav-back {
  height: 48px;
  justify-content: flex-start;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(7, 0, 21, .07);
  border-radius: 12px 12px 0 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #6C6690;
}
.rnav-back .rnav-chev-back { color: #6C6690; }

/* a group's own links, cloned from the page's dropdown panel */
.rnav-sub { display: flex; flex-direction: column; gap: 2px; }
.rnav-sub a {
  display: block;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--fs-ink, #1B1533);
  text-decoration: none;
}
.rnav-sub a:hover, .rnav-sub a:focus-visible { background: #F4F2FA; }
.rnav-sub a[aria-current="page"] { background: var(--pink-pale, #FDF2FA); }
.rnav-sub a span {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 500;
  color: #8B85A6;
}
@media (prefers-reduced-motion: reduce) {
  .rnav-track, .rnav-viewport, .rnav-burger span { transition-duration: 0s; }
}

/* ---------- blog header: one navigation for the whole site ---------- */
/* GG order 2026-09-16: "consolidate them into one". The three blog pages ship a
   second header (.bnav) with their own script-built burger and a cloned link
   panel on document.body. That clone is script-built, so retiring it costs
   nothing for search: the page's own nav element and its call to action stay
   untouched in the HTML, visible to a crawler, and this one menu takes over the
   mobile presentation on every page of the site. */
.rnav-installed .bnav-burger,
.rnav-installed .bnav-menu { display: none !important; }
/* the panel is positioned against the header, which therefore needs to be a
   containing block; sticky also keeps this header pinned like the others */
.rnav-host.bnav { position: sticky; }
.rnav-needed.bnav .rnav-burger { margin-left: 0; }
/* the adopted button already carries the page's own .btn styling; only the
   phone sizing below is applied on top, so it matches the other 10 pages */

/* ---------- hero entry form: one pill row on phones ---------- */
/* "this section should look like on the desktop, so people understand that this
   is a proper input form". The earlier phone treatment stacked the field above
   a full-width button, which reads as a caption over a button rather than a
   form. Keep the desktop shape: field left, action right, in one pill. The
   row's min-content width (~446px, what forced the stack originally) is
   released by letting the field shrink to zero and ellipsise, and on the
   vertical template by clearing the grid item's automatic minimum. Scoped to
   the hero, so product-demo controls elsewhere are untouched. */
@media (max-width: 640px) {
  .hero-card .lt-copy { min-width: 0; }
  .hero-card .chat-wrap { min-width: 0; max-width: 100%; }
  .hero-card .chat-input {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 56px;
    min-width: 0;
    max-width: 100%;
    padding: 4px 4px 4px 14px;
    gap: 8px;
    border-radius: 999px;
  }
  .hero-card .chat-input input,
  .hero-card .chat-text {
    flex: 1 1 0;
    width: 0;
    min-width: 0;
    height: auto;
    font-size: 14px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .hero-card .chat-input button {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    max-width: 55%;
    height: 48px;
    padding: 0 12px;
    font-size: 12px;
    letter-spacing: -0.01em;
    white-space: nowrap;
    margin-top: 0 !important;
  }
}

/* ---------- small-phone overflow (every breakpoint, GG 2026-09-17) ---------- */
/* Three components were wider than a 320-390px screen on the live build before
   this pass, found by the every-width sweep:
   agencies    the margin calculator column: a grid item's automatic minimum
               width is its content, and the range input kept it at 363px.
   b2b-saas    the three cost cards: same grid minimum, plus 34px side padding
               and a 36px price line.
   brands      the "prompt loop" diagram is a fixed 340x292 drawing whose chips
               and arrows are placed in pixels, so it is scaled as one unit
               rather than reflowed (reflowing would scatter the chips). */
.mcalc > *, .math3 > * { min-width: 0; }
.cslider input { min-width: 0; }
@media (max-width: 400px) {
  .mcard { padding: 32px 22px; }
  .mcard .price { font-size: 30px; }
}
@media (max-width: 435px) { .loopviz { zoom: .88; } }
@media (max-width: 400px) { .loopviz { zoom: .8; } }
@media (max-width: 370px) { .loopviz { zoom: .71; } }
@media (max-width: 340px) { .loopviz { zoom: .65; } }

/* narrowest phones: give the hero form field room to show its placeholder */
@media (max-width: 360px) {
  .hero-card .chat-input button { padding: 0 10px; font-size: 11.5px; }
  .hero-card .chat-input { padding-left: 12px; gap: 6px; }
}
/* agencies calculator result rows: label and figure share one nowrap line,
   and the figure alone is 97px at phone size; let the label wrap and the row
   break onto two lines on the narrowest phones */
@media (max-width: 400px) {
  .mbar { flex-wrap: wrap; row-gap: 4px; height: auto; min-height: 0; }
  .mbar > span { min-width: 0; white-space: normal; }
  .mbar > b { margin-left: auto; }
}

/* tablet menu: a full-strip panel is 900px wide on a tablet, with each chevron
   900px from its label; anchor it under the burger at a readable width */
@media (min-width: 641px) {
  .rnav-open.rnav-needed .rnav-panel {
    left: auto;
    right: 0;
    width: min(380px, 100%);
  }
}
/* the placeholder ellipsis ran only to 1023px, so at 1024-1100 it was cut
   mid-letter; it applies wherever the page is below desktop */
@media (max-width: 1100px) {
  .chat-input input { text-overflow: ellipsis; }
}