/* Kaps — kaps.fyi marketing site.
   Tokens mirror the app's DesignTokens (Kaps/DESIGN_SYSTEM.md): ebony void,
   espresso casework, warm ivory light, stone secondary copy, brushed silver
   hairlines. Green stays semantic and is barely used here. */

:root {
  --ebony: #1a1715;
  --void: #110f0e;             /* galleryBlackout over ebony */
  --espresso: #2b211c;
  --showcase: #242120;         /* ArchiveMuseum.showcaseCardSurface */
  --ivory: #f2eee7;
  --purchase: #e2dcd3;         /* Capsule.purchaseFill */
  --stone: #c9c3ba;
  --stone-dim: rgba(201, 195, 186, 0.72);
  --silver: #b6b8bb;
  --hairline: rgba(182, 184, 187, 0.24);
  --hairline-strong: rgba(182, 184, 187, 0.46);
  --green: #739e4c;

  --serif: "Cormorant Garamond", "New York", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 16px;
  --gutter: clamp(16px, 4vw, 40px);
  --maxw: 1200px;
  --section: clamp(72px, 11vw, 136px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--ebony);
  color: var(--ivory);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
ul, ol { list-style: none; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

.skip {
  position: absolute; left: 12px; top: -48px; z-index: 20;
  padding: 10px 14px; border-radius: var(--r-sm);
  background: var(--ivory); color: var(--ebony); text-decoration: none; font-weight: 600;
}
.skip:focus { top: 12px; }

:focus-visible { outline: 2px solid var(--ivory); outline-offset: 3px; border-radius: 4px; }

/* ---- Type ---- */
.eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--silver);
}

h1, h2 {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.04;
  color: var(--ivory);
}
h2 { font-size: clamp(36px, 4.6vw, 58px); }
h1 em, h2 em { font-style: italic; color: var(--purchase); }

h3 { font-weight: 500; font-size: 17px; line-height: 1.35; }

.section-head { max-width: 640px; }
.section-head h2 { margin-top: 14px; }
.section-sub { margin-top: 18px; color: var(--stone-dim); font-size: 17px; max-width: 54ch; }
.section-sub a { color: var(--ivory); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 18px;
  border-radius: var(--r-md);
  font-size: 14px; font-weight: 500; letter-spacing: 0.02em;
  text-decoration: none;
  transition: background-color .14s var(--ease), border-color .14s var(--ease), transform .14s var(--ease);
}
.btn:active { transform: scale(.985); }
.btn-ghost { border: 1px solid var(--hairline-strong); color: var(--ivory); }
.btn-ghost:hover { border-color: var(--silver); background: rgba(242, 238, 231, 0.04); }

.store { display: inline-block; border-radius: 10px; transition: opacity .14s var(--ease); }
.store:hover { opacity: .88; }
.store img { height: 56px; width: auto; }

/* ---- Header ---- */
.bar {
  position: sticky; top: 0; z-index: 10;
  background: rgba(26, 23, 21, 0.92);
  border-bottom: 1px solid var(--hairline);
}
/* Edge to edge, as on Rips: logo top-left, actions top-right on any width. */
.bar-inner { display: flex; align-items: center; gap: 32px; height: 72px; max-width: none; padding: 0 clamp(16px, 2.5vw, 40px); }
.bar-logo img { width: 112px; }
.bar-nav { display: flex; gap: 28px; margin-left: auto; }
.bar-nav a {
  font-size: 14px; color: var(--stone-dim); text-decoration: none;
  transition: color .14s var(--ease);
}
.bar-nav a:hover { color: var(--ivory); }

/* ---- Home: one screen ----
   A rounded panel holds a dimmed black-and-white photograph; headline, one
   line and the download sit centred at its top, and a large phone rises
   from its bottom edge, cropped to the top half (Aave, Linear and Apple's
   iPhone pages on Mobbin; Icybox's phone). Nothing scrolls. */
body.one {
  height: 100vh; height: 100svh; min-height: 560px;
  display: grid; grid-template-rows: auto 1fr auto;
  background: #000;
}
.one-bar, .one-foot { padding-left: clamp(16px, 2.5vw, 40px); padding-right: clamp(16px, 2.5vw, 40px); }
.one-bar { display: flex; align-items: center; height: 72px; }
.one-bar .bar-logo img { width: 112px; }
.one-nav { display: flex; align-items: center; gap: 24px; margin-left: auto; }
.one-nav a:not(.btn) { font-size: 14px; color: var(--stone); text-decoration: none; }
.one-nav a:not(.btn):hover { color: var(--ivory); }

