/* ==========================================================================
   CLOCKLESS — THE CHALLENGER · FULL SITE
   A manifesto against enterprise software bloat, in five filings.
   One theme. Chalk, ink, red. Type is the imagery.
   ========================================================================== */

:root{
  --chalk:#F4F5F2;
  --chalk-deep:#EBECE8;
  --paper:#ECEADF;       /* v6 variance: carbon-copy ground for .doc ledgers */
  --paper-deep:#E1DECE;
  --ink:#101114;
  --ink-soft:#26272B;
  --red:#D92323;
  --red-deep:#B81C1C;
  --red-onink:#FF6B6B;   /* red lifted for small text on the ink slabs — 6.7:1 */
  --grey:#625E55;        /* single warm grey for captions — 5.6:1 on chalk */
  --grey-on-ink:#A9A499; /* the same grey, lifted for the ink slabs */
  --hair:1px solid var(--ink);
  --hair-soft:1px solid rgba(16,17,20,.28);
  --hair-onink:1px solid rgba(244,245,242,.35);
  --hair-onink-soft:1px solid rgba(244,245,242,.16);

  --disp:'Arial Narrow','Helvetica Neue Condensed','Avenir Next Condensed','Bahnschrift SemiCondensed','Roboto Condensed',Impact,Arial,sans-serif;
  --body:'Helvetica Neue',Helvetica,Arial,'Segoe UI',sans-serif;
  --mono:ui-monospace,'Cascadia Mono',Consolas,'SF Mono',Menlo,monospace;

  --pad:clamp(20px,4.5vw,64px);
  --max:1360px;
}

/* [hidden] guard — form errors and dynamically hidden elements rely on the hidden attribute */
[hidden]{display:none !important}

/* production shell: the comp's host page reset body; the real document must too */
html,body{margin:0;padding:0;background:var(--chalk);}

html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
}

/* Root container — committed single theme, explicit colours, host-proof */
.wf-root{
  background:var(--chalk);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.55;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
.wf-root *,.wf-root *::before,.wf-root *::after{box-sizing:border-box;margin:0;padding:0;}

.wf-root a{color:inherit;text-decoration:none;}
.wf-root img,.wf-root svg{max-width:100%;display:block;}
.wf-root :where(button){font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
.wf-root input{font:inherit;}
.wf-root main{display:block;}

.wf-root :focus-visible{
  outline:2px solid var(--red);
  outline-offset:2px;
}

/* ---- shared primitives ------------------------------------------------- */
.shell{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad);}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

.u-label{
  font-family:var(--body);
  font-size:11px;
  letter-spacing:0;
  text-transform:none;
  color:var(--grey);
}
.u-label--red{color:var(--red-deep);}
.u-label--onink{color:var(--grey-on-ink);}
.sec--slab .u-label--red,.sec--final .u-label--red{color:var(--red-onink);}

.h-display{
  font-family:var(--disp);
  font-stretch:normal;
  font-weight:700;
  text-transform:none;
  line-height:.92;
  letter-spacing:-.005em;
  text-wrap:balance;
}
.u{box-shadow:inset 0 -.09em var(--red);}

.sec{
  padding-block:clamp(72px,9vw,136px);
  border-top:var(--hair);
  scroll-margin-top:76px;
}
.sec-head{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-bottom:clamp(36px,5vw,64px);
}
.sec-head .h-display{font-size:clamp(34px,5.2vw,72px);max-width:22ch;}
.sec-head p{max-width:62ch;color:var(--grey);font-size:clamp(15px,1.2vw,18px);}
.sec-head p a{color:var(--ink);box-shadow:inset 0 -1px var(--red);}
.sec-head p a:hover{color:var(--red-deep);}
.sec--slab .sec-head p{color:var(--grey-on-ink);}
.sec-no{
  display:flex;align-items:baseline;gap:14px;
}
.sec-no::after{content:"";flex:1;border-top:var(--hair-soft);transform:translateY(-3px);}
.sec--slab .sec-no::after{border-top:var(--hair-onink);}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--body);
  font-size:12px;letter-spacing:0;text-transform:none;
  padding:15px 26px;
  border:var(--hair);
  transition:background .15s ease,color .15s ease;
  white-space:nowrap;
}
.btn--red{background:var(--red);border-color:var(--red);color:var(--chalk);}
.btn--red:hover{background:var(--red-deep);border-color:var(--red-deep);}
.btn--ghost{background:transparent;color:var(--ink);}
.btn--ghost:hover{background:var(--ink);color:var(--chalk);}
.btn--ghost-onink{background:transparent;color:var(--chalk);border-color:var(--chalk);}
.btn--ghost-onink:hover{background:var(--chalk);color:var(--ink);}

.mono-fig{font-family:var(--body);font-variant-numeric:tabular-nums;}

/* ---- rubber stamp ------------------------------------------------------ */
.stamp{
  display:inline-block;
  font-family:var(--disp);font-stretch:normal;font-weight:700;
  text-transform:none;letter-spacing:.06em;
  color:var(--red);
  border:3px solid var(--red);
  padding:.28em .55em;
  line-height:1;
  transform:rotate(-4deg);
  -webkit-mask-image:linear-gradient(115deg,#000 78%,rgba(0,0,0,.55) 84%,#000 92%);
          mask-image:linear-gradient(115deg,#000 78%,rgba(0,0,0,.55) 84%,#000 92%);
}
.stamp--sm{font-size:12px;border-width:2px;letter-spacing:.1em;color:var(--red-deep);border-color:var(--red-deep);}
.stamp--onink{color:var(--red-onink);border-color:var(--red-onink);}

/* ---- ink slab section variant ------------------------------------------ */
.sec--slab{background:var(--ink);color:var(--chalk);border-top:0;}
.sec--slab + .sec--final{border-top:1px solid rgba(244,245,242,.22);}

/* ==========================================================================
   NAV — shared, sticky, outside the views
   ========================================================================== */
.nav{
  position:sticky;top:0;z-index:60;
  background:var(--chalk);
  border-bottom:var(--hair);
}
.nav-in{
  max-width:var(--max);margin-inline:auto;padding-inline:var(--pad);
  display:flex;flex-wrap:wrap;align-items:center;gap:0 24px;
  min-height:64px;
}
.nav-mark{
  font-family:var(--disp);font-stretch:normal;font-weight:700;
  font-size:24px;text-transform:none;letter-spacing:.01em;
  display:flex;align-items:center;gap:8px;
  margin-right:auto;
  padding-block:13px;
}
.mark-bars{fill:var(--red);flex:none;}
.mark-clock{flex:none;}
.mark-clock .hand-b{fill:var(--red-onink);}
.nav-mark .mark-clock .hand-b{fill:var(--red);}
.nav-links{
  display:flex;gap:22px;
}
.nav-links a{
  font-family:var(--body);font-size:11px;letter-spacing:0;text-transform:none;
  color:var(--grey);
  padding:6px 2px;
  border-bottom:2px solid transparent;
  white-space:nowrap;
}
.nav-links a:hover{color:var(--ink);border-bottom-color:var(--red);}
.nav-links a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--red);}
.nav-ctas{display:flex;gap:10px;padding-block:11px;}
.nav-ctas .btn{padding:10px 16px;font-size:11px;}
@media (max-width:880px){
  .nav-links{
    order:3;flex-basis:100%;
    overflow-x:auto;
    gap:18px;
    padding-bottom:10px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .nav-links::-webkit-scrollbar{display:none;}
  /* right-edge fade cue while more nav items hide off-screen (class via exhibits.js) */
  .nav-links.has-more{
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 52px),rgba(0,0,0,0));
            mask-image:linear-gradient(90deg,#000 calc(100% - 52px),rgba(0,0,0,0));
  }
  .nav-mark{padding-block:9px;}
  .nav-ctas{padding-block:7px;}
  .sec{scroll-margin-top:118px;}
}
@media (max-width:420px){
  .nav-ctas .btn{padding:9px 12px;letter-spacing:.08em;}
}

/* ==========================================================================
   HERO — the typographic slab (home)
   ========================================================================== */
.hero{
  min-height:calc(100vh - 65px); /* real nav height: 64px row + 1px hairline */
  min-height:calc(100svh - 65px);
  display:flex;flex-direction:column;
}
@media (max-width:880px){
  .hero{min-height:calc(100svh - 97px);} /* two-row nav */
}
.hero-in{
  max-width:var(--max);margin-inline:auto;padding-inline:var(--pad);
  width:100%;
  flex:1;
  display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(24px,2.8vw,36px);
  gap:clamp(16px,2.2vw,28px);
}
.hero-eyebrow{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.hero-eyebrow .rule{flex:1;min-width:60px;border-top:var(--hair);}

/* one h1 carries both halves: the struck claim (<s>) and the payoff */
.hero-h1{display:flex;flex-direction:column;gap:clamp(16px,2.2vw,28px);}
.hero-their{
  display:block;
  font-size:clamp(26px,6.6vw,88px);
  color:var(--ink);
}
.hero-their s{display:block;text-decoration:none;}
.hero-their .line{
  display:block;position:relative;width:fit-content;max-width:100%;
  padding-right:.06em;
}
.hero-their .line i{
  position:absolute;left:-1%;right:-1%;top:50%;
  height:.085em;margin-top:-.042em;
  background:var(--red);
  transform:scaleX(0);transform-origin:left center;
  display:block;font-style:normal;
}
.wf-loaded .hero-their .line--1 i{animation:strike .3s cubic-bezier(.7,0,.2,1) .2s forwards;}
.wf-loaded .hero-their .line--2 i{animation:strike .3s cubic-bezier(.7,0,.2,1) .35s forwards;}
.wf-loaded .hero-their .line--3 i{animation:strike .3s cubic-bezier(.7,0,.2,1) .5s forwards;}

.hero-ours{
  display:block;
  font-size:clamp(40px,8.4vw,108px);
  color:var(--ink);
}
.wf-loaded .hero-ours{
  opacity:0;
  animation:slam .32s cubic-bezier(.2,1.1,.3,1) .55s forwards;
}

@keyframes strike{to{transform:scaleX(1);}}
@keyframes slam{
  0%{opacity:0;transform:scale(1.18) rotate(-1.2deg);}
  60%{opacity:1;transform:scale(.985) rotate(0deg);}
  100%{opacity:1;transform:scale(1);}
}

.hero-foot{
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:clamp(22px,4vw,56px);
}
.hero-sub{
  max-width:54ch;
  font-size:clamp(15px,1.25vw,18px);
  color:var(--ink-soft);
}
.hero-sub strong{font-weight:700;}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;}
.hero-stampbox{margin-left:auto;}
@media (max-width:760px){
  .hero-stampbox{margin-left:0;}
}

.hero-ticker{
  border-top:var(--hair);
  font-family:var(--body);font-size:11px;letter-spacing:0;text-transform:none;
  color:var(--grey);
}
.hero-ticker .shell{
  display:flex;flex-wrap:wrap;gap:8px 34px;
  padding-block:14px;
}
.hero-ticker b{color:var(--ink);font-weight:400;}
.hero-ticker .red{color:var(--red-deep);}

/* ==========================================================================
   INTERIOR PAGE HERO — the filing head on each routed page
   ========================================================================== */
.page-hero{
  padding-block:clamp(56px,7vw,108px);
}
.page-hero .hero-eyebrow{margin-bottom:clamp(24px,3.4vw,40px);}
.page-hero h1{
  font-size:clamp(46px,9vw,132px);
}
.page-hero h1 .u{box-shadow:inset 0 -.08em var(--red);}
.page-hero .lede{
  max-width:60ch;color:var(--ink-soft);
  font-size:clamp(15px,1.3vw,19px);
  margin-top:clamp(20px,2.6vw,30px);
}
.page-hero .lede b{font-weight:700;}
.page-hero .kill{
  text-decoration:line-through;text-decoration-color:var(--red);text-decoration-thickness:2px;
  color:var(--grey);
}

/* ==========================================================================
   PROOF STRIP + INTEGRATION MARKS
   ========================================================================== */
.proof{border-top:var(--hair);}
.proof-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
}
.proof-cell{
  border-right:var(--hair-soft);
  padding:clamp(20px,2.6vw,36px) clamp(14px,1.8vw,28px);
  display:flex;flex-direction:column;gap:8px;
  min-width:0;
}
.proof-cell:last-child{border-right:0;}
.proof-num{
  font-family:var(--disp);font-stretch:normal;font-weight:700;
  font-size:clamp(30px,3.6vw,52px);line-height:.95;
  font-variant-numeric:tabular-nums;
}
/* one rule, five-for-five: red marks the differentiator word in the caption only */
.proof-cell .u-label em{font-style:normal;color:var(--red-deep);}
.proof-cell .u-label{letter-spacing:.12em;}
@media (max-width:900px){
  .proof-grid{grid-template-columns:repeat(2,1fr);}
  .proof-cell{border-bottom:var(--hair-soft);}
  .proof-cell:nth-child(2n){border-right:0;}
  .proof-cell:nth-child(5){border-bottom:0;border-right:0;grid-column:1/-1;}
  .proof-cell:nth-child(3),.proof-cell:nth-child(4){border-bottom:0;}
}

