/*
 * About — Nightfall.
 *
 * This sheet used to be the light-theme original with a dark patch applied:
 * ink surfaces, but bone-white borders (#e6e4df), white inset highlights and
 * brand-blue tiles bevelled like stickers. On the constellation those read as
 * a different product, which is why About looked cheaper than every page
 * around it. It is now written in the same language as `_fluttergo-docs.css`
 * and `_fluttergo-explore.css`:
 *
 *   ink panel + hairline        every card is `--nf-panel` on `--nf-line`
 *   Fraunces display            section titles
 *   Inter body                  copy, cards
 *   JetBrains Mono utility      section index, labels, tags
 *   sky = wayfinding            icons, hover borders, the numbered index
 *   ember = one action          the single CTA at the foot of the page
 *
 * Scoped to `body.fgs--about` so the shared `.fgs-*` components keep their own
 * treatment on the pages that still use them.
 */

body.fgs--about {
  --fga-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --fga-radius: 16px;
  /* One surface, one light source, one lift. Every card on the page draws
     from these three so the grid, the story and the mock all sit in the same
     room instead of three different flat greys. */
  --fga-surface: linear-gradient(180deg, var(--nf-panel-2) 0%, var(--nf-panel) 100%);
  --fga-edge: inset 0 1px 0 rgba(233, 238, 249, 0.05);
  --fga-lift: 0 24px 48px -30px rgba(0, 0, 0, 0.85);
  --fga-lift-hover: 0 30px 60px -28px rgba(0, 0, 0, 0.9);
}

/* The starfield is the background; nothing here paints an opaque slab. */
body.fgs--about .fgs-bg { display: none; }

/* ====================================================================== */
/* Section heads — the docs group-head, reused                            */
/* ====================================================================== */
body.fgs--about .fga-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 18px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--nf-line);
}
body.fgs--about .fga-head-num {
  font-family: var(--nf-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--nf-sky);
  font-variant-numeric: tabular-nums;
}
body.fgs--about .fga-head h2 {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-family: var(--nf-display);
  font-weight: 300;
  font-size: clamp(25px, 3vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--nf-star);
}
body.fgs--about .fga-head h2 em {
  font-style: italic;
  font-weight: 400;
  color: var(--nf-ember);
}
body.fgs--about .fga-head-note {
  font-family: var(--nf-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--nf-dim);
  white-space: nowrap;
}
@media (max-width: 640px) {
  body.fgs--about .fga-head { flex-wrap: wrap; gap: 8px 12px; }
  body.fgs--about .fga-head-note { width: 100%; }
}

/* ====================================================================== */
/* Mission split                                                          */
/* ====================================================================== */
body.fgs--about .fgs-split__copy h2 {
  margin: 0 0 16px;
  font-family: var(--nf-display);
  font-weight: 300;
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--nf-star);
}
body.fgs--about .fgs-split__copy h2 em {
  font-style: italic;
  font-weight: 400;
  color: var(--nf-ember);
}
body.fgs--about .fgs-split__copy .fgs-lead {
  font-size: 16px;
  line-height: 1.6;
  color: var(--nf-muted);
}
body.fgs--about .fgs-split__copy b { color: var(--nf-star); font-weight: 600; }

body.fgs--about .fgs-feature-list {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
body.fgs--about .fgs-feature-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14.5px;
  color: var(--nf-muted);
}
/* The tick tiles were 3D stickers with white bevels. On ink they become the
   same quiet glass square the docs cards use for their chapter icons. */
body.fgs--about .fgs-feature-list .tick {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid var(--nf-line);
  background: rgba(13, 21, 36, 0.7);
  color: var(--nf-sky);
  box-shadow: none;
}
body.fgs--about .fgs-feature-list .tick svg { width: 17px; height: 17px; }

/* ====================================================================== */
/* Value cards                                                            */
/* ====================================================================== */
body.fgs--about .fgs-values__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 1080px) {
  body.fgs--about .fgs-values__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  body.fgs--about .fgs-values__grid { grid-template-columns: 1fr; }
}

body.fgs--about .fgs-values__grid { counter-reset: fga-value; }
body.fgs--about .fgs-value {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  box-sizing: border-box;
  padding: 22px 20px 20px;
  border-radius: var(--fga-radius);
  border: 1px solid var(--nf-line);
  background: var(--fga-surface);
  box-shadow: var(--fga-edge), var(--fga-lift);
  overflow: hidden;
  transition: transform 0.25s var(--fga-ease), border-color 0.25s var(--fga-ease),
    box-shadow 0.25s var(--fga-ease);
}
/* A light catch in the corner the light comes from, and a hairline along the
   top edge that brightens on hover. Both are the same trick the mock's stage
   uses, at card scale. */
