/* ══════════════════════════════════════════
   FREE TOOLS — .tool-* prefix
   Loaded by /tools/ and every tool page.

   ⚠ DOES NOT FOLLOW THE THEME RULE — see CLAUDE.md. Pages should be
   light-majority (~60–75% light) with dark reserved for the hero, one or two
   dividers, and the footer. These pages measure ~93% dark. That predates the
   rule being written down (2026-08-19). When next touched, convert: keep
   .tool-hero dark, move the form and result panels onto a light ground.

   Brand orange #ff9200 clears 8:1 on the near-black used here, so it is safe
   for text on these dark sections. On any light ground it drops to 2.15:1 —
   orange TEXT on light must switch to #9c4f00.
   ══════════════════════════════════════════ */

.tool-scope {
  --t-header: 77px;

  --t-bg: #f7f4ee;
  --t-surface: #ffffff;
  --t-surface-2: #eee7dc;
  --t-raised: #fbfaf7;

  --t-ink: #191714;
  --t-ink-2: #3d3832;
  --t-ink-3: #665f57;
  --t-ink-4: #81776d;

  --t-line: rgba(38, 31, 24, 0.12);
  --t-line-2: rgba(38, 31, 24, 0.22);

  --t-accent: #9c4f00;
  --t-accent-fill: #ff9200;
  --t-accent-soft: rgba(255, 146, 0, 0.11);
  --t-accent-line: rgba(156, 79, 0, 0.34);

  --t-good: #4ade80;

  --t-ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* shared width for the reading sections below the calculator — the
     sources table, the prose and the FAQ all align to this one edge */
  --t-read: 88ch;

  background: var(--t-bg);
  color: var(--t-ink-2);
}
@media only screen and (min-width: 1200px) {
  .tool-scope { --t-header: 122px; }
}

/* ── Hero ── */
.tool-hero {
  padding: calc(var(--t-header) + 72px) 0 54px;
  background:
    radial-gradient(circle at 88% 24%, rgba(255, 146, 0, .14), transparent 30%),
    linear-gradient(145deg, #fffdf9 0%, #f4eee4 100%);
  border-bottom: 1px solid var(--t-line);
}
@media only screen and (max-width: 991px) {
  .tool-hero { padding: calc(var(--t-header) + 36px) 0 30px; }
}

.tool-crumbs {
  font-family: var(--font-body, "DM Sans", sans-serif);
  font-size: 13px;
  color: var(--t-ink-4);
  display: flex;
  gap: 9px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.tool-crumbs a { color: var(--t-ink-3); text-decoration: none; transition: color .24s var(--t-ease); }
.tool-crumbs a:hover { color: var(--t-accent); }

.tool-h1 {
  font-family: var(--ax-sans, "DM Sans", system-ui, sans-serif) !important;
  font-size: clamp(2.1rem, 5.2vw, 3.7rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 400;
  color: var(--t-ink);
  margin: 0 0 18px;
  /* No hard <br>: the template hides every <br> under 767px without leaving
     a space behind it, which welds the words on either side together. */
  overflow-wrap: break-word;
}

.tool-dek {
  font-family: var(--font-body, "DM Sans", sans-serif);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.55;
  color: var(--t-ink-3);
  max-width: 60ch;
  margin: 0 0 24px;
}

.tool-badges { display: flex; gap: 10px; flex-wrap: wrap; margin: 0; }
.tool-badge {
  font-family: var(--font-body, "DM Sans", sans-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--t-ink-3);
  background: var(--t-surface);
  border: 1px solid var(--t-line);
  border-radius: 100px;
  padding: 6px 13px;
}
.tool-badge--free {
  color: var(--t-accent);
  background: var(--t-accent-soft);
  border-color: var(--t-accent-line);
}

/* ── Body ── */
.tool-body { padding: 58px 0 96px; }

/* ── Form ── */
.tool-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-bottom: 34px;
}
@media only screen and (max-width: 767px) {
  .tool-form { grid-template-columns: 1fr; gap: 18px; }
}

.tool-field {
  background: var(--t-surface);
  border: 1px solid var(--t-line);
  border-radius: 16px;
  padding: 24px;
  margin: 0;
  min-width: 0;
}
/* The "what do you need" field carries six options, so it spans the row. */
.tool-field:nth-child(2) { grid-column: 1 / -1; }

.tool-legend {
  font-family: var(--font-body, "DM Sans", sans-serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--t-ink);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  padding: 0;
  float: none;
  width: auto;
}
.tool-qnum {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--t-accent-soft);
  border: 1px solid var(--t-accent-line);
  color: var(--t-accent);
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.tool-select {
  width: 100%;
  min-height: 48px;
  background: var(--t-raised);
  border: 1px solid var(--t-line-2);
  border-radius: 8px;
  color: var(--t-ink);
  font-family: var(--font-body, "DM Sans", sans-serif);
  font-size: 15px;
  padding: 0 14px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' stroke='%23ff9200' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}
.tool-select:focus-visible { outline: 2px solid var(--t-accent); outline-offset: 2px; }

.tool-checks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 9px;
}
.tool-check, .tool-radio {
  display: flex;
  align-items: center;
  gap: 11px;
  /* 48px minimum touch target — the audience is on a phone, on a jobsite. */
  min-height: 48px;
  padding: 6px 12px;
  background: var(--t-raised);
  border: 1px solid var(--t-line);
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--font-body, "DM Sans", sans-serif);
  font-size: 14.5px;
  color: var(--t-ink-2);
  transition: border-color .2s var(--t-ease), background .2s var(--t-ease);
}
.tool-check:hover, .tool-radio:hover { border-color: var(--t-line-2); }
.tool-check input, .tool-radio input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.tool-check-box, .tool-radio-dot {
  width: 19px;
  height: 19px;
  border: 1.5px solid var(--t-line-2);
  border-radius: 5px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  transition: border-color .2s var(--t-ease), background-color .2s var(--t-ease), transform .2s var(--t-ease);
}
.tool-radio-dot { border-radius: 50%; }

.tool-check input:checked ~ .tool-check-box,
.tool-radio input:checked ~ .tool-radio-dot {
  background: var(--t-accent-fill);
  border-color: var(--t-accent-fill);
}
.tool-check input:checked ~ .tool-check-box::after {
  content: "";
  width: 9px;
  height: 5px;
  border-left: 2px solid #000;
  border-bottom: 2px solid #000;
  transform: rotate(-45deg) translate(1px, -1px);
}
.tool-radio input:checked ~ .tool-radio-dot::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #000;
}
.tool-check:has(input:checked), .tool-radio:has(input:checked) {
  border-color: var(--t-accent-line);
  background: var(--t-accent-soft);
}
.tool-check input:focus-visible ~ .tool-check-box,
.tool-radio input:focus-visible ~ .tool-radio-dot {
  outline: 2px solid var(--t-accent);
  outline-offset: 2px;
}

