:root {
  /* Primitive palette */
  --color-neutral-0: #ffffff;
  --color-neutral-100: #f5f5f7;
  --color-neutral-200: #e1e1e6;
  --color-neutral-600: #50515d;
  --color-neutral-950: #090909;
  --color-navy-900: #17193a;
  --color-blue-100: #e8ecff;
  --color-pink-100: #ffe9f7;
  --color-yellow-100: #fff2d6;

  /* Semantic surfaces */
  --color-canvas: var(--color-neutral-950);
  --color-surface: var(--color-neutral-0);
  --color-surface-muted: var(--color-neutral-100);
  --color-surface-accent-1: var(--color-blue-100);
  --color-surface-accent-2: var(--color-pink-100);
  --color-surface-accent-3: var(--color-yellow-100);
  --color-surface-inverse: var(--color-neutral-950);

  /* Semantic text and borders */
  --color-text-primary: var(--color-navy-900);
  --color-text-secondary: var(--color-neutral-600);
  --color-text-inverse: var(--color-neutral-0);
  --color-text-inverse-muted: rgb(255 255 255 / 0.68);
  --color-border-default: var(--color-yellow-100);
  --color-border-strong: var(--color-navy-900);
  --color-border-inverse: color-mix(in srgb, var(--color-yellow-100) 45%, transparent);

  /* Semantic interaction */
  --color-link: var(--ghost-accent-color, var(--color-navy-900));
  --color-link-hover: var(--color-navy-900);
  --color-focus-ring: var(--ghost-accent-color, var(--color-navy-900));
  --color-button-primary-background: var(--ghost-accent-color, var(--color-navy-900));
  --color-button-primary-text: var(--color-neutral-0);
  --color-code-background: var(--color-neutral-950);
  --color-code-text: var(--color-neutral-100);
  --font-family: Manrope, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-sans: var(--gh-font-heading, var(--font-family));
  --font-serif: var(--gh-font-body, var(--font-family));
  /* Reusable type scale */
  --font-size-display: clamp(3.5rem, 6vw, 6.75rem);
  --font-size-h1: clamp(2.5rem, 4vw, 4.5rem);
  --font-size-h2: clamp(2.25rem, 4vw, 4.25rem);
  --font-size-h3: clamp(1.5rem, 2.2vw, 2rem);
  --font-size-card-title: clamp(1.25rem, 1.5vw, 1.55rem);
  --font-size-body: clamp(1.0625rem, 1rem + .2vw, 1.125rem);
  --font-size-small: clamp(.9375rem, .9rem + .15vw, 1rem);
  /* Reusable component spacing */
  --space-card: clamp(18px, 1.7vw, 28px);
  --space-card-large: clamp(24px, 2.5vw, 42px);
  --space-section-block: clamp(62px, 7vw, 96px);
  --space-header-block: clamp(31px, 3.5vw, 48px);
  --radius-card: 24px;
  --container: 1440px;
  --wide: 1120px;
  --reading: 760px;
  --gutter: clamp(20px, 4vw, 64px);
  --section: var(--space-section-block);
  --radius: 20px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--color-text-primary); background: var(--color-surface); font-family: var(--font-sans); font-size: var(--font-size-body); line-height: 1.6; text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
button, input { font: inherit; }
button { color: inherit; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin-top: 0; }
h1, h2, h3 { font-family: var(--font-sans); line-height: 1.08; letter-spacing: -.035em; }
h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }
p { color: var(--color-text-secondary); }
:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 4px; }
.skip-link { position: fixed; z-index: 1000; top: 12px; left: 12px; padding: 10px 16px; color: var(--color-button-primary-text); background: var(--color-button-primary-background); transform: translateY(-150%); }
.skip-link:focus { transform: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.dg-container { width: min(calc(100% - (var(--gutter) * 2)), var(--container)); margin-inline: auto; }
.dg-reading-width { width: min(calc(100% - (var(--gutter) * 2)), var(--reading)); margin-inline: auto; }
.dg-wide-width { width: min(calc(100% - (var(--gutter) * 2)), var(--wide)); margin-inline: auto; }
.dg-eyebrow { display: inline-block; margin-bottom: 18px; color: var(--color-text-primary); font-size: .74rem; font-weight: 800; letter-spacing: .16em; line-height: 1.3; text-decoration: none; text-transform: uppercase; }
.dg-section { padding-block: var(--section); }
.dg-section__intro { max-width: 850px; margin-bottom: clamp(42px, 6vw, 80px); }
.dg-section__intro h2, .dg-section__header h2 { margin-bottom: 22px; }
.dg-section__intro > p:last-child { max-width: 680px; font-family: var(--font-serif); font-size: 1.25rem; }
.dg-section__header { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: clamp(38px, 5vw, 68px); }
.dg-text-link { font-size: .84rem; font-weight: 800; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.dg-text-link span { margin-left: 8px; }
.section-action { margin: 42px 0 0; text-align: right; }

/* Buttons are intentionally kept visually consistent with the previous theme. */
.dg-btn { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; gap: 15px; padding: 13px 26px; border: 1px solid var(--color-text-primary); border-radius: 999px; font-size: .78rem; font-weight: 800; letter-spacing: .1em; line-height: 1; text-decoration: none; text-transform: uppercase; transition: transform .18s ease; }
.dg-btn:hover { transform: translateY(-2px); }
.dg-btn--primary { color: var(--color-button-primary-text); background: var(--color-button-primary-background); }
.dg-btn--secondary { color: var(--color-text-primary); background: transparent; }
.dg-btn__icon { font-size: 1.15rem; line-height: 0; }

.site-header { position: relative; z-index: 20; border-bottom: 1px solid var(--color-border-default); background: color-mix(in srgb, var(--color-surface) 96%, transparent); }
.site-header__inner { display: grid; min-height: 92px; grid-template-columns: auto minmax(220px, 1fr) auto; align-items: center; gap: 28px; padding-block: var(--space-header-block); }
.site-header__logo { display: inline-flex; flex: none; align-items: center; gap: 11px; text-decoration: none; }
.site-header__logo img { width: 48px; height: 48px; flex: 0 0 48px; object-fit: contain; }
.site-header__wordmark { width: min-content; color: var(--color-text-primary); font-size: 18px; font-weight: 800; letter-spacing: .005em; line-height: 1.08; text-transform: uppercase; }
.site-header__tagline { width: 420px; max-width: 100%; margin: 0; padding-left: 28px; border-left: 1px solid var(--color-border-default); font-size: .82rem; line-height: 1.45; }
.site-header__menu, .primary-nav ul, .site-header__tools { display: flex; align-items: center; }
.site-header__menu { gap: 28px; }
.primary-nav ul, .site-header__tools { gap: 24px; margin: 0; padding: 0; list-style: none; }
.primary-nav a, .site-header__tools a { font-size: .75rem; font-weight: 800; letter-spacing: .13em; text-decoration: none; text-transform: uppercase; }
.primary-nav .is-current a { padding-bottom: 8px; border-bottom: 1px solid; }
.site-header__tools { padding-left: 26px; border-left: 1px solid var(--color-border-default); }
.site-header__tools button { width: 42px; height: 42px; padding: 10px; border: 1px solid var(--color-border-default); border-radius: 50%; background: transparent; cursor: pointer; }
.site-header__tools svg { width: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; }
.site-header__search-label { display: none; }
.site-header__toggle { display: none; border: 0; background: transparent; font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.site-header__toggle-icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.site-header__toggle-icon--close { display: none; }
.site-header__toggle[aria-expanded="true"] .site-header__toggle-icon--menu { display: none; }
.site-header__toggle[aria-expanded="true"] .site-header__toggle-icon--close { display: block; }

.home-hero { overflow: hidden; padding-block: var(--space-section-block); border-bottom: 1px solid var(--color-border-default); }
.home-hero__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(480px, 1.15fr); align-items: center; gap: clamp(56px, 8vw, 130px); }
.home-hero__copy h1 { max-width: 850px; margin-bottom: 30px; font-size: clamp(3.25rem, 5.4vw, 6.2rem); }
.home-hero__copy > p:not(.dg-eyebrow) { max-width: 630px; margin-bottom: 38px; font-family: var(--font-serif); font-size: clamp(1.15rem, 1.6vw, 1.45rem); }
.home-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.home-hero__proof { position: relative; padding: clamp(24px, 4vw, 52px); background: var(--color-surface-muted); }
.home-hero__proof::before { position: absolute; inset: 14px; border: 1px solid color-mix(in srgb, var(--color-text-primary) 14%, transparent); content: ""; pointer-events: none; }
.home-hero__proof-label { position: relative; margin-bottom: 22px; color: var(--color-text-primary); font-size: .74rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.home-hero__previews { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.home-hero__preview { text-decoration: none; }
.home-hero__preview img, .home-hero__preview > span:first-child { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--color-surface-muted); }
.home-hero__publication { display: flex; padding: clamp(24px, 4vw, 55px); flex-direction: column; justify-content: space-between; border: 1px solid var(--color-text-primary); background: var(--color-surface) !important; }
.home-hero__publication small { font-size: .65rem; font-style: normal; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.home-hero__publication b { font-size: clamp(2.5rem, 6vw, 5.7rem); letter-spacing: -.06em; line-height: .9; }
.home-hero__publication i { max-width: 230px; font-family: var(--font-serif); font-size: .86rem; }
.home-hero__preview strong { display: block; margin-top: 10px; font-size: .84rem; }
.home-hero__preview:only-child { grid-column: 1 / -1; }

.theme-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); }
.theme-card { display: grid; min-width: 0; border-top: 1px solid var(--color-text-primary); }
.theme-card__media { display: block; overflow: hidden; margin-top: 18px; background: var(--color-surface-muted); text-decoration: none; }
.theme-card__media img, .theme-card__placeholder { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .4s ease; }
.theme-card:hover .theme-card__media img { transform: scale(1.015); }
.theme-card__placeholder { display: grid; place-items: center; font-size: clamp(2rem, 5vw, 5rem); font-weight: 800; }
.theme-card__body { padding: 26px 2px 0; }
.theme-card__body .dg-eyebrow { margin-bottom: 12px; }
.theme-card__body h3 { margin-bottom: 12px; font-size: clamp(1.9rem, 3vw, 3.2rem); }
.theme-card__body h3 a { text-decoration: none; }
.theme-card__body > p:not(.dg-eyebrow) { max-width: 590px; font-family: var(--font-serif); font-size: 1.08rem; }
.theme-card__footer { display: flex; align-items: center; justify-content: space-between; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--color-border-default); }
.theme-card__footer strong { font-size: 1.2rem; }
.theme-card__link { font-size: .77rem; font-weight: 800; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }

.studio-principles { padding-block: var(--section); color: var(--color-text-inverse); background: var(--color-surface-inverse); }
.studio-principles h2, .studio-principles h3, .studio-principles .dg-eyebrow { color: var(--color-text-inverse); }
.studio-principles p { color: var(--color-text-inverse-muted); }
.studio-principles__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(60px, 10vw, 160px); }
.studio-principles__grid ol { margin: 0; padding: 0; list-style: none; }
.studio-principles__grid li { display: grid; grid-template-columns: 55px 1fr; gap: 22px; padding: 28px 0; border-top: 1px solid var(--color-border-inverse); }
.studio-principles__grid li span { color: var(--color-text-inverse-muted); font-size: .74rem; font-weight: 800; }
.studio-principles__grid h3 { margin-bottom: 8px; }
.studio-principles__grid p { max-width: 580px; margin: 0; }

.studio-story { padding-block: var(--section); background: var(--color-surface-accent-1); }
.studio-story__grid { display: grid; grid-template-columns: .55fr 1.45fr; gap: clamp(50px, 10vw, 170px); }
.studio-story__grid h2 { max-width: 950px; }
.studio-story__grid p:not(.dg-eyebrow) { max-width: 700px; font-family: var(--font-serif); font-size: 1.22rem; }

.home-testimonials { padding-block: var(--section); }
.dg-testimonial-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; border-top: 1px solid var(--color-text-primary); list-style: none; }
.dg-testimonial-grid > li { padding: 34px; border-right: 1px solid var(--color-border-default); }
.dg-testimonial-grid > li:last-child { border-right: 0; }
.dg-testimonial { margin: 0; }
.dg-testimonial__rating { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-bottom: 30px; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.dg-testimonial__quote { margin: 0 0 34px; padding: 0; border: 0; }
.dg-testimonial__quote p { color: var(--color-text-primary); font-family: var(--font-serif); font-size: 1.12rem; }
.dg-testimonial__meta { padding-top: 18px; border-top: 1px solid var(--color-border-default); font-size: .76rem; }
.dg-testimonial__author { font-weight: 800; }
.dg-testimonial__product { margin-left: 10px; color: var(--color-text-secondary); }

.article-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(42px, 5vw, 76px) clamp(24px, 3vw, 48px); }
.article-card { min-width: 0; }
.article-card__media { display: block; overflow: hidden; margin-bottom: 24px; background: var(--color-surface-muted); }
.article-card__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .35s ease; }
.article-card:hover .article-card__media img { transform: scale(1.015); }
.article-card__meta { margin-bottom: 12px; font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.article-card__meta a { text-decoration: none; }
.article-card__title { margin-bottom: 14px; font-size: clamp(1.35rem, 2vw, 1.8rem); }
.article-card__title a { text-decoration: none; }
.article-card__excerpt { margin: 0; font-family: var(--font-serif); font-size: 1rem; }
.pagination-section { width: 100%; background: var(--color-surface-inverse); }
.pagination-wrap { padding-block: clamp(32px, 4vw, 52px); }
.pagination { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; }
.pagination__direction { display: inline-flex; min-height: 48px; width: max-content; align-items: center; gap: 10px; padding: 10px 18px; border: 2px solid var(--color-text-inverse); border-radius: 999px; color: var(--color-text-inverse); background: transparent; font-size: 15px; font-weight: 800; letter-spacing: .04em; text-decoration: none; }
.pagination__direction:hover { color: var(--color-text-primary); background: var(--color-surface); }
.pagination__direction--newer .motion-arrow { transform: rotate(180deg); }
.pagination__direction--older { justify-self: end; }
.pagination__count { color: var(--color-text-inverse-muted); font-size: var(--font-size-body); font-variant-numeric: tabular-nums; }
.pagination__count strong { color: var(--color-text-inverse); font-size: inherit; font-weight: 800; }
.pagination__placeholder:last-child { justify-self: end; }

.topic-section { padding-block: var(--section); border-top: 1px solid var(--color-border-default); background: var(--color-surface-muted); }
.topic-section h2 { max-width: 820px; }
.topic-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 58px; border-top: 1px solid var(--color-text-primary); }
.topic-grid a { padding: 25px 12px 25px 0; border-bottom: 1px solid var(--color-border-default); font-weight: 750; text-decoration: none; }
.topic-grid a::after { float: right; content: "→"; }
.newsletter-section, .post-newsletter { padding-block: var(--space-section-block); background: var(--color-surface-accent-3); }
.newsletter-section__grid { display: grid; grid-template-columns: 1.25fr .75fr; align-items: end; gap: clamp(50px, 9vw, 150px); }
.newsletter-section h2, .post-newsletter h2 { margin-bottom: 18px; }
.newsletter-section__grid p { max-width: 620px; }
.dg-newsletter-form__field { display: flex; padding: 7px; border: 1px solid var(--color-text-primary); border-radius: 999px; background: var(--color-surface); }
.dg-newsletter-form__input { min-width: 0; flex: 1; padding: 10px 17px; border: 0; outline: 0; background: transparent; }
.dg-newsletter-form__submit { display: grid; width: 46px; height: 46px; flex: none; place-items: center; border: 0; border-radius: 50%; color: var(--color-button-primary-text); background: var(--color-button-primary-background); cursor: pointer; }
.dg-newsletter-form__submit svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.dg-newsletter-form__message { display: none; margin: 12px 8px 0; font-size: .8rem; }
.dg-newsletter-form.success .dg-newsletter-form__message--success, .dg-newsletter-form.error .dg-newsletter-form__message--error { display: block; }

