/* DepositMark public site. Depends on brand.css. */
.wrap { max-width:1180px; margin:0 auto; padding:0 28px; }

/* ── masthead ─────────────────────────────────────────────────────────── */
.mast { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:26px 0 22px; border-bottom:1px solid var(--rule); }
.mast nav { display:flex; gap:26px; flex-wrap:wrap; }
.mast nav a { color:var(--ink-soft); text-decoration:none; font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; }
.mast nav a:hover { color:var(--green); }

/* ── hero ─────────────────────────────────────────────────────────────── */
.hero { position:relative; display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,1fr); gap:48px; align-items:center; padding:74px 0 86px; }
.hero::before { /* banknote rosette, half off the page */
  content:""; position:absolute; right:-250px; top:-120px; width:820px; height:820px;
  background:url(/static/rosette.svg) center/contain no-repeat; opacity:.5; pointer-events:none;
  animation:turn 240s linear infinite;
}
@keyframes turn { to { transform:rotate(360deg); } }
.eyebrow { color:var(--green); display:flex; align-items:center; gap:12px; margin:0 0 26px; }
.eyebrow::before { content:""; width:34px; height:1px; background:currentColor; }
.hero h1 { font:500 clamp(38px,4.75vw,68px)/1.02 var(--display); letter-spacing:-.025em; margin:0 0 28px; }
.hero h1 span { display:block; white-space:nowrap; }
.hero h1 em { font-style:italic; font-weight:400; color:var(--green); }
.lede { font-size:19px; color:var(--ink-soft); max-width:33em; margin:0 0 34px; }
.actions { display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.btn { display:inline-block; background:var(--ink); color:var(--paper); text-decoration:none; padding:17px 26px 16px; font-family:var(--mono); font-size:13px; letter-spacing:.14em; text-transform:uppercase; border-radius:2px; box-shadow:5px 5px 0 var(--green); transition:transform .15s, box-shadow .15s; }
.btn:hover { transform:translate(2px,2px); box-shadow:3px 3px 0 var(--green); }
.quiet { color:var(--ink); font-size:15px; }

/* ── the cheque ───────────────────────────────────────────────────────── */
.stage { position:relative; min-height:380px; padding-top:40px; }
.cheque { position:relative; width:100%; max-width:560px; margin-left:auto; aspect-ratio:2.28/1; padding:4.2% 5% 3.4%;
  background:var(--mint) url(/static/safety.svg); border:1px solid rgba(16,38,31,.35); border-radius:4px;
  box-shadow:0 1px 0 #fff inset, 0 30px 50px -28px rgba(12,51,39,.55), 0 2px 4px rgba(12,51,39,.15);
  transform:rotate(-4deg); font-family:var(--mono); color:var(--ink); container-type:inline-size; }
.cheque.ghost { position:absolute; inset:auto 0 auto auto; top:34px; transform:rotate(3.5deg) translate(18px,26px); opacity:.45; filter:saturate(.6); box-shadow:none; }
.cheque .row { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.cheque small { display:block; font-size:1.7cqw; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); }
.cheque .payer { font-size:2.2cqw; line-height:1.35; letter-spacing:.04em; text-transform:uppercase; }
.cheque .no { font-size:3.1cqw; font-weight:500; }
.cheque .payto { display:flex; align-items:flex-end; gap:2.5cqw; margin-top:5.2cqw; }
.cheque .payee { flex:1; border-bottom:1px solid var(--ink); font:italic 500 5.4cqw/1.15 var(--display); padding-bottom:.6cqw; }
.cheque .amt { border:1px solid var(--ink); background:rgba(255,253,246,.7); padding:1cqw 2cqw; font-size:3.6cqw; font-weight:500; white-space:nowrap; }
.cheque .words { margin-top:2.6cqw; border-bottom:1px solid var(--ink); font-size:2.3cqw; padding-bottom:.6cqw; white-space:nowrap; overflow:hidden; }
.cheque .foot { margin-top:3.4cqw; align-items:flex-end; }
.cheque .sig { border-top:1px solid var(--ink); padding-top:.7cqw; text-align:center; min-width:44%; }
.cheque .micr { font-family:"GnuMICR",var(--mono); font-size:4.5cqw; letter-spacing:.02em; margin-top:2.6cqw; white-space:nowrap; }
.cheque .specimen { position:absolute; right:5%; top:39%; font-size:1.7cqw; letter-spacing:.4em; color:rgba(16,38,31,.32); }
.seal { position:absolute; right:-7%; top:-24%; width:31%; color:var(--green); transform:rotate(-13deg); filter:drop-shadow(0 1px 0 rgba(255,255,255,.5)); }
.seal text { font-family:var(--mono); font-size:15.5px; letter-spacing:.2em; fill:currentColor; }
.seal .ring { fill:none; stroke:currentColor; }

/* load-in */
.rise { opacity:0; transform:translateY(18px); animation:rise .8s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes rise { to { opacity:1; transform:none; } }
.stage .cheque:not(.ghost) { opacity:0; animation:deal .9s cubic-bezier(.2,.8,.2,1) .35s forwards; }
@keyframes deal { from { opacity:0; transform:rotate(4deg) translate(60px,-30px); } to { opacity:1; transform:rotate(-4deg); } }
.stage .ghost { animation:fade .9s ease .2s both; }
@keyframes fade { from { opacity:0; } to { opacity:.45; } }
.seal { opacity:0; animation:stamp .45s cubic-bezier(.3,1.6,.5,1) 1.35s forwards; }
@keyframes stamp { from { opacity:0; transform:rotate(-30deg) scale(2.3); } 70% { opacity:1; } to { opacity:.92; transform:rotate(-13deg) scale(1); } }
@media (prefers-reduced-motion:reduce) { .rise, .seal, .stage .cheque, .hero::before { animation:none !important; opacity:1; } .stage .ghost { opacity:.55; } }

/* ── ledger strip ─────────────────────────────────────────────────────── */
.ledger { display:grid; grid-template-columns:repeat(4,1fr); border-top:2px solid var(--ink); border-bottom:1px solid var(--ink); }
.ledger div { padding:20px 22px 18px; border-left:1px solid var(--rule); }
.ledger div:first-child { border-left:0; padding-left:0; }
.ledger dt { font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); }
.ledger dd { margin:6px 0 0; font:500 27px/1.1 var(--display); letter-spacing:-.01em; }
.ledger dl { margin:0; }

/* ── sections ─────────────────────────────────────────────────────────── */
section { padding:96px 0; }
.kicker { color:var(--green); margin:0 0 18px; }
h2 { font:500 clamp(34px,4.2vw,56px)/1.03 var(--display); letter-spacing:-.02em; margin:0 0 22px; max-width:15em; }
h2 em { font-style:italic; font-weight:400; color:var(--green); }
.sub { color:var(--ink-soft); max-width:36em; margin:0; font-size:18px; }

.steps { list-style:none; margin:56px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:0; counter-reset:s; }
.steps li { counter-increment:s; position:relative; padding:28px 26px 0 0; border-top:1px dashed var(--ink); }
.steps li::before { content:"0" counter(s); display:block; font:italic 400 64px/1 var(--display); color:var(--green); margin-bottom:14px; }
.steps li::after { content:""; position:absolute; top:-6px; left:0; width:11px; height:11px; border-radius:50%; background:var(--paper); border:1px solid var(--ink); }
.steps h3 { font:600 18px/1.25 var(--body); margin:0 0 8px; }
.steps p { margin:0; font-size:15.5px; color:var(--ink-soft); }

/* dark band: the money path */
.band { background:var(--green-deep); color:#e9f1ea; position:relative; overflow:hidden; }
.band::after { content:""; position:absolute; left:-260px; bottom:-380px; width:760px; height:760px; background:url(/static/rosette.svg) center/contain no-repeat; opacity:.22; filter:brightness(2.4); pointer-events:none; }
.band .wrap { position:relative; z-index:1; display:grid; grid-template-columns:1fr 1.05fr; gap:64px; align-items:center; }
.band h2 { color:#fffdf6; }
.band h2 em, .band .kicker { color:#8fd3b1; }
.band .sub { color:#b9cfc2; }
.nots { list-style:none; padding:0; margin:30px 0 0; font-family:var(--mono); font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:#b9cfc2; }
.nots li { padding:11px 0; border-top:1px solid rgba(255,255,255,.14); display:flex; justify-content:space-between; gap:16px; }
.nots b { color:#fffdf6; font-weight:500; }
.path { background:rgba(255,253,246,.05); border:1px solid rgba(255,255,255,.16); border-radius:4px; padding:34px 30px 28px; }
.path .lane { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:14px; }
.node { border:1px solid rgba(255,255,255,.4); padding:16px 14px; text-align:center; border-radius:3px; }
.node small { display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:#8fd3b1; margin-bottom:5px; }
.node strong { font:500 21px/1.15 var(--display); }
.arrow { font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#fffdf6; text-align:center; min-width:110px; }
.arrow i { display:block; height:1px; background:#8fd3b1; margin:7px 0; position:relative; }
.arrow i::after { content:""; position:absolute; right:0; top:-4px; border:4px solid transparent; border-left:7px solid #8fd3b1; border-right:0; }
.aside { margin-top:26px; padding-top:20px; border-top:1px dashed rgba(255,255,255,.28); display:flex; gap:16px; align-items:center; }
.aside .node { border-style:dashed; flex:0 0 auto; }
.aside p { margin:0; font-size:14.5px; color:#b9cfc2; }

/* verification */
.duo { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; }
.slip { background:var(--sheet); border:1px solid var(--ink); padding:30px 30px 24px; box-shadow:9px 9px 0 var(--paper-deep), 9px 9px 0 1px var(--rule); font-family:var(--mono); font-size:13.5px; position:relative; }
.slip::before { /* perforation */ content:""; position:absolute; left:0; right:0; top:-7px; height:14px; background:radial-gradient(circle at 7px 7px, var(--paper) 5px, transparent 5.5px) 0 0/22px 14px repeat-x; }
.slip header { display:flex; justify-content:space-between; letter-spacing:.14em; text-transform:uppercase; font-size:11px; color:var(--ink-faint); padding-bottom:14px; border-bottom:1px solid var(--ink); }
.slip ul { list-style:none; margin:0; padding:0; }
.slip li { display:grid; grid-template-columns:22px 1fr auto; gap:10px; padding:15px 0; border-bottom:1px dashed var(--rule); align-items:baseline; }
.slip li b { font-family:var(--body); font-weight:600; font-size:16px; }
.slip li span { color:var(--ink-soft); font-size:12.5px; }
.slip li::before { content:"✓"; color:var(--green); font-weight:700; }
.slip footer { display:flex; justify-content:space-between; align-items:center; padding:16px 0 0; margin:0; border:0; max-width:none; color:var(--ink); letter-spacing:.12em; text-transform:uppercase; font-size:12px; }
.pill { background:var(--green); color:#fff; padding:6px 10px; border-radius:2px; }

/* record */
.log { background:var(--ink); color:#cfe0d5; font-family:var(--mono); font-size:13px; line-height:1.9; padding:28px 30px; border-radius:3px; overflow-x:auto; box-shadow:9px 9px 0 var(--green); }
.log .t { color:#6f8a7c; } .log .k { color:#8fd3b1; } .log .s { color:#f0c98a; }
pre { margin:0; white-space:pre; }

/* integrations */
.trio { display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:44px; border-top:2px solid var(--ink); border-bottom:1px solid var(--ink); }
.trio > div { padding:28px 28px 30px; border-left:1px solid var(--rule); }
.trio > div:first-child { border-left:0; padding-left:0; }
.trio .mono { color:var(--green); margin:0 0 12px; }
.trio h3 { font:500 27px/1.1 var(--display); margin:0 0 10px; }
.trio p { margin:0 0 16px; color:var(--ink-soft); font-size:15.5px; }
.trio a { font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; }

/* pricing */
.price-hero { padding:70px 0 44px; max-width:860px; }
.price-hero h1 { font:500 clamp(40px,5.4vw,74px)/1 var(--display); letter-spacing:-.025em; margin:0 0 24px; }
.price-hero h1 em { font-style:italic; font-weight:400; color:var(--green); }
.plans { display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.plan { background:var(--sheet); border:1px solid var(--ink); padding:34px 34px 30px; position:relative; box-shadow:9px 9px 0 var(--paper-deep), 9px 9px 0 1px var(--rule); }
.plan.lead { background:var(--mint) url(/static/safety.svg); }
.plan::before { content:""; position:absolute; left:0; right:0; top:-7px; height:14px; background:radial-gradient(circle at 7px 7px, var(--paper) 5px, transparent 5.5px) 0 0/22px 14px repeat-x; }
.plan .mono { color:var(--green); margin:0 0 10px; }
.plan h2 { font:500 34px/1.05 var(--display); margin:0 0 22px; max-width:none; }
.rate { margin:0; display:flex; align-items:baseline; gap:14px; }
.rate b { font:500 84px/.9 var(--display); letter-spacing:-.03em; }
.rate span { font:500 24px var(--mono); }
.per { font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin:8px 0 24px; padding-bottom:22px; border-bottom:1px solid var(--ink); }
.plan ul { list-style:none; margin:0 0 22px; padding:0; }
.plan li { padding:7px 0 7px 26px; position:relative; }
.plan li::before { content:"✓"; position:absolute; left:0; color:var(--green); font-weight:700; }
.eg { font-family:var(--mono); font-size:14px; border-top:1px dashed var(--ink); padding-top:16px; margin:0; }
.plan .small { font-size:13.5px; color:var(--ink-soft); margin:12px 0 0; }
.rules > div { padding:20px 0; border-top:1px solid var(--rule); }
.rules > div:first-child { border-top:2px solid var(--ink); }
.rules h3 { font:600 18px/1.3 var(--body); margin:0 0 6px; }
.rules p { margin:0; color:var(--ink-soft); font-size:15.5px; }

/* questions and answers */
.faq { display:grid; grid-template-columns:260px 1fr; gap:64px; align-items:start; padding-bottom:110px; }
.faq-index { position:sticky; top:24px; border-top:2px solid var(--ink); }
.faq-index a { display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:13px 0; border-bottom:1px solid var(--rule); color:var(--ink); text-decoration:none; font-size:15.5px; }
.faq-index a:hover span { color:var(--green); }
.faq-index i { font:normal 12px var(--mono); color:var(--ink-faint); }
.faq section { padding:0 0 46px; scroll-margin-top:20px; }
.faq h2 { font:500 34px/1.1 var(--display); margin:0 0 6px; padding-bottom:16px; border-bottom:2px solid var(--ink); max-width:none; }
.faq details { border-bottom:1px solid var(--rule); }
.faq summary { list-style:none; cursor:pointer; padding:20px 44px 20px 0; position:relative; font:600 18px/1.35 var(--body); }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; position:absolute; right:4px; top:17px; font:500 26px/1 var(--mono); color:var(--green); transition:transform .2s; }
.faq details[open] summary::after { transform:rotate(45deg); }
.faq summary:hover { color:var(--green); }
.faq details p { margin:0; padding:0 44px 24px 0; color:#2c4038; max-width:44em; }
.faq-more { background:var(--mint) url(/static/safety.svg); border:1px solid var(--ink); padding:30px 32px !important; }
.faq-more h2 { border:0; padding:0; margin-bottom:8px; }
.faq-more .btn { margin-top:12px; }

/* payer panel + close */
.note { border:1px solid var(--ink); background:var(--sheet); padding:38px 40px; display:grid; grid-template-columns:auto 1fr; gap:34px; align-items:start; }
.note .big { font:italic 400 80px/.8 var(--display); color:var(--green); }
.note h3 { font:500 30px/1.1 var(--display); margin:0 0 10px; }
.note p { margin:0; color:var(--ink-soft); }
.close { text-align:center; padding:110px 0 120px; }
.close h2 { margin-left:auto; margin-right:auto; }
.close .sub { margin:0 auto 34px; }

/* documents */
.doc { max-width:760px; padding:64px 0 90px; }
.doc h1 { font:500 clamp(40px,5vw,64px)/1 var(--display); letter-spacing:-.02em; margin:0 0 10px; }
.doc .dated { font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 40px; padding-bottom:22px; border-bottom:2px solid var(--ink); }
.doc h2 { font:500 27px/1.15 var(--display); margin:42px 0 10px; max-width:none; }
.doc li { margin-bottom:9px; }
.doc p, .doc li { color:#263a33; }

/* colophon */
.colophon { border-top:2px solid var(--ink); padding:30px 0 54px; display:grid; grid-template-columns:1.4fr 1fr; gap:40px; font-size:14px; color:var(--ink-soft); }
.colophon p { margin:0 0 8px; }
.colophon nav { display:flex; gap:22px; justify-content:flex-end; flex-wrap:wrap; font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; }
.colophon nav a { color:var(--ink); text-decoration:none; }

@media (max-width:960px) {
  .hero { grid-template-columns:1fr; padding:48px 0 70px; gap:56px; }
  .hero::before { right:-420px; top:60px; opacity:.35; }
  .stage { min-height:0; padding:0 10px 40px; }
  .cheque { margin:0 auto; }
  .ledger { grid-template-columns:1fr 1fr; }
  .ledger div:nth-child(3) { border-left:0; padding-left:0; }
  .ledger div:nth-child(n+3) { border-top:1px solid var(--rule); }
  .steps { grid-template-columns:1fr 1fr; row-gap:44px; }
  .band .wrap, .duo { grid-template-columns:1fr; gap:44px; }
  .faq { grid-template-columns:1fr; gap:30px; } .faq-index { position:static; }
  .plans { grid-template-columns:1fr; }
  .trio { grid-template-columns:1fr; } .trio > div { border-left:0; padding-left:0; border-top:1px solid var(--rule); } .trio > div:first-child { border-top:0; }
  section { padding:70px 0; }
}
@media (max-width:560px) {
  .wrap { padding:0 20px; }
  .mast nav a:not(:last-child) { display:none; }
  .steps { grid-template-columns:1fr; }
  .ledger dd { font-size:22px; }
  .path .lane { grid-template-columns:1fr; }
  .arrow i { width:1px; height:26px; margin:6px auto; }
  .arrow i::after { right:-4px; top:auto; bottom:-2px; border:4px solid transparent; border-top:7px solid #8fd3b1; border-bottom:0; }
  .note { grid-template-columns:1fr; padding:28px 24px; gap:10px; }
  .aside { flex-direction:column; align-items:flex-start; }
  .colophon { grid-template-columns:1fr; } .colophon nav { justify-content:flex-start; }
}