/* ═══════════════════════════════════════════════════════════════
   BEAUTIFUL BIKE — style.css
   Design tokens extraits du handoff Claude Design
   ═══════════════════════════════════════════════════════════════ */

/* ── TOKENS ── */
:root {
  --cream:         #F2EDE3;
  --cream-deep:    #EAE2D2;
  --paper:         #FBF7EF;
  --forest:        #2A3D2C;
  --forest-deep:   #1C2A1E;
  --olive:         #5E6B3D;
  --terracotta:    #B85C3E;
  --terracotta-deep:#984A30;
  --ink:           #1F1B16;
  --muted:         #7A6F5F;
  --hairline:      rgba(31,27,22,0.14);
  --hairline-soft: rgba(31,27,22,0.08);
  --serif: "Instrument Serif","Cormorant Garamond",Georgia,serif;
  --sans:  "DM Sans",system-ui,-apple-system,sans-serif;
  --radius-card: 6px;
  --radius-btn:  999px;
  --transition:  .2s ease;
}

/* ── RESET ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; scroll-padding-top:80px; }
body {
  font-family: var(--sans);
  background: var(--cream);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display:block; max-width:100%; height:auto; }
a  { color:inherit; text-decoration:none; }

/* ── LAYOUT ── */
.container {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 40px;
}

/* ── TYPOGRAPHY ── */
.eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--olive);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content:"";
  width:28px; height:1px;
  background:var(--olive);
  display:inline-block;
}
h1,h2,h3 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--forest-deep);
  text-wrap: balance;
}
h1 { font-size: clamp(48px,6vw,88px); line-height:1.02; }
h2 { font-size: clamp(36px,4.4vw,60px); line-height:1.05; }
h3 { font-size: 28px; line-height:1.15; }
.italic { font-style:italic; }
p.lede { font-size:18px; line-height:1.6; color:var(--ink); max-width:48ch; }

/* ── BUTTONS ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: var(--radius-btn);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
  border: 1px solid transparent;
  white-space: nowrap;
  text-decoration: none;
}
.btn:hover { transform:translateY(-1px); }
.btn-primary { background:var(--forest); color:var(--paper); }
.btn-primary:hover { background:var(--forest-deep); }
.btn-secondary { background:transparent; color:var(--forest); border-color:var(--forest); }
.btn-secondary:hover { background:var(--forest); color:var(--paper); }
.btn-tertiary { background:transparent; color:var(--ink); padding:8px 0; border-bottom:1px solid var(--ink); border-radius:0; }
.arrow { display:inline-block; transition:transform var(--transition); }
.btn:hover .arrow { transform:translateX(3px); }

/* ── NAV ── */
nav.top {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(242,237,227,0.86);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--hairline-soft);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
}
.brand {
  display:flex; align-items:center; gap:12px;
  font-family:var(--serif); font-size:24px; color:var(--forest-deep);
}
.brand-mark {
  width:36px; height:36px; border-radius:50%;
  background:var(--forest); color:var(--cream);
  display:grid; place-items:center;
  font-family:var(--serif); font-style:italic; font-size:20px;
  flex-shrink:0;
}
.brand small {
  display:block; font-family:var(--sans); font-size:10px;
  color:var(--muted); letter-spacing:0.22em; text-transform:uppercase; margin-top:-2px;
}
.nav-links {
  display:flex; gap:36px; list-style:none;
}
.nav-links a {
  font-size:14px; color:var(--ink); padding:4px 0;
  transition:color var(--transition);
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color:var(--terracotta); }
.nav-actions { display:flex; align-items:center; gap:16px; }

