/* gidg3t.css - the /gidg3t page, and only that page.

   IT LOADS AFTER hive.css AND DOES NOT REPEAT IT. The tokens, the body wash and the reset are
   already defined there, and the note at the top of that file about "the same rules written four
   times" is exactly the reason this does not re-declare them. What is here is what a landing page
   needs and the four door-pages do not: a nav bar, a hero, panel grids, a proof strip.

   THE SAME HOUSE LAW APPLIES. Nothing leaves the host - no web font, no CDN, no remote image. Her
   portrait is a local PNG cut from the wordmark-free master; every other mark on the page is inline
   SVG or CSS. A landing page that phones out is a landing page that lies about being offline.

   The accents are read off the founder's style guide rather than invented here. */
:root {
  --hot: #ff68d8;      /* the live/emphasis pink */
  /* The amber is the boundary and the claims that restate it - the dashed frontier, "the machine
     never authors the goal", "presence can be information", "works offline". It is never used for
     ordinary emphasis, which is what keeps it meaning something when it does appear. */
  --warm: #ffb86b;
  --good: #a3ff9f;     /* something held or unchanged */
  --cool: #6ee7ff;
  --violet: #a78bfa;
}

body.gidg3t { padding: 0 0 0; }
.g-wrap { width: min(1100px, 100%); margin: 0 auto; padding: 0 24px; }

/* ── the bar ──────────────────────────────────────────────────────────────── */
/* THE BAR IS TWO ELEMENTS, NOT ONE WITH AN INLINE STYLE. The gate serves these pages under
   `style-src 'self'` with no 'unsafe-inline', so a `style="..."` attribute is not a shortcut here,
   it is a rule the browser drops on the floor. Every layout value lives in this file for that
   reason. The outer element is the full-width bar; the inner one is the centred row. */
.g-nav {
  position: sticky; top: 0; z-index: 20;
  padding: 14px 0;
  background: rgba(11, 15, 26, .82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--edge);
}
.g-navin { display: flex; align-items: center; gap: 26px;
  width: min(1100px, 100%); margin: 0 auto; padding: 0 24px; }
.g-nav .lock { display: flex; align-items: center; gap: 11px; margin-right: auto;
  text-decoration: none; color: inherit; }
.g-nav .lock img { width: 34px; height: 34px; border-radius: 50%; flex: none; }
.g-nav .lock b { font-size: 21px; font-weight: 700; letter-spacing: -.02em; }
.g-nav .lock sup { color: var(--violet); font-size: 13px; }
.g-links { display: flex; gap: 24px; }
.g-links a { color: var(--ink-dim); text-decoration: none; font-size: 14px; font-weight: 500; }
.g-links a:hover { color: var(--ink); }
.g-cta {
  border: 1px solid rgba(255, 104, 216, .5); border-radius: 9px;
  padding: 9px 16px; font-size: 14px; font-weight: 600;
  color: var(--hot); text-decoration: none; white-space: nowrap;
}
.g-cta:hover { border-color: var(--hot); background: rgba(255, 104, 216, .08); }

/* ── the hero ─────────────────────────────────────────────────────────────── */
.g-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: start;
  padding: 62px 0 54px; }
.g-hero h1 { margin: 0 0 20px; font-size: clamp(36px, 4.6vw, 54px); line-height: 1.08;
  letter-spacing: -.03em; font-weight: 700; }
.g-hero h1 em { font-style: normal; color: var(--hot); }
.g-lede { margin: 0 0 22px; color: var(--ink-dim); font-size: 16px; max-width: 42ch; }
/* Her paw, as the bullet. One inline SVG reused by every row rather than an image request each. */
.g-nots { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 9px; }
.g-nots li { display: flex; align-items: center; gap: 11px; font-size: 15px; }
.g-nots svg { width: 17px; height: 17px; flex: none; color: var(--violet); }
/* observe -> infer -> decide -> act. The arrows are content, not decoration: they are the order. */
.g-flow { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 0 0 26px;
  font: 600 16px var(--sans); }
