/* Free tools (/tools/). October 2026.
   Loaded after kennel.css, so the tokens, nav, footer and buttons come from there.
   The 21st and MagicUI ports below are the same ones the homepage uses (ShiningText,
   Shimmer Button, How It Works Steps, the FAQ chevron rows), retuned to the Kennel
   tokens so every page reads as one site. */

.tool-page { position: relative; z-index: 2; padding: clamp(28px, 5vw, 64px) 0 clamp(64px, 8vw, 110px); }
.tool-page .container { width: var(--container-wide); max-width: var(--container-wide); margin: 0 auto; }
.tool-page h2 { margin: 0 0 14px; font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 3vw, 36px); line-height: 1.1; color: var(--display); text-wrap: balance; }
.tool-page h3 { color: var(--display); }
.tool-section { margin-top: clamp(56px, 7vw, 88px); }
.tool-section > p, .tool-prose p { max-width: 70ch; color: var(--muted); }
.tool-section-head { max-width: 760px; margin-bottom: 24px; }
.tool-section-head p { margin: 0; color: var(--muted); }
.tool-eyebrow { display: block; margin-bottom: 10px; font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--violet-ink); }

/* Visually hidden, still read by screen readers. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Breadcrumb */
.tool-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 26px; font-family: var(--font-mono); font-size: 12.5px; color: var(--faint); }
.tool-crumbs a { color: var(--muted); }
.tool-crumbs a:hover { color: var(--violet-ink); }
.tool-crumbs [aria-current] { color: var(--text); }

/* Hero */
.tool-hero { max-width: 820px; margin-bottom: clamp(28px, 4vw, 40px); }
.tool-hero h1 { margin: 16px 0 14px; font-family: var(--font-display); font-weight: 700; font-size: clamp(36px, 5.4vw, 64px); line-height: 1.02; letter-spacing: -0.01em; color: var(--display); text-wrap: balance; overflow-wrap: anywhere; }
.tool-hero p { margin: 0; max-width: 62ch; font-size: clamp(17px, 1.3vw, 20px); color: var(--muted); }
.tool-kicker { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: var(--r-pill); background: var(--violet-soft); border: 1px solid var(--line-2); font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.tool-kicker .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--win); box-shadow: 0 0 0 4px var(--win-soft); }

/* ShiningText. vanilla port of components/ui/shining-text.tsx, as on the homepage. */
.shining-text { color: var(--violet-ink); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .shining-text {
        background-image: linear-gradient(110deg, var(--violet-ink) 0%, var(--violet-ink) 35%, #ffffff 50%, var(--violet-ink) 65%, var(--violet-ink) 100%);
        background-size: 200% 100%;
        -webkit-background-clip: text; background-clip: text;
        -webkit-text-fill-color: transparent; color: transparent;
        animation: shiningText 2.4s linear infinite;
    }
}
@keyframes shiningText { from { background-position: 200% 0; } to { background-position: -200% 0; } }
[data-a11y-motion="reduce"] .shining-text, [data-a11y-epilepsy="true"] .shining-text,
[data-theme="light"] .shining-text {
    animation: none; background-image: none; color: var(--violet-ink); -webkit-text-fill-color: var(--violet-ink);
}
@media (prefers-reduced-motion: reduce) {
    html:not([data-a11y-motion="off"]) .shining-text { animation: none; background-image: none; color: var(--violet-ink); -webkit-text-fill-color: var(--violet-ink); }
}

/* Calculator shell */
.calc { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 0; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.04); }
.calc::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 90% at 0% 0%, var(--violet-soft), transparent 60%); pointer-events: none; }
.calc > * { position: relative; }
.calc-in { padding: clamp(22px, 3vw, 34px); display: flex; flex-direction: column; gap: 18px; }
.calc-out { padding: clamp(22px, 3vw, 34px); display: flex; flex-direction: column; gap: 14px; background: var(--bg-2); border-left: 1px solid var(--line); }
.calc-title { margin: 0; font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }

.field { display: flex; flex-direction: column; gap: 8px; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.field label, .field .label { font-size: 14px; font-weight: 600; color: var(--text); }
.calc .hint { margin: 0; font-size: 13px; color: var(--faint); line-height: 1.45; }
.calc .hint a, .calc-foot a { color: var(--violet-ink); text-decoration: underline; text-underline-offset: 3px; }
.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap .affix { position: absolute; font-family: var(--font-mono); font-size: 16px; color: var(--faint); pointer-events: none; }
.input-wrap .affix.pre { left: 16px; }
.input-wrap .affix.post { right: 16px; }
.calc .input-wrap.has-pre input { padding-left: 34px; }
.calc .input-wrap.has-post input { padding-right: 40px; }
.calc input[type="text"] {
    width: 100%; height: 56px; padding: 0 16px; border-radius: 14px;
    border: 1px solid var(--line-2); background: var(--bg-2); color: var(--display);
    font-family: var(--font-mono); font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.calc input[type="text"]::placeholder { color: var(--faint); font-weight: 500; }
.calc input[type="text"]:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.2); }
.calc input[aria-invalid="true"] { border-color: #ff7a8a; box-shadow: 0 0 0 3px rgba(255, 122, 138, 0.16); }
.side-name { font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--muted); }