body.fgs--about .fgs-value::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(70% 60% at 0% 0%, rgba(91, 200, 255, 0.09), transparent 68%);
  opacity: 0.7;
  transition: opacity 0.25s var(--fga-ease);
}
body.fgs--about .fgs-value:hover {
  transform: translateY(-3px);
  border-color: rgba(91, 200, 255, 0.34);
  box-shadow: var(--fga-edge), var(--fga-lift-hover), 0 0 0 1px rgba(91, 200, 255, 0.08);
}
body.fgs--about .fgs-value:hover::before { opacity: 1; }
/* The head says "6 things"; the cards can just as well say which one. */
body.fgs--about .fgs-value::after {
  counter-increment: fga-value;
  content: counter(fga-value, decimal-leading-zero);
  position: absolute;
  top: 20px;
  right: 20px;
  font-family: var(--nf-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: rgba(148, 170, 220, 0.35);
  font-variant-numeric: tabular-nums;
  transition: color 0.25s var(--fga-ease);
}
body.fgs--about .fgs-value:hover::after { color: var(--nf-sky); }
body.fgs--about .fgs-value > * { position: relative; z-index: 1; }
/* Tiles are sky at rest, not on hover. A feature icon that only earns colour
   when you point at it reads as disabled on a page nobody hovers. */
body.fgs--about .fgs-value__ico {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(91, 200, 255, 0.2);
  background: linear-gradient(160deg, rgba(91, 200, 255, 0.16) 0%, rgba(13, 21, 36, 0.85) 70%);
  color: var(--nf-sky);
  box-shadow: inset 0 1px 0 rgba(233, 238, 249, 0.07);
  transform: none;
  transition: border-color 0.25s var(--fga-ease), box-shadow 0.25s var(--fga-ease);
}
body.fgs--about .fgs-value:hover .fgs-value__ico {
  border-color: rgba(91, 200, 255, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(233, 238, 249, 0.1),
    0 6px 20px -8px rgba(91, 200, 255, 0.5);
  transform: none;
}
body.fgs--about .fgs-value__ico svg { width: 19px; height: 19px; display: block; }
body.fgs--about .fgs-value h3 {
  margin: 0;
  font-family: var(--nf-body);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--nf-star);
}
body.fgs--about .fgs-value p {
  margin: 0;
  flex: 1;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--nf-muted);
}
/* Tags are metadata, not badges: mono, quiet, no fill fighting the card. */
body.fgs--about .fgs-value__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 2px 0 0;
  padding: 0;
}
body.fgs--about .fgs-value__tags li {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--nf-line);
  background: rgba(4, 6, 12, 0.45);
  box-shadow: inset 0 1px 0 rgba(233, 238, 249, 0.04);
  font-family: var(--nf-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--nf-muted);
}

/* ====================================================================== */
/* Story steps                                                            */
/* ====================================================================== */
body.fgs--about .fgs-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
/* A thread runs behind the row at the height of the step numbers. The cards
   are opaque, so it only shows in the gaps: three cards become one sequence
   without drawing a single connector by hand. */
body.fgs--about .fgs-steps::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 8%;
  right: 8%;
  top: 34px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(91, 200, 255, 0.35), transparent);
}
@media (max-width: 900px) {
  body.fgs--about .fgs-steps { grid-template-columns: 1fr; }
  body.fgs--about .fgs-steps::before { display: none; }
}
body.fgs--about .fgs-step {
  position: relative;
  z-index: 1;
  display: block;
  padding: 22px 20px 24px;
  border-radius: var(--fga-radius);
  border: 1px solid var(--nf-line);
  background: var(--fga-surface);
  box-shadow: var(--fga-edge), var(--fga-lift);
  overflow: hidden;
  transition: transform 0.25s var(--fga-ease), border-color 0.25s var(--fga-ease),
    box-shadow 0.25s var(--fga-ease);
}
body.fgs--about .fgs-step::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(70% 60% at 0% 0%, rgba(91, 200, 255, 0.08), transparent 68%);
}
body.fgs--about .fgs-step > * { position: relative; z-index: 1; }
body.fgs--about .fgs-step:hover {
  transform: translateY(-3px);
  border-color: rgba(91, 200, 255, 0.34);
  box-shadow: var(--fga-edge), var(--fga-lift-hover), 0 0 0 1px rgba(91, 200, 255, 0.08);
}
/* The 118px ghost numeral behind each card was a blue watermark that got
   clipped by the card edge. The index reads as a mono counter instead, the
   same one the docs chapter groups use. */
body.fgs--about .fgs-step::before { content: none; }
body.fgs--about .fgs-step__num {
  width: auto;
  height: auto;
  display: inline-block;
  margin-bottom: 14px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(91, 200, 255, 0.22);
  background: rgba(4, 6, 12, 0.6);
  box-shadow: inset 0 1px 0 rgba(233, 238, 249, 0.05);
  font-family: var(--nf-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--nf-sky);
  font-variant-numeric: tabular-nums;
}
body.fgs--about .fgs-step h3 {
  margin: 0 0 8px;
  font-family: var(--nf-body);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--nf-star);
}
body.fgs--about .fgs-step p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--nf-muted);
}

