/* Gabster site v3: the shared stylesheet for every marketing page (split from the approved home, 2026-10-21).
   Change it here for all pages (WEBSITE-GUIDELINES §10.7). Tokens come from brand/pack/tokens/tokens.css. */
/* the frame grows with the screen (fluid gutter, column up to 1440px); text keeps its measure (max-width in ch / px) */
:root{--gutter:clamp(24px, 4.5vw, 80px);--pad:max(var(--gutter), calc((100vw - 1440px) / 2));--hair:rgb(var(--gb-border-rgb) / .7)}
*{box-sizing:border-box}html,body{margin:0}
html{scrollbar-color:var(--gb-color-stone) var(--gb-ground);scrollbar-width:thin}
body{background:var(--gb-ground);color:var(--gb-text);font-family:var(--gb-font-text);-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--gb-brand);color:var(--gb-text-on-brand)}
:focus-visible{outline:var(--gb-stroke-focus-ring) solid var(--gb-focus);outline-offset:var(--gb-stroke-focus-offset);border-radius:var(--gb-radius-sm)}
.ico{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:var(--gb-stroke-icon);stroke-linecap:round;stroke-linejoin:round}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- announcement: Night ---------- */
.btn .ico{transition:transform var(--gb-duration-quick) var(--gb-ease-brand)}
.btn:hover .ico{transform:translateX(-4px)}

/* ---------- header + logo lockup ---------- */
.hdr{height:76px;display:flex;align-items:center;gap:40px;padding-inline:20px;position:sticky;top:0;z-index:var(--gb-z-header);background:rgb(var(--gb-ground-rgb) / .86);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color var(--gb-duration-quick)}
.hdr.scrolled{border-color:var(--hair)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--gb-text)}
.brand .mk{width:31px;height:30px;display:block;overflow:visible}
.brand .wm{font-family:var(--gb-font-display);font-weight:var(--gb-weight-semibold);font-size:23px;line-height:1;letter-spacing:0;padding-bottom:2px}
/* logo reveal: arch draws feet → crown (900), brackets close in (300), one listening pulse (240) */
.lg-arch{stroke-dasharray:1 1;stroke-dashoffset:1;animation:lg-draw var(--gb-motion-logo-arch-draw) forwards}
.lg-l{transform:translateX(calc(var(--gb-motion-logo-bracket-travel) * -1px));opacity:0;animation:lg-close var(--gb-motion-logo-brackets-close) forwards}
.lg-r{transform:translateX(calc(var(--gb-motion-logo-bracket-travel) * 1px));opacity:0;animation:lg-close var(--gb-motion-logo-brackets-close) forwards}
.lg-b{transform-origin:237px 322px;animation:lg-pulse var(--gb-motion-logo-pulse)}
/* the reveal waits for the page to settle (class set on load) so it never plays under a busy first paint */
html.js:not(.lg-go) .lg-arch,html.js:not(.lg-go) .lg-l,html.js:not(.lg-go) .lg-r,html.js:not(.lg-go) .lg-b{animation-play-state:paused}
@keyframes lg-draw{to{stroke-dashoffset:0}}
@keyframes lg-close{to{transform:none;opacity:1}}
@keyframes lg-pulse{50%{transform:scale(var(--gb-motion-logo-pulse-scale))}}
.nav{display:flex;gap:26px;font-size:var(--gb-type-ui-size)}
.nav a{color:var(--gb-text);text-decoration:none;display:inline-flex;align-items:center;gap:6px;position:relative;padding:6px 0}
.nav a::after{content:"";position:absolute;right:0;left:0;bottom:0;height:1px;background:var(--gb-text);transform:scaleX(0);transform-origin:right;transition:transform var(--gb-duration-base) var(--gb-ease-brand)}
.nav a:hover::after{transform:scaleX(1)}
.nav .chev{width:9px;height:9px;opacity:.55}
.end{margin-right:auto;display:flex;align-items:center;gap:24px;font-size:var(--gb-type-ui-size)}
.end a{color:var(--gb-text);text-decoration:none}
.btn{display:inline-flex;align-items:center;gap:10px;height:var(--gb-size-control-md);padding:0 16px;border-radius:var(--gb-radius-sm);font-size:var(--gb-type-ui-size);text-decoration:none;white-space:nowrap;transition:background var(--gb-motion-hover),color var(--gb-motion-hover),border-color var(--gb-motion-hover)}
.btn.solid{background:var(--gb-action-on-light);color:var(--gb-action-on-light-fg)!important}
.btn.solid:hover{background:var(--gb-action-on-light-hover)}
.btn.line{border:1px solid var(--gb-border-strong);color:var(--gb-text)!important}
.btn.line:hover{background:var(--gb-action-on-light);color:var(--gb-action-on-light-fg)!important}
.sep{width:1px;height:28px;background:var(--gb-border)}
.burger{display:none;background:none;border:0;padding:0;color:var(--gb-text);cursor:pointer}

/* ---------- hero ---------- */
.hero{position:relative;height:auto;min-height:760px;padding:24px var(--pad) 0;overflow:hidden}
h1{font-family:var(--gb-font-display);font-weight:var(--gb-weight-light);font-size:var(--gb-type-display-2-size);line-height:var(--gb-type-display-2-lh);margin:0;position:relative;z-index:3;letter-spacing:0}
h1 .mb{display:none}
.sub{font-size:var(--gb-type-lead-size);line-height:1.75;color:var(--gb-text-muted);margin:20px 0 0;max-width:40ch;position:relative;z-index:3}

/* proof: the Brackets device around ONE number */
.proof{display:flex;align-items:center;gap:24px;margin:34px 0 0;position:relative;z-index:3;width:fit-content}
.pn{display:flex;align-items:center;gap:.24em;font-family:var(--gb-font-display);font-weight:var(--gb-weight-light);font-size:calc(var(--gb-type-figure-2-size) * 1.2);line-height:1;font-variant-numeric:tabular-nums lining-nums;direction:ltr;unicode-bidi:isolate;color:var(--gb-text)}
.pn .num{display:block;padding-top:.04em}
.bk{height:1.16em;width:auto;aspect-ratio:82/360;display:block;overflow:visible}
.bk{stroke:var(--gb-accent)}
.bk.r{transform:scaleX(-1)}
.pt p{margin:0;font-size:var(--gb-type-body-sm-size);line-height:1.5;color:var(--gb-text)}
.pt small{display:block;margin-top:3px;font-size:var(--gb-type-micro-size);line-height:1.5;color:var(--gb-text-muted)}
.stage{position:absolute;inset:0 calc(var(--pad) - var(--gutter));z-index:1;pointer-events:none}

#gl,#gl2{width:100%;height:100%;display:block}
/* ---------- the sample conversation: an Arch window ---------- */
.win{position:absolute;left:110px;top:100px;width:392px;z-index:3;container-type:inline-size}
.win-sh{position:absolute;inset:34px 18px -26px;filter:blur(26px);opacity:0;animation:in-sh .9s var(--gb-ease-brand) .1s forwards;animation-play-state:paused}
.win-sh i{position:absolute;inset:0;background:rgb(var(--gb-color-night-rgb) / .34)}
@keyframes in-sh{to{opacity:1}}
.card{position:relative;pointer-events:auto;margin:0;background:rgb(var(--gb-color-white-rgb) / .62);backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);padding:calc(34.96cqw + 6px) 14px 16px;opacity:0;transform:translateY(10px);animation:in var(--gb-duration-base) var(--gb-ease-brand) 0s forwards;animation-play-state:paused}
.card .edge{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.card .edge path{fill:none;stroke:rgb(var(--gb-color-white-rgb) / .95);stroke-width:2}
.go .card,.go .win-sh,.go .m,.go .typing,.go .hand,.go .file{animation-play-state:running}
.card .h{position:absolute;top:calc(4.6cqw);left:0;right:0;display:flex;flex-direction:column;align-items:center;text-align:center;font-size:var(--gb-type-body-sm-size);line-height:1.35}
.mono{width:34px;height:34px;border-radius:50%;background:var(--gb-color-ink);color:var(--gb-color-white);display:grid;place-items:center;font-family:var(--gb-font-display);font-weight:var(--gb-weight-semibold);font-size:15px;flex:none;margin-bottom:9px}
.card .h b{display:block;font-weight:var(--gb-weight-semibold)}
.card .h small{display:block;font-size:var(--gb-type-micro-size);color:var(--gb-text-muted);margin-top:1px}

.file{display:flex;align-items:center;gap:10px;width:fit-content;margin-right:auto;margin-top:10px;background:var(--gb-surface);border-radius:var(--gb-radius-lg);padding:8px 12px 8px 14px;opacity:0;transform:translateY(6px);animation:in var(--gb-duration-base) var(--gb-ease-brand) .45s forwards;animation-play-state:paused}
.file .ph{width:38px;height:38px;border-radius:var(--gb-radius-md);background:var(--gb-surface-ai);display:grid;place-items:center;color:var(--gb-text-brand)}
.file .ph .ico{width:18px;height:18px}
.file b{display:block;font-size:13.5px;font-weight:var(--gb-weight-semibold)}.file small{display:block;font-size:var(--gb-type-micro-size);color:var(--gb-text-muted)}
.m{font-size:14.5px;line-height:1.65;padding:9px 12px;border-radius:var(--gb-radius-lg);margin-top:10px;max-width:88%;opacity:0;transform:translateY(6px);animation:in var(--gb-duration-base) var(--gb-ease-brand) forwards;animation-play-state:paused}
.m.c{background:var(--gb-surface);margin-right:auto;border-top-left-radius:var(--gb-radius-xs);animation-delay:.15s}
.m.a{background:rgb(var(--gb-color-indigo-mist-rgb) / .78);border:1px solid rgb(var(--gb-color-white-rgb) / .9);border-top-right-radius:var(--gb-radius-xs);animation-delay:1.6s}
.m.c2{animation-delay:2.4s}.m.a2{animation-delay:3.5s}.typing.t2{animation-delay:2.8s}
.m .who{display:flex;align-items:center;gap:6px;font-size:var(--gb-type-micro-size);font-weight:var(--gb-weight-semibold);color:var(--gb-text-brand);margin-bottom:2px}
.m .who svg{width:15px;height:15px;flex:none}
.typing{display:flex;gap:4px;width:fit-content;padding:11px 12px;background:rgb(var(--gb-color-indigo-mist-rgb) / .78);border:1px solid rgb(var(--gb-color-white-rgb) / .9);border-radius:var(--gb-radius-lg);margin-top:10px;opacity:0;animation:typ .9s var(--gb-ease-brand) .75s forwards;animation-play-state:paused}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--gb-brand);opacity:.7;animation:dot 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
.hand{display:flex;align-items:center;gap:7px;width:fit-content;margin-top:12px;font-size:var(--gb-type-micro-size);font-weight:var(--gb-weight-semibold);color:var(--gb-text);background:rgb(var(--gb-color-green-mist-rgb) / .9);border-radius:var(--gb-radius-pill);padding:4px 11px 4px 12px;opacity:0;animation:in var(--gb-duration-base) var(--gb-ease-brand) 4.1s forwards;animation-play-state:paused}
.hand .ico{color:var(--gb-color-green-deep);width:13px;height:13px}

