/* ═════════════════════════════════════════════════════════════════
   CONSULTKIT — STYLESHEET
   ─────────────────────────────────────────────────────────────────
   Everything trainerkit.co needs, in one file. Colour, type scale,
   header, footer, buttons. Change a value, save, upload this one file.

   THIS FILE REPLACES leadfrog.co/brand.css AND leadfrog.co/shared.css.

   Those are the agency's stylesheets and ConsultKit was a guest in them.
   That meant a product being sold to trainers fetched its CSS from the
   marketing site at page load — so any agency redesign, domain move or
   outage on leadfrog.co changed or broke a paying customer's pages.
   It also meant brand.css's own type ladder (17px, 15px, 11px eyebrows,
   clamp 44–88 heroes, 16px card radius) sat underneath every page,
   which is where the drift kept coming from.

   ConsultKit used seven classes out of shared.css's five hundred lines.
   They're reproduced below, retuned to this scale.

   Pages using this file:
     index.html · setup.html · confirmed.html · contact.html
     disclaimer.html · install-guide.html · follow-up-templates.html
     objection-handbook.html
   ═════════════════════════════════════════════════════════════════ */

/* Reset — was in shared.css. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {

  /* ── BACKGROUNDS ─────────────────────────────────────────────
     --bg          the page itself
     --surface     cards, form fields, the pricing box
     --surface-alt alternating bands (every other section)
     --footer-bg   the footer strip
     ──────────────────────────────────────────────────────────── */
  --bg:           #1b211c;
  --surface:      #1e2620;
  --surface-alt:  #192019;
  --footer-bg:    #151c16;


  /* ── TEXT ────────────────────────────────────────────────────
     --white   headlines and anything that needs to shout
     --body    paragraph copy. Green, and deliberately so — it's what
               makes the page feel like ConsultKit rather than a
               generic dark template.
                 var(--muted)  #7a9c7e  current      5.4:1
                 #b9c4ba                lighter      9.1:1
                 #c7d0c5                lighter still 10.3:1
               The lighter values read more easily over long
               paragraphs but wash the colour out of the page.
     --muted   CHROME ONLY — header tagline, footer, print bar, captions.
               Never for prose in the reading column. It and --body were
               both being used for secondary copy (.card-sub and .sub in
               muted, .tip p and table cells in body), which is what made
               the pages look like they had too many text colours. Four
               in the reading column now, each with one job: --white for
               headings and emphasis, --body for all prose, --accent for
               action and value (links, ticks, numerals, the price), amber
               for warnings. Eyebrows and field labels are --muted — they
               signpost rather than ask.
     ──────────────────────────────────────────────────────────── */
  /* #eaf2eb sits on hue 126 — the same axis as --body and --muted.
     The old #edf2eb was at hue 103, which read faintly warm against
     the cooler body copy on large headlines. Same lightness either way. */
  --white:  #eaf2eb;
  --body:   #b9c4ba;
  --muted:  #7a9c7e;


  /* ── GREENS ──────────────────────────────────────────────────
     --accent        eyebrows, labels, ticks, the price, links
     --accent-light  hover states, the brighter option for headlines
     --accent-dark   email buttons (used in the Kit sequences too)
     ──────────────────────────────────────────────────────────── */
  --accent:        #6dc85a;
  --accent-light:  #8edc7a;
  --accent-dark:   #4fa83c;


  /* ── HEADLINE EMPHASIS ───────────────────────────────────────
     The second half of every big headline — the "THEN NOTHING."
     part. Green by default.
       var(--accent)        #6dc85a  green (current)
       var(--accent-light)  #8edc7a  brighter green, better at size
       #edf2eb   off-white — same as body headings, reads calm
       #ffffff   pure white — most contrast, slightly clinical
       #dbe3d8   dimmer off-white — lets the first half lead
     ──────────────────────────────────────────────────────────── */
  --h-em: var(--accent);


  /* ── INLINE EMPHASIS ─────────────────────────────────────────
     Single words picked out mid-sentence — "on YOUR pricing",
     "they didn't SEE anything".
     White against the green body copy — the contrast is what makes
     them read as emphasis. If you ever lighten --body, switch these
     to the accent instead or they'll disappear.
       var(--white)         #edf2eb  white (current) — lifts cleanly
                                     off the green body copy
       #ffffff              pure white, a touch brighter
       var(--accent)        #6dc85a  green — only works if body
                                     copy is a light neutral
     ──────────────────────────────────────────────────────────── */
  --emph: var(--white);


  /* ── BUTTONS ─────────────────────────────────────────────────
     --cta-bg / --cta-color          resting state
     --cta-bg-hover / -color-hover   on hover
     ──────────────────────────────────────────────────────────── */
  --cta-bg:           #3a7a2e;
  --cta-color:        #edf2eb;
  --cta-bg-hover:     #6dc85a;
  --cta-color-hover:  #1b211c;


  /* ── SECONDARY BUTTON ────────────────────────────────────────
     The outline buttons — "Try the live demo", "Read the details
     first". These inherit --accent from shared.css, which is the
     brightest green on the page. As an outline button that's all
     edge and text with nothing to soften it, so it ends up louder
     than the solid primary button beside it.

       var(--accent-dark)  #4fa83c  current — same family, calmer   5.5:1
       var(--accent)       #6dc85a  the original, brightest          8.0:1
       var(--body)                  neutral — clearly secondary      9.2:1
       var(--muted)                 quietest, nearly a text link

     Hover still fills with the full accent either way, so it comes
     alive on contact.
     ──────────────────────────────────────────────────────────── */
  --btn2-text:   var(--cta-bg);
  --btn2-border: var(--cta-bg);


  /* ── LINES & EDGES ───────────────────────────────────────────
     Card borders, dividers, the rule beside the price. Raise the
     last number for more definition, lower it to soften.
     ──────────────────────────────────────────────────────────── */
  --border:         rgba(100,200,90,0.18);
  --border-soft:    rgba(100,200,90,0.09);   /* row dividers inside cards */
  --header-bg:      rgba(27,33,28,0.92);
  --header-border:  rgba(100,200,90,0.15);

  /* The one non-green. "AVOID" labels and anything that has to read as
     a warning without shouting. */
  --rust:           #c9564f;


  /* ── TYPOGRAPHY ──────────────────────────────────────────────
     Changing these means also updating the Google Fonts link in
     the <head> of each page.
     ──────────────────────────────────────────────────────────── */
  /* TWO FACES ONLY. Bebas Neue for display, Open Sans Condensed for
     everything else. DM Sans is not used anywhere on the site — it was
     the third face that made pages look like they came from different
     projects, and it's been removed from the font link too.
     --font-body is kept as a name because several rules reference it,
     but it resolves to the same condensed face as --font-condensed. */
  --font-display:    'Bebas Neue', sans-serif;
  --font-condensed:  'Open Sans', sans-serif;
  --font-body:       var(--font-condensed);
}


