/* Apple Liquid Glass design system: public site override */
:root {
  color-scheme:light;
  --bg:#f5f5f7; --surface:#fff; --hover:#fbfbfd; --text:#1d1d1f; --text-body:#424245; --text-2:#6e6e73; --text-3:#86868b; --text-4:#aeaeb2; --faint:#d2d2d7; --hairline:rgba(0,0,0,.07);
  --accent:#0071e3; --accent-link:#0066cc; --indigo:#5e5ce6; --live:#30d158; --grad-cta:linear-gradient(135deg,#0071e3 0%,#5e5ce6 100%);
  --font:-apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro Display','Helvetica Neue','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif; --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --r-pill:999px; --r-chip:6px; --r-thumb:12px; --r-card:18px; --r-panel:22px; --r-hero:26px;
  --sh-card:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.05); --sh-panel:0 1px 3px rgba(0,0,0,.05),0 14px 40px rgba(0,0,0,.05); --sh-lift:0 12px 32px rgba(0,0,0,.1); --sh-cta:0 20px 54px rgba(0,113,227,.24);
  --track:#e8e8ed; --max-read:720px; --max-grid:1080px; --pad-x:22px; --nav-height:58px; --ease-out-quart:cubic-bezier(.25,1,.5,1);
  --paper:var(--bg); --paper-raised:var(--surface); --paper-deep:var(--track); --ink:var(--text); --ink-soft:var(--text-2); --ink-faint:var(--text-3); --line:var(--hairline); --line-strong:var(--hairline); --accent-dark:var(--accent-link); --accent-soft:rgba(0,113,227,.08); --on-accent:#fff; --font-body:var(--font); --font-display:var(--font); --font-mono:var(--mono); --frame:var(--max-grid);
}
:root[data-theme='dark'] { color-scheme:dark; --bg:#000; --surface:#1c1c1e; --hover:#2c2c2e; --text:#f5f5f7; --text-body:#e5e5ea; --text-2:#aeaeb2; --text-3:#8e8e93; --text-4:#636366; --faint:#48484a; --hairline:rgba(255,255,255,.12); --track:#3a3a3c; --accent:#0a84ff; --accent-link:#409cff; --paper:var(--bg); --paper-raised:var(--surface); --paper-deep:var(--track); --ink:var(--text); --ink-soft:var(--text-2); --ink-faint:var(--text-3); --line:var(--hairline); --line-strong:var(--hairline); --accent-dark:var(--accent-link); --accent-soft:rgba(10,132,255,.16); }
@media (prefers-color-scheme:dark) { :root:not([data-theme]) { color-scheme:dark; --bg:#000; --surface:#1c1c1e; --hover:#2c2c2e; --text:#f5f5f7; --text-body:#e5e5ea; --text-2:#aeaeb2; --text-3:#8e8e93; --text-4:#636366; --faint:#48484a; --hairline:rgba(255,255,255,.12); --track:#3a3a3c; --accent:#0a84ff; --accent-link:#409cff; --paper:var(--bg); --paper-raised:var(--surface); --paper-deep:var(--track); --ink:var(--text); --ink-soft:var(--text-2); --ink-faint:var(--text-3); --line:var(--hairline); --line-strong:var(--hairline); --accent-dark:var(--accent-link); --accent-soft:rgba(10,132,255,.16); } }
html { background:var(--bg); scroll-padding-top:calc(var(--nav-height) + 24px); }
body { min-width:320px; background:var(--bg); color:var(--text); font-family:var(--font); font-optical-sizing:auto; line-height:1.6; -webkit-font-smoothing:antialiased; }
body,button,a,input,textarea { font-family:var(--font); } a { color:inherit; } ::selection { background:var(--accent); color:#fff; } :focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.reveal,.reveal-pending,.reveal-pending.is-visible { opacity:1; transform:none; }
/* Glass applies only where layers overlap: nav and its mobile menu. */
.topnav,.glass-nav { position:sticky; top:0; z-index:30; height:var(--nav-height); border-bottom:1px solid transparent; background:rgba(245,245,247,.72); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); transition:border-color .3s,box-shadow .3s; }
:root[data-theme='dark'] .topnav,:root[data-theme='dark'] .glass-nav { background:rgba(0,0,0,.72); } .topnav.scrolled { border-bottom-color:var(--hairline); box-shadow:0 1px 12px rgba(0,0,0,.04); }
.topnav-inner,.site-frame,.footer-grid { width:min(var(--max-grid),calc(100% - 44px)); margin:0 auto; } .topnav-inner { height:100%; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; }
.topnav-brand { justify-self:start; display:inline-flex; align-items:center; gap:9px; color:var(--text); font-size:15px; font-weight:650; letter-spacing:-.01em; white-space:nowrap; }
.brand-mark { width:26px; height:26px; display:inline-grid; flex:0 0 26px; place-items:center; border:0; border-radius:var(--r-chip); background:var(--text); color:var(--surface); font-size:13px; font-weight:750; line-height:1; }
.topnav-links { display:flex; align-items:center; gap:3px; height:100%; } .topnav-links a { min-width:auto; height:34px; padding:0 12px; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--r-pill); color:var(--text-2); font-size:13px; font-weight:520; letter-spacing:-.01em; transition:color .2s var(--ease-out-quart),background-color .2s var(--ease-out-quart); }
.topnav-links a::after { display:none; } .topnav-links a:hover { color:var(--text); background:rgba(0,0,0,.05); } .topnav-links a.is-active { background:var(--surface); color:var(--text); box-shadow:0 1px 3px rgba(0,0,0,.1); font-weight:600; }
.topnav-actions { justify-self:end; display:flex; align-items:center; gap:8px; } .theme-toggle,.topnav-toggle { min-height:36px; border:1px solid var(--hairline); border-radius:var(--r-pill); background:rgba(255,255,255,.72); color:var(--text-2); cursor:pointer; font-size:12px; font-weight:550; transition:color .2s var(--ease-out-quart),background-color .2s var(--ease-out-quart),transform .2s var(--ease-out-quart); }
:root[data-theme='dark'] .theme-toggle,:root[data-theme='dark'] .topnav-toggle { background:rgba(44,44,46,.8); } .theme-toggle { min-width:60px; padding:0 13px; } .theme-toggle:hover,.topnav-toggle:hover { background:var(--surface); color:var(--text); } .theme-toggle:active,.topnav-toggle:active { transform:scale(.96); }
.topnav-toggle { display:none; width:42px; padding:8px 10px; } .topnav-toggle span { height:1.5px; margin:4px 0; border-radius:var(--r-pill); background:currentColor; }
.site-main { min-height:70dvh; } .site-frame { padding-bottom:2px; }
.promo-strip { min-height:48px; margin-top:22px; padding:7px 10px 7px 18px; display:flex; align-items:center; justify-content:space-between; gap:16px; border:0; border-radius:var(--r-card); background:var(--surface); box-shadow:var(--sh-card); } .promo-strip p { margin:0; color:var(--text-2); font-size:13px; } .promo-strip a { min-height:32px; padding:0 12px; display:inline-flex; align-items:center; border:0; border-radius:var(--r-pill); background:rgba(0,113,227,.08); color:var(--accent-link); font-size:12px; font-weight:600; } .promo-strip a:hover { background:var(--accent); color:#fff; }
.breadcrumbs { min-height:42px; display:flex; align-items:center; gap:8px; border-bottom:0; color:var(--text-3); font-size:12px; } .breadcrumbs a:hover { color:var(--accent-link); }
.eyebrow { margin:0 0 12px; display:flex; align-items:center; gap:8px; color:var(--text-3); font-size:12px; font-weight:650; letter-spacing:.12em; text-transform:uppercase; } .eyebrow::before { width:7px; height:7px; content:''; border-radius:50%; background:var(--live); box-shadow:0 0 0 0 rgba(48,209,88,.45); animation:liquid-pulse 2.2s infinite; } @keyframes liquid-pulse { 70% { box-shadow:0 0 0 7px rgba(48,209,88,0); } 100% { box-shadow:0 0 0 0 rgba(48,209,88,0); } }
/* Home hierarchy, then reusable white surfaces. */
.home-hero { min-height:min(700px,calc(100dvh - 110px)); padding:clamp(50px,8vw,94px) 0 clamp(38px,7vw,76px); display:grid; grid-template-columns:minmax(0,1.04fr) minmax(340px,.96fr); align-items:center; gap:clamp(32px,6vw,78px); }
.home-hero.home-hero-text-only { min-height:0; display:block; padding:clamp(58px,10vw,118px) 0 clamp(48px,8vw,88px); } .home-hero-text-only .hero-copy { max-width:var(--max-read); } .home-hero-text-only .hero-visual { display:none; }
.hero-copy { padding:0; border:0; } .hero-copy h1,.page-header h1,.topic-hero h1,.product-hero h1,.about-hero h1,.article-header h1 { max-width:14ch; margin:0; color:var(--text); font-size:clamp(32px,4.5vw,50px); font-weight:700; letter-spacing:-.04em; line-height:1.1; } .hero-copy h1 { max-width:11ch; font-size:clamp(36px,5vw,54px); }
.hero-lead,.page-header > p:last-child,.topic-hero > div > p:last-child,.product-hero > div > p,.about-hero > div > p:last-child { max-width:35em; margin:16px 0 0; color:var(--text-body); font-size:clamp(16px,2vw,18px); line-height:1.72; }
.hero-actions,.hero-actions-wrap { margin-top:26px; display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.button { min-height:44px; padding:0 19px; display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:var(--r-pill); font-size:14px; font-weight:600; letter-spacing:-.01em; line-height:1; transition:transform .2s var(--ease-out-quart),box-shadow .2s var(--ease-out-quart),background-color .2s var(--ease-out-quart); } .button:hover { transform:translateY(-2px); } .button:active { transform:scale(.97); }
.button-primary { background:var(--accent); color:#fff; box-shadow:0 6px 16px rgba(0,113,227,.22); } .button-primary:hover { background:var(--accent-link); box-shadow:0 10px 24px rgba(0,113,227,.28); }
.button-secondary { border:1px solid var(--hairline); background:var(--surface); color:var(--text); box-shadow:0 1px 2px rgba(0,0,0,.05); } .button-secondary:hover { background:var(--hover); box-shadow:var(--sh-card); }
.hero-visual { position:relative; margin:0; padding:clamp(9px,1.4vw,14px); overflow:hidden; border-radius:var(--r-hero); background:var(--surface); box-shadow:var(--sh-panel); } .hero-plate { display:none; } .hero-visual img { width:100%; min-height:0; display:block; border-radius:calc(var(--r-hero) - 8px); object-fit:cover; object-position:center; aspect-ratio:16 / 10; transform:scale(1.032); }
.proof-strip,.stats,.evidence-panel { margin:0 0 clamp(42px,7vw,78px); overflow:hidden; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border:0; border-radius:var(--r-panel); background:var(--surface); box-shadow:var(--sh-panel); }
.proof-strip > div,.stats .stat,.evidence-panel > div { min-height:118px; padding:20px clamp(16px,2.3vw,24px); display:flex; flex-direction:column; justify-content:space-between; border:0; border-left:1px solid var(--hairline); } .proof-strip > div:first-child,.stats .stat:first-child,.evidence-panel > div:first-child { border-left:0; }
.proof-strip strong,.stat-num,.evidence-panel strong { color:var(--text); font-size:clamp(26px,3.5vw,40px); font-weight:700; letter-spacing:-.04em; line-height:1; font-variant-numeric:tabular-nums; } .proof-strip span,.stat-text,.evidence-panel span { color:var(--text-2); font-size:12px; line-height:1.5; }
.home-section,.route-section,.related-section { padding:clamp(42px,7vw,76px) 0; border:0; } .compact-section { padding-bottom:clamp(42px,7vw,76px); }
.section-heading { max-width:600px; margin:0 0 clamp(22px,4vw,34px); } .section-heading h2,.final-cta h2,.boundary-panel h2,.article-case-archive h2 { max-width:17ch; margin:0; color:var(--text); font-size:clamp(24px,3.4vw,32px); font-weight:700; letter-spacing:-.03em; line-height:1.22; } .section-heading > p:last-child { max-width:42em; margin:12px 0 0; color:var(--text-2); font-size:15px; line-height:1.68; }
/* Only independent objects receive individual cards. */
.outcome-grid,.case-grid,.product-grid,.capability-grid,.related-grid,.tool-grid,.link-grid,.topic-grid { margin:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; border:0; }
.outcome-card,.case-card,.product-card,.capability-grid article,.related-card,.tool-card,.link-card,.topic-card { min-height:0; padding:clamp(20px,3vw,27px); display:flex; flex-direction:column; align-items:flex-start; border:0; border-radius:var(--r-card); background:var(--surface); box-shadow:var(--sh-card); color:var(--text); transition:transform .2s var(--ease-out-quart),box-shadow .2s var(--ease-out-quart),background-color .2s var(--ease-out-quart); }
.outcome-card:hover,.case-card:hover,.product-card:hover,.capability-grid article:hover,.related-card:hover,.tool-card:hover,.link-card:hover,.topic-card:hover { background:var(--surface); color:var(--text); transform:translateY(-3px); box-shadow:var(--sh-lift); }
.outcome-index,.product-card > span,.before-after article > span,.capability-grid article > span,.route-stage > span,.topic-card-meta,.post-meta,.article-byline,.article-pagination span,.related-card time,.product-preview figcaption { color:var(--text-3); font-size:11.5px; font-weight:550; letter-spacing:.02em; line-height:1.5; font-variant-numeric:tabular-nums; }
.outcome-card h3,.product-card h2,.capability-grid h3,.related-card h3,.topic-card h2,.topic-card h3,.tool-name,.link-name,.case-card h2 { margin:17px 0 8px; color:var(--text); font-size:clamp(18px,2.2vw,22px); font-weight:650; letter-spacing:-.02em; line-height:1.35; }
.outcome-card p,.product-card p,.capability-grid p,.case-card p,.topic-card p,.tool-desc,.link-url,.case-note { margin:0; color:var(--text-2); font-size:14px; line-height:1.65; }
.topic-grid-featured { grid-template-columns:repeat(3,minmax(0,1fr)); } .topic-grid-featured .topic-card { grid-column:auto; min-height:0; } .topic-card-meta { width:100%; display:flex; flex-wrap:wrap; gap:7px 12px; } .topic-card-meta time { color:inherit; }
.topic-audience,.product-card dl { width:100%; margin:18px 0; display:grid; grid-template-columns:50px minmax(0,1fr); gap:8px 12px; color:var(--text-2); font-size:13px; } .topic-audience dt,.product-card dt,.product-facts dt,.topic-brief dt { color:var(--text-3); font-size:11px; font-weight:550; } .topic-audience dd,.product-card dd,.product-facts dd,.topic-brief dd { margin:0; }
.mini-route { width:100%; margin:2px 0 16px; padding:0; list-style:none; border-top:1px solid var(--hairline); } .mini-route li { padding:10px 0; display:grid; grid-template-columns:68px minmax(0,1fr); gap:10px; border-bottom:1px solid var(--hairline); color:var(--text-2); font-size:12px; } .mini-route strong { color:var(--accent-link); font-weight:600; }
.text-link { min-height:32px; margin-top:auto; padding:14px 0 0; display:inline-flex; align-items:center; align-self:flex-start; border:0; color:var(--accent-link); font-size:13px; font-weight:600; } .text-link::after { content:'›'; margin-left:6px; font-size:18px; line-height:0; transition:transform .2s var(--ease-out-quart); } .text-link:hover { border:0; color:var(--accent); } .text-link:hover::after { transform:translateX(3px); }
.badge { padding:3px 8px; border:0; border-radius:var(--r-pill); background:rgba(0,113,227,.08); color:var(--accent-link); font-size:11px; font-weight:600; } .tag-list { margin:14px 0 0; display:flex; flex-wrap:wrap; gap:7px; } .tag-pill { max-width:100%; min-height:28px; padding:0 10px; display:inline-flex; align-items:center; border:0; border-radius:var(--r-pill); background:rgba(0,0,0,.05); color:var(--text-2); font-size:11.5px; font-weight:550; } .tag-pill:hover { border:0; background:rgba(0,113,227,.08); color:var(--accent-link); }
/* Unified white panels for article and update lists. */
.post-grid { overflow:hidden; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border:0; border-radius:var(--r-panel); background:var(--surface); box-shadow:var(--sh-panel); }
.post-item { min-height:220px; padding:clamp(20px,3vw,28px); display:flex; flex-direction:column; border:0; border-left:1px solid var(--hairline); border-top:1px solid var(--hairline); background:transparent; color:var(--text); } .post-item:nth-child(2n + 1) { border-left:0; } .post-item:nth-child(-n + 2) { border-top:0; }
.post-featured { position:relative; min-height:290px; grid-column:1 / -1; overflow:hidden; border:0; background:var(--grad-cta); color:#fff; } .post-featured::before,.final-cta::before,.final-cta::after { position:absolute; width:250px; height:250px; content:''; border-radius:50%; filter:blur(48px); pointer-events:none; } .post-featured::before { top:-130px; right:-70px; background:rgba(255,255,255,.24); } .post-featured > * { position:relative; z-index:1; } .post-featured .post-meta,.post-featured .post-desc { color:rgba(255,255,255,.82); } .post-featured .post-title,.post-featured .post-title a { color:#fff; } .post-featured .badge { background:rgba(255,255,255,.16); color:#fff; } .post-featured .text-link { color:#fff; }
.post-meta { min-height:18px; display:flex; align-items:center; gap:8px; } .post-title { margin:14px 0 7px; color:var(--text); font-size:clamp(19px,2.4vw,24px); font-weight:650; letter-spacing:-.02em; line-height:1.36; } .post-title a:hover { color:var(--accent-link); text-decoration:none; } .post-featured .post-title a:hover { color:#fff; } .post-desc { margin:0; color:var(--text-2); font-size:14px; line-height:1.65; display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:3; } .post-desc p { margin:0; }
.post-index,.recent-list,.scenario-list { margin:0; padding:0; overflow:hidden; list-style:none; border:0; border-radius:var(--r-panel); background:var(--surface); box-shadow:var(--sh-panel); }
.post-index-item { min-height:128px; padding:19px clamp(18px,3vw,26px); display:grid; grid-template-columns:minmax(106px,.22fr) minmax(0,1fr) auto; align-items:start; gap:18px; border:0; border-top:1px solid var(--hairline); background:transparent; } .post-index-item:first-child { border-top:0; } .post-index-item:nth-child(2n) .post-index-copy { padding-left:0; } .post-index-item:hover { background:var(--hover); } .post-index-copy .post-title { margin-top:0; } .post-index-item > .text-link { justify-self:end; margin-top:0; padding-top:0; align-self:center; }
.recent-item { min-height:70px; padding:14px clamp(18px,3vw,24px); display:grid; grid-template-columns:120px minmax(0,1fr) auto; align-items:center; gap:20px; border:0; border-top:1px solid var(--hairline); background:transparent; transition:background-color .18s var(--ease-out-quart); } .recent-item:first-child { border-top:0; } .recent-item time { color:var(--text-3); font-size:11.5px; font-variant-numeric:tabular-nums; } .recent-item strong { font-size:15px; font-weight:600; letter-spacing:-.01em; } .recent-item > span { color:var(--faint); font-size:22px; } .recent-item:hover { padding-right:clamp(18px,3vw,24px); padding-left:clamp(18px,3vw,24px); background:var(--hover); color:var(--accent-link); }
.scenario-list li { min-height:74px; padding:15px clamp(18px,3vw,24px); display:grid; grid-template-columns:48px minmax(0,1fr); align-items:center; gap:14px; border:0; border-top:1px solid var(--hairline); } .scenario-list li:first-child { border-top:0; } .scenario-list span { color:var(--text-3); font-size:15px; font-weight:600; font-variant-numeric:tabular-nums; } .scenario-list strong { color:var(--text); font-size:15px; font-weight:600; }
/* Index and detail pages. */
.page-header { max-width:var(--max-read); margin:0; padding:clamp(54px,8vw,88px) 0 clamp(28px,4vw,42px); border:0; } .page-header h1 { max-width:15ch; }
.topic-hero,.product-hero,.about-hero { padding:clamp(50px,8vw,88px) 0 clamp(36px,6vw,66px); display:grid; grid-template-columns:minmax(0,1.08fr) minmax(300px,.72fr); align-items:center; gap:clamp(32px,6vw,78px); border:0; }
.topic-brief,.product-facts { margin:0; padding:0; overflow:hidden; display:grid; grid-template-columns:minmax(94px,.35fr) minmax(0,1fr); gap:0; border:0; border-radius:var(--r-panel); background:var(--surface); box-shadow:var(--sh-panel); }
.topic-brief dt,.topic-brief dd,.product-facts dt,.product-facts dd { min-height:50px; margin:0; padding:14px 18px; display:flex; align-items:center; border-top:1px solid var(--hairline); font-size:13px; } .topic-brief dt:first-of-type,.topic-brief dt:first-of-type + dd,.product-facts dt:first-of-type,.product-facts dt:first-of-type + dd { border-top:0; } .topic-brief dt,.product-facts dt { color:var(--text-3); border-right:1px solid var(--hairline); } .topic-brief dd,.product-facts dd { color:var(--text-body); }
.route-grid { overflow:hidden; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border:0; border-radius:var(--r-panel); background:var(--surface); box-shadow:var(--sh-panel); } .route-stage { min-height:150px; padding:22px; border:0; border-left:1px solid var(--hairline); } .route-stage:first-child { border-left:0; } .route-stage h3 { margin:12px 0 0; font-size:16px; font-weight:600; letter-spacing:-.01em; line-height:1.5; }
.product-preview { margin:0 0 clamp(36px,6vw,62px); padding:10px; border:0; border-radius:var(--r-hero); background:var(--surface); box-shadow:var(--sh-panel); } .product-preview img { width:100%; max-height:720px; display:block; border:0; border-radius:calc(var(--r-hero) - 8px); background:var(--track); object-fit:contain; } .product-preview figcaption { padding:10px 6px 2px; }
.before-after { margin:0 0 clamp(36px,6vw,62px); overflow:hidden; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border:0; border-radius:var(--r-panel); background:var(--surface); box-shadow:var(--sh-panel); } .before-after article { min-height:210px; padding:clamp(22px,4vw,34px); border:0; border-left:1px solid var(--hairline); } .before-after article:first-child { border-left:0; } .before-after h2 { margin:14px 0 10px; font-size:21px; font-weight:650; letter-spacing:-.02em; } .before-after p { margin:0; color:var(--text-2); font-size:14px; line-height:1.7; }
.boundary-panel,.case-standard,.editorial-note { margin:0 0 clamp(38px,6vw,72px); padding:clamp(24px,4vw,38px); display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.25fr); gap:clamp(24px,5vw,58px); border:0; border-radius:var(--r-panel); background:var(--surface); box-shadow:var(--sh-panel); } .boundary-panel p,.case-standard p,.editorial-note p { margin:0; color:var(--text-2); line-height:1.75; } .boundary-panel ul { margin:0; padding-left:19px; color:var(--text-body); } .boundary-panel li + li { margin-top:10px; } .case-standard h2 { margin:0 0 10px; font-size:21px; letter-spacing:-.02em; }
.about-hero img { justify-self:end; width:min(100%,300px); aspect-ratio:1; padding:8px; border:0; border-radius:var(--r-hero); background:var(--surface); box-shadow:var(--sh-panel); object-fit:cover; }
/* Reading view remains flat and breathable, never boxed into a card. */
.article-shell { padding:clamp(50px,8vw,84px) 0 clamp(52px,8vw,92px); } .article-header { max-width:var(--max-read); margin:0 auto clamp(40px,6vw,64px); padding:0; border:0; } .article-header h1 { max-width:none; font-size:clamp(31px,4.5vw,46px); } .article-byline { margin-top:16px; display:flex; flex-wrap:wrap; gap:6px 18px; } .article-tags { margin-top:16px; }
.article-layout { max-width:var(--max-grid); margin:0 auto; display:grid; grid-template-columns:180px minmax(0,var(--max-read)); justify-content:center; gap:clamp(32px,6vw,72px); } .toc-panel { position:sticky; top:calc(var(--nav-height) + 28px); align-self:start; padding:14px 0 14px 14px; border-left:1px solid var(--hairline); color:var(--text-2); font-size:12px; } .toc-panel strong { display:block; margin-bottom:10px; color:var(--text); font-size:13px; font-weight:650; } .toc-panel nav { display:grid; gap:7px; } .toc-panel a { color:var(--text-3); line-height:1.45; } .toc-panel a:hover { color:var(--accent-link); } .toc-panel .toc-level-3 { padding-left:8px; } .toc-panel .toc-level-4 { padding-left:16px; }
#blog.content { min-width:0; color:var(--text-body); font-size:clamp(16px,2.2vw,18px); line-height:1.88; } #blog.content > :first-child { margin-top:0; } #blog.content p { margin:0 0 1.35em; } #blog.content h2,#blog.content h3,#blog.content h4 { margin:2.25em 0 .7em; color:var(--text); font-weight:700; letter-spacing:-.02em; line-height:1.28; scroll-margin-top:calc(var(--nav-height) + 24px); } #blog.content h2 { font-size:clamp(23px,3.2vw,28px); } #blog.content h3 { font-size:clamp(19px,2.6vw,23px); } #blog.content h4 { font-size:17px; }
#blog.content a { color:var(--accent-link); text-decoration:underline; text-decoration-color:rgba(0,102,204,.28); text-decoration-thickness:1px; text-underline-offset:3px; } #blog.content a:hover { text-decoration-color:currentColor; } #blog.content ul,#blog.content ol { margin:0 0 1.5em; padding-left:1.35em; } #blog.content li + li { margin-top:.4em; } #blog.content blockquote { margin:1.8em 0; padding:.25em 0 .25em 1.1em; border-left:3px solid var(--accent); color:var(--text-2); } #blog.content hr { height:1px; margin:2.4em 0; border:0; background:var(--hairline); }
#blog.content img { max-width:100%; height:auto; border-radius:var(--r-thumb); box-shadow:var(--sh-card); } #blog.content .p-img { margin:1.8em 0; } #blog.content pre { margin:1.8em 0; padding:18px; overflow:auto; border-radius:var(--r-card); background:#1d1d1f; color:#f5f5f7; font-size:13px; line-height:1.65; } #blog.content code { padding:.14em .36em; border-radius:5px; background:rgba(0,0,0,.06); color:var(--text); font-family:var(--mono); font-size:.85em; } #blog.content pre code { padding:0; background:transparent; color:inherit; } #blog.content table { width:100%; margin:1.8em 0; border-collapse:collapse; font-size:.86em; } #blog.content th,#blog.content td { padding:10px; border-bottom:1px solid var(--hairline); text-align:left; vertical-align:top; } #blog.content th { color:var(--text); font-weight:650; }
.article-context,.article-case-archive { max-width:var(--max-read); margin:clamp(44px,7vw,68px) auto 0; padding:clamp(22px,4vw,30px); border:0; border-radius:var(--r-panel); background:var(--surface); box-shadow:var(--sh-panel); } .article-context > span { color:var(--text-3); font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; } .article-context strong { display:block; margin-top:10px; color:var(--text); font-size:20px; font-weight:650; letter-spacing:-.02em; } .article-context p { margin:8px 0 0; color:var(--text-2); font-size:14px; line-height:1.7; } .article-case-archive header { margin-bottom:16px; } .article-case-archive dl { margin:0; } .article-case-archive dt { padding:13px 0 5px; border-top:1px solid var(--hairline); color:var(--text); font-size:13px; font-weight:650; } .article-case-archive dd { margin:0; padding:0 0 13px; color:var(--text-2); font-size:14px; line-height:1.7; }
.article-pagination { max-width:var(--max-read); margin:0 auto clamp(44px,7vw,72px); overflow:hidden; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border:0; border-radius:var(--r-panel); background:var(--surface); box-shadow:var(--sh-panel); } .article-pagination a { min-height:120px; padding:21px; display:flex; flex-direction:column; border:0; border-left:1px solid var(--hairline); } .article-pagination a:first-child { border-left:0; } .article-pagination a:last-child { text-align:right; } .article-pagination strong { margin-top:10px; color:var(--text); font-size:15px; font-weight:600; line-height:1.45; } .article-pagination a:hover { background:var(--hover); color:inherit; }
/* One colored CTA per view; its translucent buttons have actual color behind them. */
.final-cta { position:relative; margin:clamp(18px,4vw,34px) 0 clamp(52px,8vw,92px); padding:clamp(28px,5vw,48px); overflow:hidden; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:28px; border:0; border-radius:var(--r-hero); background:var(--grad-cta); box-shadow:var(--sh-cta); color:#fff; } .final-cta::before { top:-130px; right:-65px; background:rgba(255,255,255,.22); } .final-cta::after { bottom:-155px; left:12%; background:rgba(128,94,255,.5); } .final-cta > * { position:relative; z-index:1; } .final-cta .eyebrow { color:rgba(255,255,255,.74); } .final-cta .eyebrow::before { background:#fff; box-shadow:none; animation:none; } .final-cta h2 { color:#fff; } .final-cta p:last-child { max-width:52em; margin:12px 0 0; color:rgba(255,255,255,.82); font-size:15px; line-height:1.65; }
.final-cta .button-primary,.final-cta .button-secondary { border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.16); color:#fff; box-shadow:none; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } .final-cta .button-primary:hover,.final-cta .button-secondary:hover { background:rgba(255,255,255,.25); box-shadow:none; } .final-cta-actions { display:flex; flex-direction:column; gap:10px; align-items:stretch; }
.empty-state { padding:34px 26px; border:0; border-radius:var(--r-panel); background:var(--surface); box-shadow:var(--sh-panel); color:var(--text-2); } .empty-state strong { display:block; color:var(--text); font-size:17px; font-weight:650; } .empty-state p { margin:7px 0 0; font-size:14px; }
.footer { margin-top:clamp(30px,6vw,72px); padding:42px 0 34px; border:0; background:var(--surface); } .footer-grid { display:grid; grid-template-columns:1.8fr repeat(2,1fr) 1.15fr; gap:26px; } .footer-brand { display:grid; grid-template-columns:26px 1fr; column-gap:9px; align-items:center; } .footer-brand strong { color:var(--text); font-size:15px; font-weight:650; } .footer-brand p { grid-column:1 / -1; margin:10px 0 0; color:var(--text-2); font-size:13px; } .footer-group,.footer-legal { display:flex; flex-direction:column; gap:8px; color:var(--text-2); font-size:13px; } .footer-group > span,.footer-legal > span:first-child { margin-bottom:2px; color:var(--text); font-size:12px; font-weight:650; } .footer-group a,.footer-legal a { color:var(--text-2); } .footer-group a:hover,.footer-legal a:hover { color:var(--accent-link); }
@media (max-width:880px) {
  .home-hero,.topic-hero,.product-hero,.about-hero { grid-template-columns:1fr; } .hero-copy h1 { max-width:14ch; } .hero-visual { max-width:680px; } .about-hero img { justify-self:start; } .article-layout { grid-template-columns:1fr; max-width:var(--max-read); } .toc-panel { position:static; order:2; display:none; } .footer-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:680px) {
  .topnav-inner,.site-frame,.footer-grid { width:min(100% - 32px,var(--max-grid)); } .topnav-inner { grid-template-columns:1fr auto; gap:10px; } .topnav-brand > span:last-child { font-size:14px; } .topnav-toggle { display:block; }
  .topnav-links { position:absolute; top:calc(100% + 8px); right:16px; left:16px; height:auto; padding:7px; display:none; flex-direction:column; align-items:stretch; border:1px solid var(--hairline); border-radius:var(--r-panel); background:rgba(245,245,247,.82); box-shadow:var(--sh-panel); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); } :root[data-theme='dark'] .topnav-links { background:rgba(28,28,30,.86); } .topnav-links.is-open { display:flex; } .topnav-links a { justify-content:flex-start; min-height:44px; padding:0 14px; } .theme-toggle { min-width:54px; } .topnav-actions { gap:6px; }
  .promo-strip { margin-top:16px; padding-left:14px; } .promo-strip p { font-size:12px; } .promo-strip a { padding:0 10px; } .breadcrumbs { min-height:38px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
  .home-hero { min-height:0; padding:48px 0 42px; gap:28px; } .hero-copy h1 { font-size:clamp(34px,10vw,44px); } .hero-visual img { height:clamp(220px,64vw,280px); min-height:0; }
  .proof-strip,.stats,.evidence-panel { grid-template-columns:repeat(2,minmax(0,1fr)); } .proof-strip > div,.stats .stat,.evidence-panel > div { min-height:100px; border-top:1px solid var(--hairline); } .proof-strip > div:nth-child(2n + 1),.stats .stat:nth-child(2n + 1),.evidence-panel > div:nth-child(2n + 1) { border-left:0; } .proof-strip > div:nth-child(-n + 2),.stats .stat:nth-child(-n + 2),.evidence-panel > div:nth-child(-n + 2) { border-top:0; }
  .outcome-grid,.case-grid,.product-grid,.capability-grid,.related-grid,.tool-grid,.link-grid,.topic-grid,.topic-grid-featured,.route-grid { grid-template-columns:1fr; } .post-grid { grid-template-columns:1fr; } .post-item,.post-item:nth-child(2n + 1),.post-item:nth-child(-n + 2) { min-height:0; border-left:0; border-top:1px solid var(--hairline); } .post-featured { min-height:250px; border-top:0 !important; }
  .post-index-item { grid-template-columns:1fr; gap:5px; } .post-index-item > .text-link { justify-self:start; align-self:auto; padding-top:8px; } .recent-item { grid-template-columns:1fr auto; gap:4px 14px; } .recent-item time { grid-column:1 / -1; } .recent-item > span { grid-column:2; grid-row:2; }
  .topic-brief,.product-facts { grid-template-columns:92px minmax(0,1fr); } .route-stage { min-height:0; border-left:0; border-top:1px solid var(--hairline); } .route-stage:first-child { border-top:0; } .before-after,.boundary-panel,.case-standard,.editorial-note { grid-template-columns:1fr; } .before-after article { min-height:0; border-left:0; border-top:1px solid var(--hairline); } .before-after article:first-child { border-top:0; }
  .article-shell { padding-top:48px; } .article-pagination { grid-template-columns:1fr; } .article-pagination a,.article-pagination a:first-child { border-left:0; border-top:1px solid var(--hairline); } .article-pagination a:first-child { border-top:0; } .article-pagination a:last-child { text-align:left; } .final-cta { grid-template-columns:1fr; align-items:start; gap:22px; } .final-cta-actions { width:100%; } .final-cta .button { width:100%; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:26px 18px; } .footer-brand { grid-column:1 / -1; }
}
/* Article-panel cleanup: counter the legacy grid's hard outline. */
.post-grid .post-item { grid-column:auto; border-right:0; border-bottom:0; }
.post-grid .post-item:nth-last-child(-n + 2) { border-bottom:0; }
.post-grid .post-featured { background:var(--accent); }
.post-grid .post-featured::before { background:rgba(255,255,255,.18); }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; } }
/* Keep the home feed as one continuous reading surface. */
.final-cta { background:var(--accent); }
.final-cta::after { background:rgba(255,255,255,.10); }
.post-grid { grid-template-columns:1fr; }
.post-grid .post-item { border-left:0; border-top:1px solid var(--hairline); }
.post-grid .post-featured { border-top:0; }
/* The article copy now follows the full width of its single-column row. */
.post-grid .post-title,.post-grid .post-desc { max-width:none; width:100%; }
/* Hero actions use their own alignment instead of the article-link rhythm. */
.hero-actions .button-secondary:hover { background:var(--hover); color:var(--text); box-shadow:var(--sh-card); }
.hero-actions .text-link { min-height:44px; margin-top:0; padding:0; align-self:center; }
.hero-actions .text-link:hover { color:var(--accent-link); }
/* A denser article panel keeps the home feed moving. */
.post-grid .post-item { min-height:180px; padding:clamp(18px,2.5vw,22px); }
.post-grid .post-featured { min-height:230px; }
.post-grid .post-desc { -webkit-line-clamp:2; }
.section-action { display:flex; margin-top:18px; }
.section-action .text-link { min-height:44px; margin:0; padding:0; align-self:center; }