/* Shared fixes on top of the design export (all three pages).
   The export uses inline styles only, so overrides need !important.
   Hooks (class names) are added to the markup by hand - see CLAUDE.md. */

/* Black from the very first paint (the export's own page styles only arrive
   once the runtime has rendered) and a fixed scrollbar gutter, so the page
   doesn't shift when content appears or the pop-up locks scrolling. */
html { background: #000; scrollbar-gutter: stable; }
body { background: #000; }
/* Never scroll sideways: on iOS a single element poking 2px out (e.g. the
   orbit canvas, inset:-6%) makes the whole page wobble left/right. */
html { overflow-x: hidden; }
@supports (overflow-x: clip) { html { overflow-x: clip; } }
section[data-screen-label="02 Thesis"] { overflow-x: clip; }

/* Mobile browsers: 100vh is taller than the visible area (toolbars), so the
   hero's bottom line / the playbook's step rail ended up behind Safari's bar.
   svh = the height that is actually visible. */
@supports (height: 100svh) {
  #top { min-height: 100svh !important; }
  #funnel > div { height: calc(100svh - 56px) !important; }
}

.hv-cta-short { display: none; }

/* ---------- Tablet / phone: navigation ---------- */
@media (max-width: 760px) {
  .hv-nav {
    grid-template-columns: auto 1fr auto !important;
    gap: 10px !important;
    padding: 0 16px !important;
  }
  .hv-nav-links {
    justify-self: center;
    font-size: 10px !important;
    letter-spacing: 0.1em !important;
    white-space: nowrap;
  }
  .hv-nav-links a { padding: 8px 9px !important; }
  .hv-for { display: none; }
  .hv-nav-cta {
    padding: 8px 10px !important;
    font-size: 10px !important;
    letter-spacing: 0.1em !important;
    white-space: nowrap;
  }
  .hv-cta-long { display: none; }
  .hv-cta-short { display: inline; }

  /* traders footer: three columns don't fit */
  .hv-foot {
    grid-template-columns: 1fr !important;
    text-align: left !important;
    gap: 12px !important;
  }
  .hv-foot > * { text-align: left !important; justify-content: flex-start !important; }
}

@media (max-width: 400px) {
  .hv-nav { gap: 6px !important; padding: 0 12px !important; }
  .hv-nav-links { letter-spacing: 0.04em !important; }
  .hv-nav-links a { padding: 7px 6px !important; }
  .hv-nav-cta { padding: 7px 8px !important; letter-spacing: 0.04em !important; }
}

@media (max-width: 350px) {
  .hv-nav-cta { display: none !important; }
}

/* ---------- Traders: pinned "Scaling playbook" on phones ----------
   The sticky stage was built for wide screens: header, text column,
   visual card and step rail must all fit into one phone viewport. */
@media (max-width: 760px) {
  #funnel > div { gap: 14px !important; padding: 16px 16px 14px !important; }

  /* header row: only the headline, step counter lives in the rail */
  #funnel > div > div:first-child { grid-template-columns: 1fr !important; }
  #funnel > div > div:first-child > span { display: none !important; }
  #funnel > div > div:first-child > h2 { font-size: 30px !important; }

  /* text column on top, card below */
  #funnel > div > div:nth-child(2) { flex-wrap: nowrap !important; flex-direction: column !important; gap: 14px !important; }
  #funnel > div > div:nth-child(2) > div:first-child {
    flex: 0 0 auto !important;
    border-right: 0 !important;
    padding-right: 0 !important;
    gap: 12px !important;
  }
  #funnel > div > div:nth-child(2) > div:first-child > div { gap: 10px !important; }
  #funnel > div > div:nth-child(2) > div:first-child p { display: none !important; }
  #funnel > div > div:nth-child(2) > div:first-child > div > span:nth-child(2) { font-size: 34px !important; }

  /* visual card takes the rest; its scenes are laid out wider and scaled
     down so the desktop compositions keep their proportions */
  #funnel > div > div:nth-child(2) > div:nth-child(2) {
    flex: 1 1 auto !important;
    min-height: 200px !important;
  }
  #funnel > div > div:nth-child(2) > div:nth-child(2) > div:nth-child(2) > div { zoom: 0.72; }
  /* the card's 01/02/03 beat row repeats the list in the text column */
  #funnel > div > div:nth-child(2) > div:nth-child(2) > div:nth-child(3) { display: none !important; }

  /* step rail: numbers only */
  #funnel > div > div:nth-child(3) { gap: 4px !important; }
  #funnel > div > div:nth-child(3) > div > div:last-child > span:last-child { display: none !important; }
}

/* ---------- Phones: sections whose columns don't collapse on their own ---------- */
@media (max-width: 760px) {
  /* home · 002 How we work: the sticky text column would stay pinned while
     the service list scrolls over it once both columns are stacked */
  #work > div:first-child { position: static !important; }

  /* traders · 002 Your platform: text below headline, 3x2 feature labels */
  #brands > div:first-child { grid-template-columns: 1fr !important; }
  #brands > div:first-child button { padding: 12px 8px !important; letter-spacing: 0.08em !important; }
  #brands > div:nth-child(2) > div:nth-child(2) > div:nth-child(2) > div:nth-child(6) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  /* projects · 003 What we do: number + title, description underneath */
  #services > div:nth-child(2) > div {
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: baseline !important;
    row-gap: 14px !important;
  }
  #services > div:nth-child(2) > div > span:nth-child(2) { font-size: 40px !important; }
  #services > div:nth-child(2) > div > span:nth-child(3) { grid-column: 2 !important; }
}

@media (max-width: 400px) {
  .hv-legal { flex-wrap: wrap; gap: 6px 14px !important; }
}