@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300..800;1,300..800&display=swap');

/* Task Tamer Liquid Gold Design System
 *
 * Tokens mirror the Flutter app's Luxury theme (lib/theme/app_themes.dart) so
 * the site and the product read as one surface. Changing a value here without
 * changing it there will reintroduce the drift this replaced.
 *
 *   Light  bg #F8FAFC  surface #FFFFFF  gold #AD8A43  text #0F172A
 *   Dark   bg #0B0C10  surface #151720  gold #C6A667  text #F1F5F9
 *
 * Gold is an accent, never body text: #AD8A43 on white is ~3.4:1, which clears
 * WCAG AA for large text and UI borders but not for paragraphs.
 */
:root {
  --font-family: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --bg-primary: #f8fafc;
  --bg-card: #ffffff;
  --bg-elevated: #f1f5f9;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --gold-accent: #ad8a43;
  --gold-light: #c6a667;
  --gold-soft: rgba(173, 138, 67, 0.10);
  --gold-glow: rgba(173, 138, 67, 0.28);
  --gold-glow-strong: rgba(173, 138, 67, 0.40);
  --gold-gradient: linear-gradient(135deg, #c6a667 0%, #ad8a43 100%);
  /* Dark ink on gold, not white: white on #AD8A43 is only ~3.4:1 and fails AA
   * for button text, while #0F172A on the same gold clears it at ~5.4:1. */
  --on-gold: #0f172a;
  --card-border: rgba(173, 138, 67, 0.30);
  --hairline: rgba(15, 23, 42, 0.08);
  --input-bg: #f1f5f9;
  --shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
  --shadow-hover: 0 16px 40px rgba(173, 138, 67, 0.18);
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] {
  --bg-primary: #0b0c10;
  --bg-card: #151720;
  --bg-elevated: #1f2833;
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --gold-accent: #c6a667;
  --gold-light: #dcc189;
  --gold-soft: rgba(198, 166, 103, 0.12);
  --gold-glow: rgba(198, 166, 103, 0.22);
  --gold-glow-strong: rgba(198, 166, 103, 0.34);
  --gold-gradient: linear-gradient(135deg, #dcc189 0%, #c6a667 100%);
  /* Dark text on gold: the app uses this pairing for its primary buttons. */
  --on-gold: #0b0c10;
  --card-border: rgba(198, 166, 103, 0.25);
  --hairline: rgba(241, 245, 249, 0.08);
  --input-bg: #0f1117;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  --shadow-hover: 0 16px 40px rgba(198, 166, 103, 0.16);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: var(--transition);
  -webkit-font-smoothing: antialiased;
}

/* Container */
.container {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Header & Nav */
header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(248, 250, 252, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--card-border);
  transition: var(--transition);
}

[data-theme="dark"] header {
  background: rgba(11, 12, 16, 0.82);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 72px;
}

.brand-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.brand-icon {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  max-width: 38px !important;
  max-height: 38px !important;
  flex-shrink: 0 !important;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden !important;
  box-shadow: var(--shadow);
  transition: var(--transition);
}

.brand-icon img,
img.brand-icon-img {
  width: 38px !important;
  height: 38px !important;
  max-width: 38px !important;
  max-height: 38px !important;
  object-fit: cover !important;
  border-radius: 10px !important;
  display: block !important;
}

.brand-name {
  font-size: 1.35rem;
  font-weight: 800;
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.5px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  list-style: none;
}

.nav-link {
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  transition: var(--transition);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
}

.nav-link:hover, .nav-link.active {
  color: var(--gold-accent);
  background: var(--gold-soft);
}

/* Theme Toggle Button */
.btn-theme {
  background: var(--input-bg);
  border: 1px solid var(--card-border);
  color: var(--text-primary);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: var(--transition);
}

.btn-theme:hover {
  border-color: var(--gold-accent);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

/* Main Content Wrapper */
main {
  flex: 1;
  padding: 3rem 0;
}

/* Hero Section */
.hero {
  text-align: center;
  padding: 3.5rem 1.5rem;
  margin-bottom: 3rem;
  background: var(--bg-card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gold-gradient);
}

.hero-tag {
  display: inline-block;
  padding: 6px 16px;
  background: var(--gold-soft);
  color: var(--gold-accent);
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 1.25rem;
}

.hero-title {
  font-size: 2.75rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 1.25rem;
  letter-spacing: -1px;
}

.hero-subtitle {
  font-size: 1.2rem;
  color: var(--text-secondary);
  max-width: 680px;
  margin: 0 auto 2rem;
}

/* Buttons */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--gold-gradient);
  color: var(--on-gold);
  font-weight: 700;
  font-size: 1rem;
  padding: 14px 28px;
  border-radius: var(--radius-md);
  text-decoration: none;
  border: none;
  cursor: pointer;
  box-shadow: 0 6px 20px var(--gold-glow);
  transition: var(--transition);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px var(--gold-glow-strong);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--input-bg);
  color: var(--text-primary);
  border: 1px solid var(--card-border);
  font-weight: 600;
  padding: 12px 24px;
  border-radius: var(--radius-md);
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition);
}

