/* mosaicmeasure.com. The Mosaic house look: black ground, one violet, Sora, type hard left, open rows on hairlines */
:root{--bg:#000;--alt:#08080A;--raised:#131318;--line:rgba(255,255,255,.09);--line-strong:rgba(255,255,255,.16);
  --text:#F5F4F7;--muted:#CFCBD8;--muted-2:#9994A6;--violet:#9B7BFF;--lilac:#B69CFF;--clay:#FF8FA3;
  --sans:'Sora',system-ui,-apple-system,'Segoe UI',sans-serif;--band:clamp(60px,6.2vw,98px);--gut:clamp(22px,5vw,96px)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block}
.wide{width:100%;max-width:1760px;margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
@media (min-width:900px){html{zoom:.9}}

/* header 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)}
.nav .wide{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:16px;padding-bottom:16px}
.brand{display:inline-flex;align-items:center;gap:12px}
.brand img{width:46px;height:46px}
.brand .wm{font-size:20px;letter-spacing:.2em;line-height:1;color:var(--text)}
.brand .wm b{font-weight:400;color:var(--violet)}
.brand .pn{display:block;margin-top:5px;font-size:10px;letter-spacing:.42em;color:var(--muted)}
.links{display:flex;align-items:center;gap:4px}
.links a{padding:9px 13px;border-radius:999px;font-size:15px;font-weight:500;color:var(--muted);transition:color .2s,background .2s}
.links a:hover{color:var(--text);background:rgba(255,255,255,.06)}
.pill{display:inline-flex;align-items:center;justify-content:center;padding:16px 30px;border-radius:999px;background:#FFFFFF;color:#08080A;font-weight:600;font-size:16px;
  box-shadow:0 10px 30px -10px rgba(182,156,255,.7);transition:transform .2s,box-shadow .2s}
.pill:hover{transform:translateY(-1px);box-shadow:0 14px 34px -10px rgba(182,156,255,.9)}
.links .pill,.links .pill:hover{margin-left:8px;padding:10px 18px;font-size:14.5px;color:#08080A;background:#FFFFFF}
.menu{display:none}

/* type */
.eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 22px;font-size:13px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--lilac)}
.eyebrow img{width:26px;height:26px}
.display{margin:0 0 24px;font-weight:600;font-size:clamp(2.3rem,4.6vw,5rem);letter-spacing:-.045em;line-height:1;color:#FFFFFF;text-wrap:balance}
.display span,.h2 span{color:var(--violet)}
.h2{margin:0 0 20px;font-weight:600;font-size:clamp(2rem,3.8vw,4.1rem);letter-spacing:-.04em;line-height:1.04;color:#FFFFFF;text-wrap:balance}
.h3{margin:0 0 10px;font-weight:600;font-size:clamp(1.35rem,2vw,1.8rem);letter-spacing:-.025em;line-height:1.15;color:#FFFFFF}
.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)}
.body{margin:0;font-size:17px;line-height:1.6;color:var(--muted)}
.link{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:17px;color:var(--lilac);transition:color .2s,gap .2s}
.link::after{content:"";width:8px;height:13px;background:currentColor;clip-path:polygon(0 0,28% 0,100% 50%,28% 100%,0 100%,72% 50%)}
.link:hover{color:#FFFFFF;gap:12px}
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:16px 30px;margin-top:36px}
.beta{display:inline-block;margin-left:10px;padding:3px 9px;border-radius:999px;border:1px solid rgba(182,156,255,.5);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;vertical-align:middle;color:var(--lilac)}

/* bands */
section{padding:var(--band) 0}
section.alt{background:var(--alt);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(34px,5vw,96px)}
.rows{margin:0;padding:0;list-style:none;border-top:1px solid var(--line-strong)}
.rows > li{border-bottom:1px solid var(--line-strong)}
.cols{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:clamp(24px,3.4vw,64px)}
.cols > *{padding-top:26px;border-top:1px solid var(--line-strong)}
.frame{border-radius:26px;background:linear-gradient(180deg,#1C1B22,#0E0E12);border:1px solid var(--line-strong);box-shadow:0 50px 90px -20px #000}
[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}

/* the opening: the lockup, the line, the review beside it */
.hero{position:relative;padding:clamp(40px,5vw,84px) 0 var(--band);overflow:hidden;
  background:radial-gradient(64vw 40vw at 12% 20%,rgba(123,77,255,.34),transparent 68%)}
.lockup{--wm:clamp(2.3rem,4.5vw,4.8rem);display:flex;align-items:center;gap:calc(var(--wm)*.4);margin:0 0 calc(var(--wm)*.55)}
.lockup-mk{flex:0 0 auto;width:calc(var(--wm)*2.1);height:calc(var(--wm)*2.1);margin:calc(var(--wm)*-.2);filter:drop-shadow(0 30px 40px rgba(0,0,0,.55))}
.lockup .lk{animation:lk-in .9s ease 1.5s both}
@keyframes lk-in{from{opacity:0;transform:translateX(-14px)}}
.lockup .lk{display:flex;flex-direction:column;align-items:flex-start}
.lockup .wm{font-size:var(--wm);letter-spacing:.2em;margin-right:-.2em;line-height:1;color:#FFFFFF}
.lockup .wm b{font-weight:400;color:var(--violet)}
.lockup .pn{margin:calc(var(--wm)*.22) 0 0 calc(var(--wm)*.09);font-size:calc(var(--wm)*.46);letter-spacing:.42em;line-height:1;color:var(--muted)}

/* the review, as the app shows it */
.review{width:min(100%,760px);justify-self:end;overflow:hidden}
.rv-bar{display:flex;align-items:center;gap:8px;padding:16px 24px;border-bottom:1px solid var(--line);font-size:14px;font-weight:600;color:var(--muted)}
.rv-bar i{width:11px;height:11px;border-radius:50%;background:#3E3B48}
.rv-bar b{margin-left:10px;font-weight:600;color:var(--text)}
.rv-bar span{margin-left:auto;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--lilac)}
.rv-in{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.rv-side{padding:18px 10px 18px 16px;border-right:1px solid var(--line)}
.rv-side p{margin:0 0 8px 10px;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2)}
.rv-side div{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:12px;font-size:15px;font-weight:600;color:var(--muted)}
.rv-side div.on{background:rgba(155,123,255,.18);color:#FFFFFF}
.rv-side div span{font-weight:400;color:var(--muted-2)}
.rv-main{padding:18px 26px 22px}
.rv-main p{margin:0 0 12px;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2)}
.rv-main ol{margin:0;padding:0;list-style:none}
.rv-main li{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);font-size:16px;line-height:1.4;color:#FFFFFF;
  opacity:0;transform:translateY(8px);transition:opacity .5s ease calc(.3s + var(--n)*.4s),transform .5s ease calc(.3s + var(--n)*.4s)}
.rv-main li:last-child{border-bottom:0}
.rv-main li i{margin-top:7px;width:9px;height:9px;border-radius:2px;background:var(--violet)}
.rv-main li.flag i{background:var(--clay)}
.rv-main li small{display:block;margin-top:3px;font-size:13px;color:var(--muted-2)}
.in .rv-main li{opacity:1;transform:none}

/* the menu: the base, then the five add-ons */
.menu-rows > li{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr) auto;gap:14px clamp(24px,4vw,72px);align-items:start;padding:24px 0}
.menu-rows .h3{margin:0}
.menu-rows .body{max-width:40em}
.menu-rows .tag{font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);white-space:nowrap}
.menu-rows .tag.base{color:var(--lilac)}
.menu-rows li.first{background:linear-gradient(90deg,rgba(123,77,255,.1),transparent 70%);margin:0 calc(var(--gut)*-1);padding-left:var(--gut);padding-right:var(--gut)}

/* the three steps */
.steps .h3{margin-top:14px}
.steps .n{display:inline-flex;gap:5px}
.steps .n i{width:22px;height:4px;border-radius:999px;background:rgba(255,255,255,.14)}
.steps .n i.on{background:var(--violet)}
.steps .out{margin:18px 0 0;font-size:17px;font-weight:600;color:var(--lilac)}

/* the close */
.close{position:relative;overflow:hidden;background:radial-gradient(70vw 460px at 50% 112%,rgba(123,77,255,.34),transparent 70%)}
.close .h2 span{display:block}
.foot{padding:34px 0 40px;border-top:1px solid var(--line)}
.foot .wide{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 30px}
.foot .by{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted)}
.foot .by img{width:22px;height:22px}
.foot .by a{color:var(--text)}
.foot nav{display:flex;flex-wrap:wrap;gap:6px 26px;font-size:14px;color:var(--muted)}
.foot nav a:hover{color:var(--text)}

