/* ============================================================================
   Applied Identities — ESTATE DESIGN SYSTEM (web-unify-2026-07, Stage 2a)
   One stylesheet for all four properties: www · research. · vi. · agents.
   Tokens: AWS Platform visual guideline "Technical Blue" (July 2026) — R2.
   Rules: subdomain-blindness (R1) — one chrome, content-type templates,
   semantic accents (blue=action, mint=verified, yellow=money-only).
   Fonts: self-hosted woff2 in ../fonts/ — Figtree (UI), IBM Plex Mono
   (technical strings ONLY), Newsreader (editorial surfaces ONLY, R3/D5).
   VENDORED PER ORIGIN AT DEPLOY. NEVER HOTLINKED CROSS-ORIGIN.
   No JavaScript is required by anything in this sheet.
   Source of record: ops-docs/web-unify-2026-07/design-system/
   ========================================================================== */

/* ---------- fonts (paths relative to css/, vendor fonts/ beside it) ------- */
@font-face{
  font-family:"Figtree";
  src:url("../fonts/figtree.woff2") format("woff2");
  font-weight:300 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Figtree";
  src:url("../fonts/figtree-italic.woff2") format("woff2");
  font-weight:300 900; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("../fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("../fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Newsreader";
  src:url("../fonts/newsreader.woff2") format("woff2");
  font-weight:200 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Newsreader";
  src:url("../fonts/newsreader-italic.woff2") format("woff2");
  font-weight:200 800; font-style:italic; font-display:swap;
}

/* ---------- tokens (guideline §4.3 — do not add new colors) --------------- */
:root{
  /* surfaces */
  --canvas:#0D0F11;          /* main page background */
  --surface:#191C21;         /* cards, panels, table containers */
  --elevated:#262C36;        /* inputs, hover states, selected rows, strokes */
  /* text */
  --text:#FFFFFF;            /* headings, important labels */
  --text-2:#878C96;          /* descriptions, helper text, metadata */
  --text-3:#697180;          /* low-priority text, captions */
  /* palette */
  --blue:#2F40FF;            /* Technical Blue — primary action, active states */
  --mint:#29F894;            /* success / verified */
  --yellow:#F8D229;          /* waiting / pending */
  --orange:#F65930;          /* error / destructive / urgent */
  --sky:#2FB6FF;             /* info / tags */
  /* semantic accents (R1 — the only sanctioned meanings) */
  --action:var(--blue);      /* buttons, active nav, selected states */
  --verified:var(--mint);    /* verified / live / success claims */
  --money:var(--yellow);     /* prices, paid tags, x402. ONLY money is yellow-as-accent. */
  --error:var(--orange);
  --info:var(--sky);
  /* strokes */
  --line:var(--elevated);
  /* type */
  --sans:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --serif:"Newsreader","Iowan Old Style",Georgia,serif; /* editorial ONLY (R3) */
  /* layout */
  --wrap:1080px;             /* marketing/content container */
  --measure:70ch;            /* article measure */
}

/* ---------- base ----------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
html{background:var(--canvas); scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }
body{
  margin:0; background:var(--canvas); color:var(--text);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{margin:0; line-height:1.15; text-wrap:balance; font-weight:700;}
p{margin:0 0 16px;} p:last-child{margin-bottom:0;}
img,svg{max-width:100%; height:auto;}
::selection{background:var(--blue); color:#fff;}

/* Link discipline: Technical Blue fails contrast as text on the canvas, and
   "do not add new colors" bars a lighter link tint. So: running-text links are
   text-colored with a blue underline (blue thickens on hover); standalone
   actions are buttons; nav links are labeled below. Blue never sets body text. */
a{color:inherit; text-decoration:underline; text-decoration-color:var(--blue);
  text-decoration-thickness:1.5px; text-underline-offset:3px;}
a:hover{text-decoration-thickness:2.5px;}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px;}
.mono{font-family:var(--mono); font-weight:400; font-size:.9em; letter-spacing:0;}
.muted{color:var(--text-2);}
.eyebrow{
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-2); margin-bottom:14px;
}
.overflow-x{overflow-x:auto;}

