/* ============ 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)}
/* blog posts add their sub-headings to the rail, stepped in under their section
   so the shape of the article is readable from the contents alone */
.doc-split .toc li.toc-sub a{padding-left:30px;font-size:.92em}
.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}

/* a scrawled aside with an arrow into the card: on a page of figures, the one
   block of prose needs a reason for the eye to stop */
.notecue{display:flex;align-items:flex-end;gap:10px;max-width:820px;
  margin:0 auto -4px;padding-left:clamp(12px,5vw,70px);
  font-family:'Caveat',cursive;font-weight:600;font-size:23px;line-height:1.2;
  color:var(--brass-deep);transform:rotate(-1.4deg)}
.notecue svg{width:32px;height:38px;flex-shrink:0;color:var(--brass)}
@media(max-width:620px){.notecue{font-size:20px;padding-left:4px}}

/* the reveal, run by the pricing page's own observer rather than GSAP: the hide
   only lands once JS adds .reveal-on, so no-JS leaves the note plainly visible */
.reveal-on .reveal{opacity:0;transform:translateY(30px)}
.reveal-on .reveal.in{opacity:1;transform:none;
  transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1)}
@media(prefers-reduced-motion:reduce){
  .reveal-on .reveal{opacity:1!important;transform:none!important;transition:none}
}

/* ---------------- the signed note ----------------
   ported from the landing page so the pricing page can end its numbers on the
   same handwritten register the homepage uses to explain itself */
.hand{font-family:'Caveat',cursive;font-weight:600}
.note{max-width:820px;margin:0 auto;text-align:center;overflow:visible;
  background:var(--card);border:1px solid var(--line);border-radius:26px;
  box-shadow:var(--shadow-md);
  padding:clamp(34px,4.6vw,54px) clamp(24px,4vw,56px) clamp(28px,3.6vw,44px)}
.note .note-lead{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;
  font-size:clamp(24px,3.2vw,36px);line-height:1.26;letter-spacing:-.012em;color:var(--text)}
.note .note-body{font-size:clamp(15.5px,1.7vw,17px);font-weight:500;line-height:1.75;
  margin:24px auto 0;color:var(--muted);max-width:56ch}
.note .note-sign{position:relative;display:inline-block;margin-top:34px;
  font-family:'Caveat',cursive;font-weight:600;font-size:27px;color:var(--brass-deep);
  transform:rotate(-1deg)}
/* the pen underlines its own signature */
.note .sign-line{position:absolute;left:-6%;bottom:-11px;width:112%;height:11px;
  color:var(--brass);pointer-events:none;overflow:visible}
@media(max-width:760px){.note .sign-line{left:0;width:100%}}

/* ---------------- 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}
/* Log in is a short menu, not a mega-menu: two destinations and no numbered
   cards, so the 600px two-column panel would be mostly empty space. */
.navdrop-p.slim{width:min(268px,86vw)}
.navdrop-p.slim .dd-grid{grid-template-columns:1fr;gap:2px}
.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:50%;margin:14px 0 18px}
/* half the measure is a 168px thumbnail on a phone, and the caption wraps */
@media(max-width:560px){.photoframe{width:100%}}
.photoframe-ph{background:var(--card);border:1px solid var(--line);border-radius:18px;
  box-shadow:var(--shadow-sm);aspect-ratio:4/3;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}
/* height:auto is load-bearing: the width/height attributes on the <img> map to
   CSS width and height, and the height hint beats aspect-ratio, so a 600x800
   photo would otherwise render 800px tall instead of filling the frame.
   The crop sits above centre because a landscape window cut from a portrait
   photo is a band, and centred it lands on torsos rather than faces. */
.photoframe img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  object-position:center 40%;border-radius:18px;box-shadow:var(--shadow-sm)}
.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}
/* article bodies now come from the CMS, so the text is not vetted by hand. A long
   unbroken run — most often a pasted URL — otherwise spills past the measure. */
.prose.article{overflow-wrap:break-word}
.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}}

