/* The shared stylesheet for livecrm.ai.
 *
 * WHY THIS EXISTS. Every page carried its own copy of these rules, because the site grew by copying
 * index.html and there was no build step to share anything. That was fine at three pages. At
 * twenty-four it meant a token change was a twenty-four file edit, and the copies had already started
 * to drift.
 *
 * WHAT IS NOT IN HERE. Seventeen selectors are deliberately left in each page's own <style> block,
 * because they are defined DIFFERENTLY per page and merging them would mean changing how a page looks:
 * section padding, the h2 ramp, .chip, .cta-band spacing, .hero, footer padding, and every media
 * block. Those load after this file and win, which is the behaviour that keeps each page as it was.
 *
 * Generated by collecting every rule that means the same thing on every page it appears on. Edit it
 * directly; there is no build step and nothing regenerates it.
 */

:root{
    /* THE PALETTE (navy and orange, 2026-10-26), the light theme the app uses, by ROLE. A colour is named
       for what it does, so "the accent" can change without a page claiming to be teal. */
    --bg:#FAF7F5;            /* the page */
    --surface:#FFFFFF;       /* cards */
    --surface-well:#F1EDE9;  /* a recessed band or well */
    --border:#E1DBD6;        /* hairlines */
    --border-strong:#788091; /* controls */
    --text:#192957;
    --text-soft:#5E6678;
    --link:#344579;
    --accent:#CC4619;        /* primary buttons and marks */
    --accent-hover:#A63817;
    --accent-text:#A63817;   /* small orange text: eyebrows, links that act */
    --on-accent:#FFFFFF;
    --brand-soft:#F1F3F9;
    --warning:#955B04;
    --warning-soft:#FDF4D8;
    --error:#C32230;
    --shadow-sm:0 1px 2px rgba(25,41,87,0.08),0 4px 14px rgba(25,41,87,0.12);
    --shadow-md:0 2px 6px rgba(25,41,87,0.10),0 12px 28px rgba(25,41,87,0.16);
    /* THE MARK: the navy tile on the light page; the navy nav bar sets the sand tile. */
    --logo-tile:#192957;
    --logo-line:#FFFFFF;
    --logo-dot:#EB7047;
    --serif:'DM Serif Display',Georgia,serif;
    --sans:'DM Sans',sans-serif;
    --mono:'DM Mono',ui-monospace,SFMono-Regular,Menlo,monospace; /* tool names, scopes, code: as in the app */
  }

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}

a{color:inherit}

/* A card title with no rule of its own takes the scale's card size, not the browser's bold 1.17em. */
h3{font-size:18px;font-weight:600}

/* Code and identifiers in DM Mono everywhere, so a <code> with no rule of its own does not fall back to the
   browser's default monospace. */
code,kbd,samp,pre{font-family:var(--mono)}

.wrap{max-width:1120px;margin:0 auto;padding:0 32px}

.eyebrow{font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:0.16em;text-transform:uppercase;color:var(--accent-text)}

/* THE BLADE LINK. Every product blade on this page now ends with the route to the page that carries
     its detail, so the home page can stay an argument rather than growing into a manual. One class so
     they are identical and a reader learns the shape once. */
  .blade-link{display:inline-flex;align-items:center;gap:8px;margin-top:26px;font-size:15.5px;font-weight:600;color:var(--accent-text);text-decoration:none;transition:gap .15s}

.blade-link:hover{gap:13px}

.blade-link .arw{font-family:var(--serif);font-size:16px;line-height:0}

/* The three blades added for pages nothing on this page linked to. Same card as the problem cards
     above, so nothing new is introduced visually. */
  .blade-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

.blade-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:26px 24px;text-decoration:none;transition:border-color .15s,transform .15s}

.blade-card:hover{border-color:var(--accent-text);transform:translateY(-2px)}

.blade-card h3{font-family:var(--sans);font-weight:600;font-size:18px;color:var(--text);margin-bottom:9px}

.blade-card p{font-size:15px;line-height:1.55;color:var(--text-soft)}

.blade-card .go{margin-top:auto;padding-top:18px;font-size:14.5px;font-weight:600;color:var(--accent-text)}

