/* Generated file - do not edit.
 * Source: Appearance > Customize > Additional CSS.
 * Rewritten by fontrova_perf_write_site_css() whenever that panel is saved.
 */
/* ==========================================================================
   FONTROVA - Minimalist Modern (structural layer)
   Colour and type are NOT defined here. Every token below aliases the
   --fds-* design tokens owned by Elementor Global Variables (Site Settings >
   Variables); this sheet only carries layout, structure and the measured
   accessibility corrections. The retired "Cobalt Ink" values were replaced
   in place rather than deleted, because these rules are the only styling for
   the header, footer, generator and the sections the Fontrova Brand
   mu-plugin injects into every tool page.
   Order: tokens > base > header > hero > tool > sections > footer > pages > responsive
   Spacing scale: 4 8 12 16 24 32 48 64 88
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS (aliases)
   Light is the default, matching the Minimalist Modern direction. The --fds-*
   tokens resolve light-first and swap themselves for dark via [data-theme] or
   the OS preference, so the two modes cannot drift apart. Every surface colour
   in this file still comes from a token - the tokens simply point somewhere
   new now.
   -------------------------------------------------------------------------- */
:root{
  /* Cobalt Ink is retired. These legacy names are kept as thin aliases onto the
     Minimalist Modern tokens (--fds-*, owned by Elementor Global Variables), so
     every rule below - header, generator, sections, footer, and the measured
     WCAG corrections further down - adopts the new palette without being
     rewritten. Change values in Site Settings > Variables, not here. */
  --bg:var(--fds-bg);
  --bg-alt:var(--fds-muted);
  --surface:var(--fds-card);
  --surface-2:var(--fds-muted);
  --ink:var(--fds-foreground);
  --ink-muted:var(--fds-muted-foreground);
  --accent:var(--fds-accent);
  --accent-soft:var(--fds-accent-tint);
  --accent-hover:#0043D6;
  --border:var(--fds-border);
  --border-strong:var(--fds-accent-line);
  --shadow-sm:var(--fds-shadow-sm);
  --shadow-md:var(--fds-shadow-md);
  --shadow-lg:var(--fds-shadow-lg);

  /* --ink-faint keeps its documented role as the placeholder/disabled tone -
     one step lighter than --ink-muted, never used for informational text. It is
     the one colour with no --fds-* counterpart, so it carries its own pair. */
  --ink-faint:#94A3B8;
  --success:#16A34A;

  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:88px;
  --wrap:1200px;
  --ease:var(--fds-ease);

  /* Elementor global colour bridge (footer widgets read these). */
  --e-global-color-primary:var(--accent-text);
  --e-global-color-secondary:var(--surface);
  --e-global-color-text:var(--ink);
  --e-global-color-accent:var(--accent);
}

/* Light is the default now. --fds-* already resolves light-first and swaps
   itself for dark, so only the two tokens that cannot alias need a dark pair. */
:root[data-theme="dark"]{
  --ink-faint:#64748B;
  --success:#22C55E;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink-faint:#64748B;
    --success:#22C55E;
  }
}
/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
html{background:var(--bg);overflow-x:clip;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--fds-stack-body);
  font-size:16px;
  line-height:1.6;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
/* Calistoga is a single-weight display face and is capped at h1/h2; below that
   it turns muddy. Everything smaller takes Inter at 600. */
h1,h2{
  font-family:var(--fds-stack-heading);
  font-weight:400;
  letter-spacing:-.02em;
  line-height:1.12;
  color:var(--ink);
}
h3,h4,h5,h6,.elementor-heading-title{
  font-family:var(--fds-stack-body);
  font-weight:600;
  letter-spacing:-.01em;
  line-height:1.25;
  color:var(--ink);
}
a{color:var(--accent);text-decoration:none;}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px;}

/* Astra's default content wrapper is too narrow and adds its own padding; the
   sections below manage their own width so it is neutralised once here. */
.ast-container,.site-content .ast-container{max-width:100%;padding-inline:0;}
.ast-page-builder-template .site-content .ast-container{padding:0;}
#content.site-content{padding-block:0;}
.entry-content > *{margin-block-start:0;}

/* --------------------------------------------------------------------------
   3. HEADER
   Rendered and styled by Fontrova UI Fix (includes/header.php +
   assets/css/fontrova-header.css). Nothing here.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   4. HERO
   Compact and tool-first: the generator must be reachable without scrolling.
   -------------------------------------------------------------------------- */
body.fontrova-tool-page .entry-header{
  position:relative;
  max-width:760px;margin-inline:auto;
  padding:var(--s7) var(--s5) 0;
  text-align:center;
}
body.fontrova-tool-page .entry-title{
  font-size:clamp(30px,4.6vw,46px);
  line-height:1.08;letter-spacing:-.028em;
  margin:0;color:var(--ink);
}
.fontrova-hero{
  max-width:640px;margin-inline:auto;
  padding:var(--s3) var(--s5) 0;
  text-align:center;
}
.fh-sub{
  font-size:17px;line-height:1.55;color:var(--ink-muted);
  margin:0 auto var(--s4);max-width:520px;
}
.fh-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s2);margin:0;}
.fh-badge{
  font-size:12.5px;font-weight:600;line-height:1;
  padding:7px 13px;border-radius:var(--r-pill);
  border:1px solid var(--border);background:var(--surface);color:var(--ink-muted);
}

/* Soft cobalt glow behind the hero, dark mode only. */
body.fontrova-tool-page .entry-header::before{
  content:'';position:absolute;left:50%;top:-40px;
  width:min(900px,120vw);height:420px;transform:translateX(-50%);
  background:radial-gradient(ellipse 60% 55% at 50% 0%, rgba(46,75,255,.16) 0%, transparent 62%);
  pointer-events:none;z-index:-1;
}
:root[data-theme="light"] body.fontrova-tool-page .entry-header::before{
  background:radial-gradient(ellipse 60% 55% at 50% 0%, rgba(46,75,255,.09) 0%, transparent 62%);
}
/* --------------------------------------------------------------------------
   5. GENERATOR
   The tool ships its own scoped --fr-* variables. Rather than restyling every
   internal rule, those variables are remapped onto the site tokens, so the
   generator inherits the theme automatically and can never fall out of sync.
   -------------------------------------------------------------------------- */
