/* ============ AgentR site shell ============
   The heritage-stationery system the landing page is set in, extracted for every
   other page. index.html deliberately keeps its own inline copy: it carries the
   scrollytelling CSS and is left untouched. Tokens here mirror it exactly. */
:root{
  --accent:#5438CC; --accent-2:#7053E8; --accent-deep:#3A2596; --accent-tint:#ECE8FB;
  --brass:#A8823B; --brass-deep:#84662A; --brass-tint:#F3ECDB;
  --paper:#F5F2EC; --text:#171425; --muted:#5C5768;
  --line:rgba(23,20,37,.14); --card:#FFFEFA;
  --shadow-sm:0 1px 2px rgba(23,20,37,.06),0 6px 18px rgba(23,20,37,.07);
  --shadow-md:0 2px 4px rgba(23,20,37,.06),0 18px 50px rgba(23,20,37,.12);
  --nav:70px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav) + 16px)}
body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;background:var(--paper);
  color:var(--text);-webkit-font-smoothing:antialiased;font-size:17px;line-height:1.65}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
img{max-width:100%;display:block}
/* <picture> is inline by default, which breaks the grid cell it stands in on
   .viewcard and the measure it inherits inside .prose. It is only a wrapper. */
picture{display:block}
.serif{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400}
.mono{font-family:'DM Mono',ui-monospace,monospace}
.wrap{max-width:1120px;margin:0 auto;padding:0 clamp(20px,5vw,44px)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------------- nav ---------------- */
nav{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav);
  background:rgba(245,242,236,.9);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.nav-in{max-width:1120px;margin:0 auto;height:100%;padding:0 clamp(20px,5vw,44px);
  display:flex;align-items:center;justify-content:space-between;gap:28px}
.logo .mark{height:28px;width:auto;object-fit:contain}
.nav-links{display:flex;gap:26px;align-items:center;font-size:14.5px;font-weight:600;
  color:var(--muted)}
.nav-links > a:not(.btn){position:relative;padding:6px 0;transition:color .2s}
.nav-links > a:not(.btn):hover,.nav-links > a[aria-current]{color:var(--text)}
.nav-links > a:not(.btn)::after{content:"";position:absolute;left:0;right:100%;bottom:0;
  height:2px;background:var(--brass);border-radius:2px;transition:right .25s ease}
.nav-links > a:not(.btn):hover::after,.nav-links > a[aria-current]::after{right:0}
.btn{display:inline-flex;align-items:center;gap:8px;justify-content:center;padding:11px 22px;
  border-radius:11px;border:none;cursor:pointer;font-family:inherit;font-weight:700;
  font-size:14.5px;color:#fff;background:var(--accent);white-space:nowrap;
  transition:transform .2s,box-shadow .2s,background .2s}
.btn:hover{background:var(--accent-deep);box-shadow:0 8px 22px rgba(84,56,204,.3)}
.btn.ghost{background:none;color:var(--accent);border:1px solid var(--line)}
.btn.ghost:hover{background:var(--accent-tint);box-shadow:none}

/* mobile nav v2: the nested accordion (burger panel containing collapsible
   dropdowns) fought itself — inconsistent collapse behaviour, overlap on
   expand. Replaced with one flat full-screen menu: category labels, links
   already expanded underneath, no nested toggles to go wrong. .nav-extra
   stays in the markup (harmless, invisible via display:contents) so the
   desktop dropdowns it wraps are untouched; mobile ignores it entirely and
   uses .mobile-menu instead. */
.nav-extra{display:contents}
/* 44px box, 34px of bars: the padding buys the touch target without moving the
   drawn burger, and the negative margin keeps it flush with the wrap's edge */
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;background:none;border:none;cursor:pointer;padding:5px;
  margin-right:-5px;flex-shrink:0}
.nav-burger span{display:block;height:2px;background:var(--text);border-radius:2px;
  transition:transform .25s,opacity .25s}
