/*
 * Home Page V3 – page styles.
 * Loaded only on the "Home Page V3" template (page-templates/home-v3.php).
 * The navbar, mobile menu, mega-menu and footer rules from the static build were removed:
 * the page uses the theme's global header.php / footer.php.
 */

:root{
  --pad: clamp(22px, 7vw, 132px);
  --ink: #07203a;
  --ink-primary: #1A181B;   /* EBR foreground-primary */
  --ink-soft: #1d3a55;
  --abyss: #000;
  --cyan: #5ee6ff;
  --display: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --body: "Poppins", "Helvetica Neue", Arial, sans-serif;
}

/* base reset – scoped to this page's content so the global header and footer are untouched */
:where(#hero, #main, #demoModal), :where(#hero, #main, #demoModal) *{box-sizing:border-box;margin:0;padding:0}
:where(#hero, #main, #demoModal) :is(h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dt,dd,figure,blockquote,pre,label,legend,button,input){margin:0;padding:0}
:where(#hero, #main, #demoModal) hr{opacity:1}
:where(#hero, #main, #demoModal){color:var(--ink);font-family:var(--body);line-height:normal;-webkit-font-smoothing:antialiased}
:where(#hero, #main, #demoModal) a{color:inherit;text-decoration:none}
html:has(> body.mw-home-page){-webkit-text-size-adjust:100%;background:var(--surface-white,#FFFFFF);overflow-x:clip;overscroll-behavior-x:none}   /* phones: stop sideways drift; clip, unlike hidden, keeps position:sticky working */
body.mw-home-page{margin:0;background:var(--surface-white,#FFFFFF);overflow-x:clip;-webkit-font-smoothing:antialiased}

/* ───────── design tokens and buttons (from the EBR product page) ───────── */
:root{
  --mareana-primary:#4361EE;--mareana-secondary:#8EA0F5;--mareana-cyan:#4CC9F0;--accent-success:#42EAD4;--accent-danger:#F94E9B;
  --surface-white:#FFFFFF;--surface-hover:#F5F6FF;--foreground-primary:#1A181B;--foreground-white:#FFFFFF;--mareana-border:#E7E7E7;
  --glass-bg-default:rgba(255,255,255,0.08);--glass-bg-scrolled:rgba(10,10,10,0.7);--glass-border:rgba(255,255,255,0.05);--glass-border-scrolled:rgba(255,255,255,0.15);
  --on-dark-90:rgba(255,255,255,0.85);
  --bg-gradient:linear-gradient(225deg,#4361EE 0%,#8EA0F5 100%);
  --fs-14:14px;--fs-15:15px;--fs-16:16px;
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;
  --radius-md:8px;--radius-lg:12px;--radius-pill:100px;--radius-circle:50%;
  --shadow-nav-scrolled:0 10px 40px rgba(0,0,0,0.5);
  --ebr-ease:cubic-bezier(0.4,0,0.2,1);--dur-fast:0.15s;--dur-base:0.2s;--dur-mid:0.3s;--dur-slow:0.4s;
  --ease:cubic-bezier(.16,1,.3,1);
}
.btn-pill{font-family:inherit;font-weight:400;line-height:1.5}
/* BUTTONS */
.btn-pill{border: none; border-radius: var(--radius-pill);
  padding: 6px 6px 6px var(--sp-5);
  font-size: var(--fs-16); cursor: pointer; text-decoration: none;
  position: relative; overflow: hidden; gap: var(--sp-4);
  display: inline-flex; align-items: center;}
.btn-text-inner{position: relative; height: 1.2em; overflow: hidden;
  display: flex; flex-direction: column; line-height: 1.2;}
.btn-text-main, .btn-text-hover{display: block; height: 100%;
  transition: transform var(--dur-slow) var(--ebr-ease);}
.btn-pill:hover .btn-text-main,
.btn-pill:hover .btn-text-hover{transform: translateY(-100%);}
.btn-pill .arrow-circle{width: 44px; height: 44px; border-radius: var(--radius-circle);
  transition: all var(--dur-mid); position: relative;
  display: flex; align-items: center; justify-content: center;}
.arrow-inner-wrapper{display: flex; gap: var(--sp-6); transform: translateX(-22px);
  transition: transform var(--dur-slow) var(--ebr-ease);}
.arrow-inner-wrapper svg{flex-shrink: 0;}
.btn-pill:hover .arrow-inner-wrapper{transform: translateX(22px);}
.btn-primary{background: var(--bg-gradient); color: var(--foreground-white);}
.btn-primary .arrow-circle{background: var(--surface-white);}
.btn-primary .arrow-circle svg path{stroke: var(--foreground-primary);}
.btn-white{background: var(--surface-white); color: var(--foreground-primary);}
.btn-white .arrow-circle{background: var(--bg-gradient);}
.btn-white .arrow-circle svg path{stroke: var(--foreground-white);}

/* Core bug: hidden second arrow bleeds over the label. */
.btn-pill .arrow-circle{overflow: hidden;}
/* Core bug: the 52px arrow track (14 + 24 + 14) needs ±19px, not ±22px, to centre each arrow in the 44px circle. */
.arrow-inner-wrapper{transform: translateX(-19px);}
.btn-pill:hover .arrow-inner-wrapper{transform: translateX(19px);}

/* ───────── closing CTA base ───────── */
section#book-demo{position:relative;z-index:11;isolation:isolate;overflow:hidden;background:#03040a;color:#fff;padding:0;font-family:var(--display)}
#book-demo h2{margin:0;max-width:14em;font:500 clamp(30px,4vw,44px)/1.4 var(--display);letter-spacing:-.01em;color:#fff;text-wrap:balance}   /* same as the other section titles */
.cta-lead{margin:18px 0 0;max-width:34em;font:400 clamp(.98rem,1.2vw,1.12rem)/1.6 var(--display);color:rgba(255,255,255,.62)}
.cta-btn{margin-top:32px}

/* ───────── Book a demo modal (layout after mareana.com/batch-genealogy: visual pane + short form) ───────── */
.dm{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:20px;visibility:hidden;opacity:0;transition:opacity .25s var(--ebr-ease),visibility 0s .25s;font-family:var(--display)}
.dm.on{visibility:visible;opacity:1;transition:opacity .25s var(--ebr-ease)}
.dm-bd{position:absolute;inset:0;background:rgba(3,4,10,.72)}
.dm-card{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;padding:10px;width:min(1240px,100%);max-height:calc(100vh - 40px);overflow:auto;background:#fff;color:var(--foreground-primary);border-radius:24px;transform:translateY(14px) scale(.985);transition:transform .35s var(--ease)}
.dm.on .dm-card{transform:none}
.dm-visual{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:600px;padding:28px clamp(20px,2.2vw,28px);border-radius:18px;background:linear-gradient(180deg,#18243d 0%,#0c1424 48%,#080b14 100%);text-align:center;color:#fff}
.dm-glow{display:none}
.dm-rays{position:absolute;left:0;top:0;width:100%;height:92%;z-index:-1;pointer-events:none;-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}
.dm-shot{position:relative;width:90%;padding:8px;border-radius:18px;--mx:70%;--my:0%;
    background:linear-gradient(150deg,rgba(255,255,255,.16),rgba(255,255,255,.04) 45%,rgba(255,255,255,.08));
    -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 24px 48px -20px rgba(0,0,0,.75)}
.dm-shot::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;     /* glass hairline: catches the light at the top-right */
    background:linear-gradient(140deg,rgba(255,255,255,.18),rgba(255,255,255,.06) 40%,rgba(255,255,255,.55) 100%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.dm-shot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;      /* sheen that follows the pointer */
    background:radial-gradient(260px 180px at var(--mx) var(--my),rgba(200,220,255,.20),transparent 70%);opacity:.9;transition:opacity .4s}
.dm-shot-in{position:relative;z-index:1}
.dm-shot-in{aspect-ratio:1280/937;border-radius:12px;overflow:hidden;background:#07051A;box-shadow:inset 0 0 0 1px #1C1A3C}   /* a solid dark card inside the glass frame */
.dm-shot-in img{display:block;width:100%;height:100%;object-fit:contain}
.dm-slides{position:relative;height:100%}
.dm-slide{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:12px 20px 30px;text-align:center;opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s ease;pointer-events:none}
.dm-slide.on{opacity:1;transform:none}
.dm-ui{width:calc(100% - 20px);margin:0 0 8px}   /* no box: the screen sits directly on the dark card */
.dm-ui svg{display:block;width:100%;height:auto}
.dm-slide .a-fade,.dm-slide .a-fadeS,.dm-slide .a-rise,.dm-slide .a-pop{opacity:0}
.dm-slide.on .a-fade{animation:dmFade .5s var(--d,0s) ease both}
.dm-slide.on .a-fadeS{animation:dmFade 1s .9s ease both}
.dm-slide.on .a-rise{animation:dmRise .6s var(--d,0s) cubic-bezier(.16,1,.3,1) both}
.dm-slide.on .a-pop{transform-box:fill-box;transform-origin:center;animation:dmPop .5s var(--d,0s) cubic-bezier(.34,1.56,.64,1) both}
.dm-slide .a-draw{stroke-dasharray:var(--l,200);stroke-dashoffset:var(--l,200)}
.dm-slide.on .a-draw{animation:dmDraw 1.1s var(--t,.2s) ease forwards}
.dm-slide .a-grow{transform-box:fill-box;transform-origin:left center;transform:scaleX(0)}
.dm-slide.on .a-grow{animation:dmGrow 1.2s .6s ease forwards}
.dm-slide.on .a-scan{animation:dmScan 2.4s .3s ease-in-out infinite}
.dm-slide .a-reveal{clip-path:inset(0 100% 0 0)}
.dm-slide.on .a-reveal{animation:dmReveal 3s ease-in-out infinite alternate}
.dm-slide.on .a-scanx{animation:dmScanX 3s ease-in-out infinite alternate}
@keyframes dmReveal{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes dmScanX{from{transform:translateX(0)}to{transform:translateX(352px)}}
@keyframes dmFade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes dmRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes dmPop{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:none}}
@keyframes dmDraw{to{stroke-dashoffset:0}}
@keyframes dmGrow{to{transform:scaleX(1)}}
@keyframes dmScan{0%{transform:translateY(0);opacity:0}15%{opacity:.9}85%{opacity:.9}100%{transform:translateY(144px);opacity:0}}
@media (prefers-reduced-motion:reduce){.dm-slide .a-reveal{clip-path:none;animation:none!important}.dm-slide .a-scanx{display:none}.dm-slide .a-fade,.dm-slide .a-fadeS,.dm-slide .a-rise,.dm-slide .a-pop{opacity:1;animation:none!important}.dm-slide .a-draw{stroke-dashoffset:0;animation:none!important}.dm-slide .a-grow{transform:none;animation:none!important}.dm-slide .a-scan{display:none}}
.dm-slide b{font:500 18px/1.25 var(--display);color:#fff}
.dm-slide span{font:400 11.5px/1.45 var(--display);color:rgba(255,255,255,.62);max-width:88%}
.dm-dots{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:8px}
.dm-dot{width:7px;height:7px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.28);transition:background .3s,transform .3s}
.dm-dot.on{background:#8EA0F5;transform:scale(1.25)}
@media (prefers-reduced-motion:reduce){.dm-slide{transition:none}}
.dm-vt{max-width:80%;margin:34px auto 0;font:500 22px/1.2 var(--display);letter-spacing:-.4px;color:#fff}
.dm-vd{max-width:92%;margin:14px auto 16px;font-size:13px;line-height:1.9;color:rgba(255,255,255,.6)}
.dm-pills{display:inline-flex;max-width:100%;padding:6px 8px;overflow-x:auto;border-radius:100px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1)}
.dm-pills span{flex:0 0 auto;padding:6px 16px;border-right:1px solid rgba(255,255,255,.15);font-size:12px;letter-spacing:.5px;white-space:nowrap;color:rgba(255,255,255,.85)}
.dm-pills span:last-child{border-right:0}
.dm-pane{display:flex;flex-direction:column;justify-content:center;padding:clamp(36px,4vw,56px) clamp(28px,4vw,56px)}
.dm-x{position:absolute;top:16px;right:16px;width:36px;height:36px;border:0;border-radius:50%;background:var(--surface-hover);color:var(--foreground-primary);display:grid;place-items:center;cursor:pointer;transition:background var(--dur-base)}
.dm-x:hover{background:#e7eafd}
.dm-pane h2{font:500 clamp(24px,2.4vw,30px)/1.25 var(--display);letter-spacing:-.9px;text-align:center}
.dm-sub{margin:10px 0 28px;text-align:center;font-size:15px;line-height:1.55;color:#6b6972}
.dm-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.dm-f{display:block;margin-bottom:16px}
.dm-f span{display:block;margin-bottom:8px;font-size:14px;font-weight:500}
.dm-f i{font-style:normal;color:var(--accent-danger)}
.dm-f input{width:100%;height:48px;padding:0 20px;border:1px solid var(--mareana-border);border-radius:var(--radius-pill);font:400 15px var(--display);color:var(--foreground-primary);background:#fff;outline:0;transition:border-color var(--dur-base),box-shadow var(--dur-base)}
.dm-f input:focus{border-color:var(--mareana-primary);box-shadow:0 0 0 4px rgba(67,97,238,.14)}
.dm-f.bad input{border-color:var(--accent-danger);box-shadow:0 0 0 4px rgba(249,78,155,.12)}
.dm-f small{display:none;margin-top:6px;padding-left:20px;font-size:12.5px;color:var(--accent-danger)}
.dm-f.bad small{display:block}
.dm-go{width:100%;justify-content:center;margin-top:8px;padding:0 20px;height:56px;cursor:pointer}
.dm-fine{margin-top:18px;text-align:center;font-size:12.5px;line-height:1.55;color:#6b6972}
.dm-fine a{color:var(--mareana-primary);text-decoration:underline}
.dm-done{display:none;text-align:center}
.dm.sent .dm-form{display:none}.dm.sent .dm-done{display:block}
.dm-done .tick{width:56px;height:56px;margin:0 auto 20px;border-radius:50%;background:var(--bg-gradient);display:grid;place-items:center}
.dm-done p{margin-top:10px;font-size:15px;line-height:1.55;color:#6b6972}
/* ───────── HubSpot form (embed v2, created in #dmHubspot) – styled to match the built-in demo form ───────── */
.dm-hs{min-height:220px}
#dmHubspot .hs-form{font-family:var(--display);color:var(--foreground-primary)}
#dmHubspot fieldset{max-width:none!important;margin:0;padding:0;border:0}
#dmHubspot fieldset.form-columns-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
#dmHubspot fieldset .hs-form-field,#dmHubspot fieldset.form-columns-1 .hs-form-field,#dmHubspot fieldset.form-columns-2 .hs-form-field{float:none!important;width:100%!important;padding:0!important}
#dmHubspot fieldset .input{margin:0!important}
#dmHubspot .hs-form-field{margin-bottom:16px}
#dmHubspot .hs-form-field>label{display:block;margin-bottom:8px;font:500 14px/1.4 var(--display);color:var(--foreground-primary)}
#dmHubspot .hs-form-required{margin-left:2px;color:var(--accent-danger)}
#dmHubspot .hs-field-desc{margin:-4px 0 8px;font-size:12.5px;line-height:1.5;color:#6b6972}
#dmHubspot .hs-input:not([type=checkbox]):not([type=radio]){display:block;width:100%!important;height:48px;padding:0 20px;border:1px solid var(--mareana-border);border-radius:var(--radius-pill);font:400 15px var(--display);color:var(--foreground-primary);background-color:#fff;outline:0;box-shadow:none;-webkit-appearance:none;appearance:none;transition:border-color var(--dur-base,.2s),box-shadow var(--dur-base,.2s)}
#dmHubspot textarea.hs-input{height:auto!important;min-height:112px;padding:14px 20px;border-radius:20px;resize:vertical}
#dmHubspot select.hs-input{padding-right:44px!important;cursor:pointer;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231A181B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 20px center}
#dmHubspot .hs-input::placeholder{color:#a3a1a8}
#dmHubspot .hs-input:not([type=checkbox]):not([type=radio]):focus{border-color:var(--mareana-primary);box-shadow:0 0 0 4px rgba(67,97,238,.14)}
#dmHubspot .hs-input.invalid.error,#dmHubspot .hs-input.error{border-color:var(--accent-danger)!important;box-shadow:0 0 0 4px rgba(249,78,155,.12)!important}
#dmHubspot .hs_error_rollup{display:none}      /* the per-field messages already say what is missing */
/* checkboxes / radios (consent, multi-select) */
#dmHubspot .inputs-list{margin:0;padding:0;list-style:none}
#dmHubspot .inputs-list li{margin:0 0 8px}
#dmHubspot .inputs-list label,#dmHubspot .hs-form-booleancheckbox-display{display:flex;align-items:flex-start;gap:10px;margin:0;font-size:13.5px;line-height:1.5;font-weight:400;color:var(--foreground-primary);cursor:pointer}
#dmHubspot input[type=checkbox],#dmHubspot input[type=radio]{flex:0 0 auto;width:18px;height:18px;margin:2px 0 0;accent-color:var(--mareana-primary);cursor:pointer}
#dmHubspot ul.hs-error-msgs{margin:6px 0 0;padding:0 0 0 20px;list-style:none}
#dmHubspot ul.hs-error-msgs li{margin:0}
#dmHubspot ul.hs-error-msgs label,#dmHubspot ul.hs-error-msgs .hs-error-msg{display:block;margin:0;font-size:12.5px;line-height:1.4;font-weight:400;color:var(--accent-danger);cursor:default}
/* rich text and HubSpot's own consent block */
#dmHubspot .hs-richtext,#dmHubspot .legal-consent-container,#dmHubspot .legal-consent-container p{font-size:12.5px;line-height:1.55;color:#6b6972}
#dmHubspot .hs-richtext p{margin:0 0 10px}
#dmHubspot .legal-consent-container{margin-top:4px}
#dmHubspot .legal-consent-container .hs-form-booleancheckbox-display>span{margin:0!important}
#dmHubspot .hs-richtext a,#dmHubspot .legal-consent-container a{color:var(--mareana-primary);text-decoration:underline}
/* submit: the gradient pill of the built-in form */
#dmHubspot .hs-submit{margin-top:8px}
#dmHubspot .hs-submit .actions{margin:0;padding:0}
#dmHubspot .hs-button,#dmHubspot input[type=submit]{display:block;width:100%;height:56px;margin:0;padding:0 20px;border:0;border-radius:var(--radius-pill);background:var(--bg-gradient);color:var(--foreground-white);font:400 16px/1 var(--display);text-align:center;cursor:pointer;box-shadow:none;-webkit-appearance:none;appearance:none;transition:filter var(--dur-base,.2s),transform var(--dur-base,.2s)}
#dmHubspot .hs-button:hover,#dmHubspot input[type=submit]:hover{filter:brightness(1.08)}
#dmHubspot .hs-button:active{transform:translateY(1px)}
#dmHubspot .hs-button:focus-visible{outline:0;box-shadow:0 0 0 4px rgba(67,97,238,.24)}
#dmHubspot .hs-button[disabled]{opacity:.6;cursor:default}
/* thank-you message after submit */
#dmHubspot .submitted-message{padding:24px 0;text-align:center;font-size:15px;line-height:1.55;color:#6b6972}
#dmHubspot .submitted-message p{margin:0 0 10px}
#dmHubspot .submitted-message h1,#dmHubspot .submitted-message h2,#dmHubspot .submitted-message h3{margin:0 0 10px;font:500 24px/1.25 var(--display);letter-spacing:-.6px;color:var(--foreground-primary)}
.dm-pane:has(.submitted-message) .dm-fine{display:none}   /* hide the consent line once the form is sent */
@media (max-width:480px){#dmHubspot fieldset.form-columns-2{grid-template-columns:1fr;gap:0}}
/* first name and last name side by side, even when the HubSpot form has them on separate rows */
#dmHubspot form.hs-form,#dmHubspot form.mw-hs-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}
#dmHubspot form.hs-form>*,#dmHubspot form.mw-hs-grid>*{grid-column:1/-1;min-width:0}
#dmHubspot form>fieldset.mw-hs-half,#dmHubspot form.hs-form>fieldset:has(>.hs_firstname):not(:has(>.hs_lastname)),#dmHubspot form.hs-form>fieldset:has(>.hs_lastname):not(:has(>.hs_firstname)){grid-column:auto;width:auto!important;max-width:none!important}
@media (max-width:480px){#dmHubspot form>fieldset,#dmHubspot form>fieldset.mw-hs-half{grid-column:1/-1}}
html.dm-lock{overflow:hidden}
@media (max-width:820px){.dm-card{grid-template-columns:1fr}.dm-visual{display:none}.dm-pane{padding-top:64px}.dm-row{grid-template-columns:1fr;gap:0}}

/* ─────────── HERO (WebOS design system: tokens + mw-text-display-52 scale) ─────────── */
:root{--black: #000000; --sp-10: 40px; --sp-16: 64px; --fs-hero: clamp(36px, 5vw, 52px);}   /* WebOS tokens this page did not define yet */
.mw-hero{min-height: 100vh; min-height: 100svh; color: var(--foreground-white);
  /* your colours (#F5F7FA → #07051A, same positions), joined by a smooth curve in OKLab instead of straight segments, so no stop shows as a line */
  background: linear-gradient(180deg, #FFFFFF 0, #FFFFFF 448px, #FDFEFF 454px, #F7FAFF 461px, #EEF3FF 467px, #E4EAFF 474px, #D6DFFD 480px, #C6D3FA 486px, #B5C3F7 493px, #A3B4F2 499px, #8FA2EC 506px, #798EE5 512px, #6779DD 518px, #5668D1 525px, #4959C0 531px, #3F4CB0 538px, #3641A0 544px, #2E3791 550px, #282E81 557px, #222772 563px, #1D2064 570px, #1A1B56 576px, #17164A 582px, #14133F 589px, #111037 595px, #0F0E30 602px, #0E0C2B 608px, #0D0B26 614px, #0C0A23 621px, #0B0920 627px, #0A071E 634px, #09061D 640px, #08061B 646px, #07051A 653px, #07051A 896px, #07051A 100%);
  position: relative; isolation: isolate;
  display: grid; place-items: start center; text-align: center; padding: calc(112px + var(--sp-16)) 80px 80px;}   /* side padding matches .header-nav > div */
@media (max-width:1200px){.mw-hero{padding-inline: 40px;}}
@media (max-width:992px){.mw-hero{padding-inline: 24px;}}
@media (max-width:576px){.mw-hero{padding-inline: 16px;}}
.mw-hero::before{content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .06; -webkit-mask-image: linear-gradient(180deg, transparent 653px, #000 740px); mask-image: linear-gradient(180deg, transparent 653px, #000 740px);   /* fine grain dithers any leftover 8-bit banding */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.mw-hero-inner{position: relative; z-index: 1; max-width: 1240px; display: flex; flex-direction: column; align-items: center; gap: var(--sp-10);}
.mw-hero-title{margin: 0; max-width: 1100px; font-family: "Poppins", sans-serif; font-size: var(--fs-hero);
  font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; color: var(--foreground-primary); text-wrap: balance;}
.mw-hero-sub{margin: calc(var(--sp-10) * -.5) 0 0; max-width: 680px; font-size: clamp(16px, 1.6vw, 18px); font-weight: 400; line-height: 1.6; color: rgba(26,24,27,.7); text-wrap: balance;}

/* ─────────── HERO APP CARD: one lot followed through the record (full content, glass + light path) ─────────── */
:root{--on-dark-15: rgba(255,255,255,0.15); --on-dark-50: rgba(255,255,255,0.50); --on-dark-70: rgba(255,255,255,0.70); --radius-2xl: 16px; --radius-5xl: 24px;}
.mw-hero-inner{width: 100%; max-width: 1280px;}
.mw-box{width: min(1280px, 100%); margin-top: 72px; padding: 8px; border-radius: var(--radius-5xl);   /* glass bezel */
  background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.05));
  border: 1px solid rgba(255,255,255,0.24); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%);}
.mw-box-in{--mw-pad: clamp(20px, 3vw, 40px); padding: var(--mw-pad); border-radius: calc(var(--radius-5xl) - 8px);   /* dark panel inside the bezel */
  background: #07051A;   /* flat and solid: no glow, no sheen */
  border: 1px solid #1C1A3C;}
.mw-app{display: grid; grid-template-columns: minmax(0, 1fr) 300px; text-align: left; font-family: "Poppins", sans-serif; color: var(--foreground-white);}
.mw-main{min-width: 0; padding-right: 24px;}
.mw-head{display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 28px;}
.mw-ttl{display: block; font-size: clamp(20px, 2vw, 26px); font-weight: 500; line-height: 1.3; letter-spacing: -0.04em;}
.mw-sub{display: block; margin-top: 2px; font-size: 13px; line-height: 1.5; color: var(--on-dark-70);}
.mw-search{display: inline-flex; align-items: center; gap: 28px; padding: 10px 14px; border-radius: 12px; border: 1px solid #2E2C60; background: #121038; font-size: 13px; color: var(--on-dark-50); white-space: nowrap;}
.mw-search kbd{font: inherit; font-size: 11px; padding: 2px 7px; border-radius: 6px; background: rgba(255,255,255,0.1); color: var(--on-dark-70);}
.mw-trace{position: relative; width: 100%; aspect-ratio: 900 / 520; container-type: inline-size;}
.mw-wires{position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0;}
.mw-wires path{fill: none; stroke-linecap: round; stroke-linejoin: round;}
.mw-track path{stroke: rgba(255,255,255,0.09); stroke-width: 1.25;}
.mw-lit path{stroke: url(#mwWire); stroke-width: 1.75;}
.mw-lab{position: absolute; z-index: 1; font-size: clamp(9.5px, 1.05cqw, 10.5px); font-weight: 500; line-height: 1.4; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-dark-50); white-space: nowrap;}
.mw-lab.site{color: var(--on-dark-50); letter-spacing: 0.14em;}
.mw-n{position: absolute; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: 2px; text-align: left;
  padding: clamp(8px, 1.25cqw, 12px) clamp(10px, 1.4cqw, 14px); border-radius: 10px;
  background: #121038;
  border: 1px solid #2E2C60;
  transition: border-color .5s var(--ease, ease);}
.mw-n.dim{background: #0C0A2C; border-color: #1E1C46;}
.mw-n.dim .mw-t{color: var(--on-dark-70);}
.mw-n.dashed{border-style: dashed;}
.mw-n.is-lit:not(.dim){border-color: rgba(255,255,255,0.42);}
.mw-n.key.is-lit{border-color: rgba(255,255,255,0.75);}
.mw-o{display: block; font-size: clamp(9.5px, 1.05cqw, 10.5px); font-weight: 500; line-height: 1.4; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-dark-50);}
.mw-t{display: block; font-size: clamp(11.5px, 1.45cqw, 14px); font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; color: var(--foreground-white);}
.mw-c{display: block; font-size: clamp(10px, 1.2cqw, 11.5px); font-weight: 400; line-height: 1.45; color: var(--on-dark-70);}
.mw-lite{color: #FFFFFF;}
.n-lB .mw-t{font-size: clamp(16px, 2cqw, 19px); letter-spacing: -0.03em; line-height: 1.15; color: #FFFFFF;}
.mw-chart{width: 100%; height: auto; margin: 6px 0 4px; overflow: visible;}
.mw-chart line{stroke: var(--on-dark-50); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke;}
.mw-chart path{fill: none; stroke: #FFFFFF; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke;}
.mw-dot{fill: none; stroke: var(--foreground-white); stroke-width: 1.5; vector-effect: non-scaling-stroke;}
.mw-lim{margin-bottom: 6px;}
.mw-sk{display: grid; gap: 8px; margin: 8px 0 8px;}
.mw-sk i{display: block; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.12);}
.mw-sk i:nth-child(2n){width: 70%;} .mw-sk i:nth-child(4){width: 45%;}
.mw-side{margin: calc(6px - var(--mw-pad)) calc(6px - var(--mw-pad)) calc(6px - var(--mw-pad)) 0; padding: 6px; border-radius: var(--radius-2xl); border: 1px solid rgba(255,255,255,0.12);}   /* border-only box, 6px padding */
.mw-side-in{height: 100%; padding: 14px; display: flex; flex-direction: column;}
.mw-sh{padding-bottom: 20px;}
.mw-lot{display: block; margin-top: 8px; font-size: 28px; font-weight: 500; line-height: 1.2; letter-spacing: -0.04em; color: #FFFFFF;}
.mw-row{padding: 14px 0; border-top: 1px solid rgba(255,255,255,0.08);}
.mw-rt{display: block; margin-top: 4px; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,0.9);}
.mw-who{margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; gap: 12px;}
.mw-av{flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-danger); color: var(--foreground-primary); font-size: 12px; font-weight: 600;}
@media (min-width: 961px){
  .n-s1{left:0.00%;top:8.46%;width:20.00%;height:14.62%;}
  .n-s2{left:0.00%;top:25.38%;width:20.00%;height:14.62%;}
  .n-s3{left:0.00%;top:42.31%;width:20.00%;height:14.62%;}
  .n-s4{left:0.00%;top:59.23%;width:20.00%;height:14.62%;}
  .n-s5{left:0.00%;top:76.15%;width:20.00%;height:14.62%;}
  .n-lA{left:28.89%;top:22.12%;width:15.56%;height:12.31%;}
  .n-lB{left:28.89%;top:48.65%;width:15.56%;height:12.31%;}
  .n-lC{left:28.89%;top:74.81%;width:15.56%;height:12.31%;}
  .n-b115{left:53.33%;top:13.08%;width:16.67%;height:8.85%;}
  .n-b116{left:53.33%;top:23.85%;width:16.67%;height:8.85%;}
  .n-b117{left:53.33%;top:34.62%;width:16.67%;height:8.85%;}
  .n-b118{left:53.33%;top:55.00%;width:16.67%;height:8.85%;}
  .n-b120{left:53.33%;top:65.77%;width:16.67%;height:8.85%;}
  .n-b121{left:53.33%;top:76.54%;width:16.67%;height:8.85%;}
  .n-cpv{left:77.78%;top:8.46%;width:22.22%;height:36.54%;}
  .n-ann{left:77.78%;top:55.00%;width:22.22%;height:25.96%;}
  .mw-lab.c1{left:0.00%;top:0.00%;}
  .mw-lab.c2{left:28.89%;top:0.00%;}
  .mw-lab.c3{left:53.33%;top:0.00%;}
  .mw-lab.c4{left:77.78%;top:0.00%;}
  .mw-lab.s1{left:53.33%;top:9.23%;}
  .mw-lab.s2{left:53.33%;top:51.15%;}
}
@media (max-width: 1280px){
  .mw-app{grid-template-columns: minmax(0, 1fr);}
  .mw-main{padding-right: 0;}
  .mw-side{margin: 28px 0 0;}
  .mw-side-in{display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px;}
  .mw-sh{grid-column: 1 / -1;}
  .mw-who{grid-column: 1 / -1; margin-top: 0;}
}
@media (max-width: 960px){
  .mw-box{margin-top: 48px; max-width: 460px;}
  .mw-box-in{padding: 20px 14px;}
  .mw-trace{aspect-ratio: auto; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px;}
  .mw-wires{display: none;}
  .mw-lab{position: static; grid-column: 1 / -1; margin-top: 14px;}
  .mw-lab.s1,.mw-lab.s2{margin-top: 4px;}
  .mw-n{position: static; grid-column: span 6; padding: 12px 14px;}
  .n-s1,.n-s2,.n-s3,.n-s4{grid-column: span 3;}
  .n-b115,.n-b116,.n-b117,.n-b118,.n-b120,.n-b121{grid-column: span 2; padding: 10px 12px;}
  .mw-t{font-size: 14px;} .mw-c{font-size: 12px;} .mw-o,.mw-lab{font-size: 10.5px;} .n-lB .mw-t{font-size: 20px;}
  .mw-search{display: none;}
  .mw-side-in{display: flex;}
}
@media (prefers-reduced-motion: reduce){.mw-n{transition: none;}}

/* ─────────── SECTION 5: the record (ported from index-backup.html, on the hero's navy instead of black) ─────────── */
.mw-rec{position: relative; background: #FFFFFF; font-family: "Poppins", sans-serif; padding: 24px 80px 120px; --display: "Poppins", sans-serif;}
.mw-rec .mw-rec-in{position: relative;}
#record .rec-slot{box-shadow: 0 40px 80px -44px rgba(7,5,26,0.55);}
/* the data stream inside the One record box: two lines of record text, drifting, faded at the edges and under the title (from the build file) */
#record .rec-core{overflow: hidden;}
#record .rec-core h3, #record .rec-core p{position: relative; z-index: 1;}
#record .rec-fld{position: absolute; left: 4.2%; right: 4.2%; top: 7.7%; bottom: 7.7%; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%), radial-gradient(ellipse 39.6% 25% at 50% 55%, transparent 0, transparent 40%, #000 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%), radial-gradient(ellipse 39.6% 25% at 50% 55%, transparent 0, transparent 40%, #000 100%); mask-composite: intersect;}
#record .rec-fld span{position: absolute; left: calc(var(--u) * -45); white-space: pre; font: 400 calc(var(--u) * 9.1)/1 "Roboto Mono", ui-monospace, Consolas, monospace; color: rgba(202,216,255,0.2); animation: mwRecDrift 24s ease-in-out 2s infinite alternate;}
#record .rec-fld .t1{top: calc(var(--u) * 3);} #record .rec-fld .t2{bottom: calc(var(--u) * 1);}
#record .rec-fld .t2{animation-direction: alternate-reverse;}   /* the lower line drifts the other way */
@keyframes mwRecDrift{to{transform: translateX(calc(var(--u) * -63));}}

/* ─────────── SECTION 7: how it is built (from index-backup.html, on the hero's navy instead of black) ─────────── */
.mw-built{position: relative; isolation: isolate; overflow-x: clip; color: #FFFFFF; font-family: "Poppins", sans-serif; padding: 120px 80px 140px;
  background: radial-gradient(120% 60% at 50% 20%, rgba(67,97,238,0.14), transparent 70%), #07051A;}
.mw-built-in{position: relative; z-index: 1;}
.mw-built .mw-eyebrow{color: rgba(255,255,255,0.6);} .mw-built .mw-eyebrow i{background: #FFFFFF;}
.mw-built .mw-it{color: #FFFFFF;} .mw-built .mw-is{color: rgba(255,255,255,0.66);}
@media (max-width:1200px){.mw-built{padding-inline: 40px;}}
@media (max-width:992px){.mw-built{padding: 88px 24px 100px;}}
@media (max-width:576px){.mw-built{padding-inline: 16px;}}
.bt-win{position:relative;z-index:2;width:100%;display:grid;grid-template-columns:300px minmax(0,1fr);min-height:clamp(640px,52vw,720px);border-radius:32px;overflow:hidden;font-family:"Poppins",sans-serif;color:#fff;
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.bt-win{background:radial-gradient(120% 90% at 50% 0%,rgba(67,97,238,.16),transparent 60%),#07051A}
.bt-stage{position:relative}
.bt-halo{position:absolute;z-index:0;pointer-events:none;display:block}
.bt-win{z-index:2}
@media (prefers-reduced-motion:reduce){.bt-win::after{animation:none}}
.bt-k{margin:0;font:500 12px/16px "Poppins",sans-serif;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.bt-rail{position:relative;z-index:1;display:flex;flex-direction:column;padding:40px 0 30px;background:none}
.bt-rh{padding:0 28px 30px}
.bt-rh h3{margin:8px 0 0;font:500 28px/1.1 "Poppins",sans-serif;letter-spacing:-.8px;color:#fff}
.bt-rail ul{list-style:none;margin:0;padding:0}
.bt-rail li{border-top:1px solid rgba(255,255,255,.07)}
.bt-rail li:last-child{border-bottom:1px solid rgba(255,255,255,.07)}
.bt-rail button{all:unset;box-sizing:border-box;position:relative;display:grid;gap:4px;width:100%;padding:26px 28px 26px 32px;cursor:pointer;opacity:.7;transition:opacity .35s,background .35s}
.bt-rail button:hover{opacity:.95}
.bt-rail button::before{content:"";position:absolute;left:0;top:20px;bottom:20px;width:3px;border-radius:0 3px 3px 0;background:#8EA0F5;box-shadow:0 0 14px #4361EE;opacity:0;transition:opacity .35s}
.bt-rail button i{position:absolute;right:26px;top:30px;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.22);transition:background .3s,box-shadow .3s}
.bt-rail button.done i{background:#8EA0F5}
.bt-win[data-k="rel"] .bt-rail [data-k="rel"],.bt-win[data-k="lim"] .bt-rail [data-k="lim"],.bt-win[data-k="fld"] .bt-rail [data-k="fld"]{opacity:1;background:linear-gradient(90deg,rgba(67,97,238,.22),rgba(67,97,238,0))}
.bt-win[data-k="rel"] .bt-rail [data-k="rel"]::before,.bt-win[data-k="lim"] .bt-rail [data-k="lim"]::before,.bt-win[data-k="fld"] .bt-rail [data-k="fld"]::before{opacity:1}
.bt-win[data-k="rel"] .bt-rail [data-k="rel"] i,.bt-win[data-k="lim"] .bt-rail [data-k="lim"] i,.bt-win[data-k="fld"] .bt-rail [data-k="fld"] i{background:#fff;box-shadow:0 0 10px #fff}
.bt-rk{font:400 12.5px/16px "Poppins",sans-serif;color:rgba(255,255,255,.62)}
.bt-rv{font:500 17px/22px "Poppins",sans-serif;letter-spacing:-.01em;color:#fff}
.bt-rs{font:400 12.5px/16px "Poppins",sans-serif;color:rgba(255,255,255,.5)}
.bt-rf{margin:auto 0 0;padding:20px 26px 0;font:400 12.5px/1.5 "Poppins",sans-serif;color:rgba(255,255,255,.45)}
.bt-work{position:relative;z-index:1;display:grid;padding:44px 48px 40px;background:none}
.bt-pane{grid-area:1/1;display:flex;flex-direction:column;gap:32px;opacity:0;visibility:hidden;transition:opacity .45s cubic-bezier(.2,.8,.2,1),visibility 0s .45s}
.bt-win[data-k="rel"] .bt-pane[data-k="rel"],.bt-win[data-k="lim"] .bt-pane[data-k="lim"],.bt-win[data-k="fld"] .bt-pane[data-k="fld"]{opacity:1;visibility:visible;transition:opacity .45s cubic-bezier(.2,.8,.2,1),visibility 0s}
.bt-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding-bottom:30px;border-bottom:1px solid rgba(255,255,255,.08)}
.bt-kind{margin:0;font:400 14px/1 "Poppins",sans-serif;color:rgba(255,255,255,.62)}
.bt-val{margin:12px 0 6px;white-space:nowrap;font:500 clamp(30px,3.6vw,44px)/1.08 "Poppins",sans-serif;letter-spacing:-.03em;color:rgba(255,255,255,.3);transition:color .9s cubic-bezier(.2,.8,.2,1) .4s}
.bt-pane.run .bt-val{color:#fff}
.bt-conf{margin:0;font:400 14px/1.4 "Poppins",sans-serif;color:rgba(255,255,255,.6)}
.bt-pill{flex:none;align-self:flex-start;display:inline-flex;align-items:center;height:44px;padding:0 24px;border-radius:99px;background:#fff;color:#1A181B;font:500 13.5px/1 "Poppins",sans-serif;text-decoration:none;transition:transform .3s cubic-bezier(.2,.8,.2,1),background .3s}
.bt-pill:hover{background:#E6ECFF;transform:translateY(-1px)}
.bt-cols{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:40px;flex:1}
.bt-ev,.bt-how{min-width:0}
.bt-sys,.bt-chart,.bt-page{margin-top:18px;padding:22px;border-radius:14px;background:linear-gradient(180deg,#EEF0F6,#E2E6EF);color:#1A181B;box-shadow:inset 0 1px 0 #fff}
.bt-ref{margin:0 0 12px;font:400 12px/16px "Roboto Mono",ui-monospace,monospace;color:#5F6673}
.bt-sys{display:grid;gap:14px}
.bt-sys>div{position:relative;display:grid;grid-template-columns:62px 1fr;gap:3px 12px;padding:18px 18px;border-radius:10px;background:rgba(26,24,27,.045);box-shadow:inset 0 0 0 1px rgba(26,24,27,.08)}
.bt-sys .sys{grid-row:span 3;align-self:start;justify-self:start;font:400 12px/18px "Roboto Mono",ui-monospace,monospace;padding:1px 8px;border-radius:99px;box-shadow:inset 0 0 0 1px rgba(67,97,238,.55);color:#2B3FB8}
.bt-sys .sys{display:block;height:auto;margin:0;gap:0;background:rgba(67,97,238,.10)}
.bt-sys .sys::before{display:none}
.bt-sys span:not(.sys){font-size:12px;color:#5F6673}
.bt-sys b{font:500 14.5px/20px "Poppins",sans-serif;color:#1A181B}
.bt-sys em{font:normal 400 12px/16px "Poppins",sans-serif;color:#6F7686}
.bt-sys .hl::after,.bt-page .hl::after{content:"";position:absolute;inset:0;border-radius:10px;box-shadow:inset 0 0 0 1.5px #4361EE;opacity:0;transition:opacity .5s cubic-bezier(.2,.8,.2,1) .3s}
.bt-pane.run .hl::after{opacity:1}
.bt-chart svg{display:block;width:100%;height:auto}
.bt-chart .g{stroke:rgba(26,24,27,.08)}
.bt-chart .old{stroke:rgba(26,24,27,.28);stroke-dasharray:4 4}
.bt-chart .lim{stroke:rgba(26,24,27,.45);stroke-dasharray:4 4}
.bt-chart .lim.hl{stroke:#4361EE;opacity:.4;transition:opacity .5s .3s}
.bt-pane.run .bt-chart .lim.hl{opacity:1}
.bt-chart .tk{font:400 12px "Poppins",sans-serif;fill:#5F6673}
.bt-chart .tk.on{fill:#2B3FB8}
.bt-chart .src{fill:none;stroke:#4361EE;stroke-width:1.6;stroke-linejoin:round}
.bt-chart .pt{fill:#EEF0F6;stroke:#F94E9B;stroke-width:2}
.bt-chart .bt-ref{margin:10px 0 0}
.bt-page{padding:12px 22px 10px}
.bt-page .bt-ref{margin:10px 0 6px}
.bt-page>div{position:relative;display:grid;grid-template-columns:34px 1fr 84px;align-items:center;height:54px;border-top:1px solid rgba(26,24,27,.14);font:400 13px/1 "Roboto Mono",ui-monospace,monospace;color:#3F4552}
.bt-page>.bt-ref+div{border-top:0}
.bt-page .n{color:#8A91A3}
.bt-page svg{display:block;overflow:visible}
.bt-page svg text{fill:#23308A}
.bt-page .hl::after{inset:3px -8px}
.bt-how{display:flex;flex-direction:column;padding-top:2px}
.bt-how dl{margin:12px 0 0;display:grid}
.bt-how dl div{display:grid;grid-template-columns:110px 1fr;gap:10px;padding:18px 0;border-top:1px solid rgba(255,255,255,.08);opacity:0;transform:translateY(6px);transition:opacity .5s cubic-bezier(.2,.8,.2,1) var(--d),transform .6s cubic-bezier(.2,.8,.2,1) var(--d)}
.bt-pane.run .bt-how dl div{opacity:1;transform:none}
.bt-how dt{font:400 12.5px/18px "Poppins",sans-serif;color:rgba(255,255,255,.55)}
.bt-how dd{margin:0;font:400 14px/18px "Poppins",sans-serif;color:rgba(255,255,255,.9)}
.bt-dec{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:22px;border-top:1px solid rgba(255,255,255,.08);font:400 13px/1.3 "Poppins",sans-serif;color:rgba(255,255,255,.6);opacity:0;transition:opacity .5s cubic-bezier(.2,.8,.2,1) 2s}
.bt-pane.run .bt-dec{opacity:1}
.bt-dec a{display:inline-flex;align-items:center;gap:6px;color:#A0B8FC;text-decoration:none;font-weight:500}
.bt-dec a svg{width:11px;height:11px}
.bt-person{justify-content:flex-start;color:#fff}
.bt-jo{display:grid;place-items:center;width:34px;height:24px;border-radius:12px;background:#fff;color:#1A181B;font:500 12px/1 "Poppins",sans-serif;transform:scale(0);transition:transform .5s cubic-bezier(.2,.8,.2,1) 2.2s}
.bt-pane.run .bt-jo{transform:scale(1)}
.bt-how,.bt-head{position:relative}
.bt-reveal{margin:clamp(96px,10vw,150px) 0 0;max-width:22em;font:500 clamp(26px,3.2vw,42px)/1.3 "Poppins",sans-serif;letter-spacing:-.02em;color:#fff}
.bt-reveal b{font-weight:500}
.bt-reveal .w{display:inline-block;white-space:pre;opacity:.16;transition:opacity .25s linear}
.bt-reveal b .w{background:linear-gradient(100deg,#4361EE,#8EA0F5 55%,#D3DBFF);-webkit-background-clip:text;background-clip:text;color:transparent}
@media (max-width:980px){.bt-win{grid-template-columns:1fr;min-height:0}.bt-rail{padding:22px 0 0;border-right:0;border-bottom:1px solid rgba(255,255,255,.07)}.bt-rf{display:none}.bt-rail ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.bt-rail li{border-top:0;border-left:1px solid rgba(255,255,255,.07)}.bt-rail li:first-child{border-left:0}.bt-rail li:last-child{border-bottom:0}.bt-rail button{padding:14px 14px 16px}.bt-rail button::before{left:0;right:0;top:auto;bottom:0;height:3px;width:auto;border-radius:3px 3px 0 0}.bt-rail button i{right:12px;top:16px}.bt-rv{font-size:14px}.bt-rs{display:none}.bt-cols{grid-template-columns:1fr}.bt-work{padding:24px 18px}.bt-val{white-space:normal}.bt-head{flex-direction:column;align-items:flex-start}}
@media (prefers-reduced-motion:reduce){.bt-pane,.bt-how dl div,.bt-dec,.bt-jo{transition:none}}

/* ─────────── SECTION 11: the closing call to action (the page already carries the .cta-* styles; this puts it on the hero's navy) ─────────── */
/* the call to action is a rounded navy box on a white band, so it stands apart from the black footer */
.mw-cta-wrap{background: #FFFFFF; padding: 24px 80px 96px;}
.mw-cta-wrap > section#book-demo{max-width: 1280px; margin-inline: auto; border-radius: 28px; background: #07051A;}
#book-demo .cta-wrap{padding-inline: 64px;}
@media (max-width:1200px){.mw-cta-wrap{padding-inline: 40px;}}
@media (max-width:992px){.mw-cta-wrap{padding: 8px 24px 72px;} #book-demo .cta-wrap{padding-inline: 32px;}}
@media (max-width:576px){.mw-cta-wrap{padding-inline: 16px;} #book-demo .cta-wrap{padding-inline: 22px;} .mw-cta-wrap > section#book-demo{border-radius: 22px;}}

/* ─────────── SECTION 10: the questions (from index-backup.html; fonts set to DM Sans) ─────────── */
.mw-faq{background: #FFFFFF; font-family: "Poppins", sans-serif; padding: 24px 80px 120px;}
@media (max-width:1200px){.mw-faq{padding-inline: 40px;}}
@media (max-width:992px){.mw-faq{padding: 8px 24px 88px;}}
@media (max-width:576px){.mw-faq{padding-inline: 16px;}}
.mw-faq .mw-eyebrow{margin-bottom: 22px;}
.mfq-card{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);position:relative;z-index:2}
.mfq-l{display:flex;flex-direction:column;justify-content:space-between;gap:48px}
.mfq-l h2{margin:0;font:500 clamp(32px,3.8vw,50px)/1.1 "Poppins",sans-serif;letter-spacing:-.01em;color:#1A181B}
.mfq-list{display:grid;gap:12px;align-content:start}
.mfq-list details{counter-increment:q;border-radius:16px;background:#F8F8F8;transition:background .25s}
.mfq-list details[open]{background:#F8F8F8}
.mfq-list summary{list-style:none;display:flex;align-items:center;gap:20px;padding:24px 28px;cursor:pointer;font:500 18px/1.4 "Poppins",sans-serif;color:#1A181B}
.mfq-list summary::before{content:"0" counter(q);flex:none;width:36px;font:500 24px/1 "Poppins",sans-serif;letter-spacing:-.02em;color:#8a8f9a}
.mfq-list summary::-webkit-details-marker{display:none}
.mfq-list summary span.t{flex:1}
.mfq-pm{flex:none;position:relative;width:14px;height:14px;color:#1A181B}
.mfq-pm::before,.mfq-pm::after{content:"";position:absolute;left:0;top:6.25px;width:14px;height:1.5px;background:currentColor;border-radius:1px;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.mfq-pm::after{transform:rotate(90deg)}
.mfq-list details[open] .mfq-pm::after{transform:rotate(0deg)}
.mfq-list details.closing .mfq-pm::after{transform:rotate(90deg)}
.mfq-a{margin:0;padding:0 56px 26px 84px;font:400 16px/1.65 "Poppins",sans-serif;color:#5b6170}
.mfq-list details .mfq-a{transition:opacity .4s cubic-bezier(.2,.8,.2,1) .06s,transform .5s cubic-bezier(.2,.8,.2,1) .04s}
.mfq-list details.closing .mfq-a{opacity:0;transform:translateY(-6px);transition-delay:0s}
/* ─────────── SECTION 8: validation, cloned from the build file (fonts set to DM Sans) ─────────── */
.bp-m-day{--ground:#F5F7FA;--ink-1:#1A181B;--ink-3:#5F6673;--hairline:rgba(26,24,27,.10)}
.bp-m-day{position:relative;isolation:isolate;overflow:hidden}
.bp-m-day>.bp-m-bloom{position:absolute;z-index:-1;left:var(--bx,30%);top:var(--by,8%);width:var(--bwid,44%);height:var(--bhgt,70%);
  background:radial-gradient(closest-side,rgb(67 97 238/.14),rgb(67 97 238/.07) 45%,rgb(67 97 238/0));transform:rotate(18deg);pointer-events:none}
.bp-m-day>.bp-m-clear{position:absolute;z-index:-1;left:var(--cx,26%);top:var(--cy,18%);width:var(--cwid,48%);height:var(--chgt,48%);
  background:radial-gradient(closest-side,var(--ground) 40%,transparent);pointer-events:none}
.bp-m-day.m-indigo>.bp-m-bloom{background:radial-gradient(closest-side,rgb(90 27 238/.10),rgb(90 27 238/0))}
.bp-m-spec{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));border-top:1px solid var(--hairline)}
.bp-m-spec>div{padding:24px 24px 28px;border-bottom:1px solid var(--hairline);display:grid;gap:8px;align-content:start;min-width:0}
.bp-m-spec>div:not(:nth-child(4n+1)){padding-left:24px;border-left:1px solid var(--hairline)}
.bp-m-spec dt{font:400 12px/16px "Poppins",sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.bp-m-spec dd{margin:0;font:400 16px/24px "Poppins",sans-serif;color:var(--ink-1)}
@media (max-width:900px){.bp-m-spec{grid-template-columns:repeat(2,minmax(0,1fr))}.bp-m-spec>div:not(:nth-child(4n+1)){border-left:0}.bp-m-spec>div:nth-child(2n){padding-left:20px;border-left:1px solid var(--hairline)}}
@media (max-width:520px){.bp-m-spec{grid-template-columns:minmax(0,1fr)}.bp-m-spec>div,.bp-m-spec>div:not(:nth-child(4n+1)),.bp-m-spec>div:nth-child(2n){padding-left:0;border-left:0}}
/* ─────────── SECTION 6: the platform, cloned from the build file (fonts set to DM Sans) ─────────── */
.bp-m-band{font-family:"Poppins",sans-serif;font-size:16px;line-height:26px;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;background-color:var(--ground);color:var(--ink-1);box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.bp-m-band *,.bp-m-band *::before,.bp-m-band *::after{box-sizing:border-box}
/* outer left and right borders on the spec grid, to close the box */
section.bp-m-day .bp-m-spec{border-left:1px solid var(--hairline);border-right:1px solid var(--hairline)}
/* no indigo glow behind the validation section */
section.bp-m-day>.bp-m-bloom, section.bp-m-day>.bp-m-clear{display:none}
/* container: the same 1280px content width and side padding as the navbar and the other sections */
section.bp-m-band .bp-m-col{max-width:1440px;padding-inline:80px}
@media (max-width:1200px){section.bp-m-band .bp-m-col{padding-inline:40px}}
@media (max-width:992px){section.bp-m-band .bp-m-col{padding-inline:24px}}
@media (max-width:576px){section.bp-m-band .bp-m-col{padding-inline:16px}}
/* title and subtitle: same type, width and centring as the other sections' headings */
section.bp-m-band .bp-m-head{display:flex;flex-direction:column;align-items:flex-start;gap:20px;margin-bottom:56px;text-align:left}
section.bp-m-band .bp-m-head .bp-t-section{max-width:820px;font-size:clamp(28px,3.6vw,40px);font-weight:500;line-height:1.3;letter-spacing:-0.01em;color:var(--foreground-primary);text-wrap:balance}
section.bp-m-band .bp-m-head p.bp-t-lead{max-width:780px;margin-inline:0;font-size:clamp(16px,1.6vw,18px);font-weight:400;line-height:1.6;letter-spacing:0;color:rgba(26,24,27,.7);text-wrap:balance}
.bp-m-band h2,.bp-m-band h3,.bp-m-band p{margin:0}
.bp-m-band{--accent-text:#4361EE;--dur-press:150ms;--ease-press:cubic-bezier(.2,0,0,1);--font-data:"Poppins",sans-serif;--font-display:"Poppins",sans-serif;--font-text:"Poppins",sans-serif;--ground:#F0F3F7;--hairline:rgba(26,24,27,.10);--ink-2:#3F4552;--ink-3:#5F6673;--rail:rgba(26,24,27,.08);--station:rgba(26,24,27,.24)}
.bp-t-section{font-family:"Poppins",sans-serif;font-size:48px;line-height:54px;font-weight:500;letter-spacing:-0.01em}
.bp-t-card{font-family:"Poppins",sans-serif;font-size:20px;line-height:28px;font-weight:500;letter-spacing:-0.005em}
.bp-t-lead{font-family:"Poppins",sans-serif;font-size:20px;line-height:30px;font-weight:400;letter-spacing:0}
.t-hero,.bp-t-section,.t-sub{text-wrap:balance}
@media (max-width:1100px){.bp-t-section{font-size:40px;line-height:46px}.bp-t-lead{font-size:18px;line-height:28px}}
@media (max-width:640px){.bp-t-section{font-size:32px;line-height:38px}.bp-t-card{font-size:18px;line-height:26px}}
.bp-m-ink2{color:var(--ink-2)}
.bp-m-col{width:100%;max-width:1248px;margin-inline:auto;padding-inline:24px;position:relative}
.bp-m-band{position:relative;padding-block:160px}
.bp-m-band.m-tight{padding-block:96px}
[data-theme="trench"].bp-m-band{padding-block:200px}
.bp-m-band{--railx:max(20px,calc(50% - 600px));background-image:linear-gradient(var(--rail),var(--rail)),linear-gradient(var(--rail),var(--rail));
  background-size:1px 100%;background-repeat:no-repeat;background-position:left var(--railx) top 0,right var(--railx) top 0}
.bp-m-band.m-norails{background-image:none}
.bp-m-seam{position:absolute;left:0;right:0;top:0;height:1px;background:var(--hairline);z-index:3}
.bp-m-seam::before,.bp-m-seam::after{content:"";position:absolute;top:-3px;width:7px;height:7px;border-radius:50%;
  background:var(--ground);box-shadow:inset 0 0 0 1px var(--station)}
.bp-m-seam::before{left:calc(max(20px,50% - 600px) - 3px)}
.bp-m-seam::after{right:calc(max(20px,50% - 600px) - 3px)}
@media (max-width:1100px){.bp-m-band{padding-block:120px}[data-theme="trench"].bp-m-band{padding-block:140px}.bp-m-col{padding-inline:40px}.bp-m-band{--railx:20px}.bp-m-seam::before{left:17px}.bp-m-seam::after{right:17px}}
@media (max-width:640px){.bp-m-band{padding-block:80px}.bp-m-band.m-tight{padding-block:64px}[data-theme="trench"].bp-m-band{padding-block:96px}.bp-m-col{padding-inline:20px}.bp-m-band{--railx:10px}.bp-m-seam::before{left:7px}.bp-m-seam::after{right:7px}}
.bp-m-eyebrow{display:inline-flex;align-items:center;gap:10px;font:500 13px/16px "Poppins",sans-serif;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-2)}
.bp-m-eyebrow::before{content:"";width:24px;height:1px;background:var(--station)}
.bp-m-eyebrow i{width:7px;height:7px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--station);margin-left:-10px}
.bp-m-head{display:grid;gap:20px;margin-bottom:64px}
.bp-m-head.m-center{justify-items:center;text-align:center}
.bp-m-head.m-center p{margin-inline:auto}
.bp-m-head p:not(.bp-m-eyebrow){max-width:560px;color:var(--ink-2)}
@media (max-width:640px){.bp-m-head{margin-bottom:40px;gap:16px}.bp-m-eyebrow{font-size:12px}}
.bp-m-link{display:inline-flex;align-items:center;gap:8px;color:var(--accent-text);font:500 16px/24px "Poppins",sans-serif;text-decoration:none}
.bp-m-link svg{width:12px;height:12px;transition:transform var(--dur-press) var(--ease-press)}
.bp-m-link:hover svg{transform:translateX(4px)}
.bp-m-tag{display:inline-block;font:400 12px/16px "Poppins",sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);
  padding:2px 6px;border-radius:6px;box-shadow:inset 0 0 0 1px var(--hairline)}
.bp-m-tag.bp-m-beta{border-radius:2px;box-shadow:none;outline:1px dashed var(--station);outline-offset:-1px}
.bp-pa-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:56px;border-right:1px solid var(--hairline);border-top:1px solid var(--hairline)}
.bp-pa{display:flex;flex-direction:column;padding:32px 32px 36px;border-left:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.bp-pa-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.bp-pa-place{margin:0 0 8px;font:400 12px/16px "Poppins",sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.bp-pa h3{margin:0 0 8px}
.bp-pa .bp-m-ink2{margin:0;max-width:36ch}
.bp-pa .bp-m-link{margin-top:auto;padding-top:20px;font-size:15px}
.bp-pa .bp-m-link svg{display:inline-block;vertical-align:-1px;margin-left:8px}
@media (max-width:900px){.bp-pa-grid{grid-template-columns:1fr}}
@media (max-width:640px){.bp-pa-grid{margin-top:40px}.bp-pa{padding:26px 20px 28px}}
.t-hero,.bp-t-section,.t-sub{font-weight:500;letter-spacing:-.015em}
.bp-t-card{letter-spacing:-.005em}
.bp-hm-glyph{display:block;width:56px;height:56px}
.bp-hm-glyph svg{display:block}
@media (prefers-reduced-motion: reduce){#record .rec-fld span{animation: none;}}
/* the old homepage styles also target #ways and #record by id (grey page, guide rails, black bg): switch them off here */
#record.mw-rec{background: #FFFFFF; color: var(--foreground-primary); padding: 24px 80px 120px; overflow: visible; z-index: auto;}
#record.mw-rec::before{display: none;}
@media (max-width:1200px){#record.mw-rec{padding-inline: 40px;}}
@media (max-width:992px){#record.mw-rec{padding: 8px 24px 88px;}}
@media (max-width:576px){#record.mw-rec{padding-inline: 16px;}}
@media (max-width:1200px){.mw-rec{padding-inline: 40px;}}
@media (max-width:992px){.mw-rec{padding: 8px 24px 88px;}}
@media (max-width:576px){.mw-rec{padding-inline: 16px;}}
/* the record diagram now lives in the hero, in place of the old app card: #record keeps its id (the diagram's CSS and JS key off it) */
#record.rec-hero{width:min(1280px,100%);margin-top:72px;padding:8px;border-radius:var(--radius-5xl);overflow:visible;z-index:auto;   /* the same glass bezel the old hero card had */
  background:linear-gradient(180deg,rgba(255,255,255,0.16),rgba(255,255,255,0.05));border:1px solid rgba(255,255,255,0.24);backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%)}
#record.rec-hero .rec-slot,#record.rec-hero .mw-sec-gif.rec{border-radius:calc(var(--radius-5xl) - 8px)}
#record.rec-hero::before{display:none}
@media (max-width:960px){#record.rec-hero{margin-top:48px}}
#record .rec-stage{position:relative;z-index:2;width:100%;max-width:1280px;margin-inline:auto}
#record .rec-bg{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none}
#record .rec-slot{position:relative;z-index:1;width:100%;aspect-ratio:1000/560;border-radius:22px;background:linear-gradient(180deg,rgba(8,9,16,.72),rgba(3,4,10,.80));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
            box-shadow:inset 0 0 0 1px rgba(142,160,245,.10)}
#record .rec-slot::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;pointer-events:none;
            background:radial-gradient(520px 280px at var(--bx,100%) var(--by,70%),#5B76F5,rgba(67,97,238,0) 74%),
                       rgba(255,255,255,.12);
            -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
#record .rec-slot{container-type:inline-size;--u:.1cqw;overflow:hidden;background:#07051A;-webkit-backdrop-filter:none;backdrop-filter:none}
#record .rec-slot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
        background:radial-gradient(ellipse 46% 52% at 50% -6%,rgba(110,140,255,.20),rgba(67,97,238,0) 70%),
                   radial-gradient(rgba(142,160,245,.12) 1px,transparent 1.4px) center/calc(var(--u)*26) calc(var(--u)*26)}
#record .rec-in{position:absolute;inset:0;z-index:1;color:#fff;font-family:"Poppins",sans-serif}
#record .rec-in *{box-sizing:border-box}
#record .rec-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
#record .rec-lines path.b{fill:none;stroke:#2c3a82;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
#record .rec-lines path.f{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:reduce){#record .rec-lines path.f{display:none}}
#record .rec-lines circle.r{fill:#07051A;stroke:#6ba6ff;stroke-width:1.4}
#record .rn{position:absolute;left:calc(var(--x)*var(--u));top:calc(var(--y)*var(--u));width:calc(var(--w,0)*var(--u))}
#record .rc{position:absolute;left:calc(var(--x)*var(--u));top:calc(var(--y)*var(--u));width:calc(var(--w)*var(--u));height:calc(210*var(--u));border-radius:calc(14*var(--u));
      background:linear-gradient(180deg,#0c1333,#060a1d);box-shadow:0 0 0 1px rgba(142,160,245,.16),0 22px 44px -22px rgba(0,0,10,.95);font-family:"Poppins",sans-serif}
#record .rc::before{content:"";position:absolute;left:10%;right:10%;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent)}
#record .rc header{padding:calc(16*var(--u)) calc(16*var(--u)) 0}
#record .rc h4{margin:0;font:500 calc(var(--u)*13.5)/1.2 "Poppins",sans-serif;color:#fff}
#record .rc .crumb{margin-top:calc(6*var(--u));font:400 calc(var(--u)*9)/1 "Poppins",sans-serif;color:rgba(255,255,255,.4);letter-spacing:.02em}
#record .rc .crumb b{font-weight:400;color:rgba(255,255,255,.85)}
#record .rc .rp{width:auto;position:absolute;left:calc(16*var(--u));right:calc(16*var(--u));top:calc(58*var(--u));height:calc(108*var(--u))}
#record .rc .cap{font:400 calc(var(--u)*8)/1 "Poppins",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.42)}
#record .rc .tag{position:absolute;left:calc(16*var(--u));bottom:calc(14*var(--u));padding:calc(4*var(--u)) calc(8*var(--u));border-radius:calc(3*var(--u));background:rgba(255,255,255,.08);color:rgba(255,255,255,.72);font:400 calc(var(--u)*8.5)/1 "Poppins",sans-serif;letter-spacing:.08em;text-transform:uppercase}
#record .cv{position:absolute;left:calc(14*var(--u));right:0;top:calc(18*var(--u));bottom:0}
#record .cv svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#record .cv .tk{font:400 7px "Poppins",sans-serif;fill:rgba(255,255,255,.38)}
#record .cv .ucl{stroke:rgba(255,255,255,.28);stroke-dasharray:2 3;stroke-width:1}
#record .cv .ax{stroke:url(#cvAx);stroke-width:1}
#record .cv .ar{fill:url(#cvAr)}
#record .cv .gl{fill:none;stroke:#6B82F2;stroke-width:5;opacity:.26;stroke-linecap:round;stroke-linejoin:round}
#record .cv .ln{fill:none;stroke:url(#cvLg);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
#record .cv .halo{fill:rgba(142,160,245,.34)}
#record .cv .pt{fill:#D2DBFF}
#record .cv .spk{fill:url(#cvSp)}
#record .cv .uz{fill:rgba(249,78,155,.035)}
#record .cv .dvA{fill:rgba(249,78,155,.38)}
#record .cv .dvL{fill:none;stroke:#F94E9B;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 4px rgba(249,78,155,.8))}
#record .cv .ucl{stroke:rgba(255,255,255,.6)!important}
#record .cv.dev .pt{fill:#F94E9B;stroke:#fff}
#record .cv.dev .halo{fill:rgba(249,78,155,.35)}
#record .rc .tag.dev{background:rgba(249,78,155,.16);color:#ffa6cb}
#record .cvl{position:absolute;right:0;top:calc(60*var(--u));font:400 calc(var(--u)*8)/1 "Poppins",sans-serif;color:rgba(255,255,255,.5)}
#record .rp-n{margin-top:calc(11*var(--u));display:flex;align-items:baseline;gap:calc(7*var(--u))}
#record .rp-n b{font:500 calc(var(--u)*27)/1 "Poppins",sans-serif;letter-spacing:-.02em;color:#fff}
#record .rp-n i{font:400 calc(var(--u)*8.5)/1 "Poppins",sans-serif;font-style:normal;color:#8EA0F5}
#record .seg{margin-top:calc(11*var(--u));height:calc(7*var(--u));position:relative;background:repeating-linear-gradient(90deg,rgba(255,255,255,.13) 0 calc(var(--u)*2.4),transparent calc(var(--u)*2.4) calc(var(--u)*4))}
#record .seg::after{content:"";position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#4361EE,#8EA0F5);-webkit-mask:repeating-linear-gradient(90deg,#000 0 calc(var(--u)*2.4),transparent calc(var(--u)*2.4) calc(var(--u)*4));mask:repeating-linear-gradient(90deg,#000 0 calc(var(--u)*2.4),transparent calc(var(--u)*2.4) calc(var(--u)*4))}
#record .ticks{margin-top:calc(7*var(--u));display:flex;justify-content:space-between;font:400 calc(var(--u)*7.5)/1 "Poppins",sans-serif;color:rgba(255,255,255,.38)}
#record .tr-n{margin-top:calc(8*var(--u));font:500 calc(var(--u)*19)/1 "Poppins",sans-serif;letter-spacing:-.01em;color:#fff}
#record .tr-s{margin-top:calc(6*var(--u));font:400 calc(var(--u)*9)/1 "Poppins",sans-serif;color:rgba(255,255,255,.45)}
#record .tr-l{position:absolute;left:0;right:0;bottom:0;height:calc(30*var(--u))}
#record .tr-l svg{position:absolute;left:0;top:0;width:100%;height:calc(10*var(--u));overflow:visible}
#record .tr-l svg path{fill:none;stroke:rgba(255,255,255,.28);stroke-width:1}
#record .tr-l span{position:absolute;bottom:0;padding:calc(4*var(--u)) calc(7*var(--u));border-radius:calc(4*var(--u));font:400 calc(var(--u)*8.5)/1 "Poppins",sans-serif;color:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);background:rgba(255,255,255,.03)}
#record .tr-l span.on{color:rgba(255,255,255,.9);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);background:rgba(255,255,255,.1)}
#record .rl{display:inline-block;height:1.15em;line-height:1.15em;overflow:hidden;vertical-align:top;width:.62em;text-align:center}
#record .rl>span{display:block;transition:transform .9s cubic-bezier(.2,.8,.2,1);transform:translateY(calc(var(--d)*-1.15em))}
#record .rl>span>em{display:block;height:1.15em;line-height:1.15em;font-style:normal;font-weight:inherit;letter-spacing:inherit}
#record .rc .tag{line-height:1.15}
#record .seg::after{width:var(--v,94%);transition:width 1.1s cubic-bezier(.3,.7,.2,1)}
#record .tr-l span{transition:color .5s,box-shadow .5s,background .5s}
#record .tr-s{transition:opacity .35s}
#record .tr-s.sw{opacity:0}
#record #cvClipR{width:150px}
#record .cv.draw #cvClipR{animation:cvClip 1.2s cubic-bezier(.4,0,.2,1) both}
#record .cv.draw .mk{animation:cvPt .5s ease 1s both}
@keyframes cvClip{from{width:0}to{width:150px}}
@keyframes cvPt{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){#record .rl>span,#record .seg::after{transition:none}#record .cv.draw #cvClipR,#record .cv.draw .mk{animation:none}}
#record .rec-core{height:calc(90*var(--u));border-radius:calc(16*var(--u));text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;
      background:linear-gradient(180deg,#15215f,#0a1237);box-shadow:0 0 0 1px rgba(120,150,255,.45),0 18px 36px -20px rgba(0,0,0,.9)}
#record .rec-core::before{content:"";position:absolute;left:12%;right:12%;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(142,160,245,.8),transparent)}
#record .rec-core h3{margin:0;font:400 calc(var(--u)*25)/1 "Poppins",sans-serif;color:#fff}
#record .rec-core p{margin:calc(7*var(--u)) 0 0;font:400 calc(var(--u)*9.5)/1 "Poppins",sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#8EA0F5}
#record .rs-h{margin:0;font:500 calc(var(--u)*14.5)/1.2 "Poppins",sans-serif;color:#fff}
#record .rs-h small{margin-left:calc(8*var(--u));padding:calc(2*var(--u)) calc(7*var(--u));border-radius:calc(4*var(--u));font:400 calc(var(--u)*9)/1.4 "Poppins",sans-serif;letter-spacing:.1em;color:#cfd8ff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
#record .rs-r{text-align:right}
#record .paper{height:calc(66*var(--u));padding:calc(8*var(--u)) calc(11*var(--u));border-radius:calc(4*var(--u));background:linear-gradient(180deg,#f6f7fb,#e6e9f3);box-shadow:0 14px 26px -12px rgba(0,0,0,.85)}
#record .paper p{margin:0;display:flex;justify-content:space-between;align-items:center;font:400 calc(var(--u)*8.5)/calc(var(--u)*16) "Roboto Mono",ui-monospace,monospace;color:#2b2f3b}
#record .paper p b{font:400 calc(var(--u)*14)/1 "Reenie Beanie",cursive;color:#23308A}
#record .paper p.hl{margin:0 calc(-5*var(--u));padding:0 calc(5*var(--u));box-shadow:inset 0 0 0 1.2px #4361EE;border-radius:calc(2*var(--u));background:rgba(67,97,238,.08)}
#record .steps p{margin:0;display:flex;align-items:center;gap:calc(10*var(--u));font:400 calc(var(--u)*11)/calc(var(--u)*19) "Poppins",sans-serif;color:rgba(255,255,255,.8)}
#record .steps p::before{content:"";width:calc(7*var(--u));height:calc(7*var(--u));border-radius:50%;background:#8EA0F5}
#record .steps p.o{color:rgba(255,255,255,.5)}
#record .steps p.o::before{background:transparent;box-shadow:inset 0 0 0 1.2px rgba(142,160,245,.8)}
#record .sys{height:calc(26*var(--u));margin-bottom:calc(14*var(--u));padding:0 calc(12*var(--u));display:flex;align-items:center;gap:calc(9*var(--u));border-radius:calc(8*var(--u));
       background:linear-gradient(180deg,#0c1333,#060a1d);box-shadow:inset 0 0 0 1px rgba(142,160,245,.16);font:400 calc(var(--u)*10.5)/1 "Poppins",sans-serif;color:#fff}
#record .steps .sys{margin-bottom:calc(8*var(--u))}
#record .sys span{white-space:nowrap}
#record .sys:nth-child(1)::before{background:#4361EE;box-shadow:0 0 8px rgba(67,97,238,.9)}
#record .sys:nth-child(2)::before{background:#5A74F0;box-shadow:0 0 8px rgba(90,116,240,.9)}
#record .sys:nth-child(3)::before{background:#7088F3;box-shadow:0 0 8px rgba(112,136,243,.9)}
#record .sys:nth-child(4)::before{background:#8EA0F5;box-shadow:0 0 8px rgba(142,160,245,.9)}
#record .sys:nth-child(5)::before{background:#B1BEF8;box-shadow:0 0 8px rgba(177,190,248,.9)}
#record .steps .sys::before{background:#8EA0F5;box-shadow:0 0 8px rgba(142,160,245,.85)}
#record .sys.o{color:rgba(255,255,255,.55)}
#record .sys.o::before{background:transparent;box-shadow:inset 0 0 0 1.2px rgba(95,147,230,.9)}
#record .sys::before{content:"";width:calc(6*var(--u));height:calc(6*var(--u));border-radius:50%;background:#5f93e6}
#record .sys span{margin-left:auto;font:400 calc(var(--u)*10)/1 "Poppins",sans-serif;color:rgba(255,255,255,.45)}
#record .rec-foot{position:absolute;left:0;right:0;top:calc(532*var(--u));text-align:center;font:400 calc(var(--u)*9.5)/1 "Poppins",sans-serif;letter-spacing:.22em;color:rgba(255,255,255,.4)}
@media (max-width:900px){#record .rec-slot{--u:1px;aspect-ratio:auto;container-type:normal}#record .rec-in{position:relative;inset:auto;display:grid;gap:18px;padding:22px 18px 26px}#record .rec-lines{display:none}#record .rn,#record .rc,#record .rec-foot{position:static;left:auto;top:auto;width:auto}#record .rc{height:210px;position:relative;left:auto;top:auto}#record .rec-core{height:auto;padding:30px 0 24px}#record .rs-r{text-align:left}#record .paper{max-width:280px}#record .rec-foot{text-align:left}}
/* The record on tablet and phone: read top to bottom as the flow goes (ways in, then the systems, then one record, then what uses it), with larger type than the 1px unit gave */
@media (max-width:900px){
  #record .rec-slot{--u:1.2px}
  #record .rc{height:calc(210*var(--u))}
  #record .rec-in > :nth-child(n+5):nth-child(-n+8){order:1}
  #record .rec-in > :nth-child(10),#record .rec-in > :nth-child(11){order:2}
  #record .rec-in > :nth-child(9){order:3}
  #record .rec-in > :nth-child(n+2):nth-child(-n+4){order:4}
  #record .rec-in > :nth-child(12){order:5}
}

/* ─────────── SECTION 3: what it is used for (light page, four near-black cards: three.js light + gsap UI) ─────────── */
.mw-uses{background: #FFFFFF; font-family: "Poppins", sans-serif; padding: 24px 80px 120px;}
.mw-uses-in{max-width: 1280px; margin: 0 auto;}
.mw-uses-head{display: flex; flex-direction: column; align-items: center; gap: 20px; margin-bottom: 56px; text-align: center;}
.mw-eyebrow{display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: #5F6673;}
.mw-eyebrow i{width: 6px; height: 6px; border-radius: 50%; background: var(--foreground-primary);}
.mw-uses-frame{padding: 0;}
.mw-uses-grid{display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px;}
.mw-uc-review{grid-column: span 7;} .mw-uc-inv{grid-column: span 5;} .mw-uc-cpv{grid-column: span 5; order: 3;} .mw-uc-insp{grid-column: span 7; order: 4;}
.mw-uc{position: relative; height: 520px; overflow: hidden; isolation: isolate; container-type: inline-size; border-radius: 20px; color: #FFFFFF;
  background: radial-gradient(120% 90% at 50% 0%, rgba(67,97,238,0.16), transparent 60%), #07051A;}
.mw-gl{position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; pointer-events: none;}
.mw-ui{position: absolute; z-index: 1; inset: 0 0 112px 0; font-size: clamp(11px, 2.35cqw, 14.5px); line-height: 1.35; pointer-events: none; will-change: transform;}
.mw-uc::after{content: ""; position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 230px; border-radius: 0 0 20px 20px; pointer-events: none; background: linear-gradient(180deg, rgba(7,5,26,0) 0%, rgba(7,5,26,0.8) 50%, rgba(7,5,26,0.96) 100%);}
.mw-uc-cap{position: absolute; z-index: 3; left: 28px; right: 28px; bottom: 26px; margin: 0; max-width: 560px; font-size: 17px; line-height: 1.55; color: rgba(255,255,255,0.66);}
.mw-uc-cap b{font-weight: 500; color: #FFFFFF;}
.mw-ui::before{content: ""; position: absolute; left: 0; right: 0; bottom: -112px; height: calc(112px + 3.6em); z-index: -1; pointer-events: none; background: none;}   /* the caption fade is the card's ::after, the same on every card */
.mw-ui svg{display: block; width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;}
.mw-ui em{font-style: normal;}
/* 1 · batch review: the batch record page, read and checked, with the findings over it */
.mw-pg{position: absolute; left: 6%; top: 6%; width: 20.2em; border-radius: 1.1em;}
.mw-pg-1{padding: .8em .8em .8em; background: linear-gradient(180deg, #ECEEF5 0%, #C8CCDB 100%); color: #1A181B; box-shadow: 0 2em 4em -1.5em rgba(2,1,14,0.85), inset 0 1px 0 #FFFFFF;}
.mw-pg-h{display: flex; justify-content: space-between; align-items: baseline; padding: .25em .4em .75em; font-size: 1.1em;} .mw-pg-h b{font-weight: 500;} .mw-pg-h span{font-size: .8em; color: #5F6673;}
.mw-pg-in{position: relative; overflow: hidden; padding: .85em 1em .45em; border-radius: .75em; background: rgba(255,255,255,0.94); box-shadow: 0 .3em .8em -.4em rgba(26,24,27,0.25);}
.mw-pg-t{margin: 0 0 .6em; font-size: 1em; font-weight: 500; color: #1A181B;}
.mw-pr{position: relative; display: grid; grid-template-columns: 2.1em 1fr auto; align-items: center; gap: .3em; padding: .3em .5em; margin: 0 -.5em; border-radius: .55em; color: #3F4552; border-top: 1px solid rgba(26,24,27,0.08);}
.mw-pr i{font-style: normal; font-size: .85em; color: #5F6673;} .mw-pr span{font-size: .95em;}
.mw-pr b{font-family: "Reenie Beanie", cursive; font-weight: 400; font-size: 1.9em; line-height: 1; color: #23308A; padding: 0 .3em;}
.mw-pr u{display: none; justify-self: end; width: .7em; height: .7em; border-radius: 50%; background: rgba(67,97,238,0.22); transition: background .4s, box-shadow .4s;}
.mw-pr u.lit{background: #4361EE; box-shadow: 0 0 .8em rgba(67,97,238,0.7);}
.mw-pr.flag{background: rgba(67,97,238,0.1); box-shadow: inset 0 0 0 1.5px #4361EE; color: #1A181B;}
.mw-scan{position: absolute; left: 0; right: 0; top: 0; height: 3.2em; opacity: 0; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(67,97,238,0.16) 80%, rgba(67,97,238,0.5) 100%);}
.mw-rv{position: absolute; right: 4%; top: 33%; width: 19.8em; padding: 1em 1.1em; border-radius: 1em; background: rgba(10,8,38,0.86); border: 1px solid rgba(255,255,255,0.16); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 2em 4em -1.5em rgba(2,1,14,0.9);}
.mw-rv-k{margin: 0; font-size: .78em; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,0.7);}
.mw-rv-s{margin: .25em 0 .8em; font-size: .95em; color: rgba(255,255,255,0.7);} .mw-rv-s b{font-weight: 500; color: #FFFFFF;} .mw-rv-s i{font-style: normal; opacity: .5;}
.mw-rv-i{padding: .6em 0; border-top: 1px solid rgba(255,255,255,0.1);} .mw-rv-i span{font-size: .78em; letter-spacing: .06em; color: #A0B8FC;} .mw-rv-i p{margin: .15em 0 0; font-size: .92em; line-height: 1.4; color: rgba(255,255,255,0.8);}
.mw-sign{display: inline-flex; align-items: center; gap: .7em; margin-top: .5em; padding: .45em 1em .45em .45em; border-radius: 999px; white-space: nowrap; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.8); font-size: .9em;}
.mw-sign em, .mw-who em{display: grid; place-items: center; height: 1.7em; padding: 0 .65em; border-radius: 999px; background: #FFFFFF; color: #1A181B; font-size: .8em; font-weight: 600;}
/* 2 · investigations: ask the record, watch the lot spread to its batches */
.mw-srch{position: absolute; left: 50%; top: 4%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: .7em; padding: .75em 1.4em .75em 1.1em; border-radius: 999px; white-space: nowrap; font-size: 1.02em; color: rgba(255,255,255,0.8); background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);}
.mw-uc-inv .mw-ui::before{content: ""; position: absolute; left: 10cqw; right: 10cqw; top: calc(50% - 18cqw); height: 46cqw; border-radius: 1.1em; background: #0B0A26; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 2em 4em -1.5em rgba(2,1,14,0.85), inset 0 1px 0 rgba(255,255,255,0.06);}
.mw-uc-inv .mw-srch{top: calc(50% - 28cqw); background: rgba(11,10,38,0.88); border-color: rgba(255,255,255,0.1); box-shadow: 0 1em 2em -1em rgba(2,1,14,0.85), inset 0 1px 0 rgba(255,255,255,0.06);}
.mw-ui svg.mw-gen{position: absolute; left: 18cqw; top: calc(50% - 11cqw); width: 64cqw; height: auto; overflow: visible; fill: none; stroke: none;}
.mw-gn rect{fill: rgba(255,255,255,0.07); stroke: rgba(255,255,255,0.2); stroke-width: 1;} .mw-gn.mw-gk rect{fill: rgba(66,234,212,0.1); stroke: #42EAD4; stroke-width: 1.5; filter: drop-shadow(0 0 10px rgba(66,234,212,0.55));}
.mw-gt{fill: #FFFFFF; font-size: 15px; font-weight: 500;} .mw-gs{fill: rgba(255,255,255,0.68); font-size: 11.5px;} .mw-gk .mw-gt{font-size: 16px;}
.mw-wl,.mw-wp{shape-rendering: geometricPrecision;}
.mw-wl{fill: none; stroke: url(#mwG); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1;}
.mw-wp{fill: none; stroke: #FFFFFF; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: .06 1; stroke-dashoffset: 0; opacity: 0;}
/* 3 · inspections: every change in order, and what an inspector asks */
.mw-q{margin: 0; font-size: 1em; font-weight: 500; line-height: 1.3;} .mw-a{margin: .2em 0 .8em; font-size: .88em; color: #5F6673;}
.mw-btn{display: inline-block; padding: .55em 1.1em; border-radius: 999px; background: #1A181B; color: #FFFFFF; font-size: .9em; font-weight: 500;}
/* 4 · CPV: the chart, drawn once, with the one result over the limit */
.mw-ui svg.mw-chart{position: absolute; left: 8cqw; top: calc(50% - 29.4cqw); width: 84cqw; height: auto; overflow: visible; fill: none; stroke: none;}
.mw-cg line{stroke: rgba(255,255,255,0.08); stroke-width: 1;}
.mw-ucl{stroke: rgba(255,255,255,0.7); stroke-width: 1.2; stroke-dasharray: 4 4;} .mw-cx{fill: rgba(255,255,255,0.65); font-size: 11px; letter-spacing: .05em;}
.mw-chart path.mw-cl{fill: none; stroke: #FFFFFF; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;}   /* revealed left to right by a clip rect, so it always draws from the start */
.mw-sp{fill: #FFFFFF; filter: drop-shadow(0 0 8px #F94E9B); opacity: 0; transform-box: fill-box; transform-origin: center;} .mw-spr{fill: none; stroke: #F94E9B; stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center;}
.mw-vt{opacity: 0;} .mw-vt rect{fill: rgba(249,78,155,0.16); stroke: rgba(249,78,155,0.7); stroke-width: 1;} .mw-chart path.mw-dv{fill: none; stroke: #F94E9B; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; filter: drop-shadow(0 0 6px rgba(249,78,155,0.85));} .mw-vt text{fill: #FFFFFF; font-size: 11px; font-weight: 500;}
.mw-uses.is-live .mw-ui [data-in]{visibility: hidden; opacity: 0;}
.mw-uc.no-gl{background: radial-gradient(120% 90% at 50% 0%, rgba(67,97,238,0.3), transparent 70%), #07051A;}
/* the five smaller uses: quiet text columns on the page */
.mw-uses-list{list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px;}
.mw-uses-list li{display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 20px; border-radius: 16px; background: #F3F4F7;}
.mw-uses-list h3{margin: 0; font-size: 17px; font-weight: 500; letter-spacing: -0.02em; color: var(--foreground-primary);}
.mw-uses-list p{margin: 0 0 6px; font-size: 14px; line-height: 1.6; color: rgba(26,24,27,0.6);}
.mw-uses-list a{display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 500; color: var(--mareana-primary); text-decoration: none;}
.mw-uses-list a svg{width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s;}
.mw-uses-list a:hover svg{transform: translateX(3px);}
.mw-uses-list li > a:first-of-type{margin-top: auto;}
@media (max-width:1200px){.mw-uses{padding-inline: 40px;} .mw-uses-list{grid-template-columns: repeat(3, minmax(0, 1fr));}}
@media (max-width:1000px){.mw-uses-grid{grid-template-columns: minmax(0, 1fr);} .mw-uc-review,.mw-uc-inv,.mw-uc-insp,.mw-uc-cpv{grid-column: auto;}}
@media (max-width:992px){.mw-uses{padding-inline: 24px; padding-top: 8px; padding-bottom: 88px;} .mw-uses-list{grid-template-columns: repeat(2, minmax(0, 1fr));}}
@media (max-width:640px){.mw-uses{padding-inline: 16px;} .mw-uses-grid{gap: 10px;} .mw-uc{height: 520px;} .mw-uc-cap{left: 20px; right: 20px; bottom: 22px; font-size: 16px;} .mw-uses-list{grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 12px;} .mw-tlw{display: none;} .mw-askp{right: auto; left: 50%; margin-left: -10.25em;} .mw-pg{left: 4%; top: 4%; width: 22em;} .mw-rv{right: 3%; top: 57%; width: 19.5em; padding: .8em 1em;} .mw-rv-i:nth-of-type(2){display: none;} .mw-gt{font-size: 16.5px;} .mw-gs{font-size: 13.5px;}}

/* ─────────── SECTION 2: what Mareana is (white; hero fades into it) ─────────── */
.mw-intro{background: #FFFFFF; color: var(--foreground-primary); font-family: "Poppins", sans-serif; padding: 72px 80px 120px;
  --mw-ink3: #5F6673; --mw-line: rgba(26,24,27,0.10); --mw-teal: #12B5A0; --mw-teal-d: #0B8577; --mw-blue: #4361EE;}
.mw-intro-in{max-width: 1280px; margin: 0 auto;}
.mw-intro-text{display: flex; flex-direction: column; align-items: center; gap: 20px; margin-bottom: 56px; text-align: center;}
.mw-it{margin: 0; max-width: 820px; font-size: clamp(28px, 3.6vw, 40px); font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; color: var(--foreground-primary); text-wrap: balance;}
.mw-is{margin: 0; max-width: 780px; font-size: clamp(16px, 1.6vw, 18px); font-weight: 400; line-height: 1.6; color: rgba(26,24,27,.7); text-wrap: balance;}
.mw-flowbox{border: 1px solid var(--mw-line); border-radius: var(--radius-5xl); background: #FFFFFF; overflow: hidden;}
.mw-flow{list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));}
.mw-flow-i{display: flex; flex-direction: column; margin: 0; padding: 16px 16px 24px; text-align: left;}
.mw-fv{margin: 0 0 22px; aspect-ratio: 10 / 7; padding: 12px; border-radius: 14px; background: radial-gradient(120% 90% at 50% 0%, rgba(67,97,238,0.18), transparent 60%), #07051A; border: 1px solid #1C1A3C; font-family: "Poppins", sans-serif;} .mw-fv svg{display: block; width: 100%; height: 100%;}
.mw-flow-i > :not(.mw-fv){margin-left: 8px; margin-right: 8px;}
.mw-flow-i + .mw-flow-i{border-left: 1px solid var(--mw-line);}
.mw-fn{margin-right: 10px; font: inherit; letter-spacing: inherit; color: rgba(26,24,27,0.28);}   /* the step number sits in front of the title, same size, light grey */
.mw-flow-i h3{margin: 0 0 10px; font-size: 18px; font-weight: 500; line-height: 1.3; letter-spacing: -0.02em;}
.mw-flow-i p{margin: 0 0 28px; font-size: 15px; line-height: 1.6; color: rgba(26,24,27,.7);}
.mw-fm{margin-top: auto; padding-top: 16px; border-top: 1px solid var(--mw-line); font-size: 13px; line-height: 1.5; color: var(--mw-ink3);} .mw-fm b{display: block; font-weight: 500; color: var(--foreground-primary);}
.mw-person{display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 18px 28px; border-top: 1px solid var(--mw-line); background: #F5F7FA; font-size: 15px; color: var(--mw-ink3);}
.mw-person p{margin: 0;} .mw-person b{font-weight: 500; color: var(--foreground-primary);}
.mw-jo{display: grid; place-items: center; height: 26px; padding: 0 12px; border-radius: 999px; background: var(--foreground-primary); color: #FFFFFF; font-size: 12px; font-weight: 600;}
.mw-trail{margin-left: auto; font-size: 13px; color: var(--mw-ink3);}
@media (max-width:1200px){.mw-intro{padding-inline: 40px;}}
@media (max-width:1100px){.mw-flow{grid-template-columns: repeat(2, minmax(0, 1fr));} .mw-flow-i:nth-child(odd){border-left: 0;} .mw-flow-i:nth-child(n+3){border-top: 1px solid var(--mw-line);}}
@media (max-width:640px){.mw-flow{grid-template-columns: minmax(0, 1fr);} .mw-flow-i + .mw-flow-i{border-left: 0; border-top: 1px solid var(--mw-line);}}
@media (max-width:992px){.mw-intro{padding-inline: 24px; padding-top: 48px; padding-bottom: 88px;} .mw-intro-text{margin-bottom: 40px;}
  .mw-trail{margin-left: 0; width: 100%;} .mw-person{padding-inline: 22px;}}
@media (max-width:640px){.mw-intro{padding-inline: 16px;}}

/* ─────────── TRUSTED BY: customer names in a hairline grid, straight under the hero card (from Home Page Build.html) ─────────── */
.mw-trust{width: 100%; margin-top: 56px; font-family: "Poppins", sans-serif;}   /* inside the hero, so it shares its background */
.mw-trust-ttl{margin: 0 0 24px; text-align: center; font-size: 15px; font-weight: 400; line-height: 1.5; color: var(--on-dark-70);}
.mw-trust-in{display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); border: 1px solid rgba(255,255,255,0.10); background: #00000008; backdrop-filter: blur(4px) saturate(1.4);}
.mw-trust-in span{display: grid; place-items: center; height: 96px; font-size: 15px; font-weight: 500; line-height: 1; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-50);}
.mw-trust-in span + span{border-left: 1px solid rgba(255,255,255,0.10);}
.mw-trust-in img{display: block; height: auto; width: 88px;}
.mw-trust-in img.mono{filter: brightness(0) invert(.57);}   /* colour PNG, flattened to the same grey as the SVG marks */
.mw-trust-in img{transition: filter .3s ease;}
.mw-trust-in span:hover img,.mw-trust-in span:hover img.mono{filter: brightness(0) invert(1);}   /* logo goes white on hover */
@media (max-width:992px){
  .mw-trust-in{grid-template-columns: repeat(4, minmax(0, 1fr));}
  .mw-trust-in span{height: 72px; font-size: 13px; letter-spacing: .06em;}
  .mw-trust-in span:nth-child(5){border-left: 0;}
  .mw-trust-in span:nth-child(n+5){border-top: 1px solid rgba(255,255,255,0.10);}
  .mw-trust-in img{width: 70px;}
}
/* guide lines, as in Home Page Build: two vertical rails a fixed gap (--gp) outside the content edges of every band after the hero, and a seam hairline across the top of each with a hollow dot where it meets a rail */
.mw-intro,.mw-uses,.mw-rec,#record.mw-rec,.mw-faq,.mw-cta-wrap,.bp-m-band,.mw-built{--gx: 80px; --gp: 32px; --gxe: calc(max(var(--gx), (100% - 1280px) / 2) - var(--gp)); --gl: rgba(26,24,27,0.08); --gh: rgba(26,24,27,0.10); --gs: rgba(26,24,27,0.24); --gd: #FFFFFF; position: relative;
  background-image: linear-gradient(var(--gl), var(--gl)), linear-gradient(var(--gl), var(--gl));
  background-size: 1px 100%, 1px 100%; background-repeat: no-repeat;
  background-position: left var(--gxe) top 0, right var(--gxe) top 0;}
.mw-built{--gl: rgba(255,255,255,0.10); --gh: rgba(255,255,255,0.14); --gs: rgba(255,255,255,0.40); --gd: #07051A;
  background-image: linear-gradient(var(--gl), var(--gl)), linear-gradient(var(--gl), var(--gl)), radial-gradient(120% 60% at 50% 20%, rgba(67,97,238,0.14), transparent 70%);
  background-size: 1px 100%, 1px 100%, auto; background-position: left var(--gxe) top 0, right var(--gxe) top 0, 0 0;}
.mw-seam{position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--gh); z-index: 3; pointer-events: none;}
.mw-seam::before,.mw-seam::after{content: ""; position: absolute; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--gd); box-shadow: inset 0 0 0 1px var(--gs);}
.mw-seam::before{left: calc(var(--gxe) - 3px);} .mw-seam::after{right: calc(var(--gxe) - 3px);}
.bp-m-day{overflow: visible;}
@media (max-width:1200px){.mw-intro,.mw-uses,.mw-rec,#record.mw-rec,.mw-faq,.mw-cta-wrap,.bp-m-band,.mw-built{--gx: 40px; --gp: 24px;}}
@media (max-width:992px){.mw-intro,.mw-uses,.mw-rec,#record.mw-rec,.mw-faq,.mw-cta-wrap,.bp-m-band,.mw-built{--gx: 24px; --gp: 16px;}}
@media (max-width:640px){.mw-intro,.mw-uses,.mw-rec,#record.mw-rec,.mw-faq,.mw-cta-wrap,.bp-m-band,.mw-built{--gx: 16px; --gp: 8px;}}
/* phones: no guide rails down the sides and no seam hairlines with dots across the section tops */
@media (max-width:640px){.mw-intro,.mw-uses,.mw-rec,#record.mw-rec,.mw-faq,.mw-cta-wrap,.bp-m-band{background-image: none;} .mw-built{background-image: radial-gradient(120% 60% at 50% 20%, rgba(67,97,238,0.14), transparent 70%); background-size: auto; background-position: 0 0;} .mw-seam{display: none;}}
/* the eyebrow line and dot are desktop only: tablet and phone labels are plain text */
@media (max-width:992px){.mw-eyebrow::before,.mw-eyebrow i,.bp-m-eyebrow::before,.bp-m-eyebrow i{display: none;}}
/* phones: a Request a Demo button closes the key sections */
.mob-demo{display: none;}
/* What changes, tablet and phone: only the open panel takes space, so the tabs sit right under it whatever its height */
@media (max-width:900px){.wr-r:not(.act){display: none;}}
/* phones, the platform cards: icon on the left with "01 Run" and the title beside it, the description full width underneath */
@media (max-width:640px){
  .mw-pl-r{grid-template-columns: 60px minmax(0, 1fr) 38px; grid-template-areas: "icon eyebrow arrow" "icon title arrow" "desc desc desc"; grid-template-rows: auto auto auto; column-gap: 16px; row-gap: 0; align-items: center;}
  .mw-pl-r .mw-pl-t{display: contents;}
  .mw-pl-list .mw-pl-r{row-gap: 0;}
  main .mw-pl-list{grid-template-columns: minmax(0, 1fr); gap: 0;}   /* no progress line beside the cards on phones */
  main .mw-pl-list > .mw-pl-rail{display: none;}
  main .mw-pl-list > div{grid-auto-rows: 1fr;}   /* every card the same height */
  .mw-pl-r .mw-pl-g{grid-area: icon; align-self: center; margin-block: -6px;}   /* the negative margin stops the taller icon from pushing the label and title apart */
  .mw-pl-r .mw-pl-s{grid-area: eyebrow; align-self: end; margin: 0 0 2px;}
  .mw-pl-r .mw-pl-t b{grid-area: title; align-self: start;}
  .mw-pl-r > svg{grid-area: arrow;}
  .mw-pl-r .mw-pl-t .bp-m-ink2{grid-area: desc; margin-top: 16px;}
}
@media (max-width:640px){.mob-demo{display: flex; justify-content: center; padding: 40px 16px 0;}}
.bp-m-band{--gd: var(--ground);}
.bp-m-seam{display: none;}
section.bp-m-band .bp-m-col{max-width: calc(1280px + 2 * var(--gx)); padding-inline: var(--gx);}   /* same content edge as the other bands, so the rails sit the same gap outside */
/* eyebrow, as in Home Page Build: a short horizon line, then a hollow dot */
.mw-eyebrow{gap: 10px; font-size: 13px; line-height: 16px; letter-spacing: 0.08em; --es: rgba(26,24,27,0.24);}
.mw-eyebrow::before{content: ""; width: 24px; height: 1px; background: var(--es);}
.mw-eyebrow i,.mw-built .mw-eyebrow i{width: 7px; height: 7px; margin-left: -10px; background: none; box-shadow: inset 0 0 0 1px var(--es);}
.mw-built .mw-eyebrow{--es: rgba(255,255,255,0.40);}
@media (max-width:640px){.mw-eyebrow{font-size: 12px;}}
/* section heads: eyebrow and title on the left, subtitle on the right; the eyebrow line runs back to the left guide */
.mw-uses-head,.mw-intro-text,.bp-m-head{display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 64px; row-gap: 20px; align-items: start; justify-items: start; text-align: left;}
.mw-uses-head > .mw-eyebrow,.mw-intro-text > .mw-eyebrow,.bp-m-head > .bp-m-eyebrow{grid-column: 1 / -1;}
.mw-uses-head > .mw-it,.mw-intro-text > .mw-it,.bp-m-head > h2{grid-column: 1; max-width: 640px; margin: 0;}
.mw-uses-head > .mw-is,.mw-intro-text > .mw-is,.bp-m-head > p:not(.bp-m-eyebrow){grid-column: 1; max-width: 640px; margin: 0; text-wrap: pretty;}
.mw-uses-head .mw-eyebrow,.mw-intro-text .mw-eyebrow,.mfq-head .mw-eyebrow,.bp-m-head .bp-m-eyebrow{gap: 0;}
.mw-uses-head .mw-eyebrow::before,.mw-intro-text .mw-eyebrow::before,.mfq-head .mw-eyebrow::before,.bp-m-head .bp-m-eyebrow::before{margin-left: calc(-1 * var(--gp)); width: max(0px, calc(var(--gp) - 17px));}
.mw-uses-head .mw-eyebrow i,.mw-intro-text .mw-eyebrow i,.mfq-head .mw-eyebrow i,.bp-m-head .bp-m-eyebrow i{margin: 0 10px 0 0;}   /* line, dot, 10px, then the text starts on the content edge */
@media (max-width:900px){.mw-uses-head,.mw-intro-text,.bp-m-head{grid-template-columns: minmax(0, 1fr);} .mw-uses-head > .mw-is,.mw-intro-text > .mw-is,.bp-m-head > p:not(.bp-m-eyebrow){grid-column: 1;}}
/* every band after the hero: 100px above and below */
.mw-intro,.mw-uses,.mw-rec,.mw-built,.mw-faq,.mw-cta-wrap,.bp-m-band,.bp-m-band.m-tight,[data-theme].bp-m-band,#record.mw-rec{padding-block: 100px;}
@media (max-width:1100px){.bp-m-band,.bp-m-band.m-tight,[data-theme].bp-m-band{padding-block: 100px;}}
@media (max-width:992px){.mw-intro,.mw-uses,.mw-rec,.mw-built,.mw-faq,.mw-cta-wrap,.bp-m-band,#record.mw-rec{padding-block: 100px;}}
@media (max-width:640px){.bp-m-band,.bp-m-band.m-tight,[data-theme].bp-m-band,.mw-intro,.mw-uses,.mw-rec,.mw-built,.mw-faq,.mw-cta-wrap{padding-block: 100px;}}
/* CTA, as in the reference design: centred copy on the dark card, with a periwinkle marquee strip tucked behind its bottom corners */
/* Batch review card background: full-bleed, with a corner glow and diagonal hatching, in the theme blues */
.mw-uc-review::before{content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 20px; pointer-events: none;
  background: radial-gradient(65% 55% at 100% 0%, rgba(67,97,238,0.46), rgba(67,97,238,0) 72%);
  -webkit-mask-image: radial-gradient(130% 120% at 72% 40%, #000 35%, rgba(0,0,0,0.25) 85%); mask-image: radial-gradient(130% 120% at 72% 40%, #000 35%, rgba(0,0,0,0.25) 85%);}
.mw-uc-review .mw-ui::after{content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: 38%; border-radius: 20px 20px 0 0; pointer-events: none;
  background: repeating-linear-gradient(135deg, rgba(142,160,245,0.26) 0 10px, transparent 10px 30px);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent); mask-image: linear-gradient(180deg, #000, transparent);}
/* links under each card caption, as in Home Page Build */
.mw-uc-cap{bottom: 62px;}
.mw-uc-go{position: absolute; z-index: 3; left: 28px; right: 28px; bottom: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px;}
.mw-uc-go a{font-size: 14px; font-weight: 500; line-height: 20px; color: #A0B8FC; text-decoration: none; transition: color .2s;}
.mw-uc-go a:hover{color: #E6EDFE;}
.mw-uc-go svg{display: inline-block; width: 12px; height: 12px; margin-left: 6px; vertical-align: -1px;}
@media (max-width:640px){.mw-uc-cap{bottom: 56px;} .mw-uc-go{left: 20px; right: 20px; bottom: 20px;}}
@container (max-width:520px){.mw-uc-cap:has(+ .mw-uc-go a + a){bottom: 88px;} .mw-ui:has(~ .mw-uc-go a + a){inset: 0 0 156px 0;}}   /* only a card with two links needs the room: they wrap to two lines in a narrow card; a one-link card keeps the normal gap */
/* the connection line from the flagged row to the review panel, as in Home Page Build */
.mw-link{position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2;}
.mw-link path{fill: none; stroke: #4361EE; stroke-width: 1.5; stroke-dasharray: 100; stroke-dashoffset: 100; vector-effect: non-scaling-stroke;}
.mw-link circle{fill: #4361EE; opacity: 0;}
.mw-uc-inv{background: #07051A;}   /* as dark as the first card */
.mw-uc-inv .mw-ui::before{background: #0B0A26; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);}   /* a flat dark panel: no shadow halo, no blur around it */
/* chart card: a seamless background, a large soft blue light from the top right into deep black; the chart sits straight on it, no panel */
.mw-uc-cpv{background: radial-gradient(78% 86% at 100% 14%, rgba(112,140,250,0.95) 0%, rgba(67,97,238,0.66) 26%, rgba(40,62,168,0.34) 52%, rgba(5,6,12,0) 80%), radial-gradient(60% 70% at 0% 4%, rgba(34,50,140,0.45), rgba(5,6,12,0) 72%), radial-gradient(45% 40% at 30% 40%, rgba(24,36,100,0.35), rgba(5,6,12,0) 100%), #05060C;}   /* a large soft light in the primary blue, #4361EE, from the top right into deep black */
/* Inspections card, from the Resource page design: two dim timelines flanking a frosted card, in the theme blues */
.ip-mock{position: absolute; left: 50%; top: 50%; width: 830px; height: 300px; margin: -150px 0 0 -415px; transform: scale(var(--ips, .8)); transform-origin: 50% 50%; font-family: "Poppins", sans-serif;}
.ip-mock.narrow{width: 414px; margin-left: -207px;} .ip-mock.narrow .ip-tl{display: none;} .ip-mock.narrow .ip-card{left: 0;}
.ip-tl{position: absolute; left: 0; top: 6px; width: 190px; opacity: .92;}   /* both timelines clearly readable */
.ip-tl--r{left: auto; right: 0; text-align: right;}
.ip-tl--r .ip-rail{left: auto; right: 5px;}
.ip-tl--r .ip-ev{padding: 0 26px 18px 0;} .ip-tl--r .ip-ev i{left: auto; right: 0;}
.ip-rail{position: absolute; left: 5px; top: 10px; bottom: 34px; width: 1.5px; background: linear-gradient(180deg, rgba(160,184,252,.85), rgba(160,184,252,.22)); transform-origin: top;}
.ip-ev{position: relative; padding: 0 0 18px 26px;}
.ip-ev i{position: absolute; left: 0; top: 5px; width: 11px; height: 11px; border-radius: 50%; background: #07051A; box-shadow: inset 0 0 0 1.5px #8EA0F5, 0 0 10px rgba(67,97,238,.6);}
.ip-ev .d{display: inline-block; font: 500 12px/1 "Poppins", sans-serif; letter-spacing: .06em; background: linear-gradient(90deg, #6B82F2, #CFD8FF); -webkit-background-clip: text; background-clip: text; color: transparent;}
.ip-ev b{display: block; margin-top: 5px; font: 500 15px/1.25 "Poppins", sans-serif; color: #fff;}
.ip-ev small{display: block; margin-top: 2px; font-size: 12px; color: rgba(255,255,255,.66);}
.ip-card{position: absolute; left: 208px; top: -6px; width: 414px; padding: 20px 22px 18px; border-radius: 16px; border: 1px solid transparent; -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  background: linear-gradient(180deg, rgba(15,14,46,.94), rgba(8,7,26,.96)) padding-box, linear-gradient(135deg, rgba(162,184,253,.55), rgba(255,255,255,.07) 38%, rgba(107,130,242,.35)) border-box; box-shadow: 0 24px 50px -16px rgba(0,0,0,.9), 0 0 40px -12px rgba(67,97,238,.45);}
.ip-card header{display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font: 500 17px/1 "Poppins", sans-serif; color: #fff;} .ip-card header svg{width: 20px; height: 16px; fill: #8EA0F5;}
.ip-q{display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 13px 0; border-top: 1px solid rgba(192,211,253,.09);}
.ip-q p{margin: 0; font-size: 15px; line-height: 1.35; color: #FFFFFF;}
.ip-q code{flex: none; font: 400 12px/1 "Roboto Mono", ui-monospace, Menlo, monospace; padding: 6px 9px; border-radius: 7px; color: #b4cbfd; background: rgba(67,97,238,.16); box-shadow: inset 0 0 0 1px rgba(107,130,242,.32);}
.ip-card footer{margin-top: 4px; padding-top: 12px; border-top: 1px solid rgba(192,211,253,.09);}
.ip-f{margin: 0 0 9px; font: 500 11px/1 "Poppins", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6);}
.ip-who{display: flex; align-items: center; gap: 10px; font-size: 14px; color: #FFFFFF;}
.ip-jo{display: grid; place-items: center; width: 30px; height: 22px; border-radius: 7px; background: linear-gradient(135deg, #4361EE, #CFD8FF); color: #1A181B; font-size: 10px; font-weight: 600;}
.mw-uses.is-live .ip-ev,.mw-uses.is-live .ip-card,.mw-uses.is-live .ip-q,.mw-uses.is-live .ip-card footer{opacity: 0;} .mw-uses.is-live .ip-rail{transform: scaleY(0);}
/* The ways in, from Home Page Build: three columns in a closed hairline box, as in the platform grid */
.bp-wy-cols{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 56px; border-right: 1px solid var(--hairline); border-top: 1px solid var(--hairline);}
.bp-wy{--wp: 32px; display: flex; flex-direction: column; gap: 14px; padding: 32px var(--wp) 36px; border-left: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);}
.bp-wy-top{display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;}
.bp-wy h3{margin: 2px 0 0;}
.bp-wy p.bp-m-ink2{max-width: 34ch;}
.bp-wy .bp-m-link{display: block; margin-top: auto; padding-top: 10px; font-size: 15px;}
.bp-wy .bp-m-link svg{display: inline-block; vertical-align: -1px; margin-left: 8px;}
@media (max-width:900px){.bp-wy-cols{grid-template-columns: minmax(0, 1fr);}}
@media (max-width:640px){.bp-wy-cols{margin-top: 40px;} .bp-wy{--wp: 20px; padding: 26px var(--wp) 28px;}}
/* each eyebrow's line runs back to the column's separator, then the hollow dot, then the text on the content edge */
.bp-wy .bp-m-eyebrow{gap: 0;} .bp-wy .bp-m-eyebrow::before{margin-left: calc(-1 * var(--wp)); width: max(0px, calc(var(--wp) - 17px));} .bp-wy .bp-m-eyebrow i{margin: 0 10px 0 0;}
.bp-wy .bp-m-eyebrow::before,.bp-wy .bp-m-eyebrow i{display: none;}   /* in the cards the label is just text, flush with the title; the line and circle used to hang off the card's left edge */
/* the Build-file bands: heads use the same two columns as the other sections (title left, subtitle right) */
section.bp-m-band .bp-m-head{display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 64px; row-gap: 20px; align-items: start; justify-items: start; margin-bottom: 56px; text-align: left;}
section.bp-m-band .bp-m-head > .bp-m-eyebrow{grid-column: 1 / -1;}
section.bp-m-band .bp-m-head .bp-t-section{grid-column: 1; max-width: 640px; margin: 0;}
section.bp-m-band .bp-m-head p.bp-t-lead{grid-column: 1; max-width: 640px; margin: 0; text-wrap: pretty;}
@media (max-width:900px){section.bp-m-band .bp-m-head{grid-template-columns: minmax(0, 1fr);} section.bp-m-band .bp-m-head p.bp-t-lead{grid-column: 1;}}
/* How it works: the artwork and the step-by-step animation from Home Page Build, inside the existing cards. Each step is dim until the work reaches it, then built. */
.mw-flow{--font-data: "Roboto Mono", ui-monospace, Consolas, monospace; --font-text: "Poppins", system-ui, sans-serif; --ease-arrive: cubic-bezier(.16,1,.3,1);}
.mw-fv{display: grid; place-items: center;}
.mw-fv .ls-art{display: block; width: auto; height: 90%; max-width: 94%; overflow: visible;}
/* an old global .paper rule gives the drawing's page a CSS height of 0: put its geometry back, and make the page white */
.mw-flow-i .ls-art .paper{height: 104px; padding: 0; background: none; box-shadow: none; fill: #FFFFFF; opacity: 1;}
.ls-art{display:block;width:100%;max-width:200px;height:auto;overflow:visible}
.ls-art .sys rect{fill:rgba(255,255,255,.03);stroke:rgba(160,184,252,.5)}.ls-art .sys text{font-size:12px;fill:#CAD8FF}
.ls-art :where(text:not([font-family])){font-family:var(--font-data)}  /* not the handwriting, which names its face */
.ls-art .paper{fill:#E6E9EF;opacity:.82;transition:opacity .6s}.ls-art .pn{font-size:12px;fill:#3F4552}.ls-art .prule{stroke:#C9CFD9}
.ls-art .b-hl{fill:none;stroke:#4361EE;stroke-width:1.6;opacity:0;transition:opacity .4s .5s}
.ls-art .b-out rect{fill:rgba(65,234,212,.08);stroke:#41EAD4}.ls-art .b-out text{font-size:12.5px;fill:#41EAD4}
.ls-art .b-out{opacity:0;transform:translateY(6px);transition:opacity .5s 1s,transform .5s 1s}
.ls-art .ck{font:400 12.5px var(--font-text);fill:rgba(240,243,247,.62);transition:fill .4s var(--d)}
.ls-art .ok{fill:rgba(255,255,255,.2);transition:fill .4s var(--d)}.ls-art .rt{fill:none;stroke:rgba(255,255,255,.3);stroke-width:1.4;transition:stroke .4s var(--d)}
.ls-art .to{font-size:12px;fill:#A0B8FC;opacity:0;transition:opacity .4s var(--d)}
.ls-art .b-n rect{fill:none;stroke:rgba(255,255,255,.22);transition:stroke .4s var(--d)}.ls-art .b-n text{font-size:12.5px;fill:rgba(240,243,247,.62);transition:fill .4s var(--d)}
.ls-art .b-l{fill:none;stroke:#41EAD4;stroke-width:1.4;stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .4s var(--d)}
.ls-art .b-src rect{fill:rgba(255,255,255,.04);stroke:rgba(160,184,252,.35);transition:stroke .4s var(--d)}.ls-art .b-src text{font-size:12px;fill:rgba(240,243,247,.62)}
.ls-art .side{font-size:12px;fill:rgba(240,243,247,.56)}
.ls-art .g{stroke:rgba(255,255,255,.1)}.ls-art .lim{stroke:rgba(255,255,255,.45);stroke-dasharray:4 4}.ls-art .tk{font-size:12px;fill:rgba(240,243,247,.62)}
.ls-art .b-line{fill:none;stroke:#A0B8FC;stroke-width:1.5;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset 1.1s var(--ease-arrive)}
.ls-art .b-pt{fill:none;stroke:#F0F3F7;stroke-width:1.6;opacity:0;transition:opacity .3s 1.1s,stroke .3s 1.1s}
.ls-art .doc{fill:rgba(255,255,255,.03);stroke:rgba(255,255,255,.16)}.ls-art .dt{font:500 12.5px var(--font-text);fill:rgba(240,243,247,.86)}
.ls-art .b-w{stroke:rgba(255,255,255,.3);stroke-width:2;stroke-dasharray:160;stroke-dashoffset:160;transition:stroke-dashoffset .5s var(--d)}
.ls-art .b-tag{font-size:12px;fill:rgba(240,243,247,.66);transition:fill .4s 1.3s}
.mw-flow-i.on .paper{opacity:1}.mw-flow-i.on .b-hl{opacity:1}.mw-flow-i.on .b-out{opacity:1;transform:none}
.mw-flow-i.on .ck{fill:#F0F3F7}.mw-flow-i.on .ok{fill:#41EAD4}.mw-flow-i.on .rt{stroke:#A0B8FC}.mw-flow-i.on .to{opacity:1}
.mw-flow-i.on .b-n rect{stroke:#41EAD4}.mw-flow-i.on .b-n text{fill:#41EAD4}.mw-flow-i.on .b-l{stroke-dashoffset:0}.mw-flow-i.on .b-src rect{stroke:#A0B8FC}
.mw-flow-i.on .b-line{stroke-dashoffset:0}.mw-flow-i.on .b-pt{opacity:1;stroke:#41EAD4}
.mw-flow-i.on .b-w{stroke-dashoffset:0;stroke:rgba(65,234,212,.6)}.mw-flow-i.on .b-tag{fill:#41EAD4}
/* Build or buy, from Home Page Build: two cards side by side, "Built in-house" and "Mareana" */
.bp-m-compare{--raised: #FFFFFF; --window-edge: rgba(26,24,27,.08); --shadow-card: 0 12px 36px -8px rgba(26,35,64,.12), 0 1px 2px rgba(26,35,64,.06); --action: #4361EE; --ink-1: #1A181B; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start;}
.bp-m-compare > div{padding: 32px; border-radius: 16px;}
.bp-m-compare .bp-m-old{box-shadow: inset 0 0 0 1px var(--hairline); color: var(--ink-3);} .bp-m-compare .bp-m-old h3{color: var(--ink-2);}
.bp-m-compare .bp-m-ours{background: var(--raised); box-shadow: inset 0 0 0 1px var(--window-edge), var(--shadow-card);}
.bp-m-compare ul{list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 0;}
.bp-m-compare li{display: grid; grid-template-columns: 16px 1fr; gap: 14px; padding: 16px 0; border-top: 1px solid var(--hairline);}
.bp-m-compare li b{display: block; font: 400 12px/16px var(--font-data); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 4px; color: var(--ink-3);}
.bp-m-mark{width: 12px; height: 12px; border-radius: 50%; margin-top: 7px;}
.bp-m-compare .bp-m-old .bp-m-mark{box-shadow: inset 0 0 0 1.5px var(--ink-3);} .bp-m-compare .bp-m-ours .bp-m-mark{background: var(--action);}
.bp-m-compare .bp-m-ours li{color: var(--ink-1);}
@media (max-width:760px){.bp-m-compare{grid-template-columns: minmax(0, 1fr);} .bp-m-compare > div{padding: 22px;}}
/* How it is built, restructured as in Home Page Build: the results list on the left; each pane has the evidence, then the result, how it was found and who reads it */
.bt-rh{padding: 0 28px 24px;}
.bt-pane{gap: 0;}
.bt-how .bt-val{margin: 10px 0 2px; font-size: clamp(24px, 2.4vw, 30px); letter-spacing: -.02em;}
.bt-how .bt-conf{margin: 0;}
.bt-how .bt-k2{margin-top: 26px;}
/* Validation: a white background */
section.bp-m-band.bp-m-day{--ground: #FFFFFF; background-color: #FFFFFF;}
section.bp-m-band[aria-labelledby="h2p"]{--ground: #FFFFFF; background-color: #FFFFFF;}   /* The platform: white, like the sections around it */
/* the CTA band: less space above and below the card (the card itself is unchanged) */
.mw-cta-wrap{padding-block: 40px;}
@media (max-width:992px){.mw-cta-wrap{padding-block: 32px;}}
/* CTA, from the reference build: a bento of rounded cells drawn by a shader, the message in the centre cell, a light that moves between its corners */
.mw-cta-wrap > section#book-demo.cta2{--g: 8px; max-width: 1280px; margin-inline: auto; padding: 0; display: grid; grid-template-columns: minmax(28px, 8%) minmax(0, 1fr) minmax(28px, 8%); grid-template-rows: 64px auto 64px; gap: var(--g); text-align: center; background: #13123F; border-radius: 22px;}
.cta2 .cta2-gl{position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; pointer-events: none;}
.cta2 .cta2-card{position: relative; z-index: 1; grid-column: 2; grid-row: 2; display: flex; flex-direction: column; align-items: center; min-width: 0; border: 0; border-radius: 22px; background: transparent; padding: 4.5rem 1.5rem 4.75rem;}
#book-demo.cta2 h2{margin: 0 auto 1.25rem; max-width: 12em; font: 500 clamp(2.2rem, 4.4vw, 3.4rem)/1.1 "Poppins", sans-serif; letter-spacing: -.01em; color: #fff; text-wrap: balance;}
.cta2 .cta-lead{margin: 0 auto; max-width: 36em; color: rgba(255,255,255,.62);}
.cta2 .cta-btn{margin-top: 32px;}
.cta2.cta2-nogl .cta2-card{background: #13123F;}
@media (max-width:767.98px){.mw-cta-wrap > section#book-demo.cta2{--g: 6px; grid-template-rows: 36px auto 36px; border-radius: 16px;} .cta2 .cta2-card{padding: 3rem 1.25rem 3.25rem; border-radius: 16px;} .cta2 h2{font-size: 2rem;}}
/* How Mareana Process: the dark panels are a little taller and the drawings fill them, with larger, brighter text, so the labels read clearly */
.mw-fv{aspect-ratio: 4 / 3;}
.mw-fv{padding: 4px;}
.mw-fv .ls-art{width: 100%; height: auto; max-width: none;}
.mw-flow-i .ls-art text:not([font-family]){font-size: 14px;}
.mw-flow-i .ls-art .ck,.mw-flow-i .ls-art .b-n text,.mw-flow-i .ls-art .b-src text,.mw-flow-i .ls-art .side,.mw-flow-i .ls-art .tk,.mw-flow-i .ls-art .b-tag{fill: rgba(240,243,247,.86);}
.mw-flow-i.on .ls-art .ok{fill: #41EAD4;}
/* the Check list: "to a reviewer" sits at the right edge, so it and the label before it stay a little smaller and never meet */
.mw-flow-i .ls-art text.ck:not([font-family]){font-size: 13px;}
.mw-flow-i .ls-art text.to:not([font-family]){font-size: 11.5px;}
/* Hero card: the animation from Home Page Build, on our own design. One class starts the trace: the chart link, the sources into 24-117, the lot, the other batches; then the lot name, the detail rows and the person. */
.mw-box.anim .mw-lit .mw-p{stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s cubic-bezier(.16,1,.3,1) var(--d, 0s);}
.mw-box.anim.run .mw-lit .mw-p{stroke-dashoffset: 0;}
.mw-box .mw-lit .mw-p:nth-child(7){--d: .6s;} .mw-box .mw-lit .mw-p:nth-child(1),.mw-box .mw-lit .mw-p:nth-child(2){--d: 1.3s;} .mw-box .mw-lit .mw-p:nth-child(4){--d: 1.9s;}
.mw-box .mw-lit .mw-p:nth-child(3){--d: 2.6s;} .mw-box .mw-lit .mw-p:nth-child(5){--d: 3.3s;} .mw-box .mw-lit .mw-p:nth-child(6){--d: 3.5s;}
.mw-box.anim .mw-n{transition: border-color .6s cubic-bezier(.16,1,.3,1) var(--d, 0s);}
.mw-box.anim:not(.run) .mw-n.is-lit:not(.dim),.mw-box.anim:not(.run) .mw-n.key.is-lit{border-color: #2E2C60;}
.mw-box .n-cpv{--d: .6s;} .mw-box .n-b117{--d: 1s;} .mw-box .n-s1,.mw-box .n-s2{--d: 1.7s;} .mw-box .n-lB{--d: 2.3s;} .mw-box .n-s5{--d: 3s;} .mw-box .n-b118{--d: 3.7s;} .mw-box .n-b121{--d: 3.9s;}
.mw-box.anim.run .mw-dot{animation: mwPt 1.6s cubic-bezier(.16,1,.3,1) 1.9s 2;}
@keyframes mwPt{0%{stroke-width: 1.5;} 40%{stroke-width: 4; stroke: #F94E9B;} 100%{stroke-width: 1.5;}}
.mw-box.anim .mw-lot,.mw-box.anim .mw-row,.mw-box.anim .mw-who{opacity: 0; transform: translateY(8px); transition: opacity .8s cubic-bezier(.16,1,.3,1) var(--d, 0s), transform .8s cubic-bezier(.16,1,.3,1) var(--d, 0s);}
.mw-box.anim.run .mw-lot,.mw-box.anim.run .mw-row,.mw-box.anim.run .mw-who{opacity: 1; transform: none;}
.mw-box .mw-lot{--d: 4.2s;} /* the rows are the 2nd to 7th divs of the panel (the heading is the 1st) */
.mw-box .mw-row:nth-of-type(2){--d: 4.6s;} .mw-box .mw-row:nth-of-type(3){--d: 4.8s;} .mw-box .mw-row:nth-of-type(4){--d: 5s;} .mw-box .mw-row:nth-of-type(5){--d: 5.2s;} .mw-box .mw-row:nth-of-type(6){--d: 5.4s;} .mw-box .mw-row:nth-of-type(7){--d: 5.6s;}
.mw-box .mw-who{--d: 6.2s;}
.mw-box.anim .mw-av{transform: scale(.4); transition: transform .5s cubic-bezier(.34,1.56,.64,1) 6.3s;} .mw-box.anim.run .mw-av{transform: scale(1);}
@media (prefers-reduced-motion: reduce){.mw-box.anim *,.mw-box.anim{transition: none !important; animation: none !important;}}
/* tablet and mobile: the card animation as a pre-rendered GIF instead of the live card */
.mw-card-gif,.mw-sec-gif{display: none;}
@media (max-width: 992px){.mw-box,#record .rec-stage,.bt-stage{display: none;} .mw-sec-gif{display: block; width: 100%; max-width: 1280px; height: auto; margin-inline: auto;} .mw-sec-gif.rec{border-radius: 22px;} .mw-sec-gif.bt{border-radius: 32px;} .mw-card-gif{display: block; width: min(1280px, 100%); height: auto; margin-top: 72px; border-radius: calc(var(--radius-5xl) - 8px);}}
/* How it is built: a shorter window */
.bt-win{min-height: clamp(460px, 38vw, 520px);}
.bt-work{padding: 30px 40px 28px;}
.bt-rail{padding: 30px 0 22px;} .bt-rh{padding-bottom: 20px;}
.bt-rail button{padding: 18px 28px 18px 32px;}
.bt-how dl div{padding: 11px 0;}
.bt-dec{padding-top: 16px;}
.bt-sys,.bt-chart{margin-top: 14px; padding: 18px;} .bt-sys{gap: 10px;} .bt-sys>div{padding: 14px 16px;}
.bt-page>div{height: 44px;}
/* the UCL deviation circle in the Charted drawing keeps the deviation colour */
.mw-flow-i .ls-art .b-pt,.mw-flow-i.on .ls-art .b-pt{stroke: #F94E9B;}
/* hero card: the traced lines and the chart line run from the primary colour to a lighter primary */
.mw-box .mw-chart path{stroke: url(#mwChartG);}
/* hero chart: the deviation as in the reference image: pink spike, a filled pink point with a soft ring, a "Deviation" tag, a UCL label */
.mw-box .mw-chart path.mw-devp{stroke: #F94E9B; stroke-width: 1.9; stroke-dasharray: none; fill: none;}
.mw-box .mw-chart .mw-dot{fill: #F94E9B; stroke: #F94E9B;}
.mw-box .mw-chart .mw-halo{fill: rgba(249,78,155,.3);}
.mw-box .mw-chart .mw-ucl-t{font: 500 10px "Poppins", sans-serif; letter-spacing: .06em; fill: rgba(255,255,255,.8);}
.mw-box .mw-chart .mw-devtag rect{fill: rgba(249,78,155,.24); stroke: rgba(249,78,155,.75); stroke-width: 1;}
.mw-box .mw-chart .mw-devtag text{font: 500 11.5px "Poppins", sans-serif; fill: #FFD3E6;}
.mw-box.anim .mw-devp,.mw-box.anim .mw-halo,.mw-box.anim .mw-dot,.mw-box.anim .mw-devtag{opacity: 0; transition: opacity .6s cubic-bezier(.16,1,.3,1) 1.9s;}
.mw-box.anim.run .mw-devp,.mw-box.anim.run .mw-halo,.mw-box.anim.run .mw-dot,.mw-box.anim.run .mw-devtag{opacity: 1;}
/* the chart title, in the chart's own label style but a little brighter */
.mw-ui .mw-ct{fill: rgba(255,255,255,.9); font-size: 12px; letter-spacing: 0;}
/* the dark section: the eyebrow's connecting line is the same colour as the guide lines (the dot keeps a brighter ring so it still reads) */
.mw-built .mw-eyebrow{--es: rgba(255,255,255,0.10);}
.mw-built .mw-eyebrow i{box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4);}
/* How it is built: only the extracted field's evidence is the white paper; the relationship and the limit are dark */
.bt-sys,.bt-chart{background: rgba(255,255,255,.03); color: #F0F3F7; box-shadow: inset 0 0 0 1px rgba(255,255,255,.09);}
.bt-sys>div{background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);}
.bt-sys .sys,.bt-sys .sys{background: rgba(160,184,252,.12); box-shadow: inset 0 0 0 1px rgba(160,184,252,.5); color: #E6EDFE;}
.bt-sys span:not(.sys){color: rgba(240,243,247,.55);} .bt-sys b{color: #F0F3F7;} .bt-sys em{color: rgba(240,243,247,.5);}
.bt-sys .hl::after{box-shadow: inset 0 0 0 1.5px #A0B8FC;}
.bt-chart .bt-ref{color: rgba(240,243,247,.5);}
.bt-chart .g{stroke: rgba(255,255,255,.07);} .bt-chart .old{stroke: rgba(255,255,255,.25);} .bt-chart .lim{stroke: rgba(255,255,255,.4);} .bt-chart .lim.hl{stroke: #A0B8FC;}
.bt-chart .tk{fill: rgba(240,243,247,.6);} .bt-chart .tk.on{fill: #A0B8FC;} .bt-chart .src{stroke: #A0B8FC;} .bt-chart .pt{fill: #0B0A26;}
.bt-page{background: #FFFFFF; box-shadow: 0 18px 36px -20px rgba(0,0,0,.6);}
/* How it is built: the trace line (from Home Page Build) runs from the highlighted evidence to the result's value, ending in a dot */
.bt-work{position: relative;}
.bt-trace{position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; overflow: visible;}
.bt-trace path{fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: var(--len, 200); stroke-dashoffset: var(--len, 200); transition: stroke-dashoffset .7s cubic-bezier(.16,1,.3,1) .55s;}
.bt-trace circle{fill: #A0B8FC; opacity: 0; transition: opacity .3s .55s;}
.bt-pane.run .bt-trace path{stroke-dashoffset: 0;} .bt-pane.run .bt-trace circle{opacity: 1;}
@media (max-width:980px){.bt-trace{display: none;}}
/* How it is built: a divider on the right of the results column and on the left of the right-hand column */
.bt-rail{border-right: 1px solid rgba(255,255,255,.1);}
.bt-cols{gap: 0;}
.bt-ev{display: flex; flex-direction: column; padding-right: 36px;}
.bt-how{border-left: 1px solid rgba(255,255,255,.1); padding-left: 36px;}
@media (max-width:980px){.bt-rail{border-right: 0;} .bt-ev{padding-right: 0;} .bt-how{border-left: 0; padding-left: 0;}}
/* How it is built: more of the real record in the evidence */
.bt-hist{display: grid; gap: 10px; margin-top: 14px;}
.bt-hist > div{display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 16px; border-radius: 10px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);}
.bt-hist span{font: 400 12.5px/16px "Poppins", sans-serif; color: rgba(240,243,247,.58);}
.bt-hist b{font: 500 14.5px/20px "Poppins", sans-serif; color: #F0F3F7;}
/* CTA: the nine places to start, as a timeline of glowing points under the message */
.cta-tl{list-style: none; margin: 56px 0 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); column-gap: 16px; position: relative; text-align: left;}
.cta-tl::before{content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 1px; background: rgba(160,184,252,.25);}
.cta-tl li{position: relative; min-width: 0; padding: 36px 0 0 0; opacity: 0; transform: translateY(8px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);}
.cta-tl i{position: absolute; top: 0; left: 0; width: 11px; height: 11px; border-radius: 50%; background: #4361EE; box-shadow: 0 0 0 3px rgba(67,97,238,.28), 0 0 12px rgba(67,97,238,.85);}
.cta-tl .n{display: block; font: 500 14px/16px "Roboto Mono", ui-monospace, Consolas, monospace; letter-spacing: .04em; color: rgba(255,255,255,.85);}
.cta-tl .t{display: block; margin-top: 8px; font: 400 13px/1.35 "Poppins", sans-serif; color: #fff; text-wrap: balance;}
.cta-tl.on li{opacity: 1; transform: none;}
.cta-tl li:nth-child(2){transition-delay: .08s;} .cta-tl li:nth-child(3){transition-delay: .16s;} .cta-tl li:nth-child(4){transition-delay: .24s;} .cta-tl li:nth-child(5){transition-delay: .32s;} .cta-tl li:nth-child(6){transition-delay: .4s;} .cta-tl li:nth-child(7){transition-delay: .48s;} .cta-tl li:nth-child(8){transition-delay: .56s;} .cta-tl li:nth-child(9){transition-delay: .64s;}
@media (max-width:1240px){.cta-tl{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; margin: 40px 0 0; width: 100%;} .cta-tl::before{display: none;} .cta-tl li{padding-top: 28px;}}   /* below this the nine labels would not fit on one line each in a row */
@media (max-width:575.98px){.cta-tl{grid-template-columns: repeat(2, minmax(0, 1fr));} .cta-tl .t{white-space: normal;}}
/* below the one-row width, the nine steps run down one connected line instead of a loose grid of dots */
@media (max-width:1240px){
  .cta-tl{grid-template-columns: minmax(0, 1fr); row-gap: 22px; width: min(100%, 340px); margin: 40px auto 0;}
  .cta-tl::before{display: block; left: 5px; right: auto; top: 14px; bottom: 14px; width: 1px; height: auto;}
  .cta-tl li{display: flex; align-items: center; gap: 14px; padding: 0 0 0 32px;}
  .cta-tl i{top: 50%; margin-top: -5.5px;}
  .cta-tl .n{flex: none; width: 24px;}
  .cta-tl li .t{margin-top: 0;}
}
@media (prefers-reduced-motion: reduce){.cta-tl li{opacity: 1; transform: none; transition: none;}}
/* hero: 40px more space at the top; the white-to-blue ramp moves down with the content, so the card keeps its place on it */
.mw-hero{background-color: #FFFFFF; background-repeat: no-repeat; background-size: 100% calc(100% - 40px); background-position: 0 40px;}
.mw-hero::before{-webkit-mask-image: linear-gradient(180deg, transparent 693px, #000 780px); mask-image: linear-gradient(180deg, transparent 693px, #000 780px);}
/* hero: the record section's topographic contours (Three.js shader, GSAP-driven) behind the content, on the dark part only */
.hero-topo{position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; z-index: 1;}   /* above the bottom fade, so the lines run into it and die out there */
/* hero bottom fades from navy to white, mirroring the top */
.mw-hero{padding-bottom: 205px;}
.mw-hero::after{content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 205px; z-index: 0; pointer-events: none; background: linear-gradient(180deg, #07051A 0, #08061B 7px, #0A071E 16px, #0C0A23 29px, #0F0E30 46px, #14133F 66px, #1D2064 87px, #2E3791 108px, #4959C0 126px, #6779DD 142px, #8FA2EC 158px, #B5C3F7 172px, #D6DFFD 183px, #EEF3FF 192px, #FFFFFF 205px);}
/* Inspections: "Where was lot 22-0433 used?" is the focus; timelines and the other questions recede */
.ip-card .ip-q[style*="--i:0"]{padding: 18px 0 16px;}
.ip-card .ip-q p,.ip-card .ip-q[style*="--i:0"] p{font-size: 12.5px; font-weight: 400; color: #FFFFFF;}   /* label: small */
.ip-card .ip-q code{padding: 0; background: none; box-shadow: none; border-radius: 0; font-size: 16px; font-weight: 600; color: #DCE6FF; white-space: nowrap;}   /* answers: plain text, no pill */
.ip-card .ip-q{flex-direction: column; align-items: flex-start; gap: 6px;}   /* question on top, answer below */
.ip-card .ip-q[style*="--i:0"] code{font-size: 20px; font-weight: 600; color: #FFFFFF; text-shadow: 0 0 14px rgba(160,184,252,.55);}
.ip-card .ip-q:not([style*="--i:0"]) p,.ip-card .ip-q:not([style*="--i:0"]) code{opacity: 1;}
.ip-tl{opacity: .6;}
/* centre card larger, kept centred on the 830px mock */
.ip-mock:not(.narrow) .ip-card{zoom: 1.2; left: 140px; top: -22px;}
/* hero and section titles: tighter tracking */
.mw-hero-title,.mw-it,.bp-t-section,section.bp-m-band .bp-m-head .bp-t-section,.mfq-l h2,#book-demo.cta2 h2{letter-spacing: -1.92px;}
/* section subtitles */
.mw-is:not(.mw-stance),.bp-t-lead,section.bp-m-band .bp-m-head p.bp-t-lead,.cta-lead,.cta2 .cta-lead{line-height: 200%;}

/* Blog cards under the CTA (card design from blogs.html) */
.mb{padding: 88px 80px 120px;}
@media (max-width:1200px){.mb{padding-inline: 40px;}} @media (max-width:992px){.mb{padding: 64px 24px 88px;}} @media (max-width:576px){.mb{padding-inline: 16px;}}
.mb-grid{display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px;}
@media (max-width:992px){.mb-grid{grid-template-columns: repeat(2, minmax(0,1fr));}} @media (max-width:640px){.mb-grid{grid-template-columns: minmax(0,1fr);}}
.mb-card{display: flex; flex-direction: column; padding: 6px; background: #fff; border: 1px solid #E7E7E7; border-radius: 16px; color: inherit; text-decoration: none; transition: box-shadow .25s, transform .25s;}
.mb-card:hover{box-shadow: 0 8px 40px rgba(0,0,0,.10); transform: translateY(-3px);}
.mb-img{aspect-ratio: 16/9; width: 100%; overflow: hidden; border-radius: 12px; border: 1px solid #E7E7E7; background: linear-gradient(180deg,#e1e5ff 0%,#fff 67%);}
.mb-img img{display: block; width: 100%; height: 100%; object-fit: cover;}
.mb-body{display: flex; flex-direction: column; gap: 16px; padding: 18px 18px 14px; flex: 1;}
.mb-t{margin: 0; font: 500 18px/1.5 "Poppins",sans-serif; color: #1A181B; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.mb-d{margin: 0; flex: 1; font: 400 14px/1.85 "Poppins",sans-serif; color: #505050; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.mb-hr{border: none; border-top: 1px solid #E7E7E7; margin: 0;}
.mb-meta{display: flex; align-items: center; justify-content: space-between; gap: 12px;}
.mb-posted{font: 400 14px "Poppins",sans-serif; color: #505050;} .mb-posted b{font-weight: 500; color: #1A181B;}
.mb-read{font: 400 14px "Poppins",sans-serif; color: #1A181B; background: #fafafa; border: 1px solid #E7E7E7; border-radius: 8px; padding: 4px 12px; white-space: nowrap;}
@media (max-width:576px){.mb-t{font-size: 16px}.mb-d,.mb-posted,.mb-read{font-size: 13px}}

/* "What it's used for": the inner panels are a darker frosted glass: translucent deep navy, thin light edge, blur */
.mw-rv,.mw-uc-inv .mw-ui::before{background: linear-gradient(160deg, rgba(20,18,60,.62), rgba(6,5,24,.58)); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1.4em 2.6em -1.6em rgba(2,1,14,.8), inset 0 1px 0 rgba(255,255,255,.1);}
.mw-uc-inv .mw-ui::before{background: linear-gradient(160deg, rgba(3,2,14,.78), rgba(1,0,6,.74)); backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px);}   /* just a little blur, so the dotted pattern behind stays readable */
.mw-rv{background: linear-gradient(160deg, rgba(14,12,46,.66), rgba(4,3,18,.62)); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);}
.mw-uc-inv .mw-srch{background: linear-gradient(160deg, rgba(3,2,14,.78), rgba(1,0,6,.74)); border-color: rgba(255,255,255,.14); backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.08);}
.ip-card{-webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); background: linear-gradient(160deg, rgba(3,2,14,.62), rgba(1,0,6,.58)) padding-box, linear-gradient(135deg, rgba(162,184,253,.4), rgba(255,255,255,.07) 38%, rgba(107,130,242,.28)) border-box; box-shadow: 0 24px 50px -22px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.1);}

/* Investigations: a little blur behind each small node card (CSS cannot blur behind SVG shapes, so each node has a matching box under it) */
.mw-gblur{position: absolute; left: 18cqw; top: calc(50% - 11cqw); width: 64cqw; aspect-ratio: 480 / 250; pointer-events: none;}
.mw-gb{position: absolute; border-radius: 1.34cqw; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);}

/* hero card: a lit box keeps a soft glow, arriving with its line (same delay as the border) */
.mw-box.anim .mw-n{transition: border-color .6s cubic-bezier(.16,1,.3,1) var(--d, 0s), box-shadow .8s cubic-bezier(.16,1,.3,1) var(--d, 0s);}
.mw-box.anim.run .mw-n.is-lit:not(.dim){box-shadow: inset 0 0 0 1px rgba(160,184,252,.22);}
.mw-box.anim.run .mw-n.key.is-lit{box-shadow: inset 0 0 0 1px rgba(160,184,252,.35);}

/* hero card colours, as in the reference: traced lines teal, lines to the sources lavender; lit boxes teal (lot, batches) or lavender (sources) */
.mw-box .mw-lit path{stroke: #41EAD4; filter: none;}
.mw-box .mw-lit path:nth-child(1),.mw-box .mw-lit path:nth-child(2),.mw-box .mw-lit path:nth-child(3){stroke: #A0B8FC; filter: drop-shadow(0 0 4px rgba(160,184,252,.6));}
.mw-box.anim .mw-n{transition: border-color .6s cubic-bezier(.16,1,.3,1) var(--d, 0s), background-color .6s cubic-bezier(.16,1,.3,1) var(--d, 0s), box-shadow .8s cubic-bezier(.16,1,.3,1) var(--d, 0s);}
.mw-box.anim .mw-n .mw-t{transition: color .6s cubic-bezier(.16,1,.3,1) var(--d, 0s);}
.mw-box.anim.run .n-lB.is-lit,.mw-box.anim.run .n-b117.is-lit,.mw-box.anim.run .n-b118.is-lit,.mw-box.anim.run .n-b121.is-lit{border-color: #41EAD4; background-color: #172648; box-shadow: inset 0 0 0 1px rgba(65,234,212,.22);}
.mw-box.anim.run .n-lB.is-lit{box-shadow: inset 0 0 0 1px rgba(65,234,212,.3);}
.mw-box.anim.run .n-lB.is-lit .mw-t,.mw-box.anim.run .n-b117.is-lit .mw-t,.mw-box.anim.run .n-b118.is-lit .mw-t,.mw-box.anim.run .n-b121.is-lit .mw-t{color: #41EAD4;}
.mw-box.anim.run .n-s1.is-lit,.mw-box.anim.run .n-s2.is-lit,.mw-box.anim.run .n-s5.is-lit{border-color: #A0B8FC; background-color: #20214C; box-shadow: 0 0 14px rgba(160,184,252,.34), inset 0 0 0 1px rgba(160,184,252,.2);}
.mw-box.anim.run .n-s1.is-lit .mw-t,.mw-box.anim.run .n-s2.is-lit .mw-t,.mw-box.anim.run .n-s5.is-lit .mw-t{color: #E6EDFE;}
.mw-box.anim.run .n-cpv.is-lit{border-color: #A0B8FC; box-shadow: 0 0 14px rgba(160,184,252,.3), inset 0 0 0 1px rgba(160,184,252,.18);}
.mw-box .mw-lot{color: #41EAD4; text-shadow: none;}

/* How Mareana Process: tighter padding on each card */
.mw-flow-i{padding: 8px 8px 16px;}
.mw-flow-i > :not(.mw-fv){margin-left: 6px; margin-right: 6px;}
.mw-fv{margin-bottom: 16px;}

/* ---- what changes (d86): one wide window, six keys the reader presses, each reading the mechanism its claim rests on */
.wr-win{display:grid;grid-template-rows:auto auto}
.wr-stage{position:relative;z-index:1;display:grid;padding:40px 40px 28px}
.wr-r{grid-area:1/1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:center;visibility:hidden;opacity:0;
  transition:opacity .3s var(--ease-swap)}
.wr-r.act{visibility:visible;opacity:1}
.wr-g{margin:0 0 12px;font:500 12px/16px var(--font-text);letter-spacing:.08em;text-transform:uppercase;color:rgba(240,243,247,.6)}
.wr-o{margin:0 0 14px;font:400 32px/40px var(--font-display);letter-spacing:-.015em;color:#F0F3F7;text-wrap:balance}
.wr-l{margin:0;font:400 17px/27px var(--font-text);color:rgba(240,243,247,.78)}
.wr-ph{display:none}
.wr-keys{position:relative;z-index:1;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:1px solid rgba(255,255,255,.10)}
.wr-k{all:unset;box-sizing:border-box;cursor:pointer;display:grid;align-content:start;gap:6px;padding:18px 20px 22px;
  border-left:1px solid rgba(255,255,255,.08);color:rgba(240,243,247,.64);transition:color .15s var(--ease-press),background .15s var(--ease-press)}
.wr-k:first-child{border-left:0}
.wr-k:hover{color:#F0F3F7;background:rgba(240,243,247,.03)}
.wr-k:focus-visible{outline:2px solid #4361EE;outline-offset:-2px}
.wr-k.act{color:#F0F3F7;background:linear-gradient(180deg,rgba(67,97,238,.18),rgba(67,97,238,0));box-shadow:inset 0 2px 0 #4361EE}
.wr-n{font:400 12px/16px var(--font-data);letter-spacing:.06em;color:rgba(240,243,247,.6)}.wr-k.act .wr-n{color:#F0F3F7}
.wr-t{font:400 14px/20px var(--font-text)}
/* the demonstration: a reading builds once when its key is pressed, in two to three seconds */
@keyframes wr-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes wr-pop{0%{opacity:0;transform:scale(.4)}70%{opacity:1;transform:scale(1.25)}100%{opacity:1;transform:scale(1)}}
@keyframes wr-draw{from{stroke-dashoffset:1600}to{stroke-dashoffset:0}}
.wr-r.run .wv-rec,.wr-r.run .wv-q,.wr-r.run .wv-secs li,.wr-r.run .wv-start li,.wr-r.run .wv-res li,.wr-r.run .wv-foot,.wr-r.run .wv-rest,
.wr-r.run .wv-key,.wr-r.run .wv-paper{animation:wr-in .5s var(--ease-arrive) both}
.wr-r.run .wv-secs li:nth-child(1),.wr-r.run .wv-start li:nth-child(1){animation-delay:.2s}
.wr-r.run .wv-secs li:nth-child(2),.wr-r.run .wv-start li:nth-child(2){animation-delay:.45s}
.wr-r.run .wv-secs li:nth-child(3){animation-delay:.7s}
.wr-r.run .wv-secs li:nth-child(4){animation-delay:.95s}
.wr-r.run .wv-after{animation:wr-in .5s 1.8s var(--ease-arrive) both}
.wr-r.run .wv-foot{animation-delay:2.3s}
.wr-r.run .wv-pg{animation:wr-in .3s var(--ease-arrive) both}
.wr-r.run .wv-pg-hot{transform-box:fill-box;transform-origin:center;animation:wr-pop .5s 1.1s var(--ease-arrive) both}
.wr-r.run .wv-key{animation-delay:1.6s}
.wr-r.run .wc-src{stroke-dasharray:1600;animation:wr-draw 1.6s var(--ease-arrive) both}
.wr-r.run .wc-p{animation:wr-in .2s .9s both}
.wr-r.run .wc-flag{animation:wr-in .4s 1.7s var(--ease-arrive) both}
.wr-r.run .wv-rest{animation-delay:1.1s}
.wr-r.run .wv-person{animation:wr-pop .45s 1.6s cubic-bezier(.34,1.56,.64,1) both}
.wr-r.run .wv-res li:nth-child(1){animation-delay:.9s}.wr-r.run .wv-res li:nth-child(2){animation-delay:1.15s}.wr-r.run .wv-res li:nth-child(3){animation-delay:1.4s}
.wr-r.run .wv-paper{animation-delay:.8s}
.wr-r.run .wv-hit{animation:wr-in .45s 1.6s var(--ease-arrive) both}
@media (prefers-reduced-motion:reduce){.wr-r.run *{animation:none!important}}
.wc-sheet{border-radius:2px;background:rgba(14,13,36,.82);box-shadow:inset 0 0 0 1px rgba(255,255,255,.10)}
.wc-body{padding:16px 18px 14px}
.wc-ch{display:block;width:100%;height:auto}
.wc-lbl{font:400 15px/20px var(--font-data);fill:#F0F3F7}
.wc-own{font:400 13px/18px var(--font-text);fill:rgba(240,243,247,.68)}
.wc-tk{font:400 13px/16px var(--font-data);fill:rgba(240,243,247,.64)}
.wc-src{fill:none;stroke:#A0B8FC;stroke-width:1.6;opacity:.8}
.wc-p{fill:#A0B8FC}
.wc-mean{stroke:rgba(240,243,247,.28);stroke-dasharray:3 4}
.wc-lim{stroke:rgba(240,243,247,.45);stroke-dasharray:6 4}
.wc-flag{fill:rgba(65,234,212,.06);stroke:#41EAD4;stroke-width:1.6}
/* each sheet headed by the metric and who reports it */
.wv-top{display:flex;justify-content:space-between;gap:16px;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.10);
  font:500 14px/20px var(--font-text);color:#F0F3F7}
.wv-own{font-weight:400;color:rgba(240,243,247,.64);white-space:nowrap}
.wv-rec{margin:4px 0 16px;font:400 13px/18px var(--font-data);color:rgba(240,243,247,.72)}
.wv-foot,.wv-rest{margin:16px 0 0;font:400 13px/18px var(--font-text);color:rgba(240,243,247,.64)}
/* deviations: sections checked as each department finishes */
.wv-secs{list-style:none;margin:0;padding:0}
.wv-secs li{display:grid;grid-template-columns:14px minmax(0,1fr) minmax(0,1.2fr);gap:12px;align-items:start;padding:12px 0;border-top:1px solid rgba(255,255,255,.08);font-size:14px;line-height:20px}
.wv-secs li:first-child{border-top:0}
.wv-mk{width:10px;height:10px;margin-top:5px;border-radius:50%;background:#41EAD4}
.wv-op .wv-mk{background:none;box-shadow:inset 0 0 0 1.5px rgba(240,243,247,.5)}
.wv-fl .wv-mk{background:#F94E9B}
.wv-nm{color:#F0F3F7}.wv-nm i{display:block;font-style:normal;font-size:13px;color:rgba(240,243,247,.6)}
.wv-st{color:rgba(240,243,247,.78)}.wv-fl .wv-st{color:#F0F3F7}
.wv-op .wv-nm,.wv-op .wv-st{color:rgba(240,243,247,.64)}.wv-op .wv-nm i{color:rgba(240,243,247,.6)}
.wv-after{display:block;margin-top:4px;font:400 13px/18px var(--font-text);color:rgba(240,243,247,.72)}
.wv-after::before{content:"\2713  ";color:#F0F3F7}
/* capacity: the record's pages */
.wv-pg{fill:rgba(160,184,252,.22)}.wv-pg-hot{fill:#F94E9B}
.wv-key{display:flex;flex-wrap:wrap;gap:8px 24px;margin:16px 0 0;font:400 13px/18px var(--font-text);color:rgba(240,243,247,.78)}
.wv-key span{display:flex;align-items:center;gap:8px}.wv-key i{display:block;width:10px;height:10px}
.wv-k-ok{background:rgba(160,184,252,.4)}.wv-k-hot{background:#F94E9B}
/* cycle: where review starts */
.wv-start{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.wv-start li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;padding:14px 16px;border-radius:12px;background:rgba(240,243,247,.04);
  box-shadow:inset 3px 0 0 rgba(240,243,247,.5),inset 0 0 0 1px rgba(255,255,255,.08)}
.wv-where{font:400 14px/20px var(--font-data);color:#F0F3F7}.wv-val{font:400 14px/20px var(--font-data);color:#F0F3F7;text-align:right}
.wv-why{grid-column:1/-1;font-size:13px;line-height:18px;color:rgba(240,243,247,.72)}
.wv-person{display:flex;align-items:center;gap:10px;margin:16px 0 0;font-size:13px;color:rgba(240,243,247,.86)}
.wv-av{display:inline-grid;place-items:center;width:28px;height:20px;border-radius:999px;background:#F94E9B;color:#1A181B;font:500 12px/1 var(--font-text)}
/* investigations and inspections: one search */
.wv-q{display:flex;align-items:center;gap:10px;margin:4px 0 16px;padding:10px 14px;border-radius:999px;background:rgba(240,243,247,.06);
  box-shadow:inset 0 0 0 1px rgba(240,243,247,.18);font:400 14px/20px var(--font-data);color:#F0F3F7}
.wv-glass{width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 1.6px rgba(240,243,247,.7);position:relative;flex:none}
.wv-glass::after{content:"";position:absolute;right:-4px;bottom:-3px;width:6px;height:1.6px;background:rgba(240,243,247,.7);transform:rotate(45deg)}
.wv-res{list-style:none;margin:0;padding:0}
.wv-res li{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;align-items:baseline;padding:12px 0;border-top:1px solid rgba(255,255,255,.08);
  font-size:14px;line-height:20px;color:#F0F3F7}
.wv-src{justify-self:start;padding:2px 8px;border-radius:2px;box-shadow:inset 0 0 0 1px rgba(160,184,252,.5);font:400 12px/18px var(--font-data);color:#A0B8FC}
.wv-paper{position:relative;padding:16px 18px 18px;border-radius:2px;background:#F3F1EA;color:#1A181B}
.wv-ph{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 14px;font:400 12px/18px var(--font-data);color:#4A4F59}
.wv-tag{padding:0 6px;box-shadow:inset 0 0 0 1px #A9AFBC;color:#4A4F59}
.wv-ln{display:block;height:2px;margin:10px 0;background:#C9CDD5}
.wv-hit{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:12px -8px;padding:6px 8px;border-radius:6px;
  box-shadow:0 0 0 1.5px #4361EE,0 0 16px rgba(67,97,238,.3);font:400 13px/18px var(--font-data)}
.wv-hand{font:400 22px/20px "Reenie Beanie",cursive;color:#23308A;white-space:nowrap}
@media (max-width:900px){
  .wr-stage{padding:24px 20px}.wr-r{grid-template-columns:minmax(0,1fr);gap:20px;align-content:start}.wr-sh{display:none}.wr-ph{display:block}
  .wr-o{font-size:24px;line-height:30px}
  .wr-keys{grid-template-columns:repeat(2,minmax(0,1fr))}.wr-k{border-top:1px solid rgba(255,255,255,.08)}.wr-k:nth-child(odd){border-left:0}
  .wc-body{padding:12px 12px 10px}}
@media (max-width:640px){
  .wv-top{flex-direction:column;gap:2px;padding:12px 14px}.wv-secs li{grid-template-columns:14px minmax(0,1fr)}.wv-st{grid-column:2}
  .wv-res li{grid-template-columns:minmax(0,1fr);gap:6px}}

/* ---- What changes: the reference's window and keys, in the site theme (guide rails + seam band, DM Sans, primary blue) ---- */
.wr-win{--font-display:"Poppins","Segoe UI",system-ui,sans-serif;--font-text:"Poppins","Segoe UI",system-ui,sans-serif;--font-data:"Roboto Mono",ui-monospace,Consolas,monospace;
  --ease-arrive:cubic-bezier(.16,1,.3,1);--ease-swap:cubic-bezier(.65,0,.35,1);--ease-press:cubic-bezier(.2,0,0,1);
  position:relative;overflow:hidden;isolation:isolate;border-radius:20px;color:#F0F3F7;text-align:left;font:400 14px/20px var(--font-text);
  background:radial-gradient(52% 78% at 72% 46%,rgba(67,97,238,.26),transparent 72%),radial-gradient(34% 52% at 74% 52%,rgba(65,234,212,.08),transparent 70%),#07051A;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 40px 80px -40px rgba(12,10,35,.5)}
.mw-wc{padding: 88px 80px 120px;}
@media (max-width:1200px){.mw-wc{padding-inline: 40px;}} @media (max-width:992px){.mw-wc{padding: 64px 24px 88px;}} @media (max-width:576px){.mw-wc{padding-inline: 16px;}}
.mw-wc .mw-uses-head{margin-bottom: 48px;}
.mw-wc .mw-uses-head > .mw-it{max-width: 1100px;}

/* intro passage under "How Mareana Process": each phrase is underlined as its step lights, and points at its column */
.mw-intro-text > .mw-stance{max-width: 760px; font-size: clamp(16px, 1.5vw, 18px); line-height: 1.7;}
.mw-stance-h{color: var(--foreground-primary); font-weight: 500;}
.mw-ph{color: var(--foreground-primary); padding-bottom: 2px; cursor: default; background: linear-gradient(var(--mareana-primary), var(--mareana-primary)) 0 100% / 0 1.5px no-repeat; transition: background-size .7s cubic-bezier(.16,1,.3,1), color .4s;}
.mw-ph.now,.mw-ph.hot{background-size: 100% 1.5px;}   /* only the line appears: for the step being lit, and on hover */

/* the two intro paragraphs sit side by side: the platform on the left, what its agents do on the right */
.mw-intro-text > .mw-stance-cols{display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; align-items: start; width: 100%; max-width: none;}
.mw-stance-cols .mw-stance{max-width: none; margin: 0;}
@media (max-width:900px){.mw-intro-text > .mw-stance-cols{grid-template-columns: minmax(0, 1fr); row-gap: 20px;}}

/* What changes: a topographic map under the whole window, with a glowing flow driven by GSAP; the right card and the tab strip are glass over it */
.wr-topo{position: absolute; inset: 0 0 0 34%; z-index: 0; pointer-events: none; overflow: hidden; opacity: .55; background: url(../../images/home-v3/topo.svg) center / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 26%, #000 72%, rgba(0,0,0,.8) 100%), linear-gradient(90deg, transparent 0, #000 34%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, transparent 0, #000 26%, #000 72%, rgba(0,0,0,.8) 100%), linear-gradient(90deg, transparent 0, #000 34%, #000 86%, transparent 100%);
  mask-composite: intersect;}
.wr-topo svg{position: absolute; inset: 0; width: 100%; height: 100%; display: block; will-change: transform;}
.wr-sh .wc-sheet{border-radius: 14px; background: linear-gradient(160deg, rgba(20,18,60,.34), rgba(6,5,24,.30)); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.12), 0 24px 50px -28px rgba(0,0,0,.7);}
.wr-keys{background: linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.05)); backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5);
  border-top-color: rgba(255,255,255,.28); box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 -18px 40px -24px rgba(0,0,0,.6);}
.wr-k{border-left-color: rgba(255,255,255,.12);}
.wr-k:hover{background: rgba(255,255,255,.08);}
.wr-k.act{background: linear-gradient(180deg, rgba(67,97,238,.36), rgba(255,255,255,.05)); box-shadow: inset 0 2px 0 #4361EE, inset 0 1px 0 rgba(255,255,255,.14);}

/* What changes: the tab strip is a dark glass; the map shows only on wide screens, where the right card is */
.wr-keys{background: linear-gradient(180deg, rgba(40,38,96,.30), rgba(6,5,24,.40)); backdrop-filter: blur(22px) saturate(1.7); -webkit-backdrop-filter: blur(22px) saturate(1.7);
  border-top-color: rgba(255,255,255,.2); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 0 1px rgba(255,255,255,.04), 0 -18px 40px -24px rgba(0,0,0,.6);}
.wr-k:hover{background: rgba(255,255,255,.06);}
.wr-k.act{background: linear-gradient(180deg, rgba(67,97,238,.30), rgba(14,12,44,.2)); box-shadow: inset 0 2px 0 #4361EE, inset 0 1px 0 rgba(255,255,255,.1);}
@media (max-width:900px){.wr-topo{display: none;}}

/* "From review to inspection, one platform." stays on one line */
.mw-uses-head > #mwUsesT{max-width: none;}
@media (min-width:700px){.mw-uses-head > #mwUsesT{white-space: nowrap;}}

/* What changes: one glass shell stays put and glides to the new card's size; only what is inside it is replaced, with GSAP */
.wr-stage{position: relative; z-index: 1;}
.wr-shell{position: absolute; z-index: 0; left: 0; top: 0; width: 0; height: 0; pointer-events: none; border-radius: 14px;
  background: linear-gradient(160deg, rgba(20,18,60,.34), rgba(6,5,24,.30)); backdrop-filter: blur(10px) saturate(1.3); -webkit-backdrop-filter: blur(10px) saturate(1.3);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.12);}
.wr-r{position: relative; z-index: 1;}
.wr-sh .wc-sheet{background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;}
/* the old reading fades out while it is replaced (visibility waits for the fade) */
.wr-r{transition: opacity .32s var(--ease-swap), visibility 0s linear .32s;}
.wr-r.act{transition: opacity .38s var(--ease-swap), visibility 0s;}
@media (max-width:900px){.wr-shell{display: none;}}

/* What changes: the tab strip reads as frosted glass: a light tint, strong blur over the map and a soft blue light under it, a bright edge */
.wr-win{background: radial-gradient(52% 78% at 72% 46%, rgba(67,97,238,.26), transparent 72%), radial-gradient(34% 52% at 74% 52%, rgba(65,234,212,.08), transparent 70%), #07051A;}
.wr-keys{background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.04)); backdrop-filter: blur(26px) saturate(1.8); -webkit-backdrop-filter: blur(26px) saturate(1.8);
  border-top: 1px solid rgba(255,255,255,.26); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(255,255,255,.05), 0 -20px 44px -26px rgba(0,0,0,.55);}
.wr-k{border-left: 1px solid rgba(255,255,255,.1);}
.wr-k:hover{background: rgba(255,255,255,.08);}
.wr-k.act{background: linear-gradient(180deg, rgba(67,97,238,.34), rgba(255,255,255,.05)); box-shadow: inset 0 2px 0 #4361EE, inset 0 1px 0 rgba(255,255,255,.2);}

/* What changes: each tab is its own pane of frosted glass floating over a lit patch of the map */
.wr-keys{position: relative; gap: 10px; padding: 14px 16px 16px; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border-top: 1px solid rgba(255,255,255,.08); box-shadow: none;}
.wr-keys::before{content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .85;
  background: radial-gradient(40% 90% at 22% 80%, rgba(107,130,242,.5), transparent 70%), radial-gradient(34% 90% at 56% 90%, rgba(67,97,238,.55), transparent 70%), radial-gradient(32% 90% at 88% 70%, rgba(65,234,212,.2), transparent 70%),
    url(../../images/home-v3/topo.svg) 60% 70% / 150% auto no-repeat;}
.wr-k{border-radius: 14px; border: 1px solid rgba(255,255,255,.22); border-left: 1px solid rgba(255,255,255,.22); padding: 16px 18px 18px;
  background: linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.04)); backdrop-filter: blur(16px) saturate(1.9); -webkit-backdrop-filter: blur(16px) saturate(1.9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.38), inset 0 -1px 0 rgba(255,255,255,.06), 0 12px 28px -14px rgba(0,0,0,.65);}
.wr-k:hover{background: linear-gradient(145deg, rgba(255,255,255,.22), rgba(255,255,255,.07));}
.wr-k.act{background: linear-gradient(145deg, rgba(107,130,242,.5), rgba(67,97,238,.16)); border-color: rgba(160,184,252,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 0 26px -6px rgba(67,97,238,.7), 0 12px 28px -14px rgba(0,0,0,.65);}

/* What changes: the tabs are black glass: no coloured light behind, a translucent black fill, blur, a fine bright edge */
.wr-keys::before{display: none;}   /* no extra map or coloured light behind the tabs */
.wr-k{background: linear-gradient(145deg, rgba(0,0,0,.34), rgba(0,0,0,.22)); border-color: rgba(255,255,255,.16); border-left-color: rgba(255,255,255,.16);
  backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(255,255,255,.04), 0 12px 28px -14px rgba(0,0,0,.7);}
.wr-k:hover{background: linear-gradient(145deg, rgba(0,0,0,.28), rgba(0,0,0,.16));}
.wr-k.act{background: linear-gradient(145deg, rgba(0,0,0,.5), rgba(0,0,0,.36)); border-color: rgba(255,255,255,.36);
  box-shadow: inset 0 2px 0 #4361EE, inset 0 1px 0 rgba(255,255,255,.3), 0 12px 28px -14px rgba(0,0,0,.7);}

/* What changes: the tabs are one connected strip again (dividers between the six), in the glass values chosen: #0000001c fill, .16 borders, 4px blur */
.wr-keys{gap: 0; padding: 0; background: none; border-top: 1px solid rgba(255,255,255,.16); box-shadow: none;}
.wr-k{border-radius: 0; padding: 18px 20px 22px; background: #0000001c; border: 0; border-color: rgba(255, 255, 255, .16); border-left: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(4px) saturate(1.2); -webkit-backdrop-filter: blur(4px) saturate(1.2); box-shadow: none;}
.wr-k:first-child{border-left: 0;}
.wr-k:hover{background: rgba(255,255,255,.04);}
.wr-k.act{background: linear-gradient(180deg, rgba(67,97,238,.18), rgba(67,97,238,0)), #0000001c; box-shadow: inset 0 2px 0 #4361EE;}

/* Batch review card: the review queue, as in the reference */
.mw-rq{position: absolute; left: 7%; right: 7%; top: calc(50% - 11.6em); padding: .9em 1.2em .45em; border-radius: 1.1em; color: rgba(240,243,247,.9);
  background: linear-gradient(160deg, rgba(10,9,34,.66), rgba(3,2,14,.6)); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);}
.mw-rq::before{content: ""; position: absolute; left: 1.2em; right: 1.2em; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(240,243,247,.5), transparent);}
.mw-rq-h{display: flex; justify-content: space-between; margin: 0 0 .5em; font-size: .95em; font-weight: 500; color: #F0F3F7;}
.mw-rq-m{font-family: "Roboto Mono", ui-monospace, Consolas, monospace; font-size: .86em; letter-spacing: .02em;}
.mw-rq-h .mw-rq-m{color: rgba(240,243,247,.6); font-weight: 400;}
.mw-rq-r{display: grid; grid-template-columns: 7.4em 4.2em 5.8em minmax(0, 1fr) 2.4em; gap: .8em; align-items: center; height: 3.5em; padding: 0 .6em 0 1em; border-top: 1px solid rgba(240,243,247,.08); font-size: .92em; color: rgba(240,243,247,.78); transition: background .5s ease, color .5s ease, box-shadow .5s ease;}
.mw-rq-r b{font-weight: 400; color: rgba(240,243,247,.72); transition: color .5s ease;}
.mw-rq-r.on{color: #fff; background: linear-gradient(90deg, rgba(67,97,238,.26), rgba(67,97,238,0) 80%); box-shadow: inset 2px 0 0 #4361EE;}
.mw-rq-r.on b{color: #fff;}
.mw-rq-p{color: rgba(240,243,247,.6);}
.mw-rq-av{display: grid; place-items: center; height: 1.7em; border-radius: 999px; background: #FFFFFF; color: #1A181B; font-size: .72em; font-weight: 600;}
.mw-rq-rd{animation: mwRd 1.6s ease-in-out infinite;} @keyframes mwRd{0%,100%{opacity: .5}50%{opacity: 1}}
@media (max-width:640px){.mw-rq{left: 5%; right: 5%; top: 10%;} .mw-rq-r{grid-template-columns: 6.4em 3.6em minmax(0, 1fr) 2.2em; } .mw-rq-p{display: none;}}
@media (prefers-reduced-motion: reduce){.mw-rq-rd{animation: none;}}

/* Investigations card: the impact assessment, as in the reference: a tag for the balance, and the batches that ran on it */
.mw-uc-inv .mw-ui::before{display: none;}
.mw-ia-tag{position: absolute; left: 9%; top: calc(50% - 9.2em); width: 18em; max-width: 82%; padding: .95em 1.15em; border-radius: .9em; background: #FBFAF6; color: #1A181B; box-shadow: 0 1em 2.4em -1.4em rgba(2,1,14,.7);}
.mw-ia-tag p{margin: 0; font-size: .86em; line-height: 1.5; color: #4A4F59;}
.mw-ia-tag b{display: flex; gap: .55em; align-items: center; margin: .3em 0; font-size: 1.16em; font-weight: 500; line-height: 1.3;}
.mw-ia-tag b::before{content: ""; width: .7em; height: .7em; border-radius: 50%; box-shadow: inset 0 0 0 2px #1A181B;}
.mw-ia-m{font-family: "Roboto Mono", ui-monospace, Consolas, monospace;}
.mw-ia-ran{position: absolute; left: 9%; right: 9%; top: calc(50% + 0.6em); padding: 1em 1.2em 1.1em; border-radius: 1em; color: #F0F3F7;
  background: linear-gradient(160deg, rgba(10,9,34,.66), rgba(3,2,14,.6)); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); box-shadow: inset 0 1px 0 rgba(255,255,255,.12);}
.mw-ia-ran p{margin: 0 0 .8em; font-size: .95em; font-weight: 500;}
.mw-ia-ran div{display: flex; flex-wrap: wrap; gap: .6em;}
.mw-ia-ran span{padding: .3em .8em; border-radius: 999px; background: rgba(65,234,212,.12); box-shadow: inset 0 0 0 1px rgba(65,234,212,.35); color: #41EAD4; font-size: .92em; transition: background .4s ease, box-shadow .4s ease;}
.mw-ia-ran span.hot{background: rgba(65,234,212,.26); box-shadow: inset 0 0 0 1px rgba(65,234,212,.8), 0 0 16px rgba(65,234,212,.4);}

/* Impact assessment card: bigger and cleaner. One column, both blocks the same width, a clear rhythm, larger type */
.mw-uc-inv .mw-ui{display: flex; flex-direction: column; justify-content: center; gap: 1.15em; padding: 0 8%; font-size: clamp(14px, 3.05cqw, 19px);}
.mw-uc-inv .mw-ia-tag,.mw-uc-inv .mw-ia-ran{position: static; width: auto; max-width: none; margin: 0; left: auto; right: auto; top: auto;}
.mw-uc-inv .mw-ia-tag{display: grid; gap: .25em; padding: 1.1em 1.4em; border-radius: 1em; box-shadow: none;}
.mw-uc-inv .mw-ia-tag p{font-size: .8em; letter-spacing: .02em; color: #5F6673;}
.mw-uc-inv .mw-ia-tag b{margin: 0; font-size: 1.4em; font-weight: 500; letter-spacing: -.01em; gap: .5em;}
.mw-uc-inv .mw-ia-tag b::before{width: .6em; height: .6em;}
.mw-uc-inv .mw-ia-ran{padding: 1.15em 1.4em 1.3em; border-radius: 1em;}
.mw-uc-inv .mw-ia-ran p{margin: 0 0 .9em; font-size: .9em; font-weight: 500; letter-spacing: .01em; color: rgba(240,243,247,.78);}
.mw-uc-inv .mw-ia-ran div{gap: .65em;}
.mw-uc-inv .mw-ia-ran span{padding: .4em 1em; font-size: 1em;}

/* Impact assessment card: both blocks use the review queue's glass: dark translucent fill, 4px blur, fine edge, a light line along the top */
.mw-uc-inv .mw-ia-tag,.mw-uc-inv .mw-ia-ran{position: relative; color: rgba(240,243,247,.9);
  background: linear-gradient(160deg, rgba(10,9,34,.66), rgba(3,2,14,.6)); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); box-shadow: inset 0 1px 0 rgba(255,255,255,.12);}
.mw-uc-inv .mw-ia-tag::before,.mw-uc-inv .mw-ia-ran::before{content: ""; position: absolute; left: 1.4em; right: 1.4em; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(240,243,247,.5), transparent);}
.mw-uc-inv .mw-ia-tag p{color: rgba(240,243,247,.6);}
.mw-uc-inv .mw-ia-tag b{color: #F0F3F7;}
.mw-uc-inv .mw-ia-tag b::before{box-shadow: inset 0 0 0 2px #F94E9B; background: rgba(249,78,155,.25);}

/* Impact assessment chips: the primary blue instead of green */
.mw-ia-ran span{background: rgba(67,97,238,.2); box-shadow: inset 0 0 0 1px rgba(67,97,238,.75); color: #C4D0FF;}
.mw-ia-ran span.hot{background: rgba(67,97,238,.42); box-shadow: inset 0 0 0 1px #6B82F2, 0 0 16px rgba(67,97,238,.55); color: #FFFFFF;}

/* Impact assessment card: the glass panels blur less */
.mw-uc-inv .mw-ia-tag,.mw-uc-inv .mw-ia-ran{backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px);}

/* Impact assessment card: the light behind the panels sits a little up and to the right */
.mw-uc-inv .mw-gl{transform: translate(17%, -4%) scale(1.36); transform-origin: 50% 50%;}

/* CPV card: the chart you designed, a little smaller, with the other five parameters charted beneath it as small multiples (the reference's layout) */
.mw-uc-cpv .mw-ui svg.mw-chart{left: 21cqw; top: 1em; width: 58cqw;}
.mw-cp-grid{position: absolute; left: 8cqw; right: 8cqw; bottom: 4.1em; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6em; z-index: 2;}
.mw-cp-m{padding: .4em .65em .4em; border-radius: .8em; background: #0000001c; border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.1);}
.mw-cp-m p{margin: 0 0 .15em; font-size: .74em; line-height: 1.2; color: rgba(240,243,247,.74);}
.mw-cp-m svg{display: block; width: 100%; height: 1.8em; overflow: visible;}
.mw-cp-m line{stroke: rgba(240,243,247,.32); stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke;}
.mw-cp-m polyline{fill: none; stroke: #8EA0F5; stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke;}

/* CPV card: the big chart on the left, the five other parameters as small chart cards stacked on the right */
.mw-uc-cpv .mw-ui svg.mw-chart{left: 4cqw; top: calc(44% - 20.5cqw); width: 60cqw;}
.mw-cp-grid{left: auto; right: 4cqw; width: 31cqw; top: 1em; bottom: 4.1em; grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(0, 1fr); gap: .5em;}
.mw-cp-m{display: flex; flex-direction: column; justify-content: center; min-height: 0;}
.mw-cp-m svg{height: 1.9em;}

/* CPV small charts: the reference's lines, with their ups and downs between the two limits */
.mw-cp-m svg{height: 2.5em;}

/* Impact assessment card: a little more blur on both glass panels */
.mw-uc-inv .mw-ia-tag,.mw-uc-inv .mw-ia-ran{backdrop-filter: blur(2.5px); -webkit-backdrop-filter: blur(2.5px);}

/* "Whatever you run today, and whatever you run next." stays on one line */
section.bp-m-band .bp-m-head #h2b{max-width: none;}
@media (min-width:900px){section.bp-m-band .bp-m-head #h2b{white-space: nowrap;}}
/* Impact assessment card: the ring before "Out of tolerance" a little larger */
.mw-uc-inv .mw-ia-tag b::before{width: .85em; height: .85em;}

/* "Every way in feeds one record, and every use reads from it." stays on one line */
.mw-uses-head > #recordH{max-width: none;}
.mw-rec-head > .mw-is{max-width: none;}   /* the line under the heading sits on one row at desktop */
@media (min-width:900px){.mw-uses-head > #recordH{white-space: nowrap;}}

/* The record: a topographic map drawn in a Three.js shader behind the card, with a glowing flow along its contours (GSAP drives it) */
.rec-glow{position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; z-index: 0; border-radius: inherit;}   /* the record card's bottom glow */

/* The record: every card (the three tools, the core, the system nodes) uses the Review queue's glass: dark translucent fill, 4px blur, fine light edge, no drop shadow */
#record .rc,#record .rec-core,#record .sys{background: linear-gradient(160deg, rgba(10,9,34,.66), rgba(3,2,14,.6)); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.12);}
#record .rc::before{background: linear-gradient(90deg, transparent, rgba(240,243,247,.5), transparent);}

/* The platform: a module for each step, as a vertical path with six stops (the reference's layout, in our type and colours) */
.mw-pl-split{display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: 64px; align-items: start;}
.mw-pl-head{position: sticky; top: 120px; margin: 0;}
section.bp-m-band .mw-pl-head{margin-bottom: 0;}
.mw-pl-list{display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px;}
.mw-pl-path{display: block;}
.mw-pl-r{display: grid; grid-template-columns: 48px minmax(0, 1fr) 14px; gap: 20px; align-items: start; height: 120px; box-sizing: border-box; padding-top: 12px; border-top: 1px solid rgba(26,24,27,.10); color: #1A181B; text-decoration: none;}
.mw-pl-r:first-child{border-top: 0;}
.mw-pl-r:hover b{color: #4361EE;}
.mw-pl-g svg{display: block;}
.mw-pl-s{display: block; margin-bottom: 4px; font: 500 12px/16px "Roboto Mono", ui-monospace, Consolas, monospace; letter-spacing: .06em; text-transform: uppercase; color: #1A181B;}
.mw-pl-s i{font-style: normal; color: #4361EE; margin-right: 10px;}
.mw-pl-t b{display: block; font: 500 18px/24px "Poppins", sans-serif; letter-spacing: -.01em; transition: color .2s;}
.mw-pl-t .bp-m-ink2{display: block; font-size: 14.5px; line-height: 21px; margin-top: 4px; color: rgba(26,24,27,.7);}
.mw-pl-r > svg{width: 12px; margin-top: 8px; color: #5F6673; transition: transform .2s, color .2s;}
.mw-pl-r:hover > svg{transform: translateX(3px); color: #4361EE;}
@media (max-width:1100px){.mw-pl-split{grid-template-columns: 1fr; gap: 40px;} .mw-pl-head{position: static;}}
@media (max-width:900px){
  .mw-pl-list{grid-template-columns: 1fr;} .mw-pl-path{display: none;} .mw-pl-list > div{border-left: 2px solid #4361EE; margin-left: 7px;}
  .mw-pl-r{position: relative; height: auto; padding: 18px 0 18px 24px;}
  .mw-pl-r::before{content: ""; position: absolute; left: -9px; top: 24px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px #4361EE, inset 0 0 0 4px #fff, inset 0 0 0 7px #4361EE;}
}

/* The record: no dotted pattern over the card, just the soft light along the top */
#record .rec-slot::after{background: radial-gradient(ellipse 46% 52% at 50% -6%, rgba(110,140,255,.20), rgba(67,97,238,0) 70%);}

/* The platform, refined: six soft frosted cards, generous space, one quiet arrow each. No path, no dividers. */
.mw-pl-list{grid-template-columns: minmax(0, 1fr); gap: 0;}
.mw-pl-path{display: none;}
.mw-pl-list > div{display: grid; gap: 14px;}
.mw-pl-r{position: relative; height: auto; padding: 22px 26px 22px 22px; grid-template-columns: 60px minmax(0, 1fr) 38px; gap: 22px; align-items: center; border-top: 0; border-radius: 24px;
  background: rgba(255,255,255,.74); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.9), 0 1px 2px rgba(26,24,27,.04), 0 18px 40px -26px rgba(26,24,27,.28);
  transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s cubic-bezier(.16,1,.3,1), background .3s;}
.mw-pl-r::before{display: none;}
.mw-pl-r:hover{transform: translateY(-3px); background: rgba(255,255,255,.92); box-shadow: inset 0 0 0 1px #fff, 0 2px 4px rgba(26,24,27,.05), 0 26px 50px -24px rgba(67,97,238,.35);}
.mw-pl-r:hover b{color: #1A181B;}
.mw-pl-g{display: grid; place-items: center; width: 60px; height: 60px; border-radius: 18px; background: linear-gradient(150deg, #FFFFFF, #ECEFFA); box-shadow: inset 0 0 0 1px rgba(67,97,238,.10), 0 6px 14px -8px rgba(67,97,238,.35);}
.mw-pl-g svg{width: 38px; height: 38px;}
.mw-pl-s{margin-bottom: 6px; font: 500 11.5px/14px "Poppins", sans-serif; letter-spacing: .1em; color: #8A90A0;}
.mw-pl-s i{margin-right: 8px; color: #4361EE; font-variant-numeric: tabular-nums;}
.mw-pl-t b{font: 500 21px/1.25 "Poppins", sans-serif; letter-spacing: -.02em;}
.mw-pl-t .bp-m-ink2{margin-top: 6px; font-size: 15px; line-height: 1.5; color: rgba(26,24,27,.62);}
.mw-pl-r > svg{width: 38px; height: 38px; margin: 0; padding: 12px; box-sizing: border-box; border-radius: 50%; background: rgba(26,24,27,.05); color: #1A181B; transition: background .3s, color .3s, transform .45s cubic-bezier(.16,1,.3,1);}
.mw-pl-r:hover > svg{background: #4361EE; color: #fff; transform: translateX(2px);}
@media (max-width:900px){
  .mw-pl-list > div{border-left: 0; margin-left: 0;}
  .mw-pl-r{padding: 18px 18px 18px 16px; grid-template-columns: 52px minmax(0, 1fr) 34px; gap: 16px;}
  .mw-pl-g{width: 52px; height: 52px; border-radius: 15px;} .mw-pl-g svg{width: 34px; height: 34px;}
  .mw-pl-t b{font-size: 19px;} .mw-pl-r > svg{width: 34px; height: 34px; padding: 10px;}
}

/* The platform: no shadows on the cards, a plain arrow in the primary blue that only moves on hover */
.mw-pl-r{box-shadow: inset 0 0 0 1px rgba(255,255,255,.9); transition: none;}
.mw-pl-r:hover{transform: none; background: rgba(255,255,255,.74); box-shadow: inset 0 0 0 1px rgba(255,255,255,.9);}
.mw-pl-g{box-shadow: inset 0 0 0 1px rgba(67,97,238,.10);}
.mw-pl-r > svg{width: 18px; height: 18px; padding: 0; border-radius: 0; background: none; color: #1A181B; justify-self: end; transition: transform .35s cubic-bezier(.16,1,.3,1);}
.mw-pl-r:hover > svg{background: none; color: #1A181B; transform: translateX(6px);}
@media (max-width:900px){.mw-pl-r > svg{width: 16px; height: 16px; padding: 0;}}

/* The platform: a slim progress line beside the cards. It fills with a soft light as you scroll, and each step lights as it is reached. */
.mw-pl-list{grid-template-columns: 28px minmax(0, 1fr); gap: 18px;}
.mw-pl-rail{position: relative; width: 28px;}
.mw-pl-track,.mw-pl-fill{position: absolute; left: 13px; width: 2px; border-radius: 2px; top: 0;}
.mw-pl-track{background: rgba(26,24,27,.10);}
.mw-pl-fill{height: 0; background: linear-gradient(180deg, #4361EE, #8EA0F5);}
.mw-pl-fill::after{content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #4361EE; box-shadow: 0 0 0 4px rgba(67,97,238,.16), 0 0 14px rgba(67,97,238,.55);}
.mw-pl-dot{position: absolute; left: 7px; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: #F0F3F7; box-shadow: inset 0 0 0 2px rgba(26,24,27,.16); transition: box-shadow .5s ease, background .5s ease, transform .5s cubic-bezier(.34,1.56,.64,1);}
.mw-pl-dot.on{background: #4361EE; box-shadow: inset 0 0 0 2px #4361EE, 0 0 0 4px rgba(67,97,238,.14); transform: scale(.86);}
@media (max-width:900px){.mw-pl-list{grid-template-columns: 22px minmax(0, 1fr); gap: 12px;} .mw-pl-rail{width: 22px;} .mw-pl-track,.mw-pl-fill{left: 10px;} .mw-pl-dot{left: 4px;}}

/* The platform: the step markers are the reference's: a white ring with a dot in its centre, in the primary blue once reached */
.mw-pl-dot{left: 6px; width: 16px; height: 16px; margin-top: -8px; background: #FFFFFF; box-shadow: inset 0 0 0 2px rgba(26,24,27,.18); transition: box-shadow .45s ease;}
.mw-pl-dot::after{content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #4361EE; transform: scale(0); transition: transform .5s cubic-bezier(.34,1.56,.64,1);}
.mw-pl-dot.on{background: #FFFFFF; box-shadow: inset 0 0 0 2px #4361EE; transform: none;}
.mw-pl-dot.on::after{transform: scale(1);}
@media (max-width:900px){.mw-pl-dot{left: 3px;}}

/* FAQ: the heading on the left stays in view while the answers scroll */
.mfq-l{position: sticky; top: 120px; align-self: start;}
@media (max-width:900px){.mfq-l{position: static;}}
/* FAQ: one column on tablet and phone, with roomier-than-cramped rows */
@media (max-width:900px){.mfq-card{grid-template-columns: minmax(0, 1fr); gap: 32px;}}
@media (max-width:640px){.mfq-list summary{gap: 12px; padding: 18px 18px;} .mfq-list summary::before{width: 28px; font-size: 20px;} .mfq-a{padding: 0 18px 20px 18px;}}
/* Validation: the spec cells keep their padding inside the side borders on phones */
@media (max-width:520px){section.bp-m-day .bp-m-spec>div{padding-left: 20px; padding-right: 20px;}}

/* What changes: the card (Documentation-driven deviations per batch and the other readings) is the Review queue's card:
   dark translucent navy, 4px blur, a fine light edge, a light line along the top, the title in white and the owner in muted mono */
.wr-shell{background: linear-gradient(160deg, rgba(10,9,34,.66), rgba(3,2,14,.6)); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.12);}
.wr-shell::before{content: ""; position: absolute; left: 1.4em; right: 1.4em; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(240,243,247,.5), transparent);}
.wr-sh .wv-top{font-weight: 500; color: #F0F3F7; border-bottom-color: rgba(240,243,247,.08);}
.wr-sh .wv-own{font-family: "Roboto Mono", ui-monospace, Consolas, monospace; font-size: .86em; font-weight: 400; color: rgba(240,243,247,.6);}

/* The record: "Across sites and partners" reads clearly over the glow */
#record .rec-foot{color: rgba(255,255,255,.88);}

/* Hero title: larger */
.mw-hero-title{font-size: clamp(40px, 5.8vw, 72px); line-height: 1.12; max-width: 1180px;}

/* CTA: the centre card is wider; the side cells are narrower */
.mw-cta-wrap > section#book-demo.cta2{grid-template-columns: minmax(20px, 3.5%) minmax(0, 1fr) minmax(20px, 3.5%);}

/* CTA points: the step numbers smaller, the action labels larger */
.cta-tl .n{font-size: 11px; line-height: 14px; letter-spacing: .06em;}
.cta-tl .t{margin-top: 8px; font-size: 14px; line-height: 1.3;}

/* The hero and the "what Mareana is" section are one: the passage and the five steps continue below the card on the same dark background */
.mw-hero-intro{width: 100%; margin-top: clamp(96px, 11vw, 150px); text-align: left; color: #FFFFFF; font-family: "Poppins", sans-serif;
  --mw-line: rgba(255,255,255,.10); --mw-ink3: rgba(255,255,255,.6);}
.mw-hero-intro .mw-intro-in{max-width: 1280px; margin: 0 auto;}
.mw-hero-intro .mw-intro-text{align-items: flex-start; text-align: left; margin-bottom: 56px;}
.mw-hero-intro .mw-is{color: rgba(255,255,255,.72);}
.mw-hero-intro .mw-stance-h{color: #FFFFFF;}
.mw-hero-intro .mw-ph{color: #FFFFFF; background-image: linear-gradient(#8EA0F5, #8EA0F5);}
.mw-hero-intro .mw-flowbox{border-color: rgba(255,255,255,.10); background: rgba(255,255,255,.03);}
.mw-hero-intro .mw-fn{color: rgba(255,255,255,.38);}
.mw-hero-intro .mw-flow-i h3{color: #FFFFFF;}
.mw-hero-intro .mw-flow-i p{color: rgba(255,255,255,.66);}
.mw-hero-intro .mw-person{background: rgba(255,255,255,.04); color: rgba(255,255,255,.64);}
.mw-hero-intro .mw-person b{color: #FFFFFF;}
.mw-hero-intro .mw-jo{background: #FFFFFF; color: #1A181B;}

/* More space between the logo row and the passage below it */
.mw-trust + .mw-hero-intro{margin-top: clamp(56px, 5.5vw, 80px);}

/* Hero card: a little further below the button */
@media (min-width:961px){.mw-box{margin-top: 116px;}}

/* The five steps, as the reference's window: a header, five columns each with a key, a drawing and a caption, then the person */
.mw-hero-intro .mw-flowbox{background: #07051A; border: 1px solid #1C1A3C; border-radius: calc(var(--radius-5xl) - 8px); color: #F0F3F7;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), inset 0 1px 0 rgba(255,255,255,.08);}
.mw-fbx{padding: 8px; border-radius: var(--radius-5xl); background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.05)); border: 1px solid rgba(255,255,255,0.24); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%);}   /* glass bezel, same as .mw-box */
.mw-fh{display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 24px; border-bottom: 1px solid rgba(255,255,255,.06);}
.mw-fh h3{margin: 0; font: 500 18px/24px "Poppins", sans-serif; color: #F0F3F7;} .mw-fh p{margin: 2px 0 0; font-size: 13px; color: rgba(240,243,247,.62);}
.mw-ftag{font: 500 12px/16px "Poppins", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: rgba(240,243,247,.6); white-space: nowrap;}
.mw-hero-intro .mw-flow-i{display: grid; gap: 14px; align-content: start; padding: 22px 18px 20px; border-left: 1px solid rgba(255,255,255,.06);}
.mw-hero-intro .mw-flow-i:first-child{border-left: 0;}
.mw-hero-intro .mw-flow-i > :not(.mw-fv){margin-left: 0; margin-right: 0;}
.mw-fk{margin: 0; font: 400 12px/16px "Roboto Mono", ui-monospace, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; color: rgba(240,243,247,.6);}
.mw-hero-intro .mw-fv{margin: 0; aspect-ratio: auto; height: 150px; padding: 0; background: none; border: 0; display: grid; place-items: center;}
.mw-hero-intro .mw-fv .ls-art{width: 100%; max-width: 200px; height: auto;}
.mw-fc{margin: 0; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.07); font: 400 13px/18px "Roboto Mono", ui-monospace, Consolas, monospace; color: rgba(240,243,247,.7); transition: color .4s;}
.mw-hero-intro .mw-flow-i.on .mw-fc{color: #41EAD4;}
.mw-hero-intro .mw-flow-i[data-i="0"].on .mw-fc,.mw-hero-intro .mw-flow-i[data-i="3"].on .mw-fc{color: #A0B8FC;}
.mw-hero-intro .mw-person{padding: 16px 24px; border-top: 1px solid rgba(255,255,255,.06); background: none; font-size: 14px; color: rgba(240,243,247,.8);}
.mw-hero-intro .mw-trail{font: 400 12px/16px "Roboto Mono", ui-monospace, Consolas, monospace; color: rgba(240,243,247,.62);}
.mw-hero-intro .mw-jo{width: 34px; height: 24px; padding: 0; border-radius: 12px; background: #F94E9B; color: #1A181B;}
@media (max-width:1100px){.mw-hero-intro .mw-flow-i:nth-child(odd){border-left: 0;}}

/* The five steps: the columns sit closer together, and each label closer to its drawing */
.mw-hero-intro .mw-flow-i{gap: 8px; padding: 18px 10px 40px;}   /* room above the person line */
.mw-hero-intro .mw-fv{height: 136px;}