.fr{
  --fr-bg:var(--surface);
  --fr-surface:var(--surface-2);
  --fr-surface-alt:var(--surface-2);
  --fr-border:var(--border);
  --fr-border-strong:var(--border-strong);
  --fr-text:var(--ink);
  --fr-text-muted:var(--ink-muted);
  --fr-text-faint:var(--ink-faint);
  --fr-accent:var(--accent);
  --fr-accent-2:var(--fds-accent-secondary);
  --fr-accent-hover:var(--accent-hover);
  --fr-accent-text:#FFFFFF;
  --fr-success:var(--success);
  --fr-focus:var(--accent);
  --fr-radius-card:var(--r-md);
  --fr-radius-input:var(--r-sm);
  --fr-shadow-card:var(--shadow-md);

  max-width:760px;
  margin:var(--s6) auto 0;
  /* One gutter for the card, so the sticky panel can bleed to its edge. */
  padding:var(--fds-gutter,20px);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
}

/* The tool prints its own H2 and description; the hero above already says it. */
body.fontrova-tool-page .fr .fr-title,
body.fontrova-tool-page .fr .fr-desc{display:none;}

/* Sticky control panel sits on the panel ground, under the sticky header. */
.fr .fr-panel{background:var(--surface);inset-block-start:var(--fr-sticky-offset,64px);padding-block:var(--s3);}
.fr .fr-panel.is-stuck{border-block-end-color:var(--border);box-shadow:0 8px 20px -16px rgba(0,4,20,.6);}

.fr .fr-input,.fr .fr-tag,.fr .fr-search{
  border-radius:var(--r-sm);font-size:16.5px;font-weight:600;
  background:var(--surface-2);border:1px solid var(--border);color:var(--ink);
}
.fr .fr-input{min-block-size:3.5rem;line-height:1.4;}
.fr .fr-input:focus,.fr .fr-tag:focus,.fr .fr-search:focus{
  border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);
}
.fr .fr-input::placeholder{color:var(--ink-faint);font-weight:500;}
.fr .fr-label{font-size:13px;font-weight:600;color:var(--ink-muted);}

.fr .fr-chip{font-weight:600;font-size:12.5px;border-color:var(--border);color:var(--ink-muted);background:transparent;}
.fr .fr-chip:hover{color:var(--ink);border-color:var(--border-strong);}
.fr .fr-chip.is-on{
  background:var(--accent);border-color:var(--accent);color:#fff;
  box-shadow:0 2px 10px rgba(46,75,255,.30);
}

.fr .fr-card{
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease),transform .15s var(--ease);
}
.fr .fr-card:hover,.fr .fr-card:focus-within{
  border-color:var(--accent);box-shadow:0 6px 20px rgba(46,75,255,.16);
}
.fr .fr-out,.fr .fr-grid{color:var(--ink);}
/* Derived from --ink at reduced opacity: on --ink-muted these labels measured
   4.34:1 against the row surface in light mode, just under AA. */
.fr .fr-name{font-size:12.5px;font-weight:600;color:var(--ink);opacity:.8;}
.fr .fr-copy{
  background:var(--accent);border-color:var(--accent);color:#fff;
  font-weight:700;border-radius:var(--r-pill);
}
.fr .fr-copy:hover{background:var(--accent-hover);border-color:var(--accent-hover);filter:none;}
.fr .fr-copy.is-done{background:var(--success);border-color:var(--success);}
.fr .fr-fav:hover,.fr .fr-fav[aria-pressed="true"]{color:var(--accent);}
.fr .fr-more{border-radius:var(--r-pill);border-color:var(--border);color:var(--ink);background:var(--surface-2);font-weight:600;}
.fr .fr-more:hover{border-color:var(--accent);color:var(--accent);}

/* The engine's own related-tools nav (nav.fr-related, 4 links) duplicates the
   "Other tools" card row rendered by Fontrova UI Fix (includes/cards.php). Hidden
   here, not in Fontrova Core. */
.fr .fr-related,nav.fr-related{display:none;}

/* --------------------------------------------------------------------------
   6. SECTIONS
   One shared rhythm and one shared heading treatment for every band.
   -------------------------------------------------------------------------- */
.fontrova-tools,.fontrova-hiw,.fontrova-why,.fontrova-article,.fontrova-faq,.fontrova-cta{
  max-width:var(--wrap);margin-inline:auto;padding-inline:var(--s5);
}
.fontrova-tools,.fontrova-hiw,.fontrova-why,.fontrova-article,.fontrova-faq{margin-block-start:var(--s9);}
.fontrova-tools h2,.fontrova-hiw h2,.fontrova-why h2,.fontrova-faq h2,.fontrova-cta h2,.fontrova-article h2{
  font-size:clamp(23px,2.9vw,32px);letter-spacing:-.022em;margin:0 0 var(--s3);text-align:center;
}
.ftg-sub{font-size:15.5px;color:var(--ink-muted);text-align:center;margin:0 auto var(--s7);max-width:520px;}

/* 6a. Twelve tools, grouped by cluster */
.ftg-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s6);
  border-top:1px solid var(--border);padding-top:var(--s6);
}
.ftg-label{
  display:block;font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:var(--s3);
}
.ftg-link{
  display:block;font-size:14.5px;font-weight:500;color:var(--ink-muted);
  padding:7px 0;transition:color .15s var(--ease);
}
.ftg-link:hover{color:var(--accent);}
.ftg-link.is-current{color:var(--ink);font-weight:700;}

