/* ==========================================================================
   HelpGent — "Home A" template styles (loaded after common.css)
   Section order: hero · how it works · solutions showcase · HelpGent AI ·
   templates · why conversations · social proof · FAQ · newsletter card.
   ========================================================================== */

/* ── layout ─────────────────────────────────────────────────────────────── */
.sec--dark{background:var(--dark);color:#fff}
.sec--dark h2,.sec--dark h3{color:#fff}
.sec--dark .intro .lead,.sec--dark .lead{color:rgba(255,255,255,.66)}
.sec--dark 
/* handwritten annotation + curved arrow */
.hand{font-family:var(--hand);font-size:24px;font-weight:600;line-height:1.1;transform:rotate(-2deg);white-space:pre-line}

/* ── hero (dark, centred, mockup + logos inside the band) ───────────────── */
/* stage sits ABOVE the .hero::after gradient veil (z-index:1) so the video row
   and its caption chips are never dimmed by it — was the desktop wash-out bug */
.hero__stage{z-index:2}
.hero__stage{position:relative;margin-top:64px}
/* three looping videos, plain row, no tilt, at the bottom of the hero */
.hero__videos{  position:relative;z-index:2;display:flex;justify-content:center;align-items:stretch;
  gap:22px;max-width:calc(1120px + var(--gutter) * 2);margin:56px auto 0;padding-inline:var(--gutter)}  /* sits outside .wrap, so it carries its own gutter */
.hero__vidwrap{position:relative;flex:1 1 0;min-width:0;margin:0}
.hero__vid{  width:100%;aspect-ratio:3/2;object-fit:cover;display:block;
  border-radius:16px;border:1px solid rgba(255,255,255,.16);
  box-shadow:0 24px 60px rgba(0,0,0,.5);background:var(--dark-2);}
/* legibility scrim so the caption reads over any frame of the video */
.hero__vidwrap::after{  content:"";position:absolute;left:0;right:0;bottom:0;height:58%;
  border-radius:0 0 16px 16px;pointer-events:none;z-index:1;
  background:linear-gradient(to top,rgba(8,3,20,.82) 0%,rgba(8,3,20,.5) 34%,rgba(8,3,20,0) 100%);}
/* caption chip — near-solid dark so white text stays readable over ANY video frame
   (WCAG-safe: solid dark fill, not glass transparency). Motion tells the story. */
.vcap{  position:absolute;left:14px;bottom:14px;z-index:2;
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 16px;
  font-family:var(--font);font-size:14px;font-weight:700;letter-spacing:.01em;line-height:1;
  color:#fff;
  /* fully opaque, brand-dark chip — contrast is guaranteed over any video frame */
  background:var(--dark-0);
  border:1px solid rgba(255,255,255,.28);border-radius:999px;
  box-shadow:0 12px 30px rgba(0,0,0,.6),0 2px 8px rgba(0,0,0,.45),
             inset 0 1px 0 rgba(255,255,255,.14);
  text-shadow:0 1px 3px rgba(0,0,0,.6);
  opacity:0;transform:translateY(10px);
  animation:vcapIn .6s cubic-bezier(.2,.8,.2,1) var(--vcap-delay,.2s) forwards;}
.vcap__t{white-space:nowrap}
@keyframes vcapIn{to{opacity:1;transform:translateY(0)}}
/* 1 · pulsing REC dot */
.vcap__rec{width:9px;height:9px;border-radius:50%;background:#ff4d4f;flex:none;
  animation:vcapRec 1.7s ease-out infinite}
@keyframes vcapRec{  0%{box-shadow:0 0 0 0 rgba(255,77,79,.55)}
  70%{box-shadow:0 0 0 8px rgba(255,77,79,0)}
  100%{box-shadow:0 0 0 0 rgba(255,77,79,0)}}
/* 2 · voice waveform bars */
.vcap__wave{display:inline-flex;align-items:center;gap:2.5px;height:14px;flex:none}
.vcap__wave i{width:2.5px;height:100%;border-radius:2px;background:var(--accent-tint);
  transform:scaleY(.35);transform-origin:center;animation:vcapWave 1s ease-in-out infinite}
.vcap__wave i:nth-child(1){animation-delay:0s}
.vcap__wave i:nth-child(2){animation-delay:.15s}
.vcap__wave i:nth-child(3){animation-delay:.3s}
.vcap__wave i:nth-child(4){animation-delay:.45s}
.vcap__wave i:nth-child(5){animation-delay:.6s}
@keyframes vcapWave{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
/* 3 · typing dots */
.vcap__dots{display:inline-flex;align-items:center;gap:3px;flex:none}
.vcap__dots i{width:5px;height:5px;border-radius:50%;background:#fff;opacity:.4;
  animation:vcapType 1.4s ease-in-out infinite}
.vcap__dots i:nth-child(2){animation-delay:.2s}
.vcap__dots i:nth-child(3){animation-delay:.4s}
@keyframes vcapType{0%,60%,100%{opacity:.4;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){
  .vcap{animation:none;opacity:1;transform:none}
  .vcap__rec,.vcap__wave i,.vcap__dots i{animation:none}
  .vcap__wave i{transform:scaleY(.7)}
  .vcap__dots i{opacity:.7}
}

/* ── how it works · one connected 3-step sequence on a light band (text-only) ── */
.how__eyebrow{line-height:1;color:var(--accent);display:inline-block;margin-bottom:2px}
/* the sequence: numerals on a shared baseline, a directional line threading through */
.how__grid{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:44px;
  max-width:900px;margin:30px auto 0}
.how__rule{position:absolute;left:2px;right:2px;top:60px;display:flex;align-items:center;gap:9px;color:var(--accent)}
.how__rule i{flex:1;height:2px;border-radius:2px;
  background:linear-gradient(90deg,rgb(var(--accent-rgb) / 0),rgb(var(--accent-rgb) / .9) 14%,rgb(var(--accent-rgb) / .9))}
.how__rule svg{width:16px;height:12px;flex:none}
.step{position:relative}
.step__num{font-family:var(--font);font-weight:600;font-size:58px;line-height:.9;
  letter-spacing:-2px;color:rgba(56,51,69,.15);display:block;margin-bottom:26px}
.step__v{color:var(--text);display:inline-block;margin:0}
.step__d{font-size:var(--fs-body-sm);line-height:1.5;color:var(--text-2);max-width:24ch;margin:7px 0 0}
.how__aside{display:block;text-align:right;max-width:900px;margin:22px auto 0;color:var(--accent)}
@media (max-width:820px){
  .how__grid{grid-template-columns:1fr;gap:0;max-width:430px;margin-top:22px}
  .how__rule{display:none}
  .step{padding:15px 0;border-bottom:1px solid var(--paper-line)}
  .step:last-child{border-bottom:0}
  .step__num{font-size:40px;margin-bottom:2px}
  .step__d{margin-top:4px;max-width:none}
  .how__aside{text-align:center;margin-top:16px}
}

/* ── SOLUTIONS SHOWCASE · dark. On desktop (≥1024px) the panel
   grows to fill the screen as it scrolls in, pins, and further scrolling walks the
   four solutions. JS sets --i (1 = inset card, 0 = full screen) and --s (0–1 step
   progress) on .sc; .is-pinned turns the tall scroll track on. */
.sc{--i:1;--s:0;padding-block:var(--pad)}
.showcase-shell{position:relative;isolation:isolate;overflow:hidden;min-height:650px;padding:52px 24px 50px;border-radius:38px;font-family:"General Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:#fff;background-color:var(--dark);background-image:radial-gradient(circle at 16% 38%,rgb(var(--accent-rgb) / .36) 0,transparent 42%),radial-gradient(circle at 78% 14%,rgb(var(--accent-hover-rgb) / .3) 0,transparent 44%),radial-gradient(circle at 96% 92%,rgb(var(--hue-4-rgb) / .2) 0,transparent 40%);transition:background-color .7s ease;animation:showcase-breathe 12s ease-in-out infinite alternate}
.showcase-shell:before{content:"";position:absolute;inset:-35%;z-index:-1;background:radial-gradient(circle at 45% 55%,#ffffff12,transparent 38%);animation:showcase-drift 18s linear infinite}
.showcase-shell:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.35;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E")}
.showcase-shell.theme-leads{background-image:radial-gradient(circle at 12% 80%,rgb(var(--hue-3-rgb) / .24),transparent 42%),radial-gradient(circle at 83% 18%,rgb(var(--accent-hover-rgb) / .35),transparent 46%),radial-gradient(circle at 60% 100%,rgb(var(--accent-rgb) / .2),transparent 43%)}
.showcase-shell.theme-feedback{background-image:radial-gradient(circle at 15% 20%,rgb(var(--accent-tint-rgb) / .28),transparent 40%),radial-gradient(circle at 88% 24%,rgb(var(--accent-rgb) / .25),transparent 42%),radial-gradient(circle at 77% 87%,rgb(var(--accent-hover-rgb) / .24),transparent 40%)}
.showcase-shell.theme-async{background-image:radial-gradient(circle at 12% 35%,rgb(var(--hue-4-rgb) / .25),transparent 40%),radial-gradient(circle at 83% 16%,rgb(var(--accent-rgb) / .25),transparent 42%),radial-gradient(circle at 75% 89%,rgb(var(--hue-4-tint-rgb) / .18),transparent 38%)}
/* solution switcher — one segmented control: icon + name, a pill slides to the pick
   and takes that solution's colour; a hairline along its base shows scroll progress */
.showcase-switcher{position:relative;z-index:2;display:flex;width:max-content;max-width:100%;margin:0 auto 24px;padding:5px;gap:2px;
  border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 12px 30px rgba(0,0,0,.25);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);overflow:hidden}
.sw-pill{--on:var(--accent);position:absolute;top:5px;left:0;height:calc(100% - 10px);border-radius:999px;background:var(--on);
  box-shadow:0 8px 22px color-mix(in srgb,var(--on) 45%,transparent);transition:transform .5s cubic-bezier(.2,.8,.2,1),width .5s cubic-bezier(.2,.8,.2,1),background .4s}
.theme-leads .sw-pill{--on:var(--hue-3)}
.theme-feedback .sw-pill{--on:var(--accent-tint)}
.theme-async .sw-pill{--on:var(--hue-4-tint)}
.showcase-switcher button{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 17px 0 13px;border:0;border-radius:999px;
  background:none;color:rgba(255,255,255,.62);font-family:inherit;font-size:14px;font-weight:600;white-space:nowrap;cursor:pointer;transition:color .3s}
.showcase-switcher button:hover{color:#fff}
.showcase-switcher button:focus-visible{outline:none;box-shadow:0 0 0 2px rgba(255,255,255,.7)}
.showcase-switcher button[aria-selected="true"]{color:#fff}
.theme-feedback .showcase-switcher button[aria-selected="true"],.theme-async .showcase-switcher button[aria-selected="true"]{color:var(--dark)}
.sw-ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sw-ic .t{fill:currentColor;fill-opacity:.2;stroke:none}
.sw-ic .d{fill:currentColor;stroke:none}
.showcase-progress{display:none}
.showcase-frame{position:relative;z-index:1;display:grid;grid-template-columns:30% 70%;align-items:center;width:min(100%,1360px);min-height:620px;margin:auto;padding:32px;border-radius:26px;background:linear-gradient(180deg,rgb(var(--dark-panel-rgb) / .95),rgb(var(--dark-panel-2-rgb) / .95));border:1px solid #ffffff17;box-shadow:0 40px 80px #0000005c,inset 0 1px 0 #ffffff14}
.showcase-frame.switching .showcase-copy>*{animation:showcase-copy-in .55s cubic-bezier(.2,.8,.2,1) both}
.showcase-frame.switching .showcase-copy h2{animation-delay:.04s}
.showcase-frame.switching .showcase-copy p{animation-delay:.08s}
.showcase-frame.switching .showcase-link{animation-delay:.12s}
.showcase-copy{padding:0 24px 0 0}
.showcase-copy h2{color:#fff;margin:0 0 16px}
.showcase-copy p{color:#b9aecb;font-size:var(--fs-body);line-height:1.45;margin:0 0 31px}
.showcase-link{display:inline-flex;gap:14px;align-items:center;border-bottom:1px solid #ffffff66;padding-bottom:8px;font-size:14px;font-weight:600;color:#fff;text-decoration:none;transition:gap .25s,color .25s,border-color .25s}
.showcase-link:hover{gap:24px;color:var(--accent-tint);border-color:var(--accent-tint)}
.showcase-visual{--scene:rgb(var(--accent-rgb) / .14);position:relative;width:100%;height:572px;border-radius:20px;background:var(--scene);border:1px solid #ffffff0f;overflow:hidden;transition:background .6s}
.theme-leads .showcase-visual{--scene:rgb(var(--hue-3-rgb) / .12)}
.theme-feedback .showcase-visual{--scene:rgb(var(--accent-tint-rgb) / .12)}
.theme-async .showcase-visual{--scene:rgb(var(--hue-4-tint-rgb) / .1)}
.showcase-scene,.showcase-custom-scene{position:absolute;inset:0;display:grid;place-items:center;opacity:0;pointer-events:none;transform:translateY(22px) scale(.96);transition:opacity .45s,transform .55s cubic-bezier(.2,.8,.2,1)}
.showcase-scene.active,.showcase-custom-scene.active{opacity:1;pointer-events:auto;transform:translateY(0) scale(1)}
.showcase-custom-scene{z-index:2}
.showcase-media__asset{display:block;width:100%;height:100%;object-fit:contain;border-radius:18px}
.showcase-form-scene{z-index:3;padding:10px;border-radius:20px;background:#f5f3ff}
.showcase-form-shell{width:100%;height:100%;min-width:0;overflow:hidden;border-radius:14px;background:#fff;box-shadow:0 16px 42px rgba(17,12,69,.18);pointer-events:none;user-select:none}
.showcase-form-scene.is-interactive .showcase-form-shell{overflow:auto;overscroll-behavior:contain;pointer-events:auto;user-select:auto}
.showcase-form-activator{position:absolute;inset:10px;z-index:4;display:grid;place-items:center;border:0;border-radius:14px;background:transparent;color:#fff;cursor:pointer;touch-action:pan-y}
.showcase-form-activator[hidden],.showcase-form-exit[hidden]{display:none}
.showcase-form-activator:focus-visible{outline:3px solid var(--accent);outline-offset:-5px}
.showcase-form-exit{position:absolute;top:20px;right:20px;z-index:5;padding:8px 11px;border:1px solid rgba(11,17,56,.16);border-radius:999px;background:rgba(255,255,255,.94);box-shadow:0 8px 22px rgba(11,17,56,.14);color:var(--dark);font:600 12px/1 "General Sans",sans-serif;cursor:pointer}
.showcase-form-exit kbd{margin-left:4px;padding:2px 5px;border:1px solid rgba(11,17,56,.16);border-radius:4px;background:#f2f0fa;font:inherit}
.showcase-form-exit:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.showcase-form-shell>.helpgent-app,.showcase-form-shell .helpgent-form{width:100%;min-height:100%}
.showcase-form-shell template{display:none}
/* live form visual — a HelpGent question step (same wording as the old #features demo);
   each solution lights a different answer mode + a floating "what happens next" chip */
.fv{position:relative;width:100%;height:100%;display:grid;place-items:center}
.fv__card{width:292px;border-radius:16px;background:#fff;color:var(--dark);overflow:hidden;transform:translateX(-46px) rotate(-1.5deg);
  box-shadow:0 30px 60px #00000066,0 0 0 1px #ffffff1a;animation:fv-float 7s ease-in-out infinite}
.fv__media{position:relative;height:138px;background:var(--dark-2)}
.fv__media img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block}
.fv__bar{position:absolute;left:12px;right:12px;bottom:10px;height:3px;border-radius:3px;background:#ffffff59;overflow:hidden}
.fv__bar i{position:absolute;inset:0;background:#fff;transform-origin:0 50%;animation:fv-play 9s linear infinite}
.fv__body{padding:14px 14px 10px}
.fv__q{margin:0 0 11px;font-size:14.5px;font-weight:600;letter-spacing:-.01em;color:var(--dark)}
.fv__opts{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.fv__opt{display:flex;align-items:center;gap:7px;padding:8px 10px;border:1px solid #e9e7ef;border-radius:9px;font-size:12.5px;font-weight:600;color:#383345;transition:border-color .3s,background .3s,color .3s}
.fv__opt svg{color:#9a94a6;flex:none}
.fv__opt.is-on{border-color:var(--hue);background:color-mix(in srgb,var(--hue) 12%,#fff);color:var(--dark);box-shadow:0 0 0 3px color-mix(in srgb,var(--hue) 22%,transparent)}
.fv__opt.is-on svg{color:var(--hue)}
.fv__foot{border-top:1px solid #f0eef4;padding:8px 14px;font-size:10.5px;color:#9a94a6;text-align:center}
.fv__foot b{color:#6b6577;font-weight:600}
.showcase-scene,.showcase-custom-scene{--hue:var(--accent)}
.showcase-scene[data-scene="leads"]{--hue:var(--hue-3)}
.showcase-scene[data-scene="feedback"]{--hue:var(--hue-5)}
.showcase-scene[data-scene="async"]{--hue:var(--hue-4)}
.fv__chip{position:absolute;right:26px;bottom:34px;display:flex;align-items:center;gap:11px;padding:10px 14px 10px 10px;border-radius:14px;
  background:rgb(var(--dark-rgb) / .92);border:1px solid #ffffff21;box-shadow:0 18px 40px #00000059;color:#fff;font-size:13px;font-weight:600;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;transform:translateY(14px);transition:opacity .5s .35s,transform .6s .35s cubic-bezier(.2,.8,.2,1)}
.showcase-scene.active .fv__chip{opacity:1;transform:none}
.fv__lbl{display:grid;gap:3px}
.fv__rec{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:500;color:#d8cfe8;font-variant-numeric:tabular-nums}
.fv__rec i{width:7px;height:7px;border-radius:50%;background:#ef4444;animation:fv-blink 1.2s ease-in-out infinite}
.fv__cam{position:relative;display:block;width:46px;height:46px;border-radius:10px;overflow:hidden;box-shadow:0 0 0 2px var(--hue)}
.fv__cam img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block}
.fv__cam--play svg{position:absolute;inset:0;margin:auto;color:#fff;filter:drop-shadow(0 1px 3px #0008)}
.fv__wave{display:flex;align-items:center;gap:3px;height:34px;padding:0 4px}
.fv__wave i{width:3px;height:30%;border-radius:3px;background:var(--hue);animation:fv-wave 1.1s ease-in-out infinite}
.fv__wave i:nth-child(2){animation-delay:-.9s}
.fv__wave i:nth-child(3){animation-delay:-.3s}
.fv__wave i:nth-child(4){animation-delay:-.7s}
.fv__wave i:nth-child(5){animation-delay:-.1s}
.fv__wave i:nth-child(6){animation-delay:-.5s}
.fv__wave i:nth-child(7){animation-delay:-.8s}
.fv__wave i:nth-child(8){animation-delay:-.2s}
.fv__wave i:nth-child(9){animation-delay:-.6s}
.fv__chip--screen{flex-direction:column;align-items:flex-start;gap:8px;padding:10px}
.fv__win{position:relative;display:block;width:132px;height:78px;border-radius:7px;background:#f5f4fb;box-shadow:0 0 0 2px var(--hue);overflow:hidden}
.fv__win i{display:block;height:5px;border-radius:3px;background:#dad6e3;margin:8px 10px 0}
.fv__win i:first-child{width:40%;background:#c9c3d6;margin-top:10px}
.fv__win i:nth-child(3){width:60%}
.fv__win b{position:absolute;left:62px;top:40px;width:10px;height:14px;background:var(--dark);clip-path:polygon(0 0,100% 70%,45% 65%,25% 100%);animation:fv-cursor 3.2s ease-in-out infinite}
@keyframes fv-float{50%{transform:translateX(-46px) translateY(-8px) rotate(-1deg)}}
@media (max-width:600px){
  .fv__card{width:min(236px,86%);transform:translate(-4%,-18px) rotate(-1.5deg);animation:none}
  .fv__media{height:96px}
  .fv__body{padding:11px 11px 8px}
  .fv__q{font-size:13px;margin-bottom:8px}
  .fv__opt{padding:6px 8px;font-size:11.5px}
  .fv__chip{right:8px;bottom:12px;font-size:12px;padding:8px 11px 8px 8px}
  .fv__cam{width:36px;height:36px}
  .fv__wave{height:26px}
  .fv__win{width:104px;height:60px}
}
@media (prefers-reduced-motion:reduce){
  .fv__card,.fv__bar i,.fv__rec i,.fv__wave i,.fv__win b{animation:none}
  .fv__wave i{height:60%}
}
/* desktop scroll-pin: 1 screen to pin + 4 steps */
.sc.is-pinned{padding-block:0;height:calc(100vh + 4 * 50vh)}
.sc.is-pinned>.wrap{max-width:none;padding:0;height:100%}
.sc.is-pinned .sc-stick{position:sticky;top:0;height:100vh}
.sc.is-pinned .showcase-shell{height:100vh;min-height:0;display:flex;flex-direction:column;justify-content:center;padding:90px 24px 44px;
  border-radius:0;animation:none;will-change:clip-path;
  clip-path:inset(calc(var(--i) * 9vh) calc(var(--i) * max(24px, (100vw - 1408px) / 2)) round calc(var(--i) * 38px))}
.sc.is-pinned .showcase-frame{min-height:0;margin:0 auto;padding:28px 30px;transform:scale(calc(1 - var(--i) * .06));transform-origin:50% 40%}
.sc.is-pinned .showcase-visual{height:min(572px,calc(100vh - 300px))}
.sc.is-pinned .showcase-progress{display:block;position:absolute;left:18px;right:18px;bottom:0;height:2px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden}
.sc.is-pinned .showcase-progress i{position:absolute;inset:0;background:linear-gradient(90deg,var(--accent),var(--accent-tint));border-radius:3px;transform-origin:0 50%;transform:scaleX(var(--s))}
@media (min-width:851px) and (max-width:1600px){
  .showcase-visual{height:502px}
  .sc.is-pinned .showcase-visual{height:min(502px,calc(100vh - 218px))}
}
@media (max-height:780px){
  .sc.is-pinned .showcase-shell{padding:78px 24px 24px}
  .sc.is-pinned .showcase-switcher{margin-bottom:18px}
  .sc.is-pinned .showcase-frame{padding:24px 26px}
  .sc.is-pinned .showcase-visual{height:clamp(382px,calc(100vh - 218px),502px)}
}
@keyframes showcase-copy-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes showcase-breathe{to{filter:hue-rotate(8deg) saturate(1.1)}}
@keyframes showcase-drift{to{transform:rotate(360deg)}}
@media (max-width:850px){
  .showcase-shell{min-height:630px;padding:52px 16px 30px}
  .showcase-frame{padding:30px}
  .showcase-copy{padding-right:24px}
  .showcase-visual{height:310px}
}
@media (max-width:600px){
  .showcase-shell{min-height:0;border-radius:23px;padding:38px 12px 18px}
  .showcase-switcher{margin-bottom:18px}
  .showcase-switcher button{width:48px;height:40px;padding:0;justify-content:center}
  .showcase-switcher button span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .sw-ic{width:22px;height:22px}
  .showcase-frame{display:flex;flex-direction:column;padding:20px;border-radius:17px}
  .showcase-copy{padding:0}
  .showcase-copy h2{margin:0 0 12px}
  .showcase-copy p{margin-bottom:18px}
  .showcase-link{font-size:12px;margin-bottom:23px}
  .showcase-visual{height:330px;border-radius:14px}
  .showcase-form-exit{top:15px;right:15px}
}
@media (prefers-reduced-motion:reduce){
  .showcase-shell,.showcase-shell:before{animation:none}
  .showcase-scene,.showcase-custom-scene,.showcase-switcher button,.sw-pill{transition:none}
}

/* ── HELPGENT AI · four expanding cards. Desktop: hover, focus or the arrows open
   a card (first open by default); tablet/phone: a plain grid. ── */
.jr{background:var(--paper);border-top:1px solid var(--paper-line)}
.jr .intro h2{max-width:680px;margin:4px auto 0;text-wrap:balance}
.journey-track{position:relative;max-width:1260px;margin:44px auto 0;padding:0 var(--gutter)}
.journey-stage{position:relative}
.journey-cards{display:flex;gap:18px;height:clamp(440px,calc((min(100vw,1260px) - 48px) / 2.5),520px);align-items:stretch}
.journey-card{position:relative;isolation:isolate;flex:1;min-width:0;overflow:hidden;padding:30px 30px 0;border-radius:24px;
  background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow-card);
  transition:flex .65s cubic-bezier(.2,.8,.2,1),box-shadow .65s,border-color .65s}
.journey-card.is-active{flex:1.8;border-color:transparent;box-shadow:var(--shadow-raise)}
.journey-select{position:relative;z-index:3;padding:6px 0;margin-block:-6px;border:0;background:none;text-align:left;cursor:pointer;
  font-family:var(--font);font-size:clamp(20px,1.9vw,26px);font-weight:600;line-height:1.14;letter-spacing:-.03em;color:var(--text);transition:color .2s}
.journey-select:hover{color:var(--accent)}
.journey-select:focus-visible{outline:none;box-shadow:var(--ring);border-radius:4px}
.journey-card>p{position:relative;z-index:3;max-width:300px;margin:14px 0 0;font-size:var(--fs-body-sm);line-height:1.55;color:var(--text-2)}
.journey-art{position:absolute;inset:auto 0 0;z-index:1;height:58%;pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--wash-1) 72%);transition:opacity .6s}
.journey-art--media{display:grid;place-items:end center;padding:18px 18px 0;background:linear-gradient(180deg,transparent,var(--wash-1) 72%)}
.journey-art__media{display:block;width:100%;height:100%;max-height:260px;object-fit:contain;object-position:center bottom;border-radius:14px 14px 0 0}
.journey-art--media video{background:rgba(255,255,255,.08)}
.journey-card:nth-child(3) .journey-art{background:linear-gradient(180deg,transparent,var(--wash-2) 72%)}
.journey-card:nth-child(4) .journey-art{background:linear-gradient(180deg,transparent,var(--wash-3) 72%)}
.journey-card:not(.is-active):not(.journey-card--answer) .journey-art{opacity:.55}
.journey-card--answer{background:var(--dark);border-color:var(--dark)}
.journey-card--answer .journey-select{color:#fff}
.journey-card--answer .journey-select:hover{color:var(--accent-tint)}
.journey-card--answer>p{color:rgba(255,255,255,.72)}
.journey-card--answer .journey-art{height:70%;background:radial-gradient(ellipse at 50% 115%,rgb(var(--accent-rgb) / .62),transparent 68%);opacity:.6}
.journey-card--answer.is-active .journey-art{opacity:1}
@media (max-width:900px){
  .journey-track{margin-top:40px}
  .journey-cards{height:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .journey-card,.journey-card.is-active{height:360px;padding:24px;box-shadow:var(--shadow-card)}
  .journey-card .journey-art,.journey-card:not(.is-active):not(.journey-card--answer) .journey-art{opacity:1;height:45%}
}
@media (max-width:600px){
  .journey-cards{grid-template-columns:1fr}
  .journey-card,.journey-card.is-active{height:auto;min-height:260px;padding:24px 24px 110px}
  .journey-card>p{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .journey-card,.journey-art{transition:none}
}
/* light prev/next arrows under the cards */
.journey-nav{position:absolute;right:0;bottom:calc(100% + 16px);display:flex;gap:6px}
.journey-arrow{display:grid;place-items:center;width:34px;height:34px;padding:0;border-radius:50%;cursor:pointer;
  background:transparent;border:1px solid var(--line-2);color:var(--text-2);transition:border-color .2s,color .2s,background .2s,opacity .2s}
.journey-arrow svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.journey-arrow:hover:not(:disabled){border-color:var(--accent);color:var(--accent);background:#fff}
.journey-arrow:focus-visible{outline:none;box-shadow:var(--ring)}
.journey-arrow:disabled{opacity:.35;cursor:default}
@media (max-width:900px){
  .journey-nav{display:none}
}
/* card visuals — small UI fragments, one per AI feature; motion only on the open card */
.journey-card{--hue:var(--accent)}
.journey-card:nth-child(3){--hue:var(--hue-2)}
.journey-card:nth-child(4){--hue:var(--hue-3)}
.journey-card.is-active .jv{transform:scale(1.08);transform-origin:50% 100%}
.journey-card:not(.is-active) .jv *{animation:none!important}

/* ── desktop accordion (Zoom-style): the open card takes ~half the row; closed cards
   shrink to slim columns showing only a half-faded title + a faint arrow, inviting a hover ── */
.journey-link{position:absolute;z-index:4;right:22px;bottom:22px;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  color:var(--text-2);border:1px solid var(--line-2);background:rgba(255,255,255,.6);
  transition:background .35s,color .35s,border-color .35s,opacity .35s,transform .35s}
.journey-link svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.journey-card.is-active .journey-link{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 10px 24px rgb(var(--accent-rgb) / .35)}
.journey-card.is-active .journey-link:hover{transform:scale(1.07)}
.journey-card--answer .journey-link{color:rgba(255,255,255,.75);border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.06)}
.journey-link:focus-visible{outline:none;box-shadow:var(--ring)}
@media (min-width:901px){
  .journey-card.is-active{flex:4.6}
  .journey-select{font-size:26px;transition:color .2s,font-size .5s cubic-bezier(.2,.8,.2,1),opacity .4s}
  .journey-card:not(.is-active) .journey-select{font-size:17px;line-height:1.2;opacity:.5}
  .journey-card:not(.is-active):hover .journey-select{opacity:.85}
  /* text keeps a fixed measure so it never re-wraps while the card animates; it fades in once open */
  .journey-card>p{width:400px;max-width:none;transition:opacity .45s .25s}
  .journey-card:not(.is-active)>p{opacity:0;transition-delay:0s}
  .journey-card.is-active .jv{transform:none}
  .journey-card:not(.is-active) .jv{opacity:.32;transform:scale(.9);filter:saturate(.55);transition-delay:0s}
  .journey-card:not(.is-active):hover .jv{opacity:.5}
  .journey-card--answer:not(.is-active) .jv{opacity:.5;filter:saturate(.8)}
  .journey-card--answer:not(.is-active):hover .jv{opacity:.7}
  .journey-card:not(.is-active) .journey-link{opacity:.55}
  .journey-card:not(.is-active):hover .journey-link{opacity:1}
  .journey-card:not(.is-active) .journey-art{opacity:.45}
}
@media (min-width:901px) and (max-width:1200px){
  .journey-card.is-active .jv{transform:scale(.84)}
  .journey-card:not(.is-active) .jv{transform:scale(.78)}
}
@media (max-width:900px){
  .journey-link{top:18px;right:18px;bottom:auto;width:36px;height:36px}
  .journey-select{padding-right:44px}
}
@media (max-width:900px){
  .journey-card .jv,.journey-card.is-active .jv,.journey-card:not(.is-active) .jv{opacity:1;transform:scale(.9);transform-origin:50% 100%;bottom:16px}
  .journey-card .journey-art,.journey-card:not(.is-active):not(.journey-card--answer) .journey-art{height:55%}
}
@media (max-width:600px){
  .journey-card,.journey-card.is-active{padding-bottom:250px}
  .journey-card .journey-art,.journey-card:not(.is-active):not(.journey-card--answer) .journey-art{height:240px}
}

/* ── templates — copy left, endless slider of template previews right ── */
.tpl{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(40px,6vw,80px);align-items:center}
.tpl__copy h2{margin-bottom:18px;text-wrap:balance}
.tpl__copy .lead{max-width:440px;margin-bottom:28px}
/* endless slider: the track holds the set twice (JS clones it) and slides by exactly
   one set, so the loop is seamless whatever the template count; both ends fade out */
.tpl__slider{position:relative;min-width:0;overflow:hidden;padding:14px 0 18px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.tpl__track{display:flex;width:max-content;animation:tpl-marquee var(--tpl-dur,40s) linear infinite}
.tpl__slider:hover .tpl__track,.tpl__slider:focus-within .tpl__track{animation-play-state:paused}
.tpl__tile--real{color:var(--text);text-decoration:none;background:#fff}
.tpl__tile--real:hover{text-decoration:none}
.tpl__thumb{position:absolute;inset:0 0 32cqw;overflow:hidden;background:var(--paper)}
.tpl__thumb img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.tpl__tile--real:hover .tpl__thumb img{transform:scale(1.025)}
.tpl__tile--real .tpl__name{right:8cqw;bottom:7cqw;left:8cqw;display:-webkit-box;overflow:hidden;line-height:1.2;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.tpl__tile--real:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
@keyframes tpl-marquee{to{transform:translateX(-50%)}}
/* the shared tile frame lives in common.css; these homepage cards fill it with the selected template image */
@media (prefers-reduced-motion:reduce){
  .tpl__track{animation:none}
  .tpl__slider{overflow-x:auto}
}
@media (max-width:860px){
  .tpl{grid-template-columns:1fr;max-width:660px;margin-inline:auto}
}
@media (max-width:600px){
  .tpl__tile{width:150px;margin-right:12px;border-radius:14px}
}

/* ── proof — three equal dark-glass quote cards, top-aligned, authors pinned to the base ── */
.proof__em{color:var(--accent-tint)}
.proof__rating{display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;font-size:14px;font-weight:500;color:rgba(255,255,255,.7)}
.proof__stars{display:inline-flex;gap:2px;color:var(--star)}
.proof__stars svg{width:15px;height:15px;fill:currentColor}
.proof__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch;margin-top:52px}
.proof__card{position:relative;display:flex;flex-direction:column;margin:0;padding:30px 28px 26px;border-radius:var(--radius-lg);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  transition:background .3s,border-color .3s,transform .3s}
.proof__card:hover{background:rgba(255,255,255,.075);border-color:rgb(var(--glow-1-rgb) / .35);transform:translateY(-3px)}
.proof__mark{width:28px;height:21px;fill:var(--accent-tint);opacity:.9;margin-bottom:18px}
.proof__card blockquote{margin:0 0 26px}
.proof__card blockquote p{font-size:var(--fs-body);line-height:1.6;color:rgba(255,255,255,.86)}
.proof__card em{font-style:normal;color:#fff;font-weight:600}
.proof__by{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:20px;border-top:1px solid rgba(255,255,255,.1)}
.proof__av{width:40px;height:40px;border-radius:50%;flex:none;object-fit:cover;border:1.5px solid rgba(255,255,255,.2);background:rgba(255,255,255,.04)}
.proof__person{min-width:0;display:grid;gap:2px}.proof__item-rating{display:block;margin:-8px 0 14px;color:var(--star);font-size:13px;font-weight:600}.proof__source{display:block;margin-top:4px;color:var(--accent-tint);font-size:12px}.proof__logo{width:48px;height:28px;margin-left:auto;object-fit:contain;opacity:.82}
.proof__nm{display:block;font-size:15px;font-weight:600;color:#fff}
.proof__rl{display:block;font-size:13px;color:rgba(255,255,255,.55)}
@media (max-width:860px){
  .proof__grid{grid-template-columns:1fr;max-width:560px;margin-inline:auto}
}
/* why conversations — three alternatives in quiet grey cards, dashed lines that
   converge on one point, then the dark HelpGent answer card (the only violet moment) */
.why__em{color:var(--accent)}
.why__alts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px}
.why__alt{position:relative;padding:22px 26px 24px;border-radius:var(--radius-lg);background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow-card)}
.why__alt::before{content:"";display:block;width:28px;height:3px;border-radius:3px;background:var(--line-2);margin-bottom:14px}
.why__alt h3{font-size:var(--fs-h3-lg);line-height:1.25;margin-bottom:8px}
.why__alt p{font-size:var(--fs-body-sm);line-height:1.55;color:var(--text-2)}
.why__join{position:relative;height:88px}
.why__join>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.why__join>svg path{fill:none;stroke:color-mix(in srgb,var(--accent) 45%,#fff);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:5 7;
  vector-effect:non-scaling-stroke;animation:why-flow 1.4s linear infinite}
.why__node{position:absolute;top:0;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--white);border:2px solid var(--line-2)}
.why__hub{position:absolute;left:50%;bottom:0;z-index:2;display:grid;place-items:center;width:56px;height:56px;margin:0 0 -28px -28px;border-radius:50%;
  background:var(--white);border:1px solid color-mix(in srgb,var(--accent) 30%,#fff);color:var(--accent);animation:why-pulse 2.6s ease-out infinite}
.why__mark{width:26px;height:24px;fill:currentColor;margin-left:2px}
.why__answer{display:flex;flex-direction:column;align-items:center;gap:18px;margin:48px auto 0;text-align:center}
.why__answer p{margin:0}
/* "HelpGent" on its own line with the site's hand-drawn amber underline (nav stroke), drawn in on reveal */
.why__brand{position:relative;display:inline-block;color:var(--text);font-size:clamp(1.4rem,1.15rem + .95vw,1.9rem);font-weight:700;line-height:1.1;letter-spacing:-.03em}
.why__brand svg{position:absolute;left:-3%;width:106%;bottom:-.3em;height:.42em;overflow:visible;fill:none;stroke:var(--marker);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:260;stroke-dashoffset:260;transition:stroke-dashoffset .9s cubic-bezier(.6,.1,.2,1) .35s}
.why__answer.in .why__brand svg{stroke-dashoffset:0}
.why__answer:not(.rv) .why__brand svg{stroke-dashoffset:0}
.why__line{font-size:clamp(1.05rem,.95rem + .45vw,1.35rem);line-height:1.45;font-weight:500;letter-spacing:-.01em;text-wrap:balance}
.why__line b{color:var(--text);font-weight:600}
.why__line em{font-style:normal;font-weight:600;color:var(--accent)}
@media (prefers-reduced-motion:reduce){
  .why__brand svg{transition:none;stroke-dashoffset:0}
  .why__join>svg path,.why__hub{animation:none;box-shadow:0 10px 26px rgb(var(--accent-rgb) / .18)}
}
@media (max-width:860px){
  .why__alts{grid-template-columns:1fr;max-width:560px;margin-inline:auto}
  .why__join{height:56px}
  .why__join>svg path:not(:nth-child(2)),.why__node:not(:nth-of-type(2)){display:none}
  .why__answer{margin-top:44px;gap:14px}
}
/* HelpGent column — quiet favor: full-ink label under a hand-drawn amber underline */
/* key row — a bold label, nothing glossy */
/* marks: one restrained violet check; SaaS a plain grey check or word */
.yes{display:inline-flex;align-items:center;color:var(--accent)}
.no{display:inline-flex;align-items:center;gap:8px;color:var(--text-3)}

/* ── reveal ─────────────────────────────────────────────────────────────── */
@media (max-width:1100px){

/* ── responsive ─────────────────────────────────────────────────────────── */
  .hero__videos{margin-top:40px;gap:16px}
}
@media (max-width:680px){
  .hero__videos{flex-direction:column;max-width:calc(440px + var(--gutter) * 2)}
}