/* =============================================================
   PROMPT FOR THAT — v2 Compatibility Layer
   Loads AFTER v2.css, and only on the 61 legacy pages.

   Purpose: restyle pages whose markup still uses the old class
   names, so the whole site shares one design without rewriting
   every page. Nothing here is loaded by the redesigned pages
   (index.html, category/real-estate/index.html, 404.html), which
   means these rules cannot regress them.

   Contents:
     1. Legacy token shim   (157 inline styles reference old tokens)
     2. Buttons
     3. Header / nav (2 structural variants)
     4. Footer (4 structural variants)
     5. Sections & containers
     6. Prose (long-form content, blog article bodies)
     7. Blog index + post
     8. Category landing
     9. Category preview
    10. Category content (gated library)
    11. Core pages: FAQ, access form, success
    12. Alerts & JS-injected classes
   ============================================================= */

/* ---------- 1. Legacy token shim ----------
   22 legacy files carry inline styles like style="margin:var(--space-4)";
   without these the declarations resolve to nothing and get dropped. */
:root {
  /* spacing: map the old 4px-grid scale onto the v2 tokens */
  --space-1: 4px;   --space-2: var(--s2);   --space-3: var(--s3);
  --space-4: var(--s4); --space-5: var(--s5); --space-6: var(--s6);
  --space-8: var(--s7); --space-10: var(--s7); --space-12: var(--s8);
  --space-16: var(--s9); --space-20: var(--s10);

  /* colour: old blue system -> new paper/ink system */
  --color-bg: var(--paper);
  --color-bg-alt: var(--paper-2);
  --color-bg-dark: var(--ink);
  --color-text: var(--ink);
  --color-text-light: var(--ink-2);
  --color-text-lighter: var(--ink-3);
  --color-text-inverse: var(--paper-4);
  --color-primary: var(--signal);
  --color-primary-dark: var(--signal-ink);
  --color-primary-light: var(--ink-4);
  --color-secondary: var(--signal);
  --color-success: var(--success);
  --color-warning: var(--warning);
  --color-error: var(--error);
  --color-border: var(--rule-2);

  /* type */
  --text-xs: var(--t-xs);
  --text-sm: var(--t-sm);
  --text-base: var(--t-base);
  --text-lg: var(--t-lg);
  --text-xl: var(--t-xl);
  --text-2xl: var(--t-2xl);
  --text-3xl: var(--t-3xl);

  /* radii: the old system rounded everything. The new one does not. */
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-xl: 0;
  --radius-full: 0;
}

/* Legacy pages never load the Phosphor icon font by default; the two
   that reference .ph classes do load it. Fall back to text if it fails. */
.ph { font-style: normal; }

/* ---------- 2. Buttons ---------- */
/* v2.css styles .btn / .btn--*. These are the legacy modifiers. */
.btn-secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-3);
  box-shadow: none;
}
.btn-secondary:hover {
  background: var(--ink);
  color: var(--paper-4);
  border-color: var(--ink);
  box-shadow: var(--lift-sm);
}

.btn-light {
  background: var(--paper-4);
  color: var(--ink);
  border-color: var(--paper-4);
}
.btn-light:hover { background: var(--signal); border-color: var(--signal); color: var(--paper-4); }

/* Text-only CTA used inside prompt preview cards.
   These carry BOTH .btn and .btn-text in the markup, so this has to undo
   every part of the .btn base or the label ends up vermilion on ink. */