/* 6b. Three steps */
.fontrova-hiw h2{margin-bottom:var(--s7);}
.hiw-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s6);max-width:900px;margin-inline:auto;}
.hiw-step{text-align:center;display:flex;flex-direction:column;align-items:center;}
.hiw-badge{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  background:var(--accent);color:#fff;
  font-family:var(--fds-stack-body);font-size:17px;font-weight:600;
  margin-bottom:var(--s4);
}
.hiw-step h3{font-size:16.5px;margin:0 0 var(--s2);}
.hiw-step p{font-size:14px;line-height:1.6;color:var(--ink-muted);margin:0;max-width:240px;}

/* 6c. Why Fontrova */
.fontrova-why h2{margin-bottom:var(--s7);}
.why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4);max-width:900px;margin-inline:auto;}
.why-item{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
  padding:var(--s5);transition:border-color .15s var(--ease),transform .15s var(--ease);
}
.why-item:hover{border-color:var(--accent);transform:translateY(-2px);}
.why-item h3{font-size:16px;margin:0 0 var(--s1);}
.why-item p{font-size:14px;line-height:1.6;color:var(--ink-muted);margin:0;}

/* 6d. Explainer prose */
.fontrova-article{max-width:760px;}
.fontrova-article h2{text-align:left;margin-bottom:var(--s5);}
.fontrova-article-body p{font-size:15.5px;line-height:1.75;color:var(--ink-muted);margin:0 0 var(--s4);max-width:66ch;}
.fontrova-article-body a{color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:2px;}

/* 6e. FAQ */
.fontrova-faq{max-width:760px;}
.fontrova-faq h2{margin-bottom:var(--s6);}
.fq-list{display:flex;flex-direction:column;gap:var(--s2);}
.fq-item{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-md);overflow:hidden;transition:border-color .15s var(--ease);
}
.fq-item.is-open{border-color:var(--accent);}
.fq-question{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:17px var(--s5);background:none;border:0;cursor:pointer;
  font-family:var(--fds-stack-body);font-size:15px;font-weight:600;
  color:var(--ink);text-align:left;line-height:1.45;
}
.fq-item.is-open .fq-question{color:var(--accent);}
.fq-question svg{flex-shrink:0;width:18px;height:18px;color:var(--ink-faint);transition:transform .2s var(--ease);}
.fq-item.is-open .fq-question svg{transform:rotate(180deg);color:var(--accent);}
.fq-answer{max-height:0;overflow:hidden;transition:max-height .28s var(--ease);}
.fq-item.is-open .fq-answer{max-height:420px;}
.fq-answer p{margin:0;padding:0 var(--s5) 18px;font-size:14.5px;line-height:1.7;color:var(--ink-muted);}

