/* NextiqumAI design system, Operancia inspired editorial style with neon identity */
:root{
  --cyan:#E8843F;--pink:#DE6A1E;--purple:#8A8850;
  --grad:linear-gradient(115deg,#F0A85C 0%,#DE6A1E 50%,#B5561A 100%);
  --grad-soft:linear-gradient(115deg,rgba(240, 168, 92,.15),rgba(222, 106, 30,.13),rgba(181, 86, 26,.15));
  --ink:#17170F;--ink-2:#1C1C12;
  --r-lg:30px;--r-md:20px;--r-sm:14px;--maxw:1240px;
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --display:'Space Grotesk','Inter',sans-serif;
  --mono:'Space Grotesk',monospace;
  /* BRAND TOKENS (September 2026). Three colours, three jobs:
     orange = interaction (CTAs, live indicators, active states); cream = canvas and text panels;
     olive = structure (headers, section labels, navigation borders, containers). */
  --orange:#DE6A1E;--orange-2:#E8843F;--orange-deep:#B5561A;
  --cream:#F5F0E5;--cream-2:#FDFBF7;--cream-soft:#F5F2EB;
  --olive:#8A8850;--olive-ink:#3B4232;--olive-deep:#2A2A18;--olive-mist:#8A9A86;
}
html[data-theme="light"]{
  --bg:#F4EFE4;--bg2:#EDE7D8;--panel:#FCFAF4;--panel-2:#F6F1E7;
  --text:#2A2820;--muted:#6B6851;--muted-2:#86846B;--line:rgba(23, 23, 15,.08);
  --nav-bg:rgba(252,250,244,.88);--shadow:0 18px 50px rgba(23, 23, 15,.08);
  --glow:0 14px 40px rgba(232, 132, 63,.16),0 0 30px rgba(138, 136, 80,.08);--card-on-ink:#FCFAF4;
}
/* DARK MODE, re-tuned for long reading. No pure black anywhere: the canvas is an olive-tinted
   charcoal, panels lift by a few points of the same hue, text is cream (not white, which glares
   at night), and orange is reserved for the things you act on. Measured contrast: cream on
   canvas 13:1, muted on panel 7:1, both past AAA for body text. Shadows are tinted, not black. */
html[data-theme="dark"]{
  --bg:#1E2019;--bg2:#242720;--panel:#2A2D24;--panel-2:#32362A;
  --text:#EDE8DA;--muted:#B7B497;--muted-2:#9E9C82;--line:rgba(184, 182, 150,.16);
  --ink:#171912;--ink-2:#1B1D15;
  --nav-bg:rgba(30,32,25,.78);--shadow:0 24px 60px rgba(14,16,11,.5);
  --glow:0 18px 46px rgba(14,16,11,.42),0 0 40px rgba(232, 132, 63,.12),0 0 30px rgba(138, 136, 80,.10);--card-on-ink:#242720;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden;background:var(--bg)}
@supports (overflow-x:clip){html,body{overflow-x:clip}}
img,svg,video,canvas{max-width:100%}
a,p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}
/* content is not selectable, except real form fields */
body{-webkit-user-select:none;-moz-user-select:none;user-select:none}
input,textarea,select,a[href^="mailto:"],a[href^="tel:"]{-webkit-user-select:text;-moz-user-select:text;user-select:text;cursor:text}
.nx-msg,.nx-msg *{-webkit-user-select:text;-moz-user-select:text;user-select:text;cursor:text}
.nx-msg a{cursor:pointer}
a,button,.btn,[role="button"],input[type="button"],input[type="submit"],input[type="reset"],input[type="file"],select,summary,label[for],.ag,.recbtn,.ql,.tpBuy,[onclick],[data-sub],.hi .open,.ren,.del,.bcopy{cursor:pointer}
::selection{background:#DE6A1E;color:#fff}
::-moz-selection{background:#DE6A1E;color:#fff}
/* innovative gradient scrollbar */
::-webkit-scrollbar{width:13px;height:13px}
::-webkit-scrollbar-track{background:var(--bg2)}
::-webkit-scrollbar-thumb{background:var(--grad);border-radius:100px;border:3px solid var(--bg2)}
::-webkit-scrollbar-thumb:hover{border-width:2px}
@supports not selector(::-webkit-scrollbar){html{scrollbar-width:thin;scrollbar-color:#DE6A1E var(--bg2)}}
/* overflow-x on BODY was removed deliberately - do not put it back.
   overflow-x:hidden on body makes body a scroll container, and every position:sticky descendant
   then pins to body's box instead of the viewport. Since body itself never scrolls, sticky simply
   never engages. It silently broke the .st step cards on /about and the agent handoff on /.
   Horizontal overflow is still contained: html carries overflow-x:hidden below, and browsers that
   support it get overflow-x:clip on both, which clips WITHOUT creating a scroll container. */
body{background:var(--bg);color:var(--text);font-family:var(--font);line-height:1.65;-webkit-font-smoothing:antialiased}body.nx-ready{transition:background .4s,color .4s}
h1,h2,h3,h4,h5,h6{font-family:var(--display);line-height:1.08;font-weight:600;letter-spacing:-.02em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.gradient-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--display);font-weight:600;font-size:15px;padding:15px 28px;border-radius:100px;cursor:pointer;border:1px solid transparent;transition:transform .25s,box-shadow .25s,background .25s,border-color .25s}
.btn-grad{background:var(--grad);color:#fff;box-shadow:0 10px 26px rgba(232, 132, 63,.22),0 0 22px rgba(232, 132, 63,.20)}
.btn-grad:hover{transform:translateY(-3px);box-shadow:0 18px 44px rgba(232, 132, 63,.4)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(23, 23, 15,.3)}
[data-theme="light"] .btn-ink{background:#6C6A34}
[data-theme="light"] .btn-ink:hover{background:#565530;box-shadow:0 16px 36px rgba(108, 106, 52,.32)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--text);transform:translateY(-3px)}

/* progress + status */
#scrollBar{position:fixed;top:0;left:0;height:3px;width:0;background:var(--grad);z-index:90}
.status-tab{position:fixed;top:0;left:50%;transform:translateX(-50%);z-index:70;background:var(--ink);color:#fff;font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:9px 26px 11px;border-radius:0 0 18px 18px;display:flex;align-items:center;gap:9px;white-space:nowrap;transition:opacity .3s,transform .3s}
.status-tab.hide{opacity:0;transform:translate(-50%,-110%)}
.status-tab .dot{width:8px;height:8px;border-radius:50%;background:#4FB87A;box-shadow:0 0 10px #4FB87A;animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{50%{opacity:.4}}
@media(max-width:720px){.status-tab{display:none}}

/* corner nav chips, status banner stays readable in the centre */
.nav{position:fixed;top:14px;left:0;right:0;z-index:80;pointer-events:none}
.nav-wrap{width:100%;padding:0 18px;display:flex;justify-content:space-between;align-items:center}
.brand-chip,.nav-chip{pointer-events:auto;background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}
.brand-chip{padding:8px 16px;display:flex;align-items:center}
.brand-chip .nx-logo-l{display:none}[data-theme="light"] .brand-chip .nx-logo-d{display:none}[data-theme="light"] .brand-chip .nx-logo-l{display:inline-block}
.brand-chip img{height:40px;width:auto}.brand-chip .brand-mark{display:none;height:36px;width:36px}
.nav-chip{padding:8px;display:flex;align-items:center;gap:8px}
.nav-chip .btn{padding:12px 24px;font-size:14.5px;white-space:nowrap}
#nxHeaderAuth{white-space:nowrap}
/* refined header Sign-in: gradient-bordered pill (brand), only in signed-out state */
#nxHeaderAuth.nx-tip{background:var(--panel);color:var(--text);border:1.5px solid transparent;background-image:linear-gradient(var(--panel),var(--panel)),linear-gradient(120deg,#E8843F,#DE6A1E,#8A8850);background-origin:border-box;background-clip:padding-box,border-box;font-weight:600;box-shadow:none;transition:transform .2s,box-shadow .2s}
#nxHeaderAuth.nx-tip:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(138, 136, 80,.22)}
.burger{width:44px;height:44px;border-radius:13px;border:1px solid var(--line);background:transparent;color:var(--text);cursor:pointer;display:grid;place-items:center;font-size:20px;transition:transform .25s,border-color .25s}
.burger:hover{border-color:var(--text);transform:rotate(90deg)}
@media(max-width:560px){
  /* One family, not two strangers: on phones the two header chips had different heights,
     paddings and contents scale - reported 19 Aug 2026. Same fixed height, same radius,
     same horizontal padding; the brand collapses to its 34px symbol. */
  .brand-chip,.nav-chip{height:52px;border-radius:16px;display:flex;align-items:center}
  .brand-chip{padding:0 13px}
  .nav-chip{padding:0 8px;gap:6px}
  .nav-chip .btn{padding:9px 14px;font-size:13px}
  .brand-chip .nx-logo-d,.brand-chip .nx-logo-l{display:none!important}
  .brand-chip .brand-mark{display:inline-block!important;height:34px;width:34px}
}

/* overlay menu */
/* clip-path:circle(0 ...) -> circle(0% ...). NOT cosmetic.
   The open state is circle(150%), a PERCENTAGE; the closed state was `0`, which parses as a
   LENGTH (0px). Interpolating length -> percentage needs calc() interpolation, and Chrome was
   leaving the computed value pinned at the start of the transition. The compositor still painted
   the finished state - the menu looked completely open - while hit-testing kept using a
   ZERO-RADIUS clip, so all 26 links were unclickable on a menu you could plainly see and read.
   Measured live: .open applied, visibility:visible, yet clip-path computed circle(0%) and every
   link lost elementFromPoint to the page behind it.
   Same unit on both ends makes the interpolation trivial. nx-2.js additionally clears clip-path
   once the reveal finishes, so the resting open state is never clipped at all. */
.menu-overlay{position:fixed;inset:0;z-index:85;background:var(--ink);color:#fff;display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:84px 8vw 26px;clip-path:circle(0% at calc(100% - 60px) 50px);transition:clip-path .6s cubic-bezier(.7,0,.2,1);visibility:hidden}
.menu-overlay.open{clip-path:circle(150% at calc(100% - 60px) 50px);visibility:visible}
.menu-overlay .close{position:absolute;top:26px;right:26px;width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:none;color:#fff;font-size:24px;cursor:pointer;transition:transform .3s;z-index:2}
.menu-overlay .close:hover{transform:rotate(90deg)}

.menu-overlay nav a{position:relative;display:block;font-family:var(--display);font-weight:600;font-size:clamp(23px,3.5vw,42px);line-height:1.28;color:#fff;opacity:.82;transition:opacity .2s,transform .3s;width:max-content}
.menu-overlay nav a::after{content:'\2192';margin-left:18px;display:inline-block;opacity:0;transform:translateX(-12px);transition:opacity .3s,transform .3s;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.menu-overlay nav a:hover{opacity:1;transform:translateX(14px)}
/* NOTE: the .menu-overlay nav rules above are LIVE, but only on member pages. nx-2.js:117 wraps
   the menu in <nav> for /members, /account and /settings; every public page instead builds
   .mm > .mm-util / .mm-cols > .mm-col > .mm-prod|.mm-link, which these selectors do not match.
   So a change here affects the signed-in menu only, and the public menu is styled by .mm-util /
   .mm-link below. Do not delete these as "unused" - check both markup paths first. */
.menu-overlay nav a:hover::after{opacity:1;transform:translateX(0)}
.menu-overlay nav a span{font-size:13px;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-family:var(--mono);margin-right:16px;vertical-align:super;opacity:.85}
.menu-overlay .m-meta{flex-shrink:0;margin:0 auto;max-width:1000px;width:100%;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);display:flex;align-items:center;gap:18px 24px;flex-wrap:wrap;color:#8F8D73;font-size:14px}
.menu-overlay .m-mail{color:#C9C6B0;display:inline-flex;align-items:center;gap:8px}
.menu-overlay .m-mail:hover{color:#fff}
.menu-overlay .m-rows{display:flex;gap:16px;flex-wrap:wrap}
.menu-overlay .m-row{display:inline-flex;align-items:center;gap:8px}
.menu-overlay .m-loc{font-size:11.5px;letter-spacing:.5px;text-transform:uppercase;color:#6F6D55}
.menu-overlay .m-ic{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;border:1px solid rgba(255,255,255,.16);color:#C9C6B0;transition:background .2s,color .2s,border-color .2s}
.menu-overlay .m-ic:hover{background:rgba(255,255,255,.08);color:#fff}
.menu-overlay .m-ic.wa:hover{color:#25d366;border-color:rgba(37,211,102,.5)}
.menu-overlay .m-social{display:inline-flex;gap:14px;font-size:18px;margin-left:auto}
.menu-overlay .m-social a{color:#C9C6B0}
.menu-overlay .m-social a:hover{color:#fff}

/* hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-start;overflow:hidden;padding:120px 0 70px}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(700px 480px at 82% 10%,rgba(232, 132, 63,.16),transparent 60%),radial-gradient(620px 460px at 8% 80%,rgba(222, 106, 30,.14),transparent 55%),radial-gradient(540px 420px at 60% 110%,rgba(138, 136, 80,.10),transparent 60%)}
#aiNet{position:absolute;inset:0;opacity:.5;pointer-events:none}
.hero::after{content:'';position:absolute;left:0;right:0;bottom:0;height:190px;background:linear-gradient(to bottom,transparent,var(--bg));z-index:1;pointer-events:none}
.hero .container{position:relative;z-index:2}
.hero-eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:13px;letter-spacing:.1em;color:var(--muted);border:1px solid var(--line);background:var(--panel);border-radius:100px;padding:8px 16px}
.hero-eyebrow b{color:transparent;background:var(--grad);-webkit-background-clip:text;background-clip:text}
.hero h1{font-size:clamp(34px,6vw,82px);font-weight:700;margin:24px 0 0;max-width:14ch}
.hero p.lead{font-size:clamp(16px,1.8vw,20px);color:var(--muted);max-width:560px;margin:28px 0 0}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:36px}
/* SAFE AREA. A fixed element pinned with a plain `bottom` sits against the LAYOUT viewport, which
   on iOS Safari and Android Chrome extends underneath the browser's own bottom toolbar and, on a
   notched phone, under the home indicator. The tiQ bubble therefore ends up tucked behind that bar
   on a real device while looking perfect in every desktop emulator - which is why this was not
   reproducible from a laptop. max() keeps the desktop spacing and only grows where the inset is
   real. */
.nx-fab{position:fixed;right:24px;bottom:max(24px,calc(env(safe-area-inset-bottom) + 14px));z-index:120;width:66px;height:66px}
.nx-fab-card{position:absolute;right:0;bottom:0;width:318px;max-width:calc(100vw - 36px);transform-origin:bottom right;background:color-mix(in srgb,var(--panel) 93%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:22px;padding:7px;box-shadow:0 22px 56px rgba(23, 23, 15,.22),0 10px 30px rgba(138, 136, 80,.14);transition:transform .46s cubic-bezier(.22,1,.36,1),opacity .3s ease}
.nx-fab-card::before{content:'';position:absolute;inset:-1px;border-radius:23px;padding:1.4px;background:linear-gradient(125deg,#E8843F,#DE6A1E,#8A8850);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.55;pointer-events:none}
.nx-fab-card .tiq-go{display:none}
.nx-fab-min{position:absolute;top:6px;right:6px;width:26px;height:26px;border:0;border-radius:50%;background:var(--panel-2);color:var(--muted);font-size:17px;line-height:1;cursor:pointer;display:grid;place-items:center;z-index:3;transition:background .2s,color .2s}
.nx-fab-min:hover{background:#DE6A1E;color:#fff}
@media(max-width:920px){.nx-hdr-dev{display:none}}
.nx-linkbtn{background:none;border:0;padding:0;font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.nx-fab.min .nx-fab-card{opacity:0;transform:scale(.16);pointer-events:none}
.tiq-row{display:flex;align-items:center;gap:12px;width:calc(100% - 34px);margin-right:34px;background:none;border:0;cursor:pointer;padding:11px 12px;border-radius:16px;text-align:left;transition:background .2s}
.tiq-row:hover{background:var(--panel-2)}
.tiq-row img{width:44px;height:44px;flex:0 0 auto}
.tiq-rtxt{display:flex;flex-direction:column;line-height:1.25;font-size:14px;font-weight:600;color:var(--text)}
.tiq-rtxt .tiq-line{white-space:nowrap}
.tiq-rtxt b{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.tiq-rtxt small{font-size:11.5px;color:var(--muted);font-weight:500}
.tiq-go{margin-left:auto;color:#DE6A1E;font-size:18px}
.tiq-div{height:1px;margin:3px 14px;background:linear-gradient(90deg,transparent,var(--line) 20%,var(--line) 80%,transparent)}
.tiq-call{padding:9px 14px 13px}
.tiq-call-h{font-size:12.5px;font-weight:600;color:var(--text);margin-bottom:10px}
.tiq-call .btn{width:100%;justify-content:center}
.tiq-call-alt{display:block;text-align:center;font-size:11.5px;color:var(--muted-2);margin-top:11px}
.tiq-call-alt a{color:var(--muted);font-weight:600}
@media(max-width:1100px){.hero{min-height:auto;align-items:flex-start;padding:108px 0 52px}}
@media(max-width:640px){.hero h1{margin-top:16px}}
.vticker{position:absolute;left:18px;top:0;bottom:0;width:30px;overflow:hidden;z-index:1;pointer-events:none;-webkit-mask-image:linear-gradient(transparent,#000 25%,#000 75%,transparent);mask-image:linear-gradient(transparent,#000 25%,#000 75%,transparent)}
.vticker .vt{display:flex;flex-direction:column;gap:34px;animation:vtY 16s linear infinite;width:max-content}
.vticker span{writing-mode:vertical-rl;font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted-2)}
@keyframes vtY{to{transform:translateY(-50%)}}
@media(max-width:1200px){.vticker{display:none}}

/* tapes */
.tapes{position:relative;height:230px;overflow:hidden;margin:30px 0}
.tape{position:absolute;left:-6%;width:112%;padding:16px 0;overflow:hidden}
.tape.t1{top:48px;transform:rotate(-3deg);background:var(--ink)}
.tape.t2{top:104px;transform:rotate(2.4deg);background:var(--grad)}
.tape-track{display:flex;width:max-content;animation:tapeX 80s linear infinite}
.tape.t2 .tape-track{animation-direction:reverse}
.tape-track span{font-family:var(--display);font-weight:700;font-size:26px;letter-spacing:.06em;text-transform:uppercase;color:#fff;white-space:nowrap;padding:0 22px;display:flex;align-items:center;gap:40px}
.tape-track span::after{content:'\2726';font-size:18px;opacity:.85}
@keyframes tapeX{to{transform:translateX(-50%)}}

/* section labels + heads */
.slabel{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:14px;color:var(--muted)}
.slabel::before{content:'{';color:var(--muted-2)}
.slabel::after{content:'}';color:var(--muted-2)}
.slabel i{width:9px;height:9px;border-radius:50%;background:var(--grad);display:inline-block}
.sec{padding:78px 0;position:relative}
.sec-head{max-width:820px;margin:0 auto 64px;text-align:center}
.sec-head.left{text-align:left;margin:0 0 56px}
.sec-head h2{font-size:clamp(34px,5vw,64px);margin-top:18px}
.sec-head p{color:var(--muted);margin-top:16px;font-size:17px;max-width:600px}
.sec-head:not(.left) p{margin-left:auto;margin-right:auto}

/* split letter reveal */
.split .ch{display:inline-block;opacity:.1;transform:translateY(.35em);transition:opacity .45s ease,transform .45s ease;will-change:opacity,transform}
.split .ch.on{opacity:1;transform:none}

/* big numbered service rows */
.svc{display:grid;grid-template-columns:300px 96px 1fr;gap:30px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:44px;margin-bottom:22px;transition:transform .35s,box-shadow .35s,border-color .35s;scroll-margin-top:120px}
.svc:hover{box-shadow:var(--glow);border-color:rgba(232, 132, 63,.35)}
.svc .pills{display:flex;flex-wrap:wrap;gap:9px}
.svc .pills span{font-size:13px;color:var(--muted);background:var(--panel-2);border:1px solid var(--line);border-radius:100px;padding:7px 14px}
.svc .micon{width:86px;height:86px;border-radius:24px;background:var(--grad);display:grid;place-items:center;font-size:38px;color:#fff;box-shadow:0 14px 30px rgba(232, 132, 63,.3)}
.svc .stitle{display:flex;align-items:baseline;justify-content:space-between;gap:18px;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-md);padding:30px 34px}
.svc .stitle h3{font-size:clamp(26px,3.4vw,46px)}
.svc .stitle .num{font-family:var(--mono);font-size:16px;color:#8A8850;white-space:nowrap}
.svc .sdesc{grid-column:1 / -1;color:var(--muted);font-size:15.5px;max-width:860px}
@media(max-width:960px){.svc{grid-template-columns:1fr;padding:30px}.svc .micon{width:64px;height:64px;font-size:28px;border-radius:18px}.svc .stitle{padding:22px 24px}}

/* generic cards */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
@media(max-width:1000px){.grid4{grid-template-columns:repeat(2,1fr)}.grid3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.grid4,.grid3{grid-template-columns:1fr}}
.kard{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:30px;transition:transform .3s,box-shadow .3s,border-color .3s}
.kard:hover{box-shadow:var(--glow);border-color:rgba(222, 106, 30,.35)}
.kard .ico{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;font-size:24px;color:#fff;background:var(--grad);margin-bottom:18px}
.kard h3,.kard h4,.kard h3{font-size:18.5px;margin-bottom:9px}
.kard p{color:var(--muted);font-size:14.5px}
.kard .cat{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);display:block;margin-bottom:10px}
.kard .tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.kard .tags span{font-size:12px;color:var(--muted);padding:5px 12px;border:1px solid var(--line);border-radius:100px;background:var(--panel-2)}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chips span{font-size:13.5px;color:var(--text);padding:8px 16px;border:1px solid var(--line);border-radius:100px;background:var(--panel);transition:border-color .25s,transform .25s}
.chips span:hover{border-color:var(--pink);transform:translateY(-2px)}

/* marquee slider (drag + auto) */
.marquee{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;cursor:grab;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.marquee::-webkit-scrollbar{display:none}
.marquee.dragging{cursor:grabbing}
.marquee-track{display:flex;gap:20px;width:max-content;padding:4px 24px}
.marquee .kard{flex:0 0 320px}
.marquee.dragging .kard{pointer-events:none}

/* founder */
.founder-card{display:flex;gap:26px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:34px;box-shadow:var(--shadow);transition:transform .3s,box-shadow .3s,border-color .3s}
.founder-card:hover{box-shadow:var(--glow);border-color:rgba(138, 136, 80,.4)}
@media(max-width:520px){.founder-card{flex-direction:column;text-align:center}}
.ava{flex:0 0 auto;width:124px;height:124px;border-radius:50%;background:var(--grad);padding:4px;display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:40px;color:#fff;box-shadow:0 14px 34px rgba(232, 132, 63,.35)}
.ava img{width:100%;height:100%;object-fit:cover;border-radius:50%;border:3px solid var(--panel)}
.founder-card .badge{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:100px;padding:5px 12px;background:var(--panel-2);margin-bottom:10px}
.founder-card h4,.founder-card h3{font-size:22px}
.founder-card .role{font-family:var(--display);font-weight:600;font-size:14px;margin:4px 0 12px;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.founder-card p{color:var(--muted);font-size:14.5px;margin-bottom:16px}
.founder-card .link{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:600;font-size:14.5px}
.founder-card .link i{transition:transform .25s}
.founder-card:hover .link i{transform:translateX(5px)}

/* big CTA band */
.cta-band{background:var(--ink);color:#fff;border-radius:var(--r-lg);padding:clamp(50px,7vw,90px) clamp(28px,5vw,70px);position:relative;overflow:hidden;text-align:center}
.cta-band::before{content:'';position:absolute;inset:0;background:radial-gradient(500px 300px at 20% 0%,rgba(222, 106, 30,.25),transparent 60%),radial-gradient(500px 320px at 85% 100%,rgba(138, 136, 80,.22),transparent 60%)}
.cta-band>*{position:relative}
.cta-band h2{font-size:clamp(32px,5vw,64px);margin-bottom:18px}
.cta-band p{color:#A9A785;max-width:540px;margin:0 auto 30px;font-size:17px}

/* timeline (portfolio) */
.timeline{display:grid;gap:20px}
.tl-item{border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel);padding:30px;transition:transform .3s,box-shadow .3s,border-color .3s}
.tl-item:hover{transform:translateY(-4px);box-shadow:var(--glow);border-color:rgba(222, 106, 30,.35)}
.tl-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;align-items:baseline}
.tl-top h3{font-size:20px}
.tl-top .co{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:600}
.tl-meta{color:var(--muted-2);font-size:13.5px;font-family:var(--mono)}
.tl-item ul{margin:14px 0 0;padding-left:20px;color:var(--muted)}
.tl-item ul li{margin-bottom:7px;font-size:14.5px}
.tl-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.tl-tags span{font-size:12px;color:var(--muted);padding:5px 12px;border:1px solid var(--line);border-radius:100px;background:var(--panel-2)}

/* contact cards */
.ccard{border:1px solid var(--line);border-radius:var(--r-md);padding:30px;background:var(--panel);transition:transform .3s,box-shadow .3s,border-color .3s}
.ccard:hover{transform:translateY(-5px);box-shadow:var(--glow);border-color:rgba(222, 106, 30,.4)}
.ccard .ico{font-size:26px;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:12px}
.ccard h4,.ccard h3{font-size:17px;margin-bottom:10px}
.ccard a{color:var(--muted);display:block;font-size:15px;transition:color .2s}
.ccard a:hover{color:var(--text)}

/* forms */
.field{margin-bottom:14px}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;font-family:var(--display)}
.field label .req{color:var(--pink);margin-left:2px}
.field input.invalid,.field textarea.invalid{border-color:#e5484d;box-shadow:0 0 0 3px rgba(229,72,77,.12)}
.field input,.field select,.field textarea{width:100%;background:var(--panel-2);border:1px solid var(--line);border-radius:14px;padding:13px 15px;color:var(--text);font-family:var(--font);font-size:14.5px;transition:border-color .2s}select{accent-color:#DE6A1E}select option{background:var(--panel-2);color:var(--text)}select option:checked,select option:hover{background:#DE6A1E;color:#fff}select optgroup{background:var(--panel);color:var(--muted);font-weight:700}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--cyan)}
.field textarea{resize:vertical;min-height:110px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:480px){.row2{grid-template-columns:1fr}}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;overflow:hidden}
/* Visually hidden but ANNOUNCED. Distinct from .hp above, which is a spam honeypot and must
   stay off-screen for bots; this one is legitimate accessible text. */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.captcha-box{display:flex;align-items:center;gap:12px;background:var(--panel-2);border:1px solid var(--line);border-radius:14px;padding:11px 15px;margin-bottom:16px;flex-wrap:wrap}
.captcha-box .q{font-family:var(--display);font-weight:700;font-size:15.5px;white-space:nowrap}
.captcha-box input{flex:0 0 90px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:9px 12px;color:var(--text);font-size:15px}
.captcha-box .hint{font-size:11.5px;color:var(--muted-2)}
.form-status{margin-top:12px;font-size:14px;min-height:20px}
.form-status.ok{color:#3FA46A}.form-status.err{color:#e5484d}

/* modal */
.modal-overlay{position:fixed;inset:0;z-index:130;background:rgba(8,9,14,.6);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .3s}
.modal-overlay.open{opacity:1;pointer-events:auto}
.modal{width:100%;max-width:560px;max-height:92vh;overflow-y:auto;background:var(--panel);border:1px solid var(--line);border-radius:26px;padding:36px;box-shadow:var(--shadow);transform:translateY(22px) scale(.98);transition:transform .3s;position:relative}
.modal-overlay.open .modal{transform:none}
.modal h3{font-size:25px;margin-bottom:6px}
.modal .sub{color:var(--muted);font-size:14.5px;margin-bottom:22px}
.modal-close{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--panel-2);color:var(--text);font-size:20px;cursor:pointer;transition:border-color .2s,transform .2s}
.modal-close:hover{border-color:var(--pink);transform:rotate(90deg)}
.modal .btn{width:100%;justify-content:center;margin-top:4px}

/* tech info popup */
.tk{position:relative}
.tk:hover{border-color:var(--pink)!important;color:var(--pink)!important;transform:translateY(-2px)}
.tech-modal{max-width:440px;text-align:left}
.t-head{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.t-bubble{flex:0 0 auto;width:56px;height:56px;border-radius:16px;background:var(--grad);display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:24px;color:#fff;box-shadow:0 10px 24px rgba(138, 136, 80,.3)}
.t-head h3{font-size:22px;margin:0}
.t-cat{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.tech-modal p{color:var(--muted);font-size:14.5px;margin-bottom:18px}
.t-use{background:var(--panel-2);border:1px solid var(--line);border-left:3px solid var(--pink);border-radius:12px;padding:14px 16px;margin-bottom:22px}
.t-use b{font-family:var(--display);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;display:block;margin-bottom:6px;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.t-use span{color:var(--muted);font-size:13.5px;line-height:1.6}
.tech-modal .btn{width:100%;justify-content:center}

/* footer */
.footer{background:var(--ink);color:#C9C6B0;border-radius:0;margin-top:0;padding:70px 0 0;position:relative;overflow:hidden}
.footer::before{content:'';position:absolute;inset:0;background:radial-gradient(560px 300px at 90% 0%,rgba(232, 132, 63,.18),transparent 60%)}
.footer>*{position:relative}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr}}
.foot-grid .logo{height:46px;width:auto;margin-bottom:16px}
.foot-grid p{color:#8F8D73;font-size:14.5px;max-width:320px}
.foot-col h6,.foot-col .foot-h{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#6F6D55;margin-bottom:16px}
.foot-col a{display:block;color:#A9A785;font-size:14.5px;margin-bottom:10px;transition:color .2s}
.foot-col a:hover{color:#fff}
.socials{display:flex;gap:12px;margin-top:8px}
.socials a{width:42px;height:42px;border:1px solid rgba(255,255,255,.16);border-radius:50%;display:grid;place-items:center;color:#A9A785;transition:all .25s}
.socials a:hover{color:#fff;border-color:#fff;transform:translateY(-3px)}
.bigword{font-family:var(--display);font-weight:700;font-size:clamp(54px,11vw,170px);line-height:1;text-align:center;margin:64px 0 0;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;opacity:.92;letter-spacing:-.03em}
.copyright{border-top:1px solid rgba(255,255,255,.1);margin-top:34px;padding:24px 0;text-align:center;color:#A3A186;font-size:13.5px}
.copyright a{color:#8F8D73}.copyright a:hover{color:#fff}
.footer::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad)}
.foot-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-bottom:40px;margin-bottom:44px;border-bottom:1px solid rgba(255,255,255,.1)}
.foot-cta-t h3{color:#fff;font-size:clamp(21px,2.8vw,30px);line-height:1.15;margin-bottom:6px}
.foot-cta-t p{color:#A3A186;font-size:15px;margin:0}
.foot-cta-b{display:flex;gap:12px;flex-wrap:wrap}

/* misc */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease-out,transform .7s ease-out}
.reveal.in{opacity:1;transform:none}
.to-top{position:fixed;right:34px;bottom:max(104px,calc(env(safe-area-inset-bottom) + 94px));width:46px;height:46px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:20px;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;z-index:60;border:1px solid rgba(255,255,255,.12)}
@media(max-width:480px){.to-top{right:26px;bottom:max(92px,calc(env(safe-area-inset-bottom) + 82px))}}
.to-top.show{opacity:1;pointer-events:auto}
.to-top:hover{transform:translateY(-4px)}
.page-hero{padding:124px 0 50px;position:relative;overflow:hidden}
.page-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(620px 420px at 85% 0%,rgba(232, 132, 63,.14),transparent 60%),radial-gradient(560px 420px at 5% 60%,rgba(222, 106, 30,.12),transparent 55%)}
.page-hero .container{position:relative;z-index:2}
@media(min-width:1101px){.page-hero h1{max-width:56vw}.page-hero p.lead{max-width:min(620px,50vw)}}
@media(max-width:1100px){.page-hero .hero-gfx{display:none}}
.split .wd{display:inline-block;white-space:nowrap}
.page-hero h1{font-size:clamp(42px,7vw,92px);margin-top:20px}
.page-hero p.lead{color:var(--muted);font-size:17.5px;max-width:620px;margin-top:22px}
.orb{position:absolute;border-radius:50%;filter:blur(64px);opacity:.4;pointer-events:none;animation:floaty 16s ease-in-out infinite}
.orb.c{width:300px;height:300px;background:radial-gradient(circle,rgba(222, 106, 30,.55),transparent 70%)}
.orb.p{width:330px;height:330px;background:radial-gradient(circle,rgba(138, 136, 80,.45),transparent 70%);animation-delay:-5s}
.orb.v{width:310px;height:310px;background:radial-gradient(circle,rgba(232, 132, 63,.5),transparent 70%);animation-delay:-9s}
@keyframes floaty{50%{transform:translate(28px,-32px)}}

/* hero graphic + dot wave */
.hero-gfx{position:absolute;right:-6%;top:12%;width:min(48vw,680px);pointer-events:none;animation:floaty 16s ease-in-out infinite;z-index:1;filter:drop-shadow(0 0 46px rgba(232, 132, 63,.22));height:auto}
@media(max-width:1100px){.hero-gfx{opacity:.26;right:-22%;top:0;width:54vw}}
@media(max-width:760px){.hero .hero-gfx{display:none}}
.dotwave{display:block;margin:-44px auto -34px;max-width:980px;width:90%;opacity:.9}
/* helix flowing behind a section */
.helix-bg{position:relative;overflow:hidden}
.helix-bg::before{content:'';position:absolute;inset:0;background-image:url(../img/gfx/dotwave.png?v=3);background-repeat:repeat-x;background-position:0 center;background-size:auto 170px;opacity:.35;animation:helixMove 38s linear infinite;pointer-events:none}
@keyframes helixMove{to{background-position:-1600px center}}
.helix-bg>.container{position:relative}

/* black get-started steps band, full bleed and square like the reference */
.steps-band{background:var(--ink);color:#fff;border-radius:0;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding:clamp(46px,6vw,84px) max(24px,calc(50vw - 596px));position:relative;overflow:hidden}
.steps-band::before{content:'';position:absolute;inset:0;background:radial-gradient(520px 300px at 12% 0%,rgba(222, 106, 30,.2),transparent 60%),radial-gradient(520px 320px at 90% 100%,rgba(232, 132, 63,.2),transparent 60%)}
.steps-band>*{position:relative}
.steps-band .slabel{color:#8F8D73}
.steps-band h2{color:#fff;font-size:clamp(30px,4.6vw,56px);margin-top:16px}
.steps-band .intro{color:#A9A785;margin-top:14px;max-width:560px}
.step3{margin-top:46px}
.st{position:sticky;display:grid;grid-template-columns:96px 1fr;gap:30px;align-items:start;background:#1C1C12;border:1px solid rgba(255,255,255,.12);border-radius:var(--r-md);padding:clamp(28px,4vw,48px);margin-bottom:22px;min-height:230px;box-shadow:0 -14px 40px rgba(0,0,0,.35);transition:transform .35s ease,border-color .35s,box-shadow .35s;overflow:hidden}
.st::after{content:'';position:absolute;top:0;left:-70%;width:42%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.09),transparent);transform:skewX(-18deg);transition:left .65s ease}
.st:hover::after{left:130%}
.st:hover{border-color:rgba(222, 106, 30,.55);box-shadow:0 20px 54px rgba(138, 136, 80,.35)}
.st .nbub{transition:transform .45s cubic-bezier(.2,.8,.3,1.4),box-shadow .45s}
.st:hover .nbub{transform:rotate(14deg) scale(1.14);box-shadow:0 0 32px rgba(222, 106, 30,.65)}
.st h3{transition:color .3s}
.st:hover h3{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.st:nth-child(1){top:96px;z-index:1}
.st:nth-child(2){top:124px;background:#191910;z-index:2}
.st:nth-child(3){top:152px;background:#1A1A10;z-index:3}
.st .nbub{width:84px;height:84px;border-radius:50%;background:var(--grad);display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:30px;color:#fff}
.st h3{color:#fff;font-size:clamp(20px,2.6vw,28px);margin-bottom:10px}
.st p{color:#A9A785;font-size:15.5px;max-width:640px}
@media(max-width:640px){.st{grid-template-columns:1fr;min-height:0}.st .nbub{width:62px;height:62px;font-size:23px}}

/* bento feature mosaic */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){.bento{grid-template-columns:1fr}}
.b-card{border-radius:var(--r-md);padding:36px;min-height:420px;display:flex;flex-direction:column;position:relative;overflow:hidden;transition:transform .35s,box-shadow .35s}
.b-card:hover{box-shadow:var(--glow)}
.b-card h3{font-size:clamp(22px,2.4vw,30px);margin-bottom:12px}
.b-card p{font-size:15px;max-width:420px}
.b-dark{background:radial-gradient(420px 320px at 85% 110%,rgba(222, 106, 30,.35),transparent 60%),var(--ink);color:#fff}
.b-dark p{color:#A9A785}
.b-grad{background:var(--grad);color:#fff}
.b-grad p{color:rgba(255,255,255,.88)}
.b-deep{background:radial-gradient(420px 340px at 80% 0%,rgba(138, 136, 80,.45),transparent 60%),#17170F;color:#fff}
.b-deep p{color:#A9A785}
.b-card .b-art{margin-top:auto;align-self:flex-end;width:min(64%,240px);filter:drop-shadow(0 18px 30px rgba(0,0,0,.35));height:auto}
.b-card .b-big{font-family:var(--display);font-weight:700;font-size:clamp(44px,5vw,72px);margin-top:auto;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.b-grad .b-big{background:none;-webkit-text-fill-color:#fff;color:#fff}

/* outsourcing offer */
.out-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:26px;align-items:stretch}
@media(max-width:920px){.out-wrap{grid-template-columns:1fr}}
.out-visual{border-radius:var(--r-md);background:radial-gradient(460px 380px at 30% 20%,rgba(232, 132, 63,.4),transparent 60%),radial-gradient(420px 360px at 90% 90%,rgba(222, 106, 30,.35),transparent 60%),#17170F;display:flex;align-items:center;justify-content:center;padding:40px;min-height:420px}
.out-visual img{width:min(78%,360px);filter:drop-shadow(0 24px 44px rgba(0,0,0,.45))}
.out-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:clamp(30px,4vw,48px);box-shadow:var(--shadow)}
.out-card h3{font-size:clamp(26px,3vw,38px)}
.out-card .from{color:var(--muted);font-size:14.5px;margin-top:10px}
.out-card .price{font-family:var(--mono);font-weight:700;font-size:clamp(40px,5vw,58px);line-height:1.1;margin:4px 0 20px}
.out-card .price em{font-style:normal;font-size:15px;color:var(--muted);font-weight:500}
.out-card ul{list-style:none;margin:0 0 26px;display:grid;gap:11px}
.out-card ul li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--text)}
.out-card ul li::before{content:'';flex:0 0 9px;width:9px;height:9px;border-radius:50%;background:var(--grad);margin-top:6px}

/* FAQ accordion */
.faq{max-width:840px;margin:0 auto}
.faq details{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:20px 26px;margin-bottom:14px;transition:box-shadow .3s}
.faq details[open]{box-shadow:var(--glow)}
.faq summary{font-family:var(--display);font-weight:600;font-size:16.5px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-size:24px;color:var(--muted);flex:0 0 auto}
.faq details[open] summary::after{content:'\2212'}
.faq details p{color:var(--muted);margin-top:12px;font-size:14.5px}

/* ---- success celebration ---- */
.nx-cheer{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;background:rgba(17, 17, 15,.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:opacity .35s ease}
.nx-cheer.show{opacity:1;pointer-events:auto}
.nx-cheer .ch-card{position:relative;background:var(--bg,#fff);border:1px solid var(--line);border-radius:28px;padding:46px 52px 40px;text-align:center;max-width:440px;width:calc(100vw - 48px);box-shadow:0 30px 80px rgba(23, 23, 15,.35);transform:translateY(26px) scale(.92);transition:transform .45s cubic-bezier(.2,1.4,.4,1)}
.nx-cheer.show .ch-card{transform:translateY(0) scale(1)}
.nx-cheer h3{font-family:'Space Grotesk',sans-serif;font-size:27px;margin:18px 0 8px;background:linear-gradient(90deg,#E8843F,#DE6A1E,#8A8850);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.nx-cheer p{color:var(--muted);font-size:15px;line-height:1.65;margin:0}
.nx-cheer .ch-ok{width:96px;height:96px;margin:0 auto;display:block}
.nx-cheer .ch-ok .ring{fill:none;stroke:url(#chGrad);stroke-width:5;stroke-linecap:round;stroke-dasharray:289;stroke-dashoffset:289;animation:chRing .7s ease-out forwards}
.nx-cheer .ch-ok .tick{fill:none;stroke:#3FA46A;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:60;animation:chTick .45s .55s ease-out forwards}
@keyframes chRing{to{stroke-dashoffset:0}}
@keyframes chTick{to{stroke-dashoffset:0}}
.nx-cheer .cf{position:absolute;top:46%;left:50%;width:10px;height:15px;border-radius:3px;opacity:0;pointer-events:none;animation:cfFly 1.7s cubic-bezier(.15,.65,.35,1) forwards}
@keyframes cfFly{0%{opacity:1;transform:translate(0,0) rotate(0) scale(1)}100%{opacity:0;transform:translate(var(--cx),var(--cy)) rotate(var(--cr)) scale(.7)}}
.nx-cheer .ch-close{position:absolute;top:12px;right:16px;border:0;background:none;font-size:26px;line-height:1;color:var(--muted);cursor:pointer}

/* sad error variant */
.nx-cheer.sad.show .ch-card{animation:sdShake .55s .25s ease}
@keyframes sdShake{0%,100%{transform:translateX(0)}18%{transform:translateX(-9px)}36%{transform:translateX(8px)}54%{transform:translateX(-6px)}72%{transform:translateX(4px)}90%{transform:translateX(-2px)}}
.nx-cheer.sad h3{background:linear-gradient(90deg,#F0A85C,#DE6A1E,#8A8850);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.nx-cheer .ch-sad{width:96px;height:96px;margin:0 auto;display:block}
.nx-cheer .ch-sad .sring{fill:none;stroke:#F0A85C;stroke-width:5;stroke-linecap:round;stroke-dasharray:289;stroke-dashoffset:289;animation:chRing .7s ease-out forwards}
.nx-cheer .ch-sad .eye{fill:#F0A85C;opacity:0;transform-origin:center;animation:sdEye .3s .55s ease-out forwards}
.nx-cheer .ch-sad .frown{fill:none;stroke:#F0A85C;stroke-width:6.5;stroke-linecap:round;stroke-dasharray:52;stroke-dashoffset:52;animation:chTick .45s .7s ease-out forwards}
.nx-cheer .ch-sad .tear{fill:#E8843F;opacity:0;animation:sdTear 1.5s 1.05s ease-in forwards}
@keyframes sdEye{0%{opacity:0;transform:scale(.2)}70%{transform:scale(1.25)}100%{opacity:1;transform:scale(1)}}
@keyframes sdTear{0%{opacity:0;transform:translateY(0) scale(.6)}15%{opacity:1}100%{opacity:0;transform:translateY(26px) scale(1)}}
.nx-cheer .ch-mail{margin-top:18px;display:inline-flex}

/* ---- AI chat assistant ---- */
.nx-bot-btn{position:absolute;right:0;bottom:0;z-index:1;width:66px;height:66px;border-radius:50%;border:0;cursor:pointer;background:var(--grad);box-shadow:0 12px 30px rgba(232, 132, 63,.35),0 0 30px rgba(232, 132, 63,.45);display:grid;place-items:center;opacity:0;transform:scale(0);pointer-events:none;transition:transform .42s cubic-bezier(.34,1.56,.64,1) .08s,opacity .25s ease .08s,box-shadow .25s}
.nx-fab.min .nx-bot-btn{opacity:1;transform:scale(1);pointer-events:auto}
.nx-fab.min .nx-bot-btn:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 16px 38px rgba(222, 106, 30,.45)}
.nx-bot-btn::before{content:'';position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(222, 106, 30,.5);animation:botPing 2.4s ease-out infinite;pointer-events:none}
@keyframes botPing{0%{transform:scale(.85);opacity:.8}100%{transform:scale(1.35);opacity:0}}
.nx-bot-btn .ico-chat{width:50px;height:50px;display:block}
.nx-bot-btn .ico-close{display:none;font-size:25px;color:#F5F0E5}
.nx-bot-btn.open .ico-chat{display:none}
.nx-bot-btn.open .ico-close{display:block}
.nx-bot-btn.open::before{display:none}
.nx-bot-dot{position:absolute;top:6px;right:6px;width:13px;height:13px;border-radius:50%;background:#3FA46A;border:2px solid #17170F;box-shadow:0 0 0 0 rgba(63, 164, 106,.6);animation:botDot 2s infinite}
.nx-bot-btn.open .nx-bot-dot{display:none}
@keyframes botDot{0%{box-shadow:0 0 0 0 rgba(63, 164, 106,.55)}70%{box-shadow:0 0 0 8px rgba(63, 164, 106,0)}100%{box-shadow:0 0 0 0 rgba(63, 164, 106,0)}}

.nx-bot{position:fixed;right:24px;bottom:max(100px,calc(env(safe-area-inset-bottom) + 90px));z-index:119;width:374px;max-width:calc(100vw - 32px);height:560px;max-height:calc(100svh - 140px);background:var(--panel);border:1px solid var(--line);border-radius:22px;box-shadow:0 30px 70px rgba(23, 23, 15,.32);display:flex;flex-direction:column;overflow:hidden;transform-origin:bottom right;opacity:0;transform:translateY(20px) scale(.92);pointer-events:none;transition:opacity .3s,transform .35s cubic-bezier(.2,1.1,.35,1)}
.nx-bot.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.nx-bot-head{position:relative;padding:16px 18px;display:flex;align-items:center;gap:12px;color:#2a1408;background:linear-gradient(120deg,#E8843F,#DE6A1E 55%,#8A8850);overflow:hidden}
.nx-bot-head::after{content:'';position:absolute;inset:0;background:radial-gradient(120px 80px at 85% -20%,rgba(255,255,255,.25),transparent 60%);pointer-events:none}
.nx-bot-ava{width:44px;height:44px;border-radius:13px;background:rgba(255,255,255,.2);display:grid;place-items:center;backdrop-filter:blur(6px);flex:0 0 auto;overflow:hidden}
.nx-bot-ava img{width:40px;height:40px;display:block}
.nx-bot-head h4,.nx-bot-head h3{font-size:15.5px;margin:0;line-height:1.2}
.nx-bot-head .nx-bot-st{font-size:12px;opacity:.92;display:flex;align-items:center;gap:6px;margin-top:2px}
.nx-bot-head .nx-bot-st i{width:8px;height:8px;border-radius:50%;background:#2FE07A;display:inline-block;box-shadow:0 0 0 0 rgba(47, 224, 122,.7);animation:botDot 2s infinite}
.nx-bot-x{margin-left:auto;background:rgba(255,255,255,.16);border:0;color:#fff;width:30px;height:30px;border-radius:9px;font-size:18px;cursor:pointer;display:grid;place-items:center;transition:background .2s}
.nx-bot-x:hover{background:rgba(255,255,255,.3)}
.nx-bot-body{flex:1;overflow-y:auto;padding:18px 16px 8px;display:flex;flex-direction:column;gap:12px;background:var(--bg)}
.nx-bot-body::-webkit-scrollbar{width:7px}.nx-bot-body::-webkit-scrollbar-thumb{background:var(--line);border-radius:100px}
.nx-msg{max-width:84%;padding:11px 14px;border-radius:16px;font-size:14px;line-height:1.55;animation:msgIn .35s ease both}
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.nx-msg.bot{align-self:flex-start;background:linear-gradient(135deg,rgba(222,106,30,.10),var(--panel));border:1px solid rgba(222,106,30,.22);border-left:3px solid #DE6A1E;border-bottom-left-radius:5px;color:var(--text)}
.nx-msg.me{align-self:flex-end;background:linear-gradient(135deg,#8A8850,#6C6A34);color:#fff;border-bottom-right-radius:5px}
.nx-msg a{color:inherit;font-weight:600;text-decoration:underline}
.nx-msg.bot a{color:#DE6A1E}
.nx-typing{align-self:flex-start;background:var(--panel);border:1px solid var(--line);border-radius:16px;border-bottom-left-radius:5px;padding:13px 16px;display:flex;gap:5px}
.nx-typing span{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:botType 1.2s infinite}
.nx-typing span:nth-child(2){animation-delay:.2s}.nx-typing span:nth-child(3){animation-delay:.4s}
@keyframes botType{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-5px);opacity:1}}
.nx-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 16px 10px}
.nx-chip{font-size:12.5px;color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:100px;padding:8px 13px;cursor:pointer;transition:border-color .2s,transform .15s}
.nx-chip:hover{border-color:#DE6A1E;transform:translateY(-1px)}
.nx-bot-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.nx-bot-acts a,.nx-bot-acts button{font-size:12.5px;font-weight:600;border-radius:10px;padding:8px 12px;cursor:pointer;border:1px solid var(--line);background:var(--panel-2);color:var(--text);text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:transform .15s,border-color .2s}
.nx-bot-acts .pri{background:var(--grad);color:#fff;border:0}
.nx-bot-acts a:hover,.nx-bot-acts button:hover{transform:translateY(-1px)}
.nx-bot-foot{display:flex;gap:9px;align-items:center;padding:12px;border-top:1px solid var(--line);background:var(--panel)}
.nx-bot-foot input{flex:1;border:1px solid var(--line);background:var(--bg);border-radius:100px;padding:11px 16px;font-size:14px;color:var(--text);outline:none;font-family:inherit}
.nx-bot-foot input:focus{border-color:#DE6A1E}
.nx-bot-send{flex:0 0 auto;width:42px;height:42px;border-radius:50%;border:0;background:var(--grad);color:#fff;cursor:pointer;display:grid;place-items:center;font-size:17px;transition:transform .2s}
.nx-bot-send:hover{transform:scale(1.08)}
.nx-bot-tag{text-align:center;font-size:10.5px;color:var(--muted-2);padding:0 0 8px;background:var(--panel)}
@media(max-width:480px){.nx-bot{right:12px;left:12px;width:auto;bottom:max(92px,calc(env(safe-area-inset-bottom) + 82px))}.nx-fab{right:16px;bottom:max(16px,calc(env(safe-area-inset-bottom) + 10px))}}

@media(prefers-reduced-motion:reduce){
  .nx-bot-btn::before,.nx-bot-dot,.nx-bot-head .nx-bot-st i,.nx-typing span{animation:none}
  .nx-bot{transition:opacity .2s}
  .nx-msg{animation:none}
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  .split .ch{opacity:1;transform:none}
  .nx-cheer .cf{display:none}
  .nx-cheer .ch-ok .ring,.nx-cheer .ch-ok .tick{stroke-dashoffset:0}
  .nx-cheer .ch-sad .sring,.nx-cheer .ch-sad .frown{stroke-dashoffset:0}
  .nx-cheer .ch-sad .eye{opacity:1;transform:none}
  .nx-cheer .ch-sad .tear{display:none}
}

/* ===== AI Playground : Project Scoper ===== */
.pg-grid{display:grid;grid-template-columns:1.45fr .9fr;gap:26px;align-items:start}
@media(max-width:980px){.pg-grid{grid-template-columns:1fr}}
.pg-card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;box-shadow:var(--shadow)}
.pg-head{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.pg-ava{width:50px;height:50px;border-radius:14px;background:var(--panel-2);border:1px solid var(--line);display:grid;place-items:center;flex:0 0 auto}
.pg-ava img{width:38px;height:38px}
.pg-head-t{flex:1}
.pg-head-t h3{font-size:20px;line-height:1.1}
.pg-head-t p{color:var(--muted);font-size:13.5px;margin-top:2px}
.pg-badge{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:#fff;background:var(--grad);padding:6px 11px;border-radius:100px;white-space:nowrap;cursor:help}
.pg-dot{width:8px;height:8px;border-radius:50%;background:#3FA46A;box-shadow:0 0 0 0 rgba(63, 164, 106,.7);animation:botDot 1.8s infinite}
.pg-badge.lim .pg-dot{background:#ff5573;box-shadow:0 0 0 0 rgba(255,85,115,.7)}
.agent-name{font-size:23px;font-weight:800;letter-spacing:2.5px;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
#scopeInput{width:100%;min-height:120px;resize:vertical;border:1px solid var(--line);border-radius:14px;background:var(--panel-2);padding:14px 16px;font:inherit;font-size:15px;color:var(--text);line-height:1.55}
#scopeInput:focus{outline:none;border-color:#8A8850;box-shadow:0 0 0 3px rgba(138, 136, 80,.14)}
.pg-actions{display:flex;align-items:center;gap:14px;margin-top:14px;flex-wrap:wrap}
.pg-hint{color:var(--muted-2);font-size:12.5px}
#scopeBtn.loading{opacity:.7;pointer-events:none}
#scopeBtn.loading i{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.pg-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.pg-chip{font-size:12.5px;color:var(--muted);background:var(--panel-2);border:1px solid var(--line);border-radius:100px;padding:7px 13px;cursor:pointer;text-align:left;max-width:100%;transition:border-color .2s,color .2s}
.pg-chip:hover{border-color:#DE6A1E;color:var(--text)}
.pg-status{margin-top:14px;font-size:13.5px;min-height:1px}
.pg-status.err{color:#e0245e}
.pg-status.nudge{color:var(--text);background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:11px 14px;font-size:13.5px;line-height:1.5}
.pg-anyway{margin-left:4px;border:0;background:none;color:#8A8850;font-weight:700;font-size:13px;cursor:pointer;text-decoration:underline}
.pg-status.load{color:#8A8850;display:flex;align-items:center;gap:8px}
.pg-status.load::before{content:'';width:14px;height:14px;border:2px solid var(--line);border-top-color:#8A8850;border-radius:50%;display:inline-block;animation:spin .8s linear infinite}
.pg-result{margin-top:18px;border-top:1px solid var(--line);padding-top:20px;-webkit-user-select:text;-moz-user-select:text;user-select:text}
.pg-result *{-webkit-user-select:text;-moz-user-select:text;user-select:text}
.out,.out *,.res,.res *{-webkit-user-select:text;-moz-user-select:text;user-select:text;cursor:text}
.pg-res-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.pg-res-tag{font-weight:700;font-size:15px;color:#fff;background:var(--grad);padding:6px 13px;border-radius:10px}
.pg-res-time{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--muted);background:var(--panel-2);border:1px solid var(--line);padding:5px 11px;border-radius:100px}
.pg-res-sum{font-size:15.5px;line-height:1.6;color:var(--text)}
.pg-gate{margin-top:18px;background:var(--panel-2);border:1px dashed var(--line);border-radius:14px;padding:18px}
.pg-gate-lock{display:flex;align-items:center;gap:9px;font-weight:700;font-size:15px;color:var(--text)}
.pg-gate-lock i{color:#8A8850}
.pg-gate-sub{color:var(--muted);font-size:13.5px;margin:7px 0 14px}
.pg-gate-row{display:flex;gap:10px;flex-wrap:wrap}
.pg-gate-row input{flex:1;min-width:200px;border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:12px 14px;font:inherit;font-size:14.5px;color:var(--text)}
.pg-gate-row input:focus{outline:none;border-color:#8A8850;box-shadow:0 0 0 3px rgba(138, 136, 80,.14)}
.pg-gate-msg{margin-top:9px;font-size:13px;color:var(--muted)}
.pg-gate-msg.err{color:#e0245e}
.pg-full{margin-top:8px}
.pg-block{margin-top:20px}
.pg-block h5{font-size:13px;text-transform:uppercase;letter-spacing:1.2px;color:var(--muted-2);margin-bottom:10px}
.pg-block>p{font-size:14.5px;color:var(--text)}
.pg-tags{display:flex;flex-wrap:wrap;gap:8px}
.pg-tags span{font-size:13px;font-weight:600;color:#8A8850;background:rgba(138, 136, 80,.08);border:1px solid rgba(138, 136, 80,.2);padding:6px 12px;border-radius:100px}
.pg-phases{list-style:none;counter-reset:ph;display:grid;gap:12px}
.pg-phases li{counter-increment:ph;position:relative;padding:13px 15px 13px 46px;background:var(--panel-2);border:1px solid var(--line);border-radius:12px}
.pg-phases li::before{content:counter(ph);position:absolute;left:13px;top:13px;width:24px;height:24px;border-radius:8px;background:var(--grad);color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center}
.pg-ph-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pg-ph-top b{font-size:14.5px}
.pg-ph-top span{font-size:12px;font-weight:600;color:var(--muted);background:var(--panel);border:1px solid var(--line);padding:2px 9px;border-radius:100px}
.pg-phases li p{font-size:13.5px;color:var(--muted);margin-top:5px}
.pg-cons{list-style:none;display:grid;gap:8px}
.pg-cons li{display:flex;gap:9px;font-size:14px;color:var(--text)}
.pg-cons li i{color:#ff8a00;margin-top:3px;flex:0 0 auto}
.pg-next{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);text-align:center}
.pg-next p{font-size:14.5px;color:var(--text);margin-bottom:13px}
.pg-next-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.pg-res-acts{margin-top:14px}
.pg-owner{display:flex;gap:8px;align-items:center;margin-top:12px;flex-wrap:wrap}
.pg-owner input{flex:1;min-width:160px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2);padding:9px 12px;font:inherit;font-size:14px;color:var(--text)}
.pg-owner input:focus{outline:none;border-color:#8A8850;box-shadow:0 0 0 3px rgba(138, 136, 80,.14)}
.pg-owner-x{background:none;border:0;color:var(--muted-2);font-size:12.5px;cursor:pointer}
.pg-owner-x:hover{color:#e0245e}
.pg-owner-active{font-size:13.5px;font-weight:600;color:#E8843F}
.pg-owner-msg{font-size:12.5px;color:var(--muted)}
.pg-owner-msg.err{color:#e0245e}
.pg-side{display:grid;gap:18px}
.pg-info,.pg-cta{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow)}
.pg-info h4,.pg-info h3,.pg-cta h4,.pg-cta h3{font-size:17px;margin-bottom:8px}
.pg-info p,.pg-cta p{color:var(--muted);font-size:14px;line-height:1.55;margin-bottom:14px}
.pg-list{list-style:none;display:grid;gap:9px}
.pg-list li{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--text)}
.pg-list li i{color:#E8843F}
.pg-soon{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:var(--muted);background:var(--panel-2);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.pg-soon i{color:#DE6A1E;margin-top:2px}
/* home-page AI Playground promo band */
.pgp{position:relative;overflow:hidden;display:grid;grid-template-columns:1.5fr .7fr;gap:24px;align-items:center;background:linear-gradient(120deg,#17170F,#20200F 58%,#2A2A18);border:1px solid var(--line);border-radius:var(--r-lg);padding:34px 38px;box-shadow:0 22px 56px rgba(23, 23, 15,.22)}
.pgp-glow{position:absolute;right:-50px;top:-70px;width:320px;height:320px;background:radial-gradient(circle,rgba(222, 106, 30,.4),transparent 70%);pointer-events:none}
.pgp-l{position:relative;z-index:1}
.pgp-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:#C9C6B0;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);padding:6px 12px;border-radius:100px}
.pgp h2{color:#fff;font-size:clamp(24px,3.2vw,36px);margin:14px 0 10px;line-height:1.12}
.pgp p{color:#A9A785;font-size:15px;line-height:1.6;max-width:60ch}
.pgp-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:18px}
.pgp-note{color:#8F8D73;font-size:12.5px}
.pgp-r{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.pgp-name{font-size:21px;font-weight:800;letter-spacing:2.5px;color:#fff;line-height:1}
.pgp-role{font-size:11.5px;letter-spacing:1px;color:#A9A785;text-transform:uppercase}
.pgp-ava{width:128px;height:128px;display:grid;place-items:center;border-radius:30px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)}
.pgp-ava img{width:106px;height:106px}
@media(max-width:760px){.pgp{grid-template-columns:1fr;padding:26px 24px}.pgp-r{display:none}}

/* Instant, smooth hero entrance, no JS dependency, avoids the "heading then text" stagger */
.hero .split .ch,.hero .reveal,.page-hero .split .ch,.page-hero .reveal{opacity:1!important;transform:none!important}
.hero .container,.page-hero .container{animation:nxHeroIn .55s ease both}
@keyframes nxHeroIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.hero .container,.page-hero .container{animation:none}}

/* anti-flash: gentle fade for JS-injected chrome instead of popping in */
.footer{animation:nxFade .5s ease both}
@keyframes nxFade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion: reduce){.footer{animation:none}}

/* chat copy button */
.bcopy{display:inline-flex;align-items:center;margin-left:8px;background:none;border:0;color:var(--muted);cursor:pointer;font-size:14px;opacity:.55;vertical-align:middle;padding:0}
.bcopy:hover{opacity:1;color:#DE6A1E}
.bcopy.done{color:#2E8A54;opacity:1}

/* allow selecting/copying chat text */
.bubble,.nx-msg,.nx-msg *{-webkit-user-select:text;user-select:text}

/* refined secondary button (clean outline, pink on hover) */
.btn.btn-soft{background:var(--bg);border:1px solid var(--line);color:var(--text);box-shadow:none;font-weight:600}
.btn.btn-soft:hover{border-color:#DE6A1E;color:#DE6A1E;transform:translateY(-1px)}
/* Meeting Assistant apps store buttons */
.nx-apps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin:18px 0 0}
.nx-app{display:flex;align-items:center;gap:12px;padding:13px 15px;border:1px solid rgba(245,240,229,.18);border-radius:14px;background:linear-gradient(180deg,rgba(245,240,229,.07),rgba(245,240,229,.02));text-decoration:none;color:var(--text);transition:.16s;box-shadow:0 2px 12px rgba(0,0,0,.28)}
.nx-app:hover{border-color:#DE6A1E;transform:translateY(-2px);box-shadow:0 12px 30px rgba(222,106,30,.30)}
.nx-app>i{font-size:26px;color:#DE6A1E;flex:0 0 auto}
.nx-app-txt{display:flex;flex-direction:column;line-height:1.25}
.nx-app-t{font-weight:700;font-size:14px}
.nx-app-s{font-size:12px;color:var(--muted)}
.nx-app-soon{display:inline-block;background:var(--bg);border:1px solid var(--line);color:var(--muted);font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:1px 6px;border-radius:100px;margin-left:6px;vertical-align:middle}
.nx-app.soon{opacity:.72;cursor:default}
.nx-app.soon:hover{transform:none;border-color:var(--line);box-shadow:none}
/* Playground apps hero */
.apps-hero{position:relative;border-radius:24px;padding:40px 40px 34px;overflow:hidden;background:linear-gradient(135deg,rgba(138, 136, 80,.12),rgba(232, 132, 63,.10)),var(--panel);border:1px solid var(--line)}
.apps-hero::before{content:"";position:absolute;inset:0;border-radius:24px;padding:1.5px;background:linear-gradient(135deg,#8A8850,#DE6A1E,#E8843F);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.apps-hero-glow{position:absolute;top:-120px;right:-80px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(222, 106, 30,.22),transparent 68%);pointer-events:none}
.apps-hero-in{position:relative}
.apps-hero h2{font-size:clamp(24px,3.4vw,36px);margin:12px 0 10px;letter-spacing:-.4px}
.apps-hero .lead{max-width:680px;font-size:16px;margin:0}
.apps-badge{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:linear-gradient(120deg,#8A8850,#DE6A1E);padding:5px 13px;border-radius:100px;align-self:flex-start;width:fit-content}
.apps-badge .apps-dot{width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 8px #fff;animation:pulse 1.8s ease-in-out infinite}
.apps-feats{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 4px}
.apps-feats span{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:100px;padding:7px 13px}
.apps-feats i{color:#8A8850;font-size:15px}
.apps-hero .nx-apps{margin-top:20px}
@media(max-width:560px){.apps-hero{padding:28px 22px}}
/* Drawer: Meeting Assistant store buttons (next to social) */
.m-apps{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.nx-apps-mini{display:inline-flex;gap:8px;flex-wrap:wrap}
.m-appbtn{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:#fff;text-decoration:none;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.24);border-radius:10px;padding:8px 13px;transition:.16s;box-shadow:0 2px 10px rgba(0,0,0,.25)}
.m-appbtn:hover{border-color:#DE6A1E;background:rgba(222,106,30,.16);box-shadow:0 6px 18px rgba(222,106,30,.28)}
.m-appbtn i{font-size:16px;color:#DE6A1E}
.m-appbtn.soon{opacity:.74}
.m-appbtn.soon b{font-size:8.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.22);border-radius:100px;padding:1px 5px;margin-left:1px}

/* Password show/hide eye toggle */
.nx-eye-wrap{position:relative;display:block}
.nx-eye-wrap>input{width:100%;padding-right:44px!important;box-sizing:border-box}
.nx-eye-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:0;padding:6px;margin:0;cursor:pointer;color:var(--muted);line-height:0;border-radius:8px;display:inline-flex}
.nx-eye-btn:hover{color:var(--text)}
.nx-eye-btn.on{color:#DE6A1E}
@keyframes nxFlash{0%{box-shadow:0 0 0 0 rgba(222, 106, 30,.45)}100%{box-shadow:0 0 0 14px rgba(222, 106, 30,0)}}
.nx-flash{animation:nxFlash 1.1s ease-out 2;border-color:#DE6A1E!important}

/* ---- unified premium card pattern across all pages ---- */
.dv-card,.bd-card,.pl-card,.pl-feat,.cue-card,.ins-card,.plc-feat,.dv-feat,.pg-card{transition:transform .32s ease,box-shadow .32s ease,border-color .32s ease}
.svc:hover,.kard:hover,.founder-card:hover,.dv-card:hover,.bd-card:hover,.pl-card:hover,.pl-feat:hover,.cue-card:hover,.ins-card:hover,.plc-feat:hover,.dv-feat:hover,.pg-card:hover,.card:hover,.pg-info:hover,.pg-cta:hover,.bd-step:hover{box-shadow:var(--glow);border-color:rgba(232, 132, 63,.4)}
.num,.idx{color:#8A8850}

/* theme toggle */
.nx-theme-btn{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--text);cursor:pointer;display:grid;place-items:center;font-size:17px;transition:background .2s,transform .2s;margin-right:2px}
.nx-theme-btn:hover{background:var(--panel-2);transform:translateY(-1px)}
.nx-sel{position:relative}.nx-sel-native{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;margin:0}.nx-sel-btn{width:100%;text-align:left;background:var(--panel-2);border:1px solid var(--line);border-radius:14px;padding:13px 42px 13px 15px;color:var(--text);font-family:var(--font);font-size:14.5px;cursor:pointer;position:relative;transition:border-color .2s}.nx-sel-btn::after{content:"";position:absolute;right:16px;top:46%;width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-50%) rotate(45deg)}.nx-sel.open .nx-sel-btn{border-color:#DE6A1E}.nx-sel-menu{display:none;position:absolute;z-index:70;top:calc(100% + 6px);left:0;right:0;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);max-height:340px;overflow:auto;padding:6px}.nx-sel.open .nx-sel-menu{display:block}.nx-sel-grp{padding:9px 12px 4px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}.nx-sel-opt{padding:10px 12px;border-radius:9px;cursor:pointer;color:var(--text);font-size:14.5px}.nx-sel-opt:hover{background:#DE6A1E;color:#fff}.nx-sel-opt.sel{background:rgba(222,106,30,.15);color:#DE6A1E;font-weight:600}.nx-sel-opt.sel:hover{background:#DE6A1E;color:#fff}

[data-theme="light"] .nx-app{background:#23220f;color:#F5F0E5;border-color:rgba(0,0,0,.12)}
[data-theme="light"] .nx-app-s{color:#c9c7a8}
[data-theme="light"] .m-appbtn{background:#23220f;color:#F5F0E5;border-color:rgba(0,0,0,.14)}
/* Dark theme: make the 'ink' + 'soft' secondary buttons visible (were dark-on-dark) */
[data-theme="dark"] .btn-ink{background:#F5F0E5;color:#17170F}
[data-theme="dark"] .btn-ink:hover{background:#ffffff;box-shadow:0 16px 34px rgba(222,106,30,.34)}
/* account chip: avatar + dropdown chevron (chevron follows the button text colour so it stays visible in light AND dark) */
.nx-acct-avbtn{gap:7px;padding-left:7px !important}
.nx-acct-av{width:26px;height:26px;border-radius:50%;object-fit:cover;display:block;flex:0 0 auto}
.nx-acct-cv{font-size:12px;color:inherit;opacity:.85;flex:0 0 auto}
[data-theme="dark"] .nx-acct-cv{color:#C6C36E;opacity:1;text-shadow:0 0 7px rgba(198,195,110,.4)}
[data-theme="dark"] .btn.btn-soft{background:var(--panel-2);border-color:rgba(245,240,229,.24);color:var(--text)}
[data-theme="dark"] .btn.btn-soft:hover{border-color:#DE6A1E;color:#DE6A1E;background:var(--panel-2)}
[data-theme="dark"] .nx-chip{background:var(--panel-2);border-color:rgba(245,240,229,.22)}
[data-theme="dark"] .nx-chip:hover{border-color:#DE6A1E}

/* Outlined secondary button (was unstyled -> looked like text) */
.btn-line{background:transparent;color:var(--text);border:1.5px solid rgba(245,240,229,.35)}
.btn-line:hover{border-color:#DE6A1E;color:#DE6A1E;transform:translateY(-3px);box-shadow:0 12px 28px rgba(222,106,30,.22)}
[data-theme="light"] .btn-line{border-color:rgba(23,23,15,.30)}

/* tiQ chat: cream base */
.nx-bot{--bg:#F5F0E5;--bg2:#EDE7D8;--panel:#ffffff;--panel-2:#FBF8F0;--text:#17170F;--muted:#6F6D55;--line:rgba(23,23,15,.12);color:#17170F}
.nx-bot .nx-bot-body{background:#F5F0E5}
.nx-bot-x{color:#F5F0E5}

[data-theme="dark"] .btn-ghost{border-color:rgba(245,240,229,.32)}
[data-theme="dark"] .btn-ghost:hover{border-color:#DE6A1E;color:#DE6A1E}

/* premium motion upgrades: zoom-reveal variant + hover lift (reduced-motion already killed by *{transition:none!important}) */
.reveal.reveal-zoom{transform:scale(.86)}
.reveal.reveal-zoom.in{transform:none}
.svc,.kard,.founder-card,.dv-card,.bd-card,.pl-card,.pl-feat,.cue-card,.ins-card,.plc-feat,.dv-feat,.pg-card,.card,.pg-info,.pg-cta,.bd-step,.cue-step,.cue-feat,.cue-pcard,.agent-tile,.feat,.s-card,.b-card{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.svc:hover,.kard:hover,.founder-card:hover,.dv-card:hover,.bd-card:hover,.pl-card:hover,.pl-feat:hover,.cue-card:hover,.ins-card:hover,.plc-feat:hover,.dv-feat:hover,.pg-card:hover,.card:hover,.pg-info:hover,.pg-cta:hover,.bd-step:hover,.cue-step:hover,.cue-feat:hover,.cue-pcard:hover,.agent-tile:hover,.feat:hover,.s-card:hover{transform:translateY(-6px)}

/* clickable elements always show the hand cursor, even inside selectable result/message areas */
a[href],button,summary,label[for],select,input[type="button"],input[type="submit"],input[type="reset"],input[type="file"],input[type="checkbox"],input[type="radio"],[role="button"],[role="tab"],[onclick],[data-sub],.btn,.ag,.recbtn,.ql,.tpBuy,.nx-chip,.js-open-modal,.agent-tile,.pa,.u-row,.u-meet,.tiq-row,.to-top,.burger,.close,.modal-close,.nx-fab-min,.pg-owner-x,.brand-chip,.res a,.res button,.out a,.out button,.nx-msg a,.nx-msg button,.hi .open,.ren,.del,.bcopy{cursor:pointer!important}

/* ================= Iris premium result UI ================= */
.ir-card{color:var(--text)}
.ir-head{display:flex;gap:22px;align-items:center;flex-wrap:wrap;padding:2px 0 18px;border-bottom:1px solid var(--line)}
.ir-gauges{display:flex;gap:18px}
.ir-gaugewrap{text-align:center}
.ir-gauge{width:94px;height:94px;border-radius:50%;display:grid;place-items:center;position:relative;background:conic-gradient(var(--c) calc(var(--v)*3.6deg), var(--line) 0)}
.ir-gauge::before{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--panel)}
.ir-gauge b{position:relative;font-family:var(--display);font-size:29px;font-weight:800;line-height:1;color:var(--text)}
/* Facet gauges. The headline pair were circles and the four facets were bars, so the page
   presented the same kind of number two different ways and the breakdown read as less
   important than the summary - which is backwards, since the breakdown is what explains it.
   Same component, smaller, so the eye groups them. */
.ir-gauge.sm{width:66px;height:66px}
.ir-gauge.sm::after{inset:7px}
.ir-gauge.sm b{font-size:17px}
.ir-facet-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:4px}
.ir-facet{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:14px 10px;text-align:center}
.ir-facet .ir-gaugewrap{margin:0 auto}
.ir-facet-frac{display:block;font-style:normal;font-size:10.5px;color:var(--muted);margin-top:3px;font-family:var(--mono)}
.ir-gaugelab{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);margin-top:8px;font-weight:700}
.ir-meta{flex:1;min-width:220px}
.ir-url{font-family:var(--display);font-weight:700;font-size:18px;color:var(--text);word-break:break-word}
.ir-sum{color:var(--muted);font-size:14px;margin:6px 0 0;line-height:1.55}
.ir-sec{margin-top:20px}
.ir-sec>h5{display:flex;align-items:center;gap:10px;font-size:11.5px;text-transform:uppercase;letter-spacing:1.2px;color:#DE6A1E;font-weight:700;margin:0 0 11px}
.ir-sec>h5::after{content:"";flex:1;height:1px;background:var(--line)}
.ir-win{display:flex;gap:12px;padding:12px 15px;border:1px solid var(--line);border-radius:12px;margin:0 0 9px;background:var(--panel-2);transition:border-color .15s,transform .15s}
.ir-win:hover{border-color:rgba(222,106,30,.45);transform:translateY(-1px)}
.ir-dot{width:9px;height:9px;border-radius:50%;margin-top:6px;flex:0 0 auto}
.ir-wt{min-width:0}
.ir-wt>b{font-size:14px;color:var(--text)}
.ir-adv{color:var(--muted);font-size:13px;margin-top:3px;line-height:1.5}
.ir-tags{display:flex;gap:7px;align-items:center;margin-bottom:4px;flex-wrap:wrap}
.ir-area{font-size:10.5px;font-weight:700;color:#8A8850;text-transform:uppercase;letter-spacing:.5px}
.ir-pri{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:#fff;border-radius:5px;padding:2px 7px}
.ir-ai{border:1px solid rgba(232,132,63,.32);border-radius:14px;padding:15px 17px;margin-top:20px;background:linear-gradient(120deg,rgba(232,132,63,.08),rgba(138,136,80,.07))}
.ir-ai>h5{margin:0 0 3px;font-size:14.5px;color:var(--text);font-family:var(--display)}
.ir-fix{border:1px solid var(--line);border-radius:12px;margin:0 0 12px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.04)}
.ir-fixbar{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 13px;background:var(--panel-2);border-bottom:1px solid var(--line)}
.ir-fixbar>b{font-size:13.5px;color:var(--text)}
.ir-fixnote{color:var(--muted);font-size:12.5px;padding:9px 13px 0}
.ir-fix pre{margin:9px 13px 13px;padding:13px 15px;background:#17170F;border:1px solid #2c2c1f;border-radius:9px;overflow-x:auto;color:#EDEBDF;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;line-height:1.6;white-space:pre-wrap;word-break:break-word}
.ir-copy{border:1px solid var(--line);background:var(--bg);color:var(--text);border-radius:100px;padding:5px 14px;font-size:12px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:.15s;white-space:nowrap}
.ir-copy:hover{border-color:#DE6A1E;color:#DE6A1E}
.ir-copy.done{background:#2E8A54;color:#fff;border-color:#2E8A54}

/* ===== Public mega-menu (injected by nx.js into #menuOverlay) ===== */
.mm{max-width:1000px;margin:0 auto;width:100%}
/* ============================================================================================
   MENU TARGETS  ("on hover it is not clickable, but a bit of distance away it is")
   --------------------------------------------------------------------------------------------
   Measured on the live menu: every link IS hit-testable at its centre, with cursor:pointer. So
   this was never an offset or an overlay stealing clicks - it is that the targets were only as
   big as the letters.

     .mm-util a  was 51 x 25px of bare text with NO padding, separated by 22px gaps. Roughly half
                 the row a user reads as "the Pricing button" was dead space. Aiming just above,
                 below or beside the word did nothing; nudging onto the glyphs worked.
     .mm-link    had padding:8px 0 - vertical only. Wide, but with no visible extent, so there
                 was nothing telling you where the target began or ended.

   Fix is the same for both: real padding, and a rounded hover background so the hit area is
   SHOWN rather than guessed at. 25px -> 39px tall clears the ~40px touch-target guidance too.

   The gap drops 22px -> 6px because the new 12px side padding now supplies the separation; text
   spacing ends up 30px vs 22px before, so the row looks the same, just with the space made
   clickable instead of dead. .mm-link pulls back by its own left padding so the labels stay
   optically aligned with their column headings.
   ============================================================================================ */
.mm-util{display:flex;flex-wrap:wrap;gap:8px 6px;padding:0 0 16px;margin:0 0 22px;border-bottom:1px solid rgba(255,255,255,.14)}
.mm-util a{color:rgba(255,255,255,.7);font-weight:600;font-size:15px;text-decoration:none;
  padding:7px 12px;border-radius:10px;transition:background .2s ease,color .2s ease}
.mm-util a:hover,.mm-util a[aria-current]{color:#fff}
.mm-util a:hover{background:rgba(255,255,255,.08)}
.mm-util a:focus-visible{background:rgba(255,255,255,.1);outline:2px solid rgba(222,106,30,.65);outline-offset:1px}
.mm-cols{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:26px}
@media(max-width:820px){.mm-cols{grid-template-columns:1fr;gap:22px}}
.mm-cat{font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:rgba(255,255,255,.38);margin:0 0 12px;font-weight:700}
.mm-prod{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:12px;text-decoration:none;margin-bottom:4px;transition:background .15s}
.mm-prod:hover{background:rgba(255,255,255,.06)}
.mm-prod img{width:34px;height:34px;flex:0 0 auto}
.mm-prod-txt{min-width:0}
.mm-pn{display:block;color:#fff;font-weight:600;font-size:16px;font-family:'Space Grotesk',sans-serif}
.mm-pn em{font-style:normal;font-size:10px;background:rgba(222,106,30,.2);color:#DE6A1E;padding:1px 7px;border-radius:20px;margin-left:5px;vertical-align:middle}
.mm-n{font-style:normal;font-size:10px;font-weight:700;background:rgba(222,106,30,.2);color:#DE6A1E;padding:1px 7px;border-radius:20px;margin-left:7px;vertical-align:middle;line-height:1.7}
.mm-pd{display:block;color:rgba(255,255,255,.55);font-size:12.5px;margin-top:1px}
.mm-feat{border:1px solid rgba(222,106,30,.4)}
/* padding:8px 0 -> 8px 12px, pulled back by margin-left so the label stays optically aligned
   with its column heading while the hover pill extends past it on both sides. */
.mm-link{display:block;color:rgba(255,255,255,.8);text-decoration:none;font-size:16px;font-weight:600;
  padding:8px 12px;margin-left:-12px;border-radius:10px;transition:background .2s ease,color .2s ease}
.mm-link:hover,.mm-link[aria-current]{color:#fff}
.mm-link:hover{background:rgba(255,255,255,.07)}
.mm-link:focus-visible{background:rgba(255,255,255,.1);outline:2px solid rgba(222,106,30,.65);outline-offset:1px}
.mm-legal{display:none}
.menu-overlay .m-legal{display:inline-flex;flex-wrap:wrap;gap:8px 16px}
.menu-overlay .m-legal a{color:#8F8D73;font-size:14px;text-decoration:none}
.menu-overlay .m-legal a:hover{color:#fff}
.mm-legal a{color:rgba(255,255,255,.5);font-size:13px;text-decoration:none}
.mm-legal a:hover{color:#fff}
.mm-ic{width:34px;height:34px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.16);border-radius:9px;color:#DE6A1E}
.mm-ic .lni{font-size:18px}
.mm-cta{display:block;margin-top:18px;padding:14px;border:1px solid rgba(222,106,30,.4);border-radius:12px;text-decoration:none;background:rgba(222,106,30,.06)}
.mm-cta b{display:block;color:#fff;font-size:15px;font-weight:600}
.mm-cta span{display:block;color:rgba(255,255,255,.6);font-size:12.5px;margin-top:2px}
.menu-overlay.mm-navigating nav,.menu-overlay.mm-navigating .mm,.menu-overlay.mm-navigating .m-meta{opacity:.35;transition:opacity .25s ease;pointer-events:none}

/* =====================================================================
   Global loading UI (branded). Driven automatically by nx.js: a slim top
   progress bar shows during any in-flight request, plus reusable spinner,
   button-loading and skeleton classes. Purely cosmetic - no functionality
   depends on these, so they can never block a real action.
   ===================================================================== */
.nx-topbar{position:fixed;top:0;left:0;height:3px;width:0;z-index:99999;
  background:linear-gradient(90deg,#E8843F,#DE6A1E,#8A8850);
  box-shadow:0 0 12px rgba(232,132,63,.55);border-radius:0 3px 3px 0;
  opacity:0;transition:width .18s ease,opacity .35s ease;pointer-events:none}
.nx-topbar.on{opacity:1}
.nx-topbar::after{content:"";position:absolute;right:0;top:0;height:100%;width:90px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55));animation:nxBarShine .9s linear infinite}
@keyframes nxBarShine{0%{opacity:.2}50%{opacity:1}100%{opacity:.2}}

.nx-spin{display:inline-block;width:1em;height:1em;border:2px solid currentColor;
  border-right-color:transparent;border-radius:50%;vertical-align:-.15em;animation:spin .6s linear infinite}
.nx-spin.lg{width:34px;height:34px;border-width:3px}
.nx-loading{display:flex;align-items:center;justify-content:center;gap:12px;padding:26px 20px;
  color:var(--muted);font-size:14px;text-align:center}
.nx-loading .nx-spin{color:#DE6A1E;flex:0 0 auto}

.btn.is-loading{position:relative;color:transparent!important;pointer-events:none;opacity:.92}
.btn.is-loading::after{content:"";position:absolute;left:50%;top:50%;width:1.05em;height:1.05em;
  margin:-.53em 0 0 -.53em;border:2px solid rgba(255,255,255,.55);border-right-color:transparent;
  border-radius:50%;animation:spin .6s linear infinite}
.btn.btn-line.is-loading::after,.btn.btn-ink.is-loading::after{border-color:rgba(222,106,30,.55);border-right-color:transparent}

.nx-skel{position:relative;overflow:hidden;background:var(--panel-2,rgba(0,0,0,.06));border-radius:10px;min-height:14px}
.nx-skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);animation:nxSkel 1.25s infinite}
[data-theme="dark"] .nx-skel::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent)}
@keyframes nxSkel{to{transform:translateX(100%)}}
@media(prefers-reduced-motion:reduce){.nx-topbar::after,.nx-skel::after{animation:none}.nx-spin{animation-duration:1.2s}}

/* Iris "Apply the fix" panel - the corrected <head> block, highlighted as the hero action */
.ir-apply{border:1px solid rgba(222,106,30,.38);background:rgba(222,106,30,.055);border-radius:14px;padding:15px 17px;margin-top:14px}
.ir-apply>h5{color:#DE6A1E}
.ir-apply .ir-fix{margin-top:8px}

/* =====================================================================
   Premium interaction system (sitewide). One consistent language: cards
   lift with a warm border glow, grids reveal with a stagger, workflows
   read as a connected flow, and everything respects reduced motion.
   Pure CSS - no markup or SEO/GEO impact.
   ===================================================================== */
/* unify the card family: add the missing classes and give the lift a premium glow */
.pillar,.step,.svc,.kard,.founder-card,.dv-card,.bd-card,.pl-card,.pl-feat,.ins-card,.pg-card,.card,.bd-step,.cue-step,.cue-feat,.cue-pcard,.agent-tile,.feat,.s-card,.ql,.cue-arc .a{
  transition:transform .22s cubic-bezier(.2,.7,.3,1),border-color .22s ease,box-shadow .22s ease}
.pillar:hover,.step:hover,.cue-arc .a:hover{transform:translateY(-6px)}
.pillar:hover,.step:hover,.svc:hover,.kard:hover,.founder-card:hover,.dv-card:hover,.bd-card:hover,.pl-card:hover,.pl-feat:hover,.ins-card:hover,.pg-card:hover,.bd-step:hover,.cue-step:hover,.cue-feat:hover,.cue-pcard:hover,.agent-tile:hover,.feat:hover,.s-card:hover,.ql:hover,.cue-arc .a:hover{
  border-color:rgba(222,106,30,.55);box-shadow:0 14px 40px rgba(0,0,0,.28),0 0 0 1px rgba(222,106,30,.18),0 0 24px rgba(232,132,63,.10)}
/* staggered reveal: grid children arrive in sequence, not as one block */
.pillars .reveal:nth-child(2),.steps .reveal:nth-child(2),.cue-grid>.reveal:nth-child(2){transition-delay:.09s}
.pillars .reveal:nth-child(3),.steps .reveal:nth-child(3),.cue-grid>.reveal:nth-child(3){transition-delay:.18s}
.pillars .reveal:nth-child(4),.steps .reveal:nth-child(4),.cue-grid>.reveal:nth-child(4){transition-delay:.27s}
/* workflow storytelling: on wide screens the 4 steps connect with arrows (Iris:
   Audit -> Fix -> Verify -> Monitor; index: the build steps) */
@media(min-width:821px){
  .steps{position:relative}
  .steps .step{position:relative}
  .steps .step:not(:last-child)::after{content:"\2192";position:absolute;right:-14px;top:50%;transform:translateY(-50%);color:#DE6A1E;font-size:18px;font-weight:700;opacity:.85;z-index:2}
}
.step .n{transition:color .2s ease,text-shadow .2s ease}
.step:hover .n{color:#E8843F;text-shadow:0 0 14px rgba(232,132,63,.55)}
/* primary button: gradient sheen on hover, consistent everywhere */
.btn-grad{background-size:160% 160%;transition:background-position .35s ease,transform .18s ease,box-shadow .25s ease}
.btn-grad:hover{background-position:90% 60%;transform:translateY(-1px);box-shadow:0 10px 26px rgba(222,106,30,.35)}
@media(prefers-reduced-motion:reduce){
  .pillar,.step,.svc,.kard,.ins-card,.pg-card,.card,.cue-step,.cue-feat,.cue-pcard,.ql,.cue-arc .a,.btn-grad{transition:none}
  .pillar:hover,.step:hover,.cue-arc .a:hover,.btn-grad:hover{transform:none}
  .pillars .reveal,.steps .reveal,.cue-grid>.reveal{transition-delay:0s}
  .cue-panel{animation:none}
}

/* Canonical card hover (FINAL - kills the plan-card border flicker): earlier rules gave the
   same cards competing transitions (.32s/.25s/.22s) and two different glow shadows, which
   fought each other mid-hover. This last-wins block declares ONE timing and ONE glow. */
.svc,.kard,.founder-card,.dv-card,.bd-card,.pl-card,.pl-feat,.ins-card,.plc-feat,.dv-feat,.pg-card,.card,.pg-info,.pg-cta,.bd-step,.cue-step,.cue-feat,.cue-pcard,.agent-tile,.feat,.s-card,.pillar,.step,.ql,.cue-arc .a{
  transition:transform .22s cubic-bezier(.2,.7,.3,1),border-color .22s ease,box-shadow .22s ease!important}
.svc:hover,.kard:hover,.founder-card:hover,.dv-card:hover,.bd-card:hover,.pl-card:hover,.pl-feat:hover,.ins-card:hover,.plc-feat:hover,.dv-feat:hover,.pg-card:hover,.card:hover,.pg-info:hover,.pg-cta:hover,.bd-step:hover,.cue-step:hover,.cue-feat:hover,.cue-pcard:hover,.agent-tile:hover,.feat:hover,.s-card:hover,.pillar:hover,.step:hover,.ql:hover,.cue-arc .a:hover{
  border-color:rgba(222,106,30,.55)!important;
  box-shadow:0 14px 40px rgba(0,0,0,.28),0 0 0 1px rgba(222,106,30,.18),0 0 24px rgba(232,132,63,.10)!important}

/* ============================================================
   BIG-SCREEN LAYER (1600px+). Additive only - nothing below
   1600px changes, so laptop and mobile layouts are untouched.
   Goals on 2K/4K monitors: no dead dark oceans, hero content
   vertically centered, wider canvas, artwork scaled to match.
   ============================================================ */
@media (min-width:1600px){
  :root{--maxw:1400px}
  .container{padding:0 36px}
  /* center the hero vertically and cap its height - a 1300px-tall monitor was
     showing one screen of empty dark below a top-aligned headline */
  .hero{align-items:center;min-height:min(100svh,940px);padding:100px 0 70px}
  .hero p.lead{max-width:640px}
  .hero-gfx{width:min(36vw,760px)!important;height:auto}
  .page-hero{padding:150px 0 64px}
  .page-hero p.lead{font-size:19px;max-width:680px}
}
@media (min-width:2200px){
  :root{--maxw:1600px}
  .container{padding:0 44px}
  .hero{min-height:min(100svh,1020px)}
  .hero-gfx{width:min(34vw,900px)!important;height:auto}
}


/* ------------------------------------------------------------
   BIG-SCREEN DENSITY PASS. Widening the canvas exposed layouts
   that were built for ~1240px: short hero columns left a hole
   beside a tall one, section rhythm felt stretched, and inline
   figures stayed small in the middle of a wide row.
   Fixes only spacing/alignment - no content or colours change.
   ------------------------------------------------------------ */
@media (min-width:1600px){
  /* a short column next to a tall one: centre it instead of stranding it at the top */
  .cue-hero, .iris-grid{align-items:center}
  /* section rhythm: proportional, not stretched */
  .sec{padding:70px 0}
  /* diagrams and inline figures should use the wider canvas */
  .sec figure img, .page-hero figure img{max-width:1180px!important}
  /* text blocks stay readable - never let a paragraph run the full 1400px */
  .sec > .container > p.lead{max-width:820px}
  /* centred section intros read better when the copy is not edge-to-edge */
  .sec > .container > h2 + p.lead{margin-left:auto;margin-right:auto}
}
@media (min-width:2200px){
  .sec figure img, .page-hero figure img{max-width:1320px!important}
  .sec{padding:76px 0}
}

/* ------------------------------------------------------------------
   Inserted explainer figures. One rule owns their spacing so a caption
   can never sit flush against the next block and get overlapped.
   margin-bottom is deliberately larger than any neighbouring grid gap.
   ------------------------------------------------------------------ */
.nx-fig{margin:24px 0 36px;padding:0;display:block;clear:both;position:relative;z-index:1}
.nx-fig img{width:100%;height:auto;max-width:1000px;display:block;margin:0 auto}
.nx-fig figcaption{text-align:center;font-size:13px;color:var(--muted);margin-top:10px;line-height:1.5;position:relative;z-index:1}
@media (min-width:1600px){ .nx-fig img{max-width:1180px} }
@media (min-width:2200px){ .nx-fig img{max-width:1320px} }

/* FAQ questions are real headings for crawlers, but must render exactly as before */
.faq-item>summary>.faq-q{display:inline;font:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}

/* ============================================================================================
   BORDER SHIMMER ON HOVER  ("on hover on the border it starts to blink")
   --------------------------------------------------------------------------------------------
   Reported on the hero buttons and on cards and pills. It is a RASTERISATION artefact, not a
   hover or cursor problem - worth stating plainly, because the obvious reading is that hover is
   flickering on and off, and I built and threw away a 96-line fix for exactly that before
   testing it. For the record, measured in Chrome with a real pointer: sweeping the cursor pixel
   by pixel across a button's bottom border and back produced ONE mouseover and ZERO mouseouts.
   Chrome does not re-hit-test on a transform change, so the hover feedback loop cannot happen.

   What is actually happening, measured on a 1.25x display:
     - a 1px border is USED at 0.8px - 1 CSS px is 1.25 device px, which Chrome snaps down to 1
     - the hover lift, translateY(-3px), is 3.75 device pixels: NOT a whole number
     - the corners are round: 100px on buttons, 30px on cards
   So the element slides through fractional device-pixel offsets, and because it is not on its
   own compositor layer, Chrome re-rasterises the sub-pixel border and the antialiased corners
   at every intermediate position. The border's pixel coverage flips between roughly one and two
   device pixels frame to frame. That is the shimmer, and it explains why it appears on the
   BORDER specifically, on every lifting element, and only during hover.

   THE FIX: promote the element for the duration of the hover. On its own layer the border is
   rasterised once and the GPU translates the finished texture - no repaint, no re-snapping.

   Why will-change is on :hover and not on the base rule: a layer costs w*h*4 bytes of GPU
   memory, and there are ~30 cards on some pages. Promoting all of them permanently would spend
   double-digit megabytes to fix a 200ms transition. Chrome creates the layer on the same style
   recalc that starts the transition, so hovering is early enough.

   This changes NO computed style, no geometry and no paint at rest - verified by diffing
   getBoundingClientRect for every element on the page before and after. If the shimmer persists,
   the next suspect is .btn-grad's `transition:background-position .35s` on a 160% gradient,
   which repaints on the main thread every frame and cannot be composited away.
   ============================================================================================ */
@media (hover:hover) and (pointer:fine){
  .btn-grad:hover,.btn-ink:hover,.btn-ghost:hover,.btn-line:hover,.btn.btn-soft:hover,
  #nxHeaderAuth.nx-tip:hover,.chips span:hover,.tl-item:hover,.ccard:hover,.tk:hover,
  .socials a:hover,.to-top:hover,.nx-bot-btn:hover,.nx-chip:hover,.nx-app:hover,
  .nx-theme-btn:hover,.nx-bot-acts a:hover,.nx-bot-acts button:hover,.ir-win:hover,
  .svc:hover,.kard:hover,.founder-card:hover,.dv-card:hover,.bd-card:hover,.pl-card:hover,
  .pl-feat:hover,.cue-card:hover,.ins-card:hover,.plc-feat:hover,.dv-feat:hover,.pg-card:hover,
  .card:hover,.pg-info:hover,.pg-cta:hover,.bd-step:hover,.cue-step:hover,.cue-feat:hover,
  .cue-pcard:hover,.agent-tile:hover,.feat:hover,.s-card:hover,.pillar:hover,.step:hover,
  .cue-arc .a:hover{will-change:transform}
}
/* No transform runs under reduced motion, so there is nothing to promote. */
@media (prefers-reduced-motion:reduce){
  .btn-grad:hover,.btn-ink:hover,.btn-ghost:hover,.btn-line:hover,.btn.btn-soft:hover,
  .svc:hover,.kard:hover,.card:hover,.feat:hover,.s-card:hover,.pillar:hover,.step:hover,
  .agent-tile:hover,.ccard:hover,.tl-item:hover{will-change:auto}
}

/* ============================================================================================
   IRIS FACETS + GEO EVIDENCE
   --------------------------------------------------------------------------------------------
   Four bars that explain the two gauges, and the GEO panel that shows observed citation.
   Deliberately calm: no gradients, no glass, no counters. This is an intelligence readout, and
   it has to look like the number came from somewhere.

   GEO renders em-dash rather than 0 when nothing has been measured. A 0% would read as "AI never
   cites you" - a claim we have not earned and cannot support. See nx_iris_facets().
   ============================================================================================ */
.ir-facet-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:4px}
@media(max-width:820px){.ir-facet-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:440px){.ir-facet-grid{grid-template-columns:1fr}}
.ir-facet{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:13px 14px}
.ir-facet-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.ir-facet-lab{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
.ir-facet-val{font-family:var(--display);font-size:24px;font-weight:700;line-height:1}
.ir-facet-bar{height:5px;border-radius:99px;background:var(--line);margin:9px 0 8px;overflow:hidden}
.ir-facet-bar i{display:block;height:100%;border-radius:99px;transition:width .6s cubic-bezier(.2,.8,.2,1)}
.ir-facet-sub{font-size:12px;line-height:1.5;color:var(--muted)}
.ir-facet-note{font-size:12.5px;color:var(--muted);margin:14px 0 0;line-height:1.6}

.ir-geo-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.ir-geo-rate{font-family:var(--display);font-size:40px;font-weight:700;line-height:1}
.ir-geo-cap{font-size:14px;color:var(--muted)}
.ir-geo-weak,.ir-geo-wait{font-size:12.5px;color:var(--muted-2);line-height:1.6;margin:0 0 10px}
.ir-geo-comp{margin:14px 0 4px}
.ir-geo-comp b{display:block;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin-bottom:8px}
.ir-geo-comp ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.ir-geo-comp li{display:inline-flex;align-items:center;gap:7px;background:var(--panel-2);border:1px solid var(--line);border-radius:99px;padding:5px 11px;font-size:13px}
.ir-geo-comp li i{font-style:normal;font-size:11px;color:var(--muted-2)}
.ir-geo-q{display:grid;gap:9px;margin-top:14px}
.ir-geo-row{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;font-size:13.5px;line-height:1.55}
.ir-geo-row b{font-weight:600;display:block}
.ir-geo-row em{display:block;font-style:normal;font-size:12px;color:var(--muted-2);margin-top:2px}
.ir-geo-dot{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700}
.ir-geo-dot.yes{background:rgba(63,164,106,.16);color:#3FA46A}
.ir-geo-dot.no{background:rgba(179,38,30,.12);color:#B3261E}
@media(prefers-reduced-motion:reduce){.ir-facet-bar i{transition:none}}

/* ============================================================================================
   IRIS HERO PIPELINE
   --------------------------------------------------------------------------------------------
   Site -> Signals -> AEO -> Questions -> Cited? -> Score, with a pulse running the line and each
   node lighting as it arrives. The point is to SHOW the system rather than describe it: the
   product's whole argument is that readiness (AEO) and evidence (Cited) are different stages,
   and a pipeline makes that self-evident in a way a paragraph does not.

   Constraints this respects, deliberately:
     * transform/opacity/stroke-dashoffset only - no width, top or margin animation, nothing that
       triggers layout. The SVG has a fixed viewBox and aspect-ratio so it reserves its own space
       and contributes no CLS.
     * inline SVG, ~3KB, no request, no video. The Semrush reference is an MP4; on a hero that is
       hundreds of KB and competes with LCP for no extra clarity.
     * reduced-motion gets the FINISHED state, not a broken one - every node lit, no movement.
     * mobile drops the rival branch and shrinks type rather than scaling the desktop drawing down
       until the labels are unreadable.
   ============================================================================================ */
.iris-viz{margin:26px 0 0;padding:0}
.iris-viz svg{width:100%;height:auto;display:block;overflow:visible}
.iris-viz figcaption{font-size:13px;line-height:1.6;color:var(--muted);margin-top:14px;max-width:60ch}
.ivz-track{stroke:var(--line);stroke-width:2}
.ivz-flow{stroke:#DE6A1E;stroke-width:2;stroke-linecap:round;stroke-dasharray:70 628;stroke-dashoffset:70;
  animation:ivzFlow 5.2s cubic-bezier(.5,0,.5,1) infinite}
@keyframes ivzFlow{0%{stroke-dashoffset:70;opacity:0}6%{opacity:1}94%{opacity:1}100%{stroke-dashoffset:-628;opacity:0}}
.ivz-n circle{fill:var(--panel);stroke:var(--line);stroke-width:2;
  animation:ivzLit 5.2s ease-in-out infinite;animation-delay:calc(var(--i) * .62s)}
.ivz-n text{fill:var(--muted-2);font-family:var(--mono);font-size:12px;font-weight:600;text-anchor:middle;letter-spacing:.02em;
  animation:ivzTxt 5.2s ease-in-out infinite;animation-delay:calc(var(--i) * .62s)}
@keyframes ivzLit{0%,8%{stroke:var(--line);fill:var(--panel)}14%,30%{stroke:#DE6A1E;fill:var(--panel-2)}46%,100%{stroke:var(--line);fill:var(--panel)}}
@keyframes ivzTxt{0%,8%{fill:var(--muted-2)}14%,30%{fill:var(--text)}46%,100%{fill:var(--muted-2)}}
.ivz-end circle{stroke-width:2.5}
.ivz-end text{font-family:var(--display);font-size:13px}
.ivz-geo circle{stroke-dasharray:3 3}          /* dashed = measured, not assumed */
.ivz-rival line{stroke:var(--line);stroke-width:1.5;stroke-dasharray:2 3}
.ivz-rival text{fill:var(--muted-2);font-family:var(--mono);font-size:10px;text-anchor:middle;letter-spacing:.06em}
.ivz-rival{opacity:0;animation:ivzRival 5.2s ease-in-out infinite;animation-delay:2.5s}
@keyframes ivzRival{0%,4%{opacity:0}12%,34%{opacity:.85}44%,100%{opacity:0}}
@media(max-width:600px){
  .ivz-n text{font-size:15px}
  .ivz-end text{font-size:16px}
  .ivz-rival{display:none}                     /* the branch label cannot stay legible this small */
  .iris-viz figcaption{font-size:12.5px}
}
@media(prefers-reduced-motion:reduce){
  /* The finished state: everything lit, nothing moving. Not a blank or half-drawn diagram. */
  .ivz-flow{animation:none;stroke-dasharray:none;stroke-dashoffset:0;opacity:.5}
  .ivz-n circle{animation:none;stroke:#DE6A1E;fill:var(--panel-2)}
  .ivz-n text{animation:none;fill:var(--text)}
  .ivz-rival{animation:none;opacity:.85}
}
/* GEO shows "0/2" beside the percentage: a rate from two questions must not look like a
   population statistic. See nx_iris_facets_with_geo(). */
.ir-facet-frac{display:block;font-family:var(--mono);font-size:11px;font-weight:600;color:var(--muted-2);font-style:normal;text-align:right;margin-top:2px}

/* ==========================================================================================
   WORKSPACE HIERARCHY (Loquelle / Iris report)
   ------------------------------------------------------------------------------------------
   The report had eight sections at identical visual weight - gauges, facets, Apply the fix,
   quick wins, GEO, keyword targets, content plan, roadmap - so the eye had no entry point and
   the page read as a wall. Nothing is removed here; sections are RANKED.

       TIER 1  what changed        one dominant number, first thing on screen
       TIER 2  what to do next     the fix list, visually dominant
       TIER 3  investigate         per-page detail, collapsed by default
       TIER 4  raw technical       patches and code, deepest and collapsed

   Built on the existing tokens (--panel, --line, --grad, --muted) so it reads as the same
   product, not a redesign by a different company.
   ========================================================================================== */
.ir-hero{display:flex;align-items:center;gap:22px;flex-wrap:wrap;padding:20px 22px;margin:0 0 18px;
  border:1px solid var(--line);border-radius:16px;background:var(--panel-2);position:relative;overflow:hidden}
.ir-hero::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad)}
.ir-hero-num{font-family:var(--display,'Space Grotesk',sans-serif);font-weight:700;line-height:1;
  font-size:clamp(38px,6vw,58px);letter-spacing:-1px;display:flex;align-items:baseline;gap:10px}
.ir-hero-prev{font-size:.42em;font-weight:600;color:var(--muted);letter-spacing:0}
.ir-hero-arrow{font-size:.34em;color:var(--muted)}
.ir-hero-delta{font-size:.30em;font-weight:700;padding:3px 10px;border-radius:100px;letter-spacing:.2px}
.ir-hero-delta.up{color:#2E8A54;background:rgba(46,138,84,.12)}
.ir-hero-delta.down{color:#B3261E;background:rgba(179,38,30,.10)}
.ir-hero-delta.flat{color:var(--muted);background:var(--bg)}
.ir-hero-side{min-width:0;flex:1 1 240px}
.ir-hero-lab{font-family:var(--mono,monospace);font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin:0 0 4px}
.ir-hero-sub{font-size:13.5px;line-height:1.55;color:var(--text);margin:0}
@media(max-width:560px){.ir-hero{gap:14px;padding:16px}.ir-hero-num{font-size:40px}}

/* Tier 2 - the fix list is the product, so it gets the accent border and never collapses shut
   without telling you how many are inside. */
.ir-tier2{border-color:rgba(222,106,30,.45)!important;background:rgba(222,106,30,.05)}

/* collapsible sections (tiers 3 and 4) */
.ir-fold>.ir-foldbtn{all:unset;box-sizing:border-box;display:flex;width:100%;align-items:center;
  gap:10px;cursor:pointer;padding:13px 15px;font-weight:600;font-size:14.5px;color:var(--text);
  border-radius:12px}
.ir-fold>.ir-foldbtn:hover{background:var(--bg)}
.ir-fold>.ir-foldbtn:focus-visible{outline:2px solid #DE6A1E;outline-offset:2px}
.ir-fold>.ir-foldbtn .cnt{font-family:var(--mono,monospace);font-size:11.5px;font-weight:700;
  color:#DE6A1E;background:rgba(222,106,30,.12);border:1px solid rgba(222,106,30,.3);
  border-radius:100px;padding:1px 9px}
.ir-fold>.ir-foldbtn .chev{margin-left:auto;color:var(--muted);transition:transform .18s ease}
.ir-fold[data-open="1"]>.ir-foldbtn .chev{transform:rotate(180deg)}
.ir-fold>.ir-foldbody{display:none;padding:0 15px 14px}
.ir-fold[data-open="1"]>.ir-foldbody{display:block}
.ir-fold{border:1px solid var(--line);border-radius:12px;background:var(--panel);margin:0 0 10px}
.ir-tierlab{font-family:var(--mono,monospace);font-size:10.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin:22px 0 8px;display:flex;align-items:center;gap:9px}
.ir-tierlab::after{content:"";flex:1;height:1px;background:var(--line)}
@media(prefers-reduced-motion:reduce){.ir-fold>.ir-foldbtn .chev{transition:none}}

/* GEO action pack, the "what do I do about it" half of the citation check.
   Numbered, because these are ordered by impact and the order is the advice. Deliberately quieter
   than the score above it: the number is the finding, this is the follow-through. */
.ir-geo-act{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.ir-geo-act h5{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:14px;margin:0 0 4px}
.ir-geo-act-lead{margin:0 0 12px;font-size:13.5px;color:var(--muted);line-height:1.55}
.ir-geo-act ol{margin:0;padding:0;list-style:none;counter-reset:geoact}
.ir-geo-act li{counter-increment:geoact;position:relative;padding:0 0 14px 34px;margin:0}
.ir-geo-act li::before{content:counter(geoact);position:absolute;left:0;top:1px;width:22px;height:22px;
  border-radius:50%;background:rgba(222,106,30,.12);color:#DE6A1E;font:700 11.5px/22px var(--mono,monospace);
  text-align:center}
.ir-geo-act li b{display:block;font-size:14px;margin:0 0 2px}
.ir-geo-act li span{display:block;font-size:13px;line-height:1.6;color:var(--muted)}
.ir-geo-act li a{display:inline-block;margin-top:4px;font-size:12.5px;font-weight:600;color:#DE6A1E;text-decoration:none}
.ir-geo-act li a:hover{text-decoration:underline}

/* STICKY FOOTER. On a tall screen the workspace ran out of content long before the viewport ran
   out of height, so the footer sat in the middle of the page with a band of empty background
   beneath it - which reads as a broken page rather than a short one.

   Nothing in the stylesheet forced the document to fill the viewport. This is the standard
   three-line fix: body becomes a column, main takes the slack, footer keeps its natural height
   and is pushed to the bottom.

   Safe alongside the existing layout because position:fixed elements - the menu overlay, the tiQ
   launcher, the consent bar - are removed from flow and unaffected by their parent becoming a
   flex container. */
html{min-height:100%}
body{min-height:100vh;display:flex;flex-direction:column}
body>main{flex:1 0 auto}
body>footer,body>.footer{flex-shrink:0}

/* Category chip on the Iris result: detected, correctable, deliberately quiet. It is a statement
   about the page, not a call to action, so it must not compete with the scores beside it. */
.ir-cat{display:inline-flex;align-items:center;gap:8px;margin:10px 0 2px;padding:6px 12px;
  background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:99px;font-size:13px}
.ir-cat-lab{color:var(--muted);text-transform:uppercase;letter-spacing:.12em;font-size:10.5px;font-weight:700}
.ir-cat-val{color:var(--text)}
.ir-cat-edit{background:none;border:0;color:#DE6A1E;font:inherit;font-size:12.5px;cursor:pointer;text-decoration:underline;padding:0}
.ir-cat-sel{background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:4px 8px;font:inherit;font-size:12.5px}

/* THE SHRINKING BRAND - wordmark at rest, favicon-mark once the page moves. The chip was 200px
   of floating panel sitting on top of section headings the moment you scrolled. Width animates
   via max-width (auto cannot transition); the mark fades in with a slight rise so the change
   reads as intentional rather than as the logo breaking. Scroll up and it grows back. */
.brand-chip .nx-logo-d,.brand-chip .nx-logo-l{transition:max-width .38s cubic-bezier(.2,.8,.2,1),opacity .24s ease;max-width:220px}
.brand-chip .brand-mark{transition:max-width .38s cubic-bezier(.2,.8,.2,1),opacity .3s ease .1s,transform .3s ease .1s;max-width:0;opacity:0;transform:translateY(4px)}
@media(min-width:561px){
  html.nx-mini-brand .brand-chip .nx-logo-d,html.nx-mini-brand .brand-chip .nx-logo-l{max-width:0;opacity:0}
  html.nx-mini-brand .brand-chip .brand-mark{display:block;max-width:36px;opacity:1;transform:none}
  html.nx-mini-brand .brand-chip{padding:8px 10px}
}
@media(prefers-reduced-motion:reduce){.brand-chip .nx-logo-d,.brand-chip .nx-logo-l,.brand-chip .brand-mark{transition:none}}

/* MOBILE REGRESSION FROM THE SHRINKING BRAND. The base rule above hides .brand-mark with
   max-width:0 and opacity:0 so it can animate in on scroll. Mobile already shows the mark
   permanently via display:inline-block!important - but display cannot beat max-width:0, so the
   logo vanished on phones entirely. Mobile gets the mark visible at all times, no animation. */
@media(max-width:560px){
  .brand-chip .brand-mark{max-width:36px!important;opacity:1!important;transform:none!important}
}

/* CARD GRID for ranked report tiers. Collapsed sections used to stack as full-width bars - a
   corridor. Now they sit as cards, two or three abreast; an open card takes the whole row and
   closes its siblings (the JS in nx-rank.js drives that), so the report reads like a dashboard:
   map first, one subject at a time. */
.ir-tiergrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;margin:0 0 14px}
.ir-tiergrid>.ir-fold{margin:0;display:flex;flex-direction:column}
.ir-tiergrid>.ir-fold>.ir-foldbtn{flex-direction:column;align-items:flex-start;gap:6px;padding:14px 15px;min-height:74px}
.ir-tiergrid>.ir-fold>.ir-foldbtn .ir-foldico{font-size:20px;line-height:1}
.ir-tiergrid>.ir-fold>.ir-foldbtn .chev{position:absolute;right:12px;top:12px;margin:0}
.ir-tiergrid>.ir-fold>.ir-foldbtn{position:relative}
.ir-tiergrid>.ir-fold>.ir-foldbtn .cnt{margin-left:0}
.ir-tiergrid>.ir-fold:hover{border-color:#DE6A1E;transform:translateY(-2px)}
.ir-tiergrid>.ir-fold{transition:transform .18s ease,border-color .18s ease}
.ir-tiergrid>.ir-fold[data-open="1"]{transform:none}
.ir-fold>.ir-foldbtn .ir-foldico{margin-right:2px}
@media(max-width:560px){.ir-tiergrid{grid-template-columns:1fr 1fr}}

/* GET THE APPS, in the main menu on every page. Both installs used to be reachable only from a
   button far down /loquelle, and the logs recorded zero download clicks. Sits under the numbered
   nav, deliberately quieter than it so it reads as a utility, not a twelfth page. */
.menu-apps{margin-top:clamp(22px,4vh,44px);padding-top:22px;border-top:1px solid rgba(255,255,255,.14);display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.menu-apps-t{width:100%;font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:2px}
.menu-app{display:inline-flex;align-items:center;gap:12px;padding:11px 18px 11px 15px;border:1px solid rgba(255,255,255,.18);border-radius:14px;background:rgba(255,255,255,.04);color:#fff;text-decoration:none;transition:border-color .2s,background .2s,transform .2s}
.menu-app:hover{border-color:#DE6A1E;background:rgba(222,106,30,.12);transform:translateY(-2px)}
.menu-app>i{font-size:21px;color:#DE6A1E;flex:none}
.menu-app span{display:flex;flex-direction:column;line-height:1.25}
.menu-app b{font-family:var(--display);font-size:15px;font-weight:600}
.menu-app small{font-size:11.5px;color:rgba(255,255,255,.6);margin-top:2px}
@media(max-width:560px){.menu-app{width:100%}}

/* Visually hidden but read by screen readers. A placeholder is not a label: it disappears the
   moment someone types, and assistive tech does not treat it as a name. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ir-cat{flex-wrap:wrap}
.ir-cat-note{flex-basis:100%;color:var(--muted-2,#86846B);font-size:11px;line-height:1.4;letter-spacing:0;text-transform:none;font-weight:400}


/* ================= OLIVE ELEVATION (both themes) =================
   Olive carries STRUCTURE: section labels, navigation borders, container edges and the
   subheadings inside cards. Orange stays the colour of action. Light mode keeps its palette;
   these rules tint edges and labels only. */
/* section labels: olive on the light canvas is 3.2:1, too faint for a 14px label; these two shades
   clear 4.5:1 on both canvases (Lighthouse contrast audit) */
.slabel{color:#6B6A3C}
html[data-theme="dark"] .slabel{color:#A5A36A}
.slabel i{background:var(--olive)}
.brand-chip,.nav-chip{border-color:rgba(138,136,80,.28)}
html[data-theme="dark"] .brand-chip,html[data-theme="dark"] .nav-chip{border-color:rgba(184,182,150,.22)}
.burger{border-color:rgba(138,136,80,.35)}
.svc h3,.kard h3,.cue-feat h3,.cue-step h3,.cue-pcard h3,.pg-card h3,.dv-card h3,.bd-card h3,.ins-card h3,.feat h3,.s-card h3,.b-card h3,.agent-tile h3{color:var(--olive-ink)}
html[data-theme="dark"] .svc h3,html[data-theme="dark"] .kard h3,html[data-theme="dark"] .cue-feat h3,html[data-theme="dark"] .cue-step h3,html[data-theme="dark"] .cue-pcard h3,html[data-theme="dark"] .pg-card h3,html[data-theme="dark"] .dv-card h3,html[data-theme="dark"] .bd-card h3,html[data-theme="dark"] .ins-card h3,html[data-theme="dark"] .feat h3,html[data-theme="dark"] .s-card h3,html[data-theme="dark"] .b-card h3,html[data-theme="dark"] .agent-tile h3{color:var(--cream)}
html[data-theme="dark"] h1,html[data-theme="dark"] h2{color:var(--cream)}
html[data-theme="dark"] .lead,html[data-theme="dark"] p{color:var(--text)}
html[data-theme="dark"] .footer{background:var(--olive-deep);color:var(--cream)}
html[data-theme="dark"] .foot-grid p,html[data-theme="dark"] .foot-cta-t p{color:var(--muted)}
html[data-theme="dark"] .foot-col a{color:var(--muted)}html[data-theme="dark"] .foot-col a:hover{color:var(--orange-2)}
html[data-theme="dark"] .foot-col h6,html[data-theme="dark"] .foot-col .foot-h{color:var(--olive-mist)}
html[data-theme="dark"] .btn-ink{background:var(--panel-2);color:var(--cream);border-color:rgba(184,182,150,.22)}
/* the older dark rule above (line ~750) turns the hover white, and the cream label below vanished on it:
   a "Downgrade in account" pill read as a blank white blob on hover. Dark hover stays dark. */
html[data-theme="dark"] .btn-ink:hover{background:var(--panel-2);border-color:var(--orange-2);box-shadow:0 16px 34px rgba(222,106,30,.22)}
/* text links only. This used to be a bare a:hover, which outranks .btn-grad{color:#fff} and turned
   every orange button's label orange on hover (unreadable). Buttons, chips, cards and tiles keep
   their own hover colour. */
html[data-theme="dark"] a:not(.btn):not([class*="btn-"]):not(.nx-app):not(.menu-app):not(.tier):not(.agent-tile):not(.ins-card):not(.pg-card):not(.card):not(.brand-chip):not(.to-top):not(.cr-card):not(.nx-chip):hover{color:var(--orange-2)}
html[data-theme="dark"] .btn-grad:hover,html[data-theme="dark"] .btn-grad:focus{color:#fff}
html[data-theme="dark"] .btn-ink:hover{color:var(--cream)}
html[data-theme="dark"] ::selection{background:var(--orange);color:var(--cream-2)}
html[data-theme="dark"] .pl-card,html[data-theme="dark"] .card,html[data-theme="dark"] .svc,html[data-theme="dark"] .kard{border-color:rgba(184,182,150,.16)}
html[data-theme="dark"] .pl-card.pop{border-color:rgba(232,132,63,.55)}
html[data-theme="dark"] code,html[data-theme="dark"] pre{background:var(--ink);color:var(--cream)}
/* 9 Sep 2026: .pl-feat / .plc-feat are the feature LISTS inside a pricing card, not cards. The
   global card-lift rules above matched them too, so the inner list jumped 6px and grew an orange
   border when hovered, while the card around it also lifted. Lists stay still. */
.pl-feat,.plc-feat,.pl-feat:hover,.plc-feat:hover{transform:none!important;box-shadow:none!important;border-color:transparent!important;outline:0}

/* PHONES: the header chip must never overflow. With Sign in + theme + burger + a call-to-action
   it was 15px wider than a 375px screen (the CTA ran off the right edge on the guide, the
   comparison pages and every shared report). Tighter chip, smaller buttons, and the theme toggle
   steps aside when a CTA is present: the menu still has it. */
@media(max-width:430px){
  .nav-wrap{padding:0 10px}
  .brand-chip{padding:0 10px}
  .nav-chip{padding:0 6px;gap:4px}
  .nav-chip .btn{padding:8px 10px;font-size:12.5px}
  .nav-chip:has(.btn-grad) .nx-theme-btn{display:none}
  .nav-chip .btn-grad{white-space:nowrap}
}