/* ============================================================================
   SEND INVOICE — MARKETING SITE DESIGN SYSTEM ("Field Manual")
   The single source of truth for every page in website/.

   There used to be two copies of these tokens: an inline <style> block in
   index.html and a near-duplicate in legal.css, whose own comment asked whoever
   came next to "keep them in step". That file is gone; this one replaces it.

   Structure
     0. Fonts        self-hosted Barlow Condensed (display only)
     1. Tokens       palette, type, layout
     2. Base         reset, typography, focus
     3. Primitives   buttons, marker highlight, eyebrows, seal
     4. Chrome       promo strip, nav, drawer, footer
     5. Blocks       hero, proof wall, cards, flank, panels, tiers, close
     6. Prose        legal pages + user guide
   ========================================================================== */

/* ---- 0. FONTS -------------------------------------------------------------
   Only the condensed DISPLAY face is self-hosted. Body and mono ride on system
   stacks: the condensed cut is the signature that varies wildly across
   platforms, while system grotesques are close enough to each other that a
   second download would cost bytes for no visible gain.
   Barlow Condensed, SIL OFL 1.1 — see OFL.txt in this folder.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/barlow-condensed-600.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/barlow-condensed-700.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/barlow-condensed-800.woff2") format("woff2");
}

/* ---- 1. TOKENS ----------------------------------------------------------- */
:root {
  /* Locked immersive palette — shared with the app. Do not re-hue these. */
  --g900:#082e25;
  --g800:#0b3b30;
  --g700:#0f4c3d;
  --green:#147c64;
  --mint:#7cf0c6;
  --mint-2:#a9f7db;
  --cream:#f3efe3;
  --stone:#e8e4d6;
  --stone-2:#d9d3c1;
  --ink:#0c1512;
  --ink-2:#4b574f;
  --ink-3:#6d7a73;

  /* Text on the green field. Use these, don't invent new rgba values. */
  --on-1:rgba(243,239,227,.97);
  --on-2:rgba(243,239,227,.68);
  --on-3:rgba(243,239,227,.44);
  --hair:rgba(243,239,227,.15);

  /* The self-hosted face first; the old system stack stays as the fallback so
     a blocked font never leaves the page unstyled. */
  --disp:"Barlow Condensed","Helvetica Neue","Arial Narrow",Helvetica,Arial,sans-serif;
  --body:"Helvetica Neue",Helvetica,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;

  --wrap:1320px;
  --gut:clamp(16px,3vw,32px);
  --pad:clamp(52px,6.5vw,96px);
  --z-drawer:80;
  --z-nav:60;
}

/* ---- 2. BASE ------------------------------------------------------------- */
* { box-sizing:border-box; }
figure { margin:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; }
}
body {
  margin:0; background:var(--cream); color:var(--ink); font-family:var(--body);
  font-size:16px; line-height:1.58; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a { color:inherit; text-decoration:none; }
p { margin:0; }
img { max-width:100%; display:block; }
h1,h2,h3 {
  margin:0; font-family:var(--disp); font-weight:800; text-transform:uppercase;
  letter-spacing:.004em; line-height:.94; text-wrap:balance;
}
:focus-visible { outline:2px solid var(--green); outline-offset:3px; }
.on-green :focus-visible, .band-green :focus-visible, .close :focus-visible,
.hero-copy :focus-visible, footer :focus-visible { outline-color:var(--mint); }
.w { max-width:var(--wrap); margin:0 auto; padding-inline:var(--gut); }
.skip {
  position:absolute; left:-9999px; top:0; z-index:200; background:var(--mint); color:var(--g900);
  padding:12px 18px; font-family:var(--disp); font-weight:700; text-transform:uppercase;
}
.skip:focus { left:8px; top:8px; }

/* ---- 3. PRIMITIVES ------------------------------------------------------- */
.eyebrow {
  font-family:var(--disp); font-weight:700; text-transform:uppercase;
  font-size:14px; letter-spacing:.08em; color:var(--green);
}
.eyebrow.on-dark { color:var(--mint); }

/* The marker swipe. Two things that were wrong the first time and must stay
   fixed: the swipe needs z-index 0 (at -1 it hides behind a painted panel
   background), and the text on top must go dark or it is unreadable on mint. */
.hl {
  display:inline; background:var(--mint); padding:.04em .14em .02em;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
.hl > span { color:var(--g900); }

.btn {
  display:inline-flex; align-items:center; gap:9px; font-family:var(--disp); font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; font-size:16px; padding:14px 27px;
  border-radius:999px; border:1.5px solid transparent; cursor:pointer;
  transition:background .17s, color .17s, border-color .17s;
}
.btn-mint { background:var(--mint); color:var(--g900); }
.btn-mint:hover { background:var(--mint-2); }
.btn-green { background:var(--green); color:var(--cream); }
.btn-green:hover { background:var(--g700); }
.btn-out { border-color:var(--stone-2); color:var(--ink); }
.btn-out:hover { border-color:var(--green); color:var(--green); }
.btn-out-light { border-color:rgba(243,239,227,.4); color:var(--on-1); }
.btn-out-light:hover { border-color:var(--mint); color:var(--mint); }

.appstore {
  display:inline-flex; align-items:center; gap:11px; background:var(--g900); color:var(--cream);
  border-radius:8px; padding:9px 16px; border:1px solid rgba(243,239,227,.14);
}
.appstore .bag {
  width:26px; height:26px; border-radius:6px; background:var(--mint); color:var(--g900);
  display:grid; place-items:center; flex:none;
}
.appstore .bag svg { width:15px; height:15px; }
.appstore .t { line-height:1.15; }
.appstore .t small {
  display:block; font-family:var(--mono); font-size:8.5px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--on-3);
}
.appstore .t b { display:block; font-size:14px; font-weight:600; }
.appstore:hover { border-color:var(--mint); }

/* The seal emblem: a document seal, pinned in the nav over the hero seam. */
.seal { position:relative; width:78px; height:86px; display:grid; place-items:center; justify-self:center; }
.seal .plate {
  position:absolute; inset:0; background:var(--green);
  clip-path:polygon(0 0, 100% 0, 100% 68%, 50% 100%, 0 68%);
}
.seal .txt { position:relative; text-align:center; color:var(--cream); padding-bottom:12px; }
.seal .txt b {
  display:block; font-family:var(--disp); font-weight:800; text-transform:uppercase;
  font-size:16px; letter-spacing:.02em; line-height:1;
}
.seal .txt small {
  display:block; font-family:var(--mono); font-size:7px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--mint); margin-top:3px;
}

