/*
Theme Name: Aurumane
Theme URI: https://aurumane.com
Author: Terrell Anderson
Author URI: https://aurumane.com
Description: A premium custom theme for the Aurumane plugin brand. Editorial, refined, and serif-forward — built specifically to showcase WordPress plugins with credibility.
Version: 1.11.1
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: aurumane
Tags: custom-theme, plugin-showcase, premium, serif, gold
*/

/* =========================================================================
   1. DESIGN TOKENS
   ========================================================================= */
:root {
  /* Backgrounds — slightly cleaner, less yellow-warm */
  --c-bg:           #FAFAF7;   /* near-white with hint of warmth */
  --c-bg-soft:      #F2EFE7;   /* soft cream for accent panels */
  --c-panel:        #FFFFFF;   /* pure white */
  --c-ink-bg:       #1A1714;   /* deep ink (footer / inverted) */

  /* Gold palette — unchanged, this is the brand */
  --c-gold:         #C9A84C;   /* warm gold — primary */
  --c-gold-deep:    #A67C2E;   /* antique gold — accents, hover */
  --c-gold-light:   #E8D5A3;   /* champagne — soft highlight */

  /* Text — slightly cooler, more modern */
  --c-text:         #1F1B16;   /* near-black */
  --c-text-soft:    #54504A;   /* secondary */
  --c-text-mute:    #87827A;   /* tertiary / labels */
  --c-text-inv:     #F5F1E8;   /* on dark backgrounds */

  /* Lines & dividers */
  --c-line:         #E5DDC8;   /* hairline gold */
  --c-line-soft:    #ECE7D6;   /* subtle */

  /* Typography — sans for body/UI, serif for display */
  --f-sans:  'Geist', 'Inter', system-ui, -apple-system, sans-serif;
  --f-serif: 'Source Serif 4', 'Source Serif Pro', 'Iowan Old Style', Georgia, serif;
  --f-mono:  'JetBrains Mono', 'SF Mono', Consolas, monospace;

  /* Sizing — outer layout containers all aligned to 1240px for a
     consistent shell. Narrow (880px) is reserved for reading-focused
     sections (prose, lists, calls-to-action) where line length matters. */
  --container:        1240px;
  --container-narrow: 880px;
  --container-wide:   1240px;

  /* Radius — modern but restrained */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;

  /* Spacing scale */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;

  /* Motion */
  --ease: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* =========================================================================
   2. RESET & BASE
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  font-feature-settings: "kern" 1, "liga" 1, "ss01" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: var(--c-gold-deep);
  text-decoration: none;
  transition: color 0.25s var(--ease);
}
a:hover { color: var(--c-gold); }

p { margin: 0 0 1.2em; }

/* Display headings — always serif */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--f-serif);
  font-weight: 500;
  color: var(--c-text);
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0 0 0.6em;
}

h1 { font-size: clamp(2.4rem, 5.5vw, 4.4rem); font-weight: 400; letter-spacing: -0.025em; }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 400; letter-spacing: -0.02em; }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-weight: 500; }
h4 { font-size: 1.1rem; font-weight: 600; }

/* =========================================================================
   3. LAYOUT PRIMITIVES
   ========================================================================= */
.container        { max-width: var(--container);        margin: 0 auto; padding: 0 var(--s-5); }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--s-5); }
.container-wide   { max-width: var(--container-wide);   margin: 0 auto; padding: 0 var(--s-5); }

.section { padding: var(--s-9) 0; }
.section-tight { padding: var(--s-7) 0; }

.divider {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin: var(--s-7) 0;
}
.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--c-line);
}
.divider span {
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-text-mute);
  font-weight: 600;
}

.ornament {
  display: block;
  text-align: center;
  margin: var(--s-7) auto;
  color: var(--c-gold);
  letter-spacing: 1.5rem;
  font-size: 0.7rem;
}
.ornament::before { content: "◆ ◆ ◆"; }

/* Eyebrow label */
.eyebrow {
  font-family: var(--f-sans);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-gold-deep);
  font-weight: 600;
  display: inline-block;
  margin-bottom: var(--s-4);
}

/* Lead paragraph — sans for body, slightly larger and looser */
.lead {
  font-family: var(--f-sans);
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.6;
  color: var(--c-text-soft);
  font-weight: 400;
}

/* =========================================================================
   4. BUTTONS — final restrained system
   No decorative animation. Polish comes from quality of the static state,
   a subtle 1px lift on hover, a soft directional shadow, and a tight
   border-color crossfade. Text and background stay rock-steady.
   ========================================================================= */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: 0.85em 1.6em;
  font-family: var(--f-sans);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  border-radius: var(--r-sm);
  background: transparent;
  min-height: 44px;
  transition:
    transform 0.2s var(--ease),
    box-shadow 0.35s ease,
    border-color 0.3s ease;
}

.btn:active {
  transform: scale(0.97);
  transition: transform 0.08s var(--ease);
}

/* Primary — charcoal, white text. Border warms toward antique gold on hover. */
.btn-primary {
  background-color: var(--c-text);
  color: var(--c-text-inv);
  border-color: var(--c-text);
  background-image: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0));
}
.btn-primary:hover {
  color: var(--c-text-inv);
  border-color: var(--c-gold-deep);
  transform: translateY(-1px);
  box-shadow:
    0 10px 22px -10px rgba(166, 124, 46, 0.45),
    0 2px 4px -2px rgba(31, 27, 22, 0.12);
}

/* Gold — warm gold background, dark charcoal text for contrast and refinement */
.btn-gold {
  background-color: var(--c-gold);
  color: var(--c-text);
  border-color: var(--c-gold);
  background-image: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0));
}
.btn-gold:hover {
  color: var(--c-text);
  border-color: var(--c-gold-deep);
  transform: translateY(-1px);
  box-shadow:
    0 12px 24px -10px rgba(166, 124, 46, 0.55),
    0 2px 4px -2px rgba(166, 124, 46, 0.25);
}

/* Ghost — transparent, dark text. Border crossfades to gold on hover. */
.btn-ghost {
  background-color: transparent;
  color: var(--c-text);
  border-color: var(--c-text);
}
.btn-ghost:hover {
  color: var(--c-text);
  border-color: var(--c-gold-deep);
  transform: translateY(-1px);
  box-shadow:
    0 8px 18px -10px rgba(166, 124, 46, 0.32),
    0 2px 4px -2px rgba(31, 27, 22, 0.08);
}

/* Link — minimal underline */
.btn-link {
  padding: 0.5em 0;
  color: var(--c-gold-deep);
  border-bottom: 1px solid var(--c-gold);
  border-radius: 0;
  min-height: auto;
}
.btn-link:hover {
  color: var(--c-gold);
  border-bottom-color: var(--c-gold-deep);
  transform: none;
  box-shadow: none;
}
.btn-link:active { transform: none; }

/* Arrow indicator */
.btn-arrow::after {
  content: "→";
  display: inline-block;
  transition: transform 0.25s var(--ease);
}
.btn-arrow:hover::after { transform: translateX(4px); }

/* Reduced-motion users: only color and border changes, no movement */
@media (prefers-reduced-motion: reduce) {
  .btn { transition: border-color 0.2s, box-shadow 0.2s; }
  .btn:hover { transform: none; }
  .btn:active { transform: none; }
  .btn-arrow::after { transition: none; }
}

/* =========================================================================
   5. HEADER / NAV
   ========================================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--c-bg);
  /* Fine gold rule under the nav, replacing the soft beige line */
  border-bottom: 1px solid var(--c-line);
  box-shadow: 0 1px 0 0 rgba(166, 124, 46, 0.18);
  will-change: transform;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  transition: box-shadow 200ms ease;
}
/* Compressed state — applied via JS once user scrolls past 60px */
.site-header.is-scrolled {
  box-shadow: 0 1px 0 0 rgba(166, 124, 46, 0.28), 0 8px 24px -16px rgba(31, 27, 22, 0.18);
}
.site-header.is-scrolled .site-header__status { display: none; }
.site-header.is-scrolled .site-header__inner {
  padding-top: var(--s-2);
  padding-bottom: var(--s-2);
}
.site-header.is-scrolled .site-brand__shield { height: 36px; }
.site-header.is-scrolled .custom-logo { height: 36px; }
.site-header.is-scrolled .site-brand__name { font-size: 1.2rem; }

/* WordPress admin bar offset (only when logged in) */
.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
}
@media screen and (max-width: 600px) {
  /* On phones the admin bar becomes position:absolute and stops sticking,
     so revert the header to top:0 below 600px. */
  .admin-bar .site-header { top: 0; }
}

/* TOP STATUS BAR — monospace strip with studio metadata */
.site-header__status {
  background: var(--c-bg-cream);
  border-bottom: 1px solid var(--c-line);
}
.site-header__status-inner {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0.45rem var(--s-5);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.4rem;
  font-family: 'Geist Mono', ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--c-text-mute);
}
.site-header__status-item {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
}
.site-header__status-item--right {
  margin-left: auto;
}
.site-header__status-label {
  color: var(--c-text-mute);
}
.site-header__status-value {
  color: var(--c-text);
  font-weight: 600;
}
.site-header__status-value.gold {
  color: var(--c-gold-deep);
  letter-spacing: 0.14em;
}
.site-header__status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2E7D5B;
  box-shadow: 0 0 0 2px rgba(46, 125, 91, 0.20);
  display: inline-block;
  align-self: center;
}
@media (max-width: 600px) {
  /* Hide the meta items on phones; keep just the operational pill on the right */
  .site-header__status-inner { padding: 0.4rem var(--s-4); gap: 0.8rem; }
  .site-header__status-item:not(.site-header__status-item--right) { display: none; }
}

