/* =============================================================
   PROMPT FOR THAT — v2 Design System
   Direction: Editorial Technical Manual

   The pitch: this product is a reference document. So we present
   it like one. Warm paper stock, hairline rules, mono metadata,
   one vermilion accent, hard (unblurred) offset shadows.
   No blue cards. No icon circles. No gradient hero.
   ============================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  /* Paper stock — warm, printed, not white */
  --paper:    #F2EFE7;
  --paper-2:  #E9E4D8;
  --paper-3:  #DFD9C9;
  --paper-4:  #F8F6F1;

  /* Ink — warm near-blacks.
     --ink-3 is the lightest tone SAFE for small text: 5.3:1 on --paper,
     4.8:1 on --paper-2. --ink-4 sits at 3.4:1 and is therefore reserved for
     large text and non-text detail (rules, ghost type) only — never body copy. */
  --ink:      #16130F;
  --ink-2:    #423B32;
  --ink-3:    #6B6152;
  --ink-4:    #8A8070;

  /* Signal — the only chromatic accent on the page.
     Two values, because one cannot serve both grounds: --signal is 5.0:1 on
     paper, --signal-on-dark is 5.6:1 on ink. Using --signal on ink gives
     3.2:1, which fails WCAG AA for the 11px footer headings. */
  --signal:      #B83A16;
  --signal-ink:  #8C2D10;
  --signal-on-dark: #E06A3C;
  --signal-wash: rgba(184, 58, 22, .08);

  /* Rules — hairlines are the primary structural device */
  --rule:    rgba(22, 19, 15, .13);
  --rule-2:  rgba(22, 19, 15, .26);
  --rule-3:  rgba(22, 19, 15, .50);

  /* Semantic (kept for parity with existing markup) */
  --success: #2F6B4F;
  --warning: #9A6B12;
  --error:   #A32A1C;

  /* Type */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body:    "IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Scale — 16px base. The old system ran 14px, which read timid. */
  --t-xs:   0.6875rem;  /* 11 */
  --t-sm:   0.8125rem;  /* 13 */
  --t-base: 1rem;       /* 16 */
  --t-lg:   1.1875rem;  /* 19 */
  --t-xl:   1.5rem;     /* 24 */
  --t-2xl:  2rem;       /* 32 */
  --t-3xl:  2.875rem;   /* 46 */
  --t-4xl:  clamp(2.75rem, 6.4vw, 4.75rem);
  --t-5xl:  clamp(3.25rem, 8.6vw, 7rem);

  /* Space — 4px grid */
  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;
  --s5: 24px;  --s6: 32px;  --s7: 48px;  --s8: 64px;
  --s9: 96px;  --s10: 128px; --s11: 176px;

  /* Hard shadow — print misregistration, never blurred */
  --lift:      5px 5px 0 var(--ink);
  --lift-sm:   3px 3px 0 var(--ink);
  --lift-signal: 5px 5px 0 var(--signal);

  --dur:    .28s;
  --dur-slow: .55s;
  --ease:   cubic-bezier(.2, .7, .3, 1);
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga", "calt";
  overflow-x: hidden;
}

/* Paper grain — the texture that stops it reading as flat web */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: .40;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}

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

::selection { background: var(--signal); color: var(--paper-4); }

a { color: inherit; }

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

/* ---------- 3. Type ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -.022em;
  margin: 0 0 var(--s4);
  font-variation-settings: "SOFT" 0, "WONK" 0;
  text-wrap: balance;
}

h1 { font-size: var(--t-4xl); }
h2 { font-size: var(--t-3xl); }
h3 { font-size: var(--t-xl); }
h4 { font-size: var(--t-base); }

p { margin: 0 0 var(--s4); }

.dek {
  font-size: var(--t-lg);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 46ch;
}

/* Mono eyebrow — the label above every section */
.eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: var(--s4);
}
.eyebrow--ink { color: var(--ink-3); }

.mono { font-family: var(--font-mono); }
.num  { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---------- 4. Layout ---------- */
.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--s6);
}

.section { padding-block: var(--s9); }
@media (min-width: 760px) { .section { padding-block: var(--s10); } }
.section--tight { padding-block: var(--s8); }
@media (min-width: 760px) { .section--tight { padding-block: var(--s9); } }
.section--ruled { border-top: 1px solid var(--rule); }
.section--paper2 { background: var(--paper-2); }

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--s6);
  flex-wrap: wrap;
  padding-bottom: var(--s5);
  margin-bottom: var(--s7);
  border-bottom: 1px solid var(--rule-2);
}
.section-head h2 { margin: 0; }
.section-head .dek { margin: 0; max-width: 40ch; font-size: var(--t-base); }

