/* ================================================================
   HEX Blog — Article page

   Reference-grounded design (Linear's dark-mode long-form posts,
   Stripe's blog, and standard readability research: ~66 characters
   per line, 16px+ body text, 1.5–1.7 line-height):

   - One centered reading column, ~620px (~70cpl at 17px Barlow).
   - Plain, sentence-case headings — no uppercase, no letter-spacing,
     no decorative rule before them. Whitespace does the separating.
   - Enumerated content (benefits, myths, steps) is written as plain
     consecutive paragraphs with a bold lead-in, exactly like real
     editorial writing — never a bordered/boxed list.
   - The only two-column moments (ceramic-vs-PPF comparison, decision
     guide) are plain text in a CSS grid — no borders, no backgrounds.
   - The only "boxed" elements on the whole page are the two CTA
     banners, and even those are just hairline-separated, not filled.
   ================================================================ */

/* page-ceramic-coating.css (also loaded on blog pages) only sets
   body{padding-top}, no font-family — every other page template sets
   its own body{font-family:...}. Without this, a visitor who hasn't
   accepted cookies yet (so the Google Font never loads) gets whatever
   the browser picks as its default.
   On iOS/macOS Safari specifically, a bare generic `sans-serif` before
   the font loads resolves to the system font (San Francisco), and
   WebKit's per-script font-linking table substitutes a *different*
   font — a decorative script face — for italic Greek text in that
   font, since San Francisco has no true italic Greek design. Latin
   text in the same paragraph stays fine; only the Greek glyphs get
   the wrong (wide, unevenly-spaced) substitute. Naming Arial/Helvetica
   explicitly avoids that system-font lookup entirely — real Arial has
   a normal (non-decorative) Greek oblique on iOS. */
body{font-family:Barlow,Arial,Helvetica,sans-serif}

/* ── Reading progress bar ───────────────────────────────────────── */
.read-progress{position:fixed;top:0;left:0;height:2px;width:0%;background:linear-gradient(90deg,var(--gold-dark),var(--gold),var(--gold-bright));z-index:10001;transition:width .08s linear}

/* ── Breadcrumb ──────────────────────────────────────────────────── */
.article-breadcrumb{position:static;display:block;background:none;backdrop-filter:none;border-bottom:none;z-index:auto;max-width:1400px;margin:0 auto;padding:118px 80px 0}
.article-breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px 8px;font-family:'Barlow Condensed',sans-serif;font-size:11px;letter-spacing:1.5px}
.article-breadcrumb li{display:flex;align-items:center;gap:8px}
.article-breadcrumb li+li::before{content:'›';color:rgba(255,255,255,.2)}
.article-breadcrumb a{color:rgba(255,255,255,.4);text-decoration:none;text-transform:uppercase;transition:color .2s}
.article-breadcrumb a:hover{color:var(--gold)}
.article-breadcrumb span[aria-current]{color:rgba(255,255,255,.55);text-transform:none;letter-spacing:.2px}

/* ── Article header ──────────────────────────────────────────────── */
.article-header{max-width:760px;margin:0 auto;padding:26px 80px 0}
.article-header h1{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:clamp(30px,4vw,46px);line-height:1.15;letter-spacing:-.4px;text-transform:none;color:#fff;margin:16px 0 20px}
.article-dek{font-size:18px;line-height:1.6;color:var(--silver-dim);margin-bottom:28px;font-weight:300}
.article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:9px 0;padding:18px 0;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.article-meta-item{display:flex;align-items:center;gap:8px;font-family:'Barlow Condensed',sans-serif;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.42)}
.article-meta-item svg{width:14px;height:14px;color:var(--gold);opacity:.85;flex-shrink:0}
.article-meta-item:not(:first-child)::before{content:'';width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.15);flex-shrink:0;margin:0 10px 0 9px}
.article-meta-sep{display:none}

/* ── Hero image — contained, one image only ──────────────────────── */
.article-hero-media{max-width:900px;margin:40px auto 0;padding:0 80px}
.article-hero-media figure{margin:0}
.article-hero-media img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;filter:saturate(.95) brightness(.92);border-top:2px solid rgba(201,168,76,.5)}
.article-hero-media figcaption{font-family:'Barlow Condensed',sans-serif;font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:rgba(255,255,255,.28);margin-top:12px;text-align:center}