.marks{
  border-top:var(--hair-soft);
}
.marks .shell{
  display:flex;flex-wrap:wrap;align-items:center;gap:16px clamp(24px,4vw,56px);
  padding-block:20px;
}
.marks .u-label{margin-right:auto;}
.mark{color:var(--grey);white-space:nowrap;line-height:1;}
.mark--m365{font-family:'Segoe UI','Helvetica Neue',Arial,sans-serif;font-weight:600;font-size:17px;letter-spacing:-.01em;}
.mark--xero{font-family:'Helvetica Neue',Arial,sans-serif;font-weight:700;font-size:19px;letter-spacing:-.03em;text-transform:lowercase;}
.mark--podium{font-family:'Helvetica Neue',Arial,sans-serif;font-weight:400;font-size:17px;letter-spacing:.22em;text-transform:none;}
.mark--xio{font-family:var(--body);font-size:15px;letter-spacing:0;}
.mark--api{font-family:var(--body);font-size:13px;letter-spacing:0;text-transform:none;border:1px solid var(--grey);padding:3px 8px;}
@media (max-width:760px){
  .marks .u-label{width:100%;margin-right:0;}
}

/* ==========================================================================
   THE RECEIPTS — ledger (home signature interactive)
   ========================================================================== */
.ledger{
  border:var(--hair);
  background:var(--chalk);
}
.ledger-head{
  display:flex;flex-wrap:wrap;gap:8px 24px;align-items:baseline;
  padding:18px clamp(16px,2.4vw,28px);
  border-bottom:var(--hair);
}
.ledger-head .doc-title{
  font-family:var(--body);font-size:12px;letter-spacing:0;text-transform:none;
}
.ledger-head .doc-meta{
  font-family:var(--body);font-size:11px;color:var(--grey);letter-spacing:0;
  margin-left:auto;
}
.ledger-cols{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,1fr) 48px;
  gap:0 18px;
  padding:10px clamp(16px,2.4vw,28px);
  border-bottom:var(--hair);
  background:var(--chalk-deep);
}
.ledger-cols span{
  font-family:var(--body);font-size:10px;letter-spacing:0;text-transform:none;color:var(--grey);
}
.ledger-cols span:nth-child(3){color:var(--red-deep);}

.r-item{border-bottom:var(--hair-soft);}
.r-item:last-of-type{border-bottom:0;}
.r-row{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,1fr) 48px;
  gap:6px 18px;
  align-items:center;
  padding:18px clamp(16px,2.4vw,28px);
  text-align:left;
  transition:background .12s ease;
}
.r-row:hover{background:var(--chalk-deep);}
.r-name{
  font-family:var(--disp);font-stretch:normal;font-weight:700;
  font-size:clamp(17px,1.7vw,23px);text-transform:none;line-height:1.02;
}
.r-legacy,.r-ours{
  font-family:var(--body);font-size:clamp(11px,1vw,13px);letter-spacing:0;
  font-variant-numeric:tabular-nums;
  line-height:1.4;
}
.r-legacy{color:var(--grey);}
.r-legacy s{text-decoration:line-through;text-decoration-color:var(--red);text-decoration-thickness:2px;}
.r-ours{color:var(--ink);}
.r-ours b{color:var(--red-deep);font-weight:400;}
.r-flip{
  width:30px;height:30px;justify-self:end;
  border:var(--hair);
  display:flex;align-items:center;justify-content:center;
  transition:transform .25s ease,background .15s ease;
}
.r-flip svg{width:12px;height:12px;stroke:currentColor;}
.r-row[aria-expanded="true"] .r-flip{background:var(--ink);color:var(--chalk);transform:rotate(45deg);}

.r-evidence{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .32s cubic-bezier(.5,0,.2,1);
}
.r-evidence>div{overflow:hidden;}
.r-item.open .r-evidence{grid-template-rows:1fr;}
.r-evd-in{
  margin:0 clamp(16px,2.4vw,28px) 22px;
  border-left:3px solid var(--red);
  padding:14px 18px;
  background:var(--chalk-deep);
  display:flex;flex-direction:column;gap:10px;
}
.r-evd-in p{font-size:14px;max-width:72ch;color:var(--ink-soft);}
.r-evd-in p b{color:var(--ink);}
.r-evd-in .evd-tag{
  font-family:var(--body);font-size:10px;letter-spacing:0;text-transform:none;color:var(--red-deep);
}
.r-evd-in .evd-fig{
  font-family:var(--body);font-size:12px;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.r-evd-in a{box-shadow:inset 0 -1px var(--red);}

.ledger-total{
  display:flex;flex-wrap:wrap;gap:10px 24px;align-items:baseline;
  padding:18px clamp(16px,2.4vw,28px);
  border-top:var(--hair);
  background:var(--ink);color:var(--chalk);
}
.ledger-total .t-label{font-family:var(--body);font-size:11px;letter-spacing:0;text-transform:none;color:var(--grey-on-ink);}
.ledger-total .t-val{
  font-family:var(--disp);font-stretch:normal;font-weight:700;text-transform:none;
  font-size:clamp(18px,2vw,26px);margin-left:auto;text-align:right;
}
@media (max-width:820px){
  .ledger-cols{display:none;}
  .r-row{grid-template-columns:minmax(0,1fr) 40px;grid-template-areas:"name flip" "legacy flip" "ours flip";}
  .r-name{grid-area:name;}
  .r-legacy{grid-area:legacy;}
  .r-ours{grid-area:ours;}
  .r-flip{grid-area:flip;align-self:center;}
  .r-legacy::before{content:"THEM — ";color:var(--grey);font-size:10px;letter-spacing:.14em;}
  .r-ours::before{content:"US — ";color:var(--red-deep);font-size:10px;letter-spacing:.14em;}
  .ledger-total .t-val{margin-left:0;text-align:left;}
}

/* ==========================================================================
   THE BEATS — numbered claims (home), reused article grid
   ========================================================================== */
.demands{display:flex;flex-direction:column;}
.demand{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr) minmax(0,1.1fr);
  gap:clamp(20px,3vw,48px);
  padding-block:clamp(36px,4.6vw,64px);
  border-top:var(--hair-soft);
}
.demand:first-child{border-top:0;padding-top:0;}
.demand-no{
  display:flex;flex-direction:column;gap:12px;align-items:flex-start;
}
.demand-no .big{
  font-family:var(--disp);font-stretch:normal;font-weight:700;
  font-size:clamp(64px,8vw,132px);line-height:.8;color:var(--red);
  font-variant-numeric:tabular-nums;
}
.demand-body{display:flex;flex-direction:column;gap:16px;min-width:0;}
.demand-body h3{
  font-family:var(--disp);font-stretch:normal;font-weight:700;text-transform:none;
  font-size:clamp(26px,3.2vw,44px);line-height:.95;text-wrap:balance;
}
.demand-body p{max-width:60ch;color:var(--ink-soft);font-size:clamp(14px,1.15vw,17px);}
.demand-body p b{font-weight:700;color:var(--ink);}
.demand-body .kill{
  text-decoration:line-through;text-decoration-color:var(--red);text-decoration-thickness:2px;
  color:var(--grey);
}
.demands>.exh{margin-top:clamp(30px,4vw,52px);}
.demand-links{display:flex;flex-wrap:wrap;gap:10px 24px;}
.demand-links a{
  font-family:var(--body);font-size:11px;letter-spacing:0;text-transform:none;
  color:var(--ink);
  box-shadow:inset 0 -2px var(--red);
  padding:9px 0 2px;             /* ≥24px touch target, underline stays on the text */
  margin-top:-9px;
}
.demand-links a:hover{color:var(--red-deep);}
.demand-spec{
  border:var(--hair);
  display:flex;flex-direction:column;
  align-self:start;
  min-width:0;
}
.demand-spec h4{
  font-family:var(--body);font-size:10px;letter-spacing:0;text-transform:none;
  padding:10px 16px;border-bottom:var(--hair);background:var(--ink);color:var(--chalk);
  font-weight:400;
}
.demand-spec ul{list-style:none;}
.demand-spec li{
  padding:11px 16px;
  border-bottom:var(--hair-soft);
  font-size:13px;line-height:1.45;color:var(--ink-soft);
  display:flex;gap:10px;
}
.demand-spec li:last-child{border-bottom:0;}
.demand-spec li::before{content:"";flex:none;width:7px;height:7px;background:var(--red);margin-top:6px;}
.demand-spec li b{font-family:var(--body);font-size:11.5px;font-weight:400;color:var(--ink);font-variant-numeric:tabular-nums;}
.demand-spec li .ix{font-family:var(--body);font-size:10px;color:var(--red-deep);flex:none;padding-top:3px;letter-spacing:0;}
.demand-spec--chain li::before{display:none;}
@media (max-width:980px){
  .demand{grid-template-columns:1fr;gap:20px;}
  .demand-no{flex-direction:row;align-items:baseline;gap:18px;}
  .demand-no .big{font-size:clamp(52px,10vw,84px);}
}

/* ==========================================================================
   ORDER SLIP — the "DO THIS FOR ME:" typed work order
   ========================================================================== */
.order{
  border:var(--hair);
  background:var(--chalk);
}
.order-head{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 20px;
  padding:11px clamp(14px,2vw,20px);
  border-bottom:var(--hair);
  background:var(--ink);color:var(--chalk);
  font-family:var(--body);font-size:10px;letter-spacing:0;text-transform:none;
}
.order-head .no{margin-left:auto;color:var(--grey-on-ink);}
.order-cmd{
  padding:clamp(20px,3vw,34px) clamp(16px,2.4vw,28px);
  display:flex;flex-direction:column;gap:12px;
  border-bottom:var(--hair);
}
.order-cmd .say{
  font-family:var(--body);font-size:11px;letter-spacing:0;text-transform:none;color:var(--red-deep);
}
.order-cmd .typed{
  font-family:var(--disp);font-stretch:normal;font-weight:700;
  font-size:clamp(21px,3vw,38px);text-transform:none;line-height:1.02;
  text-wrap:balance;
}
.caret{
  display:inline-block;width:.5ch;height:.85em;
  background:var(--red);
  margin-left:.12em;vertical-align:-.08em;
  animation:blink 1.1s steps(1) infinite;
}
@keyframes blink{0%,55%{opacity:1;}56%,100%{opacity:0;}}
.order-steps{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
}
.order-step{
  padding:16px clamp(14px,1.8vw,20px) 18px;
  border-right:var(--hair-soft);
  display:flex;flex-direction:column;gap:7px;
  min-width:0;
}
.order-step:last-child{border-right:0;}
.order-step .n{font-family:var(--body);font-size:10px;color:var(--red-deep);letter-spacing:0;}
.order-step h4{
  font-family:var(--disp);font-stretch:normal;font-weight:700;
  font-size:17px;text-transform:none;line-height:1;
}
.order-step p{font-size:12.5px;color:var(--grey);line-height:1.45;}
.order-foot{
  border-top:var(--hair);
  padding:12px clamp(14px,2vw,20px);
  font-family:var(--body);font-size:11px;letter-spacing:0;color:var(--grey);
  display:flex;flex-wrap:wrap;gap:6px 26px;
}
.order-foot b{color:var(--ink);font-weight:400;}
@media (max-width:760px){
  .order-steps{grid-template-columns:repeat(2,minmax(0,1fr));}
  .order-step{border-bottom:var(--hair-soft);}
  .order-step:nth-child(2n){border-right:0;}
  .order-step:nth-child(n+3){border-bottom:0;}
}

/* ==========================================================================
   ROSTER — the union-card wall (agents)
   ========================================================================== */
.roster{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,2vw,24px);
}
.rcard{
  border:var(--hair);background:var(--chalk);
  display:grid;
  /* six aligned rows across the three cards: top · name · role · scope · briefed · guardrail
     (subgrid where supported; graceful auto-rows fallback elsewhere) */
  grid-template-rows:subgrid;
  grid-row:span 6;
}
.rcard-top{
  display:flex;align-items:center;gap:10px;
  padding:11px 16px;
  border-bottom:var(--hair);
  font-family:var(--body);font-size:10px;letter-spacing:0;text-transform:none;color:var(--grey);
}
.rcard-top .stamp--sm{margin-left:auto;transform:rotate(-3deg);font-size:10px;}
.rcard-name{
  font-family:var(--disp);font-stretch:normal;font-weight:700;
  font-size:clamp(32px,3.6vw,46px);text-transform:none;line-height:.88;
  padding:18px 16px 4px;
}
.rcard-role{
  font-family:var(--body);font-size:10px;letter-spacing:0;text-transform:none;color:var(--red-deep);
  padding:0 16px 14px;
}
.rcard dl{display:contents;}
.rcard .fld{
  display:grid;grid-template-columns:92px minmax(0,1fr);gap:12px;
  padding:10px 16px;
  border-top:var(--hair-soft);
}
.rcard dt{
  font-family:var(--body);font-size:10px;letter-spacing:0;text-transform:none;color:var(--grey);
  padding-top:3px;
}
.rcard dd{font-size:13px;color:var(--ink-soft);line-height:1.45;}
.rcard dd.duty{font-family:var(--body);font-size:12px;color:var(--ink);line-height:1.5;}
.rcard dd.duty b{color:var(--red-deep);font-weight:400;}
@media (max-width:980px){
  .roster{grid-template-columns:1fr;}
}

