/* dropnook.app — one stylesheet, no web fonts. Light and dark follow the system,
   unless the ☀/☾ switch set data-theme on <html> (theme.js). */
:root{
  --bg:#F4F7F8; --surface:#FFFFFF; --band:#EAF1F2; --ink:#121B21; --ink-2:#33434C; --muted:#5A6B75;
  --line:#D6DFE3; --accent:#0B6E75; --accent-ink:#075056; --accent-soft:#DFEFF0; --public:#B45309;
  --on-accent:#FFFFFF; --shadow:0 24px 60px -28px rgba(18,27,33,.45), 0 4px 14px -8px rgba(18,27,33,.18);
  --no:#C93A2E; --yes:#1E8A43; --yes-soft:#EAF6EE;
  --other-bg:#EFF5F2; --other-ink:#3F4947; --other-head:#006A60;   /* "other solutions": LocalSend's colours */
  --radius:14px; color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0A1013; --surface:#141C21; --band:#0F171B; --ink:#E3EBEF; --ink-2:#C2CFD6; --muted:#93A4AE;
    --line:#24313A; --accent:#54C0C4; --accent-ink:#8CD9DC; --accent-soft:#13302F; --public:#F0A54A;
    --on-accent:#08161A; --shadow:0 24px 60px -28px rgba(0,0,0,.9), 0 4px 14px -8px rgba(0,0,0,.6);
    --no:#F07167; --yes:#4CC77A; --yes-soft:#11261A;
    --other-bg:#131E1C; --other-ink:#A0B0AD; --other-head:#82D5C8;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0A1013; --surface:#141C21; --band:#0F171B; --ink:#E3EBEF; --ink-2:#C2CFD6; --muted:#93A4AE;
  --line:#24313A; --accent:#54C0C4; --accent-ink:#8CD9DC; --accent-soft:#13302F; --public:#F0A54A;
  --on-accent:#08161A; --shadow:0 24px 60px -28px rgba(0,0,0,.9), 0 4px 14px -8px rgba(0,0,0,.6);
  --no:#F07167; --yes:#4CC77A; --yes-soft:#11261A;
  --other-bg:#131E1C; --other-ink:#A0B0AD; --other-head:#82D5C8;
  color-scheme:dark;
}
:root[data-theme="light"]{color-scheme:light}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:76px}
body{margin:0; background:var(--bg); color:var(--ink);
     font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
     -webkit-text-size-adjust:100%}
img{max-width:100%; height:auto; display:block}
a{color:var(--accent)}
code{font:.9em ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; background:var(--accent-soft);
     color:var(--accent-ink); padding:.1em .35em; border-radius:4px}
h1,h2,h3{line-height:1.15; letter-spacing:-.02em; margin:0}
h2{font-size:clamp(1.7rem, 3.4vw, 2.4rem); text-align:center; margin-bottom:14px}
h1 em, h2 em{font-style:normal; color:var(--accent)}   /* the key words of a heading, in the colour of "nook" */
h3{font-size:1.08rem; letter-spacing:-.01em}
.wrap{max-width:1160px; margin:0 auto; padding:0 24px}
.narrow{max-width:760px}
section{padding:84px 0}
.band{background:var(--band)}
.sub{color:var(--muted); text-align:center; max-width:640px; margin:0 auto 34px}
.sub.wide{max-width:780px}
.center{text-align:center; justify-content:center}
.ctas + .sub{margin-top:18px}

/* "Dropnook" in running text, coloured as in the logo */
.dn span{color:var(--accent)}

