/* BrainDump marketing site — hand CSS for things Tailwind CDN can't express cleanly:
   the iPhone device frame, the FOUC guard, and reduced-motion. Everything else
   is Tailwind utilities driven by assets/js/tailwind.config.js. */

:root { --accent: #F09837; }

html { -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }

/* ---- FOUC guard ----------------------------------------------------------
   <html class="tw-loading"> is hidden until chrome.js has cloned the shared
   nav/footer templates AND Tailwind's CDN JIT has applied. chrome.js removes
   the class on hydrate. With JS disabled, the <noscript> rule in each page's
   <head> re-shows the body so it degrades to readable (if unstyled) HTML. */
html.tw-loading { visibility: hidden; }

/* ---- iPhone device frame -------------------------------------------------
   One recipe, two sizes. Drop a screenshot in: <div class="device"><img ...></div>
   Maps to a future <DeviceFrame size="hero|feature" src alt /> component. */
.device {
  position: relative;
  flex: none;
  width: 320px;          /* height is driven by the screen's aspect-ratio + padding */
  background: #1d1d1f;
  border-radius: 48px;
  padding: 11px;
  box-shadow: 0 50px 90px -40px rgba(20, 20, 45, .4);
}
/* No drawn notch: real iPhone screenshots already include the status bar /
   Dynamic Island, so a drawn pill would double up. The thin dark bezel below
   is the frame. (Re-enable a drawn notch only if using notch-less mockups.) */
.device > .device-screen {
  width: 100%;
  aspect-ratio: 1206 / 2622;   /* exact iPhone 17 screenshot ratio → screenshot fits with no crop */
  border-radius: 38px;
  overflow: hidden;
  background: #f0f0f3;
}
.device > .device-screen > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;           /* aspect matches the screen, so this is exact (no zoom/crop) */
}

/* Feature size (width 280; height follows the same aspect-ratio + padding) */
.device--sm { width: 280px; border-radius: 44px; padding: 10px;
  box-shadow: 0 40px 70px -35px rgba(20, 20, 45, .35); }
.device--sm > .device-screen { border-radius: 35px; }

/* Empty/missing screenshot: a subtle placeholder so the frame never looks broken */
.device-screen:empty,
.device-screen > img:not([src]) { background: #f0f0f3; }

@media (max-width: 400px) {
  .device { width: 290px; }      /* shrink hero frame on tiny phones (height follows aspect) */
}

/* Keyboard focus indicators (links get an accent ring; buttons get an ink ring
   so it stays visible on the orange CTA band). Inputs keep their Tailwind ring. */
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
button:focus-visible { outline: 2px solid #1d1d1f; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}
