/* =========================================================
   JASWAL EDITIONS — style.css
   Palette: Cream · Navy · Plum
   ========================================================= */

/* ── Variables ─────────────────────────────────────────── */
:root {
  --cream:       #FDFBF7;
  --cream-dark:  #F5F0E8;
  --white:       #FFFFFF;
  --navy:        #0A192F;
  --navy-mid:    #1C3257;
  --navy-light:  #2E4A7A;
  --plum:        #5A2A4F;
  --plum-dark:   #3D1A36;
  --plum-light:  #7A3D6B;
  --gold:        #C9A84C;
  --text-body:   #2C3A52;
  --text-muted:  #6B7A96;
  --border:      rgba(10,25,47,0.12);
  --border-focus:rgba(90,42,79,0.5);
  --shadow-sm:   0 2px 8px rgba(10,25,47,0.06);
  --shadow-md:   0 6px 24px rgba(10,25,47,0.1);
  --shadow-lg:   0 16px 48px rgba(10,25,47,0.14);
  --font-serif:  'Cormorant Garamond', Georgia, serif;
  --font-sans:   'DM Sans', system-ui, sans-serif;
  --radius:      6px;
  --radius-lg:   12px;
  --transition:  0.25s ease;
  --max-w:       1140px;
}

/* ── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  background: var(--cream);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea, select { font-family: inherit; }

/* ── Container ─────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Typography ─────────────────────────────────────────── */
h1, h2, h3, h4, h5 {
  font-family: var(--font-serif);
  color: var(--navy);
  line-height: 1.2;
  font-weight: 600;
}
h1 { font-size: clamp(2.2rem, 4vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.75rem); }
h4 { font-size: 1.2rem; }
p  { color: var(--text-body); }

.section-label {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--plum);
  margin-bottom: 12px;
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: all var(--transition);
  white-space: nowrap;
}
.btn-primary {
  background: var(--plum);
  color: var(--white);
  box-shadow: 0 4px 16px rgba(90,42,79,0.25);
}
.btn-primary:hover {
  background: var(--plum-dark);
  box-shadow: 0 6px 24px rgba(90,42,79,0.35);
  transform: translateY(-1px);
}
.btn-outline {
  background: transparent;
  color: var(--plum);
  border: 1.5px solid var(--plum);
}
.btn-outline:hover {
  background: var(--plum);
  color: var(--white);
}
.btn-gold {
  background: var(--gold);
  color: var(--navy);
  box-shadow: 0 4px 16px rgba(201,168,76,0.3);
}
.btn-gold:hover {
  background: #b8952f;
  transform: translateY(-1px);
}
.btn-sm { padding: 10px 20px; font-size: 0.82rem; }
.btn-lg { padding: 18px 38px; font-size: 1rem; letter-spacing: 0.06em; }

/* ── Navigation ─────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(253,251,247,0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
}
.nav-logo {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
}
.nav-logo span {
  display: block;
  font-weight: 400;
  font-size: 0.5rem;
  letter-spacing: 0.35em;
  color: var(--text-muted);
  margin-top: 3px;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav-links a {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-body);
  letter-spacing: 0.05em;
  transition: color var(--transition);
}
.nav-links a:hover, .nav-links a.active { color: var(--navy); }
.nav-store-btn {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--plum);
  letter-spacing: 0.08em;
  padding: 8px 18px;
  border: 1.5px solid var(--plum);
  border-radius: var(--radius);
  transition: all var(--transition);
}
.nav-store-btn:hover {
  background: var(--plum);
  color: var(--white);
}
.nav-mobile-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
}
.nav-mobile-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
  transition: all var(--transition);
}

/* ── Hero / Page Headers ─────────────────────────────────── */
.page-hero {
  padding: 72px 0 56px;
  border-bottom: 1px solid var(--border);
}
.page-hero-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: end;
}
.page-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(90,42,79,0.06);
  color: var(--plum);
  padding: 6px 14px;
  border-radius: 40px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 20px;
  border: 1px solid rgba(90,42,79,0.15);
}
.page-hero-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--plum);
  border-radius: 50%;
}
.page-hero h1 { margin-bottom: 16px; }
.page-hero p {
  font-size: 1.05rem;
  color: var(--text-muted);
  max-width: 580px;
  line-height: 1.75;
}
.page-hero-meta {
  text-align: right;
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 2;
}

/* ── STAR Tool Layout ────────────────────────────────────── */
.tool-section {
  padding: 56px 0 80px;
}
.tool-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 48px;
  align-items: start;
}
.tool-form-panel {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow-md);
}
.tool-form-intro {
  margin-bottom: 32px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border);
}
.tool-form-intro h2 { margin-bottom: 10px; }
.tool-form-intro p { font-size: 0.92rem; color: var(--text-muted); }

.star-fields { display: flex; flex-direction: column; gap: 28px; }

.star-field { display: flex; flex-direction: column; gap: 6px; }
.star-field-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--navy);
}
.star-letter {
  width: 28px;
  height: 28px;
  background: var(--navy);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 0.95rem;
  font-weight: 700;
  flex-shrink: 0;
}
.star-letter.s { background: #1a3a6b; }
.star-letter.t { background: #2e5a9e; }
.star-letter.a { background: var(--plum); }
.star-letter.r { background: var(--plum-dark); }

.star-field-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-left: 38px;
}
.star-field textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--cream);
  color: var(--navy);
  font-size: 0.9rem;
  line-height: 1.65;
  resize: vertical;
  min-height: 96px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.star-field textarea:focus {
  outline: none;
  border-color: var(--plum);
  box-shadow: 0 0 0 3px rgba(90,42,79,0.1);
  background: var(--white);
}
.star-field textarea::placeholder { color: var(--text-muted); opacity: 0.7; }

.tool-submit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
  gap: 16px;
}
.tool-submit-note {
  font-size: 0.78rem;
  color: var(--text-muted);
  max-width: 280px;
}

/* ── Output Zone ─────────────────────────────────────────── */
.output-zone {
  margin-top: 40px;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.5s ease, opacity 0.4s ease;
}
.output-zone.visible {
  max-height: 2000px;
  opacity: 1;
}
.output-card {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.output-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  background: var(--navy);
  color: var(--white);
}
.output-card-header h4 {
  color: var(--white);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}
.output-card-body { padding: 28px 24px; }

.output-section { margin-bottom: 24px; }
.output-section:last-child { margin-bottom: 0; }
.output-section-label {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--plum);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.output-section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.output-section-text {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--navy);
}
.output-copy-row {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px 24px;
  background: var(--white);
  border-top: 1px solid var(--border);
}
#copy-btn,
#download-btn {
  background: var(--plum);
  color: var(--white);
  padding: 10px 22px;
  border-radius: var(--radius);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: all var(--transition);
  display: flex;
  align-items: center;
  gap: 8px;
}
#copy-btn:hover,
#download-btn:hover { background: var(--plum-dark); }
#copy-btn.copied { background: #2d6a4f; }

/* ── Sidebar ─────────────────────────────────────────────── */
.tool-sidebar { display: flex; flex-direction: column; gap: 24px; }

.upgrade-banner {
  background: linear-gradient(145deg, var(--navy) 0%, #1a2f50 60%, var(--navy-mid) 100%);
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.upgrade-banner::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 180px;
  height: 180px;
  background: rgba(90,42,79,0.25);
  border-radius: 50%;
}
.upgrade-banner::after {
  content: '';
  position: absolute;
  bottom: -60px;
  left: -30px;
  width: 140px;
  height: 140px;
  background: rgba(201,168,76,0.08);
  border-radius: 50%;
}
.upgrade-banner-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
.upgrade-banner h3 {
  color: var(--white);
  font-size: 1.4rem;
  line-height: 1.3;
  margin-bottom: 14px;
}
.upgrade-banner p {
  color: rgba(255,255,255,0.72);
  font-size: 0.88rem;
  line-height: 1.65;
  margin-bottom: 24px;
}
.upgrade-banner-features {
  margin-bottom: 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.upgrade-banner-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.84rem;
  color: rgba(255,255,255,0.85);
}
.upgrade-banner-features li::before {
  content: '✦';
  color: var(--gold);
  font-size: 0.6rem;
  flex-shrink: 0;
}
.upgrade-banner .btn-gold {
  width: 100%;
  justify-content: center;
  font-size: 0.82rem;
  position: relative;
  z-index: 1;
}

.sidebar-tip-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}
.sidebar-tip-card h4 {
  font-size: 1rem;
  margin-bottom: 10px;
}
.sidebar-tip-card p {
  font-size: 0.84rem;
  color: var(--text-muted);
  line-height: 1.65;
}

/* ── Blog Page ───────────────────────────────────────────── */
.blog-section { padding: 56px 0 80px; }
.blog-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 56px;
  align-items: start;
}
.blog-grid { display: flex; flex-direction: column; gap: 32px; }

