/* Real White Noise pages. Same tokens and type as home.css so the app's
   legal and support pages read as part of baylac.co, with one addition:
   --rwn-accent, the app's own accent, used sparingly.

   The token used to be named for amber, and amber is what the app used to be.
   The Last Light palette replaced it with bone (#EAD6A8) on indigo, so the
   name went with it rather than being left pointing at a colour that no longer
   exists. Bone is a light on a dark ground and disappears on a white one, so
   light mode carries a darkened version of the same hue rather than the token
   value itself. */

:root {
  color-scheme: light dark;

  --bg: #fbfbfa;
  --surface: #ffffff;
  --ink: #16181d;
  --ink-soft: #4b5563;
  --ink-faint: #8b93a1;
  --rule: #e6e6e3;
  --accent: #0f4c81;
  --chip-bg: #f1f3f5;
  --rwn-accent: #8a7440;

  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --max: 660px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101114;
    --surface: #16181c;
    --ink: #e9eaec;
    --ink-soft: #a3a8b3;
    --ink-faint: #6e747f;
    --rule: #26282e;
    --accent: #7fb2e5;
    --chip-bg: #1d2026;
    --rwn-accent: #ead6a8;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--accent); text-underline-offset: 2px; }

.wrap {
  width: min(var(--max), 90vw);
  margin: 0 auto;
  padding: 40px 0 96px;
}

.crumb {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
  text-decoration: none;
  display: inline-block;
  margin-bottom: 32px;
}
.crumb:hover { color: var(--ink-soft); }

h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 6vw, 42px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}

.updated {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink-faint);
  margin: 0 0 36px;
}

h2 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 34px 0 10px;
}

p { margin: 0 0 14px; color: var(--ink-soft); }
p.lead { color: var(--ink); font-size: 18px; }
ul { padding-left: 20px; margin: 0 0 16px; }
li { color: var(--ink-soft); margin-bottom: 8px; }
strong { color: var(--ink); font-weight: 600; }

.note {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 16px 18px;
  margin: 0 0 28px;
}
.note p:last-child { margin-bottom: 0; }

hr { border: 0; border-top: 1px solid var(--rule); margin: 40px 0; }

/* landing page only */
.hero { display: flex; align-items: center; gap: 20px; margin-bottom: 28px; }
.hero img { width: 84px; height: 84px; border-radius: 19px; }
.hero .t { min-width: 0; }
.hero h1 { margin-bottom: 2px; }
.hero .sub { font-family: var(--mono); font-size: 12.5px; color: var(--ink-faint); }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; margin: 20px 0 8px; }
.card { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 16px 18px; }
.card h3 { margin: 0 0 4px; font-size: 15px; font-weight: 600; }
.card p { margin: 0; font-size: 14px; }

.plans { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 8px; }
.plan { flex: 1 1 160px; background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 14px 16px; }
.plan.best { border-color: var(--rwn-accent); }
.plan .amt { font-size: 21px; font-weight: 600; color: var(--ink); }
.plan .per { font-family: var(--mono); font-size: 12px; color: var(--ink-faint); }

footer { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--rule); font-family: var(--mono); font-size: 12.5px; color: var(--ink-faint); }
footer a { margin-right: 16px; }

/* landing page: feature grid, figures, swatches */
.feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2px 26px; margin: 22px 0 6px; }
.feat { display: flex; gap: 13px; padding: 13px 0; border-top: 1px solid var(--rule); }
.feat svg { flex: none; width: 21px; height: 21px; margin-top: 2px; stroke: var(--rwn-accent); fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.feat h3 { margin: 0 0 3px; font-size: 15px; font-weight: 600; color: var(--ink); }
.feat p { margin: 0; font-size: 14px; }

.figure { background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; padding: 24px; margin: 22px 0 10px; text-align: center; }
.figure svg { max-width: 100%; height: auto; }
.figure .cap { font-family: var(--mono); font-size: 11.5px; color: var(--ink-faint); margin-top: 14px; }

.scenes { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.scene { width: 92px; height: 152px; border-radius: 14px; border: 1px solid var(--rule); position: relative; overflow: hidden; }
.scene::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46px; background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0)); }
.scene span { position: absolute; z-index: 1; left: 0; right: 0; bottom: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.86); }
.s-glow { background: radial-gradient(circle at 50% 44%, #f0d5a2 0%, #8a6a34 34%, #120c06 78%); }
.s-stars {
  background:
    radial-gradient(1.5px 1.5px at 24% 22%, rgba(255, 255, 255, 0.9), transparent 60%),
    radial-gradient(1.2px 1.2px at 70% 16%, rgba(255, 255, 255, 0.75), transparent 60%),
    radial-gradient(1.8px 1.8px at 52% 34%, rgba(255, 255, 255, 0.95), transparent 60%),
    radial-gradient(1.1px 1.1px at 33% 48%, rgba(255, 255, 255, 0.6), transparent 60%),
    radial-gradient(1.4px 1.4px at 78% 44%, rgba(255, 255, 255, 0.8), transparent 60%),
    radial-gradient(1px 1px at 16% 62%, rgba(255, 255, 255, 0.55), transparent 60%),
    radial-gradient(1.6px 1.6px at 62% 66%, rgba(255, 255, 255, 0.7), transparent 60%),
    radial-gradient(1.1px 1.1px at 40% 78%, rgba(255, 255, 255, 0.5), transparent 60%),
    radial-gradient(circle at 62% 30%, #2b3d6b 0%, #0a0f1f 62%);
}
.s-aurora { background: linear-gradient(200deg, #123a34 4%, #2f6f5a 38%, #14243f 74%, #070b16 100%); }
.s-rose { background: radial-gradient(circle at 50% 58%, #a35d63 0%, #55232f 42%, #14080d 82%); }

/* Screens from the app: one row, scrolls sideways, snaps per phone. The
   images carry the app's own near-black, so they get a hairline rather than
   the page surface, and no card, because a phone is already an object. */
.shots {
  display: flex;
  gap: 14px;
  margin: 26px 0 10px;
  padding: 2px 0 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
}
.shot { flex: none; width: 196px; margin: 0; scroll-snap-align: start; }
.shot img {
  width: 100%;
  height: auto;
  aspect-ratio: 520 / 1056;
  border-radius: 18px;
  border: 1px solid var(--rule);
  background: #04060d;
}
.shot figcaption { font-family: var(--mono); font-size: 11.5px; color: var(--ink-faint); margin-top: 8px; text-align: center; }
@media (max-width: 560px) {
  .shot { width: 156px; }
  .shot img { border-radius: 14px; }
}

.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 18px 0 8px; }
.split .card ul { margin: 6px 0 0; padding-left: 17px; }
.split .card li { font-size: 14px; margin-bottom: 5px; }

/* The dial is a render of the app's own shader, so it carries the app's
   background rather than the page's. */
.figure.dark { background: #04060d; border-color: #1b2233; padding: 14px 14px 18px; }
.figure.dark img { display: block; width: 380px; max-width: 100%; height: auto; margin: 0 auto; border-radius: 10px; }
.figure.dark .cap { color: #6f7994; margin-top: 6px; }

@media (max-width: 560px) {
  .figure { padding: 18px 14px; }
  .scene { width: 62px; height: 104px; border-radius: 11px; }
  .scene span { font-size: 9px; bottom: 6px; }
  .scenes { gap: 9px; }
}