/*
 * QuikSEO public pages: the components of the owner's Obsidian Emerald mockup (docs/QuikSEO homepage mockup), written as
 * classes. Loaded by the public wrappers after obsidian.css (tokens --ob-*); the home page and the other public pages share them.
 */

/* ---------------------------------------------------------------- keyframes of the mockup */
@keyframes qspin { to { transform: rotate(360deg); } }
@keyframes qscan { 0% { left: -35%; } 100% { left: 105%; } }
@keyframes qripple { from { transform: translate(-50%, -50%) scale(0); opacity: .55; } to { transform: translate(-50%, -50%) scale(1); opacity: 0; } }
@keyframes qdot { 0%, 30% { background: var(--ob-danger-well); } 42%, 88% { background: #10b981; box-shadow: 0 0 6px rgba(16, 185, 129, .7); } 100% { background: var(--ob-danger-well); } }
@keyframes qnode { 0%, 100% { box-shadow: 0 0 24px -6px rgba(16, 185, 129, .4); } 40% { box-shadow: 0 0 0 6px rgba(16, 185, 129, .12), 0 0 40px -4px rgba(16, 185, 129, .7); } }
@keyframes qin { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes qflow { from { background-position: 0 0; } to { background-position: 0 24px; } }
@keyframes qmarq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes qdash { from { stroke-dashoffset: 520; } to { stroke-dashoffset: 0; } }
@keyframes qring { 0% { transform: scale(.9); opacity: .7; } 100% { transform: scale(1.5); opacity: 0; } }

.h-mono { font-family: var(--ob-font-mono); }
.h-fg { color: var(--ob-fg-1); }
.h-muted { color: var(--ob-fg-2); }
.h-faint { color: var(--ob-fg-3); }
.h-ok { color: var(--ob-accent-hover); }
.h-soft { color: var(--ob-accent-soft); }
.h-warn { color: var(--ob-warn); }
.h-bad { color: var(--ob-danger); }
.h-cursor { display: inline-block; width: 8px; height: 15px; background: var(--ob-accent-hover); vertical-align: -2px; animation: qblink 1s infinite; }

/* ---------------------------------------------------------------- section frame */
.h-section { position: relative; border-bottom: 1px solid var(--ob-line-2); scroll-margin-top: 64px; }
.h-inner { position: relative; max-width: var(--ob-container); margin: 0 auto; padding: var(--ob-section-pad) var(--ob-gutter); }
.h-eyebrow { font-family: var(--ob-font-mono); font-size: 12px; color: var(--ob-accent-hover); letter-spacing: .06em; text-transform: uppercase; margin: 0; }
.h-h2 { font-family: var(--ob-font-display); font-weight: 300; font-size: clamp(34px, 4.6vw, 58px); line-height: 1.04; letter-spacing: -.025em; margin: 14px 0 16px; max-width: 20ch; color: var(--ob-fg-1); }
.h-h2--sm { font-size: clamp(34px, 4.6vw, 54px); max-width: none; }
.h-h2--xs { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.05; letter-spacing: -.02em; margin-bottom: 0; max-width: none; }
.h-h2 em, .h-h3 em { font-style: italic; color: var(--ob-fg-2); }
.h-lead { color: var(--ob-fg-2); max-width: 640px; margin: 0 0 40px; }
.h-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 40px; align-items: start; }
.h-split--center { align-items: center; }
.h-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 36px; }
.h-head .h-h2 { margin-bottom: 0; }
.h-head > p { color: var(--ob-fg-2); max-width: 400px; margin: 0; font-size: 14px; }
.h-label { font-family: var(--ob-font-mono); font-size: 11px; color: var(--ob-fg-3); letter-spacing: .08em; text-transform: uppercase; }
.h-h3 { font-family: var(--ob-font-display); font-weight: 400; font-size: 28px; line-height: 1.15; margin: 10px 0 12px; color: var(--ob-fg-1); }

/* Reveal as the mockup does it (opacity and lift, staggered by data-reveal) */
.ob-js [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.ob-js [data-reveal].is-in { opacity: 1; transform: none; }

/* Spotlight border, tilt and magnetic buttons */
.h-spot { border-radius: 16px; padding: 1px; background: radial-gradient(380px circle at var(--mx, -999px) var(--my, -999px), rgba(52, 211, 153, .55), transparent 45%), var(--ob-line-3); transition: transform .3s ease-out; }
.h-spot--wide { background: radial-gradient(500px circle at var(--mx, -999px) var(--my, -999px), rgba(52, 211, 153, .5), transparent 45%), var(--ob-line-3); box-shadow: 0 50px 140px -60px rgba(16, 185, 129, .45); }
.h-spot__in { height: 100%; border-radius: 15px; background: radial-gradient(500px circle at var(--mx, -999px) var(--my, -999px), rgba(16, 185, 129, .06), transparent 45%), rgba(var(--ob-glass), .94); }
.h-tilt-grid { perspective: 1200px; }
[data-mag] { transition: transform .2s ease-out; }
.h-shine { position: absolute; top: 0; bottom: 0; left: 0; width: 35%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); animation: qshimmer 3.4s ease-in-out infinite; pointer-events: none; }

/* ---------------------------------------------------------------- hero */
.h-hero { overflow: clip; }
.h-aurora { position: absolute; top: -220px; left: 50%; width: 1400px; height: 900px; background: radial-gradient(circle at 50% 0%, rgba(16, 185, 129, .18), transparent 62%); animation: qaurora 14s ease-in-out infinite alternate; pointer-events: none; }
.h-aurora--soft { top: -120px; left: 62%; width: 700px; height: 520px; background: radial-gradient(circle at 50% 30%, rgba(52, 211, 153, .08), transparent 65%); animation-duration: 19s; animation-direction: alternate-reverse; }
.h-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(var(--ob-ink), .045) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--ob-ink), .045) 1px, transparent 1px), radial-gradient(rgba(52, 211, 153, .25) 1px, transparent 1.2px); background-size: 32px 32px, 32px 32px, 32px 32px; background-position: 0 0, 0 0, -16px -16px; -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 10%, #000 25%, transparent 75%); mask-image: radial-gradient(ellipse 75% 65% at 50% 10%, #000 25%, transparent 75%); }
.h-hero .h-inner { padding-top: clamp(40px, 6vw, 96px); padding-bottom: clamp(40px, 5vw, 64px); }
.h-badge { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; font-family: var(--ob-font-mono); font-size: 11.5px; letter-spacing: .08em; color: var(--ob-accent-hover); border: 1px solid rgba(52, 211, 153, .25); background: rgba(var(--ob-glass), .8); padding: 6px 12px; border-radius: 999px; text-transform: uppercase; }
.h-badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--ob-accent); animation: qpulse 1.8s infinite; }
.h-badge .h-shine { width: 30%; background: linear-gradient(90deg, transparent, rgba(52, 211, 153, .25), transparent); animation-duration: 4s; }
.h-h1 { font-family: var(--ob-font-display); font-weight: 300; font-size: clamp(44px, 7.4vw, 98px); line-height: 1; letter-spacing: -.03em; margin: 28px 0 0; max-width: 20ch; min-height: 2em; color: var(--ob-fg-1); }
.h-h1 em { font-style: italic; background: var(--ob-hero-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.h-h1__caret { display: inline-block; width: 3px; height: .8em; margin-left: 4px; vertical-align: -.05em; background: var(--ob-accent-hover); animation: qblink 1s infinite; }
.h-intro { font-size: clamp(16px, 1.6vw, 19px); color: var(--ob-fg-2); max-width: 640px; margin: 26px 0 0; text-wrap: pretty; }

.h-audit { margin-top: 40px; max-width: 820px; }
.h-audit .h-spot { box-shadow: var(--ob-shadow-glow); background: radial-gradient(380px circle at var(--mx, -999px) var(--my, -999px), rgba(52, 211, 153, .6), transparent 45%), var(--ob-line-3); }
.h-audit__box { border-radius: 15px; background: rgba(var(--ob-glass), .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); padding: 8px; }
.h-audit__row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.h-audit__field { position: relative; overflow: hidden; flex: 1 1 300px; display: flex; align-items: center; gap: 10px; background: var(--ob-well); border: 1px solid var(--ob-line-4); border-radius: 10px; padding: 0 14px; min-height: 52px; margin: 0; }
.h-audit__field input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: var(--ob-fg-1); font-family: var(--ob-font-mono); font-size: 14px; }
.h-audit__field input::placeholder { color: var(--ob-fg-3); }
.h-audit__scan { position: absolute; top: 0; bottom: 0; width: 35%; background: linear-gradient(90deg, transparent, rgba(16, 185, 129, .18) 70%, rgba(110, 231, 183, .55) 97%, transparent); border-right: 2px solid var(--ob-accent-soft); box-shadow: 6px 0 22px rgba(52, 211, 153, .7); animation: qscan 1.05s cubic-bezier(.5, 0, .5, 1) infinite; pointer-events: none; }
.h-audit__go { position: relative; overflow: hidden; flex: 0 0 auto; display: flex; align-items: center; gap: 8px; background: var(--ob-accent); color: var(--ob-accent-ink); border: 0; border-radius: 10px; padding: 0 20px; min-height: 52px; font-family: inherit; font-weight: 600; font-size: 15px; cursor: pointer; }
.h-audit__go:hover { background: var(--ob-accent-hover); }
.h-audit__go:active { background: var(--ob-accent-press); }
.h-audit__go .h-shine { animation-duration: 3.2s; }
.h-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 8px; margin-top: 8px; animation: qin .3s ease-out; }
.h-results[hidden] { display: none !important; }
.h-well { background: var(--ob-well); border: 1px solid var(--ob-line-2); border-radius: 10px; padding: 14px 16px; }
.h-pipeline { display: flex; flex-direction: column; gap: 10px; font-family: var(--ob-font-mono); font-size: 12.5px; }
.h-pipeline__head { display: flex; justify-content: space-between; gap: 10px; color: var(--ob-fg-3); font-size: 11px; letter-spacing: .06em; }
.h-step { display: flex; align-items: center; gap: 10px; color: var(--ob-fg-3); transition: color .2s; }
.h-step__icon { flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%; border: 1px dashed var(--ob-fg-4); display: flex; align-items: center; justify-content: center; }
.h-step__icon svg { display: none; }
.h-step.is-active { color: var(--ob-warn); }
.h-step.is-active .h-step__icon { border: 2px solid rgba(245, 158, 11, .25); border-top-color: var(--ob-warn); animation: qspin .7s linear infinite; }
.h-step.is-done { color: var(--ob-fg-1); }
.h-step.is-done .h-step__icon { border: 0; background: rgba(16, 185, 129, .18); color: var(--ob-accent-hover); }
.h-step.is-done .h-step__icon svg { display: block; }
.h-step__meta { margin-left: auto; color: var(--ob-fg-3); opacity: 0; transition: opacity .2s; }
.h-step.is-done .h-step__meta { opacity: 1; }
.h-counts { display: flex; flex-wrap: wrap; gap: 4px 12px; padding-top: 8px; border-top: 1px dashed var(--ob-line-2); font-size: 11.5px; animation: qin .3s; }
.h-counts[hidden] { display: none; }
.h-scorebox { display: flex; align-items: center; gap: 18px; }
.h-ring { position: relative; width: 84px; height: 84px; flex: 0 0 auto; }
.h-ring svg { transform: rotate(-90deg); }
.h-ring__arc { stroke: var(--ob-accent); stroke-dasharray: 213.6; transition: stroke .4s; filter: drop-shadow(0 0 6px rgba(16, 185, 129, .6)); }
.h-ring__value { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--ob-font-mono); line-height: 1; }
.h-ring__value b { font-size: 22px; font-weight: 500; color: var(--ob-fg-1); }
.h-ring__value small { font-size: 10px; color: var(--ob-fg-3); margin-top: 3px; }
.h-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.h-pill { font-family: var(--ob-font-mono); font-size: 11px; padding: 3px 8px; border-radius: 999px; transition: all .4s; color: var(--ob-warn); background: var(--ob-warn-tint); border: 1px solid var(--ob-warn-border); }
.h-pill--g { color: var(--ob-accent-hover); background: rgba(16, 185, 129, .1); border-color: var(--ob-accent-border); }
.h-pill--r { color: var(--ob-danger); background: var(--ob-danger-tint); border-color: var(--ob-danger-border); }
.h-pill--n { color: var(--ob-fg-2); background: transparent; border-color: var(--ob-fg-4); }
.h-pill--d { color: var(--ob-fg-2); background: transparent; border: 1px dashed var(--ob-fg-4); }
.h-results.is-running .h-pill { color: var(--ob-warn); background: var(--ob-warn-tint); border-color: var(--ob-warn-border); }
.h-try { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; font-family: var(--ob-font-mono); font-size: 12px; }
.h-try button { background: rgba(var(--ob-glass), .7); border: 1px solid var(--ob-line-4); color: var(--ob-fg-2); border-radius: 999px; padding: 5px 12px; font-family: inherit; font-size: 12px; cursor: pointer; transition: all .15s; }
.h-try button:hover { border-color: var(--ob-accent); color: var(--ob-fg-1); background: var(--ob-accent-tint); }
.h-note { margin: 12px 0 0; font-family: var(--ob-font-mono); font-size: 12px; color: var(--ob-fg-3); max-width: 820px; }
.h-note a { color: var(--ob-accent-hover); }
.h-stats { margin-top: 56px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); border-top: 1px solid var(--ob-line-2); border-bottom: 1px solid var(--ob-line-2); }
.h-stats > div { padding: 20px 0; display: flex; flex-direction: column; gap: 2px; }
.h-stats b { font-family: var(--ob-font-display); font-weight: 300; font-size: clamp(34px, 4vw, 46px); line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ob-fg-1); }
.h-stats b em { color: var(--ob-accent-hover); font-style: italic; }


