/*
Theme Name: copywriterai.se
Theme URI: https://geoa.app
Author: AddonNordic ApS
Author URI: https://addonnordic.dk
Description: Block theme ported 1:1 from the Figma Make design (eKLMyFcI9wum9gu9tKlJGt). Tokens in theme.json, components here. Design lives in the repo, never in the site editor.
Version: 1.2.0
Requires at least: 6.6
Requires PHP: 8.0
License: Proprietary
Text Domain: copywriterai
*/

/* ============================================================
   TOKENS (mirrors theme.json — kept as plain custom properties so
   the component CSS below is identical to the Figma Make source)
   ============================================================ */
:root {
  --color-bg:           var(--wp--preset--color--bg, #F7F8F6);
  --color-surface:      var(--wp--preset--color--surface, #FFFFFF);
  --color-ink:          var(--wp--preset--color--ink, #1A1F1C);
  --color-ink-muted:    var(--wp--preset--color--ink-muted, #5C6560);
  --color-accent:       var(--wp--preset--color--accent, #0D7A5F);
  --color-accent-hover: var(--wp--preset--color--accent-hover, #0A6350);
  --color-accent-ink:   var(--wp--preset--color--accent-ink, #FFFFFF);
  --color-border:       var(--wp--preset--color--border, #DDE0DB);
  --color-success:      var(--wp--preset--color--success, #1A7A45);
  --color-warning:      var(--wp--preset--color--warning, #9A6F00);
  --color-danger:       var(--wp--preset--color--danger, #B83A2E);
  --color-band-alt:     var(--wp--preset--color--band-alt, #EEF0ED);

  --font-display: var(--wp--preset--font-family--display, 'Fraunces', Georgia, serif);
  --font-body:    var(--wp--preset--font-family--body, 'DM Sans', system-ui, sans-serif);

  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  2.5rem;
  --space-8:  3rem;
  --space-9:  4rem;
  --space-10: 5rem;

  --radius-s:    4px;
  --radius-m:    10px;
  --radius-pill: 9999px;

  --max-w:      1200px;
  --max-w-text: 720px;
}

/* ============================================================
   BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin-top: 0; line-height: 1.15; }
p { margin-top: 0; }

a {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover { color: var(--color-accent-hover); }

img, svg { display: block; max-width: 100%; }
ul, ol { padding-left: 1.25em; }

/* ============================================================
   TYPOGRAPHY SCALE
   ============================================================ */
.t-display { font-family: var(--font-display); font-size: clamp(2.25rem, 5vw, 3.5rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; }
.t-h1 { font-family: var(--font-display); font-size: clamp(1.875rem, 4vw, 2.875rem); font-weight: 700; letter-spacing: -0.015em; line-height: 1.1; }
.t-h2 { font-size: clamp(1.3rem, 2.5vw, 1.75rem); font-weight: 600; letter-spacing: -0.01em; }
.t-h3 { font-size: 1.125rem; font-weight: 600; }
.t-small { font-size: 0.875rem; color: var(--color-ink-muted); }
.t-muted { color: var(--color-ink-muted); }

/* ============================================================
   LAYOUT
   ============================================================ */
.container { width: 100%; max-width: var(--max-w); margin-inline: auto; padding-inline: var(--space-5); }
.section { padding-block: var(--space-9); }
.section--alt { background: var(--color-band-alt); }
.section--surface { background: var(--color-surface); }

/* ============================================================
   BUTTONS (.btn = Figma source; .wp-block-button__link and .hst-cta =
   the same style applied to WordPress' own markup)
   ============================================================ */
.btn,
.wp-block-button__link,
.hst-cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-pill);
  padding: 0.75rem 1.625rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
  border: 2px solid transparent;
  line-height: 1.2;
}

.btn--primary,
.wp-block-button__link,
.hst-cta a {
  background: var(--color-accent);
  color: var(--color-accent-ink);
  border-color: var(--color-accent);
}
.btn--primary:hover,
.wp-block-button__link:hover,
.hst-cta a:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: var(--color-accent-ink);
  text-decoration: none;
}

.btn--outline { background: transparent; color: var(--color-accent); border-color: var(--color-accent); }
.btn--outline:hover { background: var(--color-accent); color: var(--color-accent-ink); text-decoration: none; }

.btn--white { background: var(--color-surface); color: var(--color-accent); border-color: var(--color-surface); }
.btn--white:hover { background: var(--color-band-alt); border-color: var(--color-band-alt); color: var(--color-accent); text-decoration: none; }

.btn--lg { font-size: 1.0625rem; padding: 0.875rem 2rem; }

.hst-cta { margin: var(--space-6) 0; }
@media (max-width: 639px) { .hst-cta a, .hero .btn { white-space: normal; text-align: center; } }

/* ============================================================
   SITE HEADER
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.site-header__inner { height: 64px; gap: var(--space-5); }

.site-header__logo,
.site-header__logo a {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-accent);
  text-decoration: none;
  letter-spacing: -0.01em;
  flex-shrink: 0;
  margin: 0;
}
.site-header__logo a:hover { color: var(--color-accent-hover); text-decoration: none; }

/* Core navigation block, styled as the Figma header nav */
.site-header__nav { flex: 1; }
.site-header__nav .wp-block-navigation__container { gap: var(--space-4); }
.site-header__nav .wp-block-navigation-item__content {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-ink);
  text-decoration: none;
  white-space: nowrap;
}
.site-header__nav .wp-block-navigation-item__content:hover { color: var(--color-accent); }
.site-header__nav .current-menu-item > .wp-block-navigation-item__content { color: var(--color-accent); }

.site-header__cta { display: none; margin-left: auto; }

/* Figma breaks at 960; core's overlay breaks at 600. Keep the burger
   up to 959px and hide the row menu until then. */
@media (min-width: 600px) and (max-width: 959px) {
  .site-header__nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
  .site-header__nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}
.site-header__nav .wp-block-navigation__responsive-container-open { margin-left: auto; color: var(--color-ink); }
.site-header__nav .wp-block-navigation__responsive-container.is-menu-open { background: var(--color-surface); padding: var(--space-6); }
.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 1.125rem; }

@media (min-width: 960px) {
  .site-header__cta { display: inline-flex; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero { padding-block: var(--space-10) var(--space-9); background: var(--color-bg); }
.hero__inner { display: grid; gap: var(--space-8); align-items: center; }
.hero__content { max-width: 600px; }
.hero__eyebrow { display: inline-block; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-4); }
.hero__h1 { margin-bottom: var(--space-5); }
.hero__lead { font-size: 1.125rem; color: var(--color-ink-muted); margin-bottom: var(--space-6); max-width: 52ch; }
.hero__form { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-4); }
.hero__input-wrap { display: flex; flex-direction: column; gap: var(--space-3); }
.hero__input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.8125rem 1.125rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-m);
  background: var(--color-surface);
  color: var(--color-ink);
  outline: none;
  transition: border-color 0.15s;
  -webkit-appearance: none;
}
.hero__input:focus { border-color: var(--color-accent); }
.hero__input::placeholder { color: var(--color-ink-muted); }
.hero__note { font-size: 0.8125rem; color: var(--color-ink-muted); margin: 0; }

@media (min-width: 640px) {
  .hero__input-wrap { flex-direction: row; }
  .hero__input-wrap .hero__input { flex: 1; }
  .hero__input-wrap .btn { flex-shrink: 0; }
}
@media (min-width: 960px) {
  .hero__inner { grid-template-columns: 1fr 420px; }
}

/* ============================================================
   CHECK REPORT ILLUSTRATION
   ============================================================ */
.check-report { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-m); padding: var(--space-5); box-shadow: 0 4px 24px rgba(0,0,0,0.06); }
.check-report__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); }
.check-report__title { font-size: 0.8125rem; font-weight: 700; color: var(--color-ink-muted); letter-spacing: 0.05em; text-transform: uppercase; }
.check-report__score { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--color-accent); }
.check-report__rows { display: flex; flex-direction: column; gap: var(--space-2); }
.check-report__row { display: flex; align-items: center; gap: var(--space-3); font-size: 0.875rem; padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
.check-report__row:last-child { border-bottom: none; }
.check-icon { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.check-icon--ok   { background: color-mix(in srgb, var(--color-success) 12%, transparent); }
.check-icon--warn { background: color-mix(in srgb, var(--color-warning) 12%, transparent); }
.check-icon--fail { background: color-mix(in srgb, var(--color-danger) 12%, transparent); }
.check-icon--ok svg   { color: var(--color-success); }
.check-icon--warn svg { color: var(--color-warning); }
.check-icon--fail svg { color: var(--color-danger); }
.check-report__label { flex: 1; color: var(--color-ink); }
.check-report__label--muted { color: var(--color-ink-muted); }

/* ============================================================
   CHECKPOINTS GRID
   ============================================================ */
.checkpoints__intro { max-width: 56ch; margin-bottom: var(--space-7); }
.checkpoints-grid { display: grid; gap: var(--space-4) var(--space-7); list-style: none; padding: 0; margin: 0; }
.checkpoint { display: flex; gap: var(--space-3); align-items: flex-start; }
.checkpoint__icon { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); margin-top: 0.55em; }
.checkpoint__title { font-weight: 600; }
.checkpoint p { margin: 0; font-size: 0.9375rem; }
@media (min-width: 640px) { .checkpoints-grid { grid-template-columns: 1fr 1fr; } }

/* ============================================================
   STEPS
   ============================================================ */
.steps { display: grid; gap: var(--space-6); list-style: none; padding: 0; margin: 0 0 var(--space-7); counter-reset: step; }
.step { display: flex; gap: var(--space-4); align-items: flex-start; counter-increment: step; }
.step__num { flex-shrink: 0; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); font-weight: 700; font-size: 0.9375rem; display: flex; align-items: center; justify-content: center; }
.step__num::before { content: counter(step); }
.step__body { flex: 1; padding-top: 0.3rem; }
.step__title { font-weight: 600; margin-bottom: var(--space-1); }
.step p { margin: 0; color: var(--color-ink-muted); font-size: 0.9375rem; }
.step .step__title { color: var(--color-ink); }
@media (min-width: 960px) { .steps { grid-template-columns: repeat(4, 1fr); } .step { flex-direction: column; } }

/* ============================================================
   STAT TILES
   ============================================================ */
.stat-tiles { display: grid; gap: var(--space-5); margin-bottom: var(--space-7); }
.stat-tile { padding: var(--space-6); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-m); }
.stat-tile__number { font-family: var(--font-display); font-size: clamp(2.5rem, 5vw, 3.75rem); font-weight: 700; color: var(--color-ink); line-height: 1; margin-bottom: var(--space-2); letter-spacing: -0.02em; }
.stat-tile__label { font-size: 1rem; font-weight: 500; color: var(--color-ink); margin-bottom: var(--space-2); }
.stat-tile__source { font-size: 0.8125rem; color: var(--color-ink-muted); margin: 0; }
@media (min-width: 640px) { .stat-tiles { grid-template-columns: repeat(3, 1fr); } }

/* ============================================================
   TOOL CARDS
   ============================================================ */
.tool-cards { display: grid; gap: var(--space-5); list-style: none; padding: 0; margin: 0 0 var(--space-7); }
.tool-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-m); padding: var(--space-5); display: flex; flex-direction: column; }
.tool-card--featured { border-color: var(--color-accent); border-width: 2px; }
.tool-card__num { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-3); }
.tool-card__title { font-size: 1.0625rem; font-weight: 600; margin-bottom: var(--space-2); margin-top: 0; }
.tool-card p { flex: 1; font-size: 0.9375rem; color: var(--color-ink-muted); margin-bottom: var(--space-4); }
.tool-card .btn { align-self: flex-start; }
@media (min-width: 640px) { .tool-cards { grid-template-columns: 1fr 1fr; } }

