/* EasyInk landing page, design "Ink and signature" (approved for EasyInk only).
   Markup: src/templates/easyink.mjs. Behaviour: easyink.js.
   Ported from easyink-design-directions/directions/signature/style.css.
   The page is set like an agreement: hanging section marks in a left margin,
   one continuous ink line (script.js) that starts as the hero signature's
   back-stroke, runs down the margin, loops the completion seal and ends as
   the signature line on the demo request. Paper white, navy ink, one green
   reserved for "signature valid". Hairlines instead of cards. */

:root {
  color-scheme: light;
  --paper: #F7F7F4;
  --sheet: #FFFFFF;
  --ink: #0E1B3D;          /* body text, navy-black */
  --ink-2: #45506A;        /* secondary text */
  --ink-3: #5B6479;        /* captions, labels */
  --navy: #003282;         /* logo navy: headlines, ink, buttons */
  --navy-deep: #00256A;
  --link: #006CB3;         /* cyan family, AA on paper */
  --cyan: #00C8FF;         /* brand cyan: signal only, never text */
  --green: #17703E;        /* signature valid */
  --green-fill: #1B7A43;
  --green-wash: #EAF4EC;
  --rule: #DADDE4;
  --rule-2: #C3C9D5;
  --field: #737D93;
  --tint: #EEF2F8;
  --serif: 'Source Serif 4', 'Iowan Old Style', Georgia, serif;
  --sans: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Fragment Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --script: 'Mrs Saint Delafield', 'Snell Roundhand', cursive;
  --logo-navy: #003282;    /* the official logo's navy (inline SVG reads this) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --lift: 0 1px 1px rgba(14, 27, 61, .04), 0 2px 4px rgba(14, 27, 61, .04), 0 10px 20px rgba(14, 27, 61, .05), 0 28px 56px rgba(14, 27, 61, .07);
  --lift-sm: 0 1px 1px rgba(14, 27, 61, .04), 0 3px 8px rgba(14, 27, 61, .05), 0 12px 28px rgba(14, 27, 61, .05);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0; position: relative;
  background: var(--paper); color: var(--ink);
  font: 400 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
b, strong { font-weight: 600; }
.mono { font-family: var(--mono); font-feature-settings: 'zero' 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--navy); color: #fff; padding: 10px 14px; border-radius: 3px; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; border-radius: 2px; }

.wrap { max-width: 1240px; margin-inline: auto; padding-inline: 40px; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }

/* The ink line. Sized and drawn by script.js. */
#thread { position: absolute; left: 0; top: 0; width: 100%; height: 0; overflow: visible; pointer-events: none; z-index: 5; }
#thread path { fill: none; stroke: var(--navy); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- masthead ---------- */
.mast { position: sticky; top: 0; z-index: 30; background: var(--paper); }
.mast::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 18px; background: linear-gradient(var(--paper), rgba(247, 247, 244, 0)); pointer-events: none; }
.mast-in { display: flex; align-items: center; gap: 32px; height: 72px; }
.logo { display: inline-flex; flex: none; }
.logo .logo-svg { display: block; height: 34px; width: auto; }
.nav { margin-left: auto; }
.nav ul { display: flex; gap: 30px; }
.nav a { white-space: nowrap; font-size: 15px; color: var(--ink-2); text-decoration: none; transition: color .15s ease; }
.nav a:hover { color: var(--navy); }

/* ---------- buttons, links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 48px; padding: 0 22px; border: 0; border-radius: 3px;
  background: var(--navy); color: #fff; text-decoration: none; cursor: pointer;
  font: 500 16px/1 var(--sans); letter-spacing: .005em; white-space: nowrap;
  touch-action: manipulation;
  transition: background-color .15s ease, transform .16s var(--ease-out);
}
.btn:hover { background: var(--navy-deep); }
.btn:active { transform: scale(.97); }
.btn-sm { height: 38px; padding: 0 16px; font-size: 14.5px; }
.btn-lg { height: 52px; padding: 0 26px; font-size: 16.5px; }
.btn-block { width: 100%; }
.textlink { color: var(--link); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.textlink:hover { text-decoration-thickness: 2px; }

/* ---------- shared type ---------- */
.eyebrow { font: 600 12.5px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--navy); }
.h2 { font: 400 44px/1.08 var(--serif); font-variation-settings: 'opsz' 60; letter-spacing: -.016em; color: var(--navy); text-wrap: balance; }
.h2-xl { font-size: 50px; line-height: 1.05; }
.h2-sm { font-size: 34px; line-height: 1.12; }
.sub { margin-top: 18px; font-size: 18px; line-height: 1.6; color: var(--ink-2); max-width: 62ch; text-wrap: pretty; }
.mlabel { grid-column: 1 / 3; grid-row: 1; justify-self: end; max-width: 11em; padding: 10px 24px 0 0; text-align: right; font: italic 400 17px/1.3 var(--serif); color: var(--ink-2); }
.mlabel .sect { font-style: normal; color: var(--link); margin-right: 4px; }
.sec { padding: 116px 0 0; }
.sec-head { grid-column: 3 / 12; grid-row: 1; }