/* ══════════════════════════════════════════════════════════════════
   Applies the tokens above. Loads after shared.css, so these win.
   ══════════════════════════════════════════════════════════════════ */

/* COLUMN WIDTH
   shared.css sets the header to 1100px, wider than any ConsultKit column, so
   the logo sat left of where the page content starts.

   The sales page runs at 1000px; every other page is 900px.

   NOTE: each page ALSO pins its own header width in its own <style> block,
   because that block loads last and works even if this file hasn't been
   re-uploaded. If you change a width, change it in the page too — the page
   wins. This rule is the fallback for any new page that doesn't set one. */
.site-header-inner{ max-width: 900px; }
body[data-width="1000"] .site-header-inner{ max-width: 1000px; }

/* FOOTER
   24px top and bottom around 32px social icons = 80px tall. */
.ck-footer{ padding: 24px 0; }
.btn-secondary{ color: var(--btn2-text); border-color: var(--btn2-border); }
.btn-secondary:hover{ color: var(--bg); border-color: var(--accent); }


/* ═════════════════════════════════════════════════════════════════
   TYPE SCALE — one size per job. Don't introduce new ones.

   This used to be a comment in index.html, which meant it only governed
   index.html. It's rules now, so every page that loads this file gets it
   and a new page can't quietly drift.

     12px   letterspaced caps — eyebrows, list labels, pills, captions
     14px   fine print — footer, small print under buttons, table heads
     17px   body copy — paragraphs, list items, FAQ answers, inputs
     20px   lede paragraphs, the pull quote, and buttons

   Body copy moved 16 → 17. Open Sans Condensed at 16 reads about like
   regular Open Sans at 15: same x-height, narrower widths and counters,
   so you lose legibility per size point. The scale was inherited from a
   normal-width assumption.
   The lede moved 19 → 20 to hold the gap. At 19 over 17 body it was only
   1.12x, and on a document page size is the only thing separating them —
   both use --body — so it would have read as an accident. 20 over 17 is
   1.18x, and 20 was already on the scale for buttons.
     22px   numerals — step numbers, MESSAGE 01, the $ on the price
     26px   h3, card and sub-section headings
     82px   the price
     clamp(34–72)  h1
     clamp(28–52)  h2

   Allowed to sit outside it, because each is one element doing one job:
   the 10px tick glyph, the 56px quote mark, the 30px exit-popup headline,
   and the 15px footer — see the FOOTER block for why that one earns it.

   THREE HEADING ROLES, one set of numbers:
     h2                  display headline on a marketing band (index)
     body.doc h2         section heading on a banded document — install
                         guide, follow-up templates, objection handbook.
                         Same clamp; the band supplies the spacing.
     body.doc.prose h2   section heading on an unbanded prose document —
                         the disclaimer. Caps at 34 instead of 52, and
                         carries its own top margin, because there's no
                         band edge to separate one section from the next.
   ═════════════════════════════════════════════════════════════════ */

