/* site.css — SQX Solves. Designed stylesheet (SPINUP.md "Design" stage);
   replaces spinup_site_build.py's fallback template entirely.

   Concept: ledger stationery. Pale green accounting paper, green-black ink,
   the logo's teal "solve stroke" (#0F766E, hardcoded in logo.svg) as the
   working accent, and break-flag red used only as a functional mark.

   Signature: "the recs sheet" — a CSS-drawn reconciliation sheet beside the
   hero (ruled rows, an amount-column rule, one entry flagged red above its
   line, one settled teal ON its line). Below 980px it collapses into the
   compact settled line under the headline. One idea, two responsive forms. */

:root {
  --paper: #F1F4EC;   /* ledger green-white */
  --ink: #1C2621;     /* green-black ledger ink */
  --spruce: #11332F;  /* deep spruce — display type, bands */
  --solve: #0F766E;   /* the logo's slash; resolved / settled */
  --solve-deep: #0B5A54;
  --break: #BF3B2B;   /* break-flag red — functional marks only */
  --card: #FFFFFF;
  --rule: color-mix(in srgb, var(--ink) 12%, var(--paper));
  --rule-strong: color-mix(in srgb, var(--ink) 24%, var(--paper));
  --muted: color-mix(in srgb, var(--ink) 78%, var(--paper));
  --font-display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", sans-serif;
  --font-body: "IBM Plex Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --measure: 1000px;
  --pad-x: clamp(20px, 4vw, 44px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

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

body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.68;
  background: var(--paper);
  color: var(--ink);
  /* Sticky footer: short pages (/confirmed/) must not strand the footer
     mid-viewport. Column flex + main flex:1; align-items defaults to
     stretch, so hero/main still fill the row and their max-width + margin
     auto keep centering. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Flex items with cross-axis auto margins shrink-to-fit instead of
   stretching; pin hero/main to full width so max-width + margin:auto
   center them as in block flow. */
main, .hero { width: 100%; }
main { flex: 1 0 auto; }

::selection { background: var(--solve); color: #fff; }

:focus-visible { outline: 2px solid var(--solve-deep); outline-offset: 2px; }
.cta-band :focus-visible,
.site-footer :focus-visible { outline-color: var(--paper); }

a { color: var(--solve-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--solve); }

/* ------------------------------------------------------------------ */
/* Header — white chrome above the ledger sheet, teal binding rule     */
/* ------------------------------------------------------------------ */

.site-header {
  background: var(--card);
  border-top: 4px solid var(--solve);
  border-bottom: 1px solid var(--rule-strong);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 28px;
  padding: 15px var(--pad-x);
}

/* logo.svg letterforms fill with currentColor; header is light, so the
   wordmark is ink and the hardcoded teal slash reads at full contrast. */
.site-logo { display: inline-flex; align-items: center; color: var(--ink); text-decoration: none; }
.site-logo svg { height: 30px; width: auto; display: block; }
.site-logo:hover { color: var(--spruce); }

.site-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.site-nav a {
  color: var(--ink);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 8px 12px;
}
.site-nav a:hover { color: var(--solve-deep); }
.site-nav a[aria-current="page"] {
  color: var(--solve-deep);
  box-shadow: inset 0 -2px 0 var(--solve);
}
.site-nav .nav-cta {
  background: var(--solve);
  color: #fff;
  border-radius: 4px;
  padding: 9px 16px;
  margin-left: 10px;
  box-shadow: none;
}
.site-nav .nav-cta:hover,
.site-nav .nav-cta[aria-current="page"] { background: var(--solve-deep); color: #fff; }

/* ------------------------------------------------------------------ */
/* Hero — mono entry label, display statement, the recs sheet          */
/* ------------------------------------------------------------------ */

.hero {
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(52px, 9vh, 84px) var(--pad-x) 0;
  display: flow-root; /* contain the recs-sheet float */
}

.hero h1 {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--solve-deep);
  margin: 0 0 22px;
}
.hero h1::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 1.1em;
  background: var(--solve);
  transform: skewX(-20deg);
  margin-right: 12px;
  vertical-align: -0.22em;
}

.hero p {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.5rem, 5.4vw, 4.1rem);
  line-height: 1.04;
  letter-spacing: -0.022em;
  color: var(--spruce);
  max-width: 15ch;
}

/* The recs sheet (>=980px): header band, ruled rows, a double amount-column
   rule, ordinary entries in faded ink — one entry flagged red ABOVE its line
   (the break), one settled teal ON its line. Rows rule every 30px from y=29;
   entry strokes are 4px bars whose bottoms sit on their rule. */
@media (min-width: 980px) {
  .hero::before {
    --entry: color-mix(in srgb, var(--ink) 26%, var(--card));
    content: "";
    float: right;
    width: 360px;
    height: 268px;
    margin: 4px 6px 32px 56px;
    border: 1px solid var(--rule-strong);
    border-radius: 10px;
    box-shadow: 0 22px 48px -28px rgba(17, 51, 47, 0.6);
    transform: rotate(-1.4deg);
    background:
      /* entries (description column) */
      linear-gradient(var(--entry), var(--entry)) 24px 54px / 112px 4px no-repeat,
      /* the break: entry off its line */
      linear-gradient(var(--break), var(--break)) 24px 76px / 34px 4px no-repeat,
      linear-gradient(var(--entry), var(--entry)) 24px 114px / 130px 4px no-repeat,
      linear-gradient(var(--entry), var(--entry)) 24px 144px / 96px 4px no-repeat,
      /* settled: entry back on the rule */
      linear-gradient(var(--solve), var(--solve)) 24px 174px / 122px 4px no-repeat,
      linear-gradient(var(--entry), var(--entry)) 24px 204px / 138px 4px no-repeat,
      /* amounts column */
      linear-gradient(var(--entry), var(--entry)) 292px 54px / 44px 4px no-repeat,
      linear-gradient(var(--entry), var(--entry)) 292px 114px / 44px 4px no-repeat,
      linear-gradient(var(--solve), var(--solve)) 292px 174px / 44px 4px no-repeat,
      linear-gradient(var(--entry), var(--entry)) 292px 204px / 44px 4px no-repeat,
      /* double amount-column rule */
      linear-gradient(var(--rule-strong), var(--rule-strong)) 272px 0 / 1px 100% no-repeat,
      linear-gradient(var(--rule-strong), var(--rule-strong)) 275px 0 / 1px 100% no-repeat,
      /* header band */
      linear-gradient(var(--rule-strong), var(--rule-strong)) 0 29px / 100% 1px no-repeat,
      linear-gradient(color-mix(in srgb, var(--spruce) 6%, var(--card)),
                      color-mix(in srgb, var(--spruce) 6%, var(--card))) 0 0 / 100% 29px no-repeat,
      /* ruled rows */
      repeating-linear-gradient(to bottom,
        transparent 0 29px, var(--rule) 29px 30px) 0 0 / 100% 100%,
      var(--card);
  }
}

/* The settled line (<980px): a break, then the entry back on the baseline. */
@media (max-width: 979.98px) {
  .hero::after {
    content: "";
    display: block;
    margin-top: 30px;
    height: 11px;
    max-width: 320px;
    background:
      linear-gradient(var(--break), var(--break)) 0 1px / 30px 4px no-repeat,
      linear-gradient(var(--solve), var(--solve)) 46px 6px / 150px 4px no-repeat,
      linear-gradient(var(--rule-strong), var(--rule-strong)) 0 10px / 100% 1px no-repeat;
  }
}

/* ------------------------------------------------------------------ */
/* Main content                                                        */
/* ------------------------------------------------------------------ */

main {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 30px var(--pad-x) 80px;
}

main h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.1rem, 4.4vw, 3rem);
  line-height: 1.07;
  letter-spacing: -0.018em;
  color: var(--spruce);
  margin: 28px 0 18px;
  max-width: 24ch;
}

