/* Agent Stories site styles. Palette: Iris and mint (picked 28 Oct 2026, from design-5a). */
:root {
  --on-primary: #FFFFFF;
  --surface: #FFFFFF;
  --bg: #FFFFFF;
  --ink: #15131F;
  --muted: #6B4A6B;
  --line: #E4E0F0;
  --primary: #6D28D9;
  --primary-text: #6D28D9;
  --link: #6D28D9;
  --tint: #EFE8FD;
  --tint-soft: #F8F6FE;
  --hero-bg: #F8F6FE;
  --shadow: rgba(21,19,31,.07);
  --pill-bg: #EFE8FD;
  --pill-ink: #4C1D95;
  --good-bg: #D1FAE5;
  --good-ink: #065F46;
  --badge-bg: #15131F;
  --badge-ink: #FFFFFF;
  --dark: #14111F;
  --dark-2: #1E1A2E;
  --dark-line: #3F1F45;
  --on-dark: #FFFFFF;
  --on-dark-muted: #C9C4DA;
  --on-dark-accent: #A7F3D0;
  --country-bg: #6D28D9;
  --country-ink: #FFFFFF;
  --country-bg-2: #D1FAE5;
  --country-ink-2: #065F46;
  --country-bg-3: #15131F;
  --country-ink-3: #FFFFFF;
  --btn-bg: #6D28D9;
  --btn-ink: #FFFFFF;
  --field-bg: #FFFFFF;
  --field-border: #8E7CC3;
  --focus: #6D28D9;
  --font-display: 'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif;
  --wordmark-weight: 800;
}

/* Base */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body); line-height:1.6; }
a { color:var(--link); text-decoration:underline; text-underline-offset:3px; }
a:focus-visible, button:focus-visible, select:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
[hidden] { display:none !important; }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.wordmark { font-family:var(--font-display); color:var(--ink); text-decoration:none; font-size:1.7rem; line-height:1; letter-spacing:var(--wordmark-track, 0); font-weight:var(--wordmark-weight, 600); }
.wordmark:hover { text-decoration:underline; }
.btn { display:inline-block; background:var(--btn-bg); color:var(--btn-ink); padding:12px 20px; border-radius:var(--radius-btn, 6px); font-weight:600; text-decoration:none; }
.btn:hover { text-decoration:underline; }
.badge { display:inline-block; font-size:.78rem; font-weight:600; border-radius:4px; padding:2px 8px; }
.muted { color:var(--muted); }
select { font:inherit; font-size:.95rem; color:var(--ink); background:var(--field-bg); border:1px solid var(--field-border); border-radius:6px; padding:6px 10px; max-width:100%; }
.site-footer { color:var(--muted); font-size:.9rem; }
.site-footer a { color:var(--link); }
.credit { font-weight:600; }

/* Directory layouts for 5a (home-style directory) and 5b (listing page with sidebar). Token-driven.
   Structure adapted from a job-directory pattern. No code, text, images or logo taken from the reference. */
