@font-face{font-family:Montserrat;src:url("assets/montserrat.woff2") format("woff2");font-weight:400 700;font-display:swap}
:root{color-scheme:dark;--bg:#0b111c;--deep:#080d16;--navy:#192537;--text:#f6f3ec;--muted:#b9c0cb;--gold:#e2c391;--gold-deep:#b09e80;--line:#ffffff20;--max:1300px}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:110px}
body{margin:0;background:var(--bg);color:var(--text);font-family:Montserrat,Arial,sans-serif;font-size:15px;line-height:1.65}
img{display:block;max-width:100%;height:auto}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid #ffe4a8;outline-offset:5px}
h1,h2,h3,p,figure{margin:0}
h1,h2,h3{font-weight:600;line-height:1.03}
h1,h2{letter-spacing:-.077em}
em{font-style:normal;color:var(--gold)}
.wrap{width:min(var(--max),calc(100% - 104px));margin-inline:auto}
.skip{position:fixed;left:18px;top:12px;transform:translateY(-160%);background:#f6f3ec;color:#111a28;z-index:30;padding:10px 16px;border-radius:8px}
.skip:focus{transform:translateY(0)}
.header{position:sticky;top:0;z-index:20;background:#0b111ceb;border-bottom:1px solid #ffffff13;backdrop-filter:blur(22px)}
.nav{height:74px;display:flex;align-items:center;justify-content:space-between;gap:30px}
.brand{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;font-weight:600;font-size:17px;letter-spacing:-.065em}
.brand img{width:38px;height:auto}
.brand small{font-size:9px;font-weight:700;letter-spacing:.16em;color:var(--gold);margin-left:3px}
.nav nav{display:flex;align-items:center;gap:29px;color:#cbd0d8;font-size:12px;font-weight:600}
.nav nav a,.text-link{transition:color .2s}
.nav nav a:hover,.text-link:hover{color:#ffe2ac}
.menu-toggle{display:none}
.button{display:inline-flex;align-items:center;justify-content:center;gap:11px;padding:12px 17px;border:1px solid var(--line);border-radius:8px;min-height:47px;font-size:12px;font-weight:700;line-height:1.3;transition:background .23s,color .23s,border-color .23s,transform .23s;white-space:nowrap}
.button:hover{transform:translateY(-2px);border-color:#e1c69b80}
.button-small{padding:8px 12px;min-height:37px;color:var(--gold);background:#c9a8750d}
.button-gold{color:#15181b;background:linear-gradient(120deg,#f0d7ac,#c8a46e);border-color:#f0d7ac;box-shadow:0 8px 28px #bd8f4830}
.button-gold:hover{background:#ffe0a8}
.button-glass{background:#ffffff09;color:var(--text)}
.button-glass:hover{background:#ffffff15}
.play{display:inline-block;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid currentColor}
.hero{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 77% 42%,#324157 0,transparent 46%),radial-gradient(ellipse at 90% 66%,#6a4c2e68 0,transparent 39%),linear-gradient(130deg,#0d1523 0%,#0d1727 55%,#111b29 100%)}
.hero::before,.field-section::before{content:"";position:absolute;z-index:-1;inset:0;background-image:linear-gradient(#c5d7f112 1px,transparent 1px),linear-gradient(90deg,#c5d7f112 1px,transparent 1px);background-size:66px 66px;mask-image:radial-gradient(ellipse at 75% 44%,#000 0%,transparent 72%);pointer-events:none}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#0b111c,transparent 35%);pointer-events:none}
.hero-grid{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.25fr);align-items:center;gap:28px;min-height:640px;padding-block:54px 30px}
.hero-copy{position:relative;z-index:3;padding-bottom:30px;animation:enter .72s ease both}
.eyebrow{display:flex;align-items:center;gap:10px;color:var(--gold);font-weight:700;font-size:10px;line-height:1.35;letter-spacing:.23em}
.signal{display:inline-block;width:6px;height:6px;border-radius:50%;background:#e2c391;box-shadow:0 0 14px #f5c785}
h1{font-size:clamp(57px,6.1vw,98px);margin:22px 0 23px}
.lede{max-width:480px;color:#cbd2dc;font-size:clamp(14px,1.3vw,17px);line-height:1.85}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:31px}
.hero-stage{min-height:470px;position:relative;isolation:isolate;display:grid;place-items:center;perspective:1200px}
.stage-halo{position:absolute;z-index:-1;inset:10% 1% 2% 0;background:radial-gradient(ellipse,#e3ab613d,transparent 68%);animation:ambient 7s ease-in-out infinite alternate;pointer-events:none}
.glass{background:linear-gradient(135deg,#223047ba,#141e30c9);border:1px solid #dae7ff27;box-shadow:inset 0 1px 0 #ffffff0e,0 24px 60px #02050c50;backdrop-filter:blur(16px)}
.hero-screen{position:absolute;left:0;top:17%;width:94%;border-radius:13px;overflow:hidden;box-shadow:0 32px 80px #050a14a6,0 0 50px #dcc5991a;transform:rotateY(-8deg) rotateX(5deg);animation:screen-enter .95s .1s both}
.window-bar{display:flex;align-items:center;gap:12px;min-height:33px;padding:6px 12px;color:#d6dbe1;letter-spacing:.17em;font-size:8px;font-weight:700;background:#1a2537}
.window-dots{display:flex;gap:4px}
.window-dots i{width:5px;height:5px;background:#bd9d6a;border-radius:50%;opacity:.6}
.window-dots i:nth-child(2){opacity:.4}
.window-dots i:nth-child(3){opacity:.26}
.hero-screen>img{width:100%}
.phone{padding:5px;position:relative;overflow:hidden;border-radius:19px;border:1px solid #acb6c56b;background:linear-gradient(120deg,#5b6476,#182337 36%,#737885);box-shadow:0 20px 45px #03060e9c;color:inherit}
.phone>img{width:100%;border-radius:13px}
.phone-notch{position:absolute;z-index:1;top:7px;left:50%;transform:translateX(-50%);width:29%;height:5px;border-radius:9px;background:#090e17}
.hero-phone{position:absolute;width:23%;right:0;top:40%;transform:rotate(9deg);animation:float 6s 1s ease-in-out infinite alternate}
.stage-label{display:flex;align-items:center;gap:10px;position:absolute;bottom:13%;left:10%;border-radius:10px;padding:9px 13px;font-size:10px;color:#d6dde6;line-height:1.55;animation:enter .85s .25s both}
.stage-label i{width:7px;height:7px;border-radius:50%;background:#7bdec5;box-shadow:0 0 14px #7bdec57a}
.stage-label strong{font-size:11px;color:#fff}
.service-strip{position:relative;min-height:68px;border-top:1px solid #ffffff1a;display:grid;grid-template-columns:repeat(4,1fr);align-items:center;text-align:center;color:#cbd2dc;font-size:11px;font-weight:600;gap:10px}
.service-strip span+span{border-left:1px solid #ffffff19}
@keyframes enter{from{opacity:0;translate:0 15px}to{opacity:1;translate:0 0}}
@keyframes screen-enter{from{opacity:0;transform:rotateY(-12deg) rotateX(7deg) translateY(18px)}to{opacity:1;transform:rotateY(-8deg) rotateX(5deg)}}
@keyframes float{from{transform:translateY(0) rotate(9deg)}to{transform:translateY(-10px) rotate(7deg)}}
@keyframes ambient{from{opacity:.55;scale:.95}to{opacity:1;scale:1.12}}
.section{padding-block:101px}
.section-heading{display:grid;grid-template-columns:1.3fr .7fr;align-items:end;gap:30px;margin-bottom:32px}
.section-heading h2,.field-copy h2,.closing h2{font-size:clamp(40px,5vw,73px);margin-top:13px}
.section-heading>p{color:var(--muted);max-width:44ch;padding-bottom:4px}
.explorer{border-radius:18px;overflow:hidden;background:linear-gradient(125deg,#19273b,#101a2a)}
.tabs{display:grid;grid-template-columns:repeat(6,1fr);padding:8px;gap:4px;background:#090f1bb5;border-bottom:1px solid var(--line)}
.tabs button{position:relative;min-height:49px;border:1px solid transparent;border-radius:8px;padding:9px 7px;background:transparent;color:#c5ccd7;cursor:pointer;font-size:12px;font-weight:600;text-align:center}
.tabs button span{color:var(--gold);margin-right:3px}
.tabs button:hover{background:#ffffff0c}
.tabs button[aria-selected="true"]{border-color:#dfbf8650;background:#d1b38220;color:#ffdfaa}
.workflow-panel{min-height:342px;display:grid;grid-template-columns:minmax(230px,.71fr) minmax(0,1.29fr);align-items:center;gap:clamp(15px,3vw,50px);padding:clamp(22px,4vw,59px)}
.workflow-copy h3{font-size:clamp(25px,3vw,45px);line-height:1.13;letter-spacing:-.06em}
.workflow-copy p{color:var(--muted);margin-top:13px;font-size:14px}
.feature-list{display:grid;gap:9px;margin:22px 0 0;padding:0;list-style:none;color:#e8eaf0;font-size:12px;font-weight:600}
.feature-list li{display:flex;align-items:baseline;gap:9px}
.feature-list li::before{content:"";display:inline-block;width:5px;height:5px;flex:none;border:1px solid var(--gold);rotate:45deg}
.workflow-display{min-width:0}
.workflow-panel.changed .workflow-display,.workflow-panel.changed .workflow-copy{animation:enter .32s ease both}
.screenshot-button{display:block;width:100%;position:relative;overflow:hidden;border-radius:10px;border:1px solid #ffffff37;padding:0;background:var(--navy);cursor:zoom-in;box-shadow:0 12px 40px #070a1280}
.screenshot-button>img{width:100%}
.screenshot-button>span{position:absolute;right:8px;bottom:8px;display:grid;place-items:center;width:32px;height:32px;border-radius:7px;color:#fff;background:#182537}
.visual-caption{color:#aeb7c6;font-size:10px;font-weight:600;margin-top:11px;text-align:center}
.sample{overflow:hidden;color:#192537;background:#f3f0ea;border-radius:10px;border:1px solid #d7d4ce;box-shadow:0 13px 38px #03071165;font-family:Montserrat,Arial,sans-serif}
.sample-bar{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:11px 15px;color:#f1f4fa;background:#1b2940;font-size:10px;font-weight:700;letter-spacing:.06em}
.sample-tag{color:#efd2a2;font-size:8px;white-space:nowrap}
.sample-main{padding:16px 17px}
.sample-main h4{font-size:17px;line-height:1.25;margin:0 0 8px;letter-spacing:-.035em}
.sample-intro{color:#4d5563;font-size:10px;margin-bottom:12px}
.sample-rows{display:grid;gap:6px}
.sample-row{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:8px;align-items:center;min-height:34px;padding:5px 9px;background:#fff;border-radius:5px;border:1px solid #e2e0da;font-size:10px;line-height:1.25}
.sample-row strong{font-weight:700}
.sample-row small{color:#495366;font-size:9px;line-height:1.2;text-align:right}
.sample-row>span:first-child{display:grid;place-items:center;color:#6b532e;font-size:13px;font-weight:700}
.field-section{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 70% 48%,#414960,transparent 53%),linear-gradient(128deg,#121c2d,#1b263a 60%,#221f27);border-block:1px solid #ffffff1a}
.field-grid{display:grid;grid-template-columns:1fr 1.12fr;gap:38px;align-items:center;padding-block:83px}
.field-copy h2{font-size:clamp(41px,4.6vw,68px);margin-bottom:19px}
.mobile-platforms{display:flex;flex-wrap:wrap;gap:7px;margin-top:22px}
.mobile-platforms span,.status{background:#ffffff0c;border:1px solid #ffffff29;color:#e3e7ee;border-radius:100px;font-weight:600;font-size:10px;padding:5px 9px;white-space:nowrap}
.availability{font-size:11px;color:#c6cfdd;margin-top:9px}
.client-note{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;border-radius:11px;padding:13px;margin-top:24px;max-width:455px}
.client-note strong{font-size:12px}
.client-note p{color:#c6cfdd;font-size:11px}
.client-icon{display:grid;place-items:center;width:32px;height:32px;background:#e3bf8124;color:#f6d6a1;border-radius:8px}
.field-stage{position:relative;isolation:isolate}
.field-phones{display:flex;align-items:center;justify-content:center;padding:15px 0 25px}
.field-phones .phone{width:30%;max-width:175px;cursor:zoom-in;transition:transform .3s ease;flex:none}
.field-back{transform:translateX(5%) translateY(6%) rotate(-10deg)}
.field-front{z-index:2;transform:translateY(-3%)}
.field-photos{transform:translateX(-5%) translateY(6%) rotate(10deg)}
.field-phones .phone:hover,.field-phones .phone:focus-visible{transform:translateY(-7%) rotate(0);z-index:3}
.text-link{color:var(--gold);font-size:12px;font-weight:700}
.integration-section{padding-top:0}
.connectors{display:grid;gap:9px}
.connector{border-radius:10px;background:linear-gradient(125deg,#1c293b,#121b2a)}
.connector summary{min-height:74px;display:grid;grid-template-columns:1fr auto 21px;align-items:center;gap:17px;padding:11px 16px;cursor:pointer;list-style:none}
.connector summary::-webkit-details-marker{display:none}
.connector summary:hover{background:#ffffff08}
.connector-brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:15px}
.connector-brand img{object-fit:contain;object-position:left center}
.connector-brand.apex img{height:33px;width:106px}
.connector-brand.sheet>span{display:grid;place-items:center;width:29px;height:29px;border-radius:6px;background:#e3bf8124;color:var(--gold)}
.status-gold{background:#bda07128;border-color:#c6ab7b5c;color:#f3d59e}
.expand{position:relative;display:block;width:19px;height:19px;border:1px solid #ffffff24;border-radius:5px}
.expand::before,.expand::after{content:"";width:8px;height:1px;background:#e8d3ac;position:absolute;left:5px;top:8px}
.expand::after{rotate:90deg}
.connector[open] .expand::after{display:none}
.connector-detail{padding:0 16px 15px;color:var(--muted);font-size:13px}
.connector-groups{display:grid;gap:clamp(21px,4vw,39px)}
.connector-group-title{color:var(--gold);font-size:clamp(18px,2.4vw,25px);font-weight:650;letter-spacing:-.025em;margin:0 0 12px}
.section-heading .integrations-lede{color:#f4ddae;font-size:clamp(17px,1.8vw,21px);font-weight:530;line-height:1.5}
.connector-brand.stripe img{width:clamp(64px,15vw,86px);height:auto}
.connector-brand.xero img{width:clamp(68px,15vw,88px);height:auto}
.connector-brand.quickbooks img{width:clamp(99px,25vw,143px);height:auto}
.connector-attribution{font-size:11px;margin-top:5px}
.closing{border-block:1px solid #ffffff19;background:radial-gradient(ellipse at 50% 110%,#7b583d73,transparent 71%),linear-gradient(130deg,#151d2c,#202c41)}
.closing-inner{display:grid;justify-items:center;gap:17px;text-align:center;padding-block:66px}
.closing-inner h2{margin-top:0;font-size:clamp(35px,5vw,61px)}
.closing-inner img{width:54px}
footer{color:#b8c0ce}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:77px;font-size:11px}
.footer-inner .brand{font-size:14px}
.footer-inner .brand img{width:30px}
.footer-contact{overflow-wrap:anywhere}
dialog{width:min(100% - 28px,1040px);max-height:calc(100% - 28px);overflow:auto;padding:16px;background:#141e2f;color:var(--text);border:1px solid #ffffff30;border-radius:14px;box-shadow:0 25px 70px #0009}
dialog::backdrop{background:#05080edb;backdrop-filter:blur(8px)}
dialog form{display:flex;justify-content:flex-end}
.close-dialog{display:grid;place-items:center;width:39px;height:39px;margin-bottom:8px;color:var(--text);background:#ffffff15;border:1px solid #ffffff33;border-radius:8px;font-size:24px;line-height:1;cursor:pointer}
dialog img{max-height:calc(100dvh - 128px);max-width:100%;width:auto;object-fit:contain;margin:auto;border-radius:7px}
dialog figcaption{text-align:center;margin-top:9px;color:var(--muted);font-size:12px}
.motion .reveal{opacity:0;translate:0 17px;transition:opacity .6s ease,translate .6s ease}
.motion .reveal.is-visible{opacity:1;translate:0 0}
@media(max-width:1160px){
  .wrap{width:calc(100% - 76px)}
  .hero-grid{min-height:555px}
  .hero-stage{min-height:397px}
  .stage-label{bottom:11%}
}
@media(max-width:910px){
  .wrap{width:calc(100% - 52px)}
  .nav{gap:16px}
  .nav nav{gap:14px}
  .hero-grid{grid-template-columns:1fr 1fr;gap:8px;min-height:494px}
  .hero-stage{min-height:320px}
  .hero-screen{top:19%;width:97%}
  .hero-phone{right:-4%;width:27%}
  .stage-label{bottom:9%;left:4%}
  h1{font-size:clamp(44px,7vw,65px)}
  .section{padding-block:74px}
  .integration-section{padding-top:0}
  .field-grid{padding-block:66px;gap:22px}
  .workflow-panel{min-height:310px;gap:21px}
}
@media(max-width:680px){
  html{scroll-padding-top:80px}
  .wrap{width:calc(100% - 36px)}
  .nav{height:62px;gap:12px}
  .nav nav{display:none;position:absolute;top:62px;inset-inline:0;flex-direction:column;align-items:stretch;gap:0;padding:6px 18px 12px;background:#101a2a;border-bottom:1px solid #ffffff29}
  .nav nav.open{display:flex}
  .nav nav a{padding:11px 9px}
  .menu-toggle{display:grid;align-content:center;gap:4px;justify-items:center;margin-left:auto;padding:0;width:40px;height:38px;border:1px solid var(--line);border-radius:7px;background:#ffffff08}
  .menu-toggle span{width:15px;height:1px;background:var(--gold)}
  .header-action{display:none}
  .hero-grid{display:block;min-height:0;padding-top:54px;padding-bottom:0}
  .hero-copy{padding-bottom:4px}
  .hero-stage{min-height:0;aspect-ratio:1.18;max-width:490px;margin:2px auto 0}
  .hero-screen{top:13%;width:91%;left:2%}
  .hero-phone{right:0;top:36%;width:25%}
  .stage-label{left:6%;bottom:10%}
  h1{font-size:clamp(49px,11.1vw,73px);margin-block:16px}
  .hero-actions{margin-top:19px}
  .service-strip{grid-template-columns:1fr 1fr;gap:0;min-height:73px;font-size:9px;padding-block:4px}
  .service-strip span:nth-child(3){border-left:0}
  .section{padding-block:60px}
  .integration-section{padding-top:0}
  .section-heading{grid-template-columns:1fr;gap:12px;margin-bottom:20px}
  .section-heading h2,.field-copy h2{margin-top:10px}
  .section-heading>p{font-size:13px}
  .tabs{grid-template-columns:repeat(3,1fr)}
  .tabs button{min-height:43px;font-size:10px}
  .workflow-panel{grid-template-columns:1fr;gap:19px;padding:19px}
  .workflow-copy p{font-size:13px}
  .feature-list{margin-top:13px}
  .field-grid{grid-template-columns:1fr;padding-block:56px;gap:24px}
  .field-stage{max-width:480px;margin-inline:auto;width:100%}
  .field-copy h2{margin-bottom:13px}
  .field-phones{padding-top:9px}
  .connector summary{gap:8px;padding-inline:10px}
  .connector-detail{padding-inline:10px}
  .connector-brand{font-size:12px}
  .connector-brand.sheet>span{width:21px;height:21px}
  .closing-inner{padding-block:49px}
  .footer-inner{flex-wrap:wrap;padding-block:15px}
  .footer-inner>span{display:none}
}
@media(max-width:360px){
  .button{font-size:10px;padding-inline:10px}
  .workflow-panel{padding:14px}
  .client-note{gap:6px;padding:8px}
  .connector summary{grid-template-columns:1fr auto 17px}
  .status{font-size:9px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}
  .motion .reveal{opacity:1;translate:none}
}
button.button{cursor:pointer}
.arrow-icon{display:inline-block;width:9px;height:9px;position:relative;color:inherit}
.arrow-icon::before{content:"";position:absolute;width:7px;height:7px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;top:0;right:0}
.arrow-icon::after{content:"";position:absolute;width:9px;height:1.5px;background:currentColor;left:0;top:7px;transform:rotate(-45deg);transform-origin:left center}
.arrow-down{transform:rotate(90deg)}
#tour-dialog{width:min(100% - 28px,1060px);background:radial-gradient(ellipse at 80% 43%,#3f4d63,#1a2537 50%,#0f1827 83%)}
.tour-scene{display:grid;grid-template-columns:1fr 1.08fr;align-items:center;gap:26px;min-height:320px;padding:10px 23px 23px}
.tour-scene.enter .tour-copy,.tour-scene.enter .tour-art{animation:enter .54s ease both}
.tour-copy h2{font-size:clamp(33px,4.8vw,65px);margin-top:13px}
.tour-copy>p:last-child{color:#cbd2dc;font-size:14px;margin-top:13px}
.tour-art{min-height:230px;display:grid;place-items:center}
.tour-art img{max-height:285px;border-radius:9px;box-shadow:0 18px 39px #0509128c}
.tour-art img[data-art="mark"]{width:50%;box-shadow:none}
.tour-art img[data-art="verify"]{width:90%;box-shadow:none}
.tour-controls{display:flex;gap:8px;align-items:center;padding:12px 12px 0;border-top:1px solid var(--line)}
.tour-controls button{padding:7px 10px;border:1px solid #ffffff33;border-radius:7px;background:#ffffff0c;color:var(--text);font-size:11px;font-weight:600;cursor:pointer}
.tour-controls button:disabled{opacity:.45;cursor:default}
.tour-controls span{margin-left:auto;color:var(--gold);font-size:11px}
@media(max-width:680px){
  .tour-scene{grid-template-columns:1fr;min-height:0;padding:3px 4px 12px;gap:10px}
  .tour-art{min-height:160px}
  .tour-art img{max-height:170px}
}
.draft-example{margin-top:13px;border-top:1px solid var(--line);padding-top:10px}
.draft-example summary{font-size:11px;font-weight:700;color:var(--gold);cursor:pointer}
.draft-example .sample{margin-top:11px}

.verify-heading img{width:clamp(135px,16vw,200px);height:auto;margin-bottom:20px}
.product-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.product-card{overflow:hidden;min-width:0;border-radius:17px;padding:12px;background:linear-gradient(138deg,#1e2b40,#121c2e)}
.product-image{aspect-ratio:1380/882;border-radius:10px;box-shadow:none;transition:border-color .2s ease,box-shadow .2s ease}
.product-image:hover{border-color:#dfc390;box-shadow:0 10px 28px #050a15a1}
.product-image>img{width:100%;height:100%;object-fit:cover;object-position:top center}
.product-caption{padding:17px 8px 11px}
.product-caption h3{font-size:clamp(19px,2.1vw,27px);line-height:1.17;letter-spacing:-.047em}
.product-caption p{margin-top:8px;color:var(--muted);font-size:13px}
.product-caption .text-link{display:inline-flex;gap:10px;align-items:center;margin-top:11px}
.product-note{font-size:11px;color:#aab4c2;margin-top:14px}
.portal-section{padding-top:0}
.integration-section{padding-top:clamp(60px,8vw,100px)}
.draft-example .screenshot-button{margin-top:11px}
@media(max-width:680px){
  .product-gallery{grid-template-columns:1fr;gap:13px}
  .product-card{padding:8px;border-radius:13px}
  .product-caption{padding:13px 5px 9px}
  .verify-heading img{margin-bottom:14px}
}

.connector-brand.street img{width:128px;height:auto;filter:brightness(0) invert(.94)}
.closing-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:12px}

.product-tour-link {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: .22em;
}

#teaser-dialog {
  width: min(1120px, calc(100% - 24px));
  max-width: none;
  max-height: calc(100dvh - 24px);
  padding: 0;
  overflow: hidden;
  border-radius: 16px;
}

.teaser-player-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 10px 4px 16px;
  background: #111c2c;
}

.teaser-player-bar h2 {
  margin: 0;
  color: #f6edda;
  font-size: .9rem;
}

.teaser-player-bar button {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #f6edda;
  font-size: 1.6rem;
  cursor: pointer;
}

.teaser-player-bar button:hover,
.teaser-player-bar button:focus-visible {
  background: #26374d;
}

#teaser-frame {
  display: block;
  width: 100%;
  height: min(660px, calc(100dvh - 80px));
  border: 0;
  background: #111c2c;
}

/* Translucent panels share the existing IPS navy, steel and gold palette. */
.glass,
.button-glass,
.service-strip,
dialog {
  border-color: #dae7ff35;
  background: linear-gradient(142deg, #3748619c 0%, #1b293dc7 42%, #111a29de 100%);
  box-shadow:
    inset 0 1px #ffffff24,
    inset 1px 0 #ffffff09,
    0 18px 44px #02050c64;
  -webkit-backdrop-filter: blur(22px) saturate(128%);
  backdrop-filter: blur(22px) saturate(128%);
}

.header {
  background: linear-gradient(110deg, #182437c9, #0b111cdb 66%);
  border-bottom-color: #dbe7ff25;
  -webkit-backdrop-filter: blur(24px) saturate(135%);
  backdrop-filter: blur(24px) saturate(135%);
}

.button-glass:hover {
  background: linear-gradient(142deg, #455773ae, #26354bcc 58%, #182337de);
}

.service-strip {
  margin-bottom: 18px;
  border: 1px solid #dae7ff25;
  border-radius: 12px;
  background: linear-gradient(105deg, #26364ba3, #141e2fc9 50%, #4e3d3052);
}

.hero-screen {
  border-color: #e5edff68;
  box-shadow: 0 34px 80px #050a14a6, 0 0 54px #dcc59928;
}

.window-bar {
  background: linear-gradient(108deg, #34465e, #172236 68%);
  border-bottom: 1px solid #dbe7ff26;
}

.phone {
  background: linear-gradient(135deg, #708098b3, #182337ed 38%, #586476b3 82%, #182337);
  box-shadow: inset 0 1px #ffffff45, 0 20px 45px #03060e9c;
}

.explorer {
  background:
    radial-gradient(ellipse at 88% 18%, #576c8552, transparent 64%),
    linear-gradient(128deg, #25374e9c, #111b2add 72%);
}

.tabs {
  background: #0b1321a8;
  box-shadow: inset 0 1px #ffffff12;
}

.tabs button[aria-selected="true"] {
  background: linear-gradient(140deg, #e2c3913d, #b09e801c);
  box-shadow: inset 0 1px #ffe5bb2b;
}

.product-card {
  background: linear-gradient(145deg, #2d405b9c, #152236cf 68%);
}

.product-caption {
  background: linear-gradient(105deg, #d8e6ff0c, transparent 70%);
}

.connector {
  background: linear-gradient(122deg, #3649619e, #1a273cce 51%, #141e2dd6);
}

.mobile-platforms span,
.status {
  box-shadow: inset 0 1px #ffffff1b;
}

.closing {
  background:
    radial-gradient(ellipse at 50% 110%, #7b583d73, transparent 71%),
    linear-gradient(138deg, #19283bbc, #28384fdb 70%, #332a2bbd);
}

/* Orbit paths sit behind the screenshots and never receive pointer input. */
.orbit-field {
  position: absolute;
  z-index: -1;
  inset: -5% -8%;
  pointer-events: none;
}

.orbit-plane {
  position: absolute;
  top: var(--orbit-top, 50%);
  left: var(--orbit-left, 50%);
  width: var(--orbit-width, 100%);
  aspect-ratio: 1;
  border: 1px solid var(--orbit-line, #e2c39169);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(var(--orbit-tilt)) scaleY(var(--orbit-depth));
  box-shadow: 0 0 22px #e2c3911a;
}

.orbit-primary {
  --orbit-top: 48%;
  --orbit-width: 104%;
  --orbit-tilt: -24deg;
  --orbit-depth: .54;
  --orbit-speed: 25s;
}

.orbit-cross {
  --orbit-left: 53%;
  --orbit-top: 44%;
  --orbit-width: 91%;
  --orbit-tilt: 23deg;
  --orbit-depth: .64;
  --orbit-line: #c5d7f152;
  --orbit-speed: 19s;
  --orbit-direction: reverse;
  --orbit-node: #d4dce7;
}

.orbit-trace {
  --orbit-top: 52%;
  --orbit-width: 113%;
  --orbit-tilt: -14deg;
  --orbit-depth: .69;
  --orbit-line: #e2c39139;
  --orbit-speed: 38s;
  border-style: dashed;
}

.orbit-rotor {
  position: absolute;
  inset: -1px;
  animation: orbit-spin var(--orbit-speed) linear infinite var(--orbit-direction, normal);
}

.orbit-node {
  position: absolute;
  left: 50%;
  top: 0;
  width: clamp(7px, 1vw, 13px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 28%, #fff3da, var(--orbit-node, var(--gold)) 42%, #b09e80);
  box-shadow: 0 0 10px 2px var(--orbit-node, #e2c391a8);
  transform: translate(-50%, -50%);
}

.orbit-node:nth-child(2) { left: 0; top: 50%; width: clamp(5px, .8vw, 9px); }
.orbit-node:nth-child(3) { left: 93.3%; top: 75%; width: clamp(6px, .8vw, 10px); }
.orbit-cross .orbit-node { background: radial-gradient(circle at 36% 28%, #f2f4f7, #aeb7c6 58%, #657387); }
.orbit-trace .orbit-node { left: 100%; top: 50%; width: clamp(5px, .8vw, 9px); }

.field-orbit-field {
  inset: 0 -2%;
}

.field-orbit-plane {
  --orbit-width: 102%;
  --orbit-tilt: -18deg;
  --orbit-depth: .57;
  --orbit-line: #efce9752;
  --orbit-speed: 21s;
  --orbit-direction: reverse;
}

@keyframes orbit-spin {
  to { transform: rotate(360deg); }
}

.orbit-motion {
  position: absolute;
  z-index: 4;
  top: 2%;
  right: 1%;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  padding: 0;
  border: 1px solid #e2c39156;
  border-radius: 10px;
  background: #162236c9;
  color: var(--gold);
  cursor: pointer;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.orbit-motion[hidden] { display: none; }
.orbit-motion:hover { border-color: var(--gold); }
.orbit-motion span { width: 10px; height: 13px; border-inline: 3px solid currentColor; }

.orbit-motion[aria-pressed="true"] span {
  width: 0;
  height: 0;
  margin-left: 2px;
  border: 6px solid transparent;
  border-right: 0;
  border-left: 9px solid currentColor;
}

[data-background-motion="paused"] :is(.orbit-rotor, .stage-halo, .hero-phone) {
  animation-play-state: paused;
}

@media (max-width: 680px) {
  .orbit-field { inset: -2% -5%; }
  .orbit-motion { top: 0; right: 0; }
  .service-strip { margin-bottom: 12px; }
  .nav nav { background: #101a2aee; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
}

@media (prefers-reduced-motion: reduce) {
  .orbit-rotor { animation: none; }
  .orbit-motion { display: none; }
}

/* Layer artwork behind the existing product screens. */
.feature-depth {
  position: relative;
  isolation: isolate;
}

.section-depth {
  position: absolute;
  inset: 0 -28px;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  mask-image: linear-gradient(transparent, #000 12%, #000 87%, transparent);
  background:
    radial-gradient(ellipse at var(--depth-focus, 88%) 45%, var(--depth-light, #5069894f), transparent 68%),
    radial-gradient(ellipse at 14% 68%, #b28a4f19, transparent 56%);
}

.depth-pattern {
  position: absolute;
  inset: 7% -5% 4% 22%;
  background-image:
    linear-gradient(#9db5d22b 1px, transparent 1px),
    linear-gradient(90deg, #9db5d22b 1px, transparent 1px);
  background-size: 54px 54px;
  transform: perspective(660px) rotateX(18deg) rotateZ(-13deg);
  mask-image: radial-gradient(ellipse at 63% 49%, #000, transparent 71%);
}

.depth-trace {
  position: absolute;
  top: var(--trace-top, 21%);
  left: var(--trace-left, 12%);
  width: var(--trace-width, 76%);
  height: var(--trace-height, 29%);
  border: 1px solid var(--trace-colour, #b7c9e55c);
  border-right: 0;
  border-bottom: 0;
  border-radius: var(--trace-radius, 36px) 0 0;
  transform: rotate(var(--trace-tilt, -9deg));
}

.depth-trace::before,
.depth-trace::after {
  content: "";
  position: absolute;
  left: 34%;
  top: -4px;
  width: 7px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #dfcaad;
  box-shadow: 0 0 13px 2px #e2c39182;
}

.depth-trace::after {
  display: none;
  left: 9%;
  width: 5px;
  top: -3px;
}

.depth-trace + .depth-trace {
  --trace-top: 72%;
  --trace-left: 2%;
  --trace-width: 62%;
  --trace-tilt: -9deg;
  --trace-colour: #e2c39145;
  transform: rotate(var(--trace-tilt)) scale(-1);
}

.depth-verify {
  --depth-light: #b2895240;
  --trace-colour: #e2c39161;
  --trace-radius: 50%;
}

.depth-verify .depth-pattern {
  inset: 1% -10% 4% 24%;
  background: repeating-radial-gradient(circle at 54% 42%, transparent 0 45px, #e2c39133 46px, transparent 47px 77px);
  transform: none;
  mask-image: radial-gradient(ellipse at 71% 42%, #000, transparent 73%);
}

.depth-verify .depth-trace {
  --trace-left: 24%;
  --trace-top: 15%;
  --trace-width: 80%;
  --trace-height: 62%;
  --trace-tilt: -18deg;
}

.depth-verify .depth-trace + .depth-trace {
  --trace-left: 2%;
  --trace-top: 38%;
  --trace-width: 63%;
  --trace-height: 54%;
}

.depth-portals {
  --depth-focus: 14%;
  --depth-light: #526e9c58;
}

.depth-portals .depth-pattern {
  inset: 3% 25% 1% -16%;
  background-size: 40px 40px;
  transform: perspective(570px) rotateY(14deg) rotateZ(15deg);
  mask-image: radial-gradient(ellipse at 40% 43%, #000, transparent 71%);
}

.depth-portals .depth-trace {
  --trace-left: 0%;
  --trace-top: 22%;
  --trace-tilt: 11deg;
  --trace-radius: 16px;
}

.depth-portals .depth-trace + .depth-trace {
  --trace-left: 38%;
  --trace-top: 65%;
  --trace-width: 61%;
  --trace-tilt: 11deg;
}

.depth-field,
.depth-closing {
  inset-inline: 0;
}

.depth-field {
  --depth-focus: 19%;
  --depth-light: #5c75984f;
}

.depth-field .depth-pattern {
  inset: 2% 37% 2% -4%;
  background-size: 38px 38px;
  transform: rotate(-16deg);
  mask-image: radial-gradient(ellipse at 41% 52%, #000, transparent 68%);
}

.depth-field .depth-trace {
  --trace-left: -4%;
  --trace-top: 58%;
  --trace-width: 58%;
  --trace-height: 25%;
  --trace-tilt: -14deg;
}

.depth-integrations {
  --depth-focus: 53%;
  --depth-light: #56749a55;
  --trace-radius: 22px;
}

.depth-integrations .depth-pattern {
  inset: 11% 0 3%;
  background: radial-gradient(circle, #b8cbed58 1px, transparent 1.8px) 0 0 / 23px 23px;
  transform: none;
  mask-image: radial-gradient(ellipse, #000, transparent 74%);
}

.depth-integrations .depth-trace {
  --trace-left: 13%;
  --trace-top: 27%;
  --trace-width: 84%;
  --trace-height: 32%;
  --trace-tilt: 0deg;
}

.depth-integrations .depth-trace + .depth-trace {
  --trace-left: 3%;
  --trace-top: 54%;
}

.depth-closing {
  --depth-focus: 50%;
  --depth-light: #b08e5338;
}

.depth-closing .depth-pattern {
  inset: 0 -4%;
  background: repeating-radial-gradient(ellipse at 50% 88%, transparent 0 37px, #ead4b030 38px, transparent 39px 67px);
  transform: none;
  mask-image: radial-gradient(ellipse at 50% 75%, #000, transparent 77%);
}

@keyframes section-signal {
  0% { left: 10%; opacity: 0; }
  15%, 75% { opacity: .85; }
  100% { left: 94%; opacity: 0; }
}

.depth-platform .depth-trace::after,
.depth-integrations .depth-trace::after {
  display: block;
  animation: section-signal 11s linear infinite;
  animation-play-state: paused;
}

.section-depth.is-visible .depth-trace::after {
  animation-play-state: running;
}

[data-background-motion="paused"] .section-depth .depth-trace::after {
  animation-play-state: paused;
}

@media (max-width: 680px) {
  .section-depth { inset-inline: -12px; }
  .depth-field, .depth-closing { inset-inline: 0; }
  .depth-pattern { inset-inline: -18%; }
  .depth-trace { --trace-width: 93%; }
}

@media (prefers-reduced-motion: reduce) {
  .section-depth .depth-trace::after { display: none; animation: none; }
}

/* The service strip opens the report sample reader. */
.service-strip {
  padding: 6px;
  gap: 4px;
}

.service-strip .service-report-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  min-width: 0;
  min-height: 47px;
  padding: 7px clamp(8px, 1.35vw, 19px);
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text);
  font-size: clamp(10px, .92vw, 13px);
  text-align: left;
  text-decoration: none;
  transition: background-color .2s, border-color .2s;
}

.service-report-link:hover,
.service-report-link:focus-visible {
  background: #d4e3ff15;
  border-color: #e2c39165;
}

.service-report-icon {
  flex: 0 0 auto;
  color: var(--gold);
  font-size: 16px;
  line-height: 1;
}

.sample-report {
  width: min(1120px, calc(100% - 26px));
  height: min(930px, calc(100dvh - 24px));
  max-height: calc(100dvh - 24px);
  padding: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 80% 3%, #425b7b7a, transparent 57%),
    linear-gradient(148deg, #26374cd9, #101a2af5 61%);
}

.sample-report[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  animation: report-open .24s ease-out both;
}

@keyframes report-open {
  from { opacity: 0; transform: translateY(9px) scale(.985); }
}

.sample-report-header,
.sample-report-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 13px;
  padding: 13px clamp(12px, 2.5vw, 24px);
  background: #102035a8;
}

.sample-report-header {
  border-bottom: 1px solid #dce8ff33;
}

.sample-report-header h2 {
  margin-top: 3px;
  font-size: clamp(20px, 3.3vw, 36px);
  letter-spacing: -.04em;
}

.sample-report-note {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.sample-report-header .close-dialog {
  width: 44px;
  height: 44px;
  margin: 0;
}

.sample-report.has-evidence[open] {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.sample-report-evidence {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 9px clamp(12px, 2.5vw, 24px);
  background: #102035a8;
  border-bottom: 1px solid #dce8ff29;
}

.sample-report-evidence[hidden] { display: none; }

.sample-report-evidence button {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 6px 10px 6px 6px;
  border: 1px solid #dce8ff36;
  border-radius: 9px;
  background: #90a9d317;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.sample-report-evidence button:hover,
.sample-report-evidence button[aria-current="page"] {
  background: #e2c39124;
  border-color: #e2c39194;
}

.sample-report-evidence button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.sample-report-evidence img {
  display: block;
  width: clamp(100px, 15vw, 176px);
  max-width: 45%;
  height: auto;
  aspect-ratio: 3;
  object-fit: cover;
  border-radius: 5px;
}

.sample-report-evidence strong,
.sample-report-evidence small { display: block; }

.sample-report-evidence strong {
  font-size: 13px;
  line-height: 1.25;
}

.sample-report-evidence small {
  margin-top: 3px;
  font-size: 10px;
  color: var(--muted);
}

@media (max-width: 680px) {
  .sample-report-evidence {
    gap: 7px;
    padding: 6px;
  }

  .sample-report-evidence button {
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
    padding: 5px;
  }

  .sample-report-evidence img {
    width: 100%;
    max-width: none;
  }

  .sample-report-evidence strong { font-size: 12px; }
  .sample-report-evidence small { margin-top: 1px; }
}

.sample-report-body {
  display: grid;
  grid-template-columns: minmax(174px, 218px) minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
}

.sample-report-pages {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 0;
  overflow: auto;
  padding: 12px 9px;
  background: #101a29b8;
  border-right: 1px solid #dce8ff29;
}

.sample-report-pages button {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 6px 7px;
  border: 1px solid #dce8ff26;
  border-radius: 8px;
  background: #90a9d30a;
  color: var(--text);
  font: inherit;
  font-size: 11px;
  line-height: 1.35;
  text-align: start;
  cursor: pointer;
}

.sample-report-pages button[aria-current="page"] {
  border-color: #e2c39194;
  background: linear-gradient(135deg, #e2c39124, #839cb914);
  box-shadow: inset 0 1px #ffffff18;
}

.sample-report-pages button:hover {
  background-color: #90a9d32c;
}

.sample-report-pages small {
  display: block;
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 9px;
}

.sample-report-pages img {
  flex: 0 0 auto;
  width: 35px;
  max-height: 49px;
  margin: 0;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 3px 7px #02060a60;
}

.sample-report-stage {
  display: grid;
  place-items: start center;
  min-height: 0;
  overflow: auto;
  padding: clamp(9px, 2vw, 21px);
  background:
    radial-gradient(ellipse at 50% 15%, #c1d5ff20, transparent 70%),
    #0e1829ab;
  overscroll-behavior: contain;
}

.sample-report-stage img {
  max-width: 100%;
  max-height: min(730px, calc(100dvh - 210px));
  width: auto;
  margin: 0;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 10px 32px #0007;
}

.sample-report-stage.is-zoomed {
  display: block;
}

.sample-report-stage.is-zoomed img {
  width: min(980px, 150vw);
  max-width: none;
  max-height: none;
}

.sample-report-controls {
  padding-block: 8px;
  border-top: 1px solid #dce8ff33;
}

.sample-report-pagination,
.sample-report-tools {
  display: flex;
  align-items: center;
  gap: 7px;
}

.sample-report-controls :is(button, a) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 40px;
  padding: 4px 10px;
  border: 1px solid #c8d9f446;
  border-radius: 8px;
  background: #d4e3ff0e;
  color: var(--text);
  font: inherit;
  font-size: 11px;
  line-height: 1.15;
  text-decoration: none;
  cursor: pointer;
}

.sample-report-controls :is(button:not(:disabled), a):hover,
.sample-report-controls [aria-pressed="true"] {
  border-color: var(--gold);
}

.sample-report-controls button:disabled {
  opacity: .45;
  cursor: default;
}

.sample-report-pagination span {
  min-width: 4.2ch;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}

#sample-report-pdf {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--deep);
  font-weight: 700;
}

@media (max-width: 680px) {
  .service-strip .service-report-link {
    min-height: 42px;
    background: #89a6c813;
    border-color: #89a6c82e;
  }
  .sample-report {
    width: calc(100% - 12px);
    height: calc(100dvh - 12px);
    max-height: calc(100dvh - 12px);
    border-radius: 12px;
  }
  .sample-report-header { padding-block: 8px; }
  .sample-report-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }
  .sample-report-pages {
    flex-direction: row;
    padding: 5px;
    border-right: 0;
    border-bottom: 1px solid #dce8ff29;
    scrollbar-width: thin;
  }
  .sample-report-pages button { padding: 6px 8px; white-space: nowrap; }
  .sample-report-pages img { display: none; }
  .sample-report-pages small { margin-bottom: 0; }
  .sample-report-stage img { max-height: none; }
  .sample-report-controls { flex-wrap: wrap; justify-content: center; gap: 6px; }
  .sample-report-controls :is(button, a) { min-height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  .sample-report[open] { animation: none; }
}

/* Keep the Ask IPS launcher available throughout the product showcase. */
.ask-ips-launch {
  position: fixed;
  z-index: 80;
  inset-inline-end: clamp(12px, 2.4vw, 26px);
  inset-block-end: max(14px, env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 5px 13px 5px 6px;
  border: 1px solid #e2c39180;
  border-radius: 13px;
  color: var(--text);
  background: linear-gradient(140deg, #2e425be8, #111c2df5 72%);
  box-shadow: inset 0 1px #ffffff22, 0 12px 30px #02060c88;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.ask-ips-launch:hover,
.ask-ips-launch:focus-visible {
  background: #2e4159;
  border-color: var(--gold);
}

.ask-ips-mark {
  display: grid;
  flex: 0 0 34px;
  height: 34px;
  place-items: center;
  border: 1px solid #c5d7f147;
  border-radius: 8px;
  background: #17263c;
}

.ask-ips-mark img { object-fit: contain; }

.sample-report-sheet {
  position: relative;
  display: grid;
  width: fit-content;
  max-width: 100%;
}
.sample-report-stage.is-zoomed .sample-report-sheet { max-width: none; }
#sample-room-page-watch {
  position: absolute;
  left: 70.76%;
  width: 23.53%;
  height: max(28px, 2.38%);
  transform: translateY(-50%);
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  cursor: pointer;
}
#sample-room-page-watch:hover,
#sample-room-page-watch:focus-visible { outline: 2px solid #876238; }
.sample-report [hidden],
.whitelocke-dialog [hidden] { display: none !important; }

.report-evidence-page,
.sample-room-gallery {
  width: min(100%, 700px);
  min-width: 0;
  padding: clamp(14px, 3vw, 30px);
  border-radius: 12px;
}

.report-evidence-page {
  color: #172437;
  background: #fbfaf7;
  box-shadow: 0 14px 35px #060d1966;
}

.report-evidence-page h3,
.sample-room-gallery h3 {
  margin: 0;
  font-size: clamp(20px, 3vw, 31px);
  letter-spacing: -.035em;
  line-height: 1.15;
}

.evidence-intro { margin: 7px 0 19px; color: #4b5869; font-size: 13px; }
.report-evidence-card {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(12px, 2vw, 24px);
  padding: clamp(12px, 2vw, 20px);
  margin-top: 12px;
  border: 1px solid #d9e1eb;
  border-radius: 12px;
  background: #f0f4f8;
}

.report-evidence-card.detector { background: #f6f1e3; border-color: #e7ddc5; }
.evidence-card-heading { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.report-evidence-card .evidence-card-heading img { width: 40px; height: 40px; background: transparent; box-shadow: none; }
.evidence-record-id { margin: 0 0 2px; color: #525f71; font-size: 10px; font-weight: 700; }
.evidence-card-heading h4 { margin: 0; font-size: clamp(15px, 2vw, 19px); line-height: 1.15; }
.evidence-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; margin: 0; }
.evidence-fields dt { color: #4b5869; font-size: 10px; font-weight: 700; line-height: 1.25; }
.evidence-fields dd { margin: 2px 0 0; font-size: 12px; font-weight: 600; line-height: 1.35; }
.evidence-register dd { color: #1d3d5a; font-size: clamp(11px, 1.6vw, 17px); font-variant-numeric: tabular-nums; white-space: nowrap; }
.evidence-status { display: inline-block; margin: 0 0 10px; padding: 4px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; line-height: 1.2; }
.evidence-status.green { color: #185b39; background: #dbeee0; }
.evidence-status.amber { color: #684914; background: #f7e9bf; }
.evidence-status.red { color: #842c2d; background: #f6dcda; }
.report-evidence-card figure { min-width: 0; margin: 0; }
.sample-report-stage .report-evidence-card figure img { display: block; width: 100%; height: auto; box-shadow: none; object-fit: contain; border-radius: 7px; }
.report-evidence-card figcaption { margin: 5px 0 0; color: #526070; font-size: 10px; text-align: start; }
.sample-room-gallery {
  width: min(100%, 820px);
  border: 1px solid #dce8ff34;
  background: linear-gradient(145deg, #243750, #152237 65%);
}
.sample-room-gallery-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.sample-room-gallery .eyebrow { margin: 0 0 5px; }
.sample-room-gallery-note { margin: 8px 0 16px; color: var(--muted); font-size: 12px; }
.sample-room-gallery-header button {
  min-height: 40px;
  padding: 7px 10px;
  border: 1px solid #dce8ff46;
  border-radius: 8px;
  background: #d4e3ff12;
  color: var(--text);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.sample-room-gallery-header button:hover { border-color: var(--gold); }
.sample-room-gallery-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.sample-room-gallery-nav button {
  min-height: 38px;
  padding: 5px 9px;
  border: 1px solid #dce8ff46;
  border-radius: 7px;
  background: #0b172a66;
  color: var(--text);
  font-size: 11px;
  cursor: pointer;
}
.sample-room-gallery-nav button:hover,
.sample-room-gallery-nav button[aria-current="page"] {
  border-color: var(--gold);
  color: var(--gold);
}
.sample-room-walkthrough {
  margin: 0 0 22px;
  padding: clamp(12px, 2vw, 18px);
  border: 1px solid #d4b78160;
  border-radius: 12px;
  background: linear-gradient(135deg, #d4b78113, #101c2f 65%);
}
.sample-room-walkthrough-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 18px;
  flex-wrap: wrap;
}
.sample-room-walkthrough h4,
.sample-room-photo-heading { margin: 0; font-size: clamp(15px, 2vw, 19px); }
.sample-room-walkthrough p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.sample-room-play,
.sample-report-tools #sample-room-watch {
  min-height: 40px;
  padding: 7px 11px;
  border: 1px solid var(--gold);
  border-radius: 8px;
  background: var(--gold);
  color: #142239;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.sample-room-play:hover,
.sample-report-tools #sample-room-watch:hover { background: #f6dfac; }
.sample-room-walkthrough video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 58dvh;
  margin-top: 13px;
  border-radius: 8px;
  background: #080d15;
}
.sample-room-walkthrough .sample-room-video-error { margin-top: 12px; }
.sample-room-video-error a { color: var(--gold); }
.sample-room-photo-heading { margin-bottom: 10px; }
.sample-room-photo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(8px, 1.7vw, 16px);
}
.sample-room-photo {
  min-width: 0;
  margin: 0;
  padding: 5px;
  border: 1px solid #dce8ff29;
  border-radius: 10px;
  background: #101c2f;
}
.sample-room-photo .screenshot-button { box-shadow: none; border: 0; border-radius: 6px; }
.sample-room-photo .screenshot-button > img {
  display: block;
  width: 100%;
  max-height: none;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  box-shadow: none;
}
.sample-room-photo.room-overview .screenshot-button > img { object-fit: contain; background: #0b111c; }
.sample-room-photo:first-child.room-overview { grid-column: 1 / -1; }
.sample-room-photo:first-child.room-overview .screenshot-button > img { aspect-ratio: 16 / 8; }
.sample-room-photo .screenshot-button > span { width: 28px; height: 28px; }
.sample-room-photo figcaption { margin: 6px 3px 3px; color: #e5e9ef; font-size: 11px; text-align: start; }
@media (max-width: 430px) {
  .sample-room-gallery { padding: 12px; }
  .sample-room-photo-grid { grid-template-columns: 1fr; }
}

.connector-brand.arthur {
  width: fit-content;
  padding: 6px 10px;
  border-radius: 6px;
  background: #f9fbff;
}
.connector-brand.arthur img {
  display: block;
  width: 108px;
  height: auto;
}

.whitelocke-feature {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(20px, 4vw, 64px);
  margin-top: 28px;
  padding: clamp(20px, 4vw, 52px);
  border: 1px solid #cbd9f144;
  border-radius: 19px;
  background: radial-gradient(ellipse at 82% 46%, #3a4e6e 0, #17263b 50%, #111b2c 100%);
}
.whitelocke-copy h3 { font-size: clamp(29px, 4.3vw, 55px); letter-spacing: -.065em; line-height: 1.04; margin: 8px 0 13px; }
.whitelocke-copy h3 em { color: var(--gold); font-style: normal; }
.whitelocke-copy p:not(.eyebrow) { max-width: 40ch; margin: 0 0 22px; color: var(--muted); }
.whitelocke-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.whitelocke-actions .button { min-height: 45px; padding-inline: 12px; font-size: 12px; }
.whitelocke-actions small { color: var(--muted); font-size: 10px; font-weight: 500; }
.whitelocke-preview {
  position: relative;
  min-width: 0;
  min-height: 250px;
  isolation: isolate;
}
.whitelocke-glow {
  position: absolute;
  inset: 2% 3%;
  z-index: -1;
  border: 1px solid #d9e6ff26;
  border-radius: 20px;
  background: repeating-linear-gradient(90deg, #d9e6ff0a 0 1px, transparent 1px 33px),
    repeating-linear-gradient(0deg, #d9e6ff0a 0 1px, transparent 1px 33px),
    radial-gradient(ellipse at 57% 48%, #96b8f231, #121d2b77 74%);
  mask-image: radial-gradient(ellipse at 55% 48%, #000 20%, transparent 77%);
}
.whitelocke-preview-email,
.whitelocke-preview-message {
  position: absolute;
  display: grid;
  box-shadow: 0 19px 42px #050a14a6;
}
.whitelocke-preview-email {
  inset: 11% 2% auto auto;
  width: min(81%, 345px);
  overflow: hidden;
  border: 1px solid #faf1df88;
  border-radius: 12px;
  background: #f4edde;
  color: #1d2a3b;
  transform: rotate(5deg);
}
.whitelocke-preview-email > div { display: flex; align-items: center; gap: 7px; padding: 10px 13px; background: #25364d; color: #fcf8ec; font-size: 11px; font-weight: 700; }
.whitelocke-preview-email > span { margin: 14px 14px 3px; font-size: clamp(13px, 2vw, 20px); font-weight: 750; }
.whitelocke-preview-email > strong { margin: 0 14px 15px; color: #46526a; font-size: 11px; }
.whitelocke-preview-message {
  inset: auto auto 8% 2%;
  width: min(80%, 320px);
  padding: 13px 15px;
  border: 1px solid #cbd9f15c;
  border-radius: 12px;
  background: linear-gradient(140deg, #405674, #1c2b41 75%);
  transform: rotate(-5deg);
}
.whitelocke-preview-message > span { display: flex; align-items: center; gap: 7px; color: var(--gold); font-size: 11px; font-weight: 700; }
.whitelocke-preview-message > strong { display: block; margin: 8px 0 10px; font-size: clamp(14px, 2vw, 22px); }
.whitelocke-preview-dates { display: flex; flex-wrap: wrap; gap: 5px; }
.whitelocke-preview-dates span { padding: 4px 7px; border: 1px solid #dbe7fa50; border-radius: 5px; color: #f2f5fc; font-size: 10px; }

.whitelocke-dialog {
  width: min(1040px, calc(100% - 24px));
  max-height: calc(100dvh - 24px);
  padding: 0;
  overflow: auto;
  border-radius: 18px;
  color: var(--text);
  background: linear-gradient(145deg, #22344d, #111c2d 56%, #19283c);
}
.whitelocke-dialog h2 { margin: 4px 0 0; font-size: clamp(20px, 4vw, 32px); }
.whitelocke-modes {
  display: flex;
  gap: 6px;
  padding: 8px clamp(10px, 2.4vw, 24px);
  border-bottom: 1px solid #dce8ff29;
  background: #14213670;
}
.whitelocke-modes button {
  min-height: 40px;
  padding: 7px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.whitelocke-modes button[aria-pressed="true"] { border-color: #e2c39165; background: #e2c39117; color: var(--gold); }
.whitelocke-demo { padding: clamp(12px, 3vw, 30px); }
.booking-progress {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 clamp(14px, 3vw, 27px);
  padding: 0;
  list-style: none;
}
.booking-progress li {
  padding-top: 7px;
  border-top: 3px solid #b1c5e342;
  color: var(--muted);
  font-size: clamp(9px, 1.5vw, 12px);
  font-weight: 700;
  line-height: 1.25;
}
.booking-progress li.is-complete { border-color: #d9bd8a7f; }
.booking-progress li[aria-current="step"] { border-color: var(--gold); color: var(--gold); }
.booking-scene {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(13px, 3vw, 36px);
  animation: booking-arrive 240ms ease-out both;
}
@keyframes booking-arrive {
  from { opacity: .35; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.booking-scene-heading .eyebrow { margin: 0 0 5px; }
.booking-scene-heading h3 { margin: 0; font-size: clamp(22px, 3.7vw, 40px); line-height: 1.08; letter-spacing: -.04em; }
.booking-scene-heading > p:not(.eyebrow) { max-width: 33ch; margin: 8px 0 12px; color: var(--muted); font-size: 13px; }
.booking-card, .booking-email { overflow: hidden; border: 1px solid #ccdcf54d; border-radius: 13px; box-shadow: 0 12px 32px #050b164e; }
.booking-card { padding: clamp(12px, 2.2vw, 22px); background: #273b54; }
.booking-card > p { margin: 9px 0 13px; font-size: 14px; line-height: 1.5; }
.booking-fields { display: grid; gap: 5px; margin: 0 0 12px; }
.booking-fields > div { padding: 6px 9px; border-radius: 5px; background: #0b172b51; }
.booking-fields dt { color: #c1cde1; font-size: 10px; }
.booking-fields dd { margin: 0; color: #f8f6ee; font-size: 13px; font-weight: 700; }
.booking-card .button { min-height: 43px; padding-inline: 11px; font-size: 12px; }
.booking-assistant { display: flex; align-items: center; gap: 7px; color: var(--gold); font-size: 13px; font-weight: 700; }
.booking-assistant img, .booking-email-brand img { flex: none; margin: 0; border-radius: 0; }
.booking-assistant img { width: 26px; }
.booking-email-brand img { width: 34px; }
.booking-date-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-bottom: 11px; }
.booking-date-options button {
  display: grid;
  gap: 2px;
  min-height: 48px;
  padding: 6px 8px;
  border: 1px solid #d3e0f554;
  border-radius: 7px;
  background: #d7e6ff15;
  color: var(--text);
  font: inherit;
  font-size: 11px;
  line-height: 1.25;
  text-align: start;
  cursor: pointer;
}
.booking-date-options button:hover { border-color: var(--gold); }
.booking-date-options small { color: #d6e0f2; font-size: 10px; }
.booking-card .booking-status { display: inline-block; margin: 0 0 11px; padding: 4px 7px; border-radius: 5px; background: #f0c47d24; color: #ffe0a9; font-size: 11px; font-weight: 700; }
.booking-card .booking-status.approved { margin-top: 9px; background: #8edfbb26; color: #c4f6de; }
.booking-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.booking-card-actions .text-link,
.booking-scene-heading .text-link { min-height: 42px; padding: 5px 0; border: 0; background: transparent; font-size: 12px; text-align: start; cursor: pointer; }
.booking-email { background: #fcf9f0; color: #142238; }
.booking-email-brand { display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: #24354c; color: #fffaf0; font-size: 13px; line-height: 1.3; }
.booking-email-brand small { display: block; color: #d5ddee; font-size: 10px; }
.booking-email-body { padding: clamp(12px, 2.3vw, 22px); }
.booking-email-body > p { margin: 0 0 12px; font-size: 13px; }
.booking-email-date { display: grid; padding: 9px 12px; border: 1px solid #dfd2b9; border-radius: 8px; background: #f0e7d5; }
.booking-email-date time { font-size: 13px; font-weight: 750; }
.booking-email-date strong { margin: 1px 0; font-size: clamp(20px, 3.2vw, 31px); letter-spacing: -.045em; line-height: 1.1; }
.booking-email-date span { color: #3f4b5c; font-size: 11px; }
.booking-email-body .booking-email-service { margin: 10px 0 0; color: #4f5c6b; font-size: 10px; }
.whitelocke-film { padding: clamp(8px, 2vw, 20px); }
.whitelocke-film video { display: block; width: 100%; height: auto; max-height: 69dvh; border-radius: 8px; background: #101a29; }
.whitelocke-film > .text-link { display: inline-block; margin-top: 10px; }
.whitelocke-transcript { margin: 12px 0 0; color: var(--muted); }
.whitelocke-transcript summary { cursor: pointer; font-size: 13px; color: var(--text); }
.whitelocke-transcript ol { padding-left: 22px; font-size: 13px; }
.whitelocke-transcript li + li { margin-top: 5px; }

@media (max-width: 680px) {
  .whitelocke-feature { grid-template-columns: minmax(0, 1fr); }
  .whitelocke-preview { min-height: 175px; }
  .whitelocke-preview-email { inset-block-start: 3%; }
  .whitelocke-preview-message { inset-block-end: 3%; }
  .booking-scene { grid-template-columns: minmax(0, 1fr); }
  .booking-scene-heading > p:not(.eyebrow) { margin-bottom: 0; }
  .connector-brand.arthur img { width: 91px; }
  .report-evidence-card { grid-template-columns: minmax(0, 1fr); }
  .sample-report-stage .report-evidence-card figure img { max-width: 275px; }
}

@media (prefers-reduced-motion: reduce) {
  .booking-scene { animation: none; }
}