/* First Payslip — public front page.
   One bold element (the payslip); everything else quiet and disciplined. */
@font-face {
  font-family: "Bricolage";
  src: url("/static/fonts/bricolage-grotesque.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("/static/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("/static/fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

:root {
  --paper: #f6f9f5;      /* security-paper white, faintly green */
  --ink: #14302f;        /* deep pine */
  --pine: #1f5f5b;       /* brand teal, shared with the app */
  --mint: #dcefe4;       /* payslip tint */
  --mint-line: #b9dcc8;
  --highlight: #ffd84d;  /* highlighter: used on the payslip only */
  --muted: #546b67;
  --rule: #d6e3dc;
  --surface: #ffffff;
  --cut: #a33a2c;
  --measure: 34rem;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0f2524; --ink: #e9f2ee; --pine: #7cc4b8; --muted: #a3bab4;
    --rule: #24403e; --surface: #15302f; --mint: #dcefe4; --mint-line: #b9dcc8; --cut: #f0907f;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body.pub {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 1.0625rem/1.6 "Bricolage", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-optical-sizing: auto;
}
.pub a { color: var(--pine); text-underline-offset: .18em; }
.pub a:focus-visible, .pub-btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.pub-wrap { max-width: 72rem; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); }
.pub-skip { position: absolute; left: -999px; }
.pub-skip:focus { left: 16px; top: 12px; background: var(--surface); padding: 8px 12px; z-index: 10; }

/* header */
.pub-head { padding: 22px 0; }
.pub-head-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pub-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.15rem;
  letter-spacing: -.01em; color: var(--ink) !important; text-decoration: none; }
.pub-mark { width: 30px; height: 30px; }

/* buttons */
.pub-btn { display: inline-block; padding: .8rem 1.35rem; border-radius: 999px; font-weight: 650; font-size: 1rem;
  text-decoration: none; background: var(--ink); color: var(--paper) !important; border: 2px solid var(--ink); }
.pub-btn:hover { background: var(--pine); border-color: var(--pine); }
.pub-btn-quiet { background: transparent; color: var(--ink) !important; }
.pub-btn-quiet:hover { background: transparent; border-color: var(--pine); color: var(--pine) !important; }

/* hero */
.pub-hero { padding: clamp(24px, 6vw, 72px) 0 clamp(56px, 9vw, 112px); }
.pub-hero-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.pub h1 { font-size: clamp(2.6rem, 6.4vw, 5.1rem); line-height: .98; letter-spacing: -.035em; font-weight: 750;
  margin: 0 0 1.4rem; max-width: 12ch; font-variation-settings: "opsz" 96; }
.pub-lead { font-size: clamp(1.15rem, 1.9vw, 1.35rem); line-height: 1.5; color: var(--muted); max-width: var(--measure); margin: 0 0 2rem; }
.pub-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* the payslip: the one bold element */
.pub-slipbox { margin: 0; position: relative; padding-top: 14px; justify-self: center; width: min(100%, 25rem); }
.pub-slot { position: absolute; top: 0; left: -14px; right: -14px; height: 16px; border-radius: 10px;
  background: var(--ink); box-shadow: inset 0 -5px 0 rgba(0,0,0,.35); z-index: 2; }
.pub-slip { position: relative; z-index: 1; margin: 0 8px; background: var(--mint); color: #17322f;
  font-family: "Plex Mono", ui-monospace, Menlo, Consolas, monospace; font-size: .86rem; line-height: 1.5;
  padding: 26px 24px 30px; transform: rotate(-1.6deg); transform-origin: top center;
  background-image: repeating-linear-gradient(0deg, transparent 0 27px, rgba(31, 95, 91, .07) 27px 28px);
  box-shadow: 0 1px 0 var(--mint-line), 0 24px 40px -18px rgba(20, 48, 47, .45);
  -webkit-mask: radial-gradient(circle 6px at 50% 100%, transparent 98%, #000) 0 0 / 16px 100% repeat-x;
          mask: radial-gradient(circle 6px at 50% 100%, transparent 98%, #000) 0 0 / 16px 100% repeat-x;
  animation: pub-print 1.4s cubic-bezier(.2, .7, .2, 1) .25s both; }
@keyframes pub-print {
  from { clip-path: inset(0 0 100% 0); translate: 0 -24px; }
  to { clip-path: inset(0 0 -40px 0); translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) { .pub-slip { animation: none; } }
.pub-slip-top { display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 2px solid #17322f; padding-bottom: 10px; margin-bottom: 14px; }
.pub-slip-title { font-weight: 600; font-size: 1.15rem; letter-spacing: .02em; }
.pub-slip-meta { margin: 0 0 16px; display: grid; gap: 2px; }
.pub-slip-meta div { display: grid; grid-template-columns: 7.5rem 1fr; }
.pub-slip-meta dt { color: #4b6863; }
.pub-slip-meta dd { margin: 0; font-weight: 600; }
.pub-slip-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.pub-slip-table th { text-align: left; font-weight: 400; color: #4b6863; border-bottom: 1px dashed #7fa79a; padding: 4px 0; }
.pub-slip-table td { padding: 5px 0; }
.pub-slip-table th:nth-child(n+2), .pub-slip-table td:nth-child(n+2) { text-align: right; }
.pub-slip-net { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  border-top: 2px solid #17322f; margin-top: 14px; padding-top: 12px; font-weight: 600; font-size: 1rem; }
.pub-slip-net mark { background: linear-gradient(transparent 14%, var(--highlight) 14% 86%, transparent 86%);
  color: inherit; padding: 0 6px; margin-right: -6px; transform: rotate(-1deg); }

/* how it works: a real sequence, so numbered */
.pub-how { padding: clamp(56px, 8vw, 96px) 0; border-top: 1px solid var(--rule); }
.pub h2 { font-size: clamp(1.75rem, 3.2vw, 2.4rem); letter-spacing: -.02em; line-height: 1.1; font-weight: 700; margin: 0 0 1rem; }
.pub h3 { font-size: 1.2rem; letter-spacing: -.01em; margin: 0 0 .4rem; font-weight: 650; }
.pub-steps { list-style: none; counter-reset: step; padding: 0; margin: 2.5rem 0 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; position: relative; }
.pub-steps::before { content: ""; position: absolute; top: 21px; left: 22px; right: calc((100% - 96px) / 4 - 22px); height: 2px;
  background: repeating-linear-gradient(90deg, var(--pine) 0 8px, transparent 8px 14px); opacity: .45; }
.pub-steps li { counter-increment: step; position: relative; }
.pub-steps li::before { content: counter(step); display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; background: var(--paper); border: 2px solid var(--pine); color: var(--pine);
  font-weight: 700; font-size: 1.1rem; margin-bottom: 18px; position: relative; }
.pub-steps p { color: var(--muted); margin: 0; max-width: 30ch; }

/* principles */
.pub-principles { padding: clamp(56px, 8vw, 96px) 0; background: var(--surface); border-block: 1px solid var(--rule); }
.pub-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 7vw, 96px); }
.pub-col > p { color: var(--muted); max-width: var(--measure); }
.pub-rules { list-style: none; padding: 0; margin: 1.5rem 0 0; }
.pub-rules li { display: flex; gap: 12px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--rule); }
.pub-rules li:last-child { border-bottom: 1px solid var(--rule); }
.pub-x, .pub-q { flex: none; width: 18px; height: 18px; position: relative; top: 3px; border-radius: 50%; }
.pub-x { background: var(--cut); }
.pub-x::before, .pub-x::after { content: ""; position: absolute; left: 4px; right: 4px; top: 8px; height: 2px; background: #fff; transform: rotate(45deg); }
.pub-x::after { transform: rotate(-45deg); }
.pub-q { border: 2px solid #b8860b; }
.pub-q::before { content: ""; position: absolute; left: 6px; top: 3px; width: 2px; height: 6px; background: #b8860b; }
.pub-check { margin-top: 1.5rem; border-left: 3px solid var(--pine); padding: 4px 0 4px 20px; }
.pub-check-ask { margin: 0 0 14px; font-weight: 650; }
.pub-line { padding: 12px 14px; border-radius: 10px; margin-bottom: 10px; }
.pub-line p { margin: 0 0 4px; font-weight: 500; }
.pub-line small { font-size: .88rem; }
.pub-line-kept { background: color-mix(in srgb, var(--pine) 10%, transparent); }
.pub-line-kept small { color: var(--pine); }
.pub-line-cut { background: color-mix(in srgb, var(--cut) 9%, transparent); }
.pub-line-cut s { text-decoration-color: var(--cut); text-decoration-thickness: 2px; color: var(--muted); }
.pub-line-cut small { color: var(--cut); }

/* trust */
.pub-trust { padding: clamp(40px, 6vw, 72px) 0; }
.pub-trust p { max-width: 46rem; margin: 0; font-size: 1.1rem; color: var(--muted); }
.pub-trust strong { color: var(--ink); }

/* simple text pages */
.pub-page { padding: clamp(24px, 5vw, 56px) 0 clamp(56px, 8vw, 96px); }
.pub-prose { max-width: 44rem; }
.pub-prose h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); max-width: none; }
.pub-prose h2 { font-size: 1.35rem; margin-top: 2rem; }
.pub-prose p { color: var(--muted); }

/* footer */
.pub-foot { border-top: 1px solid var(--rule); padding: 28px 0 40px; font-size: .95rem; color: var(--muted); }
.pub-foot-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; align-items: baseline; }
.pub-foot p { margin: 0; max-width: 40rem; }
.pub-foot nav { display: flex; gap: 20px; }

/* responsive */
@media (max-width: 900px) {
  .pub-hero-in { grid-template-columns: 1fr; }
  .pub-slipbox { justify-self: start; }
  .pub-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .pub-steps::before { display: none; }
  .pub-two { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .pub-steps { grid-template-columns: 1fr; }
  .pub-slip { font-size: .8rem; padding: 22px 18px 28px; }
  .pub-slip-meta div { grid-template-columns: 6.5rem 1fr; }
  .pub-slot { left: 0; right: 0; }
  .pub-slip { margin: 0 12px; }
}