/* pluckitapp.com — page styles on top of /tokens.css (Concrete & Glass v2.1).
 *
 * Every colour, radius, duration and easing here is a --pk-* token from the
 * generated stylesheet; the only literal numbers are layout (widths, grid
 * columns) and type scale. Dark mode comes from the token file itself via
 * prefers-color-scheme, and the ink CTA band simply re-declares the semantic
 * layer with data-theme="dark". */

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('/fonts/BricolageGrotesque-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/JetBrainsMono-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}

:root {
  color-scheme: light dark;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--pk-color-bg-canvas);
  color: var(--pk-color-text-primary);
  font-family: var(--pk-font-family-body);
  font-weight: var(--pk-font-weight-regular);
  font-size: 17px;
  line-height: 1.6;
}
a {
  color: var(--pk-color-text-link);
}
:focus-visible {
  outline: var(--pk-component-focus-ring-width) solid var(--pk-color-border-focus);
  outline-offset: var(--pk-component-focus-ring-offset);
}
img,
svg {
  display: block;
  max-width: 100%;
}
/* Without this an <img> keeps its height attribute while max-width shrinks
 * its width, and every image on a phone is squashed sideways. The width and
 * height attributes stay for what they are for: reserving the aspect ratio
 * before the file arrives, so nothing shifts as it loads. */
img {
  height: auto;
}
/* Even out heading lines so none ends on a single orphaned word, and keep
 * body paragraphs from ending on one. Unsupported browsers wrap as before. */
h1,
h2,
h3 {
  text-wrap: balance;
}
p,
li {
  text-wrap: pretty;
}
.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;
}
.wrap {
  width: min(100% - 2 * var(--pk-space-5), 1120px);
  margin-inline: auto;
}

/* ---- type ---------------------------------------------------------------- */
.display {
  font-family: var(--pk-font-family-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.04;
  margin: 0;
}
h1.display {
  font-size: clamp(2.6rem, 6.5vw, 4.5rem);
}
h2.display {
  font-size: clamp(1.9rem, 4vw, 2.75rem);
}
.brand-word {
  color: var(--pk-color-text-brand);
}
.tag {
  font-family: var(--pk-font-family-mono);
  font-weight: var(--pk-font-weight-medium);
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--pk-color-text-tertiary);
}
.tag--brand {
  color: var(--pk-color-text-brand);
}
.lede {
  font-size: 1.2rem;
  color: var(--pk-color-text-secondary);
  max-width: 34rem;
  margin: var(--pk-space-5) 0 0;
}
p {
  margin: 0;
}