/* ====================================================================== */
/* Company + contact                                                      */
/* ====================================================================== */
body.fgs--about .fgs-card {
  position: relative;
  padding: 24px;
  border-radius: var(--fga-radius);
  border: 1px solid var(--nf-line);
  background: var(--fga-surface);
  box-shadow: var(--fga-edge), var(--fga-lift);
  overflow: hidden;
}
body.fgs--about .fgs-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(70% 60% at 0% 0%, rgba(91, 200, 255, 0.08), transparent 68%);
}
body.fgs--about .fgs-card > * { position: relative; z-index: 1; }
body.fgs--about .fgs-card__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 14px;
  border-radius: 12px;
  border: 1px solid rgba(91, 200, 255, 0.2);
  background: linear-gradient(160deg, rgba(91, 200, 255, 0.16) 0%, rgba(13, 21, 36, 0.85) 70%);
  color: var(--nf-sky);
  box-shadow: inset 0 1px 0 rgba(233, 238, 249, 0.07);
}
body.fgs--about .fgs-card__icon svg { width: 19px; height: 19px; }
body.fgs--about .fgs-card h3 {
  margin: 0 0 10px;
  font-family: var(--nf-body);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--nf-star);
}
body.fgs--about .fgs-card p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--nf-muted);
}
body.fgs--about .fgs-card p b { color: var(--nf-star); font-weight: 600; }
body.fgs--about .fgs-card a { color: var(--nf-sky); text-decoration: none; }
body.fgs--about .fgs-card a:hover { text-decoration: underline; }

body.fgs--about .fgs-social { display: flex; gap: 8px; margin-top: 18px; }
body.fgs--about .fgs-social a {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--nf-line);
  background: rgba(13, 21, 36, 0.7);
  color: var(--nf-muted);
  transition: color 0.2s var(--fga-ease), border-color 0.2s var(--fga-ease),
    background 0.2s var(--fga-ease);
}
body.fgs--about .fgs-social a:hover {
  color: var(--nf-sky);
  border-color: rgba(91, 200, 255, 0.42);
  background: rgba(91, 200, 255, 0.08);
}
body.fgs--about .fgs-social svg { width: 16px; height: 16px; }

/* ====================================================================== */
/* Closing CTA                                                            */
/* ====================================================================== */
/* Every other page ends on an action. About used to end on a postal address,
   which left the reader with nowhere to go but the footer. */
/* Shape, surface and the ember hairline come from the shared closing band in
   `_fluttergo-pagehead.css` — the same ending pricing, docs, explore and the
   blog carry. This only places it under the last section. */
body.fgs--about .fga-cta {
  margin-top: clamp(48px, 6vw, 76px);
}
body.fgs--about .fga-cta > * { position: relative; z-index: 1; }
body.fgs--about .fga-cta-label {
  margin: 0;
  font-family: var(--nf-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--nf-dim);
}
body.fgs--about .fga-cta h2 {
  margin: 12px 0 0;
  font-family: var(--nf-display);
  font-weight: 300;
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--nf-star);
}
body.fgs--about .fga-cta h2 em {
  font-style: italic;
  font-weight: 400;
  color: var(--nf-ember);
}
body.fgs--about .fga-cta p {
  margin: 12px auto 0;
  max-width: 52ch;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--nf-muted);
}
body.fgs--about .fga-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 22px;
}
body.fgs--about .fga-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 11px 22px;
  border: 1px solid transparent;
  font-family: var(--nf-body);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: box-shadow 0.25s var(--fga-ease), border-color 0.25s var(--fga-ease),
    background 0.25s var(--fga-ease), color 0.25s var(--fga-ease);
}
body.fgs--about .fga-btn--ember { background: var(--nf-ember); color: var(--nf-ember-ink); }
body.fgs--about .fga-btn--ember:hover { box-shadow: 0 6px 32px rgba(255, 106, 61, 0.4); }
body.fgs--about .fga-btn--ghost {
  border-color: var(--nf-line-bright);
  color: var(--nf-star);
  background: transparent;
}
body.fgs--about .fga-btn--ghost:hover {
  border-color: var(--nf-sky);
  background: rgba(91, 200, 255, 0.06);
}

/* ====================================================================== */
/* Mission mock — a real project, not a logo tile                         */
/* ====================================================================== */
/* The stage used to be a flat `--surface-2` rectangle with the mock floating
   in one corner of it. It now carries the same two things the rest of the
   site's openings carry, so the graphic belongs to the same world as the page
   around it: one sky aurora, and the constellation's dot lattice. */