.article-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
  display: grid;
  grid-template-columns: 200px 1fr;
}
.article-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.article-card-img {
  background: var(--cream-dark);
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 2.5rem;
  color: var(--border);
}
.article-card-body {
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.article-card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.article-tag {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--plum);
  background: rgba(90,42,79,0.07);
  padding: 3px 10px;
  border-radius: 40px;
}
.article-date {
  font-size: 0.78rem;
  color: var(--text-muted);
}
.article-card-body h3 {
  font-size: 1.2rem;
  margin-bottom: 10px;
  transition: color var(--transition);
}
.article-card:hover .article-card-body h3 { color: var(--plum); }
.article-card-body p {
  font-size: 0.87rem;
  color: var(--text-muted);
  line-height: 1.65;
  margin-bottom: 16px;
}
.article-read-more {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--plum);
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: gap var(--transition);
}
.article-card:hover .article-read-more { gap: 10px; }

/* Blog Sidebar */
.blog-sidebar { display: flex; flex-direction: column; gap: 28px; }
.sidebar-widget {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  box-shadow: var(--shadow-sm);
}
.sidebar-widget h4 {
  font-size: 1.1rem;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.sidebar-categories li {
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.88rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sidebar-categories li:last-child { border-bottom: none; }
.sidebar-categories a { color: var(--text-body); transition: color var(--transition); }
.sidebar-categories a:hover { color: var(--plum); }
.sidebar-count {
  font-size: 0.72rem;
  background: var(--cream-dark);
  color: var(--text-muted);
  padding: 2px 8px;
  border-radius: 40px;
}

/* ── Post Template ───────────────────────────────────────── */
.post-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 56px;
  align-items: start;
  padding: 56px 0 80px;
}
.post-hero {
  padding: 56px 0 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
}
.post-hero-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.post-hero h1 { margin-bottom: 20px; max-width: 720px; }
.post-hero-excerpt {
  font-size: 1.1rem;
  color: var(--text-muted);
  max-width: 640px;
  line-height: 1.75;
  margin-bottom: 32px;
}
.post-featured-img {
  width: 100%;
  height: 380px;
  background: linear-gradient(135deg, var(--cream-dark), var(--border));
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 4rem;
  color: rgba(10,25,47,0.08);
}
.post-content { padding-top: 40px; }
.post-content h2 { margin: 40px 0 16px; }
.post-content h3 { margin: 32px 0 12px; }
.post-content p {
  margin-bottom: 20px;
  font-size: 1.01rem;
  line-height: 1.8;
  color: var(--text-body);
}
.post-content blockquote {
  margin: 32px 0;
  padding: 20px 28px;
  border-left: 3px solid var(--plum);
  background: var(--white);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.post-content blockquote p {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-style: italic;
  color: var(--navy);
  margin: 0;
}
.post-author-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 24px;
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  margin-top: 48px;
}
.post-author-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--cream-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 1.4rem;
  color: var(--plum);
  flex-shrink: 0;
}
.post-author-info small { font-size: 0.72rem; color: var(--text-muted); display: block; }
.post-author-info strong { font-size: 0.95rem; color: var(--navy); }

/* Post Sidebar */
.post-sidebar { display: flex; flex-direction: column; gap: 24px; }

/* ── Footer ──────────────────────────────────────────────── */
.footer {
  background: var(--navy);
  color: rgba(255,255,255,0.65);
  padding: 52px 0 32px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) repeat(3, minmax(150px, 1fr));
  gap: 36px;
  align-items: start;
  margin-bottom: 40px;
}
.footer-brand { max-width: 340px; }
.footer-brand-name {
  font-family: var(--font-serif);
  color: var(--white);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.footer-brand p {
  color: rgba(255,255,255,0.52);
  font-size: 0.85rem;
  line-height: 1.65;
}
.footer-column h4 {
  color: var(--white);
  font-size: 0.95rem;
  margin-bottom: 14px;
}
.footer-column a {
  display: block;
  color: rgba(255,255,255,0.58);
  font-size: 0.82rem;
  margin-bottom: 9px;
  transition: color var(--transition), transform var(--transition);
}
.footer-column a:hover { color: var(--white); transform: translateX(2px); }
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.07);
  font-size: 0.78rem;
  color: rgba(255,255,255,0.38);
  flex-wrap: wrap;
  gap: 12px;
}
.footer-bottom a {
  color: rgba(255,255,255,0.58);
  transition: color var(--transition);
}
.footer-bottom a:hover { color: var(--white); }

/* ── Dividers & Ornaments ────────────────────────────────── */
.divider {
  width: 48px;
  height: 2px;
  background: var(--plum);
  margin: 20px 0;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 960px) {
  .tool-layout { grid-template-columns: 1fr; }
  .tool-sidebar { display: grid; grid-template-columns: 1fr 1fr; }
  .blog-layout { grid-template-columns: 1fr; }
  .post-layout { grid-template-columns: 1fr; }
  .post-sidebar { display: grid; grid-template-columns: 1fr 1fr; }
  .page-hero-inner { grid-template-columns: 1fr; }
  .page-hero-meta { text-align: left; }
}
@media (max-width: 720px) {
  .article-card { grid-template-columns: 1fr; }
  .article-card-img { min-height: 120px; }
  .tool-sidebar { grid-template-columns: 1fr; }
  .post-sidebar { grid-template-columns: 1fr; }
  .nav-links { display: none; }
  .nav-links.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    background: var(--cream);
    border-bottom: 1px solid var(--border);
    padding: 20px 24px;
    gap: 16px;
    align-items: flex-start;
  }
  .nav-mobile-toggle { display: flex; }
  .tool-form-panel { padding: 24px; }
  .tool-submit-row { flex-direction: column; align-items: flex-start; }
  .footer-subscribe-row { flex-direction: column; }
}
@media (max-width: 480px) {
  h1 { font-size: 1.9rem; }
  .page-hero { padding: 40px 0 32px; }
  .upgrade-banner { padding: 28px 20px; }
}


/* ── JE V1.0.0 Enhancements ─────────────────────────────── */
:target { scroll-margin-top: 92px; }
.landing-hero { padding-bottom: 48px; }
.landing-hero h1 { max-width: 760px; }
.landing-hero p { max-width: 680px; }
.hero-cta-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 28px;
  align-items: center;
}
.hero-primary-cta {
  background: var(--navy);
  box-shadow: 0 8px 28px rgba(10,25,47,0.2);
}
.hero-primary-cta:hover { background: var(--plum-dark); }
.hero-trust-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 22px 24px;
  min-width: 190px;
}
.hero-trust-card strong {
  color: var(--navy);
  display: block;
  font-size: 1.5rem;
  font-family: var(--font-serif);
  margin-bottom: 4px;
}
.pain-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.pain-chip-row span {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--plum);
  background: rgba(90,42,79,0.06);
  border: 1px solid rgba(90,42,79,0.14);
  border-radius: 999px;
  padding: 6px 12px;
}
.trust-strip {
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.42);
}
.trust-strip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
}
.trust-strip-grid > div {
  padding: 24px 26px;
  border-left: 1px solid var(--border);
}
.trust-strip-grid > div:last-child { border-right: 1px solid var(--border); }
.trust-strip strong {
  display: block;
  color: var(--navy);
  font-size: 0.9rem;
  margin-bottom: 4px;
}
.trust-strip span {
  display: block;
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.55;
}
.output-card-header span {
  font-size: 0.72rem;
  opacity: 0.65;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.store-preview {
  padding: 64px 0;
  background: var(--cream-dark);
  border-top: 1px solid var(--border);
}
.store-preview-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: center;
}
.store-preview p:not(.section-label) {
  max-width: 720px;
  margin-top: 12px;
  color: var(--text-muted);
}
.full-width-btn { width: 100%; justify-content: center; }
.sidebar-small-copy {
  font-size: 0.86rem;
  color: var(--text-muted);
  line-height: 1.65;
  margin-bottom: 16px;
}
.direct-answer-box {
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 4px solid var(--plum);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 28px;
}
.post-content .direct-answer-box h2 {
  margin: 0 0 12px;
}
.direct-answer-list {
  list-style: decimal;
  padding-left: 22px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 24px;
  margin-top: 18px;
}
ul.toc-list { display: flex; flex-direction: column; gap: 0; }
.toc-list li { border-bottom: 1px solid var(--border); }
.toc-list li:last-child { border-bottom: none; }
.toc-list a {
  display: block;
  color: var(--text-body);
  font-size: 0.84rem;
  padding: 9px 0;
  transition: color var(--transition), padding-left var(--transition);
}
.toc-list a:hover { color: var(--plum); padding-left: 4px; }
.inline-product-callout {
  margin: 28px 0 36px;
  padding: 24px;
  background: linear-gradient(145deg, var(--navy), var(--navy-mid));
  border-radius: var(--radius-lg);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  color: var(--white);
}
.inline-product-callout h3 { color: var(--white); margin-bottom: 8px; }
.inline-product-callout p { color: rgba(255,255,255,0.72); margin-bottom: 0; font-size: 0.9rem; }
.inline-product-callout .section-label { color: var(--gold); margin-bottom: 8px; }
.tool-callout-card {
  margin: 40px 0;
  padding: 28px;
  background: var(--cream-dark);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}