.btn-text {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: none;
  color: var(--signal);
  text-decoration: none;
  border: 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  box-shadow: none;
  padding: 0 0 2px;
  cursor: pointer;
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn-text:hover {
  background: none;
  color: var(--signal-ink);
  border-color: var(--signal-ink);
  box-shadow: none;
  transform: none;
}
.btn-text .arr { display: inline-block; transition: transform var(--dur) var(--ease); }
.btn-text:hover .arr { transform: translateX(3px); }

.btn-small { padding: var(--s3) var(--s4); font-size: var(--t-xs); }

/* Legacy button variant naming (the .btn itself carries base styles in v2.css) */
.btn-large { padding: var(--s4) var(--s7); font-size: var(--t-sm); }

/* ---------- 3. Header / nav ----------
   Variant A: div.container.header-inner > a.logo + nav.nav
   Variant B: div.container > nav.nav > a.logo + div.nav-links   */
.nav { display: flex; align-items: center; gap: var(--s6); }
.nav-links { display: flex; align-items: center; gap: var(--s6); }

.nav a,
.nav-links 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, .nav-links a:hover { color: var(--ink); border-bottom-color: var(--signal); }

/* A .logo nested inside .nav must not inherit nav link styling */
.nav > .logo, .nav .logo {
  font-family: var(--font-display);
  font-size: 1.3125rem;
  font-weight: 700;
  letter-spacing: -.028em;
  text-transform: none;
  color: var(--ink);
  border-bottom: 0;
  padding: 0;
}
.nav > .logo:hover, .nav .logo:hover { color: var(--ink); }
.nav > .logo span, .nav .logo span { color: var(--signal); }

/* nav>logo variant: logo and links share a row */
.nav > .logo { margin-right: auto; }

/* A button inside the nav must keep button colours.
   `.nav a` (0,1,1) outranks `.btn` (0,1,0), so without this the header CTA
   renders ink-on-ink at 1.68:1 contrast — effectively unreadable. */
.nav a.btn,
.nav a.btn-primary,
.nav a.btn-secondary,
.nav a.btn-small,
.header a.btn { color: var(--paper-4); }

.nav a.btn-secondary,
.header a.btn-secondary { color: var(--ink); }
.nav a.btn-secondary:hover,
.header a.btn-secondary:hover { color: var(--paper-4); }

.nav a.btn-primary:hover,
.header a.btn-primary:hover { color: var(--paper-4); }

/* Explicit alias: the old design defined .btn-primary as the accent button.
   v2.css styles .btn itself, but naming the modifier keeps intent readable
   and stops any page-level override from silently winning. */
.btn-primary {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper-4);
}
.btn-primary:hover {
  background: var(--signal);
  border-color: var(--signal);
  color: var(--paper-4);
}

.header .btn-primary,
.header .btn-small { border-bottom: 1px solid var(--ink); }

/* ---------- 4. Footer ---------- */
.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-on-dark); }

.footer .logo,
a.footer-logo {
  font-family: var(--font-display);
  font-size: 1.3125rem;
  font-weight: 700;
  letter-spacing: -.028em;
  color: var(--paper-4);
  display: inline-block;
  margin-bottom: var(--s4);
}
.footer .logo span { color: var(--signal-on-dark); font-weight: 500; }

/* Variant 1: .footer-inner > .footer-brand + 3 bare divs + .footer-bottom */
.footer-inner {
  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-inner { grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s6); }
}

/* Variant 2: .footer-content > .footer-brand + .footer-links(a x5) */
.footer-content {
  display: flex;
  flex-direction: column;
  gap: var(--s6);
  padding-bottom: var(--s7);
  border-bottom: 1px solid rgba(242, 239, 231, .14);
}
@media (min-width: 780px) {
  .footer-content { flex-direction: row; justify-content: space-between; align-items: flex-start; }
  .footer-content .footer-brand { max-width: 34ch; }
  .footer-content .footer-links {
    display: flex;
    gap: var(--s6);
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    letter-spacing: .1em;
    text-transform: uppercase;
  }
}

/* Variant 3: bare .footer > .container > .footer-bottom (no wrapper) */
.footer > .container > .footer-bottom { border-top: 0; padding-top: 0; }

/* Variant 4: .footer-grid (2 outlier blog posts) */
@media (min-width: 780px) {
  .footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--s6);
    padding-bottom: var(--s7);
    border-bottom: 1px solid rgba(242, 239, 231, .14);
  }
}

.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, .footer-links { list-style: none; margin: 0; padding: 0; }
.footer ul { display: flex; flex-direction: column; gap: var(--s3); }
.footer ul a { font-size: var(--t-sm); }

.footer-bottom {
  padding-top: var(--s5);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .08em;
  color: var(--ink-4);
}
.footer-bottom p { margin: 0; }

