:root{--se-paper:#faf9f5;--se-paper-soft:#f3f1ea;--se-ink:#172016;--se-muted:#62675f;--se-line:rgba(23,32,22,.14);--se-accent:#52634a;--se-white:#fff;--se-shell:1120px;--se-tight:4px;--se-inline:8px;--se-item:12px;--se-group:16px;--se-block:24px;--se-section:32px;--se-page:40px;--se-wide:48px;--se-hero:80px;--se-pill:9999px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--se-paper);color:var(--se-ink);font:400 16px/1.65 Inter,system-ui,sans-serif}
a{color:inherit}
button,input,textarea{font:inherit}
:where(a,button,input,textarea,summary):focus-visible{outline:2px solid var(--se-accent);outline-offset:4px}
.se-shell{width:min(var(--se-shell),calc(100% - var(--se-wide)));margin-inline:auto}
.se-nav{border-bottom:1px solid var(--se-line);background:rgba(250,249,245,.96)}
.se-nav-inner{min-height:72px;display:flex;align-items:center;gap:var(--se-block)}
.se-brand{display:inline-flex;align-items:center;gap:var(--se-inline);font-weight:700;text-decoration:none;letter-spacing:-.04em}
.se-brand img{width:24px;height:24px}
.se-nav nav{display:flex;align-items:center;gap:var(--se-block);margin-left:auto}
.se-nav nav a{color:var(--se-muted);font-size:14px;text-decoration:none}
.se-nav nav a:hover,.se-nav nav a:focus-visible{color:var(--se-ink)}
.se-button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:var(--se-item) var(--se-block);border:1px solid var(--se-ink);border-radius:var(--se-pill);background:var(--se-ink);color:var(--se-white);font-weight:600;text-decoration:none;cursor:pointer;transition:transform 200ms ease-out}
.se-button.compact{min-height:40px;padding:var(--se-inline) var(--se-group);font-size:14px}
.se-button.secondary{background:transparent;color:var(--se-ink)}
.se-button:hover,.se-button:focus-visible{transform:translateY(-2px)}
.se-crumb{width:min(var(--se-shell),calc(100% - var(--se-wide)));margin:var(--se-block) auto 0;display:flex;gap:var(--se-inline);color:var(--se-muted);font-size:13px}
.se-crumb a{color:var(--se-muted)}
.se-hero,.se-article-hero{padding:var(--se-hero) 0}
.se-hero-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(280px,.6fr);gap:var(--se-hero);align-items:end}
.se-label{display:block;color:var(--se-accent);font:700 10px/1.4 'Space Mono',ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase}
/* Same visual treatment as .se-label, deliberately a different class. The
   annual business guide hero uses this for item.label, e.g. "2027 opportunity
   watchlist published August 2026" — a real evidence-classification and
   publish-date stamp, not a restated topic tag, and it is the only place
   that fact appears on the page. Sharing .se-label would have made it a
   target of the sitewide eyebrow sweep (site/scripts/remove-eyebrows.mjs)
   and scripts/generate-search-engine-pages.mjs's stripEyebrows(), same as
   the dateline exception already made for .ref-kicker on the AI reference
   pages. Give informational stamps their own class rather than reusing the
   decorative one, so a future sweep can't remove them by accident. */
