/* ============================================================
   ETABLIX — Marketing Site Stylesheet
   Palette: deep charcoal, safety orange, blueprint slate
   ============================================================ */

:root {
  /* ETABLIX system: premium charcoal, stone and bronze.
     The logo mark carries the deep-green + gold identity. */
  --ink: #191a1c;           /* charcoal */
  --ink-2: #222427;
  --ink-3: #2e3134;
  --paper: #f4f1ea;         /* stone */
  --white: #fdfcf9;
  --orange: #9c7a3c;        /* bronze (primary accent) */
  --orange-dark: #7c6130;   /* deep bronze */
  --amber: #c9a96a;         /* light bronze */
  --green: #0f3d2e;         /* logo deep green */
  --slate: #635f56;
  --slate-light: #98948a;
  --line: #e2ddd0;
  --line-dark: #3b3e42;
  --success: #1f9d61;
  --radius: 10px;
  --shadow: 0 12px 32px rgba(20, 24, 29, 0.10);
  --shadow-lg: 0 24px 60px rgba(20, 24, 29, 0.18);
  --font-display: "Barlow Condensed", "Archivo", system-ui, sans-serif;
  --font-head: "Archivo", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --max: 1180px;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
  font-size: 16.5px;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Typography ---------- */

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.015em;
}

h1 {
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 5.6rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.98;
}
h2 {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4vw, 3.2rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.04;
}
h3 { font-size: 1.28rem; }

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 16px;
}
.kicker::before {
  content: "";
  width: 34px;
  height: 3px;
  background: var(--orange);
}

.lead {
  font-size: 1.16rem;
  color: var(--slate);
  max-width: 46em;
}

.section {
  padding: 96px 0;
}
.section.tight { padding: 64px 0; }

.section-head {
  max-width: 760px;
  margin-bottom: 56px;
}
.section-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.section-head.center .kicker { justify-content: center; }
.section-head p {
  margin-top: 16px;
  color: var(--slate);
  font-size: 1.08rem;
}

.dark {
  background: var(--ink);
  color: var(--white);
}
.dark .section-head p, .dark .lead { color: var(--slate-light); }
.dark h2, .dark h3 { color: var(--white); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.98rem;
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }

.btn-primary {
  background: linear-gradient(160deg, #ddb84a, var(--orange) 55%, var(--orange-dark));
  color: #14200f;
}
.btn-primary:hover { background: var(--orange-dark); color: #fff; }

.btn-outline {
  border-color: var(--ink);
  color: var(--ink);
  background: transparent;
}
.btn-outline:hover { background: var(--ink); color: var(--white); }

.dark .btn-outline, .btn-outline.on-dark {
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--white);
}
.dark .btn-outline:hover, .btn-outline.on-dark:hover {
  background: var(--white);
  color: var(--ink);
  border-color: var(--white);
}

.btn-arrow::after { content: "→"; transition: transform 0.2s ease; }
.btn-arrow:hover::after { transform: translateX(4px); }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(20, 24, 29, 0.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-dark);
}

.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 74px;
  gap: 24px;
}

.logo {
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--white);
  display: flex;
  align-items: center;
  gap: 10px;
}
.logo .logo-mark {
  width: 38px;
  height: 38px;
  display: block;
  border-radius: 8px;
}
.logo .logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
  color: inherit;
}
.logo .logo-text small {
  font-family: var(--font-head);
  font-size: 0.53rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--amber);
  margin-top: 4px;
  white-space: nowrap;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}
.main-nav a {
  color: #cfd6dd;
  font-size: 0.94rem;
  font-weight: 600;
  padding: 10px 13px;
  border-radius: 6px;
  transition: color 0.2s ease, background 0.2s ease;
}
.main-nav a:hover { color: var(--white); background: rgba(255, 255, 255, 0.07); }
.main-nav a.active { color: var(--orange); }
.main-nav .nav-cta {
  margin-left: 10px;
  background: linear-gradient(160deg, #ddb84a, var(--orange) 55%, var(--orange-dark));
  color: #14200f;
  font-family: var(--font-head);
  font-weight: 700;
  padding: 11px 22px;
}
.main-nav .nav-cta:hover { background: var(--orange-dark); color: #fff; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 44px;
  height: 44px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2.5px;
  background: var(--white);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  background:
    linear-gradient(115deg, rgba(20, 24, 29, 0.97) 38%, rgba(20, 24, 29, 0.72)),
    repeating-linear-gradient(0deg, transparent, transparent 47px, rgba(156, 122, 60, 0.10) 47px, rgba(156, 122, 60, 0.10) 48px),
    repeating-linear-gradient(90deg, transparent, transparent 47px, rgba(156, 122, 60, 0.10) 47px, rgba(156, 122, 60, 0.10) 48px),
    var(--ink-2);
  color: var(--white);
  overflow: hidden;
}

.hero-inner {
  padding: 110px 0 90px;
  max-width: 820px;
}

.hero .eyebrow {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
  border: 1px solid rgba(255, 176, 32, 0.4);
  border-radius: 100px;
  padding: 8px 18px;
  margin-bottom: 26px;
}

.hero h1 em {
  font-style: normal;
  color: var(--orange);
}

.hero p {
  margin: 26px 0 38px;
  font-size: 1.22rem;
  color: #c3cad2;
  max-width: 40em;
}

.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }

.hero-strip {
  position: relative;
  border-top: 1px solid var(--line-dark);
  background: rgba(0, 0, 0, 0.25);
}
.hero-strip .container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding-top: 30px;
  padding-bottom: 30px;
}
.hero-strip .stat b {
  display: block;
  font-family: var(--font-head);
  font-size: 2rem;
  font-weight: 800;
  color: var(--white);
}
.hero-strip .stat span { font-size: 0.88rem; color: var(--slate-light); }

/* Page hero (interior pages) */
.page-hero {
  background:
    linear-gradient(115deg, rgba(20, 24, 29, 0.97) 45%, rgba(20, 24, 29, 0.8)),
    repeating-linear-gradient(45deg, transparent, transparent 34px, rgba(156, 122, 60, 0.08) 34px, rgba(156, 122, 60, 0.08) 36px),
    var(--ink-2);
  color: var(--white);
  padding: 88px 0 72px;
}
.page-hero .lead { margin-top: 20px; }
.page-hero .hero-actions { margin-top: 34px; }

.breadcrumb {
  font-size: 0.85rem;
  color: var(--slate-light);
  margin-bottom: 22px;
}
.breadcrumb a:hover { color: var(--orange); }

/* ---------- Cards / grids ---------- */

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px 30px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }

.card .icon {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  background: rgba(156, 122, 60, 0.1);
  color: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.card .icon svg { width: 26px; height: 26px; }

.card h3 { margin-bottom: 12px; }
.card p { color: var(--slate); font-size: 0.98rem; }
.card .card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--orange);
}
.card .card-link:hover { color: var(--orange-dark); }

.card ul {
  margin-top: 14px;
  list-style: none;
}
.card ul li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 8px;
  color: var(--slate);
  font-size: 0.95rem;
}
.card ul li::before {
  content: "▸";
  position: absolute;
  left: 0;
  color: var(--orange);
  font-weight: 700;
}

.dark .card {
  background: var(--ink-2);
  border-color: var(--line-dark);
}
.dark .card p, .dark .card ul li { color: var(--slate-light); }

/* ---------- Checklist ---------- */

.checklist { list-style: none; }
.checklist li {
  position: relative;
  padding-left: 34px;
  margin-bottom: 14px;
}
.checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 1px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(31, 157, 97, 0.13);
  color: var(--success);
  font-size: 0.8rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.checklist li b { display: block; }
.checklist li span { color: var(--slate); font-size: 0.95rem; }
.dark .checklist li span { color: var(--slate-light); }

/* ---------- Split layout ---------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.split .kicker { margin-bottom: 14px; }
.split h2 { margin-bottom: 18px; }
.split p { color: var(--slate); margin-bottom: 16px; }
.dark .split p { color: var(--slate-light); }

/* ---------- Product banner cards ---------- */

.product-banner {
  border-radius: 14px;
  padding: 96px 44px 48px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  overflow: hidden;
  color: var(--white);
  min-height: 380px;
  justify-content: flex-end;
  transition: transform 0.2s ease, box-shadow 0.25s ease;
}
.product-banner:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