/* ---------- 5. Sections & containers ---------- */
.container-narrow { max-width: 780px; }

.section { padding-block: var(--s9); }
@media (min-width: 760px) { .section { padding-block: var(--s10); } }

.section.bg-light { background: var(--paper-2); border-block: 1px solid var(--rule); }
.section.bg-primary { background: var(--ink); color: var(--paper); border: 0; }
.section.bg-primary h2, .section.bg-primary h3 { color: var(--paper-4); }
.section.bg-primary p { color: var(--ink-4); }

.text-center { text-align: center; }
.mt-4 { margin-top: var(--s4); }
.mt-6 { margin-top: var(--s6); }
.mb-4 { margin-bottom: var(--s4); }

.section-title {
  font-size: var(--t-2xl);
  margin-bottom: var(--s3);
}
.section-subtitle { color: var(--ink-3); margin-bottom: var(--s6); max-width: 60ch; }

.section-header { margin-bottom: var(--s7); padding-bottom: var(--s5); border-bottom: 1px solid var(--rule-2); }
.section-header h2 { margin-bottom: var(--s2); }
.section-header p { color: var(--ink-3); margin: 0; max-width: 60ch; }

/* ---------- 6. Prose ----------
   Content inside these containers is unclassed h2/p/ul/li/strong/code/figure. */
.content-page,
.blog-article-content,
.faq-answer {
  color: var(--ink-2);
}

.content-page h2, .blog-article-content h2 {
  font-size: var(--t-2xl);
  margin-top: var(--s8);
  margin-bottom: var(--s4);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--rule);
}
.content-page h3, .blog-article-content h3 {
  font-size: var(--t-xl);
  margin-top: var(--s6);
  margin-bottom: var(--s3);
}
.content-page h4, .blog-article-content h4 {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: var(--s5);
  margin-bottom: var(--s3);
}

.content-page p, .blog-article-content p {
  font-size: var(--t-base);
  line-height: 1.72;
  margin-bottom: var(--s4);
}

.content-page ul, .blog-article-content ul,
.content-page ol, .blog-article-content ol {
  margin: 0 0 var(--s5);
  padding-left: var(--s5);
}
.content-page li, .blog-article-content li { margin-bottom: var(--s2); line-height: 1.7; }

.content-page strong, .blog-article-content strong { color: var(--ink); font-weight: 600; }

/* Links inside prose.
   `.blog-article-content a` (0,1,1) outranks `.btn` (0,1,0), so without the
   :not() guard every CTA button sitting inside an article body inherited
   vermilion-on-ink at 3.2:1 with a stray underline. */
.blog-article-content a:not(.btn):not(.btn-text):not(.btn-share):not(.tag),
.content-page a:not(.btn):not(.btn-text):not(.btn-share):not(.tag) {
  color: var(--signal);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.blog-article-content a:not(.btn):not(.btn-text):not(.btn-share):not(.tag):hover,
.content-page a:not(.btn):not(.btn-text):not(.btn-share):not(.tag):hover {
  color: var(--signal-ink);
}

/* Prose must never underline or recolour a button, whatever its nesting. */
.blog-article-content a.btn,
.blog-article-content a.btn-text,
.content-page a.btn,
.content-page a.btn-text { text-decoration: none; }

.blog-article-content code {
  font-family: var(--font-mono);
  font-size: .9em;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  padding: .15em .4em;
}
.blog-article-content pre {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  background: var(--paper-2);
  border: 1px solid var(--rule-2);
  border-left: 2px solid var(--signal);
  padding: var(--s5);
  overflow-x: auto;
  line-height: 1.7;
}
.blog-article-content figure { margin: var(--s6) 0; }
.blog-article-content img { width: 100%; border: 1px solid var(--rule-2); }
.blog-article-content figcaption {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--ink-3);
  margin-top: var(--s3);
}

.blog-article-content details,
.blog-toc-panel {
  border: 1px solid var(--rule-2);
  background: var(--paper-4);
  padding: var(--s4) var(--s5);
  margin-block: var(--s5);
}
.blog-article-content summary {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  cursor: pointer;
  color: var(--ink);
}
.blog-article-content details[open] summary { margin-bottom: var(--s4); border-bottom: 1px solid var(--rule); padding-bottom: var(--s3); }

