/* Sample brand guide for a FICTIONAL client, "The Best Travel Company" (/brand-guide-sample/).
   This is the client's look (Ocean Blue, Sunset Coral, Warm Sand, Playfair Display + Inter),
   not Modern Pixel's, so hex values live here and nowhere else. Enqueued by functions.php on
   this page only. Every rule is scoped under .bg-sample and every class is prefixed bg- so
   nothing reaches the theme header or footer.

   The cover also carries the theme's .page-hero class: page.php only renders content as-is
   when it finds a hero, and .page-hero's top padding is what clears the floating header.
   .bg-sample .bg-cover overrides the rest of its look.

   Fonts: the sample client's Playfair Display and Inter come from Google Fonts (moved here
   from a <link> in the original page). This is the only page on the site that calls a font CDN. */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap");

/* ---- Reset and base, scoped ---- */
.bg-sample *, .bg-sample *::before, .bg-sample *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ---- Brand tokens: The Best Travel Company ---- */
.bg-sample {
  /* Primary: Ocean Blue */
  --bg-primary-50: #e6f4f9;
  --bg-primary-100: #c2e4f0;
  --bg-primary-200: #9ad3e6;
  --bg-primary-300: #6fc0db;
  --bg-primary-400: #4fb1d3;
  --bg-primary-500: #2FA2CA;
  --bg-primary-600: #2791b7;
  --bg-primary-700: #1d7a9c;
  --bg-primary-800: #146381;
  --bg-primary-900: #0a4d66;

  /* Accent: Sunset Coral */
  --bg-accent-50: #fff4f1;
  --bg-accent-100: #ffe4db;
  --bg-accent-200: #ffc9b8;
  --bg-accent-300: #ffa88f;
  --bg-accent-400: #ff8766;
  --bg-accent-500: #E86A4A;
  --bg-accent-600: #d4563a;
  --bg-accent-700: #b8432c;
  --bg-accent-800: #9c3220;
  --bg-accent-900: #802516;

  /* Neutral: Warm Sand */
  --bg-neutral-50: #fdfbf7;
  --bg-neutral-100: #f7f3eb;
  --bg-neutral-200: #ebe5d9;
  --bg-neutral-300: #d9d0c0;
  --bg-neutral-400: #b8ac98;
  --bg-neutral-500: #978a74;
  --bg-neutral-600: #7a6e5a;
  --bg-neutral-700: #5e5444;
  --bg-neutral-800: #423b30;
  --bg-neutral-900: #28231c;

  /* Text */
  --bg-text-dark: #1e293b;
  --bg-text-body: #475569;
  --bg-text-muted: #64748b;
  --bg-text-light: #94a3b8;

  /* Feedback (do / don't) */
  --bg-do-bg: #e8f5e9;
  --bg-do-rule: #4caf50;
  --bg-do-text: #2e7d32;
  --bg-dont-bg: #ffebee;
  --bg-dont-rule: #f44336;
  --bg-dont-text: #c62828;

  /* Typography */
  --bg-font-display: "Playfair Display", Georgia, serif;
  --bg-font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Spacing */
  --bg-space-1: 4px;
  --bg-space-2: 8px;
  --bg-space-3: 12px;
  --bg-space-4: 16px;
  --bg-space-5: 24px;
  --bg-space-6: 32px;
  --bg-space-8: 48px;
  --bg-space-10: 64px;
  --bg-space-12: 80px;
  --bg-space-16: 96px;

  /* Radii */
  --bg-radius-sm: 4px;
  --bg-radius-md: 8px;
  --bg-radius-lg: 12px;
  --bg-radius-xl: 16px;
  --bg-radius-full: 9999px;

  font-family: var(--bg-font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--bg-text-dark);
  background: #ffffff;
}

/* Neutralise the theme's element styles inside the sample. */
.bg-sample h1, .bg-sample h2, .bg-sample h3, .bg-sample h4, .bg-sample h5 {
  font-family: var(--bg-font-body);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: normal;
  color: var(--bg-text-dark);
}
.bg-sample h4 { font-size: 18px; }
.bg-sample a { color: inherit; }
.bg-sample :focus-visible { outline: 3px solid var(--bg-accent-500); outline-offset: 3px; }
.bg-sample [id] { scroll-margin-top: 104px; }

