/* Built by enhance_all.py from src/fonts/faces.css + src/fx/fx.css. Edit those. */
@font-face{font-family:'Public Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/public-sans.woff2?v=fd76a14f) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Spectral';font-style:italic;font-weight:500;font-display:swap;src:url(fonts/spectral-500i.woff2?v=76f4f015) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Spectral';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/spectral-500.woff2?v=df844520) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Spectral';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/spectral-600.woff2?v=041903c5) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Spectral';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/spectral-700.woff2?v=44234f06) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* fx.css - the interactive layer for the CRM site (2026-10 redesign).
   Loaded after style.css on index.html and pricing.html only. Everything here
   is additive: remove the <link> and the page falls back to the plain layout.
   Motion is opt-out: every animation sits behind .fx-on (set by fx.js) and is
   switched off under prefers-reduced-motion. */

/* ── dark hero band (CRM site only) ─────────────────────────────────── */
.fxband{position:relative;isolation:isolate;color:#fff;background:var(--fx-navy-bg)}
.fxband>.fxrib{position:absolute;left:0;right:0;top:0;height:100%;z-index:-1}
/* A still version of the ribbons, so the band is not flat before the script
   runs, or when it never does. */
.fxband::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;box-shadow:var(--fx-navy-halo)}
.fxband .hero{padding-bottom:clamp(40px,5vw,64px)}
.fxband h1{color:#fff}
.fxband .eyebrow{color:#E2B074}
.fxband .lede{color:#C9DAE6}
.fxband .lede strong{color:#fff}
.fxband .hero-note{color:#B9CCD9}
.fxband .btn.lg.js-trial{background:var(--bronze);border-color:var(--bronze);color:#231303}
.fxband .btn.lg.js-trial:hover{background:#C98A4E;border-color:#C98A4E}
.fxband .btn.ghost{color:#fff;border-color:rgba(255,255,255,.38);background:transparent}
.fxband .btn.ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.6)}
.fxband .browser{box-shadow:0 30px 80px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.10);border:0}
.fxband .hero-art{filter:drop-shadow(0 18px 40px rgba(0,0,0,.35))}

/* the numbers under the hero film */
.fxstats{list-style:none;margin:clamp(26px,3.4vw,40px) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.fxstats li{border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:16px 18px;
  background:rgba(8,40,64,.72)}
.fxstats b{display:block;font-family:var(--disp);font-weight:600;font-size:clamp(1.7rem,3.2vw,2.3rem);
  line-height:1.05;color:#fff;font-variant-numeric:tabular-nums}
.fxstats span{display:block;margin-top:6px;font-size:12.5px;line-height:1.4;color:#B9CCD9}
@media(max-width:760px){.fxstats{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ── reveal on scroll ───────────────────────────────────────────────── */
.fx-on [data-rv]{opacity:0;transform:translateY(18px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1);transition-delay:var(--rvd,0ms)}
.fx-on [data-rv].in{opacity:1;transform:none}

/* ── the walkthrough: steps on the left, one sticky screen on the right ─ */
.walk-rail{display:none}
.fx-walk .walkgrid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(28px,4vw,56px);align-items:start;margin-top:18px}
.fx-walk .feat{display:block;min-height:46vh;padding:0;margin:0;border:0;
  opacity:.34;transition:opacity .35s ease}
.fx-walk .feat>div{display:flex;flex-direction:column;justify-content:center;min-height:46vh}
.fx-walk .feat.on{opacity:1}
.fx-walk .feat .num{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:50%;border:1.5px solid var(--bronze);color:var(--bronze);font-weight:700;font-size:13px;
  margin-bottom:14px;font-variant-numeric:tabular-nums}
.fx-walk .feat.on .num{background:var(--bronze);color:#231303}
.fx-walk .walkstage{position:sticky;top:calc(50vh - 220px);height:440px}
.fx-walk .walkstage .shot{position:absolute;inset:0;margin:0;opacity:0;transform:scale(.985);
  transition:opacity .45s ease,transform .45s ease;pointer-events:none;display:flex;align-items:center}
.fx-walk .walkstage .shot.on{opacity:1;transform:none;pointer-events:auto}
.fx-walk .walkstage .shot img,.fx-walk .walkstage .shot video{width:100%;height:auto;max-height:440px;
  object-fit:contain;border-radius:12px}
.fx-walk .walk-rail{display:flex;gap:6px;position:absolute;left:0;right:0;bottom:-26px;justify-content:center}
.fx-walk .walk-rail i{width:26px;height:4px;border-radius:2px;background:var(--line);transition:background .3s,width .3s}
.fx-walk .walk-rail i.on{background:var(--bronze);width:44px}
.feat .num{display:none}
.fx-walk .feat .num{display:inline-flex}

/* ── the virtual office ─────────────────────────────────────────────── */
.fxoffice{position:relative;isolation:isolate;color:#fff;margin-top:clamp(56px,7vw,88px);
  padding:clamp(48px,6.5vw,84px) 0;box-shadow:var(--fx-navy-halo);
  background:linear-gradient(180deg,#001D31 0%,#00263F 30%,#002F4E 68%,#003556 100%)}
.fxoffice::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(50% 45% at 80% 0%,rgba(226,176,116,.18),transparent 70%),
             radial-gradient(55% 50% at 0% 100%,rgba(116,164,193,.16),transparent 72%)}
.fxoffice section{margin-top:0}
.fxoffice h2{color:#fff;font-size:clamp(1.8rem,4vw,2.7rem);max-width:20ch}
.fxoffice .eyebrow{color:#E2B074}
.fxoffice .sub{color:#C9DAE6;max-width:60ch;margin-top:14px;font-size:1.05rem}

.of-new{display:inline-block;margin-left:10px;padding:3px 9px;border-radius:99px;background:#E2B074;color:#231303;
  font-size:10.5px;font-weight:700;letter-spacing:.12em;vertical-align:middle}
.of-stage{position:relative;margin-top:26px;border-radius:18px;overflow:hidden;background:#001422;
  box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.12);aspect-ratio:16/9}
.of-stage img,.of-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .5s ease}
.of-stage .on{opacity:1}
.of-cap{position:absolute;left:0;right:0;bottom:0;padding:44px 22px 18px;
  background:linear-gradient(180deg,transparent,rgba(0,20,34,.88));pointer-events:none}
.of-cap b{display:block;font-family:var(--disp);font-size:clamp(1.05rem,2.2vw,1.45rem);font-weight:600}
.of-cap span{display:block;font-size:13.5px;color:#C9DAE6;max-width:64ch;margin-top:3px;line-height:1.45}
.of-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.of-tabs button{appearance:none;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;color:#DCE8F0;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);border-radius:99px;padding:8px 15px;
  transition:background .2s,border-color .2s,color .2s}
.of-tabs button:hover{background:rgba(255,255,255,.12)}
.of-tabs button[aria-selected="true"]{background:#E2B074;border-color:#E2B074;color:#231303}
.of-tabs button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.of-tabs .soon{font-size:12.5px;color:#9FB6C6;align-self:center;margin-left:4px}
.of-points{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.of-points li{border-top:1px solid rgba(255,255,255,.18);padding-top:14px;font-size:14.5px;color:#C9DAE6;line-height:1.55}
.of-points b{display:block;color:#fff;font-size:15.5px;margin-bottom:4px}

@media(max-width:820px){
  
  .of-points{grid-template-columns:1fr}
  .of-stage{aspect-ratio:4/3}
  .of-cap{padding:34px 14px 12px}.of-cap span{font-size:12.5px}
  .of-tabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;margin-inline:-24px;padding-inline:24px;scrollbar-width:none}
  .of-tabs::-webkit-scrollbar{display:none}
  .of-tabs button{flex:0 0 auto}
  .of-tabs .soon{flex:0 0 auto}
}

/* ── the stack it replaces, as rows of icons ────────────────────────── */
.gstack{margin-top:8px}
.ghead,.gr{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.3fr) minmax(0,.8fr) 96px;
  align-items:center;gap:14px}
.ghead{padding:0 22px 10px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.ghead span:nth-child(3){text-align:right}
.gus{display:flex;align-items:center;justify-content:center;gap:6px;color:var(--navy)}
.gus img{width:18px;height:18px;border-radius:4px}
.glist{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.gr{background:var(--navy);color:#fff;border-radius:16px;padding:12px 16px 12px 22px;
  box-shadow:0 6px 18px rgba(0,32,60,.12)}
.gc{font-weight:700;font-size:13.5px;letter-spacing:.08em;text-transform:uppercase;line-height:1.3}
.gl{display:flex;gap:8px;flex-wrap:wrap}
.ic-c{width:40px;height:40px;border-radius:50%;background:#fff;display:grid;place-items:center;
  overflow:hidden;flex:0 0 auto;box-shadow:0 0 0 2px rgba(255,255,255,.18)}
.ic-c img{width:26px;height:26px;object-fit:contain;display:block}
.gpw{text-align:right;line-height:1.15}
.gp b{font-family:var(--disp);font-size:1.45rem;font-weight:600;color:#fff;font-variant-numeric:tabular-nums}
.gp i{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#B9CCD9;margin-left:3px}
.gpw small{display:block;font-size:11.5px;color:#9FB6C6;margin-top:3px}
.gk{justify-self:center;width:38px;height:38px;border-radius:50%;background:var(--bronze2);position:relative}
.gk::after{content:"";position:absolute;left:12px;top:12px;width:14px;height:8px;
  border-left:3px solid #231303;border-bottom:3px solid #231303;transform:rotate(-45deg)}
.gtot{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.gtot>div{border-radius:16px;padding:20px 24px;display:flex;flex-direction:column;gap:4px}
.gt-them{background:#F6EFE2;border:1px solid var(--line)}
.gt-us{background:var(--bronze);color:#231303}
.gtot span{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.gt-them span{color:var(--muted)}
.gtot s,.gtot b{font-family:var(--disp);font-size:clamp(2.2rem,4.5vw,3rem);font-weight:600;line-height:1;
  font-variant-numeric:tabular-nums}
.gtot s{color:var(--ink);text-decoration-color:#B4432F;text-decoration-thickness:3px}
.gtot i{font-style:normal;font-size:.4em;font-weight:600;margin-left:3px}
.gtot small{font-size:13px}
.gt-them small{color:var(--dim)}
.gsave{margin:12px 0 0;text-align:center;font-size:15px;color:var(--muted)}
.gsave b{color:var(--ok);font-variant-numeric:tabular-nums}

/* the chart's own motion: rows arrive one by one, the check pops, the old
   total is only struck through once it has finished counting */
.fx-on .gr[data-rv]{transform:translateX(-14px)}
.fx-on .gr[data-rv].in{transform:none}
.fx-on .gr .gk{transform:scale(0);transition:transform .4s cubic-bezier(.3,1.6,.5,1);transition-delay:calc(var(--rvd,0ms) + 260ms)}
.fx-on .gr.in .gk{transform:none}
.fx-on .gtot s{text-decoration-color:transparent;transition:text-decoration-color .5s ease}
.fx-on .gtot.done s{text-decoration-color:#B4432F}
.fx-on .gt-us{transform:scale(.97);opacity:.55;transition:transform .5s cubic-bezier(.3,1.4,.5,1),opacity .5s}
.fx-on .gtot.done .gt-us{transform:none;opacity:1}
@media(max-width:760px){
  .ghead{display:none}
  .gr{grid-template-columns:minmax(0,1fr) auto 32px;grid-template-areas:"c p k" "l l l";gap:10px 12px;padding:14px 16px}
  .gc{grid-area:c;font-size:12.5px}
  .gpw{grid-area:p}
  .gk{grid-area:k;width:32px;height:32px}
  .gk::after{left:9px;top:9px;width:12px;height:7px}
  .gl{grid-area:l}
  .ic-c{width:36px;height:36px}
  .ic-c img{width:22px;height:22px}
  .gp b{font-size:1.25rem}
  .gtot{grid-template-columns:1fr}
}

/* ── the seat calculator ────────────────────────────────────────────── */
.calc{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:16px;margin-top:14px;align-items:stretch}
.calc-in{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:8px 22px;box-shadow:var(--shadow)}
.crow2{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;align-items:center;padding:16px 0;
  border-bottom:1px solid var(--line)}
.crow2:last-child{border-bottom:0}
.crow2 label{font-weight:700;font-size:15.5px;color:var(--ink)}
.crow2 small{display:block;font-weight:400;font-size:13px;color:var(--muted);line-height:1.4;margin-top:2px}
.crow2 .rate{font-size:13px;color:var(--dim);white-space:nowrap}
.step{display:inline-flex;align-items:center;border:1px solid var(--line2);border-radius:99px;background:var(--cream)}
.step button{appearance:none;border:0;background:none;font:inherit;font-size:20px;line-height:1;width:40px;height:40px;
  cursor:pointer;color:var(--navy);border-radius:50%}
.step button:hover{background:var(--skyfaint)}
.step button:focus-visible,.crow2 input[type=range]:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.step output{min-width:34px;text-align:center;font-weight:700;font-size:17px;font-variant-numeric:tabular-nums}
.crow2 input[type=range]{grid-column:1/-1;width:100%;accent-color:var(--bronze);height:28px;margin:0}
.calc-out{background:var(--navy);color:#fff;border-radius:16px;padding:26px 26px 24px;display:flex;flex-direction:column;
  position:relative;overflow:hidden;isolation:isolate}
.calc-out::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(70% 50% at 100% 0%,rgba(226,176,116,.28),transparent 70%)}
.calc-out .lab{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#E2B074}
.calc-total{font-family:var(--disp);font-weight:600;font-size:clamp(2.8rem,6vw,3.8rem);line-height:1;margin-top:10px;
  font-variant-numeric:tabular-nums}
.calc-total i{font-style:normal;font-size:.32em;font-weight:600;color:#B9CCD9;margin-left:4px}
.calc-plus{font-size:13.5px;color:#B9CCD9;margin-top:6px}
.calc-lines{list-style:none;margin:18px 0 0;padding:14px 0 0;border-top:1px solid rgba(255,255,255,.16);
  font-size:14px;display:grid;gap:7px}
.calc-lines li{display:flex;justify-content:space-between;gap:12px;color:#DCE8F0}
.calc-lines li span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap}
.calc-lines li.z{opacity:.45}
.calc-out .btn{margin-top:auto;background:var(--bronze);border-color:var(--bronze);color:#231303;text-align:center}
.calc-out .btn-wrap{margin-top:22px;display:grid}
.calc-note{font-size:12px;color:#9FB6C6;margin-top:10px;text-align:center}
@media(max-width:860px){.calc{grid-template-columns:1fr}.calc-in{padding:4px 16px}}
@media(max-width:620px){
  .crow2{grid-template-columns:1fr}
  .crow2>span{display:flex;align-items:center;justify-content:space-between}
}

@media(prefers-reduced-motion:reduce){
  .fx-on [data-rv],.fx-on .gr .gk,.fx-on .gt-us{opacity:1!important;transform:none!important;transition:none!important}
  .fx-on .gtot s{text-decoration-color:#B4432F!important}
  .of-stage img,.of-stage video,.fx-walk .walkstage .shot,.fx-walk .feat{transition:none!important}
}

/* the "new" pill above the hero eyebrow */
.fxpill{margin:0 0 18px}
.fxpill a{display:inline-flex;align-items:center;gap:8px;padding:5px 14px 5px 5px;border-radius:99px;
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:#fff;font-size:13.5px;
  text-decoration:none;transition:background .2s,border-color .2s}
.fxpill a:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4);text-decoration:none}
.fxpill b{background:#E2B074;color:#231303;border-radius:99px;padding:2px 9px;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase}

/* ── the hero on every page ─────────────────────────────────────────────
   Any hero element gets class "fxhero" and a <canvas class="ribbons"> as its
   first child (enhance_all.py does both). The band and the canvas run the
   full width of the window from inside a centred column, so no page has to
   be restructured. "dark" is the CRM site; cream sites use the light tone. */
html{overflow-x:clip}
/* ONE navy for every hero: a rich blue at the top right that dissolves, over a
   base that only changes from top to bottom and ends on the deep tone. The
   ribbon veil ends on that same deep tone, so the moving layer has dissolved
   completely by the time it reaches the hero's lower edge. The halo is a soft
   shadow the band throws onto the cream above and below it. */
:root{
  --fx-navy-bg:radial-gradient(62% 42% at 86% 26%,rgba(226,176,116,.17),transparent 72%),
    radial-gradient(52% 34% at 8% 80%,rgba(116,164,193,.12),transparent 72%),
    radial-gradient(95% 78% at 78% 0%,rgba(22,92,136,.58),rgba(22,92,136,.2) 46%,transparent 76%),
    linear-gradient(180deg,#00304F 0%,#00283F 44%,#001F35 76%,#001B2E 100%);
  --fx-navy-halo:0 0 46px rgba(0,27,46,.2),0 0 12px rgba(0,27,46,.12);
}
.fxhero{position:relative;isolation:isolate}
.fxhero>.fxrib{position:absolute;z-index:-1;top:0;left:calc(50% - 50vw);width:100vw;height:100%}
.fxhero.dark{color:#fff;padding-bottom:clamp(36px,5vw,60px)}
.fxhero.dark::before{content:"";position:absolute;z-index:-2;top:0;bottom:0;left:calc(50% - 50vw);width:100vw;
  background:var(--fx-navy-bg);box-shadow:var(--fx-navy-halo)}
.fxhero.dark h1,.fxhero.dark h2,.fxhero.dark h3{color:#fff}
.fxhero.dark .eyebrow{color:#E2B074}
.fxhero.dark p,.fxhero.dark .lede,.fxhero.dark .sub{color:#C9DAE6}
.fxhero.dark .lede strong{color:#fff}
.fxhero.dark a:not(.btn){color:#E2B074}
.fxhero.dark .btn:not(.ghost){background:var(--bronze);border-color:var(--bronze);color:#231303}
.fxhero.dark .btn.ghost{color:#fff;border-color:rgba(255,255,255,.38);background:transparent}
.fxhero.dark .btn.ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.6)}
.fxhero.dark .hero-art{filter:drop-shadow(0 18px 40px rgba(0,0,0,.35))}
.fxhero.dark+section{margin-top:clamp(40px,5vw,60px)}

/* whole sections arrive as they are reached */
.fx-on section[data-rv]{transform:translateY(22px)}
.fx-on section[data-rv].in{transform:none}

/* ── the ribbons ─────────────────────────────────────────────────────────
   fx.js draws two small canvases once and wraps them in .fxrib. All of the
   motion is here: two transform animations, run by the compositor. Each
   layer is three repeats wide and moves exactly one repeat, so it loops
   without a seam. */
canvas.ribbons{display:none}
.fxrib{overflow:hidden;pointer-events:none}
/* The light thins toward the words and toward the bottom edge. A veil of the
   page colour laid over the ribbons, NOT a mask: a mask over a moving layer
   is re-rastered every frame, and that alone cost a third of the frame rate. */
.fxrib::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to right,rgba(0,33,55,.9),rgba(0,33,55,.55) 30%,rgba(0,33,55,0) 66%),
             linear-gradient(to bottom,rgba(0,27,46,0) 46%,rgba(0,27,46,.5) 72%,rgba(0,27,46,.86) 88%,#001B2E 100%)}
.fxrib.light::after{
  background:linear-gradient(to right,rgba(251,247,236,.9),rgba(251,247,236,0) 64%),
             linear-gradient(to bottom,rgba(251,247,236,0) 50%,#FBF7EC)}
.fxrib canvas{display:block;position:absolute;left:-50%;top:max(-30%,-215px);width:300%;height:min(160%,1150px);
  transform:rotate(-7deg);will-change:transform;animation:fxdrift 64s linear infinite}
.fxrib canvas+canvas{animation-duration:41s;animation-direction:reverse}
.fxrib.paused canvas{animation-play-state:paused}
.fxrib.still canvas{animation:none}
@keyframes fxdrift{from{transform:rotate(-7deg) translate3d(0,0,0)}to{transform:rotate(-7deg) translate3d(-33.3333%,0,0)}}
@media(max-width:700px){
  .fxrib::after{background:linear-gradient(to bottom,rgba(0,33,55,.3),rgba(0,33,55,.78) 46%,rgba(0,27,46,.9) 82%,#001B2E 100%)}
  .fxrib.light::after{background:linear-gradient(to bottom,rgba(251,247,236,.35),rgba(251,247,236,.85) 52%,#FBF7EC)}
  .fxrib canvas{width:520%;left:-110%}
}
@media(prefers-reduced-motion:reduce){.fxrib canvas{animation:none!important}}

/* Agents site: between the phone menu and a wide screen the bar wrapped onto
   two lines. The two cross-site links step aside there (they are also in the
   product switcher), which leaves room for the Office link. */
@media(min-width:821px) and (max-width:1199px){body>nav .cross,body>nav .navsep{display:none}}

/* ── Agents site: the interactive blocks (enhance_agents.py) ─────────────
   That site styles everything inline, so these blocks carry their own
   headings, buttons and fine print under .fxa. */
.fxa{margin-top:clamp(44px,6vw,64px)}
.fxa h2{font-family:var(--disp);font-size:clamp(1.5rem,3vw,2rem);font-weight:600;letter-spacing:-.012em;margin:0 0 8px;text-wrap:balance}
.fxa .sub{color:var(--muted);margin:0 0 22px;max-width:62ch}
.fxa .fine{font-size:12.5px;color:var(--dim);margin:14px 0 0;max-width:96ch;line-height:1.5}
.fxa .btn{display:inline-block;padding:12px 20px;border-radius:10px;font-weight:600;font-size:15px;text-decoration:none}
.fxa .calc{margin-top:0}

/* a US hire against an agent */
.hire-tiers{border:0;margin:0;padding:14px 0 12px;display:grid;gap:8px;border-bottom:1px solid var(--line)}
.hire-tiers legend{font-weight:700;font-size:15.5px;padding:0;margin-bottom:8px}
.hire-tiers label{display:block;cursor:pointer}
.hire-tiers input{position:absolute;opacity:0;pointer-events:none}
.hire-tiers span{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 14px;
  border:1px solid var(--line2);border-radius:10px;background:var(--cream);transition:border-color .2s,background .2s}
.hire-tiers small{color:var(--dim);font-size:13px;white-space:nowrap}
.hire-tiers b{font-size:14.5px}
.hire-tiers input:checked+span{border-color:var(--bronze);background:#fff;box-shadow:inset 0 0 0 1px var(--bronze)}
.hire-tiers input:focus-visible+span{outline:2px solid var(--navy);outline-offset:2px}
.hire-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hire-pair p{margin:0}
.hire-pair span{display:block;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#B9CCD9}
.hire-pair b{display:block;font-family:var(--disp);font-weight:600;font-size:clamp(1.7rem,3.6vw,2.4rem);line-height:1.1;
  margin-top:6px;font-variant-numeric:tabular-nums}
.hire-pair i{font-style:normal;font-size:.36em;color:#B9CCD9;margin-left:3px}
.hire-us b{color:#DCE8F0;text-decoration:line-through;text-decoration-color:#E08A76;text-decoration-thickness:2px}
.hire-i2e span{color:#E2B074}
.hire-diff{margin:18px 0 0;padding:12px 14px;border-radius:10px;background:rgba(226,176,116,.16);color:#F4E3CB;font-size:14.5px;line-height:1.5}
.hire-diff b{font-family:var(--disp);font-size:1.25rem;color:#fff;font-variant-numeric:tabular-nums}
@media(max-width:420px){.hire-pair{grid-template-columns:1fr}}

/* a generic VA against a trained agent */
.tv{background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.tv-head,.tv-row summary{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1.2fr);gap:12px;align-items:center;padding:13px 18px}
.tv-head{background:var(--navy);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.tv-head span:last-child{color:#E2B074}
.tv-row{border-top:1px solid var(--line)}
.tv-row summary{cursor:pointer;list-style:none;font-size:14.5px;position:relative;padding-right:40px}
.tv-row summary::-webkit-details-marker{display:none}
.tv-row summary::after{content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);color:var(--bronze);font-size:20px;line-height:1}
.tv-row[open] summary::after{content:"\2212"}
.tv-row summary:hover{background:var(--cream)}
.tv-row summary:focus-visible{outline:2px solid var(--navy);outline-offset:-2px}
.tv-row .no{color:var(--dim)}
.tv-row .yes{color:var(--ok);font-weight:600}
.tv-row p{margin:0;padding:0 18px 14px;color:var(--muted);font-size:14px;max-width:80ch}
.tv-row[open]{background:#FFFDF8}
@media(max-width:620px){
  .tv-head{display:none}
  .tv-row summary{grid-template-columns:1fr;gap:3px}
  .tv-row .no::before{content:"Generic VA: ";font-weight:600}
  .tv-row .yes::before{content:"Trained: "}
}

/* the globe */
.globe-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.globe-filter button,.globe-list button{appearance:none;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;color:var(--ink);
  background:var(--paper);border:1px solid var(--line2);border-radius:99px;padding:7px 14px;transition:background .2s,border-color .2s,opacity .2s}
.globe-filter button[aria-pressed="true"],.globe-list button.on{background:var(--navy);border-color:var(--navy);color:#fff}
.globe-filter button:focus-visible,.globe-list button:focus-visible,.globe-pin:focus-visible,.globe-stage:focus-visible{outline:2px solid var(--bronze);outline-offset:2px}
.globe-grid{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:clamp(20px,4vw,48px);align-items:center}
.globe-stage{position:relative;width:100%;max-width:440px;aspect-ratio:1;touch-action:pan-y;cursor:grab;border-radius:50%;user-select:none;-webkit-user-select:none}
.globe-stage:active{cursor:grabbing}
.globe-stage canvas{width:100%;height:100%;display:block}
.globe-pin{position:absolute;left:0;top:0;width:0;height:0;padding:0;border:0;background:none;cursor:pointer}
.globe-pin i{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;background:#E2B074;
  box-shadow:0 0 0 3px rgba(226,176,116,.35),0 1px 3px rgba(0,0,0,.4);transition:transform .2s,background .2s}
.globe-pin::before{content:"";position:absolute;left:-18px;top:-18px;width:36px;height:36px}
.globe-pin span{position:absolute;left:12px;top:-10px;white-space:nowrap;font-size:11.5px;font-weight:700;color:#fff;
  text-shadow:0 1px 3px rgba(0,20,34,.9);pointer-events:none;opacity:0;transition:opacity .2s}
.globe-pin:hover span,.globe-pin:focus-visible span,.globe-pin.on span{opacity:1}
.globe-pin:hover i,.globe-pin.on i{transform:scale(1.35);background:#fff}
.globe-pin.dim{opacity:.25}
.globe-list{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.globe-list p{flex:0 0 100%;width:100%;max-width:none;margin:10px 0 0;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--bronze)}
.globe-list p:first-child{margin-top:0}
.globe-list button.dim{opacity:.35}
.globe-card{position:relative;margin-top:18px;background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--bronze);
  border-radius:14px;padding:18px 20px;box-shadow:var(--shadow)}
.globe-card h3{font-family:var(--disp);font-size:1.3rem;margin:0}
.globe-card .gc-region{margin:2px 0 12px;color:var(--dim);font-size:13px}
.globe-card dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:14px}
.globe-card dt{font-weight:700;color:var(--ink)}
.globe-card dd{margin:0;color:var(--muted)}
.gc-x{position:absolute;right:10px;top:8px;appearance:none;border:0;background:none;font-size:22px;line-height:1;cursor:pointer;color:var(--dim);padding:4px 8px}
@media(max-width:820px){.globe-grid{grid-template-columns:1fr}.globe-stage{max-width:340px;margin:0 auto}}

/* six cards read better three across than four and two */
@media(min-width:900px){#everything .icons{grid-template-columns:repeat(3,1fr)}}

/* ── the navy treatment on the Agents and Training sites ──────────────────
   The Agents site styles every element inline, so the dark hero has to win
   over inline colours: hence !important here and nowhere else. */
.fxhero.dark{padding-top:clamp(40px,5.5vw,64px)!important;padding-bottom:clamp(36px,5vw,60px)!important}
.fxhero.dark h1,.fxhero.dark h2,.fxhero.dark h3{color:#fff!important}
.fxhero.dark p,.fxhero.dark .lede,.fxhero.dark .sub{color:#C9DAE6!important}
.fxhero.dark p[style*="letter-spacing"],.fxhero.dark .eyebrow{color:#E2B074!important}
.fxhero.dark .lede strong,.fxhero.dark p strong{color:#fff!important}
.fxhero.dark a.hv1,.fxhero.dark .btn:not(.ghost){background:var(--bronze)!important;border-color:var(--bronze)!important;color:#231303!important}
.fxhero.dark a.hv2,.fxhero.dark .btn.ghost{color:#fff!important;border-color:rgba(255,255,255,.38)!important;background:transparent!important}
.fxhero.dark a.hv2:hover,.fxhero.dark .btn.ghost:hover{background:rgba(255,255,255,.08)!important}
.fxhero.dark img{filter:drop-shadow(0 18px 40px rgba(0,0,0,.35))}
.fxhero .fxstats{margin-top:clamp(24px,3.2vw,36px)}

/* a product screen in a browser frame, under a hero */
.fxbrowser{margin:clamp(28px,4vw,44px) auto 0;max-width:1180px;background:var(--paper);border-radius:14px;overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.10)}
.fxbrowser-bar{display:flex;align-items:center;gap:6px;padding:9px 14px;background:#EEF3F7;border-bottom:1px solid var(--line2)}
.fxbrowser-bar i{width:9px;height:9px;border-radius:50%;background:#C9D6E0}
.fxbrowser-bar span{margin-left:10px;font-size:11.5px;color:var(--dim);font-family:ui-monospace,Menlo,Consolas,monospace}
.fxbrowser img{width:100%;height:auto;display:block}

/* a full-width navy band inside a centred column */
.fxdark{position:relative;isolation:isolate;color:#fff;margin-top:clamp(52px,7vw,84px);padding:clamp(44px,6vw,76px) 0}
.fxdark::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:calc(50% - 50vw);width:100vw;box-shadow:var(--fx-navy-halo);
  background:radial-gradient(50% 45% at 80% 0%,rgba(226,176,116,.18),transparent 70%),
             radial-gradient(55% 50% at 0% 100%,rgba(116,164,193,.16),transparent 72%),
             linear-gradient(180deg,#001D31 0%,#00263F 30%,#002F4E 68%,#003556 100%)}
.fxdark.fxa{margin-top:clamp(52px,7vw,84px)}
.fxdark h2{color:#fff}
.fxdark .eyebrow{color:#E2B074;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;margin:0 0 14px}
.fxdark .sub{color:#C9DAE6}
.fxdark a.more{color:#E2B074;font-weight:600;text-decoration:none}
.fxdark a.more:hover{text-decoration:underline}
.fxdark .globe-filter button,.fxdark .globe-list button{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2);color:#DCE8F0}
.fxdark .globe-filter button[aria-pressed="true"],.fxdark .globe-list button.on{background:#E2B074;border-color:#E2B074;color:#231303}
.fxdark .globe-list p{color:#E2B074}
.fxdark .globe-stage canvas{filter:drop-shadow(0 0 40px rgba(116,164,193,.25))}
.fxdark+section,.fxdark+.fxa{margin-top:clamp(48px,6vw,72px)}

/* the editable hourly wage on the hire comparison */
.wagebox{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--line2);border-radius:99px;background:var(--cream);
  padding:0 14px;height:42px;font-weight:700;font-size:17px}
.wagebox input{appearance:textfield;-moz-appearance:textfield;border:0;background:none;font:inherit;width:4.6em;text-align:right;
  font-variant-numeric:tabular-nums;color:var(--ink);padding:0}
.wagebox input::-webkit-outer-spin-button,.wagebox input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.wagebox input:focus{outline:none}
.wagebox:focus-within{outline:2px solid var(--navy);outline-offset:2px}
.wagebox i{font-style:normal;font-weight:400;font-size:13px;color:var(--dim);margin-left:4px}
.hire-reset{grid-column:1/-1;justify-self:start;appearance:none;border:0;background:none;padding:0;font:inherit;font-size:13px;
  color:var(--steel);text-decoration:underline;cursor:pointer}
.hire-reset[hidden]{display:none}

/* Training: the course screens */
#inside .ctr,#inside h2{text-align:center}
#inside h2{margin-bottom:6px}
#inside .feat h3{font-size:1.35rem;margin:0 0 8px}
#inside .feat p{color:var(--muted);margin:0}
#inside .feat .eyebrow{color:var(--bronze);margin-bottom:10px}
#inside .shot img{width:100%;height:auto;display:block;border-radius:10px}

/* CRM pricing: onboarding options and the usage table under the calculator */
.onb,.usage{max-width:760px;margin:34px auto 0}
.onb h3,.usage h3{margin:0 0 12px}
.onb-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.onb-grid>div{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:18px 20px;box-shadow:var(--shadow)}
.onb-name{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--bronze);margin:0}
.onb-price{font-family:var(--disp);font-size:1.9rem;font-weight:600;color:var(--navy);margin:4px 0 8px;line-height:1.1}
.onb-grid p:last-child{color:var(--muted);font-size:14.5px;margin:0}
td small{display:block;font-weight:400;font-size:12.5px;color:var(--dim)}
@media(max-width:620px){.onb-grid{grid-template-columns:1fr}}

/* illustrations on navy: the flat line drawings were made for cream, so on a
   dark hero each one sits on a cream disc (or a rounded tile for the one
   that is a rectangle) instead of dissolving into the background */
.fxhero.dark img[src$="desk.png"],.fxhero.dark img[src$="handshake.png"]{border-radius:50%}
.fxhero.dark img[src$="/img/training.png"]{border-radius:22px}
.fxhero.dark img[src$="mva.png"],.fxhero.dark img[src$="agent.png"],.fxhero.dark img[src$="team-growth.png"]{
  background:#FBF7EC;border-radius:50%;padding:7%;box-sizing:border-box}

/* the place card is a light card inside the navy band */
.fxdark .globe-card,.fxdark .globe-card h3{color:var(--ink)}

/* the play button laid over a film that could not start by itself */
.fxplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;width:68px;height:68px;border-radius:50%;
  border:2px solid rgba(255,255,255,.85);background:rgba(0,47,78,.78);color:#fff;cursor:pointer;display:grid;place-items:center;
  box-shadow:0 10px 30px rgba(0,0,0,.35);padding:0;-webkit-tap-highlight-color:transparent}
.fxplay svg{width:30px;height:30px;margin-left:3px}
.fxplay:focus-visible{outline:3px solid #E2B074;outline-offset:3px}

/* ── one container on all four sites: 1240px with 30px gutters = 1180px of
   content (the Agents site's measure). The CRM stylesheet already says this;
   Home and Training said 1080px. */
:root{--wrap:1240px}
@media(min-width:621px){.wrap{padding-inline:30px}}
@media(min-width:1260px){.hero{margin-inline:0}}

/* CRM nav with the "See Demo Firm" button: the two cross-site links live in
   the product switcher, and "Book a call" stays in the hero, so the bar holds
   one line at every desktop width. */
@media(min-width:1061px){
  .top nav:has(a[data-fx="demo"]) .cross,.top nav:has(a[data-fx="demo"]) .navsep{display:none}
}
@media(min-width:1061px) and (max-width:1239px){.top nav:has(a[data-fx="demo"]) a.hb{display:none}}

/* ══ THE BRAND LAYER (2026-10-04) ═══════════════════════════════════════
   One system across the four sites. See BRAND.md for the reference. */
:root{
  --r-card:16px; --r-frame:14px; --r-btn:10px;
  --shadow-card:0 1px 2px rgba(0,32,60,.06),0 10px 28px rgba(0,32,60,.07);
  --shadow-lift:0 2px 4px rgba(0,32,60,.07),0 20px 44px rgba(0,32,60,.13);
  --shadow-frame:0 2px 6px rgba(0,32,60,.08),0 24px 60px rgba(0,32,60,.16);
  --gold:#E2B074; --navy-deep:#001B2E;
}

/* ── marks: the hero medallion carries its own ring and shadow ── */
img[src*="-hero.webp"]{filter:none!important;border-radius:0!important;background:none!important;padding:0!important}
.fxhero.dark img[src$="desk.png"],.fxhero.dark img[src$="handshake.png"],.fxhero.dark img[src$="mva.png"],
.fxhero.dark img[src$="agent.png"],.fxhero.dark img[src$="team-growth.png"]{
  border-radius:50%!important;box-shadow:0 0 0 3px #FBF7EC,0 0 0 8px #B9793F,0 22px 44px rgba(0,0,0,.42);filter:none}
.fxhero.dark img[src$="/img/training.png"]{box-shadow:0 0 0 3px #FBF7EC,0 0 0 8px #B9793F,0 22px 44px rgba(0,0,0,.42);filter:none}

/* ── one card: radius, line, shadow, and a lift on hover ── */
.card,.plan,.calc-in,.onb-grid>div,.tv,.hv4,.callout{border-radius:var(--r-card)!important;box-shadow:var(--shadow-card)}
.card,.hv4,.onb-grid>div{transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s ease,border-color .28s ease}
a.card:hover,.card:hover,.hv4:hover,.onb-grid>div:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.callout{border-left:0!important;border-top:3px solid var(--bronze)!important;background:var(--paper)}

/* ── one frame for every product screen: a browser bar, a radius, a shadow ── */
figure.shot{position:relative;padding:0!important;overflow:hidden;border-radius:var(--r-frame)!important;border:1px solid var(--line2)!important;
  background:#fff!important;box-shadow:var(--shadow-frame)!important}
figure.shot::before{content:"";display:block;height:26px;border-bottom:1px solid var(--line2);background-color:#EEF3F7;background-repeat:no-repeat;
  background-image:radial-gradient(circle at 16px 50%,#C9D6E0 4.5px,transparent 5px),radial-gradient(circle at 30px 50%,#C9D6E0 4.5px,transparent 5px),radial-gradient(circle at 44px 50%,#C9D6E0 4.5px,transparent 5px)}
figure.shot img,figure.shot video{border-radius:0!important;display:block;width:100%}
.fx-walk .walkstage .shot{display:block;height:auto;inset:auto 0 auto 0;top:50%;transform:translateY(-50%) scale(.985)}
.fx-walk .walkstage .shot.on{transform:translateY(-50%)}
.browser,.fxbrowser{border-radius:var(--r-frame)}

/* ── tabs: a topic list beside one panel (built by fx.js from the paired
   bullet lists, or written directly by a generator) ── */
.fxtabs{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:0;margin-top:clamp(30px,4vw,48px);
  border-radius:var(--r-card);overflow:hidden;background:var(--navy);color:#fff;box-shadow:var(--shadow-frame);position:relative;isolation:isolate}
.fxtabs::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 60% at 100% 0%,rgba(226,176,116,.20),transparent 70%)}
.fxtabs-list{display:flex;flex-direction:column;padding:14px;gap:4px;background:rgba(0,0,0,.18)}
.fxtabs-list button{appearance:none;font:inherit;text-align:left;cursor:pointer;color:#C9DAE6;background:none;border:0;border-radius:10px;
  padding:13px 14px;font-weight:600;font-size:15px;line-height:1.3;transition:background .2s,color .2s;display:flex;gap:10px;align-items:baseline}
.fxtabs-list button i{font-style:normal;font-size:11.5px;font-weight:700;color:var(--gold);font-variant-numeric:tabular-nums;letter-spacing:.06em}
.fxtabs-list button:hover{background:rgba(255,255,255,.07);color:#fff}
.fxtabs-list button[aria-selected="true"]{background:var(--gold);color:#231303}
.fxtabs-list button[aria-selected="true"] i{color:#5A3A12}
.fxtabs-list button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.fxtabs-panels{padding:clamp(22px,3vw,36px)}
.fxtabs-panels>*{animation:fxfade .35s ease}
.fxtabs-panels h3{color:#fff!important;font-size:1.45rem!important;margin:0 0 14px!important}
.fxtabs-panels ul{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.fxtabs-panels li{position:relative;padding-left:30px;color:#DCE8F0;font-size:16px;line-height:1.5}
.fxtabs-panels li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:50%;background:var(--gold)}
.fxtabs-panels li::after{content:"";position:absolute;left:5px;top:8px;width:7px;height:4px;border-left:2px solid #231303;border-bottom:2px solid #231303;transform:rotate(-45deg)}
.fxtabs-panels li strong{color:#fff}
.fxtabs-panels a{color:var(--gold)}
.fxtabs-panels p{color:#C9DAE6;margin:0 0 12px}
@keyframes fxfade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(max-width:760px){
  .fxtabs{grid-template-columns:1fr}
  .fxtabs-list{flex-direction:row;overflow-x:auto;scrollbar-width:none;padding:10px}
  .fxtabs-list::-webkit-scrollbar{display:none}
  .fxtabs-list button{flex:0 0 auto;white-space:nowrap;padding:9px 13px;font-size:14px}
}

/* ── steps: one open at a time, with a rail ── */
.fxsteps{position:relative}
.fxsteps .hv5{cursor:pointer;border-radius:var(--r-card);padding:16px 18px!important;border:1px solid transparent!important;
  transition:background .25s,border-color .25s,box-shadow .25s}
.fxsteps .hv5>div:first-child{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--bronze);
  color:var(--bronze)!important;font-family:var(--body)!important;font-size:14px!important;font-weight:700!important;flex:0 0 auto;transition:background .25s,color .25s}
.fxsteps .hv5 p{display:none}
.fxsteps .hv5.on{background:var(--paper);border-color:var(--line)!important;box-shadow:var(--shadow-card)}
.fxsteps .hv5.on>div:first-child{background:var(--bronze);color:#231303!important}
.fxsteps .hv5.on p{display:block;animation:fxfade .35s ease}
.fxsteps .hv5:hover:not(.on){background:rgba(255,255,255,.6)}
.fxsteps .hv5:focus-visible{outline:2px solid var(--navy);outline-offset:2px}

/* ── Training: seats, priced ── */
.seatcalc .calc-total{margin-top:6px}
.seat-inc{list-style:none;margin:16px 0 0;padding:14px 0 0;border-top:1px solid rgba(255,255,255,.16);display:grid;gap:8px;font-size:14px;color:#DCE8F0}
.seat-inc li{position:relative;padding-left:24px}
.seat-inc li::before{content:"";position:absolute;left:2px;top:5px;width:10px;height:6px;border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg)}
.seat-setup{display:flex;justify-content:space-between;gap:12px;margin-top:14px;padding:12px 14px;border-radius:10px;background:rgba(226,176,116,.16);color:#F4E3CB;font-size:14.5px}
.seat-setup b{color:#fff}

/* ── type and rhythm, the same on every site ── */
.fxa h2,section>h2,section h2{letter-spacing:-.014em}
.eyebrow{letter-spacing:.16em}
@media(prefers-reduced-motion:reduce){.fxtabs-panels>*,.fxsteps .hv5.on p{animation:none}.card,.hv4{transition:none}}

.fxtabs-panels ul.two{grid-template-columns:1fr 1fr}
@media(max-width:760px){.fxtabs-panels ul.two{grid-template-columns:1fr}}

/* Home: the three reasons, as a navy band */
.fxwhy .callout{background:none!important;border:0!important;box-shadow:none!important;padding:0;margin-top:22px;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;counter-reset:why}
.fxwhy .callout p{margin:0;padding:20px 20px 22px;border-radius:var(--r-card);border:1px solid rgba(255,255,255,.14);
  background:rgba(8,40,64,.72);color:#fff;font-size:1.05rem;line-height:1.4;counter-increment:why}
.fxwhy .callout p::before{content:"0" counter(why);display:block;font-size:11.5px;font-weight:700;letter-spacing:.14em;color:var(--gold);margin-bottom:10px}
.fxwhy .callout p strong{font-weight:600}
@media(max-width:760px){.fxwhy .callout{grid-template-columns:1fr}}
.fxwhy .callout p strong,.fxwhy .callout p{color:#fff!important}
.fxwhy{margin-top:clamp(52px,7vw,84px)!important}
@media(max-width:860px){#inside .feat{grid-template-columns:1fr!important}#inside .feat .shot{order:0!important}}

/* ══ THE FINISHING PASS (2026-10-04, second half) ═══════════════════════
   Components shared by the four sites, then each site's own blocks. */

/* a filter on a 1180px screenshot is repainted with every frame that touches
   it; product frames carry a box-shadow instead */
.fxhero.dark .fxbrowser img,.fxhero.dark .hsys img{filter:none}
.fxdark .btn:not(.ghost){background:var(--bronze);border-color:var(--bronze);color:#231303}
.fxdark .btn:not(.ghost):hover{background:#C98A4E;border-color:#C98A4E}

/* ── screens on tabs: one browser frame, a pill per screen ─────────────
   Markup from a generator: .fxscreens[data-fxscreens] > .fxbrowser >
   .fxs-stage > img (the first with src, the rest with data-src), then
   .fxs-tabs > button[data-note], then .fxs-cap. Replace an image file and
   the screen is updated; nothing else names it. */
.fxscreens .fxbrowser{margin:0;max-width:none;border:1px solid var(--line2);box-shadow:var(--shadow-frame)}
.fxs-stage{position:relative;aspect-ratio:16/10;background:#F3F0E8;overflow:hidden}
.fxs-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left top;opacity:0;transition:opacity .45s ease}
.fxs-stage img.on{opacity:1}
.fxs-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.fxs-tabs button{appearance:none;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;color:var(--ink);background:var(--paper);
  border:1px solid var(--line);border-radius:99px;padding:8px 15px;transition:background .2s,border-color .2s,color .2s,box-shadow .2s}
.fxs-tabs button:hover{border-color:var(--sky);box-shadow:var(--shadow-card)}
.fxs-tabs button[aria-selected="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.fxs-tabs button:focus-visible{outline:2px solid var(--bronze);outline-offset:2px}
.fxs-cap{margin:12px 0 0;font-size:14.5px;line-height:1.5;color:var(--muted);min-height:1.5em}
.fxdark .fxscreens .fxbrowser{border:0;box-shadow:0 30px 80px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.10)}
.fxdark .fxs-tabs button{color:#DCE8F0;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18)}
.fxdark .fxs-tabs button:hover{background:rgba(255,255,255,.12);box-shadow:none}
.fxdark .fxs-tabs button[aria-selected="true"]{background:var(--gold);border-color:var(--gold);color:#231303}
.fxdark .fxs-cap{color:#C9DAE6}
@media(max-width:700px){
  .fxs-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-20px;padding-inline:20px;padding-bottom:4px}
  .fxs-tabs::-webkit-scrollbar{display:none}
  .fxs-tabs button{flex:0 0 auto}
}

/* ── rhythm: a heading, ten pixels, its one sentence ── */
h2+.sub{margin-top:10px}

/* ── steps on a rail: every step is in the page, one is lit at a time ── */
.fxflow{position:relative;display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:clamp(14px,2vw,26px);margin-top:28px}
.fxflow::before,.fxflow::after{content:"";position:absolute;left:20px;top:19px;height:2px;border-radius:2px}
.fxflow::before{right:20px;background:var(--line)}
.fxflow::after{width:calc((100% - 40px) * var(--p,0));background:var(--bronze);transition:width .5s cubic-bezier(.2,.7,.2,1)}
.fxflow-step{appearance:none;font:inherit;text-align:left;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;
  position:relative;z-index:1;display:block;border-radius:12px;transition:opacity .3s ease}
.fxflow-step i{font-style:normal;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--cream);
  border:1.5px solid var(--bronze);color:var(--bronze);font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;
  transition:background .3s,color .3s,box-shadow .3s}
.fxflow-step>span{display:block;margin-top:16px;padding-right:6px}
.fxflow-step em{font-style:normal;display:inline-block;margin-bottom:8px;padding:3px 9px;border-radius:99px;background:var(--skyfaint,#EAF1F7);
  color:var(--steel,#3E6E90);font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.fxflow-step b{display:block;font-family:var(--disp);font-size:1.18rem;font-weight:600;line-height:1.25;color:var(--ink);letter-spacing:-.008em}
.fxflow-step small{display:block;margin-top:7px;font-size:14.5px;line-height:1.5;color:var(--muted)}
.fxflow-step:focus-visible{outline:2px solid var(--navy);outline-offset:6px}
.fxflow.live .fxflow-step{opacity:.62}
.fxflow.live .fxflow-step:hover{opacity:.85}
.fxflow.live .fxflow-step.done{opacity:.82}
.fxflow.live .fxflow-step.on{opacity:1}
.fxflow .fxflow-step.done i{background:var(--bronze);color:#231303}
.fxflow .fxflow-step.on i{background:var(--bronze);color:#231303;box-shadow:0 0 0 6px rgba(185,121,63,.18)}
.fxdark .fxflow::before{background:rgba(255,255,255,.18)}
.fxdark .fxflow::after{background:var(--gold)}
.fxdark .fxflow-step i{background:#002A46;border-color:var(--gold);color:var(--gold)}
.fxdark .fxflow-step b{color:#fff}
.fxdark .fxflow-step small{color:#C9DAE6}
.fxdark .fxflow .fxflow-step.done i,.fxdark .fxflow .fxflow-step.on i{background:var(--gold);color:#231303}
.fxdark .fxflow .fxflow-step.on i{box-shadow:0 0 0 6px rgba(226,176,116,.2)}
@media(max-width:760px){
  .fxflow{grid-template-columns:1fr;gap:22px}
  .fxflow::before,.fxflow::after{left:19px;top:20px;width:2px;height:auto}
  .fxflow::before{right:auto;bottom:20px}
  .fxflow::after{width:2px;height:calc((100% - 40px) * var(--p,0));transition:height .5s cubic-bezier(.2,.7,.2,1)}
  .fxflow-step{display:grid;grid-template-columns:40px minmax(0,1fr);gap:16px;align-items:start}
  .fxflow-step>span{margin-top:7px}
}
.fxflow.col{grid-template-columns:1fr;gap:22px}
.fxflow.col::before,.fxflow.col::after{left:19px;top:20px;width:2px;height:auto}
.fxflow.col::before{right:auto;bottom:20px}
.fxflow.col::after{width:2px;height:calc((100% - 40px) * var(--p,0));transition:height .5s cubic-bezier(.2,.7,.2,1)}
.fxflow.col .fxflow-step{display:grid;grid-template-columns:40px minmax(0,1fr);gap:16px;align-items:start}
.fxflow.col .fxflow-step>span{margin-top:7px}
@media(prefers-reduced-motion:reduce){.fxflow::after,.fxflow-step,.fxflow-step i{transition:none}}

/* ── a hub: things around one centre, a line to whichever is picked ── */
.fxhub{--gap:clamp(24px,4.5vw,64px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(0,1fr);gap:var(--gap);align-items:center;margin-top:30px}
.fxhub-col{display:grid;gap:14px}
.fxhub-node{appearance:none;font:inherit;text-align:left;cursor:pointer;position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 14px;
  align-items:center;padding:14px 16px;border-radius:var(--r-card);background:var(--paper);border:1px solid var(--line);color:var(--ink);
  box-shadow:var(--shadow-card);transition:border-color .25s,box-shadow .25s,transform .25s cubic-bezier(.2,.7,.2,1)}
.fxhub-node svg{grid-row:1/3;width:44px;height:44px;padding:10px;border-radius:12px;background:var(--skyfaint,#EAF1F7);fill:none;stroke:var(--navy);
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:background .25s,stroke .25s}
.fxhub-node b{font-family:var(--disp);font-size:1.06rem;font-weight:600;line-height:1.25;letter-spacing:-.008em}
.fxhub-node small{grid-column:2;font-size:14px;line-height:1.45;color:var(--muted)}
.fxhub-node::after{content:"";position:absolute;top:50%;left:100%;width:var(--gap);height:2px;background:var(--line);transition:background .25s}
.fxhub-col.r .fxhub-node::after{left:auto;right:100%}
.fxhub-node:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.fxhub-node:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.fxhub.live .fxhub-node small{display:none}
.fxhub.live .fxhub-node b{grid-row:1/3}
.fxhub-node.on{border-color:var(--bronze);box-shadow:inset 0 0 0 1px var(--bronze),var(--shadow-lift)}
.fxhub-node.on::after{background:var(--bronze)}
.fxhub-node.on svg{background:var(--bronze);stroke:#231303}
.fxhub-core{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-card);background:var(--navy);color:#fff;text-align:center;
  padding:clamp(26px,3.4vw,40px) clamp(20px,2.6vw,32px);min-height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:var(--shadow-frame)}
.fxhub-core::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 55% at 100% 0%,rgba(226,176,116,.26),transparent 70%),
  radial-gradient(60% 50% at 0% 100%,rgba(116,164,193,.2),transparent 70%)}
.fxhub-core img{width:72px;height:72px}
.fxhub-k{margin:16px 0 0;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.fxhub-t{margin:10px 0 0;font-family:var(--disp);font-size:clamp(1.3rem,2.4vw,1.6rem);font-weight:600;line-height:1.15;color:#fff}
.fxhub-l{margin:10px 0 0;font-size:15.5px;line-height:1.5;color:#C9DAE6;max-width:34ch}
.fxhub-core.swap .fxhub-t,.fxhub-core.swap .fxhub-l{animation:fxfade .35s ease}
@media(max-width:900px){
  .fxhub{grid-template-columns:1fr;gap:14px}
  .fxhub-core{display:none}
  .fxhub-node::after{display:none}
  .fxhub.live .fxhub-node small{display:block}
  .fxhub.live .fxhub-node b{grid-row:auto}
  .fxhub-node.on{border-color:var(--line);box-shadow:var(--shadow-card)}
  .fxhub-node.on svg{background:var(--skyfaint,#EAF1F7);stroke:var(--navy)}
}
@media(prefers-reduced-motion:reduce){.fxhub-node,.fxhub-node svg{transition:none}.fxhub-core.swap .fxhub-t,.fxhub-core.swap .fxhub-l{animation:none}}

/* ── a picker: every name in groups, one detail card ── */
.fxpick{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(22px,4vw,56px);align-items:center;margin-top:6px}
.fxpick-list{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start}
.fxpick-list>p{flex:0 0 100%;max-width:none;margin:16px 0 2px;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--bronze)}
.fxpick-list>p:first-child{margin-top:0}
.fxpick-list button{appearance:none;font:inherit;text-align:left;cursor:pointer;color:var(--ink);background:var(--paper);border:1px solid var(--line);
  border-radius:99px;padding:9px 16px;box-shadow:var(--shadow-card);transition:background .2s,border-color .2s,color .2s,transform .2s}
.fxpick-list button b{font-weight:600;font-size:14.5px}
.fxpick-list button small{display:block;font-size:13.5px;color:var(--muted);margin-top:2px}
.fxpick-list button:hover{border-color:var(--sky);transform:translateY(-1px)}
.fxpick-list button:focus-visible{outline:2px solid var(--bronze);outline-offset:2px}
.fxpick.live .fxpick-list button small{display:none}
.fxpick:not(.live) .fxpick-list button{border-radius:14px;flex:1 1 240px}
.fxpick-list button.on{background:var(--navy);border-color:var(--navy);color:#fff}
.fxpick-card{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-card);background:var(--navy);color:#fff;
  padding:clamp(24px,3.2vw,38px);min-height:300px;display:flex;flex-direction:column;box-shadow:var(--shadow-frame)}
.fxpick:not(.live) .fxpick-card{display:none}
.fxpick-card::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 55% at 100% 0%,rgba(226,176,116,.26),transparent 70%),
  radial-gradient(60% 50% at 0% 100%,rgba(116,164,193,.18),transparent 70%)}
.fxpick-card>*{max-width:none}
.fxpick-k{align-self:flex-start;padding:4px 11px;border-radius:99px;background:var(--gold);color:#231303;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.fxpick-k.plain{background:rgba(255,255,255,.14);color:#DCE8F0}
.fxpick-t{margin:16px 0 0;font-family:var(--disp);font-size:clamp(1.45rem,2.6vw,1.9rem);font-weight:600;line-height:1.12;letter-spacing:-.012em;color:#fff}
.fxpick-l{margin:10px 0 0;font-size:16px;line-height:1.5;color:#DCE8F0}
.fxpick-b{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.fxpick-b:empty{display:none}
.fxpick-b li{position:relative;padding-left:24px;font-size:14.5px;line-height:1.4;color:#DCE8F0}
.fxpick-b li::before{content:"";position:absolute;left:2px;top:5px;width:10px;height:6px;border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg)}
.fxpick-m{margin:auto 0 0;padding-top:18px;font-size:13.5px;line-height:1.5;color:#9FB6C6}
.fxpick-p{margin:12px 0 0;padding-top:14px;border-top:1px solid rgba(255,255,255,.16);display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:14px;color:#C9DAE6}
.fxpick-p:empty{display:none}
.fxpick-p b{font-family:var(--disp);font-size:1.5rem;font-weight:600;color:#fff;font-variant-numeric:tabular-nums}
.fxpick-p a{color:var(--gold);font-weight:600;text-decoration:none;white-space:nowrap}
.fxpick-p a:hover{text-decoration:underline}
.fxpick-card.swap .fxpick-t,.fxpick-card.swap .fxpick-l,.fxpick-card.swap .fxpick-b{animation:fxfade .35s ease}
@media(max-width:860px){.fxpick{grid-template-columns:minmax(0,1fr)}.fxpick-card{order:-1;min-height:250px}}
@media(prefers-reduced-motion:reduce){.fxpick-card.swap *{animation:none!important}}

/* ── tiers you can pick: the picked one turns navy (Agents pricing) ── */
.fxtiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.fxtier{position:relative;isolation:isolate;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;border-radius:var(--r-card);background:var(--paper);
  border:1px solid var(--line);padding:24px 24px 22px;box-shadow:var(--shadow-card);color:var(--ink);
  transition:background .3s,color .3s,border-color .3s,transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s}
.fxtier:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.fxtier:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}
.fxtier-k{align-self:flex-start;padding:4px 11px;border-radius:99px;background:var(--skyfaint);color:var(--steel);font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.fxtier>p.fxtier-price{margin:14px 0 0;font-family:var(--disp);font-size:clamp(2.2rem,4vw,2.9rem);font-weight:600;line-height:1;color:var(--navy);font-variant-numeric:tabular-nums}
.fxtier>p.fxtier-price i{font-style:normal;font-family:var(--body);font-size:.34em;font-weight:500;color:var(--muted);margin-left:4px}
.fxtier h3{font-family:var(--disp);font-size:1.3rem;font-weight:600;margin:10px 0 0;letter-spacing:-.008em}
.fxtier>p{margin:8px 0 0;font-size:15px;line-height:1.5;color:var(--muted)}
.fxtier ul{list-style:none;margin:16px 0 20px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.fxtier li{padding:5px 11px;border-radius:99px;border:1px solid var(--line);background:var(--cream);font-size:13px;line-height:1.3}
.fxtier>p.fxtier-go{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.fxtier .fxtier-go a{display:inline-block;padding:10px 18px;border-radius:10px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font-weight:600;font-size:14.5px;text-decoration:none}
.fxtier.on{background:var(--navy);border-color:var(--navy);color:#fff;box-shadow:var(--shadow-frame)}
.fxtier.on::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 50% at 100% 0%,rgba(226,176,116,.28),transparent 70%)}
.fxtier.on .fxtier-k{background:var(--gold);color:#231303}
.fxtier.on>p.fxtier-price{color:#fff}
.fxtier.on>p{color:#C9DAE6}
.fxtier.on>p.fxtier-price i{color:#C9DAE6}
.fxtier.on li{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.2);color:#DCE8F0}
.fxtier.on>p.fxtier-go{color:#F4E3CB}
.fxtier.on .fxtier-go a{background:var(--bronze);border-color:var(--bronze);color:#231303}
.fxtiers-note{margin:14px 0 0;font-size:13.5px;color:var(--muted);text-align:center;max-width:none}
@media(max-width:900px){.fxtiers{grid-template-columns:minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){.fxtier{transition:none}}

/* ── short points on cream: a rule, a title, one line ── */
.fxpoints{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 28px}
.fxpoints li{border-top:2px solid var(--bronze);padding-top:16px;font-size:15px;line-height:1.55;color:var(--muted)}
.fxpoints b{display:block;font-family:var(--disp);font-size:1.18rem;font-weight:600;line-height:1.25;color:var(--ink);margin-bottom:6px}
@media(max-width:760px){.fxpoints{grid-template-columns:1fr}}
.fxa .eyebrow{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--bronze);margin:0 0 14px}
.fxa .fxacts{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;max-width:none}
.fxa .btn.navy{background:var(--navy);border:1px solid var(--navy);color:#fff}
.fxa .btn.ghost{background:var(--paper);border:1px solid var(--line);color:var(--ink)}
.fxa .fxtabs{margin-top:8px}

/* seats as people: one mark per seat, lit as the slider moves */
.seatcalc .calc-in{display:flex;flex-direction:column}
.seat-people{margin-top:auto;padding:14px 0 14px}
.seat-dots{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:8px;max-width:440px}
.calc-out p{margin-bottom:0}
.seat-dots i{aspect-ratio:1;border-radius:50%;background:var(--line);transition:background .25s,transform .25s}
.seat-dots i.on{background:var(--bronze);transform:scale(1.08)}
.seat-calls{margin:14px 0 0;font-size:14px;color:var(--muted);max-width:none}
.seat-calls b{font-family:var(--disp);font-size:1.5rem;font-weight:600;color:var(--navy);margin-right:4px;font-variant-numeric:tabular-nums}

/* Training: thirty calls as thirty marks */
.drill{border:1px solid rgba(255,255,255,.14);border-radius:var(--r-card);background:rgba(8,40,64,.72);padding:clamp(22px,3vw,34px)}
.drill-n{margin:0 0 20px;display:flex;align-items:baseline;gap:14px}
.drill-n b{font-family:var(--disp);font-size:clamp(3rem,6vw,4.2rem);font-weight:600;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.drill-n span{font-size:14.5px;line-height:1.4;color:#C9DAE6;max-width:20ch}
.drill-calls{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:clamp(6px,1vw,10px)}
.drill-calls i{aspect-ratio:1;border-radius:50%;background:var(--gold)}
@keyframes drillon{from{background:rgba(255,255,255,.12);transform:scale(.7)}to{background:var(--gold);transform:none}}
.fx-on .drill[data-rv]:not(.in) .drill-calls i{background:rgba(255,255,255,.12)}
.fx-on .drill.in .drill-calls i{animation:drillon .45s cubic-bezier(.3,1.4,.5,1) both;animation-delay:calc(var(--i) * 55ms + 200ms)}
@media(prefers-reduced-motion:reduce){.drill-calls i{animation:none!important}}
.hob .fxbrowser{margin:0}
#course .fxtabs{margin-top:8px}

/* ── the plan: a price on navy beside what it includes, on two tabs ── */
.fxplan{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:16px;align-items:stretch}
.fxplan-price{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-card);background:var(--navy);color:#fff;
  padding:clamp(24px,3vw,34px);display:flex;flex-direction:column;box-shadow:var(--shadow-frame)}
.fxplan-price::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 50% at 100% 0%,rgba(226,176,116,.28),transparent 70%)}
.fxplan-price .plan-name{font-family:var(--body);font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.fxplan-price .plan-price{margin-top:12px}
.fxplan-price .plan-price b{color:#fff;font-size:clamp(3rem,6vw,4rem);font-variant-numeric:tabular-nums}
.fxplan-price .plan-price span{color:#B9CCD9}
.fxplan-price .plan-plus{color:#C9DAE6}
.fxplan-price .plan-trial{background:rgba(226,176,116,.18);color:#F4E3CB;border:0}
.fxplan-price .btn{margin-top:auto;background:var(--bronze);border-color:var(--bronze);color:#231303;text-align:center}
.fxplan-price .plan-trial+.btn{margin-top:28px}
.fxplan-price .calc-note{text-align:center}
.fxplan-inc{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(18px,2.4vw,26px);box-shadow:var(--shadow-card)}
.fxseg{display:inline-flex;gap:4px;padding:4px;border-radius:99px;background:var(--cream);border:1px solid var(--line);max-width:100%}
.fxseg button{appearance:none;font:inherit;font-size:14px;font-weight:600;cursor:pointer;color:var(--muted);background:none;border:0;border-radius:99px;
  padding:8px 16px;display:inline-flex;align-items:center;gap:8px;transition:background .2s,color .2s;white-space:nowrap}
.fxseg button i{font-style:normal;font-size:11.5px;font-weight:700;padding:1px 7px;border-radius:99px;background:var(--line);color:var(--ink);font-variant-numeric:tabular-nums}
.fxseg button:hover{color:var(--ink)}
.fxseg button[aria-selected="true"]{background:var(--navy);color:#fff}
.fxseg button[aria-selected="true"] i{background:var(--gold);color:#231303}
.fxseg button:focus-visible{outline:2px solid var(--bronze);outline-offset:2px}
.fxplan-inc ul{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:11px 24px}
.fxplan-inc li{position:relative;padding-left:28px;font-size:15px;line-height:1.4;color:var(--ink)}
.fxplan-inc li::before{content:"";position:absolute;left:0;top:1px;width:18px;height:18px;border-radius:50%;background:var(--ok)}
.fxplan-inc li::after{content:"";position:absolute;left:5px;top:6px;width:7px;height:4px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}
.fxplan-inc .plan-h{margin-top:20px}
.fxplan-inc.live .plan-h{display:none}
.fxplan-inc.live .fxseg-panel:not([hidden]) li{animation:fxfade .35s ease both;animation-delay:calc(var(--i,0) * 28ms)}
.fxplan-inc:not(.live) .fxseg{display:none}
@media(max-width:860px){.fxplan{grid-template-columns:minmax(0,1fr)}}
@media(max-width:560px){.fxplan-inc ul{grid-template-columns:1fr}.fxseg button{padding:8px 11px;font-size:13px}}
@media(prefers-reduced-motion:reduce){.fxplan-inc.live .fxseg-panel li{animation:none!important}}

/* CRM pricing: onboarding beside usage, at the full measure */
.fxgapt{margin-top:clamp(46px,6vw,70px)!important}
.fxpair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px 28px;align-items:start;margin-top:clamp(40px,5vw,60px)}
.fxpair .onb,.fxpair .usage{max-width:none;margin:0}
.fxpair h3{font-size:1.35rem;margin:0 0 14px}
.fxpair .onb-grid>div{height:100%}
@media(max-width:900px){.fxpair{grid-template-columns:minmax(0,1fr)}}
section#pricing.first{margin-top:clamp(40px,5vw,60px);padding-top:0}

/* a section heading set as h2 inside a feature row */
.feat h2{font-size:clamp(1.5rem,3vw,2rem);margin:0 0 6px}
#rules .fxtabs{margin-top:8px}
#rules .fine{margin-top:16px}

/* ── questions: one card, one answer open ── */
.faq.live{max-width:none!important;display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(18px,4vw,56px);align-items:start;
  margin-top:clamp(46px,6vw,70px)!important}
.faq.live>h3{font-size:clamp(1.5rem,3vw,2rem)!important;margin:0!important;line-height:1.1;letter-spacing:-.014em}
.faq.live>h3::before{content:"Good to know";display:block;font-family:var(--body);font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bronze);margin-bottom:14px}
.faq-list{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-card);overflow:hidden}
.faq .faq-list details{background:none;border:0;border-radius:0;margin:0;border-top:1px solid var(--line)}
.faq .faq-list details:first-child{border-top:0}
.faq .faq-list summary{padding:18px 52px 18px 22px;font-size:16px;transition:background .2s}
.faq .faq-list summary:hover{background:var(--cream)}
.faq .faq-list summary:focus-visible{outline:2px solid var(--navy);outline-offset:-2px}
.faq .faq-list summary::after{right:22px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;border:1.5px solid var(--bronze);
  display:grid;place-items:center;font-size:17px;line-height:1;font-weight:400}
.faq .faq-list details[open] summary::after{background:var(--bronze);color:#231303}
.faq .faq-list details[open]{background:#FFFDF8}
.faq .faq-list details p{padding:0 52px 20px 22px;font-size:15.5px;max-width:70ch}
.faq .faq-list details[open] p{animation:fxfade .3s ease}
@media(max-width:820px){.faq.live{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.faq .faq-list details[open] p{animation:none}}

/* short points under a stage, four across */
.of-points.four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:980px){.of-points.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.of-points.four{grid-template-columns:1fr}}

/* ══ HOME: the company page (enhance_home.py) ═════════════════════════ */
/* the three products as one system, under the hero words */
.hsys{position:relative;margin-top:clamp(30px,4vw,48px);padding-bottom:clamp(40px,5.5vw,70px)}
.hsys>a{display:block;text-decoration:none;color:var(--ink)!important;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.hsys>a:hover{text-decoration:none;transform:translateY(-4px)}
.hsys>a:focus-visible{outline:2px solid var(--gold);outline-offset:6px;border-radius:16px}
.hsys .fxbrowser{display:block;margin:0;max-width:none}
.hsys-crm{position:relative;width:70%;margin:0 auto}
.hsys-people,.hsys-train{position:absolute;bottom:0;z-index:2}
.hsys-people{left:0;width:24.5%}
.hsys-train{right:0;width:31%}
.hsys-in{position:relative;display:block}
.hsys-tag{position:absolute;top:-15px;left:-10px;z-index:3;display:inline-flex;align-items:center;gap:7px;padding:4px 13px;border-radius:99px;
  background:var(--gold);color:#231303;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;box-shadow:0 6px 16px rgba(0,0,0,.3)}
.hsys-tag i{font-style:normal;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#231303;color:var(--gold);font-size:10.5px;letter-spacing:0}
.hsys-card{display:block;background:var(--paper);border-radius:var(--r-card);padding:26px 18px 18px;
  box-shadow:0 30px 80px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.10)}
.hsys-card img{width:64px;height:64px;display:block}
.hsys-card b{display:block;font-family:var(--disp);font-size:1.12rem;font-weight:600;line-height:1.2;margin-top:12px;color:var(--ink)}
.hsys-card small{display:block;font-size:12.5px;color:var(--muted);margin-top:3px}
.hsys-card ul{list-style:none;margin:12px 0 0;padding:12px 0 0;border-top:1px solid var(--line);display:grid;gap:7px}
.hsys-card li{position:relative;padding-left:22px;font-size:13px;line-height:1.35;color:var(--ink)}
.hsys-card li::before{content:"";position:absolute;left:0;top:1px;width:15px;height:15px;border-radius:50%;background:var(--ok)}
.hsys-card li::after{content:"";position:absolute;left:4px;top:5px;width:6px;height:3px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}
@keyframes hsysfloat{from{transform:translateY(0)}to{transform:translateY(-9px)}}
.fx-on .hsys-people .hsys-in{animation:hsysfloat 5.2s ease-in-out infinite alternate}
.fx-on .hsys-train .hsys-in{animation:hsysfloat 6.4s ease-in-out -2s infinite alternate}
.fx-on .hsys.fxpause .hsys-in{animation-play-state:paused}
@media(max-width:760px){
  .hsys{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:28px 14px;padding-bottom:0;align-items:start;margin-inline:6px}
  .hsys-card ul{display:none}
  .hsys-train .fxbrowser-bar>span{display:none}
  .hsys-crm{grid-column:1/-1;width:100%}
  .hsys-people,.hsys-train{position:relative;width:auto}
  .hsys-card{padding:22px 14px 14px;height:100%}
  .hsys-card img{width:48px;height:48px}
  .hsys-card li{font-size:12.5px}
  .hsys-people .hsys-in{height:100%}
  .fx-on .hsys-in{animation:none!important}
}
@media(prefers-reduced-motion:reduce){.hsys-in{animation:none!important}.hsys>a{transition:none}}

/* one product, one section: words on one side, the visual on the other */
.hprod{display:grid;grid-template-columns:minmax(0,.76fr) minmax(0,1.24fr);gap:clamp(28px,4.5vw,64px);align-items:center;
  margin-top:clamp(60px,7.5vw,96px)}
.hprod.flip{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.hprod.flip .hprod-say{order:2}
.hprod-lock{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:700;font-size:17px;letter-spacing:-.01em;margin:0 0 18px;color:var(--ink)}
.hprod-lock img{width:44px;height:44px;flex:0 0 auto}
.hprod-lock em{font-style:normal;color:var(--bronze)}
.hprod h2{font-size:clamp(1.7rem,3.3vw,2.35rem);line-height:1.1}
.hprod .sub{margin:12px 0 0;font-size:1.06rem;max-width:44ch}
.hprod-nums{list-style:none;display:flex;gap:clamp(18px,3vw,36px);margin:24px 0 0;padding:20px 0 0;border-top:1px solid var(--line)}
.hprod-nums b{display:block;font-family:var(--disp);font-size:clamp(1.5rem,2.6vw,1.95rem);font-weight:600;color:var(--navy);line-height:1.05;font-variant-numeric:tabular-nums}
.hprod-nums span{display:block;font-size:12.5px;color:var(--muted);margin-top:5px;line-height:1.35}
.hprod-acts{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 0}
@media(max-width:860px){.hprod,.hprod.flip{grid-template-columns:minmax(0,1fr)}.hprod.flip .hprod-say{order:0}}

/* a US hire against a placement, as two bars */
.hbars{background:var(--navy);color:#fff;border-radius:var(--r-card);padding:clamp(22px,3vw,34px);position:relative;overflow:hidden;isolation:isolate;box-shadow:var(--shadow-frame)}
.hbars::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 50% at 100% 0%,rgba(226,176,116,.26),transparent 70%)}
.hbars-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.hbars-tabs button{appearance:none;font:inherit;font-size:13px;font-weight:600;cursor:pointer;color:#DCE8F0;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);border-radius:99px;padding:7px 14px;transition:background .2s,border-color .2s,color .2s}
.hbars-tabs button:hover{background:rgba(255,255,255,.12)}
.hbars-tabs button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:#231303}
.hbars-tabs button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.hbar{margin-top:20px}
.hbar>span{display:block;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#B9CCD9}
.hbar.us>span{color:var(--gold)}
.hbar-row{display:grid;grid-template-columns:minmax(0,1fr) 8.6em;gap:14px;align-items:center;margin-top:8px}
.hbar-row i{display:block;height:40px;border-radius:9px;width:var(--w,100%);min-width:8px;transition:width .8s cubic-bezier(.2,.7,.2,1)}
.hbar.them i{background:linear-gradient(90deg,#3E6E90,#74A4C1)}
.hbar.us i{background:linear-gradient(90deg,#B9793F,#E2B074)}
.hbar-row b{font-family:var(--disp);font-size:clamp(1.45rem,2.6vw,1.95rem);font-weight:600;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.hbar-row b small{font-family:var(--body);font-size:.4em;font-weight:600;color:#B9CCD9;margin-left:3px}
.fx-on .hbars[data-rv]:not(.in) .hbar-row i{width:8px}
.hbars-diff{margin:22px 0 0;padding:12px 14px;border-radius:10px;background:rgba(226,176,116,.16);color:#F4E3CB;font-size:14.5px}
.hbars-diff b{font-family:var(--disp);font-size:1.25rem;color:#fff;font-variant-numeric:tabular-nums}
.hbars-src{margin:12px 0 0;font-size:12px;line-height:1.5;color:#9FB6C6}
.hbars-src a{color:var(--gold)}
@media(max-width:480px){.hbar-row{grid-template-columns:minmax(0,1fr) 7.2em;gap:10px}.hbar-row i{height:32px}}
@media(prefers-reduced-motion:reduce){.hbar-row i{transition:none}}

/* the office, as a navy band */
.hob{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(22px,4vw,56px);align-items:center}
.hob h2{font-size:clamp(1.7rem,3.3vw,2.35rem)}
.hob .sub{margin:12px 0 0;font-size:1.06rem}
.hob .btn{margin-top:24px}
.hob-pics{position:relative;aspect-ratio:16/10.4}
.hob-pics img{position:absolute;width:68%;height:auto;border-radius:12px;box-shadow:0 20px 50px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.14);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.hob-pics img:first-child{left:0;top:0}
.hob-pics img:last-child{right:0;bottom:0}
.hob:hover .hob-pics img:first-child{transform:translate(-6px,-6px)}
.hob:hover .hob-pics img:last-child{transform:translate(6px,6px)}
@media(max-width:820px){.hob{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.hob-pics img{transition:none;transform:none!important}}

/* the app section: same cards, level with the rest */
#app .cards{align-items:stretch}
#app .card h3{font-size:1.12rem}

/* ── skill-based routing: one call and the people it rings (routing.py) ──
   The picture is complete with no script and no motion: the rows that ring
   carry the bronze ring as their resting state. Motion only moves that ring
   (.rt-seq, one row at a time) or pulses it (.rt-all); it rests off screen,
   stops for good on a touch (.held) and is off under reduced motion. */
.rt-feat{align-items:center}
.rt-feat h2{margin:0 0 10px}
.rt-feat .sub{margin-bottom:4px}
.rt-acts{margin:24px 0 0}
.rt{margin:0;min-width:0;background:var(--paper);border:1px solid var(--line);border-radius:16px;
  padding:clamp(14px,2.4vw,22px);box-shadow:0 1px 2px rgba(0,32,60,.06),0 8px 24px rgba(0,32,60,.06)}
.rt-call{display:flex;align-items:center;gap:12px;background:var(--navy);color:#fff;border-radius:12px;padding:12px 14px}
.rt-ico{flex:none;width:38px;height:38px;border-radius:50%;background:rgba(226,176,116,.18);display:grid;place-items:center}
.rt-ico svg{width:20px;height:20px;fill:none;stroke:#E2B074;stroke-width:1.7;stroke-linejoin:round}
.rt-callsay b{display:block;font-size:15px;line-height:1.3}
.rt-callsay small{display:block;font-size:12.5px;color:#C9DAE6}
.rt-list{list-style:none;margin:0;padding:16px 0 0;display:grid;gap:9px;position:relative}
.rt-list::before{content:"";position:absolute;left:32px;top:0;width:2px;height:16px;background:var(--bronze)}
.feat .rt-row,.rt-row{position:relative;display:flex;align-items:center;gap:11px;margin:0;padding:10px 12px;
  border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);font-size:14.5px}
.feat .rt-row::before{content:none}
.rt-row::after{content:"";position:absolute;inset:-1px;border:2px solid var(--bronze);border-radius:12px;
  opacity:0;pointer-events:none}
.rt-row.on::after,.rt-row.t1::after{opacity:1}
.rt-n{flex:none;width:22px;height:22px;border-radius:50%;background:var(--navy);color:#fff;
  font-style:normal;font-weight:700;font-size:12px;line-height:22px;text-align:center}
.rt-n.none{visibility:hidden}
.rt-av{flex:none;width:36px;height:36px;border-radius:50%;background:#EAF1F7;border:1px solid #DCE6EE;
  color:var(--navy);font-weight:700;font-size:12.5px;display:grid;place-items:center}
.rt-who{flex:1 1 auto;min-width:0}
.rt-who b{display:block;font-size:14.5px;line-height:1.3;color:var(--ink)}
.rt-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.rt-tags em{font-style:normal;font-size:11.5px;font-weight:600;line-height:1;padding:4px 8px;border-radius:99px;
  background:var(--cream);border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.rt-st{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#7A4B1F;white-space:nowrap}
.rt-st::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--bronze)}
.rt-row.skip,.rt-row.off{background:transparent}
.rt-row.skip{border-style:dashed}
.rt-row.skip .rt-st,.rt-row.off .rt-st{color:var(--muted)}
.rt-row.skip .rt-st::before,.rt-row.off .rt-st::before{background:#B8C2C9}
.rt-row.skip .rt-av,.rt-row.off .rt-av{background:transparent;color:var(--muted)}
.rt-row.skip .rt-who b,.rt-row.off .rt-who b{color:var(--muted)}
.rt figcaption{margin:14px 2px 0;font-size:13.5px;line-height:1.5;color:var(--muted)}
@keyframes rt-turn{0%,29%{opacity:1}34%,95%{opacity:0}100%{opacity:1}}
@keyframes rt-pulse{0%{box-shadow:0 0 0 0 rgba(185,121,63,.36)}70%,100%{box-shadow:0 0 0 8px rgba(185,121,63,0)}}
.rt-seq .rt-row.t1::after,.rt-seq .rt-row.t2::after,.rt-seq .rt-row.t3::after{animation:rt-turn 9s linear infinite}
.rt-seq .rt-row.t2::after{animation-delay:-6s}
.rt-seq .rt-row.t3::after{animation-delay:-3s}
.rt-all .rt-row.on::after{animation:rt-pulse 1.8s ease-out infinite}
.rt-all .rt-row.on+.rt-row.on::after{animation-delay:.25s}
.rt.fxpause .rt-row::after{animation-play-state:paused}
.rt.held .rt-row::after{animation:none}
@media(prefers-reduced-motion:reduce){.rt .rt-row::after{animation:none!important}}
@media(max-width:480px){
  .feat .rt-row,.rt-row{flex-wrap:wrap;row-gap:6px}
  .rt-st{flex:1 0 100%;padding-left:47px}
  .rt-seq .rt-st{padding-left:80px}
}
/* the one line that points at it from the home site's software summary */
.hprod .rt-link{margin:12px 0 0;font-size:14px;font-weight:600}
.hprod .rt-link a{color:var(--bronze);text-decoration:none}
.hprod .rt-link a:hover{text-decoration:underline}
.hprod .rt-link a::after{content:" \2192"}