body.fgs--about .fgs-split__media {
  position: relative;
  display: grid;
  place-items: center;
  padding: 26px 20px;
  min-height: 420px;
  border-radius: 20px;
  border: 1px solid var(--nf-line);
  background: var(--nf-panel);
  box-shadow:
    inset 0 1px 0 rgba(233, 238, 249, 0.06),
    0 30px 70px -40px rgba(0, 0, 0, 0.9);
  overflow: hidden;
}
body.fgs--about .fga-stage-glow,
body.fgs--about .fga-stage-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
body.fgs--about .fga-stage-glow {
  background:
    radial-gradient(58% 52% at 22% 8%, rgba(30, 155, 224, 0.2), transparent 70%),
    radial-gradient(40% 38% at 88% 92%, rgba(255, 106, 61, 0.07), transparent 72%);
}
body.fgs--about .fga-stage-grid {
  background-image: radial-gradient(rgba(91, 200, 255, 0.14) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 72% 70% at 50% 40%, #000 0%, transparent 76%);
  mask-image: radial-gradient(ellipse 72% 70% at 50% 40%, #000 0%, transparent 76%);
}
/* The studio's own word for what this is, in the utility face the product
   uses for every label of this kind. */
body.fgs--about .fga-stage-tag {
  position: absolute;
  top: 16px;
  left: 18px;
  margin: 0;
  font-family: var(--nf-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--nf-dim);
}

/* Three objects, three lanes: editor, device, build status. They used to
   overlap, which at any real zoom read as a clipped card rather than depth. */
body.fgs--about .fgs-realapp {
  --accent: var(--nf-sky);
  position: relative;
  width: 100%;
  max-width: 520px;
  height: 380px;
  margin: 0 auto;
}

/* Everything in here is lit from the top left: a 1px specular edge on each
   surface, and a floor under the device. Without it the objects read as flat
   cutouts pasted onto a background rather than things sitting in a space. */
body.fgs--about :is(.fgs-realapp__folder, .fga-code, .fgs-realapp__hero, .fgs-realapp__rows li) {
  box-shadow:
    inset 0 1px 0 rgba(233, 238, 249, 0.05),
    0 24px 48px -28px rgba(0, 0, 0, 0.8);
}
body.fgs--about .fga-floor {
  position: absolute;
  z-index: 1;
  left: 208px;
  bottom: 2px;
  width: 168px;
  height: 70px;
  pointer-events: none;
  background: radial-gradient(60% 100% at 50% 0%, rgba(91, 200, 255, 0.16), transparent 72%);
  filter: blur(6px);
}
/* A vignette pulls the eye to the middle of the stage. */
body.fgs--about .fgs-split__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 90px 24px rgba(4, 6, 12, 0.55);
  border-radius: inherit;
}

/* ------------------------------------------------------------------ code */
/* The tree says a project exists; this says it is Dart, and that the edit in
   the tree is the line the app is about to render. */
body.fgs--about .fga-code {
  position: absolute;
  left: 0;
  top: 246px;
  width: 196px;
  border-radius: 14px;
  border: 1px solid var(--nf-line);
  background: linear-gradient(180deg, var(--nf-panel-2), var(--nf-panel));
  overflow: hidden;
  z-index: 2;
  font-family: var(--nf-mono);
}
body.fgs--about .fga-code-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  background: rgba(4, 6, 12, 0.5);
  border-bottom: 1px solid var(--nf-line);
  font-size: 9px;
  color: var(--nf-dim);
}
body.fgs--about .fga-code-bar span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.fgs--about .fga-code-bar em {
  font-style: normal;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid rgba(91, 200, 255, 0.22);
  color: var(--nf-sky);
  font-size: 8px;
  letter-spacing: 0.06em;
}
body.fgs--about .fga-code ol {
  list-style: none;
  margin: 0;
  padding: 8px 10px 10px;
  counter-reset: fga-line;
}
body.fgs--about .fga-code li {
  counter-increment: fga-line;
  position: relative;
  padding: 1px 0 1px 20px;
  font-size: 9px;
  line-height: 1.65;
  color: var(--nf-text, #c6d0e4);
  white-space: nowrap;
}
/* A real gutter. Tabular so the numbers do not shuffle. */
body.fgs--about .fga-code li::before {
  content: counter(fga-line);
  position: absolute;
  left: 0;
  width: 12px;
  text-align: right;
  color: rgba(148, 170, 220, 0.32);
  font-variant-numeric: tabular-nums;
}
body.fgs--about .fga-code b { font-weight: 500; color: var(--nf-sky); }
body.fgs--about .fga-code u { text-decoration: none; color: var(--nf-ok); }
body.fgs--about .fga-ind { padding-left: 28px; }
body.fgs--about .fga-ind2 { padding-left: 36px; }
body.fgs--about .fga-ind3 { padding-left: 44px; }
/* The line the edit added, marked the way a diff marks it. */
body.fgs--about .fga-code-new::after {
  content: "";
  position: absolute;
  left: 14px;
  top: 2px;
  bottom: 2px;
  width: 2px;
  border-radius: 99px;
  background: var(--nf-sky);
}
body.fgs--about .fga-code-new { background: rgba(91, 200, 255, 0.07); border-radius: 4px; }

/* The chips annotate the device, so a hairline says which one they mean. */
body.fgs--about .fgs-realapp__chip::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 16px;
  height: 1px;
  background: linear-gradient(90deg, rgba(148, 170, 220, 0.32), transparent);
}
body.fgs--about .fgs-realapp__chip--run::before { right: 100%; transform: scaleX(-1); }
body.fgs--about .fgs-realapp__chip--store::before { right: 100%; transform: scaleX(-1); }

/* The bar every modern phone ends on. */
/* A single diagonal gloss across the glass. Kept under 5% so it lifts the
   screen without washing out the UI underneath it. */
body.fgs--about .fgs-realapp__phone::after {
  content: "";
  position: absolute;
  z-index: 6;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(128deg, rgba(233, 238, 249, 0.05) 0%, transparent 34%, transparent 62%, rgba(233, 238, 249, 0.028) 100%);
}

body.fgs--about .fga-home-bar {
  width: 62px;
  height: 3px;
  margin: 6px auto 0;
  border-radius: 99px;
  background: rgba(148, 170, 220, 0.35);
}