/* ── Layout: sticky TOC (sidebar) + body column ──────────────────── */
.article-layout{max-width:900px;margin:0 auto;padding:52px 80px 0;display:grid;grid-template-columns:180px 620px;justify-content:center;gap:56px;align-items:start}

.article-toc{position:sticky;top:118px}
.article-toc-label{font-family:'Barlow Condensed',sans-serif;font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:16px;opacity:.85}
.article-toc ol{list-style:none;border-left:1px solid rgba(255,255,255,.08)}
.article-toc a{display:block;padding:7px 0 7px 16px;margin-left:-1px;font-family:'Barlow Condensed',sans-serif;font-size:13px;line-height:1.4;color:rgba(255,255,255,.4);text-decoration:none;border-left:2px solid transparent;transition:color .2s,border-color .2s}
.article-toc a:hover{color:rgba(255,255,255,.75)}
.article-toc a.is-active{color:var(--gold);border-left-color:var(--gold)}
.article-toc-mobile{display:none}

/* ── Quick-summary (TL;DR) — same left-accent language as pull-quote ── */
.article-tldr{border-left:2px solid var(--gold);padding:16px 0 16px 22px;margin:8px 0 40px;background:rgba(201,168,76,.03)}
.article-tldr-label{font-family:'Barlow Condensed',sans-serif;font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:10px}
.article-tldr ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.article-tldr li{font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.65);padding-left:15px;position:relative}
.article-tldr li::before{content:'';position:absolute;left:0;top:8px;width:4px;height:4px;background:var(--gold);opacity:.8}

/* ── Comparison table (real <table> — machine-readable, no invented numbers;
   qualitative dot-levels are a visual layer on top of real words) ──── */
.article-table-wrap{margin:8px 0 44px;overflow-x:auto}
.article-table{width:100%;border-collapse:collapse;font-size:14.5px}
.article-table th,.article-table td{padding:13px 10px;border-bottom:1px solid rgba(255,255,255,.08);vertical-align:middle}
.article-table thead th{text-align:left;font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#fff;border-bottom:1px solid rgba(201,168,76,.35)}
.article-table thead th:not(:first-child){text-align:center}
.article-table tbody th{text-align:left;font-weight:600;color:rgba(255,255,255,.85);font-size:14px}
.article-table tbody td{text-align:center;color:rgba(255,255,255,.65)}
.article-table .lvl{display:inline-flex;align-items:center;gap:8px}
.article-table .lvl-bar{display:inline-flex;gap:3px;flex-shrink:0}
.article-table .lvl-bar .dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.14)}
.article-table .lvl-bar .dot.filled{background:var(--gold)}
.article-table .cell-yes{color:var(--gold);font-weight:700}
.article-table .cell-no{color:rgba(255,110,110,.85);font-weight:700}
.article-table-note{font-size:12.5px;line-height:1.6;color:rgba(255,255,255,.4);margin:12px 0 0;font-style:italic}
@media (max-width:600px){
  .article-table{font-size:13px}
  .article-table th,.article-table td{padding:10px 6px}
  .article-table .lvl{flex-direction:column;gap:4px}
}

