/* 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}}
}