/*
Theme Name: AHD Theme
Template: generatepress
Version: 2.1.0
Description: Assignment Help Desk child theme — Lovable design system
*/

/* ─────────────────────────────────────────────
   DESIGN TOKENS
   Light + dark via prefers-color-scheme.
   All colors in oklch (Chrome 111+, FF 113+, Safari 15.4+).
   ───────────────────────────────────────────── */

:root {
  /* Geometry */
  --radius:     0.5rem;
  --radius-sm:  calc(var(--radius) - 4px);
  --radius-md:  calc(var(--radius) - 2px);
  --radius-lg:  var(--radius);
  --radius-xl:  calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);
  --radius-3xl: calc(var(--radius) + 12px);
  --radius-4xl: calc(var(--radius) + 16px);

  /* Fonts */
  --font-body:    "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-heading: "Sora",    system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Colors — light mode (oklch) */
  --background:           oklch(0.995 0.002 250);
  --foreground:           oklch(0.200 0.025 265);
  --card:                 oklch(1     0     0);
  --card-foreground:      oklch(0.129 0.042 264.695);
  --primary:              oklch(0.56  0.22  259);
  --primary-foreground:   oklch(0.99  0.004 250);
  --secondary:            oklch(0.955 0.018 259);
  --secondary-foreground: oklch(0.36  0.12  259);
  --muted:                oklch(0.965 0.008 255);
  --muted-foreground:     oklch(0.49  0.028 259);
  --border:               oklch(0.91  0.014 255);
  --input:                oklch(0.91  0.014 255);
  --ring:                 oklch(0.56  0.22  259);
  --feature-soft:         oklch(0.975 0.009 257);
  --success:              oklch(0.51  0.13  155);
  --destructive:          oklch(0.577 0.245 27.325);
  --integrity:            oklch(0.19  0.032 264);
  --integrity-accent:     oklch(0.76  0.15  157);

  /* Tool semantic pairs */
  --tool-blue:      oklch(0.93 0.045 258);  --tool-blue-fg:   oklch(0.48 0.20 259);
  --tool-violet:    oklch(0.93 0.055 299);  --tool-violet-fg: oklch(0.50 0.19 298);
  --tool-green:     oklch(0.93 0.055 157);  --tool-green-fg:  oklch(0.45 0.13 155);
  --tool-orange:    oklch(0.94 0.055  72);  --tool-orange-fg: oklch(0.55 0.15  58);
  --tool-coral:     oklch(0.94 0.050  26);  --tool-coral-fg:  oklch(0.55 0.17  24);
  --tool-cyan:      oklch(0.94 0.045 205);  --tool-cyan-fg:   oklch(0.45 0.12 210);

  /* Legacy ahd-* aliases (backward compat with older patterns) */
  --ahd-bg:           var(--background);
  --ahd-surface:      var(--feature-soft);
  --ahd-border:       var(--border);
  --ahd-text:         var(--foreground);
  --ahd-muted:        var(--muted-foreground);
  --ahd-accent:       var(--primary);
  --ahd-accent-hover: oklch(0.48 0.22 259);
  --ahd-accent-soft:  var(--secondary);
  --ahd-success:      var(--success);
  --ahd-warning:      oklch(0.65 0.18 72);
  --ahd-radius-card:  var(--radius-2xl);
  --ahd-radius-btn:   var(--radius-lg);
  --ahd-radius-chip:  999px;
  --ahd-shadow:
    0 1px 2px  color-mix(in oklab, var(--foreground)  4%, transparent),
    0 8px 24px color-mix(in oklab, var(--foreground)  6%, transparent);
  --ahd-container:          1200px;
  --ahd-section-pad:        96px;
  --ahd-section-pad-mobile: 56px;
  --ahd-gutter:             24px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background:           oklch(0.129 0.042 264.695);
    --foreground:           oklch(0.984 0.003 247.858);
    --card:                 oklch(0.208 0.042 265.755);
    --card-foreground:      oklch(0.984 0.003 247.858);
    --primary:              oklch(0.929 0.013 255.508);
    --primary-foreground:   oklch(0.208 0.042 265.755);
    --secondary:            oklch(0.279 0.041 260.031);
    --secondary-foreground: oklch(0.984 0.003 247.858);
    --muted:                oklch(0.279 0.041 260.031);
    --muted-foreground:     oklch(0.704 0.04  256.788);
    --border:               oklch(1     0     0 / 10%);
    --input:                oklch(1     0     0 / 15%);
    --feature-soft:         oklch(0.18  0.04  265);
    --integrity:            oklch(0.10  0.03  264);
    --integrity-accent:     oklch(0.65  0.15  157);
    --tool-blue:     oklch(0.28 0.06 259);  --tool-blue-fg:   oklch(0.75 0.12 258);
    --tool-violet:   oklch(0.28 0.07 299);  --tool-violet-fg: oklch(0.75 0.10 298);
    --tool-green:    oklch(0.28 0.07 157);  --tool-green-fg:  oklch(0.72 0.10 155);
    --tool-orange:   oklch(0.28 0.06  72);  --tool-orange-fg: oklch(0.75 0.10  58);
    --tool-coral:    oklch(0.28 0.06  26);  --tool-coral-fg:  oklch(0.75 0.10  24);
    --tool-cyan:     oklch(0.28 0.055 205); --tool-cyan-fg:   oklch(0.72 0.09 210);
    --ahd-accent-hover: oklch(0.98 0.01 255);
    --ahd-shadow:
      0 1px 2px  color-mix(in oklab, black 30%, transparent),
      0 8px 24px color-mix(in oklab, black 40%, transparent);
  }
}

