/* ═══════════════════════════════════════════════════════════════════════════
   AI FEATURES PAGES — the public, one-page-per-tool catalogue (2026-09-23)
   Loaded AFTER style.css and site.css; uses their --lp-* tokens, no colours of its own
   except through them. The pages are GENERATED by tools/build-feature-pages.js.
   ═══════════════════════════════════════════════════════════════════════════ */

.tp-hero { padding-block: 48px 28px; }
.tp-hero h1 { font-size: clamp(28px, 4.5vw, 42px); line-height: 1.15; margin-top: 10px; }
.tp-lead { color: var(--lp-ink-soft); max-width: 680px; margin: 14px 0 0; font-size: 17px; }
.tp-stats { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.tp-stat { background: var(--lp-surface); border: 1px solid var(--lp-line); border-radius: 14px; padding: 14px 20px; min-width: 150px; }
.tp-stat b { display: block; font: 800 30px/1 var(--lp-display); color: var(--lp-brand); }
.tp-stat span { font-size: 14px; color: var(--lp-muted); }

/* The landing page's opening section, copied in and made smaller */
.tp-promo { background: var(--lp-surface); border-block: 1px solid var(--lp-line); margin-bottom: 36px; }
.tp-promo.lp-hero { padding-block: 36px; }
.tp-promo.lp-hero .lp-wrap { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px; }
.lp-hero .tp-hero-h { margin-top: 12px; font-size: clamp(24px, 3.2vw, 34px); line-height: 1.12; letter-spacing: -.035em; font-weight: 800; }
.tp-hero-h em { font-style: normal; color: var(--lp-brand); }
.tp-promo .lp-lede { font-size: 16px; margin: 10px 0 0; }
.tp-promo .lp-actions { margin-top: 18px; }

/* One card per feature */
.tp-list { display: grid; gap: 16px; padding-bottom: 40px; }
.tp-feat { background: var(--lp-surface); border: 1px solid var(--lp-line); border-radius: 16px; padding: 22px 24px; box-shadow: var(--lp-shadow); }
.tp-feat h3 { font-size: 20px; }
.tp-sub { margin: 4px 0 0; color: var(--lp-muted); font-size: 15px; }
.tp-what { margin: 12px 0 0; color: var(--lp-ink-soft); overflow-wrap: anywhere; }
.tp-links { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--lp-line); font-size: 14px; }
.tp-link { display: inline-flex; flex-wrap: wrap; gap: 6px; text-decoration: none; color: var(--lp-ink); font-weight: 600; }
.tp-link span { font-weight: 400; color: var(--lp-brand); }
.tp-link-sw { background: var(--lp-ok-tint); color: var(--lp-ok); padding: 6px 12px; border-radius: 999px; }
.tp-link-sw span { color: var(--lp-ok); }
.tp-none { background: var(--lp-warn-tint); color: var(--lp-warn); padding: 6px 12px; border-radius: 999px; font-weight: 600; }
.tp-date { color: var(--lp-muted); margin-left: auto; }
/* No-link cards (2026-10-07, ADP first): the path to the vendor's page stands in for the
   link, on its own line so a long path wraps under the label rather than squeezing the date. */
.tp-look { flex: 1 1 100%; order: 3; color: var(--lp-ink-soft); line-height: 1.5; overflow-wrap: anywhere; }
.tp-look b { display: block; font-family: var(--lp-mono); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; color: var(--lp-muted); margin-bottom: 2px; }
/* LinkedIn's rows say in their own description where the switch is — a neutral pill. */
.tp-swtext { background: var(--lp-brand-tint); color: var(--lp-brand-deep); padding: 6px 12px; border-radius: 999px; font-weight: 600; }
.tp-nolink { margin: 12px 0 0; padding: 10px 14px; border-left: 3px solid var(--lp-brand); background: var(--lp-brand-tint); border-radius: 0 10px 10px 0; color: var(--lp-ink-soft); font-size: 15px; }

