/* skillknex.app — smart app-download page. Light-first; dark handled gracefully.
   Palette mirrors web/src/lib/design.ts landing tokens. Lime (#72B30D) stays
   reserved for the action node + tiny accents, never navigation. */

:root{
  --bg:#F6F8FB; --bgAlt:#EEF4F8; --panel:#FFFFFF;
  --ink:#07111F; --inkSoft:#526275; --inkFaint:#8A97A8;
  --blue:#0D93D0; --blueDark:#0A78AC; --blueSoft:#E6F5FC;
  --lime:#72B30D; --greenSoft:#EFF8E8;
  --line:rgba(7,17,31,.09); --line2:rgba(7,17,31,.14);
  --shadow:0 30px 60px -32px rgba(9,30,55,.28);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0A1018; --bgAlt:#0C131D; --panel:#111A26;
    --ink:#F3F7FB; --inkSoft:#9DB0C4; --inkFaint:#63748A;
    --blueSoft:rgba(13,147,208,.14); --greenSoft:rgba(114,179,13,.14);
    --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.15);
    --shadow:0 30px 60px -32px rgba(0,0,0,.7);
  }
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  font-family:var(--font);color:var(--ink);min-height:100vh;min-height:100svh;
  background:
    radial-gradient(60% 40% at 50% -6%, var(--blueSoft), transparent 70%),
    radial-gradient(50% 34% at 50% 108%, var(--greenSoft), transparent 70%),
    var(--bg);
  -webkit-font-smoothing:antialiased;
}
.page{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:28px 20px 40px;padding-top:max(28px,calc(env(safe-area-inset-top) + 18px));padding-bottom:max(40px,calc(env(safe-area-inset-bottom) + 24px));
  overflow-x:hidden}

/* Living node network — drifting connections with an occasional lime pulse
   ("an action just happened"), the same motif used on the app's splash
   screen. Sits behind the card, on top of the ambient radial-gradient wash. */
.bg-network{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}

.card{position:relative;z-index:1;width:100%;max-width:500px;
  --panel:#FFFFFF;--bgAlt:#EEF4F8;--ink:#07111F;--inkSoft:#526275;--inkFaint:#8A97A8;
  --blueSoft:#E6F5FC;--line:rgba(23,55,83,.12);--line2:rgba(23,55,83,.16);
  background:var(--panel);color:var(--ink);border:1px solid var(--line);
  border-radius:32px;box-shadow:0 36px 88px -40px rgba(0,0,0,.64);padding:42px 38px 32px;text-align:center}

/* brand */
.brand{display:inline-flex;align-items:center;gap:11px;margin-bottom:30px}
.markWrap{display:inline-flex;line-height:0}
.mark{height:24px;width:auto;object-fit:contain}
.word{font-size:28px;font-weight:750;letter-spacing:0;line-height:1}
.word b{font-weight:750}
.word .k{color:var(--lime)}

.eyebrow{font-size:11px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--blue)}
h1{font-size:34px;line-height:1.08;letter-spacing:-.025em;font-weight:800;margin:16px 0 0;text-wrap:balance}
.sub{margin:16px auto 0;color:var(--inkSoft);font-size:15.5px;line-height:1.58;max-width:34ch}

/* cta */
.cta{margin-top:30px}
.statusChip{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:650;
  color:var(--blue);background:var(--blueSoft);border:1px solid var(--line);padding:6px 12px;border-radius:999px}
.statusChip .pulse{width:7px;height:7px;border-radius:50%;background:var(--lime);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(114,179,13,.45)}70%{box-shadow:0 0 0 7px rgba(114,179,13,0)}100%{box-shadow:0 0 0 0 rgba(114,179,13,0)}}

