/* /developers (scripts/v47/pages/developers.py): the quickstart, the request record and
   the endpoint / SDK / CLI trio, in the handoff's language — Georgia heads, DM Sans body,
   IBM Plex Mono for code and labels, code as quiet white panels on a hairline border. */

/* ---------------------------------------------------------------------- the hero */
/* The ripple is the hero's own ground (as on the home, integrations and pricing pages):
   the stage is prepended into the section and absolutely positioned by the global
   [data-canopy] rules; the copy sits above it and the shader clears the left half. */
#af-mock .story-hero[data-canopy]{
  position:relative;overflow:hidden;background:transparent;
  padding-block:100px 96px;min-height:min(78vh,720px);align-content:center;
}
#af-mock .story-hero[data-canopy]>:not(.halftone-canopy){position:relative;z-index:1}
#af-mock .story-hero[data-canopy]>.halftone-canopy{z-index:0}
#af-mock .story-hero[data-canopy] .story-hero-copy>p{max-width:46ch}
@media(max-width:860px){
  #af-mock .story-hero[data-canopy]{min-height:0;padding-block:70px 64px}
}

/* ------------------------------------------------------------------ shared pieces */
#af-mock .dev-code{border:1px solid #e2e5e9;border-radius:8px;background:#fff;overflow:hidden}
#af-mock .dev-code .dev-code-label{
  display:block;padding:8px 14px;border-bottom:1px solid #eef0f2;background:#fcfcfb;
  font:10px 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#98a08f;
}
#af-mock .dev-code pre{margin:0;padding:14px;overflow-x:auto;background:none}
#af-mock .dev-code code{font:12px/1.75 'IBM Plex Mono',monospace;color:#3d4450;white-space:pre}
#af-mock .dev-code-terminal code:before{content:'$ ';color:#a8b193}

/* ------------------------------------------------------------------- 3-step start */
#af-mock .dev-quickstart{padding-top:70px;padding-bottom:70px;border-bottom:1px solid var(--line)}
#af-mock .dev-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 42px}
#af-mock .dev-step{border-top:1px solid #dbe0d1;padding:26px 0 0;min-width:0}
#af-mock .dev-step-head{display:flex;align-items:baseline;gap:12px}
#af-mock .dev-step-index{font:11px 'IBM Plex Mono',monospace;color:#97a87c}
#af-mock .dev-step h3{font:23px/1.25 Georgia,serif;letter-spacing:-.5px;margin:0}
#af-mock .dev-step-note{font-size:14px;line-height:1.75;color:#717b67;margin:14px 0 0;max-width:42ch}
#af-mock .dev-step-points{list-style:none;margin:16px 0 18px;padding:0;display:grid;gap:7px}
#af-mock .dev-step-points li{
  position:relative;padding-left:16px;font-size:13px;line-height:1.6;color:#5a6072;
}
#af-mock .dev-step-points li:before{
  content:'';position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:#c3d9a0;
}
#af-mock .dev-step-points li code{font:11.5px 'IBM Plex Mono',monospace;color:#3d4450}
#af-mock .dev-step .dev-code{margin-top:auto}
#af-mock .dev-step{display:flex;flex-direction:column}

#af-mock .dev-quickstart-foot{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 30px;margin-top:34px;
  padding-top:20px;border-top:1px solid var(--line);
}
#af-mock .dev-quickstart-foot .eyebrow{font-size:10px;color:#98a08f;margin:0}
#af-mock .dev-quickstart-links{display:flex;flex-wrap:wrap;gap:12px 26px;margin-left:auto}
#af-mock .dev-quickstart-links .text-link{font-size:12.5px}