/* The sell, the note, and the quiet links to the other tool pages */
.tp-cta { background: var(--lp-brand); color: #FFFFFF; border-radius: 20px; padding: 32px; margin-bottom: 48px; display: grid; gap: 14px; }
.tp-cta h2 { color: #FFFFFF; font-size: 26px; }
.tp-cta p { margin: 0; opacity: .9; }
.tp-cta .lp-btn { background: #FFFFFF; color: var(--lp-brand); justify-self: start; }
.tp-about { font-size: 14px; color: var(--lp-muted); padding-bottom: 24px; margin: 0; }
.tp-more { font-size: 14px; color: var(--lp-muted); padding-bottom: 40px; margin: 0; }
.tp-more a { color: var(--lp-brand); }

/* The list page */
.tp-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); grid-auto-rows: minmax(146px, auto); gap: 16px; padding-bottom: 40px; }
.tp-tool { display: grid; gap: 6px; align-content: start; background: var(--lp-surface); border: 1px solid var(--lp-line); border-radius: 16px; padding: 20px 22px; text-decoration: none; color: var(--lp-ink); box-shadow: var(--lp-shadow); }
.tp-tool:hover { border-color: var(--lp-brand); }
.tp-tool b { font: 700 19px/1.25 var(--lp-display); }
.tp-tool span { font-size: 14px; color: var(--lp-muted); }

@media (max-width: 900px) {
  .tp-promo.lp-hero .lp-wrap { grid-template-columns: 1fr; gap: 24px; }
  .tp-promo .lp-shot { max-width: 420px; }
}
@media (max-width: 600px) {
  .lp-wrap { padding-inline: 16px; }
  .tp-feat { padding: 18px; }
  .tp-date { margin-left: 0; }
  .tp-cta { padding: 24px; }
}

/* The last tile on the list page: not a link, says the list is still growing (user, 2026-09-23).
   Looks like the other tiles. Static blue clockwise (refresh-style) arrow under the text: a spinner looked like something had got stuck. */
.tp-tool-more { text-align: center; justify-items: center; }   /* title, subtitle and arrow all centred */
.tp-tool-more:hover { border-color: var(--lp-line); }   /* not a link, so no hover colour */
.tp-arrow { justify-self: center; width: 30px; height: 30px; margin-top: 6px; fill: none; stroke: var(--lp-brand); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ── 2026-09-30: last-checked figure, What changed, the form, the method page ─────── */
.tp-stat-date b { font-size: 22px; line-height: 1.36; }
.tp-method-link { margin: 14px 0 0; font-weight: 600; }
.tp-method-link a, .tp-about a { color: var(--lp-brand); }

/* What changed — a dated list; shown only once a tool has real entries */
.tp-changes { padding-bottom: 36px; }
.tp-changes h2 { font-size: 22px; margin-bottom: 12px; }
.tp-changes ul { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--lp-brand-tint); }
.tp-changes li { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 8px 0 8px 16px; font-size: 15px; }
.tp-changes time { font: 600 14px/1.5 var(--lp-mono); color: var(--lp-brand); }
.tp-changes-note { font-size: 13px; color: var(--lp-muted); margin: 10px 0 0; }

/* The form — one box, email optional */
.tp-form { background: var(--lp-panel); border: 1px solid var(--lp-line); border-radius: 18px; padding: 26px 28px; margin-bottom: 40px; display: grid; gap: 12px; max-width: 760px; }
.tp-form h2 { font-size: 22px; }
.tp-form p { margin: 0; color: var(--lp-ink-soft); }
.tp-field { display: grid; gap: 6px; font-weight: 600; font-size: 14px; }
.tp-field em { font-style: normal; font-weight: 400; color: var(--lp-muted); }
.tp-field textarea, .tp-field input { font: inherit; font-weight: 400; font-size: 16px; padding: 10px 12px; border: 1px solid var(--lp-line); border-radius: 10px; background: var(--lp-surface); color: var(--lp-ink); width: 100%; box-sizing: border-box; }
.tp-field textarea:focus, .tp-field input:focus { outline: 2px solid var(--lp-brand); outline-offset: 1px; border-color: var(--lp-brand); }
.tp-form .lp-btn { justify-self: start; }
.tp-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }   /* bot trap, not for people */

