/* =============================================================================
   editorial-landing.css — magazine-style redesign for the landing page (index)

   Implements three "kill the AI-smell" rules:
     1. A 7-colour editorial palette with ONE unusual accent (ochre / mustard),
        plus dusty rose, pine, oxblood and slate — not the default 3-colour set.
     2. No over-rounding: radii are 0–3px (no rounded-2xl, no 999px pills) and the
        type is ONE serif (Fraunces, display) + ONE sans (Inter, body) — not 2 sans.
     3. A magazine layout: asymmetric columns, hairline rules, section numbering,
        drop caps, figure-style numerals and generous editorial spacing.

   Scoped entirely under `body.wg-editorial` and loaded LAST, so it owns the
   cascade for this page only — every other page on the site is untouched.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. PALETTE + TOKENS  (Rule 1 — 7 colours, ochre is the unusual accent)
   --------------------------------------------------------------------------- */
body.wg-editorial {
  /* Editorial palette */
  --ed-paper:    #ECE5D7;   /* warm newsprint — base surface          */
  --ed-paper-2:  #E2D9C6;   /* deeper panel / alternating section      */
  --ed-card:     #F5F1E7;   /* raised paper — cards, callouts          */
  --ed-ink:      #1C1A16;   /* warm near-black — primary text          */
  --ed-ink-2:    #5A5346;   /* muted text (>=4.5:1 on paper)           */
  --ed-line:     #C8BCA3;   /* hairline rules                          */
  --ed-ochre:    #A86E0C;   /* THE unusual accent — mustard/ochre      */
  --ed-ochre-br: #CC9A2B;   /* brighter ochre — decorative fills       */
  --ed-rose:     #9C5C49;   /* dusty rose (text-safe)                  */
  --ed-rose-br:  #C28370;   /* dusty rose — decorative                 */
  --ed-pine:     #33493C;   /* deep pine green                         */
  --ed-oxblood:  #7C2B20;   /* oxblood / brick                         */
  --ed-slate:    #3C5666;   /* slate blue                              */

  /* Semantic roles */
  --ed-bg:       var(--ed-paper);
  --ed-bg-alt:   var(--ed-paper-2);
  --ed-surface:  var(--ed-card);
  --ed-text:     var(--ed-ink);
  --ed-dim:      var(--ed-ink-2);
  --ed-accent:   var(--ed-ochre);

  /* Remap the old coral brand vars so any leftover inline `var(--wg-coral-*)`
     in the markup resolves to the editorial palette instead of leaking coral. */
  --wg-coral-300: var(--ed-rose-br);
  --wg-coral-500: var(--ed-ochre);
  --wg-coral-600: var(--ed-ochre);
  --wg-coral-700: var(--ed-ochre);
  --wg-grad-coral: var(--ed-ochre);

  /* Shape — small or none (Rule 2). No pills, no rounded-2xl. */
  --ed-r:    2px;
  --ed-r-sm: 1px;

  /* Type (Rule 2) — one serif + one sans */
  --ed-serif: 'Fraunces', 'Hoefler Text', Georgia, 'Times New Roman', serif;
  --ed-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  background: var(--ed-bg) !important;
  color: var(--ed-text);
  font-family: var(--ed-sans);
  line-height: 1.65;
}

/* Dark variant — warm charcoal "evening edition", same palette logic */
[data-theme="dark"] body.wg-editorial {
  --ed-paper:    #181612;
  --ed-paper-2:  #201D17;
  --ed-card:     #221F18;
  --ed-ink:      #ECE4D3;
  --ed-ink-2:    #ADA48F;
  --ed-line:     #38332A;
  --ed-ochre:    #D7A437;
  --ed-ochre-br: #E7BC5A;
  --ed-rose:     #CE8C79;
  --ed-rose-br:  #D89E8C;
  --ed-pine:     #7FA98E;
  --ed-oxblood:  #C26A56;
  --ed-slate:    #8BA7B7;
}

/* Kill the inherited atmospheric texture / glow from the global sheets */
body.wg-editorial::before { content: none !important; background: none !important; }

body.wg-editorial h1,
body.wg-editorial h2,
body.wg-editorial h3,
body.wg-editorial h4 {
  font-family: var(--ed-serif);
  font-optical-sizing: auto;
  color: var(--ed-text);
  letter-spacing: -0.01em;
  line-height: 1.08;
  font-weight: 600;
}
body.wg-editorial a { color: var(--ed-accent); }
body.wg-editorial a:hover { color: var(--ed-rose); }