.product-banner.construx {
  background:
    linear-gradient(160deg, rgba(20, 24, 29, 0.55), rgba(20, 24, 29, 0.92) 70%),
    repeating-linear-gradient(90deg, transparent, transparent 30px, rgba(156, 122, 60, 0.22) 30px, rgba(156, 122, 60, 0.22) 32px),
    linear-gradient(135deg, #2a323d, #1d232b);
}
.product-banner.veryx {
  background:
    linear-gradient(160deg, rgba(20, 24, 29, 0.55), rgba(20, 24, 29, 0.92) 70%),
    repeating-linear-gradient(0deg, transparent, transparent 30px, rgba(31, 157, 97, 0.25) 30px, rgba(31, 157, 97, 0.25) 32px),
    linear-gradient(135deg, #22303b, #17222b);
}

.product-banner .tag {
  position: absolute;
  top: 30px;
  left: 44px;
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 100px;
}
.construx .tag { background: var(--orange); }
.veryx .tag { background: var(--success); }

.product-banner h3 { font-size: 2rem; color: var(--white); }
.product-banner p { color: #c3cad2; max-width: 34em; }
.product-banner .card-link { color: var(--amber); font-family: var(--font-head); font-weight: 700; }

/* ---------- Feature table ---------- */

.spec-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.spec-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; min-width: 640px; }
.spec-table th, .spec-table td {
  text-align: left;
  padding: 15px 20px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.spec-table th {
  font-family: var(--font-head);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
  background: #f0eee8;
}
.spec-table tr:last-child td { border-bottom: none; }
.spec-table td:first-child { font-weight: 600; white-space: nowrap; }

/* ---------- Process steps ---------- */

.steps { counter-reset: step; display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.step {
  counter-increment: step;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 26px;
  position: relative;
}
.step::before {
  content: "0" counter(step);
  font-family: var(--font-head);
  font-size: 2.4rem;
  font-weight: 900;
  color: rgba(156, 122, 60, 0.22);
  display: block;
  margin-bottom: 10px;
  line-height: 1;
}
.step h3 { font-size: 1.08rem; margin-bottom: 8px; }
.step p { font-size: 0.92rem; color: var(--slate); }
.dark .step { background: var(--ink-2); border-color: var(--line-dark); }
.dark .step p { color: var(--slate-light); }

/* ---------- Sector tiles ---------- */

.sector {
  border-radius: var(--radius);
  padding: 30px 26px;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 4px solid var(--orange);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.sector:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.sector h3 { font-size: 1.05rem; margin-bottom: 8px; }
.sector p { font-size: 0.9rem; color: var(--slate); }

/* ---------- Quote / testimonial ---------- */

.quote-card {
  background: var(--ink-2);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  padding: 36px 32px;
}
.quote-card blockquote {
  font-size: 1.05rem;
  color: #dfe4e9;
  margin-bottom: 22px;
}
.quote-card blockquote::before { content: "“"; color: var(--orange); font-size: 1.6em; line-height: 0; margin-right: 2px; }
.quote-card cite {
  font-style: normal;
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--white);
  display: block;
  font-size: 0.95rem;
}
.quote-card cite span {
  display: block;
  font-weight: 500;
  color: var(--slate-light);
  font-size: 0.85rem;
  margin-top: 2px;
}

/* ---------- CTA band ---------- */

.cta-band {
  background:
    linear-gradient(115deg, rgba(212, 85, 12, 0.96), rgba(156, 122, 60, 0.9)),
    repeating-linear-gradient(45deg, transparent, transparent 26px, rgba(255, 255, 255, 0.09) 26px, rgba(255, 255, 255, 0.09) 28px),
    var(--orange);
  color: var(--white);
  padding: 84px 0;
  text-align: center;
}
.cta-band h2 { color: var(--white); max-width: 22em; margin: 0 auto 18px; }
.cta-band p { max-width: 40em; margin: 0 auto 34px; color: rgba(255, 255, 255, 0.92); font-size: 1.1rem; }
.cta-band .btn-primary { background: var(--ink); color: #fff; }
.cta-band .btn-primary:hover { background: #000; color: #fff; }
.cta-band .btn-outline { border-color: rgba(255, 255, 255, 0.7); color: var(--white); }
.cta-band .btn-outline:hover { background: var(--white); color: var(--orange-dark); border-color: var(--white); }
.cta-band .hero-actions { justify-content: center; }

/* ---------- Forms ---------- */

.form-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 44px 40px;
  box-shadow: var(--shadow);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.form-field { display: flex; flex-direction: column; gap: 7px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
}
.form-field input, .form-field select, .form-field textarea {
  font-family: var(--font-body);
  font-size: 0.98rem;
  padding: 13px 15px;
  border: 1.5px solid var(--line);
  border-radius: 7px;
  background: var(--paper);
  color: var(--ink);
  transition: border-color 0.2s ease;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none;
  border-color: var(--orange);
}
.form-field textarea { resize: vertical; min-height: 120px; }
.form-note { font-size: 0.83rem; color: var(--slate); margin-top: 14px; }
/* Services-you-provide checkbox grid on the supplier registration form. */
.cap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px 14px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  padding: 14px 16px;
  background: var(--white);
}
.cap-opt {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 0.88rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  line-height: 1.35;
}
.cap-opt input {
  width: 17px;
  height: 17px;
  accent-color: var(--orange);
  margin-top: 1px;
  flex-shrink: 0;
}
.cap-opt input:disabled + span { opacity: 0.45; }
.cap-count { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--slate); }

/* Honeypot — invisible to people, present for bots. Kept off-screen
   (not display:none) so naive scripts still see and fill it. */
.hp-field {
  position: absolute !important;
  left: -6000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.human-note { font-size: 0.78rem; color: var(--slate); margin-top: 12px; opacity: 0.8; }
.form-success {
  background: rgba(31, 157, 97, 0.1);
  border: 1.5px solid var(--success);
  color: var(--success);
  border-radius: 8px;
  padding: 16px 20px;
  font-weight: 600;
  margin-top: 18px;
}

/* ---------- Accordion ---------- */

.accordion { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--white); }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion details:last-child { border-bottom: none; }
.accordion summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 24px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: "+";
  font-size: 1.4rem;
  color: var(--orange);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.accordion details[open] summary::after { transform: rotate(45deg); }
.accordion .acc-body { padding: 0 24px 22px; color: var(--slate); font-size: 0.97rem; }

/* ---------- Logos band ---------- */

.trust-band {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--white);
  padding: 34px 0;
}
.trust-band .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px 48px;
}
.trust-band .trust-label {
  font-family: var(--font-head);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
}
.trust-band .badge {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1rem;
  color: var(--slate);
  opacity: 0.75;
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--ink);
  color: var(--slate-light);
  padding: 70px 0 0;
  border-top: 4px solid var(--orange);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 44px;
  padding-bottom: 54px;
}
.site-footer h4 {
  color: var(--white);
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.site-footer ul { list-style: none; }
.site-footer ul li { margin-bottom: 11px; font-size: 0.94rem; }
.site-footer a:hover { color: var(--orange); }
.footer-about p { font-size: 0.94rem; margin: 18px 0; max-width: 30em; }
.footer-bottom {
  border-top: 1px solid var(--line-dark);
  padding: 22px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.85rem;
}

/* ---------- Cinematic hero ---------- */

.hero-cinema {
  position: relative;
  min-height: 94vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--white);
  overflow: hidden;
  background: #070b16;
}
.hero-cinema .scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}
.hero-cinema .scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(7,11,22,0.72) 0%, rgba(7,11,22,0.08) 42%, rgba(5,7,12,0.82) 100%),
    linear-gradient(100deg, rgba(7,11,22,0.85) 0%, rgba(7,11,22,0.25) 55%, rgba(7,11,22,0) 100%);
}
.hero-cinema .container { position: relative; z-index: 2; }
.hero-cinema .hero-copy { padding: 150px 0 120px; max-width: 900px; }
.hero-cinema .slate {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-head);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #d9c9a8;
  margin-bottom: 28px;
}
.hero-cinema .slate::before { content: ""; width: 46px; height: 1px; background: var(--orange); }
.hero-cinema h1 { text-shadow: 0 4px 40px rgba(0,0,0,0.5); }
.hero-cinema h1 em { font-style: normal; color: var(--orange); }
.hero-cinema .hero-sub {
  margin: 30px 0 40px;
  font-size: 1.18rem;
  line-height: 1.7;
  color: #d5d9df;
  max-width: 620px;
  text-shadow: 0 2px 20px rgba(0,0,0,0.6);
}
.hero-cinema .hero-meta {
  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(255,255,255,0.14);
  background: rgba(5,7,12,0.55);
  backdrop-filter: blur(6px);
}
.hero-cinema .hero-meta .container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding-top: 26px;
  padding-bottom: 26px;
}
.hero-cinema .hero-meta b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.hero-cinema .hero-meta span { font-size: 0.82rem; color: var(--slate-light); }

