/* UnderStimulated — blacktop.social/understimulated
 *
 * Paper and ink, and nothing else. The page borrows the app's own contract
 * rather than the studio's asphalt-and-chalk one: system sans at 400 for
 * anything read as language, monospace tabular for every number, monospace
 * 9-11px uppercase for legends. There is no colour on this page except inside
 * the answer-sheet clip, where the green *is* the object being filmed.
 *
 * The tokens below are copied from UnderStimulated's src/styles/tokens.css as
 * literals on purpose. The app is a separate repo and a separate build; an
 * import across that line would rot without anyone noticing.
 */

:root {
  color-scheme: light dark;

  --paper: #ffffff;
  --ink: #000000;

  --g1: #f2f2f2;
  --g2: #d9d9d9;
  --g3: #a6a6a6;
  --g4: #737373;
  --g5: #404040;

  --hairline: rgba(0, 0, 0, 0.12);
  --hairline-strong: rgba(0, 0, 0, 0.28);
  --dot: rgba(0, 0, 0, 0.14);

  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --text-legend: 0.5625rem;
  --text-micro: 0.6875rem;
  --text-body: 0.8125rem;
  --text-label: 0.9375rem;

  --s-1: 2px;
  --s-2: 4px;
  --s-3: 8px;
  --s-4: 12px;
  --s-5: 16px;
  --s-6: 24px;
  --s-7: 40px;
  --s-8: 64px;
  --s-9: 96px;

  /* Section rhythm. Every band carried a flat --s-9, so consecutive bands
     stacked to 192px of nothing and pushed the demos under the fold on a
     laptop. One knob, so the page tightens or loosens together. */
  --section-y: 56px;

  --r-sm: 2px;
  --r-lg: 12px;

  --panel-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.18),
    0 12px 44px rgba(0, 0, 0, 0.22),
    0 2px 8px rgba(0, 0, 0, 0.1);

  --ease-settle: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-firm: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-quick: 140ms;
  --dur-base: 260ms;

  --page: 1180px;
}

/* Dark mode is the identical design with paper and ink swapped and the ramp
   reversed. No second palette, no second set of rules. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0a0a0a;
    --ink: #ffffff;

    --g1: #1c1c1c;
    --g2: #2e2e2e;
    --g3: #6b6b6b;
    --g4: #9a9a9a;
    --g5: #c8c8c8;

    --hairline: rgba(255, 255, 255, 0.16);
    --hairline-strong: rgba(255, 255, 255, 0.34);
    --dot: rgba(255, 255, 255, 0.16);

    --panel-shadow:
      0 0 0 0.5px rgba(255, 255, 255, 0.14),
      0 12px 48px rgba(0, 0, 0, 0.6),
      0 2px 10px rgba(0, 0, 0, 0.45);
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* Wide things scroll inside their own box; the page itself never does. */
  overflow-x: hidden;
}

img,
video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.wrap {
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 var(--s-6);
}

/* Legends label the machine. They are not sentences, and they never wrap. */
.legend {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-legend);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--g4);
}

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

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: 12px 20px;
  border: 1px solid var(--ink);
  border-radius: var(--r-sm);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: var(--text-label);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  /* Instant inversion, no fade. The app does the same thing, and it is the one
     moment either surface tips its hand. */
  transition: none;
}

.button:hover,
.button:focus-visible {
  background: var(--paper);
  color: var(--ink);
}

.button[data-variant="outline"] {
  background: var(--paper);
  color: var(--ink);
  padding: 10px 16px;
  font-size: var(--text-body);
}

.button[data-variant="outline"]:hover,
.button[data-variant="outline"]:focus-visible {
  background: var(--ink);
  color: var(--paper);
}

.button svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
  flex: none;
}

.button[data-variant="outline"] svg {
  width: 13px;
  height: 13px;
}

/* ---- Top bar ------------------------------------------------------------ */

.top {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  padding-top: var(--s-6);
  padding-bottom: var(--s-6);
}

.wordmark {
  font-size: var(--text-label);
  letter-spacing: -0.02em;
  text-decoration: none;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

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

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  align-items: start;
  gap: var(--s-9);
  /* Block only: the shorthand would wipe .wrap's side padding, and on a phone
     that puts the headline against the glass. */
  padding-block: var(--s-7) var(--section-y);
}