/* Burger */
.burger {
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:4px;
}
.burger span {
  display:block; width:22px; height:2px;
  background:var(--ink); border-radius:2px;
  transition:transform var(--transition), opacity var(--transition);
}
.burger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity:0; }
.burger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ── HERO ── */
.hero { padding:56px 0 80px; position:relative; }
.hero-grid { display:grid; grid-template-columns:1fr 1.25fr; gap:56px; align-items:end; }
.hero-text { padding-bottom:32px; }
.hero-text h1 { margin:24px 0 28px; }
.hero-text h1 .accent { color:var(--terracotta); font-style:italic; }
.hero-cta-row { display:flex; align-items:center; gap:16px; margin-top:32px; flex-wrap:wrap; }
.hero-image-wrap {
  position:relative; aspect-ratio:4/5;
  border-radius:4px; overflow:hidden;
  background:var(--cream-deep);
}
.hero-image-wrap img { width:100%; height:100%; object-fit:cover; }
.hero-tag {
  position:absolute; left:24px; bottom:24px;
  background:rgba(28,42,30,0.78); backdrop-filter:blur(8px);
  color:var(--cream); padding:14px 18px; border-radius:4px;
  font-size:13px; letter-spacing:0.02em;
  display:flex; align-items:center; gap:12px;
  z-index:2; pointer-events:none;
}
.hero-tag-dot {
  width:8px; height:8px; border-radius:50%;
  background:var(--terracotta);
  box-shadow:0 0 0 4px rgba(184,92,62,0.25);
}
.hero-meta {
  margin-top:56px;
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
  display:grid; grid-template-columns:repeat(4,1fr);
}
.hero-meta > div { padding:24px 28px; border-right:1px solid var(--hairline); }
.hero-meta > div:last-child { border-right:none; }
.hero-meta dt { font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.hero-meta dd { font-family:var(--serif); font-size:26px; color:var(--forest-deep); }
.hero-meta dd small { font-family:var(--sans); font-size:13px; color:var(--muted); margin-left:6px; }

/* ── SECTIONS ── */
section.block { padding:120px 0; }
.section-head { display:grid; grid-template-columns:1fr 1.4fr; gap:80px; margin-bottom:80px; align-items:end; }
.section-head h2 { margin-top:18px; }
.section-head p { color:var(--muted); font-size:17px; max-width:52ch; }

/* ── STEPS ── */
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--hairline); }
.step { padding:40px 32px 40px 0; border-right:1px solid var(--hairline); position:relative; }
.step:last-child { border-right:none; padding-right:0; }
.step:not(:first-child) { padding-left:32px; }
.step-num { font-family:var(--serif); font-style:italic; font-size:56px; color:var(--terracotta); line-height:1; margin-bottom:28px; }
.step h3 { font-size:24px; margin-bottom:12px; }
.step p { font-size:15px; color:var(--muted); line-height:1.6; }

/* ── BIKES ── */
.bikes { background:var(--paper); }
.bikes-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:80px; align-items:center; }
.bikes-image { aspect-ratio:5/6; border-radius:4px; overflow:hidden; background:var(--cream-deep); }
.bikes-image img { width:100%; height:100%; object-fit:cover; }
.bikes-content h2 { margin:24px 0 32px; }
.specs { display:grid; grid-template-columns:1fr 1fr; gap:28px 40px; margin-top:40px; padding-top:40px; border-top:1px solid var(--hairline); }
.spec { display:flex; gap:14px; }
.spec-icon { width:36px; height:36px; flex-shrink:0; background:var(--cream); border-radius:50%; display:grid; place-items:center; color:var(--forest); }
.spec-text strong { display:block; font-weight:600; font-size:14px; margin-bottom:4px; color:var(--forest-deep); }
.spec-text span { font-size:13px; color:var(--muted); line-height:1.5; }

/* ── TESTIMONIALS ── */
.testimonials-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.quote-card {
  background:var(--paper); border-radius:var(--radius-card);
  padding:40px 36px; border:1px solid var(--hairline-soft);
  display:flex; flex-direction:column; gap:28px;
}
.quote-card .stars { color:var(--terracotta); letter-spacing:4px; font-size:14px; }
.quote-card blockquote { font-family:var(--serif); font-size:22px; line-height:1.3; color:var(--forest-deep); flex:1; }
.quote-card blockquote::before { content:"« "; color:var(--terracotta); }
.quote-card blockquote::after  { content:" »"; color:var(--terracotta); }
.quote-author { display:flex; align-items:center; gap:14px; padding-top:24px; border-top:1px solid var(--hairline-soft); }
.quote-avatar { width:40px; height:40px; border-radius:50%; background:var(--cream-deep); color:var(--forest); display:grid; place-items:center; font-family:var(--serif); font-size:18px; font-style:italic; }
.quote-author-info strong { display:block; font-size:14px; color:var(--forest-deep); font-weight:600; }
.quote-author-info span { font-size:12px; color:var(--muted); }