.archive-header { max-width: 1050px; margin-left: max(var(--gutter), calc((100vw - var(--container)) / 2)); padding-block: clamp(75px, 10vw, 150px); }
.archive-header h1 { margin-bottom: 28px; font-size: clamp(3.4rem, 7vw, 7.8rem); }
.archive-header > p:last-child { max-width: 720px; font-family: var(--font-serif); font-size: 1.3rem; }
.archive-page { padding-bottom: var(--section); }
.archive-header--author { display: flex; align-items: center; gap: 36px; }
.archive-header--author img { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; }

.comparison-section, .faq-section { padding-block: var(--section); background: var(--color-surface-muted); }
.comparison-grid { display: grid; grid-template-columns: repeat(2, 1fr); margin-top: 60px; border-top: 1px solid var(--color-text-primary); }
.comparison-grid article { padding: 38px 7vw 38px 0; }
.comparison-grid article + article { padding-left: 7vw; border-left: 1px solid var(--color-border-default); }
.comparison-grid h3 { font-size: 2.5rem; }
.comparison-grid__fit { min-height: 60px; font-family: var(--font-serif); }
.comparison-grid li { margin-bottom: 9px; }
.comparison-grid strong { display: block; margin-top: 28px; font-size: 1.4rem; }
.standards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.standards-grid > div { padding-top: 25px; border-top: 1px solid var(--color-text-primary); }
.faq-section__grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: 8vw; }
.faq-section details { padding: 24px 0; border-top: 1px solid var(--color-border-default); }
.faq-section summary { cursor: pointer; font-size: 1.1rem; font-weight: 750; }
.faq-section details p { margin: 16px 0 0; }
.final-cta { padding-block: var(--section); text-align: center; }
.final-cta h2 { max-width: 900px; margin: 0 auto 35px; }

.product-hero { display: grid; grid-template-columns: .72fr 1.28fr; align-items: center; gap: clamp(50px, 8vw, 120px); padding-block: var(--space-section-block); }
.product-hero h1 { margin-bottom: 25px; }
.product-hero__copy > p:not(.dg-eyebrow) { font-family: var(--font-serif); font-size: 1.22rem; }
.product-hero__purchase { display: flex; align-items: baseline; gap: 15px; margin: 28px 0; }
.product-hero__purchase strong { font-size: 1.8rem; }
.product-hero__purchase span { color: var(--color-text-secondary); font-size: .8rem; }
/* The terms line is longer now; give it its own row under the price so it stays readable. */
.product-hero__purchase { flex-wrap: wrap; row-gap: 6px; }
.product-hero__purchase span { flex-basis: 100%; font-size: .9rem; }
.product-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.product-hero__media { padding: clamp(18px, 3vw, 40px); background: var(--color-surface-muted); }
.product-hero__media img, .product-placeholder { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.product-placeholder { display: grid; place-items: center; font-size: 4rem; font-weight: 800; }
.product-summary { padding-block: var(--section); color: var(--color-text-inverse); background: var(--color-surface-inverse); }
.product-summary .dg-eyebrow, .product-summary h2 { color: var(--color-text-inverse); }
.product-summary p { color: var(--color-text-inverse-muted); }
.product-summary__grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 8vw; }
.product-summary__grid h2 { font-size: clamp(2.2rem, 4vw, 4.4rem); }
.product-summary__grid > div:last-child p { font-family: var(--font-serif); font-size: 1.25rem; }
.product-content { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: clamp(50px, 9vw, 140px); padding-block: var(--section); }
.product-content__main { max-width: 820px; }
.product-content__main > h2 { margin-bottom: 50px; }
.product-feature-list article { display: grid; grid-template-columns: 45px 1fr; column-gap: 20px; padding: 25px 0; border-top: 1px solid var(--color-border-default); }
.product-feature-list article > span { grid-row: 1 / 3; font-size: .7rem; font-weight: 800; }
.product-feature-list h3 { margin-bottom: 8px; }
.product-feature-list p { margin: 0; }
.product-content aside { align-self: start; padding: 28px; border-top: 1px solid var(--color-text-primary); background: var(--color-surface-muted); }
.product-content aside ul { margin: 0; padding: 0; list-style: none; }
.product-content aside li { padding: 10px 0; border-bottom: 1px solid var(--color-border-default); }
.product-buy { padding-block: var(--section); background: var(--color-surface-accent-1); }
.product-buy__grid { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 50px; }
.product-buy__grid > div:last-child { display: flex; align-items: center; gap: 24px; }
.product-buy__grid strong { font-size: 2rem; }

.static-page { padding-block: var(--section); }
.static-page article { max-width: var(--wide); }
.page-header { max-width: 850px; margin-bottom: var(--space-section-block); }
.page-header:empty { display: none; }
.page-header h1 { font-size: clamp(3.2rem, 6vw, 6rem); }
.page-header > p:last-child { font-family: var(--font-serif); font-size: 1.25rem; }
.page-feature { margin-bottom: 70px; }
.post-header { padding-top: clamp(75px, 10vw, 145px); padding-bottom: 60px; }
.post-header { width: min(calc(100% - (var(--gutter) * 2)), 1000px); }
.post-header h1 { margin-bottom: 26px; font-size: clamp(2.8rem, 4.5vw, 4.9rem); }
.post-header__standfirst { font-family: var(--font-serif); font-size: clamp(1.2rem, 2vw, 1.5rem); }
.post-meta { display: flex; flex-wrap: wrap; gap: 10px 24px; padding-top: 24px; border-top: 1px solid var(--color-border-default); color: var(--color-text-secondary); font-size: .78rem; }
.post-feature { margin-bottom: 70px; }
.post-feature img { width: 100%; }
.post-feature figcaption { margin-top: 10px; color: var(--color-text-secondary); font-family: var(--font-serif); font-size: .82rem; }
.gh-content { font-family: var(--font-serif); font-size: clamp(1.08rem, 1.45vw, 1.23rem); line-height: 1.76; }
.gh-content > * { margin-bottom: 1.5em; }
.gh-content h2, .gh-content h3 { margin-top: 1.65em; margin-bottom: .65em; font-family: var(--font-sans); }
.gh-content h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
.gh-content h3 { font-size: clamp(1.45rem, 3vw, 2rem); }
.gh-content a { text-decoration: underline; }
.gh-content blockquote { margin: 2em 0; padding: 0 0 0 28px; border-left: 3px solid var(--color-text-primary); font-size: 1.2em; }
.gh-content pre { overflow-x: auto; padding: 24px; color: var(--color-code-text); background: var(--color-code-background); border-radius: var(--radius); font-size: .82em; }
.gh-content code { padding: .15em .32em; background: var(--color-surface-muted); font-size: .85em; }
.gh-content pre code { padding: 0; background: none; }
.gh-content table { display: block; overflow-x: auto; width: 100%; border-collapse: collapse; font-family: var(--font-sans); font-size: .88rem; }
.gh-content th, .gh-content td { padding: 12px; border-bottom: 1px solid var(--color-border-default); text-align: left; }
.gh-content .kg-width-wide { width: min(1100px, calc(100vw - (var(--gutter) * 2))); margin-left: 50%; transform: translateX(-50%); }
.gh-content .kg-width-full { width: 100vw; margin-left: 50%; transform: translateX(-50%); }
.gh-content .kg-image, .gh-content .kg-gallery-image img { width: 100%; }
.gh-content .kg-gallery-container { display: flex; flex-direction: column; gap: 8px; }
.gh-content .kg-gallery-row { display: flex; gap: 8px; }
.gh-content .kg-gallery-image { flex: 1; }
.gh-content .kg-gallery-image img { height: 100%; object-fit: cover; }
.gh-content .kg-card { font-family: var(--font-sans); }
.gh-content .kg-bookmark-card a, .gh-content .kg-bookmark-container { display: grid; overflow: hidden; grid-template-columns: 1fr 220px; border: 1px solid var(--color-border-default); border-radius: var(--radius); text-decoration: none; }
.gh-content .kg-bookmark-content { padding: 24px; }
.gh-content .kg-bookmark-title { color: var(--color-text-primary); font-weight: 800; }
.gh-content a:not(.kg-bookmark-container) { color: var(--color-link); }
.gh-content a:not(.kg-bookmark-container):hover { color: var(--color-link-hover); }
.gh-content .kg-bookmark-description { margin-top: 8px; color: var(--color-text-secondary); font-size: .88rem; }
.gh-content .kg-bookmark-metadata { display: flex; align-items: center; gap: 8px; margin-top: 18px; font-size: .75rem; }
.gh-content .kg-bookmark-icon { width: 20px; height: 20px; }
.gh-content .kg-bookmark-author, .gh-content .kg-bookmark-publisher { color: var(--color-text-secondary); }
.gh-content .kg-bookmark-thumbnail img { width: 100%; height: 100%; object-fit: cover; }
.gh-content .kg-callout-card { padding: 24px; border-radius: var(--radius); }
.gh-content .kg-signup-card { border-radius: var(--radius); }
.post-footer { padding-block: 70px var(--section); }
.post-tags { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 60px; }
.post-tags a { padding: 7px 12px; border: 1px solid var(--color-border-default); border-radius: 999px; font-size: .72rem; text-decoration: none; }
.author-card { display: grid; grid-template-columns: 76px 1fr; gap: 24px; padding-top: 30px; border-top: 1px solid var(--color-text-primary); }
.author-card img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; }
.author-card .dg-eyebrow { margin-bottom: 6px; }
.author-card h2 { margin-bottom: 8px; font-size: 1.55rem; }
.author-card h2 a { text-decoration: none; }
.comments-section { padding-block: var(--section); }
.related-section { padding-block: var(--section); }

.site-footer { padding-top: var(--space-section-block); color: var(--color-text-inverse); background: var(--color-surface-inverse); }
.site-footer__grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: clamp(35px, 5vw, 70px); padding-bottom: 80px; }
.site-footer h2 { margin-bottom: 22px; color: var(--color-text-inverse); font-size: .77rem; letter-spacing: .12em; text-transform: uppercase; }
.site-footer p { color: var(--color-text-inverse-muted); }
.site-footer__about p { max-width: 430px; }
.site-footer__brand { display: block; margin-bottom: 24px; color: var(--color-text-inverse); font-size: 1.5rem; font-weight: 800; text-decoration: none; }
.site-footer ul { margin: 0; padding: 0; list-style: none; }
.site-footer li { margin-bottom: 11px; }
.site-footer a { color: inherit; }
.site-footer__bottom { display: flex; justify-content: space-between; gap: 25px; padding-block: 24px; border-top: 1px solid var(--color-border-inverse); font-size: .75rem; }
.site-footer__bottom p { margin: 0; }