h1 {
  margin: 0;
  max-width: 12ch;
  font-size: clamp(2.6rem, 5.2vw, 4rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.hero-lead {
  margin: var(--s-6) 0 0;
  max-width: 44ch;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--g5);
}

.hero-kicker {
  margin: var(--s-4) 0 0;
  max-width: 44ch;
  color: var(--g4);
}

.hero-cta {
  margin-top: 28px;
}

.hero-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-top: var(--s-4);
}

.hero-req {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  color: var(--g3);
}

/* The one ask on the page above the fold, and it is a box rather than a
   button: a tip is not the next step, it is an aside. */
.tip-line {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: 7px 12px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  color: var(--g4);
  text-decoration: none;
}

.tip-line:hover,
.tip-line:focus-visible {
  color: var(--ink);
  border-color: var(--ink);
}

/* One flex item, not three: the cone and the sentence. Left as separate items
   the bolded half became its own column the moment the line wrapped. */
.tip-line span {
  display: block;
}

.tip-line svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  flex: none;
}

.tip-line b {
  font-weight: 400;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---- The mac, in HTML --------------------------------------------------- */

/* The strip and the panel are one object seen slightly from the left, so the
   panel keeps its own shadow and its own corners instead of being a picture of
   them. Perspective lives on the wrapper; one transform, no library. */
.mac {
  position: relative;
  perspective: 1400px;
  padding-top: var(--s-4);
}

.mac-tilt {
  transform: rotateX(4deg) rotateY(-9deg) rotate(-1.2deg);
  transform-origin: 70% 0;
}

.menubar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 26px;
  height: 30px;
  padding: 0 var(--s-6) 0 var(--s-5);
  border-radius: 6px 6px 0 0;
  border: 1px solid var(--hairline);
  border-bottom: none;
  /* The menu bar is the one translucent surface macOS has; a flat gray reads
     as a toolbar instead. */
  background: linear-gradient(180deg, var(--g1), var(--paper));
  color: var(--g5);
  /* Runs off the right edge of the column, the way a real one runs off the
     screen. */
  width: 118%;
  margin-left: -18%;
}

.menubar svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.menubar .filled {
  fill: currentColor;
  stroke: none;
}

/* The one lit item: the app's own tray icon, showing the panel is open. */
.menubar-item {
  display: grid;
  place-items: center;
  width: 30px;
  height: 22px;
  border-radius: 4px;
}

.menubar-item[data-open="true"] {
  background: var(--g2);
  color: var(--ink);
}

.menubar-clock {
  font-size: var(--text-micro);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* The panel: a white card with four words on it. Same 48px rows, same 15px
   sans, same mono tabular numbers as the app, because it is the app. */
.panel {
  position: relative;
  width: min(340px, 100%);
  margin: var(--s-3) 0 0 auto;
  margin-right: 6%;
  padding: var(--s-5) 0 var(--s-5);
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--panel-shadow);
}



.panel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  height: 48px;
  padding: 0 var(--s-6);
  background: var(--paper);
  color: var(--ink);
  transition: none;
}

.panel-row:hover {
  background: var(--ink);
  color: var(--paper);
}

.panel-row:hover .panel-value {
  color: var(--paper);
}

.panel-name {
  font-size: var(--text-label);
  line-height: 1;
}

.panel-value {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--g5);
}

.panel-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: var(--s-2) 18px 0;
}

.panel-gear {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  color: var(--g3);
}

.panel-gear svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* The one legend on the page that is allowed to be loud. It is the line the
   whole hero is a picture of. */
.mac-caption {
  margin: var(--s-6) 0 0;
  text-align: right;
  font-size: var(--text-body);
  letter-spacing: 0.2em;
  color: var(--g5);
}

/* ---- Examples ----------------------------------------------------------- */

.examples {
  position: relative;
  padding: var(--section-y) 0;
  /* Graph paper, at the density of the app's own scratch stages. It is the
     only decoration on the page and it is behind everything. */
  background-image: radial-gradient(var(--dot) 0.9px, transparent 0.9px);
  background-size: 22px 22px;
  background-position: center top;
}

