/* ============================================================
   PRICKLED.AI COMPONENTS
   Requires prickled-tokens.css to be loaded first.
   Every class here is lifted from the live site, generalised.
   Class prefix is intentionally short and unnamespaced so it
   drops into a standalone HTML file without a build step.
   ============================================================ */

/* ---------- RESET + BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, figure, ul, ol { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-display);
  font-size: var(--t-body-lg);
  line-height: var(--lh-body);
  color: var(--body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--baltic);
  outline-offset: 2px;
}

.mono { font-family: var(--font-mono); }

/* Fraunces italic accent. One to three words. Never a sentence. */
em.fr, .fr {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
}

/* ---------- LAYOUT ---------- */
.wrap { max-width: var(--wrap-max); margin: 0 auto; padding: 0 var(--wrap-pad); }
.wrap--prose { max-width: var(--wrap-prose); }

.section {
  position: relative;
  padding: var(--section-y) 0;
  background: var(--white);
  border-top: 1px solid var(--border-warm);
  overflow: hidden;
}
.section > .wrap { position: relative; z-index: 2; }

@media (max-width: 860px) {
  .wrap { padding: 0 var(--wrap-pad-sm); }
  .section { padding: var(--section-y-sm) 0; }
}

/* ---------- MOTIF: TRI-COLOR RULE ----------
   3px. Hard stops at 62% and 82%. It is the brand's signature.
   Never blur it, never reorder it, never resize the stops. */
.tri { height: 3px; background: var(--tri-rule); }
.tri--thick { height: 5px; background: var(--tri-rule); }
.tri--spine {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--tri-rule-v);
}

/* ---------- MOTIF: GRID FIELD ----------
   Faint engineering grid. Always behind content, never above it. */
.grid-field {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: var(--grid-opacity);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
}
.grid-field--reversed {
  opacity: 1;
  background-image:
    linear-gradient(var(--grid-line-rev) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line-rev) 1px, transparent 1px);
  background-size: 54px 54px;
}

/* ---------- MOTIF: BANANA HIGHLIGHT ----------
   At most ONE per screen. Two competing highlights read as a mistake. */
.hl {
  background: var(--banana);
  color: var(--navy);
  padding: 0 .1em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
/* Underline variant. Sits under the baseline, does not box the word. */
.hl-under {
  background: linear-gradient(transparent 52%, var(--banana) 52% 92%, transparent 92%);
  padding: 0 3px;
  border-radius: 2px;
}

/* ---------- WORDMARK ----------
   Locked. Space Grotesk 600 at -.04em, ".ai" in Fraunces italic
   lowercase Cool Sky. The italic lives ONLY on ".ai", never on "led". */
.wm {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--ls-wordmark);
  color: var(--navy);
  line-height: .9;
  white-space: nowrap;
}
.wm .ai { color: var(--sky); }
.wm .ai em, .ai-serif {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: lowercase;
}

/* ---------- EYEBROW ----------
   Mono, uppercase, wide tracking, sky. Pink square as the tick. */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--sky);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}
.eyebrow i, .eyebrow .sq {
  width: 8px; height: 8px;
  background: var(--pink);
  display: inline-block;
  flex: none;
}
.eyebrow .n { color: var(--muted); }   /* the "01 / 06" counter */

/* ---------- HEADINGS ---------- */
.h1, .h2, .h3, .h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--ls-display);
  color: var(--navy);
}
.h1 { font-size: var(--t-h1); line-height: var(--lh-tight); max-width: 16ch; }
.h2 { font-size: var(--t-h2); line-height: var(--lh-tight); max-width: 15ch; }
.h3 { font-size: var(--t-h3); line-height: 1.06; max-width: 18ch; }
.h4 { font-size: var(--t-h4); line-height: 1.2; letter-spacing: -.02em; margin-bottom: 10px; }

.lede {
  font-weight: 500;
  font-size: var(--t-lede);
  line-height: 1.22;
  color: var(--body-dark);
  max-width: 24ch;
}
.intro { font-size: var(--t-intro); line-height: 1.62; color: var(--body); max-width: 52ch; }