/* 6f. Closing CTA */
.fontrova-cta{
  position:relative;overflow:hidden;text-align:center;
  margin:var(--s9) auto 0;padding:var(--s9) var(--s5);
  background:var(--bg-alt);border-top:1px solid var(--border);
  max-width:none;
}
.fontrova-cta h2{margin-bottom:var(--s3);}
.fontrova-cta-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 var(--s6);border-radius:var(--r-pill);
  background:var(--accent);color:#fff;
  font-family:var(--fds-stack-body);font-size:15px;font-weight:600;
  transition:background-color .15s var(--ease),transform .15s var(--ease);
}
.fontrova-cta-btn:hover{background:var(--accent-hover);transform:translateY(-1px);color:#fff;}

/* --------------------------------------------------------------------------
   8. UTILITY PAGES (About, Contact, legal, Guides)
   -------------------------------------------------------------------------- */
body.page:not(.fontrova-tool-page) .entry-header{
  max-width:760px;margin-inline:auto;padding:var(--s8) var(--s5) 0;text-align:left;
}
body.page:not(.fontrova-tool-page) .entry-title{
  font-size:clamp(28px,3.6vw,40px);letter-spacing:-.025em;text-align:left;margin:0;
}
body.page:not(.fontrova-tool-page):not(.fds-utility-page) .entry-content,
body.blog .entry-content,body.archive .entry-content{
  max-width:760px;margin-inline:auto;padding:var(--s5) var(--s5) var(--s9);
  color:var(--ink-muted);font-size:16.5px;line-height:1.75;
}
body.page:not(.fontrova-tool-page):not(.fds-utility-page) .entry-content h2:not([class*="fds-"]){
  color:var(--ink);font-size:21px;margin:var(--s7) 0 var(--s3);
}
body.page:not(.fontrova-tool-page):not(.fds-utility-page) .entry-content h2:first-child{margin-top:0;}
body.page:not(.fontrova-tool-page):not(.fds-utility-page) .entry-content p:not([class*="fds-"]){margin:0 0 var(--s4);}
/* Design-system components inside .entry-content own their own colour and
   spacing. Without these exclusions the prose rules below repaint them: the
   link rule turned the CTA button's label accent-blue on an accent-blue
   gradient, which was effectively invisible. Prose styling still applies to
   everything that is actually prose. */
body.page:not(.fontrova-tool-page):not(.fds-utility-page) .entry-content :is(p, li, .is-style-lead, blockquote) a{color:var(--accent-text);text-decoration:underline;text-underline-offset:2px;}
body.page:not(.fontrova-tool-page):not(.fds-utility-page) .entry-content .is-style-lead{font-size:18px;color:var(--ink);margin-bottom:var(--s5);}
body.page:not(.fontrova-tool-page):not(.fds-utility-page) .entry-content ul:not([class*="fds-"]){margin:0 0 var(--s4) var(--s5);}
body.page:not(.fontrova-tool-page):not(.fds-utility-page) .entry-content li:not([class*="fds-"]){margin-bottom:var(--s2);}

.fontrova-mission-list{list-style:none;margin:var(--s5) 0 !important;padding:0;display:flex;flex-direction:column;gap:var(--s3);}
.fontrova-mission-list li{position:relative;padding-left:22px;color:var(--ink-muted);}
.fontrova-mission-list li::before{content:'';position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:50%;background:var(--accent);}
.fontrova-stats-row{display:flex;flex-wrap:wrap;gap:var(--s7);margin-top:var(--s6);padding-top:var(--s6);border-top:1px solid var(--border);}
.fs-num{font-family:var(--fds-stack-heading);font-size:32px;font-weight:400;color:var(--ink);line-height:1;}
.fs-label{font-size:13.5px;color:var(--ink-muted);margin-top:6px;}

/* Contact Form 7 */
.wpcf7-form-control-wrap{display:block;margin-bottom:var(--s5);}
.wpcf7 input[type=text],.wpcf7 input[type=email],.wpcf7 textarea{
  width:100%;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:13px 15px;color:var(--ink);
  font-family:var(--fds-stack-body);font-size:15.5px;
}
.wpcf7 textarea{min-height:150px;resize:vertical;}
.wpcf7 input:focus,.wpcf7 textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.wpcf7-submit{
  background:var(--accent);color:#fff;border:0;border-radius:var(--r-pill);
  padding:14px var(--s6);font-family:var(--fds-stack-body);font-weight:600;font-size:15px;
  cursor:pointer;min-height:48px;transition:background-color .15s var(--ease);
}
.wpcf7-submit:hover{background:var(--accent-hover);}
.wpcf7-response-output{border-radius:var(--r-sm);border-color:var(--border);color:var(--ink-muted);margin-top:var(--s4);}

/* --------------------------------------------------------------------------
   9. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width:1023px){
  .fr .fr-panel{inset-block-start:var(--fr-sticky-offset,58px);}
}
@media (max-width:860px){
  .ftg-grid{grid-template-columns:1fr 1fr;gap:var(--s5);}
  .hiw-steps{grid-template-columns:1fr;gap:var(--s6);}
  .hiw-step p{max-width:420px;}
}
@media (max-width:768px){
  .fontrova-tools,.fontrova-hiw,.fontrova-why,.fontrova-article,.fontrova-faq{margin-block-start:var(--s8);}
  .fontrova-cta{margin-block-start:var(--s8);padding-block:var(--s8);}
  .ftg-sub{margin-bottom:var(--s6);}
  body.fontrova-tool-page .entry-header{padding-top:var(--s6);}
  .why-grid{grid-template-columns:1fr;}
}
@media (max-width:600px){
  :root{--s9:56px;--s8:44px;--s7:32px;}
  body.fontrova-tool-page .entry-header{padding-inline:var(--s4);}
  .fontrova-hero{padding-inline:var(--s4);}
  .fh-sub{font-size:16px;}
  .fr{margin-top:var(--s5);padding:var(--fds-gutter,16px);border-radius:var(--r-md);}
  .fontrova-tools,.fontrova-hiw,.fontrova-why,.fontrova-article,.fontrova-faq,.fontrova-cta{padding-inline:var(--s4);}
  .fq-question{padding:15px var(--s4);font-size:14.5px;}
  .fq-answer p{padding:0 var(--s4) 16px;}
  .fontrova-stats-row{gap:var(--s5);}
}
@media (max-width:520px){
  .ftg-grid{grid-template-columns:1fr;gap:var(--s5);padding-top:var(--s5);}
}
@media (max-width:400px){
  .fh-badge{font-size:12px;padding:6px 11px;}
}

/* --------------------------------------------------------------------------
   10. MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
}
/* --------------------------------------------------------------------------
   11. OVERRIDES THAT MUST OUT-SPECIFY THE THEME
   Astra applies `.entry-content[data-ast-blocks-layout] > *{max-width:...}`,
   which is more specific than a bare class and was stretching the generator
   and every section to the theme's content width. These selectors match that
   specificity so the intended widths hold.
   -------------------------------------------------------------------------- */
.entry-content > .fr,
.entry-content[data-ast-blocks-layout] > .fr{max-width:760px;width:100%;margin-inline:auto;}

.entry-content > .fontrova-tools,
.entry-content > .fontrova-hiw,
.entry-content > .fontrova-why,
.entry-content > .fontrova-faq,
.entry-content[data-ast-blocks-layout] > .fontrova-tools,
.entry-content[data-ast-blocks-layout] > .fontrova-hiw,
.entry-content[data-ast-blocks-layout] > .fontrova-why,
.entry-content[data-ast-blocks-layout] > .fontrova-faq{max-width:1200px;width:100%;margin-inline:auto;}

.entry-content > .fontrova-article,
.entry-content[data-ast-blocks-layout] > .fontrova-article{max-width:760px;width:100%;margin-inline:auto;}

.entry-content > .fontrova-hero,
.entry-content[data-ast-blocks-layout] > .fontrova-hero{max-width:640px;width:100%;margin-inline:auto;}

/* Full-bleed closing band. */
.entry-content > .fontrova-cta,
.entry-content[data-ast-blocks-layout] > .fontrova-cta{max-width:none;width:auto;}
@media (max-width:1023px){
  .fr .fr-panel{inset-block-start:var(--fr-sticky-offset,60px);}
}
.fr .fr-panel{inset-block-start:var(--fr-sticky-offset,68px);}

/* --------------------------------------------------------------------------
   FIX - page background must follow the theme token (Bug #1).

   Astra ships `.ast-plain-container,.ast-page-builder-template{background:var(--ast-global-color-4)}`
   (#FFFFFF) at specificity (0,1,0). The `body{background:var(--bg)}` rule above
   is only (0,0,1), so Astra won on specificity regardless of source order and
   the page background stayed white in BOTH themes. In dark mode that put
   --ink (#F5F6FA) on white - 1.08:1 contrast, effectively invisible - which is
   what was misreported as an intermittent H1 'theme race'. It is not a race:
   it is deterministic, and it affects the whole page background, not just h1.

   Qualifying the same class with `body` gives (0,1,1), which beats Astra
   cleanly without !important and without redefining Astra's own token
   (--ast-global-color-4 is left alone; it is still used for genuinely-white
   surfaces such as button label text).
   -------------------------------------------------------------------------- */
body.ast-plain-container,
body.ast-page-builder-template{
  background-color:var(--bg);
}

/* --------------------------------------------------------------------------
   Sticky filter bar - one source of truth for the offset (Bug #3).

   The panel offset was hardcoded per breakpoint (64/58/60/68px) while the
   theme header is position:sticky at a height the browser knows exactly.
   fontrova.js measures that header itself and compares the panel's real top
   against its own measurement; because the CSS used a different, hardcoded
   number, the two disagreed and the plugin logged 'the filter bar does not
   appear to be sticking' on every page - a false alarm, since sticky was in
   fact working (verified: panel top clamps exactly at its offset at every
   scroll position).

   fontrova-ui-fix pins --fr-sticky-offset to 0px on .fr to make the plugin's
   own writes inert. That rule cannot be deleted from here, so it is
   superseded by re-pointing the same custom property at --fr-header-offset,
   which fontrova-ux.js writes from the live header height on load, resize and
   orientation change. CSS and JS now derive the offset from the same number.
   -------------------------------------------------------------------------- */
.fr{--fr-sticky-offset:var(--fr-header-offset,64px);}

/* Guides hub heading (posts index has no page H1 of its own). */
.fontrova-archive-header{max-width:var(--wrap,1200px);margin:0 auto var(--s6,32px);padding-inline:var(--s5,24px);}
.fontrova-archive-header .entry-title{font-family:var(--fds-stack-heading);font-weight:400;font-size:clamp(28px,3.6vw,40px);line-height:1.1;letter-spacing:-.025em;color:var(--ink);margin:0 0 var(--s2,8px);}
.fontrova-archive-standfirst{color:var(--ink);opacity:.75;font-size:17px;margin:0;max-width:62ch;}

/* --------------------------------------------------------------------------
   WCAG AA contrast corrections (Lighthouse color-contrast, measured).

   Four separate causes, all fixed at the token level rather than per element:

   1. .fontrova-tools h2 carried a hardcoded rgb(30,41,59) instead of a token.
      Fine on light, 1.31:1 on dark - effectively invisible. Any colour that is
      not a token will drift out of one mode sooner or later; this is that.

   2. --ink-faint (#6E7180 dark / #8A8DA0 light) is a placeholder/disabled
      token. It was being used for real informational text - the sample note,
      the style counter, the tool-grid labels - where it measured 3.0-4.0:1
      against a 4.5:1 requirement at those sizes. Those move to --ink-muted,
      which measures 5.5-7.2:1. --ink-faint keeps its intended role.

   3. The filter-overflow toggle used the accent as label colour: 3.01:1 on the
      dark surface. The border and chevron already signal that it is a control,
      so the label takes --ink-muted and the accent stays as the hover cue.
   -------------------------------------------------------------------------- */
.fontrova-tools h2{color:var(--ink);}

.fr .fr-samplenote, .fr .fr-count, .fr .fr-limit, .fontrova-tools .ftg-label{color:var(--ink-muted);}

.fr .fr-chip-toggle{color:var(--ink-muted);}
.fr .fr-chip-toggle:hover{color:var(--ink);border-color:var(--accent);}
.fr .fr-chip-toggle svg{color:var(--accent);}

/* --------------------------------------------------------------------------
   Content headings must follow the theme token (same root cause as the page
   background fix above).

   Astra emits `h1..h6, .entry-content :where(h1..h6) { color: var(--ast-global-color-2) }`
   (#1e293b). The `.entry-content` part gives that branch specificity (0,1,0),
   which outranks this stylesheet's bare `h1..h6 { color: var(--ink) }` at
   (0,0,1). Result: every heading inside post content kept Astra's slate colour
   in BOTH modes - readable on light, 1.2-1.3:1 on dark, i.e. invisible. It only
   showed on sections that do not set their own colour, which is why it survived
   earlier review.

   Two changes, both systemic rather than per-section:

   1. Match Astra's own selector shape and specificity so the token wins. `:where()`
      contributes zero specificity, so individual components can still override
      with a plain class - this raises the floor without locking anything.

   2. Point Astra's own text tokens at the theme tokens, so Astra-rendered text
      outside .entry-content follows dark/light too instead of drifting back to
      slate. Background token (--ast-global-color-4) is deliberately left alone;
      it is handled by the body rule above and is still correct for genuinely
      white surfaces.
   -------------------------------------------------------------------------- */
.entry-content :where(h1, h2, h3, h4, h5, h6){
  color:var(--ink);
}

/* Astra re-asserts `font-weight:600` on the same `.entry-content :where(h1)`
   shape, and on the page title. Calistoga ships a single 400 weight, so an
   inherited 600 makes the browser synthesise a fake bold - visibly smeared on a
   display serif. These match Astra's own selector shape so the real weight wins
   without !important, and they re-declare the family at the same time so the
   pairing holds inside post content too. */
.entry-content :where(h1, h2),
header.entry-header .entry-title,
h1.entry-title{
  font-family:var(--fds-stack-heading);
  font-weight:400;
  letter-spacing:-.02em;
}

.entry-content :where(h3, h4, h5, h6){
  font-family:var(--fds-stack-body);
  font-weight:600;
  letter-spacing:-.01em;
}

:root{
  --ast-global-color-2:var(--ink);
  --ast-global-color-3:var(--ink);
}

/* --------------------------------------------------------------------------
   --accent-text: the accent when it IS the text colour.

   #2E4BFF is calibrated as a FILL (white on cobalt measures 5.89:1 and passes).
   As text on a dark surface it measures 3.25:1 on --bg and 3.01:1 on --surface,
   against a 4.5:1 requirement - so accent-coloured links and headings failed on
   dark while looking fine on light.

   The design system already anticipated exactly this for light mode, where it
   defines a deepened cobalt for accent-as-text. It had no dark-mode counterpart.
   This adds one, reusing the lighter cobalt already in the brand's own logo
   gradient (#5B7CFF) rather than inventing a colour: measured 4.87:1 on
   --surface and 5.27:1 on --bg. One accent family, still no second brand hue.

   Fills are untouched - buttons and active chips keep #2E4BFF with white text.
   -------------------------------------------------------------------------- */
:root{ --accent-text:var(--fds-accent); }
:root[data-theme="dark"]{ --accent-text:var(--fds-accent-secondary); }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --accent-text:var(--fds-accent-secondary); }
}