.one-main { min-height: 0; padding: 0 clamp(12px, 1.6vw, 28px); }
.hero-card {
  position: relative; height: 100%; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 1px solid rgba(182, 184, 187, 0.16); border-radius: clamp(18px, 2vw, 28px);
  background: #0b0b0b;
}

/* The photograph, dimmed and vignetted; every few seconds two slices of it
   jump sideways for a moment, a quiet glitch; still under reduced motion. */
.band {
  position: absolute; inset: 0; z-index: -1;
  background: url("/assets/hero-placeholder.jpg?v=21") 50% 50% / cover no-repeat #000;
  filter: grayscale(1) brightness(.55);
  /* The photo holds the top of the panel and fades out where the phone
     rises, so the phone stands on black (as Icybox's band ends behind it). */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 38%, rgba(0, 0, 0, 0.15) 78%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 38%, rgba(0, 0, 0, 0.15) 78%, transparent 100%);
}
.band::before, .band::after {
  content: ""; position: absolute; inset: 0; background: inherit; opacity: 0;
  animation: glitch 5.5s steps(1, end) infinite;
}
.band::after { animation-delay: -2.4s; animation-duration: 7s; }
@keyframes glitch {
  0%, 90%, 100% { opacity: 0; transform: none; clip-path: inset(0 0 100% 0); }
  91% { opacity: .9; transform: translateX(-14px); clip-path: inset(32% 0 58% 0); }
  93% { opacity: .9; transform: translateX(10px);  clip-path: inset(61% 0 31% 0); }
  95% { opacity: .7; transform: translateX(-6px);  clip-path: inset(12% 0 84% 0); }
  97% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .band::before, .band::after { animation: none; } }
/* Darkest behind the type, and toward the panel's foot where the phone sits. */
.hero-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 42% at 50% 18%, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.55) 100%);
}

.one-copy { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 16px; }
/* The headline: heavy, condensed, uppercase and large (NEON's jewelry
   site and Rains on Mobbin; Rips and Icybox), stacked on two lines with
   the second a step quieter. */
.one-copy h1 {
  margin-top: 12px; font-family: "Anton", "Oswald", Impact, "Arial Narrow", sans-serif;
  font-weight: 400; font-size: clamp(52px, min(7.6vw, 12.5vh), 140px); line-height: .9;
  letter-spacing: 0.01em; text-transform: uppercase; color: var(--ivory);
}
.one-copy h1 span { display: block; }
/* Room for the comma's tail to hang clear of the second line. */
.one-copy h1 span + span { color: var(--stone); margin-top: 0.1em; }
.one-lede { margin-top: 16px; max-width: 46ch; text-wrap: balance; font-size: clamp(15px, 1.25vw, 18px); color: var(--stone); }
.get { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: clamp(18px, 3vh, 28px); }
.store img { height: 48px; width: auto; }
.qr { width: 64px; height: 64px; padding: 5px; background: var(--ivory); border-radius: var(--r-sm); }

/* Two phones, top halves only (Icybox's crop): each frame is the top 66%
   of its screenshot, sized by width (never taller than the image, so the
   frame's edges never run past it), and fades out to nothing. The width
   follows the screen height so both always fit the panel. */
.phones {
  /* Sits right under the download; the panel centres the whole group. */
  flex: none; display: flex; justify-content: center; align-items: flex-start;
  gap: clamp(14px, 2vw, 32px); margin-top: clamp(28px, 5vh, 56px); padding: 0 16px;
}
/* Each screenshot sits in a drawn iPhone: a layered titanium rim, a black
   bezel and side buttons (as Icybox frames its phone). The device is sized
   by width; its screen is the top two-thirds of the screenshot, so the
   frame never runs past the image, and the whole device fades out. */
