/* GTMhub components. Requires colors_and_type.css. v1.0, 2026-10-03.
   Every component here is lifted from the approved homepage base (home-synthesis-v3) and the
   GTM engineering lane page, then moved onto tokens. Class names are short and unprefixed on purpose,
   matching the drafts, so pages built from them stay readable. */
*,*::before,*::after{box-sizing:border-box}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}
.gh-dark :focus-visible,.console :focus-visible{outline-color:var(--lime)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* ===== Actions ===== *//* Primary: lime fill, ink text, 12px radius. One per view. */
.btn-lime{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 22px;border:0;border-radius:var(--r-lg);background:var(--lime);color:var(--on-lime);font:500 var(--fs-15)/1 var(--sans);cursor:pointer;transition:filter var(--t-fast),transform var(--t-fast)}
.btn-lime:hover{filter:brightness(1.05)}
.btn-lime:active{transform:translateY(1px)}
.btn-lime svg{width:14px;height:14px}
/* Secondary: ink fill. For a second action, product UI, or on a lime-heavy surface. */
.btn-ink{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 18px;border:0;border-radius:11px;background:var(--ink);color:var(--white);font:500 var(--fs-14-5)/1 var(--sans);cursor:pointer;transition:background var(--t-fast)}
.btn-ink:hover{background:var(--ink-800)}
.btn-ink svg{width:14px;height:14px;color:var(--lime)}
/* Quiet: hairline. Cancel, filters, low-stakes actions. */
.btn-line{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 18px;border:0;border-radius:11px;background:var(--raised);color:var(--ink);font:500 var(--fs-14-5)/1 var(--sans);box-shadow:var(--soft),inset 0 0 0 1px color-mix(in srgb,var(--ink-fixed) 8%,transparent);cursor:pointer;transition:box-shadow var(--t-fast)}
.btn-line:hover{box-shadow:var(--soft),inset 0 0 0 1px color-mix(in srgb,var(--ink-fixed) 22%,transparent)}
.btn-sm{height:36px;padding:0 14px;font-size:var(--fs-13-5);border-radius:var(--r-md)}
.mini-btn{flex:none;height:28px;display:inline-flex;align-items:center;padding:0 10px;border-radius:8px;background:var(--ink);color:var(--white);font:500 var(--fs-12-5)/1 var(--sans)}
/* Arrow link: the house call to action. Underlined label + lime square with a north-east arrow. */
.arrow-link{display:inline-flex;align-items:center;gap:14px;font:500 var(--fs-15)/1 var(--sans);color:var(--ink)}
.arrow-link u{text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:2px}
.sq{width:38px;height:38px;border-radius:9px;background:var(--lime);color:var(--on-lime);display:grid;place-items:center;transition:transform var(--t-fast)}
.sq.ghost{background:var(--raised);box-shadow:var(--soft),var(--hair)}
.sq svg{width:14px;height:14px}
.arrow-link:hover .sq{transform:translate(2px,-2px)}
.gh-dark .arrow-link{color:var(--d-text)}
/* ===== Labels and tags ===== *//* Pill label: the section eyebrow. Square G badge + uppercase words, max 4 words. */
.pill-label{display:inline-flex;align-items:center;gap:10px;height:36px;padding:0 16px 0 6px;border-radius:var(--r-full);background:var(--raised);box-shadow:var(--soft),inset 0 0 0 1px color-mix(in srgb,var(--ink-fixed) 4%,transparent);font:500 var(--fs-11)/1 var(--sans);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--ink)}
.pill-label i{width:24px;height:24px;border-radius:50%;background:var(--ink);display:grid;place-items:center}
.pill-label i svg{width:11px;height:11px;color:var(--white)}
.gh-dark .pill-label{background:var(--graphite-3);color:var(--d-text);box-shadow:inset 0 0 0 1px var(--d-line)}
.gh-dark .pill-label i{background:var(--bg)}
.gh-dark .pill-label i svg{color:var(--ink)}
/* Label (mono): table heads, row labels, stage codes. */
.k{font:400 var(--fs-label)/1 var(--mono);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--tone)}
/* Example flag: required on any illustrative number or mock data. */
.ex{display:inline-block;font:400 var(--fs-micro)/1 var(--mono);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--tone);border:1px solid var(--line);border-radius:var(--r-full);padding:4px 7px;background:var(--raised)}
.chip{height:36px;display:inline-flex;align-items:center;padding:0 14px;border-radius:var(--r-md);background:var(--raised);box-shadow:var(--soft),inset 0 0 0 1px color-mix(in srgb,var(--ink-fixed) 4%,transparent);font-size:var(--fs-14)}
.tagc{height:22px;display:inline-flex;align-items:center;gap:5px;padding:0 8px;border-radius:var(--r-sm);background:var(--chip);font:400 var(--fs-11)/1 var(--mono);color:var(--muted)}
.tagc.lime{background:var(--lime);color:var(--on-lime)}
.bill{display:inline-flex;height:28px;align-items:center;padding:0 12px;border-radius:var(--r-full);background:var(--raised);box-shadow:var(--soft),inset 0 0 0 1px color-mix(in srgb,var(--ink-fixed) 5%,transparent);font:500 var(--fs-10-5)/1 var(--sans);letter-spacing:var(--tr-label);text-transform:uppercase}
/* Status: live dot with lime halo. */
.ok{display:inline-flex;align-items:center;gap:6px;font:400 var(--fs-10-5)/1 var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--ink)}
.ok::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 3px var(--lime-ring)}
.status{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:var(--r-sm);font:500 var(--fs-11-5)/1 var(--sans)}
.status.success{background:var(--success-wash);color:var(--success)}
.status.warn{background:var(--warn-wash);color:var(--warn)}
.status.danger{background:var(--danger-wash);color:var(--danger)}
.status.info{background:var(--info-wash);color:var(--info)}
/* ===== Lane marks: the four service lanes as glyph codes ===== */
.lm{flex:none;display:inline-grid;place-items:center;width:26px;height:22px;border-radius:5px;font:normal 500 var(--fs-9-5)/1 var(--mono);letter-spacing:.04em}
.lm.ge{background:var(--ink);color:var(--lime)}
/* GTM engineering, the foundation */
.lm.pm{background:var(--lime);color:var(--ink)}
/* Paid media */
.lm.oa{background:var(--raised);color:var(--ink);box-shadow:inset 0 0 0 1.25px var(--ink)}
/* Outbound and ABM */
.lm.ai{background:var(--raised);color:var(--ink);outline:1.25px dashed var(--ink);outline-offset:-1.25px}
/* AI search and content */
.lm.sm{width:20px;height:16px;border-radius:4px;font-size:var(--fs-8)}
/* ===== Surfaces ===== *//* Double-bezel shell: the signature frame for hero objects and feature mockups. */
.shell{padding:8px;border-radius:var(--r-3xl);background:color-mix(in srgb,var(--line-2) 22%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--raised) 70%,transparent),0 0 0 1px color-mix(in srgb,var(--ink-fixed) 3.5%,transparent)}
.card{background:var(--raised);border-radius:var(--r-2xl);box-shadow:var(--lift)}
.panel{border-radius:var(--r-xl);background:var(--raised);box-shadow:var(--lift),var(--hair);overflow:hidden}
.panel-h{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);font-size:var(--fs-12-5);color:var(--muted)}
.panel-h b{color:var(--ink);font-weight:500}
.signal{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:var(--r-md);background:var(--lime-wash);box-shadow:inset 0 0 0 1px var(--lime-line);font-size:var(--fs-13-5)}
/* Browser window frame for product and library mockups. */
.win{overflow:hidden}
.win-bar{display:flex;align-items:center;gap:14px;height:44px;padding:0 14px 0 16px;border-bottom:1px solid var(--line)}
.dots{display:flex;gap:6px}
.dots i{width:9px;height:9px;border-radius:50%;background:var(--line)}
.url{flex:1;max-width:300px;margin:0 auto;height:26px;border-radius:7px;background:var(--chip);display:flex;align-items:center;justify-content:center;gap:8px;font:400 var(--fs-11-5)/1 var(--mono);color:var(--muted)}
.win-body{background:var(--sunken)}
/* Dark band: the one dark moment on a light page. Inset 16px from the viewport, 32px radius. */
.dark-band{margin:var(--section) 16px 0;border-radius:var(--r-band);background:var(--graphite);color:var(--d-text);position:relative;overflow:hidden}
.dark-band::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(color-mix(in srgb,var(--white) 3.5%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--white) 3.5%,transparent) 1px,transparent 1px);
  background-size:120px 120px;-webkit-mask-image:radial-gradient(ellipse 80% 70% at 70% 40%,var(--graphite-0),transparent);mask-image:radial-gradient(ellipse 80% 70% at 70% 40%,var(--graphite-0),transparent)}