/* Integration beams */
.h-beams { position: relative; height: 300px; margin-top: 40px; }
.h-beams > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.h-beams__base { fill: none; stroke: var(--ob-line-3); stroke-width: 1.5; }
.h-beams__flow { fill: none; stroke: var(--ob-accent-hover); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 46 474; filter: drop-shadow(0 0 4px rgba(52, 211, 153, .9)); }
.h-beams__flow path { animation: qdash 2.6s linear infinite; }
.h-beams__col { position: absolute; top: 0; bottom: 0; width: 20%; display: flex; flex-direction: column; justify-content: space-between; padding: 32px 0; }
.h-beams__col--l { left: 0; }
.h-beams__col--r { right: 0; }
.h-chip { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid var(--ob-line-3); border-radius: 9px; background: rgba(var(--ob-glass), .9); font-family: var(--ob-font-mono); font-size: 12.5px; color: var(--ob-fg-1); }
.h-node-wrap { position: absolute; left: 42%; width: 16%; top: 50%; transform: translateY(-50%); display: flex; justify-content: center; }
.h-node { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 18px; border: 1px solid rgba(52, 211, 153, .55); border-radius: 14px; background: var(--ob-accent-well); animation: qnode 3.2s ease-in-out infinite; text-align: center; }
.h-node::before { content: ''; position: absolute; inset: -1px; border-radius: 14px; border: 1px solid rgba(52, 211, 153, .6); animation: qring 2.4s ease-out infinite; }
.h-node b { font-weight: 600; font-size: 15px; color: var(--ob-fg-1); }
.h-node span { font-family: var(--ob-font-mono); font-size: 10.5px; color: var(--ob-fg-2); }
.h-runs { display: none; margin-top: 28px; flex-wrap: wrap; gap: 8px; font-family: var(--ob-font-mono); font-size: 12.5px; color: var(--ob-fg-2); }
.h-runs > p { width: 100%; margin: 0; color: var(--ob-fg-3); font-size: 11px; letter-spacing: .08em; }
.h-runs > span { border: 1px solid var(--ob-line-3); border-radius: 8px; padding: 6px 10px; }
@media (max-width: 819px) { .h-beams { display: none; } .h-runs { display: flex; } }

/* Sample feed marquee */
.h-feed { position: relative; border-bottom: 1px solid var(--ob-line-2); background: var(--ob-band); overflow: hidden; display: flex; align-items: center; }
.h-feed__label { position: relative; z-index: 2; flex: 0 0 auto; padding: 12px 16px; background: var(--ob-band); border-right: 1px solid var(--ob-line-2); font-family: var(--ob-font-mono); font-size: 11px; letter-spacing: .08em; color: var(--ob-fg-3); display: flex; align-items: center; gap: 8px; margin: 0; }
.h-feed__label i { width: 6px; height: 6px; border-radius: 50%; background: var(--ob-accent); animation: qpulse 1.4s infinite; }
.h-feed__mask { flex: 1; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.h-feed__track { display: flex; width: max-content; animation: qmarq 60s linear infinite; list-style: none; margin: 0; padding: 0; }
.h-feed__track li { display: flex; align-items: center; gap: 10px; padding: 12px 22px; border-right: 1px solid var(--ob-line-1); font-family: var(--ob-font-mono); font-size: 12px; white-space: nowrap; color: var(--ob-fg-2); }
.h-feed__track li b { color: var(--ob-fg-1); font-weight: 400; }
.h-feed__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.h-state { border-radius: 999px; padding: 1px 8px; font-size: 11px; border: 1px solid; }
.h-state--g { color: var(--ob-accent-hover); background: rgba(16, 185, 129, .1); border-color: var(--ob-accent-border); }
.h-state--r { color: var(--ob-danger); background: var(--ob-danger-tint); border-color: var(--ob-danger-border); }
.h-state--a { color: var(--ob-warn); background: var(--ob-warn-tint); border-color: var(--ob-warn-border); }

/* ---------------------------------------------------------------- 01 core loop */
.h-ide__box { border-radius: 15px; background: rgba(var(--ob-glass), .94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); overflow: hidden; }
.h-ide__bar { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--ob-line-2); background: var(--ob-surface-1); flex-wrap: wrap; }
.h-dots { display: flex; gap: 7px; }
.h-dots i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.h-dots i:nth-child(2) { background: #febc2e; }
.h-dots i:nth-child(3) { background: #28c840; }
.h-branch { display: inline-flex; align-items: center; gap: 6px; font-family: var(--ob-font-mono); font-size: 11.5px; color: var(--ob-accent-hover); background: var(--ob-accent-tint); border: 1px solid rgba(16, 185, 129, .25); padding: 3px 9px; border-radius: 999px; }
.h-ide__meta { margin-left: auto; font-family: var(--ob-font-mono); font-size: 11.5px; color: var(--ob-fg-3); }
.h-tabs-wrap { padding: 14px 16px 0; }
.h-tabs { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--ob-well); border: 1px solid var(--ob-line-2); border-radius: 12px; padding: 4px; }
.h-tabs__ind { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(25% - 8px); border-radius: 9px; background: var(--ob-surface-3); border: 1px solid var(--ob-accent-border); box-shadow: 0 0 20px -6px rgba(16, 185, 129, .5); transition: left .35s cubic-bezier(.3, 1.3, .5, 1); }
.h-tab { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; padding: 10px 8px; background: transparent; border: 0; color: var(--ob-fg-2); font-family: var(--ob-font-mono); font-size: 12.5px; cursor: pointer; white-space: nowrap; transition: color .2s; }
.h-tab span:first-child { color: var(--ob-fg-3); transition: color .2s; }
.h-tab span:last-child { overflow: hidden; text-overflow: ellipsis; }
.h-tab[aria-selected="true"] { color: var(--ob-fg-1); }
.h-tab[aria-selected="true"] span:first-child { color: var(--ob-accent-hover); }
.h-tab .h-tab__short { display: none; }
@media (max-width: 639px) { .h-tab .h-tab__long { display: none; } .h-tab .h-tab__short { display: inline; } }
.h-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); animation: qin .3s ease-out; }
.h-panel[hidden] { display: none; }
.h-panel__text { padding: 28px; }
.h-panel__text p { color: var(--ob-fg-2); margin: 0 0 18px; }
.h-panel__wide { grid-column: span 2; min-width: 0; margin: 14px; }
@media (max-width: 700px) { .h-panel__wide { grid-column: auto; } }
.h-kv { display: flex; flex-direction: column; gap: 8px; font-family: var(--ob-font-mono); font-size: 12px; list-style: none; margin: 0; padding: 0; }
.h-kv li { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--ob-line-2); padding-top: 8px; color: var(--ob-fg-1); }
.h-kv li span:first-child { color: var(--ob-fg-2); }
.h-code { background: var(--ob-well); border: 1px solid var(--ob-line-2); border-radius: 10px; overflow-x: auto; }
.h-code--dark { background: var(--ob-inset); }
.h-code__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--ob-line-2); font-family: var(--ob-font-mono); font-size: 12px; color: var(--ob-fg-2); }
.h-code__head--btn { padding: 7px 8px 7px 14px; }
.h-json { padding: 12px 0 80px; font-family: var(--ob-font-mono); font-size: 13px; line-height: 1.85; min-width: 600px; width: max-content; margin: 0; white-space: pre; background: transparent; border: 0; color: var(--ob-fg-2); overflow: visible; }
.h-json > span { display: block; position: relative; padding-right: 16px; transition: background .12s; z-index: 1; white-space: pre; color: var(--ob-fg-2); }
.h-json > span[data-tip] { cursor: help; }
.h-json > span.is-on { background: var(--ob-accent-tint); box-shadow: inset 2px 0 0 var(--ob-accent); z-index: 4; }
.h-json__no { display: inline-block; width: 36px; text-align: right; padding-right: 14px; color: var(--ob-fg-4); user-select: none; }
.h-json__p { color: var(--ob-fg-3); }
.h-json__v { color: var(--ob-accent-soft); }
.h-json__w { color: var(--ob-warn); }
.h-json__e { color: var(--ob-danger); }
.h-json__i { color: var(--ob-fg-2); }
.h-tip { position: absolute; left: 52px; top: calc(100% + 4px); z-index: 5; max-width: 400px; background: var(--ob-surface-3); border: 1px solid rgba(52, 211, 153, .4); border-radius: 8px; padding: 9px 12px; font-family: var(--ob-font-ui); font-size: 12.5px; line-height: 1.5; color: var(--ob-fg-1); box-shadow: 0 16px 40px -12px rgba(var(--ob-shade), calc(.8 * var(--ob-shade-k))); animation: qin .15s ease-out; white-space: normal; }
.h-tags { display: flex; flex-wrap: wrap; gap: 6px; font-family: var(--ob-font-mono); font-size: 11.5px; }
.h-tags span { color: var(--ob-fg-1); border: 1px solid var(--ob-line-4); padding: 3px 8px; border-radius: 5px; }
.h-tags .is-bad { color: var(--ob-danger); background: var(--ob-danger-tint); border-color: rgba(239, 68, 68, .3); }
.h-tags .is-dim { color: var(--ob-fg-2); }
.h-stack { display: flex; flex-direction: column; gap: 12px; }
.h-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.h-row > b { font-weight: 600; font-size: 15px; color: var(--ob-fg-1); }
.h-seg { display: flex; background: var(--ob-well); border: 1px solid var(--ob-line-2); border-radius: 8px; padding: 3px; font-family: var(--ob-font-mono); font-size: 12px; }
.h-seg button { background: transparent; color: var(--ob-fg-2); border: 0; border-radius: 6px; padding: 5px 10px; font-family: var(--ob-font-mono); font-size: 12px; cursor: pointer; transition: all .15s; }
.h-seg button[aria-pressed="true"] { background: var(--ob-line-2); color: var(--ob-fg-1); }
.h-diff-wrap { overflow-x: auto; padding: 8px 0; }\n.h-diff { margin: 0; white-space: pre; background: transparent; border: 0; overflow: visible; }
.h-diff > span { display: block; font-family: var(--ob-font-mono); font-size: 13px; line-height: 1.9; white-space: pre; padding-right: 16px; color: var(--ob-fg-1); animation: qin .2s ease-out; }
.h-diff > span[data-sign=" "] { color: var(--ob-fg-2); }
.h-diff[data-mode="diff"] > span[data-sign="-"] { background: var(--ob-danger-tint); box-shadow: inset 2px 0 0 var(--ob-danger); }
.h-diff[data-mode="diff"] > span[data-sign="+"] { background: rgba(16, 185, 129, .1); box-shadow: inset 2px 0 0 var(--ob-accent); }
.h-diff[data-mode="before"] > span[data-sign="+"], .h-diff[data-mode="after"] > span[data-sign="-"] { display: none; }
.h-diff__no { display: inline-block; width: 32px; text-align: right; padding-right: 10px; color: var(--ob-fg-4); user-select: none; }
.h-diff__sign { display: none; }
.h-diff[data-mode="diff"] .h-diff__sign { display: inline; }
.h-diff > span[data-sign="-"] .h-diff__sign { color: var(--ob-danger); }
.h-diff > span[data-sign="+"] .h-diff__sign { color: var(--ob-accent-hover); }
.h-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--ob-line-2); border: 1px solid var(--ob-line-2); border-radius: 10px; overflow: hidden; font-family: var(--ob-font-mono); font-size: 12px; margin: 0; }
.h-facts > div { background: var(--ob-well); padding: 12px 14px; }
.h-facts dt { color: var(--ob-fg-3); font-weight: 400; text-transform: uppercase; }
.h-facts dd { font-size: 15px; margin: 2px 0 0; color: var(--ob-fg-1); }
.h-btn-cursor { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 7px; background: var(--ob-accent); color: var(--ob-accent-ink); border: 0; border-radius: 7px; padding: 7px 12px; font-family: var(--ob-font-ui); font-weight: 600; font-size: 13px; cursor: pointer; }
.h-btn-cursor:hover { background: var(--ob-accent-hover); }
.h-btn-cursor:active { background: var(--ob-accent-press); }
.h-ripple { position: absolute; width: 220px; height: 220px; border-radius: 50%; background: rgba(255, 255, 255, .55); pointer-events: none; animation: qripple .6s ease-out forwards; }
.h-pre { margin: 0; padding: 18px 20px; font-family: var(--ob-font-mono); font-size: 13px; line-height: 1.75; color: var(--ob-fg-1); white-space: pre-wrap; overflow-wrap: anywhere; background: transparent; border: 0; }
.h-pre .h-k { color: var(--ob-accent-hover); }
.h-ghost { display: inline-flex; align-items: center; gap: 7px; background: transparent; border: 1px solid var(--ob-line-4); color: var(--ob-fg-1); border-radius: 7px; padding: 7px 12px; font-family: var(--ob-font-mono); font-size: 12px; cursor: pointer; }
.h-ghost:hover { border-color: var(--ob-accent); }
.h-copy { background: transparent; color: var(--ob-fg-1); border: 1px solid var(--ob-line-4); border-radius: 6px; padding: 3px 9px; font-family: var(--ob-font-mono); font-size: 11.5px; cursor: pointer; transition: all .15s; }
.h-copy.is-copied { background: var(--ob-accent-tint-2); color: var(--ob-accent-hover); border-color: rgba(16, 185, 129, .45); }
.h-term { padding: 16px 18px; min-height: 270px; font-family: var(--ob-font-mono); font-size: 12.5px; line-height: 1.95; overflow-x: auto; margin: 0; white-space: pre; background: transparent; border: 0; color: var(--ob-fg-2); }
.h-term > span:not(.h-cursor) { display: block; animation: qin .25s ease-out; }
.h-live { display: flex; align-items: center; gap: 6px; }
.h-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--ob-accent); animation: qpulse 1.4s infinite; }

