/* Toyota Commercial Fleet Malaysia (toyotahilux.my) Stylesheet
   Dark Heavy-Duty Industrial Aesthetic (Gazoo Racing 2 Architecture) */

:root {
  /* Core TGR Palette */
  --primary: #E60012;
  --primary-hover: #CC0010;
  --primary-glow: rgba(230, 0, 18, 0.25);
  --primary-veil: rgba(230, 0, 18, 0.08);
  
  /* Dark Canvas Architecture (Charcoal & Layered Elevation) */
  --background: #0B0C10;
  --surface: #12141C;
  --surface-elevated: #181B26;
  --surface-card: #141722;
  --surface-dark: #08090C;
  --surface-dark-subtle: #1C202C;
  
  /* Anti-Glare Typographic Palette */
  --text: #EDEDED;
  --text-heading: #EDEDED;
  --text-lead: #E2E8F0;
  --text-muted: #94A3B8;
  --text-dim: #64748B;
  --text-on-dark: #EDEDED;
  --text-muted-on-dark: #94A3B8;
  
  /* Industrial Hairline Borders */
  --border: rgba(255, 255, 255, 0.08);
  --border-subtle: rgba(255, 255, 255, 0.05);
  --border-strong: rgba(255, 255, 255, 0.16);
  --border-focus: var(--primary);
  
  /* Status Badges */
  --badge-fleet: #38BDF8;
  --badge-fleet-bg: rgba(56, 189, 248, 0.12);
  --badge-fleet-border: rgba(56, 189, 248, 0.25);
  --success: #22C55E;
  --success-bg: rgba(34, 197, 94, 0.12);
  --success-border: rgba(34, 197, 94, 0.25);
  --amber: #F59E0B;
  --amber-bg: rgba(245, 158, 11, 0.12);
  --comparison-loss: #EF4444;
  --comparison-loss-bg: rgba(239, 68, 68, 0.12);
  
  /* Typography Hierarchy */
  --font-display: 'Oswald', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-main: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', SFMono-Regular, Consolas, monospace;
}

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

html, body {
  width: 100%;
  overflow-x: clip;
  font-family: var(--font-main);
  background-color: var(--background);
  color: var(--text);
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

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

a {
  color: var(--primary);
  text-decoration: none;
}

/* Header & Nav */
.header-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: 52px;
  box-sizing: border-box;
  background-color: rgba(11, 12, 16, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-img {
  height: 28px;
  width: auto;
}

.logo-tagline {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.logo-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--text-dim);
  letter-spacing: 0.8px;
}

.nav-menu {
  display: none;
  align-items: center;
  gap: 24px;
}

@media (min-width: 900px) {
  .nav-menu {
    display: flex;
  }
}

.nav-link {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  transition: color 0.2s;
}

.nav-link:hover {
  color: #FFFFFF;
}

.nav-cta-btn {
  background-color: var(--primary);
  color: #FFFFFF;
  padding: 8px 16px;
  border-radius: 0px;
  transform: skewX(-14deg);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--primary);
  transition: all 0.2s ease;
}

.nav-cta-btn span, .nav-cta-btn svg {
  transform: skewX(14deg);
}

.nav-cta-btn:hover {
  background-color: var(--primary-hover);
}

/* Hero Section */
.hero-section {
  position: relative;
  background: radial-gradient(circle at 75% 30%, var(--primary-veil) 0%, transparent 60%),
              linear-gradient(180deg, var(--surface) 0%, var(--background) 100%);
  padding: 24px 16px 40px;
  border-bottom: 1px solid var(--border);
}

.hero-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 900px) {
  .hero-container {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    grid-template-areas:
      "head stage"
      "body stage";
    column-gap: 32px;
    row-gap: 12px;
    align-items: start;
  }
  .hero__head { grid-area: head; }
  .hero__stage { grid-area: stage; }
  .hero__body { grid-area: body; }
}

@media (max-width: 899px) {
  .hero__head { order: 1; }
  .hero__stage { order: 2; margin: 4px 0 12px; }
  .hero__body { order: 3; }
}

.badge-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: var(--badge-fleet-bg);
  color: var(--badge-fleet);
  border: 1px solid var(--badge-fleet-border);
  padding: 4px 10px;
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 14px;
  text-transform: uppercase;
}