/* ==========================================================================
   AFFIDAVIT — sworn clauses on the ink slab (agents trust half)
   ========================================================================== */
.affi{border:var(--hair-onink);}
.affi-row{
  display:grid;
  grid-template-columns:76px minmax(0,.85fr) minmax(0,1.6fr);
  gap:10px 26px;
  padding:20px clamp(14px,2.4vw,26px);
  border-bottom:var(--hair-onink-soft);
  align-items:start;
}
.affi-row:last-child{border-bottom:0;}
.affi-no{
  font-family:var(--body);font-size:11px;letter-spacing:0;color:var(--red-onink);
  font-variant-numeric:tabular-nums;padding-top:4px;
}
.affi-t{
  font-family:var(--disp);font-stretch:normal;font-weight:700;text-transform:none;
  font-size:clamp(20px,2.3vw,32px);line-height:.95;color:var(--chalk);
}
.affi-b{font-size:14px;color:var(--grey-on-ink);line-height:1.55;max-width:62ch;}
.affi-b b{color:var(--chalk);font-weight:700;}
.affi-row--hot{background:rgba(217,35,35,.12);}
.affi-row--hot .affi-t{color:var(--red-onink);}
.affi-sig{
  margin-top:26px;
  display:flex;flex-wrap:wrap;align-items:center;gap:16px 44px;
  font-family:var(--body);font-size:11px;letter-spacing:0;text-transform:none;color:var(--grey-on-ink);
}
.affi-sig .line{flex:1;min-width:120px;border-top:1px solid var(--grey-on-ink);transform:translateY(6px);}
@media (max-width:820px){
  .affi-row{grid-template-columns:minmax(0,1fr);gap:6px;}
}

/* ---- cross-cutting row / step strips ------------------------------------ */
.xcut{display:grid;border:var(--hair);}
.xcut-cell{
  padding:clamp(18px,2.4vw,30px);
  border-right:var(--hair-soft);
  display:flex;flex-direction:column;gap:10px;
  min-width:0;
}
.xcut-cell .u-label{letter-spacing:.14em;}
.xcut-cell h3{
  font-family:var(--disp);font-stretch:normal;font-weight:700;text-transform:none;
  font-size:clamp(20px,2vw,28px);line-height:.95;
}
.xcut-cell p{font-size:13px;color:var(--ink-soft);line-height:1.5;}
.xcut-cell p b{color:var(--ink);}
.xcut-cap{
  grid-column:1/-1;
  border-top:var(--hair);
  padding:13px clamp(18px,2.4vw,30px);
  font-family:var(--body);font-size:11px;letter-spacing:0;text-transform:none;color:var(--grey);
}
.xcut-cap b{color:var(--red-deep);font-weight:400;}
.xcut--two{grid-template-columns:repeat(2,minmax(0,1fr));}
.xcut--two .xcut-cell:nth-child(2n){border-right:0;}
.xcut--three{grid-template-columns:repeat(3,minmax(0,1fr));}
.xcut--three .xcut-cell:nth-child(3n){border-right:0;}
@media (max-width:640px){
  .xcut--two,.xcut--three{grid-template-columns:1fr;}
  .xcut--two .xcut-cell,.xcut--three .xcut-cell{border-right:0;border-bottom:var(--hair-soft);}
  .xcut--two .xcut-cell:last-child,.xcut--three .xcut-cell:last-child{border-bottom:0;}
  .xcut-cap{border-top:0;}
}

/* ==========================================================================
   SIGNED CLAUSE — custom modules are YOUR IP (modules)
   ========================================================================== */
.clause{
  border:var(--hair);
  background:var(--chalk-deep);
  padding:clamp(26px,4.4vw,56px);
  position:relative;
  max-width:1020px;
}
.clause .cno{
  font-family:var(--body);font-size:11px;letter-spacing:0;text-transform:none;color:var(--red-deep);
}
.clause h3{
  font-family:var(--disp);font-stretch:normal;font-weight:700;text-transform:none;
  font-size:clamp(30px,4.6vw,64px);line-height:.9;
  margin:14px 0 20px;
  text-wrap:balance;
}
.clause p{max-width:64ch;font-size:clamp(14px,1.2vw,17px);color:var(--ink-soft);}
.clause p+p{margin-top:12px;}
.clause p b{color:var(--ink);}
.clause .pull{
  font-family:var(--disp);font-stretch:normal;font-weight:700;text-transform:none;
  font-size:clamp(22px,3vw,40px);line-height:1;
  margin-top:26px;max-width:none;color:var(--ink);
}
.clause-sig{
  margin-top:30px;padding-top:20px;
  border-top:var(--hair);
  display:flex;flex-wrap:wrap;align-items:center;gap:16px 44px;
}
.clause-sig .sig-line{
  font-family:var(--body);font-size:11px;letter-spacing:0;text-transform:none;color:var(--grey);
}
.clause-sig .line{flex:1;min-width:110px;border-top:1px solid var(--grey);transform:translateY(6px);}

/* ==========================================================================
   DOC — ledger paper (token bill, tailoring lines)
   ========================================================================== */
.doc{border:var(--hair);background:var(--chalk);}
.doc-head{
  display:flex;flex-wrap:wrap;gap:8px 24px;align-items:baseline;
  padding:16px clamp(14px,2.4vw,26px);
  border-bottom:var(--hair);
}
.doc-title{font-family:var(--body);font-size:12px;letter-spacing:0;text-transform:none;}
.doc-meta{font-family:var(--body);font-size:10px;color:var(--grey);letter-spacing:0;margin-left:auto;}
.doc-cols{
  display:grid;grid-template-columns:minmax(0,1.8fr) minmax(0,1fr) 110px;
  gap:0 16px;
  padding:9px clamp(14px,2.4vw,26px);
  border-bottom:var(--hair);
  background:var(--chalk-deep);
}
.doc-cols span{font-family:var(--body);font-size:10px;letter-spacing:0;text-transform:none;color:var(--grey);}
.doc-cols span:last-child{text-align:right;}
.doc-row{
  display:grid;grid-template-columns:minmax(0,1.8fr) minmax(0,1fr) 110px;
  gap:2px 16px;
  padding:12px clamp(14px,2.4vw,26px);
  border-bottom:var(--hair-soft);
  font-family:var(--body);font-size:12px;
  font-variant-numeric:tabular-nums;
  align-items:baseline;
}
.doc-row:last-of-type{border-bottom:0;}
.doc-row .d1{color:var(--ink);letter-spacing:.02em;}
.doc-row .d1 .sub{display:block;font-size:10px;color:var(--grey);letter-spacing:.06em;margin-top:2px;}
.doc-row .d2{color:var(--grey);font-size:11px;letter-spacing:.04em;}
.doc-row .d3{text-align:right;color:var(--ink);white-space:nowrap;}
.doc-row .d3 b{color:var(--red-deep);font-weight:400;}
.doc-row--note{background:var(--chalk-deep);}
.doc-row--note .d1{color:var(--grey);}
.doc-total{
  display:flex;flex-wrap:wrap;gap:8px 24px;align-items:baseline;
  padding:15px clamp(14px,2.4vw,26px);
  border-top:var(--hair);
  background:var(--ink);color:var(--chalk);
  font-family:var(--body);font-size:12px;
  font-variant-numeric:tabular-nums;
}
.doc-total .t-label{font-size:10px;letter-spacing:.16em;text-transform:none;color:var(--grey-on-ink);}
.doc-total .t-val{margin-left:auto;text-align:right;}
.doc-total .t-val b{color:var(--red-onink);font-weight:400;}
.doc-foot{
  padding:14px clamp(14px,2.4vw,26px);
  border-top:var(--hair-soft);
  display:flex;flex-wrap:wrap;gap:8px 28px;
  font-family:var(--body);font-size:11px;letter-spacing:0;color:var(--grey);
}
.doc-foot b{color:var(--ink);font-weight:400;}
@media (max-width:640px){
  .doc-cols{display:none;}
  .doc-row{grid-template-columns:minmax(0,1fr) auto;}
  .doc-row .d2{grid-column:1/-1;order:3;}
}

/* ==========================================================================
   LOOP — numbered alteration spec (how)
   ========================================================================== */
.loop{display:flex;flex-direction:column;border-top:var(--hair);}
.loop-step{
  display:grid;grid-template-columns:120px minmax(0,1fr);
  gap:12px 30px;
  padding:22px 4px;
  border-bottom:var(--hair-soft);
  align-items:start;
}
.loop-step .n{
  font-family:var(--disp);font-stretch:normal;font-weight:700;
  font-size:clamp(38px,4.8vw,66px);line-height:.8;color:var(--red);
  font-variant-numeric:tabular-nums;
}
.loop-body{display:flex;flex-direction:column;gap:8px;min-width:0;}
.loop-body h3{
  font-family:var(--disp);font-stretch:normal;font-weight:700;text-transform:none;
  font-size:clamp(21px,2.6vw,34px);line-height:.95;
}
.loop-body h3 .u{box-shadow:inset 0 -.12em var(--red);}
.loop-body p{font-size:14px;color:var(--ink-soft);max-width:66ch;}
.loop-body p b{color:var(--ink);}
.loop-foot{
  padding:18px 4px;
  display:flex;flex-wrap:wrap;gap:12px 30px;align-items:center;
  font-family:var(--body);font-size:11px;letter-spacing:0;text-transform:none;color:var(--grey);
}
.loop-foot b{color:var(--ink);font-weight:400;}
@media (max-width:680px){
  .loop-step{grid-template-columns:64px minmax(0,1fr);gap:10px 18px;}
}

/* ==========================================================================
   ROUTING TABLE (agents + how)
   ========================================================================== */
.rt{border:var(--hair);}
.rt-row{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1.4fr);
  gap:6px 20px;
  padding:14px clamp(14px,2.4vw,24px);
  border-bottom:var(--hair-soft);
  align-items:baseline;
}
.rt-row:last-child{border-bottom:0;}
.rt-row--head{
  background:var(--chalk-deep);
  border-bottom:var(--hair);
  padding-block:9px;
}
.rt-row--head span{font-family:var(--body);font-size:10px;letter-spacing:0;text-transform:none;color:var(--grey);}
.rt-row .cls{
  font-family:var(--disp);font-stretch:normal;font-weight:700;text-transform:none;
  font-size:clamp(16px,1.8vw,22px);line-height:1;
}
.rt-row .mdl{font-family:var(--body);font-size:12px;color:var(--ink);letter-spacing:0;}
.rt-row .mdl b{color:var(--red-deep);font-weight:400;}
.rt-row .why{font-size:13px;color:var(--grey);line-height:1.45;}
@media (max-width:680px){
  .rt-row{grid-template-columns:minmax(0,1fr);gap:4px;}
  .rt-row--head{display:none;}
}

/* ==========================================================================
   SPEC LIST — data & security rows (how)
   ========================================================================== */
.speclist{border-top:var(--hair);}
.speclist-row{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);
  gap:8px 30px;
  padding:18px 4px;
  border-bottom:var(--hair-soft);
  align-items:baseline;
}
.speclist-row h3{
  font-family:var(--disp);font-stretch:normal;font-weight:700;text-transform:none;
  font-size:clamp(18px,2.2vw,28px);line-height:1;
}
.speclist-row p{font-size:14px;color:var(--ink-soft);max-width:66ch;}
.speclist-row p b{color:var(--ink);}
@media (max-width:680px){
  .speclist-row{grid-template-columns:minmax(0,1fr);gap:4px;}
}

/* ==========================================================================
   DIAGRAM (how) — hand-kept SVG in a scroll-safe frame
   ========================================================================== */
.dg{border:var(--hair);background:var(--chalk);}
.dg-scroll{overflow-x:auto;}
.dg svg{min-width:680px;width:100%;height:auto;display:block;padding:clamp(12px,2vw,22px);}
.dg-cap{
  border-top:var(--hair-soft);
  padding:12px clamp(14px,2vw,22px);
  font-family:var(--body);font-size:11px;letter-spacing:0;color:var(--grey);
  display:flex;flex-wrap:wrap;gap:6px 26px;
}
.dg-cap b{color:var(--ink);font-weight:400;}

/* ==========================================================================
   RATE CARD (pricing) + TEASER (home)
   ========================================================================== */