/* ---------- Editorial section labels ---------- */

.sec-label {
  display: flex;
  align-items: baseline;
  gap: 18px;
  border-top: 2px solid var(--ink);
  padding-top: 16px;
  margin-bottom: 34px;
}
.dark .sec-label { border-top-color: rgba(255,255,255,0.25); }
.sec-label .num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--orange);
  letter-spacing: 0.06em;
}
.sec-label .lbl {
  font-family: var(--font-head);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--slate);
}
.dark .sec-label .lbl { color: var(--slate-light); }

/* ---------- Framework charts ---------- */

.chart-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 26px 26px 20px;
}
.dark .chart-card { background: var(--ink-2); border-color: var(--line-dark); }
.chart-card h3 { margin-bottom: 4px; }
.chart-card .chart-sub { font-size: 0.85rem; color: var(--slate); margin-bottom: 16px; }
.dark .chart-card .chart-sub { color: var(--slate-light); }
.chart-card svg { width: 100%; height: auto; display: block; }
.chart-tagline {
  font-size: 0.88rem;
  color: var(--slate);
  border-top: 1px solid var(--line);
  margin-top: 16px;
  padding-top: 12px;
}
.dark .chart-tagline { color: var(--slate-light); border-color: var(--line-dark); }

/* ---------- Offer rows (editorial numbered) ---------- */