/* ============================================================
   TABLES
   ============================================================ */
.comparison-wrap, .article-layout table { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: var(--space-7); }
table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
th, td { padding: var(--space-3) var(--space-4); text-align: left; border-bottom: 1px solid var(--color-border); vertical-align: top; }
thead th { font-weight: 700; background: var(--color-band-alt); font-size: 0.875rem; white-space: nowrap; }
thead th:first-child { border-radius: var(--radius-s) 0 0 0; }
thead th:last-child  { border-radius: 0 var(--radius-s) 0 0; }
tbody tr:hover td { background: color-mix(in srgb, var(--color-accent) 4%, transparent); }
td.td--accent { color: var(--color-accent); font-weight: 600; }
.check-mark { color: var(--color-success); font-weight: 700; }
.cross-mark { color: var(--color-danger); }
.article-layout table { display: block; }

/* ============================================================
   PRICING PLANS
   ============================================================ */
.pricing-plans { display: grid; gap: var(--space-5); margin-bottom: var(--space-7); }
.plan-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-m); padding: var(--space-6); display: flex; flex-direction: column; position: relative; }
.plan-card--recommended { border-color: var(--color-accent); border-width: 2px; }
.plan-card__badge { position: absolute; top: -1px; left: var(--space-5); background: var(--color-accent); color: var(--color-accent-ink); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.2rem 0.75rem; border-radius: 0 0 var(--radius-s) var(--radius-s); }
.plan-card__name { margin-bottom: var(--space-3); color: var(--color-ink-muted); text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.8125rem; font-weight: 700; }
.plan-card__price { font-family: var(--font-display); font-size: 2.5rem; font-weight: 700; line-height: 1; margin-bottom: var(--space-1); letter-spacing: -0.02em; }
.plan-card__period { font-size: 0.875rem; color: var(--color-ink-muted); margin-bottom: var(--space-5); }
.plan-card__features { list-style: none; padding: 0; margin: 0 0 var(--space-6); flex: 1; display: flex; flex-direction: column; gap: var(--space-3); }
.plan-card__features li { font-size: 0.9375rem; display: flex; gap: var(--space-2); align-items: flex-start; }
.plan-card__features li::before { content: "\2713"; color: var(--color-success); font-weight: 700; flex-shrink: 0; margin-top: 1px; }
.plan-card .btn { align-self: flex-start; }
@media (min-width: 640px) { .pricing-plans { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .pricing-plans { grid-template-columns: repeat(4, 1fr); } }

/* ============================================================
   FAQ (Figma markup .faq-item, and the imported-page markup
   h2 + h3/p pairs get the same rhythm)
   ============================================================ */
.faq { display: flex; flex-direction: column; gap: 0; }
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-item:first-child { border-top: 1px solid var(--color-border); }
.faq-item h3 { font-size: 1.0625rem; font-weight: 600; margin: 0; padding: var(--space-4) 0; }
.faq-item p { font-size: 0.9375rem; color: var(--color-ink-muted); margin: 0; padding-bottom: var(--space-4); }

/* ============================================================
   READ ALSO
   ============================================================ */
.read-also__links { display: grid; gap: var(--space-4); list-style: none; padding: 0; margin: var(--space-5) 0 0; }
.read-also__links a {
  display: flex; align-items: center; gap: var(--space-3);
  font-weight: 500; font-size: 0.9375rem; text-decoration: none;
  padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-m);
  background: var(--color-surface); color: var(--color-ink);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.read-also__links a::after { content: "\2192"; margin-left: auto; color: var(--color-accent); flex-shrink: 0; }
.read-also__links a:hover { border-color: var(--color-accent); box-shadow: 0 2px 8px rgba(13,122,95,0.1); text-decoration: none; color: var(--color-ink); }
@media (min-width: 640px) { .read-also__links { grid-template-columns: repeat(3, 1fr); } }

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band { background: var(--color-accent); padding-block: var(--space-10); }
.cta-band h2 { font-family: var(--font-display); color: var(--color-accent-ink); font-size: clamp(1.5rem, 3vw, 2.25rem); margin-bottom: var(--space-3); letter-spacing: -0.015em; }
.cta-band p { color: color-mix(in srgb, var(--color-accent-ink) 80%, transparent); margin-bottom: var(--space-6); font-size: 1.0625rem; max-width: 52ch; }

/* ============================================================
   SITE FOOTER
   ============================================================ */
.site-footer { background: var(--color-ink); color: color-mix(in srgb, var(--color-accent-ink) 75%, transparent); padding-block: var(--space-9); }
.site-footer__inner { display: grid; gap: var(--space-7); }
.site-footer__logo { font-weight: 700; color: var(--color-accent-ink); font-size: 1rem; text-decoration: none; display: block; margin-bottom: var(--space-3); }
.site-footer__tagline { font-size: 0.875rem; margin: 0; max-width: 44ch; }
.site-footer__nav { display: grid; gap: var(--space-5); }
.site-footer__nav-group h4 { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent-ink); margin-bottom: var(--space-3); }
.site-footer__nav-group ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.site-footer__nav-group a { font-size: 0.875rem; color: color-mix(in srgb, var(--color-accent-ink) 70%, transparent); text-decoration: none; }
.site-footer__nav-group a:hover { color: var(--color-accent-ink); }
.site-footer__legal { padding-top: var(--space-6); border-top: 1px solid color-mix(in srgb, var(--color-accent-ink) 15%, transparent); font-size: 0.8125rem; color: color-mix(in srgb, var(--color-accent-ink) 50%, transparent); }
.site-footer__legal p { margin: 0; }
.site-footer__legal a { color: color-mix(in srgb, var(--color-accent-ink) 60%, transparent); }
@media (min-width: 640px) { .site-footer__nav { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .site-footer__inner { grid-template-columns: 2fr 3fr; } }

/* ============================================================
   SECTION HEADINGS
   ============================================================ */
.section__label { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-3); }
.section__heading { font-size: clamp(1.5rem, 3vw, 2.125rem); font-weight: 700; letter-spacing: -0.015em; margin-bottom: var(--space-4); }
.section__subheading { font-size: 1.0625rem; color: var(--color-ink-muted); max-width: 60ch; margin-bottom: var(--space-7); }