/* ---------------------------------------------------------------- editor */
body.fgs--about .fgs-realapp__folder {
  position: absolute;
  left: 0;
  top: 42px;
  width: 196px;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--nf-panel-2), var(--nf-panel));
  border: 1px solid var(--nf-line);
  box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.7);
  overflow: hidden;
  z-index: 2;
  font-family: var(--nf-mono);
}
body.fgs--about .fgs-realapp__folder-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 9px 11px;
  background: rgba(4, 6, 12, 0.5);
  border-bottom: 1px solid var(--nf-line);
}
body.fgs--about .fgs-realapp__folder-bar i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(148, 170, 220, 0.22);
  box-shadow: inset 0 0 0 0.5px rgba(233, 238, 249, 0.12);
}
/* Traffic lights stay neutral here. Ember is the site's single-action colour,
   and spending it on a decorative window dot inside an illustration is how a
   palette stops meaning anything. */
body.fgs--about .fgs-realapp__folder-bar i:nth-child(3) { background: rgba(91, 200, 255, 0.45); }
body.fgs--about .fgs-realapp__folder-bar span {
  margin-left: 5px;
  flex: 1;
  font-size: 10.5px;
  color: var(--nf-muted);
}
/* The branch chip is the detail that makes it read as a working checkout. */
body.fgs--about .fgs-realapp__folder-bar em {
  font-style: normal;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--nf-line);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--nf-dim);
}
body.fgs--about .fgs-realapp__folder ul { list-style: none; margin: 0; padding: 9px 7px 11px; }
body.fgs--about .fgs-realapp__folder li {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px;
  border-radius: 8px;
  font-size: 11px;
  color: var(--nf-muted);
  line-height: 1.2;
}
body.fgs--about .fgs-realapp__folder li svg {
  flex: none;
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
  opacity: 0.75;
}
body.fgs--about .fgs-realapp__folder li em { font-style: normal; }
body.fgs--about .fgs-realapp__folder li.is-file { padding-left: 18px; }
body.fgs--about .fgs-realapp__folder li.is-file svg { color: var(--nf-sky); opacity: 0.85; }
body.fgs--about .fgs-realapp__folder li.is-on {
  background: rgba(91, 200, 255, 0.1);
  color: var(--nf-sky);
  box-shadow: inset 2px 0 0 var(--nf-sky);
}
/* Unsaved-changes dot, the way every editor marks a dirty buffer. */
body.fgs--about .fga-dirty {
  margin-left: auto;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--nf-ember);
}

/* ---------------------------------------------------------------- device */
body.fgs--about .fgs-realapp__phone {
  position: absolute;
  left: 208px;
  top: 4px;
  width: 168px;
  height: 348px;
  border-radius: 30px;
  background: linear-gradient(180deg, var(--nf-panel) 0%, var(--nf-panel-2) 100%);
  /* A bezel ring, then the ink of the device, then the drop. Three layers is
     what makes it read as hardware rather than a rounded rectangle. */
  border: 1px solid rgba(148, 170, 220, 0.22);
  box-shadow:
    0 0 0 3px rgba(4, 6, 12, 0.95),
    0 0 0 4px rgba(148, 170, 220, 0.12),
    0 0 44px -6px rgba(91, 200, 255, 0.16),
    0 34px 64px -26px rgba(0, 0, 0, 0.85);
  padding: 9px 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 3;
  overflow: hidden;
  animation: fga-float 4.2s cubic-bezier(0.23, 1, 0.32, 1) infinite;
}
@keyframes fga-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -6px; }
}

body.fgs--about .fgs-realapp__island {
  position: relative;
  width: 52px;
  height: 14px;
  margin: 0 auto 1px;
  border-radius: 99px;
  background: #01030a;
  box-shadow: inset 0 0 0 1px rgba(148, 170, 220, 0.1);
}
/* The lens is what separates a notch from a black pill. */
body.fgs--about .fgs-realapp__island i {
  position: absolute;
  right: 7px;
  top: 50%;
  translate: 0 -50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(91, 200, 255, 0.5), rgba(4, 6, 12, 0.9) 70%);
  box-shadow: inset 0 0 0 0.5px rgba(148, 170, 220, 0.25);
}

body.fgs--about .fgs-realapp__status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 3px;
  font-family: var(--nf-body);
  font-size: 9px;
  font-weight: 600;
  color: var(--nf-star);
}
body.fgs--about .fga-status-ic { display: inline-flex; align-items: center; gap: 4px; }
body.fgs--about .fga-signal { width: 11px; height: 8px; fill: var(--nf-star); }
body.fgs--about .fga-batt { width: 17px; height: 8px; fill: none; stroke: rgba(233, 238, 249, 0.5); stroke-width: 1; }
body.fgs--about .fga-batt .fga-batt-fill { fill: var(--nf-star); stroke: none; }
body.fgs--about .fga-batt path { fill: rgba(233, 238, 249, 0.5); stroke: none; }

body.fgs--about .fgs-realapp__appbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
body.fgs--about .fga-app-id { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
/* A monogram, not an empty grey circle. */
body.fgs--about .fga-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-family: var(--nf-body);
  font-size: 9px;
  font-weight: 700;
  font-style: normal;
  color: var(--nf-ink);
  background: linear-gradient(145deg, var(--nf-sky) 0%, var(--nf-sky-deep) 100%);
  box-shadow: 0 0 0 1px rgba(91, 200, 255, 0.3), 0 4px 10px -4px rgba(91, 200, 255, 0.5);
}
body.fgs--about .fgs-realapp__appbar b {
  font-family: var(--nf-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--nf-star);
}
body.fgs--about .fga-day {
  flex: none;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--nf-line);
  background: rgba(4, 6, 12, 0.4);
  font-family: var(--nf-body);
  font-size: 8.5px;
  font-weight: 500;
  color: var(--nf-muted);
}