.se-guide-meta{display:block;color:var(--se-accent);font:700 10px/1.4 'Space Mono',ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase}
h1,h2,h3,p{margin-top:0}
h1{max-width:920px;margin:var(--se-group) 0 var(--se-block);font:400 clamp(48px,7vw,80px)/.96 Newsreader,Georgia,serif;letter-spacing:-.05em}
h2{margin:var(--se-group) 0 var(--se-block);font:400 clamp(36px,5vw,56px)/1 Newsreader,Georgia,serif;letter-spacing:-.04em}
h3{font:500 22px/1.2 Newsreader,Georgia,serif;letter-spacing:-.02em}
.se-dek{max-width:760px;margin:0;color:var(--se-muted);font-size:19px;line-height:1.6}
.se-answer{border-top:1px solid var(--se-line);padding-top:var(--se-block)}
.se-answer strong{font-size:14px}
.se-answer p{margin:var(--se-item) 0 0;color:var(--se-muted)}
.se-section{padding:var(--se-hero) 0;border-top:1px solid var(--se-line)}
.se-section.soft{background:var(--se-paper-soft)}
.se-split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--se-hero)}
.se-checks{margin:0;padding:0;list-style:none;border-top:1px solid var(--se-line)}
.se-checks li{padding:var(--se-group) 0;border-bottom:1px solid var(--se-line)}
.se-steps{border-top:1px solid var(--se-line)}
.se-steps article{display:grid;grid-template-columns:64px minmax(0,1fr);gap:var(--se-block);padding:var(--se-block) 0;border-bottom:1px solid var(--se-line)}
.se-steps article>span,.se-index{font:700 11px/1.5 'Space Mono',ui-monospace,monospace;color:var(--se-accent)}
.se-steps h3,.se-steps p{margin-bottom:var(--se-inline)}
.se-steps p{max-width:760px;color:var(--se-muted)}
.se-shapes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--se-block);border-top:1px solid var(--se-line)}
.se-shapes article{padding:var(--se-block) 0;border-bottom:1px solid var(--se-line)}
.se-shapes p{color:var(--se-muted)}
.se-faq{border-top:1px solid var(--se-line)}
.se-faq details{border-bottom:1px solid var(--se-line);padding:var(--se-group) 0}
.se-faq summary{font-weight:600;cursor:pointer}
.se-faq p{max-width:760px;margin:var(--se-item) 0 0;color:var(--se-muted)}
.se-related{padding:var(--se-hero) 0;border-top:1px solid var(--se-line)}
.se-link-list{border-top:1px solid var(--se-line)}
.se-link-list a{display:flex;align-items:center;justify-content:space-between;gap:var(--se-block);padding:var(--se-group) 0;border-bottom:1px solid var(--se-line);text-decoration:none}
.se-link-list span{color:var(--se-muted);font-size:13px}
.se-cta{padding:96px 0;background:var(--se-ink);color:var(--se-white)}
.se-cta h2{max-width:800px}
.se-cta p{max-width:640px;color:#c8cdc5}
.se-cta .se-button{margin-top:var(--se-group);border-color:var(--se-white);background:var(--se-white);color:var(--se-ink)}
.se-footer{padding:var(--se-hero) 0;background:#111710;color:var(--se-white)}
.se-footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--se-wide)}
.se-footer p{max-width:360px;margin-top:var(--se-group);color:#aeb5aa}
.se-footer nav{display:flex;flex-direction:column;gap:var(--se-item)}
.se-footer nav strong{font-size:13px}
.se-footer nav a{color:#aeb5aa;font-size:14px;text-decoration:none}
.se-library{border-top:1px solid var(--se-line)}
.se-library>a{display:grid;grid-template-columns:64px minmax(0,1fr) 32px;gap:var(--se-block);align-items:start;padding:var(--se-section) 0;border-bottom:1px solid var(--se-line);text-decoration:none}
.se-library h2{margin:var(--se-inline) 0 var(--se-item);font-size:32px}
.se-library p{max-width:720px;margin:0;color:var(--se-muted)}
.se-library b{font-size:24px;transition:transform 200ms ease-out}
.se-library>a:hover b,.se-library>a:focus-visible b{transform:translateX(4px)}
.se-article-hero{border-bottom:1px solid var(--se-line)}
.se-meta{display:flex;gap:var(--se-block);margin-top:var(--se-section);color:var(--se-muted);font-size:13px}
.se-article-grid{display:grid;grid-template-columns:240px minmax(0,720px);gap:var(--se-hero);align-items:start;padding:var(--se-hero) 0}
.se-toc{position:sticky;top:96px;display:flex;flex-direction:column;gap:var(--se-item);font-size:13px}
.se-toc a{color:var(--se-muted);text-decoration:none}
.se-prose section{padding:0 0 var(--se-wide)}
.se-prose section+section{padding-top:var(--se-wide);border-top:1px solid var(--se-line)}
.se-prose h2{font-size:40px}
.se-prose p{color:var(--se-muted);font-size:17px}
.se-actions{display:flex;gap:var(--se-item);flex-wrap:wrap;margin-top:var(--se-section)}
.se-template{display:block}
.se-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--se-block)}
.se-fields label,.se-notes{display:flex;flex-direction:column;gap:var(--se-inline)}
.se-fields label span,.se-notes>span{font-size:13px;font-weight:600}
.se-fields input,.se-notes textarea{width:100%;border:0;border-bottom:1px solid var(--se-line);border-radius:0;background:transparent;padding:var(--se-item) 0;color:var(--se-ink)}
.se-template-review{margin-top:var(--se-wide);padding:clamp(24px,4vw,40px);border:1px solid var(--se-line);border-radius:24px;background:linear-gradient(135deg,#fff,var(--se-paper-soft))}.se-template-review-head{display:flex;justify-content:space-between;align-items:start;gap:var(--se-block)}.se-template-review-head h3{max-width:660px;margin:var(--se-inline) 0 0;font:500 clamp(30px,4vw,44px)/1.02 Newsreader,Georgia,serif}.se-template-review-head>strong{font:500 clamp(38px,5vw,58px)/1 Newsreader,Georgia,serif;font-variant-numeric:tabular-nums}.se-template-review>progress{appearance:none;width:100%;height:9px;margin:var(--se-block) 0;border:0;border-radius:999px;overflow:hidden;background:var(--se-line)}.se-template-review>progress::-webkit-progress-bar{background:var(--se-line)}.se-template-review>progress::-webkit-progress-value{background:var(--se-accent);border-radius:999px}.se-template-review>progress::-moz-progress-bar{background:var(--se-accent);border-radius:999px}.se-template-signals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--se-item);color:var(--se-muted);font-size:12px}.se-template-signals span{padding:var(--se-item);border:1px solid var(--se-line);border-radius:12px;background:rgba(255,255,255,.7)}.se-template-status{margin:var(--se-block) 0 0;padding:0;border:0}.se-template-status legend,.se-template-meta label>span{display:block;margin-bottom:var(--se-inline);font-size:12px;font-weight:700}.se-template-status>div{display:flex;flex-wrap:wrap;gap:var(--se-inline)}.se-template-status button{appearance:none;border:1px solid var(--se-line);border-radius:999px;background:#fff;padding:10px 14px;color:var(--se-muted);font:600 12px/1 Inter,sans-serif;cursor:pointer}.se-template-status button[aria-pressed="true"]{border-color:var(--se-ink);background:var(--se-ink);color:#fff}.se-template-status button:focus-visible{outline:3px solid rgba(116,142,93,.28);outline-offset:2px}.se-template-meta{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--se-block);margin-top:var(--se-block)}.se-template-meta label{min-width:0}.se-template-meta input{width:100%;border:0;border-bottom:1px solid var(--se-line);border-radius:0;background:transparent;padding:var(--se-inline) 0;color:var(--se-ink)}.se-template-meta input:focus-visible,.se-fields input:focus-visible,.se-notes textarea:focus-visible{outline:0;border-bottom-color:var(--se-ink)}.se-template-review>p{max-width:760px;margin:var(--se-block) 0 0;color:var(--se-muted);font-size:12px}
.se-template-list{border-top:1px solid var(--se-line)}
.se-template-list label{display:grid;grid-template-columns:24px minmax(0,1fr);gap:var(--se-item);padding:var(--se-group) 0;border-bottom:1px solid var(--se-line);cursor:pointer}
.se-template-list input{width:18px;height:18px;margin:var(--se-tight) 0 0;accent-color:var(--se-accent)}
.se-notes{margin-top:var(--se-section)}
.se-template-end{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--se-wide);align-items:end}
.se-template-end p{max-width:720px;color:var(--se-muted)}
.se-tool-section{background:var(--se-white)}
.se-tool-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--se-hero);align-items:start}
.se-tool-heading p{max-width:560px;color:var(--se-muted)}
.se-tool-heading h2,.se-tool-result h2{font-size:40px}
.se-tool-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--se-block);margin-top:var(--se-section)}
.se-tool-field{display:flex;flex-direction:column;gap:var(--se-inline)}
.se-tool-field:has(textarea){grid-column:1/-1}
.se-tool-field>span{font-size:13px;font-weight:600}
.se-tool-field input,.se-tool-field textarea{width:100%;border:0;border-bottom:1px solid var(--se-line);border-radius:0;background:transparent;padding:var(--se-item) 0;color:var(--se-ink)}
.se-tool-field input:focus-visible,.se-tool-field textarea:focus-visible{border-bottom-color:var(--se-ink)}
.se-tool-field input:user-invalid,.se-tool-field textarea:user-invalid{border-bottom-color:#8b3f34}
.se-tool-field textarea{min-height:112px;resize:vertical}
.se-tool-choice{min-width:0;margin:0;padding:0;border:0}
.se-tool-choice legend{margin-bottom:var(--se-inline);padding:0;font-size:13px;font-weight:600}
.se-tool-choice>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:1px solid var(--se-line)}
.se-tool-choice label{position:relative;cursor:pointer;text-align:center}
.se-tool-choice input{position:absolute;width:1px;height:1px;opacity:0}
.se-tool-choice span{display:block;padding:var(--se-item) var(--se-inline);border-bottom:2px solid transparent;color:var(--se-muted);font-size:13px;font-weight:600}
.se-tool-choice input:checked+span{border-bottom-color:var(--se-ink);color:var(--se-ink)}
.se-tool-choice input:focus-visible+span{outline:2px solid var(--se-accent);outline-offset:4px}
.se-tool-status{min-height:24px;margin:var(--se-group) 0 0;color:var(--se-muted);font-size:13px}
.se-tool-status[data-error="true"]{color:#8b3f34}
.se-result-status{margin:var(--se-item) 0 var(--se-group)}
.se-tool-result{position:sticky;top:var(--se-block);border-top:1px solid var(--se-line);padding-top:var(--se-block)}
.se-result-head{display:flex;align-items:start;justify-content:space-between;gap:var(--se-block)}
.se-result-actions{display:flex;gap:var(--se-inline)}
.se-result-actions{flex-wrap:wrap;justify-content:flex-end}
.se-result-actions button{border:0;border-bottom:1px solid var(--se-line);background:transparent;padding:var(--se-inline) var(--se-tight);color:var(--se-ink);font-size:13px;cursor:pointer;transition:border-color 200ms ease-out,color 200ms ease-out}
.se-result-actions button:disabled{color:var(--se-muted);cursor:not-allowed}
.se-result-actions button:not(:disabled):hover{border-bottom-color:var(--se-ink)}
.se-tool-result pre{min-height:400px;margin:var(--se-block) 0;padding:var(--se-block) 0;border-block:1px solid var(--se-line);color:var(--se-ink);font:400 13px/1.7 'Space Mono',ui-monospace,monospace;white-space:pre-wrap;overflow-wrap:anywhere}
.se-tool-result>p{color:var(--se-muted);font-size:13px}
.se-tool-handoff{margin-top:var(--se-block);padding-top:var(--se-block);border-top:1px solid var(--se-line)}
.se-tool-handoff[hidden]{display:none}
.se-tool-handoff p{max-width:560px;margin:var(--se-inline) 0;color:var(--se-muted);font-size:13px}
.se-tool-handoff a{color:var(--se-ink);font-size:14px;font-weight:600;text-underline-offset:4px}
.se-tool-stages{display:grid;gap:var(--se-section);margin-top:var(--se-section)}
.se-tool-stage{min-width:0;margin:0;padding:var(--se-block) 0 0;border:0;border-top:1px solid var(--se-line)}
.se-tool-stage legend{display:flex;align-items:baseline;gap:var(--se-item);padding:0;color:var(--se-ink)}
.se-tool-stage legend span{color:var(--se-accent);font:700 11px/16px 'Space Mono',ui-monospace,monospace}
.se-tool-stage legend strong{font-size:17px;line-height:24px}
.se-tool-stage>p{max-width:520px;margin:var(--se-inline) 0 0;color:var(--se-muted);font-size:14px;line-height:21px}
.se-tool-stage .se-tool-fields{margin-top:var(--se-block)}
.se-result-actions{align-items:center}
.se-result-actions>button,.se-download-control>button{min-height:44px;padding:var(--se-inline) var(--se-item)}
.se-download-control{position:relative}
.se-download-menu{position:absolute;z-index:20;top:calc(100% + var(--se-inline));right:0;width:240px;border:1px solid var(--se-line);border-radius:14px;background:var(--se-paper);padding:var(--se-inline)}
.se-download-menu[hidden]{display:none}
.se-download-menu button{display:block;width:100%;min-height:44px;border:0;border-radius:8px;background:transparent;padding:var(--se-item);color:var(--se-ink);text-align:left;cursor:pointer}
.se-download-menu button:hover,.se-download-menu button:focus-visible{background:var(--se-paper-soft)}
.se-download-menu button:disabled{color:var(--se-muted);cursor:not-allowed}
.se-tool-result pre[data-editable-output][contenteditable="true"]{cursor:text}
.se-tool-result pre[data-editable-output][contenteditable="true"]:focus-visible{outline:2px solid var(--se-accent);outline-offset:4px}
.se-edit-note{margin-top:calc(var(--se-block) * -1);padding-top:var(--se-item)}
.se-share-panel{margin-top:var(--se-section);padding-top:var(--se-block);border-top:1px solid var(--se-line)}
.se-share-panel[hidden]{display:none}
.se-share-panel h3{margin:0 0 var(--se-inline);font-family:Inter,system-ui,sans-serif;font-size:17px;line-height:24px;font-weight:600;letter-spacing:-.011em}
.se-share-panel>div>p,.se-share-note{margin:0;color:var(--se-muted);font-size:13px;line-height:18px}
.se-share-option{display:grid;grid-template-columns:20px minmax(0,1fr);gap:var(--se-item);align-items:start;margin-top:var(--se-block);font-size:13px;font-weight:600;cursor:pointer}
.se-share-option input{width:18px;height:18px;margin:0;accent-color:var(--se-accent)}
.se-share-link-row{margin-top:var(--se-block)}
.se-share-link-row>label{display:block;margin-bottom:var(--se-inline);font-size:13px;font-weight:600}
.se-share-link-row>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--se-inline)}
.se-share-link-row input{min-width:0;min-height:44px;border:1px solid var(--se-line);border-radius:8px;background:var(--se-paper);padding:var(--se-item);color:var(--se-ink);font:400 12px/16px 'Space Mono',ui-monospace,monospace}
.se-share-link-row button,.se-share-actions button,.se-shared-banner button{min-height:44px;border:1px solid var(--se-line);border-radius:8px;background:transparent;padding:var(--se-inline) var(--se-item);color:var(--se-ink);font-size:13px;font-weight:600;cursor:pointer}
.se-share-actions{display:flex;flex-wrap:wrap;gap:var(--se-inline);margin-top:var(--se-item)}
.se-share-note{margin-top:var(--se-item)}
.se-shared-banner{margin-bottom:var(--se-block);padding-bottom:var(--se-block);border-bottom:1px solid var(--se-line)}
.se-shared-banner[hidden]{display:none}
.se-shared-banner strong{font-size:15px;line-height:22px}
.se-shared-banner p{margin:var(--se-inline) 0 var(--se-item);color:var(--se-muted);font-size:13px;line-height:18px}
body[data-shared-tool-view="true"] .se-tool-grid{grid-template-columns:minmax(0,1fr)}
body[data-shared-tool-view="true"] .se-tool-result{max-width:840px;margin-inline:auto}
.se-tool-library>a{scroll-margin-top:var(--se-block)}
.se-bridge{padding:var(--se-hero) 0;border-top:1px solid var(--se-line);background:var(--se-paper)}
.se-bridge h2{max-width:800px}
.se-bridge p{max-width:700px;color:var(--se-muted)}
.se-bridge .se-button{margin-top:var(--se-group)}
.se-directory,.se-main-directory{padding:var(--se-wide) 0;border-top:1px solid var(--se-line)}
.se-main-directory h2{margin-bottom:var(--se-item)}
.se-directory-note{max-width:760px;color:var(--se-muted)}
.se-directory-controls{margin:var(--se-section) 0 var(--se-wide);border-top:1px solid var(--se-line);border-bottom:1px solid var(--se-line)}
.se-directory-search{display:grid;grid-template-columns:160px minmax(0,1fr);align-items:center;gap:var(--se-block);padding:var(--se-group) 0;border-bottom:1px solid var(--se-line)}
.se-directory-search span{font-size:13px;font-weight:600}
.se-directory-search input{width:100%;border:0;background:transparent;padding:var(--se-inline) 0;color:var(--se-ink);font:inherit}
.se-directory-search input:focus-visible{outline:0}
.se-directory-filters{display:flex;gap:var(--se-group);overflow-x:auto;padding-top:var(--se-item)}
.se-directory-filters button{flex:0 0 auto;border:0;border-bottom:2px solid transparent;background:transparent;padding:var(--se-item) 0;color:var(--se-muted);font:600 13px/1.4 Inter,sans-serif;cursor:pointer}
.se-directory-filters button[aria-pressed="true"]{border-bottom-color:var(--se-ink);color:var(--se-ink)}
.se-directory-count{min-height:24px;margin:var(--se-item) 0;color:var(--se-muted);font-size:13px}
.se-journeys{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--se-wide);border-top:1px solid var(--se-line)}
.se-journeys article{display:grid;grid-template-columns:40px minmax(0,1fr);gap:var(--se-item);padding:var(--se-block) 0;border-bottom:1px solid var(--se-line)}
.se-journeys article>span{font:700 11px/1.5 'Space Mono',ui-monospace,monospace;color:var(--se-accent)}
.se-journeys h3,.se-journeys ol{grid-column:2;margin:0}
.se-journeys ol{padding:var(--se-item) 0 0 20px;color:var(--se-muted)}
.se-journeys li+li{margin-top:var(--se-inline)}
.se-journeys a{color:var(--se-ink);text-underline-offset:4px}
.se-recent-tools{border-top:1px solid var(--se-line)}
.se-recent-tools>p{padding:var(--se-group) 0;border-bottom:1px solid var(--se-line);color:var(--se-muted)}
.se-recent-tools>a{display:grid;grid-template-columns:48px minmax(0,1fr);gap:var(--se-item);padding:var(--se-group) 0;border-bottom:1px solid var(--se-line);color:var(--se-ink);text-decoration:none}
.se-recent-tools>a>span{font:700 11px/1.5 'Space Mono',ui-monospace,monospace;color:var(--se-accent)}
.se-recent-tools>a div{display:flex;gap:var(--se-item);align-items:baseline}
.se-recent-tools>a div span{color:var(--se-muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.se-main-pack-links{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--se-line);margin-bottom:var(--se-wide)}
.se-main-pack-links a{padding:var(--se-group) var(--se-item);border-bottom:1px solid var(--se-line);color:var(--se-ink);font-size:13px;text-decoration:none}
.se-main-pack-links a+a{border-left:1px solid var(--se-line)}
.se-main-cluster-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--se-block);margin:var(--se-wide) 0 var(--se-group)}
.se-main-cluster-head a{color:var(--se-ink);font-size:13px;font-weight:600;text-underline-offset:4px}
.se-link-list a div{min-width:0}
.se-link-list a div p{max-width:760px;margin:var(--se-inline) 0 0;color:var(--se-muted);font-size:13px}
@media(max-width:900px){.se-nav nav{display:none}.se-nav .se-button{margin-left:auto}.se-hero-grid,.se-split,.se-article-grid,.se-tool-grid{grid-template-columns:1fr;gap:var(--se-wide)}.se-journeys,.se-main-pack-links{grid-template-columns:1fr}.se-main-pack-links a+a{border-left:0}.se-article-grid{padding-top:var(--se-wide)}.se-toc,.se-tool-result{position:static}.se-toc{padding-bottom:var(--se-block);border-bottom:1px solid var(--se-line)}.se-tool-result pre{min-height:320px}.se-footer-grid{grid-template-columns:1fr 1fr}.se-footer-grid>div{grid-column:1/-1}}
@media(max-width:640px){.se-shell,.se-crumb{width:min(var(--se-shell),calc(100% - var(--se-section)))}.se-nav-inner{min-height:64px}.se-hero,.se-article-hero,.se-section,.se-related{padding:var(--se-wide) 0}.se-hero-grid{gap:var(--se-section)}h1{font-size:clamp(40px,13vw,48px)}.se-shapes,.se-fields,.se-tool-fields,.se-footer-grid{grid-template-columns:1fr}.se-tool-field:has(textarea){grid-column:auto}.se-result-head{display:block}.se-result-actions{margin-top:var(--se-group);justify-content:flex-start}.se-download-menu{right:auto;left:0;width:min(280px,calc(100vw - var(--se-wide)))}.se-share-link-row>div{grid-template-columns:1fr}.se-share-link-row button,.se-share-actions button{width:100%}.se-directory-search{grid-template-columns:1fr;gap:var(--se-inline)}.se-recent-tools>a div{align-items:flex-start;flex-direction:column;gap:var(--se-tight)}.se-main-cluster-head{align-items:flex-start;flex-direction:column;gap:var(--se-inline)}.se-library>a{grid-template-columns:40px minmax(0,1fr) 24px;gap:var(--se-item)}.se-library h2{font-size:28px}.se-template-end{grid-template-columns:1fr}.se-template-review-head{display:grid}.se-template-signals,.se-template-meta{grid-template-columns:1fr}.se-cta{padding:var(--se-hero) 0}.se-meta{flex-direction:column;gap:var(--se-inline)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.se-button,.se-library b{transition:none!important;transform:none!important}}
@media print{.se-nav,.se-crumb,.se-related,.se-cta,.se-footer,.se-actions,.se-bridge,.se-tool-form,.se-result-actions,.se-template-status,.se-share-panel,.se-shared-banner,.se-edit-note,.se-tool-handoff{display:none!important}.se-section{padding:var(--se-block) 0}.se-template-list label{break-inside:avoid}.se-template-review{padding:18px;break-inside:avoid}.se-template-signals{grid-template-columns:repeat(3,1fr)}.se-tool-grid{display:block}.se-tool-result{position:static}.se-tool-result pre{min-height:0}body{background:var(--se-paper)}.se-shell{width:100%}}

/* Rich Stelaah marketing system: shared navigation, product proof, teams, templates */
.se-nav{position:sticky;top:0;z-index:60;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.se-nav-inner{min-height:76px}
.se-nav-actions{display:flex;align-items:center;gap:var(--se-group);margin-left:var(--se-block)}
.se-signin{color:var(--se-muted);font-size:14px;font-weight:600;text-decoration:none}
.se-signin:hover,.se-signin:focus-visible{color:var(--se-ink)}
.se-template-hero,.se-teams-hero{padding:clamp(64px,8vw,112px) 0 clamp(72px,9vw,128px);overflow:hidden}
.se-template-hero-grid,.se-teams-hero-grid{display:grid;grid-template-columns:minmax(0,.84fr) minmax(520px,1.16fr);gap:clamp(48px,7vw,96px);align-items:center}
.se-template-search{display:grid;grid-template-columns:144px minmax(0,1fr);align-items:center;gap:var(--se-group);max-width:640px;margin-top:var(--se-wide);padding:var(--se-item) 0;border-block:1px solid var(--se-line)}
.se-template-search>span{font-size:13px;font-weight:700}
.se-template-search input{width:100%;border:0;background:transparent;color:var(--se-ink);padding:var(--se-inline) 0;font-size:16px}
.se-template-search input:focus-visible{outline:0}
.se-template-hero-visual,.se-teams-collage{position:relative;min-height:520px;isolation:isolate}
.se-template-hero-visual::before,.se-teams-collage::before{content:"";position:absolute;inset:9% 2% 4% 12%;border-radius:48% 52% 44% 56%;background:radial-gradient(circle at 44% 44%,rgba(116,142,93,.22),rgba(116,142,93,.04) 52%,transparent 72%);filter:blur(18px);z-index:-1}
.se-template-hero-visual figure,.se-teams-collage figure{position:absolute;margin:0;overflow:hidden;border:1px solid rgba(23,32,22,.13);border-radius:22px;background:#fff;box-shadow:0 28px 72px -40px rgba(23,32,22,.45)}
.se-template-hero-visual img,.se-teams-collage img{display:block;width:100%;height:100%;object-fit:cover}
.se-template-hero-visual .primary{inset:7% 0 8% 8%;transform:rotate(-1.6deg)}
.se-template-hero-visual .primary img{object-position:22% center}
.se-template-hero-visual .secondary{width:42%;height:31%;z-index:2}
.se-template-hero-visual .secondary.top{right:-5%;top:0;transform:rotate(2.2deg)}
.se-template-hero-visual .secondary.bottom{right:-2%;bottom:0;transform:rotate(1.2deg)}
.se-template-library{background:var(--se-white)}
.se-template-library-head{display:flex;justify-content:space-between;align-items:end;gap:var(--se-wide)}
.se-template-library-head h2{max-width:760px}
.se-template-library-head>p{flex:none;margin-bottom:var(--se-block);color:var(--se-muted);font-size:13px}
.se-template-filters{display:flex;gap:var(--se-group);overflow-x:auto;margin:var(--se-section) 0 var(--se-wide);border-bottom:1px solid var(--se-line);scrollbar-width:none}
.se-template-filters::-webkit-scrollbar{display:none}
.se-template-filters button{flex:none;border:0;border-bottom:2px solid transparent;background:transparent;padding:var(--se-item) 0;color:var(--se-muted);font-weight:600;cursor:pointer}
.se-template-filters button+button{margin-left:var(--se-inline)}
.se-template-filters button span{margin-left:var(--se-tight);font:700 10px/1 'Space Mono',ui-monospace,monospace}
.se-template-filters button[aria-pressed="true"]{border-bottom-color:var(--se-ink);color:var(--se-ink)}
.se-template-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--se-block)}
.se-template-card{min-width:0;color:inherit;text-decoration:none;border:1px solid var(--se-line);border-radius:22px;background:var(--se-paper);overflow:hidden;transition:transform 220ms ease-out,border-color 220ms ease-out,box-shadow 220ms ease-out}
.se-template-card:hover,.se-template-card:focus-visible{transform:translateY(-4px);border-color:rgba(23,32,22,.28);box-shadow:0 24px 54px -38px rgba(23,32,22,.48)}
.se-template-card[hidden]{display:none}
.se-template-card figure{aspect-ratio:16/9;margin:0;overflow:hidden;border-bottom:1px solid var(--se-line);background:var(--se-paper-soft)}
.se-template-card img{display:block;width:118%;height:118%;object-fit:cover;object-position:16% top;transition:transform 360ms ease-out}
.se-template-card:hover img,.se-template-card:focus-visible img{transform:translate3d(-2%,-2%,0) scale(1.02)}
.se-template-card-copy{padding:var(--se-block)}
.se-template-card h2{margin:var(--se-item) 0;font:500 28px/1.02 Newsreader,Georgia,serif}
.se-template-card p{color:var(--se-muted);font-size:14px;line-height:1.55}
.se-template-card strong{display:flex;justify-content:space-between;gap:var(--se-item);margin-top:var(--se-block);font-size:13px}
.se-template-empty{margin:var(--se-wide) 0 0;color:var(--se-muted)}
.se-template-promise p{max-width:680px;color:var(--se-muted);font-size:18px}
.se-template-promise .se-button{margin-top:var(--se-block)}
.se-teams-hero h1{max-width:620px}
.se-teams-collage .main{inset:4% 5% 9% 5%;transform:rotate(-1deg)}
.se-teams-collage .main img{object-position:8% top}
.se-teams-collage .piece{z-index:2;width:41%;height:27%}
.se-teams-collage .tasks{right:-4%;top:-2%;transform:rotate(2deg)}
.se-teams-collage .messages{left:-5%;bottom:-1%;transform:rotate(-2deg)}
.se-teams-collage .invoices{right:-1%;bottom:-5%;transform:rotate(1deg)}
.se-team-tabs{padding:var(--se-hero) 0;border-top:1px solid var(--se-line);background:var(--se-white)}
.se-team-tablist{display:flex;gap:var(--se-section);overflow-x:auto;border-bottom:1px solid var(--se-line);scrollbar-width:none}
.se-team-tablist::-webkit-scrollbar{display:none}
.se-team-tablist button{flex:none;border:0;border-bottom:2px solid transparent;background:transparent;padding:var(--se-group) 0;color:var(--se-muted);font-weight:700;cursor:pointer}
.se-team-tablist button[aria-selected="true"]{border-bottom-color:var(--se-ink);color:var(--se-ink)}
.se-team-panel{padding-top:var(--se-wide)}
[data-team-tabs][data-enhanced="true"] .se-team-panel[hidden]{display:none}
.se-team-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--se-block)}
.se-team-card{display:flex;min-height:260px;flex-direction:column;padding:var(--se-block);border:1px solid var(--se-line);border-radius:22px;background:var(--se-paper);color:inherit;text-decoration:none;transition:transform 220ms ease-out,border-color 220ms ease-out}
.se-team-card:hover,.se-team-card:focus-visible{transform:translateY(-4px);border-color:rgba(23,32,22,.3)}
.se-team-card>span{font:700 11px/1.4 'Space Mono',ui-monospace,monospace;color:var(--se-accent);letter-spacing:.08em;text-transform:uppercase}
.se-team-card h3{margin:var(--se-wide) 0 var(--se-item);font-size:32px}
.se-team-card p{color:var(--se-muted)}
.se-team-card strong{margin-top:auto;font-size:13px}
.se-connected-proof{background:#111710;color:var(--se-white)}
.se-connected-proof h2{max-width:840px}
.se-connected-proof .se-dek{color:#c8cdc5}
.se-proof-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;margin-top:var(--se-wide);border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.14)}
.se-proof-strip article{padding:var(--se-block);background:#111710}
.se-proof-strip span{font:700 10px/1.4 'Space Mono',ui-monospace,monospace;color:#a9cb8c}
.se-proof-strip h3{margin:var(--se-block) 0 var(--se-inline);font-family:Inter,sans-serif;font-size:17px}
.se-proof-strip p{margin:0;color:#aeb5aa;font-size:13px}
@media(max-width:1180px){.se-template-hero-grid,.se-teams-hero-grid{grid-template-columns:minmax(0,.9fr) minmax(440px,1.1fr);gap:var(--se-wide)}.se-template-hero-visual,.se-teams-collage{min-height:460px}.se-template-grid,.se-team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.se-proof-strip{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.se-nav-actions{margin-left:auto}.se-signin{display:none}.se-template-hero-grid,.se-teams-hero-grid{grid-template-columns:1fr}.se-template-hero-visual,.se-teams-collage{min-height:500px}.se-proof-strip{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.se-template-hero,.se-teams-hero{padding:var(--se-wide) 0 var(--se-hero)}.se-template-search{grid-template-columns:1fr;gap:0}.se-template-hero-visual,.se-teams-collage{min-height:340px}.se-template-hero-visual .primary,.se-teams-collage .main{inset:7% 1% 7%}.se-template-hero-visual .secondary,.se-teams-collage .piece{width:44%;height:28%}.se-template-grid,.se-team-grid,.se-proof-strip{grid-template-columns:1fr}.se-template-library-head{align-items:start;flex-direction:column;gap:0}.se-template-card h2{font-size:26px}.se-team-card{min-height:220px}.se-team-tablist{gap:var(--se-block)}}
@media(prefers-reduced-motion:reduce){.se-template-card,.se-template-card img,.se-team-card{transition:none!important;transform:none!important}}

@media(max-width:900px){
  .se-nav-inner{flex-wrap:wrap;padding-block:8px 12px}
  .se-nav nav{display:flex;order:3;width:100%;margin:0;gap:var(--se-block);overflow-x:auto;border-top:1px solid var(--se-line);padding-top:12px;scrollbar-width:none}
  .se-nav nav::-webkit-scrollbar{display:none}
  .se-nav nav a{flex:none}
}

/* Tools catalog — marketplace-style browsing with Stelaah's Editorial Calm. */
body[data-content-family="tool-index"] .ip-hero {
  padding-block: 64px 48px;
  border-bottom: 0;
  background: linear-gradient(180deg, var(--sh-paper) 0%, color-mix(in srgb, var(--sh-sunken) 72%, var(--sh-paper)) 100%);
}
body[data-content-family="tool-index"] .ip-hero h1 {
  max-width: 880px;
  margin-block: 16px;
}
body[data-content-family="tool-index"] .ip-hero .ip-dek { max-width: 760px; }
.td-catalog {
  padding-bottom: 80px;
  border-top: 1px solid var(--sh-line);
  background: var(--sh-paper);
}
.td-catalog-intro {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr);
  gap: 64px;
  align-items: end;
  padding-block: 40px 32px;
}
.td-catalog-intro h2,
.td-section-head h2,
.td-library-head h2 {
  margin: 8px 0 0;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.08;
}
.td-eyebrow {
  color: var(--sh-ink-3);
  font: 600 11px/1.4 var(--sh-sans);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.td-catalog-intro > div:first-child > p,
.td-section-head > p {
  max-width: 640px;
  margin: 12px 0 0;
  color: var(--sh-ink-2);
  font-size: 15px;
  line-height: 1.6;
}
.td-search-wrap {
  display: flex;
  gap: 8px;
  align-items: center;
}
.td-search-field {
  display: grid;
  min-width: 0;
  flex: 1;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 56px;
  padding-inline: 16px;
  border: 1px solid var(--sh-line-firm);
  border-radius: var(--cs-control-radius, 8px);
  background: var(--sh-surface);
}
.td-search-field:has(input:focus-visible) {
  border-color: var(--sh-ink);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--sh-accent) 20%, transparent);
}
.td-search-field svg { width: 20px; height: 20px; color: var(--sh-ink-3); }
.td-search-field input {
  width: 100%;
  min-width: 0;
  min-height: 52px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--sh-ink);
  font: 500 15px/1.4 var(--sh-sans);
}
.td-search-field input::placeholder { color: var(--sh-ink-3); }
.td-search-wrap > button,
.td-empty button {
  min-height: 44px;
  padding-inline: 16px;
  border: 1px solid var(--sh-line-firm);
  border-radius: var(--cs-control-radius, 8px);
  background: transparent;
  color: var(--sh-ink);
  font: 600 14px/1 var(--sh-sans);
  cursor: pointer;
}
.td-search-wrap > button:hover,
.td-search-wrap > button:focus-visible,
.td-empty button:hover,
.td-empty button:focus-visible { background: var(--sh-sunken); }
.td-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.td-category-rail {
  display: flex;
  gap: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  border-block: 1px solid var(--sh-line);
  scrollbar-width: thin;
}
.td-category-rail button {
  display: flex;
  flex: 0 0 auto;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  padding-inline: 20px;
  border: 0;
  border-right: 1px solid var(--sh-line);
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--sh-ink-2);
  font: 600 13px/1.3 var(--sh-sans);
  cursor: pointer;
  white-space: nowrap;
}
.td-category-rail button b {
  color: var(--sh-ink-3);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.td-category-rail button:hover,
.td-category-rail button:focus-visible { color: var(--sh-ink); background: var(--sh-sunken); }
.td-category-rail button[aria-pressed="true"] {
  border-bottom-color: var(--sh-ink);
  color: var(--sh-ink);
}
.td-collections,
.td-popular,
.td-recent,
.td-complete-library { padding-top: 64px; }
.td-section-head,
.td-library-head {
  display: flex;
  gap: 32px;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 24px;
}
.td-section-head > p { text-align: right; }
.td-collection-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.td-collection-card {
  --td-tone: var(--sh-sunken);
  display: grid;
  grid-template-rows: 120px minmax(0, 1fr);
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--sh-line);
  border-radius: var(--cs-card-radius, 14px);
  background: var(--sh-surface);
  color: var(--sh-ink);
  text-decoration: none;
}
.td-collection-icon {
  display: grid;
  place-items: center;
  background: var(--td-tone);
}
.td-collection-icon svg { width: 36px; height: 36px; }
.td-collection-card > div { padding: 20px; }
.td-collection-card h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.011em;
  line-height: 24px;
}
.td-collection-card p {
  min-height: 64px;
  margin: 8px 0 16px;
  color: var(--sh-ink-2);
  font-size: 13px;
  line-height: 1.55;
}
.td-collection-card > div > span,
.td-popular-card > span:last-child {
  color: var(--sh-ink);
  font-size: 13px;
  font-weight: 600;
}
.td-collection-card:hover,
.td-collection-card:focus-visible,
.td-popular-card:hover,
.td-popular-card:focus-visible { border-color: var(--sh-line-firm); }
[data-category-tone="clients"] { --td-tone: color-mix(in srgb, var(--sh-leaf) 8%, var(--sh-surface)); }
[data-category-tone="planning"] { --td-tone: color-mix(in srgb, var(--sh-leaf) 14%, var(--sh-surface)); }
[data-category-tone="finance"] { --td-tone: color-mix(in srgb, var(--sh-ink-3) 9%, var(--sh-surface)); }
[data-category-tone="marketing"] { --td-tone: color-mix(in srgb, var(--sh-leaf) 6%, var(--sh-surface)); }
[data-category-tone="operations"] { --td-tone: var(--sh-sunken); }
[data-category-tone="career"] { --td-tone: color-mix(in srgb, var(--sh-ink-3) 7%, var(--sh-surface)); }
[data-category-tone="business"] { --td-tone: color-mix(in srgb, var(--sh-leaf) 10%, var(--sh-surface)); }
[data-category-tone="packs"] { --td-tone: color-mix(in srgb, var(--sh-leaf) 5%, var(--sh-surface)); }
.td-popular-track {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}
.td-popular-card {
  --td-tone: var(--sh-sunken);
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--sh-line);
  border-radius: var(--cs-card-radius, 14px);
  background: var(--sh-surface);
  color: var(--sh-ink);
  text-decoration: none;
}
.td-popular-icon {
  display: grid;
  place-items: center;
  min-height: 104px;
  margin-bottom: 16px;
  background: var(--td-tone);
}
.td-popular-icon svg { width: 28px; height: 28px; }
.td-popular-card > :not(.td-popular-icon) { margin-inline: 16px; }
.td-popular-card > strong {
  display: -webkit-box;
  min-height: 48px;
  margin-top: 8px;
  overflow: hidden;
  font-size: 15px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.td-popular-card > span:last-child { margin-block: 16px; }
.td-recent:has(.td-recent-list > p:only-child) { display: none; }
.td-recent-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 24px;
  border-top: 1px solid var(--sh-line);
}
body[data-content-family="tool-index"] .td-recent-list > a { grid-template-columns: 32px minmax(0, 1fr); }
body[data-content-family="tool-index"] .td-recent-list > a div {
  display: grid;
  min-width: 0;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 12px;
}
body[data-content-family="tool-index"] .td-recent-list > a div span,
body[data-content-family="tool-index"] .td-recent-list > a strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.td-library-head .se-directory-count {
  min-height: 0;
  margin: 0;
  color: var(--sh-ink-2);
  font-size: 13px;
  white-space: nowrap;
}
.td-tool-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
body[data-content-family="tool-index"] .td-tool-grid > :where(.ip-index-card, .td-tool-card) {
  --td-tone: var(--sh-sunken);
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--sh-line);
  border-radius: var(--cs-card-radius, 14px);
  background: var(--sh-surface);
  color: var(--sh-ink);
  text-decoration: none;
}
.td-tool-grid > [data-category="clients"] { --td-tone: color-mix(in srgb, var(--sh-leaf) 8%, var(--sh-surface)); }
.td-tool-grid > [data-category="planning"] { --td-tone: color-mix(in srgb, var(--sh-leaf) 14%, var(--sh-surface)); }
.td-tool-grid > [data-category="finance"] { --td-tone: color-mix(in srgb, var(--sh-ink-3) 9%, var(--sh-surface)); }
.td-tool-grid > [data-category="marketing"] { --td-tone: color-mix(in srgb, var(--sh-leaf) 6%, var(--sh-surface)); }
.td-tool-grid > [data-category="operations"] { --td-tone: var(--sh-sunken); }
.td-tool-grid > [data-category="career"] { --td-tone: color-mix(in srgb, var(--sh-ink-3) 7%, var(--sh-surface)); }
.td-tool-grid > [data-category="business"] { --td-tone: color-mix(in srgb, var(--sh-leaf) 10%, var(--sh-surface)); }
.td-tool-grid > [data-category="packs"] { --td-tone: color-mix(in srgb, var(--sh-leaf) 5%, var(--sh-surface)); }
body[data-content-family="tool-index"] .td-tool-grid > :where(.ip-index-card, .td-tool-card):hover,
body[data-content-family="tool-index"] .td-tool-grid > :where(.ip-index-card, .td-tool-card):focus-visible {
  border-color: var(--sh-line-firm);
  background: var(--sh-surface);
}
.td-card-preview {
  display: flex;
  min-height: 128px;
  align-items: flex-end;
  justify-content: space-between;
  padding: 20px;
  background: var(--td-tone);
}
.td-card-preview svg { width: 32px; height: 32px; }
.td-card-preview > span {
  color: color-mix(in srgb, var(--sh-ink) 72%, transparent);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.td-card-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  padding: 20px;
}
body[data-content-family="tool-index"] .td-tool-grid .td-card-copy h2 {
  display: -webkit-box;
  min-height: 48px;
  margin: 8px 0;
  overflow: hidden;
  font-size: 17px;
  line-height: 24px;
  letter-spacing: -.011em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
body[data-content-family="tool-index"] .td-card-copy > p {
  display: -webkit-box;
  min-height: 64px;
  margin: 0 0 20px;
  overflow: hidden;
  color: var(--sh-ink-2);
  font-size: 13px;
  line-height: 1.6;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.td-card-copy .ip-card-link {
  margin-top: auto;
  color: var(--sh-ink);
  font-size: 13px;
  font-weight: 600;
}
.td-tool-grid > [hidden] { display: none; }
.td-empty {
  padding-block: 64px;
  border-block: 1px solid var(--sh-line);
  text-align: center;
}
.td-empty h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.016em;
  line-height: 28px;
}
.td-empty p { margin: 8px 0 20px; color: var(--sh-ink-2); }

@media (max-width: 1180px) {
  .td-collection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .td-popular-track { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .td-tool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .td-catalog-intro { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .td-popular-track,
  .td-recent-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .td-tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  body[data-content-family="tool-index"] .ip-hero { padding-block: 48px 32px; }
  .td-catalog { padding-bottom: 64px; }
  .td-catalog-intro { padding-block: 32px 24px; }
  .td-search-wrap { align-items: stretch; flex-direction: column; }
  .td-search-wrap > button { width: 100%; }
  .td-category-rail { margin-inline: calc(var(--cs-gutter) * -1); padding-inline: var(--cs-gutter); }
  .td-category-rail button { min-height: 48px; padding-inline: 16px; }
  .td-collections,
  .td-popular,
  .td-recent,
  .td-complete-library { padding-top: 48px; }
  .td-section-head,
  .td-library-head { align-items: flex-start; flex-direction: column; gap: 12px; }
  .td-section-head > p { text-align: left; }
  .td-collection-grid,
  .td-tool-grid { grid-template-columns: minmax(0, 1fr); }
  .td-popular-track {
    display: flex;
    margin-inline: calc(var(--cs-gutter) * -1);
    padding-inline: var(--cs-gutter);
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }
  .td-popular-card { min-width: 208px; scroll-snap-align: start; }
  .td-recent-list { grid-template-columns: minmax(0, 1fr); }
  .td-card-preview { min-height: 112px; }
}

/* SHELL:BEGIN — generated by scripts/build-shell.mjs. Do not edit below. */

/* ---- _fonts.css ---- */
/* ============================================================
   STELAAH — TYPEFACES (self hosted)

   Two families, served from our own origin:
   · Onest      variable 300..800, the one humanist sans
   · Space Mono 400/700, tiny uppercase eyebrows only

   Self hosted rather than pulled from Google Fonts because:
   · it removes a render blocking third party request from
     every one of the ~1500 pages
   · nothing leaks to a third party on page load
   · the whole site's typography is 96 kB and cache stable

   THE ALIAS BLOCK AT THE BOTTOM IS LEAD, NOT DECORATION.
   Five legacy stylesheets (intent-pages, search-engine,
   agency-toolkit, planner-library, adhd-content) hardcode
   `Newsreader` and `Inter` across dozens of selectors with no
   token to redirect. Rather than chase every selector and risk
   missing one, those family NAMES are re declared here to point
   at the Onest files. Any rule anywhere that still asks for
   Newsreader or Inter therefore renders Onest, and no serif can
   reach production through a selector we failed to find.

   The explicit weight and tracking corrections still live in
   _shell-legacy.css. This block is the safety net; that file is
   the craft. Do not treat this as a substitute for fixing a
   rule properly when you touch one.
   ============================================================ */

/* ---- Onest, variable 300..800 ---- */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/fonts/onest-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/fonts/onest-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Space Mono ---- */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/space-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/space-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/space-mono-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/space-mono-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------
   LEGACY FAMILY ALIASES — see the note at the top of this file.
   `Newsreader` and `Inter` resolve to the Onest files so no
   stylesheet we have not swept can put a serif on the page.
   ------------------------------------------------------------ */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/fonts/onest-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/fonts/onest-latin.woff2') format('woff2');
}

/* ---- _shell.css ---- */
/* ============================================================
   STELAAH — SITE SHELL
   Single source of truth for the marketing site chrome:
   type system, spacing rhythm, navbar and footer.

   DO NOT LINK THIS FILE DIRECTLY and do not edit the copies.
   `node site/scripts/build-shell.mjs` inlines it into every entry
   stylesheet between SHELL:BEGIN / SHELL:END markers, so no page
   <head> ever has to change and no extra request is added.

   Design language: Editorial Calm.
   · One humanist sans (Onest) for everything.
   · Space Mono for tiny uppercase eyebrows only.
   · Cool near-white paper, graphite ink, hairline rules.
   · Borderless first. Whitespace and hairlines, never boxes.
   · One signature easing: cubic-bezier(.32,.72,0,1).
   ============================================================ */

/* ------------------------------------------------------------
   TOKENS
   Every token reads through to the product design system
   (stelaah.css) when that is loaded, so marketing pages inherit
   light/dark theming for free. The literal after the comma is
   the fallback used by pages that only load a lean SEO
   stylesheet and therefore have no product tokens at all.
   ------------------------------------------------------------ */
:root {
  --sh-sans: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --sh-mono: var(--font-mono, 'Space Mono', ui-monospace, SFMono-Regular, monospace);

  --sh-paper:      var(--bg, #fdfdfd);
  --sh-surface:    var(--surface, #ffffff);
  --sh-sunken:     var(--bg-sunken, #f7f7f8);
  --sh-ink:        var(--ink, #202124);
  --sh-ink-2:      var(--ink-2, #5f6368);
  --sh-ink-3:      var(--ink-3, #7b8087);
  --sh-ink-4:      var(--ink-4, #9aa0a6);
  --sh-line:       var(--border, rgba(32, 33, 36, .11));
  --sh-line-soft:  var(--border-subtle, rgba(32, 33, 36, .06));
  --sh-line-firm:  var(--border-strong, rgba(32, 33, 36, .18));
  --sh-hover:      var(--bg-hover, rgba(32, 33, 36, .045));
  --sh-accent:     var(--accent, #3d3d3d);
  --sh-leaf:       #739837;

  /* rhythm — matched to mkt.css so both halves of the site align */
  --sh-maxw: 1180px;
  --sh-maxw-wide: 1320px;
  --sh-maxw-prose: 720px;
  --sh-gutter: clamp(20px, 5vw, 40px);
  --sh-section: clamp(76px, 9vw, 132px);
  --sh-section-tight: clamp(48px, 6vw, 84px);

  --sh-r-sm: 9px;
  --sh-r-md: 12px;
  --sh-r-lg: 16px;
  --sh-r-pill: 999px;

  --sh-ease: var(--ease, cubic-bezier(.32, .72, 0, 1));
  --sh-t-fast: var(--t-fast, .16s);
  --sh-t-med: var(--t-med, .26s);

  --sh-nav-h: 68px;

  /* The marketing site runs on Onest, deterministically.
     stelaah.css declares --font-app: 'Aptos', 'Onest', ... because the
     product UI prefers Aptos where it is installed. That is fine inside the
     app, but on the marketing site it means a visitor with Microsoft Office
     installed sees Aptos on the home page and Onest on every SEO page, while
     a visitor without it sees Onest everywhere. Same site, two typefaces,
     depending on the reader's machine.

     These four lines only ever land on marketing pages, because this file is
     inlined into marketing stylesheets and never into the app bundle. */
  --font-app: var(--sh-sans);
  --font-serif: var(--sh-sans);
  --font-title: var(--sh-sans);
  --font-ui: var(--sh-sans);
}

/* ------------------------------------------------------------
   ONE TYPEFACE, ENFORCED

   Six pages declare a serif inside an inline <style> in their own
   <head>: guides/index.html (--g-serif: 'Newsreader'),
   ai/product-reference.html ("Source Serif 4"), made-with-stelaah.html
   (Georgia), blog/index.html, blog/editorial-principles.html and
   index.html. An inline <style> beats a linked stylesheet on source
   order, and the <head> is off limits on this work, so importance is
   the only lever that reaches those rules.

   Note the alias @font-face in _fonts.css is NOT sufficient on its own
   here. Google's real Newsreader is still linked from those heads, and
   where both a real face and our alias are registered for one family
   the browser picks the real one, so the serif came back. These rules
   are what actually settle it.

   Scope is deliberately narrow: family only, never size, weight, or
   letter-spacing. Every page keeps its own typographic scale and only
   the face changes.
   ------------------------------------------------------------ */
:root {
  --g-serif: var(--sh-sans) !important;
  --font-serif: var(--sh-sans) !important;
  /* guides/index.html also carries its own palette in that inline <style>:
     a green black ink and an olive eyebrow, where every other page is
     neutral graphite. Same importance trick, same reason. */
  --g-forest: var(--sh-ink) !important;
  --g-muted:  var(--sh-ink-2) !important;
  --g-rule:   var(--sh-line) !important;
  --g-moss:   var(--sh-ink-4) !important;
}
h1, h2, h3, h4, h5, h6,
.mk-display, .sh-display, .hc-h1 { font-family: var(--sh-sans) !important; }

/* ------------------------------------------------------------
   TYPE SCALE
   Apple-grade tracking: tight at display sizes, opening up as
   the type gets smaller. Weight and size carry the hierarchy,
   never a second typeface.
   ------------------------------------------------------------ */
.sh-display,
.sh-h1,
.sh-h2,
.sh-h3 {
  font-family: var(--sh-sans);
  color: var(--sh-ink);
  text-wrap: balance;
  margin: 0;
}
.sh-display { font-size: clamp(44px, 6.2vw, 76px); line-height: 1.03; letter-spacing: -.038em; font-weight: 600; }
.sh-h1      { font-size: clamp(36px, 4.6vw, 58px); line-height: 1.07; letter-spacing: -.032em; font-weight: 600; }
.sh-h2      { font-size: clamp(27px, 3.2vw, 40px); line-height: 1.13; letter-spacing: -.026em; font-weight: 600; }
.sh-h3      { font-size: 21px; line-height: 1.28; letter-spacing: -.016em; font-weight: 600; }

.sh-dek {
  font-size: clamp(17px, 1.5vw, 19.5px);
  line-height: 1.55;
  letter-spacing: -.008em;
  color: var(--sh-ink-2);
  max-width: 62ch;
  text-wrap: pretty;
  margin: 0;
}

.sh-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--sh-mono);
  font-size: 11px; font-weight: 400;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--sh-ink-4);
}

/* ------------------------------------------------------------
   LAYOUT
   ------------------------------------------------------------ */
.sh-container { width: 100%; max-width: var(--sh-maxw); margin-inline: auto; padding-inline: var(--sh-gutter); }
.sh-container.wide { max-width: var(--sh-maxw-wide); }
.sh-container.prose { max-width: var(--sh-maxw-prose); }
.sh-section { padding-block: var(--sh-section); }
.sh-section.tight { padding-block: var(--sh-section-tight); }

/* ============================================================
   NAVBAR
   The one navbar. These rules are deliberately self-sufficient
   so a lean SEO page gets the identical bar without pulling in
   the whole marketing stylesheet. mkt.css declares the same
   selectors with the same values; whichever lands last wins and
   the result is identical either way.
   ============================================================ */
.mk-nav { position: sticky; top: 0; z-index: 80; }

/* The frosted bar is painted by a ::before layer rather than by the bar
   itself, and this is load bearing.

   backdrop-filter creates a compositing context on the element that carries
   it. The mega panel is a descendant of the bar and deliberately overflows
   it, so when the filter sat on .mk-nav-bar the panel got composited against
   the filtered backdrop and rendered semi transparent: page headlines showed
   straight through an opaque white dropdown. mkt.css:137 has carried that
   bug on the brand pages since the nav was written.

   Moving the filter to an inset ::before keeps the frosted effect, and the
   panel is no longer inside a filtered box. Do not move it back. */
.mk-nav-bar {
  position: relative;
  min-height: var(--sh-nav-h);
  display: flex; align-items: center;
  border-bottom: 1px solid transparent;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: border-color var(--sh-t-med) var(--sh-ease);
}
.mk-nav-bar::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: color-mix(in srgb, var(--sh-paper) 82%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  transition: background var(--sh-t-med) var(--sh-ease);
}
.mk-nav.scrolled .mk-nav-bar { border-bottom-color: var(--sh-line); }
.mk-nav.scrolled .mk-nav-bar::before { background: color-mix(in srgb, var(--sh-paper) 92%, transparent); }
.mk-nav-inner {
  width: 100%; max-width: var(--sh-maxw-wide); margin-inline: auto;
  padding-inline: var(--sh-gutter);
  display: flex; align-items: center; gap: 14px;
}

.mk-logo { display: inline-flex; align-items: center; gap: 10px; user-select: none; flex-shrink: 0; text-decoration: none; }
.mk-logo .mark { width: 26px; height: 26px; color: var(--sh-leaf); flex: none; }
.mk-logo .word { font-family: var(--sh-sans); font-size: 21px; font-weight: 600; letter-spacing: -.03em; color: var(--sh-ink); text-transform: none; }

.mk-nav-links { display: flex; align-items: center; gap: 2px; margin-left: 10px; }
.mk-nav-link {
  display: inline-flex; align-items: center; gap: 5px;
  height: 36px; padding: 0 11px; border: 0; background: none; cursor: pointer;
  border-radius: var(--sh-r-sm);
  font-family: var(--sh-sans); font-size: 15px; font-weight: 500;
  letter-spacing: -.011em; color: var(--sh-ink-2); text-decoration: none;
  transition: color var(--sh-t-fast) var(--sh-ease), background var(--sh-t-fast) var(--sh-ease);
}
.mk-nav-link:hover,
.mk-nav-link[aria-expanded="true"] { color: var(--sh-ink); background: var(--sh-hover); }
.mk-nav-link .caret { width: 13px; height: 13px; opacity: .55; transition: transform var(--sh-t-med) var(--sh-ease); }
.mk-nav-link[aria-expanded="true"] .caret { transform: rotate(180deg); }
.mk-nav-spacer { flex: 1; }
.mk-nav-cta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.mk-nav-signin {
  font-family: var(--sh-sans); font-size: 14.5px; font-weight: 500;
  color: var(--sh-ink-2); padding: 0 8px; text-decoration: none;
  transition: color var(--sh-t-fast) var(--sh-ease);
}
.mk-nav-signin:hover { color: var(--sh-ink); }

/* primary pill CTA — the one filled control in the chrome */
.mk-nav-cta .mk-btn,
.sh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 38px; padding: 0 17px;
  border: 1px solid var(--sh-ink); border-radius: var(--sh-r-pill);
  background: var(--sh-ink); color: var(--sh-paper);
  font-family: var(--sh-sans); font-size: 14.5px; font-weight: 600; letter-spacing: -.011em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform var(--sh-t-fast) var(--sh-ease), opacity var(--sh-t-fast) var(--sh-ease);
}
.mk-nav-cta .mk-btn:hover,
.sh-btn:hover { opacity: .88; }
.mk-nav-cta .mk-btn:active,
.sh-btn:active { transform: scale(.98); }
.sh-btn.ghost {
  background: transparent; color: var(--sh-ink); border-color: var(--sh-line-firm);
}
.sh-btn.ghost:hover { opacity: 1; border-color: var(--sh-ink); }

/* ---- mega dropdown ----
   `.mk-mega` (Product, Solutions) anchors `position:absolute` against its own
   `.mk-nav-item`, flush under the trigger — correct, because those triggers
   sit near the LEFT edge of the bar with the whole viewport open to their
   right.

   `.mk-mega.right` (Resources) cannot use the same trick. `right:0` resolves
   against the nearest positioned ancestor, which is the narrow `.mk-nav-item`
   box around just the "Resources" word — not the navbar, and not the
   viewport. Resources sits mid-bar (Product/Solutions/Teams to its left,
   Pricing/Sign in/Start free to its right), so anchoring an 880px panel to
   that narrow trigger's right edge pushed the panel's LEFT edge into negative
   X and it rendered off-screen (caught live on stelaah.com: the Learn and Use
   columns were unreachable, cut off past the left edge of the browser).
   `position:fixed` with `right: var(--sh-gutter)` sidesteps ancestor lookup
   entirely and clamps to the true viewport edge, regardless of where the
   trigger happens to sit. `top` must be restated in absolute units for the
   same reason: the inherited `calc(100% + 8px)` is a percentage of the
   *viewport height* under `fixed`, not of the nav bar.

   The max-width guard applies to every mega, left or right anchored, as a
   second line of defense against a future wide panel or a narrow desktop
   window overflowing the opposite edge. */
.mk-nav-item { position: relative; }
.mk-mega {
  position: absolute; top: calc(100% + 8px); left: 0;
  max-width: calc(100vw - 2 * var(--sh-gutter));
  background: var(--sh-surface);
  border: 1px solid var(--sh-line);
  border-radius: var(--sh-r-lg);
  box-shadow: 0 24px 60px -22px rgba(32, 33, 36, .3), 0 2px 6px -2px rgba(32, 33, 36, .08);
  padding: 12px;
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.985);
  transform-origin: top left;
  transition: opacity var(--sh-t-med) var(--sh-ease), transform var(--sh-t-med) var(--sh-ease), visibility var(--sh-t-med);
}
.mk-mega.right {
  position: fixed; top: calc(var(--sh-nav-h) + 8px); left: auto; right: var(--sh-gutter);
  transform-origin: top right;
}
.mk-nav-item[data-open="true"] .mk-mega { opacity: 1; visibility: visible; transform: none; }

.mk-mega-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.mk-mega-grid.cols-1 { grid-template-columns: 1fr; }
.mk-mega-link {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 11px 12px; border-radius: 11px; text-decoration: none;
  transition: background var(--sh-t-fast) var(--sh-ease);
}
.mk-mega-link:hover { background: var(--sh-hover); }
.mk-mega-ic { width: 19px; height: 19px; color: var(--sh-ink-3); margin-top: 2px; flex-shrink: 0; transition: color var(--sh-t-fast) var(--sh-ease); }
.mk-mega-link:hover .mk-mega-ic { color: var(--sh-accent); }
.mk-mega-tx b { display: block; font-size: 14px; font-weight: 600; color: var(--sh-ink); letter-spacing: -.012em; }
.mk-mega-tx span { display: block; font-size: 12.5px; color: var(--sh-ink-3); margin-top: 2px; line-height: 1.4; }
.mk-mega-col-label {
  font-family: var(--sh-mono); font-size: 10.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--sh-ink-4); padding: 8px 12px 6px;
}
.mk-mega-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 10px; padding: 12px 12px 4px; border-top: 1px solid var(--sh-line-soft);
}
.mk-mega-foot .lbl { font-family: var(--sh-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--sh-ink-4); }

/* ---- mega: live preview panel ---- */
.mk-mega-wrap { display: grid; grid-template-columns: 1fr 264px; gap: 4px; align-items: stretch; }
.mk-mega-panel {
  border-left: 1px solid var(--sh-line-soft); margin-left: 10px;
  padding: 8px 4px 8px 16px;
  display: flex; flex-direction: column; gap: 11px; min-width: 0;
}
.mk-mega-prev {
  position: relative; width: 100%; aspect-ratio: 3 / 2;
  border-radius: 11px; overflow: hidden;
  background: var(--sh-sunken); border: 1px solid var(--sh-line-soft);
}
.mk-mega-prev .pv { position: absolute; inset: 0; opacity: 0; transition: opacity .22s var(--sh-ease); pointer-events: none; }
.mk-mega-prev .pv.on { opacity: 1; }
.mk-mega-prev .pv img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-mega-panel .cap b { display: block; font-size: 13.5px; font-weight: 600; color: var(--sh-ink); letter-spacing: -.012em; }
.mk-mega-panel .cap span { display: block; font-size: 12.5px; line-height: 1.45; color: var(--sh-ink-3); margin-top: 3px; }
.mk-mega-more {
  margin-top: auto; font-size: 13px; font-weight: 600; letter-spacing: -.01em;
  color: var(--sh-ink); text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
  transition: gap var(--sh-t-fast) var(--sh-ease);
}
.mk-mega-more:hover { gap: 9px; }

/* ---- mega: thumbnail rows (Solutions) ---- */
.mk-mega-link.thumb { align-items: center; gap: 11px; padding: 8px 10px; }
.mk-mega-link.thumb .mth {
  width: 54px; flex: none; aspect-ratio: 3 / 2; border-radius: 7px; overflow: hidden;
  background: var(--sh-sunken); border: 1px solid var(--sh-line-soft);
}
.mk-mega-link.thumb .mth img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- mobile ---- */
.mk-nav-toggle {
  display: none; width: 38px; height: 38px; flex: none;
  align-items: center; justify-content: center;
  border: 0; background: none; cursor: pointer; border-radius: var(--sh-r-sm);
  color: var(--sh-ink);
}
.mk-nav-toggle:hover { background: var(--sh-hover); }
.mk-nav-toggle svg { width: 20px; height: 20px; }

.mk-nav-sheet {
  position: fixed; inset: var(--sh-nav-h) 0 0; z-index: 79;
  background: var(--sh-paper);
  padding: 18px var(--sh-gutter) 40px;
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity var(--sh-t-med) var(--sh-ease), transform var(--sh-t-med) var(--sh-ease), visibility var(--sh-t-med);
}
.mk-nav[data-sheet="true"] .mk-nav-sheet { opacity: 1; visibility: visible; transform: none; }
.mk-nav-sheet-group { border-top: 1px solid var(--sh-line-soft); padding: 14px 0 6px; }
.mk-nav-sheet-group:first-child { border-top: 0; }
.mk-nav-sheet-group > .lbl {
  display: block; font-family: var(--sh-mono); font-size: 10.5px;
  letter-spacing: .13em; text-transform: uppercase; color: var(--sh-ink-4); margin-bottom: 6px;
}
.mk-nav-sheet a {
  display: block; padding: 10px 0; font-size: 16px; font-weight: 500;
  letter-spacing: -.014em; color: var(--sh-ink); text-decoration: none;
}
.mk-nav-sheet a:hover { color: var(--sh-accent); }
.mk-nav-sheet .mk-nav-sheet-cta { display: grid; gap: 10px; margin-top: 22px; }
.mk-nav-sheet .mk-nav-sheet-cta .sh-btn { height: 46px; font-size: 15.5px; }

@media (max-width: 1080px) {
  .mk-mega-wrap { grid-template-columns: 1fr; }
  .mk-mega-panel { display: none; }
  /* shell.js sets a per-menu inline min-width (Product 940px, Solutions
     900px) sized for its widest column layout. min-width beats max-width
     whenever min > max, which is exactly the case here on a narrow desktop
     window, so .mk-mega's viewport clamp above was silently overridden by
     the JS min-width and the panel could still run past the right edge —
     the same overflow bug as the Resources menu, just on the left-anchored
     ones instead. Neutralizing min-width at the same breakpoint where the
     grid already drops to one column lets the clamp win from here down.

     That alone is not sufficient: shell.js also sets an inline
     grid-template-columns on .mk-mega-grid itself (e.g. "repeat(3,...)" for
     Product), which the .mk-mega-wrap rule above does not reach — collapsing
     the wrap stacks the content grid above the (now hidden) preview panel,
     but the content grid still tried to hold 3 columns inside a box that
     .mk-mega's clamp had just narrowed, squeezing every label into an
     illegible 3-line wrap. Forcing the inner grid to one column too is what
     actually produces the "long list" mobile-style layout the collapsed
     wrap was meant to trigger. A tall single column can now exceed the
     viewport height on a short window, so it also scrolls internally rather
     than running past the bottom edge. */
  .mk-mega { min-width: 0 !important; max-height: calc(100vh - var(--sh-nav-h) - 24px); overflow-y: auto; }
  .mk-mega-grid { grid-template-columns: 1fr !important; }
  /* Solutions goes a level deeper still: its persona links sit inside a
     child div carrying its own inline 2-column split (item.split in
     shell.js), a different element than .mk-mega-grid, so the rule above
     does not reach it. Collapsing every direct child of .mk-mega-grid is
     safe generally: Product/Resources' columns are plain stacked divs with
     no grid-template-columns of their own, so this is a no-op there and
     only actually changes anything where a nested split exists. */
  .mk-mega-grid > div { grid-template-columns: 1fr !important; }
}
@media (max-width: 940px) {
  .mk-nav-links, .mk-nav-signin { display: none; }
  .mk-nav-toggle { display: inline-flex; }
  .mk-nav-spacer { flex: 1; }
}
@media (min-width: 941px) {
  .mk-nav-sheet { display: none; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.mk-footer {
  border-top: 1px solid var(--sh-line);
  background: var(--bg-sidebar, var(--sh-sunken));
  padding-block: clamp(56px, 7vw, 88px) 36px;
  overflow: hidden;
}
/* brand column + the five link columns (Product, Solutions, Learn, Use,
   Company). repeat(4) here silently wrapped Company onto its own row. */
.mk-footer-grid { display: grid; grid-template-columns: 1.35fr repeat(5, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); }
.mk-footer-brand .mk-logo { margin-bottom: 16px; }
.mk-footer-brand p { font-size: 14px; color: var(--sh-ink-3); line-height: 1.6; max-width: 30ch; margin: 0 0 18px; }
.mk-footer-col h4 {
  font-family: var(--sh-mono); font-size: 11px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--sh-ink-4); margin: 0 0 14px; font-weight: 400;
}
.mk-footer-col a {
  display: block; font-size: 14px; color: var(--sh-ink-2); padding: 6px 0;
  text-decoration: none; transition: color var(--sh-t-fast) var(--sh-ease);
}
.mk-footer-col a:hover { color: var(--sh-accent); }
.mk-footer-family { display: grid; gap: 6px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--sh-line); }
.mk-footer-family-label { color: var(--sh-ink-4); font-size: 10px; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; }
.mk-footer-family a { width: fit-content; color: var(--sh-ink-3); font-size: 12.5px; line-height: 1.45; text-decoration: none; transition: color var(--sh-t-fast) var(--sh-ease); }
.mk-footer-family a:hover { color: var(--sh-ink); }
.mk-footer-bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  margin-top: clamp(40px, 5vw, 64px); padding-top: 26px; border-top: 1px solid var(--sh-line);
}
.mk-footer-bottom .legal { display: flex; flex-wrap: wrap; gap: 18px; }
.mk-footer-bottom .legal a { font-size: 13px; color: var(--sh-ink-3); text-decoration: none; }
.mk-footer-bottom .legal a:hover { color: var(--sh-ink); }
/* the consent control is a <button> so it can open the panel, but it sits in a
   row of links and must read as one of them, not as a control */
.mk-footer-bottom .legal .sc-privacy-link {
  border: 0; background: none; padding: 0; cursor: pointer;
  font-family: var(--sh-sans); font-size: 13px; font-weight: 400;
  color: var(--sh-ink-3); letter-spacing: inherit;
}
.mk-footer-bottom .legal .sc-privacy-link:hover { color: var(--sh-ink); }
.mk-footer-bottom .copy { font-size: 13px; color: var(--sh-ink-4); }
@media (max-width: 900px) { .mk-footer-grid { grid-template-columns: 1fr 1fr 1fr; } .mk-footer-brand { grid-column: 1 / -1; } }
@media (max-width: 560px) { .mk-footer-grid { grid-template-columns: 1fr 1fr; } }

/* ------------------------------------------------------------
   FOCUS — one clean indicator, never stacked rings
   ------------------------------------------------------------ */
.mk-nav :where(a, button):focus-visible,
.mk-footer :where(a, button):focus-visible,
.sh-btn:focus-visible {
  outline: 2px solid var(--sh-accent);
  outline-offset: 3px;
  border-radius: var(--sh-r-sm);
}

@media (prefers-reduced-motion: reduce) {
  .mk-mega, .mk-nav-bar, .mk-nav-sheet, .sh-btn, .mk-nav-link .caret { transition: none; }
}

/* ---- _content-system.css ---- */
/* ============================================================
   STELAAH CONTENT SYSTEM
   Shared, product-led presentation for public articles, guides,
   resources, comparisons, templates and tools.

   Scope is explicit through data-content-family on <body>. Core
   marketing, feature, solution, Aria, pricing and legal pages do
   not receive this marker and therefore cannot inherit this layer.
   ============================================================ */

body[data-content-family] {
  --cs-wide: 1180px;
  --cs-prose: 760px;
  --cs-rail: 216px;
  --cs-gutter: clamp(20px, 4vw, 40px);
  --cs-hero-y: clamp(52px, 7vw, 80px);
  --cs-section-y: clamp(56px, 7vw, 88px);
  --cs-section-tight: clamp(40px, 5vw, 64px);
  --cs-gap: 24px;
  --cs-gap-wide: 48px;
  --cs-title: clamp(36px, 4.6vw, 56px);
  --cs-section-title: clamp(28px, 3.2vw, 40px);
  --cs-card-title: clamp(20px, 2vw, 26px);
  --cs-control: 48px;
  --cs-control-radius: 8px;
  --cs-card-radius: 14px;
  --cs-panel-radius: 20px;
  --cs-paper: var(--sh-paper);
  --cs-surface: var(--sh-surface);
  --cs-sunken: var(--sh-sunken);
  --cs-ink: var(--sh-ink);
  --cs-muted: var(--sh-ink-2);
  --cs-faint: var(--sh-ink-3);
  --cs-line: var(--sh-line);
  --cs-line-soft: var(--sh-line-soft);
  --cs-accent: var(--sh-accent);
  overflow-x: clip;
  background: var(--cs-paper);
  color: var(--cs-ink);
  font-family: var(--sh-sans);
}

body[data-content-family] main {
  min-width: 0;
}

body[data-content-family] main :where(img, video, iframe, pre, table) {
  max-width: 100%;
}

body[data-content-family] main :where(p, li, dd, td, th, a) {
  overflow-wrap: anywhere;
}

/* One frame for every content family. */
body[data-content-family] :where(
  .ip-shell,
  .se-shell,
  .at-shell,
  .pl-shell,
  .ct-shell,
  .fw-shell,
  .fw-post-shell,
  .g-shell,
  .ref-shell
) {
  width: 100%;
  max-width: var(--cs-wide);
  margin-inline: auto;
  padding-inline: var(--cs-gutter);
}

body[data-content-family] .ai-reference .ref-main {
  width: 100%;
  max-width: var(--cs-wide);
  margin-inline: auto;
  padding: var(--cs-section-tight) var(--cs-gutter) var(--cs-section-y);
}

/* Breadcrumbs remain semantic links, with one quiet visual treatment. */
body[data-content-family] :where(
  .ip-crumb,
  .se-crumb,
  .at-crumb,
  .pl-crumb,
  .ct-crumb,
  .rs-crumb,
  .fp-crumb,
  .ac-crumb,
  .fw-post-back
) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--cs-faint);
  font: 500 13px/1.45 var(--sh-sans);
  letter-spacing: 0;
  text-transform: none;
}