/* ---------- buttons (guideline §6 anatomy) --------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:10px; height:40px;
  padding:10px 16px; border-radius:8px; border:1px solid transparent;
  font-family:var(--sans); font-size:14px; font-weight:600; line-height:20px;
  text-decoration:none; cursor:pointer; white-space:nowrap;
}
.btn-primary{background:var(--action); color:#fff;}
.btn-primary:hover{filter:brightness(1.15);}
.btn-secondary{background:transparent; color:var(--text); border-color:var(--elevated); font-weight:400;}
.btn-secondary:hover{border-color:var(--action);}
.btn-lg{height:48px; padding:12px 22px; font-size:15px;}

/* ---------- pills / badges (semantic only — guideline §4.2) ---------------- */
.pill{
  display:inline-flex; align-items:center; gap:6px; padding:3px 10px;
  border-radius:999px; font-family:var(--sans); font-size:12px; font-weight:600; line-height:16px;
  border:1px solid var(--elevated); color:var(--text-2); background:transparent;
}
.pill::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--text-3);}
.pill-verified{color:var(--verified); border-color:transparent; background:rgba(41,248,148,.10);}
.pill-verified::before{background:var(--verified);}
.pill-money{color:var(--money); border-color:transparent; background:rgba(248,210,41,.10);}
.pill-money::before{background:var(--money);}
.pill-info{color:var(--info); border-color:transparent; background:rgba(47,182,255,.10);}
.pill-info::before{background:var(--info);}
.pill-error{color:var(--error); border-color:transparent; background:rgba(246,89,48,.10);}
.pill-error::before{background:var(--error);}

/* ---------- shared header (every page, every property) --------------------- */
.estate-header{
  position:sticky; top:0; z-index:50; background:var(--canvas);
  border-bottom:1px solid var(--line);
}
.estate-header .bar{
  max-width:var(--wrap); margin:0 auto; padding:0 24px; min-height:64px;
  display:flex; align-items:center; gap:28px; flex-wrap:wrap;
}
.estate-mark{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:700; font-size:16px; color:var(--text); text-decoration:none;
}
.estate-mark::before{content:""; width:12px; height:12px; background:var(--blue); border-radius:3px;}
.estate-nav{display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-left:auto;}
.estate-nav a{
  font-size:14px; font-weight:500; color:var(--text-2); text-decoration:none;
  padding:6px 0; border-bottom:2px solid transparent;
}
.estate-nav a:hover{color:var(--text);}
.estate-nav a[aria-current="true"]{color:var(--text); border-bottom-color:var(--action);}
.estate-nav .btn{margin-left:6px;}
@media (max-width:960px){
  /* always-visible wrap: no JS, no hamburger. Mark + button on row one, links row below. */
  .estate-header .bar{position:relative; padding:12px 20px 0; gap:8px 14px;}
  .estate-nav{width:100%; margin-left:0; gap:6px 16px; padding-bottom:10px;}
  .estate-nav a{font-size:13px;}
  .estate-nav .btn{position:absolute; top:9px; right:20px; height:34px; padding:7px 13px; font-size:13px; margin-left:0;}
}

/* ---------- shared footer (the estate sitemap) ------------------------------ */
.estate-footer{border-top:1px solid var(--line); margin-top:96px; background:var(--surface);}
.estate-footer .inner{max-width:var(--wrap); margin:0 auto; padding:48px 24px 32px;}
.estate-footer .identity{margin-bottom:36px;}
.estate-footer .identity .estate-mark{font-size:17px;}
.estate-footer .identity p{
  margin:10px 0 0; color:var(--text-2); font-size:14px;
}
.footer-cols{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:28px; padding-bottom:36px; border-bottom:1px solid var(--line);
}
.footer-cols h4{font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--text-2); margin-bottom:12px;}
.footer-cols ul{list-style:none; margin:0; padding:0;}
.footer-cols li{margin:0 0 9px;}
.footer-cols a{font-size:14px; color:var(--text-2); text-decoration:none;}
.footer-cols a:hover{color:var(--text);}
.footer-util{
  display:flex; flex-wrap:wrap; gap:8px 22px; padding-top:22px;
  font-size:13px; color:var(--text-3);
}
.footer-util a{color:var(--text-3); text-decoration:none;}
.footer-util a:hover{color:var(--text-2);}