/* ---------------- blog listing ----------------
   The index carries more furniture than the rest of the site: topics, a lead
   piece, a grid and a pager. All of it reuses the tokens above so it reads as
   the same site, and every hover here is the same 4px lift the cards elsewhere
   already use rather than a new idiom. */

/* The site nav is styled off the bare element — `nav{position:fixed;height:var(--nav)}`
   near the top of this file. Topics and the pager are in-page navigation and are
   correctly <nav> too, so they inherit all of it and get pinned over the header.
   Put them back in the flow before anything else. */
.topics,.pager{position:static;height:auto;background:none;backdrop-filter:none;
  box-shadow:none;z-index:auto}

/* topics ------------------------------------------------- */
/* the row is a filter, not content: a hairline sets it apart from what it filters */
.topics{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 clamp(26px,4vh,38px);
  padding-bottom:clamp(20px,3vh,28px);border-bottom:1px solid var(--line)}
.topic{display:inline-flex;align-items:baseline;gap:7px;padding:8px 15px;
  border:1px solid var(--line);border-radius:999px;background:var(--card);
  font-size:14px;font-weight:600;color:var(--muted);
  transition:color .2s,border-color .2s,background .2s}
.topic span{font-family:'DM Mono',ui-monospace,monospace;font-size:11px;
  color:var(--brass-deep);font-weight:400}
/* colour and border only. These sit in a tight row, and lifting them made the
   whole strip twitch as the pointer crossed it. */
.topic:hover{color:var(--text);border-color:var(--brass)}
.topic.on{background:var(--accent);border-color:var(--accent);color:#fff}
.topic.on span{color:rgba(255,255,255,.72)}

/* the ground --------------------------------------------
   Cards on flat cream read as a wall. The landing page already sits its hero on
   graph paper — same dot, same 26px pitch (see .hero-bg in landing.css) — so the
   listing borrows it and the cards become things laid out on a desk. The two
   linear-gradients fade the grid back into the paper at the top and bottom
   rather than letting it stop on a hard edge. */
.listing-ground{
  background-image:
    linear-gradient(180deg,var(--paper) 0,transparent 120px),
    linear-gradient(0deg,var(--paper) 0,transparent 140px),
    radial-gradient(circle,rgba(23,20,37,.05) 1px,transparent 1.4px);
  background-size:auto,auto,26px 26px}

/* the lead piece ----------------------------------------- */
/* The card is clipped to its own radius, so the tape that overhangs its edge has
   to live on a wrapper. Named .leadcard, not .lead: .lead is already this site's
   lead-paragraph class, used 26 times across ten pages, and claiming it here put
   position:relative on every one of them. */
.leadcard{position:relative}
/* the same brass washi tape the use-case hero cards are pinned up with
   (.hvis-tape). Set off to the left rather than centred: over a card this wide,
   centred reads as a label, off-centre reads as someone having put it there. */
.leadcard .tape{position:absolute;top:-11px;left:clamp(26px,7%,86px);z-index:2;
  width:74px;height:25px;border-radius:2px;transform:rotate(-3deg);
  background:rgba(168,130,59,.22);border:1px solid rgba(168,130,59,.3)}
/* The image column is capped rather than fluid. Left to share the width evenly,
   a square illustration set the card's height from its own width — 537px tall on
   a 1440px screen, taller than the entire list beneath it. A bounded column and
   a fixed 4:3 crop keep the lead card roughly a third of the page whatever the
   window does. */
/* .postcard, not .feature: the pricing page has carried <div class="tier feature">
   since before this blog existed, and a bare .feature rule here laid that card
   out as a grid and stretched its button to 483x385. */
.postcard{display:grid;grid-template-columns:minmax(0,clamp(250px,34%,400px)) minmax(0,1fr);
  align-items:stretch;gap:0;background:var(--card);border:1px solid var(--line);
  border-radius:22px;overflow:hidden;color:inherit;box-shadow:var(--shadow-sm);
  transition:transform .3s,box-shadow .3s}
.postcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.postcard-img{overflow:hidden;background:var(--accent-tint);aspect-ratio:4/3}
.postcard-img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s ease}
.postcard:hover .postcard-img img{transform:scale(1.04)}
.postcard-body{padding:clamp(20px,2.4vw,32px);display:flex;flex-direction:column;
  justify-content:center}