.dark-in{position:relative;padding:112px calc(var(--gut) - 16px)}
/* ===== Metrics and proof ===== */
.metric{padding:16px 16px 14px;border-radius:14px;background:var(--sunken);box-shadow:inset 0 0 0 1px var(--line)}
.metric b{display:block;font:500 var(--fs-26)/1.1 var(--sans);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.metric span{font-size:var(--fs-13-5);color:var(--muted)}
.mark{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--raised);box-shadow:var(--soft),inset 0 0 0 1px color-mix(in srgb,var(--ink-fixed) 6%,transparent);font:600 var(--fs-15)/1 var(--sans);letter-spacing:-.02em}
.mark.ink{background:var(--ink);color:var(--d-text)}
.avatar{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(140deg,var(--d-line),var(--fill-ink));color:var(--d-text);font:500 var(--fs-13)/1 var(--mono);letter-spacing:.04em;box-shadow:0 0 0 3px var(--raised),var(--soft)}
.founder{display:flex;align-items:center;gap:14px;font-size:var(--fs-14-5);color:var(--muted);line-height:1.4}
.founder b{color:var(--ink);font-weight:500}
/* ===== Workflow card: trigger, steps, output. Ink square = trigger, hollow = step, lime = output ===== */
.wf{display:flex;flex-direction:column;min-height:178px;padding:14px;border-radius:13px;background:var(--raised);box-shadow:var(--soft),var(--hair)}
.wf-f{font:400 var(--fs-9-5)/1 var(--mono);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--tone)}
.wf b{display:block;margin-top:9px;font-size:var(--fs-13-5);font-weight:500;line-height:1.35}
.wf-flow{margin-top:auto;display:flex;align-items:center;padding:12px 0}
.wf-flow i{flex:none;width:12px;height:12px;border-radius:3px;box-shadow:inset 0 0 0 1.25px var(--line-2);background:var(--raised)}
.wf-flow i.t{background:var(--ink);box-shadow:none}
.wf-flow i.o{background:var(--lime);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink-fixed) 15%,transparent)}
.wf-flow s{flex:1;height:1px;background:var(--line-2);text-decoration:none}
.tl{display:flex;flex-wrap:wrap;gap:4px}
.tl i{font:normal 400 var(--fs-10)/1 var(--mono);padding:5px 6px;border-radius:5px;background:var(--raised);box-shadow:inset 0 0 0 1px var(--line);color:var(--muted)}
/* Job ticket: one AI job in a stage column. .live = running now. */
.jt{position:relative;padding:10px 30px 11px 11px;border-radius:var(--r-md);background:var(--raised);box-shadow:inset 0 0 0 1px var(--line),0 1px 2px color-mix(in srgb,var(--ink-fixed) 3%,transparent);transition:box-shadow var(--t-ui),transform var(--t-ui)}
.jt-v{display:flex;align-items:center;gap:6px;font:400 var(--fs-9)/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--tone)}
.jt b{display:block;margin-top:6px;font-size:var(--fs-12-5);font-weight:500;line-height:1.32}
.jt .lm{position:absolute;top:8px;right:8px}
.jt.live{box-shadow:inset 0 0 0 1.5px var(--ink),0 10px 22px -12px color-mix(in srgb,var(--ink-fixed) 35%,transparent);transform:translateY(-1px)}
.jt.live .jt-v{color:var(--ink)}
.jt.live .jt-v::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 1px color-mix(in srgb,var(--ink-fixed) 20%,transparent)}
/* Approval gate: where a human signs off. */
.gate{display:flex;align-items:flex-start;gap:7px;font-size:var(--fs-12);line-height:1.35;color:var(--muted)}
.gate svg{flex:none;width:12px;height:12px;margin-top:1px}
/* Trail: a three-step horizontal sequence with lime nodes. */
.trail{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);position:relative}
.trail::before{content:"";position:absolute;left:4px;right:calc(33.3% - 4px);top:4px;height:1px;background:var(--line-2)}
.trail li{position:relative;padding-top:16px;font:400 var(--fs-10-5)/1.3 var(--mono);color:var(--tone);text-transform:uppercase;letter-spacing:.05em}
.trail li::before{content:"";position:absolute;left:0;top:0;width:9px;height:9px;border-radius:2px;background:var(--lime);box-shadow:0 0 0 1px color-mix(in srgb,var(--ink-fixed) 18%,transparent)}
.trail b{display:block;margin-bottom:6px;font-weight:500;color:var(--ink);font-size:var(--fs-11)}
/* Output row: the ink bar that closes a system map. */
.outrow{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 22px;background:var(--ink);color:var(--white);flex-wrap:wrap}
.outrow b{display:inline-flex;align-items:center;gap:12px;font-weight:400;font-size:var(--fs-15-5)}
.outrow b::before{content:"";width:9px;height:9px;background:var(--lime)}
.outrow span{font:400 var(--fs-10-5)/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--d-muted)}
/* ===== The agentic console: dark, monospaced, where work visibly runs ===== */
.console{--c-line:var(--d-line);--c-line-2:var(--d-line-2);border-radius:19px;overflow:hidden;background:var(--graphite);color:var(--d-text);font-family:var(--mono);box-shadow:var(--deep),inset 0 0 0 1px var(--d-line)}
.console .bar{display:flex;align-items:center;justify-content:space-between;height:40px;padding:0 16px;border-bottom:1px solid var(--c-line);font-size:var(--fs-10-5);letter-spacing:.06em;text-transform:uppercase;color:var(--d-label)}
.console .bar span:first-child::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--lime);margin-right:10px;vertical-align:1px}
.console .tag{border:1px solid var(--c-line-2);border-radius:var(--r-full);padding:3px 8px;font-size:var(--fs-9-5);letter-spacing:.08em}
.console .log{padding:16px 18px 14px;font-size:var(--fs-11-5);line-height:20px}
.console .prompt{color:var(--d-text);min-height:42px}
.console .prompt b{color:var(--lime);font-weight:500;margin-right:8px}
/* prompt glyph: lime allowed as a console glyph */
.console .caret{display:inline-block;width:7px;height:13px;background:var(--lime);vertical-align:-2px;margin-left:2px;animation:gh-blink 1s steps(1) infinite}
@keyframes gh-blink{50%{opacity:0}}
.console .ln{display:flex;align-items:baseline;gap:8px;color:var(--d-label)}
.console .ln::before{content:"";flex:none;width:6px;height:6px;border:1px solid var(--c-line-2);align-self:center}
.console .ln.done::before{background:var(--lime);border-color:var(--lime)}
.console .ln .lead{flex:1;border-bottom:1px dotted var(--c-line-2);transform:translateY(-4px)}
.console .ln .v{color:var(--d-faint)}
.console .ln.done .v{color:var(--d-text)}
.console .tb{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--c-line);font-size:var(--fs-9-5);line-height:1.3;text-transform:uppercase;letter-spacing:.05em}
.console .tb div{padding:9px 14px;color:var(--d-label)}
.console .tb div + div{border-left:1px solid var(--c-line)}
.console .tb b{display:block;color:var(--d-text);font-weight:500;margin-top:2px}
/* ===== Forms ===== */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font:500 var(--fs-13)/1 var(--sans)}
.field small{font-size:var(--fs-12-5);color:var(--muted)}
.input{height:44px;padding:0 14px;border:0;border-radius:var(--r-md);background:var(--raised);box-shadow:inset 0 0 0 1px var(--line-2);font:400 var(--fs-15)/1 var(--sans);color:var(--ink);transition:box-shadow var(--t-fast)}
.input::placeholder{color:var(--faint)}
.input:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--ink),0 0 0 4px var(--lime-ring)}
.input.error{box-shadow:inset 0 0 0 1.5px var(--danger)}
.field .err{color:var(--danger);font-size:var(--fs-12-5)}
/* Inline form in a bezel: the hero booking form. */
.form{padding:6px;border-radius:20px;background:color-mix(in srgb,var(--line-2) 25%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--raised) 70%,transparent),0 0 0 1px color-mix(in srgb,var(--ink-fixed) 3.5%,transparent)}
.form-in{display:flex;align-items:center;gap:4px;padding:5px;border-radius:15px;background:var(--raised);box-shadow:var(--soft)}
.form-in input{flex:1;min-width:0;height:48px;border:0;background:transparent;padding:0 16px;font:400 var(--fs-15)/1 var(--sans);border-radius:var(--r-md);color:var(--ink)}
.form-in input:focus{outline:none;background:var(--bg)}
.form-in input + input{border-left:1px solid var(--line);border-radius:0}
/* ===== Navigation and switching ===== */
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:28px;height:56px;padding:0 8px 0 18px;border-radius:var(--r-xl);background:color-mix(in srgb,var(--raised) 78%,transparent);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);box-shadow:var(--soft),inset 0 0 0 1px color-mix(in srgb,var(--ink-fixed) 6%,transparent)}
.nav-in .links{display:flex;gap:30px;font-size:var(--fs-15)}
.nav-in .links a{opacity:.78;transition:opacity var(--t-fast)}
.nav-in .links a:hover{opacity:1}
.nav-in .arrow-link .sq{width:36px;height:36px}
.word{display:inline-flex;align-items:center}
.word img,.word svg{height:20px;width:auto}
.tabs{display:inline-flex;gap:4px;padding:5px;border-radius:14px;background:color-mix(in srgb,var(--line-2) 30%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--raised) 70%,transparent)}
.tab{height:38px;padding:0 16px;border:0;border-radius:var(--r-md);background:transparent;cursor:pointer;font:400 var(--fs-14-5)/1 var(--sans);color:var(--muted);transition:background var(--t-fast),color var(--t-fast),box-shadow var(--t-fast)}
.tab:hover{color:var(--ink)}
.tab[aria-selected=true]{background:var(--raised);color:var(--ink);box-shadow:var(--soft)}
.filt{display:inline-flex;gap:3px;padding:4px;border-radius:var(--r-lg);background:var(--chip)}
.filt button{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 11px;border:0;border-radius:8px;background:transparent;font:400 var(--fs-13)/1 var(--sans);color:var(--muted);cursor:pointer}
.filt button[aria-pressed=true]{background:var(--raised);color:var(--ink);box-shadow:0 1px 2px color-mix(in srgb,var(--ink-fixed) 8%,transparent)}
/* ===== Comparison table: GTMhub column raised, everything else hairline ===== */
.cmp{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:var(--fs-14-5)}
.cmp th,.cmp td{height:64px;padding:0 12px;text-align:center;border-bottom:1px solid var(--line);font-weight:400;color:var(--muted)}
.cmp thead th{font-weight:500;color:var(--ink)}
.cmp tbody th{text-align:left;padding-left:0;color:var(--ink);font-weight:500;font-size:var(--fs-15)}
.cmp tr:last-child th,.cmp tr:last-child td{border-bottom:0}
.cmp .us{background:var(--raised);box-shadow:-1px 0 0 var(--line),1px 0 0 var(--line)}
.cmp thead .us{border-radius:18px 18px 0 0;box-shadow:-1px 0 0 var(--line),1px 0 0 var(--line),0 -1px 0 var(--line)}
.cmp tbody tr:last-child .us{border-radius:0 0 18px 18px;box-shadow:-1px 0 0 var(--line),1px 0 0 var(--line),0 1px 0 var(--line),0 24px 40px -24px color-mix(in srgb,var(--ink-fixed) 18%,transparent)}
.y,.no{display:inline-block;width:22px;height:22px;border-radius:50%;vertical-align:middle;background-position:center;background-repeat:no-repeat}
.y{background-color:var(--ink);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23fff' stroke-width='1.8'%3E%3Cpath d='M2.5 6.2 5 8.6 9.6 3.6'/%3E%3C/svg%3E")}
.us .y{background-color:var(--lime);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23121417' stroke-width='1.8'%3E%3Cpath d='M2.5 6.2 5 8.6 9.6 3.6'/%3E%3C/svg%3E")}
.no{box-shadow:inset 0 0 0 1.25px var(--line-2);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none' stroke='%238A8F95' stroke-width='1.5'%3E%3Cpath d='M2.5 2.5l5 5M7.5 2.5l-5 5'/%3E%3C/svg%3E")}
/* ===== FAQ (native details/summary) ===== */
.qa{border-bottom:1px solid var(--line)}
.qa:first-child{border-top:1px solid var(--line)}
.qa summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 0;cursor:pointer;font:500 var(--fs-18)/1.35 var(--sans);letter-spacing:-.01em}
.qa summary::-webkit-details-marker{display:none}
.qa summary i{flex:none;position:relative;width:36px;height:36px;border-radius:var(--r-md);background:var(--raised);box-shadow:var(--soft),var(--hair);transition:background var(--t-fast)}
.qa summary i::before,.qa summary i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;margin:-.75px 0 0 -6px;background:var(--ink);transition:transform .25s}
.qa summary i::after{transform:rotate(90deg)}
.qa[open] summary i{background:var(--lime)}
.qa[open] summary i::after{transform:rotate(0)}
.qa p{margin:0;padding:0 72px 24px 0;color:var(--muted);font-size:var(--fs-16)}
/* ===== Lists ===== */
.pts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.pts li{position:relative;padding-left:22px;font-size:var(--fs-15);line-height:1.45}
.pts li::before{content:"";position:absolute;left:1px;top:.5em;width:6px;height:6px;border-right:1.25px solid var(--faint);border-bottom:1.25px solid var(--faint);transform:rotate(-45deg)}
.pts.need li::before{left:0;top:.42em;width:8px;height:8px;border:0;transform:none;border-radius:2px;background:var(--lime);box-shadow:0 0 0 1px color-mix(in srgb,var(--ink-fixed) 18%,transparent)}
.lane{display:flex;align-items:center;justify-content:space-between;height:50px;padding:0 8px 0 16px;border-radius:13px;background:var(--sunken);box-shadow:inset 0 0 0 1px var(--line);font-size:var(--fs-14-5);font-weight:500;transition:background var(--t-fast)}
.lane:hover{background:var(--raised)}
.lane .sq{width:32px;height:32px;border-radius:8px}
/* ===== Tool marquee: comprehensive list (about 40 tools), slow, pauses on hover ===== */
.mq{overflow:hidden;display:flex;flex-direction:column;gap:20px;-webkit-mask-image:linear-gradient(90deg,transparent,var(--graphite-0) 9%,var(--graphite-0) 91%,transparent);mask-image:linear-gradient(90deg,transparent,var(--graphite-0) 9%,var(--graphite-0) 91%,transparent)}
.mq-row{list-style:none;margin:0;padding:0;display:flex;gap:46px;width:max-content;animation:gh-mq 90s linear infinite}
.mq-row.rev{animation-direction:reverse;animation-duration:110s}
.mq:hover .mq-row{animation-play-state:paused}
.mq-row li{font-size:var(--fs-17);font-weight:600;letter-spacing:-.02em;color:var(--d-label);white-space:nowrap}
@keyframes gh-mq{to{transform:translateX(-50%)}}
/* ===== Motion ===== */
.rv{opacity:0;transform:translateY(var(--rise));transition:opacity var(--t-reveal) var(--ease),transform var(--t-reveal) var(--ease)}
.rv.in{opacity:1;transform:none}
@keyframes gh-swap{from{opacity:0;transform:translateY(6px)}}
.fade-swap{animation:gh-swap .4s ease}
@keyframes gh-pulse{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--lime) 0%,transparent)}}
.pulse{animation:gh-pulse 1.6s ease-in-out infinite}
/* ---------- closing call to action (drafts/partials/cta.html; the homepage close, shared) ---------- */
.cta-close{display:flex;flex-direction:column;align-items:center;max-width:var(--container);margin:0 auto;padding:var(--section) var(--gut) 0;text-align:center}
.cta-close .cta-pic{width:56px;height:56px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 3px var(--raised),var(--soft)}
.cta-close .cta-pic img{display:block;width:100%;height:100%;object-fit:cover}
section.cta-close h2{margin-top:28px;font:var(--fw-light) var(--fs-h2)/1.1 var(--sans);letter-spacing:-.03em;color:var(--tone)}
section.cta-close h2 b{font-weight:var(--fw-light);color:var(--ink)}
section.cta-close p{margin-top:14px;font-size:var(--fs-15-5);color:var(--muted)}
.cta-form{display:flex;align-items:center;gap:4px;width:100%;max-width:540px;margin-top:32px;padding:5px;border-radius:15px;background:var(--raised);box-shadow:var(--soft),0 0 0 6px color-mix(in srgb,var(--line-2) 25%,transparent)}
.cta-form input{flex:1;min-width:0;height:48px;border:0;border-radius:10px;background:transparent;padding:0 16px;font:400 var(--fs-15)/1 var(--sans);color:var(--ink)}
.cta-form input + input{border-left:1px solid var(--line);border-radius:0}
.cta-form input::placeholder{color:var(--ink);opacity:.85}
.cta-form input:focus{outline:none;background:var(--bg)}
.cta-form button{flex:none;display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 22px;border:0;border-radius:12px;background:var(--lime);color:var(--on-lime);font:var(--fw-key) var(--fs-15)/1 var(--sans);cursor:pointer;transition:filter var(--t-ui)}
.cta-form button:hover{filter:brightness(1.05)}
.cta-form button svg{width:14px;height:14px;fill:none;stroke:currentColor}
@media (max-width:760px){.cta-form{flex-wrap:wrap}.cta-form input{flex:1 1 100%;border-left:0!important;border-bottom:1px solid var(--line)}.cta-form button{width:100%;justify-content:center}}