/* Nightcap marketing site.
   App tokens come from the Nightcap repo (src/ui/theme.rs, docs/design/mockup.html)
   so the page and the app share one look in light and dark. */

*{box-sizing:border-box}

:root{
  --sf:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",system-ui,sans-serif;
  --sfd:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Segoe UI",system-ui,sans-serif;

  /* page */
  --page:#FBFBFD;--ink:#1D1D1F;--ink2:#6E6E73;--panel:#E4E5EA;--rule:#E5E5EA;

  /* app, light appearance */
  --win:#F4F4F4;--group:#FFFFFF;--group-edge:rgba(0,0,0,.07);
  --label:rgba(0,0,0,.85);--label2:rgba(0,0,0,.5);--label3:rgba(0,0,0,.25);--sep:rgba(0,0,0,.08);
  --fill:rgba(0,0,0,.055);--fill2:rgba(0,0,0,.09);--seg-sel:#FFFFFF;--knob:#FFFFFF;
  --accent:#5856D6;--accent-tint:rgba(88,86,214,.13);--accent-ink:#5856D6;--field:#FFFFFF;
  --win-edge:0 0 0 .5px rgba(0,0,0,.22);--win-shadow:0 18px 50px rgba(0,0,0,.18),0 2px 6px rgba(0,0,0,.06);
  --menu:rgba(246,246,246,.97);--menu-edge:0 0 0 .5px rgba(0,0,0,.18);--menubar:rgba(250,250,250,.75);
  --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12'%3E%3Cpath d='M1.5 4.5L4 2l2.5 2.5M1.5 7.5L4 10l2.5-2.5' fill='none' stroke='%236E6E73' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{
    --page:#000;--ink:#F5F5F7;--ink2:#A1A1A6;--panel:#1C1C1E;--rule:#2C2C2E;
    --win:#1F1F1F;--group:#2A2A2A;--group-edge:rgba(255,255,255,.06);
    --label:rgba(255,255,255,.88);--label2:rgba(255,255,255,.55);--label3:rgba(255,255,255,.25);--sep:rgba(255,255,255,.08);
    --fill:rgba(255,255,255,.08);--fill2:rgba(255,255,255,.14);--seg-sel:#646466;--knob:#E8E8E8;
    --accent:#5E5CE6;--accent-tint:rgba(94,92,230,.24);--accent-ink:#B7B6FF;--field:rgba(255,255,255,.06);
    --win-edge:0 0 0 .5px #000,inset 0 0 0 .5px rgba(255,255,255,.14);--win-shadow:0 18px 50px rgba(0,0,0,.45);
    --menu:rgba(44,44,46,.97);--menu-edge:0 0 0 .5px #000,inset 0 0 0 .5px rgba(255,255,255,.14);--menubar:rgba(30,30,30,.7);
    --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12'%3E%3Cpath d='M1.5 4.5L4 2l2.5 2.5M1.5 7.5L4 10l2.5-2.5' fill='none' stroke='%23A1A1A6' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}

html{scroll-behavior:smooth}
body{margin:0;background:var(--page);color:var(--ink);font:15px/1.5 var(--sf);-webkit-font-smoothing:antialiased}
a{color:inherit}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 55%,transparent);outline-offset:2px}
.skip{position:absolute;left:12px;top:-60px;padding:8px 14px;border-radius:8px;background:var(--accent);color:#fff;z-index:10}
.skip:focus{top:12px}

/* ---------- layout ---------- */
.wrap{max-width:1120px;margin:0 auto;padding-left:32px;padding-right:32px}
h1,h2,h3{font-family:var(--sfd);text-wrap:balance}
h2{font-size:36px;line-height:1.12;font-weight:600;letter-spacing:-.025em;margin:0 0 40px;max-width:18ch}
section>p,.band p{text-wrap:pretty}

.nav{display:flex;justify-content:space-between;align-items:center;height:68px}
.nav nav{display:flex;align-items:center;gap:24px;font-size:14px}
.nav nav a:not(.btn){text-decoration:none;color:var(--ink2)}
.nav nav a:not(.btn):hover{color:var(--ink)}
.brand{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:15px;text-decoration:none;letter-spacing:-.01em}
.mark{width:26px;height:26px;border-radius:7px;background:#5856D6;color:#fff;display:grid;place-items:center}

.btn{display:inline-flex;align-items:center;height:42px;padding:0 20px;border-radius:999px;background:var(--accent);color:#fff;font-weight:500;font-size:15px;text-decoration:none;white-space:nowrap}
.btn:hover{filter:brightness(1.08)}
.btn.quiet{background:var(--accent-tint);color:var(--accent-ink)}
.btn.small{height:32px;padding:0 14px;font-size:13px}
.ctas{display:flex;flex-wrap:wrap;gap:10px}
.fine{font-size:13px;color:var(--ink2);margin:14px 0 0}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1fr) 460px;gap:64px;align-items:center;padding-top:48px;padding-bottom:112px}
.hero h1{font-size:60px;line-height:1.04;font-weight:600;letter-spacing:-.035em;margin:0 0 22px;max-width:11ch}
.lede{font-size:20px;line-height:1.45;color:var(--ink2);margin:0 0 30px;max-width:30em}
.stage{background:var(--panel);border-radius:26px;padding:56px 24px;display:grid;place-items:center}

/* how it works */
.how{padding-bottom:112px}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.three figure{margin:0 0 22px;height:210px;border-radius:18px;background:var(--panel);display:grid;place-items:center;padding:24px}
.three figure>*{width:100%;max-width:300px}
.three .actions{max-width:200px}
.three h3{font-size:19px;font-weight:600;letter-spacing:-.01em;margin:0 0 6px}
.three p{margin:0;color:var(--ink2);max-width:34ch}

/* menu bar band */
.band{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center;padding-bottom:112px}
.band figure{margin:0;border-radius:26px;background:var(--panel);padding:36px 32px 44px;display:grid;justify-items:end;min-height:300px;align-content:start}
.band .menubar{width:100%}
.band .menu{margin:6px 74px 0 0}
.band h2{margin-bottom:18px}
.band p,.restore p{font-size:18px;color:var(--ink2);margin:0 0 14px;max-width:32em}

/* restore */
.restore{padding-bottom:112px;text-align:center;display:grid;justify-items:center}
.restore h2{max-width:none;margin-bottom:14px}
.restore .ctas{justify-content:center;margin-top:18px}

.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:28px;padding-bottom:40px;font-size:13px;color:var(--ink2);border-top:1px solid var(--rule)}
.foot nav{display:flex;gap:20px}
.foot a{text-decoration:none}
.foot a:hover{color:var(--ink)}