.tool-radios { display: flex; flex-wrap: wrap; gap: 9px; }
.tool-radios .tool-radio { flex: 1 1 auto; }

.tool-hint {
  font-family: var(--font-body, "DM Sans", sans-serif);
  font-size: 14px;
  color: var(--t-ink-4);
  margin: 0;
  grid-column: 1 / -1;
}

/* The header is fixed, so anything scrolled to needs to clear it or the
   panel labels end up hidden behind the bar. */
.tool-result { scroll-margin-top: calc(var(--t-header) + 24px); }

/* ── Result panels ── */
.tool-panels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}
@media only screen and (max-width: 991px) {
  .tool-panels { grid-template-columns: 1fr; }
}

.tool-panel {
  background: var(--t-surface);
  border: 1px solid var(--t-line);
  border-radius: 16px;
  padding: 26px;
  min-width: 0;
}
.tool-panel--ours {
  background: linear-gradient(180deg, #fff8ed 0%, var(--t-surface) 100%);
  border-color: var(--t-accent-line);
}

.tool-panel-label {
  font-family: var(--font-body, "DM Sans", sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t-ink-4);
  margin: 0 0 12px;
}
.tool-panel--ours .tool-panel-label { color: var(--t-accent); }

.tool-panel-figure {
  font-family: var(--ax-sans, "DM Sans", system-ui, sans-serif);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.1;
  color: var(--t-ink);
  margin: 0 0 5px;
  overflow-wrap: break-word;
}
.tool-panel-sub {
  font-family: var(--font-body, "DM Sans", sans-serif);
  font-size: 13.5px;
  color: var(--t-ink-3);
  margin: 0 0 15px;
}

.tool-breakdown { list-style: none; margin: 0 0 14px; padding: 0; }
.tool-breakdown li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-body, "DM Sans", sans-serif);
  font-size: 13.5px;
  color: var(--t-ink-3);
  padding: 7px 0;
  border-bottom: 1px solid var(--t-line);
}
.tool-breakdown li:last-child { border-bottom: 0; }
.tool-breakdown li span:last-child { color: var(--t-ink-2); white-space: nowrap; }

.tool-panel-note {
  font-family: var(--font-body, "DM Sans", sans-serif);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--t-ink-4);
  margin: 0;
}
/* The "what this does not include" line. Deliberately not hidden in small
   grey text — an unfair comparison the reader sees through costs more trust
   than it wins, so the limits get a visible border. */
.tool-panel-note--caveat {
  color: var(--t-ink-3);
  border-left: 2px solid var(--t-accent);
  padding-left: 11px;
  margin-top: 12px;
}

/* ── The difference ── */
.tool-delta {
  background: var(--t-surface-2);
  border: 1px solid var(--t-line);
  border-radius: 16px;
  padding: 28px;
  text-align: left;
  margin-bottom: 18px;
}
.tool-delta-label {
  font-family: var(--font-body, "DM Sans", sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t-ink-4);
  margin: 0 0 8px;
}
.tool-delta-figure {
  font-family: var(--ax-sans, "DM Sans", system-ui, sans-serif);
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  line-height: 1.05;
  color: var(--t-accent);
  margin: 0 0 10px;
  overflow-wrap: break-word;
}
.tool-delta-note {
  font-family: var(--font-body, "DM Sans", sans-serif);
  font-size: 13px;
  line-height: 1.6;
  color: var(--t-ink-4);
  margin: 0 auto;
  max-width: 62ch;
}