.btn-secondary:hover {
  border-color: var(--gold-accent);
  color: var(--gold-accent);
}

/* Feature & Portal Grid */
.section-title {
  font-size: 1.85rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  text-align: center;
}

.section-desc {
  text-align: center;
  color: var(--text-secondary);
  margin-bottom: 2.5rem;
  font-size: 1.05rem;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
  margin-bottom: 3.5rem;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 1.5rem;
  margin-bottom: 3.5rem;
}

/* Cards */
.card {
  background: var(--bg-card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: 2rem;
  box-shadow: var(--shadow);
  transition: var(--transition);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: var(--gold-accent);
}

.card-icon {
  width: 48px;
  height: 48px;
  background: var(--gold-soft);
  color: var(--gold-accent);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 1.25rem;
}

.card-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.card-text {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Badge */
.badge {
  display: inline-block;
  padding: 4px 10px;
  background: var(--gold-soft);
  color: var(--gold-accent);
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

/* Form Styles & Horizontal Track for Multi-Choice Selection (Rule Enforcement) */
.form-group {
  margin-bottom: 1.5rem;
}

.form-label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
  color: var(--text-primary);
}

.form-control {
  width: 100%;
  padding: 14px 16px;
  background: var(--input-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.98rem;
  transition: var(--transition);
}

.form-control:focus {
  outline: none;
  border-color: var(--gold-accent);
  box-shadow: 0 0 0 3px var(--gold-glow);
}

textarea.form-control {
  min-height: 140px;
  resize: vertical;
}

/* Multi-choice horizontal track / segmented button row (Constitutional Rule compliance) */
.choice-track {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.choice-track::-webkit-scrollbar {
  height: 4px;
}
.choice-track::-webkit-scrollbar-thumb {
  background: var(--gold-accent);
  border-radius: 4px;
}

.choice-item {
  flex: 0 0 auto;
  position: relative;
}

.choice-item input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.choice-pill {
  display: inline-block;
  padding: 10px 18px;
  background: var(--input-bg);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition);
}

.choice-item input[type="radio"]:checked + .choice-pill {
  background: var(--gold-gradient);
  color: var(--on-gold);
  border-color: transparent;
  box-shadow: var(--shadow);
}

.choice-pill:hover {
  border-color: var(--gold-accent);
  color: var(--gold-accent);
}

/* Accordion FAQs */
.accordion-item {
  background: var(--bg-card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  margin-bottom: 1rem;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: var(--transition);
}

.accordion-header {
  padding: 1.25rem 1.5rem;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
}

.accordion-header::after {
  content: "+";
  font-size: 1.4rem;
  color: var(--gold-accent);
  transition: var(--transition);
}

.accordion-item.active .accordion-header::after {
  transform: rotate(45deg);
}

.accordion-body {
  max-height: 0;
  overflow: hidden;
  padding: 0 1.5rem;
  color: var(--text-secondary);
  font-size: 0.98rem;
  transition: max-height 0.35s ease, padding 0.35s ease;
}

.accordion-item.active .accordion-body {
  max-height: 3000px;
  padding: 0 1.5rem 1.5rem 1.5rem;
}

/* 404 Hero Layout */
.hero-404 {
  text-align: center;
  padding: 5rem 1.5rem;
}

.error-code {
  font-size: 7.5rem;
  font-weight: 900;
  line-height: 1;
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 1rem;
  letter-spacing: -3px;
}

/* Footer */
footer {
  background: var(--bg-card);
  border-top: 1px solid var(--card-border);
  padding: 3rem 0 2rem;
  margin-top: auto;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 2.5rem;
}

.footer-brand p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-top: 0.75rem;
  max-width: 300px;
}

.footer-title {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.footer-links {
  list-style: none;
}

.footer-links li {
  margin-bottom: 0.6rem;
}

.footer-links a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.9rem;
  transition: var(--transition);
}

.footer-links a:hover {
  color: var(--gold-accent);
}

.footer-bottom {
  text-align: center;
  padding-top: 2rem;
  border-top: 1px solid var(--card-border);
  color: var(--text-secondary);
  font-size: 0.85rem;
}

/* Responsive */
@media (max-width: 768px) {
  .hero-title {
    font-size: 2rem;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .error-code {
    font-size: 5rem;
  }
  .nav-links {
    gap: 0.5rem;
  }
  .nav-link {
    padding: 4px 8px;
    font-size: 0.85rem;
  }
}

/* ==========================================================================
   Home page — layered disclosure
   --------------------------------------------------------------------------
   The page reveals itself in four layers, so a visitor can stop at any depth
   and still have made a decision:
     1. Hero        what it is + the one action worth taking
     2. Pillars     three reasons, scannable in one pass
     3. Disclosure  the detail, collapsed until asked for
     4. Utility     legal and support, present but quiet
   Everything below is additive: existing pages keep the classes they use.
   ========================================================================== */

/* --- Layer 1: split hero ------------------------------------------------- */

.hero--split {
  text-align: left;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 3rem;
  align-items: center;
  padding: 3.25rem 3rem;
}

.hero--split .hero-subtitle {
  margin: 0 0 2rem;
  max-width: 46ch;
}

.hero-actions {
  display: flex;
  gap: 0.85rem;
  flex-wrap: wrap;
  align-items: center;
}

/* A single line of reassurance under the CTAs answers the objection that
   otherwise stops the click, without adding another paragraph to read. */
.hero-note {
  margin-top: 1.1rem;
  font-size: 0.88rem;
  color: var(--text-secondary);
}

/* --- Product mock -------------------------------------------------------- */
/* A stylised representation of the checklist screen, not a screenshot. It
   exists to give the page something to forage against: a visitor should be
   able to tell what the product *is* without reading a word. Swap for real
   captures when there are some. */

.app-mock {
  background: var(--bg-primary);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  box-shadow: var(--shadow);
}

.app-mock-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.app-mock-title {
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-primary);
}

.app-mock-count {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gold-accent);
}

.app-mock-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--input-bg);
  overflow: hidden;
  margin-bottom: 1.25rem;
}

