/* sot-skin.css: the scaleontime.com brand, measured off the live site 2026-09-25 (hub, the four
   doors, /apply, /window, /operator) and its source (tailwind.config.js, src/index.css).
   Loaded last on every page so it wins. Sunny: "fit the scaleontime.com brand closely 98%". */
:root{
  --bg:#060606; --surface:#0d0d0e; --surface2:#17171a;
  --line:rgba(244,241,234,.08); --line-strong:rgba(244,241,234,.22);
  --accent:#F97316; --ember:#EA580C; --text:#f4f1ea; --muted:#8b8697; --dim:#5f5a6b;
  --sc-canvas:#060606; --sc-ink:#f4f1ea; --sc-ink-soft:#8b8697; --sc-accent:#F97316; --sc-hairline:rgba(244,241,234,.08);
  --t-deep:#F97316; --t-deep-2:#EA580C;
  --card-bg:rgba(17,17,22,.82); --panel-bg:rgba(14,14,18,.92);
  --card-shadow:0 0 0 1px rgba(244,241,234,.08),0 40px 90px -30px rgba(0,0,0,.75);
  --panel-shadow:0 0 0 1px rgba(244,241,234,.06),0 40px 110px rgba(0,0,0,.6);
  --ease:cubic-bezier(.16,1,.3,1);
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --display:"Quicksand",Inter,sans-serif;
}
html{background:#060606;color-scheme:dark}
body{background:#060606;color:var(--text);font-family:Inter,ui-sans-serif,system-ui,sans-serif}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(60rem 40rem at 50% -10%,rgba(244,241,234,.05),transparent 70%),radial-gradient(45rem 35rem at 15% 105%,rgba(249,115,22,.05),transparent 70%)}
::selection{background:rgba(249,115,22,.28);color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid rgba(255,255,255,.75);outline-offset:2px}

/* the sky: stars and orbit lines, fixed behind everything (stars.js draws it) */
#glass,#sky{position:fixed;inset:0;z-index:0;width:100vw;height:100vh;height:100lvh;pointer-events:none;display:block}

/* type */
.sc-display,h1,h2{font-family:var(--display)}
#hero h1,.close__inner h2{font-weight:600;letter-spacing:.026em;line-height:1.1}
.plane h2,.rail__lead h2,.ab-h2,.book h2,.story h2{font-weight:700;letter-spacing:-.01em;line-height:1.08}
h3{font-family:var(--display);font-weight:700}
.em,.acc{color:var(--accent)}
.lede,.hero__sub,.story__text p{color:rgba(244,241,234,.72)}

/* KICKER: the "● LABEL" line that opens every door */
.kick{display:inline-flex;align-items:center;gap:.6rem;margin:0 0 1.1rem;font:600 11.5px/1 Inter,sans-serif;letter-spacing:.3em;text-transform:uppercase;color:rgba(244,241,234,.85)}
.kick::before{content:"";width:6px;height:6px;border-radius:9px;background:var(--accent);box-shadow:0 0 8px var(--accent)}
.kick--o{color:rgba(249,115,22,.85);font-size:10px;letter-spacing:.2em;font-weight:500}
.label{font:500 10px/1.2 Inter,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:rgba(249,115,22,.8)}

/* BUTTONS */
.btn,.pill .btn,.hero__links .btn{display:inline-flex;align-items:center;gap:.6em;border-radius:20px;padding:16px 28px;
  background:linear-gradient(180deg,#fb8a3c,#F97316 55%,#EA580C);color:#1a0d04;font:600 12px/1 Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;
  box-shadow:0 20px 40px -12px rgba(249,115,22,.65),inset 0 1px 0 rgba(255,255,255,.3);transition:transform 380ms var(--ease),box-shadow 380ms var(--ease)}
.btn:hover{transform:translateY(-2px);background:linear-gradient(180deg,#fb8a3c,#F97316 55%,#EA580C);box-shadow:0 24px 46px -12px rgba(249,115,22,.8),inset 0 1px 0 rgba(255,255,255,.3)}
.btn:active{transform:translateY(0) scale(.985)}
.btn--lg{padding:18px 32px;font-size:12.5px;border-radius:20px}
.btn svg{width:.9em;height:.9em}
.pill .btn,.hero__links .btn{padding:10px 18px;border-radius:100px;font-size:11px;box-shadow:0 10px 24px -10px rgba(249,115,22,.7)}
.ghost,.btn2{display:inline-flex;align-items:center;gap:.6em;min-height:44px;padding:0 22px;border-radius:100px;background:rgba(17,17,22,.8);color:var(--text);
  font:600 12px/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;box-shadow:0 0 0 1px rgba(255,255,255,.09);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.ghost:hover,.btn2:hover{box-shadow:0 0 0 1px rgba(249,115,22,.55);background:rgba(17,17,22,.9)}
.link{color:var(--text);font:600 11px/1 Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;border:0;padding:12px 4px;text-decoration:none;opacity:.8}
.link:hover{opacity:1;color:var(--accent)}
.chip{display:inline-flex;align-items:center;gap:.4em;padding:7px 11px;border-radius:999px;font:600 10px/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text);text-decoration:none;border:1px solid rgba(255,255,255,.12);transition:border-color .25s,color .25s}
.chip:hover{border-color:var(--accent)}
.chip span{color:var(--muted)}

/* NAV: the door header pills */
.pill{top:16px;background:rgba(17,17,22,.82);border-radius:20px;padding:6px 6px 6px 8px;
  box-shadow:0 0 0 1px rgba(255,255,255,.09),0 20px 40px -20px rgba(0,0,0,.8);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.pill a{font:500 11px/1 Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:rgba(244,241,234,.8);padding:10px 12px}
.pill a:hover{background:rgba(255,255,255,.05);color:var(--text)}
.pill .mk{border-right-color:rgba(255,255,255,.08)}
.pill .mk span{font:600 11px/1 Inter,sans-serif;letter-spacing:.24em;color:var(--text)}
.logo{color:var(--accent)}
.mark{font:600 11.5px/1 Inter,sans-serif;letter-spacing:.3em;text-transform:uppercase;color:rgba(244,241,234,.85)}
.mark i{display:none}
.mark .logo{width:22px;height:22px}
.hero__links>a:not(.btn){font:500 11px/1 Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:rgba(244,241,234,.8)}
.hero__links>a:not(.btn):hover{background:rgba(255,255,255,.05)}
.progress{background:linear-gradient(90deg,var(--ember),var(--accent));box-shadow:0 0 10px rgba(249,115,22,.55)}

/* HERO */
.hero__scrim{background:linear-gradient(to right,rgba(6,6,6,.82),rgba(6,6,6,.4) 55%,transparent)}
.stats .n{font-family:var(--mono);font-weight:600;letter-spacing:0}
.stats .n i{color:var(--accent)}
.stats small{font:500 10px/1.3 Inter,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.reelcard{border-radius:20px;box-shadow:0 0 0 1px rgba(249,115,22,.5),0 44px 100px rgba(0,0,0,.8),0 0 46px rgba(249,115,22,.2);transform:rotate(1.5deg)}
.reelcard__tag{font:600 10px/1.3 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase}
.plate{background:radial-gradient(ellipse at 50% 45%,rgba(249,115,22,.22),rgba(249,115,22,.04) 60%,transparent 78%)}

/* PANELS = the door panels */
.plane{background:var(--panel-bg);border-radius:16px;box-shadow:var(--panel-shadow);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.reg{border-top-color:var(--line)}
.reg__row,.rec__row,.rec__list li,.t .r,.facts th,.facts td,.diff article,.steps li,.faq details{border-color:var(--line)!important}
.reg__row:hover,a.rec__row:hover{background:rgba(249,115,22,.06)}
.reg__n{font-family:var(--mono);font-weight:600;letter-spacing:0;color:var(--text)}
.reg__n i{color:var(--accent)}
.reg__k{font:600 11px/1.3 Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--text)}
.reg__d,.rec__d{color:var(--muted)}
.go{color:var(--accent)}
.rec__h,.cols h3{font:500 10px/1 Inter,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:rgba(249,115,22,.8)}
.rec__src{font-family:var(--display);font-weight:700;font-size:1.05rem}
.trust .label,.trusted{color:var(--muted)}
.trust__row img{filter:grayscale(1) invert(1) brightness(.9);opacity:.5}
.rec__photo img,.shot{box-shadow:0 0 0 1px rgba(249,115,22,.35),0 40px 90px -30px rgba(0,0,0,.85)}

/* CARDS = the hub cards */
.ph,.room__frame,.ab-photo{border-radius:12px;box-shadow:0 0 0 1px rgba(255,255,255,.06),0 24px 60px rgba(0,0,0,.6);background:#0d0d0e}
.ph figcaption,.room figcaption,.ab-photo figcaption{font:600 9.5px/1 Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase}
.room figcaption{background:rgba(17,17,22,.82);color:rgba(244,241,234,.85);border-radius:999px;padding:7px 12px;box-shadow:0 0 0 1px rgba(255,255,255,.09)}
.rail__lead,.plate-soft{background:var(--card-bg);border-radius:20px;box-shadow:var(--card-shadow)}

/* BOOK */
.book__plate{border-radius:6px 14px 14px 6px;background:linear-gradient(160deg,#2a1406,#060606 70%);box-shadow:0 0 0 1px rgba(249,115,22,.35),0 40px 90px -30px rgba(0,0,0,.85)}
.book__plate small{font-family:var(--mono)}
.book__plate b{font-family:var(--display)}

/* CLOSE + FOOT */
.sig{font-family:var(--display);font-style:normal;color:var(--accent)}
.close__alt{color:var(--muted)}
.foot{background:rgba(6,6,6,.75);border-top:1px solid var(--line)}
.foot small{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--dim)}
.social a{font:500 11px/1 Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:rgba(244,241,234,.75)}
.social a:hover{color:var(--accent)}

/* ABOUT page parts */
.svc article,.nums div{background:var(--panel-bg)}
.svc .out{color:var(--accent)}
.steps li::before{font-family:var(--mono);font-weight:600}
.nums dd{font-family:var(--mono);font-weight:600}
.facts th{font:500 10px/1.5 Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.crumbs{font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.faq summary::after{color:var(--accent)}

@media (pointer:coarse){.pill{background:rgba(17,17,22,.94)}}
.social{flex-wrap:wrap;justify-content:center}
@media (max-width:860px){.social{gap:.7rem 1rem}}
/* THE COIN: the moving gold logo (Sunny 2026-09-25) */
video.coinv{width:28px;height:28px;border-radius:50%;object-fit:cover;display:block;flex:0 0 auto;background:#000}
.pill video.coinv{width:24px;height:24px}
.foot video.coinv{width:26px;height:26px}
video.coinbig{width:clamp(140px,18vw,220px);height:auto;aspect-ratio:1;border-radius:50%;justify-self:center;display:block;
  -webkit-mask-image:radial-gradient(circle,#000 62%,transparent 71%);mask-image:radial-gradient(circle,#000 62%,transparent 71%)}
@media (prefers-reduced-motion:reduce){video.coinv,video.coinbig{animation:none}}