/* nav */
  .nav{position:sticky;top:0;z-index:20;background:#192957;border-bottom:1px solid #192957}

/* THE NAV IS NAVY, as the app's top bar is: inside it the text roles turn light and the mark takes the sand
   tile, so the links, the wordmark and the menu button below need no rules of their own. */
  .nav{--text:#FFFFFF;--text-soft:#C9D1E8;--border:#50639B;--logo-tile:#FAF7F5;--logo-line:#192957;--logo-dot:#E45525}

/* WHAT DROPS FROM THE BAR IS BELOW IT, so it takes the page's roles back: the desktop menus and the phone's
   panel are white cards with navy text, not navy-bar text on a light panel. */
  .navgroup-panel,.navmenu-panel{--text:#192957;--text-soft:#5E6678;--border:#E1DBD6}

/* padding-block, NOT padding. .nav-in sits on the same element as .wrap and comes later, so a
   `padding:18px 0` here zeroed the wrap's side padding: the wordmark and the button ran to the window's
   edges anywhere below 1184px, and above it the wordmark sat 32px left of every page's content. */
  .nav-in{display:flex;align-items:center;justify-content:space-between;padding-block:18px}

.logo{display:inline-flex;align-items:center;gap:0.4em;font-family:var(--sans);font-weight:700;font-size:23px;line-height:1;letter-spacing:-0.03em;color:var(--text);text-decoration:none}

/* THE PULSE MARK, sized from the word beside it (about the cap height plus 30%). */
.logo svg{width:0.92em;height:0.92em;flex-shrink:0}

.logo .tile{fill:var(--logo-tile)}

.logo .line{fill:none;stroke:var(--logo-line);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}

.logo .dot{fill:var(--logo-dot)}

.nav-links{display:flex;align-items:center;gap:26px}

.nav-link{font-size:14.5px;color:var(--text-soft);text-decoration:none;transition:color .15s}

.nav-link:hover{color:var(--text)}

.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-weight:600;font-size:15px;text-decoration:none;padding:11px 20px;border-radius:8px;transition:transform .15s,background .15s,border-color .15s;cursor:pointer;border:1px solid transparent}

.btn-primary{background:var(--accent);color:var(--on-accent)}

.btn-primary:hover{background:var(--accent-hover);transform:translateY(-1px)}

.btn-ghost{background:transparent;color:var(--text);border-color:var(--border)}

.btn-ghost:hover{border-color:var(--accent-text);color:var(--accent-text)}

.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.btn .arw{font-family:var(--serif);font-size:16px;line-height:0}

.nav .btn{padding:9px 16px;font-size:14px}

.hero::before{content:'';position:absolute;top:-220px;right:-160px;width:640px;height:640px;border-radius:50%;background:radial-gradient(circle,rgba(204,70,25,0.14) 0%,transparent 66%);pointer-events:none;z-index:0}

.hero::after{content:'';position:absolute;bottom:-320px;left:-220px;width:620px;height:620px;border-radius:50%;background:radial-gradient(circle,rgba(204,70,25,0.06) 0%,transparent 68%);pointer-events:none;z-index:0}

.hero-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap}

/* stats */
  .stats{border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:44px 0}

.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}

.stat-num{font-family:var(--serif);font-size:clamp(30px,4vw,42px);line-height:1;color:var(--text);margin-bottom:10px}

.stat-num .u{color:var(--accent-text)}

.stat-label{font-size:14px;line-height:1.45;color:var(--text-soft)}

.section-head{max-width:640px;margin-bottom:44px}

.lead{font-size:18px;color:var(--text-soft);line-height:1.55;margin-top:16px}

/* problem cards */
  .cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

.pcard{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:26px 24px}

.ptag{display:inline-block;font-family:var(--sans);font-weight:700;font-size:12px;letter-spacing:0.08em;color:var(--on-accent);background:var(--accent);padding:4px 10px;border-radius:4px;margin-bottom:16px}

.pcard p{font-size:15.5px;line-height:1.55;color:var(--text-soft)}

/* THE BANDED SECTION BACKGROUND, kept because #mcp and #team both use it. The numbered-step rules
     that lived here went with the 'How it works' section they were written for. */
  .how{background:var(--surface-well);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}

/* two column: signals + outcomes */
  .two-col{display:grid;grid-template-columns:1fr 1fr;gap:56px}

.list{list-style:none}

.list.arrows li::before{content:'\2192';color:var(--accent-text);position:absolute;left:0;font-weight:600}

.list.arrows li b{color:var(--accent-text);font-weight:600}

/* team */
  .team{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:8px}

.tcard{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:26px 24px}

.tcard h4{font-family:var(--sans);font-weight:600;font-size:18px;color:var(--text);margin-bottom:8px}

.tcard .role{color:var(--accent-text)}

.tcard p{font-size:15px;line-height:1.55;color:var(--text-soft)}

/* pricing philosophy */
  .price{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px}

.pitem{border-left:2px solid var(--accent);padding:6px 0 6px 18px}

.pitem b{display:block;font-family:var(--sans);font-weight:600;font-size:16px;color:var(--text);margin-bottom:6px}

.pitem span{font-size:14.5px;line-height:1.5;color:var(--text-soft)}

.cta-band::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:760px;height:520px;background:radial-gradient(circle,rgba(204,70,25,0.12) 0%,transparent 65%);pointer-events:none}

.cta-band .in{position:relative;z-index:1}

.cta-band h2{max-width:20ch;margin:0 auto 14px}

.foot{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:24px}

.foot .logo{font-size:21px;margin-bottom:10px}

.foot-meta{font-size:14px;color:var(--text-soft);line-height:1.7}

.foot-meta a{color:var(--text-soft);text-decoration:none;transition:color .15s}

.foot-meta a:hover{color:var(--accent-text)}

.foot-note{font-size:13px;color:var(--text-soft);opacity:.7;margin-top:26px}

.nl-panel.run{background:rgba(204,70,25,0.06);border-color:var(--border)}

.nl-panel h3{font-family:var(--sans);font-weight:600;font-size:18px;color:var(--accent-text);margin-bottom:16px}

/* console plan card. A STYLED REPRODUCTION, NOT A SCREENSHOT: the navigation shell is mid-rework and a
     captured Console would be stale the week it shipped. Built from the page's own tokens so it ages with
     the site instead of against it. Gold, unused until now, carries the held marker: the one state on this
     page that means "stopped, waiting for a person" should not read as either teal approval or slate mute. */
  .plan-card{margin-top:8px}

