/* Brock Suite, brocksuite.com.
   Built from the design handoff. Every value here is the handoff's own; what changed is
   where it lives. The reference computed its breakpoints from window.innerWidth and minted
   its hover rules at runtime, neither of which survives a page with no React, so the
   breakpoints are media queries and the hover rules are real selectors.
   Breakpoints, once: 1280 (split headline), 1080 (hero), 1000 (nav links, Prime columns),
   900 (footer columns), 720 (narrow chart row, short CTA label). */

html, body { margin: 0; background: #EFECE4; -webkit-font-smoothing: antialiased; }
a { color: #111110; text-decoration: none; }
a:hover { color: #0B8A4E; }
::selection { background: #CFEFDC; }
input::placeholder { color: #8F8A7E; }
input, button { font: inherit; min-width: 0; box-sizing: border-box; }
:focus-visible { outline: 2px solid #12A15A; outline-offset: 2px; }

/* The page ground: three static colour fields over the warm gradient. Never animated and
   never blurred with a filter, because Safari stops painting text under that much
   compositing. */
.ground {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(50vw 45vw at 8% 10%, rgba(150,222,182,.6), transparent 70%),
    radial-gradient(48vw 44vw at 96% 26%, rgba(247,205,160,.55), transparent 70%),
    radial-gradient(56vw 46vw at 52% 104%, rgba(178,212,240,.5), transparent 70%),
    linear-gradient(180deg, #F3F0E9, #ECE8DE);
}

/* ---------------------------------------------------------------- Read chip */
/* backwards, not both: the entrance hides the chip only while its delay runs, and the
   base style is the visible one. With `both` a chip whose animation never ran would stay
   invisible forever, which is a sentence the reader was supposed to see. */
.chipIn { display: inline-block; opacity: 1; animation: cIn .7s cubic-bezier(.2,.8,.2,1) backwards; }
.chipFloat { display: inline-block; animation-name: cFloat; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.chip {
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  padding: 12px 18px 12px 14px; border-radius: 980px;
  font-size: 17px; font-weight: 500; color: #1F1D19;
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(22px) saturate(1.8); -webkit-backdrop-filter: blur(22px) saturate(1.8);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.85), 0 18px 40px -18px rgba(40,36,20,.5);
}
.chipDot { width: 9px; height: 9px; border-radius: 50%; background: #D99A1E; box-shadow: 0 0 0 4px rgba(217,154,30,.2); }
/* One chip pings every 2.4 seconds. The reference did this with a JS interval and a React
   key; a 7.2s cycle with a 2.4s offset per chip is the same behaviour, and it stops dead
   under reduced motion with everything else. */
.chipPing { animation: cPing 7.2s ease-in-out infinite; }
.chipDot { animation: cRing 7.2s ease-out infinite; }

@keyframes cIn { from { opacity: 0; transform: translateY(14px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes cFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes cPing {
  0%, 17%, 100% { transform: scale(1); background: rgba(255,255,255,.55);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.85), 0 18px 40px -18px rgba(40,36,20,.5); }
  3%, 14% { transform: scale(1.06); background: rgba(255,255,255,.82);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.95), 0 0 0 1px rgba(217,154,30,.35), 0 22px 46px -16px rgba(217,154,30,.55); }
}
@keyframes cRing {
  0%, 17%, 100% { box-shadow: 0 0 0 4px rgba(217,154,30,.2); }
  3% { box-shadow: 0 0 0 4px rgba(217,154,30,.2), 0 0 0 0 rgba(217,154,30,.55); }
  14% { box-shadow: 0 0 0 4px rgba(217,154,30,.2), 0 0 0 12px rgba(217,154,30,0); }
}
@keyframes gPulse {
  0% { box-shadow: 0 0 0 0 rgba(18,161,90,.5); }
  70% { box-shadow: 0 0 0 9px rgba(18,161,90,0); }
  100% { box-shadow: 0 0 0 0 rgba(18,161,90,0); }
}

/* ---------------------------------------------------------------- final CTA */
.ctaBig { position: relative; display: inline-block; border-radius: 999px; padding: 2px; color: #FFFFFF; isolation: isolate; }
.ctaBig:hover { color: #FFFFFF; }
.ctaGlow { position: absolute; inset: -14px; border-radius: 999px; z-index: -2;
  background: radial-gradient(closest-side, rgba(18,161,90,.45), transparent);
  filter: blur(12px); animation: ctaGlow 3.6s ease-in-out infinite; }
.ctaRingWrap { position: absolute; inset: 0; border-radius: 999px; overflow: hidden; z-index: -1; }
.ctaRing { position: absolute; left: 50%; top: 50%; width: 220%; aspect-ratio: 1;
  background: conic-gradient(from 0deg, #111110 0deg, #3FD18A 60deg, #BDEBD1 95deg, #111110 150deg, #111110 360deg);
  transform: translate(-50%,-50%); animation: ctaSpin 3.2s linear infinite; }
.ctaFace { display: flex; align-items: center; gap: 14px; padding: 20px 30px 20px 34px; border-radius: 999px;
  background: linear-gradient(180deg, #252421, #0E0E0D); box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
  font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.ctaArrow { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  font-size: 17px; color: #0E0E0D; background: radial-gradient(circle at 35% 30%, #FFFFFF, #BDEBD1 45%, #3FD18A); }
@keyframes ctaSpin { to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes ctaGlow { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: .9; transform: scale(1.06); } }

/* ---------------------------------------------------------------- header */
.ctaShort { display: none; }
/* The scrollspy adds .on to the section link for the section the reader is in. */
.navLink.on { color: #111110 !important; background: #FFFFFF !important;
  box-shadow: 0 0 0 1px rgba(17,17,16,.06), 0 6px 14px -8px rgba(40,36,20,.45) !important; }

/* ---------------------------------------------------------------- the chart */
/* The line draws itself on a loop. app.js drives --draw from 0 to 1; with no JavaScript
   the line is simply finished, which is also what reduced motion gets. */
#mchart .chartSvg {
  clip-path: inset(-20px calc((1 - var(--draw, 1)) * 100%) -20px 0);
  opacity: var(--chartop, 1); transition: opacity .45s;
}
#mchart .peakDot { transform: translate(-50%,-50%) scale(var(--peak, 1)); transition: transform .4s cubic-bezier(.2,.8,.2,1); }
#mchart .peakLine { opacity: var(--peak, 1); transition: opacity .5s; }
#mchart .peakRow {
  opacity: var(--peak, 1);
  transform: translate(-50%, calc(-100% - 76px - (1 - var(--peak, 1)) * 16px));
  transition: opacity .6s, transform .6s cubic-bezier(.2,.8,.2,1);
}
.riseHead { opacity: var(--rise, 1); transform: translateY(calc((1 - var(--rise, 1)) * 70px)); }

/* ---------------------------------------------------------------- breakpoints */
@media (max-width: 1279.98px) {
  .bpMoment { grid-template-columns: minmax(0,1fr) !important; }
  .bpSplit { display: none !important; }
}
@media (min-width: 1280px) {
  .bpOne { display: none !important; }
}
@media (max-width: 1079.98px) {
  .bpHeroGrid { grid-template-columns: minmax(0,1fr) !important; }
  .bpHeroPad { padding: 0 !important; }
  .bpHeroCard { transform: none !important; }
  .bpChipC { padding-left: 0 !important; }
}
@media (max-width: 999.98px) {
  .bpNav { display: none !important; }
  .bpPrimeGrid { grid-template-columns: minmax(0,1fr) !important; }
  .bpPrimeLeft { position: static !important; }
}
@media (max-width: 899.98px) {
  .bpFoot { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width: 719.98px) {
  .bpSignin { display: none !important; }
  .ctaLong { display: none; }
  .ctaShort { display: inline; }
  .bpChart { margin-top: 200px !important; }
  .bpStack { height: 470px !important; }
  .bpPeakRow { left: 16px !important; right: 16px !important; justify-content: flex-end !important;
    width: auto !important; max-width: none !important;
    transform: translate(0, calc(-100% - 76px - (1 - var(--peak, 1)) * 16px)) !important; }
}


/* The hero card's two decisions stack on a phone. Side by side the dollar figures are
   wider than their cell at 390 and the card clips them, which turns the number the
   section exists for into a fragment. */
@media (max-width: 559.98px) {
  .bpTwoCol { grid-template-columns: 1fr !important; }
  .bpTwoCol > div:first-child { box-shadow: inset 0 -1px 0 rgba(17,17,16,.07) !important; }
}

/* ---------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .chipIn, .chipFloat, .chipPing, .chipDot, .ctaGlow, .ctaRing { animation: none !important; }
  .chipIn { opacity: 1; transform: none; }
  * { transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
.p0:hover{color:#111110}
.p1:hover{color:#FFFFFF}
.p2:hover{color:#0B8A4E}
.p3:focus-visible{box-shadow:inset 0 0 0 2px #12A15A}
.p3:focus{box-shadow:inset 0 0 0 2px #12A15A}