/* ==========================================================================
   MegaMCP marketing site · tools.css (docs/design/site.md)
   Owns: /tools and the five free tools, /docs (shell, components, tool
   reference), /demo, /waitlist, /security, /privacy, /terms, /changelog, 404.
   Builds on core.css components; never restyles them globally.
   Class families: .ft-* free tools, .ftp-* tool previews, .docs-* / .dk-* docs,
   .tool-* tool reference, .demo-* demo, .wl-* waitlist, .lg-* legal and
   security, .cl-* changelog, .nf-* 404.
   ========================================================================== */

/* ---------- Shared bits ---------- */
@property --p { syntax: "<number>"; inherits: false; initial-value: 0; }
.ft-muted { color: var(--gray); font-size: 14.5px; }
.ft-url { overflow-wrap: anywhere; color: var(--brand-deep); }
.hero-dark .ft-url { color: var(--brand-ink); }

/* ==========================================================================
   Free tools: hero
   ========================================================================== */
.ft-hero { padding: 72px 0 80px; }
.ft-hero .crumbs a { color: var(--d-gray); }
.ft-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: 56px; align-items: center; }
.ft-hero-copy > * { animation: rise-in .8s var(--ease-out) both; }
.ft-hero-copy > :nth-child(2) { animation-delay: .05s; }
.ft-hero-copy > :nth-child(3) { animation-delay: .1s; }
.ft-hero-copy > :nth-child(4) { animation-delay: .15s; }
.ft-hero-copy > :nth-child(5) { animation-delay: .2s; }
.ft-hero h1 { font-size: clamp(42px, 5.6vw, 72px); }
.ft-hero .kicker { gap: 10px; }
.ft-hero .kicker::before { display: none; }
.ft-kicker-ico { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: rgba(107, 78, 255, .2); color: var(--brand-ink); box-shadow: inset 0 0 0 1px rgba(176, 163, 255, .25); }
.ft-kicker-ico .ico { width: 15px; height: 15px; }
.ft-intro { font-size: clamp(17px, 1.4vw, 19.5px); }
.hero-dark .ft-intro { color: var(--d-gray); }
.ft-hero-points { margin-top: 4px; }
.ft-hero-points > li { color: #c9c9d2; font-size: 14px; }
.ft-hero-aside { position: relative; animation: rise-in 1s var(--ease-out) .15s both; }
.ft-hero-aside::before { content: ""; position: absolute; z-index: -1; inset: -12% -6%; border-radius: 50%; background: radial-gradient(closest-side, rgba(107, 78, 255, .4), rgba(61, 220, 255, .1) 60%, transparent 75%); filter: blur(24px); pointer-events: none; }

/* The form card: white glass over the night band. */
.ft-tool { position: relative; padding: 28px; border-radius: var(--r-panel); background: var(--white); color: var(--ink); box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 40px 90px -30px rgba(0, 0, 0, .8), 0 0 80px -30px var(--brand-glow); }
.ft-tool::before { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--aurora); }
.ft-label { display: block; margin-bottom: 12px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-deep); }
.ft-row { display: grid; gap: 12px; }
.ft-input-wrap { position: relative; display: block; }
.ft-input-ico { position: absolute; left: 18px; top: 50%; display: grid; color: var(--gray-2); transform: translateY(-50%); pointer-events: none; }
.ft-input-ico .ico { width: 19px; height: 19px; }
.ft-input { width: 100%; height: 58px; padding: 0 18px; border: 0; border-radius: 16px; background: var(--light); color: var(--ink); font: 500 17px/1 var(--sans); box-shadow: inset 0 0 0 1.5px var(--line); transition: box-shadow .2s, background .2s; }
.ft-input-wrap .ft-input { padding-left: 50px; }
.ft-input::placeholder { color: var(--gray-2); }
.ft-input:focus { outline: none; background: var(--white); box-shadow: inset 0 0 0 2px var(--brand), 0 0 0 5px rgba(107, 78, 255, .14); }
.ft-submit { width: 100%; height: 58px; border-radius: 16px; font-size: 17px; }
.ft-submit-label { display: inline-flex; align-items: center; gap: 8px; }
.ft-submit-busy { display: none; align-items: center; gap: 10px; }
.ft-spin { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: var(--white); animation: spin .75s linear infinite; }
.is-busy .ft-submit { pointer-events: none; }
.is-busy .ft-submit-label { display: none; }
.is-busy .ft-submit-busy { display: inline-flex; }
.ft-hint { margin-top: 14px; color: var(--gray); font-size: 14px; line-height: 1.5; }
.ft-hint code { padding: 1px 6px; border-radius: 6px; background: var(--light); font: 12.5px var(--mono); overflow-wrap: anywhere; }
/* Opt-in switch (page speed). */
.ft-toggle { position: relative; display: flex; align-items: flex-start; gap: 12px; margin-top: 16px; padding: 14px 16px; border-radius: 14px; background: var(--light); font-size: 14.5px; line-height: 1.45; cursor: pointer; }
.ft-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ft-toggle::before { content: ""; flex: none; width: 38px; height: 22px; margin-top: 1px; border-radius: 99px; background: #d4d4da; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .12); transition: background .2s; }
.ft-toggle::after { content: ""; position: absolute; left: 19px; top: 18px; width: 18px; height: 18px; border-radius: 50%; background: var(--white); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .25s var(--ease-out); }
.ft-toggle:has(input:checked)::before { background: var(--brand); }
.ft-toggle:has(input:checked)::after { transform: translateX(16px); }
.ft-toggle:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.ft-toggle .ft-muted { font-size: 13px; }
.ft-alert { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: var(--r-card); background: #fff0ee; color: #7a1a10; font-size: 16px; line-height: 1.5; box-shadow: inset 0 0 0 1px rgba(217, 48, 37, .18); }
.ft-alert-ico { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--white); color: var(--red-ink); }
.ft-alert-ico .ico { width: 17px; height: 17px; }
.ft-alert-soft { background: #fff7e6; color: var(--amber-ink); box-shadow: inset 0 0 0 1px rgba(245, 165, 36, .3); }
.ft-alert-soft .ft-alert-ico { color: var(--amber-ink); }

/* ==========================================================================
   Free tools: the report
   ========================================================================== */
.ft-result-section { padding-top: 72px; background: radial-gradient(60% 40% at 50% 0%, rgba(107, 78, 255, .07), transparent 70%), var(--white); }
.ft-report-wrap { max-width: 1080px; }
.ft-report { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.ft-report > .ft-alert { max-width: 760px; }
.ft-report-head .kicker { margin-bottom: 10px; }
.ft-report-head h2 { font-size: clamp(28px, 3.4vw, 42px); overflow-wrap: anywhere; }
.ft-report-head .ft-muted { margin-top: 10px; }
.ft-report-top { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.ft-report-top-grade { grid-template-columns: auto minmax(0, 1.5fr) minmax(0, .8fr); }
.ft-report-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 20px; align-items: start; }

/* Score: a conic ring with a native <meter> beside it. */
.ft-score { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; gap: 28px; padding: 28px; border-radius: var(--r-panel); background: var(--night); color: var(--d-text); box-shadow: 0 30px 60px -30px rgba(20, 10, 60, .55); }
.ft-score::before { content: ""; position: absolute; z-index: -1; inset: -40% -10% auto 30%; height: 160%; background: radial-gradient(closest-side, var(--ring-glow, rgba(107, 78, 255, .4)), transparent 72%); pointer-events: none; }
.ft-score-good { --ring-glow: rgba(48, 209, 88, .28); }
.ft-score-ok { --ring-glow: rgba(245, 165, 36, .26); }
.ft-score-poor { --ring-glow: rgba(255, 90, 78, .28); }
.ft-ring { --c: var(--brand); position: relative; flex: none; display: grid; place-items: center; width: 168px; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(from -90deg, var(--c) calc(var(--p) * 1%), rgba(255, 255, 255, .09) 0); animation: ring-fill 1.4s var(--ease-out) both; }
.ft-ring::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; background: conic-gradient(from -90deg, var(--c) calc(var(--p) * 1%), transparent 0); filter: blur(14px); opacity: .45; z-index: -1; }
.ft-ring-good { --c: #34d673; }
.ft-ring-ok { --c: #ffb340; }
.ft-ring-poor { --c: #ff6b5e; }
.ft-ring-inner { display: grid; place-items: center; align-content: center; gap: 2px; width: calc(100% - 22px); aspect-ratio: 1; border-radius: 50%; background: var(--night-2); text-align: center; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.ft-ring-inner small { font-size: 12px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--d-gray); }
.ft-score-num { display: flex; align-items: baseline; justify-content: center; gap: 2px; }
.ft-score-num b { font-size: 54px; line-height: 1; font-weight: 700; letter-spacing: -.05em; font-variant-numeric: tabular-nums; color: var(--white); }
.ft-score-num span { font-size: 15px; color: var(--d-gray); }
.ft-ring-sm { width: 92px; }
.ft-ring-sm .ft-ring-inner { width: calc(100% - 14px); }
.ft-ring-sm .ft-ring-inner b { font-size: 26px; font-weight: 700; letter-spacing: -.04em; color: var(--white); }
.ft-score-body { display: grid; gap: 10px; min-width: 0; }
.ft-score-label { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-ink); }
.ft-score-verdict { font-size: clamp(20px, 2vw, 25px); line-height: 1.25; font-weight: 650; letter-spacing: -.02em; color: var(--white); }
.ft-meter { width: 100%; height: 8px; border: 0; border-radius: 99px; background: rgba(255, 255, 255, .1); appearance: none; -webkit-appearance: none; }
.ft-meter::-webkit-meter-bar { border: 0; border-radius: 99px; background: rgba(255, 255, 255, .1); height: 8px; }
.ft-meter::-webkit-meter-optimum-value { border-radius: 99px; background: linear-gradient(90deg, #5be37f, var(--green)); }
.ft-meter::-webkit-meter-suboptimum-value { border-radius: 99px; background: linear-gradient(90deg, #ffc65c, var(--amber)); }
.ft-meter::-webkit-meter-even-less-good-value { border-radius: 99px; background: linear-gradient(90deg, #ff8a7f, var(--red)); }
.ft-meter::-moz-meter-bar { border-radius: 99px; background: linear-gradient(90deg, #8a73ff, var(--brand)); }
.ft-scale { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--d-gray); }
.ft-score .ft-check-sum { margin-top: 4px; }
/* Ring steps (CSP: no style attributes). */
.ring-0 { --p: 0; } .ring-5 { --p: 5; } .ring-10 { --p: 10; } .ring-15 { --p: 15; } .ring-20 { --p: 20; } .ring-25 { --p: 25; } .ring-30 { --p: 30; }
.ring-35 { --p: 35; } .ring-40 { --p: 40; } .ring-45 { --p: 45; } .ring-50 { --p: 50; } .ring-55 { --p: 55; } .ring-60 { --p: 60; } .ring-65 { --p: 65; }
.ring-70 { --p: 70; } .ring-75 { --p: 75; } .ring-80 { --p: 80; } .ring-85 { --p: 85; } .ring-90 { --p: 90; } .ring-95 { --p: 95; } .ring-100 { --p: 100; }
@keyframes ring-fill { from { --p: 0; } }

/* Grade badge. */
.ft-grade { position: relative; display: grid; place-items: center; align-content: center; gap: 2px; min-width: 150px; padding: 24px; border-radius: var(--r-panel); color: var(--white); text-align: center; background: linear-gradient(150deg, #8a73ff, var(--brand-deep)); box-shadow: 0 30px 60px -30px var(--brand-glow), inset 0 1px 0 rgba(255, 255, 255, .25); }
.ft-grade small { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.ft-grade b { font-size: 96px; line-height: .95; font-weight: 750; letter-spacing: -.06em; }
.ft-grade-a { background: linear-gradient(150deg, #43d47a, #138a3c); box-shadow: 0 30px 60px -30px rgba(48, 209, 88, .7), inset 0 1px 0 rgba(255, 255, 255, .25); }
.ft-grade-b { background: linear-gradient(150deg, #8a73ff, var(--brand-deep)); }
.ft-grade-c { background: linear-gradient(150deg, #ffbe4d, #d98200); box-shadow: 0 30px 60px -30px rgba(245, 165, 36, .7), inset 0 1px 0 rgba(255, 255, 255, .25); }
.ft-grade-d, .ft-grade-f { background: linear-gradient(150deg, #ff7d70, #c92a1c); box-shadow: 0 30px 60px -30px rgba(255, 90, 78, .7), inset 0 1px 0 rgba(255, 255, 255, .25); }
.ft-grade-sm { min-width: 0; width: 48px; height: 48px; padding: 0; border-radius: 14px; }
.ft-grade-sm b { font-size: 26px; }

/* Key facts. */
.ft-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ft-facts-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ft-fact { position: relative; display: grid; align-content: start; gap: 6px; padding: 18px 18px 18px 20px; border-radius: var(--r-card); background: var(--white); box-shadow: var(--shadow-card), 0 0 0 1px var(--hairline); overflow: hidden; }
.ft-fact::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--gray-2); }
.ft-fact-pass::before { background: var(--green); }
.ft-fact-warn::before { background: var(--amber); }
.ft-fact-fail::before { background: var(--red); }
.ft-fact span { font-size: 13px; color: var(--gray); }
.ft-fact b { font-size: 19px; line-height: 1.25; font-weight: 650; letter-spacing: -.02em; overflow-wrap: anywhere; }

/* Panels. */
.ft-panel { padding: 24px; border-radius: var(--r-panel); background: var(--white); box-shadow: var(--shadow-card), 0 0 0 1px var(--hairline); }
.ft-panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 16px; }
.ft-panel-head h3 { font-size: 20px; }
.ft-panel-head .ft-muted { flex-basis: 100%; }
.ft-panel .table-wrap, .ft-panel .table-wrap:has(> table.data) { margin: 0 -24px -24px; border-radius: 0 0 var(--r-panel) var(--r-panel); box-shadow: none; border-top: 1px solid var(--hairline); }
.ft-panel table.data { min-width: 520px; }
.ft-panel-fixes { background: radial-gradient(60% 50% at 100% 0%, rgba(107, 78, 255, .06), transparent 70%), var(--white); }

/* Chips: counts per priority. */
.ft-fix-sum, .ft-check-sum { display: flex; flex-wrap: wrap; gap: 6px; }
.ft-chip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 99px; font-size: 12.5px; font-weight: 600; background: var(--light); color: var(--ink-2); }
.ft-chip b { font-variant-numeric: tabular-nums; }
.ft-chip-high { background: #fff0ee; color: var(--red-ink); }
.ft-chip-medium { background: #fff4dc; color: var(--amber-ink); }
.ft-chip-low { background: var(--brand-wash); color: var(--brand-deep); }
.ft-chip-pass { background: #e7f8ec; color: var(--green-ink); }
.ft-score .ft-chip { background: rgba(255, 255, 255, .08); color: var(--d-text); }
.ft-score .ft-chip-pass { color: #7ce59a; }
.ft-score .ft-chip-medium { color: #ffd28a; }
.ft-score .ft-chip-high { color: #ffa39a; }

/* Fix cards: collapsible, most important first. */
.ft-fixes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.ft-fix { position: relative; border-radius: 14px; background: var(--white); box-shadow: 0 0 0 1px var(--hairline); overflow: hidden; transition: box-shadow .2s; }
.ft-fix::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--gray-2); }
.ft-fix-high::before { background: var(--red); }
.ft-fix-medium::before { background: var(--amber); }
.ft-fix-low::before { background: var(--brand); }
.ft-fix:hover { box-shadow: 0 0 0 1px rgba(107, 78, 255, .25), 0 12px 24px -16px rgba(40, 24, 140, .3); }
.ft-fix summary, .ft-fix-row { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px 14px 18px; list-style: none; cursor: pointer; font-size: 15.5px; line-height: 1.45; }
.ft-fix-row { cursor: default; }
.ft-fix summary::-webkit-details-marker { display: none; }
.ft-fix-ico { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; font-size: 13px; font-weight: 800; background: var(--light); color: var(--gray); }
.ft-fix-ico .ico { width: 13px; height: 13px; }
.ft-fix-high .ft-fix-ico { background: #fff0ee; color: var(--red-ink); }
.ft-fix-medium .ft-fix-ico { background: #fff4dc; color: var(--amber-ink); }
.ft-fix-low .ft-fix-ico { background: var(--brand-wash); color: var(--brand-deep); }
.ft-fix-t { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.ft-fix-t a, .ft-fix-body a { color: var(--brand-deep); text-decoration: underline; text-underline-offset: 3px; }
.ft-fix-chev { flex: none; display: grid; color: var(--gray-2); transition: transform .25s var(--ease-out); }
.ft-fix-chev .ico { width: 18px; height: 18px; }
.ft-fix details[open] .ft-fix-chev { transform: rotate(180deg); }
.ft-fix-body { padding: 0 18px 16px 52px; color: var(--ink-2); font-size: 15px; line-height: 1.6; animation: faq-in .3s var(--ease-out); }
.ft-fix-body p + p { margin-top: 8px; }
.ft-pill { flex: none; display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 99px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: var(--light); color: var(--gray); }
.ft-pill-high { background: #fff0ee; color: var(--red-ink); }
.ft-pill-medium { background: #fff4dc; color: var(--amber-ink); }
.ft-pill-low { background: var(--brand-wash); color: var(--brand-deep); }
.ft-ok { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 14px; background: #e7f8ec; color: var(--green-ink); font-weight: 600; }
.ft-ok-ico { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--green); color: var(--white); }
.ft-ok-ico .ico { width: 15px; height: 15px; stroke-width: 2.6; }

/* Score breakdown bars. */
.ft-parts { display: grid; gap: 14px; }
.ft-part { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label val" "track track"; gap: 6px 12px; align-items: center; font-size: 14.5px; }
.ft-part-label { grid-area: label; font-weight: 550; color: var(--ink-2); text-decoration: none; }
a.ft-part-label:hover { color: var(--brand-deep); text-decoration: underline; text-underline-offset: 3px; }
.ft-part-val { grid-area: val; font-variant-numeric: tabular-nums; color: var(--gray); font-size: 13.5px; }
.ft-part-val b { color: var(--ink); }
.ft-part-track { grid-area: track; display: block; height: 8px; border-radius: 99px; background: var(--light); overflow: hidden; }
.ft-part-fill { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8a73ff, var(--brand)); transform-origin: left; animation: grow-x 1.1s var(--ease-out) both; }
.ft-part-green .ft-part-fill { background: linear-gradient(90deg, #5be37f, var(--green)); }
.ft-part-amber .ft-part-fill { background: linear-gradient(90deg, #ffc65c, var(--amber)); }
.ft-part-red .ft-part-fill { background: linear-gradient(90deg, #ff8a7f, var(--red)); }

/* Check tables: status tags, allowed/blocked pills, group rows. */
.ft-status { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 4px; border-radius: 99px; font-size: 12.5px; font-weight: 650; white-space: nowrap; }
.ft-status-ico { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-size: 11px; font-weight: 800; color: var(--white); }
.ft-status-ico .ico { width: 11px; height: 11px; stroke-width: 3; }
.ft-status-pass { background: #e7f8ec; color: var(--green-ink); }
.ft-status-pass .ft-status-ico { background: var(--green); }
.ft-status-warn { background: #fff4dc; color: var(--amber-ink); }
.ft-status-warn .ft-status-ico { background: var(--amber); }
.ft-status-fail { background: #fff0ee; color: var(--red-ink); }
.ft-status-fail .ft-status-ico { background: var(--red); }
.ft-yes, .ft-no { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; white-space: nowrap; }
.ft-yes { color: var(--green-ink); }
.ft-no { color: var(--red-ink); }
.ft-yes::before, .ft-no::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent); }
.ft-table td, .ft-table th { overflow-wrap: anywhere; }
.ft-checks-table tbody th { width: 30%; }
.ft-checks-table td:last-child { width: 1%; }
.ft-checks-table tr.is-fail > th { color: var(--red-ink); }
.ft-crawlers th[scope="row"] { font-family: var(--mono); font-size: 13.5px; }
.ft-rule { font-family: var(--mono); font-size: 12.5px; }
.ft-group-row th { padding: 10px 18px !important; background: var(--brand-wash) !important; color: var(--brand-deep); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ft-group-row th span { margin-left: 8px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--gray); }

/* Next step strip. */
.ft-next { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: var(--r-card); background: var(--brand-wash); font-weight: 550; }
.ft-next a, .ft-next-line a { color: var(--brand-deep); font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
.ft-next-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--brand); color: var(--white); }
.ft-next-ico .ico { width: 17px; height: 17px; }
.ft-next-line { color: var(--gray); font-size: 15px; }

/* Page speed. */
.ft-speed-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: center; margin-bottom: 16px; }
.ft-speed-score { display: flex; align-items: center; gap: 16px; }
.ft-speed-score .ft-ring { background-color: var(--night); }
.ft-speed-score .ft-ring-inner { background: var(--night); }
.ft-speed .table-wrap, .ft-speed .table-wrap:has(> table.data) { margin: 0; border-radius: var(--r-card); border: 1px solid var(--hairline); border-top: 1px solid var(--hairline); }
.ft-speed table.data { min-width: 0; }
.ft-panel .list-dot { margin-top: 8px; }

/* llms.txt: the draft as a dark editor. */
.ft-draft { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.ft-editor { box-shadow: var(--shadow-float); }
.ft-editor-title { display: inline-flex; align-items: center; gap: 12px; }
.ft-editor-title label { font-family: var(--mono); color: var(--d-text); }
.ft-editor-title label span { margin-left: 8px; font-family: var(--sans); font-weight: 500; color: var(--d-gray); }
.ft-textarea { display: block; width: 100%; min-height: 260px; padding: 18px 20px; border: 0; resize: vertical; background: transparent; color: #e6e3ff; font: 14px/1.7 var(--mono); tab-size: 2; }
.ft-textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--brand-ink); }
.ft-draft-actions { margin-top: 4px; }
.ft-more { border-radius: var(--r-card); background: var(--light); }
.ft-more summary { display: flex; align-items: center; gap: 10px; padding: 14px 18px; list-style: none; cursor: pointer; font-weight: 600; }
.ft-more summary::-webkit-details-marker { display: none; }
.ft-more summary .ico { width: 16px; height: 16px; color: var(--gray); }
.ft-more summary .ico:last-child { margin-left: auto; transition: transform .25s; }
.ft-more[open] summary .ico:last-child { transform: rotate(180deg); }
.ft-more summary span { padding: 1px 8px; border-radius: 99px; background: var(--white); font-size: 12px; color: var(--gray); }
.ft-more .list-dot { padding: 0 18px 16px calc(18px + 1.5em); font-size: 14.5px; }

/* Share box. */
.ft-share { display: grid; gap: 10px; padding: 22px 24px; border-radius: var(--r-panel); background: radial-gradient(60% 120% at 100% 0%, rgba(107, 78, 255, .1), transparent 60%), var(--light); box-shadow: inset 0 0 0 1px var(--hairline); }
.ft-share label { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; }
.ft-share label .ico { width: 17px; height: 17px; color: var(--brand); }
.ft-share-row { display: flex; gap: 10px; align-items: center; }
.ft-share-row .ft-input { height: 46px; font: 13px var(--mono); background: var(--white); }
.ft-share .ft-hint { margin: 0; }
.ft-share .ft-hint a { color: var(--brand-deep); font-weight: 600; }

/* ==========================================================================
   Free tools: explainer, related, hub
   ========================================================================== */
.ft-explain-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 64px; align-items: start; }
.ft-explain .prose { max-width: 72ch; }
.ft-explain-aside { position: sticky; top: calc(var(--nav-h) + 24px); }
.ft-auto { padding: 26px; }
.ft-auto .kicker { margin-bottom: 10px; color: var(--brand-ink); }
.ft-auto-h { margin-bottom: 18px; font-size: 22px; line-height: 1.2; font-weight: 650; letter-spacing: -.02em; color: var(--white); }
.ft-auto .check-list { gap: 10px; margin-bottom: 20px; font-size: 15px; }
.ft-auto .check-list > li { color: var(--d-gray); }

/* Tool tiles: a card with a mini preview of the result. */
.ft-related-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ft-tile { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 20px; padding: 24px; border-radius: var(--r-panel); background: var(--white); color: var(--ink); text-decoration: none; box-shadow: var(--shadow-card), 0 0 0 1px var(--hairline); transition: transform .35s var(--ease-out), box-shadow .35s var(--ease); }
.ft-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift), 0 0 0 1px rgba(107, 78, 255, .22); }
.ft-tile-copy { display: flex; flex-direction: column; gap: 8px; }
.ft-tile-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.ft-tile-top .card-ico { margin: 0; }
.ft-tile-k { padding: 4px 10px; border-radius: 99px; background: var(--light); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gray); }
.ft-tile-h { font-size: 21px; line-height: 1.2; font-weight: 650; letter-spacing: -.02em; }
.ft-tile-p { color: var(--gray); font-size: 15px; line-height: 1.5; }
.ft-tile-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--brand-deep); font-size: 15px; font-weight: 650; }
.ft-tile-go .ico { width: 16px; height: 16px; transition: transform .25s var(--ease-out); }
.ft-tile:hover .ft-tile-go .ico { transform: translateX(4px); }
.ft-tile:hover .ft-tile-h { color: var(--brand-deep); }
.ft-tile-visual { margin-top: auto; }
.ft-related-grid .ft-tile-p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Previews (illustrative, aria-hidden). */
.ftp { position: relative; padding: 16px; border-radius: 16px; background: var(--night-2); color: var(--d-text); font-size: 12.5px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 18px 36px -24px rgba(10, 8, 40, .55); overflow: hidden; }
.ftp::before { content: ""; position: absolute; inset: -40% -20% auto 40%; height: 140%; background: radial-gradient(closest-side, rgba(107, 78, 255, .35), transparent 70%); pointer-events: none; }
.ftp > * { position: relative; }
.ftp-tag { position: absolute; top: 10px; right: 12px; z-index: 1; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--d-gray-2, #6e6e78); }
.ftp-split { display: flex; align-items: center; gap: 16px; }
.ftp-split .ftp-rows { flex: 1; min-width: 0; }
.ftp .ft-ring-sm { width: 84px; }
.ftp-rows { display: grid; gap: 6px; }
.ftp-rows li { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 8px; border-radius: 9px; background: rgba(255, 255, 255, .04); }
.ftp-ico { flex: none; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; font-size: 10px; font-weight: 800; color: var(--white); }
.ftp-ico .ico { width: 10px; height: 10px; stroke-width: 3; }
.ftp-ok .ftp-ico { background: var(--green); }
.ftp-warn .ftp-ico { background: var(--amber); }
.ftp-bad .ftp-ico { background: var(--red); }
.ftp-k { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 11.5px; }
.ftp-v { flex: none; font-size: 11px; color: var(--d-gray); }
.ftp-ok .ftp-v { color: #7ce59a; }
.ftp-bad .ftp-v { color: #ff9d94; }
.ftp-warn .ftp-v { color: #ffd28a; }
.ftp-code { margin: 0; padding-top: 8px; font: 12px/1.65 var(--mono); white-space: pre; overflow: hidden; color: #cfcae8; }
.ftp-code .c-h { color: #b0a3ff; font-weight: 700; }
.ftp-code .c-q { color: #8ae9ff; }
.ftp-code .c-k { color: #b0a3ff; }
.ftp-code .c-s { color: #8ae6a4; }
.ftp-code .c-p { color: var(--d-gray); }
.ftp-check { display: grid; gap: 12px; }
.ftp-check-top { display: flex; align-items: center; gap: 12px; padding-right: 54px; }
.ftp-progress { flex: 1; display: grid; gap: 6px; font-size: 12px; color: var(--d-gray); }
.ftp-bar { display: block; height: 7px; border-radius: 99px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.ftp-fill { display: block; height: 100%; border-radius: inherit; background: var(--aurora); transition: width .4s var(--ease-out); }
.ftp-mcp { display: grid; gap: 12px; }
.ftp-clients { display: flex; flex-wrap: wrap; gap: 6px; padding-right: 54px; }
.ftp-clients .logo { box-shadow: 0 0 0 2px var(--night-2); }

/* Hub. */
.ft-hub-hero { padding: 80px 0 72px; text-align: center; }
.ft-hub-head { display: flex; flex-direction: column; align-items: center; }
.ft-hub-head .crumbs { justify-content: center; }
.ft-hub-head h1 { max-width: 13em; font-size: clamp(44px, 6.4vw, 84px); }
.ft-hub-head .lead { margin-inline: auto; }
.ft-hub-head .ft-hero-points { justify-content: center; margin-top: 22px; }
.ft-hub-head .kicker::before { display: none; }
.ft-hub-kpis { margin-top: 56px; text-align: left; }
.ft-hub-kpis .kpi { background: rgba(255, 255, 255, .035); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 0 1px var(--d-line); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.ft-hub-kpis .kpi-label { color: var(--d-gray); }
.ft-hub-kpis .kpi-label b { color: var(--d-text); }
.ft-hub-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.ft-tile-hub { grid-column: span 3; }
.ft-tile-0 { grid-column: span 4; flex-direction: row; align-items: stretch; }
.ft-tile-1 { grid-column: span 2; }
.ft-tile-4 { grid-column: span 6; flex-direction: row; align-items: center; }
.ft-tile-0 .ft-tile-copy, .ft-tile-4 .ft-tile-copy { flex: 1 1 0; min-width: 0; }
.ft-tile-0 .ft-tile-visual, .ft-tile-4 .ft-tile-visual { flex: 1.15 1 0; min-width: 0; margin: 0; display: flex; align-items: center; }
.ft-tile-0 .ft-tile-visual > *, .ft-tile-4 .ft-tile-visual > * { width: 100%; }
.ft-tile-0 { background: radial-gradient(60% 70% at 100% 0%, rgba(107, 78, 255, .09), transparent 70%), var(--white); }
.ft-tile-hub .ftp { padding: 18px; }
.ft-hub-auto-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.ft-hub-auto .check-list { margin: 24px 0 28px; }
.ft-hub-auto-visual { position: relative; }

/* ==========================================================================
   Google Ads checklist
   ========================================================================== */
.ft-cl-preview { padding: 24px; border-radius: var(--r-panel); background: rgba(255, 255, 255, .05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 0 0 1px var(--d-line-2), 0 40px 80px -30px rgba(0, 0, 0, .7); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.ft-cl-preview-top { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.ft-cl-preview-top p { display: grid; gap: 2px; padding: 14px; border-radius: 14px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--d-line); }
.ft-cl-preview-top b { font-size: 34px; line-height: 1; font-weight: 700; letter-spacing: -.04em; background: var(--aurora); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ft-cl-preview-top span { font-size: 12.5px; color: var(--d-gray); }
.ft-cl-preview ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 18px; }
.ft-cl-preview li a { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 12px 0 6px; border-radius: 11px; color: var(--d-text); font-size: 13.5px; font-weight: 550; text-decoration: none; transition: background .15s; }
.ft-cl-preview li a:hover { background: rgba(255, 255, 255, .07); }
.ft-cl-preview li small { margin-left: auto; color: var(--d-gray); font-variant-numeric: tabular-nums; }
.ft-cl-preview-ico { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; background: rgba(107, 78, 255, .18); color: var(--brand-ink); }
.ft-cl-preview-ico .ico { width: 15px; height: 15px; }

.ft-form-section { padding-top: 72px; }
.ft-checklist { counter-reset: none; }
.ft-cl-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; margin-bottom: 20px; }
.ft-cl-h { font-size: clamp(30px, 3.6vw, 44px); }
.ft-cl-head .ft-hint { max-width: 40em; font-size: 16px; }
.ft-jump { font-size: 14px; font-weight: 600; color: var(--brand-deep); }
.ft-cl-areas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.ft-cl-areas a { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px 0 10px; border-radius: 99px; background: var(--white); color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s, color .2s; }
.ft-cl-areas a .ico { width: 15px; height: 15px; color: var(--brand); }
.ft-cl-areas a:hover { color: var(--brand-deep); box-shadow: inset 0 0 0 1.5px var(--brand); }
.ft-cl-grid { columns: 2 440px; column-gap: 20px; }
.ft-area { break-inside: avoid; margin: 0 0 20px; padding: 22px; border: 0; border-radius: var(--r-panel); background: var(--white); box-shadow: var(--shadow-card), 0 0 0 1px var(--hairline); scroll-margin-top: calc(var(--nav-h) + 24px); }
.ft-area:target { box-shadow: 0 0 0 2px var(--brand), 0 0 0 7px rgba(107, 78, 255, .12); }
.ft-area-head { display: flex; align-items: center; gap: 12px; }
.ft-area-head .card-ico { width: 38px; height: 38px; margin: 0; border-radius: 11px; }
.ft-area-head .card-ico .ico { width: 19px; height: 19px; }
.ft-area-name { flex: 1; font-size: 19px; font-weight: 650; letter-spacing: -.02em; }
.ft-area-count { padding: 4px 10px; border-radius: 99px; background: var(--light); font-size: 13px; color: var(--gray); font-variant-numeric: tabular-nums; }
.ft-area-count b { color: var(--ink); }
.ft-area:has(input:checked) .ft-area-count { background: var(--brand-wash); color: var(--brand-deep); }
.ft-area-intro { margin: 10px 0 14px; color: var(--gray); font-size: 14.5px; line-height: 1.5; }
.ft-cks { display: grid; gap: 4px; }
.ft-ck { position: relative; border-radius: 12px; transition: background .15s; }
.ft-ck:hover { background: var(--light); }
.ft-ck > input { position: absolute; left: 10px; top: 12px; width: 26px; height: 26px; margin: 0; opacity: 0; cursor: pointer; }
.ft-ck-body { padding: 10px 10px 10px 46px; }
.ft-ck-body label { display: block; cursor: pointer; font-size: 15.5px; line-height: 1.45; font-weight: 550; }
.ft-ck-box { position: absolute; left: 10px; top: 11px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: var(--white); color: transparent; box-shadow: inset 0 0 0 1.5px #c7c7cf; transition: background .2s, box-shadow .2s, color .2s, transform .2s var(--ease-out); pointer-events: none; }
.ft-ck-box .ico { width: 15px; height: 15px; stroke-width: 3; }
.ft-ck > input:checked + .ft-ck-body .ft-ck-box { background: linear-gradient(135deg, #8a73ff, var(--brand-deep)); color: var(--white); box-shadow: 0 4px 12px -4px var(--brand-glow); transform: scale(1.04); }
.ft-ck > input:checked + .ft-ck-body .ft-ck-t { color: var(--gray); text-decoration: line-through; text-decoration-color: rgba(107, 78, 255, .45); }
.ft-ck > input:focus-visible + .ft-ck-body .ft-ck-box { outline: 2px solid var(--brand); outline-offset: 2px; }
.ft-ck > input:hover + .ft-ck-body .ft-ck-box { box-shadow: inset 0 0 0 1.5px var(--brand); }
.ft-w { display: inline-flex; align-items: center; height: 20px; margin-left: 4px; padding: 0 8px; border-radius: 99px; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; vertical-align: 2px; background: var(--light); color: var(--gray); }
.ft-w-3 { background: #fff0ee; color: var(--red-ink); }
.ft-w-2 { background: #fff4dc; color: var(--amber-ink); }
.ft-ck-more { margin-top: 4px; font-size: 14px; }
.ft-ck-more summary { display: inline-flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; color: var(--brand-deep); font-weight: 600; font-size: 13px; }
.ft-ck-more summary::-webkit-details-marker { display: none; }
.ft-ck-more summary::after { content: ""; width: 7px; height: 7px; margin-top: -3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .2s; }
.ft-ck-more[open] summary::after { margin-top: 3px; transform: rotate(-135deg); }
.ft-ck-more p { margin-top: 8px; color: var(--ink-2); line-height: 1.55; }
/* The sticky score bar. */
.ft-cl-bar { position: sticky; bottom: 16px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-top: 8px; padding: 14px 14px 14px 22px; border-radius: 20px; background: rgba(13, 15, 23, .92); color: var(--d-text); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 24px 50px -16px rgba(0, 0, 0, .55), 0 0 60px -30px var(--brand-glow); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.ft-cl-progress { flex: 1 1 260px; display: grid; gap: 8px; }
.ft-cl-count { font-size: 14.5px; color: var(--d-gray); }
.ft-cl-count b { font-size: 18px; color: var(--white); font-variant-numeric: tabular-nums; }
.ft-cl-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ft-cl-actions .ft-submit { width: auto; height: 50px; padding: 0 24px; border-radius: 99px; font-size: 16px; }
.ft-cl-actions .btn-ghost { height: 50px; color: var(--d-text); box-shadow: inset 0 0 0 1px var(--d-line-2); }
.ft-cl-actions .btn-ghost:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); }

/* ==========================================================================
   MCP config generator
   ========================================================================== */
.ft-picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.ft-picks legend { padding: 0; }
.ft-pick { position: relative; display: block; cursor: pointer; }
.ft-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ft-pick-card { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 10px 12px; border-radius: 14px; background: var(--light); box-shadow: inset 0 0 0 1.5px transparent; transition: box-shadow .2s, background .2s, transform .2s var(--ease-out); }
.ft-pick:hover .ft-pick-card { background: var(--white); box-shadow: inset 0 0 0 1.5px var(--line); }
.ft-pick input:checked + .ft-pick-card { background: var(--brand-wash); box-shadow: inset 0 0 0 2px var(--brand); }
.ft-pick input:focus-visible + .ft-pick-card { outline: 2px solid var(--brand); outline-offset: 2px; }
.ft-pick-t { display: grid; gap: 1px; min-width: 0; flex: 1; }
.ft-pick-t b { font-size: 14.5px; font-weight: 650; line-height: 1.25; }
.ft-pick-t small { font-size: 12px; color: var(--gray); line-height: 1.3; }
.ft-pick-dot { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: transparent; box-shadow: inset 0 0 0 1.5px #c7c7cf; transition: background .2s, color .2s; }
.ft-pick-dot .ico { width: 12px; height: 12px; stroke-width: 3; }
.ft-pick input:checked + .ft-pick-card .ft-pick-dot { background: var(--brand); color: var(--white); box-shadow: none; }
.ft-picker-foot { display: grid; gap: 14px; margin-top: 16px; }
.ft-picker-foot .ft-hint { margin: 0; }
.ft-tabs { display: flex; gap: 6px; padding: 6px; border-radius: 18px; background: var(--light); overflow-x: auto; scrollbar-width: none; }
.ft-tabs a { display: inline-flex; align-items: center; gap: 8px; flex: none; height: 42px; padding: 0 14px 0 8px; border-radius: 13px; color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background .15s, box-shadow .15s; }
.ft-tabs a:hover { background: var(--white); }
.ft-tabs a[aria-current="page"] { background: var(--white); box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 0 0 1.5px var(--brand); color: var(--brand-deep); }
.ft-clients { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.ft-client { padding: 26px; border-radius: var(--r-panel); background: var(--white); box-shadow: var(--shadow-card), 0 0 0 1px var(--hairline); scroll-margin-top: calc(var(--nav-h) + 24px); }
.ft-client-head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px; margin-bottom: 22px; }
.ft-client-head > div { flex: 1; min-width: 200px; }
.ft-client-head h3, .ft-client-name { font-size: 22px; font-weight: 650; letter-spacing: -.02em; }
.ft-client-head .ft-muted { margin-top: 2px; }
.ft-client > p { margin-top: 14px; }
.ft-client-one { display: flex; align-items: center; gap: 8px; }
.ft-client-one .ico { width: 16px; height: 16px; color: var(--brand); }
.ft-client .dk-callout { margin-top: 16px; }
/* Pick a client on the overview page and only its setup stays in view (CSS only). */
body:has(.ft-picks input[value="claude-desktop"]:checked) .ft-config-all .ft-client:not(#client-claude-desktop),
body:has(.ft-picks input[value="chatgpt"]:checked) .ft-config-all .ft-client:not(#client-chatgpt),
body:has(.ft-picks input[value="claude-code"]:checked) .ft-config-all .ft-client:not(#client-claude-code),
body:has(.ft-picks input[value="cursor"]:checked) .ft-config-all .ft-client:not(#client-cursor),
body:has(.ft-picks input[value="vscode"]:checked) .ft-config-all .ft-client:not(#client-vscode),
body:has(.ft-picks input[value="windsurf"]:checked) .ft-config-all .ft-client:not(#client-windsurf) { display: none; }

/* ==========================================================================
   Docs: shell, sidebar, contents, components
   ========================================================================== */
.docs-hero { padding: 64px 0 48px; border-bottom: 1px solid var(--hairline); }
.docs-hero h1 { font-size: clamp(40px, 5vw, 64px); }
.docs-hero .lead { margin-bottom: 0; }
.docs-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: center; }
.docs-hero-split .docs-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); }
.docs-hero-aside { position: relative; }
.docs-hero-aside::before { content: ""; position: absolute; z-index: -1; inset: -10%; border-radius: 50%; background: radial-gradient(closest-side, rgba(107, 78, 255, .22), rgba(61, 220, 255, .08) 60%, transparent 75%); filter: blur(20px); }
.docs-flow .ui-window-body { display: grid; gap: 16px; }
.docs-flow-chat { padding-top: 14px; border-top: 1px solid var(--hairline); }
.docs-flow .ui-msg-user .ui-bubble { color: var(--white); }
.docs-flow .ui-msg-assistant .ui-bubble { background: var(--light); box-shadow: none; color: var(--ink); }
.docs-flow .ui-who { color: var(--gray); }
.docs-flow .ui-tool { background: var(--brand-wash); box-shadow: inset 0 0 0 1px rgba(107, 78, 255, .18); color: var(--gray); }
.docs-flow .ui-tool code { color: var(--brand-deep); }
.docs-flow .ui-tool-done .ui-tool-state { background: #e7f8ec; color: var(--green-ink); }
.docs-flow .ui-form-ok span b { margin-right: 4px; }
.docs-flow .code-block { box-shadow: none; }
.dk-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 22px; font-size: 14px; color: var(--gray); }
.dk-meta-glyph { display: inline-flex; }
.dk-copy-link { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 0; border-radius: 99px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font: 600 13px/1 var(--sans); cursor: pointer; transition: box-shadow .2s, color .2s; }
.dk-copy-link .ico { width: 14px; height: 14px; }
.dk-copy-link:hover { box-shadow: inset 0 0 0 1.5px var(--brand); color: var(--brand-deep); }
.dk-copy-link.is-copied { background: var(--brand); color: var(--white); box-shadow: none; }
.dk-hero-search { display: flex; align-items: center; gap: 12px; width: min(560px, 100%); height: 58px; margin-top: 26px; padding: 0 14px 0 18px; border: 0; border-radius: 16px; background: var(--white); box-shadow: inset 0 0 0 1.5px var(--line), 0 18px 40px -28px rgba(60, 40, 160, .35); color: var(--gray); font: 16px var(--sans); text-align: left; cursor: pointer; transition: box-shadow .2s; }
.dk-hero-search[hidden] { display: none; }
.dk-hero-search:hover { box-shadow: inset 0 0 0 1.5px var(--brand), 0 0 0 5px rgba(107, 78, 255, .1); }
.dk-hero-search span { flex: 1; }
.dk-hero-search .ico { width: 20px; height: 20px; color: var(--brand); }
.dk-hero-search kbd, .dk-search-btn kbd { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border-radius: 6px; background: var(--light); color: var(--gray); font: 600 12px/1 var(--sans); box-shadow: inset 0 0 0 1px var(--hairline); }
.dk-hero-clients { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 22px; font-size: 14px; color: var(--gray); }
.dk-hero-clients a { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); font-weight: 600; text-decoration: none; }
.dk-hero-clients a:hover { color: var(--brand-deep); }

.docs-shell { display: grid; grid-template-columns: 240px minmax(0, 1fr) 220px; grid-template-areas: "side main toc"; gap: 56px; align-items: start; padding: 48px 0 112px; }
.docs-shell:not(.docs-has-toc) { grid-template-columns: 240px minmax(0, 1fr); grid-template-areas: "side main"; }
.docs-side { grid-area: side; position: sticky; top: calc(var(--nav-h) + 20px); display: grid; gap: 22px; max-height: calc(100vh - var(--nav-h) - 40px); overflow-y: auto; padding: 2px 4px 12px 2px; font-size: 14.5px; scrollbar-width: thin; }
.docs-main { grid-area: main; min-width: 0; }
.docs-main > .prose { max-width: 72ch; }
.docs-wide .docs-main > .prose { max-width: none; }
.docs-toc { grid-area: toc; }
.docs-toc > summary .ico { display: none; width: 16px; height: 16px; transition: transform .2s; }
.docs-toc[open] > summary .ico { transform: rotate(180deg); }
.dk-toc-top { display: inline-flex !important; align-items: center; gap: 6px; margin-top: 16px; padding: 0 !important; border: 0 !important; font-size: 13px; color: var(--gray); }
.dk-toc-top .ico { width: 13px; height: 13px; transform: rotate(-90deg); }
.dk-group { display: grid; gap: 4px; }
.dk-group-h { margin-bottom: 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-2); }
.dk-group ul, .docs-mobile-list ul { display: grid; gap: 2px; }
.dk-group a, .docs-mobile-list a { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; border-radius: 11px; color: var(--gray); text-decoration: none; transition: background .15s, color .15s; }
.dk-group a:hover, .docs-mobile-list a:hover { color: var(--ink); background: var(--light); }
.dk-group a[aria-current="page"], .docs-mobile-list a[aria-current="page"] { color: var(--brand-deep); background: var(--brand-wash); font-weight: 650; }
.dk-group-more a { font-size: 13.5px; }
.dk-ico { flex: none; display: inline-grid; place-items: center; border-radius: 8px; background: var(--light); color: var(--gray); box-shadow: inset 0 0 0 1px var(--hairline); }
.dk-ico-sm { width: 26px; height: 26px; }
.dk-ico-sm .ico { width: 15px; height: 15px; }
.dk-ico-md { width: 40px; height: 40px; border-radius: 12px; }
.dk-ico-md .ico { width: 20px; height: 20px; }
.dk-group a:hover .dk-ico { color: var(--ink); }
.dk-group a[aria-current="page"] .dk-ico, .docs-mobile-list a[aria-current="page"] .dk-ico { background: var(--brand); color: var(--white); box-shadow: 0 6px 14px -6px var(--brand-glow); }
.dk-group .logo-sm, .docs-mobile-list .logo-sm { width: 26px; height: 26px; border-radius: 8px; }
.dk-meta-glyph .dk-ico, .dk-card .dk-ico { background: var(--brand-wash); color: var(--brand); box-shadow: none; }
.dk-search-btn { display: flex; align-items: center; gap: 10px; width: 100%; height: 42px; padding: 0 10px 0 12px; border: 0; border-radius: 12px; background: var(--white); box-shadow: inset 0 0 0 1.5px var(--line); color: var(--gray); font: 14px var(--sans); text-align: left; cursor: pointer; transition: box-shadow .2s; }
.dk-search-btn[hidden] { display: none; }
.dk-search-btn:hover { box-shadow: inset 0 0 0 1.5px var(--brand), 0 0 0 4px rgba(107, 78, 255, .1); }
.dk-search-btn span { flex: 1; }
.dk-search-btn .ico { width: 16px; height: 16px; }
.dk-url { position: relative; display: grid; gap: 6px; padding: 14px; border-radius: 14px; background: radial-gradient(120% 140% at 100% 0%, rgba(107, 78, 255, .3), transparent 60%), var(--night-2); color: var(--d-text); box-shadow: 0 16px 30px -20px rgba(10, 8, 40, .6); }
.dk-url-h { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-ink); }
.dk-url-h .ico { width: 13px; height: 13px; }
.dk-url code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 11.5px/1.45 var(--mono); color: var(--white); }
.dk-url .copy-btn { position: absolute; top: 9px; right: 9px; }
.copy-btn.copy-mini { height: 26px; padding: 0 10px; font-size: 12px; }
.dk-url .copy-btn.copy-mini { background: rgba(255, 255, 255, .1); color: var(--d-text); box-shadow: inset 0 0 0 1px var(--d-line-2); }
.docs-mobile { display: none; }

/* Docs components (scoped: the content hub keeps its own). */
.docs-main .prose > h2:first-child { margin-top: 0; }
.dk-steps { counter-reset: dk; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.dk-steps > li { counter-increment: dk; position: relative; padding: 4px 0 26px 66px; }
.dk-steps > li::before { content: counter(dk); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(145deg, #8a73ff, var(--brand-deep)); color: var(--white); font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; box-shadow: 0 10px 22px -10px var(--brand-glow), inset 0 1px 0 rgba(255, 255, 255, .25); }
.dk-steps > li:not(:last-child)::after { content: ""; position: absolute; left: 22px; top: 54px; bottom: 6px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, rgba(107, 78, 255, .45), rgba(107, 78, 255, .06)); }
.dk-steps > li:last-child { padding-bottom: 0; }
.dk-step { padding-top: 9px; line-height: 1.6; }
.dk-step > .code-block { margin: 14px 0 8px; }
.dk-step > code, .dk-step :not(pre) > code, .ft-hint code { padding: 2px 7px; border-radius: 6px; background: var(--light); box-shadow: inset 0 0 0 1px var(--hairline); font: .86em/1.4 var(--mono); overflow-wrap: anywhere; }
.prose .dk-steps { padding-left: 0; }
.dk-callout { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: var(--r-card); background: var(--light); font-size: 16px; line-height: 1.6; box-shadow: inset 3px 0 0 var(--gray-2); }
.dk-callout p { margin: 0; }
.dk-callout-h { margin-bottom: 2px !important; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gray); }
.dk-callout-ico { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--white); color: var(--gray); box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.dk-callout-ico .ico { width: 17px; height: 17px; }
.dk-callout-note { background: #eef8ff; box-shadow: inset 3px 0 0 #2a8fd6; }
.dk-callout-note .dk-callout-ico, .dk-callout-note .dk-callout-h { color: #0b5c87; }
.dk-callout-tip { background: var(--brand-wash); box-shadow: inset 3px 0 0 var(--brand); }
.dk-callout-tip .dk-callout-ico, .dk-callout-tip .dk-callout-h { color: var(--brand-deep); }
.dk-callout-warn { background: #fff7e6; box-shadow: inset 3px 0 0 var(--amber); }
.dk-callout-warn .dk-callout-ico, .dk-callout-warn .dk-callout-h { color: var(--amber-ink); }
.prose .code-block pre { border-radius: 0; background: none; }
.code-block-head > span { display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.code-block-head .ico { flex: none; width: 14px; height: 14px; color: var(--brand-ink); }
.dk-small { font-size: 14px; color: var(--gray); }
.dk-switch { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; border-radius: 18px; background: var(--light); }
.dk-switch a { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px 0 8px; border-radius: 13px; color: var(--ink) !important; font-size: 14px; font-weight: 600; text-decoration: none !important; transition: background .15s; }
.dk-switch a:hover { background: var(--white); }
.dk-switch a[aria-current="page"] { background: var(--white); box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 0 0 1.5px var(--brand); }
.dk-switch .logo-sm { width: 26px; height: 26px; border-radius: 8px; }
.dk-prompts { display: grid; gap: 8px; }
.dk-prompts li { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; border-radius: 14px; background: var(--white); box-shadow: 0 0 0 1px var(--hairline), var(--shadow-card); }
.dk-prompt-ico { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--brand-wash); color: var(--brand); }
.dk-prompt-ico .ico { width: 16px; height: 16px; }
.dk-prompt-t { flex: 1; min-width: 0; font-weight: 550; }
.dk-prompts .copy-btn { position: static; flex: none; }
.copy-btn.copy-mini { background: var(--light); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.copy-btn.copy-mini:hover { background: var(--brand-wash); color: var(--brand-deep); }
.copy-btn.copy-mini.is-copied { background: var(--brand); color: var(--white); box-shadow: none; }
.dk-flow { display: grid; gap: 0; border-radius: var(--r-panel); background: var(--white); box-shadow: 0 0 0 1px var(--hairline), var(--shadow-card); overflow: hidden; }
.dk-flow li { position: relative; display: flex; gap: 16px; padding: 18px 20px; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.dk-flow li + li { border-top: 1px solid var(--hairline); }
.dk-flow-ico { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--brand-wash); color: var(--brand); }
.dk-flow-ico .ico { width: 19px; height: 19px; }
.dk-flow-t { min-width: 0; }
.dk-flow-t > b:first-child { color: var(--ink); }
.dk-clients { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.dk-client { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 18px; background: var(--white); color: var(--ink) !important; text-decoration: none !important; box-shadow: 0 0 0 1px var(--hairline), var(--shadow-card); transition: transform .25s var(--ease-out), box-shadow .25s; }
.dk-client:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(107, 78, 255, .3), var(--shadow-lift); }
.dk-client-t { display: grid; gap: 2px; flex: 1; min-width: 0; }
.dk-client-t b { font-size: 17px; font-weight: 650; letter-spacing: -.015em; }
.dk-client-t small { font-size: 13px; color: var(--gray); font-family: var(--mono); }
.dk-client-go, .dk-card-go { display: grid; color: var(--gray-2); transition: transform .25s var(--ease-out), color .2s; }
.dk-client-go .ico, .dk-card-go .ico { width: 18px; height: 18px; }
.dk-client:hover .dk-client-go, .dk-card:hover .dk-card-go { color: var(--brand); transform: translateX(3px); }
.dk-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dk-cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dk-card { display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: 18px; background: var(--white); color: var(--ink) !important; text-decoration: none !important; box-shadow: 0 0 0 1px var(--hairline), var(--shadow-card); transition: transform .25s var(--ease-out), box-shadow .25s; }
.dk-card:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(107, 78, 255, .3), var(--shadow-lift); }
.dk-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dk-card-t { font-size: 18px; font-weight: 650; letter-spacing: -.02em; }
.dk-card-b { font-size: 14.5px; line-height: 1.5; color: var(--gray); }
.dk-figure { margin: 24px 0; }
.dk-figure-pair { display: grid; gap: 12px; }
.dk-faq summary { font-size: 18px; padding: 18px 48px 18px 0; }
.dk-faq details > :not(summary) { font-size: 16px; padding-bottom: 20px; }
.prose .dk-faq a { color: var(--brand-deep); }
.doc-cta { display: flex !important; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 56px !important; padding: 22px 24px !important; border-radius: var(--r-panel) !important; }
.docs-main .doc-cta { position: relative; overflow: hidden; isolation: isolate; background: var(--night); color: var(--d-text); }
.docs-main .doc-cta::before { content: ""; position: absolute; z-index: -1; right: -10%; top: -80%; width: 60%; height: 260%; background: radial-gradient(closest-side, rgba(107, 78, 255, .4), transparent); pointer-events: none; }
.docs-main .doc-cta p { flex: 1 1 260px; margin: 0; font-size: 16px; color: var(--d-gray); }
.docs-main .doc-cta p b { color: var(--white); }
.dk-cta-ico { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: rgba(107, 78, 255, .22); color: var(--brand-ink); }
.dk-cta-ico .ico { width: 20px; height: 20px; }
.dk-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 28px !important; }
.dk-pager-card { display: grid; gap: 6px; padding: 18px 20px; border-radius: 18px; background: var(--white); color: var(--ink) !important; text-decoration: none !important; box-shadow: 0 0 0 1px var(--hairline), var(--shadow-card); transition: transform .25s var(--ease-out), box-shadow .25s; }
.dk-pager-card:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(107, 78, 255, .3), var(--shadow-lift); }
.dk-next { grid-column: 2; text-align: right; }
.dk-pager-k { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 650; color: var(--gray-2); }
.dk-next .dk-pager-k { justify-content: flex-end; }
.dk-pager-k .ico { width: 14px; height: 14px; }
.dk-prev .dk-pager-k .ico { transform: scaleX(-1); }
.dk-pager-t { display: inline-flex; align-items: center; gap: 10px; }
.dk-next .dk-pager-t { justify-content: flex-end; }
.dk-pager-t b { font-size: 17px; font-weight: 650; }
.dk-pager-card small { font-size: 13px; color: var(--gray); }
.dk-pager-card:hover .dk-pager-k { color: var(--brand); }
.dk-feedback { display: flex; align-items: center; gap: 10px; margin-top: 18px !important; font-size: 14px; color: var(--gray); }
.dk-feedback .ico { flex: none; width: 17px; height: 17px; color: var(--gray-2); }
.docs-main .table-wrap:has(> table.data) { margin-top: 18px; }
.docs-main table.data { font-size: 15px; }
.docs-main table.data tbody th { white-space: nowrap; }

/* Docs search dialog (opened by app.js). */
.docs-search { margin: 12vh auto auto; width: min(640px, calc(100vw - 24px)); max-height: 72vh; padding: 0; border: 0; border-radius: 20px; background: var(--white); color: var(--ink); box-shadow: 0 0 0 1px var(--hairline), 0 40px 90px -20px rgba(10, 8, 40, .55); overflow: hidden; }
.docs-search[open] { display: flex; flex-direction: column; animation: pop-in .2s var(--ease-out) both; }
.docs-search:focus { outline: none; }
.docs-search::backdrop { background: rgba(5, 6, 10, .5); backdrop-filter: blur(6px); }
.docs-search-head { display: flex; align-items: center; gap: 12px; padding: 0 18px; border-bottom: 1px solid var(--hairline); }
.docs-search-head svg { flex: none; width: 20px; height: 20px; color: var(--brand); }
.docs-search-head input { flex: 1; height: 60px; border: 0; outline: none; background: none; font: 17px var(--sans); color: var(--ink); }
.docs-search kbd { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border-radius: 6px; background: var(--light); color: var(--gray); font: 600 12px/1 var(--sans); box-shadow: inset 0 0 0 1px var(--hairline); }
.docs-results { flex: 1; overflow-y: auto; margin: 0; padding: 8px; }
.docs-result { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 12px; border-radius: 12px; cursor: pointer; }
.docs-result[aria-selected="true"] { background: var(--brand-wash); }
.docs-result-ico { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--light); color: var(--gray); }
.docs-result-ico svg { width: 17px; height: 17px; }
.docs-result[aria-selected="true"] .docs-result-ico { background: var(--brand); color: var(--white); }
.docs-result-text { display: grid; min-width: 0; }
.docs-result-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; font-weight: 600; }
.docs-result-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--gray); }
.docs-results-empty { padding: 26px 16px; text-align: center; color: var(--gray); font-size: 14.5px; }
.docs-search-foot { display: flex; gap: 16px; padding: 10px 18px; border-top: 1px solid var(--hairline); font-size: 12px; color: var(--gray); }
.docs-search-foot span { display: inline-flex; align-items: center; gap: 6px; }

/* Arriving at a section: a brief highlight. */
.docs-main .prose h2:target, .docs-main .prose h3:target, .docs-main .prose details:target, .lg-article h2:target { animation: dk-flash 1.6s var(--ease) 1; }
@keyframes dk-flash { 0%, 30% { background: var(--brand-wash); box-shadow: 0 0 0 8px var(--brand-wash); border-radius: 6px; } 100% { background: transparent; box-shadow: 0 0 0 8px transparent; } }

/* ==========================================================================
   Tool reference
   ========================================================================== */
.tool-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 28px !important; }
.tool-stats p { display: grid; gap: 2px; padding: 16px 18px; border-radius: var(--r-card); background: var(--white); box-shadow: 0 0 0 1px var(--hairline), var(--shadow-card); }
.tool-stats b { font-size: clamp(30px, 3vw, 40px); line-height: 1; font-weight: 700; letter-spacing: -.045em; font-variant-numeric: tabular-nums; background: var(--aurora); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tool-stats span { font-size: 13.5px; color: var(--gray); line-height: 1.35; }
.tool-finder { position: sticky; top: calc(var(--nav-h) + 12px); z-index: 4; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 28px !important; padding: 10px; border-radius: 20px; background: rgba(255, 255, 255, .88); box-shadow: 0 0 0 1px var(--hairline), 0 20px 40px -24px rgba(40, 24, 140, .35); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); }
.tool-finder[hidden] { display: none; }
.tool-finder-search { flex: 1 1 280px; display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 12px 0 16px; border-radius: 14px; background: var(--light); box-shadow: inset 0 0 0 1.5px transparent; transition: box-shadow .2s, background .2s; }
.tool-finder-search:focus-within { background: var(--white); box-shadow: inset 0 0 0 2px var(--brand), 0 0 0 4px rgba(107, 78, 255, .12); }
.tool-finder-search .ico { width: 18px; height: 18px; color: var(--brand); }
.tool-finder-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; font: 16px var(--sans); color: var(--ink); outline: none; }
.tool-finder-search kbd { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border-radius: 6px; background: var(--white); color: var(--gray); font: 600 12px/1 var(--sans); box-shadow: inset 0 0 0 1px var(--hairline); }
.tool-finder-chips { display: flex; gap: 4px; padding: 4px; border-radius: 13px; background: var(--light); }
.tool-finder-chips button { height: 38px; padding: 0 14px; border: 0; border-radius: 10px; background: none; color: var(--gray); font: 600 14px var(--sans); cursor: pointer; transition: background .15s, color .15s; }
.tool-finder-chips button:hover { color: var(--ink); }
.tool-finder-chips button.is-on { background: var(--white); color: var(--brand-deep); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.tool-finder-count { margin: 0 6px 0 auto !important; font-size: 13.5px; color: var(--gray); font-variant-numeric: tabular-nums; }
.tool-jump { margin-top: 18px !important; }
.tool-jump ul { display: flex; flex-wrap: wrap; gap: 8px; }
.tool-jump li[hidden] { display: none; }
.tool-jump a { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px 0 6px; border-radius: 99px; background: var(--white); color: var(--ink) !important; font-size: 13.5px; font-weight: 600; text-decoration: none !important; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s, color .2s; }
.tool-jump a:hover { box-shadow: inset 0 0 0 1.5px var(--brand); color: var(--brand-deep) !important; }
.tool-jump a small { padding: 1px 7px; border-radius: 99px; background: var(--light); font-size: 11.5px; color: var(--gray); font-variant-numeric: tabular-nums; }
.tool-jump .logo-sm, .tool-jump .tool-mark { width: 26px; height: 26px; border-radius: 50%; }
.tool-mark { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--night); color: var(--white); }
.tool-mark .mark { width: 62%; height: 62%; }
.tool-mark .ico { width: 55%; height: 55%; }
.tool-mark-web { background: linear-gradient(135deg, #8a73ff, var(--brand-deep)); }
.tool-empty { margin-top: 24px !important; padding: 24px; border-radius: var(--r-card); background: var(--light); text-align: center; color: var(--gray); }
.tool-group { margin-top: 56px !important; scroll-margin-top: calc(var(--nav-h) + 90px); }
.tool-group[hidden] { display: none; }
.tool-group-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding-bottom: 16px; border-bottom: 1px solid var(--hairline); }
.tool-group-logo { display: inline-flex; }
.tool-group-logo .logo-md, .tool-group-logo .tool-mark { width: 48px; height: 48px; border-radius: 14px; }
.tool-group-titles { flex: 1; min-width: 220px; }
.prose .tool-group-titles h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; font-size: clamp(24px, 2.4vw, 30px); }
.prose .tool-group-meta { margin-top: 4px; font-size: 14.5px; color: var(--gray); }
.tool-group-counts { display: flex; gap: 6px; margin: 0 !important; }
.tool-count { padding: 4px 10px; border-radius: 99px; background: var(--light); font-size: 12.5px; color: var(--gray); }
.tool-count b { color: var(--ink); }
.tool-count-w { background: var(--brand-wash); color: var(--brand-deep); }
.tool-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 16px !important; }
.tool { padding: 18px 20px; border-radius: 18px; background: var(--white); box-shadow: 0 0 0 1px var(--hairline); scroll-margin-top: calc(var(--nav-h) + 90px); transition: box-shadow .2s; }
.tool[hidden] { display: none; }
.tool:hover { box-shadow: 0 0 0 1px rgba(107, 78, 255, .25), 0 12px 28px -18px rgba(40, 24, 140, .35); }
.tool:target { box-shadow: 0 0 0 2px var(--brand), 0 0 0 7px rgba(107, 78, 255, .12); }
.prose .tool > * + * { margin-top: 6px; }
.tool-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.prose .tool-head h3 { margin: 0; font-size: 16px; }
.prose .tool-head h3 a { color: var(--ink); text-decoration: none; }
.prose .tool-head h3 a:hover { color: var(--brand-deep); }
.prose .tool-head h3 code { padding: 0; background: none; box-shadow: none; font: 700 15px/1.3 var(--mono); overflow-wrap: anywhere; }
.tool-kind { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 99px; font-size: 12px; font-weight: 650; white-space: nowrap; }
.tool-kind .ico { width: 13px; height: 13px; }
.tool-kind-read { background: #e7f8ec; color: var(--green-ink); }
.tool-kind-write { background: var(--brand-wash); color: var(--brand-deep); }
.prose .tool-title { font-weight: 650; }
.prose .tool-desc { color: var(--gray); font-size: 15px; line-height: 1.55; }
.tool-requires { display: flex; align-items: center; gap: 6px; }
.tool-requires .ico { flex: none; width: 15px; height: 15px; color: var(--brand); }
.prose .tool-noparams { font-size: 13.5px; color: var(--gray-2); }
.tool-params { margin-top: 12px !important; border-radius: 14px; background: var(--light); }
.tool-params summary { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; list-style: none; cursor: pointer; font-size: 14px; color: var(--gray); }
.tool-params summary::-webkit-details-marker { display: none; }
.tool-params summary b { color: var(--ink); }
.tool-params summary .ico { width: 15px; height: 15px; }
.tool-params summary .ico:last-child { margin-left: auto; transition: transform .2s; }
.tool-params[open] summary .ico:last-child { transform: rotate(180deg); }
.tool-params summary:hover { color: var(--brand-deep); }
.tool-params .table-wrap { margin: 0 !important; border-radius: 0 0 14px 14px !important; box-shadow: 0 0 0 1px var(--hairline) !important; }
.tool-table { min-width: 520px; font-size: 14px !important; }
.tool-table th, .tool-table td { padding: 10px 14px !important; }
.prose .tool-table code { font-size: 12.5px; }
.prose .tool-table .tool-type { background: var(--brand-wash); box-shadow: none; color: var(--brand-deep); }
.tool-req, .tool-opt { display: inline-block; margin-left: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; vertical-align: 1px; }
.tool-req { color: var(--red-ink); }
.tool-opt { color: var(--gray-2); }

/* ==========================================================================
   Responsive (tools and docs)
   ========================================================================== */
@media (max-width: 1240px) {
  .docs-shell, .docs-shell.docs-has-toc { grid-template-columns: 220px minmax(0, 1fr); grid-template-areas: "side toc" "side main"; gap: 24px 44px; }
  .docs-shell:not(.docs-has-toc) { grid-template-areas: "side main"; }
  .docs-toc { position: static; padding: 14px 18px; border-radius: var(--r-card); background: var(--light); }
  .docs-toc > summary { margin: 0; }
  .docs-toc > summary .ico { display: block; }
  .docs-toc[open] > summary { margin-bottom: 10px; }
  .docs-toc ol { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); border-left: 0; gap: 0 16px; }
  .docs-toc a { border-left: 0; padding-left: 0; margin-left: 0; }
  .ft-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1060px) {
  .ft-hero-grid, .ft-hub-auto-grid, .docs-hero-split .docs-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .ft-hero-aside { max-width: 640px; }
  .ft-report-top, .ft-report-grid { grid-template-columns: minmax(0, 1fr); }
  .ft-report-top-grade { grid-template-columns: auto minmax(0, 1fr); }
  .ft-report-top-grade .ft-facts { grid-column: 1 / -1; }
  .ft-explain-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .ft-explain-aside { position: static; max-width: 560px; }
  .ft-hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ft-tile-hub, .ft-tile-1 { grid-column: span 1; }
  .ft-tile-0, .ft-tile-4 { grid-column: span 2; }
  .ft-facts-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .docs-shell, .docs-shell.docs-has-toc, .docs-shell:not(.docs-has-toc) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "mobile" "toc" "main"; gap: 20px; padding-top: 28px; }
  .docs-side { display: none; }
  .docs-mobile { grid-area: mobile; display: grid; gap: 10px; }
  .dk-search-mobile[hidden] { display: none; }
  .docs-mobile-menu { border-radius: var(--r-card); background: var(--light); }
  .docs-mobile-menu > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 0 16px; list-style: none; cursor: pointer; font-weight: 650; }
  .docs-mobile-menu > summary::-webkit-details-marker { display: none; }
  .docs-mobile-menu > summary span { display: grid; line-height: 1.25; }
  .docs-mobile-menu > summary small { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gray); }
  .docs-mobile-menu > summary .ico { width: 18px; height: 18px; transition: transform .2s; }
  .docs-mobile-menu[open] > summary .ico { transform: rotate(180deg); }
  .docs-mobile-list { display: grid; gap: 6px; padding: 0 10px 14px; }
  .docs-mobile-list .dk-group-h { margin: 10px 6px 2px; }
  .tool-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .ft-hero, .ft-hub-hero { padding: 48px 0 56px; }
  .ft-tool { padding: 20px; border-radius: 20px; }
  .ft-hero-copy { text-align: left; }
  .ft-score { flex-direction: column; align-items: stretch; text-align: center; padding: 24px 20px; }
  .ft-score .ft-ring { align-self: center; }
  .ft-score .ft-scale, .ft-score .ft-check-sum { justify-content: center; }
  .ft-report-top-grade { grid-template-columns: minmax(0, 1fr); }
  .ft-grade { min-width: 0; padding: 18px; grid-auto-flow: column; justify-content: center; gap: 14px; }
  .ft-grade b { font-size: 64px; }
  .ft-facts, .ft-facts-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ft-fact b { font-size: 16px; }
  .ft-panel { padding: 18px; }
  .ft-panel .table-wrap, .ft-panel .table-wrap:has(> table.data) { margin: 0 -18px -18px; }
  .ft-fix-body { padding-left: 18px; }
  .ft-speed-grid { grid-template-columns: minmax(0, 1fr); }
  .ft-related-grid, .ft-hub-grid { grid-template-columns: minmax(0, 1fr); }
  .ft-tile-hub, .ft-tile-0, .ft-tile-1, .ft-tile-4 { grid-column: auto; flex-direction: column; align-items: stretch; }
  .ft-tile-0 .ft-tile-visual, .ft-tile-4 .ft-tile-visual { flex: none; }
  .ft-hub-kpis { margin-top: 40px; }
  .ft-cl-grid { columns: 1; }
  .ft-area { padding: 18px 14px; }
  .ft-cl-preview ul { grid-template-columns: minmax(0, 1fr); }
  .ft-cl-bar { bottom: 10px; padding: 12px; }
  .ft-cl-actions { width: 100%; }
  .ft-cl-actions .ft-submit { flex: 1; }
  .ft-picks { grid-template-columns: minmax(0, 1fr); }
  .ft-client { padding: 18px; }
  .ft-share-row { flex-direction: column; align-items: stretch; }
  .dk-cards, .dk-cards-3 { grid-template-columns: minmax(0, 1fr); }
  .dk-pager { grid-template-columns: minmax(0, 1fr); }
  .dk-next { grid-column: auto; }
  .dk-steps > li { padding-left: 56px; }
  .dk-steps > li::before { width: 40px; height: 40px; font-size: 17px; }
  .dk-steps > li:not(:last-child)::after { left: 19px; top: 48px; }
  .dk-step { padding-top: 6px; }
  .docs-hero { padding: 40px 0 32px; }
  .tool-finder { top: calc(var(--nav-h) + 6px); }
  .tool-finder-count { width: 100%; margin: 0 4px !important; }
  .dk-prompts li { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .ft-ring { animation: none; }
  .ft-hero-copy > *, .ft-hero-aside { animation: none; }
}
@media print {
  .docs-side, .docs-mobile, .docs-toc, .doc-cta, .dk-pager, .dk-feedback, .copy-btn, .dk-copy-link, .dk-switch, .h-anchor, .dk-hero-search, .tool-finder, .ft-explain-aside, .ft-related, .ft-hero-aside { display: none !important; }
  .docs-shell { display: block; padding: 0; }
  .docs-hero, .ft-hero { background: none; color: var(--ink); padding: 0 0 16px; }
  .prose { max-width: none; font-size: 12pt; }
}

/* ==========================================================================
   /demo: the walkthrough as a product UI
   ========================================================================== */
.demo-hero { padding: 72px 0 64px; text-align: center; }
.demo-hero-inner { display: flex; flex-direction: column; align-items: center; }
.demo-hero .kicker::before { display: none; }
.demo-hero .lead { margin-inline: auto; }
.demo-disclaimer { display: inline-flex; align-items: flex-start; gap: 10px; max-width: 640px; margin-top: 4px; padding: 10px 16px; border-radius: 16px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--d-line-2); color: var(--d-gray); font-size: 14.5px; text-align: left; }
.demo-disclaimer .ico { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--brand-ink); }
.demo-disclaimer a { color: var(--white); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.demo-section { padding-top: 56px; background: radial-gradient(60% 40% at 50% 0%, rgba(107, 78, 255, .08), transparent 70%), var(--light); }
.demo-stepper ol { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 36px; }
.demo-step { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 18px 0 6px; border-radius: 99px; background: var(--white); color: var(--ink); font-size: 15px; font-weight: 600; text-decoration: none; box-shadow: var(--shadow-card), 0 0 0 1px var(--hairline); transition: box-shadow .2s, transform .2s var(--ease-out); }
.demo-step:hover { transform: translateY(-1px); box-shadow: var(--shadow-lift), 0 0 0 1px rgba(107, 78, 255, .25); }
.demo-step-n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--light); color: var(--gray); font-size: 14px; font-weight: 700; }
.demo-step-n .ico { width: 16px; height: 16px; }
.demo-step.is-done .demo-step-n { background: #e7f8ec; color: var(--green-ink); }
.demo-step[aria-current="step"] { color: var(--brand-deep); box-shadow: 0 0 0 2px var(--brand), 0 14px 30px -16px var(--brand-glow); }
.demo-step[aria-current="step"] .demo-step-n { background: linear-gradient(135deg, #8a73ff, var(--brand-deep)); color: var(--white); }
.demo-step-cap { margin-left: 12px; }
.demo-step-cap[aria-current="step"] { box-shadow: 0 0 0 2px var(--red), 0 14px 30px -16px rgba(255, 90, 78, .5); color: var(--red-ink); }
.demo-step-cap[aria-current="step"] .demo-step-n { background: var(--red); }
.demo-stage { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.demo-stage-app { position: relative; }
.demo-stage-app .fx-glow { width: 80%; left: 10%; top: 10%; }
.demo-window .ui-window-body { padding: 0; }
.demo-app { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.4fr); min-height: 460px; }
.demo-app-chat { padding: 18px; border-right: 1px solid var(--d-line); background: rgba(255, 255, 255, .015); }
.demo-app-main { display: grid; align-content: start; gap: 14px; padding: 14px; min-width: 0; }
.demo-app-bar { display: flex; flex-wrap: wrap; gap: 4px; }
.demo-app-tab { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 9px; color: var(--d-gray); font-size: 12.5px; font-weight: 600; }
.demo-app-tab .ico { width: 13px; height: 13px; }
.demo-app-tab.is-on { background: rgba(255, 255, 255, .07); color: var(--white); }
.demo-app-tab b { display: grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px; background: var(--brand); color: var(--white); font-size: 10.5px; }
.demo-app-main .ui-table { background: rgba(255, 255, 255, .03); box-shadow: 0 0 0 1px var(--d-line); color: var(--d-text); }
.demo-app-main .ui-table table { min-width: 380px; }
.demo-app-main .ui-table tbody tr:nth-child(3) > * { background: rgba(255, 90, 78, .07); }
.demo-app-main .ui-table caption, .demo-app-main .ui-table thead th { color: var(--d-gray); }
.demo-app-main .ui-table thead th { background: rgba(255, 255, 255, .04); }
.demo-app-main .ui-table th, .demo-app-main .ui-table td { border-color: var(--d-line); }
.demo-app-main .ui-pill.ui-tone-green { background: rgba(48, 209, 88, .14); color: #7ce59a; }
.demo-app-main .ui-pill.ui-tone-gray { background: rgba(255, 255, 255, .08); color: var(--d-gray); }
.demo-app-main .ui-text-red { color: #ff9d94; }
.demo-plan { animation: pop-in .5s var(--ease-out) both; }
.demo-toast { position: absolute; left: -14px; bottom: -22px; width: min(310px, 80%); animation: pop-in .6s var(--ease-out) .6s both; }
.demo-panel { position: sticky; top: calc(var(--nav-h) + 24px); padding: 28px; border-radius: var(--r-panel); background: var(--white); box-shadow: var(--shadow-card), 0 0 0 1px var(--hairline); }
.demo-panel .kicker { gap: 10px; }
.demo-panel .kicker::before { display: none; }
.demo-panel-ico { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--brand-wash); color: var(--brand); }
.demo-panel-ico .ico { width: 15px; height: 15px; }
.demo-panel h2 { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.12; }
.demo-msg { margin-top: 12px; color: var(--gray); font-size: 16.5px; line-height: 1.6; }
.demo-campaign-h { margin-top: 22px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gray); }
.demo-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.demo-metrics div { padding: 12px 14px; border-radius: 14px; background: var(--light); }
.demo-metrics dt { font-size: 12.5px; color: var(--gray); }
.demo-metrics dd { margin: 2px 0 0; font-size: 19px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.demo-status-enabled { color: var(--green-ink); }
.demo-status-paused { color: var(--amber-ink); }
.demo-note { display: grid; gap: 6px; margin-top: 16px; padding: 14px 16px; border-radius: 14px; background: var(--brand-wash); font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.demo-note-h { font-weight: 700; color: var(--brand-deep); }
.demo-actions { margin-top: 22px; }
.demo-fine { display: flex; align-items: flex-start; gap: 8px; margin-top: 18px; font-size: 13px; color: var(--gray); }
.demo-fine .ico { flex: none; width: 15px; height: 15px; margin-top: 2px; color: var(--green-ink); }
.demo-next { text-align: center; }
.demo-next-inner { display: flex; flex-direction: column; align-items: center; }
.demo-next .kicker::before { display: none; }
.demo-next .lead { margin: 16px auto 28px; }
.demo-next-fine { margin-top: 20px; font-size: 13.5px; color: var(--d-gray); }

/* ==========================================================================
   /waitlist and /waitlist/thanks
   ========================================================================== */
.wl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: calc(100vh - var(--nav-h)); }
.wl-side { position: relative; isolation: isolate; overflow: hidden; display: flex; justify-content: flex-end; padding: 72px 56px 72px var(--gutter); background: var(--night); color: var(--d-text); }
.wl-side::before { content: ""; position: absolute; z-index: -2; inset: -25% -15%; pointer-events: none; background: radial-gradient(34% 40% at 20% 10%, rgba(61, 220, 255, .22), transparent 70%), radial-gradient(40% 48% at 80% 20%, rgba(107, 78, 255, .45), transparent 70%), radial-gradient(34% 40% at 60% 90%, rgba(255, 95, 210, .18), transparent 72%); animation: aurora-drift 26s ease-in-out infinite alternate; }
.wl-side::after { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background-image: var(--grain); background-size: 180px; opacity: .06; mix-blend-mode: overlay; }
.wl-side-inner { width: min(560px, 100%); }
.wl-side .kicker { color: var(--brand-ink); }
.wl-side h1 { font-size: clamp(40px, 4.8vw, 64px); color: var(--white); }
.wl-sub { margin-top: 18px; color: var(--d-gray); font-size: clamp(17px, 1.4vw, 19px); line-height: 1.55; }
.wl-points { display: grid; gap: 14px; margin-top: 32px; }
.wl-points li { display: flex; gap: 14px; align-items: flex-start; }
.wl-point-ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(107, 78, 255, .2); color: var(--brand-ink); box-shadow: inset 0 0 0 1px rgba(176, 163, 255, .25); }
.wl-point-ico .ico { width: 19px; height: 19px; }
.wl-points li > span:last-child { display: grid; gap: 2px; color: var(--d-gray); font-size: 15px; line-height: 1.5; }
.wl-points b { color: var(--white); font-size: 16px; font-weight: 650; }
.wl-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 36px; }
.wl-stats div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 4px; padding: 16px; border-radius: 16px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 0 1px var(--d-line); }
.wl-stats dt { font-size: 13px; line-height: 1.35; color: var(--d-gray); }
.wl-stats dd { margin: 0; font-size: clamp(36px, 4vw, 52px); line-height: 1; font-weight: 700; letter-spacing: -.05em; background: var(--aurora); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wl-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 28px; font-size: 13.5px; color: var(--d-gray); }
.wl-logos ul { display: flex; }
.wl-logos li { margin-left: -6px; }
.wl-logos li:first-child { margin-left: 0; }
.wl-logos .logo { width: 34px; height: 34px; border-radius: 50%; box-shadow: 0 0 0 3px var(--night); }
.wl-logos a { display: inline-flex; align-items: center; gap: 4px; color: var(--brand-ink); font-weight: 600; text-decoration: none; }
.wl-logos a .ico { width: 14px; height: 14px; }
.wl-main { display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 56px var(--gutter) 56px 56px; background: radial-gradient(60% 50% at 0% 50%, rgba(107, 78, 255, .08), transparent 70%), var(--light); }
.wl-form { display: grid; gap: 16px; width: min(560px, 100%); padding: 32px; border-radius: var(--r-panel); background: var(--white); box-shadow: 0 0 0 1px var(--hairline), 0 40px 80px -40px rgba(40, 24, 140, .4); }
.wl-form-head { display: flex; gap: 14px; align-items: center; margin-bottom: 4px; }
.wl-form-head h2 { font-size: 26px; letter-spacing: -.03em; }
.wl-form-head p { color: var(--gray); font-size: 14.5px; }
.wl-form-ico { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(135deg, #8a73ff, var(--brand-deep)); color: var(--white); box-shadow: 0 10px 22px -10px var(--brand-glow); }
.wl-form-ico .ico { width: 22px; height: 22px; }
.wl-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.wl-field { display: grid; gap: 7px; min-width: 0; }
.wl-field label { font-size: 14px; font-weight: 600; }
.wl-opt { margin-left: 4px; font-size: 12px; font-weight: 500; color: var(--gray); }
.wl-field input, .wl-field select, .wl-field textarea { width: 100%; min-height: 48px; padding: 0 14px; border: 0; border-radius: 12px; background-color: var(--light); color: var(--ink); font: 16px var(--sans); box-shadow: inset 0 0 0 1.5px var(--line); transition: box-shadow .2s, background-color .2s; }
.wl-field textarea { min-height: 92px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.wl-field select { appearance: none; padding-right: 40px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2386868b' stroke-width='1.8'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 11px; }
.wl-field input:focus, .wl-field select:focus, .wl-field textarea:focus { outline: none; background-color: var(--white); box-shadow: inset 0 0 0 2px var(--brand), 0 0 0 4px rgba(107, 78, 255, .12); }
.wl-field input::placeholder, .wl-field textarea::placeholder { color: var(--gray-2); }
.wl-submit { margin-top: 4px; }
.wl-fine { font-size: 12.5px; color: var(--gray); text-align: center; }
.wl-fine a, .wl-alt a { color: var(--brand-deep); font-weight: 600; }
.wl-alt { width: min(560px, 100%); font-size: 14.5px; color: var(--gray); text-align: center; }
.wl-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: min(560px, 100%); font-size: 13.5px; color: var(--gray); }
.wl-switch span { margin-right: 2px; }
.wl-switch a { padding: 6px 12px; border-radius: 999px; background: var(--white); color: var(--ink-2); font-weight: 600; text-decoration: none; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s, color .2s; }
.wl-switch a:hover { color: var(--brand-deep); box-shadow: inset 0 0 0 1.5px var(--brand); }
.wl-switch a[aria-current="page"] { background: var(--brand-deep); color: var(--white); box-shadow: none; }
.wl-msg { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 12px; font-size: 14.5px; }
.wl-msg .ico { flex: none; width: 18px; height: 18px; }
.wl-msg.err { background: #fff0ee; color: #7a1a10; box-shadow: inset 0 0 0 1px rgba(217, 48, 37, .18); }
/* Thanks */
.wl-done { padding: 96px 0 104px; text-align: center; }
.wl-done-inner { position: relative; display: flex; flex-direction: column; align-items: center; }
.wl-done .kicker::before { display: none; }
.wl-done h1 { max-width: 14em; font-size: clamp(40px, 5.6vw, 72px); }
.wl-done .lead { margin-inline: auto; }
.wl-place { position: relative; display: grid; place-items: center; align-content: center; width: 184px; height: 184px; margin-bottom: 32px; border-radius: 50%; background: radial-gradient(closest-side, var(--night-2) 78%, transparent 79%), conic-gradient(from 0deg, var(--cyan), var(--brand), var(--pink), var(--cyan)); box-shadow: 0 0 80px -10px var(--brand-glow); animation: pop-in .8s var(--ease-out) both; }
.wl-place::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 1px dashed rgba(176, 163, 255, .35); animation: spin 30s linear infinite; }
.wl-place small { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--d-gray); }
.wl-place b { font-size: 56px; line-height: 1; font-weight: 750; letter-spacing: -.05em; background: var(--aurora); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.wl-place-ok .ico { width: 72px; height: 72px; color: var(--brand-ink); stroke-width: 2.4; }
.wl-confetti { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.wl-confetti i { position: absolute; top: -20px; width: 8px; height: 14px; border-radius: 3px; background: var(--brand-ink); opacity: .8; animation: wl-fall 6s linear infinite; }
.wl-confetti i:nth-child(3n) { background: var(--cyan); width: 6px; height: 10px; }
.wl-confetti i:nth-child(3n+1) { background: var(--pink); }
.wl-confetti i:nth-child(1) { left: 8%; animation-delay: -1s; } .wl-confetti i:nth-child(2) { left: 16%; animation-delay: -3s; animation-duration: 7s; } .wl-confetti i:nth-child(3) { left: 24%; animation-delay: -5s; }
.wl-confetti i:nth-child(4) { left: 33%; animation-delay: -2s; animation-duration: 8s; } .wl-confetti i:nth-child(5) { left: 41%; animation-delay: -4s; } .wl-confetti i:nth-child(6) { left: 52%; animation-delay: -.5s; animation-duration: 7.5s; }
.wl-confetti i:nth-child(7) { left: 60%; animation-delay: -3.5s; } .wl-confetti i:nth-child(8) { left: 68%; animation-delay: -1.5s; animation-duration: 6.5s; } .wl-confetti i:nth-child(9) { left: 76%; animation-delay: -5.5s; }
.wl-confetti i:nth-child(10) { left: 84%; animation-delay: -2.5s; animation-duration: 8.5s; } .wl-confetti i:nth-child(11) { left: 91%; animation-delay: -4.5s; } .wl-confetti i:nth-child(12) { left: 96%; animation-delay: -.8s; animation-duration: 7s; }
@keyframes wl-fall { 0% { transform: translateY(0) rotate(0); opacity: 0; } 10% { opacity: .85; } 100% { transform: translateY(760px) rotate(540deg); opacity: 0; } }
.wl-next { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; width: min(900px, 100%); margin: 40px 0 36px; text-align: left; }
.wl-next li { display: grid; align-content: start; gap: 6px; padding: 20px; border-radius: var(--r-card); background: rgba(255, 255, 255, .04); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 0 1px var(--d-line); }
.wl-next-ico { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 6px; border-radius: 11px; background: rgba(107, 78, 255, .2); color: var(--brand-ink); }
.wl-next-ico .ico { width: 19px; height: 19px; }
.wl-next-n { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--d-gray); }
.wl-next b { color: var(--white); font-size: 16.5px; }
.wl-next li > span:last-child { color: var(--d-gray); font-size: 14.5px; line-height: 1.5; }

/* ==========================================================================
   Legal and security: calm long-form
   ========================================================================== */
.lg-hero { padding: 72px 0 56px; border-bottom: 1px solid var(--hairline); }
.lg-hero-inner { max-width: 960px; margin-left: max(var(--gutter), (100% - 1200px) / 2); }
.lg-hero-ico { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 22px; border-radius: 16px; background: linear-gradient(145deg, #8a73ff, var(--brand-deep)); color: var(--white); box-shadow: 0 14px 30px -12px var(--brand-glow), inset 0 1px 0 rgba(255, 255, 255, .25); }
.lg-hero-ico .ico { width: 26px; height: 26px; }
.lg-hero h1 { font-size: clamp(42px, 5.4vw, 68px); }
.lg-hero .lead { margin-bottom: 0; }
.lg-updated { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; padding: 6px 14px 6px 10px; border-radius: 99px; background: var(--white); box-shadow: 0 0 0 1px var(--hairline), var(--shadow-card); font-size: 14px; font-weight: 600; color: var(--ink-2); }
.lg-updated .ico { width: 15px; height: 15px; color: var(--green-ink); }
.lg-hero-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.lg-hero-links a { padding: 6px 14px; border-radius: 99px; color: var(--gray); font-size: 14px; font-weight: 600; text-decoration: none; transition: color .2s, background .2s; }
.lg-hero-links a:hover { color: var(--ink); background: var(--light); }
.lg-hero-links a[aria-current="page"] { background: var(--brand-wash); color: var(--brand-deep); }
.lg-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 28px; }
.lg-facts div { padding: 14px 16px; border-radius: var(--r-card); background: var(--white); box-shadow: 0 0 0 1px var(--hairline), var(--shadow-card); }
.lg-facts dt { font-size: 12.5px; color: var(--gray); }
.lg-facts dd { margin: 2px 0 0; font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.lg-shell { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 72px; align-items: start; padding: 56px 0 112px; }
.lg-toc { font-size: 14px; }
.lg-toc > summary .ico { display: none; width: 16px; height: 16px; transition: transform .2s; }
.lg-toc[open] > summary .ico { transform: rotate(180deg); }
.lg-toc-top { display: inline-flex !important; align-items: center; gap: 6px; margin-top: 16px; padding: 0 !important; border: 0 !important; font-size: 13px; color: var(--gray); }
.lg-toc-top .ico { width: 13px; height: 13px; transform: rotate(-90deg); }
.lg-article { max-width: 72ch; }
.lg-article section { scroll-margin-top: calc(var(--nav-h) + 24px); }
.lg-article h2 { display: flex; gap: 10px; align-items: baseline; }
.lg-num { color: var(--brand); font-variant-numeric: tabular-nums; }
.lg-tldr { position: relative; overflow: hidden; isolation: isolate; padding: 24px 26px; border-radius: var(--r-panel); background: var(--night); color: var(--d-text); box-shadow: 0 30px 60px -36px rgba(20, 10, 60, .6); }
.lg-tldr::before { content: ""; position: absolute; z-index: -1; right: -20%; top: -60%; width: 70%; height: 200%; background: radial-gradient(closest-side, rgba(107, 78, 255, .4), transparent); pointer-events: none; }
.lg-tldr-h { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-ink); }
.lg-tldr-h .ico { width: 15px; height: 15px; }
.prose .lg-tldr ul:not([class]) { gap: 10px; }
.prose .lg-tldr ul:not([class]) > li { color: #d6d6de; }
.prose .lg-tldr ul:not([class]) > li::before { background: var(--brand-ink); box-shadow: 0 0 0 3px rgba(176, 163, 255, .18); }
.prose .lg-tldr a { color: var(--brand-ink); text-decoration-color: rgba(176, 163, 255, .5); }
.lg-limited { padding: 18px 20px; border-radius: var(--r-card); background: var(--brand-wash); box-shadow: inset 3px 0 0 var(--brand); }
mark.lg-placeholder { padding: 1px 6px; border-radius: 6px; background: #fff3b0; color: var(--ink); font-weight: 600; }
.lg-article .table-wrap:has(> table.data) { margin-top: 16px; }
/* Security: three locks and the pillars. */
.lg-lock-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lg-lock { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: var(--r-panel); background: rgba(255, 255, 255, .035); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 0 1px var(--d-line); }
.lg-lock .card-ico { margin-bottom: 6px; }
.lg-lock h3 { color: var(--white); }
.lg-lock > p { color: var(--d-gray); font-size: 15.5px; line-height: 1.55; }
.lg-vault { display: grid; gap: 6px; margin-top: auto; padding: 14px; border-radius: 14px; background: rgba(5, 6, 10, .55); box-shadow: inset 0 0 0 1px var(--d-line-2); font-size: 12.5px; }
.lg-vault p:first-child { display: flex; justify-content: space-between; color: var(--d-gray); }
.lg-vault p:first-child b { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 99px; background: rgba(48, 209, 88, .14); color: #7ce59a; font-size: 11px; }
.lg-vault code { font: 11.5px/1.5 var(--mono); color: #cfcae8; overflow-wrap: anywhere; }
.lg-vault-ok { display: flex; align-items: center; gap: 6px; }
.lg-vault-ok .ico { flex: none; width: 13px; height: 13px; color: #7ce59a; }
.lg-lock-ui { margin-top: auto; }
.lg-scopes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.lg-scopes code { display: inline-flex; padding: 4px 9px; border-radius: 8px; background: rgba(107, 78, 255, .14); box-shadow: inset 0 0 0 1px rgba(176, 163, 255, .2); color: #ddd6ff; font: 11.5px/1.4 var(--mono); }
.lg-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lg-pillar h3 { margin-bottom: 8px; }
.lg-pillar p { font-size: 15.5px; line-height: 1.55; }

/* ==========================================================================
   /changelog: a timeline
   ========================================================================== */
.cl-hero { padding: 72px 0 64px; }
.cl-hero-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 56px; align-items: end; }
.cl-hero h1 { font-size: clamp(48px, 6vw, 84px); }
.cl-hero .lead { margin-bottom: 28px; }
.cl-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cl-stats div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 4px; padding: 16px 18px; border-radius: var(--r-card); background: rgba(255, 255, 255, .04); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 0 1px var(--d-line); }
.cl-stats dt { font-size: 13px; color: var(--d-gray); }
.cl-stats dd { margin: 0; font-size: 40px; line-height: 1; font-weight: 700; letter-spacing: -.05em; color: var(--white); font-variant-numeric: tabular-nums; }
.cl-stats div:first-child dd, .cl-stats div:nth-child(2) dd { background: var(--aurora); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cl-section { background: radial-gradient(50% 30% at 20% 0%, rgba(107, 78, 255, .06), transparent 70%), var(--white); }
.cl-timeline { position: relative; display: grid; gap: 48px; max-width: 1040px; }
.cl-timeline::before { content: ""; position: absolute; left: 207px; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--brand), rgba(107, 78, 255, .08)); }
.cl-release { position: relative; display: grid; grid-template-columns: 180px 56px minmax(0, 1fr); align-items: start; scroll-margin-top: calc(var(--nav-h) + 24px); }
.cl-date { grid-column: 1; grid-row: 1; display: grid; justify-items: end; gap: 10px; padding-top: 4px; text-align: right; }
.cl-cal { display: grid; place-items: center; width: 64px; overflow: hidden; border-radius: 14px; background: var(--white); box-shadow: 0 0 0 1px var(--hairline), var(--shadow-card); }
.cl-cal small { width: 100%; padding: 3px 0; background: linear-gradient(135deg, #8a73ff, var(--brand-deep)); color: var(--white); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-align: center; }
.cl-cal b { padding: 6px 0 8px; font-size: 26px; line-height: 1; font-weight: 700; letter-spacing: -.03em; }
.cl-date p { display: grid; justify-items: end; gap: 6px; font-size: 14px; font-weight: 600; color: var(--gray); }
.cl-marker { grid-column: 2; grid-row: 1; display: grid; justify-items: center; padding-top: 22px; }
.cl-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 3px var(--brand), 0 0 0 8px rgba(107, 78, 255, .14); }
.cl-latest .cl-dot { background: var(--brand); animation: breathe 3s ease-in-out infinite; }
.cl-card { grid-column: 3; grid-row: 1; padding: 28px; border-radius: var(--r-panel); background: var(--white); box-shadow: var(--shadow-card), 0 0 0 1px var(--hairline); }
.cl-latest .cl-card { box-shadow: var(--shadow-lift), 0 0 0 1px rgba(107, 78, 255, .25); background: radial-gradient(60% 50% at 100% 0%, rgba(107, 78, 255, .07), transparent 70%), var(--white); }
.cl-card h2 { margin-top: 12px; font-size: clamp(24px, 2.4vw, 31px); line-height: 1.15; }
.cl-card h2 a { color: inherit; text-decoration: none; }
.cl-card h2 a:hover { color: var(--brand-deep); }
.cl-sum { margin-top: 12px; color: var(--gray); font-size: 17px; line-height: 1.55; }
.cl-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.cl-tag { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 99px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; background: var(--light); color: var(--gray); }
.cl-tag .ico { width: 12px; height: 12px; }
.cl-tag-new { background: var(--brand-wash); color: var(--brand-deep); }
.cl-tag-improved { background: #e6f9ff; color: #075f78; }
.cl-tag-fixed { background: #e7f8ec; color: var(--green-ink); }
.cl-tag-security { background: var(--night); color: var(--brand-ink); }
.cl-items { display: grid; gap: 0; margin-top: 20px; border-top: 1px solid var(--hairline); }
.cl-items li { display: flex; gap: 14px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--hairline); font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.cl-items li:last-child { border-bottom: 0; padding-bottom: 0; }
.cl-items .cl-tag { min-width: 84px; justify-content: center; }

/* ==========================================================================
   404
   ========================================================================== */
.nf { padding: 72px 0 96px; text-align: center; }
.nf-inner { display: flex; flex-direction: column; align-items: center; }
.nf .kicker::before { display: none; }
.nf h1 { font-size: clamp(42px, 5.6vw, 72px); }
.nf .lead { margin-inline: auto; }
.nf-stage { position: relative; display: grid; place-items: center; margin-bottom: 8px; }
.nf-code { font-size: clamp(140px, 22vw, 260px); line-height: .85; font-weight: 800; letter-spacing: -.07em; background: linear-gradient(180deg, rgba(255, 255, 255, .9) 10%, rgba(176, 163, 255, .35) 70%, rgba(176, 163, 255, 0) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; user-select: none; }
.nf-bot { position: absolute; bottom: -10px; width: clamp(110px, 14vw, 160px); transform: rotate(-12deg); animation: bob 5s ease-in-out infinite; filter: drop-shadow(0 20px 40px rgba(107, 78, 255, .45)); }
.nf-search[hidden] { display: none; }
.nf-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: min(900px, 100%); margin-top: 48px; text-align: left; }
.nf-links a { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 18px; background: rgba(255, 255, 255, .04); color: var(--d-text); text-decoration: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 0 1px var(--d-line); transition: transform .25s var(--ease-out), box-shadow .25s, background .25s; }
.nf-links a:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 1px rgba(176, 163, 255, .35), 0 0 40px -14px var(--brand-glow); }
.nf-links a > span:nth-child(2) { display: grid; gap: 2px; flex: 1; min-width: 0; }
.nf-links b { color: var(--white); font-size: 15.5px; font-weight: 650; }
.nf-links small { color: var(--d-gray); font-size: 13px; }
.nf-links a > .ico { flex: none; width: 16px; height: 16px; color: var(--d-gray); transition: transform .25s var(--ease-out); }
.nf-links a:hover > .ico { transform: translateX(3px); color: var(--brand-ink); }
.nf-ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(107, 78, 255, .2); color: var(--brand-ink); }
.nf-ico .ico { width: 19px; height: 19px; }

/* ---------- Responsive (demo, waitlist, legal, changelog, 404) ---------- */
@media (max-width: 1060px) {
  .demo-stage { grid-template-columns: minmax(0, 1fr); }
  .demo-panel { position: static; }
  .lg-shell { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 32px; }
  .lg-toc { position: static; padding: 14px 18px; border-radius: var(--r-card); background: var(--light); }
  .lg-toc > summary { margin: 0; }
  .lg-toc > summary .ico { display: block; }
  .lg-toc[open] > summary { margin-bottom: 10px; }
  .lg-lock-grid, .lg-pillars { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lg-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cl-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .wl { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .wl-side { justify-content: center; padding: 56px var(--gutter); }
  .wl-main { align-items: center; padding: 48px var(--gutter) 64px; }
}
@media (max-width: 760px) {
  .demo-hero, .cl-hero, .lg-hero, .nf { padding: 48px 0 48px; }
  .demo-stepper ol { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--gutter)) 24px; padding: 4px var(--gutter) 8px; scrollbar-width: none; }
  .demo-step { flex: none; }
  .demo-step-cap { margin-left: 0; }
  .demo-app { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .demo-app-chat { border-right: 0; border-bottom: 1px solid var(--d-line); }
  .demo-toast { position: static; width: auto; margin-top: 12px; }
  .demo-panel { padding: 22px; }
  .wl-side { padding: 40px var(--gutter) 36px; }
  .wl-points { gap: 10px; margin-top: 24px; }
  .wl-points li > span:last-child { font-size: 0; }
  .wl-points b { font-size: 15.5px; }
  .wl-point-ico { width: 34px; height: 34px; }
  .wl-logos { display: none; }
  .wl-stats { gap: 8px; margin-top: 24px; }
  .wl-stats div { padding: 12px; }
  .wl-stats dt { font-size: 11.5px; }
  .wl-form { padding: 22px; }
  .wl-two { grid-template-columns: minmax(0, 1fr); }
  .wl-next { grid-template-columns: minmax(0, 1fr); }
  .wl-place { width: 150px; height: 150px; }
  .wl-place b { font-size: 44px; }
  .lg-lock-grid, .lg-pillars { grid-template-columns: minmax(0, 1fr); }
  .lg-hero-inner { margin-left: auto; }
  .cl-timeline::before { left: 15px; }
  .cl-release { grid-template-columns: 32px minmax(0, 1fr); row-gap: 12px; }
  .cl-marker { grid-column: 1; grid-row: 1; padding-top: 18px; }
  .cl-date { grid-column: 2; grid-row: 1; display: flex; align-items: center; justify-items: start; text-align: left; }
  .cl-date p { justify-items: start; }
  .cl-cal { width: 54px; }
  .cl-card { grid-column: 1 / -1; grid-row: 2; padding: 20px; }
  .cl-items li { flex-direction: column; gap: 6px; }
  .cl-items .cl-tag { min-width: 0; }
  .nf-links { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .wl-confetti { display: none; }
  .wl-side::before { animation: none; }
}