.g-flow i { font-style: normal; color: var(--hot); }
.g-flow i + i { color: var(--violet); }
.g-flow span { color: var(--ink-faint); }
.g-heroact { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.g-stat {
  border: 1px solid var(--edge); border-radius: 12px; padding: 13px 20px; background: var(--card);
}
.g-stat b { display: block; font-size: 27px; font-weight: 700; letter-spacing: -.02em; }
.g-stat span { font-size: 11px; color: var(--ink-faint); }
.g-ghost {
  border: 1px solid rgba(255, 104, 216, .45); border-radius: 11px; padding: 13px 20px;
  color: var(--hot); text-decoration: none; font-weight: 600; font-size: 15px;
}
.g-ghost:hover { background: rgba(255, 104, 216, .08); }

/* ── the live card ────────────────────────────────────────────────────────── */
.g-card { border: 1px solid var(--edge); border-radius: 15px; background: rgba(255, 255, 255, .022);
  overflow: hidden; }
.g-cardtop { display: flex; align-items: center; justify-content: space-between;
  padding: 12px 17px; border-bottom: 1px solid var(--edge);
  font: 600 12px var(--mono); letter-spacing: .09em; }
.g-live { display: flex; align-items: center; gap: 7px; color: var(--good); font-size: 11px; }
.g-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--good); }
.g-cardbody { display: grid; grid-template-columns: 1.15fr 1fr; gap: 18px; padding: 18px 17px; }
.g-face { text-align: center; }
/* The master is a square with her disc painted on it, so the corners are hers and not transparent.
   Clipping them is what the panel and the brandbar already do; without it the card carries a black
   square that lines up with nothing. */
.g-face img { width: 100%; max-width: 210px; height: auto; border-radius: 50%; }
.g-face p { margin: 0 0 6px; color: var(--ink-dim); font-size: 14px; text-align: left; }
/* What she is looking at and what she made of it. Rows, because a reader compares rows. */
.g-read { display: grid; gap: 11px; align-content: start; }
.g-read div { border-bottom: 1px solid var(--edge); padding-bottom: 8px; }
.g-read dt { font: 600 9.5px var(--mono); letter-spacing: .12em; color: var(--ink-faint); }
.g-read dd { margin: 3px 0 0; font: 12px var(--mono); }
.g-read .ok { color: var(--good); }
.g-read .lit { color: var(--cool); }
.g-times { margin: 15px 17px 17px; border: 1px solid var(--edge); border-radius: 10px; padding: 11px 14px; }
.g-times div { display: flex; justify-content: space-between; font: 11.5px var(--mono);
  color: var(--ink-dim); padding: 2.5px 0; }
.g-times div.tot { color: var(--hot); font-weight: 700; border-top: 1px solid var(--edge);
  margin-top: 5px; padding-top: 7px; }

/* ── the turn ─────────────────────────────────────────────────────────────── */
.g-turn { text-align: center; padding: 40px 0 34px; font-size: clamp(23px, 3.1vw, 34px);
  font-weight: 700; letter-spacing: -.02em; line-height: 1.32; }
.g-turn u { text-decoration: none; color: var(--violet); }
.g-turn s { text-decoration: none; color: var(--warm); }

/* ── panel grids ──────────────────────────────────────────────────────────── */
.g-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; padding-bottom: 20px; }
.g-panel { border: 1px solid var(--edge); border-radius: 14px; background: var(--card);
  padding: 19px 17px; }
.g-panel h3 { margin: 0 0 16px; font: 600 11.5px var(--mono); letter-spacing: .14em;
  color: var(--ink-dim); text-align: center; text-transform: uppercase; }
.g-panel p { font-size: 12.5px; color: var(--ink-dim); line-height: 1.6; }
.g-panel .close { color: var(--warm); font-weight: 600; }
/* the loop, as a column of stages inside its boundary */
.g-loop { border: 1px dashed rgba(255, 184, 107, .55); border-radius: 11px; padding: 15px 13px 13px;
  position: relative; margin-bottom: 15px; }
.g-loop legend { font: 600 9.5px var(--mono); letter-spacing: .14em; color: var(--warm);
  padding: 0 7px; margin-left: 6px; }
.g-loop ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.g-loop li { border: 1px solid var(--edge-lit); border-radius: 7px; padding: 6px;
  text-align: center; font: 600 11px var(--mono); letter-spacing: .05em; }
.g-loop li:nth-child(1) { color: var(--cool); }
.g-loop li:nth-child(2) { color: var(--violet); }
.g-loop li:nth-child(3) { color: var(--hot); }
.g-loop li:nth-child(4) { color: var(--good); }
/* the numbered walk */
.g-steps { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 11px; }
.g-steps li { display: grid; grid-template-columns: 22px 1fr; gap: 9px; }
.g-steps b { font: 600 10px var(--mono); color: var(--ink-faint);
  border: 1px solid var(--edge); border-radius: 5px; height: 18px; display: grid; place-items: center; }
.g-steps h4 { margin: 0; font: 600 11px var(--mono); letter-spacing: .09em; }
.g-steps p { margin: 2px 0 0; font-size: 11.5px; }
/* before/after code blocks */
.g-code { border: 1px solid var(--edge); border-radius: 9px; padding: 10px 12px;
  font: 11.5px/1.7 var(--mono); color: var(--ink-dim); background: rgba(0, 0, 0, .22); }
