/* Section navigation stays inside the full-height article or section group. */
.toc-tabs{position:sticky;top:12px;z-index:7;display:flex;gap:8px;max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch;padding:10px;border:1px solid var(--border);border-radius:var(--r-pill);background:var(--bg-panel);box-shadow:var(--shadow-chip)}
.toc-tabs a{display:inline-flex;align-items:center;flex:none;min-height:36px;padding:4px 16px;border-radius:var(--r-pill);font-size:14px;font-weight:700;white-space:nowrap;text-decoration:none}
.toc-tabs a:hover,.toc-tabs a.is-current,.toc-tabs a[aria-current="location"]{background:var(--wash-violet);color:var(--accent-dark)}
body:has(.toc-tabs) section[id]{scroll-margin-top:100px}
[role="tablist"]{display:flex;gap:8px;max-width:100%;overflow-x:auto;padding:8px;border-radius:var(--r-pill);background:var(--bg-panel-2)}
[role="tab"]{flex:none;min-height:44px;padding:8px 18px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--text-muted);font-weight:800;white-space:nowrap}
[role="tab"][aria-selected="true"]{background:var(--white);color:var(--accent-dark);box-shadow:var(--shadow-chip)}
[role="tabpanel"][hidden]{display:none}
.feature-browser{display:grid;grid-template-columns:minmax(0,38fr) minmax(0,62fr);gap:28px}
.feature-browser__tabs{display:grid;align-content:start;gap:8px;background:transparent;border-radius:0;overflow:visible}
.feature-browser__tabs [role="tab"]{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:68px;border-radius:var(--r-sm);text-align:left;white-space:normal}
.feature-browser__tabs [role="tab"][aria-selected="true"]::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:4px;border-radius:var(--r-pill);background:var(--accent)}
.feature-browser__icon{flex:none;color:var(--accent)}
.feature-browser__icon svg{width:24px;height:24px}
.feature-browser__note{display:block;font-size:13px;font-weight:500;color:var(--text-muted)}
.feature-display{min-width:0;padding:32px;border-radius:var(--r-ring);background:linear-gradient(140deg,var(--accent),var(--coral));box-shadow:var(--shadow-soft)}
.feature-selection{position:relative;padding:20px;border:2px dashed rgb(var(--white-rgb) / .7);border-radius:var(--r-box)}
.product-window{min-width:0;overflow:hidden;border-radius:var(--r-sm);background:var(--white);box-shadow:var(--shadow-glass)}
.product-window__bar{display:flex;align-items:center;gap:7px;min-height:40px;padding:0 16px;border-bottom:1px solid var(--border);font-size:13px;font-weight:800}
.product-window__dot{width:8px;height:8px;flex:none;border-radius:50%;background:var(--coral)}
.product-window__dot:nth-child(2){background:var(--warn)}
.product-window__dot:nth-child(3){background:var(--success)}
.product-window__title{margin-left:12px}
.product-window__body{padding:22px}
.feature-selection__add{position:absolute;left:50%;bottom:-20px;transform:translateX(-50%);padding:8px 18px;border-radius:var(--r-pill);background:var(--plum);color:var(--white);font-size:13px;font-weight:800;white-space:nowrap}
.feature-detail{margin-top:24px;padding:24px;border-radius:var(--r-card);background:var(--bg-panel);line-height:1.8}
.faq-item{margin-bottom:10px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--bg-panel)}
.faq-item summary{position:relative;min-height:52px;padding:14px 48px 14px 20px;font-weight:800;cursor:pointer}
.faq-item summary::marker{color:var(--accent)}
.faq-item summary::after{content:"+";position:absolute;right:18px;top:10px;font-size:24px;color:var(--accent)}
.faq-item[open] summary::after{content:"−"}
.faq-item__answer{padding:0 20px 18px;color:var(--text-muted)}
.plan-grid,.platform-grid,.article-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.plan-card{position:relative;display:flex;flex-direction:column;min-width:0;padding:28px;border:1px solid var(--border);border-radius:var(--r-box);background:var(--bg-panel);box-shadow:var(--edge-hi),var(--shadow-chip)}
.plan-card--featured{border-color:var(--accent);background:var(--white);box-shadow:0 0 0 3px rgb(var(--accent-rgb) / .12),var(--shadow-soft)}
.plan-card__badge{align-self:flex-start;max-width:100%;padding:4px 12px;border-radius:var(--r-pill);background:var(--plum);color:var(--white);font-size:12px;font-weight:800}
.plan-card__name{margin:14px 0 4px;font-size:20px}
.plan-card__price{margin:6px 0;font-family:var(--font-display);font-size:36px;font-weight:900;line-height:1.2}
.plan-card__cycle,.plan-card__description{color:var(--text-muted)}
.plan-card__features{flex:1;padding-left:20px;line-height:2}
.plan-card .btn-secondary,.plan-card .btn-primary{align-self:flex-start}
.table-scroll{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--border);border-radius:var(--r-card);background:var(--bg-panel)}
.table-scroll table{width:100%;min-width:660px;border-collapse:collapse}
.table-scroll th,.table-scroll td,.data-table th,.data-table td{padding:13px 16px;border-bottom:1px solid var(--border);text-align:left;word-break:keep-all}
.table-scroll th,.data-table th{background:var(--bg-panel-2);color:var(--text);font-weight:800;white-space:nowrap}
.table-scroll td:first-child{color:var(--text);font-weight:700}
.table-scroll tbody tr:last-child td{border-bottom:0}
.table-scroll .group-row td{background:var(--wash-violet);color:var(--accent-dark);font-weight:800}
.platform-card,.article-card{display:flex;flex-direction:column;min-width:0;padding:24px;border:1px solid var(--border);border-radius:var(--r-card);background:var(--bg-panel);box-shadow:var(--edge-hi),var(--shadow-chip)}
.platform-card__icon{display:grid;place-items:center;width:48px;height:48px;flex:none;border-radius:var(--r-sm);background:var(--wash-violet);color:var(--accent-dark)}
.platform-card__name,.article-card__title{margin:18px 0 8px;font-size:20px}
.platform-card p,.article-card p{color:var(--text-muted)}
.platform-card a{align-self:flex-start;margin-top:auto}
.article-card__meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-family:var(--font-mono);font-size:12px;color:var(--text-muted)}
.article-card__tag,.mini-tag{display:inline-flex;align-items:center;max-width:100%;min-height:26px;overflow:hidden;padding:3px 10px;border-radius:var(--r-pill);background:var(--wash-violet);color:var(--accent-dark);font-size:12px;font-weight:800;overflow-wrap:anywhere}
.article-card__title a{text-decoration:none}
.article-card__title a:hover{color:var(--accent-dark)}
.callout{margin:24px 0;padding:20px 24px;border-left:4px solid var(--accent);border-radius:0 var(--r-sm) var(--r-sm) 0;background:var(--wash-violet)}
.promo-block,.cta-band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;padding:32px;border-radius:var(--r-box);background:var(--plum);color:var(--white)}
.promo-block__brand{margin:0;font-size:22px;font-weight:900}
.promo-block p,.cta-band p{margin:6px 0 0}
.promo-block .btn-primary,.promo-block .btn-secondary,.cta-band .btn-primary{flex-shrink:0;white-space:nowrap}
.float-cta{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:50;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border:1px solid rgb(var(--white-rgb) / .28);border-radius:var(--r-pill);background:var(--plum);box-shadow:var(--shadow-soft);color:var(--white);font-weight:800;text-decoration:none}
.float-cta:hover{background:var(--accent-dark)}
.float-cta svg{width:18px;height:18px}
body:has(.float-cta)::before{content:"";display:block;position:absolute;pointer-events:none}
body:has(.float-cta)::after{content:"";position:static;display:block;height:calc(88px + env(safe-area-inset-bottom,0px));pointer-events:none;background:none;opacity:1;mix-blend-mode:normal}
.ticker{max-width:100%;overflow:hidden}
.ticker__track{display:flex;width:max-content;gap:32px;align-items:center}
.ticker__group{display:flex;flex:none;gap:32px;white-space:nowrap;font-family:var(--font-mono);color:var(--text-muted)}
.blog-hero{position:relative;padding:32px 32px 32px 48px;border:1px solid var(--border);border-radius:var(--r-box);background:var(--wash-violet)}
.blog-hero::before{content:"";position:absolute;left:20px;top:20px;bottom:20px;width:5px;border-radius:var(--r-pill);background:var(--grad-key)}
/* The preview uses these same production components, with a small specimen grid. */
.specimen{padding-top:72px;padding-bottom:72px}
.specimen__heading{margin:0 0 28px;font-size:32px}
.specimen__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.swatch{min-width:0;padding:16px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--bg-panel);font-family:var(--font-mono);font-size:13px}
.swatch__paint{height:64px;margin-bottom:12px;border:1px solid var(--border);border-radius:var(--r-xs);background:var(--swatch)}
.swatch--bg{--swatch:var(--bg)}.swatch--panel{--swatch:var(--bg-panel)}.swatch--panel2{--swatch:var(--bg-panel-2)}.swatch--border{--swatch:var(--border)}.swatch--accent{--swatch:var(--accent)}.swatch--deep{--swatch:var(--accent-dark)}.swatch--coral{--swatch:var(--coral)}.swatch--plum{--swatch:var(--plum)}.swatch--text{--swatch:var(--text)}.swatch--muted{--swatch:var(--text-muted)}.swatch--success{--swatch:var(--success)}.swatch--warn{--swatch:var(--warn)}.swatch--error{--swatch:var(--error)}.swatch--violet{--swatch:var(--wash-violet)}.swatch--apricot{--swatch:var(--wash-apricot)}
.specimen__actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.specimen__actions button:disabled{opacity:.5;cursor:not-allowed}
.specimen__stack{display:grid;gap:22px}
@media(max-width:768px){.feature-browser{grid-template-columns:1fr}.feature-browser__tabs{display:flex;overflow-x:auto;max-width:100%;padding:8px;border-radius:var(--r-pill);background:var(--bg-panel-2)}.feature-browser__tabs [role="tab"]{width:auto;white-space:nowrap}.feature-browser__note{display:none}.feature-display{padding:18px}.plan-grid,.platform-grid,.article-grid,.specimen__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.plan-grid,.platform-grid,.article-grid,.specimen__grid{grid-template-columns:1fr}.float-cta{right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px))}.promo-block,.cta-band{padding:24px}.specimen{padding-top:56px;padding-bottom:56px}}