.blog-toc-panel nav { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s4); }
.blog-toc-panel a, .toc-link-sub {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  text-decoration: none;
  color: var(--ink-2);
}
.blog-toc-panel a:hover { color: var(--signal); }
.toc-link-sub { padding-left: var(--s4); color: var(--ink-3); font-size: var(--t-xs); }

.content-lead {
  font-size: var(--t-xl);
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: var(--s6);
}
.content-date, .blog-article-meta, .blog-card-meta {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.content-date { border-top: 1px solid var(--rule); padding-top: var(--s5); margin-top: var(--s8); }
.content-cta { margin-top: var(--s7); padding-top: var(--s6); border-top: 1px solid var(--rule); }

/* ---------- 7. Blog index + post ---------- */
.blog-header {
  padding-block: var(--s9);
  border-bottom: 1px solid var(--rule-2);
  background: var(--paper-2);
}
.blog-header h1 { font-size: var(--t-4xl); margin-bottom: var(--s3); }
.blog-header p { color: var(--ink-2); font-size: var(--t-lg); max-width: 56ch; margin: 0; }

/* Category grid of blog cards */
.category-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--rule);
}
@media (min-width: 700px)  { .category-grid { grid-template-columns: repeat(2, 1fr); column-gap: var(--s7); } }
@media (min-width: 1000px) { .category-grid { grid-template-columns: repeat(3, 1fr); column-gap: var(--s7); } }

.blog-card {
  display: block;
  text-decoration: none;
  padding-block: var(--s6);
  border-bottom: 1px solid var(--rule);
  transition: padding-left var(--dur) var(--ease), background var(--dur) var(--ease);
  position: relative;
}
.blog-card:hover { padding-left: var(--s4); background: var(--paper-4); }
.blog-card::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);
}
.blog-card:hover::before { transform: scaleY(1); }

.blog-card-category {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: var(--s3);
}
.blog-card h3 {
  font-size: var(--t-lg);
  line-height: 1.2;
  margin-bottom: var(--s3);
  color: var(--ink);
}
.blog-card p { font-size: var(--t-sm); color: var(--ink-3); line-height: 1.6; margin-bottom: var(--s3); }
.blog-card-meta { display: flex; gap: var(--s4); }

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

.blog-article-header { padding-bottom: var(--s6); margin-bottom: var(--s6); border-bottom: 1px solid var(--rule-2); }
.blog-article-header h1 { font-size: var(--t-3xl); margin-bottom: var(--s4); }
.blog-article-meta { display: flex; gap: var(--s5); }

.lead { font-size: var(--t-xl); line-height: 1.5; color: var(--ink-2); margin-bottom: var(--s6); }

/* Inline CTA inside an article */
.blog-cta-box {
  border: 1px solid var(--ink);
  background: var(--paper-4);
  box-shadow: var(--lift);
  padding: var(--s7);
  margin-block: var(--s7);
}
.blog-cta-box h3 { font-size: var(--t-xl); margin-bottom: var(--s3); }
.blog-cta-box p { color: var(--ink-2); margin-bottom: var(--s5); }

.tip-box {
  border: 1px solid var(--rule-2);
  border-left: 3px solid var(--signal);
  background: var(--paper-2);
  padding: var(--s5);
  margin-block: var(--s6);
}
.tip-box p { margin: 0; font-size: var(--t-sm); }

/* FAQ inside articles: two different wrapper names, same contract */
.faq-section, .blog-faq { margin-block: var(--s7); }
.faq-section h2, .blog-faq h2 { font-size: var(--t-2xl); margin-bottom: var(--s4); }

.faq-item {
  border-top: 1px solid var(--rule);
  padding-block: var(--s5);
}
.faq-item:last-child { border-bottom: 1px solid var(--rule); }
.faq-question,
.faq-item h3 {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: -.014em;
  margin: 0 0 var(--s3);
  color: var(--ink);
}
.faq-answer, .faq-item p { color: var(--ink-2); font-size: var(--t-sm); line-height: 1.65; margin: 0; }
.faq-contact { margin-top: var(--s7); padding-top: var(--s6); border-top: 1px solid var(--rule); }