.hero-title {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 800;
  line-height: 1.15;
  color: #FFFFFF;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* Clause initials: the first letter of a headline is red, and so is the first letter
   of every clause that starts after a comma, a full stop or a conjunction. Mirrors the
   toyotavios.my headline treatment. Applied by apply_red_initials.py. */
.tgr-initial {
  color: var(--primary) !important;
}

@media (min-width: 768px) {
  .hero-title {
    font-size: 42px;
  }
}

.hero-subtitle {
  font-size: 15px;
  font-weight: 600;
  color: var(--primary);
  line-height: 1.4;
  margin-bottom: 14px;
}

.hero-desc {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 20px;
}

.hero-bullets {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 26px;
}

.hero-bullet-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: var(--text-lead);
}

.hero-bullet-icon {
  width: 18px;
  height: 18px;
  color: var(--primary);
  flex-shrink: 0;
  margin-top: 2px;
}

.hero-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (min-width: 600px) {
  .hero-actions {
    flex-direction: row;
  }
}

.btn-primary-lg {
  background-color: var(--primary);
  color: #FFFFFF;
  padding: 13px 22px;
  border-radius: 0px;
  transform: skewX(-14deg);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
  border: 1px solid var(--primary);
  box-shadow: 0 4px 15px var(--primary-glow);
}

.btn-primary-lg span, .btn-primary-lg svg {
  transform: skewX(14deg);
}

.btn-primary-lg:hover {
  background-color: var(--primary-hover);
  box-shadow: 0 4px 22px rgba(230, 0, 18, 0.45);
}

.btn-secondary-lg {
  background-color: var(--surface);
  color: #FFFFFF;
  border: 1px solid var(--border-strong);
  padding: 13px 22px;
  border-radius: 0px;
  transform: skewX(-14deg);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.btn-secondary-lg span, .btn-secondary-lg svg {
  transform: skewX(14deg);
}

.btn-secondary-lg:hover {
  background-color: var(--surface-elevated);
  border-color: rgba(255, 255, 255, 0.3);
}

.cta-trust-note {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-dim);
  margin-top: 10px;
}

/* Dual Intent Switcher Box */
.intent-toggle-box {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0px;
  padding: 18px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  position: relative;
}

.intent-tab-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}

.intent-tab-btn {
  background-color: var(--surface-dark);
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 10px 8px;
  border-radius: 0px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-transform: uppercase;
}

.intent-tab-btn.active {
  background-color: var(--primary);
  border-color: var(--primary);
  color: #FFFFFF;
  box-shadow: 0 2px 10px var(--primary-glow);
}

.tab-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.85;
}

.intent-pane {
  display: none;
  animation: fadeIn 0.3s ease;
}

.intent-pane.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.intent-media-wrapper {
  position: relative;
  border-radius: 0px;
  overflow: hidden;
  background: radial-gradient(ellipse at bottom, rgba(255, 255, 255, 0.08) 0%, rgba(18, 20, 28, 0.95) 75%),
              #0B0C10;
  margin-bottom: 14px;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 230px;
}

.intent-media-wrapper::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 12px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.85) 0%, transparent 80%);
  pointer-events: none;
}

.intent-vehicle-img {
  width: 90%;
  max-width: 420px;
  height: auto;
  object-fit: contain;
  transition: transform 0.3s ease;
  filter: drop-shadow(0 14px 12px rgba(0, 0, 0, 0.75));
}

.intent-specs-summary {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

.spec-chip {
  background-color: var(--surface-dark);
  border: 1px solid var(--border);
  padding: 8px 10px;
  border-radius: 0px;
  display: flex;
  flex-direction: column;
}

.spec-chip-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.spec-chip-val {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: 0.5px;
}

.intent-highlight-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.intent-highlight-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-muted);
}

.intent-highlight-list svg {
  width: 15px;
  height: 15px;
  color: var(--primary);
  flex-shrink: 0;
}

/* General Section Layout */
.section {
  padding: 48px 16px;
  border-bottom: 1px solid var(--border);
}

.section-container {
  max-width: 1200px;
  margin: 0 auto;
}

.section-header {
  margin-bottom: 32px;
}

.section-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--primary);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.section-label::before {
  content: '/';
  font-weight: 900;
  color: var(--primary);
}

.section-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.2;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

@media (min-width: 768px) {
  .section-title {
    font-size: 34px;
  }
}

