/* Hueloft site: one look (the Dawn sky), shared by every page. */
:root {
  --sky-top: #fdf0e1;
  --sky-mid: #f3c9be;
  --sky-low: #d98aa2;
  --ink: #2b1d33;
  --ink-soft: #5f4b66;
  --card: rgba(255, 255, 255, 0.72);
  --card-edge: rgba(255, 255, 255, 0.9);
  --accent: #c24f7c;
  --slab-1: #e8956b;
  --slab-2: #e07a80;
  --slab-3: #cf6a9a;
  --display: "Nunito", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  --body: "Nunito", ui-rounded, system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { background: var(--sky-low); }
body {
  margin: 0;
  min-height: 100vh;
  font: 500 17px/1.6 var(--body);
  color: var(--ink);
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 55%, var(--sky-low) 100%) fixed;
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
}
a { color: var(--accent); font-weight: 700; text-underline-offset: 3px; }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.wrap { max-width: 720px; margin: 0 auto; padding: 40px 0 56px; }
.top { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.top img { width: 40px; height: 40px; }
.top span { font: 900 20px/1 var(--display); letter-spacing: .12em; }
.hero { text-align: center; padding: 56px 0 24px; }
.hero img { width: 152px; height: 152px; filter: drop-shadow(0 12px 24px rgba(90, 30, 70, .22)); }
.hero h1 { font: 900 clamp(44px, 12vw, 76px)/1 var(--display); letter-spacing: .1em; margin: 20px 0 10px; text-wrap: balance; }
.hero p.tag { font-size: 20px; color: var(--ink-soft); margin: 0 auto; max-width: 30ch; text-wrap: balance; }
.badge { display: inline-block; margin-top: 24px; padding: 10px 18px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 800; letter-spacing: .04em; }
.platforms { margin-top: 12px; font-size: 14px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.strata { display: grid; gap: 12px; margin: 40px 0; }
.layer { background: var(--card); border: 1px solid var(--card-edge); border-left: 8px solid var(--slab-1); border-radius: 14px; padding: 16px 20px; }
.layer:nth-child(2) { border-left-color: var(--slab-2); }
.layer:nth-child(3) { border-left-color: var(--slab-3); }
.layer h3 { margin: 0 0 4px; font: 800 18px/1.3 var(--display); }
.layer p { margin: 0; color: var(--ink-soft); }
.doc { background: var(--card); border: 1px solid var(--card-edge); border-radius: 20px; padding: 28px clamp(20px, 5vw, 40px); margin-top: 28px; }
.doc h1 { font: 900 clamp(30px, 7vw, 40px)/1.15 var(--display); margin: 0 0 6px; text-wrap: balance; }
.doc .meta { color: var(--ink-soft); font-size: 15px; margin: 0 0 20px; }
.doc h2 { font: 800 21px/1.3 var(--display); margin: 28px 0 6px; }
.doc p, .doc li { max-width: 65ch; }
.doc ul { padding-left: 22px; }
.faq dt { font-weight: 800; margin-top: 18px; }
.faq dd { margin: 4px 0 0; color: var(--ink-soft); }
footer { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: center; font-size: 15px; color: var(--ink-soft); }
footer a { font-weight: 700; color: var(--ink); }