/* ============================================================
   ARTICLE LAYOUT (page.html wraps post content in .article-layout)
   ============================================================ */
.article-layout { max-width: var(--max-w-text); }
.article-layout h2 { font-size: clamp(1.25rem, 2.5vw, 1.625rem); font-weight: 700; margin-top: var(--space-8); margin-bottom: var(--space-4); letter-spacing: -0.01em; }
.article-layout h3 { font-size: 1.125rem; font-weight: 600; margin-top: var(--space-6); margin-bottom: var(--space-3); }
.article-layout p { margin-bottom: var(--space-4); max-width: 68ch; }
.article-layout ul, .article-layout ol { margin-bottom: var(--space-4); max-width: 68ch; }
.article-layout li { margin-bottom: var(--space-2); }
.article-layout > :first-child { margin-top: 0; }
/* Imported FAQ blocks: an h3 question directly followed by its answer */
.article-layout h3 + p { color: var(--color-ink-muted); font-size: 0.9375rem; }

.callout { background: color-mix(in srgb, var(--color-accent) 8%, transparent); border-left: 3px solid var(--color-accent); border-radius: 0 var(--radius-m) var(--radius-m) 0; padding: var(--space-4) var(--space-5); margin: var(--space-6) 0; }
.callout__label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-2); }
.callout p { margin: 0; max-width: none; }