.section-lead {
  font-size: 14.5px;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 800px;
}

/* Section 1: Features Grid */
.features-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

@media (min-width: 640px) {
  .features-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .features-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.feature-card {
  background-color: var(--surface-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: 0px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.feature-card:hover {
  transform: translateY(-2px);
  border-color: rgba(230, 0, 18, 0.4);
  box-shadow: 0 6px 20px rgba(0,0,0,0.6);
}

.feature-icon-box {
  width: 40px;
  height: 40px;
  border-radius: 0px;
  background-color: var(--surface-dark);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
}

.feature-card-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.feature-card-desc {
  font-size: 14px;
  color: var(--text-lead);
  line-height: 1.6;
}

/* Section 2: Tax Shield */
.tax-shield-banner {
  background-color: var(--surface);
  border: 1px solid var(--success-border);
  border-radius: 0px;
  padding: 22px;
  margin-bottom: 24px;
}

.tax-badge {
  display: inline-block;
  background-color: var(--success);
  color: #FFFFFF;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 0px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.tax-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.tax-desc {
  font-size: 13.5px;
  color: var(--text-lead);
  line-height: 1.6;
}

.table-responsive {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 0px;
  background-color: var(--surface-card);
  -webkit-overflow-scrolling: touch;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 13px;
  min-width: 600px;
}

.data-table th {
  background-color: var(--surface-dark);
  color: #FFFFFF;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 13px 14px;
  border-bottom: 1px solid var(--border-strong);
}

.data-table td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-lead);
}

.data-table tr:nth-child(even) {
  background-color: var(--surface-dark-subtle);
}

.data-table tr:hover {
  background-color: rgba(230, 0, 18, 0.06);
}

.highlight-row {
  font-weight: 700;
  color: #FFFFFF;
  background-color: rgba(34, 197, 94, 0.08) !important;
}

.highlight-row td:first-child {
  color: var(--success);
}

.benchmark-row {
  background-color: var(--comparison-loss-bg) !important;
  color: #FCA5A5;
}

/* Section 3: Suspensi Truth */
.suspension-box {
  background-color: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 0px;
  padding: 24px;
}

.suspension-quote {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: 0.5px;
  line-height: 1.35;
  margin-bottom: 14px;
  text-transform: uppercase;
}

.suspension-body {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
}

/* Section 4: Support Items Grid */
.support-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

/* Five cards must never mix widths. Spanning the last two across the remaining
   tracks left the bottom row 1.5x the width of the top row, which pushed its
   captions below the fold. Every card keeps one track width; the shorter row is
   centred instead of stretched. */
@media (min-width: 640px) {
  .support-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* The odd fifth card goes full width, so it turns side-on rather than
     presenting a 740px-wide image band. */
  .support-item:nth-child(5) {
    grid-column: span 2;
    flex-direction: row;
    align-items: stretch;
  }
  .support-item:nth-child(5) .support-media {
    flex: 0 0 38%;
    border-bottom: 0;
    border-right: 1px solid var(--border);
  }
  .support-item:nth-child(5) .support-body { justify-content: center; }
}

@media (min-width: 1024px) {
  .support-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .support-item { grid-column: span 2; }
  .support-item:nth-child(4) { grid-column: 2 / span 2; }
  .support-item:nth-child(5) {
    grid-column: 4 / span 2;
    flex-direction: column;
    align-items: stretch;
  }
  .support-item:nth-child(5) .support-media {
    flex: 0 0 auto;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
}

.support-item {
  background-color: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 0px;
  padding: 18px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  transition: border-color 0.2s;
}

.support-item:hover {
  border-color: var(--border-strong);
}

.support-icon-wrapper {
  width: 36px;
  height: 36px;
  background-color: var(--surface-dark);
  border: 1px solid var(--border);
  border-radius: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  flex-shrink: 0;
}

.support-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.support-desc {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Section 5: Variants Grid */
.variants-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

@media (min-width: 768px) {
  .variants-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .variants-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.variant-card {
  background-color: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 0px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.2s ease;
  position: relative;
}

.variant-card:hover {
  border-color: rgba(230, 0, 18, 0.45);
  box-shadow: 0 8px 24px rgba(0,0,0,0.65);
  transform: translateY(-2px);
}

.variant-card.flagship-card {
  border: 2px solid var(--primary);
  box-shadow: 0 8px 25px var(--primary-glow);
}

.variant-card-header {
  padding: 16px;
  border-bottom: 1px solid var(--border);
  background-color: var(--surface);
}

.variant-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--primary);
  margin-bottom: 4px;
}

.variant-card-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.variant-price-box {
  margin-top: 8px;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.variant-price {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 800;
  color: #FFFFFF;
}

.variant-monthly {
  font-size: 12px;
  color: var(--text-dim);
}

.variant-img-box {
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at bottom, rgba(255, 255, 255, 0.05) 0%, #0B0C10 80%);
  height: 160px;
  border-bottom: 1px solid var(--border-subtle);
}

.variant-img {
  max-height: 100%;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.8));
}

.variant-specs-body {
  padding: 16px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.variant-engine-info {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-lead);
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--border);
}

