/* DueFirm landing page. Hand-written, no framework, no external requests.
   Tokens are inherited verbatim from the app's public/styles.css so the
   marketing site and the product are visibly one thing. Borders and spacing
   carry the design; colour is reserved for the accent and for the deadline
   badges, where it means something. */

/* ---------- font ---------- */

/* Source Serif 4, variable weight 400 to 600, optical size pinned at 32 and
   subset to the characters the headlines actually use. Display only. */
@font-face {
  font-family: 'Source Serif 4';
  src: url('/fonts/source-serif-4-display.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

/* Georgia sets 17.4% wider than Source Serif at the same size, which turns the
   hero headline from two lines into three and shifts the page as the webfont
   swaps in. Matching the advance width here holds the layout still: measured
   with canvas at 100px, Source Serif 3127.1 against Georgia 3672.3. */
@font-face {
  font-family: 'Source Serif Fallback';
  src: local('Georgia'), local('Times New Roman');
  size-adjust: 85.15%;
  ascent-override: 122%;
  descent-override: 40%;
  line-gap-override: 0%;
}

/* ---------- tokens ---------- */

:root {
  --accent: #0f6b5f;
  --accent-dark: #0b544a;
  --accent-tint: #e8f1ef;

  --page: #f6f6f4;
  --paper: #fbfbf9;
  --surface: #ffffff;
  --ink: #1b1c1a;
  --ink-soft: #4a4c48;
  --ink-muted: #74766f;
  --ink-teal: #08403a;
  --line: #e2e2dc;
  --line-strong: #cfd0c9;

  --overdue-bg: #7c1d1d;
  --overdue-fg: #ffffff;
  --urgent-bg: #fceceb;
  --urgent-fg: #a3241a;
  --urgent-line: #f0c8c4;
  --soon-bg: #fdf3e2;
  --soon-fg: #8a5c07;
  --soon-line: #eedcb4;
  --clear-bg: #ebf4ee;
  --clear-fg: #1c6b41;
  --clear-line: #cbe2d3;

  --radius: 6px;
  --shell: 1100px;
  --measure: 680px;
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    sans-serif;
  --font-display: 'Source Serif 4', 'Source Serif Fallback', Georgia,
    'Times New Roman', serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  margin: 0;
}

p {
  margin: 0 0 16px;
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--accent);
  text-decoration-color: rgba(15, 107, 95, 0.35);
  text-underline-offset: 2px;
  transition: color 120ms linear, text-decoration-color 120ms linear;
}

a:hover {
  text-decoration-color: currentColor;
}

/* Focus rings appear instantly and are never animated. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

table {
  border-collapse: collapse;
}

.num {
  font-variant-numeric: tabular-nums;
}

.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 24px;
}

.measure {
  max-width: var(--measure);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--surface);
  color: var(--ink);
  padding: 10px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  z-index: 2;
}

.skip:focus {
  left: 24px;
  top: 12px;
}

/* ---------- type roles ---------- */

.h-hero {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 56px;
  line-height: 1.08;
  letter-spacing: -0.02em;
  max-width: 15.6em;
}

.h-section {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 34px;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.h-feature {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.lede {
  font-size: 20px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.fineprint {
  font-size: 15px;
  color: var(--ink-muted);
}

/* ---------- wordmark ---------- */

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--ink);
  font-size: 18px;
  letter-spacing: -0.02em;
  font-weight: 500;
}

.brand svg {
  display: block;
  flex: none;
}

.brand strong {
  font-weight: 700;
}

/* ---------- site header ---------- */

.site-head {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.site-head__inner {
  display: flex;
  align-items: center;
  gap: 32px;
  min-height: 66px;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 24px;
}

.site-nav {
  display: flex;
  gap: 26px;
  flex: 1;
}

.site-nav a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 15px;
}

.site-nav a:hover {
  color: var(--ink);
}

.site-head__actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

.site-head__signin {
  font-size: 15px;
  color: var(--ink-soft);
  text-decoration: none;
}

.site-head__signin:hover {
  color: var(--ink);
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  padding: 9px 15px;
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 120ms linear, border-color 120ms linear,
    color 120ms linear;
}

.btn:hover {
  border-color: #b6b8ae;
  background: #fbfbf9;
}

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.btn--primary:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  color: #fff;
}

.btn--lg {
  font-size: 16px;
  padding: 13px 24px;
}

/* ---------- sections ---------- */

.section {
  padding: 96px 0;
  border-top: 1px solid var(--line);
}

.section--paper {
  background: var(--paper);
}

.section--flush {
  border-top: 0;
}

.section__head {
  margin-bottom: 44px;
}

/* ---------- hero ---------- */

.hero {
  padding: 88px 0 96px;
}

main:focus {
  outline: none;
}

.hero__sub {
  margin: 24px 0 0;
  max-width: 660px;
}

.hero__cta {
  margin-top: 34px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.hero__proof {
  margin: 14px 0 0;
  max-width: 560px;
}

.hero__figure {
  margin: 56px 0 0;
}

.hero__figure figcaption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- problem ---------- */

/* The prose sits in the right two thirds of the grid, so the left third is
   deliberate empty space rather than a centred column. */
.prose-split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 24px 64px;
  align-items: start;
}

.prose-split__body {
  max-width: var(--measure);
  color: var(--ink-soft);
}

.prose-split__body p:first-child {
  color: var(--ink);
}

/* ---------- steps ---------- */

.steps {
  border-top: 1px solid var(--line-strong);
}

.step {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 32px;
  padding: 32px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}

.step__n {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 40px;
  line-height: 1;
  color: var(--line-strong);
  font-variant-numeric: tabular-nums;
}

.step__body {
  max-width: var(--measure);
}

.step__body p {
  margin: 8px 0 0;
  color: var(--ink-soft);
}

/* ---------- features ---------- */

.features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.feature {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 28px;
}

.feature p {
  margin: 10px 0 0;
  color: var(--ink-soft);
  font-size: 16px;
}

.feature p + p {
  margin-top: 12px;
}

/* The fifth feature is the reason the product is trusted, so it gets the full
   width and the quiet accent panel rather than a fifth equal cell. */
.feature--wide {
  grid-column: 1 / -1;
  background: var(--accent-tint);
  border-color: #cfe0dd;
}

.feature--wide p {
  max-width: var(--measure);
  color: #17453e;
}

/* ---------- trust ---------- */

.trust {
  background: var(--ink-teal);
  color: #fff;
}

.trust a {
  color: #fff;
}

.trust__head {
  margin-bottom: 48px;
}

.trust__head p {
  margin-top: 20px;
  max-width: 620px;
  color: rgba(255, 255, 255, 0.78);
}

.penalties {
  width: 100%;
  max-width: 560px;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

.penalties th,
.penalties td {
  text-align: left;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  font-weight: 400;
}

.penalties thead th {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  padding-top: 0;
}

.penalties td:last-child,
.penalties thead th:last-child {
  text-align: right;
}

.penalties__note {
  margin: 16px 0 0;
  max-width: 560px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
}

.trust__points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px;
  margin-top: 72px;
  padding-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.trust__points h3 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.trust__points p {
  margin: 8px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}

/* ---------- pricing ---------- */

.pricing__body {
  margin-top: 20px;
  max-width: var(--measure);
  color: var(--ink-soft);
}

.pricing__body .btn {
  margin-top: 28px;
}

/* ---------- faq ---------- */

.faq {
  border-top: 1px solid var(--line-strong);
  max-width: 820px;
}

.faq details {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 22px 40px 22px 0;
  position: relative;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  transition: color 120ms linear;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary:hover {
  color: var(--accent);
}

/* Plus sign built from two rules, so there is no icon file and no icon font. */
.faq summary::before,
.faq summary::after {
  content: '';
  position: absolute;
  right: 4px;
  top: 50%;
  background: var(--ink-muted);
}

.faq summary::before {
  width: 13px;
  height: 1.5px;
  margin-top: -0.75px;
}

.faq summary::after {
  width: 1.5px;
  height: 13px;
  right: 9.75px;
  margin-top: -6.5px;
  transition: opacity 120ms linear;
}

.faq details[open] summary::after {
  opacity: 0;
}

.faq__answer {
  padding: 0 0 24px;
  max-width: var(--measure);
  color: var(--ink-soft);
  font-size: 16px;
}

/* ---------- final cta ---------- */

.endcta {
  text-align: center;
  padding: 112px 0;
  border-top: 1px solid var(--line);
}

.endcta p {
  margin: 18px auto 0;
  max-width: 480px;
}

.endcta .btn {
  margin-top: 32px;
}

.endcta__alt {
  margin: 16px auto 0;
  font-size: 14px;
  color: var(--ink-muted);
}

/* ---------- footer ---------- */

.site-foot {
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: 56px 0 40px;
}

.site-foot__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px;
  padding-bottom: 32px;
}

.site-foot__blurb {
  margin: 12px 0 0;
  font-size: 15px;
  color: var(--ink-muted);
  max-width: 34ch;
}

.site-foot__links {
  display: grid;
  gap: 10px;
  font-size: 15px;
  justify-items: start;
}

.site-foot__links a {
  color: var(--ink-soft);
  text-decoration: none;
}

.site-foot__links a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.site-foot__legal {
  border-top: 1px solid var(--line);
  padding-top: 24px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-muted);
}

.site-foot__legal p {
  margin: 0 0 8px;
  max-width: 88ch;
}

/* ================================================================
   Embedded product UI.
   Reproduced from the running app: these rules are lifted verbatim
   from public/styles.css so the hero shows the real dashboard rather
   than an illustration of one. Interactive elements are rendered as
   spans, and the whole block is aria-hidden behind a caption.
   ================================================================ */

.mock {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(27, 28, 26, 0.04);
}

.mock__topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 0 24px;
  min-height: 58px;
}

