@import url("tokens.css");

/* HansaFi public pages — parchment / sea / brick. System fonts only. */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  min-height: 100vh;
  background: var(--parchment);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
}
img { max-width: 100%; height: auto; display: block; }
code { font-family: var(--font-mono); font-size: 0.9em; color: var(--inkLight); }
a { color: var(--brick); }
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: normal;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink);
}

.ticker,
.sub,
.who,
.hdr-cta,
.btn-brick,
.btn-ghost,
.btn-amber,
button.buy,
label,
.proof li,
.card .meta,
.mock .cap,
.jobs .n,
.jobs figcaption {
  font-family: var(--font-mono);
}

.jobs figure { margin: 0; }
.jobs figcaption {
  margin-top: 0.4rem;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--inkFaded);
}
.jobs li:has(figure) {
  /* keep existing grid; figure occupies the image column on desktop */
}

.wrap {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0.9rem 1.1rem;
}
.band { border-top: 1px solid var(--borderWarm); }
.band-parchment { background: var(--parchment); color: var(--ink); }
.band-parchmentDark { background: var(--parchmentDark); color: var(--ink); }
.band-sea {
  background: var(--sea);
  color: var(--parchment);
}
.band-sea h1,
.band-sea h2,
.band-sea h3 { color: var(--parchment); }
.band-sea a { color: var(--sand); }
.band-sea .lede { color: var(--sand); }

.amber-stripe {
  height: 8px;
  background: repeating-linear-gradient(
    90deg,
    var(--amber) 0 8px,
    var(--amberLight) 8px 16px
  );
}

.ticker {
  display: flex;
  gap: 1.1rem;
  overflow: hidden;
  white-space: nowrap;
  border-bottom: 1px solid var(--borderWarm);
  background: var(--sea);
  padding: 0.42rem 1.1rem;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sand);
}
.ticker strong { color: var(--parchment); font-weight: normal; }
.ticker span { color: var(--sand); }

header.site {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.7rem 1.1rem;
  max-width: 1040px;
  margin: 0 auto;
  gap: 0.75rem;
  background: var(--parchment);
}
.hdr-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: flex-end;
}
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brick);
  background: transparent;
  border: 1px solid var(--brick);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.7rem 1rem;
  min-height: 44px;
}
.btn-ghost:hover { background: var(--brickGlow); color: var(--brickDim); }
.band-sea .btn-ghost,
.card .btn-ghost {
  color: var(--sand);
  border-color: var(--sand);
}
.band-sea .btn-ghost:hover,
.card .btn-ghost:hover { color: var(--parchment); border-color: var(--parchment); background: transparent; }
.split .btn-ghost { color: var(--brick); border-color: var(--brick); }
.mark {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: normal;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.mark em { font-style: italic; color: var(--brick); font-weight: normal; }
.sub {
  color: var(--inkFaded);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.hdr-cta,
.btn-brick,
.btn-amber,
button.buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--parchment);
  background: var(--brick);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.7rem 1rem;
  min-height: 44px;
  border: 0;
  border-radius: 0;
  font-weight: normal;
  cursor: pointer;
  text-align: center;
}
.hdr-cta { display: inline-flex; }
/* Author display:flex on .btn-brick otherwise beats the hidden attribute. */
.btn-brick[hidden],
a[hidden].btn-brick { display: none !important; }
.price { display: none; color: var(--inkFaded); }
.hdr-cta:hover,
.btn-brick:hover,
.btn-amber:hover,
button.buy:hover { background: var(--brickDim); color: var(--sand); }
button.buy:disabled { opacity: 0.5; cursor: not-allowed; }

main { max-width: 1040px; margin: 0 auto; padding: 1rem 1.1rem 2rem; }
.band > .wrap { padding-top: 1.1rem; padding-bottom: 1.4rem; }
.band-sea > .wrap { padding-top: 1.1rem; padding-bottom: 1.5rem; }