.eyebrow{font-family:'DM Mono',ui-monospace,monospace;font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--brass-deep)}
.postcard h2{font-size:clamp(21px,2.1vw,27px);font-weight:800;letter-spacing:-.022em;
  line-height:1.18;margin-top:11px;transition:color .2s;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.postcard:hover h2{color:var(--accent)}
.postcard p{color:var(--muted);font-size:15.5px;line-height:1.6;margin-top:11px;
  max-width:56ch;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.postcard-meta{margin-top:15px;font-family:'DM Mono',ui-monospace,monospace;
  font-size:11.5px;color:var(--muted)}

/* the break between the lead piece and the rest ----------
   Without it the page is one undifferentiated wall of cards: the lead reads as
   just a bigger card rather than a choice someone made. A handwritten label in
   the same Caveat as .kicker, with the rule running off to the right, marks the
   shift and gives the eye somewhere to rest. */
.listsplit{display:flex;align-items:center;gap:18px;
  margin:clamp(38px,5vh,58px) 0 clamp(4px,1vh,10px)}
.listsplit span{font-family:'Caveat',cursive;font-weight:600;font-size:23px;
  color:var(--brass-deep);transform:rotate(-1.2deg);white-space:nowrap}
.listsplit::after{content:"";flex:1;height:1px;background:var(--line)}

/* back to the index, from a post -------------------------
   The kicker doubles as the way back, so it stays the Caveat hand the rest of
   the site uses for kickers and only gains an arrow. */
.kicker.back{display:inline-flex;align-items:baseline;gap:9px;transition:color .2s}
.kicker.back:hover{color:var(--accent)}
.kicker.back span{display:inline-block;font-family:'DM Mono',ui-monospace,monospace;
  font-size:17px;transition:transform .2s}
.kicker.back:hover span{transform:translateX(-4px)}

/* the index ----------------------------------------------
   Cards repeated down a page turn into wallpaper, and with the art matched by
   category several would repeat outright. A dense index of date / category /
   title scans far better, and the drawing moves to a single panel that follows
   you down the list — one picture at a time, always the one you are pointing at. */
.index{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,280px);
  gap:clamp(26px,3.4vw,50px);align-items:start;margin-top:clamp(10px,2vh,18px)}
.rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.rows li{border-bottom:1px solid var(--line)}
.rows a{display:grid;grid-template-columns:96px 122px minmax(0,1fr);
  align-items:baseline;gap:16px;padding:17px 10px 17px 4px;
  transition:background .2s,transform .2s}
/* translate, not padding. Shifting the padding narrowed the title column by the
   same 8px, so a headline sitting near a line break lost its last word to the
   next line on hover and got it back on leave. A transform moves the row without
   touching the layout, so nothing re-wraps. */
.rows a:hover,.rows a:focus-visible{background:var(--card);transform:translateX(6px)}
.row-date,.row-cat{font-family:'DM Mono',ui-monospace,monospace;font-size:11.5px;
  letter-spacing:.03em;color:var(--muted);white-space:nowrap}
.row-cat{color:var(--brass-deep)}
.row-title{font-size:17px;font-weight:700;letter-spacing:-.012em;line-height:1.35;
  transition:color .2s;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.rows a:hover .row-title,.rows a:focus-visible .row-title{color:var(--accent)}

/* the panel that follows the list.
   `position:sticky` with `align-self:start` is what makes it travel: the grid
   would otherwise stretch it to the column's full height and it would never
   move. */
.indexart{position:sticky;top:calc(var(--nav) + 34px);align-self:start}
.indexart-in{position:relative;aspect-ratio:1;border-radius:22px;overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow-sm)}
/* Every drawing is in the DOM and cross-faded, rather than one <img> whose src
   is swapped. Swapping would show a blank frame on first hover of each row
   while the file fetches, which is exactly when it is being looked at. */
.indexart img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .32s ease}
.indexart img.on{opacity:1}
/* Which drawing shows is decided in CSS, not script.
   The JavaScript version worked in every test I could run and still did not
   work on the machine that mattered, and I could not reproduce it — so the
   dependency is gone rather than debugged. `:has()` lets the panel react to the
   row under the pointer with nothing to load, cache, or run in the right order,
   and it covers keyboard focus in the same rule. The row-to-image mapping is
   emitted per page by scripts/lib/listing.mjs, since only the build knows which
   row points at which drawing. */