/* Vertical rhythm. Set once here so no build has to guess a margin. */
.h1 + .lede, .h2 + .lede, .h3 + .lede { margin-top: var(--sp-5); }
.h1 + .intro, .h2 + .intro, .h3 + .intro,
.h1 + .prose, .h2 + .prose, .h3 + .prose,
.lede + .prose, .lede + .intro { margin-top: var(--sp-4); }
.h1 + .spec, .h2 + .spec, .h3 + .spec,
.h1 + .ladder, .h2 + .ladder, .h3 + .ladder,
.h1 + .ticks, .h2 + .ticks, .h3 + .ticks,
.prose + .ticks, .intro + .ticks { margin-top: var(--sp-6); }

.prose p { font-size: var(--t-body-lg); line-height: var(--lh-prose); color: var(--body); max-width: var(--measure); }
.prose p + p { margin-top: var(--sp-4); }
.prose b, .prose strong { color: var(--navy); font-weight: 600; }
.prose a { color: var(--baltic); border-bottom: 1px solid var(--border); }
.prose a:hover { color: var(--sky); border-bottom-color: var(--sky); }

/* ---------- BUTTONS ----------
   Square-ish (2px). Uppercase, mono-tracked, small.
   The ▸ is the house arrow. Do not swap it for → on buttons. */
.cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  padding: 15px 24px;
  border: 0;
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: var(--dur-hover);
}
.cta.arrow::after { content: "\25B8"; }

/* Primary. Baltic passes AA on white at 6.45:1 with white text. */
.cta--solid { background: var(--baltic); color: var(--white); }
.cta--solid:hover { background: var(--navy); color: var(--white); }

/* Sky button. Sky and white is 2.59:1 and FAILS.
   Navy text on sky is 5.87:1 and passes. Use navy. */
.cta--sky { background: var(--sky); color: var(--navy); }
.cta--sky:hover { background: var(--navy); color: var(--white); }

.cta--ghost { border: 1px solid #9CC6E6; color: var(--baltic); background: transparent; }
.cta--ghost:hover { background: var(--wash); }

.cta--block { width: 100%; justify-content: center; }

/* ---------- NAV ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--border-warm);
}
.nav .inner {
  max-width: var(--wrap-max); margin: 0 auto;
  padding: 0 var(--wrap-pad);
  height: 62px;
  display: flex; align-items: center; gap: var(--sp-6);
}
.nav .brand { font-size: 22px; display: flex; align-items: center; gap: 10px; }
.nav .brand .mark { width: 24px; height: 24px; display: block; }
.nav .links { display: flex; gap: 30px; margin-left: auto; align-items: center; }
.nav .links a {
  font-size: 11.5px; font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--baltic);
  transition: color var(--dur-hover);
}
.nav .links a:hover, .nav .links a[aria-current] { color: var(--navy); }
.nav .burger { display: none; flex-direction: column; gap: 4px; background: none; border: 0; cursor: pointer; padding: 8px; margin-left: auto; }
.nav .burger span { display: block; width: 22px; height: 2px; background: var(--navy); }

/* Flat-nav variant. The pages under /services/, /capabilities/, /solutions/,
   /tools/, /about/, /how-it-works/, /book/ and /who-its-for/ use <nav class="nav">
   with the links as DIRECT children and no .inner wrapper, so none of the flex
   layout above applied and every item stacked vertically. This lays that shape
   out without touching the .inner markup the other pages use. */
.nav:not(:has(.inner)){
  display:flex; align-items:center; gap:26px; flex-wrap:wrap;
  min-height:62px;
  padding:0 max(var(--wrap-pad), calc((100% - var(--wrap-max)) / 2));
}
.nav:not(:has(.inner))>a:not(.cta),
.nav:not(:has(.inner))>.navdrop>summary{
  font-size:14px; color:var(--body); text-decoration:none;
}
.nav:not(:has(.inner))>a:not(.cta):hover,
.nav:not(:has(.inner))>.navdrop>summary:hover{ color:var(--navy); }
.nav:not(:has(.inner))>a:first-child{ display:flex; align-items:center; }
.nav:not(:has(.inner))>.cta{ margin-left:auto; }
@media(max-width:900px){
  .nav:not(:has(.inner)){ gap:16px; padding:10px var(--wrap-pad-sm, 20px); }
  .nav:not(:has(.inner))>.cta{ margin-left:0; }
}

@media (max-width: 860px) {
  .nav .inner { padding: 0 20px; gap: 0; }
  .nav .burger { display: flex; }
  .nav .links {
    position: absolute; top: 62px; left: 0; right: 0;
    background: var(--white); border-bottom: 1px solid var(--border-warm);
    flex-direction: column; align-items: flex-start; gap: 0; padding: 0; display: none;
  }
  .nav .links.open { display: flex; }
  .nav .links a { width: 100%; padding: 15px 20px; border-bottom: 1px solid var(--dashed); }
}

/* ---------- SPEC CARD ----------
   The house "receipt". Mono label left, Space Grotesk value right,
   dashed separator between rows. Used for facts, prices, metadata. */
.spec { border: 1px solid var(--hairline); background: var(--white); }
.spec .r {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 13px 18px;
  border-bottom: 1px dashed var(--dashed);
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--label);
}
.spec .r:last-child { border-bottom: 0; }
.spec .r b {
  font-family: var(--font-display);
  color: var(--navy); font-weight: 600;
  font-size: var(--t-small); letter-spacing: -.01em; text-transform: none;
}
.spec .head {
  padding: 18px; color: var(--white); background: var(--navy);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--ls-label);
}
.spec .head i { width: 9px; height: 9px; background: var(--pink); display: inline-block; margin-right: 11px; vertical-align: middle; }

