/* mosaicintel.ai — shared stylesheet for every page.
   Sections: tokens · ground · header wall · industry panels · proof tiles · demo cards ·
   gate · phone pass · then the multi-page shell (nav, page header, panels, forms, footer). */
:root{
  /* neutral charcoal, not blue slate — the old #333947 fought the gold */
  --bg:#15151B; --surface:#36373A; --surface-2:#1C1B22;
  --line:rgba(255,255,255,.11); --line-strong:rgba(255,255,255,.22);
  --text:#F5F4F7; --muted:#BEBFBD; --muted-2:#949491;
  --gold:#7A55F0; --gold-bright:#9B7BFF; --charcoal:#1C1B22; --taupe:#8A8172;
  /* one accent only. clay is kept for error states, where colour carries meaning */
  --clay:#C8785A;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --display:'Oswald','Inter',sans-serif;
  --maxw:1120px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text); position:relative;
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* the ground: near black with a soft violet light at the top left, like Mosaic CoS */
body::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1200px;pointer-events:none;z-index:0;
  background:radial-gradient(760px 440px at 16% 0,rgba(123,77,255,.17),transparent 70%),
             radial-gradient(620px 380px at 88% 280px,rgba(182,156,255,.06),transparent 70%)}
main,footer{position:relative;z-index:1}
a{color:inherit;text-decoration:none}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 28px}

/* ---------- hero: the page's opening band, no texture ---------- */
.hero{position:relative;padding:60px 0 34px}
.hero .wrap{position:relative;z-index:3}
.logo-h1{margin:0}

/* ---------- industry panels: stone tiles, sharp edges, one accent ---------- */
.industries{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:0 auto}
/* text on the left, the industry's emblem on the right, the outcome course below */
.ind{
  position:relative;overflow:hidden;container-type:inline-size;
  display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr auto;column-gap:20px;
  background:linear-gradient(180deg,var(--surface),var(--surface-2));
  border:1px solid var(--line);border-radius:3px;--pad:30px;padding:28px var(--pad) 0;
  transition:border-color .25s,transform .38s cubic-bezier(.2,.8,.25,1),box-shadow .38s ease
}
/* a lit edge along the top, like the header's gold rule */
.ind::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-bright),transparent);
  opacity:.45;transition:opacity .25s
}
.ind:hover{border-color:rgba(155,123,255,.34);box-shadow:0 30px 44px -14px rgba(0,0,0,.6)}
/* the fold: top edge stays pinned, the bottom lifts toward you like a business card picked up
   off a table. the shadow falls below the lifted edge only */
.ind,a.card{transform-origin:50% 0;transform:perspective(1100px) rotateX(0deg)}
.ind:hover,a.card:hover{transform:perspective(1100px) rotateX(5.5deg)}
.ind:hover::before{opacity:1}
.ind-head{grid-row:1;grid-column:1/-1;display:flex;align-items:center;gap:13px;margin-bottom:20px}
/* the same four tesserae as the header mark */
.tess{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;width:20px;height:20px;flex:0 0 auto}
.tess i{border-radius:1px;background:var(--gold-bright)}
.tess i:nth-child(1){opacity:.34}.tess i:nth-child(2){opacity:.95}
.tess i:nth-child(3){opacity:.62}.tess i:nth-child(4){opacity:.44}
/* the emblem carries the identity now, so the four-tile mark steps aside: the heading
   sits on a short gold rule, the same stroke as the bars beside the section titles */
.ind .tess{display:none}
.ind h3{position:relative;padding-bottom:13px}
.ind h3::after{content:"";position:absolute;left:0;bottom:0;width:72px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold-bright),#5B3FC8)}
.ind h3{
  font-family:var(--display);font-weight:600;font-size:1.16rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text);margin:0;line-height:1.3
}
.ind ul{grid-area:2/1;list-style:none;margin:0;padding:0}
.ind li{
  position:relative;padding-left:23px;margin-bottom:12px;
  font-size:16px;color:#CFCBD8;line-height:1.5;text-wrap:balance
}
/* tesserae as bullets */
.ind li::before{
  content:"";position:absolute;left:0;top:8px;width:9px;height:9px;border-radius:1px;
  background:linear-gradient(135deg,#C2ADFF,#5B3FC8)
}
/* Oswald's multiplication sign is tiny next to its capitals */
.ind-foot .times{font-family:var(--sans);font-size:1.3em;font-weight:600;line-height:0;margin:0 .04em 0 .06em;position:relative;top:.06em}
.ind-foot{
  grid-row:3;grid-column:1/-1;
  margin:18px calc(var(--pad)*-1) 0;padding:15px var(--pad);
  font-family:var(--display);font-weight:500;font-size:clamp(13px,3.45cqi,16px);letter-spacing:.04em;
  text-transform:uppercase;color:var(--gold-bright);
  background:rgba(155,123,255,.07);border-top:1px solid rgba(155,123,255,.18)
}
/* narrow panels: the emblem shrinks to a mark beside the heading */
@container (max-width:350px){
  .emblem{--s:52px;grid-row:1;align-self:center;margin-bottom:14px}
  .ind-head{grid-column:1}
  .ind ul{grid-column:1/-1}
}
@media (max-width:900px){
  .industries{grid-template-columns:1fr;max-width:560px}
}
.demos-title{
  font-family:var(--display);font-weight:600;font-size:1.5rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text);margin:0 0 34px;
  display:flex;align-items:center;justify-content:center;gap:16px;text-align:center
}
.demos-title::before,
.demos-title::after{content:"";width:52px;flex:0 0 52px;height:3px;border-radius:2px;background:var(--gold-bright)}
/* the page's one statement, now that the logo stands alone */
.demos-title.lead{font-size:clamp(1.5rem,2.7vw,2.05rem);letter-spacing:.055em;line-height:1.25;text-wrap:balance}
/* ---------- proof row: four equal stone tiles, the same make as the cards below ---------- */
.proof-band{position:relative;margin:0 0 30px}
.props{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.prop{
  position:relative;display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:78px;padding:16px 16px;overflow:hidden;
  background:#121217;
  background-image:
    repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,transparent 1px 21px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 21px);
  border:1px solid rgba(155,123,255,.26);border-radius:3px
}
/* lit edge, like the cards */
.prop::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-bright),transparent);opacity:.75
}
.prop b{
  display:block;font-family:var(--display);font-weight:600;
  font-size:clamp(1rem,1.5vw,1.2rem);letter-spacing:.04em;line-height:1.3;text-wrap:balance;
  text-transform:uppercase;color:var(--gold-bright)
}
.prop .tt{text-transform:none}
@media (max-width:940px){
  .props{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:500px){
  .props{gap:10px}
  .prop{min-height:64px;padding:12px 10px}
}
.demos-sub{
  text-align:center;font-size:clamp(1.08rem,2.2vw,1.35rem);
  color:#CFCFCC;letter-spacing:.01em;margin:0 0 34px
}
/* ---------- section ---------- */
section{padding:32px 0 38px}

/* ---------- demo cards: doorways cut from the header's wall ---------- */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:0 auto}
.grid .card:last-child:nth-child(odd){grid-column:1/-1}
.card{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  container-type:inline-size;
  background:linear-gradient(180deg,var(--surface),var(--surface-2));
  border:1px solid rgba(155,123,255,.3);border-radius:3px;
  padding:22px 26px 0;min-height:120px;
  box-shadow:0 10px 26px rgba(0,0,0,.3);
  transition:border-color .25s,transform .38s cubic-bezier(.2,.8,.25,1),box-shadow .38s ease
}
/* the same lit edge as the industry panels, turned up — these are the doors */
.card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;z-index:2;
  background:linear-gradient(90deg,transparent,var(--gold-bright),transparent);
  opacity:.8;transition:opacity .25s
}
a.card:hover{border-color:rgba(155,123,255,.62);box-shadow:0 32px 46px -14px rgba(0,0,0,.65)}
a.card:hover::before{opacity:1}
.card > *{position:relative;z-index:1}

/* a corner of the header's wall: 18px tesserae on the 21px grid, a few gilded.
   on hover the gilding spreads outward from the corner — radial, nothing turns */
.card .mosaic{
  position:absolute;top:0;right:0;width:194px;height:110px;z-index:0;pointer-events:none;
  /* shallow ellipse: the field stays up beside the title and is gone before the blurb */
  -webkit-mask-image:radial-gradient(ellipse 100% 88% at 100% 0,#000 0,rgba(0,0,0,.5) 40%,transparent 100%);
  mask-image:radial-gradient(ellipse 100% 88% at 100% 0,#000 0,rgba(0,0,0,.5) 40%,transparent 100%)
}
.mosaic i{
  position:absolute;width:18px;height:18px;border-radius:1.5px;
  background:#fff;opacity:.055;
  transition:opacity .3s ease,background .3s ease
}
.mosaic i.gilt{background:var(--g);opacity:.45;animation:tess 6s ease-in-out infinite}
a.card:hover .mosaic i:not(.gilt){
  background:var(--g);opacity:.5;
  transition:opacity .42s ease var(--d),background .42s ease var(--d)
}

.chip{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin-bottom:11px;
  font-family:var(--display);font-weight:500;font-size:11.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gold-bright)
}
/* a live tessera, not a status dot */
.chip .pulse{
  width:7px;height:7px;border-radius:1px;
  background:linear-gradient(135deg,#C2ADFF,#7A55F0);
  animation:pulse 2.4s ease-in-out infinite
}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(155,123,255,.5)}50%{opacity:.62;box-shadow:0 0 0 5px rgba(155,123,255,0)}}
.card h3{
  font-family:var(--display);font-weight:600;font-size:1.14rem;letter-spacing:.05em;
  text-transform:uppercase;line-height:1.3;text-wrap:balance;color:var(--text);margin:0 0 9px
}
.card p{margin:0 0 20px;color:var(--muted);font-size:14.4px;line-height:1.6}

/* the foot: same gold-washed course as the industry panels, ending in the way in */
.card-foot{
  margin:auto -26px 0;display:flex;align-items:stretch;justify-content:space-between;
  background:rgba(155,123,255,.07);border-top:1px solid rgba(155,123,255,.18)
}
.tags{
  display:flex;flex-wrap:wrap;align-items:center;gap:3px 0;min-width:0;padding:12px 14px 12px 26px;
  font-family:var(--display);font-weight:500;font-size:12px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted)
}
.tag{display:inline-flex;align-items:center;white-space:nowrap}
/* tesserae between the tags */
.tag:not(:last-child)::after{
  content:"";width:5px;height:5px;border-radius:1px;margin:0 10px;
  background:linear-gradient(135deg,#C2ADFF,#5B3FC8)
}
.open{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:0 0 auto;
  padding:12px 22px;white-space:nowrap;
  font-family:var(--display);font-weight:600;font-size:12.8px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--gold-bright);
  border-left:1px solid rgba(155,123,255,.18);
  transition:background .25s,color .25s
}
.open svg{width:14px;height:14px}
a.card:hover .open{background:var(--gold-bright);color:#08080A}
@container (max-width:400px){
  .card-foot{flex-direction:column}
  .tags{padding:11px 26px}
  .open{border-left:none;border-top:1px solid rgba(155,123,255,.18)}
}
@media (max-width:900px){
  .grid{grid-template-columns:1fr;max-width:560px}
}

#gate{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
  background:rgba(14,14,15,.74);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:24px}