.post-footer-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
  gap: 16px;
}
.legal-page { padding: 56px 0 80px; }
.legal-container { max-width: 850px; }
.legal-section {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 30px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 22px;
}
.legal-section h2 { margin-bottom: 12px; }
.legal-section p {
  margin-bottom: 14px;
  color: var(--text-body);
  line-height: 1.75;
}
.legal-section p:last-child { margin-bottom: 0; }
.legal-section a { color: var(--plum); font-weight: 600; }
/* JE_V1.3.0 — Terms of Use legal-list formatting */
.legal-list {
  list-style: disc;
  padding-left: 22px;
  margin: 0 0 16px;
  color: var(--text-body);
}
.legal-list li {
  margin-bottom: 9px;
  line-height: 1.7;
}
.legal-list li:last-child { margin-bottom: 0; }
.contact-action-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
}

@media (max-width: 960px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .store-preview-inner { grid-template-columns: 1fr; }
  .inline-product-callout { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .hero-cta-row .btn { width: 100%; justify-content: center; }
  .hero-primary-cta { min-height: 58px; }
  .trust-strip-grid { grid-template-columns: 1fr; }
  .trust-strip-grid > div { border-left: none; border-right: none !important; border-bottom: 1px solid var(--border); }
  .direct-answer-list { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 480px) {
  .btn { white-space: normal; text-align: center; }
  .page-hero-meta.hero-trust-card { width: 100%; }
  .legal-section { padding: 24px; }
}

/* ── JE V1.0.1 Logo, Favicon & Product Gallery Enhancements ───────────── */
.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}
.nav-logo-mark {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: contain;
  flex: 0 0 42px;
  box-shadow: 0 3px 14px rgba(10,25,47,0.12);
}
.nav-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
  min-width: 0;
}
.nav-logo span.nav-logo-wordmark {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.04rem;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 4px;
}
.nav-logo span.nav-logo-tagline {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.48rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin: 0;
}
.enhanced-store-preview {
  grid-template-columns: 1fr minmax(150px, 220px);
}
.store-preview-copy { min-width: 0; }
.store-preview-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 22px;
}
.store-preview-logo-card {
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(253,251,247,0.72);
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(201,168,76,0.28);
  padding: 10px;
  transition: transform var(--transition), box-shadow var(--transition);
}
.store-preview-logo-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.store-preview-logo-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
}
.footer-brand-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.footer-brand-logo {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  object-fit: contain;
  flex: 0 0 58px;
  border: 1px solid rgba(201,168,76,0.3);
}
.footer-brand-name { margin-bottom: 4px; }
.footer-brand-tagline {
  color: var(--gold) !important;
  font-size: 0.66rem !important;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.2 !important;
}
.products-hero {
  background:
    radial-gradient(circle at 92% 12%, rgba(201,168,76,0.18), transparent 26%),
    linear-gradient(180deg, var(--cream), var(--cream-dark));
}
.products-hero-inner {
  grid-template-columns: minmax(0, 1fr) 240px;
  align-items: center;
}
.products-hero-mark {
  display: grid;
  place-items: center;
  border-radius: 50%;
  padding: 12px;
  background: rgba(255,255,255,0.62);
  border: 1px solid rgba(201,168,76,0.32);
  box-shadow: var(--shadow-md);
  transition: transform var(--transition), box-shadow var(--transition);
}
.products-hero-mark:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.products-hero-mark img {
  border-radius: 50%;
  width: 100%;
  height: auto;
}
.products-page { padding: 64px 0 80px; }
.products-intro-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: end;
  margin-bottom: 34px;
}
.products-intro-row p:not(.section-label) {
  max-width: 700px;
  color: var(--text-muted);
  margin-top: 12px;
}
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}
.product-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.product-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(201,168,76,0.42);
}
.product-media {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--cream-dark);
  aspect-ratio: 4 / 3;
  border-bottom: 1px solid var(--border);
}
.product-media img,
.product-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s ease;
}
.product-card:hover .product-media img,
.product-card:hover .product-media video { transform: scale(1.025); }
.product-media::after {
  content: 'View On Etsy';
  position: absolute;
  left: 18px;
  bottom: 18px;
  background: rgba(10,25,47,0.86);
  color: var(--white);
  border: 1px solid rgba(201,168,76,0.55);
  border-radius: 999px;
  padding: 7px 13px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--transition), transform var(--transition);
}
.product-card:hover .product-media::after {
  opacity: 1;
  transform: translateY(0);
}
.product-card-body {
  padding: 24px 24px 26px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.product-category {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 9px;
}
.product-card h3 {
  font-size: 1.32rem;
  margin-bottom: 10px;
}
.product-card h3 a { transition: color var(--transition); }
.product-card h3 a:hover { color: var(--plum); }
.product-card-body p:not(.product-category) {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.7;
  margin-bottom: 18px;
}
.product-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  color: var(--plum);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  transition: color var(--transition), gap var(--transition);
}
.product-link:hover { color: var(--navy); }
.product-etsy-band {
  padding: 58px 0;
  background: linear-gradient(145deg, var(--navy), var(--plum-dark));
  border-top: 1px solid rgba(255,255,255,0.08);
}
.product-etsy-band-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: center;
}
.product-etsy-band h2 { color: var(--white); }
.product-etsy-band .section-label { color: var(--gold); }
.product-etsy-band p:not(.section-label) {
  color: rgba(255,255,255,0.72);
  max-width: 680px;
  margin-top: 12px;
}

@media (max-width: 960px) {
  .products-hero-inner { grid-template-columns: 1fr; }
  .products-hero-mark { width: 190px; justify-self: start; }
  .products-intro-row,
  .product-etsy-band-inner { grid-template-columns: 1fr; }
  .enhanced-store-preview { grid-template-columns: 1fr; }
  .store-preview-logo-card { width: 180px; }
}
@media (max-width: 760px) {
  .nav-inner { height: 76px; }
  .nav-links.open { top: 76px; }
  .nav-logo-mark { width: 38px; height: 38px; flex-basis: 38px; }
  .nav-logo span.nav-logo-wordmark { font-size: 0.92rem; letter-spacing: 0.13em; }
  .nav-logo span.nav-logo-tagline { font-size: 0.43rem; letter-spacing: 0.22em; }
  .product-grid { grid-template-columns: 1fr; }
  .products-page { padding: 48px 0 64px; }
}
@media (max-width: 480px) {
  .nav-logo-mark { display: none; }
  .nav-logo span.nav-logo-wordmark { font-size: 0.9rem; }
  .nav-logo span.nav-logo-tagline { font-size: 0.4rem; }
  .product-card-body { padding: 20px; }
  .product-media::after { display: none; }
}
@media (min-width: 761px) {
  .product-grid .product-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: calc((100% - 28px) / 2);
    justify-self: center;
  }
}

/* ── JE V1.0.3 Visual Repair Pass ─────────────────────────
   Built from the clean JE_V1.0.1 baseline. The failed V1.0.2
   sidebar/sticky/grid experiment was intentionally discarded.
   This is a targeted, low-risk balance correction only. */

.blog-layout > div,
.tool-layout > div,
.post-layout > article {
  min-width: 0;
}

@media (min-width: 961px) {
  /* Align the blog sidebar with the first article card, not with
     the small “Latest Articles” label above the article stack. */
  .blog-sidebar {
    margin-top: 42px;
  }
}

@media (min-width: 961px) and (max-width: 1180px) {
  /* Laptop refinement: protect the premium two-column rhythm
     without changing the desktop design language. */
  .blog-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 40px;
  }

  .article-card {
    grid-template-columns: 180px minmax(0, 1fr);
  }

  .article-card-body {
    padding: 26px 24px 22px;
  }

  .article-card-body h3 {
    font-size: 1.14rem;
  }
}

@media (max-width: 960px) {
  /* Tablet: keep the original single-column structure clean and
     prevent sidebar cards from feeling attached to the article list. */
  .blog-sidebar {
    margin-top: 32px;
  }

  .sidebar-widget,
  .sidebar-tip-card,
  .upgrade-banner {
    width: 100%;
  }
}

@media (max-width: 720px) {
  /* Mobile: tighter, cleaner stacking while preserving the existing theme. */
  .blog-section {
    padding: 44px 0 64px;
  }

  .blog-grid {
    gap: 24px;
  }

  .article-card-body {
    padding: 22px 20px;
  }

  .article-card-img {
    min-height: 104px;
  }

  .sidebar-widget {
    padding: 24px 20px;
  }
}