@media (max-width: 1100px) {
  .site-header__tagline { display: none; }
  .site-header__inner { grid-template-columns: auto 1fr; }
  .site-header__menu { justify-self: end; }
  .home-hero__grid { grid-template-columns: 1fr; }
  .home-hero__proof { max-width: 760px; }
  .article-grid { grid-template-columns: repeat(2, 1fr); }
  .product-hero { grid-template-columns: 1fr; }
  .product-hero__copy { max-width: 760px; }
  /* Brand on its own row, then the four link groups side by side. */
  .site-footer__grid { grid-template-columns: repeat(4, 1fr); }
  .site-footer__about { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  :root { --gutter: 20px; }
  body { font-size: 16px; }
  .site-header__inner { min-height: 78px; }
  .site-header__logo img { width: 44px; height: 44px; flex-basis: 44px; }
  .site-header__wordmark { font-size: 16px; line-height: 1.08; }
  .site-header__toggle { display: flex; align-items: center; justify-self: end; gap: 9px; padding: 10px 0 10px 12px; cursor: pointer; }
  .site-header__menu { position: absolute; top: 100%; right: 0; left: 0; z-index: 30; display: none; width: 100%; padding: 10px var(--gutter) 22px; border-bottom: 1px solid var(--color-border-default); background: var(--color-surface); }
  .site-header__menu[data-open="true"] { display: block; }
  .primary-nav, .primary-nav ul { width: 100%; }
  .primary-nav ul { display: block; }
  .primary-nav li { border-bottom: 1px solid var(--color-border-default); }
  .primary-nav a { display: block; padding: 15px 0; font-size: 17px; letter-spacing: .08em; }
  .primary-nav .is-current a { padding-bottom: 15px; border-bottom: 0; }
  .primary-nav .is-current a::after { display: inline-block; width: 26px; height: 2px; margin: 0 0 4px 12px; background: currentColor; content: ""; }
  .site-header__tools { display: grid; width: 100%; gap: 0; margin-top: 0; padding: 0; border: 0; }
  .site-header__tools > a { display: block; padding: 15px 0; border-bottom: 1px solid var(--color-border-default); font-size: 17px; letter-spacing: .08em; }
  .site-header__tools button { display: flex; width: 100%; height: auto; align-items: center; justify-content: space-between; padding: 15px 0; border: 0; border-bottom: 1px solid var(--color-border-default); border-radius: 0; font-size: 17px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
  .site-header__tools button svg { width: 23px; height: 23px; }
  .site-header__search-label { display: inline; }
  .nav-open .home-page { position: relative; }
  .nav-open .home-page::after { position: absolute; z-index: 15; inset: 0; background: color-mix(in srgb, var(--color-canvas) 18%, transparent); content: ""; }
  .home-hero__copy h1, .archive-header h1, .post-header h1 { font-size: clamp(2.8rem, 13vw, 4.8rem); }
  .home-hero__proof { padding: 20px; }
  .theme-grid, .article-grid, .studio-principles__grid, .studio-story__grid, .newsletter-section__grid, .comparison-grid, .standards-grid, .faq-section__grid, .product-summary__grid, .product-content, .product-buy__grid { grid-template-columns: 1fr; }
  .dg-section__header { align-items: start; flex-direction: column; }
  .dg-testimonial-grid { grid-template-columns: 1fr; }
  .dg-testimonial-grid > li { padding: 28px 0; border-right: 0; border-bottom: 1px solid var(--color-border-default); }
  .topic-grid { grid-template-columns: 1fr; }
  .archive-header { margin-left: var(--gutter); }
  .comparison-grid article + article { padding-left: 0; border-top: 1px solid var(--color-border-default); border-left: 0; }
  .comparison-grid__fit { min-height: 0; }
  .product-content aside { order: -1; }
  .product-buy__grid > div:last-child { align-items: flex-start; flex-direction: column; }
  .gh-content .kg-bookmark-card a { grid-template-columns: 1fr; }
  .gh-content .kg-bookmark-thumbnail { height: 180px; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .site-footer__about { grid-column: 1 / -1; }
  .site-footer__bottom { flex-direction: column; }
}

/* Premium refinement: white canvas, readable type, restrained color. */
.site-header { color: var(--color-text-primary); border-color: var(--color-border-default); background: var(--color-surface); }
.site-header__logo { padding: 0; background: transparent; }
.site-header__tagline { color: var(--color-text-secondary); border-color: var(--color-border-default); font-size: 16px; }
.primary-nav a, .site-header__tools a { color: var(--color-text-primary); font-size: 15px; }
.site-header__tools { border-color: var(--color-border-default); }
.site-header__tools button { color: var(--color-text-primary); border-color: var(--color-border-default); }
.home-page { padding-bottom: 0; background: var(--color-surface); }
.home-page .dg-eyebrow, .site-header__toggle, .dg-btn, .dg-text-link { font-size: 15px; }

.home-hero { color: var(--color-text-primary); border-bottom: 1px solid var(--color-border-default); background: var(--color-surface); }
.home-hero .dg-eyebrow { color: var(--color-text-secondary); }
.home-hero__copy > p:not(.dg-eyebrow) { color: var(--color-text-secondary); font-size: 19px; }
.home-hero__copy h1 span { color: var(--color-text-primary); }
.home-hero__window-bar b, .home-hero__window-content p, .home-hero__window-note, .home-hero__window-content a { font-size: 15px; }
.home-hero__window-content > span { font-size: 17px; }

.home-standards { padding: var(--space-section-block) 0 0; border: 0; background: transparent; }
.home-standards > .dg-container { padding: 0; border-radius: 0; background: transparent; }
.home-standards__heading { display: block; margin-bottom: 28px; }
.home-standards__heading .dg-eyebrow { margin-bottom: 10px; }
.home-standards__grid { align-items: start; gap: 30px; }
.home-standards__grid li { height: 100%; align-items: flex-start; padding: 0; border-radius: 0; background: transparent; }
.home-standards__grid h3 { font-size: 17px; }
.home-standards__grid p { font-size: 16px; line-height: 1.5; }
.round-icon { display: block; width: 27px; height: 27px; flex: 0 0 27px; border-radius: 0; background: transparent !important; }
.round-icon svg { width: 27px; height: 27px; stroke-width: 1.6; }

.home-themes { padding: clamp(70px, 8vw, 120px) 0; border-radius: 0; }
.home-section-heading > p { font-size: 18px; }
.theme-card { border: 1px solid var(--color-border-default); background: var(--color-surface-accent-1); }
.theme-card__body .dg-eyebrow, .article-card__meta a { padding: 6px 11px; border: 1px solid color-mix(in srgb, var(--color-text-primary) 20%, transparent); background: transparent; font-size: 15px; }
.theme-card__body > p:not(.dg-eyebrow) { font-size: 18px; }
.theme-card__footer strong { font-size: 20px; }
.theme-card__link { font-size: 15px; }

.home-reviews { margin-top: clamp(45px, 6vw, 75px); padding-top: 35px; }
.home-reviews__grid { gap: 18px; }
.home-reviews__grid li, .home-reviews__grid li:nth-child(2), .home-reviews__grid li:nth-child(3) { border: 1px solid var(--color-border-default); background: var(--color-surface); }
.home-reviews__grid figure { min-height: 0; padding: 26px; }
.review-stars { margin-bottom: 16px; font-size: 20px; }
.home-reviews blockquote { margin-bottom: 22px; }
.home-reviews blockquote p { font-size: 17px; }
.home-reviews figcaption { font-size: 16px; }

.home-guides { margin-top: 0; padding-block: clamp(70px, 8vw, 120px); border-top: 1px solid var(--color-border-default); border-radius: 0; background: var(--color-surface); }
.home-guides__layout { grid-template-columns: minmax(0, 1fr) 310px; gap: clamp(45px, 7vw, 100px); }
.article-grid--home { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--color-border-default); }
.article-grid--home .article-card { display: grid; grid-template-columns: 210px minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 26px; padding: 24px 0; border-bottom: 1px solid var(--color-border-default); border-radius: 0; background: transparent; }
.article-grid--home .article-card__media { grid-row: 1 / 4; margin: 0; border-radius: 16px; }
.article-grid--home .article-card__media img { height: 100%; min-height: 145px; border-radius: 16px; object-fit: cover; }
.article-grid--home .article-card__meta, .article-grid--home .article-card__title, .article-grid--home .article-card__excerpt { margin-right: 0; margin-left: 0; }
.article-grid--home .article-card__meta { margin-bottom: 10px; }
.article-grid--home .article-card__meta a { font-size: 15px; }
.article-grid--home .article-card__title { margin-bottom: 9px; font-size: 23px; }
.article-grid--home .article-card__excerpt { font-size: 16px; line-height: 1.5; }
.home-guides__sidebar { position: sticky; top: 25px; padding: 0 0 0 34px; border-left: 1px solid var(--color-border-default); border-radius: 0; background: transparent; }
.home-guides__sidebar > .round-icon { margin-bottom: 24px; }
.home-guides__sidebar h2 { font-size: 30px; }
.home-guides__sidebar nav { gap: 0; border-top: 1px solid var(--color-border-default); }
.home-guides__sidebar nav a, .home-guides__sidebar nav a:nth-child(2n), .home-guides__sidebar nav a:nth-child(3n) { padding: 14px 0; border-bottom: 1px solid var(--color-border-default); border-radius: 0; background: transparent; font-size: 16px; }
.home-guides__newsletter { margin-top: 32px; padding: 28px 0 0; border-top: 1px solid var(--color-border-default); border-radius: 0; background: transparent; }
.home-guides__newsletter h3 { font-size: 20px; }
.home-guides__newsletter p { font-size: 16px; }
.home-guides__newsletter .dg-newsletter-form__field { background: var(--color-surface); }
.dg-newsletter-form__input { font-size: 16px; }
.site-footer h2, .site-footer__bottom { font-size: 15px; }

@media (max-width: 760px) {
  .site-header__menu { color: var(--color-text-primary); border-color: var(--color-border-default); background: var(--color-surface); }
  .primary-nav li { border-color: var(--color-border-default); }
  .home-standards > .dg-container { padding: 38px 0; }
  .home-themes { width: min(calc(100% - 40px), var(--container)); padding: 65px 0; }
  .home-guides__sidebar { position: static; padding: 35px 0 0; border-top: 1px solid var(--color-border-default); border-left: 0; }
  .article-grid--home .article-card { grid-template-columns: 1fr; }
  .article-grid--home .article-card__media { grid-row: auto; margin-bottom: 18px; }
}

/* Editorial guide module: varied hierarchy without divider-heavy rows. */
.home-guides { margin: 22px; padding-block: clamp(64px, 7vw, 106px); border: 0; border-radius: 34px; background: var(--color-surface-accent-1); }
.home-guides__layout { grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(34px, 5vw, 72px); }
.home-section-heading--guides { margin-bottom: 34px; }
.home-section-heading--guides h2 { margin: 0; font-size: clamp(2.5rem, 4vw, 4.4rem); }

.article-grid--home { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; border: 0; }
.article-grid--home .article-card { display: block; padding: var(--space-card); overflow: hidden; border: 0; border-radius: var(--radius-card); background: var(--color-surface); transition: transform .16s ease, box-shadow .16s ease; }
.article-grid--home .article-card:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--color-text-primary); }
.article-grid--home .article-card:first-child { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(310px, .9fr) minmax(0, 1.1fr); grid-template-rows: auto auto 1fr; column-gap: var(--space-card-large); padding: var(--space-card); }
.article-grid--home .article-card__media { display: block; margin: 0 0 20px; overflow: hidden; border-radius: 17px; }
.article-grid--home .article-card__media img { width: 100%; height: auto; min-height: 0; aspect-ratio: 16 / 10; border-radius: 17px; object-fit: cover; }
.article-grid--home .article-card:first-child .article-card__media { grid-row: 1 / 4; margin: 0; }
.article-grid--home .article-card:first-child .article-card__media img { height: 100%; min-height: 320px; aspect-ratio: auto; }
.article-grid--home .article-card__meta { margin: 2px 0 11px; }
.article-grid--home .article-card__meta a { padding: 0; border: 0; color: var(--color-text-secondary); background: transparent; font-size: 15px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.article-grid--home .article-card__title { margin: 0; font-size: var(--font-size-card-title); line-height: 1.2; }
.article-grid--home .article-card:first-child .article-card__title { margin: 0 0 14px; font-size: clamp(2rem, 3vw, 3rem); }
.article-grid--home .article-card__excerpt { display: none; }
.article-grid--home .article-card:first-child .article-card__excerpt { display: block; margin: 0; font-size: 17px; line-height: 1.55; }

.home-guides__sidebar { position: sticky; top: 25px; padding: 28px; border: 0; border-radius: 28px; background: var(--color-surface); }
.home-guides__sidebar h2 { margin-bottom: 22px; font-size: 30px; }
.home-guides__sidebar nav { display: grid; gap: 8px; border: 0; }
.home-guides__sidebar nav a, .home-guides__sidebar nav a:nth-child(2n), .home-guides__sidebar nav a:nth-child(3n) { padding: 11px 13px; border: 0; border-radius: 14px; background: var(--color-surface-muted); font-size: 16px; }
.home-guides__sidebar nav a:nth-child(3n + 1) { background: var(--color-surface-accent-1); }
.home-guides__sidebar nav a:nth-child(3n + 2) { background: var(--color-surface-accent-2); }
.home-guides__sidebar nav a:nth-child(3n) { background: var(--color-surface-accent-3); }
.home-guides__newsletter { margin-top: 24px; padding: 22px; border: 0; border-radius: 20px; background: var(--color-surface-muted); }
.home-guides__newsletter h3 { font-size: 20px; }
.home-guides__newsletter p { font-size: 16px; }

@media (max-width: 1100px) {
  .home-guides__layout { grid-template-columns: 1fr; }
  .home-guides__sidebar { position: static; }
  .home-guides__sidebar nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .home-guides { margin: 10px; border-radius: 28px; }
  .article-grid--home { grid-template-columns: 1fr; }
  .article-grid--home .article-card:first-child { display: block; grid-column: auto; padding: var(--space-card); }
  .article-grid--home .article-card:first-child .article-card__media { margin-bottom: 20px; }
  .article-grid--home .article-card:first-child .article-card__media img { height: auto; min-height: 0; aspect-ratio: 16 / 10; }
  .article-grid--home .article-card__title, .article-grid--home .article-card:first-child .article-card__title { margin-right: 4px; margin-left: 4px; font-size: 22px; }
  .article-grid--home .article-card__meta, .article-grid--home .article-card:first-child .article-card__excerpt { margin-right: 4px; margin-left: 4px; }
  .home-guides__sidebar { padding: 24px; }
  .home-guides__sidebar nav { grid-template-columns: 1fr; }
}

/* Guide band and site-wide subscription — final layout rules. */
.home-guides { margin: 0; border-radius: 0; }
.home-guides__layout { grid-template-columns: minmax(0, 1fr) 360px; grid-template-areas: "heading empty" "main sidebar"; column-gap: clamp(34px, 5vw, 72px); row-gap: var(--space-card-large); }
.home-guides__main { display: block; grid-area: main; min-width: 0; }
.home-section-heading--guides { grid-area: heading; align-items: end; gap: 32px; margin-bottom: 0; }
.article-grid--home { grid-area: auto; }
.home-section-heading--guides > div { max-width: 760px; }
.home-section-heading--guides h2 { max-width: 800px; font-size: var(--font-size-h2); line-height: 1.04; }
.home-section-heading--guides p { max-width: 680px; margin: 14px 0 0; color: var(--color-text-secondary); font-size: 17px; line-height: 1.55; }
.home-guides__main > .dg-text-link { display: inline-flex; width: max-content; align-items: center; gap: 8px; margin-top: var(--space-card-large); padding-bottom: 5px; border-bottom: 2px solid currentColor; white-space: nowrap; }
.home-guides__main > .dg-text-link span { margin-left: 0; }
.home-guides__sidebar { grid-area: sidebar; padding: 4px 0 0; border: 0; border-radius: 0; background: transparent; }
.home-guides__sidebar h2 { margin-bottom: 18px; font-size: 27px; }
.home-guides__sidebar nav { gap: 8px; }
.home-guides__sidebar nav a,
.home-guides__sidebar nav a:nth-child(2n),
.home-guides__sidebar nav a:nth-child(3n),
.home-guides__sidebar nav a:nth-child(3n + 1),
.home-guides__sidebar nav a:nth-child(3n + 2) { padding: 13px 16px; border: 0; border-radius: 14px; background: var(--color-surface); }
.home-guides__sidebar nav a:hover,
.home-guides__sidebar nav a:nth-child(2n):hover,
.home-guides__sidebar nav a:nth-child(3n):hover,
.home-guides__sidebar nav a:nth-child(3n + 1):hover,
.home-guides__sidebar nav a:nth-child(3n + 2):hover { color: var(--color-button-primary-text); background: var(--color-button-primary-background); }

.site-subscribe { padding-block: var(--space-section-block); background: var(--color-surface-accent-3); }
.site-subscribe__inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(420px, .9fr); align-items: center; gap: clamp(50px, 8vw, 130px); }
.site-subscribe h2 { max-width: 720px; margin: 0 0 16px; font-size: var(--font-size-h2); line-height: 1.04; }
.site-subscribe p:not(.dg-eyebrow) { max-width: 650px; margin: 0; color: var(--color-text-secondary); font-size: 17px; line-height: 1.55; }
.site-subscribe__action { width: 100%; max-width: 560px; justify-self: end; }
.site-subscribe .dg-newsletter-form__field { background: var(--color-surface); }
.site-subscribe__action > p a { color: var(--color-text-primary); font-weight: 800; }

@media (max-width: 1100px) {
  .home-guides__layout { grid-template-columns: 1fr; grid-template-areas: "heading" "main" "sidebar"; }
  .home-guides__sidebar nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-subscribe__inner { grid-template-columns: 1fr; }
  .site-subscribe__action { max-width: 620px; justify-self: start; }
}

@media (max-width: 760px) {
  .home-guides { margin: 0; border-radius: 0; }
  .home-section-heading--guides { align-items: flex-start; }
  .home-guides__sidebar { padding: 8px 0 0; }
  .home-guides__sidebar nav { grid-template-columns: 1fr; }
  .site-subscribe__inner { gap: 30px; }
  .site-subscribe__action { min-width: 0; }
}

/* Final type scale and flat component rules. */
.home-hero__copy h1, .page-header h1, .product-hero h1 { font-size: var(--font-size-h1); }
.archive-header h1 { font-size: var(--font-size-display); }
.post-header h1 { font-size: clamp(2.75rem, 4.5vw, 4.75rem); }
.home-section-heading h2, .home-section-heading--guides h2, .site-subscribe h2, .product-summary__grid h2 { font-size: var(--font-size-h2); }
.home-reviews__header h2, .home-standards__heading h2 { font-size: var(--font-size-h3); }
.theme-card__body h3 { font-size: var(--font-size-h3); }
.article-card__title, .article-grid--home .article-card__title { font-size: var(--font-size-card-title); }
.article-grid--home .article-card:first-child .article-card__title { font-size: clamp(2rem, 3vw, 3rem); }
.dg-eyebrow, .dg-text-link, .primary-nav a, .site-header__tools a { font-size: var(--font-size-small); }
.home-section-heading--guides { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-card-large); }
.home-section-heading--guides h2 { max-width: 800px; }
.home-section-heading--guides .dg-text-link { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 7px; padding-bottom: 5px; border-bottom: 2px solid currentColor; white-space: nowrap; }
.home-section-heading--guides .dg-text-link span { margin-left: 0; }
.article-grid--home .article-card { padding: var(--space-card); border-radius: var(--radius-card); transition: transform .16s ease, box-shadow .16s ease; }
.article-grid--home .article-card:first-child { gap: 0 var(--space-card-large); padding: var(--space-card); }
.article-grid--home .article-card:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--color-text-primary); }
.article-grid--home .article-card__media, .article-grid--home .article-card:first-child .article-card__media, .article-grid--home .article-card__media img { border-radius: calc(var(--radius-card) - 7px); }
.article-grid--home .article-card__meta, .article-grid--home .article-card__title { margin-right: 0; margin-left: 0; }
.dg-newsletter-form__field { padding: 6px; border-width: 2px; }
.dg-newsletter-form__submit { width: 48px; height: 48px; border: 2px solid var(--color-button-primary-background); }
.dg-newsletter-form__submit svg { width: 21px; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.dg-newsletter-form:focus-within .dg-newsletter-form__field { outline: 2px solid var(--color-focus-ring); outline-offset: 3px; }

@media (max-width: 760px) {
  .home-section-heading--guides { align-items: flex-start; }
  .article-grid--home .article-card:first-child { padding: var(--space-card); }
}

/* Final typography, card rhythm, and flat interaction system. */
.home-hero__copy h1,
.page-header h1,
.product-hero h1 { font-size: var(--font-size-h1); }
.archive-header h1 { font-size: var(--font-size-display); }
.post-header h1 { font-size: clamp(2.75rem, 4.5vw, 4.75rem); }
.home-section-heading h2,
.home-section-heading--guides h2,
.site-subscribe h2,
.product-summary__grid h2 { font-size: var(--font-size-h2); }
.home-reviews__header h2,
.home-standards__heading h2 { font-size: var(--font-size-h3); }
.theme-card__body h3 { font-size: var(--font-size-h3); }
.article-card__title,
.article-grid--home .article-card__title { font-size: var(--font-size-card-title); }
.article-grid--home .article-card:first-child .article-card__title { font-size: clamp(2rem, 3vw, 3rem); }
.dg-eyebrow,
.dg-text-link,
.primary-nav a,
.site-header__tools a { font-size: var(--font-size-small); }

.home-section-heading--guides { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-card-large); }
.home-section-heading--guides h2 { max-width: 800px; }
.home-section-heading--guides .dg-text-link { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 7px; padding-bottom: 5px; border-bottom: 2px solid currentColor; white-space: nowrap; }
.home-section-heading--guides .dg-text-link span { margin-left: 0; }