.fontrova-article-body a,
.entry-content p a,
.fr-related-list a{ color:var(--accent-text); }

/* Elementor renders headings as
   `.elementor-widget-heading .elementor-heading-title{color:var(--e-global-color-primary)}`.
   Pointing that global token at --accent-text (rather than overriding the rule
   with higher specificity or !important) means Elementor-built headings inherit
   the accessible accent automatically in both modes, and the footer template
   stays editable from the Elementor panel with no surprise CSS fighting it. */

/* --------------------------------------------------------------------------
   Elementor global colours -> theme tokens.

   Elementor's kit writes `.elementor-kit-6{--e-global-color-*:...}` and that
   class sits on <body>, so it shadows the same custom properties declared on
   :root for every descendant no matter the source order. Redeclaring them on
   `body` (same element, this stylesheet loads later) is what actually wins.

   Two things this fixes:
     - Footer headings resolved to #2E4BFF as text on --surface: 3.01:1, failing.
       They now follow --accent-text.
     - --e-global-color-text was pinned to #F5F6FA, a dark-mode-only value. The
       footer's text-editor widgets would have rendered near-white on a white
       surface in light mode. Now follows --ink.

   Everything stays editable in Elementor; only what the tokens resolve to moves.
   -------------------------------------------------------------------------- */