/* =========================================================
   JE_V1.1.0 — Storefront Inversion + Phase 0 Additions
   ========================================================= */

/* ── Skip Link (a11y) ─────────────────────────────────── */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--navy);
  color: var(--cream);
  padding: 12px 22px;
  border-radius: 0 0 var(--radius) 0;
  font-size: 0.85rem;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ── Badge System ─────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  line-height: 1;
}
.badge--bestseller { background: var(--gold); color: var(--navy); }
.badge--new        { background: var(--plum); color: var(--cream); }
.badge--bundle     { background: var(--navy); color: var(--gold); border: 1px solid var(--gold); }
.badge--free       { background: transparent; color: var(--plum); border: 1px solid var(--plum); }
.product-media .badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  box-shadow: var(--shadow-sm);
}
.product-media { position: relative; }

/* ── Field Error State (replaces inline JS styles) ────── */
.field-error {
  border-color: #c0392b !important;
  box-shadow: 0 0 0 3px rgba(192,57,43,0.1) !important;
}

/* ── Shake (moved out of JS injection) ────────────────── */
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
.shake { animation: shake .4s ease; }

/* ── Utility spacing (replaces inline styles) ─────────── */
.u-mb-24 { margin-bottom: 24px; }
.u-mb-16 { margin-bottom: 16px; }
.u-mb-8  { margin-bottom: 8px; }
.u-mt-32 { margin-top: 32px; }

/* ── Breadcrumbs ──────────────────────────────────────── */
.breadcrumbs {
  padding: 18px 0 0;
  font-size: 0.78rem;
  color: var(--text-muted);
}
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.breadcrumbs li:not(:last-child)::after {
  content: "›";
  margin-left: 8px;
  color: var(--text-muted);
  opacity: 0.6;
}
.breadcrumbs a { color: var(--plum); transition: color var(--transition); }
.breadcrumbs a:hover { color: var(--plum-dark); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--text-muted); }

/* ── Home: Featured Products Strip ────────────────────── */
.home-featured {
  padding: 64px 0 72px;
}
.home-featured-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 34px;
  flex-wrap: wrap;
}
.home-featured-head h2 { margin-top: 6px; }
.home-featured-head p {
  color: var(--text-muted);
  max-width: 560px;
  margin-top: 10px;
  font-size: 0.95rem;
}
.home-featured .product-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.home-featured .product-card h3 { font-size: 1.25rem; }
.home-featured .product-card-body p:not(.product-category) { font-size: 0.88rem; }
/* Featured strip is a fixed 3-up grid — cancel the global last-odd
   centering rule (that rule is only for the 2-col products page). */
.home-featured .product-grid .product-card:last-child:nth-child(odd) {
  grid-column: auto;
  width: auto;
  justify-self: stretch;
}

/* ── Home: How It Works Strip ─────────────────────────── */
.how-strip {
  background: var(--navy);
  padding: 56px 0;
}
.how-strip .section-label { color: var(--gold); }
.how-strip h2 { color: var(--cream); margin-bottom: 34px; }
.how-strip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.how-step {
  border: 1px solid rgba(253,251,247,0.14);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  background: rgba(253,251,247,0.03);
}
.how-step-num {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy);
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 14px;
}
.how-step h3 {
  color: var(--cream);
  font-size: 1.2rem;
  margin-bottom: 8px;
}
.how-step p {
  color: rgba(253,251,247,0.72);
  font-size: 0.88rem;
  line-height: 1.65;
}

/* ── Home: Free Tool Section Framing ──────────────────── */
.tool-section-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 44px;
}
.tool-section-head .badge { margin-bottom: 14px; }
.tool-section-head p {
  color: var(--text-muted);
  margin-top: 12px;
  font-size: 0.95rem;
}

/* ── Click-To-Play Video ──────────────────────────────── */
.video-play-wrap { position: relative; display: block; }
.video-play-btn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10,25,47,0.28);
  transition: background var(--transition);
  z-index: 2;
}
.video-play-btn:hover { background: rgba(10,25,47,0.42); }
.video-play-btn span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--navy);
  font-size: 1.3rem;
  box-shadow: var(--shadow-md);
  padding-left: 5px;
}
.video-play-wrap.playing .video-play-btn { display: none; }

/* ── Responsive additions ─────────────────────────────── */
@media (max-width: 900px) {
  .how-strip-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .home-featured .product-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .home-featured-head { flex-direction: column; align-items: flex-start; }
}

/* ── Coming Soon label ────────────────────────────────── */
.coming-soon-label { opacity: 0.55; cursor: default; }

/* ============================================================
   JE V1.2.0 — PDP, Category Hub & About
   Self-contained; uses existing :root tokens only.
   ============================================================ */

/* ---- Products hub: category sections ---- */
.product-cat-section { padding: 6px 0 40px; }
.product-cat-section + .product-cat-section { border-top: 1px solid var(--border); padding-top: 44px; }
.product-cat-head { margin: 0 0 28px; max-width: 680px; }
.product-cat-head .section-label { color: var(--gold); }
.product-cat-head h2 { font-family: var(--font-serif); font-weight: 700; font-size: clamp(1.75rem, 3.4vw, 2.5rem); color: var(--navy); line-height: 1.12; margin: 6px 0 10px; }
.product-cat-head p { color: var(--text-muted); font-size: 1.02rem; margin: 0; }

/* ---- Coming-soon card ---- */
.product-card.is-coming-soon .product-media { filter: grayscale(0.15) saturate(0.9); }
.product-card.is-coming-soon .product-card-body h3 { color: var(--navy); }
.badge--soon { background: var(--navy-mid); color: var(--cream); }
.product-soon-note { display: inline-block; margin-top: 14px; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em; color: var(--plum); }

/* ---- PDP layout ---- */
.pdp { padding: 34px 0 72px; }
.pdp-top { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 48px; align-items: start; }
.pdp-media { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-md); background: var(--cream-dark); }
.pdp-media img, .pdp-media video { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.pdp-media .badge { position: absolute; top: 16px; left: 16px; z-index: 2; }
.pdp-media .video-play-wrap { display: block; position: relative; }
.pdp-info { padding-top: 4px; }
.pdp-eyebrow { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.76rem; font-weight: 700; color: var(--gold); margin: 0 0 10px; }
.pdp-info h1 { font-family: var(--font-serif); font-weight: 700; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.08; color: var(--navy); margin: 0 0 16px; }
.pdp-lede { font-size: 1.12rem; line-height: 1.55; color: var(--text-muted); margin: 0 0 26px; }
.pdp-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.pdp-cta-note { font-size: 0.85rem; color: var(--text-muted); margin: 0 0 24px; }
.pdp-trust { display: flex; flex-wrap: wrap; gap: 10px 20px; margin: 0; padding: 20px 0 0; border-top: 1px solid var(--border); list-style: none; }
.pdp-trust li { position: relative; padding-left: 22px; font-size: 0.86rem; font-weight: 600; color: var(--text-body); }
.pdp-trust li::before { content: "✓"; position: absolute; left: 0; top: -1px; color: var(--gold); font-weight: 700; }

/* ---- PDP body ---- */
.pdp-body { max-width: 860px; margin: 52px auto 0; }
.pdp-section { margin-bottom: 44px; }
.pdp-section > .section-label { color: var(--gold); }
.pdp-section h2 { font-family: var(--font-serif); font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--navy); line-height: 1.15; margin: 6px 0 16px; }
.pdp-section p { color: var(--text-body); line-height: 1.7; margin: 0 0 14px; font-size: 1.02rem; }
.pdp-included { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; list-style: none; margin: 8px 0 0; padding: 0; }
.pdp-included li { position: relative; padding-left: 30px; color: var(--text-body); font-size: 0.98rem; line-height: 1.5; }
.pdp-included li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; background: rgba(201,168,76,0.16); color: var(--gold); font-size: 0.72rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }

/* ---- PDP FAQ (details/summary) ---- */
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item { border: 1px solid var(--border); border-radius: var(--radius); background: var(--white); overflow: hidden; transition: border-color var(--transition), box-shadow var(--transition); }
.faq-item[open] { border-color: var(--border-focus); box-shadow: var(--shadow-sm); }
.faq-item summary { cursor: pointer; list-style: none; padding: 16px 46px 16px 18px; font-weight: 600; color: var(--navy); position: relative; font-size: 1rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 1.4rem; color: var(--gold); font-weight: 400; line-height: 1; }
.faq-item[open] summary::after { content: "−"; }
.faq-answer { padding: 0 18px 18px; }
.faq-answer p { margin: 0; color: var(--text-muted); line-height: 1.65; }