.wrap { max-width:1200px; margin:0 auto; padding:0 24px; }
.site-header { background:var(--bg); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5; }
.header-row { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding:16px 24px; }
.site-nav ul { list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:24px; margin:0; padding:0; font-weight:500; font-size:.95rem; }
.site-nav a { color:var(--ink); text-decoration:none; } .site-nav a:hover { text-decoration:underline; }
/* SC brand orange from the brand guide. White text by Anfernee's choice (28 Oct 2026), 3.11:1, below the guide's small-text rule. */
.nav-sub { background:#F46530; color:#FFFFFF !important; padding:10px 18px; border-radius:10px; font-weight:600; }
.nav-sub:hover, .nav-sub:focus-visible { text-decoration:underline; }
.wordmark .dot { color:var(--primary-text); }
.eyebrow { display:inline-block; background:var(--tint); color:var(--primary-text); font-size:.8rem; font-weight:600; border-radius:999px; padding:6px 14px; margin:0 0 16px; }
h1, h2, h3 { font-family:var(--font-display); color:var(--ink); }
.hl { color:var(--primary-text); }
.section { padding:64px 0; }
.section-alt { background:var(--tint-soft); }
.section-head { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:28px; }
.section-head h2 { font-size:2.1rem; line-height:1.15; margin:0; }
.section-head p { margin:0; max-width:46ch; color:var(--muted); }
.btn-ghost { display:inline-block; border:1px solid var(--primary); color:var(--primary-text); padding:10px 18px; border-radius:10px; font-weight:600; text-decoration:none; background:transparent; }
.btn-ghost:hover { text-decoration:underline; }

/* hero */
.hero { padding:56px 0 64px; background:var(--hero-bg); }
.hero-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center; }
.hero h1 { font-size:3.4rem; line-height:1.08; margin:0 0 16px; letter-spacing:-.02em; }
.hero .lede { font-size:1.12rem; color:var(--muted); max-width:52ch; margin:0 0 26px; }
.searchbar { display:flex; flex-wrap:wrap; gap:8px; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:8px; box-shadow:0 10px 30px var(--shadow); }
.searchbar label { flex:1 1 180px; display:flex; flex-direction:column; padding:2px 10px; font-size:.75rem; font-weight:600; color:var(--muted); }
.searchbar input, .searchbar select { border:0; background:transparent; font:inherit; font-size:1rem; color:var(--ink); padding:4px 0; outline-offset:4px; }
.searchbar input::placeholder { color:var(--muted); opacity:1; }
.searchbar .btn { align-self:stretch; display:flex; align-items:center; border-radius:10px; }
.stat-chips { display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }
.stat-chip { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:12px 16px; min-width:130px; }
.stat-chip strong { display:block; font-family:var(--font-display); font-size:1.7rem; line-height:1.1; color:var(--primary-text); }
.stat-chip span { font-size:.85rem; color:var(--muted); }
.preview { position:relative; padding:24px 0; }
.preview-card { background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:24px; box-shadow:0 20px 50px var(--shadow); }
.preview-card .claim-box { margin-top:12px; }
.float-chip { position:absolute; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:10px 14px; font-size:.85rem; font-weight:600; box-shadow:0 10px 24px var(--shadow); color:var(--ink); }
.float-chip.one { top:-6px; right:-10px; } .float-chip.two { bottom:-4px; left:-14px; }
.float-chip .tick { display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--good-bg); border:2px solid var(--good-ink); margin-right:8px; vertical-align:middle; }

/* category tiles */
.cat-tiles { display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; }
.cat-tile { font:inherit; text-align:left; cursor:pointer; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:22px; color:var(--ink); display:flex; flex-direction:column; gap:8px; }
.cat-tile:hover { border-color:var(--primary); }
.cat-tile[aria-pressed="true"] { background:var(--primary); border-color:var(--primary); color:var(--on-primary); }
.cat-tile[aria-pressed="true"] .tile-count, .cat-tile[aria-pressed="true"] .tile-icon { color:var(--on-primary); background:transparent; border-color:var(--on-primary); }
.tile-icon { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:var(--tint); color:var(--primary-text); font-weight:700; font-family:var(--font-display); border:1px solid transparent; }
.tile-name { font-family:var(--font-display); font-weight:600; font-size:1.1rem; }
.tile-count { font-size:.88rem; color:var(--muted); }

/* listing cards and rows */
.filter-strip { display:flex; flex-wrap:wrap; gap:10px 16px; align-items:flex-end; margin-bottom:18px; }
.filter-strip .sel { display:flex; flex-direction:column; gap:4px; font-size:.8rem; font-weight:600; color:var(--muted); }
.count { font-size:.9rem; color:var(--muted); margin:0 0 14px; }
.cards { display:grid; grid-template-columns:repeat(2, 1fr); gap:20px; }
.listing { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:22px; display:flex; flex-direction:column; gap:10px; color:var(--ink); }
.listing:hover { border-color:var(--primary); box-shadow:0 12px 30px var(--shadow); }
.listing-top { display:flex; gap:14px; align-items:flex-start; }
.avatar { flex:0 0 auto; width:48px; height:48px; border-radius:50%; display:grid; place-items:center; background:var(--tint); color:var(--primary-text); font-weight:700; font-family:var(--font-display); }
.pills { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px; }
.pill { font-size:.75rem; font-weight:600; border-radius:999px; padding:3px 10px; background:var(--pill-bg); color:var(--pill-ink); }
.pill-good { background:var(--good-bg); color:var(--good-ink); }
.listing h3 { font-size:1.12rem; line-height:1.35; margin:0; }
.listing h3 a { color:var(--ink); text-decoration:none; } .listing h3 a:hover { text-decoration:underline; }
.meta { margin:2px 0 0; font-size:.88rem; color:var(--muted); }
.did { margin:0; font-size:.95rem; }
.claim-box { background:var(--tint-soft); border:1px solid var(--line); border-radius:12px; padding:12px 14px; }
.claim-box .lbl { margin:0 0 2px; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--primary-text); }
.claim-box p { margin:0; }
.actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:auto; padding-top:6px; }
.proof { background:var(--primary); color:var(--on-primary); padding:9px 16px; border-radius:10px; font-weight:600; text-decoration:none; font-size:.9rem; }
.proof:hover { text-decoration:underline; }
.story-link { font-weight:600; font-size:.9rem; }