.site-header__inner {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: var(--s-4) var(--s-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  transition: padding 200ms ease;
}

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  text-decoration: none;
  color: var(--c-text);
  transition: transform 200ms ease;
}
.site-brand:hover {
  transform: translateY(-1px);
}

/* Bundled shield image (used when no Customizer logo is set) */
.site-brand__shield {
  display: block;
  height: 44px;
  width: auto;
  flex-shrink: 0;
  transition: height 200ms ease;
  transition: height 200ms ease;
}

/* WordPress custom logo (uploaded via Customizer → Site Identity) */
.site-brand .custom-logo {
  display: block;
  height: 44px;
  width: auto;
  max-width: 280px;
  transition: height 200ms ease;
}
.site-brand .custom-logo-link { line-height: 0; }

/* Legacy text-only fallback mark (only used if shield image is missing) */
.site-brand__mark {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-gold-light), var(--c-gold), var(--c-gold-deep));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-text);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.site-brand__name {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
  transition: font-size 200ms ease;
}
.site-brand__name .gold {
  color: var(--c-gold-deep);
  font-weight: 600;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--s-5);
}

.site-nav__menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0.3rem;
}

.site-nav__menu a {
  font-family: var(--f-sans);
  color: var(--c-text);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  position: relative;
  padding: 0.5rem 0.85rem;
  border-radius: 6px;
  text-decoration: none;
  transition: background 180ms ease, color 180ms ease;
}
.site-nav__menu a:hover {
  background: var(--c-bg-cream);
  color: var(--c-gold-deep);
}
.site-nav__menu .current-menu-item a,
.site-nav__menu .current_page_item a {
  color: var(--c-gold-deep);
  background: var(--c-bg-cream);
}

/* Primary CTA in the nav — replaces the old btn-ghost "Browse plugins" */
.site-nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.1rem;
  background: var(--c-text);
  color: var(--c-text-inv);
  font-family: var(--f-sans);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none;
  border-radius: 6px;
  border: 1px solid var(--c-text);
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.site-nav__cta:hover {
  background: var(--c-gold-deep);
  border-color: var(--c-gold-deep);
  color: var(--c-text-inv);
  transform: translateY(-1px);
}
.site-nav__cta:active {
  transform: translateY(0);
}

.menu-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--c-text);
  border-radius: var(--r-sm);
  width: 44px;
  height: 44px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.menu-toggle span {
  display: block;
  width: 18px;
  height: 1px;
  background: var(--c-text);
  position: relative;
}
.menu-toggle span::before,
.menu-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 1px;
  background: var(--c-text);
}
.menu-toggle span::before { top: -6px; }
.menu-toggle span::after  { top: 6px; }

@media (max-width: 880px) {
  .menu-toggle { display: inline-flex; }
  .site-nav { display: none; }
  .site-nav.is-open {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--c-bg);
    border-bottom: 1px solid var(--c-line);
    padding: var(--s-5);
    flex-direction: column;
    align-items: stretch;
  }
  .site-nav.is-open .site-nav__menu {
    flex-direction: column;
    gap: var(--s-4);
  }
  .site-nav.is-open .btn { width: 100%; }
}

/* =========================================================================
   6. HERO (HOMEPAGE)
   ========================================================================= */
.hero {
  position: relative;
  padding: var(--s-10) 0 var(--s-9);
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 12% 20%, rgba(232, 213, 163, 0.4) 0%, transparent 55%),
    radial-gradient(ellipse at 88% 75%, rgba(201, 168, 76, 0.15) 0%, transparent 50%),
    linear-gradient(180deg, var(--c-bg) 0%, var(--c-bg-soft) 100%);
}

/* Subtle dot grid layer adds perceptible texture without noise */
.hero__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(166, 124, 46, 0.08) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: 0 0;
  mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
  pointer-events: none;
}

/* Floating decorative gold orbs — pure CSS, very low opacity */
.hero__bg::after {
  content: "";
  position: absolute;
  top: 60%;
  left: 8%;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(232, 213, 163, 0.18), transparent 65%);
  pointer-events: none;
  filter: blur(20px);
}

.hero__inner {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--s-5);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
}

@media (min-width: 980px) {
  .hero__inner {
    grid-template-columns: 1.2fr 1fr;
    gap: var(--s-9);
    align-items: center;
  }
}

.hero__title {
  font-size: clamp(2.6rem, 6vw, 5.2rem);
  line-height: 1.05;
  font-weight: 300;
  letter-spacing: -0.025em;
  margin-bottom: var(--s-5);
}
.hero__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--c-gold-deep);
}
.hero__title .gold-rule {
  display: inline-block;
  position: relative;
}
.hero__title .gold-rule::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.05em;
  height: 0.18em;
  background: var(--c-gold-light);
  z-index: -1;
}

.hero__lead {
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  line-height: 1.6;
  color: var(--c-text-soft);
  font-weight: 300;
  margin-bottom: var(--s-7);
  max-width: 560px;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  align-items: center;
}

.hero__visual {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--c-panel);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  max-width: 100%;
  padding: var(--s-6);
}

/* Subtle gold accent corners — restrained alternative to a full-bleed gold block */
.hero__visual::before,
.hero__visual::after {
  content: "";
  position: absolute;
  width: 32px;
  height: 32px;
  border-color: var(--c-gold);
  border-style: solid;
  border-width: 0;
}
.hero__visual::before {
  top: var(--s-4);
  left: var(--s-4);
  border-top-width: 1px;
  border-left-width: 1px;
}
.hero__visual::after {
  bottom: var(--s-4);
  right: var(--s-4);
  border-bottom-width: 1px;
  border-right-width: 1px;
}

/* Real custom logo (when set in Customizer) */
.hero__logo {
  max-width: 70%;
  max-height: 60%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Placeholder content (when no logo is set yet) */
.hero__logo-placeholder {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
}
.hero__logo-shield {
  width: 140px;
  height: auto;
  display: block;
}
.hero__logo-mark {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-gold-light), var(--c-gold), var(--c-gold-deep));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-serif);
  font-size: 3.4rem;
  font-weight: 400;
  font-style: italic;
  color: var(--c-text);
  letter-spacing: -0.04em;
  line-height: 1;
  box-shadow: 0 8px 24px -10px rgba(166, 124, 46, 0.4);
}
.hero__logo-name {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 1.7rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--c-text);
  line-height: 1;
  margin-top: var(--s-3);
}
.hero__logo-name .gold {
  color: var(--c-gold-deep);
  font-weight: 600;
}
.hero__logo-meta {
  font-family: var(--f-sans);
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-text-mute);
  font-weight: 600;
}

/* On tablet & below, switch to landscape orientation and cap height
   so the hero block doesn't dominate the viewport. */
@media (max-width: 979px) {
  .hero__visual {
    aspect-ratio: 16 / 9;
    max-height: 280px;
    margin: 0 auto;
    width: 100%;
    max-width: 540px;
    padding: var(--s-5);
  }
  .hero__logo-shield { width: 100px; }
  .hero__logo-mark { width: 72px; height: 72px; font-size: 2.6rem; }
  .hero__logo-name { font-size: 1.6rem; }
}
@media (max-width: 540px) {
  .hero__visual { max-height: 220px; padding: var(--s-4); }
  .hero__visual::before,
  .hero__visual::after { width: 22px; height: 22px; }
  .hero__logo-shield { width: 80px; }
  .hero__logo-mark { width: 60px; height: 60px; font-size: 2.1rem; }
  .hero__logo-name { font-size: 1.35rem; }
  .hero__logo-meta { font-size: 0.65rem; letter-spacing: 0.22em; }
}

/* =========================================================================
   7. SECTION HEADERS
   ========================================================================= */
.section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--s-8);
}
.section-head__title {
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 400;
  margin-bottom: var(--s-4);
}
.section-head__lead {
  font-size: 1.15rem;
  color: var(--c-text-soft);
  font-weight: 300;
}

.section-head--left {
  text-align: left;
  margin-left: 0;
}

/* =========================================================================
   7b. SECTION VARIANTS — adds visual rhythm to long pages
   ========================================================================= */

/* Soft tinted variant: cream background with very subtle gold radial glow */
.section--tinted {
  position: relative;
  background: var(--c-bg-soft);
}
.section--tinted::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 90% 10%, rgba(201, 168, 76, 0.08) 0%, transparent 45%),
    radial-gradient(ellipse at 10% 90%, rgba(232, 213, 163, 0.12) 0%, transparent 50%);
  pointer-events: none;
}
.section--tinted > * { position: relative; }

/* Inked variant: dark section used to anchor brand statement moments */
.section--inked {
  background: var(--c-ink-bg);
  color: var(--c-text-inv);
  position: relative;
  overflow: hidden;
}
.section--inked::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(201, 168, 76, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 30%, rgba(232, 213, 163, 0.08) 0%, transparent 45%);
  pointer-events: none;
}
.section--inked > * { position: relative; }
.section--inked h2,
.section--inked h3,
.section--inked .section-head__title { color: var(--c-text-inv); }
.section--inked .section-head__lead,
.section--inked .lead { color: rgba(245, 241, 232, 0.78); }
.section--inked .eyebrow { color: var(--c-gold-light); }