#gate[hidden]{display:none!important}
.gate-box{position:relative;width:100%;max-width:380px;background:linear-gradient(180deg,var(--surface),var(--surface-2));
  border:1px solid rgba(155,123,255,.4);border-radius:4px;padding:30px 28px 26px;
  box-shadow:0 24px 60px rgba(0,0,0,.55)}
.gate-box::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-bright),transparent)}
#gate-x{position:absolute;top:10px;right:14px;background:none;border:none;color:var(--muted-2);
  font-size:24px;line-height:1;cursor:pointer}
#gate-x:hover{color:var(--text)}
.gate-eyebrow{font-family:var(--display);font-weight:500;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--gold-bright);margin-bottom:8px}
.gate-box h3{font-family:var(--display);font-weight:600;font-size:1.14rem;letter-spacing:.05em;text-transform:uppercase;line-height:1.3;text-wrap:balance;margin:0 0 18px;color:var(--text)}
#gate-input{width:100%;padding:12px 14px;font-size:16px;letter-spacing:.22em;text-align:center;
  color:var(--text);background:rgba(0,0,0,.28);border:1px solid var(--line);border-radius:3px;outline:none}
#gate-input:focus{border-color:rgba(155,123,255,.65)}
#gate-go{width:100%;margin-top:12px;padding:12px;border:none;border-radius:3px;cursor:pointer;
  font-family:var(--display);font-weight:600;font-size:.95rem;letter-spacing:.07em;text-transform:uppercase;
  color:#08080A;background:var(--gold-bright)}