/* ---------- widget: Night ---------- */
.widget{position:fixed;right:24px;bottom:24px;z-index:var(--gb-z-widget);width:328px;display:grid;gap:8px;opacity:0;transform:translateY(12px);animation:in .6s var(--gb-ease-brand) 1.2s forwards}
.wb{display:flex;gap:11px;align-items:flex-start;background:rgb(var(--gb-color-night-rgb) / .96);color:var(--gb-color-white);border-radius:var(--gb-radius-xl);padding:13px 14px;box-shadow:var(--gb-shadow-velvet-lift)}
.wb svg{width:26px;height:26px;flex:none;margin-top:1px}.wb p{margin:0;font-size:14px;line-height:1.55}.wb small{display:block;font-size:var(--gb-type-micro-size);color:var(--gb-color-night-muted);margin-top:2px}
.wf{display:flex;align-items:center;gap:8px;background:var(--gb-color-night);border:1px solid var(--gb-color-night-line);border-radius:var(--gb-radius-xl);padding:6px 6px 6px 8px;box-shadow:var(--gb-shadow-velvet-lift)}
.wf input{flex:1;border:0;outline:0;background:none;font:inherit;font-size:14.5px;padding:8px;color:var(--gb-color-white);min-width:0}
.wf input::placeholder{color:var(--gb-color-night-muted)}
.wf button{width:34px;height:34px;border-radius:50%;border:0;background:var(--gb-action-on-dark);display:grid;place-items:center;color:var(--gb-action-on-dark-fg);cursor:pointer;transition:background var(--gb-motion-hover)}
.wf button:hover{background:var(--gb-action-on-dark-hover)}
.wf button:focus-visible{outline-color:var(--gb-action-on-dark)}
.wf:focus-within{border-color:var(--gb-action-on-dark)}
.launch{display:none;width:56px;height:56px;border-radius:50%;background:var(--gb-color-night);place-items:center;border:0;box-shadow:var(--gb-shadow-velvet-lift);cursor:pointer}
.launch svg{width:28px;height:28px}

/* ---------- trust: real logos ---------- */
.trust{background:var(--gb-surface);padding:80px var(--gutter) 64px}
.trust h2,.works h2{font-family:var(--gb-font-display);font-weight:var(--gb-weight-light);font-size:var(--gb-type-display-4-size);line-height:var(--gb-type-display-4-lh);margin:0 0 52px;letter-spacing:0}
.logos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:32px 24px;align-items:center}
.logos li{display:flex;justify-content:center;align-items:center;height:72px;min-width:0}
.logos .lg{position:relative;display:block;height:var(--h);width:auto}
.logos img{display:block;height:100%;width:auto;transition:opacity var(--gb-duration-quick) var(--gb-ease-brand)}
.logos img.k{position:absolute;inset:0;opacity:0}
.logos li:hover img.k{opacity:1}.logos li:hover img.g{opacity:0}
.trust .src{margin:52px 0 0;font-size:var(--gb-type-caption-size);color:var(--gb-text-muted)}

/* ---------- works with: brand icon set ---------- */

@keyframes in{to{opacity:1;transform:none}}
@keyframes typ{0%{opacity:0}12%,82%{opacity:1}100%{opacity:0;height:0;padding:0;margin:0;border-width:0}}
@keyframes dot{50%{opacity:.25}}
.still .card,.still .win-sh,.still .m,.still .hand,.still .file,.still .widget{opacity:1;transform:none;animation:none}
.still .typing{display:none}
.still .lg-arch{stroke-dashoffset:0;animation:none}
.still .lg-l,.still .lg-r,.still .lg-b{transform:none;opacity:1;animation:none}
@media (prefers-reduced-motion:reduce){
 .card,.win-sh,.m,.hand,.file{opacity:1;transform:none;animation:none}
 .typing{display:none}
 .lg-arch{stroke-dashoffset:0;animation:none}
 .lg-l,.lg-r,.lg-b{transform:none;opacity:1;animation:none}
}

/* ---------- phone ---------- */
@media (max-width:860px){
 :root{--pad:var(--gutter)}
 :root{--gutter:var(--gb-layout-gutter-phone)}
 .hdr{height:64px;gap:10px;padding-inline:14px}
 .brand .mk{width:28px;height:27px}.brand .wm{font-size:21px}
 .nav,.end>a:not(.keep),.sep{display:none}
 .end{gap:10px}.end .btn{height:var(--gb-size-control-sm);font-size:14px;padding:0 12px}
 .burger{display:grid;place-items:center;width:44px;height:44px}
 .burger svg{width:22px;height:22px}
 .hero{height:auto;min-height:0;padding:20px var(--gutter) 0;text-align:center}
 h1{margin-inline:auto}
 h1 .db{display:none}h1 .mb{display:inline}
 .sub{font-size:16px;margin:16px auto 0;max-width:32ch}
 
 
 .proof{margin:30px auto 0;gap:10px;flex-direction:column;text-align:center}
 .stage{position:relative;inset:auto;height:960px;margin:6px calc(var(--gutter) * -1) 0}
 
 
 .win{left:calc(50% - 155px);right:auto;width:310px;top:318px}
 .card{text-align:right}
 .widget{right:16px;left:auto;bottom:16px;width:auto}.widget .wb,.widget .wf{display:none}.widget .launch{display:grid}
 .trust{padding:52px var(--gutter) 44px}.trust h2,.works h2{margin-bottom:32px}
 .logos{grid-template-columns:repeat(3,1fr);gap:24px 12px}
 .logos li{height:60px}.logos .lg{height:var(--hm)}
 
}

/* ================= home: one stream behind everything ================= */
#stream{position:fixed;inset:0;width:100vw;height:100vh;z-index:1;pointer-events:none;display:block}
/* layering: band backgrounds paint below the wave (z auto), every piece of copy and UI above it (z 2) */
.hdr{position:sticky;z-index:var(--gb-z-header)}.hero,.page{position:relative}
.hero .stage .anchor{position:absolute;left:-74px;top:-8px;width:760px;height:736px;pointer-events:none}
.go-build{display:flex;align-items:center;gap:6px;margin-top:26px;position:relative;z-index:3;max-width:520px;background:rgb(var(--gb-color-white-rgb) / .7);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);border:1px solid rgb(var(--gb-color-white-rgb) / .95);border-radius:var(--gb-radius-lg);padding:6px;box-shadow:0 1px 0 rgb(var(--gb-color-ink-rgb) / .04),0 18px 40px -24px rgb(var(--gb-color-night-rgb) / .35)}
.go-build .ico{width:18px;height:18px;margin-inline:10px 2px;color:var(--gb-text-muted);flex:none}
.go-build input{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;font-size:16px;color:var(--gb-text);padding:10px 4px}
.go-build input::placeholder{color:var(--gb-text-muted)}
.go-build button{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 18px;border:0;border-radius:calc(var(--gb-radius-lg) - 4px);background:var(--gb-action-on-light);color:var(--gb-action-on-light-fg);font:inherit;font-size:15.5px;cursor:pointer;white-space:nowrap;transition:background var(--gb-motion-hover)}
.go-build button:hover{background:var(--gb-action-on-light-hover)}
.go-build:focus-within{border-color:var(--gb-brand)}
.go-alt{display:flex;align-items:center;gap:14px;margin:14px 0 0;font-size:var(--gb-type-caption-size);color:var(--gb-text-muted);position:relative;z-index:3}
.go-alt a{color:var(--gb-text);text-decoration:none;border-bottom:1px solid var(--gb-border-strong);padding-bottom:1px}
.go-alt .dot{width:3px;height:3px;border-radius:50%;background:var(--gb-text-muted)}

/* ---------- page rhythm ---------- */
.page{padding:0}

.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:var(--gb-type-caption-size);font-weight:var(--gb-weight-semibold);color:var(--gb-text-brand);margin:0 0 22px}
.eyebrow svg{height:16px;width:auto;stroke:var(--gb-accent)}
.sec h2,.close h2,.logos-sec h2,.biz h2,.price h2{font-family:var(--gb-font-display);font-weight:var(--gb-weight-light);font-size:var(--gb-type-display-3-size);line-height:var(--gb-type-display-3-lh);letter-spacing:0;margin:0}