/* Framed variant: subtle gold corner brackets on top corners of section */
.section--framed { position: relative; }
.section--framed::before,
.section--framed::after {
  content: "";
  position: absolute;
  top: var(--s-6);
  width: 56px;
  height: 56px;
  border-color: var(--c-gold);
  border-style: solid;
  border-width: 0;
  pointer-events: none;
  opacity: 0.45;
}
.section--framed::before {
  left: var(--s-5);
  border-top-width: 1px;
  border-left-width: 1px;
}
.section--framed::after {
  right: var(--s-5);
  border-top-width: 1px;
  border-right-width: 1px;
}

/* Decorative gold-rule break — three small marks centered */
.gold-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  margin: 0 auto var(--s-6);
  padding-top: var(--s-2);
}
.gold-rule__line {
  display: block;
  width: 32px;
  height: 1px;
  background: var(--c-gold);
}
.gold-rule__diamond {
  display: block;
  width: 6px;
  height: 6px;
  background: var(--c-gold);
  transform: rotate(45deg);
  flex-shrink: 0;
}

/* =========================================================================
   7c. WORKFLOW PREVIEW GRID — homepage screenshots section
   ========================================================================= */
.workflow-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
}
@media (min-width: 720px) {
  .workflow-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1020px) {
  .workflow-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
}

.workflow-card {
  display: flex;
  flex-direction: column;
  background: var(--c-panel);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition:
    transform 0.4s var(--ease-out),
    border-color 0.3s ease,
    box-shadow 0.5s var(--ease-out);
}
.workflow-card:hover {
  border-color: var(--c-gold);
  transform: translateY(-3px);
  box-shadow:
    0 18px 36px -18px rgba(166, 124, 46, 0.28),
    0 4px 10px -4px rgba(31, 27, 22, 0.06);
}

.workflow-card__shot {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #f0f0f1;
  overflow: hidden;
  border-bottom: 1px solid var(--c-line-soft);
}
.workflow-card__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  display: block;
  transition: transform 0.6s var(--ease-out);
}
.workflow-card:hover .workflow-card__shot img {
  transform: scale(1.02);
}

.workflow-card__body {
  padding: var(--s-5) var(--s-5) var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  flex: 1;
}
.workflow-card__title {
  font-family: var(--f-serif);
  font-size: 1.3rem;
  font-weight: 500;
  margin: 0;
  letter-spacing: -0.015em;
  color: var(--c-text);
}
.workflow-card__tagline {
  font-family: var(--f-sans);
  font-size: 0.95rem;
  color: var(--c-text-soft);
  line-height: 1.5;
  margin: 0;
  flex-grow: 1;
}
.workflow-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--f-sans);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--c-gold-deep);
  margin-top: var(--s-3);
  letter-spacing: -0.005em;
}
.workflow-card__cta span {
  transition: transform 0.25s var(--ease);
  display: inline-block;
}
.workflow-card:hover .workflow-card__cta span {
  transform: translateX(4px);
}

/* =========================================================================
   8. PLUGIN DISPLAYS — GRID (legacy) + SPEC STACK (current) + FILTER
   ========================================================================= */

/* SPEC STACK — used on homepage (newest 3) and archive (all, filtered) */
.plugin-stack {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.plugin-stack__footer {
  margin-top: var(--s-5);
  text-align: center;
}
.plugin-stack__empty {
  text-align: center;
  padding: var(--s-7) var(--s-4);
}

.spec {
  display: grid;
  grid-template-columns: 280px 1fr 200px;
  background: var(--c-panel);
  border: 1px solid var(--c-line);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.spec:hover {
  border-color: var(--c-gold-deep);
  box-shadow: 0 18px 36px -28px rgba(31, 27, 22, 0.25);
  transform: translateY(-1px);
}
@media (max-width: 900px) {
  .spec { grid-template-columns: 1fr; }
}

/* Identity zone (left, cream bg) */
.spec__id {
  background: var(--c-bg-cream, #F2EFE7);
  padding: 1.6rem 1.4rem;
  border-right: 1px solid var(--c-line);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
}
@media (max-width: 900px) {
  .spec__id { border-right: 0; border-bottom: 1px solid var(--c-line); }
}
.spec__id-name {
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 500;
  font-size: 1.4rem;
  margin: 0 0 0.5rem;
  letter-spacing: 0.005em;
  line-height: 1.15;
}
.spec__id-name a {
  color: var(--c-text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.spec__id-name a:hover {
  color: var(--c-gold-deep);
  border-bottom-color: var(--c-gold-deep);
}
.spec__id-tagline {
  font-size: 0.92rem;
  color: var(--c-text-soft);
  line-height: 1.45;
  margin: 0;
}
.spec__id-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.2rem 1rem;
  margin: 0;
  font-family: 'Geist Mono', ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 0.72rem;
  color: var(--c-text-mute);
}
.spec__id-meta dt { font-weight: 500; }
.spec__id-meta dd { margin: 0; }
.spec__id-meta .v { color: var(--c-text); font-weight: 500; }
.spec__id-meta .v.gold { color: var(--c-gold-deep); }

/* Body zone (middle, white bg) */
.spec__body {
  padding: 1.6rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.spec__body-section { }
.spec__body-h {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-text-mute);
  font-weight: 600;
  margin-bottom: 0.4rem;
}
.spec__body-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--c-text);
  margin: 0;
}
.spec__features {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.spec__feature {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  padding: 0.2rem 0.55rem;
  border-radius: 3px;
  color: var(--c-text-soft);
}

/* Action zone (right, light bg) */
.spec__action {
  background: var(--c-bg);
  padding: 1.4rem;
  border-left: 1px solid var(--c-line);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (max-width: 900px) {
  .spec__action { border-left: 0; border-top: 1px solid var(--c-line); }
}
.spec__action > div {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.spec__price {
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--c-text);
}
.spec__price .currency {
  color: var(--c-text-mute);
  font-size: 0.65em;
  margin-right: 0.05em;
  vertical-align: super;
}
.spec__price-meta {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--c-text-mute);
  margin-top: -0.3rem;
  margin-bottom: 0.4rem;
}
.spec__btn {
  display: block;
  text-align: center;
  background: var(--c-text);
  color: var(--c-text-inv);
  padding: 0.7em 1em;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
  border: 1px solid var(--c-text);
  transition: background 200ms ease, color 200ms ease;
}
.spec__btn:hover {
  background: var(--c-gold-deep);
  border-color: var(--c-gold-deep);
  color: var(--c-text-inv);
}
.spec__btn--disabled {
  background: var(--c-line);
  border-color: var(--c-line);
  color: var(--c-text-mute);
  pointer-events: none;
  cursor: default;
}
.spec__btn-ghost {
  display: block;
  text-align: center;
  background: transparent;
  color: var(--c-text);
  padding: 0.6em 1em;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.85rem;
  border: 1px solid var(--c-line);
  transition: border-color 200ms ease, color 200ms ease;
}
.spec__btn-ghost:hover {
  border-color: var(--c-gold-deep);
  color: var(--c-gold-deep);
}

/* PLUGIN FILTER — auto-populated category chips on the archive page */
.plugin-filter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--c-line);
}
.plugin-filter__label {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--c-text-mute);
  font-weight: 600;
}
.plugin-filter__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.plugin-filter__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4em 0.85em;
  background: var(--c-panel);
  border: 1px solid var(--c-line);
  border-radius: 999px;
  text-decoration: none;
  color: var(--c-text);
  font-size: 0.85rem;
  font-weight: 500;
  transition: border-color 200ms ease, color 200ms ease, background 200ms ease;
}
.plugin-filter__chip:hover {
  border-color: var(--c-gold-deep);
  color: var(--c-gold-deep);
}
.plugin-filter__chip.is-active {
  background: var(--c-text);
  border-color: var(--c-text);
  color: var(--c-text-inv);
}
.plugin-filter__chip.is-active:hover {
  background: var(--c-gold-deep);
  border-color: var(--c-gold-deep);
  color: var(--c-text-inv);
}
.plugin-filter__count {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--c-text-mute);
  padding: 0.05em 0.5em;
  background: var(--c-bg-cream);
  border-radius: 999px;
}
.plugin-filter__chip.is-active .plugin-filter__count {
  background: rgba(245, 241, 232, 0.15);
  color: var(--c-text-inv);
}

/* "View all plugins →" link style for plugin-stack footer */
.btn-arrow-link {
  display: inline-block;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--c-text);
  text-decoration: none;
  border-bottom: 1px solid var(--c-gold-deep);
  padding-bottom: 2px;
  transition: color 200ms ease;
}
.btn-arrow-link:hover { color: var(--c-gold-deep); }

/* PLUGIN GRID — legacy card layout, retained for any other places that may use it */
.plugin-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
}
@media (min-width: 720px)  { .plugin-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .plugin-grid { grid-template-columns: repeat(3, 1fr); } }

.plugin-card {
  position: relative;
  background: var(--c-panel);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  transition:
    transform 0.4s var(--ease-out),
    border-color 0.4s var(--ease-out),
    box-shadow 0.5s var(--ease-out);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  will-change: transform;
}

.plugin-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--c-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}