.rate-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  border:var(--hair);
}
.rate{
  border-right:var(--hair-soft);
  padding:clamp(22px,2.6vw,36px);
  display:flex;flex-direction:column;gap:18px;
  min-width:0;
}
.rate:last-child{border-right:0;}
.rate--hot{
  outline:3px solid var(--red);outline-offset:-3px;
  position:relative;
}
.rate-tag{
  position:absolute;top:-1px;right:14px;
  background:var(--red);color:var(--chalk);
  font-family:var(--body);font-size:10px;letter-spacing:0;text-transform:none;
  padding:5px 9px;
}
.rate h3{
  font-family:var(--disp);font-stretch:normal;font-weight:700;text-transform:none;
  font-size:clamp(22px,2.4vw,32px);
}
.rate-price{
  display:flex;align-items:baseline;gap:8px;
  font-variant-numeric:tabular-nums;
}
.rate-price .amt{
  font-family:var(--disp);font-stretch:normal;font-weight:700;
  font-size:clamp(44px,5vw,68px);line-height:.9;
}
.rate-price .per{font-family:var(--body);font-size:11px;color:var(--grey);letter-spacing:0;}
.rate-blurb{font-size:13.5px;color:var(--ink-soft);min-height:4.8em;}
@media (max-width:920px){
  .rate-blurb{min-height:0;} /* stacked tiers — no cross-column rule to align */
}
.rate-blurb strong{color:var(--ink);}
.rate ul{list-style:none;display:flex;flex-direction:column;border-top:var(--hair-soft);}
.rate li{
  padding:9px 0;border-bottom:var(--hair-soft);
  font-size:13px;color:var(--ink-soft);
  display:flex;gap:9px;line-height:1.4;
}
.rate li::before{content:"";flex:none;width:6px;height:6px;background:var(--ink);margin-top:6px;}
.rate li.hot::before{background:var(--red);}
.rate li.hot{color:var(--ink);font-weight:500;}
.rate li b{font-family:var(--body);font-size:11.5px;font-weight:400;color:var(--ink);font-variant-numeric:tabular-nums;}
.rate .btn{margin-top:auto;justify-content:center;}
.rate-note{
  margin-top:16px;
  font-family:var(--body);font-size:11px;letter-spacing:0;color:var(--grey);
}
@media (max-width:920px){
  .rate-grid{grid-template-columns:1fr;}
  .rate{border-right:0;border-bottom:var(--hair-soft);}
  .rate:last-child{border-bottom:0;}
}

.tease{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border:var(--hair);
}
.tease-cell{
  padding:clamp(20px,3vw,36px);
  border-right:var(--hair-soft);
  display:flex;flex-direction:column;gap:8px;
  min-width:0;
}
.tease-cell:last-child{border-right:0;}
.tease-cell h3{
  font-family:var(--disp);font-stretch:normal;font-weight:700;text-transform:none;
  font-size:clamp(22px,2.8vw,36px);line-height:.9;
}
.tease-cell p{font-family:var(--body);font-size:11px;color:var(--grey);letter-spacing:0;line-height:1.6;}
.tease-cell p b{color:var(--ink);font-weight:400;}
.tease-foot{
  grid-column:1/-1;
  border-top:var(--hair);
  padding:14px clamp(20px,3vw,36px);
  display:flex;flex-wrap:wrap;gap:8px 28px;align-items:baseline;
  font-family:var(--body);font-size:11px;letter-spacing:0;text-transform:none;color:var(--grey);
}
.tease-foot b{color:var(--red-deep);font-weight:400;}
.tease-foot a{margin-left:auto;color:var(--ink);box-shadow:inset 0 -2px var(--red);padding:9px 0 2px;margin-top:-9px;}
.tease-foot a:hover{color:var(--red-deep);}
@media (max-width:760px){
  .tease{grid-template-columns:1fr;}
  .tease-cell{border-right:0;border-bottom:var(--hair-soft);}
  .tease-cell:nth-child(3){border-bottom:0;}
  .tease-foot a{margin-left:0;}
}

/* ==========================================================================
   WITNESS STATEMENTS
   ========================================================================== */
.wits{
  display:grid;grid-template-columns:repeat(2,1fr);
  border:var(--hair);
}
.wits--one{grid-template-columns:1fr;max-width:880px;}
.wit{
  padding:clamp(22px,3vw,40px);
  border-right:var(--hair-soft);border-bottom:var(--hair-soft);
  display:flex;flex-direction:column;gap:18px;
  min-width:0;
}
.wit:last-child,.wits--one .wit{border-right:0;border-bottom:0;}
.wit blockquote{
  font-family:var(--disp);font-stretch:normal;font-weight:700;
  font-size:clamp(19px,2.2vw,30px);line-height:1.06;text-transform:none;
  text-wrap:balance;
}
.wit blockquote em{font-style:normal;box-shadow:inset 0 -.12em rgba(217,35,35,.55);}
.wit-sig{
  margin-top:auto;
  display:flex;flex-direction:column;gap:2px;
  font-family:var(--body);font-size:11px;letter-spacing:0;color:var(--grey);
}
.wit-sig b{color:var(--ink);font-weight:400;}
@media (max-width:760px){
  .wits{grid-template-columns:1fr;}
  .wit{border-right:0;}
}

/* ==========================================================================
   OBJECTIONS, ANSWERED
   ========================================================================== */
.obj-list{border-top:var(--hair);}
.obj{border-bottom:var(--hair);}
.obj summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:baseline;gap:18px;
  padding:22px 4px;
}
.obj summary::-webkit-details-marker{display:none;}
.obj summary .qno{
  font-family:var(--body);font-size:11px;color:var(--red-deep);letter-spacing:0;flex:none;
  font-variant-numeric:tabular-nums;
}
.obj summary h3{
  font-family:var(--disp);font-stretch:normal;font-weight:700;text-transform:none;
  font-size:clamp(18px,2.2vw,30px);line-height:1;
}
.obj summary .pm{
  margin-left:auto;flex:none;align-self:center;
  width:28px;height:28px;border:var(--hair);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--body);font-size:15px;line-height:1;
}
.obj summary:hover{background:var(--chalk-deep);}
.obj[open] summary .pm::before{content:"–";}
.obj:not([open]) summary .pm::before{content:"+";}
.obj-a{
  padding:0 4px 26px;
  max-width:70ch;
  display:flex;flex-direction:column;gap:10px;
}
.obj-a p{font-size:15px;color:var(--ink-soft);}
.obj-a p b{color:var(--ink);}
.obj-a .fine{font-family:var(--body);font-size:11px;color:var(--grey);letter-spacing:0;}
.obj-a a{box-shadow:inset 0 -1px var(--red);}

/* ==========================================================================
   FINAL CTA SLAB — one per view
   ========================================================================== */
.sec--final{
  background:var(--ink);color:var(--chalk);
  border-top:0;
}
.final-h{
  font-size:clamp(40px,7.4vw,112px);
  color:var(--chalk);
  margin-top:18px;
}
.final-h .strike-w{
  position:relative;display:inline-block;
}
.final-h .strike-w::after{
  content:"";position:absolute;left:-1%;right:-1%;top:52%;height:.085em;margin-top:-.042em;
  background:var(--red);
}
.final-h .u{box-shadow:inset 0 -.08em var(--red);}
.final-sub{
  max-width:56ch;color:var(--grey-on-ink);font-size:clamp(15px,1.25vw,18px);
  margin-top:22px;
}
.final-sub b{color:var(--chalk);font-weight:400;}
.final-form{
  margin-top:38px;
  display:flex;gap:0;max-width:560px;flex-wrap:wrap;
}
.final-form input{
  flex:1 1 260px;
  background:transparent;color:var(--chalk);
  border:1px solid var(--chalk);border-right:0;
  padding:15px 18px;
  font-family:var(--body);font-size:13px;
  min-width:0;
}
.final-form input::placeholder{color:var(--grey-on-ink);}
.final-form .btn{flex:0 0 auto;}
.final-err{
  flex-basis:100%;
  margin-top:10px;
  font-family:var(--body);font-size:12px;letter-spacing:0;
  color:var(--red-onink);
}
@media (max-width:560px){
  .final-form input{border-right:1px solid var(--chalk);}
  .final-form .btn{width:100%;margin-top:10px;}
}
.final-ok{
  margin-top:38px;display:none;
  align-items:center;gap:18px;flex-wrap:wrap;
}
.final-ok.show{display:flex;}
.final-ok p{font-family:var(--body);font-size:13px;color:var(--chalk);letter-spacing:0;max-width:52ch;}
.final-ok .comp-note{display:block;margin-top:6px;font-size:11px;color:var(--grey-on-ink);}
.final-alt{
  margin-top:26px;
  font-family:var(--body);font-size:11px;letter-spacing:0;text-transform:none;color:var(--grey-on-ink);
}
.final-alt a{
  box-shadow:inset 0 -1px var(--red);color:var(--chalk);
  display:inline-block;padding:8px 0 3px;margin:-8px 0 -3px; /* ≥24px touch target */
}
.final-alt button{
  font-family:var(--body);font-size:11px;letter-spacing:0;text-transform:none;
  color:var(--chalk);box-shadow:inset 0 -1px var(--red);
  display:inline-block;padding:8px 0 3px;margin:-8px 0 -3px;
}

/* ==========================================================================
   FOOTER — shared, outside the views
   ========================================================================== */
.foot{
  background:var(--ink);color:var(--grey-on-ink);
  border-top:1px solid rgba(244,245,242,.22);
}
.foot-grid{
  display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));
  gap:clamp(24px,4vw,60px);
  padding-block:clamp(44px,5vw,72px);
}
.foot-mark{
  font-family:var(--disp);font-stretch:normal;font-weight:700;
  font-size:30px;text-transform:none;color:var(--chalk);
  display:flex;align-items:center;gap:9px;
}
.foot-tag{margin-top:14px;font-size:13px;max-width:34ch;line-height:1.5;}
.foot .foot-h{
  display:block;
  font-family:var(--body);font-size:10px;letter-spacing:0;text-transform:none;
  color:var(--chalk);font-weight:400;margin-bottom:14px;
}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:12px;}
.foot ul a{
  font-size:13px;color:var(--grey-on-ink);
  display:inline-block;padding-block:5px;margin-block:-5px; /* ≥24px touch target */
}
.foot ul a:hover{color:var(--chalk);box-shadow:inset 0 -1px var(--red);}
.foot-base{
  border-top:1px solid rgba(244,245,242,.16);
  padding-block:18px;
  display:flex;flex-wrap:wrap;gap:8px 30px;
  font-family:var(--body);font-size:10px;letter-spacing:0;text-transform:none;
}
@media (max-width:860px){
  .foot-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:520px){
  .foot-grid{grid-template-columns:1fr;}
}

/* ==========================================================================
   SPEC SHEETS (modules v3) — one full filing per module
   ========================================================================== */
.sheet{
  border:var(--hair);background:var(--chalk);
  margin-bottom:clamp(22px,3vw,40px);
}
.sheet--hot{outline:3px solid var(--red);outline-offset:-3px;position:relative;}
.sheet-tag{
  position:absolute;top:-1px;right:14px;
  background:var(--red);color:var(--chalk);
  font-family:var(--body);font-size:10px;letter-spacing:0;text-transform:none;
  padding:5px 9px;z-index:1;
}
.sheet-head{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:8px 22px;align-items:baseline;
  padding:16px clamp(14px,2.4vw,26px);
  border-bottom:var(--hair);
  background:var(--chalk-deep);
}
.sheet-no{font-family:var(--body);font-size:11px;color:var(--red-deep);letter-spacing:0;font-variant-numeric:tabular-nums;white-space:nowrap;}
.sheet-head h3{
  font-family:var(--disp);font-stretch:normal;font-weight:700;text-transform:none;
  font-size:clamp(28px,3.6vw,52px);line-height:.9;
}
.sheet-head .tag{
  font-family:var(--body);font-size:10px;letter-spacing:0;text-transform:none;color:var(--grey);
  text-align:right;
}
.sheet-body{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);
  gap:clamp(18px,2.6vw,34px);
  padding:clamp(18px,2.6vw,32px) clamp(14px,2.4vw,26px);
}
.sheet--alt .sheet-body .sheet-copy{order:2;}
.sheet-copy{display:flex;flex-direction:column;gap:12px;min-width:0;}
.sheet-copy p{font-size:clamp(14px,1.15vw,16.5px);color:var(--ink-soft);max-width:58ch;}
.sheet-copy p b{color:var(--ink);}
.sheet-copy .kill{
  text-decoration:line-through;text-decoration-color:var(--red);text-decoration-thickness:2px;
  color:var(--grey);
}
.sheet-fig{min-width:0;display:flex;align-items:center;}
@media (max-width:900px){
  .sheet-body{grid-template-columns:1fr;}
  .sheet--alt .sheet-body .sheet-copy{order:0;}
  .sheet-head{grid-template-columns:auto minmax(0,1fr);}
  .sheet-head .tag{grid-column:1/-1;text-align:left;}
}

/* ---- figure frame — austere animated diagram, scroll-safe ---------------- */
.fig{border:var(--hair);background:var(--chalk);width:100%;}
.fig-scroll{overflow-x:auto;}
.fig svg{min-width:470px;width:100%;height:auto;display:block;padding:clamp(10px,1.6vw,18px);}
.fig-cap{
  border-top:var(--hair-soft);
  padding:10px clamp(12px,1.8vw,18px);
  font-family:var(--body);font-size:10px;letter-spacing:0;color:var(--grey);
  display:flex;flex-wrap:wrap;gap:4px 22px;
}
.fig-cap b{color:var(--ink);font-weight:400;}