.device {
  /* What's left of the panel's height after the headline group decides the
     phones' size, so text and phones always fit together. */
  --w: min(290px, 17vw, calc((100svh - 480px) * 0.48));
  position: relative; flex: none; width: var(--w);
  padding: calc(var(--w) * 0.032) calc(var(--w) * 0.032) 0;
  border-radius: calc(var(--w) * 0.165) calc(var(--w) * 0.165) 0 0;
  background: #050505;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 0 0 1.5px #d4d6d9,
    0 0 0 3px #7c7e82,
    0 0 0 4px #2b2c2e;
}
/* Side buttons: action and volume on the left, power on the right. */
.device::before, .device::after {
  content: ""; position: absolute; width: 3px; border-radius: 2px;
  background: linear-gradient(90deg, #5f6164, #c9cbce 60%, #8a8c90);
}
.device::before {
  left: -6px; top: calc(var(--w) * 0.36); height: calc(var(--w) * 0.1);
  box-shadow: 0 calc(var(--w) * 0.16) 0 #9a9c9f, 0 calc(var(--w) * 0.32) 0 #9a9c9f;
}
.device::after { right: -6px; top: calc(var(--w) * 0.52); height: calc(var(--w) * 0.24); }
.phones picture {
  display: block; aspect-ratio: 560 / 803; overflow: hidden;
  border-radius: calc(var(--w) * 0.135) calc(var(--w) * 0.135) 0 0;
}
.phones img { display: block; width: 100%; height: auto; }
/* The fade: the whole phones area turns transparent toward its foot, so
   screens, rims and buttons fade together into whatever is behind them.
   The area also clips each device's bottom rim, so there's no bottom edge. */
.phones {
  position: relative; overflow: hidden; padding-top: 8px; padding-bottom: 0;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, rgba(0, 0, 0, 0.5) 75%, transparent 96%);
          mask-image: linear-gradient(180deg, #000 55%, rgba(0, 0, 0, 0.5) 75%, transparent 96%);
}
.device { margin-bottom: -10px; }
.one-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 24px;
  padding-top: 16px; padding-bottom: 16px; font-size: 12px; color: rgba(201, 195, 186, 0.55);
}
.one-foot nav { display: flex; flex-wrap: wrap; gap: 20px; }
.one-foot a { color: var(--stone); text-decoration: none; }
.one-foot a:hover { color: var(--ivory); }

/* ---- FAQ page ---- */
.faq-page { max-width: 880px; padding-top: 24px; padding-bottom: var(--section); }
.faq-list { border-top: 1px solid var(--hairline); }
.faq-page .faq-list { border-top: 0; }
.faq-list details { border-bottom: 1px solid var(--hairline); }
.faq-list summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  min-height: 64px; padding: 16px 0;
  cursor: pointer; list-style: none;
  font-size: 17px; font-weight: 500;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: ""; flex: none; width: 10px; height: 10px;
  border-right: 1.5px solid var(--silver); border-bottom: 1.5px solid var(--silver);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .24s var(--ease);
}
.faq-list details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq-list details p { padding: 0 40px 22px 0; color: var(--stone-dim); }
.page-head .updated a { color: var(--ivory); }

/* ---- Footer ---- */
.foot { border-top: 1px solid var(--hairline); padding: 56px 0 40px; background: var(--void); }
/* Edge to edge like the header, so logo and links line up with it. */
.foot > .wrap { max-width: none; padding: 0 clamp(16px, 2.5vw, 40px); }
.foot-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--hairline); }
.foot-logo img { width: 104px; }
.foot-cols { display: grid; grid-template-columns: repeat(3, minmax(120px, auto)); gap: 24px 64px; }
.foot-cols h2 {
  margin-bottom: 14px; font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--silver);
}
.foot-cols a { display: block; padding: 5px 0; font-size: 14px; color: var(--stone-dim); text-decoration: none; }
.foot-cols a:hover { color: var(--ivory); }
.foot-legal { margin-top: 24px; font-size: 12px; color: rgba(201, 195, 186, 0.5); max-width: 80ch; }