/* Soft gold "glow" layer that fades in on hover */
.plugin-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: radial-gradient(circle at 80% 0%, rgba(201, 168, 76, 0.06), transparent 60%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease-out);
}

.plugin-card:hover {
  border-color: var(--c-gold);
  transform: translateY(-4px);
  box-shadow:
    0 22px 44px -22px rgba(166, 124, 46, 0.32),
    0 6px 14px -6px rgba(31, 27, 22, 0.08);
}
.plugin-card:hover::before { transform: scaleX(1); }
.plugin-card:hover::after { opacity: 1; }

.plugin-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--c-line-soft);
}

.plugin-card__title {
  font-family: var(--f-serif);
  font-size: 1.4rem;
  font-weight: 500;
  margin: 0;
  letter-spacing: -0.015em;
}

.plugin-card__price {
  font-family: var(--f-sans);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-gold-deep);
  font-weight: 600;
  white-space: nowrap;
}

.plugin-card__tagline {
  font-family: var(--f-sans);
  color: var(--c-text-soft);
  font-size: 0.97rem;
  line-height: 1.55;
  margin: 0;
  flex-grow: 1;
}

.plugin-card__cta {
  font-family: var(--f-sans);
  margin-top: var(--s-3);
  font-size: 0.88rem;
  color: var(--c-gold-deep);
  font-weight: 600;
  letter-spacing: -0.005em;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.plugin-card__cta::after {
  content: "→";
  transition: transform 0.3s var(--ease);
}
.plugin-card:hover .plugin-card__cta::after { transform: translateX(4px); }

/* =========================================================================
   9. PLUGIN SINGLE PAGE
   ========================================================================= */
.plugin-hero {
  position: relative;
  padding: var(--s-9) 0 var(--s-8);
  border-bottom: 1px solid var(--c-line);
  background:
    radial-gradient(ellipse at 80% 0%, rgba(232, 213, 163, 0.35) 0%, transparent 60%),
    var(--c-bg);
}

.plugin-hero__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--s-5);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
}

@media (min-width: 900px) {
  .plugin-hero__inner { grid-template-columns: 1.4fr 1fr; gap: var(--s-8); align-items: start; }
}

.plugin-hero__title {
  font-size: clamp(2.5rem, 5.5vw, 4.5rem);
  font-weight: 300;
  letter-spacing: -0.025em;
  margin: var(--s-3) 0 var(--s-5);
  line-height: 1.05;
}

/* Document-style metadata strip above the title — echoes the DOC. AS-1 treatment
   on the homepage Standard. Reads "PLUGIN · LOGINSENTINEL · v1.0.0 · MAY 2026". */
.plugin-hero__doc-meta {
  display: flex;
  align-items: baseline;
  gap: 1.4rem;
  flex-wrap: wrap;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--c-text-mute);
  font-weight: 600;
  text-transform: uppercase;
  padding-bottom: 0.9rem;
  margin-bottom: 1.2rem;
  border-bottom: 1px dashed var(--c-line);
}
.plugin-hero__doc-id { color: var(--c-text); }
.plugin-hero__doc-rev { color: var(--c-gold-deep); }
.plugin-hero__doc-date { margin-left: auto; }
@media (max-width: 600px) {
  .plugin-hero__doc-meta { gap: 0.8rem; font-size: 0.65rem; }
  .plugin-hero__doc-date { margin-left: 0; width: 100%; }
}

.plugin-hero__tagline {
  font-family: var(--f-serif);
  font-size: clamp(1.15rem, 1.8vw, 1.35rem);
  color: var(--c-text-soft);
  font-weight: 400;
  font-style: italic;
  margin-bottom: var(--s-7);
  line-height: 1.45;
  letter-spacing: -0.005em;
}

.plugin-hero__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--s-5);
  padding: var(--s-5) 0;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  margin-bottom: var(--s-6);
}
.plugin-hero__meta-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.plugin-hero__meta-label {
  display: block;
  font-family: var(--f-sans);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-text-mute);
  font-weight: 600;
  line-height: 1;
}
.plugin-hero__meta-value {
  display: block;
  font-family: var(--f-sans);
  font-size: 1rem;
  color: var(--c-text);
  font-weight: 500;
  line-height: 1.2;
}

.plugin-hero__cta {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
}

/* Pricing card on plugin hero side */
.pricing-card {
  background: var(--c-panel);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: var(--s-6);
  position: relative;
  overflow: hidden;
}
.pricing-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--c-gold);
}

.pricing-card__row {
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--c-line-soft);
}
.pricing-card__row:last-child { border-bottom: 0; padding-bottom: 0; }
.pricing-card__row:first-child { padding-top: var(--s-3); }

.pricing-card__label {
  font-family: var(--f-sans);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-text-mute);
  font-weight: 600;
  margin-bottom: var(--s-2);
}

.pricing-card__price {
  font-family: var(--f-serif);
  font-size: 2.6rem;
  font-weight: 400;
  color: var(--c-text);
  letter-spacing: -0.025em;
  line-height: 1;
  margin-bottom: var(--s-2);
}
.pricing-card__price small {
  font-family: var(--f-sans);
  font-size: 0.8rem;
  color: var(--c-text-mute);
  font-weight: 500;
  letter-spacing: 0;
  margin-left: var(--s-2);
}

.pricing-card__sub {
  font-family: var(--f-sans);
  font-size: 0.94rem;
  color: var(--c-text-soft);
  margin-bottom: var(--s-4);
  line-height: 1.55;
}

.pricing-card__btn { width: 100%; }

/* Coming-soon row variant: collapses both rows into one centered notice */
.pricing-card__row--soon {
  text-align: left;
}

/* Inline "Available soon" badge replaces a button when its URL is blank */
.pricing-card__badge {
  display: inline-block;
  font-family: var(--f-sans);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--c-gold-deep);
  background: var(--c-bg-soft);
  border: 1px solid var(--c-line);
  padding: 0.55em 1em;
  border-radius: var(--r-sm);
  letter-spacing: 0.12em;
}

/* Free vs Pro comparison */
.compare-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--s-6) 0;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-panel);
}
.compare-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  background: var(--c-panel);
}
.compare-table th,
.compare-table td {
  padding: var(--s-4) var(--s-5);
  text-align: left;
  border-bottom: 1px solid var(--c-line-soft);
  font-size: 0.97rem;
}
.compare-table thead th {
  font-size: 0.72rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--c-text-mute);
  font-weight: 600;
  background: var(--c-bg-soft);
}
.compare-table thead th:nth-child(2),
.compare-table thead th:nth-child(3) {
  text-align: center;
  width: 18%;
}
.compare-table tbody td:nth-child(2),
.compare-table tbody td:nth-child(3) {
  text-align: center;
  font-size: 1.2rem;
  color: var(--c-gold-deep);
}
.compare-table tbody td.no { color: var(--c-line); }
.compare-table tbody tr:last-child td { border-bottom: 0; }
.compare-table tbody tr:hover { background: var(--c-bg-soft); }

/* Documentation sections */
.docs {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
}
@media (min-width: 900px) {
  .docs { grid-template-columns: 240px 1fr; gap: var(--s-8); }
  .docs__nav { position: sticky; top: 100px; align-self: start; }
}

.docs__nav {
  border-left: 1px solid var(--c-line);
  padding-left: var(--s-5);
}
.docs__nav-title {
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-text-mute);
  font-weight: 600;
  margin-bottom: var(--s-4);
}
.docs__nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.docs__nav-list a {
  color: var(--c-text-soft);
  font-size: 0.95rem;
  border-bottom: 1px dotted transparent;
  transition: all 0.2s var(--ease);
}
.docs__nav-list a:hover {
  color: var(--c-gold-deep);
  border-bottom-color: var(--c-gold);
}

.docs__content h2 {
  font-size: 1.85rem;
  font-weight: 400;
  margin-top: var(--s-7);
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--c-line);
}
.docs__content h2:first-child { margin-top: 0; }
.docs__content h3 {
  font-size: 1.3rem;
  font-weight: 600;
  margin-top: var(--s-6);
  margin-bottom: var(--s-3);
}
.docs__content p { color: var(--c-text-soft); }
.docs__content code {
  background: var(--c-bg-soft);
  border: 1px solid var(--c-line);
  padding: 0.15em 0.4em;
  font-family: var(--f-mono);
  font-size: 0.88em;
  color: var(--c-gold-deep);
}
.docs__content pre {
  background: var(--c-ink-bg);
  color: var(--c-text-inv);
  padding: var(--s-5);
  overflow-x: auto;
  border-left: 3px solid var(--c-gold);
  margin: var(--s-5) 0;
}
.docs__content pre code {
  background: transparent;
  border: 0;
  color: inherit;
  padding: 0;
}
.docs__content ul, .docs__content ol {
  color: var(--c-text-soft);
  padding-left: var(--s-5);
}
.docs__content li { margin-bottom: var(--s-2); }
.docs__content blockquote {
  border-left: 3px solid var(--c-gold);
  padding: var(--s-2) var(--s-5);
  margin: var(--s-5) 0;
  font-style: italic;
  color: var(--c-text-soft);
}

/* =========================================================================
   10b. PLUGIN SCREENSHOTS GALLERY
   ========================================================================= */
.shots-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
}
@media (min-width: 720px) {
  .shots-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-6); }
  .shots-grid--single { grid-template-columns: minmax(0, 900px); justify-content: center; }
}