/* Slightly wider gutters than the SaaS default — editorial breathing room */
body.wg-editorial .wg-container { width: min(1200px, 90%); }

/* Shared kicker / eyebrow — small caps label with a leading rule (no pill) */
body.wg-editorial .wg-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 0; border: 0; background: none; border-radius: 0;
  color: var(--ed-accent);
  font-family: var(--ed-sans);
  font-weight: 600; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
}
body.wg-editorial .wg-eyebrow::before {
  content: ""; width: 28px; height: 1px; background: var(--ed-accent); display: inline-block;
}

/* -----------------------------------------------------------------------------
   2. NAV — flat editorial masthead, hairline rule, no glass/blur
   --------------------------------------------------------------------------- */
body.wg-editorial .wg-nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--ed-bg);
  backdrop-filter: none;
  border-bottom: 1px solid var(--ed-ink);
}
body.wg-editorial .wg-nav-inner { padding: 16px 0; }
body.wg-editorial .wg-brand img {
  width: 46px; height: 46px; border-radius: var(--ed-r);
  border: 1px solid var(--ed-line); box-shadow: none;
}
body.wg-editorial .wg-brand:hover img { transform: none; box-shadow: none; }
body.wg-editorial .wg-brand-text {
  font-family: var(--ed-serif); font-weight: 600; font-size: 1.2rem;
  letter-spacing: -0.01em; color: var(--ed-text);
}
body.wg-editorial .wg-brand-text span { color: var(--ed-accent); }
body.wg-editorial .wg-nav-links a {
  color: var(--ed-dim); font-family: var(--ed-sans);
  font-weight: 500; font-size: 0.9rem; letter-spacing: 0.01em;
}
body.wg-editorial .wg-nav-links a:hover { color: var(--ed-text); }
body.wg-editorial .wg-cta-mini {
  background: var(--ed-ink); color: var(--ed-paper);
  padding: 9px 16px; border-radius: var(--ed-r);
  font-family: var(--ed-sans); font-weight: 600; font-size: 0.82rem;
  letter-spacing: 0.04em; text-transform: uppercase; box-shadow: none;
}
body.wg-editorial .wg-cta-mini:hover { background: var(--ed-accent); color: var(--ed-paper); transform: none; }
body.wg-editorial .wg-nav-toggle { color: var(--ed-text); }

/* -----------------------------------------------------------------------------
   3. HERO — asymmetric (wide editorial column + offset preview), drop cap
   --------------------------------------------------------------------------- */
body.wg-editorial .wg-hero {
  background: var(--ed-bg);
  padding: 84px 0 72px;
  border-bottom: 1px solid var(--ed-ink);
  overflow: hidden;
}
body.wg-editorial .wg-hero::before { content: none; } /* drop the dotted grid */

body.wg-editorial .wg-hero-inner {
  display: grid;
  grid-template-columns: 1.35fr 0.9fr;   /* asymmetric, not centred */
  align-items: start;
  gap: 0;
}
body.wg-editorial .wg-hero-lead {
  text-align: left;
  padding-right: 56px;
  border-right: 1px solid var(--ed-line);  /* magazine column rule */
}
body.wg-editorial .wg-hero-visual { padding-left: 56px; padding-top: 14px; }

