/* Shared stylesheet for the feature landing pages.
   index.html stays deliberately self-contained (one file, no dependencies); these four pages
   share this instead, because four copies of the same 300 lines is four places to fix a bug.
   Tokens are copied verbatim from index.html so the pages cannot drift from the brand. */

:root{
  --ink:#12141c; --ink-2:#3c4661; --muted:#6b7280; --line:#ecedf5; --line-2:#f2f4fa;
  --bg:#ffffff; --bg-2:#f6f7fc;
  --accent:#4359f5; --accent-2:#6b7dff; --accent-soft:#eef1ff;
  --green:#0f7a4d; --green-soft:#e4f4ec;
    /* ---- PINK: the brand accent -----------------------------------------------------
       White is the page, blue is the action, pink is the BRAND. It appears on the eyebrow,
       the headline highlight, section marks and the numbers — the places the eye lands
       first — and nowhere structural, which is what keeps a strong colour minor.

       Kept off buttons on purpose: the primary action stays blue so "what do I click"
       never competes with "what is this". A pink CTA next to a pink highlight reads as two
       equally urgent things, and one of them is decoration.

       --pink-ink is the darker cut for text; --pink itself is tuned for fills and rules. */
    --pink:#d6337f; --pink-2:#f06fae; --pink-soft:#fdeef7; --pink-ink:#a81f60;
    --pink-line:#f7d3e6;
    /* Matches the app exactly: the light green that marks something found BEFORE it was
       public. A visitor who signs up should meet the same colour meaning the same thing. */
    --find:#12a05e; --find-soft:#e4f7ec; --find-ink:#0a6e42; --find-line:#c6ebd6;
  --radius:18px; --maxw:1180px;
  --shadow:0 1px 2px rgba(18,20,28,.04), 0 8px 28px rgba(18,20,28,.06);
  --shadow-lg:0 2px 6px rgba(18,20,28,.05), 0 24px 60px rgba(18,20,28,.10);
  --tint-1:linear-gradient(145deg,#e4e9ff 0%,#ccd6fd 100%);
  --tint-2:linear-gradient(145deg,#dcf2fd 0%,#c1e7fa 100%);
  --tint-3:linear-gradient(145deg,#fbdef8 0%,#f2cef2 100%);
  --tint-4:linear-gradient(145deg,#e2f7ea 0%,#cbeeda 100%);
  --dark:#14161f;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);overflow-x:hidden;
  font:400 16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
h1,h2,h3{letter-spacing:-.022em;line-height:1.14;margin:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

header{border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);z-index:50}
/* position:relative so the wide dropdown can anchor HERE rather than to its trigger — see
   .dd-wide. The mobile menu (.nav-collapse, absolute at left:0;right:0;top:64px) also resolves
   against this box now instead of the sticky header. MEASURED at 375px before and after: the
   panel spans 0-375 at top 64 either way, because below 900px the wrap is full width with no
   border and .nav starts flush at the header's top edge. */
.nav{display:flex;align-items:center;gap:14px;height:64px;position:relative}
.brand{font-weight:800;font-size:17px;letter-spacing:-.02em;display:flex;align-items:center;gap:9px;
  color:var(--ink);flex:none}
.brand i{width:22px;height:22px;border-radius:6px;flex:none;
  background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.nav-links{margin-left:auto;display:flex;gap:26px;font-size:14px}
.nav-links a{color:var(--ink-2)}
.nav-links a:hover{color:var(--accent)}

/* ---------- primary nav: flat items + Features/Solutions dropdowns ---------- */
.nav-menu{margin-left:20px;display:flex;align-items:center;gap:2px}
.nav-menu > a,.nav-trigger{color:var(--ink-2);font-size:14px;font-weight:500;padding:8px 11px;
  border-radius:8px;background:none;border:0;cursor:pointer;font-family:inherit;line-height:1;
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.nav-menu > a:hover,.nav-trigger:hover,.nav-trigger[aria-expanded="true"]{color:var(--accent);
  background:var(--bg-2)}
.caret{font-size:9px;opacity:.65;transition:transform .16s ease}
.nav-item{position:relative}
/* --- wide dropdowns ---------------------------------------------------------------------
   A 286px single column could hold a label and half a sentence, so the menu described the
   product in fragments. These are wide enough to say what each surface DOES, which is the
   only reason a visitor opens a menu instead of scrolling.
   Anchored to the header rather than the trigger, so a six-item panel does not hang off the
   right edge of the viewport when its trigger sits near the end of the bar. */
.dd{position:absolute;top:calc(100% + 9px);left:0;background:#fff;
  border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 54px rgba(18,20,28,.16);
  padding:14px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:.16s ease;z-index:70}
.dd-mid{min-width:330px}
/* ANCHORED TO THE HEADER'S CONTENT WRAP, not to the trigger — .nav-item-wide takes the Platform
   item out of the positioning chain so this resolves against .nav.
   The old rule claimed the same thing in a comment while doing the opposite. It sat inside a
   position:relative .nav-item, so it started at whatever x "Platform" landed on, and the
   `100vw - 48px` clamp silently assumed a start of 24px. MEASURED at a 1000px viewport: the
   panel ran 173 -> 1033 against a client width of 985, so body{overflow-x:hidden} cut 48px off
   the right — 33px of it out of the promo card. No scrollbar, no symptom, just a sliced menu.
   Percentages resolve against .nav's padding box, so left:24px lands on the content edge and
   100% - 48px is the content width at every viewport.

   `top` has to be restated for the same reason. The base rule's calc(100% + 9px) resolved
   against the ITEM, which is trigger-height; against .nav it is the full 64px bar, which
   dropped the panel from y=50 to y=67. MEASURED: that opened a 20px dead zone between the
   trigger and the panel — hover leaves .nav-item on the way down and the menu shuts before the
   pointer arrives. calc(100% - 8px) puts it back level with the .dd-mid panels, on the same
   3px gap they have always used — arrived at by measuring both panels side by side in the same
   open state, not by arithmetic on the box model, which does not account for the -6px closed
   transform still in play at measurement time. */
.dd-wide{display:grid;grid-template-columns:1fr 250px;gap:14px;
  left:24px;width:min(860px,calc(100% - 48px));top:calc(100% - 8px)}
.nav-item-wide{position:static}
.dd-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.dd-grid.one{grid-template-columns:1fr}
.nav-item:hover .dd,.nav-item:focus-within .dd,.dd.open{opacity:1;visibility:visible;
  transform:translateY(0)}
.nav-item:hover .caret,.dd.open ~ * .caret{transform:rotate(180deg)}
.dd a{display:flex;gap:11px;align-items:flex-start;padding:11px 12px;border-radius:11px;
  color:var(--ink)}
.dd a:hover{background:var(--bg-2)}
.dd-ic{flex:none;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent);font-size:14px;font-style:normal}
.dd a:hover .dd-ic{background:var(--accent);color:#fff}
.dd-t{display:block;min-width:0}
.dd a b{display:block;font-size:13.5px;font-weight:650;letter-spacing:-.01em}
.dd a span{display:block;font-size:12px;color:var(--muted);margin-top:2px;line-height:1.45}
.dd-promo{background:linear-gradient(160deg,#f6f7ff,#eef1ff);border:1px solid #e4e8ff;
  border-radius:13px;padding:16px 17px;display:flex;flex-direction:column;gap:10px;
  align-self:stretch}
.dd-promo-k{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent)}
.dd-promo p{font-size:12.5px;line-height:1.6;color:var(--ink-2);margin:0}
/* A quiet text link with a nudging arrow, not a second primary button. It sits at the bottom
   of the panel and reads as the end of the sentence above it.
   Selector is `.dd a.dd-promo-l`, not `.dd-promo-l`: this link is inside `.dd`, and `.dd a`
   above sets colour at (0,1,1) — which outranks a bare class and left it ink-coloured. */
.dd a.dd-promo-l{margin-top:auto;font-size:12.5px;font-weight:650;color:var(--accent);
  display:inline-flex;align-items:center;gap:6px;align-self:flex-start;padding:2px 0;
  border-bottom:1px solid transparent;background:none}
.dd a.dd-promo-l:hover{background:none}
.dd-promo-l span{transition:transform .16s ease;display:inline-block}
.dd-promo-l:hover{border-bottom-color:currentColor}
.dd-promo-l:hover span{transform:translateX(3px)}
.btn-sm{min-height:36px;padding:8px 14px;font-size:13px}
.nav-auth{margin-left:auto;display:flex;align-items:center;gap:14px;flex:none}
.nav-menu a.nav-current,.dd a.nav-current{color:var(--accent);font-weight:600}

/* hamburger — hidden on desktop, shown on mobile */
.nav-burger{display:none;margin-left:auto;width:42px;height:42px;border:1px solid var(--line);
  border-radius:10px;background:#fff;cursor:pointer;align-items:center;justify-content:center}
.nav-burger span{display:block;width:18px;height:2px;background:var(--ink);position:relative}
.nav-burger span::before,.nav-burger span::after{content:"";position:absolute;left:0;width:18px;
  height:2px;background:var(--ink)}
.nav-burger span::before{top:-6px}.nav-burger span::after{top:6px}

/* On desktop the collapse wrapper is transparent to layout (contents), so .nav-menu and
   .nav-auth position exactly as if they were direct children of .nav. */
.nav-collapse{display:contents}

@media (max-width:900px){
  .nav-burger{display:flex}
  .nav-collapse{display:none;position:absolute;left:0;right:0;top:64px;background:#fff;
    border-bottom:1px solid var(--line);box-shadow:0 18px 34px rgba(15,23,41,.10);
    flex-direction:column;padding:10px 18px 18px;gap:4px;z-index:65}
  /* chrome.js toggles the class on .nav-collapse itself. The old selector keyed off .nav.open,
     which nothing sets any more — the menu simply never opened on a phone. */
  .nav-collapse.open{display:flex}
  .nav-menu{margin:0;flex-direction:column;align-items:stretch;gap:2px}
  .nav-menu > a,.nav-trigger{padding:12px 10px;font-size:15px;width:100%;justify-content:flex-start}
  .nav-item{position:static}
  .dd{position:static;opacity:1;visibility:hidden;height:0;overflow:hidden;transform:none;
    box-shadow:none;border:0;padding:0;min-width:0;width:auto;display:block}
  .dd.open{visibility:visible;height:auto;padding:0 0 6px 10px}
  .dd-wide,.dd-grid{display:block;width:auto;grid-template-columns:1fr}
  .dd-promo{display:none}                    /* a promo panel is noise in a phone menu */
  .dd a{padding:9px 10px}
  .nav-auth{margin:10px 0 0;flex-direction:column;align-items:stretch;gap:9px;
    border-top:1px solid var(--line);padding-top:14px}
  .nav-auth .btn,.nav-auth .nav-signin{width:100%;justify-content:center}
}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;
  padding:12px 20px;border-radius:10px;font-weight:600;font-size:14.5px;border:1px solid transparent;
  cursor:pointer}
.btn-primary{background:linear-gradient(135deg,var(--pink) 0%,#e84d96 100%);color:#fff;box-shadow:0 1px 2px rgba(214,51,127,.32),0 8px 22px rgba(214,51,127,.26)}
.btn-primary:hover{background:linear-gradient(135deg,#c92b73 0%,var(--pink) 100%);transform:translateY(-1px);box-shadow:0 2px 4px rgba(214,51,127,.34),0 12px 30px rgba(214,51,127,.34)}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{background:var(--bg-2)}

.hero{padding:64px 0 44px;background:
  radial-gradient(900px 420px at 76% 6%,#eaf0ff 0,rgba(255,255,255,0) 62%),
  linear-gradient(180deg,#fbfcff,#fff)}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--pink-ink);margin-bottom:14px}
.eyebrow::before{content:"";display:inline-block;width:16px;height:2px;border-radius:2px;background:var(--pink);vertical-align:middle;margin-right:9px;transform:translateY(-1px)}
.hero h1{font-size:clamp(30px,4.4vw,50px);max-width:19ch}
.hero .lede{font-size:clamp(16px,1.5vw,19px);color:var(--ink-2);max-width:60ch;margin:18px 0 26px}
/* A SECOND LEDE IS A PARAGRAPH BREAK, NOT A NEW SECTION. Stacked, the first one's 26px bottom
   and the second's 18px top make a 44px gap that reads as two unrelated blocks — which defeats
   splitting a paragraph for clarity in the first place. */
.hero .lede + .lede{margin-top:-12px}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap}
.hero-note{margin-top:16px;font-size:13px;color:var(--muted)}

/* THE HEADLINE HIGHLIGHT, lifted here from index.html's inline block because a second page now
   uses it. It was defined once, privately, so /demo rendered the same markup as plain text and
   the emphasis silently did nothing — the failure mode of a style that lives in one page's
   <style> tag. index.html still carries its own identical copy and wins by specificity; this is
   the shared fallback, so deleting the inline one changes nothing.
   64% is where the underline starts: below the x-height, so it reads as a marker stroke behind
   the words rather than a coloured background box. */
.hero h1 .hl{background:linear-gradient(180deg,transparent 64%,var(--pink-soft) 64%)}

/* THE TICK LIST. --green, not --find: --find has a JOB in this palette — it marks something
   the platform caught before it was public, and it means the same thing in the app — so
   spending it on a generic "yes, included" would blunt the one colour that carries meaning.
   --green is the plain positive and stays plain.

   THE TICK IS DRAWN, NOT WRITTEN. A "✓" character in the markup is read aloud by a screen
   reader on every row, and an <svg> per row is five more nodes saying nothing; both turn a
   five-item list into ten things to get through. Two pseudo-elements — a soft disc and a
   rotated corner border — leave the list as five plain items of text. */
.ticks{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:10px}
.ticks li{position:relative;padding-left:30px;font-size:15px;color:var(--ink-2);line-height:1.5}
.ticks li::before{content:"";position:absolute;left:0;top:1px;width:19px;height:19px;
  border-radius:50%;background:var(--green-soft)}
.ticks li::after{content:"";position:absolute;left:6.5px;top:5px;width:5px;height:9px;
  border:solid var(--green);border-width:0 2px 2px 0;transform:rotate(45deg)}

/* THE CALENDAR SECTION. scroll-margin-top exists because the header is position:sticky — an
   anchor jump or scrollIntoView lands the section's top edge at viewport 0, which is UNDER the
   header, so the first thing hidden is the heading that explains where you just arrived. */
#pick-a-time{scroll-margin-top:88px}
#pick-a-time .sec-head{margin-bottom:24px}

/* The ring shown when the page scrolls itself here after a form is sent. Two seconds, then
   gone. Behind a reduced-motion guard below, where it becomes a plain border with no pulse —
   the point is "this is the part that matters now", and a static ring says that too. */
@keyframes bs-landed{0%{box-shadow:0 0 0 0 rgba(214,51,127,.42)}
  70%{box-shadow:0 0 0 14px rgba(214,51,127,0)}100%{box-shadow:0 0 0 0 rgba(214,51,127,0)}}
#pick-a-time.landed .sec-head{border-left:3px solid var(--pink);padding-left:14px;
  border-radius:2px;animation:bs-landed 1.6s ease-out 1}

@media (max-width:640px){
  /* Tighter than the 64px every other section gets. The calendar is tall on a phone by
     necessity, so the padding around it is the one part that can give way. */
  #pick-a-time{padding:34px 0 26px;scroll-margin-top:70px}
  #pick-a-time .sec-head{margin-bottom:16px}
  #pick-a-time .sec-head p{font-size:14.5px}
  /* Edge to edge: on a 375px screen the wrap's side padding costs the widget ~40px of width,
     which is where Calendly starts wrapping its time buttons onto two lines. */
  #pick-a-time [data-calendly-mount]{margin-left:-14px;margin-right:-14px}
}

@media (prefers-reduced-motion:reduce){
  #pick-a-time.landed .sec-head{animation:none}
}

/* CONTACT PAGE SOCIAL ROW. Labelled, unlike the footer's bare glyph: this page exists to
   answer "how do I reach you", so the answer should read as words. */
/* Two routes side by side, wrapping on a narrow screen. gap owns the spacing between them and
   the wrapper owns the space above, so nothing doubles when they stack. */
.contact-routes{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.contact-social{display:inline-flex;align-items:center;gap:9px;
  padding:9px 14px 9px 11px;border:1px solid var(--line);border-radius:10px;
  color:var(--ink-2);text-decoration:none;font-size:14.5px;font-weight:600;
  transition:border-color .14s ease,color .14s ease,background .14s ease}
.contact-social:hover{border-color:var(--accent-line);color:var(--accent);
  background:var(--accent-soft)}
.contact-social:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.contact-social svg{flex:none}

/* Contact-page address. Same <address> italic reset as the footer's, and set in the muted
   grey rather than body ink: it is a fact you look up, not a sentence you read. */
.contact-addr{font-style:normal;margin:14px 0 0;font-size:13.5px;line-height:1.65;
  color:var(--muted)}
.contact-addr b{display:block;color:var(--ink-2);font-weight:650;margin-bottom:2px}

/* THE AMERICAN-COMPANY LINE. The mark is three stripes drawn in CSS rather than a flag emoji:
   this site uses no emoji anywhere, so one would be the only one on it, and next to copy this
   plain it reads as decoration. Red and navy at low saturation so it reads as a mark, not a
   sticker — the loud version fights the pink brand accent sitting a few pixels above it. */
.trust-line{display:flex;align-items:center;gap:10px;margin:16px 0 0;
  font-size:13.5px;color:var(--muted)}
/* The flag is inline SVG — see the note in contact.html. A rounded 1px edge keeps a 20px
   rectangle from reading as a raw image dropped onto the page. */
.trust-line svg{flex:none;border-radius:2px;border:1px solid var(--line)}

section{padding:64px 0}
.alt{background:var(--bg-2);border-block:1px solid var(--line-2)}
.sec-head{max-width:740px;margin-bottom:36px}
.sec-head h2{font-size:clamp(23px,2.7vw,32px);margin:10px 0 12px}
.sec-head p{color:var(--ink-2);margin:0;font-size:16px}

.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;
  box-shadow:var(--shadow)}
.card h3{font-size:17px;margin-bottom:9px}
.card p{color:var(--ink-2);font-size:14.5px;margin:0}
.ico{width:34px;height:34px;border-radius:9px;background:var(--accent-soft);color:var(--accent);
  display:grid;place-items:center;font-weight:800;font-size:13px;margin-bottom:13px}

/* the numbered walk-through */
.steps{counter-reset:s;display:grid;gap:14px}
.step{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:20px 22px}
.step::before{counter-increment:s;content:counter(s,decimal-leading-zero);
  font-variant-numeric:tabular-nums;font-weight:800;font-size:13px;color:var(--accent);
  background:var(--accent-soft);border-radius:8px;padding:5px 9px;flex:none}

/* TWO BADGES ON ONE STEP, and on the home page both were showing. The counter above is the
   original numbering and still the only one on company / network-intelligence /
   pre-posting-intelligence / referral-engine / training, which wrap their steps in
   `.steps` — the element that actually carries `counter-reset` — and supply no markup badge.
   index.html grew a second system later: a 25px circle styled `.step i` in its own inline
   <style>, wrapped in `.visual`, which has NO counter-reset. So its steps rendered the
   markup circle AND a counter that, with nothing to reset it, printed "01" on every card.
   Row layout hid the duplication by putting them side by side; the mobile breakpoint sets
   flex-direction:column, they stacked, and it became two numbers per card.
   Suppressed WHEREVER THE MARKUP SUPPLIES ITS OWN, rather than deleted, because deleting it
   would strip the numbering off all five pages that legitimately depend on it. Keyed on
   `:has(i)` so it stays correct for any page added later without anyone remembering this.
   The markup badge is also the more capable of the two: step six is a "◆", which a
   decimal-leading-zero counter cannot express and would have mislabelled "06". */
.step:has(i)::before{content:none}
.step b{display:block;font-size:16px;margin-bottom:5px}
.step span{color:var(--ink-2);font-size:14.5px}

.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;
  letter-spacing:.02em;color:var(--muted)}
.readout{display:flex;align-items:center;gap:7px;margin-top:12px;padding-top:11px;
  border-top:1px solid var(--line-2)}
.readout::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green);flex:none}

.callout{background:var(--accent-soft);border:1px solid #cfdcfa;border-radius:var(--radius);
  padding:22px 24px}
.callout b{display:block;margin-bottom:6px}
.callout p{margin:0;color:var(--ink-2);font-size:14.5px}

details{border:1px solid var(--line);border-radius:12px;padding:14px 18px;background:#fff;
  margin-bottom:10px}
summary{cursor:pointer;font-weight:600;font-size:15px;min-height:44px;padding:4px 0;
  display:flex;align-items:center}
details p{color:var(--ink-2);font-size:14.5px;margin:8px 0 2px}

/* --- footer ------------------------------------------------------------------------------
   Five columns, not a row of five links. A footer is where somebody who did not buy on the
   first pass goes looking for the reason to keep reading, and a single line gives them
   nowhere to go. Dark, because it is the one place the light theme benefits from a hard stop.
   Rendered by chrome.js so it cannot drift between pages. */
footer{border-top:1px solid var(--line);background:#12141c;color:#aab1c6;padding:54px 0 26px;
  font-size:13.5px}
footer a{color:#d7dbe8;text-decoration:none}
footer a:hover{color:#fff}
/* NOT TOUCHED, and the reason is worth keeping. A tap-target sweep flagged the 19 footer
   links as "under 32px". Measured, they are 31px AND `display:block`, so each one's hit area
   is the full width of its column — comfortably tappable, and the 32px line was an arbitrary
   threshold in the audit rather than a real defect. The obvious "fix", inline-block with
   padding, left the height at 31px and SHRANK the clickable width to the text. Measuring the
   thing itself, not the count of things past a threshold, is what caught that. */
.f-top{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:34px}
.f-brand .brand{color:#fff;margin-bottom:12px}
.f-brand p{color:#8f97ad;font-size:13px;line-height:1.6;margin:0 0 16px;max-width:34ch}
/* THE FOOTER IDENTITY BLOCK. <address> is the correct element and it italicises by default in
   every browser — reset, or a postal address renders as an aside rather than a fact.
   font-style:normal is not a nicety here; without it this reads as a pull-quote. */
.f-addr{font-style:normal;margin-top:18px;display:grid;gap:7px;font-size:12.5px;line-height:1.6}
.f-addr b{color:#d7dbe8;font-weight:650;font-size:13px}
.f-addr span{color:#767e95}
.f-flag{display:inline-flex;align-items:center;gap:8px;color:#8f97ad}
.f-flag svg{flex:none;border-radius:2px;border:1px solid #2b3040}
/* Three stripes drawn in CSS, matching the contact page. No flag emoji anywhere on this site —
   it would be the only one, and against a near-black footer it renders as a bright rectangle
   that pulls the eye off the address it is meant to caption. */
.f-col h4{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#6f778f;margin:0 0 13px}
.f-col a{display:block;padding:5px 0;font-size:13px}
.disc{margin:34px 0 0;padding-top:20px;border-top:1px solid #242737;color:#767e95;
  font-size:12px;line-height:1.7;max-width:96ch}
.f-bot{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-top:20px;
  padding-top:18px;border-top:1px solid #242737;color:#6f778f;font-size:12.5px}
/* THE SOCIAL MARK sits between the copyright and the legal links, and .f-legal's
   margin-left:auto still pushes those to the right edge — so the icon lands next to the
   copyright rather than floating in the middle. 34px square: the glyph is 17px, and the rest
   is hit area, because an icon-only control is the smallest target on the page and the one
   most often missed on a phone. */
.f-social{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:8px;
  color:#8f97ad;transition:color .14s ease,background .14s ease}
.f-social:hover{color:#fff;background:#1d2130}
.f-social:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}
.f-legal{margin-left:auto;display:flex;gap:18px}
.foot-note{margin-top:18px;padding-top:18px;border-top:1px solid #242737;color:#8c97b1;
  font-size:12.5px;line-height:1.65;max-width:80ch}
@media (max-width:940px){ .f-top{grid-template-columns:1fr 1fr 1fr} }
@media (max-width:620px){ .f-top{grid-template-columns:1fr 1fr;gap:24px}
  .f-brand{grid-column:1 / -1} .f-legal{margin-left:0} }

/* --- visual language, shared with the product ---------------------------------------------
   The same tints, radii and honeycomb the dashboard uses. A marketing site that looks like a
   different product than the one you log into is a promise broken on day one. */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
/* One `background` shorthand per tint, exactly as the app does it. Written as longhands, the
   earlier `background:var(--tint-N)` in the same rule kept resetting repeat/position/size
   underneath — and a comb that inherits `repeat` paints a second band down the card. */
.tile{border-radius:18px;padding:20px;box-shadow:var(--shadow);position:relative;overflow:hidden;
  background:url("/hive.svg") right top / 210px 118px no-repeat, var(--tint-1) 0 0 / cover no-repeat}
.tile:nth-child(4n+2){background:url("/hive.svg") right top / 210px 118px no-repeat, var(--tint-2) 0 0 / cover no-repeat}
.tile:nth-child(4n+3){background:url("/hive.svg") right top / 210px 118px no-repeat, var(--tint-3) 0 0 / cover no-repeat}
.tile:nth-child(4n+4){background:url("/hive.svg") right top / 210px 118px no-repeat, var(--tint-4) 0 0 / cover no-repeat}
.tile-ic{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
  background:rgba(255,255,255,.66);font-size:16px;margin-bottom:12px}
.tile b{display:block;font-size:30px;font-weight:750;letter-spacing:-.03em;line-height:1.15;
  color:var(--ink)}
.tile em{display:block;font-style:normal;font-size:13px;font-weight:650;color:#3f4560;
  margin-top:3px}
.tile p{margin:6px 0 0;font-size:12.5px;line-height:1.5;color:#545b73}

/* section furniture */
.sec-head{max-width:64ch;margin:0 0 30px}
.sec-head .eyebrow{margin-bottom:10px;display:block}
.sec-head p{margin-top:12px}
.card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px;
  box-shadow:var(--shadow)}
.card h3{margin:0 0 8px}
.card p{margin:0;color:var(--ink-2);font-size:14.5px;line-height:1.6}
.card-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent);font-size:17px;margin-bottom:14px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:1000px){ .g4{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .g4{grid-template-columns:1fr} }

/* the five-stage waterfall — the argument the whole product rests on */
.stages{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:8px}
.stage{background:#fff;border:1px solid var(--line);border-radius:14px;padding:15px 14px;
  position:relative;box-shadow:var(--shadow)}
.stage .n{width:24px;height:24px;border-radius:8px;display:grid;place-items:center;font-size:11.5px;
  font-weight:700;background:var(--accent);color:#fff;margin-bottom:10px}
.stage h4{margin:0 0 5px;font-size:13.5px;font-weight:700;letter-spacing:-.01em}
.stage p{margin:0;font-size:12px;line-height:1.5;color:var(--muted)}
.stage.dim{background:var(--bg-2);box-shadow:none}
.stage.dim .n{background:#c9cede}
.stage-rail{display:flex;align-items:center;gap:10px;margin:22px 0 10px;font-size:12px;
  color:var(--muted)}
.stage-rail .bar{flex:1;height:4px;border-radius:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2) 55%,#dfe3f2)}
@media (max-width:900px){ .stages{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .stages{grid-template-columns:1fr} }

/* charts */
.chartcard{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px 24px;
  box-shadow:var(--shadow)}
.chart{width:100%;display:block;overflow:visible}
.chart .grid{stroke:var(--line-2);stroke-width:1}
.chart .axis{font-size:10.5px;fill:var(--muted)}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:12px}
.legend i{width:9px;height:9px;border-radius:3px;display:inline-block;margin-right:6px;
  font-style:normal}

/* reveal — visible by default, animated only when JS opts in */
.pre-reveal{opacity:0;transform:translateY(14px)}
.revealed{opacity:1;transform:none;transition:opacity .55s ease,transform .55s cubic-bezier(.2,.9,.3,1)}
@media (prefers-reduced-motion:reduce){ .pre-reveal{opacity:1;transform:none} }

@media (max-width:860px){ .g3,.g2{grid-template-columns:1fr} }
@media (max-width:680px){
  section{padding:46px 0}
  .hero{padding:38px 0 26px}
  .wrap{padding:0 18px}
  .nav-links{display:none}
  .nav{gap:12px}
  .hero-cta .btn{width:100%}
  .step{flex-direction:column;gap:10px}
}

/* ---------- sign-up / sign-in (marketing → app hand-off) ---------- */
.nav-signin{color:var(--ink-2);font-weight:600;font-size:14px;display:inline-flex;align-items:center;
  min-height:44px}
.nav-signin:hover{color:var(--accent)}

.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(318px,.92fr);gap:46px;
  align-items:center}

.signup-card{position:relative;background:#fff;border:1px solid #d3ddf7;border-radius:16px;
  padding:26px 24px;box-shadow:var(--shadow);isolation:isolate}
.signup-head{font-weight:800;font-size:19px;letter-spacing:-.02em;margin-bottom:5px}
.signup-sub{color:var(--ink-2);font-size:14px;margin:0 0 16px;line-height:1.5}
.signup-form{display:flex;flex-direction:column;gap:10px}
.signup-form input{width:100%;height:47px;padding:0 14px;border:1px solid var(--line);border-radius:10px;
  font-size:15px;background:#fff;color:var(--ink)}
.signup-form input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.signup-form .btn{width:100%}
.sep{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px;margin:13px 0 1px}
.sep::before,.sep::after{content:"";height:1px;background:var(--line);flex:1}
.gbtn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:46px;
  border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font-weight:600;
  font-size:14px;cursor:pointer}
.gbtn:hover{background:var(--bg-2)}
.signup-alt{margin:14px 0 0;font-size:13px;color:var(--muted);text-align:center}
/* 18px TALL ON A TOUCHSCREEN. This is the "already have an account? Sign in" link under the
   signup form — the only route back to sign-in for somebody who came to the form by mistake,
   and it was an unstyled inline <a> the height of its own text. The nav's `.nav-signin`
   already carries min-height:44px; this one was missed because it does not share the class.
   inline-block so the padding actually takes effect: vertical padding on an `inline` box
   paints but does not enlarge the hit area, which would have looked fixed and measured
   unchanged. */
.signup-alt a{font-weight:600;cursor:pointer;display:inline-block;padding:8px 4px;min-height:34px}

/* THE CARD IS LIFTED, NOT LIT. This was a four-stop blue gradient blurred around the card at
   inset:-3px, pulsing between .30 and .70 opacity every 3.6 seconds and drifting the gradient
   across itself every 9. Two objections and both are right.

   THE FADE MADE THE MOST IMPORTANT ELEMENT ON THE PAGE RESTLESS. Motion is a way of saying "look
   here", which works exactly once; on a permanent loop it stops being a signal and becomes
   something to tune out. Worse, a panel that breathes reads as a notification or a loading state
   rather than a place to sit and type — the opposite of what a form asks a person to do.

   AND A SATURATED BLUE HALO SAT BADLY UNDER BLACK TEXT. Bleeding round the edges of a white card
   it cast the whole panel slightly cold, and the ink inside had to compete with a colour that
   carried no meaning: --accent means "this is the action" everywhere else on this site, so
   spending it on decoration around a card diluted the one place it should be unambiguous, the
   button inside.

   REPLACED WITH ELEVATION RATHER THAN COLOUR. A white card holding black text does not need an
   aura to be the focal point of a page — it needs to sit above it. --shadow-lg is the token the
   rest of the site already lifts things with, so this is the existing vocabulary rather than a
   new effect, and the light-blue border the card already carries keeps the edge crisp.

   NO ANIMATION MEANS NO REDUCED-MOTION BLOCK. glowpulse and glowdrift are deleted rather than
   left unreferenced: a keyframe named "glowpulse" sitting in the stylesheet would tell the next
   reader this card still pulses. */
.glow{box-shadow:var(--shadow-lg)}

/* centered signup band, for pages whose hero has no free column */
.signup-band{max-width:512px;margin:0 auto}

@media (max-width:860px){ .hero-grid{grid-template-columns:1fr;gap:30px} }
@media (max-width:680px){ .nav-signin{margin-left:auto} }

/* ---- the Brinksignal mark in the header and footer -------------------------------------
   The old brand was a plain blue square (an <i> with a gradient). It is the real mark now,
   so the tab icon, the header, the footer and the logo files are all one drawing — and the
   wordmark is two-tone, matching the pink dot in the mark to the pink in "signal". */
.brand-mark{border-radius:7px;display:block;flex:none}
.brand span{color:var(--pink);font-weight:600}
.brand-word{white-space:nowrap}
.brand{display:flex;align-items:center;gap:8px}

@media (hover:hover) and (pointer:fine){
  header .btn-primary{min-height:38px;height:38px;padding:0 18px;font-size:14px;line-height:1}
}

/* ---- long-form articles (/resources) ----------------------------------------------------
   The rest of this site is cards and tiles, which is right for a page somebody scans. An
   article is READ, and reading needs a measure: past roughly 75 characters a line the eye
   loses its place on the return sweep. Scoped to .article so no existing page moves. */
.article{max-width:72ch}
.article h2{margin-bottom:14px}
.article h3{margin:26px 0 8px;font-size:17px;font-weight:650}
.article p{color:var(--ink-2);font-size:16px;line-height:1.72;margin:0 0 14px}
.article p strong,.article li strong{color:var(--ink);font-weight:650}
.article ul{margin:0 0 16px;padding-left:20px}
.article li{color:var(--ink-2);font-size:16px;line-height:1.72;margin-bottom:8px}
.article a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
.article .pull{border-left:3px solid var(--pink);padding:2px 0 2px 16px;margin:20px 0;
  color:var(--ink);font-size:17px;line-height:1.6;font-weight:600}

/* the resources index, and the related-reading strip at the foot of each article */
.res-cat{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--brand);margin-bottom:6px;display:block}
.res-card{display:block;text-decoration:none;color:inherit}
.res-card:hover{transform:translateY(-2px)}
.res-card h3{font-size:16px;margin:0 0 6px;line-height:1.35}
.res-card p{font-size:14px;line-height:1.6;color:var(--ink-2);margin:0}
.res-read{display:inline-block;margin-top:10px;font-size:13px;font-weight:650;color:var(--brand)}

/* Small de-emphasised text. It was defined identically inside index.html and book.html only,
   so any STANDALONE page using class="muted" — the session page was the first — rendered it at
   full body colour. Hoisted here as the one shared definition; the two page-level copies are
   identical and still win by cascade order, so no existing page changes. */
.muted{color:var(--muted)}


/* ------------------------------------------------------------------ pricing table
   THE PAGE WAS AN ESSAY: five sections, sixteen prose cards, 769 words and not one place a
   reader could compare the three packages side by side. This is the comparison — three cards
   with the price stated, then a feature list where every row is a thing the product does.

   IN THE SHARED STYLESHEET, NOT IN A PAGE. index.html defines .price/.plan/.amt inside its own
   <style>, so the generated /pricing could not use them — the same trap .muted was in. Anything
   a second page might want lives here. */
.ptable{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:start;
  max-width:1080px;margin:0 auto}
.pcard{position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:30px 26px 26px;display:flex;flex-direction:column;
  box-shadow:0 12px 34px rgba(28,36,51,.06)}
/* The middle card carries the recommendation, so it is the one that leaves the row: a border in
   the accent, a lift, and the badge above it. Everything else stays quiet. */
.pcard.best{border:1.5px solid var(--accent);box-shadow:0 22px 54px rgba(67,89,245,.16)}
@media (min-width:861px){.pcard.best{transform:translateY(-10px)}}
.pbadge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);white-space:nowrap;
  background:linear-gradient(135deg,var(--accent-2),var(--accent));color:#fff;font-size:11px;
  font-weight:750;letter-spacing:.07em;text-transform:uppercase;padding:6px 14px;border-radius:20px;
  box-shadow:0 6px 16px rgba(67,89,245,.32)}
.pname{font-size:13px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);margin:2px 0 10px}
.pcard.plain .pname{color:var(--muted)}
.pamt{font-size:44px;font-weight:800;letter-spacing:-.035em;line-height:1;color:var(--ink)}
.pamt small{font-size:14px;font-weight:600;letter-spacing:0;color:var(--muted);margin-left:5px}
.pfor{color:var(--ink-2);font-size:14.5px;line-height:1.55;margin:12px 0 0;min-height:66px}
.pcta{margin:20px 0 22px}
.pcta .btn{width:100%;justify-content:center}
/* Feature rows. A tick is a thing this package does; a dash is a thing it does not include —
   never a thing the product cannot do, which is why the footnote under the table exists. */
.pfeat{list-style:none;margin:0;padding:18px 0 0;border-top:1px solid var(--line);
  display:grid;gap:11px}
.pfeat li{position:relative;padding-left:27px;font-size:14.2px;line-height:1.5;color:var(--ink-2)}
.pfeat li::before{content:"";position:absolute;left:0;top:3px;width:17px;height:17px;
  border-radius:50%;background:var(--green-soft)}
.pfeat li::after{content:"";position:absolute;left:5.6px;top:6.6px;width:4.5px;height:8px;
  border:solid var(--green);border-width:0 2px 2px 0;transform:rotate(43deg)}
.pfeat li.no{color:var(--muted)}
.pfeat li.no::before{background:var(--line-2)}
.pfeat li.no::after{left:5px;top:10px;width:7px;height:0;border-width:0 0 2px 0;
  border-color:var(--muted);transform:none}
.pfeat li b{color:var(--ink);font-weight:650}
.pnl{margin:16px 0 0;font-size:13px;line-height:1.55;color:var(--muted)}
.pnote{max-width:1080px;margin:20px auto 0;text-align:center;color:var(--muted);font-size:13px;
  line-height:1.6}
@media (max-width:860px){
  .ptable{grid-template-columns:1fr;gap:26px;max-width:460px}
  .pcard.best{transform:none}
}