/* Split — the asymmetric workhorse */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s8);
}
@media (min-width: 900px) {
  .split { grid-template-columns: 7fr 5fr; gap: var(--s10); align-items: start; }
  .split--even { grid-template-columns: 1fr 1fr; }
  .split--lead-right { grid-template-columns: 5fr 7fr; }
  /* Copy + fixed sidebar, for sales pages */
  .split--aside { grid-template-columns: minmax(0, 1fr) 400px; gap: var(--s9); }
}

/* ---------- 5. Masthead ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--rule-2);
}

/* The double rule is the tell of a printed masthead */
.header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: var(--rule);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s6);
  height: 68px;
}

.logo {
  font-family: var(--font-display);
  font-size: 1.3125rem;
  font-weight: 700;
  letter-spacing: -.028em;
  text-decoration: none;
  white-space: nowrap;
  color: var(--ink);
}
.logo span {
  color: var(--signal);
  font-weight: 500;
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--s6);
}
.nav a {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-2);
  padding-block: var(--s2);
  border-bottom: 1px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.nav a:hover {
  color: var(--ink);
  border-bottom-color: var(--signal);
}
.nav a.nav-cta {
  background: var(--ink);
  color: var(--paper-4);
  padding: var(--s3) var(--s4);
  border: 1px solid var(--ink);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav a.nav-cta:hover {
  background: var(--signal);
  border-color: var(--signal);
  color: var(--paper-4);
}

.menu-toggle {
  display: none;
  background: none;
  border: 1px solid var(--rule-2);
  color: var(--ink);
  width: 42px; height: 42px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.menu-toggle:hover { background: var(--paper-2); }

@media (max-width: 860px) {
  .menu-toggle { display: flex; }
  .nav {
    position: absolute;
    top: 68px; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--rule-2);
    padding: var(--s3) var(--s6) var(--s6);
    display: none;
  }
  .nav.nav-open { display: flex; }
  .nav a {
    padding-block: var(--s4);
    border-bottom: 1px solid var(--rule);
  }
  .nav a.nav-cta {
    margin-top: var(--s4);
    text-align: center;
    border-bottom: 1px solid var(--ink);
  }
}

/* ---------- 6. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--s4) var(--s6);
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper-4);
  cursor: pointer;
  border-radius: 0;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              background var(--dur) var(--ease), color var(--dur) var(--ease);
  box-shadow: var(--lift-sm);
}
.btn:hover {
  background: var(--signal);
  border-color: var(--signal);
  color: var(--paper-4);
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--ink);
}
.btn:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 var(--ink);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: none;
}
.btn--ghost:hover {
  background: var(--ink);
  color: var(--paper-4);
  border-color: var(--ink);
  box-shadow: var(--lift-sm);
}

.btn--sm { padding: var(--s3) var(--s4); font-size: var(--t-xs); }
.btn--lg { padding: var(--s5) var(--s8); font-size: var(--t-base); }

.btn--full { width: 100%; justify-content: center; }

/* Underlined text link */
.link {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-3);
  padding-bottom: 2px;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.link:hover { color: var(--signal); border-bottom-color: var(--signal); }
.link .arr { display: inline-block; transition: transform var(--dur) var(--ease); }
.link:hover .arr { transform: translateX(4px); }

/* ---------- 7. Hero ---------- */
.hero {
  position: relative;
  padding-block: var(--s8) var(--s9);
  border-bottom: 1px solid var(--rule-2);
  overflow: hidden;
}
@media (min-width: 760px) {
  .hero { padding-block: var(--s11) var(--s10); }
}

/* Oversized ghosted wordmark bleeding off the right edge */
.hero::after {
  content: "PROMPT";
  position: absolute;
  right: -.06em;
  bottom: -.30em;
  font-family: var(--font-display);
  font-size: clamp(7rem, 20vw, 19rem);
  font-weight: 700;
  letter-spacing: -.05em;
  line-height: .7;
  color: var(--ink);
  opacity: .035;
  pointer-events: none;
  user-select: none;
}

.hero h1 {
  font-size: var(--t-5xl);
  margin-bottom: var(--s5);
}
.hero h1 em {
  font-style: normal;
  color: var(--signal);
}
.hero .dek { margin-bottom: var(--s7); }

.hero-actions {
  display: flex;
  gap: var(--s4);
  flex-wrap: wrap;
  align-items: center;
}

/* --- The spec sheet. The hero IS a datasheet. --- */
.spec {
  border: 1px solid var(--ink);
  background: var(--paper-4);
  box-shadow: var(--lift);
  position: relative;
  z-index: 1;
}
.spec__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s4);
  padding: var(--s3) var(--s5);
  background: var(--ink);
  color: var(--paper-4);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.spec__head span:last-child { color: var(--ink-4); }

