/* sales.bookfunnel.com — the public site.
 *
 * bookfunnel.com's palette, taken from its own stylesheet: #f4663f accent
 * (28 uses there), #222 text, #666 muted, #e5e5e5 rules, warm tints for hover.
 * The app's stylesheet (server/internal/ui/style.css) now uses the same values,
 * so a reader crossing from here into a checkout and then into their order
 * history does not cross a colour seam.
 *
 * ORANGE AS TEXT IS DARKER THAN ORANGE AS FILL, here as there: #f4663f is
 * 3.08:1 on white, under the 4.5:1 body text needs, so links are #c43200
 * (5.52:1). Fills stay #f4663f. See the app stylesheet's header for the
 * reasoning in full.
 *
 * No framework, no build step, no webfonts (the landing page brings its own,
 * in landing.css) — CLAUDE.md §1. Everything below is
 * hand-written and the page reads without it.
 */
:root {
  --accent:#f4663f;
  --accent-dark:#f33c07;
  --accent-text:#c43200;   /* orange that passes AA as text */
  --ink:#222;
  --muted:#666;
  --rule:#e5e5e5;
  --tint:#fff5f2;          /* bookfunnel.com hovers with a warm tint, not grey */
  --tint-deep:#fde8e1;
  --surface:#fff;
  --ground:#faf8f7;
  --dark:#2c1a14;          /* bookfunnel.com's link hover / deep brown */
  --radius:6px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --wrap:64rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface);color:var(--ink);
  font:16px/1.65 var(--font)}
h1,h2,h3{line-height:1.2;text-wrap:balance}
h1{font-size:2.4rem;margin:0 0 .5rem;letter-spacing:-.02em}
h2{font-size:1.55rem;margin:0 0 .6rem;letter-spacing:-.01em}
h3{font-size:1.1rem;margin:0 0 .35rem}
p{margin:0 0 1rem}
a{color:var(--accent-text)}
a:hover{color:var(--dark)}
img{max-width:100%;height:auto}
code{font:.9em var(--mono);background:var(--tint);padding:.12em .35em;border-radius:4px}
pre{background:#2c1a14;color:#f7f2ef;border-radius:var(--radius);padding:16px 18px;
  overflow-x:auto;font-size:13.5px;line-height:1.55}
pre code{background:none;padding:0;color:inherit;font-size:inherit}

/* Keyboard users land here first; it is the only way past the masthead. */
.skip{position:absolute;left:12px;top:-100px;background:var(--surface);color:var(--accent-text);
  padding:10px 14px;z-index:10}
.skip:focus{left:12px;top:12px}
:focus-visible{outline:3px solid rgba(244,102,63,.45);outline-offset:2px}

