/* Reflex product page (/reflex), pass 3 (audit 3). Everything page-specific lives here, prefixed rx-.
   Shared system: tokens, fonts, .hero/.stage/.floor, .frag, .head, .hx, .panel-wide, .rv,
   .agent-cards/.acard, .nexus, .qa, .cta, .trust and .grain come from site.css / glass.css.
   Rules: tokens only (no hard-coded blacks), no fonts defined here (var(--display) / var(--body),
   weights 600 for headlines), the nav is the only blurred layer, every stage uses the hero's
   floor + fragment pattern, white reading sections in between, each section carries one accent
   (--acc, orange and violet alternating), reveals run in reverse (reflex.js), depth on transform. */

/* ─── Section accents: orange / violet, alternating; green only for booked / done ─────── */
.rx-sec{--acc:#F25A1C;--acc-soft:rgba(242,90,28,.12);--sec:var(--acc)}
.rx-s-nexus,.rx-s-mo,.rx-s-tech,.rx-s-faq{--acc:#7B61FF;--acc-soft:rgba(123,97,255,.13)}
.rx-s-ctl,.rx-s-who,.rx-s-ea,.rx-s-crew{--acc:#F25A1C;--acc-soft:rgba(242,90,28,.12)}
.rx-s-aria{--acc:#7B61FF;--acc-soft:rgba(123,97,255,.13)}
.rx-sec .eyebrow{color:var(--acc)}
/* a gradient hairline above every section eyebrow */
.rx-sec .head>div:first-child,.rx-sec .faq>.rv,.rx-join>.rv{position:relative;padding-top:16px}
.rx-sec .head>div:first-child::before,.rx-sec .faq>.rv::before,.rx-join>.rv::before{content:"";position:absolute;left:0;top:0;width:56px;height:3px;border-radius:3px;background:var(--brand);transform-origin:left center;transition:transform .9s var(--ease-out) .1s}
.js .rx-sec .head.rv:not(.on)>div:first-child::before,.js .rx-sec .faq>.rv:not(.on)::before,.js .rx-join>.rv:not(.on)::before{transform:scaleX(0)}
.rx-sec .eyebrow::before{display:none}   /* the hairline replaces the shared eyebrow dash here */
@media (prefers-reduced-motion:reduce){.js .rx-sec .head.rv:not(.on)>div:first-child::before,.js .rx-sec .faq>.rv:not(.on)::before,.js .rx-join>.rv:not(.on)::before{transform:none}}
.rx-s-nexus .head>div:first-child::before{background:linear-gradient(90deg,#FF9A6B,#B3A3FF)}
/* labels inside the page's own blocks: Inter, 13px, 600, uppercase, in the section's accent */
.rx-k,.ml-k,.rx-door .k,.rx-crm .k,.rx-sign .k,.rx-mo-t .n{font-family:var(--body);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--acc)}

/* ─── Cards: the page's own card material (no backdrop blur; the nav keeps that budget).
       Depth: a 1px top highlight, a tight contact shadow and a long soft one in the section's accent. */
.rx-sec{--hi:rgba(255,255,255,.75);--sh-c:rgba(20,20,31,.07);--sh-a:color-mix(in srgb,var(--acc) 24%,transparent)}
:root[data-theme="dark"] .rx-sec{--hi:rgba(255,255,255,.07);--sh-c:rgba(0,0,0,.5);--sh-a:color-mix(in srgb,var(--acc) 38%,transparent)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .rx-sec{--hi:rgba(255,255,255,.07);--sh-c:rgba(0,0,0,.5);--sh-a:color-mix(in srgb,var(--acc) 38%,transparent)}}
.rx-card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:inset 0 1px 0 var(--hi),0 1px 2px var(--sh-c),0 28px 56px -30px var(--sh-a)}
.rx-s-nexus .rx-card{--hi:rgba(255,255,255,.14)}
/* a colour tab on the reading-section cards */
.rx-white .acard::after,.rx-c::after,.rx-sign::after,.rx-t::before{content:"";position:absolute;left:clamp(18px,2vw,28px);top:-1px;width:44px;height:3px;border-radius:0 0 3px 3px;background:var(--acc)}
.rx-t::before{left:0;top:-1px;border-radius:0 0 3px 3px;width:40px}
.rx-c.urgent::after{background:#FF6B2B}
@media (hover:hover) and (pointer:fine){
  .js .rx-sec .rx-card.tilt,.js .rx-sec .rx-card.tilt-out,.js .rx-sec .rx-t.tilt,.js .rx-sec .rx-t.tilt-out{transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out),opacity .45s,filter .45s}
  .js .rx-sec .rx-card.tilt,.js .rx-sec .rx-t.tilt{transform:perspective(900px) translateY(-4px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));box-shadow:inset 0 1px 0 var(--hi),0 2px 4px var(--sh-c),0 44px 72px -30px var(--sh-a);z-index:2}
  .rx-sec .rx-t.tilt{border-top-color:color-mix(in srgb,var(--acc) 40%,var(--line))}
  .rx-sec .pill:hover,.rx-sec .frag .fi:hover{transform:translateY(-2px)}
  .rx-sec .pill{transition:transform .3s var(--ease-out),background-color .3s,border-color .3s}
  .rx-sec .addons .pill:hover{background:color-mix(in srgb,var(--acc) 18%,transparent);border-color:color-mix(in srgb,var(--acc) 55%,transparent)}
}

/* ─── Anchors land under the floating nav ────────────────────────────────── */
#features,#nexus,#tour,#control,#technology,#aria,#who,#faq,#early-access{scroll-margin-top:84px}

/* ─── Stage and white alternation ────────────────────────────────────────── */
.rx-white{background:var(--card)}
.rx-white .glass-field{display:none}
.rx-stage{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;perspective:1400px;perspective-origin:50% 20%}
.rx-stage .floor{left:1.5vw;right:1.5vw;top:auto;bottom:-3%;height:var(--fh,70%);border-radius:28px;transform-origin:50% 100%;transform:rotateX(var(--ft,9deg));opacity:var(--fo,.92);-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 30%,#000 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 30%,#000 100%)}
.rx-s-ctl{--fh:66%;--ft:8deg}
.rx-s-aria{--fh:72%;--ft:10deg}
.rx-s-faq .floor{left:46%;--fh:78%;--ft:6deg;--fo:.8}
/* horizon glow where the floor meets the back wall, so the panels stand on something */
.rx-stage::after{content:"";position:absolute;left:0;right:0;bottom:calc(var(--fh,70%) * .9);height:160px;pointer-events:none;background:radial-gradient(55% 100% at 50% 100%,color-mix(in srgb,var(--acc) 30%,transparent),transparent 72%)}
.rx-s-nexus .rx-stage::after{display:none}
/* the overlay: fragments that come out of the panels into the margins, above the content.
   Real stacking: the near ones larger and sharper, the far ones smaller and fainter; scroll drift at
   their depth (--sp from reflex.js) plus a few px of fine-pointer parallax (--mx/--my). */
.rx-over{position:absolute;inset:0;z-index:2;pointer-events:none}
.rx-over .frag{--pf2:46;--pp2:6px;transform:translate3d(calc(var(--mx,0) * var(--pp2)),calc(var(--sp,0) * var(--pf2) * -1px + var(--my,0) * var(--pp2) * .6),0);animation-play-state:paused}
.rx-over .frag.near{--pf2:84;--pp2:12px}.rx-over .frag.mid{--pf2:52;--pp2:7px}.rx-over .frag.deep{--pf2:24;--pp2:3px;opacity:.76}
.rx-over .frag.near .fi{scale:1.08}.rx-over .frag.deep .fi{scale:.86}
.rx-sec.vis .rx-over .frag{animation-play-state:running}
/* they arrive from their own side of the stage (rule 33, "fragments from the edges"): opacity and the translate
   property only, so the scroll parallax on transform stays instantaneous; reversible with the section's .vis */
.js .rx-over .frag{--ex:0px;translate:var(--ex) 0;transition:opacity 1.2s var(--ease-rv),translate 1.2s var(--ease-rv)}
.js .rx-sec:not(.vis) .rx-over .frag{opacity:0;--ex:-80px}
.js .rx-sec:not(.vis) .rx-over .frag.rside{--ex:80px}
.js .rx-over .frag:nth-child(2){transition-delay:.12s}.js .rx-over .frag:nth-child(3){transition-delay:.24s}.js .rx-over .frag:nth-child(4){transition-delay:.36s}
/* the side cards: a label, a value and a one-line meaning (never a bare number in a pill) */
.rx-over .frag.card .fi{width:232px;padding:13px 16px 13px 15px;gap:4px;border-left:3px solid var(--acc)}
.rx-over .frag.card .fi .k{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--acc)}
.rx-over .frag.card .fi b{font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1.1}
.rx-over .frag.card .fi>span{white-space:normal;line-height:1.35}
.rx-over .frag.card.ok .fi{border-left-color:#2E9E5B}.rx-over .frag.card.ok .fi .k{color:#2E9E5B}
@media (min-width:901px){
  .rx-over .frag{--edge:clamp(18px,3.4vw,96px)}
  /* left-side fragments sit below the headline zone (the top third carries the h2) */
  .rx-s-nexus .m1{left:var(--edge);top:40%}.rx-s-nexus .m2{right:var(--edge);top:38%}.rx-s-nexus .m3{right:calc(var(--edge) + 1vw);top:72%}.rx-s-nexus .m4{left:calc(var(--edge) + .5vw);top:74%}
  .rx-s-ctl .m1{right:var(--edge);top:10%}.rx-s-ctl .m2{left:var(--edge);top:50%}.rx-s-ctl .m3{right:calc(var(--edge) + .5vw);top:60%}.rx-s-ctl .m4{left:calc(var(--edge) + 1vw);top:80%}
  .rx-s-aria .m1{left:calc(var(--edge) + .5vw);top:50%}.rx-s-aria .m2{right:var(--edge);top:34%}.rx-s-aria .m3{left:var(--edge);top:86%}.rx-s-aria .m4{right:calc(var(--edge) + 1vw);top:76%}
  .rx-s-faq .m1{right:var(--edge);top:3%}.rx-s-faq .m2{left:calc(var(--edge) + .5vw);top:70%}.rx-s-faq .m3{right:calc(var(--edge) + 1vw);top:90%}
}
@media (min-width:901px) and (max-width:1399px){.rx-s-nexus .m3,.rx-s-nexus .m4,.rx-s-ctl .m3,.rx-s-ctl .m4,.rx-s-aria .m3,.rx-s-aria .m4,.rx-s-faq .m3,.rx-over .frag.near{display:none}}
@media (max-width:900px){
  .rx-over{display:none}
  .rx-stage{perspective:none}
  .rx-stage::after{display:none}
  .rx-stage .floor,.rx-s-faq .floor{transform:none;left:0;right:0;border-radius:0;height:70%;opacity:.5}
}
@media (prefers-reduced-motion:reduce){.rx-over .frag,.js .rx-sec:not(.vis) .rx-over .frag{transform:none;translate:none;animation:none;opacity:1;transition:none}}

/* ─── Screens in perspective (rule 19): rotateX up to 8deg at rest, flat at the centre of the
       viewport (--tp from reflex.js: 0 at centre, 1 a half-screen away), a ground shadow underneath. */
@media (min-width:761px){
  .js [data-tilt]{position:relative;transform:perspective(1400px) rotateX(calc(var(--tp,.7) * var(--tmax,8deg)));transform-origin:50% 60%;will-change:transform}
  .js [data-tilt]::after{content:"";position:absolute;left:5%;right:5%;bottom:-22px;height:44px;border-radius:50%;z-index:-1;pointer-events:none;background:radial-gradient(50% 50% at 50% 50%,var(--sh-a),transparent 72%);opacity:calc(.55 + var(--tp,.7) * .45);transform:translateZ(-60px) scaleX(calc(.9 + var(--tp,.7) * .1))}
  .rx-shot .scr[data-tilt]{--tmax:9deg}
  .nexus[data-tilt]{--tmax:6deg}
}
@media (hover:hover) and (pointer:fine) and (min-width:761px){
  .js .rx-shot .scr.tilt,.js .rx-shot .scr.tilt-out{transition:transform .45s var(--ease-out)}
  .js .rx-shot .scr.tilt{transform:perspective(1400px) translateY(-4px) rotateX(calc(var(--tp,.7) * var(--tmax,8deg) + var(--rx,0deg))) rotateY(var(--ry,0deg))}
}
@media (prefers-reduced-motion:reduce){.js [data-tilt],.js .rx-shot .scr.tilt{transform:none}.js [data-tilt]::after{opacity:.6;transform:none}}
/* a tour-step click pulses its visual */
@keyframes rxping{0%{transform:scale(1)}35%{transform:scale(1.015)}100%{transform:scale(1)}}
.js .rx-sec .rv[data-rv="behind"].on.rx-ping{animation:rxping .6s var(--ease-out)}

/* ─── Reveals: every reveal on the page carries data-rv (rule 33: rise / behind / under / over / left / right / pop);
       site.css owns the start states and motion.js the reversible observer, so nothing is redefined here. */
/* ─── Hero (pass 4, rules 30–32): the calm headline, the eyebrow pill, the 58vw panel, the fragment slots, their
       paths (--g) and the far plane all come from site.css / scroll.js, the same hero as the homepage. Here only:
       the panel never scales above its capture's 1x (rule 36: the band is 1224px wide), and the sample line. */
@media (min-width:1200px){.rx-hero .demo-stage.shot-stage{max-width:min(100%,58vw,1224px)}}
.rx-sample{margin:clamp(16px,2vw,28px) auto 0;max-width:86ch;text-align:center;font-size:13.5px;color:var(--muted);line-height:1.6}
/* a .frag.pill wrapper is not a chip: the shared .pill chip style (card background, padding, border) must not draw a
   halo around the real pill, which is its .fi */
.frag.pill{background:none;padding:0;border:0;box-shadow:none;font-size:inherit}
/* phone: the one front fragment (Kevin Lee) sits on the panel, not over the sample line under it */
@media (max-width:900px){.rx-hero .shot-stage .f3{top:30%}}
/* ─── Depth and character (rule 34): a near, a mid and a far plane ─────────────────────────────── */
/* a far plane under every stage: a second, slower floor glow that drifts at a fraction of the section's progress */
.rx-stage::before{content:"";position:absolute;left:-12vw;right:-12vw;top:-8%;height:62%;pointer-events:none;border-radius:50%;
  background:radial-gradient(60% 70% at 50% 60%,color-mix(in srgb,var(--acc) 16%,transparent),transparent 72%);
  transform:translate3d(0,calc(var(--sp,0) * 36px),0)}
.rx-s-nexus .rx-stage::before{background:radial-gradient(60% 70% at 50% 60%,rgba(255,255,255,.07),transparent 72%)}
/* one card casts a soft tinted shadow on the one beside it: the ladder onto the cap card, the ARIA door onto
   the Reflex card, the pipeline moment onto its screen */
@media (min-width:861px){
  .rx-ctl .ml{z-index:1;box-shadow:inset 0 1px 0 var(--hi),0 1px 2px var(--sh-c),0 28px 56px -30px var(--sh-a),28px 18px 56px -30px var(--sh-a)}
  .rx-door{z-index:1;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 2px 4px var(--sh-c),0 40px 80px -36px var(--sh-a),32px 20px 64px -30px var(--sh-a)}
  .rx-mo-v .rx-shot+.mp{box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 0 0 1px var(--line),0 2px 4px var(--sh-c),0 30px 60px -26px var(--sh-a),-18px 22px 48px -22px var(--sh-a)}
}
@media (prefers-reduced-motion:reduce){.rx-stage::before{transform:none}}

/* ─── Features: the crew (white reading section, shared .agent-cards).
       Each card: a tinted agent badge, the one-line job, and the two-line pitch that opens on
       hover (desktop) or tap (phone). */
.rx-s-crew .acard{cursor:pointer;gap:10px;overflow:hidden}
.rx-s-crew .acard .ag{background:color-mix(in srgb,var(--acc) 14%,transparent);color:var(--acc);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc) 28%,transparent)}
.rx-s-crew .acard h3{font-weight:600;letter-spacing:-.02em}
.rx-s-crew .acard .job{color:var(--ink)}
.rx-s-crew .acard .pitch{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .55s var(--ease-out),opacity .4s var(--ease-out)}
.rx-s-crew .acard .pitch>span{display:block;overflow:hidden;color:var(--ink-2)}
.rx-s-crew .acard .more{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--acc);margin-top:auto;padding-top:4px}
.rx-s-crew .acard .more::after{content:"";width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .35s var(--ease-out)}
.rx-s-crew .acard.open .pitch,.rx-s-crew .acard:focus-visible .pitch{grid-template-rows:1fr;opacity:1}
.rx-s-crew .acard.open .more::after,.rx-s-crew .acard:focus-visible .more::after{transform:rotate(-135deg) translateY(-2px)}
@media (hover:hover) and (pointer:fine){
  .rx-s-crew .acard:hover .pitch{grid-template-rows:1fr;opacity:1}
  .rx-s-crew .acard:hover .more::after{transform:rotate(-135deg) translateY(-2px)}
}
@media (max-width:760px){.rx-s-crew .acard .pitch>span{font-size:14.5px}}
.rx-s-crew .acard.nx{background:var(--app-navy);border-color:transparent;color:#fff;--hi:rgba(255,255,255,.14)}
.rx-s-crew .acard.nx h3,.rx-s-crew .acard.nx p,.rx-s-crew .acard.nx .job{color:#fff}
.rx-s-crew .acard.nx .pitch>span{color:rgba(255,255,255,.8)}
.rx-s-crew .acard.nx .ag{background:rgba(255,255,255,.14);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.rx-s-crew .acard.nx .more{color:#FFB38F}
.rx-s-crew .acard.nx::after{background:linear-gradient(90deg,#FF6B2B,#7B61FF)}
.rx-s-crew .addons{border-color:color-mix(in srgb,var(--acc) 22%,var(--line));background:color-mix(in srgb,var(--acc) 5%,var(--card))}
.rx-s-crew .addons .pill{min-height:34px;display:inline-flex;align-items:center;background:color-mix(in srgb,var(--acc) 10%,transparent);border-color:color-mix(in srgb,var(--acc) 32%,transparent);color:var(--ink)}

/* ─── Nexus: a navy band to the viewport edges; the panel is an animated moment ─ */
.rx-s-nexus{color:#fff}
.rx-s-nexus .head h2,.rx-s-nexus .head .eyebrow,.rx-s-nexus .head .lede{color:#fff}
.rx-s-nexus .head .eyebrow,.rx-s-nexus .head .lede{color:rgba(255,255,255,.74)}
.rx-band{position:absolute;inset:0;background:
  radial-gradient(60% 50% at 8% 0%,rgba(255,107,43,.28),transparent 70%),
  radial-gradient(50% 60% at 96% 100%,rgba(123,97,255,.4),transparent 70%),
  repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0 1px,transparent 1px 96px),
  repeating-linear-gradient(0deg,rgba(255,255,255,.045) 0 1px,transparent 1px 96px),
  var(--app-navy)}
.rx-s-nexus .nexus{background:rgba(255,255,255,.055);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px rgba(255,255,255,.14),0 70px 140px -60px rgba(0,0,0,.7)}
.rx-s-nexus .nexus::before{opacity:.6}
.nexus .nx-a{transition:opacity .65s var(--ease-rv),transform .65s var(--ease-rv)}
.nx-plan .st:nth-child(2){transition-delay:.1s}.nx-plan .st:nth-child(3){transition-delay:.2s}.nx-plan .st:nth-child(4){transition-delay:.3s}
.nexus[data-step="0"] .nx-intro,.nexus[data-step="0"] .nx-plan .st,.nexus[data-step="0"] .ar.big,.nexus[data-step="1"] .ar.big{opacity:0;transform:translateY(14px)}
.nexus .nx-say{transform-origin:100% 100%}
.nexus[data-step="0"] .nx-say{transform:scale(1.02)}
.nexus .st em .t1,.nexus[data-step="3"] .st em .t0{display:none}
.nexus[data-step="3"] .st em .t1{display:inline}
.nexus[data-step="3"] .st em,.nexus[data-step="3"] .st em.auto,.nexus[data-step="3"] .st em.tell{background:rgba(46,158,91,.32);color:#9BE7B3}
.nexus .ar.big{position:relative}
.nexus .ar.big b{transition:transform .3s var(--ease),box-shadow .3s}
.nexus[data-step="3"] .ar.big b.ok-b{transform:scale(.95);box-shadow:0 0 0 4px rgba(33,80,232,.4)}
.mcur{position:absolute;width:20px;height:20px;left:54px;top:30px;opacity:0;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35));transition:opacity .4s,transform .6s var(--ease-rv);transform:translate(28px,22px);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3L5 20L9.6 16L13.2 22.6L15.8 21.3L12.2 14.8L18.5 14Z' fill='%23101014' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.nexus[data-step="3"] .mcur,.mq[data-step="2"] .mcur{opacity:1;transform:none}
.rx-s-nexus .nx-right>p{color:rgba(255,255,255,.78)}
.nx-ask{background:var(--app-navy)}

/* ─── Five moments ───────────────────────────────────────────────────────── */
.rx-mos{display:grid;gap:clamp(64px,8vw,136px)}
.rx-mo{--bleed:max(0px,calc((100vw - var(--max)) / 2 + var(--gutter) - 2vw));display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,72px);align-items:center}
.rx-mo:nth-child(even){grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.rx-mo:nth-child(even) .rx-mo-t{order:2}
.rx-mo:nth-child(odd) .rx-mo-v{margin-right:calc(-1 * var(--bleed))}
.rx-mo:nth-child(even) .rx-mo-v{margin-left:calc(-1 * var(--bleed))}
/* the step label is a button: it steps the moment beside it (reflex.js) */
.rx-mo-t .n{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin:0 0 8px -12px;padding:0 14px 0 12px;border:0;border-radius:999px;background:none;cursor:pointer;font:inherit;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--acc);transition:background-color .3s,transform .3s var(--ease-out)}
.rx-mo-t .n::before{content:"";display:inline-block;width:22px;height:3px;border-radius:3px;background:var(--brand);transition:transform .35s var(--ease-out)}
.rx-mo-t .n:hover{background:var(--acc-soft)}
.rx-mo-t .n:hover::before{transform:scaleX(1.35)}
.rx-mo-t .n:active{transform:scale(.98)}
.rx-mo-t h3{font-family:var(--display);font-weight:600;font-size:clamp(26px,2.6vw,44px);letter-spacing:-.025em;line-height:1.06;text-wrap:balance;max-width:16ch}
.rx-mo-t h3 b{font-weight:600;color:var(--acc)}
.rx-mo-v{position:relative;min-width:0}
figure.rx-shot{margin:0;display:grid;gap:12px;justify-items:start}
.rx-shot .scr{width:100%;border-radius:clamp(14px,1.4vw,22px)}
.rx-shot img{display:block;width:100%;height:auto;border-radius:clamp(14px,1.4vw,22px);box-shadow:inset 0 1px 0 var(--hi),0 0 0 1px var(--line),0 1px 2px var(--sh-c),0 48px 96px -44px var(--sh-a)}
:root[data-theme="dark"] .rx-shot img{box-shadow:0 0 0 1px rgba(255,255,255,.12),0 2px 4px rgba(0,0,0,.5),0 60px 120px -46px var(--sh-a)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .rx-shot img{box-shadow:0 0 0 1px rgba(255,255,255,.12),0 2px 4px rgba(0,0,0,.5),0 60px 120px -46px var(--sh-a)}}
.rx-shot figcaption{font-size:14px;color:var(--muted);padding-left:4px;display:flex;align-items:center;gap:8px}
.rx-shot figcaption::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--acc)}
/* the cropped screens never upscale: each column caps at the crop's own pixel width (1x) */
.rx-mo .rx-mo-v.rx-shot:not(.wide){width:min(100%,522px)}
.rx-mo:nth-child(odd) .rx-mo-v.rx-shot:not(.wide){justify-self:end}
/* 01 · the queue: a draft arrives, is approved, is sent */
.mq{width:min(100%,640px);padding:18px 20px 20px;border-radius:20px;background:var(--app-ground);color:var(--app-ink);border:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 0 0 1px var(--line),0 1px 2px var(--sh-c),0 48px 96px -44px var(--sh-a);display:grid;gap:12px;cursor:pointer}
[data-scene]:focus-visible{outline:2px solid var(--acc);outline-offset:4px}
.mq-h{display:flex;align-items:center;gap:10px;font-size:15px}
.mq-h b{font-weight:600}
.mq-h>span{margin-left:auto;font-size:11.5px;color:var(--app-mute)}
.mq-n{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--app-blue);color:#fff;font:600 11px/1 var(--mono);font-style:normal}
.mq-n .c0{display:none}
.mq-stack{display:grid}
.mq-stack>*{grid-area:1/1;transition:opacity .55s var(--ease-rv),transform .6s var(--ease-rv)}
.mq-idle{align-self:start;display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;background:#fff;font-size:13.5px;color:var(--app-mute);box-shadow:0 0 0 1px var(--app-line);opacity:0;transform:translateY(-6px)}
.mq-idle .dots{display:inline-flex;gap:3px;margin-left:4px}.mq-idle .dots i{width:5px;height:5px;border-radius:50%;background:var(--app-purple);animation:mqdot 1s infinite}.mq-idle .dots i:nth-child(2){animation-delay:.15s}.mq-idle .dots i:nth-child(3){animation-delay:.3s}
@keyframes mqdot{0%,100%{opacity:.3}50%{opacity:1}}
.mq-card{display:grid;gap:10px;padding:14px 16px 16px;border-radius:14px;background:#fff;box-shadow:0 0 0 1.5px var(--app-blue),0 18px 40px -22px rgba(15,18,48,.4);position:relative}
.mq-card .ah{display:flex;align-items:center;gap:8px;font-weight:600;font-size:13.5px}
.mq-card .ah small{margin-left:auto;font-weight:400;font-size:12px;color:var(--app-mute)}
.mq-card .ab{background:var(--app-blue);color:#fff;padding:10px 12px;border-radius:12px 12px 12px 3px;font-size:14px;line-height:1.4}
.mq-card .ar{position:relative;gap:8px}
.mq-card .ar b{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:10px;font-size:13.5px;transition:transform .3s var(--ease),box-shadow .3s}
.mq-card .ar kbd{font:500 10px/1 var(--mono);padding:3px 5px;border-radius:5px;border:1px solid rgba(255,255,255,.4);opacity:.85}
.mq-card .ar b:not(.ok-b) kbd{border-color:var(--app-line);color:var(--app-mute)}
.mq[data-step="2"] .mq-card .ar b.ok-b{transform:scale(.95);box-shadow:0 0 0 4px rgba(33,80,232,.35)}
.mq .mcur{left:46px;top:26px}
.mq-sent{align-self:start;display:grid;grid-template-columns:auto 1fr;gap:2px 12px;align-items:center;padding:12px 14px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px var(--app-line);opacity:0;transform:translateY(8px)}
.mq-sent i{grid-row:1/3;width:26px;height:26px;border-radius:50%;background:#2E9E5B;display:inline-flex;align-items:center;justify-content:center}
.mq-sent i::after{content:"";width:12px;height:12px;background:#fff;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.mq-sent b{font-weight:600;font-size:13.5px}.mq-sent span{font-size:12px;color:var(--app-mute)}
.mq[data-step="0"] .mq-idle{opacity:1;transform:none}
.mq[data-step="0"] .mq-card{opacity:0;transform:translateY(18px) scale(.985)}
.mq[data-step="3"] .mq-card{opacity:0;transform:translateY(-10px) scale(.985)}
.mq[data-step="3"] .mq-sent{opacity:1;transform:none}
.mq[data-step="0"] .mq-n .c1,.mq[data-step="3"] .mq-n .c1{display:none}
.mq[data-step="0"] .mq-n .c0,.mq[data-step="3"] .mq-n .c0{display:inline}
.mq[data-step="0"] .mq-n,.mq[data-step="3"] .mq-n{background:var(--app-line);color:var(--app-mute)}
/* 03 · the booked card: a job slides from Quote sent to Booked over the pipeline crop */
.rx-mo-v .rx-shot+.mp{position:absolute;right:0;bottom:-24%}
.rx-mo .rx-mo-v.has-mp{margin-bottom:clamp(90px,8vw,130px)}
.mp{width:min(72%,340px);display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px;border-radius:16px;background:var(--app-ground);color:var(--app-ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 0 0 1px var(--line),0 2px 4px var(--sh-c),0 30px 60px -26px var(--sh-a);position:relative;cursor:pointer}
.mp-col{display:grid;gap:8px;align-content:start}
.mp-col b{font-size:12px;font-weight:600;padding-bottom:5px;border-bottom:2px solid var(--app-blue)}
.mp-col:last-child b{border-color:#2E9E5B}
.mp-slot{min-height:86px;border-radius:12px;background:rgba(15,18,48,.045)}
.mp-drop{min-height:86px;border-radius:12px;border:1.5px dashed var(--app-blue);color:var(--app-blue);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;transition:background .4s,color .4s,border-color .4s}
.mp-card{position:absolute;left:12px;top:40px;width:calc(50% - 17px);min-height:86px;display:grid;grid-template-columns:24px 1fr;gap:2px 8px;align-content:start;padding:10px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px var(--app-line),0 14px 30px -16px rgba(15,18,48,.45);font-size:12.5px;transition:transform .8s var(--ease-rv),box-shadow .5s}
.mp-card .av{grid-row:1/3}
.mp-card b{font-weight:600}.mp-card small{font-size:11px;color:var(--app-mute)}
.mp-card .pill{grid-column:1/3;justify-self:start;margin-top:6px;font-size:11px;padding:3px 8px;opacity:0;transition:opacity .4s}
.mp[data-step="1"] .mp-card{transform:scale(1.05) rotate(-2deg);box-shadow:0 0 0 1.5px var(--app-blue),0 24px 50px -18px rgba(15,18,48,.6);z-index:1}
.mp[data-step="2"] .mp-card{transform:translateX(calc(100% + 10px)) scale(1.05) rotate(1deg);box-shadow:0 0 0 1.5px var(--app-blue),0 24px 50px -18px rgba(15,18,48,.6);z-index:1}
.mp[data-step="2"] .mp-drop{background:rgba(33,80,232,.08)}
.mp[data-step="3"] .mp-card,.mp:not([data-step]) .mp-card{transform:translateX(calc(100% + 10px))}
.mp[data-step="3"] .mp-card .pill,.mp:not([data-step]) .mp-card .pill{opacity:1}
.mp[data-step="3"] .mp-drop,.mp:not([data-step]) .mp-drop{border-style:solid;border-color:#2E9E5B;color:#2E9E5B;background:rgba(46,158,91,.08)}
/* 05 · the phone and the text thread */
.rx-duo{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(16px,2vw,28px);align-items:center}
.rx-phone{margin:0;width:min(100%,300px);justify-self:center}
.rx-phone .scr{border-radius:28px;padding:9px;background:linear-gradient(160deg,var(--surface-2) 0%,var(--surface) 40%,var(--surface-2) 100%);box-shadow:inset 0 1px 0 var(--hi),0 0 0 1px var(--line),0 2px 4px var(--sh-c),0 50px 90px -42px var(--sh-a)}
.rx-phone .scr img{width:100%;height:auto;display:block;border-radius:21px}
.ms{display:grid;gap:8px;padding:16px;border-radius:18px;background:var(--app-ground);color:var(--app-ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 0 0 1px var(--line),0 2px 4px var(--sh-c),0 36px 70px -36px var(--sh-a);cursor:pointer}
.ms-h{font-size:11px;color:var(--app-mute);text-align:center;margin-bottom:2px}
.ms-b{max-width:88%;padding:10px 13px;border-radius:16px 16px 16px 4px;background:#fff;box-shadow:0 0 0 1px var(--app-line);font-size:13.5px;line-height:1.4;display:grid;gap:4px;transition:opacity .5s var(--ease-rv),transform .55s var(--ease-rv)}
.ms-b small{font-size:11px;color:var(--app-mute)}
.ms-b.me{justify-self:end;border-radius:16px 16px 4px 16px;background:var(--app-blue);color:#fff;box-shadow:none;min-width:44px;text-align:center;font-weight:600}
.ms-b.ok{background:#E6F6EC;color:#1E7A46;box-shadow:none}
.ms[data-step="0"] .b2,.ms[data-step="0"] .b3,.ms[data-step="0"] .b4,.ms[data-step="1"] .b2,.ms[data-step="1"] .b3,.ms[data-step="1"] .b4,.ms[data-step="2"] .b3,.ms[data-step="2"] .b4,.ms[data-step="3"] .b4{opacity:0;transform:translateY(10px)}

/* ─── Control: the ladder lights rung by rung, the cap fills ─────────────── */
.rx-ctl{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(14px,1.6vw,24px);align-items:stretch;margin-bottom:clamp(14px,1.6vw,24px)}
.ml,.mc{padding:clamp(20px,2.2vw,30px);display:grid;gap:14px;align-content:start}
.ml-rungs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.ml-r{position:relative;padding:14px 14px 12px;border-radius:14px;background:var(--surface);border:1px solid var(--line);display:grid;gap:4px;cursor:pointer;transition:background .5s,border-color .5s,color .5s,transform .5s var(--ease-rv)}
.ml-r:hover{border-color:color-mix(in srgb,var(--app-purple) 50%,var(--line));transform:translateY(-2px)}
.ml-r i{position:absolute;top:12px;right:12px;font:400 11px var(--mono);font-style:normal;color:var(--muted)}
.ml-r b{font-weight:500;font-size:15px}.ml-r span{font-size:12.5px;line-height:1.35;color:var(--ink-2)}
.ml-r.on{background:var(--app-purple);border-color:var(--app-purple);color:#fff;transform:translateY(-3px)}
.ml-r.on b,.ml-r.on span,.ml-r.on i{color:#fff}
.ml-r.done{border-color:color-mix(in srgb,var(--app-purple) 55%,transparent)}
.ml-r.done b{color:var(--c-sys)}
.ml-bar{height:6px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.ml-bar i{display:block;height:100%;width:var(--w,50%);border-radius:inherit;background:var(--brand);transition:width .9s var(--ease-rv)}
.ml[data-step="0"]{--w:25%}.ml[data-step="1"]{--w:50%}.ml[data-step="2"]{--w:75%}.ml[data-step="3"]{--w:100%}
.ml-f{font-size:14px;color:var(--muted);line-height:1.45}
.mc h3{font-size:clamp(20px,1.6vw,26px);font-weight:600;letter-spacing:-.02em}
.mc{cursor:pointer}
.mc-bar{position:relative;height:12px;border-radius:999px;background:var(--surface-2);overflow:visible}
.mc-bar i{display:block;height:100%;width:var(--w,62%);border-radius:inherit;background:var(--app-blue);transition:width 1.2s var(--ease-rv),background .5s}
.mc-bar em{position:absolute;right:0;top:-22px;font:400 11px var(--mono);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.mc-bar em::after{content:"";position:absolute;right:0;top:20px;width:2px;height:16px;background:var(--ink);border-radius:2px}
.mc-rows{display:grid;grid-template-columns:1fr auto;gap:6px 14px;font-size:14px;color:var(--ink-2)}
.mc-rows .pct{font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.mc-note{display:flex;gap:10px;align-items:center;padding:12px 14px;border-radius:12px;background:var(--surface);font-size:14px;line-height:1.4;color:var(--ink-2);transition:background .5s,color .5s}
.mc-note i{flex:none;width:9px;height:9px;border-radius:50%;background:var(--c-cal)}
.mc[data-step="0"]{--w:0%}.mc[data-step="2"]{--w:100%}
.mc[data-step="2"] .mc-bar i{background:var(--c-need)}
.mc[data-step="2"] .mc-note{background:color-mix(in srgb,var(--c-need) 14%,transparent);color:var(--ink)}
.mc[data-step="2"] .mc-note i{background:var(--c-need)}
.rx-ctrl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.2vw,18px)}
.rx-c{padding:18px 20px;display:grid;gap:6px;border-radius:18px;min-width:0}
.rx-c h3{font-size:16.5px;font-weight:600;letter-spacing:-.015em;display:flex;align-items:center;gap:10px}
.rx-c h3::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)}
.rx-c p{font-size:14.5px;line-height:1.45;color:var(--ink-2);text-wrap:pretty}
.rx-c.urgent h3::before{background:#FF6B2B;box-shadow:0 0 0 3px rgba(255,107,43,.16)}
@media (max-width:1000px){.rx-ctl{grid-template-columns:1fr}.rx-ctrl{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ─── Technology: six plain blocks on white ──────────────────────────────── */
.rx-tech{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,40px) clamp(20px,3vw,56px)}
.rx-t{position:relative;display:grid;gap:10px;align-content:start;padding-top:18px;border-top:1px solid var(--line);transition:border-color .4s}
.rx-t .ag{width:30px;height:30px;border-radius:9px;font-size:10.5px;background:color-mix(in srgb,var(--acc) 14%,transparent);color:var(--acc);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc) 28%,transparent)}
.rx-t h3{font-size:clamp(18px,1.3vw,22px);font-weight:600;letter-spacing:-.02em}
.rx-t p{font-size:clamp(15px,1.05vw,16.5px);line-height:1.5;color:var(--ink-2);text-wrap:pretty}
@media (max-width:900px){.rx-tech{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ─── ARIA at the front door ─────────────────────────────────────────────── */
.rx-bridge{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(12px,2vw,28px);align-items:center}
@media (max-width:860px){.rx-bridge{grid-template-columns:1fr}.rx-bridge .rx-arrow{transform:rotate(90deg);justify-self:center}}
.rx-door{position:relative;overflow:hidden;border-radius:var(--r-l);padding:clamp(20px,2.4vw,32px);min-height:320px;display:flex;flex-direction:column;justify-content:flex-end;gap:12px;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 2px 4px var(--sh-c),0 40px 80px -36px var(--sh-a)}
.rx-door>*{position:relative;z-index:1}
.rx-door .k{color:#FFD9C4}
.rx-door h3{color:#fff;font-size:clamp(18px,1.4vw,23px);font-weight:600;letter-spacing:-.02em}
.rx-door .mini{display:grid;gap:8px;margin-bottom:6px}
.rx-door .mini .bub{max-width:88%;padding:9px 12px;border-radius:14px;font-size:13.5px;line-height:1.4;background:rgba(255,255,255,.94);color:var(--app-ink);transition:opacity .5s var(--ease-rv),transform .55s var(--ease-rv)}
.rx-door .mini .bub.r{justify-self:end;background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.22)}
.rx-door .mini .bub.ok{background:#2E9E5B;color:#fff}
.rx-door[data-step="0"] .b1,.rx-door[data-step="0"] .b2,.rx-door[data-step="0"] .b3,.rx-door[data-step="1"] .b2,.rx-door[data-step="1"] .b3,.rx-door[data-step="2"] .b3{opacity:0;transform:translateY(10px)}
.rx-arrow{width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--paper);display:inline-flex;align-items:center;justify-content:center;font-size:20px;align-self:center}
.rx-crm{padding:clamp(20px,2.4vw,32px);min-height:320px;display:flex;flex-direction:column;gap:12px}
.rx-crm h3{font-size:clamp(18px,1.4vw,23px);font-weight:600;letter-spacing:-.02em}
.rx-crm p{font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.rx-lead{display:grid;grid-template-columns:34px 1fr auto;gap:2px 12px;align-items:center;padding:10px 12px;border-radius:12px;background:var(--surface);border:1px solid var(--line);font-size:13.5px}
.rx-lead i{width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font:500 11px var(--mono);font-style:normal;background:color-mix(in srgb,var(--c-need) 16%,transparent);color:var(--c-need);grid-row:1/3}
.rx-lead b{font-weight:500}.rx-lead small{grid-column:2;font-size:12.5px;color:var(--muted)}
.rx-lead .pill{grid-column:3;grid-row:1/3}
.rx-door-foot{margin-top:18px;font-size:15px;color:var(--ink-2)}
.rx-door-foot a{font-weight:500;color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* ─── Who it's for: the trades run edge to edge, three signs ─────────────── */
.rx-trades{margin-block:clamp(-8px,-1vw,-16px) clamp(32px,4vw,56px);border-block:1px solid color-mix(in srgb,var(--acc) 24%,var(--line));background:linear-gradient(90deg,var(--acc-soft),transparent 30%,transparent 70%,var(--acc-soft));font-family:var(--display);font-size:clamp(22px,2.4vw,40px);font-weight:600;letter-spacing:-.025em;text-transform:none;color:var(--ink)}
/* the marquee itself (the shared hero ticker is gone with rule 16, so the row carries its own) */
.rx-trades{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.rx-trades .ticker-track{display:flex;width:max-content;will-change:transform;animation:rxtick 56s linear infinite;animation-play-state:paused}
.rx-sec.vis .rx-trades .ticker-track{animation-play-state:running}
.rx-trades:hover .ticker-track{animation-play-state:paused}
.rx-trades ul{display:flex;list-style:none;margin:0;padding:0}
.rx-trades li{display:inline-flex;align-items:center;gap:18px;padding:16px 26px 16px 0;white-space:nowrap;color:var(--ink)}
.rx-trades li::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--acc)}
@keyframes rxtick{to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){.rx-trades .ticker-track{animation:none}.rx-trades{mask-image:none;-webkit-mask-image:none}.rx-trades ul{flex-wrap:wrap}.rx-trades ul[aria-hidden]{display:none}}
.rx-signs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.rx-sign{padding:24px 22px 20px;display:grid;gap:6px;border-radius:18px}
.rx-sign b{font-weight:600;font-size:17px;line-height:1.3;letter-spacing:-.01em}
.rx-sign p{font-size:14.5px;line-height:1.5;color:var(--ink-2)}

/* ─── Early-access form ──────────────────────────────────────────────────── */
.rx-ea{padding-bottom:clamp(96px,10vw,150px)}
.rx-join{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,72px);align-items:start}
.rx-join .lede{margin-top:18px}
.rx-expect{display:grid;gap:10px;margin-top:26px}
.rx-expect div{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start;font-size:15px;line-height:1.5;color:var(--ink-2)}
.rx-expect div b{display:block;color:var(--ink);font-weight:500}
.rx-expect i{width:22px;height:22px;border-radius:50%;background:var(--ink);display:inline-flex;align-items:center;justify-content:center;margin-top:2px}
.rx-expect i::after{content:"";width:12px;height:12px;background:var(--paper);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.rx-form{padding:clamp(22px,3vw,36px);background:var(--surface)}
/* the live count of businesses on the list is the shared .ea-live (site.css, motion.js); it sits under the expectations */
.rx-join .ea-live{margin-top:22px}
.rx-form h3{font-size:clamp(22px,1.8vw,28px);font-weight:600;letter-spacing:-.02em;margin-bottom:6px}
.rx-form{border-top:3px solid var(--acc)}
.rx-expect i{background:var(--acc)}
.rx-form .sub{font-size:15px;color:var(--muted);margin-bottom:22px}
.rx-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rx-field{display:grid;gap:6px;min-width:0}
.rx-field.full{grid-column:1/-1}
.rx-field label{font-size:13px;font-weight:500;color:var(--ink-2)}
.rx-field .muted{font-weight:400;color:var(--muted)}
.rx-field input{width:100%;min-width:0;border:1px solid var(--line-2);border-radius:12px;background:var(--card);color:var(--ink);font:inherit;font-size:16px;padding:12px 14px;outline:none;transition:border-color var(--fast)}
.rx-field input:focus{border-color:var(--ink)}
.rx-field input::placeholder{color:var(--muted)}
.rx-hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.rx-form .btn{width:100%;justify-content:center;margin-top:16px}
.rx-form .btn:disabled{opacity:.6;cursor:wait;transform:none}
.rx-msg{margin-top:12px;font-size:14px;line-height:1.45;border-radius:10px;padding:10px 12px}
.rx-msg.err{color:var(--c-need);background:color-mix(in srgb,var(--c-need) 12%,transparent)}
.rx-msg.err a{color:inherit;text-decoration:underline}
.rx-msg[hidden]{display:none}
.rx-note{font-size:13px;color:var(--muted);margin-top:12px;text-align:center}
.rx-done{display:grid;gap:10px}
.rx-done[hidden]{display:none}
.rx-done h3{font-size:clamp(24px,2vw,30px);font-weight:600;letter-spacing:-.02em;display:flex;align-items:center;gap:12px}
.rx-done h3 i{flex:none;width:34px;height:34px;border-radius:50%;background:#2E9E5B;display:inline-flex;align-items:center;justify-content:center}
.rx-done h3 i::after{content:"";width:16px;height:16px;background:#fff;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.rx-done p{font-size:15.5px;line-height:1.5;color:var(--ink-2)}
.rx-done p a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* ─── Tablet ─────────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .rx-mo,.rx-mo:nth-child(even){grid-template-columns:1fr;gap:18px}
  .rx-mo:nth-child(even) .rx-mo-t{order:0}
  .rx-mo:nth-child(odd) .rx-mo-v,.rx-mo:nth-child(even) .rx-mo-v{margin:0}
  .rx-mo:nth-child(odd) .rx-mo-v.rx-shot:not(.wide){justify-self:start}
  .rx-join{grid-template-columns:1fr}
}

/* ─── Phone ──────────────────────────────────────────────────────────────── */
@media (max-width:760px){
  .rx-sample{margin-top:10px}
  .rx-mos{gap:44px}
  .rx-mo-t h3{font-size:clamp(23px,6.6vw,27px);max-width:none}
  .mq{padding:14px;gap:10px;border-radius:16px}.mq-h>span{display:none}
  .mq-card .ar b{padding:10px 12px;min-height:44px}
  .rx-mo-v .rx-shot+.mp{position:static;width:100%;margin-top:12px}
  .mp-slot,.mp-drop,.mp-card{min-height:92px}
  .rx-duo{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:12px;align-items:start}
  .rx-phone .scr{border-radius:18px;padding:5px}.rx-phone .scr img{border-radius:14px}
  .ms{padding:12px;gap:6px;border-radius:14px}.ms-b{font-size:12.5px;padding:8px 10px;max-width:94%}
  .ml,.mc{padding:16px;gap:12px}
  .ml-rungs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ml-r{padding:12px}.ml-r b{font-size:14px}.ml-r span{font-size:12px}
  /* the control cards and the signs become swipeable rows: one card per snap, no scrollbar */
  .rx-ctrl,.rx-signs{display:flex;flex-wrap:nowrap;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1*var(--gutter));padding:4px var(--gutter) 12px;scroll-padding-inline:var(--gutter);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .rx-ctrl::-webkit-scrollbar,.rx-signs::-webkit-scrollbar{display:none}
  .rx-c,.rx-sign{flex:0 0 min(78vw,300px);scroll-snap-align:start;padding:16px}
  .rx-c h3{font-size:16px}.rx-c p{font-size:14px}
  .rx-tech{grid-template-columns:1fr;gap:16px}
  .rx-t{gap:6px;padding-top:14px}
  .rx-door,.rx-crm{min-height:0;padding:16px;border-radius:20px}
  .rx-trades{font-size:20px;margin-top:0}
  .rx-fields{grid-template-columns:1fr}
  .rx-form{padding:18px 16px;border-radius:20px}
  .rx-form .btn{height:48px}
  .rx-join .lede{font-size:15.5px}
  /* the submit never sits under the ARIA launcher */
  .rx-ea{padding-bottom:calc(92px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){
  .mq-idle .dots i{animation:none}
  .nexus .nx-a,.mq-stack>*,.mp-card,.ms-b,.ml-r,.ml-bar i,.mc-bar i,.rx-door .mini .bub,.rx-s-crew .acard .pitch,.rx-s-crew .acard .more::after,.rx-mo-t .n,.rx-mo-t .n::before{transition:none}
  .js .rx-sec .rv[data-rv="behind"].on.rx-ping{animation:none}
}
@media (max-width:760px){
  .rx-mo-t .n{margin-left:-10px;padding-inline:10px 12px}
  .rx-sec .head>div:first-child,.rx-sec .faq>.rv,.rx-join>.rv{padding-top:12px}
  .rx-sample{font-size:12.5px}
}

/* the moment visuals sit at the margin side of their column */
.rx-mo:nth-child(odd) .mq,.rx-mo:nth-child(odd) .has-mp{margin-left:auto}
.rx-mo .rx-mo-v.has-mp{width:min(100%,464px)}
@media (max-width:900px){.rx-mo .rx-mo-v.has-mp,.rx-mo:nth-child(odd) .mq{width:100%;margin-left:0;margin-bottom:0}}