.pc-you{display:flex;gap:14px;align-items:baseline}

.pc-who{flex:0 0 auto;font-weight:600;font-size:12px;letter-spacing:0.16em;text-transform:uppercase;color:var(--accent-text)}

.pc-said{font-style:italic;font-size:16.5px;line-height:1.62;color:var(--text)}

.pc-status{margin-top:16px;padding-top:16px;border-top:1px solid var(--border);font-size:14.5px;color:var(--text-soft)}

.pc-steps{list-style:none;margin-top:18px;display:grid;gap:14px}

.pc-steps li{border-left:2px solid var(--border);padding:6px 0 6px 18px}

.pc-steps li.held{border-left-color:var(--warning)}

.pc-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

.pc-op{font-weight:600;font-size:15.5px;color:var(--text)}

.pc-mark{font-weight:700;font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-soft);border:1px solid var(--border);border-radius:4px;padding:3px 9px}

.pc-mark.held{color:var(--on-accent);background:var(--warning);border-color:var(--warning)}

.pc-scope{margin-top:7px;font-size:14.5px;line-height:1.5;color:var(--text-soft)}

.pc-count{margin-top:5px;font-size:13px;font-weight:600;letter-spacing:0.04em;color:var(--accent-text)}

.pc-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:22px;padding-top:20px;border-top:1px solid var(--border)}

.pc-confirm{display:inline-flex;align-items:center;font-weight:600;font-size:15px;padding:11px 20px;border-radius:8px;background:var(--accent);color:var(--on-accent);cursor:default}

.pc-note{font-size:13px;color:var(--text-soft)}

/* THE READS COLLAPSE, THE WRITES DO NOT, and the asymmetry is the point of the card. Five reads
     listed row by row would give the free half of a plan the same visual weight as the half that
     changes records. They ride as one slate line; every held write keeps a row. */
  .pc-group{margin-top:22px;font-weight:600;font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-soft)}

.pc-group.held{color:var(--warning)}

.pc-reads{margin-top:9px;font-size:14.5px;line-height:1.7;color:var(--text-soft)}

.pc-reads b{color:var(--text);font-weight:600}

/* GOLD ON EVERY ROW AND THE BADGE ON NONE. With one held step the per-row mark carried the state;
     with eight it becomes wallpaper and the group label says it once instead. */
  .pc-group + .pc-steps{margin-top:11px}

/* MCP blade. THE PANELS AND THE SPLIT ARE BORROWED, NOT REBUILT: .nl-panel, .list.arrows,
     .contrast-grid and .contrast-close already carry this exact shape for build-versus-buy, and a second
     set of near-identical rules is how two sections drift apart. Only what is genuinely new lives here. */
  .mcp-who{font-weight:600;font-size:12px;letter-spacing:0.16em;text-transform:uppercase;color:var(--text-soft);margin-bottom:10px}

.nl-panel.run .mcp-who{color:var(--accent-text)}

.mcp-foot{margin-top:16px;padding-top:14px;border-top:1px solid var(--border);font-size:14.5px;font-weight:600;color:var(--text)}

/* THE TOOL LIST IS PRODUCT NAMES, NOT WIRE NAMES, for the reason the Console card gives above: this is
     the surface a customer reads first. The agent calls the underlying identifiers; a person reads these.
     Names come from frontend/src/utils/stepNames.js and change when it does. */
  .tools{display:grid;grid-template-columns:repeat(3,1fr);gap:24px 28px;margin-top:8px}

.tgroup{border-left:2px solid var(--border);padding:2px 0 2px 16px}

.tgroup h4{font-family:var(--sans);font-weight:600;font-size:18px;color:var(--text);margin-bottom:7px}

.tgroup p{font-size:14px;line-height:1.65;color:var(--text-soft)}

/* THE TRACE IS ONE REAL CONVERSATION, numbered because it is a sequence and the order carries the
     argument: research, then what you already hold, then a preview, then the decision not to spend. */
  .trace{margin-top:8px}

.trace ol{list-style:none;counter-reset:t;display:grid;gap:18px}

.trace li{position:relative;counter-increment:t;padding-left:40px;font-size:15.5px;line-height:1.55;color:var(--text-soft)}

.trace li::before{content:counter(t);position:absolute;left:0;top:0;width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-family:var(--serif);font-size:14px;display:flex;align-items:center;justify-content:center}

.trace li b{color:var(--text);font-weight:600}

.trace .src{font-weight:600;font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:var(--accent-text);margin-right:9px}

.trace .aside{display:block;margin-top:6px;color:var(--warning);font-size:14.5px;line-height:1.5}

/* diy contrast */
  .contrast-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:8px}

.clist{list-style:none;margin-top:4px}

.clist li{position:relative;padding:9px 0 9px 26px;font-size:15px;line-height:1.5;border-bottom:1px solid var(--border)}

.clist li:last-child{border-bottom:none}

.clist li::before{position:absolute;left:0;top:8px;font-family:var(--mono);font-size:14px;font-weight:500}

.clist.bad li{color:var(--text-soft)}

.clist.bad li::before{content:'\00d7';color:var(--text-soft)}

.clist.good li{color:var(--text)}

.clist.good li::before{content:'\2713';color:var(--accent-text)}

.ctag{font-size:13.5px;font-weight:600;margin-top:16px}

.ctag.bad{color:var(--text-soft)}