/* ---- PDP buy band ---- */
.pdp-buy-band { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; background: var(--navy); color: var(--cream); border-radius: var(--radius-lg); padding: 28px 32px; margin-top: 8px; }
.pdp-buy-band h2 { font-family: var(--font-serif); font-weight: 700; font-size: clamp(1.4rem, 2.6vw, 1.9rem); color: #fff; margin: 0 0 6px; line-height: 1.12; }
.pdp-buy-band p { margin: 0; color: rgba(253,251,247,0.8); font-size: 0.98rem; }

/* ---- PDP related ---- */
.pdp-related { margin-top: 60px; }
.pdp-related-head { text-align: center; max-width: 560px; margin: 0 auto 26px; }
.pdp-related-head .section-label { color: var(--gold); }
.pdp-related-head h2 { font-family: var(--font-serif); font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.1rem); color: var(--navy); margin: 6px 0 0; }
.pdp-related-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
/* related always 3-up on desktop — cancel the global last-odd centering */
.pdp-related-grid .product-card:last-child:nth-child(odd) { grid-column: auto; width: auto; justify-self: stretch; }

/* ---- About page ---- */
.about-hero .page-hero-inner { align-items: center; }
.about-hero-mark { display: flex; justify-content: center; }
.about-hero-mark img { width: min(220px, 60%); height: auto; }
.about-page { padding: 8px 0 72px; }
.about-body { max-width: 860px; margin: 0 auto; }
.about-section { margin-bottom: 44px; }
.about-section .section-label { color: var(--gold); }
.about-section h2 { font-family: var(--font-serif); font-weight: 700; font-size: clamp(1.65rem, 3.2vw, 2.35rem); color: var(--navy); line-height: 1.14; margin: 6px 0 16px; }
.about-section p { color: var(--text-body); line-height: 1.75; margin: 0 0 14px; font-size: 1.05rem; }
.about-standard { margin: 52px 0 44px; }
.about-standard .section-label { color: var(--gold); }
.about-standard h2 { font-family: var(--font-serif); font-weight: 700; font-size: clamp(1.65rem, 3.2vw, 2.35rem); color: var(--navy); margin: 6px 0 24px; }
.about-values { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.about-value { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px 22px 24px; background: var(--white); box-shadow: var(--shadow-sm); }
.about-value h3 { font-family: var(--font-serif); font-weight: 700; font-size: 1.3rem; color: var(--plum); margin: 0 0 8px; }
.about-value p { margin: 0; color: var(--text-muted); line-height: 1.6; font-size: 0.95rem; }
.about-cta { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; background: var(--navy); color: var(--cream); border-radius: var(--radius-lg); padding: 32px 36px; margin-top: 8px; }
.about-cta h2 { font-family: var(--font-serif); font-weight: 700; font-size: clamp(1.5rem, 2.8vw, 2rem); color: #fff; margin: 0 0 6px; }
.about-cta p { margin: 0; color: rgba(253,251,247,0.82); }
.about-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---- Responsive ---- */
@media (max-width: 860px) {
  .pdp-top { grid-template-columns: 1fr; gap: 28px; }
  .pdp-body { margin-top: 40px; }
  .pdp-related-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .pdp-included { grid-template-columns: 1fr; }
  .pdp-buy-band, .about-cta { padding: 24px; }
}

/* =========================================================
   JE_V1.2.2 — Targeted Mobile & Button Repair
   Scope: paired product CTAs, article footer navigation,
   button contrast hardening, and About-page mobile gutters.
   ========================================================= */

/* Keep button text colors authoritative inside link-rich containers. */
.btn.btn-primary,
.btn.btn-primary:hover {
  color: var(--white);
}
.btn.btn-outline {
  color: var(--plum);
}
.btn.btn-outline:hover {
  color: var(--white);
}
.btn.btn-gold,
.btn.btn-gold:hover {
  color: var(--navy);
}

/* Maintain even vertical alignment across every article footer pair. */
.post-footer-nav {
  align-items: center;
}
.post-footer-nav .btn {
  min-height: 46px;
  justify-content: center;
}

/* Restore the global container gutters overridden by .about-page padding. */
.about-page.container {
  padding-left: 24px;
  padding-right: 24px;
}

@media (max-width: 560px) {
  /* Only paired product-detail CTAs become equal full-width mobile buttons. */
  .pdp-cta-row {
    display: grid;
    grid-template-columns: 1fr;
  }
  .pdp-cta-row .btn {
    width: 100%;
    min-height: 58px;
    padding: 16px 24px;
    justify-content: center;
  }

  /* Keep article navigation balanced when the pair stacks on small screens. */
  .post-footer-nav {
    flex-direction: column;
    align-items: stretch;
  }
  .post-footer-nav .btn {
    width: 100%;
  }
}

/* =========================================================
   JE_V1.3.1 — Shared Minor Repair Bundle
   ========================================================= */

/* Equalize the paired product-page purchase buttons on desktop and mobile. */
.pdp-cta-row .btn {
  min-height: 58px;
  padding: 16px 24px;
  justify-content: center;
}

/* Render the mobile menu icon as three equal, solid lines. */
.nav-mobile-toggle span {
  height: 3px;
  flex: 0 0 3px;
  border-radius: 0;
}

/* Improve lower-footer readability while keeping the build mark discreet. */
.footer-bottom > p {
  color: rgba(255,255,255,0.74);
}
.footer-bottom a {
  color: var(--gold);
}
.footer-bottom a:hover,
.footer-bottom a:focus-visible {
  color: var(--white);
}
@media (max-width: 960px) {
  /* Center only the writing inside stretched article callout buttons. */
  .inline-product-callout .btn {
    justify-content: center;
    text-align: center;
  }
}



/* =========================================================
   JE_V1.4.1 — Editorial Image Fit Repair
   ========================================================= */

/* Keep every 16:9 editorial design fully visible on desktop and mobile. */
.article-card-img {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 180px;
  overflow: hidden;
  background: var(--cream);
}
.article-card-img img {
  width: 100%;
  height: auto;
  min-height: 0;
  object-fit: contain;
  object-position: center;
}

/* Give desktop thumbnails enough width to remain readable without cropping. */
@media (min-width: 1181px) {
  .article-card {
    grid-template-columns: 260px minmax(0, 1fr);
  }
}
@media (min-width: 721px) and (max-width: 1180px) {
  .article-card {
    grid-template-columns: 240px minmax(0, 1fr);
  }
}

/* Preserve the source artwork's natural 16:9 ratio on article pages. */
.post-featured-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.post-featured-img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  object-position: center;
}

@media (max-width: 720px) {
  .article-card-img {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
}


/* =========================================================
   JE_V1.5.0 — Product Catalogue Expansion & Image Fit
   ========================================================= */

/* Keep complete product artwork visible inside consistent catalogue thumbnails. */
.product-media {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
}
.product-media img,
.product-media video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transform: none;
}
.product-card:hover .product-media img,
.product-card:hover .product-media video {
  transform: none;
}
.product-media .video-play-wrap {
  width: 100%;
  height: 100%;
}

/* Let product-detail artwork retain its natural ratio instead of forcing a crop. */
.pdp-media {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
}
.pdp-media > img,
.pdp-media .video-play-wrap,
.pdp-media .video-play-wrap video {
  width: 100%;
}
.pdp-media > img,
.pdp-media .video-play-wrap video {
  display: block;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
}


/* =========================================================
   JE_V1.5.1 — Button Alignment & Product Artwork Fine-Tuning
   ========================================================= */

/* Keep every button label visually centered whenever its button stretches. */
.btn {
  justify-content: center;
  text-align: center;
}

/* Equalize paired calls to action without forcing unrelated single buttons wider. */
.hero-cta-row,
.store-preview-actions,
.about-cta-actions,
.contact-action-row,
.pdp-cta-row,
.post-footer-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

@media (max-width: 720px) {
  .hero-cta-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .store-preview-actions,
  .about-cta-actions,
  .contact-action-row,
  .pdp-cta-row,
  .post-footer-nav {
    grid-template-columns: 1fr;
    width: 100%;
  }

  /* Center the single purchase button inside mobile product callout cards. */
  .pdp-buy-band > .btn {
    margin-inline: auto;
  }
}


/* =========================================================
   JE_V1.6.0 — Bespoke Website Service Positioning
   ========================================================= */

.web-service-teaser {
  padding: 0 0 80px;
}
.web-service-teaser-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.92fr);
  gap: 48px;
  align-items: center;
  padding: 48px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: linear-gradient(135deg, var(--white), var(--cream-dark));
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.web-service-copy h2 {
  margin: 0 0 14px;
}
.web-service-copy > p:not(.section-label) {
  max-width: 680px;
  color: var(--text-muted);
  font-size: 1.03rem;
}
.web-service-points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 22px;
  margin: 24px 0 28px;
}
.web-service-points li {
  position: relative;
  padding-left: 24px;
  color: var(--text-body);
  font-size: 0.92rem;
  line-height: 1.5;
}
.web-service-points li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--gold);
  font-weight: 700;
}
.web-service-actions,
.service-final-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.website-preview-card {
  position: relative;
  min-height: 340px;
  padding: 12px;
  border-radius: 18px;
  background: var(--navy);
  box-shadow: var(--shadow-lg);
  transform: rotate(1.5deg);
}
.website-preview-card::before,
.website-preview-card::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(201, 168, 76, 0.12);
}
.website-preview-card::before {
  width: 180px;
  height: 180px;
  right: -48px;
  top: -52px;
}
.website-preview-card::after {
  width: 110px;
  height: 110px;
  left: -30px;
  bottom: -34px;
}
.website-preview-top {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 7px;
  padding: 10px 12px 14px;
}
.website-preview-top span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.34);
}
.website-preview-body {
  position: relative;
  z-index: 1;
  min-height: 282px;
  padding: 38px 34px;
  border-radius: 12px;
  background: var(--cream);
}
.website-preview-kicker {
  margin: 0 0 12px;
  color: var(--plum);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.website-preview-title {
  max-width: 360px;
  color: var(--navy);
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 0.98;
}
.website-preview-rule {
  width: 58px;
  height: 3px;
  margin: 22px 0;
  background: var(--gold);
}
.website-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.website-preview-grid span {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  background: var(--white);
  font-size: 0.76rem;
  font-weight: 600;
}

.service-hero {
  padding-bottom: 70px;
}
.service-hero-inner {
  grid-template-columns: minmax(0, 1.15fr) minmax(330px, 0.85fr);
  align-items: center;
  gap: 56px;
}
.service-hero-card,
.service-boundary-card {
  padding: 32px;
  border: 1px solid rgba(201, 168, 76, 0.3);
  border-radius: var(--radius-lg);
  background: var(--navy);
  box-shadow: var(--shadow-lg);
}
.service-hero-card .section-label {
  color: var(--gold);
}
.service-hero-card h2,
.service-boundary-card h3 {
  color: var(--white);
  margin: 0 0 18px;
}
.service-check-list {
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.service-check-list li {
  position: relative;
  padding-left: 27px;
  color: rgba(255, 255, 255, 0.76);
  line-height: 1.5;
  font-size: 0.92rem;
}
.service-check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--gold);
  font-weight: 700;
}
.service-page {
  overflow: hidden;
}
.service-section {
  padding: 76px 0;
}
.service-section-muted {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--cream-dark);
}
.service-narrow {
  max-width: 860px;
}
.service-section-head {
  max-width: 700px;
  margin-bottom: 34px;
}
.service-section-head h2,
.service-narrow h2 {
  margin: 0 0 14px;
}
.service-section-head > p:not(.section-label),
.service-lead {
  color: var(--text-muted);
  font-size: 1.04rem;
  line-height: 1.75;
}
.service-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.service-card {
  min-height: 255px;
  padding: 26px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.service-card-number {
  display: inline-block;
  margin-bottom: 28px;
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
}
.service-card h3 {
  margin-bottom: 10px;
  color: var(--plum);
  font-size: 1.36rem;
}
.service-card p {
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.65;
}
.service-two-column {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr);
  gap: 64px;
  align-items: start;
}
.service-fit-list {
  display: grid;
  gap: 14px;
}
.service-fit-list li {
  display: grid;
  grid-template-columns: minmax(150px, 0.7fr) minmax(0, 1.3fr);
  gap: 22px;
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
}
.service-fit-list strong {
  color: var(--navy);
}
.service-fit-list span {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.55;
}
.service-process-section {
  background: var(--navy);
}
.service-section-head-light h2 {
  color: var(--white);
}
.service-section-head-light .section-label {
  color: var(--gold);
}
.service-section-head-light > p:not(.section-label) {
  color: rgba(255, 255, 255, 0.64);
}
.service-process {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.service-process li {
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.04);
}
.service-process li > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-bottom: 28px;
  border: 1px solid rgba(201, 168, 76, 0.5);
  border-radius: 50%;
  color: var(--gold);
  font-weight: 700;
}
.service-process h3 {
  margin-bottom: 8px;
  color: var(--white);
}
.service-process p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
  line-height: 1.65;
}
.service-boundaries {
  align-items: center;
}
.service-boundary-card {
  background: var(--plum-dark);
}
.service-final-cta {
  padding: 64px 0;
  background: var(--plum);
}
.service-final-cta-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.75fr);
  gap: 48px;
  align-items: center;
}
.service-final-cta .section-label {
  color: var(--gold);
}
.service-final-cta h2 {
  margin-bottom: 10px;
  color: var(--white);
}
.service-final-cta p:not(.section-label) {
  color: rgba(255, 255, 255, 0.72);
}
.service-light-outline,
.service-light-outline:hover {
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--white);
}
.service-contact-panel {
  border-color: rgba(201, 168, 76, 0.45);
  background: linear-gradient(135deg, var(--white), var(--cream-dark));
}
.service-contact-panel .section-label {
  color: var(--gold);
}