/* ---------------------------------------------------------------- Header */
.top{position:sticky; top:0; z-index:10; background:color-mix(in srgb, var(--bg) 86%, transparent);
     -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.top-in{display:flex; align-items:center; gap:24px; height:64px}
.brand img{height:26px; width:auto}
.links{display:flex; gap:22px; margin-left:auto}
.links a{color:var(--ink-2); text-decoration:none; font-size:15px; font-weight:550}
.links a:hover{color:var(--accent)}
.top-right{display:flex; align-items:center; gap:14px}
.langs{display:flex; border:1px solid var(--line); border-radius:8px; overflow:hidden}
.langs a{color:var(--muted); text-decoration:none; font-size:13px; font-weight:650; padding:6px 10px}
.langs a[aria-current="page"]{background:var(--accent); color:var(--on-accent)}
/* ☀/☾: the side the page shows is in the accent colour, the side chosen by hand is filled. */
.theme-switch{display:flex; border:1px solid var(--line); border-radius:8px; overflow:hidden}
.theme-switch[hidden]{display:none}
.theme-switch button{border:0; background:transparent; color:var(--muted); padding:7px 9px; line-height:0; cursor:pointer;
  transition:background .15s, color .15s}
.theme-switch button + button{border-left:1px solid var(--line)}
.theme-switch svg{width:16px; height:16px; display:block; fill:none; stroke:currentColor; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round}
.theme-switch button:hover{background:var(--accent-soft); color:var(--accent)}
.theme-switch button.shown{color:var(--accent)}
.theme-switch button[aria-pressed="true"]{background:var(--accent); color:var(--on-accent)}
.theme-switch button:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}

/* ---------------------------------------------------------------- Buttons */
.btn{display:inline-block; background:var(--accent); color:var(--on-accent); text-decoration:none;
     font-weight:650; font-size:16px; padding:12px 22px; border-radius:10px; border:1px solid var(--accent);
     transition:filter .15s, background .15s}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent; color:var(--accent); border-color:var(--line)}
.btn.ghost:hover{background:var(--accent-soft); filter:none}
.btn.small{font-size:14px; padding:7px 14px; border-radius:8px}
.ctas{display:flex; gap:12px; flex-wrap:wrap; margin:28px 0 0}
.ctas .btn{display:inline-flex; flex-direction:column; align-items:center; justify-content:center}
.btn.two{line-height:1.25; padding:9px 22px}
.btn.two small{font-size:13.5px; font-weight:550; opacity:.85}

/* ---------------------------------------------------------------- Hero */
.hero{padding:72px 0 88px;
      background:radial-gradient(900px 520px at 85% 0%, var(--accent-soft), transparent 70%)}
.hero-in{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.15fr); gap:56px; align-items:center}
.kicker{color:var(--accent); font-weight:700; font-size:14px; letter-spacing:.06em; text-transform:uppercase; margin:0 0 14px}
h1{font-size:clamp(2.3rem, 5.2vw, 3.7rem); font-weight:780; letter-spacing:-.03em}
.lead{font-size:1.18rem; color:var(--ink-2); margin:22px 0 0; max-width:34em}
.note{color:var(--muted); font-size:14px; margin:22px 0 0}
.hero-shot{display:block; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
           border:1px solid var(--line); transition:transform .2s}
.hero-shot:hover{transform:translateY(-2px)}

/* ---------------------------------------------------------------- Why: usually ✗ / with Dropnook ✓ */
.vh{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.why{max-width:980px; margin:34px auto 0; background:var(--surface); border:1px solid var(--line);
     border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}
.why-head, .why li{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.15fr)}
.why-head > span{padding:12px 20px 12px 56px; font-size:12.5px; font-weight:700; letter-spacing:.07em;
               text-transform:uppercase; color:var(--other-head); background:var(--other-bg)}
