/* Dreamwell site: one stylesheet for every page. System fonts only, no external requests.
   Colours follow the Dreamwell colour guidelines v4 "Dusk sky" (design chat #119). The
   tokens below are the guidelines' tokens; see site/README.md, "Colour guidelines". */

:root {
  color-scheme: dark;

  /* Night: the neutrals, one blue-black hue (guidelines §2). */
  --night: #080a16;   /* page */
  --dusk: #0f121f;    /* bars, header */
  --panel: #151827;   /* cards */
  --raised: #1e2232;  /* knob body, chips */
  --line: #292d3f;    /* borders, tracks */
  --dim: #989db5;     /* labels, captions: secondary text, 12 px and up */
  --soft: #bfc3d5;    /* body copy */
  --text: #eceef7;    /* headings */

  /* The ramp: sunset to night, the Morph slider's colours (§1). */
  --bloom: #fea668;   /* ramp 0.00, the Bloom end */
  --coral: #f47b74;   /* ramp 0.25 */
  --rose: #c96598;    /* ramp 0.50: links, focus rings */
  --violet: #8559b2;  /* ramp 0.75: fills only, never text */
  --gloom: #4555a6;   /* ramp 1.00, the Gloom end: fills only, never text */

  /* Text tints of the two dark stops (§3). Warn is the only yellow: warnings only. */
  --lilac: #b691e1;   /* Violet as text */
  --mist: #8fa1e4;    /* Gloom as text */
  --warn: #eec55e;

  /* The three gradients, one job each (§4). Never a gradient from one end stop straight to the other. */
  --grad: linear-gradient(100deg, var(--bloom), var(--coral) 25%, var(--rose) 50%, var(--violet) 75%, var(--gloom));      /* bars, waveform; never under text */
  --grad-text: linear-gradient(100deg, var(--bloom), var(--coral) 30%, var(--rose) 60%, var(--lilac) 85%, var(--mist)); /* headlines, 48 px and up */
  --grad-cta: linear-gradient(100deg, var(--bloom), var(--coral) 55%, var(--rose));                                      /* the one primary button, Night text */

  /* Panel tokens the site uses too, with the values of libs/dreamwell-ui/tokens.css
     (docs/style-guide.md). Glow's tests/ui-check.mjs checks they match. */
  --surface-well: rgba(8, 10, 22, 0.7);      /* --night at 70 %: selects */
  --line-hover: rgba(191, 195, 213, 0.28);   /* --soft at 28 %: a hovered border */
  --rose-hover: rgba(201, 101, 152, 0.14);   /* --rose at 14 %: ghost button hover */
  --rose-press: rgba(201, 101, 152, 0.26);   /* --rose at 26 %: ghost button pressed */
  --radius-control: 8px;                     /* selects */
}

* { box-sizing: border-box; }

html { background: var(--night); scroll-behavior: smooth; scroll-padding-top: 64px; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--night);
  color: var(--text);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

main { flex: 1; }

a { color: var(--rose); }
a:hover { filter: brightness(1.08); }
:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }

h1, h2, h3 { margin: 0; letter-spacing: -.025em; line-height: 1.05; font-weight: 700; }