.index:has(.rows a:hover) .indexart img.on,
.index:has(.rows a:focus-visible) .indexart img.on{opacity:0}
.indexart-note{margin-top:14px;font-family:'Caveat',cursive;font-weight:600;
  font-size:19px;color:var(--brass-deep);transform:rotate(-1.2deg);
  display:inline-block}

@media(max-width:1040px) and (min-width:821px){
  /* the title needs the room more than the category does */
  .rows a{grid-template-columns:92px minmax(0,1fr)}
  .row-cat{display:none}
}
/* 820, not 900: a browser window a little under 900px wide is completely
   ordinary, and at 900 the panel vanished on exactly those screens — which reads
   as "the illustration never changes" rather than as a deliberate breakpoint.
   With the category column already dropped below 1040 there is room for both. */
@media(max-width:820px){
  /* the panel is decorative and needs a pointer to mean anything */
  .index{grid-template-columns:1fr}
  .indexart{display:none}
  /* date and category are both small mono and belong on one line: stacked, each
     row ran to 103px and eight of them pushed the list off the screen */
  .rows a{grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:"date cat" "title title";
    gap:3px 12px;padding:15px 4px}
  .row-date{grid-area:date}
  .row-cat{grid-area:cat}
  .row-title{grid-area:title;font-size:16.5px;margin-top:3px}
}
@media(prefers-reduced-motion:reduce){
  .rows a,.row-title,.indexart img,.kicker.back,.kicker.back span{transition:none}
  .rows a:hover,.rows a:focus-visible{transform:none}
}

/* pager -------------------------------------------------- */
.pager{display:flex;align-items:center;justify-content:center;gap:6px;
  margin-top:clamp(36px,5vh,56px);flex-wrap:wrap}
.pager a,.pager span{min-width:40px;height:40px;display:inline-flex;
  align-items:center;justify-content:center;padding:0 13px;border-radius:11px;
  font-size:14.5px;font-weight:600;color:var(--muted);border:1px solid transparent;
  transition:color .2s,background .2s,border-color .2s}
.pager a:hover{color:var(--text);background:var(--card);border-color:var(--line)}
.pager .on{background:var(--accent);color:#fff;font-weight:700}
.pager .gap{color:var(--muted);opacity:.5;min-width:22px;padding:0}
.pager .edge{font-family:'DM Mono',ui-monospace,monospace;font-size:12.5px}

/* an empty topic should say so rather than showing a blank grid */
.emptynote{margin-top:34px;color:var(--muted);font-size:16.5px}

/* keyboard users get the same affordance the mouse does */
.topic:focus-visible,.postcard:focus-visible,.rows a:focus-visible,
.pager a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

@media(max-width:760px){
  .postcard{grid-template-columns:1fr}
  .postcard-img{min-height:0;aspect-ratio:16/9}
}
@media(prefers-reduced-motion:reduce){
  .topic,.postcard,.pager a,.go-arrow,.postcard-img img{transition:none}
  .postcard:hover .postcard-img img{transform:none}
}

/* ---------------- pricing: usage cards ---------------- */
.usecards{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:34px}
@media(max-width:800px){.usecards{grid-template-columns:1fr}}
.usecard{background:var(--card);border:1px solid var(--line);border-radius:20px;
  padding:26px 26px 24px;box-shadow:var(--shadow-sm)}
.usecard .tag{display:block;font-family:'DM Mono',ui-monospace,monospace;font-size:11.5px;
  color:var(--brass-deep)}
.usecard h3{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;
  font-size:clamp(26px,3vw,32px);color:var(--accent);margin-top:8px}
.usecard p.body{color:var(--muted);font-size:15px;margin-top:12px}
.usecard .ex{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);
  font-family:'DM Mono',ui-monospace,monospace;font-size:13px;color:var(--muted)}