/* ---- indexed feature rows ------------------------------------------------ */
.flist{list-style:none;border-top:var(--hair);}
.flist li{
  display:grid;grid-template-columns:58px minmax(0,1fr);
  gap:6px 14px;align-items:baseline;
  padding:12px clamp(14px,2.4vw,26px);
  border-top:var(--hair-soft);
  font-size:13.5px;color:var(--ink-soft);line-height:1.45;
}
.flist li:first-child{border-top:0;}
.flist li>span:last-child{max-width:70ch;}
.flist .fx{
  font-family:var(--body);font-size:10px;color:var(--grey);letter-spacing:0;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.flist li b{color:var(--ink);}
.flist li.hot{
  background:rgba(217,35,35,.06);
  box-shadow:inset 3px 0 var(--red);
}
.flist li.hot .fx{color:var(--red-deep);}
.flist li.hot span:last-child{color:var(--ink);}

/* ==========================================================================
   VS TABLE (custom page) — receipts-style comparison, static
   ========================================================================== */
.vs{border:var(--hair);background:var(--chalk);}
.vs-row{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr) minmax(0,1.1fr);
  gap:6px 20px;
  padding:16px clamp(14px,2.4vw,26px);
  border-bottom:var(--hair-soft);
  align-items:baseline;
}
.vs-row:last-child{border-bottom:0;}
.vs-row--head{background:var(--chalk-deep);border-bottom:var(--hair);padding-block:9px;}
.vs-row--head span{font-family:var(--body);font-size:10px;letter-spacing:0;text-transform:none;color:var(--grey);}
.vs-row--head span:nth-child(3){color:var(--red-deep);}
.vs-item{
  font-family:var(--disp);font-stretch:normal;font-weight:700;text-transform:none;
  font-size:clamp(17px,1.9vw,24px);line-height:1;
}
.vs-them,.vs-us{font-family:var(--body);font-size:clamp(11px,1vw,13px);line-height:1.45;letter-spacing:0;}
.vs-them{color:var(--grey);}
.vs-them s{text-decoration:line-through;text-decoration-color:var(--red);text-decoration-thickness:2px;}
.vs-us{color:var(--ink);}
.vs-us b{color:var(--red-deep);font-weight:400;}
@media (max-width:760px){
  .vs-row{grid-template-columns:minmax(0,1fr);gap:4px;}
  .vs-row--head{display:none;}
  .vs-them::before{content:"Agency — ";color:var(--grey);font-size:10px;letter-spacing:.14em;}
  .vs-us::before{content:"Here — ";color:var(--red-deep);font-size:10px;letter-spacing:.14em;}
}

/* ==========================================================================
   INTERROGATION PANEL (home chatbot) — scripted, honest about it
   ========================================================================== */
.chat{border:var(--hair);background:var(--chalk);max-width:880px;}
.chat-head{
  display:flex;flex-wrap:wrap;gap:6px 20px;align-items:baseline;
  padding:12px clamp(14px,2vw,22px);
  border-bottom:var(--hair);
  background:var(--ink);color:var(--chalk);
  font-family:var(--body);font-size:10px;letter-spacing:0;text-transform:none;
}
.chat-head .lbl{color:var(--grey-on-ink);margin-left:auto;letter-spacing:.08em;text-transform:none;}
.chat-log{
  padding:clamp(16px,2.4vw,26px) clamp(14px,2vw,22px);
  display:flex;flex-direction:column;gap:18px;
  min-height:150px;max-height:440px;overflow-y:auto;
}
.chat-msg{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:baseline;}
.chat-msg .who{
  font-family:var(--body);font-size:11px;letter-spacing:0;
  font-variant-numeric:tabular-nums;padding-top:2px;
}
.chat-msg--q .who{color:var(--red-deep);}
.chat-msg--a .who{color:var(--grey);}
.chat-msg--q .txt{
  font-family:var(--disp);font-stretch:normal;font-weight:700;text-transform:none;
  font-size:clamp(17px,1.9vw,24px);line-height:1;
}
.chat-msg--a .txt{font-size:14px;color:var(--ink-soft);line-height:1.55;max-width:64ch;}
.chat-msg--a .txt b{color:var(--ink);}
.chat-chips{
  display:flex;flex-wrap:wrap;gap:8px;
  padding:14px clamp(14px,2vw,22px);
  border-top:var(--hair-soft);
}
.chip{
  border:var(--hair);
  font-family:var(--body);font-size:10.5px;letter-spacing:0;text-transform:none;
  padding:8px 12px;
  transition:background .12s ease,color .12s ease;
}
.chip:hover{background:var(--ink);color:var(--chalk);}
.chat-form{display:flex;border-top:var(--hair);flex-wrap:wrap;}
.chat-form input{
  flex:1 1 220px;min-width:0;
  background:transparent;color:var(--ink);
  border:0;padding:15px clamp(14px,2vw,22px);
  font-family:var(--body);font-size:13px;
}
.chat-form input::placeholder{color:var(--grey);}
.chat-form .btn{flex:0 0 auto;border-top:0;border-right:0;border-bottom:0;}
.chat-note{
  margin-top:12px;
  font-family:var(--body);font-size:10px;letter-spacing:0;color:var(--grey);
  max-width:880px;
}
@media (max-width:560px){
  .chat-form .btn{width:100%;border-left:0;border-top:var(--hair);}
}

/* ==========================================================================
   MOTION SYSTEM — ink, not decoration. Armed by .wf-motion (JS, non-reduced)
   ========================================================================== */
.rl{position:relative;}
.rl::after{
  content:"";position:absolute;left:-1%;right:-1%;bottom:.04em;height:.09em;
  background:var(--red);
}
.wf-motion [data-anim] .rl::after{transform:scaleX(0);transform-origin:left center;}
.wf-motion [data-anim].in .rl::after{animation:wfRule .45s cubic-bezier(.7,0,.2,1) forwards;animation-delay:var(--d,.1s);}
@keyframes wfRule{to{transform:scaleX(1);}}

.wf-motion [data-anim="stamp"]{opacity:0;}
.wf-motion [data-anim="stamp"].in{animation:wfSlam .42s cubic-bezier(.2,1.1,.3,1) forwards;animation-delay:var(--d,0s);}
@keyframes wfSlam{
  0%{opacity:0;transform:scale(1.6) rotate(-10deg);}
  60%{opacity:1;transform:scale(.96) rotate(-4deg);}
  100%{opacity:1;transform:scale(1) rotate(-4deg);}
}

.wf-motion .fig .dr,.wf-motion .dg .dr{stroke-dasharray:1;stroke-dashoffset:1;}
.wf-motion .in .dr{animation:wfDash .7s ease forwards;animation-delay:var(--d,0s);}
@keyframes wfDash{to{stroke-dashoffset:0;}}

.wf-motion .pi{opacity:0;}
.wf-motion .in .pi{animation:wfIn .35s ease forwards;animation-delay:var(--d,0s);}
@keyframes wfIn{to{opacity:1;}}

/* ==========================================================================
   REDUCED MOTION — kill the theatrics, keep the message
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .wf-loaded .hero-their .line i,
  .hero-their .line i{animation:none !important;transform:scaleX(1);}
  .wf-loaded .hero-ours,.hero-ours{animation:none !important;opacity:1;}
  .caret{animation:none !important;opacity:1;}
  .r-evidence{transition:none;}
  .r-flip{transition:none;}
  .btn{transition:none;}
  .chip{transition:none;}
  /* belt-and-braces: even if .wf-motion was armed, render everything static */
  .wf-motion [data-anim]{opacity:1 !important;transform:none !important;transition:none !important;animation:none !important;}
  .wf-motion [data-anim] .rl::after{transform:scaleX(1) !important;animation:none !important;}
  .wf-motion .fig .dr,.wf-motion .dg .dr{stroke-dasharray:none !important;stroke-dashoffset:0 !important;animation:none !important;}
  .wf-motion .pi{opacity:1 !important;animation:none !important;}
  /* exhibits: base styles ARE the completed final frame — just kill the replay */
  .exh *{animation:none !important;}
}

/* ==========================================================================
   PRODUCTION ADDITIONS (ship-ready structure phase) — no restyling above.
   1) .skip      — skip link, first element of every page body
   2) .final-note — honest no-endpoint note under demo forms (site.js)
   3) .faq-group / .faq-item — /faq/ page frame, reusing the interrogation
      type styles (.chat-msg) for the crawlable Q&A
   ========================================================================== */
.skip{
  position:absolute;left:12px;top:10px;z-index:200;
  background:var(--ink);color:var(--chalk);
  font-family:var(--body);font-size:12px;letter-spacing:0;text-transform:none;
  padding:10px 16px;
  transform:translateY(-300%);
}
.skip:focus{transform:none;outline:2px solid var(--red);outline-offset:2px;}

.final-note{
  flex-basis:100%;
  margin-top:10px;
  font-family:var(--body);font-size:12px;letter-spacing:0;line-height:1.6;
  color:var(--chalk);
}
.final-note a{box-shadow:inset 0 -1px var(--red);}

.faq-group{
  display:flex;flex-direction:column;gap:26px;
  border-top:var(--hair);
  padding-top:28px;
}
.faq-item{display:flex;flex-direction:column;gap:10px;}
.faq-item .chat-msg--a .txt{max-width:70ch;}

/* ==========================================================================
   SHIP FIXES (v4 review list)
   1) strike semantics — struck copy is real <s>; the h1 strike keeps its
      animated bars, so native line-through is suppressed there
   2) modules jump rail — sticky mono index (SPEC 01–10 + CL.13)
   3) slim mid-page CTA band (modules after sheet 05, agents after art. 02)
   ========================================================================== */
.final-h s.strike-w{text-decoration:none;}

/* ---- jump rail ---- */
.sheets-wrap{display:grid;grid-template-columns:minmax(0,1fr);}
.sheets{min-width:0;}
.jumprail{
  position:sticky;top:64px;z-index:40;
  display:flex;flex-direction:row;
  overflow-x:auto;
  background:var(--chalk);
  border:var(--hair);border-top:0;
  margin-bottom:clamp(16px,2vw,24px);
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.jumprail::-webkit-scrollbar{display:none;}
.jumprail.has-more{
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),rgba(0,0,0,0));
          mask-image:linear-gradient(90deg,#000 calc(100% - 44px),rgba(0,0,0,0));
}
.jumprail a{
  flex:none;
  font-family:var(--body);font-size:10px;letter-spacing:0;
  color:var(--grey);
  padding:12px 13px;
  border-right:var(--hair-soft);
  font-variant-numeric:tabular-nums;
}
.jumprail a:hover{color:var(--ink);background:var(--chalk-deep);}
.jumprail a.on{color:var(--ink);background:var(--chalk-deep);box-shadow:inset 0 -3px var(--red);}
.sheet[id]{scroll-margin-top:118px;}
@media (max-width:880px){
  .jumprail{top:88px;} /* tucks 1px under the two-row nav — no see-through gap */
  .sheet[id]{scroll-margin-top:142px;}
}
@media (min-width:1100px){
  .sheets-wrap{grid-template-columns:64px minmax(0,1fr);gap:0 clamp(16px,2vw,28px);align-items:start;}
  .jumprail{
    flex-direction:column;
    top:88px;
    overflow:visible;
    border-top:var(--hair);
    margin-bottom:0;
  }
  .jumprail a{padding:9px 0;text-align:center;border-right:0;border-bottom:var(--hair-soft);}
  .jumprail a:last-child{border-bottom:0;}
  .jumprail a.on{box-shadow:inset 3px 0 var(--red);}
  .sheet[id]{scroll-margin-top:88px;}
}

/* ---- slim CTA band ---- */
.ctaband{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 30px;
  background:var(--ink);color:var(--chalk);
  padding:clamp(18px,2.6vw,28px) clamp(16px,2.4vw,28px);
  margin-block:clamp(22px,3vw,40px);
}
.ctaband p{
  flex:1 1 320px;min-width:0;
  font-family:var(--disp);font-stretch:normal;font-weight:700;text-transform:none;
  font-size:clamp(19px,2.4vw,32px);line-height:.95;text-wrap:balance;
}
.ctaband .u-label{flex-basis:100%;color:var(--red-onink);}
.ctaband .btn{flex:none;}

/* ==========================================================================
   EXHIBITS — "the software, operating". Hairline-framed animated app scenes
   in the product's own UI idiom (sidebar / rows / chips; mono, ink, chalk).
   Mechanics: base styles author the COMPLETED FINAL FRAME. exhibits.js arms
   each .exh (adds .exh--armed) and toggles .exh--run with an
   IntersectionObserver, so scenes replay on a gentle infinite cycle while
   on-screen, hold their frame (animation-play-state:paused) while off-screen,
   and stay a completed still under prefers-reduced-motion or without JS.
   ========================================================================== */
.exh{border:var(--hair);background:var(--chalk);width:100%;}
.exh-cap{
  border-top:var(--hair-soft);
  padding:10px clamp(12px,1.8vw,18px);
  font-family:var(--body);font-size:10px;letter-spacing:0;color:var(--grey);
  display:flex;flex-wrap:wrap;gap:4px 22px;
}
.exh-cap b{color:var(--ink);font-weight:400;}
.exh-cap a{color:var(--ink);box-shadow:inset 0 -1px var(--red);}