/* ---- 4. CHROME ----------------------------------------------------------- */
.promo { background:var(--g900); color:var(--on-2); }
.promo-in {
  display:flex; align-items:center; justify-content:center; gap:10px; padding-block:9px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  text-align:center;
}
.promo-in b { color:var(--mint); font-weight:700; }

/* Section nav for the documents page. This used to be a global category row in
   the header, but it duplicated Automation and Pricing from the main nav; only
   its four document links did real work, and they point at anchors that live on
   one page. So it lives on that page now, where it actually navigates. */
.docnav { background:var(--stone); border-bottom:1px solid var(--stone-2); }
.docnav ul { list-style:none; margin:0; padding:0; display:flex; justify-content:center; flex-wrap:wrap; }
.docnav li + li { border-left:1px solid var(--stone-2); }
.docnav a {
  display:block; padding:11px 26px; font-family:var(--disp); font-weight:700;
  text-transform:uppercase; font-size:14px; letter-spacing:.05em; color:var(--ink-2);
}
.docnav a:hover { color:var(--green); }
@media (max-width:560px){ .docnav a { padding:10px 15px; font-size:13px; } }

header.bar { background:var(--cream); position:relative; z-index:var(--z-nav); }
/* Link groups sit out at the page edges with the emblem centred between them.
   The CTA stays small so it sits in the row rather than dominating it. */
.bar-in { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:18px; height:74px; }
.bar .left, .bar .right { display:flex; align-items:center; gap:22px; }
.bar .left { justify-content:flex-start; }
.bar .right { justify-content:flex-end; }
.bar .btn-green { font-size:12.5px; padding:9px 17px; letter-spacing:.05em; }
.bar .lnk {
  font-family:var(--disp); font-weight:700; text-transform:uppercase; font-size:14.5px;
  letter-spacing:.05em; color:var(--ink-2); padding-block:4px; border-bottom:1.5px solid transparent;
}
.bar .lnk:hover { color:var(--green); }
.bar .lnk[aria-current="page"] { color:var(--green); border-bottom-color:var(--green); }

/* Mobile drawer. The old site just hid the nav links below 880px, which left a
   multi-page site with no way to navigate. Promoted from user-guide.html. */
.menu-btn {
  display:none; align-items:center; gap:8px; background:none; border:0; cursor:pointer; padding:6px 0;
  font-family:var(--disp); font-weight:700; text-transform:uppercase; font-size:14.5px;
  letter-spacing:.05em; color:var(--ink-2);
}
.menu-btn .bars { display:grid; gap:3.5px; }
.menu-btn .bars i { display:block; width:19px; height:2px; background:currentColor; }
.drawer {
  position:fixed; inset:0 0 0 auto; width:min(320px,86vw); background:var(--g900); color:var(--on-1);
  z-index:var(--z-drawer); transform:translateX(100%); transition:transform .22s ease;
  padding:22px; display:flex; flex-direction:column; gap:6px; overflow-y:auto;
}
.drawer[data-open="true"] { transform:translateX(0); }
.drawer a {
  font-family:var(--disp); font-weight:700; text-transform:uppercase; font-size:20px;
  letter-spacing:.03em; padding:11px 0; border-bottom:1px solid var(--hair);
}
.drawer a:hover, .drawer a[aria-current="page"] { color:var(--mint); }
.drawer .btn { margin-top:16px; justify-content:center; }
.drawer-close {
  align-self:flex-end; background:none; border:0; color:var(--on-2); cursor:pointer;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; padding:6px;
}
.scrim {
  position:fixed; inset:0; background:rgba(8,46,37,.55); z-index:calc(var(--z-drawer) - 1);
  opacity:0; pointer-events:none; transition:opacity .22s ease;
}
.scrim[data-open="true"] { opacity:1; pointer-events:auto; }
body[data-locked="true"] { overflow:hidden; }
@media (max-width:900px){
  .bar .lnk { display:none; }
  .menu-btn { display:inline-flex; }
  .bar .left { justify-content:flex-start; }
}
@media (min-width:901px){ .drawer, .scrim { display:none; } }
@media (max-width:620px){
  .bar-in { height:64px; }
  .bar .btn-green { font-size:12.5px; padding:10px 14px; letter-spacing:.04em; white-space:nowrap; }
  .promo-in { font-size:9.5px; letter-spacing:.07em; }
  .seal { width:66px; height:74px; }
  .seal .txt b { font-size:14px; }
}

footer.site { background:var(--g900); color:var(--on-2); padding-block:56px 34px; }
.foot-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:32px; }
.foot h4 {
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--mint); margin:0 0 14px; font-weight:700;
}
.foot a { display:block; color:var(--on-2); font-size:15px; padding:5px 0; }
.foot a:hover { color:var(--mint); }
.foot .about { color:var(--on-2); font-size:15px; max-width:28ch; margin-top:12px; }
.foot .seal-sm { display:inline-flex; align-items:baseline; gap:9px; }
.foot .seal-sm b {
  font-family:var(--disp); font-weight:800; text-transform:uppercase; font-size:20px;
  color:var(--cream); letter-spacing:.02em;
}
.foot .seal-sm i { width:9px; height:9px; background:var(--mint); border-radius:2px; }
.foot-bottom {
  margin-top:44px; padding-top:22px; border-top:1px solid var(--hair); display:flex;
  flex-wrap:wrap; justify-content:space-between; gap:12px; font-family:var(--mono);
  font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--on-3);
}
@media (max-width:820px){ .foot-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .foot-grid { grid-template-columns:1fr; } }

