/* ============================================================
   Moneypenny public site — shared skin
   One grid, one type rule, one voice. Retro paper identity is
   locked: paper palette, ink keylines, pop shadows.

   Grid rule (L1): all prose sits in .prose (max-width 62ch).
   Full-bleed is a deliberate act: the Desk scene and the
   pipeline explorer only.
   Type rule (L2): .machine = monospace, machine artifacts only
   (receipts, timestamps, IDs, captions of system output).
   Human prose is never monospace.
   ============================================================ */

:root{
  --paper:#E7DABE; --paper-lo:#EFE6D2; --paper-deep:#D2C09A; --paper-edge:#B7A17A;
  --ink:#1C1813; --ink-soft:#4A4235;
  --teal:#0FA9B8; --teal-deep:#0A7D88;
  --verm:#DC3B24; --verm-deep:#A82817;
  --brass:#E2A035;
  --key:2.5px solid var(--ink);
  --pop:5px 5px 0 var(--ink); --pop-sm:3px 3px 0 var(--ink);
  --disp:"Futura","Century Gothic","Avant Garde","Trebuchet MS",sans-serif;
  --body:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"Courier New",Courier,monospace;
  --measure:62ch;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--paper); font-family:var(--body); color:var(--ink);
  line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden}
section svg,header svg,footer svg{max-width:100%; height:auto}
img{max-width:100%; height:auto}

/* the one grid */
.wrap{max-width:1060px; margin:0 auto; padding:0 26px}
.prose{max-width:var(--measure)}
section{padding:56px 0; border-top:2.5px solid var(--ink); position:relative}
section,header{scroll-margin-top:18px}

/* type scale */
h1{font-family:var(--disp); font-weight:700; text-transform:uppercase;
  font-size:clamp(34px,6vw,56px); line-height:1.03; margin:0 0 16px; text-wrap:balance}
h1 .dot{color:var(--verm)}
h2{font-family:var(--disp); font-weight:700; text-transform:uppercase;
  font-size:clamp(23px,3.2vw,34px); margin:0 0 8px; line-height:1.05}
h3{font-family:var(--disp); font-weight:700; text-transform:uppercase;
  font-size:16px; margin:0 0 8px; line-height:1.2}
p{margin:0 0 14px}
.lede{font-size:clamp(17.5px,2vw,21px); color:var(--ink-soft); margin:0 0 22px}
.sec-sub{color:var(--ink-soft); margin:0 0 26px; font-size:15.5px}
.eyebrow{font-family:var(--disp); font-weight:700; text-transform:uppercase;
  letter-spacing:.26em; font-size:11.5px; color:var(--verm-deep);
  display:inline-flex; align-items:center; gap:9px; margin-bottom:10px}
.eyebrow::before{content:""; width:24px; height:2.5px; background:var(--verm)}

/* the one type rule: machine artifacts only */
.machine{font-family:var(--mono)}

/* links */
a{color:var(--verm-deep)}
a:focus-visible, summary:focus-visible, button:focus-visible{
  outline:3px solid var(--verm); outline-offset:3px; border-radius:2px}
.text-link{color:var(--verm-deep); font-weight:700; text-decoration:none;
  border-bottom:2px solid var(--paper-edge); padding-bottom:1px;
  transition:border-color .12s ease-out,color .12s ease-out}
.text-link:hover,.text-link:focus-visible{color:var(--ink); border-bottom-color:var(--verm); outline:none}

/* nav — four visitor questions */
.nav{display:flex; align-items:center; gap:14px; padding:22px 0}
.nav .mark-sm{width:40px; height:40px; flex:0 0 auto}
.nav .wm{font-family:var(--disp); font-weight:700; letter-spacing:.14em; font-size:14px}
.nav .wm .dot{color:var(--verm)}
.nav .links{margin-left:auto; display:flex; gap:22px; font-family:var(--disp);
  font-weight:700; text-transform:uppercase; font-size:11.5px; letter-spacing:.1em}
.nav .links a{color:var(--ink); text-decoration:none; border-bottom:2.5px solid transparent;
  padding-bottom:2px; white-space:nowrap}
.nav .links a:hover,.nav .links a:focus-visible{border-bottom-color:var(--verm); outline:none}
.nav .links a[aria-current="page"]{border-bottom-color:var(--verm); color:var(--verm-deep)}
.nav .links a[aria-current="page"]::before{content:"▸ "; color:var(--verm)}
@media (max-width:640px){
  .nav{gap:8px; padding:16px 0 10px; flex-wrap:wrap}
  .nav .mark-sm{width:34px; height:34px}
  .nav .wm{font-size:12px; letter-spacing:.11em; white-space:nowrap}
  .nav .links{margin-left:0; width:100%; overflow-x:auto; gap:16px; font-size:10.5px;
    letter-spacing:.06em; padding-bottom:4px; scrollbar-width:none}
  .nav .links::-webkit-scrollbar{display:none}
}