/* Subpage deck: the h2 that directly follows the page h1 */
main h1 + h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.45rem;
  line-height: 1.3;
  color: var(--solve-deep);
  margin: 0 0 28px;
  max-width: 36ch;
}

main h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--spruce);
  margin: 54px 0 14px;
  max-width: 32ch;
}

/* Home deck: the real tagline right under the hero */
main > h2:first-child {
  margin-top: 16px;
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
}

/* h3 marker: the logo's slash, small — the solve stroke on each item */
main h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.3;
  color: var(--ink);
  margin: 40px 0 8px;
}
main h3::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 0.95em;
  background: var(--solve);
  transform: skewX(-20deg);
  margin-right: 12px;
  vertical-align: -0.1em;
}

main p { margin: 0 0 17px; max-width: 66ch; }
main p strong { color: var(--spruce); }

main ul { margin: 0 0 20px 24px; max-width: 62ch; }
main ul li { margin-bottom: 10px; padding-left: 4px; }
main ul li::marker { color: var(--solve); }
main li strong { color: var(--spruce); }

/* Ordered steps. The markdown renderer may emit the numbered steps as one
   <ol> or as consecutive single-item <ol>s (blank-line separated); a counter
   scoped to <main> numbers them correctly either way. The sequence is real
   (the three-step engagement), so the numbers carry information. */