.variant-feature-bullets {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
}

.variant-feature-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.variant-feature-bullets svg {
  width: 14px;
  height: 14px;
  color: var(--primary);
  flex-shrink: 0;
  margin-top: 2px;
}

.variant-target-box {
  background-color: var(--surface-dark);
  border: 1px solid var(--border);
  border-radius: 0px;
  padding: 8px 10px;
  font-size: 11.5px;
  color: var(--text-lead);
  margin-top: auto;
}

.variant-card-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background-color: var(--surface);
}

.btn-card-select {
  width: 100%;
  background-color: var(--surface-dark);
  color: #FFFFFF;
  border: 1px solid var(--border-strong);
  padding: 10px;
  border-radius: 0px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  display: block;
}

.btn-card-select:hover {
  background-color: var(--primary);
  border-color: var(--primary);
  color: #FFFFFF;
}

/* Section 6: Calculator */
.calc-card {
  background-color: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 0px;
  padding: 24px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.calc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

@media (min-width: 840px) {
  .calc-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  }
}

.calc-control-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}

.calc-label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-lead);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  justify-content: space-between;
}

.calc-select, .calc-range {
  width: 100%;
  max-width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 0px;
  font-size: 14px;
  background-color: var(--surface-dark);
  color: #FFFFFF;
  outline: none;
}

.calc-select:focus {
  border-color: var(--primary);
}

.calc-buttons-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.calc-btn-option {
  background-color: var(--surface-dark);
  border: 1px solid var(--border);
  padding: 10px;
  border-radius: 0px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  color: var(--text-muted);
  transition: all 0.2s;
  text-transform: uppercase;
}

.calc-btn-option.active {
  background-color: var(--primary);
  border-color: var(--primary);
  color: #FFFFFF;
}

.calc-result-box {
  background-color: var(--surface-dark);
  border: 1px solid var(--border-strong);
  color: #FFFFFF;
  border-radius: 0px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.calc-result-title {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
}

.calc-result-main {
  font-family: var(--font-mono);
  font-size: 36px;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.1;
  margin-bottom: 12px;
}

.calc-result-sub {
  font-size: 12px;
  color: var(--text-muted);
}

.calc-tax-callout {
  background-color: var(--surface);
  border-left: 3px solid var(--success);
  border-top: 1px solid var(--border-subtle);
  border-right: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  padding: 14px;
  border-radius: 0px;
  margin-top: 18px;
}

.calc-tax-val {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 800;
  color: var(--success);
}

.calc-tax-note {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Section 7: Lead Form */
.form-section {
  background-color: var(--surface);
}

.form-wrapper {
  max-width: 680px;
  margin: 0 auto;
  background-color: var(--surface-card);
  border: 1px solid var(--border-strong);
  border-radius: 0px;
  padding: 28px 20px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.6);
}

@media (min-width: 600px) {
  .form-wrapper {
    padding: 36px 32px;
  }
}

.form-field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
}

.form-label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text-lead);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  flex-wrap: wrap;
}

.required-indicator {
  color: var(--primary);
  white-space: nowrap;
  font-size: 11px;
}

.optional-indicator {
  color: var(--text-dim);
  font-weight: 500;
  text-transform: none;
  font-size: 11px;
  white-space: nowrap;
}

.form-input, .form-select {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 0px;
  font-size: 14px;
  font-family: var(--font-main);
  color: #FFFFFF;
  background-color: var(--surface-dark);
  transition: border-color 0.2s, box-shadow 0.2s;
  text-overflow: ellipsis;
}

