@font-face{font-family:"Inter Tight";font-weight:100 900;src:url(fonts/InterTight.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:100 800;src:url(fonts/JetBrainsMono.woff2) format("woff2")}

/* the glow: five small, feathered orbs drifting slowly. Cards are windows onto them; the gaps between cards stay dark. */
@property --p1x{syntax:'<percentage>';inherits:true;initial-value:14%}
@property --p1y{syntax:'<percentage>';inherits:true;initial-value:70%}
@property --p2x{syntax:'<percentage>';inherits:true;initial-value:42%}
@property --p2y{syntax:'<percentage>';inherits:true;initial-value:22%}
@property --p3x{syntax:'<percentage>';inherits:true;initial-value:70%}
@property --p3y{syntax:'<percentage>';inherits:true;initial-value:62%}
@property --p4x{syntax:'<percentage>';inherits:true;initial-value:88%}
@property --p4y{syntax:'<percentage>';inherits:true;initial-value:24%}
@property --p5x{syntax:'<percentage>';inherits:true;initial-value:30%}
@property --p5y{syntax:'<percentage>';inherits:true;initial-value:92%}

:root{
  color-scheme:dark;
  --h:152; --c:.2;
  /* orb colours; site.js swaps these per palette */
  --o1:oklch(.74 .2 152); --o2:oklch(.74 .15 200); --o3:oklch(.64 .22 292); --o4:oklch(.68 .18 248); --o5:oklch(.82 .2 128);
  --g:oklch(.86 var(--c) var(--h));
  --g-mid:oklch(.66 calc(var(--c)*.9) var(--h));
  --g-deep:oklch(.34 .09 var(--h));
  --g-hi:oklch(.95 .09 var(--h));
  --ink:#04100a;
  --text:#F2F5F3; --t2:rgba(236,244,239,.7); --t3:rgba(236,244,239,.46);
  --gap:12px; --r:24px;
  --expo:cubic-bezier(.16,1,.3,1);
  --fw:100vw; --fh:100vh;
  animation:o1 58s ease-in-out infinite,o2 74s ease-in-out infinite,o3 66s ease-in-out infinite,o4 82s ease-in-out infinite,o5 70s ease-in-out infinite;
}
@keyframes o1{0%{--p1x:14%;--p1y:70%}25%{--p1x:34%;--p1y:40%}50%{--p1x:22%;--p1y:18%}75%{--p1x:8%;--p1y:44%}100%{--p1x:14%;--p1y:70%}}
@keyframes o2{0%{--p2x:42%;--p2y:22%}25%{--p2x:66%;--p2y:36%}50%{--p2x:52%;--p2y:64%}75%{--p2x:30%;--p2y:48%}100%{--p2x:42%;--p2y:22%}}
@keyframes o3{0%{--p3x:70%;--p3y:62%}25%{--p3x:50%;--p3y:84%}50%{--p3x:74%;--p3y:90%}75%{--p3x:90%;--p3y:70%}100%{--p3x:70%;--p3y:62%}}
@keyframes o4{0%{--p4x:88%;--p4y:24%}25%{--p4x:70%;--p4y:12%}50%{--p4x:58%;--p4y:34%}75%{--p4x:80%;--p4y:50%}100%{--p4x:88%;--p4y:24%}}
@keyframes o5{0%{--p5x:30%;--p5y:92%}25%{--p5x:12%;--p5y:74%}50%{--p5x:40%;--p5y:62%}75%{--p5x:54%;--p5y:88%}100%{--p5x:30%;--p5y:92%}}
@media (prefers-reduced-motion:reduce){:root{animation:none}}

*{box-sizing:border-box;margin:0;padding:0}
html{background:#030504}
body{min-height:100vh;color:var(--text);font-family:"Inter Tight",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace}
.grain{position:fixed;inset:0;z-index:50;pointer-events:none;opacity:.3;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* ── glass: a window onto the field. --ox/--oy place this card within it (set by site.js). ── */
.glass{position:relative;isolation:isolate;
  background:
    linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,0) 46%),
    radial-gradient(circle calc(var(--fw) * 0.19) at var(--p1x) var(--p1y),color-mix(in oklab,var(--o1) 42.00%,transparent) 0%,color-mix(in oklab,var(--o1) 39.69%,transparent) 10%,color-mix(in oklab,var(--o1) 33.48%,transparent) 20%,color-mix(in oklab,var(--o1) 25.22%,transparent) 30%,color-mix(in oklab,var(--o1) 16.96%,transparent) 40%,color-mix(in oklab,var(--o1) 10.18%,transparent) 50%,color-mix(in oklab,var(--o1) 5.46%,transparent) 60%,color-mix(in oklab,var(--o1) 2.61%,transparent) 70%,color-mix(in oklab,var(--o1) 1.12%,transparent) 80%,color-mix(in oklab,var(--o1) 0.43%,transparent) 90%,transparent 100%),
    radial-gradient(circle calc(var(--fw) * 0.15) at var(--p2x) var(--p2y),color-mix(in oklab,var(--o2) 38.00%,transparent) 0%,color-mix(in oklab,var(--o2) 35.91%,transparent) 10%,color-mix(in oklab,var(--o2) 30.29%,transparent) 20%,color-mix(in oklab,var(--o2) 22.81%,transparent) 30%,color-mix(in oklab,var(--o2) 15.34%,transparent) 40%,color-mix(in oklab,var(--o2) 9.21%,transparent) 50%,color-mix(in oklab,var(--o2) 4.94%,transparent) 60%,color-mix(in oklab,var(--o2) 2.36%,transparent) 70%,color-mix(in oklab,var(--o2) 1.01%,transparent) 80%,color-mix(in oklab,var(--o2) 0.39%,transparent) 90%,transparent 100%),
    radial-gradient(circle calc(var(--fw) * 0.17) at var(--p3x) var(--p3y),color-mix(in oklab,var(--o3) 40.00%,transparent) 0%,color-mix(in oklab,var(--o3) 37.80%,transparent) 10%,color-mix(in oklab,var(--o3) 31.88%,transparent) 20%,color-mix(in oklab,var(--o3) 24.01%,transparent) 30%,color-mix(in oklab,var(--o3) 16.15%,transparent) 40%,color-mix(in oklab,var(--o3) 9.70%,transparent) 50%,color-mix(in oklab,var(--o3) 5.20%,transparent) 60%,color-mix(in oklab,var(--o3) 2.49%,transparent) 70%,color-mix(in oklab,var(--o3) 1.06%,transparent) 80%,color-mix(in oklab,var(--o3) 0.41%,transparent) 90%,transparent 100%),
    radial-gradient(circle calc(var(--fw) * 0.14) at var(--p4x) var(--p4y),color-mix(in oklab,var(--o4) 36.00%,transparent) 0%,color-mix(in oklab,var(--o4) 34.02%,transparent) 10%,color-mix(in oklab,var(--o4) 28.70%,transparent) 20%,color-mix(in oklab,var(--o4) 21.61%,transparent) 30%,color-mix(in oklab,var(--o4) 14.53%,transparent) 40%,color-mix(in oklab,var(--o4) 8.73%,transparent) 50%,color-mix(in oklab,var(--o4) 4.68%,transparent) 60%,color-mix(in oklab,var(--o4) 2.24%,transparent) 70%,color-mix(in oklab,var(--o4) 0.96%,transparent) 80%,color-mix(in oklab,var(--o4) 0.36%,transparent) 90%,transparent 100%),
    radial-gradient(circle calc(var(--fw) * 0.16) at var(--p5x) var(--p5y),color-mix(in oklab,var(--o5) 38.00%,transparent) 0%,color-mix(in oklab,var(--o5) 35.91%,transparent) 10%,color-mix(in oklab,var(--o5) 30.29%,transparent) 20%,color-mix(in oklab,var(--o5) 22.81%,transparent) 30%,color-mix(in oklab,var(--o5) 15.34%,transparent) 40%,color-mix(in oklab,var(--o5) 9.21%,transparent) 50%,color-mix(in oklab,var(--o5) 4.94%,transparent) 60%,color-mix(in oklab,var(--o5) 2.36%,transparent) 70%,color-mix(in oklab,var(--o5) 1.01%,transparent) 80%,color-mix(in oklab,var(--o5) 0.39%,transparent) 90%,transparent 100%),
    #0b0e0d;
  background-repeat:no-repeat;
  background-size:100% 100%,var(--fw) var(--fh),var(--fw) var(--fh),var(--fw) var(--fh),var(--fw) var(--fh),var(--fw) var(--fh),auto;
  background-position:0 0,var(--ox,0) var(--oy,0),var(--ox,0) var(--oy,0),var(--ox,0) var(--oy,0),var(--ox,0) var(--oy,0),var(--ox,0) var(--oy,0),0 0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 -1px 0 rgba(0,0,0,.35),0 20px 44px -22px rgba(0,0,0,.8),0 2px 6px rgba(0,0,0,.3)}
/* on pages that scroll, the orbs are pinned to the window and the cards slide over them */
.pinned .glass{background-attachment:scroll,fixed,fixed,fixed,fixed,fixed,scroll;background-position:0 0}
.pinned .tilt{transform:none}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:3;
  background:linear-gradient(140deg,rgba(255,255,255,.22),rgba(255,255,255,.05) 30%,rgba(255,255,255,.02) 60%,oklch(.86 var(--c) var(--h) / .16));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}

