:root{
  --paper:#F4EEDD;
  --paper-2:#EBE2C8;
  --ink:#14213D;
  --ink-70:rgba(20,33,61,0.7);
  --ink-45:rgba(20,33,61,0.45);
  --blue:#3A6EA5;
  --blue-15:rgba(58,110,165,0.10);
  --blue-30:rgba(58,110,165,0.28);
  --seal:#9C2B1F;
  --seal-10:rgba(156,43,31,0.08);
  --brass:#B08D57;
  --live:#2E7D32;
  --amber:#B0813A;
  --display:'Archivo',sans-serif;
  --body: 'Inter', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  line-height:1.55;
  background-image:
    linear-gradient(var(--blue-15) 1px, transparent 1px),
    linear-gradient(90deg, var(--blue-15) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: -1px -1px;
}
a{color:inherit;}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px;}
.mono{font-family:var(--mono);}
.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--blue);
  display:flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:"";
  width:18px;height:1px;
  background:var(--blue);
  display:inline-block;
}

/* ---------- NAV ---------- */
nav{
  position:sticky; top:0; z-index:50;
  background:rgba(237,238,232,0.9);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--blue-30);
}
nav .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:76px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:var(--display); font-weight:700; font-size:20px;
  letter-spacing:-0.01em;
  text-decoration:none;
}
.brand svg{width:32px;height:32px;flex-shrink:0;}
nav .links{display:flex; gap:32px; font-size:15px; font-weight:500;}
nav .links a{text-decoration:none; color:var(--ink-70); transition:color .15s;}
nav .links a:hover{color:var(--seal);}
.btn{
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:0.02em;
  padding:12px 22px;
  border:1px solid var(--ink);
  background:transparent;
  color:var(--ink);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.btn:hover{background:var(--ink); color:var(--paper); transform:translateY(-1px);}
.btn-seal{border-color:var(--seal); color:var(--seal);}
.btn-seal:hover{background:var(--seal); color:#fff; box-shadow:0 6px 18px rgba(156,43,31,0.28);}

/* ---------- SHEET TITLE BLOCK (recurring structural device) ---------- */
.sheet-label{
  display:flex; align-items:baseline; gap:14px;
  font-family:var(--mono); font-size:12px; color:var(--ink-45);
  border-top:1px solid var(--blue-30);
  padding-top:10px; margin-bottom:32px;
  text-transform:uppercase; letter-spacing:0.08em;
}
.sheet-label .no{color:var(--seal); font-weight:500;}

/* ---------- HERO ---------- */
header.hero{padding:104px 0 76px; position:relative; overflow:hidden;}
.hero-grid{
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center;
}
h1{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(44px, 5.6vw, 68px);
  line-height:1.02;
  letter-spacing:-0.025em;
  margin:20px 0 24px;
}
h1 em{font-style:normal; color:var(--seal);}
.hero p.lede, .lede{
  font-size:19px; color:var(--ink-70); max-width:46ch; margin-bottom:34px;
}
.hero-ctas{display:flex; gap:14px; margin-bottom:48px;}
.hero-meta{
  display:flex; gap:36px; font-family:var(--mono); font-size:12px; color:var(--ink-45);
}
.hero-meta strong{display:block; color:var(--ink); font-size:22px; font-family:var(--display); font-weight:600;}

/* Blueprint document mockup */
.doc-sheet{
  position:relative;
  background:#fff;
  border:1px solid var(--ink);
  aspect-ratio: 4/5;
  padding:28px;
  font-family:var(--mono);
  font-size:11px;
  color:var(--ink-70);
  box-shadow: 10px 10px 0 var(--blue-15), 20px 20px 0 rgba(176,141,87,0.10);
}
.doc-sheet .row{display:flex; justify-content:space-between; border-bottom:1px dashed var(--blue-30); padding:8px 0;}
.doc-sheet .row.total{border-bottom:none; border-top:1px solid var(--ink); margin-top:6px; padding-top:10px; color:var(--ink); font-weight:500;}
.callout{
  position:absolute;
  font-family:var(--mono); font-size:10.5px;
  color:var(--seal);
  display:flex; align-items:center; gap:6px;
}
.callout::before{content:""; width:26px; height:1px; background:var(--seal);}
.callout.c1{top:18%; left:100%; margin-left:8px; width:150px;}
.callout.c2{top:52%; left:100%; margin-left:8px; width:150px;}
.callout.c3{bottom:10%; left:100%; margin-left:8px; width:150px;}
.doc-sheet .lang{display:flex; gap:6px; flex-wrap:wrap; margin-top:14px;}
.doc-sheet .lang span{border:1px solid var(--blue-30); padding:3px 8px; font-size:10px; color:var(--blue);}

/* Ink stamp, signature element / logo mark reused large */
.stamp{
  position:absolute;
  width:132px; height:132px;
  border:2.5px solid var(--seal);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transform:rotate(-14deg) scale(0);
  opacity:0;
  color:var(--seal);
  font-family:var(--mono);
  text-align:center;
  line-height:1.3;
  mix-blend-mode:multiply;
  transition: transform .6s cubic-bezier(.2,1.6,.4,1), opacity .4s;
  pointer-events:none;
}
.stamp.show{transform:rotate(-14deg) scale(1); opacity:0.88;}
.stamp::before{
  content:"";
  position:absolute; inset:6px;
  border:1px solid var(--seal);
  border-radius:50%;
}
.stamp span{font-size:11px; letter-spacing:0.14em; font-weight:500;}
.hero .stamp{right:-24px; bottom:-18px; width:118px; height:118px;}

/* ---------- MARQUEE STRIP ---------- */
.strip{
  border-top:1px solid var(--ink); border-bottom:1px solid var(--ink);
  background:var(--ink); color:var(--paper);
  padding:12px 0; overflow:hidden; white-space:nowrap;
}
.strip .track{
  display:inline-block; font-family:var(--mono); font-size:12.5px; letter-spacing:0.06em;
  animation: scroll 32s linear infinite;
}
.strip .track span{margin:0 28px; opacity:0.6;}
.strip .track span.on{color:var(--live); opacity:1;}
.strip .track span.on::before{content:"● "; font-size:9px; vertical-align:1px;}
@keyframes scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ---------- SECTIONS ---------- */
section{padding:104px 0;}
section.alt{background:var(--paper-2); border-top:1px solid var(--blue-30); border-bottom:1px solid var(--blue-30);}
h2{
  font-family:var(--display); font-weight:600; font-size:clamp(30px,3.4vw,42px);
  letter-spacing:-0.02em; margin-bottom:14px; max-width:20ch;
}
.section-head{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:end; margin-bottom:56px;}
.section-head p{color:var(--ink-70); font-size:16px; max-width:44ch;}

/* Product line — one uniform card per niche */
.cards{
  display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:1fr;
  gap:1px; background:var(--ink); border:1px solid var(--ink);
}
.card{
  background:var(--paper); padding:30px 28px 28px;
  text-decoration:none; color:inherit;
  display:flex; flex-direction:column;
  transition:transform .18s ease, box-shadow .18s ease;
  position:relative;
}
.card:hover{transform:translateY(-3px); box-shadow:0 14px 30px rgba(20,33,61,0.12); z-index:1;}
.card .tag{
  font-family:var(--mono); font-size:11px; color:var(--ink-45);
  text-transform:uppercase; letter-spacing:0.08em; margin-bottom:14px;
  display:inline-flex; align-items:center; gap:7px;
}
.card h3{font-family:var(--display); font-size:19px; font-weight:600; margin-bottom:10px; line-height:1.25;}
.card p{font-size:14px; color:var(--ink-70); margin:0;}

.card.is-live{background:#fff;}
.card.is-live .tag{color:var(--live);}
/* faint light in the four corners while online */
.card.is-live::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:1px;
  background:
    radial-gradient(20px at 0 0,        rgba(46,125,50,0.20), transparent 72%),
    radial-gradient(20px at 100% 0,     rgba(46,125,50,0.20), transparent 72%),
    radial-gradient(20px at 0 100%,     rgba(46,125,50,0.20), transparent 72%),
    radial-gradient(20px at 100% 100%,  rgba(46,125,50,0.20), transparent 72%);
}

.status-dot{width:8px; height:8px; border-radius:50%; background:var(--ink-45); flex-shrink:0;}
.is-live .status-dot{
  background:var(--live);
  box-shadow:0 0 0 0 rgba(46,125,50,0.45);
  animation:dot-pulse 2.4s ease-out infinite;
}
.is-building .status-dot{background:var(--amber);}
@keyframes dot-pulse{
  0%{box-shadow:0 0 0 0 rgba(46,125,50,0.45);}
  70%{box-shadow:0 0 0 7px rgba(46,125,50,0);}
  100%{box-shadow:0 0 0 0 rgba(46,125,50,0);}
}
@media (prefers-reduced-motion:reduce){ .status-dot{animation:none;} }

.roadmap-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--blue-30); margin-top:2px; border:1px solid var(--blue-30);}
.roadmap-grid a{
  background:var(--paper); padding:17px 20px; font-size:14px; font-weight:500;
  text-decoration:none; color:var(--ink); display:flex; justify-content:space-between; align-items:center;
  transition:background .15s;
}
.roadmap-grid a:hover{background:var(--paper-2);}
.roadmap-grid a span{
  font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:0.06em;
  color:var(--ink-45); border:1px solid var(--blue-30); padding:2px 8px; flex-shrink:0; margin-left:12px;
}
@media (max-width:860px){ .roadmap-grid{grid-template-columns:1fr;} }