.nav-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{display:none}
@media(max-width:900px){
  .nav-burger{display:flex}
  .nav-links > a:not(.btn),.nav-links > .nav-extra{display:none}
  .nav-links .btn{display:none}
  .mobile-menu{display:none;position:fixed;top:var(--nav);left:0;right:0;bottom:0;
    z-index:99;background:var(--paper);overflow-y:auto;
    padding:2px clamp(20px,5vw,44px) 36px}
  .mobile-menu.open{display:block}
  .mm-group{padding:13px 0;border-bottom:1px solid var(--line)}
  .mm-group b{display:block;font-family:'DM Mono',ui-monospace,monospace;font-size:11px;
    letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
  /* titles only on mobile — the taglines are worth the space in the desktop
     mega-menu, where you arrive by hover with room to spare; here they turned
     a "get to a page fast" list into a long scroll before reaching Pricing.
     A brass index number stands in for the dropped tagline, echoing .dd-n. */
  /* min-height, not more padding: these rows measured 42px, just under the 44px
     touch target, and padding alone would have stretched the list past one screen */
  .mm-group a{display:flex;align-items:center;gap:13px;padding:11px 0;min-height:44px;
    font-size:15.5px;font-weight:700;letter-spacing:-.01em;color:var(--text)}
  .mm-group a i{display:none}
  .mm-n{flex-shrink:0;font-family:'DM Mono',monospace;font-size:12px;font-weight:500;
    color:var(--brass-deep)}
  /* folded into the same list rhythm as the grouped links, just muted and
     un-numbered, so it reads as this menu's last stop rather than a stray group */
  .mm-link{display:flex;align-items:center;padding:11px 0 13px;min-height:44px;font-size:15px;
    font-weight:600;color:var(--muted)}
  .mobile-menu .btn{display:flex;width:100%;justify-content:center;margin-top:20px}
}

/* ---------------- page head ---------------- */
.phead{padding-block:calc(var(--nav) + clamp(50px,8vh,92px)) clamp(30px,5vh,52px)}
.kicker{font-family:'Caveat',cursive;font-weight:600;font-size:26px;color:var(--brass-deep);
  transform:rotate(-1.4deg);display:inline-block}
.phead h1{font-size:clamp(38px,6vw,70px);line-height:1.04;letter-spacing:-.035em;
  font-weight:800;margin-top:10px}
.phead h1 .serif{color:var(--accent);font-size:1.05em}
.phead .lede{color:var(--muted);margin-top:18px;font-size:clamp(17px,2vw,19.5px)}

/* ---------------- generic sections ---------------- */
section.band{padding-block:clamp(40px,6vh,72px)}
h2.sec{font-size:clamp(28px,4vw,44px);line-height:1.08;letter-spacing:-.03em;font-weight:800}
h2.sec .serif{color:var(--accent);font-size:1.05em}
h3.sub{font-size:19px;font-weight:800;letter-spacing:-.01em}
.lead{color:var(--muted);margin-top:14px;font-size:17.5px}

/* prose for legal + article pages */
.prose{max-width:720px;font-size:16.5px;line-height:1.75;color:var(--text)}
.prose > * + *{margin-top:1.1em}
.prose h2{font-size:clamp(22px,2.6vw,27px);font-weight:800;letter-spacing:-.02em;margin-top:2em}
.prose h3{font-size:18px;font-weight:800;margin-top:1.5em}
.prose p,.prose li{color:var(--muted)}
.prose strong{color:var(--text);font-weight:700}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.prose ul,.prose ol{padding-left:1.3em}
.prose li + li{margin-top:.4em}
.prose blockquote{border-left:2px solid var(--brass);padding-left:18px;
  font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-size:1.12em;color:var(--text)}
.prose code{font-family:'DM Mono',ui-monospace,monospace;font-size:.88em;
  background:var(--accent-tint);color:var(--accent-deep);padding:2px 6px;border-radius:5px}
.prose hr{border:none;border-top:1px solid var(--line);margin:2em 0}
/* an essay set to the same width as its heading: two columns rather than one
   narrow one with the right half of the page empty */
@media(min-width:1000px){
  .prose.cols{max-width:none;columns:2;column-gap:clamp(34px,4vw,64px)}
  .prose.cols > *{break-inside:avoid;margin-top:0;margin-bottom:1.1em}
}
.toc{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px 24px;
  margin-bottom:34px}
.toc b{display:block;font-family:'DM Mono',ui-monospace,monospace;font-size:11.5px;
  color:var(--muted);margin-bottom:10px}
.toc ol{padding-left:1.2em;font-size:15.5px}
.toc a{color:var(--accent)}

/* legal pages: the contents belong beside the document, not stacked on top of it.
   Boxed and full width it left the whole right half of the page empty. */
.doc-split{display:grid;grid-template-columns:252px minmax(0,1fr);
  gap:clamp(28px,4vw,56px);align-items:start}
.doc-split .toc{position:sticky;top:calc(var(--nav) + 30px);margin:0;padding:0;
  background:none;border:none;border-radius:0}
.doc-split .toc b{margin-bottom:14px;padding-left:16px}
/* the numbers are noise: the headings carry their own. Each entry gets a track
   segment instead, and the current section lights it. */
.doc-split .toc ol{list-style:none;padding:0;font-size:13px;line-height:1.45}
.doc-split .toc li{margin:0}
.doc-split .toc a{display:block;padding:7px 0 7px 16px;color:var(--muted);
  border-left:2px solid var(--line);transition:color .2s,border-color .2s}
.doc-split .toc a:hover{color:var(--text);border-left-color:var(--brass)}
.doc-split .toc a.on{color:var(--accent);font-weight:700;border-left-color:var(--accent)}
.doc-split .prose{max-width:none}
@media(max-width:900px){
  .doc-split{grid-template-columns:1fr;gap:0}
  .doc-split .toc{position:static;margin-bottom:34px;padding:22px 24px;
    background:var(--card);border:1px solid var(--line);border-radius:16px}
  .doc-split .toc ol{font-size:15px}
  .doc-split .prose{max-width:720px}
}

/* a visible draft flag for documents that still need counsel */
.draftnote{background:var(--brass-tint);border:1px solid rgba(168,130,59,.4);border-radius:14px;
  padding:16px 20px;font-size:15px;color:var(--brass-deep);margin-bottom:30px}
.draftnote b{color:var(--text)}

/* ---------------- cards ---------------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:38px}
@media(max-width:880px){.grid-3,.grid-2{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:28px;
  box-shadow:var(--shadow-sm);transition:transform .3s,box-shadow .3s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.card .tag{display:block;font-family:'DM Mono',ui-monospace,monospace;font-size:11.5px;
  color:var(--brass-deep);margin-bottom:10px}
.card h3{font-size:18px;font-weight:800;letter-spacing:-.01em}
.card p{color:var(--muted);font-size:14.5px;line-height:1.6;margin-top:8px}

/* numbered/ruled list, like the landing's solution list */
.ruled{margin-top:30px;border-top:1px solid var(--line)}
.ruled li{list-style:none;display:flex;gap:18px;align-items:flex-start;padding:20px 0;
  border-bottom:1px solid var(--line)}
.ruled li b{font-family:'DM Mono',ui-monospace,monospace;font-size:12px;font-weight:500;
  color:var(--brass-deep);padding-top:4px;flex-shrink:0}
.ruled li .t{font-weight:700;display:block;margin-bottom:4px}
.ruled li p{color:var(--muted);font-size:15.5px;margin:0}
/* cap the measure: the ruled list spans the full 1120 wrap and long rows read badly */
.ruled li > div{max-width:76ch}
/* word labels vary in width, so the flex gutter collapses to each label and the
   titles no longer line up. Numbered lists (01, 02) don't need this. */
.ruled.lbl li b{min-width:12ch}
/* on a phone a 12ch gutter leaves the text 246px. The label goes above instead. */
@media(max-width:560px){
  .ruled li{flex-direction:column;gap:5px;padding:18px 0}
  .ruled.lbl li b{min-width:0}
  .ruled li b{padding-top:0}
}

/* registered-office footnote: legal detail, not the invitation to write in */
.regoffice{margin-top:44px;padding-top:22px;border-top:1px solid var(--line);
  font-size:13px;line-height:1.7;color:var(--muted)}
.regoffice b{display:block;font-size:11px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px}

/* ---------------- pricing ---------------- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px;
  align-items:start}
@media(max-width:900px){.tiers{grid-template-columns:1fr}}
/* two plans during the beta, centred rather than stretched across the full wrap */
.tiers.two{grid-template-columns:repeat(2,minmax(0,400px));justify-content:center}
@media(max-width:900px){.tiers.two{grid-template-columns:1fr}}
.tier{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:30px 28px;
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column;height:100%}
.tier.feature{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),var(--shadow-md)}
.tier .tag{font-family:'DM Mono',ui-monospace,monospace;font-size:11.5px;color:var(--brass-deep)}
.tier h3{font-size:24px;font-weight:800;letter-spacing:-.02em;margin-top:8px}
.tier .price{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;
  font-size:clamp(38px,4.4vw,52px);line-height:1;color:var(--accent);margin-top:16px}