/* ─────────────────────────────────────────────
   BASE
   ───────────────────────────────────────────── */

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

body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--foreground);
  background: var(--background);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: 0;
}

html { scroll-behavior: smooth; }
button, a, summary { outline-offset: 3px; }
::selection { background: color-mix(in oklab, var(--primary) 20%, transparent); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration:  0.01ms !important;
  }
}

/* ─────────────────────────────────────────────
   TYPOGRAPHY
   ───────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--foreground);
  margin: 0;
}

.ahd-display {
  font-family: var(--font-heading);
  font-size: clamp(2.25rem, 5vw, 4.25rem);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.02em;
}
h2, .ahd-h2 { font-size: clamp(1.75rem, 4vw, 2.5rem);  line-height: 1.15; }
h3, .ahd-h3 { font-size: clamp(1.05rem, 2vw, 1.2rem);  line-height: 1.35; font-weight: 700; }
.ahd-body   { font-size: 17px; line-height: 1.65; }
.ahd-small  { font-size: 14px; line-height: 1.57; }

/* Section-level type */
.section-kicker {
  display: block;
  font-size: 0.72rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
}
.section-title {
  margin-top: 0.75rem;
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.02em;
  max-width: 48rem;
}
.section-copy {
  margin-top: 1rem;
  max-width: 40rem;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--muted-foreground);
}

/* Compat */
.ahd-muted { color: var(--muted-foreground); }
.ahd-eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 12px;
}

/* ─────────────────────────────────────────────
   LAYOUT
   ───────────────────────────────────────────── */

.ahd-container {
  max-width: var(--ahd-container);
  margin: 0 auto;
  padding: 0 var(--ahd-gutter);
}
.ahd-section { padding: var(--ahd-section-pad) 0; }
@media (max-width: 768px) {
  .ahd-section { padding: var(--ahd-section-pad-mobile) 0; }
}
.ahd-bg-surface { background: var(--feature-soft); }
.ahd-bg-card    { background: var(--card); }