/* Every rule on the page is the width of the content column. This section is
   the one whose background runs edge to edge, so its rule cannot be a border
   on the section — it is drawn at the same width as the ones below it. */
.examples::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, var(--page));
  height: 1px;
  background: var(--hairline);
}

/* A sentence, not a legend. It is the only line above the grid, so it carries
   the whole introduction. The 40px used to belong to the open state of a
   disclosure; the disclosure is gone and the gap is still right. */
.examples-lead {
  margin: 0 auto var(--s-7);
  max-width: 40ch;
  text-align: center;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* Two by two, and each one twice the size it was. Four clips a reader actually
   watches beat six they scan past. */
.example-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-6);
  max-width: 1060px;
  margin: 0 auto;
}

.example {
  display: flex;
  flex-direction: column;
}

.example-frame {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-sm);
  background: var(--paper);
  overflow: hidden;
}

.example-frame video,
.example-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Until a clip is dropped in, the frame says which game is missing rather than
   showing a broken picture. */
.example-frame[data-pending="true"] {
  display: grid;
  place-items: center;
  background: var(--g1);
}

/* ---- Support ------------------------------------------------------------ */

/* Three amounts in one card, borrowed from 404 B.C.: the shape is a price
   table because that is the shape people already know how to read, and the
   only thing being sold is nothing. */
.support {
  padding-block: var(--section-y);
  border-top: 1px solid var(--hairline);
}

.support-title {
  margin: 0;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.support-sub {
  margin: var(--s-4) 0 var(--s-7);
  font-family: var(--font-mono);
  font-size: var(--text-body);
  color: var(--g4);
}

.support-card {
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-sm);
  overflow: hidden;
}

.support-tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.support-tier {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-6);
  text-decoration: none;
  border-right: 1px solid var(--hairline);
  transition: none;
}

.support-tier:last-child {
  border-right: none;
}

.support-tier:hover,
.support-tier:focus-visible {
  background: var(--ink);
  color: var(--paper);
}

.support-tier:hover .tier-label,
.support-tier:focus-visible .tier-label,
.support-tier:hover .tier-flag,
.support-tier:focus-visible .tier-flag {
  color: inherit;
}

/* The middle one is marked the way everything else on this page is marked:
   with a wash and a rule, never with a colour. */
.support-tier[data-featured="true"] {
  background: var(--g1);
  box-shadow: inset 0 0 0 1px var(--ink);
}

/* Signal strength, priced. One bar, two bars, full — the same picture the
   Wi-Fi row in the app is about, which is the only reason a tip jar on this
   page gets to have an icon at all. */
.tier-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 20px;
  margin-bottom: var(--s-4);
}

.tier-bars .bar {
  width: 5px;
  border-radius: 1px;
  background: var(--g2);
  transform-origin: bottom;
}

.tier-bars .bar:nth-child(1) { height: 8px; }
.tier-bars .bar:nth-child(2) { height: 14px; }
.tier-bars .bar:nth-child(3) { height: 20px; }

.tier-bars .bar[data-on="true"] {
  background: var(--ink);
}

.support-tier:hover .tier-bars .bar[data-on="true"],
.support-tier:focus-visible .tier-bars .bar[data-on="true"] {
  background: var(--paper);
}

/* Held flat until the card is on screen, then let go one after another, so the
   bars climb rather than appear. */
.support-card[data-armed="true"] .bar[data-on="true"] {
  transform: scaleY(0);
}

.support-card[data-armed="false"] .bar[data-on="true"] {
  animation: bar-rise 320ms var(--ease-settle) backwards;
}

.support-card[data-armed="false"] .bar:nth-child(2) { animation-delay: 90ms; }
.support-card[data-armed="false"] .bar:nth-child(3) { animation-delay: 180ms; }

@keyframes bar-rise {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

.tier-amount {
  font-family: var(--font-mono);
  font-size: 2.1rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1;
}

.tier-label {
  font-family: var(--font-mono);
  font-size: var(--text-body);
  color: var(--g4);
}

.tier-flag {
  margin-top: var(--s-1);
  font-family: var(--font-mono);
  font-size: var(--text-legend);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--g5);
}