main { counter-reset: step; }
main ol { list-style: none; margin: 26px 0 8px; max-width: 62ch; }
main ol li {
  position: relative;
  padding-left: 62px;
  margin-bottom: 22px;
  min-height: 44px;
}
main ol li::before {
  counter-increment: step;
  content: counter(step) ".";
  position: absolute;
  left: 0;
  top: 0.02em;
  font-family: var(--font-mono);
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--solve-deep);
}
main ol li p { margin-bottom: 6px; }

main hr {
  border: 0;
  width: 72px;
  height: 4px;
  background: color-mix(in srgb, var(--solve) 45%, var(--paper));
  margin: 44px 0;
}

/* Feature cards (ul whose items lead with <strong>) */
main .card-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  margin: 26px 0 30px;
  max-width: none;
}
main .card-grid li {
  background: var(--card);
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
  padding: 20px 22px;
  margin: 0;
}
main .card-grid li strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.08rem;
  color: var(--spruce);
  display: block;
  margin-bottom: 7px;
}

/* ------------------------------------------------------------------ */
/* CTA band                                                            */
/* ------------------------------------------------------------------ */

.cta-band {
  background: var(--spruce);
  color: var(--paper);
  margin-top: 20px;
}
.cta-band .cta-inner {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 50px var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 26px 44px;
}
.cta-band p {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1.4;
  max-width: 44ch;
  margin: 0;
}
.cta-band .cta-btn {
  display: inline-block;
  background: var(--paper);
  color: var(--spruce);
  font-weight: 700;
  text-decoration: none;
  padding: 14px 30px;
  border-radius: 4px;
  white-space: nowrap;
}
.cta-band .cta-btn:hover { background: #fff; color: var(--solve-deep); }

/* ------------------------------------------------------------------ */
/* Footer — closes the teal binding rule                               */
/* ------------------------------------------------------------------ */

.site-footer {
  background: var(--ink);
  color: var(--paper);
  border-bottom: 4px solid var(--solve);
}
.site-footer .footer-inner {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 30px var(--pad-x);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px 32px;
  font-size: 0.9rem;
}
.site-footer a { color: var(--paper); }
.site-footer a:hover { color: #fff; }
.site-footer .footer-brand { font-family: var(--font-display); font-weight: 600; }
.site-footer .footer-meta { font-family: var(--font-mono); font-size: 0.78rem; opacity: 0.85; }

/* ------------------------------------------------------------------ */
/* Contact form                                                        */
/* ------------------------------------------------------------------ */

.contact-form { display: flex; flex-direction: column; gap: 18px; max-width: 640px; margin-top: 30px; }
.contact-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.contact-form label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.contact-form input, .contact-form textarea {
  font: inherit;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--ink) 48%, var(--paper));
  border-radius: 4px;
  padding: 11px 13px;
}
.contact-form input:focus-visible, .contact-form textarea:focus-visible {
  outline: 2px solid var(--solve);
  outline-offset: 0;
  border-color: var(--solve);
}
.contact-form button {
  font: inherit;
  font-weight: 700;
  background: var(--solve);
  color: #fff;
  border: 0;
  border-radius: 4px;
  padding: 13px 30px;
  cursor: pointer;
  align-self: flex-start;
}
.contact-form button:hover { background: var(--solve-deep); }
.contact-form button:disabled { opacity: 0.6; cursor: wait; }

.form-error { color: var(--break); font-weight: 600; max-width: 60ch; }
.form-success {
  background: var(--card);
  border: 1px solid var(--solve);
  border-left: 5px solid var(--solve);
  border-radius: 4px;
  padding: 24px 26px;
  max-width: 640px;
  margin-top: 30px;
}
main .form-success h2 { margin: 0 0 8px; font-size: 1.3rem; }

/* ------------------------------------------------------------------ */
/* Motion — opt-in only                                                */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  a, .site-nav a, .cta-band .cta-btn, .contact-form button {
    transition: color 0.15s ease, background-color 0.15s ease;
  }
}

/* ------------------------------------------------------------------ */
/* Mobile                                                              */
/* ------------------------------------------------------------------ */

@media (max-width: 700px) {
  .site-header { justify-content: flex-start; padding-top: 13px; padding-bottom: 10px; }
  .site-nav { width: 100%; margin-left: -12px; }
  .site-nav a { font-size: 0.9rem; padding: 8px 10px; }
  .site-nav .nav-cta { margin-left: 4px; padding: 8px 14px; }
  .hero { padding-top: 44px; }
  .hero p { font-size: clamp(2.1rem, 8.8vw, 2.5rem); }
  main h2 { margin-top: 44px; }
  main ol li { padding-left: 48px; }
  main ol li::before { font-size: 1.2rem; }
  .contact-form .form-row { grid-template-columns: 1fr; }
  .cta-band .cta-inner, .site-footer .footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}