/* ---------- LADDER / CARD ROW ----------
   Cells share one outer border. No gaps, no shadows, no rounding. */
.ladder {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--border-warm);
  border-radius: var(--radius-frame);
  overflow: hidden;
}
.ladder .cell {
  position: relative;
  padding: 34px 30px 36px;
  border-right: 1px solid var(--border-warm);
  display: flex; flex-direction: column;
  background: var(--white);
  transition: background .2s;
}
.ladder .cell:last-child { border-right: 0; }
.ladder .cell:hover { background: var(--wash-card); }
.ladder .cell.feat { background: var(--wash-card); }
.ladder .no {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em;
  color: var(--sky); display: flex; justify-content: space-between; align-items: center;
}
.ladder .no i { width: 8px; height: 8px; background: var(--pink); display: inline-block; }
.ladder .tag {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--ls-button);
  text-transform: uppercase; color: var(--baltic); margin-top: 22px;
}
.ladder .price {
  font-family: var(--font-display); font-weight: 600;
  letter-spacing: var(--ls-display); font-size: 38px;
  color: var(--navy); margin: 20px 0 2px; line-height: 1;
}
.ladder .price small { font-size: var(--t-fine); font-weight: 500; color: var(--label); letter-spacing: 0; }
.ladder .badge {
  position: absolute; top: 0; right: 0;
  background: var(--sky); color: var(--navy);
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; padding: 6px 11px;
}

/* Square-bullet list. The house bullet is a 6px sky square, never a disc. */
.ticks { list-style: none; display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0; }
.ticks li { font-size: var(--t-fine); line-height: 1.4; color: var(--navy); padding-left: 16px; position: relative; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; background: var(--sky); }
.ticks li.key { font-weight: 600; }
.ticks li.key::before { background: var(--pink); }

@media (max-width: 860px) {
  .ladder { grid-template-columns: 1fr; }
  .ladder .cell { border-right: 0; border-bottom: 1px solid var(--border-warm); }
  .ladder .cell:last-child { border-bottom: 0; }
}

/* ---------- ARTICLE CARD (long-form pages only) ----------
   This is the ONE place a 16px radius is allowed. */
a.card {
  display: block; color: inherit; background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 30px 30px 26px; margin-bottom: 22px;
  position: relative; overflow: hidden;
  transition: transform .25s ease, border-color .25s, box-shadow .25s;
}
a.card:hover { transform: translateY(-3px); border-color: var(--sky); box-shadow: var(--shadow-card); }
a.card .meta {
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--baltic); font-weight: 600; margin-bottom: 12px;
}
a.card .meta time { color: var(--sky); }
a.card .more { color: var(--baltic); font-weight: 600; }
a.card .more::after { content: " \2192"; }

/* ---------- DARK PANEL ----------
   Full-bleed navy or pink. Reversed grid, white type. */