/* ------------------------------------------ the request record (context section art) */
#af-mock .story-context-section .story-context{
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:6vw;align-items:center;
}
#af-mock .story-context-section .story-context>p{max-width:16ch}
#af-mock .dev-ledger{margin:0;border:1px solid #e2e5e9;border-radius:10px;background:#fff;overflow:hidden}
#af-mock .dev-ledger figcaption{
  display:flex;justify-content:space-between;gap:16px;padding:11px 16px;
  border-bottom:1px solid #eef0f2;background:#fcfcfb;
  font:9.5px 'IBM Plex Mono',monospace;letter-spacing:.14em;color:#98a08f;
}
#af-mock .dev-ledger-row{
  display:grid;grid-template-columns:86px minmax(0,1fr) auto;align-items:center;
  gap:16px;padding:15px 16px;border-top:1px solid #f1f3f0;
}
#af-mock .dev-ledger-row:first-of-type{border-top:0}
#af-mock .dev-ledger-tag{font:9.5px 'IBM Plex Mono',monospace;letter-spacing:.13em;color:#8a927c}
#af-mock .dev-ledger-body{min-width:0}
#af-mock .dev-ledger-body code{
  display:block;font:12px 'IBM Plex Mono',monospace;color:#0a0a0a;overflow-wrap:anywhere;
}
#af-mock .dev-ledger-body p{margin:5px 0 0;font-size:12.5px;line-height:1.55;color:#6c7385}
#af-mock .dev-ledger-body b{font-weight:500;color:#41493a}
#af-mock .dev-ledger-tool{
  display:grid;place-items:center;width:32px;height:32px;border:1px solid #e2e5e9;
  border-radius:8px;background:#fff;
}
#af-mock .dev-ledger-tool img{display:block;width:18px;height:18px;object-fit:contain}
#af-mock .dev-ledger-gate{background:linear-gradient(90deg,#f2f6e9,#faf6e3 60%,#fbf0e6)}
#af-mock .dev-ledger-verdict{
  padding:7px 12px;border:1px solid #00000022;border-radius:30px;background:#fff;
  font:9.5px 'IBM Plex Mono',monospace;letter-spacing:.14em;color:#4c5a36;white-space:nowrap;
}

/* --------------------------------------------- what you stop building (03 / changes) */
#af-mock .dev-handled{margin-top:46px;padding-top:24px;border-top:1px solid var(--line)}
#af-mock .dev-handled>.eyebrow{font-size:10px;color:#98a08f;margin-bottom:18px}
#af-mock .dev-handled ul{
  list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;
}
#af-mock .dev-handled li{
  display:flex;align-items:flex-start;gap:10px;padding:14px;border:1px solid #e2e5e9;
  border-radius:10px;background:#fff;
}
#af-mock .dev-handled-mark{
  display:grid;place-items:center;flex:0 0 auto;width:20px;height:20px;border-radius:50%;
  border:1px solid #c3d9a0;background:#f2f7ec;font-size:10px;color:#4c7a2b;
}
#af-mock .dev-handled li b{display:block;font:500 13.5px 'DM Sans',sans-serif;color:#0a0a0a}
#af-mock .dev-handled li>span:last-child{min-width:0}
#af-mock .dev-handled li>span:last-child{font-size:12.5px;line-height:1.5;color:#6c7385}

/* ------------------------------------------- the interfaces: endpoint / SDK / CLI */
/* The handoff's code window is a dark IDE panel; on this page every code block is a
   quiet white panel with the same hairline as the cards around it. */
#af-mock .dev-interfaces .code-window{background:#fff;color:#3d4450;border:1px solid #e2e5e9;border-radius:10px}
#af-mock .dev-interfaces .code-window .demo-top{
  border-bottom:1px solid #eef0f2;background:#fcfcfb;padding:11px 18px;
  font:10px 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#98a08f;
}
#af-mock .dev-interfaces .code-window button{
  border:1px solid #e2e5e9;background:#fff;color:#5a6072;border-radius:30px;padding:5px 12px;
  font:10px 'IBM Plex Mono',monospace;letter-spacing:.1em;cursor:pointer;
}
#af-mock .dev-interfaces .code-window button:hover{border-color:#c3d9a0;background:#fbfcf7}
#af-mock .dev-interfaces .code-window pre{padding:20px 18px}
#af-mock .dev-interfaces .code-window code{font:12px/1.8 'IBM Plex Mono',monospace;color:#3d4450}
#af-mock .dev-interfaces .code-window>small{color:#98a08f;padding:0 18px 18px}

#af-mock .dev-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:34px}
#af-mock .dev-face{
  display:flex;flex-direction:column;min-width:0;padding:24px;border:1px solid #e2e5e9;
  border-radius:12px;background:#fff;
}
#af-mock .dev-face>.eyebrow{font-size:10px;color:#98a08f;margin-bottom:12px}
#af-mock .dev-face h3{font:22px/1.25 Georgia,serif;letter-spacing:-.5px;margin:0 0 12px}
#af-mock .dev-face>p{font-size:13.5px;line-height:1.7;color:#717b67;margin:0 0 18px;max-width:42ch}
#af-mock .dev-face .dev-code{margin-bottom:16px}
#af-mock .dev-face .dev-code pre{padding:12px 14px}
#af-mock .dev-face .dev-code code{white-space:pre-wrap;overflow-wrap:anywhere}
#af-mock .dev-face .text-link{margin-top:auto;align-self:flex-start;font-size:12.5px}
#af-mock .dev-face .dev-step-points{margin:0 0 18px}