.spec__body { padding: var(--s2) var(--s5) var(--s4); }

.spec__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s4);
  padding-block: var(--s3);
  border-bottom: 1px solid var(--rule);
}
.spec__row:last-of-type { border-bottom: 0; }
.spec__key {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.spec__val {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--ink);
}

/* Live prompt excerpt — shows the product, not a promise */
.spec__sample {
  margin: var(--s4) 0 0;
  padding: var(--s4);
  background: var(--paper-2);
  border-left: 2px solid var(--signal);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  line-height: 1.7;
  color: var(--ink-2);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 132px;
  overflow: hidden;
  position: relative;
}
.spec__sample::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 44px;
  background: linear-gradient(transparent, var(--paper-2));
}
.spec__sample b { color: var(--signal); font-weight: 500; }

/* ---------- 8. Marquee of disciplines ---------- */
.ticker {
  border-bottom: 1px solid var(--rule-2);
  background: var(--paper-2);
  overflow: hidden;
  padding-block: var(--s3);
}
.ticker__track {
  display: flex;
  gap: var(--s6);
  width: max-content;
  animation: slide 42s linear infinite;
}
.ticker__item {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
.ticker__item::after { content: " /"; color: var(--signal); }
@keyframes slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- 9. THE INDEX (categories) ----------
   A numbered catalogue table, not a grid of cards. */
.index {
  border-top: 1px solid var(--rule);
}

.index__item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: var(--s4) var(--s5);
  padding: var(--s5) var(--s4);
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  position: relative;
  transition: background var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}
.index__item:hover { background: var(--paper-4); padding-left: var(--s6); }

/* Ink wedge wipes in on hover */
.index__item::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--signal);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--dur) var(--ease);
}
.index__item:hover::before { transform: scaleY(1); }

.index__no {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
  transition: color var(--dur) var(--ease);
}
.index__item:hover .index__no { color: var(--signal); }

.index__name {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.15;
  margin: 0;
  grid-column: 2;
}
.index__desc {
  grid-column: 2;
  color: var(--ink-3);
  font-size: var(--t-sm);
  line-height: 1.55;
  max-width: 52ch;
  margin: 0;
}
.index__meta {
  grid-column: 3;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--s1);
  text-align: right;
  white-space: nowrap;
}
.index__count {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--ink-3);
  letter-spacing: .08em;
}
.index__price {
  font-family: var(--font-mono);
  font-size: var(--t-lg);
  font-weight: 600;
  color: var(--ink);
}
.index__go {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.index__item:hover .index__go { color: var(--signal); transform: translateX(3px); }

@media (max-width: 640px) {
  .index__item { grid-template-columns: auto 1fr; }
  .index__meta {
    grid-column: 2;
    grid-row: auto;
    flex-direction: row;
    align-items: baseline;
    gap: var(--s4);
    margin-top: var(--s3);
  }
  .index__name { font-size: var(--t-lg); }
}

/* ---------- 10. Dark band — what you get ---------- */
.band {
  background: var(--ink);
  color: var(--paper);
  padding-block: var(--s9);
  position: relative;
}
@media (min-width: 760px) { .band { padding-block: var(--s10); } }
.band .eyebrow { color: var(--signal-on-dark); }
.band h2 { color: var(--paper-4); }
.band .dek { color: var(--ink-4); }

.band__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: var(--s8);
  border-top: 1px solid rgba(242, 239, 231, .16);
}
@media (min-width: 760px) { .band__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .band__grid { grid-template-columns: repeat(4, 1fr); } }

