/* D1 — TERMINAL SAMPLE (the PRICE page only)
   ------------------------------------------------------------------
   Scope: `.pf-term` — the price page and nothing else. Every other page
   keeps the current glass treatment, so this sample can be judged on its
   own and thrown away by deleting this one file plus one <link> line.

   Type: ONE family for the whole page — the macOS Terminal stack.
   `ui-monospace` resolves to SF Mono on macOS, which is the default face
   of Terminal.app. No webfont is fetched for this page.

   Colour: ONE hue. Amber phosphor. Every mark on this terminal is that
   single colour at some brightness — headings and prices at full, body
   copy at 72%, micro labels at 65%, rules and borders at 12–35%. The only
   other value in the terminal is the near-black of the screen itself,
   used for inverse-video commands. No second accent, no white text, no
   neutral grey. A real phosphor terminal has exactly one colour.

   Surfaces: flat panels, square corners, 1px hairline rules, no blur, no
   shadow, no gradient. */

:root {
  --pf-term-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', monospace;

  /* the one hue, at every brightness the terminal uses */
  --pf-term-amber: #ffb547;
  --pf-term-a72: rgba(255, 181, 71, 0.72);
  --pf-term-a65: rgba(255, 181, 71, 0.65);
  --pf-term-a35: rgba(255, 181, 71, 0.35);
  --pf-term-a20: rgba(255, 181, 71, 0.2);
  --pf-term-a12: rgba(255, 181, 71, 0.12);
  --pf-term-a06: rgba(255, 181, 71, 0.06);

  --pf-term-line: rgba(255, 181, 71, 0.18);
  --pf-term-panel: rgba(6, 8, 11, 0.86);
  /* the screen itself — the ink of an inverse-video command */
  --pf-term-ink: #07090d;
}

/* --- one family on the whole page ------------------------------------- */

.pf-term .pf-term-window,
.pf-term .pf-term-window *,
.pf-term .pf-edges,
.pf-term .pf-edges * {
  font-family: var(--pf-term-mono);
  font-weight: 400;
}

/* --- the screen -------------------------------------------------------- */

/* The window is an 80-column terminal: SF Mono at 13px advances 7.8px,
   so 666px of content = ~85 columns.
   76px of top offset clears the one-row channel line (bottom 57px).
   The shell's inherited side padding is dropped so the window is exactly
   720px; mobile restores it (see the media query below). */
.pf-term .pf-term-shell {
  width: min(720px, 100%);
  padding: 76px 0 48px;
}
.pf-term .pf-term-window {
  border: 1px solid var(--pf-term-line);
  border-radius: 0;
  background: var(--pf-term-panel);
  box-shadow: none;
}

/* title strip */
.pf-term .pf-term-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--pf-term-line);
  background: var(--pf-term-a06);
  font-size: 10px;
  letter-spacing: 0.26em;
  color: var(--pf-term-a65);
}
.pf-term .pf-term-mark {
  color: var(--pf-term-amber);
}
.pf-term .pf-term-mode {
  padding: 2px 8px;
  border: 1px solid var(--pf-term-a35);
  color: var(--pf-term-a65);
  letter-spacing: 0.22em;
}
.pf-term .pf-term-body {
  padding: clamp(20px, 2.4vw, 26px) clamp(16px, 2.6vw, 26px) clamp(18px, 2.2vw, 24px);
}

/* --- head -------------------------------------------------------------- */

.pf-term .pf-head {
  margin-bottom: clamp(14px, 1.8vh, 20px);
}
.pf-term .pf-eyebrow {
  margin: 0 0 14px;
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--pf-term-a65);
  text-shadow: none;
}
.pf-term .pf-eyebrow-i {
  margin-right: 12px;
  color: var(--pf-term-amber);
}
.pf-term .pf-h2 {
  margin: 0;
  max-width: 42ch;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--pf-term-amber);
  text-shadow: none;
}
.pf-term .pf-h2::after {
  content: '\258C';
  margin-left: 0.4em;
  color: var(--pf-term-amber);
  animation: pf-term-blink 1.15s steps(1, end) infinite;
}
@keyframes pf-term-blink {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

/* --- tiers: rows, not cards -------------------------------------------- */

.pf-term .pf-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
.pf-term .pf-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    'top   price'
    'body  body'
    'cta   cta';
  column-gap: 24px;
  row-gap: 10px;
  align-items: baseline;
  padding: 12px 0 14px;
  border: 0;
  border-top: 1px solid var(--pf-term-line);
  border-radius: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
.pf-term .pf-card:last-child {
  border-bottom: 1px solid var(--pf-term-line);
}
.pf-term .pf-card.is-off {
  opacity: 0.72;
}
.pf-term .pf-tier-top {
  grid-area: top;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;
  gap: 14px;
}
.pf-term .pf-tier-price {
  grid-area: price;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 8px;
  margin: 0;
}
.pf-term .pf-tier-body {
  grid-area: body;
  margin: 0;
}
.pf-term .pf-hr {
  display: none;
}
.pf-term .pf-card > .pf-cta,
.pf-term .pf-card > .pf-coming {
  grid-area: cta;
}

.pf-term .pf-card-h {
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pf-term-amber);
}
.pf-term .pf-micro {
  color: var(--pf-term-a65);
  letter-spacing: 0.18em;
  text-shadow: none;
}
.pf-term .pf-display-sm {
  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
  line-height: 1;
  color: var(--pf-term-amber);
  text-shadow: none;
}
.pf-term .pf-display-sm.is-dim {
  color: var(--pf-term-a65);
  opacity: 1;
}
.pf-term .pf-chip {
  padding: 2px 7px;
  border: 1px solid var(--pf-term-a35);
  border-radius: 0;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  color: var(--pf-term-a65);
}
.pf-term .pf-chip::before {
  content: '[';
}
.pf-term .pf-chip::after {
  content: ']';
}
.pf-term .pf-card-p {
  margin: 0;
  max-width: none;
  font-size: 13px;
  line-height: 1.6;
  color: var(--pf-term-a72);
  text-shadow: none;
}