/* ---------- sheets of paper ---------- */
.sheet { background: var(--sheet); border-radius: 2px; box-shadow: 0 0 0 1px rgba(14, 27, 61, .07), var(--lift); }

/* ---------- hero ---------- */
.hero { padding: 44px 0 100px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "head doc" "rest doc"; column-gap: 76px; }
.hero-head { grid-area: head; padding-top: 34px; }
.hero-rest { grid-area: rest; }
.hero-art { grid-area: doc; }
.hero h1 { margin-top: 22px; font: 400 60px/1.03 var(--serif); font-variation-settings: 'opsz' 60; letter-spacing: -.02em; color: var(--navy); text-wrap: balance; }
/* balance: the longer headline (copy of 2026-10-05) otherwise leaves "hires:" alone on a line at 1280 to 1440 */
.nb { white-space: nowrap; }
.lede { margin-top: 28px; font-size: 18.5px; line-height: 1.58; color: var(--ink-2); max-width: 35em; text-wrap: pretty; }
.cta-row { display: flex; align-items: center; gap: 28px; margin-top: 34px; flex-wrap: wrap; }

.ledger { display: grid; grid-template-columns: auto 1fr; align-items: end; column-gap: 22px; margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--rule); max-width: 560px; }
.ledger-num { font: 400 46px/1 var(--serif); font-variation-settings: 'opsz' 60; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.01em; color: var(--navy); padding-bottom: 6px; border-bottom: 3px double var(--navy); }
.ledger-lbl { font-size: 15.5px; line-height: 1.35; color: var(--ink); padding-bottom: 6px; }
.trustline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 560px; margin-top: 20px; font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.trustline li { padding: 0 14px; border-left: 1px solid var(--rule-2); }
.trustline li:first-child { padding-left: 0; border-left: 0; }