body[data-content-family] :where(
  .ip-crumb,
  .se-crumb,
  .at-crumb,
  .pl-crumb,
  .ct-crumb,
  .rs-crumb,
  .fp-crumb,
  .ac-crumb
) a {
  color: var(--cs-muted);
  text-decoration: none;
}

body[data-content-family] :where(
  .ip-crumb,
  .se-crumb,
  .at-crumb,
  .pl-crumb,
  .ct-crumb,
  .rs-crumb,
  .fp-crumb,
  .ac-crumb
) a:hover {
  color: var(--cs-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Content headers are deliberately shorter than conversion heroes. */
body[data-content-family] :where(
  .ip-hero,
  .ip-article-hero,
  .se-hero,
  .se-article-hero,
  .se-template-hero,
  .at-hero,
  .at-library-hero,
  .pl-hero,
  .pl-library-hero,
  .pl-premium-hero,
  .ct-library-hero,
  .ct-tool-hero,
  .fw-hero,
  .g-hero,
  .rs-hero,
  .rs-detail-hero
) {
  min-height: 0;
  padding-block: var(--cs-hero-y);
}

body[data-content-family] :where(
  .ip-hero,
  .ip-article-hero,
  .se-hero,
  .se-article-hero,
  .se-template-hero,
  .at-hero,
  .at-library-hero,
  .pl-hero,
  .pl-library-hero,
  .pl-premium-hero,
  .ct-library-hero,
  .ct-tool-hero,
  .fw-hero,
  .g-hero,
  .rs-hero,
  .rs-detail-hero
) h1,
body[data-content-family="article"] main > .mk-section:first-of-type .mk-h1 {
  max-width: 920px;
  margin: 16px 0 20px;
  color: var(--cs-ink);
  font-family: var(--sh-sans) !important;
  font-size: var(--cs-title) !important;
  font-weight: 600;
  letter-spacing: -.034em;
  line-height: 1.06;
  text-wrap: balance;
}

body[data-content-family] :where(
  .ip-dek,
  .se-dek,
  .ref-lede,
  .pl-hero-copy,
  .ct-library-hero > div > p,
  .fw-hero-intro,
  .g-intro,
  .rs-hero-copy > p,
  .rs-detail-hero .mk-container > p
) {
  max-width: 720px;
  margin: 0;
  color: var(--cs-muted);
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.58;
  text-wrap: pretty;
}

body[data-content-family] :where(
  .ip-section,
  .se-section,
  .at-tool-section,
  .at-use,
  .at-related,
  .pl-section,
  .pl-library-section,
  .ct-section,
  .fw-library
) {
  padding-block: var(--cs-section-y);
}

body[data-content-family] :where(
  .ip-section,
  .se-section,
  .at-tool-section,
  .at-related,
  .pl-section,
  .ct-section
) h2,
body[data-content-family] :where(.fw-library-head, .g-group, .rs-library-head) h2 {
  font-family: var(--sh-sans) !important;
  font-size: var(--cs-section-title);
  font-weight: 600;
  letter-spacing: -.026em;
  line-height: 1.14;
}

/* Long-form reading shells. */
body[data-content-family] :where(.ip-article-grid, .se-article-grid, .fw-post-layout) {
  display: grid;
  grid-template-columns: var(--cs-rail) minmax(0, var(--cs-prose));
  justify-content: center;
  gap: var(--cs-gap-wide);
  align-items: start;
  padding-block: var(--cs-section-y);
}

body[data-content-family="article"] .art-layout {
  display: grid;
  grid-template-columns: var(--cs-rail) minmax(0, var(--cs-prose));
  justify-content: center;
  gap: var(--cs-gap-wide);
  align-items: start;
}

body[data-content-family] :where(.ip-toc, .se-toc, .fw-toc, .art-toc) {
  position: sticky;
  top: 96px;
  align-self: start;
  max-height: calc(100vh - 120px);
  overflow: auto;
  padding: 16px 0;
  border-top: 1px solid var(--cs-line);
  border-bottom: 1px solid var(--cs-line-soft);
}

body[data-content-family] :where(.ip-toc, .se-toc, .fw-toc, .art-toc) a {
  display: block;
  padding: 8px 0;
  color: var(--cs-faint);
  font-size: 13px;
  line-height: 1.4;
  text-decoration: none;
}

body[data-content-family] :where(.ip-toc, .se-toc, .fw-toc, .art-toc) a:hover,
body[data-content-family] :where(.ip-toc, .se-toc, .fw-toc, .art-toc) a[aria-current="true"] {
  color: var(--cs-ink);
}

body[data-content-family] :where(.ip-prose, .se-prose, .fw-post-body, .mk-prose) {
  min-width: 0;
  max-width: var(--cs-prose);
  color: var(--cs-muted);
  font-size: 17px;
  line-height: 1.72;
}

body[data-content-family] :where(.ip-prose, .se-prose, .fw-post-body, .mk-prose) h2 {
  margin: 48px 0 16px;
  color: var(--cs-ink);
  font-family: var(--sh-sans) !important;
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 600;
  letter-spacing: -.024em;
  line-height: 1.16;
}

body[data-content-family] :where(.ip-prose, .se-prose, .fw-post-body, .mk-prose) h3 {
  margin: 32px 0 12px;
  color: var(--cs-ink);
  font-family: var(--sh-sans) !important;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.28;
}

body[data-content-family] :where(.ip-prose, .se-prose, .fw-post-body, .mk-prose) :where(p, ul, ol, blockquote, pre, table) {
  margin-block: 0 24px;
}

body[data-content-family] :where(.ip-prose, .se-prose, .fw-post-body, .mk-prose) :where(a) {
  color: var(--cs-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

body[data-content-family] :where(.ip-prose, .se-prose, .fw-post-body, .mk-prose, .ref-main) :where(pre, code) {
  font-family: var(--sh-mono);
}

body[data-content-family] :where(.ip-prose, .se-prose, .fw-post-body, .mk-prose, .ref-main) pre {
  overflow-x: auto;
  padding: 20px;
  border: 1px solid var(--cs-line);
  border-radius: var(--cs-card-radius);
  background: var(--cs-sunken);
  font-size: 14px;
  line-height: 1.55;
}

body[data-content-family] :where(.ip-prose, .se-prose, .fw-post-body, .mk-prose, .ref-main) table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 14px;
}

body[data-content-family] :where(.ip-prose, .se-prose, .fw-post-body, .mk-prose, .ref-main) :where(th, td) {
  min-width: 152px;
  padding: 16px;
  border-bottom: 1px solid var(--cs-line);
  text-align: left;
  vertical-align: top;
}

body[data-content-family] :where(.ip-prose, .se-prose, .fw-post-body, .mk-prose, .ref-main) th {
  color: var(--cs-ink);
  background: var(--cs-sunken);
  font-weight: 600;
}

/* Indexes use a small related card family, not disconnected dashboard tiles. */
body[data-content-family] :where(
  .ip-card-grid,
  .se-card-grid,
  .se-template-grid,
  .ct-hub-grid,
  .at-related-grid,
  .pl-library-grid,
  .rs-grid,
  .fw-signal-list
) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--cs-gap);
  border: 0;
}

body[data-content-family] :where(
  .ip-index-card,
  .se-template-card,
  .ct-hub-card,
  .at-related-grid > a,
  .pl-card,
  .rs-card,
  .fw-signal
) {
  min-height: 0;
  padding: 24px 0;
  border: 0;
  border-top: 1px solid var(--cs-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

body[data-content-family] :where(
  .ip-index-card,
  .se-template-card,
  .ct-hub-card,
  .at-related-grid > a,
  .pl-card,
  .rs-card,
  .fw-signal
):hover {
  background: var(--cs-sunken);
  box-shadow: none;
  transform: none;
}

body[data-content-family] :where(
  .ip-index-card,
  .se-template-card,
  .ct-hub-card,
  .at-related-grid > a,
  .pl-card,
  .rs-card
) h2,
body[data-content-family] :where(.ip-index-card, .se-template-card, .ct-hub-card, .at-related-grid > a, .pl-card, .rs-card) h3 {
  margin: 12px 0;
  font-family: var(--sh-sans) !important;
  font-size: var(--cs-card-title);
  font-weight: 600;
  letter-spacing: -.018em;
  line-height: 1.22;
}

/* Tools remain the strongest surface on their pages. */
body[data-content-family^="tool"] :where(.ip-calc-grid, .se-tool-grid) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .82fr);
  gap: var(--cs-gap-wide);
  align-items: start;
}

body[data-content-family^="tool"] :where(.ip-calc, .se-tool-form, .se-tool-result, .ct-workspace, .at-workspace) {
  border-color: var(--cs-line);
  border-radius: var(--cs-panel-radius);
  background: var(--cs-surface);
  box-shadow: 0 16px 40px rgba(32, 33, 36, .06);
}

body[data-content-family^="tool"] :where(.ip-calc, .se-tool-form, .se-tool-result) {
  padding: 32px;
}

body[data-content-family] :where(
  .ip-calc,
  .se-tool-form,
  .se-template,
  .at-setup,
  .ct-workspace,
  .pl-workspace
) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea) {
  width: 100%;
  min-height: var(--cs-control);
  border: 1px solid var(--cs-line);
  border-radius: var(--cs-control-radius);
  background: var(--cs-surface);
  padding: 12px 16px;
  color: var(--cs-ink);
  box-shadow: none;
}