.panel-dark { background: var(--ink-panel); color: var(--white); position: relative; overflow: hidden; }
.panel-dark .eyebrow { color: var(--on-navy-sky); }
.panel-dark .h2, .panel-dark .h1 { color: var(--white); }
.panel-pink {
  background: linear-gradient(118deg, #FD3752 0%, #FD2643 46%, #F40223 100%);
  color: var(--white); position: relative; overflow: hidden;
}
.panel-pink .hl { background: var(--banana); color: var(--navy); }
.panel-pink .fr { color: var(--navy); }

/* ---------- FORM ---------- */
.form { background: var(--white); border: 1px solid var(--hairline); padding: 30px; box-shadow: var(--shadow-hero); }
.form .field { margin-bottom: var(--sp-4); }
.form label {
  display: block; font-family: var(--font-mono);
  font-size: var(--t-micro); letter-spacing: var(--ls-button);
  text-transform: uppercase; color: var(--baltic); margin-bottom: 8px;
}
.form input, .form select, .form textarea {
  width: 100%; border: 1px solid #D7E0E8; background: var(--white);
  padding: 12px 13px; font-family: var(--font-display);
  font-size: var(--t-small); color: var(--navy); border-radius: var(--radius-btn);
}
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--sky); }
.form textarea { resize: vertical; min-height: 88px; }

/* ---------- FAQ / DISCLOSURE ---------- */
.qa { border-top: 1px solid var(--divider); max-width: 820px; }
.qa details { border-bottom: 1px solid var(--divider); }
.qa summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 18px 0;
  font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--navy);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--baltic); }
.qa summary .ind { flex: none; width: 16px; text-align: center; color: var(--sky); font-family: var(--font-mono); font-size: 18px; line-height: 1; }
.qa summary .ind::before { content: '+'; }
.qa details[open] summary .ind::before { content: '\2212'; }
.qa .ans { padding: 0 0 20px; font-size: var(--t-body-lg); line-height: 1.62; color: var(--body); max-width: 72ch; }

/* ---------- FRAMED FIGURE ---------- */
.frame { position: relative; border: 1px solid var(--border-warm); border-radius: var(--radius-frame); overflow: hidden; margin: 0; }
.frame img, .frame video { display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.frame figcaption {
  position: absolute; left: 0; bottom: 0; width: 100%; padding: 11px 13px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--white);
  background: linear-gradient(0deg, rgba(15, 39, 64, .68), transparent);
}
.frame figcaption b { color: var(--on-navy-sky); font-weight: 600; }

/* ---------- FOOTER ---------- */
.foot { background: var(--foot); color: var(--foot-text); padding: 38px 0; font-size: var(--t-fine); line-height: 1.7; }
.foot .wrap { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: center; }
.foot b { color: #C9CED6; }
.foot .mono { color: var(--sky); }
.foot .pal { display: flex; gap: 6px; align-items: center; }
.foot .pal i { width: 16px; height: 16px; border-radius: 3px; display: inline-block; }


/* ---------- INDEPENDENCE PLEDGE ----------
   CONSTITUTION.md Article 2.6, verbatim. Identical on every page that carries it.
   Never reworded per page. Consistency across sources is what an answer engine
   rewards, and a promise that changes shape stops being checkable. */
.pledge { border: 1px solid var(--border); border-left: 4px solid var(--pink);
  background: var(--white); padding: var(--sp-5); border-radius: var(--radius-btn);
  margin: var(--sp-6) 0; }
.pledge-l { font-family: var(--font-mono); font-size: var(--t-micro);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--pink);
  margin: 0 0 var(--sp-3); }
.pledge p:last-child { margin: 0; font-size: var(--t-small); color: var(--body); }
.pledge strong { color: var(--navy); font-weight: 600; }

/* A pillar deliberately out of the order a reader expects. Governance only. */
.stage.flip { border-left-color: var(--pink); }
.stage p b { color: var(--navy); font-weight: 600; }


/* ---------- FOOTER TAGLINE ----------
   The tagline used to sit in a band under the nav, which interrupted the top of
   every page. It closes the page instead. Removed from the band 1 Sep. */