.midway-cta { background: var(--color-band-alt); border-radius: var(--radius-m); padding: var(--space-5) var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); margin: var(--space-8) 0; align-items: flex-start; }
.midway-cta p { margin: 0; font-size: 1rem; max-width: 60ch; }
@media (min-width: 640px) { .midway-cta { flex-direction: row; align-items: center; } .midway-cta p { flex: 1; } .midway-cta .btn { flex-shrink: 0; } }

/* ============================================================
   TITLE BAND
   ============================================================ */
.title-band { padding-block: var(--space-9); background: var(--color-bg); border-bottom: 1px solid var(--color-border); }
.title-band h1 { font-family: var(--font-display); font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 700; letter-spacing: -0.015em; line-height: 1.1; max-width: 22ch; margin-bottom: 0; }
.title-band__lead { font-size: 1.125rem; color: var(--color-ink-muted); max-width: 60ch; margin: var(--space-4) 0 0; }

/* ============================================================
   MISC
   ============================================================ */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; }
.text-center { text-align: center; }
.divider { border: none; border-top: 1px solid var(--color-border); margin: 0; }

/* WordPress admin bar pushes the sticky header down */
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }

/* ============================================================
   BLOG (posts index + single)
   ============================================================ */
.post-cards { display: grid; gap: var(--space-5); list-style: none; padding: 0; margin: 0 0 var(--space-7); }
.post-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-m); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.post-card__date, .post-meta { font-size: 0.8125rem; color: var(--color-ink-muted); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; margin: 0; }
.post-meta { margin-bottom: var(--space-3); }
.post-card__title { font-size: 1.25rem; font-weight: 700; margin: 0; letter-spacing: -0.01em; }
.post-card__title a { color: var(--color-ink); text-decoration: none; }
.post-card__title a:hover { color: var(--color-accent); }
.post-card__excerpt { font-size: 0.9375rem; color: var(--color-ink-muted); margin: 0; }
.post-card__excerpt .wp-block-post-excerpt__more-link { display: inline-block; margin-top: var(--space-2); font-weight: 600; text-decoration: none; }
@media (min-width: 640px) { .post-cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .post-cards { grid-template-columns: repeat(3, 1fr); } }
.post-pagination { display: flex; gap: var(--space-4); align-items: center; font-size: 0.9375rem; }
.post-pagination a, .post-pagination .page-numbers { text-decoration: none; }
.post-pagination .page-numbers.current { font-weight: 700; color: var(--color-ink); }
.post-hero-image { margin: 0 0 var(--space-6); }
.post-hero-image img { border-radius: var(--radius-m); }
.read-also { margin-top: var(--space-9); }
.read-also__links h3 { margin: 0; font-size: inherit; font-weight: inherit; }
.read-also__links h3 a { display: flex; align-items: center; gap: var(--space-3); font-weight: 500; font-size: 0.9375rem; text-decoration: none; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-m); background: var(--color-surface); color: var(--color-ink); }
.read-also__links h3 a::after { content: "\2192"; margin-left: auto; color: var(--color-accent); }
.read-also__links h3 a:hover { border-color: var(--color-accent); }
.wp-block-post-featured-image:empty { display: none; }

/* ============================================================
   BRAND-SPECIFIC (copywriterai)
   ============================================================ */
/* ============================================================
   CONTENT LOOK — port 1:1 of the Figma Make design
   Dxzp2E3LzShCO2h722xvDc (seotekster.dk / copywriterai.se).
   Loaded after the shared components above; overrides the
   shared classes and adds the .ct-* components that only this
   design has (editorial hero, ghost numerals, rounded cards).
   Values are Make's Tailwind values written out as CSS.
   ============================================================ */
:root {
  --c-forest:      #1E2D22;
  --c-forest-2:    #2A3D2E;   /* primary hover */
  --c-forest-3:    #2A4030;   /* ghost numeral on forest */
  --c-sage:        #4A6E52;
  --c-sage-dark:   #3A5840;   /* sage hover */
  --c-sage-light:  #8FB898;
  --c-sage-pale:   #C8D8CC;
  --c-sage-mid:    #7A9B82;
  --c-sage-dim:    #5A7A62;
  --c-sage-deep:   #3A5040;
  --c-cream:       #F3F1EA;
  --c-band:        #E8E4D8;
  --c-ghost:       #DDD9CE;
  --c-rule:        #C8C4B8;
  --c-text-2:      #5A5950;
  --c-text-3:      #8A8880;
  --c-text-4:      #4A4940;
  --c-text-5:      #6B6A62;
  --c-line:        rgba(26, 28, 24, 0.08);
  --c-line-2:      rgba(26, 28, 24, 0.10);
  --c-line-3:      rgba(26, 28, 24, 0.06);
  --max-w:         1280px;
  --radius-m:      10px;
  --radius-xl:     16px;
}