.tier .price small{font-family:'Plus Jakarta Sans',sans-serif;font-style:normal;font-size:14px;
  color:var(--muted);font-weight:600}
.tier .blurb{color:var(--muted);font-size:15px;margin-top:12px;min-height:48px}
.tier ul{list-style:none;margin-top:20px;padding-top:18px;border-top:1px solid var(--line);
  flex:1}
.tier li{position:relative;padding:8px 0 8px 24px;font-size:15px;color:var(--muted)}
.tier li::before{content:"";position:absolute;left:2px;width:10px;height:10px;
  top:calc(8px + (1.65em - 10px) / 2);
  border-radius:50%;border:1.5px solid var(--brass)}
.tier li.on::before{background:var(--accent);border-color:var(--accent)}
.tier .btn{margin-top:22px;width:100%}
.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;
  background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-sm);
  font-size:13.5px;font-weight:700;color:var(--muted)}
.pill i{width:8px;height:8px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 4px rgba(84,56,204,.16)}

/* ---------------- FAQ ---------------- */
.faq{margin-top:34px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:20px 44px 20px 0;position:relative;
  font-weight:700;font-size:17px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:8px;top:18px;font-size:22px;
  color:var(--accent);font-weight:400;transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 44px 22px 0;color:var(--muted);font-size:15.5px;max-width:70ch}