/* ---- buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pk-space-2);
  height: var(--pk-component-button-height-pluck);
  padding: 0 var(--pk-space-6);
  border-radius: var(--pk-component-button-radius);
  font-family: var(--pk-font-family-body);
  font-weight: var(--pk-font-weight-semibold);
  font-size: 1rem;
  text-decoration: none;
  border: var(--pk-border-width-control) solid transparent;
  cursor: pointer;
  transition:
    background-color var(--pk-duration-fast) var(--pk-easing-standard),
    transform var(--pk-duration-fast) var(--pk-easing-standard);
}
.btn--primary {
  background: var(--pk-color-action-primary-bg);
  color: var(--pk-color-action-primary-fg);
}
.btn--primary:hover {
  background: var(--pk-color-action-primary-hover);
}
.btn--primary:active {
  background: var(--pk-color-action-primary-pressed);
  transform: translateY(1px);
}
.btn--ghost {
  background: transparent;
  color: var(--pk-color-text-primary);
  border-color: var(--pk-color-border-default);
}
.btn--ghost:hover {
  background: var(--pk-color-action-ghost-hover);
}
.btn--small {
  height: var(--pk-component-button-height-medium);
  padding: 0 var(--pk-space-4);
  font-size: 0.9rem;
}
.badge {
  display: inline-block;
  height: 54px;
}
.badge img {
  height: 100%;
  width: auto;
}

/* ---- header -------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--pk-z-chrome);
  background: var(--pk-color-glass-tint);
  -webkit-backdrop-filter: blur(var(--pk-blur-regular));
  backdrop-filter: blur(var(--pk-blur-regular));
  border-bottom: var(--pk-border-width-hairline) solid var(--pk-color-border-subtle);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  gap: var(--pk-space-6);
  height: 64px;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--pk-space-3);
  text-decoration: none;
  color: var(--pk-color-text-primary);
  font-family: var(--pk-font-family-display);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
}
.logo img {
  width: 36px;
  height: 36px;
  border-radius: 22.4%;
  box-shadow: var(--pk-elevation-1);
}
.site-nav {
  margin-left: auto;
  display: flex;
  gap: var(--pk-space-5);
}
.site-nav a {
  color: var(--pk-color-text-secondary);
  text-decoration: none;
  font-weight: var(--pk-font-weight-medium);
  font-size: 0.95rem;
}
.site-nav a:hover {
  color: var(--pk-color-text-primary);
}
@media (max-width: 720px) {
  .site-nav {
    display: none;
  }
  .site-header .btn {
    margin-left: auto;
  }
}

/* ---- hero ---------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: var(--pk-space-20) 0 var(--pk-space-16);
}
.hero .wrap {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--pk-space-12);
  align-items: center;
}
.hero-copy {
  max-width: 36rem;
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: var(--pk-space-5);
  margin-top: var(--pk-space-8);
  flex-wrap: wrap;
}
.hero-actions .link {
  font-weight: var(--pk-font-weight-medium);
}
.hero-note {
  margin-top: var(--pk-space-4);
  font-size: 0.9rem;
  color: var(--pk-color-text-tertiary);
}

/* ---- the hollow PLUCK band ---------------------------------------------- */
/* A pre-rendered outline band used as a mask, so one colour (the current
 * text colour) themes it in light and dark and no glyph seams overlap. */
.texture {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}
.texture::before {
  content: '';
  position: absolute;
  inset: -4% -2%;
  background-color: currentColor;
  /* Half the quiet texture opacity: the band is a solid outline, and at
   * full quiet strength it competed with the headline. */
  opacity: calc(var(--pk-opacity-texture-quiet) * 0.6);
  -webkit-mask-image: url('/img/wordmark-band.png');
  mask-image: url('/img/wordmark-band.png');
  /* A fixed tile rather than cover: cover scaled the band with the section,
   * which thickened the outline to a shout on wide screens. */
  -webkit-mask-size: 960px auto;
  mask-size: 960px auto;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
}

/* ---- scroll reveal ------------------------------------------------------- */
html.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--pk-duration-celebration) var(--pk-easing-emphasized),
    transform var(--pk-duration-celebration) var(--pk-easing-emphasized);
}
html.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ---- hero fact card ------------------------------------------------------ */
.stack {
  position: relative;
  min-height: 460px;
  display: grid;
  place-items: center;
}
.card {
  background: var(--pk-color-bg-surface);
  color: var(--pk-color-text-primary);
  border-radius: var(--pk-component-card-radius);
  box-shadow: var(--pk-elevation-3);
  width: min(100%, 400px);
  padding: var(--pk-space-6);
  position: relative;
  overflow: hidden;
  z-index: var(--pk-z-content);
}
.card--live {
  transform: rotate(-3deg);
}
.card h3 {
  font-family: var(--pk-font-family-display);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  margin: var(--pk-space-1) 0 var(--pk-space-4);
}
.fact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pk-space-4);
  padding: var(--pk-space-3) 0;
  border-top: var(--pk-border-width-hairline) solid var(--pk-color-border-subtle);
}
.fact .tag {
  display: block;
  margin-bottom: var(--pk-space-half);
}
.fact strong {
  font-weight: var(--pk-font-weight-semibold);
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}
.pill {
  flex: none;
  display: inline-grid;
  align-items: center;
  height: var(--pk-component-button-height-small);
  padding: 0 var(--pk-space-4);
  border-radius: var(--pk-radius-full);
  border: var(--pk-border-width-control) solid var(--pk-color-text-primary);
  font-weight: var(--pk-font-weight-semibold);
  font-size: 0.85rem;
  background: transparent;
  color: inherit;
}
/* The hot pill's resting state is the copied one: orange, "Copied ✓". That
 * is what the static Reuse card and a reduced-motion or no-JS hero show. The
 * live hero overrides it below to start as a plain Copy pill and flip. One
 * label is displayed at a time, so each state is only as wide as its text. */