/* ── Share ── */
.tool-share {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.tool-copy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  background: var(--t-surface);
  border: 1px solid var(--t-line-2);
  border-radius: 8px;
  color: var(--t-ink-2);
  font-family: var(--font-body, "DM Sans", sans-serif);
  font-size: 14px;
  cursor: pointer;
  transition: border-color .2s var(--t-ease), color .2s var(--t-ease);
}
.tool-copy:hover { border-color: var(--t-accent); color: var(--t-accent); }
.tool-share-note {
  font-family: var(--font-body, "DM Sans", sans-serif);
  font-size: 13px;
  color: var(--t-ink-4);
}

/* ── CTAs ── */
.tool-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 40px; }
.tool-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 20px;
  border-radius: 100px;
  border: 1px solid var(--t-line-2);
  background: var(--t-surface);
  color: var(--t-ink-2);
  font-family: var(--font-body, "DM Sans", sans-serif);
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  transition: border-color .22s var(--t-ease), background-color .22s var(--t-ease), color .22s var(--t-ease), transform .22s var(--t-ease);
}
.tool-cta:hover { border-color: var(--t-accent); color: var(--t-accent); }
.tool-cta--primary {
  background: var(--t-accent-fill);
  border-color: var(--t-accent-fill);
  color: #000;
  font-weight: 600;
}
.tool-cta--primary:hover { background: #ffa321; border-color: #ffa321; color: #000; }

/* ── Prose ── */
/* width comes from the shared content measure further down; this rule only
   keeps the trailing space below the prose block */
.tool-prose { margin-bottom: 46px; }
.tool-prose h2 {
  font-family: var(--ax-sans, "DM Sans", system-ui, sans-serif);
  font-size: clamp(1.35rem, 2.4vw, 1.8rem);
  line-height: 1.2;
  color: var(--t-ink);
  margin: 34px 0 14px;
}
.tool-prose h2:first-child { margin-top: 0; }
.tool-prose p {
  font-family: var(--font-body, "DM Sans", sans-serif);
  font-size: 16px;
  line-height: 1.72;
  color: var(--t-ink-2);
  margin: 0 0 16px;
}
.tool-prose a {
  color: var(--t-accent);
  text-decoration: underline;
  text-decoration-color: var(--t-accent-line);
  text-underline-offset: 3px;
}
.tool-serving { font-size: 14px !important; color: var(--t-ink-4) !important; }

/* ── FAQ ── */


/* ── Related ── */
.tool-related {
  font-family: var(--font-body, "DM Sans", sans-serif);
  font-size: 14px;
  color: var(--t-ink-4);
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding-top: 22px;
  border-top: 1px solid var(--t-line);
}
.tool-related-label { color: var(--t-ink-4); }
.tool-related a { color: var(--t-ink-2); text-decoration: none; transition: color .2s var(--t-ease); }
.tool-related a:hover { color: var(--t-accent); }


.tool-select option { background: #fff; color: var(--t-ink); }

@media only screen and (max-width: 767px) {


  .tool-hero { padding-bottom: 42px; }
  .tool-body { padding: 42px 0 72px; }
}

@media print {
  .tool-form, .tool-ctas, .tool-share{ display: none !important; }
}

/* 2026 high-end pass: Aurax editorial scale + machined surfaces. */
/* margin-inline is NOT optional here: nothing else in the loaded stylesheets
   centres a bare .container at desktop, so without it the hero sat flush
   against the left edge while the capped sections below it were centred. */
.tool-scope .container { max-width: 1360px; margin-inline: auto; padding-inline: clamp(18px, 4vw, 56px); }

/* ── Content measure ──
   Everything below the calculator is reading matter, not instrumentation.
   The sources table and the FAQ used to fill the full 1360px container
   while .tool-prose sat at 76ch between them, so on a 1440px screen the
   prose ran 608px against their 1248px and the section edges disagreed by
   640px — the page read as though the container had broken.
   One shared measure lines those edges up. The calculator itself is NOT
   capped: its three comparison panels need the full container width. */
.tool-body .tk-src,
.tool-body .tool-prose,
.tool-body .tk-faq { max-width: var(--t-read, 92ch); margin-inline: auto; }
.tool-hero { position: relative; isolation: isolate; overflow: clip; padding-top: calc(var(--t-header) + clamp(74px, 8vw, 126px)); padding-bottom: clamp(70px, 8vw, 118px); }
.tool-hero::before { content:""; position:absolute; z-index:-1; width:min(48vw,720px); aspect-ratio:1; right:-8vw; top:-18%; border-radius:50%; background:radial-gradient(circle,rgba(255,146,0,.22),rgba(255,146,0,0) 68%); pointer-events:none; }
.tool-hero::after { position:absolute; z-index:-1; right:max(2vw,24px); bottom:-.16em; color:rgba(28,25,23,.035); font:800 clamp(110px,18vw,290px)/.76 var(--ax-sans,"DM Sans",system-ui,sans-serif); letter-spacing:-.09em; pointer-events:none; }
.tool-hero--hub::after { content:"TOOLS"; }
.tool-hero--calculator::after { content:"$ / $"; }
.tool-h1 { max-width: 13ch; font-size:clamp(50px,7.2vw,104px); line-height:.91; letter-spacing:-.055em; font-weight:650; text-wrap:balance; }
.tool-dek { max-width:58ch; font-size:clamp(17px,1.45vw,21px); line-height:1.62; }
.tool-badges { gap:8px; }
.tool-badge { padding:9px 15px; border:0; box-shadow:inset 0 0 0 1px var(--t-line); background:rgba(255,255,255,.72); }
.tool-body { padding-block:clamp(74px,9vw,128px); }
.tool-cta svg { transition:transform .5s var(--t-ease); }.tool-cta:hover svg { transform:translateX(4px); }
.tool-form { gap:26px; margin-bottom:64px; }
.tool-field { position:relative; border:7px solid rgba(28,25,23,.035); border-radius:28px; padding:clamp(25px,3vw,38px); background:#fff; box-shadow:inset 0 0 0 1px var(--t-line),0 20px 55px rgba(71,48,23,.045); }
.tool-field::before { content:""; position:absolute; left:28px; top:-7px; width:52px; height:3px; border-radius:99px; background:var(--t-accent-fill); }
.tool-qnum { width:30px; height:30px; border:0; border-radius:9px; background:var(--t-ink); color:#fff; }
.tool-legend { font-size:17px; letter-spacing:-.015em; }
.tool-check,.tool-radio,.tool-select { border:0; box-shadow:inset 0 0 0 1px var(--t-line); border-radius:12px; background:var(--t-raised); transition:box-shadow .35s var(--t-ease),background-color .35s var(--t-ease),transform .35s var(--t-ease); }
.tool-check:hover,.tool-radio:hover { transform:translateY(-2px); box-shadow:inset 0 0 0 1px var(--t-accent-line); }
.tool-panel,.tool-delta{ border:7px solid rgba(28,25,23,.035); border-radius:26px; box-shadow:inset 0 0 0 1px var(--t-line); }
.tool-panel { padding:32px; }
.tool-panel--ours { border-color:rgba(255,146,0,.12); background:radial-gradient(circle at 100% 0,rgba(255,146,0,.16),transparent 42%),#fff; }
.tool-panel-figure,.tool-delta-figure { letter-spacing:-.055em; font-weight:650; }
/* Prose keeps a comfortable reading line INSIDE the shared measure — the
   paragraphs are left-aligned against the same edge the table and FAQ use,
   rather than being centred on a narrower width of their own. */
.tool-prose > * { max-width: 76ch; }
.tool-prose h2 { margin-top:clamp(46px,6vw,76px); font-size:clamp(28px,3.4vw,46px); line-height:1.06; letter-spacing:-.04em; }
.tool-prose p { font-size:clamp(16px,1.25vw,18px); line-height:1.78; }
@media(max-width:767px){.tool-hero{padding-top:calc(var(--t-header) + 42px);padding-bottom:58px}.tool-hero::after{font-size:100px}.tool-h1{font-size:clamp(42px,14vw,64px)}

.tool-field{border-radius:22px}.tool-panels{gap:20px}}
@media(prefers-reduced-motion:reduce){.tool-check,.tool-radio,.tool-cta svg{transition:none}.tool-check:hover,.tool-radio:hover{transform:none}}

/* ═══════════════════════════════════════════════════════════════════
   TOOLS HUB — tk-* (replaces .tool-grid / .tool-card / .tool-prose)
   Double-bezel shell + core, matching the area pages why-choose cards
   so the two sections read as one system. Tone: live card is warm paper
   with an orange rule, "coming next" cards are quieter and flatter.
   ═══════════════════════════════════════════════════════════════════ */

.tk-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.36fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 18px;
  margin-bottom: clamp(64px, 7vw, 104px);
}
/* The live tool owns the full-height left column. */
.tk-card--live { grid-row: 1 / 3; }

@media only screen and (max-width: 900px) {
  .tk-grid { grid-template-columns: 1fr; grid-template-rows: auto; gap: 16px; }
  .tk-card--live { grid-row: auto; }
}

/* ---------- shell + core ---------- */
.tk-card { display: block; text-decoration: none; min-width: 0; }

.tk-shell {
  position: relative;
  height: 100%;
  padding: 7px;
  border-radius: 30px;
  background: var(--tk-shell);
  border: 1px solid var(--tk-shell-line);
  box-shadow: var(--tk-lift);
  transition: translate .6s var(--t-ease), box-shadow .6s var(--t-ease),
              background .35s var(--t-ease), border-color .35s var(--t-ease);
  will-change: transform;
}
.tk-core {
  position: relative;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 2.6vw, 40px);
  border-radius: 23px;
  background: var(--tk-core);
  box-shadow:
    inset 0 0 0 1px var(--tk-core-line),
    inset 0 1px 0 rgba(255, 255, 255, .9);
}
/* A soft top-left sheen, as if lit from above. Decorative, so it never
   intercepts a click on the card. */
.tk-core::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 80% at 6% -10%, rgba(255, 255, 255, .8), transparent 58%);
  pointer-events: none;
}

.tk-card--live {
  --tk-shell: #fff;
  --tk-shell-line: rgba(156, 79, 0, .28);
  --tk-core:
    radial-gradient(110% 70% at 100% 0, rgba(255, 146, 0, .13), transparent 52%),
    linear-gradient(152deg, #fffdfa 0%, #fdf2e2 100%);
  --tk-core-line: rgba(156, 79, 0, .09);
  --tk-lift: 0 2px 4px rgba(76, 51, 24, .04), 0 22px 56px -18px rgba(76, 51, 24, .16);
}
.tk-card--soon {
  --tk-shell: #fbf9f5;
  --tk-shell-line: var(--t-line);
  --tk-core: linear-gradient(152deg, #f6f3ed 0%, #f1ede5 100%);
  --tk-core-line: rgba(38, 31, 24, .05);
  --tk-lift: 0 1px 3px rgba(76, 51, 24, .03), 0 12px 32px -16px rgba(76, 51, 24, .1);
}

/* Hover: the whole plate rises and the shadow spreads, so the lift reads
   as distance from the page rather than a jump. */
a.tk-card .tk-shell:hover {
  translate: 0 -8px;
  background: #fffaf2;
  border-color: rgba(156, 79, 0, .46);
  box-shadow: 0 3px 6px rgba(76, 51, 24, .05), 0 40px 84px -22px rgba(76, 51, 24, .26);
}
a.tk-card:active .tk-shell { translate: 0 -3px; }

/* ---------- watermark numeral ----------
   Lives inside .tk-core, which clips it, so it can never spill past the
   card edge the way the old .tool-card::after "01" did. */
/* Index chip, top-right. Small, sharp, and legible — the old giant ghost
   numeral filled space without saying anything. */
.tk-num {
  position: absolute;
  top: clamp(24px, 2.4vw, 34px);
  right: clamp(24px, 2.4vw, 34px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 9px;
  border-radius: 999px;
  font-family: var(--ax-mono, "DM Mono", ui-monospace, monospace);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--t-ink-4);
  background: rgba(255, 255, 255, .7);
  box-shadow: inset 0 0 0 1px var(--t-line);
  pointer-events: none;
  user-select: none;
}
.tk-card--live .tk-num { color: var(--t-accent); box-shadow: inset 0 0 0 1px rgba(156, 79, 0, .22); }

/* ---------- tag ---------- */
.tk-tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body, "DM Sans", sans-serif);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--t-accent);
  margin: 0 0 16px;
}
.tk-card--soon .tk-tag { color: var(--t-ink-4); }
.tk-dot {
  position: relative;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--t-accent-fill);
  box-shadow: 0 0 0 3px rgba(255, 146, 0, .16);
}
.tk-dot::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid var(--t-accent-fill);
  animation: tk-ping 2.6s var(--t-ease) infinite;
}
@keyframes tk-ping {
  0%   { opacity: .7; scale: .7; }
  70%  { opacity: 0;  scale: 2.1; }
  100% { opacity: 0;  scale: 2.1; }
}
@media (prefers-reduced-motion: reduce) { .tk-dot::after { animation: none; opacity: .35; } }

