/* cutloose.dev: a print of the app's "Chalk & Night Gym" identity
   (docs/plans/launch-site.md, Design). Dark only, like the app. Tokens are
   Cutloose/DesignSystem/Theme.swift's. Only transform and opacity animate,
   and only under prefers-reduced-motion: no-preference. */

@font-face {
  font-family: "Archivo";
  src: url("/assets/archivo.30cb8c655b.woff2") format("woff2");
  /* Instanced at wdth 75 (SF Pro Black Condensed's nearest), wght 700-900. */
  font-weight: 700 900;
  font-display: block;
}

:root {
  color-scheme: dark;
  --ground: #0C0C0E;
  --ground-2: #151517;
  --surface: #1B1B1E;
  --tape: #27272B;
  --ink: #F4F1EA;
  --ink-2: #9B988F;
  --rule: rgb(244 241 234 / 0.10);
  --edge: #6B6860;
  --accent: #FF5A36;
  --on-accent: #0C0C0E;
  --bad: #EF4444;
  --send: #34D399;
  --flash: #FACC15;

  --display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --text: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --gutter-l: max(16px, env(safe-area-inset-left));
  --gutter-r: max(16px, env(safe-area-inset-right));
  --ease-out: cubic-bezier(0.2, 0.7, 0.1, 1);
  --measure: 1120px;
}

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--ground);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--text);
  padding: env(safe-area-inset-top) var(--gutter-r) env(safe-area-inset-bottom) var(--gutter-l);
  overflow-x: hidden;
}

/* Chalk grain: the app's ChalkGrain noise, 192 px drawn at 64 so it stays one
   grain per device pixel at 3x. Static, never animated. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url("/assets/grain.b5638f827b.webp") 0 0 / 64px 64px repeat;
  image-rendering: pixelated;
  opacity: 0.05;
  mix-blend-mode: plus-lighter;
  pointer-events: none;
}

main { flex: 1 0 auto; display: flex; flex-direction: column; width: 100%; max-width: var(--measure); margin: 0 auto; }

a { color: var(--ink); text-decoration-color: var(--edge); text-underline-offset: 0.18em; }
a:hover { text-decoration-color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 2px; }
:target { scroll-margin-top: 72px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.overline {
  margin: 0;
  font: 700 0.6875rem/1.2 var(--text);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* Setter's tape: solid, square-ish, a little crooked. */
.tape {
  display: inline-block;
  padding: 5px 8px 4px;
  border-radius: 2px;
  background: var(--tape);
  color: var(--ink);
  font: 800 0.625rem/1 var(--text);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  transform: rotate(-1.5deg);
}

/* The app's condensed black headings ("SENT ON GO 3.") */
.display {
  margin: 0;
  font: 900 clamp(2.75rem, 10.5vw, 6.75rem)/0.9 var(--display);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-wrap: balance;
}
.display-2 {
  margin: 10px 0 0;
  font: 900 clamp(2rem, 6.5vw, 3.75rem)/0.95 var(--display);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-wrap: balance;
  max-width: 18ch;
}

/* ---- Masthead and footer ---- */

.masthead {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  min-height: 56px;
  border-bottom: 1px solid var(--rule);
}
.masthead-mark {
  font: 900 1rem/1 var(--display);
  letter-spacing: 0.06em;
  text-decoration: none;
  padding: 12px 12px 12px 0;
  margin-right: auto;
}
.masthead-nav { display: none; gap: 4px; }
.masthead-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  font: 600 0.875rem/1 var(--text);
  text-decoration: none;
  color: var(--ink-2);
}
.masthead-nav a:hover { color: var(--ink); }

.footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 24px;
  width: 100%;
  max-width: var(--measure);
  margin: 40px auto 0;
  border-top: 1px solid var(--rule);
}
.footer-links { display: flex; gap: 4px; margin-left: -12px; }
.footer-links a, .footer-company {
  font: 700 0.6875rem/1.2 var(--text);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  text-decoration: none;
  color: var(--ink);
}
.footer-links a:hover { color: var(--accent); }
.footer-company { margin: 0; padding: 14px 0; color: var(--ink-2); letter-spacing: 0.06em; }