/* Read-more block at the foot of a post */
.blog-related { margin-top: var(--s9); padding-top: var(--s7); border-top: 1px solid var(--rule-2); }
.blog-related h2 { font-size: var(--t-2xl); margin-bottom: var(--s5); }

/* Outlier variant: .related-posts / .related-grid / .related-card */
.related-posts { margin-top: var(--s9); padding-top: var(--s7); border-top: 1px solid var(--rule-2); }
.related-grid { display: grid; grid-template-columns: 1fr; gap: var(--s4); margin-top: var(--s5); }
@media (min-width: 780px) { .related-grid { grid-template-columns: repeat(3, 1fr); } }
.related-card {
  border: 1px solid var(--rule-2);
  padding: var(--s5);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.related-card:hover { border-color: var(--ink); transform: translateY(-2px); }
.related-card h3 { font-size: var(--t-base); margin: 0; color: var(--ink); }

/* Share block */
.share-box { margin-block: var(--s6); }
.share-buttons { display: flex; gap: var(--s3); }
.btn-share {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-2);
  border: 1px solid var(--rule-2);
  padding: var(--s3) var(--s4);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn-share:hover { color: var(--signal); border-color: var(--signal); }
.post-footer { margin-top: var(--s7); padding-top: var(--s6); border-top: 1px solid var(--rule); }

/* ---------- 8. Category landing ---------- */
.category-hero {
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule-2);
  padding-block: var(--s8);
}
@media (min-width: 760px) { .category-hero { padding-block: var(--s9); } }

.category-hero-content { max-width: 760px; }
.category-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--signal);
  border: 1px solid var(--signal);
  padding: var(--s2) var(--s3);
  margin-bottom: var(--s5);
}
.category-hero h1 { font-size: clamp(2rem, 4.4vw, 3.25rem); margin-bottom: var(--s4); }
.category-description { font-size: var(--t-lg); color: var(--ink-2); line-height: 1.6; max-width: 58ch; }

.category-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s7);
  margin-block: var(--s6);
  padding-block: var(--s5);
  border-block: 1px solid var(--rule);
}
.stat { display: flex; flex-direction: column; gap: var(--s1); }
.stat-number {
  font-family: var(--font-mono);
  font-size: var(--t-2xl);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--ink);
}
.stat-label {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
/* ecommerce-amazon variant uses <strong> instead of .stat-number */
.category-stat strong { font-family: var(--font-mono); font-size: var(--t-lg); font-weight: 600; }

.category-cta { display: flex; gap: var(--s4); flex-wrap: wrap; }

/* Feature grid */
.features-grid { display: grid; grid-template-columns: 1fr; gap: var(--s5); }
@media (min-width: 700px)  { .features-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s7); } }
@media (min-width: 1000px) { .features-grid { grid-template-columns: repeat(3, 1fr); } }

/* Feature grid.
   The markup holds an emoji inside .feature-icon. Emoji read as filler, so we
   suppress the glyph and render a mono ordinal instead — same language as the
   dark band's "01 / 08" cells. One rule fixes all 9 category pages. */
.features-grid { counter-reset: feat; }
.feature-card { padding-top: var(--s4); border-top: 2px solid var(--ink); counter-increment: feat; }

.feature-icon {
  font-size: 0;              /* suppress the emoji glyph */
  line-height: 1;
  color: var(--signal);
  margin-bottom: var(--s4);
}
.feature-icon::before {
  counter-increment: feat;
  content: counter(feat, decimal-leading-zero);
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--signal);
}
.feature-card h3 { font-size: var(--t-lg); margin-bottom: var(--s2); }
.feature-card p { font-size: var(--t-sm); color: var(--ink-3); line-height: 1.6; margin: 0; }

