/* ==========================================================================
   Kettlebell Lab — kettlebelllab.app
   Plain CSS, no build step. Tokens first, then components in page order.
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------
   The app icon is a black kettlebell on forest green, but the app's own UI is
   iOS blue. Green is used as an accent over neutral surfaces so the blue
   screenshots read as "the app" rather than fighting the page.
   -------------------------------------------------------------------------- */

:root {
  --kb-green: #0e3b2a;
  --kb-green-lift: #1f7a55;

  --surface: #f5f3ef;
  --surface-alt: #eae6df;
  --text: #121212;
  --text-muted: #59564f;
  --border: rgba(18, 18, 18, 0.12);
  --accent: var(--kb-green-lift);
  --on-accent: #f5f3ef;

  --measure: 62ch;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(4rem, 9vw, 7.5rem);
  --radius: 14px;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
    system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface: #121212;
    --surface-alt: #1b1b1a;
    --text: #f5f3ef;
    --text-muted: #a4a19a;
    --border: rgba(245, 243, 239, 0.14);
    /* #1f7a55 only reaches 3.5:1 on near-black, so lift it in dark mode. */
    --accent: #45b481;
    --on-accent: #082016;
  }
}

/* --- Base ---------------------------------------------------------------- */

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

body {
  margin: 0;
  font-family: var(--font);
  background: var(--surface);
  color: var(--text);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3 {
  line-height: 1.12;
  letter-spacing: -0.022em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.25rem, 6vw, 3.75rem); font-weight: 700; }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.5rem); font-weight: 700; }
h3 { font-size: 1.1875rem; font-weight: 650; }

p { margin: 0 0 1.15em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-underline-offset: 0.18em; }

img { max-width: 100%; }