.support-note {
  margin: 0;
  padding: var(--s-4) var(--s-6);
  border-top: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  color: var(--g4);
}

.support-or {
  margin: var(--s-7) 0 var(--s-4);
}

.support-alt {
  margin: 0;
  font-size: 1rem;
  color: var(--g5);
}

.support-links {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin: var(--s-4) 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-body);
  color: var(--g3);
}

.support-links a {
  color: var(--g5);
  text-underline-offset: 3px;
}

.support-links a:hover {
  color: var(--ink);
}

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

.closing {
  display: grid;
  justify-items: center;
  gap: var(--s-5);
  padding-block: var(--section-y);
  text-align: center;
  border-top: 1px solid var(--hairline);
}

.closing-mark {
  display: flex;
  align-items: center;
  gap: var(--s-5);
}

/* The mark carries its own rounded shape and its own shadow, so it gets no
   radius from us: two sets of corners at 1px apart is a wobble, not a curve. */
.closing-mark img {
  width: 76px;
  height: 76px;
}

.closing h2 {
  margin: 0;
  font-size: clamp(1.9rem, 3.6vw, 2.75rem);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.closing p {
  margin: 0;
  max-width: 46ch;
  color: var(--g4);
}

.closing .button {
  margin-top: var(--s-4);
}

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

.site-footer {
  padding-bottom: var(--s-7);
}

/* The rule sits on the bar, not on the footer, so it is the width of the
   content column like every other rule on the page. */
.footer-bar {
  border-top: 1px solid var(--hairline);
  padding-top: var(--s-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  flex-wrap: wrap;
}

.copyright {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-legend);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--g4);
}

.copyright a {
  color: var(--g5);
}

.socials {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.social-mark {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  color: var(--g3);
}

.social-mark:hover {
  color: var(--ink);
}

.social-mark svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.legal-links {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  font-family: var(--font-mono);
  font-size: var(--text-legend);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--g4);
}

.legal-links a {
  text-decoration: none;
  color: inherit;
}

.legal-links a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- Narrow ------------------------------------------------------------- */

@media (max-width: 900px) {
  /* Stacked, the column gap becomes a vertical one, so it comes down with
     everything else. The block-end override is gone: --section-y is already
     tighter than the 64px this used to reach for. */
  .hero {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-7);
  }

  h1 {
    max-width: none;
  }

  .menubar {
    width: 100%;
    margin-left: 0;
  }

  .mac-tilt {
    transform: none;
  }

  .panel {
    margin-right: 0;
    margin-left: auto;
  }

  .mac-caption {
    text-align: left;
  }

}

@media (max-width: 600px) {
  .top {
    flex-wrap: wrap;
  }

  .example-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .support-tiers {
    grid-template-columns: minmax(0, 1fr);
  }

  .support-tier {
    border-right: none;
    border-bottom: 1px solid var(--hairline);
  }

  .support-tier:last-child {
    border-bottom: none;
  }

  .hero-cta,
  .closing .button {
    width: 100%;
  }
}

/* Nothing on this page moves on its own. The only animation is the row
   inversion under the cursor, and a cursor is a choice. Even so: */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ── the rest of the network ────────────────────────────────────────────────
   The block lives in a shadow root and brings its own layout; these custom
   properties are the whole theming surface. Paper and ink like the rest of
   this page, and they follow the dark scheme for free because those two
   tokens already swap there.

   Unlike inside the app, the cards keep their own colours here: this is a web
   page on the studio's domain rather than the monochrome panel, and a reader
   who has just watched four clips of a black-and-white app benefits from
   seeing that the studio is not only that. */
.promo-section {
  padding-block: var(--s-7, 56px);
}

.promo-host {
  display: block;
  max-width: 640px;
  margin-inline: auto;
  --bp-ink: var(--ink);
  --bp-ink-dim: var(--g4);
  --bp-accent: var(--ink);
  --bp-radius: 4px;
  --bp-card-border: 1px solid currentColor;
  --bp-card-h: 112px;
  --bp-field-bg: var(--paper);
  --bp-go-bg: var(--ink);
  --bp-go-ink: var(--paper);
  --bp-head-weight: 600;
}