/* GSX Engineering · gsx.css · built by assemble_gsx3.py from css/*.css in filename order. Edit the sources, not this file. */
/* ===== css/00-base.css ===== */
/* GSX Engineering · 00-base.css (B1): tokens, type, the framed sheet, section heads, the header, skip links, the phone dock
   and the shared components of spec §4 (gsx-ohead, gsx-rule-row, gsx-avail, gsx-ledger, gsx-next, gsx-x).
   Hex values live only between the @tokens markers; the assembler fails the build on a hex value anywhere else in css/. */

/* @tokens */
:root{
--k-paper:#f2f1ec;--k-paper-2:#eae8e1;--k-surface:#faf9f6;
--k-ink:#1d1d1c;--k-ink-2:#353533;--k-muted:#62615c;
--k-line:#cdcac1;--k-line-strong:#88857d;--k-grid:#e7e5de;--k-grid-major:#dedbd3;
--gsx-frame:7px;--gsx-head:56px;--gsx-dock-h:64px;--k-sticky-top:76px;--k-max:1440px}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--k-paper:#0d0e0f;--k-paper-2:#121315;--k-surface:#17191b;--k-line:#2d3033;--k-line-strong:#6b7076;--k-grid:#15171a;--k-grid-major:#1b1e21}}
:root[data-theme="dark"]{--k-paper:#0d0e0f;--k-paper-2:#121315;--k-surface:#17191b;--k-line:#2d3033;--k-line-strong:#6b7076;--k-grid:#15171a;--k-grid-major:#1b1e21}
/* @end-tokens */

html{background:var(--k-paper);scroll-padding-top:var(--k-sticky-top)}
/* one sub-heading size (about 36px at 1440) and a tighter section rhythm: 48-64px within a tone, 56-80px on a tone change */
:root{--k-fs-d3:clamp(1.625rem,1.3rem + 1.1vw,2.25rem);--k-sec-y:clamp(48px,4.4vw,64px);--k-sec-y-tone:clamp(56px,5.6vw,80px)}

/* ---- type: grotesk caps at normal width ---- */
.k-d1{font-size:clamp(2.5rem,1.4rem + 3.7vw,4.75rem);font-stretch:100%;font-weight:700;line-height:.94;letter-spacing:-.03em}
.k-d2{font-size:clamp(2rem,1.25rem + 2.2vw,3rem);font-stretch:100%;font-weight:650;line-height:.98;letter-spacing:-.026em}
.k-d3{font-stretch:100%;font-weight:650;letter-spacing:-.018em;line-height:1}
.k-h3,.k-h4{font-stretch:100%;letter-spacing:-.01em}
.gsx-ico-down{transform:rotate(180deg)}
/* arrow links: the assembler wraps the last word and the arrow in .gsx-lw, so the arrow never sits on a line of its
   own; such a link wraps as text, with its rule under the whole label */
.gsx-lw{white-space:nowrap}
:where(.k-link):has(>.gsx-lw){display:inline-block;max-width:100%}
.gsx-lw>.k-ico{display:inline-block;margin-left:4px;vertical-align:-3px}
.gsx-lw>.gsx-ico-down{vertical-align:-4px}
@media (hover:hover){.k-link:hover .k-ico.gsx-ico-down.gsx-ico-down{transform:rotate(180deg) translateY(-3px)}}

/* ---- the sheet: a 7px margin and a hairline frame fixed to the viewport, content scrolling under it ---- */
.k-page{padding:0 var(--gsx-frame) var(--gsx-frame)}
.gsx-sheet::before,.gsx-sheet::after{content:"";position:fixed;pointer-events:none;z-index:45}
.gsx-sheet::before{inset:0;border:var(--gsx-frame) solid var(--k-paper)}
.gsx-sheet::after{inset:var(--gsx-frame);border:1px solid var(--k-line)}
.gsx-sheet main>.k-sec,.gsx-sheet main>.gsx-say,.gsx-sheet>.k-foot{border-top:1px solid var(--k-line)}
.k-sec>.k-wrap{max-width:var(--k-max)}
/* the margin line keeps its nodes and taps, never its labels (no timecodes, no "Call dropped") */
.k-thread-l,.k-thread>.k-thread-l,.k-thread>i.k-thread-l{display:none}

/* ---- gsx-x corner crosses (the assembler puts two inside each section's opening tag, except the hero) ---- */
.gsx-x{position:absolute;width:11px;height:11px;pointer-events:none;color:var(--k-line-strong);z-index:3}
.gsx-x::before,.gsx-x::after{content:"";position:absolute;background:currentColor}
.gsx-x::before{left:5px;top:0;width:1px;height:11px}
.gsx-x::after{top:5px;left:0;height:1px;width:11px}
.gsx-x.is-l{left:10px;top:10px}.gsx-x.is-r{right:10px;top:10px}

/* ---- skip links: hidden until focused, then top-left on the surface ---- */
.gsx-skip{position:fixed;top:calc(var(--gsx-frame) + 8px + env(safe-area-inset-top,0px));left:calc(var(--gsx-frame) + 8px);z-index:60;padding:14px 18px;border:1.5px solid var(--k-ink);border-radius:var(--k-r-1);background:var(--k-surface);color:var(--k-ink);font:600 var(--k-fs-small)/1 var(--k-f-body);text-decoration:none;transform:translateY(calc(-100% - 64px))}
.gsx-skip:focus{transform:none;outline:var(--k-focus-w) solid var(--k-focus);outline-offset:var(--k-focus-o)}

/* ---- header: sticky ruled cells, 56px, inside the frame (spec §5.1) ---- */
.gsx-nav{position:sticky;top:var(--gsx-frame);z-index:var(--k-z-clock);display:flex;align-items:stretch;min-height:var(--gsx-head);margin-top:var(--gsx-frame);padding-top:env(safe-area-inset-top,0px);background:var(--k-paper);border-bottom:1px solid var(--k-line);box-shadow:0 calc(-1 * var(--gsx-frame)) 0 var(--k-paper)}
.gsx-brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-right:auto;padding:0 clamp(14px,1.8vw,24px);color:var(--k-ink);text-decoration:none;font:700 1.0625rem/1 var(--k-f-display);letter-spacing:-.02em;text-transform:uppercase;white-space:nowrap}
.gsx-brand .gsx-mark{width:26px;height:26px;flex:none;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter}
.gsx-brand:focus-visible{outline-offset:-4px}
.gsx-menu{display:flex;margin:0;padding:0;list-style:none}
.gsx-menu li{display:flex}
.gsx-cell{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:1fr auto;align-content:space-between;min-width:clamp(104px,9.4vw,138px);padding:9px 12px 8px;border-left:1px solid var(--k-line);color:var(--k-ink-2);text-decoration:none;font:500 .6875rem/1.2 var(--k-f-mono);font-stretch:87.5%;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:background-color var(--k-t-ui) var(--k-ease-ui),color var(--k-t-ui) var(--k-ease-ui)}
.gsx-cell::after{content:"";grid-column:1/-1;grid-row:2;justify-self:end;width:6px;height:6px;border-right:1px solid var(--k-line-strong);border-bottom:1px solid var(--k-line-strong)}
.gsx-cell-n{margin-right:8px;color:var(--k-muted)}
.gsx-cell:focus-visible{outline:var(--k-focus-w) solid var(--k-focus);outline-offset:-4px}
@media (hover:hover){.gsx-cell:hover{background:var(--k-paper-2);color:var(--k-ink)}}
/* the current chapter: accent underline plus weight, never color alone */
.gsx-cell[aria-current]{color:var(--k-ink);font-weight:650;box-shadow:inset 0 -2px 0 var(--k-accent)}
.gsx-cell[aria-current] .gsx-cell-n{color:var(--k-ink)}
/* accent cell: the primary CTA, always on screen */
.gsx-cell.is-cta{min-width:clamp(128px,11vw,168px);border-left-color:var(--k-accent);background:var(--k-accent);color:var(--k-accent-ink);font-weight:600}
.gsx-cell.is-cta::after{content:none}
.gsx-cell.is-cta .k-ico{grid-column:1/-1;grid-row:2;justify-self:end;width:16px;height:16px;transition:transform var(--k-t-ui) var(--k-ease-servo)}
@media (hover:hover){.gsx-cell.is-cta:hover{background:var(--k-ink);color:var(--k-paper)}.gsx-cell.is-cta:hover .k-ico{transform:translateX(3px)}}
.gsx-cell.is-cta:focus-visible{outline-color:var(--k-accent-ink)}
.gsx-cta-s{display:none}
/* Menu: a details element, so it opens with JS off */
.gsx-navmenu{display:none}
.gsx-navmenu>summary{height:100%;list-style:none}
.gsx-navmenu>summary::-webkit-details-marker{display:none}
.gsx-navmenu>summary::after{content:none}
.gsx-navmenu>summary .k-ico{grid-column:1/-1;grid-row:2;justify-self:end;width:14px;height:14px;transition:transform var(--k-t-ui) var(--k-ease-servo)}
.gsx-navmenu[open]>summary{background:var(--k-paper-2);color:var(--k-ink)}
.gsx-navmenu[open]>summary .k-ico{transform:rotate(45deg)}
.gsx-navmenu-panel{position:absolute;top:100%;left:0;right:0;max-height:calc(100svh - var(--gsx-head) - 2 * var(--gsx-frame) - env(safe-area-inset-top,0px));overflow:auto;overscroll-behavior:contain;padding:0 0 20px;background:var(--k-paper);border-top:1px solid var(--k-line);border-bottom:1px solid var(--k-line)}
.gsx-navmenu-list{display:grid;grid-template-columns:minmax(0,1fr);margin:0;padding:0;list-style:none}
.gsx-navmenu-list a{display:flex;align-items:center;gap:12px;min-height:52px;padding:8px max(16px,env(safe-area-inset-left,0px));border-bottom:1px solid var(--k-line);color:var(--k-ink);text-decoration:none;font:650 1.0625rem/1.15 var(--k-f-display);letter-spacing:-.01em;text-transform:uppercase}
.gsx-navmenu-list .gsx-cell-n{min-width:2.4ch;margin:0;font:500 .75rem/1 var(--k-f-mono);font-stretch:87.5%;letter-spacing:.06em}
.gsx-navmenu-list a[aria-current]{box-shadow:inset 3px 0 0 var(--k-accent)}
.gsx-navmenu-list a:focus-visible{outline-offset:-4px}
@media (hover:hover){.gsx-navmenu-list a:hover{background:var(--k-paper-2)}}
.gsx-navmenu-free{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;padding:18px max(16px,env(safe-area-inset-left,0px)) 4px}
.gsx-navmenu-free>.k-mono-s{flex:1 0 100%;margin:0;color:var(--k-muted)}
.gsx-navmenu-free ul{display:flex;flex-wrap:wrap;gap:12px 24px;margin:0;padding:0;list-style:none}
.gsx-navmenu-free .k-link{min-height:44px}
.gsx-navmenu-cta{padding:20px max(16px,env(safe-area-inset-left,0px)) 0}
.gsx-navmenu-cta .k-btn{width:100%}
@media (min-width:768px){
 .gsx-navmenu-list{grid-template-columns:repeat(3,minmax(0,1fr))}
 .gsx-navmenu-list li{border-left:1px solid var(--k-line)}
 .gsx-navmenu-list li:nth-child(3n+1){border-left:0}
 .gsx-navmenu-free{padding-inline:clamp(16px,2.4vw,32px)}
 .gsx-navmenu-free>.k-mono-s{flex:0 0 auto}
 .gsx-navmenu-cta{padding-inline:clamp(16px,2.4vw,32px)}
 .gsx-navmenu-cta .k-btn{width:auto}
}
@media (max-width:1179.98px){.gsx-menu li:not(.gsx-mid){display:none}.gsx-navmenu{display:block}}
@media (max-width:959.98px){.gsx-menu{display:none}.gsx-cta-l{display:none}.gsx-cta-s{display:inline}.gsx-cell{min-width:0}.gsx-navmenu>summary{min-width:76px}.gsx-cell.is-cta{min-width:112px}}
/* 400-439px: the full wordmark only fits beside Menu and the CTA cell at a smaller size */
@media (min-width:400px) and (max-width:439.98px){.gsx-brand{gap:8px;padding-inline:12px;font-size:.875rem}}
@media (max-width:399.98px){
 .gsx-brand{gap:8px;padding-inline:12px}
 .gsx-brand-x{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}

/* ---- section heads (kit C1): title left, lede or "The problem" right from 900px ---- */
.k-head-slug .k-tag{font-family:var(--k-f-mono)}
.k-head>.k-head-idx{display:none!important}
.k-head-time{display:none}
@container k-head (min-width:900px){
 .k-head:not(.is-wide):not(.has-switch):not(:has(.k-margin))>.k-d2{grid-column:1/8}
 .k-head:not(.is-wide):not(.has-switch):not(:has(.k-margin))>.k-lede{grid-column:9/13;grid-row:2;align-self:end;margin:0;font-size:var(--k-fs-body);color:var(--k-muted)}
 .k-head.gsx-ohead>.gsx-ohead-why{grid-column:9/13;grid-row:2;align-self:end;margin:0}
}
/* gsx-ohead: the outcome head, kit C1 plus a "The problem" column (spec §4.1) */
.gsx-ohead-why{display:grid;gap:10px;margin-top:clamp(20px,2.2vw,28px);padding-top:12px;border-top:1px solid var(--k-line)}
.gsx-ohead-why>.k-mono-s{margin:0;color:var(--k-muted)}
.gsx-ohead-why>.k-body{color:var(--k-ink-2)}
.gsx-ohead-why>.k-demo{margin-top:6px}

/* ---- gsx-rule-row / gsx-rule-cell: ruled card rows (spec §4.2) ----
   Rules sit between cells only. Every cell draws its own top and left rule; the row is shifted 1px left and clipped
   on that side (2px, so a rule at a fractional x leaves no sliver), so first-column rules vanish at any column count. --gsx-cols is the count at 1200px and up; sections
   that need other breakpoints set --gsx-c (the live count) in their own css. */
.gsx-rule-row{--gsx-c:1;display:grid;grid-template-columns:repeat(var(--gsx-c),minmax(0,1fr));margin:0 0 0 -1px;padding:0;list-style:none;border-bottom:1px solid var(--k-line);clip-path:inset(-200px -200px -200px 2px)}
@media (min-width:600px){.gsx-rule-row{--gsx-c:2}}
/* rows whose first-column cells have no left padding (plan, found, agents below 480px) are neither shifted nor clipped,
   because the 2px clip would cut the first pixels of every line; those rows drop their first-column rules themselves */
#gsx-plan .gsx-plan-cells,#gsx-found .gsx-found-feats{margin-left:0;clip-path:none}
@media (max-width:479.98px){#gsx-booked .gsx-agents{margin-left:0;clip-path:none}#gsx-booked .gsx-agents>.gsx-rule-cell{border-left:0}}
@media (min-width:1200px){.gsx-rule-row{--gsx-c:var(--gsx-cols,3)}}
.gsx-rule-cell{position:relative;display:flex;flex-direction:column;gap:12px;min-width:0;padding:clamp(16px,1.6vw,24px) clamp(16px,1.6vw,24px) clamp(20px,2vw,28px);border-top:1px solid var(--k-line);border-left:1px solid var(--k-line)}
.gsx-rule-cell>*{margin:0}
.gsx-rule-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;color:var(--k-muted)}
.gsx-rule-top>.k-mono-s:first-child{color:var(--k-ink)}
.gsx-idx{font-variant-numeric:tabular-nums}

/* ---- gsx-avail: availability tag, a shape plus a label (spec §4.3) ---- */
.gsx-avail{display:inline-flex;align-items:center;gap:8px;width:fit-content;color:var(--k-ink-2)}
.gsx-avail>i{flex:none;width:10px;height:10px;border:1.5px solid var(--k-accent);forced-color-adjust:none}
.gsx-avail.is-every>i{background:var(--k-accent)}
.gsx-avail.is-gp>i{background:linear-gradient(90deg,var(--k-accent) 50%,transparent 50%)}
.gsx-avail.is-quote>i{border-color:var(--k-line-strong);background:transparent}

/* ---- gsx-ledger: inclusion and price strip, one per outcome chapter (spec §4.4) ---- */
.gsx-ledger{position:relative;display:grid;grid-template-columns:minmax(0,1fr);margin:clamp(40px,5vw,64px) 0 0;padding:0}
.gsx-ledger::before,.gsx-ledger::after{content:"";position:absolute;left:0;right:0;height:1px;background:var(--k-line-strong);transform-origin:0 50%}
.gsx-ledger::before{top:0}.gsx-ledger::after{bottom:0}
.gsx-ledger>div{display:grid;align-content:start;gap:8px;min-width:0;padding:16px 18px 18px 0}
.gsx-ledger>div+div{border-top:1px solid var(--k-line)}
.gsx-ledger dt{margin:0;color:var(--k-ink)}
.gsx-ledger dd{margin:0;color:var(--k-ink-2)}
.gsx-ledger .k-price-m{font-size:1.0625rem}
@media (min-width:600px){
 .gsx-ledger{grid-template-columns:repeat(2,minmax(0,1fr))}
 .gsx-ledger>div{padding-left:18px;border-top:1px solid var(--k-line)}
 .gsx-ledger>div:nth-child(-n+2){border-top:0}
 .gsx-ledger>div:nth-child(odd){padding-left:0}
 .gsx-ledger>div:nth-child(even){border-left:1px solid var(--k-line)}
}
@media (min-width:1024px){
 .gsx-ledger{grid-template-columns:repeat(4,minmax(0,1fr))}
 .gsx-ledger>div:nth-child(n){border-top:0}
 .gsx-ledger>div:nth-child(n+2){padding-left:18px;border-left:1px solid var(--k-line)}
}

/* ---- gsx-next: the section-end CTA row (spec §4.5) ---- */
.gsx-next{position:relative;display:grid;gap:16px 32px;align-items:center;margin-top:clamp(40px,5vw,64px);padding:clamp(18px,2vw,24px) 0}
.gsx-next::before,.gsx-next::after{content:"";position:absolute;left:0;right:0;height:1px;background:var(--k-line);transform-origin:0 50%}
.gsx-next::before{top:0}.gsx-next::after{bottom:0}
.gsx-next-say{margin:0;max-width:30ch;text-wrap:balance}
.gsx-next-act{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}
@media (min-width:600px){.gsx-next{grid-template-columns:minmax(0,1fr) auto}.gsx-next-act{justify-content:flex-end}}
/* 600-1199px: the button sits over the link, so the nudge keeps room on the left */
@media (min-width:600px) and (max-width:1199.98px){.gsx-next-act{display:grid;justify-items:end;gap:14px}}
@media (max-width:599.98px){.gsx-next-act{display:grid;justify-items:start}.gsx-next-act>.k-btn{width:100%}}
/* 600-767px (integrator): two columns left a 4-line nudge, so the nudge takes the full row and the actions sit under it, button first */
@media (min-width:600px) and (max-width:767.98px){.gsx-next{grid-template-columns:minmax(0,1fr)}.gsx-next-say{max-width:36ch}.gsx-next-act{display:flex;justify-content:flex-start;justify-items:start;gap:14px 28px}}

/* ledger and next rows reveal as rules: their hairlines draw, the text stays put (as the kit does for its plan ledger) */
html.k-js:not(.k-reduced):not(.k-late) :is(.gsx-ledger,.gsx-next)[data-k-reveal="rule"][data-k-reveal]:not(.is-in){transform:none}
@media (prefers-reduced-motion:no-preference){
 html.k-js:not(.k-reduced):not(.k-late) :is(.gsx-ledger,.gsx-next)[data-k-reveal]:not(.is-in)::before,
 html.k-js:not(.k-reduced):not(.k-late) :is(.gsx-ledger,.gsx-next)[data-k-reveal]:not(.is-in)::after{transform:scaleX(0)}
 html.k-js:not(.k-reduced) :is(.gsx-ledger,.gsx-next)[data-k-reveal]::before,
 html.k-js:not(.k-reduced) :is(.gsx-ledger,.gsx-next)[data-k-reveal]::after{transition:transform var(--k-t-line) var(--k-ease-settle)}
 html.k-js:not(.k-reduced) :is(.gsx-ledger,.gsx-next)[data-k-reveal]::after{transition-delay:120ms}
 html.k-js:not(.k-live):not(.k-reduced) :is(.gsx-ledger,.gsx-next)[data-k-reveal]:not(.is-in)::before,
 html.k-js:not(.k-live):not(.k-reduced) :is(.gsx-ledger,.gsx-next)[data-k-reveal]:not(.is-in)::after{animation:k-failsafe 1ms 2.5s both}
}

/* ---- gsx-dock: the phone CTA bar below 768px (spec §5.3) ---- */
.gsx-dock{position:fixed;left:var(--gsx-frame);right:var(--gsx-frame);bottom:calc(var(--gsx-frame) + env(safe-area-inset-bottom,0px));z-index:46;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--k-line);background:var(--k-paper);transition:transform 200ms var(--k-ease-settle),visibility 0s}
.gsx-dock>.k-btn{min-height:56px;padding:0 8px;border:0;border-radius:0;letter-spacing:.05em;text-align:center}
.gsx-dock>.k-btn+.k-btn{border-left:1px solid var(--k-line)}
.gsx-dock>.k-btn:focus-visible{outline-offset:-5px}
.gsx-dock>.k-btn.is-solid:focus-visible{outline-color:var(--k-accent-ink)}
html.k-js .gsx-dock:not(.is-on){transform:translateY(calc(100% + var(--gsx-frame) + env(safe-area-inset-bottom,0px) + 2px));visibility:hidden;transition:transform 200ms var(--k-ease-settle),visibility 0s 200ms}
/* if gsx.js never runs (no html.gsx-on), nothing would ever turn the dock on: it comes back after 2.5s */
html.k-js:not(.gsx-on) .gsx-dock:not(.is-on){animation:gsx-dock-back 1ms 2.5s both}
@keyframes gsx-dock-back{to{transform:none;visibility:visible}}
html.k-reduced .gsx-dock,html.k-reduced .gsx-dock:not(.is-on){transition:none}
.gsx-menu-open .gsx-dock,body:has(.gsx-navmenu[open]) .gsx-dock{visibility:hidden}
@media (min-width:768px){.gsx-dock{display:none}}
@media (max-width:767.98px){
 .k-page{padding-bottom:calc(var(--gsx-frame) + var(--gsx-dock-h) + env(safe-area-inset-bottom,0px))}
 :where(a,button,input,select,textarea,summary,label,[tabindex]){scroll-margin-bottom:80px}
}