/* ---------- title + desc ---------- */
.tk-title {
  position: relative;
  font-family: var(--ax-sans, "DM Sans", system-ui, sans-serif);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.025em;
  color: var(--t-ink);
  margin: 0 0 14px !important;
  padding-bottom: 0 !important;
  font-size: 1.3rem;
}
.tk-card--live .tk-title { font-size: clamp(1.75rem, 2.9vw, 2.5rem); max-width: 17ch; }
/* Keep the narrow cards' titles clear of the index chip in the same corner.
   The live card is wide enough that its title never reaches the chip, and
   padding it would push "Marketing Cost Calculator" onto a second line. */
.tk-card--soon .tk-title { padding-right: 44px !important; }
@media only screen and (max-width: 900px) {
  /* Stacked, the live card is narrow as well, so its title needs the room. */
  .tk-card--live .tk-title { padding-right: 46px !important; }
}
.tk-title { transition: translate .5s var(--t-ease); }
a.tk-card:hover .tk-title { translate: 2px 0; }

.tk-desc {
  position: relative;
  font-family: var(--font-body, "DM Sans", sans-serif);
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--t-ink-3);
  margin: 0 0 26px;
}
.tk-card--live .tk-desc { font-size: 16px; max-width: 46ch; }
/* Reserve the bottom-right corner for the numeral so the pill never overlaps it. */
.tk-card--live .tk-core { padding-bottom: clamp(34px, 3.4vw, 48px); }
.tk-card--live .tk-meta { max-width: 42ch; }