.ahd-grid   { display: grid; gap: var(--ahd-gutter); }
.ahd-grid-2 { grid-template-columns: repeat(2, 1fr); }
.ahd-grid-3 { grid-template-columns: repeat(3, 1fr); }
.ahd-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) {
  .ahd-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .ahd-grid-2, .ahd-grid-3, .ahd-grid-4 { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────
   GRADIENT WASHES
   ───────────────────────────────────────────── */

.hero-wash {
  background:
    radial-gradient(ellipse 70% 45% at 50% 2%, color-mix(in oklab, var(--primary) 10%, transparent), transparent 70%),
    linear-gradient(to bottom, var(--background), var(--feature-soft));
}
.cta-wash {
  background: linear-gradient(145deg, var(--feature-soft),
    color-mix(in oklab, var(--tool-violet) 60%, var(--background)));
}
.integrity-band {
  background: linear-gradient(115deg, var(--integrity),
    color-mix(in oklab, var(--integrity) 85%, var(--primary)));
}

/* ─────────────────────────────────────────────
   BRAND MARK
   ───────────────────────────────────────────── */

.brand-mark {
  display: inline-flex;
  width: 2.25rem;
  height: 2.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.55rem;
  background: var(--primary);
  color: var(--primary-foreground);
  flex-shrink: 0;
  box-shadow: 0 8px 20px color-mix(in oklab, var(--primary) 22%, transparent);
}
.brand-mark-sm { width: 1.75rem; height: 1.75rem; border-radius: 0.45rem; }

/* ─────────────────────────────────────────────
   BUTTONS
   ───────────────────────────────────────────── */

.ahd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 22px;
  border-radius: var(--radius-2xl);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.18s ease;
  border: none;
  white-space: nowrap;
}
.ahd-btn-primary {
  background: var(--primary);
  color: var(--primary-foreground);
  box-shadow: 0 4px 14px color-mix(in oklab, var(--primary) 30%, transparent);
}
.ahd-btn-primary:hover {
  background: var(--ahd-accent-hover);
  color: var(--primary-foreground);
  transform: translateY(-1px);
}
.ahd-btn-secondary {
  background: var(--card);
  color: var(--foreground);
  border: 1px solid var(--border);
}
.ahd-btn-secondary:hover { border-color: var(--primary); color: var(--primary); }
.ahd-btn-ghost {
  background: transparent;
  color: var(--muted-foreground);
  border: none;
}
.ahd-btn-ghost:hover { color: var(--foreground); }
.ahd-btn-sm { height: 38px; padding: 0 16px; font-size: 14px; }
.ahd-btn-lg { height: 56px; padding: 0 28px; font-size: 16px; }

/* ─────────────────────────────────────────────
   CARDS
   ───────────────────────────────────────────── */

.ahd-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  padding: 28px;
  box-shadow: 0 10px 35px color-mix(in oklab, var(--foreground) 4%, transparent);
}

/* Tool showcase card */
.tool-card-preview { min-height: 100px; }

.tool-card {
  min-height: 18rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  background: var(--card);
  padding: 1.5rem;
  box-shadow: 0 10px 35px color-mix(in oklab, var(--foreground) 4%, transparent);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.tool-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in oklab, var(--primary) 25%, var(--border));
  box-shadow: 0 18px 45px color-mix(in oklab, var(--foreground) 8%, transparent);
}

/* Testimonial story card */
.story-card {
  min-height: 18rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  background: var(--card);
  padding: 1.5rem;
  box-shadow: 0 10px 35px color-mix(in oklab, var(--foreground) 4%, transparent);
}

/* ─────────────────────────────────────────────
   CHIPS
   ───────────────────────────────────────────── */

.ahd-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: var(--secondary);
  color: var(--secondary-foreground);
  white-space: nowrap;
}
.ahd-chip-primary { background: var(--primary); color: var(--primary-foreground); }

/* ─────────────────────────────────────────────
   APP PREVIEW WINDOW (hero)
   ───────────────────────────────────────────── */

.workspace-window {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--background);
  text-align: left;
  box-shadow:
    0 35px 90px color-mix(in oklab, var(--foreground) 12%, transparent),
    0  4px 16px color-mix(in oklab, var(--primary)     8%, transparent);
}

/* ─────────────────────────────────────────────
   WORKFLOW ACCORDION
   ───────────────────────────────────────────── */

.workflow-step { border-bottom: 1px solid var(--border); }
.workflow-step[open] {
  border-color: color-mix(in oklab, var(--primary) 30%, var(--border));
}
.workflow-step summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 0;
  font-weight: 700;
  font-size: 15px;
  color: var(--foreground);
}
.workflow-step summary::-webkit-details-marker { display: none; }
.workflow-chevron {
  transition: transform 220ms ease;
  flex-shrink: 0;
  color: var(--muted-foreground);
}
.workflow-step[open] .workflow-chevron { transform: rotate(180deg); }
.workflow-body {
  padding: 0 0 1.25rem 3.5rem;
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted-foreground);
}