.faq .a a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

/* ---------------- footer ---------------- */
footer{border-top:1px solid var(--line);margin-top:clamp(56px,8vh,96px);background:var(--paper)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1fr) repeat(4,max-content);gap:32px clamp(30px,3.4vw,58px);padding:52px 0 22px}
@media(max-width:1040px){.foot-grid{grid-template-columns:1fr 1fr;gap:26px 32px}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr}}
.foot-brand img{height:26px;width:auto}
.foot-brand p{color:var(--muted);font-size:14.5px;margin-top:14px;max-width:34ch}
.foot-col b{display:block;font-family:'DM Mono',ui-monospace,monospace;font-size:11.5px;
  color:var(--muted);margin-bottom:12px}
.foot-col a{display:block;padding:5px 0;font-size:15px;color:var(--text);opacity:.8;
  transition:opacity .2s,color .2s}
.foot-col a:hover{opacity:1;color:var(--accent)}
.foot-base{border-top:1px solid var(--line);padding:20px 0 40px;display:flex;flex-wrap:wrap;
  gap:14px;justify-content:space-between;color:var(--muted);font-size:13.5px}

/* ---------------- 404 ---------------- */
.oops{min-height:calc(100vh - var(--nav));display:grid;place-items:center;text-align:center;
  padding:calc(var(--nav) + 40px) 0 60px}