body.wg-editorial .wg-h1 {
  font-family: var(--ed-serif);
  font-weight: 600;
  font-size: clamp(2.7rem, 5.4vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 22px 0 22px;
  text-wrap: balance;
}
body.wg-editorial .wg-h1 .accent {
  /* solid ochre + italic — editorial emphasis, NOT a gradient-clipped glow */
  background: none; -webkit-text-fill-color: currentColor; color: var(--ed-accent);
  font-style: italic; font-weight: 500;
}
body.wg-editorial .wg-hero p.lead {
  font-size: 1.12rem; line-height: 1.7; color: var(--ed-ink-2);
  max-width: 46ch; margin: 0;
}
body.wg-editorial .lead .dropcap {
  float: left; font-family: var(--ed-serif); font-weight: 600;
  font-size: 3.4rem; line-height: 0.78; padding: 6px 10px 0 0;
  color: var(--ed-accent);
}

body.wg-editorial .wg-hero-meta {
  margin-top: 30px; gap: 8px 28px; color: var(--ed-ink-2);
  font-size: 0.86rem; font-family: var(--ed-sans);
}
body.wg-editorial .wg-hero-meta i { color: var(--ed-accent); }

/* Buttons — rectangular, ink/ochre, no glow (Rule 2: no pills) */
body.wg-editorial .wg-btn {
  border-radius: var(--ed-r);
  font-family: var(--ed-sans); font-weight: 600;
  letter-spacing: 0.02em; padding: 14px 24px; box-shadow: none;
}
body.wg-editorial .wg-btn-primary { background: var(--ed-ink); color: var(--ed-paper); }
body.wg-editorial .wg-btn-primary:hover { background: var(--ed-accent); color: var(--ed-paper); transform: none; }
body.wg-editorial .wg-btn-ghost {
  background: transparent; color: var(--ed-text);
  border: 1px solid var(--ed-ink); box-shadow: none;
}
body.wg-editorial .wg-btn-ghost:hover { background: var(--ed-ink); color: var(--ed-paper); }

/* Hero preview "clipping" — squared card, hairline, faint paper, no glass */
body.wg-editorial .wg-hero-glow { display: none; }
body.wg-editorial .wg-hero-card {
  width: 100%; max-width: 360px;
  background: var(--ed-card);
  border: 1px solid var(--ed-ink);
  border-radius: var(--ed-r);
  box-shadow: 6px 6px 0 var(--ed-line);   /* offset "print" shadow */
  backdrop-filter: none;
  padding: 24px;
}
body.wg-editorial .wg-hero-card img.wg-hero-logo {
  width: 56px; height: 56px; border-radius: var(--ed-r);
  margin: 0 0 14px; box-shadow: none;
}
body.wg-editorial .wg-hero-card h3 { text-align: left; font-size: 1.3rem; }
body.wg-editorial .wg-hero-card p.session {
  text-align: left; color: var(--ed-ink-2);
  font-family: var(--ed-sans); font-size: 0.82rem;
  padding-bottom: 14px; border-bottom: 1px solid var(--ed-line); margin-bottom: 14px;
}
body.wg-editorial .wg-rep-row {
  background: transparent; border: 0;
  border-bottom: 1px solid var(--ed-line);
  border-radius: 0; padding: 11px 0;
}
body.wg-editorial .wg-rep-row:last-child { border-bottom: 0; }
body.wg-editorial .wg-rep-row .name { color: var(--ed-text); font-family: var(--ed-sans); font-weight: 600; }
body.wg-editorial .wg-rep-row .meta { color: var(--ed-ink-2); font-family: var(--ed-sans); }
body.wg-editorial .wg-rep-row .check {
  width: 22px; height: 22px; border-radius: var(--ed-r);
  background: var(--ed-pine); color: var(--ed-paper);
}
body.wg-editorial .wg-floater {
  background: var(--ed-ink); color: var(--ed-paper);
  border: 0; border-radius: var(--ed-r);
  backdrop-filter: none; font-family: var(--ed-sans); font-weight: 600;
  box-shadow: 4px 4px 0 var(--ed-line);
}
body.wg-editorial .wg-floater i { color: var(--ed-ochre-br); }

/* -----------------------------------------------------------------------------
   4. RUNNING HEADER STRIP — thin editorial dateline
   --------------------------------------------------------------------------- */
body.wg-editorial .wg-strip {
  background: var(--ed-ink); color: var(--ed-paper);
  border: 0; padding: 12px 0;
}
body.wg-editorial .wg-strip-inner {
  color: var(--ed-paper); font-family: var(--ed-sans);
  font-size: 0.74rem; letter-spacing: 0.18em;
}
body.wg-editorial .wg-strip-inner span i { color: var(--ed-ochre-br); }

/* -----------------------------------------------------------------------------
   5. SECTIONS — left-aligned editorial heads with auto numbering + rule
   --------------------------------------------------------------------------- */
body.wg-editorial { counter-reset: ed-sec; }
body.wg-editorial .wg-section { padding: 92px 0; }
body.wg-editorial .wg-section.alt { background: var(--ed-bg-alt); }

body.wg-editorial .wg-section-head {
  counter-increment: ed-sec;
  text-align: left; max-width: none; margin: 0 0 48px;
  padding-bottom: 22px; border-bottom: 1px solid var(--ed-ink);
  position: relative;
}
/* big magazine section numeral, set ragged to the right */
body.wg-editorial .wg-section-head::after {
  content: "Nº " counter(ed-sec, decimal-leading-zero);
  position: absolute; right: 0; bottom: 22px;
  font-family: var(--ed-serif); font-style: italic; font-weight: 500;
  font-size: 1.1rem; color: var(--ed-ink-2); letter-spacing: 0;
}
body.wg-editorial .wg-section-head h2 {
  font-size: clamp(2rem, 4vw, 3.1rem); margin-top: 14px; max-width: 18ch;
}
body.wg-editorial .wg-section-head p {
  color: var(--ed-ink-2); font-size: 1.05rem; margin-top: 12px; max-width: 56ch;
}
/* coral emphasis spans in heads → editorial rose italic */
body.wg-editorial .wg-section-head h2 span,
body.wg-editorial .wg-split h2 span {
  color: var(--ed-rose) !important; font-style: italic;
  -webkit-text-fill-color: var(--ed-rose);
}

/* -----------------------------------------------------------------------------
   6. FEATURES — editorial "departments": hairline columns, numbered, no cards
   --------------------------------------------------------------------------- */
body.wg-editorial .wg-grid-3 { gap: 0; counter-reset: ed-feat; }
body.wg-editorial .wg-grid-3--hero { grid-template-columns: 1.3fr 1fr 1fr; margin-bottom: 0; }

body.wg-editorial .wg-feature {
  counter-increment: ed-feat;
  position: relative;
  background: none; border: 0; border-radius: 0;
  border-top: 2px solid var(--ed-ink);
  padding: 26px 34px 30px 0;
  margin-left: 34px;
  transition: none;
}
body.wg-editorial .wg-feature:first-child { margin-left: 0; }
/* column rule between items (skip first in each visual row) */
body.wg-editorial .wg-grid-3 > .wg-feature::before {
  content: ""; position: absolute; left: -34px; top: 0; bottom: 0;
  width: 1px; background: var(--ed-line);
}
body.wg-editorial .wg-grid-3 > .wg-feature:first-child::before { content: none; }
body.wg-editorial .wg-feature:hover { transform: none; border-color: var(--ed-ink); box-shadow: none; }
body.wg-editorial .wg-feature:hover { border-top-color: var(--ed-accent); }

/* small department index numeral */
body.wg-editorial .wg-feature h3::before {
  content: counter(ed-feat, decimal-leading-zero);
  display: block; font-family: var(--ed-serif); font-style: italic;
  font-size: 0.95rem; color: var(--ed-accent); margin-bottom: 8px;
}
body.wg-editorial .wg-feature .icon {
  width: auto; height: auto; background: none; box-shadow: none;
  color: var(--ed-accent); font-size: 1.25rem; margin: 0 0 10px; border-radius: 0;
  display: block;
}
body.wg-editorial .wg-feature h3 { font-size: 1.35rem; margin-bottom: 10px; }
body.wg-editorial .wg-feature p { color: var(--ed-ink-2); font-family: var(--ed-sans); }
body.wg-editorial .wg-feature a {
  color: var(--ed-accent); font-family: var(--ed-sans); font-weight: 600;
  font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase;
}
body.wg-editorial .wg-feature__thumb {
  border-radius: var(--ed-r); border: 1px solid var(--ed-ink);
  filter: grayscale(0.25) contrast(1.03); aspect-ratio: 16 / 11;
}

/* -----------------------------------------------------------------------------
   7. HOW IT WORKS — oversized outline numerals, staggered (asymmetric) rows
   --------------------------------------------------------------------------- */
body.wg-editorial .wg-steps { gap: 0; }
body.wg-editorial .wg-step {
  background: none; border: 0; border-radius: 0;
  border-top: 1px solid var(--ed-ink);
  padding: 30px 28px 26px 0; margin-left: 28px;
}
body.wg-editorial .wg-step:first-child { margin-left: 0; }
body.wg-editorial .wg-step::before {
  position: static; padding: 0; margin-bottom: 12px;
  background: none; color: var(--ed-line);
  -webkit-text-stroke: 1px var(--ed-accent); color: transparent;
  font-family: var(--ed-serif); font-weight: 700; font-size: 3.4rem;
  border-radius: 0; display: block;
}
/* stagger the middle step down for an asymmetric, hand-set feel */
body.wg-editorial .wg-step:nth-child(2) { transform: translateY(28px); }
body.wg-editorial .wg-step h3 { font-size: 1.3rem; }
body.wg-editorial .wg-step p { color: var(--ed-ink-2); font-family: var(--ed-sans); }

/* -----------------------------------------------------------------------------
   8. SHOWCASE SPLIT — asymmetric 1.15 / 0.85 with column rule
   --------------------------------------------------------------------------- */
body.wg-editorial .wg-split { grid-template-columns: 1.12fr 0.88fr; gap: 56px; align-items: center; }
body.wg-editorial .wg-split h2 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); }
body.wg-editorial .wg-split h2 span { color: var(--ed-rose) !important; font-style: italic; }
body.wg-editorial .wg-split p { color: var(--ed-ink-2); font-family: var(--ed-sans); }
body.wg-editorial .wg-checks li { color: var(--ed-text); font-family: var(--ed-sans); }
body.wg-editorial .wg-checks li i { color: var(--ed-pine); }
body.wg-editorial .wg-showcase-img {
  background: none; border: 1px solid var(--ed-ink); border-radius: var(--ed-r);
  box-shadow: 8px 8px 0 var(--ed-line); padding: 12px;
}
body.wg-editorial .wg-showcase-img img { border-radius: var(--ed-r-sm); filter: grayscale(0.2) contrast(1.03); }