.shot {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.shot__link {
  display: block;
  background: var(--c-panel);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: all 0.3s var(--ease);
}
.shot__link:hover {
  border-color: var(--c-gold);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -18px rgba(166, 124, 46, 0.22);
}
.shot__img {
  display: block;
  width: 100%;
  height: auto;
}
.shot__caption {
  font-family: var(--f-sans);
  font-size: 0.88rem;
  color: var(--c-text-soft);
  text-align: center;
  font-style: italic;
  margin: 0;
}

/* =========================================================================
   10. PHILOSOPHY / EDITORIAL BLOCKS
   ========================================================================= */
.editorial {
  padding: var(--s-9) 0;
  background: var(--c-bg-soft);
  position: relative;
}

.editorial.section--inked {
  background: var(--c-ink-bg);
}
.editorial.section--inked .editorial__quote { color: var(--c-text-inv); }
.editorial.section--inked .editorial__cite { color: var(--c-gold-light); }
.editorial.section--inked .editorial__quote::before {
  background: linear-gradient(180deg, transparent, var(--c-gold-light));
}
.editorial.section--inked .editorial__quote::after {
  background: linear-gradient(180deg, var(--c-gold-light), transparent);
}

.editorial__inner {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 0 var(--s-5);
  text-align: center;
  position: relative;
}

/* Decorative giant gold opening quote */
.editorial__inner::before {
  content: "\201C";
  position: absolute;
  top: -0.3em;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--f-serif);
  font-size: 6rem;
  line-height: 1;
  color: var(--c-gold);
  opacity: 0.35;
  pointer-events: none;
  font-style: italic;
}

.editorial__quote {
  font-family: var(--f-serif);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.45;
  color: var(--c-text);
  letter-spacing: -0.015em;
  margin-bottom: var(--s-5);
  position: relative;
}

.editorial__cite {
  font-family: var(--f-sans);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-text-mute);
  font-weight: 600;
}

/* Two-column feature blocks */
.feature-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6) var(--s-7);
  list-style: none;
  padding: 0;
  margin: var(--s-7) 0 0;
}
@media (min-width: 720px) { .feature-list { grid-template-columns: repeat(2, 1fr); } }

.feature-list li {
  padding-left: var(--s-6);
  position: relative;
}
.feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 28px;
  height: 1px;
  background: var(--c-gold);
}
.feature-list h4 {
  margin-bottom: var(--s-2);
  font-size: 1.1rem;
  font-weight: 600;
}
.feature-list p {
  color: var(--c-text-soft);
  font-size: 0.97rem;
  margin: 0;
}

/* =========================================================================
   11. CONTACT FORM
   ========================================================================= */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
}
@media (min-width: 900px) {
  .contact-grid { grid-template-columns: 1fr 1.4fr; gap: var(--s-9); }
}

.contact-info p {
  color: var(--c-text-soft);
  margin-bottom: var(--s-4);
}

.contact-info__item {
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--c-line-soft);
}
.contact-info__label {
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-text-mute);
  font-weight: 600;
  margin-bottom: var(--s-2);
}
.contact-info__value {
  font-size: 1.05rem;
  color: var(--c-text);
}

.contact-form {
  background: var(--c-panel);
  padding: var(--s-7);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  margin-bottom: var(--s-5);
}
@media (min-width: 600px) {
  .form-row.two-col { grid-template-columns: 1fr 1fr; }
}

.form-field label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--c-text-mute);
  font-weight: 600;
  margin-bottom: var(--s-2);
}

.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  padding: var(--s-3) 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--c-line);
  font-family: var(--f-sans);
  font-size: 1rem;
  color: var(--c-text);
  outline: none;
  transition: border-color 0.25s var(--ease);
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  border-bottom-color: var(--c-gold);
}

.form-field textarea {
  min-height: 140px;
  resize: vertical;
}

.form-notice {
  padding: var(--s-4);
  margin-bottom: var(--s-5);
  font-size: 0.95rem;
  border-left: 3px solid var(--c-gold);
  background: var(--c-bg-soft);
}
.form-notice.error { border-left-color: #B8442A; color: #8b3a26; }

/* =========================================================================
   12. FOOTER
   ========================================================================= */
.site-footer {
  background: var(--c-ink-bg);
  color: var(--c-text-inv);
  padding: var(--s-7) 0 var(--s-5);
  position: relative;
}
.site-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-gold), transparent);
}

.site-footer__inner {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--s-5);
}

/* PRIMARY 3-COLUMN GRID */
.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
  padding-bottom: var(--s-6);
  border-bottom: 1px solid rgba(232, 223, 200, 0.10);
}
@media (min-width: 720px)  { .site-footer__grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-7); } }

.site-footer__col { }

/* MONOSPACE EYEBROW LABELS — match the rest of the site */
.site-footer__eyebrow {
  display: block;
  font-family: 'Geist Mono', ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--c-gold-deep);
  font-weight: 600;
  margin-bottom: var(--s-4);
  padding-bottom: 0.6rem;
  border-bottom: 1px dashed rgba(232, 223, 200, 0.12);
}

/* Lists */
.site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.site-footer ul a {
  color: rgba(245, 239, 226, 0.75);
  font-size: 0.95rem;
  text-decoration: none;
  transition: color 200ms ease;
}
.site-footer ul a:hover { color: var(--c-gold-light); }

/* EXTERNAL LINK TREATMENT — distinguish outbound from internal */
.site-footer__external li {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.site-footer__ext-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  color: rgba(245, 239, 226, 0.85);
  font-weight: 500;
  font-size: 0.95rem;
  transition: color 200ms ease;
  width: fit-content;
}
.site-footer__ext-link:hover {
  color: var(--c-gold-light);
}
.site-footer__ext-name {
  border-bottom: 1px dashed transparent;
  padding-bottom: 1px;
  transition: border-color 200ms ease;
}
.site-footer__ext-link:hover .site-footer__ext-name {
  border-bottom-color: rgba(232, 213, 163, 0.4);
}
.site-footer__ext-arrow {
  font-size: 0.78rem;
  color: var(--c-gold-deep);
  transition: transform 200ms ease, color 200ms ease;
  display: inline-block;
}
.site-footer__ext-link:hover .site-footer__ext-arrow {
  transform: translate(2px, -2px);
  color: var(--c-gold-light);
}
.site-footer__ext-sub {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  color: rgba(245, 239, 226, 0.45);
  letter-spacing: 0.04em;
  margin-top: 2px;
  line-height: 1.4;
}

/* COLOPHON STRIP — sits above the bottom copyright line */
.site-footer__colophon {
  padding: var(--s-4) 0;
  border-bottom: 1px solid rgba(232, 223, 200, 0.10);
}
.site-footer__colophon-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}
.site-footer__colophon-item {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
}
.site-footer__colophon-item--right {
  margin-left: auto;
  align-items: center;
}
.site-footer__colophon-label {
  color: rgba(245, 239, 226, 0.40);
  font-weight: 500;
  letter-spacing: 0.14em;
}
.site-footer__colophon-value {
  color: rgba(245, 239, 226, 0.80);
  font-weight: 600;
}
.site-footer__colophon-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4FA67F;
  box-shadow: 0 0 0 2px rgba(79, 166, 127, 0.20);
  display: inline-block;
}
@media (max-width: 600px) {
  .site-footer__colophon-row { gap: 1rem; }
  .site-footer__colophon-item--right { margin-left: 0; }
}

/* STRUCTURED BOTTOM STRIP — copyright and meta */
.site-footer__bottom {
  padding-top: var(--s-4);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-3);
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: rgba(245, 239, 226, 0.45);
}
.site-footer__bottom-item {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
}
.site-footer__bottom-item--right {
  margin-left: auto;
}
.site-footer__bottom-label {
  color: rgba(245, 239, 226, 0.35);
  font-weight: 500;
}
.site-footer__bottom-value {
  color: rgba(245, 239, 226, 0.65);
  font-weight: 600;
}
@media (max-width: 600px) {
  .site-footer__bottom { justify-content: center; text-align: center; }
  .site-footer__bottom-item--right { margin-left: 0; }
}

/* =========================================================================
   13. PAGE / GENERIC CONTENT
   ========================================================================= */
.page-hero {
  padding: var(--s-9) 0 var(--s-7);
  text-align: center;
  border-bottom: 1px solid var(--c-line);
  background: linear-gradient(180deg, var(--c-bg-soft) 0%, var(--c-bg) 100%);
}
.page-hero__title {
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  margin: 0 auto var(--s-4);
  max-width: 720px;
}
.page-hero__lead {
  font-size: 1.2rem;
  color: var(--c-text-soft);
  font-weight: 300;
  max-width: 620px;
  margin: 0 auto;
}

/* Document-style metadata strip for page heroes — matches the plugin-hero
   and homepage Standard treatment. Centered to fit the page-hero layout. */
.page-hero__doc-meta {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 1.4rem;
  flex-wrap: wrap;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--c-text-mute);
  font-weight: 600;
  text-transform: uppercase;
  padding-bottom: 0.9rem;
  margin: 0 auto 1.4rem;
  border-bottom: 1px dashed var(--c-line);
  max-width: 560px;
}
.page-hero__doc-id { color: var(--c-text); }
.page-hero__doc-rev { color: var(--c-gold-deep); }
@media (max-width: 600px) {
  .page-hero__doc-meta { gap: 0.7rem; font-size: 0.65rem; }
}