.offer-row {
  display: grid;
  grid-template-columns: 110px 1.4fr 1fr;
  gap: 28px;
  padding: 34px 0;
  border-top: 1px solid var(--line);
}
.offer-row:last-child { border-bottom: 1px solid var(--line); }
.offer-row .offer-num {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 700;
  color: rgba(156,122,60,0.85);
  line-height: 1;
}
.offer-row h3 { margin-bottom: 10px; font-size: 1.2rem; }
.offer-row p { color: var(--slate); font-size: 0.97rem; }
.offer-row .benefit {
  background: #f0eee8;
  border-left: 3px solid var(--orange);
  border-radius: 6px;
  padding: 18px 20px;
  align-self: start;
}
.offer-row .benefit .b-label {
  font-family: var(--font-head);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange-dark);
  display: block;
  margin-bottom: 6px;
}
.offer-row .benefit p { font-size: 0.92rem; margin: 0; }
@media (max-width: 860px) {
  .offer-row { grid-template-columns: 1fr; gap: 14px; padding: 26px 0; }
  .offer-row .offer-num { font-size: 2rem; }
}

/* ---------- Comparison table ---------- */

.compare-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--white); }
.compare { width: 100%; border-collapse: collapse; min-width: 720px; font-size: 0.93rem; }
.compare th, .compare td { text-align: left; padding: 16px 20px; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare th {
  font-family: var(--font-head); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; background: #f0eee8; color: var(--slate);
}
.compare th:last-child { color: var(--orange-dark); }
.compare td:first-child { font-weight: 700; white-space: nowrap; }
.compare td:nth-child(2) { color: var(--slate); }
.compare td:last-child { color: var(--ink); background: rgba(156,122,60,0.045); }
.compare tr:last-child td { border-bottom: none; }

/* ---------- Topline ---------- */

.topline {
  background: #0e1116;
  color: var(--slate-light);
  font-family: var(--font-head);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  padding: 8px 16px;
}
.topline b { color: var(--amber); font-weight: 700; }

/* ---------- Lifecycle strip ---------- */

.lifecycle {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 6px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
}
.lifecycle span.stage {
  background: var(--ink-2);
  color: var(--white);
  border: 1px solid var(--line-dark);
  border-radius: 6px;
  padding: 10px 18px;
}
.lifecycle span.arrow { color: var(--orange); font-size: 1.1rem; }
.section:not(.dark) .lifecycle span.stage {
  background: var(--white);
  color: var(--ink);
  border-color: var(--line);
}

/* ---------- Engagement model cards ---------- */

.model-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px 30px;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.model-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.model-card.featured { border: 2px solid var(--orange); position: relative; }
.model-card .model-tag {
  font-family: var(--font-head);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 14px;
}
.model-card h3 { font-size: 1.4rem; margin-bottom: 12px; }
.model-card > p { color: var(--slate); font-size: 0.96rem; margin-bottom: 18px; }
.model-card ul { list-style: none; margin-bottom: 22px; }
.model-card ul li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 9px;
  color: var(--slate);
  font-size: 0.94rem;
}
.model-card ul li::before { content: "▸"; position: absolute; left: 0; color: var(--orange); font-weight: 700; }
.model-card .model-price {
  margin-top: auto;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 0.95rem;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}
.dark .model-card { background: var(--ink-2); border-color: var(--line-dark); }
.dark .model-card > p, .dark .model-card ul li { color: var(--slate-light); }
.dark .model-card .model-price { border-color: var(--line-dark); color: var(--white); }

/* ---------- Fit strip ---------- */

.fit-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px 40px;
  background: var(--ink);
  border-radius: 12px;
  padding: 26px 30px;
  margin-top: 44px;
}
.fit-strip .fit-label {
  font-family: var(--font-head);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber);
}
.fit-strip .fit-item { text-align: center; }
.fit-strip .fit-item b {
  display: block;
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--white);
}
.fit-strip .fit-item span { font-size: 0.8rem; color: var(--slate-light); }

/* ---------- Founder ---------- */

.founder-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 5px solid var(--orange);
  border-radius: var(--radius);
  padding: 34px 32px;
}
.founder-card .role {
  font-family: var(--font-head);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
}
.founder-card h3 { font-size: 1.5rem; margin: 8px 0 2px; }
.founder-card .creds { color: var(--slate); font-weight: 600; font-size: 0.92rem; margin-bottom: 16px; }
.founder-card ul { list-style: none; }
.founder-card ul li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 8px;
  color: var(--slate);
  font-size: 0.94rem;
}
.founder-card ul li::before { content: "—"; position: absolute; left: 0; color: var(--orange); }
.dark .founder-card { background: var(--ink-2); border-color: var(--line-dark); border-left-color: var(--orange); }
.dark .founder-card .creds, .dark .founder-card ul li { color: var(--slate-light); }

/* ---------- Disclaimers ---------- */

.disclaimer {
  font-size: 0.82rem;
  color: var(--slate-light);
  font-style: italic;
  max-width: 56em;
  margin-top: 18px;
}

/* ---------- Policy pages ---------- */