/* Set on body so every element inherits the condensed face. Anything that
   doesn't name a family explicitly still comes out right. */
body { font-family: var(--font-condensed); font-stretch: condensed; }

/* WEIGHT — font-weight:400 is not optional here.
   Bebas Neue ships one weight. The browser's default stylesheet sets
   h1–h6 to bold, so without this reset the browser SYNTHESISES a bold:
   it smears each glyph sideways to fake a heavier face. That's why the
   headline on any page missing this reset looked thicker and slightly
   wider than the same headline on a page that had it.
   Same reason for strong/b: only 400 and 500 of Open Sans are loaded,
   so the default 700 gets faked. 500 is the real one. */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 400;
             font-stretch: normal; letter-spacing: .02em; margin: 0; }
strong, b { font-weight: 500; }

h1 { font-size: clamp(34px, 7vw, 72px); line-height: .92; letter-spacing: .01em; }
h2 { font-size: clamp(28px, 4vw, 52px); line-height: .92; margin-bottom: 14px; }
h3 { font-size: 26px; letter-spacing: .05em; line-height: 1.15; margin-bottom: 7px; }

/* The green half of a headline — "THEN NOTHING." */
h1 em, h2 em { font-style: normal; color: var(--h-em); display: block; }

/* WORDMARK — the KIT suffix a shade brighter than the rest of the name.
   Kept as a visual device rather than a spelling: the product is written
   ConsultKit everywhere, so nobody has to remember a capitalisation rule,
   but the suffix still reads as a family mark. IntakeKit and RenewKit use
   the same class, which is what will make the three look like a set on a
   pricing page. */
.kit { color: var(--accent-light); }

p { font-family: var(--font-condensed); font-stretch: condensed;
    font-size: 17px; line-height: 1.75; color: var(--body); margin: 0; }

.lede { font-size: 20px; line-height: 1.7; margin-top: 18px; }
.fine { font-size: 14px; color: var(--muted); line-height: 1.7; }

/* EYEBROW — accent line plus letterspaced caps above a headline. Every
   hero gets one; it's what makes a page read as part of the set before
   you've read a word of it. */
