/* ------------------------------------------------------------------
   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 a serif at
   580 weight and -.03em tracking, body is the platform sans, and anything that
   is metadata rather than prose is mono at .18em tracking. The specific faces
   are named in the token block below, and are deliberately not webfonts.

   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);

  /* No webfont is loaded. These are the faces already sitting on the devices
     that will read these pages — Georgia and Iowan Old Style are on effectively
     every Windows, macOS, iOS and Android install, and the sans and mono resolve
     to whatever the platform considers its own.

     Fraunces, Hanken Grotesk and Spline Sans Mono were the intended faces and
     they came from Google. Fetching them meant a reader's IP address reached a
     third party before they had read a word of a page about what happens to
     their data, which is a poor thing for a privacy policy to do and is
     actionable in some jurisdictions. The design survives the substitution;
     that trade did not. */
  --display: Georgia, 'Iowan Old Style', 'Times New Roman', Times, serif;
  --body:    system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono:    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', 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 { 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);
}

/* 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 can be styled and so it
   inherits the page's colour.

   It used to depend on Lato 900, and the overflow risk that warned about is now
   handled in the SVG itself rather than by loading a font: the word carries an
   explicit `textLength`, so it is drawn to exactly the width of its bar in
   whatever heavy sans the device happens to have. */
.brand__mark { height: 21px; width: auto; display: block; flex: 0 0 auto; }
.brand__mark text {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 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; }
}