/* ---------- meta rows ---------- */
.tk-meta {
  position: relative;
  margin: 0 0 26px;
  border-top: 1px solid var(--t-line);
}
/* The CTA, not the meta list, absorbs the card's spare height. */
.tk-card--live .tk-go { margin-top: auto; }
/* The "coming next" cards give their slack to the meta list instead, so the
   progress rail stays tucked under the last row rather than floating in a gap. */
.tk-card--soon .tk-meta { margin-bottom: auto; }
.tk-card--soon .tk-go--soon { margin-top: clamp(22px, 2.4vw, 32px); }
.tk-meta-row {
  display: grid;
  grid-template-columns: minmax(0, 82px) minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--t-line);
  transition: border-color .4s var(--t-ease);
}
.tk-meta-row:last-child { border-bottom: 0; }
a.tk-card:hover .tk-meta-row { border-color: rgba(156, 79, 0, .2); }
.tk-meta-row dt {
  font-family: var(--ax-mono, "DM Mono", ui-monospace, monospace);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--t-ink-4);
}
.tk-meta-row dd {
  margin: 0;
  font-family: var(--font-body, "DM Sans", sans-serif);
  font-size: 14px;
  line-height: 1.45;
  color: var(--t-ink-2);
}

/* ---------- go link with nested pip ---------- */
.tk-go {
  position: relative;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 8px 0 22px;
  border-radius: 999px;
  background: var(--t-accent-fill);
  color: #17120c;
  font-family: var(--font-body, "DM Sans", sans-serif);
  font-size: 14.5px;
  font-weight: 700;
  transition: translate .35s var(--t-ease), background .25s;
}
.tk-go-pip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 999px;
  background: rgba(23, 18, 12, .14);
  transition: translate .35s var(--t-ease), scale .35s var(--t-ease), background .25s;
}
a.tk-card:hover .tk-go { translate: 0 -2px; background: #ffa321; }
a.tk-card:hover .tk-go-pip { translate: 2px -1px; scale: 1.06; background: rgba(23, 18, 12, .22); }

.tk-go--soon {
  position: relative;
  flex-direction: column;
  align-items: stretch;
  gap: 9px;
  min-height: 0;
  width: 100%;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--t-ink-4);
  font-family: var(--ax-mono, "DM Mono", ui-monospace, monospace);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
}
/* The rail sits under the label and fills part-way: work started, not done. */
.tk-go--soon::after {
  content: "";
  height: 3px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, var(--t-accent-fill) 0 38%, rgba(38, 31, 24, .1) 38% 100%);
}

