/* ─────────────────────────────────────────────
   Free tool pages and written content (guides, pillar, landing pages).
   Loaded only on those pages, on top of styles.css.

   Shared shell: sand page, dark working panel, results in the panel and the
   full table below it. The panel echoes the homepage's phone mockup sitting on
   sand, which is the site's existing move for "this is the product working".
   ───────────────────────────────────────────── */

.tool-body { background: var(--sand); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Nav ───────────────────────────────────── */

.tool-nav {
  background: var(--sand);
  border-bottom: 1px solid var(--hairline-light);
  position: sticky;
  top: 0;
  z-index: 20;
}
.tool-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 72px;
}
.tool-nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 15px;
  font-weight: 600;
}
.tool-nav-links a { color: var(--text-body-sand); }
.tool-nav-links a:hover { color: var(--dark); }
.tool-nav-links a[aria-current="page"] { color: var(--dark); font-weight: 700; }
.tool-nav-links .nav-cta {
  background: var(--dark);
  color: #fff;
  border-radius: 999px;
  padding: 10px 18px;
}
.tool-nav-links .nav-cta:hover { background: var(--surface); color: #fff; }

/* ── Hero ──────────────────────────────────── */

.tool-hero { padding: 56px 0 28px; }

.tool-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(38px, 6vw, 62px);
  line-height: 0.94;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--dark);
  margin: 14px 0 0;
  max-width: 16ch;
}
.tool-title em { font-style: normal; color: var(--orange-text); }

/* Same trick as the homepage hero: the eyebrow sits inside the h1 so the
   heading carries the keyword line, but keeps its standalone small-caps
   look. Resets the inherited display heading metrics. */
.tool-title-eyebrow {
  display: block;
  line-height: normal;
  margin-bottom: 14px;
}

.tool-deck {
  margin: 18px 0 0;
  max-width: 62ch;
  font-size: 19px;
  line-height: 1.55;
  color: var(--text-body-sand);
}

/* ── The working panel: dark card on sand, echoing the homepage mockup ── */

.tool-panel {
  background: var(--dark);
  border-radius: 22px;
  padding: 28px;
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.tool-panel-section { padding: 12px 0 44px; }

.tool-controls { display: flex; flex-direction: column; gap: 20px; }

.tool-field { display: flex; flex-direction: column; gap: 8px; }
/* A class-level display wins over the UA rule for [hidden], so anything the
   panel toggles has to opt back out explicitly. */
[hidden] { display: none !important; }
.tool-field-label {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted);
}
.tool-field-hint {
  font-size: 13px;
  line-height: 1.45;
  /* --muted-2 measures 3.05:1 on the readout panel, below the 4.5:1 needed at
     this size. These hints carry the reliability and fallback warnings. */
  color: var(--muted);
}