/* ---------- app components (same sizes as the app: 13 px body, 11 px captions) ---------- */
.mac-win{width:340px;max-width:100%;background:var(--win);border-radius:12px;box-shadow:var(--win-edge),var(--win-shadow);overflow:hidden;font:13px/1.35 var(--sf);color:var(--label);text-align:left}
.toolbar{height:38px;display:grid;grid-template-columns:70px 1fr 70px;align-items:center;padding:0 10px 0 14px}
.lights{display:flex;gap:8px}
.lights i{width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.15)}
.lights i:nth-child(1){background:#FF5F57}.lights i:nth-child(2){background:#FEBC2E}.lights i:nth-child(3){background:#28C840}
.tb-title{text-align:center;font-weight:600}
.tb-icon{justify-self:end;width:30px;height:24px;display:grid;place-items:center;color:var(--label2)}

.group{background:var(--group);border-radius:9px;box-shadow:0 0 0 .5px var(--group-edge);font:13px/1.35 var(--sf);color:var(--label);text-align:left}
.row{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:40px;padding:7px 12px}
.row+.row{border-top:1px solid var(--sep)}
.row[hidden]{display:none}
.row-text{display:grid;gap:1px}
.cap{font-size:11px;color:var(--label2);font-variant-numeric:tabular-nums}

.switch{position:relative;flex:none;width:32px;height:19px;border-radius:10px;border:0;padding:0;background:var(--fill2);transition:background .15s}
.switch::after{content:"";position:absolute;top:1.5px;left:1.5px;width:16px;height:16px;border-radius:50%;background:var(--knob);box-shadow:0 1px 2px rgba(0,0,0,.25),0 0 0 .5px rgba(0,0,0,.06);transition:transform .15s}
.switch[aria-checked="true"],.switch.on{background:var(--accent)}
.switch[aria-checked="true"]::after,.switch.on::after{transform:translateX(13px)}
button.switch{cursor:pointer}

.pop{appearance:none;-webkit-appearance:none;border:0;border-radius:5px;padding:3px 20px 3px 8px;margin-right:-6px;font:13px var(--sf);color:var(--label2);background:transparent var(--chevron) no-repeat right 6px center;cursor:pointer}
.pop:hover{background-color:var(--fill)}
.pop option{color:initial}

.seg{display:grid;grid-template-columns:repeat(6,1fr);background:var(--fill);border-radius:7px;padding:2px}
.seg button{height:22px;padding:0;white-space:nowrap;border:0;border-radius:5px;background:none;font-size:12px;color:var(--label);cursor:pointer;font-variant-numeric:tabular-nums}
.seg button[aria-checked="true"]{background:var(--seg-sel);box-shadow:0 0 0 .5px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.14)}
.seg[aria-disabled="true"]{opacity:.45;pointer-events:none}