/* ═══════════════════════════════════════════════════════════════════
   WHY THESE ARE FREE — three claims side by side, not a wall of text.
   ═══════════════════════════════════════════════════════════════════ */
.tk-why { margin-bottom: clamp(44px, 5vw, 68px); }

.tk-why-head {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: 24px clamp(32px, 5vw, 76px);
  align-items: end;
  padding-bottom: clamp(30px, 3.4vw, 46px);
  margin-bottom: clamp(30px, 3.4vw, 46px);
  border-bottom: 1px solid var(--t-line);
}
@media only screen and (max-width: 900px) {
  .tk-why-head { grid-template-columns: 1fr; align-items: start; }
}

.tk-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ax-mono, "DM Mono", ui-monospace, monospace);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--t-ink-2);
}
.tk-eyebrow::before { content: "\2733"; color: var(--t-accent); font-size: 13px; line-height: 1; }

.tk-why-h2 {
  font-family: var(--ax-sans, "DM Sans", system-ui, sans-serif);
  font-weight: 600;
  font-size: clamp(30px, 4.2vw, 54px);
  line-height: 1.04;
  letter-spacing: -.03em;
  color: var(--t-ink);
  margin: 16px 0 0 !important;
  padding-bottom: 0 !important;
}
.tk-why-lede {
  font-family: var(--font-body, "DM Sans", sans-serif);
  font-size: clamp(15.5px, 1.3vw, 18px);
  line-height: 1.62;
  color: var(--t-ink-2);
  margin: 0;
  max-width: 54ch;
}

.tk-why-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.4vw, 20px);
}
@media only screen and (max-width: 900px) { .tk-why-grid { grid-template-columns: 1fr; } }

