/* ═══════════════════════════════════════════════════════════════════════
   agents.css — /works/agents/ (AIエージェント導入支援). Loaded after works.css.

   The page is a Works service, so it keeps the house blue from works.css and
   reuses its shell (cards, faq, form). What lives here is only what this page
   has and the catalogue does not: pricing plans and process steps (borrowed
   from studio.css so the three sales pages price things the same way), the
   roles table, the Monday-morning brief, and the pull line.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Pull line — the one reframe the page turns on ─────────────────── */
.pull{
  position:relative;margin:clamp(28px,3.4vw,44px) 0 0;padding-left:clamp(18px,2vw,26px);
  max-width:30em;
  font-family:'Schibsted Grotesk','Zen Kaku Gothic New',sans-serif;
  font-weight:700;font-size:clamp(20px,2.6vw,31px);line-height:1.5;
  letter-spacing:-.02em;color:var(--ink);line-break:strict;
}
.pull::before{content:"";position:absolute;left:0;top:.2em;bottom:.2em;width:3px;
  border-radius:2px;background:var(--grad)}
.pull em{font-style:normal;background:var(--grad);-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* ── Numbers — our own case ────────────────────────────────────────── */
.nums{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));
  margin:0 0 clamp(26px,3vw,38px)}
.num{border:1px solid var(--line);border-radius:14px;padding:18px 20px;
  background:rgba(255,255,255,.028)}
.num b{display:block;font-family:'Schibsted Grotesk',sans-serif;font-weight:800;
  font-size:clamp(26px,3vw,36px);line-height:1;letter-spacing:-.03em;color:var(--ink)}
.num span{display:block;margin-top:8px;font-size:12.5px;line-height:1.7;color:var(--ink-mid)}

/* ── Roles table ───────────────────────────────────────────────────── */
.roles{margin:0;max-width:52em;border-top:1px solid rgba(255,255,255,.08)}
.roles div{display:grid;grid-template-columns:minmax(7.5em,9em) 1fr;gap:6px clamp(16px,2.4vw,32px);
  padding:15px 0;border-bottom:1px solid rgba(255,255,255,.08)}
/* Role names sit on the bare page, not on a card, and the aurora washes
   through a light band around this section — accent blue at 12.5px sank
   into it. White name, accent pip. */
.roles dt{position:relative;padding-left:16px;font-family:'IBM Plex Mono',monospace;font-size:12.5px;
  letter-spacing:.06em;line-height:1.9;color:var(--ink)}
.roles dt::before{content:"";position:absolute;left:0;top:.72em;width:7px;height:7px;border-radius:2px;
  background:var(--acc);box-shadow:0 0 8px var(--acc-glow)}
.roles dd{margin:0;font-size:14px;line-height:1.9;color:var(--ink-mid)}
.roles dd i{display:inline-block;margin-left:8px;font-style:normal;font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;letter-spacing:.1em;color:var(--ink-faint);border:1px solid var(--line);
  border-radius:6px;padding:1px 7px;vertical-align:middle}
@media (max-width:560px){.roles div{grid-template-columns:1fr}}

/* ── Monday-morning brief ──────────────────────────────────────────── */
.brief{
  max-width:44em;border:1px solid var(--acc-line);border-radius:18px;overflow:hidden;
  background:
    radial-gradient(120% 140% at 12% 0%,rgba(46,123,255,.14) 0%,transparent 62%),
    rgba(255,255,255,.03);
  font-family:'IBM Plex Mono',monospace;
}
.brief-head{display:flex;justify-content:space-between;gap:12px;padding:14px 22px;
  border-bottom:1px solid var(--line);font-size:12px;letter-spacing:.08em;color:var(--ink-dim)}
.brief-head b{font-weight:400;color:var(--ink)}
.brief-row{display:grid;grid-template-columns:5.5em 1fr;gap:8px 18px;padding:13px 22px;
  border-bottom:1px solid rgba(255,255,255,.06);font-size:13.5px;line-height:1.85}