.g-code b { color: var(--ink); font-weight: 400; display: block; }
.g-code i { font-style: normal; padding-left: 13px; display: block; }
.g-arrow { text-align: center; color: var(--ink-faint); font-size: 15px; margin: 8px 0; }
.g-verdict { border: 1px dashed rgba(163, 255, 159, .45); border-radius: 9px; padding: 9px 11px;
  text-align: center; font: 600 12px var(--mono); color: var(--good); }
.g-verdict.warm { border-color: rgba(255, 184, 107, .45); color: var(--warm); }
.g-yes { text-align: center; font-size: 34px; font-weight: 700; color: var(--good); margin: 14px 0 10px; }
.g-ask { text-align: center; font-size: 13.5px; margin: 0 0 14px; }

/* ── reach ────────────────────────────────────────────────────────────────── */
.g-kicker { text-align: center; font: 600 11px var(--mono); letter-spacing: .18em;
  color: var(--ink-faint); padding: 30px 0 16px; text-transform: uppercase; }
.g-reach h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 16px; }
.g-reach h3 svg { width: 25px; height: 25px; flex: none; color: var(--violet); }
.g-reach ul { list-style: none; margin: 0; padding: 0; font: 12.5px var(--mono); color: var(--ink-dim);
  display: grid; gap: 4px; }

/* ── proof ────────────────────────────────────────────────────────────────── */
.g-proofgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }
.g-cell { border: 1px solid var(--edge); border-radius: 12px; padding: 15px 16px;
  background: var(--card); text-align: center; }
.g-cell span { font-size: 11.5px; color: var(--ink-dim); display: block; margin-bottom: 7px; }
.g-cell b { font-size: 25px; font-weight: 700; letter-spacing: -.02em; display: block; }
.g-cell b.none { color: var(--violet); }
.g-cell b.lit { color: var(--hot); }
.g-cell em { font-style: normal; font-size: 10.5px; color: var(--ink-faint); }
.g-foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 16px 0 70px; font-size: 11.5px; color: var(--ink-faint); }
.g-foot a { color: var(--ink-dim); }

/* ── narrow ───────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .g-hero { grid-template-columns: 1fr; gap: 34px; padding-top: 40px; }
  .g-grid, .g-proofgrid { grid-template-columns: repeat(2, 1fr); }
  .g-links { display: none; }
}
@media (max-width: 560px) {
  .g-grid, .g-proofgrid { grid-template-columns: 1fr; }
  .g-cardbody { grid-template-columns: 1fr; }
}


/* ── the form ─────────────────────────────────────────────────────────────────
   The apply page borrows hive.css's form, which is correct and grey. These are the only rules
   that make it hers: an inward pink glow that deepens on focus, so the field you are in is
   obviously alive without anything moving or blinking.

   INSET, not outset. An outer halo on a dark ground reads as a browser focus ring somebody forgot
   to remove; an inner one reads as the field being lit from inside. `outline: none` is already set
   by hive.css, so the focus state has to be visible here or it is visible nowhere, which is an
   accessibility fault rather than a style choice. */
.gidg3t input, .gidg3t textarea {
  background: rgba(255, 104, 216, .022);
  border-color: rgba(255, 104, 216, .18);
  box-shadow: inset 0 0 16px rgba(255, 104, 216, .05);
  transition: box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.gidg3t input::placeholder, .gidg3t textarea::placeholder { color: var(--ink-faint); }
.gidg3t input:hover, .gidg3t textarea:hover { border-color: rgba(255, 104, 216, .32); }
.gidg3t input:focus, .gidg3t textarea:focus {
  border-color: rgba(255, 104, 216, .62);
  background: rgba(255, 104, 216, .04);
  box-shadow: inset 0 0 22px rgba(255, 104, 216, .16), inset 0 0 3px rgba(255, 104, 216, .22);
}
.gidg3t .grp label { color: var(--ink); }
.gidg3t button {
  border: 1px solid rgba(255, 104, 216, .5);
  background: rgba(255, 104, 216, .06);
  color: var(--hot);
  box-shadow: inset 0 0 18px rgba(255, 104, 216, .07);
  transition: box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.gidg3t button:hover:not(:disabled) {
  border-color: var(--hot);
  background: rgba(255, 104, 216, .12);
  box-shadow: inset 0 0 26px rgba(255, 104, 216, .18);
}
.gidg3t button:disabled { opacity: .5; }
.gidg3t .count.short { color: var(--warm); }
.gidg3t .page h1 { padding-top: 34px; }