.oops .big{font-family:'Instrument Serif',Georgia,serif;font-style:italic;
  font-size:clamp(90px,18vw,190px);line-height:.9;color:var(--accent)}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .card,.btn,.viewcard{transition:none}
}

/* ---------------- nav mega-menu ---------------- */
.navdrop{position:relative}
.navdrop-t{display:flex;align-items:center;gap:7px;background:none;border:none;padding:6px 0;
  font:inherit;font-size:14.5px;font-weight:600;color:var(--muted);cursor:pointer;
  position:relative;transition:color .2s}
.navdrop-t svg{transition:transform .3s;margin-top:1px}
.navdrop-t::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--brass);border-radius:2px;transition:right .25s ease}
.navdrop:hover .navdrop-t,.navdrop.on .navdrop-t{color:var(--text)}
.navdrop:hover .navdrop-t::after,.navdrop.on .navdrop-t::after{right:0}
.navdrop.on .navdrop-t svg{transform:rotate(180deg)}
.navdrop-p{position:absolute;top:calc(100% + 16px);left:50%;width:min(600px,86vw);
  /* pull back half the panel's own width. max(), not min(): both operands are
     negative, so min() would pick the *wider* pull and shove the panel left. */
  margin-left:max(-300px,-43vw);background:var(--card);border:1px solid var(--line);
  border-radius:20px;box-shadow:var(--shadow-md);padding:26px 26px 22px;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .28s,transform .28s cubic-bezier(.2,.7,.2,1),visibility .28s}
.navdrop.on .navdrop-p{opacity:1;visibility:visible;transform:none}
/* Use Cases sits far enough right that centring a 600px panel on its button put
   it up to 39px past the viewport between 901 and ~1210, and body's
   overflow-x:hidden clipped the right-hand column of links rather than
   scrolling. Anchored to the button's right edge instead. Process is centred
   because it sits mid-bar and has room on both sides. */
.navdrop-p.end{left:auto;right:0;margin-left:0;margin-right:-24px}
.navdrop-p::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px}
.dd-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px}
.dd-grid a{display:flex;gap:14px;align-items:flex-start;padding:12px;border-radius:13px;
  transition:background .22s}
.dd-grid a:hover{background:var(--accent-tint)}
.dd-n{flex-shrink:0;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:var(--accent-tint);color:var(--accent-deep);
  font-family:'DM Mono',monospace;font-size:14px;font-weight:500;transition:background .22s,color .22s}
.dd-grid a:hover .dd-n{background:var(--accent);color:#fff}
.dd-x b{display:block;font-size:15.5px;font-weight:700;letter-spacing:-.01em;color:var(--text)}
.dd-x i{display:block;font-style:normal;margin-top:3px;font-size:13px;line-height:1.5;color:var(--muted)}

/* ---------------- process pages ---------------- */
/* the rules run the full column, like .ruled does. Capped at 60ch they stopped
   about 290px short of every other rule on the page, which read as a ragged edge
   rather than as deliberate white space. */
.claims{margin-top:30px;border-top:1px solid var(--line)}
.claims li > *,.claims li{max-width:none}
.claims li{list-style:none;display:flex;gap:14px;align-items:flex-start;padding:15px 0;
  border-bottom:1px solid var(--line);font-size:16px;line-height:1.55}
.claims li::before{content:"";flex-shrink:0;width:10px;height:10px;border-radius:50%;
  border:1.5px solid var(--brass);margin-top:calc((1.55em - 10px) / 2)}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:44px;
  border-top:2px solid var(--text);border-bottom:1px solid var(--text);position:relative}