.ctag.good{color:var(--accent-text)}

.contrast-close{text-align:center;max-width:64ch;margin:38px auto 0;font-family:var(--serif);font-size:clamp(18px,2.4vw,23px);line-height:1.5;color:var(--text)}

/* reveal. Hidden only under .js, which a page's head script sets, so a page whose script never runs still shows
   everything. */
  @media (prefers-reduced-motion:no-preference){
    .js .rv{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
    .js .rv.in{opacity:1;transform:none}
  }

.nav-link:hover,.nav-link.on{color:var(--text)}

/* ── tool detail template ───────────────────────────────────────────────── */
  .crumb{font-size:14px;color:var(--text-soft);text-decoration:none;display:inline-block;margin-bottom:18px;transition:color .15s}

.crumb:hover{color:var(--accent-text)}

.tool-head{padding:56px 0 0}

.tool-head h1{font-family:var(--serif);font-weight:400;font-size:clamp(34px,5vw,52px);line-height:1.08;letter-spacing:-0.015em;margin:10px 0 0;max-width:22ch;text-wrap:balance}

.tool-head .what{font-size:19px;color:var(--text-soft);line-height:1.5;margin-top:16px;max-width:56ch}

/* THE DRIFT CALLOUT: the one sentence naming what goes wrong without this tool. Every tool page opens
     with it, because the product is only legible once the problem is. */
  .drift-band{border-left:2px solid var(--accent);padding:4px 0 4px 20px;margin-top:34px;max-width:62ch}

.drift-band b{font-weight:600}

.drift-band p{font-size:17px;line-height:1.55;color:var(--text-soft)}

.prose{max-width:64ch}

.prose p{font-size:16.5px;line-height:1.62;color:var(--text-soft);margin-top:16px}

.prose p:first-child{margin-top:0}

.prose b{color:var(--text);font-weight:600}

/* THE SPEC LIST: the same six questions answered on every tool page, in the same order, so a reader
     comparing two tools is comparing like with like. */
  .spec{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-top:8px}

.spec div{background:var(--surface);padding:22px 22px}

.spec dt{font-size:12.5px;font-weight:600;letter-spacing:0.09em;text-transform:uppercase;color:var(--accent-text);margin-bottom:8px}

.spec dd{font-size:15.5px;line-height:1.55;color:var(--text-soft)}

.steps{list-style:none;counter-reset:s;margin-top:8px}

.steps li{counter-increment:s;position:relative;padding:16px 0 16px 46px;border-bottom:1px solid var(--border);font-size:16px;line-height:1.55;color:var(--text-soft)}

.steps li:last-child{border-bottom:none}

.steps li::before{content:counter(s);position:absolute;left:0;top:16px;width:28px;height:28px;border-radius:50%;border:1px solid var(--border);color:var(--accent-text);font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center}

.steps b{color:var(--text);font-weight:600}

.mcp-rows{border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-top:8px}

.mcp-row{display:flex;align-items:baseline;gap:14px;padding:14px 20px;background:var(--surface);border-bottom:1px solid var(--border);font-size:15px}

.mcp-row:last-child{border-bottom:none}

.mcp-row code{font-family:var(--mono);font-size:13.5px;color:var(--text)}

.mcp-row .rw{margin-left:auto;font-size:12px;font-weight:600;letter-spacing:0.04em;padding:3px 8px;border-radius:5px;white-space:nowrap}

.rw.read{color:var(--accent-text);border:1px solid var(--border)}

.rw.write{color:var(--warning);border:1px solid var(--warning-soft)}

.mcp-row .desc{color:var(--text-soft)}

/* THE SPLIT: what a surface answers immediately against what it holds for you. Two columns that stay
     readable when they stack, because the distinction is the whole point of the Console. */
  .split{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:8px}

.split-col{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:24px 22px}

.split-col.held{border-color:var(--border)}

.split-col h3{font-family:var(--sans);font-weight:600;font-size:18px;color:var(--text);margin-bottom:6px}

.split-col .sub{font-size:14px;color:var(--text-soft);margin-bottom:16px;line-height:1.5}

.split-col ul{list-style:none}

.split-col li{font-size:14.5px;line-height:1.5;color:var(--text-soft);padding:9px 0;border-bottom:1px solid var(--border)}

.split-col li:last-child{border-bottom:none}

.split-col li b{color:var(--text);font-weight:600}

/* THE VOCABULARY STRIP. Four words this product uses precisely that most CRMs use loosely, each one
     linking to the surface that owns it. */
  .vocab{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-top:8px}

.vocab a,.vocab div{background:var(--surface);padding:22px;text-decoration:none;display:block;transition:background .15s}

.vocab a:hover{background:var(--brand-soft)}

.vocab dt{font-size:12.5px;font-weight:600;letter-spacing:0.09em;text-transform:uppercase;color:var(--accent-text);margin-bottom:8px}

.vocab dd{font-size:15px;line-height:1.55;color:var(--text-soft)}

.pager{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--border);padding-top:28px;margin-top:8px}

.pager a{font-size:15px;color:var(--text-soft);text-decoration:none;transition:color .15s}

.pager a:hover{color:var(--accent-text)}

.cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ── article ─────────────────────────────────────────────────────────────── */
  .art-head{padding:56px 0 0}