/* hero */
.hero{padding:44px 0 50px}
.hero-grid{display:flex; gap:40px; align-items:flex-start; flex-wrap:wrap}
.hero-grid>.hero-copy{flex:1; min-width:290px}
.hero .mark{flex:0 0 auto}
@media (max-width:560px){
  .hero{padding:28px 0 34px}
  .hero .mark{display:none}
}
.cta-row{display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:4px}
.demo-cta{font-family:var(--disp); font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; font-size:15px; color:var(--paper-lo); background:var(--teal-deep);
  border:var(--key); box-shadow:var(--pop-sm); padding:11px 20px; border-radius:2px;
  text-decoration:none; display:inline-flex; align-items:center; gap:9px}
.cta-quiet{font-family:var(--disp); font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; font-size:12.5px; color:var(--ink-soft); text-decoration:none;
  border-bottom:2.5px solid var(--paper-edge); padding-bottom:2px}
.cta-quiet:hover,.cta-quiet:focus-visible{color:var(--ink); border-bottom-color:var(--verm); outline:none}

/* expand-in-place cards (IX1) — <details>, no hot navigation */
.fold-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
@media (max-width:760px){.fold-grid{grid-template-columns:1fr}}
.fold{border:var(--key); background:var(--paper-lo); box-shadow:var(--pop-sm);
  border-radius:2px; border-top:7px solid var(--teal)}
.fold>summary{list-style:none; cursor:pointer; padding:18px; outline-offset:-3px}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary .fold-ico{width:28px; height:28px; color:var(--ink); margin-bottom:12px; display:block}
.fold>summary h3{margin:0 0 6px}
.fold>summary p{margin:0; font-size:13.5px; color:var(--ink-soft)}
.fold>summary .fold-hint{display:inline-flex; align-items:center; gap:5px; margin-top:10px;
  font-family:var(--disp); font-weight:700; text-transform:uppercase; font-size:10.5px;
  letter-spacing:.08em; color:var(--teal-deep)}
.fold[open]>summary .fold-hint .fold-arrow{transform:rotate(90deg)}
.fold .fold-hint .fold-arrow{display:inline-block; transition:transform .1s ease}
.fold-body{padding:0 18px 18px; border-top:2px dashed var(--paper-edge); margin:0 18px 0; padding-left:0; padding-right:0}
.fold-body>div{padding-top:14px}
.fold-body p{font-size:14px; color:var(--ink); margin:0 0 10px}
.fold-body .text-link{font-size:13px}

/* receipt artifact — machine output, therefore .machine */
.receipt-card{border:var(--key); background:var(--paper-lo); box-shadow:var(--pop);
  border-radius:2px; padding:18px 20px; max-width:560px}
.receipt-card .rc-head{font-family:var(--disp); font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; font-size:12px; color:var(--verm-deep); margin-bottom:12px;
  border-bottom:2px dashed var(--paper-edge); padding-bottom:8px}
.receipt-card .rc-row{display:flex; gap:12px; font-size:12.5px; line-height:1.8}
.receipt-card .rc-k{flex:0 0 88px; color:var(--verm-deep); font-weight:700}
.receipt-card .rc-v{color:var(--ink); min-width:0; overflow-wrap:anywhere}
.receipt-card .rc-close{border-top:2px dashed var(--paper-edge); margin-top:10px;
  padding-top:9px; font-size:12px; color:var(--ink-soft)}
.artifact-cap{font-size:13.5px; color:var(--ink-soft); margin-top:14px}

/* footer — the honest voice, in the human typeface */
footer{border-top:2.5px solid var(--ink); padding:34px 0 60px; font-size:14px; color:var(--ink-soft)}
footer b{color:var(--ink)}
footer .prose p{margin:0 0 12px}
.signup{display:flex; gap:10px; flex-wrap:wrap; align-items:center; max-width:520px; margin-top:14px}
.signup input[type=email]{flex:1; min-width:210px; font-family:var(--body); font-size:14px;
  padding:10px 12px; border:var(--key); background:var(--paper-lo); border-radius:2px; color:var(--ink)}
.signup input[type=email]::placeholder{color:var(--paper-edge)}
.signup input[type=email]:focus-visible{outline:3px solid var(--verm); outline-offset:2px}
.signup button{font-family:var(--disp); font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; font-size:12px; padding:10px 16px; border:var(--key);
  background:var(--paper-deep); color:var(--ink); border-radius:2px; cursor:pointer}
.signup button:disabled{opacity:.55; cursor:default}
.signup .hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.signup-msg{font-size:13px; margin:12px 0 0; min-height:1.2em}
.signup-msg.ok{color:var(--teal-deep); font-weight:700}
.signup-msg.err{color:var(--verm-deep); font-weight:700}

/* motion — respectful by default */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0; transform:translateY(14px); animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards}
  @keyframes rise{to{opacity:1; transform:none}}
  .demo-cta{transition:transform .1s ease-out, box-shadow .1s ease-out}
  .demo-cta:hover{transform:translate(-2px,-2px); box-shadow:var(--pop)}
  .demo-cta:active{transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none}
}