.why-head > span + span{color:var(--yes); background:var(--yes-soft)}
.why-head .dn{color:var(--ink)}   /* the name in its two colours, as everywhere */
.why ul{list-style:none; margin:0; padding:0}
.why li{border-top:1px solid var(--line)}
.why p{position:relative; margin:0; padding:15px 20px 15px 56px; font-size:15.5px; line-height:1.45}
.why .no{color:var(--other-ink); background:var(--other-bg)}
.why .yes{color:var(--ink); font-weight:600; background:var(--yes-soft)}
.why p::before{content:""; position:absolute; left:20px; top:14px; width:22px; height:22px; border-radius:50%;
               background:var(--no) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='m8 8 8 8M16 8l-8 8'/%3E%3C/svg%3E") center/13px no-repeat}
.why .yes::before{background:var(--yes) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/14px no-repeat}

/* ---------------------------------------------------------------- Features */
.grid{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:20px; margin-top:38px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px 24px}
.card svg{width:30px; height:30px; fill:none; stroke:var(--accent); stroke-width:1.8; stroke-linecap:round;
          stroke-linejoin:round; margin-bottom:14px}
.card.public svg{stroke:var(--public)}
.card p{color:var(--ink-2); margin:8px 0 0; font-size:15.5px}

/* ---------------------------------------------------------------- Screenshots */
.shots{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:20px}
.shots a{color:var(--ink-2); text-decoration:none; font-weight:600; font-size:15px}
.shots picture{display:block; border-radius:10px; overflow:hidden; border:1px solid var(--line);
               box-shadow:var(--shadow); margin-bottom:10px; transition:transform .2s}
.shots a:hover picture{transform:translateY(-3px)}
.shots a:hover{color:var(--accent)}

/* ---------------------------------------------------------------- Light / dark slider */
.compare{--pos:50%; position:relative; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line);
         box-shadow:var(--shadow); background:var(--surface); cursor:ew-resize; touch-action:pan-y;
         -webkit-user-select:none; user-select:none}
.compare img{width:100%; pointer-events:none; -webkit-user-drag:none}
.compare img.dark{position:absolute; inset:0; height:100%; clip-path:inset(0 0 0 var(--pos))}
.compare .handle{position:absolute; top:0; bottom:0; left:var(--pos); width:3px; margin-left:-1.5px; background:#FFFFFF;
                 box-shadow:0 0 0 1px rgba(10,16,19,.18), 0 0 14px rgba(10,16,19,.35)}
.compare .handle svg{position:absolute; top:50%; left:50%; width:52px; height:52px; margin:-26px 0 0 -26px; padding:12px;
                 border-radius:50%; background:#FFFFFF; fill:none; stroke:#121B21; stroke-width:2.2; stroke-linecap:round;
                 stroke-linejoin:round; box-shadow:0 0 0 1px rgba(10,16,19,.12), 0 6px 18px rgba(10,16,19,.4)}