/* ---- Layout ---- */
.bg-sample .bg-guide { max-width: 1200px; margin: 0 auto; }
.bg-sample .bg-section { padding: var(--bg-space-12) var(--bg-space-6); border-bottom: 1px solid var(--bg-neutral-200); }
.bg-sample .bg-section:last-child { border-bottom: none; }
.bg-sample .bg-section-header { margin-bottom: var(--bg-space-8); }
.bg-sample .bg-section-number {
  display: inline-block;
  margin-bottom: var(--bg-space-3);
  font-family: var(--bg-font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--bg-primary-500);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.bg-sample .bg-section-title {
  font-family: var(--bg-font-display);
  font-size: 36px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--bg-text-dark);
}
.bg-sample .bg-section-intro { max-width: 700px; margin-top: var(--bg-space-4); font-size: 18px; color: var(--bg-text-body); }
.bg-sample .bg-subhead { margin-bottom: var(--bg-space-5); font-size: 18px; }

/* ---- Cover ---- */
.bg-sample .bg-cover {
  position: relative;
  overflow: hidden;
  padding: calc(var(--size-header, 72px) + 16px + var(--bg-space-16)) var(--bg-space-6) var(--bg-space-16);
  background: linear-gradient(135deg, var(--bg-primary-700) 0%, var(--bg-primary-900) 100%);
  color: #ffffff;
  text-align: center;
}
.bg-sample .bg-cover::before {
  content: "";
  position: absolute;
  inset: auto;
  top: -50%;
  right: -20%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(232, 106, 74, 0.15) 0%, transparent 70%);
  -webkit-mask-image: none;
  mask-image: none;
  pointer-events: none;
}
.bg-sample .bg-cover::after {
  content: "";
  position: absolute;
  bottom: -30%;
  left: -10%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(47, 162, 202, 0.2) 0%, transparent 70%);
  pointer-events: none;
}
.bg-sample .bg-cover-content { position: relative; z-index: 2; }
.bg-sample .bg-company-name {
  margin-bottom: var(--bg-space-4);
  font-family: var(--bg-font-display);
  font-size: 48px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #ffffff;
}
.bg-sample .bg-tagline { margin-bottom: var(--bg-space-8); font-size: 20px; opacity: 0.9; }
.bg-sample .bg-guide-label {
  display: inline-block;
  padding: var(--bg-space-3) var(--bg-space-5);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--bg-radius-full);
  background: rgba(255, 255, 255, 0.15);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.bg-sample .bg-version { margin-top: var(--bg-space-10); font-size: 14px; opacity: 0.6; }

/* ---- Table of contents ---- */
.bg-sample .bg-toc { background: var(--bg-neutral-50); }
.bg-sample .bg-toc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--bg-space-4); }
.bg-sample .bg-toc-item {
  padding: var(--bg-space-5);
  border: 1px solid var(--bg-neutral-200);
  border-radius: var(--bg-radius-lg);
  background: #ffffff;
  color: var(--bg-text-dark);
  text-decoration: none;
  transition: all 0.2s ease;
}
.bg-sample .bg-toc-item:hover {
  border-color: var(--bg-primary-300);
  box-shadow: 0 4px 12px rgba(47, 162, 202, 0.15);
  transform: translateY(-2px);
}
.bg-sample .bg-toc-item-number {
  margin-bottom: var(--bg-space-2);
  font-family: var(--bg-font-display);
  font-size: 32px;
  font-weight: 600;
  line-height: 1;
  color: var(--bg-primary-500);
}
.bg-sample .bg-toc-item-title { font-size: 15px; font-weight: 600; }