.pill--hot .pill-copy {
  display: none;
}
.pill--hot {
  transition:
    background-color var(--pk-duration-standard) var(--pk-easing-standard),
    border-color var(--pk-duration-standard) var(--pk-easing-standard),
    color var(--pk-duration-standard) var(--pk-easing-standard);
  background: var(--pk-color-action-primary-bg);
  border-color: var(--pk-color-action-primary-bg);
  color: var(--pk-color-action-primary-fg);
}
.scan {
  position: absolute;
  left: 0;
  right: 0;
  top: -12%;
  height: 10%;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--pk-color-ai-gradient-start),
    transparent
  );
  opacity: 0;
  pointer-events: none;
}
/* The extraction loop: a scan sweeps, then each row rises in sequence and the
 * hot pill flips to Copied. Driven by .is-scanning / .is-extracted from JS;
 * without JS or with reduced motion the card simply shows the extracted state. */
@media (prefers-reduced-motion: no-preference) {
  .card--live {
    animation: settle var(--pk-duration-celebration) var(--pk-easing-emphasized) both;
  }
  @keyframes settle {
    from {
      transform: rotate(-5deg) translateY(12px);
      opacity: 0;
    }
    to {
      transform: rotate(-3deg) translateY(0);
      opacity: 1;
    }
  }
  html.js .card--live.is-scanning .scan {
    animation: scan 900ms var(--pk-easing-standard) both;
  }
  @keyframes scan {
    from {
      top: -12%;
      opacity: 1;
    }
    to {
      top: 104%;
      opacity: 1;
    }
  }
  html.js .card--live.is-scanning .fact {
    opacity: 0;
    transform: translateY(10px);
  }
  html.js .card--live.is-extracted .fact {
    animation: extract var(--pk-duration-slow) var(--pk-easing-emphasized) both;
  }
  html.js .card--live.is-extracted .fact:nth-child(4) {
    animation-delay: 0ms;
  }
  html.js .card--live.is-extracted .fact:nth-child(5) {
    animation-delay: 150ms;
  }
  html.js .card--live.is-extracted .fact:nth-child(6) {
    animation-delay: 300ms;
  }
  html.js .card--live.is-extracted .fact:nth-child(7) {
    animation-delay: 450ms;
  }
  @keyframes extract {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  /* Live hero, before the copy: indistinguishable from the other pills. */
  html.js .card--live:not(.is-copied) .pill--hot {
    background: transparent;
    border-color: var(--pk-color-text-primary);
    color: inherit;
  }
  html.js .card--live:not(.is-copied) .pill--hot .pill-copy {
    display: inline;
  }
  html.js .card--live:not(.is-copied) .pill--hot .pill-done {
    display: none;
  }
  html.js .card--live.is-copied .pill--hot {
    animation: pulse var(--pk-duration-celebration) var(--pk-easing-emphasized);
  }
  @keyframes pulse {
    50% {
      transform: scale(1.12);
    }
  }
}
@media (max-width: 860px) {
  .hero {
    padding-top: var(--pk-space-12);
  }
  .hero .wrap {
    grid-template-columns: 1fr;
  }
  .stack {
    min-height: 0;
    margin-top: var(--pk-space-8);
    padding: var(--pk-space-6) 0;
  }
}

/* ---- sections ------------------------------------------------------------ */
.section {
  padding: var(--pk-space-20) 0;
}
.section--subtle {
  background: var(--pk-color-bg-subtle);
}
.section-head {
  max-width: 40rem;
  margin-bottom: var(--pk-space-10);
}
.section-head .tag {
  display: block;
  margin-bottom: var(--pk-space-3);
}
.section-head p {
  margin-top: var(--pk-space-4);
  color: var(--pk-color-text-secondary);
  font-size: 1.1rem;
}
@media (max-width: 600px) {
  .section {
    padding: var(--pk-space-16) 0;
  }
}

/* ---- the scroll story ---------------------------------------------------- */
.story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--pk-space-12);
  align-items: start;
}
.story-visual {
  position: sticky;
  top: calc(64px + var(--pk-space-8));
  display: grid;
  min-height: 420px;
}
.story-frame {
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(0.97);
  transition:
    opacity var(--pk-duration-slow) var(--pk-easing-emphasized),
    transform var(--pk-duration-slow) var(--pk-easing-emphasized);
}
.story-frame img,
.statement img,
.privacy-grid img {
  width: 100%;
  height: auto;
  border-radius: var(--pk-component-card-radius);
  box-shadow: var(--pk-elevation-2);
}
.story-grid[data-active-step='1'] .story-frame[data-step='1'],
.story-grid[data-active-step='2'] .story-frame[data-step='2'],
.story-grid[data-active-step='3'] .story-frame[data-step='3'],
.story-grid[data-active-step='4'] .story-frame[data-step='4'] {
  opacity: 1;
  transform: none;
}
.story-steps {
  list-style: none;
  margin: 0;
  padding: 0;
}
.story-step {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--pk-space-8) 0;
  border-top: var(--pk-border-width-hairline) solid var(--pk-color-border-subtle);
  transition: opacity var(--pk-duration-slow) var(--pk-easing-standard);
}
.story-grid[data-active-step] .story-step {
  opacity: var(--pk-opacity-disabled);
}
.story-grid[data-active-step='1'] .story-step[data-step='1'],
.story-grid[data-active-step='2'] .story-step[data-step='2'],
.story-grid[data-active-step='3'] .story-step[data-step='3'],
.story-grid[data-active-step='4'] .story-step[data-step='4'] {
  opacity: 1;
}
.story-num {
  font-family: var(--pk-font-family-display);
  font-weight: 800;
  font-size: clamp(3rem, 6vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--pk-color-text-brand);
}
.story-step h3 {
  font-family: var(--pk-font-family-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: var(--pk-space-3) 0 var(--pk-space-3);
}
.story-step p {
  color: var(--pk-color-text-secondary);
  font-size: 1.05rem;
  max-width: 30rem;
}
.story-mobile {
  display: none;
}
@media (max-width: 900px) {
  .story-grid {
    grid-template-columns: 1fr;
  }
  .story-visual {
    display: none;
  }
  .story-step {
    min-height: 0;
    opacity: 1;
  }
  .story-grid[data-active-step] .story-step {
    opacity: 1;
  }
  .story-mobile {
    display: block;
    margin-bottom: var(--pk-space-5);
  }
  .story-mobile .card {
    margin: 0 auto;
  }
}

/* ---- the capability strip ------------------------------------------------ */
.features .section-head {
  margin-bottom: var(--pk-space-8);
}
.strip {
  display: flex;
  overflow: hidden;
  gap: var(--pk-space-3);
  padding: var(--pk-space-2) 0;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.strip-track {
  flex: none;
  display: flex;
  gap: var(--pk-space-3);
  list-style: none;
  margin: 0;
  padding: 0 calc(var(--pk-space-3) / 2);
  min-width: 100%;
  justify-content: space-around;
}
.chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--pk-space-2);
  height: var(--pk-component-button-height-medium);
  padding: 0 var(--pk-space-4);
  border-radius: var(--pk-radius-full);
  background: var(--pk-color-bg-surface);
  border: var(--pk-border-width-hairline) solid var(--pk-color-border-subtle);
  box-shadow: var(--pk-elevation-1);
  font-weight: var(--pk-font-weight-medium);
  font-size: 0.95rem;
  white-space: nowrap;
}
.chip svg {
  color: var(--pk-color-text-brand);
}
@media (prefers-reduced-motion: no-preference) {
  .strip-track {
    animation: marquee 40s linear infinite;
  }
  .strip:hover .strip-track {
    animation-play-state: paused;
  }
  @keyframes marquee {
    to {
      transform: translateX(calc(-100% - var(--pk-space-3)));
    }
  }
}