/* stats band */
.stats-band { background:var(--dark); color:var(--on-dark); padding:48px 0; }
.stats-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; text-align:center; }
.stats-grid strong { display:block; font-family:var(--font-display); font-size:2.4rem; color:var(--on-dark-accent); }
.stats-grid span { color:var(--on-dark-muted); font-size:.92rem; }
.stats-note { text-align:center; color:var(--on-dark-muted); font-size:.82rem; margin:18px 0 0; }

/* country tiles */
.country-tiles { display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
.country-tile { font:inherit; cursor:pointer; text-align:left; border:0; border-radius:18px; padding:26px; min-height:130px; display:flex; flex-direction:column; justify-content:flex-end; background:var(--country-bg); color:var(--country-ink); }
.country-tile:nth-child(2) { background:var(--country-bg-2); color:var(--country-ink-2); }
.country-tile:nth-child(3) { background:var(--country-bg-3); color:var(--country-ink-3); }
.country-tile strong { font-family:var(--font-display); font-size:1.4rem; }
.country-tile span { font-size:.9rem; }
.country-tile[aria-pressed="true"] { outline:3px solid var(--primary); outline-offset:3px; }

/* footer */
.site-footer.dir-footer { background:var(--dark); color:var(--on-dark-muted); padding:48px 0 28px; margin-top:0; }
.dir-footer .cols { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px; }
.dir-footer h2 { font-size:1.05rem; color:var(--on-dark); margin:0 0 12px; }
.dir-footer a { color:var(--on-dark); }
.dir-footer ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.dir-footer p { margin:0 0 12px; }
.sub-box { background:var(--dark-2); border:1px solid var(--dark-line); border-radius:16px; padding:20px; }
.sub-box .btn { background:var(--on-dark-accent); color:var(--dark); }
.legal { border-top:1px solid var(--dark-line); margin-top:32px; padding-top:18px; font-size:.85rem; display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; }

/* 5b: page band + rows + sidebar */
.page-band { background:var(--hero-bg); padding:48px 0; text-align:center; border-bottom:1px solid var(--line); }
.page-band h1 { font-size:2.6rem; margin:0 0 8px; }
.page-band p { margin:0 auto; color:var(--muted); max-width:58ch; }
.crumbs { margin:12px 0 0; font-size:.88rem; color:var(--muted); }
.crumbs a { color:var(--primary-text); }
.list-layout { display:grid; grid-template-columns:1fr 330px; gap:32px; align-items:start; padding:44px 24px 64px; }
.list-top { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:16px; }
.list-top .count { margin:0; }
.list-top label { font-size:.85rem; color:var(--muted); display:flex; gap:8px; align-items:center; }
.rows { display:flex; flex-direction:column; gap:16px; }
.row { display:grid; grid-template-columns:auto 1fr 260px; gap:18px; align-items:start; }
.row .claim-box { align-self:stretch; display:flex; flex-direction:column; gap:10px; justify-content:space-between; }
.side { display:flex; flex-direction:column; gap:18px; position:sticky; top:84px; }
.side-card { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:20px; }
.side-card h2 { font-size:1.05rem; margin:0 0 12px; }
.side-card input[type=search] { width:100%; font:inherit; font-size:.95rem; color:var(--ink); background:var(--bg); border:1px solid var(--field-border); border-radius:10px; padding:10px 12px; }
.side-card input::placeholder { color:var(--muted); opacity:1; }
.side-card select { width:100%; }
.cat-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.cat-row { width:100%; font:inherit; font-size:.92rem; cursor:pointer; display:flex; justify-content:space-between; background:var(--tint-soft); color:var(--ink); border:1px solid transparent; border-radius:10px; padding:9px 12px; }
.cat-row[aria-pressed="true"] { background:var(--primary); color:var(--on-primary); }
.side-cta { text-align:center; background:var(--tint); }
.side-cta p { margin:0 0 14px; color:var(--ink); }
.side-cta .btn { width:100%; }
.side .sel { display:flex; flex-direction:column; gap:6px; font-size:.85rem; font-weight:600; color:var(--muted); margin-bottom:10px; }

@media (max-width:900px) {
  .hero-grid, .list-layout { grid-template-columns:1fr; }
  .cat-tiles { grid-template-columns:repeat(2, 1fr); }
  .cards, .country-tiles { grid-template-columns:1fr; }
  .stats-grid { grid-template-columns:repeat(2, 1fr); }
  .dir-footer .cols { grid-template-columns:1fr; }
  .row { grid-template-columns:auto 1fr; }
  .row .claim-box { grid-column:1 / -1; }
  .side { position:static; }
}
@media (max-width:600px) {
  .hero h1 { font-size:2.3rem; }
  .page-band h1 { font-size:2rem; }
  .section-head h2 { font-size:1.6rem; }
  .site-nav ul { gap:8px 16px; }
  .float-chip.one { right:0; } .float-chip.two { left:0; }
  .cat-tiles { grid-template-columns:1fr 1fr; gap:12px; }
  .cat-tile { padding:16px; }
}

/* Story pages */
.story-band { text-align:left; }
.story-band .pills { margin-bottom:12px; }
.story-band h1 { font-size:2.5rem; line-height:1.15; max-width:26ch; margin:0 0 10px; }
.story-band p { margin-left:0; margin-right:0; max-width:none; }
.story-band .meta { font-size:1rem; }
.story-band .crumbs { margin:0 0 16px; }
.story-layout { display:grid; grid-template-columns:1fr 330px; gap:32px; align-items:start; padding:44px 24px 56px; }
.story-body h2 { font-size:1.3rem; margin:0 0 10px; }
.story-body section + section { margin-top:28px; }
.story-body p { margin:0 0 12px; font-size:1.05rem; max-width:66ch; }
.story-body .claim-box p { font-size:1.1rem; }
.facts-list { margin:0; display:grid; grid-template-columns:auto 1fr; gap:8px 14px; font-size:.92rem; }
.facts-list dt { color:var(--muted); font-weight:600; }
.facts-list dd { margin:0; }
.disclaimer { color:var(--muted); font-size:.92rem; }
.back-link { font-weight:600; }
@media (max-width:900px) { .story-layout { grid-template-columns:1fr; } }
@media (max-width:600px) { .story-band h1 { font-size:1.8rem; } }

/* Try it yourself (optional try_it block). Iris and mint only. */
.pill-try { background:var(--tint); color:var(--pill-ink); }
.pill-level { background:var(--good-bg); color:var(--good-ink); }
.story-body .try-it { background:var(--tint-soft); border:1px solid var(--line); border-radius:16px; padding:20px; }
.try-it h3 { font-size:1.02rem; margin:18px 0 8px; }
.try-it .pills { margin:4px 0 6px; }
.try-prompt-head { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:18px; }
.try-prompt-head h3 { margin:0; }
.copy-btn { font:inherit; font-size:.9rem; font-weight:600; cursor:pointer; background:var(--btn-bg); color:var(--btn-ink); border:0; border-radius:var(--radius-btn, 6px); padding:8px 14px; min-height:40px; }
.copy-btn:hover { text-decoration:underline; }
.copy-btn:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
.try-it pre { margin:10px 0 4px; background:var(--dark); color:var(--on-dark); border-radius:12px; padding:14px 16px; white-space:pre-wrap; overflow-wrap:anywhere; max-width:100%; }
.try-it pre code { font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:.9rem; line-height:1.55; }
.story-body .copy-status { min-height:1.2em; margin:0; font-size:.88rem; color:var(--good-ink); }
.try-tools, .try-steps { margin:0 0 12px; padding-left:1.3em; max-width:66ch; }
.try-tools li, .try-steps li { margin:0 0 6px; font-size:1.02rem; }
.try-note { color:var(--muted); }
.story-body .try-watch { background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--primary); border-radius:10px; padding:10px 14px; font-size:.98rem; }
.story-body .try-credit { color:var(--muted); font-size:.92rem; margin:12px 0 0; }
.try-it a { color:var(--link); }
.story-body .try-prompt-by { margin:4px 0 0; font-size:.88rem; color:var(--muted); }