/* ==========================================================================
   Tools — the v6 language on the v5 page (pages/tools.css).
   Loaded after theme.css; the v5 page CSS sits in the lower layer (v5), so plain rules here win.
   Sections, top to bottom: #hero (blue opening) · #catalog (the ease into the ground; one row per tool) ·
   #compare · #redaction (blue panel + three boxes) · #work-life · #faq · #closing (full-bleed blue into the footer).
   ========================================================================== */

/* ---------------------------------------------------------------- shared on this page */
html body .tl-page {
  --v6-on-blue: rgba(236, 244, 252, .86);
  --v6-on-blue-2: rgba(226, 238, 250, .78);
  --v6-card-shadow: inset 0 0 0 1px rgba(16, 45, 73, .07), 0 1px 2px rgba(16, 45, 73, .05), 0 16px 40px -24px rgba(16, 45, 73, .32);
  --v6-blue-panel: rgba(191, 227, 255, .07);
  --v6-blue-line: rgba(191, 227, 255, .2);
}
html body .tl-page .kd-eyebrow { font: 600 12.5px/1.2 var(--font-sans); letter-spacing: .15em; text-transform: uppercase; }
/* the pull-quote stroke: flat blue, not a gradient */
html body .tl-page .kd-quote::before { background: #006bcb; }

/* list bullets: the logo's slanted stroke in blue — markers are blue; the orange stays for the action,
   the H1 rule, the chapter slashes and the seal (theme.css paints every .kd-marks bullet orange) */
html body .tl-page ul.kd-marks > li::before {
  top: 5px; width: 3px; height: 14px; border-radius: 2px; background: #006bcb; transform: skewX(-14deg) rotate(-8deg);
}

/* ---------------------------------------------------------------- 1. #hero — the blue opening */
/* The hero paints the blue as its background-colour (site.js reads it to give the nav its dark tone);
   the ease into the pale ground happens at the top of #catalog below. */
html body .tl-page > #hero.tl-hero {
  padding: 168px 0 64px !important; color: #fff;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 72'%3E%3Cg transform='translate(40 36) rotate(-8) skewX(-14) translate(-31 -32)' stroke-linecap='round' stroke-width='6.5'%3E%3Cpath d='M13 14V50' stroke='%23004e99' stroke-opacity='.16'/%3E%3Cpath d='M25 9V55' stroke='%23004e99' stroke-opacity='.22'/%3E%3Cpath d='M37 13V51' stroke='%23004e99' stroke-opacity='.13'/%3E%3Cpath d='M49 18V46' stroke='%23004e99' stroke-opacity='.18'/%3E%3C/g%3E%3C/svg%3E") right -6vw top 24px / auto calc(100% - 24px) no-repeat,
    #2a64a0;
}
html body .tl-page .tl-hero-row { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 56px; }
html body .tl-page .tl-hero-copy { gap: 0; }
html body .tl-page .tl-hero .kd-eyebrow {
  display: flex; align-items: center; margin: 0 0 24px; color: #d6eeff; font-size: 12.5px; line-height: 1;
}
html body .tl-page .tl-hero .kd-eyebrow::before {
  content: ""; flex: none; width: 3px; height: 13px; margin-right: 10px; border-radius: 2px;
  background: #ff762b; transform: skewX(-14deg) translateY(1px);
}
html body .tl-page .tl-hero h1 {
  /* the landing's scale, capped so each phrase ("Never the original.") keeps its own line beside the capture */
  margin: 0; font: 650 clamp(44px, 4.2vw, 60px)/.98 var(--font-display); letter-spacing: -.038em; color: #fff;
}
html body .tl-page .tl-hero h1 > .text-slate { color: #a9dcff; }
html body .tl-page .tl-hero h1 .kd-rule { margin: 18px 0 20px; background: #ff762b; }
html body .tl-page .tl-hero .tl-sub {
  margin-top: 26px; max-width: 36ch; font: 400 clamp(19px, 1.7vw, 23px)/1.45 var(--font-sans); letter-spacing: -.012em; color: var(--v6-on-blue);
}
html body .tl-page .tl-hero-cta { margin-top: 32px; }
html body .tl-page .tl-hero .btn-secondary { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(191, 227, 255, .45); }
html body .tl-page .tl-hero .btn-secondary:hover { background: rgba(191, 227, 255, .1); box-shadow: inset 0 0 0 1.5px rgba(191, 227, 255, .7); }
html body .tl-page .tl-cta-note { margin-top: 16px; color: var(--v6-on-blue); font-size: 13px; }
/* the actual capture: a quiet blue frame, the capture itself lifted on it */
html body .tl-page .tl-hero-media {
  padding: 12px; border: 0; border-radius: 24px; background: var(--v6-blue-panel); box-shadow: inset 0 0 0 1px var(--v6-blue-line);
}
html body .tl-page .tl-hero-media .mock-frame { border-radius: 14px; box-shadow: 0 2px 4px rgba(6, 22, 42, .08), 0 24px 60px -18px rgba(6, 22, 42, .4); }
html body .tl-page .tl-hero-caption { color: var(--v6-on-blue); border-left-color: rgba(191, 227, 255, .55); }
html body .tl-page .tl-hero-caption::before { background: rgba(191, 227, 255, .55); }
html body .tl-page .tl-hero-caption .btn-link { color: #d6eeff; }
/* the proof label under the capture: v5 paints it as a white strip (.capture-actual .capture-badge);
   on the blue opening it is a quiet caption line on the panel, same text, readable */
html body .tl-page .tl-hero-media .capture-badge {
  margin: 10px 0 2px; background: transparent; box-shadow: none;
  color: rgba(236, 244, 252, .86); border-left-color: rgba(191, 227, 255, .55);
}

/* ---------------------------------------------------------------- 3. #compare — two cards (now after the catalogue, leading into redaction) */
html body .tl-page .tl-compare-card { background: #fff; border: 0; border-radius: 22px; box-shadow: var(--v6-card-shadow); }
html body .tl-page .tl-compare-card.is-with { box-shadow: inset 0 0 0 1.5px rgba(0, 107, 203, .22), 0 1px 2px rgba(16, 45, 73, .05), 0 16px 40px -24px rgba(16, 45, 73, .32); }
html body .tl-page .tl-compare-demo { background: #f5f8fb; border: 0; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(16, 45, 73, .07); }

/* ---------------------------------------------------------------- 2. #catalog — every tool, one compact row each */
/* the opening eases into the ground at the top of the catalogue */
html body .tl-page > #hero ~ #catalog.tl-catalog {
  padding-top: 144px; background: linear-gradient(180deg, #2a64a0 0, rgba(42, 100, 160, 0) 132px);
}
/* each group is one white card of rows: icon · name · one line (no thumbnails, so 2, 3 or 4 tools never leave an orphan) */
html body .tl-page .tl-cards.tl-rows {
  display: block; overflow: hidden; border-radius: 20px; background: #fff; box-shadow: var(--v6-card-shadow);
}
html body .tl-page .tl-card.tl-row {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; align-items: start;
  padding: 18px 22px; border: 0; border-radius: 0; background: transparent; box-shadow: none;
}
html body .tl-page .tl-card.tl-row + .tl-card.tl-row { border-top: 1px solid rgba(16, 45, 73, .08); }
html body .tl-page .tl-row-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #e3f2ff; color: #006bcb; }
html body .tl-page .tl-row-icon .icon { width: 22px; height: 22px; }
html body .tl-page .tl-card.tl-row h3 { margin: 1px 0 3px; font: 650 17px/1.3 var(--font-display); letter-spacing: -.02em; color: #102d49; }
html body .tl-page .tl-card.tl-row p { margin: 0; font: 400 14.5px/1.55 var(--font-sans); color: #3f5470; }
html body .tl-page .tl-card.tl-row p a { color: #006bcb; white-space: nowrap; }
html body .tl-page .tl-card.tl-row p a:hover { text-decoration: underline; }
html body .tl-page #ocr { scroll-margin-top: 120px; }
html body .tl-page .tl-search { border: 0; border-radius: 999px; padding: 10px 18px; background: #fff; box-shadow: inset 0 0 0 1.5px #dfe6ee; }
html body .tl-page .tl-search:focus-within { box-shadow: inset 0 0 0 1.5px #006bcb; }
html body .tl-page .tl-nav { border: 0; border-radius: 18px; padding: 8px; background: #fff; box-shadow: var(--v6-card-shadow); }
html body .tl-page .tl-nav a { border-radius: 10px; }
html body .tl-page .tl-nav a:hover { background: #f5f8fb; }
html body .tl-page .tl-nav a.is-active { background: #eef6ff; color: #004e99; }
html body .tl-page .tl-nav a.is-active::before { background: #006bcb; }
html body .tl-page .tl-article-head { border-bottom-color: rgba(16, 45, 73, .08); }
/* group headings inside the catalogue keep v5's blue marker (the orange is for chapter headings) */
html body .tl-page .tl-article-head .kd-h2::before { background: #006bcb; }

/* ---------------------------------------------------------------- 4. #redaction — a flat blue panel, then three boxes */
html body .tl-page .tl-redaction-intro {
  width: calc(100% - 48px); max-width: 1224px; margin: 0 auto; border-radius: 28px; padding: 72px 0;
}
/* the step rail is gone (the three boxes carry the steps): the title takes the panel */
html body .tl-page .tl-redaction-intro .tl-wrap { grid-template-columns: minmax(0, 1fr); }
html body .tl-page .tl-redaction-intro .tl-sub { max-width: 58ch; }
html body .tl-page .tl-redaction-intro .kd-eyebrow { color: #d6eeff; }
html body .tl-page .tl-redaction-intro h2 { color: #fff; }
html body .tl-page .tl-redaction-intro h2 .text-sky { color: #a9dcff; }
/* each half of the redaction heading balances on its own, so no lone "for," or "you." on a phone */
html body .tl-page .tl-redaction-intro h2 > span { display: block; text-wrap: balance; }
html body .tl-page .tl-redaction-intro h2 > br { display: none; }
html body .tl-page .tl-redaction-intro .tl-sub { color: var(--v6-on-blue); }
html body .tl-page .tl-box { border-bottom-color: rgba(16, 45, 73, .08); }
html body .tl-page .tl-pii-col { background: #fff; border: 0; border-radius: 18px; box-shadow: var(--v6-card-shadow); }
html body .tl-page .tl-pii-found { background: #eef6ff; box-shadow: inset 0 0 0 1px rgba(0, 107, 203, .16); }
html body .tl-page .tl-box-media > .mock { border: 0; border-radius: 20px; overflow: hidden; box-shadow: var(--v6-card-shadow); }
html body .tl-page .tl-triptych { background: #f5f8fb; }
html body .tl-page .tl-pane { border: 0; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(16, 45, 73, .08); }
html body .tl-page .tl-report-head { background: #f5f8fb; }
html body .tl-page .tl-report-row { border-top-color: rgba(16, 45, 73, .08); }
/* the verdict: a flat blue bar with white text, not v5's peach (orange is kept for the action and the seal) */
html body .tl-page .tl-report-verdict { background: #2a64a0; color: #fff; font-weight: 650; }
/* the found runs: the landing's clause highlight (sky tint), not peach */
html body .tl-page .tl-pii-run { background: #e3f2ff; color: #102d49; }

/* ---------------------------------------------------------------- 5. #work-life — two scenario cards */
html body .tl-page .tl-scenarios .scenario { background: #fff; border: 0; border-radius: 22px; box-shadow: var(--v6-card-shadow); }

/* ---------------------------------------------------------------- 7b. #faq — padded question cards */
/* theme.css makes each .accordion-item a white card; v5's plain accordion has no side padding
   (trigger 20px 0, body 0 32px 20px 0), so the text and the + sat on the card edges */
html body .tl-page .tl-faq .accordion { border-top: 0; }
html body .tl-page .tl-faq .accordion-trigger { padding: 20px 24px; }
html body .tl-page .tl-faq .accordion-body { padding: 0 24px 22px; color: #3f5470; }
html body .tl-page .tl-faq .accordion-item:has([aria-expanded="true"]) { box-shadow: inset 0 0 0 1.5px rgba(0, 107, 203, .3); }

/* ---------------------------------------------------------------- 8. #closing — full-bleed blue, straight into the footer */
html body .tl-page > #closing { background: #2a64a0; padding: 112px 0 96px !important; }
html body .tl-page > #closing > .cta-gradient {
  display: block; width: 100% !important; max-width: 1160px !important; margin: 0 auto !important; padding: 0 40px !important;
  background: transparent; box-shadow: none;
}
/* the v5 corner mark is already blank in v6 (theme.css); drop its empty column */
html body .tl-page #closing .cta-gradient::after { content: none; }
html body .tl-page #closing .cta-gradient-inner { max-width: none; margin: 0; }
html body .tl-page #closing .eyebrow { display: flex; align-items: center; margin-bottom: 2px; color: #d6eeff; font-size: 12.5px; letter-spacing: .15em; }
html body .tl-page #closing .eyebrow::before {
  content: ""; flex: none; width: 3px; height: 13px; margin-right: 10px; border-radius: 2px;
  background: #ff762b; transform: skewX(-14deg) translateY(1px);
}
html body .tl-page #closing h2.kd-h2 { padding-left: 0; }
html body .tl-page #closing h2.kd-h2::before { content: none; }
html body .tl-page #closing .btn-onblue {
  color: #fff; border: 0; border-radius: 999px;
  background: linear-gradient(180deg, #ff8f45 0%, #ff6a30 55%, #ff5528 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(160,40,10,.25), 0 1px 2px rgba(120,30,0,.25), 0 8px 22px -6px rgba(255,90,40,.55);
}
html body .tl-page #closing .btn-onblue:hover { background: linear-gradient(180deg, #ff9a55 0%, #ff7036 55%, #ff5a2c 100%); color: #fff; }

/* ---------------------------------------------------------------- tablet and phone */
@media (max-width: 900px) {
  html body .tl-page .tl-hero-row { grid-template-columns: 1fr; gap: 40px; }
  html body .tl-page .tl-redaction-intro { padding: 56px 0; }
}
/* v5 squeezes the hero actions into a grid at 600px (primary shrinks to a 13px pill, the ghost stretches);
   keep both pills full-size at their natural width, as on the landing's phone fold */
@media (max-width: 600px) {
  html body .tl-page .tl-hero-cta { display: flex; flex-wrap: wrap; gap: 10px; }
  html body .tl-page .tl-hero-cta .btn { min-height: 48px; padding: 0 22px; font-size: 15px; }
  /* v5 drops the proof label to 9px here; keep it at the caption size */
  html body .tl-page .tl-hero-media .capture-badge { font-size: 12px; letter-spacing: 0; }
}
@media (max-width: 640px) {
  html body .tl-page > #hero.tl-hero { padding: 124px 0 48px !important; }
  html body .tl-page .tl-hero h1 { font-size: clamp(40px, 11vw, 46px); }
  html body .tl-page .tl-hero h1 .kd-rule { width: 88px; margin: 14px 0 16px; }
  html body .tl-page .tl-hero .tl-sub { font-size: 18px; margin-top: 18px; }
  html body .tl-page .tl-hero-cta { margin-top: 24px; }
  html body .tl-page .tl-hero-media { padding: 8px; border-radius: 18px; }
  html body .tl-page .tl-faq .accordion-trigger { padding: 18px; }
  html body .tl-page .tl-faq .accordion-body { padding: 0 18px 20px; }
  html body .tl-page > #hero ~ #catalog.tl-catalog { padding-top: 112px; background: linear-gradient(180deg, #2a64a0 0, rgba(42, 100, 160, 0) 100px); }
  html body .tl-page .tl-card.tl-row { padding: 16px; gap: 14px; }
  html body .tl-page .tl-card.tl-row p a { white-space: normal; }
  html body .tl-page .tl-redaction-intro { width: calc(100% - 20px); border-radius: 22px; padding: 48px 0; }
  html body .tl-page > #closing { padding: 88px 0 72px !important; }
  html body .tl-page > #closing > .cta-gradient { padding: 0 20px !important; }
}

/* kda · the app panel: shared, in theme.css */