/* ---- phone touch targets (spec §2.6): every standalone text link gets a 44px hit area (kit k-link has no pseudo-
   elements); links that already draw their own hit area keep it ---- */
@media (max-width:767.98px){
 :is(main,footer) a.k-link:not(.gsx-oc-go){position:relative}
 :is(main,footer) a.k-link:not(.gsx-oc-go)::after{content:"";position:absolute;inset:-12px -6px}
 #k-sec-08 .gsx-card-foot>a.k-link{position:static}
 #gsx-booked .gsx-agent-foot>.k-link::before{content:none}
}

/* ---- reveals never hide what holds keyboard focus (js/01-reveal.js also reveals the block at once) ---- */
html.k-js :is([data-k-reveal],[data-k-stagger]>*):is(:focus-visible,:focus-within){opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}

/* ---- section-end CTA at phone widths: the button label keeps to one line ---- */
@media (max-width:399.98px){.gsx-next .k-btn{padding-inline:12px;letter-spacing:.04em}}

/* ---- the kit's bracket glyphs around tag numbers are drawing, not text: screen readers skip them ---- */
.k-tag b::before{content:"[";content:"[" / ""}
.k-tag b::after{content:"]";content:"]" / ""}
/* ===== css/01-hero.css ===== */
/* GSX Engineering · 01-hero.css (B2): S1 hero. DOM order is copy, strip, art (the phone order). From 960px the title
   band, the strip and the drawing keep to the same wrap as every other section. The drawing comes first only at 1360px
   wide and 800px tall or more, where it fits above the band and the H1 still reaches the H2 size; on laptops and tablets
   in landscape the headline, the CTAs and the four outcomes lead and the drawing follows.
   Tokens only; every SVG stroke and fill comes from kit art classes. */

/* ---- shell: the hero breaks out of the wrap so its rules run edge to edge inside the frame ---- */
.k-hero-sec.k-sec{--gsx-hx:max(var(--k-gutter),env(safe-area-inset-left,0px));--gsx-hxr:max(var(--k-gutter),env(safe-area-inset-right,0px));padding:0;background-image:none}
.gsx-hero.k-hero-grid{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "strip" "art";gap:0;max-width:none;min-height:0;padding:0}
.gsx-hero>.k-hero-copy{grid-area:copy}
.gsx-hero>.gsx-outcomes{grid-area:strip}
.gsx-hero>.k-hero-figcol{grid-area:art;position:static;margin:0;min-width:0}

/* ---- title band ---- */
.gsx-hero .k-hero-copy{display:grid;grid-template-columns:minmax(0,1fr);align-items:start;padding:clamp(18px,4vw,28px) var(--gsx-hxr) clamp(28px,6vw,40px) var(--gsx-hx);container-type:inline-size}
.gsx-hero .k-hero-copy>*{margin:0}
.gsx-hero .k-hero-copy>.k-dim{display:none}
/* proof cells: three mono cells with a hairline in the gap between them. A cell that starts a wrapped line has no
   padding, so every line starts on the H1's edge; its hairline falls left of the row and the row's clip hides it */
.gsx-hero .k-hero-copy>.gsx-proof{display:flex;flex-wrap:wrap;column-gap:25px;margin:0;padding:0;list-style:none;clip-path:inset(-14px -14px -14px 0)}
.gsx-proof>li{position:relative;display:flex;align-items:center;min-height:28px;padding:2px 0;color:var(--k-ink-2);white-space:nowrap}
.gsx-proof>li+li::after{content:"";position:absolute;top:0;bottom:0;left:-13px;width:1px;background:var(--k-line)}
.gsx-proof>li:first-child::before{content:"";flex:none;width:6px;height:6px;margin-right:10px;background:var(--k-accent);forced-color-adjust:none}
/* each cell links to "Who builds it"; the hit area grows past the text */
.gsx-proof-a{position:relative;color:inherit;text-decoration:underline;text-decoration-color:var(--k-line-strong);text-decoration-thickness:1px;text-underline-offset:3px}
.gsx-proof-a::after{content:"";position:absolute;inset:-10px -6px}
.gsx-proof-a:focus-visible{outline:var(--k-focus-w) solid var(--k-focus);outline-offset:2px}
@media (hover:hover){.gsx-proof-a:hover{color:var(--k-ink);text-decoration-color:var(--k-accent)}}
/* H1: three rows on phones; "Get found. Get booked." shares a row from 600px; never wider than its column
   (13.4em is the measured width of that row, 9em of "Stay protected.") */
.gsx-hero .k-hero-copy>h1{margin-top:clamp(14px,3vw,22px)}
.gsx-hero h1.k-d1{font-size:min(clamp(2.5rem,1.4rem + 3.7vw,4.75rem),calc(100cqi / 9))}
.gsx-hero .gsx-row{display:block}
.gsx-hero .k-hero-copy>.k-lede{margin-top:clamp(16px,3vw,22px);max-width:62ch}
.gsx-hero .k-hero-cta{margin-top:clamp(20px,4vw,26px)}
.gsx-hero .k-hero-copy>.k-hero-hint{margin-top:clamp(14px,3vw,18px)}
@media (min-width:600px){
 .gsx-hero .gsx-row>.k-ln{display:inline-block}
 .gsx-hero h1.k-d1{font-size:min(clamp(2.5rem,1.4rem + 3.7vw,4.75rem),calc(100cqi / 13.4))}
}
@media (max-width:599.98px){
 .gsx-hero .k-hero-copy>.gsx-proof{column-gap:17px}
 .gsx-proof>li{min-height:24px;font-size:var(--k-fs-micro);letter-spacing:.06em}
 .gsx-proof>li+li::after{left:-9px}
 .gsx-proof>li:first-child::before{margin-right:8px}
 .gsx-hero .k-hero-cta{display:grid;justify-items:start;gap:16px;width:100%}
 .gsx-hero .k-hero-cta>.k-btn{width:100%}
}