body[class*="elementor-kit"]{
  --e-global-color-primary:var(--accent-text);
  --e-global-color-text:var(--ink);
  --e-global-color-secondary:var(--surface);
  --e-global-color-accent:var(--accent);
  --e-global-color-cobalt:var(--accent);
  --e-global-color-ink:var(--bg);
  --e-global-color-surface:var(--surface);
  --e-global-color-muted:var(--ink-muted);
  --e-global-color-border:var(--border);
}

/* --------------------------------------------------------------------------
   Skip link. Astra leaves it clipped even while focused, so the first thing a
   keyboard user reaches is invisible. Reveal it on focus on an opaque surface,
   so it always has contrast regardless of what it lands over.
   -------------------------------------------------------------------------- */
.skip-link:focus,
.skip-link:focus-visible{
  position:fixed;top:12px;left:12px;z-index:100000;
  clip:auto;clip-path:none;width:auto;height:auto;
  padding:12px 20px;border-radius:var(--r-md);
  background:var(--surface);color:var(--accent-text);
  box-shadow:var(--shadow-lg);outline:2px solid var(--accent);outline-offset:2px;
  font-size:15px;font-weight:600;text-decoration:none;
}

/* --------------------------------------------------------------------------
   Theme toggle.

   The markup ships both a sun and a moon; previously both were painted at once
   inside a 34px circle, which read as an unfinished placeholder rather than a
   control. Only one is shown now (the mode you would switch TO), and the pair
   cross-fades and rotates between states.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Header CTA.

   As a flex child of the nav row the button stretched to the row's full 80px
   while the header bar is only 68px, so it bled past both edges of the bar and
   read as clipped between roughly 1024px and 1366px. Pinning it to its own
   height and centring it keeps it inside the bar at every width.
   -------------------------------------------------------------------------- */

/* Between the mega-menu appearing and full desktop width the row is tight, so
   the nav and CTA give back a little padding rather than overflowing. */

/* --------------------------------------------------------------------------
   Tool filter bar.

   The chip row is the most-used control on the site and was the plainest thing
   on the page. Chips now match the button system: pill, hairline, lift on
   hover, and the signature gradient when active.
   -------------------------------------------------------------------------- */

/* The panel is sticky, so it keeps its ground. It does not keep its frame:
     a bordered, rounded panel inside the bordered, rounded .fr card read as
     two nested cards 13px apart. It now bleeds to the card's padding edge and
     shows a hairline only once it sticks. */
.fr .fr-panel{
  border:0;
  border-block-end:1px solid transparent;
  /* One pixel inside the card's 16px radius, so the bar stays tucked within
     the card outline when it sticks. */
  border-radius:15px 15px 0 0;
  /* Fully opaque. It was 88% with a 10px backdrop blur, so every result row
     scrolled underneath it as a visible ghost and the whole bar read as
     smeared instead of solid. */
  background:var(--surface);
  /* Inline padding matches the card gutter so the input and the chip row sit
     on the same line as the result rows below them. */
  padding:14px var(--fds-gutter,20px);
}
.fr .fr-panel.is-stuck{
  box-shadow:0 10px 28px rgba(15,23,42,.10);
  border-color:var(--border-strong);
}