.policy-body {
  max-width: 800px;
  margin: 0 auto;
}
.policy-body h2 {
  font-size: 1.45rem;
  margin: 44px 0 14px;
}
.policy-body h2:first-child { margin-top: 0; }
.policy-body h3 { font-size: 1.08rem; margin: 26px 0 10px; }
.policy-body p { color: var(--slate); margin-bottom: 14px; }
.policy-body ul, .policy-body ol { margin: 0 0 16px 22px; color: var(--slate); }
.policy-body ul li, .policy-body ol li { margin-bottom: 8px; }
.policy-body .policy-meta {
  font-size: 0.85rem;
  color: var(--slate-light);
  border-bottom: 1px solid var(--line);
  padding-bottom: 18px;
  margin-bottom: 34px;
}
.policy-body table { width: 100%; border-collapse: collapse; font-size: 0.92rem; margin-bottom: 18px; }
.policy-body th, .policy-body td { text-align: left; padding: 10px 12px; border: 1px solid var(--line); vertical-align: top; color: var(--slate); }
.policy-body th { background: #f0eee8; color: var(--ink); font-family: var(--font-head); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; }

/* ---------- Scene gallery ---------- */

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.gallery figure {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--ink);
  box-shadow: var(--shadow);
}
.gallery img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.gallery figure:hover img { transform: scale(1.03); }
.gallery figcaption {
  padding: 14px 18px;
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amber);
  background: var(--ink);
}
@media (max-width: 860px) {
  .gallery { grid-template-columns: 1fr; }
  .gallery img { height: 220px; }
}

/* ---------- Reveal animation ---------- */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Responsive ---------- */

@media (max-width: 1020px) {
  .grid-4, .steps { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; gap: 40px; }
  .hero-strip .container { grid-template-columns: repeat(2, 1fr); }

  .nav-toggle { display: flex; }
  .main-nav {
    position: absolute;
    top: 74px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--ink);
    border-bottom: 1px solid var(--line-dark);
    padding: 14px 20px 22px;
    display: none;
  }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 13px 14px; }
  .main-nav .nav-cta { margin: 10px 0 0; text-align: center; }
  .nav-toggle.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
}

@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4, .steps { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .section { padding: 68px 0; }
  .hero-inner { padding: 80px 0 64px; }
  .product-banner { padding: 36px 26px; min-height: 320px; }
  .product-banner .tag { left: 26px; }
  .form-card { padding: 32px 22px; }
}

/* ============================================================
   V2 — PREMIUM REFINEMENT LAYER
   Architectural geometry, filmic texture, cinematic photo grade.
   Appended as an override layer: later rules win the cascade.
   ============================================================ */

:root {
  --radius: 3px;
  --shadow: 0 10px 28px rgba(20, 24, 29, 0.09);
  --shadow-lg: 0 22px 54px rgba(20, 24, 29, 0.16);
}

/* Film grain over the whole page — kills the flat vector look. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  pointer-events: none;
  opacity: 0.042;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
}

::selection { background: #c9a35c; color: #14181d; }

h1, h2 { letter-spacing: -0.015em; }
.hero-cinema .hero-meta b, .fit-item b { font-variant-numeric: tabular-nums; }

:focus-visible { outline: 2px solid #c9a35c; outline-offset: 2px; }

html { scrollbar-color: #3b3e42 #191a1c; }

/* --- Buttons: flat, confident, engineered --- */
.btn {
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.86rem;
  padding: 16px 30px;
}
.btn:hover { transform: none; }
.btn-primary { background: #c9a35c; color: #14181d; }
.btn-primary:hover { background: var(--ink); color: #fff; }
.dark .btn-primary:hover, .hero-cinema .btn-primary:hover { background: #fff; color: var(--ink); }

/* --- Cards: quieter motion, sharper edges, warmer paper --- */
.card { border-radius: var(--radius); }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.card .icon { border-radius: 2px; }

/* --- Sharpen every remaining rounded element --- */
.compare-wrap, .gallery figure, .form-card, .accordion, .spec-table-wrap,
.model-card, .chart-card, .founder-card, .quote-card, .product-banner { border-radius: var(--radius); }
.form-field input, .form-field select, .form-field textarea { border-radius: 2px; }

/* --- Cinematic grade on all scene imagery --- */
.hero-cinema .scene { filter: sepia(0.10) saturate(0.86) contrast(1.07) brightness(0.97); }
.hero-cinema::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(130% 100% at 50% 0%, transparent 55%, rgba(4, 6, 10, 0.42) 100%),
    linear-gradient(15deg, rgba(201, 163, 92, 0.10) 0%, transparent 35%);
}
.gallery figure { position: relative; box-shadow: var(--shadow); }
.gallery img { filter: sepia(0.12) saturate(0.84) contrast(1.08) brightness(0.96); }
.gallery figure::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 95% at 50% 15%, transparent 52%, rgba(8, 10, 14, 0.4) 100%),
    linear-gradient(200deg, rgba(201, 163, 92, 0.09), transparent 45%);
}
.gallery figcaption { position: relative; z-index: 1; border-top: 1px solid rgba(201, 169, 106, 0.25); }

