/* FaireSight marketing site — shared design system.
   Locked direction (documents/Roadmap/ux-refresh-strawmen.md §3): verdant
   accent, Avenir Next, light "merchant shell". Signature motif: the morning
   "brief card" with a mono timestamp, reused as hero + structural device.
   No second brand hue; one accent (#047857) carries everything. */
:root{
  --accent:#047857;--accent-soft:#e6f2ed;--accent-dark:#065f46;--accent-border:#bfe0d2;
  --ink:#15221c;--ink-2:#4a5b53;--ink-3:#7d8c85;--paper:#fbfcfb;--paper-2:#f3f7f5;
  --line:#e6ece9;--line-2:#d4ded9;--err:#b91c1c;
  /* Clay — the one complement to the verdant accent, and the only hue on this
     site besides it. Chosen against the accent rather than inherited from the
     app: emerald is 163deg at 97% saturation, and clay is 17deg at 94%, which
     is emerald's split complement at matching intensity, so the two hold the
     page as a pair. The app's --warn (#d97706) was the obvious hand-me-down and
     is a worse fit here on both counts — 32deg is a yellower, slacker
     relationship to green, and at 3.19:1 on white it cannot legally carry body
     text at all. Same warm family though, so nothing clashes if the two
     surfaces ever sit side by side.

     Paired like --accent for the same reason: the base is for fills, the -dark
     stop (7.31:1) for any lettering. Used for MEANING, never decoration — clay
     marks money leaving (a price, a subscription, a break-even) so it cannot be
     read as the accent, which on /calculator means money arriving. That page
     compares those two quantities and rendered both in the identical green.
     Deliberately not --err: a red price reads as a fault rather than a cost. */
  --clay:#c2410c;--clay-dark:#9a3412;--clay-soft:#fdf0ea;--clay-border:#f2d3c4;
  --sans:"Avenir Next","Avenir","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --wrap:72rem;
}
*{box-sizing:border-box;}
html,body{background:var(--paper);}
body{margin:0;font-family:var(--sans);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.5;}
a{color:var(--accent);text-decoration:none;}
a:hover{text-decoration:underline;}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
h1,h2,h3{letter-spacing:-.02em;font-weight:600;text-wrap:balance;margin:0;}
h1{font-size:clamp(2.3rem,4.6vw,3.6rem);line-height:1.06;letter-spacing:-.025em;}
h2{font-size:clamp(1.6rem,3.1vw,2.2rem);line-height:1.2;}
h3{font-size:1.05rem;}
img,svg{max-width:100%;}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:2rem;width:100%;}
.section{padding:4.5rem 0;}
.section-tight{padding:2.75rem 0;}
.section.alt{background:var(--paper-2);border-block:1px solid var(--line);}
.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-dark);}
.lede{font-size:1.1rem;line-height:1.6;color:var(--ink-2);max-width:38rem;margin:.9rem 0 0;}
.section h2{margin-top:.6rem;}

