/* the wordmark: lowercase "proof" in Instrument Sans, the app's own font (bundled) */
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("./prototype/fonts/InstrumentSans-latin.woff2") format("woff2"); }
/* getproof.now, 2.2.3 (Mono light): black where the app is black, white where it is white.
   Color lives only in the data (the screenshots); the page itself is black, white and gray. */
:root {
  --black: #000;
  --white: #fff;
  --gray-1: #f2f2f4;
  --gray-2: #e5e5ea;
  --gray-3: #8e8e93;
  --gray-4: #6e6e73;
  --edge: #2c2c2e;
  --green: #30d158;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, system-ui, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --wrap: 1120px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: #000; }
body { font-family: var(--sans); color: var(--black); background: var(--white); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--black); color: var(--white); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
h1, h2 { font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(44px, 6.4vw, 80px); }
h2 { font-size: clamp(34px, 4.4vw, 54px); }
.eyebrow { margin: 0 0 16px; font-size: 15px; font-weight: 600; color: var(--gray-4); }
.lede { margin: 20px 0 0; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; color: var(--gray-4); max-width: 34em; }

/* sections */
.dark { background: var(--black); color: var(--white); }
.dark .eyebrow { color: var(--gray-3); }
.dark .lede { color: #aeaeb2; }
.light { background: var(--white); color: var(--black); }
section { padding: 112px 0; }
.light + .light { padding-top: 24px; }
.dark + .dark { padding-top: 24px; }

/* nav */
.nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; background: rgba(0,0,0,.82); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); color: var(--white); }
.nav__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-size: 20px; }
.nav__brand img { border-radius: 7px; }
.nav__pill { text-decoration: none; font-size: 15px; font-weight: 600; background: var(--white); color: var(--black); padding: 9px 16px; border-radius: 999px; }

/* phone and watch frames. iPhone 17 Pro Max to scale: a 440 x 956 pt screen with 55 pt corners inside a 14 pt
   bezel (body 468 x 984), outer corners 55 + 14 = 69 so the curves stay parallel. --w is the body's width. */
.phone { --w: 300px; width: var(--w); max-width: 100%; aspect-ratio: 468 / 984; padding: calc(var(--w) * 0.0299); border-radius: calc(var(--w) * 0.1474); background: #050506; box-shadow: inset 0 0 0 calc(var(--w) * 0.004) #2a2a2d, 0 0 0 calc(var(--w) * 0.004) #48484c, 0 30px 70px -24px rgba(0,0,0,.45); flex: none; }
.dark .phone { box-shadow: inset 0 0 0 calc(var(--w) * 0.004) #2a2a2d, 0 0 0 calc(var(--w) * 0.004) #58585e, 0 30px 80px -24px rgba(0,0,0,.9); }
.phone img { width: 100%; height: auto; aspect-ratio: 440 / 956; border-radius: calc(var(--w) * 0.1175); display: block; }
.phone--lg { --w: 340px; }
.watch { width: 168px; padding: 10px; background: #050506; border-radius: 46px; box-shadow: 0 0 0 1px #2c2e33, 0 0 0 5px #141416, 0 0 0 6px #2c2e33, 0 30px 60px -18px rgba(0,0,0,.9); flex: none; }
.watch img { width: 100%; border-radius: 36px; }
.light .watch { box-shadow: 0 0 0 1px #d1d1d6, 0 0 0 5px #1c1c1e, 0 0 0 6px #3a3a3c, 0 30px 60px -24px rgba(0,0,0,.4); }

/* hero: the lifter on video, full bleed, graded dark; copy on the left, the app on the right */
.hero { position: relative; min-height: min(100svh, 980px); padding: 0; display: flex; align-items: center; overflow: hidden; background: #000; color: #fff; margin-top: -64px; }
.hero__media { position: absolute; inset: -6% 0; z-index: 0; will-change: transform; }
.hero__photo, .hero__video { width: 100%; height: 100%; object-fit: cover; filter: brightness(.6) contrast(1.08); }
.hero__photo { object-position: 55% 40%; }
.hero__video { display: none; object-position: 50% 30%; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.72) 34%, rgba(0,0,0,.18) 62%, rgba(0,0,0,.35) 100%); }
.hero__fade { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; z-index: 1; background: linear-gradient(to bottom, rgba(0,0,0,0), #000); }
.hero__grid { position: relative; z-index: 2; width: 100%; display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; padding-top: 140px; padding-bottom: 80px; }
.hero__logo { width: 64px; height: 64px; border-radius: 16px; margin-bottom: 28px; box-shadow: 0 0 0 1px rgba(255,255,255,.14); }
.hero .eyebrow { color: rgba(255,255,255,.72); font-size: 16px; }
.hero h1 { font-size: clamp(52px, 7vw, 96px); letter-spacing: -0.045em; line-height: .96; }
.hero h1 .g { color: var(--green); }
.hero .lede { color: rgba(255,255,255,.78); max-width: 30em; }
.hero__art { position: relative; display: flex; justify-content: center; padding-bottom: 40px; will-change: transform; }
.hero__art .watch { position: absolute; right: 4%; bottom: 0; }
.cta { margin-top: 36px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.cta__note { margin: 0; font-size: 15px; line-height: 1.45; color: rgba(255,255,255,.7); }
.badge { display: inline-flex; align-items: center; gap: 10px; padding: 11px 20px 11px 16px; border-radius: 14px; background: var(--white); color: var(--black); text-decoration: none; font-weight: 700; font-size: 20px; letter-spacing: -0.01em; line-height: 1; }
.badge small { display: block; font-size: 11px; font-weight: 500; letter-spacing: 0; margin-bottom: 3px; }
.badge span { display: block; }
.badge--light { margin-top: 32px; }
.nav { background: linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,0)); backdrop-filter: none; -webkit-backdrop-filter: none; transition: background .3s ease; }
.nav.solid { background: rgba(0,0,0,.82); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); }

/* photo bands: full-bleed black-and-white gym photos as chapter breaks */
.band { position: relative; height: min(78vh, 720px); min-height: 440px; padding: 0; overflow: hidden; background: #000; color: #fff; display: flex; align-items: flex-end; }
.band__media { position: absolute; inset: -12% 0; z-index: 0; will-change: transform; }
.band__media img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.7); }
.band::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.25) 45%, rgba(0,0,0,0) 70%); }
.band__copy { position: relative; z-index: 2; width: 100%; padding-bottom: 72px; }
.band__line { margin: 0; font-size: clamp(40px, 6vw, 84px); font-weight: 800; letter-spacing: -0.045em; line-height: .98; text-wrap: balance; max-width: 12em; }
.band__sub { margin: 16px 0 0; font-size: clamp(17px, 1.5vw, 20px); color: rgba(255,255,255,.75); }