.tk-why-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 2.4vw, 34px);
  border-radius: 24px;
  background: var(--t-surface);
  border: 1px solid var(--t-line);
  transition: translate .5s var(--t-ease), border-color .35s, background .35s;
}
.tk-why-card:hover { translate: 0 -5px; border-color: var(--t-accent-line); background: #fffdf9; }

.tk-why-index {
  font-family: var(--ax-mono, "DM Mono", ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--t-accent);
  margin-bottom: 18px;
}
.tk-why-card h3 {
  font-family: var(--ax-sans, "DM Sans", system-ui, sans-serif) !important;
  font-weight: 600 !important;
  font-size: 18px;
  line-height: 1.28;
  letter-spacing: -.015em;
  color: var(--t-ink);
  margin: 0 0 12px !important;
  padding-bottom: 0 !important;
}
.tk-why-card p {
  font-family: var(--font-body, "DM Sans", sans-serif);
  font-size: 14.5px;
  line-height: 1.66;
  color: var(--t-ink-3);
  margin: 0;
}

.tk-why-cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-top: 22px;
  padding: 0 6px 0 18px;
  border-radius: 999px;
  background: var(--t-accent-fill);
  color: #17120c;
  font-family: var(--font-body, "DM Sans", sans-serif);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: translate .35s var(--t-ease), background .25s;
}
.tk-why-cta .tk-go-pip { width: 32px; height: 32px; }
.tk-why-cta:hover { translate: 0 -2px; background: #ffa321; color: #17120c; }
.tk-why-cta:hover .tk-go-pip { translate: 2px -1px; scale: 1.06; }

.tk-serving {
  font-family: var(--font-body, "DM Sans", sans-serif);
  font-size: 14px;
  color: var(--t-ink-4);
  margin: clamp(30px, 3.4vw, 44px) 0 0;
  padding-top: clamp(22px, 2.4vw, 30px);
  border-top: 1px solid var(--t-line);
}

@media (prefers-reduced-motion: reduce) {
  .tk-shell, .tk-go, .tk-go-pip, .tk-why-card, .tk-why-cta, .tk-title, .tk-compare { transition: none; }
  a.tk-card:hover .tk-title { translate: none; }
  a.tk-card .tk-shell:hover, .tk-why-card:hover,
  a.tk-card:hover .tk-go, a.tk-card:hover .tk-go-pip,
  .tk-why-cta:hover, .tk-why-cta:hover .tk-go-pip { translate: none; scale: none; }
}

/* ---------- market-rate preview (live card only) ----------
   Fills the tall hero card with the ranges the calculator actually checks,
   read from tool-benchmarks.ts. It is the reason the card is tall. */
.tk-compare {
  position: relative;
  margin: 0 0 28px;
  padding: 20px 22px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .72);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .9),
    0 1px 2px rgba(76, 51, 24, .04),
    0 14px 30px -18px rgba(76, 51, 24, .18);
  transition: box-shadow .5s var(--t-ease);
}
a.tk-card:hover .tk-compare {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .9),
    0 2px 4px rgba(76, 51, 24, .05),
    0 20px 40px -18px rgba(76, 51, 24, .24);
}
.tk-compare-label {
  font-family: var(--ax-mono, "DM Mono", ui-monospace, monospace);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--t-ink-4);
  margin: 0 0 12px;
}
.tk-compare-list { list-style: none; padding: 0; margin: 0; }
.tk-compare-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--t-line);
}
.tk-compare-list li:last-child { border-bottom: 0; padding-bottom: 2px; }
.tk-compare-name {
  font-family: var(--font-body, "DM Sans", sans-serif);
  font-size: 13.5px;
  color: var(--t-ink-3);
}
.tk-compare-val {
  font-family: var(--ax-mono, "DM Mono", ui-monospace, monospace);
  font-size: 13px;
  font-weight: 500;
  color: var(--t-ink);
  white-space: nowrap;
}
.tk-compare-note {
  font-family: var(--font-body, "DM Sans", sans-serif);
  font-size: 12px;
  line-height: 1.5;
  color: var(--t-ink-4);
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--t-line);
}

@media only screen and (max-width: 900px) {
  /* Stacked, the card is no longer tall, so the preview would pad it out. */
  .tk-compare { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   CALCULATOR — SOURCES TABLE  (.tk-src)
   Was a collapsed <details>. This table IS the page's credibility, so it
   is open by default and laid out as a real three-column ledger.
   ═══════════════════════════════════════════════════════════════════ */
.tk-src { margin: clamp(48px, 5vw, 76px) 0 clamp(40px, 4.4vw, 64px); }

.tk-src-head,
.tk-faq-head {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 22px clamp(32px, 5vw, 72px);
  align-items: end;
  padding-bottom: clamp(26px, 3vw, 38px);
  margin-bottom: clamp(24px, 2.8vw, 34px);
  border-bottom: 1px solid var(--t-line);
}
@media only screen and (max-width: 900px) {
  .tk-src-head, .tk-faq-head { grid-template-columns: 1fr; align-items: start; }
}

.tk-src-h2,
.tk-faq-h2 {
  font-family: var(--ax-sans, "DM Sans", system-ui, sans-serif);
  font-weight: 600;
  font-size: clamp(26px, 3.4vw, 42px);
  line-height: 1.06;
  letter-spacing: -.03em;
  color: var(--t-ink);
  margin: 14px 0 0 !important;
  padding-bottom: 0 !important;
}
.tk-src-lede,
.tk-faq-lede {
  font-family: var(--font-body, "DM Sans", sans-serif);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.6;
  color: var(--t-ink-2);
  margin: 0;
  max-width: 54ch;
}

/* ---------- ledger ---------- */
.tk-src-table {
  border-radius: 20px;
  background: var(--t-surface);
  box-shadow:
    inset 0 0 0 1px var(--t-line),
    0 1px 3px rgba(76, 51, 24, .04),
    0 18px 44px -24px rgba(76, 51, 24, .2);
  overflow: hidden;
}

.tk-src-row {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .8fr) minmax(0, 1.5fr);
  gap: 16px clamp(16px, 2vw, 30px);
  align-items: baseline;
  padding: 15px clamp(18px, 2.2vw, 28px);
  border-bottom: 1px solid var(--t-line);
  transition: background .3s var(--t-ease);
}
.tk-src-row:last-child { border-bottom: 0; }
.tk-src-row:not(.tk-src-row--head):hover { background: #fffaf2; }

.tk-src-row--head {
  background: #f6f2ea;
  font-family: var(--ax-mono, "DM Mono", ui-monospace, monospace);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--t-ink-4);
}

.tk-src-name {
  font-family: var(--font-body, "DM Sans", sans-serif);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--t-ink);
}
.tk-src-val {
  font-family: var(--ax-mono, "DM Mono", ui-monospace, monospace);
  font-size: 13.5px;
  color: var(--t-ink);
  white-space: nowrap;
}
.tk-src-cite {
  font-family: var(--font-body, "DM Sans", sans-serif);
  font-size: 13px;
  line-height: 1.45;
  color: var(--t-ink-4);
}