/* -----------------------------------------------------------------------------
   9. STATS — figure-style serif numerals on a hairline baseline grid
   --------------------------------------------------------------------------- */
body.wg-editorial .wg-stats { gap: 0; border-top: 2px solid var(--ed-ink); }
body.wg-editorial .wg-stat {
  background: none; border: 0; border-radius: 0;
  border-right: 1px solid var(--ed-line);
  text-align: left; padding: 26px 26px 26px 0; margin-left: 26px;
}
body.wg-editorial .wg-stat:first-child { margin-left: 0; }
body.wg-editorial .wg-stat:last-child { border-right: 0; }
body.wg-editorial .wg-stat .num {
  font-family: var(--ed-serif); font-weight: 600; font-size: 2.8rem;
  background: none; -webkit-text-fill-color: currentColor; color: var(--ed-ink);
  font-variant-numeric: lining-nums tabular-nums;
}
body.wg-editorial .wg-stat .lbl {
  color: var(--ed-ink-2); font-family: var(--ed-sans);
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; margin-top: 8px;
}

/* -----------------------------------------------------------------------------
   10. DAILY INSIGHTS — two paper clippings, asymmetric widths
   --------------------------------------------------------------------------- */
body.wg-editorial .wg-daily-grid {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 0;
}
body.wg-editorial .wg-daily-card {
  background: var(--ed-card); border: 1px solid var(--ed-ink);
  border-radius: var(--ed-r); padding: 30px 32px;
}
body.wg-editorial .wg-daily-card:last-child { border-left: 0; }
body.wg-editorial .wg-daily-title {
  font-family: var(--ed-serif); font-weight: 600; font-size: 1.4rem;
  color: var(--ed-text); margin-bottom: 12px;
}
body.wg-editorial .wg-daily-card:nth-child(2) .wg-daily-title { color: var(--ed-rose); }
body.wg-editorial .wg-daily-body {
  color: var(--ed-ink-2); font-family: var(--ed-serif); font-size: 1.08rem;
  line-height: 1.7; font-style: italic; margin: 0;
}
body.wg-editorial .wg-daily-loading { opacity: 0.6; font-style: normal; }