/* ---------------------------------------------------------------- 02 rule states */
.h-states { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 10px; list-style: none; margin: 0; padding: 0; }
.h-states li { border: 1px solid var(--ob-line-3); border-radius: 12px; background: rgba(var(--ob-glass), .9); padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.h-states .h-pill { align-self: flex-start; font-size: 13px; padding: 3px 10px; }
.h-states li > span:last-child { color: var(--ob-fg-2); font-size: 14px; line-height: 1.5; }
.h-score-grid { margin-top: 14px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 14px; }
.h-formula { border: 1px solid var(--ob-line-3); border-radius: 14px; background: var(--ob-inset); padding: 24px; font-family: var(--ob-font-mono); font-size: 13px; line-height: 1.9; }
.h-formula__main { font-size: clamp(15px, 1.8vw, 19px); color: var(--ob-fg-1); }
.h-formula__weights { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; color: var(--ob-fg-2); }
.h-formula__weights b { color: var(--ob-fg-1); font-weight: 400; }
.h-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 420px) { .h-pair { grid-template-columns: 1fr; } }
.h-outcome { border: 1px solid var(--ob-line-5); border-radius: 14px; background: var(--ob-surface-1); padding: 20px; display: flex; flex-direction: column; gap: 6px; }
.h-outcome--ok { border-color: var(--ob-accent-border); background: rgba(16, 185, 129, .05); }
.h-outcome b { font-family: var(--ob-font-display); font-size: 52px; font-weight: 300; line-height: 1; color: var(--ob-fg-1); }
.h-outcome--null b { color: var(--ob-fg-2); font-style: italic; }
.h-outcome span { font-family: var(--ob-font-mono); font-size: 11.5px; }
.h-outcome small { font-size: 13px; color: var(--ob-fg-2); }

/* ---------------------------------------------------------------- 03 architecture */
.h-bento { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: 14px; }
.h-bento > .h-full { grid-column: 1 / -1; }
.h-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); overflow: hidden; }
.h-group__text { padding: 32px; }
.h-group__text .h-h3 { font-size: clamp(26px, 3vw, 38px); line-height: 1.1; margin: 12px 0 14px; }
.h-group__text p { color: var(--ob-fg-2); margin: 0; max-width: 440px; }
.h-group__viz { padding: 28px; display: flex; flex-direction: column; align-items: center; background: radial-gradient(circle at 50% 0%, rgba(16, 185, 129, .08), transparent 70%); }
.h-group__node { font-family: var(--ob-font-mono); font-size: 12px; border: 1px solid rgba(16, 185, 129, .6); background: var(--ob-accent-well); color: var(--ob-fg-1); padding: 9px 14px; border-radius: 9px; animation: qnode 4s ease-in-out infinite; display: flex; align-items: center; gap: 8px; }
.h-group__node i { width: 7px; height: 7px; border-radius: 50%; background: var(--ob-accent); }
.h-group__wire { width: 2px; height: 30px; background-image: linear-gradient(var(--ob-accent-hover) 50%, transparent 50%); background-size: 2px 8px; animation: qflow .8s linear infinite; }
.h-group__pages { width: 100%; max-width: 420px; border: 1px solid var(--ob-line-2); border-radius: 10px; padding: 14px; background: var(--ob-well); }
.h-tree { display: grid; grid-template-columns: repeat(20, 1fr); gap: 5px; }
.h-tree i { aspect-ratio: 1; border-radius: 3px; background: var(--ob-danger-well); animation: qdot 4s ease-in-out infinite; }
.h-group__foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; font-family: var(--ob-font-mono); font-size: 11.5px; color: var(--ob-fg-2); }
.h-card { padding: 26px; display: flex; flex-direction: column; gap: 18px; }
.h-card > div:first-child p { margin: 10px 0 0; color: var(--ob-fg-2); }
.h-card > div:first-child p b { color: var(--ob-fg-1); font-weight: 400; }
.h-card__foot { margin-top: auto; }
.h-pr { border: 1px solid var(--ob-line-4); border-radius: 10px; background: var(--ob-well); font-size: 13px; overflow: hidden; }
.h-pr__head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--ob-line-2); }
.h-pr__icon { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(245, 158, 11, .25); border-top-color: var(--ob-warn); animation: qspin .8s linear infinite; display: flex; align-items: center; justify-content: center; }
.h-pr__icon svg { display: none; }
.h-pr.is-done .h-pr__icon { animation: none; border: 0; background: var(--ob-accent); color: var(--ob-accent-ink); }
.h-pr.is-done .h-pr__icon svg { display: block; }
.h-pr__title { font-weight: 600; font-size: 13.5px; color: var(--ob-fg-1); transition: color .3s; }
.h-pr.is-done .h-pr__title { color: var(--ob-accent-hover); }
.h-pr__sub { font-family: var(--ob-font-mono); font-size: 11px; color: var(--ob-fg-3); }
.h-pr ul { list-style: none; margin: 0; padding: 0; }
.h-pr li { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--ob-line-1); font-family: var(--ob-font-mono); font-size: 12px; color: var(--ob-fg-1); }
.h-pr li > span:last-child { margin-left: auto; color: var(--ob-fg-3); }
.h-check { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(245, 158, 11, .25); border-top-color: var(--ob-warn); animation: qspin .7s linear infinite; display: flex; color: var(--ob-accent-hover); }
.h-check svg { display: none; }
.h-pr li.is-done .h-check { animation: none; border: 0; }
.h-pr li.is-done .h-check svg { display: block; }
.h-merge { margin: 10px 14px; text-align: left; font-size: 13px; font-weight: 600; padding: 8px 12px; border-radius: 7px; transition: all .3s; background: var(--ob-surface-3); color: var(--ob-fg-3); border: 1px solid var(--ob-line-4); }
.h-pr.is-done .h-merge { background: var(--ob-accent); color: var(--ob-accent-ink); border-color: var(--ob-accent); }
.h-cfg { padding: 12px; font-family: var(--ob-font-mono); font-size: 12px; line-height: 1.8; overflow-x: auto; margin: 0; white-space: pre; color: var(--ob-fg-2); background: transparent; border: 0; }
.h-myths { border: 1px solid var(--ob-line-4); border-radius: 10px; background: var(--ob-well); overflow: hidden; font-size: 12.5px; width: 100%; border-collapse: collapse; }
.h-myths th { padding: 8px 12px; border-bottom: 1px solid var(--ob-line-2); font-family: var(--ob-font-mono); font-size: 10.5px; letter-spacing: .06em; color: var(--ob-fg-3); font-weight: 400; text-align: left; text-transform: uppercase; }
.h-myths td { padding: 9px 12px; border-bottom: 1px solid var(--ob-line-1); vertical-align: top; width: 50%; }
.h-myths tr { transition: background .15s; }
.h-myths tbody tr:hover { background: rgba(16, 185, 129, .07); }
.h-myths del { color: var(--ob-fg-2); text-decoration-color: rgba(239, 68, 68, .6); }
.h-myths td:last-child { color: var(--ob-fg-1); }
.h-myths td small { display: block; font-family: var(--ob-font-mono); font-size: 10.5px; color: var(--ob-accent-hover); }

/* ---------------------------------------------------------------- 04 inferred contract */
.h-box { border: 1px solid var(--ob-line-3); border-radius: 16px; background: rgba(var(--ob-glass), .94); overflow: hidden; }
.h-box__head { display: flex; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--ob-line-2); font-family: var(--ob-font-mono); font-size: 12px; color: var(--ob-fg-2); flex-wrap: wrap; }
.h-prop { padding: 14px 16px; border-bottom: 1px solid var(--ob-line-1); display: flex; flex-direction: column; gap: 8px; }
.h-prop__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--ob-font-mono); font-size: 12.5px; color: var(--ob-fg-1); }
.h-prop__btns { display: flex; gap: 6px; }
.h-prop__btns button { background: transparent; color: var(--ob-fg-2); border: 1px solid var(--ob-line-4); border-radius: 6px; padding: 3px 10px; font-family: var(--ob-font-mono); font-size: 11.5px; cursor: pointer; transition: all .15s; }
.h-prop__btns button[data-decide="a"][aria-pressed="true"] { background: var(--ob-accent-hover); border-color: var(--ob-accent-hover); color: var(--ob-accent-ink); }
.h-prop__btns button[data-decide="r"][aria-pressed="true"] { background: var(--ob-fg-2); border-color: var(--ob-fg-2); color: var(--ob-accent-ink); }
.h-bar { height: 4px; border-radius: 2px; background: var(--ob-line-2); overflow: hidden; }
.h-bar i { display: block; height: 100%; background: linear-gradient(90deg, #065f46, #34d399); box-shadow: 0 0 8px rgba(16, 185, 129, .5); transition: width 1.3s cubic-bezier(.2, .7, .2, 1), background .3s; }
.h-prop.is-a .h-bar i { background: var(--ob-accent); }
.h-prop.is-r .h-bar i { background: var(--ob-fg-4); box-shadow: none; }
.h-prop__meta { display: flex; justify-content: space-between; gap: 10px; font-family: var(--ob-font-mono); font-size: 11px; color: var(--ob-fg-3); flex-wrap: wrap; }

/* ---------------------------------------------------------------- 05 AI suggestions */
.h-numbered { display: flex; flex-direction: column; font-size: 14px; list-style: none; margin: 0; padding: 0; counter-reset: h; }
.h-numbered li { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid var(--ob-line-2); color: var(--ob-fg-1); }
.h-numbered li:last-child { border-bottom: 1px solid var(--ob-line-2); }
.h-numbered li::before { counter-increment: h; content: counter(h, decimal-leading-zero); font-family: var(--ob-font-mono); color: var(--ob-fg-3); font-size: 12px; }
.h-ai-first { order: 2; }
.h-ai-second { order: 1; }
.h-ai__tag { color: var(--ob-accent-soft); border: 1px dashed rgba(52, 211, 153, .4); padding: 0 7px; border-radius: 4px; font-size: 11px; }
.h-ai__body { padding: 18px 16px; display: flex; flex-direction: column; gap: 12px; }
.h-ai__text { font-family: var(--ob-font-display); font-size: 24px; line-height: 1.2; color: var(--ob-fg-1); min-height: 58px; margin: 0; }
.h-ai__checks { display: flex; flex-direction: column; border: 1px solid var(--ob-line-2); border-radius: 10px; background: var(--ob-well); font-family: var(--ob-font-mono); font-size: 12px; list-style: none; margin: 0; padding: 0; }
.h-ai__checks li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--ob-line-1); color: var(--ob-fg-3); transition: color .25s; }
.h-ai__checks li:last-child { border-bottom: 0; }
.h-ai__checks li > span:first-child { width: 14px; color: var(--ob-fg-4); }
.h-ai__checks li > span:last-child { margin-left: auto; color: var(--ob-fg-3); }
.h-ai__checks li.is-pass, .h-ai__checks li.is-fail { color: var(--ob-fg-1); }
.h-ai__checks li.is-pass > span:first-child { color: var(--ob-accent-hover); }
.h-ai__checks li.is-fail > span:first-child { color: var(--ob-danger); }
.h-verdict { font-family: var(--ob-font-mono); font-size: 12.5px; padding: 10px 12px; border-radius: 8px; transition: all .3s; color: var(--ob-fg-2); background: var(--ob-well); border: 1px solid var(--ob-line-2); margin: 0; }
.h-verdict.is-ok { color: var(--ob-accent-hover); background: var(--ob-accent-tint); border-color: var(--ob-accent-border); }
.h-verdict.is-bad { color: var(--ob-danger); background: rgba(239, 68, 68, .08); border-color: var(--ob-danger-border); }