#af-mock .dev-endpoints{border:1px solid #e2e5e9;border-radius:8px;overflow:hidden;margin-bottom:16px}
#af-mock .dev-endpoint{
  display:flex;align-items:baseline;gap:9px;padding:9px 12px;border-top:1px solid #f1f3f0;
}
#af-mock .dev-endpoint:first-child{border-top:0}
#af-mock .dev-verb{
  flex:0 0 auto;padding:2px 6px;border-radius:4px;background:#f0f7ec;
  font:9px 'IBM Plex Mono',monospace;letter-spacing:.06em;color:#4c7a2b;
}
#af-mock .dev-endpoint code{
  flex:1 1 auto;min-width:0;font:11px 'IBM Plex Mono',monospace;color:#0a0a0a;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#af-mock .dev-endpoint small{flex:0 0 auto;font-size:11px;color:#98a08f}
#af-mock .dev-endpoint-base{
  padding:8px 12px;border-top:1px solid #f1f3f0;background:#fcfcfb;
  font:9.5px 'IBM Plex Mono',monospace;letter-spacing:.06em;color:#a5abb6;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#af-mock .dev-logo-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
#af-mock .dev-logo-row span{
  display:grid;place-items:center;width:32px;height:32px;border:1px solid #e2e5e9;
  border-radius:8px;background:#fff;
}
#af-mock .dev-logo-row img{display:block;width:18px;height:18px;object-fit:contain}

/* --------------------------------------------------------------------- responsive */
@media(max-width:1100px){
  #af-mock .dev-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px}
  #af-mock .dev-trio{grid-template-columns:1fr 1fr}
  #af-mock .dev-handled ul{grid-template-columns:1fr 1fr}
}
@media(max-width:860px){
  #af-mock .story-context-section .story-context{grid-template-columns:1fr;gap:34px}
  #af-mock .story-context-section .story-context>p{max-width:none}
}
@media(max-width:700px){
  #af-mock .dev-steps,#af-mock .dev-trio,#af-mock .dev-handled ul{grid-template-columns:1fr}
  #af-mock .dev-quickstart-links{margin-left:0}
  #af-mock .dev-ledger-row{grid-template-columns:minmax(0,1fr) auto;row-gap:8px}
  #af-mock .dev-ledger-tag{grid-column:1/-1}
}

/* 02 / IN PRACTICE — one token, one customer's room.
   The token you mint across the top; below it your customers' data as separate rooms
   with real walls between them, and what the same agent can do in each. */