.article-grid--home .article-card { padding: var(--space-card); border-radius: var(--radius-card); transition: transform .16s ease, box-shadow .16s ease; }
.article-grid--home .article-card:first-child { gap: 0 var(--space-card-large); padding: var(--space-card); }
.article-grid--home .article-card:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--color-text-primary); }
.article-grid--home .article-card__media,
.article-grid--home .article-card:first-child .article-card__media { border-radius: calc(var(--radius-card) - 7px); }
.article-grid--home .article-card__media img { border-radius: calc(var(--radius-card) - 7px); }
.article-grid--home .article-card__meta,
.article-grid--home .article-card__title { margin-right: 0; margin-left: 0; }

.dg-newsletter-form__field { padding: 6px; border-width: 2px; }
.dg-newsletter-form__submit { width: 48px; height: 48px; border: 2px solid var(--color-button-primary-background); }
.dg-newsletter-form__submit svg { width: 21px; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.dg-newsletter-form:focus-within .dg-newsletter-form__field { outline: 2px solid var(--color-focus-ring); outline-offset: 3px; }

@media (max-width: 760px) {
  .home-section-heading--guides { align-items: flex-start; }
  .home-section-heading--guides .dg-text-link { margin-bottom: 0; }
  .article-grid--home .article-card:first-child { padding: var(--space-card); }
}

/* Site shell: one inset white publication card on a black canvas. */
body { padding: 24px 24px 0; background: var(--color-canvas); }
.site-shell { overflow: clip; border-radius: 42px; background: var(--color-surface); }
.site-footer { margin: 0 -24px; border-radius: 0; }

@media (max-width: 760px) {
  body { padding: 10px 10px 0; }
  .site-shell { border-radius: 28px; }
  .site-footer { margin: 0 -10px; }
}

@media (max-width: 480px) {
  .home-hero__previews { grid-template-columns: 1fr; }
  .home-hero__preview:only-child { grid-column: auto; }
  .home-hero__actions, .product-hero__actions { align-items: stretch; flex-direction: column; }
  .dg-btn { width: 100%; }
  /* Two short link columns still fit at 320px and keep the footer from getting very tall. */
  .site-footer__grid { column-gap: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Homepage brand system: circular logo language, pill controls, soft cards. */
.site-header { color: var(--color-text-inverse); border-color: var(--color-border-inverse); background: var(--color-surface-inverse); }
.site-header__logo { padding: 5px 18px; border-radius: 999px; background: var(--color-surface); }
.site-header__tagline { color: var(--color-text-inverse-muted); border-color: var(--color-border-inverse); }
.primary-nav a, .site-header__tools a { color: var(--color-text-inverse); }
.site-header__tools { border-color: var(--color-border-inverse); }
.site-header__tools button { color: var(--color-text-inverse); border-color: var(--color-border-inverse); }
.home-page { padding-bottom: 22px; background: var(--color-surface-inverse); }
.home-page .dg-eyebrow { color: inherit; }

.home-hero { color: var(--color-text-inverse); border: 0; background: var(--color-surface-inverse); }
.home-hero__grid { grid-template-columns: minmax(0, .92fr) minmax(460px, 1.08fr); }
.home-hero__copy h1 { max-width: 760px; }
.home-hero__copy h1 span { color: var(--color-surface-accent-1); font-family: var(--font-family); font-style: normal; font-weight: 500; letter-spacing: -.06em; }
.home-hero__copy > p:not(.dg-eyebrow) { color: var(--color-text-inverse-muted); }
.home-hero .dg-eyebrow { color: var(--color-text-inverse-muted); }
.home-hero__visual { padding: clamp(14px, 2vw, 24px); border-radius: 34px; background: var(--color-surface-accent-1); }
.home-hero__window { overflow: hidden; color: var(--color-text-primary); border: 1px solid var(--color-border-strong); border-radius: 24px; background: var(--color-surface); }
.home-hero__window-bar { display: flex; align-items: center; gap: 7px; padding: 14px 18px; border-bottom: 1px solid var(--color-border-default); }
.home-hero__window-bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--color-text-primary); }
.home-hero__window-bar b { margin-left: auto; font-size: .65rem; letter-spacing: .08em; }
.home-hero__window-content { display: flex; min-height: 360px; padding: clamp(32px, 6vw, 74px); flex-direction: column; justify-content: center; }
.home-hero__window-content p { margin-bottom: 16px; color: var(--color-text-primary); font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.home-hero__window-content strong { display: block; margin-bottom: 18px; font-size: clamp(3.6rem, 7vw, 7rem); letter-spacing: -.07em; line-height: .85; }
.home-hero__window-content > span { font-family: var(--font-serif); font-size: 1.05rem; }
.home-hero__window-content a { align-self: flex-start; margin-top: 36px; font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.home-hero__window-note { display: flex; justify-content: space-between; gap: 18px; padding: 14px 18px; color: var(--color-text-primary); background: var(--color-surface-accent-3); font-size: .64rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

.home-standards { padding: 0 0 22px; background: var(--color-surface-inverse); }
.home-standards > .dg-container { padding: clamp(28px, 4vw, 50px); border-radius: 32px; background: var(--color-surface); }
.home-standards__heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.home-standards__heading .dg-eyebrow { margin: 0; }
.home-standards__heading h2 { margin: 0; font-size: clamp(1.6rem, 2.5vw, 2.5rem); }
.home-standards__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 0; padding: 0; list-style: none; }
.home-standards__grid li { display: flex; min-width: 0; align-items: center; gap: 15px; padding: 16px; border-radius: 22px; background: var(--color-surface-muted); }
.home-standards__grid h3 { margin: 0 0 3px; font-size: .95rem; letter-spacing: -.01em; }
.home-standards__grid p { margin: 0; font-size: .75rem; line-height: 1.35; }
.round-icon { display: grid; width: 48px; height: 48px; flex: 0 0 48px; place-items: center; border-radius: 50%; }
.round-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.round-icon--lavender { background: var(--color-surface-accent-1); }
.round-icon--blue { background: var(--color-surface-accent-1); }
.round-icon--rose { background: var(--color-surface-accent-2); }
.round-icon--yellow { background: var(--color-surface-accent-3); }

.home-themes { padding: clamp(55px, 7vw, 100px); border-radius: 34px; background: var(--color-surface); }
.home-section-heading { display: grid; grid-template-columns: 1.35fr .65fr; align-items: end; gap: 50px; margin-bottom: clamp(35px, 5vw, 65px); }
.home-section-heading h2 { max-width: 820px; margin: 0; font-size: clamp(2.4rem, 4.5vw, 4.8rem); }
.home-section-heading > p { max-width: 430px; margin: 0; font-family: var(--font-serif); font-size: 1.12rem; }
.theme-grid--home { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.theme-grid--home .theme-card:only-child, .theme-grid--catalogue .theme-card:only-child { grid-column: 1 / -1; display: grid; grid-template-columns: 1.1fr .9fr; align-items: stretch; background: var(--color-surface-accent-1); }
/* The single card's media column can be taller than the image; centre the preview instead of leaving a gap below it. */
.theme-grid--home .theme-card:only-child .theme-card__media, .theme-grid--catalogue .theme-card:only-child .theme-card__media { display: flex; align-items: center; }
/* Let price and link stack on narrow cards rather than breaking "one-time" across lines. */
.theme-card__footer { flex-wrap: wrap; gap: 12px 20px; }
.theme-card__footer strong, .theme-card__link { white-space: nowrap; }
.theme-card__footer small { font-size: .7em; font-weight: 600; }
.theme-card { overflow: hidden; border: 0; border-radius: 28px; background: var(--color-surface-accent-1); }
.theme-card__media { margin: 12px; border-radius: 20px; background: var(--color-surface); }
.theme-card__media img { border-radius: 20px; }
.theme-card__body { padding: 24px 28px 28px; }
.theme-card__body .dg-eyebrow, .article-card__meta a { display: inline-flex; width: max-content; padding: 7px 11px; border-radius: 999px; color: var(--color-text-primary); background: var(--color-surface); font-size: .63rem; }
.theme-card__footer { border-color: color-mix(in srgb, var(--color-text-primary) 15%, transparent); }

.home-reviews { margin-top: clamp(50px, 7vw, 92px); padding-top: 40px; border-top: 1px solid var(--color-border-default); }
.home-reviews__header { display: flex; align-items: end; justify-content: space-between; gap: 25px; margin-bottom: 28px; }
.home-reviews__header .dg-eyebrow { margin-bottom: 8px; }
.home-reviews__header h2 { margin: 0; font-size: clamp(1.8rem, 3vw, 3.2rem); }
.home-reviews__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.home-reviews__grid li { border-radius: 24px; background: var(--color-surface-accent-1); }
.home-reviews__grid li:nth-child(2) { background: var(--color-surface-accent-3); }
.home-reviews__grid li:nth-child(3) { background: var(--color-surface-accent-2); }
.home-reviews__grid figure { display: flex; min-height: 100%; margin: 0; padding: 26px; flex-direction: column; }
.review-stars { margin-bottom: 20px; font-size: 1.15rem; letter-spacing: .14em; }
.home-reviews blockquote { margin: 0 0 28px; padding: 0; border: 0; }
.home-reviews blockquote p { color: var(--color-text-primary); font-family: var(--font-serif); font-size: .98rem; line-height: 1.55; }
.home-reviews figcaption { margin-top: auto; font-size: .72rem; font-weight: 800; }

.home-guides { margin-top: 22px; padding-block: clamp(60px, 8vw, 110px); border-radius: 34px; background: var(--color-surface-accent-1); }
.home-guides__layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; align-items: start; gap: clamp(35px, 6vw, 85px); }
.home-guides__main, .home-guides__sidebar { min-width: 0; }
.home-section-heading--guides { display: flex; align-items: end; justify-content: space-between; }
.home-section-heading--guides h2 { font-size: clamp(2.5rem, 4vw, 4.2rem); }
.article-grid--home { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.article-grid--home .article-card { padding: 12px 12px 24px; border-radius: 24px; background: var(--color-surface); }
.article-grid--home .article-card__media { margin-bottom: 20px; border-radius: 17px; }
.article-grid--home .article-card__media img { border-radius: 17px; }
.article-grid--home .article-card__meta, .article-grid--home .article-card__title, .article-grid--home .article-card__excerpt { margin-right: 10px; margin-left: 10px; }
.article-grid--home .article-card__meta a { background: var(--color-surface-accent-3); }
.article-grid--home .article-card__title { margin-bottom: 11px; font-size: 1.32rem; line-height: 1.16; }
.article-grid--home .article-card__excerpt { font-size: .92rem; line-height: 1.5; }
.home-guides__sidebar { position: sticky; top: 25px; padding: 26px; border-radius: 28px; background: var(--color-surface); }
.home-guides__sidebar > .round-icon { margin-bottom: 26px; }
.home-guides__sidebar .dg-eyebrow { margin-bottom: 7px; }
.home-guides__sidebar h2 { margin-bottom: 22px; font-size: 2rem; }
.home-guides__sidebar nav { display: grid; gap: 8px; }
.home-guides__sidebar nav a { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 12px 15px; border-radius: 999px; background: var(--color-surface-muted); font-size: .78rem; font-weight: 750; text-decoration: none; }
.home-guides__sidebar nav a:nth-child(2n) { background: var(--color-surface-accent-1); }
.home-guides__sidebar nav a:nth-child(3n) { background: var(--color-surface-accent-3); }
.home-guides__sidebar nav b { font-size: .95rem; }
.home-guides__newsletter { margin-top: 30px; padding: 22px; border-radius: 22px; background: var(--color-surface-accent-2); }
.home-guides__newsletter h3 { margin-bottom: 8px; font-size: 1.12rem; }
.home-guides__newsletter p { font-size: .78rem; }
.home-guides__newsletter .dg-newsletter-form__field { background: var(--color-surface); }

@media (max-width: 1100px) {
  .home-hero__grid { grid-template-columns: 1fr; }
  .home-hero__visual { max-width: 820px; }
  .home-standards__grid { grid-template-columns: repeat(2, 1fr); }
  .home-guides__layout { grid-template-columns: minmax(0, 1fr) 290px; gap: 28px; }
}

@media (max-width: 760px) {
  .site-header__logo { padding: 3px 12px; }
  .site-header__menu { color: var(--color-text-inverse); border-color: var(--color-text-secondary); background: var(--color-surface-inverse); }
  .primary-nav li { border-color: var(--color-text-secondary); }
  .home-hero__grid { gap: 48px; }
  .home-hero__window-content { min-height: 300px; }
  .home-standards__heading, .home-reviews__header { align-items: flex-start; flex-direction: column; }
  .home-standards__grid { grid-template-columns: 1fr; }
  .home-themes { width: calc(100% - 20px); padding: 54px 20px; }
  .home-section-heading { grid-template-columns: 1fr; gap: 20px; }
  .theme-grid--home, .theme-grid--home .theme-card:only-child, .theme-grid--catalogue .theme-card:only-child { grid-template-columns: 1fr; }
  .theme-grid--home .theme-card:only-child, .theme-grid--catalogue .theme-card:only-child { grid-column: auto; }
  .home-reviews__grid { grid-template-columns: 1fr; }
  .home-guides { border-radius: 28px; }
  .home-guides__layout { grid-template-columns: 1fr; }
  .home-guides__main, .home-guides__sidebar, .home-section-heading--guides, .article-grid--home, .article-grid--home .article-card { width: 100%; min-width: 0; }
  .home-section-heading--guides { align-items: flex-start; flex-direction: column; }
  .article-grid--home { grid-template-columns: 1fr; }
  .home-guides__sidebar { position: static; }
}

/* Final homepage refinement — intentionally last in the cascade. */
.site-header { color: var(--color-text-primary); border-color: var(--color-border-default); background: var(--color-surface); }
.site-header__logo { padding: 0; background: transparent; }
.site-header__tagline { color: var(--color-text-secondary); border-color: var(--color-border-default); font-size: 16px; }
.primary-nav a, .site-header__tools a { color: var(--color-text-primary); font-size: 15px; }
.site-header__tools { border-color: var(--color-border-default); }
.site-header__tools button { color: var(--color-text-primary); border-color: var(--color-border-default); }
.home-page { padding-bottom: 0; background: var(--color-surface); }
.home-page .dg-eyebrow, .site-header__toggle, .dg-btn, .dg-text-link { font-size: 15px; }
.home-hero { color: var(--color-text-primary); border-bottom: 1px solid var(--color-border-default); background: var(--color-surface); }
.home-hero .dg-eyebrow { color: var(--color-text-secondary); }
.home-hero__copy > p:not(.dg-eyebrow) { color: var(--color-text-secondary); font-size: 19px; }
.home-hero__copy h1 span { color: var(--color-text-primary); }
.home-hero__window-bar b, .home-hero__window-content p, .home-hero__window-note, .home-hero__window-content a { font-size: 15px; }
.home-hero__window-content > span { font-size: 17px; }
.home-standards { padding: var(--space-section-block) 0 0; border: 0; background: transparent; }
.home-standards > .dg-container { padding: 0; border-radius: 0; background: transparent; }
.home-standards__heading { display: block; margin-bottom: 28px; }
.home-standards__heading .dg-eyebrow { margin-bottom: 10px; }
.home-standards__grid { align-items: start; gap: 30px; }
.home-standards__grid li { height: 100%; align-items: flex-start; padding: 0; border-radius: 0; background: transparent; }
.home-standards__grid h3 { font-size: 17px; }
.home-standards__grid p { max-width: 30ch; font-size: 16px; line-height: 1.5; }
.round-icon { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border-radius: 50%; background: var(--color-surface-accent-3) !important; }
.round-icon svg { width: 21px; height: 21px; stroke-width: 1.6; }
.home-themes { padding: var(--space-section-block) 0; border-radius: 0; }
.home-section-heading > p { font-size: 18px; }
.theme-card { border: 1px solid var(--color-border-default); background: var(--color-surface-accent-1); }
.theme-card__body .dg-eyebrow, .article-card__meta a { padding: 6px 11px; border: 1px solid color-mix(in srgb, var(--color-text-primary) 20%, transparent); background: transparent; font-size: 15px; }
.theme-card__body > p:not(.dg-eyebrow) { font-size: 18px; }
.theme-card__footer strong { font-size: 20px; }
.theme-card__link { font-size: 15px; }
.home-reviews { margin-top: clamp(45px, 6vw, 75px); padding-top: 35px; }
.home-reviews__grid { gap: 18px; }
.home-reviews__grid li, .home-reviews__grid li:nth-child(2), .home-reviews__grid li:nth-child(3) { border: 1px solid var(--color-border-default); background: var(--color-surface); }
.home-reviews__grid figure { min-height: 0; padding: 26px; }
.review-stars { margin-bottom: 16px; font-size: 20px; }
.home-reviews blockquote { margin-bottom: 22px; }
.home-reviews blockquote p { font-size: 17px; }
.home-reviews figcaption { font-size: 16px; }
.home-guides { margin-top: 0; padding-block: clamp(70px, 8vw, 120px); border-top: 1px solid var(--color-border-default); border-radius: 0; background: var(--color-surface); }
.home-guides__layout { grid-template-columns: minmax(0, 1fr) 310px; gap: clamp(45px, 7vw, 100px); }
.article-grid--home { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--color-border-default); }
.article-grid--home .article-card { display: grid; grid-template-columns: 210px minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 26px; padding: 24px 0; border-bottom: 1px solid var(--color-border-default); border-radius: 0; background: transparent; }
.article-grid--home .article-card__media { grid-row: 1 / 4; margin: 0; border-radius: 16px; }
.article-grid--home .article-card__media img { height: 100%; min-height: 145px; border-radius: 16px; object-fit: cover; }
.article-grid--home .article-card__meta, .article-grid--home .article-card__title, .article-grid--home .article-card__excerpt { margin-right: 0; margin-left: 0; }
.article-grid--home .article-card__meta { margin-bottom: 10px; }
.article-grid--home .article-card__meta a { font-size: 15px; }
.article-grid--home .article-card__title { margin-bottom: 9px; font-size: 23px; }
.article-grid--home .article-card__excerpt { font-size: 16px; line-height: 1.5; }
.home-guides__sidebar { position: sticky; top: 25px; padding: 0 0 0 34px; border-left: 1px solid var(--color-border-default); border-radius: 0; background: transparent; }
.home-guides__sidebar > .round-icon { margin-bottom: 24px; }
.home-guides__sidebar h2 { font-size: 30px; }
.home-guides__sidebar nav { gap: 0; border-top: 1px solid var(--color-border-default); }
.home-guides__sidebar nav a, .home-guides__sidebar nav a:nth-child(2n), .home-guides__sidebar nav a:nth-child(3n) { padding: 14px 0; border-bottom: 1px solid var(--color-border-default); border-radius: 0; background: transparent; font-size: 16px; }
.home-guides__newsletter { margin-top: 32px; padding: 28px 0 0; border-top: 1px solid var(--color-border-default); border-radius: 0; background: transparent; }
.home-guides__newsletter h3 { font-size: 20px; }
.home-guides__newsletter p { font-size: 16px; }
.home-guides__newsletter .dg-newsletter-form__field { background: var(--color-surface); }
.dg-newsletter-form__input { font-size: 16px; }

@media (max-width: 760px) {
  .site-header__logo { padding: 0; }
  .site-header__menu { color: var(--color-text-primary); border-color: var(--color-border-default); background: var(--color-surface); }
  .primary-nav li { border-color: var(--color-border-default); }
  .home-standards > .dg-container { padding: 0; }
  .home-themes { width: min(calc(100% - 40px), var(--container)); padding: var(--space-section-block) 0; }
  .home-guides__sidebar { position: static; padding: 35px 0 0; border-top: 1px solid var(--color-border-default); border-left: 0; }
  .article-grid--home .article-card { grid-template-columns: 1fr; }
  .article-grid--home .article-card__media { grid-row: auto; margin-bottom: 18px; }
}

/* Final editorial guide module — intentionally after all legacy homepage rules. */
.home-guides { margin: 22px; padding-block: clamp(64px, 7vw, 106px); border: 0; border-radius: 34px; background: var(--color-surface-accent-1); }
.home-guides__layout { grid-template-columns: minmax(0, 1fr) 300px; column-gap: clamp(34px, 5vw, 72px); row-gap: 17px; }
.home-section-heading--guides { margin-bottom: 34px; }
.home-section-heading--guides h2 { margin: 0; font-size: clamp(2.5rem, 4vw, 4.4rem); }
.article-grid--home { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; border: 0; }
.article-grid--home .article-card { display: block; padding: var(--space-card); overflow: hidden; border: 0; border-radius: var(--radius-card); background: var(--color-surface); transition: transform .16s ease, box-shadow .16s ease; }
.article-grid--home .article-card:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--color-text-primary); }
.article-grid--home .article-card:first-child { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(310px, .9fr) minmax(0, 1.1fr); grid-template-rows: auto auto 1fr; column-gap: var(--space-card-large); padding: var(--space-card); }
.article-grid--home .article-card__media { display: block; grid-row: auto; margin: 0 0 20px; overflow: hidden; border-radius: 17px; }
.article-grid--home .article-card__media img { width: 100%; height: auto; min-height: 0; aspect-ratio: 16 / 10; border-radius: 17px; object-fit: cover; }
.article-grid--home .article-card:first-child .article-card__media { grid-row: 1 / 4; margin: 0; }
.article-grid--home .article-card:first-child .article-card__media img { height: 100%; min-height: 320px; aspect-ratio: auto; }
.article-grid--home .article-card__meta { margin: 2px 4px 11px; }
.article-grid--home .article-card__meta a { padding: 0; border: 0; color: var(--color-text-secondary); background: transparent; font-size: 15px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.article-grid--home .article-card__title { margin: 0; font-size: var(--font-size-card-title); line-height: 1.2; }
.article-grid--home .article-card:first-child .article-card__meta { margin-right: 0; margin-left: 0; }
.article-grid--home .article-card:first-child .article-card__title { margin: 0 0 14px; font-size: clamp(2rem, 3vw, 3rem); }
.article-grid--home .article-card__excerpt { display: none; }
.article-grid--home .article-card:first-child .article-card__excerpt { display: block; margin: 0; font-size: 17px; line-height: 1.55; }
.home-guides__sidebar { position: sticky; top: 25px; padding: 28px; border: 0; border-radius: 28px; background: var(--color-surface); }
.home-guides__sidebar h2 { margin-bottom: 22px; font-size: 30px; }
.home-guides__sidebar nav { display: grid; gap: 8px; border: 0; }
.home-guides__sidebar nav a, .home-guides__sidebar nav a:nth-child(2n), .home-guides__sidebar nav a:nth-child(3n) { padding: 11px 13px; border: 0; border-radius: 14px; background: var(--color-surface-muted); font-size: 16px; }
.home-guides__sidebar nav a:nth-child(3n + 1) { background: var(--color-surface-accent-1); }
.home-guides__sidebar nav a:nth-child(3n + 2) { background: var(--color-surface-accent-2); }
.home-guides__sidebar nav a:nth-child(3n) { background: var(--color-surface-accent-3); }
.home-guides__newsletter { margin-top: 24px; padding: 22px; border: 0; border-radius: 20px; background: var(--color-surface-muted); }

@media (max-width: 1100px) {
  .home-guides__layout { grid-template-columns: 1fr; }
  .home-guides__sidebar { position: static; }
  .home-guides__sidebar nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .home-guides { margin: 10px; border-radius: 28px; }
  .article-grid--home { grid-template-columns: 1fr; }
  .article-grid--home .article-card:first-child { display: block; grid-column: auto; padding: 12px 12px 24px; }
  .article-grid--home .article-card:first-child .article-card__media { margin-bottom: 20px; }
  .article-grid--home .article-card:first-child .article-card__media img { height: auto; min-height: 0; aspect-ratio: 16 / 10; }
  .article-grid--home .article-card__title, .article-grid--home .article-card:first-child .article-card__title { margin-right: 4px; margin-left: 4px; font-size: 22px; }
  .article-grid--home .article-card__meta, .article-grid--home .article-card:first-child .article-card__excerpt { margin-right: 4px; margin-left: 4px; }
  .home-guides__sidebar { padding: 24px; border: 0; }
  .home-guides__sidebar nav { grid-template-columns: 1fr; }
}

/* Final guide and subscription layout. Keep after every legacy homepage rule. */
.home-reviews { border-top: 0; }
.home-reviews__header { display: flex; justify-content: center; margin-bottom: var(--space-card-large); text-align: center; }
.home-reviews__header h2 { margin: 0; font-size: var(--font-size-h2); }
.home-reviews__grid { gap: var(--space-card); }
.home-reviews__grid li,
.home-reviews__grid li:nth-child(2),
.home-reviews__grid li:nth-child(3) { border: 0; background: var(--color-surface-accent-3); }
.home-reviews__grid figure { display: block; min-height: 0; padding: var(--space-card-large); }
.review-stars { margin-bottom: 18px; font-size: clamp(1.55rem, 2vw, 1.9rem); line-height: 1; letter-spacing: .1em; }
.home-reviews blockquote { margin: 0 0 16px; }
.home-reviews blockquote p { font-size: var(--font-size-body); }
.home-reviews figcaption { display: flex; flex-wrap: wrap; gap: 5px 8px; margin-top: 0; font-size: var(--font-size-small); font-weight: 600; }
.home-reviews figcaption strong { font-weight: 800; }
.home-reviews figcaption span { color: var(--color-text-secondary); }
.home-reviews figcaption span::before { margin-right: 8px; content: "·"; }
body { font-size: var(--font-size-body); }
.article-grid--home { gap: var(--space-card); }

/* Theme previews use real page compositions, not text-driven mockup cards. */
/* Plain background: the dot pattern sat behind the feature text and made the header look busy. */
.home-hero { background-color: var(--color-surface); }
.home-hero__visual { display: block; position: relative; max-width: none; padding: clamp(12px, 2vw, 22px) clamp(12px, 2vw, 22px) 0; background: transparent; }
.home-hero__preview { display: block; position: relative; width: 100%; border: 1px solid var(--color-text-primary); border-radius: calc(var(--radius-card) - 4px); background: var(--color-surface); }
.home-hero__preview--corollary { width: 64%; margin: -18% 0 0 -7%; position: relative; }

/* A compact assurance strip separates the hero from the theme catalogue. */
.home-hero__copy { container-type: inline-size; }
.home-hero__copy .home-hero__title { max-width: none; font-size: clamp(1.5rem, 10cqi, 4.5rem); line-height: 1.08; }
.home-hero__title-line { display: block; width: max-content; max-width: 100%; font-weight: inherit; letter-spacing: inherit; white-space: nowrap; }
.home-hero__copy h1 span { font-weight: inherit; letter-spacing: inherit; }
.text-highlight { padding-inline: .05em; border-radius: .12em; box-decoration-break: clone; -webkit-box-decoration-break: clone; background-repeat: no-repeat; background-size: 100% 100%; }
.text-highlight--blue { background-image: linear-gradient(180deg, transparent 55%, var(--color-surface-accent-1) 55%, var(--color-surface-accent-1) 92%, transparent 92%); }
.text-highlight--pink { background-image: linear-gradient(180deg, transparent 55%, var(--color-surface-accent-2) 55%, var(--color-surface-accent-2) 92%, transparent 92%); }
.text-highlight--yellow { background-image: linear-gradient(180deg, transparent 55%, var(--color-surface-accent-3) 55%, var(--color-surface-accent-3) 92%, transparent 92%); }
.footer-social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px !important; }
.footer-social li { margin: 0; }
.footer-social a { display: grid; width: auto; min-width: 42px; height: 42px; padding: 0 12px; place-items: center; border: 1px solid var(--color-border-inverse); border-radius: 999px; color: var(--color-text-inverse); text-decoration: none; transition: color .16s ease, border-color .16s ease, background-color .16s ease; }
.footer-social a:hover { color: var(--color-text-primary); border-color: var(--color-surface-accent-3); background: var(--color-surface-accent-3); }
.footer-social__icon { display: none; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.footer-social__fill { fill: currentColor; stroke: none; }
.footer-social__icon--x,
.footer-social__icon--youtube,
.footer-social__icon--bluesky { fill: currentColor; stroke: none; }
.footer-social__cutout { fill: var(--color-surface-inverse); stroke: none; }
.footer-social a:hover .footer-social__cutout { fill: var(--color-surface-accent-3); }
.footer-social__fallback { padding: 0 8px; font-size: 13px; }
.footer-social a[href*="facebook.com"] .footer-social__icon--facebook,
.footer-social a[href*="instagram.com"] .footer-social__icon--instagram,
.footer-social a[href*="twitter.com"] .footer-social__icon--x,
.footer-social a[href*="x.com"] .footer-social__icon--x,
.footer-social a[href*="linkedin.com"] .footer-social__icon--linkedin,
.footer-social a[href*="youtube.com"] .footer-social__icon--youtube,
.footer-social a[href*="youtu.be"] .footer-social__icon--youtube,
.footer-social a[href*="github.com"] .footer-social__icon--github,
.footer-social a[href*="bsky.app"] .footer-social__icon--bluesky { display: block; }
.footer-social a[href*="facebook.com"],
.footer-social a[href*="instagram.com"],
.footer-social a[href*="twitter.com"],
.footer-social a[href*="x.com"],
.footer-social a[href*="linkedin.com"],
.footer-social a[href*="youtube.com"],
.footer-social a[href*="youtu.be"],
.footer-social a[href*="github.com"],
.footer-social a[href*="bsky.app"] { width: 42px; padding: 0; border-radius: 50%; }
.footer-social a[href*="facebook.com"] .footer-social__fallback,
.footer-social a[href*="instagram.com"] .footer-social__fallback,
.footer-social a[href*="twitter.com"] .footer-social__fallback,
.footer-social a[href*="x.com"] .footer-social__fallback,
.footer-social a[href*="linkedin.com"] .footer-social__fallback,
.footer-social a[href*="youtube.com"] .footer-social__fallback,
.footer-social a[href*="youtu.be"] .footer-social__fallback,
.footer-social a[href*="github.com"] .footer-social__fallback,
.footer-social a[href*="bsky.app"] .footer-social__fallback { display: none; }
.site-footer__links { padding-top: 0; }

@media (max-width: 760px) {
  .home-hero { background-position: right center; background-size: 100% auto; }
  .home-hero__preview--corollary { width: 78%; margin-top: -14%; margin-left: -3%; }
  .home-standards > .dg-container { padding: 0; }
}

/* Header uses one yellow divider system and keeps search visually compact. */
.site-header { border-color: var(--color-surface-accent-3); }
.site-header__tagline { border-color: var(--color-surface-accent-3); }
.site-header__tools { padding-left: 0; border-left: 0; }
.primary-nav a { padding: 8px 12px; border-radius: 999px; transition: color .16s ease, background-color .16s ease; }
.primary-nav a:hover,
.primary-nav .is-current a { border-bottom: 0; color: var(--color-text-primary); background: var(--color-surface-accent-3); }
.primary-nav .is-current a { padding-bottom: 8px; }
/* Search is a plain icon like the menu text; it gets the same yellow as the nav links only on hover. */
.site-header__tools button { width: 38px; height: 38px; padding: 8px; border: 0; color: var(--color-text-primary); background: transparent; transition: background-color .16s ease; }
.site-header__tools button:hover { color: var(--color-text-primary); background: var(--color-surface-accent-3); }
.site-header__tools button svg { width: 22px; height: 22px; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* One arrow component and one horizontal motion pattern everywhere. */
.motion-arrow { --motion-arrow-size: 1.25em; position: relative; display: inline-block; width: var(--motion-arrow-size); height: var(--motion-arrow-size); flex: 0 0 var(--motion-arrow-size); overflow: hidden; vertical-align: middle; }
.motion-arrow__icon { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.motion-arrow__icon--current { transform: translateX(0); }
.motion-arrow__icon--next { transform: translateX(-130%); }
a:hover .motion-arrow__icon--current { transform: translateX(130%); }
a:hover .motion-arrow__icon--next { transform: translateX(0); }
.article-card:hover .motion-arrow__icon--current { transform: translateX(130%); }
.article-card:hover .motion-arrow__icon--next { transform: translateX(0); }
.article-card__action .motion-arrow { --motion-arrow-size: 28px; }

.home-guides__sidebar nav a,
.home-guides__sidebar nav a:nth-child(2n),
.home-guides__sidebar nav a:nth-child(3n),
.home-guides__sidebar nav a:nth-child(3n + 1),
.home-guides__sidebar nav a:nth-child(3n + 2) { transition: color .16s ease, background-color .16s ease; }
.home-guides__sidebar nav a:hover,
.home-guides__sidebar nav a:nth-child(2n):hover,
.home-guides__sidebar nav a:nth-child(3n):hover,
.home-guides__sidebar nav a:nth-child(3n + 1):hover,
.home-guides__sidebar nav a:nth-child(3n + 2):hover { color: var(--color-text-primary); border-color: var(--color-border-strong); background: transparent; }
.article-grid--home .article-card,
.article-grid--home .article-card:hover { transform: none; box-shadow: inset 0 0 0 2px transparent; transition: none; }
.article-grid--home .article-card:hover { box-shadow: inset 0 0 0 2px var(--color-text-primary); }
.article-grid--home .article-card__media img,
.article-grid--home .article-card:hover .article-card__media img { transform: none; transition: none; }
.article-grid--home .article-card:not(:first-child) { display: flex; flex-direction: column; }
.article-grid--home .article-card:first-child { display: flex; grid-column: auto; flex-direction: column; padding: var(--space-card); overflow: hidden; border-radius: var(--radius-card); background: var(--color-surface); }
.article-grid--home .article-card:first-child .article-card__media { width: 100%; grid-row: auto; align-self: auto; margin: 0 0 20px; }
.article-grid--home .article-card:first-child .article-card__media img { height: auto; min-height: 0; aspect-ratio: 16 / 10; }
.article-card__action { display: flex; width: max-content; justify-content: flex-end; margin: 20px 0 0 auto; color: var(--color-text-primary); text-decoration: none; }
.article-card__action svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.article-grid--home .article-card:first-child .article-card__meta { margin: 2px 4px 11px; }
.article-grid--home .article-card:first-child .article-card__title { margin: 0; font-size: var(--font-size-card-title); }
.article-grid--home .article-card:first-child .article-card__excerpt { display: none; }
.article-grid--home .article-card:first-child .article-card__action { display: flex; margin-top: auto; padding-top: 24px; }
.article-grid--home .article-card:not(:first-child) .article-card__action { margin-top: auto; padding-top: 24px; }
.site-subscribe p:not(.dg-eyebrow) { font-size: var(--font-size-body); }
.dg-newsletter-form__field { border-width: 3px; }
.dg-newsletter-form__submit { border-width: 3px; }
.dg-newsletter-form__submit svg { stroke-width: 3; }
.home-guides { margin: 0; border-radius: 0; }
.home-guides__layout { grid-template-columns: minmax(0, 1fr) 360px; }
.home-section-heading--guides { align-items: end; gap: 32px; }
.home-section-heading--guides > div { max-width: 760px; }
.home-section-heading--guides h2 { max-width: 800px; font-size: var(--font-size-h2); line-height: 1.04; }
.home-section-heading--guides p { max-width: 680px; margin: 14px 0 0; color: var(--color-text-secondary); font-size: 17px; line-height: 1.55; }
.home-section-heading--guides .dg-text-link { display: inline-flex; flex: none; align-items: center; gap: 8px; margin-bottom: 7px; padding-bottom: 5px; border-bottom: 2px solid currentColor; white-space: nowrap; }
.home-section-heading--guides .dg-text-link span { margin-left: 0; }
.home-guides__sidebar { padding: 4px 0 0; border: 0; border-radius: 0; background: transparent; }
.home-guides__sidebar h2 { margin-bottom: 18px; font-size: 27px; }
.home-guides__sidebar nav { justify-items: start; gap: 18px; }
.home-guides__sidebar nav a,
.home-guides__sidebar nav a:nth-child(2n),
.home-guides__sidebar nav a:nth-child(3n),
.home-guides__sidebar nav a:nth-child(3n + 1),
.home-guides__sidebar nav a:nth-child(3n + 2) { width: max-content; padding: 0 0 5px; border: 0; border-bottom: 2px solid currentColor; border-radius: 0; background: transparent; }
.site-subscribe { padding-block: var(--space-section-block); background: var(--color-surface-accent-3); }
.site-subscribe__inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(420px, .9fr); align-items: center; gap: clamp(50px, 8vw, 130px); }
.site-subscribe h2 { max-width: 720px; margin: 0 0 16px; font-size: var(--font-size-h2); line-height: 1.04; }
.site-subscribe p:not(.dg-eyebrow) { max-width: 650px; margin: 0; color: var(--color-text-secondary); font-size: var(--font-size-body); line-height: 1.55; }
.site-subscribe__action { width: 100%; max-width: 560px; justify-self: end; }
.site-subscribe .dg-newsletter-form__field { background: var(--color-surface); }
.site-subscribe__action > p a { color: var(--color-text-primary); font-weight: 800; }

@media (max-width: 1100px) {
  .home-guides__layout { grid-template-columns: 1fr; }
  .home-guides__sidebar { position: static; margin-top: var(--space-section-block); }
  .home-guides__sidebar nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-subscribe__inner { grid-template-columns: 1fr; }
  .site-subscribe__action { max-width: 620px; justify-self: start; }
}

@media (max-width: 760px) {
  .home-reviews__header { justify-content: flex-start; text-align: left; }
  .home-guides { margin: 0; border-radius: 0; }
  .home-section-heading--guides { align-items: flex-start; }
  .home-section-heading--guides .dg-text-link { margin-bottom: 0; }
  .article-grid--home .article-card:first-child { padding: var(--space-card); }
  .home-guides__sidebar { padding: 8px 0 0; }
  .home-guides__sidebar nav { grid-template-columns: 1fr; }
  .site-subscribe__inner { gap: 30px; }
  .site-subscribe__action { min-width: 0; }
  .site-header__tools button { width: 100%; height: auto; padding: 15px 0; border-radius: 0; background: transparent; }
  .site-header__tools button svg { width: 38px; height: 38px; padding: 8px; border-radius: 50%; background: transparent; }
  .site-header__tools button:hover { color: var(--color-text-primary); background: transparent; }
  .site-header__tools button:hover svg { color: var(--color-text-primary); background: var(--color-surface-accent-3); }
  .primary-nav a,
  .primary-nav .is-current a { padding: 15px 12px; border-radius: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .motion-arrow__icon,
  .home-guides__sidebar nav a { transition: none; }
}

/* Blog archive and reading experience */
.archive-page { padding-bottom: 0; }
.archive-header { width: 100%; max-width: none; margin: 0; padding: 0; }
.archive-header__inner { padding-block: var(--space-section-block); padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2)); border-radius: 0; background: var(--color-surface-accent-3); }
.archive-header h1 { max-width: 980px; margin-bottom: 24px; font-size: var(--font-size-h1); line-height: 1.02; }
.archive-header__inner > p:not(.dg-eyebrow) { max-width: 760px; margin: 0; font-family: var(--font-sans); font-size: var(--font-size-body); line-height: 1.55; }
.archive-header__inner--author { display: flex; align-items: center; gap: var(--space-card-large); }
.archive-header__inner--author img { width: 110px; height: 110px; flex: 0 0 110px; border-radius: 50%; object-fit: cover; }
.archive-topics { display: flex; flex-wrap: wrap; gap: 10px; max-width: 1000px; margin-top: clamp(28px, 4vw, 44px); }
.archive-topics a { display: inline-flex; min-height: 44px; align-items: center; padding: 9px 18px; border: 2px solid var(--color-text-primary); border-radius: 999px; color: var(--color-text-primary); background: transparent; font-size: 15px; font-weight: 750; text-decoration: none; }
.archive-topics a:hover { color: var(--color-button-primary-text); background: var(--color-button-primary-background); }
.archive-feed { padding-block: clamp(34px, 4vw, 58px) clamp(40px, 5vw, 64px); }
.article-grid--archive { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-card-large); row-gap: clamp(44px, 5vw, 72px); }
.article-grid--archive .article-card { display: grid; min-width: 0; grid-template-columns: minmax(170px, .82fr) minmax(0, 1.18fr); grid-template-rows: auto auto 1fr; align-items: start; gap: 0 var(--space-card); padding: 0; overflow: visible; border-radius: 0; background: transparent; box-shadow: none; }
.article-grid--archive .article-card:hover { box-shadow: none; }
.article-grid--archive .article-card__media { grid-row: 1 / 4; margin: 0; border-radius: calc(var(--radius-card) - 7px); }
.article-grid--archive .article-card__media img { aspect-ratio: 16 / 9; border-radius: calc(var(--radius-card) - 7px); object-fit: cover; transform: none; transition: none; }
.article-grid--archive .article-card__meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 9px; color: var(--color-text-secondary); font-size: 15px; letter-spacing: .04em; }
.article-grid--archive .article-card__meta a { padding: 0; border: 0; color: inherit; background: transparent; font-size: inherit; }
.article-grid--archive .article-card__title { margin: 0 0 10px; font-size: var(--font-size-card-title); line-height: 1.18; }
.article-grid--archive .article-card__excerpt { margin: 0; font-size: var(--font-size-body); line-height: 1.55; }
.article-grid--archive-featured .article-card:first-child { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; }
.article-grid--archive-featured .article-card:first-child .article-card__title { font-size: clamp(1.8rem, 2.7vw, 2.6rem); }
.article-grid--archive-featured .article-card:first-child .article-card__excerpt { font-size: var(--font-size-body); }