.badges{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.badge{display:inline-flex;align-items:center;gap:10px;background:#0A0E14;color:#fff;
  border-radius:13px;padding:11px 16px;text-decoration:none;min-width:168px;border:1px solid #0A0E14;
  transition:transform .12s ease, opacity .2s ease;position:relative}
.badge:hover{transform:translateY(-2px)}
.badge:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.badge .glyph{width:22px;height:22px;flex:none}
.badge .bt{text-align:left;line-height:1.05}
.badge .bt small{display:block;font-size:9.5px;letter-spacing:0;opacity:.85;font-weight:500}
.badge .bt span{display:block;font-size:16px;font-weight:600;letter-spacing:0}
.badge.muted{opacity:.5;filter:grayscale(.2);pointer-events:none}
.badge.dim{opacity:.42;filter:grayscale(.5)}
.soon{position:absolute;top:-9px;right:-8px;background:var(--lime);color:#08210a;font-size:9px;
  font-weight:800;letter-spacing:0;text-transform:uppercase;padding:3px 7px;border-radius:999px}

.notify{margin-top:22px;display:flex;gap:4px;max-width:372px;margin-left:auto;margin-right:auto;
  padding:4px;background:var(--bgAlt);border:1px solid var(--line2);border-radius:16px}
.notify input{flex:1;min-width:0;font-family:var(--font);font-size:14.5px;color:var(--ink);
  background:transparent;border:0;border-radius:12px;padding:12px 14px}
.notify input::placeholder{color:var(--inkFaint)}
.notify input:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.notify button{flex:none;font-family:var(--font);font-weight:700;font-size:14px;color:#fff;
  background:var(--blue);border:0;border-radius:12px;padding:12px 18px;cursor:pointer;transition:background .15s}
.notify button:hover{background:var(--blueDark)}
.notify button:disabled{opacity:.6;cursor:default}
.notify button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.turnstile{flex-basis:100%;min-height:0;display:flex;justify-content:center;overflow:hidden}
.turnstile:empty{display:none}
.consent{display:flex;align-items:flex-start;gap:8px;max-width:372px;margin:11px auto 0;color:var(--inkFaint);font-size:11.5px;line-height:1.45;text-align:left}
.consent input{flex:0 0 auto;width:16px;height:16px;margin:1px 0 0;accent-color:var(--blue)}
.consent a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.website-trap{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}

.qr{margin:18px auto 0;width:132px;height:132px;border-radius:16px;background:var(--bgAlt);
  border:1px solid var(--line);display:grid;place-items:center;color:var(--ink)}
.qr svg{width:104px;height:104px}
.note{margin-top:16px;color:var(--inkFaint);font-size:12.5px;line-height:1.5}
.hidden{display:none}

.foot{margin-top:30px;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px;align-items:center}
.foot .links{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
.foot a{color:var(--inkSoft);font-size:12.5px;text-decoration:none;font-weight:550}
.foot a:hover{color:var(--blue)}
.foot .copy{color:var(--inkFaint);font-size:11.5px}

@media (min-width:700px){
  .page{padding-top:max(36px,calc(env(safe-area-inset-top) + 24px));padding-bottom:max(44px,calc(env(safe-area-inset-bottom) + 28px))}
  .card{max-width:540px;padding:46px 44px 36px}
  .badges{gap:14px}
}

@media (max-width:520px){
  .page{padding:18px 14px 28px;padding-top:max(18px,calc(env(safe-area-inset-top) + 14px));padding-bottom:max(28px,calc(env(safe-area-inset-bottom) + 18px))}
  .card{border-radius:26px;padding:32px 24px 26px}
  .brand{margin-bottom:20px}
  .mark{height:22px;width:auto}
  .word{font-size:26px}
  h1{font-size:29px}
  .sub{font-size:15px}
  .badges{flex-direction:column;align-items:stretch}
  .badge{justify-content:center;min-width:0;width:100%}
  .notify{flex-direction:column}
  .notify button{width:100%}
  .consent{max-width:372px}
  .foot .links{gap:12px}
}

@media (max-width:360px){
  .card{padding:20px 14px 20px}
  .brand{margin-bottom:16px}
  h1{font-size:27px}
  .sub{line-height:1.45}
  .cta{margin-top:20px}
  .badges{margin-top:14px}
  .badge{padding-left:12px;padding-right:12px}
  .notify{margin-top:16px}
  .note{margin-top:12px}
  .foot{margin-top:18px;padding-top:14px}
}

@media (prefers-reduced-motion:reduce){.statusChip .pulse{animation:none}.badge{transition:none}}