@media (max-width: 960px) {
  .web-service-teaser-inner,
  .service-hero-inner,
  .service-two-column,
  .service-final-cta-inner {
    grid-template-columns: 1fr;
  }
  .service-card-grid,
  .service-process {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .website-preview-card {
    max-width: 620px;
    width: 100%;
    margin-inline: auto;
  }
}

@media (max-width: 620px) {
  .web-service-teaser {
    padding-bottom: 56px;
  }
  .web-service-teaser-inner {
    gap: 32px;
    padding: 28px 22px;
    border-radius: var(--radius-lg);
  }
  .web-service-points,
  .website-preview-grid,
  .service-card-grid,
  .service-process,
  .web-service-actions,
  .service-final-actions {
    grid-template-columns: 1fr;
  }
  .website-preview-card {
    min-height: 0;
    transform: none;
  }
  .website-preview-body {
    min-height: 0;
    padding: 28px 22px;
  }
  .service-section {
    padding: 56px 0;
  }
  .service-hero-card,
  .service-boundary-card {
    padding: 24px;
  }
  .service-fit-list li {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .web-service-actions .btn,
  .service-final-actions .btn {
    width: 100%;
  }
}

/* =========================================================
   JE_V1.6.1 — Service Footer & Final CTA Repair
   ========================================================= */

/* The final service CTA is intentionally stacked on desktop as well as mobile:
   this preserves readable labels, equal widths, and a clear primary action. */
.service-final-actions {
  grid-template-columns: 1fr;
  width: 100%;
  max-width: 380px;
  justify-self: end;
}
.service-final-actions .btn {
  width: 100%;
  min-width: 0;
  min-height: 60px;
  padding: 15px 22px;
  white-space: normal;
  line-height: 1.25;
}

/* Override the generic outline-button color with sufficient contrast on the
   plum service CTA background. */
.btn.btn-outline.service-light-outline {
  border-color: rgba(255, 255, 255, 0.72);
  background: transparent;
  color: var(--white);
}
.btn.btn-outline.service-light-outline:hover {
  border-color: var(--white);
  background: var(--white);
  color: var(--plum);
}

@media (max-width: 960px) {
  .service-final-actions {
    max-width: none;
    justify-self: stretch;
  }
}


/* =========================================================
   JE_V1.7.0 — Purposeful Site-Wide Editorial Hero System
   ========================================================= */

/* Shared visual language for the six top-level entry pages. The DOM order
   remains reading order: page proposition first, purposeful panel second. */
.editorial-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 92% 10%, rgba(201, 168, 76, 0.2), transparent 28%),
    linear-gradient(180deg, var(--cream), var(--cream-dark));
}
.editorial-hero::after {
  content: "";
  position: absolute;
  right: clamp(24px, 6vw, 92px);
  bottom: 0;
  width: clamp(96px, 14vw, 190px);
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold));
  opacity: 0.8;
}
.editorial-hero .page-hero-inner {
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  align-items: center;
  gap: clamp(36px, 5vw, 64px);
}
.editorial-hero .page-hero-inner > * {
  min-width: 0;
}

.hero-purpose-card,
.hero-brand-card {
  position: relative;
  z-index: 1;
  min-width: 0;
  border: 1px solid rgba(201, 168, 76, 0.34);
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, var(--navy), #102746);
  box-shadow: var(--shadow-lg);
  padding: clamp(24px, 3vw, 32px);
  color: var(--white);
}
.hero-purpose-kicker {
  margin: 0 0 8px;
  color: var(--gold) !important;
  font-size: 0.69rem !important;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1.4 !important;
  text-transform: uppercase;
}
.hero-purpose-card h2 {
  margin: 0 0 20px;
  color: var(--white);
  font-size: clamp(1.65rem, 2.7vw, 2.15rem);
}
.hero-purpose-links {
  display: grid;
  gap: 10px;
}
.hero-purpose-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-width: 0;
  min-height: 72px;
  padding: 14px 15px 14px 17px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.055);
  transition: transform var(--transition), background var(--transition), border-color var(--transition);
}
.hero-purpose-link:hover {
  transform: translateY(-2px);
  border-color: rgba(201, 168, 76, 0.58);
  background: rgba(255, 255, 255, 0.1);
}
.hero-purpose-link:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}
.hero-purpose-link > span:first-child {
  min-width: 0;
}
.hero-purpose-link strong {
  display: block;
  color: var(--white);
  font-family: var(--font-serif);
  font-size: 1.18rem;
  line-height: 1.15;
}
.hero-purpose-link small {
  display: block;
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.76rem;
  line-height: 1.45;
}
.hero-purpose-arrow {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(201, 168, 76, 0.46);
  border-radius: 50%;
  color: var(--gold);
  font-size: 1rem;
  transition: transform var(--transition), background var(--transition);
}
.hero-purpose-link:hover .hero-purpose-arrow {
  transform: translateX(2px);
  background: rgba(201, 168, 76, 0.12);
}