.proofline{display:flex;gap:12px;align-items:flex-start;margin-top:34px;padding-top:22px;border-top:1px solid var(--hair);font-size:var(--gb-type-body-sm-size);line-height:1.6;color:var(--gb-text)}
.proofline b{font-family:var(--gb-font-display);font-weight:var(--gb-weight-light);font-size:34px;line-height:1;direction:ltr;unicode-bidi:isolate;white-space:nowrap}
.proofline small{display:block;color:var(--gb-text-muted);font-size:var(--gb-type-micro-size);margin-top:3px}

/* ---------- glass: the UI layer of the DNA ---------- */

.chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:var(--gb-weight-semibold);border-radius:var(--gb-radius-pill);padding:3px 10px;white-space:nowrap}
.chip.g{background:rgb(var(--gb-color-green-mist-rgb) / .95);color:var(--gb-text)}.chip.g::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gb-color-green-deep)}
.chip.i{background:rgb(var(--gb-color-indigo-mist-rgb) / .95);color:var(--gb-text-brand)}
.chip.k{background:rgb(var(--gb-color-ink-rgb) / .06);color:var(--gb-text)}

.mk{display:inline-block;width:15px;height:15px;flex:none}
.sample{position:absolute;font-size:11px;color:var(--gb-text-muted);z-index:3}

/* proof */

.src{font-size:var(--gb-type-micro-size);color:var(--gb-text-muted);margin-top:22px}

/* instruction card: the real «add» state, then the real «saved» state, once on entry */
.ibs{position:absolute;left:50%;top:50%;width:min(calc(100% - 40px),490px);transform:translate(-50%,-52%);display:grid}

.ibs .s2{opacity:0;transform:translateY(8px)}
.ibs.on .s1{opacity:0;transform:translateY(-8px);transition-delay:1.4s}.ibs.on .s2{opacity:1;transform:none;transition-delay:1.4s}

