/* ============ simstudioapp.com — the page in front of the tool ============
   Its own stylesheet, not the tool's: css/app.css is most of an 865 KB editor
   and a landing page has no use for a properties panel. What it does share is
   the brand — the five fixed colours, the type scale and the two typefaces,
   copied from the FIXED block at the top of css/app.css. docs/SIMSTUDIO_BRAND.md
   is the reference for all of it.

   The two typefaces are served as real files here rather than base64. The tool
   embeds them because it has to run from file://; a page served over HTTP does
   not, and tools/site.js lifts them out of the stylesheet at build time so
   there is still only one copy of each in the repository. */

@font-face{
  font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;
  src:url(fonts/poppins-extrabold.woff2) format('woff2');
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(fonts/inter.woff2) format('woff2');
}

:root{
  /* the five brand colours, at the kit's values */
  --navy:#011D4A; --blue:#0056FC; --cyan:#01ACFC; --violet:#5926FC; --orange:#F59E0B;
  --surface:#F8FAFC; --ink:#101828;

  --bg:#080b12; --bg2:#0d1220; --line:#202940;
  --fg:#e7ebf2; --fg-dim:#9aa4b4;
  /* Anything that writes in the accent writes in the cyan on this ground: the
     blue is 3.46:1 as text here and the cyan is 6.9:1. The rule and the reason
     are both from the brand document. */
  --accent:var(--blue); --accent-2:var(--cyan); --accent-ink:#FFFFFF;

  --display:'Poppins',Georgia,serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  --s-2:4px; --s-3:8px; --s-4:12px; --s-5:16px; --s-6:24px; --s-7:32px; --s-8:48px;
  --r-md:10px; --r-lg:16px; --r-pill:999px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;
}
a{color:var(--accent-2)}
code{font:.92em/1 ui-monospace,'Cascadia Code','Consolas',monospace;
  background:rgba(255,255,255,.07);padding:2px 5px;border-radius:5px}

/* ---------- the bar ---------- */
.bar{
  display:flex;align-items:center;gap:var(--s-5);
  padding:var(--s-5) var(--s-6);background:var(--navy);
  position:sticky;top:0;z-index:10;
}
.grow{flex:1}
/* The lockup is a one-colour master carrying its geometry in the alpha
   channel, so it is stencilled rather than drawn — one file, any ink. */
.lockup{
  display:block;width:148px;height:26px;background:#FFFFFF;
  -webkit-mask:url(img/lockup.png) left center/contain no-repeat;
          mask:url(img/lockup.png) left center/contain no-repeat;
}
.brand{display:flex;align-items:center;text-decoration:none}

.btn{
  display:inline-block;border:1px solid transparent;border-radius:var(--r-md);
  padding:var(--s-3) var(--s-5);font:inherit;font-size:14px;font-weight:600;
  text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background .14s ease,border-color .14s ease;
}
.btn.ghost{color:#FFFFFF;border-color:rgba(255,255,255,.42)}
.btn.ghost:hover{background:rgba(255,255,255,.10)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{background:#0047D1;border-color:#0047D1}
.btn.big{padding:var(--s-4) var(--s-7);font-size:16px}
.btn:focus-visible{outline:2px solid var(--orange);outline-offset:2px;
  box-shadow:0 0 0 3px var(--fg)}
@media (max-width:640px){ .bar .ghost{display:none} }

/* ---------- hero ---------- */
main{max-width:1060px;margin:0 auto;padding:0 var(--s-6)}
.hero{padding:var(--s-8) 0 var(--s-7)}
.eyebrow{
  margin:0 0 var(--s-5);font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-2);
}
/* The display face, for a major product moment and nowhere else — the same
   rule that gives it the empty stage and the capture countdown in the tool. */
h1{
  margin:0 0 var(--s-6);font-family:var(--display);font-weight:800;
  font-size:clamp(34px,6.4vw,62px);line-height:1.04;letter-spacing:-.02em;
  /* the first sentence is left to find its own even lines; the one manual
     break in the markup is before the payoff, which wants a line of its own */
  text-wrap:balance;
}
.lede{margin:0 0 var(--s-7);max-width:62ch;font-size:clamp(16px,2.1vw,19px);color:var(--fg-dim)}
.cta{display:flex;align-items:center;gap:var(--s-6);flex-wrap:wrap;margin:0}
.cta .note{font-size:14px;color:var(--fg-dim)}

/* ---------- the four facts ---------- */
.facts{
  display:grid;gap:var(--s-5);padding:var(--s-7) 0 var(--s-8);
  /* 380px rather than 272: at this page's width the smaller figure fitted
     three across and left the fourth card alone on a row of its own */
  grid-template-columns:repeat(auto-fit,minmax(380px,1fr));
  border-top:1px solid var(--line);
}
.fact{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s-6)}
.fact h2{margin:0 0 var(--s-4);font-size:17px;line-height:1.3}
.fact p{margin:0;font-size:15px;color:var(--fg-dim)}

/* ---------- the strip ---------- */
.strip{
  display:flex;align-items:center;gap:var(--s-6);flex-wrap:wrap;
  background:var(--navy);border-radius:var(--r-lg);
  padding:var(--s-6) var(--s-7);margin-bottom:var(--s-8);
}
.strip p{margin:0;flex:1 1 300px;font-size:17px;color:#FFFFFF}

footer{
  display:flex;align-items:center;gap:var(--s-5);flex-wrap:wrap;
  max-width:1060px;margin:0 auto;padding:var(--s-6);
  border-top:1px solid var(--line);font-size:14px;color:var(--fg-dim);
}
.sym{
  display:block;width:20px;height:20px;background:var(--fg-dim);
  -webkit-mask:url(img/symbol.png) center/contain no-repeat;
          mask:url(img/symbol.png) center/contain no-repeat;
}

/* the whole page in the brand's light palette, for anyone who asked for it */
@media (prefers-color-scheme:light){
  :root{
    --bg:var(--surface); --bg2:#FFFFFF; --line:#D0D5DD;
    --fg:var(--ink); --fg-dim:#475467;
    /* on white the accent is legible where the cyan collapses to 2.53:1, so
       the pair swaps: --accent-2 becomes the deeper blue */
    --accent-2:#0047D1;
  }
  .eyebrow{color:#0047D1}
  .fact{box-shadow:0 1px 2px rgba(16,24,40,.06)}
}