/* The About page keeps its identity-led panel, now aligned with the shared
   visual system rather than functioning as an isolated decorative logo. */
.about-hero-mark.hero-brand-card {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 10px;
}
.hero-brand-mark {
  display: grid;
  place-items: center;
  width: min(190px, 70%);
  aspect-ratio: 1;
  padding: 10px;
  border: 1px solid rgba(201, 168, 76, 0.34);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
}
.about-hero-mark.hero-brand-card img {
  width: 100%;
  height: auto;
}
.hero-brand-card p {
  margin: 2px 0 0;
  color: var(--gold) !important;
  font-size: 0.69rem !important;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.4 !important;
  text-transform: uppercase;
}
.hero-brand-card > span {
  max-width: 290px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.82rem;
  line-height: 1.55;
}

/* Preserve the bespoke-service promise card as the reference version while
   sharing the same overall hero canvas. */
.editorial-hero .service-hero-card {
  position: relative;
  z-index: 1;
}

@media (max-width: 960px) {
  .editorial-hero .page-hero-inner {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .hero-purpose-card,
  .hero-brand-card,
  .editorial-hero .service-hero-card {
    width: 100%;
    max-width: 680px;
    justify-self: start;
  }
  .about-hero-mark.hero-brand-card {
    justify-self: start;
  }
}

@media (max-width: 480px) {
  .hero-purpose-card,
  .hero-brand-card {
    padding: 22px 18px;
  }
  .hero-purpose-link {
    gap: 12px;
    min-height: 76px;
    padding: 13px 12px 13px 14px;
  }
  .hero-purpose-link strong {
    font-size: 1.08rem;
  }
  .hero-purpose-arrow {
    width: 32px;
    height: 32px;
  }
}

/* =========================================================
   JE_V1.7.1 — Theme Role & Hero Pill Consistency Patch
   ========================================================= */

/* Keep button roles predictable across every page:
   plum = primary action, gold = store/purchase, outline = secondary. */
.hero-primary-cta {
  background: var(--plum);
  box-shadow: 0 8px 28px rgba(90, 42, 79, 0.24);
}
.hero-primary-cta:hover {
  background: var(--plum-dark);
}

/* Match the Bespoke Websites footer CTA to the site's other premium banners.
   Plum remains the primary-action color instead of becoming a competing
   full-width surface. */
.service-final-cta {
  background: linear-gradient(145deg, var(--navy), var(--navy-mid));
  border-top: 1px solid rgba(201, 168, 76, 0.3);
  border-bottom: 1px solid rgba(201, 168, 76, 0.18);
}

/* One shared four-pill desktop / two-pill mobile layout for every editorial
   hero. Equal tracks and fixed pill heights prevent content-driven widths,
   uneven rows, and mobile misalignment. */
.editorial-hero .pain-chip-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  max-width: 680px;
}
.editorial-hero .pain-chip-row span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  height: 42px;
  padding: 6px 10px;
  text-align: center;
  line-height: 1.2;
}

@media (max-width: 620px) {
  .editorial-hero .pain-chip-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .editorial-hero .pain-chip-row span {
    height: 44px;
    padding-inline: 8px;
  }
}

/* =========================================================
   JE_V1.8.0 — Navigation Orientation & Legal Hero Completion
   ========================================================= */

/* Make the current top-level section unmistakable without changing the
   established header height or turning the navigation into heavy tabs. */
.nav-links a:not(.nav-store-btn) {
  position: relative;
}
.nav-links a.active:not(.nav-store-btn),
.nav-links a[aria-current="page"]:not(.nav-store-btn) {
  color: var(--navy);
  font-weight: 700;
}
.nav-links a.active:not(.nav-store-btn)::after,
.nav-links a[aria-current="page"]:not(.nav-store-btn)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--gold), var(--plum));
}

/* Use the exact same navy-to-plum surface as the Products marketplace band. */
.service-final-cta {
  background: linear-gradient(145deg, var(--navy), var(--plum-dark));
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 0;
}

/* Legal pages now use the shared purposeful editorial hero system. */
.legal-hero .page-hero-inner {
  align-items: center;
}
.legal-purpose-card .hero-purpose-links {
  gap: 8px;
}
.legal-purpose-card .hero-purpose-link {
  min-height: 62px;
  padding-top: 11px;
  padding-bottom: 11px;
}
.legal-purpose-card .hero-purpose-link.is-current,
.legal-purpose-card .hero-purpose-link[aria-current="page"] {
  border-color: rgba(201, 168, 76, 0.82);
  background: rgba(201, 168, 76, 0.15);
  box-shadow: inset 3px 0 0 var(--gold);
}
.legal-purpose-card .hero-purpose-link.is-current .hero-purpose-arrow,
.legal-purpose-card .hero-purpose-link[aria-current="page"] .hero-purpose-arrow {
  background: var(--gold);
  color: var(--navy);
}
.legal-purpose-updated {
  margin: 18px 0 0 !important;
  padding-top: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.64) !important;
  font-size: 0.74rem !important;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.4 !important;
  text-transform: uppercase;
}

@media (max-width: 720px) {
  .nav-links.open a:not(.nav-store-btn) {
    width: 100%;
    padding: 7px 12px;
    border-radius: 6px;
  }
  .nav-links.open a.active:not(.nav-store-btn),
  .nav-links.open a[aria-current="page"]:not(.nav-store-btn) {
    background: rgba(201, 168, 76, 0.13);
    box-shadow: inset 3px 0 0 var(--gold);
  }
  .nav-links.open a.active:not(.nav-store-btn)::after,
  .nav-links.open a[aria-current="page"]:not(.nav-store-btn)::after {
    display: none;
  }
}

@media (max-width: 480px) {
  .legal-purpose-card .hero-purpose-link {
    min-height: 66px;
  }
}



/* =========================================================
   JE_V1.8.1 — Blog Editorial Panel System
   ========================================================= */

/* Replace article artwork with the same premium navy-to-plum editorial
   surface used elsewhere on the site while keeping article assets intact for
   social sharing and future reuse. */
.article-card-panel,
.post-featured-panel {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 12%, rgba(201, 168, 76, 0.22), transparent 26%),
    linear-gradient(145deg, var(--navy), var(--plum-dark));
  color: var(--white);
}
.article-card-panel::before,
.post-featured-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: inherit;
  pointer-events: none;
}
.article-card-panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  min-height: 100%;
  padding: 24px 22px;
}
.article-card-panel-kicker,
.post-featured-panel-kicker {
  display: inline-flex;
  align-self: flex-start;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
}
.article-card-panel-title,
.post-featured-panel-title {
  display: block;
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: 1.05;
  color: var(--white);
  text-wrap: balance;
}
.article-card-panel-title {
  font-size: clamp(1.5rem, 1.15rem + 0.8vw, 1.95rem);
}
.article-card-panel-caption,
.post-featured-panel-caption {
  display: block;
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.6;
}
.article-card-panel-caption {
  font-size: 0.86rem;
}
.post-featured-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 148px;
  height: auto;
  padding: 24px 28px;
  margin-bottom: 0;
  border-radius: var(--radius-lg);
  aspect-ratio: auto;
}
.post-featured-panel-title {
  font-size: clamp(1.65rem, 1.35rem + 0.9vw, 2.25rem);
  max-width: 20ch;
}
.post-featured-panel-caption {
  max-width: 34rem;
  font-size: 0.98rem;
}

@media (min-width: 1181px) {
  .article-card {
    grid-template-columns: 260px minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .article-card-panel {
    min-height: 180px;
    padding: 20px 18px;
  }
  .article-card-panel-title {
    font-size: 1.4rem;
  }
  .article-card-panel-caption {
    font-size: 0.84rem;
  }
  .post-featured-panel {
    min-height: 142px;
    padding: 22px 20px;
  }
  .post-featured-panel-title {
    max-width: none;
    font-size: 1.65rem;
  }
  .post-featured-panel-caption {
    font-size: 0.92rem;
  }
}


/* =========================================================
   JE_V1.8.2 — Compact Article Banner Height
   ========================================================= */

/* The individual article banner is now a compact editorial callout rather
   than an image-ratio canvas. Its height remains comparable to the related
   resource banner below while allowing long copy to wrap safely. */

/* =========================================================
   JE_V1.8.3 — Article Banner Typography & Clickable Panels
   ========================================================= */

/* Match the individual article kicker to the Related Resource section label. */
.post-featured-panel-kicker {
  font-size: 0.7rem;
}

/* The main Blog-page editorial panels now act as accessible article links. */
.article-card-panel-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.article-card-panel-link:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: -4px;
}