body[data-content-family] :where(
  .ip-calc,
  .se-tool-form,
  .se-template,
  .at-setup,
  .ct-workspace,
  .pl-workspace
) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea):focus {
  border-color: var(--cs-accent);
  outline: 0;
  box-shadow: none;
}

body[data-content-family] :where(.ip-button, .se-button, .at-button, .pl-button, .ct-button) {
  min-height: 44px;
  border-radius: var(--cs-control-radius);
  box-shadow: none;
  transform: none;
}

body[data-content-family] :where(.ip-button, .se-button, .at-button, .pl-button, .ct-button):hover {
  box-shadow: none;
  transform: translateY(-1px);
}

/* Comparisons stay wide enough to scan and become scrollable before crushing. */
body[data-content-family^="comparison"] :where(.ip-compare, .cmp-table-wrap, .alt-table-wrap) {
  width: 100%;
  max-width: var(--cs-wide);
  overflow-x: auto;
  margin-inline: auto;
}

body[data-content-family^="comparison"] :where(.ip-compare-row, .cmp-row, .alt-row) {
  min-width: 640px;
  gap: 32px;
  padding-block: 20px;
  border-bottom: 1px solid var(--cs-line);
}

/* One restrained related-content and CTA ending across every family. */
body[data-content-family] :where(.ip-related, .se-related, .at-related, .fw-next) {
  padding-block: var(--cs-section-tight);
  border-top: 1px solid var(--cs-line);
}

