/* Foyer — sub-page styles (sound pages, alternatives, tools), layered on style.css.
   Same premium-dark system: true black lit by the page's accent (--glow), one
   rationed colour, monospace kickers, generous air. */

/* ---------- page scaffold ---------- */
.page{max-width:760px;margin-inline:auto;position:relative;z-index:1;padding:clamp(2rem,6vh,4rem) 0 0}
.crumbs{display:flex;gap:.5rem;align-items:center;font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:1.6rem;flex-wrap:wrap}
.crumbs a{color:var(--faint)}
.crumbs a:hover{color:var(--text)}
.crumbs .sep{opacity:.5}
.page-hero h1{font-size:clamp(2.2rem,5vw,3.4rem)}
.page-hero .lede{max-width:56ch;margin-top:1.1rem}

/* ---------- sound player card ---------- */
.player{position:relative;margin:clamp(1.8rem,4vh,2.6rem) 0;border-radius:22px;border:1px solid var(--line);overflow:hidden;
  background:radial-gradient(120% 100% at 50% 0%,#101113,#0a0b0c 70%);
  display:flex;align-items:center;gap:clamp(1.2rem,4vw,2.4rem);padding:clamp(1.4rem,4vw,2.2rem)}
.player::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background:radial-gradient(70% 90% at 24% 30%,color-mix(in oklab,var(--glow) 16%,transparent),transparent 70%)}
.play-orb{position:relative;z-index:1;flex:none;width:clamp(92px,14vw,120px);height:clamp(92px,14vw,120px);border-radius:50%;border:0;cursor:pointer;
  background:radial-gradient(circle at 50% 38%,#fff,color-mix(in oklab,var(--glow) 70%,#fff) 42%,color-mix(in oklab,var(--glow) 85%,#000) 78%);
  box-shadow:0 0 46px color-mix(in oklab,var(--glow) 55%,transparent),inset 0 0 0 1px rgba(255,255,255,.08);
  display:grid;place-items:center;transition:transform .25s var(--ease),box-shadow .4s}
.play-orb:hover{transform:scale(1.04)}
.play-orb svg{width:34%;height:34%;fill:rgba(10,10,12,.85);stroke:none}
.play-orb .i-pause{display:none}
.player.playing .play-orb{box-shadow:0 0 70px color-mix(in oklab,var(--glow) 75%,transparent),inset 0 0 0 1px rgba(255,255,255,.1);
  animation:orbbreathe 3.2s ease-in-out infinite}
.player.playing .i-play{display:none}
.player.playing .i-pause{display:block}
@keyframes orbbreathe{50%{transform:scale(1.03)}}
.player-body{position:relative;z-index:1;flex:1;min-width:0}
.player-body .pt{font-weight:600;font-size:1.08rem;letter-spacing:-.01em}
.player-body .ps{font-family:ui-monospace,monospace;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-top:4px}
.player.playing .player-body .ps{color:var(--glow)}
.vol{display:flex;align-items:center;gap:12px;margin-top:1.1rem;max-width:300px}
.vol svg{width:16px;height:16px;flex:none;stroke:var(--dim);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* the input is 28px tall (finger-sized hit area); the visible 4px track is drawn on the track pseudo-element */
.vol input[type=range]{-webkit-appearance:none;appearance:none;flex:1;height:28px;background:transparent;cursor:pointer;outline-offset:2px}
.vol input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:var(--s3)}
.vol input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;margin-top:-6px;border-radius:50%;border:0;
  background:radial-gradient(circle at 50% 40%,#fff,color-mix(in oklab,var(--glow) 75%,#fff) 55%,color-mix(in oklab,var(--glow) 85%,#000) 85%);
  box-shadow:0 0 10px color-mix(in oklab,var(--glow) 60%,transparent)}
.vol input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:var(--s3)}
.vol input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;border:0;
  background:color-mix(in oklab,var(--glow) 80%,#fff);box-shadow:0 0 10px color-mix(in oklab,var(--glow) 60%,transparent)}
.player-err{position:relative;z-index:1;font-size:.85rem;color:var(--faint);margin-top:.8rem}
@media(max-width:560px){.player{flex-direction:column;text-align:center}.vol{margin-inline:auto}}

/* ---------- article prose ---------- */
.prose{color:var(--dim);font-size:1.02rem;line-height:1.62;letter-spacing:-.005em;max-width:68ch}
.sub-h2{font-size:1.4rem;margin-top:2.6rem}
.prose h2{font-size:clamp(1.4rem,2.6vw,1.8rem);color:var(--text);margin:2.6rem 0 .9rem}
.prose h3{font-size:1.1rem;color:var(--text);margin:1.8rem 0 .6rem}
.prose p{margin-bottom:1rem}
.prose a{color:var(--text);text-decoration:underline;text-decoration-color:color-mix(in oklab,var(--glow) 55%,transparent);text-underline-offset:3px}
.prose a:hover{text-decoration-color:var(--glow)}
.prose ul{margin:0 0 1rem 1.2rem}
.prose li{margin-bottom:.4rem}
.prose strong{color:var(--text);font-weight:600}

/* ---------- comparison table ---------- */
/* On phones the wrap scrolls sideways: the label column stays pinned so the reader
   always knows which row they're on, and the right-edge fade signals more content. */
.cmp-wrap{overflow-x:auto;margin:1.6rem 0;border:1px solid var(--line);border-radius:16px;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent)}
table.cmp{width:100%;border-collapse:collapse;font-size:.92rem;min-width:460px}
.cmp th,.cmp td{padding:.85rem 1rem;text-align:left;border-bottom:1px solid var(--line-2);color:var(--dim)}
.cmp thead th{font-family:ui-monospace,monospace;font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);background:var(--s1)}
.cmp tbody tr:last-child td{border-bottom:0}
.cmp th:first-child,.cmp td:first-child{position:sticky;left:0;background:var(--bg);box-shadow:8px 0 12px -8px rgba(0,0,0,.85)}
.cmp thead th:first-child{background:var(--s1)}
.cmp td:first-child{color:var(--text);font-weight:500}
.cmp .good{color:var(--text)}
.cmp .foyer-col{background:color-mix(in oklab,var(--glow) 6%,transparent)}