/* ---- Logo ---- */
.bg-sample .bg-logo-display {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--bg-space-6);
  padding: var(--bg-space-10);
  border-radius: var(--bg-radius-xl);
  background: var(--bg-neutral-100);
}
.bg-sample .bg-logo-primary { font-family: var(--bg-font-display); font-size: 42px; font-weight: 700; color: var(--bg-primary-700); }
.bg-sample .bg-logo-primary span { color: var(--bg-accent-500); }
.bg-sample .bg-logo-sm { font-size: 24px; }
.bg-sample .bg-logo-variants { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--bg-space-5); }
.bg-sample .bg-logo-variant { padding: var(--bg-space-6); border-radius: var(--bg-radius-lg); text-align: center; }
.bg-sample .bg-logo-variant-light { border: 1px solid var(--bg-neutral-200); background: #ffffff; }
.bg-sample .bg-logo-variant-dark { background: var(--bg-primary-900); }
.bg-sample .bg-logo-variant-accent { background: var(--bg-accent-500); }
.bg-sample .bg-logo-variant-label {
  margin-top: var(--bg-space-4);
  font-size: 12px;
  font-weight: 600;
  color: var(--bg-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.bg-sample .bg-logo-variant-dark .bg-logo-variant-label,
.bg-sample .bg-logo-variant-accent .bg-logo-variant-label { color: rgba(255, 255, 255, 0.7); }
.bg-sample .bg-logo-variant-dark .bg-logo-primary,
.bg-sample .bg-logo-variant-accent .bg-logo-primary { color: #ffffff; }
.bg-sample .bg-logo-variant-accent .bg-logo-primary span { color: var(--bg-primary-900); }

.bg-sample .bg-usage-rules { margin-top: var(--bg-space-8); }
.bg-sample .bg-usage-rules h3 { margin-bottom: var(--bg-space-4); font-size: 18px; font-weight: 600; }
.bg-sample .bg-do-dont { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bg-space-5); }
.bg-sample .bg-do-item, .bg-sample .bg-dont-item { padding: var(--bg-space-5); border-radius: var(--bg-radius-lg); }
.bg-sample .bg-do-item { border-left: 4px solid var(--bg-do-rule); background: var(--bg-do-bg); }
.bg-sample .bg-dont-item { border-left: 4px solid var(--bg-dont-rule); background: var(--bg-dont-bg); }
.bg-sample .bg-do-item h4, .bg-sample .bg-dont-item h4 {
  margin-bottom: var(--bg-space-2);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.bg-sample .bg-do-item h4 { color: var(--bg-do-text); }
.bg-sample .bg-dont-item h4 { color: var(--bg-dont-text); }
.bg-sample .bg-do-item ul, .bg-sample .bg-dont-item ul { list-style: none; font-size: 14px; }
.bg-sample .bg-do-item li, .bg-sample .bg-dont-item li { padding: var(--bg-space-2) 0; }

/* ---- Colour ---- */
.bg-sample .bg-color-palette { margin-bottom: var(--bg-space-8); }
.bg-sample .bg-color-group { margin-bottom: var(--bg-space-8); }
.bg-sample .bg-color-group-title {
  margin-bottom: var(--bg-space-4);
  font-size: 14px;
  font-weight: 700;
  color: var(--bg-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.bg-sample .bg-color-primary-display { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bg-space-5); margin-bottom: var(--bg-space-6); }
.bg-sample .bg-color-card-large { overflow: hidden; border-radius: var(--bg-radius-xl); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); }
.bg-sample .bg-color-card-large .bg-color-swatch { height: 160px; }
.bg-sample .bg-color-card-large .bg-color-info { padding: var(--bg-space-5); background: #ffffff; }
.bg-sample .bg-color-card-large .bg-color-name { margin-bottom: var(--bg-space-2); font-size: 20px; font-weight: 700; }
.bg-sample .bg-color-card-large .bg-color-hex { font-family: monospace; font-size: 14px; color: var(--bg-text-muted); }
.bg-sample .bg-color-card-large .bg-color-usage { margin-top: var(--bg-space-3); font-size: 14px; color: var(--bg-text-body); }
.bg-sample .bg-color-scale { display: flex; overflow: hidden; border-radius: var(--bg-radius-lg); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); }
.bg-sample .bg-color-scale-item {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 80px;
  padding-bottom: var(--bg-space-2);
  font-size: 11px;
  font-weight: 600;
}
.bg-sample .bg-on-light { color: var(--bg-text-dark); }
.bg-sample .bg-on-dark { color: #ffffff; }

.bg-sample .bg-swatch-primary-500 { background: var(--bg-primary-500); }
.bg-sample .bg-swatch-accent-500 { background: var(--bg-accent-500); }

.bg-sample .bg-scale-primary-50 { background: var(--bg-primary-50); }
.bg-sample .bg-scale-primary-100 { background: var(--bg-primary-100); }
.bg-sample .bg-scale-primary-200 { background: var(--bg-primary-200); }
.bg-sample .bg-scale-primary-300 { background: var(--bg-primary-300); }
.bg-sample .bg-scale-primary-400 { background: var(--bg-primary-400); }
.bg-sample .bg-scale-primary-500 { background: var(--bg-primary-500); }
.bg-sample .bg-scale-primary-600 { background: var(--bg-primary-600); }
.bg-sample .bg-scale-primary-700 { background: var(--bg-primary-700); }
.bg-sample .bg-scale-primary-800 { background: var(--bg-primary-800); }
.bg-sample .bg-scale-primary-900 { background: var(--bg-primary-900); }

.bg-sample .bg-scale-accent-50 { background: var(--bg-accent-50); }
.bg-sample .bg-scale-accent-100 { background: var(--bg-accent-100); }
.bg-sample .bg-scale-accent-200 { background: var(--bg-accent-200); }
.bg-sample .bg-scale-accent-300 { background: var(--bg-accent-300); }
.bg-sample .bg-scale-accent-400 { background: var(--bg-accent-400); }
.bg-sample .bg-scale-accent-500 { background: var(--bg-accent-500); }
.bg-sample .bg-scale-accent-600 { background: var(--bg-accent-600); }
.bg-sample .bg-scale-accent-700 { background: var(--bg-accent-700); }
.bg-sample .bg-scale-accent-800 { background: var(--bg-accent-800); }
.bg-sample .bg-scale-accent-900 { background: var(--bg-accent-900); }

.bg-sample .bg-scale-neutral-50 { background: var(--bg-neutral-50); }
.bg-sample .bg-scale-neutral-100 { background: var(--bg-neutral-100); }
.bg-sample .bg-scale-neutral-200 { background: var(--bg-neutral-200); }
.bg-sample .bg-scale-neutral-300 { background: var(--bg-neutral-300); }
.bg-sample .bg-scale-neutral-400 { background: var(--bg-neutral-400); }
.bg-sample .bg-scale-neutral-500 { background: var(--bg-neutral-500); }
.bg-sample .bg-scale-neutral-600 { background: var(--bg-neutral-600); }
.bg-sample .bg-scale-neutral-700 { background: var(--bg-neutral-700); }
.bg-sample .bg-scale-neutral-800 { background: var(--bg-neutral-800); }
.bg-sample .bg-scale-neutral-900 { background: var(--bg-neutral-900); }

/* ---- Typography ---- */
.bg-sample .bg-font-display-sample {
  margin-bottom: var(--bg-space-8);
  padding: var(--bg-space-8);
  border-radius: var(--bg-radius-xl);
  background: var(--bg-neutral-50);
  font-family: var(--bg-font-display);
}
.bg-sample .bg-font-name {
  margin-bottom: var(--bg-space-4);
  font-family: var(--bg-font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--bg-primary-600);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.bg-sample .bg-font-sample-large { margin-bottom: var(--bg-space-4); font-size: 48px; font-weight: 700; line-height: 1.1; color: var(--bg-text-dark); }
.bg-sample .bg-font-sample-alphabet { overflow-wrap: anywhere; font-size: 24px; letter-spacing: 0.02em; color: var(--bg-text-body); }
.bg-sample .bg-font-body-sample { padding: var(--bg-space-8); border: 1px solid var(--bg-neutral-200); border-radius: var(--bg-radius-xl); background: #ffffff; }
.bg-sample .bg-font-body-sample p { margin-bottom: var(--bg-space-4); font-size: 16px; line-height: 1.7; color: var(--bg-text-body); }
.bg-sample .bg-font-body-sample p:last-child { margin-bottom: 0; }

.bg-sample .bg-type-scale { margin-top: var(--bg-space-8); }
.bg-sample .bg-type-scale-item { display: flex; align-items: baseline; padding: var(--bg-space-4) 0; border-bottom: 1px solid var(--bg-neutral-200); }
.bg-sample .bg-type-scale-label {
  flex-shrink: 0;
  width: 120px;
  font-size: 12px;
  font-weight: 600;
  color: var(--bg-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.bg-sample .bg-type-scale-size { flex-shrink: 0; width: 80px; font-family: monospace; font-size: 13px; color: var(--bg-primary-600); }
.bg-sample .bg-type-scale-sample { flex: 1; color: var(--bg-text-dark); }
.bg-sample .bg-type-scale-sample.bg-display { font-family: var(--bg-font-display); }
.bg-sample .bg-ts-display { font-size: 32px; font-weight: 600; }
.bg-sample .bg-ts-h1 { font-size: 28px; font-weight: 600; }
.bg-sample .bg-ts-h2 { font-size: 24px; font-weight: 600; }
.bg-sample .bg-ts-h3 { font-size: 20px; font-weight: 600; }
.bg-sample .bg-ts-body-lg { font-size: 18px; }
.bg-sample .bg-ts-body { font-size: 16px; }
.bg-sample .bg-ts-small { font-size: 14px; }

/* ---- Components ---- */
.bg-sample .bg-component-group { margin-bottom: var(--bg-space-10); }
.bg-sample .bg-component-title { margin-bottom: var(--bg-space-5); font-size: 18px; font-weight: 600; color: var(--bg-text-dark); }
.bg-sample .bg-button-showcase {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bg-space-4);
  padding: var(--bg-space-6);
  border-radius: var(--bg-radius-lg);
  background: var(--bg-neutral-50);
}
.bg-sample .bg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  border: none;
  border-radius: var(--bg-radius-full);
  font-family: var(--bg-font-body);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}
.bg-sample .bg-btn-primary {
  background: linear-gradient(135deg, var(--bg-accent-500) 0%, var(--bg-accent-600) 100%);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(232, 106, 74, 0.35);
}
.bg-sample .bg-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(232, 106, 74, 0.45); }
.bg-sample .bg-btn-secondary {
  background: linear-gradient(135deg, var(--bg-primary-500) 0%, var(--bg-primary-700) 100%);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(47, 162, 202, 0.3);
}
.bg-sample .bg-btn-secondary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(47, 162, 202, 0.4); }
.bg-sample .bg-btn-outline { border: 2px solid var(--bg-primary-700); background: transparent; color: var(--bg-primary-700); }
.bg-sample .bg-btn-outline:hover { background: var(--bg-primary-700); color: #ffffff; }

.bg-sample .bg-card-showcase { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--bg-space-5); }
.bg-sample .bg-card {
  overflow: hidden;
  border-radius: var(--bg-radius-xl);
  background: #ffffff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}
.bg-sample .bg-card:hover { transform: translateY(-4px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); }
.bg-sample .bg-card-image {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 160px;
  background: linear-gradient(135deg, var(--bg-primary-400) 0%, var(--bg-primary-600) 100%);
  color: #ffffff;
  font-size: 48px;
}
.bg-sample .bg-card-image-accent { background: linear-gradient(135deg, var(--bg-accent-400) 0%, var(--bg-accent-600) 100%); }
.bg-sample .bg-card-image-neutral { background: linear-gradient(135deg, var(--bg-neutral-400) 0%, var(--bg-neutral-600) 100%); }
.bg-sample .bg-card-content { padding: var(--bg-space-5); }
.bg-sample .bg-card-title { margin-bottom: var(--bg-space-2); font-family: var(--bg-font-display); font-size: 20px; font-weight: 600; color: var(--bg-text-dark); }
.bg-sample .bg-card-text { font-size: 14px; line-height: 1.6; color: var(--bg-text-body); }
.bg-sample .bg-card-link {
  display: inline-flex;
  align-items: center;
  gap: var(--bg-space-2);
  margin-top: var(--bg-space-4);
  font-size: 14px;
  font-weight: 600;
  color: var(--bg-accent-500);
  text-decoration: none;
}
.bg-sample .bg-card-link:hover { color: var(--bg-accent-600); }

/* ---- Imagery ---- */
.bg-sample .bg-imagery-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--bg-space-4); }
.bg-sample .bg-imagery-item { position: relative; overflow: hidden; border-radius: var(--bg-radius-xl); }
.bg-sample .bg-imagery-item img { width: 100%; height: 100%; object-fit: cover; }
.bg-sample .bg-imagery-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  background: linear-gradient(135deg, var(--bg-primary-200) 0%, var(--bg-primary-400) 100%);
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.bg-sample .bg-imagery-item:first-child .bg-imagery-placeholder { height: 100%; min-height: 300px; }
.bg-sample .bg-imagery-guidelines { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--bg-space-5); margin-top: var(--bg-space-8); }
.bg-sample .bg-guideline-card { padding: var(--bg-space-5); border-left: 4px solid var(--bg-primary-500); border-radius: var(--bg-radius-lg); background: var(--bg-neutral-50); }
.bg-sample .bg-guideline-card h3 { margin-bottom: var(--bg-space-3); font-size: 16px; font-weight: 600; color: var(--bg-text-dark); }
.bg-sample .bg-guideline-card p { font-size: 14px; line-height: 1.6; color: var(--bg-text-body); }

/* ---- Voice ---- */
.bg-sample .bg-voice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--bg-space-5); }
.bg-sample .bg-voice-card { padding: var(--bg-space-6); border: 1px solid var(--bg-neutral-200); border-radius: var(--bg-radius-xl); background: #ffffff; }
.bg-sample .bg-voice-card h3 { margin-bottom: var(--bg-space-3); font-family: var(--bg-font-display); font-size: 20px; font-weight: 600; color: var(--bg-primary-700); }
.bg-sample .bg-voice-card p { font-size: 15px; line-height: 1.7; color: var(--bg-text-body); }
.bg-sample .bg-tone-examples { margin-top: var(--bg-space-8); }
.bg-sample .bg-tone-example { margin-bottom: var(--bg-space-4); padding: var(--bg-space-5); border-radius: var(--bg-radius-lg); }
.bg-sample .bg-tone-example-dont { border-left: 4px solid var(--bg-dont-rule); background: var(--bg-dont-bg); }
.bg-sample .bg-tone-example-do { border-left: 4px solid var(--bg-do-rule); background: var(--bg-do-bg); }
.bg-sample .bg-tone-label { margin-bottom: var(--bg-space-2); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.bg-sample .bg-tone-example-dont .bg-tone-label { color: var(--bg-dont-text); }
.bg-sample .bg-tone-example-do .bg-tone-label { color: var(--bg-do-text); }
.bg-sample .bg-tone-example p:not(.bg-tone-label) { font-size: 15px; font-style: italic; color: var(--bg-text-dark); }

/* ---- Guide footer ---- */
.bg-sample .bg-footer { padding: var(--bg-space-10) var(--bg-space-6); background: var(--bg-primary-900); color: #ffffff; text-align: center; }
.bg-sample .bg-footer p { margin-bottom: var(--bg-space-2); font-size: 14px; opacity: 0.7; }
.bg-sample .bg-footer .bg-credit { margin-top: var(--bg-space-6); padding-top: var(--bg-space-6); border-top: 1px solid rgba(255, 255, 255, 0.1); }
.bg-sample .bg-footer .bg-credit a { font-weight: 600; color: var(--bg-accent-300); text-decoration: none; }
.bg-sample .bg-footer .bg-credit a:hover { color: var(--bg-accent-200); }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .bg-sample .bg-toc-grid { grid-template-columns: repeat(2, 1fr); }
  .bg-sample .bg-card-showcase,
  .bg-sample .bg-imagery-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .bg-sample .bg-logo-variants,
  .bg-sample .bg-do-dont,
  .bg-sample .bg-color-primary-display,
  .bg-sample .bg-imagery-guidelines,
  .bg-sample .bg-voice-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .bg-sample .bg-cover { padding: calc(var(--size-header, 72px) + 24px + var(--bg-space-10)) var(--bg-space-4) var(--bg-space-10); }
  .bg-sample .bg-company-name { font-size: 36px; }
  .bg-sample .bg-section { padding: var(--bg-space-10) var(--bg-space-4); }
  .bg-sample .bg-type-scale-item { flex-wrap: wrap; gap: var(--bg-space-2); }
  .bg-sample .bg-type-scale-sample { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .bg-sample .bg-toc-item, .bg-sample .bg-btn, .bg-sample .bg-card { transition: none; }
}