/* ---------- base ---------- */
body { font-size: 0.9375rem; line-height: 1.6; }
body h1, body h2, body h3 { font-weight: 600; }
body h1 { font-family: var(--font-display); }
a { color: var(--color-ink); text-decoration-color: rgba(26, 28, 24, 0.35); text-underline-offset: 3px; }
a:hover { color: var(--c-sage); }
::selection { background: var(--c-sage); color: #fff; }
.container { padding-inline: 1.5rem; }

/* ---------- buttons ---------- */
.btn, .wp-block-button__link, .hst-cta a {
  font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.025em;
  padding: 0.75rem 1.5rem; border-width: 1px; gap: 0.5rem;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.btn::after, .hst-cta a::after {
  content: ""; width: 12px; height: 12px; flex-shrink: 0; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 6h7M6 2.5L9.5 6 6 9.5' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 6h7M6 2.5L9.5 6 6 9.5' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.btn--noarrow::after { display: none; }
.btn--primary, .wp-block-button__link, .hst-cta a { background: var(--c-forest); color: var(--c-cream); border-color: var(--c-forest); box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.btn--primary:hover, .wp-block-button__link:hover, .hst-cta a:hover { background: var(--c-forest-2); border-color: var(--c-forest-2); color: var(--c-cream); }
.btn--outline { background: transparent; color: var(--color-ink); border-color: rgba(26, 28, 24, 0.18); box-shadow: none; }
.btn--outline:hover { background: var(--c-forest); color: var(--c-cream); border-color: var(--c-forest); }
.btn--white { background: transparent; color: var(--c-cream); border-color: rgba(243, 241, 234, 0.4); box-shadow: none; }
.btn--white:hover { background: rgba(243, 241, 234, 0.12); border-color: rgba(243, 241, 234, 0.4); color: var(--c-cream); }
.btn--sage { background: var(--c-sage); color: #fff; border-color: var(--c-sage); }
.btn--sage:hover { background: var(--c-sage-dark); border-color: var(--c-sage-dark); color: #fff; }
.btn--lg { font-size: 0.875rem; padding: 0.875rem 1.75rem; }
.btn--sm { font-size: 0.75rem; padding: 0.5rem 1rem; }

/* ---------- header ---------- */
.site-header { background: rgba(243, 241, 234, 0.95); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); border-bottom: 1px solid var(--c-line); }
.site-header__inner { height: 60px; gap: 1.75rem; }
.site-header__logo, .site-header__logo a { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; color: var(--color-ink); letter-spacing: -0.01em; transition: opacity 0.2s; }
.site-header__logo a:hover { color: var(--color-ink); opacity: 0.6; }
.site-header__nav .wp-block-navigation__container { gap: 1.75rem; }
.site-header__nav .wp-block-navigation-item__content { font-size: 0.8125rem; font-weight: 400; letter-spacing: 0.025em; color: var(--c-text-3); transition: color 0.2s; }
.site-header__nav .wp-block-navigation-item__content:hover { color: var(--color-ink); }
.site-header__nav .current-menu-item > .wp-block-navigation-item__content { color: var(--color-ink); font-weight: 500; }
.site-header__cta { font-size: 0.75rem; padding: 0.5rem 1rem; }
/* Make: CTA from 768px, row menu from 1024px (burger until then) */
@media (min-width: 768px) { .site-header__cta { display: inline-flex; } }
@media (min-width: 600px) and (max-width: 1023px) {
  .site-header__nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
  .site-header__nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}
.site-header__nav .wp-block-navigation__responsive-container.is-menu-open { background: var(--c-cream); padding: 1.25rem 1.5rem; }
.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 0.9375rem; }

/* ---------- editorial hero (front page) ---------- */
.ct-hero { padding: 5rem 0 6rem; }
.ct-hero__inner { max-width: 56rem; }
.ct-eyebrow { display: block; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--c-sage); margin-bottom: 1.75rem; }
.ct-eyebrow--muted { color: var(--c-text-3); }
.ct-hero h1 { font-size: clamp(2rem, 5vw, 4rem); font-weight: 600; line-height: 1.05; letter-spacing: -0.025em; margin: 0; }
.ct-hero__lead { margin: 2rem 0 0; font-size: 1.0625rem; color: var(--c-text-2); line-height: 1.625; max-width: 36rem; }
.ct-hero__actions { margin-top: 2.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.ct-hero__link { font-size: 0.8125rem; color: var(--c-text-3); text-decoration: underline; text-underline-offset: 4px; transition: color 0.2s; }
.ct-hero__link:hover { color: var(--color-ink); }
@media (min-width: 768px) { .ct-hero { padding: 7rem 0 8rem; } }

/* ---------- stats band (numbers live on /om only) ---------- */
.ct-stats { background: var(--c-forest); padding: 3.5rem 0; }
.ct-stats .ct-eyebrow { margin-bottom: 2.5rem; }
.ct-stats__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem 2rem; }
.ct-stat__value { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 600; color: var(--c-sage-light); line-height: 1; }
.ct-stat__label { margin-top: 0.5rem; font-size: 0.8125rem; font-weight: 500; color: var(--c-sage-pale); line-height: 1.375; }
.ct-stat__sub { margin-top: 0.125rem; font-size: 0.6875rem; color: var(--c-sage); }
@media (min-width: 768px) { .ct-stats__grid { grid-template-columns: repeat(4, 1fr); } }

/* ---------- sections + splits ---------- */
.ct-section { padding: 6rem 0; }
.ct-section--band { background: var(--c-band); }
.ct-section--line { border-top: 1px solid var(--c-line); padding: 4rem 0; }
.ct-section--tight { padding: 4rem 0 5rem; }
.ct-split { display: grid; gap: 4rem; align-items: start; }
.ct-h2 { font-family: var(--font-display); font-size: 2rem; font-weight: 600; line-height: 1.25; margin: 0; letter-spacing: -0.01em; }
.ct-h2--sm { font-size: 1.25rem; line-height: 1.375; }
.ct-h2--md { font-size: 1.5rem; line-height: 1.375; }
.ct-sub { margin: 1rem 0 0; font-size: 0.875rem; color: var(--c-text-3); line-height: 1.625; }
.ct-body { margin: 1.5rem 0 0; font-size: 0.875rem; color: var(--c-text-2); line-height: 1.625; }
.ct-body + .ct-body { margin-top: 1rem; }
.ct-actions { margin-top: 2rem; }
@media (min-width: 768px) {
  .ct-section { padding: 8rem 0; }
  .ct-split { grid-template-columns: 1fr 2fr; gap: 6rem; }
  .ct-split--half { grid-template-columns: 1fr 1fr; gap: 8rem; }
  .ct-split--aside { grid-template-columns: 200px 1fr; gap: 5rem; }
  .ct-h2 { font-size: 2.5rem; }
  .ct-h2--lg { font-size: 2.75rem; }
  .ct-h2--sm { font-size: 1.25rem; }
  .ct-h2--md { font-size: 1.5rem; }
}

/* steps with ghost numerals */
.ct-steps { display: grid; gap: 2.5rem; list-style: none; padding: 0; margin: 0; }
.ct-step__num { font-family: var(--font-display); font-size: 3.5rem; font-weight: 600; color: var(--c-ghost); line-height: 1; margin-bottom: 1rem; user-select: none; }
.ct-step h3 { font-family: var(--font-body); font-size: 0.9375rem; font-weight: 600; margin: 0; }
.ct-step p { margin: 0.375rem 0 0; font-size: 0.8125rem; color: var(--c-text-5); line-height: 1.625; }
@media (min-width: 640px) { .ct-steps { grid-template-columns: 1fr 1fr; } }

/* numbered list 01–05 */
.ct-list { display: flex; flex-direction: column; gap: 1.5rem; list-style: none; padding: 0; margin: 0; }
.ct-list li { display: flex; gap: 1.25rem; align-items: flex-start; }
.ct-list__num { margin-top: 3px; font-size: 0.6875rem; font-weight: 500; color: var(--c-sage); letter-spacing: 0.1em; flex-shrink: 0; width: 1.25rem; text-align: right; }
.ct-list__text { font-size: 0.875rem; color: var(--c-text-4); line-height: 1.625; }

/* quote column (band section) */
.ct-quote { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: clamp(1.5rem, 3vw, 2.25rem); color: var(--color-ink); line-height: 1.25; margin: 0; }
.ct-rule { height: 1px; background: var(--c-rule); margin-top: 2rem; }
.ct-note { margin: 1.5rem 0 0; font-size: 0.75rem; color: var(--c-text-3); line-height: 1.625; max-width: 20rem; }
@media (min-width: 768px) { .ct-quote-col { padding-top: 1rem; } }

/* price teaser */
.ct-teaser { border-top: 1px solid var(--c-line); padding: 4rem 0; }
.ct-teaser__inner { display: flex; flex-direction: column; gap: 1.5rem; }
.ct-teaser__price { font-family: var(--font-display); font-size: 2.5rem; font-weight: 600; color: var(--color-ink); }
.ct-teaser__meta { font-size: 0.875rem; color: var(--c-text-3); margin-left: 0.5rem; }
.ct-link { font-size: 0.8125rem; font-weight: 500; color: var(--color-ink); text-decoration: underline; text-underline-offset: 4px; transition: color 0.2s; flex-shrink: 0; }
.ct-link:hover { color: var(--c-sage); }
@media (min-width: 640px) { .ct-teaser__inner { flex-direction: row; align-items: center; justify-content: space-between; } }

/* ---------- FAQ (Make: 200px label column, two-column rows) ---------- */
.ct-faq { padding: 5rem 0; }
.faq { gap: 0; }
.faq-item { border-top: none; border-bottom: 1px solid var(--c-line); padding: 1.75rem 0; display: grid; gap: 1rem; }
.faq-item:first-child { border-top: none; padding-top: 0; }
.faq-item:last-child { border-bottom: none; padding-bottom: 0; }
.faq-item h3 { font-family: var(--font-body); font-size: 0.875rem; font-weight: 600; padding: 0; line-height: 1.375; }
.faq-item p { font-size: 0.8125rem; color: var(--c-text-5); padding: 0; line-height: 1.625; }
@media (min-width: 768px) { .ct-faq { padding: 7rem 0; } .faq-item { grid-template-columns: 1fr 1fr; gap: 3rem; } }

/* ---------- CTA block ---------- */
.cta-band { background: var(--c-forest); padding: 6rem 0; margin-top: 3rem; }
.cta-band h2 { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 600; color: var(--c-cream); line-height: 1.25; letter-spacing: -0.01em; max-width: 42rem; margin-bottom: 0; }
.cta-band p { margin: 1.25rem 0 2.5rem; font-size: 0.875rem; color: var(--c-sage-mid); line-height: 1.625; max-width: 42rem; }
@media (min-width: 768px) { .cta-band { padding: 8rem 0; } }

/* ---------- read also ---------- */
.ct-readalso { border-top: 1px solid var(--c-line); padding: 4rem 0; }
.ct-readalso .ct-eyebrow { margin-bottom: 2rem; }
.read-also { margin-top: 0; border-top: 1px solid var(--c-line); padding: 4rem 0 0; }
.read-also .section__heading { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--c-text-3); margin-bottom: 2rem; }
.read-also__links { gap: 2rem; margin: 0; }
.read-also__links a, .read-also__links h3 a { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 0.5rem; padding: 0; border: none; background: transparent; box-shadow: none; font-size: 0.9375rem; font-weight: 500; color: var(--color-ink); line-height: 1.375; transition: color 0.2s; }
.read-also__links a::after, .read-also__links h3 a::after { content: "Læs \2192"; margin: 0.25rem 0 0; font-size: 0.6875rem; font-weight: 500; color: var(--c-sage); opacity: 0; transition: opacity 0.2s; }
html[lang^="sv"] .read-also__links a::after, html[lang^="sv"] .read-also__links h3 a::after { content: "Läs \2192"; }
.read-also__links a:hover, .read-also__links h3 a:hover { color: var(--c-sage); border: none; box-shadow: none; }
.read-also__links a:hover::after, .read-also__links h3 a:hover::after { opacity: 1; }
.read-also__desc { font-size: 0.75rem; font-weight: 400; color: var(--c-text-3); line-height: 1.625; }
@media (min-width: 1024px) { .read-also__links { grid-template-columns: repeat(3, 1fr); } }

/* ---------- title band + article (page.html / page-wide.html / single.html) ---------- */
.title-band { background: transparent; border-bottom: 1px solid var(--c-line); padding: 5rem 0 4rem; }
.title-band h1 { font-size: clamp(2rem, 5vw, 4rem); font-weight: 600; line-height: 1.05; letter-spacing: -0.025em; max-width: 48rem; }
.title-band__lead { margin-top: 1.75rem; font-size: 1rem; color: var(--c-text-2); max-width: 42rem; line-height: 1.625; }
.section--surface, .section--alt { background: transparent; }
.section { padding: 4rem 0; }
.article-layout { max-width: 42rem; }
.article-layout h2 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; line-height: 1.375; letter-spacing: 0; margin: 3rem 0 1rem; }
.article-layout h3 { font-size: 0.9375rem; font-weight: 600; margin: 2rem 0 0.75rem; }
.article-layout p, .article-layout li { font-size: 0.875rem; color: var(--c-text-2); line-height: 1.625; max-width: none; }
.article-layout p { margin-bottom: 1rem; }
.article-layout h3 + p { font-size: 0.8125rem; color: var(--c-text-5); }
.article-layout ul { list-style: none; padding: 0; margin: 1rem 0 1.5rem; display: flex; flex-direction: column; gap: 0.875rem; }
.article-layout ul li { position: relative; padding-left: 1.25rem; margin: 0; }
.article-layout ul li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 4px; height: 4px; border-radius: 50%; background: var(--c-sage); }
.article-layout ol { padding-left: 1.25rem; margin: 1rem 0 1.5rem; }
.article-layout strong { color: var(--color-ink); }
.article-layout blockquote { margin: 1.5rem 0; padding-left: 1.25rem; border-left: 2px solid var(--c-rule); }
.article-layout blockquote p { color: var(--c-text-4); font-style: italic; }
.article-layout em { color: var(--c-text-4); }
.hst-cta { margin: 3.5rem 0; padding: 2.5rem 0; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.midway-cta { background: transparent; border-radius: 0; padding: 2.5rem 0; margin: 3.5rem 0; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.midway-cta p { font-size: 0.875rem; font-weight: 500; color: var(--c-text-4); max-width: 20rem; line-height: 1.375; }
.callout { background: rgba(74, 110, 82, 0.08); border-left: 2px solid var(--c-sage); border-radius: 0; }
.callout__label { color: var(--c-sage); }
@media (min-width: 768px) { .section { padding: 5rem 0; } .article-layout { margin-left: calc(200px + 5rem); } }

/* tables (Make: hairlines, uppercase headers, no fills) */
table { font-size: 0.8125rem; }
thead th { background: transparent; font-size: 0.6875rem; font-weight: 600; color: var(--c-text-3); text-transform: uppercase; letter-spacing: 0.1em; padding: 0 1.5rem 0.75rem 0; border-bottom: 1px solid var(--c-line-2); border-radius: 0; }
thead th:first-child, thead th:last-child { border-radius: 0; }
td { padding: 0.875rem 1.5rem 0.875rem 0; color: var(--c-text-4); border-bottom: 1px solid var(--c-line-3); line-height: 1.375; }
tbody tr:hover td { background: transparent; }
td.td--accent, .check-mark { color: var(--c-sage); }
.ct-table--plans th:not(:first-child), .ct-table--plans td:not(:first-child) { text-align: center; padding-inline: 1rem; }
.ct-table--plans th:not(:first-child) { color: var(--color-ink); }
.ct-table--plans td:first-child { font-size: 0.75rem; color: var(--c-text-5); }
.ct-table--plans td:not(:first-child) { font-weight: 500; }

/* ---------- pricing cards ---------- */
.ct-plans { display: grid; gap: 1rem; }
.ct-plan { display: flex; flex-direction: column; padding: 2rem; border-radius: var(--radius-xl); background: #fff; border: 1px solid var(--c-line); }
.ct-plan--featured { background: var(--c-forest); border-color: var(--c-forest); box-shadow: 0 20px 25px -5px rgba(30, 45, 34, 0.2), 0 8px 10px -6px rgba(30, 45, 34, 0.2); }
.ct-plan__badge { font-size: 0.625rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-sage-light); margin: 0 0 1.25rem; }
.ct-plan__name { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; margin: 0; color: var(--color-ink); }
.ct-plan--featured .ct-plan__name { color: var(--c-cream); }
.ct-plan__price { display: flex; align-items: baseline; gap: 0.25rem; margin-top: 0.5rem; }
.ct-plan__amount { font-family: var(--font-display); font-size: 2.5rem; font-weight: 600; line-height: 1; color: var(--color-ink); }
.ct-plan--featured .ct-plan__amount { color: var(--c-sage-pale); }
.ct-plan__unit, .ct-plan__desc { font-size: 0.75rem; color: var(--c-text-3); }
.ct-plan__desc { margin: 0.5rem 0 1.5rem; line-height: 1.375; }
.ct-plan--featured .ct-plan__unit, .ct-plan--featured .ct-plan__desc { color: var(--c-sage-dim); }
.ct-plan__features { list-style: none; padding: 0; margin: 0 0 2rem; flex: 1; display: flex; flex-direction: column; gap: 0.625rem; }
.ct-plan__features li { position: relative; padding-left: 0.875rem; font-size: 0.75rem; line-height: 1.625; color: var(--c-text-2); }
.ct-plan__features li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 4px; height: 4px; border-radius: 50%; background: var(--c-sage); }
.ct-plan--featured .ct-plan__features li { color: var(--c-sage-mid); }
.ct-plan .btn { width: 100%; justify-content: center; font-size: 0.75rem; padding: 0.75rem 1rem; }
.ct-plan .btn::after { display: none; }
.ct-plans__note { margin: 1rem 0 0; font-size: 0.6875rem; color: var(--c-text-3); }
@media (min-width: 768px) { .ct-plans { grid-template-columns: repeat(4, 1fr); } .ct-plans--3 { grid-template-columns: repeat(3, 1fr); } }

/* "which plan" arrows list */
.ct-arrows { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1rem; }
.ct-arrows li { display: flex; gap: 1rem; align-items: baseline; font-size: 0.8125rem; color: var(--c-text-2); }
.ct-arrows li::before { content: "\2192"; color: var(--c-text-3); flex-shrink: 0; }
.ct-arrows strong { color: var(--color-ink); font-weight: 600; }

/* ---------- tool cards ---------- */
.ct-tools { display: grid; gap: 1rem; }
.ct-tool { display: flex; flex-direction: column; gap: 1.5rem; padding: 2.5rem; border-radius: var(--radius-xl); background: #fff; border: 1px solid var(--c-line); }
.ct-tool--featured { background: var(--c-forest); border-color: var(--c-forest); box-shadow: 0 20px 25px -5px rgba(30, 45, 34, 0.2), 0 8px 10px -6px rgba(30, 45, 34, 0.2); }
.ct-tool__top { display: flex; align-items: flex-start; justify-content: space-between; }
.ct-tool__num { font-family: var(--font-display); font-size: 3.5rem; font-weight: 600; line-height: 1; color: var(--c-ghost); user-select: none; }
.ct-tool--featured .ct-tool__num { color: var(--c-forest-3); }
.ct-tool__badge { font-size: 0.625rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-sage-light); border: 1px solid rgba(74, 110, 82, 0.5); padding: 0.25rem 0.625rem; border-radius: var(--radius-pill); }
.ct-tool__body { flex: 1; }
.ct-tool h2 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; line-height: 1.375; margin: 0; color: var(--color-ink); }
.ct-tool--featured h2 { color: var(--c-cream); }
.ct-tool p { margin: 0.5rem 0 0; font-size: 0.8125rem; color: var(--c-text-5); line-height: 1.625; }
.ct-tool--featured p { color: var(--c-sage-dim); }
.ct-tool__link { font-size: 0.8125rem; font-weight: 500; color: var(--c-sage); text-decoration: none; transition: color 0.2s; }
.ct-tool__link:hover { color: var(--c-forest); }
.ct-tool--featured .ct-tool__link { color: var(--c-sage-light); }
.ct-tool--featured .ct-tool__link:hover { color: var(--c-sage-pale); }
@media (min-width: 768px) { .ct-tools { grid-template-columns: 1fr 1fr; } }