/* ---- 5. BLOCKS ----------------------------------------------------------- */
/* The ruled-ledger texture. Brigade's field carries topographic contours —
   theirs, drawn from their subject. Ours is ruled paper, drawn from ours. */
.ruled { position:relative; overflow:hidden; }
.ruled::before {
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:
    repeating-linear-gradient(0deg, rgba(243,239,227,.055) 0 1px, transparent 1px 34px),
    linear-gradient(90deg, rgba(243,239,227,.05) 0 1px, transparent 1px);
  background-size:100% 34px, 84px 100%;
}
.ruled > * { position:relative; }

/* Type-only hero. The previous one stacked six rectangles - two panels and the
   seam between them, the invoice card, a badge, the schedule card and a button.
   This has none: the claim carries the page and the figures sit on a rule. */
.hero-type { background:var(--g900); color:var(--on-1); padding-block:clamp(60px,9vw,120px); }
.hero-type h1 { font-size:clamp(44px,8vw,110px); margin-top:20px; color:var(--cream); max-width:16ch; }
.hero-type .lede { margin-top:24px; color:var(--on-2); font-size:clamp(16px,1.4vw,20px); max-width:56ch; }
.hero-acts { margin-top:30px; display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.figs {
  margin-top:clamp(34px,4.5vw,48px); padding-top:24px; border-top:1px solid var(--hair);
  display:flex; flex-wrap:wrap; gap:clamp(20px,4vw,60px);
}
.figs b {
  display:block; font-family:var(--disp); font-weight:800; font-size:clamp(28px,3vw,38px);
  color:var(--mint); line-height:1; font-variant-numeric:tabular-nums;
}
.figs span {
  display:block; margin-top:5px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--on-3);
}

/* Interior-page hero, unchanged. */
.phero { background:var(--g900); color:var(--on-1); padding-block:clamp(44px,6vw,86px); }
.phero h1 { font-size:clamp(36px,5vw,72px); max-width:18ch; margin-top:14px; }
.phero .lede { margin-top:20px; color:var(--on-2); font-size:clamp(16px,1.3vw,19px); max-width:52ch; }
.phero .hero-acts { margin-top:28px; }

.proof { background:var(--stone); border-block:1px solid var(--stone-2); padding-block:clamp(30px,4vw,50px); }
.proof h2 { text-align:center; font-size:clamp(21px,2.6vw,32px); }
.proof .names { margin-top:24px; display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(20px,3.4vw,52px); align-items:center; }
.proof .names span {
  font-family:var(--disp); font-weight:800; text-transform:uppercase;
  font-size:clamp(16px,1.5vw,20px); letter-spacing:.03em; color:var(--ink-2); opacity:.62;
}

/* Trust strip. Replaced a social-proof wall that carried an invented volume
   figure and six invented merchant names; every claim here is one the site
   already makes in the promo bar, footer or privacy policy. */
.trust { background:var(--stone); border-block:1px solid var(--stone-2); padding-block:clamp(24px,3vw,38px); }
.trust ul { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(14px,3vw,44px); }
.trust li {
  display:flex; align-items:center; gap:9px; font-family:var(--disp); font-weight:700;
  text-transform:uppercase; font-size:clamp(13px,1.3vw,17px); letter-spacing:.04em; color:var(--ink-2);
}
.trust li::before { content:""; width:7px; height:7px; border-radius:2px; background:var(--green); flex:none; }

.sec { padding-block:var(--pad); }
.sec-head {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.82fr); gap:clamp(20px,4vw,56px);
  align-items:end; padding-bottom:20px; border-bottom:1px solid var(--stone-2);
}
.sec-head h2 { font-size:clamp(28px,3.9vw,54px); max-width:20ch; }
.sec-head p { color:var(--ink-2); font-size:16.5px; max-width:52ch; }
@media (max-width:820px){ .sec-head { grid-template-columns:1fr; align-items:start; gap:14px; } }