/* ---------- PRICING ---------- */
.price-grid{
  display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:1fr;
  gap:1px; background:var(--ink); border:1px solid var(--ink);
}
.price-tier{
  background:var(--paper); padding:30px 26px 28px;
  display:flex; flex-direction:column;
}
.price-tier.is-featured{background:#fff;}
.price-name{
  font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:0.1em;
  color:var(--ink-45);
}
.price-tier.is-featured .price-name{color:var(--seal);}
.price-fig{
  font-family:var(--display); font-size:34px; font-weight:700; letter-spacing:-0.02em;
  margin:10px 0 20px;
}
.price-fig span{font-family:var(--mono); font-size:13px; font-weight:400; color:var(--ink-45); margin-left:2px;}
.price-tier ul{list-style:none; padding:0; margin:0 0 24px; display:flex; flex-direction:column; gap:9px;}
.price-tier li{
  font-size:13.5px; color:var(--ink-70); line-height:1.45; padding-left:18px; position:relative;
}
.price-tier li::before{content:"+"; position:absolute; left:0; color:var(--brass); font-weight:600;}
.price-tier .btn{margin-top:auto; justify-content:center; font-size:12px; padding:11px 16px;}
.price-note{
  margin-top:22px; font-family:var(--mono); font-size:12px; color:var(--ink-45); line-height:1.7;
}
.price-note a{color:var(--seal); text-decoration:none;}
@media (max-width:900px){ .price-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .price-grid{grid-template-columns:1fr;} }

/* Process, dimension-line list */
.process{border-top:1px solid var(--ink);}
.step{
  display:grid; grid-template-columns:90px 1fr 1.3fr; gap:24px;
  padding:28px 0; border-bottom:1px solid var(--blue-30); align-items:start;
}
.step .idx{font-family:var(--mono); font-size:13px; color:var(--seal);}
.step h4{font-family:var(--display); font-size:18px; font-weight:600;}
.step p{color:var(--ink-70); font-size:14.5px; max-width:50ch;}

/* Trust */
.trust-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:2px; background:var(--blue-30);}
.trust-item{background:var(--paper-2); padding:28px 30px; display:flex; gap:16px;}
.trust-item .mark{font-family:var(--mono); color:var(--blue); font-size:15px; flex-shrink:0; padding-top:2px;}
.trust-item h4{font-family:var(--display); font-size:15.5px; font-weight:600; margin-bottom:4px;}
.trust-item p{font-size:13.5px; color:var(--ink-70);}