/* ================= v5 sections: Fin's rhythm — a head, then one wide band, sometimes a row of three under it ================= */
.s2{position:relative;padding:112px var(--pad) 0}
.s2 > header,.s2 > .pts,.s2 > .tabs2,.statband .sb-in,.ctrl > *,.price > *,.close > *:not(.anchor),.logos-sec > *{position:relative;z-index:2}
.s-h{max-width:640px}
.s-h h2,.statband h2,.in-h h2{font-family:var(--gb-font-display);font-weight:var(--gb-weight-light);font-size:var(--gb-type-display-3-size);line-height:var(--gb-type-display-3-lh);margin:0;letter-spacing:0}
.s-h > p:not(.eyebrow),.in-h > p:not(.eyebrow){font-size:var(--gb-type-lead-size);line-height:1.75;color:var(--gb-text-muted);margin:20px 0 0;max-width:58ch}
.s-h .more{display:inline-flex;align-items:center;gap:8px;margin-top:24px;font-size:var(--gb-type-ui-size);color:var(--gb-text);text-decoration:none;border-bottom:1px solid var(--gb-border-strong);padding-bottom:3px}
/* the band: a painterly field in the brand palette (gradients + a fine grain), the wave forms inside it */
.bandx{position:relative;margin-top:44px;height:640px;border-radius:28px;overflow:hidden}
.bandx::after{display:none;content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .2 0 0 0 0 .3 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");opacity:.16;mix-blend-mode:multiply;pointer-events:none;border-radius:inherit}

.bandx .anchor{position:absolute;inset:0;pointer-events:none}
.mist{background:#F3F2F6 url("art/mist.webp") center/cover no-repeat}

.warm{background:#F6F2EA url("art/warm.webp") center/cover no-repeat}

.night{background:var(--gb-color-night) url("art/night.webp") 50% 100% / cover no-repeat!important}
.night::after{mix-blend-mode:screen;opacity:.06}

/* real product pieces placed on the band (captured from the live product, never rebuilt) */

.bandx.night.stage{height:740px}

/* three points under a band */
.pts{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.pts li{border-top:1px solid var(--gb-border-strong);padding-top:16px}.pts b{display:block;font-weight:var(--gb-weight-semibold);font-size:16px;margin-bottom:6px}.pts span{font-size:15px;line-height:1.7;color:var(--gb-text-muted)}
/* split band: content in two calm halves inside the band */
.bandx.split{height:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:48px;padding:72px 64px}
.bandx.split > *{position:relative;z-index:2}
.bandx.split .ibs{position:relative;left:auto;top:auto;transform:none;width:100%;max-width:490px;justify-self:center}

/* head inside the band (channels) */
.bandx.inside{height:680px}

/* proof: full-bleed figure band */
.statband{position:relative;margin-top:112px;padding:110px var(--pad) 100px;text-align:center;background:#F6F2EA url("art/warm.webp") center/cover no-repeat}
.statband::after{display:none;content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .2 0 0 0 0 .3 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");opacity:.14;mix-blend-mode:multiply;pointer-events:none}
.statband .eyebrow{justify-content:center}
.statband .bf{display:flex;justify-content:center;margin-top:40px}
.figs3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;max-width:900px;margin:52px auto 0}
.figs3 div{border-top:1px solid var(--gb-border-strong);padding-top:16px}.figs3 b{display:block;font-family:var(--gb-font-display);font-weight:var(--gb-weight-light);font-size:44px;line-height:1;direction:ltr}.figs3 span{display:block;margin-top:8px;font-size:15px;color:var(--gb-text-muted)}
/* by business: wide band + lifecycle tabs under it */
.biz2 .biz-t h3{font-family:var(--gb-font-display);font-weight:var(--gb-weight-light);font-size:34px;line-height:1.3;margin:0 0 14px}
.biz2 .biz-t p{color:var(--gb-text-muted);font-size:16px;line-height:1.75;margin:0}
.biz2 .biz-t ul{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:10px;font-size:15px}.biz2 .biz-t li{display:flex;gap:10px;align-items:center}.biz2 .biz-t li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gb-accent)}
.tabs2{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:20px}
.tabs2 a,.tabs2 button{font:inherit;text-decoration:none;text-align:start;padding:16px 16px 18px;border:0;border-top:2px solid var(--gb-border);background:none;color:var(--gb-text-muted);cursor:pointer;display:grid;gap:4px}
.tabs2 a b,.tabs2 button b{font-weight:var(--gb-weight-semibold);font-size:15px;color:var(--gb-text)}.tabs2 a span,.tabs2 button span{font-size:13.5px}
.tabs2 a.on,.tabs2 a:hover,.tabs2 a:focus-visible,.tabs2 button[aria-selected=true]{border-top-color:var(--gb-brand);background:rgb(var(--gb-color-white-rgb) / .6)}
@media (max-width:860px){
 .s2{padding:96px var(--gutter) 0}
 .bandx,.bandx.tall,.bandx.short,.bandx.inside,.bandx.night.stage{height:auto;min-height:420px;margin-top:32px;border-radius:22px;padding:28px 16px;display:grid;gap:18px;justify-items:center;align-content:start}
 
 
 .bandx.night.stage{padding:120px 0 0}
 .bandx.split{grid-template-columns:1fr;padding:32px 18px;gap:28px}
 
 .pts{grid-template-columns:1fr;gap:16px}
 .figs3{grid-template-columns:1fr}.statband{margin-top:96px;padding:80px var(--gutter)}
 
 .tabs2{grid-template-columns:1fr 1fr}
}
/* ---------- motion bands: HyperFrames renders of brand components on Higgsfield art (no platform captures) ---------- */
.bandx.vid{height:auto;aspect-ratio:1240/640;background:#EFECE6;overflow:hidden}
.bandx.vid::after{display:none}
.bandx .bv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--op,50%) 50%;z-index:0}
.bandx.vid .anchor{z-index:1}
.convo2{position:relative;justify-self:center;width:min(100%,400px);background:#fff;border:1px solid rgb(var(--gb-text-rgb) / .08);border-radius:16px;padding:18px 16px 30px;display:flex;flex-direction:column}
.convo2 .m{opacity:1;transform:none;animation:none}.convo2 .sample{left:16px;bottom:10px}
@media (max-width:860px){.bandx.vid{height:auto;min-height:0;padding:0;display:block;margin-inline:calc(var(--gutter) * -.5)}.bandx .bv{object-position:50% 50%}.intg{padding:22px 16px}.ig-g{grid-template-columns:1fr 1fr}}
.card .h .hmk{width:34px;height:33px;margin-bottom:9px}
/* ---------- hero art: Higgsfield field framed behind the live arch and the arch-window conversation ---------- */
.hero .stage .anchor::before{content:"";position:absolute;inset:3% 0 -12%;border-radius:32px;background:#ECEEFF url("art/hero.webp") 50% 100% / cover no-repeat;z-index:-1}
.hero .stage{z-index:auto}
.hero .stage .win{z-index:3}
.hero .stage .anchor::before{z-index:-1}
.intg{height:auto;padding:40px 44px;background:#F4F2EE url("art/sand.webp") center/cover no-repeat}
.ig-h{position:relative;z-index:2;display:flex;justify-content:space-between;font-size:13px;font-weight:600;color:var(--gb-text);margin-bottom:14px}.ig-h span:last-child{color:var(--gb-text-muted);font-weight:400}
.ig-g{position:relative;z-index:2;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.ig-g li{height:64px;display:flex;align-items:center;gap:10px;padding:0 16px;border-radius:14px;background:rgb(var(--gb-color-white-rgb) / .62);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);border:1px solid rgb(var(--gb-color-white-rgb) / .95)}
.ig-g li b{font-family:var(--gb-font-display);font-weight:var(--gb-weight-semibold);font-size:14px}
.ig-g.req li{background:rgb(var(--gb-color-white-rgb) / .38)}.ig-g.req li img{filter:grayscale(1) opacity(.75)}.ig-g .api b:first-child{font-family:ui-monospace,Menlo,monospace;color:var(--gb-text-brand)}
@media (max-width:860px){.ig-g{grid-template-columns:1fr 1fr}.intg{padding:22px 14px}}
.chanrow2{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:12px 28px;font-size:15px;position:relative;z-index:2}.chanrow2 li{display:flex;align-items:center;gap:8px}
.s-h .proofline{margin-top:22px;max-width:420px}
/* ---------- hero, Fin's composition: full-bleed art half to the page edge, the live logo in it, a tall messenger pinned near the outer edge ---------- */
@media (min-width:861px){
 .hero{--aw:min(44vw,660px);min-height:max(720px,calc(var(--aw) * .97 + 56px));padding-bottom:64px}
 .hero .stage{--off:calc(var(--pad) - var(--gutter))}
 .hero .stage::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--off) * -1);width:50vw;background:#ECEEFF url("art/hero.webp") 50% 100% / cover no-repeat;z-index:-1}
 .hero .stage .anchor::before{display:none}
 .hero .stage .anchor{left:calc(25vw - var(--aw) / 2 - var(--off));top:4px;width:var(--aw);height:calc(var(--aw) * .97)}
 .hero .stage .win{left:calc(25vw - var(--aw) * .26 - var(--off));top:calc(var(--aw) * .97 * .25 + 4px);bottom:0;width:calc(var(--aw) * .52);height:auto}
 .hero .stage .win .card.msgr{height:100%;border-radius:26px 26px 0 0}
 .hero .stage .win-sh{display:none}
}
.card.msgr{display:flex;flex-direction:column;padding:0;background:rgb(var(--gb-color-white-rgb) / .58);border:1px solid rgb(var(--gb-color-white-rgb) / .95);border-radius:26px;overflow:hidden;box-shadow:0 30px 60px -36px rgb(var(--gb-color-night-rgb) / .45)}
.msgr .mh{flex:none;display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid rgb(var(--gb-color-white-rgb) / .85);text-align:right}
.msgr .mh .hmk{width:30px;height:29px;flex:none}.msgr .mh b{display:block;font-family:var(--gb-font-display);font-weight:var(--gb-weight-semibold);font-size:16px;line-height:1.2}.msgr .mh small{display:block;font-size:var(--gb-type-micro-size);color:var(--gb-text-muted);margin-top:2px}

.msgr .ml .st{animation:none;opacity:1;transform:none}
.msgr .ml{flex:1;display:flex;flex-direction:column;justify-content:flex-end;padding:8px 16px 22px;overflow:hidden}
/* ---------- hero on phone: Fin's mobile — full-width art frame, the arch on top, a fixed-height messenger inside it ---------- */
@media (max-width:860px){
 .hero{padding-bottom:0}
 .hero .stage{position:relative;height:620px;margin:28px calc(var(--gutter) * -1) 0;overflow:hidden;background:#ECEEFF url("art/hero.webp") 50% 100% / cover no-repeat}
 .hero .stage .anchor::before{display:none}
 .hero .stage .anchor{left:50%;top:10px;width:min(360px,94vw);height:calc(min(360px,94vw) * .97);transform:translateX(-50%)}
 .hero .stage .win{left:50%;transform:translateX(-50%);right:auto;top:118px;bottom:0;width:min(300px,78vw);height:auto;z-index:3}
 .hero .stage .win-sh{display:none}
 .hero .stage .win .card.msgr{height:100%;border-radius:22px 22px 0 0}
 .msgr .ml{padding-bottom:16px}
}
/* logos */
.logos-sec{position:relative;z-index:1;padding:56px var(--pad) 8px;text-align:center}
.logos-sec h2{font-size:var(--gb-type-display-4-size);line-height:var(--gb-type-display-4-lh);margin-bottom:56px}
.logos-sec .logos{max-width:1240px;margin:0 auto}
.logos-sec .src{text-align:center}

/* pricing preview */
.price{position:relative;z-index:2;padding:96px var(--pad)}
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:44px}
.plan{border-radius:22px;padding:24px;background:rgb(var(--gb-color-white-rgb) / .62);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgb(var(--gb-color-white-rgb) / .95)}
.plan b{display:block;font-family:var(--gb-font-display);font-weight:var(--gb-weight-semibold);font-size:19px}
.plan p{margin:8px 0 0;color:var(--gb-text-muted);font-size:14px;line-height:1.6}
.plan.dark{background:var(--gb-color-night);color:#fff;border-color:var(--gb-color-night)}.plan.dark p{color:var(--gb-color-night-muted)}

/* close */
.close{position:relative;z-index:2;padding:96px var(--pad) 112px;text-align:center;display:grid;grid-template-columns:minmax(0,1fr);justify-items:stretch}
.close .anchor{margin:0 auto}.close h2{text-wrap:balance}
.close .anchor{width:420px;height:408px;pointer-events:none}
.close h2{font-size:var(--gb-type-display-1-size);line-height:var(--gb-type-display-1-lh);margin-top:30px}
.close .go-build{margin:34px auto 0;width:520px}
.close .go-alt{justify-content:center}
.foot{position:relative;z-index:2;padding:64px var(--pad) 40px;border-top:1px solid var(--hair);background:rgb(var(--gb-color-white-rgb) / .55);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);font-size:var(--gb-type-body-sm-size);color:var(--gb-text-muted)}
.ft-top{display:flex;align-items:center;gap:18px;margin-bottom:48px}.ft-top p{margin:0;font-family:var(--gb-font-display);font-weight:var(--gb-weight-light);font-size:22px;color:var(--gb-text)}
.ft-cols{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:28px 20px}
.ft-cols h3{margin:0 0 14px;font-size:var(--gb-type-caption-size);font-weight:var(--gb-weight-semibold);color:var(--gb-text)}
.ft-cols a{display:block;color:var(--gb-text-muted);text-decoration:none;font-size:14px;line-height:2.15;transition:color var(--gb-duration-quick)}.ft-cols a:hover{color:var(--gb-text)}
.ft-bot{display:flex;justify-content:space-between;margin-top:56px;padding-top:22px;border-top:1px solid var(--hair);font-size:var(--gb-type-caption-size)}.ft-bot a{color:inherit;text-decoration:none}
/* ---------- section CTA pair ---------- */
.cta2{display:flex;gap:10px;margin-top:30px}.cta2 .btn{height:44px;font-size:15px}
/* ---------- proof: the figure, typeset, inside brackets laid by the stream ---------- */

.bf{display:flex;justify-content:center}
.bfn{position:relative;display:flex;align-items:center;gap:.18em;font-family:var(--gb-font-display);font-weight:var(--gb-weight-light);font-size:clamp(96px,10.5vw,176px);line-height:1;padding:.06em .02em 0;direction:ltr;unicode-bidi:isolate;color:var(--gb-text);letter-spacing:-.01em}
.bfl{margin:0;text-align:center;font-size:var(--gb-type-body-size);color:var(--gb-text)}.bfl small{display:block;margin-top:4px;font-size:var(--gb-type-micro-size);color:var(--gb-text-muted)}
/* ---------- control: six real controls, Fin's trust slot ---------- */
.ctrl{position:relative;z-index:2;padding:112px var(--pad) 72px}
.ctrl-h{max-width:640px}.ctrl-h h2{font-family:var(--gb-font-display);font-weight:var(--gb-weight-light);font-size:var(--gb-type-display-3-size);line-height:var(--gb-type-display-3-lh);margin:0}
.ctrl-h p:not(.eyebrow){font-size:var(--gb-type-lead-size);line-height:1.75;color:var(--gb-text-muted);margin:18px 0 0}
.ctrl-g{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ctrl-g li{display:flex;flex-direction:column;gap:8px;padding:26px 24px 28px;border-radius:22px;background:rgb(var(--gb-color-white-rgb) / .62);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgb(var(--gb-color-white-rgb) / .95)}
.ctrl-g .ci{width:30px;height:30px;margin-bottom:10px;fill:none;stroke:var(--gb-brand);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ctrl-g b{font-family:var(--gb-font-display);font-weight:var(--gb-weight-semibold);font-size:18px}.ctrl-g span{font-size:14.5px;line-height:1.7;color:var(--gb-text-muted)}
/* ---------- widget: one light pill (Fin's ask bar), after the hero ---------- */
.widget{width:340px;opacity:0;transform:translateY(12px);animation:none;transition:opacity .5s var(--gb-ease-brand),transform .5s var(--gb-ease-brand);pointer-events:none}
.widget.show{opacity:1;transform:none;pointer-events:auto}
.widget .wb{display:none}
.widget .wf{background:rgb(var(--gb-color-white-rgb) / .82);backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);border:1px solid var(--gb-border);border-radius:var(--gb-radius-pill);box-shadow:0 18px 40px -22px rgb(var(--gb-color-night-rgb) / .4);padding:5px 5px 5px 6px}
.widget .wf input{color:var(--gb-text)}.widget .wf input::placeholder{color:var(--gb-text-muted)}
.widget .wf button{background:var(--gb-action-on-light);color:var(--gb-action-on-light-fg)}.widget .wf:focus-within{border-color:var(--gb-brand)}
.widget .wf .wm2{width:22px;height:22px;margin-inline-start:6px;flex:none}
/* ---------- the reduced-motion / no-WebGL hero: path-traced still of the same arch ---------- */
.anchor .still-arch{position:absolute;left:50%;top:50%;width:164%;aspect-ratio:1;transform:translate(-50%,-50%);background:url("arch-hero.webp") center/contain no-repeat}
/* ---------- hero at laptop widths: keep the arch whole and clear of the copy ---------- */
@media (min-width:861px) and (max-width:1600px){
 .hero{--al:max(calc(24px - var(--pad) + var(--gutter)), -30px)}
 .win{left:calc(var(--al) + 150px);top:110px;width:360px}
 .hero .stage .anchor{left:var(--al);top:14px;width:660px;height:640px}
}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes wv{50%{transform:scaleY(.35)}}
.still .wavebar i,.still .build li.now .tk{animation:none}

@media (max-width:860px){
 .hero .stage .anchor{left:50%;top:0;width:380px;height:368px;transform:translateX(-50%)}
 .go-build{margin:22px auto 0;max-width:100%}.go-build button{padding:0 14px}
 .go-alt,.chan{justify-content:center;margin-inline:auto}
 
 
 
 
 .biz,.price{padding:96px var(--gutter)}.plans{grid-template-columns:1fr 1fr}
 
 .close .anchor{width:300px;height:292px}.close .go-build{width:100%}
 
 .hero .stage .anchor{width:336px;height:326px;top:12px}
 .go-build input{font-size:16px}.go-build button{font-size:15px}
 .bfn{font-size:88px}
 .ctrl{padding:96px var(--gutter) 72px}.ctrl-g{grid-template-columns:1fr;margin-top:36px;gap:12px}.ctrl-g li{padding:20px}
 .cta2 .btn{flex:1;justify-content:center}
 .foot{padding:48px var(--gutter) 32px}.ft-cols{grid-template-columns:repeat(2,minmax(0,1fr))}.ft-bot{flex-direction:column;gap:8px}
 .widget{width:auto}
}

/* ---------- product pages (2026-10-21): centred hero over one wide band, the Fin/Intercom product-page opening ---------- */
.phero{position:relative;z-index:2;padding:88px var(--pad) 0;text-align:center}
.phero h1{max-width:15ch;margin-inline:auto;text-wrap:balance}
.phero .sub{margin-inline:auto;max-width:54ch}
.phero .go-build{margin-inline:auto}
.phero .go-alt{justify-content:center}
.phero .bandx{margin-top:64px;text-align:start}
.phero .pts{text-align:start}

/* platform index: every other product page as one big-type list (above the close) */
.pindex{position:relative;z-index:2;padding:112px var(--pad) 0}
.pindex h2{font-family:var(--gb-font-display);font-weight:var(--gb-weight-light);font-size:var(--gb-type-display-3-size);line-height:var(--gb-type-display-3-lh);margin:0;max-width:640px}
.pindex ul{list-style:none;margin:44px 0 0;padding:0;border-top:1px solid var(--gb-border-strong)}
.pindex a{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,44ch) 20px;align-items:baseline;gap:28px;padding:22px 0;border-bottom:1px solid var(--gb-border-strong);color:var(--gb-text);text-decoration:none}
.pindex b{font-family:var(--gb-font-display);font-weight:var(--gb-weight-light);font-size:var(--gb-type-display-4-size);line-height:var(--gb-type-display-4-lh);transition:color var(--gb-motion-hover)}
.pindex span{font-size:15px;line-height:1.7;color:var(--gb-text-muted)}
.pindex .ico{width:16px;height:16px;align-self:center;color:var(--gb-text-muted);transition:transform var(--gb-motion-hover),color var(--gb-motion-hover)}
.pindex a:hover b,.pindex a:focus-visible b{color:var(--gb-text-brand)}
.pindex a:hover .ico{transform:translateX(-4px);color:var(--gb-text-brand)}
@media (max-width:860px){
 .phero{padding:56px var(--gutter) 0}
 .phero .go-build{width:100%}
 .pindex{padding:96px var(--gutter) 0}
 .pindex a{grid-template-columns:minmax(0,1fr) 16px;gap:6px 16px;padding:18px 0}
 .pindex span{grid-column:1;grid-row:2}
 .pindex .ico{grid-column:2;grid-row:1 / span 2}
}
.pts a{color:var(--gb-text);text-decoration:none;border-bottom:1px solid var(--gb-border-strong);padding-bottom:1px;white-space:nowrap}
.pts a:hover{color:var(--gb-text-brand);border-color:currentColor}

/* ================= English (dir=ltr): mirror the few physical rules; Arabic is untouched ================= */
[dir=ltr] .end{margin-right:0;margin-left:auto}
[dir=ltr] .nav a::after{transform-origin:left}
[dir=ltr] .btn:hover .ico,[dir=ltr] .pindex a:hover .ico{transform:translateX(4px)}
[dir=ltr] .go-build input{direction:ltr}
[dir=ltr] .msgr .mh{text-align:left}
[dir=ltr] .file{margin-right:0;margin-left:auto}
[dir=ltr] .m.c{margin-right:0;margin-left:auto;border-top-left-radius:var(--gb-radius-lg);border-top-right-radius:var(--gb-radius-xs)}
[dir=ltr] .m.a{border-top-right-radius:var(--gb-radius-lg);border-top-left-radius:var(--gb-radius-xs)}
[dir=ltr] .win{left:auto;right:110px}
@media (min-width:861px){
 [dir=ltr] .hero .stage::before{left:auto;right:calc(var(--off) * -1)}
 [dir=ltr] .hero .stage .anchor{left:auto;right:calc(25vw - var(--aw) / 2 - var(--off))}
 [dir=ltr] .hero .stage .win{left:auto;right:calc(25vw - var(--aw) * .26 - var(--off))}
}
@media (min-width:861px) and (max-width:1600px){
 [dir=ltr] .hero .stage .anchor{left:auto;right:var(--al)}
}
@media (max-width:860px){
 [dir=ltr] .card{text-align:left}
 [dir=ltr] .win{right:auto}
}
@media (min-width:861px){[dir=ltr] .hero h1{font-size:calc(var(--gb-type-display-2-size) * .88)}}
/* plan rows (pricing) and long-form legal text (terms, privacy), 2026-10-22 */
.plan ul{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:9px;font-size:14px;line-height:1.55}
.plan ul li{padding-top:9px;border-top:1px solid rgb(var(--gb-text-rgb) / .07)}
.plan.dark ul li{border-top-color:rgb(255 255 255 / .12)}
.s2>article{max-width:760px;margin:0 auto;padding:0 var(--gutter);font-size:16px;line-height:1.95;color:var(--gb-text)}
.s2>article h2{font-family:var(--gb-font-display);font-weight:var(--gb-weight-semibold);font-size:22px;line-height:1.4;margin:48px 0 12px}
.s2>article h3{font-size:17px;margin:28px 0 8px}
.s2>article p,.s2>article li{margin:0 0 12px;color:rgb(var(--gb-text-rgb) / .86)}
.s2>article ul,.s2>article ol{padding-inline-start:22px;margin:0 0 16px}
.figs3>div:only-child{grid-column:2}  /* one signed figure: centre it (MM verdict 2026-10-22 removed the other two) */
/* header menus (2026-10-23): desktop dropdown per nav item, full-screen list on phones */
.mega{position:absolute;inset-inline:0;top:100%;background:rgb(var(--gb-ground-rgb));border-bottom:1px solid var(--hair);box-shadow:0 34px 60px -44px rgb(var(--gb-color-night-rgb) / .38);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity var(--gb-duration-quick) var(--gb-ease-brand),transform var(--gb-duration-quick) var(--gb-ease-brand),visibility 0s linear var(--gb-duration-quick)}
.mega.open{opacity:1;visibility:visible;transform:none;transition:opacity var(--gb-duration-quick) var(--gb-ease-brand),transform var(--gb-duration-quick) var(--gb-ease-brand)}
.mega-in{margin:0;padding:26px 20px 34px}
.mega ul{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,340px));column-gap:56px}
.mega a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--hair);color:var(--gb-text);text-decoration:none;font-family:var(--gb-font-display);font-size:19px;line-height:1.3}
.mega a .ico{width:14px;height:14px;flex:none;opacity:0;transform:translateX(5px);transition:opacity var(--gb-duration-quick),transform var(--gb-duration-quick)}
[dir=ltr] .mega a .ico{transform:translateX(-5px)}
.mega a:hover .ico,.mega a:focus-visible .ico{opacity:.75;transform:none}
[dir=ltr] .mega a:hover .ico,[dir=ltr] .mega a:focus-visible .ico{transform:none}
.nav a[aria-expanded=true] .chev{transform:rotate(180deg)}
.nav .chev{transition:transform var(--gb-duration-quick)}
.mnav{position:fixed;inset:64px 0 0;z-index:calc(var(--gb-z-header) + 1);background:rgb(var(--gb-ground-rgb));overflow-y:auto;overscroll-behavior:contain}
.mnav-in{padding:18px var(--gutter) 40px;display:grid;gap:24px}
.mnav ul{list-style:none;margin:6px 0 0;padding:0}
.mnav section>ul>li>a{display:block;padding:12px 0;border-bottom:1px solid var(--hair);color:var(--gb-text);text-decoration:none;font-family:var(--gb-font-display);font-size:19px}
.mnav-end{display:grid;gap:10px;padding-top:6px}
.mnav-end>a:not(.btn){text-align:center;padding:10px 0;color:var(--gb-text);text-decoration:none}
.mnav-end .btn{justify-content:center;height:48px}
body.menu-open{overflow:hidden}
@media (max-width:860px){.mega{display:none}}
@media (min-width:861px){.mnav{display:none!important}}