#af-mock .tenants{border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden}
#af-mock .tn-head{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:18px 26px;border-bottom:1px solid var(--line);
  font:11px 'IBM Plex Mono',monospace;color:#8a927c;
}
#af-mock .tn-head .eyebrow{margin:0;font-size:11px;letter-spacing:.14em;color:#5f6a4b}
#af-mock .tn-token{
  display:grid;gap:9px;margin:26px 26px 0;padding:20px 22px;
  border:1px solid #cbd8b5;border-radius:11px;background:linear-gradient(140deg,#f4f7ec,#fbf7e8);
}
#af-mock .tn-token .eyebrow{margin:0;font-size:9.5px;letter-spacing:.16em;color:#6b7458}
#af-mock .tn-token code{
  justify-self:start;padding:8px 13px;border:1px solid #cbd8b5;border-radius:6px;background:#fff;
  font:13px 'IBM Plex Mono',monospace;color:#1d211c;
}
#af-mock .tn-token p{margin:0;font:13px/1.6 'DM Sans',sans-serif;color:#4c5346;max-width:88ch}
#af-mock .tn-rooms{
  display:grid;grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr) 40px minmax(0,1fr);
  align-items:stretch;padding:24px 26px 26px;
}
#af-mock .tn-room{
  display:grid;gap:14px;align-content:start;min-width:0;
  padding:20px;border:1px solid var(--line);border-radius:10px;background:#fff;
}
#af-mock .tn-room.is-open{border-color:#a9c37f;background:#fafcf5;box-shadow:0 10px 30px #8fae5c14}
#af-mock .tn-room.is-shut{background:#fbfbf9}
#af-mock .tn-room header{display:grid;gap:3px;padding-bottom:13px;border-bottom:1px solid var(--line)}
#af-mock .tn-room small{font:9px 'IBM Plex Mono',monospace;letter-spacing:.16em;color:#9aa08f}
#af-mock .tn-room header b{font:500 16px 'IBM Plex Mono',monospace;color:#0a0a0a}
#af-mock .tn-room header em{font:11.5px 'IBM Plex Mono',monospace;font-style:normal;color:#8a927c}
#af-mock .tn-tools{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
#af-mock .tn-tools li{
  display:flex;align-items:center;gap:7px;padding:5px 10px;border:1px solid var(--line);
  border-radius:30px;background:#fff;font:11px 'DM Sans',sans-serif;color:#4c5346;
}
#af-mock .tn-tools img{flex:none;display:block;width:18px;height:18px;object-fit:contain}
#af-mock .tn-room.is-shut .tn-tools li{opacity:.5}
#af-mock .tn-room.is-shut .tn-tools img{filter:grayscale(1)}
#af-mock .tn-acts{list-style:none;margin:0;padding:0;display:grid;gap:12px}
#af-mock .tn-acts li{
  display:grid;gap:5px;padding:14px 16px;border:1px solid var(--line);border-radius:9px;background:#fff;
}
#af-mock .tn-acts li.is-allowed{border-left:3px solid #c3d9a0}
#af-mock .tn-acts li.is-held{border-left:3px solid #f0ce86}
#af-mock .tn-acts li.is-blocked{border-left:3px solid #f0b98c}
#af-mock .tn-acts li.is-none{border-style:dashed}
#af-mock .tn-acts b{font:500 15px/1.35 'DM Sans',sans-serif;color:#0a0a0a}
#af-mock .tn-acts code{font:11px 'IBM Plex Mono',monospace;color:#8a927c;background:none;padding:0}
#af-mock .tn-verdict{
  justify-self:start;margin-top:3px;padding:6px 11px;border-radius:30px;border:1px solid var(--line);
  font:10px 'IBM Plex Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:#4c5346;
}
#af-mock .tn-acts li.is-allowed .tn-verdict{background:#eef4e2;border-color:#cbd8b5}
#af-mock .tn-acts li.is-held .tn-verdict{background:#fbf3df;border-color:#ecd9ae}
#af-mock .tn-acts li.is-blocked .tn-verdict{background:#fbeade;border-color:#eec9ae}
#af-mock .tn-acts li.is-none .tn-verdict{color:#9aa0a8}
#af-mock .tn-acts p{margin:2px 0 0;font:13px/1.5 'DM Sans',sans-serif;color:#5c6358}
/* the wall between two customers */
#af-mock .tn-wall{
  position:relative;justify-self:center;width:100%;
  background:repeating-linear-gradient(135deg,#e2e5e9 0 2px,transparent 2px 7px);
  border-left:1px solid #d6dade;border-right:1px solid #d6dade;
}
#af-mock .tn-wall span{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-90deg);
  white-space:nowrap;padding:5px 9px;background:#fff;border:1px solid var(--line);border-radius:30px;
  font:8.5px 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#9aa0a8;
}
#af-mock .tn-note{
  margin:0;padding:14px 26px;border-top:1px solid var(--line);
  font:11px 'IBM Plex Mono',monospace;color:#8a927c;
}

@media(max-width:1100px){
  #af-mock .tn-rooms{grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr);row-gap:22px}
  #af-mock .tn-rooms > .tn-wall:nth-of-type(2){display:none}
  #af-mock .tn-rooms > .tn-room:nth-of-type(3){grid-column:1/-1}
}
@media(max-width:860px){
  #af-mock .tn-rooms{grid-template-columns:minmax(0,1fr);row-gap:0;padding:20px 18px}
  #af-mock .tn-rooms > .tn-wall:nth-of-type(2){display:block}
  #af-mock .tn-room{grid-column:1/-1}
  #af-mock .tn-wall{
    width:100%;height:34px;margin:14px 0;border-left:0;border-right:0;
    border-top:1px solid #d6dade;border-bottom:1px solid #d6dade;
  }
  #af-mock .tn-wall span{transform:translate(-50%,-50%)}
  #af-mock .tn-token{margin:20px 18px 0}
  #af-mock .tn-head,#af-mock .tn-note{padding-left:18px;padding-right:18px}
}