/* --- masthead ------------------------------------------------------------ */
.masthead{background:var(--accent);color:#fff}
.bar{max-width:var(--wrap);margin:0 auto;padding:14px 20px;display:flex;
  align-items:center;gap:20px;flex-wrap:wrap}
/* Masthead text is WHITE on the brand orange, as on bookfunnel.com (Richard,
   2026-10-07). That is 3.1:1, under the 4.5:1 WCAG AA asks of text this
   size: the site's one accepted contrast exception, a brand decision. It is
   checked as exactly white on #f4663f by the browser test "masthead", and
   the text-contrast test leaves the masthead out for that reason.

   The text beside the logo is centred on the logo's WORDMARK, not on the
   image's box: in bookfunnel-logo-white.png (480×117) the lowercase letters
   span rows 64–100, so their centre sits 82/117 of the way down — about 6px
   below the box's middle at 130px wide, 5px once the text's own x-height
   is accounted for. --wordmark-drop moves the name and the nav (when it
   shares the logo's row) down by that much; "masthead" holds it to 1.5px. */
.masthead{--wordmark-drop:5px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;flex:none;margin:0}
.brand a{color:#fff;text-decoration:none}
.brand-mark{display:block}
.brand img{display:block;width:130px;height:auto}
/* A blocked logo must not leave a gap where the name should be. */
.brand img{color:#fff;font-weight:700;font-size:18px}
.brand-sub{font-size:.82rem;border-left:1px solid rgba(255,255,255,.5);
  padding-left:10px;white-space:nowrap;position:relative;top:var(--wordmark-drop)}
.brand-sub:hover{text-decoration:underline}
.nav{list-style:none;display:flex;flex-wrap:wrap;gap:2px 4px;margin:0;padding:0;
  margin-left:auto;font-size:.9rem;position:relative;top:var(--wordmark-drop)}
.nav a{display:block;padding:7px 11px;border-radius:var(--radius);
  color:#fff;text-decoration:none;white-space:nowrap}
.nav a:hover{background:rgba(255,255,255,.16);color:#fff}
/* You are here: a white rule under the label, so the text stays white. */
.nav a[aria-current]{font-weight:600;box-shadow:inset 0 -2px 0 #fff;border-radius:var(--radius) var(--radius) 0 0}

/* --- generic page -------------------------------------------------------- */
main{max-width:var(--wrap);margin:0 auto;padding:44px 20px 72px}
.lede{font-size:1.2rem;color:var(--muted);margin:0 0 1.5rem;max-width:42rem}
.section{padding:56px 0;border-top:1px solid var(--rule)}
.section:first-child{border-top:0;padding-top:0}

/* --- hero ---------------------------------------------------------------- */
/* Type and colour do the work: there are no illustration assets in this repo,
   so the hero is a gradient wash and a headline rather than a picture that
   would have to be commissioned and then kept true. */
.hero{background:linear-gradient(135deg,#d45341 0%,var(--accent) 55%,#fa734c 100%);
  color:#fff}
.hero-inner{max-width:var(--wrap);margin:0 auto;padding:76px 20px 84px}
.hero h1{font-size:clamp(2.2rem,5.5vw,3.4rem);max-width:20ch;margin-bottom:1rem}
.hero p{font-size:1.22rem;max-width:44ch;opacity:.96;margin-bottom:1.8rem}
.hero .btn{background:#fff;color:var(--accent-text)}
.hero .btn:hover{background:var(--tint-deep)}
.hero .btn-ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.7)}
.hero .btn-ghost:hover{background:rgba(255,255,255,.14)}

.btn{display:inline-block;padding:12px 22px;border-radius:var(--radius);
  background:var(--accent);color:#fff;text-decoration:none;font-weight:600;
  border:0;cursor:pointer;font-size:1rem}
.btn:hover{background:var(--accent-dark);color:#fff}
.btn+.btn{margin-left:10px}

/* --- content blocks ------------------------------------------------------ */
.cols{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
  padding:22px 24px}
.card h3{color:var(--ink)}
.card p:last-child{margin-bottom:0}
.eyebrow{font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent-text);margin:0 0 .5rem}
.rights{background:var(--ground);border-radius:var(--radius);padding:28px 26px}
.rights ul{margin:0;padding-left:1.1rem}
.rights li{margin-bottom:.4rem}

/* --- stub banner --------------------------------------------------------- */
.stub{background:var(--tint-deep);border-left:4px solid var(--accent);
  border-radius:0 var(--radius) var(--radius) 0;padding:14px 18px;margin:0 0 28px}
.stub p{margin:0}
/* A stub long enough to need two paragraphs. The first rule zeroes every
   margin, so without this the two run together as one block. */
.stub p + p{margin-top:10px}

/* --- docs ---------------------------------------------------------------- */
.docs-shell{max-width:var(--wrap);margin:0 auto;padding:36px 20px 72px;
  display:grid;gap:40px;grid-template-columns:16rem minmax(0,1fr)}
.docs-nav{font-size:.92rem}
.docs-nav-title{font-size:.76rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin:0 0 .6rem}
.docs-nav ul{list-style:none;margin:0;padding:0}
.docs-nav li{margin:0}
.docs-nav a,.docs-nav .pending{display:block;padding:5px 10px;border-radius:4px;
  text-decoration:none;color:var(--ink)}
.docs-nav a:hover{background:var(--tint);color:var(--accent-text)}
.docs-nav a[aria-current]{background:var(--tint-deep);color:var(--accent-text);font-weight:600}
.docs-nav .pending{color:var(--muted)}
.docs-nav .pending em{font-style:normal;font-size:.8em;opacity:.8}
.docs-nav .d1{padding-left:12px}
.docs-nav .d2{padding-left:24px}
.docs-main{min-width:0;padding:0}
.docs-main h2{margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid var(--rule)}
.docs-main h2:first-of-type{margin-top:0;padding-top:0;border-top:0}
.docs-main table{border-collapse:collapse;width:100%;margin:0 0 1rem;font-size:.95rem}
.docs-main th,.docs-main td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--rule);
  vertical-align:top}
.docs-main th{font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
/* Wide content scrolls inside itself; the page body never scrolls sideways. */
.scroll{overflow-x:auto}

/* Figures. A screenshot in documentation is evidence, so it gets a frame and a
   caption saying what it is evidence OF — an unlabelled picture between two
   paragraphs is decoration the reader has to decode. The images are generated
   from the running product by `make docs-shots`, never pasted in by hand. */
figure{margin:1.8rem 0}
figure img{display:block;max-width:100%;height:auto;border:1px solid var(--rule);
  border-radius:var(--radius);background:#fff}
/* The diagram is line art, not a screenshot: a border round it reads as a
   second box inside the drawing. */
figure.plain img{border:0;border-radius:0}
/* The diagram carries 13px labels. Shrunk to a phone's width they become
   unreadable, so inside a .scroll it keeps a floor and the reader pans instead
   — a picture you can move is worth more than one you can only squint at. */
figure.plain .scroll img{min-width:760px}
figcaption{font-size:.92rem;color:var(--muted);margin-top:.55rem;max-width:42rem}
/* Two shots side by side, for a comparison the prose is making. Falls to one
   column early — a pair of screenshots squeezed to 200px proves nothing. */
.pair{display:grid;gap:1.1rem;grid-template-columns:1fr}
@media (min-width:720px){.pair{grid-template-columns:1fr 1fr}}
.pair figure{margin:0}

/* --- footer -------------------------------------------------------------- */
.footer{background:var(--ground);border-top:1px solid var(--rule);margin-top:0}
.footer-inner{max-width:var(--wrap);margin:0 auto;padding:34px 20px 46px}
.footer-links{list-style:none;display:flex;flex-wrap:wrap;gap:6px 22px;margin:0 0 12px;padding:0;
  font-size:.92rem}
.footer-links a{text-decoration:none}
.footer-links a:hover{text-decoration:underline}
.footer-note{color:var(--muted);font-size:.86rem;margin:0}

@media (max-width:52rem){
  .docs-shell{grid-template-columns:1fr;gap:24px}
  .docs-nav{border-bottom:1px solid var(--rule);padding-bottom:16px}
  /* the nav has a row of its own here, so it is not aligned to the logo */
  .nav{margin-left:0;width:100%;top:0}
  /* A thumb, not a pointer: 44px targets for the chrome on a phone. */
  .nav a,.footer-links a{display:flex;align-items:center;min-height:44px}
  h1{font-size:2rem}
}

/* Live widget examples on the docs pages. The dotted edge says "this is a
   real thing running", so it is not mistaken for a screenshot. */
.example{border:1px dashed var(--rule);border-radius:var(--radius);
  padding:20px;margin:0 0 1.5rem;background:var(--ground);
  display:flex;flex-wrap:wrap;gap:10px;align-items:center}