.art-head h1{font-family:var(--serif);font-weight:400;font-size:clamp(34px,5vw,52px);line-height:1.06;letter-spacing:-0.015em;margin:12px 0 0;max-width:20ch}

/* THE HEADING SCALE (2026-10-26). Marketing pages: titles 52px (64 on the home and manifesto heroes),
   sections 36px (40 on those two), card titles 18px DM Sans 600. Reading pages (articles, legal): titles
   46px, sections 28px. An article shares .art-head with the hubs, so it is told apart by its .article. */
body:has(.article) .art-head h1{font-size:clamp(32px,4.4vw,46px)}

.byline{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:22px;font-size:14.5px;color:var(--text-soft)}

.byline b{color:var(--text);font-weight:600}

.byline .dot{opacity:.45}

.article{max-width:66ch;margin-top:8px}

.article p{font-size:18px;line-height:1.75;color:var(--text-soft);margin-top:22px}

.article p:first-child{margin-top:0}

.article p.stand{font-size:20px;line-height:1.65;color:var(--text)}

.article h2{font-family:var(--serif);font-weight:400;font-size:clamp(23px,2.6vw,28px);line-height:1.2;color:var(--text);margin:48px 0 0}

.article h2 + p{margin-top:14px}

.article b{color:var(--text);font-weight:600}

/* The pages under /learn and /compare are articles too, with what a blog post never needed: subheads, lists, a
   comparison table, an answer block an answer engine can quote, and a source list. */
.article h3{font-family:var(--sans);font-weight:600;font-size:18px;line-height:1.35;color:var(--text);margin:32px 0 0}

.article h3 + p{margin-top:10px}

.article ul,.article ol{margin:16px 0 0;padding-left:22px;color:var(--text-soft);font-size:17px;line-height:1.7}

.article li{margin-top:8px}

.article a{color:var(--accent-text)}

.article p.answer{border-left:3px solid var(--accent);padding:4px 0 4px 18px}

.article .table-scroll{overflow-x:auto;margin-top:22px}

.article table.compare{border-collapse:collapse;width:100%;min-width:560px;font-size:14.5px;line-height:1.5}

.article table.compare th,.article table.compare td{text-align:left;vertical-align:top;padding:11px 12px;border-bottom:1px solid var(--border);color:var(--text-soft)}

.article table.compare thead th{font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--accent-text);font-weight:600}

.article table.compare tbody th{color:var(--text);font-weight:600}

.article ol.sources{font-size:14.5px}

.sig{margin-top:44px;padding-top:26px;border-top:1px solid var(--border);font-size:15.5px;line-height:1.6;color:var(--text-soft)}

.sig b{color:var(--text);font-weight:600}

/* ── blog index ──────────────────────────────────────────────────────────── */
  .posts{border-top:1px solid var(--border);margin-top:8px}

.post-row{display:block;text-decoration:none;padding:30px 0;border-bottom:1px solid var(--border);transition:padding-left .15s}

.post-row:hover{padding-left:8px}

.post-row .meta{font-size:13px;letter-spacing:0.04em;color:var(--text-soft);text-transform:uppercase}

.post-row h3{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.6vw,28px);line-height:1.2;color:var(--text);margin:10px 0 0}

.post-row:hover h3{color:var(--accent-text)}

.post-row p{font-size:16.5px;line-height:1.6;color:var(--text-soft);margin-top:10px;max-width:62ch}

/* two column: pitch on the left, form on the right */
  .demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}

.nl-panel h2{font-family:var(--serif);font-weight:400;font-size:28px;line-height:1.1;margin-bottom:6px}

.form-note{font-size:14.5px;color:var(--text-soft);margin-bottom:24px}

.field{margin-bottom:18px}

.field label{display:block;font-size:14px;font-weight:600;color:var(--text);margin-bottom:7px}

.field .opt{font-weight:400;color:var(--text-soft);letter-spacing:0.04em;font-size:12.5px;text-transform:uppercase;margin-left:6px}

.field input,.field select,.field textarea{
    width:100%;font-family:var(--sans);font-size:15.5px;line-height:1.5;color:var(--text);
    background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:11px 13px;
    transition:border-color .15s;appearance:none;
  }

.field textarea{resize:vertical;min-height:96px}

.field input::placeholder,.field textarea::placeholder{color:var(--text-soft);opacity:.75}

.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent-text)}

.field select{background-image:linear-gradient(45deg,transparent 50%,var(--text-soft) 50%),linear-gradient(135deg,var(--text-soft) 50%,transparent 50%);background-position:calc(100% - 19px) calc(50% + 2px),calc(100% - 14px) calc(50% + 2px);background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px;cursor:pointer}

.field select option{background:var(--bg);color:var(--text)}

/* THE HONEYPOT. Off-screen rather than display:none, because some bots skip fields that are
     not rendered at all. aria-hidden + tabindex keep it away from screen readers and tabbing. */
  .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form-submit{width:100%;justify-content:center;margin-top:6px}

.form-foot{font-size:13.5px;color:var(--text-soft);margin-top:16px;line-height:1.5}

.form-foot a{color:var(--accent-text);text-decoration:none}

.form-foot a:hover{text-decoration:underline}

.form-done{display:none;padding:8px 0}

.form-done p{color:var(--text-soft);font-size:15.5px;line-height:1.55}

.form-done b{color:var(--text);font-weight:600}