/* ---- big statements ------------------------------------------------------ */
.statement {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--pk-space-12);
  align-items: center;
  margin-top: var(--pk-space-16);
}
.statement--flip img {
  order: 2;
}
.statement h3 {
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
}
.statement p {
  margin-top: var(--pk-space-4);
  color: var(--pk-color-text-secondary);
  font-size: 1.1rem;
  max-width: 30rem;
}
@media (max-width: 860px) {
  .statement {
    grid-template-columns: 1fr;
    gap: var(--pk-space-6);
    margin-top: var(--pk-space-12);
  }
  .statement--flip img {
    order: 0;
  }
}

/* A real app screenshot, framed like the phone it came from. Narrower than
 * the column so a tall screen does not dwarf the headline beside it. */
.statement img.shot {
  justify-self: center;
  width: min(340px, 78%);
  /* The full screen, status bar included, so the corners match an iPhone's
   * display radius (~13.7% of its width) rather than clipping content. */
  border-radius: 52px;
  border: 10px solid var(--pk-color-bg-inverse);
  box-shadow: var(--pk-elevation-3);
}

/* ---- the one big sentence ------------------------------------------------ */
.reuse .tag {
  display: block;
  margin-bottom: var(--pk-space-4);
}
.reuse-line {
  font-size: clamp(2.4rem, 7vw, 5.5rem);
  max-width: 14em;
}
.cycle {
  display: inline-grid;
  color: var(--pk-color-text-brand);
  vertical-align: top;
}
.cycle-word {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(0.35em);
  transition:
    opacity var(--pk-duration-slow) var(--pk-easing-emphasized),
    transform var(--pk-duration-slow) var(--pk-easing-emphasized);
  white-space: nowrap;
}
.cycle-word.is-on {
  opacity: 1;
  transform: none;
}
.reuse-sub {
  margin-top: var(--pk-space-6);
  color: var(--pk-color-text-secondary);
  font-size: 1.15rem;
  max-width: 34rem;
}