@media (max-width: 768px) {
  .form-section {
    padding-bottom: 125px !important;
  }
}

.form-input:focus, .form-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-glow);
}

.form-input.is-invalid, .form-select.is-invalid {
  border-color: #EF4444;
  background-color: rgba(239, 68, 68, 0.1);
}

.field-error-msg {
  font-size: 11.5px;
  color: #F87171;
  display: none;
}

.field-error-msg.visible {
  display: block;
}

.form-submit-btn {
  width: 100%;
  background-color: var(--primary);
  color: #FFFFFF;
  border: 1px solid var(--primary);
  padding: 15px;
  border-radius: 0px;
  transform: skewX(-14deg);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
  box-shadow: 0 4px 15px var(--primary-glow);
  margin-top: 14px;
}

.form-submit-btn span, .form-submit-btn svg {
  transform: skewX(14deg);
}

.form-submit-btn:hover {
  background-color: var(--primary-hover);
  box-shadow: 0 4px 22px rgba(230, 0, 18, 0.45);
}

.form-submit-btn:disabled {
  background-color: var(--surface-dark-subtle);
  border-color: var(--border);
  color: var(--text-dim);
  cursor: not-allowed;
}

.form-footer-privacy {
  font-size: 11.5px;
  color: var(--text-dim);
  text-align: center;
  margin-top: 14px;
  line-height: 1.4;
}

/* Honeypot field (hidden from legitimate users) */
.honeypot-field {
  display: none !important;
  visibility: hidden;
}

/* Section 8: FAQ */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 900px;
}

.faq-item {
  border: 1px solid var(--border);
  border-radius: 0px;
  background-color: var(--surface-card);
  overflow: hidden;
  transition: border-color 0.2s;
}

.faq-item:hover {
  border-color: var(--border-strong);
}

.faq-question-btn {
  width: 100%;
  padding: 16px 18px;
  text-align: left;
  background: none;
  border: none;
  font-family: var(--font-main);
  font-size: 14.5px;
  font-weight: 700;
  color: #FFFFFF;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.faq-chevron {
  width: 18px;
  height: 18px;
  transition: transform 0.2s ease;
  flex-shrink: 0;
  color: var(--text-muted);
}

.faq-item.active .faq-chevron {
  transform: rotate(180deg);
  color: var(--primary);
}

.faq-answer {
  display: none;
  padding: 0 18px 16px;
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.6;
  border-top: 1px solid var(--border-subtle);
  padding-top: 14px;
}

.faq-item.active .faq-answer {
  display: block;
}

/* Section 9: Lead Magnet Callout */
.magnet-box {
  background-color: var(--surface-elevated);
  border: 1px solid var(--border-strong);
  color: #FFFFFF;
  border-radius: 0px;
  padding: 28px 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: center;
}

@media (min-width: 768px) {
  .magnet-box {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
    padding: 36px 32px;
  }
}

.magnet-badge {
  background-color: var(--primary);
  color: #FFFFFF;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 0px;
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 10px;
}

.magnet-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.magnet-desc {
  font-size: 13.5px;
  color: var(--text-lead);
  line-height: 1.5;
  margin-bottom: 14px;
}

.btn-magnet-claim {
  background-color: var(--primary);
  color: #FFFFFF;
  padding: 13px 22px;
  border-radius: 0px;
  transform: skewX(-14deg);
  border: 1px solid var(--primary);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
  text-align: center;
  box-shadow: 0 4px 15px var(--primary-glow);
}

.btn-magnet-claim span, .btn-magnet-claim svg {
  transform: skewX(14deg);
}

.btn-magnet-claim:hover {
  background-color: var(--primary-hover);
  box-shadow: 0 4px 22px rgba(230, 0, 18, 0.45);
}

/* Section 10: Legal & Disclaimer Footer */
.footer-disclaimer {
  background-color: var(--surface-dark);
  padding: 36px 16px 85px; /* space for mobile sticky bar */
  font-size: 11.5px;
  /* --text-dim (#64748B) on --surface-dark (#08090C) is 4.18:1, under the
     4.5:1 WCAG AA floor. This footer carries the legal notices, so it uses
     the readable muted tone (7.77:1) instead. */
  color: var(--text-muted);
  line-height: 1.6;
  border-top: 1px solid var(--border);
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
}