/* ── BLOG PREVIEW ── */
.blog-preview { background:var(--cream); }
.blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin-bottom:56px; }
.blog-card {
  background:var(--paper); border-radius:var(--radius-card);
  border:1px solid var(--hairline-soft);
  display:flex; flex-direction:column;
  overflow:hidden;
  transition:transform var(--transition), box-shadow var(--transition);
}
.blog-card:hover { transform:translateY(-3px); box-shadow:0 12px 40px rgba(31,27,22,0.08); }
.blog-card-img {
  aspect-ratio:16/9; background:var(--cream-deep);
  overflow:hidden;
}
.blog-card-img img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.blog-card:hover .blog-card-img img { transform:scale(1.04); }
.blog-card-body { padding:28px 28px 32px; flex:1; display:flex; flex-direction:column; gap:12px; }
.blog-card-topic {
  font-size:11px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--terracotta); font-weight:500;
}
.blog-card-body h3 { font-size:22px; line-height:1.2; color:var(--forest-deep); }
.blog-card-body p { font-size:14px; color:var(--muted); line-height:1.6; flex:1; }
.blog-card-meta {
  display:flex; align-items:center; justify-content:space-between;
  font-size:12px; color:var(--muted);
  padding-top:16px; border-top:1px solid var(--hairline-soft);
  margin-top:auto;
}
.blog-card-meta a { color:var(--forest); font-weight:500; font-size:13px; display:inline-flex; align-items:center; gap:4px; }
.blog-card-meta a:hover { color:var(--terracotta); }
.blog-cta-wrap { text-align:center; }

/* Blog skeleton loading */
.blog-skeleton {
  background:var(--paper); border-radius:var(--radius-card);
  border:1px solid var(--hairline-soft);
  height:320px;
  background: linear-gradient(90deg, var(--cream-deep) 25%, var(--paper) 50%, var(--cream-deep) 75%);
  background-size:200% 100%;
  animation:shimmer 1.4s infinite;
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ── CONTACT ── */
.contact { background:var(--forest); color:var(--cream); }
.contact .eyebrow { color:rgba(242,237,227,0.7); }
.contact .eyebrow::before { background:rgba(242,237,227,0.4); }
.contact h2 { color:var(--cream); }
.contact-grid { display:grid; grid-template-columns:1fr 1.1fr; gap:80px; align-items:start; }
.contact-info { padding-top:24px; }
.contact-info p.lede { color:rgba(242,237,227,0.85); margin-top:28px; }
.contact-details { margin-top:56px; display:flex; flex-direction:column; gap:28px; }
.contact-detail { display:flex; gap:18px; align-items:flex-start; }
.contact-detail .icon { width:40px; height:40px; border-radius:50%; background:rgba(242,237,227,0.1); display:grid; place-items:center; color:var(--cream); flex-shrink:0; }
.contact-detail strong { display:block; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:rgba(242,237,227,0.6); margin-bottom:6px; font-weight:500; }
.contact-detail span { font-family:var(--serif); font-size:20px; color:var(--cream); }
.map-wrap iframe { display:block; }

/* ── FORM ── */
.reservation-card { background:var(--paper); color:var(--ink); border-radius:var(--radius-card); padding:48px; }
.reservation-card h3 { margin-bottom:8px; }
.reservation-card .sub { font-size:14px; color:var(--muted); margin-bottom:32px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-field { display:flex; flex-direction:column; gap:6px; }
.form-field.full { grid-column:1/-1; }
.form-field label {
  font-size:11px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--muted); font-weight:500;
}
.form-field input,
.form-field select,
.form-field textarea {
  font-family:var(--sans); font-size:15px;
  padding:12px 14px;
  border:1px solid var(--hairline); border-radius:4px;
  background:var(--cream); color:var(--ink);
  transition:border-color .15s ease;
  appearance:auto;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { outline:none; border-color:var(--forest); }
.form-field input.error,
.form-field select.error { border-color:var(--terracotta); }
.form-field textarea { resize:vertical; min-height:90px; }
.form-submit { margin-top:8px; width:100%; }

/* Checkbox */
.checkbox-label {
  display:flex; gap:10px; align-items:flex-start;
  font-size:13px; color:var(--muted); cursor:pointer;
  text-transform:none; letter-spacing:0;
}
.checkbox-label input { flex-shrink:0; margin-top:2px; accent-color:var(--forest); }

.form-success {
  background:rgba(94,107,61,0.12); border:1px solid var(--olive);
  color:var(--forest-deep); padding:16px 18px; border-radius:4px;
  margin-top:16px; font-size:14px; display:none;
}
.form-success.show { display:block; }
.form-error {
  background:rgba(184,92,62,0.1); border:1px solid var(--terracotta);
  color:var(--terracotta-deep); padding:16px 18px; border-radius:4px;
  margin-top:16px; font-size:14px; display:none;
}
.form-error.show { display:block; }

/* ── STICKY FORM ── */
#sticky-trigger {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 200;
}
#sticky-btn {
  display: flex; align-items: center; gap: 10px;
  background: var(--forest);
  color: var(--paper);
  border: none; border-radius: var(--radius-btn);
  padding: 14px 22px;
  font-family: var(--sans); font-size: 15px; font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 24px rgba(28,42,30,0.35);
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
#sticky-btn:hover { background:var(--forest-deep); transform:translateY(-2px); box-shadow:0 8px 32px rgba(28,42,30,0.4); }
#sticky-btn svg { flex-shrink:0; }

#sticky-overlay {
  display:none;
  position:fixed; inset:0;
  background:rgba(28,42,30,0.4);
  backdrop-filter:blur(2px);
  z-index:300;
}
#sticky-overlay.show { display:block; }

