/* onclock.forgebyte.app — precise & premium: deep indigo, violet, hairlines, mono numerals. */
@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/instrument-serif-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/instrument-serif-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:100 800;font-display:swap;src:url(/fonts/jetbrains-mono-latin-wght.woff2) format("woff2")}
:root{
 --night:#0d0b22;--night-2:#141132;--night-3:#1c1844;--violet:#8b7bff;--violet-2:#b8adff;--lav:#ece9ff;--lav-2:#aaa3d6;--rule:rgba(184,173,255,.16);
 --fb-bg:var(--night);--fb-surface:var(--night-2);--fb-ink:var(--lav);--fb-muted:var(--lav-2);--fb-line:var(--rule);
 --fb-accent:var(--violet);--fb-accent-ink:var(--violet-2);--fb-focus:var(--violet-2);
 --fb-bar-bg:rgba(13,11,34,.8);--fb-bar-ink:var(--lav);--fb-bar-muted:var(--lav-2);--fb-bar-line:var(--rule);
 --fb-cta-bg:var(--lav);--fb-cta-ink:var(--night);
 --fb-foot-bg:#08071a;--fb-foot-ink:#cfcaf0;--fb-foot-head:#fff;--fb-foot-muted:#9a94c4;--fb-foot-line:var(--rule);
 --fb-body:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
 --fb-display:"Instrument Serif",ui-serif,Georgia,serif;
 --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
 --fb-radius:14px;
}
body{font-size:17px}
h1,h2{font-family:var(--fb-display);font-weight:400;letter-spacing:-.015em;line-height:1.02}
h2{font-size:clamp(2.3rem,5vw,3.8rem)}
h3{font-family:var(--fb-body);font-weight:600;font-size:1.15rem;letter-spacing:-.01em}
.eyebrow{font-family:var(--mono);font-weight:500;font-size:.75rem;letter-spacing:.16em;color:var(--violet-2)}
.lead{font-size:clamp(1.05rem,1.6vw,1.22rem);color:var(--lav-2);max-width:44ch}
.grad{font-style:italic;color:var(--violet-2)}
.muted{color:var(--lav-2)}
.s-head{max-width:760px;margin-bottom:56px}.s-head p{color:var(--lav-2);font-size:1.08rem}
.s-head a{color:var(--violet-2)}
.appstore{display:inline-flex;align-items:center;gap:10px;min-height:52px;background:var(--lav);color:var(--night);text-decoration:none;border-radius:12px;padding:9px 18px 9px 14px;line-height:1.1}
.appstore svg{width:26px;height:26px}.appstore small{display:block;font-size:.7rem;opacity:.75}.appstore b{font-size:1.12rem}
.btns{margin-top:32px}
.facts{list-style:none;padding:0;margin:32px 0 0;display:flex;flex-wrap:wrap;border-top:1px solid var(--rule)}
.facts li{font-family:var(--mono);font-size:.78rem;letter-spacing:.04em;color:var(--lav-2);padding:12px 18px 0 0;margin-right:18px}
.facts li::before{content:"\2014\00a0";color:var(--violet)}

/* hero with a live shift timer */
.oc-hero{position:relative;overflow:hidden;padding:clamp(56px,9vw,120px) 0 clamp(64px,9vw,120px);background:
 radial-gradient(50% 60% at 80% 40%,rgba(139,123,255,.22),transparent 70%),
 linear-gradient(var(--rule) 1px,transparent 1px) 0 0/100% 64px,var(--night);border-bottom:1px solid var(--rule)}
