/* =====================================================================
   Cover The Gaps — /agents/ (also served at /mcp/) · "Warm Workspace"
   MCP connector landing: a learner or teacher connects Claude / ChatGPT /
   Gemini once, then the assistant acts on the site under their own
   account. Extends index_redesign.css — same tokens, same fonts, same
   atoms (.wrap/.section/.s-head/.eyebrow/.btn/.cta-row/.steps/.faq/
   .reveal/.frame/.mu*). No :root block here: this file only reuses
   existing tokens, plus the one new accessory the design calls for.

   Signature element: the "said / done" ledger. Left = human speech
   (chat bubble, warm paper). Right = the platform's record (Aurora
   product frame, IBM Plex Mono for the data lines). A thin orange wire
   connects them — the only orange inside the row. Used three ways:
   the hero (animated once), the capability rows (static), and the
   trust band (inverted — a visitor's short question next to the
   platform's boundary).
   ===================================================================== */

/* IBM Plex Mono: the one accessory this page adds. Scoped to `.lp`
   (not :root) — it never leaks outside this page and never touches the
   shared token set. Only for the "record" side: ids, dates, revisions,
   intervals, the server address. */
.lp { --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* =====================================================================
   0 · SLIM NAV
   Reuses .nav/.nav__in/.brand/.nav__lang/.nav__login/.btn verbatim.
   This header has no .nav__links and no burger, so the shared
   ≤920px rule that hides `.nav__in > .btn` (written for a page that
   collapses its links into a burger menu) would otherwise drop the
   one CTA this slim header exists to keep. Restore it.
   ===================================================================== */
@media (max-width: 920px) {
  .ag-nav .nav__in > .btn { display: inline-flex; }
}
/* Brand + language + Log in + the CTA button don't all fit one row under
   ~420px — rather than hide a functional link or invent a shortened CTA
   label, let the row wrap: `.nav__spacer` (normally `flex:1`, pushing
   everything right) becomes a 100%-wide zero-height item, which forces a
   flex-wrap line break after the brand. `.nav` is `position:fixed` with
   its height set by `.nav__in`, so letting that go `auto` here just grows
   the bar to two rows — the hero's top padding already clears more than
   that. */
@media (max-width: 480px) {
  .ag-nav .nav__in { flex-wrap: wrap; height: auto; padding-block: 12px; row-gap: 10px; }
  .ag-nav .nav__spacer { flex-basis: 100%; height: 0; }
  /* `.nav` is fixed, so it doesn't push flow content down on its own —
     the hero's own top padding is what clears it. Two rows need more of
     that than the shared 120px (≤980px) default gives. */
  .ag-hero { padding-top: 210px; }
}

/* =====================================================================
   1 · HERO
   Two-column grid, reusing `.hero__grid` verbatim — same 10fr/9fr split,
   56px gap and 980px stacking breakpoint templates/index.html uses —
   so the said/done demo sits beside the pitch instead of below the
   fold: copy on the left (left-aligned, matching `.hero__copy`), the
   ledger on the right. Below 980px they stack, copy then ledger, same
   as index.html's own hero.
   ===================================================================== */
.ag-hero { padding-bottom: 84px; }

/* This h1 is two full sentences (index.html's is one sentence plus a
   short 1-3 word <em>), so the shared clamp — sized for the old
   full-bleed centred hero — overflows the ~490-550px column the 2-col
   grid gives it at desktop: "It lands in your homework." (the nowrap
   em) measures ~726px at the shared clamp's max (62.4px), wider than
   the column. Scoped smaller clamp, desktop only — below the stacking
   breakpoint the column is close to full-wrap width again, where the
   shared clamp already fits (proven by index.html's own hero there),
   so it's left untouched. */
@media (min-width: 981px) {
  .ag-hero h1 { font-size: clamp(2.1rem, 2.6vw, 2.7rem); }
}
/* No pale underline band under the <em> — the orange text colour alone
   carries the emphasis. The shared band is tuned for a short 1-3 word
   phrase; under a full clause it reads as a detached, misaligned
   artifact (wider than the text on the left, short on the right,
   floating below the baseline), so it's removed outright rather than
   patched to track the text box. Below ~640px the clause no longer
   fits on one line even alone, so let it wrap like the rest of the
   heading. */
.ag-hero h1 em::after { content: none; }
@media (max-width: 640px) {
  .ag-hero h1 em { white-space: normal; }
}

.ag-hero__copy .cta-micro { margin-top: 16px; }

/* Within one beat (a said bubble and its own done record) the gap is
   the tightest spacing in the block; between beat 1 and beat 2 it's
   clearly larger — so a pair's two halves read as a unit, distinct
   from the pair above or below it, instead of scanning as two loose
   columns. */
.ag-ledger { display: grid; gap: 88px; }
.ag-ledger .sd { gap: 0 8px; }
@media (max-width: 760px) {
  .ag-ledger { gap: 64px; }
}

/* typing caret — only while a "said" line is actively being typed */
.ag-ledger .sd__caret {
  display: none; width: 2px; height: 1.05em; margin-left: 2px;
  background: var(--orange); vertical-align: -0.15em;
  animation: ag-caret 1s steps(1) infinite;
}
.ag-ledger .sd__said.is-typing .sd__caret { display: inline-block; }
@keyframes ag-caret { 50% { opacity: 0; } }

/* record lines materialise one at a time; scoped to the hero only —
   elsewhere .sd__line isn't used, rows just reveal as a whole. */
.ag-ledger .sd__line {
  opacity: 0; transform: translateY(6px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.ag-ledger .sd__line.is-on { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .ag-ledger .sd__caret { display: none !important; animation: none !important; }
  .ag-ledger .sd__line { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* =====================================================================
   2 · THE SAID / DONE LEDGER (signature element)
   .sd → .sd__said (left, paper) · .sd__wire (connector, orange) ·
   .sd__done (right, Aurora product frame, mono).
   ===================================================================== */
.sd {
  display: grid; grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr);
  align-items: center; gap: 0 16px;
}
.sd-list { display: grid; gap: 14px; }

.sd__said {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 16px 20px; box-shadow: var(--shadow-sm);
}
.sd__bubble { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.55; }

/* The only orange in the row. Full-strength `--orange` on the shaft (not
   the pale `--orange-soft` tint, which nearly disappeared against the
   light paper/card backgrounds even though it already read fine on the
   dark trust band, purely because dark gives it contrast for free) plus
   a bigger arrowhead, so it reads as a link between the two boxes
   rather than two unrelated dots. */
.sd__wire { position: relative; height: 3px; background: var(--orange); align-self: center; border-radius: 2px; }
.sd__wire::before {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 8px; height: 8px; border-radius: 50%; background: var(--orange);
}
.sd__wire::after {
  content: ""; position: absolute; right: -5px; top: 50%; transform: translateY(-50%);
  width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent;
  border-left: 10px solid var(--orange);
}

.sd__done {
  background: var(--app-surface); border: 1px solid var(--app-border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden;
}
.sd__done-head {
  display: flex; align-items: center; gap: 8px; padding: 10px 16px;
  background: var(--app-bg); border-bottom: 1px solid var(--app-border);
}
.sd__done-head svg { width: 15px; height: 15px; color: var(--app-primary); flex: none; }
.sd__done-head--policy { justify-content: center; }
.sd__done-head--policy svg { width: 18px; height: 18px; color: var(--orange-deep); }
/* `min-width:0` lets this flex item shrink below its content width at all
   (the flex default is `auto`, which refuses to); `overflow-wrap` then
   lets the longest function name ("save_homework_answer" — one unbroken
   token, no spaces for normal wrapping to use) break instead of
   overflowing `.sd__done`'s `overflow:hidden` and getting clipped. Matters
   most in the hero, where the 2-col grid narrows this column the most. */
.sd__fn { font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; color: var(--app-primary); letter-spacing: -.01em; min-width: 0; overflow-wrap: break-word; }
.sd__done-body { padding: 12px 16px; display: grid; gap: 5px; }
.sd__done-body p { margin: 0; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6; color: var(--app-ink); }

@media (max-width: 760px) {
  .sd { grid-template-columns: 1fr; }
  .sd__wire { width: 3px; height: 30px; margin: 10px auto; background: var(--orange); border-radius: 2px; }
  .sd__wire::after {
    right: auto; top: auto; bottom: -5px; left: 50%; transform: translateX(-50%);
    border-left: 7px solid transparent; border-right: 7px solid transparent;
    border-top: 10px solid var(--orange); border-bottom: 0;
  }
}

/* trust-band skin: said side reads on `--night`; done stays white Aurora
   on purpose — a real record reads the same regardless of what marketing
   chrome sits around it (`.demo__exercise` already does this elsewhere). */
.sd--night .sd__said { background: rgba(255, 255, 255, .05); border-color: var(--night-line); }
.sd--night .sd__bubble { color: var(--night-text); }

/* =====================================================================
   3 · CAPABILITY GROUPS ("What your assistant can do")
   ===================================================================== */
.ag-cap-group + .ag-cap-group { margin-top: 44px; }
.ag-cap-group__title {
  font-family: var(--font-display); font-size: 13px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 16px;
}
.ag-cap-group--teach .ag-cap-group__title { color: var(--orange-deep); }

/* =====================================================================
   4 · CONNECT — steps, address field, per-client tabs
   ===================================================================== */
.ag-address {
  max-width: 720px; margin: 8px auto 0; display: flex; align-items: center; gap: 10px;
  background: var(--card); border: 1px solid var(--line-2); border-radius: 999px;
  padding: 8px 8px 8px 20px; box-shadow: var(--shadow-sm);
}
.ag-address__ico { width: 18px; height: 18px; color: var(--ink-3); flex: none; }
.ag-address__field {
  flex: 1; min-width: 0; border: 0; background: none; width: 100%;
  font-family: var(--font-mono); font-size: 15px; color: var(--ink); padding: 10px 0;
}
/* The input has no border of its own (it sits inside the pill), so its
   default focus ring would draw a mismatched rectangle. Substitute a
   ring on the pill itself via :focus-within — outline is suppressed only
   because something equally visible replaces it, never removed outright. */
.ag-address:focus-within { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255, 107, 53, .3); }
input.ag-address__field:focus { outline: none; }
.ag-address__copy { flex: none; white-space: nowrap; }
.ag-address__copy.is-copied { background: var(--app-green); box-shadow: none; }

.ag-address--sm { max-width: none; margin: 14px 0 0; border-radius: var(--r); padding: 10px 10px 10px 16px; }
code.ag-address__field--code { font-size: 12.5px; overflow-x: auto; white-space: pre; padding: 8px 0; display: block; }

@media (max-width: 480px) {
  .ag-address { flex-direction: column; align-items: stretch; border-radius: var(--r-lg); padding: 14px; gap: 10px; }
  .ag-address__ico { display: none; }
  .ag-address__field { text-align: center; font-size: 13px; }
  .ag-address--sm .ag-address__field { text-align: left; }
  .ag-address__copy { width: 100%; justify-content: center; }
}

.ag-tabs { max-width: 720px; margin: 30px auto 0; }
.ag-tabs__list { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ag-tabs__tab {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--line-2); background: var(--card); color: var(--ink-2);
  font-family: var(--font-text); font-size: 14px; font-weight: 700;
  border-radius: 999px; padding: 9px 16px; cursor: pointer; transition: .15s var(--ease);
}
.ag-tabs__tab svg { width: 15px; height: 15px; }
.ag-tabs__tab:hover { border-color: var(--ink-3); }
.ag-tabs__tab.is-active { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.ag-tabs__panels {
  margin-top: 18px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 22px 24px; box-shadow: var(--shadow-sm);
  display: grid; gap: 16px;
}
.ag-tabs__panel-label {
  display: block; font-size: 12px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px;
}
.ag-tabs__panel p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.6; }

/* =====================================================================
   5 · TRUST BAND ("It acts as you") — a second dark peak block
   ===================================================================== */
.ag-trust { background: var(--night); color: var(--night-text); padding: 88px 0; position: relative; overflow: clip; }
.ag-trust::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(760px 420px at 50% -10%, rgba(255, 107, 53, .12), transparent 65%);
}
.ag-trust .s-head { position: relative; }
.ag-trust .eyebrow { color: var(--orange); }
.ag-trust .s-title { color: var(--night-text); }
.ag-trust .s-sub { color: var(--night-dim); }
.ag-trust__list { max-width: 820px; margin: 0 auto; position: relative; }

/* =====================================================================
   6 · TEACHER BAND
   ===================================================================== */
.ag-teach { background: var(--paper-2); border-block: 1px solid var(--line); padding: 60px 0; text-align: center; }
.ag-teach__in { max-width: 620px; margin-inline: auto; }
.ag-teach__in .s-title { margin-top: 0; }
.ag-teach__in p { color: var(--ink-2); margin-top: 14px; font-size: 16px; }
.ag-teach__in .btn { margin-top: 24px; }

/* =====================================================================
   7 · FOOTER — shorter than the main landing's, same shape
   ===================================================================== */
.ag-foot .foot__grid { grid-template-columns: 2fr 1fr; gap: 40px; }
@media (max-width: 620px) {
  .ag-foot .foot__grid { grid-template-columns: 1fr; gap: 28px; }
}