/* Tradiefolio website. Same family as toolpathviewer.com: Barlow Condensed headings,
   IBM Plex Sans body, orange as the one accent. Warm paper ground because the product
   is paperwork, and the phone mock in the hero stands in for screenshots until the app
   has a store listing. */
:root {
  --bg: #f4f1ec; --surface: #ffffff; --surface-2: #ebe6df; --line: #d9d2c8; --line-soft: #e6e0d8;
  --ink: #1f1d1a; --ink-2: #4b4741; --muted: #706a62;
  --cut: #d95f14; --cut-hover: #bf5210; --cut-ink: #ffffff; --cut-soft: #fbe9dd;
  --steel: #2a5d8f; --steel-soft: #e3eef8;
  --stage: #171512; --stage-line: #2c2823; --stage-text: #ece7df; --stage-muted: #9a9187;
  --ok: #2e7d4f;
  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", Consolas, monospace;
  --maxw: 1100px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.55 var(--body); }
a { color: var(--steel); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--cut); outline-offset: 2px; }
img { max-width: 100%; height: auto; display: block; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
h1, h2, h3 { font-family: var(--display); line-height: 1.05; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(40px, 6.2vw, 68px); font-weight: 700; letter-spacing: .005em; }
h2 { font-size: clamp(30px, 4vw, 44px); font-weight: 600; }
h3 { font-size: 24px; font-weight: 600; }
p { margin: 0 0 14px; max-width: 64ch; }
.lede { font-size: 20px; color: var(--ink-2); }

/* header */
.top { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 0; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font: 700 22px var(--display); letter-spacing: .02em; }
.brand svg { width: 28px; height: 28px; border-radius: 6px; }
.top nav { display: flex; gap: 22px; flex-wrap: wrap; }
.top nav a { text-decoration: none; color: var(--ink-2); font-weight: 500; font-size: 15px; }
.top nav a:hover { color: var(--cut); }

/* hero */
section.hero { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 40px; align-items: center; padding: 40px 20px 56px; }
@media (max-width: 880px) { section.hero { grid-template-columns: minmax(0, 1fr); padding-top: 20px; } }
.hero p { margin-top: 18px; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.btn { display: inline-block; padding: 13px 22px; border-radius: 6px; font-weight: 600; text-decoration: none; font-size: 16px; border: 1px solid transparent; }
.btn.primary { background: var(--cut); color: var(--cut-ink); }
.btn.primary:hover { background: var(--cut-hover); }
.btn.ghost { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn.ghost:hover { border-color: var(--ink-2); }
.small { font-size: 14px; color: var(--muted); }

/* the phone: an invoice with photos on it, drawn in CSS so the page is honest before there are screenshots */
.phone { justify-self: center; width: min(340px, 100%); background: var(--stage); border-radius: 34px; padding: 12px; box-shadow: 0 24px 60px rgba(31,29,26,.28); border: 1px solid var(--stage-line); }
.screen { background: #fbfaf7; border-radius: 24px; overflow: hidden; font-size: 12px; color: var(--ink); }
.screen .bar { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px 8px; font-family: var(--display); font-size: 17px; font-weight: 600; }
.screen .bar span { font: 600 11px var(--body); color: var(--ok); background: #e2f2e8; padding: 3px 8px; border-radius: 999px; letter-spacing: .04em; }
.screen .job { padding: 0 14px 8px; color: var(--muted); font-size: 11.5px; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 4px 14px 10px; }
.tile { aspect-ratio: 1; border-radius: 8px; position: relative; overflow: hidden; }
.tile i { position: absolute; left: 6px; bottom: 5px; font: 600 9.5px var(--body); letter-spacing: .08em; color: #fff; background: rgba(0,0,0,.55); padding: 2px 6px; border-radius: 4px; font-style: normal; }
.tile.before { background: linear-gradient(160deg, #8d7b6a, #4e443b 70%, #2f2a25); }
.tile.during { background: linear-gradient(160deg, #b9a48c, #7d6a56 60%, #514538); }
.tile.after { background: linear-gradient(160deg, #e9e2d6, #c6bcae 65%, #a49a8c); }
.tile::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.28), transparent 45%); }
.lines { margin: 0 14px; border-top: 1px solid var(--line-soft); }
.lines div { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--line-soft); font-variant-numeric: tabular-nums; }
.lines div span:first-child { color: var(--ink-2); }
.lines div.total { font-weight: 600; border-bottom: 0; }
.lines div.gst { color: var(--muted); font-size: 11px; }
.screen .send { margin: 10px 14px 14px; background: var(--cut); color: #fff; text-align: center; padding: 9px; border-radius: 8px; font-weight: 600; }
.caption { text-align: center; color: var(--muted); font-size: 13px; margin-top: 12px; }

/* sections */
section.wrap { padding: 56px 20px; }
section + section { border-top: 1px solid var(--line); }
.sub { color: var(--ink-2); font-size: 19px; margin: 12px 0 0; max-width: 66ch; }

/* three steps */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 30px; counter-reset: step; }
@media (max-width: 880px) { .steps { grid-template-columns: minmax(0, 1fr); } }
.step { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 22px; }
.step::before { counter-increment: step; content: counter(step); display: inline-block; font: 700 22px/1 var(--display); color: var(--cut); background: var(--cut-soft); width: 38px; height: 38px; border-radius: 50%; text-align: center; line-height: 38px; margin-bottom: 12px; }
.step h3 { margin-bottom: 8px; }
.step p { margin: 0; color: var(--ink-2); font-size: 16px; }

/* feature list */
.features { columns: 2; column-gap: 40px; margin: 30px 0 0; padding: 0; list-style: none; max-width: 900px; }
@media (max-width: 700px) { .features { columns: 1; } }
.features li { break-inside: avoid; padding: 8px 0 8px 22px; position: relative; }
.features li::before { content: ""; position: absolute; left: 0; top: 17px; width: 12px; height: 3px; background: var(--cut); border-radius: 2px; }
.features b { display: block; font-weight: 600; }

/* the invoice rules: a plain table */
.rules { margin-top: 26px; border-collapse: collapse; width: 100%; max-width: 820px; font-size: 16px; }
.rules th, .rules td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.rules th { font-weight: 600; width: 34%; }
.rules td { color: var(--ink-2); }

/* founder */
.founder { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 40px; align-items: start; }
@media (max-width: 880px) { .founder { grid-template-columns: minmax(0, 1fr); } }
.founder p { font-size: 18px; }

/* pricing */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 30px; align-items: stretch; max-width: 820px; }
@media (max-width: 560px) { .plans { grid-template-columns: minmax(0, 1fr); } }
.plan { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 22px; display: flex; flex-direction: column; }
.plan.pro { border-color: var(--cut); box-shadow: 0 0 0 3px rgba(217,95,20,.15); }
.plan h3 { font-size: 26px; }
.plan .price { font: 700 40px/1 var(--display); margin: 12px 0 2px; font-variant-numeric: tabular-nums; }
.plan .price small { font: 500 15px var(--body); color: var(--muted); margin-left: 6px; }
.plan .who { color: var(--ink-2); font-size: 15px; min-height: 44px; margin: 0 0 10px; }
.plan ul { padding-left: 18px; margin: 0 0 18px; font-size: 15px; flex: 1; }
.plan li { margin: 6px 0; }
.plan .btn { text-align: center; }
.plan-note { margin: 10px 0 0; color: var(--muted); font-size: 13px; }
.terms-note { margin-top: 18px; color: var(--muted); font-size: 14px; max-width: 80ch; }

/* faq */
.faq { max-width: 760px; }
.faq details { border-top: 1px solid var(--line); padding: 14px 0; }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; font-weight: 600; font-size: 18px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--cut); font: 600 22px/1 var(--display); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin-top: 10px; color: var(--ink-2); }

/* launch */
.launch { background: var(--stage); color: var(--stage-text); border-radius: 10px; padding: 40px; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 30px; align-items: center; }
@media (max-width: 880px) { .launch { grid-template-columns: minmax(0, 1fr); padding: 28px; } }
.launch h2 { color: #fff; }
.launch p { color: var(--stage-muted); }
.launch .btn.primary { justify-self: start; }

/* footer */
footer { padding: 30px 0 50px; color: var(--muted); font-size: 14px; }
footer .cols { display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center; justify-content: space-between; }
footer nav { display: flex; gap: 18px; flex-wrap: wrap; }
footer a { color: var(--ink-2); }

/* legal pages */
.legal { max-width: 760px; padding: 20px 0 60px; }
.legal h1 { font-size: clamp(34px, 5vw, 52px); margin-bottom: 8px; }
.legal h2 { font-size: 26px; margin: 34px 0 10px; }
.legal p, .legal li { max-width: 72ch; }
.legal ul { padding-left: 20px; }
.draft { background: var(--steel-soft); border-left: 3px solid var(--steel); padding: 10px 14px; border-radius: 0 6px 6px 0; font-size: 15px; margin: 0 0 20px; }