/* RMS Automation, round 10. The live site's own type (Archivo, Inter Tight, JetBrains Mono for readings only), cool
   instrument white and black, solid buttons with an indicator light, scale rules for dividers, engraved-line art. */
:root{
  --paper:#F3F4F5; --paper-2:#E8EAEC; --white:#FFFFFF;
  --ink:#111416; --ink-2:#41474C; --ink-3:#6B7278; --ink-4:#A0A6AB;
  --line:rgba(17,20,22,.11); --line-2:rgba(17,20,22,.22);
  --void:#0A0B0C; --graphite:#121517; --steel:#1B2023; --edge:#262C30; --bone:#ECEEF0; --ash:#8A9196; --ash-dim:#566066;
  --arc:#FF8A1F; --plasma:#4ADBEE; --ion:#9C7CF4; --pass:#3FBF7F; --fail:#FF5A4F;
  --display:"Archivo","Inter Tight","Helvetica Neue",Arial,sans-serif;
  --sans:"Inter Tight","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --pad:clamp(16px,3.4vw,48px);
  --out:cubic-bezier(.16,1,.3,1);
  /* what components draw with; dark surfaces swap these */
  --fg:var(--ink); --fg-2:var(--ink-2); --fg-3:var(--ink-3); --fg-mute:var(--ink-4); --rule:var(--line-2);
  color-scheme:light;
  interpolate-size:allow-keywords;
}
.dk,.nav.dark{--fg:var(--bone); --fg-2:rgba(236,238,240,.8); --fg-3:rgba(236,238,240,.62); --fg-mute:rgba(236,238,240,.42); --rule:rgba(236,238,240,.18)}
.dk{color:var(--fg)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16.5px/1.55 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video{max-width:100%;display:block}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--arc);outline-offset:3px;border-radius:2px}
[hidden]{display:none!important}
.wrap{padding-left:max(var(--pad),env(safe-area-inset-left,0px));padding-right:max(var(--pad),env(safe-area-inset-right,0px))}

/* type: statements in Archivo, set tight; everything else in Inter Tight */
.st{font-family:var(--display);font-weight:600;letter-spacing:-.034em;line-height:1.02;margin:0;text-wrap:balance;color:var(--fg)}
.st-1{font-size:clamp(38px,5vw,80px)}
.st-2{font-size:clamp(30px,3.5vw,54px);line-height:1.04}
.st-3{font-size:clamp(22px,2vw,30px);line-height:1.12;letter-spacing:-.024em}
.txt{font-size:16.5px;line-height:1.6;color:var(--fg-2);max-width:42ch;margin:0}
.small{font-size:13.5px;line-height:1.55;color:var(--fg-3);margin:0}
.num{font:500 12px/1 var(--mono);letter-spacing:.02em;color:var(--fg-mute);font-variant-numeric:tabular-nums}

/* a small label above a statement */
.tag{display:inline-flex;align-items:center;margin:0;font:500 13.5px/1.3 var(--sans);letter-spacing:.005em;color:var(--fg-3)}

/* links in brackets, the way the live site reads. On hover the words take the arc, and the brackets part around the
   sign while the group dims, the way sentient.foundation's do; transforms only, so nothing beside the link moves */
.bk{display:inline-flex;align-items:center;gap:14px;font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:inherit;padding:10px 0;cursor:pointer;background:none;border:0;white-space:nowrap}
.bk i{font-style:normal;transition:color .25s}
.bk b{font-weight:400;white-space:pre;transition:color .25s,opacity .3s cubic-bezier(.42,0,.58,1)}
.bk b::before,.bk b::after{display:inline-block;transition:transform .3s cubic-bezier(.42,0,.58,1)}
.bk b::before{content:"[ "}
.bk b::after{content:" ]"}
.bk:hover i,.bk:focus-visible i{color:var(--arc)}
.bk:hover b,.bk:focus-visible b{opacity:.5}
.bk:hover b::before,.bk:focus-visible b::before{transform:translateX(-.42em)}
.bk:hover b::after,.bk:focus-visible b::after{transform:translateX(.42em)}
@media (prefers-reduced-motion:reduce){.bk b::before,.bk b::after{transition:none}}
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:6px 32px}