body[data-content-family] :where(.ip-cta, .se-cta, .ct-cta, .at-use, .pl-final-cta, .rs-related) {
  padding-block: var(--cs-section-y);
  background: var(--cs-ink);
  color: var(--cs-surface);
}

body[data-content-family] :where(.ip-cta, .se-cta, .ct-cta, .at-use, .pl-final-cta, .rs-related) h2 {
  max-width: 760px;
  margin-inline: auto;
  font-family: var(--sh-sans) !important;
  font-size: var(--cs-section-title);
  font-weight: 600;
  letter-spacing: -.026em;
  line-height: 1.14;
}

body[data-content-family] :where(.ip-cta, .se-cta, .ct-cta, .at-use, .pl-final-cta, .rs-related) p {
  max-width: 640px;
  color: rgba(255, 255, 255, .72);
}

body[data-content-family] :where(summary, button, a, input, textarea):focus-visible {
  outline: 2px solid var(--cs-accent);
  outline-offset: 3px;
}

body[data-content-family] :where(input, textarea):focus-visible {
  outline: 0;
}

@media (max-width: 1180px) {
  body[data-content-family] :where(
    .ip-card-grid,
    .se-card-grid,
    .se-template-grid,
    .ct-hub-grid,
    .at-related-grid,
    .pl-library-grid,
    .rs-grid,
    .fw-signal-list
  ) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  body[data-content-family] :where(.ip-hero-grid, .se-hero-grid, .at-hero-grid, .pl-hero-grid, .fw-hero-grid) {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  body[data-content-family] :where(.ip-article-grid, .se-article-grid, .fw-post-layout),
  body[data-content-family="article"] .art-layout {
    grid-template-columns: minmax(0, var(--cs-prose));
  }

  body[data-content-family] :where(.ip-toc, .se-toc, .fw-toc, .art-toc) {
    position: static;
    display: flex;
    gap: 20px;
    max-height: none;
    overflow-x: auto;
    padding: 12px 0;
    white-space: nowrap;
  }

  body[data-content-family] :where(.ip-toc, .se-toc, .fw-toc, .art-toc) :where(.lbl, strong, .fw-toc-label) {
    flex: none;
    margin: 0;
    padding: 8px 0;
  }

  body[data-content-family^="tool"] :where(.ip-calc-grid, .se-tool-grid) {
    grid-template-columns: 1fr;
  }

  body[data-content-family] :where(.at-workspace, .pl-workspace) {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  body[data-content-family] {
    --cs-gutter: 20px;
    --cs-gap: 20px;
    --cs-gap-wide: 32px;
    --cs-title: clamp(34px, 10vw, 44px);
    --cs-section-title: clamp(26px, 8vw, 34px);
  }

  body[data-content-family] :where(
    .ip-card-grid,
    .se-card-grid,
    .se-template-grid,
    .ct-hub-grid,
    .at-related-grid,
    .pl-library-grid,
    .rs-grid,
    .fw-signal-list
  ) {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-content-family] :where(.ip-actions, .se-actions, .at-hero-actions, .pl-hero-actions, .ct-actions, .rs-actions) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-content-family] :where(.ip-button, .se-button, .at-button, .pl-button, .ct-button, .rs-actions .mk-btn) {
    width: 100%;
  }

  body[data-content-family^="tool"][data-content-family] main :where(button, [role="button"]) {
    min-width: 44px;
    min-height: 44px;
  }

  body[data-content-family^="tool"] :where(.ip-calc, .se-tool-form, .se-tool-result) {
    padding: 24px 20px;
    border-radius: var(--cs-card-radius);
  }

  body[data-content-family^="comparison"] :where(.ip-compare-row, .cmp-row, .alt-row) {
    min-width: 560px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-content-family] *,
  body[data-content-family] *::before,
  body[data-content-family] *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ---- _shell-legacy.css ---- */
/* ============================================================
   STELAAH — SHELL / LEGACY BRIDGE

   Appended by scripts/build-shell.mjs to the five legacy
   stylesheets that predate the brand system:

     intent-pages.css    --ip-*   Inter + Newsreader, cream
     search-engine.css   --se-*   Inter + Newsreader, cream
     agency-toolkit.css  --at-*   Newsreader, #f7f6f2
     planner-library.css --pl-*   Newsreader, #f7f6f2
     adhd-content.css    --ac-*   Inter + Newsreader, #fbfaf6

   Each shipped its own paper colour, its own ink, its own sage
   accent and a serif display face. Together they cover roughly
   1100 pages, which is why the site read as several different
   products wearing one logo.

   This layer does two things:
     1. redirects every token onto the shell tokens, which
        re skins colour and rules in one block per system
     2. restates the display type in Onest terms

   On (2): tracking is deliberately NOT carried across. Newsreader
   is a high contrast serif that wants very tight tracking and
   reads fine at weight 400 in display sizes. Onest is a humanist
   sans with a taller x height and open counters, so the same
   -.055em would visibly collide and weight 400 would look thin.
   Every display rule below is re optically sized: weight up to
   600, tracking opened, leading opened a little.

   Only class scoped selectors live here so this file is safe to
   append to any of the five. The one system that styles bare
   h1/h2/h3 is search-engine.css, handled in _shell-legacy-se.css.
   ============================================================ */

/* ------------------------------------------------------------
   1. TOKEN REDIRECTION — all five namespaces
   ------------------------------------------------------------ */
:root {
  /* intent-pages.css */
  --ip-paper: var(--sh-paper);
  --ip-ink:   var(--sh-ink);
  --ip-muted: var(--sh-ink-2);
  --ip-sage:  var(--sh-ink-4);
  --ip-soft:  var(--sh-sunken);
  --ip-rule:  var(--sh-line);
  --ip-serif: var(--sh-sans);
  --ip-sans:  var(--sh-sans);
  --ip-mono:  var(--sh-mono);

  /* search-engine.css */
  --se-paper:      var(--sh-paper);
  --se-paper-soft: var(--sh-sunken);
  --se-ink:        var(--sh-ink);
  --se-muted:      var(--sh-ink-2);
  --se-line:       var(--sh-line);
  --se-accent:     var(--sh-accent);
  --se-white:      var(--sh-surface);

  /* agency-toolkit.css */
  --at-ink:     var(--sh-ink);
  --at-muted:   var(--sh-ink-2);
  --at-paper:   var(--sh-paper);
  --at-surface: var(--sh-surface);
  --at-soft:    var(--sh-sunken);
  --at-line:    var(--sh-line);
  --at-accent:  var(--sh-accent);

  /* planner-library.css */
  --pl-ink:    var(--sh-ink);
  --pl-muted:  var(--sh-ink-2);
  --pl-paper:  var(--sh-paper);
  --pl-line:   var(--sh-line);
  --pl-card:   var(--sh-surface);
  --pl-accent: var(--sh-accent);
  --pl-soft:   var(--sh-sunken);

  /* adhd-content.css */
  --ac-ink:   var(--sh-ink);
  --ac-muted: var(--sh-ink-2);
  --ac-line:  var(--sh-line);
  --ac-paper: var(--sh-paper);
  --ac-soft:  var(--sh-sunken);
  --ac-warm:  var(--sh-sunken);
  --ac-sage:  var(--sh-ink-4);
  --ac-serif: var(--sh-sans);
  --ac-sans:  var(--sh-sans);
  --ac-mono:  var(--sh-mono);
}

body { font-family: var(--sh-sans); }

/* ------------------------------------------------------------
   2. DISPLAY TYPE, RESTATED IN ONEST

   Buckets, so the whole site steps through the same scale:
     76..84px  600  -.038em  1.03
     56..68px  600  -.034em  1.06
     40..58px  600  -.030em  1.08
     30..38px  600  -.026em  1.12
     24..30px  600  -.020em  1.16
     20..24px  600  -.016em  1.24
   ------------------------------------------------------------ */

/* -- hero / display -- */
.ip-hero h1, .ip-article-hero h1,
.at-hero h1, .at-library-hero h1,
.pl-premium-intro h1,
.ac-hero h1 {
  font-family: var(--sh-sans);
  font-size: clamp(44px, 6.2vw, 76px); font-weight: 600;
  line-height: 1.03; letter-spacing: -.038em;
  text-wrap: balance;
}
.pl-hero h1, .pl-library-hero h1 {
  font-family: var(--sh-sans);
  font-size: clamp(44px, 6.2vw, 76px); font-weight: 600;
  line-height: 1.03; letter-spacing: -.038em;
  text-wrap: balance;
}

/* -- big section heads -- */
.ip-cta h2,
.ac-cta h2,
.ac-head h2,
.pl-inside-grid h2, .pl-import-grid h2, .pl-final-cta h2 {
  font-family: var(--sh-sans);
  font-size: clamp(38px, 5.2vw, 62px); font-weight: 600;
  line-height: 1.06; letter-spacing: -.034em;
  text-wrap: balance;
}
.ip-heading h2,
.at-section-head h2, .at-use h2, .at-related h2,
.pl-section h2, .pl-library-section h2 {
  font-family: var(--sh-sans);
  font-size: clamp(34px, 4.4vw, 54px); font-weight: 600;
  line-height: 1.08; letter-spacing: -.032em;
  text-wrap: balance;
}
.ip-related h2 {
  font-family: var(--sh-sans);
  font-size: clamp(30px, 3.6vw, 46px); font-weight: 600;
  line-height: 1.1; letter-spacing: -.03em;
}

/* -- mid heads -- */
.ip-prose h2,
.at-readiness-head > strong, .at-modal-card h2,
.pl-workspace-body h3, .pl-modal-card h2,
.pl-premium-cover > strong,
.ac-promise {
  font-family: var(--sh-sans);
  font-size: clamp(27px, 3.4vw, 36px); font-weight: 600;
  line-height: 1.12; letter-spacing: -.026em;
}
.ip-index-card h2,
.at-preview-body h2, .at-empty h3, .at-check-group h3, .at-card h2,
.at-rate-results strong, .at-setup-head > span,
.at-editor-head > div:first-child > span,
.pl-tablet-page h2, .pl-preview-page > h2, .pl-premium-copy h3,
.ac-pain h3, .ac-feature h3, .ac-library h3 {
  font-family: var(--sh-sans);
  font-size: 26px; font-weight: 600; line-height: 1.16; letter-spacing: -.021em;
}

/* -- small heads and row titles -- */
.ip-note strong, .ip-strip h2, .ip-row h3, .ip-callout strong,
.at-readiness-head h3, .at-related-grid strong,
.pl-workspace-nav > strong,
.ac-note strong, .ac-faq summary {
  font-family: var(--sh-sans);
  font-size: 21px; font-weight: 600; line-height: 1.26; letter-spacing: -.016em;
}
.ip-compare-row strong, .ip-prose h3,
.at-use li > span,
.ac-link span:first-child {
  font-family: var(--sh-sans);
  font-size: 19px; font-weight: 600; line-height: 1.3; letter-spacing: -.014em;
}
.ac-brand span, .ip-brand {
  font-family: var(--sh-sans);
  font-size: 21px; font-weight: 600; line-height: 1; letter-spacing: -.03em;
  text-transform: none;
}

/* -- ornamental numerals: quiet, never a second voice -- */
.at-empty span {
  font-family: var(--sh-sans);
  font-size: 52px; font-weight: 600; line-height: 1; letter-spacing: -.032em;
  font-variant-numeric: tabular-nums;
}
.at-idea-num, .at-card-num {
  font-family: var(--sh-sans);
  font-size: 22px; font-weight: 600; line-height: 1; letter-spacing: -.018em;
  font-variant-numeric: tabular-nums;
}
.ip-calc-result output {
  font-family: var(--sh-sans);
  font-size: clamp(44px, 5.6vw, 68px); font-weight: 600;
  line-height: 1.02; letter-spacing: -.036em;
  font-variant-numeric: tabular-nums;
}
.ip-faq summary:after { font-family: var(--sh-sans); font-weight: 400; }

/* Space Mono survives in exactly one role: the tiny uppercase eyebrow. */
.ip-kicker, .ip-label, .se-label, .se-index, .se-steps article > span,
.ac-kicker, .ac-label, .ac-pain .num { font-family: var(--sh-mono); }

/* ------------------------------------------------------------
   3. BODY COPY
   All five sheets set a measure tuned for Inter at 16/1.65.
   Onest sets a touch smaller at the same nominal size, so the
   reading sizes come up slightly and tracking opens a hair.
   ------------------------------------------------------------ */
.ip-dek, .se-dek, .ac-dek {
  font-size: clamp(17px, 1.5vw, 19.5px);
  line-height: 1.55; letter-spacing: -.008em;
  color: var(--sh-ink-2); text-wrap: pretty;
}
.ip-prose p, .ip-prose li { font-size: 17px; line-height: 1.72; letter-spacing: -.004em; color: var(--sh-ink-2); }
.ip-strip p, .ip-note p, .ip-row p,
.se-checks li, .se-steps p,
.ac-head p, .ac-pain p, .ac-feature p { color: var(--sh-ink-2); }

/* ------------------------------------------------------------
   4. LEGACY CHROME FALLBACK
   The migration swaps .ip-nav / .se-nav / .ac-nav for the
   canonical navbar. This block only governs a page that has not
   been migrated yet, so nothing ever looks off brand in between.
   ------------------------------------------------------------ */
.ip-nav, .se-nav, .ac-nav { border-bottom: 1px solid var(--sh-line); background: var(--sh-paper); }
.ip-links a, .se-nav nav a, .ac-nav-links a {
  font-family: var(--sh-sans); font-size: 15px; font-weight: 500;
  letter-spacing: -.011em; color: var(--sh-ink-2);
}
.ip-links a:hover, .se-nav nav a:hover, .ac-nav-links a:hover { color: var(--sh-ink); }
.se-brand { font-family: var(--sh-sans); font-size: 21px; font-weight: 600; letter-spacing: -.03em; text-transform: none; }
.ip-button, .se-button, .ac-button, .at-button, .pl-button {
  font-family: var(--sh-sans); font-weight: 600; letter-spacing: -.011em;
  border-radius: var(--sh-r-pill);
  background: var(--sh-ink); border-color: var(--sh-ink); color: var(--sh-paper) !important;
}
.ip-button.secondary, .se-button.secondary, .ac-button.secondary {
  background: transparent; color: var(--sh-ink) !important; border-color: var(--sh-line-firm);
}
/* the old sheets lifted buttons on hover, which reads as noise beside the
   product chrome. Match the shell: soften, do not jump. */
.se-button:hover, .se-button:focus-visible { transform: none; opacity: .88; }
.ip-footer, .se-footer, .ac-footer { border-top: 1px solid var(--sh-line); background: var(--bg-sidebar, var(--sh-sunken)); }

/* The old sheets leaned on tinted panels and heavy shadows. Editorial Calm is
   borderless first: hairlines and whitespace, never a filled review box. */
.ac-product { background: var(--sh-sunken); box-shadow: none; border-radius: var(--sh-r-lg); }
.ac-product:before { display: none; }
.ac-note { background: transparent; border-radius: var(--sh-r-lg); }

/* ---- _shell-legacy-se.css ---- */
/* ============================================================
   STELAAH — SHELL / LEGACY BRIDGE, search-engine.css only

   search-engine.css is the one legacy sheet that styles bare
   h1/h2/h3 rather than classes:

     h1 { font: 400 clamp(48px,7vw,80px)/.96 Newsreader ... }

   Those rules are restated here in Onest. They are kept out of
   _shell-legacy.css because a bare element selector appended to
   the other four sheets would reach past their own pages and
   fight whatever the page already sets.
   ============================================================ */

h1 {
  font-family: var(--sh-sans);
  font-size: clamp(42px, 5.8vw, 68px); font-weight: 600;
  line-height: 1.05; letter-spacing: -.036em;
  text-wrap: balance;
}
h2 {
  font-family: var(--sh-sans);
  font-size: clamp(30px, 3.8vw, 46px); font-weight: 600;
  line-height: 1.1; letter-spacing: -.03em;
  text-wrap: balance;
}
h3 {
  font-family: var(--sh-sans);
  font-size: 20px; font-weight: 600; line-height: 1.28; letter-spacing: -.015em;
}
.se-template-review-head h3 {
  font-size: clamp(27px, 3.4vw, 38px); line-height: 1.12; letter-spacing: -.026em;
}
.se-template-review-head > strong {
  font-family: var(--sh-sans);
  font-size: clamp(34px, 4.4vw, 50px); font-weight: 600;
  line-height: 1.06; letter-spacing: -.032em;
  font-variant-numeric: tabular-nums;
}
.se-template-card h2 {
  font-size: 24px; line-height: 1.14; letter-spacing: -.02em;
}
.se-template-status button,
.se-directory-filters button { font-family: var(--sh-sans); }
.se-proof-strip h3 { font-family: var(--sh-sans); font-weight: 600; letter-spacing: -.014em; }
/* SHELL:END */