/* Webgentic homepage V5: section layer on top of style.css (the V4 base).
   Hero tabs, the black job-run band from concept one, pains with imagery and fixes, product rows
   with live visuals, how-it-works fragments, a call to action in every section. */

/* ---------- hero ---------- */
.hero{padding-bottom:clamp(56px,7vh,92px)}
.hero-grid{grid-template-columns:minmax(0,.54fr) minmax(0,1fr);gap:clamp(32px,3.2vw,48px);align-items:center}
.hero-copy h1{font-size:clamp(2.4rem,3.9vw,3.6rem);line-height:1.02;letter-spacing:-.04em;max-width:none;text-wrap:balance}
/* The headline breaks only between its three phrases: "Deliver like" / "an agency" / "5X your size." */
.hero-copy h1 .nw{white-space:nowrap}
.h-5x{font-weight:900;letter-spacing:-.02em}
.hero-sub{margin-top:22px;font-size:clamp(1rem,1.15vw,1.1rem);max-width:46ch}
.hero-ctas{margin-top:28px}
.hero-vis{min-width:0}
/* Hero product switch (30 Oct, round 3): a compact two-button pill centred over the demo, one track
   like the /pricing switch. Webgentic for single sites leads and is selected on load; the Orchestrator
   is the second choice. The selected side is filled ink, the other stays transparent in the track. */
