/* Start Here is deliberately scoped so the existing one-pager stays intact. */
.ht-start { --start-muted:#bcb7c0; --start-soft:#96919b; margin-block:108px 88px; scroll-margin-top:90px; }
.ht-start [hidden] { display:none !important; }
.ht-start-intro { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(260px,.75fr); gap:64px; align-items:center; margin-bottom:54px; }
.ht-start-intro .eyebrow { margin:0 0 15px; }
.ht-start-intro h2 { margin:0 0 23px; font-size:clamp(38px,4.6vw,60px); line-height:1.08; letter-spacing:-2px; }
.ht-start .ht-start-lead { max-width:550px; margin:0; color:var(--start-muted); font:400 17px/1.75 var(--body); }
.ht-start-actions,.ht-start-finish-links { display:flex; flex-wrap:wrap; align-items:center; gap:18px 24px; margin-top:26px; }
.ht-start-button { display:inline-flex; justify-content:center; align-items:center; gap:18px; padding:11px 19px; border:1px solid var(--button-border); border-radius:6px; background:var(--button-bg); color:#fff; text-decoration:none; font:600 14px/1.5 var(--body); transition:background .2s,transform .2s; }
.ht-start-button:hover { color:#fff; background:var(--button-hover); transform:translateY(-1px); }
.ht-start-button > span { font-size:20px; line-height:1; font-weight:400; }
.ht-start-text-link,.ht-start-more a { color:#e1bbb2; font-size:13px; text-underline-offset:4px; text-decoration-thickness:1px; }
.ht-start-text-link:hover,.ht-start-more a:hover { color:#ffb39b; }
.ht-start-kicker { display:block; margin:0; color:var(--start-soft); font:600 10px/1.6 var(--body); letter-spacing:1.5px; }
.ht-start-route { padding:27px 28px; border:1px solid #ef625a2a; border-radius:15px; background:linear-gradient(145deg,#20161a66,#101114); }
.ht-start-route > .ht-start-kicker { color:#df978b; margin-bottom:18px; }
.ht-start-route > p { display:flex; align-items:center; gap:14px; margin:12px 0; font-size:14px; color:#dfd9df; }
.ht-start-route > p > span { color:#c78c82; font:500 12px var(--display); }
.ht-start-route > small { display:block; margin-top:20px; padding-top:16px; border-top:1px solid var(--line); color:var(--start-muted); font-size:12px; line-height:1.7; }
.ht-start-layout { display:grid; grid-template-columns:190px minmax(0,1fr); align-items:start; gap:32px; }
.ht-start-nav { position:sticky; top:calc(var(--site-announcement-height,0px) + 20px); padding-top:10px; min-width:0; }
.ht-start-nav > .ht-start-kicker { margin-left:12px; }
.ht-start-nav ol { list-style:none; padding:0; margin:14px 0 0; }
.ht-start-nav li { margin:5px 0; }
.ht-start-nav li a { display:flex; align-items:center; gap:12px; min-height:43px; padding:10px 11px; border:1px solid transparent; border-radius:6px; color:#bcb7c0; text-decoration:none; font:500 12px/1.5 var(--body); }
.ht-start-nav li a > span { color:#8d8087; font:500 11px var(--display); }
.ht-start-nav li a:hover { color:#f2e7e5; background:#ffffff04; }
.ht-start-nav li a[aria-current] { color:#ffc0ae; border-color:#ef625a2b; background:#ef625a0c; }
.ht-start-nav li a[aria-current] > span { color:#f48f7d; }
.ht-start-nav-help { display:block; padding:19px 12px 0; margin-top:21px; border-top:1px solid var(--line); color:#b29d9e; font-size:11px; text-decoration:none; line-height:1.7; }
.ht-start-content { min-width:0; }
.ht-start-step { min-width:0; margin-bottom:24px; padding:32px; border:1px solid #ffffff12; border-radius:16px; background:linear-gradient(135deg,#17131777,#101114 65%); scroll-margin-top:82px; }
.ht-start-step:last-child { margin-bottom:0; }
.ht-start-step-heading { display:flex; align-items:center; gap:17px; margin-bottom:23px; }
.ht-start-number { display:grid; place-items:center; flex-shrink:0; width:43px; height:43px; border:1px solid #ef625a46; border-radius:11px; color:#ffc0ad; background:#ef625a0a; font:500 15px var(--display); }
.ht-start-step-heading .ht-start-kicker { color:#ba8c85; font-size:9px; margin-bottom:5px; }
.ht-start h3 { margin:0; color:var(--text); font:600 clamp(23px,2.3vw,30px)/1.2 var(--display); letter-spacing:-.7px; }
.ht-start h4 { margin:0 0 8px; font:600 15px/1.5 var(--display); letter-spacing:-.2px; }
.ht-start-step > p,.ht-start-instructions,.ht-start-split p { color:var(--start-muted); font-size:14px; line-height:1.85; }
.ht-start-step > p { margin:14px 0 20px; }
.ht-start strong { font-weight:600; color:#e6dfe5; }
.ht-start-split { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:25px; align-items:center; margin:20px 0; }
.ht-start-instructions { margin:0 0 20px; padding-left:21px; }
.ht-start-instructions li { padding-left:6px; margin:0 0 13px; }
.ht-start-instructions li::marker { color:#df897a; font-size:12px; font-weight:600; }
.ht-start-illustration { min-width:0; margin:20px 0; overflow:hidden; border:1px solid #ffffff18; border-radius:10px; background:#0b0c0f; }
.ht-start-split > .ht-start-illustration { margin:0; }
.ht-start-illustration figcaption { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:0; padding:13px 16px; border-bottom:1px solid #ffffff0b; color:#b7a4a9; font-size:9px; line-height:1.6; letter-spacing:1.2px; }
.ht-start-illustration figcaption > span { color:#847e88; white-space:nowrap; }
.ht-start-window-bar { display:flex; align-items:center; gap:5px; padding:15px 17px; border-bottom:1px solid #ffffff0c; color:#ddd7de; font-size:12px; }
.ht-start-window-bar > span { width:5px; height:5px; border-radius:50%; background:#50444c; }
.ht-start-window-bar > strong { margin-left:8px; font-size:12px; }
.ht-start-library-body { padding:18px; }
.ht-start-library-tab { display:flex; justify-content:space-between; padding-bottom:15px; font-size:12px; color:#e7c0b4; }
.ht-start-library-tab > span { color:#f38b76; }
.ht-start-script-row { display:flex; gap:11px; align-items:center; padding:15px 11px; border:1px solid #ef625a3c; border-radius:7px; background:#ef625a06; }
.ht-start-script-icon { display:grid; place-items:center; flex-shrink:0; width:31px; height:31px; background:#ef625a12; border:1px solid #ef625a3a; border-radius:7px; color:#ffbcaa; font:600 11px var(--display); }
.ht-start-script-row strong { display:block; font-size:12px; }
.ht-start-script-row small { display:block; color:#a19aa5; font-size:9px; line-height:1.7; }
.ht-start-script-add { margin-left:auto; color:#e9a18e; font-size:21px; }
.ht-start-settings-row { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-top:18px; color:#aaa3af; font-size:10px; }
.ht-start-settings-row > span { color:#ddc2be; }
.ht-start-settings-row i { color:#a0d6b0; font-style:normal; margin-left:9px; }
.ht-start-step > .ht-start-checkpoint { display:flex; align-items:flex-start; gap:10px; padding:13px 15px; margin:23px 0 0; border:1px solid #8bc6a027; border-radius:7px; background:#6aab8006; color:#bad0c1; font-size:12px; line-height:1.8; }
.ht-start-checkpoint > span { color:#9ed7b2; font-size:14px; }
.ht-start-more { padding:0; margin:17px 0 0; border-top:1px solid var(--line); }
.ht-start-more summary { position:relative; padding:15px 24px 3px 0; color:#d6cbd4; font:500 13px/1.65 var(--body); cursor:pointer; list-style:none; }
.ht-start-more summary::-webkit-details-marker { display:none; }
.ht-start-more summary::after { position:absolute; right:2px; top:14px; content:'+'; color:#bd8f89; font-size:17px; line-height:1.4; }
.ht-start-more[open] summary::after { content:'−'; }
.ht-start-more p { margin:10px 0 0; color:var(--start-muted); font-size:12px; line-height:1.85; }
.ht-start-more > a { display:inline-block; margin-top:10px; font-size:12px; }
.ht-start-mode-buttons { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin-top:25px; }
.ht-start-mode-buttons > button { padding:15px 13px; border:1px solid #ffffff1a; border-radius:8px; background:#0c0d10; color:var(--text); text-align:left; cursor:pointer; }
.ht-start-mode-buttons > button > span { display:block; margin-bottom:9px; color:#b29c9d; font:500 8px/1.5 var(--body); letter-spacing:1px; }
.ht-start-mode-buttons strong { display:block; min-height:40px; font:600 16px/1.3 var(--display); }
.ht-start-mode-buttons small { display:block; color:#a9a1ad; font:400 11px/1.7 var(--body); }
.ht-start-mode-buttons > button[aria-pressed="true"] { border-color:#ef8b737a; background:linear-gradient(145deg,#f55e5011,#f55e5005); box-shadow:inset 0 1px #ffc19a12; }
.ht-start-mode-buttons > button[aria-pressed="true"] strong { color:#ffc1ac; }
.ht-start-step .ht-start-mode-description { padding:14px 0 1px; margin:0 0 20px; color:#c6b6bd; font-size:13px; line-height:1.8; }
.ht-start-timeframe-demo { padding:20px; margin:20px 0 25px; border:1px solid #ffffff18; border-radius:10px; background:#0b0c0f; }
.ht-start-demo-top { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:13px; padding-bottom:16px; border-bottom:1px solid var(--line); }
.ht-start-demo-top > label,.ht-start-auto-counts > label { color:#b8acb9; font-size:11px; }
.ht-start select { min-height:35px; margin-left:7px; padding:5px 24px 5px 9px; border:1px solid #ffffff24; border-radius:5px; background:#161419; color:#ede5ec; font:500 12px var(--body); }
.ht-start-pool { padding:0; margin:18px 0 0; border:0; display:flex; flex-wrap:wrap; gap:8px; min-width:0; }
.ht-start-pool legend { padding:0; margin-bottom:11px; font-size:11px; color:#aaa1ad; }
.ht-start-pool > label { display:inline-flex; align-items:center; gap:7px; padding:7px 9px; border:1px solid #ffffff13; border-radius:5px; color:#c9c1cb; font-size:11px; cursor:pointer; }
.ht-start input { accent-color:#ee8875; }
.ht-start-pool input { margin:0; width:12px; height:12px; }
.ht-start-pool:disabled { opacity:.4; }
.ht-start-pool:disabled label { cursor:default; }
.ht-start-auto-counts { display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; align-items:center; margin-top:18px; }
.ht-start-auto-counts > span { color:#9a8e99; font-size:10px; }
.ht-start-scan-result { padding-top:20px; margin-top:20px; border-top:1px solid var(--line); }
.ht-start-scan-result > .ht-start-kicker { font-size:9px; }
.ht-start-tf-chips { display:flex; flex-wrap:wrap; gap:7px; margin:12px 0; }
.ht-start-tf-chips > span { padding:5px 8px; border:1px solid #ffffff20; border-radius:5px; background:#ffffff03; color:#c9c2ce; font:500 11px/1.4 var(--body); }
.ht-start-tf-chips > .is-chart { border-color:#f49c7957; color:#ffc8b0; background:#f49c790c; }
.ht-start-scan-result output { display:block; color:#c8b2ae; font-size:11px; line-height:1.7; }
.ht-start .ht-start-caption { margin:13px 0 0; color:#9f97a6; font-size:10px; line-height:1.7; letter-spacing:0; }
.ht-start-illustration > .ht-start-caption { padding:0 16px 14px; margin:0; }
.ht-start-callout { padding:16px 18px; border-left:2px solid #d67967; background:linear-gradient(90deg,#ef625a09,transparent); margin:22px 0 0; }
.ht-start-callout > strong { font-size:13px; }
.ht-start-callout > p { margin:6px 0 0; color:#bcb0bc; font-size:12px; line-height:1.85; }
.ht-start-callout a { color:#dcb6ac; text-underline-offset:3px; }
.ht-start-illustration svg { display:block; width:100%; height:auto; }
.ht-start-grid { fill:none; stroke:#ffffff07; stroke-width:1; }
.ht-start-chart-line { fill:none; stroke:#a5a2a9; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ht-start-member-zones rect { fill:#6cb58c12; stroke:#8bba9d; stroke-width:1; }
.ht-start-member-zones text,.ht-start-cluster-zone text { fill:#bad7c5; font:500 13px var(--body); }
.ht-start-cluster-zone rect { fill:#72ac8c19; stroke:#87bd9d; stroke-width:1.5; }
.ht-start-zone-demo[data-view="cluster"] .ht-start-member-zones { opacity:0; }
.ht-start-zone-demo[data-view="members"] .ht-start-cluster-zone { opacity:0; }
.ht-start-svg-muted { fill:#807886; font:400 10px var(--body); }
.ht-start-small-button { padding:5px 8px; border:1px solid #ffffff23; border-radius:4px; color:#d9c9cf; background:#ffffff03; font:500 10px/1.4 var(--body); cursor:pointer; letter-spacing:0; }
.ht-start-definition-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:24px; }
.ht-start-definition-grid > div + div { padding-left:18px; border-left:1px solid var(--line); }
.ht-start-definition-grid p { color:#b5aab8; font-size:12px; line-height:1.8; margin:0; }
.ht-start-toggle { display:inline-flex; align-items:center; gap:7px; color:#d2bfca; font:500 11px var(--body); letter-spacing:0; cursor:pointer; }
.ht-start-toggle input { width:14px; height:14px; margin:0; }
.ht-start-fib-bb { fill:#7db79719; stroke:#8bbd9f; }
.ht-start-svg-zone-label { fill:#c1d7c8; font:500 13px var(--body); }
.ht-start-fib-drawings { opacity:0; transition:opacity .3s; }
.ht-start-fib-demo[data-drawings="true"] .ht-start-fib-drawings { opacity:1; }
.ht-start-fib-drawings path { fill:none; stroke:#e7be65; stroke-width:1; stroke-dasharray:4 4; }
.ht-start-fib-drawings circle { fill:#17130c; stroke:#e7be65; stroke-width:1.5; }
.ht-start-fib-drawings rect { fill:#f7c54815; stroke:none; }
.ht-start-fib-drawings text { fill:#e4bf72; font:500 11px var(--body); }
.ht-start-comparison { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin:22px 0; }
.ht-start-comparison > div { border-top:1px solid var(--line); padding-top:15px; }
.ht-start-state-tag { display:inline-block; color:#b1c7ba; font:600 9px var(--body); letter-spacing:1px; }
.ht-start-state-tag.is-preview { color:#d9b789; }
.ht-start-comparison p { margin:8px 0 0; color:#b9adbd; font-size:12px; line-height:1.8; }
.ht-start-alert-modes { display:flex; flex-wrap:wrap; gap:9px; }
.ht-start-alert-modes button { padding:10px 14px; border:1px solid #ffffff23; border-radius:6px; background:#0c0d10; color:#b6abbc; font:500 12px var(--body); cursor:pointer; }
.ht-start-alert-modes button[aria-pressed="true"] { border-color:#ef8b7366; color:#ffc0aa; background:#ef625a0b; }
.ht-start-alert-fields { padding:16px 20px 20px; }
.ht-start-alert-fields > div { padding:0 0 14px; margin-bottom:12px; border-bottom:1px solid var(--line); }
.ht-start-alert-fields span,.ht-start-alert-fields small { display:block; color:#9c92a4; font-size:10px; line-height:1.7; }
.ht-start-alert-fields strong { display:block; padding-top:3px; font-size:12px; }
.ht-start-alert-fields > .ht-start-illustrated-cta { padding:9px; margin-top:17px; border:1px solid #dd8b724b; border-radius:5px; color:#e2b1a0; background:#e57d6309; font-size:10px; text-align:center; }
.ht-start-extension-preview { display:flex; align-items:center; gap:18px; padding:22px; margin:20px 0; border:1px solid #ef625a25; border-radius:10px; background:linear-gradient(135deg,#ef625a0a,transparent); }
.ht-start-extension-icon { display:grid; place-items:center; flex-shrink:0; width:55px; height:55px; border:1px solid #ef625a35; border-radius:12px; background:#ef625a06; color:#e3a08e; }
.ht-start-extension-icon svg { width:26px; height:26px; stroke:currentColor; stroke-width:1.2; }
.ht-start-extension-preview strong { display:block; font:600 16px/1.5 var(--display); }
.ht-start-extension-preview p { margin:6px 0 0; color:#b6a7b9; font-size:12px; line-height:1.8; }
.ht-start-finish { background:linear-gradient(145deg,#21171b88,#101114 70%); border-color:#ef625a30; }
.ht-start-checklist { padding:0; margin:0; border:0; min-width:0; }
.ht-start-checklist label { display:flex; align-items:flex-start; gap:12px; padding:13px 0; border-bottom:1px solid var(--line); cursor:pointer; color:#c6b9c9; font-size:13px; line-height:1.8; }
.ht-start-checklist input { flex-shrink:0; margin:4px 0 0; width:16px; height:16px; }
.ht-start-checklist label:has(input:checked) { color:#d4e1d9; }
.ht-start-step > .ht-start-checklist-status { color:#d2aaa0; font-size:11px; margin:13px 0 24px; }
.ht-start-help-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.ht-start-help-grid > .ht-start-more { margin:0; }
.ht-start-finish-links { padding-top:8px; }
.ht-start-sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.ht-start :is(a,button,input,select,summary):focus-visible { outline:2px solid #ffb39b; outline-offset:4px; }
@media(max-width:1100px) { .ht-start-layout { grid-template-columns:165px minmax(0,1fr); gap:22px; } .ht-start-step { padding:26px; } .ht-start-intro { gap:38px; } .ht-start-mode-buttons strong { font-size:15px; } }
@media(max-width:900px) {
  .ht-start-intro { grid-template-columns:1fr; gap:30px; margin-bottom:30px; }
  .ht-start-route { display:none; }
  .ht-start-layout { display:block; }
  .ht-start-nav { z-index:6; top:calc(var(--site-announcement-height,0px) + 4px); margin:0 0 22px; padding:9px 0; background:#0b0c0ef5; border-bottom:1px solid #ffffff18; }
  .ht-start-nav > .ht-start-kicker,.ht-start-nav-help { display:none; }
  .ht-start-nav ol { display:flex; gap:6px; margin:0; padding:3px 0; overflow-x:auto; scrollbar-width:thin; }
  .ht-start-nav li { flex-shrink:0; margin:0; }
  .ht-start-nav li a { min-height:43px; font-size:11px; white-space:nowrap; }
  .ht-start-step { scroll-margin-top:110px; }
}
@media(max-width:600px) {
  .ht-start { margin-block:66px 56px; }
  .ht-start-intro h2 { font-size:39px; letter-spacing:-1.5px; }
  .ht-start .ht-start-lead { font-size:15px; }
  .ht-start-actions { gap:16px 20px; margin-top:21px; }
  .ht-start-step { padding:22px 17px; border-radius:11px; margin-bottom:18px; }
  .ht-start-step-heading { gap:12px; margin-bottom:20px; align-items:flex-start; }
  .ht-start-number { width:36px; height:36px; border-radius:9px; font-size:12px; }
  .ht-start h3 { font-size:24px; }
  .ht-start-step-heading .ht-start-kicker { font-size:8px; margin-bottom:4px; }
  .ht-start-split { grid-template-columns:1fr; gap:20px; }
  .ht-start-step > p,.ht-start-instructions { font-size:13px; }
  .ht-start-mode-buttons { grid-template-columns:1fr; gap:7px; }
  .ht-start-mode-buttons > button { display:grid; grid-template-columns:1fr 1fr; column-gap:15px; padding:13px; }
  .ht-start-mode-buttons > button > span { grid-column:1/-1; margin-bottom:5px; font-size:8px; }
  .ht-start-mode-buttons strong { min-height:0; font-size:15px; }
  .ht-start-mode-buttons small { font-size:10px; }
  .ht-start-timeframe-demo { padding:16px 12px; }
  .ht-start-demo-top { align-items:flex-start; }
  .ht-start-demo-top .ht-start-kicker { font-size:8px; }
  .ht-start-auto-counts { justify-content:flex-start; gap:13px; }
  .ht-start-auto-counts > span { display:none; }
  .ht-start-pool { gap:6px; }
  .ht-start-pool > label { padding:7px; font-size:10px; }
  .ht-start select { font-size:12px; }
  .ht-start-definition-grid { grid-template-columns:1fr; gap:15px; }
  .ht-start-definition-grid > div + div { border-left:0; padding:15px 0 0; border-top:1px solid var(--line); }
  .ht-start-comparison { gap:15px; }
  .ht-start-comparison p { font-size:11px; }
  .ht-start-illustration figcaption { padding:12px; font-size:8px; letter-spacing:.7px; gap:8px; }
  .ht-start-small-button { font-size:9px; padding:6px; }
  .ht-start-illustration > .ht-start-caption { padding-inline:12px; font-size:9px; }
  .ht-start-member-zones text,.ht-start-cluster-zone text,.ht-start-svg-zone-label { font-size:22px; }
  .ht-start-fib-drawings text { font-size:18px; }
  .ht-start-extension-preview { padding:17px 13px; gap:13px; align-items:flex-start; }
  .ht-start-extension-icon { width:40px; height:40px; border-radius:8px; }
  .ht-start-extension-preview strong { font-size:14px; }
  .ht-start-help-grid { grid-template-columns:1fr; gap:15px; }
  .ht-start-checklist label { font-size:12px; }
  .ht-start-finish-links { gap:19px; }
}
@media(prefers-reduced-motion:reduce) { .ht-start *, .ht-start *::before,.ht-start *::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; } }
@media(forced-colors:active) { .ht-start-step,.ht-start-button,.ht-start-number,.ht-start-illustration,.ht-start-mode-buttons > button,.ht-start-callout { border-color:CanvasText; } .ht-start-tf-chips > .is-chart,.ht-start-mode-buttons > button[aria-pressed="true"] { outline:2px solid Highlight; } }