); behind a phone; size and centre via --vs, --vx, --vy
.nx-voiced ...... on a .phone that carries a .voice inside it (rings spread behind the phone)
.nx-facts ....... facts strip at the bottom of the hero, icons in .nx-fi
.nx-steps ....... three steps; each .nx-step has a mini scene (.nx-mini, .nx-mphone, .nx-mflat, .nx-mguest)
.nx-stats ....... stat cards (.nx-stat, .nx-stat-n) with .nx-src source lines
.nx-data ........ chart card (.nx-chart, inline SVG) beside .nx-points (business points)
.nx-viewing ..... mode scene: Pocket Translate in a room (.nx-room backdrop; .nx-held phone with .nx-palm, .nx-thumb, .nx-tips)
.nx-call ........ mode scene: laptop call with a guest phone over it (.nx-callphone, .nx-tag)
.nx-link ........ small "link" chip between two phones
.nx-after ....... callout under the modes
.nx-field ....... term pack card (.nx-pack, .nx-terms) beside small cards (.nx-card)
.nx-trial ....... trial block: steps (.nx-tsteps) + email draft card (.nx-mail) with the mailto button
.nx-safe ........ safety cards (reuse .tcard) with small visuals (.nx-tv)
.nx-planhint .... one line under the pricing cards
Motion: transform and opacity only, paused off screen by app.js (.anim-off), off for prefers-reduced-motion. */
/* ---------- scope fixes ---------- */
.nx .phone-guest{display:block;color:var(--ink)}
.nx .panes.face .pane:first-child{transform:rotate(180deg)}
.nx .s-white .fi{background:rgba(8,69,205,.08)}
.nx .s-white .fi svg{stroke:var(--deep)}
.nx .s-white a:not(.btn):not(.cta){color:var(--deep)}
.nx .s-white a:not(.btn):not(.cta):hover{color:var(--blue)}
/* ---------- hero ---------- */
.nx-hero .hero-grid{grid-template-columns:1fr 1.08fr;align-items:center}
.nx-hero h1{max-width:15ch}
.nx-kicker{display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
.nx-kicker::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--grad)}
.nx-line{margin:18px 0 0;font-size:.92rem;color:var(--w-55)}
.nx-play{display:inline-flex;align-items:center;gap:9px}
.nx-play svg{width:22px;height:22px;flex:0 0 auto}
.nx-scene{margin:0;display:grid;gap:14px;min-width:0}
.nx-scene .scene-cap{margin:2px 0 0}
/* ---------- desk scene (frame 1) ---------- */
.desk{position:relative;width:100%;aspect-ratio:5/4;border-radius:24px;overflow:hidden;isolation:isolate;container-type:inline-size;
background:radial-gradient(115% 90% at 50% 44%,#2c3549 0%,#1b2233 56%,#131927 100%);
box-shadow:0 50px 90px -40px rgba(0,0,0,.9),inset 0 0 0 1px rgba(255,255,255,.07)}
.desk-art{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.desk-phone{position:absolute;left:50%;top:50%;z-index:2;width:35%;container-type:inline-size;transform:translate(-50%,-50%) rotate(-6deg)}
.desk-phone .phone{width:100%;max-width:none;padding:4cqw;border-radius:15cqw;
box-shadow:0 14cqw 22cqw -6cqw rgba(0,0,0,.78),0 0 0 1px rgba(255,255,255,.09),inset 0 0 0 1px rgba(255,255,255,.1)}
.desk-phone .phone::before{top:6.4cqw;width:22%;height:3.6cqw;margin-left:-11%}
.desk-phone .phone::after{display:none}
.desk-phone .ph-screen{border-radius:11.5cqw;box-shadow:inset 0 0 0 2px #05080e}
.desk-phone .shell{height:100%;display:flex;flex-direction:column;gap:0;padding:12.5cqw 3.4cqw 3.4cqw;max-width:none;--sub:6.3cqw;font-family:'Manrope','Segoe UI',system-ui,sans-serif}
.desk-phone .panes-wrap{flex:1;min-height:0;display:flex;flex-direction:column;gap:0}
.desk-phone .panes{display:grid;grid-template-columns:1fr;grid-template-rows:1fr 1fr;grid-auto-rows:auto;gap:3.4cqw;flex:1;min-height:0}
.desk-phone .pane{border-radius:6.5cqw;min-height:0;box-shadow:none}
.desk-phone .pane-h2{display:flex;align-items:center;gap:2.4cqw;padding:2.8cqw 4.6cqw 2.2cqw;font-size:max(6px,4.2cqw);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);border-bottom:1px solid var(--line);line-height:1.2}
.desk-phone .tag{font-size:max(5.5px,3.4cqw);padding:.15em .6em}
.desk-phone .text{padding:2.8cqw 4.8cqw 4cqw;font-size:var(--sub);line-height:1.36;-webkit-mask-image:none;mask-image:none}
.desk-phone .brow{margin-top:2.2cqw}
.desk-phone .spk{font-size:.74em;margin-bottom:0}
.desk-mid{position:absolute;left:50%;top:calc(50% + 4.6cqw);z-index:3;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:2cqw;white-space:nowrap;
padding:1.8cqw 4.4cqw;border-radius:999px;font-size:max(6px,3.9cqw);font-weight:700;line-height:1.2;color:var(--ink);background:var(--surface);
box-shadow:0 0 0 1px var(--line),0 2cqw 5cqw rgba(0,0,0,.45)}
.desk-mid i{width:2.6cqw;height:2.6cqw;min-width:4px;min-height:4px;border-radius:50%;background:var(--green);box-shadow:0 0 0 1cqw var(--green-soft)}
.desk-tag{position:absolute;z-index:4;padding:5px 11px;border-radius:999px;font-size:clamp(10px,2.3cqw,12.5px);font-weight:600;line-height:1.3;letter-spacing:.01em;white-space:nowrap;
color:rgba(255,255,255,.8);background:rgba(10,15,26,.66);box-shadow:inset 0 0 0 1px rgba(255,255,255,.13)}
.desk-tag b{color:#36CCFF;font-weight:700}
.desk-tag-top{left:3%;top:3.5%}
.desk-tag-bot{right:3%;bottom:3.5%}
.desk-n{position:absolute;z-index:4;right:3%;top:3.5%;display:grid;place-items:center;width:clamp(20px,4.4cqw,26px);height:clamp(20px,4.4cqw,26px);border-radius:50%;
font-size:clamp(10px,2.3cqw,12px);font-weight:800;color:#fff;background:rgba(10,15,26,.66);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.nx-say{color:var(--ink);background:rgba(54,204,255,.16);border-radius:3px;box-shadow:0 0 0 2px rgba(54,204,255,.16)}
/* ---------- frame 2: the phone reads the translation aloud ---------- */
.nx-frame2{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(14px,3vw,22px);align-items:center}
.desk-voice{aspect-ratio:1;border-radius:20px}
.desk-voice .desk-phone{width:50%;top:52%}
.desk-voice .desk-n{left:5%;right:auto;top:5%}
.nx-said{margin:0;display:flex;flex-direction:column;gap:10px}
.nx-bub{margin:0;padding:11px 14px;border-radius:14px;font-size:15px;line-height:1.45;color:var(--w-70);background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--w-12)}
.nx-bub b{display:block;font-size:11.5px;font-weight:700;letter-spacing:.02em;color:var(--w-55);margin-bottom:2px}
.nx-bub-voice{display:flex;gap:10px;align-items:flex-start;color:#fff;background:rgba(19,119,250,.16);box-shadow:inset 0 0 0 1px rgba(54,204,255,.38)}
.nx-bub-voice svg{flex:0 0 18px;width:18px;height:18px;margin-top:2px;fill:none;stroke:var(--cyan);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nx-said .nx-note{margin:2px 0 0;font-size:12.5px;line-height:1.5;color:var(--w-55)}
/* ---------- sound rings ---------- */
.voice{position:absolute;left:var(--vx,50%);top:var(--vy,50%);width:var(--vs,90%);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;z-index:1}
.voice i{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(54,204,255,.62);opacity:0;animation:nx-ring 2.8s cubic-bezier(.2,.6,.3,1) infinite}
.voice i:nth-child(2){animation-delay:.93s}
.voice i:nth-child(3){animation-delay:1.86s}
@keyframes nx-ring{0%{transform:scale(.4);opacity:0}14%{opacity:.95}100%{transform:scale(1);opacity:0}}
.nx-voiced{isolation:isolate}
/* Rings around a voiced phone must not widen the page on narrow screens */
.mode-art:has(.nx-voiced){overflow-x:clip}
.nx-voiced>.voice{z-index:-1;--vs:200%}
.nx-voiced>.voice i{border-color:rgba(54,204,255,.75)}
@media (prefers-reduced-motion:reduce){
.voice i{animation:none !important;opacity:.55}
.voice i:nth-child(1){transform:scale(.55)}
.voice i:nth-child(2){transform:scale(.75);opacity:.35}
.voice i:nth-child(3){transform:scale(.95);opacity:.18}
}
/* ---------- facts strip ---------- */
.nx-facts{position:relative;z-index:1;border-top:1px solid var(--w-07);padding:20px 0 24px}
.nx-facts ul{list-style:none;margin:0 auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.nx-facts li{display:flex;align-items:center;gap:12px;min-width:0;font-size:14.5px;line-height:1.35;color:var(--w-70)}
.nx-facts b{color:#fff;font-weight:700}
.nx-fi{flex:0 0 38px;height:38px;border-radius:11px;display:grid;place-items:center;background:rgba(19,119,250,.14)}
.nx-fi svg{width:20px;height:20px;fill:none;stroke:var(--cyan);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.nx-factbtn{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:left;line-height:1.35;border-bottom:1px dashed var(--w-40);transition:color var(--t1) var(--ease),border-color var(--t1) var(--ease)}
.nx-factbtn:hover,.nx-factbtn[aria-expanded="true"]{color:#fff;border-bottom-color:var(--cyan)}
/* ---------- how it works: steps with mini scenes ---------- */
.nx-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.nx-step{border:1px solid var(--w-12);border-radius:18px;overflow:hidden;background:rgba(255,255,255,.035)}
.nx-step-body{padding:18px 22px 24px}
.nx-step h3{display:flex;align-items:center;gap:10px;margin:0 0 8px;font-size:1.08rem;line-height:1.3;color:#fff}
.nx-num{flex:0 0 28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:800;color:#fff;background:var(--grad-btn)}
.nx-step-body p{margin:0;color:var(--w-55);font-size:.93rem;line-height:1.55}
.nx-mini{position:relative;height:200px;overflow:hidden;container-type:inline-size;font-family:'Manrope','Segoe UI',system-ui,sans-serif;
background:radial-gradient(ellipse at 50% 80%,rgba(28,129,227,.22),transparent 68%),#0d1322;border-bottom:1px solid var(--w-07)}
.nx-mini-desk{background:radial-gradient(110% 95% at 50% 45%,#2a3347 0%,#1a2131 60%,#131927 100%)}
.nx-mini-art{position:absolute;inset:0;width:100%;height:100%;display:block}
.nx-chip{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;font-size:11.5px;font-weight:700;line-height:1.2;white-space:nowrap;
color:#93a0b8;background:#131a2b;box-shadow:inset 0 0 0 1px #24304a}
.nx-chip-lang{color:#5b9bff;background:rgba(91,155,255,.14);box-shadow:inset 0 0 0 1px rgba(91,155,255,.4)}
.nx-chip-on{color:#fff;background:#1c55e0;box-shadow:none}
.nx-mphone{position:absolute;border-radius:24px;padding:6px;background:linear-gradient(160deg,#2a3242,#0e131d);
box-shadow:0 30px 60px -24px rgba(0,0,0,.9),inset 0 0 0 1px rgba(255,255,255,.1)}
.nx-mp-scr{height:100%;border-radius:19px;background:#0b101c;padding:24px 12px 12px;display:flex;flex-direction:column;gap:12px;color:#e8ecf6;box-shadow:inset 0 0 0 2px #05080e}
.nx-mp-up{left:50%;top:22px;width:min(212px,74%);height:250px;transform:translateX(-50%)}
.nx-mp-langs{display:flex;align-items:center;justify-content:center;gap:6px}
.nx-mp-langs i{font-style:normal;color:#93a0b8;font-size:13px}
.nx-mp-scenes{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.nx-mp-start{display:block;text-align:center;padding:9px;border-radius:999px;font-size:12px;font-weight:800;color:#fff;background:linear-gradient(135deg,#1c55e0,#1c81e3)}
/* a phone lying flat, seen from above, in a mini scene */
.nx-mflat{position:absolute;top:50%;left:50%;width:80px;aspect-ratio:9/18.5;padding:4px;border-radius:16px;transform:translate(-50%,-50%) rotate(-5deg);
background:linear-gradient(160deg,#2a3242,#0e131d);box-shadow:0 18px 30px -10px rgba(0,0,0,.8),inset 0 0 0 1px rgba(255,255,255,.1)}
.nx-mflat-in{height:100%;border-radius:12px;background:#0b101c;padding:12px 4px 4px;display:grid;grid-template-rows:1fr 1fr;gap:4px}
.nx-mf-half{border-radius:8px;background:#131a2b;box-shadow:inset 0 0 0 1px #24304a;padding:5px 6px;display:flex;flex-direction:column;justify-content:flex-end;gap:3px;min-height:0;overflow:hidden}
.nx-mf-top{transform:rotate(180deg)}
.nx-mf-lang{font-size:6.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#93a0b8}
.nx-mf-half p{margin:0;font-size:8.5px;line-height:1.3;color:#e8ecf6}
.nx-turn{position:absolute;left:calc(50% + 52px);top:22%;width:46px;height:auto;fill:none;stroke:var(--cyan);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.nx-turn-l{position:absolute;left:calc(50% + 58px);top:calc(22% + 58px);font-size:12px;font-weight:800;color:var(--cyan)}
.nx-mini-3 .nx-mflat{left:36%}
.nx-mguest{position:absolute;left:79%;top:50%;width:84px;aspect-ratio:9/17;padding:4px;border-radius:15px;transform:translate(-50%,-50%) rotate(6deg);
background:linear-gradient(160deg,#2a3242,#0e131d);box-shadow:0 18px 30px -10px rgba(0,0,0,.8),inset 0 0 0 1px rgba(255,255,255,.1)}
.nx-mguest-in{height:100%;border-radius:11px;background:#f4f6fa;padding:12px 6px 6px;display:flex;flex-direction:column;gap:5px;color:#10151d}
.nx-mguest-in .nx-mf-lang{color:#66707e}
.nx-mguest-in p{margin:auto 0 0;font-size:8px;line-height:1.3;color:#10151d}
.nx-mguest-in small{font-size:5.5px;color:#66707e;text-align:center}
.nx-mini-3 .nx-link{position:absolute;left:60%;top:50%;transform:translate(-50%,-50%)}
/* link chip between two devices */
.nx-link{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:999px;font-size:11px;font-weight:700;color:#fff;background:#1c55e0;box-shadow:0 6px 16px -6px rgba(8,69,205,.9);z-index:3;white-space:nowrap}
.nx-link svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
/* ---------- why it pays: stats, chart, points (white section) ---------- */
.nx-why .lead{margin-bottom:10px}
.nx-why .nx-leadsrc{margin:0 0 32px;font-size:12.5px;color:var(--ink-55)}
.nx-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0 0 16px}
.nx-stat,.nx-chart,.nx-points li{border:1px solid var(--ink-10);border-radius:18px;background:#fff;box-shadow:0 1px 2px rgba(10,15,26,.05),0 24px 48px -30px rgba(8,69,205,.28)}
.nx-stat{display:flex;flex-direction:column;gap:10px;padding:22px 22px 18px}
.nx-stat-n{font-size:clamp(2rem,3.4vw,2.6rem);font-weight:760;letter-spacing:-.035em;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.nx-stat p{margin:0;color:var(--ink-70);font-size:.95rem;line-height:1.5}
.nx-src{margin:auto 0 0 !important;padding-top:10px;border-top:1px solid var(--ink-10);font-size:12.5px !important;line-height:1.5 !important;color:var(--ink-55) !important}
.nx-srcline{margin:0 0 28px;font-size:12.5px;color:var(--ink-55)}
.nx-data{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px;align-items:start}
.nx-chart{margin:0;padding:22px 22px 18px}
.nx-chart h3{margin:0 0 4px;font-size:1.1rem}
.nx-chart .nx-sub{margin:0 0 12px;font-size:.9rem;color:var(--ink-55)}
.nx-chart svg{display:block;width:100%;height:auto;overflow:visible}
.nx-chart .gl{stroke:var(--ink-10);stroke-width:1}
.nx-chart .base{stroke:rgba(10,15,26,.3);stroke-width:1}
.nx-chart text{font-family:inherit;font-size:10px}
.nx-chart .ax{fill:var(--ink-55)}
.nx-chart .val{fill:var(--ink);font-weight:700;paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round}
.nx-chart .bar{fill:#0841c4}
.nx-chart .bar-last{fill:#052a80}
.nx-chart .ref{stroke:#1c81e3;stroke-width:1.2;stroke-dasharray:4 3}
.nx-chart .refl{fill:#1c81e3;font-weight:700}
.nx-chart figcaption{margin:12px 0 0;font-size:.95rem;line-height:1.5;color:var(--ink-70)}
.nx-chart figcaption small{display:block;margin-top:8px;font-size:12.5px;color:var(--ink-55)}
.nx-chart .bar{transform-box:fill-box;transform-origin:50% 100%;transition:transform .9s var(--ease);transition-delay:calc(var(--i,0) * 70ms)}
.js .nx-chart.rv:not(.in) .bar{transform:scaleY(.02)}
.nx-points{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.nx-points li{display:flex;gap:16px;align-items:flex-start;padding:20px}
.nx-points p{margin:0;color:var(--ink-70);font-size:.95rem;line-height:1.55}
.nx-points p b{color:var(--ink)}
.nx-points .nx-src{margin-top:10px !important}
.nx-points .fi{flex:0 0 44px}
/* ---------- modes: scenes adapted from the main page ---------- */
.nx .scene-room{position:relative}
.nx .scene-room .nx-link{position:absolute;left:50%;bottom:14%;transform:translateX(-50%)}
.nx .phone-guest{transform:rotate(3deg) translateY(14px)}
.nx .phone-guest .ph-screen{background:#f4f6fa}
.nx .phone-guest .viewer-shell{height:100%;padding:30px 10px 10px;gap:8px}
.nx .phone-guest .top{flex-wrap:nowrap;gap:6px}
.nx .phone-guest .brand{gap:6px;align-items:center;flex-wrap:nowrap;min-width:0}
.nx .phone-guest .sub{font-size:10.5px;font-weight:700;color:var(--ink)}
.nx .phone-guest .controls{flex-wrap:nowrap;gap:4px}
.nx .phone-guest .pill{font-size:9.5px;padding:3px 7px}
.nx .phone-guest .viewer-pane{flex:1;min-height:0}
.nx .phone-guest .text{padding:8px 10px 10px;font-size:var(--sub,12px);line-height:1.4;-webkit-mask-image:none;mask-image:none}
.nx .phone-guest .spk{font-size:.7em}
.nx .phone-guest .vfoot{margin:2px auto 0;font-size:8.5px}
.nx .phone-host .pane:first-child .pane-h2{border-bottom:1px solid var(--line)}
/* Pocket Translate in a room, phone in the agent's hand */
.nx-viewing{position:relative;display:flex;justify-content:center;align-items:flex-start;padding:26px 0 64px;overflow:hidden;border-radius:20px}
.nx-room{position:absolute;inset:0;width:100%;height:100%;display:block}
.nx-viewing .phone-pocket{position:relative;z-index:2;width:46%;max-width:230px;transform:rotate(-4deg)}
/* the agent's hand: palm and sleeve behind the phone, thumb and fingertips over its edges */
.nx-held{isolation:isolate}
.nx-palm{position:absolute;z-index:-1;left:0;top:70%;width:100%;height:auto}
.nx-thumb{position:absolute;z-index:3;left:-5%;top:69%;width:15%;height:12.5%;border-radius:48% 48% 46% 46%/42% 42% 58% 58%;background:#e6b894;box-shadow:inset -3px -3px 0 rgba(160,104,70,.28);transform:rotate(-16deg)}
.nx-tips{position:absolute;z-index:3;right:-3.5%;top:63%;width:9%;height:20%;display:flex;flex-direction:column;justify-content:space-between}
.nx-tips i{display:block;height:24%;border-radius:999px;background:#e6b894;box-shadow:inset -2px -2px 0 rgba(160,104,70,.25)}
.nx-tips i:nth-child(2){margin-right:-12%}
.pk-flip{transform:rotate(180deg)}
.nx .pk-txt + .pk-txt{margin-top:4px}
.nx .pk-txt.pk-old{color:#66707e;margin-top:auto}
/* laptop call with the buyer's phone over it */
.nx-call{position:relative;container-type:inline-size}
.nx-call .tile .nx-duo{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center}
.nx-call .tile .nx-duo .pp{width:42%;margin:0 -4% -5%}
.nx-callphone{position:absolute;z-index:3;right:-3%;bottom:-2%;width:31%;container-type:inline-size}
.nx-callphone .phone{width:100%;max-width:none;padding:4cqw;border-radius:16cqw;transform:rotate(5deg)}
.nx-callphone .phone::before{top:6.5cqw;height:3.8cqw}
.nx-callphone .ph-screen{border-radius:12cqw}
.nx .nx-callphone .viewer-shell{padding:13cqw 4.5cqw 4cqw;gap:3.5cqw}
.nx .nx-callphone .logomark{height:7cqw}
.nx .nx-callphone .viewer-shell .top .sub{display:inline;font-size:max(6px,5.4cqw)}
.nx .nx-callphone .viewer-shell .controls{flex-wrap:nowrap}
.nx .nx-callphone .pill{font-size:max(5.5px,4.6cqw);padding:1.2cqw 3cqw}
.nx .nx-callphone .text{--sub:max(7px,6.6cqw);padding:3cqw 4.5cqw 4cqw}
.nx .nx-callphone .vfoot{font-size:max(5px,4.2cqw)}
.nx .nx-callphone .phone-guest{width:100%;max-width:none;flex:none;zoom:1;transform:rotate(5deg)}
.nx-tag{position:absolute;z-index:4;right:-1%;bottom:calc(100% + 8px);padding:4px 10px;border-radius:999px;font-size:11.5px;font-weight:600;white-space:nowrap;color:rgba(255,255,255,.8);background:rgba(10,15,26,.8);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.nx-tag b{color:#36CCFF}
/* after the modes */
.nx-after{display:flex;gap:18px;align-items:flex-start;margin-top:clamp(32px,5vw,48px);padding:22px 24px;border-radius:var(--r);border:1px solid rgba(54,204,255,.3);background:rgba(28,129,227,.1)}
.nx-after p{margin:0;color:var(--w-70);font-size:.97rem;line-height:1.55}
.nx-after p+p{margin-top:8px}
.nx-after b{color:#fff}
.nx-after .fi{flex:0 0 44px}
/* ---------- built for your field (white section) ---------- */
.nx-field{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px;align-items:stretch}
.nx-pack{border-radius:20px;background:var(--ink);color:#fff;padding:26px 26px 22px;box-shadow:0 30px 60px -36px rgba(8,69,205,.6)}
.nx-pack h3{margin:0 0 8px;font-size:1.15rem;color:#fff}
.nx-pack>p{margin:0;color:var(--w-70);font-size:.95rem;line-height:1.6}
.nx-pack-ui{margin-top:20px;border-radius:14px;background:#131a2b;box-shadow:inset 0 0 0 1px #24304a;padding:14px 16px 6px;font-family:'Manrope','Segoe UI',system-ui,sans-serif}
.nx-pack-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:10px;border-bottom:1px solid #24304a}
.nx-pack-head .nx-chip-on{font-size:12px}
.nx-pack-head span:last-child{font-size:11px;font-weight:700;color:#93a0b8;letter-spacing:.06em;text-transform:uppercase}
.nx-terms{list-style:none;margin:0;padding:0}
.nx-terms li{display:grid;grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr);gap:8px;align-items:center;padding:9px 0;border-bottom:1px solid #1d2740;font-size:14px;line-height:1.35}
.nx-terms li:last-child{border-bottom:0}
.nx-terms .es{color:#fff;font-weight:700}
.nx-terms .en{color:#93a0b8}
.nx-terms i{font-style:normal;color:var(--cyan);text-align:center}
.nx-cards{display:grid;gap:12px;align-content:start}
.nx-card{display:flex;gap:16px;align-items:flex-start;padding:20px;border:1px solid var(--ink-10);border-radius:16px;background:#fff;box-shadow:0 1px 2px rgba(10,15,26,.05),0 24px 48px -30px rgba(8,69,205,.25)}
.nx-card .fi{flex:0 0 44px}
.nx-card h3{margin:2px 0 6px;font-size:1.04rem;line-height:1.3}
.nx-card p{margin:0;color:var(--ink-70);font-size:.93rem;line-height:1.55}
/* ---------- trial (ink section) ---------- */
.nx-trial{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:start}
.nx-trial .lead{max-width:56ch}
.nx-trial h3{margin:30px 0 16px;font-size:1.02rem;color:#fff}
.nx-tsteps{list-style:none;margin:0;padding:0;counter-reset:nxt}
.nx-tsteps li{position:relative;padding:3px 0 20px 46px;color:var(--w-70);font-size:.97rem;line-height:1.5}
.nx-tsteps li::before{counter-increment:nxt;content:counter(nxt);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:800;color:#fff;background:var(--grad-btn)}
.nx-tsteps li::after{content:"";position:absolute;left:14.5px;top:34px;bottom:4px;width:1px;background:var(--w-12)}
.nx-tsteps li:last-child{padding-bottom:0}
.nx-tsteps li:last-child::after{display:none}
.nx-mail{border-radius:18px;background:#0d1424;border:1px solid var(--w-12);overflow:hidden;box-shadow:0 40px 80px -40px rgba(0,0,0,.9)}
.nx-mail-bar{display:flex;align-items:center;gap:7px;padding:12px 16px;border-bottom:1px solid var(--w-07)}
.nx-mail-bar i{width:9px;height:9px;border-radius:50%;background:var(--w-12)}
.nx-mail-bar span{margin-left:8px;font-size:12.5px;font-weight:600;color:var(--w-55)}
.nx-mail-row{display:flex;gap:12px;padding:11px 18px;border-bottom:1px solid var(--w-07);font-size:14px;min-width:0}
.nx-mail-row span{flex:0 0 58px;color:var(--w-40)}
.nx-mail-row b{color:#fff;font-weight:600;min-width:0;overflow-wrap:anywhere}
.nx-mail-body{padding:16px 18px 6px;font-size:14px;color:var(--w-70)}
.nx-mail-body p{margin:0}
.nx-mail-body ul{list-style:none;margin:12px 0 0;padding:0}
.nx-mail-body li{display:grid;grid-template-columns:6px minmax(0,1fr);column-gap:12px;row-gap:2px;align-items:baseline;padding:9px 0;border-bottom:1px dashed var(--w-12);line-height:1.4;color:#fff}
.nx-mail-body li:last-child{border-bottom:0}
.nx-mail-body li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cyan);transform:translateY(-2px)}
.nx-mail-body li span{grid-column:2;color:var(--w-55);font-size:12.5px}
.nx-mail-foot{padding:14px 18px 20px;border-top:1px solid var(--w-07)}
.nx-mail-foot .btn{width:100%}
.nx-mail-foot .micro{max-width:none;margin-top:12px}
.nx-self{margin:18px 0 0;font-size:.95rem;color:var(--w-70)}
.nx-self a{font-weight:600;white-space:nowrap}
/* ---------- pricing line ---------- */
.nx-planhint{margin:22px auto 0;max-width:760px;padding:14px 18px;border-radius:14px;background:#fff;border:1px solid var(--ink-10);font-size:.95rem;line-height:1.55;color:var(--ink-70);text-align:center}
.nx-planhint b{color:var(--ink)}
/* ---------- safety and limits (ink section) ---------- */
.nx-safe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0 0 40px}
.nx-safe .tcard:first-child{grid-column:span 2}
.nx-tv{height:96px;border-radius:12px;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 72%,rgba(28,129,227,.2),transparent 70%)}
.nx-tv svg{width:auto;height:70px;fill:none;stroke:var(--w-55);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nx-tv .ac{stroke:var(--cyan)}
.nx-tv .fl{fill:rgba(54,204,255,.16);stroke:none}
.nx-tipsh{margin:0 0 16px;font-size:1.15rem;color:#fff}
/* headings followed directly by a grid */
.nx h2+.nx-steps,.nx h2+.nx-field,.nx h2+.nx-safe{margin-top:30px}
/* ---------- final ---------- */
.nx .s-final .cta-row{justify-content:center}
/* ================= responsive ================= */
@media (max-width:1000px){
.nx-facts ul{grid-template-columns:repeat(2,minmax(0,1fr))}
.nx-steps{grid-template-columns:1fr;max-width:560px}
.nx-stats{grid-template-columns:1fr}
.nx-data,.nx-field,.nx-trial{grid-template-columns:1fr}
}
@media (max-width:900px){
.nx-hero .hero-copy>.nx-kicker{order:0;margin-bottom:0}
.nx-hero .hero-scene{width:100%;max-width:560px}
.nx-safe{grid-template-columns:1fr}
.nx-safe .tcard:first-child{grid-column:auto}
.nx .mode-art:has(.nx-call){width:100%}
}
@media (max-width:760px){
.desk{aspect-ratio:1;border-radius:20px}
.desk-phone{width:44%}
.desk-voice{aspect-ratio:1}
.desk-voice .desk-phone{width:52%}
.desk-tag{padding:4px 9px}
.nx-frame2{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:12px}
.nx-bub{padding:9px 11px;font-size:13px}
.nx-bub b{font-size:10.5px}
.nx-facts{padding:16px 0 20px}
.nx-facts ul{gap:14px 12px}
.nx-facts li{font-size:13px;gap:10px}
.nx-fi{flex-basis:32px;height:32px;border-radius:9px}
.nx-fi svg{width:17px;height:17px}
.nx-chart{padding:18px 14px 16px}
.nx-chart text{font-size:13px}
.nx-points li,.nx-card{padding:18px 16px}
.nx-pack{padding:22px 18px 18px}
.nx-terms li{font-size:13px}
.nx-after{flex-direction:column;gap:12px;padding:20px 18px}
.nx .phone-guest{width:214px;max-width:none;flex:0 0 auto;transform:none}
.nx .scene-room{gap:3%}
.nx-voiced>.voice{--vs:150%}
.nx .scene-room .nx-link{bottom:8%}
.nx-viewing{padding-top:18px}
.nx-viewing .phone-pocket{width:214px;transform:rotate(-3deg)}
.nx-viewing{padding-bottom:48px}
.nx-callphone{width:33%;right:-2%}
.nx-tag{font-size:10px;padding:3px 8px}
.nx-mail-row{padding:10px 14px}
.nx-mail-body{padding:14px 14px 4px}
.nx-mail-foot{padding:14px 14px 18px}
}
@media (max-width:520px){.nx .phone-guest{zoom:.7}}
@media (max-width:359px){.nx .phone-guest{zoom:.6}}
/* ---------- "For businesses" plaque with a request form (v3, 2026-10-31) ----------
Reusable on every niche page, inside the pricing section (white), after the plan note:
.nx-biz-copy (.nx-biz-eyebrow, h3, p) + form.nx-biz-form[data-mailto][data-subject]
fields: .nx-biz-grid > label.nx-in (span + input/select/textarea), .nx-in-wide for the message; small lines .nx-biz-fine
No backend: niche.js turns the filled form into an email to office@ (mailto). New classes only, nothing above changes. */
.nx-biz{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(22px,4vw,48px);margin-top:28px;padding:clamp(22px,3vw,32px);
border:1px solid var(--ink-10);border-radius:20px;background:#fff;scroll-margin-top:90px;
box-shadow:0 1px 2px rgba(10,15,26,.06),0 24px 48px -28px rgba(8,69,205,.2)}
.nx-biz-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--deep)}
.nx-biz-eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--grad)}
.nx-biz h3{margin:12px 0 10px;font-size:clamp(1.25rem,2.2vw,1.6rem);line-height:1.25;letter-spacing:-.015em}
.nx-biz-copy p{margin:0;color:var(--ink-70);font-size:.98rem;line-height:1.6}
.nx-biz-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px}
.nx-in{display:flex;flex-direction:column;gap:6px;min-width:0}
.nx-in>span{font-size:13px;font-weight:600;color:var(--ink-70)}
.nx-in-wide{grid-column:1/-1}
.nx-in input,.nx-in select,.nx-in textarea{width:100%;min-width:0;margin:0;font:inherit;font-size:16px;line-height:1.35;color:var(--ink);background:#f6f8fc;
border:1px solid var(--ink-10);border-radius:10px;padding:10px 12px;transition:border-color var(--t1) var(--ease),background-color var(--t1) var(--ease),box-shadow var(--t1) var(--ease)}
.nx-in textarea{resize:vertical;min-height:84px}
.nx-in input::placeholder,.nx-in textarea::placeholder{color:var(--ink-40)}
.nx-in input:focus,.nx-in select:focus,.nx-in textarea:focus{outline:none;border-color:var(--azure);background:#fff;box-shadow:0 0 0 3px rgba(28,129,227,.16)}
.nx-biz-form .btn{margin-top:16px;cursor:pointer;font-family:inherit}
.nx-biz-fine{margin:10px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink-55)}
.nx-biz-fine+.nx-biz-fine{margin-top:4px}
@media (max-width:900px){.nx-biz{grid-template-columns:1fr}}
@media (max-width:560px){.nx-biz-grid{grid-template-columns:1fr}.nx-biz-form .btn{width:100%}}