.fr .fr-chip{
  display:inline-flex;align-items:center;gap:7px;
  min-height:38px;padding:0 16px;
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  background:var(--surface);
  font-family:var(--fds-stack-body);
  font-size:13.5px;font-weight:500;
  color:var(--ink-muted);
  white-space:nowrap;cursor:pointer;
  transition:color .16s var(--ease),border-color .16s var(--ease),
             background-color .16s var(--ease),transform .16s var(--ease),
             box-shadow .16s var(--ease);
}
.fr .fr-chip:hover{
  color:var(--ink);border-color:var(--border-strong);
  transform:translateY(-1px);
}
.fr .fr-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* Active chip carries the signature gradient, like a primary button. */
.fr .fr-chip.is-on{
  border-color:transparent;
  background:var(--fds-gradient);
  color:#fff;font-weight:600;
  box-shadow:0 4px 14px rgba(0,82,255,.28);
}
.fr .fr-chip.is-on:hover{color:#fff;transform:translateY(-1px);filter:brightness(1.06);}

/* Search and the overflow toggle sit in the same family. */
.fr .fr-search,
.fr .fr-chip-toggle{
  min-height:38px;border-radius:var(--r-pill);
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--ink-muted);
  font-family:var(--fds-stack-body);font-size:13.5px;
  transition:border-color .16s var(--ease),color .16s var(--ease),box-shadow .16s var(--ease);
}
.fr .fr-search:focus,
.fr .fr-search:focus-visible{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);color:var(--ink);
}
.fr .fr-chip-toggle:hover{color:var(--ink);border-color:var(--border-strong);}
.fr .fr-chip-toggle svg{transition:transform .2s var(--ease);}

.fr .fr-input{border-radius:var(--r-md);}
.fr .fr-input:focus{box-shadow:0 0 0 3px var(--accent-soft);}

@media (prefers-reduced-motion: reduce){
  .fr .fr-chip{transition:none;}
  .fr .fr-chip:hover,
.fr .fr-chip.is-on:hover{transform:none;}
}

/* The overflow toggle sits at the end of the scrolling chip row; without a
   nowrap it broke onto two lines and clipped the last visible chip behind it. */
.fr .fr-chip-toggle{white-space:nowrap;padding:0 14px;gap:6px;}
.fr .fr-chip-toggle span{white-space:nowrap;}

/* ==========================================================================
   MOBILE QA PASS
   ========================================================================== */

/* --------------------------------------------------------------------------
   Mobile header structure.

   Astra sizes .ast-builder-grid-row to its content and centres it, so at 375px
   the row was 276px wide with 50px of dead space either side and the logo,
   wordmark, hamburger and toggle all bunched in the middle. Making the row
   full width with a 1fr/auto split puts the brand left and the controls right,
   which is what a header should do.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Drawer CTA contrast.

   `.fds-drawer a` (0,1,1) outranked `.fds-drawer-cta` (0,1,0), so the button
   label inherited the muted link colour and sat grey-on-blue.
   -------------------------------------------------------------------------- */
