/* workflows.io-style layer for product pages: grey ground, light display type, lime actions, floating pill nav.
   Loaded after a page's own styles so it re-skins without touching the page's structure or motion. */
:root{
  --paper:#F3F4F2; --paper-2:#ECEDEA; --white:#FFFFFF;
  --ink:#0B0B0C; --ink-2:#3A3B3D; --mute:#6E6F72; --faint:#9A9B9E;
  --line:#E3E4E0; --line-2:#D5D6D2;
  --night:#0A0A0B; --night-2:#141415; --night-line:rgba(255,255,255,.09); --night-mute:#9D9EA2;
  --lime:#C8FF2E; --lime-2:#B4EC1A;
  --sans:'Plus Jakarta Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --shadow:0 1px 2px rgba(0,0,0,.03),0 10px 26px -16px rgba(0,0,0,.22);
}
body{background:var(--paper)}
h1,h2,h3,.d1,.d2,.d3{font-weight:300;letter-spacing:-.035em}
.d4,.panel h3,.clauses h3{font-weight:500}
em.i,.paper em.i,.band em.i{font-family:var(--sans);font-style:normal;font-weight:500;color:inherit;font-size:1em;padding:0}
.band em.i[style]{color:#fff!important}
.kicker{letter-spacing:.12em}
.kicker .dot{background:var(--ink);box-shadow:0 0 0 3px var(--lime)}
.card{background:#FBFBFA;border-color:var(--line);border-radius:22px}
.white{background:#FBFBFA}

/* lime action with the black arrow square */
.btn-primary{background:var(--lime);color:var(--ink);box-shadow:none;border-radius:10px;padding:0 6px 0 16px;height:44px}
.btn-primary:hover{background:var(--lime-2);color:var(--ink)}
.btn-primary .arr{width:32px;height:32px;border-radius:8px;background:var(--ink);color:var(--lime);display:grid;place-items:center;font-size:14px}
.btn-line{border-radius:10px;height:44px;padding:0 16px}
.band .btn-primary{background:var(--lime);color:var(--ink)}

/* floating pill navigation */
.nav{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border:0;padding-top:calc(12px + env(safe-area-inset-top,0px))}
.nav.scrolled{border:0}
.nav .wrap{height:auto}
.nav .brand{padding:6px 12px 6px 6px;border-radius:14px;background:rgba(251,251,250,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line)}
.menu{padding:5px;border-radius:14px;background:rgba(251,251,250,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);box-shadow:0 8px 30px -14px rgba(0,0,0,.25)}
.menu a{border-radius:9px}
.menu a:hover,.menu a[aria-current="page"]{box-shadow:none;background:var(--white)}
.nav .btn{height:42px}

/* black chapters inset like workflows.io */
.band{border-radius:clamp(20px,3vw,36px);margin-inline:clamp(8px,1.4vw,18px)}
.foot{background:#060607;border-radius:clamp(20px,3vw,36px);margin:clamp(8px,1.4vw,18px)}

/* accents that were teal become lime-on-ink where they mark state */
.stat b em,.big sup{color:var(--ink);font-family:var(--sans);font-style:normal;font-weight:300}
.wbar i,.psteps .on i,.phases .on i{background:var(--ink)}
.models div.on,.src.hit{border-color:var(--ink);box-shadow:0 0 0 4px rgba(200,255,46,.55)}
.who button[aria-pressed="true"]{border-color:var(--ink);box-shadow:0 0 0 4px rgba(200,255,46,.55)}
.chip i{background:var(--ink);color:var(--lime)}
.bill .amt{font-size:clamp(42px,4.6vw,76px);font-weight:400}
.bill .amt small{display:block;margin:8px 0 0;font-size:13px}
.save b{font-weight:400}
@media (max-width:640px){.orbit{margin-top:28px}.otag{top:-9%}}
#chaos .chaos-ov p{line-height:1.15}
.band :focus-visible,.foot :focus-visible{outline-color:var(--lime)}
.foot h4{color:#8A8B8F}
.menu a{min-height:44px;display:flex;align-items:center}
.btn,.btn-primary,.btn-line{min-height:44px}
section[id]{scroll-margin-top:96px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}}