/* ---- privacy band -------------------------------------------------------- */
.privacy {
  background: var(--pk-color-bg-canvas);
  color: var(--pk-color-text-primary);
}
.privacy-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--pk-space-12);
  align-items: center;
}
.privacy .tag {
  display: block;
  margin-bottom: var(--pk-space-3);
}
.checklist {
  list-style: none;
  padding: 0;
  margin: var(--pk-space-6) 0 0;
  display: grid;
  gap: var(--pk-space-3);
  font-size: 1.05rem;
}
.checklist li {
  display: flex;
  gap: var(--pk-space-3);
  align-items: baseline;
}
.checklist li::before {
  content: '\2713';
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: var(--pk-radius-full);
  background: var(--pk-color-action-primary-bg);
  color: var(--pk-color-action-primary-fg);
  font-size: 0.8em;
  font-weight: 700;
  transform: translateY(0.2em);
}
.privacy-more {
  margin-top: var(--pk-space-8);
  color: var(--pk-color-text-secondary);
}
@media (max-width: 860px) {
  .privacy-grid {
    grid-template-columns: 1fr;
    gap: var(--pk-space-8);
  }
}

/* ---- newsletter ---------------------------------------------------------- */
.invite {
  position: relative;
  max-width: 48rem;
  margin: 0 auto;
  padding: 2px;
  border-radius: var(--pk-component-card-radius);
  background: linear-gradient(
    120deg,
    var(--pk-color-ai-gradient-start),
    var(--pk-color-ai-gradient-end),
    var(--pk-color-border-subtle),
    var(--pk-color-ai-gradient-start)
  );
  background-size: 300% 300%;
}
@media (prefers-reduced-motion: no-preference) {
  .invite {
    animation: glow 8s linear infinite;
  }
  @keyframes glow {
    to {
      background-position: 300% 0;
    }
  }
}
.invite-inner {
  background: var(--pk-color-bg-surface);
  border-radius: calc(var(--pk-component-card-radius) - 2px);
  text-align: center;
  padding: var(--pk-space-12) var(--pk-space-6);
}
.updates h2 {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
}
.updates p {
  color: var(--pk-color-text-secondary);
  margin-top: var(--pk-space-3);
  font-size: 1.1rem;
}
.updates form {
  display: flex;
  gap: var(--pk-space-3);
  justify-content: center;
  margin: var(--pk-space-6) auto 0;
  max-width: 32rem;
  flex-wrap: wrap;
}
.updates input[type='email'] {
  flex: 1 1 16rem;
  height: var(--pk-component-button-height-pluck);
  padding: 0 var(--pk-space-4);
  border-radius: var(--pk-component-button-radius);
  border: var(--pk-border-width-control) solid var(--pk-color-border-default);
  background: var(--pk-color-bg-canvas);
  color: var(--pk-color-text-primary);
  font: inherit;
}
.updates input[type='email']:focus {
  border-color: var(--pk-color-border-interactive);
}
.honeypot {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.status {
  margin-top: var(--pk-space-4);
  font-weight: var(--pk-font-weight-medium);
  min-height: 1.6em;
}
.status[data-state='ok'] {
  color: var(--pk-color-status-success-fg);
}
.status[data-state='error'] {
  color: var(--pk-color-status-error-fg);
}
.fine {
  font-size: 0.85rem;
  color: var(--pk-color-text-tertiary);
  margin-top: var(--pk-space-4);
}

/* ---- final CTA band (ink) ------------------------------------------------ */
.cta {
  position: relative;
  overflow: hidden;
  background: var(--pk-color-bg-canvas);
  color: var(--pk-color-text-primary);
  padding: var(--pk-space-20) 0;
  text-align: center;
}
.cta .wrap {
  position: relative;
  z-index: var(--pk-z-content);
}
.cta p {
  color: var(--pk-color-text-secondary);
  margin: var(--pk-space-4) auto 0;
  max-width: 32rem;
  font-size: 1.1rem;
}
.cta .badge {
  margin: var(--pk-space-8) auto 0;
}

/* ---- footer -------------------------------------------------------------- */
.site-footer {
  padding: var(--pk-space-10) 0;
  border-top: var(--pk-border-width-hairline) solid var(--pk-color-border-subtle);
  color: var(--pk-color-text-tertiary);
  font-size: 0.9rem;
}
.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pk-space-3) var(--pk-space-6);
  justify-content: space-between;
}
.site-footer a {
  color: var(--pk-color-text-secondary);
}