/* -----------------------------------------------------------------------------
   11. TESTIMONIALS (if present) — pull-quotes
   --------------------------------------------------------------------------- */
body.wg-editorial .wg-grid-2 { gap: 0; }
body.wg-editorial .wg-quote {
  background: none; border: 0; border-top: 2px solid var(--ed-ink);
  border-radius: 0; padding: 26px 30px 26px 0; margin-left: 30px;
}
body.wg-editorial .wg-quote:first-child { margin-left: 0; }
body.wg-editorial .wg-quote .stars { color: var(--ed-ochre); }
body.wg-editorial .wg-quote p {
  color: var(--ed-text); font-family: var(--ed-serif);
  font-size: 1.25rem; line-height: 1.5; font-style: italic;
}
body.wg-editorial .wg-quote .who .avatar {
  background: var(--ed-pine); color: var(--ed-paper); border-radius: var(--ed-r); font-family: var(--ed-sans);
}
body.wg-editorial .wg-quote .who .name { color: var(--ed-text); font-family: var(--ed-sans); }
body.wg-editorial .wg-quote .who .role { color: var(--ed-ink-2); font-family: var(--ed-sans); }

/* -----------------------------------------------------------------------------
   12. PRICING — editorial rate card, hairline borders, featured column raised
   --------------------------------------------------------------------------- */