.wrap { width: 100%; max-width: 1040px; margin: 0 auto; padding: 0 24px; }
.center { text-align: center; }
.eyebrow { font-size: 14px; font-weight: 600; letter-spacing: .02em; color: var(--lilac); margin-bottom: 8px; }
.lede { font-size: clamp(19px, 2vw, 24px); color: var(--soft); max-width: 680px; margin: 20px auto 0; line-height: 1.4; }
.note { font-size: 13px; color: var(--dim); }
.grad-text { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Bloom and Gloom end names: Bloom in the Bloom colour, Gloom in Mist (Gloom itself is too dark for text). */
.end-bloom { color: var(--bloom); }
.end-gloom { color: var(--mist); }

/* Header and footer: the same block on every page. ---------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(8, 10, 22, .82); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; gap: 22px; min-height: 52px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 600; font-size: 15px; letter-spacing: .16em; text-transform: uppercase; margin-right: auto; }
.brand img { display: block; width: auto; height: 28px; }   /* the DW monogram, img/dreamwell-logo.svg */
.site-header nav { display: flex; align-items: center; gap: 20px; font-size: 13px; }
.site-header nav a:not(.btn) { color: var(--dim); text-decoration: none; }
.site-header nav a:not(.btn):hover, .site-header nav a[aria-current="page"] { color: var(--text); }
.site-header .sep { width: 1px; height: 16px; background: var(--line); }

.site-footer { border-top: 1px solid var(--line); color: var(--dim); font-size: 13px; background: var(--dusk); }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-top: 28px; padding-bottom: 28px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.site-footer a { color: var(--dim); text-decoration: none; }
.site-footer a:hover { color: var(--text); }

/* Buttons. Primary: --grad-cta with Night text, one per view (guidelines §6). Ghost, as the
   style guide's Random button: transparent, 1 px Rose border, Text label, Rose tints on hover
   and press (it replaced the guidelines' Lilac outline). Text link: Text colour, Rose "›". */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid transparent; border-radius: 999px; padding: 6px 14px;
  font: inherit; font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.btn:hover { filter: brightness(1.08); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .4; cursor: default; filter: none; }
.btn.primary { background: var(--grad-cta); color: var(--night); }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--rose); }
.btn.ghost:hover { background: var(--rose-hover); filter: none; }
.btn.ghost:active { background: var(--rose-press); }
.btn.lg { padding: 12px 24px; font-size: 16px; }
.text-link { color: var(--text); text-decoration: none; font-weight: 500; }
.text-link::after { content: " ›"; color: var(--rose); }
.text-link:hover { text-decoration: underline; text-decoration-color: var(--rose); }

/* Home: the Glow launch page. ------------------------------------------------------ */
.home section { padding: 96px 0; position: relative; }
.home h2 { font-size: clamp(32px, 4.6vw, 48px); }
.home h3 { font-size: 20px; letter-spacing: -.01em; }
.home .section-lede { color: var(--soft); font-size: 18px; max-width: 680px; margin: 16px 0 0; }

/* Hero: a still glow of Rose and Violet behind the name; it drifts only without a
   reduced-motion preference. overflow clips it, so it never adds a horizontal scroll. */
.home .hero { padding: 88px 0 40px; text-align: center; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: -20% -10% 30%; pointer-events: none;
  background: radial-gradient(45% 50% at 35% 45%, rgba(244, 123, 116, .20), transparent 70%),   /* --coral */
              radial-gradient(45% 55% at 65% 40%, rgba(133, 89, 178, .26), transparent 70%);   /* --violet */
}
@media (prefers-reduced-motion: no-preference) {
  .hero::before { animation: drift 18s ease-in-out infinite alternate; }
}
@keyframes drift { to { transform: translate(3%, -4%) scale(1.08); } }
.hero > .wrap { position: relative; }
.hero h1 { display: inline-block; font-size: clamp(80px, 16vw, 168px); letter-spacing: -.05em; padding: 0 .04em .06em; line-height: 1; }
.hero .tag { font-size: clamp(22px, 3vw, 34px); font-weight: 600; letter-spacing: -.02em; line-height: 1.25; margin: 12px auto 0; max-width: 760px; }
.hero .meta { color: var(--soft); font-size: 17px; margin: 18px 0 0; }
.hero .meta strong { color: var(--text); }

/* Newsletter signup: the page's one form and its one gradient button. */
.signup { max-width: 560px; margin: 36px auto 0; text-align: left; }
.signup label { display: block; font-size: 14px; font-weight: 600; color: var(--soft); margin: 0 0 8px; }
.signup .row { display: flex; gap: 10px; }
.signup input[type=email] {
  flex: 1; min-width: 0; font: inherit; font-size: 16px; color: var(--text);
  background: var(--surface-well); border: 1px solid var(--line); border-radius: 999px; padding: 11px 18px;
}
.signup input[type=email]::placeholder { color: var(--dim); }
.signup input[type=email]:hover { border-color: var(--line-hover); }
.signup .note { margin: 12px 0 0; font-size: 14px; color: var(--dim); }
@media (max-width: 520px) {
  .signup .row { flex-direction: column; }
  .signup .btn { width: 100%; }
}

/* The panel picture: Glow's real editor, rendered by site/tests/render-glow-panel.mjs. */
.panel-shot { margin: 56px auto 0; max-width: 940px; }
.panel-shot img { display: block; width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--line); box-shadow: 0 40px 120px -40px rgba(133, 89, 178, .40); /* --violet */ }
.panel-shot figcaption { margin-top: 12px; font-size: 13px; color: var(--dim); text-align: center; }