.hv-tabs{display:flex;width:max-content;max-width:100%;gap:4px;margin:0 auto 22px;padding:4px;border:1px solid rgba(17,18,20,.14);border-radius:999px;background:rgba(255,255,255,.72)}
.hv-tab{display:inline-flex;align-items:center;justify-content:center;column-gap:.3em;min-height:44px;padding:0 18px;border:0;border-radius:999px;background:transparent;color:var(--muted);font:500 .92rem/1.2 var(--font-body);white-space:nowrap;cursor:pointer;transition:background-color .18s,color .18s}
.hv-tab strong{font-weight:600;color:var(--ink)}
.hv-tab span{color:var(--muted)}
.hv-tab:hover{background:rgba(17,18,20,.06)}
.hv-tab[aria-selected="true"],.hv-tab[aria-selected="true"]:hover{background:#0B0C10}
.hv-tab[aria-selected="true"] strong{color:#fff}
.hv-tab[aria-selected="true"] span{color:rgba(255,255,255,.74)}
.hv-tab:focus-visible{outline:3px solid #1A5F7A;outline-offset:3px}
/* On one line the pill is 428px wide; below 520px each choice stacks its name over its audience. */
@media (max-width:520px){
  .hv-tabs{border-radius:18px}
  .hv-tab{flex-direction:column;row-gap:2px;min-height:52px;padding:6px 16px;border-radius:14px;font-size:.88rem;line-height:1.15}
}
/* Both panels share one grid cell, so the hero keeps the height of the taller one and the
   headline does not jump when the visitor switches. The hidden panel keeps its hidden
   attribute (the demos pause on it) but stays in the layout, invisible. */
.hv-stage{display:grid}
.hv-stage>.hv-panel{grid-area:1/1;min-width:0}
.hv-panel{min-height:var(--hv-h,510px)}
.hv-panel:not([hidden]){display:flex;flex-direction:column;justify-content:center}
.hv-panel:focus-visible{outline-offset:6px}
.hv-stage>.hv-panel[hidden]{display:flex;flex-direction:column;justify-content:center;visibility:hidden;pointer-events:none}
@media (prefers-reduced-motion:reduce){.hv-tab{transition:none}}
.hero .wgd{max-width:100%}
/* The browser demo sits inside the column rather than filling it (George, 30 Oct). It sizes itself
   from .wgd's width (container units), so narrowing .wgd scales the whole window down evenly. */
@media (min-width:641px){.hero .hv-panel-site .wgd{width:86%;max-width:660px}}
/* Hero copy per product: both versions share one grid cell, the hidden one keeps its space. */
.hx{display:grid}
.hx>.hxv{grid-area:1/1;min-width:0;transition:opacity .3s ease}
.hero[data-hv="orc"] .hxv[data-hv="site"],.hero:not([data-hv="orc"]) .hxv[data-hv="orc"]{visibility:hidden;opacity:0}
/* Typed headline: "AI Web Developer" and "for <word>" are separate lines, so deleting and retyping the
   platform name never pulls "for" up a line or slides it along (George, 30 Oct). */
.hx-l{display:block}
.hx-for{white-space:nowrap}
.hero-ctas.hxv{margin-top:0}
.hero-copy div.hx{margin-top:28px}
.hx-type::after{content:"";display:inline-block;width:.07em;height:.82em;margin-left:.05em;vertical-align:-.04em;background:currentColor;animation:hx-blink 1s steps(1) infinite}
@keyframes hx-blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.hx>.hxv{transition:none}.hx-type::after{animation:none;opacity:0}}

/* ---------- black platform strip + job run (concept one) ---------- */
.strip-dark{background:var(--black);border-bottom:1px solid rgba(255,255,255,.08);padding:28px 0}
.strip-dark .strip-inner{display:flex;align-items:center;gap:clamp(24px,4vw,56px)}
.strip-lab{flex:none;max-width:9.5em;font-size:.92rem;line-height:1.35;color:rgba(255,255,255,.56)}
.strip-dark .strip-logos{flex:1}
.strip-dark .strip-logos img{filter:grayscale(1) brightness(0) invert(1);opacity:.52}
.strip-dark .strip-logos .txt{color:rgba(255,255,255,.56)}

.run-sec{position:relative;isolation:isolate;overflow:hidden;background:var(--black)}
.run-fx{position:absolute;inset:0;z-index:-1;pointer-events:none}
.run-glow{position:absolute;left:50%;top:60%;width:min(1400px,130%);height:72%;transform:translate(-50%,-50%);background:radial-gradient(50% 50% at 50% 50%,rgba(160,225,247,.42) 0%,rgba(91,184,218,.16) 42%,rgba(46,156,196,0) 72%);filter:blur(36px)}
.run-grain{position:absolute;inset:0;background-image:var(--speck);background-size:240px;opacity:.1}
.run-sec .lede{color:rgba(255,255,255,.72)}
.run-sec .run-chip{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.16)}
.run-sec .run-chip strong{color:#fff}
.run-sec .rc-task{color:rgba(255,255,255,.62)}
.run-sec .run-chip:hover{border-color:rgba(255,255,255,.45)}
.run-sec .run-chip[aria-pressed="true"]{background:rgba(160,225,247,.12);border-color:var(--blue);box-shadow:0 0 0 1px var(--blue),0 0 28px -6px rgba(160,225,247,.6)}
.run-sec .ui{border-color:rgba(255,255,255,.1);box-shadow:0 0 0 1px rgba(255,255,255,.06),0 50px 120px -40px rgba(160,225,247,.32),0 30px 60px -30px rgba(0,0,0,.8)}
.run-sec .run-note{margin:0;max-width:44ch;color:rgba(255,255,255,.62)}
.btn-ghost-dark{border-color:rgba(255,255,255,.42)}

/* ---------- a call to action in every section ---------- */
.sec-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:18px 32px;margin-top:clamp(36px,4.5vw,60px);padding-top:28px;border-top:1px solid var(--line-2)}
.sec-cta-dark{border-top-color:rgba(255,255,255,.14)}
.sec-cta-btns{display:flex;flex-wrap:wrap;gap:10px}
.sec-cta .strip-line,.sec-cta .closer,.sec-cta .foot{margin:0}
.sec-cta .closer{max-width:30ch}
.dark .sec-cta .foot{color:rgba(255,255,255,.62)}

/* ---------- pains: light, imagery, the fix under each pain ---------- */
.pains-sec{position:relative;isolation:isolate;overflow:hidden;background:#fff}
.pains-fx{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.pb{position:absolute;border-radius:50%;filter:blur(70px);aspect-ratio:1}
.pb1{width:min(48vw,640px);right:-12%;top:-18%;background:radial-gradient(circle,rgba(231,184,232,.75),rgba(231,184,232,0) 68%)}
.pb2{width:min(44vw,600px);left:-14%;bottom:-24%;background:radial-gradient(circle,rgba(160,225,247,.8),rgba(160,225,247,0) 68%)}
.pains-grain{position:absolute;inset:0;background-image:var(--grain);background-size:200px;mix-blend-mode:multiply;opacity:.12}
.pains{gap:18px}
.pain{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;min-height:340px;padding:118px 28px 24px;background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:22px;transition:border-color .25s,box-shadow .25s,transform .35s cubic-bezier(.2,.7,.2,1)}
.pain-art{position:absolute;z-index:-1;right:-46px;top:-54px;width:220px;height:220px;max-width:none;object-fit:contain;opacity:.92;pointer-events:none;transition:opacity .4s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.pain h3{font-size:1.3rem;max-width:17ch}
.pain>p:not(.fix){margin:10px 0 22px;color:var(--muted);line-height:1.55}
.fix{display:flex;gap:10px;align-items:flex-start;margin-top:auto;padding-top:16px;border-top:1px solid var(--line);font-size:.95rem;line-height:1.45;color:var(--ink)}
.fix .ic{margin-top:3px;color:var(--blue-ink);stroke-width:2.2}
.fix b{font-weight:600}
.pain:hover{border-color:rgba(17,18,20,.22);box-shadow:0 26px 60px -32px rgba(17,18,20,.35)}
.pa-flip{transform:scaleX(-1) rotate(12deg)}
.pain:hover .pain-art{opacity:1;transform:scale(1.08) rotate(-4deg)}
.pain:hover .pa-flip{transform:scaleX(-1) scale(1.08) rotate(8deg)}
.closer-row .closer{font-size:clamp(1.4rem,2.4vw,2rem)}

/* ---------- two products: rows with live visuals ---------- */
#products .two{grid-template-columns:minmax(0,1fr);gap:20px}
.prod{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(24px,4vw,64px)}
.prod-copy{position:relative;z-index:1;display:flex;flex-direction:column;gap:20px;min-width:0}
.prod .btn{margin-top:4px}
.prod-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.prod-btns .btn{margin-top:0}
.prod-vis{position:relative;min-width:0;min-height:400px;display:flex;align-items:center;justify-content:center}
.prod-main{background:radial-gradient(70% 70% at 100% 30%,rgba(160,225,247,.22),rgba(160,225,247,0) 70%),var(--black)}
.prod-art{position:absolute;left:50%;top:50%;width:min(560px,118%);max-width:none;height:auto;transform:translate(-50%,-50%);opacity:.92;-webkit-mask-image:radial-gradient(closest-side,#000 55%,transparent 100%);mask-image:radial-gradient(closest-side,#000 55%,transparent 100%)}
.stack{position:relative;display:flex;flex-direction:column;gap:12px;width:min(330px,100%)}
.stk{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:12px;background:rgba(14,18,30,.74);border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font-size:13px;line-height:1.3;color:#fff;box-shadow:0 20px 40px -24px rgba(0,0,0,.9)}
.stk b{font-weight:600}
.stk span{font-size:12px;color:rgba(255,255,255,.66)}
.stk .ok{color:#9FE1D8}
.stk-a{background:var(--blue);border-color:transparent;color:#0A0D14}
.stk-a span{color:rgba(10,13,20,.72)}
.stk-c{margin-left:30px}
.stk-p{margin-left:60px}
.prod-side{background:#fff;border:1px solid var(--line)}
.prod-vis-site{align-self:stretch;padding:clamp(20px,3vw,36px);border-radius:20px;overflow:hidden;isolation:isolate;background:linear-gradient(135deg,#D7E1F3 0%,#CDE5E1 100%)}
.prod-vis-site::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(40% 50% at 85% 15%,rgba(231,184,232,.8),transparent 70%),radial-gradient(40% 50% at 10% 90%,rgba(249,213,138,.6),transparent 70%)}
.prod-vis-site::after{content:"";position:absolute;inset:0;z-index:-1;background-image:var(--grain);background-size:200px;mix-blend-mode:multiply;opacity:.22}
.prod-vis-site .wgd{width:100%}
/* The phone in the sites card is drawn at 8px a unit (was up to 11px), so the card is no taller than
   it needs to be and the copy beside it does not float in white space (George, 30 Oct). */
.prod-vis-site .wgd .hero-demo{font-size:min(8px,calc(100cqw / 27.4))}

/* ---------- how it works: six cards with a fragment of the real thing ---------- */
.how{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.hw{display:flex;flex-direction:column;padding:12px 12px 26px;background:#fff;border:1px solid var(--line);border-radius:22px}
.hw h3{display:flex;align-items:center;gap:10px;padding:0 12px;font-size:1.2rem}
.hw>p{margin-top:8px;padding:0 12px;color:var(--muted);line-height:1.55}
.hw-n{display:inline-grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;background:var(--blue);color:#0A0D14;font:600 12px/1 var(--font-body);letter-spacing:0}
.hw-frag{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;justify-content:center;gap:6px;height:164px;margin-bottom:22px;padding:18px 20px;border-radius:16px;background:var(--canvas);font-size:12.5px;line-height:1.45;color:var(--body)}
.hw-frag::after{content:"";position:absolute;inset:0;z-index:-1;background-image:var(--grain);background-size:200px;mix-blend-mode:multiply;opacity:.07}
.hw-frag .ic{width:14px;height:14px}
.fr-brief{align-items:flex-end}
.fb-bubble{max-width:88%;padding:10px 13px;background:#ECEAE4;border-radius:13px 13px 3px 13px;color:var(--ink);font-size:13px}
.fb-att{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:11.5px}
.fb-att .ic:last-child{margin-left:8px}
.fr-plan{gap:2px;background:#EEF6EF;box-shadow:inset 0 0 0 1px #CFE3D2}
.fr-plan b{font:600 11.5px/1.4 var(--mono);color:var(--ink)}
.fp-r{margin-top:6px}
.fr-approve{align-items:center;text-align:center}
.fa-btn{display:inline-flex;align-items:center;min-height:36px;padding:0 16px;border-radius:9px;background:#0B0C10;color:#fff;font:600 13px/1 var(--font-body)}
.fa-cur{position:absolute;left:calc(50% + 28px);top:calc(50% - 14px);width:20px;height:20px;fill:#fff;stroke:#0B0C10;stroke-width:1.4;stroke-linejoin:round}
.fr-approve p{margin-top:10px;color:var(--muted);font-size:11.5px}
.fr-work{gap:10px}
.fr-work p{display:grid;grid-template-columns:minmax(0,1fr) 72px;align-items:center;gap:12px}
.fr-work span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fr-work i{position:relative;height:4px;border-radius:2px;background:rgba(46,156,196,.16);overflow:hidden}
.fr-work i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--w);border-radius:2px;background:var(--blue-mid)}
.fr-proof{flex-direction:row;align-items:center;gap:14px}
.fr-proof img{flex:none;width:112px;height:72px;object-fit:cover;object-position:top left;border-radius:8px;border:1px solid #E0DDD5}
.fr-proof p{display:flex;flex-direction:column;gap:2px;font-weight:600;color:var(--ink)}
.fr-proof p .ic{color:#0E7C66;stroke-width:2.4}
.fr-proof p span{font-weight:400;font-size:11.5px;color:var(--muted)}
.fr-learn{background:var(--black);color:rgba(255,255,255,.86)}
.fr-learn::before{content:"";position:absolute;inset:auto -20% -60% -20%;height:120%;z-index:-1;background:radial-gradient(40% 50% at 30% 100%,rgba(160,225,247,.55),transparent 70%),radial-gradient(40% 50% at 70% 100%,rgba(231,184,232,.5),transparent 70%);filter:blur(10px)}
.fr-learn::after{mix-blend-mode:overlay;opacity:.3}
.fl-l{display:flex;align-items:center;gap:6px;font-weight:600;color:#fff}
.fl-l .ic{color:#F9D58A;fill:#F9D58A;stroke:none}
.fl-s{font-size:11.5px;color:rgba(255,255,255,.6)}

/* ---------- getting started ---------- */
.steps4 li{position:relative}
.s4-ic{display:grid;place-items:center;width:44px;height:44px;margin-bottom:18px;border-radius:12px;background:var(--canvas);color:var(--blue-ink)}
#start .steps4{position:relative;isolation:isolate;padding:12px;border-radius:28px;overflow:hidden;background:linear-gradient(135deg,#D7E1F3 0%,#CDE5E1 100%)}
#start .steps4::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(36% 70% at 92% 10%,rgba(231,184,232,.85),transparent 70%),radial-gradient(30% 70% at 8% 100%,rgba(249,213,138,.7),transparent 70%),radial-gradient(30% 60% at 50% 0%,rgba(160,225,247,.8),transparent 70%)}
#start .steps4::after{content:"";position:absolute;inset:0;z-index:-1;background-image:var(--grain);background-size:200px;mix-blend-mode:multiply;opacity:.24}
#start .steps4 li{background:rgba(255,255,255,.86);border-color:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
#start .price-line{border-top:0;padding-top:0;justify-content:flex-start}
.s4-ic .ic{width:21px;height:21px;stroke-width:1.6}

/* ---------- numbers ---------- */
.nums-sec{position:relative;isolation:isolate;overflow:hidden}
.nums-fx{position:absolute;inset:0;z-index:-1;pointer-events:none}
.nums-fx img{position:absolute;right:-6%;top:-6%;width:min(760px,60%);max-width:none;opacity:.5;-webkit-mask-image:radial-gradient(closest-side,#000 40%,transparent 100%);mask-image:radial-gradient(closest-side,#000 40%,transparent 100%)}

/* ---------- services: grainy gradient surfaces ---------- */
.sv{position:relative;overflow:hidden;isolation:isolate;transition:box-shadow .25s,border-color .25s}
.sv-fx{position:absolute;left:0;right:0;top:0;height:132px;z-index:-1;-webkit-mask-image:linear-gradient(180deg,#000 20%,transparent 100%);mask-image:linear-gradient(180deg,#000 20%,transparent 100%);transition:height .4s cubic-bezier(.2,.7,.2,1)}
.sv-fx::after{content:"";position:absolute;inset:0;background-image:var(--grain);background-size:200px;mix-blend-mode:multiply;opacity:.35}
.sv1 .sv-fx{background:radial-gradient(80% 120% at 0% 0%,#A0E1F7,transparent 70%),radial-gradient(80% 120% at 100% 0%,#E7B8E8,transparent 70%)}
.sv2 .sv-fx{background:radial-gradient(80% 120% at 0% 0%,#E7B8E8,transparent 70%),radial-gradient(80% 120% at 100% 0%,#F9D58A,transparent 70%)}
.sv3 .sv-fx{background:radial-gradient(80% 120% at 0% 0%,#C9EEFB,transparent 70%),radial-gradient(80% 120% at 100% 0%,#A0E1F7,transparent 70%)}
.sv4 .sv-fx{background:radial-gradient(80% 120% at 0% 0%,#9FE1D8,transparent 70%),radial-gradient(80% 120% at 100% 0%,#C9EEFB,transparent 70%)}
.sv5 .sv-fx{background:radial-gradient(80% 120% at 0% 0%,#F9D58A,transparent 70%),radial-gradient(80% 120% at 100% 0%,#E7B8E8,transparent 70%)}
.sv6 .sv-fx{background:radial-gradient(80% 120% at 0% 0%,#A0E1F7,transparent 70%),radial-gradient(80% 120% at 100% 0%,#9FE1D8,transparent 70%)}
.svc .ico{background:#fff;color:var(--blue-ink);box-shadow:0 1px 2px rgba(17,18,20,.06),0 8px 20px -12px rgba(17,18,20,.3)}
.svc .ico .ic{stroke-width:1.9}
.svc li{padding-top:30px}
.svc h3{margin-top:4px}
.sv:hover{border-color:rgba(17,18,20,.2);box-shadow:0 26px 60px -34px rgba(17,18,20,.35)}
.sv:hover .sv-fx{height:100%}

/* ---------- overnight band ---------- */
.inherit-copy .btn{margin-top:22px}

/* ---------- real jobs: one lead story, three more ---------- */
.jobs{grid-template-columns:repeat(3,minmax(0,1fr))}
.jobs .job{display:flex;flex-direction:column}
.jobs .job>p:not(.job-meta){margin-bottom:18px}
.job-meta{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);font-size:.86rem;line-height:1.4;font-weight:500;color:var(--blue-ink)}
.jobs .job:not(.job-lead){background:#fff;border-color:var(--line-2);box-shadow:0 1px 2px rgba(17,18,20,.04),0 18px 40px -30px rgba(17,18,20,.35)}
.jobs .job-lead{grid-column:1/-1;position:relative;overflow:hidden;isolation:isolate;min-height:320px;justify-content:center;padding:clamp(28px,4vw,52px);background:var(--black);border-color:transparent}
.job-art{position:absolute;z-index:-1;right:-4%;top:50%;width:min(560px,52%);max-width:none;height:auto;transform:translateY(-50%);opacity:.9;-webkit-mask-image:radial-gradient(closest-side,#000 50%,transparent 100%);mask-image:radial-gradient(closest-side,#000 50%,transparent 100%)}
.job-in{display:flex;flex-direction:column;max-width:60ch}
.job-q{width:34px;height:34px;margin-bottom:14px;color:var(--blue)}
.jobs .job-lead h3{font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1.15;font-weight:500;letter-spacing:-.03em;color:#fff}
.jobs .job-lead p{color:rgba(255,255,255,.74)}
.jobs .job-lead .job-meta{margin-top:0;color:rgba(255,255,255,.6);border-top-color:rgba(255,255,255,.14)}

/* ---------- safety, workspaces, FAQ ---------- */
.safety .lede,.faq .lede{max-width:34ch}
.safety-cta{margin-top:26px}
.faq-btns,.ws-btns{margin-top:26px}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:no-preference){
  .js .hw.rv .fr-work i::after{transform:scaleX(0);transform-origin:left;transition:transform 1.4s cubic-bezier(.2,.7,.2,1) .5s}
  .js .hw.rv-in .fr-work i::after{transform:none}
  .fa-btn{animation:ring 1.8s ease-out infinite}
  .fl-l .ic{animation:twinkle 2.4s ease-in-out infinite}
}
@keyframes twinkle{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.25) rotate(20deg)}}

/* ---------- responsive ---------- */
@media (max-width:1200px){
  .hero-grid{grid-template-columns:minmax(0,1fr)}
  .hero-copy h1{max-width:16ch}
  .hero-vis{max-width:860px;--hv-h:560px}
}
@media (max-width:980px){
  .prod{grid-template-columns:minmax(0,1fr)}
  .prod-vis{min-height:340px}
  .prod-main .prod-vis{order:-1}
  .how{grid-template-columns:repeat(2,minmax(0,1fr))}
  .jobs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .jobs .job-lead .job-art{opacity:.4;width:80%;right:-20%}
}
@media (max-width:760px){
  .strip-dark .strip-inner{flex-direction:column;align-items:flex-start;gap:14px}
  .strip-lab{max-width:none}
}
@media (max-width:640px){
  .how,.jobs{grid-template-columns:minmax(0,1fr)}
  .sec-cta{flex-direction:column;align-items:stretch}
  .sec-cta-btns{flex-direction:column}
  .sec-cta-btns .btn{width:100%}
  .pain{min-height:0;padding-top:104px}
  .pain-art{width:180px;height:180px;right:-36px;top:-46px}
  .hero-vis{--hv-h:370px}
  .prod-vis{min-height:300px}
  .stk-c{margin-left:18px}
  .stk-p{margin-left:36px}
  .safety-cta,.faq-btns .btn,.ws-btns .btn,.prod-btns .btn,.prod .btn{width:100%}
}
.hero .orc{--orc-muted:#4F5460}

/* Brief picker: platform mark + platform name (V6). Marks are cropped from the logo files. */
.run-chip strong{display:inline-flex;align-items:center;gap:8px}
.run-logo{display:inline-block;flex:none;height:18px;background-repeat:no-repeat;background-position:left center;background-size:auto 100%}
.run-logo--magento{width:13px;background-image:url(../logos/magento.svg)}
.run-logo--wordpress{width:18px;height:18px;background-image:url(../logos/wordpress.png);background-size:105.9px 36px;background-position:-8.95px -8.95px;filter:brightness(0) invert(1)}
.run-logo--woo{width:34px;height:10px;background-image:url(../logos/woocommerce.png);background-size:100% 100%}

/* FAQ (V6): every answer open in a grid of cards instead of an accordion. The answers are one or
   two sentences, so showing them all costs no clicks. The last card asks for anything else. */
.faq-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 32px;margin-bottom:clamp(28px,4vw,44px)}
.faq-head h2{max-width:18ch}
.faq-head .faq-btns{margin-top:0}
.fq-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none}
.fq{display:flex;flex-direction:column;gap:10px;padding:24px 24px 26px;background:#fff;border:1px solid var(--line);border-radius:18px}
.fq h3{font:600 1.08rem/1.3 var(--font-head);letter-spacing:-.015em;color:var(--ink)}
.fq p{color:var(--muted);line-height:1.55;font-size:.95rem}
.fq:first-child{grid-column:span 2;background:#0B0C10;border-color:#0B0C10}
.fq:first-child h3{color:#fff;font-size:clamp(1.3rem,2vw,1.6rem);font-weight:500;letter-spacing:-.03em}
.fq:first-child p{color:rgba(255,255,255,.72);font-size:1.02rem;max-width:46ch}
.fq-ask{position:relative;isolation:isolate;overflow:hidden;border-color:transparent;background:linear-gradient(135deg,#D7E1F3 0%,#CDE5E1 100%)}
.fq-ask::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 70% at 90% 10%,rgba(231,184,232,.85),transparent 70%),radial-gradient(50% 60% at 0% 100%,rgba(249,213,138,.7),transparent 70%)}
.fq-ask::after{content:"";position:absolute;inset:0;z-index:-1;background-image:var(--grain);background-size:200px;mix-blend-mode:multiply;opacity:.25}
.fq-ask p{color:var(--ink-2,#3A3D44)}
.fq-ask .btn{align-self:flex-start;margin-top:auto}
@media (max-width:1100px){.fq-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.fq-grid{grid-template-columns:minmax(0,1fr)}.fq:first-child{grid-column:auto}.faq-head .btn{width:100%}}
.fq-ask{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 28px;padding:26px 28px}
.fq-ask h3{font-size:1.2rem}
.fq-ask p{flex:1 1 320px}
.fq-ask .btn{margin-top:0;margin-left:auto}
@media (max-width:640px){.fq-ask{flex-direction:column;align-items:flex-start}.fq-ask .btn{margin-left:0;width:100%}}