.usecard .ex b{color:var(--text)}

/* ---------------- the guarantee, stated once across the top ----------------
   not a marquee: the single most important claim on the page should not be the
   thing sliding out of view */
.promobar{margin-top:var(--nav);background:var(--text);color:var(--paper);
  display:flex;align-items:center;gap:12px;padding:0 12px 0 clamp(14px,3vw,22px);height:42px}
.promobar-ico{flex-shrink:0;color:var(--brass);display:flex}
.promobar-ico svg{width:19px;height:19px}
/* one line that moves: the seal and the dismiss stay put, only the claims run */
.promobar-win{flex:1;overflow:hidden;min-width:0}
.promobar-track{display:flex;width:max-content;animation:pbtick 23s linear infinite}
.promobar:hover .promobar-track{animation-play-state:paused}
@keyframes pbtick{from{transform:translateX(0)}to{transform:translateX(-16.6667%)}}
.pb-run{display:flex;align-items:center}
.pb{font-size:13px;white-space:nowrap;color:rgba(245,242,236,.72);padding:0 20px}
.pb b{color:var(--paper);font-weight:800}
.pb-sep{width:4px;height:4px;border-radius:50%;background:var(--brass);flex-shrink:0}
.promobar-x{flex-shrink:0;background:none;border:none;cursor:pointer;padding:6px;
  color:rgba(245,242,236,.5);border-radius:8px;display:flex;transition:color .2s,background .2s}
.promobar-x svg{width:16px;height:16px}
.promobar-x:hover{color:var(--paper);background:rgba(245,242,236,.12)}
@media(prefers-reduced-motion:reduce){
  .promobar-track{animation:none;max-width:100%;overflow-x:auto}
  .pb-run[aria-hidden="true"]{display:none}
}
/* the bar carries the clearance for the fixed nav, so the head only needs its
   own breathing room. Dismiss the bar and the head becomes main's first child,
   at which point it has to clear the nav itself */
.phead.tight{padding-block:clamp(32px,5vh,58px) clamp(30px,5vh,52px)}
.phead.tight:first-child{padding-top:calc(var(--nav) + clamp(32px,5vh,58px))}

/* ---------------- enterprise and startup, kept to a line each ---------------- */
.altplans{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 40px;margin-top:8px;
  padding-top:26px;border-top:1px solid var(--line)}
@media(max-width:760px){.altplans{grid-template-columns:1fr;gap:18px}}
.altplan b{font-size:14.5px;font-weight:800}
.altplan p{color:var(--muted);font-size:13.5px;margin-top:4px;line-height:1.55}

/* generic accent inline link, for a CTA that stays text-sized inside a paragraph */
.acc-link{color:var(--accent);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* ---------------- currency toggle ---------------- */
.cur-toggle-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:24px}
.cur-toggle{display:inline-flex;background:var(--card);border:1px solid var(--line);
  border-radius:999px;padding:4px;box-shadow:var(--shadow-sm)}
.cur-btn{border:none;background:none;padding:8px 18px;border-radius:999px;font-size:13.5px;
  font-weight:700;color:var(--muted);cursor:pointer;font-family:inherit;
  transition:background .2s,color .2s}
.cur-btn.on{background:var(--accent);color:#fff}

/* ---------------- the plan: one card, two halves ----------------
   a single border, radius and shadow around both, with the configurator half
   sitting on paper so it reads as a panel of the same card rather than a
   second card parked beside the first */
.planunit{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);
  gap:clamp(18px,2.4vw,26px);background:var(--card);border:1px solid var(--line);
  border-radius:22px;box-shadow:var(--shadow-md);padding:clamp(18px,2.4vw,24px);
  margin-top:30px}
@media(max-width:860px){.planunit{grid-template-columns:1fr}}
.plancard{padding:clamp(6px,1vw,10px);display:flex;flex-direction:column}
.plancard .tag{font-family:'DM Mono',ui-monospace,monospace;font-size:11.5px;
  color:var(--brass-deep)}
