/* Nova visuals
   Real Polaris screenshot showcase and the new artwork placements.
   Loaded after meridian.css on the pages that use it. */

/* ===== Product showcase ================================================ */
.showcase {
  position: relative; overflow: hidden; color: #fff;
  padding: clamp(4rem, 8vw, 6.5rem) 0 clamp(3.2rem, 6vw, 5rem);
  background:
    radial-gradient(900px 520px at 12% -6%, rgba(0,184,230,.20), transparent 62%),
    radial-gradient(820px 520px at 92% 16%, rgba(139,92,246,.22), transparent 62%),
    linear-gradient(180deg, #0B1630 0%, #0F2041 50%, #0C1834 100%);
}
.sc-head { max-width: 760px; margin: 0 auto clamp(1.6rem, 3vw, 2.2rem); text-align: center; }
.sc-head h2 { color: #fff; margin: 1rem 0 .9rem; text-wrap: balance; }
.sc-head p { color: rgba(226,236,255,.74); font-size: 1.08rem; max-width: 620px; margin: 0 auto; }

.sc-tabs {
  display: flex; gap: .3rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  width: max-content; max-width: 100%; margin: 0 auto; padding: .32rem;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 999px;
}
.sc-tabs::-webkit-scrollbar { display: none; }
.sc-tab {
  position: relative; flex: none; overflow: hidden; cursor: pointer;
  font: inherit; font-size: .88rem; font-weight: 600; line-height: 1;
  color: rgba(226,236,255,.7); background: transparent; border: 0; border-radius: 999px;
  padding: .72rem 1.05rem; transition: color .2s ease, background-color .25s ease;
}
.sc-tab:hover { color: #fff; }
.sc-tab[aria-selected="true"] { color: #0F2041; background: #fff; }
.sc-tab::after {
  content: ""; position: absolute; left: 18%; right: 18%; bottom: 5px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #00B8E6, #5E6EFF 55%, #8B5CF6); transform: scaleX(0); transform-origin: left center; opacity: 0;
}
.sc-tab.is-running::after { opacity: 1; animation: scFill var(--sc-interval, 7000ms) linear forwards; }
@keyframes scFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.sc-stage { position: relative; margin-top: clamp(1.2rem, 3vw, 1.9rem); }
.sc-viewport {
  position: relative; overflow: hidden; touch-action: pan-y;
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 14px 0 6px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.sc-track { display: flex; gap: clamp(18px, 3vw, 44px); transition: transform .8s var(--ease-apple); will-change: transform; }
.sc-slide {
  flex: 0 0 min(1080px, 84vw); margin: 0; cursor: pointer;
  transform: scale(.92); opacity: .3; transition: transform .8s var(--ease-apple), opacity .8s var(--ease-apple);
}
.sc-slide.is-active { transform: none; opacity: 1; cursor: default; }
.sc-window {
  position: relative; overflow: hidden; background: #fff; border-radius: clamp(10px, 1.5vw, 18px);
  box-shadow: 0 46px 100px -24px rgba(2,6,20,.75), 0 16px 40px rgba(2,6,20,.35), 0 0 0 1px rgba(255,255,255,.12);
}
.sc-bar {
  display: flex; align-items: center; gap: clamp(8px, 1.2vw, 14px);
  height: clamp(28px, 3.4vw, 44px); padding: 0 clamp(10px, 1.4vw, 16px);
  background: #F1F4F9; border-bottom: 1px solid #E3E8F0;
}
.sc-dots { display: inline-flex; gap: clamp(5px, .6vw, 8px); }
.sc-dots i { display: block; width: clamp(8px, .9vw, 12px); height: clamp(8px, .9vw, 12px); border-radius: 50%; background: #FF5F57; }
.sc-dots i:nth-child(2) { background: #FEBC2E; }
.sc-dots i:nth-child(3) { background: #28C840; }
.sc-title {
  display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap;
  font-size: clamp(.62rem, 1vw, .84rem); font-weight: 600; color: #0F2041; line-height: 1;
  background: #fff; border: 1px solid #E3E8F0; border-radius: 999px; padding: .32rem .8rem .32rem .42rem;
}
.sc-title img { width: clamp(15px, 1.5vw, 20px); height: auto; margin: -2px 0; }
.sc-title em { font-style: normal; font-weight: 500; color: #6B7A93; }
.sc-title em::before { content: "\00B7"; margin: 0 .38rem 0 .05rem; color: #A3AEC2; }
.sc-screen { position: relative; aspect-ratio: 1.84; background: #F5F7FA; }
.sc-screen > img:first-child {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top;
  -webkit-user-select: none; user-select: none; -webkit-user-drag: none;
}
.sc-float {
  position: absolute; height: auto; max-width: none; pointer-events: none;
  opacity: 0; transform: translateY(18px) scale(.985);
  transition: opacity .55s var(--ease-apple), transform .8s var(--ease-apple);
  filter: drop-shadow(0 22px 34px rgba(15,32,65,.26)) drop-shadow(0 4px 10px rgba(15,32,65,.12));
}
.sc-slide.is-active .sc-float { opacity: 1; transform: none; transition-delay: .55s; }
.sc-float--chat { width: 23.81%; right: 1.59%; bottom: 10.65%; }
.sc-float--ai { width: 34.53%; left: 32.93%; bottom: 7.9%; }
.sc-caption {
  max-width: 660px; min-height: 3.3em; margin: clamp(1rem, 2.4vw, 1.5rem) auto 0; text-align: center;
  color: rgba(226,236,255,.74); font-size: 1rem; line-height: 1.6; opacity: 0; transition: opacity .45s ease;
}
.sc-slide.is-active .sc-caption { opacity: 1; transition-delay: .15s; }
.sc-caption strong { color: #fff; font-weight: 600; }

.sc-arrow {
  position: absolute; z-index: 3; top: calc(50% - 2.4rem); width: 52px; height: 52px; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; background: #fff; color: #0F2041;
  box-shadow: 0 12px 30px rgba(2,6,20,.38); transition: transform .2s ease, box-shadow .2s ease;
}
.sc-arrow:hover { transform: scale(1.06); box-shadow: 0 16px 38px rgba(2,6,20,.48); }
.sc-arrow svg { width: 22px; height: 22px; }
.sc-prev { left: max(4px, calc(50% - min(540px, 42vw) - 26px)); }
.sc-next { right: max(4px, calc(50% - min(540px, 42vw) - 26px)); }

.sc-foot { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .6rem 1rem; margin-top: clamp(1rem, 2.6vw, 1.6rem); }
.sc-ask {
  display: inline-flex; padding: 0; border: 0; border-radius: 999px; background: none; cursor: pointer;
  filter: drop-shadow(0 12px 26px rgba(2,6,20,.5)); transition: transform .25s var(--ease-apple), filter .3s ease;
}
.sc-ask img { display: block; width: clamp(230px, 24vw, 290px); height: auto; }
.sc-ask:hover { transform: translateY(-2px); }
.sc-ask.is-active { filter: drop-shadow(0 0 20px rgba(0,212,255,.5)) drop-shadow(0 12px 26px rgba(2,6,20,.45)); }
.sc-foot-note { color: rgba(226,236,255,.62); font-size: .92rem; }

.sc-tab:focus-visible, .sc-arrow:focus-visible, .sc-ask:focus-visible { outline: 2px solid #00D4FF; outline-offset: 3px; }

@media (max-width: 720px) {
  .sc-arrow { display: none; }
  .sc-slide { flex-basis: 88vw; }
  .sc-caption { font-size: .92rem; padding: 0 .5rem; }
  .sc-tab { font-size: .8rem; padding: .62rem .85rem; }
  .sc-tabs { justify-content: flex-start; }
}

/* ===== Homepage hero portrait ========================================== */
.hero-stage { position: relative; width: 100%; max-width: 540px; margin: 0 auto; aspect-ratio: 540 / 600; }
.hero-portrait {
  position: absolute; inset: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 84%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 84%, transparent 100%);
}
.hero-orb {
  position: absolute; width: 80%; aspect-ratio: 1; left: 58%; bottom: -12%; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(closest-side at 32% 26%, rgba(255,255,255,.3), transparent 72%), linear-gradient(135deg, #00B8E6 0%, #5E6EFF 55%, #8B5CF6 100%);
}
.hero-person { position: absolute; bottom: 0; left: 58%; height: 97%; width: auto; max-width: none; transform: translateX(-50%); }
.hero-stage .mockup { position: absolute; z-index: 3; left: 0; bottom: 6%; width: 64%; max-width: 340px; margin: 0; }
.hero-stage .mockup .bubble { font-size: .84rem; }
.hero-chip { position: absolute; z-index: 2; height: auto; filter: drop-shadow(0 14px 20px rgba(15,32,65,.22)); animation: floaty 6.5s ease-in-out infinite; }
.hero-chip--chat { width: clamp(52px, 13%, 76px); left: 5%; top: 21%; animation-delay: -1.2s; }
.hero-chip--form { width: clamp(56px, 15%, 84px); right: -1%; top: 38%; animation-delay: -3.1s; }
.hero-chip--maple { width: clamp(46px, 11%, 64px); right: 3%; top: 8%; animation-delay: -4.6s; }
@media (max-width: 880px) {
  .hero-grid .hero-visual--portrait { order: 0; }
  .hero-stage { max-width: 440px; }
  .hero-stage .mockup { width: 64%; bottom: 3%; border-radius: 16px; }
  .hero-stage .mockup-bar { padding: .5rem .7rem; }
  .hero-stage .mockup-title { font-size: .68rem; }
  .hero-stage .mockup-body { padding: .7rem; gap: .45rem; }
  .hero-stage .mockup .bubble { font-size: .72rem; padding: .5rem .65rem; }
  .hero-stage .typing { display: none; }
}
@media (max-width: 560px) {
  .hero-stage { aspect-ratio: 540 / 720; }
  .hero-stage .mockup { width: 68%; }
  .hero-stage .mockup .bubble { font-size: .7rem; }
  .hero-chip--chat { top: 30%; }
  .hero-chip--form { top: 44%; }
}

/* ===== AutoForm Filler artwork ========================================= */
.af-media { position: relative; }
.split-media .af-art {
  position: absolute; z-index: 0; width: clamp(140px, 44%, 250px); height: auto; right: -8%; top: -30%;
  border-radius: 0; box-shadow: none; pointer-events: none;
  filter: drop-shadow(0 22px 30px rgba(15,32,65,.18)); animation: floaty 8s ease-in-out infinite;
}
.af-media > .card { position: relative; z-index: 1; }
@media (max-width: 860px) { .split-media .af-art { width: 34%; right: -2%; top: -20%; } }

/* ===== 3D icons ======================================================== */
.section-icon-3d { display: block; width: clamp(72px, 9vw, 96px); height: auto; margin: 0 auto 1rem; filter: drop-shadow(0 16px 24px rgba(94,110,255,.26)); animation: floaty 7s ease-in-out infinite; }
.icon-3d { display: block; width: 60px; height: 60px; margin: -.35rem 0 .85rem -.4rem; }
.icon-3d img { display: block; width: 100%; height: 100%; filter: drop-shadow(0 10px 14px rgba(15,32,65,.16)); transition: transform .4s var(--ease-apple); }
.card:hover .icon-3d img { transform: translateY(-3px) rotate(-5deg) scale(1.05); }
.icon-cloud { display: flex; justify-content: center; align-items: flex-end; flex-wrap: wrap; gap: clamp(.5rem, 2vw, 1.3rem); margin: clamp(2rem, 4vw, 2.8rem) auto 0; }
.icon-cloud img { width: clamp(50px, 7vw, 82px); height: auto; filter: drop-shadow(0 14px 20px rgba(15,32,65,.16)); animation: floaty 7s ease-in-out infinite; }
.icon-cloud img:nth-child(2n) { margin-bottom: 20px; animation-delay: -2.3s; }
.icon-cloud img:nth-child(3n) { animation-delay: -4.1s; }

/* ===== Final call to action with people ================================ */
.cta-band--art { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: end; gap: 1.5rem; text-align: left; padding-bottom: 0; }
.cta-band--art .cta-copy { align-self: center; padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.cta-band--art .cta-copy p { margin: 0 0 1.8rem; }
.cta-band--art .cta-copy .cta-mail { margin: 1rem 0 0; font-size: .85rem; }
.cta-band--art .hero-ctas { justify-content: flex-start; }
.cta-band .cta-art { display: block; width: 100%; max-width: 540px; height: auto; margin: 1rem 0 0 auto; }
@media (max-width: 860px) {
  .cta-band--art { grid-template-columns: minmax(0, 1fr); text-align: center; gap: 0; }
  .cta-band--art .cta-copy { padding-bottom: 1rem; }
  .cta-band--art .cta-copy p { margin: 0 auto 1.8rem; }
  .cta-band--art .hero-ctas { justify-content: center; }
  .cta-band .cta-art { margin: .5rem auto 0; max-width: 440px; }
}

/* ===== Signet band ===================================================== */
.signet-band { background: linear-gradient(135deg, #0b1226, #16213e); color: #fff; padding: 58px 22px 0; overflow: hidden; }
.signet-inner { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; align-items: center; }
.signet-copy { padding-bottom: 58px; }
.signet-logo { height: 52px; width: 52px; margin-bottom: 16px; background: #fff; border-radius: 13px; padding: 6px; box-sizing: border-box; object-fit: contain; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.signet-band h2 { color: #fff; font-size: clamp(22px, 3vw, 30px); font-weight: 800; letter-spacing: -.02em; margin: 0 0 10px; }
.signet-band p { color: #cdd8ec; font-size: 15px; line-height: 1.6; max-width: 520px; margin: 0 0 22px; }
.signet-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.signet-btn { background: transparent; color: #dcecff; border: 1px solid rgba(255,255,255,.28); padding: 12px 22px; border-radius: 12px; font-weight: 700; text-decoration: none; }
.signet-btn--primary { background: #00b4d8; color: #04222c; border-color: #00b4d8; }
.signet-art { display: block; align-self: end; width: 100%; max-width: 500px; height: auto; margin: 0 auto; filter: drop-shadow(0 30px 40px rgba(0,0,0,.35)); }
@media (max-width: 860px) {
  .signet-inner { grid-template-columns: minmax(0, 1fr); text-align: center; gap: 0; }
  .signet-copy { padding-bottom: 20px; }
  .signet-logo { margin-left: auto; margin-right: auto; }
  .signet-band p { margin: 0 auto 22px; }
  .signet-ctas { justify-content: center; }
  .signet-art { max-width: 380px; }
}

/* ===== Page hero artwork =============================================== */
.page-art { max-width: 780px; margin: clamp(2rem, 4vw, 3rem) auto 0; }
.page-art img { display: block; width: 100%; height: auto; }
.page-art--float img { filter: drop-shadow(0 30px 40px rgba(15,32,65,.16)); animation: floaty 8s ease-in-out infinite; }
.page-art--desk { max-width: 820px; }
.page-art--desk img { -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, #000 80%, transparent 100%); }
.page-art--globe { max-width: 700px; }
.page-art--shield { max-width: 640px; }
.page-art--laptop { max-width: 680px; }

/* ===== Aurora hero ===================================================== */
.aurora-stage { position: relative; display: flex; justify-content: flex-end; align-items: center; max-width: 560px; margin: 0 auto; }
.aurora-stage .phone { position: relative; z-index: 2; margin: 0; }
.aurora-orb { position: absolute; z-index: 0; width: 76%; aspect-ratio: 1; left: -6%; top: 50%; transform: translateY(-50%); border-radius: 50%; background: radial-gradient(closest-side at 32% 26%, rgba(255,255,255,.28), transparent 72%), linear-gradient(135deg, #00B8E6 0%, #5E6EFF 55%, #8B5CF6 100%); }
.aurora-person {
  position: absolute; z-index: 1; left: -8%; bottom: 0; height: 96%; width: auto; max-width: none;
  -webkit-mask-image: linear-gradient(180deg, #000 84%, transparent 100%); mask-image: linear-gradient(180deg, #000 84%, transparent 100%);
}
@media (max-width: 640px) {
  .aurora-orb, .aurora-person { display: none; }
  .aurora-stage { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .sc-track, .sc-slide, .sc-float, .sc-caption { transition: none; }
  .sc-tab.is-running::after { animation: none; opacity: 0; }
  .hero-chip, .split-media .af-art, .section-icon-3d, .icon-cloud img, .page-art--float img { animation: none; }
}
@media (max-width: 860px) { .cta-band--art .cta-copy .cta-mail { margin: 1rem auto 0; } }

/* ===== Real phone frame (Aurora screenshots) =========================== */
.device {
  position: relative; width: 290px; max-width: 100%; padding: 9px; border-radius: 46px;
  background: linear-gradient(145deg, #22324F 0%, #0B1220 60%, #111B2E 100%);
  box-shadow: 0 44px 80px -24px rgba(15,32,65,.5), 0 14px 30px rgba(15,32,65,.2), inset 0 0 0 1.5px rgba(255,255,255,.1);
}
.device::after {
  content: ""; position: absolute; z-index: 3; top: 21px; left: 50%; width: 11px; height: 11px; transform: translateX(-50%);
  border-radius: 50%; background: #05080F; box-shadow: 0 0 0 2px rgba(255,255,255,.06);
}
.device-screen { position: relative; overflow: hidden; border-radius: 37px; aspect-ratio: 720 / 1560; background: #F7F9FC; }
.device-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s var(--ease-soft); }
.device-screen img.is-on, .device-screen img:only-child { opacity: 1; }
.aurora-stage .device { position: relative; z-index: 2; margin: 0; }
.split .hero-visual .device { margin: 0 auto; }

/* ===== Aurora screens gallery ========================================= */
.ag {
  position: relative; overflow: hidden; color: #fff; padding: clamp(4rem, 8vw, 6rem) 0 clamp(3rem, 6vw, 4.5rem);
  background:
    radial-gradient(760px 460px at 10% 0%, rgba(0,184,230,.18), transparent 62%),
    radial-gradient(760px 480px at 92% 30%, rgba(139,92,246,.22), transparent 62%),
    linear-gradient(180deg, #0B1630 0%, #0F2041 55%, #0C1834 100%);
}
.ag-head { display: flex; align-items: center; gap: clamp(1rem, 3vw, 1.8rem); max-width: 880px; margin: 0 auto clamp(1.8rem, 4vw, 2.6rem); }
.ag-icon { flex: none; width: clamp(80px, 10vw, 112px); height: auto; filter: drop-shadow(0 18px 30px rgba(0,0,0,.4)); }
.ag-copy h2 { color: #fff; margin: .75rem 0 .55rem; text-wrap: balance; }
.ag-copy p { color: rgba(226,236,255,.74); font-size: 1.05rem; max-width: 600px; }
.ag-row {
  display: flex; gap: clamp(16px, 2.4vw, 30px); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 12px max(24px, calc((100vw - 1200px) / 2 + 24px)) 18px; scrollbar-width: none; outline: none;
}
.ag-row::-webkit-scrollbar { display: none; }
.ag-row:focus-visible { box-shadow: inset 0 0 0 2px #00D4FF; }
.ag-item { flex: 0 0 auto; margin: 0; text-align: center; scroll-snap-align: center; }
.ag-item figcaption { margin-top: .95rem; font-size: .93rem; font-weight: 600; color: #fff; }
.ag-item figcaption span { display: block; margin-top: .15rem; font-size: .82rem; font-weight: 500; color: rgba(226,236,255,.6); }
.device--sm { width: clamp(188px, 17vw, 224px); padding: 7px; border-radius: 34px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.6), inset 0 0 0 1.5px rgba(255,255,255,.12); }
.device--sm::after { width: 8px; height: 8px; top: 15px; }
.device--sm .device-screen { border-radius: 27px; }
.ag-controls { display: flex; justify-content: center; gap: .6rem; margin-top: .6rem; }
.ag-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.08); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background-color .2s ease, transform .2s ease; }
.ag-btn:hover { background: rgba(255,255,255,.16); transform: translateY(-1px); }
.ag-btn:focus-visible { outline: 2px solid #00D4FF; outline-offset: 3px; }
.ag-btn svg { width: 20px; height: 20px; }
.cta-app-icon { display: block; width: 76px; height: auto; margin: 0 auto 1rem; filter: drop-shadow(0 12px 24px rgba(0,0,0,.35)); }
@media (max-width: 640px) {
  .ag-head { flex-direction: column; text-align: center; }
  .ag-copy p { margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .device-screen img { transition: none; }
  .ag-row { scroll-behavior: auto; }
}

/* ===== Section artwork ================================================= */
.section-art { max-width: 580px; margin: calc(-1 * clamp(.6rem, 2vw, 1.4rem)) auto clamp(2rem, 4vw, 2.8rem); }
.section-art img { display: block; width: 100%; height: auto; filter: drop-shadow(0 26px 34px rgba(15,32,65,.14)); animation: floaty 8s ease-in-out infinite; }
.section-art--sm { max-width: 480px; }
.section-art--lg { max-width: 700px; }
.section-art--still img { animation: none; filter: none; }
.page-art--map { max-width: 720px; }
.page-art--family { max-width: 860px; }

/* ===== 3D icons on steps and Signet cards ============================== */
.step .step-art { position: absolute; top: 1.1rem; right: 1.1rem; width: 64px; height: 64px; filter: drop-shadow(0 10px 14px rgba(15,32,65,.16)); transition: transform .4s var(--ease-apple); }
.step:hover .step-art { transform: translateY(-3px) rotate(-5deg) scale(1.05); }
.sg-card .sg-ic.sg-ic--3d { width: 58px; height: 58px; background: none; border-radius: 0; margin: -8px 0 8px -8px; }
.sg-ic--3d img { display: block; width: 100%; height: 100%; filter: drop-shadow(0 10px 14px rgba(15,32,65,.16)); }
.hero .section-icon-3d { margin-bottom: .4rem; }

/* ===== Features: future client beside the chat widget ================== */
.client-stage { position: relative; display: flex; align-items: flex-end; justify-content: flex-end; width: 100%; max-width: 560px; min-height: clamp(470px, 42vw, 560px); margin: 0 auto; }
.client-orb {
  position: absolute; z-index: 0; left: 2%; top: 8%; width: 62%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side at 32% 26%, rgba(255,255,255,.3), transparent 72%), linear-gradient(135deg, #00B8E6 0%, #5E6EFF 55%, #8B5CF6 100%);
}
.split-media .client-person {
  position: absolute; z-index: 1; left: -2%; bottom: 0; height: 100%; width: auto; max-width: none; border-radius: 0; box-shadow: none; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 86%, transparent 100%); mask-image: linear-gradient(180deg, #000 86%, transparent 100%);
}
.client-stage .mockup { position: relative; z-index: 2; width: 60%; max-width: 340px; margin: 0 0 5%; }
@media (max-width: 560px) {
  .client-stage { min-height: 430px; }
  .split-media .client-person { height: 92%; left: -6%; }
  .client-stage .mockup { width: 70%; }
  .client-stage .mockup-bar { padding: .5rem .7rem; }
  .client-stage .mockup-title { font-size: .68rem; }
  .client-stage .mockup-body { padding: .7rem; gap: .45rem; }
  .client-stage .mockup .bubble { font-size: .72rem; padding: .5rem .65rem; }
  .client-stage .typing { display: none; }
}

/* ===== Meridian AutoFile (Chrome extension) =========================== */
.autofile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; margin-top: clamp(4rem, 8vw, 6rem); }
.autofile-shots { position: relative; order: -1; width: 100%; max-width: 540px; margin: 0 auto; aspect-ratio: 540 / 560; }
.autofile-shots::before {
  content: ""; position: absolute; inset: 6% 2% 2% 6%; border-radius: 50%; filter: blur(22px);
  background: radial-gradient(closest-side at 60% 40%, rgba(0,184,230,.24), transparent 72%), radial-gradient(closest-side at 32% 70%, rgba(139,92,246,.2), transparent 72%);
}
.autofile-shot { position: absolute; display: block; height: auto; box-shadow: 0 0 0 1px rgba(15,32,65,.07), 0 34px 64px -20px rgba(15,32,65,.38), 0 10px 26px rgba(15,32,65,.12); }
.autofile-shot--back { z-index: 1; left: 0; top: 13%; width: 55%; border-radius: 2.9% / 3.5%; }
.autofile-shot--front { z-index: 2; right: 0; top: 0; width: 58%; border-radius: 2.9% / 1.79%; }
.autofile-icon { display: block; width: 56px; height: 56px; margin: 0 0 1rem; filter: drop-shadow(0 10px 18px rgba(15,32,65,.18)); }
.autofile-copy h3 { font-size: clamp(1.55rem, 2.6vw, 2.05rem); letter-spacing: -.02em; margin: 1rem 0 .8rem; }
.autofile-copy p { color: var(--muted); font-size: 1.05rem; line-height: 1.7; margin-bottom: 1.4rem; }
.autofile-steps { display: grid; gap: .75rem; list-style: none; margin: 0; padding: 0; }
.autofile-steps li { display: flex; align-items: center; gap: .8rem; color: var(--text); font-weight: 500; }
.autofile-steps b { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--grad-brand); color: #fff; font-size: .85rem; box-shadow: 0 6px 14px rgba(94,110,255,.28); }
@media (max-width: 860px) {
  .autofile { grid-template-columns: minmax(0, 1fr); }
  .autofile-shots { order: 0; max-width: 460px; }
}
@media (max-width: 560px) {
  .autofile-shots { aspect-ratio: 540 / 650; }
  .autofile-shot--front { width: 68%; }
  .autofile-shot--back { width: 56%; top: 17%; }
}

/* ===== Availability notice ============================================= */
.firm-notice {
  display: flex; align-items: flex-start; gap: .8rem; max-width: 600px; margin: 1.4rem auto 0; padding: .95rem 1.15rem; text-align: left;
  border-radius: 16px; border: 1px solid rgba(94,110,255,.3); background: linear-gradient(90deg, rgba(0,184,230,.08), rgba(139,92,246,.08));
}
.firm-notice > svg { flex: none; width: 22px; height: 22px; margin-top: .1rem; color: #5E6EFF; }
.firm-notice strong { display: block; font-size: .95rem; font-weight: 700; color: var(--ink); margin-bottom: .15rem; }
.firm-notice span { display: block; font-size: .92rem; line-height: 1.55; color: var(--muted); }
.firm-notice--dark { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.2); }
.firm-notice--dark > svg { color: #00D4FF; }
.firm-notice--dark strong { color: #fff; }
.firm-notice--dark span { color: rgba(226,236,255,.76); }
.cs-band .firm-notice { margin: 1.4rem auto 0; }

@media (prefers-reduced-motion: reduce) {
  .section-art img { animation: none; }
  .step .step-art { transition: none; }
}

/* ===== Small screen fixes ============================================== */
@media (max-width: 860px) { .af-media { margin-top: 2.6rem; } }

/* ===== Team photos ===================================================== */
.team-band { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: #eef2f6; box-shadow: var(--shadow-md); }
.team-band__photo { display: block; width: 100%; height: auto; aspect-ratio: 2.15 / 1; object-fit: cover; object-position: 50% 45%; }
.team-band__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.86) 24%, rgba(255,255,255,.35) 44%, rgba(255,255,255,0) 58%); }
.team-band__copy { position: absolute; top: 50%; left: clamp(1.6rem, 4.2vw, 3.4rem); transform: translateY(-50%); width: min(420px, 40%); }
.team-band__copy h2 { font-size: clamp(1.55rem, 2.7vw, 2.25rem); margin: .9rem 0 .75rem; }
.team-band__copy p { color: var(--text); font-size: 1rem; line-height: 1.6; margin: 0 0 1.4rem; }
.team-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; max-width: 1100px; margin: clamp(2.2rem, 4vw, 3rem) auto 0; }
.team-photo { margin: 0; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.team-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.team-photo figcaption { padding: .95rem 1.15rem 1.1rem; font-size: .92rem; line-height: 1.5; color: var(--muted); }
.team-photo figcaption strong { display: block; margin-bottom: .15rem; font-size: 1rem; color: var(--ink); }
.team-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.5rem; max-width: 1000px; margin: 0 auto; }
.team-portrait { position: relative; margin: 0; min-height: 440px; overflow: hidden; border-radius: var(--radius-lg); background: #e9edf2; box-shadow: var(--shadow-md); }
.team-portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.team-cards { display: grid; gap: 1.5rem; align-content: center; }
@media (max-width: 900px) {
  .team-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team-photo:last-child { grid-column: 1 / -1; justify-self: center; width: calc(50% - .625rem); }
}
@media (max-width: 860px) {
  .team-band { background: var(--surface); border: 1px solid var(--line); }
  .team-band__shade { display: none; }
  .team-band__photo { aspect-ratio: 16 / 11; object-position: 70% 50%; }
  .team-band__copy { position: static; transform: none; width: auto; padding: 1.5rem 1.4rem 1.7rem; }
  .team-split { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .team-portrait { min-height: 0; }
  .team-portrait img { position: static; height: auto; aspect-ratio: 1 / 1; object-position: 50% 36%; }
}
@media (max-width: 600px) {
  .team-photos { grid-template-columns: minmax(0, 1fr); }
  .team-photo:last-child { width: auto; justify-self: stretch; }
}

/* ===== Security grade icons ============================================ */
.icon-3d--grade { position: relative; }
.icon-3d--grade .grade-pill {
  position: absolute; right: -15px; bottom: -3px; display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 23px; padding: 0 .5rem; border-radius: 999px; border: 2px solid #fff;
  background: linear-gradient(135deg, #00B8E6 0%, #5E6EFF 58%, #8B5CF6 100%); color: #fff;
  font-size: .76rem; font-weight: 800; letter-spacing: .02em; line-height: 1; box-shadow: 0 6px 14px rgba(94,110,255,.34);
}

/* ===== About page team cards =========================================== */
.team-card { display: flex; gap: 1.25rem; align-items: flex-start; }
.team-card__photo { width: 96px; height: 96px; border-radius: 16px; object-fit: cover; flex-shrink: 0; box-shadow: var(--shadow-sm); }
.team-card .team-card__body h3 { margin-bottom: .2rem; }
.team-card .team-card__role { color: var(--muted); font-size: .88rem; margin-bottom: .8rem; }
.team-card .team-card__bio { font-size: .95rem; }

/* ===== Phones: keep words, buttons and boxes on one line ================ */
/* Headings never break inside a short compound word such as stress-free. */
.nw { white-space: nowrap; }

@media (max-width: 600px) {
  /* Section labels: a little tighter so they fit on one line */
  .eyebrow { font-size: .72rem; letter-spacing: .09em; gap: .45rem; text-wrap: balance; }
  .section-head .eyebrow::after { display: none; }
  /* Pills look the same on one line and become a neat rounded box if a long one needs two */
  .pill { border-radius: 16px; text-wrap: balance; }
  .hero .pill { font-size: .76rem; padding: .38rem .8rem; }
  .gradient-text { white-space: nowrap; }
  .card p, .checks li, .doc li, section li { text-wrap: pretty; }

  /* Dark call to action bands: more room inside */
  .cta-band { padding: 2.4rem 1.25rem; }
  .cta-band--art { padding-bottom: 0; }
  .cta-band--art .cta-copy { padding-bottom: 1rem; }
  .cs-band { padding: 2.4rem 1.25rem; }
  .firm-notice { padding: .9rem 1rem; gap: .7rem; }

  /* Cards: a little more width for their text */
  .card { padding: 1.5rem 1.35rem; }

  /* Product mockups: slimmer frames so labels and status chips stay on one line */
  .split-media { padding: .8rem; }
  .split-media > .card { padding: 1.3rem 1.05rem; }
  .split-media > .card > div:first-child { gap: .75rem; }
  .split-media > .card > div > div { align-items: center; gap: .75rem; }
  .split-media > .card > div > span:first-child,
  .split-media > .card > div > div > span:first-child { min-width: 0; }
  .split-media > .card .pill,
  .split-media > .card > div > div > span:last-child { flex-shrink: 0; white-space: nowrap; }

  /* Pricing trial strip: title on its own line */
  .trial-strip { gap: .45rem 1rem; padding: 1rem 1.1rem; font-size: .88rem; }
  .trial-strip strong { flex-basis: 100%; text-align: center; }

  /* Code sample wraps instead of being cut off */
  .card pre, .card pre code { white-space: pre-wrap; word-break: break-all; }

  /* Contact and support tables become simple stacked rows */
  .doc-table, .doc-table tbody, .doc-table tr, .doc-table td { display: block; width: 100%; }
  .doc-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .doc-table { border-top: 1px solid var(--line); }
  .doc-table tr { padding: .9rem .25rem; border-bottom: 1px solid var(--line); }
  .doc-table td { padding: 0; border: 0; }
  .doc-table td:first-child { color: var(--ink); font-weight: 600; }
  .doc-table td + td { margin-top: .25rem; }
  .doc-table td[data-label]::before { content: attr(data-label); display: block; margin: .45rem 0 .1rem; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .doc-card { padding: 1.15rem 1.25rem; }

  /* About page team cards: photo and name side by side, text full width below */
  .team-card { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 0 .9rem; align-items: center; }
  .team-card__photo { width: 60px; height: 60px; border-radius: 14px; }
  .team-card__body { display: contents; }
  .team-card .team-card__body h3 { margin: 0; }
  .team-card .team-card__role { grid-column: 1 / -1; margin: .85rem 0 .5rem; }
  .team-card .team-card__bio { grid-column: 1 / -1; }

  /* Signet steps: a clean stacked list */
  .sg-steps { flex-direction: column; align-items: center; gap: .5rem; font-size: 0; text-align: center; }
  .sg-steps > span { font-size: 13px; }
}

@media (max-width: 400px) {
  .eyebrow { letter-spacing: .07em; }
  .btn-lg { font-size: .95rem; padding-left: .8rem; padding-right: .8rem; }
  .split-media { padding: .6rem; }
  .split-media > .card { padding: 1.15rem .85rem; }
  .split-media > .card > div > div { font-size: .8rem !important; padding: .6rem .7rem !important; }
}

@media (max-width: 480px) {
  /* Buttons in heroes and call to action bands fill the width, so their text never wraps */
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { width: 100%; }
  .hero-ctas > .pill { align-self: flex-start; }
  .cta-band > .btn { display: flex; width: 100%; }
  .btn-lg { padding: 1rem 1.1rem; font-size: 1rem; }
}

@media (max-width: 340px) {
  .eyebrow { font-size: .66rem; letter-spacing: .05em; }
  .split-media > .card > div > div { font-size: .74rem !important; }
  .mockup-title { font-size: .7rem; }
}

/* Two part status pills: on narrow phones show the two parts on two lines, without the dot */
@media (max-width: 480px) {
  .pill-2l--md .pill-sep { display: none; }
  .pill-2l--md > span { display: block; }
}
@media (max-width: 380px) {
  .pill-2l--sm .pill-sep { display: none; }
  .pill-2l--sm > span { display: block; }
}

/* Signet hero with reduced motion: show the seal instead of an empty ring */
@media (prefers-reduced-motion: reduce) {
  .sg-stage .sg-layer.sg-logo, .sg-phase span.p1 { opacity: 1; }
}

/* ===================================================================== */
/* Integration logos (Zoom, Google Meet, Teams, Gmail, Google Calendar)   */
/* ===================================================================== */
.icon-chip--logo { background:#fff !important; border:1px solid var(--line) !important; padding:9px; overflow:hidden; box-shadow:var(--shadow-sm); }
.icon-chip--logo img { width:100%; height:100%; object-fit:contain; display:block; }

.logo-pills { display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem; margin-top:1.8rem; }
.logo-pill { display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .95rem .5rem .55rem;
  background:#fff; border:1px solid var(--line); border-radius:999px;
  font-size:.9rem; font-weight:600; color:var(--ink); box-shadow:var(--shadow-sm); white-space:nowrap; }
.logo-pill img { width:26px; height:26px; object-fit:contain; display:block; flex:none; }
@media (max-width: 600px) {
  .logo-pills { gap:.5rem; }
  .logo-pill { padding:.45rem .9rem .45rem .5rem; font-size:.82rem; }
  .logo-pill img { width:22px; height:22px; }
}
@media (max-width: 380px) {
  .logo-pill { font-size:.78rem; padding:.4rem .8rem .4rem .45rem; }
  .logo-pill img { width:20px; height:20px; }
}

/* ===================================================================== */
/* The Meridian Bar · matched to the live bar on a firm's own site       */
/* Values copied from the running widget: pill, chips, hairlines, sizes  */
/* ===================================================================== */
.m-island {
  position: absolute; left: 50%; bottom: 2rem; transform: translateX(-50%);
  display: flex; align-items: center; gap: 4px;
  padding: 8px 10px; border-radius: 40px;
  background: rgba(255,255,255,.5);
  -webkit-backdrop-filter: blur(28px) saturate(1.8);
  backdrop-filter: blur(28px) saturate(1.8);
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: 0 10px 32px rgba(15,32,65,.12), 0 2px 8px rgba(15,32,65,.08), inset 0 1px 0 rgba(255,255,255,.7);
  max-width: calc(100% - 1.5rem);
}
.ib {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 12px 16px; border: none; border-radius: 30px; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1.5; letter-spacing: .13px;
  white-space: nowrap; background: transparent;
  transition: transform .18s var(--ease-soft), filter .18s var(--ease-soft), box-shadow .18s var(--ease-soft);
}
.ib svg { width: 18px; height: 18px; flex: none; }
.ib:hover { transform: translateY(-1px); filter: saturate(1.12); }
.ib:active { transform: translateY(0); }
.ib-div { width: 1px; height: 28px; flex: none; background: rgba(15,32,65,.12); border-radius: 1px; }

.ib-wa { background: rgba(37,211,102,.14);  color: #1FAA52; }
.ib-bk { background: rgba(59,130,246,.14);  color: #2563EB; }
.ib-rd { background: rgba(168,85,247,.14);  color: #7E22CE; }
.ib-nw { background: rgba(251,191,36,.16);  color: #B45309; }
.ib-fc { background: rgba(236,72,153,.14);  color: #BE185D; }
.ib-ai {
  padding: 11px 18px; color: #fff;
  background: linear-gradient(135deg, #EE6558 0%, #D41616 50%, #930F1A 100%);
  box-shadow: 0 8px 24px rgba(212,22,22,.4), 0 2px 6px rgba(147,15,26,.2), inset 0 1px 0 rgba(255,255,255,.35);
}
.ib-ai .mr-ring { width: 22px; height: 22px; object-fit: contain; display: block; flex: none; }

/* the chip whose panel is showing */
.ib.is-on { box-shadow: 0 0 0 2px rgba(15,32,65,.14); }
.ib-ai.is-on { box-shadow: 0 0 0 2px rgba(212,22,22,.45), 0 8px 24px rgba(212,22,22,.4), 0 2px 6px rgba(147,15,26,.2), inset 0 1px 0 rgba(255,255,255,.35); }

.m-caption {
  position: absolute; left: 50%; bottom: .65rem; transform: translateX(-50%);
  font-size: 10px; font-weight: 500; letter-spacing: .2px;
  color: rgba(15,32,65,.52); white-space: nowrap;
}
.m-caption strong { font-weight: 600; color: rgba(15,32,65,.64); }

@media (max-width: 800px) {
  .ib .ib-t { display: none; }
  .ib { padding: 12px 14px; }
  .ib-ai .ib-t { display: inline; }
  .ib-ai { padding: 14px 18px; }
}
@media (max-width: 520px) {
  .m-island { bottom: 1.1rem; padding: 6px 8px; gap: 2px; border-radius: 32px; }
  .ib { padding: 10px 10px; }
  .ib svg { width: 16px; height: 16px; }
  .ib-ai { padding: 11px 12px; font-size: 12px; gap: 6px; }
  .ib-ai .mr-ring { width: 19px; height: 19px; }
  .ib-div { height: 22px; }
  .m-caption { bottom: .3rem; font-size: 9px; }
}
/* the mockup sits inside a browser frame, so it has less room than the real
   bar gets on the same phone. Below this the label would push a chip past the
   frame edge, so every chip goes icon only and ASK AI stays the red one. */
@media (max-width: 380px) {
  .m-island { padding: 5px 7px; gap: 1px; }
  .ib { padding: 9px 9px; }
  .ib svg { width: 15px; height: 15px; }
  .ib-ai .ib-t { display: none; }
  .ib-ai { padding: 9px 10px; }
  .ib-ai .mr-ring { width: 18px; height: 18px; }
  .ib-div { height: 18px; }
  .m-caption { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) { .ib { transition: none; } .ib:hover, .ib:active { transform: none; } }

/* ===================================================================== */
/* The living ring · the AI panel mark in the Meridian Bar showcase      */
/* The mark is drawn live: gradient arc, a light that runs the loop, and */
/* the sparkle. The tile's border sweeps its colours without the shape   */
/* itself turning, which is what made the old one look like a spinner.   */
/* ===================================================================== */
@property --mrA { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

.bar-detail-icon--ring {
  background: radial-gradient(circle at 50% 32%, #fff 0%, #EDF3FA 100%) !important;
  color: var(--ink); position: relative; padding: 9px; overflow: visible;
  box-shadow: 0 12px 34px rgba(15,32,65,.10), 0 3px 10px rgba(94,110,255,.10), inset 0 0 0 1px rgba(255,255,255,.85);
  animation: mrFloat 6.5s ease-in-out infinite;
}
.bar-detail-icon--ring::before {
  content: ""; position: absolute; inset: -2px; border-radius: 18px; padding: 2px;
  --mrA: 0deg;
  background: conic-gradient(from var(--mrA), #00B8E6, #5E6EFF, #8B5CF6, #F2695E, #00D4FF, #00B8E6);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .8; animation: mrHue 9s linear infinite;
}
.bar-detail-icon--ring::after {
  content: ""; position: absolute; inset: 1px; border-radius: 15px; pointer-events: none;
  background: linear-gradient(112deg, transparent 40%, rgba(255,255,255,.9) 50%, transparent 60%);
  background-size: 300% 100%; background-position: 170% 0;
  animation: mrSheen 8s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes mrFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes mrHue   { to { --mrA: 360deg; } }
@keyframes mrSheen { 0%,70% { background-position: 170% 0; } 92%,100% { background-position: -70% 0; } }

.bar-detail-icon--ring .mr-live { width: 42px; height: 42px; display: block; position: relative; z-index: 1; overflow: visible; }
.mr-glow { transform-origin: 48px 58px; animation: mrBreath 5s ease-in-out infinite; }
@keyframes mrBreath { 0%,100% { opacity: .26; transform: scale(1); } 50% { opacity: .58; transform: scale(1.08); } }
.mr-comet { animation: mrRun 3.8s linear infinite; }
.mr-tail  { animation: mrTail 3.8s linear infinite; }
@keyframes mrRun  { from { stroke-dashoffset: 0; }  to { stroke-dashoffset: -188.5; } }
@keyframes mrTail { from { stroke-dashoffset: 24; } to { stroke-dashoffset: -164.5; } }
.mr-spark { transform-origin: 72px 22px; animation: mrTwinkle 3.4s ease-in-out infinite; }
@keyframes mrTwinkle {
  0%,100% { transform: scale(.9) rotate(0);     opacity: .85; }
  40%     { transform: scale(1.2) rotate(18deg); opacity: 1; }
  68%     { transform: scale(1.02) rotate(7deg); opacity: .94; }
}
@media (prefers-reduced-motion: reduce) {
  .bar-detail-icon--ring, .bar-detail-icon--ring::before, .bar-detail-icon--ring::after,
  .mr-glow, .mr-comet, .mr-tail, .mr-spark { animation: none !important; }
  .mr-comet, .mr-tail { opacity: 0; }
}

/* ============================================================
   Express Entry draws page (/draws)
   Data tables, figures and the latest-round callout.
   ============================================================ */

/* --- latest round callout --- */
.mr-latest{
  position:relative; border:1px solid var(--line); border-radius:var(--radius-lg);
  background:linear-gradient(180deg,#FBFDFF 0%,#FFFFFF 100%);
  box-shadow:var(--shadow-md); padding:1.6rem 1.5rem 1.4rem; margin-bottom:1.5rem;
}
.mr-latest-tag{
  display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--indigo); margin-bottom:1rem;
}
.mr-latest-grid{
  display:grid; grid-template-columns:repeat(5,1fr); gap:1.1rem;
}
.mr-latest-grid > div{ min-width:0; }
.mr-k{
  font-size:.74rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted); margin-bottom:.35rem;
}
.mr-v{ font-size:1.5rem; font-weight:800; color:var(--ink); line-height:1.15; letter-spacing:-.01em; }
.mr-v--sm{ font-size:1rem; font-weight:700; line-height:1.3; }
.mr-v--hi{ color:var(--indigo); }

/* --- key number row --- */
.mr-nums{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.mr-num{
  border:1px solid var(--line); border-radius:var(--radius); background:var(--surface);
  padding:1.25rem 1.1rem; text-align:center; box-shadow:var(--shadow-xs);
}
.mr-num-v{ font-size:2rem; font-weight:800; color:var(--ink); line-height:1.1; letter-spacing:-.02em; }
.mr-num-l{ font-size:.85rem; color:var(--muted); margin-top:.35rem; line-height:1.35; }

/* --- figures --- */
.mr-fig{ margin:0; }
.mr-fig-svg{
  display:block; width:100%; height:auto;
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface); padding:1.1rem .9rem; box-shadow:var(--shadow-xs);
}
.mr-fig figcaption{
  font-size:.85rem; color:var(--muted); margin-top:.8rem; text-align:center; line-height:1.5;
}

/* --- data tables --- */
.mr-tw{
  border:1px solid var(--line); border-radius:var(--radius); background:var(--surface);
  overflow:auto; box-shadow:var(--shadow-xs); -webkit-overflow-scrolling:touch;
}
.mr-tw--tall{ max-height:640px; }
.mr-tbl{ width:100%; border-collapse:collapse; font-size:.92rem; min-width:620px; }
.mr-tbl thead th{
  position:sticky; top:0; z-index:1;
  background:var(--bg-tint); color:var(--ink);
  font-size:.76rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  text-align:left; padding:.8rem 1rem; white-space:nowrap;
  border-bottom:1px solid var(--line);
}
.mr-tbl thead th.num{ text-align:right; }
.mr-tbl tbody th, .mr-tbl tbody td{
  padding:.72rem 1rem; border-bottom:1px solid var(--line-soft);
  color:var(--text); text-align:left; font-weight:400; vertical-align:middle;
}
.mr-tbl tbody th{ color:var(--ink); font-weight:600; }
.mr-tbl td.num, .mr-tbl th.num{ text-align:right; font-variant-numeric:tabular-nums; font-family:var(--mono); }
.mr-tbl tbody th.num{ font-family:var(--mono); color:var(--muted); font-weight:600; }
.mr-tbl tbody tr:last-child th, .mr-tbl tbody tr:last-child td{ border-bottom:0; }
.mr-tbl tbody tr:hover th, .mr-tbl tbody tr:hover td{ background:var(--bg-soft); }
.mr-tbl strong{ color:var(--ink); font-weight:700; }

/* --- notes --- */
.mr-note{
  font-size:.88rem; color:var(--muted); line-height:1.6; margin:1rem 0 0;
  padding-left:.9rem; border-left:3px solid var(--line);
}
.mr-src{
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--bg-soft); padding:1.5rem 1.6rem;
}
.mr-src h3{ margin:0 0 .7rem; font-size:1.05rem; }
.mr-src p{ font-size:.92rem; line-height:1.65; margin:0 0 .8rem; }
.mr-src p:last-child{ margin-bottom:0; }
.mr-disc{ color:var(--muted); font-size:.85rem !important; padding-top:.8rem; border-top:1px solid var(--line); }

@media (max-width:900px){
  .mr-latest-grid{ grid-template-columns:repeat(3,1fr); gap:1rem 1.2rem; }
  .mr-nums{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .mr-latest{ padding:1.25rem 1.1rem 1.1rem; }
  .mr-latest-grid{ grid-template-columns:repeat(2,1fr); }
  .mr-v{ font-size:1.3rem; }
  .mr-num{ padding:1rem .8rem; }
  .mr-num-v{ font-size:1.6rem; }
  .mr-num-l{ font-size:.8rem; }
  .mr-tbl{ font-size:.86rem; }
  .mr-tbl thead th, .mr-tbl tbody th, .mr-tbl tbody td{ padding:.6rem .7rem; }
  .mr-fig-svg{ padding:.8rem .5rem; }
}

/* --- homepage band linking to /draws --- */
.mr-freebar{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface);
  padding:1.5rem 1.7rem; box-shadow:var(--shadow-sm); text-decoration:none; color:inherit;
  transition:box-shadow .3s var(--ease-apple), transform .3s var(--ease-apple), border-color .3s var(--ease-apple);
}
.mr-freebar:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); border-color:#D4DEEC; }
.mr-freebar-txt{ min-width:0; }
.mr-freebar h3{ margin:.5rem 0 .4rem; font-size:1.25rem; }
.mr-freebar p{ margin:0; font-size:.94rem; color:var(--text); max-width:62ch; line-height:1.6; }
.mr-freebar-cta{ flex:0 0 auto; }
@media (max-width:760px){
  .mr-freebar{ flex-direction:column; align-items:flex-start; padding:1.3rem 1.2rem; }
  .mr-freebar-cta{ width:100%; text-align:center; }
}

/* --- body copy on /draws (the global reset zeroes p margins) --- */
.mr-prose p{ margin:0 0 1.15rem; font-size:1.02rem; line-height:1.75; color:var(--text); }
.mr-prose p:last-child{ margin-bottom:0; }
.mr-prose strong{ color:var(--ink); font-weight:700; }
@media (max-width:560px){ .mr-prose p{ font-size:.98rem; line-height:1.7; } }

/* --- /draws tables on small screens: keep the CRS column on screen --- */
.mr-tbl td.nowrap{ white-space:nowrap; }
@media (max-width:620px){
  .mr-tbl{ min-width:0; }
  /* history table: the round number is the least useful column on a phone */
  .mr-tbl--hist th:nth-child(1), .mr-tbl--hist td:nth-child(1){ display:none; }
  .mr-tbl--hist td:nth-child(2){ font-size:.8rem; color:var(--muted); }
  .mr-tbl--hist td:nth-child(3){ line-height:1.35; }
  /* cutoff table: drop the round count and the last-round date */
  .mr-tbl--cut th:nth-child(4), .mr-tbl--cut td:nth-child(4),
  .mr-tbl--cut th:nth-child(6), .mr-tbl--cut td:nth-child(6){ display:none; }
  .mr-tbl thead th{ font-size:.68rem; letter-spacing:.03em; }
  .mr-tbl thead th, .mr-tbl tbody th, .mr-tbl tbody td{ padding:.55rem .55rem; }
}

@media (max-width:620px){
  .mr-tbl thead th{ white-space:normal; line-height:1.25; vertical-align:bottom; }
  .mr-tbl--hist, .mr-tbl--cut{ table-layout:fixed; width:100%; }
  /* with table-layout:fixed the widths must sit on the first row, the thead cells */
  .mr-tbl--hist th:nth-child(2){ width:23%; }
  .mr-tbl--hist th:nth-child(3){ width:32%; }
  .mr-tbl--hist th:nth-child(4){ width:20%; }
  .mr-tbl--hist th:nth-child(5){ width:25%; }
  .mr-tbl--cut th:nth-child(1){ width:34%; }
  .mr-tbl--cut th:nth-child(2){ width:19%; }
  .mr-tbl--cut th:nth-child(3){ width:23%; }
  .mr-tbl--cut th:nth-child(5){ width:24%; }
  .mr-tbl td.nowrap{ white-space:normal; }
  /* table-layout:fixed still reports the min-content width as the scroll width,
     which leaves a strip of empty scroll to the right. Letting long words break
     drops the min-content floor so the table fits its container exactly. */
  .mr-tbl--hist td, .mr-tbl--cut td{ overflow-wrap:anywhere; }
  .mr-tbl thead th{ overflow-wrap:normal; word-break:normal; hyphens:none; }
  .mr-tbl td.num, .mr-tbl th.num{ font-size:.82rem; }
  .mr-tbl--cut td:nth-child(3){ font-size:.76rem; }
}

/* short header labels so the phone table never needs a sideways swipe */
.mr-tbl .h-sm{ display:none; }
@media (max-width:620px){
  .mr-tbl .h-lg{ display:none; }
  .mr-tbl .h-sm{ display:inline; }
}

/* ===== Buyer checklist lists (choosing-immigration-software) ============ */
.mr-ul{ list-style: disc; padding-left: 1.3rem; margin: 0 0 1.15rem; }
.mr-ul li{ font-size: 1.02rem; line-height: 1.75; color: var(--text); margin: 0 0 .6rem; }
.mr-ul li:last-child{ margin-bottom: 0; }
@media (max-width:560px){ .mr-ul li{ font-size:.98rem; line-height:1.7; } }

/* ===== Platform rail (homepage, pinned isometric modules) =============== */
.mr-railsec{ position:relative; }
.mr-railsec{ background:radial-gradient(1200px 700px at 50% 10%, #13224a 0%, #080d1d 58%, #05070f 100%) no-repeat #05070f; color:#eaf0fb; }
.mr-pin{ position:relative; padding:clamp(3rem,5vw,4.4rem) 0 clamp(2rem,4vw,3rem); overflow:hidden; }
.mr-railsec.is-pinned .mr-pin{ position:sticky; top:0; height:100vh; display:flex; flex-direction:column; justify-content:center; padding:92px 0 20px; }
.mr-railhead{ max-width:1180px; margin:0 auto; padding:0 22px; flex:0 0 auto; }
.mr-railsec .eyebrow{ color:#8fb6ff; }
.mr-railsec h2{ color:#fff; font-size:clamp(24px,3.4vw,40px); letter-spacing:-.02em; margin:.5rem 0 .6rem; }
.mr-railsub{ color:#a8bada; font-size:1rem; line-height:1.65; max-width:660px; margin:0; }

.mr-view{ position:relative; margin-top:clamp(1rem,2.4vw,1.8rem); overflow-x:auto; overflow-y:hidden; scroll-snap-type:x proximity;
  scroll-behavior:smooth; scrollbar-width:none; -ms-overflow-style:none; cursor:grab; }
.mr-view::-webkit-scrollbar{ display:none; }
.mr-view.is-drag{ cursor:grabbing; scroll-behavior:auto; }
.mr-view:focus-visible{ outline:2px solid #5fd3f0; outline-offset:6px; }
.is-pinned .mr-view{ overflow:hidden; cursor:default;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 150px,#000 calc(100% - 40px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 150px,#000 calc(100% - 40px),transparent 100%); }
.mr-track{ display:flex; align-items:center; padding:10px 0; will-change:transform; }
.is-pinned .mr-track{ width:max-content; }


/* one module and its caption */
.mr-stage{ --tile:154px; flex:0 0 min(320px,84vw); scroll-snap-align:center; position:relative; display:grid;
  grid-template-rows:minmax(0,1fr) clamp(186px,25vh,250px) minmax(0,1fr); align-items:center; height:clamp(430px,62vh,592px); padding:0 14px;
  opacity:.5; transition:opacity .45s ease; will-change:opacity, transform; }
.mr-stage.is-live{ opacity:1; }
.mr-stagetext{ grid-row:1; align-self:end; padding-bottom:16px; position:relative; z-index:2; }
.mr-stage--low .mr-stagetext{ grid-row:3; align-self:start; padding:16px 0 0; }
.mr-stagetext h3{ font-size:1.06rem; font-weight:700; color:#fff; margin:.35rem 0 .45rem; letter-spacing:-.01em; }
.mr-stagetext p{ font-size:.9rem; line-height:1.6; color:#a5b7d6; margin:0 0 .6rem; }
.mr-rnum{ font-family:'JetBrains Mono',ui-monospace,monospace; font-size:12px; letter-spacing:.16em; color:#7f9ac9; }
a.mr-rlink{ font-size:.86rem; font-weight:700; color:#8fd8ef; text-decoration:none; }
a.mr-rlink:hover{ color:#fff; }
a.mr-rlink::after{ content:" \2192"; }

/* the isometric module */
.mr-mod{ grid-row:2; display:flex; align-items:center; justify-content:center; perspective:1200px; position:relative; z-index:1; }
.mr-mod::before{ content:""; position:absolute; z-index:-1; top:50%; left:-30px; right:-30px; border-top:1px dashed rgba(143,216,239,.2); }
.mr-mod3d{ position:relative; width:var(--tile); height:var(--tile); transform-style:preserve-3d;
  transform:rotateX(56deg) rotateZ(-45deg) translateZ(0); transition:transform .5s cubic-bezier(.22,1,.36,1); }
.mr-mod3d > span{ position:absolute; inset:0; border-radius:26px; display:block; }
.mr-modfloor{ transform:translateZ(-26px) scale(1.04); background:radial-gradient(closest-side, rgba(0,0,0,.75), rgba(0,0,0,0) 72%); filter:blur(8px); }
.mr-modglow{ transform:translateZ(-12px) scale(1.05); background:linear-gradient(135deg,#ff8a6b,#c86ef0 46%,#5fd3f0);
  filter:blur(28px); opacity:.12; transition:opacity .5s ease; }
.mr-modedge{ background:linear-gradient(135deg,#ff7d5c,#c86ef0 46%,#5fd3f0); opacity:.4; transition:opacity .5s ease; }
.mr-mod3d > .mr-modedge:nth-child(3){ transform:translateZ(1.5px); }
.mr-mod3d > .mr-modedge:nth-child(4){ transform:translateZ(3.0px); }
.mr-mod3d > .mr-modedge:nth-child(5){ transform:translateZ(4.5px); }
.mr-mod3d > .mr-modedge:nth-child(6){ transform:translateZ(6.0px); }
.mr-mod3d > .mr-modedge:nth-child(7){ transform:translateZ(7.5px); }
.mr-mod3d > .mr-modedge:nth-child(8){ transform:translateZ(9.0px); }
.mr-mod3d > .mr-modedge:nth-child(9){ transform:translateZ(10.5px); }
.mr-mod3d > .mr-modedge:nth-child(10){ transform:translateZ(12.0px); }
.mr-mod3d > .mr-modedge:nth-child(11){ transform:translateZ(13.5px); }
.mr-mod3d > .mr-modedge:nth-child(12){ transform:translateZ(15.0px); }
.mr-mod3d > .mr-modedge:nth-child(13){ transform:translateZ(16.5px); }
.mr-mod3d > .mr-modedge:nth-child(14){ transform:translateZ(18.0px); }
.mr-mod3d > .mr-modedge:nth-child(15){ transform:translateZ(19.5px); }
.mr-mod3d > .mr-modedge:nth-child(16){ transform:translateZ(21.0px); }
.mr-mod3d > .mr-modedge:nth-child(17){ transform:translateZ(22.5px); }
.mr-mod3d > .mr-modedge:nth-child(18){ transform:translateZ(24.0px); }
.mr-mod3d > .mr-modedge:nth-child(19){ transform:translateZ(25.5px); }
.mr-mod3d > .mr-modedge:nth-child(20){ transform:translateZ(27.0px); }
.mr-mod3d > .mr-modedge:nth-child(21){ transform:translateZ(28.5px); }
.mr-mod3d > .mr-modedge:nth-child(22){ transform:translateZ(30.0px); }
.mr-mod3d .mr-modface{ transform:translateZ(30px); display:flex; align-items:center; justify-content:center; overflow:hidden;
  background:linear-gradient(155deg,#1c2744 0%,#0e1628 58%,#0a101e 100%); border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), inset 0 -18px 30px rgba(0,0,0,.45); }
.mr-mod3d .mr-modface::before{ content:""; position:absolute; inset:13px; border-radius:16px; border:1px dashed rgba(255,255,255,.09); }
.mr-mod3d .mr-modface::after{ content:""; position:absolute; inset:0; border-radius:26px; pointer-events:none;
  background:linear-gradient(140deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.03) 34%, rgba(255,255,255,0) 60%); }
.mr-mod3d .mr-modface img{ width:44%; height:auto; opacity:.55; filter:grayscale(.72) brightness(1.2); transition:opacity .5s ease, filter .5s ease; }
.mr-stage.is-live .mr-mod3d{ transform:rotateX(56deg) rotateZ(-45deg) translateZ(20px) scale(1.05); }
.mr-stage.is-live .mr-modglow{ opacity:.62; }
.mr-stage.is-live .mr-modedge{ opacity:1; }
.mr-stage.is-live .mr-mod3d .mr-modface{ border-color:rgba(255,255,255,.3); }
.mr-stage.is-live .mr-mod3d .mr-modface img{ opacity:1; filter:none; }

/* the finale: one big module with the ring above it, words on the right */
.mr-stage--ring{ --tile:clamp(190px,25vh,256px); flex:0 0 min(1240px,96vw); height:clamp(430px,62vh,592px);
  grid-template-rows:1fr; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:clamp(16px,2.6vw,40px); opacity:1; padding:0 14px; }
.mr-stage--ring .mr-mod{ grid-row:1; grid-column:2; width:calc(var(--tile) * 1.66); }
.is-pinned .mr-stage--ring .mr-mod3d{ transition:none; }
.mr-stage--ring .mr-mod::before{ display:none; }
.mr-stage--ring .mr-modglow{ opacity:calc(.55 * (1 - .78 * var(--flat, 0))); }
.mr-stage--ring .mr-mod3d .mr-modface{ background:radial-gradient(closest-side, rgba(95,211,240,.26), rgba(95,211,240,0) 74%), linear-gradient(155deg,#18233d 0%,#0d1526 58%,#080e1a 100%); border-color:rgba(255,255,255,.26);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), inset 0 -18px 30px rgba(0,0,0,.45), 0 40px 70px rgba(0,0,0,.55); }
.mr-stage--ring .mr-modedge{ opacity:calc(.95 * (1 - .72 * var(--flat, 0))); }
.mr-stage--ring .mr-mod3d .mr-modface img.mr-modring{ width:calc(33% + 13% * var(--flat, 0)); opacity:1; filter:none; }

.mr-ringside{ grid-row:1; min-width:0; }
.mr-ringside--left{ grid-column:1; text-align:right; }
.mr-ringside--right{ grid-column:3; text-align:left; }
.mr-ringside h3{ font-size:clamp(1.05rem,1.8vw,1.42rem); font-weight:700; color:#fff; margin:.4rem 0 .55rem; letter-spacing:-.015em; }
.mr-ringside p{ font-size:.93rem; line-height:1.65; color:#bccfee; margin:0; }
.mr-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.mr-ringside--right .mr-chips{ justify-content:flex-start; }
.mr-chip{ font-size:.75rem; font-weight:600; color:#dceaff; background:rgba(9,14,28,.7); border:1px solid rgba(143,216,239,.32); border-radius:999px; padding:6px 12px; }
.mr-ringside .mr-rlink{ display:inline-block; margin-top:16px; }
/* the words arrive once the modules have folded in */
.is-pinned .mr-ringside{ opacity:0; transition:opacity .55s ease, transform .55s cubic-bezier(.22,1,.36,1); }
.is-pinned .mr-ringside--left{ transform:translateX(26px); }
.is-pinned .mr-ringside--right{ transform:translateX(-26px); }
.is-pinned .mr-stage--ring.is-revealed .mr-ringside{ opacity:1; transform:none; }

/* controls */
.mr-railfoot{ display:flex; align-items:center; gap:18px; max-width:1180px; margin:0 auto; padding:16px 22px 0; width:100%; flex:0 0 auto; }
.mr-railprog{ flex:1; height:3px; border-radius:999px; background:rgba(255,255,255,.1); overflow:hidden; }
.mr-railprog span{ display:block; height:100%; width:8%; border-radius:999px; background:linear-gradient(90deg,#5fd3f0,#2b7fff); transition:width .1s linear; }
.mr-railbtns{ display:flex; gap:10px; }
.mr-railbtn{ width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.06); color:#eaf0fb;
  font-size:19px; line-height:1; cursor:pointer; transition:background .15s, border-color .15s, opacity .15s; }
.mr-railbtn:hover{ background:rgba(255,255,255,.14); border-color:rgba(143,216,239,.5); }
.mr-railbtn[disabled]{ opacity:.3; cursor:default; }
.is-pinned .mr-railbtns{ display:none; }

@media (max-width:860px){
  .mr-stage{ --tile:126px; grid-template-rows:minmax(0,1fr) 196px 0; height:414px; padding:0 10px; }
  .mr-stage--low .mr-stagetext{ grid-row:1; align-self:end; padding:0 0 14px; }
  .mr-stage--ring{ --tile:168px; height:auto; grid-template-columns:1fr; grid-template-rows:auto auto auto; gap:12px;
    text-align:center; flex:0 0 min(420px,92vw); }
  .mr-stage--ring .mr-ringside--left{ grid-row:1; grid-column:1; text-align:center; }
  .mr-stage--ring .mr-mod{ grid-row:2; grid-column:2; grid-column:1; }
  .mr-stage--ring .mr-ringside--right{ grid-row:3; grid-column:1; text-align:center; }
  .mr-ringside p{ display:none; }
  .mr-ringside h3{ font-size:1.02rem; }
  .mr-chips{ justify-content:center; gap:5px; }
  .mr-chip{ font-size:.64rem; padding:3px 8px; }
  .mr-ringside .mr-rlink{ margin-top:12px; }

  /* Phones repaint the whole scroller when a mask, a blur filter or a promoted
     layer sits inside it, which shows up as flicker during a swipe. On a phone
     the rail is a plain scroller, so none of that is needed. */
  .mr-view{ -webkit-mask-image:none; mask-image:none; }
  .mr-track{ will-change:auto; }
  .mr-stage{ opacity:1; transition:none; will-change:auto; }
  .mr-mod3d{ transition:none; }
  .mr-mod3d > .mr-modglow{ display:none; }
  .mr-mod3d > .mr-modfloor{ filter:none; opacity:.6; }
  .mr-mod3d > .mr-modedge{ opacity:.92; transition:none; }
  .mr-mod3d .mr-modface{ border-color:rgba(255,255,255,.26); }
  .mr-mod3d .mr-modface img{ opacity:1; filter:none; transition:none; }
  .mr-stage.is-live .mr-mod3d{ transform:rotateX(56deg) rotateZ(-45deg); }
  /* Safari repaints 3D layers mid scroll unless the back faces are dropped. */
  .mr-mod3d > span{ -webkit-backface-visibility:hidden; backface-visibility:hidden; }
}
@media (prefers-reduced-motion:reduce){
  .mr-view{ scroll-behavior:auto; }
  .mr-modhalo{ animation:none; }
  .mr-mod3d, .mr-modglow, .mr-modedge, .mr-mod3d .mr-modface img{ transition:none; }
}

/* ===== Dropdown navigation ============================================== */
.nav-links{ align-self:stretch; }
.nav-item{ position:relative; display:flex; align-items:center; }
.nav-links a.nav-top{ display:inline-flex; align-items:center; gap:.3rem; }
.nav-caret{ width:13px; height:13px; opacity:.55; transition:transform .18s ease, opacity .18s ease; }
.nav-item.has-sub:hover .nav-caret, .nav-item.has-sub:focus-within .nav-caret{ transform:rotate(180deg); opacity:.9; }
.nav-sub{ position:absolute; top:100%; left:-8px; z-index:1200; padding:14px; background:#fff;
  border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-md);
  opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .16s ease, transform .16s ease, visibility .16s; }
.nav-item.has-sub:hover .nav-sub, .nav-item.has-sub:focus-within .nav-sub{ opacity:1; visibility:visible; transform:translateY(0); }
.nav-sub-inner{ display:flex; gap:26px; }
.nav-col{ display:flex; flex-direction:column; min-width:186px; }
.nav-col-h{ font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); padding:.25rem .6rem .5rem; }
.nav-links .nav-sub a{ font-size:.9rem; font-weight:500; padding:.5rem .6rem; border-radius:9px; white-space:nowrap; }
.nav-links .nav-sub a:hover{ background:var(--bg-soft); color:var(--navy); }

@media (max-width:940px){
  .nav-links{ overflow-y:auto; max-height:calc(100vh - var(--nav-h)); padding-bottom:1.2rem; }
  .nav-item{ display:block; }
  .nav-links a.nav-top{ display:block; font-weight:700; padding:.6rem 1rem; }
  .nav-caret{ display:none; }
  .nav-sub{ position:static; opacity:1; visibility:visible; transform:none; padding:0 0 .5rem .5rem;
    background:transparent; border:0; box-shadow:none; border-radius:0; }
  .nav-sub-inner{ flex-direction:column; gap:0; }
  .nav-col{ min-width:0; }
  .nav-col-h{ padding:.55rem .6rem .2rem; }
  .nav-links .nav-sub a{ padding:.42rem .6rem; font-size:.9rem; color:var(--muted); }
}
@media (prefers-reduced-motion:reduce){
  .nav-sub, .nav-caret{ transition:none; }
}
/* ===== Coming soon: a small 3D tile charging inside the ring ============ */
.cs-band::after{ content:""; position:absolute; top:-60%; left:-40%; width:40%; height:220%; pointer-events:none;
  background:linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.07) 45%, rgba(255,255,255,0) 100%);
  transform:rotate(12deg); animation:csSweep 9s ease-in-out infinite; }
@keyframes csSweep{ 0%{ left:-45%; opacity:0; } 12%{ opacity:1; } 55%{ left:105%; opacity:0; } 100%{ left:105%; opacity:0; } }

.cs-loader{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(14px,2vw,24px); align-items:center;
  max-width:620px; margin:1.25rem auto .2rem; text-align:left; }

/* the charging halo */
.cs-orb{ position:relative; width:106px; height:106px; display:grid; place-items:center; }
.cs-chargeprog{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); }
.cs-chargetrack{ fill:none; stroke:rgba(255,255,255,.13); stroke-width:2.4; stroke-linecap:round; stroke-dasharray:66.2 6; }
.cs-chargefill{ fill:none; stroke:url(#csChargeGrad); stroke-width:3.2; stroke-linecap:round;
  stroke-dasharray:289; stroke-dashoffset:289; animation:csCharge 20s linear infinite;
  filter:drop-shadow(0 0 6px rgba(0,212,255,.6)); }
@keyframes csCharge{ 0%{ stroke-dashoffset:289; } 96%{ stroke-dashoffset:0; } 100%{ stroke-dashoffset:0; } }

/* the isometric tile, floating inside it */
.cs-mini{ perspective:600px; display:grid; place-items:center; }
.cs-mini3d{ position:relative; width:58px; height:58px; transform-style:preserve-3d;
  animation:csFloat 6s ease-in-out infinite; }
@keyframes csFloat{
  0%,100%{ transform:rotateX(56deg) rotateZ(-45deg) translateZ(0); }
  50%{ transform:rotateX(56deg) rotateZ(-45deg) translateZ(9px); }
}
.cs-mini3d > span{ position:absolute; inset:0; border-radius:14px; display:block; }
.cs-minifloor{ transform:translateZ(-18px) scale(1.05); background:radial-gradient(closest-side, rgba(0,0,0,.7), rgba(0,0,0,0) 72%); filter:blur(7px); }
.cs-miniglow{ transform:translateZ(-8px) scale(1.06); background:linear-gradient(135deg,#ff8a6b,#c86ef0 46%,#5fd3f0);
  filter:blur(13px); opacity:.5; }
.cs-miniedge{ background:linear-gradient(135deg,#ff7d5c,#c86ef0 46%,#5fd3f0); opacity:.92; }
.cs-mini3d > .cs-miniedge:nth-child(3){ transform:translateZ(1.05px); }
.cs-mini3d > .cs-miniedge:nth-child(4){ transform:translateZ(2.10px); }
.cs-mini3d > .cs-miniedge:nth-child(5){ transform:translateZ(3.15px); }
.cs-mini3d > .cs-miniedge:nth-child(6){ transform:translateZ(4.20px); }
.cs-mini3d > .cs-miniedge:nth-child(7){ transform:translateZ(5.25px); }
.cs-mini3d > .cs-miniedge:nth-child(8){ transform:translateZ(6.30px); }
.cs-mini3d > .cs-miniedge:nth-child(9){ transform:translateZ(7.35px); }
.cs-mini3d > .cs-miniedge:nth-child(10){ transform:translateZ(8.40px); }
.cs-mini3d > .cs-miniedge:nth-child(11){ transform:translateZ(9.45px); }
.cs-mini3d > .cs-miniedge:nth-child(12){ transform:translateZ(10.50px); }
.cs-mini3d > .cs-miniedge:nth-child(13){ transform:translateZ(11.55px); }
.cs-mini3d > .cs-miniedge:nth-child(14){ transform:translateZ(12.60px); }
.cs-mini3d .cs-miniface{ transform:translateZ(14px); overflow:hidden;
  background:linear-gradient(155deg,#1b2540 0%,#0d1526 58%,#090f1c 100%); border:1px solid rgba(255,255,255,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), inset 0 -12px 22px rgba(0,0,0,.45); }
.cs-mini3d .cs-miniface::after{ content:""; position:absolute; inset:0; border-radius:14px; pointer-events:none;
  background:linear-gradient(140deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.03) 34%, rgba(255,255,255,0) 60%); }
.cs-miniface .cs-miniicon{ position:absolute; top:50%; left:50%; width:50%; height:auto;
  transform:translate(-50%,-50%) scale(.86); opacity:0; animation:csIcon 20s cubic-bezier(.22,1,.36,1) infinite; }
.cs-miniface .cs-miniicon:nth-child(1){ animation-delay:0s; }
.cs-miniface .cs-miniicon:nth-child(2){ animation-delay:-15s; }
.cs-miniface .cs-miniicon:nth-child(3){ animation-delay:-10s; }
.cs-miniface .cs-miniicon:nth-child(4){ animation-delay:-5s; }
@keyframes csIcon{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(.84) rotate(-9deg); }
  2.4%{ opacity:1; transform:translate(-50%,-50%) scale(1) rotate(0deg); }
  25%{ opacity:1; transform:translate(-50%,-50%) scale(1) rotate(0deg); }
  27.4%{ opacity:0; transform:translate(-50%,-50%) scale(.92) rotate(9deg); }
  100%{ opacity:0; transform:translate(-50%,-50%) scale(.84) rotate(-9deg); }
}

/* the words, changing with it */
.cs-lines{ position:relative; display:grid; min-width:0; min-height:86px; align-content:center; }
.cs-lines .cs-status{ display:inline-flex; align-items:center; gap:.4rem; margin-bottom:.55rem;
  font-size:.63rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#9fe4f7; }
.cs-lines .cs-status i{ width:6px; height:6px; border-radius:50%; background:#00D4FF; animation:csPulse 1.8s ease-out infinite; }
.cs-line{ grid-area:2 / 1; opacity:0; transform:translateY(7px);
  animation:csRot 20s cubic-bezier(.22,1,.36,1) infinite; }
.cs-lines .cs-line:nth-of-type(1){ animation-delay:0s; }
.cs-lines .cs-line:nth-of-type(2){ animation-delay:-15s; }
.cs-lines .cs-line:nth-of-type(3){ animation-delay:-10s; }
.cs-lines .cs-line:nth-of-type(4){ animation-delay:-5s; }
@keyframes csRot{
  0%{ opacity:0; transform:translateY(7px); }
  2.4%{ opacity:1; transform:translateY(0); }
  25%{ opacity:1; transform:translateY(0); }
  27.4%{ opacity:0; transform:translateY(-7px); }
  100%{ opacity:0; transform:translateY(7px); }
}
.cs-line h3{ color:#fff; font-size:1rem; font-weight:700; margin:0 0 .28rem; letter-spacing:-.015em; }
.cs-line p{ color:rgba(255,255,255,.72); font-size:.85rem; line-height:1.48; margin:0; }
.cs-loader:hover .cs-line, .cs-loader:hover .cs-miniicon,
.cs-loader:hover .cs-chargefill, .cs-loader:hover .cs-mini3d{ animation-play-state:paused; }
.cs-when{ margin:1.35rem auto .2rem; font-size:.84rem; }

@media (max-width:720px){
  .cs-loader{ grid-template-columns:auto minmax(0,1fr); gap:14px; max-width:100%; }
  .cs-orb{ width:90px; height:90px; }
  .cs-mini3d{ width:50px; height:50px; animation:none; transform:rotateX(56deg) rotateZ(-45deg); }
  .cs-minifloor{ filter:none; opacity:.55; }
  .cs-miniglow{ filter:none; opacity:.28; }
  .cs-lines{ min-height:118px; }
  .cs-line h3{ font-size:.93rem; }
  .cs-line p{ font-size:.81rem; }
  .cs-when{ margin-top:1.15rem; }
  .cs-band::after{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .cs-mini3d, .cs-miniicon, .cs-line, .cs-chargefill, .cs-status i{ animation:none; }
  .cs-miniicon:first-child, .cs-line:first-of-type{ opacity:1; transform:translate(-50%,-50%); }
  .cs-line:first-of-type{ transform:none; }
  .cs-chargefill{ stroke-dashoffset:72; }
  .cs-band::after{ display:none; }
}

/* the band itself, tightened up */
.cs-band{ padding:clamp(1.9rem,3.4vw,3rem) clamp(1.4rem,3vw,2.6rem); }
.cs-band .cs-pill{ padding:.34rem .9rem; font-size:.7rem; }
.cs-band h2{ font-size:clamp(1.55rem,3.1vw,2.15rem); margin:.85rem 0 .5rem; }
.cs-band > p{ font-size:.95rem; max-width:520px; }
.cs-band .firm-notice{ margin:1.05rem auto 0; max-width:620px; padding:.8rem 1rem; }
.cs-band .firm-notice > svg{ width:19px; height:19px; }
.cs-band .firm-notice strong{ font-size:.89rem; }
.cs-band .firm-notice span{ font-size:.85rem; line-height:1.5; }
.cs-band .cs-note:not(.cs-when){ font-size:.86rem; margin:1.1rem 0 1rem; }
@media (max-width:720px){
  .cs-band{ padding:2rem 1.15rem; }
  .cs-band h2{ font-size:1.42rem; }
  .cs-band > p{ font-size:.89rem; }
}