.entry-content {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: var(--s-9) var(--s-5);
}
.entry-content h2 { margin-top: var(--s-7); }
.entry-content img { margin: var(--s-5) 0; }

/* =========================================================================
   14. UTILITY / MISC
   ========================================================================= */
.text-center { text-align: center; }
.mt-7 { margin-top: var(--s-7); }
.mb-7 { margin-bottom: var(--s-7); }
.flex-center { display: flex; justify-content: center; align-items: center; }

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* WordPress alignment classes */
.alignleft  { float: left;  margin: 0 var(--s-5) var(--s-3) 0; }
.alignright { float: right; margin: 0 0 var(--s-3) var(--s-5); }
.aligncenter { display: block; margin: var(--s-5) auto; }
.alignwide  { max-width: var(--container); margin-left: auto; margin-right: auto; }
.alignfull  { width: 100%; }

/* Print */
@media print {
  .site-header, .site-footer, .menu-toggle { display: none; }
}

/* =========================================================================
   15. SMALL-SCREEN REFINEMENTS
   Targeted fixes for phone-sized viewports (≤ 600px).
   ========================================================================= */
@media (max-width: 600px) {
  /* Tighten vertical rhythm on phones */
  .section { padding: var(--s-8) 0; }
  .hero    { padding: var(--s-9) 0 var(--s-7); }

  /* Hero CTA: stack and full-width buttons for easier tapping */
  .hero__cta {
    flex-direction: column;
    align-items: stretch;
  }
  .hero__cta .btn { width: 100%; justify-content: center; }
  .hero__cta .btn-link { width: auto; align-self: center; }

  /* Plugin hero CTA buttons full-width on phones */
  .plugin-hero__cta { flex-direction: column; align-items: stretch; }
  .plugin-hero__cta .btn { width: 100%; justify-content: center; }

  /* Plugin hero meta — let items wrap naturally with vertical spacing */
  .plugin-hero__meta { gap: var(--s-4); }
  .plugin-hero__meta-item { min-width: 45%; }

  /* Pricing card price — smaller on tight screens */
  .pricing-card__price { font-size: 2rem; }

  /* Editorial quote padding */
  .editorial { padding: var(--s-7) 0; }

  /* Footer columns stack with tighter gap */
  .site-footer { padding: var(--s-7) 0 var(--s-4); }
  .site-footer__bottom { justify-content: center; text-align: center; }

  /* Page hero spacing */
  .page-hero { padding: var(--s-7) 0 var(--s-5); }

  /* Compare table padding tightened */
  .compare-table th, .compare-table td { padding: var(--s-3) var(--s-4); font-size: 0.92rem; }
}

/* Touch-friendly tap targets — ensure buttons have minimum 44px height */
.btn { min-height: 44px; }

/* =========================================================================
   16. CROSS-SITE LINKS (footer + AI banner)
   ========================================================================= */
.footer-crosslink {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--c-gold-light) !important;
  font-weight: 500;
}
.footer-crosslink__arrow {
  font-size: 0.85em;
  transition: transform 0.25s var(--ease);
}
.footer-crosslink:hover .footer-crosslink__arrow { transform: translate(2px, -2px); }
.footer-crosslink__sub {
  display: block;
  font-size: 0.82rem;
  color: rgba(245, 241, 232, 0.5);
  margin-top: 2px;
  line-height: 1.4;
}

/* =========================================================================
   20. HOMEPAGE — STUDIO STATUS HERO
   ========================================================================= */
.studio-hero {
  background: var(--c-bg);
  padding: var(--s-7) 0 var(--s-6);
  border-bottom: 1px solid var(--c-line);
}

/* Top monospace status bar — version, location, status indicator */
.studio-hero__bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.4rem;
  padding-bottom: 1.2rem;
  margin-bottom: var(--s-6);
  border-bottom: 1px solid var(--c-line);
  font-family: 'Geist Mono', ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--c-text-mute);
}
.studio-hero__bar-item {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
}
.studio-hero__bar-item--right {
  margin-left: auto;
}
.studio-hero__bar-label {
  color: var(--c-text-mute);
  font-weight: 500;
}
.studio-hero__bar-value {
  color: var(--c-text);
  font-weight: 600;
}
.studio-hero__bar-value.gold {
  color: var(--c-gold-deep);
  letter-spacing: 0.12em;
}
.studio-hero__status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--c-text);
  letter-spacing: 0.1em;
}
.studio-hero__status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2E7D5B;
  box-shadow: 0 0 0 3px rgba(46, 125, 91, 0.18);
  display: inline-block;
}

/* Hero body grid — main copy left, fact sidebar right */
.studio-hero__body {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: var(--s-7);
  align-items: start;
}
@media (max-width: 900px) {
  .studio-hero__body {
    grid-template-columns: 1fr;
    gap: var(--s-5);
  }
}

.studio-hero__main { }
.studio-hero__title {
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.3rem, 5vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: 0.005em;
  margin: 0.9rem 0 1.2rem;
}
.studio-hero__title em {
  font-style: italic;
  color: var(--c-gold-deep);
  font-weight: 500;
}
.studio-hero__lead {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.18rem;
  line-height: 1.55;
  color: var(--c-text-soft);
  max-width: 32rem;
  margin: 0 0 var(--s-4);
}
.studio-hero__cta {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

/* Studio facts sidebar — looks like a small data card */
.studio-hero__facts {
  background: var(--c-panel);
  border: 1px solid var(--c-line);
  border-radius: 8px;
  padding: 1.4rem 1.6rem;
}
.studio-hero__facts-head {
  border-bottom: 1px dashed var(--c-line);
  padding-bottom: 0.8rem;
  margin-bottom: 1rem;
}
.studio-hero__facts-label {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--c-gold-deep);
  font-weight: 600;
}
.studio-hero__facts-list {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
}
.studio-hero__facts-list dt {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-text-mute);
  font-weight: 600;
  margin-bottom: 0.2rem;
}
.studio-hero__facts-list dd {
  margin: 0;
  font-size: 0.94rem;
  color: var(--c-text);
  line-height: 1.4;
}
.studio-hero__facts-list dd .num {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--c-gold-deep);
  line-height: 1;
  margin-right: 0.4rem;
  vertical-align: -0.05em;
}
.studio-hero__facts-list dd .title {
  font-weight: 600;
  margin-right: 0.4rem;
}
.studio-hero__facts-list dd .ver {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 0.78rem;
  color: var(--c-gold-deep);
  margin-right: 0.4rem;
}
.studio-hero__facts-list dd .date {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 0.78rem;
  color: var(--c-text-mute);
}

/* =========================================================================
   21. HOMEPAGE — THE AURUMANE STANDARD (operating principles document)
   ========================================================================= */
.standard {
  background: var(--c-bg-cream);
  padding: var(--s-7) 0;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}

/* Document title head */
.standard__head {
  text-align: center;
  margin-bottom: var(--s-6);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--c-line);
}
.standard__doc-meta {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--c-text-mute);
  font-weight: 500;
  margin-bottom: 1.2rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--c-gold-deep);
}
.standard__doc-id { color: var(--c-text); font-weight: 600; }
.standard__doc-rev { color: var(--c-text-mute); }
.standard__title {
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 500;
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: 0.005em;
  line-height: 1.1;
  margin: 0 0 0.6rem;
}
.standard__sub {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.05rem;
  color: var(--c-text-soft);
  font-style: italic;
  margin: 0;
}

/* The principles list */
.standard__list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: principle;
}
.standard__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.6rem;
  padding: 1.4rem 0;
  border-bottom: 1px dashed var(--c-line);
}
.standard__item:last-child { border-bottom: none; }
@media (max-width: 600px) {
  .standard__item { grid-template-columns: auto 1fr; gap: 1rem; }
}
.standard__num {
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 400;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--c-gold-deep);
  letter-spacing: 0.02em;
  padding-top: 0.15rem;
  min-width: 2.4rem;
}
.standard__body { }
.standard__h {
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 500;
  font-size: 1.15rem;
  letter-spacing: 0.005em;
  margin: 0 0 0.4rem;
  color: var(--c-text);
}
.standard__body p {
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.6;
  color: var(--c-text-soft);
}

/* Document footer — signed and dated */
.standard__footer {
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-line);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 1rem;
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  color: var(--c-text-mute);
  font-size: 0.92rem;
}
.standard__sig-date {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-style: normal;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--c-text-mute);
}

/* =========================================================================
   22. HOMEPAGE — STUDIO BUSINESS CARD (replaces old CTA section)
   ========================================================================= */
.business-card {
  background: var(--c-bg);
  padding: var(--s-7) 0;
}
.business-card__inner {
  background: var(--c-panel);
  border: 1px solid var(--c-line);
  border-radius: 8px;
  padding: 2rem 2.4rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 2.5rem;
  align-items: center;
  position: relative;
  box-shadow: 0 24px 48px -38px rgba(31, 27, 22, 0.18);
}
@media (max-width: 760px) {
  .business-card__inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 1.4rem;
    padding: 2rem 1.6rem;
  }
}

/* Decorative gold ribbon along the top of the card */
.business-card__inner::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--c-gold-deep) 50%, transparent 100%);
  border-radius: 8px 8px 0 0;
}

