/* wakelab · one page for wakeSCOPE (2026-10-09). Old concept: matte black print, Rubik, lavender stage, Dusk device. */
.stage{position:relative;overflow:hidden;isolation:isolate;background:var(--canvas) url("assets/home-print-stage.webp") left center/115% 100% no-repeat}
.one-page .header{position:relative;background:transparent}

/* background: faint scope graticule on the black print */
.graticule{position:absolute;inset:0 0 34% 0;z-index:-1;pointer-events:none;
 background:linear-gradient(rgba(196,181,245,.07) 1px,transparent 1px) 0 0/100% 64px,linear-gradient(90deg,rgba(196,181,245,.07) 1px,transparent 1px) 0 0/64px 100%;
 -webkit-mask-image:radial-gradient(120% 90% at 50% 20%,#000 30%,transparent 78%);mask-image:radial-gradient(120% 90% at 50% 20%,#000 30%,transparent 78%)}

.scope-hero{--ink:#262136;--ink-2:#453b61;padding:20px var(--gutter) 44px;display:flex;flex-direction:column;align-items:center}
.scope-hero h1{position:relative;width:min(100%,1280px,calc(15svh * 7.73));margin:0 auto;line-height:1}
.scope-hero h1>img:first-child{display:block;width:100%;height:auto}
.scope-hero{position:relative}
.device{position:relative;width:min(92%,1240px,calc(37svh * 2.69));margin:clamp(18px,2.6svh,32px) auto 0}
.device>img{display:block;width:100%;height:auto;filter:drop-shadow(0 24px 30px rgba(30,20,60,.28));transition:opacity 180ms ease,transform 420ms var(--ease),filter 420ms var(--ease)}
.device>img.is-swapping{opacity:0}
@media(hover:hover) and (pointer:fine){.device>img:hover{transform:translateY(-8px) rotate(-.5deg);filter:drop-shadow(0 34px 34px rgba(30,20,60,.34))}}
.device figcaption{margin:0}




/* tagline under the word */
.tagline{margin:clamp(6px,1.2svh,14px) auto 0;color:#cfcfd6;font-size:clamp(17px,1.5vw,21px);letter-spacing:-.005em;text-align:center}

/* bottom bar: the main action and the theme switch */
.hero-bar{position:relative;width:100%;max-width:1240px;display:flex;flex-direction:column-reverse;align-items:center;gap:clamp(18px,2.6svh,28px);margin-top:clamp(16px,2.4svh,26px)}
.hero-cta{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.hero-cta .small{font-size:13px;line-height:1.45;color:var(--ink-2)}
.get{display:inline-flex;align-items:center;gap:22px;min-height:66px;padding:9px 9px 9px 24px;border-radius:14px;text-decoration:none;color:#f5f5f7;background:linear-gradient(#2a2d34,#17191d);border:1px solid #3b3f48;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 14px 30px rgba(30,20,60,.3);transition:transform 200ms var(--ease),box-shadow 200ms var(--ease)}
.get-text{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15}
.get b{font-size:20px;font-weight:600;letter-spacing:-.01em}
.get small{margin-top:3px;font-size:13px;color:#a9aab3}
.get-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:10px;background:#b4a2e5;color:#17131f;transition:background 200ms var(--ease)}
.get-icon svg{width:24px;height:24px;transition:transform 260ms var(--ease)}
.get:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 18px 36px rgba(30,20,60,.36)}
.get:hover .get-icon{background:#c9bbf2}.get:hover .get-icon svg{transform:translateY(2px)}
.get:focus-visible{outline:2px solid #17131f;outline-offset:3px}

/* theme switch: styled like the device's own Sync / Free control */
.scope-theme-controls{display:flex;width:fit-content;margin:0;gap:2px;padding:4px;border-radius:12px;background:#17191d;border:1px solid #2b2e35;box-shadow:0 10px 24px rgba(30,20,60,.22)}.scope-theme-controls[hidden]{display:none}
.scope-theme-controls button{--tone:#c4b5f5;display:inline-flex;align-items:center;justify-content:center;gap:8px;font:500 15px Rubik,sans-serif;min-height:44px;padding:8px 14px;cursor:pointer;background:transparent;color:#c9cad1;border:0;border-radius:8px;transition:background 200ms var(--ease),color 200ms var(--ease)}
.scope-theme-controls button:hover{background:#25282e;color:#f5f5f7}
.scope-theme-controls button[aria-pressed=true]{background:var(--tone);color:#17131f}
.scope-theme-controls button:focus{outline:none}
.scope-theme-controls button:focus-visible{outline:2px solid #f5f5f7;outline-offset:2px}
.scope-theme-controls [data-scope-theme=follow]{--tone:#ffad56}.scope-theme-controls [data-scope-theme=frost]{--tone:#82bde5}.scope-theme-controls [data-scope-theme=sage]{--tone:#b6d982}.scope-theme-controls [data-scope-theme=dusk]{--tone:#b4a2e5}
.scope-swatch{width:8px;height:8px;display:block;border-radius:50%;background:var(--tone)}
[aria-pressed=true] .scope-swatch{background:#17131f}

/* footer: brand and docs */
.one-page .site-footer{display:flex;align-items:center;justify-content:space-between;gap:20px 40px;flex-wrap:wrap;padding-block:28px;border-top:0}
.one-page .site-footer .flask{width:36px;height:36px}.one-page .site-footer .wordmark{width:112px}
.docs{display:flex;flex-wrap:wrap;gap:8px 24px;margin-right:auto}
.docs a{display:inline-flex;align-items:center;min-height:44px;color:var(--muted);font-size:15px;text-decoration:none;transition:color 200ms var(--ease)}
.docs a:hover{color:var(--accent)}

@media(max-width:1100px){.one-page .site-footer{justify-content:flex-start}.docs{flex:1 0 100%;order:3}}

@media(max-width:760px){
 .tagline{font-size:16px}
 .hero-bar{flex-direction:column-reverse;align-items:stretch;gap:20px;margin-top:20px}
 .scope-theme-controls{margin:0 auto}
 .hero-cta{display:block}.get{display:flex;justify-content:space-between}.hero-cta .small{margin-top:12px}

 .stage{background-size:115% 100%;background-position:left center}
 .graticule{background-size:100% 40px,40px 100%;inset:0 0 50% 0}
 .scope-hero{padding:24px var(--gutter) 36px}
 .scope-hero h1{width:100%}
 .device{width:100%;margin-top:22px}
 .scope-theme-controls{gap:0;padding:3px}.scope-theme-controls button{font-size:13px;padding:6px 9px;gap:6px;min-height:44px}
   .one-page .site-footer{display:flex;padding-block:28px 32px}
 .docs{gap:6px 18px}.docs a{min-height:44px;display:inline-flex;align-items:center}
}
@media(prefers-reduced-motion:reduce){.device>img{transition:none}.device>img:hover{transform:none}}

/* 2026-10-11: slogan, Gumroad line, features, footer tagline */
.tagline b{color:#f5f5f7;font-weight:600}
.features{padding-block:clamp(56px,8vw,96px) clamp(40px,6vw,72px)}
.features h2{max-width:20ch;font-size:clamp(30px,3.6vw,48px);line-height:1.05;letter-spacing:-.02em;font-weight:700;color:var(--paper)}
.features-lead{max-width:56ch;margin-top:18px;font-size:clamp(17px,1.4vw,20px);line-height:1.5;color:var(--muted)}
.feature-list{list-style:none;margin:clamp(32px,4vw,52px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.feature-list li{padding-top:20px;border-top:1px solid var(--line)}
.feature-list h3{font-size:19px;font-weight:600;letter-spacing:-.01em;color:var(--accent)}
.feature-list p{margin-top:10px;font-size:16px;line-height:1.5;color:var(--muted)}
.footer-brand{display:flex;align-items:center;flex-wrap:wrap;gap:10px 20px}
.footer-brand p{margin:0;font-size:15px;color:var(--muted)}.footer-brand b{color:var(--paper);font-weight:500}
@media(max-width:1100px){.feature-list{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.feature-list{grid-template-columns:1fr;gap:20px}.footer-brand{display:block}.footer-brand p{margin-top:12px}}
.tagline,.hero-cta .small{text-wrap:balance}

/* 2026-10-11: secondary pages (Links, 404) */
.stage--sub{background:var(--canvas)}
.stage--sub .graticule{inset:0}
.page-head{padding-block:clamp(36px,6vw,72px) clamp(24px,3vw,36px)}
.page-head h1{font-size:clamp(48px,7vw,96px);line-height:.95;letter-spacing:-.03em;font-weight:800;color:var(--paper)}
.page-head p{margin-top:16px;font-size:clamp(17px,1.5vw,21px);color:var(--muted)}
.link-group{padding-block:clamp(16px,2vw,24px)}
.link-group:last-of-type{padding-bottom:clamp(48px,7vw,88px)}
.link-group h2{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:500;letter-spacing:.02em;color:var(--muted)}
.link-list{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.link-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px;padding-block:0}
.link-pair .link-list{grid-template-columns:1fr}
.link-card{display:flex;align-items:center;gap:16px;min-height:76px;padding:14px 18px 14px 14px;border-radius:14px;text-decoration:none;color:var(--paper);background:linear-gradient(#22242a,#191b1f);border:1px solid #2f323a;transition:transform 200ms var(--ease),border-color 200ms var(--ease),background 200ms var(--ease)}
.link-card:hover{transform:translateY(-1px);border-color:#4a4560}
.link-card:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.link-icon{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:10px;background:#b4a2e5;color:#17131f}
.link-icon svg{width:24px;height:24px}
.link-text{display:flex;flex-direction:column;gap:3px;min-width:0;margin-right:auto}
.link-text b{font-size:18px;font-weight:600;letter-spacing:-.01em;overflow-wrap:anywhere}
.link-text small{font-size:14px;line-height:1.4;color:var(--muted)}
.link-arrow{flex:none;width:18px;height:18px;color:#7d7f88;transition:color 200ms var(--ease),transform 200ms var(--ease)}
.link-card:hover .link-arrow{color:var(--accent);transform:translate(2px,-2px)}
/* Not live yet: same card, no link. */
.link-card--soon,.link-card--soon:hover{background:transparent;border-style:dashed;border-color:#3a3c44;transform:none}
.link-card--soon .link-icon{opacity:.55}.link-card--soon .link-text b{color:var(--muted)}
.soon{flex:none;padding:4px 10px;border-radius:999px;border:1px solid #3a3c44;font-size:12px;font-weight:500;letter-spacing:.02em;color:var(--muted);white-space:nowrap}
.ru-tag{display:inline-grid;place-items:center;min-width:30px;height:22px;padding:0 6px;border-radius:6px;font-size:12px;font-weight:600;letter-spacing:.04em;color:#17131f;background:#ffad56}
.link-group--ru .link-icon{background:#ffad56}
.link-group--ru .link-card:hover{border-color:#5f4a33}
.link-group--ru .link-card:hover .link-arrow{color:#ffad56}
.page-head--404{padding-bottom:clamp(64px,9vw,120px)}
.page-head--404 .code{margin:0 0 4px;font-size:clamp(15px,1.3vw,17px);font-weight:600;letter-spacing:.12em;color:var(--accent)}
@media(max-width:760px){
  .link-list,.link-pair{grid-template-columns:1fr}
  .link-card{min-height:72px}
  .link-text b{font-size:17px}
  .link-card--soon{display:grid;grid-template-columns:48px minmax(0,1fr);gap:10px 16px;align-items:start}
  .link-card--soon .link-text{margin-right:0}
  .link-card--soon .soon{grid-column:2;justify-self:start}
}
.link-group--ru:last-child{padding-bottom:clamp(48px,7vw,88px)}
/* Privacy page */
.prose{display:grid;gap:10px;max-width:calc(68ch + 2 * var(--gutter));padding-block:0 clamp(56px,8vw,104px)}
.prose h2{margin-top:22px;font-size:clamp(19px,1.6vw,22px);font-weight:600;letter-spacing:-.01em;color:var(--paper)}
.prose h2:first-child{margin-top:0}
.prose p{color:var(--muted)}
.prose a{color:var(--link)}
.prose .updated{margin-top:24px;font-size:14px;color:#8d8f98}