/* Mobile-first: copy, then buy form, then visuals */
.hero {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.hero-copy { order: 1; }
.hero form.card,
.hero > form { order: 2; }
.hero-visual { order: 3; display: flex; flex-direction: column; gap: 1rem; }

.who {
  display: inline-block;
  color: var(--amber);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 0.7rem;
}
h1 {
  font-size: clamp(1.55rem, 5vw, 2.35rem);
  margin: 0 0 0.55rem;
  max-width: 20ch;
}
.lede { max-width: 48ch; margin: 0 0 0.4rem; color: var(--inkFaded); }
.proof {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.proof li {
  border: 1px solid var(--borderWarm);
  padding: 0.28rem 0.7rem;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--parchment);
  background: var(--seaDim);
}
.proof li em { font-style: normal; color: var(--sand); }

.hero-shot img,
.jobs img {
  width: 100%;
  border: 1px solid var(--borderWarm);
  background: var(--parchmentDark);
}
.hero-shot.product img {
  border: 0;
  background: transparent;
}

.mock {
  border: 1px solid var(--borderWarm);
  background: var(--parchment);
  color: var(--ink);
  padding: 0.85rem 1rem;
  margin: 0;
  max-width: 34rem;
}
.mock .cap {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--inkFaded);
  margin: 0 0 0.55rem;
}
.mock-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.35rem 1rem;
  padding: 0.4rem 0;
  border-top: 1px solid var(--borderWarm);
}
.mock-row:first-of-type { border-top: 0; }
.mock kbd {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--inkFaded);
  font-weight: normal;
}
.mock strong {
  font-family: var(--font-display);
  font-weight: normal;
  letter-spacing: -0.02em;
  font-size: 1.05rem;
  color: var(--ink);
}
.mock .amt { color: var(--brick); font-variant-numeric: tabular-nums; }
.mock .gap { color: var(--danger); }

.notthis {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem 1.25rem;
  max-width: 34rem;
  margin: 0;
}
.notthis p { margin: 0; font-size: 15px; color: var(--sand); }
.notthis b {
  display: block;
  font-family: var(--font-display);
  font-weight: normal;
  letter-spacing: -0.02em;
  font-size: 1.05rem;
  color: var(--parchment);
  margin-bottom: 0.15rem;
}

.card {
  background: var(--seaDim);
  color: var(--parchment);
  border: 1px solid var(--borderWarm);
  padding: 1.2rem 1.15rem 1.15rem;
}
.card.static {
  background: var(--parchmentDark);
  color: var(--ink);
  position: static;
  max-width: 36rem;
}
.card h2 {
  font-size: 1.25rem;
  margin: 0 0 0.3rem;
  color: var(--parchment);
}
.card.static h2 { color: var(--ink); }
.card .meta {
  color: var(--sand);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 0.85rem;
}
.card.static .meta { color: var(--inkFaded); }
.card a { color: var(--sand); }
.card.static a { color: var(--brick); }
.card.static a.btn-brick {
  color: var(--parchment);
  background: var(--brick);
}
.card.static a.btn-brick:hover {
  color: var(--sand);
  background: var(--brickDim);
}

label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sand);
  margin: 0.65rem 0 0.28rem;
}
.card.static label { color: var(--inkFaded); }
input, select, textarea {
  width: 100%;
  background: var(--parchment);
  border: 1px solid var(--borderWarm);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.4;
  padding: 0.7rem 0.75rem;
  min-height: 44px;
  border-radius: 0;
}
textarea { min-height: 6rem; }
input:focus, select:focus, textarea:focus {
  outline: 1px solid var(--brick);
  border-color: var(--brick);
}
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
button.buy { width: 100%; margin-top: 1rem; }
.fine {
  color: var(--sand);
  font-size: 12px;
  margin: 0.7rem 0 0;
  line-height: 1.5;
}
.card.static .fine { color: var(--inkFaded); }
.note { color: var(--sand); font-size: 13px; margin: 0.6rem 0 0; }
.card.static .note { color: var(--inkFaded); }
.note.err { color: var(--danger); }
.note.ok { color: var(--amber); }
.note.ok::before { content: "✦ "; color: var(--amber); }

.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin: 0 0 1.25rem;
}
.split article {
  border: 1px solid var(--borderWarm);
  padding: 0.9rem 1rem 1rem;
  background: var(--parchment);
}
.split h2 {
  font-size: 1.35rem;
  margin: 0 0 0.35rem;
  color: var(--ink);
}
.split p { margin: 0 0 0.75rem; color: var(--inkFaded); font-size: 15px; }
.split .who { margin-bottom: 0.35rem; color: var(--brick); }
@media (min-width: 640px) {
  .split { grid-template-columns: 1fr 1fr; }
}