#sticky-panel {
  position:fixed; top:0; right:-480px; bottom:0;
  width:100%; max-width:460px;
  background:var(--paper); color:var(--ink);
  z-index:400;
  overflow-y:auto;
  box-shadow:-8px 0 48px rgba(28,42,30,0.2);
  transition:right .35s cubic-bezier(.4,0,.2,1);
}
#sticky-panel.open { right:0; }

.sticky-header {
  display:flex; justify-content:space-between; align-items:flex-start;
  padding:32px 32px 24px;
  border-bottom:1px solid var(--hairline-soft);
  position:sticky; top:0;
  background:var(--paper); z-index:1;
}
.sticky-eyebrow {
  font-size:12px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--olive); font-weight:500;
}
.sticky-sub { font-size:13px; color:var(--muted); margin-top:4px; }
.sticky-close {
  background:none; border:none; cursor:pointer;
  padding:4px; color:var(--muted);
  transition:color var(--transition);
}
.sticky-close:hover { color:var(--ink); }

.sticky-form-body { padding:28px 32px 40px; display:flex; flex-direction:column; gap:16px; }
.sf-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.sf-rgpd { margin-top:4px; }
.sf-submit { width:100%; margin-top:8px; }

/* ── FOOTER ── */
footer { padding:48px 0 56px; background:var(--forest-deep); color:rgba(242,237,227,0.7); font-size:13px; }
.footer-inner { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:24px; }
.footer-inner .brand { color:var(--cream); font-size:18px; }
.footer-inner .brand small { color:rgba(242,237,227,0.5); }
.footer-links { display:flex; gap:24px; }
.footer-links a { color:rgba(242,237,227,0.6); font-size:13px; transition:color var(--transition); }
.footer-links a:hover { color:var(--cream); }

/* ── BLOG PAGE ── */
.blog-hero { padding:80px 0 56px; border-bottom:1px solid var(--hairline); }
.blog-hero h1 { margin:18px 0 24px; }
.blog-list { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; padding:80px 0; }
.blog-article-page { max-width:760px; margin:0 auto; padding:80px 40px; }
.blog-article-page h1 { margin:24px 0 32px; }
.blog-article-page .article-meta { font-size:13px; color:var(--muted); margin-bottom:48px; display:flex; gap:16px; flex-wrap:wrap; }
.blog-article-page h2 { font-size:clamp(26px,3vw,36px); margin:48px 0 20px; }
.blog-article-page h3 { font-size:22px; margin:32px 0 14px; }
.blog-article-page p { margin-bottom:20px; line-height:1.7; }
.blog-article-page ul, .blog-article-page ol { margin:0 0 20px 24px; line-height:1.8; }
.blog-article-page table { width:100%; border-collapse:collapse; margin:28px 0; font-size:14px; }
.blog-article-page th { background:var(--cream-deep); padding:10px 14px; text-align:left; font-weight:600; border:1px solid var(--hairline); }
.blog-article-page td { padding:10px 14px; border:1px solid var(--hairline); }
.blog-back { display:inline-flex; align-items:center; gap:8px; color:var(--forest); font-size:14px; font-weight:500; margin-bottom:40px; }
.blog-back:hover { color:var(--terracotta); }
.blog-cta-banner {
  background:var(--forest); color:var(--cream);
  border-radius:var(--radius-card); padding:40px 48px;
  margin:64px 0 0; display:flex; align-items:center; justify-content:space-between; gap:24px;
  flex-wrap:wrap;
}
.blog-cta-banner p { font-size:18px; font-family:var(--serif); color:var(--cream); max-width:40ch; }
.blog-cta-banner .btn-primary { background:var(--paper); color:var(--forest); }
.blog-cta-banner .btn-primary:hover { background:var(--cream); }

/* ── MENTIONS LÉGALES ── */
.legal-page { max-width:760px; margin:0 auto; padding:80px 40px; }
.legal-page h1 { margin:0 0 48px; }
.legal-page h2 { font-size:24px; margin:40px 0 16px; }
.legal-page p { margin-bottom:16px; line-height:1.7; }