body.fgs--about .fgs-realapp__hero {
  border-radius: 14px;
  padding: 11px 11px 12px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(91, 200, 255, 0.16), transparent 70%),
    rgba(13, 21, 36, 0.9);
  border: 1px solid rgba(91, 200, 255, 0.18);
}
body.fgs--about .fgs-realapp__hero strong {
  display: block;
  font-family: var(--nf-body);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--nf-star);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
/* Direct child only: the readout's thousands separator is a span too, and
   the caption rule was breaking "8," onto its own line above the count. */
body.fgs--about .fgs-realapp__hero > span {
  display: block;
  margin-top: 4px;
  font-family: var(--nf-body);
  font-size: 9px;
  color: var(--nf-dim);
}
body.fgs--about .fgs-realapp__hero strong span { font: inherit; color: inherit; }
body.fgs--about .fgs-realapp__meter {
  margin-top: 10px;
  height: 5px;
  border-radius: 99px;
  background: rgba(148, 170, 220, 0.14);
  overflow: hidden;
}
body.fgs--about .fgs-realapp__meter i {
  display: block;
  width: 72%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--nf-sky-deep), var(--nf-sky));
  box-shadow: 0 0 10px rgba(91, 200, 255, 0.5);
  animation: fga-meter 3.6s ease-in-out infinite;
}
@keyframes fga-meter {
  0%, 100% { width: 68%; }
  50% { width: 84%; }
}
body.fgs--about .fga-goal {
  display: block;
  margin-top: 7px;
  font-family: var(--nf-mono);
  font-size: 8.5px;
  letter-spacing: 0.04em;
  color: var(--nf-dim);
}

/* These were two empty grey pills. A preview whose content is placeholder
   blobs argues against the sentence next to it ("a real project you can
   run"), so the rows carry real entries from the app being previewed. */
