/* ------------------------------------------------------------------
   Beamaze document system — the site template, applied to app pages.

   Same tokens, same three type roles and the same card language as
   beamaze.in, restated for long-form documents. Nothing here is a new
   design decision: the palette is BRAND.md, the display face is Fraunces
   580 at -.03em, body is Hanken Grotesk, and anything that is metadata
   rather than prose is Spline Sans Mono at .18em tracking.

   Shared by all four FORGIA pages. Reuse it verbatim for the next app.
   ------------------------------------------------------------------ */

:root {
  --bg:        #05060C;   /* the scene background locked into every prompt */
  --ink:       #F2F3F5;
  --accent:    #F5252E;   /* signal red — #EC1C24 goes muddy on near-black */

  --ink-soft:  color-mix(in srgb, var(--ink) 68%, transparent);
  --ink-mid:   color-mix(in srgb, var(--ink) 58%, transparent);
  --ink-faint: color-mix(in srgb, var(--ink) 45%, transparent);
  --muted:     color-mix(in srgb, var(--ink) 58%, transparent);  /* support page inlines this */

  --card:      color-mix(in srgb, #fff 4%, transparent);
  --rule:      color-mix(in srgb, #fff 10%, transparent);
  --rule-soft: color-mix(in srgb, #fff 7%, transparent);

  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --body:    'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono:    'Spline Sans Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-soft);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

/* One soft accent bloom behind the masthead, so the page opens with the glow
   the film's scenes sit in rather than as a flat black rectangle. */
body::before {
  content: "";
  position: fixed;
  inset: -20vh 0 auto 0;
  height: 70vh;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(60% 55% at 50% 0%,
              color-mix(in srgb, var(--accent) 13%, transparent), transparent 70%);
}

/* One width for everything. The column is sized so the footer's copyright and
   its four links fit on a single row, and prose, panels, tables and the
   masthead rule all square up with that bottom line — no content cap short of
   it, which would leave a gutter down the right. */
.wrap {
  position: relative;
  z-index: 1;
  max-width: 820px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 36px) 96px;
}

/* ---------- masthead ---------- */

/* Eyebrow across the top, then the app icon and the title side by side, with
   the standfirst / "last updated" line spanning underneath. Every child is a
   block element, so there is no anonymous-item hazard here. */
header {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: clamp(16px, 2vw, 24px);
  align-items: center;
  padding: clamp(56px, 9vw, 92px) 0 30px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 8px;
}
header > .brand { grid-column: 1 / -1; margin-bottom: 24px; }
header > .app-icon,
header > .app-tile { grid-column: 1; grid-row: 2; }
header > h1 { grid-column: 2; grid-row: 2; margin: 0; }
header > .lede,
header > .updated,
header > p { grid-column: 1 / -1; }

/* The launcher icon at the size the store lists it, with the app's own corner
   radius. width/height are on the tag so it reserves space before it loads. */
.app-icon {
  width: clamp(60px, 8vw, 78px);
  height: auto;
  border-radius: 18px;
  display: block;
  border: 1px solid var(--rule);
}

/* Stand-in for an app with no icon of its own — the same letter tile the
   beamaze.in catalog falls back to, so the two agree. Better than shipping a
   framework's placeholder art. */
.app-tile {
  width: clamp(60px, 8vw, 78px);
  aspect-ratio: 1;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.7rem, 2.6vw, 2.1rem);
  line-height: 1;
  color: #fff;
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--accent) 62%, #000),
    color-mix(in srgb, var(--accent) 22%, #000));
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
}

/* The eyebrow. Mono, tracked, accent — identical to .apps__eyebrow on the main
   site, which is what makes a document page read as the same product. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--mono);
  font-weight: 500;
  font-size: .8rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
}
.brand a { color: inherit; text-decoration: none; }
.brand a:hover { color: var(--ink); }

/* The mark is inlined rather than an <img> so it inherits the page's Lato 900
   — a sandboxed SVG would drop the font and let "AMAZE" overflow its bar. */
.brand__mark { height: 21px; width: auto; display: block; flex: 0 0 auto; }
.brand__mark text { font-family: 'Lato', sans-serif; font-weight: 900; }

h1 {
  font-family: var(--display);
  font-weight: 580;
  font-size: clamp(2.5rem, 6vw, 4.1rem);
  line-height: .98;
  letter-spacing: -.03em;
  margin: 22px 0 0;
  text-wrap: balance;
  color: var(--ink);
}

/* A standfirst. In the masthead it is capped so it sits neatly under the title;
   in the body flow it is just a larger opening paragraph and takes the full
   measure like everything else — a cap there would end it short of every other
   right edge on the page. */
.lede {
  font-size: clamp(1.02rem, 1.3vw, 1.18rem);
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 20px 0 17px;
}
header > .lede { max-width: 56ch; margin-bottom: 0; }

/* "Last updated" is metadata, so it is set like metadata. */
.updated {
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 20px 0 0;
}

/* ---------- sections ---------- */

h2 {
  font-family: var(--display);
  font-weight: 580;
  font-size: clamp(1.7rem, 3vw, 2.1rem);
  line-height: 1.12;
  letter-spacing: -.025em;
  margin: 58px 0 12px;
  text-wrap: balance;
  color: var(--ink);
}

h3 {
  font-family: var(--body);
  font-weight: 600;
  font-size: 1.02rem;
  margin: 32px 0 6px;
  color: var(--ink);
}

/* Measure is set once on .wrap > *, not per element, so a paragraph and the
   panel under it line up instead of ending at two different places. */
p  { margin: 0 0 17px; }
ul, ol { padding-left: 22px; margin: 0 0 17px; }
li { margin: 8px 0; }
li::marker { color: var(--ink-faint); }

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
  transition: text-decoration-color .2s, color .2s;
}
a:hover { text-decoration-color: var(--accent); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

strong { font-weight: 600; color: var(--ink); }
em { font-style: italic; }

code {
  font-family: var(--mono);
  font-size: .86em;
  background: var(--card);
  border: 1px solid var(--rule-soft);
  padding: 2px 6px;
  border-radius: 5px;
  color: var(--ink);
  word-break: break-word;
}

/* ---------- callout / panel ---------- */

/* The card from the app catalog, restated for a block of prose. */
.callout, .panel {
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--accent);
  border-radius: 18px;
  padding: 22px 26px;
  margin: 28px 0;
}
.callout > :first-child, .panel > :first-child { margin-top: 0; }
.callout > :last-child, .panel > :last-child { margin-bottom: 0; }