/* ---------- hub mini players ---------- */
.mini-players{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin:2rem 0}
.mini-player{display:flex;align-items:center;gap:14px;padding:.9rem 1rem;border-radius:16px;background:var(--s1);border:1px solid var(--line);transition:border-color .25s var(--ease),background .25s}
.mini-player:hover{background:var(--s2);border-color:color-mix(in oklab,var(--c) 40%,var(--line))}
.mini-orb{flex:none;width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 38%,#fff,color-mix(in oklab,var(--c) 70%,#fff) 42%,color-mix(in oklab,var(--c) 85%,#000) 78%);
  box-shadow:0 0 16px color-mix(in oklab,var(--c) 45%,transparent);transition:transform .2s var(--ease),box-shadow .3s}
.mini-orb:hover{transform:scale(1.06)}
.mini-orb svg{width:38%;height:38%;fill:rgba(10,10,12,.85);stroke:none}
.mini-orb .i-pause{display:none}
.mini-player.playing .mini-orb{box-shadow:0 0 28px color-mix(in oklab,var(--c) 70%,transparent);animation:orbbreathe 3.2s ease-in-out infinite}
.mini-player.playing .i-play{display:none}
.mini-player.playing .i-pause{display:block}
.mini-player .mp-body{min-width:0}
.mini-player .mp-body a{font-weight:600;font-size:.98rem;letter-spacing:-.01em;color:var(--text)}
.mini-player .mp-body a:hover{text-decoration:underline;text-decoration-color:color-mix(in oklab,var(--c) 60%,transparent);text-underline-offset:3px}
.mini-player .mp-sub{display:block;font-family:ui-monospace,monospace;font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-top:3px}
.mini-player.playing .mp-sub{color:color-mix(in oklab,var(--c) 70%,var(--dim))}

/* ---------- sound cross-links ---------- */
.snd-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:1.4rem 0}
.snd-links a{display:flex;align-items:center;gap:10px;padding:.85rem 1rem;border-radius:14px;background:var(--s1);border:1px solid var(--line);
  font-weight:500;font-size:.92rem;letter-spacing:-.01em;color:var(--text);transition:.25s var(--ease)}
