:root{--ink:#1d2b45;--ink2:#4a5878;--sky:#e6f1f9;--edge:#a4cdee;--link:#0a56aa;--text:#1c1c1e;--muted:#55555b;--bg:var(--sky);
  --nav-text:#1c1c1e;--nav-muted:#55555b;
  --sky0:#86bde6;--sky1:#a4cdee;--sky2:#c3e0f3;--sky3:#e0eef4;--sky4:#f6ecdc;--near:#61808a;
  --clouds:1;--cloud:#ffffff;--cloud-shade:#dbe8f3;--stars:0;--moon:none;
  --card:#fff;--line:var(--ink);--frame:var(--ink);--frame2:var(--ink2);--frame-edge:var(--ink);--dim:1;--dframe:var(--frame);--dframe2:var(--frame2);--dedge:var(--frame-edge);--dshadow:rgba(29,43,69,.22);--on:var(--ink);--on-fg:#fff;--badge-ring:transparent}
:root[data-mode="night"]{--nav-text:#f2f2f3;--nav-muted:#b4b4ba;
  --sky0:#050816;--sky1:#090e25;--sky2:#0f1537;--sky3:#181a48;--sky4:#29215a;--near:#0e122e;
  --clouds:0;--stars:.004;--star:#ffffff;--star-dim:#7c86b8;--moon:#f2edd6;
  --text:#f2f2f3;--muted:#b4b4ba;--link:#7dbbff;--sky:#050816;--card:#0a0f26;--line:#5a6498;--edge:#29215a;--ink:#8a94c6;--ink2:#5a6498;
  --frame:#121838;--frame2:#2c3466;--frame-edge:#6b75ad;--dim:.85;--dframe:#151c42;--dframe2:#343d78;--dedge:#7e8acc;--dshadow:rgba(0,0,0,.55);--on:#f2f2f3;--on-fg:#0f1537;--badge-ring:#8a94c6}
.title h1{color:var(--nav-text)}.title .tagline{color:var(--nav-muted)}
*{box-sizing:border-box}
body{margin:0;background:var(--sky);color:var(--text);font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.title{position:absolute;top:28px;left:0;right:0;text-align:center;z-index:1}
.title h1,.title .tagline{width:fit-content;margin-left:auto;margin-right:auto}
h1{margin:0;font-size:3.2rem;line-height:1.1;letter-spacing:-0.02em}
.tagline{margin:.4rem 0 0;color:var(--muted);font-size:1.5rem;line-height:1.3}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
a{color:var(--link);text-decoration:none}a:hover{text-decoration:underline}

/* banner */
#banner{position:relative;overflow:hidden;height:328px;background:var(--sky0);border-bottom:4px solid var(--line)}
#banner canvas{position:absolute;left:0;top:0;display:block;width:100%;height:100%;image-rendering:pixelated}

/* cards */
main{max-width:1040px;margin:40px auto;padding:0 16px;display:grid;gap:36px}
.app{display:grid;grid-template-columns:minmax(220px,340px) 1fr;gap:32px;align-items:center;
  background:var(--card);border:4px solid var(--line);box-shadow:8px 8px 0 var(--edge);padding:32px}
.info h2{margin:0 0 10px;font-size:2rem;line-height:1.1;letter-spacing:-.02em;display:flex;align-items:center;gap:12px}
.info h2::before{content:"";width:12px;height:12px;background:var(--line);box-shadow:12px 0 0 var(--edge),0 12px 0 var(--edge);margin-right:12px;flex:none}
.info p{margin:0 0 18px;color:var(--muted);font-size:1.1rem}
.badge{display:block;width:fit-content}
.badge img{display:block;height:48px;width:auto;border-radius:8px;box-shadow:0 0 0 1px var(--badge-ring)}
.links{margin-top:14px;font-size:.95rem;color:var(--muted)}
.links a{margin:0 4px}.info h2,.links{font-family:inherit}.links a:first-child{margin-left:0}.links a:last-child{margin-right:0}
.devices{display:flex;gap:28px;justify-content:center;align-items:flex-end}
.devices figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:10px}
.shadow{display:block;filter:drop-shadow(5px 5px 0 var(--dshadow))}
.devices figcaption{font-size:14px;line-height:1;color:var(--muted)}

/* reusable pixel device frame: <img class="device iphone"> / <img class="device ipad"> */
.device{--L:clamp(180px,30vw,400px);box-sizing:border-box;display:block;background-color:var(--dedge);--e:2px;--g:linear-gradient(var(--dframe),var(--dframe));
  --sz:calc(100% - 4*var(--s) - 2*var(--e)) calc(100% - 2*var(--e)),calc(100% - 2*var(--s) - 2*var(--e)) calc(100% - 2*var(--s) - 2*var(--e)),calc(100% - 2*var(--e)) calc(100% - 4*var(--s) - 2*var(--e));
  --ps:calc(2*var(--s) + var(--e)) var(--e),calc(var(--s) + var(--e)) calc(var(--s) + var(--e)),var(--e) calc(2*var(--s) + var(--e));
  background-image:var(--g),var(--g),var(--g);background-size:var(--sz);background-position:var(--ps);background-repeat:no-repeat;width:auto;height:auto;--s:4px;
  clip-path:polygon(0 calc(var(--s)*2),var(--s) calc(var(--s)*2),var(--s) var(--s),calc(var(--s)*2) var(--s),calc(var(--s)*2) 0,
    calc(100% - var(--s)*2) 0,calc(100% - var(--s)*2) var(--s),calc(100% - var(--s)) var(--s),calc(100% - var(--s)) calc(var(--s)*2),100% calc(var(--s)*2),
    100% calc(100% - var(--s)*2),calc(100% - var(--s)) calc(100% - var(--s)*2),calc(100% - var(--s)) calc(100% - var(--s)),calc(100% - var(--s)*2) calc(100% - var(--s)),calc(100% - var(--s)*2) 100%,
    calc(var(--s)*2) 100%,calc(var(--s)*2) calc(100% - var(--s)),var(--s) calc(100% - var(--s)),var(--s) calc(100% - var(--s)*2),0 calc(100% - var(--s)*2))}
.device.iphone{max-height:calc(var(--L)*.6);max-width:calc(var(--L)*.6);padding:18px 10px 14px;--s:6px;
  background-image:linear-gradient(var(--dframe2),var(--dframe2)),var(--g),var(--g),var(--g);background-size:28px 6px,var(--sz);background-position:center 6px,var(--ps)}
.device.ipad{padding:12px;max-height:var(--L);max-width:var(--L);
  background-image:linear-gradient(var(--dframe2),var(--dframe2)),var(--g),var(--g),var(--g);background-size:4px 4px,var(--sz);background-position:center 4px,var(--ps)}
.device{object-fit:contain;filter:brightness(var(--dim));transition:filter .3s}

footer{text-align:center;padding:0 16px 40px;font-size:14px;color:var(--muted)}

@media(max-width:760px){
  .title{top:54px}h1{font-size:2.4rem}.tagline{font-size:1.2rem}
  #banner{height:257px}
  .app{grid-template-columns:1fr;padding:20px;gap:22px}
  .info{text-align:center}.info h2{justify-content:center}.badge{margin:0 auto}
  .devices{gap:14px}
  .device.iphone{padding:14px 7px 10px;--s:4px}
  .device.ipad{padding:8px}
  .device{--L:52vw}
}

    /* Site nav: identical on both pages */
.sitenav { position: absolute; top: 20px; left: 20px; z-index: 5; display: flex; gap: 22px; margin: 0; font: 15px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.sitenav a { color: var(--nav-muted); padding: 4px 0; text-decoration: none; }
.sitenav a:hover, .sitenav a:focus-visible { color: var(--nav-text); text-decoration: none; }
.sitenav a[aria-current] { color: var(--nav-text); font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
/* Icons at the top, for debugging: jump to a point in the seasons loop. Hidden unless ?debug is in the URL. */
.scenes { display: none; }
[data-debug] .scenes { position: fixed; z-index: 6; top: 8px; left: 0; right: 0; display: flex; justify-content: center; gap: 4px; }
.scenes button { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer; }
.scenes button:hover, .scenes button:focus-visible { color: var(--text); }
[data-mode="night"] .scenes button svg { fill: currentColor; }
.scenes svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }


/* Support / privacy pages: short sky banner, one text card */
#banner.short{height:180px}
.doc{width:100%;max-width:760px;margin:0 auto;background:var(--card);border:4px solid var(--line);box-shadow:8px 8px 0 var(--edge);padding:32px 40px}
.doc h2{margin:1.8em 0 .5em;font-size:1.5rem;line-height:1.2;letter-spacing:-.01em;display:flex;align-items:center;gap:10px}
.doc h2::before{content:"";width:8px;height:8px;background:var(--line);box-shadow:8px 0 0 var(--edge),0 8px 0 var(--edge);margin-right:8px;flex:none}
.doc h2:first-child{margin-top:0}
.doc h3{margin:1.4em 0 .4em;font-size:1.15rem;line-height:1.3}
.doc p,.doc ul{margin:0 0 1em}
.doc ul{padding-left:1.4em}
.doc li{margin:.2em 0}
.doc > :last-child{margin-bottom:0}
@media(max-width:760px){
  #banner.short{height:150px}
  .doc{padding:20px}
  .doc h2{font-size:1.3rem}
}