.base-price{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;
  font-size:clamp(44px,5.4vw,58px);line-height:1;color:var(--accent);margin-top:8px}
.base-price small{font-family:'Plus Jakarta Sans',sans-serif;font-style:normal;font-size:14px;
  color:var(--muted);font-weight:600}
.plancard h3{font-size:clamp(19px,2.1vw,22px);font-weight:800;letter-spacing:-.02em;
  margin-top:12px}
.plancard-sub{color:var(--muted);font-size:13.5px;margin-top:6px;line-height:1.6}
.plancard-sub b{color:var(--text)}
.plancard .cta-row{margin-top:20px}
.plancard .fine{margin-top:10px;font-size:11.5px;color:var(--muted);line-height:1.5}
/* its own treatment, not the receipt's: an icon per line, the thing everyone
   else bills for struck through, and the zero as a badge rather than a column */
.incl{padding-top:20px;margin-top:18px;border-top:1px solid var(--line)}
.incl-head{font-family:'Plus Jakarta Sans',sans-serif;font-size:9.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:4px}
.incl-row{display:flex;align-items:center;gap:13px;padding:11px 0}
.incl-ico{flex-shrink:0;width:32px;height:32px;border-radius:10px;background:var(--accent-tint);
  color:var(--accent);display:flex;align-items:center;justify-content:center}
.incl-ico svg{width:18px;height:18px}
.incl-name{flex:1;min-width:0;font-size:13.5px;font-weight:700;letter-spacing:-.005em}
.incl-name s{font-weight:500;font-size:11px;color:var(--muted);white-space:nowrap;
  margin-left:6px;text-decoration-color:rgba(168,130,59,.55);text-decoration-thickness:1px}
.incl-free{flex-shrink:0;font-family:'DM Mono',ui-monospace,monospace;font-size:12px;
  font-weight:500;color:var(--accent);background:var(--accent-tint);padding:4px 11px;
  border-radius:999px}
/* sunk into the card rather than sitting beside it: its own radius and an
   inner shadow, so the controls and their bill read as one instrument */
.calccard{padding:clamp(18px,2.2vw,24px) clamp(18px,2.2vw,24px) 0;
  display:flex;flex-direction:column;background:var(--paper);border-radius:14px;
  box-shadow:inset 0 2px 6px rgba(23,20,37,.09),inset 0 0 0 1px rgba(23,20,37,.05)}

.calccard h4{font-size:11px;font-family:'DM Mono',ui-monospace,monospace;
  text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:16px}
.calc-sliders{display:flex;flex-direction:column;gap:22px}
/* three named lengths rather than a slider: the choice is editorial, not a dial */
.seg-lbl{display:block;font-size:14px;font-weight:700;margin-bottom:10px}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.seg-btn{font-family:inherit;cursor:pointer;background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:10px 6px;text-align:center;transition:border-color .2s,background .2s}
.seg-btn b{display:block;font-family:'DM Mono',ui-monospace,monospace;font-size:13px;
  font-weight:500;color:var(--text)}