.story {
  border: 1px solid var(--borderWarm);
  background: var(--parchment);
  padding: 1rem 1.1rem 1.15rem;
  margin: 0 0 1.25rem;
}
.story-shot {
  margin: 0 0 0.85rem;
}
.story-shot img {
  width: 100%;
  max-height: 14rem;
  object-fit: cover;
  object-position: center 35%;
  border: 1px solid var(--borderWarm);
  background: var(--parchmentDark);
}
.story-shot figcaption {
  margin-top: 0.4rem;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--inkFaded);
}
@media (min-width: 640px) {
  .story-shot img { max-height: 16rem; }
}
.story-shot.product img {
  max-height: none;
  object-fit: contain;
  object-position: center;
  background: var(--sea);
}
.story .who { color: var(--brick); margin-bottom: 0.4rem; }
.story h2 { font-size: 1.25rem; margin: 0 0 0.55rem; color: var(--ink); }
.story p { margin: 0 0 0.75rem; color: var(--inkFaded); font-size: 16px; max-width: 62ch; }
.story .label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--inkFaded);
  margin: 0.7rem 0 0;
}
.beats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
  margin: 0 0 0.35rem;
}
.beats div {
  border: 1px solid var(--borderWarm);
  background: var(--parchmentDark);
  padding: 0.55rem 0.7rem;
}
.beats kbd {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--inkFaded);
  margin-bottom: 0.2rem;
}
.beats strong {
  font-family: var(--font-display);
  font-weight: normal;
  color: var(--ink);
}
.beats img {
  width: 100%;
  margin: 0.4rem 0 0;
  border: 0;
  background: transparent;
}
.beats p { margin: 0.25rem 0 0; font-size: 15px; }
.beats .after strong { color: var(--brick); }
@media (min-width: 640px) {
  .beats { grid-template-columns: 1fr 1fr; }
}

.jobs { list-style: none; padding: 0; margin: 0 0 1.25rem; }
.jobs li {
  border-top: 1px solid var(--borderWarm);
  padding: 0.7rem 0;
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  gap: 0.5rem 0.85rem;
  align-items: start;
}
.jobs li:first-child { border-top: 0; padding-top: 0; }
.jobs .n {
  color: var(--brick);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.jobs strong {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: normal;
  letter-spacing: -0.02em;
  display: block;
  color: var(--ink);
}
.jobs p { margin: 0.2rem 0 0; color: var(--inkFaded); font-size: 15px; }

.faq { margin: 0; padding: 0; }
.faq h2 { font-size: 1.25rem; margin: 0 0 1rem; }
details { border-bottom: 1px solid var(--borderWarm); padding: 0.75rem 0; }
summary {
  cursor: pointer;
  font-size: 16px;
  color: var(--ink);
  list-style: none;
  min-height: 44px;
  display: flex;
  align-items: center;
}
summary::-webkit-details-marker { display: none; }
summary::before { content: "+"; color: var(--brick); margin-right: 0.6rem; font-size: 13px; }
details[open] summary::before { content: "–"; }
details p { margin: 0.45rem 0 0 1.15rem; color: var(--inkFaded); font-size: 15px; max-width: 62ch; }

.prose { max-width: 68ch; }
.prose h1 { max-width: none; font-size: clamp(1.6rem, 3vw, 2.2rem); }
.prose h2 { font-size: 1.15rem; margin: 1.6rem 0 0.5rem; }
.prose p, .prose li { color: var(--inkFaded); font-size: 16px; }
.prose ul { padding-left: 1.1rem; }
.prose strong { color: var(--ink); font-weight: normal; }

.foot-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin-top: 0.7rem; }
footer.site {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 1rem max(1.1rem, calc((100% - 1040px) / 2)) 1.4rem;
  background: var(--sea);
  color: var(--sand);
  font-size: 12px;
  line-height: 1.6;
  border-top: 1px solid var(--borderWarm);
}
footer.site a { color: var(--sand); }

.check {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin-top: 0.9rem;
  font-size: 14px;
  color: var(--inkFaded);
}
.check input { width: auto; min-height: 0; margin-top: 0.2rem; }

@media (min-width: 520px) {
  .notthis { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 720px) {
  .jobs li { gap: 0.75rem 1rem; }
  .jobs .n { padding-top: 0.2rem; }
}

@media (min-width: 840px) {
  header.site { padding: 1.15rem 1.25rem 0.4rem; }
  .wrap, main { padding-left: 1.25rem; padding-right: 1.25rem; }
  .hero {
    display: grid;
    grid-template-columns: 1fr minmax(280px, 360px);
    gap: 1.5rem 2.25rem;
    align-items: start;
  }
  .hero-copy { grid-column: 1; grid-row: 1; order: unset; }
  .hero form.card,
  .hero > form {
    grid-column: 2;
    grid-row: 1 / span 2;
    order: unset;
    position: sticky;
    top: 0.85rem;
  }
  .hero-visual { grid-column: 1; grid-row: 2; order: unset; }
}