/* brand.css (2026-10-19): the bar-built P, the Paier wordmark face, the
   splash and the scroll-driven bar field. Shared by every page. */

/* Wordmark: IBM Plex Mono Bold, written "Paier". */
.nav-wm,.xnav-wm,.footer-logo span,.xfooter-logo span,.splash-wm,.plogo-txt,.brand span,.pm-wm{
  font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace !important;font-weight:700 !important;
  letter-spacing:-.02em !important;text-transform:none !important}
.pm-mark{display:block;flex-shrink:0;overflow:visible}

/* The old circuit field and sparks are retired. */
body::before{display:none !important;animation:none !important}
.circuit-sparks{display:none !important}

/* Bar field: colored bars from the P, behind everything. They only move
   while the page scrolls (brand.js), each on its own axis and speed. */
#pm-field{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
#pm-field i{position:absolute;display:block;border-radius:2px;will-change:transform}
@media (prefers-reduced-motion: reduce){#pm-field{display:none}}

/* Splash: bars fly in and lock into the P, then Paier is typed. */
.splash-logo .pl-mark{width:100%;height:100%;overflow:visible}
.splash-logo .pl-mark g{opacity:0;animation:plShow .25s linear var(--d) forwards}
.splash-logo .pl-mark rect{transform-box:fill-box}
.splash-logo .pl-l rect{transform-origin:left center;transform:translateX(-520px) scaleX(.25);animation:plIn .9s cubic-bezier(.22,.9,.3,1) var(--d) forwards}
.splash-logo .pl-r rect{transform-origin:right center;transform:translateX(520px) scaleX(.25);animation:plIn .9s cubic-bezier(.22,.9,.3,1) var(--d) forwards}
.splash-logo .pl-mark line{stroke-width:1.5;opacity:.55}
.splash-logo .pl-l line{transform:translateX(-520px);animation:plTrail .9s cubic-bezier(.22,.9,.3,1) var(--d) forwards}
.splash-logo .pl-r line{transform:translateX(520px);animation:plTrail .9s cubic-bezier(.22,.9,.3,1) var(--d) forwards}
@keyframes plShow{to{opacity:1}}
@keyframes plIn{to{transform:none}}
@keyframes plTrail{to{transform:none;opacity:0}}
.splash-wm{opacity:1 !important;animation:none !important;display:inline-flex;align-items:center;height:2.6rem;letter-spacing:0 !important}
.splash-wm .pl-type{display:inline-block;overflow:hidden;white-space:nowrap;width:0;animation:plType .6s steps(5,end) 1.65s forwards}
.splash-wm .pl-caret{display:inline-block;width:3px;height:1.9rem;margin-left:3px;background:currentColor;opacity:0;animation:plCaret .9s steps(1) 1.45s 2 forwards}
@keyframes plType{to{width:5ch}}
@keyframes plCaret{0%{opacity:1}50%{opacity:0}100%{opacity:0}}
.splash-tag{animation-delay:2.3s !important}
.splash-bar{animation-delay:2.45s !important}
.splash-bar-fill{animation-delay:2.6s !important;animation-duration:.6s !important}

/* Cream reading sections (2026-10-19). Sage carries the hero, nav and
   footer; long-read sections sit on cream with dark sage ink. Each page's
   own variables are re-pointed inside .cream so its components follow. */
.cream{
  background:#dfe8e1 !important;color:#24382d;
  --t1:#24382d;--t2:rgba(36,56,45,.78);--t3:rgba(36,56,45,.56);
  --xt1:#24382d;--xt2:rgba(36,56,45,.78);--xt3:rgba(36,56,45,.56);
  --gold:#8a6d2a;--gold-l:#7d6224;--gold-d:#9a7a2c;--xgold:#8a6d2a;--xgold-l:#7d6224;--xgold-d:#9a7a2c;
  --em:#2f7d51;--em-l:#2f7d51;--em-d:#24603d;
  --bg2:#eef3ee;--card:#eef3ee;--card-h:#f8f2e5;--pp-line:rgba(36,56,45,.14);
}
.cream h1,.cream h2,.cream h3,.cream h4,.cream strong,.cream b{color:#24382d}
.cream p,.cream li{color:rgba(36,56,45,.8)}
.cream .g,.cream .gold,.cream em{color:#2f7d51}
.cream [class*="card"],.cream [class*="tier"],.cream [class*="tile"],.cream [class*="box"]{border-color:rgba(36,56,45,.14) !important}
/* cream runs edge to edge even when a section has a max width */
.cream{box-shadow:0 0 0 100vmax #dfe8e1;clip-path:inset(0 -100vmax)}
.cream .accent,.cream .hl,.cream span[class*="gold"]{color:#2f7d51 !important}
.cream .section-num,.cream [class*="kicker"],.cream [class*="eyebrow"],.cream .klabel{color:#8a6d2a !important}
/* Cream sections breathe: room above and below so the cream reads as its
   own band, not a strip cut off by the sage around it. */

/* Chips on cream: readable outline pills instead of faint cream-on-cream. */
.cream .pp-chip,.cream [class*="chip"]{background:#eef3ee !important;color:rgba(36,56,45,.72) !important;border:1px solid rgba(36,56,45,.18) !important;opacity:1 !important}
/* Dark cards inside cream become light cards (About pillars). */
.cream .pillar{background:#eef3ee !important;border:1px solid rgba(36,56,45,.14) !important;box-shadow:0 10px 28px rgba(36,56,45,.06)}
.cream .pillar .pillar-tag{color:#2f7d51 !important}
/* Flow pills on cream */
.cream .flywheel .node{color:#24382d !important;border-color:rgba(36,56,45,.28) !important;background:#eef3ee !important;opacity:1 !important}
.cream .flywheel .arrow,.cream .flywheel span:not(.node){color:rgba(36,56,45,.5) !important;opacity:1 !important}
/* A soft seam where sage meets cream, so the change in tone is gentler. */
section.cream{border-top:1px solid rgba(36,56,45,.08);border-bottom:1px solid rgba(36,56,45,.08)}
/* Pricing on cream: both plans behave the same. They rest flat and lift on
   hover; the featured plan is marked by a label and a green top line, not a
   permanent hover look. */
.cream .pp-tier{background:#eef3ee !important;border:1px solid rgba(36,56,45,.14) !important;box-shadow:0 6px 18px rgba(36,56,45,.05) !important;
  position:relative;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.cream .pp-tier:hover{transform:translateY(-6px);border-color:rgba(47,125,81,.55) !important;box-shadow:0 22px 44px rgba(36,56,45,.14) !important}
.cream .pp-feat{border-top:3px solid #2f7d51 !important}
.cream .pp-pcta{color:#24382d !important;border:1px solid rgba(36,56,45,.3) !important;background:transparent !important}
.cream .pp-pcta:hover{background:#24382d !important;color:#eef3ee !important;border-color:#24382d !important}
.cream .pp-feat .pp-pcta{background:#2f7d51 !important;border-color:#2f7d51 !important;color:#eef3ee !important}
.cream .pp-feat .pp-pcta:hover{background:#24603d !important;border-color:#24603d !important}

/* Heroes and sage bands keep room below their last button before a light band. */

section:not(.cream)+section.cream,header+section.cream{margin-top:0}

.pm-measure .reveal{transform:none !important;transition:none !important}
.fp-sec::before{margin:0 auto !important}
/* The band padding owns the space at each color change, so the first and
   last blocks inside a band don't add their own outer margins. */
body>section>.container>:first-child,body>section>.wrap>:first-child,body>section>:first-child{margin-top:0 !important}
body>section>.container>:last-child,body>section>.wrap>:last-child,body>section>:last-child{margin-bottom:0 !important}

/* All sage (2026-10-19): no full-width light bands. Standout lines are
   contained blocks; pricing cards rest flat and lift on hover. */
.fp-quote{display:block;max-width:880px;margin:clamp(56px,7vw,96px) auto !important;padding:30px 34px;border-radius:16px;
  background:#28493a;border:1px solid rgba(245,242,234,.12);position:relative;z-index:1}
.pp-price .pp-tier{background:rgba(245,242,234,.05) !important;border:1px solid rgba(245,242,234,.12) !important;box-shadow:none !important;
  position:relative;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.pp-price .pp-tier:hover{transform:translateY(-6px);border-color:rgba(169,220,188,.6) !important;box-shadow:0 22px 44px rgba(0,0,0,.25) !important}
.pp-price .pp-feat{border-top:3px solid #7ecba1 !important}
.pp-price .pp-pcta{color:#f5f2ea !important;border:1px solid rgba(245,242,234,.3) !important;background:transparent !important}
.pp-price .pp-pcta:hover{background:#f5f2ea !important;color:#24382d !important}
.pp-price .pp-feat .pp-pcta{background:#7ecba1 !important;border-color:#7ecba1 !important;color:#1c3326 !important}
.pp-price .pp-feat .pp-pcta:hover{background:#a9dcbc !important;border-color:#a9dcbc !important}

/* 8-bar P, splash drawn 50% larger (2026-10-19) */
.splash-logo{width:180px !important;height:170px !important}
.splash-wm{font-size:3rem !important;height:3.9rem !important}
.splash-wm .pl-caret{width:4px !important;height:2.85rem !important;margin-left:4px !important}