/* nav: clear over dark, ink over paper, it follows whatever is under it */
.nav{position:fixed;top:0;left:0;right:0;padding-top:env(safe-area-inset-top,0px);z-index:50;color:var(--ink);transition:color .35s}
.nav.dark{color:var(--bone)}
.nav::before{content:"";position:absolute;inset:0;background:rgba(243,244,245,.86);-webkit-backdrop-filter:saturate(1.2) blur(14px);backdrop-filter:saturate(1.2) blur(14px);box-shadow:0 1px 0 var(--line);opacity:0;transition:opacity .35s,background-color .35s;pointer-events:none}
.nav.solid::before{opacity:1}
/* the dark tint belongs to .dark alone, so crossing into .solid only fades the bar in; tied to .solid as well, the fade began
   from the light tint and showed a grey bar for a moment every time the page crossed its first 12px */
.nav.dark::before{background:rgba(10,11,12,.5);box-shadow:0 1px 0 rgba(255,255,255,.07)}
.nav-in{position:relative;height:72px;display:flex;align-items:center;gap:24px}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.brand svg{width:26px;height:31px;flex:none}
.brand span{display:flex;flex-direction:column;font:400 14px/1.05 var(--sans);letter-spacing:-.01em}
.brand span b{font-weight:600}
.brand span em{font-style:normal;opacity:.72}
.nav-r{margin-left:auto;display:flex;align-items:center;gap:28px}
.nav-r > a:not(.bk):not(.launch){font:400 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;opacity:.8;transition:opacity .2s}
.nav-r > a:not(.bk):not(.launch):hover,.nav-r a[aria-current="page"]{opacity:1}
.nav-r a[aria-current="page"]::before{content:"/ "}
/* signed in on this browser (the head script sets html.signed-in): Launch App stands where Sign in and Get started were */
.signed-in [data-auth="out"],html:not(.signed-in) [data-auth="in"]{display:none}
/* Launch App: a pill in the nav's own colour. On hover a dot slides in from the left and the pill widens to the left to
   take it; the margin it gives up as it widens keeps the links beside it from moving */
.launch{display:inline-flex;align-items:center;margin-left:10px;padding:8px 12px;border:1px solid;border-radius:99vw;overflow:hidden;font:500 12px/1.25 var(--mono);color:inherit;text-decoration:none;white-space:nowrap;transition:margin-left .3s cubic-bezier(.42,0,.58,1)}
.launch-dot{max-width:0;transition:max-width .3s cubic-bezier(.42,0,.58,1)}
.launch-dot i{display:block;width:10px;height:10px;margin-right:8px;border-radius:99vw;background:currentColor;transform:translateX(-300%);transition:transform .3s cubic-bezier(.42,0,.58,1)}
.launch:hover,.launch:focus-visible{margin-left:-8px}
.launch:hover .launch-dot,.launch:focus-visible .launch-dot{max-width:18px}
.launch:hover .launch-dot i,.launch:focus-visible .launch-dot i{transform:translateX(0)}
@media (prefers-reduced-motion:reduce){.launch,.launch-dot,.launch-dot i{transition:none}}
.menu{display:none;position:relative}
.menu summary{list-style:none;cursor:pointer;font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:10px 0}
.menu summary::-webkit-details-marker{display:none}
.menu-drop{position:absolute;right:0;top:44px;min-width:230px;background:var(--paper);color:var(--ink);border-radius:6px;box-shadow:0 0 0 1px var(--line),0 24px 60px -24px rgba(17,20,22,.35);padding:6px 18px;display:grid}
.menu-drop a{padding:13px 0;font:400 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--line)}
.menu-drop a:last-child,.signed-in .menu-drop [data-auth="in"]{border-bottom:0}

/* full-bleed photography and film */
.bleed{position:relative;overflow:hidden;background:var(--void);color:var(--bone)}
.bleed > canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.bleed > img,.bleed > video{position:absolute;left:0;top:-6%;width:100%;height:112%;object-fit:cover;will-change:transform}
.bleed .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,9,10,.34) 0%,rgba(8,9,10,0) 28%,rgba(8,9,10,.08) 52%,rgba(8,9,10,.66) 100%)}