.band__cell {
  padding: var(--s6) var(--s5) var(--s7) 0;
  border-bottom: 1px solid rgba(242, 239, 231, .16);
}
@media (min-width: 1080px) {
  .band__cell { border-bottom: 0; padding-right: var(--s6); }
  .band__cell + .band__cell { padding-left: var(--s6); border-left: 1px solid rgba(242, 239, 231, .16); }
}
.band__cell:last-child { border-bottom: 0; }
@media (max-width: 1079px) {
  .band__cell:nth-last-child(2) { border-bottom: 0; }
}

.band__num {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .18em;
  color: var(--signal-on-dark);
  margin-bottom: var(--s4);
}
.band__cell h3 {
  font-size: var(--t-lg);
  color: var(--paper-4);
  margin-bottom: var(--s3);
}
.band__cell p {
  color: var(--ink-4);
  font-size: var(--t-sm);
  line-height: 1.6;
  margin: 0;
}

/* ---------- 11. Testimonials ---------- */
.quotes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--rule);
}
@media (min-width: 860px) { .quotes { grid-template-columns: repeat(3, 1fr); } }

.quote {
  padding: var(--s7) var(--s6) var(--s7) 0;
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
}
@media (min-width: 860px) {
  .quote { border-bottom: 0; padding-right: var(--s6); }
  .quote + .quote { border-left: 1px solid var(--rule); padding-left: var(--s6); }
}
.quote__mark {
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: .6;
  color: var(--signal);
  margin-bottom: var(--s4);
}
.quote p {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  line-height: 1.42;
  letter-spacing: -.014em;
  color: var(--ink);
  margin-bottom: var(--s5);
}
.quote__by {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}


/* ---------- 12. CTA ---------- */
.cta {
  border: 1px solid var(--ink);
  background: var(--paper-4);
  box-shadow: var(--lift);
  padding: var(--s8);
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
}
.cta h2 { margin-bottom: var(--s3); }
.cta p { color: var(--ink-2); max-width: 44ch; margin-inline: auto; margin-bottom: var(--s6); }

/* ---------- 13. Prompt cards (category + preview) ---------- */
.prompt {
  border: 1px solid var(--rule-2);
  background: var(--paper-4);
  padding: var(--s6);
  margin-bottom: var(--s4);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.prompt:hover { border-color: var(--ink); transform: translateY(-2px); }

.prompt__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s4);
  padding-bottom: var(--s4);
  margin-bottom: var(--s4);
  border-bottom: 1px solid var(--rule);
}
.prompt__no {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--signal-ink);
  letter-spacing: .12em;
}
.prompt__title {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: -.014em;
  margin: var(--s2) 0 0;
  line-height: 1.2;
}
.prompt__tag {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  border: 1px solid var(--rule-2);
  padding: var(--s1) var(--s3);
  white-space: nowrap;
}

.prompt__body {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  line-height: 1.72;
  color: var(--ink-2);
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0 0 var(--s5);
  padding: var(--s4);
  background: var(--paper);
  border-left: 2px solid var(--rule-2);
  max-height: 340px;
  overflow: hidden;
  position: relative;
}
.prompt__body.is-open { max-height: none; }

.prompt__actions { display: flex; gap: var(--s3); flex-wrap: wrap; }

/* Compatibility with the existing .prompt-card / .prompt-text hooks */
.prompt-card { border: 1px solid var(--rule-2); background: var(--paper-4); padding: var(--s6); margin-bottom: var(--s4); }
.prompt-text {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  line-height: 1.72;
  white-space: pre-wrap;
  word-break: break-word;
  padding: var(--s4);
  background: var(--paper);
  border-left: 2px solid var(--rule-2);
  margin-bottom: var(--s5);
}

.btn-copy.copied { background: var(--success); border-color: var(--success); color: #fff; }

/* Locked state.
   The head sits above the veil so the title and tag stay readable —
   otherwise the overlay hides the very thing it is labelling. */
.prompt-locked { position: relative; }
.prompt-locked .prompt__head,
.prompt-locked .prompt-card-header {
  position: relative;
  z-index: 3;
  background: var(--paper-4);
}
.prompt-locked-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(var(--paper-4) 72%, rgba(248, 246, 241, .96));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s3);
  text-align: center;
  padding: var(--s6);
  padding-bottom: var(--s7);
  z-index: 2;
}
.prompt-locked .prompt__actions,
.prompt-locked .prompt__body { filter: blur(2.5px); opacity: .5; }