.business-card__mark {
  width: 84px;
  flex-shrink: 0;
}
.business-card__mark img {
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 760px) {
  .business-card__mark { margin: 0 auto; width: 64px; }
}

.business-card__identity { }
.business-card__name {
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 500;
  font-size: 1.6rem;
  letter-spacing: 0.02em;
  line-height: 1;
  margin-bottom: 0.4rem;
  color: var(--c-text);
}
.business-card__name .gold { color: var(--c-gold-deep); font-weight: 600; }
.business-card__role {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--c-text-soft);
  margin-bottom: 0.3rem;
}
.business-card__loc {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--c-text-mute);
  text-transform: uppercase;
  font-weight: 500;
}

.business-card__contact {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.3rem 1.2rem;
  margin: 0;
  font-size: 0.88rem;
  border-left: 1px solid var(--c-line);
  padding-left: 2.5rem;
}
@media (max-width: 760px) {
  .business-card__contact {
    border-left: 0;
    border-top: 1px solid var(--c-line);
    padding: 1.2rem 0 0;
    justify-content: center;
    text-align: left;
    max-width: 280px;
    margin: 0 auto;
  }
}
.business-card__contact dt {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-text-mute);
  font-weight: 600;
  align-self: center;
}
.business-card__contact dd {
  margin: 0;
  color: var(--c-text);
  align-self: center;
}
.business-card__contact dd a {
  color: var(--c-text);
  border-bottom: 1px solid var(--c-gold-deep);
  text-decoration: none;
  padding-bottom: 1px;
  transition: color 200ms ease;
}
.business-card__contact dd a:hover { color: var(--c-gold-deep); }

/* =========================================================================
   23. HOMEPAGE — WHAT'S NEXT (project ledger)
   ========================================================================= */
.next-up {
  background: var(--c-bg);
  padding: var(--s-6) 0 var(--s-7);
  border-top: 1px solid var(--c-line);
}
.next-up__head {
  margin-bottom: var(--s-5);
}
.next-up__eyebrow {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-gold-deep);
  font-weight: 600;
  display: block;
  margin-bottom: 0.6rem;
}
.next-up__title {
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 500;
  font-size: 1.9rem;
  letter-spacing: 0.005em;
  margin: 0 0 0.4rem;
}
.next-up__lead {
  color: var(--c-text-soft);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0;
}

.next-up__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--c-line);
}
.next-up__item {
  display: grid;
  grid-template-columns: 200px 1fr 140px;
  align-items: center;
  gap: 1.4rem;
  padding: 1.3rem 0.4rem;
  border-bottom: 1px solid var(--c-line);
  transition: background 200ms ease;
}
.next-up__item:hover {
  background: var(--c-bg-cream);
}
@media (max-width: 760px) {
  .next-up__item {
    grid-template-columns: 1fr;
    gap: 0.6rem;
    padding: 1.2rem 0.4rem;
  }
}

.next-up__status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  font-weight: 600;
  padding: 0.3em 0.7em;
  border-radius: 999px;
  width: fit-content;
}
.next-up__status--active {
  background: rgba(46, 125, 91, 0.08);
  color: #2E7D5B;
  border: 1px solid rgba(46, 125, 91, 0.25);
}
.next-up__status--planned {
  background: var(--c-bg-cream);
  color: var(--c-gold-deep);
  border: 1px solid var(--c-line);
}
.next-up__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}
.next-up__status--active .next-up__dot {
  background: #2E7D5B;
  box-shadow: 0 0 0 2px rgba(46, 125, 91, 0.18);
}
.next-up__status--planned .next-up__dot {
  background: var(--c-gold-deep);
  box-shadow: 0 0 0 2px rgba(166, 124, 46, 0.18);
}

.next-up__body { }
.next-up__name {
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 500;
  font-size: 1.15rem;
  letter-spacing: 0.005em;
  margin: 0 0 0.3rem;
  color: var(--c-text);
}
.next-up__desc {
  font-size: 0.93rem;
  line-height: 1.55;
  color: var(--c-text-soft);
  margin: 0;
}

.next-up__target {
  font-family: 'Geist Mono', ui-monospace, monospace;
  text-align: right;
}
@media (max-width: 760px) {
  .next-up__target {
    text-align: left;
    border-top: 1px dashed var(--c-line);
    padding-top: 0.6rem;
    margin-top: 0.2rem;
  }
}
.next-up__target-label {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  color: var(--c-text-mute);
  font-weight: 600;
  margin-bottom: 0.2rem;
}
.next-up__target-value {
  font-size: 0.92rem;
  color: var(--c-text);
  font-weight: 600;
}

/* =========================================================================
   24. HOMEPAGE — STUDIO NOTE ("now" page in miniature)
   ========================================================================= */
.studio-note {
  background: var(--c-bg-cream);
  padding: var(--s-7) 0;
  border-top: 1px solid var(--c-line);
}
.studio-note__inner {
  position: relative;
  padding: 0 var(--s-4);
  /* Slight indent to read as a personal aside, not a section heading */
  max-width: 38rem;
  margin: 0 auto;
}
.studio-note__inner::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: var(--c-gold-deep);
  border-radius: 2px;
}

.studio-note__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding-bottom: 0.8rem;
  margin-bottom: 1.4rem;
  border-bottom: 1px dashed var(--c-line);
}
.studio-note__eyebrow {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-gold-deep);
  font-weight: 600;
}
.studio-note__date {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--c-text-mute);
  font-weight: 500;
}

.studio-note__body {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.2rem;
  line-height: 1.65;
  color: var(--c-text);
}
.studio-note__body p {
  margin: 0 0 1em;
}
.studio-note__body p:last-child {
  margin-bottom: 0;
}

.studio-note__sig {
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px dashed var(--c-line);
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  color: var(--c-text-soft);
  font-size: 0.95rem;
}

/* =========================================================================
   25. LIVE DEMO — homepage teaser, full ALM widget, interstitial
   ========================================================================= */

/* Honeypot field — visually hidden but accessible to bots */
.aur-honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* ---------- Homepage teaser ---------- */
.demo-teaser {
  background: var(--c-bg);
  padding: var(--s-7) 0;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
.demo-teaser__inner {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}
.demo-teaser__head {
  margin-bottom: 2rem;
}
.demo-teaser__eyebrow {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-gold-deep);
  font-weight: 600;
  display: block;
  margin-bottom: 0.8rem;
}
.demo-teaser__title {
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.8rem, 3.5vw, 2.4rem);
  letter-spacing: 0.005em;
  line-height: 1.1;
  margin: 0 0 0.8rem;
}
.demo-teaser__lead {
  color: var(--c-text-soft);
  font-size: 1rem;
  line-height: 1.55;
  margin: 0 auto;
  max-width: 56ch;
}

.demo-teaser__form {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.8rem;
  flex-wrap: wrap;
  justify-content: center;
}
.demo-teaser__input {
  flex: 1 1 360px;
  min-width: 0;
  padding: 0.85em 1em;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 0.9rem;
  border: 1px solid var(--c-line);
  border-radius: 4px;
  background: var(--c-panel);
  color: var(--c-text);
  transition: border-color 200ms ease;
}
.demo-teaser__input:focus {
  outline: none;
  border-color: var(--c-gold-deep);
  box-shadow: 0 0 0 3px rgba(166, 124, 46, 0.12);
}

.demo-teaser__error {
  color: #B33A3A;
  font-size: 0.9rem;
  margin: 0.6rem 0 0;
  font-family: 'Geist Mono', ui-monospace, monospace;
}

.demo-teaser__result {
  margin-top: 1.5rem;
  padding: 1.2rem 1.4rem;
  background: var(--c-bg-cream);
  border: 1px solid var(--c-line);
  border-radius: 8px;
  text-align: left;
}
.demo-teaser__result-row {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 0.9rem;
}
.demo-teaser__result-label {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-text-mute);
  font-weight: 600;
}
.demo-teaser__cloaked {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 1rem;
  color: var(--c-gold-deep);
  font-weight: 600;
  background: var(--c-panel);
  padding: 0.6rem 0.8rem;
  border-radius: 4px;
  border: 1px solid var(--c-line);
  word-break: break-all;
}
.demo-teaser__result-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.demo-teaser__expiry {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 0.7rem;
  color: var(--c-text-mute);
}

.demo-teaser__more {
  margin-top: 1.5rem;
  margin-bottom: 0;
}

/* ---------- Full demo on the ALM plugin page ---------- */
.demo-full {
  background: var(--c-bg);
  padding: var(--s-7) 0;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
.demo-full__head {
  margin-bottom: 2.4rem;
}
.demo-full__eyebrow {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-gold-deep);
  font-weight: 600;
  display: block;
  margin-bottom: 0.8rem;
}
.demo-full__title {
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.9rem, 3.5vw, 2.6rem);
  letter-spacing: 0.005em;
  line-height: 1.1;
  margin: 0 0 0.8rem;
}
.demo-full__lead {
  color: var(--c-text-soft);
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0;
  max-width: 60ch;
}
.demo-full__lead em { color: var(--c-text); font-style: italic; }

.demo-full__widget {
  background: var(--c-panel);
  border: 1px solid var(--c-line);
  border-radius: 8px;
  padding: 2rem;
  margin-bottom: 2.4rem;
  box-shadow: 0 24px 48px -38px rgba(31, 27, 22, 0.18);
}

