/* OPTICHAVN — device fit-ups for the static export.
   Loaded last so it can trim the frozen desktop-first Tailwind classes
   down to something that reads properly on iPhone and iPad. Layout,
   colour and copy are untouched; only spacing and scale are adjusted. */

/* ---------- iPad and below ---------- */
@media (max-width: 1023px) {
  /* The "We Don't Dropship." panel is a full-height sticky column on
     desktop. On a tablet/phone that becomes a screen of empty black
     before any copy appears. */
  .sticky.h-screen {
    position: static !important;
    height: auto !important;
    padding-top: 7rem;
    padding-bottom: 2.5rem;
  }

  /* Frozen desktop rhythm (py-40 / md:py-56 / space-y-32) is far too tall
     once the columns stack. */
  .py-40,
  .md\:py-56 {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }
  .py-24,
  .md\:py-32 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  .space-y-32 > * + * {
    margin-top: 4rem !important;
  }

  /* Stacked columns keep their desktop divider, which reads as a stray
     vertical hairline mid-page. */
  .border-l,
  .border-r {
    border-left-width: 0 !important;
    border-right-width: 0 !important;
  }

  /* Large lede paragraphs: cap the desktop step-up so lines don't run to
     three or four words. */
  .text-xl.md\:text-3xl {
    font-size: 1.15rem !important;
    line-height: 1.55 !important;
  }
  .text-base.md\:text-lg {
    font-size: 0.95rem !important;
  }

  /* The scroll cue sits on top of the hero marquee at these widths. */
  [data-cue] {
    display: none !important;
  }

  /* WHY US — the exported md breakpoint was squeezing the heading into
     four columns and all three principles into the remaining eight. Keep
     both rows full-width on tablets so every title and paragraph shares a
     clean baseline instead of forming three narrow text towers. */
  main section > .grid.grid-cols-1.md\:grid-cols-12.gap-8:has(.md\:grid-cols-3) {
    display: block !important;
  }
  main section > .grid.grid-cols-1.md\:grid-cols-12.gap-8:has(.md\:grid-cols-3) > .md\:col-span-4 {
    margin-bottom: 2rem;
  }
  main section .md\:col-span-8.grid.grid-cols-1.md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    border-left-width: 0 !important;
    border-top: 1px solid #ffffff33;
  }
  main section .md\:col-span-8.grid.grid-cols-1.md\:grid-cols-3 > div {
    min-width: 0;
    min-height: 21rem !important;
    padding: 1.5rem !important;
    border-top-width: 0 !important;
  }
  main section .md\:col-span-8.grid.grid-cols-1.md\:grid-cols-3 h3 {
    font-size: 1rem !important;
    overflow-wrap: anywhere;
  }
  main section .md\:col-span-8.grid.grid-cols-1.md\:grid-cols-3 p {
    max-width: none !important;
  }

  /* FOOTER — use a deliberate two-column tablet layout, then give the
     newsletter its own row. This prevents the email, input and CTA from
     colliding across four compressed desktop columns. */
  footer > div > .grid.grid-cols-1.md\:grid-cols-12 {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) !important;
    column-gap: 3rem !important;
    row-gap: 2.5rem !important;
  }
  footer > div > .grid.grid-cols-1.md\:grid-cols-12 > * {
    min-width: 0;
    grid-column: auto !important;
  }
  footer > div > .grid.grid-cols-1.md\:grid-cols-12 > :last-child {
    grid-column: 1 / -1 !important;
    max-width: 32rem;
  }
  footer form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  footer input {
    min-width: 0;
  }
  footer > div > .flex.flex-wrap.items-center.justify-between {
    align-items: flex-start !important;
  }
  footer > div > .flex.flex-wrap.items-center.justify-between > :last-child {
    width: 100%;
  }
  footer .font-display.font-extrabold.uppercase.text-center {
    line-height: 0.9 !important;
  }
}

/* ---------- iPhone ---------- */
@media (max-width: 639px) {
  .optic-hero-title {
    font-size: 13.6vw !important;
  }
  .optic-gutter {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  /* Founder rows: name + role side by side overflows a 390px viewport. */
  .flex.items-baseline.justify-between {
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
  }
  .text-3xl.md\:text-4xl {
    font-size: 1.5rem !important;
  }
  footer .flex.justify-between {
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  main section .md\:col-span-8.grid.grid-cols-1.md\:grid-cols-3 {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  main section .md\:col-span-8.grid.grid-cols-1.md\:grid-cols-3 > div {
    min-height: 15rem !important;
    border-right-width: 0 !important;
    border-top: 1px solid #ffffff33 !important;
  }
  footer > div > .grid.grid-cols-1.md\:grid-cols-12 {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  footer > div > .grid.grid-cols-1.md\:grid-cols-12 > :last-child {
    grid-column: auto !important;
  }
  footer form {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  footer form button {
    justify-self: start;
    padding: 0.75rem 0;
  }
}

/* Never let a frozen desktop width push a horizontal scrollbar on device. */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* ---------- iPad column fit-ups ---------- */
@media (max-width: 1023px) {
  /* Founder names and the "Founders." heading are sized for a full-width
     desktop column; in the narrower stacked column they run off the edge. */
  h2.optic-fit-line {
    font-size: clamp(1.9rem, 6vw, 3rem) !important;
  }
  .text-3xl.md\:text-4xl {
    font-size: 1.45rem !important;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  .flex.items-baseline.justify-between {
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
  }
}

/* ---------- Hero fit: bottom-anchored (original layout) ----------
   Back to the original composition — the wordmark and marquee sit at the
   foot of the viewport with the open space above, rather than centred. */
.optic-hero {
  justify-content: flex-end !important;
}
.optic-hero-inner {
  flex: 0 1 auto !important;
  justify-content: flex-end !important;
}
.optic-hero-marquee {
  margin-bottom: clamp(0.5rem, 2vh, 1.5rem);
}


/* Narrow phones: the clamp() floor (3rem) is wider than the screen for
   "ESSENTIALS." — scale purely with viewport width instead. */
@media (max-width: 520px) {
  .optic-hero-title {
    font-size: 8.6vw !important;
  }
}

/* ---------- Footer wordmark: always fits the viewport ----------
   Sized so the full word is visible at rest (centred, ~7vw slack each
   side). overflow:hidden lets the sideways drift slide the word in from
   off-edge and clip cleanly WITHOUT pushing a horizontal scrollbar.
   transform is left to GSAP (motion.js §9) — no !important override. */
[data-footer-mark] {
  box-sizing: border-box;
  width: 100%;
  font-size: min(18rem, 17vw) !important;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-align: center;
  will-change: transform;
}

@media (max-width: 1023px) {
  [data-footer-mark] {
    font-size: 17vw !important;
  }
}


/* ---------- Embedded in the React shell ----------
   When these pages are framed by the app, the app renders its own nav and
   scroll-progress bar. Hide the static duplicates so the top-right tabs
   match every other route. */
html.optic-embed header { display: none !important; }
html.optic-embed .optic-progress { display: none !important; }