/* ── ADMIN ── */
.admin-page { min-height:100vh; background:var(--cream); }
.admin-nav { background:var(--forest-deep); padding:16px 32px; display:flex; justify-content:space-between; align-items:center; }
.admin-nav .brand { color:var(--cream); font-size:18px; }
.admin-body { padding:40px 32px; max-width:1200px; margin:0 auto; }
.admin-table { width:100%; border-collapse:collapse; font-size:14px; }
.admin-table th { background:var(--forest); color:var(--paper); padding:12px 16px; text-align:left; }
.admin-table td { padding:12px 16px; border-bottom:1px solid var(--hairline); }
.admin-table tr:hover td { background:var(--paper); }
.badge-draft { background:rgba(184,92,62,0.15); color:var(--terracotta-deep); padding:3px 10px; border-radius:999px; font-size:12px; font-weight:500; }
.badge-published { background:rgba(42,61,44,0.12); color:var(--forest); padding:3px 10px; border-radius:999px; font-size:12px; font-weight:500; }
.btn-sm { padding:8px 16px; font-size:13px; }

/* ══════════════════════════════════════════════
   RESPONSIVE — breakpoint 960px
══════════════════════════════════════════════ */
@media (max-width:960px) {
  .container { padding:0 24px; }

  /* Nav mobile */
  .nav-links {
    display:none; flex-direction:column; gap:0;
    position:absolute; top:100%; left:0; right:0;
    background:rgba(242,237,227,0.97);
    backdrop-filter:blur(12px);
    border-bottom:1px solid var(--hairline-soft);
    padding:8px 0 16px;
  }
  .nav-links.open { display:flex; }
  .nav-links li a { display:block; padding:12px 24px; font-size:16px; }
  .nav-links li a:hover { color:var(--terracotta); }
  nav.top { position:relative; }
  .burger { display:flex; }
  .nav-cta { display:none; }

  /* Hero */
  .hero-grid { grid-template-columns:1fr; gap:32px; }
  .hero-image-wrap { aspect-ratio:4/3.2; order:-1; }
  .hero-meta { grid-template-columns:1fr 1fr; }
  .hero-meta > div:nth-child(2) { border-right:none; }
  .hero-meta > div:nth-child(1),
  .hero-meta > div:nth-child(2) { border-bottom:1px solid var(--hairline); }

  /* Sections */
  section.block { padding:80px 0; }
  .section-head { grid-template-columns:1fr; gap:24px; }

  /* Steps */
  .steps { grid-template-columns:1fr 1fr; }
  .step { border-bottom:1px solid var(--hairline); }
  .step:nth-child(2) { border-right:none; }
  .step:nth-child(3) { padding-left:0; border-right:1px solid var(--hairline); border-bottom:none; }
  .step:nth-child(4) { padding-left:32px; border-bottom:none; }

  /* Bikes */
  .bikes-grid { grid-template-columns:1fr; gap:48px; }
  .specs { grid-template-columns:1fr; }

  /* Testimonials & Blog */
  .testimonials-grid,
  .blog-grid,
  .blog-list { grid-template-columns:1fr; }

  /* Contact */
  .contact-grid { grid-template-columns:1fr; gap:48px; }
  .reservation-card { padding:32px 24px; }
  .form-grid { grid-template-columns:1fr; }

  /* Sticky */
  #sticky-trigger { bottom:20px; right:16px; }
  #sticky-panel { max-width:100%; top:auto; right:0; bottom:-100%; left:0; max-height:90vh; border-radius:16px 16px 0 0; transition:bottom .35s cubic-bezier(.4,0,.2,1); }
  #sticky-panel.open { bottom:0; right:0; }
  .sf-row { grid-template-columns:1fr; }

  /* Footer */
  .footer-inner { flex-direction:column; gap:16px; text-align:center; }
  .footer-links { flex-wrap:wrap; justify-content:center; }

  /* Blog article */
  .blog-article-page { padding:48px 24px; }
  .blog-cta-banner { flex-direction:column; text-align:center; padding:32px 24px; }
}

@media (max-width:600px) {
  h1 { font-size:clamp(36px,10vw,56px); }
  .hero-meta { grid-template-columns:1fr; }
  .hero-meta > div { border-right:none !important; border-bottom:1px solid var(--hairline) !important; }
  .hero-meta > div:last-child { border-bottom:none !important; }
  .steps { grid-template-columns:1fr; }
  .step { border-right:none; border-bottom:1px solid var(--hairline); padding-left:0 !important; padding-right:0 !important; }
  .step:last-child { border-bottom:none; }
  .sticky-form-body { padding:20px 20px 32px; }
  .sticky-header { padding:24px 20px 16px; }
}