/* GQC 2026-10-23 */
@media (max-width:560px){.plans{grid-template-columns:1fr}}                       /* GQC-15: one plan per row on phones */
[id]{scroll-margin-top:96px}                                                     /* GQC-30: anchors clear the sticky header */
.ft-cols a{min-height:44px;display:flex;align-items:center;line-height:1.4}      /* GQC-30: footer tap targets */
@media (min-width:861px){.ft-cols a{min-height:0;display:block;line-height:2.15}}
#main:focus{outline:none}
.tabs2 a b{display:flex;align-items:center;gap:6px}                                 /* GQC-03 follow-up: the business links say they go somewhere */
.tabs2 a .ico{width:14px;height:14px;flex:none;opacity:.55;transition:transform var(--gb-duration-quick),opacity var(--gb-duration-quick)}
.tabs2 a:hover .ico,.tabs2 a:focus-visible .ico{opacity:.9;transform:translateX(-3px)}
[dir=ltr] .tabs2 a:hover .ico,[dir=ltr] .tabs2 a:focus-visible .ico{transform:translateX(3px)}
@media (min-width:861px){[dir=ltr] .proof .pt p{max-width:38ch}}                 /* GQC-24: the EN caption stays in the text column */
[dir=rtl] .go-build input:placeholder-shown{direction:rtl}                     /* dir=auto reads an empty field as LTR; the Arabic placeholder must start at the right */
.skip{position:absolute;inset-inline-start:16px;top:-60px;z-index:calc(var(--gb-z-widget) + 1);padding:10px 16px;border-radius:var(--gb-radius-sm);background:var(--gb-color-night);color:#fff;text-decoration:none;font-size:var(--gb-type-ui-size)}  /* GQC-08 */
.skip:focus{top:12px}
.motion-t{font:inherit;font-size:var(--gb-type-caption-size);color:var(--gb-text-muted);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}  /* GQC-07 */
.motion-t:hover{color:var(--gb-text)}
html.motion-off *,html.motion-off *::before,html.motion-off *::after{animation-play-state:paused!important}
.plan small{display:block;margin-top:2px;font-size:var(--gb-type-caption-size);color:var(--gb-text-muted)}   /* GQC-21: audience under the plan name */
.plan.dark small{color:var(--gb-color-night-muted)}
[dir=rtl] .pn .num,[dir=rtl] .bfn > span,[dir=rtl] .figs3 b{direction:rtl;unicode-bidi:isolate}   /* GQC-31: «1.65 مليون» reads number first */
@media (max-width:860px){[dir=rtl] .bfn{font-size:60px}}                         /* «1.65 مليون» is wider than «1.65M»: it fits a 390px screen */
@media (max-width:860px){.cta2{flex-wrap:wrap}}                                  /* the EN «set it up for you» button no longer pushes the page 2px wide */
/* GQC-05 pricing: names as headings, the price at display size, a monthly/yearly switch, one CTA per plan, the FAQ */
.bill{display:inline-flex;gap:4px;padding:4px;margin-top:28px;border:1px solid var(--gb-border);border-radius:var(--gb-radius-pill);background:rgb(var(--gb-color-white-rgb) / .7)}
.bill button{font:inherit;font-size:var(--gb-type-ui-size);padding:8px 18px;border:0;border-radius:var(--gb-radius-pill);background:none;color:var(--gb-text-muted);cursor:pointer}
.bill button[aria-pressed=true]{background:var(--gb-color-ink);color:var(--gb-color-white)}
.bill button:focus-visible{outline:2px solid var(--gb-focus);outline-offset:2px}
.plans-p{margin-top:24px}
.plans-p .plan{display:flex;flex-direction:column}
.plans-p .plan h3{margin:0;font-family:var(--gb-font-display);font-weight:var(--gb-weight-semibold);font-size:19px}
.plans-p .plan .pp{margin:18px 0 0;display:flex;align-items:baseline;gap:8px;color:var(--gb-text)}
.plans-p .plan .amt{font-family:var(--gb-font-display);font-weight:var(--gb-weight-light);font-size:44px;line-height:1}
.plans-p .plan .per{font-size:var(--gb-type-caption-size);color:var(--gb-text-muted)}
.plans-p .plan .btn{margin-top:18px;justify-content:center;height:44px}
.plans-p .plan ul{margin-top:20px}
.go-c{justify-content:center;margin-top:22px}
.faq-l{max-width:820px;margin-top:28px;border-top:1px solid var(--gb-border)}
.faq details{border-bottom:1px solid var(--gb-border)}
.faq summary{cursor:pointer;list-style:none;padding:20px 0;font-family:var(--gb-font-display);font-weight:var(--gb-weight-semibold);font-size:18px;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gb-text-muted);font-weight:var(--gb-weight-light)}
.faq details[open] summary::after{content:"–"}
.faq summary:focus-visible{outline:2px solid var(--gb-focus);outline-offset:4px}
.faq details p{margin:0 0 20px;max-width:680px;color:var(--gb-text-muted);line-height:1.8}
.ft-bot a,.ft-bot .motion-t{display:inline-flex;align-items:center;min-height:44px}            /* GQC-30: phone tap targets in the bottom row */
@media (min-width:861px){.ft-bot a,.ft-bot .motion-t{min-height:0}}
@media (max-width:860px){.foot{padding-bottom:calc(56px + 16px + 32px)}}                     /* GQC-34: the ask launcher never covers the last footer row */
.plans-p .plan{position:relative}
.plans-p .plan > .eyebrow{position:absolute;inset-block-start:22px;inset-inline-end:22px;margin:0}      /* «الأكثر شعبية» as a corner label, so every price lines up */
.plans-p .plan small{min-height:1.5em}
/* hotfix 2026-10-23 (owner: "serious responsive issue", then "is this an acceptable look?"):
   below 1360px the side-by-side hero can't hold the approved composition (660px arch, 329px card), so the
   hero stacks like the phone layout: copy centred on top, the art full width below with the composition at
   its approved size. From 1360px the side-by-side hero is unchanged, with the copy kept to its half. */