.form-done a{color:var(--accent-text);text-decoration:none}

.is-sent .demo-form{display:none}

.is-sent .form-done{display:block}

/* THE FULL TOOL LIST. Monospace because these are the names a client actually calls, small and
     tight because there are forty-nine of them and the point is the inventory rather than each line.
     The scope headings are the only thing that makes that many names scannable. */
  .tool-list{list-style:none;margin-top:2px}

.tool-list li{padding:3px 0;border:none}

.tool-list li code{font-family:var(--mono);font-size:12.5px;color:var(--text-soft)}

.tool-list li.grp{padding:14px 0 4px}

.tool-list li.grp code{color:var(--accent-text);font-weight:600;letter-spacing:0.03em}

.tool-list li:first-child.grp{padding-top:2px}

.nav-link.on{color:var(--text)}

/* page head, shallower than the home hero because this page is a directory rather than an argument */
  .page-head{padding:72px 0 8px}

.page-head h1{font-family:var(--serif);font-weight:400;font-size:clamp(34px,5vw,52px);line-height:1.05;letter-spacing:-0.015em;margin:14px 0 0}

/* ── this page's own ─────────────────────────────────────────────────────────
     A DIRECTORY, NOT A FEATURE GRID. Every card is the same height whatever its
     description runs to, because a ragged grid reads as a list of unequal things
     and these are eleven peers. Same reasoning as the app's own tool picker. */
  .tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));grid-auto-rows:1fr;gap:20px}

.tool-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:24px 22px;text-decoration:none;transition:border-color .15s,transform .15s}

.tool-card:hover{border-color:var(--accent-text);transform:translateY(-2px)}

.tool-card h3{font-family:var(--sans);font-weight:600;font-size:18px;color:var(--text);margin-bottom:8px}

.tool-card .what{font-size:15px;line-height:1.55;color:var(--text-soft)}

.tool-card .drift{font-size:14.5px;line-height:1.5;color:var(--text-soft);opacity:.82;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}

.tool-card .drift b{color:var(--text);font-weight:600}

.chip.on{color:var(--accent-text);border-color:var(--border)}

/* -- footer sitemap ------------------------------------------------------- */
/* EVERY PAGE REACHABLE FROM EVERY PAGE. The nav carries six links and the site has twenty-four. The
   tool pages were the sharp edge: reachable only from /tools, so a reader who landed on one from a
   search had no route to its siblings and no sense of how many there were. */
  .foot-map{display:grid;grid-template-columns:repeat(6,1fr);gap:28px;padding-top:34px;margin-top:34px;border-top:1px solid var(--border)}

.foot-map-h{font-size:12.5px;font-weight:600;letter-spacing:0.09em;text-transform:uppercase;color:var(--accent-text);margin-bottom:12px}

.foot-map ul{list-style:none;margin:0;padding:0}

.foot-map li{margin-bottom:8px}

.foot-map a{font-size:14px;color:var(--text-soft);text-decoration:none;transition:color .15s}

.foot-map a:hover{color:var(--accent-text)}

/* THESE MEDIA BLOCKS BELONG HERE rather than in each page's <style>, which is where the header says
   media blocks live. That rule exists because those blocks are defined DIFFERENTLY per page; this one
   is identical on all twenty-five, which is the stated test for belonging in this file. */
  @media (max-width:900px){.foot-map{grid-template-columns:repeat(2,1fr);gap:26px}}

/* TWO COLUMNS ALL THE WAY DOWN. Dropping to one stacked twenty-four rows of 49px and made the
   footer 1362px tall on a phone -- longer than most of the pages above it. The gap tightens
   instead, which keeps each column wide enough for the longest label. */
@media (max-width:560px){.foot-map{grid-template-columns:repeat(2,1fr);gap:14px}}

/* -- blade grid, collapsed ------------------------------------------------ */
/* THE 404 PAGE OVERFLOWED ON A PHONE and the home page did not, from the same markup. .blade-grid is
   repeat(3,1fr) here, and index.html carried the collapse in its own <style> while 404.html never got
   a copy: a card grid three across at 390px pushed the document to 474px and gave a lost visitor a
   sideways scroll. The rule is identical wherever it is needed, which is the test for living here. */
  @media (max-width:900px){.blade-grid{grid-template-columns:1fr}}

/* -- mobile menu ---------------------------------------------------------- */
/* WHAT WAS MISSING. Below 900px every page hid all six nav links and put nothing in their place, so a
   phone's entire navigation was "Sign in" and the demo button. The footer sitemap had quietly become
   the only way to move around the site on a phone, which is not where navigation belongs.
 *
 * <details>/<summary>, NOT A SCRIPT, is what makes it work. It is a disclosure widget in the platform:
 * it toggles on click and on Enter/Space, it is focusable, and it reports its state to a screen reader
 * without a single aria attribute. The desktop menus below are the same element. /assets/nav.js only
 * tidies up (one menu open at a time, Escape and an outside click close it); without it every menu
 * still opens, closes and navigates. */
  /* NO position:relative HERE, deliberately. It would make this 44px box the containing block for
     the panel below, which is exactly the bug this had first time round: the panel came out 44px
     wide, pinned to the button, and pushed the document past the viewport. */
  .navmenu{display:none}