.foot .foot-tag { color: #C9CED6; font-size: var(--t-fine); margin: 0 0 6px; }
.foot .foot-tag em { font-family: var(--font-accent); font-style: italic; color: var(--sky); }


/* ---------- LINKEDIN PROFILE BADGE ----------
   Third party embed. The anchor inside the container is a real working link, so
   if the script is blocked or fails the section degrades to a link rather than a
   hole. Added 1 Sep 2026. */
.li-badge { margin: var(--sp-5) 0 0; min-height: 260px; }
.li-badge .badge-base__link { color: var(--baltic); }


/* ---------- PAGE HERO IMAGE ----------
   16:9 rather than the 4:5 portrait crop, because this runs full measure under a
   heading rather than sitting in a card. Added 1 Sep 2026. */
.page-hero { margin: var(--sp-6) 0 0; }
.page-hero img { display: block; width: 100%; height: auto; aspect-ratio: 2/1;
  object-fit: cover; border-radius: var(--radius-btn); }
.page-hero figcaption { margin-top: var(--sp-3); font-family: var(--font-mono);
  font-size: var(--t-micro); letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--label); }

/* Independence, folded into the nav as a disclosure rather than a section. Native <details>, so it works with no JS. */.navdrop{position:relative}.navdrop>summary{list-style:none;cursor:pointer;user-select:none;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}.navdrop>summary::-webkit-details-marker{display:none}.navdrop>summary:after{content:'';width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;opacity:.55;transition:transform .2s ease}.navdrop[open]>summary:after{transform:rotate(180deg)}.navdrop-p{position:absolute;top:100%;right:0;left:auto;z-index:60;width:min(560px,calc(100vw - 32px));background:#fff;border:1px solid #0F2740;border-top:4px solid #FD2643;padding:26px 28px 24px;box-shadow:0 30px 60px -28px rgba(15,39,64,.45);text-align:left}.nd-l{font-family:var(--font-mono,ui-monospace,Menlo,monospace);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:#FD2643;margin:0 0 12px}.nd-h{font-size:19px;line-height:1.35;letter-spacing:-.015em;color:#436079;margin:0 0 20px}.nd-h strong{color:#0F2740;font-weight:600}.nd-ledger{list-style:none;margin:0 0 18px;padding:0}.nd-ledger li{display:grid;grid-template-columns:42px 1fr;gap:12px;align-items:baseline;padding:10px 0;border-bottom:1px solid #EEF4F9;font-size:14.5px;line-height:1.45;color:#284D6E}.nd-ledger li:last-child{border-bottom:none}.nd-ledger .mk{font-family:var(--font-mono,ui-monospace,Menlo,monospace);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:500}.nd-ledger .no .mk{color:#FD2643}.nd-ledger .yes .mk{color:#38618C}.nd-ledger .yes span:last-child{color:#5C7B93}.nd-note{margin:0;font-size:13px;line-height:1.6;color:#5C7B93}.nd-note a{display:inline-block;margin-top:6px;font-family:var(--font-mono,ui-monospace,Menlo,monospace);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#38618C;text-decoration:none;border-bottom:1px solid #B4CDE1;padding-bottom:3px}.nd-note a:hover{color:#FD2643;border-color:#FD2643}@media(max-width:860px){.navdrop-p{position:static;width:100%;box-shadow:none;margin-top:10px}}
.nd-b{font-size:14px;line-height:1.6;color:#436079;margin:0 0 18px}.nd-cols{list-style:none;margin:0 0 4px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:7px 20px}.nd-cols li{font-size:13.5px;line-height:1.4;color:#284D6E;padding-left:16px;position:relative}.nd-cols li:before{content:'';position:absolute;left:0;top:5px;width:8px;height:8px;background-color:#0F2740;-webkit-mask:url(/assets/prickled-mark-solid.svg) no-repeat center/contain;mask:url(/assets/prickled-mark-solid.svg) no-repeat center/contain}.nd-more li:before{background-color:#FD2643}.nd-more li{color:#0F2740;font-weight:500}.nd-split{margin:16px 0 12px;padding-top:12px;border-top:2px solid #FD2643;font-family:var(--font-mono,ui-monospace,Menlo,monospace);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#FD2643}.nd-tri li{grid-template-columns:26px 1fr}.nd-tri .mk{color:#35A7FF}.nd-tri b{color:#0F2740;font-weight:600;display:block}
section[id],[id^='f-']{scroll-margin-top:96px}