@media only screen and (max-width: 767px) {
  /* Three columns cannot hold at phone width; stack with the label as a
     prefix so each cell still says what it is. */
  .tk-src-row { grid-template-columns: 1fr; gap: 4px; padding: 16px 18px; }
  .tk-src-row--head { display: none; }
  .tk-src-val { font-size: 14px; }
  .tk-src-cite::before { content: "Source: "; color: var(--t-ink-4); }
}

/* ---------- notes under the ledger ---------- */
.tk-src-notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 18px);
  margin-top: clamp(16px, 1.8vw, 22px);
}
@media only screen and (max-width: 767px) { .tk-src-notes { grid-template-columns: 1fr; } }

.tk-src-note {
  font-family: var(--font-body, "DM Sans", sans-serif);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--t-ink-3);
  margin: 0;
  padding: 16px 18px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .6);
  box-shadow: inset 0 0 0 1px var(--t-line);
}
.tk-src-note strong { color: var(--t-ink); font-weight: 600; }
.tk-src-note a {
  color: var(--t-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.tk-src-note--review { border-left: 3px solid var(--t-accent-fill); }

/* ═══════════════════════════════════════════════════════════════════
   CALCULATOR — FAQ  (.tk-faq)
   Was a bare stack of hairline <details>. Now cards with a number, a
   plus that rotates to a minus, and a proper open state.
   ═══════════════════════════════════════════════════════════════════ */
.tk-faq { margin: clamp(48px, 5vw, 76px) 0 clamp(36px, 4vw, 54px); }

.tk-faq-list { display: grid; gap: 10px; }

.tk-faq-item {
  border-radius: 18px;
  background: var(--t-surface);
  box-shadow: inset 0 0 0 1px var(--t-line);
  transition: box-shadow .35s var(--t-ease), background .35s var(--t-ease);
  overflow: hidden;
}
.tk-faq-item:hover { box-shadow: inset 0 0 0 1px var(--t-accent-line); }
.tk-faq-item[open] {
  background: #fffdf9;
  box-shadow:
    inset 0 0 0 1px var(--t-accent-line),
    0 2px 4px rgba(76, 51, 24, .04),
    0 18px 40px -22px rgba(76, 51, 24, .22);
}

.tk-faq-item > summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  /* 48px minimum touch target. */
  min-height: 56px;
  padding: 14px clamp(16px, 2vw, 24px);
  cursor: pointer;
  list-style: none;
}
.tk-faq-item > summary::-webkit-details-marker { display: none; }
.tk-faq-item > summary::marker { content: ""; }

.tk-faq-n {
  font-family: var(--ax-mono, "DM Mono", ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--t-ink-4);
  transition: color .3s var(--t-ease);
}
.tk-faq-item[open] .tk-faq-n { color: var(--t-accent); }

.tk-faq-q {
  font-family: var(--font-body, "DM Sans", sans-serif);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--t-ink);
}

.tk-faq-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  color: var(--t-accent);
  background: var(--t-accent-soft);
  box-shadow: inset 0 0 0 1px var(--t-accent-line);
  transition: rotate .4s var(--t-ease), background .3s var(--t-ease);
}
/* The plus becomes a minus by rotating 45 degrees — one glyph, two states. */
.tk-faq-item[open] .tk-faq-ico { rotate: 45deg; background: var(--t-accent-fill); color: #17120c; }

.tk-faq-a {
  padding: 0 clamp(16px, 2vw, 24px) 20px;
  /* Align the answer under the question, past the number column. */
  padding-left: calc(clamp(16px, 2vw, 24px) + 16px + 11px);
}
.tk-faq-a p {
  font-family: var(--font-body, "DM Sans", sans-serif);
  font-size: 14.5px;
  line-height: 1.68;
  color: var(--t-ink-3);
  margin: 0;
  max-width: 68ch;
}
@media only screen and (max-width: 575px) {
  .tk-faq-a { padding-left: clamp(16px, 2vw, 24px); }
  .tk-faq-q { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .tk-faq-item, .tk-faq-ico, .tk-src-row { transition: none; }
}