/* The coming-soon splash - what everyone off the allowlist sees at /, /pricing,
 * /terms and /privacy (see functions/lib/gate.js).
 *
 * WHY THIS IS A FILE AND NOT A <style> BLOCK. The gate serves the splash under
 * SITE_CSP, and that policy has no 'unsafe-inline' in style-src. An inline
 * block here was silently dropped by the browser, so the public saw the drawing
 * of Mabel at full width and no type at all. Keep the splash free of inline
 * <style> and style="..." attributes, same as the dashboard.
 *
 * Brand tokens match /assets/site/site.css.
 */

:root{color-scheme:light;
  --paper:#FCFAF7;
  --ink:#16233A;
  --ink-soft:#5C6880;
  --mabel:#D24132;
  --rule:#E3DBD1;
  --ink-fig:var(--mabel);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Karla,"Segoe UI",system-ui,sans-serif;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px 24px;
  -webkit-font-smoothing:antialiased;
}
main{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  max-width:620px;
  width:100%;
}
.fig{
  width:min(300px,62vw);
  height:auto;
  display:block;
  margin-bottom:clamp(18px,4vw,30px);
}
.mark{
  font-family:Yellowtail,"Brush Script MT",cursive;
  font-size:clamp(3.4rem,9vw,3.8rem);
  line-height:.92;
  letter-spacing:.01em;
  color:var(--mabel);
  text-align:left;
}
.oh{
  display:block;
  font-size:.52em;
  font-weight:400;
  color:var(--ink);
  opacity:.85;
  margin:0;
}
h1{
  font:inherit;
  color:inherit;
  margin:0;
}
.rule{
  display:flex;
  align-items:center;
  gap:16px;
  width:100%;
  max-width:340px;
  margin:clamp(24px,5vw,36px) 0 clamp(18px,4vw,26px);
  color:var(--ink-soft);
}
.rule::before,.rule::after{content:"";height:1px;background:var(--rule);flex:1}
.rule span{
  font-family:Oswald,sans-serif;
  font-size:.62rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  white-space:nowrap;
}
.line{
  font-size:clamp(1.15rem,3.4vw,1.5rem);
  line-height:1.45;
  color:var(--ink);
  margin:0;
  text-wrap:balance;
}
footer{
  margin-top:clamp(34px,7vw,56px);
  font-size:.78rem;
  color:var(--ink-soft);
  line-height:1.6;
}
/* Same rule as the rest of the platform: the underline is the hover
   affordance, so the rule under the link is transparent until then. */
footer a{color:var(--ink-soft);text-decoration:none;border-bottom:1px solid transparent}
footer a:hover,footer a:focus-visible{color:var(--mabel);border-bottom-color:var(--mabel)}
a:focus-visible{outline:2px solid var(--mabel);outline-offset:3px;border-radius:2px}
@media (prefers-reduced-motion:no-preference){
  main>*{animation:rise .7s cubic-bezier(.22,.61,.36,1) backwards}
  main>*:nth-child(1){animation-delay:.05s}
  main>*:nth-child(2){animation-delay:.16s}
  main>*:nth-child(3){animation-delay:.22s}
  main>*:nth-child(4){animation-delay:.32s}
  main>*:nth-child(5){animation-delay:.40s}
  main>*:nth-child(6){animation-delay:.50s}
  @keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
}

/* DEVELOPMENT PREVIEW marker (2026-10-26): a small pill in the bottom-left corner of every front-facing page while the product is being proven end to end.
   Pure CSS (the CSP allows no inline script or style on the app pages), never covers a control (pointer-events:none), hidden when printing.
   To go live: delete this block from site.css, splash.css, dashboard.css and the <style> in login.html, then `npm run check:fix`. Wording is deliberate: it names no payment or provider. */
body::after{content:"Development preview"; position:fixed; left:12px; bottom:12px; z-index:2147483000; padding:6px 12px; border-radius:999px;
  background:rgba(22,35,58,.92); color:#fff; font:500 .75rem/1.2 Karla,system-ui,sans-serif; letter-spacing:.02em; pointer-events:none; box-shadow:0 2px 10px rgba(22,35,58,.25)}
@media print{body::after{display:none}}