/* ---- Buttons ---- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: 4px;
  background: var(--accent);
  color: var(--on-accent);
  font: 800 1rem/1 var(--text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.button:hover { background: #FF6E4F; color: var(--on-accent); }
.button.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--edge); }
.button.ghost:hover { background: var(--surface); }
.button.small { min-height: 36px; padding: 0 14px; font-size: 0.75rem; }
.store { margin: 28px 0 0; }
/* Apple's App Store badge (white, for dark backgrounds): never redrawn,
   never under 40 px tall, clear space a tenth of its height all round. */
.store-badge { display: inline-block; line-height: 0; border-radius: 8px; }
.store-badge img { display: block; width: auto; height: 56px; }
.store-badge:focus-visible { outline-offset: 5px; border-radius: 10px; }
.store-note { margin-top: 12px; }

/* ---- Hero ---- */

.hero {
  display: grid;
  gap: 40px;
  align-items: center;
  min-height: calc(100svh - 56px);
  padding: 40px 0 48px;
}
.hero .lede {
  margin: 20px 0 0;
  max-width: 34rem;
  font: 400 clamp(1.0625rem, 1rem + 0.5vw, 1.25rem)/1.5 var(--text);
  color: var(--ink-2);
}
.hero .display { margin-top: 14px; }
.trust {
  margin: 20px 0 0;
  font: 600 0.8125rem/1.4 var(--text);
  letter-spacing: 0.02em;
  color: var(--ink-2);
}
.trust::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--send); vertical-align: 1px; }

/* A phone frame around a real screen, in an iPhone's proportions: a thin
   metal rim around an even black bezel, the continuous corner at ~18 % of
   the width, the action and volume buttons on the left and the side button
   on the right. Nothing is drawn on the screen that the app doesn't draw
   itself. The radii are percentages (horizontal / vertical, in the box's
   720:1563 aspect) so the corners stay round and in proportion at every
   width the frame is laid out at; the bezel is a share of the width too. */
.phone {
  position: relative;
  margin: 0 auto;
  width: min(300px, 76vw);
  aspect-ratio: 720 / 1563;
  padding: 3.2%;
  border-radius: 18% / 8.29%;
  background: #0B0B0C;
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.05),
    0 0 0 1.5px #3E3E43,
    0 0 0 2.5px rgb(244 241 234 / 0.12),
    0 40px 80px -30px rgb(0 0 0 / 0.9);
}
.phone img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15.8% / 7.03%;
  background: var(--ground);
}
/* The buttons: left, action then volume up and down; right, the side button. */
.phone::before, .phone::after {
  content: "";
  position: absolute;
  width: max(2px, 0.85%);
  border-radius: 1px;
  background: #45454A;
}
.phone::before {
  left: calc(-2.5px - max(2px, 0.85%));
  top: 16%;
  height: 23%;
  background: linear-gradient(to bottom,
    #45454A 0 11%, transparent 11% 26%, #45454A 26% 58%, transparent 58% 68%, #45454A 68% 100%);
}
.phone::after {
  right: calc(-2.5px - max(2px, 0.85%));
  top: 22%;
  height: 13%;
}
.phone-hero { transform: rotate(-3deg); }

/* Two screens side by side: the recorder and the gym, the app's two halves. */
.phone-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: end;
  width: min(420px, 100%);
  margin: 0 auto;
}
.phone-pair .phone { width: 100%; margin: 0; }
.phone-pair .phone:first-child { transform: rotate(-3deg) translateY(10px); z-index: 1; }
.phone-pair .phone:last-child { transform: rotate(3deg); }

/* ---- Bands ---- */