/* Quieter: supporting detail rather than a warning. */
.graduate, .contact {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 22px 26px;
  margin: 28px 0;
}
.graduate > :first-child, .contact > :first-child { margin-top: 0; }
.graduate > :last-child, .contact > :last-child { margin-bottom: 0; }

.muted { color: var(--ink-faint); font-size: .93rem; }
.email { font-family: var(--mono); font-size: .9rem; }

/* For a short scalar in a table cell — a price, a count, a status. Without it
   the column collapses to its narrowest word and breaks "1 credit" over two
   lines while a prose column beside it takes all the width. */
.nowrap { white-space: nowrap; }

/* ---------- card grid ---------- */

/* Same card as .callout, tiled — for "pick the one that matches your problem"
   blocks. auto-fill means it reflows to one column on a phone by itself. */
.contact-grid,
.card-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  margin: 28px 0;
}
.contact-card,
.card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 20px 22px;
  transition: border-color .25s, background .25s;
}
.contact-card:hover,
.card:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  background: color-mix(in srgb, #fff 6%, transparent);
}
.contact-card h3,
.card h3 { margin: 0 0 8px; }
.contact-card p,
.card p { font-size: .93rem; }
.contact-card > :last-child,
.card > :last-child { margin-top: auto; margin-bottom: 0; }

/* ---------- buttons ---------- */

/* The catalog's store button: mono, pill, inverts to accent on hover. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  margin-top: 14px;
  padding: 9px 16px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-decoration: none;
  white-space: nowrap;
  color: var(--ink);
  background: color-mix(in srgb, #fff 5%, transparent);
  border: 1px solid var(--rule);
  transition: background .22s, border-color .22s, color .22s;
}
.btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--primary:hover { background: color-mix(in srgb, var(--accent) 84%, #000); }

/* ---------- numbered steps ---------- */

ol.steps {
  list-style: none;
  counter-reset: step;
  margin: 26px 0;
  padding: 0;
}
/* The number sits in a gutter, absolutely positioned — NOT as a grid column.
   A grid li splits its inline content into separate anonymous items around
   each element child, so "<strong>Lead.</strong> then prose" would put the
   prose in its own item on a second row, inside the narrow number column,
   and wrap it one word per line. Normal flow keeps the run intact. */
ol.steps > li {
  counter-increment: step;
  position: relative;
  padding: 20px 0 20px 62px;
  margin: 0;
  border-top: 1px solid var(--rule-soft);
}
ol.steps > li:first-child { border-top: 1px solid var(--rule); }
ol.steps > li:last-child { border-bottom: 1px solid var(--rule); }
ol.steps > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 25px;
  font-family: var(--mono);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* ---------- tables ---------- */

table {
  width: 100%;
  border-collapse: collapse;
  margin: 26px 0;
  display: block;
  overflow-x: auto;          /* wide tables scroll, the page never does */
  border: 1px solid var(--rule);
  border-radius: 18px;
  background: var(--card);
  font-family: var(--body);
}
th {
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: left;
  padding: 15px 20px 11px;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
td {
  padding: 14px 20px;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: top;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--ink-mid);
}
td:first-child { color: var(--ink); font-weight: 500; }
tr:last-child td { border-bottom: none; }

/* ---------- footer ---------- */

footer {
  margin-top: 72px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  font-size: .88rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px clamp(14px, 2vw, 24px);
}
/* Copyright left, links right, one row — the main site's footer. nowrap keeps
   "Privacy Policy" and "Terms of Service" from breaking mid-label. */
footer a {
  white-space: nowrap;
  color: var(--ink-mid);
  text-decoration: none;
  font-weight: 500;
  transition: color .22s;
}
footer a:hover { color: var(--ink); }
/* The copyright takes the leftover space and pushes the links right, but it may
   shrink and wrap its own text rather than force a link onto a second row —
   LOOM carries six links where FORGIA carries four, and at a fixed width the
   last of them would drop. Links stay nowrap, so the row never breaks. */
.foot__meta {
  flex: 1 1 200px;
  min-width: 0;
  margin: 0;
  font-size: .8rem;
  color: var(--ink-faint);
}

/* Highlighted key phrase — accent plus the hand-drawn stroke from the site. */
.hl {
  color: var(--accent);
  font-style: normal;
  position: relative;
  white-space: nowrap;
}
.hl::after {
  content: "";
  position: absolute;
  left: -.02em; right: -.02em; bottom: -.14em;
  height: .13em;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'><path d='M1 5.2 C 18 1.6, 34 7.4, 52 4.2 S 84 1.8, 99 4.8' fill='none' stroke='%23F5252E' stroke-width='2.6' stroke-linecap='round'/></svg>") no-repeat center / 100% 100%;
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  ol.steps > li { padding-left: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}