/* ── Body column ─────────────────────────────────────────────────── */
.article-body{min-width:0;font-size:17px;line-height:1.7;color:rgba(255,255,255,.72);font-weight:300}
.article-body>p{margin-bottom:24px}
.article-lede{font-size:19px;line-height:1.65;color:rgba(255,255,255,.86);margin-bottom:26px;font-style:italic}
.article-body h2{scroll-margin-top:130px;font-family:'Barlow Condensed',sans-serif;font-size:clamp(23px,2.4vw,28px);font-weight:700;text-transform:none;letter-spacing:0;color:#fff;margin:64px 0 18px;line-height:1.25}
.article-body>h2:first-of-type{margin-top:0}
.article-body h3{font-family:'Barlow Condensed',sans-serif;font-size:19px;font-weight:700;text-transform:none;color:#fff;margin:32px 0 10px;line-height:1.3}
.article-body strong{color:#fff;font-weight:600}
.article-body a:not(.btn-gold):not(.btn-outline):not(.col-link){color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(201,168,76,.35)}
.article-body a:not(.btn-gold):not(.btn-outline):not(.col-link):hover{border-color:var(--gold)}
.glyph-no{color:rgba(255,110,110,.85);font-weight:700}
.glyph-yes{color:var(--gold);font-weight:700}

/* ── Two-column comparison (ceramic/PPF, decision guidance) ──────
   Plain text in a grid — no borders, no fill. */
.article-columns{display:grid;grid-template-columns:1fr 1fr;gap:8px 48px;margin:8px 0 32px}
.article-columns>div{display:flex;flex-direction:column}
.article-columns h4{font-family:'Barlow Condensed',sans-serif;font-size:17px;font-weight:700;text-transform:none;color:#fff;margin-bottom:14px}
.article-columns ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.article-columns li{font-size:15.5px;line-height:1.65;color:rgba(255,255,255,.62);display:flex;gap:8px}
.article-columns .col-link{display:inline-block;align-self:flex-start;margin-top:auto;padding-top:16px;color:var(--gold);font-family:'Barlow Condensed',sans-serif;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;text-decoration:none;border-bottom:1px solid rgba(201,168,76,.3);transition:color .2s,border-color .2s}
.article-columns .col-link:hover{color:var(--gold-bright);border-color:var(--gold-bright)}
@media (max-width:600px){.article-columns{grid-template-columns:1fr;gap:28px}}

/* ── Pull quote (one thin accent line, no box) ───────────────────── */
.pull-quote{border-left:2px solid var(--gold);padding:2px 0 2px 24px;margin:36px 0;font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:500;line-height:1.5;letter-spacing:.2px;color:#fff}

/* ── Mid-article CTA (rule-separated, not boxed) ─────────────────── */
.article-cta{margin:48px 0;padding:26px 0;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.article-cta-text{max-width:380px}
.article-cta-text span{display:block;font-size:11px;letter-spacing:2.5px;color:var(--gold);text-transform:uppercase;margin-bottom:8px;font-weight:700;font-family:'Barlow Condensed',sans-serif}
.article-cta-text p{font-family:'Barlow Condensed',sans-serif;font-size:17px;font-weight:600;color:#fff;letter-spacing:.2px;margin:0;line-height:1.3}
.article-cta .btn-gold{flex-shrink:0;padding:14px 28px;font-size:11px}

/* ── Sign-off / tags (plain text) ─────────────────────────────────── */
.article-signoff{margin-top:4px;padding-top:22px;border-top:1px solid rgba(255,255,255,.08);font-size:14px;line-height:1.7;color:rgba(255,255,255,.45);font-style:italic}
.article-signoff strong{color:rgba(255,255,255,.7);font-style:normal}
.article-tags-line{margin-top:12px;font-size:12.5px;color:rgba(255,255,255,.35)}
.article-tags-line span{color:var(--gold);text-transform:uppercase;letter-spacing:1px;font-family:'Barlow Condensed',sans-serif;margin-right:6px;font-size:11px}

/* ── "Continue reading" cross-link teaser ────────────────────────── */
.article-next{display:grid;grid-template-columns:170px 1fr;gap:22px;align-items:center;margin:48px 0 6px;border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1);padding:24px 0;text-decoration:none;color:inherit;transition:border-color .2s}
.article-next:hover{border-color:rgba(201,168,76,.35)}
.article-next img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;filter:saturate(.95) brightness(.9);transition:filter .3s}
.article-next:hover img{filter:saturate(1) brightness(1)}
.article-next-label{font-family:'Barlow Condensed',sans-serif;font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.article-next-title{font-family:'Barlow Condensed',sans-serif;font-size:19px;font-weight:700;color:#fff;line-height:1.25;margin-bottom:6px}
.article-next-desc{font-size:13.5px;color:rgba(255,255,255,.5);line-height:1.55}
@media (max-width:600px){.article-next{grid-template-columns:1fr;gap:14px}}

/* ── Final CTA (plain, same restrained language as the rest of the page —
   no box, no uppercase, no gradient fill) ───────────────────────── */
.article-final-cta{max-width:620px;margin:0 auto;padding:16px 80px 96px;text-align:center;border-top:1px solid rgba(255,255,255,.08)}
.final-cta-tag{font-family:'Barlow Condensed',sans-serif;font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin:44px 0 14px}
.final-cta-title{font-family:'Barlow Condensed',sans-serif;font-size:clamp(24px,2.6vw,30px);font-weight:700;text-transform:none;color:#fff;line-height:1.25;margin-bottom:12px}
.final-cta-sub{font-size:15px;line-height:1.6;color:rgba(255,255,255,.55);margin-bottom:28px}
.article-final-cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
@media (max-width:600px){.article-final-cta{padding:12px 24px 64px}.article-final-cta-btns{flex-direction:column;width:100%}.article-final-cta-btns a{width:100%;text-align:center}}

/* ── Blog listing page ───────────────────────────────────────────── */
.blog-index-header{max-width:760px;margin:0 auto;padding:26px 80px 8px}
.blog-index-header h1{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:clamp(30px,4vw,46px);line-height:1.15;letter-spacing:-.4px;text-transform:none;color:#fff;margin:16px 0 16px}
.blog-index-header p{font-size:17px;line-height:1.6;color:var(--silver-dim);font-weight:300}

.blog-grid{max-width:1400px;margin:0 auto;padding:48px 80px 100px;display:grid;grid-template-columns:repeat(2,1fr);gap:36px}
.blog-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.015);overflow:hidden;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.blog-card:hover{transform:translateY(-3px);border-color:rgba(201,168,76,.3);box-shadow:0 18px 36px rgba(0,0,0,.28)}
.blog-card img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;filter:saturate(.95) brightness(.88);transition:filter .3s}
.blog-card:hover img{filter:saturate(1) brightness(1)}
.blog-card-body{padding:26px 28px 28px;display:flex;flex-direction:column;flex:1}
.blog-card-tag{font-family:'Barlow Condensed',sans-serif;font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.blog-card-title{font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:700;color:#fff;line-height:1.25;margin-bottom:10px}
.blog-card-desc{font-size:14px;line-height:1.65;color:rgba(255,255,255,.55);margin-bottom:18px}
.blog-card-meta{display:flex;align-items:center;gap:12px;margin-top:auto;font-family:'Barlow Condensed',sans-serif;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.35)}
.blog-card-meta span:nth-child(2){width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.2);flex-shrink:0}
@media (max-width:900px){
  .blog-index-header,.blog-grid{padding-left:24px;padding-right:24px}
  .blog-grid{grid-template-columns:1fr;gap:24px}
}
/* ================================================================
   Responsive
   ================================================================ */
@media (max-width:1100px){
  .article-layout{grid-template-columns:minmax(0,620px);max-width:620px;padding-top:36px}
  .article-toc{display:none}
  .article-toc-mobile{display:block;margin-bottom:32px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.02)}
  .article-toc-mobile summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;padding:15px 18px;font-family:'Barlow Condensed',sans-serif;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:#fff}
  .article-toc-mobile summary::-webkit-details-marker{display:none}
  .article-toc-mobile summary::after{content:'+';color:var(--gold);font-size:18px;line-height:1}
  .article-toc-mobile[open] summary::after{content:'\2013'}
  .article-toc-mobile ol{list-style:none;padding:0 18px 16px;display:flex;flex-direction:column}
  .article-toc-mobile a{display:block;padding:9px 0;font-family:Barlow,sans-serif;font-size:13.5px;color:rgba(255,255,255,.55);text-decoration:none;border-top:1px solid rgba(255,255,255,.05)}
  .article-toc-mobile li:first-child a{border-top:none}
}
@media (max-width:900px){
  .article-breadcrumb,.article-header,.article-hero-media,.article-layout,.article-final-cta{padding-left:24px;padding-right:24px}
}
@media (max-width:600px){
  .article-breadcrumb{padding-top:100px}
  .article-header h1{margin:12px 0 16px}
  .article-dek{font-size:16px}
  .article-hero-media img{aspect-ratio:4/3}
  .article-layout{padding-top:28px}
  .article-body{font-size:16px}
  .article-body h2{margin-top:48px}
  .article-tldr{padding-left:16px}
  .pull-quote{font-size:18px;padding-left:16px}
  .article-cta{padding:22px 0}
  .article-cta .btn-gold{width:100%;text-align:center}
  .article-final-cta-inner{padding:40px 24px}
}