.band {
  padding: 64px 0 8px;
  border-top: 1px solid var(--rule);
  margin-top: 56px;
}
.band .lede { color: var(--ink-2); }

/* The loop: five numbered steps. */
.steps {
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
  display: grid;
  gap: 28px 24px;
}
.steps li { position: relative; padding-top: 14px; border-top: 1px solid var(--rule); }
.step-n {
  display: block;
  font: 900 2rem/1 var(--display);
  letter-spacing: 0.02em;
  color: var(--accent);
}
.steps h3 {
  margin: 10px 0 6px;
  font: 800 0.9375rem/1.2 var(--text);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.steps p { margin: 0; color: var(--ink-2); font-size: 1rem; }
.chips { margin-top: 12px !important; display: flex; flex-wrap: wrap; gap: 6px; }

/* The app's call chips: colour plus a mark, never colour alone. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px 4px;
  border-radius: 2px;
  background: var(--tape);
  color: var(--ink);
  font: 800 0.625rem/1 var(--text);
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.chip::before { content: "\2713"; font-weight: 900; }
.chip.sent { background: var(--send); color: var(--on-accent); transform: rotate(-1.5deg); }
.chip.flash { background: var(--flash); color: var(--on-accent); }
.chip.flash::before { content: "\26A1"; }
.chip.fell { color: var(--ink-2); }
.chip.fell::before { content: "\00B7"; }

/* Feature cards. */
.cards {
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.cards li {
  padding: 20px 20px 22px;
  border-radius: 4px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--rule);
}
.cards h3 {
  margin: 0 0 8px;
  font: 800 1.0625rem/1.25 var(--text);
  letter-spacing: -0.005em;
}
.cards p { margin: 0; color: var(--ink-2); font-size: 0.9375rem; }

/* Copy beside a phone. */
.split { display: grid; gap: 36px; align-items: center; }
.split .display-2 { max-width: 14ch; }
.checks { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 14px; }
.checks li { padding-left: 26px; position: relative; color: var(--ink-2); font-size: 1rem; }
.checks li::before {
  content: "\2713";
  position: absolute; left: 0; top: 0;
  font-weight: 900;
  color: var(--send);
}
.checks strong { color: var(--ink); font-weight: 700; }
.split .micro { margin-top: 22px; max-width: 34rem; }

/* Pricing. */
.plans { display: grid; gap: 12px; margin-top: 36px; }
.plan {
  padding: 24px 22px 26px;
  border-radius: 4px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--rule);
}
.plan.studio { box-shadow: inset 0 0 0 1px var(--edge); }
.plan-name {
  margin: 0;
  font: 700 0.6875rem/1.2 var(--text);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.plan-price {
  margin: 8px 0 0;
  font: 900 clamp(2.5rem, 8vw, 3.5rem)/1 var(--display);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.plan-price span { font: 600 1rem/1 var(--text); color: var(--ink-2); letter-spacing: 0; margin-left: 6px; }
.plan ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.plan li { padding-left: 22px; position: relative; font-size: 0.9375rem; }
.plan li::before { content: "\2713"; position: absolute; left: 0; font-weight: 900; color: var(--send); }
.plan .micro { margin-top: 14px; }

/* FAQ: native disclosure rows, no script. */
.faq details { border-top: 1px solid var(--rule); }
.faq details:last-of-type { border-bottom: 1px solid var(--rule); }
.faq .display-2 { margin-bottom: 28px; }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 12px 0;
  font: 700 1.0625rem/1.3 var(--text);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: none;
  font: 900 1.5rem/1 var(--display);
  color: var(--ink-2);
}
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 0 0 18px; max-width: 60ch; color: var(--ink-2); }

/* Close. */
.close { padding-bottom: 24px; text-align: left; }
.close .store { margin-top: 28px; }
.close .lede { margin: 16px 0 0; }

/* ---- The email form (hero): mid-screen, never fixed to the bottom
   (in-app browsers jump fixed elements above the keyboard). ---- */