/* Document mockup: flagged row */
.doc-sheet .row.flag{color:var(--seal); font-weight:500;}
.doc-sheet .row.flag::after{content:" \2691";}

/* Table-style document mockup (used on niches with line-item audits) */
.sheet-mock{position:relative; background:#fffdf7; border:1px solid var(--ink); font-family:var(--mono); font-size:11px; box-shadow:10px 10px 0 var(--blue-15);}
.sheet-mock table{width:100%; border-collapse:collapse;}
.sheet-mock th{background:var(--ink); color:var(--paper); text-align:left; padding:8px 10px; font-weight:500; font-size:10.5px; text-transform:uppercase; letter-spacing:0.04em;}
.sheet-mock td{padding:8px 10px; border-bottom:1px solid var(--blue-30); color:var(--ink-70);}
.sheet-mock tr.flag td{background:rgba(156,43,31,0.08); color:var(--seal); font-weight:500;}
.sheet-mock tr.flag td:last-child::after{content:" \2691";}

/* Document-types / flags stat grid (two names, same component, used across niche pages) */
.doctypes, .flags-list{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--ink); border:1px solid var(--ink); margin-top:8px;}
.doctypes div, .flags-list div{background:var(--paper); padding:22px 20px; transition:transform .18s ease, box-shadow .18s ease;}
.doctypes div:hover, .flags-list div:hover{transform:translateY(-2px); box-shadow:0 10px 22px rgba(20,33,61,0.10); position:relative; z-index:1;}
.doctypes .num, .flags-list .num{font-family:var(--display); font-size:26px; font-weight:600; color:var(--seal); display:block; margin-bottom:8px;}
.doctypes p, .flags-list p{font-size:13px; color:var(--ink-70);}