.demo-full__form { }
.demo-full__field {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.2rem;
}
.demo-full__label {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-text-mute);
  font-weight: 600;
  margin-bottom: 0.4rem;
}
.demo-full__input {
  padding: 0.85em 1em;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 0.95rem;
  border: 1px solid var(--c-line);
  border-radius: 4px;
  background: var(--c-bg);
  color: var(--c-text);
  transition: border-color 200ms ease;
}
.demo-full__input:focus {
  outline: none;
  border-color: var(--c-gold-deep);
  background: var(--c-panel);
  box-shadow: 0 0 0 3px rgba(166, 124, 46, 0.12);
}
.demo-full__hint {
  font-size: 0.85rem;
  color: var(--c-text-mute);
  margin: 0.5rem 0 0;
  line-height: 1.45;
}

.demo-full__error {
  color: #B33A3A;
  font-size: 0.92rem;
  margin: 0 0 1rem;
  padding: 0.6rem 0.8rem;
  background: rgba(179, 58, 58, 0.06);
  border: 1px solid rgba(179, 58, 58, 0.2);
  border-radius: 4px;
  font-family: 'Geist Mono', ui-monospace, monospace;
}

.demo-full__result {
  margin-top: 1.6rem;
  padding-top: 1.6rem;
  border-top: 1px dashed var(--c-line);
}
.demo-full__result-head { margin-bottom: 0.6rem; }
.demo-full__result-eyebrow {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  color: var(--c-gold-deep);
  font-weight: 600;
}
.demo-full__cloaked {
  display: block;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 1.05rem;
  color: var(--c-gold-deep);
  font-weight: 600;
  background: var(--c-bg-cream);
  padding: 0.9rem 1rem;
  border-radius: 4px;
  border: 1px solid var(--c-line);
  word-break: break-all;
  margin: 0.5rem 0 1rem;
}
.demo-full__result-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.demo-full__expiry {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 0.7rem;
  color: var(--c-text-mute);
}

.demo-full__notes {
  background: var(--c-bg-cream);
  border-left: 2px solid var(--c-gold-deep);
  padding: 1.4rem 1.6rem;
  border-radius: 0 8px 8px 0;
}
.demo-full__notes-title {
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 500;
  font-size: 1.1rem;
  margin: 0 0 0.8rem;
}
.demo-full__notes-list {
  margin: 0;
  padding-left: 1.2rem;
  font-size: 0.93rem;
  line-height: 1.55;
  color: var(--c-text-soft);
}
.demo-full__notes-list li {
  margin-bottom: 0.5rem;
}
.demo-full__notes-list li:last-child { margin-bottom: 0; }

/* "Copied" flash on copy buttons */
.is-copied {
  color: var(--c-gold-deep) !important;
}

/* ---------- Interstitial page ---------- */
.demo-interstitial {
  padding: var(--s-7) 0;
  background: var(--c-bg-cream);
  min-height: 60vh;
}
.demo-interstitial__card {
  background: var(--c-panel);
  border: 1px solid var(--c-line);
  border-radius: 12px;
  padding: 2.5rem 2rem;
  box-shadow: 0 24px 48px -38px rgba(31, 27, 22, 0.18);
  max-width: 640px;
  margin: 0 auto;
}
.demo-interstitial__head { margin-bottom: 2rem; }
.demo-interstitial__eyebrow {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-gold-deep);
  font-weight: 600;
  display: block;
  margin-bottom: 1rem;
}
.demo-interstitial__title {
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 500;
  font-size: 2rem;
  margin: 0 0 1rem;
  letter-spacing: 0.005em;
}
.demo-interstitial__lead {
  color: var(--c-text-soft);
  font-size: 1rem;
  line-height: 1.55;
  margin: 0;
}
.demo-interstitial__lead code {
  font-family: 'Geist Mono', ui-monospace, monospace;
  background: var(--c-bg-cream);
  padding: 0.1em 0.4em;
  border-radius: 3px;
  font-size: 0.95em;
  color: var(--c-gold-deep);
}

.demo-interstitial__dest {
  background: var(--c-bg-cream);
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-gold-deep);
  border-radius: 0 6px 6px 0;
  padding: 1.2rem 1.4rem;
  margin: 0 0 2rem;
}
.demo-interstitial__dest-label {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-text-mute);
  font-weight: 600;
  display: block;
  margin-bottom: 0.4rem;
}
.demo-interstitial__dest-host {
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 500;
  font-size: 1.4rem;
  color: var(--c-text);
  display: block;
  margin-bottom: 0.4rem;
  letter-spacing: 0.005em;
}
.demo-interstitial__dest-url {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 0.85rem;
  color: var(--c-text-soft);
  word-break: break-all;
  display: block;
}

.demo-interstitial__actions {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  margin-bottom: 1.6rem;
  flex-wrap: wrap;
}

.demo-interstitial__note {
  font-size: 0.85rem;
  color: var(--c-text-mute);
  font-style: italic;
  margin: 0;
  padding-top: 1.2rem;
  border-top: 1px dashed var(--c-line);
}

/* =========================================================================
   26. HOMEPAGE — WORDMARK BLUEPRINT (dark accent section)
   ========================================================================= */
.craft-blueprint {
  background: var(--c-ink-bg);
  padding: var(--s-7) 0;
  position: relative;
  overflow: hidden;
  /* Top + bottom gold-tinted hairlines, matching the footer's gradient rule treatment */
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  background-image:
    /* Top horizontal gold gradient line */
    linear-gradient(90deg, transparent 0%, rgba(201, 168, 76, 0.35) 50%, transparent 100%),
    /* Bottom horizontal gold gradient line */
    linear-gradient(90deg, transparent 0%, rgba(201, 168, 76, 0.35) 50%, transparent 100%),
    /* Soft warm radial glow behind the blueprint */
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(201, 168, 76, 0.08) 0%, transparent 70%),
    /* Solid ink base */
    linear-gradient(var(--c-ink-bg), var(--c-ink-bg));
  background-position: 0 0, 0 100%, center, center;
  background-size: 100% 1px, 100% 1px, 100% 100%, 100% 100%;
  background-repeat: no-repeat;
}
/* Subtle vignette darkening at the corners — anchors the warm glow in the center */
.craft-blueprint::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(0, 0, 0, 0.3) 100%);
  pointer-events: none;
}
.craft-blueprint__figure {
  margin: 0;
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
}
.craft-blueprint__img {
  display: block;
  width: 100%;
  height: auto;
  /* SVG already fills its viewBox; this just lets it scale to the container */
}
.craft-blueprint__caption {
  margin-top: 1.4rem;
  text-align: center;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(232, 213, 163, 0.55);
  font-weight: 500;
}

/* On narrow screens the dimension callouts crunch — give the image a min height
   so the SVG keeps its readable proportions and let it scroll horizontally if
   absolutely necessary. In practice the SVG is fully responsive but reading the
   small text gets hard below ~600px. */
@media (max-width: 600px) {
  .craft-blueprint { padding: var(--s-6) 0; }
  .craft-blueprint__caption {
    font-size: 0.65rem;
    letter-spacing: 0.14em;
  }
}

/* =========================================================================
   27. GOLD RADIAL GLOW — soft champagne tint matching the plugin hero
   Adds a subtle warm gold accent in the top-right corner of the section.
   Same treatment used by .plugin-hero, applied via the .has-gold-glow
   utility class on any section.
   The glow is layered as a ::before overlay so it composites on top of
   the section's own background-color without needing to override it.
   ========================================================================= */
.has-gold-glow {
  position: relative;
}
.has-gold-glow::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse at 80% 0%, rgba(232, 213, 163, 0.35) 0%, transparent 60%);
  z-index: 0;
}
/* Make sure section content sits above the glow overlay */
.has-gold-glow > * {
  position: relative;
  z-index: 1;
}

/* =========================================================================
   28. APP DOWNLOAD PAGE — pitch + download button for downloadable apps
   Used by the App Download page template (page-harborledger.php and any
   other page that selects the "App Download" template).
   ========================================================================= */

.app-download                 { margin: 0 auto; max-width: 580px; }
.app-download .btn-primary    { font-size: 1.05rem; padding: 0.95rem 1.8rem; }

/* Metadata row directly under the download button */
.app-download__meta {
	margin: 0.9rem 0 0;
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	justify-content: center;
	font-family: 'Geist Mono', ui-monospace, monospace;
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	color: var(--c-text-mute);
	text-transform: uppercase;
}
.app-download__meta .app-download__version { color: var(--c-gold-deep); font-weight: 600; }
.app-download__meta .app-download__date    { color: var(--c-text); }
.app-download__meta .app-download__size    { color: var(--c-text-mute); }

.app-download__roadmap {
	margin: 1.2rem 0 0;
	font-size: 0.85rem;
	color: var(--c-text-mute);
	font-style: italic;
}

.app-download--unavailable p {
	font-style: italic;
	color: var(--c-text-mute);
}

/* Screenshot section — uses the page-hero gold-glow pattern */
.app-screenshot {
	padding: 1rem 0 3rem;
	position: relative;
}
.app-screenshot__frame {
	margin: 0;
	background: var(--c-panel);
	border: 1px solid var(--c-line);
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 8px 30px rgba(26, 23, 20, 0.06);
}
.app-screenshot__frame img {
	display: block;
	width: 100%;
	height: auto;
}

/* Body content sits below the screenshot on the App Download template */
.app-content {
	margin-top: 2rem;
}