body.wg-editorial .wg-price-grid { gap: 0; border-top: 2px solid var(--ed-ink); }
body.wg-editorial .wg-price {
  background: none; border: 0; border-right: 1px solid var(--ed-line);
  border-radius: 0; padding: 34px 30px; box-shadow: none; transform: none;
}
body.wg-editorial .wg-price:last-child { border-right: 0; }
body.wg-editorial .wg-price.feat {
  background: var(--ed-ink); color: var(--ed-paper);
  border: 0; box-shadow: none; transform: none;
}
body.wg-editorial .wg-price.feat h3,
body.wg-editorial .wg-price.feat .amount,
body.wg-editorial .wg-price.feat ul { color: var(--ed-paper); }
body.wg-editorial .wg-price.feat ul li i { color: var(--ed-ochre-br); }
body.wg-editorial .wg-price h3 {
  font-family: var(--ed-sans); font-weight: 600; font-size: 0.8rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ed-ink-2);
}
body.wg-editorial .wg-price.feat h3 { color: var(--ed-ochre-br); }
body.wg-editorial .wg-price .amount {
  font-family: var(--ed-serif); font-weight: 600; font-size: 2.8rem; color: var(--ed-text);
}
body.wg-editorial .wg-price .amount small { font-family: var(--ed-sans); color: var(--ed-ink-2); }
body.wg-editorial .wg-price.feat .amount small { color: var(--ed-rose-br); }
body.wg-editorial .wg-price ul li { font-family: var(--ed-sans); color: var(--ed-ink-2); }
body.wg-editorial .wg-price ul li i { color: var(--ed-pine); }
body.wg-editorial .wg-price-badge {
  background: var(--ed-ochre); color: var(--ed-ink);
  border-radius: var(--ed-r); box-shadow: none;
  font-family: var(--ed-sans); letter-spacing: 0.1em;
}
body.wg-editorial .wg-price p { font-family: var(--ed-sans); }
body.wg-editorial .wg-price.feat .wg-btn-primary { background: var(--ed-ochre); color: var(--ed-ink); }
body.wg-editorial .wg-price.feat .wg-btn-primary:hover { background: var(--ed-ochre-br); color: var(--ed-ink); }
/* "First month $1" highlight + "Just $4/mo" text use coral var in markup — retint */
body.wg-editorial .wg-price p[style] { color: var(--ed-rose) !important; }
body.wg-editorial .wg-price.feat p[style] { color: var(--ed-ochre-br) !important; }

/* -----------------------------------------------------------------------------
   13. FAQ — ruled rows, serif questions
   --------------------------------------------------------------------------- */
body.wg-editorial .wg-faq { max-width: 760px; margin: 0; gap: 0; }
body.wg-editorial .wg-faq details {
  background: none; border: 0; border-top: 1px solid var(--ed-ink);
  border-radius: 0; padding: 22px 4px;
}
body.wg-editorial .wg-faq details:last-of-type { border-bottom: 1px solid var(--ed-ink); }
body.wg-editorial .wg-faq details[open] { border-color: var(--ed-ink); }
body.wg-editorial .wg-faq summary {
  color: var(--ed-text); font-family: var(--ed-serif);
  font-weight: 600; font-size: 1.25rem;
}
body.wg-editorial .wg-faq summary::after { color: var(--ed-accent); }
body.wg-editorial .wg-faq details > p { color: var(--ed-ink-2); font-family: var(--ed-sans); }

/* -----------------------------------------------------------------------------
   14. FINAL CTA — full ink panel, ochre rule, asymmetric (left) text
   --------------------------------------------------------------------------- */