/* hairline rows */
.rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.rows > li{border-bottom:1px solid var(--rule)}
/* the bracketed plus that becomes a minus when a row opens */
.pm{flex:none;font:400 12px/1 var(--mono);white-space:pre;text-align:right;transition:color .25s}
.pm::before{content:"[ + ]"}
details[open] > summary .pm::before{content:"[ - ]"}
details::details-content{block-size:0;overflow-y:clip;transition:block-size .6s var(--out),content-visibility .6s allow-discrete}
details[open]::details-content{block-size:auto}

/* footer: the mark, large, rising into place */
.foot{background:var(--paper);color:var(--ink);overflow:hidden;padding-top:clamp(72px,9vw,120px)}
.foot-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.foot h4{margin:0 0 16px;font:600 13.5px/1 var(--sans);color:var(--ink)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.foot a{font:400 14px/1.4 var(--sans);color:var(--ink-3);text-decoration:none;transition:color .2s}
.foot a:hover{color:var(--ink)}
.foot-mark{margin-top:clamp(80px,10vw,150px);padding-bottom:clamp(24px,3vw,40px)}
.foot-mark .big{display:flex;align-items:center;gap:clamp(14px,2vw,28px);color:var(--ink)}
.foot-mark .big svg{width:clamp(70px,11vw,170px);height:auto}
.foot-mark .big span{display:flex;flex-direction:column;font:600 clamp(46px,8.2vw,132px)/.9 var(--display);letter-spacing:-.045em}
.foot-mark .big span b{font-weight:800}
.legal{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;padding-block:22px max(26px,env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);font-size:12.5px;line-height:1.6;color:var(--ink-3)}
.legal p{margin:0;max-width:880px}
@keyframes crest{0%{transform:translateY(24%);opacity:0}20%{opacity:0}100%{transform:none;opacity:1}}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .foot-mark .big{animation:crest linear both;animation-timeline:view();animation-range:entry 0% entry 90%}
  }
}