/* tilt: a slight lift toward the pointer, with a faint light under it */
.tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px));transition:transform .45s var(--expo),box-shadow .45s var(--expo);cursor:pointer}
.tilt:hover{--lift:-3px;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(0,0,0,.35),0 30px 54px -22px rgba(0,0,0,.9),0 4px 10px rgba(0,0,0,.35)}
.tilt::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;opacity:0;transition:opacity .4s;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%),oklch(.95 .08 var(--h) / .07),transparent 62%)}
.tilt:hover::after{opacity:1}
.tilt:not([data-href]){cursor:default}
.tilt:focus-visible{outline:2px solid var(--g);outline-offset:3px}

/* ── nav ── */
.nav{position:fixed;z-index:60;top:16px;left:0;right:0;margin:0 auto;width:var(--navw,min(1320px,calc(100vw - 48px)));height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 8px 0 22px;border-radius:999px}
.nav .brand{font-weight:600;font-size:15px}
.nav nav{display:flex;gap:26px;font-size:14px;color:var(--t2)}
.nav nav a:hover,.nav nav a.here{color:var(--text)}
.nav .right{display:flex;gap:8px;align-items:center}
.nav .cta{font-size:13.5px;font-weight:600;padding:9px 16px;border-radius:999px;background:var(--text);color:var(--ink)}
.nav .ghost{font-size:13.5px;font-weight:600;padding:9px 14px;border-radius:999px;color:var(--t2)}
.nav .ghost:hover{color:var(--text)}
.pal{display:flex;gap:7px;align-items:center;padding:0 8px}
.pal button{width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);opacity:.7;transition:transform .2s,opacity .2s}
.pal button:hover{opacity:1;transform:scale(1.15)}
.pal button.on{opacity:1;box-shadow:0 0 0 2px #0b0e0d,0 0 0 3.5px rgba(255,255,255,.85)}

/* ── shared pieces ── */
.num{font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:500;letter-spacing:-.06em;line-height:.9;
  background:linear-gradient(180deg,#fff 30%,rgba(255,255,255,.62));-webkit-background-clip:text;background-clip:text;color:transparent}
.num .cm{margin:0 -.16em 0 -.2em}
.num small{font-size:.42em;letter-spacing:-.02em}
.pill{display:inline-block;font-size:13px;font-weight:600;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.05)}
.pill:hover{background:rgba(255,255,255,.12)}
.pill.solid{background:linear-gradient(180deg,var(--g-hi),var(--g));color:var(--ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 6px 22px oklch(.86 var(--c) var(--h) / .3)}
.key{display:grid;place-items:center;font-weight:600;border-radius:14px;
  background:linear-gradient(180deg,#2c322f,#131715);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -3px 0 rgba(0,0,0,.5),0 7px 14px rgba(0,0,0,.55),0 0 0 1px #000}
.key.lit{background:linear-gradient(180deg,var(--g-hi),var(--g) 45%,var(--g-mid));color:var(--ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 -3px 0 oklch(.5 .14 var(--h)),0 7px 14px rgba(0,0,0,.55),0 0 0 1px #000,0 0 30px oklch(.86 var(--c) var(--h) / .45)}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tags span{font-size:13px;font-weight:500;padding:5px 10px;border-radius:9px;background:rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.14);color:var(--text)}
.phone{padding:7px;border-radius:40px;background:linear-gradient(150deg,#59605b,#161a18 30%,#090b0a);position:relative;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),inset 0 2px 1px rgba(255,255,255,.3),-24px 40px 70px rgba(0,0,0,.7)}
.phone img{display:block;width:100%;border-radius:33px}
.phone::after{content:"";position:absolute;inset:7px;border-radius:33px;background:linear-gradient(118deg,rgba(255,255,255,.2),rgba(255,255,255,.04) 26%,transparent 42%);pointer-events:none}
.tablet{padding:6px;border-radius:22px;background:linear-gradient(150deg,#59605b,#161a18 30%,#090b0a);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),-20px 30px 60px rgba(0,0,0,.65)}
.tablet img{display:block;width:100%;border-radius:17px}

/* tooltip */
.tip{position:fixed;z-index:80;left:0;top:0;pointer-events:none;opacity:0;transition:opacity .15s;padding:7px 11px;border-radius:10px;font-size:12.5px;white-space:nowrap;
  background:#101613;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 0 1px rgba(255,255,255,.08),0 12px 30px rgba(0,0,0,.6)}
.tip b{font-family:"JetBrains Mono",monospace;font-weight:500;color:var(--g)}
.tip.on{opacity:1}

/* monthly chart */
.chart{display:flex;align-items:stretch;gap:9px;position:relative}
.chart .yr{display:flex;flex-direction:column;min-width:0}
.chart .bars{flex:1;display:flex;align-items:flex-end;gap:2px}
.chart .bars i{flex:1;min-width:0;border-radius:3px 3px 1px 1px;background:rgba(255,255,255,.2);transform-origin:bottom;transition:filter .15s}
.chart .bars i.ai{background:linear-gradient(180deg,var(--g-hi),var(--g) 30%,var(--g-mid));box-shadow:0 0 12px oklch(.86 var(--c) var(--h) / .35)}
.chart .bars i:hover{filter:brightness(1.6)}
.chart .yl{font-size:11px;color:var(--t3);padding-top:7px;border-top:1px solid rgba(255,255,255,.1);margin-top:5px;display:flex;justify-content:space-between;gap:6px;white-space:nowrap}
.chart .yl b{font-weight:500;color:var(--t2);font-family:"JetBrains Mono",monospace;font-size:10.5px}
.chart .mark{position:absolute;top:0;bottom:26px;width:0;border-left:1px dashed oklch(.86 var(--c) var(--h) / .7);pointer-events:none}
.chart .mark span{position:absolute;right:8px;top:-2px;white-space:nowrap;font-size:11.5px;color:var(--g);text-align:right;line-height:1.3}
.grow .bars i{animation:grow .9s var(--expo) both;animation-delay:calc(var(--i) * 12ms + 250ms)}
@keyframes grow{from{transform:scaleY(0)}}

/* year heatmap */
.heat{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,auto);grid-template-columns:repeat(53,1fr);gap:3px}
.heat i{border-radius:2.5px;background:rgba(255,255,255,.07);aspect-ratio:1}
.heat i.l1{background:oklch(.42 .1 var(--h) / .8)}
.heat i.l2{background:oklch(.58 .15 var(--h))}
.heat i.l3{background:oklch(.75 var(--c) var(--h))}
.heat i.l4{background:var(--g-hi);box-shadow:0 0 8px var(--g)}
.heat i.x{visibility:hidden}
.heat i:hover{outline:1.5px solid #fff;outline-offset:1px}

/* linked devices: the real demo from mineralline.app in a frame, scaled to fit (see ml-live/) */
.livebox{position:relative;overflow:hidden}
.livebox iframe{display:block;border:0;width:1320px;height:500px;transform-origin:0 0;pointer-events:none;background:transparent}

/* ── subpages ── */
/* every page shares one fixed content width and scale (site.js sets --pw and --pz) */
.page{position:relative;z-index:10;width:var(--pw,calc(100vw - 48px));zoom:var(--pz,1);margin:0 auto;padding:96px 0 90px;display:flex;flex-direction:column;gap:var(--gap)}
.back{font-size:13.5px;color:var(--t2);padding:6px 2px;align-self:flex-start}
.back:hover{color:var(--text)}
.head{border-radius:30px;padding:40px 44px;overflow:hidden}
.head .kicker{font-size:14.5px;color:var(--t2)}
.head h1{font-weight:600;font-size:52px;line-height:1.02;letter-spacing:-.025em;margin-top:8px}
.head .sum{font-size:19px;line-height:1.42;color:var(--t2);max-width:640px;margin-top:16px}
.head .acts{display:flex;gap:8px;margin-top:26px;flex-wrap:wrap}
.cells{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.cell{border-radius:var(--r);padding:22px 22px 20px;height:124px;display:flex;flex-direction:column;justify-content:flex-start}
.cell .num{font-size:42px;height:42px;display:flex;align-items:flex-end;white-space:nowrap}
.cell .num.word{font-family:"Inter Tight",system-ui,sans-serif;font-weight:600;font-size:24px;letter-spacing:-.012em;line-height:1.1}
.cell p{font-size:13.5px;color:var(--t2);line-height:1.3;margin-top:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.panel{border-radius:var(--r);padding:30px 34px;overflow:hidden}
.panel h2{font-weight:600;font-size:23px;letter-spacing:-.012em}
.panel .lede{font-size:15.5px;color:var(--t2);line-height:1.5;margin-top:8px;max-width:720px}
.panel p{font-size:15.5px;color:var(--t2);line-height:1.55}
.cols{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap)}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.list{list-style:none;margin-top:16px}
.list li{padding:13px 0;border-top:1px solid rgba(255,255,255,.08);font-size:15.5px;line-height:1.5;color:var(--t2)}
.list li b{color:var(--text);font-weight:600}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:20px}
.step{border-radius:16px;padding:16px 16px 36px;min-height:138px;position:relative;background:rgba(255,255,255,.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.step b{display:block;font-size:16.5px;font-weight:600}
.step span{display:block;font-size:13.5px;color:var(--t2);line-height:1.42;margin-top:7px}
.step small{position:absolute;left:16px;bottom:13px;font-size:12px;color:var(--t3)}
.step.me{background:linear-gradient(180deg,var(--g-hi),var(--g) 50%,var(--g-mid));color:var(--ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 0 34px oklch(.86 var(--c) var(--h) / .3)}
.step.me span,.step.me small{color:rgba(4,16,10,.76)}
table.t{width:100%;border-collapse:collapse;margin-top:16px}
table.t th,table.t td{text-align:left;padding:12px 14px 12px 0;border-top:1px solid rgba(255,255,255,.08);font-size:15px}
table.t th{font-weight:500;color:var(--t3);font-size:13px;border-top:0}
table.t td{color:var(--t2)} table.t td:first-child{color:var(--text);font-weight:600}
table.t td.n{font-family:"JetBrains Mono",monospace;font-size:14px}
.note{font-size:13px;color:var(--t3);line-height:1.5;margin-top:16px}
.shots{display:flex;gap:22px;align-items:flex-end;margin-top:24px;padding-bottom:6px}
.shots .phone{width:168px;flex:none;border-radius:30px;padding:5px}
.shots .phone img{border-radius:25px}.shots .phone::after{inset:5px;border-radius:25px}
.shots .tablet{flex:1;min-width:0}
@media (max-width:900px){
  .nav nav{display:none}
  .cells{grid-template-columns:repeat(2,minmax(0,1fr))} .cols,.cols3{grid-template-columns:1fr} .steps{grid-template-columns:1fr 1fr}
  .head{padding:28px} .head h1{font-size:38px} .shots{flex-wrap:wrap}
}
/* phones: nothing may be wider than the screen, so labels wrap and the big numerals come down a size */
@media (max-width:600px){
  .nav{padding:0 6px 0 16px} .nav .brand{white-space:nowrap} .nav .cta{padding:8px 13px}
  .pal{gap:5px;padding:0 2px} .pal button{width:14px;height:14px}
  .page{padding-top:84px}
  .head{padding:24px 22px;border-radius:24px} .head h1{font-size:32px} .head .sum{font-size:16.5px}
  .cell{height:auto;min-height:108px;padding:18px 16px 16px}
  .cell .num{font-size:33px;height:auto} .cell .num.word{font-size:18px;white-space:normal}
  .cell p{white-space:normal;margin-top:10px}
  .panel{padding:24px 22px}
  .steps{grid-template-columns:1fr} .step{min-height:0}
  .chart{gap:5px} .chart .yl b{display:none} .chart .mark span{font-size:10.5px}
  table.t th,table.t td{font-size:13.5px;padding-right:8px}
}