/* Weave website styles.
   Every value here comes from design.html. If the design moves, move these. */

:root {
  --bg: #F6F6F4;
  --ink: #16161A;
  --body: #2E2E34;
  --muted: #6B6B72;
  --spec: #4A4A52;
  --on-dark: #B4B4BC;
  --yellow: #FFD84B;
  --highlight: #FFE47A;
  --link: #0A84FF;
  --rule: rgba(22, 22, 26, 0.12);
  --rule-soft: rgba(22, 22, 26, 0.1);
  --pad: clamp(20px, 5vw, 28px);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Figtree, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

img { max-width: 100%; height: auto; }
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--link); }
::selection { background: var(--yellow); color: var(--ink); }
:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; border-radius: 4px; }

/* clip, not hidden. overflow-x:hidden would make this a scroll container, and
   the sticky header would then stick to it rather than to the viewport, which
   means it scrolls away. clip guards the same overflow without that. */
.page { max-width: 100%; overflow-x: clip; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  background: var(--ink);
  color: #FFFFFF;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  z-index: 100;
}
.skip-link:focus { left: 8px; color: #FFFFFF; }

/* Containers ------------------------------------------------------------- */

.wrap { max-width: 1280px; margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.wrap--media { max-width: 1180px; }
.wrap--shot { max-width: 1120px; }

/* Header ----------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--rule-soft);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 9px;
  padding-bottom: 9px;
}
.logo { display: flex; align-items: center; gap: 9px; }
.logo img { width: 24px; height: 24px; display: block; }
.logo span { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }

.nav { display: flex; align-items: center; gap: 24px; }
.nav__link { font-size: 15px; font-weight: 600; color: var(--muted); }

.btn {
  display: inline-block;
  background: var(--ink);
  color: #FFFFFF;
  font-weight: 700;
  border-radius: 999px;
}
.btn:hover { color: #FFFFFF; background: #000000; }
.btn--nav { font-size: 15px; padding: 8px 18px; }
.btn--cta { font-size: 17px; padding: 16px 28px; }

/* Devices ---------------------------------------------------------------- */
/* A frame PNG with a transparent screen, over a screen element that holds
   the screenshot. Empty screens show their tint, which is how the page reads
   until design delivers the shots. Drop an <img> into .device__screen. */

.device { position: relative; }
/* height:auto is load-bearing. The frames carry width/height HTML attributes so
   the browser can reserve the right space before they load, and those attributes
   act as presentational hints: without this, each frame keeps its full pixel
   height while the width scales down, and the device stretches vertically. */
.device__frame { position: relative; z-index: 2; width: 100%; height: auto; display: block; }
.device__screen { position: absolute; overflow: hidden; background: #FFFFFF; }
/* The shots come out of the simulator with square corners. overflow:hidden and
   the border-radius on .device__screen above are what round them to the device,
   so nothing pokes out past the bezel. contain rather than cover: the shots are
   pre-fitted to the aperture, and contain guarantees the original aspect ratio
   survives even if a shot arrives at some other size. */
.device__screen img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Measured from the transparent aperture in each frame PNG:
   iPad 2420x1668 inside 2640x1880, iPhone 1260x2736 inside 1380x2880.
   build-screenshots.py pads each shot to these same ratios, so a screenshot
   fills its aperture corner to corner with nothing cropped or stretched.

   These boxes are the aperture's bounding rectangle, and their corners are
   rounded deliberately less than the aperture's own. The device's screen corner
   is a squircle, which a border-radius can only approximate. Approximate it too
   hard and the box is cut inside the aperture, leaving a crescent of the page
   showing through: invisible against a light screenshot, a bright hairline
   around a dark one. Approximate it too softly and the shot's square corner
   escapes past the bezel's curve into the page.

   So: round enough to stay inside the bezel, never more than the aperture, and
   let the frame draw the curve you actually see. The iPad aperture's radius is
   61px against the 48px set here; the iPhone's is 195px against 164px. */
.device--ipad .device__screen {
  left: 4.167%;
  top: 5.638%;
  width: 91.667%;
  height: 88.723%;
  border-radius: 2% / 2.9%;
}
.device--iphone .device__screen {
  left: 4.348%;
  top: 2.500%;
  width: 91.304%;
  height: 95.000%;
  border-radius: 13% / 6%;
}

.screen--dim .device__screen { background: #F1F1EF; }
.screen--dark .device__screen { background: #2C2C31; }
.screen--darkest .device__screen { background: #0E0E11; }

.shadow-lg { filter: drop-shadow(0 40px 70px rgba(22, 22, 26, 0.2)); }
.shadow-md { filter: drop-shadow(0 30px 54px rgba(22, 22, 26, 0.18)); }
.shadow-md-phone { filter: drop-shadow(0 30px 54px rgba(22, 22, 26, 0.2)); }
.shadow-phone { filter: drop-shadow(0 26px 44px rgba(22, 22, 26, 0.3)); }
.shadow-step { filter: drop-shadow(0 20px 40px rgba(22, 22, 26, 0.16)); }
.shadow-on-dark { filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.4)) drop-shadow(0 30px 60px rgba(0, 0, 0, 0.6)); }
.shadow-on-dark-phone { filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.4)) drop-shadow(0 24px 48px rgba(0, 0, 0, 0.6)); }

/* An iPad with a phone overlapping its corner. */
.duo { position: relative; padding-bottom: 8%; }
.duo__phone { position: absolute; bottom: 0; width: 30.15%; }
.duo__phone--left { left: -5%; }
.duo__phone--right { right: -5%; }

/* Sections --------------------------------------------------------------- */

.hero { padding-top: clamp(56px, 11vw, 92px); scroll-margin-top: 56px; }
.hero__title {
  margin: 0;
  font-size: clamp(40px, 7.2vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.04em;
  font-weight: 800;
  max-width: 11em;
}
.hero__sub {
  margin: clamp(20px, 4vw, 30px) 0 0;
  font-size: clamp(17px, 1.8vw, 22px);
  line-height: 1.5;
  color: var(--body);
  max-width: 31em;
}

.cta {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: clamp(28px, 4vw, 36px);
}
.cta__note { font-size: 15px; line-height: 1.45; color: var(--muted); }

.showcase { padding-top: clamp(48px, 8vw, 80px); }

.section { padding-top: clamp(80px, 12vw, 120px); }
.section--tight { padding-top: clamp(72px, 11vw, 104px); }
.section--takeaway { padding-top: clamp(64px, 10vw, 96px); }
.section__title {
  margin: 0;
  font-size: clamp(32px, 4.4vw, 58px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 800;
}
.section__lede {
  margin: 16px 0 0;
  font-size: clamp(17px, 1.6vw, 19px);
  line-height: 1.5;
  color: var(--body);
  max-width: 46em;
}
.section__lede--narrow { max-width: 30em; }
.section__lede--wide { max-width: 47em; line-height: 1.55; }

.takeaway {
  background: var(--ink);
  color: #FFFFFF;
  border-radius: clamp(22px, 4vw, 30px);
  padding: clamp(30px, 6vw, 64px);
}
.takeaway__eyebrow { font-size: 13px; font-weight: 800; letter-spacing: 0.14em; color: var(--yellow); }
.takeaway__quote {
  margin: clamp(16px, 3vw, 22px) 0 0;
  font-size: clamp(24px, 3.2vw, 42px);
  line-height: 1.18;
  letter-spacing: -0.025em;
  font-weight: 700;
  font-style: italic;
  max-width: 19em;
}

.stack {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(36px, 4vw, 60px);
}
.stack--media { align-items: end; margin-top: clamp(36px, 5vw, 44px); }
.stack__title {
  margin: 0;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.07;
  letter-spacing: -0.03em;
  font-weight: 800;
}
.stack__body { margin: 14px 0 0; font-size: 17px; line-height: 1.55; color: var(--body); }
.stack__body--wide { max-width: 36em; }
.stack__body--narrow { max-width: 24em; }
.stack__phone { position: relative; width: 46.74%; }

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 30px;
  margin-top: clamp(38px, 6vw, 56px);
}
.step__title { font-size: 17px; font-weight: 700; line-height: 1.25; margin-top: clamp(16px, 3vw, 22px); }
.step__body { font-size: 15px; line-height: 1.45; color: var(--muted); margin-top: 6px; }

.band {
  margin-top: clamp(88px, 13vw, 130px);
  background: var(--ink);
  color: #FFFFFF;
  padding: clamp(68px, 10vw, 100px) 0 clamp(72px, 10vw, 104px);
}
.band .section__lede { color: var(--on-dark); }
.band__shot { margin-top: clamp(40px, 7vw, 64px); }

.badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--ink);
  background: var(--yellow);
  padding: 5px 10px;
  border-radius: 999px;
  margin-bottom: 16px;
}

.highlight { background: var(--highlight); padding: 0 3px; border-radius: 3px; }

.spec {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(26px, 4vw, 36px);
  padding-bottom: clamp(32px, 5vw, 40px);
  border-bottom: 1px solid var(--rule);
}
.spec__label { font-size: 15px; font-weight: 700; }
.spec__value { font-size: 16px; line-height: 1.55; color: var(--spec); margin-top: 8px; }

.closing { padding-top: clamp(64px, 10vw, 96px); padding-bottom: clamp(80px, 12vw, 112px); }
.closing__title {
  margin: 0;
  font-size: clamp(36px, 5.4vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.04em;
  font-weight: 800;
  max-width: 11em;
}

/* Footer ----------------------------------------------------------------- */

.footer { border-top: 1px solid var(--rule); }
.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: clamp(22px, 4vw, 24px);
  padding-bottom: clamp(22px, 4vw, 24px);
}
.footer__brand { display: flex; align-items: center; gap: 9px; }
.footer__brand img { width: 22px; height: 22px; display: block; }
.footer__brand span { font-size: 16px; font-weight: 800; letter-spacing: -0.02em; }
.footer__links { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.footer__links a, .footer__links span { font-size: 15px; color: var(--muted); }

/* Text pages ------------------------------------------------------------- */

.prose {
  max-width: 46em;
  padding-top: clamp(48px, 8vw, 76px);
  padding-bottom: clamp(72px, 11vw, 104px);
}
.prose h1 {
  margin: 0 0 8px;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 800;
}
.prose h2 {
  margin: clamp(38px, 6vw, 52px) 0 0;
  font-size: clamp(21px, 2.4vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 800;
}
.prose h3 { margin: 30px 0 0; font-size: 18px; line-height: 1.3; font-weight: 700; }
.prose p, .prose li { font-size: 17px; line-height: 1.6; color: var(--body); }
.prose p { margin: 14px 0 0; }
.prose ul { margin: 14px 0 0; padding-left: 22px; }
.prose li { margin-top: 8px; }
.prose strong { color: var(--ink); font-weight: 700; }
.prose a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.prose hr { border: 0; border-top: 1px solid var(--rule); margin: clamp(34px, 5vw, 46px) 0 0; }
.prose__lede { margin: clamp(16px, 3vw, 22px) 0 0; font-size: clamp(18px, 2vw, 21px); line-height: 1.5; color: var(--body); }

.contact {
  margin: clamp(26px, 4vw, 34px) 0 0;
  padding: clamp(24px, 4vw, 32px);
  background: var(--ink);
  color: #FFFFFF;
  border-radius: clamp(18px, 3vw, 24px);
}
.contact__label { font-size: 13px; font-weight: 800; letter-spacing: 0.14em; color: var(--yellow); }
/* Compound selectors on purpose: the .prose a and .prose p rules above are
   more specific than a lone class, and would otherwise repaint this card. */
.prose .contact__email {
  display: inline-block;
  margin-top: 10px;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  text-decoration: none;
}
.prose .contact__email:hover { color: var(--yellow); }
.prose .contact__note { margin: 12px 0 0; font-size: 15px; line-height: 1.5; color: var(--on-dark); }

/* Responsive ------------------------------------------------------------- */
/* These stay last so they win without !important. */

.only-mobile { display: none; }

@media (max-width: 860px) {
  .stack { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; gap: 22px 18px; }
  .only-desktop { display: none; }   /* devices, and the two-up's second column */
  .only-mobile { display: block; }
  .duo { padding-bottom: 0; }
  .phone-shot { position: static; inset: auto; width: 64%; margin: 0 auto; }
  .cta { flex-direction: column; align-items: stretch; gap: 16px; }
  .cta .btn { text-align: center; }
  .nav { gap: 14px; }
  .btn--nav { font-size: 14px; padding: 7px 14px; }
  .footer__inner { flex-direction: column; align-items: flex-start; gap: 18px; }
  .footer__links { gap: 18px; }
}

@media (max-width: 420px) {
  .nav__link { display: none; }
  .phone-shot { width: 72%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}