/* ---- outcome strip: four ruled cells, each a stretched chapter link plus a free-check chip above it ---- */
.gsx-outcomes{border-top:1px solid var(--k-line)}
.gsx-oc-list{display:grid;grid-template-columns:minmax(0,1fr);margin:0 0 0 -1px;padding:0;list-style:none;clip-path:inset(-200px -200px -200px 1px)}
.gsx-oc{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0;min-height:72px;padding:16px var(--gsx-hxr) 18px var(--gsx-hx);border-left:1px solid var(--k-line);transition:background-color var(--k-t-ui) var(--k-ease-ui)}
.gsx-oc+.gsx-oc{border-top:1px solid var(--k-line)}
.gsx-oc-main{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;column-gap:10px;row-gap:4px;width:100%;color:var(--k-ink);text-decoration:none}
.gsx-oc-main::after{content:"";position:absolute;inset:0}
.gsx-oc-main:focus-visible{outline:none}
.gsx-oc-main:focus-visible::after{outline:var(--k-focus-w) solid var(--k-focus);outline-offset:-4px}
.gsx-oc-n{grid-column:1;color:var(--k-muted)}
.gsx-oc-t{grid-column:2;margin:0;font-size:clamp(1.125rem,1rem + .4vw,1.3125rem);line-height:1.15}
.gsx-oc-s{grid-column:1/-1;max-width:60ch;color:var(--k-ink-2)}
.gsx-oc-p{grid-column:1/-1;margin-top:2px;color:var(--k-ink)}
.gsx-oc-go.k-chip{position:relative;z-index:1;min-height:32px;padding:4px 10px;color:var(--k-ink);text-decoration:none;white-space:normal;transition:border-color var(--k-t-ui) var(--k-ease-ui),color var(--k-t-ui) var(--k-ease-ui)}
.gsx-oc-go .k-ico{flex:none;width:13px;height:13px;transition:transform var(--k-t-ui) var(--k-ease-servo)}
.gsx-oc-go:focus-visible{outline:var(--k-focus-w) solid var(--k-focus);outline-offset:2px}
@media (hover:hover){
 .gsx-oc:hover{background:var(--k-paper-2)}
 .gsx-oc-go:hover{border-color:var(--k-accent);color:var(--k-accent)}
 .gsx-oc-go:hover .k-ico{transform:translateX(3px)}
}
@media (pointer:coarse){.gsx-oc-go.k-chip{min-height:44px;padding-inline:12px}}
@media (min-width:600px){
 .gsx-oc-list{grid-template-columns:repeat(2,minmax(0,1fr))}
 .gsx-oc{padding:16px clamp(16px,2vw,24px) 18px}
 .gsx-oc:nth-child(odd){padding-left:var(--gsx-hx)}
 .gsx-oc:nth-child(even){padding-right:var(--gsx-hxr)}
 .gsx-oc+.gsx-oc{border-top:0}
 .gsx-oc:nth-child(n+3){border-top:1px solid var(--k-line)}
}
/* four across (the strip keeps to the wrap from 960px, so the first cell's text is flush with the H1) */
@media (min-width:1200px){
 .gsx-outcomes{--gsx-ocp:clamp(14px,1.1vw,16px)}
 .gsx-oc-list{grid-template-columns:repeat(4,minmax(0,1fr))}
 .gsx-oc,.gsx-oc:nth-child(odd),.gsx-oc:nth-child(even){gap:8px;padding:12px 10px 14px var(--gsx-ocp)}
 .gsx-oc:first-child{padding-left:0}
 .gsx-oc:nth-child(n+3){border-top:0}
 .gsx-oc-t{font-size:1.125rem}
 .gsx-oc-s{font-size:.78125rem;line-height:1.4}
 .gsx-oc-main{row-gap:3px}
 .gsx-oc-p{margin-top:0}
 .gsx-oc-go.k-chip{min-height:26px;padding-block:2px}
}

/* ---- A1 parts list additions: entry price (types on with its row) and the sibling "Go" link ---- */
.gsx-hero .k-bom li{display:flex;align-items:center;gap:8px}
.gsx-hero .k-bom-row{position:relative;display:flex;flex:1 1 auto;flex-wrap:wrap;align-items:baseline;column-gap:10px;row-gap:2px;min-width:0}
.gsx-hero .k-bom-row b{flex:0 1 auto;min-width:0}
.gsx-bom-price{flex:none;color:var(--k-muted);white-space:nowrap;transition:opacity var(--k-t-ui) var(--k-ease-ui) .12s}
.gsx-hero .k-bom-row .k-bom-note{flex:1 0 100%}
.gsx-bom-go{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:none;min-width:44px;min-height:44px;color:var(--k-ink);font:600 var(--k-fs-label)/1 var(--k-f-mono);font-stretch:87.5%;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;transition:opacity var(--k-t-ui) var(--k-ease-ui),color var(--k-t-ui) var(--k-ease-ui),border-color var(--k-t-ui) var(--k-ease-ui)}
.gsx-bom-go-t{padding-bottom:2px;border-bottom:1.5px solid var(--k-accent)}
.gsx-bom-go .k-ico{width:14px;height:14px;transition:transform var(--k-t-ui) var(--k-ease-servo)}
.gsx-bom-go:focus-visible{outline:var(--k-focus-w) solid var(--k-focus);outline-offset:-2px}
@media (hover:hover){.gsx-bom-go:hover{color:var(--k-accent)}.gsx-bom-go:hover .k-ico{transform:translateX(3px)}}
/* the price and the link wait for their row to type on (JS only; never hidden with JS off) */
@media (prefers-reduced-motion:no-preference){
 html.k-js:not(.k-reduced) .k-hero-fig .k-bom-row:not(.is-typed) .gsx-bom-price{opacity:0}
 html.k-js:not(.k-reduced) .k-hero-fig li:has(>.k-bom-row:not(.is-typed))>.gsx-bom-go:not(:focus-visible){opacity:0}
 html.k-js:not(.k-live) .k-hero-fig :is(.gsx-bom-price,.gsx-bom-go){animation:k-failsafe 1ms 2.5s both}
}

/* ---- A1 below 960px: the drawing caps its width; the list sits under it (narrow) or beside it (560px+ figure) ---- */
.gsx-hero .k-hero-figcol{padding:clamp(24px,5vw,40px) var(--gsx-hxr) clamp(28px,6vw,48px) var(--gsx-hx);border-top:1px solid var(--k-line)}
.gsx-hero .k-hero-fig{width:100%;max-width:880px;margin-inline:auto;padding:12px 16px}
@media (max-width:599.98px){.gsx-hero .k-hero-fig{padding:0;background-image:none}}
@container (max-width:559.98px){
 .gsx-hero .k-hero-body{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--k-s-5)}
 .gsx-hero .k-hero-plot{width:min(100%,340px);margin-inline:auto}
 .gsx-hero .k-hero-art{width:149.53%;margin-left:-3.738%}
 .gsx-hero .k-bom{display:grid;grid-template-columns:minmax(0,1fr);position:static;border-top:1px solid var(--k-line);opacity:1}
 .gsx-hero .k-bom li{position:static;transform:none;border-bottom:1px solid var(--k-line)}
 .gsx-hero .k-bom-row{min-height:52px;padding:8px 0 8px 40px}
 .gsx-hero .k-bom-row .k-balloon{display:inline-grid;position:absolute;left:0;top:50%;transform:translateY(-50%)}
}
@container (min-width:560px){
 .gsx-hero .k-hero-body{display:grid;grid-template-columns:minmax(0,44fr) minmax(0,56fr);gap:0;padding-bottom:20px}
 .gsx-hero .k-hero-art{width:149.53%;margin-left:-3.738%}
 .gsx-hero .k-bom{position:relative;inset:auto;display:block;border:0}
 .gsx-hero .k-bom li{position:absolute;left:0;right:0;top:var(--y);transform:translateY(-50%);border:0;padding-left:8px}
 .gsx-hero .k-bom-row{padding:2px 0}
 .gsx-hero .k-bom-row .k-balloon{display:none}
}

/* ---- 960px and up: one wrap for the band, the strip and the drawing; the parts list loses its prices (the strip
   carries every entry price) and its links become 32px square arrows ---- */