/* Letter of Credit page - exploring-status note */
.meta-line{font-family:var(--mono); font-size:12px; color:var(--ink-45); margin-top:20px;}
.note-box{border:1px solid var(--blue-30); background:var(--paper-2); padding:26px 28px; font-size:14.5px; color:var(--ink-70); max-width:70ch;}

/* Status pill (planned/building niches, where still used) */
.status-pill{
  display:inline-block; font-family:var(--mono); font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--ink-45); border:1px solid var(--blue-30); padding:5px 12px; margin-bottom:18px;
}

/* CTA band */
.cta-band{
  background:var(--ink); color:var(--paper);
  padding:92px 0; text-align:center; position:relative;
}
.cta-band h2{color:var(--paper); margin:0 auto 20px; max-width:18ch;}
.cta-band p{color:rgba(237,238,232,0.65); max-width:44ch; margin:0 auto 34px; font-size:16px;}
.cta-band .btn{border-color:var(--paper); color:var(--paper);}
.cta-band .btn:hover{background:var(--paper); color:var(--ink);}
.cta-band .btn-seal{border-color:var(--seal); color:#fff; background:var(--seal);}
.cta-band .btn-seal:hover{background:transparent; color:var(--seal); box-shadow:none;}
.cta-ctas{display:flex; gap:14px; justify-content:center;}

/* Footer */
footer{padding:56px 0 30px;}
.foot-grid{display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:20px;}
.foot-meta{font-family:var(--mono); font-size:11.5px; color:var(--ink-45); line-height:1.8;}
.footer-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:40px; padding-bottom:32px; border-bottom:1px solid var(--blue-30);}
.footer-brand p{font-size:13px; color:var(--ink-70); margin-top:12px; max-width:34ch; line-height:1.6;}
.footer-col h5{font-family:var(--mono); font-size:10.5px; letter-spacing:0.09em; text-transform:uppercase; color:var(--ink-45); margin-bottom:14px; font-weight:500;}
.footer-col a{display:block; font-size:13.5px; color:var(--ink-70); text-decoration:none; margin-bottom:10px; transition:color .15s;}
.footer-col a:hover{color:var(--seal);}
.footer-bottom{display:flex; justify-content:space-between; align-items:flex-end; padding-top:22px; gap:24px; flex-wrap:wrap;}
.mini-stamp{flex-shrink:0; opacity:0.9;}
.mini-stamp svg{display:block; width:clamp(46px,12vw,58px); height:auto;}

.reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:none;}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
  .reveal{opacity:1; transform:none;}
  .stamp.show{opacity:0.88;}
}

/* ---------- Form controls (book-a-pilot.html) ----------
   Same control language as app.css's dashboard forms (.field/.input/
   .btn--primary/.alert), so a visitor going from the marketing site's
   book-a-pilot page into the logged-in app after signup sees one
   consistent system, not two different form styles. */