/* CLOSED MEANS GONE, stated rather than inherited. A closed <details> hides its non-summary
   children through the UA stylesheet, but that did not hold for an absolutely positioned child
   here: the panel measured its full height while closed and dragged the page wider than the
   screen. Saying it outright costs one rule and does not depend on engine behaviour. */
  .navmenu:not([open]) .navmenu-panel{display:none}

/* The three lines. A <summary> is a list-item by default in every engine, hence both marker resets. */
  .navmenu-btn{list-style:none;display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:0 11px;cursor:pointer;border-radius:8px;transition:background .15s}

.navmenu-btn::-webkit-details-marker{display:none}

.navmenu-btn::marker{content:''}

.navmenu-btn:hover{background:var(--brand-soft)}

.navmenu-btn span{display:block;height:2px;border-radius:2px;background:var(--text);transition:transform .18s ease,opacity .18s ease}

/* Open becomes an X. The bars sit 7px apart centre to centre (2px tall, 5px gap), so that is exactly
   how far the outer two travel to meet in the middle. */
  .navmenu[open] .navmenu-btn span:nth-child(1){transform:translateY(7px) rotate(45deg)}

.navmenu[open] .navmenu-btn span:nth-child(2){opacity:0}

.navmenu[open] .navmenu-btn span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* THE PANEL HANGS OFF .nav, not off the <details>. .nav is position:sticky, which makes it a
   containing block for absolute descendants, so the panel spans the full width of the bar instead of
   the 44px button. */
  /* SOLID, NOT TRANSLUCENT. The bar above is rgba(...,0.82) with a backdrop-filter, and a panel
     that copied that treatment let the page ghost straight through the menu: the h1 and the chips
     were legible behind the links. A nav panel is a surface you read against, so it gets the
     opaque token and no filter of its own. */
  .navmenu-panel{position:absolute;top:100%;left:0;right:0;background:var(--surface);border-bottom:1px solid var(--border);box-shadow:var(--shadow-md);padding:6px 0 10px}

.navmenu-panel a{display:block;padding:14px 32px;font-size:16px;color:var(--text-soft);text-decoration:none;border-top:1px solid var(--border);transition:color .15s,background .15s}

.navmenu-panel a:first-child{border-top:none}

.navmenu-panel a:hover,.navmenu-panel a:focus-visible{color:var(--accent-text);background:rgba(204,70,25,0.06)}

.navmenu-panel a.on{color:var(--accent-text)}

@media (max-width:900px){
    .navmenu{display:block}
    /* The panel carries Sign in now, so the bar does not need its own copy. That rule existed because
       hiding every link left no route into the product at all, and the panel is now that route.
       THE EXTRA .nav IS LOAD-BEARING: every page's own <style> sets `.nav-links .nav-signin
       {display:inline}` and loads after this file, so at equal specificity the page would win on
       document order. Three classes beats two and this rule applies without touching all 25 pages. */
    .nav .nav-links .nav-signin{display:none}
    .nav-in{gap:10px}
    .nav .btn{padding:9px 13px;font-size:13.5px}
  }

@media (max-width:560px){
    .navmenu-panel a{padding-left:22px;padding-right:22px}
  }

/* -- nav at narrow desktop ------------------------------------------------ */
/* THE BAR WAS TEN LINKS, SIGN IN AND A BUTTON until the pages were grouped into three menus, and this
   band existed to squeeze them in: the wordmark and the first link touched at 940px. It is five entries,
   two links and a button now. The band is kept as a margin for entries added later and was re-measured
   when the menus went in: see the note above the dropdown rules. */
  @media (max-width:1160px) and (min-width:901px){
    .nav-links{gap:17px}
    .nav-link{font-size:13.5px}
    .nav .btn{padding:9px 13px;font-size:13.5px}
  }
  @media (max-width:960px) and (min-width:901px){
    .nav-links{gap:12px}
  }

/* -- touch targets -------------------------------------------------------- */
/* MEASURED, NOT GUESSED. At 390px across twelve pages: 288 footer-sitemap links at 18px tall, 24
   wordmarks at 21, 24 footer contact links at 18, 8 breadcrumbs at 22, 4 pager links at 24, 3 inline
   blade links at 25, and the nav button at 42 -- two pixels short. The guideline is 44.
 *
 * MOBILE ONLY, at the breakpoint the nav already collapses on, because this is about fingers rather
 * than about width. Desktop keeps every size it has.
 *
 * WHAT IS DELIBERATELY LEFT ALONE: links inside a sentence. "Ready now instead? Create your account
 * and connect your CRM." is prose, and padding a link in the middle of a line does not make a bigger
 * target, it breaks the line. The guideline is about discrete controls, and that is not one. */
  @media (max-width:900px){
    /* The sitemap is twenty-four destinations stacked in one column. Contiguous 44px rows rather than
       18px rows with gaps between them: the gap was not tappable, so it bought nothing. */
    .foot-map li{margin-bottom:0}
    /* display:block IS THE WHOLE FIX. These links are inline by default, and vertical padding on an
       inline box paints without reserving layout height: the rows overlapped at about 27px each while
       getBoundingClientRect happily reported 44. A tap near a row's edge landed on its neighbour.
       Measuring one element lied; measuring the column it sits in did not. */
    .foot-map a{display:block;padding:13px 0}

    /* THE BAR GETS SHORTER, NOT TALLER. Growing the wordmark's box to 44 would push a sticky header to
       80px and cost every page that much screen. Trading the bar's own padding for the tap area leaves
       it at 56px, which is less than the 61px it is today. */
    /* padding-block, AND THE EXTRA .nav FOR SPECIFICITY. Each page's own <style> sets
       .wrap{padding:0 22px} below 560px and loads after this file, so a plain .nav-in padding
       shorthand loses on document order and the bar collapses to exactly the height of its
       tallest child. padding-block also leaves that 22px side padding alone, which the nav wants. */
    .nav .nav-in{padding-block:6px}
    .nav-in .logo{display:inline-flex;align-items:center;min-height:44px}
    .nav .btn{min-height:44px}

    .foot .logo{display:inline-flex;align-items:center;min-height:44px}
    .foot-meta{line-height:1.35}
    .foot-meta a{display:inline-block;padding:13px 0}

    .crumb{display:inline-flex;align-items:center;min-height:44px;margin-bottom:8px}
    .pager a{display:inline-flex;align-items:center;min-height:44px}
    .blade-link{min-height:44px}
  }