.stepper{display:flex;align-items:center;gap:6px;color:var(--label2)}
.stepper input{width:56px;height:22px;border:0;border-radius:5px;background:var(--field);box-shadow:inset 0 0 0 .5px var(--label3);text-align:right;padding:0 6px;font:13px var(--sf);color:var(--label);font-variant-numeric:tabular-nums}

.slider{display:flex;align-items:center;gap:8px;color:var(--label2)}
.slider output{width:34px;text-align:right;font-variant-numeric:tabular-nums}
input[type=range]{-webkit-appearance:none;appearance:none;width:130px;height:18px;background:transparent;margin:0;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(to right,var(--accent) var(--p),var(--fill2) var(--p))}
input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:linear-gradient(to right,var(--accent) var(--p),var(--fill2) var(--p))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;margin-top:-7px;background:var(--knob);box-shadow:0 1px 3px rgba(0,0,0,.3),0 0 0 .5px rgba(0,0,0,.08)}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border:0;border-radius:50%;background:var(--knob);box-shadow:0 1px 3px rgba(0,0,0,.3)}

.main-body{padding:4px 16px 16px;display:grid;gap:16px}
.ring-wrap{position:relative;height:236px}
.ring{position:absolute;left:50%;top:0;width:204px;height:204px;transform:translateX(-50%) rotate(-90deg)}
.ring circle{fill:none;stroke-width:6}
.ring-track{stroke:var(--fill)}
.ring-prog{stroke:var(--accent);stroke-linecap:round;transition:stroke-dashoffset .25s linear}
.ring-center{position:absolute;left:50%;top:102px;transform:translate(-50%,-50%);width:170px;text-align:center}
.ring-time{font-size:50px;font-weight:200;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.paused .ring-time{color:var(--label2)}
.ring-sub{display:flex;justify-content:center;align-items:center;gap:5px;margin-top:8px;color:var(--label2);min-height:18px}
.round{position:absolute;bottom:0;width:62px;height:62px;border-radius:50%;border:0;font-size:13px;font-weight:500;cursor:pointer}
.round:disabled{opacity:.4;cursor:default}
.round.gray{left:2px;background:var(--fill2);color:var(--label)}
.round.tint{right:2px;background:var(--accent-tint);color:var(--accent)}
.round:not(:disabled):active{filter:brightness(.92)}

.menubar{height:26px;border-radius:8px;background:var(--menubar);box-shadow:0 0 0 .5px var(--sep);display:flex;justify-content:flex-end;align-items:center;gap:4px;padding:0 10px;color:var(--label);font:13px/1.2 var(--sf)}
.mb-item{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 7px;border-radius:5px;font-variant-numeric:tabular-nums}
.mb-item.open{background:var(--fill2)}
.menu{width:236px;padding:5px;border-radius:9px;background:var(--menu);box-shadow:var(--menu-edge),0 10px 30px rgba(0,0,0,.22);font:13px/1.35 var(--sf);color:var(--label);text-align:left}
.mi{display:flex;justify-content:space-between;align-items:center;padding:3px 9px;border-radius:5px}
.mi .check{width:14px;flex:none}
.actions .mi{justify-content:flex-start}
.mi kbd{font:inherit;color:var(--label2)}
.mi.hl{background:var(--accent);color:#fff}
.mi.hl kbd{color:rgba(255,255,255,.8)}
.mi-head{padding:5px 9px 2px;font-size:11px;font-weight:600;color:var(--label2)}
.mi-info{padding:3px 9px;color:var(--label2);font-variant-numeric:tabular-nums}
.msep{height:1px;background:var(--sep);margin:5px 9px}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .hero,.band{grid-template-columns:1fr;gap:48px}
  .hero{padding-bottom:88px}
  .three{grid-template-columns:1fr;gap:40px}
  .three figure>*{max-width:340px}
  .band figure{order:1}
}
@media (max-width:560px){
  .wrap{padding-left:18px;padding-right:18px}
  .nav nav a:not(.btn){display:none}
  .hero{padding-top:24px}
  .hero h1{font-size:42px}
  .lede{font-size:18px}
  h2{font-size:30px}
  .stage{padding:32px 12px;margin:0 -6px}
  .band figure{padding:24px 16px 32px}
  .band .menu{margin-right:12px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important}
}