.metrics::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:var(--text)}
@media(max-width:760px){.metrics{grid-template-columns:1fr}}
.metric{padding:22px 20px 24px;border-left:1px solid var(--line)}
.metric:first-child{border-left:none}
@media(max-width:760px){.metric{border-left:none;border-top:1px solid var(--line)}
  .metric:first-child{border-top:none}}
.metric b{display:block;font-family:'Instrument Serif',Georgia,serif;font-style:italic;
  font-weight:400;font-size:clamp(36px,4.4vw,52px);line-height:1;color:var(--accent)}
.metric span{display:block;margin-top:10px;font-size:14px;line-height:1.5;color:var(--muted)}
.metrics-note{margin-top:18px;font-family:'DM Mono',monospace;font-size:11.5px;color:var(--muted)}
.quote-card{background:var(--card);border:1px solid var(--line);border-radius:20px;
  padding:clamp(28px,4vw,44px);box-shadow:var(--shadow-sm);max-width:760px;margin:0 auto}
.quote-card p{font-size:clamp(18px,2vw,22px);font-weight:500;line-height:1.5;
  letter-spacing:-.015em;color:var(--text)}
.quote-card .who{margin-top:20px;font-family:'DM Mono',monospace;font-size:12px;color:var(--brass-deep);
  font-style:normal}

/* ---------------- process page extras ---------------- */
/* "will not" rows: the same ring, in the muted ink rather than the brass */
.claims.no li::before{border-color:var(--muted);opacity:.8}
.tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.tags span{display:inline-block;padding:8px 15px;border-radius:999px;background:var(--card);
  border:1px solid var(--line);font-size:14px;color:var(--text)}
h3.sub2{font-size:21px;font-weight:800;letter-spacing:-.02em;margin-top:clamp(38px,5vh,58px)}

/* third-party trust marks. They arrive in their own brands, so they get a plain
   row rather than any attempt to restyle them into the palette. */
.foot-badges{display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  margin-top:16px;padding-bottom:clamp(24px,3vh,32px)}
/* one height for all three, so the row sits on a single baseline */
.foot-badges img{display:block;height:44px;width:auto}
.foot-li{display:grid;place-items:center;width:44px;height:44px;border-radius:11px;
  border:1px solid var(--line);background:var(--card);color:var(--text);
  transition:color .2s,border-color .2s,transform .2s}
.foot-li:hover{color:var(--accent);border-color:var(--accent);transform:translateY(-2px)}

/* ---------------- investor deck block ---------------- */
.deck{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:clamp(26px,4vw,56px);
  align-items:center;background:var(--card);border:1px solid var(--line);border-radius:24px;
  box-shadow:var(--shadow-md);padding:clamp(30px,4vw,52px)}
.deck .sec{margin-top:8px}
.deck-act{display:grid;gap:12px;justify-items:stretch}
.deck-act .btn{width:100%}
/* the second way in, deliberately not a second button: one thing to press, and a
   quieter line under it for anyone who would rather just message. The dashed rule
   is on the words only — an underline running beneath the glyph reads as a mistake. */
.deck-wa{display:inline-flex;align-items:center;gap:7px;justify-self:center;margin-top:4px;
  font-size:13.5px;font-weight:600;color:var(--muted);transition:color .2s}
.deck-wa span{border-bottom:1px dashed transparent;padding-bottom:2px;transition:border-color .2s}
.deck-wa:hover{color:var(--accent)}
.deck-wa:hover span{border-bottom-color:currentColor}
@media(max-width:820px){.deck{grid-template-columns:1fr;gap:26px}}
/* the views are links, so they need the card's hover to read as clickable */
a.card{display:block;color:inherit}
a.card h3{color:var(--text)}
a.card:hover h3{color:var(--accent)}

/* a placeholder frame for a photo not yet in the repo, sized to 70% of the
   row's measure. The caption lives outside the frame on purpose: drop a real
   <img> into .photoframe-ph later and the caption underneath still reads
   correctly, instead of vanishing with the placeholder it was written on. */