/* The live demo over the panel picture (/demo/demo.js; markup in index.html). */
.glow-demo [hidden] { display: none !important; }
.demo-stage { position: relative; }
.demo-panel-box { width: 100%; overflow: hidden; border-radius: 16px; border: 1px solid var(--line); background: var(--dusk); box-shadow: 0 40px 120px -40px rgba(133, 89, 178, .40); /* --violet */ }
.demo-panel-box iframe { display: block; border: 0; transform-origin: 0 0; }
.glow-demo.glow-off .demo-panel-box iframe { opacity: .55; }
.demo-start {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  font: inherit; font-size: 17px; font-weight: 600; line-height: 1; color: var(--text); cursor: pointer;
  padding: 14px 26px 14px 22px; border-radius: 999px;
  background: rgba(8, 10, 22, .86); /* --night */ border: 1px solid var(--rose);
  box-shadow: 0 12px 40px rgba(8, 10, 22, .6); /* --night */
}
.demo-start svg { width: 18px; height: 18px; fill: var(--coral); }
@media (max-width: 520px) { .demo-start { font-size: 15px; padding: 10px 18px 10px 14px; } }
.demo-start:hover { background: rgba(21, 24, 39, .94); /* --panel */ }
.demo-start:disabled { opacity: .7; cursor: progress; }
.demo-transport { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 12px; margin-top: 16px; font-size: 14px; color: var(--soft); }
.demo-transport select {
  font: inherit; color: var(--text); background: var(--surface-well); border: 1px solid var(--line);
  border-radius: var(--radius-control); padding: 8px 10px; min-width: 150px;
}
.demo-transport select:hover { border-color: var(--line-hover); }
.demo-transport .btn { padding: 8px 18px; font-size: 14px; }
.demo-switch {
  font: inherit; font-weight: 600; color: var(--text); cursor: pointer;
  padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--raised);
}
.demo-switch .state { display: inline-block; min-width: 2.2em; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--line); color: var(--soft); }
.demo-switch[aria-checked="true"] .state { background: var(--coral); color: var(--night); }
.demo-status { margin: 12px 0 0; font-size: 14px; color: var(--soft); text-align: center; }
.demo-status:empty { display: none; }

/* What it does: one card per control or promise. */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 48px 0 0; padding: 0; list-style: none; }
.features li { background: var(--panel); border: 1px solid var(--line); border-radius: 22px; padding: 28px; }
.features h3 { margin: 0 0 8px; }
.features p { margin: 0; color: var(--soft); font-size: 15px; }

/* Gloom: the two ends, with the ramp as a bar between them (--grad's job). */
.ramp-bar { height: 6px; border-radius: 3px; background: var(--grad); margin: 48px 0 0; }
.ends { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 24px; }
.ends .gloom-end { text-align: right; }
.ends h3 { font-size: 28px; }
.ends p { color: var(--soft); font-size: 16px; margin: 8px 0 0; }

/* Specs. */
.specs { display: grid; grid-template-columns: 200px 1fr; border-top: 1px solid var(--line); margin: 40px 0 0; }
.specs dt, .specs dd { margin: 0; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.specs dt { color: var(--dim); }
.specs dd { color: var(--text); }

.closing { text-align: center; }
.closing p { color: var(--soft); font-size: 18px; margin: 16px 0 0; }

@media (max-width: 800px) {
  .home section { padding: 72px 0; }
  .features, .ends { grid-template-columns: 1fr; }
  .ends .gloom-end { text-align: left; }
  .specs { grid-template-columns: 1fr; }
  .specs dt { padding-bottom: 0; border-bottom: 0; }
  .site-header .wrap { gap: 14px; }
  .site-header nav { gap: 14px; }
}

/* Text pages: Privacy, Thanks and 404. -------------------------------------------- */
.prose { max-width: 760px; padding-top: 72px; padding-bottom: 96px; }
.prose h1 { font-size: clamp(36px, 5vw, 56px); margin: 0 0 16px; }
.prose h2 { font-size: 22px; letter-spacing: -.01em; margin: 36px 0 8px; }
.prose p, .prose li { color: var(--soft); }
.prose .updated { color: var(--dim); font-size: 14px; }