.eyebrow      { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
/* 1px, matching the band dividers and card edges — but one step up in
   opacity from --border (0.18), because length affects how present a line
   looks. A divider reads fine at 0.18 because it runs the full 900px; the
   same value on a 26px stub all but vanishes. 0.32 puts it back on par
   with the dividers optically rather than numerically.
   The eyebrow text is the signal; the line is punctuation. */
.eyebrow i    { width: 26px; height: 1px; flex-shrink: 0; display: block;
                background: color-mix(in srgb, var(--accent) 32%, transparent); }
/* Muted, not accent. An eyebrow is a signpost — it tells you where you
   are, it isn't asking you to do anything. Accent is reserved for things
   that indicate action or value: links, ticks, numerals, the price. At
   full green on every hero and every band, the eyebrows were spending
   that colour on navigation. */
.eyebrow span { font-family: var(--font-condensed); font-stretch: condensed;
                font-size: 12px; letter-spacing: .3em; text-transform: uppercase;
                color: var(--muted); }

/* DOCUMENT PAGES — anything with body class="doc".
   Long-form reading, 900px column, nothing being sold. */
/* Document headings take the full h2 clamp, same as the sales page. On the
   banded guides each one opens a substantial chunk of content and has the
   room to carry it.
   No underline: the alternating bands separate sections now, so a rule as
   well was two devices doing one job. */
body.doc h2 { font-size: clamp(28px, 4vw, 52px); line-height: 1.02;
              letter-spacing: .03em; color: var(--white); margin: 0 0 18px; }

/* PROSE DOCUMENTS — body class="doc prose". The disclaimer, and anything
   else that's short prose sections with no bands, no cards and no h3s.
   With nothing between the hero and the first heading, and only two or
   three paragraphs under each, 52px competes with the headline instead of
   sitting under it. 34 is already on the scale (step numbers, the $ on the
   price), so this is a smaller rung rather than a new size. */
body.doc.prose h2 { font-size: clamp(28px, 4vw, 34px); line-height: 1.05;
                    margin: 50px 0 16px; }
body.doc.prose h2:first-child { margin-top: 0; }
body.doc .lede { color: var(--body); max-width: 660px; }

/* BANDS — the alternating-section rhythm from index.html, available to
   every page so a long document can be broken into readable chunks. */
.band { padding: 50px 0; border-top: 1px solid var(--border); }
.band.alt { background: var(--surface-alt); }
.band > .wrap, .band > .w { max-width: 900px; margin: 0 auto; padding: 0 24px; }

/* ══════════════════════════════════════════════════════════════════
   SECTION EDGES — 50px means 50px.

   Two different things were making the gaps uneven, and they need
   different fixes.

   ONE: BOX SPACE. A section is padded 50px, but whatever sits at its top
   or bottom brings its own margin or padding and that stacks on. Measured
   on the live page: a section ending in .intro-box ran 20px over — its
   margin-bottom — and one ending in a .device ran 17px over: 6px of its
   own padding plus 11px from the last step row. So everything at a
   section's edge gives up its own spacing. !important on purpose: these
   are deliberately unarguable, because a page-level rule quietly
   outranking one of them is invisible until you measure it.

   TWO: OPTICAL SPACE. Even at identical padding, a section starting with
   a 52px Bebas h2 measured 50 while the hero ending in body text measured
   60. Bebas sits its capitals almost flush with the top of its line box.
   Open Sans leaves roughly 9px of leading above its capitals at 17-20px,
   and about the same below the baseline for descenders. Same padding,
   different visible gap.

   So a section that starts or ends with body text gets 9px trimmed on
   that side, putting the visible text where a heading's would sit.
   :has() does the picking, so no page needs a new class.
   ══════════════════════════════════════════════════════════════════ */

/* ── ONE: box space ────────────────────────────────────────────── */

.band > .wrap > :first-child, .band > .w > :first-child,
.cover > .wrap > :first-child, .ck-hero > .w > :first-child,
section.body-sec > .wrap > :first-child,
.contact-section > :first-child, .faq-wrap > :first-child {
  margin-top: 0 !important; }

.band > .wrap > :last-child, .band > .w > :last-child,
.cover > .wrap > :last-child, .ck-hero > .w > :last-child,
section.body-sec > .wrap > :last-child,
.contact-section > :last-child, .faq-wrap > :last-child {
  margin-bottom: 0 !important; }

/* Containers that space themselves with padding rather than margin.

   The :not() list is the point of this rule. Zeroing padding on ANY last
   child also hits filled boxes — the pricing card on index sits directly
   at the end of its band, so the blanket version stripped its internal
   padding and left the Stripe line flush against the bottom edge.

   A box with a background or a border owns its padding; it isn't section
   spacing. Anything of that kind that can end a section belongs here. */
.band > .wrap > :last-child:not(.price):not(.form-card):not(.founder-card):not(.info-card),
.band > .w   > :last-child:not(.price):not(.form-card):not(.founder-card):not(.info-card),
section.body-sec > .wrap > :last-child:not(.price):not(.form-card)
  { padding-bottom: 0 !important; }

.band > .wrap > :last-child ol.steps li:last-child,
section.body-sec > .wrap > :last-child ol.steps li:last-child {
  padding-bottom: 0 !important; border-bottom: none !important; }

/* A table ending a section leaves cell padding AND a hairline under its
   final row. The selector has to reach every cell in that row — targeting
   td:last-child would clear the right-hand cell and leave the left one
   still underlined. */
.band > .wrap > table:last-child tr:last-child td,
section.body-sec > .wrap > table:last-child tr:last-child td {
  padding-bottom: 0 !important; border-bottom: none !important; }

/* The last thing inside whatever ends the section. */
.band > .wrap > :last-child > :last-child,
section.body-sec > .wrap > :last-child > :last-child {
  margin-bottom: 0 !important; }

/* ── TWO: optical space ────────────────────────────────────────── */

.band:has(> .wrap > p:first-child),
.band:has(> .wrap > .intro-box:first-child),
.band:has(> .wrap > .tip:first-child) { padding-top: 41px; }

.band:has(> .wrap > p:last-child),
.band:has(> .wrap > .intro-box:last-child),
.band:has(> .wrap > .tip:last-child),
.band:has(> .wrap > .warn:last-child),
.band:has(> .wrap > .device:last-child),
.band:has(> .wrap > .card:last-child) { padding-bottom: 41px; }

.cover, .ck-hero { padding-bottom: 41px; }   /* both end in a .lede */


/* PRINTED LINKS — the guides are meant to be printed and followed on a
   second screen, and on paper "the setup page" is a dead end. Reveal the
   address after any absolute link so the reader can type it.
   Only http(s) links: attr(href) prints the raw value, so a relative one
   would come out as "(setup)", which helps nobody. If a link in body copy
   needs to survive printing, write it absolute. */
@media print {
  .band a[href^="http"]::after,
  .body-sec a[href^="http"]::after { content: " (" attr(href) ")";
    font-size: 13px; color: #555; word-break: break-all; }
  .site-header a::after, .ck-footer a::after { content: none; }
}

/* CORNERS — 6px on cards and inputs, so a new page can't arrive at 12
   or 20 by feel. */
.card, .form-card, .info-card, .form-input, .form-select, .form-textarea,
.device, .tip, .intro-box, details { border-radius: 6px; }


/* ═════════════════════════════════════════════════════════════════
   HEADER — the seven classes ConsultKit used from shared.css.
   Sizes and corners brought onto this scale: buttons are 20px (were 24
   and 18), corners are 6px (were 8 and 4).
   ═════════════════════════════════════════════════════════════════ */

.site-header { position: fixed; top: 0; width: 100%; z-index: 150;
  background: var(--header-bg); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--header-border); transition: background .3s; }
.site-header-inner { display: flex; align-items: center; justify-content: space-between;
  max-width: 900px; margin: 0 auto; padding: 0 24px; height: 110px; gap: 24px; }
body[data-width="1000"] .site-header-inner { max-width: 1000px; }

.header-logo { display: flex; align-items: center; gap: 10px; text-decoration: none;
  flex-shrink: 0; transition: opacity .2s; }
.header-logo:hover { opacity: .6; }
.header-logo-img { height: 100px; width: auto; display: block; }
@media (max-width: 768px) { .header-logo-img { height: 80px; } }

.header-tagline { font-family: var(--font-condensed); font-stretch: condensed;
  font-size: 14px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap; }
@media (max-width: 620px) { .header-tagline { display: none; } }

/* BUTTONS — 20px, the one button size. */
.btn-primary, .btn-secondary, .header-cta {
  display: inline-block; font-family: var(--font-display); font-size: 20px;
  letter-spacing: .08em; padding: 14px 30px; border-radius: 6px;
  text-decoration: none; line-height: 1; cursor: pointer;
  border: 1px solid transparent;   /* matches .btn-secondary so heights line up */
  transition: background .2s, color .2s, border-color .2s, transform .15s; }

.btn-primary { background: var(--cta-bg); color: var(--cta-color); }
.btn-primary:hover { background: var(--cta-bg-hover); color: var(--cta-color-hover);
  transform: translateY(-2px); animation: wiggle .4s ease; }

/* Outline button. Same green as the solid one — the accent was too loud
   on something that's all edge and text. */
.btn-secondary { background: transparent; box-shadow: none; text-shadow: none;
  color: var(--btn2-text); border-color: var(--btn2-border); }
.btn-secondary:hover { background: var(--cta-bg); color: var(--cta-color);
  border-color: var(--cta-bg); transform: translateY(-1px); }

.header-cta { background: var(--cta-bg); color: var(--cta-color);
  font-size: 20px; padding: 10px 24px; letter-spacing: .1em; }
.header-cta:hover { background: var(--cta-bg-hover); color: var(--cta-color-hover);
  animation: wiggle .4s ease; }

@keyframes wiggle {
  0%,100%{transform:rotate(0deg)} 20%{transform:rotate(-3deg)}
  40%{transform:rotate(3deg)} 60%{transform:rotate(-2deg)} 80%{transform:rotate(2deg)}
}

/* ═════════════════════════════════════════════════════════════════
   FOOTER — 24px top and bottom around 32px social icons = 80px tall.
   ═════════════════════════════════════════════════════════════════ */

.ck-footer { background: var(--footer-bg); border-top: 1px solid var(--border); padding: 24px 0; }
.ck-footer-in { max-width: 900px; margin: 0 auto; padding: 0 24px; display: flex;
  align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
/* --muted, and it should stay muted. The footer is chrome: a copyright line,
   three icons and two links nobody came here for. Tried --body to make it
   more legible and it started competing with the page — at 9.7:1 against a
   dark background it reads as content rather than as a footer.
   5.7:1 still clears WCAG AA comfortably, so this is a design floor, not an
   accessibility one.

   Size is 15px, and that is DELIBERATELY OFF THE SCALE — the only exception
   in the file. 14 read small once the copyright line grew into a sentence
   with a link in it; 17 made the footer compete with the page. The footer is
   the one place needing something between fine print and body copy, and
   there is no rung there. Leave it at 15; don't "correct" it to 14.

   Colour is doing the receding, size is doing the legibility. If it ever
   feels too present again, drop the size rather than dimming the colour. */
/* .ck-footer-links is in this list because the · between Disclaimer and
   Contact is a bare text node in that div, not inside either <a> — so it
   matched nothing here and inherited the page's white, sitting brighter than
   the links it separates. */
.ck-footer-in p, .ck-footer-in a, .ck-footer-links { font-family: var(--font-condensed);
  font-stretch: condensed; font-size: 15px; color: var(--muted); text-decoration: none; }
.ck-footer-in a:hover { color: var(--accent); }
.ck-social { display: inline-flex; align-items: center; gap: 9px; }
.ck-social a { display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border: 1px solid var(--border); border-radius: 7px;
  color: var(--muted); transition: color .2s, border-color .2s; }
.ck-social a:hover { color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.ck-social svg { width: 16px; height: 16px; display: block; }
.ck-footer-links { white-space: nowrap; }
@media (max-width: 700px) {
  .ck-footer-in { flex-direction: column; align-items: center; text-align: center; gap: 18px; }
}

/* ── Header logo ──────────────────────────────────────────────
   The mark is an inline SVG rather than an image file: it inherits
   currentColor from .header-logo, so it recolours with the theme,
   stays sharp at any size, and costs no extra request.
   TrainerKit's glyph is three full-width equal bars — the other three
   kits each show three bars doing something partial (staggered,
   descending, ascending), so "nothing incomplete" is the one that
   reads as the whole set.
   ------------------------------------------------------------- */
.header-logo{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:var(--cta-bg)}
.header-logo:hover{color:var(--accent-dark)}
.header-logo-mark{width:51px;height:51px;display:block;flex:none}
.header-logo-word{font-family:var(--font-display);font-size:27px;letter-spacing:.06em;line-height:1;color:var(--white)}
.header-logo-word .kit{color:var(--accent);transition:color .2s}
.header-logo:hover .kit{color:var(--accent-light)}
@media(max-width:520px){.header-logo-word{display:none}}