/* formfillpilot.com v2 - "flight deck on paper": warm paper with a faint form grid, deep pine green as the one strong colour,
   the panel's lime as the accent, Bricolage Grotesque for display, IBM Plex Sans for reading, IBM Plex Mono for the instrument labels. */
:root {
  --paper: #f6f4ee; --paper-2: #eeeadf; --ink: #0d1a13; --ink-2: #33403a; --muted: #67736c; --line: #dcd6c6; --line-2: #cbc3ad;
  --pine: #145c34; --pine-deep: #0b3b21; --pine-ink: #071f12; --lime: #c5f06a; --lime-soft: #edf8d3; --amber: #ffd23f; --amber-soft: #fff3c4;
  --violet: #c9a3ff; --sky: #9ad7ff; --red: #ff6b6b;
  --display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", sans-serif; --body: "IBM Plex Sans", "Segoe UI", sans-serif; --mono: "IBM Plex Mono", Consolas, monospace;
  --r: 14px; --r-lg: 20px; --shadow: 0 30px 60px -28px rgba(7, 31, 18, .45); --wrap: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--ink); background: var(--paper); font: 400 17px/1.6 var(--body);
  background-image: repeating-linear-gradient(180deg, transparent 0 39px, rgba(20, 92, 52, .045) 39px 40px), radial-gradient(1200px 600px at 80% -10%, rgba(197, 240, 106, .35), transparent 60%);
  background-attachment: fixed;
}
img { max-width: 100%; height: auto; }
a { color: var(--pine); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--pine-deep); }
code { font: 500 .92em var(--mono); background: var(--paper-2); padding: 1px 6px; border-radius: 6px; }
pre { max-width: 46em; overflow-x: auto; background: var(--pine-ink); color: #e6f2e8; border-radius: var(--r); padding: 16px 20px; font: 400 14px/1.6 var(--mono); margin: 18px 0 24px; }
pre code { background: none; padding: 0; color: inherit; font: inherit; }
.wrap { width: min(var(--wrap), 100% - 32px); margin-inline: auto; }
.mono { font-family: var(--mono); font-size: 14px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--lime); color: var(--ink); padding: 8px 12px; border-radius: 8px; z-index: 99; }
.skip:focus { left: 12px; }