#gate-go:hover{background:#B69CFF}
#gate-err{min-height:18px;margin:11px 0 0;font-size:13px;text-align:center;color:var(--clay);line-height:1.4}
@media (max-width:640px){
  /* phones: keep the lockup inside the screen, one-line section titles, tighter cards */
  .logo-h1 img{width:min(560px,78vw)}
  .demos-title{font-size:1.22rem;gap:12px;letter-spacing:.05em}
  .demos-title.lead{font-size:1.3rem}
  /* no room for the bars beside a two-line statement on a phone */
  .demos-title.lead::before,.demos-title.lead::after{display:none}
  .demos-title::before,.demos-title::after{width:26px;flex:0 0 26px}
  .demos-sub{font-size:1.02rem}
  .prop b{font-size:1rem}
  .ind{--pad:20px;padding-top:22px}
  .ind-head{gap:11px;margin-bottom:16px}
  .ind{column-gap:12px}
  .ind h3{font-size:1.04rem;text-wrap:balance}
  .ind-foot{text-wrap:balance}
  .ind li{font-size:15.4px;padding-left:21px;margin-bottom:11px}
  .card{padding:20px 20px 0}
  .card-foot{margin-left:-20px;margin-right:-20px}
  .tags{padding-left:20px;padding-right:20px}
  .wrap{padding:0 20px}
  .hero{padding:32px 0 16px}
  .card .mosaic{width:131px;height:68px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* =====================================================================================
   MULTI-PAGE SHELL — everything below is shared by Home and the inner pages.
   Same make as the cards above: charcoal stone, one gold accent, 2-4px corners,
   Oswald for anything that labels, Inter for anything that explains.
   ===================================================================================== */
html{scroll-padding-top:18px}
:focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px}
.skip{position:absolute;left:12px;top:-60px;z-index:200;padding:10px 16px;border-radius:3px;
  font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  color:#08080A;background:var(--gold-bright)}
.skip:focus{top:10px}

/* ---------- nav: one quiet plaque in the corner of the header wall. it is a larger tessera on the
   wall's own grid (39px = 2 tiles and the gap). it opens a short stack of the same plaques.
   findable, never the focus. no bar, nothing covers the wall ---------- */
.nav{position:absolute;top:0;left:0;right:0;z-index:5;pointer-events:none}
.nav-in{position:relative;display:flex;justify-content:flex-end;padding-top:15px}
.nav-links a,.nav-toggle{
  display:inline-flex;align-items:center;height:39px;padding:0 18px;border-radius:2px;cursor:pointer;
  font-family:var(--display);font-weight:500;font-size:13px;letter-spacing:.13em;text-transform:uppercase;line-height:1;
  color:#2A2932;background:linear-gradient(180deg,#F5F4F7,#E6E3EC);
  border:1px solid rgba(62,65,71,.14);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 3px 7px rgba(44,50,66,.18);
  transition:background .3s ease,color .3s ease,box-shadow .3s ease,border-color .3s ease}
.nav-toggle{gap:10px;pointer-events:auto;opacity:.9}
.nav-toggle b{font-weight:500}
.nav-toggle:hover,.nav-toggle[aria-expanded="true"],.nav-links a:hover,.nav-links a[aria-current]{
  color:#08080A;background:linear-gradient(135deg,#D9CCFF,#9B7BFF);border-color:rgba(91,63,200,.55);
  box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 4px 9px rgba(60,40,140,.3);opacity:1}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{display:block;width:18px;height:2px;border-radius:1px;
  background:currentColor;transition:transform .25s ease}
.nav-toggle span{position:relative}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0}
.nav-toggle span::before{top:-6px}.nav-toggle span::after{top:6px}
/* open: the outer bars close onto the centre as one bar. nothing rotates on this site */
.nav-toggle[aria-expanded="true"] span::before{transform:translateY(6px)}
.nav-toggle[aria-expanded="true"] span::after{transform:translateY(-6px)}
.nav-links{position:absolute;right:28px;top:57px;display:none;flex-direction:column;align-items:stretch;gap:3px;
  padding:3px;border-radius:3px;background:rgba(163,172,188,.6);box-shadow:0 18px 34px rgba(0,0,0,.4);pointer-events:auto}
.nav-links.is-open{display:flex}
.nav-links a{min-width:196px;height:43px;font-size:14px;box-shadow:0 1px 0 rgba(255,255,255,.9) inset}
@media (max-width:640px){
  .nav-in{padding-top:12px}
  .nav-links{right:20px;top:54px}
  .nav-toggle b{display:none}
  .nav-toggle{padding:0 14px}
  /* the phone logo is nearly full width, so it sits below the plaque */
  .home .hero{padding-top:62px}
}

/* ---------- inner page header: the same wall and plaster as Home, the page name in place of the logo ---------- */
.hero.page{padding:40px 0 34px;cursor:crosshair}
.page-title{margin:0;text-align:center;
  font-family:var(--display);font-weight:600;font-size:clamp(2rem,4.4vw,2.9rem);letter-spacing:.075em;line-height:1.15;
  text-transform:uppercase;color:#1C1B22;text-wrap:balance;
  filter:drop-shadow(0 10px 12px rgba(44,50,66,.14))}
.page-title::after{content:"";display:block;width:84px;height:3px;border-radius:2px;margin:16px auto 0;
  background:linear-gradient(90deg,#5B3FC8,var(--gold-bright),#5B3FC8)}
.hero.page .shade{top:54%;height:84px;width:min(520px,80%)}

/* ---------- copy ---------- */
.lede{max-width:1000px;margin:0 auto 34px;text-align:center;font-size:17px;line-height:1.65;color:#CFCBD8;text-wrap:pretty}
.eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0 0 11px;
  font-family:var(--display);font-weight:500;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--gold-bright)}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:1px;background:linear-gradient(135deg,#C2ADFF,#7A55F0)}
/* a heading on the short gold rule, the same stroke as the industry cards */
.rule-h{position:relative;margin:0 0 20px;padding-bottom:13px;
  font-family:var(--display);font-weight:600;font-size:1.16rem;letter-spacing:.06em;line-height:1.3;
  text-transform:uppercase;color:var(--text)}
.rule-h::after{content:"";position:absolute;left:0;bottom:0;width:72px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold-bright),#5B3FC8)}
.body{margin:0 0 16px;font-size:16px;line-height:1.6;color:#CFCBD8}
.body:last-child{margin-bottom:0}
/* tesserae as bullets, anywhere */
.tlist{list-style:none;margin:0;padding:0}
.tlist li{position:relative;padding-left:23px;margin-bottom:12px;font-size:16px;color:#CFCBD8;line-height:1.5}
.tlist li:last-child{margin-bottom:0}
.tlist li::before{content:"";position:absolute;left:0;top:8px;width:9px;height:9px;border-radius:1px;
  background:linear-gradient(135deg,#C2ADFF,#5B3FC8)}

/* sequence in tesserae, never numerals: a course of 3 tiles, N of them gilded */
.seq{display:flex;gap:4px;line-height:0}
.seq i{width:11px;height:11px;border-radius:1px;background:rgba(255,255,255,.13)}
.seq i.on{background:linear-gradient(135deg,#C2ADFF,#5B3FC8)}
.seq.sm{gap:2px}
.seq.sm i{width:8px;height:8px}

/* ---------- panels: the industry card's stone, free of its grid ---------- */
.panel{position:relative;overflow:hidden;container-type:inline-size;
  background:linear-gradient(180deg,var(--surface),var(--surface-2));
  border:1px solid var(--line);border-radius:3px;--pad:30px;padding:28px var(--pad);
  transition:border-color .25s,transform .38s cubic-bezier(.2,.8,.25,1),box-shadow .38s ease}
.panel::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;z-index:2;
  background:linear-gradient(90deg,transparent,var(--gold-bright),transparent);opacity:.45;transition:opacity .25s}
.panel > *{position:relative;z-index:1}
/* louder: the demo card's gold frame */
.panel.gold{border-color:rgba(155,123,255,.3);box-shadow:0 10px 26px rgba(0,0,0,.3)}
.panel.gold::before{opacity:.8}
/* the fold, for card-sized panels only — never a form or a page of text */
.panel.fold{transform-origin:50% 0;transform:perspective(1100px) rotateX(0deg)}
.panel.fold:hover{transform:perspective(1100px) rotateX(5.5deg);border-color:rgba(155,123,255,.34);
  box-shadow:0 30px 44px -14px rgba(0,0,0,.6)}
.panel.fold:hover::before{opacity:1}
/* the gold-washed course along the bottom */
.panel.has-strip{padding-bottom:0;display:flex;flex-direction:column}
.strip{margin:auto calc(var(--pad)*-1) 0;padding:15px var(--pad);
  font-family:var(--display);font-weight:500;font-size:clamp(13px,3.45cqi,16px);letter-spacing:.04em;
  text-transform:uppercase;color:var(--gold-bright);
  background:rgba(155,123,255,.07);border-top:1px solid rgba(155,123,255,.18)}
.panel.has-strip > .strip{margin-top:auto}
.panel.has-strip > :nth-last-child(2){margin-bottom:18px}
.panel .mosaic{position:absolute;top:0;right:0;width:194px;height:110px;z-index:0;pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 100% 88% at 100% 0,#000 0,rgba(0,0,0,.5) 40%,transparent 100%);
  mask-image:radial-gradient(ellipse 100% 88% at 100% 0,#000 0,rgba(0,0,0,.5) 40%,transparent 100%)}
.panel:hover .mosaic i:not(.gilt){background:var(--g);opacity:.5;
  transition:opacity .42s ease var(--d),background .42s ease var(--d)}
/* text on the left, a line icon on the right: put data-emblem on the .emblem-slot */
.panel-row{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:20px;align-items:center}
.emblem-slot{line-height:0}
.emblem-slot .emblem{grid-column:auto;grid-row:auto}
@container (max-width:350px){
  .panel-row{align-items:start;column-gap:12px}
  .emblem-slot .emblem{--s:52px}
}
.cols-2,.cols-3{display:grid;gap:16px;margin:0 auto}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){
  .cols-2,.cols-3{grid-template-columns:1fr;max-width:560px}
}

/* ---------- buttons: the gate's gold tile, and its outline ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 28px;
  border:1px solid transparent;border-radius:3px;cursor:pointer;
  font-family:var(--display);font-weight:600;font-size:.95rem;letter-spacing:.07em;line-height:1.2;text-transform:uppercase;
  transition:background .25s,color .25s,border-color .25s}
.btn svg{width:15px;height:15px}
.btn-gold{color:#08080A;background:var(--gold-bright)}
.btn-gold:hover{background:#B69CFF}
.btn-line{color:var(--gold-bright);border-color:rgba(155,123,255,.5);background:rgba(155,123,255,.07)}
.btn-line:hover{background:var(--gold-bright);color:#08080A}
.btn[disabled]{opacity:.6;cursor:default}

/* ---------- forms: the gate's input, left aligned ---------- */
.field{display:block;margin:0 0 18px}
.field > span{display:block;margin:0 0 7px;
  font-family:var(--display);font-weight:500;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--gold-bright)}
.field input,.field textarea,.field select{width:100%;padding:12px 14px;font:inherit;font-size:16px;color:var(--text);
  background:rgba(0,0,0,.28);border:1px solid var(--line);border-radius:3px;outline:none;transition:border-color .2s}
.field textarea{min-height:150px;resize:vertical;line-height:1.55}
.field input:focus,.field textarea:focus,.field select:focus{border-color:rgba(155,123,255,.65)}
.field input::placeholder,.field textarea::placeholder{color:var(--muted-2)}
.form-note{min-height:20px;margin:14px 0 0;font-size:14px;line-height:1.45;color:var(--clay)}
.form-note.ok{color:var(--gold-bright)}
/* bots fill it, people never see it */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* ---------- the closing call: a demo card's frame, centred ---------- */
.cta{text-align:center;padding:40px var(--pad) 42px}
.cta h2,.lost h2{margin:0 0 12px;font-family:var(--display);font-weight:600;font-size:clamp(1.4rem,2.6vw,1.9rem);
  letter-spacing:.055em;line-height:1.25;text-transform:uppercase;text-wrap:balance;color:var(--text)}
.cta p{max-width:980px;margin:0 auto 26px;font-size:17px;line-height:1.6;color:#CFCBD8;text-wrap:pretty}
.cta .btns{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}

/* ---------- long-form pages (privacy, terms) ---------- */
.prose{max-width:780px;margin:0 auto}
.prose h2{position:relative;margin:38px 0 16px;padding-bottom:12px;
  font-family:var(--display);font-weight:600;font-size:1.16rem;letter-spacing:.06em;line-height:1.3;text-transform:uppercase}
.prose h2::after{content:"";position:absolute;left:0;bottom:0;width:72px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold-bright),#5B3FC8)}
.prose h2:first-child{margin-top:0}
.prose p,.prose li{font-size:16px;line-height:1.65;color:#CFCBD8}
.prose p{margin:0 0 14px}
.prose ul{margin:0 0 16px;padding-left:20px}
.prose li{margin-bottom:7px}
.prose li::marker{color:var(--gold-bright)}
.prose a,.inline-link{color:var(--gold-bright);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:hover,.inline-link:hover{color:#D9CCFF}
.draft-flag{margin:0 0 26px;padding:13px 16px;border:1px dashed rgba(200,120,90,.7);border-radius:3px;
  font-size:14px;line-height:1.5;color:#E2B9A8;background:rgba(200,120,90,.08)}

/* the legal pages: facts row, sticky contents, summary box */
.panel.legal{overflow:clip;padding-top:30px;padding-bottom:36px}
.legal .draft-flag{margin-bottom:24px;font-size:15px;color:#E2B9A8}
.legal .draft-flag b{font-family:var(--display);font-weight:600;letter-spacing:.09em;text-transform:uppercase;margin-right:6px}
/* facts at a glance: 3 stone tiles on a gold course */
.legal .facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin:0 0 30px;
  border:1px solid rgba(155,123,255,.18);border-radius:3px;background:rgba(155,123,255,.18);overflow:hidden}
.legal .facts div{padding:15px 18px 16px;background:#1C1B22}
.legal .facts dt{margin:0 0 5px;font-family:var(--display);font-weight:500;font-size:11.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gold-bright)}
.legal .facts dd{margin:0;font-size:15.5px;line-height:1.45;color:#F5F4F7;overflow-wrap:anywhere}
.legal .facts dd a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.legal .facts dd a:hover{color:#D9CCFF}
/* contents on the left, the text on the right */
.legal-grid{display:grid;grid-template-columns:200px minmax(0,1fr);column-gap:44px;align-items:start}
.legal-grid .prose{max-width:none;margin:0}
.toc{position:sticky;top:84px;padding-right:20px;border-right:1px solid var(--line)}
.toc .eyebrow{margin-bottom:12px}
.toc a{position:relative;display:block;padding:6px 0 6px 17px;
  font-family:var(--display);font-weight:500;font-size:12.5px;letter-spacing:.09em;line-height:1.35;
  text-transform:uppercase;color:var(--muted);transition:color .2s}
.toc a::before{content:"";position:absolute;left:0;top:11px;width:7px;height:7px;border-radius:1px;
  background:#2A2932;transition:background .2s}
.toc a:hover{color:var(--text)}
.toc a:hover::before{background:var(--gold-bright)}
/* the plain summary: a gold-washed course */
.summary{margin:0 0 34px;padding:20px 22px 22px;border:1px solid rgba(155,123,255,.18);border-radius:3px;
  background:rgba(155,123,255,.07)}
.summary .eyebrow{margin-bottom:12px}
.prose ul.tlist{padding-left:2px}
.prose .tlist li{margin-bottom:9px;line-height:1.55}
.prose h3{margin:22px 0 8px;font-family:var(--display);font-weight:500;font-size:.98rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gold-bright)}
.prose h2 + h3{margin-top:4px}
.summary + h2{margin-top:0}
.prose h2{scroll-margin-top:84px}
.legal-end{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
@media (max-width:900px){
  .legal-grid{grid-template-columns:1fr}
  .toc{position:static;padding:0 0 18px;margin:0 0 26px;border-right:none;border-bottom:1px solid var(--line);
    columns:2;column-gap:24px}
  .toc .eyebrow{display:flex;column-span:all}
  .toc a{break-inside:avoid}
}
@media (max-width:640px){
  .legal .facts{grid-template-columns:1fr}
  .toc{columns:1}
  .summary{padding:16px 16px 18px}
  .legal-end .btn{width:100%}
}

/* ---------- footer: one slim row. the real logo, the page names, nothing else ---------- */
.site-foot{border-top:1px solid rgba(155,123,255,.28);background:#121217;padding:22px 0 0;
  background-image:
    repeating-linear-gradient(90deg,rgba(255,255,255,.022) 0 1px,transparent 1px 21px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0 1px,transparent 1px 21px)}
.foot-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 30px}
.foot-logo{display:block;width:150px;height:auto;margin-left:-3px}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 26px}
.foot-links a,.foot-base a{font-size:14px;color:var(--muted);transition:color .18s}
.foot-links a:hover,.foot-base a:hover{color:var(--text)}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 20px;margin-top:16px;padding-top:14px;padding-bottom:18px;
  border-top:1px solid var(--line);font-size:13px;color:var(--muted-2)}

@media (max-width:640px){
  .hero.page{padding:30px 0 24px}
  .page-title{font-size:1.75rem;letter-spacing:.06em}
  .page-title::after{width:64px;margin-top:12px}
  .lede{font-size:16px;margin-bottom:26px}
  .panel{--pad:20px;padding-top:22px;padding-bottom:22px}
  .panel.has-strip{padding-bottom:0}
  .panel .mosaic{width:131px;height:68px}
  .rule-h{font-size:1.04rem;margin-bottom:16px}
  .tlist li{font-size:15.4px;padding-left:21px;margin-bottom:11px}
  .cta{padding:30px var(--pad) 32px}
  .cta p{font-size:16px}
  .btn{padding:13px 22px}
}

/* =====================================================================================
   LIFT — tiles stand off the ground. Darker floor, lighter stone, a cast shadow under
   every tile, a faint warm wash at each tile's top, and a banded section for rhythm.
   One block on purpose: tune it here or delete it to get the flatter look back.
   ===================================================================================== */
/* card brightness: "Lighter stone" read faded and washed out to Blake, so this sits halfway back
   to the first value, with a deeper foot so the stone has weight instead of an even grey */
:root{--bg:#0E0E12;--surface:#3E3B48;--surface-2:#2A2932;--line:rgba(255,255,255,.17)}
.ind,.panel,.card{box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 18px 34px -14px rgba(0,0,0,.7),0 2px 6px rgba(0,0,0,.35)}
.panel.gold,.card{border-color:rgba(155,123,255,.42)}
.ind::after,.panel::after,.card::after{content:"";position:absolute;left:0;right:0;top:0;height:110px;z-index:0;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 0,rgba(155,123,255,.085),transparent 72%)}
.prop{background-color:#34323C;border-color:rgba(155,123,255,.4);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 14px 26px -12px rgba(0,0,0,.65)}
.prop b{color:#C2ADFF}
/* a banded section: same floor as the rest of the page, only a soft glow behind its heading */
section.band{background:radial-gradient(760px 300px at 50% 0,rgba(155,123,255,.08),transparent 70%)}
.demos-title::before,.demos-title::after{background:linear-gradient(90deg,#5B3FC8,var(--gold-bright))}
.demos-title::after{background:linear-gradient(90deg,var(--gold-bright),#5B3FC8)}
.site-foot{background-color:#0E0E12;margin-top:0}

/* =====================================================================================
   TESSERAE LETTERING + WALL MENU
   page names are cut from small square tiles, the same make as the wall, a few of them gilt.
   the menu is a gilded 3 by 3 patch of the wall. it opens a strip of wall with the page names
   set on it, and a row gilds under the pointer the way the wall does.
   ===================================================================================== */
.page-title{
  display:block;width:fit-content;max-width:100%;margin:0 auto;
  font-family:'Montserrat',var(--display);font-weight:800;letter-spacing:.03em;line-height:1.05;
  font-size:clamp(2.9rem,6.6vw,4.9rem);
  /* plain dark stone, no crack pattern (Blake, Sep 19 2026). the chisel filter does the modelling */
  background:linear-gradient(180deg,#4A4658 0%,#34323C 55%,#2A2932 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  /* depth, lit from the top left like the logo: the chisel filter (in the nav partial) rounds the
     edges with a highlight and a shaded side, then a 3px stone side wall, then the cast shadow */
  filter:url(#chisel) drop-shadow(1px 1px 0 #0E0E12) drop-shadow(1px 1px 0 #15151B)
    drop-shadow(2px 6px 7px rgba(30,34,48,.4))}
/* no rule under the name */
.page-title::after{display:none}
/* inner pages: a shallower band, the name set flat so the tiles in it stay sharp (the 3D lift
   scales and softens it), and the wall keeps its wandering gilt but does not react to the pointer */
.hero.page{padding:24px 0 26px;cursor:default}
.hero.page .wrap{transform:none}
.hero.page .shade{display:none}
@media (max-width:640px){
  .page-title{font-size:2.05rem;letter-spacing:.02em}
  .hero.page{padding:70px 0 18px}
}

.nav-in{padding-top:0}
/* the menu glyph is 12 of the wall's own tiles (class mt, set by site.js) gilded solid as 3 bars.
   the button itself is invisible and sits exactly over them */
.nav-toggle,.nav-toggle:hover,.nav-toggle[aria-expanded="true"]{
  position:absolute;display:block;padding:0;border:0;border-radius:3px;background:none;box-shadow:none;opacity:1;
  cursor:pointer;pointer-events:auto}
.nav-home{position:absolute;display:block;border-radius:3px;pointer-events:auto;cursor:pointer}
.wall i.mt{background:#15151B!important;opacity:1!important;box-shadow:none}
.wall i.mq{background:#9994A6!important;opacity:.32!important}
.wall i.mh{opacity:0!important}
.wall i.mini{border-radius:1px;background:#9994A6;opacity:.32}
/* hover: gold runs through the glyph tile by tile. menu open: the top and bottom bars close onto the
   middle one and the three become a single gilt bar, which reads as close */
.wall i.mini.mt{transform:translateY(0)!important;
  transition:background .22s ease calc((var(--i)*1 + var(--b)*2)*32ms),transform .42s cubic-bezier(.2,.9,.3,1)!important}
.wall.menu-hot i.mm,.wall.home-hot i.hh{background:linear-gradient(135deg,#D9CCFF,#9B7BFF)!important}
.wall.menu-open i.mini.mm{transform:translateY(calc((1 - var(--b))*var(--barstep,21px)))!important}
/* the list: a clean plaster plaque, no tile lines. one hairline between rows */
.nav-links{gap:0;padding:0;border-radius:3px;background:#F5F4F7;overflow:hidden;
  border:1px solid rgba(62,65,71,.16);box-shadow:0 16px 30px rgba(30,32,40,.35)}
.nav-links a{
  min-width:0;width:214px;height:46px;padding:0 24px;border:0;border-radius:0;box-shadow:none;text-shadow:none;opacity:1;
  font-family:var(--display);font-weight:600;font-size:14.5px;letter-spacing:.14em;color:#15151B;
  background:none;border-top:1px solid rgba(62,65,71,.1);transition:background-color .3s ease,color .3s}
.nav-links a:first-child{border-top:0}
.nav-links a:hover{background:rgba(155,123,255,.22);color:#08080A;border-color:rgba(62,65,71,.1);box-shadow:none}
.nav-links a[aria-current]{background:#9B7BFF;color:#08080A;border-color:transparent;box-shadow:none}
/* the rows arrive one after another, from the patch downward */
.nav-links.is-open a{animation:navrow .38s cubic-bezier(.2,.8,.25,1) both}
.nav-links.is-open a:nth-child(2){animation-delay:.05s}.nav-links.is-open a:nth-child(3){animation-delay:.1s}
.nav-links.is-open a:nth-child(4){animation-delay:.15s}.nav-links.is-open a:nth-child(5){animation-delay:.2s}
.nav-links.is-open a:nth-child(6){animation-delay:.25s}
@keyframes navrow{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@media (max-width:640px){
  .home .hero{padding-top:74px}
}

/* an odd last industry panel spans the row until its partner is written */
.industries .ind:last-child:nth-child(odd){grid-column:1/-1}
/* a tile that leads somewhere: the heading link covers the whole tile */
.ind-link::after{content:"";position:absolute;inset:0;z-index:3}
.ind:has(.ind-link){cursor:pointer}
/* Home is the fork: two rich doorway panels, business and home */
.paths .path{display:flex;flex-direction:column;padding-bottom:0;color:inherit}
.paths .path .panel-row{margin-bottom:22px}
.paths .emblem{--s:118px}
/* the two doorways are the biggest cards on the site, so what is in them is sized to match */
.paths .path{--pad:34px;padding-top:32px}
.paths .eyebrow{font-size:14px;letter-spacing:.14em;margin-bottom:14px}
.paths .eyebrow::before{width:9px;height:9px}
/* one line: what it is, then who it is for in gold. sized off the card so it never wraps */
.paths .rule-h{font-size:clamp(1rem,5.2cqw,1.75rem);letter-spacing:.04em;white-space:nowrap;margin-bottom:24px;padding-bottom:16px}
.paths .rule-h .for{color:var(--gold-bright)}
.paths .rule-h::after{width:96px;height:4px}
.paths .tlist li{font-size:19px;margin-bottom:15px;padding-left:28px}
.paths .tlist li::before{width:12px;height:12px;top:8px}
.paths .path-go{font-size:17px;padding:19px var(--pad)}
.paths .path-go::after{width:11px;height:17px}
@media (max-width:640px){
  .paths .path{--pad:22px;padding-top:24px}
  .paths .rule-h{font-size:1.35rem;white-space:normal}
  .paths .rule-h .for{display:block}
  .paths .tlist li{font-size:17px}
  .paths .emblem{--s:60px}
}
.path-go{display:flex;align-items:center;justify-content:space-between;margin:auto calc(var(--pad)*-1) 0;padding:15px var(--pad);
  font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-bright);
  background:rgba(155,123,255,.09);border-top:1px solid rgba(155,123,255,.22);transition:background .25s,color .25s}
.path-go::after{content:"";width:9px;height:14px;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%)}
.path:hover .path-go{background:var(--gold-bright);color:#08080A}
/* Home: the flagship, Chief of Staff, spans the row above the two doorways.
   its 3 lines sit side by side so the wide card is not half empty */
.flagship{margin:0 auto 16px}
.flagship .tlist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 36px;max-width:820px}
.flagship .tlist li{margin-bottom:0}
@media (max-width:900px){
  .flagship{max-width:560px}
  .flagship .tlist{grid-template-columns:1fr}
  .flagship .tlist li{margin-bottom:15px}
  .flagship .tlist li:last-child{margin-bottom:0}
}
/* Home: three small windows onto the demos */
.peek{display:block;color:inherit;padding:22px 24px 24px}
.peek h3{margin:0 0 8px;font-family:var(--display);font-weight:600;font-size:1.12rem;letter-spacing:.05em;text-transform:uppercase;line-height:1.3;color:var(--text)}
.peek p{margin:0;font-size:15.5px;line-height:1.5;color:#CFCBD8}

/* =====================================================================================
   SCALE — Blake compared the site at browser zoom levels and chose 90% as the right size
   for a desktop visitor at 100% (Sep 19 2026). phones keep the full size
   ===================================================================================== */
@media (min-width:900px){
  html{zoom:.9}
}

/* =====================================================================================
   THE NEW LOOK (Oct 2026): the Mosaic CoS look across the whole site. Near black, one violet,
   Sora, rounded cards, white pill buttons. Dark only. Later rules here win over the stone rules above.
   ===================================================================================== */
:root{
  --bg:#08080A; --surface:#131318; --surface-2:#0F0F13;
  --line:rgba(255,255,255,.09); --line-strong:rgba(255,255,255,.16);
  --text:#F5F4F7; --muted:#CFCBD8; --muted-2:#9994A6;
  --gold:#7A55F0; --gold-bright:#B69CFF; --violet:#9B7BFF; --clay:#FF8FA3;
  --sans:'Sora',system-ui,-apple-system,'Segoe UI',sans-serif;
  --display:'Sora',system-ui,-apple-system,'Segoe UI',sans-serif;
}
body{background:var(--bg);color:var(--text);font-family:var(--sans)}
::selection{background:rgba(155,123,255,.35)}
.skip{border-radius:999px;font-family:var(--sans);text-transform:none;letter-spacing:0;color:#08080A;background:#FFFFFF}

/* ---------- header bar: the logo at the left, the pages at the right, Contact as the one white button ---------- */
.nav{position:relative;top:auto;left:auto;right:auto;z-index:30;pointer-events:auto}
.nav-in{position:relative;display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:20px;padding-bottom:20px}
.brand{display:inline-flex;align-items:center;gap:12px;color:var(--text)}
.brand img{display:block;width:44px;height:44px}
.brand-word{font-size:21px;font-weight:400;letter-spacing:.2em;margin-right:-.2em;line-height:1;color:var(--text)}
.brand-word b,.lockup .wm b{font-weight:inherit;color:var(--violet)}
.brand.sm img{width:34px;height:34px}
.brand.sm .brand-word{font-size:16px}
.nav-links,.nav-links.is-open{position:static;display:flex;flex-direction:row;align-items:center;gap:4px;padding:0;
  border:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
.nav-links a,.nav-links a:hover,.nav-links a[aria-current]{width:auto;min-width:0;height:auto;padding:9px 13px;border:0;border-radius:999px;
  box-shadow:none;animation:none;font-family:var(--sans);font-weight:500;font-size:14.5px;letter-spacing:.01em;text-transform:none}
.nav-links a{color:var(--muted);background:none}
.nav-links a:hover{color:var(--text);background:rgba(255,255,255,.06)}
.nav-links a[aria-current]{color:var(--text);background:rgba(155,123,255,.16)}
.nav-links a.nav-cta{margin-left:8px;padding:10px 18px;font-weight:600;color:#08080A;background:#FFFFFF;
  box-shadow:0 10px 30px -10px rgba(182,156,255,.7);transition:transform .2s ease,box-shadow .2s ease}
.nav-links a.nav-cta:hover,.nav-links a.nav-cta[aria-current]{color:#08080A;background:#FFFFFF;transform:translateY(-1px);box-shadow:0 14px 34px -10px rgba(182,156,255,.9)}
.nav-toggle,.nav-toggle:hover,.nav-toggle[aria-expanded="true"]{display:none}
@media (max-width:980px){
  .nav-toggle,.nav-toggle:hover,.nav-toggle[aria-expanded="true"]{position:static;display:inline-flex;align-items:center;justify-content:center;
    width:46px;height:46px;padding:0;border-radius:14px;border:1px solid var(--line-strong);background:rgba(255,255,255,.04);
    color:var(--text);box-shadow:none;opacity:1;cursor:pointer}
  .nav-links{display:none}
  .nav-links.is-open{position:absolute;right:28px;top:78px;display:flex;flex-direction:column;align-items:stretch;gap:2px;
    min-width:240px;padding:8px;border-radius:18px;background:#121217;border:1px solid var(--line-strong);box-shadow:0 24px 50px rgba(0,0,0,.6)}
  .nav-links a,.nav-links a:hover,.nav-links a[aria-current]{padding:12px 16px;font-size:16px;border-radius:12px}
  .nav-links a.nav-cta{margin:6px 0 0;justify-content:center;text-align:center}
}
@media (max-width:640px){
  .nav-links.is-open{right:20px;left:20px;top:74px}
  .brand-word{font-size:18px}
  .brand img{width:38px;height:38px}
}

/* ---------- Home: the full logo, the cube beside MOSAIC with INTELLIGENCE ASSEMBLED under it ---------- */
.home .hero{padding:54px 0 46px}
.logo-h1{display:flex;justify-content:center}
.lockup{--wm:clamp(2.6rem,7vw,5.4rem);display:inline-flex;align-items:center;gap:calc(var(--wm)*.42)}
.lockup img{display:block;width:calc(var(--wm)*1.75);height:calc(var(--wm)*1.75)}
.lockup .lk{display:inline-flex;flex-direction:column;align-items:flex-start}
.lockup .wm{font-size:var(--wm);font-weight:400;letter-spacing:.2em;line-height:1;color:var(--text)}
.lockup .tg{align-self:stretch;text-align:center;margin-top:calc(var(--wm)*.22);font-size:calc(var(--wm)*.205);font-weight:400;
  letter-spacing:.36em;margin-right:-.36em;color:var(--muted)}
@media (max-width:640px){
  .lockup{--wm:2.5rem;flex-direction:column;gap:18px}
  .lockup .lk{align-items:center}
  .lockup .wm{margin-right:-.2em}
}

/* ---------- inner pages: the page name, plain and large ---------- */
.hero.page{padding:54px 0 22px}
.page-title{display:block;width:auto;max-width:none;margin:0;text-align:center;font-family:var(--display);font-weight:600;
  font-size:clamp(2.4rem,5.2vw,3.7rem);letter-spacing:-.03em;line-height:1.06;text-transform:none;
  background:none;color:var(--text);-webkit-text-fill-color:currentColor;filter:none}
@media (max-width:640px){
  .hero.page{padding:30px 0 12px}
  .page-title{font-size:2.3rem}
}

/* ---------- type: headings in Sora, never in capitals; labels stay small, tracked and violet ---------- */
main h1,main h2,main h3,#gate h3{text-transform:none!important;font-family:var(--display)!important}
main h2,main h3,#gate h3{letter-spacing:-.01em!important}
.demos-title{font-weight:600;font-size:clamp(1.7rem,3.2vw,2.4rem);line-height:1.15;color:var(--text);margin:0 0 30px}
.demos-title::before,.demos-title::after{display:none}
.demos-title.lead{font-size:clamp(1.9rem,3.6vw,2.75rem);letter-spacing:-.025em!important}
.demos-sub,.lede{color:var(--muted);font-weight:300}
.lede{font-size:18px}
.eyebrow{font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.2em;color:var(--gold-bright)}
.eyebrow::before{border-radius:3px;background:var(--violet)}
.rule-h,.ind h3{font-weight:600;font-size:1.32rem;line-height:1.25;padding-bottom:0;color:var(--text)}
.rule-h::after,.ind h3::after{display:none}
.paths .rule-h{padding-bottom:0;font-size:clamp(1.1rem,4.4cqw,1.7rem)}
.paths .rule-h .for{color:var(--gold-bright)}
.body,.tlist li,.ind li,.peek p,.card p,.prose p,.prose li,.cta p,.lost p{color:var(--muted)}
.tlist li::before,.ind li::before{border-radius:3px;background:var(--violet)}
.chip,.tags,.open,.gate-eyebrow,.field > span,.ind-foot,.strip,.path-go,.toc a,.legal .facts dt{font-family:var(--sans);letter-spacing:.11em}
.chip{color:var(--gold-bright)}
.chip .pulse{border-radius:3px;background:var(--violet)}
.tag:not(:last-child)::after{border-radius:2px;background:var(--violet)}

/* ---------- cards and panels: soft dark glass, round corners, a violet edge on the ones that lead somewhere ---------- */
.panel,.ind,.card{border-radius:22px;background:rgba(255,255,255,.035);border:1px solid var(--line);
  box-shadow:none;transform:none;backdrop-filter:blur(6px)}
.panel::before,.ind::before,.card::before,.prop::before,.gate-box::before{display:none}
.panel::after,.ind::after,.card::after{display:none}
.panel.gold,.card{border-color:rgba(182,156,255,.3);background:linear-gradient(140deg,rgba(123,77,255,.13),rgba(255,255,255,.03) 60%)}
.panel.fold,.ind,a.card,.panel.fold:hover,.ind:hover,a.card:hover{transform-origin:50% 50%}
.panel.fold,.ind,a.card{transition:transform .3s cubic-bezier(.2,.8,.25,1),border-color .25s,box-shadow .3s}
.panel.fold:hover,.ind:hover,a.card:hover{transform:translateY(-3px);border-color:rgba(182,156,255,.55);
  box-shadow:0 30px 60px -32px rgba(123,77,255,.55)}
.strip,.ind-foot,.path-go,.card-foot{background:rgba(155,123,255,.08);border-top:1px solid rgba(155,123,255,.18)}
.strip,.ind-foot,.path-go{font-weight:600;color:var(--gold-bright)}
.path:hover .path-go,a.card:hover .open{background:#FFFFFF;color:#08080A}
.open{color:var(--gold-bright);border-left-color:rgba(155,123,255,.18)}
.prop{border-radius:16px;background:#121217;background-image:none;border:1px solid var(--line);box-shadow:none}
.prop b{font-family:var(--sans);font-weight:600;text-transform:none;letter-spacing:0;color:var(--text);font-size:clamp(.98rem,1.4vw,1.1rem)}
section.band{background:radial-gradient(760px 300px at 50% 0,rgba(123,77,255,.09),transparent 70%)}
.mosaic i{border-radius:4px}

/* ---------- buttons: white pill, and a quiet outline pill ---------- */
.btn{border-radius:999px;font-family:var(--sans);font-weight:600;font-size:15px;letter-spacing:.01em;text-transform:none;padding:14px 26px;
  transition:transform .2s ease,background .2s,color .2s,box-shadow .2s,border-color .2s}
.btn-gold,.btn-gold:hover{color:#08080A;background:#FFFFFF;box-shadow:0 10px 30px -10px rgba(182,156,255,.7)}
.btn-gold:hover{transform:translateY(-1px);box-shadow:0 14px 34px -10px rgba(182,156,255,.9)}
.btn-line{color:var(--text);border-color:var(--line-strong);background:transparent}
.btn-line:hover{color:var(--text);background:rgba(255,255,255,.06)}

/* ---------- forms and the passcode gate ---------- */
.field input,.field textarea,.field select,#gate-input{border-radius:12px;background:rgba(255,255,255,.04);border-color:var(--line-strong)}
.field input:focus,.field textarea:focus,.field select:focus,#gate-input:focus{border-color:rgba(182,156,255,.7)}
.field > span{color:var(--gold-bright)}
.gate-box{border-radius:22px;background:#121217;border-color:rgba(182,156,255,.32)}
#gate-go{border-radius:999px;font-family:var(--sans);text-transform:none;letter-spacing:.01em;color:#08080A;background:#FFFFFF}
#gate-go:hover{background:#FFFFFF}
.form-note.ok{color:var(--gold-bright)}

/* ---------- closing call, long pages ---------- */
.cta h2,.lost h2{font-weight:600}
.prose h2{padding-bottom:0}
.prose h2::after{display:none}
.prose h3{color:var(--gold-bright);text-transform:none;letter-spacing:0}
.toc a{text-transform:none;letter-spacing:0;font-size:14px}
.toc a::before{border-radius:2px;background:#2A2932}
.legal .facts,.summary,.draft-flag{border-radius:16px}
.legal .facts div{background:#121217}

/* ---------- footer: one slim row ---------- */
.site-foot{margin-top:30px;padding:30px 0 0;background:none;background-image:none;border-top:1px solid var(--line)}
.foot-links a,.foot-base a{color:var(--muted-2)}
.foot-links a:hover,.foot-base a:hover{color:var(--text)}
.foot-base{border-top:0;color:#6F6B7A}

/* Sora runs wider than the old condensed face: card strips and tags set in normal case so they hold one line */
.strip,.ind-foot{text-transform:none;letter-spacing:0;font-size:clamp(13px,3.3cqi,15px)}
.tags{text-transform:none;letter-spacing:0;font-size:13px}
.chip,.gate-eyebrow{font-size:11px}

/* ---------- line icons: one platinum line and one lit violet part, in a soft rounded well.
   the lit part glints on the old 6s shimmer. hover redraws the lines one after another ---------- */
.emblem{--s:96px;grid-column:2;grid-row:2;align-self:center;position:relative;pointer-events:none;flex:0 0 auto;
  display:grid;place-items:center;width:var(--s);height:var(--s);border-radius:calc(var(--s)*.27);
  background:linear-gradient(150deg,rgba(255,255,255,.075),rgba(255,255,255,.015));border:1px solid var(--line-strong);
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset;transition:border-color .3s,box-shadow .4s}
.emblem svg{display:block;width:60%;height:60%;overflow:visible;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.emblem svg > *{stroke-dasharray:1;stroke-dashoffset:0}
.emblem .hi{fill:var(--violet);stroke:none;animation:glint 6s ease-in-out infinite}
.emblem .hs{stroke:var(--gold-bright);stroke-width:2.6}
@keyframes glint{0%,100%{opacity:.72}50%{opacity:1}}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.ind:hover .emblem,.panel:hover .emblem{border-color:rgba(182,156,255,.55);box-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 0 34px -6px rgba(123,77,255,.55)}
.ind:hover .emblem svg > :not(.hi),.panel:hover .emblem svg > :not(.hi){animation:draw .6s cubic-bezier(.4,0,.2,1) var(--d) both}
.ind:hover .emblem .hi,.panel:hover .emblem .hi{animation:none;opacity:1}
/* the Shields: no well, the shield is the shape */
.emblem.bare{background:none;border:0;box-shadow:none;border-radius:0}
.emblem.bare svg{width:100%;height:100%}
.ind:hover .emblem.bare,.panel:hover .emblem.bare{box-shadow:none}
@media (prefers-reduced-motion:reduce){
  .emblem .hi,.ind:hover .emblem svg > *,.panel:hover .emblem svg > *{animation:none}
}
/* the Chief of Staff card carries the product's own mark in the well */
.emblem.logo img{display:block;width:62%;height:62%}

/* ---------- tightening, Oct 2 2026 ---------- */
/* card corners: a soft violet glow, no tile patch. it warms on hover */
.mosaic,.card .mosaic,.panel .mosaic,.panel.dossier .mosaic{position:absolute;top:0;right:0;width:min(62%,460px);height:min(100%,240px);z-index:0;
  pointer-events:none;border-radius:0 22px 0 0;-webkit-mask-image:none;mask-image:none;opacity:.55;transition:opacity .45s ease;
  background:radial-gradient(ellipse 100% 100% at 100% 0,rgba(155,123,255,.3),rgba(123,77,255,.08) 45%,transparent 72%)}
.panel:hover > .mosaic,a.card:hover > .mosaic{opacity:1}
/* inner pages: the page name is a small violet label, the headline under it leads */
.hero.page{padding:34px 0 10px}
.page-title{font-size:13px;font-weight:600;letter-spacing:.24em;margin-right:-.24em;line-height:1.2;text-transform:uppercase!important;color:var(--gold-bright);
  -webkit-text-fill-color:currentColor}
@media (max-width:640px){
  .hero.page{padding:22px 0 8px}
  .page-title{font-size:12px}
}
/* Business cards read at the same size as Personal */
.ind h3{font-size:1.4rem}
.ind li{font-size:17.5px;margin-bottom:13px;padding-left:25px}
.ind li::before{top:9px}
/* step markers: 3 short bars, the lit ones violet */
.seq{gap:5px}
.seq i{width:22px;height:4px;border-radius:999px;background:rgba(255,255,255,.14)}
.seq i.on{background:var(--violet)}
.seq.sm i{width:14px;height:3px}
/* a section that follows another without a band keeps a little air */
#chief-of-staff{padding-top:8px}

/* =====================================================================================
   THE HOUSE SYSTEM (Oct 2 2026): one way of laying out every page, taken from Home.
   Black ground. Bands run the full window, type sits hard left on one wide column, things
   that depict the product sit in a raised frame and everything else stays open on hairlines.
   Shared classes are prefixed h-. A page's own pieces live in its own style block.
   ===================================================================================== */
:root{--band:clamp(40px,4vw,62px);--gut:clamp(22px,5vw,96px)}
body{background:#000}
body::before{height:760px;background:radial-gradient(64vw 520px at 12% 0,rgba(123,77,255,.3),transparent 68%)}
.h-wide,.nav .wrap,.site-foot .wrap{width:100%;max-width:1760px;margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
main > section{padding:0}
.h-band{position:relative;padding:var(--band) 0}
.h-band.alt{background:#08080A;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* the header stays with you, on smoked glass */
.nav{position:sticky;top:0;z-index:40;background:rgba(0,0,0,.62);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);transition:background .3s}
.nav.nav-top{background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.nav-in{padding-top:16px;padding-bottom:16px}
.nav-links a,.nav-links a:hover,.nav-links a[aria-current]{font-size:15px}
/* type */
.h-display{margin:0 0 24px;font-weight:600;font-size:clamp(2.3rem,4.6vw,5rem);letter-spacing:-.045em!important;line-height:1;color:#FFFFFF;text-wrap:balance}
.h-display span,.h-h2 span.v{color:var(--violet)}
.h-h2{margin:0 0 20px;font-weight:600;font-size:clamp(2rem,3.8vw,4.1rem);letter-spacing:-.04em!important;line-height:1.04;color:#FFFFFF;text-wrap:balance}
.h-h3{margin:0 0 10px;font-weight:600;font-size:clamp(1.35rem,2vw,1.8rem);letter-spacing:-.025em!important;line-height:1.15;color:#FFFFFF}
.h-sub{margin:0;max-width:32em;font-size:clamp(1.1rem,1.5vw,1.45rem);font-weight:300;line-height:1.45;color:var(--muted)}
.h-body{margin:0;font-size:17px;line-height:1.6;color:var(--muted)}
.h-eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 22px;font-family:var(--sans)!important;font-size:13px;font-weight:600;letter-spacing:.24em!important;text-transform:uppercase!important;color:var(--gold-bright)}
.h-eyebrow img{width:26px;height:26px}
h1.h-eyebrow{display:flex}
/* one white button to a band, and the violet link with its chevron for everything else */
.btn-gold{font-size:16px;padding:16px 30px}
.h-link{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:17px;color:var(--gold-bright);transition:color .2s,gap .2s}
.h-link::after{content:"";width:8px;height:13px;background:currentColor;clip-path:polygon(0 0,28% 0,100% 50%,28% 100%,0 100%,72% 50%)}
.h-link:hover,a:hover > .h-link{color:#FFFFFF;gap:12px}
.h-acts{display:flex;flex-wrap:wrap;align-items:center;gap:16px 30px;margin-top:36px}
/* a page's opening: label, the line, a lead, the actions. two columns when something sits beside it */
.h-top{padding:clamp(20px,2.2vw,34px) 0 var(--band)}
/* pages that open with only a small page label: the first band sits right under it */
.hero.page + .h-band{padding-top:clamp(20px,2.2vw,34px)}
.h-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(34px,5vw,96px)}
/* open rows on hairlines */
.h-rows{margin:0;padding:0;list-style:none;border-top:1px solid var(--line-strong)}
.h-rows > li,.h-rows > a,.h-rows > div{border-bottom:1px solid var(--line-strong)}
/* open columns, a hairline over each */
.h-cols{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:clamp(24px,3.4vw,64px)}
.h-cols > *{padding-top:26px;border-top:1px solid var(--line-strong)}
/* a raised frame: only for something that shows the product */
.h-frame{border-radius:26px;background:linear-gradient(180deg,#1C1B22,#0E0E12);border:1px solid var(--line-strong);box-shadow:0 50px 90px -20px #000}
/* the closing band, the same on every page */
.h-close{position:relative;overflow:hidden;padding:clamp(34px,3.4vw,54px) 0 clamp(40px,4vw,62px);
  background:radial-gradient(70vw 460px at 50% 112%,rgba(123,77,255,.34),transparent 70%)}
.h-close .h-h2 span{display:block;color:var(--violet)}
/* the closing band is one row: the words on the left, the buttons on the right, so the band has no empty half */
@media (min-width:1000px){
  .h-close .h-wide{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(30px,5vw,90px);align-items:center}
  .h-close .h-h2{grid-column:1;margin-bottom:14px}
  .h-close .h-sub{grid-column:1}
  /* the buttons span every row of the words, so they sit centred beside them however many lines there are */
  .h-close .h-acts{grid-column:2;grid-row:1 / span 6;margin-top:0;justify-content:flex-end}
  .h-close .h-wide > :not(.h-acts){grid-column:1}
}
/* the Chief of Staff band, shared by the pages that point to it */
.h-cross{display:grid;grid-template-columns:minmax(0,1.2fr) auto;align-items:center;gap:30px 5vw}
.h-cross img{width:clamp(110px,13vw,200px);height:auto}
/* things rise into place as they scroll into view (site.js adds .in) */
[data-rise]{opacity:0;transform:translateY(34px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.25,1);transition-delay:var(--rd,0s)}
[data-rise].in{opacity:1;transform:none}
/* footer */
.site-foot{margin-top:0;padding-top:34px}
.foot-links a,.foot-base a{color:var(--muted)}
.foot-base{color:var(--muted-2)}
@media (max-width:900px){
  .h-split{grid-template-columns:1fr}
  .h-cols{grid-template-columns:1fr;gap:0}
  .h-cols > *{padding:24px 0}
  .h-cross{grid-template-columns:1fr}
  .h-cross img{order:-1}
}
@media (prefers-reduced-motion:reduce){
  [data-rise]{opacity:1;transform:none;transition:none}
}

/* a working window: the steps of a job ticking off. used on Home and Business */
.win{width:min(100%,720px);overflow:hidden}
.win-bar{display:flex;align-items:center;gap:8px;padding:18px 26px;border-bottom:1px solid var(--line);font-size:15px;font-weight:600;color:var(--muted)}
.win-bar i{width:12px;height:12px;border-radius:50%;background:#3E3B48}
.win-bar b{margin-left:10px;font-weight:600;color:var(--text)}
.win ol{margin:0;padding:8px 26px 14px;list-style:none}
.win li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px;padding:23px 0;border-bottom:1px solid var(--line);
  font-size:clamp(1.1rem,1.6vw,1.45rem);font-weight:600;color:#FFFFFF;opacity:.28;transition:opacity .6s ease calc(.4s + var(--n)*.55s)}
.win li:last-child{border-bottom:0}
.win li::before{content:"";width:28px;height:28px;border-radius:50%;border:2px solid #4A4658;
  background:center/62% no-repeat;transition:background-color .4s ease calc(.6s + var(--n)*.55s),border-color .4s ease calc(.6s + var(--n)*.55s)}
.win li span{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);opacity:0;transition:opacity .4s ease calc(.7s + var(--n)*.55s)}
.in .win li{opacity:1}
.in .win li span{opacity:1}
.in .win li::before{border-color:var(--violet);background-color:var(--violet);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.500' fill='none' stroke='%2308080A' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.win li.go span{color:var(--gold-bright)}

/* the closing band's two-line saying and the row used for open lists */
.h-list a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 28px;padding:30px 0;color:inherit;transition:background .25s,padding .25s}
.h-list a:hover{background:rgba(155,123,255,.1);padding-left:20px;padding-right:20px}
.h-list b{font-weight:600;font-size:clamp(1.35rem,2vw,1.8rem);letter-spacing:-.025em;color:#FFFFFF}
.h-list span{grid-column:1;font-size:17px;font-weight:300;color:var(--muted)}
.h-list i{grid-column:2;grid-row:1/3;width:11px;height:19px;background:var(--gold-bright);clip-path:polygon(0 0,28% 0,100% 50%,28% 100%,0 100%,72% 50%)}
@media (max-width:900px){.h-list a{padding:22px 0}}

/* ---------- the Chief of Staff mark, built in front of you (site.js Mosaic.cos) ----------
   3 staff blocks close ranks, the back one being the block the finished logo hides, then the violet
   chief drops onto them and they light for a beat. After that he lifts and lights every 8 seconds and
   the staff answer. The mask is the chief's own shape, moving with him, so he hides what he covers */
[data-cos]{display:inline-block;line-height:0}
.cosm{display:block;width:100%;height:100%;overflow:visible}
.cosm polygon{fill:none;stroke-width:3.2;stroke-linejoin:round}
.cosm.sm polygon{stroke-width:5.4}
.cosm mask polygon{fill:#000;stroke:#000;stroke-width:1.6}
.cosm:not(.go) .cm-back,.cosm:not(.go) .cm-left,.cosm:not(.go) .cm-right,.cosm:not(.go) > .cm-chief{opacity:0}
.cosm.go .cm-back{animation:cm-top 1s cubic-bezier(.16,.9,.2,1) .1s both}
.cosm.go .cm-bs{animation:cm-fade .4s ease 1s forwards}
.cosm.go .cm-bt{animation:cm-fade .3s ease 2.5s forwards}
.cosm.go .cm-left{animation:cm-left 1s cubic-bezier(.16,.9,.2,1) .28s both,cm-greet .7s ease 2.3s,cm-nod 8s ease-in-out 5.2s infinite}
.cosm.go .cm-right{animation:cm-right 1s cubic-bezier(.16,.9,.2,1) .46s both,cm-greet .7s ease 2.42s,cm-nod 8s ease-in-out 5.36s infinite}
.cosm.go > .cm-chief{animation:cm-drop 1.05s cubic-bezier(.2,1.25,.3,1) 1.45s both,cm-lead 8s ease-in-out 5s infinite}
.cosm.go mask .cm-chief{animation:cm-drop 1.05s cubic-bezier(.2,1.25,.3,1) 1.45s both,cm-lead-m 8s ease-in-out 5s infinite}
.cosm.sm.go .cm-left{animation:cm-left 1s cubic-bezier(.16,.9,.2,1) .28s both}
.cosm.sm.go .cm-right{animation:cm-right 1s cubic-bezier(.16,.9,.2,1) .46s both}
.cosm.sm.go > .cm-chief,.cosm.sm.go mask .cm-chief{animation:cm-drop 1.05s cubic-bezier(.2,1.25,.3,1) 1.45s both}
@keyframes cm-top{from{opacity:0;transform:translate(0,-46px)}}
@keyframes cm-left{from{opacity:0;transform:translate(-58px,33px)}}
@keyframes cm-right{from{opacity:0;transform:translate(58px,33px)}}
@keyframes cm-drop{0%{opacity:0;transform:translate(0,-64px)}55%{opacity:1}100%{opacity:1;transform:none}}
@keyframes cm-fade{to{opacity:0}}
@keyframes cm-greet{0%,100%{filter:none}40%{filter:brightness(1.8) drop-shadow(0 0 5px rgba(237,235,242,.7))}}
@keyframes cm-nod{0%,14%,30%,100%{filter:none}20%{filter:brightness(1.7) drop-shadow(0 0 4px rgba(237,235,242,.6))}}
@keyframes cm-lead{0%,100%{translate:0 0;filter:none}6%,12%{translate:0 -7px;filter:drop-shadow(0 0 7px #9B7BFF)}20%{translate:0 0;filter:none}}
@keyframes cm-lead-m{0%,20%,100%{translate:0 0}6%,12%{translate:0 -7px}}
.h-eyebrow [data-cos]{width:26px;height:26px}
@media (prefers-reduced-motion:reduce){
  .cosm *{animation:none!important}
  .cosm .cm-back{display:none}
  .cosm:not(.go) .cm-left,.cosm:not(.go) .cm-right,.cosm:not(.go) > .cm-chief{opacity:1}
}

/* ---------- the Chief of Staff phone: its real screens, drawn in the page. used on Home and on its own page ---------- */
.phone{--soft:var(--muted);--lilac:var(--gold-bright);position:relative;flex:0 0 auto;width:392px;height:max-content;padding:12px;border-radius:60px;text-align:left;
  background:linear-gradient(160deg,#3E3B48,#0E0E12);box-shadow:0 0 0 1px rgba(255,255,255,.18),0 50px 90px -20px #000}
.screen{border-radius:48px;background:linear-gradient(180deg,#131318,#08080A);padding:22px 20px 26px}
.sbar{display:flex;justify-content:space-between;font-size:14px;color:var(--muted-2);padding:0 14px 20px}
.greet{margin:0 0 20px 6px;font-size:28px;font-weight:600;color:var(--text)}
.ptile{position:relative;display:block;margin:0 0 14px;padding:21px 22px 19px;border-radius:26px;border:1px solid var(--line)}
.ptile h4{margin:0 0 4px;font-size:21px;font-weight:600}
.ptile p{margin:0;font-size:15.5px;color:var(--soft)}
.ptile.chome{background:linear-gradient(140deg,rgba(255,255,255,.07),rgba(255,255,255,.03))}
.ptile.biz{background:linear-gradient(140deg,rgba(123,77,255,.3),rgba(255,255,255,.03))}
.ptile.ask{background:linear-gradient(140deg,rgba(255,255,255,.09),rgba(255,255,255,.03))}
.ptile .badge{position:absolute;top:19px;right:19px;min-width:28px;height:28px;padding:0 8px;border-radius:14px;background:var(--clay);color:#08080A;
  font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center}
.ptile .q{margin-top:12px;padding:11px 14px;border-radius:14px;background:rgba(0,0,0,.45);font-size:14.5px;color:var(--soft)}
.ptile .q img{width:18px;height:18px;vertical-align:-3px;margin-right:6px}
.pback{margin:0 0 4px 6px;font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-bright)}
.need{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 12px;margin:0 0 12px;padding:16px 18px;border-radius:22px;border:1px solid var(--line);background:rgba(255,255,255,.035)}
.need span{grid-column:1/-1;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
.need b{font-size:16.5px;font-weight:600;line-height:1.3;color:var(--text)}
.need i{font-style:normal;padding:7px 14px;border-radius:999px;background:#FFFFFF;font-size:13px;font-weight:600;color:#08080A}
.need.red{border-color:rgba(255,143,163,.5);background:rgba(255,143,163,.08)}
.need.red span{color:var(--clay)}
.need.yn{border-color:rgba(155,123,255,.45);background:rgba(123,77,255,.12)}
.need.yn span{color:var(--gold-bright)}
.brief{margin:0 0 14px;padding:16px 20px;border-radius:26px;background:rgba(255,255,255,.035);border:1px solid var(--line)}
.bt{display:flex;justify-content:space-between;margin-bottom:12px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
/* three equal columns with a hairline between them; a label never wraps */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.stats > div{padding:0 0 0 14px;border-left:1px solid var(--line)}
.stats > div:first-child{padding-left:0;border-left:0}
.stats b{display:block;font-size:26px;font-weight:600;line-height:1.1;color:var(--text)}
.stats span{display:block;margin-top:4px;font-size:13.5px;line-height:1.25;color:var(--soft);white-space:nowrap}
.stats div:last-child b{color:var(--lilac)}
@media (max-width:980px){.stats span{font-size:12.5px}.stats > div{padding-left:12px}}
.play{display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:26px;background:linear-gradient(120deg,rgba(123,77,255,.25),rgba(255,255,255,.03));border:1px solid rgba(182,156,255,.32)}
.play i{position:relative;flex:0 0 auto;width:32px;height:32px;border-radius:50%;background:#F5F4F7}
.play i::after{content:"";position:absolute;left:13px;top:10px;border-left:9px solid #121217;border-top:6px solid transparent;border-bottom:6px solid transparent}
.play b{display:block;font-size:14.5px;font-weight:600;color:var(--text)}
.play span{display:block;font-size:12.5px;color:var(--soft)}
@media (max-width:900px){
  .phone{width:310px;border-radius:50px}
  .screen{border-radius:39px}
}

/* ---------- the Mosaic Measure mark: the tape pulls out of the case ----------
   The whole tape (blade, marks, hook) sits under the case and is cut off at the case's mouth, so wound in
   nothing violet shows. On .go it runs a touch past its length and eases back. It ends on the locked logo */
.tape{display:block;width:100%;height:100%;overflow:visible}
.tape:not(.go) .t-blade{transform:translate(43.44px,-25.08px)}
.tape.go .t-blade{animation:tp-pull 1.6s cubic-bezier(.3,.7,.3,1) .35s both}
@keyframes tp-pull{0%{transform:translate(43.44px,-25.08px)}64%{transform:translate(-3.2px,1.85px)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){
  .tape .t-blade,.tape .t-ticks{animation:none!important;transform:none!important}
}
.h-eyebrow [data-tape]{display:inline-block;width:30px;height:30px;line-height:0}

/* ---------- the header: the Mosaic logo is always there, and each product carries its own mark ----------
   Nothing in the header comes and goes. Only the smoked glass fades in once you scroll */
.nav-links a{display:inline-flex;align-items:center;gap:11px}
.nav-links a,.nav-links a:hover,.nav-links a[aria-current]{padding:10px 16px;font-size:18px}
.nav-links a img{display:block;flex:0 0 auto;width:32px;height:32px;opacity:.86;transition:opacity .2s,transform .25s cubic-bezier(.2,.8,.25,1)}
.nav-links a:hover img,.nav-links a[aria-current] img{opacity:1}
.nav-links a:hover img{transform:translateY(-2px)}
.nav-links a[aria-current]{box-shadow:inset 0 0 0 1px rgba(182,156,255,.38)}
/* the one button in the header is violet, like every lit part on the site */
.nav-links a.nav-cta,.nav-links a.nav-cta:hover,.nav-links a.nav-cta[aria-current]{padding:11px 24px;font-weight:600;color:#08080A;
  background:linear-gradient(135deg,#C9B6FF,#9B7BFF);box-shadow:0 10px 30px -10px rgba(155,123,255,.9)}
.nav-links a.nav-cta:hover{box-shadow:0 14px 36px -10px rgba(155,123,255,1)}
/* a page that opens with its own big logo does not repeat the Mosaic logo in the header. the links stay on the right */
body:has([data-hero-logo]) .nav .brand{display:none}
.nav-links{margin-left:auto}
.nav-sep{flex:0 0 auto;width:1px;height:22px;margin:0 8px;background:var(--line-strong)}
/* the drop in belongs to the phone menu opening. on a wide screen the links are a row that never opens, so pointing at one must not replay it on the others */
@media (min-width:981px){.nav-links.is-open a{animation:none}}
/* seven links and a button: a name never wraps, and the row tightens in steps as the window narrows.
   below 1500 the word beside the header cube goes (the cube still links home) so the row has room */
.nav-links a{white-space:nowrap}
@media (max-width:1500px){.nav .brand-word{display:none}.nav-links a{gap:8px}.nav-links a,.nav-links a:hover,.nav-links a[aria-current]{padding:9px 11px;font-size:16px}.nav-links a img{width:26px;height:26px}.nav-sep{margin:0 4px}}
@media (max-width:1140px){.nav-links a{gap:6px}.nav-links a,.nav-links a:hover,.nav-links a[aria-current]{padding:8px 7px;font-size:15px}.nav-links a img{width:22px;height:22px}.nav-links a.nav-cta,.nav-links a.nav-cta:hover,.nav-links a.nav-cta[aria-current]{padding:9px 16px}.nav-sep{margin:0 2px}}
@media (max-width:980px){
  .nav-links{margin-left:0}
  .nav-toggle{margin-left:auto}
  .nav-links a,.nav-links a:hover,.nav-links a[aria-current]{padding:12px 16px;font-size:17px}
  .nav-links a img{width:28px;height:28px}.nav-sep{width:auto;height:1px;margin:6px 8px}
  .nav-links a.nav-cta,.nav-links a.nav-cta:hover,.nav-links a.nav-cta[aria-current]{padding:13px 16px}
}

/* ---------- the Mosaic cube, assembling: used in Home's logo and the Mosaic Custom logo ---------- */
/* each piece flies in from its own side and seats. every few seconds a ripple runs through them */
.h-cube .pc{animation:h-asm 1.5s cubic-bezier(.16,.9,.2,1) calc(.15s + var(--i)*.09s) both,h-pop 9s ease-in-out calc(3s + var(--i)*.12s) infinite}
@keyframes h-asm{from{opacity:0;transform:translate(calc(var(--dx)*46),calc(var(--dy)*46 - 26px))}}
@keyframes h-pop{0%,86%,100%{translate:0 0}92%{translate:calc(var(--dx)*2.4) calc(var(--dy)*2.4)}}
.h-cube .pc.v{animation:h-asm 1.5s cubic-bezier(.16,.9,.2,1) 1.5s both,h-lift 9s ease-in-out 3s infinite}
@keyframes h-lift{0%,70%,100%{translate:0 0;filter:none}82%,90%{translate:0 -7px;filter:drop-shadow(0 0 5px #9B7BFF)}}
@media (prefers-reduced-motion:reduce){
  .h-cube .pc,.h-cube .pc.v{animation:none}
}

/* ---------- a launch tag: a small outlined pill with a lit dot. used wherever Chief of Staff is named ---------- */
.soon{display:inline-flex;align-items:center;gap:9px;padding:7px 14px 7px 12px;border-radius:999px;border:1px solid rgba(182,156,255,.5);background:rgba(155,123,255,.1);
  font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;line-height:1;white-space:nowrap;color:var(--gold-bright)}
.soon::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--violet);box-shadow:0 0 8px 1px rgba(155,123,255,.9)}
/* the same tag at a size that reads from across a card */
.soon.big{gap:15px;padding:17px 32px 17px 26px;border-width:1.5px;background:rgba(155,123,255,.14);font-size:clamp(18px,1.75vw,26px);letter-spacing:.18em}
.soon.big::before{width:13px;height:13px;box-shadow:0 0 14px 2px rgba(155,123,255,.95)}

/* ---------- the Mosaic Cyber mark, built in front of you (site.js Mosaic.rook) ----------
   The base lands, then the body, the collar and the battlements stack onto it. The violet keyhole then
   draws itself and lights. After that the keyhole lights again every 8 seconds */
[data-rook]{display:inline-block;line-height:0}
.rookm{display:block;width:100%;height:100%;overflow:visible}
.rookm polygon,.rookm .rk-key{fill:none;stroke-width:2.4;stroke-linejoin:round}
.rookm .rk-glow{fill:none;stroke:#9B7BFF;stroke-width:3.4;filter:blur(2.2px);opacity:0}
.rookm:not(.go) polygon,.rookm:not(.go) .rk-key{opacity:0}
.rookm.go .rk-base{animation:rk-up .7s cubic-bezier(.16,.9,.2,1) .1s both}
.rookm.go .rk-body{animation:rk-down .7s cubic-bezier(.16,.9,.2,1) .35s both}
.rookm.go .rk-collar{animation:rk-down .7s cubic-bezier(.16,.9,.2,1) .6s both}
.rookm.go .rk-batt{animation:rk-down .8s cubic-bezier(.2,1.25,.3,1) .85s both}
.rookm.go .rk-key{stroke-dasharray:1.06 1;animation:rk-draw .9s ease 1.6s both}
.rookm.go .rk-glow{animation:rk-lit 1.1s ease 2.4s,rk-lit 8s ease-in-out 6s infinite}
@keyframes rk-up{from{opacity:0;transform:translateY(16px)}}
@keyframes rk-down{from{opacity:0;transform:translateY(-26px)}}
@keyframes rk-draw{from{stroke-dashoffset:1.06;opacity:1}to{stroke-dashoffset:0;opacity:1}}
@keyframes rk-lit{0%,24%,100%{opacity:0}10%{opacity:.95}}
@media (prefers-reduced-motion:reduce){
  .rookm polygon,.rookm .rk-key{animation:none!important;opacity:1!important;stroke-dasharray:none!important}
  .rookm .rk-glow{animation:none!important}
}

/* the Mosaic Custom mark (data-tile): the Hand Cut Tile. the violet piece first, the shards close up around it, it lights */
.tilem{display:block;width:100%;height:100%;overflow:visible}
.tilem polygon{transform-box:fill-box;transform-origin:center}
.tilem .tl-sh,.tilem .tl-mid{fill:none;stroke-width:2.6;stroke-linejoin:round}
.tilem .tl-mid{fill:#9B7BFF;fill-opacity:.5}
.tilem .tl-glow{fill:#9B7BFF;filter:blur(5px);opacity:0}
.tilem:not(.go) .tl-sh,.tilem:not(.go) .tl-mid{opacity:0}
.tilem.go .tl-mid{animation:tl-first .6s cubic-bezier(.2,.8,.25,1) .15s both,tl-light 1.5s ease 2.1s,tl-light8 8s ease-in-out 6s infinite}
.tilem.go .tl-sh{animation:tl-join 1s cubic-bezier(.2,.8,.25,1) calc(.8s + var(--i)*.14s) both}
.tilem.go .tl-glow{animation:tl-lit 1.5s ease 2.1s,tl-lit8 8s ease-in-out 6s infinite}
@keyframes tl-first{from{opacity:0;transform:scale(.5)}}
@keyframes tl-join{from{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--r))}}
@keyframes tl-light{0%,100%{fill-opacity:.5}35%{fill-opacity:.95}}
@keyframes tl-light8{0%,24%,100%{fill-opacity:.5}10%{fill-opacity:.95}}
@keyframes tl-lit{0%,100%{opacity:0}35%{opacity:.85}}
@keyframes tl-lit8{0%,24%,100%{opacity:0}10%{opacity:.8}}
@media (prefers-reduced-motion:reduce){
  .tilem polygon{animation:none!important}
  .tilem .tl-sh,.tilem .tl-mid{opacity:1!important}
}

/* ---------- phones: everything you tap is at least 44px tall, and the small product frames keep their header on one line ---------- */
@media (max-width:820px){
  .h-link{min-height:44px}
  .h-card .h-link{min-height:0}
  .foot-links{gap:0 22px}
  .foot-links a,.foot-base a{display:inline-flex;align-items:center;min-height:44px;font-size:15px}
  .nav-links a{min-height:46px}
}
.foot-legal{display:inline-flex;flex-wrap:wrap;gap:0 22px}

/* ---------- a product at a glance, on the Measure and Logistics pages: icon tiles with one short line, big facts, chips ---------- */
.rv-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:34px 0 0;padding:0;list-style:none}
.rv-tiles li{display:flex;align-items:center;gap:18px;padding:22px 24px;border-radius:22px;background:linear-gradient(180deg,#1C1B22,#0E0E12);border:1px solid var(--line-strong)}
.m-ic{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:16px;background:rgba(155,123,255,.14);border:1px solid rgba(182,156,255,.35)}
.m-ic svg{width:27px;height:27px;stroke:var(--gold-bright);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rv-tiles b{display:block;font-weight:600;font-size:clamp(1.1rem,1.45vw,1.35rem);letter-spacing:-.02em;color:#FFFFFF}
.rv-tiles div span{display:block;margin-top:4px;font-size:15.5px;font-weight:300;line-height:1.35;color:var(--muted)}
.rv-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:30px 0 0;padding:0;list-style:none;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong)}
.rv-stats li{padding:26px clamp(18px,2.6vw,40px)}
.rv-stats li + li{border-left:1px solid var(--line-strong)}
.rv-stats li:first-child{padding-left:0}
.rv-stats b{display:block;font-weight:600;font-size:clamp(1.7rem,3vw,2.7rem);letter-spacing:-.04em;line-height:1.05;color:var(--violet)}
.rv-stats span{display:block;margin-top:8px;font-size:16px;font-weight:300;color:var(--muted)}
.rv-also{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:28px 0 0}
.rv-also .lbl{margin-right:10px;font-size:13px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-bright)}
.rv-chip{padding:11px 20px;border-radius:999px;border:1px solid rgba(182,156,255,.45);background:rgba(155,123,255,.1);font-size:15.5px;font-weight:600;color:#FFFFFF;white-space:nowrap}
@media (max-width:900px){
  .rv-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rv-stats{grid-template-columns:1fr}
  .rv-stats li{padding-left:0}
  .rv-stats li + li{border-left:0;border-top:1px solid var(--line-strong)}
}
@media (max-width:600px){.rv-tiles{grid-template-columns:1fr}}
/* eight tiles sit four across, the icon over the words */
.rv-tiles.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.rv-tiles.four li{flex-direction:column;align-items:flex-start;gap:16px;padding:22px 22px 24px}
@media (max-width:1180px){.rv-tiles.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.rv-tiles.four{grid-template-columns:1fr}}

/* ---------- the Logistics truck loads up once: the cab draws, the box draws, then the load fills from the floor.
   inside a card that rises into view it waits for the card ---------- */
.l-mk svg *{transform-box:fill-box}
.l-mk .lg-cab,.l-mk .lg-edge{stroke-dasharray:1;animation:lg-draw .6s ease-out both}
.l-mk .lg-edge{animation-delay:.35s}
.l-mk .lg-win,.l-mk .lg-wh{animation:lg-in .35s ease-out both;animation-delay:.3s}
.l-mk .lg-load{transform-origin:50% 100%;animation:lg-fill .55s cubic-bezier(.2,.8,.25,1) both;animation-delay:.85s}
@keyframes lg-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes lg-in{from{opacity:0}}
@keyframes lg-fill{from{opacity:0;transform:scaleY(0)}}
@media (prefers-reduced-motion:reduce){.l-mk svg *{animation:none!important}}
[data-rise]:not(.in) .l-mk svg *{animation-play-state:paused}

/* ---------- the Glidepath mark builds itself once (Reach Out): the person, then the lines, then the agents, then their eyes.
   inside a card that rises into view it waits for the card ---------- */
.g-mk svg *{transform-box:fill-box;transform-origin:center}
.g-mk .ctr{animation:gp-c .5s cubic-bezier(.2,.8,.25,1) both}
.g-mk .ln{stroke-dasharray:1;animation:gp-l .45s ease-out both;animation-delay:calc(.3s + var(--i)*.09s)}
.g-mk .bot{animation:gp-b .35s cubic-bezier(.2,.8,.25,1) both;animation-delay:calc(.6s + var(--i)*.09s)}
.g-mk .eyes{animation:gp-e .22s ease-out both;animation-delay:calc(1.25s + var(--i)*.09s)}
@keyframes gp-c{from{opacity:0;transform:scale(.4)}}
@keyframes gp-l{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes gp-b{from{opacity:0;transform:scale(.3)}}
@keyframes gp-e{from{transform:scaleY(.1)}}
@media (prefers-reduced-motion:reduce){.g-mk svg *{animation:none!important}}
[data-rise]:not(.in) .g-mk svg *{animation-play-state:paused}

/* ---------- the Shield mark builds itself once (Raise the Shield), then a light crosses it. inside a part that rises into view it waits ---------- */
.s-mk svg *{transform-box:fill-box;transform-origin:center}
.s-mk .out{stroke-dasharray:1;stroke-linecap:round;animation:sh-o .9s ease-out both}
.s-mk .inn{animation:sh-i .45s cubic-bezier(.2,.8,.25,1) both;animation-delay:.7s}
.s-mk .em{stroke-dasharray:1;animation:sh-m .5s ease-out both;animation-delay:1.1s}
.s-mk .shine{animation:sh-s .9s ease-in-out both;animation-delay:1.75s}
@keyframes sh-o{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes sh-i{from{opacity:0;transform:scale(.6)}}
@keyframes sh-m{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes sh-s{0%{opacity:1;transform:translateX(0)}95%{opacity:1;transform:translateX(150px)}100%{opacity:0;transform:translateX(150px)}}
[data-rise]:not(.in) .s-mk svg *{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.s-mk svg *{animation:none!important}}