.oc-hero__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center}
@media(max-width:920px){.oc-hero__grid{grid-template-columns:1fr;gap:48px}}
.stamp{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.stamp .appicon{width:56px;height:56px;border-radius:14px;box-shadow:0 0 0 1px var(--rule),0 18px 40px -16px rgba(139,123,255,.8)}
.stamp .eyebrow{margin:0}
.oc-hero h1{font-size:clamp(2.8rem,6.6vw,5.4rem)}
.clock{position:relative;justify-self:center;width:min(420px,100%);aspect-ratio:1;display:grid;place-items:center}
.dial{position:absolute;inset:0;width:100%;height:100%}
.dial__face{fill:rgba(20,17,50,.7);stroke:var(--rule);stroke-width:1}
.dial__ticks line{stroke:rgba(184,173,255,.35);stroke-width:1}
.dial__ticks line.major{stroke:var(--violet-2);stroke-width:1.5}
.dial__progress{fill:none;stroke:var(--violet);stroke-width:2;stroke-dasharray:60;stroke-dashoffset:var(--sec-off,45);transform:rotate(-90deg);transform-origin:120px 120px;stroke-linecap:round;transition:stroke-dashoffset .9s linear}
.dial__hand{stroke:var(--lav);stroke-width:2.5;stroke-linecap:round;transform-origin:120px 120px;transform:rotate(var(--sec-deg,90deg));transition:transform .9s linear}
.dial__pin{fill:var(--violet)}
.clock__readout{position:relative;text-align:center;display:grid;gap:10px;justify-items:center}
.clock__state{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--violet-2)}
.clock__state i{width:8px;height:8px;border-radius:50%;background:#5ef2a8;box-shadow:0 0 0 0 rgba(94,242,168,.6);animation:live 2s infinite}
@keyframes live{70%{box-shadow:0 0 0 8px rgba(94,242,168,0)}100%{box-shadow:0 0 0 0 rgba(94,242,168,0)}}
.clock__time{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:300;font-size:clamp(2.4rem,7vw,3.5rem);letter-spacing:-.02em;color:#fff}
.clock__flow{list-style:none;margin:6px 0 0;padding:0;display:flex;gap:6px;font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase}
.clock__flow li{padding:4px 8px;border:1px solid var(--rule);border-radius:999px;color:var(--lav-2)}
.clock__flow li.is-done{border-color:var(--violet);color:var(--lav)}

/* the page as a workday timeline */
.oc-day{padding:clamp(72px,10vw,140px) 0}
.timeline{list-style:none;margin:0;padding:0;position:relative}
.timeline::before{content:"";position:absolute;left:110px;top:0;bottom:0;width:1px;background:linear-gradient(var(--violet),var(--rule) 85%,transparent)}
.stop{position:relative;display:grid;grid-template-columns:110px minmax(0,1fr) minmax(0,220px);gap:0 64px;padding:0 0 64px;align-items:center}
.stop:last-child{padding-bottom:0}
.stop::before{content:"";position:absolute;left:104px;top:calc(50% - 38px);width:13px;height:13px;border-radius:50%;background:var(--night);border:1.5px solid var(--violet);box-shadow:0 0 0 6px var(--night)}
.stop:first-child::before{background:var(--violet)}
.stop__mark{display:grid;gap:4px;padding-right:24px;text-align:right;font-family:var(--mono);align-self:center;margin-top:-64px}
.stop__time{font-size:1.6rem;font-weight:300;font-variant-numeric:tabular-nums;color:#fff;line-height:1}
.stop__label{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--violet-2)}
.stop__body{padding-top:0;border-top:1px solid var(--rule);padding-top:18px;max-width:52ch}
.stop__body h3{font-family:var(--fb-display);font-weight:400;font-size:clamp(1.8rem,3vw,2.4rem);letter-spacing:-.01em;margin-bottom:.3em}
.stop__body h3+p{color:var(--lav-2)}
.stop__body p{color:var(--lav-2)}
.stop__shot{width:100%;border-radius:22px;border:1px solid var(--rule);box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
@media(max-width:820px){
 .timeline::before{left:7px}
 .stop{grid-template-columns:1fr;gap:14px;padding:0 0 56px 36px}
 .stop::before{left:1px;top:4px}
 .stop__mark{margin-top:0}
 .stop__mark{text-align:left;display:flex;gap:12px;align-items:baseline;padding:0}
 .stop__shot{width:min(220px,70%)}
}

/* tidy screen grid */
.oc-screens{padding:clamp(64px,8vw,110px) 0;border-block:1px solid var(--rule);background:var(--night-2)}
.tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
.tiles img{width:100%;border-radius:18px;border:1px solid var(--rule)}
.tiles img:nth-child(odd){transform:translateY(24px)}
@media(max-width:820px){.tiles{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:30px}.tiles img{flex:0 0 52%;scroll-snap-align:start}}

/* pricing ledger */
.oc-price{padding:clamp(72px,10vw,130px) 0}
.ledger{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.ledger__row{padding:28px 28px 30px 0;border-right:1px solid var(--rule)}
.ledger__row+.ledger__row{padding-left:28px}
.ledger__row:last-child{border-right:0}
.ledger__row span{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase}
.ledger__row strong{display:block;font-family:var(--mono);font-weight:200;font-variant-numeric:tabular-nums;font-size:clamp(4rem,9vw,6.5rem);line-height:1;color:#fff;margin:16px 0 10px;letter-spacing:-.04em}
.ledger__row p{margin:0;color:var(--lav-2)}
@media(max-width:720px){.ledger{grid-template-columns:1fr}.ledger__row,.ledger__row+.ledger__row{padding:24px 0;border-right:0;border-bottom:1px solid var(--rule)}.ledger__row:last-child{border-bottom:0}}

/* FAQ with hairlines */
.oc-faq{padding:0 0 clamp(72px,10vw,130px)}
.oc-faq__grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px}
@media(max-width:920px){.oc-faq__grid{grid-template-columns:1fr;gap:0}}
.faq{counter-reset:q;border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule);counter-increment:q}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:baseline;padding:22px 0;font-weight:500;font-size:1.08rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:counter(q,decimal-leading-zero);font-family:var(--mono);font-size:.8rem;color:var(--violet-2)}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--violet-2);transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0;padding:0 0 22px 56px;color:var(--lav-2)}
.faq a{color:var(--violet-2)}

/* CTA */
.oc-cta{padding:0 0 clamp(72px,10vw,120px)}
.band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;padding:clamp(32px,5vw,64px);border:1px solid var(--rule);border-radius:24px;background:radial-gradient(70% 140% at 100% 0,rgba(139,123,255,.35),transparent 60%),var(--night-3)}
.band h2{margin:0}.band p{margin:.4em 0 0;color:var(--lav-2)}

/* support + legal */
.doc-hero h1{font-weight:400}
.doc-hero p{font-family:var(--mono);font-size:.85rem}
.prose{background:transparent;border:0;border-top:1px solid var(--rule);border-radius:0;padding-inline:0}
.prose h2{font-family:var(--fb-display);font-weight:400;font-size:2rem}
.prose p,.prose li{color:#d9d5f5}
.prose a{color:var(--violet-2)}
.contact{background:var(--night-3);border:1px solid var(--rule)}
.contact a{color:var(--violet-2)}
.toc{border-left-color:var(--rule);font-family:var(--mono);font-size:.78rem}

@media (prefers-reduced-motion:reduce){.clock__state i{animation:none}.dial__hand,.dial__progress{transition:none}}

/* try button row */
.btns{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* Apple Watch screenshot inside the workday timeline */
.stop__watch{display:block;margin-top:20px;width:150px;height:auto;border-radius:36px;border:7px solid #07060d;box-shadow:0 0 0 1px var(--rule),0 24px 50px -24px rgba(0,0,0,.9)}
.stop__body p+h3{margin-top:1.1em}