/* Prompt preview grid on the landing page */
.prompt-preview-grid { display: grid; grid-template-columns: 1fr; gap: var(--s4); }
@media (min-width: 900px) { .prompt-preview-grid { grid-template-columns: repeat(3, 1fr); } }

.prompt-preview-grid .prompt-card { display: flex; flex-direction: column; height: 100%; }
.prompt-preview-grid .prompt-card p { flex: 1; }
.prompt-header {
  display: flex;
  justify-content: space-between;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-bottom: var(--s3);
}
.prompt-category-tag, .prompt-free-tag, .prompt-locked-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);
}
.prompt-free-tag { color: var(--success); border-color: currentColor; }
.prompt-locked-tag { color: var(--signal); border-color: currentColor; }

/* Use cases */
.use-cases-grid { display: grid; grid-template-columns: 1fr; gap: var(--s5); }
@media (min-width: 700px)  { .use-cases-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s7); } }
@media (min-width: 1000px) { .use-cases-grid { grid-template-columns: repeat(4, 1fr); } }
.use-case { padding-top: var(--s4); border-top: 1px solid var(--rule-2); }
.use-case h3 { font-size: var(--t-base); margin-bottom: var(--s2); }
.use-case p { font-size: var(--t-sm); color: var(--ink-3); line-height: 1.6; margin: 0; }

/* Pricing CTA on a dark band */
.pricing-cta { max-width: 620px; margin-inline: auto; text-align: center; }
.pricing-cta h2 { font-size: var(--t-2xl); }
.price-display { margin-block: var(--s6); }
.price {
  font-family: var(--font-mono);
  font-size: clamp(3rem, 8vw, 4.5rem);
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--paper-4);
  display: block;
}
.price-note {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-top: var(--s3);
  display: block;
}
.guarantee {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .1em;
  color: var(--ink-4);
  margin-top: var(--s5);
}

/* ecommerce-amazon variant: a bordered buy box rather than a dark band */
.price-box {
  border: 1px solid var(--ink);
  background: var(--paper-4);
  box-shadow: var(--lift);
  padding: var(--s6);
}
.price-box .price { color: var(--ink); font-size: 2.75rem; }
.price-box .price-note { color: var(--ink-3); }
.price-features { list-style: none; margin: var(--s5) 0; padding: 0; }
.price-features li {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .05em;
  color: var(--ink-2);
  padding-bottom: var(--s3);
  margin-bottom: var(--s3);
  border-bottom: 1px solid var(--rule);
}
.price-features li::before { content: "✓ "; color: var(--signal); }

.two-col { display: grid; grid-template-columns: 1fr; gap: var(--s7); }
@media (min-width: 900px) { .two-col { grid-template-columns: 7fr 5fr; gap: var(--s9); align-items: start; } }

/* ---------- 9. Category preview ---------- */
.preview-header { max-width: 700px; margin-bottom: var(--s7); padding-bottom: var(--s6); border-bottom: 1px solid var(--rule-2); }
.preview-header h1 { font-size: var(--t-3xl); margin-bottom: var(--s3); }
.preview-header p { color: var(--ink-2); font-size: var(--t-lg); margin: 0; }

.back-link {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-3);
  margin-bottom: var(--s5);
  border-bottom: 1px solid var(--rule-2);
}
.back-link:hover { color: var(--signal); border-color: var(--signal); }

.prompts-list { max-width: 900px; }

.prompt-full-card {
  border: 1px solid var(--rule-2);
  background: var(--paper-4);
  padding: var(--s6);
  margin-bottom: var(--s4);
  transition: border-color var(--dur) var(--ease);
}
.prompt-full-card:hover { border-color: var(--ink); }

.prompt-full-header {
  display: flex;
  gap: var(--s4);
  align-items: center;
  margin-bottom: var(--s4);
}
.prompt-number {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .12em;
  color: var(--signal-ink);
}
.prompt-full-card h2 { font-size: var(--t-xl); margin: 0; }
.prompt-content { margin-bottom: var(--s5); }
.prompt-content pre,
.prompt-content .prompt-text pre {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  line-height: 1.72;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--paper);
  border-left: 2px solid var(--rule-2);
  padding: var(--s4);
  margin: 0;
  color: var(--ink-2);
}
.copy-btn { box-shadow: none; }