/* ---------- 14. Category hero ---------- */
.cat-hero {
  border-bottom: 1px solid var(--rule-2);
  padding-block: var(--s8) var(--s8);
  background: var(--paper-2);
}
@media (min-width: 760px) {
  .cat-hero { padding-block: var(--s9) var(--s9); }
}
.cat-hero h1 {
  /* Sized for a ~600px column. The homepage can go to 7rem; a sales page
     with a sidebar beside it cannot, or it wraps to four lines. */
  font-size: clamp(2.125rem, 3.6vw, 3.375rem);
  line-height: 1.06;
  margin-bottom: var(--s4);
  max-width: 18ch;
}
.cat-hero .dek { margin-bottom: var(--s7); }

.crumb {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--s5);
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
}
.crumb a { text-decoration: none; border-bottom: 1px solid var(--rule-2); }
.crumb a:hover { color: var(--signal); border-color: var(--signal); }
.crumb span { color: var(--ink-3); }

/* Buy panel */
.buybox {
  border: 1px solid var(--ink);
  background: var(--paper-4);
  box-shadow: var(--lift);
}
.buybox__top { padding: var(--s6); border-bottom: 1px solid var(--rule); }
.buybox__price {
  font-family: var(--font-mono);
  font-size: 2.75rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--ink);
}
.buybox__price sup {
  font-size: 1.125rem;
  vertical-align: super;
  color: var(--ink-3);
}
.buybox__note {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .08em;
  color: var(--ink-3);
  margin-top: var(--s3);
}
.buybox__actions { padding: var(--s6); display: flex; flex-direction: column; gap: var(--s3); }

.trustlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}
.trustlist li {
  display: flex;
  gap: var(--s3);
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .06em;
  color: var(--ink-2);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--rule);
}
.trustlist li:last-child { border-bottom: 0; padding-bottom: 0; }
.trustlist li::before { content: "✓"; color: var(--signal); font-weight: 600; }

/* ---------- 15. Forms ---------- */
.field { margin-bottom: var(--s5); }
.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--s2);
}
.field input, .field select, .field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--t-base);
  padding: var(--s3) var(--s4);
  border: 1px solid var(--rule-2);
  background: var(--paper-4);
  color: var(--ink);
  border-radius: 0;
}
.field input:focus, .field select:focus {
  outline: none;
  border-color: var(--signal);
  box-shadow: 3px 3px 0 var(--signal-wash);
}

/* ---------- 16. Footer / colophon ---------- */
.footer {
  background: var(--ink);
  color: var(--ink-4);
  padding-block: var(--s9) var(--s6);
}
.footer a { color: var(--ink-4); text-decoration: none; }
.footer a:hover { color: var(--signal); }

.footer__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s7);
  padding-bottom: var(--s7);
  border-bottom: 1px solid rgba(242, 239, 231, .14);
}
@media (min-width: 780px) { .footer__top { grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s6); } }

.footer .logo { color: var(--paper-4); display: inline-block; margin-bottom: var(--s4); }
.footer .logo span { color: var(--signal-on-dark); font-weight: 500; }
.footer__brand p {
  font-size: var(--t-sm);
  line-height: 1.6;
  max-width: 34ch;
  color: var(--ink-4);
}
.footer h4 {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--signal-on-dark);
  margin-bottom: var(--s4);
}
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s3); }
.footer ul a { font-size: var(--t-sm); }

.footer__bottom {
  padding-top: var(--s5);
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .08em;
  color: var(--ink-4);
}
.footer__bottom p { margin: 0; }

/* ---------- 17. 404 ---------- */
.e404 {
  min-height: 74vh;
  display: flex;
  align-items: center;
  padding-block: var(--s10);
}
.e404__code {
  font-family: var(--font-mono);
  font-size: clamp(4rem, 16vw, 11rem);
  font-weight: 600;
  line-height: .85;
  letter-spacing: -.05em;
  color: var(--signal);
  margin-bottom: var(--s5);
}

/* ---------- 18. Motion ---------- */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.rise { animation: riseIn var(--dur-slow) var(--ease) backwards; }
.d1 { animation-delay: .05s; }
.d2 { animation-delay: .13s; }
.d3 { animation-delay: .21s; }
.d4 { animation-delay: .29s; }
.d5 { animation-delay: .37s; }
.d6 { animation-delay: .45s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .rise { opacity: 1; transform: none; }
}

/* ---------- 19. Utilities ---------- */
.text-center { text-align: center; }
.mt-6 { margin-top: var(--s6); }
.mt-8 { margin-top: var(--s8); }
.mb-0 { margin-bottom: 0; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}