/* The method page */
.tp-ico { width: 26px; height: 26px; fill: none; stroke: var(--lp-brand); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.tp-mtiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-top: 26px; }
.tp-mtile { display: grid; gap: 6px; background: var(--lp-surface); border: 1px solid var(--lp-line); border-radius: 16px; padding: 18px 20px; box-shadow: var(--lp-shadow); }
.tp-mtile b { font: 700 18px/1.25 var(--lp-display); color: var(--lp-ink); }
.tp-mtile span { font-size: 14px; color: var(--lp-muted); }
.tp-method { padding-bottom: 8px; }
.tp-method > h2 { font-size: 26px; margin-bottom: 18px; }
.tp-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.tp-step { position: relative; display: flex; gap: 14px; align-items: flex-start; background: var(--lp-surface); border: 1px solid var(--lp-line); border-radius: 16px; padding: 22px 22px 20px; box-shadow: var(--lp-shadow); }
.tp-step-n { position: absolute; top: -12px; left: 18px; width: 26px; height: 26px; border-radius: 50%; background: var(--lp-brand); color: #FFFFFF; font: 700 13px/26px var(--lp-display); text-align: center; }
.tp-step .tp-ico { width: 34px; height: 34px; padding: 8px; box-sizing: content-box; background: var(--lp-brand-tint); border-radius: 12px; }
.tp-step b { font: 700 18px/1.3 var(--lp-display); }
.tp-step p { margin: 6px 0 0; color: var(--lp-ink-soft); font-size: 15px; }
.tp-sources { margin: 22px 0 0; padding: 12px 16px; border-left: 3px solid var(--lp-warn); background: var(--lp-warn-tint); border-radius: 0 10px 10px 0; font-size: 15px; }
.tp-inout { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin: 24px 0 36px; }
.tp-in, .tp-out { border-radius: 16px; padding: 20px 22px; border: 1px solid var(--lp-line); }
.tp-in { background: var(--lp-ok-tint); }
.tp-out { background: var(--lp-panel); }
.tp-in h3, .tp-out h3 { font-size: 18px; margin-bottom: 10px; }
.tp-inout ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tp-inout li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.tp-mark { width: 20px; height: 20px; flex: none; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; margin-top: 2px; }
.tp-in .tp-mark { stroke: var(--lp-ok); }
.tp-out .tp-mark { stroke: var(--lp-muted); }

@media (max-width: 600px) {
  .tp-form { padding: 20px; }
  .tp-changes li { grid-template-columns: 1fr; gap: 2px; }
  .tp-steps { grid-template-columns: 1fr; }
}
/* 2026-09-30 (user): a prompt near the top that jumps to the form, and the date figure as a link to the method page */
.tp-askwrap { padding-bottom: 18px; }
.tp-ask { margin: 0; }
.tp-ask a { display: inline-block; background: var(--lp-brand-tint); color: var(--lp-brand-deep); font-weight: 600; font-size: 15px; padding: 10px 16px; border-radius: 999px; text-decoration: none; }
.tp-ask a:hover { text-decoration: underline; }
a.tp-stat { text-decoration: none; color: inherit; }
a.tp-stat:hover { border-color: var(--lp-brand); }
.tp-form { scroll-margin-top: calc(var(--lp-bar-h) + 16px); }
/* 2026-09-30 (user): the trail at the top of each tool page, and the method page's closing button */
.tp-crumbs { font-size: 14px; color: var(--lp-muted); display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.tp-crumbs a { color: var(--lp-brand); font-weight: 600; }
.tp-crumbs [aria-current] { color: var(--lp-ink); font-weight: 600; }
.tp-enter { margin: 0 0 36px; }

/* ── 2026-10-03: the list page as ROWS, A–Z (user: "more compact") ─────────────────
   One white panel; a row per tool. The tool name and maker sit on the left, and the two numbers
   are bold so they can be compared down the column. On phones each row folds to two lines. */
.tp-tools { display: block; padding-bottom: 40px; }
.tp-rows-head, .tp-row { display: grid; grid-template-columns: minmax(0, 2.2fr) 1fr 1.2fr 20px; gap: 16px; align-items: center; }
.tp-rows-head { padding: 0 22px 10px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--lp-muted); }
.tp-rows { list-style: none; margin: 0; padding: 0; background: var(--lp-surface); border: 1px solid var(--lp-line); border-radius: 16px; box-shadow: var(--lp-shadow); overflow: hidden; }
.tp-rows li + li { border-top: 1px solid var(--lp-line); }
.tp-row { padding: 14px 22px; text-decoration: none; color: var(--lp-ink); }
a.tp-row:hover { background: color-mix(in srgb, var(--lp-brand) 6%, transparent); }
a.tp-row:hover .tp-row-name b { color: var(--lp-brand); }
.tp-row-name { display: grid; gap: 2px; min-width: 0; }
.tp-row-name b { font: 700 17px/1.25 var(--lp-display); }
.tp-row-name span, .tp-row-date { font-size: 13px; color: var(--lp-muted); }
.tp-row-num { font-size: 13px; color: var(--lp-muted); }
.tp-row-num b { font: 700 18px/1 var(--lp-display); color: var(--lp-ink); margin-right: 2px; }
.tp-row-go { width: 18px; height: 18px; fill: none; stroke: var(--lp-brand); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* The header row already names each column, so the words after the numbers only show on phones. */
.tp-row-num { white-space: nowrap; }
@media (min-width: 761px) {
  .tp-row-num { font-size: 0; }
  .tp-row-num b { font-size: 18px; }
}
.tp-rows .tp-row-more { display: flex; gap: 12px; align-items: center; color: var(--lp-muted); font-size: 14px; }
.tp-row-more b { color: var(--lp-ink); margin-right: 4px; }
.tp-row-more .tp-arrow { margin: 0; width: 22px; height: 22px; flex: none; }
@media (max-width: 760px) {
  .tp-rows-head { display: none; }
  .tp-row { grid-template-columns: auto 1fr 18px; gap: 4px 14px; padding: 14px 16px; }
  .tp-row-name { grid-column: 1 / -2; }
  .tp-row-go { grid-column: -2; grid-row: 1 / span 2; }
  .tp-row-date { text-align: right; }
}
.tp-row-date i { font-style: normal; }
@media (min-width: 761px) { .tp-row-date i { display: none; } }   /* the column heading already says it */

/* STACKED ROW (2026-10-07, Macorva first): labelled lines under the description. */
.tp-facts { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--lp-line); display: grid; gap: 8px; font-size: 14px; }
.tp-fact { display: grid; grid-template-columns: 200px 1fr; gap: 4px 14px; align-items: baseline; }
.tp-fact dt { font-family: var(--lp-mono); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; color: var(--lp-muted); }
.tp-fact dd { margin: 0; color: var(--lp-ink-soft); line-height: 1.5; overflow-wrap: anywhere; }
.tp-fact .tp-date { margin-left: 8px; }
.tp-nf { color: var(--lp-ink-soft); }
@media (max-width: 600px) { .tp-fact { grid-template-columns: 1fr; } .tp-fact .tp-date { margin-left: 0; display: block; } }
.tp-scope { display: inline-block; margin-right: 10px; color: var(--lp-ink); font-weight: 600; }
.tp-section { color: var(--lp-muted); }