.seg-btn i{display:block;font-style:normal;font-size:10.5px;color:var(--muted);margin-top:3px}
.seg-btn:hover{border-color:var(--accent)}
.seg-btn.on{background:var(--accent);border-color:var(--accent)}
.seg-btn.on b,.seg-btn.on i{color:#fff}
.calc-nudge{margin-top:22px;padding:14px 16px;background:var(--brass-tint);
  border:1px solid rgba(168,130,59,.35);border-radius:14px}
.calc-nudge b{font-size:13.5px;font-weight:800}
.calc-nudge p{font-size:13px;color:var(--muted);margin-top:3px;line-height:1.5}
.sr-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.slider-row label{font-size:14px;font-weight:700}
.slider-row input[type=range]{width:100%;margin-top:10px;accent-color:var(--accent)}
/* a stepper beside the slider: the slider is for sweeping, these are for
   landing on the number you actually hire at */
.stepper{display:inline-flex;align-items:center;gap:2px;background:var(--card);
  border:1px solid var(--line);border-radius:9px;padding:2px}
.step{width:22px;height:22px;border:none;background:none;cursor:pointer;border-radius:6px;
  font-family:inherit;font-size:14px;line-height:1;color:var(--muted);
  display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}
.step:hover{background:var(--accent-tint);color:var(--accent)}
.step-val{font-family:'DM Mono',ui-monospace,monospace;font-size:12.5px;font-weight:600;
  color:var(--accent);min-width:38px;text-align:center;white-space:nowrap}
.step-val.plain{min-width:0}

/* the receipt: the lower half of the configurator, set in mono with dot
   leaders so the same card that takes the inputs prints the bill */
.bill-tear{height:0;border-top:1px dashed var(--line);
  margin:16px calc(-1 * clamp(18px,2.2vw,24px))}
.receipt{padding-top:14px;padding-bottom:14px}
.bl-row{display:flex;align-items:baseline;gap:8px;font-family:'DM Mono',ui-monospace,monospace;
  font-size:13px;padding:7px 0;color:var(--text)}
.bl-row i{flex:1;border-bottom:1px dotted var(--line);transform:translateY(-3px)}
.bl-row b{font-weight:500;white-space:nowrap}
.bl-row em{font-style:normal;color:var(--muted);font-size:11.5px;margin-left:6px}
.bl-row.head{font-family:'Plus Jakarta Sans',sans-serif;font-size:9.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;color:var(--muted);padding-bottom:4px}
.bl-row.head i{border-bottom:none}
.bl-row.sum{font-weight:800;border-top:1px solid var(--line);margin-top:4px;padding-top:11px}
.bl-row.sum b{font-weight:800}
/* what you used and what you pay are two different questions; mark where the
   receipt stops answering the first one */
.bl-row.split{border-top:1px dashed var(--line);margin-top:8px;padding-top:12px}
/* usage against what the plan already covers, which is the piece that explains
   why a light month still bills the full plan */
.meter{margin-top:18px}
.meter-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:700}
.meter-num{font-family:'DM Mono',ui-monospace,monospace;letter-spacing:0;text-transform:none;
  font-size:11.5px;font-weight:500}
.meter-num b{color:var(--text);font-weight:700}
.meter-bar{height:6px;border-radius:3px;background:var(--line);margin-top:7px;overflow:hidden}
.meter-bar i{display:block;height:100%;border-radius:3px;background:var(--accent);
  transition:width .3s ease}
.meter-bar i.over{background:var(--brass)}
.meter-note{margin-top:7px;font-size:11.5px;color:var(--muted);line-height:1.5}
.roi{margin-top:18px;padding:13px 15px;background:var(--brass-tint);
  border:1px solid rgba(168,130,59,.32);border-radius:12px;
  font-size:12.5px;line-height:1.55;color:var(--muted)}
.roi b{color:var(--brass-deep);font-weight:800}
.roi span{color:var(--text);font-weight:700}
/* what you actually pay, bled to the card edges and larger than the price on
   the left, so the final figure is the one the eye lands on */
.bill-total{margin:auto calc(-1 * clamp(20px,2.4vw,26px)) 0;padding:15px clamp(20px,2.4vw,26px);
  background:var(--accent);color:#fff;display:flex;justify-content:space-between;
  align-items:center;gap:12px;border-radius:0 0 19px 19px}
.bill-total span{font-size:12.5px;font-weight:700}
.bill-total b{font-family:'DM Mono',ui-monospace,monospace;font-weight:500;
  font-size:clamp(20px,2.4vw,25px);white-space:nowrap}
.calc-foot{margin-top:18px;font-size:12.5px;color:var(--muted)}
@media(max-width:560px){
  .bl-row{font-size:12px}
  .bl-row em{display:block;margin-left:0}
}

/* closing CTA band */
.closing{text-align:center;padding-block:clamp(50px,7vh,84px)}
.closing .fine{margin-top:16px;color:var(--muted);font-size:14px}
.closing .cta-row{display:flex;gap:14px;justify-content:center;margin-top:28px;flex-wrap:wrap}
.closing .cta-row .btn{width:auto;min-width:220px}