@media (max-width:1100px){
  .menu-rows > li{grid-template-columns:minmax(0,1fr) auto}
  .menu-rows .body{grid-column:1/-1}
}
@media (max-width:980px){
  .links{display:none}
  .menu{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:14px;border:1px solid var(--line-strong);background:rgba(255,255,255,.04);color:var(--text)}
  .links.open{position:absolute;right:22px;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)}
  .links.open a{padding:12px 16px;font-size:16px;border-radius:12px}
  .links.open .pill{margin:6px 0 0;text-align:center}
}
@media (max-width:900px){
  .split,.cols{grid-template-columns:1fr}
  .cols{gap:0}.cols > *{padding:24px 0}
  .review{justify-self:stretch}
  .rv-in{grid-template-columns:1fr}
  .rv-side{border-right:0;border-bottom:1px solid var(--line)}
  .lockup{--wm:clamp(1.9rem,8.4vw,3.2rem)}
  .menu-rows > li{grid-template-columns:1fr;padding:28px 0}
  .menu-rows li.first{margin:0 calc(var(--gut)*-1)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-rise]{opacity:1;transform:none;transition:none}
  .rv-main li{opacity:1;transform:none;transition:none}
}

/* what the review holds: name, then one line */
.rv-row{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);gap:8px clamp(20px,3vw,48px);padding:18px 0}
.rv-row b{font-weight:600;font-size:clamp(1.1rem,1.4vw,1.3rem);letter-spacing:-.02em;color:#FFFFFF}
.rv-row span{font-size:16px;font-weight:300;line-height:1.5;color:var(--muted)}
@media (max-width:600px){.rv-row{grid-template-columns:1fr}}

/* ---------- 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}
.tape.idle.go .t-blade{animation:tp-pull 1.6s cubic-bezier(.3,.7,.3,1) .35s both,tp-tug 9s ease-in-out 5s infinite}
.tape.idle.go .t-ticks{animation:tp-lit 9s ease-in-out 5s infinite}
@keyframes tp-pull{0%{transform:translate(43.44px,-25.08px)}64%{transform:translate(-3.2px,1.85px)}100%{transform:none}}
@keyframes tp-tug{0%,100%{translate:0 0}5%{translate:6.3px -3.64px}13%{translate:0 0}}
@keyframes tp-lit{0%,100%{filter:none}9%{filter:drop-shadow(0 0 2px #C2ADFF)}}
@media (prefers-reduced-motion:reduce){
  .tape .t-blade,.tape .t-ticks{animation:none!important;transform:none!important}
}
@media (prefers-reduced-motion:reduce){.lockup .lk{animation:none}}

/* one logo at a time: the header's logo waits until the big one at the top has scrolled away */
.nav .brand{transition:opacity .35s ease}
.nav:not(.nav-show) .brand{opacity:0;pointer-events:none}
.every{display:flex;flex-wrap:wrap;gap:10px 34px;margin:26px 0 0;padding:0;list-style:none;font-size:16px;color:var(--muted)}
.every b{font-weight:600;color:var(--lilac)}