:focus-visible {
  outline: 2.5px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

.wrap {
  width: min(100% - (var(--gutter) * 2), 1100px);
  margin-inline: auto;
}

.lede {
  font-size: clamp(1.0625rem, 2vw, 1.25rem);
  color: var(--text-muted);
}

.eyebrow {
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.75rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Device frames -------------------------------------------------------
   Apple requires official product bezels and forbids simulating or modifying
   them (no tilting, cropping, or added shadows). The bezel <img> is the
   sizing element; the screenshot sits in the transparent aperture beneath it.
   Aperture geometry was measured from the alpha channel of Apple's PNGs.
   -------------------------------------------------------------------------- */

.device {
  position: relative;
  width: var(--device-w, 280px);
  flex: none;
}

.device__bezel {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.device__screen {
  position: absolute;
  z-index: 1;
  overflow: hidden;
  background: #000;
}

.device__screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The aperture is a rounded rect whose corner radius is larger than the frame
   is thick, so at the corners the arc curves outside the device silhouette
   into fully transparent pixels. A square screen shows through there as white
   corners, so the screen must carry the same radius.
   The two percentages resolve to equal pixel radii (197px and 110px), which
   makes the corner circular rather than elliptical, and it scales with the
   frame. */

/* iPhone 17 — bezel 1350x2760, aperture 1206x2622 at (72, 69), radius 197 */
.device--iphone .device__screen {
  left: 5.333%;
  top: 2.5%;
  width: 89.333%;
  height: 95%;
  border-radius: 16.33% / 7.51%;
}

/* Apple Watch S11 46mm — bezel 560x880, aperture 416x496 at (72,192), r 110 */
.device--watch .device__screen {
  left: 12.857%;
  top: 21.818%;
  width: 74.286%;
  height: 56.364%;
  border-radius: 26.44% / 22.18%;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1.5rem;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 620;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.btn:hover { transform: translateY(-1px); opacity: 0.92; }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--ghost { border-color: var(--border); color: var(--text); }

.badge-link { display: inline-block; line-height: 0; }
.badge-link img { width: 158px; height: auto; }

/* The official badge is black artwork; invert it on dark surfaces so it
   stays legible. Apple permits the black and white badge variants. */
.badge-link--on-dark img { filter: invert(1); }
@media (prefers-color-scheme: dark) {
  .badge-link:not(.badge-link--on-dark) img { filter: invert(1); }
}

/* --- Site header --------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 62px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 680;
  font-size: 1.0625rem;
  letter-spacing: -0.015em;
  color: var(--text);
  text-decoration: none;
  margin-right: auto;
}

.brand img {
  width: 30px;
  height: 30px;
  border-radius: 7px;
}

.site-nav ul {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav a {
  color: var(--text);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 550;
}

.site-nav a:hover { color: var(--accent); }

.nav-toggle { display: none; }

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

.hero {
  background: var(--kb-green);
  color: #f5f3ef;
  padding-block: clamp(3.5rem, 8vw, 6rem);
  overflow: hidden;
}

.hero__inner {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
  align-items: center;
}

.hero h1 { color: #fff; }

.hero p {
  color: rgba(245, 243, 239, 0.82);
  font-size: clamp(1.0625rem, 2vw, 1.3125rem);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
}

.hero__note {
  margin-top: 1.25rem;
  font-size: 0.875rem;
  color: rgba(245, 243, 239, 0.62);
}

.hero__devices {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(1rem, 3vw, 2rem);
}

.hero__devices .device--iphone { --device-w: clamp(200px, 46vw, 292px); }
.hero__devices .device--watch { --device-w: clamp(96px, 21vw, 132px); }

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

.section { padding-block: var(--section-y); }
.section--alt { background: var(--surface-alt); }

.section__head {
  max-width: 46ch;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

/* --- Pricing ------------------------------------------------------------- */

.tiers {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}

.tier {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--surface);
  display: flex;
  flex-direction: column;
}

.tier--featured {
  border-color: var(--accent);
  border-width: 2px;
}

.tier__name {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.35rem;
}

.tier__name h3 { margin: 0; }

.tier__tag {
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

.tier__price {
  font-size: 1.875rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 0.25rem 0 0.15rem;
}

.tier__price span {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0;
}

.tier__sub {
  font-size: 0.9375rem;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
}

.tier ul {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
  display: grid;
  gap: 0.6rem;
  font-size: 0.9375rem;
}

/* Markers are absolutely positioned rather than being grid/flex children:
   these list items mix <strong> with bare text, and each inline run would
   otherwise become its own grid item and break the columns. */
.tier li {
  position: relative;
  padding-left: 1.6rem;
}

.tier li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.28em;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background: var(--accent);
  /* Checkmark punched out of the dot, so it needs no extra markup. */
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 8.3l2.5 2.5 5.1-5.4' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 108% no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 8.3l2.5 2.5 5.1-5.4' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 108% no-repeat;
  background-color: var(--accent);
}

.tier .btn { margin-top: auto; align-self: flex-start; }

.tiers__note {
  margin-top: 1.5rem;
  font-size: 0.875rem;
  color: var(--text-muted);
}

/* --- Feature rows -------------------------------------------------------- */

.feature {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.feature + .feature { border-top: 1px solid var(--border); }

.feature__media {
  display: flex;
  justify-content: center;
}

.feature__media .device--iphone { --device-w: clamp(210px, 52vw, 286px); }
/* The watch bezel includes the bands, so the watch body is only ~74% of the
   frame width. It needs a larger box than the phone to read at the same size. */
.feature__media .device--watch { --device-w: clamp(190px, 48vw, 270px); }

.feature ul {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
  max-width: var(--measure);
}

.feature li {
  position: relative;
  padding-left: 1.05rem;
  font-size: 0.9375rem;
  color: var(--text-muted);
}

.feature li strong {
  color: var(--text);
  font-weight: 620;
}

.feature li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* --- Prose (legal, support, updates) ------------------------------------- */

.page-head {
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--border);
}

.page-head p.lede { margin-top: 0.5rem; }

.updated {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-top: 0.75rem;
}

.prose {
  max-width: 70ch;
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
}

.prose h2 {
  font-size: 1.375rem;
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border);
}

.prose h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }

.prose h3 { margin-top: 1.75rem; font-size: 1.0625rem; }

.prose ul, .prose ol { padding-left: 1.15rem; margin: 0 0 1.15em; }
.prose li { margin-bottom: 0.5rem; }

.prose strong { font-weight: 640; }

/* A claim worth pulling out of the run of text. */
.callout {
  border-left: 3px solid var(--accent);
  padding: 0.15rem 0 0.15rem 1.15rem;
  margin: 1.75rem 0;
  color: var(--text);
}

.callout p { margin-bottom: 0.5em; }
.callout p:last-child { margin-bottom: 0; }

/* Unresolved content the site must not launch with. */
.todo {
  border: 1px dashed #c0392b;
  background: rgba(192, 57, 43, 0.07);
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  margin: 1.75rem 0;
  font-size: 0.9375rem;
}

.todo strong { color: #c0392b; }

/* --- FAQ ----------------------------------------------------------------- */

.faq { max-width: 70ch; }

.faq details {
  border-bottom: 1px solid var(--border);
  padding: 1.15rem 0;
}

.faq summary {
  cursor: pointer;
  font-weight: 620;
  font-size: 1.0625rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.2s ease;
}

.faq details[open] summary::after {
  transform: rotate(225deg) translate(-2px, -2px);
}

.faq details > *:not(summary) { margin-top: 0.85rem; }

/* --- Updates ------------------------------------------------------------- */

.release {
  padding-block: 1.75rem;
  border-bottom: 1px solid var(--border);
  max-width: 70ch;
}

.release__meta {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  margin-bottom: 0.5rem;
}

.release__version { font-weight: 680; font-size: 1.125rem; }

.release__date { font-size: 0.875rem; color: var(--text-muted); }

/* --- Card grid ----------------------------------------------------------- */

.cards {
  display: grid;
  gap: 1.15rem;
  grid-template-columns: 1fr;
}

.card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.35rem;
  background: var(--surface);
}

.card h3 { margin-bottom: 0.4rem; }

.card p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--text-muted);
}

