/* ============================================================
   SFN AI - responsive overrides (staging)
   Mobile refinements layered on top of the ported Claude Design
   pages. Scoped under body.sfn so they out-specify the pages'
   own inline `.sfn-fig` !important rules (which load later in the
   body and would otherwise win on document order).
   ============================================================ */

/* ---- Global link reset (matches the ported Claude Design pages, which set
   `a { color:#1a1a1a; text-decoration:none }` inline). Without this, the blog
   and case-study nav / footer / card links fall back to the browser default:
   underlined, and purple once visited. Article body links keep their own
   orange + underline via the higher-specificity `.ar-body a` rule. ---- */
a { color: #1a1a1a; text-decoration: none; }
a:hover { color: #ff6b00; }

@media (max-width: 640px) {
  /* ---- Multi-step "pipeline" row -> 2-column grid on phones.
     Was grid repeat(5,1fr): five columns crammed into a phone width.
     Now 2x2 for steps 1-4, with step 5 centered on its own third row. ---- */
  .sfn .sfn-pipeline {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 34px 14px !important;
  }
  /* the absolute connector line only makes sense across a single row - hide it */
  .sfn .sfn-pipeline .sfn-pipeline-line { display: none !important; }
  .sfn .sfn-pipeline .sfn-step { padding: 0 !important; }
  /* step 5 spans the full width and centers on row 3 */
  .sfn .sfn-pipeline .sfn-step:last-child { grid-column: 1 / -1 !important; }

  /* ---- Visual figure cards: scale down + center so they don't span
     full width (chart card AND illustration both use .sfn-fig).
     Higher specificity (.sfn .sfn-fig) beats the page's own
     `.sfn-fig{max-width:480px!important;width:100%!important}`. ---- */
  .sfn .sfn-fig {
    max-width: 300px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .sfn .sfn-fig > * { max-width: 100% !important; }
  .sfn .sfn-fig svg { max-width: 100% !important; height: auto !important; }
  /* the dark chart card carries heavy desktop padding - trim it on mobile */
  .sfn .sfn-fig[style*="background:#1a1a1a"] {
    padding: 22px !important;
    border-radius: 18px !important;
    box-shadow: 5px 5px 0 #1a1a1a !important;
  }

  /* stack 3-column card rows on phones (pricing "THE SHAPE", partners "Three steps") */
  .sfn [style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: 1fr !important; }
  /* hide decorative floating $ tiles that overlap the headline on mobile */
  .sfn .cr-drift { display: none !important; }

  /* "The same roster. Run two ways." — keep the by-hand vs on-SFN mapping on
     mobile: 2 columns, drop the middle arrow column (else cells reflow into a
     single column and the BY HAND / ON SFN AI headers orphan). */
  .sfn .hiw-machine { grid-template-columns: 1fr 1fr !important; column-gap: 12px !important; }
  .sfn .hiw-mid-arrow { display: none !important; }

  /* Client logo marquee (home / demo / pricing): the tiles are a fixed
     150x56 that reads oversized on a phone. Scale them down a touch.
     The 150x56 signature is logo-tiles only, so this is page-agnostic. */
  .sfn [style*="width:150px;height:56px"] {
    width: 104px !important;
    height: 40px !important;
    padding: 4px 10px !important;
  }
}

/* ============================================================
   Fix: two-column rows that flip to `flex-direction:column` on
   tablet/mobile. Their children carry `flex:1 1 <N>px`; once the
   flex axis is vertical that basis is read as a FORCED HEIGHT, so
   short content sits in an over-tall box and leaves a large empty
   gap below it (the "too much white space" on Hero, The Gate,
   creators, partners, contact, etc.). Resetting the basis to auto
   lets each child collapse to its own content height.
   Scoped per page to each container's own breakpoint so the row
   layout above the breakpoint is never touched.
   ============================================================ */
@media (max-width: 940px) {
  .sfn .hiw-2col > *,
  .sfn .ab-2col > * { flex-basis: auto !important; }

  /* Case-study testimonial: the portrait column derived its height from the
     same flex basis, and its inner box used height:100% + min-height:380px —
     a near-square that cropped the 16:9 embed (and would collapse to 0 once
     the basis is gone). Pin it to a real 16:9 box that sizes off its width. */
  .sfn [style*="min-height:380px"] {
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
  }

  /* "Schedule to the calendar." / "Set the phase." — keep these two directive
     cards side-by-side (2-up) on mobile instead of stacking, per request. */
  .sfn .hiw-timing-2up {
    flex-direction: row !important;
    gap: 12px !important;
  }
  .sfn .hiw-timing-2up > * {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 18px 16px !important;
  }
}
@media (max-width: 960px) {
  .sfn .cr-2col > *,
  .sfn .pr-2col > * { flex-basis: auto !important; }
}
@media (max-width: 760px) {
  .sfn .ct-close > *,
  .sfn .ct-route > * { flex-basis: auto !important; }
}
@media (max-width: 680px) {
  .sfn .pt-close > * { flex-basis: auto !important; }
}

/* ---- FAQ accordion: statically rendered <details>, zero-JS.
   The +/- glyph is driven purely by the open state. ---- */
.sfn .sfn-faq > summary { list-style: none; }
.sfn .sfn-faq > summary::-webkit-details-marker { display: none; }
.sfn .sfn-faq .sfn-faq-sign::after { content: "+"; }
.sfn .sfn-faq[open] .sfn-faq-sign::after { content: "\2212"; } /* minus */

/* ---- Mobile hamburger menu (zero-JS <details>). Appears where the inline
   nav links hide (<=860px); the header nav becomes logo | burger. ---- */
.sfn-burger { display: none; }
@media (max-width: 860px) {
  .sfn nav[style*="1fr auto 1fr"] {
    position: relative;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center;
  }
  /* hide the desktop right-side CTA cluster (Log in + "Book a call") on mobile
     (all header nav layouts); the burger carries both. On grid navs the cluster
     is a div[justify-self:end]; on the flex navs (contact/partners) it is a
     div[justify-content:flex-end]. Legacy direct-child selectors kept as a
     belt-and-braces fallback. Header collapses to logo | burger. */
  .sfn nav > div[style*="justify-self:end"],
  .sfn nav > div[style*="justify-content:flex-end"],
  .sfn nav > a[href="/demo"],
  .sfn nav > a[href="#pick-a-time"],
  .sfn nav > button { display: none !important; }
  .sfn-burger { display: block; }
  .sfn-burger > summary {
    list-style: none; width: 46px; height: 40px;
    border: 2px solid #1a1a1a; border-radius: 10px; background: #fff;
    box-shadow: 3px 3px 0 #1a1a1a; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
  }
  .sfn-burger > summary::-webkit-details-marker { display: none; }
  .sfn-burger > summary > span,
  .sfn-burger > summary > span::before,
  .sfn-burger > summary > span::after {
    content: ""; display: block; width: 20px; height: 2.5px; background: #1a1a1a;
  }
  .sfn-burger > summary > span { position: relative; }
  .sfn-burger > summary > span::before { position: absolute; top: -6px; }
  .sfn-burger > summary > span::after { position: absolute; top: 6px; }
  .sfn-burger[open] > summary { background: #c7f59b; }
  .sfn-burger-menu {
    position: absolute; right: 0; top: 54px; z-index: 100;
    background: #fff; border: 3px solid #1a1a1a; border-radius: 14px;
    box-shadow: 6px 6px 0 #1a1a1a; padding: 10px;
    display: flex; flex-direction: column; gap: 2px; min-width: 210px;
  }
  .sfn-burger-menu a {
    font-family: var(--font-sans); font-weight: 700; font-size: 16px;
    color: #1a1a1a; padding: 11px 14px; border-radius: 8px; text-decoration: none;
  }
  .sfn-burger-cta {
    background: #ff6b00; color: #fff; text-align: center;
    border: 2px solid #1a1a1a; margin-top: 6px; box-shadow: 3px 3px 0 #1a1a1a;
  }
}

/* ---------------------------------------------------------------------------
   Homepage "content ideas" phone stage (added with the 2026-07-24 refresh).
   The two phones are positioned with percentage translates calibrated for the
   480px desktop stage. At 375px the stage collapses to ~300px, so the back
   phone's -82% offset pushed it 27px off the left edge of the viewport — no
   scrollbar (the ancestor clips it) but visibly guillotined. Tighten both
   offsets on narrow screens so the pair stays inside the stage and the back
   phone still peeks out behind the front one.
   --------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .sfn .pv-back  { transform: translate(-70%, -50%) rotate(-7deg) !important; }
  .sfn .pv-front { transform: translate(-38%, -50%) rotate(3deg)  !important; }
}