.preview-cta {
  border: 1px solid var(--ink);
  background: var(--paper-4);
  box-shadow: var(--lift);
  padding: var(--s8);
  text-align: center;
  max-width: 620px;
  margin: var(--s9) auto 0;
}
.preview-cta h2 { font-size: var(--t-2xl); margin-bottom: var(--s3); }
.preview-cta p { color: var(--ink-2); max-width: 44ch; margin-inline: auto; margin-bottom: var(--s6); }

/* real-estate/preview.html variant reuses the blog-post card shape.
   .prompt-content on those pages wraps a bare .prompt-text. */
.prompt-content > .prompt-text { white-space: pre-wrap; }

/* ---------- 10. Category content (gated library) ---------- */
.prompt-count {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--s5);
}

/* .filter-bar is empty in HTML and filled by js/content.js */
.filter-bar { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s5); }
.filter-btn {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  background: transparent;
  color: var(--ink-2);
  border: 1px solid var(--rule-2);
  padding: var(--s2) var(--s3);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.filter-btn:hover { border-color: var(--ink); color: var(--ink); }
.filter-btn.active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper-4);
}

/* ---------- 11. Core pages ---------- */
/* FAQ list page */
.faq-item { scroll-margin-top: 90px; }

/* Access page */
.access-box {
  border: 1px solid var(--ink);
  background: var(--paper-4);
  box-shadow: var(--lift);
  padding: var(--s7);
  max-width: 560px;
  margin: var(--s10) auto;
}
@media (max-width: 560px) { .access-box { margin-block: var(--s7); padding: var(--s5); } }
.access-box h1 { font-size: var(--t-2xl); }

.form-group { margin-bottom: var(--s5); }
.form-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);
}
.form-input {
  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;
}
.form-input:focus { outline: none; border-color: var(--signal); box-shadow: 3px 3px 0 var(--signal-wash); }

/* Custom dropdown built by js/license.js */
.select { position: relative; }
.select-trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s3);
  font-family: var(--font-body);
  font-size: var(--t-base);
  text-align: left;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--rule-2);
  background: var(--paper-4);
  color: var(--ink);
  cursor: pointer;
  border-radius: 0;
}
.select-trigger:hover { border-color: var(--ink); }
.select-value { color: var(--ink-2); }
.chevron { color: var(--ink-3); flex-shrink: 0; }
/* js/license.js toggles the [hidden] attribute, not an .open class.
   Do not add display:block on [hidden] — that overrides the attribute and
   the dropdown would be permanently open. */
.select-dropdown {
  position: absolute;
  z-index: 60;
  top: calc(100% + 4px);
  left: 0; right: 0;
  max-height: 300px;
  overflow-y: auto;
  background: var(--paper-4);
  border: 1px solid var(--ink);
  box-shadow: var(--lift-sm);
  padding: var(--s1);
}
.select-dropdown[hidden] { display: none; }
.select-option {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--t-base);
  padding: var(--s3) var(--s4);
  background: none;
  border: 0;
  color: var(--ink-2);
  cursor: pointer;
  border-radius: 0;
}
.select-option:hover { background: var(--paper-2); color: var(--ink); }
.select-option.selected { background: var(--ink); color: var(--paper-4); }

/* Success page */
.success-icon {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--success);
  color: var(--success);
  margin: 0 auto var(--s5);
  font-size: 1.5rem;
}

/* ---------- 12. Alerts & JS-injected classes ---------- */
.alert {
  border: 1px solid var(--rule-2);
  border-left: 3px solid var(--ink-4);
  background: var(--paper-2);
  padding: var(--s4) var(--s5);
  margin-bottom: var(--s5);
  font-size: var(--t-sm);
  line-height: 1.6;
}
.alert-info { border-left-color: var(--signal); }
.alert-success { border-left-color: var(--success); }
.alert-error { border-left-color: var(--error); color: var(--error); }
.alert strong { color: inherit; }
.alert ol, .alert ul { margin: var(--s3) 0 0; padding-left: var(--s5); }