body.wg-editorial .wg-final {
  background: var(--ed-ink);
  border: 0; border-top: 4px solid var(--ed-ochre);
  border-radius: var(--ed-r); box-shadow: none;
  text-align: left; padding: 64px 56px;
}
body.wg-editorial .wg-final h2 { color: var(--ed-paper); font-size: clamp(2rem, 3.4vw, 3rem); max-width: 16ch; }
body.wg-editorial .wg-final p { color: var(--ed-rose-br); margin: 14px 0 28px; font-family: var(--ed-sans); }
body.wg-editorial .wg-final .wg-btn-primary { background: var(--ed-ochre); color: var(--ed-ink); }
body.wg-editorial .wg-final .wg-btn-primary:hover { background: var(--ed-ochre-br); color: var(--ed-ink); }

/* -----------------------------------------------------------------------------
   15. FOOTER — newspaper colophon
   --------------------------------------------------------------------------- */
body.wg-editorial .wg-footer {
  background: var(--ed-bg-alt); border-top: 2px solid var(--ed-ink); padding: 64px 0 28px;
}
body.wg-editorial .wg-footer h4 {
  font-family: var(--ed-sans); font-weight: 600; font-size: 0.76rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ed-ink-2);
}
body.wg-editorial .wg-footer ul a { color: var(--ed-dim); font-family: var(--ed-sans); }
body.wg-editorial .wg-footer ul a:hover { color: var(--ed-accent); }
body.wg-editorial .wg-footer .socials a {
  background: none; border: 1px solid var(--ed-line); border-radius: var(--ed-r); color: var(--ed-dim);
}
body.wg-editorial .wg-footer .socials a:hover { color: var(--ed-accent); border-color: var(--ed-accent); }
body.wg-editorial .wg-footer-bottom { color: var(--ed-ink-2); font-family: var(--ed-sans); border-top: 1px solid var(--ed-line); }
body.wg-editorial .wg-footer p { font-family: var(--ed-sans); }

/* -----------------------------------------------------------------------------
   16. INSTALL BANNER — squared, paper
   --------------------------------------------------------------------------- */
body.wg-editorial .wg-install-banner {
  background: var(--ed-ink); border: 1px solid var(--ed-ochre);
  border-radius: var(--ed-r); color: var(--ed-paper); box-shadow: 6px 6px 0 var(--ed-line);
}
body.wg-editorial .wg-install-banner img { border-radius: var(--ed-r); }
body.wg-editorial .wg-install-banner .copy span { color: var(--ed-rose-br); }
body.wg-editorial .wg-install-banner button {
  background: var(--ed-ochre); color: var(--ed-ink); border-radius: var(--ed-r); font-family: var(--ed-sans);
}
body.wg-editorial .wg-install-banner .close { color: var(--ed-rose-br); }

/* -----------------------------------------------------------------------------
   17. RESPONSIVE — collapse the asymmetry gracefully
   --------------------------------------------------------------------------- */
@media (max-width: 980px) {
  body.wg-editorial .wg-hero-inner { grid-template-columns: 1fr; }
  body.wg-editorial .wg-hero-lead { border-right: 0; padding-right: 0; }
  body.wg-editorial .wg-hero-visual { padding-left: 0; margin-top: 36px; }
  body.wg-editorial .wg-grid-3,
  body.wg-editorial .wg-grid-3--hero,
  body.wg-editorial .wg-steps,
  body.wg-editorial .wg-grid-2,
  body.wg-editorial .wg-price-grid,
  body.wg-editorial .wg-daily-grid,
  body.wg-editorial .wg-split { grid-template-columns: 1fr; }
  body.wg-editorial .wg-feature,
  body.wg-editorial .wg-step,
  body.wg-editorial .wg-quote { margin-left: 0; }
  body.wg-editorial .wg-grid-3 > .wg-feature::before { content: none; }
  body.wg-editorial .wg-step:nth-child(2) { transform: none; }
  body.wg-editorial .wg-stats { grid-template-columns: 1fr 1fr; }
  body.wg-editorial .wg-stat { border-right: 0; border-bottom: 1px solid var(--ed-line); margin-left: 0; }
  body.wg-editorial .wg-price { border-right: 0; border-bottom: 1px solid var(--ed-line); }
  body.wg-editorial .wg-daily-card:last-child { border-left: 1px solid var(--ed-ink); }
  body.wg-editorial .wg-section-head::after { display: none; }
}
@media (max-width: 560px) {
  body.wg-editorial .wg-section { padding: 64px 0; }
  body.wg-editorial .wg-hero { padding: 56px 0 52px; }
  body.wg-editorial .wg-stats { grid-template-columns: 1fr; }
  body.wg-editorial .wg-final { padding: 44px 26px; }
}