/* --- commands ----------------------------------------------------------- */

.pf-term .pf-cta {
  appearance: none;
  cursor: pointer;
  padding: 9px 18px;
  border: 1px solid var(--pf-term-amber);
  border-radius: 0;
  background: var(--pf-term-amber);
  color: var(--pf-term-ink);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  box-shadow: none;
  filter: none;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  transition: background 160ms ease, color 160ms ease;
}
.pf-term .pf-cta::before {
  content: '>';
  opacity: 0.7;
}
.pf-term .pf-cta:hover {
  background: transparent;
  color: var(--pf-term-amber);
  filter: none;
}
.pf-term .pf-cta:focus-visible {
  outline: 1px solid var(--pf-term-amber);
  outline-offset: 2px;
}
.pf-term .pf-cta-wide {
  width: auto;
  justify-self: start;
  margin-top: 4px;
  text-align: left;
}

/* the closed tier */
.pf-term .pf-coming {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  justify-self: start;
  width: auto;
  margin: 0;
  padding: 9px 18px;
  border: 1px dashed var(--pf-term-a35);
  border-radius: 0;
  background: none;
  text-align: left;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pf-term-a65);
}
.pf-term .pf-coming::before {
  content: '\00B7';
  margin-right: 10px;
  color: var(--pf-term-a65);
}

/* --- founder row -------------------------------------------------------- */

.pf-term .pf-founder {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 20px;
  row-gap: 12px;
  margin-top: 18px;
  padding: 14px 0 0;
  border: 0;
  border-top: 1px solid var(--pf-term-a35);
  border-radius: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.pf-term .pf-founder-badge {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 0;
  border: 1px solid var(--pf-term-amber);
  background: var(--pf-term-a12);
  box-shadow: none;
}
.pf-term .pf-founder-copy {
  min-width: 0;
}
.pf-term .pf-founder-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
}
.pf-term .pf-founder-top .pf-micro {
  color: var(--pf-term-a65);
}
.pf-term .pf-founder-body {
  margin: 8px 0 0;
  max-width: none;
  font-size: 13px;
  line-height: 1.6;
  color: var(--pf-term-a72);
}
.pf-term .pf-founder-count {
  text-align: right;
}
.pf-term .pf-founder-count .pf-display-sm {
  color: var(--pf-term-amber);
}
.pf-term .pf-founder-count .pf-micro {
  letter-spacing: 0.2em;
}

/* --- NEXT / BACK as terminal keys --------------------------------------- */

.pf-term .pf-edge {
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--pf-term-a35);
  border-radius: 0;
  background: rgba(6, 8, 11, 0.72);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--pf-term-a65);
  font-size: 10px;
  letter-spacing: 0.2em;
}
.pf-term .pf-edge::before {
  content: '[';
}
.pf-term .pf-edge::after {
  content: ']';
}
.pf-term .pf-edge:hover {
  color: var(--pf-term-amber);
  border-color: var(--pf-term-amber);
  background: var(--pf-term-a12);
}
.pf-term .pf-edge-next {
  color: var(--pf-term-amber);
}

/* --- phosphor scanlines -------------------------------------------------- */

.pf-term::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: repeating-linear-gradient(
    180deg,
    rgba(255, 181, 71, 0.03) 0,
    rgba(255, 181, 71, 0.03) 1px,
    transparent 1px,
    transparent 3px
  );
}

/* --- the chrome around the terminal -------------------------------------- */

/* The channel line and the nav sit outside the page section, so they are
   matched to the terminal with :has() while a terminal page is on screen:
   the blue status dot and the blue nav hover become phosphor too, so the
   screen shows one colour and not two. */
#pf-root:has(.pf-term) #pf-channel .pf-ch-left::before {
  background: var(--pf-term-amber);
  box-shadow: 0 0 10px rgba(255, 181, 71, 0.85);
}
#pf-root:has(.pf-term) #pf-nav button {
  color: var(--pf-term-a65);
}
#pf-root:has(.pf-term) #pf-nav button:hover,
#pf-root:has(.pf-term) #pf-nav button[aria-current='true'] {
  color: var(--pf-term-amber);
}

/* --- thin terminal scrollbar --------------------------------------------- */

.pf-term .pf-page-scroll::-webkit-scrollbar {
  width: 10px;
}
.pf-term .pf-page-scroll::-webkit-scrollbar-track {
  background: rgba(6, 8, 11, 0.6);
}
.pf-term .pf-page-scroll::-webkit-scrollbar-thumb {
  background: var(--pf-term-a35);
  border: 3px solid rgba(6, 8, 11, 0.6);
}
.pf-term .pf-page-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--pf-term-amber);
}

/* --- narrow -------------------------------------------------------------- */

@media (max-width: 760px) {
  /* the nav wraps to two rows here — the channel line reaches 94px */
  .pf-term .pf-term-shell {
    padding: 100px 14px 48px;
  }
  .pf-term .pf-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'top'
      'price'
      'body'
      'cta';
    row-gap: 12px;
  }
  .pf-term .pf-tier-price {
    justify-content: flex-start;
  }
  .pf-term .pf-founder {
    grid-template-columns: 40px minmax(0, 1fr);
  }
  .pf-term .pf-founder-count {
    grid-column: 2;
    text-align: left;
  }
  .pf-term .pf-edges {
    padding: 0 16px;
  }
}

/* --- reduced motion ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .pf-term .pf-h2::after {
    animation: none;
  }
}