@media (min-width: 620px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 940px) {
  .cards--3 { grid-template-columns: repeat(3, 1fr); }
}

/* --- Closing CTA --------------------------------------------------------- */

.cta {
  background: var(--kb-green);
  color: #f5f3ef;
  text-align: center;
  padding-block: clamp(3.5rem, 8vw, 5.5rem);
}

.cta h2 { color: #fff; }

.cta p {
  color: rgba(245, 243, 239, 0.82);
  margin-inline: auto;
}

.cta .badge-link { margin-top: 1.75rem; }

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

.site-footer {
  border-top: 1px solid var(--border);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  font-size: 0.9375rem;
}

.site-footer__grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
  margin-bottom: 2.5rem;
}

.site-footer h3 {
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.85rem;
}

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.site-footer a {
  color: var(--text);
  text-decoration: none;
}

.site-footer a:hover { color: var(--accent); }

.site-footer__legal {
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
  color: var(--text-muted);
  font-size: 0.875rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
}

.site-footer__legal p { margin: 0; }

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 719px) {
  .site-nav {
    position: absolute;
    inset: 100% 0 auto;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 0.5rem var(--gutter) 1.25rem;
    display: none;
  }

  .site-nav[data-open="true"] { display: block; }

  .site-nav ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
  }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: none;
    border: 1px solid var(--border);
    border-radius: 9px;
    color: var(--text);
    cursor: pointer;
  }

  .site-header__inner .badge-link { display: none; }
}

@media (min-width: 720px) {
  .tiers { grid-template-columns: repeat(2, 1fr); }

  .site-footer__grid { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 900px) {
  .hero__inner { grid-template-columns: 1.05fr 0.95fr; }

  .feature { grid-template-columns: 1fr 1fr; }

  /* Alternate sides. The media column is second in the DOM so that screen
     readers hear the description before the image on every row. */
  .feature--flip .feature__media { order: -1; }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}