.tool-input {
  width: 100%;
  background: var(--surface);
  border: 1.5px solid var(--surface-3);
  border-radius: 12px;
  padding: 13px 15px;
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.tool-input:focus-visible {
  outline: none;
  border-color: var(--orange);
}
/* Spinners fight the condensed numerals; the value is typed or stepped by the
   segmented controls instead. */
.tool-input::-webkit-outer-spin-button,
.tool-input::-webkit-inner-spin-button { appearance: none; margin: 0; }
.tool-input[type="number"] { appearance: textfield; }

.tool-seg {
  display: inline-flex;
  background: var(--surface);
  border-radius: 999px;
  padding: 4px;
  gap: 2px;
  flex-wrap: wrap;
}
.tool-seg button {
  border: 0;
  background: transparent;
  color: var(--text-body-dark);
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 9px 15px;
  border-radius: 999px;
  cursor: pointer;
}
.tool-seg button:hover { color: #fff; }
/* Dark on orange measures 5.31:1; white on the same orange is 3.37:1, which
   fails at this size. */
.tool-seg button[aria-pressed="true"] { background: var(--orange); color: var(--dark); }
.tool-seg--block { display: flex; }
.tool-seg--block button { flex: 1; }

.tool-select {
  width: 100%;
  background: var(--surface);
  border: 1.5px solid var(--surface-3);
  border-radius: 12px;
  padding: 12px 15px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}
.tool-select:focus-visible { outline: none; border-color: var(--orange); }

/* ── Readout ───────────────────────────────── */

.tool-readout {
  background: var(--surface-2);
  border-radius: 16px;
  padding: 22px;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.tool-readout-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.tool-bignum {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(44px, 7vw, 68px);
  line-height: 0.9;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.tool-bignum small {
  font-size: 0.42em;
  color: var(--muted);
  margin-left: 6px;
}
.tool-bignum--orange { color: var(--orange-text); }

/* ── Quick percentages ─────────────────────── */

.pct-grid {
  display: grid;
  /* Fits three or four cells to a row without leaving a hole when the count
     does not divide evenly. */
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 10px;
}
.pct-cell {
  background: var(--dark);
  border-radius: 11px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pct-cell-pct {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--orange);
}
.pct-cell-weight {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

/* ── Result tables ─────────────────────────── */

.tool-table-section { background: var(--dark); padding: 56px 0; }
.tool-table-head { margin-bottom: 24px; }
.tool-table-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1;
  text-transform: uppercase;
  color: #fff;
  margin: 10px 0 0;
}
.tool-table-sub {
  margin: 12px 0 0;
  max-width: 68ch;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-body-dark);
}

.tool-table-scroll { overflow-x: auto; }
.tool-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  min-width: 520px;
}
.tool-table th,
.tool-table td {
  text-align: left;
  padding: 13px 16px;
  border-bottom: 1px solid var(--hairline-dark);
}
.tool-table thead th {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom-color: var(--surface-3);
}
.tool-table td { color: var(--text-body-dark); font-size: 15px; }
.tool-table .cell-strong {
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 800;
  color: #fff;
}
.tool-table tbody tr.is-current { background: rgba(241, 90, 41, 0.11); }
.tool-table tbody tr.is-current .cell-strong { color: var(--orange-text); }
.tool-table caption {
  caption-side: bottom;
  text-align: left;
  padding-top: 14px;
  font-size: 13px;
  color: var(--muted-2);
}

/* ── Projection chart ──────────────────────── */

/* Single series on the dark table surface. Validated against #1A1712:
   line 5.31:1, axis ink 4.83:1, gridlines deliberately recessive at 1.51:1. */
.proj {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  margin-bottom: 32px;
}
.proj-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.proj-title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #fff;
  margin: 0;
}
.proj-summary {
  font-size: 14px;
  color: var(--text-body-dark);
  font-variant-numeric: tabular-nums;
}
.proj-summary strong { color: var(--orange-text); font-weight: 700; }

.proj-figure {
  position: relative;
  background: var(--surface-2);
  border-radius: 14px;
  padding: 14px 10px 6px;
  margin: 0;
}
.proj-figure svg { display: block; width: 100%; height: auto; }

.proj-grid { stroke: var(--surface-3); stroke-width: 1; }
.proj-axis-text {
  fill: var(--muted);
  font-family: var(--font-body);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.proj-band { fill: var(--orange); opacity: 0.16; }
.proj-line { fill: none; stroke: var(--orange); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.proj-start { stroke: var(--muted-2); stroke-width: 1.5; stroke-dasharray: 4 4; }
/* 2px surface ring so the marker reads against the band it sits on. */
.proj-dot { fill: var(--orange); stroke: var(--surface-2); stroke-width: 2; }
.proj-endlabel {
  fill: #fff;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.proj-crosshair { stroke: var(--muted); stroke-width: 1; }
.proj-hit { fill: transparent; cursor: crosshair; }

.proj-tip {
  position: absolute;
  pointer-events: none;
  background: var(--dark);
  border: 1px solid var(--surface-3);
  border-radius: 9px;
  padding: 8px 11px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-body-dark);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transform: translate(-50%, -100%);
  opacity: 0;
  transition: opacity 100ms;
  z-index: 2;
}
.proj-tip strong { color: #fff; font-weight: 700; }
.proj-tip[data-show="true"] { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .proj-tip { transition: none; } }

.tool-table tbody tr[data-goal] { cursor: pointer; }
.tool-table tbody tr[data-goal]:hover { background: rgba(241, 90, 41, 0.06); }

/* ── Percentile strip ──────────────────────── */

.band-strip { display: flex; flex-direction: column; gap: 10px; }
.band-track {
  display: flex;
  height: 46px;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}
.band-seg {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}
.band-seg--1 { background: #2E2A24; }
.band-seg--2 { background: #4A3B2C; }
.band-seg--3 { background: #7A4A26; }
.band-seg--4 { background: #B0492A; }
.band-seg--5 { background: var(--orange); color: #fff; }

.band-marker {
  position: absolute;
  top: -6px;
  bottom: -6px;
  width: 3px;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 0 0 2px rgba(26, 23, 18, 0.75);
  transition: left 220ms ease-out;
}
@media (prefers-reduced-motion: reduce) { .band-marker { transition: none; } }

.band-scale {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ── Composition split ─────────────────────── */

/* The FFMI page deliberately does not use the barbell device — mass is not a
   thing you load on a bar. It shows the split the index is computed from
   instead, which is the number people actually mis-estimate. */
.comp-bar {
  display: flex;
  height: 44px;
  border-radius: 10px;
  overflow: hidden;
}
.comp-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  transition: width 220ms ease-out;
}
@media (prefers-reduced-motion: reduce) { .comp-seg { transition: none; } }
.comp-seg--lean { background: var(--orange); color: #fff; }
.comp-seg--fat { background: var(--surface-3); color: var(--text-body-dark); }

.comp-legend {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.comp-legend strong { color: #fff; font-weight: 700; }

.stat-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.stat-cell {
  background: var(--dark);
  border-radius: 11px;
  padding: 12px 14px;
}
.stat-cell .tool-field-label { display: block; margin-bottom: 4px; }
.stat-cell-value {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

/* ── Article chrome ────────────────────────── */

.tool-title--article {
  max-width: 22ch;
  text-transform: none;
  font-size: clamp(34px, 5vw, 54px);
  line-height: 1.02;
}
.article-meta {
  margin: 18px 0 0;
  font-size: 14px;
  color: var(--muted-2);
}

/* Key-takeaways box at the top of a long guide. */
.article-summary {
  background: #EDE8E0;
  border-radius: 14px;
  padding: 22px 26px;
  margin: 0 0 36px;
}
.article-summary h2 {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--orange-deep);
  margin: 0 0 12px;
}
.article-summary ul { margin: 0; padding-left: 20px; }
.article-summary li {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-body-sand);
  margin-bottom: 7px;
}
.article-summary li:last-child { margin-bottom: 0; }

/* Real product captures inside guides. On wide screens, the copy and product
   share the page; smaller screens return to the natural reading order. */
.tool-prose-inner > .article-screenshot-row {
  max-width: 1120px;
}
.article-screenshot-row {
  margin: 44px 0;
}
.article-screenshot-copy {
  max-width: 68ch;
}
.article-screenshot-copy > :first-child { margin-top: 0; }
.article-screenshot-copy > :last-child { margin-bottom: 0; }
.article-screenshot {
  margin: 28px 0 36px;
}
.article-screenshot img {
  display: block;
  width: min(100%, 390px);
  height: auto;
  margin: 0 auto;
  border-radius: 24px;
  background: var(--dark);
  box-shadow: 0 18px 48px rgba(24, 22, 18, 0.18);
}
.article-screenshot figcaption {
  width: min(100%, 390px);
  margin: 12px auto 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-body-sand);
}

@media (min-width: 1000px) {
  .article-screenshot-row {
    display: grid;
    grid-template-columns: minmax(0, 68ch) minmax(300px, 360px);
    gap: clamp(48px, 6vw, 88px);
    align-items: start;
    margin: 56px 0;
  }
  .article-screenshot-row .article-screenshot {
    width: 100%;
    margin: 0;
  }
  .article-screenshot-row .article-screenshot img,
  .article-screenshot-row .article-screenshot figcaption {
    width: 100%;
  }
}

/* Inline callout to a calculator the paragraph just described. */
.tool-callout {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--dark);
  border-radius: 14px;
  padding: 18px 22px;
  margin: 0 0 24px;
}
.tool-callout-text { flex: 1; min-width: 0; }
.tool-callout-name {
  display: block;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  color: #fff;
}
.tool-callout-blurb { display: block; font-size: 14px; line-height: 1.5; color: var(--text-body-dark); }
.tool-callout-go {
  flex-shrink: 0;
  background: var(--orange);
  color: var(--dark);
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 10px 18px;
}
.tool-callout-go:hover { background: var(--orange-deep); color: #fff; }

/* Comparison tables on the versus pages sit on sand, not the dark band. */
.compare-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 560px; }
.compare-table th, .compare-table td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--hairline-light);
  vertical-align: top;
  line-height: 1.5;
}
.compare-table thead th {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--orange-deep);
  border-bottom-color: var(--dark);
}
.compare-table tbody th {
  font-weight: 700;
  color: var(--dark);
  width: 22%;
}
.compare-table td { color: var(--text-body-sand); }
.compare-scroll { overflow-x: auto; margin: 0 0 28px; }
.block-template-table { min-width: 820px; }
.block-template-table tbody th { width: 64px; }


/* ── Prose ─────────────────────────────────── */

.tool-prose { padding: 60px 0; }
/* These share .container, which centres a 1360px box. Capping max-width on the
   element itself would break that centring and pull the column to the viewport
   edge, out of line with the hero; capping the children instead keeps the
   container's geometry and still holds the text to a readable measure. */
.tool-prose-inner > *,
.tool-faq-inner > * { max-width: 68ch; }
/* Comparison tables carry three columns and need the full container width;
   68ch squeezes them into something unreadable. */
.tool-prose-inner > .compare-scroll { max-width: 100%; }
.tool-prose h2 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(26px, 3.4vw, 34px);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--dark);
  margin: 44px 0 14px;
}
.tool-prose h2:first-child { margin-top: 0; }
.tool-prose h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 19px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--dark);
  margin: 28px 0 8px;
}
.tool-prose p,
.tool-prose li {
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-body-sand);
}
.tool-prose p { margin: 0 0 16px; }
.tool-prose ul, .tool-prose ol { margin: 0 0 16px; padding-left: 22px; }
.tool-prose li { margin-bottom: 8px; }
.tool-prose a:not(.tool-callout-go) { color: var(--orange-deep); text-decoration: underline; }
.tool-prose a:not(.tool-callout-go):hover { color: var(--orange-hover); }
.tool-prose strong { color: var(--dark); font-weight: 700; }

.tool-formula {
  background: #EDE8E0;
  border-left: 3px solid var(--orange);
  border-radius: 0 10px 10px 0;
  padding: 16px 20px;
  margin: 0 0 20px;
  font-variant-numeric: tabular-nums;
  font-size: 16px;
  line-height: 1.6;
  color: var(--dark);
  overflow-x: auto;
}

/* ── FAQ ───────────────────────────────────── */

.tool-faq { padding: 0 0 68px; }

.tool-faq details {
  border-bottom: 1px solid var(--hairline-light);
  padding: 4px 0;
}
.tool-faq summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 30px 18px 0;
  position: relative;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--dark);
}
.tool-faq summary::-webkit-details-marker { display: none; }
.tool-faq summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 15px;
  font-size: 22px;
  color: var(--orange-text);
}
.tool-faq details[open] summary::after { content: "−"; }
.tool-faq details p {
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-body-sand);
}
.tool-faq details a { color: var(--orange-deep); text-decoration: underline; }