.fds-utility-cta a.fds-drawer-cta{color:#fff;font-weight:600;}
.fds-utility-cta a.fds-drawer-cta:hover{color:#fff;}

/* --------------------------------------------------------------------------
   Expanded style filters.

   `.fr-filterrow` is nowrap, so when `.fr-chips` switched to wrap it was
   squeezed to 76px between the search button and the toggle and stacked into a
   tall single column. Letting the row wrap gives the expanded chips the full
   width they need to lay out as a proper grid of pills.
   -------------------------------------------------------------------------- */

.fr .fr-chips.is-expanded{
  flex:1 1 100%;
  flex-wrap:wrap;
  gap:8px;
  max-height:none;
  overflow:visible;
  flex-basis:100%;
  padding-top:2px;
}
.fr .fr-chips.is-expanded .fr-chip{flex:0 0 auto;}
.fr .fr-chip-toggle[aria-expanded="true"] svg{transform:rotate(180deg);}

/* --------------------------------------------------------------------------
   Hero.

   The badge wrapped to two lines at 390px and the gap between the subtext and
   the tool was larger than the hero itself. Tighter, and the measure is capped
   so the subtext breaks in a considered place.
   -------------------------------------------------------------------------- */
.fds-section-tight .fds-display{margin-block:2px 0;}
.fds-section-tight .fds-lead{max-width:52ch;}

@media (max-width:600px){
  .fds-section-label{padding:7px 14px;gap:9px;}
  .fds-section-label-text{font-size:12px;letter-spacing:.1em;}
  .fds-section-tight .fds-lead{font-size:15.5px;line-height:1.6;max-width:44ch;}
}

/* The hero badge is a pill; a two-line pill reads as a wrapping accident. */
.fds-section-label{white-space:nowrap;}
.fds-section-label-text{white-space:nowrap;}
@media (max-width:430px){
  .fds-section-tight .fds-section-label{padding:6px 12px;gap:8px;}
  .fds-section-tight .fds-section-label-text{font-size:12px;letter-spacing:.08em;}
  .fds-section-tight .fds-section-label-dot{width:6px;height:6px;min-width:6px;}
}

/* Expanded filters: search and the toggle stay paired on the first line, the
   chip grid takes the line beneath them. */

.fr .fr-chips.is-expanded{order:1;}

/* The tool carried a 32px top margin on top of the hero's own padding, which
   read as a hole between the subtext and the generator. */
.fr{margin-top:var(--s4);}
@media (max-width:767px){
  .fr{margin-top:var(--s3);}
}

/* The generator still carried a hardcoded Cobalt ink (#12131A) for its own
   text token, so tool copy sat one shade off the rest of the page. Pin it to
   the site tokens so there is a single ink everywhere. */
:root .fr, [data-theme] .fr{--fr-text:var(--ink);--fr-text-muted:var(--ink-muted);}

/* --------------------------------------------------------------------------
   Blog and archive templates.

   Pages use .ast-plain-container, which the body rule above already covers,
   but the blog and archive use .ast-separate-container - a class selector that
   outranks `body`. In dark mode that left /guides/ with Astra's light ground
   (#F0F5FA) under light text: a 1:1 contrast ratio, i.e. invisible.

   Re-pointing Astra's own background token is cleaner than out-specifying
   every rule that reads it, and it keeps the separate-container card surfaces
   following the theme too.
   -------------------------------------------------------------------------- */
:root{--ast-global-color-5:var(--bg);}
body.ast-separate-container{background-color:var(--bg);}
body.ast-separate-container .site-content .ast-article-post,
body.ast-separate-container .site-content .ast-article-single,
body.ast-separate-container .ast-archive-description,
body.ast-separate-container .comment-respond,
body.ast-separate-container .ast-comment-list li{
  background-color:var(--surface);
  color:var(--ink);
  border-color:var(--border);
}

/* The tool was centred inside a left-aligned hero, so its left edge related to
   nothing. Sharing the hero's left edge makes the pairing read as deliberate;
   the panel keeps its own comfortable max-width rather than stretching. */
@media (min-width:1000px){
  .fr{margin-inline:0;} /* the tool shares the hero's left edge */
}

/* ==========================================================================
   QA PASS 3 - mobile card layout, affordance, focus, interior pages
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tool cards on narrow screens.

   The four-up social cluster dropped to two columns on mobile, which left the
   descriptions about 150px wide and breaking one or two words per line. One
   column below 560px; two only once there is room to read.
   -------------------------------------------------------------------------- */
@media (max-width:559px){
  .elementor .fds-grid-4,
  .elementor .fds-grid-2,
  .elementor .fds-grid-3{grid-template-columns:minmax(0,1fr);}
}
@media (min-width:560px) and (max-width:767px){
  .elementor .fds-grid-4{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* Descriptions should never hyphenate or break mid-word. */
.fds-has-ico .fds-body-text,
.fds-has-ico .fds-heading{overflow-wrap:break-word;hyphens:none;text-wrap:pretty;}

/* --------------------------------------------------------------------------
   Card affordance.

   The arrow is now always present at low emphasis, so a touch user can see the
   card leads somewhere; hover/focus brings it to full strength and nudges it.
   The whole card also lifts, which reads as one interactive object.
   -------------------------------------------------------------------------- */
.elementor a.fds-tool-card{text-decoration:none;}
.elementor a.fds-tool-card:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}
.fds-has-ico .fds-heading::after{
  transition:opacity .2s var(--ease),transform .2s var(--ease);
}
.fds-has-ico:hover .fds-heading::after,
.fds-has-ico:focus-visible .fds-heading::after{
  opacity:1;
  transform:translateX(3px);
}

/* --------------------------------------------------------------------------
   Focus styles.

   Astra ships a dotted UA-style outline on the menu toggle, which looked like
   a rendering artefact. Keyboard focus stays clearly visible, just drawn in
   the design system's own language.
   -------------------------------------------------------------------------- */

/* Same treatment everywhere else a focus ring can appear. */
.fr .fr-chip:focus,
.fr .fr-copy:focus,
.fr .fr-fav:focus,
.fds-faq summary:focus{outline:none;}
.fr .fr-chip:focus-visible,
.fr .fr-copy:focus-visible,
.fr .fr-fav:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* --------------------------------------------------------------------------
   Interior pages: the same rhythm and hierarchy as the homepage.
   -------------------------------------------------------------------------- */
body.page:not(.fontrova-tool-page):not(.fds-utility-page) .entry-content{
  max-width:720px;
  padding:var(--s5) var(--s5) var(--s7);
  font-size:16px;line-height:1.72;
}
body.page:not(.fontrova-tool-page):not(.fds-utility-page) .entry-content h2{
  font-family:var(--fds-stack-heading);
  font-weight:400;font-size:1.55rem;line-height:1.25;
  letter-spacing:-.02em;
  margin:var(--s6) 0 var(--s3);
}
body.page:not(.fontrova-tool-page):not(.fds-utility-page) .entry-content h3{
  font-size:1.0625rem;font-weight:600;letter-spacing:-.01em;
  margin:var(--s5) 0 var(--s2);color:var(--ink);
}
body.page:not(.fontrova-tool-page):not(.fds-utility-page) .entry-content p{margin:0 0 var(--s3);}
body.page:not(.fontrova-tool-page):not(.fds-utility-page) .entry-content ul{margin:0 0 var(--s3) var(--s4);}
body.page:not(.fontrova-tool-page):not(.fds-utility-page) .entry-content li{margin-bottom:6px;}
body.page:not(.fontrova-tool-page):not(.fds-utility-page) .entry-content .is-style-lead{
  font-size:17.5px;line-height:1.62;color:var(--ink);margin-bottom:var(--s4);
}
.fds-utility-title{margin:8px 0 18px;}
.fds-utility-cta{margin-top:var(--s6);padding:22px;}

@media (max-width:767px){
  body.page:not(.fontrova-tool-page):not(.fds-utility-page) .entry-content{padding:var(--s4) var(--s4) var(--s6);font-size:15.5px;}
  body.page:not(.fontrova-tool-page):not(.fds-utility-page) .entry-content h2{margin-top:var(--s5);font-size:1.4rem;}
  .fds-utility-cta{padding:18px;margin-top:var(--s5);}
}

/* Guides archive header matches the same scale. */
.fontrova-archive-header{padding-block:var(--s6) 0;}
.fontrova-archive-header .entry-title{font-size:clamp(1.85rem,4.5vw,2.6rem);letter-spacing:-.02em;}
.fontrova-archive-standfirst{font-size:16.5px;line-height:1.65;max-width:58ch;}

/* ==========================================================================
   FOOTER
   Rendered by Fontrova UI Fix (includes/footer.php + assets/css/fontrova-footer.css)
   since 1.13.0. The Elementor footer template (post 99) is disabled via the
   hfe_footer_enabled filter. The old rules that lived here are kept in the
   option fontrova_custom_css_bak_1_13_pre.
   ========================================================================== */
.site-below-footer-wrap,.footer-widget-area{display:none !important;}