.mock__brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  font-size: 17px;
  letter-spacing: -0.02em;
  font-weight: 400;
}

.mock__brand strong {
  font-weight: 650;
}

.mock__brand span[aria-hidden] {
  width: 15px;
  height: 15px;
  border-radius: 4px;
  background: var(--accent);
  flex: none;
}

.mock__nav {
  display: flex;
  gap: 22px;
  flex: 1;
  font-size: 14px;
}

.mock__nav span {
  color: var(--ink-soft);
  padding: 18px 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.mock__nav .is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 500;
}

.mock__account {
  font-size: 13px;
  color: var(--ink-muted);
  display: flex;
  gap: 14px;
}

.mock__body {
  padding: 26px 24px 30px;
  background: var(--page);
}

.mock__pagehead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

.mock__pagehead h3 {
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.mock__pagehead p {
  margin: 5px 0 0;
  color: var(--ink-muted);
  font-size: 14px;
}

.mock__actions {
  display: flex;
  gap: 10px;
}

.stats {
  display: flex;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 22px;
}

.stat {
  flex: 1;
  padding: 16px 22px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stat + .stat {
  border-left: 1px solid var(--line);
}

.stat__label {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.stat__value {
  font-size: 27px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.stat--alert .stat__value {
  color: var(--overdue-bg);
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}

.filters span {
  color: var(--ink-soft);
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
}

.filters .is-active {
  color: var(--accent);
  font-weight: 500;
  border-bottom-color: var(--accent);
}

.tablewrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow-x: auto;
}

.table {
  width: 100%;
  font-size: 14px;
  line-height: 1.6;
}

.table th,
.table td {
  text-align: left;
  padding: 14px 18px;
  vertical-align: top;
  font-weight: 400;
}

.table thead th {
  font-size: 11.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding-top: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.table tbody tr + tr th,
.table tbody tr + tr td {
  border-top: 1px solid var(--line);
}

.cell-client {
  font-weight: 500;
  color: var(--ink);
}

.cell-client__flags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 5px;
}

.cell-due {
  white-space: nowrap;
}

.cell-due .badge {
  margin-left: 10px;
}

.muted {
  color: var(--ink-muted);
}

.badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  border: 1px solid transparent;
}

.badge--overdue {
  background: var(--overdue-bg);
  color: var(--overdue-fg);
}

.badge--urgent {
  background: var(--urgent-bg);
  color: var(--urgent-fg);
  border-color: var(--urgent-line);
}

.badge--soon {
  background: var(--soon-bg);
  color: var(--soon-fg);
  border-color: var(--soon-line);
}

.badge--clear {
  background: var(--clear-bg);
  color: var(--clear-fg);
  border-color: var(--clear-line);
}

.chip {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 3px;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--ink-muted);
  background: #f2f2ee;
  border: 1px solid var(--line);
  white-space: nowrap;
  font-weight: 400;
}

/* The amber sync-state chip. This is a real deadline-adjacent state, not
   decoration, so it is one of the few places colour is allowed to carry
   meaning outside the day badges. */
.chip--warn {
  color: var(--soon-fg);
  background: var(--soon-bg);
  border-color: var(--soon-line);
}

/* ================================================================
   Motion. Two behaviours only, both from the brand's earned list.
   ================================================================ */

/* The deadline list settling into sorted order. Runs once, on load, and only
   here: it is the product's core behaviour shown rather than described. */
@keyframes row-settle {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

.mock tbody tr {
  animation: row-settle 400ms cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
  animation-delay: calc(var(--i) * 40ms);
}

/* Section content fades up as it enters the viewport, once. The pre-state is
   applied only when JavaScript is running, so the page is complete without it. */
.js .reveal {
  opacity: 0;
  transform: translateY(12px);
}

.js .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 300ms ease-out, transform 300ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .mock tbody tr {
    animation: none;
  }

  .js .reveal,
  .js .reveal.is-in {
    opacity: 1;
    transform: none;
    transition: none;
  }

  * {
    transition-duration: 0.01ms !important;
  }
}

/* ---------- responsive ---------- */

@media (max-width: 1000px) {
  .h-hero {
    font-size: 46px;
  }

  /* The dashboard is a five column table designed for a 1100px shell. Below
     that it has to give back the generous cell padding or the client names
     break over three lines and the screenshot stops reading as legible. */
  .mock .table {
    font-size: 13px;
  }

  .mock .table th,
  .mock .table td {
    padding: 12px 10px;
  }

  .mock .cell-client {
    min-width: 124px;
  }

  .mock__body {
    padding: 22px 16px 24px;
  }

  .trust__points {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    margin-top: 56px;
  }
}

@media (max-width: 860px) {
  .prose-split {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .features {
    grid-template-columns: minmax(0, 1fr);
  }

  .feature--wide {
    grid-column: auto;
  }

  .stats {
    flex-direction: column;
  }

  .stat + .stat {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 720px) {
  body {
    font-size: 16px;
  }

  .shell {
    padding: 0 18px;
  }

  .site-head__inner {
    flex-wrap: wrap;
    gap: 0 24px;
    padding: 10px 18px;
    min-height: 0;
  }

  .site-nav {
    order: 3;
    width: 100%;
    gap: 20px;
    border-top: 1px solid var(--line);
    margin-top: 10px;
    padding: 10px 0 2px;
  }

  .site-head__actions {
    gap: 14px;
  }

  .section {
    padding: 56px 0;
  }

  .hero {
    padding: 48px 0 0;
  }

  .h-hero {
    font-size: 34px;
    letter-spacing: -0.015em;
  }

  .lede {
    font-size: 18px;
  }

  .h-section {
    font-size: 27px;
  }

  .hero__figure {
    margin-top: 40px;
  }

  .hero__cta {
    flex-wrap: wrap;
  }

  .step {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding: 26px 0;
  }

  .step__n {
    font-size: 28px;
  }

  .endcta {
    padding: 72px 0;
  }

  .site-foot__top {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  /* The dashboard stays legible by scrolling sideways rather than by
     shrinking to unreadable type. */
  .mock__topbar,
  .mock__nav,
  .mock__account,
  .mock__actions {
    display: none;
  }

  .mock__body {
    padding: 18px 16px 20px;
  }

  .mock__pagehead h3 {
    font-size: 21px;
  }
}