/* ─────────────────────────────────────────────
   AI COMPOSER (hero)
   ───────────────────────────────────────────── */

.ai-composer {
  border-radius: var(--radius-3xl);
  border: 1px solid color-mix(in oklab, var(--primary) 15%, var(--border));
  background: var(--card);
  box-shadow:
    0 22px 60px color-mix(in oklab, var(--foreground) 10%, transparent),
    inset 0 1px 0 var(--background);
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.ai-composer:focus-within {
  border-color: color-mix(in oklab, var(--primary) 50%, var(--border));
  box-shadow:
    0 25px 70px color-mix(in oklab, var(--primary) 14%, transparent),
    0 0 0 3px color-mix(in oklab, var(--primary) 10%, transparent);
}
.ai-composer textarea {
  width: 100%;
  min-height: 96px;
  padding: 20px 20px 8px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--foreground);
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  display: block;
}
.ai-composer textarea::placeholder { color: var(--muted-foreground); opacity: 0.8; }
.ai-composer-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  gap: 8px;
}
.composer-tools { display: flex; align-items: center; gap: 6px; }
.composer-attach-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted-foreground);
  font-family: var(--font-body);
  transition: background 0.15s;
  position: relative;
}
.composer-attach-btn:hover { background: var(--secondary); color: var(--foreground); }
.composer-submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  background: var(--primary);
  color: var(--primary-foreground);
  border: none;
  border-radius: 10px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
  flex-shrink: 0;
}
.composer-submit-btn:hover { opacity: 0.9; }
.composer-message {
  margin-top: 10px;
  min-height: 24px;
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
  padding: 0 4px;
}
.composer-message.error   { color: var(--destructive); }
.composer-message.success { color: var(--success); display:flex;align-items:center;justify-content:center;gap:6px; }
.composer-message.info    { color: var(--muted-foreground); }
.composer-message a       { color: var(--primary); text-decoration: underline; }

/* Attach tooltip */
.attach-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.5;
  white-space: nowrap;
  box-shadow: 0 8px 24px color-mix(in oklab, var(--foreground) 10%, transparent);
  z-index: 10;
  text-align: center;
}
.attach-tooltip a { color: var(--primary); }
.attach-tooltip.visible { display: block; }

/* ─────────────────────────────────────────────
   TABBED SHOWCASE
   ───────────────────────────────────────────── */

.ahd-showcase-tab {
  text-align: left;
  padding: 14px 18px;
  border-radius: var(--radius-2xl);
  border: none;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  color: var(--muted-foreground);
  background: transparent;
  width: 100%;
}
.ahd-showcase-tab.active { background: var(--primary); color: var(--primary-foreground); }
.ahd-showcase-tab:hover:not(.active) { background: var(--secondary); color: var(--foreground); }
.ahd-showcase-panel { display: none; }
.ahd-showcase-panel.active { display: block; }

/* ─────────────────────────────────────────────
   MARQUEE
   ───────────────────────────────────────────── */

@keyframes ahd-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.ahd-marquee-track {
  display: flex;
  width: max-content;
  animation: ahd-marquee 30s linear infinite;
}
.ahd-marquee-track:hover { animation-play-state: paused; }

/* ─────────────────────────────────────────────
   IMAGE HELPER
   ───────────────────────────────────────────── */

.ahd-img-rounded { border-radius: var(--radius-2xl); overflow: hidden; }
.ahd-img-rounded img, .ahd-img-rounded div { width: 100%; display: block; }

/* Links default */
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--ahd-accent-hover); }

/* ─────────────────────────────────────────────
   TOOL PAGES
   ───────────────────────────────────────────── */

.tp-hero { padding: 64px 20px 0; }
.tp-breadcrumb { font-size: 13px; color: var(--muted-foreground); margin-bottom: 24px; }
.tp-breadcrumb a { color: var(--muted-foreground); text-decoration: none; transition: color .15s; }
.tp-breadcrumb a:hover { color: var(--foreground); }