.cards { margin-top:clamp(26px,3.4vw,44px); display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.cards.three { grid-template-columns:repeat(3,1fr); }
.cards.two { grid-template-columns:repeat(2,1fr); }
@media (max-width:940px){ .cards, .cards.three { grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .cards, .cards.three, .cards.two { grid-template-columns:1fr; } }
.card {
  border-radius:14px; background:var(--stone); padding:20px 20px 22px; position:relative;
  overflow:hidden; transition:transform .18s, background .18s;
}
.card:hover { transform:translateY(-4px); background:#efece0; }
.card .mini { height:104px; border-radius:9px; background:#fff; padding:12px; display:flex; flex-direction:column; gap:6px; }
.card .mini i { display:block; height:5px; border-radius:3px; background:#e7e2d3; }
.card .mini i.ink { background:var(--ink); width:56%; }
.card .mini i.acc { background:var(--green); width:34%; }
.card .mini i.s { width:84%; }
.card .mini i.xs { width:46%; }
.card h3 { margin-top:15px; font-size:21px; }
.card p { margin-top:8px; font-size:14px; color:var(--ink-2); }
.card .tier {
  position:absolute; top:14px; right:14px; font-family:var(--mono); font-size:8.5px;
  letter-spacing:.14em; text-transform:uppercase; background:var(--green); color:var(--mint);
  padding:4px 8px; border-radius:999px;
}

.flank { margin-top:clamp(30px,4vw,52px); display:grid; grid-template-columns:1fr minmax(0,340px) 1fr; gap:clamp(20px,3.4vw,48px); align-items:center; }
@media (max-width:940px){ .flank { grid-template-columns:1fr; } }
.flank .side { display:grid; gap:6px; }
.flank .side.l { text-align:right; }
@media (max-width:940px){ .flank .side.l { text-align:left; } }
.flank .side .lab { font-family:var(--mono); font-size:9.5px; letter-spacing:.17em; text-transform:uppercase; color:var(--green); margin-bottom:6px; }
.flank .side b {
  font-family:var(--disp); font-weight:800; text-transform:uppercase;
  font-size:clamp(24px,2.9vw,40px); letter-spacing:.01em; line-height:1.06; color:var(--ink);
}
.flank .side b.off { color:var(--stone-2); }
.flank .mid { background:var(--g900); border-radius:16px; padding:22px; color:var(--on-1); }
.flank .mid .t { font-family:var(--disp); font-weight:800; text-transform:uppercase; font-size:17px; }
.flank .mid .rows { margin-top:14px; display:grid; gap:9px; }
.flank .mid .r {
  display:flex; justify-content:space-between; gap:12px; padding-bottom:9px;
  border-bottom:1px solid var(--hair); font-family:var(--mono); font-size:11.5px; color:var(--on-2);
}
.flank .mid .r:last-child { border-bottom:none; padding-bottom:0; }
.flank .mid .r b { font-weight:400; color:var(--mint); }

.band-green { background:var(--g900); color:var(--on-1); }
/* A .card keeps its own light ground inside a green band, so its text must not
   inherit the band's cream - that put cream on stone and made headings vanish. */
.band-green .card { color:var(--ink); }
.band-green .card h3 { color:var(--ink); }
.band-green .card p { color:var(--ink-2); }
.band-green .sec-head { border-bottom-color:var(--hair); }
.band-green .sec-head h2 { color:var(--cream); }
.band-green .sec-head p { color:var(--on-2); }
.outs { margin-top:clamp(26px,3.4vw,44px); display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:900px){ .outs { grid-template-columns:1fr; } }
.out { border:1px solid var(--hair); border-radius:14px; padding:24px 22px; position:relative; transition:border-color .17s, background .17s; }
.out:hover { border-color:rgba(124,240,198,.45); background:rgba(124,240,198,.04); }
.out h3 { font-size:24px; color:var(--cream); margin-top:9px; }
.out p { margin-top:10px; color:var(--on-2); font-size:14.5px; }
.out .tier {
  position:absolute; top:22px; right:20px; font-family:var(--mono); font-size:8.5px;
  letter-spacing:.14em; text-transform:uppercase; border:1px solid rgba(124,240,198,.4);
  color:var(--mint); padding:4px 9px; border-radius:999px;
}
.out .wire {
  margin-top:16px; padding-top:13px; border-top:1px solid var(--hair); font-family:var(--mono);
  font-size:10px; letter-spacing:.11em; text-transform:uppercase; color:var(--on-3);
}
.out .wire b { color:var(--mint); font-weight:400; }

.tiers { margin-top:clamp(26px,3.4vw,44px); display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width:1040px){ .tiers { grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .tiers { grid-template-columns:1fr; } }
.tier-c { background:var(--stone); border-radius:16px; padding:24px 22px; display:flex; flex-direction:column; }
.tier-c.pop { background:var(--g900); color:var(--on-1); }
.tier-c .nm { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.tier-c .nm h3 { font-size:21px; }
.tier-c.pop .nm h3 { color:var(--cream); }
.tier-c .flag {
  font-family:var(--mono); font-size:8.5px; letter-spacing:.14em; text-transform:uppercase;
  background:var(--mint); color:var(--g900); padding:4px 9px; border-radius:999px; font-weight:700;
}
.tier-c .amt {
  font-family:var(--disp); font-weight:800; font-size:48px; margin-top:14px;
  letter-spacing:-.01em; font-variant-numeric:tabular-nums; line-height:1;
}
.tier-c .amt small { font-family:var(--mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-2); font-weight:400; }
.tier-c.pop .amt small { color:var(--on-3); }
.tier-c .tl { margin-top:8px; font-size:14.5px; color:var(--ink-2); }
.tier-c.pop .tl { color:var(--on-2); }
.tier-c ul { list-style:none; margin:18px 0 22px; padding:0; display:grid; gap:8px; }
.tier-c li { position:relative; padding-left:17px; font-size:14px; color:var(--ink-2); }
.tier-c.pop li { color:var(--on-2); }
.tier-c li::before { content:""; position:absolute; left:0; top:.62em; width:8px; height:2px; background:var(--green); }
.tier-c.pop li::before { background:var(--mint); }
.tier-c .btn { justify-content:center; margin-top:auto; }

/* Plan comparison matrix. Wide content scrolls in its own container so the
   page body never scrolls sideways. */
.matrix-scroll { overflow-x:auto; margin-top:clamp(26px,3.4vw,44px); border:1px solid var(--stone-2); border-radius:14px; background:#fff; }
.matrix { width:100%; min-width:760px; border-collapse:collapse; }
.matrix th, .matrix td { padding:13px 16px; text-align:left; border-bottom:1px solid var(--stone-2); font-size:14px; }
.matrix thead th { background:var(--stone); border-bottom:1px solid var(--stone-2); vertical-align:bottom; }
.matrix thead th .pn { font-family:var(--disp); font-weight:800; text-transform:uppercase; font-size:20px; }
.matrix thead th .pp { font-family:var(--mono); font-size:22px; font-weight:700; margin-top:4px; font-variant-numeric:tabular-nums; }
.matrix thead th .pu { font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.matrix thead th.pop { background:var(--g900); color:var(--cream); }
.matrix thead th.pop .pp { color:var(--mint); }
.matrix thead th.pop .pu { color:var(--on-3); }
.matrix tbody th { font-weight:400; color:var(--ink-2); font-family:var(--body); }
.matrix td { font-family:var(--mono); font-size:13px; font-variant-numeric:tabular-nums; }
.matrix td.yes { color:var(--green); }
.matrix td.no { color:#a8b0ac; }
.matrix col.popcol { background:rgba(20,124,100,.05); }
.matrix tbody tr:last-child th, .matrix tbody tr:last-child td { border-bottom:none; }

/* FAQ — native disclosure, no JS. */
.faq { margin-top:clamp(26px,3.4vw,44px); display:grid; gap:10px; }
.faq details { background:var(--stone); border-radius:12px; padding:16px 20px; }
.faq summary {
  cursor:pointer; font-family:var(--disp); font-weight:700; text-transform:uppercase;
  font-size:19px; letter-spacing:.02em; list-style:none; display:flex;
  justify-content:space-between; gap:16px; align-items:center;
}
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; font-family:var(--mono); font-size:19px; color:var(--green); flex:none; }
.faq details[open] summary::after { content:"\2212"; }
.faq details p { margin-top:11px; color:var(--ink-2); font-size:15.5px; max-width:70ch; }

.close { background:var(--g900); color:var(--on-1); padding-block:clamp(60px,8vw,116px); text-align:center; }
.close h2 { font-size:clamp(34px,6.2vw,88px); max-width:16ch; margin-inline:auto; color:var(--cream); }
.close p { margin-top:20px; color:var(--on-2); max-width:44ch; margin-inline:auto; }
.close .acts { margin-top:32px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; align-items:center; }

/* ---- 7. PROSE ------------------------------------------------------------ */
.band-cream { background:var(--cream); color:var(--ink); padding-block:var(--pad); }
.prose { max-width:760px; margin:0 auto; }
.prose h1 { font-size:clamp(32px,4.4vw,54px); margin-top:14px; }
.prose .updated { font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--ink-3); margin-top:14px; }
.prose-body { margin-top:30px; display:flex; flex-direction:column; gap:26px; }
.prose-body h2 { font-size:20px; color:var(--green); letter-spacing:.02em; }
.prose-body p { margin-top:8px; font-size:15.5px; color:var(--ink-2); line-height:1.7; }
.prose-body ul { margin:12px 0 0; padding-left:20px; display:flex; flex-direction:column; gap:9px; }
.prose-body li { font-size:15px; color:var(--ink-2); line-height:1.65; }
.prose-body a { color:var(--green); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.prose-body code { font-family:var(--mono); font-size:13px; background:var(--stone); padding:2px 6px; border-radius:5px; }
.prose-other { max-width:760px; margin:38px auto 0; padding-top:22px; border-top:1px solid var(--stone-2); font-size:15px; color:var(--ink-2); }
.prose-other a { color:var(--green); font-weight:600; text-decoration:underline; text-underline-offset:2px; }

/* User guide: left rail + numbered sections. */
.guide { display:grid; grid-template-columns:250px minmax(0,1fr); gap:clamp(24px,4vw,56px); align-items:start; padding-block:clamp(32px,4vw,56px); }
@media (max-width:960px){ .guide { grid-template-columns:1fr; } }
.rail { position:sticky; top:20px; align-self:start; }
@media (max-width:960px){ .rail { position:static; } }
.rail-title { font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin:0 0 10px; }
.rail-group { display:grid; gap:1px; margin-bottom:20px; }
.rail a { display:flex; gap:10px; align-items:baseline; padding:7px 10px; border-radius:7px; font-size:14.5px; color:var(--ink-2); }
.rail a:hover { background:var(--stone); color:var(--green); }
.rail a .n { font-family:var(--mono); font-size:10px; color:var(--ink-3); flex:none; }
.guide-body { min-width:0; display:flex; flex-direction:column; gap:clamp(30px,4vw,52px); }
.guide-body section { scroll-margin-top:24px; }
.g-head { display:flex; align-items:baseline; gap:14px; padding-bottom:12px; border-bottom:1px solid var(--stone-2); }
.g-head .n { font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--green); }
.g-head h2 { font-size:clamp(24px,3vw,34px); }
.guide-body h3 { font-size:19px; margin-top:22px; }
.guide-body p { margin-top:10px; font-size:15.5px; color:var(--ink-2); line-height:1.7; max-width:74ch; }
.guide-body ul, .guide-body ol { margin:12px 0 0; padding-left:22px; display:flex; flex-direction:column; gap:8px; }
.guide-body li { font-size:15px; color:var(--ink-2); line-height:1.65; max-width:72ch; }
.guide-body li strong { color:var(--ink); }
.guide-body code { font-family:var(--mono); font-size:13px; background:var(--stone); padding:2px 6px; border-radius:5px; }
.g-note { background:var(--stone); border-radius:12px; padding:16px 18px; margin-top:16px; }
.g-note .lab { font-family:var(--mono); font-size:9.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--green); }
.g-note p { margin-top:6px; font-size:14.5px; }
.g-note.tier { background:var(--g900); }
.g-note.tier .lab { color:var(--mint); }
.g-note.tier p { color:var(--on-2); }

/* ---- 8. USER GUIDE INTERNALS ---------------------------------------------
   The guide carries detailed inline app mockups, callouts and path badges that
   are worth keeping, so its content markup is reused verbatim and only
   re-skinned here. Every rule is scoped under .guide-page because the guide's
   class names (.card, .doc, .stat, .row, .pill) collide with site-wide ones.
   Token aliases below map the guide's original names onto Field Manual values,
   so the ported component rules needed no rewriting.
   -------------------------------------------------------------------------- */
.guide-page {
  --bg:#ffffff; --bg-soft:#f7f3ea; --bg-sink:#ece5d5;
  --text:var(--ink); --text-soft:var(--ink-2); --text-mute:var(--ink-3);
  --line:#e4ddcd; --line-soft:#efe9db;
  --green-deep:#106b56; --mint-soft:#e2f6ed;
  --amber:#8a5a12; --amber-bg:#f6ecd4; --amber-line:#e6d3a8;
  --red:#a3271b;
  --shadow:0 1px 2px rgba(8,46,37,.05), 0 8px 24px -12px rgba(8,46,37,.16);
  --shadow-sm:0 1px 2px rgba(8,46,37,.07);
  --radius:12px; --radius-sm:8px;
}
.guide-body a { color:var(--green); text-decoration:underline; text-underline-offset:2px; }
.guide-body a:hover { color:var(--g700); }

.guide-body .lede { font-size:17.5px; color:var(--text-soft); margin:2px 0 0; max-width:64ch; line-height:1.6; }
.guide-body .where {
  display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:12px;
  color:var(--text-soft); background:var(--bg); border:1px solid var(--line);
  padding:5px 11px; border-radius:7px; margin:18px 0 4px; font-weight:500;
}
.guide-body .where b { color:var(--green-deep); font-weight:700; }
.guide-body h4 { font-size:14.5px; font-weight:700; margin:24px 0 8px; color:var(--text); font-family:var(--body); text-transform:none; letter-spacing:-.01em; }
.guide-body .divider { height:1px; background:var(--line); margin:12px 0 0; }
.guide-body .scroll-x { overflow-x:auto; -webkit-overflow-scrolling:touch; }

.guide-body ul.clean { list-style:none; padding:0; margin:16px 0; display:flex; flex-direction:column; gap:9px; }
.guide-body ul.clean li { position:relative; padding-left:26px; line-height:1.5; }
.guide-body ul.clean li::before {
  content:""; position:absolute; left:2px; top:9px; width:9px; height:9px; border-radius:3px;
  background:var(--mint); border:1.5px solid var(--green);
}
.guide-body ul.clean li b, .guide-body ul.clean li strong { color:var(--text); }

/* Mockup frame */
.guide-body .shot { margin:26px 0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); background:var(--bg); }
.guide-body .shot-bar { display:flex; align-items:center; gap:7px; padding:9px 14px; background:var(--bg-soft); border-bottom:1px solid var(--line); }
.guide-body .shot-bar i { width:9px; height:9px; border-radius:50%; }
.guide-body .shot-bar i:nth-child(1){ background:#e5b3ad; }
.guide-body .shot-bar i:nth-child(2){ background:#ecd9a8; }
.guide-body .shot-bar i:nth-child(3){ background:#a9dcc9; }
.guide-body .shot-bar span { margin-left:8px; font-family:var(--mono); font-size:11px; color:var(--text-mute); }
.guide-body .shot-cap { font-size:12.5px; color:var(--text-mute); text-align:center; margin:-14px 0 26px; font-style:italic; }
.guide-body .app { display:grid; grid-template-columns:52px 1fr; min-height:100px; background:var(--bg); }
.guide-body .app-nav { background:var(--bg-soft); border-right:1px solid var(--line); padding:12px 0; display:flex; flex-direction:column; align-items:center; gap:14px; }
.guide-body .app-nav .ic { width:22px; height:22px; border-radius:6px; background:var(--bg-sink); color:var(--text-mute); display:grid; place-items:center; }
.guide-body .app-nav .ic svg { width:14px; height:14px; }
.guide-body .app-nav .ic.on { background:var(--green); color:#fff; }
.guide-body .app-body { padding:18px 20px; min-width:0; }
.guide-body .app-h { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.guide-body .app-h h4 { margin:0; font-size:16px; font-weight:800; letter-spacing:-.02em; }
.guide-body .app-h p { margin:2px 0 0; font-size:12px; color:var(--text-mute); }
.guide-body .app-two { grid-template-columns:1fr 1fr; }
.guide-body .app-two-left { border-right:1px solid var(--line); }
.guide-body .app-two-right { background:var(--bg-soft); }
@media (max-width:600px){
  .guide-body .app-two { grid-template-columns:1fr; }
  .guide-body .app-two-left { border-right:0; border-bottom:1px solid var(--line); }
}

.guide-body .row { display:flex; gap:10px; }
.guide-body .row.wrap { flex-wrap:wrap; }
.guide-body .grow { flex:1; min-width:0; }
.guide-body .card { background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px 14px; }
.guide-body .card.soft { background:var(--bg-soft); }
.guide-body .card:hover { transform:none; }
.guide-body .stat { flex:1; min-width:0; }
.guide-body .stat .k { font-size:10.5px; color:var(--text-mute); font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
.guide-body .stat .v { font-size:20px; font-weight:800; letter-spacing:-.02em; margin-top:3px; font-variant-numeric:tabular-nums; }
.guide-body .stat .v small { font-size:11px; font-weight:600; color:var(--text-mute); }
.guide-body .trend { font-size:11px; font-weight:700; }
.guide-body .trend.up { color:var(--green); }
.guide-body .trend.dn { color:var(--red); }
.guide-body .btn2 { font-size:12px; font-weight:700; padding:7px 13px; border-radius:7px; border:1px solid var(--text); color:var(--text); background:var(--bg); display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.guide-body .btn2.ghost { border-color:var(--line); color:var(--text-soft); font-weight:600; }
.guide-body .btn2.pri { background:var(--green); border-color:var(--green); color:#fff; }
.guide-body .pill { font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:999px; display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.guide-body .pill::before { content:""; width:5px; height:5px; border-radius:50%; background:currentColor; }
.guide-body .pill.plain::before { display:none; }
.guide-body .pill.green { background:var(--mint-soft); color:var(--green-deep); }
.guide-body .pill.amber { background:var(--amber-bg); color:var(--amber); }
.guide-body .pill.grey { background:var(--bg-sink); color:var(--text-soft); }
.guide-body .pill.mint { background:var(--mint); color:var(--g900); }
.guide-body table.mock { width:100%; border-collapse:collapse; font-size:12px; margin-top:4px; }
.guide-body table.mock th { text-align:left; font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-mute); font-weight:700; padding:7px 10px; border-bottom:1px solid var(--line); }
.guide-body table.mock td { padding:9px 10px; border-bottom:1px solid var(--line-soft); color:var(--text-soft); vertical-align:middle; }
.guide-body table.mock td b { color:var(--text); font-weight:650; }
.guide-body table.mock tr:last-child td { border-bottom:0; }
.guide-body .num { font-variant-numeric:tabular-nums; text-align:right; }
.guide-body .mono { font-family:var(--mono); font-size:.92em; }
.guide-body .tabs { display:flex; gap:4px; background:var(--bg-sink); padding:4px; border-radius:9px; width:max-content; max-width:100%; }
.guide-body .tabs b { font-size:12px; padding:5px 12px; border-radius:6px; color:var(--text-soft); font-weight:600; }
.guide-body .tabs b.on { background:var(--bg); color:var(--text); box-shadow:var(--shadow-sm); font-weight:700; }
.guide-body .toggle { width:30px; height:17px; border-radius:999px; background:var(--green); position:relative; flex:none; }
.guide-body .toggle::after { content:""; position:absolute; top:2px; right:2px; width:13px; height:13px; border-radius:50%; background:#fff; }
.guide-body .toggle.off { background:var(--bg-sink); }
.guide-body .toggle.off::after { right:auto; left:2px; background:var(--text-mute); }
.guide-body .field { border:1px solid var(--line); border-radius:7px; padding:8px 10px; font-size:12px; color:var(--text-soft); background:var(--bg); }
.guide-body .chipset { display:flex; flex-wrap:wrap; gap:6px; }
.guide-body .chip { font-size:11px; font-weight:600; padding:5px 10px; border-radius:999px; border:1px solid var(--line); color:var(--text-soft); background:var(--bg); }
.guide-body .chip.on { background:var(--mint); border-color:var(--mint); color:var(--g900); font-weight:700; }
.guide-body .swatch { width:16px; height:16px; border-radius:5px; border:1px solid rgba(0,0,0,.1); flex:none; }

/* The guide's own miniature invoice mock — narrower than the site-wide .doc. */
.guide-body .doc { background:#fff; color:#0a0a0a; border:1px solid var(--line); border-radius:8px; padding:18px 20px; font-size:11.5px; box-shadow:var(--shadow-sm); }
.guide-body .doc .d-top { display:flex; justify-content:space-between; align-items:flex-start; border-bottom:2px solid var(--green); padding-bottom:12px; margin-bottom:12px; }
.guide-body .doc .logo { font-weight:800; font-size:15px; color:var(--g900); }
.guide-body .doc .d-meta { text-align:right; color:#666; font-size:10.5px; line-height:1.5; }
.guide-body .doc .d-meta b { color:#0a0a0a; }
.guide-body .doc table { width:100%; border-collapse:collapse; font-size:11px; color:#333; margin:6px 0; }
.guide-body .doc table th { text-align:left; color:#888; font-size:9.5px; text-transform:uppercase; letter-spacing:.04em; padding:5px 4px; border-bottom:1px solid #eee; }
.guide-body .doc table td { padding:6px 4px; border-bottom:1px solid #f2f2f2; }
.guide-body .doc .tot { display:flex; justify-content:flex-end; margin-top:8px; }
.guide-body .doc .tot div { min-width:150px; }
.guide-body .doc .tot .r { display:flex; justify-content:space-between; padding:2px 0; color:#555; font-size:10.5px; }
.guide-body .doc .tot .r.big { border-top:1.5px solid #0a0a0a; margin-top:4px; padding-top:5px; font-weight:800; font-size:12px; color:#0a0a0a; }

.guide-body .flow { display:flex; flex-wrap:wrap; gap:10px; margin:22px 0; counter-reset:s; }
.guide-body .flow .step { flex:1; min-width:150px; background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:14px 15px 15px; position:relative; }
.guide-body .flow .step .n { counter-increment:s; font-family:var(--mono); font-size:11px; font-weight:700; color:#fff; background:var(--green); width:22px; height:22px; border-radius:6px; display:grid; place-items:center; margin-bottom:9px; }
.guide-body .flow .step .n::before { content:counter(s); }
.guide-body .flow .step b { display:block; font-size:13.5px; color:var(--text); font-weight:700; margin-bottom:3px; }
.guide-body .flow .step p { margin:0; font-size:12.5px; color:var(--text-soft); line-height:1.45; }
.guide-body .flow .step::after { content:"\2192"; position:absolute; right:-13px; top:50%; transform:translateY(-50%); color:var(--text-mute); font-size:15px; z-index:1; }
.guide-body .flow .step:last-child::after { display:none; }
@media (max-width:640px){
  .guide-body .flow .step::after { content:"\2193"; right:auto; left:24px; top:auto; bottom:-14px; transform:none; }
}

.guide-body .note { border-radius:10px; padding:14px 16px 14px 15px; margin:20px 0; border:1px solid; display:flex; gap:12px; font-size:14px; line-height:1.5; }
.guide-body .note .ni { flex:none; width:22px; height:22px; border-radius:6px; display:grid; place-items:center; margin-top:1px; }
.guide-body .note .ni svg { width:13px; height:13px; }
.guide-body .note p { margin:0; }
.guide-body .note b { color:var(--text); }
.guide-body .note.tip { background:var(--mint-soft); border-color:rgba(20,124,100,.2); color:var(--text-soft); }
.guide-body .note.tip .ni { background:var(--green); color:#fff; }
.guide-body .note.lock { background:var(--amber-bg); border-color:var(--amber-line); color:var(--text-soft); }
.guide-body .note.lock .ni { background:var(--amber); color:#fff; }
.guide-body .note.lock b { color:var(--amber); }

/* Collision fixes between the guide's own class names and the site-wide ones.
   The guide markup uses .sec-head/.sec-num, which the site uses for a two-column
   section header grid — that pushed every guide heading into the right column,
   away from its number. Restore the guide's inline header here. */
.guide-body .sec-head {
  display:flex; align-items:center; gap:12px; margin-bottom:6px;
  padding-bottom:0; border-bottom:0;
}
.guide-body .sec-num {
  font-family:var(--mono); font-size:12px; font-weight:700; color:var(--green);
  background:var(--mint-soft); border:1px solid rgba(20,124,100,.22);
  width:30px; height:30px; border-radius:8px; display:grid; place-items:center; flex:none;
}
/* Documentation reads better in sentence case than in the marketing pages'
   all-caps, so the guide keeps the display face but drops the transform. */
.guide-body h2 { font-size:clamp(24px,3.4vw,32px); text-transform:none; letter-spacing:-.01em; line-height:1.12; }
.guide-body h3 { font-size:19px; text-transform:none; letter-spacing:-.01em; margin:32px 0 10px; line-height:1.25; }
.guide-body .divider { margin:54px 0 0; }

/* Rail: group labels and the leading dot on each link. */
.rail-group > p {
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 6px; padding:0 8px; font-weight:700;
}
.rail a .dot { width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.35; flex:none; }
.rail a:hover .dot { opacity:1; background:var(--green); }

/* ---- 9. COMPARISON PAGES -------------------------------------------------
   Competitor pages make factual claims about other companies, so the layout
   deliberately gives their strengths equal weight to ours: .cmp-cols renders
   two columns of the same width and styling, never a winner and a loser.
   -------------------------------------------------------------------------- */
.cmp-verdict {
  margin-top:clamp(26px,3.4vw,40px); background:var(--stone); border-radius:16px;
  padding:clamp(22px,3vw,30px); border-left:4px solid var(--green);
}
.cmp-verdict .k {
  font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--green);
}
.cmp-verdict p { margin-top:12px; font-size:clamp(16.5px,1.5vw,19px); color:var(--ink); max-width:74ch; }
.cmp-verdict p b { font-weight:400; color:var(--green); }

.cmp-toc { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.cmp-toc a {
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  border:1px solid var(--stone-2); border-radius:999px; padding:8px 14px; color:var(--ink-2);
}
.cmp-toc a:hover { border-color:var(--green); color:var(--green); }

.cmp-cols { margin-top:clamp(26px,3.4vw,44px); display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:860px){ .cmp-cols { grid-template-columns:1fr; } }
.cmp-col { background:var(--stone); border-radius:16px; padding:24px 22px; }
.cmp-col.ours { background:var(--g900); color:var(--on-1); }
.cmp-col h3 { font-size:23px; }
.cmp-col.ours h3 { color:var(--cream); }
.cmp-col .who {
  font-family:var(--mono); font-size:9.5px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:9px; display:block;
}
.cmp-col.ours .who { color:var(--mint); }
.cmp-col p { margin-top:10px; font-size:15px; color:var(--ink-2); }
.cmp-col.ours p { color:var(--on-2); }
.cmp-col ul { list-style:none; margin:16px 0 0; padding:0; display:grid; gap:9px; }
.cmp-col li { position:relative; padding-left:18px; font-size:14.5px; color:var(--ink-2); }
.cmp-col.ours li { color:var(--on-2); }
.cmp-col li::before { content:""; position:absolute; left:0; top:.62em; width:8px; height:2px; background:var(--green); }
.cmp-col.ours li::before { background:var(--mint); }
.cmp-col .meta {
  margin-top:18px; padding-top:14px; border-top:1px solid var(--stone-2); font-family:var(--mono);
  font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
}
.cmp-col.ours .meta { border-top-color:var(--hair); color:var(--on-3); }

/* Three-column feature matrix: label, us, them. */
.matrix td.mark-yes { color:var(--green); }
.matrix td.mark-no { color:#a8b0ac; }
.matrix col.uscol { background:rgba(20,124,100,.05); }

.cmp-note {
  margin-top:22px; font-size:14px; color:var(--ink-3); max-width:80ch;
}
.cmp-note a { color:var(--green); font-weight:600; text-decoration:underline; text-underline-offset:2px; }

/* Competitors hub: the list is the page, so the links carry the display face. */
.comp-list { margin-top:clamp(26px,3.4vw,42px); display:grid; gap:2px; }
.comp-list a {
  display:flex; align-items:baseline; justify-content:space-between; gap:18px; flex-wrap:wrap;
  padding:22px 4px; border-top:1px solid var(--stone-2);
  font-family:var(--disp); font-weight:800; text-transform:uppercase;
  font-size:clamp(24px,3.4vw,42px); letter-spacing:.005em; color:var(--ink);
}
.comp-list a:last-child { border-bottom:1px solid var(--stone-2); }
.comp-list a:hover { color:var(--green); }
.comp-list a .sub {
  font-family:var(--body); font-weight:400; text-transform:none; letter-spacing:0;
  font-size:15px; color:var(--ink-2); max-width:46ch;
}
.comp-list a:hover .sub { color:var(--ink-2); }

.cmp-other { border-top:1px solid var(--stone-2); padding-block:clamp(34px,4.5vw,56px); }
.cmp-other ul { list-style:none; margin:18px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media (max-width:800px){ .cmp-other ul { grid-template-columns:1fr; } }
.cmp-other li a {
  display:block; background:var(--stone); border-radius:12px; padding:16px 18px;
  font-family:var(--disp); font-weight:700; text-transform:uppercase; font-size:17px; color:var(--ink);
}
.cmp-other li a:hover { background:#efece0; color:var(--green); }