/* ---- Inner pages (legal, 404) ---- */
.page-head { padding: clamp(48px, 7vw, 88px) 0 32px; border-bottom: 1px solid var(--hairline); }
.page-head h1 { margin-top: 14px; font-size: clamp(42px, 5.4vw, 68px); }
.page-head .updated { margin-top: 14px; color: var(--stone-dim); font-size: 14px; }
.legal-layout { display: grid; grid-template-columns: 240px minmax(0, 760px); gap: clamp(32px, 6vw, 88px); }
.toc { position: sticky; top: 96px; align-self: start; max-height: calc(100vh - 120px); overflow-y: auto; padding-top: 40px; }
.toc-docs { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--hairline); border-radius: var(--r-md); }
.toc-docs a {
  flex: 1; display: flex; align-items: center; justify-content: center; min-height: 36px;
  border-radius: var(--r-sm); font-size: 13px; color: var(--stone-dim); text-decoration: none;
}
.toc-docs a[aria-current="page"] { background: var(--showcase); color: var(--ivory); }
.toc-list { margin-top: 28px; }
.toc-list summary {
  list-style: none; cursor: default; pointer-events: none;
  font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--silver);
}
.toc-list summary::-webkit-details-marker { display: none; }
.toc-list ol { margin-top: 12px; border-left: 1px solid var(--hairline); }
.toc-list a {
  display: block; padding: 6px 0 6px 14px; margin-left: -1px; border-left: 1px solid transparent;
  font-size: 13px; line-height: 1.4; color: var(--stone-dim); text-decoration: none;
}
.toc-list a:hover { color: var(--ivory); border-left-color: var(--silver); }
.prose h2[id] { scroll-margin-top: 96px; }

.prose { max-width: 760px; padding-top: 40px; padding-bottom: var(--section); color: var(--stone); }
.prose h2 { font-size: clamp(26px, 2.6vw, 32px); margin: 44px 0 12px; }
.prose h3 { color: var(--ivory); margin: 28px 0 8px; }
.prose p, .prose li { font-size: 16px; line-height: 1.75; }
.prose p + p { margin-top: 14px; }
.prose ul, .prose ol { margin: 12px 0 14px 22px; list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: 6px; }
.prose strong { color: var(--ivory); font-weight: 600; }
.prose a { color: var(--ivory); text-underline-offset: 3px; }

.notfound { min-height: calc(100svh - 72px - 160px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 64px 0; }
.notfound img { width: 200px; filter: drop-shadow(0 26px 30px rgba(0, 0, 0, 0.55)); }
.notfound h1 { margin-top: 28px; font-size: clamp(44px, 6vw, 72px); }
.notfound p { margin: 14px 0 30px; color: var(--stone-dim); }

/* ---- Responsive ---- */
@media (max-width: 960px) {
  .legal-layout { grid-template-columns: 1fr; gap: 0; }
  .toc { position: static; max-height: none; overflow: visible; padding-top: 28px; }
  .toc-docs { max-width: 280px; }
  .toc-list { margin-top: 16px; border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 0 16px; }
  .toc-list summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; cursor: pointer; pointer-events: auto; }
  .toc-list summary::after { content: "+"; font-size: 18px; letter-spacing: 0; color: var(--silver); }
  .toc-list[open] summary::after { content: "–"; }
  .toc-list ol { margin: 0 0 12px; }
}

@media (max-width: 860px) {
  /* A phone can't scan its own screen. */
  .qr { display: none; }
  .foot-top { grid-template-columns: 1fr; }
  .one-foot { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
  .bar-inner, .one-bar { height: 64px; }
  .bar-inner { gap: 20px; }
  .bar-logo img, .one-bar .bar-logo img { width: 96px; }
  .one-nav { gap: 16px; }
  .get { margin-top: 28px; }
  .one-copy .eyebrow { font-size: 10px; letter-spacing: 0.14em; }
  .one-copy h1 { font-size: 20vw; }
  /* Phone: the watch and bracelets sit up behind the headline; a touch dimmer so the
     small tagline stays readable. */
  .band { background-size: 230% auto; background-position: 50% 0; filter: grayscale(1) brightness(.45); }
  /* Two phones across: the screen width less the panel inset, the phones'
     padding, the gap and room for the side buttons. */
  .device { --w: calc((100vw - 2 * 12px - 2 * 14px - 12px) / 2); }
  .phones { gap: 12px; padding: 8px 14px 0; }
  .store img { height: 50px; }
  .foot-cols { grid-template-columns: repeat(2, 1fr); gap: 28px 24px; }
  .faq-list details p { padding-right: 0; }
}