.app-mock-progress > span {
  display: block;
  height: 100%;
  width: 62%;
  border-radius: 999px;
  background: var(--gold-gradient);
}

.app-mock-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  border: 1px solid var(--hairline);
  margin-bottom: 8px;
  font-size: 0.92rem;
  color: var(--text-primary);
}

.app-mock-check {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 2px solid var(--card-border);
  flex-shrink: 0;
}

.app-mock-row.is-done .app-mock-check {
  background: var(--gold-gradient);
  border-color: transparent;
}

.app-mock-row.is-done span {
  color: var(--text-secondary);
  text-decoration: line-through;
}

.app-mock-tag {
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--gold-accent);
  background: var(--gold-soft);
  border-radius: 999px;
  padding: 3px 10px;
}

/* --- Layer 2: pillars ---------------------------------------------------- */

.pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.pillar {
  background: var(--bg-card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  transition: var(--transition);
}

.pillar:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: var(--gold-accent);
}

.pillar-icon {
  width: 42px;
  height: 42px;
  margin-bottom: 1rem;
  border-radius: var(--radius-sm);
  background: var(--gold-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pillar-icon svg {
  width: 22px;
  height: 22px;
  fill: var(--gold-accent);
}

.pillar h3 {
  font-size: 1.12rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.pillar p {
  color: var(--text-secondary);
  font-size: 0.95rem;
}

/* --- Layer 3: disclosure ------------------------------------------------- */
/* Collapsed by default. The headline carries enough scent to decide whether
   opening is worth it; the body is the reward for asking. */

.disclosure {
  max-width: 780px;
  margin: 0 auto;
}

/* The shared .accordion-header is a flex row so its ::after chevron sits at the
   far end. Stacking title over subtitle needs its own column, otherwise the
   subtitle becomes a sibling flex item and lands beside the title. */
.disclosure .accordion-header {
  font-size: 1rem;
  gap: 1rem;
}

.disclosure-title {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.disclosure-lead {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.disclosure .accordion-body p + p {
  margin-top: 0.75rem;
}

/* --- Layer 4: utility strip ---------------------------------------------- */
/* Replaces a four-card grid that repeated links already present in the nav and
   footer. Repeating identical scent three times costs attention and returns
   nothing. */

.utility-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  padding: 1.5rem;
  background: var(--bg-card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
}

.utility-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.93rem;
  font-weight: 600;
  transition: var(--transition);
}

.utility-link:hover {
  color: var(--gold-accent);
  border-color: var(--card-border);
  background: var(--gold-soft);
}

/* --- Shared rhythm ------------------------------------------------------- */

.section-block {
  margin-bottom: 4rem;
}

.section-eyebrow {
  display: block;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold-accent);
  margin-bottom: 0.6rem;
}

@media (max-width: 900px) {
  .hero--split {
    grid-template-columns: 1fr;
    padding: 2.5rem 1.75rem;
    gap: 2.25rem;
  }
  .pillar-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-actions .btn-primary,
  .hero-actions .btn-secondary {
    width: 100%;
  }
}

/* ==========================================================================
   FAQ & reference documentation
   ========================================================================== */

/* --- Callouts ------------------------------------------------------------ */
/* Used where a statement needs a caveat attached to it rather than buried in
   a paragraph — e.g. what is genuinely encrypted, or what is temporarily
   unlocked during the test period. */

.callout {
  border: 1px solid var(--card-border);
  border-left: 3px solid var(--gold-accent);
  background: var(--gold-soft);
  border-radius: var(--radius-sm);
  padding: 1rem 1.15rem;
  margin: 1rem 0;
  font-size: 0.93rem;
}

.callout strong { color: var(--gold-accent); }
.callout p + p { margin-top: 0.6rem; }

/* --- Numbered steps ------------------------------------------------------ */

.steps {
  counter-reset: step;
  list-style: none;
  margin: 1rem 0;
}

.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 2.5rem;
  margin-bottom: 0.85rem;
  color: var(--text-secondary);
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 1px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--gold-soft);
  border: 1px solid var(--card-border);
  color: var(--gold-accent);
  font-size: 0.82rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.steps li strong { color: var(--text-primary); }

/* --- Entry-point chips --------------------------------------------------- */

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1rem 0;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--bg-elevated);
  border: 1px solid var(--card-border);
  font-size: 0.87rem;
  font-weight: 600;
  color: var(--text-primary);
}