.tp-body { max-width: 880px; margin: 0 auto; }
.tp-body h1 {
  font-family: var(--font-heading); font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800; letter-spacing: -0.03em; color: var(--foreground);
  margin: 0 0 16px; line-height: 1.15;
}
.tp-body .tp-intro {
  font-size: 17px; color: var(--muted-foreground); line-height: 1.7;
  max-width: 680px; margin: 0 0 40px;
}
.tp-body h2 {
  font-family: var(--font-heading); font-size: clamp(1.35rem, 3vw, 1.75rem);
  font-weight: 800; color: var(--foreground); margin: 48px 0 16px;
  letter-spacing: -0.02em;
}
.tp-body h3 {
  font-family: var(--font-heading); font-size: 18px; font-weight: 700;
  color: var(--foreground); margin: 32px 0 12px;
}
.tp-body p {
  font-size: 16px; color: var(--muted-foreground); line-height: 1.75; margin: 0 0 16px;
}
.tp-body ul, .tp-body ol {
  font-size: 16px; color: var(--muted-foreground); line-height: 1.75;
  margin: 0 0 16px; padding-left: 24px;
}
.tp-body li { margin-bottom: 8px; }
.tp-body strong { color: var(--foreground); font-weight: 600; }

/* Tool embed wrapper */
.tp-tool-wrap {
  margin: 0 0 56px; border: 1px solid var(--border);
  border-radius: 16px; overflow: hidden; padding: 24px;
  background: var(--card);
}

/* FAQ */
.tp-faq { background: var(--feature-soft); }
.tp-faq details { border-bottom: 1px solid var(--border); }
.tp-faq summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 0; font-size: 16px; font-weight: 600;
  color: var(--foreground); cursor: pointer; list-style: none;
}
.tp-faq summary::-webkit-details-marker { display: none; }
.tp-faq details[open] summary svg { transform: rotate(180deg); }
.tp-faq summary svg { transition: transform .2s; flex-shrink: 0; margin-left: 12px; }
.tp-faq .faq-a {
  padding: 0 0 20px; font-size: 15px;
  color: var(--muted-foreground); line-height: 1.7;
}

/* Related tools grid */
.tp-related { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 768px) { .tp-related { grid-template-columns: repeat(2, 1fr); } }
.tp-related a {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 20px; text-decoration: none;
  transition: border-color .15s, box-shadow .15s; display: block;
}
.tp-related a:hover { border-color: var(--primary); box-shadow: 0 4px 12px rgba(0,0,0,.06); }
.tp-related h3 {
  font-family: var(--font-heading); font-size: 15px; font-weight: 700;
  color: var(--foreground); margin: 0 0 6px;
}
.tp-related p { font-size: 13px; color: var(--muted-foreground); margin: 0; line-height: 1.5; }

/* Subject pills */
.tp-subjects { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tp-subjects a {
  display: inline-block; font-size: 13px; font-weight: 600;
  color: var(--muted-foreground); background: var(--secondary);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 14px; text-decoration: none; transition: color .15s, border-color .15s;
}
.tp-subjects a:hover { color: var(--foreground); border-color: var(--foreground); }

/* Tools index grid */
.tp-index-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 768px) { .tp-index-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .tp-index-grid { grid-template-columns: 1fr; } }
.tp-index-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; padding: 24px; text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s; display: block;
}
.tp-index-card:hover {
  border-color: var(--primary); box-shadow: 0 6px 20px rgba(0,0,0,.07);
  transform: translateY(-2px);
}
.tp-index-card h3 {
  font-family: var(--font-heading); font-size: 16px; font-weight: 700;
  color: var(--foreground); margin: 0 0 6px;
}
.tp-index-card p { font-size: 14px; color: var(--muted-foreground); margin: 0; line-height: 1.55; }
.tp-index-card .tp-soon {
  display: inline-block; font-size: 11px; font-weight: 700;
  color: var(--muted-foreground); background: var(--secondary);
  border-radius: 6px; padding: 3px 8px; margin-top: 10px;
  letter-spacing: .04em;
}