/* -- top nav menus ---------------------------------------------------------- */
/* PRODUCT, TOOLS AND PLATFORM ARE MENUS, grouped the way the footer sitemap groups the same pages, so the
   bar carries five entries instead of ten and every tool page is two clicks from anywhere. Each is a
   <details>, for the reasons the mobile menu gives above: click and keyboard toggle with no script, and a
   screen reader hears expanded and collapsed. Click to open, not hover: a hover menu needs a script to
   survive the gap between the word and the panel, and does nothing on a touch screen at desktop width.
 *
 * MEASURED at 1440, 1160, 960 and 901 with the menus in: the wordmark-to-first-entry gap never falls below
 * the bar's own padding. Below 901 the menus hide with the other links and the mobile panel carries them. */
  .navgroup{position:relative}

.navgroup > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;user-select:none}

.navgroup > summary::-webkit-details-marker{display:none}

.navgroup > summary::marker{content:''}

/* The chevron, drawn rather than typed, so it takes the link's colour in every state. */
  .navgroup > summary::after{content:'';width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .15s ease}

.navgroup[open] > summary{color:var(--text)}

.navgroup[open] > summary::after{transform:translateY(1px) rotate(-135deg)}

/* CLOSED MEANS GONE, stated rather than inherited, for the reason given on .navmenu above. */
  .navgroup:not([open]) .navgroup-panel{display:none}

/* SOLID, like the mobile panel: a menu is a surface you read against. */
  .navgroup-panel{position:absolute;top:calc(100% + 16px);left:-14px;z-index:30;width:240px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-md);padding:8px}

.navgroup-panel.cols-2{display:grid;grid-template-columns:1fr 1fr;column-gap:4px;width:420px}

.navgroup-item{display:block;padding:9px 12px;border-radius:8px;text-decoration:none;transition:background .15s}

.navgroup-t{display:block;font-size:14.5px;font-weight:500;color:var(--text);transition:color .15s}

.navgroup-item:hover,.navgroup-item:focus-visible{background:rgba(204,70,25,0.07)}

.navgroup-item:hover .navgroup-t,.navgroup-item:focus-visible .navgroup-t,.navgroup-item.on .navgroup-t{color:var(--accent-text)}

.navgroup-all{grid-column:1/-1;display:block;margin-top:6px;padding:11px 12px 6px;border-top:1px solid var(--border);font-size:14px;font-weight:600;color:var(--accent-text);text-decoration:none}

.navgroup-all:hover,.navgroup-all:focus-visible,.navgroup-all.on{color:var(--text)}

/* THE MOBILE PANEL, GROUPED. The same three headings as the desktop menus, each over its own links; the
   eleven tools sit two across so the panel is not a column of twenty-odd rows. It scrolls inside itself
   when it is taller than the screen, rather than running off the bottom of a sticky bar. */
  /* 100dvh, NOT 100vh: on a phone 100vh is the screen with the browser's toolbars hidden, so while they
     show, the bottom of a 100vh panel sits under them and its last links cannot be tapped. 100vh stays as
     the fallback for a browser without dvh. */
  .navmenu-panel{max-height:calc(100vh - 56px);max-height:calc(100dvh - 56px);overflow-y:auto;overscroll-behavior:contain;padding-bottom:calc(10px + env(safe-area-inset-bottom))}

.navmenu-h{padding:16px 32px 4px;font-size:12px;font-weight:600;letter-spacing:0.09em;text-transform:uppercase;color:var(--accent-text);border-top:1px solid var(--border)}

.navmenu-h:first-child{border-top:none}

.navmenu-group{padding-bottom:8px}

.navmenu-group.cols-2{display:grid;grid-template-columns:1fr 1fr}

/* 44px rows: 12px padding either side of a 20px line. */
  .navmenu-panel .navmenu-sub{border-top:none;padding:12px 32px;font-size:15.5px;line-height:20px}

.navmenu-group.cols-2 .navmenu-sub{padding-right:12px}

@media (max-width:900px){
    /* The menus hide with the rest of the bar's links; the page's own `.nav-links .nav-link{display:none}`
       covers their summaries but not the <details> around them. */
    .nav .navgroup{display:none}
  }

@media (max-width:560px){
    .navmenu-h{padding-left:22px;padding-right:22px}
    .navmenu-panel .navmenu-sub{padding-left:22px}
  }