@media (min-width:960px){
 .gsx-hero>*{margin-inline:calc(max(0px,(100% - var(--k-max)) / 2) + var(--gsx-hx)) calc(max(0px,(100% - var(--k-max)) / 2) + var(--gsx-hxr))}
 .gsx-hero>:is(.k-hero-copy,.k-hero-figcol){padding-inline:0}
 .gsx-hero .k-hero-copy{grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:auto auto auto auto;padding-block:0}
 .gsx-hero .gsx-row{white-space:nowrap}
 .gsx-hero .k-hero-copy>:is(.k-hero-cta,.k-hero-hint){grid-column:2;margin:0;padding-left:20px;border-left:1px solid var(--k-line)}
 .gsx-hero .k-hero-copy>.k-hero-cta{grid-row:3;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
 .gsx-hero .k-hero-cta>.k-btn{padding-inline:16px}
 .gsx-hero .k-hero-copy>.k-hero-hint{grid-row:4;display:block;max-width:none;padding-top:10px;padding-bottom:16px;font-size:var(--k-fs-small)}
 .gsx-hero .k-hero-hint>.k-link{white-space:nowrap}
 .gsx-hero .gsx-bom-price{display:none}
 .gsx-hero .gsx-bom-go{width:32px;height:32px;min-width:32px;min-height:32px;border:1px solid var(--k-line-strong);border-radius:var(--k-r-1)}
 .gsx-hero .gsx-bom-go-t{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 @media (hover:hover){.gsx-hero .gsx-bom-go:hover{border-color:var(--k-accent)}}
}

/* two across from 960 to 1199px: the outer cells sit flush with the wrap */
@media (min-width:960px) and (max-width:1199.98px){.gsx-oc:nth-child(odd){padding-left:0}.gsx-oc:nth-child(even){padding-right:0}}

/* ---- copy first (960 to 1359px, or under 800px tall): proof cells and H1 across the band, then the lede left and the
   CTAs and price line right, then the strip; the drawing follows as on tablets ---- */
@media (min-width:960px) and (not ((min-width:1360px) and (min-height:800px))){
 .gsx-hero .k-hero-copy>.gsx-proof{grid-column:1/-1;grid-row:1;margin-top:clamp(16px,2.6vh,24px)}
 .gsx-hero .k-hero-copy>h1{grid-column:1/-1;grid-row:2;margin:0;padding:clamp(10px,1.8vh,16px) 0 clamp(18px,3vh,26px)}
 .gsx-hero h1.k-d1{font-size:min(4.25rem,calc(100cqi / 13.4))}
 .gsx-hero .k-hero-copy>.k-lede{grid-column:1;grid-row:3/5;max-width:64ch;margin:0;padding:16px 32px 18px 0;border-top:1px solid var(--k-line);font-size:var(--k-fs-body);line-height:1.5;color:var(--k-ink-2)}
 .gsx-hero .k-hero-copy>.k-hero-cta{padding-top:16px;border-top:1px solid var(--k-line)}
}

/* ---- drawing first (1360px wide and 800px tall or more): art band, then the 7/5 title band, then the strip; the whole
   hero fits the first frame. The plot height follows the spec formula. --gsx-band is the measured height of the title
   band plus the strip at 1440 (plus two rules), so art band + title band + strip = the first frame. The drawing is
   cropped to x 4..444 of its 640 viewBox (0.6111 of the plot height), which keeps the "EXPLODED VIEW" label whole. ---- */
@media (min-width:1360px) and (min-height:800px){
 .gsx-hero.k-hero-grid{grid-template-areas:"art" "copy" "strip"}
 .gsx-hero .k-hero-figcol{display:grid;align-content:center;padding-block:clamp(16px,2.2vh,28px);border-top:0}
 .gsx-hero .k-hero-fig{
  --gsx-band:448px;
  --gsx-plot-h:max(260px,calc(100svh - var(--gsx-head) - 2 * var(--gsx-frame) - var(--gsx-band) - 2 * clamp(16px,2.2vh,28px) - 52px));
  --gsx-plot-w:calc(var(--gsx-plot-h) * .6111);
  --gsx-list-w:min(540px,calc(100vw - 2 * var(--gsx-frame) - 2 * var(--k-gutter) - var(--gsx-plot-w) - 32px));
  --gsx-row-h:calc(var(--gsx-plot-h) * .1278);
  width:calc(var(--gsx-plot-w) + var(--gsx-list-w) + 32px);max-width:none;margin-block:-12px;padding:12px 16px;gap:4px}
 .gsx-hero .k-hero-fig .k-hero-body{display:grid;grid-template-columns:var(--gsx-plot-w) minmax(0,1fr);gap:0;padding-bottom:10px}
 .gsx-hero .k-hero-fig .k-hero-plot{width:auto;height:var(--gsx-plot-h);margin:0}
 .gsx-hero .k-hero-fig .k-hero-art{width:145.45%;margin-left:-.909%}
 .gsx-hero .k-hero-fig .k-fig-cap{font-size:.9375rem}
 .gsx-hero .k-hero-fig .k-bom{position:relative;inset:auto;display:block;border:0}
 .gsx-hero .k-hero-fig .k-bom li{position:absolute;left:0;right:0;top:var(--y);transform:translateY(-50%);gap:10px;padding-left:10px;border:0}
 .gsx-hero .k-hero-fig .k-bom-row{column-gap:12px;row-gap:1px;min-height:min(44px,var(--gsx-row-h));padding:0;align-content:center}
 .gsx-hero .k-hero-fig .k-bom-row .k-balloon{display:none}
 .gsx-hero .k-hero-fig .k-bom-row b{font-size:clamp(.6875rem,calc(var(--gsx-plot-h) * .0315),.75rem);line-height:1.2}
 .gsx-hero .k-hero-fig .k-bom-note{font-size:clamp(.75rem,calc(var(--gsx-plot-h) * .036),.875rem);line-height:1.25}
 /* title band: 7/5 split; proof cells and the H1 top left, lede, CTAs and price line right of a hairline */
 .gsx-hero .k-hero-copy{border-top:1px solid var(--k-line)}
 .gsx-hero .k-hero-copy>.gsx-proof{grid-column:1;grid-row:1;align-self:start;margin:16px 24px 0 0}
 .gsx-hero .k-hero-copy>h1{grid-column:1;grid-row:2/5;align-self:start;margin:0;padding:12px 24px 24px 0}
 .gsx-hero h1.k-d1{font-size:min(4.25rem,calc((100cqi * 7 / 12 - 24px) / 13.4))}
 .gsx-hero .k-hero-copy>.k-lede{grid-column:2;grid-row:1/3;max-width:none;margin:0;padding:14px 0 0 20px;border-left:1px solid var(--k-line);font-size:.9375rem;line-height:1.5;color:var(--k-ink-2)}
 .gsx-hero .k-hero-copy>.k-hero-cta{padding-top:14px}
}
/* ===== css/02-free.css ===== */
/* GSX Engineering · 02-free.css (B3): S2 "Start with a free check" (#gsx-free) and its gsx-scan-grid instrument.
   Built on gsx-rule-row (00-base.css). Columns: 1fr 1fr 1fr .8fr from 1360px, 2x2 from 768 to 1359px, stacked below 768px.
   From 768px each card is a subgrid of six rows (label, instrument, title, price, body, CTA), so the instrument bands, the
   dashed rules and the CTAs line up across a row. The quiet fourth card (.is-alt) is a plain column with its links at the foot. */

/* the page paper, read outside the paper-2 tone (which remaps --k-paper inside the section) */
.gsx-sheet{--gsx-page-paper:var(--k-paper)}

/* ---- columns ---- */
@media (max-width:767.98px){.gsx-rule-row.gsx-checks{--gsx-c:1}}
@media (min-width:1200px) and (max-width:1359.98px){.gsx-rule-row.gsx-checks{--gsx-c:2}}
@media (min-width:1360px){.gsx-rule-row.gsx-checks{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,.8fr)}}

/* ---- one card ---- */
.gsx-check{gap:14px}
.gsx-check>.gsx-rule-top{margin-bottom:4px}
.gsx-check-art{display:grid;justify-items:center;align-content:start;min-width:0;padding-block:6px 10px}
.gsx-check-art .k-art{width:100%;max-width:240px;max-height:120px;margin:0}
.gsx-check-art .k-problem-art{max-width:240px;margin:0}
.gsx-scan-fig{display:grid;justify-items:center;gap:10px;width:100%;margin:0}
.gsx-check-t{padding-top:16px;border-top:1px dashed var(--k-line-strong);font-size:clamp(1.5rem,1.2rem + .8vw,1.875rem);line-height:1;text-wrap:balance}
.gsx-check-p{color:var(--k-ink)}
.gsx-check-b{color:var(--k-ink-2)}
.gsx-check-go{display:grid;gap:14px;align-content:end;padding-top:6px}
.gsx-check-go>.k-btn{width:100%;padding-inline:14px}
.gsx-check-end{display:flex;align-items:center;gap:8px;margin:0;color:var(--k-muted)}
.gsx-check-end .k-ico{width:16px;height:16px;color:var(--k-ink)}
.gsx-check-go>.k-link{justify-self:start}

/* the quiet card: page paper behind it, no instrument, Strategy Hour first, then a hairline and the free call */
.gsx-check.is-alt{background:var(--gsx-page-paper)}
.gsx-check.is-alt .gsx-check-t{border-top:0;padding-top:0}
.gsx-check-alt{display:grid;gap:10px;justify-items:start;margin-top:6px;padding-top:16px;border-top:1px solid var(--k-line)}
.gsx-check-alt>.k-small{margin:0;color:var(--k-ink-2)}
/* the narrow fourth column: long link labels wrap in balanced lines, the arrow on the last line */
.gsx-check.is-alt .k-link{align-items:flex-end;text-wrap:balance}
#gsx-free .gsx-nw{white-space:nowrap}
@media (min-width:1360px){.gsx-check.is-alt{padding-inline:clamp(16px,1.4vw,20px)}}

/* the free-check cards keep their CTA at the foot when stacked, too */
.gsx-check>.gsx-check-go{margin-top:auto}

@supports (grid-template-rows:subgrid){
 @media (min-width:768px){
  .gsx-check:not(.is-alt){display:grid;grid-template-rows:subgrid;grid-row:span 6;row-gap:14px}
  .gsx-check.is-alt{grid-row:span 6}
  .gsx-check:not(.is-alt)>.gsx-check-go{margin-top:0}
 }
}

/* ---- gsx-scan-grid: 6 questions x 4 assistants, graded by hand (strokes and fills from kit art classes only) ---- */
.gsx-scan-grid text{letter-spacing:.04em}

/* ---- phones: instruments centred and at most 120px tall, buttons full width (above) ---- */
@media (max-width:767.98px){
 .gsx-check-art{padding-block:8px 12px}
 .gsx-check-t{font-size:clamp(1.5rem,1.25rem + 1vw,1.875rem)}
}
/* integrator: the kit dial label "6 PM" sits 1.4px past the viewBox edge */
#gsx-free .k-dial{overflow:visible}
/* ===== css/03-found.css ===== */
/* GSX Engineering · 03-found.css (B3): S3 "Outcome 01 · Get found" (#gsx-found), with the Fig. 03 answer sheet (a real
   table), the ruled feature list, the websites split (#gsx-web) and the Fig. 03B gsx-wire drawing.
   Every rule is scoped to #gsx-found, because gsx-split and gsx-outcome are names other sections may also use. */

/* ---- the two splits: figure 7 / list 5 from 1024px (mirrored for websites); stacked below ---- */
#gsx-found .gsx-split{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,5vw,48px);align-items:start;margin:0}
#gsx-found .gsx-split.is-mirror{margin-top:clamp(56px,6vw,96px);padding-top:clamp(40px,4.4vw,64px);border-top:1px solid var(--k-line)}
@media (min-width:1024px){
 #gsx-found .gsx-split{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(40px,4.4vw,72px)}
 #gsx-found .gsx-split.is-mirror{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center}
}

/* ---- Fig. 03: the answer sheet ---- */
#gsx-found .gsx-chips{display:inline-flex;flex-wrap:wrap;gap:6px}
.gsx-answers{width:100%;margin:0;border-collapse:collapse;table-layout:fixed;font-variant-numeric:tabular-nums}
.gsx-answers th,.gsx-answers td{padding:11px 6px;border-bottom:1px solid var(--k-line);text-align:center;vertical-align:middle}
.gsx-answers thead th{padding-top:4px;padding-bottom:10px;border-bottom-color:var(--k-line-strong);color:var(--k-muted);font-weight:450;vertical-align:bottom;overflow-wrap:anywhere}
.gsx-answers thead th:first-child{width:38%;text-align:left;padding-left:0}
.gsx-answers tbody th{padding-left:0;text-align:left;color:var(--k-ink);font-weight:500;font-size:var(--k-fs-small);line-height:1.3}
.gsx-answers abbr{text-decoration:none;border:0;cursor:inherit}
.gsx-ans-s{display:none}

/* marks: a filled square (named), a hollow square (someone else), a crossed and hatched square (wrong facts) */
.gsx-mk{display:inline-flex;align-items:center;gap:8px;vertical-align:middle}
.gsx-mk>i{display:inline-block;flex:none;box-sizing:border-box;width:14px;height:14px;border:1.5px solid var(--k-line-strong);forced-color-adjust:none}
.gsx-mk.is-named>i{border-color:var(--k-accent);background:var(--k-accent)}
.gsx-mk.is-other>i{background:transparent}
.gsx-mk.is-wrong>i{border-color:var(--k-ink);background:
  linear-gradient(45deg,transparent calc(50% - .75px),var(--k-ink) calc(50% - .75px) calc(50% + .75px),transparent calc(50% + .75px)),
  linear-gradient(-45deg,transparent calc(50% - .75px),var(--k-ink) calc(50% - .75px) calc(50% + .75px),transparent calc(50% + .75px)),
  repeating-linear-gradient(45deg,var(--k-line) 0 1px,transparent 1px 3px)}
.gsx-answers-key{display:flex;flex-wrap:wrap;gap:8px 22px;margin:16px 0 0;color:var(--k-muted)}
.gsx-answers-key>.gsx-mk>i{width:12px;height:12px}

/* narrow figure (phones, and the 7/12 column near 1024px): short assistant names, a 44% question column */
@container (max-width:560px){
 .gsx-answers thead th{padding-inline:1px;font-size:.625rem;font-stretch:75%;letter-spacing:0}
 .gsx-answers thead th:first-child{width:44%}
 .gsx-ans-f{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .gsx-ans-s{display:inline}
 .gsx-answers td{padding-inline:2px}
 .gsx-answers tbody th{padding-right:8px;font-size:.8125rem}
 .gsx-mk>i{width:13px;height:13px}
}

/* phones: a little more room for the four answer columns */
@media (max-width:599.98px){#gsx-found .gsx-answers-fig{padding-inline:10px}}

/* ---- the ruled feature list beside Fig. 03 ---- */
#gsx-found .gsx-found-feats{--gsx-c:1}
#gsx-found .gsx-found-feats>.gsx-rule-cell{padding-inline:0;border-left:0}
#gsx-found .gsx-found-feats .gsx-rule-top{align-items:center}
#gsx-found .gsx-found-feats .gsx-rule-top .k-ico{width:22px;height:22px;color:var(--k-ink)}
#gsx-found .gsx-found-feats .k-h4{text-wrap:balance}
@media (min-width:600px) and (max-width:1023.98px){
 #gsx-found .gsx-found-feats{--gsx-c:2}
 #gsx-found .gsx-found-feats>.gsx-rule-cell:nth-child(2n){padding-left:clamp(16px,2.4vw,24px);border-left:1px solid var(--k-line)}
 #gsx-found .gsx-found-feats>.gsx-rule-cell:nth-child(2n+1){padding-right:clamp(16px,2.4vw,24px)}
}
#gsx-found .gsx-found-more{display:flex;margin:0;padding:18px 0 20px;border-bottom:1px solid var(--k-line)}

/* ---- websites (#gsx-web): copy left, Fig. 03B right from 1024px ---- */
#gsx-found .gsx-web-copy{display:grid;gap:18px;align-content:start;min-width:0}
#gsx-found .gsx-web-copy>*{margin:0}
#gsx-found .gsx-web-copy>.k-d3{max-width:16ch;text-wrap:balance}
#gsx-found .gsx-web-checks{gap:0;margin-top:6px;border-bottom:1px solid var(--k-line)}
#gsx-found .gsx-web-checks li{padding:11px 0;border-top:1px solid var(--k-line)}
#gsx-found .gsx-web-note{max-width:52ch;color:var(--k-ink-2)}
#gsx-found .gsx-web-go{display:flex}

/* ---- Fig. 03B: gsx-wire (A7's stroke vocabulary, without the k-wiring root, so no pulse attaches) ---- */
.gsx-wire{max-width:540px;margin-inline:auto}
.gsx-wire[data-k-scale] text{font-size:calc(var(--k-art-fs) * min(var(--k-art-k,1),1.4))}
.gsx-wire .gsx-wire-t{stroke-width:1.5}
.gsx-wire .gsx-wire-ico{stroke-width:1.6}
.gsx-wire .gsx-wire-l{font-weight:600}
/* ===== css/04-booked.css ===== */
/* GSX Engineering · 04-booked.css (B4): S4 "Outcome 02 · Answer and book" (#gsx-booked). The agent grid with
   availability tags, the X-ray block (kit A2 with its N1 scope beside the N5 Daybook rail; the only drafting grid on the
   page), the limits split (kit A6) and the chapter's ledger and next row (shared, 00-base.css).
   Every rule is scoped to #gsx-booked, because gsx-subhead, gsx-chips and the kit figures may appear elsewhere too. */

/* ---- agent grid: 4 columns from 1200px (--gsx-cols:4), 2 from 480px, 1 below (spec S4) ---- */
@media (min-width:480px) and (max-width:599.98px){#gsx-booked .gsx-agents{--gsx-c:2}}
#gsx-booked .gsx-agents>.gsx-rule-cell{gap:10px}
#gsx-booked .gsx-agents>.gsx-rule-cell>.k-ico{width:26px;height:26px;margin-bottom:8px;color:var(--k-ink)}
#gsx-booked .gsx-agents .k-h4{text-wrap:balance}
#gsx-booked .gsx-agents .k-body{text-wrap:pretty}
/* the availability tags line up across a visual row: each cell is a subgrid of the row's 4 tracks (icon, name, line,
   foot), so the feet share one track and every tag sits at its top, with "Ask us" under it where there is one.
   Without subgrid the foot drops to the bottom of the cell. */
#gsx-booked .gsx-agent-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-top:auto;padding-top:10px}
#gsx-booked .gsx-agent-foot>.k-link{position:relative}
/* "Ask us" keeps its underline tight to the text; the hit area grows to 44px */
#gsx-booked .gsx-agent-foot>.k-link::before{content:"";position:absolute;inset:-13px 0}
@supports (grid-template-rows:subgrid){
 #gsx-booked .gsx-agents>.gsx-rule-cell{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:10px;align-content:start}
 #gsx-booked .gsx-agent-foot{align-self:start;margin-top:0}
}
#gsx-booked .gsx-agents-note{max-width:92ch;margin:18px 0 0;color:var(--k-ink-2);text-wrap:pretty}
@media (max-width:479.98px){#gsx-booked .gsx-agents>.gsx-rule-cell{padding-inline:0}}
/* one column: the two quoted agents read as one ruled row with a single "Quoted on request · Ask us" foot */
@media (max-width:479.98px){
 #gsx-booked .gsx-agent-q1{padding-bottom:6px}
 #gsx-booked .gsx-agent-q1>.gsx-agent-foot{display:none}
 #gsx-booked .gsx-agent-q2{border-top:1px dashed var(--k-line);padding-top:14px}
}
/* the X-ray's JS-off note: with JS the business tabs work, so it is not needed */
#gsx-booked .gsx-xray-nojs{margin:16px 0 0;color:var(--k-muted)}
html.gsx-on #gsx-booked .gsx-xray-nojs{display:none}

/* ---- the X-ray block: a framed showcase on the drafting grid (data-k-grid, data-k-frame) ---- */
#gsx-booked .gsx-xray-block{position:relative;margin-top:clamp(64px,7vw,112px);padding:clamp(32px,3.4vw,56px);border:1px solid var(--k-line)}
/* phones: the block bleeds over the gutters, so the X-ray keeps the full content width */
@media (max-width:599.98px){
 #gsx-booked .gsx-xray-block{margin-inline:calc(-1 * var(--k-gutter));padding:40px var(--k-gutter) 32px;border-inline:0}
}
#gsx-booked .gsx-subhead{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin:0 0 clamp(28px,3.4vw,48px)}
#gsx-booked .gsx-subhead>*{margin:0}
#gsx-booked .gsx-subhead>.k-d3{text-wrap:balance}
#gsx-booked .gsx-subhead>.k-lede{max-width:52ch}
#gsx-booked .gsx-subhead>.k-note{max-width:52ch;padding-left:14px;border-left:1px solid var(--k-line-strong)}
@media (min-width:1024px){
 #gsx-booked .gsx-subhead{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--k-col-gap);row-gap:14px}
 #gsx-booked .gsx-subhead>.k-d3{grid-column:1/7;grid-row:1/3;align-self:end}
 #gsx-booked .gsx-subhead>.k-lede{grid-column:7/13;grid-row:1}
 #gsx-booked .gsx-subhead>.k-note{grid-column:7/13;grid-row:2}
}

/* X-ray 8/12 with the Daybook rail 4/12 (sticky) from 1200px; the Daybook sits under the X-ray below that */
#gsx-booked .gsx-xray-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,2.4vw,32px);align-items:start}
/* the page already pads anchor and scrollIntoView targets by --k-sticky-top (html scroll-padding-top); the kit's own
   scroll-margin-top on .k-xray would double it, so openers would land the X-ray 152px down instead of 76px */
#gsx-booked .gsx-xray-grid>.k-xray{scroll-margin-top:0;scroll-margin-bottom:80px}
#gsx-booked .k-xray-foot{scroll-margin-bottom:80px}
/* narrow X-ray (phones): the four call tabs wrap 2x2 with the icon beside the label (spec S4 "At 360px") */
@container (max-width:459px){
 #gsx-booked .k-xray.is-live .k-xray-tabs{flex-wrap:wrap}
 #gsx-booked .k-xray.is-live .k-xray-tab{flex:1 1 40%;flex-direction:row;gap:8px;padding:0 10px;font-size:var(--k-fs-label)}
 #gsx-booked .k-xray.is-live .k-xray-tab:nth-child(odd){border-left:0}
 #gsx-booked .k-xray.is-live .k-xray-tab:nth-child(n+3){border-top:1px solid var(--k-line-strong)}
}
/* JS off (the kit pre-renders the dental call at its end):
   - the seal's right jaw falls back to -2.5em, tuned for the kit's 76%-wide k-d3; this page sets k-d3 at 100% width
     (00-base.css), so BOOKED is 4.6em wide and the jaw closes at -1.44em (what xray.js measures with JS on);
   - the static flags 03 and 04 sit 7.5% apart and touch on a narrow scope, so 02 and 04 drop to the second tier,
     as xray.js tiers them with JS on */
#gsx-booked .k-xray:not(.is-live) .k-xray-seal{--k-xray-jaw:-1.44em}
@container (max-width:420px){
 #gsx-booked .k-xray:not(.is-live) .k-xray-flags{height:50px}
 #gsx-booked .k-xray:not(.is-live) .k-xray-flag:is(:nth-child(2),:nth-child(4))::before{height:35px}
 #gsx-booked .k-xray:not(.is-live) .k-xray-flag:is(:nth-child(2),:nth-child(4)) b{margin-top:26px}
}
/* the kit's second flag tier sits 14px under the first, but a flag label is 19px tall, so a low label tucks under the
   one above it (03 over 04 on phones); 21px clears it with a 2px gap */
#gsx-booked .k-xray-flags.has-low{height:50px}
#gsx-booked .k-xray-flag.is-low::before{height:35px}
#gsx-booked .k-xray-flag.is-low b{margin-top:26px}
#gsx-booked .gsx-xray-grid>.k-daybook-fig{padding:clamp(18px,2vw,26px);background-color:var(--k-surface);border:1px solid var(--k-line-strong);--k-cl:10px;background-position:6px 6px,6px 6px,right 6px top 6px,right 6px top 6px,left 6px bottom 6px,left 6px bottom 6px,right 6px bottom 6px,right 6px bottom 6px}
@media (min-width:1200px){
 #gsx-booked .gsx-xray-grid{grid-template-columns:minmax(0,8fr) minmax(0,4fr)}
 #gsx-booked .gsx-xray-grid>.k-daybook-fig{position:sticky;top:var(--k-sticky-top)}
}
/* 768-1199px: the rail turns sideways under the X-ray: head and caption left, the day's hours right */
@media (min-width:768px) and (max-width:1199.98px){
 #gsx-booked .gsx-xray-grid>.k-daybook-fig{grid-template-columns:minmax(220px,1fr) minmax(0,2fr);grid-template-rows:auto 1fr;column-gap:clamp(24px,3vw,40px)}
 #gsx-booked .k-daybook-fig>.k-fig-head{grid-column:1;grid-row:1;align-self:start;justify-content:flex-start}
 #gsx-booked .k-daybook-fig>.k-fig-cap{grid-column:1;grid-row:2;align-self:start}
 #gsx-booked .k-daybook-fig>.k-fig-body{grid-column:2;grid-row:1/3}
}

/* ---- limits split: kit A6 left 6/12, "You stay in charge" right 6/12 from 1024px; gauge first when stacked ---- */
#gsx-booked .gsx-limits{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,4.4vw,56px);align-items:center;margin-top:clamp(64px,7vw,112px)}
#gsx-booked .gsx-limits>.k-gauge-fig{padding:clamp(18px,2.4vw,32px);background-color:var(--k-surface);border:1px solid var(--k-line-strong);--k-cl:10px;background-position:6px 6px,6px 6px,right 6px top 6px,right 6px top 6px,left 6px bottom 6px,left 6px bottom 6px,right 6px bottom 6px,right 6px bottom 6px}
#gsx-booked .gsx-chips{display:inline-flex;flex-wrap:wrap;gap:6px}
#gsx-booked .gsx-limits-copy{display:grid;gap:20px;align-content:start;min-width:0}
#gsx-booked .gsx-limits-copy>*{margin:0}
#gsx-booked .gsx-limits-copy>.k-d3{text-wrap:balance}
#gsx-booked .gsx-limits-checks{gap:0;border-bottom:1px solid var(--k-line)}
#gsx-booked .gsx-limits-checks>li{padding:12px 0;border-top:1px solid var(--k-line)}
@media (min-width:1024px){
 #gsx-booked .gsx-limits{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(40px,4.4vw,72px)}
}
@media (max-width:599.98px){#gsx-booked .gsx-limits>.k-gauge-fig{padding-inline:12px}}
/* ===== css/05-protected.css ===== */
/* GSX Engineering · 05-protected.css (B5): S5 "Outcome 03 · Stay protected" (#gsx-protected). The Fig. 05 security ladder
   (gsx-ladder): a stepped drawing beside a ruled datasheet of four ways to start, then the side row and the notes.
   Layouts: stacked cards with a 6px step bar below 768px; a ruled table with step bars from 768px; from 1024px the
   drawing takes 4/12 and the table 8/12, sharing one header band, with equal (1fr) rows so the treads meet the rules. */

#gsx-protected{--gsx-ladder-cols:minmax(0,30fr) minmax(0,12fr) minmax(0,36fr) minmax(0,22fr);--gsx-ladder-in:20px}
#gsx-protected .gsx-ladder{position:relative;margin:0}
.gsx-ladder-fig{display:none}

/* ---- the datasheet (all widths) ---- */
.gsx-ladder-t{width:100%;margin:0}
.gsx-ladder-t caption{display:block;padding:0 0 14px;text-align:left}
.gsx-ladder-t .k-h4{font-size:clamp(1.0625rem,.96rem + .42vw,1.3125rem);line-height:1.12;text-wrap:balance}
.gsx-ladder-t .k-addon-num{font-size:clamp(1.375rem,1.2rem + .6vw,1.625rem)}
.gsx-ladder-t .k-addon-desc,.gsx-ladder-side .k-addon-desc{max-width:52ch;color:var(--k-ink-2)}
#gsx-protected .is-quote .k-addon-unit{color:var(--k-ink-2)}
#gsx-protected .is-quote{line-height:1.3}
.gsx-ladder-act{margin:0}
.gsx-ladder-act .k-link{max-width:100%}
/* the step bar: a 6px gauge on each row's left edge, filled to the step's depth; step 01 in the accent */
.gsx-ladder-t .k-addon:nth-child(1){--gsx-k:1;--gsx-bar:var(--k-accent)}
.gsx-ladder-t .k-addon:nth-child(2){--gsx-k:2}
.gsx-ladder-t .k-addon:nth-child(3){--gsx-k:3}
.gsx-ladder-t .k-addon:nth-child(4){--gsx-k:4}

/* ---- the side row and the notes ---- */
.gsx-ladder-side{display:grid;gap:10px;margin-top:clamp(24px,3vw,36px);padding:16px 0 20px var(--gsx-ladder-in);border-top:1px dashed var(--k-line-strong);border-bottom:1px solid var(--k-line)}
.gsx-ladder-side>*{margin:0}
.gsx-ladder-side-h{display:grid;gap:8px;align-content:start}
.gsx-ladder-side-h>*{margin:0}
.gsx-ladder-side-h>.k-mono-s{color:var(--k-muted)}
.gsx-ladder-side-h>.k-h4{font-size:clamp(1.0625rem,.96rem + .42vw,1.3125rem);line-height:1.12;text-wrap:balance}
.gsx-ladder-notes{display:grid;gap:6px;margin-top:16px;padding-left:var(--gsx-ladder-in)}
.gsx-ladder-notes>.k-small{max-width:72ch;color:var(--k-ink-2)}

/* ---- phones: each row is a stacked card; labels come from data-label; no table scroll ---- */
@media (max-width:767.98px){
 .gsx-ladder-t,.gsx-ladder-t :is(tbody,tr,th,td){display:block}
 .gsx-ladder-t thead{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .gsx-ladder-t .k-addon{position:relative;display:grid;gap:12px;padding:18px 0 22px var(--gsx-ladder-in);border-top:var(--k-fr)}
 .gsx-ladder-t .k-addon:last-child{border-bottom:var(--k-hl)}
 .gsx-ladder-t .k-addon>*{padding:0;border:0}
 .gsx-ladder-t .k-addon::before{content:"";position:absolute;left:0;top:18px;bottom:22px;width:6px;box-shadow:inset 0 0 0 1px var(--k-line-strong);background:linear-gradient(var(--gsx-bar,var(--k-ink)),var(--gsx-bar,var(--k-ink))) top left/100% calc(var(--gsx-k,1) * 25%) no-repeat}
 :is(.gsx-ladder-t,.gsx-ladder-side) [data-label]::before{content:attr(data-label);content:attr(data-label) / "";display:block;margin-bottom:6px;color:var(--k-muted);font:450 var(--k-fs-label)/1.3 var(--k-f-mono);font-stretch:87.5%;letter-spacing:.08em;text-transform:uppercase}
 /* price: the label runs in on the same line as the value */
 :is(.gsx-ladder-t,.gsx-ladder-side) .k-addon-price::before{display:inline-block;margin:0 14px 0 0}
 .gsx-ladder-t th.k-h4::before{margin-bottom:8px}
 .gsx-ladder-act{padding-top:2px}
 /* 44px touch targets around the underlined row links */
 .gsx-ladder-act .k-link{position:relative}
 .gsx-ladder-act .k-link::after{content:"";position:absolute;inset:-13px -8px}
 .gsx-ladder-side{position:relative}
 .gsx-ladder-side::before{content:"";position:absolute;left:0;top:16px;bottom:20px;width:6px;box-sizing:border-box;border:1px dashed var(--k-line-strong)}
}

/* ---- 768px and up: a ruled table (rows are grids with the same four columns) ---- */
@media (min-width:768px){
 .gsx-ladder-t{display:grid;grid-template-columns:minmax(0,1fr)}
 .gsx-ladder-t thead,.gsx-ladder-t tbody{display:grid;grid-template-columns:minmax(0,1fr)}
 .gsx-ladder-t tr{display:grid;grid-template-columns:var(--gsx-ladder-cols)}
 .gsx-ladder-t thead th{padding:9px 16px 9px 0}
 .gsx-ladder-t :is(thead th,.k-addon>*):first-child{padding-left:var(--gsx-ladder-in)}
 .gsx-ladder-t .k-addon>*{padding:18px 18px 20px 0}
 .gsx-ladder-t .k-addon>:first-child{padding-right:20px}
 .gsx-ladder-t .k-addon>:last-child{padding-right:0}
 .gsx-ladder-t .k-addon-price{display:flex;flex-wrap:wrap;align-content:flex-start;align-items:baseline;gap:2px 8px}
 .gsx-ladder-side{grid-template-columns:var(--gsx-ladder-cols);gap:0;padding:18px 0 20px}
 .gsx-ladder-side>*{padding-right:18px}
 .gsx-ladder-side>:first-child{padding-left:var(--gsx-ladder-in);padding-right:20px}
 .gsx-ladder-side>:last-child{padding-right:0}
}
/* 768-1023px: the drawing waits for room; each row keeps its step bar */
@media (min-width:768px) and (max-width:1023.98px){
 .gsx-ladder-t .k-addon{position:relative}
 .gsx-ladder-t .k-addon::before{content:"";position:absolute;left:0;top:18px;bottom:20px;width:6px;box-shadow:inset 0 0 0 1px var(--k-line-strong);background:linear-gradient(var(--gsx-bar,var(--k-ink)),var(--gsx-bar,var(--k-ink))) top left/100% calc(var(--gsx-k,1) * 25%) no-repeat}
 .gsx-ladder-side{position:relative}
 .gsx-ladder-side::before{content:"";position:absolute;left:0;top:18px;bottom:20px;width:6px;box-sizing:border-box;border:1px dashed var(--k-line-strong)}
}

/* ---- 1024px and up: drawing 4/12, table 8/12; the figure head and the column heads share one ruled band ---- */
@media (min-width:1024px){
 #gsx-protected{--gsx-ladder-in:clamp(20px,1.9vw,28px)}
 #gsx-protected .gsx-ladder{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);grid-template-rows:repeat(5,auto);column-gap:0;row-gap:0}
 /* container-type would imply layout containment, which turns a subgrid back into an independent grid */
 .gsx-ladder-fig{display:grid;grid-column:1;grid-row:2/4;grid-template-rows:subgrid;gap:0;padding:0;background-image:none;container-type:normal}
 .gsx-ladder-fig>.k-fig-head{grid-row:1;align-self:stretch;align-content:center;padding:9px 16px 9px 0;border-top:var(--k-fr);border-bottom:var(--k-hl)}
 .gsx-ladder-draw{grid-row:2;position:relative;min-height:280px}
 .gsx-ladder-art{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
 .gsx-ladder-t{grid-column:2;grid-row:1/4;grid-template-rows:subgrid}
 .gsx-ladder-t caption{grid-row:1;padding-left:var(--gsx-ladder-in)}
 .gsx-ladder-t thead{grid-row:2}
 .gsx-ladder-t tbody{grid-row:3;grid-auto-rows:1fr}
 .gsx-ladder-side{grid-column:2;grid-row:4}
 .gsx-ladder-notes{grid-column:2;grid-row:5}
}

/* 1024-1199px: the 8/12 table is narrow, so each row's link moves under its description (three columns) */
@media (min-width:1024px) and (max-width:1199.98px){
 #gsx-protected{--gsx-ladder-cols:minmax(0,30fr) minmax(0,17fr) minmax(0,53fr)}
 :is(.gsx-ladder-t .k-h4,.gsx-ladder-side-h>.k-h4){font-size:1.0625rem}
 .gsx-ladder-t thead th:nth-child(4){position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%)}
 :is(.gsx-ladder-t .k-addon,.gsx-ladder-side){grid-template-rows:auto 1fr}
 :is(.gsx-ladder-t .k-addon,.gsx-ladder-side)>:is(:first-child,.k-addon-price){grid-row:1/3}
 :is(.gsx-ladder-t .k-addon,.gsx-ladder-side)>.k-addon-desc{grid-column:3;grid-row:1;padding-bottom:12px;border-bottom:0}
 :is(.gsx-ladder-t .k-addon,.gsx-ladder-side)>.gsx-ladder-act{grid-column:3;grid-row:2;padding-top:0}
}

/* ---- Fig. 05: the drawing (strokes and fills from kit art classes; the hatch is .f-hatch) ---- */
.gsx-ladder-art .gsx-ladder-fill{stroke:none}
.gsx-ladder-art text{font-size:11px;font-weight:600}
.gsx-ladder-art .gsx-ladder-start text{letter-spacing:.08em}
/* ===== css/06-say.css ===== */
/* GSX Engineering · 06-say.css (B5): S6, the pinned statement (#gsx-say), the hinge into Outcome 04.
   Static stack by default: JS off, reduced motion, k-late and below 768px show both lines and the cap.
   From 768px with the kit's head snippet (k-js) and motion, the section is 120svh tall and the statement pins under the
   header from the first paint (so nothing below moves when the script arrives). js/06-say.js then adds .is-live, which
   lays the two lines in one cell and lets the scroll hand over from the first line to the second. */

.gsx-say{position:relative}
.gsx-say-pin{display:grid;justify-items:center;align-content:center;gap:clamp(20px,3.2vw,44px);padding:clamp(72px,10vw,160px) max(var(--k-gutter),env(safe-area-inset-right,0px)) clamp(72px,10vw,160px) max(var(--k-gutter),env(safe-area-inset-left,0px));text-align:center}
.gsx-say-line{max-width:22ch;margin:0;font:650 clamp(2rem,1.2rem + 2.4vw,3.125rem)/1 var(--k-f-display);font-stretch:100%;letter-spacing:-.03em;text-transform:uppercase;color:var(--k-ink);text-wrap:balance;overflow-wrap:break-word}
.gsx-say-line>i{display:inline-block;width:.16em;height:.16em;margin-left:.1em;vertical-align:.1em;background:var(--k-accent);forced-color-adjust:none}
.gsx-say-cap{position:relative;margin-top:clamp(4px,1vw,12px)}
/* a 44px touch target around the underlined link */
.gsx-say-cap::after{content:"";position:absolute;inset:-14px -10px}

@media (min-width:768px){
 html.k-js:not(.k-reduced):not(.k-late) .gsx-say{height:120svh}
 html.k-js:not(.k-reduced):not(.k-late) .gsx-say-pin{position:sticky;top:calc(var(--gsx-frame) + var(--gsx-head));box-sizing:border-box;height:calc(100svh - var(--gsx-head) - 2 * var(--gsx-frame));padding-block:clamp(24px,4vh,48px)}
 /* live (js/06-say.js): both lines share one cell; --o, --y and --ink come from the scroll */
 html.k-js:not(.k-reduced):not(.k-late) .gsx-say.is-live .gsx-say-pin{grid-template-areas:"s";grid-template-rows:minmax(0,1fr);align-content:stretch;gap:0}
 html.k-js:not(.k-reduced):not(.k-late) .gsx-say.is-live .gsx-say-line{grid-area:s;align-self:center;opacity:var(--o,1);transform:translateY(calc(var(--y,0) * 1px));color:color-mix(in srgb,var(--k-ink) calc(var(--ink,1) * 100%),var(--k-line-strong))}
 html.k-js:not(.k-reduced):not(.k-late) .gsx-say.is-live .gsx-say-cap{grid-area:s;align-self:end;margin:0}
}
/* ===== css/07-plan.css ===== */
/* GSX Engineering · 07-plan.css (B5): S7 "Outcome 04 · Know where AI helps" (#gsx-plan). Fig. 06 is a real table, the
   use-AI matrix (gsx-matrix), 6/12 left from 1024px; three stacked ruled cells (Strategy Hour, AI Opportunity Audit,
   Training and advisory) 6/12 right. Below 1024px the matrix runs full width and the cells stack under it. */

#gsx-plan .gsx-plan-split{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,5vw,48px);align-items:start}
@media (min-width:1024px){#gsx-plan .gsx-plan-split{grid-template-columns:minmax(0,6fr) minmax(0,6fr);column-gap:clamp(40px,4.4vw,72px)}}

/* ---- Fig. 06: one page of the audit, on the surface, with the kit's crop marks ---- */
.gsx-matrix-fig{--k-cl:10px;gap:clamp(14px,1.6vw,20px);padding:clamp(18px,2.4vw,30px);background-color:var(--k-surface);background-position:10px 10px,10px 10px,right 10px top 10px,right 10px top 10px,left 10px bottom 10px,left 10px bottom 10px,right 10px bottom 10px,right 10px bottom 10px}
#gsx-plan .gsx-chips{display:inline-flex;flex-wrap:wrap;gap:6px}
.gsx-matrix{width:100%;margin:0;border-collapse:collapse;table-layout:fixed}
.gsx-matrix :is(th,td){padding:14px 12px 14px 0;border-bottom:1px solid var(--k-line);text-align:left;vertical-align:middle}
.gsx-matrix thead th{padding-top:2px;padding-bottom:10px;border-bottom-color:var(--k-line-strong);color:var(--k-muted);font-weight:450}
.gsx-matrix thead th:first-child{width:58%}
.gsx-matrix tbody th{color:var(--k-ink);font:500 clamp(.9375rem,.9rem + .15vw,1.0625rem)/1.35 var(--k-f-body)}
.gsx-matrix td{padding-right:0}

/* verdicts: a shape and a label, never color alone (filled: use AI; hollow: keep a person; hatched: you decide) */
.gsx-verdict{display:inline-flex;align-items:center;gap:10px;color:var(--k-ink);font:500 var(--k-fs-label)/1.3 var(--k-f-mono);font-stretch:87.5%;letter-spacing:.08em;text-transform:uppercase}
.gsx-verdict>i{display:block;flex:none;width:16px;height:16px}
.gsx-verdict>i>svg{width:100%;height:100%}
.gsx-verdict.is-person{color:var(--k-ink-2)}
/* the hatched mark draws in a 32-unit space, so the kit's 6-unit .f-hatch repeats densely enough to read at 16px */
.gsx-verdict-hatch rect{stroke-width:3.5}

/* ---- the three ruled cells ---- */
#gsx-plan .gsx-plan-cells{--gsx-c:1}
/* one column at every width, so no left rule and no shared clip (00-base.css) */
#gsx-plan .gsx-plan-cells>.gsx-rule-cell{gap:14px;padding-inline:0;border-left:0}
.gsx-plan-hd{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 20px}
.gsx-plan-hd>*{margin:0}
.gsx-plan-hd>.k-h4{text-wrap:balance}
.gsx-plan-price{display:inline-flex;align-items:baseline;gap:8px;white-space:nowrap}
.gsx-plan-price .k-price-m{font-size:clamp(1.25rem,1.1rem + .5vw,1.5rem)}
.gsx-plan-price .k-mono-s{color:var(--k-ink-2)}
.gsx-plan-go{display:flex;margin:0}
.gsx-plan-note{margin:16px 0 0;color:var(--k-ink-2)}

/* phones: the verdict can take two lines beside its mark; 44px touch targets around the cell links */
@media (max-width:767.98px){#gsx-plan .gsx-plan-go .k-link{position:relative}#gsx-plan .gsx-plan-go .k-link::after{content:"";position:absolute;inset:-13px -8px}}
@media (max-width:599.98px){
 .gsx-matrix-fig{padding-inline:14px}
 .gsx-matrix thead th:first-child{width:56%}
 .gsx-verdict{align-items:flex-start;gap:8px}
 .gsx-verdict>i{width:14px;height:14px;margin-top:1px}
}
/* ===== css/08-industries.css ===== */
/* GSX Engineering · 08-industries.css (B6): S8 "Built for your kind of business" (#k-sec-08).
   Kit C5 with its four A4 plates, laid out as one ruled card row: 4 across from 1200px, 2 x 2 from 768px, stacked below.
   Each card is the kit subgrid (plate, name) plus two rows: the gsx-oc4 outcome ledger in a details element (open with
   JS off; JS closes cards 2 to 4 below 768px), whose Answered row holds the example script and "See the call", and the
   split gsx-card-foot (the free check that fits the business, then "Book a call"). A ruled note line and the gsx-next
   row close the section. */

/* ---- the ruled card row (rules between cards only, as gsx-rule-row) ---- */
#k-sec-08 .k-industries{--gsx-c:1;grid-template-columns:repeat(var(--gsx-c),minmax(0,1fr));gap:0;border-bottom:1px solid var(--k-line)}
#k-sec-08 .k-industry{--gsx-padx:0px;grid-row:span 4;gap:16px;padding:clamp(20px,2vw,28px) var(--gsx-padx) 0;border-top:1px solid var(--k-line)}
@media (min-width:768px){
 #k-sec-08 .k-industries{--gsx-c:2}
 #k-sec-08 .k-industry{--gsx-padx:clamp(16px,1.6vw,24px)}
}
@media (min-width:768px) and (max-width:1199.98px){#k-sec-08 .k-industry:nth-child(even){border-left:1px solid var(--k-line)}}
@media (min-width:1200px){
 #k-sec-08 .k-industries{--gsx-c:4}
 #k-sec-08 .k-industry+.k-industry{border-left:1px solid var(--k-line)}
}

/* ---- A4 plates: drafted until licensed photos exist; the provenance slot stays hidden; 16:9 crop on phones ---- */
#k-sec-08 .gsx-plate-src{display:flex;align-items:center;min-height:20px}
@media (max-width:767.98px){#k-sec-08 .k-photo-img{aspect-ratio:16/9}}

/* ---- "What we'd run": the four-outcome ledger ---- */
#k-sec-08 .gsx-oc4-wrap{min-width:0;container:gsx-oc4/inline-size}
#k-sec-08 .gsx-oc4-wrap>summary{position:relative;display:flex;align-items:center;min-height:44px;padding:8px 32px 8px 0;border-top:1px solid var(--k-line);color:var(--k-ink);list-style:none;cursor:pointer}
#k-sec-08 .gsx-oc4-wrap>summary::-webkit-details-marker{display:none}
/* a drawn plus that turns to a cross when open: the state reads from the shape, not from color */
#k-sec-08 .gsx-oc4-wrap>summary::after{content:"";position:absolute;top:50%;right:4px;width:12px;height:12px;margin-top:-6px;background:linear-gradient(currentColor,currentColor) 50% 50%/100% 1.5px no-repeat,linear-gradient(currentColor,currentColor) 50% 50%/1.5px 100% no-repeat;transition:transform var(--k-t-ui) var(--k-ease-servo)}
#k-sec-08 .gsx-oc4-wrap[open]>summary::after{transform:rotate(45deg)}
#k-sec-08 .gsx-oc4-wrap>summary:focus-visible{outline-offset:-2px}
@media (hover:hover){#k-sec-08 .gsx-oc4-wrap>summary:hover{color:var(--k-accent)}}
html.k-reduced #k-sec-08 .gsx-oc4-wrap>summary::after{transition:none}
/* a closed ledger is one ruled row: the foot's rule sits right under the summary */
#k-sec-08 .gsx-oc4-wrap:not([open])+.gsx-card-foot{margin-top:-16px}
/* from 768px the ledger always shows and the summary is not drawn (as the kit does for its plan details) */
@media (min-width:768px){#k-sec-08 .gsx-oc4-wrap>summary{display:none}}

#k-sec-08 .gsx-oc4{display:grid;margin:0;padding:0;border-top:1px solid var(--k-line)}
#k-sec-08 .gsx-oc4>div{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;min-width:0;padding:11px 0 12px}
#k-sec-08 .gsx-oc4>div+div{border-top:1px solid var(--k-line)}
#k-sec-08 .gsx-oc4 dt{margin:0;color:var(--k-ink)}
#k-sec-08 .gsx-oc4 dd{margin:0;color:var(--k-ink-2);text-wrap:pretty}
/* the Answered row carries the example script and the link to the full call */
#k-sec-08 .gsx-oc4 dd:has(>.gsx-ind-snip){display:grid;justify-items:start;gap:12px}
#k-sec-08 .gsx-ind-snip{width:100%;margin-top:2px}
#k-sec-08 .gsx-ind-snip .k-snip-line{font-size:1rem}
#k-sec-08 .gsx-ind-see{position:relative}
#k-sec-08 .gsx-ind-see::after{content:"";position:absolute;inset:-12px -8px}
/* label beside text once the ledger has room; label over text in narrow cards and on small phones */
@container gsx-oc4 (min-width:340px){#k-sec-08 .gsx-oc4>div{grid-template-columns:minmax(0,7.5rem) minmax(0,1fr);gap:16px;align-items:baseline}}

/* ---- the split foot: free check | "Book a call", ruled, 44px+ targets ---- */
#k-sec-08 .gsx-card-foot{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;align-self:end;margin:0 calc(-1 * var(--gsx-padx));border-top:1px solid var(--k-line)}
#k-sec-08 .gsx-card-foot::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background:var(--k-line);pointer-events:none}
#k-sec-08 .gsx-card-foot>.k-link{position:static;align-self:center;justify-self:start;max-width:calc(100% - var(--gsx-padx) - 16px);margin:17px 0 19px var(--gsx-padx)}
#k-sec-08 .gsx-card-foot>.k-link+.k-link{margin-left:max(16px,var(--gsx-padx))}
/* each link's hit area is its whole half of the foot (the links stay static, so the foot positions it) */
#k-sec-08 .gsx-card-foot>.k-link::after{content:"";position:absolute;top:0;bottom:0;left:0;right:50%}
#k-sec-08 .gsx-card-foot>.k-link+.k-link::after{left:50%;right:0}
/* 4 across, and on phones, the cards are too narrow for two links side by side: they stack as two ruled rows */
@media (min-width:1200px),(max-width:479.98px){
 #k-sec-08 .gsx-card-foot{grid-template-columns:minmax(0,1fr)}
 #k-sec-08 .gsx-card-foot::before{top:50%;bottom:auto;left:0;right:0;width:auto;height:1px}
 #k-sec-08 .gsx-card-foot>.k-link,#k-sec-08 .gsx-card-foot>.k-link+.k-link{margin:15px 0 16px var(--gsx-padx)}
 #k-sec-08 .gsx-card-foot>.k-link::after{inset:0 0 50% 0}
 #k-sec-08 .gsx-card-foot>.k-link+.k-link::after{inset:50% 0 0 0}
}

/* ---- the ruled line under the row, then the next row ---- */
#k-sec-08 .gsx-ind-more{max-width:none;margin:0;padding:16px 0 18px;border-bottom:1px solid var(--k-line);color:var(--k-ink-2)}
#k-sec-08 .gsx-ind-more .k-link{margin-left:4px;white-space:nowrap}
#k-sec-08 .gsx-ind-more .k-link{position:relative}
#k-sec-08 .gsx-ind-more .k-link::after{content:"";position:absolute;inset:-12px -8px}

/* four across, the card names step down so long names take two lines at most beside the 26px icon */
@media (min-width:1200px){#k-sec-08 .k-industry-name>.k-d3{font-size:clamp(1.5rem,.6rem + 1.3vw,1.75rem)}}
/* ===== css/09-team.css ===== */
/* GSX Engineering · 09-team.css (B6): S9 "Who builds it" (#gsx-team).
   A drawing title block (kit C7 cell markup in a new row layout: 4 facts, 3 roles, and a 2-cell credentials row that
   only renders when CREDENTIALS is filled), then "Straight answers" 7/12 beside the N4 spec plate 5/12 from 1024px. */

/* the H2 never breaks at the hyphen of "ex-FAANG" (the word always fits a line) */
#gsx-team .gsx-nw{white-space:nowrap}
/* below 400px the two title lines run inline and balance, so "and" never sits alone */
@media (max-width:399.98px){#gsx-team #gsx-team-title{text-wrap:balance}#gsx-team #gsx-team-title>.k-ln{display:inline}}

/* ---- title block: rows of cells inside the kit's framed .k-tb ---- */
#gsx-team .gsx-titleblock{display:block;margin-top:clamp(8px,1vw,16px)}
#gsx-team .gsx-tb-row{--gsx-tbc:1;display:grid;grid-template-columns:repeat(var(--gsx-tbc),minmax(0,1fr))}
@media (min-width:600px){
 #gsx-team .gsx-tb-row{--gsx-tbc:2}
 #gsx-team .gsx-tb-row.is-roles{--gsx-tbc:3}
}
@media (min-width:1200px){#gsx-team .gsx-tb-row{--gsx-tbc:4}#gsx-team .gsx-tb-row.is-roles{--gsx-tbc:3}#gsx-team .gsx-tb-row.is-cred{--gsx-tbc:2}}

/* phones: one cell per row, label and value side by side (label column 38%) */
#gsx-team .gsx-titleblock .k-tb-cell{grid-column:auto;display:grid;grid-template-columns:38% minmax(0,1fr);align-items:baseline;align-content:start;gap:6px 14px;min-height:0;padding:15px 16px 16px}
#gsx-team .gsx-titleblock .k-tb-cell>:not(.k-mono-s):not(.k-tb-h):not(.k-tb-v){grid-column:2}
#gsx-team .gsx-titleblock .k-tb-cell>.k-mono-s{grid-column:1}
#gsx-team .gsx-titleblock .k-tb-cell>.k-h4{color:var(--k-ink);text-wrap:balance}
@media (max-width:399.98px){#gsx-team .gsx-titleblock .k-tb-cell{grid-template-columns:32% minmax(0,1fr)}#gsx-team .gsx-titleblock .k-tb-cell>*{hyphens:manual}}
/* from 600px: a title-block cell, label at the top, value at the foot */
@media (min-width:600px){
 #gsx-team .gsx-titleblock .k-tb-cell{display:flex;flex-direction:column;align-items:stretch;gap:10px;min-height:136px;padding:16px 20px 20px}
 #gsx-team .gsx-titleblock .k-tb-cell>.k-h4{margin-top:auto;padding-top:18px}
}
/* role cells: the line glyph sits under the label on phones (the label column is too narrow for both on one line) and
   at the cell's top right from 600px */
#gsx-team .gsx-tb-lab{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
#gsx-team .gsx-tb-ico{order:2;width:20px;height:20px;color:var(--k-ink)}
@media (min-width:600px){
 #gsx-team .gsx-tb-lab{flex-direction:row;align-items:center;justify-content:space-between}
 #gsx-team .gsx-tb-ico{width:24px;height:24px;margin:-3px -2px -3px 0}
}
/* role lines and chips (CREDENTIALS roles_confirmed) */
#gsx-team .gsx-role-line{margin:0;color:var(--k-ink-2)}
#gsx-team .gsx-role-chip{justify-self:start;align-self:flex-start;white-space:normal}
@media (min-width:600px){#gsx-team .gsx-role-line{margin-top:-2px}}
/* dark: the title-block rules step up to the strong line so the cells still read */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #gsx-team .gsx-titleblock :is(.k-tb-h,.k-tb-v){background:var(--k-line-strong)}}
:root[data-theme="dark"] #gsx-team .gsx-titleblock :is(.k-tb-h,.k-tb-v){background:var(--k-line-strong)}

/* ---- "Straight answers" beside the spec plate ---- */
#gsx-team .gsx-team-split{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(40px,5vw,56px);align-items:start;margin-top:clamp(56px,6.4vw,96px)}
@media (min-width:1024px){#gsx-team .gsx-team-split{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(40px,4.4vw,72px)}}
#gsx-team .gsx-doubts{display:grid;align-content:start;min-width:0}
#gsx-team .gsx-doubts>.k-d3{margin:0 0 clamp(18px,2.2vw,28px)}
#gsx-team .gsx-doubt{display:grid;gap:10px;min-width:0;padding:clamp(18px,2vw,24px) 0 clamp(20px,2.2vw,28px);border-top:1px solid var(--k-line)}
#gsx-team .gsx-doubt:last-child{border-bottom:1px solid var(--k-line)}
#gsx-team .gsx-doubt>*{margin:0}
#gsx-team .gsx-doubt>.k-h4{max-width:34ch;text-wrap:balance}
#gsx-team .gsx-doubt>.k-body{max-width:62ch}

#gsx-team .gsx-team-plate{min-width:0}
#gsx-team .gsx-team-plate .k-plate-box{max-width:none}
/* the plate rides along beside the answers on desktop screens tall enough to show all of it */
@media (min-width:1024px) and (min-height:720px){#gsx-team .gsx-team-plate{position:sticky;top:calc(var(--k-sticky-top) + 16px)}}
/* ===== css/10-pricing.css ===== */
/* GSX Engineering · 10-pricing.css (B7): S10 Pick a plan. Kit C1 head with the switch, the offer ladder (gsx-rungs),
   kit C10 with the coverage rows (gsx-cover) and the include groups (gsx-inc-group), the add-on, strategy and
   quoted-on-request tables (cards with data-label prefixes under 860px of component width). Tokens only. */

/* ---- offer ladder: five rungs on a stair, the Audit branching from rung 2 ---- */
.gsx-rungs{margin:0 0 clamp(48px,6vw,88px)}
.gsx-rungs-h{margin:0 0 14px;color:var(--k-muted)}
.gsx-rung-list{margin:0;padding:0;list-style:none;border-top:var(--k-fr)}
.gsx-rung-list>li{min-width:0}
.gsx-rung-list a,.gsx-rung-branch{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:4px 14px;color:var(--k-ink);text-decoration:none;transition:background-color var(--k-t-ui) var(--k-ease-ui)}
.gsx-rung-list a>.k-mono-s,.gsx-rung-branch>.k-mono-s{color:var(--k-ink)}
.gsx-rung-list .k-price-m,.gsx-rung-branch .k-price-m{font-size:1.0625rem;line-height:1.2;white-space:nowrap}
.gsx-rung-list .k-small,.gsx-rung-branch .k-small{color:var(--k-muted)}
.gsx-rung-list .k-ico,.gsx-rung-branch .k-ico{width:16px;height:16px;color:var(--k-ink);transition:transform var(--k-t-ui) var(--k-ease-servo)}
.gsx-rung-list a:focus-visible,.gsx-rung-branch:focus-visible{outline:var(--k-focus-w) solid var(--k-focus);outline-offset:-4px}
@media (hover:hover){
 .gsx-rung-list a:hover,.gsx-rung-branch:hover{background:var(--k-paper-2)}
 .gsx-rung-list a:hover .k-ico,.gsx-rung-branch:hover .k-ico{transform:translateX(3px);color:var(--k-accent)}
}
html.k-reduced :is(.gsx-rung-list a,.gsx-rung-branch,.gsx-rung-list .k-ico,.gsx-rung-branch .k-ico){transition:none}
/* founding mode: the three plan prices swap (10-pricing.js) and turn accent, with the switch saying which prices show */
.gsx-rungs[data-mode=founding] .k-price-m[data-found]{color:var(--k-accent)}

/* phones: a vertical ruled list, the stair hidden, the branch last and indented */
@media (max-width:767.98px){
 .gsx-rungs-art{display:none}
 .gsx-rung-list a,.gsx-rung-branch{grid-template-columns:minmax(0,1fr) auto 16px;grid-template-areas:"l p i" "s s s";min-height:44px;padding:14px 2px 15px;border-bottom:var(--k-hl)}
 :is(.gsx-rung-list a,.gsx-rung-branch)>.k-mono-s{grid-area:l}
 :is(.gsx-rung-list a,.gsx-rung-branch)>.k-price-m{grid-area:p;text-align:right}
 :is(.gsx-rung-list a,.gsx-rung-branch)>.k-small{grid-area:s;padding-right:26px}
 :is(.gsx-rung-list a,.gsx-rung-branch)>.k-ico{grid-area:i;justify-self:end;align-self:center}
 /* the branch is narrower (indented) and its price is long: price under the label */
 .gsx-rung-branch{grid-template-areas:"l l i" "p p p" "s s s";margin-left:22px;padding-left:16px}
 .gsx-rungs .gsx-rung-branch>.k-price-m{text-align:left}
 .gsx-rung-branch::before{content:"";position:absolute;left:-12px;top:0;width:10px;height:calc(14px + .7em);border:solid var(--k-line-strong);border-width:0 0 1px 1px;border-style:dashed}
}

/* 768px and up: five columns, the stair under them continuing the column rules, the branch under columns 2 to 5 */
@media (min-width:768px){
 .gsx-rungs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
 .gsx-rungs-h{grid-column:1/-1;grid-row:1}
 .gsx-rung-list{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
 .gsx-rungs-art{grid-column:1/-1;grid-row:3;margin:0}
 .gsx-rung-branch{grid-column:2/-1;grid-row:4}
 .gsx-rung-list>li+li>a{border-left:var(--k-hl)}
 .gsx-rung-list a{grid-template-columns:minmax(0,1fr) 16px;grid-template-rows:auto auto 1fr;align-content:start;height:100%;box-sizing:border-box;padding:14px clamp(10px,1.2vw,18px) 16px}
 .gsx-rung-list a>.k-mono-s{grid-column:1;grid-row:1}
 .gsx-rung-list a>.k-ico{grid-column:2;grid-row:1;align-self:center}
 .gsx-rung-list a>.k-price-m{grid-column:1/-1;grid-row:2;margin-top:clamp(10px,1.4vw,18px);font-size:clamp(.9375rem,.25rem + 1.45vw,1.5rem);letter-spacing:-.01em}
 .gsx-rung-list a>.k-small{grid-column:1/-1;grid-row:3;margin-top:4px;font-size:.8125rem;line-height:1.4}
 /* the branch: a dashed elbow drops from the middle of column 2 (the stair's dashed line ends where it starts) */
 .gsx-rung-branch{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px;padding:12px clamp(10px,1.2vw,18px) 14px calc(12.5% + 28px);border-bottom:var(--k-hl)}
 .gsx-rung-branch::before{content:"";position:absolute;left:12.5%;top:0;width:20px;height:calc(12px + .75em);border:dashed var(--k-line);border-width:0 0 1px 1px;pointer-events:none}
 .gsx-rung-branch>.k-small{flex:1 1 16rem}
 .gsx-rung-branch>.k-ico{align-self:center}
}

/* ---- C10: three plans on a 10-row subgrid (the kit's 9 rows plus the coverage row) ---- */
/* html scroll-padding already clears the header; the kit's own scroll margin would double it on the rung jumps */
.gsx-pricing-sec .k-plan{scroll-margin-top:8px}
@container k-pricing (min-width:920px){
 .gsx-pricing-sec .k-plans{grid-template-rows:repeat(10,auto)}
 .gsx-pricing-sec .k-plan{grid-row:span 10}
}
@container k-pricing (min-width:600px) and (max-width:919.98px){
 .gsx-pricing-sec .k-plan>.gsx-cover{grid-column:2;grid-row:4/span 2}
 /* the coverage rows make rows 4 and 5 taller than the price: keep "/mo" beside the figure instead of stretching */
 .gsx-pricing-sec .k-plan>:is(.k-plan-price,.k-plan-off){align-self:start}
 .gsx-pricing-sec .k-plan>.k-plan-axis{grid-row:6/span 2}
 .gsx-pricing-sec .k-plan>.k-plan-more{grid-row:8/span 3}
}

/* coverage row: which of the four outcomes each plan covers, a shape plus a label (filled = included, hollow = add-on) */
.gsx-cover{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;margin:clamp(16px,2vw,22px) 0 0;padding:0;list-style:none;border-bottom:var(--k-hl)}
.gsx-cover>li{display:grid;grid-template-columns:10px minmax(0,1fr);align-items:baseline;column-gap:9px;row-gap:2px;min-width:0;padding:9px 0;border-top:var(--k-hl)}
.gsx-cover>li>i{grid-row:1;align-self:center;width:10px;height:10px;box-sizing:border-box;border:1.5px solid var(--k-accent);forced-color-adjust:none}
.gsx-cover>li.is-in>i{background:var(--k-accent)}
.gsx-cover>li.is-add>i{border-color:var(--k-line-strong);background:transparent}
.gsx-cover .k-mono-s{grid-column:2;color:var(--k-muted)}
.gsx-cover-v{grid-column:2;font:450 var(--k-fs-small)/1.4 var(--k-f-mono);font-stretch:87.5%;letter-spacing:.02em;color:var(--k-ink)}
.gsx-cover>li.is-in .gsx-cover-v{font-weight:650}
.gsx-cover>li.is-add .gsx-cover-v{color:var(--k-muted)}
@container k-pricing (min-width:600px){
 .gsx-cover{grid-template-columns:minmax(0,1fr)}
 .gsx-cover>li{grid-template-columns:10px minmax(0,1fr) auto;column-gap:10px}
 .gsx-cover-v{grid-column:3;grid-row:1;text-align:right;white-space:nowrap}
}

/* include lists grouped by outcome: the group heads are labels, not checks */
.gsx-pricing-sec .k-checks>li.gsx-inc-group{display:block;margin-top:8px;padding-top:12px;border-top:var(--k-w-hair) dashed var(--k-line);color:var(--k-muted)}
.gsx-pricing-sec .k-checks>li.gsx-inc-group:first-child{margin-top:0;padding-top:0;border-top:0}
.gsx-pricing-sec .k-checks>li.gsx-inc-group::before{content:none}

/* notes: the label, then the sentences in one readable measure */
.gsx-fine-t{flex:1 1 40ch;max-width:96ch}

/* ---- tables: a link under each note; the quoted table has no price column ---- */
/* block with an inline arrow, so a wrapped label keeps the arrow after its last word and the rule under its width */
.gsx-note-a{display:block;width:fit-content;max-width:100%;margin-top:10px}
.gsx-note-a .k-ico{display:inline-block;margin-left:8px;vertical-align:-3px}
.k-addon-note.is-text .gsx-note-a{font-size:var(--k-fs-label)}
.gsx-note-tag>.gsx-note-t{display:block}
.gsx-quoted-act .gsx-note-a{margin-top:0}
.gsx-quoted .k-addon>th{padding-right:24px}
/* phone cards (kit card mode under 860px of component width): each cell after the name is prefixed with its column */
@container k-pricing (max-width:859.98px){
 .gsx-pricing-sec .k-addon [data-label]::before{content:attr(data-label);content:attr(data-label) / "";display:block;margin:0 0 5px;font:450 var(--k-fs-label)/1.3 var(--k-f-mono);font-stretch:87.5%;letter-spacing:.08em;text-transform:uppercase;color:var(--k-muted)}
 .gsx-quoted .k-addon{grid-template-columns:minmax(0,1fr)}
 .gsx-quoted .k-addon>th{padding-right:0}
 .gsx-quoted-act .gsx-note-a{margin-top:2px}
}

/* phones: the strategy and quoted tables fold into closed rows (details; open with JS off and from 768px, where the
   summary is not drawn and js/10-pricing.js keeps them open) */
.gsx-tdet{min-width:0}
.gsx-tdet-s{display:none}
@media (max-width:767.98px){
 .gsx-tdet-s{position:relative;display:flex;align-items:center;min-height:48px;padding:10px 32px 10px 0;border-top:1px solid var(--k-line);border-bottom:1px solid var(--k-line);color:var(--k-ink);list-style:none;cursor:pointer}
 .gsx-tdet-s::-webkit-details-marker{display:none}
 .gsx-tdet-s::after{content:"";position:absolute;top:50%;right:4px;width:12px;height:12px;margin-top:-6px;background:linear-gradient(currentColor,currentColor) 50% 50%/100% 1.5px no-repeat,linear-gradient(currentColor,currentColor) 50% 50%/1.5px 100% no-repeat;transition:transform var(--k-t-ui) var(--k-ease-servo)}
 .gsx-tdet[open]>.gsx-tdet-s::after{transform:rotate(45deg)}
 .gsx-tdet[open]>.gsx-tdet-s{margin-bottom:14px}
 .gsx-tdet-s:focus-visible{outline-offset:-2px}
 html.k-reduced .gsx-tdet-s::after{transition:none}
 /* the summary names the table, so its caption is read, not shown */
 .gsx-tdet>table>caption{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}

/* phones under 400px: "Book a call about Starter" keeps to one line */
@media (max-width:399.98px){.gsx-pricing-sec .k-plan>.k-btn{padding-inline:12px;letter-spacing:.04em}}
/* ===== css/11-founding.css ===== */
/* GSX Engineering · 11-founding.css (B7): S11 founding spots. Kit C9 band with N6 The Ten, inverted panel in both
   themes (data-k-tone="panel" data-k-invert). Only the neutrality line under the terms is new. Tokens only. */
.gsx-offer-own{margin:-6px 0 0;max-width:52ch;color:var(--k-muted)}

/* phones under 400px: both CTA labels keep to one line */
@media (max-width:399.98px){#founding .k-offer-cta .k-btn{padding-inline:12px;letter-spacing:.04em}}
/* ===== css/12-faq.css ===== */
/* GSX Engineering · 12-faq.css (B7): S12 Questions owners ask. Kit C8 rows; the H2 sits left and sticks under the
   header from 1024px, the ruled question rows run on the right. One column, not sticky, below 1024px. Tokens only. */
.gsx-faq-wrap{margin-top:0}
.gsx-faq-wrap>.k-faq-h{margin:0;padding-top:12px}
@media (min-width:1024px){
 .gsx-faq-wrap{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--k-col-gap);align-items:start}
 .gsx-faq-wrap>.k-faq-h{grid-column:1/5;position:sticky;top:var(--k-sticky-top)}
 .gsx-faq-wrap>.k-faq{grid-column:5/13}
}
/* phones: a narrower number column so the questions and answers keep their measure */
@media (max-width:599.98px){
 .gsx-faq-sec .k-faq summary{grid-template-columns:40px minmax(0,1fr) 24px;column-gap:10px;min-height:44px;box-sizing:border-box}
 .gsx-faq-sec .k-faq-a{padding-left:50px}
}
/* ===== css/13-book.css ===== */
/* GSX Engineering · 13-book.css (B1): S13, step bars, then the framed booking window (form 7/12, aside 5/12). */

/* ---- step bars: dark in light mode, light in dark mode (panel + data-k-invert), 1px apart ---- */
.gsx-bars{display:grid;gap:1px;margin:0 0 clamp(40px,5vw,64px);padding:0;list-style:none;background-color:transparent;box-shadow:none;border-radius:0}
.gsx-bar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"n t d" ". s .";align-items:center;gap:6px 14px;padding:16px max(16px,1.6vw);background:var(--k-paper);color:var(--k-ink);border-radius:var(--k-r-1)}
.gsx-bar>*{margin:0}
.gsx-bar-n{grid-area:n;color:var(--k-muted)}
.gsx-bar-t{grid-area:t;color:var(--k-ink)}
.gsx-bar-s{grid-area:s;max-width:62ch;font:400 var(--k-fs-body)/1.5 var(--k-f-body);color:var(--k-ink-2)}
.gsx-bar-dot{grid-area:d;width:8px;height:8px;background:var(--k-accent);box-shadow:0 0 0 3px var(--k-accent-tint);forced-color-adjust:none}
@media (min-width:768px){
 .gsx-bar{grid-template-columns:3.5ch minmax(0,5fr) minmax(0,7fr) 8px;grid-template-areas:"n t s d";gap:12px clamp(16px,2.4vw,40px);min-height:72px;padding-block:14px}
}

/* ---- the booking window ---- */
.gsx-book{display:grid;grid-template-columns:minmax(0,1fr);border:var(--k-fr);border-radius:var(--k-r-1);background:var(--k-surface)}
.gsx-book-form{min-width:0;margin:0;padding:clamp(20px,3.2vw,48px) clamp(16px,3.2vw,48px)}
.gsx-book-form>.k-d2{margin:0}
.gsx-book-lede{margin-top:clamp(14px,1.6vw,20px)}
@media (min-width:1024px){.gsx-book{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}

/* topic chooser: chips of 44px or more; 2 per row, 3 from 600px, 4 from 1200px */
.gsx-topics{min-width:0;margin:clamp(24px,3vw,36px) 0 0;padding:0;border:0}
.gsx-topics>legend{float:left;width:100%;margin:0 0 6px;padding:0;color:var(--k-ink)}
.gsx-topics>legend~*{clear:both}
.gsx-topics>legend:focus{outline:none}
.gsx-topics>legend:focus-visible{outline:var(--k-focus-w) solid var(--k-focus);outline-offset:var(--k-focus-o)}
#gsx-picked{margin:0;color:var(--k-ink-2)}
/* JS off the live line cannot follow a tap, so it is not shown (the :target hint below does that job) */
html:not(.gsx-on) #gsx-picked{display:none}
/* the chips sit in a details: open by default and with JS off; a topic chosen elsewhere folds them behind "Change topic" */
.gsx-topic-more{display:block;clear:both;min-width:0;margin-top:14px}
.gsx-topic-sum{position:relative;display:flex;align-items:center;min-height:44px;padding:8px 32px 8px 0;border-top:1px solid var(--k-line);border-bottom:1px solid var(--k-line);color:var(--k-ink);list-style:none;cursor:pointer;width:100%}
.gsx-topic-sum::-webkit-details-marker{display:none}
.gsx-topic-sum::after{content:"";position:absolute;top:50%;right:4px;width:12px;height:12px;margin-top:-6px;background:linear-gradient(currentColor,currentColor) 50% 50%/100% 1.5px no-repeat,linear-gradient(currentColor,currentColor) 50% 50%/1.5px 100% no-repeat;transition:transform var(--k-t-ui) var(--k-ease-servo)}
.gsx-topic-more[open]>.gsx-topic-sum::after{transform:rotate(45deg)}
.gsx-topic-more[open]>.gsx-topic-sum{border-bottom-color:transparent}
.gsx-topic-sum:focus-visible{outline-offset:-2px}
@media (hover:hover){.gsx-topic-sum:hover{color:var(--k-accent)}}
html.k-reduced .gsx-topic-sum::after{transition:none}
html:not(.gsx-on) .gsx-topic-sum{display:none}
.gsx-topic-more>.gsx-topic-group:first-of-type{margin-top:12px}
.gsx-topic-group{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:20px}
.gsx-topic-gl{grid-column:1/-1;margin:0 0 2px;color:var(--k-muted)}
@media (min-width:600px){.gsx-topic-group{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1200px){.gsx-topic-group{grid-template-columns:repeat(4,minmax(0,1fr))}}
.gsx-topic{position:relative;display:grid;grid-template-columns:10px minmax(0,1fr);align-content:center;column-gap:10px;row-gap:3px;min-width:0;min-height:52px;padding:9px 10px 9px 12px;border:1px solid var(--k-line-strong);border-radius:var(--k-r-1);background:transparent;color:var(--k-ink-2);cursor:pointer;scroll-margin-top:calc(var(--k-sticky-top) + 140px);transition:border-color var(--k-t-ui) var(--k-ease-ui),background-color var(--k-t-ui) var(--k-ease-ui)}
.gsx-topic>input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.gsx-topic-mark{grid-column:1;grid-row:1;align-self:start;width:10px;height:10px;margin-top:.3em;border:1.5px solid var(--k-line-strong);pointer-events:none;forced-color-adjust:none}
.gsx-topic-l{grid-column:2;grid-row:1;font:450 .9375rem/1.3 var(--k-f-body);overflow-wrap:anywhere;pointer-events:none}
.gsx-topic-p{grid-column:2;grid-row:2;color:var(--k-muted);font-size:var(--k-fs-micro);pointer-events:none}
@media (hover:hover){.gsx-topic:hover{background:var(--k-paper-2);border-color:var(--k-ink)}}
.gsx-topic>input:checked~.gsx-topic-mark{border-color:var(--k-accent);background:var(--k-accent)}
.gsx-topic>input:checked~.gsx-topic-l{font-weight:600;color:var(--k-ink)}
.gsx-topic:has(>input:checked){border-color:var(--k-ink);box-shadow:inset 0 0 0 1px var(--k-ink);background:var(--k-paper)}
.gsx-topic:has(>input:focus-visible){outline:var(--k-focus-w) solid var(--k-focus);outline-offset:2px}
@supports not selector(:has(*)){.gsx-topic>input:focus-visible~.gsx-topic-mark{outline:var(--k-focus-w) solid var(--k-focus);outline-offset:3px}}
/* JS off: a #topic-<id> link jumps here and the chip says what to do (with JS the chip is already chosen) */
html:not(.gsx-on) .gsx-topic:target{outline:2px solid var(--k-accent);outline-offset:3px;background:var(--k-accent-tint)}
html:not(.gsx-on) .gsx-topic:target::after{content:"Tap to choose";content:"Tap to choose" / "";grid-column:1/-1;margin-top:4px;color:var(--k-accent);font:600 var(--k-fs-micro)/1.2 var(--k-f-mono);font-stretch:87.5%;letter-spacing:.08em;text-transform:uppercase}

/* optional fields (booking and preview) or one textarea (mailto) */
.gsx-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:14px 16px;margin-top:clamp(24px,3vw,32px)}
.gsx-field{display:grid;grid-template-rows:1fr auto;gap:6px;min-width:0}
.gsx-field-l{align-self:end;font:500 var(--k-fs-small)/1.35 var(--k-f-body);color:var(--k-ink-2)}
.gsx-field-o{font-weight:400}
.gsx-field :is(input,textarea){width:100%;min-height:48px;margin:0;padding:11px 12px;border:1px solid var(--k-line-strong);border-radius:var(--k-r-1);background:var(--k-paper);color:var(--k-ink);font:400 1rem/1.4 var(--k-f-body)}
.gsx-field textarea{min-height:132px;resize:vertical}
.gsx-field :is(input,textarea):focus{border-color:var(--k-ink)}
.gsx-fields.is-mail{grid-template-columns:minmax(0,1fr)}

/* submit */
.gsx-book-send{display:grid;justify-items:start;gap:12px;margin-top:clamp(24px,3vw,32px)}
.gsx-book-send>*{margin:0}
.gsx-book-submit{min-width:min(100%,280px)}
.gsx-book-submit[disabled]{opacity:1;border-color:var(--k-line-strong);background:var(--k-paper-2);color:var(--k-muted)}
.gsx-preview-note{padding:8px 12px;border:1px dashed var(--k-line-strong);border-radius:var(--k-r-1);color:var(--k-muted)}
.gsx-book-under{color:var(--k-muted)}
@media (max-width:599.98px){.gsx-book-submit{width:100%}}

/* aside: paid starting points, the founding line, demo and email slots */
.gsx-book-aside{min-width:0;padding:clamp(20px,3.2vw,48px) clamp(16px,3vw,40px);border-top:1px solid var(--k-line);border-radius:0 0 var(--k-r-1) var(--k-r-1)}
.gsx-book-aside-in{display:grid;align-content:start;gap:clamp(18px,2vw,24px)}
.gsx-book-aside-in>*{margin:0}
.gsx-book-rows{display:grid;margin:0;padding:0;list-style:none;border-bottom:1px solid var(--k-line)}
.gsx-book-row{display:grid;justify-items:start;gap:8px;padding:16px 0 18px;border-top:1px solid var(--k-line)}
.gsx-book-row>*{margin:0}
.gsx-book-row-t{font:650 var(--k-fs-h4)/1.15 var(--k-f-display);letter-spacing:-.01em;text-transform:uppercase;color:var(--k-ink)}
.gsx-book-row-t .k-price-m{font-size:.85em;text-transform:none}
.gsx-book-row .k-small{color:var(--k-ink-2)}
.gsx-book-founding{display:grid;justify-items:start;gap:8px}
.gsx-book-founding>*{margin:0}
.gsx-book-founding>.k-mono-s{color:var(--k-muted)}
.gsx-book-founding>.k-small{color:var(--k-ink-2)}
/* from 1024px the aside is a panel at the top of its column that stays in view beside the long form, not a full-height grey strip */
@media (min-width:1024px){
 .gsx-book-aside{position:sticky;top:calc(var(--k-sticky-top) + 16px);align-self:start;border-top:0;border-left:1px solid var(--k-line);border-bottom:1px solid var(--k-line);border-radius:0 var(--k-r-1) 0 0}
}
/* ===== css/14-footer.css ===== */
/* GSX Engineering · 14-footer.css (B1): S14, the closing CTA band over the kit C11 footer (call-log nav, title block, end mark). */
.gsx-foot-band{display:grid;gap:clamp(24px,3vw,36px);margin-top:clamp(8px,1vw,16px)}
.gsx-foot-title{min-width:0}
.gsx-foot .k-foot-sign{font-size:clamp(2rem,7cqi,3rem);line-height:.92;letter-spacing:-.03em}
.gsx-foot-act{display:grid;gap:20px;min-width:0}
.gsx-foot-act>.k-body{max-width:46ch;color:var(--k-ink-2)}
.gsx-foot-btns{display:flex;flex-wrap:wrap;gap:12px}
@container k-foot (min-width:900px){
 .gsx-foot-band{grid-template-columns:minmax(0,3fr) minmax(0,2fr);align-items:end;column-gap:clamp(32px,4vw,64px)}
 .gsx-foot .k-foot-sign{font-size:clamp(2.5rem,4cqi,3rem)}
}
@media (max-width:599.98px){.gsx-foot-btns{display:grid}.gsx-foot-btns>.k-btn{width:100%;padding-inline:14px}}

/* title block: one ruled row per cell, label left and value right like a drawing's title block; label over value on phones */
.gsx-foot-tb{grid-template-columns:minmax(0,1fr)}
.gsx-foot-tb .k-foot-cell{grid-column:1/-1}
.gsx-foot-tb .k-foot-cell dd.k-h4{font-size:clamp(1rem,.92rem + .36vw,1.25rem);line-height:1.2;text-wrap:balance}
.gsx-foot-tb .gsx-email-line{margin:0}
@container k-foot (min-width:560px){.gsx-foot-tb .k-foot-cell{grid-template-columns:7.5em minmax(0,1fr);align-items:baseline;column-gap:16px;padding-block:16px}}
.gsx-foot .k-calllog-list a{grid-template-columns:6px 2.5ch minmax(0,1fr)}
.gsx-foot .k-foot-end{color:var(--k-muted)}