/* --- Command reference table --------------------------------------------- */
/* A table rather than prose: this is lookup material, not reading material.
   Someone arrives knowing what they want to do and needs the phrasing. */

.cmd-group {
  margin-bottom: 2.25rem;
}

.cmd-group h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.cmd-group > p {
  color: var(--text-secondary);
  font-size: 0.92rem;
  margin-bottom: 1rem;
}

.cmd-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
}

.cmd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  min-width: 640px;
}

.cmd-table th {
  text-align: left;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--gold-accent);
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--card-border);
  white-space: nowrap;
}

.cmd-table td {
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
  color: var(--text-secondary);
}

.cmd-table tr:last-child td { border-bottom: none; }

.cmd-table td:first-child {
  color: var(--text-primary);
  font-weight: 600;
  white-space: nowrap;
}

/* Example utterances, set apart so they read as things you literally type. */
.utterance {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86rem;
  color: var(--text-primary);
  background: var(--input-bg);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 5px 9px;
  margin-bottom: 5px;
}

.utterance:last-child { margin-bottom: 0; }

.utterance::before {
  content: "“";
  color: var(--gold-accent);
}

.utterance::after {
  content: "”";
  color: var(--gold-accent);
}

.utterance .slot {
  color: var(--gold-accent);
  font-style: italic;
}

@media (max-width: 640px) {
  .cmd-table { font-size: 0.86rem; }
}