/* C-SYS shared close (Oren, 27 Oct): one pattern on every page.
   Headline, one short value line, ONE button (action + price where relevant), one muted micro-line.
   Nothing else goes inside: no second link, no repeated price, no trust/proof strips, no cards.
   Self-contained so it renders the same on brand.css pages, legacy static pages and Next routes.
   Static markup:
   <section class="pib-close" aria-labelledby="ID" data-pib-close>
     <div class="pib-close__art" aria-hidden="true"><span><i class="a"></i><i class="b"></i><i class="c"></i><i class="d"></i></span> x4</div>
     <div class="pib-close__in">
       <h2 class="pib-close__h" id="ID">Headline <em>accent.</em></h2>
       <p class="pib-close__v">Value line.</p>
       <a class="pib-close__btn" href="...">Action, $price</a>
       <p class="pib-close__m">Micro-line.</p>
     </div>
   </section>
   Next routes: <PibClose /> from src/components/PibClose.tsx renders the same markup. */
.pib-close{position:relative;overflow:hidden;isolation:isolate;margin:0;background:radial-gradient(80% 120% at 50% 0%,#f4b14c,transparent 70%),var(--amber,#e89b2a);color:#0a0a0a;padding:clamp(72px,9vw,120px) 0;text-align:center;font-family:var(--sans,"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif)}
.pib-close .pib-close__in{position:relative;z-index:1;box-sizing:border-box;width:100%;max-width:1180px;margin:0 auto;padding:0 24px;display:grid;justify-items:center;gap:16px}
.pib-close .pib-close__h{margin:0;padding:0;color:#0a0a0a;background:none;-webkit-text-fill-color:currentColor;font-family:var(--display,"Inter Tight","Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif);font-weight:900;font-size:clamp(40px,5.4vw,76px);line-height:1;letter-spacing:-.04em;max-width:15ch;text-wrap:balance;text-transform:none}
.pib-close .pib-close__h em{font-style:italic;color:#0a0a0a;background:none;-webkit-text-fill-color:currentColor;font-weight:inherit;font-family:inherit;letter-spacing:inherit}
.pib-close .pib-close__v{margin:0;color:rgba(10,10,10,.78);font-size:clamp(17px,1.5vw,20px);line-height:1.5;max-width:52ch;text-wrap:pretty}
.pib-close .pib-close__btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;box-sizing:border-box;max-width:100%;min-height:54px;margin-top:12px;padding:14px 30px;border:0;border-radius:999px;background:#0a0a0a;color:#f5ecd6;-webkit-text-fill-color:#f5ecd6;font-family:var(--display,"Inter Tight","Inter",system-ui,sans-serif);font-weight:700;font-size:16px;line-height:1.25;letter-spacing:-.005em;text-align:center;text-decoration:none;white-space:normal;box-shadow:0 18px 36px -16px rgba(0,0,0,.6);transition:transform .18s ease,background-color .18s ease,box-shadow .18s ease;cursor:pointer}
.pib-close .pib-close__btn:hover{background:#1d1a17;color:#f5ecd6;transform:translateY(-1px);box-shadow:0 22px 40px -16px rgba(0,0,0,.65)}
.pib-close .pib-close__btn:focus-visible{outline:3px solid #0a0a0a;outline-offset:4px}
.pib-close .pib-close__btn svg{flex:none}
.pib-close .pib-close__m{margin:0;color:rgba(10,10,10,.66);font-size:14px;line-height:1.45;max-width:56ch}
.pib-close__art{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none;z-index:0;max-width:1320px;margin-inline:auto;padding-inline:24px}
.pib-close__art span{display:block;width:132px;opacity:.16;margin-top:-30px;transform:rotate(-8deg);border-radius:14px;overflow:hidden;background:#0a0a0a;box-shadow:0 20px 40px -20px rgba(0,0,0,.6)}
.pib-close__art span:nth-child(2){margin-top:150px;transform:rotate(6deg)}
.pib-close__art span:nth-child(3){margin-top:160px;transform:rotate(-6deg);margin-left:auto}
.pib-close__art span:nth-child(4){margin-top:-20px;transform:rotate(8deg)}
.pib-close__art i{display:block}
.pib-close__art img{display:block;width:100%;height:auto}
.pib-close__art .a{height:18px;background:#1a1a1a}
.pib-close__art .b{aspect-ratio:1/1;background:linear-gradient(150deg,#3a2a14,#111 60%,#0d1a33)}
.pib-close__art .c{height:8px;margin:10px 12px 0;border-radius:4px;background:#3a3a3a}
.pib-close__art .d{height:8px;margin:8px 40px 14px 12px;border-radius:4px;background:#2a2a2a}
@media (max-width:980px){.pib-close__art{display:none}}
@media (max-width:480px){.pib-close .pib-close__in{padding:0 20px}.pib-close .pib-close__btn{width:100%;padding:14px 22px}}
@media (prefers-reduced-motion:reduce){.pib-close .pib-close__btn{transition:none}.pib-close .pib-close__btn:hover{transform:none}}
/* Form variant (/learn): the close's one button is the form's submit. <div class="pib-close__form"> wraps the form. */
.pib-close .pib-close__form{width:100%;max-width:540px;margin-top:12px}
.pib-close .pib-close__form form{margin:0}
.pib-close .pib-close__form input[type=email]{box-sizing:border-box;min-height:54px;padding:0 20px;border:1px solid rgba(10,10,10,.28);border-radius:999px;background:rgba(255,255,255,.72);color:#0a0a0a;font:inherit;font-size:16px}
.pib-close .pib-close__form input[type=email]::placeholder{color:rgba(10,10,10,.55)}
.pib-close .pib-close__form input[type=email]:focus-visible{outline:3px solid #0a0a0a;outline-offset:2px}
.pib-close .pib-close__form button{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:14px 28px;border:0;border-radius:999px;background:#0a0a0a;color:#f5ecd6;-webkit-text-fill-color:#f5ecd6;font-family:var(--display,"Inter Tight","Inter",system-ui,sans-serif);font-weight:700;font-size:16px;cursor:pointer;box-shadow:none}
.pib-close .pib-close__form button:hover{background:#1d1a17}
.pib-close .pib-close__form button:focus-visible{outline:3px solid #0a0a0a;outline-offset:4px}
.pib-close .pib-close__form [role=status],.pib-close .pib-close__form p{color:#0a0a0a;text-align:center}
.pib-close .pib-close__form [role=status] b{color:#0a0a0a}