@media (min-width:861px) and (max-width:1359px){
  .hero{text-align:center;min-height:0;padding-bottom:0}
  .hero > h1,.hero > .sub,.hero > .go-build,.hero > .go-alt,.hero > .proof{margin-inline:auto}
  .hero > h1{max-width:16ch}
  .hero > .sub{max-width:46ch}
  .hero > .go-build{max-width:560px}
  .hero > .go-alt{justify-content:center}
  .hero > .proof{flex-direction:column;gap:12px;text-align:center}
  .hero .stage{position:relative;height:720px;margin:56px calc(var(--pad) * -1) 0;overflow:hidden;background:#ECEEFF url("art/hero.webp") 50% 100% / cover no-repeat}
  .hero .stage::before{display:none}
  .hero .stage{text-align:start}
  .hero .stage .anchor,[dir=ltr] .hero .stage .anchor{left:50%;right:auto;top:14px;width:660px;height:640px;transform:translateX(-50%)}
  .hero .stage .win,[dir=ltr] .hero .stage .win{left:50%;right:auto;top:158px;bottom:0;width:329px;transform:translateX(-50%)}
}
@media (min-width:1360px){
  .hero > h1,.hero > .sub,.hero > .go-build,.hero > .go-alt,.hero > .proof{max-width:calc(50vw - var(--pad) - 40px)}
  .hero > .proof .pt p{max-width:min(38ch,calc(50vw - var(--pad) - 300px))}
}
/* header: links never wrap; tighter below 1280px; 861–1023px drops the header's «Talk to sales» (the hero has it) */
@media (min-width:861px){.hdr .end a,.nav > a{white-space:nowrap}}   /* R-301 (MM D-261026, GQC P2): 861–1099px the header shows the language link instead of «Talk to sales» (the hero and footer carry sales) */
@media (min-width:1024px) and (max-width:1099px){.hdr .end a[href*="/contact"],.hdr .sep{display:none}}
@media (min-width:861px) and (max-width:1279px){.hdr{gap:18px}.nav{gap:14px;font-size:14.5px}}
@media (min-width:861px) and (max-width:1023px){
  .hdr .end a[href*="/contact"],.hdr .sep{display:none}
  .nav{gap:10px;font-size:14px}.hdr{gap:12px}.hdr .end{gap:14px}   /* R-301: room for the language link at 861px */
}
/* pricing cards never overflow: shrink-safe columns, two per row until 1200px (owner screenshot 2026-10-23) */
.plans-p{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (min-width:561px) and (max-width:1199px){.plans-p{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.plans-p{grid-template-columns:1fr}}
.bill .save{display:inline-block;margin-inline-start:6px;padding:2px 8px;border-radius:var(--gb-radius-pill);background:var(--gb-color-green);color:var(--gb-color-ink);font-size:12px;font-weight:var(--gb-weight-semibold);line-height:1.5}   /* MM D-261023-67: the yearly saving, true per plan (≈20%) */
@media (min-width:861px){.ctrl-g li.wide{grid-column:1/-1;flex-direction:row;align-items:center;gap:18px}.ctrl-g li.wide .ci{margin:0}.ctrl-g li.wide b{min-width:120px}}   /* the SLA closes the control grid */
.s-h .cs-logo{display:block;height:44px;width:auto;margin-bottom:22px}   /* a customer story leads with the customer's own logo */
/* ---------- GQC round 2 (2026-10-24) ---------- */
/* the phone menu opens under the live header (site.js sets --mnav-top), so it never covers its own burger */
.mnav{inset:auto 0 0;top:var(--mnav-top,100px)}
/* the ask pill fits its box, sits at the reading end, and steps aside near the close and the footer */
.widget{right:auto;inset-inline-end:24px;grid-template-columns:minmax(0,1fr)}
.widget .wf{min-width:0;background:rgb(var(--gb-color-white-rgb) / .96)}
@media (max-width:860px){.widget{inset-inline-end:16px}}
.widget.near-end{opacity:0!important;transform:translateY(12px)!important;pointer-events:none}
/* motion off: everything shows its end state, including the header mark */
html.motion-off :is(.card,.win-sh,.m,.hand,.file){opacity:1;transform:none;animation:none}
html.motion-off .typing{display:none}
html.motion-off .lg-arch{stroke-dashoffset:0;animation:none}
html.motion-off :is(.lg-l,.lg-r,.lg-b){transform:none;opacity:1;animation:none}
/* the close shows the still arch wherever the 3D doesn't run */
.close .anchor .still-arch{width:100%}
/* headings balance, paragraphs wrap well */
:is(h1,h2,h3,.pindex b,.plan b,.plans-p h3,.faq summary){text-wrap:balance}
:is(p,li,.pts span,.ctrl-g span,.pindex span){text-wrap:pretty}
.nw{white-space:nowrap}
/* the primary CTA's arrow takes the button's own colour */
.go-build button .ico{color:currentColor;margin:0;width:16px;height:16px}
/* touch targets ≥44px on touch screens */
@media (pointer:coarse){.end .btn{height:44px}.brand{min-height:44px}:is(.go-alt a,.s-h .more,.pts a){display:inline-flex;align-items:center;min-height:44px}}
/* keyboard focus is visible on the build field and the ask pill */
.go-build:focus-within,.widget .wf:focus-within{outline:2px solid var(--gb-focus);outline-offset:2px}
/* the shared plan strip (GQC r2, MM D-261024-5): the four self-serve plans as on /pricing, each card opens
   /pricing, Standard is the spotlit card, Enterprise is one line under the strip */
.plans-strip .plan{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:inherit;transition:transform var(--gb-duration-quick),box-shadow var(--gb-duration-quick)}
.plans-strip .plan:hover,.plans-strip .plan:focus-visible{transform:translateY(-2px);box-shadow:0 14px 30px -22px rgb(var(--gb-color-night-rgb) / .45)}
.plans-strip .plan.dark{color:#fff}
.plans-strip .plan .eyebrow{margin:0 0 2px;color:var(--gb-action-on-dark)}
@media (min-width:561px) and (max-width:1199px){.plans-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
.scope{display:block;margin-top:4px;font-size:var(--gb-type-caption-size);font-weight:var(--gb-weight-semibold);color:var(--gb-text)}   /* the plan a gated feature needs (MM D-261024-7), never on a front door */
.s-h .scope{margin-top:10px}
/* ---- Guide template (GQC r2 step 2, 2026-10-24): one column that carries a procedure. The app renders it
   into guide-shell's slot from the guide data; the chrome (header, footer, ask pill) is the site's own. */
.gd{max-width:760px;margin:0 auto;padding:72px var(--gutter) 112px;box-sizing:content-box}
.gd-crumb{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px;padding:0;list-style:none;font-size:var(--gb-type-caption-size);color:var(--gb-text-muted)}
.gd-crumb li+li::before{content:"/";margin-inline-end:8px;color:var(--gb-border-strong)}
.gd-crumb a{color:inherit;text-decoration:none}.gd-crumb a:hover{color:var(--gb-text)}
.gd-logo{display:block;width:44px;height:44px;margin:0 0 22px;padding:9px;border-radius:var(--gb-radius-md);background:var(--gb-color-white);border:1px solid var(--hair);box-sizing:border-box}
.gd-logo img{display:block;width:100%;height:100%;object-fit:contain}
.gd h1{font-size:var(--gb-type-display-3-size);line-height:var(--gb-type-display-3-lh);margin:0;max-width:20ch;text-wrap:balance}
.gd-sub{font-size:var(--gb-type-lead-size);line-height:1.7;color:var(--gb-text-muted);margin:18px 0 0;max-width:56ch;text-wrap:pretty}
.gd-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:28px}
.gd-meta .btn{height:44px;font-size:15px}
.gd-count{font-size:var(--gb-type-body-sm-size);color:var(--gb-text-muted)}
.gd-need{margin:56px 0 0;padding:24px 28px;border:1px solid var(--hair);border-radius:var(--gb-radius-lg);background:var(--gb-color-white)}
.gd-need h2,.gd-video h2{font-family:var(--gb-font-display);font-weight:var(--gb-weight-semibold);font-size:var(--gb-type-heading-3-size);line-height:var(--gb-type-heading-3-lh);margin:0 0 14px}
.gd-need ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.gd-need li{position:relative;padding-inline-start:20px;line-height:1.65;text-wrap:pretty}
.gd-need li::before{content:"";position:absolute;inset-inline-start:2px;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--gb-text-brand)}
.gd-need li.gd-plan{padding-top:12px;border-top:1px solid var(--hair);margin-top:4px}.gd-need li.gd-plan::before{top:calc(12px + .72em)}
.gd-video{margin:40px 0 0}.gd-video p{margin:-6px 0 14px;color:var(--gb-text-muted)}
.gd-video .frame{aspect-ratio:16/9;border-radius:var(--gb-radius-lg);overflow:hidden;background:var(--gb-color-night)}.gd-video iframe{width:100%;height:100%;border:0}
.gd-steps{counter-reset:gd;margin:72px 0 0;padding:0;list-style:none}
.gd-part{margin:72px 0 0;padding:0 0 12px;border-bottom:1px solid var(--hair)}
.gd-part:first-child{margin-top:0}
.gd-part p{margin:0;font-size:var(--gb-type-caption-size);font-weight:var(--gb-weight-semibold);color:var(--gb-text-brand)}
.gd-part a{display:inline-block;margin-top:6px;font-size:var(--gb-type-body-sm-size);color:var(--gb-text)}
.gd-step{counter-increment:gd;position:relative;margin:48px 0 0;padding-inline-start:56px;scroll-margin-top:96px}
.gd-step::before{content:counter(gd);position:absolute;inset-inline-start:0;top:0;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--gb-color-night);color:#fff;font:var(--gb-weight-semibold) 15px/1 var(--gb-font-display);font-variant-numeric:lining-nums}
.gd-step h3{font-family:var(--gb-font-display);font-weight:var(--gb-weight-semibold);font-size:var(--gb-type-heading-3-size);line-height:var(--gb-type-heading-3-lh);margin:5px 0 0;text-wrap:balance}
.gd-where{display:inline-block;margin:0 0 6px;font-size:var(--gb-type-caption-size);color:var(--gb-text-muted)}
.gd-step > p{margin:12px 0 0;font-size:var(--gb-type-body-size);line-height:1.75;color:var(--gb-text);max-width:68ch;text-wrap:pretty}
.gd-note{display:flex;gap:12px;margin:18px 0 0;padding:14px 16px;border-radius:var(--gb-radius-md);background:rgb(var(--gb-color-indigo-mist-rgb) / .7);font-size:var(--gb-type-body-sm-size);line-height:1.65}
.gd-note.warning{background:#FFF6E5}.gd-note.tip{background:rgb(var(--gb-color-green-mist-rgb) / .8)}
.gd-note svg{flex:none;width:18px;height:18px;margin-top:2px;fill:none;stroke:currentColor;stroke-width:1.6}
.gd-copy{margin:18px 0 0;border:1px solid var(--gb-border);border-radius:var(--gb-radius-md);background:var(--gb-color-white);overflow:hidden}
.gd-copy figcaption{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 8px 8px 16px;border-bottom:1px solid var(--hair);font-size:var(--gb-type-body-sm-size);font-weight:var(--gb-weight-semibold)}
[dir=rtl] .gd-copy figcaption{padding:8px 16px 8px 8px}
.gd-copy figcaption .btn{height:44px;min-width:88px;justify-content:center;font-size:14px}
.gd-copy pre{margin:0;padding:16px;font:13px/1.65 var(--gb-font-mono);white-space:pre-wrap;word-break:break-word;color:var(--gb-text)}
.gd-copy.shut pre{max-height:220px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.gd-copy.open pre{max-height:440px;overflow:auto}
.gd-copy .more{display:block;width:100%;min-height:44px;border:0;border-top:1px solid var(--hair);background:none;font:inherit;font-size:var(--gb-type-body-sm-size);color:var(--gb-text);cursor:pointer}
.gd-acts{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 0}.gd-acts .btn{height:44px;font-size:15px}
.gd-shot{margin:24px 0 0}
.gd-shot a{display:block;width:fit-content;max-width:100%;border-radius:var(--gb-radius-md);overflow:hidden;border:1px solid var(--hair);background:var(--gb-color-white);box-shadow:var(--gb-shadow-velvet-sm)}
.gd-shot img{display:block;max-width:100%;height:auto}
.gd-shot.pop img{max-width:440px;width:100%}
.gd-shot.phone img{max-height:560px;width:auto}
.gd-end{margin:96px 0 0;padding:40px;border-radius:var(--gb-radius-xl);background:var(--gb-color-night);color:#fff}
.gd-end h2{color:#fff;font-size:var(--gb-type-heading-2-size);line-height:var(--gb-type-heading-2-lh);margin:0;text-wrap:balance}
.gd-end p{margin:12px 0 0;color:var(--gb-color-night-muted);max-width:52ch;line-height:1.7}
.gd-end .btn.solid{margin-top:28px;height:48px;font-size:16px;background:var(--gb-action-on-dark);color:var(--gb-action-on-dark-fg)!important}
.gd-end .btn.solid:hover{background:var(--gb-action-on-dark-hover)}
.gd-res{display:flex;flex-wrap:wrap;gap:8px 20px;margin:24px 0 0;padding:0;list-style:none;font-size:var(--gb-type-body-sm-size)}.gd-res a{color:#fff}
.gd-next{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;margin:32px 0 0;font-size:var(--gb-type-body-sm-size);color:var(--gb-text-muted)}
.gd-next a{color:var(--gb-text);font-weight:var(--gb-weight-semibold)}
@media (max-width:860px){.gd{padding:40px var(--gutter) 80px}.gd h1{font-size:var(--gb-type-display-4-size);line-height:var(--gb-type-display-4-lh)}
 .gd-need{padding:20px}.gd-step{padding-inline-start:0}.gd-step::before{position:static;display:inline-grid;margin-bottom:12px}
 .gd-steps{margin-top:56px}.gd-end{padding:28px 22px}.gd-meta .btn{flex:1;justify-content:center}}
/* ---- Tool template (GQC r2 step 2): a /tools/<slug> page drawn by the app into app-shell's slot. The tool works
   right under the headline (inputs | result), then how to use it, the demo band, the FAQ and related tools. */
.tl{max-width:1040px;margin:0 auto;padding:72px var(--gutter) 112px;box-sizing:content-box}
.tl-head{max-width:760px}
.tl-head h1{font-size:var(--gb-type-display-3-size);line-height:var(--gb-type-display-3-lh);margin:0;text-wrap:balance}
.tl-head .gd-sub{margin-top:18px}
.tl-tool{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin:48px 0 0;border:1px solid var(--hair);border-radius:var(--gb-radius-lg);background:var(--gb-color-white);overflow:hidden}
.tl-in,.tl-out{padding:28px}
.tl-out{border-inline-start:1px solid var(--hair);background:rgb(var(--gb-color-sand-rgb) / .5);display:flex;flex-direction:column}
.tl-tool h2{font-family:var(--gb-font-display);font-weight:var(--gb-weight-semibold);font-size:var(--gb-type-heading-3-size);line-height:var(--gb-type-heading-3-lh);margin:0 0 20px}
.tl-f{display:grid;gap:8px;margin:0 0 18px}
.tl-f label{font-size:var(--gb-type-body-sm-size);font-weight:var(--gb-weight-semibold)}
.tl-f small{font-size:var(--gb-type-caption-size);color:var(--gb-text-muted)}
.tl-f input,.tl-f select,.tl-f textarea{width:100%;box-sizing:border-box;min-height:46px;padding:10px 14px;border:1px solid var(--gb-border-control);border-radius:var(--gb-radius-sm);background:var(--gb-color-white);font:inherit;font-size:16px;color:var(--gb-text)}
.tl-f textarea{min-height:96px;resize:vertical;line-height:1.6}
.tl-f :is(input,select,textarea):focus-visible{outline:2px solid var(--gb-focus);outline-offset:1px;border-color:transparent}
.tl-f .link{justify-self:start;min-height:44px;padding:0;border:0;background:none;font:inherit;font-size:var(--gb-type-body-sm-size);color:var(--gb-text-brand);cursor:pointer}
.tl-go{width:100%;justify-content:center;height:48px!important;font-size:16px!important;border:0;cursor:pointer}
.tl-go:disabled{opacity:.45;cursor:not-allowed}
.tl-empty{margin:auto 0;padding:40px 0;text-align:center;color:var(--gb-text-muted);line-height:1.7}
.tl-qr{display:grid;justify-items:center;gap:14px;padding:20px;border-radius:var(--gb-radius-md);background:var(--gb-color-white);border:1px solid var(--hair)}
.tl-qr img{display:block;width:200px;height:200px;image-rendering:pixelated}
.tl-url{display:flex;gap:8px;margin:16px 0 0}
.tl-url input{flex:1;min-width:0;min-height:46px;padding:10px 12px;border:1px solid var(--gb-border-control);border-radius:var(--gb-radius-sm);background:var(--gb-color-white);font:14px/1.4 var(--gb-font-mono);color:var(--gb-text)}
.tl-url .btn,.tl-acts .btn,.tl-qr .btn{height:46px;justify-content:center}
.tl-acts{display:flex;gap:8px;margin:12px 0 0}.tl-acts .btn{flex:1}
.tl-sec{margin:96px 0 0;max-width:760px}
.tl-sec > h2{font-size:var(--gb-type-heading-2-size);line-height:var(--gb-type-heading-2-lh);margin:0 0 24px}
.tl-how{counter-reset:tl;margin:0;padding:0;list-style:none;display:grid;gap:22px}
.tl-how li{counter-increment:tl;position:relative;padding-inline-start:52px}
.tl-how li::before{content:counter(tl);position:absolute;inset-inline-start:0;top:0;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--gb-color-night);color:#fff;font:var(--gb-weight-semibold) 14px/1 var(--gb-font-display)}
.tl-how b{display:block;font-family:var(--gb-font-display);font-weight:var(--gb-weight-semibold);font-size:var(--gb-type-heading-3-size);line-height:1.4}
.tl-how p{margin:6px 0 0;line-height:1.7;max-width:62ch}
.tl-demo{max-width:none}
.tl-demo .gd-end{margin:0}
.tl-demo .gd-end .btn.solid{gap:10px}
.tl-voice{margin:16px 0 0;color:var(--gb-color-night-muted);font-size:var(--gb-type-body-sm-size)}.tl-voice a{color:#fff}
.tl-rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.tl-rel a{display:flex;align-items:center;min-height:64px;padding:16px 18px;border:1px solid var(--hair);border-radius:var(--gb-radius-md);background:var(--gb-color-white);color:var(--gb-text);text-decoration:none;font-weight:var(--gb-weight-semibold);line-height:1.5;transition:border-color var(--gb-duration-quick)}
.tl-rel a:hover{border-color:var(--gb-border-strong)}
@media (max-width:860px){.tl{padding:40px var(--gutter) 80px}.tl-head h1{font-size:var(--gb-type-display-4-size);line-height:var(--gb-type-display-4-lh)}
 .tl-tool{grid-template-columns:1fr}.tl-out{border-inline-start:0;border-top:1px solid var(--hair)}.tl-in,.tl-out{padding:20px}
 .tl-sec{margin-top:72px}.tl-rel{grid-template-columns:1fr}}
/* GQC r2 re-audit follow-ups (2026-10-24) */
.close .anchor{position:relative}            /* the still arch centres on its own anchor, not on the whole close (phones: it sat over the H2) */
.go-build input{min-height:44px;box-sizing:border-box}
.go-alt a{white-space:nowrap}                 /* «كلّم المبيعات» / «شوف الأسعار والباقات» never break mid-link; the row wraps between them */
.go-alt{flex-wrap:wrap;row-gap:8px}
/* ---- GQC r2 step-2 re-audit fixes (2026-10-24) */
/* Alexandria's Arabic `locl` swaps the final ي for a dotless (Egyptian) form under <html lang="ar">: «في» drew «فى». */
:root{font-feature-settings:"locl" 0}
/* guide: the step disc and its «على جهازك» tag sit on one line on phones, with room between them */
@media (max-width:860px){.gd-step::before{vertical-align:middle;margin-inline-end:12px;margin-bottom:0}.gd-where{display:inline-block;vertical-align:middle;margin:0}.gd-step h3{margin-top:12px}}
/* guide video: a calm poster (night + play mark + the video's title) until the lazy player paints */
.gd-video .frame{position:relative;background:var(--gb-color-night) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='31' fill='none' stroke='%23fff' stroke-opacity='.5' stroke-width='2'/%3E%3Cpath d='M26 21l18 11-18 11z' fill='%23fff'/%3E%3C/svg%3E") center/64px no-repeat}
.gd-video .frame iframe{position:relative;z-index:1}
/* tool template: the main button speaks the site's type; disabled says why and stays legible */
.tl-go{font-family:inherit;font-weight:var(--gb-weight-semibold)}
.tl-go:disabled{opacity:1;background:var(--gb-color-stone);color:var(--gb-text)!important}
.tl-need{margin:10px 0 0;font-size:var(--gb-type-body-sm-size);color:var(--gb-text-muted);text-align:center}
.tl-sec > h2,.tl-tool h2{font-family:var(--gb-font-display);font-weight:var(--gb-weight-light)}
.tl-sec > h2{font-size:var(--gb-type-display-4-size);line-height:var(--gb-type-display-4-lh)}

/* header option A (owner 2026-10-25): the agent menu's first item carries a «جديد» chip beside its text */
.mega .mnew,.mnav .mnew{display:inline-flex;align-items:center;gap:10px}
.mega li:has(.mnew){grid-column:1/-1}
/* tool template: generated messages (auto reply first, 2026-10-25): each variant is a WhatsApp-style bubble, its count, its actions */
.tl-tag{display:inline-flex;align-items:center;margin-inline-start:10px;padding:2px 10px;border-radius:var(--gb-radius-pill);font-family:var(--gb-font-text);font-size:12px;line-height:20px;font-weight:var(--gb-weight-semibold);background:rgb(var(--gb-color-indigo-mist-rgb) / .95);color:var(--gb-text-brand);vertical-align:middle}
.tl-msgs{display:grid;gap:22px;margin:0;padding:0;list-style:none}
.tl-msg > p[dir]{margin:0;padding:14px 16px;border-radius:var(--gb-radius-md);border-start-start-radius:4px;background:rgb(var(--gb-color-green-mist-rgb) / .8);white-space:pre-line;line-height:1.75;font-size:15px;color:var(--gb-text)}
.tl-meta{display:flex;justify-content:space-between;gap:12px;margin:8px 2px 0;font-size:var(--gb-type-caption-size);color:var(--gb-text-muted)}
.tl-meta .over{color:var(--gb-text);font-weight:var(--gb-weight-semibold)}
.tl-msg .tl-acts{margin-top:10px}
.tl-msg .tl-acts .btn{height:40px}
.tl-share{margin-top:24px}
.tl-status{min-height:1.5em;margin:10px 0 0;font-size:var(--gb-type-body-sm-size);color:var(--gb-text-muted);text-align:center}

/* GQC 10-25: the phone cut (3:4, the -m file) only below 768px (BAND-10); the phone drawer clears the consent banner (HDR-03); the current page is marked in the nav (HDR-06) */
@media (max-width:767px){.bandx.vid{aspect-ratio:3/4}}
.mnav{padding-bottom:var(--consent-h,0px)}
.nav a[aria-current=page],.mnav a[aria-current=page]{font-weight:var(--gb-weight-semibold);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:8px}