/* ---- touch and small screens ------------------------------------------- */
/* Apple's minimum hit target is 44pt. Inline links inside a sentence are
 * exempt (WCAG 2.5.8); standalone controls are not. */
@media (pointer: coarse) {
  .btn--small {
    height: 44px;
  }
  .hero-actions .link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .site-footer a {
    display: inline-block;
    padding-block: 10px;
  }
}

@media (max-width: 600px) {
  .hero {
    padding: var(--pk-space-8) 0 var(--pk-space-10);
  }
  /* The tilted card must stay inside the 20px gutter: a rotated box is wider
   * than its layout box, so it gets a little less width and a little less
   * tilt than on desktop. */
  .stack {
    margin-top: var(--pk-space-6);
    padding: var(--pk-space-4) var(--pk-space-2);
  }
  .card {
    width: min(100%, 360px);
    padding: var(--pk-space-5);
  }
  .card--live {
    transform: rotate(-2deg);
  }

  .section {
    padding: var(--pk-space-12) 0;
  }
  .section-head {
    margin-bottom: var(--pk-space-6);
  }

  /* Story: one compact unit per step -- a landscape image, then the text --
   * instead of a desktop-height step with a portrait image. */
  .story-step {
    padding: var(--pk-space-6) 0;
  }
  .story-mobile img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: var(--pk-radius-2xl);
    box-shadow: var(--pk-elevation-1);
  }
  .story-num {
    font-size: 2.5rem;
  }
  .story-step h3 {
    font-size: 1.5rem;
    margin: var(--pk-space-2) 0;
  }
  .story-step p {
    font-size: 1rem;
  }

  .statement {
    margin-top: var(--pk-space-10);
    gap: var(--pk-space-5);
  }
  .statement img.shot {
    width: min(260px, 72%);
    border-width: 8px;
    border-radius: 40px;
  }
  .statement h3 {
    font-size: 1.75rem;
  }
  .statement p {
    font-size: 1rem;
  }

  .privacy-grid {
    gap: var(--pk-space-6);
  }
  .privacy-grid img {
    aspect-ratio: 16 / 10;
    object-fit: cover;
  }

  /* Newsletter: one column, full-width field and button, both above the
   * 44pt minimum. 17px input text also stops iOS zooming on focus. */
  .invite-inner {
    padding: var(--pk-space-8) var(--pk-space-5);
  }
  .updates form {
    flex-direction: column;
  }
  .updates input[type='email'],
  .updates form .btn {
    flex: none;
    width: 100%;
    height: var(--pk-component-button-height-pluck);
  }
  .updates input[type='email'] {
    font-size: 17px;
  }
  /* The status line keeps its reserved height (so a message never shifts the
   * page) but loses the desktop margin above it. */
  .status {
    margin-top: var(--pk-space-2);
  }
  .fine {
    margin-top: var(--pk-space-2);
  }
}