/* nav */
.nav{display:flex;justify-content:space-between;align-items:center;padding:1.2rem 2rem;max-width:var(--wrap);margin:0 auto;width:100%;}
.wordmark{font-weight:600;letter-spacing:-.01em;font-size:1.05rem;color:var(--ink);}
.wordmark:hover{text-decoration:none;}
.wordmark .ai{color:var(--accent);}
.nav-links{display:flex;gap:1.4rem;align-items:center;}
.nav-links a{color:var(--ink-2);font-size:.92rem;}
.nav-links a.on{color:var(--ink);font-weight:600;}
.nav-links a:hover{color:var(--ink);text-decoration:none;}
.nav-links a.btn,.nav-links a.btn:hover{color:#fff;} /* .nav-links a's element-selector specificity otherwise beats .btn's */

/* buttons */
.btn{display:inline-block;padding:.7rem 1.2rem;border-radius:.5rem;background:var(--accent);color:#fff;font-weight:600;border:1px solid var(--accent);cursor:pointer;}
.btn:hover{background:var(--accent-dark);border-color:var(--accent-dark);text-decoration:none;}
.btn-sm{padding:.5rem .9rem;font-size:.9rem;}
.btn-ghost{background:transparent;color:var(--accent-dark);border-color:var(--accent-border);}
.btn-ghost:hover{background:var(--accent-soft);}

/* generic grid + cards */
.grid{display:grid;gap:1.4rem;margin-top:2rem;}
.grid.cols-3{grid-template-columns:repeat(3,1fr);}
.grid.cols-2{grid-template-columns:repeat(2,1fr);}
.card{background:#fff;border:1px solid var(--line);border-radius:.9rem;padding:1.5rem;box-shadow:0 2px 8px rgba(21,34,28,.04);}
a.card:hover{border-color:var(--accent-border);text-decoration:none;box-shadow:0 10px 26px -18px rgba(4,120,87,.35);}
.card h3{margin-bottom:.5rem;}
.card p{margin:0;color:var(--ink-2);font-size:.95rem;}

/* how-it-works — a real sequence, so numbering earns its place */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:2rem;}
.steps .step .n{font-family:var(--mono);color:var(--accent);font-size:.8rem;letter-spacing:.1em;}
.steps .step h3{margin:.4rem 0 .35rem;}
.steps .step p{margin:0;color:var(--ink-2);font-size:.95rem;}

/* the signature: morning brief card */
.brief-card{
  background:#fff;border:1px solid var(--line);border-radius:.9rem;
  box-shadow:0 18px 40px -24px rgba(4,120,87,.28),0 2px 8px rgba(21,34,28,.05);
  padding:1.3rem 1.4rem 1.45rem;max-width:26rem;
}
.brief-card .card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;}
.brief-card .when{font-family:var(--mono);font-size:.7rem;color:var(--ink-3);}
.badge{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  background:var(--accent-soft);color:var(--accent-dark);border:1px solid var(--accent-border);
  border-radius:999px;padding:.22rem .6rem;
}
.brief-line{font-size:1.02rem;line-height:1.55;color:var(--ink);margin:0;}
.brief-line.typing{min-height:4.6em;} /* reserve height only where the text types in, to avoid layout shift */
.brief-line .caret{display:inline-block;width:2px;height:1.05em;background:var(--accent);vertical-align:-.15em;animation:blink 1s steps(1) infinite;}
@keyframes blink{50%{opacity:0;}}
.brief-card .card-actions{display:flex;gap:.5rem;margin-top:1.05rem;}
.brief-card .card-actions span{
  font-size:.8rem;padding:.38rem .8rem;border-radius:.45rem;border:1px solid var(--accent-border);
  color:var(--accent-dark);background:var(--accent-soft);
}
.brief-card .card-actions span.ghost{background:transparent;border-color:var(--line);color:var(--ink-2);}
.brief-dots{display:flex;gap:.35rem;margin-top:1rem;}
.brief-dots i{width:.42rem;height:.42rem;border-radius:50%;background:var(--line-2);}
.brief-dots i.on{background:var(--accent);}

/* hero (landing) */
.hero{
  display:grid;grid-template-columns:1.05fr .95fr;gap:3.5rem;align-items:center;
  max-width:var(--wrap);margin:0 auto;padding:3rem 2rem 4rem;width:100%;
}
.hero h1{margin:.9rem 0 1.1rem;}
.hero h1 em{font-style:normal;color:var(--accent);}
.hero .sub{font-size:1.08rem;line-height:1.55;color:var(--ink-2);max-width:30rem;margin:0 0 1.8rem;}

/* waitlist capture form */
form.capture{display:flex;gap:.5rem;max-width:26rem;}
form.capture input{flex:1;min-width:0;padding:.7rem .9rem;border:1px solid var(--line-2);border-radius:.5rem;background:#fff;color:var(--ink);font:inherit;}
form.capture input::placeholder{color:var(--ink-3);}
form.capture button{padding:.7rem 1.1rem;border:none;border-radius:.5rem;background:var(--accent);color:#fff;font:inherit;font-weight:600;white-space:nowrap;cursor:pointer;}
form.capture button:hover{background:var(--accent-dark);}
form.capture button:disabled{opacity:.6;cursor:default;}
.capture-note{font-size:.8rem;color:var(--ink-3);margin-top:.55rem;max-width:26rem;}
.capture-err{font-size:.8rem;color:var(--err);margin-top:.4rem;min-height:1em;}
.hp{position:absolute;left:-5000px;top:-5000px;width:1px;height:1px;overflow:hidden;}
.confirm{display:flex;align-items:center;gap:.55rem;background:var(--accent-soft);border:1px solid var(--accent-border);color:var(--accent-dark);border-radius:.5rem;padding:.75rem 1rem;max-width:26rem;font-size:.92rem;}
.confirm svg{flex:none;}

/* retailer-trust band + proof strip (landing) */
.retailer-trust{background:var(--paper-2);border-block:1px solid var(--line);padding:3.4rem 2rem 3rem;}
.retailer-trust .inner{max-width:44rem;margin:0 auto;text-align:center;}
.retailer-trust h2{margin:.75rem 0 1rem;}
.retailer-trust p{font-size:1.02rem;line-height:1.6;color:var(--ink-2);margin:0 auto;max-width:38rem;}
.proof{padding:2.5rem 2rem;display:flex;gap:2.5rem;justify-content:center;flex-wrap:wrap;max-width:var(--wrap);margin:0 auto;}
.proof div{font-size:.86rem;color:var(--ink-2);max-width:15rem;}
.proof strong{display:block;color:var(--ink);font-weight:600;margin-bottom:.15rem;font-size:1rem;}

/* pricing */
.tier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;align-items:start;margin-top:2rem;}
.tier{background:#fff;border:1px solid var(--line);border-radius:.9rem;padding:1.6rem;position:relative;}
.tier.featured{border-color:var(--accent);box-shadow:0 18px 40px -24px rgba(4,120,87,.28);}
.tier .pill{position:absolute;top:-.7rem;left:1.6rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;background:var(--accent);color:#fff;border-radius:999px;padding:.2rem .6rem;}
.tier h3{font-size:1rem;}
.tier .price{font-size:2rem;font-weight:600;letter-spacing:-.02em;margin:.4rem 0 .1rem;}
.tier .price small{font-size:.9rem;color:var(--ink-3);font-weight:400;}
.tier .cap{color:var(--ink-3);font-size:.85rem;}
.tier ul{list-style:none;padding:0;margin:1rem 0 0;}
.tier li{padding:.4rem 0;color:var(--ink-2);font-size:.92rem;border-top:1px solid var(--line);}
.price-note{color:var(--ink-3);font-size:.85rem;margin-top:1.2rem;max-width:44rem;}
/* Trademark / non-endorsement line under the subprocessor grid. Same weight as
   .price-note: present and readable, never shouting. */
.stack-note{color:var(--ink-3);font-size:.85rem;margin-top:1.4rem;max-width:44rem;}
.matrix-scroll{overflow-x:auto;margin-top:2rem;}
.matrix{width:100%;border-collapse:collapse;font-size:.92rem;min-width:34rem;}
.matrix th,.matrix td{text-align:left;padding:.7rem .8rem;border-bottom:1px solid var(--line);}
.matrix th.c,.matrix td.c{text-align:center;}
.matrix thead th{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);}

/* callout / founding band */
.callout{background:var(--accent-soft);border:1px solid var(--accent-border);border-radius:.9rem;padding:1.6rem 1.8rem;color:var(--accent-dark);}
.callout strong{color:var(--accent-dark);}
.callout.row{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;}
.callout .big{font-size:1.15rem;font-weight:600;}
.cta-row{margin-top:1.5rem;} /* the paragraph holding a CTA button after a lede/section */

/* Answer-first block on the /answers cluster. Reuses the brief-card motif:
   the opening block IS the chunk retrieval quotes, so it is set apart. Same
   background/border/radius formula as .callout above, hence living beside it. */
.answer{background:var(--accent-soft);border:1px solid var(--accent-border);
  border-radius:.6rem;padding:1.1rem 1.2rem;margin:0 0 1.4rem;max-width:38rem;}
.answer p{margin:0;color:var(--ink);}
.answer p + p{margin-top:.7rem;}

/* FAQ */
.faq{max-width:44rem;margin-top:1.5rem;}
.faq-item{border-top:1px solid var(--line);padding:1.1rem 0;}
.faq-item h3{margin-bottom:.35rem;}
.faq-item p{margin:0;color:var(--ink-2);}

/* how-it-works: four steps, so 2x2 rather than .steps' 3-across (index.html) */
.steps.four{grid-template-columns:repeat(2,1fr);gap:1.7rem 2.2rem;}

/* grow: the three outcome pillars */
.outcome{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2rem;}
.outcome .o{background:#fff;border:1px solid var(--line);border-radius:.9rem;padding:1.5rem;box-shadow:0 2px 8px rgba(21,34,28,.04);}
.outcome .o .tag{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:.55rem;}
.outcome .o h3{margin-bottom:.5rem;}
.outcome .o p{margin:0;color:var(--ink-2);font-size:.95rem;}

/* grow: the proof band. .flat greys the deliberately-unmoved stat, which is
   the point of the section — growth came from more orders, not bigger ones. */
.statline{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;margin-top:2rem;}
.stat{background:#fff;border:1px solid var(--line);border-radius:.9rem;padding:1.2rem 1.3rem;}
.stat .big{font-size:2rem;font-weight:600;letter-spacing:-.03em;color:var(--accent);line-height:1;font-variant-numeric:tabular-nums;display:block;}
.stat .lab{display:block;margin-top:.45rem;font-size:.85rem;color:var(--ink-2);}
.stat.flat .big{color:var(--ink-3);}
.punch{margin-top:1.5rem;font-size:1.02rem;line-height:1.6;color:var(--ink);max-width:40rem;border-left:3px solid var(--accent);padding-left:1rem;}
.fineprint{font-size:.8rem;color:var(--ink-3);margin-top:1.1rem;max-width:44rem;}

/* about: narrative column + founder card */
.story{max-width:40rem;}
.story p{color:var(--ink-2);font-size:1.03rem;line-height:1.68;margin:1.1rem 0 0;}
.story p strong{color:var(--ink);font-weight:600;}
.founder{display:grid;grid-template-columns:auto 1fr;gap:1.3rem;align-items:start;background:#fff;border:1px solid var(--line);border-radius:.9rem;padding:1.5rem;box-shadow:0 2px 8px rgba(21,34,28,.04);margin-top:2.2rem;max-width:40rem;}
.founder .avatar{width:4rem;height:4rem;border-radius:50%;background:var(--accent-soft);border:1px solid var(--accent-border);display:grid;place-items:center;font-size:1.3rem;font-weight:600;color:var(--accent-dark);}
.founder h3{font-size:1.15rem;}
.founder .role{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-dark);margin:.3rem 0 .6rem;}
.founder .credit{font-size:1.05rem;font-weight:600;color:var(--accent-dark);letter-spacing:-.01em;margin:0 0 .8rem;}
.founder ul{margin:0;padding-left:1.1rem;}
.founder li{color:var(--ink-2);font-size:.93rem;margin:.28rem 0;}

/* security: plain-English promises, then the technical detail on demand */
.promise{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2rem;}
/* An odd promise count would otherwise strand the last card alone in a
   three-wide row with two empty cells beside it. Spanning it reads as a
   deliberate closing statement instead, and self-adjusts: with a count that
   divides by three the selector doesn't match and nothing changes. */
.promise .p:last-child:nth-child(3n+1){grid-column:1 / -1;}
.promise .p{background:#fff;border:1px solid var(--line);border-radius:.9rem;padding:1.5rem;box-shadow:0 2px 8px rgba(21,34,28,.04);}
.promise .p h3{margin-bottom:.5rem;display:flex;gap:.5rem;align-items:baseline;}
.promise .p h3 .tick{color:var(--accent);flex:none;}
.promise .p p{margin:0;color:var(--ink-2);font-size:.95rem;}
/* security: subprocessor wall. .mark is a fixed-height slot so swapping the
   .name wordmark for an <img> logo doesn't reflow the row. */
.subproc{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2rem;}
.subproc .sp{background:#fff;border:1px solid var(--line);border-radius:.9rem;padding:1.5rem;box-shadow:0 2px 8px rgba(21,34,28,.04);text-align:center;}
/* Every mark in public/assets/logos/ is stored tight-cropped to its own ink, so
   a max-height here sizes the MARK rather than whatever whitespace the vendor's
   file happened to carry. (Before cropping those ranged from 13% ink to 100%,
   which rendered ANTHROPIC 5.6px tall while aws filled its box.) Two sizes:
   single-line wordmarks are set by cap height, and the two block marks — aws's
   stacked lockup and Mailchimp's square icon — get the taller slot they need to
   read at the same weight. Never filtered or recoloured: brand guidelines
   generally forbid it, and desaturating a logo is the usual way to breach them
   while trying to look tidy. */
.subproc .mark{height:2.6rem;display:grid;place-items:center;margin-bottom:.9rem;}
.subproc .mark img{max-height:1.25rem;max-width:100%;object-fit:contain;}
.subproc .mark img.mark-lockup{max-height:2.6rem;}
.subproc .mark img.badge-mark{max-height:2.1rem;border-radius:.4rem;}
.subproc .mark .name{font-size:1.15rem;font-weight:600;letter-spacing:-.01em;color:var(--ink);}
.subproc .sp p{margin:0;color:var(--ink-2);font-size:.9rem;}

details.tech{background:#fff;border:1px solid var(--line);border-radius:.9rem;margin-top:2rem;overflow:hidden;}
details.tech summary{cursor:pointer;padding:1.1rem 1.4rem;font-weight:600;font-size:.98rem;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;}
details.tech summary::-webkit-details-marker{display:none;}
details.tech summary .hint{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:400;}
details.tech[open] summary{border-bottom:1px solid var(--line);}
details.tech[open] summary .hint{visibility:hidden;}
details.tech .body{padding:1.2rem 1.4rem 1.4rem;}
details.tech .body p{color:var(--ink-2);font-size:.92rem;margin:.7rem 0 0;}
details.tech .body p:first-child{margin-top:0;}
details.tech .body b{color:var(--ink);}

/* how-it-works: the read / never-change pair */
.twocol{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem;margin-top:2rem;}
.listcard{background:#fff;border:1px solid var(--line);border-radius:.9rem;padding:1.5rem;box-shadow:0 2px 8px rgba(21,34,28,.04);}
.listcard h3{margin-bottom:.7rem;}
.listcard ul{margin:0;padding:0;list-style:none;}
.listcard li{color:var(--ink-2);font-size:.95rem;padding:.38rem 0;border-top:1px solid var(--line);}
.listcard li:first-child{border-top:none;}
.listcard li .m{color:var(--accent);font-weight:600;margin-right:.45rem;}
.listcard.no li .m{color:var(--ink-3);}

/* legal pages — terms, privacy, DPA, acceptable use. One narrow prose column;
   numbered clauses so support and customers can cite "section 8.2". */
.legal{max-width:44rem;}
.legal .updated{font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin:1.4rem 0 0;}
.legal h2{font-size:1.25rem;margin:2.6rem 0 .6rem;}
.legal h3{font-size:1rem;margin:1.5rem 0 .4rem;}
.legal p{color:var(--ink-2);font-size:1rem;line-height:1.65;margin:.8rem 0 0;}
.legal ul,.legal ol{color:var(--ink-2);font-size:1rem;line-height:1.65;margin:.8rem 0 0;padding-left:1.3rem;}
.legal li{margin:.4rem 0;}
.legal li::marker{color:var(--ink-3);}
.legal strong{color:var(--ink);}
.legal .toc{background:var(--paper-2);border:1px solid var(--line);border-radius:.9rem;padding:1.2rem 1.4rem;margin-top:2rem;}
.legal .toc ol{margin:0;font-size:.95rem;}
.legal .toc li{margin:.25rem 0;}
/* Unresolved commercial/legal inputs, visible on the page so a draft can never
   be mistaken for a finished document. Removed when the blanks are filled. */
.legal .todo{background:#fdf6ec;border:1px solid #e8d5b4;border-left:3px solid #8a5210;border-radius:.5rem;padding:.7rem .9rem;color:#7a4a10;font-size:.92rem;margin:.9rem 0 0;}

/* footer */
.site-footer{background:var(--paper-2);border-top:1px solid var(--line);margin-top:2rem;}
.foot-inner{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;max-width:var(--wrap);margin:0 auto;padding:3rem 2rem 1.5rem;}
.foot-brand p{color:var(--ink-3);font-size:.9rem;margin:.5rem 0 0;max-width:18rem;}
.foot-links{display:flex;flex-direction:column;gap:.5rem;font-size:.9rem;}
.foot-links a{color:var(--ink-2);}
.foot-legal{max-width:var(--wrap);margin:0 auto;padding:1.2rem 2rem 2.5rem;display:flex;gap:1.5rem;flex-wrap:wrap;font-size:.78rem;color:var(--ink-3);border-top:1px solid var(--line);}

@media (max-width:840px){
  .hero{grid-template-columns:1fr;gap:2.2rem;padding-bottom:3rem;}
  .grid.cols-3,.grid.cols-2,.steps,.steps.four,.tier-grid,
  .outcome,.promise,.twocol,.subproc{grid-template-columns:1fr;}
  .statline{grid-template-columns:repeat(2,1fr);}
  .callout.row{flex-direction:column;align-items:flex-start;}
}
@media (max-width:520px){
  .wrap,.nav{padding-inline:1.2rem;}
  /* Let the nav wrap instead of hiding links — the four section links stay
     reachable from the top of every page (no JS menu on the content pages). */
  .nav{flex-wrap:wrap;gap:.5rem .9rem;}
  .nav-links{flex-wrap:wrap;gap:.6rem 1rem;font-size:.85rem;}
  form.capture{flex-direction:column;}
  .statline{grid-template-columns:1fr;}
  .founder{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){
  .brief-line .caret{animation:none;}
}