.footer-nav-links {
  display: flex;
  gap: 16px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.footer-nav-links a {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.footer-nav-links a:hover {
  color: var(--primary);
}

/* Mobile Sticky Bottom CTA Bar */
.mobile-sticky-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(18, 20, 28, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--border-strong);
  padding: 10px 16px;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.6);
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transform: translateY(100%);
  transition: transform 0.25s ease-in-out;
}

.mobile-sticky-bar.visible {
  transform: translateY(0);
}

.sticky-info {
  display: flex;
  flex-direction: column;
}

.sticky-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.sticky-sub {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.sticky-btn {
  background-color: var(--primary);
  color: #FFFFFF;
  padding: 8px 16px;
  border-radius: 0px;
  transform: skewX(-14deg);
  border: 1px solid var(--primary);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  white-space: nowrap;
}

.sticky-btn span {
  display: inline-block;
  transform: skewX(14deg);
}


/* ==========================================================================
   Image-led pass: hero masthead, gallery, photo-headed cards.
   Sharp corners and the red left accent follow the existing industrial
   dark language already used across the page.
   ========================================================================== */

/* --- Hero masthead: full-bleed vehicle band, masked into the canvas ----- */
.hero-masthead {
  position: relative;
  margin: -24px -16px 20px;
  overflow: hidden;
  background-color: var(--background);
  aspect-ratio: 900 / 563;
}
.hero-masthead::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 28%;
  background: linear-gradient(180deg, transparent 0%, var(--background) 100%);
  pointer-events: none;
}
.hero-masthead picture {
  display: block;
  width: 100%;
  height: 100%;
}
.hero-masthead img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 900 / 563;
  object-fit: cover;
}
@media (min-width: 768px) {
  .hero-masthead {
    /* 12/5 equals the 1920x800 master exactly, so object-fit: cover never crops.
       No max-height here. On a box that has an aspect-ratio, a height clamp
       transfers back into the WIDTH (640px x 2.4 = 1536px), so the band froze at
       1536px and every desktop wider than that got dead space beside it. */
    aspect-ratio: 12 / 5;
  }
  .hero-masthead::after {
    height: 24%;
  }
  .hero-masthead img {
    height: 100%;
    aspect-ratio: 12 / 5;
    object-fit: cover;
    object-position: center;
  }
}

/* --- Gallery ------------------------------------------------------------ */
.gallery-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.gallery-tab {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-lead);
  background-color: var(--surface-dark);
  border: 1px solid var(--border);
  border-radius: 0px;
  padding: 8px 14px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}