/* pricing plans: the live site's glowing buttons and hue on hover */
@property --glow-a{syntax:"<angle>";inherits:false;initial-value:0deg}
@property --hue{syntax:"<color>";inherits:true;initial-value:#4ADBEE}
.plans{--draw-dur:.34s;--draw-step:.09s;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--edge);border:1px solid var(--edge)}
.plan{--ci:0;position:relative;display:flex;flex-direction:column;padding:clamp(26px,2.6vw,36px) clamp(22px,2.2vw,30px) 30px;background:var(--void);color:var(--bone);transition:background-color .3s;scroll-margin-top:90px}
.plan[data-i="1"]{--ci:1}
.plan[data-i="2"]{--ci:2}
.plan[data-i="0"]{--glow:var(--plasma)}
.plan[data-i="1"]{--glow:var(--arc)}
.plan[data-i="2"]{--glow:var(--ion)}
.plan:hover{background:var(--graphite)}
.plan h3{margin:0;font:600 clamp(20px,1.7vw,24px)/1.1 var(--display);letter-spacing:-.02em;color:var(--ash);transition:color .28s}
.plan .big{margin:22px 0 0;font:600 clamp(44px,4.4vw,66px)/1 var(--display);letter-spacing:-.045em;color:var(--bone)}
.plan .big small{font:500 13px/1 var(--sans);letter-spacing:0;color:var(--ash);margin-left:8px}
.plan .desc{margin:16px 0 24px;font-size:14.5px;line-height:1.6;color:var(--ash);min-height:4.8em}
.plan-g{margin-bottom:20px}
.plan-h{margin:0 0 10px;font:600 10.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ash-dim)}
.plan ul{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.plan li{font-size:12.5px;line-height:1.35;color:var(--ash);border:1px solid var(--edge);border-radius:2px;padding:5px 11px;transition:border-color .24s,color .24s}
.plan .draw{display:block;height:1px;background:var(--glow);transform:scaleX(0);transform-origin:left;transition:transform var(--draw-dur) var(--out);--gi:0;transition-delay:calc((var(--ci) + var(--gi)) * var(--draw-step))}
.plan-g + .plan-g .draw{--gi:1}
.plan-g + .plan-g + .plan-g .draw{--gi:2}
.plan .seats{margin:auto 0 18px;padding-top:12px;font:500 12.5px/1 var(--sans);color:var(--ash-dim)}
/* hovering a plan lights it and every plan it includes */
.plans:has(.plan[data-i="0"]:hover) .plan[data-i="0"] .draw,
.plans:has(.plan[data-i="1"]:hover) .plan:is([data-i="0"],[data-i="1"]) .draw,
.plans:has(.plan[data-i="2"]:hover) .plan .draw{transform:scaleX(1)}
.plans:has(.plan[data-i="0"]:hover) .plan[data-i="0"] li,
.plans:has(.plan[data-i="1"]:hover) .plan:is([data-i="0"],[data-i="1"]) li,
.plans:has(.plan[data-i="2"]:hover) .plan li{border-color:color-mix(in srgb,var(--glow) 62%,transparent);color:var(--bone)}
.plans:has(.plan[data-i="0"]:hover) .plan[data-i="0"] h3,
.plans:has(.plan[data-i="1"]:hover) .plan:is([data-i="0"],[data-i="1"]) h3,
.plans:has(.plan[data-i="2"]:hover) .plan h3{color:var(--bone)}
.gbtn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:48px;padding:0 22px;border-radius:999px;font:600 14px/1 var(--sans);text-decoration:none;color:var(--bone);background:var(--void);transition:background-color .2s,border-color .2s}
.gbtn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.glow{--glow-c:var(--glow,var(--arc));--glow-dur:3.4s;position:relative;display:flex;max-width:100%;border-radius:999px;box-shadow:0 0 20px -6px color-mix(in srgb,var(--glow-c) 55%,transparent);transition:box-shadow .25s}
.glow > .gbtn{position:relative;z-index:2;border:1px solid color-mix(in srgb,var(--glow-c) 42%,transparent)}
.glow > .gbtn:hover{background:color-mix(in srgb,var(--bone) 5%,var(--void));border-color:color-mix(in srgb,var(--glow-c) 72%,transparent)}
.glow:hover{box-shadow:0 0 28px -5px color-mix(in srgb,var(--glow-c) 72%,transparent)}
.glow::before,.glow::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;background:conic-gradient(from var(--glow-a),transparent 0deg,var(--glow-c) 26deg,color-mix(in srgb,var(--glow-c) 70%,transparent) 62deg,transparent 104deg,transparent 360deg);animation:glow-orbit var(--glow-dur) linear infinite;animation-delay:var(--glow-delay,0s)}
.glow::before{z-index:1;padding:1px;-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)}
.glow::after{z-index:0;filter:blur(9px);opacity:.85}
@keyframes glow-orbit{to{--glow-a:360deg}}
.glow.tri{--glow-c:var(--hue);animation:glow-hue calc(var(--glow-dur) * 3) linear infinite}
@keyframes glow-hue{0%,26%{--hue:var(--plasma)}33%,59%{--hue:var(--arc)}66%,92%{--hue:var(--ion)}100%{--hue:var(--plasma)}}
@media (prefers-reduced-motion:reduce){
  .glow::before{animation:none;background:color-mix(in srgb,var(--glow-c) 62%,transparent)}
  .glow::after{display:none}
  .glow.tri{animation:none;--glow-c:var(--arc)}
}

/* motion, all of it small: blocks settle, statements rise word by word, shots open */
@media (prefers-reduced-motion:no-preference){
  .js [data-rv]{transition:opacity 1.1s var(--out),transform 1.1s var(--out),clip-path 1.4s var(--out);transition-delay:var(--d,0ms)}
  .js [data-rv]:not(.in):not([data-rv="w"]):not(.shot){opacity:0;transform:translateY(16px)}
  .js .shot[data-rv]:not(.in){clip-path:inset(7% 5% 7% 5% round 12px);opacity:.4}
  .js .shot[data-rv]{clip-path:inset(0 0 0 0 round 10px)}
  .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
  .w > span{display:inline-block;transition:transform 1.05s var(--out);transition-delay:calc(var(--d,0ms) + var(--wi) * 32ms)}
  .js [data-rv="w"]:not(.in) .w > span{transform:translateY(108%)}
}

@media (max-width:900px){
  .nav-r > a:not(.bk):not(.launch){display:none}
  .menu{display:block}
  .foot-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .legal{grid-template-columns:minmax(0,1fr)}
  .plans{grid-template-columns:minmax(0,1fr)}
  .plan .desc{min-height:0}
}
@media (max-width:560px){
  .nav-r .bk,.nav-r .launch{display:none}
}