/* ═══════════════════════════════════════════════════════════════════════
   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)}
/* Line under the hero CTA (same rule as studio.css): sending the form is the
   first step of the work. --ink-mid, because it sits on the aurora band. */
.cta-note{margin:14px 0 0;max-width:44em;font-size:13px;line-height:1.8;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;
}
/* --ink-mid, not faint/dim: these cards sit on the aurora's bright band, where
   anything dimmer vanishes (a gotcha already hit once, on the 初回相談 card). */
.plan .meta{margin:0 0 18px;font-family:'IBM Plex Mono',monospace;font-size:11.5px;
  letter-spacing:.08em;color:var(--ink-mid)}
.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-mid)}
.plan--lead{border-color:var(--acc-line)}
.plan--lead li{color:var(--ink)}
.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}
/* ── Staircase pricing (2026-09-09) ────────────────────────────────
   One decision: apply for the consultation. Each audience is one flight of
   stairs; every tread is a plan card, dearer than the one before; the amount
   actually added at that step is written under the list price. The empty
   space above a tread (--rise) shrinks left to right, which draws the flight.
   Below 860px the flight stacks and the numbers 01/02/03 carry the order. */
.stairs{margin:clamp(26px,3vw,40px) 0 0}
.stairs + .stairs{margin-top:clamp(36px,4.2vw,58px)}
.stair-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin:0 0 16px}
.stair-head h3{margin:0;font-family:'Schibsted Grotesk','Zen Kaku Gothic New',sans-serif;
  font-weight:700;font-size:clamp(19px,2.2vw,25px);letter-spacing:-.018em;color:var(--ink)}
.stair-head p{margin:0;font-size:13.5px;line-height:1.8;color:var(--ink-mid)}
.stair{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:0 12px;align-items:stretch}
/* Named stair-* so they never meet .steps/.step, the process boxes in 07. */
.stair-step{display:flex;flex-direction:column;min-width:0;margin:0;padding:0}
.stair-rise{flex:0 0 var(--rise)}
.stair-step .tread{flex:1;display:flex;flex-direction:column}
.stair-step .tread h3 i{font-style:normal;font-family:'IBM Plex Mono',monospace;font-size:12px;
  letter-spacing:.14em;color:var(--acc);margin-right:10px;vertical-align:.14em}
.stair-step .price{font-size:clamp(22px,2.1vw,28px);white-space:nowrap}
.plan .price small{font-size:.44em;font-weight:700;letter-spacing:0;margin-left:2px}
/* The amount added at this step — the line that keeps the flight honest.
   The <b> is reset hard: an ancestor rule turns bold text into a big gradient
   figure, which is not what a sentence wants. */
.plan .add{margin:0 0 8px;font-size:14px;line-height:1.7;color:var(--ink)}
.plan .add b{display:inline;font-family:'Schibsted Grotesk',sans-serif;font-weight:800;font-size:inherit;
  letter-spacing:-.01em;color:var(--ink);background:none;-webkit-text-fill-color:var(--ink)}
.stair-cta{margin-top:auto;align-self:flex-start;position:relative;top:18px}
.stair-step .tread:has(.stair-cta){padding-bottom:calc(clamp(26px,2.7vw,36px) + 18px)}
@media (max-width:860px){
  .stair{grid-template-columns:1fr;gap:14px}
  .stair-rise{display:none}
}
/* Consultation kind on the form: a two-way radio styled as two small cards.
   The global input rule (width:100%, padding) must be undone for the radio. */
.fields .kind{margin:0;padding:0;border:0;min-width:0;display:block;height:auto}
.kind legend{padding:0}
.kind .opts{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.fields .kind .opt{display:flex;height:auto;align-items:center;gap:12px;cursor:pointer;
  border:1px solid rgba(255,255,255,.16);border-radius:10px;padding:12px 15px;
  background:rgba(255,255,255,.06);transition:border-color .18s,background-color .18s}
.kind .opt:has(:checked){border-color:var(--acc);background:rgba(46,123,255,.12)}
.kind input[type="radio"]{width:18px;height:18px;margin:0;padding:0;border:0;background:none;
  flex:none;accent-color:var(--acc);cursor:pointer}
.kind .opt b{display:block;font-size:14.5px;line-height:1.4;color:var(--ink);font-weight:700}
.kind .opt small{display:block;margin-top:2px;font-family:'IBM Plex Mono',monospace;font-size:11px;
  letter-spacing:.06em;color:var(--ink-mid)}
/* The market rate, one line directly above the prices (anchoring, 2026-09-08). */
.anchor{margin:0 0 4px;max-width:44em;font-size:13.5px;line-height:1.85;color:var(--ink-mid)}
.anchor b{color:var(--ink);font-weight:700}
/* The promise under the flights (loss aversion: the risk is ours). */
.assure{margin:clamp(18px,2vw,26px) 0 0;padding:13px 18px;max-width:44em;
  border-left:3px solid var(--acc);border-radius:0 12px 12px 0;
  background:rgba(255,255,255,.03);font-size:14px;line-height:1.8;color:var(--ink)}
.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);margin-bottom:16px}  /* 2026-09-19: was opacity:.5 (≈2:1); full-strength accent clears 3:1 for 26px */
.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}