/* ---------------------------------------------------------------- 06 attribution */
.h-builds-box { border: 1px solid var(--ob-line-3); border-radius: 16px; background: rgba(var(--ob-glass), .94); padding: clamp(18px, 3vw, 32px); overflow-x: auto; }
.h-builds { position: relative; min-width: 760px; padding-top: 6px; }
.h-builds__line, .h-builds__fill { position: absolute; left: 3%; top: 21px; height: 2px; }
.h-builds__line { right: 3%; background: var(--ob-line-2); }
.h-builds__fill { width: 0; background: linear-gradient(90deg, #10b981 0%, #10b981 36%, #ef4444 40%, #ef4444 70%, #10b981 76%, #10b981 100%); background-size: 1240px 2px; box-shadow: 0 0 8px rgba(16, 185, 129, .4); transition: width 2.2s cubic-bezier(.4, 0, .2, 1); }
.h-builds.is-on .h-builds__fill { width: 94%; }
.h-builds ol { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; list-style: none; margin: 0; padding: 0; }
.h-builds li { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.h-build__dot { position: relative; z-index: 1; width: 14px; height: 14px; border-radius: 50%; background: var(--ob-line-2); border: 3px solid var(--ob-surface-2); transition: background .3s, box-shadow .3s; }
.h-builds.is-on .h-build__dot { background: var(--ob-accent); }
.h-builds.is-on li[data-t="i"] .h-build__dot, .h-builds.is-on li[data-t="f"] .h-build__dot { background: var(--ob-danger); }
.h-builds.is-on li[data-t="i"] .h-build__dot { box-shadow: 0 0 0 4px rgba(239, 68, 68, .2), 0 0 16px rgba(239, 68, 68, .7); }
.h-builds.is-on li[data-t="r"] .h-build__dot { background: var(--ob-accent-hover); }
.h-build__card { width: 100%; padding: 10px 8px; border-radius: 10px; border: 1px solid var(--ob-line-3); background: var(--ob-surface-1); }
li[data-t="i"] .h-build__card { border-color: rgba(239, 68, 68, .45); background: rgba(239, 68, 68, .06); }
.h-build__card b { display: block; font-family: var(--ob-font-mono); font-size: 12px; font-weight: 400; color: var(--ob-fg-1); }
.h-build__card small { display: block; font-family: var(--ob-font-mono); font-size: 10.5px; color: var(--ob-fg-3); margin-top: 2px; }
.h-build__card span { margin-top: 8px; display: inline-block; font-family: var(--ob-font-mono); font-size: 10.5px; color: var(--ob-fg-2); border: 1px solid var(--ob-line-4); border-radius: 999px; padding: 1px 8px; }
li[data-t="i"] .h-build__card span, li[data-t="f"] .h-build__card span { color: var(--ob-danger); }
li[data-t="r"] .h-build__card span { color: var(--ob-accent-hover); }
.h-builds__note { margin: 24px 0 0; padding-top: 16px; border-top: 1px solid var(--ob-line-2); display: flex; flex-wrap: wrap; gap: 8px 24px; font-family: var(--ob-font-mono); font-size: 12px; color: var(--ob-fg-2); }

/* ---------------------------------------------------------------- 07 CLI */
.h-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 14px; }
.h-shell { background: var(--ob-inset); border: 1px solid var(--ob-line-3); border-radius: 14px; overflow: hidden; min-width: 0; }
.h-shell__head { display: flex; justify-content: space-between; align-items: center; padding: 9px 10px 9px 14px; border-bottom: 1px solid var(--ob-line-2); font-family: var(--ob-font-mono); font-size: 11.5px; color: var(--ob-fg-3); }
.h-shell__body { padding: 16px; font-family: var(--ob-font-mono); font-size: 12.5px; line-height: 1.9; overflow-x: auto; margin: 0; white-space: pre; background: transparent; border: 0; color: var(--ob-fg-1); }
.h-shell__body > span { display: block; }
.h-exit { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ob-line-2); font-family: var(--ob-font-mono); font-size: 11.5px; margin: 0; }
.h-exit > div { padding: 12px 14px; border-right: 1px solid var(--ob-line-2); }
.h-exit > div:last-child { border-right: 0; }
.h-exit dt { font-size: 16px; font-weight: 400; }
.h-exit dd { color: var(--ob-fg-2); margin: 0; }
.h-yaml { padding: 16px; font-family: var(--ob-font-mono); font-size: 12.5px; line-height: 1.8; overflow-x: auto; margin: 0; white-space: pre; color: var(--ob-fg-2); background: transparent; border: 0; }
.h-yaml .h-soft { color: var(--ob-accent-soft); }

/* ---------------------------------------------------------------- 08 portfolio */
.h-sites { grid-column: span 2; min-width: 0; overflow-x: auto; }
@media (max-width: 700px) { .h-sites { grid-column: auto; } }
.h-sites table { min-width: 620px; width: 100%; border-collapse: collapse; }
.h-sites th { padding: 12px 18px; border-bottom: 1px solid var(--ob-line-2); font-family: var(--ob-font-mono); font-size: 10.5px; letter-spacing: .06em; color: var(--ob-fg-3); font-weight: 400; text-align: left; text-transform: uppercase; }
.h-sites td { padding: 13px 18px; border-bottom: 1px solid var(--ob-line-1); font-family: var(--ob-font-mono); font-size: 12.5px; color: var(--ob-fg-2); }
.h-sites td:first-child { color: var(--ob-fg-1); }
.h-sites tbody tr { transition: background .15s; }
.h-sites tbody tr:hover { background: rgba(var(--ob-ink), .025); }
.h-meter { display: flex; align-items: center; gap: 10px; padding-right: 16px; }
.h-meter > span { flex: 1; height: 4px; border-radius: 2px; background: var(--ob-line-2); overflow: hidden; }
.h-meter > span i { display: block; height: 100%; border-radius: 2px; background: var(--ob-accent); }
.h-meter > span i.is-a { background: var(--ob-warn); }
.h-meter > span i.is-r { background: var(--ob-danger); }
.h-meter > b { font-weight: 400; width: 44px; text-align: right; color: var(--ob-fg-1); }
.h-alert { border: 1px solid rgba(245, 158, 11, .3); border-radius: 16px; background: rgba(245, 158, 11, .04); padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.h-alert__label { font-family: var(--ob-font-mono); font-size: 11px; letter-spacing: .06em; color: var(--ob-warn); text-transform: uppercase; margin: 0; }
.h-alert__line { font-family: var(--ob-font-mono); font-size: 12.5px; background: var(--ob-well); border: 1px solid var(--ob-line-2); border-radius: 8px; padding: 10px 12px; color: var(--ob-fg-2); margin: 0; }
.h-alert__big { font-family: var(--ob-font-display); font-size: 40px; line-height: 1; font-weight: 300; color: var(--ob-fg-1); margin: 0; }
.h-alert__big em { font-size: 18px; color: var(--ob-fg-2); }
.h-alert > p:not([class]) { font-size: 13.5px; color: var(--ob-fg-2); margin: 0; }
.h-alert__btns { display: flex; gap: 8px; margin-top: auto; flex-wrap: wrap; }
.h-alert__btns a { background: var(--ob-surface-3); border: 1px solid var(--ob-line-4); color: var(--ob-fg-1); border-radius: 7px; padding: 7px 12px; font-size: 13px; }
.h-alert__btns a + a { background: transparent; color: var(--ob-fg-2); }

/* ---------------------------------------------------------------- 09 pack */
.h-dl { display: inline-flex; align-items: center; gap: 8px; background: var(--ob-surface-3); border: 1px solid rgba(52, 211, 153, .4); color: var(--ob-fg-1); border-radius: 9px; padding: 11px 16px; font-family: inherit; font-weight: 600; font-size: 14px; cursor: pointer; }
.h-dl:hover { border-color: var(--ob-accent-hover); background: var(--ob-accent-well); }
.h-papers { position: relative; height: 420px; }
.h-papers::before, .h-papers::after { content: ''; position: absolute; border-radius: 14px; }
.h-papers::before { inset: 28px 28px 0 0; border: 1px solid var(--ob-line-2); background: var(--ob-surface-1); transform: rotate(-3deg); }
.h-papers::after { inset: 14px; border: 1px solid var(--ob-line-3); background: var(--ob-surface-2); transform: rotate(-1.2deg); }
.h-papers__top { position: absolute; z-index: 1; inset: 0 28px 28px 28px; border: 1px solid var(--ob-line-4); border-radius: 14px; background: var(--ob-inset); overflow: hidden; box-shadow: 0 30px 80px -30px rgba(var(--ob-shade), calc(.9 * var(--ob-shade-k))); }
.h-papers__top .h-pre { font-size: 12px; padding: 14px 16px; color: var(--ob-fg-2); }
@media (max-width: 639px) { .h-papers__top .h-papers__pages { display: none; } }

/* ---------------------------------------------------------------- 10 SafeFetch */
.h-rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 1px; background: var(--ob-line-2); border: 1px solid var(--ob-line-2); border-radius: 14px; overflow: hidden; list-style: none; margin: 0; padding: 0; counter-reset: r; }
.h-rules li { background: var(--ob-surface-1); padding: 16px; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; line-height: 1.45; color: var(--ob-fg-1); }
.h-rules li::before { counter-increment: r; content: counter(r, decimal-leading-zero); font-family: var(--ob-font-mono); font-size: 11px; color: var(--ob-accent-hover); }
.h-col { display: flex; flex-direction: column; gap: 14px; }
.h-polite { border: 1px solid var(--ob-line-3); border-radius: 14px; background: rgba(var(--ob-glass), .94); padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.h-ua { font-family: var(--ob-font-mono); font-size: 12px; color: var(--ob-fg-1); background: var(--ob-well); border: 1px solid var(--ob-line-2); border-radius: 8px; padding: 8px 10px; overflow-wrap: anywhere; margin: 0; }
.h-chips { display: flex; flex-wrap: wrap; gap: 6px; font-family: var(--ob-font-mono); font-size: 11.5px; color: var(--ob-fg-2); list-style: none; margin: 0; padding: 0; }
.h-chips li { border: 1px solid var(--ob-line-4); border-radius: 999px; padding: 3px 10px; }

/* ---------------------------------------------------------------- 11 comparison */
.h-matrix { border: 1px solid var(--ob-line-3); border-radius: 16px; overflow-x: auto; background: rgba(var(--ob-glass), .9); }
.h-matrix table { min-width: 640px; width: 100%; border-collapse: collapse; }
.h-matrix th { padding: 18px 22px; font-family: var(--ob-font-mono); font-size: 12px; letter-spacing: .04em; color: var(--ob-fg-3); font-weight: 400; text-align: left; border-bottom: 1px solid var(--ob-line-3); text-transform: uppercase; }
.h-matrix td { padding: 16px 22px; border-bottom: 1px solid var(--ob-line-1); font-size: 14px; color: var(--ob-fg-1); vertical-align: top; }
.h-matrix .is-us { background: rgba(16, 185, 129, .07); border-left: 1px solid rgba(16, 185, 129, .3); border-right: 1px solid rgba(16, 185, 129, .3); color: var(--ob-accent-hover); font-family: var(--ob-font-mono); font-size: 12.5px; }
.h-matrix th.is-us { font-size: 12px; }
.h-matrix td:last-child { font-family: var(--ob-font-mono); font-size: 12.5px; color: var(--ob-fg-2); }
.h-matrix td a { color: var(--ob-fg-2); }
.h-matrix td a:hover { color: var(--ob-accent-hover); }
.h-matrix tbody tr { transition: background .15s; }
.h-matrix tbody tr:hover { background: rgba(var(--ob-ink), .02); }
.h-matrix__note { padding: 14px 22px; font-family: var(--ob-font-mono); font-size: 11.5px; color: var(--ob-fg-3); margin: 0; }
.h-scope { margin-top: 48px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 24px; align-items: start; }
.h-scope .h-h3 { font-size: 30px; line-height: 1.1; margin: 8px 0 0; }
.h-scope__list { grid-column: span 2; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 1px; background: var(--ob-line-2); border: 1px solid var(--ob-line-2); border-radius: 12px; overflow: hidden; list-style: none; margin: 0; padding: 0; }
@media (max-width: 700px) { .h-scope__list { grid-column: auto; } }
.h-scope__list li { background: var(--ob-surface-1); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.h-scope__list b { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 400; color: var(--ob-fg-1); }
.h-scope__list b::before { content: '\2205'; color: var(--ob-fg-3); font-family: var(--ob-font-mono); }
.h-scope__list span { font-size: 12.5px; color: var(--ob-fg-2); }

/* ---------------------------------------------------------------- 12 pricing */
.h-pricing-aurora { position: absolute; top: -200px; left: 50%; width: 1200px; height: 700px; background: radial-gradient(circle at 50% 0%, rgba(16, 185, 129, .1), transparent 62%); animation: qaurora 16s ease-in-out infinite alternate; pointer-events: none; }
.h-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; perspective: 1200px; }
.h-plan { height: 100%; }
.h-plan .h-spot { height: 100%; background: radial-gradient(360px circle at var(--mx, -999px) var(--my, -999px), rgba(52, 211, 153, .6), transparent 45%), var(--ob-line-3); }
.h-plan--featured .h-spot { background: radial-gradient(360px circle at var(--mx, -999px) var(--my, -999px), rgba(52, 211, 153, .6), transparent 45%), linear-gradient(180deg, rgba(52, 211, 153, .7), var(--ob-line-3) 70%); box-shadow: 0 30px 80px -40px rgba(16, 185, 129, .6); }
.h-plan .h-spot__in { background: radial-gradient(400px circle at var(--mx, -999px) var(--my, -999px), rgba(16, 185, 129, .07), transparent 45%), rgba(var(--ob-glass), .95); padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.h-plan__name { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.h-plan__name h3 { font-weight: 600; font-size: 15px; margin: 0; color: var(--ob-fg-1); font-family: var(--ob-font-ui); }
.h-plan__badge { font-family: var(--ob-font-mono); font-size: 10.5px; color: var(--ob-fg-2); border: 1px solid var(--ob-line-4); border-radius: 999px; padding: 2px 8px; }
.h-plan--featured .h-plan__badge { color: var(--ob-accent-ink); background: var(--ob-accent-hover); border: 0; }
.h-plan__price { margin: 0; }
.h-plan__price b { font-family: var(--ob-font-display); font-size: 46px; font-weight: 300; line-height: 1; color: var(--ob-fg-1); }
.h-plan__price span { color: var(--ob-fg-3); font-size: 13px; }
.h-plan dl { display: flex; flex-direction: column; font-size: 13px; margin: 0; }
.h-plan dl > div { display: flex; justify-content: space-between; gap: 8px; padding: 7px 0; border-top: 1px solid var(--ob-line-2); }
.h-plan dt { color: var(--ob-fg-2); font-weight: 400; }
.h-plan dd { font-family: var(--ob-font-mono); font-size: 12.5px; margin: 0; color: var(--ob-fg-1); }
.h-plan__cta { margin-top: auto; text-align: left; font-weight: 600; font-size: 14px; padding: 10px 14px; border-radius: 8px; background: var(--ob-surface-3); color: var(--ob-fg-1); border: 1px solid var(--ob-line-4); }
.h-plan--featured .h-plan__cta { background: var(--ob-accent); color: var(--ob-accent-ink); border-color: var(--ob-accent); }
.h-plan__cta:hover { color: var(--ob-fg-1); border-color: var(--ob-accent); }
.h-plan--featured .h-plan__cta:hover { color: var(--ob-accent-ink); background: var(--ob-accent-hover); }
.h-under { margin: 18px 0 0; font-family: var(--ob-font-mono); font-size: 12px; color: var(--ob-fg-3); }
.h-under a { color: var(--ob-accent-hover); }

/* ---------------------------------------------------------------- 13 tools */
.h-more { font-family: var(--ob-font-mono); font-size: 13px; color: var(--ob-fg-2); }
.h-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.h-tool { display: block; height: 100%; border-radius: 14px; padding: 1px; color: var(--ob-fg-1); background: radial-gradient(300px circle at var(--mx, -999px) var(--my, -999px), rgba(52, 211, 153, .6), transparent 50%), var(--ob-line-3); }
.h-tool:hover { color: var(--ob-fg-1); }
.h-tool > div { height: 100%; border-radius: 13px; background: radial-gradient(360px circle at var(--mx, -999px) var(--my, -999px), rgba(16, 185, 129, .07), transparent 50%), rgba(var(--ob-glass), .95); padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.h-tool__cmd { display: flex; justify-content: space-between; align-items: center; font-family: var(--ob-font-mono); font-size: 11px; color: var(--ob-fg-3); }
.h-tool__cmd span:last-child { color: var(--ob-accent-hover); }
.h-tool h3 { font-weight: 600; font-size: 16px; line-height: 1.3; margin: 0; font-family: var(--ob-font-ui); color: var(--ob-fg-1); }
.h-tool p { color: var(--ob-fg-2); font-size: 14px; line-height: 1.5; margin: 0; }

/* ---------------------------------------------------------------- 14 FAQ */
.h-faq { grid-column: span 2; min-width: 0; display: flex; flex-direction: column; border-top: 1px solid var(--ob-line-2); }
@media (max-width: 700px) { .h-faq { grid-column: auto; } }
.h-faq details { border-bottom: 1px solid var(--ob-line-2); }
.h-faq summary { list-style: none; width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; cursor: pointer; }
.h-faq summary::-webkit-details-marker { display: none; }
.h-faq summary h3 { margin: 0; font-weight: 500; font-size: 17px; line-height: 1.35; color: var(--ob-fg-1); font-family: var(--ob-font-ui); }
.h-faq summary::after { content: '+'; flex: 0 0 auto; font-family: var(--ob-font-mono); font-size: 20px; line-height: 1; color: var(--ob-fg-2); transition: transform .25s, color .25s; }
.h-faq details[open] summary::after { transform: rotate(45deg); color: var(--ob-accent-hover); }
.h-faq details p { margin: 0 0 20px; color: var(--ob-fg-2); max-width: 680px; animation: qin .25s ease-out; }

/* ---------------------------------------------------------------- CTA */
.h-start-aurora { position: absolute; bottom: -300px; left: 50%; width: 1200px; height: 700px; background: radial-gradient(circle at 50% 100%, rgba(16, 185, 129, .14), transparent 62%); animation: qaurora 16s ease-in-out infinite alternate; pointer-events: none; }
.h-start .h-spot { border-radius: 20px; background: radial-gradient(600px circle at var(--mx, -999px) var(--my, -999px), rgba(52, 211, 153, .5), transparent 45%), var(--ob-line-3); box-shadow: 0 50px 140px -60px rgba(16, 185, 129, .5); }
.h-start__in { border-radius: 19px; background: rgba(var(--ob-glass), .92); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); padding: clamp(28px, 5vw, 64px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 40px; align-items: center; }
.h-start h2 { font-family: var(--ob-font-display); font-weight: 300; font-size: clamp(36px, 5vw, 66px); line-height: 1; letter-spacing: -.03em; margin: 0; color: var(--ob-fg-1); }
.h-start h2 em { font-style: italic; color: var(--ob-accent-hover); }
.h-start__row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 30px; }
.h-start__row > span { font-family: var(--ob-font-mono); font-size: 12px; color: var(--ob-fg-2); }
.h-cta { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; background: var(--ob-accent); color: var(--ob-accent-ink); font-weight: 600; padding: 13px 22px; border-radius: 9px; box-shadow: 0 8px 30px -8px rgba(16, 185, 129, .8); }
.h-cta:hover { background: var(--ob-accent-hover); color: var(--ob-accent-ink); }
.h-start .h-shell { border-color: var(--ob-line-4); border-radius: 12px; }
.h-start .h-dots i { width: 9px; height: 9px; background: var(--ob-line-5); }

/* ---------------------------------------------------------------- rail, dock */
.h-rail { position: fixed; left: 22px; top: 22vh; bottom: 22vh; width: 12px; z-index: 40; display: none; }
@media (min-width: 1400px) { .h-rail.is-ready { display: block; } }
.h-rail::before { content: ''; position: absolute; left: 5px; top: 0; bottom: 0; width: 2px; background: var(--ob-line-2); border-radius: 1px; }
.h-rail__fill { position: absolute; left: 5px; top: 0; width: 2px; height: 0; background: linear-gradient(var(--ob-accent), var(--ob-accent-soft)); border-radius: 1px; box-shadow: 0 0 8px rgba(16, 185, 129, .7); }
.h-rail a { position: absolute; left: 0; width: 12px; height: 12px; margin-top: -6px; padding: 0; border-radius: 50%; background: var(--ob-surface-1); border: 2px solid var(--ob-line-5); transition: all .25s; }
.h-rail a.is-done { border-color: var(--ob-accent); }
.h-rail a.is-current { background: var(--ob-accent); border-color: var(--ob-accent); box-shadow: 0 0 10px rgba(16, 185, 129, .8); }
.h-rail a span { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); white-space: nowrap; font-family: var(--ob-font-mono); font-size: 11px; color: var(--ob-fg-2); opacity: 0; transition: opacity .15s; pointer-events: none; }
.h-rail a:hover span, .h-rail a:focus-visible span { opacity: 1; }
.h-dock { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 90; display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 14px; border-radius: 999px; background: rgba(var(--ob-glass), .82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--ob-line-4); box-shadow: 0 20px 50px -16px rgba(var(--ob-shade), calc(.9 * var(--ob-shade-k))); font-family: var(--ob-font-mono); font-size: 12px; transform: translateX(-50%) translateY(140%); opacity: 0; transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .25s; pointer-events: none; }
.h-dock.is-on { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto; }
.h-dock > i { width: 7px; height: 7px; border-radius: 50%; background: var(--ob-accent); box-shadow: 0 0 8px var(--ob-accent); }
.h-dock__label { color: var(--ob-fg-1); white-space: nowrap; }
.h-dock__pct { color: var(--ob-fg-3); }
.h-dock button { display: flex; align-items: center; gap: 6px; background: var(--ob-surface-3); border: 1px solid var(--ob-line-5); color: var(--ob-fg-1); border-radius: 999px; padding: 4px 10px; font-family: inherit; font-size: 11.5px; cursor: pointer; }
.h-dock button:hover { border-color: var(--ob-accent); }

@media (prefers-reduced-motion: reduce) {
    .h-feed__track, .h-tree i, .h-beams__flow path, .h-node, .h-node::before, .h-group__node, .h-group__wire { animation: none !important; }
    .h-tree i { background: var(--ob-accent); }
    [data-reveal] { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- additions */
.h-start__title { font-family: var(--ob-font-display); font-weight: 300; font-size: clamp(36px, 5vw, 66px); line-height: 1; letter-spacing: -.03em; margin: 0; color: var(--ob-fg-1); }
.h-start__title em { font-style: italic; color: var(--ob-accent-hover); }
.h-feed__dot { border: 0; }
.h-docs { margin-top: 14px; grid-column: auto; }
.h-docs a b { color: var(--ob-fg-1); }
.h-docs a:hover b { color: var(--ob-accent-hover); }
.h-docs span { font-family: var(--ob-font-mono); }
body.qs-public a.h-tool, body.qs-public .h-alert__btns a { color: var(--ob-fg-1); }
body.qs-public .h-matrix td a { color: var(--ob-fg-2); }
.h-sites td.h-bad { color: var(--ob-danger); }
.h-sites td.h-faint { color: var(--ob-fg-3); }
.h-meter > span { min-width: 80px; }
.h-stats > div > span { font-family: var(--ob-font-mono); font-size: 12px; color: var(--ob-fg-2); }
.h-stats b span { font: inherit; color: inherit; }
/* Links of this page win over the generic public link colour */
body.qs-public a.h-cta, body.qs-public a.h-cta:hover { color: var(--ob-accent-ink); }
body.qs-public a.h-plan__cta { color: var(--ob-fg-1); }
body.qs-public .h-plan--featured a.h-plan__cta { color: var(--ob-accent-ink); }
body.qs-public a.h-more { color: var(--ob-fg-2); }
body.qs-public .h-note a, body.qs-public .h-under a { color: var(--ob-accent-hover); }
body.qs-public .h-alert__btns a + a { color: var(--ob-fg-2); }
body.qs-public a.h-more:hover, body.qs-public .h-matrix td a:hover, body.qs-public .h-alert__btns a:hover { color: var(--ob-accent-hover); }
.h-docs { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.h-docs b::before { content: '\2192'; color: var(--ob-accent-hover); }

/* Phones: wide panels wrap or stack instead of scrolling sideways */
@media (max-width: 700px) {
    .h-json { min-width: 0; width: auto; white-space: pre-wrap; overflow-wrap: anywhere; padding-bottom: 24px; }
    .h-panel__wide.h-code { overflow-x: visible; }
    .h-tip { left: 12px; right: 12px; }
    .h-builds-box { overflow-x: visible; }
    .h-builds { min-width: 0; }
    .h-builds__line, .h-builds__fill { display: none; }
    .h-builds ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .h-sites { overflow-x: visible; }
    .h-sites table, .h-sites tbody, .h-sites tr, .h-sites td { display: block; width: 100%; min-width: 0; }
    .h-sites thead { display: none; }
    .h-sites tr { padding: 12px 16px; border-bottom: 1px solid var(--ob-line-1); }
    .h-sites td { padding: 3px 0; border: 0; display: flex; justify-content: space-between; gap: 12px; }
    .h-sites td::before { content: attr(data-label); color: var(--ob-fg-3); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
    .h-sites td:first-child::before { content: none; }
    .h-meter { padding-right: 0; flex: 1; max-width: 220px; }
    .h-matrix { overflow-x: visible; }
    .h-matrix table, .h-matrix tbody, .h-matrix tr, .h-matrix td { display: block; width: 100%; min-width: 0; }
    .h-matrix thead { display: none; }
    .h-matrix tr { padding: 14px 18px; border-bottom: 1px solid var(--ob-line-1); }
    .h-matrix td { padding: 2px 0; border: 0; }
    .h-matrix td.is-us { background: transparent; border: 0; }
}

/* ---------------------------------------------------------------- public pages: header, breadcrumbs, prose, buttons */
.h-page-hero { overflow: clip; }
.h-page-hero .h-aurora { opacity: .8; }
.h-page-hero .h-inner { padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(36px, 5vw, 64px); }
.h-page-hero--center .h-inner { text-align: center; }
.h-page-hero--center .h-page-h1, .h-page-hero--center .h-intro { margin-left: auto; margin-right: auto; }
.h-page-hero--center .h-page-hero__actions { justify-content: center; }
.h-page-h1 { font-family: var(--ob-font-display); font-weight: 300; font-size: clamp(40px, 5.6vw, 76px); line-height: 1.02; letter-spacing: -.03em; margin: 24px 0 0; max-width: 18ch; color: var(--ob-fg-1); }
.h-page-h1 em { font-style: italic; background: var(--ob-hero-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.h-page-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.h-page-hero__split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; align-items: end; }
@media (max-width: 900px) { .h-page-hero__split { grid-template-columns: minmax(0, 1fr); } }
.h-crumbs { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 22px; padding: 0; font-family: var(--ob-font-mono); font-size: 12px; color: var(--ob-fg-3); }
.h-crumbs li + li::before { content: '/'; margin-right: 8px; color: var(--ob-fg-4); }
body.qs-public .h-crumbs a { color: var(--ob-fg-3); }
body.qs-public .h-crumbs a:hover { color: var(--ob-accent-hover); }
.h-crumbs span { color: var(--ob-fg-2); }
.h-page-hero .h-badge + .h-page-h1 { margin-top: 24px; }
.h-page-hero .h-crumbs + div .h-page-h1:first-child { margin-top: 0; }

/* Buttons of the kit */
.h-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; border-radius: 9px; padding: 11px 18px; font-family: var(--ob-font-ui); font-weight: 600; font-size: 14px; border: 1px solid var(--ob-line-4); background: var(--ob-surface-3); cursor: pointer; transition: border-color .15s, background .15s; }
body.qs-public a.h-btn, body.qs-public button.h-btn { color: var(--ob-fg-1); }
body.qs-public .h-btn:hover { border-color: var(--ob-accent-border); color: var(--ob-fg-1); }
.h-btn--primary { background: var(--ob-accent); border-color: var(--ob-accent); box-shadow: var(--ob-shadow-cta); }
body.qs-public a.h-btn--primary, body.qs-public button.h-btn--primary, body.qs-public .h-btn--primary:hover { color: var(--ob-accent-ink); }
body.qs-public .h-btn--primary:hover { background: var(--ob-accent-hover); border-color: var(--ob-accent-hover); }

/* Long-form text in the kit (docs, legal, articles) */
.h-prose { color: var(--ob-fg-2); font-size: 16px; line-height: 1.7; max-width: 780px; }
.h-prose > :first-child { margin-top: 0; }
.h-prose h2 { font-family: var(--ob-font-display); font-weight: 300; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.1; letter-spacing: -.02em; color: var(--ob-fg-1); margin: 56px 0 14px; }
.h-prose h3 { font-family: var(--ob-font-display); font-weight: 400; font-size: 24px; line-height: 1.2; color: var(--ob-fg-1); margin: 32px 0 10px; }
.h-prose p, .h-prose li { color: var(--ob-fg-2); }
/* A long URL in the editorial text of a tool page (the XML Sitemap Validator names http://www.sitemaps.org/schemas/sitemap/0.9) wraps instead of widening the page at 390 px */
.h-tool-content p, .h-tool-content li { overflow-wrap: anywhere; }
.h-prose ul, .h-prose ol { padding-left: 22px; }
.h-prose li { margin: 6px 0; }
.h-prose li::marker { color: var(--ob-accent-hover); font-family: var(--ob-font-mono); font-size: .85em; }
body.qs-public .h-prose a { color: var(--ob-accent-hover); text-decoration: underline; text-decoration-color: rgba(52, 211, 153, .35); text-underline-offset: 3px; }
.h-prose strong, .h-prose b { color: var(--ob-fg-1); }
.h-prose code { font-family: var(--ob-font-mono); font-size: .88em; color: var(--ob-accent-soft); background: var(--ob-surface-3); border: 1px solid var(--ob-line-2); border-radius: 5px; padding: 1px 6px; }
.h-prose pre { margin: 18px 0; padding: 16px 18px; background: var(--ob-inset); border: 1px solid var(--ob-line-3); border-radius: 12px; font-family: var(--ob-font-mono); font-size: 13px; line-height: 1.75; color: var(--ob-fg-1); white-space: pre-wrap; overflow-wrap: anywhere; }
.h-prose pre code { background: transparent; border: 0; padding: 0; color: inherit; font-size: inherit; }
.h-prose table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 14px; }
.h-prose th { text-align: left; font-family: var(--ob-font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ob-fg-3); font-weight: 400; padding: 10px 12px; border-bottom: 1px solid var(--ob-line-3); }
.h-prose td { padding: 10px 12px; border-bottom: 1px solid var(--ob-line-1); color: var(--ob-fg-2); vertical-align: top; }
/* Row headers (<th scope="row">) read like the first cell, not like the column labels; the caption is a note under the table */
body.qs-public .h-prose tbody th, .h-prose tbody th { font-family: inherit; font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--ob-fg-1); font-weight: 600; border-bottom-color: var(--ob-line-1); vertical-align: top; }
.h-prose caption { caption-side: bottom; padding: 8px 0 0; color: var(--ob-fg-2); font-size: 13px; text-align: left; }
.h-prose blockquote { margin: 18px 0; padding: 12px 18px; border-left: 2px solid var(--ob-accent); background: var(--ob-accent-tint); border-radius: 0 10px 10px 0; color: var(--ob-fg-1); }
.h-table-wrap { overflow-x: auto; }

/* ---------------------------------------------------------------- sign-in pages (basic wrapper) */
.h-auth { position: relative; min-height: 100vh; overflow: clip; display: flex; align-items: flex-start; justify-content: center; padding: clamp(40px, 9vh, 96px) 16px 48px; }
.h-auth__in { position: relative; width: 100%; max-width: 480px; }
.h-auth__brand { display: inline-flex; margin: 0 auto 28px; width: 100%; justify-content: center; }
.h-auth__card { padding: clamp(24px, 5vw, 40px); }
.h-auth__card h1 { font-family: var(--ob-font-display); font-weight: 300; font-size: clamp(32px, 4vw, 42px); letter-spacing: -.02em; line-height: 1.05; color: var(--ob-fg-1); margin-bottom: 24px; }
.h-auth__card label { color: var(--ob-fg-2); font-size: 13px; }
.h-auth__card .btn-block { padding: 12px 16px; }
.h-auth__foot { display: flex; justify-content: center; gap: 10px; margin: 24px 0 0; font-family: var(--ob-font-mono); font-size: 12px; color: var(--ob-fg-4); }
body.qs-auth .h-auth__foot a { color: var(--ob-fg-3); }
body.qs-auth .h-auth__foot a:hover { color: var(--ob-accent-hover); }
body.qs-auth p, body.qs-auth small, body.qs-auth .text-muted { color: var(--ob-fg-2) !important; }
body.qs-auth a { color: var(--ob-accent-hover); }
body.qs-auth .form-control, body.qs-auth .custom-select { min-height: 46px; }

/* ---------------------------------------------------------------- plan cards of the plans partial (pricing page, home) */
body.qs-public .pricing-plan { position: relative; height: 100%; border: 0 !important; border-radius: 16px !important; padding: 1px; background: radial-gradient(360px circle at var(--mx, -999px) var(--my, -999px), rgba(52, 211, 153, .6), transparent 45%), var(--ob-line-3); transition: transform .3s ease-out; box-shadow: none; }
body.qs-public .pricing-plan.is-featured { background: radial-gradient(360px circle at var(--mx, -999px) var(--my, -999px), rgba(52, 211, 153, .6), transparent 45%), linear-gradient(180deg, rgba(52, 211, 153, .7), var(--ob-line-3) 70%); box-shadow: 0 30px 80px -40px rgba(16, 185, 129, .6); }
body.qs-public .pricing-header { background: radial-gradient(400px circle at var(--mx, -999px) var(--my, -999px), rgba(16, 185, 129, .07), transparent 45%), rgba(var(--ob-glass), .97); border-radius: 15px 15px 0 0; padding: 24px 24px 0; }
body.qs-public .pricing-body { background: rgba(var(--ob-glass), .97); border-radius: 0 0 15px 15px; padding: 0 24px 24px; }
body.qs-public .pricing-name { color: var(--ob-fg-1) !important; font-family: var(--ob-font-ui); font-size: 16px; font-weight: 600; margin-bottom: 8px; }
body.qs-public .pricing-details { color: var(--ob-fg-2); font-size: 13.5px; line-height: 1.5; min-height: 40px; }
body.qs-public .pricing-price { margin: 18px 0 8px; display: flex; align-items: baseline; gap: 6px; }
body.qs-public .pricing-price-amount, body.qs-public .pricing-price-currency-symbol { font-family: var(--ob-font-display); font-weight: 300; font-size: 48px; line-height: 1; color: var(--ob-fg-1); }
body.qs-public .pricing-price-currency { font-family: var(--ob-font-mono); font-size: 12px; color: var(--ob-fg-3); }
body.qs-public .pricing-features { margin: 12px 0 20px; }
body.qs-public .pricing-features li { margin: 0; padding: 9px 0; border-top: 1px solid var(--ob-line-2); font-size: 13.5px; color: var(--ob-fg-2); gap: 10px; }
body.qs-public .pricing-features li strong { font-family: var(--ob-font-mono); font-weight: 500; font-size: 12.5px; color: var(--ob-fg-1); }
body.qs-public .pricing-features li .text-muted, body.qs-public .pricing-features li .text-muted strong { color: var(--ob-fg-3) !important; }
body.qs-public .pricing-features .text-success { color: var(--ob-accent-hover) !important; }
body.qs-public .pricing-tag { position: absolute; top: 20px; right: 20px; left: auto; bottom: auto; transform: none; margin: 0; width: auto; z-index: 2; font-family: var(--ob-font-mono); font-size: 10.5px; color: var(--ob-accent-ink); background: var(--ob-accent-hover); border-radius: 999px; padding: 2px 9px; }
body.qs-public .pricing-body .btn-primary { box-shadow: none; }
body.qs-public .pricing-plan:not(.is-featured) .pricing-body .btn-primary { background: var(--ob-surface-3); border: 1px solid var(--ob-line-4); color: var(--ob-fg-1); }
body.qs-public .pricing-plan:not(.is-featured) .pricing-body .btn-primary:hover { border-color: var(--ob-accent); background: var(--ob-surface-3); color: var(--ob-fg-1); }
body.qs-public .btn-group-custom { padding: 4px; border-radius: 12px; }
body.qs-public .btn-group-custom .btn { border-radius: 9px !important; font-family: var(--ob-font-mono); font-weight: 400; font-size: 12.5px; padding: 8px 14px; }
body.qs-public .btn-group-custom .btn.active { border: 1px solid var(--ob-accent-border); box-shadow: 0 0 20px -6px rgba(16, 185, 129, .5); }

/* ---------------------------------------------------------------- free tools (index, tool pages, similar and popular tools) */
.h-tool-cell { min-width: 0; }
.h-tool-cell.d-none { display: none !important; }
.h-tool__name { display: block; font-weight: 600; font-size: 16px; line-height: 1.3; color: var(--ob-fg-1); }
.h-tool__cmd > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.h-tool__stats { display: flex; gap: 6px; margin-top: auto; padding-top: 6px; font-family: var(--ob-font-mono); font-size: 11px; color: var(--ob-fg-3); }
.h-tool__stats span { border: 1px solid var(--ob-line-4); border-radius: 999px; padding: 2px 9px; }
.h-tool-body { padding-top: 8px; padding-bottom: 72px; }
.h-tool-label { display: flex; align-items: center; gap: 6px; margin: 48px 0 14px; }
.h-tool-label svg, .h-tool-label i { color: var(--ob-accent-hover) !important; }
.h-tool-related { margin-top: 64px; }
.h-tool-h2 { font-family: var(--ob-font-display); font-weight: 300; font-size: clamp(28px, 3.4vw, 42px); letter-spacing: -.02em; line-height: 1.05; color: var(--ob-fg-1); margin: 0 0 24px; }
.h-tool-rating { justify-content: flex-end; }
.h-tool-rating #rating { font-family: var(--ob-font-mono); font-size: 12px; color: var(--ob-fg-3); }
.h-tool-rating .rating-star { color: var(--ob-warn); cursor: pointer; }
.h-page-hero__aside .h-tool-rating { margin: 0; }
@media (max-width: 900px) { .h-tool-rating { justify-content: flex-start; } }
/* Below lg the stars sit at the left like the caption under them (the markup's flex-row-reverse with justify-content-start put
   them at the right, over a caption aligned left) */
@media (max-width: 991.98px) { .h-tool-rating #rating > .d-flex { justify-content: flex-end !important; } }
body.qs-public .h-tool-body .card { border-radius: 16px; }
body.qs-public .h-tool-body > .card:first-child, body.qs-public .h-tool-body > .card:first-of-type { background: radial-gradient(500px circle at var(--mx, -999px) var(--my, -999px), rgba(16, 185, 129, .06), transparent 45%), rgba(var(--ob-glass), .94); box-shadow: var(--ob-shadow-glow); }
body.qs-public .h-tool-body .card-body { padding: 24px; }
body.qs-public .h-tool-body label { font-family: var(--ob-font-mono); font-size: 12px; color: var(--ob-fg-2); }
body.qs-public .h-tool-body .btn-block.btn-primary { min-height: 48px; }
body.qs-public .h-tool-body .table-custom td { color: var(--ob-fg-1); border-color: var(--ob-line-2); }
body.qs-public .h-tool-body .table-custom td.font-weight-bold { color: var(--ob-fg-2); font-family: var(--ob-font-mono); font-size: 12px; font-weight: 400 !important; }
body.qs-public .h-tool-body .table-custom-container { border: 1px solid var(--ob-line-3); border-radius: 14px; background: var(--ob-surface-card); }

/* Spacing helpers of the kit pages (instead of inline styles) */
.h-inner--tight { padding-top: 40px; }
.h-flush { margin: 0 !important; }
.h-split--faq { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.h-lead--tight { margin: 14px 0 28px; }
.h-tools-search { margin: 0 0 24px; max-width: 640px; }
.h-tools-search .h-audit__field { min-height: 48px; }
.h-tools--catalog { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.h-facts--big dd { font-size: 16px; }
.h-facts--big > div { padding: 18px; }
body.qs-public .container.h-tool-body { max-width: var(--ob-container); padding-left: var(--ob-gutter); padding-right: var(--ob-gutter); }

/* ---------------------------------------------------------------- documentation */
.h-doc { display: grid; grid-template-columns: minmax(0, 780px) minmax(0, 240px); gap: clamp(32px, 6vw, 96px); align-items: start; padding-top: 48px; }
@media (max-width: 1000px) { .h-doc { grid-template-columns: minmax(0, 1fr); } .h-toc { display: none; } }
.h-toc { position: sticky; top: 96px; border-left: 1px solid var(--ob-line-2); padding-left: 18px; }
.h-toc ol { list-style: none; margin: 10px 0 0; padding: 0; counter-reset: t; }
.h-toc li { margin: 0; }
.h-toc a { display: block; padding: 5px 0; font-size: 13.5px; line-height: 1.4; color: var(--ob-fg-2); }
body.qs-public .h-toc a { color: var(--ob-fg-2); }
body.qs-public .h-toc a:hover, body.qs-public .h-toc a.is-current { color: var(--ob-accent-hover); }
.h-toc a.is-current { box-shadow: -19px 0 0 -17px var(--ob-accent); }
.h-prose h2[id], .h-prose h3[id] { scroll-margin-top: 96px; }
.h-prose > p:first-child { margin-top: 0; }
.h-rule-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); gap: 14px; align-items: start; }
.h-rule-list { list-style: none; margin: 0; padding: 6px 0; }
.h-rule-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 9px 16px; border-bottom: 1px solid var(--ob-line-1); }
.h-rule-list li:last-child { border-bottom: 0; }
body.qs-public .h-rule-list a { color: var(--ob-fg-1); font-size: 14px; margin-right: auto; }
body.qs-public .h-rule-list a:hover { color: var(--ob-accent-hover); }
.h-rule-list code, .h-rule-id { font-family: var(--ob-font-mono); font-size: 11px; color: var(--ob-fg-3); background: transparent; padding: 0; }
.h-rule-badges { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.h-rule-id { font-size: 12.5px; color: var(--ob-accent-soft); border: 1px solid var(--ob-line-4); border-radius: 6px; padding: 3px 8px; }
.h-def { margin: 0; border: 1px solid var(--ob-line-3); border-radius: 16px; background: var(--ob-surface-card); overflow: hidden; }
.h-def > div { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 16px; padding: 14px 20px; border-bottom: 1px solid var(--ob-line-1); }
.h-def > div:last-child { border-bottom: 0; }
.h-def dt { font-family: var(--ob-font-mono); font-size: 11.5px; font-weight: 400; color: var(--ob-fg-3); text-transform: uppercase; letter-spacing: .05em; padding-top: 2px; }
.h-def dd { margin: 0; color: var(--ob-fg-1); font-size: 14.5px; line-height: 1.55; }
.h-def code { font-family: var(--ob-font-mono); font-size: 12.5px; color: var(--ob-accent-soft); background: transparent; padding: 0; }
@media (max-width: 560px) { .h-def > div { grid-template-columns: minmax(0, 1fr); gap: 4px; } }
/* Rule page: the definition list in groups, each under its H3 */
.h-h3--def { font-size: 22px; margin: 28px 0 12px; }
.h-def-groups > .h-h3--def:first-child { margin-top: 0; }
@media (max-width: 640px) {
    .h-prose .table-responsive { overflow: visible; }
    .h-prose table, .h-prose tbody, .h-prose tr, .h-prose td { display: block; width: 100%; }
    .h-prose thead { display: none; }
    .h-prose tr { padding: 10px 0; border-bottom: 1px solid var(--ob-line-2); }
    .h-prose td { padding: 2px 0; border: 0; overflow-wrap: anywhere; }
    .h-prose tbody th, .h-prose caption { display: block; width: 100%; }
    .h-prose tbody th { padding: 2px 0; border: 0; }
    .h-prose td:first-child { color: var(--ob-fg-1); }
}

/* /seo: the audit form of 66audit inside the kit */
.h-seo { padding-top: 8px; padding-bottom: 64px; }
.h-seo__box { padding: 14px; }
body.qs-public .h-seo .form-control-lg { min-height: 52px; font-family: var(--ob-font-mono); font-size: 14px; }
body.qs-public .h-seo .btn-lg { min-height: 52px; }
.h-seo__sample img { border: 1px solid var(--ob-line-3); border-radius: 16px; margin-top: 10px; opacity: .9; }
.h-seo .seo-small-icon { background: var(--ob-accent-tint-2) !important; color: var(--ob-accent-hover) !important; }
body.qs-public .h-dir-tools { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }

/* Empty states and the 404 page */
body.qs-public .h-empty > svg { display: none; }
body.qs-public .h-empty::before { content: '\2205'; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: 18px; border: 1px dashed var(--ob-line-5); border-radius: 16px; font-family: var(--ob-font-mono); font-size: 26px; color: var(--ob-fg-3); }
body.qs-public .h-empty .h5 { font-family: var(--ob-font-display); font-weight: 300; font-size: 26px; color: var(--ob-fg-1) !important; }
.h-404 { max-width: 460px; margin-left: auto; }

/* Italic words filled with the gradient: the background stops at the box, so the slant of the last letter was cut.
   A little room on the right (given back with a negative margin) keeps every letter whole, also across line breaks. */
.h-h1 em, .h-page-h1 em, .ob-h1 em, .ob-cta__title em, .h-start__title em {
    padding-right: .14em; margin-right: -.08em; padding-bottom: .06em;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.ob-footer__button { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; text-align: left; } .ob-footer__button:hover { color: var(--ob-accent-hover); }

/* ---------------------------------------------------------------- home page: what used to be inline styles (homepage review B3) */
.h-stack--tight { gap: 8px; min-width: 0; }
.h-mw-18 { max-width: 18ch; }
.h-mw-22 { max-width: 22ch; }
.h-mw-380 { max-width: 380px; }
.h-mw-660 { max-width: 660px; }
.h-code--column { display: flex; flex-direction: column; overflow: hidden; }
.h-scroll-x { overflow-x: auto; }
.h-clip { overflow: hidden; }
.h-min0 { min-width: 0; }
.h-mb-0 { margin: 0 0 0px; }
.h-mb-8 { margin: 0 0 8px; }
.h-mb-12 { margin: 0 0 12px; }
.h-mb-20 { margin: 0 0 20px; }
.h-mb-22 { margin: 0 0 22px; }
.h-mb-24 { margin: 0 0 24px; }
.h-mb-32 { margin: 0 0 32px; }
.h-mb-40 { margin: 0 0 40px; }
.h-mt-12 { margin: 12px 0 0; }
.h-fs-14 { font-size: 14px; }
.h-gap-10 { gap: 10px; }
.h-log { font-size: 12px; line-height: 1.95; }
.h-shell__body--cta { font-size: 13px; padding: 18px 16px; }
.h-ring__arc--85 { stroke-dashoffset: 32.04; }
.h-ring__arc--73 { stroke-dashoffset: 57.67; stroke: var(--ob-warn); }
/* Sequential delays */
.h-beams__flow path:nth-child(2) { animation-delay: 0.9s; }
.h-beams__flow path:nth-child(3) { animation-delay: 1.7s; }
.h-beams__flow path:nth-child(4) { animation-delay: 0.4s; }
.h-beams__flow path:nth-child(5) { animation-delay: 1.3s; }
.h-beams__flow path:nth-child(6) { animation-delay: 2.1s; }
.h-tree i:nth-child(1) { animation-delay: 0s; }
.h-tree i:nth-child(2) { animation-delay: 0.025s; }
.h-tree i:nth-child(3) { animation-delay: 0.05s; }
.h-tree i:nth-child(4) { animation-delay: 0.075s; }
.h-tree i:nth-child(5) { animation-delay: 0.1s; }
.h-tree i:nth-child(6) { animation-delay: 0.125s; }
.h-tree i:nth-child(7) { animation-delay: 0.15s; }
.h-tree i:nth-child(8) { animation-delay: 0.175s; }
.h-tree i:nth-child(9) { animation-delay: 0.2s; }
.h-tree i:nth-child(10) { animation-delay: 0.225s; }
.h-tree i:nth-child(11) { animation-delay: 0.25s; }
.h-tree i:nth-child(12) { animation-delay: 0.275s; }
.h-tree i:nth-child(13) { animation-delay: 0.3s; }
.h-tree i:nth-child(14) { animation-delay: 0.325s; }
.h-tree i:nth-child(15) { animation-delay: 0.35s; }
.h-tree i:nth-child(16) { animation-delay: 0.375s; }
.h-tree i:nth-child(17) { animation-delay: 0.4s; }
.h-tree i:nth-child(18) { animation-delay: 0.425s; }
.h-tree i:nth-child(19) { animation-delay: 0.45s; }
.h-tree i:nth-child(20) { animation-delay: 0.475s; }
.h-tree i:nth-child(21) { animation-delay: 0.5s; }
.h-tree i:nth-child(22) { animation-delay: 0.525s; }
.h-tree i:nth-child(23) { animation-delay: 0.55s; }
.h-tree i:nth-child(24) { animation-delay: 0.575s; }
.h-tree i:nth-child(25) { animation-delay: 0.6s; }
.h-tree i:nth-child(26) { animation-delay: 0.625s; }
.h-tree i:nth-child(27) { animation-delay: 0.65s; }
.h-tree i:nth-child(28) { animation-delay: 0.675s; }
.h-tree i:nth-child(29) { animation-delay: 0.7s; }
.h-tree i:nth-child(30) { animation-delay: 0.725s; }
.h-tree i:nth-child(31) { animation-delay: 0.75s; }
.h-tree i:nth-child(32) { animation-delay: 0.775s; }
.h-tree i:nth-child(33) { animation-delay: 0.8s; }
.h-tree i:nth-child(34) { animation-delay: 0.825s; }
.h-tree i:nth-child(35) { animation-delay: 0.85s; }
.h-tree i:nth-child(36) { animation-delay: 0.875s; }
.h-tree i:nth-child(37) { animation-delay: 0.9s; }
.h-tree i:nth-child(38) { animation-delay: 0.925s; }
.h-tree i:nth-child(39) { animation-delay: 0.95s; }
.h-tree i:nth-child(40) { animation-delay: 0.975s; }
.h-tree i:nth-child(41) { animation-delay: 1s; }
.h-tree i:nth-child(42) { animation-delay: 1.025s; }
.h-tree i:nth-child(43) { animation-delay: 1.05s; }
.h-tree i:nth-child(44) { animation-delay: 1.075s; }
.h-tree i:nth-child(45) { animation-delay: 1.1s; }
.h-tree i:nth-child(46) { animation-delay: 1.125s; }
.h-tree i:nth-child(47) { animation-delay: 1.15s; }
.h-tree i:nth-child(48) { animation-delay: 1.175s; }
.h-tree i:nth-child(49) { animation-delay: 1.2s; }
.h-tree i:nth-child(50) { animation-delay: 1.225s; }
.h-tree i:nth-child(51) { animation-delay: 1.25s; }
.h-tree i:nth-child(52) { animation-delay: 1.275s; }
.h-tree i:nth-child(53) { animation-delay: 1.3s; }
.h-tree i:nth-child(54) { animation-delay: 1.325s; }
.h-tree i:nth-child(55) { animation-delay: 1.35s; }
.h-tree i:nth-child(56) { animation-delay: 1.375s; }
.h-tree i:nth-child(57) { animation-delay: 1.4s; }
.h-tree i:nth-child(58) { animation-delay: 1.425s; }
.h-tree i:nth-child(59) { animation-delay: 1.45s; }
.h-tree i:nth-child(60) { animation-delay: 1.475s; }
.h-box__head ~ .h-prop:nth-of-type(2) .h-bar i { transition-delay: 0.00s; }
.h-box__head ~ .h-prop:nth-of-type(3) .h-bar i { transition-delay: 0.12s; }
.h-box__head ~ .h-prop:nth-of-type(4) .h-bar i { transition-delay: 0.24s; }
.h-box__head ~ .h-prop:nth-of-type(5) .h-bar i { transition-delay: 0.36s; }
.h-box__head ~ .h-prop:nth-of-type(6) .h-bar i { transition-delay: 0.48s; }
.h-box__head ~ .h-prop:nth-of-type(7) .h-bar i { transition-delay: 0.60s; }
.h-box__head ~ .h-prop:nth-of-type(8) .h-bar i { transition-delay: 0.72s; }
.h-box__head ~ .h-prop:nth-of-type(9) .h-bar i { transition-delay: 0.84s; }
.h-builds li:nth-child(1) .h-build__dot { transition-delay: 0.00s; }
.h-builds li:nth-child(2) .h-build__dot { transition-delay: 0.36s; }
.h-builds li:nth-child(3) .h-build__dot { transition-delay: 0.72s; }
.h-builds li:nth-child(4) .h-build__dot { transition-delay: 1.08s; }
.h-builds li:nth-child(5) .h-build__dot { transition-delay: 1.44s; }
.h-builds li:nth-child(6) .h-build__dot { transition-delay: 1.80s; }
.h-builds li:nth-child(7) .h-build__dot { transition-delay: 2.16s; }
.h-builds li:nth-child(8) .h-build__dot { transition-delay: 2.52s; }

/* Widths of meters and bars (0-100%), as classes so they show without JavaScript */
.h-w-0 { width: 0%; }
.h-w-1 { width: 1%; }
.h-w-2 { width: 2%; }
.h-w-3 { width: 3%; }
.h-w-4 { width: 4%; }
.h-w-5 { width: 5%; }
.h-w-6 { width: 6%; }
.h-w-7 { width: 7%; }
.h-w-8 { width: 8%; }
.h-w-9 { width: 9%; }
.h-w-10 { width: 10%; }
.h-w-11 { width: 11%; }
.h-w-12 { width: 12%; }
.h-w-13 { width: 13%; }
.h-w-14 { width: 14%; }
.h-w-15 { width: 15%; }
.h-w-16 { width: 16%; }
.h-w-17 { width: 17%; }
.h-w-18 { width: 18%; }
.h-w-19 { width: 19%; }
.h-w-20 { width: 20%; }
.h-w-21 { width: 21%; }
.h-w-22 { width: 22%; }
.h-w-23 { width: 23%; }
.h-w-24 { width: 24%; }
.h-w-25 { width: 25%; }
.h-w-26 { width: 26%; }
.h-w-27 { width: 27%; }
.h-w-28 { width: 28%; }
.h-w-29 { width: 29%; }
.h-w-30 { width: 30%; }
.h-w-31 { width: 31%; }
.h-w-32 { width: 32%; }
.h-w-33 { width: 33%; }
.h-w-34 { width: 34%; }
.h-w-35 { width: 35%; }
.h-w-36 { width: 36%; }
.h-w-37 { width: 37%; }
.h-w-38 { width: 38%; }
.h-w-39 { width: 39%; }
.h-w-40 { width: 40%; }
.h-w-41 { width: 41%; }
.h-w-42 { width: 42%; }
.h-w-43 { width: 43%; }
.h-w-44 { width: 44%; }
.h-w-45 { width: 45%; }
.h-w-46 { width: 46%; }
.h-w-47 { width: 47%; }
.h-w-48 { width: 48%; }
.h-w-49 { width: 49%; }
.h-w-50 { width: 50%; }
.h-w-51 { width: 51%; }
.h-w-52 { width: 52%; }
.h-w-53 { width: 53%; }
.h-w-54 { width: 54%; }
.h-w-55 { width: 55%; }
.h-w-56 { width: 56%; }
.h-w-57 { width: 57%; }
.h-w-58 { width: 58%; }
.h-w-59 { width: 59%; }
.h-w-60 { width: 60%; }
.h-w-61 { width: 61%; }
.h-w-62 { width: 62%; }
.h-w-63 { width: 63%; }
.h-w-64 { width: 64%; }
.h-w-65 { width: 65%; }
.h-w-66 { width: 66%; }
.h-w-67 { width: 67%; }
.h-w-68 { width: 68%; }
.h-w-69 { width: 69%; }
.h-w-70 { width: 70%; }
.h-w-71 { width: 71%; }
.h-w-72 { width: 72%; }
.h-w-73 { width: 73%; }
.h-w-74 { width: 74%; }
.h-w-75 { width: 75%; }
.h-w-76 { width: 76%; }
.h-w-77 { width: 77%; }
.h-w-78 { width: 78%; }
.h-w-79 { width: 79%; }
.h-w-80 { width: 80%; }
.h-w-81 { width: 81%; }
.h-w-82 { width: 82%; }
.h-w-83 { width: 83%; }
.h-w-84 { width: 84%; }
.h-w-85 { width: 85%; }
.h-w-86 { width: 86%; }
.h-w-87 { width: 87%; }
.h-w-88 { width: 88%; }
.h-w-89 { width: 89%; }
.h-w-90 { width: 90%; }
.h-w-91 { width: 91%; }
.h-w-92 { width: 92%; }
.h-w-93 { width: 93%; }
.h-w-94 { width: 94%; }
.h-w-95 { width: 95%; }
.h-w-96 { width: 96%; }
.h-w-97 { width: 97%; }
.h-w-98 { width: 98%; }
.h-w-99 { width: 99%; }
.h-w-100 { width: 100%; }
.ob-js .h-bar i { width: 0; }

/* Newsletter band, testimonials, blog cards and plan names of the home page */
.h-newsletter .h-inner { padding-top: 40px; padding-bottom: 40px; }
.h-newsletter__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 32px; align-items: center; border: 1px solid var(--ob-line-3); border-radius: 16px; background: rgba(var(--ob-glass), .94); padding: 24px 28px; }
@media (max-width: 860px) { .h-newsletter__in { grid-template-columns: minmax(0, 1fr); } }
.h-newsletter__in .h-label { margin: 0 0 6px; color: var(--ob-accent-hover); }
.h-newsletter__form { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.h-newsletter__form .h-audit__field { flex: 1 1 200px; min-height: 46px; }
.h-newsletter__done { margin: 0; color: var(--ob-fg-2); }
.h-testimonial { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.h-testimonial img { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--ob-line-4); }
.h-testimonial b { display: block; color: var(--ob-fg-1); font-size: 14px; }
.h-testimonial small { color: var(--ob-fg-3); font-family: var(--ob-font-mono); font-size: 11px; }
.h-testimonial a { margin-left: auto; }
.h-testimonials blockquote { margin: 0; font-size: 15px; line-height: 1.6; }
.h-post-image { width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--ob-line-2); margin-bottom: 4px; }
.h-plan__title { font-weight: 600; font-size: 15px; margin: 0; color: var(--ob-fg-1); }
.ob-theme-switch { color: var(--ob-fg-2); }
.h-pt-48 { padding-top: 48px; } .rating-star .is-dim, #rating .is-dim { opacity: .5; } .h-empty-art { height: 175px; width: 100%; margin-bottom: 1.5rem; }
.h-typed-rest { -webkit-text-fill-color: transparent; color: transparent; } .h-h1 em .h-h1__caret { -webkit-text-fill-color: initial; }

/* Lot 3: verdicts of the free tools that run rules (views/tools/partials/rule_verdicts.php) */
.qs-tool-verdict { padding: 12px 0; border-bottom: 1px solid var(--ob-line-2); }
.qs-tool-verdict:first-child { padding-top: 0; }
.qs-tool-verdict__evidence { max-height: 160px; overflow: auto; white-space: pre-wrap; word-break: break-word; padding: 8px 10px; border-radius: 8px; background: var(--ob-well); }

/* Lot 3: the rule documentation links under the related tools, and a register entry opened from a rule page */
.h-tool-rules { margin: 24px 0 0; padding-left: 1.25rem; }
.h-tool-rules li + li { margin-top: 4px; }
tr:target > td { background: var(--ob-accent-tint-2); }