/* ===========================================================================
   Landing page: hero, pillars, the edited invoice, the check, the limits.
   =========================================================================== */

/* ---- hero --------------------------------------------------------------- */
.hero{
  min-height:calc(78vh - var(--nav-h));
  display:flex; flex-direction:column; justify-content:center;
  padding-block:64px 40px;
}
.hero h1{ max-width:16ch; }
.hero .lede{ max-width:36rem; color:var(--graphite); margin-top:24px; }
.hero-actions{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:36px; }

/* ---- pillars: three isometric figures, one generator --------------------- */
.pillars{ padding-top:32px; }
.pillar-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:56px; }
.fig{ width:100%; height:auto; color:var(--ink); }
.fig path{
  fill:none; stroke:currentColor; stroke-width:1.5;
  vector-effect:non-scaling-stroke; stroke-linejoin:round; stroke-linecap:round;
}
.fig .face{ fill:var(--paper); }
.fig .top{ fill:var(--paper-sunk); }
.fig .thin{ stroke:var(--graphite); stroke-width:1; }
.fig .sight{ stroke:var(--graphite); stroke-width:1; stroke-dasharray:3 3; }
.fig .mod{ fill:currentColor; stroke:none; }
.fig .accent{ stroke:var(--accent); }
.fig .mod.accent{ fill:var(--accent); }
.fig .lbl{ font-family:var(--font-mono); font-size:8px; fill:var(--graphite); }
.fig .ink-t{ fill:var(--ink); }
.fig .accent-t{ fill:var(--accent); }
.pillar h3{ margin-top:28px; }
.pillar p{ margin-top:10px; color:var(--graphite); }

/* ---- the document: the payslip used by the problem and the check -------- */
.doc{
  position:relative; background:var(--sheet); border:1px solid var(--rule); border-radius:var(--radius-sm);
  padding:24px 24px 22px; font-size:0.875rem; width:100%;
}
.doc-head{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding-bottom:14px; border-bottom:1px solid var(--rule); }
.doc-head b{ font-family:var(--font-serif); font-weight:600; font-size:1rem; }
.doc-head span{ color:var(--graphite); font-size:0.8125rem; }
.doc dl{ display:grid; grid-template-columns:auto 1fr; margin-top:6px; }
.doc dt, .doc dd{ padding:7px 0; border-bottom:1px solid var(--paper-sunk); }
.doc dt{ color:var(--graphite); padding-right:16px; }
.doc dd{ text-align:right; font-variant-numeric:tabular-nums; }
.doc dt.total, .doc dd.total{ font-weight:500; color:var(--ink); }
.doc-foot{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-top:18px; }
.stamp{ width:96px; flex:none; }
.stamp svg, .mini svg{ width:100%; height:auto; }
/* the one field that differs, marked the same on the page and in the verifier */
.bad{ background:var(--warn-bg); color:var(--warn) !important; }
dt.bad{ padding-left:8px; }
dd.bad{ padding-right:8px; }

/* ---- problem: one value retyped ----------------------------------------- */
.edit-fig{ display:grid; grid-template-columns:minmax(0,600px) minmax(0,1fr); gap:48px; align-items:end; }
.edit-note{ font-size:1rem; color:var(--graphite); max-width:34ch; }
.val .sel{ border-radius:1px; transition:background 160ms linear; }
.val[data-sel] .sel{ background:rgba(37,99,235,0.22); }
.caret{ display:inline-block; width:1px; height:1.1em; margin-left:1px; vertical-align:-0.15em; background:var(--ink); opacity:0; }
.val[data-caret] .caret{ opacity:1; animation:blink 1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }

/* ---- checking a document: the page beside the verifier ------------------ */
.cmp2{ display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.cap{ font-size:0.8125rem; color:var(--graphite); margin-bottom:10px; }
.win{ background:var(--paper); border:1px solid var(--rule); border-radius:var(--radius-md); overflow:hidden; }
.win-bar{
  display:flex; align-items:center; gap:7px; padding:11px 14px;
  border-bottom:1px solid var(--rule); font-size:0.875rem;
}
.win-bar i{ width:8px; height:8px; border-radius:50%; border:1px solid var(--rule); background:var(--paper-sunk); }
.win-bar b{ font-weight:500; margin-left:7px; }
.vres{ padding:18px 18px 20px; }
.vres .by{ font-size:0.8125rem; color:var(--graphite); }
.vres .dom{ font-family:var(--font-mono); font-size:1.125rem; font-weight:500; margin-top:2px; overflow-wrap:anywhere; }
.vres .meta{ font-size:0.8125rem; color:var(--graphite); margin-top:2px; }
.vf{ display:grid; grid-template-columns:auto 1fr; margin-top:14px; border-top:1px solid var(--rule); font-size:0.875rem; }
.vf dt, .vf dd{ padding:7px 0; border-bottom:1px solid var(--paper-sunk); }
.vf dt{ color:var(--graphite); padding-right:16px; }
.vf dd{ margin:0; text-align:right; font-variant-numeric:tabular-nums; }
.figcap{ margin-top:28px; font-size:0.9375rem; color:var(--graphite); max-width:66ch; }

/* ---- what a valid stamp proves ------------------------------------------ */
.proves{ display:grid; grid-template-columns:1fr 1fr; gap:48px; margin-top:40px; max-width:880px; }
.proves h3{ font-size:1.125rem; padding-bottom:12px; border-bottom:1px solid var(--ink); }
.proves li{ position:relative; padding:12px 0 12px 20px; border-bottom:1px solid var(--rule); font-size:0.9375rem; }
.proves li::before{
  content:""; position:absolute; left:0; top:20px; width:7px; height:7px; border-radius:50%;
  border:1px solid var(--ink); background:var(--ink);
}
.proves .not li{ color:var(--graphite); }
.proves .not li::before{ background:var(--paper); border-color:var(--graphite); }

/* ---- implementations ---------------------------------------------------- */
.impl-cta{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; margin-top:48px; }

/* ---- the moving parts of both figures ----------------------------------- */
/* the problem: the document sits in an editor window */
.editor{ max-width:600px; }
.editor .doc{ font-size:1rem; padding:28px 32px 26px; }
.editor .doc-head b{ font-size:1.25rem; }
.editor .doc-head span{ font-size:0.9375rem; }
.editor .doc dt, .editor .doc dd{ padding:10px 0; }
/* before and after, beside the document, so the end state explains itself */
.diff{ display:grid; grid-template-columns:auto 1fr; gap:6px 16px; margin-bottom:20px; font-size:0.9375rem; }
.diff dt{ color:var(--graphite); }
.diff dd{ margin:0; font-family:var(--font-mono); font-size:0.875rem; }
.diff dd:last-child{ color:var(--warn); }
.js .edit-fig[data-armed] .diff{ opacity:0; transition:opacity 400ms var(--ease); }
.js .edit-fig[data-armed] .diff.on{ opacity:1; }
.editor .doc{ border:0; border-radius:0; }
.editor .win-bar .mono{ margin-left:auto; font-size:0.75rem; color:var(--graphite); transition:color 260ms var(--ease); }
.editor .win-bar .mono.saved{ color:var(--ink); }
.val{ white-space:nowrap; }

/* ---- the composition of the estimate ------------------------------------ */
.est{ margin-top:56px; max-width:960px; }
.est h3{ font-size:1.125rem; }

/* ---- the demonstration stamp: a stamp of dkds.org that verifies -------------- */
.demo{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(20px,4vw,40px); align-items:center;
  margin-top:40px; padding:clamp(16px,3vw,28px); border:1px solid var(--rule); border-radius:var(--radius-md); background:var(--sheet);
}
.demo-qr svg{ display:block; width:clamp(184px, 22vw, 240px); height:auto; }
.demo h3{ font-size:1.125rem; }
.demo p{ margin-top:10px; max-width:62ch; font-size:0.9375rem; }
.demo p code{ font-family:var(--font-mono); font-size:0.875em; overflow-wrap:anywhere; }
.demo-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.demo-text{ margin-top:16px; font-size:0.8125rem; color:var(--graphite); }
.demo-text summary{ cursor:pointer; width:max-content; max-width:100%; padding:4px 0; }
.demo-text code{ display:block; margin-top:6px; font-family:var(--font-mono); color:var(--ink); word-break:break-all; }
@media (max-width:640px){
  .demo{ grid-template-columns:1fr; }
  .demo-qr{ justify-self:center; }
}
.est-table{ margin-top:16px; overflow-x:auto; }
.est table{ width:100%; border-collapse:collapse; font-size:0.9375rem; line-height:1.5; }
.est th{ text-align:left; font-weight:500; padding:10px 20px 10px 0; border-bottom:1px solid var(--ink); white-space:nowrap; }
.est td{ padding:10px 20px 10px 0; border-bottom:1px solid var(--rule); vertical-align:top; }
.est td:nth-child(3){ color:var(--graphite); }
.est .amt{ text-align:right; padding-right:0; white-space:nowrap; font-variant-numeric:tabular-nums; }
.est tfoot td{ font-weight:500; border-bottom:0; border-top:1px solid var(--ink); }
.est .fignote{ margin:14px 0 0; max-width:none; }

/* ---- documents commonly used in fraud ----------------------------------- */
.doctypes{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:40px 32px; margin-top:48px; }
.doctypes h3{ font-size:1.0625rem; padding-bottom:10px; border-bottom:1px solid var(--ink); }
.doctypes li li{ padding:8px 0; border-bottom:1px solid var(--rule); font-size:0.9375rem; color:var(--graphite); }
.doc-note{ margin:28px 0 0; }

@media (max-width:920px){
  .pillar-grid{ grid-template-columns:1fr; gap:48px; }
  .pillar .fig{ max-width:400px; }
  .edit-fig, .cmp2, .proves{ grid-template-columns:1fr; gap:24px; }
  .doctypes{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .doc{ max-width:440px; }
}
@media (max-width:620px){
  .hero-actions .btn{ width:100%; }
  .doc, .editor .doc{ padding:18px 16px; }
  .editor .doc{ font-size:0.875rem; }
  .doc-head{ flex-direction:column; gap:2px; }
  .doctypes{ gap:32px 20px; }
  .doctypes li li{ font-size:0.875rem; }
  .doctypes h3{ display:flex; align-items:flex-end; min-height:calc(2.7em + 10px); }
  .est td:nth-child(2), .est th:nth-child(2){ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .val[data-caret] .caret{ animation:none; }
}