/* hero document: the signature page of a sample application, audit report behind it */
.stack { position: relative; padding-top: 38px; isolation: isolate; }
.sheet-back { position: absolute; inset: 0 0 26px 38px; z-index: 0; }
.back-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 13px 18px 0 22px; }
.back-k { font: 600 9.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.back-t { font: 600 12px/1 var(--sans); color: var(--navy); }
.sheet-front { position: relative; z-index: 1; margin: 0 38px 0 0; padding: 34px 38px 26px; }
.d-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 12px; border-bottom: 3px solid var(--navy); }
.d-org { font: 600 10.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--navy); }
.d-no { font-size: 10.5px; color: var(--ink-2); }
.d-title { margin-top: 18px; font: 600 20px/1.2 var(--sans); color: var(--ink); letter-spacing: -.005em; }
.d-bar { margin-top: 18px; padding: 5px 8px; background: var(--tint); font: 600 10.5px/1.2 var(--sans); color: var(--navy); }
.d-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; margin-top: 12px; padding: 0 8px; }
.d-grid dt { font-size: 9.5px; line-height: 1.3; color: var(--ink-3); }
.d-grid dd { font-size: 12.5px; line-height: 1.35; color: var(--ink); }
.d-text { margin-top: 10px; padding: 0 8px; font-size: 11.5px; line-height: 1.5; color: var(--ink-2); }
.d-sign { display: grid; grid-template-columns: 1.45fr 1fr; gap: 26px; margin-top: 22px; padding: 0 8px; }
.d-field { display: flex; flex-direction: column; justify-content: flex-end; min-height: 74px; }
.d-lab { display: block; padding-top: 6px; border-top: 1px solid var(--ink); font-size: 10px; color: var(--ink-3); }
.sig { font: 400 52px/1 var(--script); color: var(--navy); white-space: nowrap; }
#hero-sig { display: inline-block; align-self: flex-start; padding: 0 10px 0 4px; margin-bottom: -6px; }
.stamp { font-size: 12px; color: var(--navy); padding-bottom: 6px; }
.d-foot { margin-top: 30px; padding-top: 9px; border-top: 1px solid var(--rule); font-size: 8.6px; line-height: 1.55; color: var(--ink-3); }
.hero-doc figcaption { margin: 16px 38px 0 0; font-size: 13px; line-height: 1.45; color: var(--ink-3); }
/* the three hero callouts, set as a short legend under the illustration (real product facts, not sample data) */
.callouts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 26px 38px 0 0; padding-top: 16px; border-top: 1px solid var(--rule); }
.callouts div { padding: 0 14px; border-left: 1px solid var(--rule-2); }
.callouts div:first-child { padding-left: 0; border-left: 0; }
.callouts dt { font: 600 10.5px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.callouts dd { margin-top: 6px; font-size: 15px; line-height: 1.4; color: var(--navy); }

/* signing sequence (only when motion is allowed; see script.js) */
.anim #hero-sig { clip-path: inset(-40% 100% -40% -12%); }
.anim .stamp { opacity: 0; }
.anim.signed #hero-sig { clip-path: inset(-40% -12% -40% -12%); transition: clip-path 1.25s var(--ease-in-out); }
.anim.signed .stamp { opacity: 1; transition: opacity .25s ease 1.3s; }

/* ---------- 1 in brief ---------- */
.brief-main { grid-column: 3 / 8; grid-row: 1; }
.terms { grid-column: 8 / -1; grid-row: 1; align-self: start; margin-top: 6px; border-top: 2px solid var(--navy); }
.terms div { display: grid; grid-template-columns: 9.5rem 1fr; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--rule); }
.terms dt { font-size: 15.5px; line-height: 1.5; font-weight: 600; color: var(--navy); }
.terms dd { font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.clauses { grid-column: 3 / -1; margin-top: 80px; }
.clauses li { display: grid; grid-template-columns: 3fr 4fr 5fr; column-gap: 24px; padding: 28px 0 30px; border-top: 1px solid var(--rule); }
.clauses li:last-child { border-bottom: 1px solid var(--rule); }
.cl-k { font: italic 400 17px/1.4 var(--serif); color: var(--ink-2); }
.clauses h3 { font: 400 23px/1.25 var(--serif); font-variation-settings: 'opsz' 32; color: var(--navy); letter-spacing: -.008em; text-wrap: balance; }
.clauses li > p:last-child { font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }

/* ---------- 2 how it works ---------- */
.how-head { grid-column: 3 / 11; }
.steps { margin-top: 40px; }
.step { position: relative; grid-template-rows: auto 1fr; margin-top: 56px; }
.numeral {
  grid-column: 3; grid-row: 1; justify-self: start; position: relative; z-index: 6;
  margin-left: -12px; transform: translateX(-50%);
  padding: 14px 0 18px; background: var(--paper);
  font: 300 104px/.86 var(--serif); font-variation-settings: 'opsz' 60; font-variant-numeric: lining-nums; color: var(--navy);
}
.step-text { grid-column: 3 / 7; grid-row: 2; padding-top: 8px; }
.step-text h3 { font: 400 28px/1.18 var(--serif); font-variation-settings: 'opsz' 40; letter-spacing: -.01em; color: var(--navy); }
.step-text > p { margin-top: 14px; font-size: 16.5px; color: var(--ink-2); max-width: 44ch; }
.pts { margin-top: 22px; }
.pts li { padding: 9px 0; border-top: 1px solid var(--rule); font-size: 14.5px; line-height: 1.45; color: var(--ink); }
.pts li:last-child { border-bottom: 1px solid var(--rule); }
.shot { grid-column: 7 / -1; grid-row: 1 / 3; align-self: start; margin-top: 30px; }
.shot figcaption, .cert-doc figcaption { margin-top: 12px; font-size: 13px; line-height: 1.45; color: var(--ink-3); }
.crop { position: relative; overflow: hidden; border-radius: 3px; background: #fff; box-shadow: 0 0 0 1px rgba(14, 27, 61, .1), var(--lift-sm); }
.crop img { position: absolute; max-width: none; height: auto; }
.crop-1 { aspect-ratio: 944 / 660; }
.crop-1 img { width: 152.542%; left: -1.695%; top: -21.212%; }
.crop-3 { aspect-ratio: 1100 / 550; }
.crop-3 img { width: 130.909%; left: -29.273%; top: -4%; }
.crop-deliv { aspect-ratio: 508 / 138; }
.crop-deliv img { width: 283.465%; left: -90.945%; top: -327.536%; }
.shot-phone { grid-column: 8 / 12; }
.phone { width: 268px; padding: 9px; border-radius: 38px; background: #fff; box-shadow: 0 0 0 1.5px var(--navy), var(--lift); }
.phone img { width: 100%; border-radius: 30px; }

/* ---------- 3 certificate ---------- */
.cert-head { grid-column: 3 / 12; }
.cert-head .h2 { margin-top: 0; }
.cert-doc { grid-column: 3 / 9; grid-row: 2; margin-top: 64px; position: relative; isolation: isolate; }
.statusbar { display: flex; align-items: center; gap: 10px; padding: 11px 16px; background: var(--green-wash); border: 1px solid #BCD9C4; border-bottom: 0; border-radius: 3px 3px 0 0; color: #13532F; font-size: 14.5px; font-weight: 500; }
.sb-check { width: 20px; height: 20px; flex: none; }
.sb-check circle { fill: var(--green-fill); }
.sb-check path { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.statusbar .mk { margin-left: auto; }
.mk { font: italic 400 15px/1 var(--serif); color: var(--link); white-space: nowrap; }
.audit { padding: 34px 40px 38px; border-radius: 0 0 2px 2px; }
.ar-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; padding-bottom: 16px; border-bottom: 3px solid var(--navy); }
.ar-k { font: 600 10.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.ar-t { margin-top: 8px; font: 600 24px/1.1 var(--sans); color: var(--navy); letter-spacing: -.01em; }
.ar-file { font-size: 11.5px; color: var(--ink-2); text-align: right; }
.ar-rows { margin-top: 6px; }
.ar-rows div { display: grid; grid-template-columns: 8.2rem 1fr; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.ar-rows dt { font-size: 12.5px; color: var(--ink-3); }
.ar-rows dd { font-size: 13px; color: var(--ink); overflow-wrap: anywhere; }
.ar-rows dd.mono { font-size: 12px; }
.ar-sub { margin-top: 26px; font: 600 10.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.ar-sub .mk { margin-left: 6px; letter-spacing: 0; text-transform: none; }
.ar-hist { margin-top: 10px; }
.ar-hist li { display: grid; grid-template-columns: 1fr auto; column-gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.ar-hist .ev { grid-column: 1; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.ar-hist .det { grid-column: 1; margin-top: 3px; font-size: 11.5px; line-height: 1.5; color: var(--ink-2); }
.sig-sm { grid-column: 2; grid-row: 1 / 3; align-self: center; font-size: 40px; padding: 0 6px; }
.ar-seal { display: flex; align-items: center; gap: 40px; margin-top: 30px; padding-left: 6px; }
/* A clean green check: no rings, rosette or microtext around it (prototype, 2026-10-05). */
.seal { width: 88px; height: 88px; flex: none; overflow: visible; }
.s-green { fill: var(--green-fill); }
.s-check { fill: none; stroke: #fff; stroke-width: 7.5; stroke-linecap: round; stroke-linejoin: round; }
.seal-t { font: 400 22px/1.2 var(--serif); color: var(--navy); }
.seal-d { margin-top: 6px; font-size: 12.5px; color: var(--ink-2); }

.notes { grid-column: 9 / -1; grid-row: 2; margin-top: 64px; padding-left: 8px; }
.notes li { display: grid; grid-template-columns: 34px 1fr; padding: 18px 0 20px; border-top: 1px solid var(--rule); }
.notes li:first-child { border-top: 2px solid var(--navy); }
.notes .mk { grid-row: 1; padding-top: 5px; }
.notes h3 { grid-column: 2; font: 400 21px/1.25 var(--serif); font-variation-settings: 'opsz' 32; color: var(--navy); }
.notes p { grid-column: 2; margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--ink-2); }

.checkit { grid-column: 3 / -1; grid-row: 3; display: grid; grid-template-columns: 3fr 9fr; column-gap: 24px; margin-top: 72px; padding: 26px 0 0; border-top: 2px solid var(--navy); }
.checkit h3 { font: 400 24px/1.2 var(--serif); color: var(--navy); }
.checkit ol { list-style: decimal; padding-left: 22px; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 36px; }
.checkit ol li { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); padding-left: 4px; }
.checkit ol li::marker { font: 400 17px var(--serif); color: var(--navy); }
.checkit-p { grid-column: 1 / -1; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }

/* ---------- 4 capabilities ---------- */
.caps-head { grid-column: 3 / 11; }
.caplist { margin-top: 64px; }
.cap { padding: 38px 0 40px; border-top: 1px solid var(--rule); }
.cap:last-child { border-bottom: 1px solid var(--rule); }
.roman { grid-column: 1 / 3; grid-row: 1; justify-self: end; padding: 2px 24px 0 0; font: italic 400 22px/1.2 var(--serif); color: var(--navy); }
.cap h3 { grid-column: 3 / 6; font: 400 25px/1.2 var(--serif); font-variation-settings: 'opsz' 36; letter-spacing: -.01em; color: var(--navy); text-wrap: balance; padding-right: 8px; }
.cap-body { grid-column: 6 / 9; }
.cap-body p { font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
.cap-body .why { margin-top: 14px; font: italic 400 17px/1.45 var(--serif); color: var(--ink); }
.spec { grid-column: 9 / -1; align-self: start; padding-left: 12px; }
.spec-cap { font-size: 12.5px; line-height: 1.4; color: var(--ink-3); }
.spec-list ul { margin-top: 8px; border-top: 1px solid var(--rule-2); }
.spec-list li { padding: 8px 0; border-bottom: 1px solid var(--rule); font-size: 14.5px; color: var(--ink); }
.pageedge { position: relative; padding: 10px 18px 14px; background: #fff; border-radius: 0 0 2px 2px; box-shadow: 0 0 0 1px rgba(14, 27, 61, .08), var(--lift-sm); -webkit-mask-image: linear-gradient(transparent, #000 34px); mask-image: linear-gradient(transparent, #000 34px); }
.pe-sig { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; align-items: end; padding-top: 14px; }
.pe-sig .sig { font-size: 30px; line-height: 1; padding-left: 2px; }
.pe-sig .stamp { font-size: 10px; padding-bottom: 4px; }
.pe-sig span.pe-lab { grid-row: 2; display: block; padding-top: 4px; border-top: 1px solid var(--ink); font-size: 9px; color: var(--ink-3); }
.pageedge p.mono { margin-top: 16px; font-size: 10px; line-height: 1.6; color: var(--ink-2); padding-top: 8px; border-top: 1px solid var(--rule); }
.spec-footer .spec-cap, .spec-fix .spec-cap { margin-top: 10px; }
.ro-stamp { display: inline-block; padding: 7px 12px 6px; border: 1.5px solid var(--navy); border-radius: 2px; font: 600 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--navy); }
.spec-ro p { margin-top: 12px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.spec-shot .crop { box-shadow: 0 0 0 1px rgba(14, 27, 61, .12); }
.spec-shot figcaption { margin-top: 10px; }
.fx-old { font-size: 13px; color: var(--ink-3); }
.fx-old s { text-decoration-color: var(--navy); text-decoration-thickness: 1.5px; }
.fx-new { margin-top: 4px; font-size: 13px; color: var(--navy); }
.fx-steps { margin-top: 14px; border-top: 1px solid var(--rule-2); }
.fx-steps li { padding: 7px 0; border-bottom: 1px solid var(--rule); font-size: 14px; color: var(--ink); }
.fx-steps li::before { content: counter(list-item) '  '; font: italic 400 15px var(--serif); color: var(--ink-3); white-space: pre; }

/* ---------- 5 essentials ---------- */
.ess-head { grid-column: 3 / 9; }
.ess { grid-column: 3 / -1; margin-top: 44px; columns: 3; column-gap: 48px; column-rule: 1px solid var(--rule); }
.ess p { break-inside: avoid; margin-bottom: 18px; font-size: 15px; line-height: 1.58; color: var(--ink-2); }
.ess b { color: var(--navy); }

/* ---------- 6 security ---------- */
.security { padding-top: 120px; }
.microtext { overflow: hidden; white-space: nowrap; margin-bottom: 104px; padding: 4px 0 3px; border-block: 1px solid rgba(0, 50, 130, .28); font: 6.4px/1 var(--mono); letter-spacing: .12em; color: rgba(0, 50, 130, .72); user-select: none; }
.sec-sec-head { grid-column: 3 / 11; }
.spec-table { grid-column: 3 / -1; margin-top: 48px; width: 100%; border-collapse: collapse; border-top: 2px solid var(--navy); }
.spec-table thead th { padding: 12px 0; text-align: left; font: 600 11.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--rule-2); }
.spec-table tbody th { width: 38%; padding: 20px 24px 20px 0; text-align: left; vertical-align: top; font: 400 21px/1.3 var(--serif); font-variation-settings: 'opsz' 32; color: var(--navy); }
.spec-table td { padding: 21px 0 20px; vertical-align: top; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.spec-table tbody tr { border-bottom: 1px solid var(--rule); }
.sec-note { grid-column: 3 / -1; margin-top: 24px; font-size: 15.5px; color: var(--ink-2); }
.sec-note a { color: var(--link); text-underline-offset: 4px; }

/* ---------- 7 industries ---------- */
.ind-head { grid-column: 3 / 11; }
.folders { grid-column: 3 / -1; margin-top: 40px; }
.folder { position: relative; margin-top: 44px; padding: 30px 36px 32px; background: var(--sheet); border: 1px solid var(--rule-2); border-radius: 0 3px 3px 3px; }
.f2, .f3, .f4 { border-radius: 3px; }
.tab { position: absolute; bottom: 100%; height: 36px; display: flex; align-items: center; padding: 0 20px; margin-bottom: -1px; background: var(--sheet); border: 1px solid var(--rule-2); border-bottom: 0; border-radius: 4px 4px 0 0; font: 600 13.5px/1 var(--sans); letter-spacing: .01em; color: var(--navy); }
.tab::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--sheet); }
.f1 .tab { left: -1px; }
.f2 .tab { left: 25%; }
.f3 .tab { left: 50%; }
.f4 .tab { left: 75%; }
.f-body { display: grid; grid-template-columns: 5fr 6fr; column-gap: 48px; align-items: start; }
.folder h3 { font: 400 25px/1.2 var(--serif); font-variation-settings: 'opsz' 36; color: var(--navy); letter-spacing: -.01em; text-wrap: balance; }
.folder p:last-child { font-size: 16px; line-height: 1.6; color: var(--ink-2); }

/* ---------- 8 questions ---------- */
.faq-head { grid-column: 3 / 11; }
.qa { grid-column: 3 / -1; margin-top: 40px; columns: 2; column-gap: 56px; }
.qa details { break-inside: avoid; padding: 18px 0 20px; border-top: 1px solid var(--rule); }
.qa summary { display: grid; grid-template-columns: 34px 1fr; list-style: none; cursor: pointer; font: 400 20px/1.32 var(--serif); font-variation-settings: 'opsz' 28; color: var(--navy); touch-action: manipulation; }
.qa summary::-webkit-details-marker { display: none; }
.qa .q, .qa .a { font-style: italic; color: var(--ink-3); }
.qa details p { display: grid; grid-template-columns: 34px 1fr; margin-top: 10px; font-size: 15.5px; line-height: 1.62; color: var(--ink-2); }
.qa .a { font: italic 400 17px/1.5 var(--serif); }

/* ---------- 9 demo ---------- */
.demo { padding-bottom: 140px; }
.demo-copy { grid-column: 3 / 7; grid-row: 1; padding-top: 6px; }
.demo-pts { margin-top: 30px; max-width: 360px; }
.demo-pts li { padding: 12px 0; border-top: 1px solid var(--rule); font-size: 16px; color: var(--ink); }
.demo-pts li:last-child { border-bottom: 1px solid var(--rule); }
.formsheet { grid-column: 7 / -1; grid-row: 1 / 3; padding: 34px 40px 36px; }
.form-k { font: 600 11.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); padding-bottom: 14px; border-bottom: 3px solid var(--navy); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; margin-top: 24px; }
.field.full { grid-column: 1 / -1; }
.field label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 500; color: var(--ink); }
.opt { font-weight: 400; color: var(--ink-3); }
.field input, .field select, .field textarea {
  width: 100%; height: 46px; padding: 0 12px; border: 1px solid var(--field); border-radius: 2px;
  background: #fff; color: var(--ink); font: 400 16px/1.4 var(--sans); touch-action: manipulation;
  transition: border-color .15s ease;
}
.field textarea { height: auto; min-height: 84px; padding: 11px 12px; resize: vertical; }
.field select { appearance: none; padding-right: 34px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23003282' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 13px center; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--link); outline-offset: 1px; border-color: var(--navy); }
.field input[aria-invalid='true'], .field select[aria-invalid='true'] { border-color: #A4262C; }
::placeholder { color: #69728A; opacity: 1; }
.signoff { margin: 30px 0 22px; }
.sigline { position: relative; height: 56px; border-bottom: 1px solid var(--ink); }
.has-thread .sigline { border-bottom-color: transparent; }
.sig-x { position: absolute; left: 2px; bottom: 6px; font: 400 20px/1 var(--serif); color: var(--ink-3); }
/* No overflow clipping: script capitals and loops draw well outside the line box. Long names shrink to fit (script.js). */
.sig-mirror { position: absolute; left: 30px; right: 10px; bottom: -6px; font-size: 46px; line-height: 1; overflow: visible; }
.sigline-lab { margin-top: 7px; font-size: 12.5px; color: var(--ink-3); }
.btn:disabled, .btn[aria-disabled='true'] { opacity: .6; cursor: default; transform: none; }
.btn.is-loading .btn-label { opacity: .7; filter: blur(2px); }
.form-error { display: none; margin-top: 12px; font-size: 14px; color: #A4262C; }
.fine { margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.form-done h3 { margin-top: 24px; font: 400 30px/1.15 var(--serif); color: var(--navy); }
.form-done p:last-child { margin-top: 12px; font-size: 16.5px; color: var(--ink-2); }

/* ---------- footer ---------- */
.foot { margin-top: 0; border-top: 2px solid var(--navy); padding: 40px 0 56px; position: relative; z-index: 6; background: var(--paper); }
.foot-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.foot-row .logo .logo-svg { height: 30px; }
.foot nav ul { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.foot nav a { font-size: 14.5px; color: var(--ink-2); text-decoration: none; }
.foot nav a:hover { color: var(--navy); text-decoration: underline; text-underline-offset: 4px; }
.foot-legal { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--rule); font-size: 13px; line-height: 1.55; color: var(--ink-3); }
.foot-legal p + p { margin-top: 6px; max-width: 92ch; }

@media (hover: hover) and (pointer: fine) {
  .qa summary:hover { color: var(--navy-deep); }
}

/* ---------- tablet ---------- */
@media (max-width: 1099px) {
  .nav ul { gap: 20px; }
  .hero-grid { column-gap: 48px; }
  .hero h1 { font-size: 48px; }
  .nb { white-space: normal; }
}
@media (max-width: 899px) {
  .nav { display: none; }
  .mast .btn-sm { margin-left: auto; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "doc" "rest"; }
  .hero-art { margin-top: 36px; max-width: 600px; }
}
@media (max-width: 1099px) {
  .brief-main, .terms, .clauses, .how-head, .cert-head, .cert-doc, .notes, .checkit, .caps-head, .ess-head, .ess, .sec-sec-head, .spec-table, .sec-note, .ind-head, .folders, .faq-head, .qa, .demo-copy, .formsheet { grid-column: 3 / -1; }
  .terms { grid-row: 2; margin-top: 40px; }
  .step-text { grid-column: 3 / -1; }
  .shot, .shot-phone { grid-column: 3 / -1; grid-row: 3; margin-top: 28px; }
  .cert-doc { grid-row: 2; }
  .notes { grid-row: 3; padding-left: 0; }
  .checkit { grid-row: 4; }
  .cap h3 { grid-column: 3 / -1; }
  .cap-body { grid-column: 3 / 8; margin-top: 14px; }
  .spec { grid-column: 8 / -1; margin-top: 14px; }
  .ess { columns: 2; }
  .formsheet { grid-row: 2; margin-top: 40px; }
}

/* ---------- phone ---------- */
@media (max-width: 759px) {
  body { font-size: 16px; line-height: 1.55; }
  .wrap { padding: 0 18px 0 28px; }
  .grid { display: block; }
  .mast-in { height: 60px; gap: 12px; }
  .logo .logo-svg { height: 28px; }
  .nav { display: none; }
  .mast .btn-sm { margin-left: auto; height: 36px; padding: 0 14px; font-size: 14px; }
  .mast-in { padding-left: 0; }
  .mast .wrap { padding-left: 18px; }

  .hero { padding: 6px 0 50px; }
  .hero-head { padding-top: 22px; }
  .eyebrow { font-size: 11.5px; }
  .hero h1 { margin-top: 14px; font-size: 38px; line-height: 1.06; letter-spacing: -.018em; }
  .nb { white-space: normal; }
  .hero-art { margin-top: 24px; }
  .stack { padding-top: 22px; }
  .sheet-back { inset: 0 0 22px 20px; }
  .back-head { padding: 7px 10px 0 14px; }
  .back-k { font-size: 8px; }
  .back-t { font-size: 10px; }
  .sheet-front { margin: 0 20px 0 0; padding: 20px 18px 16px; }
  .d-org { font-size: 9px; letter-spacing: .06em; }
  .d-no { font-size: 9px; }
  .d-bar-cov { display: none; }
  .d-title { margin-top: 12px; font-size: 16px; }
  .d-grid { display: none; }
  .d-bar { margin-top: 12px; }
  
  .d-text { font-size: 11px; }
  .d-sign { grid-template-columns: 1.2fr 1fr; gap: 14px; margin-top: 10px; padding: 0 4px; }
  .d-field { min-height: 60px; }
  .sig { font-size: 42px; }
  .stamp { font-size: 10px; }
  .d-foot { margin-top: 18px; font-size: 7.6px; }
  .hero-doc figcaption { margin: 12px 20px 0 0; font-size: 12.5px; }
  /* phones: one row per callout, label left, value right */
  .callouts { grid-template-columns: max-content minmax(0, 1fr); column-gap: 18px; margin: 18px 20px 0 0; padding-top: 4px; }
  .callouts div { display: contents; }
  .callouts dt, .callouts dd { padding: 8px 0 7px; border-bottom: 1px solid var(--rule); }
  .callouts dt { font-size: 10px; line-height: 1.95; letter-spacing: .1em; }
  .callouts dd { margin-top: 0; font-size: 14px; line-height: 1.4; }
  .trustline { font-size: 12.5px; }
  .trustline li { padding: 0 10px; }
  
  .lede { margin-top: 30px; font-size: 17px; }
  .cta-row { margin-top: 26px; gap: 22px; }
  .ledger { margin-top: 34px; column-gap: 16px; }
  .ledger-num { font-size: 36px; }
  .ledger-lbl { font-size: 14px; }

  .sec { padding-top: 76px; }
  .mlabel { display: block; justify-self: start; padding: 0; margin-bottom: 12px; text-align: left; font-size: 16px; }
  .h2 { font-size: 31px; line-height: 1.12; }
  .h2-xl { font-size: 32px; }
  .h2-sm { font-size: 28px; }
  .sub { font-size: 16.5px; line-height: 1.55; margin-top: 14px; }

  .terms { margin-top: 32px; }
  .terms div { grid-template-columns: 7.2rem 1fr; gap: 12px; }
  .terms dd { font-size: 15px; }
  .clauses { margin-top: 44px; }
  .clauses li { display: block; padding: 22px 0; }
  .clauses h3 { margin-top: 6px; font-size: 21px; }
  .clauses li > p:last-child { margin-top: 8px; font-size: 15px; line-height: 1.55; }
  .clauses li { padding: 20px 0 22px; }

  .steps { margin-top: 12px; }
  .step { margin-top: 48px; }
  .numeral { display: block; transform: none; margin: 0; padding: 0; background: none; font-size: 72px; }
  .step-text { padding-top: 10px; }
  .step-text h3 { font-size: 25px; }
  .step-text > p { font-size: 16px; }
  .shot { margin-top: 24px; }
  .phone { width: 190px; padding: 7px; border-radius: 30px; }
  .phone img { border-radius: 24px; }
  .pts li { padding: 7px 0; font-size: 14px; }

  .cert-doc { margin-top: 36px; }
  .statusbar { font-size: 13px; padding: 10px 12px; gap: 8px; }
  .audit { padding: 22px 18px 26px; }
  .ar-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .ar-file { text-align: left; }
  .ar-rows div { grid-template-columns: 5.6rem 1fr; gap: 10px; }
  .ar-rows dd.mono { font-size: 11px; }
  .ar-hist li { display: block; }
  .ar-hist .det { display: block; font-size: 10.5px; }
  .ar-hist .ev { display: block; }
  .sig-sm { display: block; margin-top: 2px; font-size: 36px; }
  .ar-seal { gap: 28px; margin-top: 24px; padding-left: 0; }
  .seal { width: 76px; height: 76px; }
  .seal-t { font-size: 19px; }
  .notes { margin-top: 40px; }
  .notes h3 { font-size: 20px; }
  .notes p { font-size: 14.5px; line-height: 1.55; }
  .notes li { padding: 14px 0 16px; }
  .checkit { display: block; margin-top: 44px; }
  .checkit ol { display: block; margin-top: 14px; }
  .checkit ol li + li { margin-top: 10px; }

  .caplist { margin-top: 36px; }
  .cap { display: grid; grid-template-columns: 34px 1fr; padding: 24px 0 26px; }
  .spec-list { display: none; }
  .roman { grid-column: 1; justify-self: start; padding: 2px 0 0; font-size: 19px; }
  .cap h3 { grid-column: 2; font-size: 21px; padding: 0; }
  .cap-body, .spec { grid-column: 1 / -1; margin-top: 14px; padding-left: 0; }
  .cap-body p { font-size: 15px; }

  .ess { margin-top: 28px; columns: 1; }
  .ess p { margin-bottom: 10px; font-size: 14.5px; line-height: 1.5; }

  .security { padding-top: 88px; }
  .microtext { margin-bottom: 60px; }
  .spec-table { margin-top: 32px; }
  .spec-table thead { display: none; }
  .spec-table, .spec-table tbody, .spec-table tr, .spec-table th, .spec-table td { display: block; width: auto; }
  .spec-table tbody tr { padding: 18px 0; }
  .spec-table tbody th { width: auto; padding: 0; font-size: 19px; }
  .spec-table td { padding: 6px 0 0; font-size: 15px; }

  .folders { margin-top: 18px; }
  .folder { display: block; margin-top: 46px; padding: 22px 20px 24px; }
  .tab { height: 34px; padding: 0 14px; font-size: 13px; }
  .f2 .tab { left: 16%; }
  .f3 .tab { left: 32%; }
  .f4 .tab { left: 48%; }
  .f-body { display: block; }
  .folder h3 { font-size: 21px; }
  .folder p:last-child { margin-top: 10px; font-size: 15px; }

  .qa { columns: 1; margin-top: 24px; }
  .qa summary { grid-template-columns: 28px 1fr 18px; font-size: 18px; }
  .qa summary::after { content: '+'; font: 300 22px/1 var(--sans); color: var(--navy); justify-self: end; }
  .qa details[open] summary::after { content: '\00D7'; }
  .qa details p { grid-template-columns: 28px 1fr; font-size: 15px; }

  .demo { padding-bottom: 72px; }
  .demo-pts { margin-top: 22px; }
  .formsheet { margin-top: 36px; padding: 24px 18px 24px; }
  .fgrid { grid-template-columns: 1fr 1fr; gap: 14px 12px; }
  .field:nth-child(1), .field:nth-child(2), .field:nth-child(5), .field:nth-child(6) { grid-column: 1 / -1; }
  .sig-mirror { font-size: 40px; }

  .foot .wrap { padding-left: 18px; }
  .foot-row { display: block; }
  .foot nav { margin-top: 22px; }
  .foot nav ul { gap: 10px 20px; }
}

/* ---------- very narrow phones (under 360px) ----------
   The signature and the date stamp cannot sit side by side without pushing past the
   screen edge, so the date moves under the signature. */
@media (max-width: 359px) {
  .d-sign { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .d-field { min-height: 52px; }
}

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