.form-panel{
  background:var(--paper-2); border:1px solid var(--ink); border-radius:3px;
  padding:36px; max-width:640px; margin:0 auto;
}
.field{margin-bottom:18px;}
.field label{
  display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:0.09em;
  text-transform:uppercase; color:var(--ink-45); margin-bottom:7px;
}
.input, textarea.input{
  width:100%; background:var(--paper); border:1px solid var(--blue-30); color:var(--ink);
  font-family:var(--body); font-size:14.5px; padding:11px 13px; border-radius:3px;
  transition:border-color .15s ease;
}
textarea.input{resize:vertical; min-height:88px; font-family:var(--body);}
.input:focus, textarea.input:focus{outline:none; border-color:var(--blue);}
select.input{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--ink-45) 50%),linear-gradient(135deg,var(--ink-45) 50%,transparent 50%); background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%; background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:34px;}
.hint{font-size:12px; color:var(--ink-45); margin-top:6px;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.checkbox-grid{display:grid; grid-template-columns:1fr 1fr; gap:9px 16px;}
.checkbox-row{display:flex; align-items:flex-start; gap:9px; font-size:13.5px; color:var(--ink-80); cursor:pointer;}
.checkbox-row input{margin-top:3px; flex-shrink:0; width:15px; height:15px; accent-color:var(--seal);}
.consent-row{display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:var(--ink-80); margin:22px 0 24px;}
.consent-row input{margin-top:3px; flex-shrink:0; width:16px; height:16px; accent-color:var(--seal);}
.hp-field{position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; overflow:hidden;}

.btn--primary{background:var(--seal); border-color:var(--seal); color:#fff;}
.btn--primary:hover{background:#822418; border-color:#822418; color:#fff;}
.btn--block{width:100%; justify-content:center; padding:13px 20px;}
.btn:disabled{opacity:.5; cursor:not-allowed; transform:none;}

.alert{
  border:1px solid; border-radius:3px; padding:13px 15px; font-size:13.5px;
  margin-bottom:18px; line-height:1.5;
}
.alert--err{background:var(--seal-10); border-color:rgba(156,43,31,0.3); color:#7d2016;}
.alert--ok{background:rgba(46,125,50,0.10); border-color:rgba(46,125,50,0.3); color:#1f5c24;}

/* ---- Mobile hamburger nav ---- */
.menu-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  background:none; border:none; cursor:pointer; padding:8px; margin:0;
}
.menu-toggle span{width:22px; height:2px; background:var(--ink); display:block; transition:transform .2s, opacity .2s;}
.menu-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.menu-toggle.open span:nth-child(2){opacity:0;}
.menu-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

@media (max-width:860px){
  .menu-toggle{display:flex;}
  nav .links{
    display:none;
    position:absolute; top:76px; left:0; right:0;
    background:var(--paper); border-bottom:1px solid var(--blue-30);
    flex-direction:column; gap:0; padding:6px 0;
    box-shadow:0 10px 24px rgba(20,33,61,0.12);
  }
  nav .links.open{display:flex;}
  nav .links a{padding:15px 32px; border-bottom:1px solid var(--blue-15);}
  .hero-grid{grid-template-columns:1fr;}
  .doc-sheet{margin-top:40px;}
  .callout{display:none;}
  .section-head{grid-template-columns:1fr;}
  .cards{grid-template-columns:1fr;}
  .step{grid-template-columns:50px 1fr; }
  .step p{grid-column:1/-1;}
  .trust-grid{grid-template-columns:1fr;}
  .doctypes, .flags-list{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr; gap:28px;}
  .footer-bottom{flex-direction:column-reverse; align-items:flex-start; gap:16px;}
  .form-panel{padding:26px 20px;}
  .field-row, .checkbox-grid{grid-template-columns:1fr;}
}

/* ---- Small-screen polish ---- */
.btn{white-space:nowrap;}
@media (max-width:560px){
  nav .wrap{height:64px; gap:10px;}
  .brand{font-size:16.5px; gap:8px;}
  .brand svg{width:28px;height:28px;}
  nav .links{top:64px;}
  nav .wrap > .btn{padding:9px 14px; font-size:11.5px;}
  header.hero{padding:72px 0 54px;}
  .hero h1{font-size:clamp(33px, 8.8vw, 46px); line-height:1.12;}
  .hero-ctas{flex-direction:column; align-items:stretch; gap:12px;}
  .hero-ctas .btn{justify-content:center; padding:14px 18px;}
}

/* ---- Hero background depth ---- */
header.hero::before{
  content:"";
  position:absolute; top:-25%; right:-12%;
  width:65%; height:150%;
  background:radial-gradient(circle, rgba(176,141,87,0.20) 0%, rgba(58,110,165,0.12) 45%, transparent 72%);
  pointer-events:none; z-index:0;
}
header.hero::after{
  content:"";
  position:absolute; bottom:-30%; left:-15%;
  width:50%; height:120%;
  background:radial-gradient(circle, rgba(58,110,165,0.14) 0%, transparent 70%);
  pointer-events:none; z-index:0;
}
header.hero .wrap{position:relative; z-index:1;}

:focus-visible{outline:2px solid var(--seal); outline-offset:2px;}