.photoframe{width:70%;margin:14px 0 18px}
.photoframe-ph{background:var(--card);border:1px solid var(--line);border-radius:18px;
  box-shadow:var(--shadow-sm);aspect-ratio:16/9;display:grid;place-items:center;overflow:hidden}
.photoframe-ph span{font-family:'DM Mono',ui-monospace,monospace;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);opacity:.55}
.photoframe img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:18px}
.photoframe figcaption{margin-top:9px;font-family:'Caveat',cursive;font-weight:600;font-size:17px;
  color:var(--brass-deep);transform:rotate(-1deg);display:inline-block}

/* ---------------- use-case hero split ---------------- */
/* text left, a small illustrated "verdict card" right — the same claim/signal
   check the rest of the product does, just staged as the hero image instead of
   asking for a stock photo nothing on this site otherwise uses. */
.phead.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,360px);
  gap:clamp(30px,5vw,64px);align-items:center}
.phead.split .htext{max-width:640px}
@media(max-width:900px){.phead.split{grid-template-columns:1fr}
  .phead.split .hvis{order:-1;width:min(340px,86vw);margin:0 auto 6px}}

.hvis{position:relative}
.hvis-card{position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:22px;box-shadow:var(--shadow-md);padding:clamp(20px,2.4vw,26px);
  transform:rotate(-2deg)}
.hvis-tape{position:absolute;top:-13px;left:50%;transform:translateX(-50%) rotate(-3deg);
  width:64px;height:24px;border-radius:2px;background:rgba(168,130,59,.22);
  border:1px solid rgba(168,130,59,.3)}