/* Use the available desktop banner width for one-line headings and captions.
   Smaller screens retain the existing safe wrapping behavior. */
@media (min-width: 900px) {
  .post-featured-panel-title,
  .post-featured-panel-caption {
    max-width: none;
    white-space: nowrap;
  }
}

/* =========================================================
   JE_V1.10.0 — Article Promotion Sidebar System
   ========================================================= */

/* The detailed premium offer remains the primary article card. These compact
   cards add two curated onward paths without interrupting the article body. */
.sidebar-promo-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sidebar-promo-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-height: 168px;
  padding: 22px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  color: var(--white);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.sidebar-promo-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: inherit;
  pointer-events: none;
}
.sidebar-promo-card::after {
  content: "";
  position: absolute;
  width: 130px;
  height: 130px;
  top: -66px;
  right: -46px;
  border-radius: 50%;
  background: rgba(201, 168, 76, 0.16);
  pointer-events: none;
}
.sidebar-promo-card--navy {
  background: linear-gradient(145deg, var(--navy), var(--navy-mid));
}
.sidebar-promo-card--plum {
  background: linear-gradient(145deg, var(--plum-dark), var(--plum));
}
.sidebar-promo-card:hover {
  color: var(--white);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.sidebar-promo-card:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}
.sidebar-promo-card-kicker {
  position: relative;
  z-index: 1;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.sidebar-promo-card-title {
  position: relative;
  z-index: 1;
  display: block;
  font-family: var(--font-serif);
  font-size: 1.35rem;
  line-height: 1.08;
  color: var(--white);
}
.sidebar-promo-card-copy {
  position: relative;
  z-index: 1;
  display: block;
  font-size: 0.84rem;
  line-height: 1.58;
  color: rgba(255, 255, 255, 0.76);
}
.sidebar-promo-card-cta {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: auto;
  padding-top: 5px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--gold-light);
}

@media (max-width: 960px) {
  /* Once the article layout stacks, keep the promotional links together after
     the completed article and make them easy to scan without interrupting it. */
  .sidebar-promo-stack {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .sidebar-promo-stack {
    grid-template-columns: 1fr;
  }
  .sidebar-promo-card {
    min-height: 154px;
  }
}

/* =========================================================
   JE_V2.4.0 — Editorial Archive And Related Guide Discovery
   ========================================================= */

.blog-archive-intro {
  max-width: 720px;
  margin: -12px 0 20px;
  color: var(--text-muted);
  line-height: 1.7;
}
.blog-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}
.blog-filter-button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--white);
  color: var(--navy);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), color var(--transition), transform var(--transition);
}
.blog-filter-button:hover {
  border-color: var(--plum);
  color: var(--plum);
  transform: translateY(-1px);
}
.blog-filter-button[aria-pressed="true"] {
  border-color: var(--navy);
  background: var(--navy);
  color: var(--white);
}
.blog-filter-button:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}
.blog-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--cream-dark);
  color: var(--text-muted);
  font-size: 0.7rem;
}
.blog-filter-button[aria-pressed="true"] .blog-filter-count {
  background: rgba(255,255,255,0.14);
  color: var(--gold-light);
}
.blog-archive-status {
  margin: 0 0 24px;
  color: var(--text-muted);
  font-size: 0.82rem;
}
.article-card[hidden] { display: none !important; }
.editorial-path-list a[aria-current="true"] {
  color: var(--plum);
  font-weight: 700;
}

.related-guides {
  margin-top: 40px;
  padding-top: 34px;
  border-top: 1px solid var(--border);
}
.related-guides-head {
  max-width: 650px;
  margin-bottom: 20px;
}
.related-guides-head .section-label { margin-bottom: 7px; }
.related-guides-head h2 {
  margin-bottom: 8px;
  font-size: clamp(1.55rem, 2.5vw, 2rem);
}
.related-guides-head > p:last-child {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.65;
}
.related-guides-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.related-guide-card {
  display: flex;
  flex-direction: column;
  min-height: 220px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
  color: var(--text-body);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.related-guide-card:hover {
  color: var(--text-body);
  border-color: rgba(90,42,79,0.35);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.related-guide-card:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}
.related-guide-tag {
  margin-bottom: 10px;
  color: var(--plum);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.related-guide-card strong {
  color: var(--navy);
  font-family: var(--font-serif);
  font-size: 1.18rem;
  line-height: 1.12;
}
.related-guide-copy {
  margin-top: 10px;
  color: var(--text-muted);
  font-size: 0.8rem;
  line-height: 1.55;
}
.related-guide-cta {
  margin-top: auto;
  padding-top: 16px;
  color: var(--plum);
  font-size: 0.76rem;
  font-weight: 700;
}

@media (max-width: 1100px) {
  .related-guides-grid { grid-template-columns: 1fr; }
  .related-guide-card { min-height: 0; }
}
@media (max-width: 720px) {
  .blog-filter-bar { gap: 8px; }
  .blog-filter-button { width: 100%; justify-content: space-between; }
  .related-guides { margin-top: 34px; padding-top: 28px; }
}

/* =========================================================
   JE_V2.4.1 — Article Column Top-Edge Alignment Repair
   ========================================================= */

@media (min-width: 961px) {
  /* The shared post grid already supplies the spacing below the hero.
     Remove the article-only inset so the first content card and sidebar
     begin on the same horizontal line across every live blog article. */
  .post-layout > .post-content {
    padding-top: 0;
  }
}

/* =========================================================
   JE_V2.4.2 — Blog Archive Sidebar Top-Edge Alignment Repair
   ========================================================= */

@media (min-width: 961px) {
  /* Keep the Editorial Paths card level with the Article Archive
     heading. The earlier shared sidebar offset was intended for the
     old archive structure and is no longer appropriate here. */
  #article-archive .blog-sidebar {
    margin-top: 0;
  }
}


/* =========================================================
   JE_V2.5.0 — Editorial Conversion Path & Mobile CTA Balance
   ========================================================= */

@media (max-width: 620px) {
  /* Give the primary in-article action the same clear tap target and visual
     weight as the stacked article-footer actions on small screens. */
  .inline-product-callout .btn,
  .tool-callout-card .btn {
    width: 100%;
    min-height: 52px;
  }
}

/* =========================================================
   JE_V2.5.1 — JE Blog Archive Filter Alignment
   ========================================================= */

/* Keep the four archive filters on an intentional equal-width 2 × 2 grid
   instead of allowing one final pill to wrap by itself. The archive shares
   its desktop row with the sidebar, so two balanced columns preserve the
   labels and counts without squeezing them. */
.blog-filter-bar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}
.blog-filter-button {
  justify-content: space-between;
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 9px 12px;
}
.blog-filter-button > span:first-child {
  min-width: 0;
  line-height: 1.2;
}
.blog-filter-count {
  flex: 0 0 auto;
}

@media (max-width: 620px) {
  .blog-filter-bar {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* ==========================================================
   JE_V2.6.0 — Jaswal Ecosystem Build
   Footer eco-row, portfolio strip, PDP contextual note
   ========================================================== */

.footer-eco {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: 40px;
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}
.footer-eco-label {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--gold);
  margin: 0;
}
.footer-eco-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 22px;
}
.footer-eco-links a {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  transition: var(--transition);
}
.footer-eco-links a:hover,
.footer-eco-links a:focus-visible {
  color: var(--gold);
}

.eco-portfolio {
  background: var(--navy);
  padding: 26px 0;
}
.eco-portfolio-inner {
  text-align: center;
}
.eco-portfolio-label {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 10px;
}
.eco-portfolio-brands {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 8px 14px;
}
.eco-portfolio-brands a {
  font-family: var(--font-serif);
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--cream);
  text-decoration: none;
  transition: var(--transition);
}
.eco-portfolio-brands a:hover,
.eco-portfolio-brands a:focus-visible {
  color: var(--gold);
}
.eco-portfolio-brands span {
  color: rgba(255, 255, 255, 0.35);
}
.eco-portfolio-note {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 12px auto 0;
  max-width: 560px;
}

.about-eco a {
  color: var(--plum);
  font-weight: 600;
}

.pdp-eco-note {
  background: var(--cream-dark);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: 0.92rem;
}

@media (max-width: 620px) {
  .footer-eco {
    gap: 10px;
  }
  .footer-eco-links {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .eco-portfolio-brands span {
    display: none;
  }
  .eco-portfolio-brands {
    flex-direction: column;
    gap: 8px;
  }
}