/* ---------- stacked scroll panels (www home, /transition/ pattern — R4) ---- */
.panel{
  min-height:88vh; display:flex; align-items:center;
  border-bottom:1px solid var(--line); padding:72px 0;
}
.panel-inner{max-width:840px; margin:0 auto; padding:0 24px; width:100%;}
.panel h1{font-size:clamp(34px,5.2vw,56px); font-weight:700; letter-spacing:-.015em;}
.panel h2{font-size:clamp(28px,4vw,44px); font-weight:700; letter-spacing:-.015em;}
.panel .lede{font-size:clamp(17px,1.6vw,20px); color:var(--text-2); margin-top:22px; max-width:62ch;}
.panel .cta-row{margin-top:34px; display:flex; gap:14px; flex-wrap:wrap; align-items:center;}
.panel-hero{min-height:92vh;}
.panel:last-of-type{border-bottom:0;}

/* ---------- proof strip (running in production today) ---------------------- */
.proof-strip{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:16px; margin-top:48px;
}
.proof-strip .stat{
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  padding:18px 20px;
}
.proof-strip .n{font-family:var(--mono); font-weight:500; font-size:22px;}
.proof-strip .l{font-size:13px; color:var(--text-2); margin-top:6px;}

/* ---------- CTA band --------------------------------------------------------- */
.cta-band{
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:44px 40px; display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap; margin:72px 0;
}
.cta-band h2{font-size:clamp(22px,2.6vw,30px);}

/* ---------- cards & marketing sections -------------------------------------- */
.card{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:26px;}
.card h3{font-size:19px; font-weight:600; margin-bottom:10px;}
.card p{font-size:15px; color:var(--text-2);}
.card-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; margin:32px 0;}
.section{padding:72px 0;}
.section-title{font-size:clamp(24px,3vw,34px); margin-bottom:12px;}
.section .lede{color:var(--text-2); max-width:62ch;}

/* ---------- tables (guideline §5.4/§7.5, content-estate weight) ------------- */
.table{width:100%; border-collapse:collapse; background:var(--surface);
  border:1px solid var(--line); border-radius:12px; overflow:hidden; font-size:14px;}
.table th{
  text-align:left; font-size:11px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-2); padding:14px 18px;
  border-bottom:1px solid var(--line);
}
.table td{padding:14px 18px; border-bottom:1px solid var(--line); vertical-align:top;}
.table tr:last-child td{border-bottom:0;}
.table td.mono, .table .mono{font-size:13px; color:var(--text-2);}

/* ---------- editorial surfaces (R3: serif here and ONLY here) ---------------- */
.masthead{padding:64px 0 28px; border-bottom:1px solid var(--line);}
.masthead .pub{font-family:var(--serif); font-weight:600; font-size:clamp(30px,4vw,44px); letter-spacing:-.01em;}
.masthead .dateline{font-family:var(--mono); font-size:13px; color:var(--text-2); margin-top:10px;}
.article{max-width:var(--measure); margin:0 auto; padding:48px 24px 96px;}
.article h1{font-family:var(--serif); font-weight:600; font-size:clamp(30px,4vw,42px); line-height:1.2;}
.article .standfirst{font-family:var(--serif); font-style:italic; font-size:20px; color:var(--text-2); margin:18px 0 0;}
.article .body{margin-top:36px; font-family:var(--serif); font-size:18px; line-height:1.75;}
.article .body p{margin:0 0 20px;}
.article .body h2{font-family:var(--sans); font-size:22px; font-weight:600; margin:40px 0 14px;}
.article .meta{font-family:var(--mono); font-size:13px; color:var(--text-3); margin-top:16px;}
.article .body .mono, .article code{font-family:var(--mono); font-size:.85em; background:var(--surface); padding:2px 6px; border-radius:5px;}