/* ── Cross-links ───────────────────────────── */

.tool-crosslinks { background: #EDE8E0; padding: 52px 0; }
.tool-crosslinks-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 22px;
  text-transform: uppercase;
  color: var(--dark);
  margin: 0 0 20px;
}
/* Capped tracks rather than 1fr: at the full 1264px container a 1fr card is
   625px wide, which leaves the arrow either marooned at the far edge or the
   whole card mostly empty. 380px is about the width the blurb wants, and lets
   the three sibling tools sit on one row from 1280px up. */
.tool-card-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 380px));
  gap: 14px;
}
.tool-card {
  background: var(--sand);
  border: 1px solid var(--hairline-light);
  border-radius: 14px;
  padding: 20px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.tool-card-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tool-card:hover { border-color: var(--orange); }
.tool-card-name {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--dark);
}
.tool-card-blurb { font-size: 14px; line-height: 1.5; color: var(--text-body-sand); }
.tool-card-go { font-size: 22px; line-height: 1; color: var(--orange-text); flex-shrink: 0; margin-left: auto; }

/* ── CTA ───────────────────────────────────── */

.tool-cta { background: var(--dark); padding: 56px 0; }
.tool-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.tool-cta-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(30px, 4.4vw, 44px);
  line-height: 0.96;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
}
.tool-cta-copy {
  margin: 14px 0 0;
  max-width: 56ch;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-body-dark);
}

/* ── Responsive ────────────────────────────── */

@media (max-width: 900px) {
  .tool-panel { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 22px; }
  .tool-card-row { grid-template-columns: 1fr; }
  .tool-hero { padding: 36px 0 22px; }
}

/* Four tools plus the CTA will not fit a phone. The old rule made the row a
   horizontal scroller, which just clipped the CTA off the right edge, so it
   collapses behind a burger instead — the same pattern and breakpoint as the
   marketing nav. Only .js hides the menu, so without scripting the links stay
   visible rather than becoming unreachable. */
@media (max-width: 900px) {
  .tool-nav-inner { flex-wrap: wrap; gap: 12px; padding-top: 14px; padding-bottom: 14px; }
  .js .nav-burger { margin-left: auto; }
  .tool-nav-links {
    flex-basis: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    font-size: 16px;
  }
  .js .tool-nav-links { display: none; }
  .js .nav-burger[aria-expanded="true"] + .tool-nav-links { display: flex; }
  .tool-nav-links a { padding: 11px 0; }
  .tool-nav-links .nav-cta { align-self: flex-start; padding: 12px 18px; margin: 6px 0 4px; }
}

@media (max-width: 700px) {
  .tool-deck { font-size: 17px; }
}