/* ---- legal and status pages --------------------------------------------- */
.doc {
  max-width: 44rem;
  margin: 0 auto;
  padding: var(--pk-space-12) var(--pk-space-5) var(--pk-space-20);
}
.doc h1 {
  font-family: var(--pk-font-family-display);
  font-weight: 800;
  font-size: 2.2rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 var(--pk-space-2);
}
.doc h2 {
  font-family: var(--pk-font-family-display);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -0.015em;
  margin: var(--pk-space-10) 0 var(--pk-space-3);
}
.doc h3 {
  font-size: 1rem;
  font-weight: var(--pk-font-weight-semibold);
  margin: var(--pk-space-6) 0 var(--pk-space-2);
}
.doc p,
.doc li {
  margin: 0 0 var(--pk-space-3);
}
.doc .muted {
  color: var(--pk-color-text-tertiary);
  font-size: 0.95rem;
}
.doc ul {
  padding-left: 1.15rem;
}
.doc table {
  border-collapse: collapse;
  width: 100%;
  margin: var(--pk-space-3) 0;
  font-size: 0.95rem;
}
.doc th,
.doc td {
  text-align: left;
  padding: var(--pk-space-3) var(--pk-space-3);
  border-bottom: var(--pk-border-width-hairline) solid var(--pk-color-border-subtle);
  vertical-align: top;
}
.doc th {
  font-weight: var(--pk-font-weight-semibold);
}
.doc .note {
  border-left: 3px solid var(--pk-color-border-subtle);
  padding: var(--pk-space-1) 0 var(--pk-space-1) var(--pk-space-4);
  margin: var(--pk-space-5) 0;
  color: var(--pk-color-text-secondary);
}
.doc .overflow {
  overflow-x: auto;
}
.doc .actions {
  margin-top: var(--pk-space-8);
}