/* ---------- newsletter front page (research landing — R5) -------------------- */
.front{max-width:var(--wrap); margin:0 auto; padding:0 24px;}
.front-grid{display:grid; grid-template-columns:minmax(0,2fr) minmax(260px,1fr); gap:28px; margin:40px 0 72px;}
@media (max-width:860px){ .front-grid{grid-template-columns:1fr;} }
.lead-story{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:34px;}
.lead-story .kicker{font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--text-2);}
.lead-story h2{font-family:var(--serif); font-weight:600; font-size:clamp(26px,3.2vw,36px); margin:12px 0 14px;}
.lead-story p{color:var(--text-2);}
.rail{display:flex; flex-direction:column; gap:14px;}
.rail .item{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:18px 20px;}
.rail .item .k{font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--text-2);}
.rail .item h3{font-size:16px; font-weight:600; margin:8px 0 4px;}
.rail .item .d{font-family:var(--mono); font-size:12px; color:var(--text-3);}

/* ---------- agent record (agents.* — registry) ------------------------------- */
.record{max-width:820px; margin:0 auto; padding:48px 24px 96px;}
.record-head{display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; margin-bottom:8px;}
.record-head h1{font-size:clamp(28px,3.6vw,40px);}
.record .guid{font-family:var(--mono); font-size:14px; color:var(--text-2); margin:8px 0 28px; word-break:break-all;}
.kv{display:grid; grid-template-columns:180px minmax(0,1fr); border:1px solid var(--line);
  border-radius:12px; overflow:hidden; background:var(--surface);}
.kv > div{padding:13px 18px; border-bottom:1px solid var(--line); font-size:14px;}
.kv > div:nth-last-child(-n+2){border-bottom:0;}
.kv .k{color:var(--text-2); font-weight:500;}
.kv .v{font-family:var(--mono); font-size:13px; word-break:break-all;}
.kv .v.sans{font-family:var(--sans); font-size:14px;}
@media (max-width:620px){ .kv{grid-template-columns:1fr;} .kv .k{border-bottom:0; padding-bottom:2px;} }

/* ---------- proof / receipt (vi.*, research receipts) ------------------------ */
.receipt{max-width:820px; margin:0 auto; padding:48px 24px 96px;}
.receipt-box{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:30px;}
.receipt-box .row{display:flex; justify-content:space-between; gap:18px; padding:11px 0;
  border-bottom:1px solid var(--line); font-size:14px; flex-wrap:wrap;}
.receipt-box .row:last-child{border-bottom:0;}
.receipt-box .row .k{color:var(--text-2);}
.receipt-box .row .v{font-family:var(--mono); font-size:13px; text-align:right; word-break:break-all;}
.receipt-box .row .v.money{color:var(--money);}
.hashline{font-family:var(--mono); font-size:12px; color:var(--text-3); word-break:break-all;
  background:var(--canvas); border:1px solid var(--line); border-radius:8px; padding:12px 14px; margin-top:16px;}

/* ---------- page hero (side-door landings / marketing pages) ----------------- */
.page-hero{padding:88px 0 56px;}
.page-hero h1{font-size:clamp(32px,4.6vw,52px); letter-spacing:-.015em; max-width:20ch;}
.page-hero .lede{font-size:clamp(17px,1.6vw,20px); color:var(--text-2); margin-top:20px; max-width:58ch;}
.page-hero .cta-row{margin-top:32px; display:flex; gap:14px; flex-wrap:wrap;}

/* ---------- utilities --------------------------------------------------------- */
.center{text-align:center;}
.demo-note{font-size:13px; color:var(--text-3);}  /* e.g. "demo environment" labels (R8) */
hr{border:0; border-top:1px solid var(--line); margin:48px 0;}