/* tour */
.tour__grid { display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center; }
.phone--video { background: #050506; }
.placeholder { width: 100%; aspect-ratio: 440 / 956; border-radius: calc(var(--w) * 0.1175); border: 1.5px dashed #3a3a3c; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #8e8e93; }
.placeholder span { font-size: 20px; font-weight: 700; color: #d1d1d6; }
.placeholder small { font-size: 14px; }

/* one feature: copy beside one phone */
.feature__grid { display: grid; grid-template-columns: 1fr auto; gap: 72px; align-items: center; }
.feature--flip .feature__copy { order: 2; }
.ticks { margin: 24px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 17px; font-weight: 600; }
.ticks li::before { content: "✓"; color: var(--green); font-weight: 800; margin-right: 10px; }

/* two or three phones in a row */
.trio__head, .duo__head { text-align: center; margin: 0 auto 56px; max-width: 720px; }
.trio__head .lede, .duo__head .lede { margin-left: auto; margin-right: auto; }
.trio__row, .duo__row { display: flex; justify-content: center; gap: 36px; }
.trio__row .phone { --w: 280px; }
.duo__row .phone { --w: 300px; }
figure { margin: 0; display: flex; flex-direction: column; align-items: center; }
figcaption { margin-top: 18px; font-size: 16px; font-weight: 600; text-align: center; }
.dark figcaption { color: #d1d1d6; }

/* Lock Screen rest widget, drawn to match the app's Live Activity */
.wrist__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; }
.wrist__art { display: flex; flex-direction: column; align-items: center; gap: 36px; }
.la { width: 100%; max-width: 420px; background: #000; border-radius: 30px; padding: 20px 18px; box-shadow: 0 0 0 1px #2c2c2e, 0 30px 70px -24px rgba(0,0,0,.9); }
.la__head { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.la__head img { width: 22px; height: 22px; border-radius: 6px; }
.la__head b { font-size: 18px; font-weight: 800; flex: 1; }
.la__rest { font-size: 14px; font-weight: 600; color: #8e8e93; }
.la__rest em { font-style: normal; color: var(--green); font-size: 19px; font-weight: 700; margin-left: 4px; font-variant-numeric: tabular-nums; }
.la__ctl { display: flex; align-items: center; gap: 7px; }
.la__gap { flex: 1; }
.la__step { width: 36px; height: 36px; border-radius: 50%; background: #2b2b2d; display: grid; place-items: center; font-size: 20px; font-weight: 600; }
.la__val { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.la__val small { font-size: 13px; font-weight: 500; color: #8e8e93; }
.la__strike { margin-top: 12px; background: #fff; color: #000; border-radius: 999px; text-align: center; padding: 13px; font-size: 17px; font-weight: 700; }
.wrist__watches { display: flex; gap: 28px; }

/* closing */
.closing { padding: 128px 0; }
.closing__inner { text-align: center; display: flex; flex-direction: column; align-items: center; }
.closing__icon { border-radius: 22px; margin-bottom: 28px; box-shadow: 0 0 0 1px #2c2c2e; }
.closing__story { margin-top: 28px; font-size: 15px; color: #aeaeb2; text-decoration: none; }
.closing__story:hover { color: var(--white); }

/* footer */
.foot { background: var(--black); color: #8e8e93; border-top: 1px solid #1c1c1e; padding: 28px 0 40px; font-size: 14px; }
.foot__row { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.foot__brand { color: var(--white); font-weight: 700; }
.foot__links { display: flex; gap: 20px; flex-wrap: wrap; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--white); }

/* reveal on scroll (landing.js adds .is-revealed) */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* tablet */
@media (max-width: 980px) {
  .trio__row { gap: 20px; }
  .trio__row .phone { --w: 230px; }
}
/* phone */
@media (max-width: 760px) {
  section { padding: 72px 0; }
  .hero { min-height: 0; }
  .hero__grid { padding-top: 110px; padding-bottom: 40px; gap: 48px; }
  .hero::before { background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.75) 45%, rgba(0,0,0,.9) 75%, #000 100%); }
  .hero__photo { display: none; }
  .hero__video { display: block; }
  .hero__logo { width: 56px; height: 56px; margin-bottom: 22px; }
  .band { height: 62vh; min-height: 380px; }
  .band__copy { padding-bottom: 48px; }
  .hero__grid, .tour__grid, .feature__grid, .wrist__grid { grid-template-columns: 1fr; gap: 40px; }
  .feature--flip .feature__copy { order: 0; }
  .hero__art .watch { right: 0; width: 132px; }
  .phone, .phone--lg { --w: 280px; margin: 0 auto; }
  .trio__row, .duo__row { overflow-x: auto; justify-content: flex-start; scroll-snap-type: x mandatory; padding: 0 24px 8px; margin: 0 -24px; gap: 18px; -webkit-overflow-scrolling: touch; }
  .trio__row figure, .duo__row figure { scroll-snap-align: center; }
  .trio__row .phone, .duo__row .phone { --w: 250px; }
  .trio__head, .duo__head { text-align: left; margin-bottom: 36px; }
  .trio__head .lede, .duo__head .lede { margin-left: 0; }
  .wrist__watches { gap: 16px; }
  .wrist__watches .watch { width: 140px; }
  .cta { gap: 12px; }
  .la { padding: 18px 14px; }
  .la__ctl { gap: 5px; }
  .la__step { width: 32px; height: 32px; font-size: 18px; }
  .la__val { font-size: 19px; white-space: nowrap; }
}
/* hero phone: the same size as the others (300), and smaller on short windows so it never gets cut off */
.phone--hero { --w: clamp(230px, calc((100svh - 190px) / 2.1), 300px); }
.hero__art .watch { width: clamp(130px, calc((100svh - 190px) / 4.4), 168px); }
@media (max-width: 760px) { .phone--hero { --w: 280px; } .hero__art .watch { width: 132px; } }
/* the logger's bottom is black: a black backing (a white one showed as a hairline at the rounded bottom edge), the
   picture anchored 1px low so its top still clears the status bar */
.phone__video { display: block; width: 100%; height: auto; aspect-ratio: 440 / 956; object-fit: cover; object-position: 50% calc(100% + 1px); border-radius: calc(var(--w) * 0.1175); background: #000; }
.tour__cap { margin: 22px 0 0; font-size: 16px; font-weight: 600; color: #fff; min-height: 2.6em; max-width: 26em; }

/* faint data visualizations behind white sections: Proof's own chart shapes, very light, drawn in as the section
   enters; never behind text or a phone */
.has-ghost { position: relative; overflow: hidden; }
.has-ghost > .wrap { position: relative; z-index: 1; }
.ghost { position: absolute; inset: 0; z-index: 0; pointer-events: none; will-change: transform; }
.ghost svg { position: absolute; overflow: visible; }
.ghost .g-stroke { fill: none; stroke: #e3e3e8; stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ghost .g-area { fill: url(#g-fade); }
.ghost .g-dot { fill: #fff; stroke: #e3e3e8; stroke-width: 3; }
.ghost .g-bars rect { fill: #f0f0f3; }
.ghost .g-track { fill: none; stroke: #f4f4f6; stroke-width: 16; }
.ghost .g-arc { fill: none; stroke: #e8e8ec; stroke-width: 16; stroke-linecap: round; }
/* entrance: hidden until the section is seen, then each shape draws in */
.has-ghost .g-stroke { stroke-dasharray: 1400; stroke-dashoffset: 1400; transition: stroke-dashoffset 1.8s var(--ease) .15s; }
.has-ghost .g-area, .has-ghost .g-dot { opacity: 0; transition: opacity 1.2s ease .9s; }
.has-ghost .g-bars rect { transform-box: fill-box; transform-origin: bottom; transform: scaleY(0); transition: transform 1s var(--ease); }
.has-ghost .g-bars rect:nth-child(2) { transition-delay: .08s; } .has-ghost .g-bars rect:nth-child(3) { transition-delay: .16s; } .has-ghost .g-bars rect:nth-child(4) { transition-delay: .24s; }
.has-ghost .g-bars rect:nth-child(5) { transition-delay: .32s; } .has-ghost .g-bars rect:nth-child(6) { transition-delay: .4s; } .has-ghost .g-bars rect:nth-child(7) { transition-delay: .48s; }
.has-ghost .g-arc { stroke-dashoffset: 72; transition: stroke-dashoffset 1.6s var(--ease) .2s; }
.has-ghost.ghost-in .g-stroke { stroke-dashoffset: 0; }
.has-ghost.ghost-in .g-area, .has-ghost.ghost-in .g-dot { opacity: 1; }
.has-ghost.ghost-in .g-bars rect { transform: none; }
.has-ghost.ghost-in .g-arc { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) { .has-ghost .g-stroke, .has-ghost .g-arc { stroke-dashoffset: 0; } .has-ghost .g-area, .has-ghost .g-dot { opacity: 1; } .has-ghost .g-bars rect { transform: none; } }
/* phones: one small shape at most */
@media (max-width: 760px) { .ghost .g-bars { display: none; } .ghost .g-line { width: 100% !important; height: 160px !important; right: -10% !important; bottom: 2% !important; } .ghost .g-ring { width: 140px !important; height: 140px !important; } }

/* the brand lives by the call to action in the hero (icon + name); the header shows it only once that's scrolled away */
.hero__brand { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; }
.hero__brand .hero__logo { margin-bottom: 0; }
.hero__brand span, .nav__brand span { font-family: "Instrument Sans", var(--sans); font-weight: 600; letter-spacing: -0.02em; }
.hero__brand span { font-size: 36px; }
.nav__brand { transition: opacity .3s ease, transform .3s ease; }
.nav:not(.brand-on) .nav__brand { opacity: 0; transform: translateY(-6px); pointer-events: none; }
@media (max-width: 760px) { .hero__brand { gap: 12px; margin-bottom: 22px; } .hero__brand span { font-size: 28px; } }

/* the first photo band carries the home screen widgets: copy left, a fanned stack of widgets right */
.band--widgets { height: auto; min-height: min(92vh, 860px); align-items: center; }
.band--widgets::after { background: linear-gradient(90deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.35) 100%); }
.band__grid { position: relative; z-index: 2; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; padding-top: 110px; padding-bottom: 110px; }
.band--widgets .band__copy { padding-bottom: 0; }
.band--widgets .band__line { font-size: clamp(40px, 5vw, 72px); max-width: 9em; }
.band--widgets .band__sub { max-width: 26em; line-height: 1.5; }
.widgets { display: flex; flex-direction: column; gap: 18px; align-items: flex-end; will-change: transform; }
.widgets img { width: min(100%, 420px); height: auto; filter: drop-shadow(0 24px 40px rgba(0,0,0,.55)); }
.widgets img:nth-child(2) { margin-right: 48px; }
@media (max-width: 760px) {
  .band--widgets { min-height: 0; }
  .band__grid { grid-template-columns: 1fr; gap: 32px; padding-top: 72px; padding-bottom: 72px; }
  .widgets { align-items: stretch; gap: 12px; }
  .widgets img { width: 100%; }
  .widgets img:nth-child(2) { margin-right: 0; }
}

/* hero Watch: the full device (case to scale with the phone: a 46mm case is ~54% of the phone's width), lower right
   over the phone's corner, below its Start button */
.hero__art { padding-bottom: 0; }
.watch-device { position: absolute; width: calc(var(--w, 300px) * 0.62); left: calc(50% + var(--w, 300px) * 0.31); bottom: calc(var(--w, 300px) * -0.28); filter: drop-shadow(0 26px 40px rgba(0,0,0,.7)); }
.hero__art { --w: clamp(230px, calc((100svh - 190px) / 2.1), 300px); }
@media (max-width: 760px) { .hero__art { --w: 280px; } .watch-device { left: auto; right: -6px; width: 150px; bottom: -40px; } }
/* the header turns solid as soon as its brand shows (mid-hero on phones, text would run under a see-through bar) */
.nav.brand-on { background: rgba(0,0,0,.82); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); }
@media (max-width: 760px) { .watch-device { bottom: -64px; right: -10px; } }