.snd-links a:hover{background:var(--s2);border-color:color-mix(in oklab,var(--c,#fff) 40%,var(--line));transform:translateY(-2px)}
.snd-links .dot{width:10px;height:10px;flex:none;border-radius:50%;
  background:radial-gradient(circle at 50% 40%,#fff,color-mix(in oklab,var(--c) 72%,#fff) 45%,color-mix(in oklab,var(--c) 88%,#000) 80%);
  box-shadow:0 0 10px color-mix(in oklab,var(--c) 55%,transparent)}

/* ---------- app CTA banner ---------- */
.app-cta{position:relative;overflow:hidden;margin:clamp(2.4rem,6vh,3.6rem) 0;border-radius:22px;border:1px solid color-mix(in oklab,var(--glow) 40%,var(--line));
  background:linear-gradient(180deg,color-mix(in oklab,var(--glow) 10%,var(--s1)),var(--s1));padding:clamp(1.6rem,4vw,2.4rem);text-align:center}
.app-cta .mono{display:block;margin-bottom:.8rem;color:var(--glow)}
.app-cta h2{font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:.7rem}
.app-cta p{color:var(--dim);max-width:52ch;margin:0 auto 1.4rem;font-size:.98rem;line-height:1.55}
.app-cta .cta-row{margin-top:0;justify-content:center}
.app-cta .cta-note{margin-top:.9rem}

/* ---------- FAQ reuse tweak ---------- */
.page .faq{max-width:none;margin-top:.4rem}
.prose .snd-links a{text-decoration:none}

/* ---------- footer nav columns (landing + sub-pages) ---------- */
.foot-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1.6rem;padding:1.8rem 0;border-bottom:1px solid var(--line-2);margin-bottom:1.6rem}
.foot-links h3{font-family:ui-monospace,monospace;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:500;margin-bottom:.8rem}
.foot-links ul{list-style:none}
.foot-links li{margin-bottom:.5rem}
.foot-links a{color:var(--dim);font-size:.9rem}
.foot-links a:hover{color:var(--text)}

/* ---------- pomodoro ---------- */
.pomo{position:relative;margin:clamp(1.8rem,4vh,2.6rem) 0;border-radius:22px;border:1px solid var(--line);overflow:hidden;
  background:radial-gradient(120% 100% at 50% 0%,#101113,#0a0b0c 70%);padding:clamp(1.8rem,5vw,2.8rem);text-align:center}
.pomo-time{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:clamp(3.4rem,10vw,5.4rem);font-weight:500;letter-spacing:-.02em;line-height:1;
  font-variant-numeric:tabular-nums;margin:.6rem 0 1.2rem}
.pomo-phase{font-family:ui-monospace,monospace;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--glow)}
.pomo-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.pomo-btns button{font:inherit;font-weight:600;font-size:.92rem;letter-spacing:-.01em;cursor:pointer;border-radius:999px;padding:.65rem 1.4rem;transition:.2s var(--ease)}
.pomo-btns .primary{border:0;background:linear-gradient(var(--cta-hi),var(--cta));color:#160f04;box-shadow:0 6px 20px -6px color-mix(in oklab,var(--cta) 60%,transparent)}
.pomo-btns .primary:hover{transform:translateY(-1px);filter:brightness(1.06)}
.pomo-btns .ghost{border:1px solid var(--line);background:var(--s1);color:var(--dim)}
.pomo-btns .ghost:hover{background:var(--s2);color:var(--text)}
.pomo-sounds{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:1.6rem}
.pomo-sounds button{display:flex;align-items:center;gap:8px;font:inherit;font-size:.85rem;font-weight:500;color:var(--dim);cursor:pointer;
  min-height:42px;padding:.6rem 1rem;border-radius:999px;border:1px solid var(--line);background:var(--s1);transition:.2s var(--ease)}
.pomo-sounds button:hover{background:var(--s2);color:var(--text)}
.pomo-sounds button[aria-pressed=true]{border-color:color-mix(in oklab,var(--c) 55%,var(--line));background:color-mix(in oklab,var(--c) 14%,var(--s1));color:var(--text)}
.pomo-sounds .dot{width:9px;height:9px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 50% 40%,#fff,color-mix(in oklab,var(--c) 72%,#fff) 45%,color-mix(in oklab,var(--c) 88%,#000) 80%);
  box-shadow:0 0 8px color-mix(in oklab,var(--c) 55%,transparent)}

/* ---------- android waitlist ---------- */
.wait-card{margin:2rem 0;border-radius:22px;border:1px solid var(--line);background:var(--s1);padding:clamp(1.6rem,4vw,2.4rem);text-align:center}
.wait-card p{color:var(--dim);max-width:46ch;margin:0 auto 1.3rem}
.btn-primary{display:inline-flex;align-items:center;gap:.5rem;height:44px;padding:0 1.4rem;border-radius:999px;
  background:linear-gradient(var(--cta-hi),var(--cta));color:#160f04;font-weight:600;font-size:.95rem;letter-spacing:-.01em;
  box-shadow:0 6px 20px -6px color-mix(in oklab,var(--cta) 60%,transparent);transition:transform .2s var(--ease),filter .2s}
.btn-primary:hover{transform:translateY(-1px);filter:brightness(1.06);color:#160f04}

@media(prefers-reduced-motion:reduce){
  .player.playing .play-orb,.mini-player.playing .mini-orb{animation:none}
  .play-orb:hover,.mini-orb:hover,.snd-links a:hover,.btn-primary:hover{transform:none}
}