.article-grid--related { gap: var(--space-card); }
.article-grid--related .article-card { display: flex; min-width: 0; flex-direction: column; padding: var(--space-card); overflow: hidden; border-radius: var(--radius-card); background: var(--color-surface); box-shadow: inset 0 0 0 2px transparent; }
.article-grid--related .article-card:hover { box-shadow: inset 0 0 0 2px var(--color-text-primary); }
.article-grid--related .article-card__media { margin-bottom: 20px; border-radius: calc(var(--radius-card) - 7px); }
.article-grid--related .article-card__media img { aspect-ratio: 16 / 9; border-radius: calc(var(--radius-card) - 7px); transform: none; transition: none; }
.article-grid--related .article-card__meta a { padding: 0; border: 0; color: var(--color-text-secondary); background: transparent; font-size: 15px; }

.post-page { overflow: hidden; }
.post-header { padding-block: var(--space-section-block); }
.post-header h1 { font-size: var(--font-size-h1); }
.post-header__standfirst { font-family: var(--font-sans); font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.55; }
.post-meta { font-size: var(--font-size-small); }
.post-feature { margin-bottom: clamp(44px, 6vw, 72px); }
.post-feature img { border-radius: var(--radius-card); }
.post-feature figcaption { font-size: var(--font-size-small); }
.gh-content { font-family: var(--font-sans); font-size: var(--font-size-body); line-height: 1.72; }
.gh-content > * { margin-bottom: 1.25em; }
.gh-content h2,
.gh-content h3 { margin-top: clamp(28px, 3.5vw, 42px); margin-bottom: .55em; }
.gh-content > h2:first-child,
.gh-content > h3:first-child { margin-top: 0; }
.gh-content figure,
.gh-content .kg-card,
.gh-content pre,
.gh-content .kg-callout-card,
.gh-content .kg-signup-card { border-radius: var(--radius); }
.gh-content figure img,
.gh-content .kg-image { border-radius: var(--radius); }
.post-footer { padding-block: clamp(48px, 6vw, 76px) var(--section); }
.post-footer__tools { margin-bottom: clamp(42px, 6vw, 64px); padding-top: 24px; border-top: 2px solid var(--color-text-primary); }
.post-share { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.post-share__label { color: var(--color-text-primary); font-size: var(--font-size-body); font-weight: 800; }
.post-share__links { display: flex; flex-wrap: wrap; gap: 10px; }
.post-share a { display: grid; width: 46px; height: 46px; place-items: center; border: 2px solid var(--color-text-primary); border-radius: 50%; color: var(--color-text-primary); background: transparent; text-decoration: none; }
.post-share a:hover { color: var(--color-button-primary-text); background: var(--color-button-primary-background); }
.post-share svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.post-share .share-icon__fill { fill: currentColor; stroke: none; }
.author-card { display: block; padding: clamp(28px, 4vw, 48px) 0 0; border-top: 1px solid var(--color-border-default); background: transparent; }
.author-card--with-image { display: grid; align-items: center; }
.author-card__label { display: block; margin-bottom: 7px; color: var(--color-text-secondary); font-size: 15px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.author-card h2 { margin: 0 0 8px; font-size: var(--font-size-h3); }
.author-card p { max-width: 620px; margin: 0; color: var(--color-text-secondary); font-size: var(--font-size-body); line-height: 1.55; }
.comments-section { padding-block: 0 var(--section); }
.related-section { margin: 0; padding: 0; background: var(--color-surface-accent-1); }
.related-section__inner { padding-block: var(--section); }
.related-section .dg-section__header { margin-bottom: clamp(28px, 4vw, 48px); }
.related-section .dg-section__header h2 { margin: 0; }
.related-section .dg-text-link { display: inline-flex; align-items: center; gap: 8px; padding-bottom: 5px; border-bottom: 2px solid currentColor; text-decoration: none; }

/* Related guides reuse the homepage card system exactly. */
.article-grid--related .article-card,
.article-grid--related .article-card:nth-child(3n + 2),
.article-grid--related .article-card:nth-child(3n) { padding: var(--space-card); background: var(--color-surface); }
.article-grid--related .article-card__meta { margin: 2px 4px 11px; }
.article-grid--related .article-card__title { margin: 0; font-size: var(--font-size-card-title); line-height: 1.2; }
.article-grid--related .article-card__excerpt { display: none; }
.article-grid--related .article-card__action { margin: auto 0 0 auto; padding: 24px 0 0; }

@media (max-width: 1100px) {
  .article-grid--archive { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .archive-header__inner { padding-block: var(--space-section-block); padding-inline: var(--gutter); }
  .archive-header h1 { font-size: var(--font-size-h1); }
  .archive-topics { gap: 8px; margin-top: 28px; }
  .archive-topics a { min-height: 42px; padding: 8px 14px; }
  .archive-header__inner--author { align-items: flex-start; }
  .archive-header__inner--author img { width: 72px; height: 72px; flex-basis: 72px; }
  .pagination { gap: 10px; }
  .pagination__direction { min-height: 44px; padding: 8px 13px; }
  .article-grid--archive,
  .article-grid--related { grid-template-columns: 1fr; }
  .article-grid--archive .article-card,
  .article-grid--archive-featured .article-card:first-child { grid-template-columns: 1fr; padding: 0; }
  .article-grid--archive .article-card__media { grid-row: auto; margin-bottom: 18px; }
  .article-grid--archive-featured .article-card:first-child .article-card__title { font-size: var(--font-size-card-title); }
  .post-share { align-items: flex-start; flex-direction: column; }
  .author-card { padding: 24px 0 0; }
  .author-card--with-image { grid-template-columns: 58px 1fr; }
  .author-card img { width: 58px; height: 58px; }
  .related-section .dg-section__header { align-items: flex-start; }
}

/* Small policy links under the product purchase actions. */
.product-hero__links { margin-top: 18px; color: var(--color-text-secondary); font-size: .9rem; }
.product-hero__links a { color: inherit; }

/* Stretch product page (partials/product-stretch.hbs). */
/* The Stretch hero image has its own background and frames, so drop the grey box and 16:10 crop. */
.product-page--stretch .product-hero__media { padding: 0; background: none; }
.product-page--stretch .product-hero__media img { display: block; width: 100%; height: auto; aspect-ratio: auto; border-radius: 24px; }
.product-facts dl { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; margin: 0 0 clamp(50px, 6vw, 90px); overflow: hidden; border: 1px solid var(--color-border-default); border-radius: 20px; background: var(--color-border-default); }
.product-facts dl > div { padding: 18px 20px; background: var(--color-surface); }
.product-facts dt { margin-bottom: 4px; color: var(--color-text-secondary); font-size: .8rem; }
.product-facts dd { margin: 0; font-weight: 700; }
.product-fit { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 60px); margin-bottom: clamp(60px, 8vw, 120px); }
.product-fit > div { padding: clamp(24px, 3vw, 36px); border-radius: 24px; background: var(--color-surface-accent-1); }
.product-fit > div + div { background: var(--color-surface-muted); }
.product-fit h2 { margin-bottom: 16px; font-size: var(--font-size-h3, 1.6rem); }
.product-fit ul { margin: 0; padding-left: 1.2em; }
.product-fit li { margin-bottom: 8px; }
/* Highlights: heading and text on one row, then a large screenshot across the full width. */
.product-highlight { margin-bottom: clamp(70px, 9vw, 130px); }
.product-highlight__text { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(20px, 4vw, 60px); align-items: start; margin-bottom: clamp(24px, 3vw, 40px); }
.product-highlight__text h2 { margin: 0; font-size: var(--font-size-h2); }
.product-highlight__text p { margin: 0 0 12px; font-size: 1.05rem; }
.product-highlight figure { margin: 0; }
.product-highlight picture { display: block; }
/* Tall images (the settings panel) stay a readable size instead of filling the full width. */
.product-highlight--narrow figure { max-width: 860px; margin-inline: auto; }
.product-highlight--narrow img { border: 0; box-shadow: none; }
.product-highlight img { display: block; width: 100%; height: auto; border: 1px solid var(--color-border-default); border-radius: 20px; }
.product-highlight figcaption { margin-top: 10px; color: var(--color-text-secondary); font-size: .85rem; font-weight: 600; }
.scheme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 24px); }
/* Grouped feature list: four short columns. */
.product-features__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.product-features h3 { margin-bottom: 12px; font-size: 1.1rem; }
.product-features ul { margin: 0; padding-left: 1.1em; }
.product-features li { margin-bottom: 8px; }
.product-note { margin-top: 30px; }
.product-buy__list { margin: 0 0 16px; padding-left: 1.2em; }
/* With a note, stack it under the heading. */
.home-reviews__header:has(.home-reviews__note) { flex-direction: column; align-items: center; gap: 0; }
.home-reviews__note { margin: 8px auto 0; max-width: 560px; color: var(--color-text-secondary); text-align: center; }