body.fgs--about .fgs-realapp__rows {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 0 1 auto;
  list-style: none;
  margin: 0;
  padding: 0;
}
body.fgs--about .fgs-realapp__rows li {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  border-radius: 11px;
  background: rgba(13, 21, 36, 0.8);
  border: 1px solid var(--nf-line);
}
body.fgs--about .fga-row-ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 8px;
  background: rgba(91, 200, 255, 0.1);
  border: 1px solid rgba(91, 200, 255, 0.2);
  color: var(--nf-sky);
}
body.fgs--about .fga-row-ic svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body.fgs--about .fgs-realapp__rows b {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-family: var(--nf-body);
  font-size: 9px;
  font-weight: 600;
  color: var(--nf-star);
  /* Two lines here grew the row, and three grown rows pushed the tab bar out
     of the device. The entry title gets one line and an ellipsis. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.fgs--about .fgs-realapp__rows b em {
  font-style: normal;
  font-size: 8px;
  font-weight: 400;
  color: var(--nf-dim);
}
body.fgs--about .fgs-realapp__rows li > span {
  font-family: var(--nf-body);
  font-size: 10px;
  font-weight: 600;
  color: var(--nf-star);
  font-variant-numeric: tabular-nums;
}

body.fgs--about .fgs-realapp__nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--nf-line);
}
body.fgs--about .fgs-realapp__nav i {
  display: grid;
  place-items: center;
  color: rgba(148, 170, 220, 0.4);
}
body.fgs--about .fgs-realapp__nav i svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body.fgs--about .fgs-realapp__nav i.on { color: var(--accent); }

/* ------------------------------------------------------------ build chips */
/* Sized to clear the device. At the previous 10.5px/12px the two chips were
   ~180px wide against a 132px phone, so both of them landed on the screen
   they were meant to be annotating. */
body.fgs--about .fgs-realapp__chip {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(12, 19, 33, 0.92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid var(--nf-line-bright);
  box-shadow: 0 18px 36px -18px rgba(0, 0, 0, 0.8);
  font-family: var(--nf-mono);
  font-size: 9.5px;
  letter-spacing: 0.02em;
  color: var(--nf-star);
  white-space: nowrap;
}
body.fgs--about .fgs-realapp__chip svg { width: 11px; height: 11px; flex-shrink: 0; }
/* Green is a status, not a brand colour: it marks the run result and nothing
   else, so the chip's label reads in the utility face like every other label
   on the site and only the outcome is green. */
body.fgs--about .fgs-realapp__chip--run {
  right: 22px;
  top: 58px;
  color: var(--nf-muted);
  transform: rotate(2deg);
  animation: fga-chip 3.8s cubic-bezier(0.23, 1, 0.32, 1) infinite;
}
body.fgs--about .fgs-realapp__chip--run svg { color: var(--nf-ok); }
body.fgs--about .fgs-realapp__chip--run b {
  color: var(--nf-ok);
  font-weight: 500;
  padding-left: 5px;
  border-left: 1px solid var(--nf-line);
}
body.fgs--about .fgs-realapp__chip--store {
  right: 30px;
  bottom: 96px;
  color: var(--accent);
  transform: rotate(-2deg);
  animation: fga-chip 3.8s cubic-bezier(0.23, 1, 0.32, 1) infinite 0.4s;
}
@keyframes fga-chip {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -4px; }
}

@media (max-width: 620px) {
  body.fgs--about .fgs-split__media { min-height: 460px; padding: 22px 14px; }
  body.fgs--about .fgs-realapp { height: 404px; }
  /* The editor is the first thing to go: at this width it would either
     overlap the device or shrink past the point of being readable. Both
     halves of it, the tree and the code, leave together. */
  body.fgs--about .fgs-realapp__folder,
  body.fgs--about .fga-code { display: none; }
  /* Centred, and pushed down far enough to clear the "Live preview" tag: with
     the editor gone the device sits in the middle of the stage, which is
     exactly where the tag's last word used to end. */
  body.fgs--about .fgs-realapp__phone { left: 50%; margin-left: -84px; top: 30px; }
  /* There is no lane beside a phone on a phone, so the two build chips stop
     annotating the edges and become a caption row under the device. They keep
     their entrance and their bob; only the anchors move, and never through
     `transform`, which those two animations already own. */
  body.fgs--about .fgs-realapp__chip--run {
    top: auto;
    right: auto;
    left: 2px;
    bottom: 2px;
  }
  body.fgs--about .fgs-realapp__chip--store {
    right: 2px;
    bottom: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.fgs--about .fgs-value,
  body.fgs--about .fgs-step,
  body.fgs--about .fgs-value__ico { transition: none; transform: none; }
  body.fgs--about .fgs-realapp__phone,
  body.fgs--about .fgs-realapp__meter i,
  body.fgs--about .fgs-realapp__chip--run,
  body.fgs--about .fgs-realapp__chip--store { animation: none; }
}

/* ====================================================================== */
/* The build loop                                                         */
/* ====================================================================== */
/*
 * The mock used to be a still life with a bobbing phone. It now performs the
 * one sentence the section is making: you change a file, and a real app
 * rebuilds. One 11s loop, every beat on the same clock:
 *
 *   0.0s   the file you are editing types itself into the tree
 *   1.0s   a spark leaves that line and arcs into the device
 *   1.8s   a build sweep crosses the screen
 *   1.9s   the day's rows re-enter, the step count ticks up
 *   2.9s   `flutter run` reports ok
 *   3.5s   the store chip lands
 *   4.0s   hold, so the thing is legible far longer than it is busy
 *  10.3s   the app hot-reloads under a second sweep and the loop restarts
 *
 * Everything animates transform, opacity or a registered custom property, so
 * the whole sequence stays off the layout and paint path. It is decoration:
 * `aria-hidden` on the stage, and switched off entirely under
 * prefers-reduced-motion, where the mock reads as the still life it was.
 */
body.fgs--about .fgs-realapp { --fga-loop: 11s; }

/* ---- the file types itself ------------------------------------------- */
/* `ch` is the mono advance width, so 16ch is exactly "home_screen.dart" and
   the 16 steps land one character at a time. A percentage width here would
   measure the row, not the text, and clip the last glyph. */
body.fgs--about .fgs-realapp__folder li.fga-typing em {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
  max-width: 16ch;
  animation: fga-type var(--fga-loop) steps(16, end) infinite;
}
@keyframes fga-type {
  0%   { max-width: 0; }
  8%   { max-width: 16ch; }
  93%  { max-width: 16ch; }
  96%  { max-width: 0; }
  100% { max-width: 0; }
}
/* The caret only exists while the line is being written. */
body.fgs--about .fgs-realapp__folder li.fga-typing::after {
  content: '';
  display: inline-block;
  width: 1px;
  height: 9px;
  margin-left: 1px;
  vertical-align: -1px;
  background: var(--nf-sky);
  animation: fga-caret var(--fga-loop) steps(1, end) infinite;
}
@keyframes fga-caret {
  0%, 3%, 6%   { opacity: 1; }
  1.5%, 4.5%, 9% { opacity: 0; }
  10%, 100%    { opacity: 0; }
}
/* The folder row the edit lands on lights up as it is saved. */
body.fgs--about .fgs-realapp__folder li.is-on {
  animation: fga-saved var(--fga-loop) ease-out infinite;
}
@keyframes fga-saved {
  0%, 6%   { background: rgba(91, 200, 255, 0.1); }
  9%       { background: rgba(91, 200, 255, 0.28); }
  16%, 100% { background: rgba(91, 200, 255, 0.1); }
}

/* ---- the spark: code leaving the editor for the device ---------------- */
body.fgs--about .fga-spark {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: var(--nf-sky);
  box-shadow: 0 0 10px 2px rgba(91, 200, 255, 0.65);
  opacity: 0;
  /* Out of the file row, over the top of both objects, down into the screen.
     The device sits above it on z, so the spark reads as entering the phone
     rather than landing on top of it. */
  offset-path: path("M 192 152 C 220 74 262 84 268 176");
  offset-rotate: 0deg;
  animation: fga-spark-travel var(--fga-loop) cubic-bezier(0.45, 0, 0.2, 1) infinite;
}
@keyframes fga-spark-travel {
  0%, 9%   { offset-distance: 0%; opacity: 0; }
  11%      { opacity: 1; }
  15%      { offset-distance: 78%; opacity: 1; }
  18%      { offset-distance: 100%; opacity: 0; }
  100%     { offset-distance: 100%; opacity: 0; }
}

/* ---- the rebuild sweep ------------------------------------------------ */
body.fgs--about .fgs-realapp__phone { overflow: hidden; }
body.fgs--about .fga-sweep {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  top: 0;
  height: 60%;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(91, 200, 255, 0.16) 55%, transparent);
  opacity: 0;
  animation: fga-sweep var(--fga-loop) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
/* Two passes: the build at 16-22%, and the hot reload that restarts the loop. */
@keyframes fga-sweep {
  0%, 15%   { transform: translateY(-100%); opacity: 0; }
  16%       { opacity: 1; }
  22%       { transform: translateY(190%); opacity: 0; }
  93%       { transform: translateY(-100%); opacity: 0; }
  94%       { opacity: 1; }
  99%       { transform: translateY(190%); opacity: 0; }
  100%      { transform: translateY(-100%); opacity: 0; }
}

/* ---- the screen rebuilds ---------------------------------------------- */
body.fgs--about .fgs-realapp__hero,
body.fgs--about .fgs-realapp__rows {
  animation: fga-reload var(--fga-loop) ease-out infinite;
}
@keyframes fga-reload {
  0%, 16%  { opacity: 0.25; }
  20%      { opacity: 1; }
  93%      { opacity: 1; }
  96%      { opacity: 0.25; }
  100%     { opacity: 0.25; }
}
body.fgs--about .fgs-realapp__rows li {
  animation: fga-row-in var(--fga-loop) cubic-bezier(0.23, 1, 0.32, 1) infinite;
}
body.fgs--about .fgs-realapp__rows li:nth-child(1) { animation-delay: calc(var(--fga-loop) * 0.005); }
body.fgs--about .fgs-realapp__rows li:nth-child(2) { animation-delay: calc(var(--fga-loop) * 0.02); }
body.fgs--about .fgs-realapp__rows li:nth-child(3) { animation-delay: calc(var(--fga-loop) * 0.035); }
@keyframes fga-row-in {
  0%, 17%  { opacity: 0; transform: translateY(6px); }
  23%      { opacity: 1; transform: none; }
  93%      { opacity: 1; transform: none; }
  97%, 100% { opacity: 0; transform: translateY(6px); }
}

/* ---- the step count ticks up ------------------------------------------ */
/* A registered property is the only way to animate a number in CSS. Where
   `@property` is unsupported the declaration below is ignored, the element
   keeps its initial 420, and the readout is simply static. */
@property --fga-steps {
  syntax: '<integer>';
  initial-value: 420;
  inherits: false;
}
body.fgs--about .fga-count {
  font-style: normal;
  counter-reset: fga-steps var(--fga-steps);
  animation: fga-tick var(--fga-loop) cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
body.fgs--about .fga-count::after { content: counter(fga-steps); }
@keyframes fga-tick {
  0%, 18%  { --fga-steps: 120; }
  34%      { --fga-steps: 420; }
  100%     { --fga-steps: 420; }
}

/* ---- the two chips land in order -------------------------------------- */
body.fgs--about .fgs-realapp__chip--run,
body.fgs--about .fgs-realapp__chip--store {
  animation:
    fga-chip 3.8s cubic-bezier(0.23, 1, 0.32, 1) infinite,
    fga-chip-in var(--fga-loop) cubic-bezier(0.34, 1.4, 0.5, 1) infinite;
}
body.fgs--about .fgs-realapp__chip--run { animation-delay: 0s, calc(var(--fga-loop) * 0.26); }
body.fgs--about .fgs-realapp__chip--store { animation-delay: 0.4s, calc(var(--fga-loop) * 0.32); }
/* The bob owns `translate`, the entrance owns `scale` and `opacity`, so the
   two animations can run on the same element without fighting for one
   property. The chips' rotation stays on `transform`, untouched by both. */
@keyframes fga-chip-in {
  0%   { opacity: 0; scale: 0.9; }
  4%   { opacity: 1; scale: 1; }
  62%  { opacity: 1; scale: 1; }
  66%  { opacity: 0; scale: 0.94; }
  100% { opacity: 0; scale: 0.94; }
}

@media (prefers-reduced-motion: reduce) {
  body.fgs--about .fgs-realapp__folder li.fga-typing em,
  body.fgs--about .fgs-realapp__folder li.fga-typing::after,
  body.fgs--about .fgs-realapp__folder li.is-on,
  body.fgs--about .fga-spark,
  body.fgs--about .fga-sweep,
  body.fgs--about .fgs-realapp__hero,
  body.fgs--about .fgs-realapp__rows,
  body.fgs--about .fgs-realapp__rows li,
  body.fgs--about .fga-count,
  body.fgs--about .fgs-realapp__chip--run,
  body.fgs--about .fgs-realapp__chip--store {
    animation: none;
  }
  body.fgs--about .fga-spark,
  body.fgs--about .fga-sweep { display: none; }
  body.fgs--about .fgs-realapp__folder li.fga-typing em { width: auto; }
}