.gallery-tab:hover { color: #FFFFFF; border-color: var(--border-strong); }
.gallery-tab.active { color: #FFFFFF; border-color: var(--primary); background-color: rgba(230, 0, 18, 0.12); }

.gallery-stage {
  position: relative;
  margin: 0;
  border: 1px solid var(--border);
  background-color: var(--surface-card);
}
.gallery-stage img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background-color: #0B0C10;
  cursor: zoom-in;
}
.gallery-counter {
  position: absolute;
  top: 12px;
  right: 12px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #FFFFFF;
  background-color: rgba(11, 12, 16, 0.80);
  border: 1px solid var(--border);
  padding: 4px 9px;
}
.gallery-zoom {
  position: absolute;
  top: 12px;
  left: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #FFFFFF;
  background-color: rgba(11, 12, 16, 0.80);
  border: 1px solid var(--border);
  padding: 4px 9px;
  cursor: zoom-in;
}
.gallery-caption {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.5;
  padding: 11px 14px;
  border-top: 1px solid var(--border);
}
.gallery-strip {
  display: flex;
  flex: 1 1 auto;
  min-width: 0; /* A flex item refuses to shrink below its content width without
                   this, so the strip ran 1928px wide inside a 1120px slot. */
  gap: 8px;
  overflow-x: auto;
  padding: 12px 48px 6px; /* clears the arrows, which now overlay the ends */
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
/* Fade only the side that still has thumbnails behind it, so the first and last
   thumb are never wiped out while they are the visible ones. */
.gallery-strip-wrap[data-fade-start="1"] .gallery-strip {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 46px);
  mask-image: linear-gradient(90deg, transparent 0, #000 46px);
}
.gallery-strip-wrap[data-fade-end="1"] .gallery-strip {
  -webkit-mask-image: linear-gradient(270deg, transparent 0, #000 46px);
  mask-image: linear-gradient(270deg, transparent 0, #000 46px);
}
.gallery-strip-wrap[data-fade-start="1"][data-fade-end="1"] .gallery-strip {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 46px, #000 calc(100% - 46px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 46px, #000 calc(100% - 46px), transparent 100%);
}
.gallery-strip::-webkit-scrollbar { height: 6px; }
.gallery-strip::-webkit-scrollbar-thumb { background-color: var(--border-strong); }
.gallery-thumb {
  flex: 0 0 auto;
  width: 128px;
  padding: 0;
  cursor: pointer;
  background-color: #0B0C10;
  border: 1px solid var(--border);
  border-radius: 0px;
  opacity: 0.5;
  scroll-snap-align: start;
  transition: opacity 0.15s, border-color 0.15s;
}
.gallery-thumb img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.gallery-thumb:hover { opacity: 0.85; }
.gallery-thumb.active { opacity: 1; border-color: var(--primary); box-shadow: inset 0 -3px 0 var(--primary); }
.gallery-thumb[hidden] { display: none; }
/* Arrows overlay the strip instead of sitting in the flow. In the flow they
   ate 40px off each end, so the thumbnail row was inset from the stage image
   it sits under and read as misaligned. */
.gallery-strip-wrap { position: relative; display: block; }
.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 76px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  color: #FFFFFF;
  background-color: rgba(11, 12, 16, 0.88);
  border: 1px solid var(--border);
  border-radius: 0px;
  padding: 0;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s, opacity 0.15s;
}
.gallery-arrow.prev { left: 0; }
.gallery-arrow.next { right: 0; }
.gallery-arrow:hover { border-color: var(--primary); background-color: var(--surface-dark); }
.gallery-arrow:disabled { opacity: 0.3; cursor: default; }
.gallery-arrow:disabled:hover { border-color: var(--border); background-color: rgba(11, 12, 16, 0.88); }
@media (min-width: 640px) { .gallery-thumb { width: 150px; } }
@media (min-width: 900px) { .gallery-thumb { width: 168px; } }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background-color: rgba(6, 7, 9, 0.96);
}
.lightbox.open { display: flex; }
.lightbox img {
  display: block;
  max-width: min(1500px, 100%);
  max-height: 86vh;
  width: auto;
  height: auto;
  border: 1px solid var(--border);
}
.lightbox-close {
  position: absolute;
  top: 14px;
  right: 14px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #FFFFFF;
  background-color: var(--surface-dark);
  border: 1px solid var(--border);
  border-radius: 0px;
  padding: 8px 14px;
  cursor: pointer;
}

/* --- Photo-headed feature cards (section 1) ---------------------------- */
.feature-card { padding: 0; gap: 0; overflow: hidden; }
.feature-card-media { margin: 0; background-color: #0B0C10; border-bottom: 1px solid var(--border); }
.feature-card-media img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.feature-card-body { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 20px; }

/* --- Section 3: suspension visual ------------------------------------- */
.suspension-media { margin: 0 0 20px; border: 1px solid var(--border); background-color: #0B0C10; }
.suspension-media img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.suspension-media figcaption { font-size: 12px; color: var(--text-muted); padding: 9px 12px; border-top: 1px solid var(--border); }

/* --- Support items with a media panel (section 4) ---------------------- */
.support-item { padding: 0; gap: 0; align-items: stretch; flex-direction: column; overflow: hidden; }
.support-media { flex: 0 0 auto; background-color: #0B0C10; border-bottom: 1px solid var(--border); }
.support-media img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.support-body { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; }
@media (min-width: 768px) {
  .support-media { flex: 0 0 auto; }
}

/* --- Section 7: lead magnet visual ------------------------------------- */
.magnet-hero { margin: 0 0 20px; border: 1px solid var(--border-strong); background-color: var(--background); }
.magnet-hero img { display: block; width: 100%; aspect-ratio: 2.4 / 1; object-fit: cover; }

/* --- Section 8: form visual -------------------------------------------- */
.form-wrapper { padding: 0 0 28px; overflow: hidden; }
.form-media { margin: 0; background-color: var(--background); border-bottom: 1px solid var(--border); }
.form-media img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.form-media figcaption { font-size: 12px; color: var(--text-muted); padding: 9px 12px; border-top: 1px solid var(--border); }
.form-body { padding: 24px 32px 0; }

/* Keep the new gallery text blocks inside a readable measure. Scoped to the
   gallery so the pre-existing sections keep their approved appearance. */
.section-lead { max-width: 38em; }
.gallery-caption { max-width: 30em; }
.suspension-media figcaption, .form-media figcaption { max-width: 28em; }

/* --- Hallmark layout pass (2026-09-16) ----------------------------------
   Measure discipline: body copy was running 110-185 characters per line
   (target 45-75ch). Image dominance: the section-3 figure was spanning the
   full 1198px container. Vertical rhythm: all 13 sections had identical
   padding, which is the "same padded section" tell. */
/* A measure cap on its own just banks the leftover width as an empty column
   beside the text, which is what happened in sections 2 and 3. Keep the
   measure, give it a real column, and let a figure take the other one. */
#suspensi .suspension-body p { max-width: 38em; }
.tax-shield-banner .tax-desc,
.tax-shield-banner ul { max-width: 38em; }

@media (min-width: 900px) {
  .suspension-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "quote media"
      "body  media";
    gap: 14px 32px;
    align-items: start;
  }
  .suspension-quote { grid-area: quote; margin-bottom: 0; }
  .suspension-body { grid-area: body; }
  .suspension-media {
    grid-area: media;
    max-width: none;
    margin: 0;
  }
}

@media (min-width: 1024px) {
  .tax-shield-banner {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    gap: 8px 32px;
    align-items: start;
  }
  .tax-shield-banner .tax-badge { grid-column: 1; justify-self: start; }
  .tax-shield-banner .tax-title { grid-column: 1; }
  .tax-shield-banner .tax-desc { grid-column: 1; }
  /* The four deduction points are the substance of this section, so they take
     the second column rather than stacking under the intro and banking 594px
     of empty space to their right. */
  .tax-shield-banner ul {
    grid-column: 2;
    grid-row: 1 / span 4;
    align-self: start;
    border-left: 1px solid var(--border);
  }
}
#galeri { padding-top: 36px; }
#suspensi { padding-block: 60px 52px; }
#soalan-lazim { padding-block: 44px 40px; }


/* ------------------------------------------------------------------
   Thank-you page (/terima-kasih/) layout.
   Layout only. Every colour, radius, font and border below comes from
   the :root tokens above. No page-local palette, no off-system hex,
   and no rounding in this block.
   ------------------------------------------------------------------ */
.tk-chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 20px;
}
.tk-chips > :last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
.tk-steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin-top: 24px;
}
.tk-step-num {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: var(--primary);
}
.tk-step-num::before {
  content: '/';
}
.tk-mono {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}
.tk-nav-back {
  padding: 9px 14px;
  font-size: 12px;
}
@media (min-width: 768px) {
  .tk-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 640px) {
  .tk-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tk-chips > :last-child:nth-child(odd) { grid-column: auto; }
}
@media (max-width: 640px) {
  .tk-nav-back { padding: 8px 12px; font-size: 11px; letter-spacing: 0.5px; }
}

/* ==========================================================================
   v4 ADDITIONS: announcement bar, hero telemetry strip, colour swatches
   ========================================================================== */

.announce-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 16px;
  background-color: var(--surface-dark);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-main);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  text-align: center;
  min-height: 36px;
  box-sizing: border-box;
}

.announce-bar strong {
  color: var(--text);
  font-weight: 600;
}

.announce-extra {
  display: none;
}

@media (min-width: 768px) {
  .announce-extra {
    display: inline;
  }
}

.announce-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--success);
  animation: none;
}



@media (prefers-reduced-motion: reduce) {
  .announce-dot { animation: none; }
}

.hero-telemetry {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 24px;
}

@media (min-width: 900px) {
  .hero-telemetry { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.hero-telemetry .spec-chip {
  padding: 10px 12px;
  gap: 3px;
}

.hero-telemetry .spec-chip-label {
  font-size: 11px;
  line-height: 1.5;
}
.hero-telemetry .spec-chip-val {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #FFFFFF;
}

.telemetry-sub {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-dim);
}

.swatch-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 14px;
}

@media (min-width: 768px) {
  .swatch-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.swatch-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.swatch-ring {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.swatch-core {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
}

.swatch-name {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.4px;
  line-height: 1.3;
  color: #FFFFFF;
  text-transform: uppercase;
}

.swatch-note {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-muted);
}