@media (max-width: 1100px) {
  .product-facts dl { grid-template-columns: repeat(3, 1fr); }
  .product-features__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .product-fit, .product-highlight__text { grid-template-columns: 1fr; }
  .product-features__grid { grid-template-columns: 1fr 1fr; }
  .product-facts dl { grid-template-columns: repeat(2, 1fr); }
  .home-reviews__header:has(.home-reviews__note) { align-items: flex-start; }
  .home-reviews__note { margin-left: 0; text-align: left; }
}
@media (max-width: 480px) {
  .product-features__grid { grid-template-columns: 1fr; }
}
/* The Stretch hero image carries its own background and frames, so no outline around it. */
.home-hero__preview--stretch { border: 0; background: none; }

/* Stretch product hero: one short line, price in the button, quiet details list. */
.product-page--stretch .product-hero { grid-template-columns: .95fr 1.05fr; gap: clamp(40px, 6vw, 90px); }
.product-hero__copy > p.product-label, .product-label { display: inline-flex; font-family: var(--font-sans); line-height: 1.4; margin: 0 0 16px; padding: 5px 12px; border-radius: 999px; color: var(--color-text-primary); background: var(--color-surface-accent-1); font-size: .74rem; font-weight: 700; letter-spacing: .02em; }
.product-page--stretch .product-hero h1 { margin: 0 0 14px; }
.product-page--stretch .product-hero__copy > p.product-hero__lead { max-width: 30ch; margin: 0 0 32px; color: var(--color-text-secondary); font-family: var(--font-sans); font-size: 1.2rem; line-height: 1.5; }
.product-page--stretch .product-hero__actions .dg-btn svg { flex: none; }
.product-page--stretch .product-hero__copy > p.product-hero__note { margin: 14px 0 0; color: var(--color-text-secondary); font-family: var(--font-sans); font-size: .9rem; }
.product-hero__note a { color: inherit; }
.product-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; margin: 28px 0 0; padding: 24px 0 0; border-top: 1px solid var(--color-border-default); list-style: none; }
.product-meta li { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--color-text-secondary); font-size: .92rem; }
.product-meta svg { flex: none; color: var(--color-text-primary); }
.product-meta strong, .product-meta a { color: var(--color-text-primary); font-weight: 700; }
/* Resource cards under the hero. */
.product-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: clamp(60px, 8vw, 110px); }
.product-links a { display: flex; align-items: flex-start; gap: 16px; padding: 22px; border: 1px solid var(--color-border-default); border-radius: 18px; color: var(--color-text-secondary); font-size: .9rem; text-decoration: none; transition: border-color .2s ease; }
.product-links a:hover { border-color: var(--color-text-primary); }
.product-links strong { display: block; margin-bottom: 4px; color: var(--color-text-primary); font-size: 1rem; }
.product-links__icon { display: grid; flex: none; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--color-text-primary); background: var(--color-surface-accent-1); }
@media (max-width: 760px) {
  .product-links { grid-template-columns: 1fr; }
}
@media (max-width: 400px) {
  .product-meta { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) {
  /* Stack on tablets: the screenshot is too small beside the copy. */
  .product-page--stretch .product-hero { grid-template-columns: 1fr; }
  .product-meta { max-width: 560px; }
}

/* Home: Stretch section heading, subheading under the title. */
.home-themes__heading { max-width: 760px; margin-bottom: clamp(32px, 4vw, 52px); }
.home-themes__heading h2 { margin: 0 0 14px; font-size: var(--font-size-h2); }
.home-themes__heading p { margin: 0; font-size: 1.1rem; line-height: 1.55; }

/* Theme card: white card, colour only behind the screenshot. */
.tcard { display: grid; grid-template-columns: 1.25fr .75fr; overflow: hidden; border: 1px solid var(--color-border-default); border-radius: 28px; background: var(--color-surface); }
.theme-grid .tcard { grid-column: 1 / -1; }
.tcard__media { display: flex; align-items: center; padding: clamp(16px, 2.5vw, 32px); background: var(--color-surface-accent-1); }
.tcard__media img { display: block; width: 100%; height: auto; border-radius: 16px; transition: transform .4s ease; }
.tcard:hover .tcard__media img { transform: translateY(-4px); }
.tcard__body { display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 4vw, 56px); }
.tcard__title { margin: 0 0 12px; font-size: var(--font-size-h3); }
.tcard__title a { text-decoration: none; }
.tcard__text { margin: 0 0 28px; font-size: 1.05rem; line-height: 1.55; }
/* Price: big number, the terms stacked beside it. */
.tcard__price { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; padding-top: 24px; border-top: 1px solid var(--color-border-default); }
.tcard__amount { color: var(--color-text-primary); font-size: clamp(2.4rem, 4vw, 3.2rem); font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.tcard__terms { padding-left: 14px; border-left: 1px solid var(--color-border-default); color: var(--color-text-secondary); font-size: .88rem; line-height: 1.45; }
.tcard__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.tcard__demo { color: var(--color-text-primary); font-size: .95rem; font-weight: 700; text-underline-offset: 4px; }
@media (max-width: 900px) {
  .tcard { grid-template-columns: 1fr; }
}

.tcard .dg-btn { white-space: nowrap; }
@media (max-width: 480px) {
  .tcard .dg-btn { gap: 10px; padding-inline: 20px; }
}

/* Theme card slideshow: five layout screenshots fade in turn, each with a caption. CSS only. */
.tcard__slides { position: relative; width: 100%; aspect-ratio: 16 / 10; }
.tcard__slide { position: absolute; inset: 0; margin: 0; opacity: 0; animation: tcard-fade 20s infinite both; }
.tcard__slide:nth-child(1) { animation-delay: -.6s; }
.tcard__slide:nth-child(2) { animation-delay: 3.4s; }
.tcard__slide:nth-child(3) { animation-delay: 7.4s; }
.tcard__slide:nth-child(4) { animation-delay: 11.4s; }
.tcard__slide:nth-child(5) { animation-delay: 15.4s; }
.tcard__slide img { width: 100%; height: 100%; object-fit: cover; object-position: top center; border-radius: 16px; }
.tcard__slide figcaption { position: absolute; left: 14px; bottom: 14px; padding: 6px 12px; border-radius: 999px; color: #fff; background: rgba(23, 25, 58, .82); font-size: .78rem; font-weight: 700; }
.tcard:hover .tcard__slide { animation-play-state: paused; }
@keyframes tcard-fade { 0% { opacity: 0; } 3% { opacity: 1; } 20% { opacity: 1; } 23% { opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .tcard__slide { animation: none; }
  .tcard__slide:first-child { opacity: 1; }
}
.tcard:hover .tcard__media img { transform: none; }
.tcard__kicker { margin: 0 0 10px; color: var(--color-text-secondary); font-size: .85rem; font-weight: 700; }
.tcard__title { font-size: var(--font-size-h2); }
.tcard__note { margin: -16px 0 28px; color: var(--color-text-secondary); font-size: .9rem; }
.home-themes { padding-top: clamp(50px, 6vw, 90px); }
@media (max-width: 600px) {
  /* Too small to caption without covering the screenshot's headline. */
  .tcard__slide figcaption { display: none; }
}

/* Theme card: the screenshot fills the whole left half, edge to edge. */
/* Panel copies Stretch's own look: the site sits as a rounded card inside a thin,
   even frame of the same grey (#efefef) on every side. */
.tcard__media { align-items: center; overflow: hidden; padding: 14px; background: #efefef; }
/* Keep the screenshots' own shape at every width, so they are never cropped. */
.tcard__slides { width: 100%; height: auto; min-height: 0; aspect-ratio: 1410 / 1042; }
.tcard__slide { inset: 0; overflow: hidden; border-radius: 24px; }
/* Slide images are trimmed of the outer frame only, so the even gap comes from the padding above. */
.tcard__slide img { width: 100%; height: 100%; border-radius: 24px; box-shadow: none; object-fit: cover; object-position: center top; }
.tcard__slide figcaption { display: none; }
.tcard__body { border-left: 1px solid var(--color-border-default); }
@media (max-width: 900px) {
  .tcard__body { border-left: 0; border-top: 1px solid var(--color-border-default); }
}
@media (max-width: 1360px) {
  /* Side by side, the panel gets too tall and narrow for the screenshot below this width. */
  .tcard { grid-template-columns: 1fr; }
  .tcard__body { border-left: 0; border-top: 1px solid var(--color-border-default); }
}

/* Home hero visual: options on the left (colours, fonts, layouts) feeding a real
   Stretch post on desktop and phone. Cards are HTML so text stays sharp. */
.hv { position: relative; aspect-ratio: 700 / 560; padding: 0; background: none; border-radius: 0; }
/* The site's own dot pattern sits behind the browser (flat, no colour block). */
.hv__bg { position: absolute; top: -6%; right: -4%; width: 62%; aspect-ratio: 1; background: url("../images/discoverghost-background.svg") center / contain no-repeat; }
.hv__browser { position: absolute; top: 12%; left: 17%; width: 72%; overflow: hidden; border: 1px solid var(--color-border-default); border-radius: 16px; background: #fff; }
.hv__bar { display: flex; gap: 6px; padding: 10px 12px; border-bottom: 1px solid #ececf1; background: #fafafb; }
.hv__bar i { width: 9px; height: 9px; border-radius: 50%; background: #ff6159; }
.hv__bar i:nth-child(2) { background: #ffbd2e; } .hv__bar i:nth-child(3) { background: #28c941; }
.hv__browser img { display: block; width: 100%; height: auto; }
.hv__phone { position: absolute; right: 0; bottom: 2%; width: 21%; padding: 5px; border-radius: 24px; background: var(--color-navy-900); }
.hv__phone img { display: block; width: 100%; height: auto; border-radius: 19px; }
/* Option cards, with a dashed line running into the browser. */
.hv__card { position: absolute; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border: 1px solid #e6e7ef; border-radius: 16px; background: #fff; }
.hv__card::after { content: ""; position: absolute; top: 50%; left: 100%; width: var(--line, 30px); border-top: 1.5px dashed #c9cbe0; }
.hv__label { color: var(--color-text-primary); font-size: .78rem; font-weight: 700; }
.hv__card--colours { top: 16%; left: 0; --line: 2.5vw; }
.hv__dots { display: grid; grid-template-columns: repeat(2, 26px); gap: 8px; }
/* Each dot shows a scheme's background and accent, split diagonally. */
.hv__dots i { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--a) 50%, var(--b) 50%); box-shadow: inset 0 0 0 1px rgba(23, 25, 58, .12); }
.hv__card--fonts { top: -2%; right: 0; flex-direction: row; align-items: center; gap: 14px; }
/* Fonts sits on the right, so its line runs left into the browser. */
.hv__card--fonts::after { left: auto; right: 100%; width: 0; }
.hv__aa { font-family: Georgia, "Times New Roman", serif; font-size: 1.9rem; line-height: 1; color: var(--color-text-primary); }
.hv__lines { display: grid; gap: 6px; } .hv__lines b { height: 6px; border-radius: 3px; background: #ececf2; } .hv__lines b + b { width: 70%; }
.hv__card--layouts { bottom: 4%; left: 6%; z-index: 2; }
.hv__card--layouts::after { display: none; }
.hv__thumbs { display: flex; gap: 8px; }
.hv__thumb { position: relative; display: grid; gap: 4px; width: 58px; height: 46px; padding: 6px; border: 1px solid #e6e7ef; border-radius: 8px; }
.hv__thumb.is-active { border-color: #7b8cff; box-shadow: 0 0 0 2px #e8ecff; }
.hv__thumb b { display: block; border-radius: 3px; background: #dfe2f0; }
.hv__thumb .t { height: 5px; width: 60%; background: #b9bdd6; }
.hv__thumb--default { grid-template-rows: 5px 1fr; }
.hv__thumb--cover .i { position: absolute; inset: 6px; } .hv__thumb--cover .t { position: absolute; left: 10px; bottom: 10px; width: 50%; background: #fff; }
.hv__thumb--split { grid-template-columns: 1fr 1fr; align-items: center; } .hv__thumb--split .t { width: 90%; } .hv__thumb--split .i { height: 100%; }
@media (max-width: 1100px) {
  .hv { max-width: 760px; }
}
@media (max-width: 600px) {
  /* Phones: the text and button fill the first screen and the screenshot is too small to read,
     so the visual is hidden. The Stretch card just below shows the theme instead. */
  .hv { display: none; }
}

/* Desktop: tighter hero spacing so the four points show on a normal laptop or HD screen without scrolling. */
@media (min-width: 1101px) {
  /* One gap for the whole hero: above it, between visual and points, and below the points. */
  .home-hero { padding-block: var(--hero-gap); }
  .home-standards { padding-top: var(--hero-gap); }
  /* On short screens the visual sets the hero height; size it from the screen height (it keeps its 700:560 shape). */
  .hv { width: clamp(min(100%, 480px), calc((100vh - 340px) * 1.25), 100%); margin-left: auto; }
}
/* Space between each point's heading and its text. */
.home-standards__grid h3 { margin-bottom: 6px; }
/* The Stretch section starts the same distance below the divider as the hero's own gaps. */
.home-page { --hero-gap: var(--space-section-block); }
.home-page .home-themes { padding-top: var(--hero-gap); }
@media (min-width: 1101px) {
  .home-page { --hero-gap: clamp(36px, 5.5vh, 60px); }
}
.site-footer__disclaimer { display: block; font-size: .82em; line-height: 1.5; }

/* About, Contact, Support: content left, a short facts box right. Flat: 1px border, no shadow. */
.split-page__header { margin-bottom: clamp(32px, 5vw, 56px); }
.split-page__header h1 { margin-bottom: 14px; }
.split-page__header > p { max-width: 640px; margin: 0; font-family: var(--font-sans); }
.split-page__grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(32px, 6vw, 96px); align-items: start; padding-bottom: var(--space-section-block); }
.split-page__content h2, .split-page__content h3 { margin-top: 1.8em; margin-bottom: .4em; font-size: 1.25rem; }
.split-page__content > :first-child { margin-top: 0; }
.split-page__aside { position: sticky; top: 24px; display: grid; gap: 20px; padding: 26px; border: 1px solid var(--color-border-default); border-radius: 20px; background: var(--color-surface-accent-3); }
.split-aside__facts { display: grid; gap: 14px; margin: 0; }
.split-aside__facts dt { margin-bottom: 2px; color: var(--color-text-secondary); font-size: .8rem; font-weight: 600; }
.split-aside__facts dd { margin: 0; color: var(--color-text-primary); font-weight: 700; line-height: 1.45; }
.split-aside__facts a { color: inherit; white-space: nowrap; }
.split-aside__links { margin: 0; font-size: .92rem; }
.split-aside__links a { color: var(--color-text-primary); }
.split-page__aside .dg-btn { justify-self: start; }
@media (max-width: 900px) {
  .split-page__grid { grid-template-columns: 1fr; }
  /* Phones and tablets: the facts box comes first, right under the intro. */
  .split-page__aside { position: static; order: -1; }
}
@media (max-width: 420px) {
  /* Keep the email on one line in the narrow box. */
  .split-page__aside { padding: 20px; }
  .split-aside__facts dd { font-size: .92rem; }
}
/* About box: the same social icons as the footer, in dark-on-light colours. */
.split-aside__social .footer-social { margin: 0 !important; }
.split-aside__social .footer-social a { color: var(--color-text-primary); border-color: var(--color-text-primary); }
.split-aside__social .footer-social a:hover { color: var(--color-button-primary-text); border-color: var(--color-button-primary-background); background: var(--color-button-primary-background); }
.split-aside__social .footer-social { padding: 0; list-style: none; }
.split-aside__social .footer-social li { list-style: none; }
.split-aside__social .footer-social li::before, .split-aside__social .footer-social li::marker { content: none; }
.split-page__aside .dg-btn { white-space: nowrap; }
/* The YouTube play triangle is cut out in the box colour, not the dark footer colour. */
.split-aside__social .footer-social__cutout { fill: var(--color-surface-accent-3); stroke: var(--color-surface-accent-3); }
.split-aside__social .footer-social a:hover .footer-social__cutout { fill: var(--color-button-primary-background); stroke: var(--color-button-primary-background); }

/* Pages: title sits closer to the content, and grey callouts (e.g. "Last updated") use the site's flat yellow box. */
.static-page .page-header { margin-bottom: clamp(28px, 4vw, 48px); }
.static-page .page-header h1 { margin-bottom: 0; }
.static-page .page-header:has(> p) h1 { margin-bottom: 14px; }
.gh-content .kg-callout-card-grey { padding: 14px 20px; border: 1px solid var(--color-border-default); background: var(--color-surface-accent-3); }
.gh-content .kg-callout-card-grey .kg-callout-text { font-size: .95rem; font-weight: 600; color: var(--color-text-primary); }
.gh-content > .kg-callout-card:first-child { margin-top: 0; }
/* A one-line note like "Last updated" only needs to be as wide as its text. */
.gh-content .kg-callout-card-grey { width: fit-content; max-width: 100%; border-radius: 999px; padding: 10px 18px; }
@media (max-width: 420px) {
  .gh-content .kg-callout-card-grey { padding: 9px 14px; }
  .gh-content .kg-callout-card-grey .kg-callout-text { font-size: .82rem; white-space: nowrap; }
}

/* Normal pages (licence, terms, privacy…): readable line length and policy-size headings,
   in line with other theme sellers (headings ~30px, text ~600–720px wide). */
.static-page:not(.split-page) .page-header,
.static-page:not(.split-page) .gh-content { max-width: 720px; }
.static-page:not(.split-page) .gh-content h2 { margin: 1.8em 0 .5em; font-size: clamp(1.5rem, 2.2vw, 1.9rem); line-height: 1.2; }
.static-page:not(.split-page) .gh-content h3 { margin: 1.5em 0 .4em; font-size: 1.2rem; }

/* Stretch docs: sticky sidebar and a readable content column. Flat, 1px borders. */
.docs-page__grid { display: grid; grid-template-columns: 240px minmax(0, 720px); gap: clamp(32px, 6vw, 88px); align-items: start; padding-block: clamp(32px, 5vw, 64px) var(--space-section-block); }
.docs-nav { position: sticky; top: 24px; display: grid; gap: 14px; }
.docs-nav__title { margin: 0; font-size: 1.1rem; font-weight: 800; }
.docs-nav__title a { color: var(--color-text-primary); text-decoration: none; }
.docs-nav__meta { margin: -8px 0 0; color: var(--color-text-secondary); font-size: .82rem; }
.docs-nav ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.docs-nav li a { display: block; padding: 8px 12px; border-radius: 10px; color: var(--color-text-secondary); font-size: .95rem; text-decoration: none; }
.docs-nav li a:hover { color: var(--color-text-primary); background: var(--color-surface-muted); }
.docs-nav li a.is-current { color: var(--color-text-primary); font-weight: 700; background: var(--color-surface-accent-3); }
.docs-nav__help { margin: 6px 0 0; padding-top: 14px; border-top: 1px solid var(--color-border-default); font-size: .9rem; }
.docs-nav__help a { color: var(--color-text-primary); }
.docs-page__header { margin-bottom: 24px; }
.docs-page .page-header h1 { margin: 0; font-size: clamp(2.2rem, 4vw, 3.2rem); }
.docs-page .gh-content h2 { margin: 1.8em 0 .5em; font-size: clamp(1.35rem, 2vw, 1.6rem); line-height: 1.25; }
.docs-page .gh-content > :first-child { margin-top: 0; }
.docs-page .gh-content table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.docs-page .gh-content th, .docs-page .gh-content td { padding: 10px 12px; border-bottom: 1px solid var(--color-border-default); text-align: left; vertical-align: top; }
.docs-page .gh-content th { color: var(--color-text-primary); font-weight: 700; }
.docs-page .gh-content td:first-child { color: var(--color-text-primary); font-weight: 600; white-space: nowrap; }
.docs-page .gh-content pre { overflow-x: auto; }
@media (max-width: 900px) {
  .docs-page__grid { grid-template-columns: minmax(0, 1fr); }
  /* Small screens: the page list becomes a compact block above the content. */
  .docs-nav { position: static; padding: 16px; border: 1px solid var(--color-border-default); border-radius: 16px; }
  .docs-nav ul { grid-template-columns: 1fr 1fr; }
  .docs-page .gh-content table { display: block; overflow-x: auto; }
  .docs-page .gh-content td:first-child { white-space: normal; }
}
@media (max-width: 480px) {
  .docs-nav ul { grid-template-columns: 1fr; }
}
/* Docs download link styled as a small button (flat). */
.gh-content .docs-download { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 1px solid var(--color-text-primary); border-radius: 999px; color: var(--color-text-primary); font-weight: 700; text-decoration: none; }
.gh-content .docs-download::before { content: "↓"; }
.static-page .gh-content a.docs-download { color: var(--color-text-primary); text-decoration: none; }
/* Same hover as the nav links: light yellow, text stays dark. */
.static-page .gh-content a.docs-download:hover { color: var(--color-text-primary); background: var(--color-surface-accent-3); }

/* Docs screenshots: line up with the text and sit in a thin rounded frame, so a
   screenshot that stops at the bottom of the screen still looks like a complete window. */
.docs-page .gh-content .kg-image-card { grid-column: 1 / -1; width: 100%; margin: 28px 0; }
.docs-page .gh-content .kg-image-card img { display: block; width: 100%; height: auto; border: 1px solid var(--color-border-default); border-radius: 14px; }
.docs-page .gh-content .kg-image-card figcaption { margin-top: 10px; padding: 0; color: var(--color-text-secondary); font-size: .88rem; text-align: left; }
.product-buy__multi { color: var(--color-text-primary); font-size: .92rem; font-weight: 700; text-underline-offset: 4px; }

/* Themes catalogue: short header, the theme cards, and a plain "more coming" note. */
.themes-head { padding-block: clamp(36px, 5vw, 64px) clamp(24px, 3vw, 36px); }
.themes-head h1 { margin: 0 0 10px; font-size: clamp(2.2rem, 4vw, 3.4rem); }
.themes-head p { margin: 0; font-size: 1.05rem; }
.themes-list { padding-bottom: var(--space-section-block); }
.themes-next { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-top: 24px; padding: 28px; border-radius: 20px; background: var(--color-surface-accent-1); }
.themes-next__title { margin: 0 0 4px; color: var(--color-text-primary); font-size: 1.15rem; font-weight: 700; }
.themes-next p { margin: 0; }


/* Stretch product page: one section rhythm, one card style, one neutral line colour. */
/* Use the site tokens so dividers and borders match every other page. */
.product-page--stretch { --pdp-line: var(--color-border-default); --pdp-muted: var(--color-surface-muted); }
.product-page--stretch .product-meta { border-top-color: var(--pdp-line); }
.pdp-section { padding-block: clamp(48px, 6vw, 80px); border-top: 1px solid var(--pdp-line); }
.pdp-title { margin: 0 0 28px; font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1.15; text-align: left; }
.pdp-two { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.pdp-card { display: flex; flex-direction: column; padding: 14px 14px 22px; border: 1px solid var(--pdp-line); border-radius: 20px; background: var(--color-surface); }
/* Every card image sits inset in the same light frame. */
.pdp-card > figure, .pdp-card__media { margin: 0 0 18px; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 12px; background: var(--pdp-muted); }
.pdp-card > figure { padding: 12px; }
.pdp-card > figure img { border-radius: 8px; }
.pdp-card > figure img, .pdp-card > figure picture { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.pdp-card h3 { margin: 0 8px 6px; font-size: 1.12rem; }
.pdp-card p { margin: 0 8px; font-size: .95rem; line-height: 1.55; }
.pdp-card p a { color: var(--color-text-primary); }
.pdp-schemes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px; }
.pdp-schemes figure { margin: 0; display: flex; flex-direction: column; min-height: 0; }
.pdp-schemes img { display: block; width: 100%; flex: 1; min-height: 0; object-fit: cover; object-position: left top; border: 1px solid var(--pdp-line); border-radius: 8px; }
.pdp-schemes figcaption { margin-top: 4px; color: var(--color-text-secondary); font-size: .75rem; font-weight: 600; }
.pdp-settings { display: flex; justify-content: center; padding: 18px 18px 0; }
.pdp-settings img { width: auto; max-width: 62%; height: auto; align-self: flex-start; border: 1px solid var(--pdp-line); border-radius: 10px 10px 0 0; border-bottom: 0; }
.pdp-also { margin: 20px 0 0; color: var(--color-text-secondary); font-size: .92rem; }
.pdp-also a { color: var(--color-text-primary); }
.pdp-reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pdp-review { display: flex; flex-direction: column; margin: 0; padding: 24px; border: 1px solid var(--pdp-line); border-radius: 20px; }
.pdp-review__stars { margin-bottom: 12px; color: var(--color-text-primary); letter-spacing: 2px; }
.pdp-review blockquote { flex: 1; margin: 0 0 16px; padding: 0; border: 0; color: var(--color-text-primary); font-size: 1rem; line-height: 1.55; }
.pdp-review figcaption { color: var(--color-text-secondary); font-size: .88rem; }
.pdp-licence { display: flex; flex-direction: column; padding: 28px; border: 1px solid var(--pdp-line); border-radius: 20px; }
.pdp-licence:first-child { border-color: var(--color-text-primary); }
.pdp-licence__name { margin: 0 0 6px; color: var(--color-text-primary); font-weight: 700; }
.pdp-licence__price { display: flex; align-items: baseline; gap: 8px; margin: 0 0 6px; color: var(--color-text-primary); font-size: 2.6rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.pdp-licence__price span { color: var(--color-text-secondary); font-size: .9rem; font-weight: 600; letter-spacing: 0; }
.pdp-licence__who { margin: 0 0 18px; font-size: .95rem; }
.pdp-check { display: grid; gap: 10px; margin: 0 0 24px; padding: 18px 0 0; border-top: 1px solid var(--pdp-line); list-style: none; flex: 1; }
.pdp-check li { display: flex; gap: 10px; align-items: flex-start; margin: 0; color: var(--color-text-primary); font-size: .95rem; }
.pdp-check svg { flex: none; margin-top: 3px; }
.pdp-licence .dg-btn { width: 100%; white-space: nowrap; }
@media (max-width: 900px) {
  .pdp-reviews { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .pdp-two { grid-template-columns: 1fr; }
}
/* FAQ on the product page: same section style as the rest. */
.pdp-faq__list { max-width: 820px; }
.pdp-faq details { border-bottom: 1px solid var(--pdp-line); }
.pdp-faq summary { padding: 18px 0; color: var(--color-text-primary); font-weight: 700; cursor: pointer; }
.pdp-faq details p { margin: 0 0 18px; }
.pdp-faq details p a { color: var(--color-text-primary); }
/* Wide, short screenshots sit centred on their own dark background. */
.pdp-card > figure.pdp-fit-dark { background: #090909; }
.pdp-card > figure.pdp-fit-dark img { object-fit: contain; object-position: center; }
/* The settings panel is taller than the frame: fade it out instead of cutting it. */
.pdp-settings { position: relative; }
.pdp-settings::after { content: ""; position: absolute; inset: auto 0 0; height: 30%; background: linear-gradient(to bottom, transparent, var(--pdp-muted)); pointer-events: none; }
.pdp-faq__more { margin: 0; color: var(--color-text-secondary); }
.pdp-faq__more a { color: var(--color-text-primary); }
/* The hero already ends the top block: no divider before the first section. */
.product-hero + .pdp-section { border-top: 0; padding-top: 0; }
/* Reviews keep the home style; the section around them sets the spacing. */
.pdp-section .home-reviews { margin-top: 0; padding-top: 0; }
@media (min-width: 701px) { .pdp-buy-note { text-align: center; } }
/* Feature images sit straight in the card, no tinted frame. */
.pdp-features .pdp-card > figure:not(.pdp-fit-dark) { padding: 0; background: none; }
/* Make it yours: a full-width colour band so the customising section stands out. */
.pdp-band { --pdp-muted: var(--color-surface); padding-block: clamp(56px, 7vw, 96px); background: var(--color-surface-accent-1); }
.pdp-band .pdp-card { border-color: transparent; }
.pdp-band + .pdp-section { border-top: 0; }
/* FAQ in two columns: heading on the left, questions on the right. */
.pdp-faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.pdp-faq__list { max-width: none; }
.pdp-faq__list details:first-child summary { padding-top: 0; }
@media (max-width: 700px) { .pdp-faq { grid-template-columns: 1fr; } }