/* app frame */
.x-app{
  display:grid;grid-template-columns:78px minmax(0,1fr);
  font-family:var(--body);font-size:10.5px;line-height:1.5;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.x-side{border-right:var(--hair-soft);padding-block:8px;display:flex;flex-direction:column;min-width:0;}
.x-side span{padding:5px 10px;color:var(--grey);letter-spacing:.06em;font-size:10px;text-transform:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.x-side .cur{color:var(--ink);background:var(--chalk-deep);box-shadow:inset 2px 0 var(--red);}
.x-main{min-width:0;display:flex;flex-direction:column;}
.x-bar{
  display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;
  padding:8px 12px;border-bottom:var(--hair-soft);background:var(--chalk-deep);
  font-size:10px;letter-spacing:.1em;text-transform:none;color:var(--grey);
}
.x-bar b{color:var(--ink);font-weight:400;}
.x-row{
  display:flex;gap:10px;align-items:baseline;
  padding:6px 12px;border-bottom:1px solid rgba(16,17,20,.1);
  white-space:nowrap;overflow:hidden;min-width:0;
}
.x-row .grow{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;}
.x-row .amt{margin-left:auto;}
.x-dim{color:var(--grey);}
.x-red{color:var(--red-deep);}
.x-tick{color:var(--red-deep);flex:none;}
.x-chip{
  display:inline-block;border:1px solid var(--ink);padding:1px 7px;
  font-size:10px;letter-spacing:.1em;text-transform:none;white-space:nowrap;
}
.x-chip--red{border-color:var(--red-deep);color:var(--red-deep);}
.x-chip--ink{background:var(--ink);color:var(--chalk);border-color:var(--ink);}
.x-foot{padding:7px 12px;font-size:10px;letter-spacing:.08em;color:var(--grey);border-top:var(--hair-soft);}
.x-say{display:block;font-size:10px;letter-spacing:.18em;text-transform:none;color:var(--red-deep);margin-bottom:4px;}
.x-cmd{padding:10px 12px;border-bottom:var(--hair-soft);}
.x-type{
  display:inline-block;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  font-family:var(--disp);font-stretch:normal;font-weight:700;text-transform:none;
  font-size:clamp(15px,1.6vw,21px);line-height:1.05;color:var(--ink);
  vertical-align:bottom;
}
.x-caret{display:inline-block;width:.5ch;height:.8em;background:var(--red);margin-left:.1em;vertical-align:-.05em;opacity:0;}
.x-sec{padding:8px 12px;border-bottom:var(--hair-soft);display:flex;flex-direction:column;gap:3px;}
.x-lab{font-size:10px;letter-spacing:.16em;text-transform:none;color:var(--grey);}
.x-gate{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:9px 12px;border-bottom:var(--hair-soft);}
.x-swap{display:inline-grid;vertical-align:baseline;}
.x-swap>span{grid-area:1/1;white-space:nowrap;}
.x-swap .was{opacity:0;}
/* phone frame */
.x-phone{
  width:min(230px,86%);margin:clamp(14px,2vw,24px) auto;
  border:1.5px solid var(--ink);border-radius:14px;
  padding:12px 0 6px;
  font-family:var(--body);font-size:10.5px;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.x-phone .x-notch{width:34px;height:3px;background:var(--ink);margin:0 auto 10px;border-radius:2px;}
.x-scanbox{position:relative;margin:8px 12px;border:1px solid var(--ink);padding:10px 10px 6px;overflow:hidden;}
.x-bars{display:flex;gap:3px;align-items:stretch;height:34px;}
.x-bars i{display:block;background:var(--ink);}
.x-scanline{position:absolute;left:4px;right:4px;top:8px;height:2px;background:var(--red);opacity:0;}
/* schedule board */
.x-board{padding:10px 12px 12px;display:grid;grid-template-columns:44px repeat(4,minmax(0,1fr));gap:4px;font-size:10px;}
.x-board .hd{color:var(--grey);letter-spacing:.1em;text-transform:none;padding:2px 0;font-size:10px;}
.x-board .crew{color:var(--grey);letter-spacing:.08em;font-size:10px;align-self:center;}
.x-cell{border:1px dashed rgba(16,17,20,.22);min-height:24px;position:relative;min-width:0;}
.x-blk{
  position:absolute;inset:3px;background:var(--ink);color:var(--chalk);
  font-size:10px;letter-spacing:.06em;line-height:1;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  z-index:1;
}
.x-blk.ghost{background:transparent;border:1px dashed rgba(16,17,20,.35);color:var(--grey);z-index:0;}
.x-rain{color:var(--red-deep);letter-spacing:.1em;text-transform:none;font-size:10px;}
.x-blip{opacity:0;}

/* ---- replay engine ---- */
.exh--armed .xa{
  animation-duration:var(--cy,16s);
  animation-timing-function:linear;
  animation-iteration-count:infinite;
  animation-play-state:paused;
  animation-fill-mode:both;
}
.exh--armed.exh--run .xa{animation-play-state:running;}
/* generic appear-at-N% steps (appear, hold, fade at cycle end) */
.exh--armed .xA6{animation-name:xA6;}   .exh--armed .xA10{animation-name:xA10;}
.exh--armed .xA12{animation-name:xA12;} .exh--armed .xA14{animation-name:xA14;}
.exh--armed .xA18{animation-name:xA18;} .exh--armed .xA22{animation-name:xA22;}
.exh--armed .xA26{animation-name:xA26;} .exh--armed .xA30{animation-name:xA30;}
.exh--armed .xA34{animation-name:xA34;} .exh--armed .xA38{animation-name:xA38;}
.exh--armed .xA42{animation-name:xA42;} .exh--armed .xA46{animation-name:xA46;}
.exh--armed .xA50{animation-name:xA50;} .exh--armed .xA52{animation-name:xA52;}
.exh--armed .xA54{animation-name:xA54;} .exh--armed .xA56{animation-name:xA56;}
.exh--armed .xA58{animation-name:xA58;} .exh--armed .xA62{animation-name:xA62;}
.exh--armed .xA64{animation-name:xA64;} .exh--armed .xA66{animation-name:xA66;}
.exh--armed .xA70{animation-name:xA70;} .exh--armed .xA74{animation-name:xA74;}
.exh--armed .xA78{animation-name:xA78;} .exh--armed .xA82{animation-name:xA82;}
@keyframes xA6{0%,6%{opacity:0}9%,96%{opacity:1}100%{opacity:0}}
@keyframes xA10{0%,10%{opacity:0}13%,96%{opacity:1}100%{opacity:0}}
@keyframes xA12{0%,12%{opacity:0}15%,96%{opacity:1}100%{opacity:0}}
@keyframes xA14{0%,14%{opacity:0}17%,96%{opacity:1}100%{opacity:0}}
@keyframes xA18{0%,18%{opacity:0}21%,96%{opacity:1}100%{opacity:0}}
@keyframes xA22{0%,22%{opacity:0}25%,96%{opacity:1}100%{opacity:0}}
@keyframes xA26{0%,26%{opacity:0}29%,96%{opacity:1}100%{opacity:0}}
@keyframes xA30{0%,30%{opacity:0}33%,96%{opacity:1}100%{opacity:0}}
@keyframes xA34{0%,34%{opacity:0}37%,96%{opacity:1}100%{opacity:0}}
@keyframes xA38{0%,38%{opacity:0}41%,96%{opacity:1}100%{opacity:0}}
@keyframes xA42{0%,42%{opacity:0}45%,96%{opacity:1}100%{opacity:0}}
@keyframes xA46{0%,46%{opacity:0}49%,96%{opacity:1}100%{opacity:0}}
@keyframes xA50{0%,50%{opacity:0}53%,96%{opacity:1}100%{opacity:0}}
@keyframes xA52{0%,52%{opacity:0}55%,96%{opacity:1}100%{opacity:0}}
@keyframes xA54{0%,54%{opacity:0}57%,96%{opacity:1}100%{opacity:0}}
@keyframes xA56{0%,56%{opacity:0}59%,96%{opacity:1}100%{opacity:0}}
@keyframes xA58{0%,58%{opacity:0}61%,96%{opacity:1}100%{opacity:0}}
@keyframes xA62{0%,62%{opacity:0}65%,96%{opacity:1}100%{opacity:0}}
@keyframes xA64{0%,64%{opacity:0}67%,96%{opacity:1}100%{opacity:0}}
@keyframes xA66{0%,66%{opacity:0}69%,96%{opacity:1}100%{opacity:0}}
@keyframes xA70{0%,70%{opacity:0}73%,96%{opacity:1}100%{opacity:0}}
@keyframes xA74{0%,74%{opacity:0}77%,96%{opacity:1}100%{opacity:0}}
@keyframes xA78{0%,78%{opacity:0}81%,96%{opacity:1}100%{opacity:0}}
@keyframes xA82{0%,82%{opacity:0}85%,96%{opacity:1}100%{opacity:0}}
/* bespoke moves */
.exh--armed .xType{animation-name:xType;}
@keyframes xType{
  0%{clip-path:inset(0 100% 0 0);animation-timing-function:steps(30,end);}
  12%,96%{clip-path:inset(0 0 0 0);opacity:1;}
  100%{clip-path:inset(0 0 0 0);opacity:0;}
}
.exh--armed .xCaret{animation-name:xCaret;}
@keyframes xCaret{0%,13%{opacity:1}14%,100%{opacity:0}}
.exh--armed .xStamp{animation-name:xStamp;}
@keyframes xStamp{
  0%,76%{opacity:0;transform:scale(1.5) rotate(-9deg);}
  81%,96%{opacity:1;transform:scale(1) rotate(-4deg);}
  100%{opacity:0;transform:scale(1) rotate(-4deg);}
}
.exh--armed .xTotA{animation-name:xTotA;}
.exh--armed .xTotB{animation-name:xTotB;}
.exh--armed .xTotC{animation-name:xTotC;}
@keyframes xTotA{0%,14%{opacity:0}17%,30%{opacity:1}33%,100%{opacity:0}}
@keyframes xTotB{0%,33%{opacity:0}36%,48%{opacity:1}51%,100%{opacity:0}}
@keyframes xTotC{0%,51%{opacity:0}54%,96%{opacity:1}100%{opacity:0}}
.exh--armed .xOldA{animation-name:xOldA;}
.exh--armed .xNewA{animation-name:xNewA;}
@keyframes xOldA{0%,26%{opacity:1}29%,100%{opacity:0}}
@keyframes xNewA{0%,26%{opacity:0}29%,96%{opacity:1}100%{opacity:0}}
.exh--armed .xOldB{animation-name:xOldB;}
.exh--armed .xNewB{animation-name:xNewB;}
@keyframes xOldB{0%,44%{opacity:1}47%,100%{opacity:0}}
@keyframes xNewB{0%,44%{opacity:0}47%,96%{opacity:1}100%{opacity:0}}
.exh--armed .xScan{animation-name:xScan;}
@keyframes xScan{
  0%,26%{transform:translateY(0);opacity:0;}
  28%{opacity:1;}
  40%{transform:translateY(44px);opacity:1;}
  43%,100%{transform:translateY(44px);opacity:0;}
}
.exh--armed .xSlide{animation-name:xSlide;}
@keyframes xSlide{
  0%,30%{transform:translate(var(--fx,0),var(--fy,0));}
  42%,96%{transform:translate(0,0);}
  100%{transform:translate(0,0);opacity:1;}
}
.x-blk.xSlide2{z-index:2;} /* the conflicting block paints over the block it collides with */
.exh--armed .xSlide2{animation-name:xSlide2;}
@keyframes xSlide2{
  0%,30%{transform:translate(var(--fx,0),var(--fy,0));background:#101114;}
  42%{transform:translate(var(--mx,0),var(--my,0));background:#101114;}
  48%,60%{transform:translate(var(--mx,0),var(--my,0));background:#D92323;}
  70%,96%{transform:translate(0,0);background:#101114;}
  100%{transform:translate(0,0);background:#101114;}
}
.exh--armed .xBlip{animation-name:xBlip;}
@keyframes xBlip{0%,46%{opacity:0}50%,64%{opacity:1}70%,100%{opacity:0}}
.exh--armed .xBlipEarly{animation-name:xBlipEarly;}
@keyframes xBlipEarly{0%,16%{opacity:0}20%,96%{opacity:1}100%{opacity:0}}
@media (max-width:640px){
  .x-app{grid-template-columns:minmax(0,1fr);}
  .x-side{display:none;}
}

/* ==========================================================================
   C2 — ICP strip · owner band · migration hook · theme experiment
   ========================================================================== */
.icp{background:var(--ink);}
.icp .shell{padding-block:13px;}
.icp p{font-family:var(--body);font-size:12px;letter-spacing:0;text-transform:none;line-height:1.8;color:#B9B6AD;}
.icp b{color:var(--chalk);font-weight:700;}
.icp-au{color:var(--red-onink);}

.owner-grid{display:grid;grid-template-columns:5fr 7fr;gap:48px;align-items:start;}
@media(max-width:860px){.owner-grid{grid-template-columns:1fr;gap:28px;}}
.pslot-frame{position:relative;aspect-ratio:16/10;border:1px solid var(--ink);background:var(--chalk-deep);display:grid;place-items:center;}
.pslot-frame img{width:100%;height:100%;object-fit:cover;display:block;}
.pslot-cap{font-family:var(--body);font-size:11px;letter-spacing:0;color:var(--grey);}
.pslot figcaption{margin-top:10px;}
.owner-copy p{max-width:58ch;margin-bottom:14px;line-height:1.75;}
.owner-link a{font-family:var(--body);font-size:12px;letter-spacing:0;color:var(--ink);box-shadow:inset 0 -2px var(--red);}
.owner-link a:hover{background:var(--red);color:var(--chalk);}
.owner-stamp{display:inline-block;margin-top:16px;transform:rotate(-2deg);}

.ctaband--hook{border-block:1px solid var(--ink);}

/* ===== retired base tokens (earlier design) — the skin below re-points them ===== */
.hero--ink{background:var(--ink);}
.hero--ink .hero-h1{color:var(--chalk);}
.hero--ink .hero-sub{color:#B9B6AD;}
.hero--ink .hero-sub strong{color:var(--chalk);}
.hero--ink .hero-eyebrow .u-label{color:#8F8C83;}
.hero--ink .hero-eyebrow .u-label--red{color:var(--red-onink);}
.hero--ink .hero-eyebrow .rule{background:#3A3B33;}
.sec-strike{font-size:clamp(32px,4.4vw,60px);}
.sec-strike .hero-ours{display:block;margin-top:.15em;}
/* ink-hero corrections: the base .hero-h1 is a flex column sized for the
   strike-theatre spans (which now live in the receipts section) */
.hero--ink .hero-h1{display:block;font-size:clamp(46px,7.2vw,104px);line-height:.98;max-width:18ch;}
.hero--ink .hero-h1 .u{display:inline;}
.hero--ink .hero-ctas .btn--ghost-onink{color:var(--chalk);}
.hero--ink .hero-ticker{border-top:1px solid #2A2B26;}
.hero--ink .hero-ticker span{color:#8F8C83;}
.hero--ink .hero-ticker b{color:var(--chalk);}
.hero--ink .hero-ticker b.red{color:var(--red-onink);}
.sec-strike .hero-their,.sec-strike .hero-ours{font-size:clamp(32px,4.4vw,60px);}

/* ==========================================================================
   EASYDONE SKIN (the single shipped skin) — warm-rounded reskin over
   the Challenger structure. Re-points tokens (palette + Bricolage / Instrument
   Serif / JetBrains Mono), softens the hairline + condensed-uppercase idioms
   into Concept A's warm language, red→coral, and rounds the cards. Class names
   & JS hooks unchanged. This :root block overrides the retired base tokens
   above on source order — it must stay AFTER them.
   ========================================================================== */
:root{
  --chalk:#FAF6EE; --chalk-deep:#F2EBDB;
  --paper:#F6E8CD; --paper-deep:#EDDCB6;  /* v6 variance: warm wheat carbon-copy */
  --ink:#14110D; --ink-soft:#2E2820;
  --red:#E85D2C; --red-deep:#BC4A1E; --red-onink:#EF8A5C;
  --grey:#5C544A; --grey-on-ink:#C4BCA8;
  --coral:#E85D2C; --coral-soft:#FBE9DC; --sage:#3F5C45; --canary:#F5C842;
  --hair:1px solid rgba(20,17,13,.12);
  --hair-soft:1px solid rgba(20,17,13,.075);
  --hair-onink:1px solid rgba(250,246,238,.18);
  --hair-onink-soft:1px solid rgba(250,246,238,.10);
  --disp:'Bricolage Grotesque',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --body:'Instrument Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; /* v7.3 type diet: quiet body, pairs with Instrument Serif */
  --serif:'Instrument Serif',Georgia,'Iowan Old Style','Times New Roman',serif;
  --mono:'JetBrains Mono',ui-monospace,'Cascadia Mono',Consolas,Menlo,monospace;
  --radius:12px; --radius-lg:20px; --radius-xl:28px;
  --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.2,.8,.2,1);
  --shadow-1:0 1px 2px rgba(20,17,13,.05),0 10px 26px -16px rgba(20,17,13,.22);
  --shadow-2:0 2px 8px rgba(20,17,13,.07),0 24px 50px -22px rgba(20,17,13,.30);
  --shadow-3:0 4px 8px rgba(20,17,13,.06),0 30px 80px -20px rgba(20,17,13,.25);
  /* dark-card text (used by the ported personality components — always on a dark island) */
  --paper:#FAF6EE; --dark-text:#FAF6EE; --dark-text-mid:#C4BCA8; --dark-text-dim:#8A8275;
}
.wf-root{font-size:17px;letter-spacing:-.006em;}

/* ---- headlines: condensed-uppercase → Bricolage sentence-case ---- */
.h-display,.hero-their,.hero-ours,.r-name,.demand-body h3,.order-cmd .typed,
.order-step h4,.rcard-name,.affi-t,.clause h3,.clause .pull,.loop-body h3,
.rt-row .cls,.speclist-row h3,.rate h3,.tease-cell h3,.wit blockquote,
.obj summary h3,.sheet-head h3,.vs-item,.chat-msg--q .txt,.ctaband p,.final-h,
.x-type,.ledger-total .t-val,.doc-total .t-val,
.sec-strike .hero-their,.sec-strike .hero-ours{
  font-family:var(--disp);font-stretch:normal;font-weight:700;
  text-transform:none;letter-spacing:-.022em;line-height:1.03;
}
.h-display{line-height:1.0;}
.sec-head .h-display{letter-spacing:-.03em;}

/* v7.3 type diet — Bricolage was "nice in the hero, a bit much as you go on":
   section + inner-page display headlines move to the serif voice; Bricolage
   keeps the home hero H1, small bold h3s, buttons and the nav word. */
.sec-head .h-display,.page-hero .h-display,.final-h{
  font-family:var(--serif);font-weight:400;letter-spacing:0;line-height:1.02;
}
/* chrome leaves mono (the mono stays only inside the paper exhibits) */
.u-label{font-family:var(--body);font-weight:600;letter-spacing:.15em;}
.nav-links a{font-family:var(--body);font-weight:600;font-size:12px;letter-spacing:.1em;}
/* v7.4 — links speak in the body voice too; mono caps leave the link idioms */
.link-soft{margin-top:2px;}
.link-soft a{
  font-weight:600;font-size:14.5px;color:var(--red-deep);
  box-shadow:inset 0 -1px var(--red);padding-bottom:1px;
}
.link-soft a:hover{color:var(--ink);}
.demand-links a,.owner-link a{
  font-family:var(--body);font-weight:600;font-size:13.5px;
  letter-spacing:0;text-transform:none;
}
.sec-head .stamp{margin-left:8px;vertical-align:middle;font-size:15px;}

/* v7.4.2 — THE THREE-PANEL SEQUENCE (home sec 02): evening → night → morning */
.night{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;}
@media (max-width:880px){.night{grid-template-columns:1fr;}}
.night-step{
  border:var(--hair);border-radius:var(--radius-lg);
  padding:clamp(18px,2.4vw,28px);
  background:var(--chalk-deep);
  display:flex;flex-direction:column;gap:10px;min-width:0;
}
.night-step--dark{background:#1A1611;border-color:#1A1611;color:#F6F1E6;}
.night-step--dawn{background:var(--paper-deep);}
.night-time{
  font-family:var(--body);font-size:11px;letter-spacing:0;text-transform:none;
  color:var(--red-deep);
}
.night-step--dark .night-time{color:#EF8A5C;}
.night-step h3{
  font-family:var(--disp);font-weight:700;font-size:clamp(18px,2vw,23px);
  letter-spacing:-.02em;line-height:1.05;
}
.night-quote{font-family:var(--serif);font-style:italic;font-size:clamp(17px,1.9vw,21px);line-height:1.3;}
.night-step p{font-size:14.5px;line-height:1.55;}
.night-step--dark p{color:#CFC8BA;}
.night-links{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px 28px;}

/* ---- accent words: serif-italic coral (the Concept A signature) ---- */
.u,.rl{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--coral);letter-spacing:0;}
.u{box-shadow:none;}
.hero-h1 .u,.page-hero h1 .u,.final-h .u,.loop-body h3 .u{box-shadow:none;}
.sec--final .u,.sec--slab .u,.hero--ink .u,.final-h .u{color:var(--red-onink);}
.rl::after{height:.055em;bottom:-.03em;opacity:.85;}

/* ---- buttons: pill, ink-fill primary, coral hover (Concept A) ---- */
.btn{
  font-family:var(--body);font-weight:600;font-size:15px;letter-spacing:0;text-transform:none;
  border-radius:999px;padding:13px 22px;border-width:1.5px;
  transition:background .2s var(--ease),color .2s,transform .2s,box-shadow .2s,border-color .2s;
}
/* .wf-root prefix beats `.wf-root a{color:inherit}` (0-1-1), which otherwise
   forces ink text onto these <a> pills */
.wf-root .btn--red{background:var(--ink);border-color:var(--ink);color:var(--chalk);box-shadow:0 6px 16px -8px rgba(20,17,13,.5);}
.wf-root .btn--red:hover{background:var(--coral);border-color:var(--coral);color:#fff;transform:translateY(-2px);box-shadow:0 12px 24px -8px rgba(232,93,44,.5);}
/* on dark grounds the ink pill would vanish → invert to coral fill, cream on hover */
.hero--ink .btn--red,.sec--final .btn--red,.sec--slab .btn--red,.ctaband .btn--red{background:var(--coral);border-color:var(--coral);color:#fff;}
.hero--ink .btn--red:hover,.sec--final .btn--red:hover,.sec--slab .btn--red:hover,.ctaband .btn--red:hover{background:var(--chalk);border-color:var(--chalk);color:var(--ink);}
.wf-root .btn--ghost{border-color:rgba(20,17,13,.22);}
.btn--ghost:hover{background:var(--ink);color:var(--chalk);transform:translateY(-2px);}
.btn--ghost-onink:hover{transform:translateY(-2px);}
.nav-ctas .btn{padding:10px 18px;font-size:14px;}

/* ---- stamp: rubber-stamp → canary sticky-note tag ---- */
.stamp{
  background:var(--canary);color:var(--ink);border:0;
  font-family:var(--serif);font-style:italic;font-stretch:normal;font-weight:400;
  text-transform:none;letter-spacing:0;border-radius:5px;
  padding:.16em .5em;transform:rotate(-4deg);
  box-shadow:0 6px 14px -6px rgba(20,17,13,.28);
  -webkit-mask-image:none;mask-image:none;
}
.stamp--sm{font-size:13px;color:var(--ink);border:0;}
.stamp--onink{background:var(--canary);color:var(--ink);border:0;}

/* ---- nav + wordmark (glassy cream) ---- */
.nav{background:rgba(250,246,238,.82);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);border-bottom:var(--hair);}
.nav-mark,.foot-mark{font-family:var(--disp);font-stretch:normal;font-weight:700;text-transform:none;letter-spacing:-.02em;font-size:24px;}
.nav-word{font-size:22px;}
.mark-bird{flex:none;}
.nav-mark .mark-bird{color:var(--ink);}
.foot-mark .mark-bird{color:var(--chalk);}
/* the tagline joins the lockup, stacked under the wordmark (Colin, 2026-08-22 ×2) */
.nav-stack{display:flex;flex-direction:column;align-items:flex-start;gap:1px;}
.nav-stack .nav-word{line-height:1;}
.nav-tag{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:14px;line-height:1;letter-spacing:.01em;color:var(--coral);
  white-space:nowrap;
}
.nav-links a{font-family:var(--body);font-size:14.5px;letter-spacing:0;text-transform:none;color:var(--grey);border-bottom:0;position:relative;padding-bottom:4px;}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;background:var(--coral);transition:right .28s var(--ease);}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--ink);border-bottom:0;}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{right:0;}

/* ---- cards: round + shadow, soften inner hairlines ---- */
.ledger,.order,.demand-spec,.doc,.clause,.rate-grid,.sheet,.exh,.fig,.dg,.rt,
.vs,.chat,.tease,.xcut,.roster .rcard,.affi,.pslot-frame,.ctaband{
  border-radius:var(--radius-lg);overflow:hidden;
}
.ledger,.doc,.clause,.chat,.sheet,.rate-grid,.tease,.vs,.rt,.order,.fig,.dg,.exh{
  box-shadow:var(--shadow-1);
}
.clause{background:var(--chalk-deep);}
.rate-tag,.sheet-tag{top:0;}
.rate--hot,.sheet--hot{border-radius:var(--radius-lg);}

/* ---- dark slabs stay warm-dark; coral accents lifted for legibility ---- */
.sec--slab .rl,.sec--final .rl,.ctaband .u-label{color:var(--red-onink);}
.demand-no .big,.loop-step .n{color:var(--coral);}

/* CRM flagship stage — frames the /assets/crm-demo.html iframe (the ported animation).
   Fixed dark ground so any letterbox matches the demo's own desk on both skins. */
.crm-stage{position:relative;width:100%;aspect-ratio:128/71;border-radius:var(--radius-lg);overflow:hidden;background:#14110D;box-shadow:var(--shadow-1);border:1px solid rgba(20,17,13,.12);}
.crm-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}
@media (max-width:640px){.crm-stage{aspect-ratio:100/62;}}

/* ==========================================================================
   HOME PERSONALITY (ported from Concept A comp) — hero cost-ticker + the
   following scroll agent. Plus the SaaS cost calculator (on /pricing/).
   Dark cards use a FIXED dark ground (not var(--ink)) so they stay legible.
   ========================================================================== */
@keyframes pulseDot{0%,100%{box-shadow:0 0 0 3px rgba(232,93,44,.18);}50%{box-shadow:0 0 0 5px rgba(232,93,44,.06);}}
@keyframes spinnerSpin{to{transform:rotate(360deg);}}
@keyframes wingFlap{0%,100%{transform:scaleY(1) scaleX(1);}50%{transform:scaleY(.78) scaleX(1.06);}}
@keyframes barFill{from{width:18%;}to{width:86%;}}

/* hero → two columns on wide screens (headline + live cost card) */
.hero-grid{display:grid;grid-template-columns:1fr;gap:clamp(26px,4vw,52px);align-items:center;width:100%;}
.hero-copy{display:flex;flex-direction:column;gap:clamp(16px,2.2vw,28px);min-width:0;}
@media (min-width:920px){.hero-grid{grid-template-columns:minmax(0,1.22fr) minmax(0,.8fr);}}

/* live "cost of staying grounded" ticker — a lifted warm-dark card on the hero */
.hero-card{position:relative;background:#211C14;color:var(--dark-text);border:1px solid rgba(250,246,238,.12);border-radius:var(--radius-xl);padding:clamp(24px,3vw,32px);box-shadow:var(--shadow-3);overflow:hidden;transform:rotate(1.2deg);transition:transform .4s var(--ease-out);}
.hero-card:hover{transform:rotate(0) translateY(-4px);}
.hero-card::before{content:"";position:absolute;inset:-50% -10%;background:radial-gradient(ellipse 60% 40% at 30% 0%,rgba(232,93,44,.30),transparent 60%);pointer-events:none;}
.hero-card-eyebrow{position:relative;font-family:var(--body);font-size:11px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--dark-text-mid);display:inline-flex;align-items:center;gap:8px;}
.hero-card-eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 3px rgba(232,93,44,.30);animation:pulseDot 2s infinite;}
.hero-card-num{position:relative;font-weight:700;font-variant-numeric:tabular-nums;font-size:clamp(46px,5.4vw,78px);line-height:1;letter-spacing:-.04em;margin:16px 0 8px;color:var(--paper);}
.hero-card-sub{position:relative;font-size:14px;color:var(--dark-text-mid);line-height:1.5;}
.hero-card-bar{position:relative;margin-top:22px;height:6px;border-radius:999px;background:rgba(250,246,238,.10);overflow:hidden;}
.hero-card-bar-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--coral) 0%,var(--canary) 100%);animation:barFill 6s ease-in-out infinite alternate;}
.hero-card-foot{position:relative;margin-top:16px;display:flex;justify-content:space-between;gap:12px;font-family:var(--body);font-size:11px;color:var(--dark-text-dim);letter-spacing:0;text-transform:none;}

/* The fixed scroll agent (home only, hidden < 900px + reduced-motion) */
.scroll-agent{position:fixed;pointer-events:none;z-index:55;opacity:0;transition:opacity .35s var(--ease-out);will-change:top,left,opacity;left:0;top:0;}
.scroll-agent.fading-out{transition:opacity .08s linear;}
.scroll-agent.active{opacity:1;}
.scroll-agent-cursor{width:32px;height:32px;display:grid;place-items:center;color:var(--coral);position:relative;filter:drop-shadow(0 4px 10px rgba(232,93,44,.45));will-change:transform;}
.scroll-agent-cursor svg{animation:wingFlap 1.6s ease-in-out infinite;transform-origin:center;}
.scroll-agent-bubble{position:absolute;left:36px;top:50%;transform:translateY(-50%) translateX(-4px);white-space:nowrap;background:#14110D;color:var(--paper);padding:6px 12px;border-radius:999px;font-family:var(--body);font-size:11px;letter-spacing:0;box-shadow:0 6px 18px -4px rgba(0,0,0,.30);display:inline-flex;align-items:center;gap:8px;opacity:0;transition:opacity .4s var(--ease-out),transform .4s var(--ease-out);}
.scroll-agent.active .scroll-agent-bubble{opacity:1;transform:translateY(-50%) translateX(0);}
.scroll-agent-spinner{width:8px;height:8px;border-radius:50%;border:1.5px solid rgba(232,93,44,.40);border-top-color:var(--coral);animation:spinnerSpin .9s linear infinite;flex:none;}
@media (max-width:900px){.scroll-agent{display:none;}}

/* SaaS cost calculator — a dark island card (lives on /pricing/) */
.cost-card{background:#14110D;border-radius:var(--radius-xl);padding:clamp(26px,4vw,44px);color:var(--dark-text);box-shadow:var(--shadow-3);position:relative;overflow:hidden;}
.cost-card::before{content:"";position:absolute;inset:-60% -20% auto auto;width:80%;height:60%;background:radial-gradient(ellipse at center,rgba(232,93,44,.20),transparent 60%);pointer-events:none;}
.cost-card-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;position:relative;}
.cost-card-title{font-weight:700;font-size:clamp(19px,2vw,24px);color:var(--paper);letter-spacing:-.012em;}
.cost-card-hint{font-family:var(--body);font-size:12px;color:var(--dark-text-mid);letter-spacing:0;}
.cost-grid{position:relative;margin-top:26px;display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px;}
.cost-chip{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 16px;border-radius:var(--radius);background:rgba(250,246,238,.04);border:1px solid rgba(250,246,238,.08);cursor:pointer;transition:background .2s,border-color .2s,transform .2s;font-size:15px;color:var(--dark-text-mid);font-weight:500;user-select:none;min-width:0;}
.cost-chip:hover{background:rgba(250,246,238,.08);border-color:rgba(250,246,238,.18);transform:translateY(-1px);}
.cost-chip.on{background:rgba(232,93,44,.14);border-color:rgba(232,93,44,.45);color:var(--paper);}
.cost-chip .price{font-family:var(--body);font-size:13px;color:var(--dark-text-dim);font-variant-numeric:tabular-nums;white-space:nowrap;}
.cost-chip.on .price{color:var(--coral);font-weight:600;}
.cost-total{position:relative;margin-top:26px;padding:22px 26px;background:rgba(250,246,238,.04);border:1px solid rgba(250,246,238,.08);border-radius:var(--radius);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.cost-total-num{font-weight:700;font-variant-numeric:tabular-nums;font-size:clamp(38px,5vw,60px);line-height:1;letter-spacing:-.03em;color:var(--paper);}
.cost-total-label{font-family:var(--body);font-size:11px;letter-spacing:0;text-transform:none;color:var(--dark-text-mid);margin-top:6px;}
.cost-savings{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:rgba(250,246,238,.10);color:var(--paper);font-size:14px;font-weight:600;transition:background .3s;}

/* --------------------------------------------------------------------------
   4 · BUTTONS — the attribute prefix (0-2-0) beats `.wf-root a{color:inherit}

/* ==========================================================================
   V6 VARIANCE LAYER — the exhibits jump (Colin, 2026-08-02: "the whole page
   lacks variance"). Order slips go terminal-ink with a signal header band;
   .doc ledgers go carbon paper with a red binding edge; steps/rows stagger in
   on reveal.
   ========================================================================== */

/* --- the work order: a terminal, not a form ------------------------------- */
.order{background:var(--ink);border-color:var(--ink);color:var(--chalk);}
.order-head{background:var(--red);color:var(--ink);border-bottom:0;}
.order-head .no{color:var(--ink);opacity:.72;}
.order-cmd{border-bottom:var(--hair-onink-soft);}
.order-cmd .say{color:var(--red-onink);}
.order-cmd .typed{color:var(--chalk);}
.order-step{border-right:var(--hair-onink-soft);}
.order-step .n{color:var(--red-onink);}
.order-step h4{color:var(--chalk);}
.order-step p{color:var(--grey-on-ink);}
.order-foot{border-top:var(--hair-onink);color:var(--grey-on-ink);}
.order-foot b{color:var(--chalk);}
@media (max-width:760px){
  .order-step{border-bottom:var(--hair-onink-soft);}
}

/* --- the ledger docs: carbon paper with a binding edge -------------------- */
.doc{background:var(--paper);border-left:3px solid var(--red);}
.doc-cols{background:var(--paper-deep);}
.doc-row--note{background:var(--paper-deep);}

/* --- stagger reveals: order steps + doc rows ------------------------------ */
.wf-motion [data-anim="steps"] .order-step{opacity:0;transform:translateY(10px);}
.wf-motion [data-anim="steps"].in .order-step{animation:wfRise .38s ease forwards;}
.wf-motion [data-anim="steps"].in .order-step:nth-child(1){animation-delay:.10s;}
.wf-motion [data-anim="steps"].in .order-step:nth-child(2){animation-delay:.24s;}
.wf-motion [data-anim="steps"].in .order-step:nth-child(3){animation-delay:.38s;}
.wf-motion [data-anim="steps"].in .order-step:nth-child(4){animation-delay:.52s;}
.wf-motion [data-anim="rows"] .doc-row{opacity:0;transform:translateY(8px);}
.wf-motion [data-anim="rows"].in .doc-row{animation:wfRise .3s ease forwards;}
/* rows are children 3+ of .doc (after doc-head, doc-cols) */
.wf-motion [data-anim="rows"].in .doc-row:nth-child(3){animation-delay:.08s;}
.wf-motion [data-anim="rows"].in .doc-row:nth-child(4){animation-delay:.16s;}
.wf-motion [data-anim="rows"].in .doc-row:nth-child(5){animation-delay:.24s;}
.wf-motion [data-anim="rows"].in .doc-row:nth-child(6){animation-delay:.32s;}
.wf-motion [data-anim="rows"].in .doc-row:nth-child(7){animation-delay:.40s;}
.wf-motion [data-anim="rows"].in .doc-row:nth-child(8){animation-delay:.48s;}
.wf-motion [data-anim="rows"].in .doc-row:nth-child(9){animation-delay:.56s;}
.wf-motion [data-anim="rows"].in .doc-row:nth-child(10){animation-delay:.64s;}
@keyframes wfRise{to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){
  .wf-motion [data-anim="steps"] .order-step,
  .wf-motion [data-anim="rows"] .doc-row{
    opacity:1 !important;transform:none !important;animation:none !important;
  }
}

/* ==========================================================================
   EXPERIMENT (2026-08-22) — HERO FILM.
   A muted 8s palindrome loop behind the ink hero. The film is graded into the
   slab (grayscale → warm sepia → darkened) then washed with warm-ink gradients
   so the type keeps its contrast; the bird ghosts through on the open right.
   Literal rgba(20,17,13,…) = the warm ink. Dead under prefers-reduced-motion
   (video removed entirely → today's static ink slab).
   ========================================================================== */
/* v7 (2026-08-22, spec v7) — premium register. The mono-caps connective bands
   (.loop-foot / .order-foot / .final-alt) are RETIRED site-wide; their CSS blocks
   above are dead. Pricing's plain-English specimen line survives as: */
.specimen-note{
  margin-top:16px;font-size:14px;line-height:1.55;color:var(--grey);max-width:62ch;
}

/* the premium eyebrow: serif flourish + quiet origin line replace the mono-caps
   manifesto pair. */
.hero-soar{display:flex;flex-direction:column;gap:10px;}
.hero-flourish{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(20px,2.4vw,28px);line-height:1.25;color:var(--chalk);
}
/* v7.4.3 — the flourish moved to the final CTA (page close); the hero ends at the CTAs */
.hero-sub--origin{
  font-size:clamp(13px,1.45vw,15.5px);max-width:58ch;
}
.hero--ink .hero-sub--origin{color:#8F8C83;}
.hero-flourish em{font-style:italic;color:var(--red-onink);}
.hero-origin{
  font-size:clamp(13px,1.5vw,15px);line-height:1.55;color:#8F8C83;
  max-width:62ch;
}

.hero--film{position:relative;isolation:isolate;overflow:hidden;}
.hero-film{position:absolute;inset:0;z-index:-1;pointer-events:none;}
.hero-film-video{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(.3) sepia(.12) brightness(.78) contrast(1.05);
  /* panoramic dusk clip (2026-08-22 evening): saturated blue/amber source —
     a touch of desat + warmth so it sits in the warm-ink palette.
     Clip-3 grade: grayscale(.35) sepia(.1) brightness(.8) contrast(1.05).
     Clip-2 golden-hour grade: grayscale(.45) sepia(.15) brightness(.68) contrast(1.06).
     Full-duotone fallback: grayscale(1) sepia(.32) brightness(.72) contrast(1.08). */
  transform:scale(1.32);transform-origin:4% 46%; /* bird (source-centred) rides right of the copy */
}
/* v7.4.3 — cursor spotlight removed (Colin changed his mind); the film runs untouched */
.hero-film::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(90deg, rgba(20,17,13,.92) 0%, rgba(20,17,13,.72) 40%, rgba(20,17,13,.22) 74%, rgba(20,17,13,.45) 100%),
    linear-gradient(180deg, rgba(20,17,13,.82) 0%, rgba(20,17,13,.12) 34%, rgba(20,17,13,.18) 66%, rgba(20,17,13,.94) 100%);
}
@media (max-width:880px){
  /* narrow crop keeps little sky visible — pull the wash back so the film reads at all */
  .hero-film::after{
    background:
      linear-gradient(180deg, rgba(20,17,13,.92) 0%, rgba(20,17,13,.48) 34%, rgba(20,17,13,.55) 70%, rgba(20,17,13,.95) 100%);
  }
}
@media (prefers-reduced-motion:reduce){
  .hero-film{display:none;}
}