/* ---------- header ---------- */
.top { position: sticky; top: 0; z-index: 20; background: rgba(246, 244, 238, .86); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.bar { display: flex; align-items: center; gap: 28px; min-height: 66px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font: 700 21px/1 var(--display); letter-spacing: -.01em; }
.brand img { border-radius: 9px; }
.brand b { color: var(--pine); font-weight: 800; }
.nav { display: flex; gap: 6px; margin-left: auto; }
.nav a, .menu nav a { font: 500 15px var(--body); color: var(--ink-2); text-decoration: none; padding: 8px 12px; border-radius: 9px; }
.nav a:hover { background: var(--paper-2); color: var(--ink); }
.nav a[aria-current="page"] { color: var(--pine); background: var(--lime-soft); }
.btn { display: inline-flex; align-items: center; gap: 8px; font: 600 16px var(--body); text-decoration: none; border-radius: 11px; padding: 13px 22px; transition: transform .15s ease, background .15s ease, box-shadow .15s ease; white-space: nowrap; }
.btn.primary { background: var(--pine); color: #fff; box-shadow: 0 10px 24px -14px rgba(11, 59, 33, .8); }
.btn.primary:hover { background: var(--pine-deep); transform: translateY(-1px); color: #fff; }
.btn.ghost { border: 1.5px solid var(--pine); color: var(--pine); background: transparent; }
.btn.ghost:hover { background: var(--lime-soft); transform: translateY(-1px); }
.btn.small { padding: 9px 16px; font-size: 14px; }
.menu { display: none; margin-left: auto; position: relative; }
.menu summary { list-style: none; cursor: pointer; width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--line); display: grid; place-content: center; gap: 4px; background: #fff; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary span { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; }
.menu nav { position: absolute; right: 0; top: 50px; width: min(320px, 88vw); background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 10px; display: grid; gap: 2px; }
.menu nav a { display: block; }
.menu nav a:last-child { margin-top: 6px; background: var(--pine); color: #fff; text-align: center; }

/* ---------- hero ---------- */
.hero { padding: clamp(40px, 7vw, 84px) 0 clamp(24px, 4vw, 44px); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.hero-grid:not(:has(.hero-shot)) { grid-template-columns: 1fr; }
.hero-grid:not(:has(.hero-shot)) .hero-copy { max-width: 44em; }
.hero-copy > * { animation: rise .7s cubic-bezier(.2, .7, .2, 1) both; }
.hero-copy > :nth-child(2) { animation-delay: .08s; } .hero-copy > :nth-child(3) { animation-delay: .16s; } .hero-copy > :nth-child(4) { animation-delay: .24s; }
.hero-shot { animation: rise .9s .3s cubic-bezier(.2, .7, .2, 1) both; margin: 0; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 500 12.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--pine); margin: 0 0 18px; }
.eyebrow::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px var(--lime-soft); }
h1 { font: 800 clamp(36px, 5.2vw, 66px)/1.02 var(--display); letter-spacing: -.025em; margin: 0 0 20px; text-wrap: balance; }
h1.long { font-size: clamp(30px, 3.7vw, 50px); letter-spacing: -.02em; }
@media (min-width: 981px) { .hero-grid:has(h1.long) { grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); } }
h1 em { font-style: normal; background: linear-gradient(180deg, transparent 58%, var(--lime) 58% 92%, transparent 92%); padding: 0 .08em; }
.lead { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; color: var(--ink-2); max-width: 34em; margin: 0 0 26px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero-shot .frame { background: var(--pine-ink); padding: 8px; border-radius: 18px; box-shadow: var(--shadow); border: 1px solid rgba(197, 240, 106, .3); position: relative; }
.hero-shot .frame::after { content: "LIVE FORM  ·  MIRROR ON  ·  SUBMITTED: 0"; position: absolute; left: 18px; top: -13px; font: 500 11px var(--mono); letter-spacing: .12em; color: var(--pine-ink); background: var(--lime); padding: 4px 10px; border-radius: 999px; }
.hero-shot img { display: block; width: 100%; height: auto; border-radius: 11px; }
.hero-shot figcaption { font: 400 14px/1.5 var(--body); color: var(--muted); margin: 12px 4px 0; }
.runway { width: min(var(--wrap), 100% - 32px); margin: 8px auto 0; height: 4px; background: repeating-linear-gradient(90deg, var(--pine) 0 26px, transparent 26px 52px); background-size: 52px 4px; opacity: .55; border-radius: 2px; animation: taxi 14s linear infinite; }
@keyframes taxi { to { background-position: 52px 0; } }

/* ---------- article ---------- */
.prose { counter-reset: sec; padding: 10px 0 70px; }
.prose > p, .prose > ul, .prose > ol, .prose > blockquote, .prose > h3, .prose > h4 { max-width: 46em; }
.prose > h2 { font: 700 clamp(27px, 3.1vw, 40px)/1.1 var(--display); letter-spacing: -.02em; margin: 66px 0 18px; max-width: 24em; text-wrap: balance; }
.prose > h2::before { counter-increment: sec; content: counter(sec, decimal-leading-zero); display: block; font: 500 12px var(--mono); letter-spacing: .16em; color: var(--pine); margin-bottom: 10px; }
.prose h3 { font: 700 21px/1.25 var(--display); margin: 30px 0 8px; letter-spacing: -.01em; }
.prose h4 { font: 600 17px/1.3 var(--display); margin: 22px 0 6px; }
.prose p { margin: 0 0 16px; }
.prose li { margin: 6px 0; }
.prose li::marker { color: var(--pine); }
.prose blockquote { margin: 22px 0; padding: 14px 20px; border-left: 4px solid var(--lime); background: #fff; border-radius: 0 var(--r) var(--r) 0; color: var(--ink-2); }
.prose hr { border: 0; border-top: 1px dashed var(--line-2); margin: 40px 0; }
.prose > p > img, .prose > img { display: block; border-radius: var(--r); border: 1px solid var(--line); box-shadow: 0 20px 40px -30px rgba(7, 31, 18, .5); }
.tbl { overflow-x: auto; margin: 18px 0 26px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
table { border-collapse: collapse; width: 100%; font-size: 15.5px; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font: 500 12.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--pine); background: var(--lime-soft); }
tr:last-child td { border-bottom: 0; }

/* ---------- building blocks used by the pages (:::name) ---------- */
.products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin: 26px 0 10px; }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px 28px 24px; position: relative; box-shadow: 0 18px 40px -34px rgba(7, 31, 18, .5); }
.card h3 { margin: 6px 0 10px; font-size: 26px; }
.card p { max-width: none; }
.card .tag { display: inline-block; font: 500 11.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; }
.card.live .tag { background: var(--lime); color: var(--pine-ink); }
.card.soon { border-style: dashed; border-color: var(--line-2); background: repeating-linear-gradient(135deg, #fff 0 14px, #fbfaf6 14px 28px); }
.card.soon .tag { background: var(--amber); color: #4a3a00; }
.card.soon h3 small { font: 500 12px var(--mono); color: var(--muted); letter-spacing: .06em; margin-left: 8px; }
.card .more { font-weight: 600; text-decoration: none; }
.card .more::after { content: " \2192"; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 22px 0 8px; counter-reset: step; }
.steps > div { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px 22px 18px; }
.steps > div::before { counter-increment: step; content: "0" counter(step); font: 700 34px/1 var(--display); color: var(--pine); display: block; margin-bottom: 12px; letter-spacing: -.03em; }
.steps h3 { margin: 0 0 8px; font-size: 20px; }
.steps p { margin: 0; color: var(--ink-2); font-size: 15.5px; }
.who { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 22px 0 8px; }
.who > div { border-top: 3px solid var(--pine); padding: 16px 0 0; }
.who h3 { margin: 0 0 8px; font-size: 20px; }
.who p { font-size: 15.5px; color: var(--ink-2); }
.proof { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; margin: 22px 0 10px; }
.shot { margin: 0; background: var(--pine-ink); border-radius: var(--r-lg); padding: 8px 8px 12px; border: 1px solid rgba(197, 240, 106, .25); }
.shot img { display: block; width: 100%; height: auto; border-radius: 12px; }
.shot p { color: #d9e6dc; font-size: 14px; line-height: 1.5; margin: 12px 8px 0; }
.shot p strong { color: var(--lime); font-weight: 600; }
.shot.wide { grid-column: 1 / -1; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 22px; }
.chips p { margin: 0; display: contents; }
.chips code { font: 500 13px var(--mono); background: var(--pine-ink); color: var(--lime); padding: 6px 11px; border-radius: 999px; }
.note { border-left: 4px solid var(--amber); background: var(--amber-soft); padding: 14px 18px; border-radius: 0 var(--r) var(--r) 0; margin: 22px 0; max-width: 46em; }
.note p { margin: 0; }
.note p + p { margin-top: 8px; }
.pricing { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 24px 0 12px; }
.plan { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px 24px 22px; text-align: left; position: relative; }
.plan.best { border-color: var(--pine); box-shadow: 0 24px 48px -34px rgba(11, 59, 33, .7); }
.plan.best::before { content: "MOST TAKEN"; position: absolute; top: -12px; left: 22px; font: 500 11px var(--mono); letter-spacing: .14em; background: var(--pine); color: #fff; padding: 4px 10px; border-radius: 999px; }
.plan h3 { margin: 0 0 4px; font-size: 19px; }
.plan .price { font: 800 44px/1 var(--display); letter-spacing: -.03em; margin: 8px 0 4px; }
.plan .price small { font: 500 14px var(--mono); color: var(--muted); letter-spacing: 0; margin-left: 6px; }
.plan ul { padding-left: 18px; margin: 12px 0 18px; font-size: 15px; color: var(--ink-2); }
.plan .btn { width: 100%; justify-content: center; }
.soon-box { background: #fff; border: 2px dashed var(--line-2); border-radius: var(--r-lg); padding: 28px; margin: 22px 0; position: relative; max-width: 56em; }
.soon-box::before { content: "COMING SOON"; position: absolute; top: -13px; left: 22px; font: 500 11.5px var(--mono); letter-spacing: .16em; background: var(--amber); color: #4a3a00; padding: 5px 10px; border-radius: 999px; }
.soon-box p:last-child, .soon-box ul:last-child { margin-bottom: 0; }
.cta { background: var(--pine-ink); color: #e8efe9; border-radius: var(--r-lg); padding: clamp(28px, 4vw, 48px); margin: 60px 0 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px; align-items: center; position: relative; overflow: hidden; }
.cta::after { content: ""; position: absolute; right: -80px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(197, 240, 106, .35), transparent 65%); }
.cta h3 { margin: 0 0 8px; font: 700 clamp(22px, 2.6vw, 32px)/1.15 var(--display); color: #fff; letter-spacing: -.02em; }
.cta p { margin: 0; color: #c7d5cb; max-width: 40em; }
.cta a.btn { background: var(--lime); color: var(--pine-ink); }
.cta a.btn:hover { background: #d8f68f; }
.cta p.btns { display: flex; gap: 10px; flex-wrap: wrap; position: relative; }
.faq { margin-top: 64px; max-width: 52em; }
.faq h2 { font: 700 clamp(26px, 3vw, 36px)/1.1 var(--display); letter-spacing: -.02em; margin: 0 0 14px; }
.faq details { border-top: 1px solid var(--line); padding: 4px 0; }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; font: 600 17.5px/1.4 var(--body); padding: 14px 34px 14px 0; position: relative; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 12px; font: 500 22px var(--mono); color: var(--pine); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details div { padding: 0 0 16px; color: var(--ink-2); max-width: 46em; }

/* ---------- footer ---------- */
.foot { background: var(--pine-ink); color: #cfdbd2; padding: 54px 0 26px; margin-top: 30px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 34px; }
.foot .brand { color: #fff; font-size: 19px; }
.foot .brand b { color: var(--lime); }
.foot p { font-size: 14.5px; line-height: 1.6; max-width: 34em; }
.foot a { color: #e2ebe4; }
.foot nav { display: grid; gap: 8px; align-content: start; font-size: 15px; }
.foot nav b { font: 500 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--lime); margin-bottom: 4px; }
.foot nav a { text-decoration: none; }
.foot nav a:hover { color: var(--lime); }
.foot nav small { font: 500 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; background: var(--amber); color: #4a3a00; padding: 2px 6px; border-radius: 999px; margin-left: 6px; }
.fine { margin-top: 34px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 13px; color: #93a498; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .products, .steps, .who, .pricing { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .cta { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .nav, .top-cta { display: none; }
  .menu { display: block; }
  body { font-size: 16px; }
  .bar { gap: 14px; min-height: 60px; }
  .hero { padding-top: 32px; }
  .hero-shot .frame { padding: 6px; border-radius: 14px; }
  .hero-shot .frame::after { left: 12px; font-size: 10px; }
  .foot-grid { grid-template-columns: 1fr; gap: 24px; }
  .cta-row .btn { width: 100%; justify-content: center; }
  .card { padding: 22px 20px 18px; }
  .prose > h2 { margin-top: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-copy > *, .hero-shot, .runway { animation: none; }
  html { scroll-behavior: auto; }
}

.soon, .btn.soon { opacity: .55; pointer-events: none; cursor: default; box-shadow: none; transform: none; }
.soon-bar { background: var(--lime-soft); color: var(--pine-ink); font: 500 15px var(--body); text-align: center; padding: 10px 16px; border-bottom: 1px solid rgba(20,92,52,.15); }