.drop { margin-top: 28px; max-width: 440px; }
.drop .overline { display: block; margin-bottom: 10px; color: var(--ink); }
.drop-row { display: flex; flex-direction: column; gap: 8px; }
.drop input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--edge);
  border-radius: 4px;
  background: var(--ground-2);
  color: var(--ink);
  font: 500 1rem/1 var(--text); /* 16 px: iOS zooms the page under it */
}
.drop input::placeholder { color: var(--ink-2); opacity: 1; }
.drop input[aria-invalid="true"] { border-color: var(--bad); }
.drop button {
  min-height: 48px;
  padding: 0 20px;
  border: 0;
  border-radius: 4px;
  background: var(--accent);
  color: var(--on-accent);
  font: 800 1rem/1 var(--text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.drop button:hover { background: #FF6E4F; }
.drop button:focus-visible { outline-offset: 2px; box-shadow: 0 0 0 2px var(--ground); }
.drop[aria-busy="true"] button { opacity: 0.6; cursor: progress; }
.drop-check:not(:empty) { margin-top: 10px; }
.drop-error { margin: 10px 0 0; color: var(--bad); font: 600 0.875rem/1.4 var(--text); }
.drop-error::before { content: "! "; font-weight: 800; }
.micro { margin: 10px 0 0; font: 500 0.8125rem/1.45 var(--text); color: var(--ink-2); }
.micro a { color: var(--ink-2); }

.drop-done:empty { display: none; }
.drop-done { position: relative; margin-top: 28px; }
.drop-done p { margin: 12px 0 0; color: var(--ink-2); }

/* Chalk puff on success: dots thrown from the button (site.js sets each
   dot's --dx/--dy). Only exists under no-preference. */
.puff {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink);
  pointer-events: none;
  opacity: 0;
}

@media (min-width: 560px) {
  .drop-row { flex-direction: row; gap: 0; }
  .drop input { border-radius: 4px 0 0 4px; border-right: 0; }
  .drop button { border-radius: 0 4px 4px 0; flex: none; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .plans { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}

@media (min-width: 720px) {
  .masthead-nav { display: flex; }
}

@media (min-width: 900px) {
  body { --gutter-l: max(48px, env(safe-area-inset-left)); --gutter-r: max(48px, env(safe-area-inset-right)); }
  .hero {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 48px;
    padding: 56px 0 64px;
  }
  /* Four lines beside the phones, as the <br>s cut them: the column is half
     the measure, so the headline is sized so "YOUR CLIMBS," holds on one
     line at every width from 900 px up, not to the viewport. */
  .hero .display { font-size: clamp(2.75rem, 5.2vw, 4.75rem); }
  .phone { width: min(320px, 26vw); }
  .phone-hero { width: min(340px, 28vw); transform: rotate(-4deg); margin-right: 24px; }
  .band { padding-top: 88px; margin-top: 72px; }
  .steps { grid-template-columns: repeat(5, 1fr); gap: 24px 20px; margin-top: 48px; }
  .cards { grid-template-columns: repeat(4, 1fr); margin-top: 48px; }
  .split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; }
  .split.flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .split.flip .split-copy { order: 2; }
  .split .phone { transform: rotate(-2deg); }
  .split.flip .phone { order: 1; transform: rotate(2deg); }
  .split.gym { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .hero { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
  .phone-pair { width: 100%; gap: 0; align-items: center; }
  .phone-pair .phone { width: min(300px, 22vw); }
  .phone-pair .phone:first-child { transform: translate(28px, 36px) rotate(-5deg); justify-self: end; }
  .phone-pair .phone:last-child { transform: translate(-28px, -24px) rotate(4deg); justify-self: start; }
  .split.gym .phone-pair .phone:first-child { transform: translate(20px, 30px) rotate(-4deg); }
  .split.gym .phone-pair .phone:last-child { transform: translate(-20px, -20px) rotate(3deg); }
  .plans { max-width: 760px; }
  .faq details { max-width: 760px; }
}

/* ---- Text pages (support, legal, 404) ---- */

.prose { max-width: 68ch; padding: 40px 0 0; }
.short .prose { margin: auto 0; padding-bottom: 40px; }
.title {
  margin: 8px 0 20px;
  font: 900 clamp(2.5rem, 11vw, 4.5rem)/0.95 var(--display);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.prose .tape { margin-bottom: 8px; }
.prose .lead { font-size: 1.1875rem; color: var(--ink); }
.prose p, .prose li, .prose address, .prose td, .prose th { color: var(--ink); }
.prose address { font-style: normal; }
.prose h2 {
  margin: 44px 0 12px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  font: 700 0.6875rem/1.2 var(--text);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.prose h3 {
  margin: 24px 0 6px;
  font: 800 1.0625rem/1.3 var(--text);
}
.prose ul { padding-left: 1.2em; }
.prose li { margin: 6px 0; }
.prose .toc { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 2px 24px; }
@media (min-width: 560px) { .prose .toc { grid-template-columns: 1fr 1fr; } }
.prose .toc a { text-decoration: none; color: var(--ink-2); font-size: 0.9375rem; }
.prose .toc a:hover { color: var(--ink); }
.prose table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 0.9375rem; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 10px 10px 10px 0; border-top: 1px solid var(--rule); }
.prose th { font: 700 0.6875rem/1.2 var(--text); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); border-top: 0; }
.prose .summary { background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule); border-radius: 4px; padding: 16px 20px; margin: 24px 0; }
.prose .summary p { margin: 0 0 8px; }
.prose .summary ul { margin: 0; }
.updated { font: 500 0.8125rem/1.4 var(--mono); color: var(--ink-2); }

/* A fact the founder still owes: dev builds only (production refuses). */
.todo { background: var(--accent); color: var(--on-accent); padding: 0 4px; border-radius: 2px; font-weight: 700; }

/* ---- Motion ---- */

@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { animation: fade-up 600ms var(--ease-out) both; }
  .hero-copy > :nth-child(2) { animation-delay: 60ms; }
  .hero-copy > :nth-child(3) { animation-delay: 120ms; }
  .hero-copy > :nth-child(n + 4) { animation-delay: 200ms; }
  .phone-hero, .hero-phones .phone { animation: phone-in 800ms var(--ease-out) 240ms both; }
  .hero-phones .phone:last-child { animation-delay: 360ms; }
  .home .masthead .tape, .tape-land, .drop-done .tape {
    animation: land 320ms cubic-bezier(0.34, 1.56, 0.64, 1) 700ms both;
  }
  .drop-done .tape { animation-delay: 0ms; }
  .puff { animation: puff 900ms var(--ease-out) forwards; }
  .button, .drop button { transition: background-color 120ms; }
  .button:active, .drop button:active { transform: translateY(1px); }
  .store-badge { transition: transform 120ms var(--ease-out), opacity 120ms; }
  .store-badge:hover { transform: translateY(-1px); }
  .store-badge:active { transform: translateY(1px); opacity: 0.9; }
  .masthead-nav a, .footer-links a { transition: color 120ms; }
}

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes phone-in { from { opacity: 0; transform: translateY(24px) rotate(-3deg); } to { opacity: 1; } }
@keyframes land {
  from { opacity: 0; transform: scale(1.6) rotate(-9deg); }
  to { opacity: 1; transform: rotate(-1.5deg); }
}
@keyframes puff {
  0% { opacity: 0.9; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.4); }
}

/* The referral landing page (docs/plans/referral-program.md, route 2):
   the code large enough to read out, one button out. */
.referral-code { display: flex; flex-direction: column; gap: 6px; margin: 28px 0 18px; }
.referral-code .display-2 { letter-spacing: 0.18em; }
.referral-cta { margin: 0 0 14px; }
.referral-cta .button { display: inline-block; }