/* Segmented control for the price format */
.seg { display: inline-flex; padding: 4px; gap: 4px; border-radius: var(--r-pill); background: var(--bg-2); border: 1px solid var(--line-2); align-self: flex-start; }
.seg button { padding: 8px 14px; border-radius: var(--r-pill); font-size: 13.5px; font-weight: 600; color: var(--muted); transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.seg button[aria-pressed="true"] { background: var(--violet-fill, #9333ea); color: #fff; }
.seg button:hover:not([aria-pressed="true"]) { color: var(--display); }

/* Output tiles */
.out-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.out { padding: 14px 16px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); min-width: 0; }
.out span { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.out strong { display: block; margin-top: 6px; font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.05; color: var(--display); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.out small { display: block; margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.out small span { display: inline; font: inherit; letter-spacing: 0; text-transform: none; color: var(--text); }
.out.wide { grid-column: 1 / -1; }
.out.is-win { border-color: rgba(53, 214, 164, 0.35); background: linear-gradient(180deg, var(--win-soft), transparent); }
.out.is-win strong { color: var(--win); }
.out.is-loss strong { color: #ff8a98; }
.verdict { margin: 4px 0 0; padding: 14px 16px; border-radius: var(--r-md); border: 1px dashed var(--line-2); font-size: 15px; line-height: 1.5; color: var(--text); }
.verdict strong { color: var(--display); }
.verdict.is-win { border-style: solid; border-color: rgba(53, 214, 164, 0.4); background: var(--win-soft); }
.verdict.is-pass { border-style: solid; border-color: rgba(255, 122, 138, 0.35); background: rgba(255, 122, 138, 0.08); }
.calc-foot { margin: 0; font-size: 12.5px; color: var(--faint); }
.calc-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.chip-btn { padding: 8px 13px; border-radius: var(--r-pill); border: 1px solid var(--line-2); font-family: var(--font-mono); font-size: 13px; color: var(--muted); background: transparent; transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.chip-btn:hover, .chip-btn[aria-pressed="true"] { border-color: var(--violet); color: var(--violet-ink); }

/* No-vig market rows */
.market { display: flex; flex-direction: column; gap: 12px; }
.market-row { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 12px; align-items: end; }
.market-row[hidden] { display: none; }
.fair-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.fair-table th { text-align: left; padding: 0 0 8px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.fair-table td { padding: 11px 0; border-top: 1px solid var(--line); color: var(--text); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.fair-table td:first-child { font-family: var(--font-body); font-weight: 600; color: var(--display); }
.fair-table td strong { color: var(--win); }
.fair-table tr[hidden] { display: none; }

/* Leg rows for the parlay and round robin calculators. tools.js adds and removes rows. */
.legs { display: flex; flex-direction: column; gap: 12px; }
.leg-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.leg-row.has-result { grid-template-columns: minmax(0, 1fr) auto auto; }
.leg-x { width: 48px; height: 56px; border-radius: 14px; border: 1px solid var(--line-2); background: transparent; color: var(--muted); font-size: 22px; line-height: 1; transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.leg-x:hover:not(:disabled) { border-color: #ff7a8a; color: #ff8a98; }
.leg-x:disabled { opacity: 0.35; cursor: not-allowed; }
.seg.result { align-self: end; height: 56px; align-items: center; }
.seg.result button { padding: 9px 11px; font-size: 13px; }
.seg.result button[data-value="push"][aria-pressed="true"] { background: var(--surface-2); color: var(--display); }
.seg.result button[data-value="loss"][aria-pressed="true"] { background: #b4233b; color: #fff; }
.chip-btn[hidden] { display: none; }
.chip-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; color: var(--text); cursor: pointer; }
.check input { -webkit-appearance: none; appearance: none; display: grid; place-items: center; width: 22px; height: 22px; margin: 0; flex-shrink: 0; border-radius: 7px; border: 1.5px solid var(--line-2); background: var(--bg-2); cursor: pointer; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.check input:checked { background: var(--violet-fill, #9333ea); border-color: var(--violet-fill, #9333ea); }
.check input:checked::after { content: ""; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: translateY(-1px) rotate(45deg); }
.check input:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.field[hidden] { display: none; }
.hit-table td:last-child, .hit-table th:last-child { text-align: right; }
.hit-table td.is-win { color: var(--win); }
.hit-table td.is-loss { color: #ff8a98; }

/* HOW IT WORKS. vanilla port of the 21st "How It Works Steps" component (@7ovr/how-it-works-1), the same port the homepage carries. */
.hiw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.hiw-card { position: relative; padding: 26px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.hiw-card:hover { transform: translateY(-3px); border-color: var(--line-2); }
.hiw-num { position: absolute; top: 20px; right: 22px; font-family: var(--font-mono); font-size: 13px; color: var(--faint); font-variant-numeric: tabular-nums; }
.hiw-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 13px; background: var(--violet-soft); border: 1px solid var(--line-2); color: var(--violet-ink); }
.hiw-icon svg { width: 22px; height: 22px; }
.hiw-card h3 { margin: 18px 0 8px; font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -0.01em; color: var(--display); }
.hiw-card p { margin: 0; font-size: 15px; color: var(--muted); line-height: 1.5; }

/* Formula and worked example */
.math-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.formula { margin: 0; padding: 22px 24px; border-radius: var(--r-lg); background: var(--bg-2); border: 1px solid var(--line-2); font-family: var(--font-mono); font-size: 15px; line-height: 1.9; color: var(--display); overflow-x: auto; }
.formula .c { color: var(--faint); }
.formula b { color: var(--violet-ink); font-weight: 600; }
.example { padding: 22px 24px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.example h3 { margin: 0 0 10px; font-family: var(--font-display); font-size: 19px; }
.example ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: var(--muted); }
.example li strong { color: var(--display); font-family: var(--font-mono); font-weight: 600; }

/* Reference table */
.ref-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.ref-table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 15px; }
.ref-table caption { padding: 16px 18px 0; text-align: left; font-size: 13.5px; color: var(--faint); caption-side: bottom; padding-bottom: 14px; }
.ref-table th { padding: 13px 18px; text-align: left; font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); background: var(--surface-2); }
.ref-table td { padding: 12px 18px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text); }
.ref-table td:first-child { color: var(--display); font-weight: 600; }
.ref-table tbody tr:hover td { background: var(--violet-soft); }

/* FAQ. Chevron accordion rows, as on the homepage. */
.faq { max-width: 860px; display: flex; flex-direction: column; gap: 12px; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); transition: border-color var(--dur) var(--ease); }
.faq details[open] { border-color: var(--line-2); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px; padding: 20px 22px; font-family: var(--font-display); font-weight: 700; font-size: clamp(16px, 1.3vw, 19px); color: var(--display); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .chev { flex-shrink: 0; width: 20px; height: 20px; color: var(--violet-ink); transition: transform var(--dur) var(--ease); }
.faq details[open] summary .chev { transform: rotate(90deg); }
.faq details > p { margin: 0; padding: 0 22px 22px 56px; font-size: 16px; color: var(--muted); line-height: 1.55; }

/* Tool cards (hub and related tools). Tilt on desktop comes from tools.js. */
.tool-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tool-card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 26px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease); will-change: transform; }
.tool-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(90% 70% at 100% 0%, var(--violet-soft), transparent 60%); opacity: 0; transition: opacity var(--dur) var(--ease); pointer-events: none; }
.tool-card:hover { border-color: var(--violet); color: inherit; }
.tool-card:hover::before { opacity: 1; }
.tool-card > * { position: relative; }
.tool-card .hiw-icon { margin-bottom: 4px; }
.tool-card h2, .tool-card h3 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.15; color: var(--display); }
.tool-card p { margin: 0; flex: 1; font-size: 15px; line-height: 1.5; color: var(--muted); }
.tool-card .go { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--violet-ink); }
.tool-card .sample { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.tool-card .sample span { padding: 4px 9px; border-radius: var(--r-pill); background: var(--bg-2); border: 1px solid var(--line); font-family: var(--font-mono); font-size: 12px; color: var(--text); }

.read-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.read-list a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); transition: border-color var(--dur) var(--ease); }
.read-list a:hover { border-color: var(--violet); color: inherit; }
.read-list span { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--win); }
.read-list strong { font-family: var(--font-display); font-size: 17px; line-height: 1.25; color: var(--display); }

/* Closing CTA band */
.tool-cta { position: relative; margin-top: clamp(56px, 7vw, 88px); padding: clamp(36px, 5vw, 64px) clamp(22px, 4vw, 56px); text-align: center; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-xl); overflow: hidden; }
.tool-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 120% at 50% 0%, var(--violet-soft), transparent 62%); pointer-events: none; }
.tool-cta > * { position: relative; }
.tool-cta h2 { margin: 14px auto 12px; max-width: 20ch; font-size: clamp(28px, 3.8vw, 46px); line-height: 1.05; }
.tool-cta p { margin: 0 auto 26px; max-width: 56ch; color: var(--muted); }
.tool-cta .tool-cta-bots { display: flex; justify-content: center; margin: 0 auto 16px; }
.tool-cta-bots img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: #110e19; box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--line-2); }
.tool-cta-bots img + img { margin-left: -8px; }
.tool-cta-row { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.tool-cta .cta-note { margin: 14px auto 0; font-family: var(--font-mono); font-size: 12px; color: var(--faint); }

/* SHIMMER BUTTON. vanilla port of components/ui/shimmer-button.tsx (MagicUI), the homepage port. */
.shimmer-btn {
    --spread: 90deg; --shimmer-color: #ffffff; --radius: 999px; --speed: 3s; --cut: 0.05em; --bg: #15121f;
    position: relative; z-index: 0; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap;
    border: 1px solid rgba(255,255,255,0.10); padding: 15px 28px; color: #fff; background: var(--bg); border-radius: var(--radius);
    font-family: var(--font-display); font-weight: 700; font-size: 15.5px; letter-spacing: 0.01em; cursor: pointer; transition: transform 0.3s ease;
}
.shimmer-btn:hover { color: #fff; transform: translateY(-2px); }
.shimmer-primary { --bg: #7c3aed; }
.shimmer-btn:active { transform: translateY(1px); }
.shimmer-spark-container { position: absolute; inset: 0; z-index: -30; filter: blur(2px); overflow: visible; container-type: size; }
.shimmer-spark { position: absolute; inset: 0; height: 100cqh; aspect-ratio: 1; border-radius: 0; animation: shimmerSlide var(--speed) ease-in-out infinite alternate; }
.shimmer-spark-before { position: absolute; inset: -100%; width: auto; transform: rotate(0); animation: shimmerSpin calc(var(--speed) * 2) infinite linear;
    background: conic-gradient(from calc(270deg - (var(--spread) * 0.5)), transparent 0, var(--shimmer-color) var(--spread), transparent var(--spread)); }
.shimmer-label { position: relative; z-index: 1; }
.shimmer-highlight { position: absolute; inset: 0; border-radius: var(--radius); box-shadow: inset 0 -8px 10px #ffffff1f; transition: box-shadow 0.3s ease; pointer-events: none; }
.shimmer-btn:hover .shimmer-highlight { box-shadow: inset 0 -6px 10px #ffffff3f; }
.shimmer-backdrop { position: absolute; z-index: -20; background: var(--bg); border-radius: var(--radius); inset: var(--cut); }
@keyframes shimmerSpin { 0% { transform: translateZ(0) rotate(0); } 15%, 35% { transform: translateZ(0) rotate(90deg); } 65%, 85% { transform: translateZ(0) rotate(270deg); } 100% { transform: translateZ(0) rotate(360deg); } }
@keyframes shimmerSlide { to { transform: translate(calc(100cqw - 100%), 0); } }
[data-a11y-motion="reduce"] .shimmer-spark, [data-a11y-motion="reduce"] .shimmer-spark-before,
[data-a11y-epilepsy="true"] .shimmer-spark, [data-a11y-epilepsy="true"] .shimmer-spark-before { animation: none; }

/* Responsive */
@media (max-width: 960px) {
    .calc { grid-template-columns: minmax(0, 1fr); }
    .calc-out { border-left: 0; border-top: 1px solid var(--line); }
    .math-grid, .tool-grid, .read-list { grid-template-columns: minmax(0, 1fr); }
    .hiw-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
    .field-row { grid-template-columns: minmax(0, 1fr); }
    .leg-row.has-result { grid-template-columns: minmax(0, 1fr) auto; }
    .leg-row.has-result .seg.result { grid-column: 1 / -1; grid-row: 2; height: auto; display: flex; align-self: stretch; }
    .leg-row.has-result .seg.result button { flex: 1; }
    .market-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .out-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .faq details > p { padding-left: 22px; }
    .tool-cta-row { display: flex; flex-direction: column; }
    .tool-cta-row .btn, .tool-cta-row .shimmer-btn { width: 100%; }
}

/* Simple tool pages (2026-10-26): the calculator, the other calculators, then one closed panel for the explainers and FAQ. */
.tool-hero { margin-bottom: clamp(18px, 3vw, 28px); }
.tool-hero h1 { margin-top: 0; }
.tool-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 22px 0 0; }
.tool-chips span { margin-right: 4px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.tool-chips a { padding: 7px 13px; border: 1px solid var(--line-2); border-radius: var(--r-pill); font-size: 13.5px; font-weight: 600; color: var(--text); }
.tool-chips a:hover { border-color: var(--violet); color: var(--violet-ink); }
.tool-more { margin-top: clamp(28px, 4vw, 44px); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.tool-more > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; cursor: pointer; list-style: none; font-weight: 600; color: var(--text); }
.tool-more > summary::-webkit-details-marker { display: none; }
.tool-more > summary::after { content: ""; flex-shrink: 0; width: 8px; height: 8px; border-right: 2px solid var(--violet-ink); border-bottom: 2px solid var(--violet-ink); transform: translateY(-2px) rotate(45deg); transition: transform 0.2s ease; }
.tool-more[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.tool-more[open] { padding-bottom: 24px; }
.tool-more > .tool-section, .tool-more > section { margin: 28px 20px 0; }
.tool-cta { margin-top: clamp(28px, 4vw, 44px); padding: clamp(20px, 3vw, 28px); }
.tool-cta h2 { margin-top: 0; font-size: clamp(22px, 2.6vw, 30px); }