/* ============ Rabbit Hole ============
   The app's own page, so it keeps the app's dark room rather than the cream of
   the rest of the site: black paper, one gold, photographs doing the talking.
   The only tie back to bot&pixel is Silkscreen on the micro-labels, the same
   pixel font the landing uses.

   Silkscreen is re-declared here so this page never loads site.css. Same files,
   already cached; the version stays in the file name because /assets/* is
   immutable, see public/_headers. Latin only: this page is English. */
@font-face{
  font-family:'Silkscreen';font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/silkscreen-v6-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Silkscreen';font-style:normal;font-weight:700;font-display:swap;
  src:url(/assets/fonts/silkscreen-v6-700-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ============ tokens ============ */
:root{
  --bg:#100F14;        /* the icon's own corner colour, so the icon has no edge */
  --panel:#17161C;
  --line:rgba(247,217,140,.14);
  --text:#F2F0EA;
  --dim:#CFCBC2;
  --muted:#948F85;
  --gold:#F7D98C;
  --amber:#CC9E4D;
  --col:1040px;
  --round:20px;
  --rounded:ui-rounded,'SF Pro Rounded',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
/* The hero's tunnel is wider than the window on purpose, and the screenshot
   rail is a full 100vw; clip on both elements so neither can be scrolled to
   sideways. `clip` rather than `hidden` so the top bar can stay sticky. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:400 17px/1.6 -apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',system-ui,Roboto,'Helvetica Neue',Arial,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img,svg{display:block;max-width:100%}
a{color:var(--gold);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
h1,h2,h3{font-family:var(--rounded);letter-spacing:-.02em;margin:0}
p{margin:0 0 1em}
.wrap{width:100%;max-width:var(--col);margin:0 auto;padding:0 24px}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}

/* the pixel micro-label, the one thing carried over from the rest of the site */
.px{
  font-family:'Silkscreen',ui-monospace,monospace;font-size:11px;line-height:1;
  letter-spacing:.14em;text-transform:uppercase;color:var(--amber);
}

/* ============ top bar ============ */
.bar{
  position:sticky;top:0;z-index:20;
  background:rgba(16,15,20,.82);backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid rgba(255,255,255,.05);
}
.bar__in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:52px}
.bar a{color:var(--muted);text-decoration:none}
.bar a:hover{color:var(--gold);text-decoration:none}
.bar .home::before{content:'\2190\00a0'}

/* ============ hero ============ */
.hero{position:relative;padding:64px 0 40px;text-align:center;isolation:isolate}
/* the tunnel: rings of the icon, blown up behind the page and breathing slowly */
.hero::before{
  content:'';position:absolute;z-index:-1;inset:-30% -50% auto;height:1100px;
  background:
    radial-gradient(closest-side,rgba(247,217,140,.16),rgba(247,217,140,0) 100%),
    repeating-radial-gradient(circle at 50% 34%,
      rgba(247,217,140,.055) 0 2px,rgba(247,217,140,0) 2px 92px);
  -webkit-mask-image:radial-gradient(closest-side at 50% 34%,#000 20%,transparent 78%);
          mask-image:radial-gradient(closest-side at 50% 34%,#000 20%,transparent 78%);
  animation:breathe 22s ease-in-out infinite;
  pointer-events:none;
}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

.hero__icon{
  width:112px;height:112px;margin:0 auto 22px;border-radius:22.5%;
  filter:drop-shadow(0 24px 70px rgba(247,217,140,.22));
}
h1{font-size:clamp(42px,8.5vw,68px);line-height:1.02;margin:0 0 10px}
.hero__tag{font-family:var(--rounded);font-size:clamp(19px,3.4vw,24px);color:var(--gold);margin:0 0 22px}
.hero__lede{max-width:640px;margin:0 auto;color:var(--dim);font-size:19px}

.cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:center;margin:30px 0 8px}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 24px;border-radius:999px;
  background:linear-gradient(180deg,#F7D98C,#E0BC6B);color:#17130A;
  font-family:var(--rounded);font-weight:600;font-size:18px;text-decoration:none;
  box-shadow:0 10px 30px rgba(247,217,140,.18);
  transition:transform .18s cubic-bezier(.2,.8,.3,1),box-shadow .18s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(247,217,140,.26);text-decoration:none}
.btn:active{transform:translateY(0) scale(.985)}
.btn svg{width:20px;height:20px;fill:currentColor}
.cta__meta{color:var(--muted);font-size:15px}

/* ============ sections ============ */
section{padding:56px 0}
.eyebrow{margin:0 0 10px}
h2{font-size:clamp(26px,4.6vw,36px);margin:0 0 18px}
.lede{color:var(--dim);max-width:640px;font-size:18px}

/* ============ screenshot rail ============ */
/* The rail bleeds to both edges of the window while its first card still lines
   up with the text above, so the next card always peeks in and the row reads as
   something you can push. */
.rail{
  display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;
  width:100vw;margin-left:calc(50% - 50vw);
  padding:8px 24px 26px calc(50vw - 50% + 24px);
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.rail::-webkit-scrollbar{display:none}
.shot{flex:0 0 232px;scroll-snap-align:center}
.shot img{
  width:232px;border-radius:26px;border:1px solid rgba(255,255,255,.09);
  box-shadow:0 30px 70px rgba(0,0,0,.65);
  transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s ease;
}
.shot:hover img{transform:translateY(-6px);box-shadow:0 40px 90px rgba(0,0,0,.75)}
.shot figcaption{margin-top:14px}
.shot figcaption b{display:block;font-family:var(--rounded);font-weight:600;font-size:15px;margin-top:5px}
.rail__hint{color:var(--muted);font-size:14px;margin:0}

/* ============ cards ============ */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:14px}
.card{
  background:var(--panel);border:1px solid rgba(255,255,255,.06);border-radius:var(--round);
  padding:20px 22px;transition:border-color .2s ease,transform .2s cubic-bezier(.2,.8,.3,1);
}
.card:hover{border-color:var(--line);transform:translateY(-3px)}
.card svg{width:26px;height:26px;stroke:var(--gold);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:12px}
.card b{display:block;font-family:var(--rounded);font-size:17px;margin-bottom:4px}
.card span{color:var(--muted);font-size:15px;line-height:1.5}

/* ============ deeper ============ */
.deeper{display:grid;grid-template-columns:1fr 260px;gap:48px;align-items:center}
.deeper img{width:240px;border-radius:26px;border:1px solid rgba(255,255,255,.09);box-shadow:0 30px 70px rgba(0,0,0,.65)}
.stack{position:relative}
.stack::before,.stack::after{
  content:'';position:absolute;inset:0;border-radius:26px;border:1px solid rgba(247,217,140,.16);
  width:240px;
}
.stack::before{transform:translate(14px,-14px) scale(.98);opacity:.6}
.stack::after{transform:translate(28px,-28px) scale(.96);opacity:.3}

/* ============ absent list ============ */
.absent{display:flex;flex-wrap:wrap;gap:10px 12px;padding:0;margin:0;list-style:none}
.absent li{
  font-family:var(--rounded);font-size:clamp(18px,3vw,24px);color:var(--muted);
  border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:8px 18px;
}
.absent li::before{content:'\2717\00a0\00a0';color:var(--amber)}

/* ============ sources ============ */
.sources{display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:0 0 18px;list-style:none}
.sources li{
  border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:7px 16px;
  color:var(--dim);font-size:15px;background:rgba(255,255,255,.02);
}

/* ============ panel (privacy teaser, support) ============ */
.panel{
  background:var(--panel);border:1px solid rgba(255,255,255,.06);
  border-radius:calc(var(--round) + 6px);padding:30px 32px;
}
.panel h2{font-size:26px}
.panel p:last-child{margin-bottom:0}

/* ============ policy page ============ */
.policy{max-width:720px;margin:0 auto;padding:40px 0 20px}
.policy h1{font-size:clamp(30px,6vw,44px);margin-bottom:6px}
.policy h2{font-size:21px;color:var(--gold);margin:34px 0 8px}
.policy p,.policy li{color:var(--dim);font-size:16.5px}
.policy ul{padding-left:22px;margin:0 0 1em}
.policy li{margin-bottom:6px}
.policy .updated{color:var(--muted);font-size:14px;margin-bottom:28px}

/* ============ footer ============ */
.foot{border-top:1px solid rgba(255,255,255,.06);padding:28px 0 56px;color:var(--muted);font-size:14px}
.foot p{margin:0 0 8px}
.foot__links{display:flex;flex-wrap:wrap;gap:18px;margin-top:14px}

/* ============ motion ============ */
/* Sections rise as they enter, the way cards do in the app. Scroll-driven, so
   no JavaScript is needed and the CSP stays script-src 'self' with nothing
   inline. Browsers without it simply show the page still. */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .rise{
      animation:rise linear both;
      animation-timeline:view();
      animation-range:entry 8% cover 32%;
    }
    @keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
  }
}
@media (prefers-reduced-motion:reduce){
  .hero::before{animation:none}
  html{scroll-behavior:auto}
}

/* ============ small screens ============ */
@media (max-width:760px){
  .hero{padding-top:36px}
  .deeper{grid-template-columns:1fr;gap:28px}
  .stack{margin:0 auto}
  .panel{padding:24px}
  section{padding:44px 0}
}