.brief-row:last-child{border-bottom:none}
.brief-row b{font-weight:400;color:var(--acc);letter-spacing:.06em}
.brief-row span{color:var(--ink)}
.brief-row span em{font-style:normal;color:var(--ink-dim)}
.brief-row.doubt b{color:#F0B429}
@media (max-width:560px){.brief-row{grid-template-columns:1fr}}
.brief-after{margin:22px 0 0;max-width:44em;font-size:14px;line-height:1.95;color:var(--ink-mid)}

/* ── Pricing plans (same look as /studio/, /records/) ──────────────── */
.plan{display:flex;flex-direction:column}
.plan .price{
  font-family:'Schibsted Grotesk',sans-serif;font-weight:800;
  font-size:clamp(26px,3.2vw,38px);line-height:1;letter-spacing:-.03em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;margin:0 0 6px;
}
.plan .meta{margin:0 0 18px;font-family:'IBM Plex Mono',monospace;font-size:11.5px;
  letter-spacing:.08em;color:var(--ink-faint)}
.plan ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.plan li{position:relative;padding-left:22px;font-size:13.5px;line-height:1.8;color:var(--ink-mid)}
.plan li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;
  border-radius:50%;background:var(--acc);box-shadow:0 0 10px var(--acc-glow)}
.plan .foot{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--line);
  font-size:12.5px;line-height:1.85;color:var(--ink-dim)}
.plan--lead{border-color:var(--acc-line)}
.tier{margin:clamp(30px,3.4vw,44px) 0 14px;font-family:'IBM Plex Mono',monospace;
  font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--acc)}
.tier:first-of-type{margin-top:0}
.specs{display:grid;gap:10px;max-width:52em}
.spec{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 18px;
  border:1px solid var(--line);border-radius:14px;padding:16px 20px;background:rgba(255,255,255,.025)}
.spec b{font-size:14.5px;color:var(--ink)}
.spec b small{display:block;margin-top:3px;font-weight:400;font-size:12.5px;line-height:1.7;color:var(--ink-dim)}
.spec i{font-style:normal;font-family:'IBM Plex Mono',monospace;font-size:14px;color:var(--acc);white-space:nowrap}

/* ── Process steps ─────────────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,196px),1fr));
  gap:clamp(12px,1.5vw,18px)}
.step{position:relative;padding:26px 22px 24px;border:1px solid var(--line);
  border-radius:16px;background:rgba(255,255,255,.028);overflow:hidden}
.step::before{content:"";position:absolute;top:0;left:0;width:100%;height:2px;background:var(--grad)}
.step b{display:block;font-family:'IBM Plex Mono',monospace;font-size:26px;
  line-height:1;letter-spacing:-.02em;color:var(--acc);opacity:.5;margin-bottom:16px}
.step strong{display:block;font-size:15.5px;font-weight:700;line-height:1.5;
  letter-spacing:-.01em;color:var(--ink);margin-bottom:8px}
.step span{font-size:12.5px;line-height:1.8;color:var(--ink-mid)}

/* ── Prose inside sections (this page has more paragraphs than the catalogue) ── */
.prose{max-width:36em}
.prose p{margin:0 0 1.4em;font-size:clamp(14.5px,1.45vw,16px);line-height:2;color:var(--ink-mid)}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--ink)}

/* ── Task catalogue (02) and term cards (01) — lists inside cards ──── */
.card .list{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.card .list li{position:relative;padding-left:18px;font-size:13.5px;line-height:1.8;color:var(--ink-mid)}
.card .list li::before{content:"";position:absolute;left:0;top:.7em;width:7px;height:1px;background:var(--acc)}
/* 実行まで／案まで — chips, not faint text: this section sits on the brightest
   band of the aurora and faint mono at 10.5px vanished into it. */
.card .list li i{display:inline-block;font-style:normal;font-family:'IBM Plex Mono',monospace;font-size:10.5px;
  letter-spacing:.08em;line-height:1;color:var(--ink-dim);margin-left:8px;padding:3px 7px;
  border:1px solid var(--line);border-radius:6px;background:rgba(6,9,15,.35);vertical-align:1px}
.card .list li i.run{color:var(--acc);border-color:var(--acc-line)}
/* Six task cards read as two rows of three, not four-and-two. */
.tasks-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:980px){.tasks-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.tasks-grid{grid-template-columns:minmax(0,1fr)}}
.card .kind{display:block;margin:0 0 6px;font-family:'IBM Plex Mono',monospace;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--acc)}
.legend{margin:18px 0 0;font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.06em;
  line-height:2.2;color:var(--ink-dim)}
.legend b{display:inline-block;font-weight:400;color:var(--ink);padding:2px 8px;border:1px solid var(--line);
  border-radius:6px;background:rgba(6,9,15,.35);margin-right:6px}
.legend b.run{color:var(--acc);border-color:var(--acc-line)}
.term{display:flex;flex-direction:column}
.term h3 small{display:block;margin-top:4px;font-size:12px;font-weight:400;letter-spacing:.04em;color:var(--ink-dim)}
.term .eg{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:12.5px;line-height:1.85;color:var(--ink-dim)}
.term .eg b{font-weight:400;color:var(--acc);font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em}