.hvis-kicker{display:block;font-family:'DM Mono',ui-monospace,monospace;font-size:10.5px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.hvis-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.hvis-row + .hvis-row{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.hvis-label{font-size:14.5px;font-weight:700;line-height:1.35}
.hvis-label.with-ico{display:flex;align-items:center;gap:8px}
/* the real marks, not lettermarks: these two tools are recognised by their logo
   and not by a "C" or a "P". Downloaded and served from /assets, so there is
   still no runtime request to a third-party domain that can 404 later. */
.hvis-ico{flex-shrink:0;display:block;width:20px;height:20px;object-fit:contain}
.hvis-sub{display:block;font-size:12px;color:var(--muted);margin-top:3px}
/* volume screening's card tells a funnel, not a verdict — a shrinking number
   reads better here than a pill badge that would just repeat "consistent" */
.hvis-count{flex-shrink:0;font-family:'Instrument Serif',Georgia,serif;font-style:italic;
  font-weight:400;font-size:26px;color:var(--accent);line-height:1;margin-top:2px}
.hvis-badge{flex-shrink:0;display:inline-flex;align-items:center;gap:4px;padding:5px 10px;
  border-radius:999px;font-family:'DM Mono',ui-monospace,monospace;font-size:10.5px;
  font-weight:600;white-space:nowrap;margin-top:1px}
.hvis-badge.ok{background:var(--accent-tint);color:var(--accent-deep)}
.hvis-badge.flag{background:var(--brass-tint);color:var(--brass-deep)}
/* a caught-and-stopped tool reads differently from a claim under review: solid
   ink rather than a tint, so "blocked" feels final next to the softer flags */
.hvis-badge.blocked{background:var(--text);color:#fff}
/* the stamp the landing's Guard scene slams onto a locked room, brought over so
   this card reads as a session held shut rather than a list of rows. Overhangs
   the card corner the way .hvis-tape overhangs the top edge. */
.hvis-stamp{position:absolute;right:-8px;bottom:-16px;transform:rotate(-7deg);
  text-align:center;border:2px solid var(--brass);border-radius:9px;padding:6px 13px;
  background:rgba(255,255,255,.95);color:var(--brass-deep);box-shadow:var(--shadow-sm);
  /* body line-height is 1.65, which on two short lines makes a stamp that reads
     as a card. A stamp is tight. */
  line-height:1.3}
.hvis-stamp b{display:block;font-family:'DM Mono',ui-monospace,monospace;font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase}
.hvis-stamp small{display:block;margin-top:1px;font-family:'Caveat',cursive;font-weight:600;
  font-size:13px;opacity:.85}
/* On a 360px phone the card's own margin is all the room there is, and the
   overhang put the stamp's edge flush against the screen. Tucking it inside
   instead means it lands on the last row's text, so the card also gives up a
   strip of bottom padding for it to sit in. Wide screens have room to the right
   of the rows and need neither. */
@media(max-width:520px){
  .hvis-stamp{right:4px;bottom:-14px}
  /* .stamped, not .hvis-card: four other use-case pages share this card and have
     no stamp to make room for */
  .hvis-card.stamped{padding-bottom:56px}
}

/* ---------------- candidate sign-in ---------------- */
.signin{display:flex;align-items:center;justify-content:space-between;gap:clamp(18px,3vw,40px);
  flex-wrap:wrap;margin-top:38px;padding:clamp(22px,3vw,32px) clamp(22px,3vw,34px);
  background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-sm)}
.signin h3{font-size:20px;font-weight:800;letter-spacing:-.02em}
.signin p{color:var(--muted);font-size:15px;margin-top:6px;max-width:56ch}
.signin .btn{flex-shrink:0}

/* ---------------- article ---------------- */
.byline{margin-top:20px;font-family:'DM Mono',ui-monospace,monospace;font-size:12px;
  letter-spacing:.04em;color:var(--brass-deep)}
.prose.article{max-width:70ch;font-size:17.5px;line-height:1.8}
.prose.article h2{font-size:clamp(24px,2.8vw,30px);margin-top:1.9em}
.prose.article blockquote{margin:1.6em 0;font-size:1.2em;line-height:1.4}
.prose.article .fignote{font-size:14.5px;color:var(--muted);font-style:italic}
.prose.article figure{margin:2em 0}
.prose.article figure img{width:100%;height:auto;border-radius:14px;border:1px solid var(--line)}
.prose.article figcaption{margin-top:12px;font-size:14px;line-height:1.6;color:var(--muted)}
/* the banner lives inside the article column, so it inherits the same measure as
   every paragraph and figure rather than being sized on its own font context */
.prose.article .banner{margin:0 0 clamp(28px,4vh,46px)}
.prose.article .banner img{border-radius:18px;box-shadow:var(--shadow-md)}
.banner img{width:100%;height:auto;border-radius:18px;border:1px solid var(--line);
  box-shadow:var(--shadow-md)}

/* ---------------- featured view ---------------- */
.viewcard{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);align-items:center;
  gap:clamp(22px,3vw,42px);margin-top:34px;padding:clamp(18px,2vw,24px);
  background:var(--card);border:1px solid var(--line);border-radius:22px;
  box-shadow:var(--shadow-sm);color:inherit;
  transition:transform .3s,box-shadow .3s}
.viewcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.viewcard img{width:100%;height:auto;border-radius:14px}
.vc-meta{font-family:'DM Mono',ui-monospace,monospace;font-size:11.5px;letter-spacing:.04em;
  color:var(--brass-deep)}
.viewcard h3{font-size:clamp(20px,2.2vw,26px);font-weight:800;letter-spacing:-.02em;
  line-height:1.2;margin-top:12px}
.viewcard:hover h3{color:var(--accent)}
.viewcard p{color:var(--muted);font-size:15.5px;line-height:1.6;margin-top:12px;max-width:60ch}
.vc-go{display:inline-block;margin-top:18px;font-size:14.5px;font-weight:700;color:var(--accent)}
@media(max-width:820px){.viewcard{grid-template-columns:1fr;gap:18px}}