.compare:focus-within .handle svg{outline:3px solid var(--accent); outline-offset:3px}
.compare input{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
.compare .mode{position:absolute; top:4.5%; display:flex; align-items:center; gap:6px; font-size:14px; font-weight:650;
               padding:5px 12px 5px 9px; border-radius:999px; box-shadow:0 4px 14px rgba(10,16,19,.25); white-space:nowrap}
.compare .mode svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.compare .mode.lt{right:calc(100% - var(--pos) + 14px); background:var(--lt-bg, #0B6E75); color:var(--lt-ink, #FFFFFF)}
.compare .mode.dk{left:calc(var(--pos) + 14px); background:var(--dk-bg, #54C0C4); color:var(--dk-ink, #08161A)}
/* The five colour layouts above the slider; compare.js swaps its pictures. */
.colours{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:0 0 24px}
.colours button{display:inline-flex; align-items:center; gap:9px; font:inherit; font-size:15px; font-weight:600;
                padding:7px 16px 7px 9px; border-radius:999px; border:1px solid var(--line); background:var(--surface);
                color:var(--ink-2); cursor:pointer; transition:border-color .15s, box-shadow .15s}
.colours button:hover{border-color:var(--muted)}
.colours button[aria-pressed="true"]{color:var(--ink); border-color:var(--ink); box-shadow:0 0 0 1px var(--ink)}
.colours button:focus-visible{outline:3px solid var(--accent); outline-offset:2px}
.sw{width:22px; height:22px; border-radius:50%; flex:none; box-shadow:inset 0 0 0 1px rgba(0,0,0,.16)}
.sw.teal{background:#1E9AA0} .sw.blue{background:#3F7BE0} .sw.violet{background:#8466DE} .sw.coral{background:#E0607A}
.sw.gold{background:linear-gradient(135deg,#FF9908,#FFB229 40%,#FFE870)}

/* ---------------------------------------------------------------- How, security */
.diagram{display:block; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
         padding:14px; box-shadow:var(--shadow)}
.checks{list-style:none; padding:0; margin:34px auto 0; max-width:820px; display:grid; gap:16px}
.checks li{position:relative; padding:18px 20px 18px 56px; background:var(--surface); border:1px solid var(--line);
           border-radius:var(--radius); color:var(--ink-2)}
.checks li::before{content:""; position:absolute; left:20px; top:20px; width:22px; height:22px; border-radius:50%;
           background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/14px no-repeat}
.checks b{color:var(--ink)}

/* ---------------------------------------------------------------- Install */
.steps{list-style:none; padding:0; margin:38px 0 0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
       gap:20px; counter-reset:step}
.steps li{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px 24px;
          counter-increment:step}
.steps li::before{content:counter(step); display:grid; place-items:center; width:34px; height:34px; border-radius:50%;
          background:var(--accent-soft); color:var(--accent-ink); font-weight:750; margin-bottom:14px}
.steps p{color:var(--ink-2); margin:8px 0 0; font-size:15.5px}
.tip{max-width:820px; margin:22px auto 0; padding:14px 20px 14px 52px; position:relative; font-size:15.5px;
     color:var(--ink-2); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius)}
.tip::before{content:"i"; position:absolute; left:18px; top:15px; width:22px; height:22px; border-radius:50%;
     display:grid; place-items:center; background:var(--accent); color:var(--on-accent);
     font:700 14px/1 Georgia,"Times New Roman",serif; font-style:italic}
.tip code{font-size:.88em; white-space:nowrap}
.tip b{color:var(--ink)}

/* ---------------------------------------------------------------- FAQ */
details{background:var(--surface); border:1px solid var(--line); border-radius:12px; margin:12px 0; padding:0 20px}
summary{cursor:pointer; font-weight:650; padding:16px 0; list-style:none; position:relative; padding-right:28px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; position:absolute; right:0; top:12px; font-size:22px; color:var(--accent); font-weight:400}
details[open] summary::after{content:"–"}
details p{margin:0 0 18px; color:var(--ink-2)}

/* ---------------------------------------------------------------- Footer */
.foot{border-top:1px solid var(--line); padding:34px 0 48px; color:var(--muted); font-size:14.5px; text-align:center}
.foot b{color:var(--ink)}
.foot .fine{font-size:13px; max-width:760px; margin:10px auto 0}

/* ---------------------------------------------------------------- Narrow screens */
@media (max-width:960px){
  .hero-in{grid-template-columns:1fr; gap:40px}
  .grid,.shots,.steps{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .links{display:none}
  .top-right{margin-left:auto}
}
@media (max-width:620px){
  body{font-size:16px}
  .wrap{padding:0 16px}
  section{padding:60px 0}
  .hero{padding:44px 0 60px}
  .grid,.shots,.steps{grid-template-columns:1fr}
  .why-head{display:none}
  .why li{grid-template-columns:1fr}
  .why .no{padding-bottom:6px}
  .why .yes{background:transparent}
  .brand img{height:21px}
  .compare .mode{font-size:12px; padding:3px 9px 3px 7px}
  .compare .handle svg{width:44px; height:44px; margin:-22px 0 0 -22px; padding:10px}
  .top-right .btn{display:none}
}
/* Sliding in on scroll (reveal.js) */
.reveal{opacity:0; transform:translateY(22px);
        transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1)}
.reveal.is-in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){*{transition:none !important; scroll-behavior:auto !important}
  .reveal{opacity:1; transform:none}}