/* small link row (bottom of pricing/about) */
.ct-links { display: flex; flex-wrap: wrap; gap: 1.5rem; font-size: 0.75rem; }
.ct-links a { color: var(--c-text-3); text-decoration: none; transition: color 0.2s; }
.ct-links a:hover { color: var(--color-ink); }

/* ---------- blog list (home.html) ---------- */
.post-cards { display: block; margin: 0; }
.post-card { background: transparent; border: none; border-bottom: 1px solid var(--c-line); border-radius: 0; padding: 2.5rem 0; display: grid; gap: 1rem; }
.post-card__date { text-transform: none; letter-spacing: 0.025em; font-size: 0.6875rem; font-weight: 400; color: var(--c-text-3); padding-top: 0.25rem; }
.post-card__title { font-family: var(--font-display); font-size: 1.375rem; font-weight: 600; line-height: 1.375; }
.post-card__title a:hover { color: var(--c-sage); }
.post-card__excerpt { font-size: 0.8125rem; color: var(--c-text-5); }
.post-card__excerpt .wp-block-post-excerpt__more-link { font-size: 0.75rem; font-weight: 500; color: var(--c-sage); margin-top: 1rem; }
.post-meta { text-transform: none; letter-spacing: 0.025em; font-size: 0.6875rem; font-weight: 400; color: var(--c-text-3); }
@media (min-width: 768px) { .post-card { grid-template-columns: 160px 1fr; gap: 1rem 3rem; } .post-card__excerpt { grid-column: 2; } }

/* ---------- footer ---------- */
.site-footer { background: var(--c-forest); color: var(--c-sage-dim); padding: 4rem 0 2.5rem; }
.site-footer__inner { gap: 4rem; }
.site-footer__logo { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; color: var(--c-cream); margin-bottom: 1rem; }
.site-footer__tagline { font-size: 0.75rem; color: var(--c-sage-dim); max-width: 24rem; line-height: 1.625; }
.site-footer__nav { display: block; }
.site-footer__links { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.625rem 3rem; }
.site-footer__links a { font-size: 0.75rem; color: var(--c-sage-dim); text-decoration: none; transition: color 0.2s; }
.site-footer__links a:hover { color: var(--c-sage-light); }
.site-footer__legal { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 0.6875rem; color: var(--c-sage-deep); }
.site-footer__legal a { color: var(--c-sage-dim); text-decoration: none; }
.site-footer__legal a:hover { color: var(--c-sage-light); }
@media (min-width: 768px) { .site-footer__inner { grid-template-columns: 1fr auto; } }