/* --- CTA band: charcoal and gold, no template stripes --- */
.cta-band {
  background:
    radial-gradient(90% 130% at 50% -20%, rgba(156, 122, 60, 0.28), transparent 60%),
    linear-gradient(180deg, #1b2026, #14181d);
  border-top: 1px solid rgba(201, 169, 106, 0.35);
  position: relative;
}
.cta-band::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 3px;
  background: linear-gradient(90deg, #ddb84a, #9c7a3c);
}
.cta-band p { color: #b9c0c8; }
.cta-band .btn-primary { background: #c9a35c; color: #14181d; }
.cta-band .btn-primary:hover { background: #fff; color: #14181d; }
.cta-band .btn-outline { border-color: rgba(255, 255, 255, 0.4); }

/* --- Navigation: engraved hover, not browser-default --- */
.main-nav a { position: relative; }
.main-nav a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 2px;
  background: #c9a35c;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s ease;
}
.main-nav a:not(.nav-cta):hover::after { transform: scaleX(1); }
.nav-cta { border-radius: 2px; }

/* --- Tables read like documents, not widgets --- */
.compare th { letter-spacing: 0.06em; }
.compare tr:hover td { background: rgba(156, 122, 60, 0.03); }

/* --- Footer: hairline discipline --- */
.site-footer { border-top: 3px solid #9c7a3c; }
.main-nav .nav-cta { background: #c9a35c; color: #14181d; }
.main-nav .nav-cta:hover { background: #fff; color: #14181d; }

/* ---------- Field notes (blog) ----------
   The index cards, the post body, the generated contents list, the FAQ and
   the related-post grid. The prose container is .policy-body, reused rather
   than reinvented, so a post reads like the rest of the site. */

.post-list { display: grid; gap: 18px; }
.post-card {
  display: block; padding: 26px 28px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--white); text-decoration: none; transition: border-color .2s, box-shadow .2s, transform .2s;
}
.post-card:hover { border-color: var(--orange); box-shadow: var(--shadow); transform: translateY(-2px); }
.post-card-topic {
  display: inline-block; font-family: var(--font-head); font-size: 0.68rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--orange); margin-bottom: 10px;
}
.post-card h2 { font-size: 1.42rem; line-height: 1.24; margin: 0 0 10px; color: var(--ink); }
.post-card p { color: var(--slate); margin: 0 0 14px; font-size: 0.98rem; }
.post-card-meta { font-size: 0.8rem; color: var(--slate-light); font-family: var(--font-head); letter-spacing: 0.04em; }

.post-meta { font-size: 0.86rem; color: var(--slate-light); margin-top: 18px; }
.post-meta a { color: var(--amber); }

.post-body .lede { font-size: 1.14rem; line-height: 1.7; color: var(--ink); border-left: 3px solid var(--orange); padding-left: 18px; margin-bottom: 30px; }
.post-body h2 { scroll-margin-top: 90px; }
.post-body h3 { scroll-margin-top: 90px; color: var(--ink); }
.post-body strong { color: var(--ink); }
.post-body a { color: var(--orange-dark); text-underline-offset: 3px; }
.post-body a:hover { color: var(--orange); }

.post-toc { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 24px; margin: 0 0 36px; background: #faf8f3; }
.post-toc .toc-head { font-family: var(--font-head); font-size: 0.72rem !important; letter-spacing: 0.16em; text-transform: uppercase; color: var(--slate-light); margin: 0 0 12px !important; }
.post-toc ol { list-style: none; margin: 0 !important; padding: 0; counter-reset: toc; }
.post-toc li { margin-bottom: 6px !important; font-size: 0.92rem; }
.post-toc li.lvl-3 { padding-left: 18px; font-size: 0.86rem; }
.post-toc a { color: var(--slate); text-decoration: none; }
.post-toc a:hover { color: var(--orange-dark); text-decoration: underline; }

.post-faq { margin-top: 52px; }
.faq-item { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 20px; margin-bottom: 10px; background: var(--white); }
.faq-item summary { cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h3 { display: inline; margin: 0 !important; font-size: 1rem; }
.faq-item[open] summary h3 { color: var(--orange-dark); }
.faq-item p { margin: 12px 0 2px !important; }

.post-explore { margin-top: 52px; border-top: 1px solid var(--line); padding-top: 28px; }
.post-explore ul { list-style: none; margin-left: 0 !important; }
.post-explore li { padding-left: 18px; position: relative; }
.post-explore li::before { content: "\2192"; position: absolute; left: 0; color: var(--orange); }

.post-sources { margin-top: 46px; }
.post-sources ol { font-size: 0.92rem; }
.muted-note { font-size: 0.86rem; color: var(--slate-light); }

.author-card { margin-top: 46px; border: 1px solid var(--line); border-left: 4px solid var(--orange); border-radius: var(--radius); padding: 22px 26px; background: #faf8f3; }
.author-card h2 { font-size: 0.72rem !important; letter-spacing: 0.16em; text-transform: uppercase; color: var(--slate-light); margin: 0 0 10px !important; font-family: var(--font-head); }
.author-card p { margin: 0 !important; font-size: 0.94rem; }

.post-share { margin-top: 32px; display: flex; gap: 14px; align-items: center; font-size: 0.84rem; font-family: var(--font-head); letter-spacing: 0.06em; text-transform: uppercase; }
.post-share span { color: var(--slate-light); font-size: 0.7rem; }
.post-share a { color: var(--orange-dark); text-decoration: none; border-bottom: 1px solid var(--line); }
.post-share a:hover { border-color: var(--orange); }

.post-related { margin-top: 52px; border-top: 1px solid var(--line); padding-top: 28px; }
.related-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.related-card { display: block; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; background: var(--white); }
.related-card:hover { border-color: var(--orange); }
.related-date { display: block; font-size: 0.72rem; color: var(--slate-light); font-family: var(--font-head); letter-spacing: 0.08em; text-transform: uppercase; }
.related-title { display: block; font-family: var(--font-head); font-weight: 800; color: var(--ink); margin: 6px 0 6px; line-height: 1.3; font-size: 1rem; }
.related-desc { display: block; font-size: 0.86rem; color: var(--slate); }

@media (max-width: 640px) {
  .post-body .lede { font-size: 1.05rem; }
  .post-card { padding: 20px 20px; }
  .post-card h2 { font-size: 1.2rem; }
}

/* The section labels are the section headings — they were divs, which gave
   every page an outline that jumped from h1 straight to h3. As <h2> they need
   the browser's default heading margin and weight removed, because the spans
   inside already carry the type. */
h2.sec-label { margin-top: 0; font-size: 1rem; font-weight: 400; }
/* A heading that is a level in the outline but reads at the size below it. */
h2.as-h3 { font-size: 1.08rem; margin: 26px 0 10px; }

/* ============================================================
   PHONE LAYOUT — the pages that panned sideways
   ============================================================

   Eight of the fifteen public pages overflowed the viewport on a 390px
   phone, by up to 170px, and the internal portal by 574px. A page that
   pans sideways is not a cosmetic problem: the reader loses the right-hand
   edge of every line, and Google indexes the mobile rendering rather than
   the desktop one, so it is also the version that gets ranked.

   THE CAUSE WAS ONE RULE OF CSS, NOT EIGHT DESIGN MISTAKES. A grid or flex
   child has `min-width: auto`, which means a track cannot shrink below the
   widest unbreakable thing inside it. `.compare` carries `min-width: 720px`
   and sits inside `.compare-wrap`, which has `overflow-x: auto` and should
   have absorbed it — but the wrapper is itself a grid child, so instead of
   scrolling, the 720px propagated up through `.reveal`, `.split` and
   `.container` and pushed the whole page out. The scroll wrappers were
   correct all along; they were never allowed to do their job.

   So the fix is `min-width: 0` on the children that hold them, and the
   wrappers start scrolling. Nothing here hides an overflow with
   `overflow-x: hidden` on the body — that removes the scrollbar and keeps
   the broken layout, which is the version of this fix that looks like it
   worked. */

.split > *,
.grid-2 > *, .grid-3 > *, .grid-4 > *,
.steps > *, .hero-actions > *,
.form-grid > *, .offer-row > *, .gallery > *,
.footer-grid > *, .hero-strip .container > * {
  min-width: 0;
}

/* The scroll wrappers, now that they are allowed to scroll. */
.compare-wrap, .spec-table-wrap, .table-wrap {
  max-width: 100%;
  min-width: 0;
}

/* Anything preformatted scrolls rather than stretching the page. */
pre, .code-block {
  max-width: 100%;
  overflow-x: auto;
}

/* A URL or a reference with no spaces in it is the other way a line pushes
   a column wider than the screen. */
p, li, td, th, dd, .card, .reveal,
h1, h2, h3, h4, h5, blockquote, figcaption { overflow-wrap: break-word; }

@media (max-width: 640px) {
  /* A button label that cannot wrap is a button wider than the phone. */
  .btn { white-space: normal; text-align: center; }
  /* The first column of every comparison table was nowrap, which set the
     table's minimum width on its longest row label. */
  .compare td:first-child { white-space: normal; }
  /* 24px each side of a 390px screen leaves 342px of line. 18px is enough
     of a gutter and gives the text back 12px. */
  .container { padding: 0 18px; }
}