/* Early access campaign additions. Layered on the live styles.css (jeanpaulcozzatti/bii · brand/web) — reuses its variables. */
:root{--cyan:#00a3c4;--field:rgba(26,26,26,.32)}
@media (min-width:760px){.foot-inner{grid-template-columns:1.4fr 1fr 1fr 1.2fr}}

.lbl-mono{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
.blk{margin-top:clamp(64px,10vh,112px)}
.blk-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px 24px;padding-bottom:14px;border-bottom:1px solid var(--rule);margin-bottom:clamp(24px,4vh,40px)}
.blk-head h3{font-family:var(--serif);font-weight:500;font-size:clamp(20px,2.2vw,26px);letter-spacing:-.012em;color:var(--ink)}

/* map */
.map-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vw,56px)}
@media (min-width:900px){.map-grid{grid-template-columns:minmax(0,2fr) minmax(0,1fr);align-items:start}}
.map{position:relative;aspect-ratio:16/10;background:var(--paper);border:1px solid var(--rule)}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.map-ph{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:20px;background:repeating-linear-gradient(135deg,var(--rule) 0 1px,transparent 1px 12px)}
.map-ph .lbl-mono:first-child{color:var(--brand)}
.callout{display:flex;flex-direction:column;gap:12px}
.live{display:flex;align-items:center;gap:10px}
.live i{position:relative;width:10px;height:10px;border-radius:50%;background:var(--cyan)}
.live i::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--cyan);animation:ping 2s cubic-bezier(.4,0,.2,1) infinite}
@keyframes ping{0%{transform:scale(1);opacity:.6}80%,100%{transform:scale(2.6);opacity:0}}
.live .lbl-mono{color:var(--ink)}
.callout h4{font-family:var(--serif);font-weight:500;font-size:28px;letter-spacing:-.014em;line-height:1.05;color:var(--ink)}
.callout p{font-family:var(--serif);font-size:18px;line-height:1.55;color:var(--ink-soft)}
.callout .note{font-family:var(--sans);font-size:14px;color:var(--grey);border-top:1px solid var(--rule);padding-top:14px;margin-top:8px}
.callout .demo-link{margin-top:4px;align-self:flex-start}

.what-cta{margin-top:clamp(56px,9vh,96px);display:flex;flex-direction:column;align-items:flex-start;gap:16px}

/* early access */
.ea-lede{font-family:var(--serif);font-size:clamp(18px,1.6vw,22px);line-height:1.5;color:var(--ink-soft);max-width:52ch;text-wrap:pretty}
.ea-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(48px,7vw,104px);margin-top:clamp(40px,6vh,72px)}
@media (min-width:900px){.ea-grid{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:start}}
.ea-form{display:grid;grid-template-columns:minmax(0,1fr);gap:22px 20px}
@media (min-width:600px){.ea-form{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.field{display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:1/-1}
.field input,.field textarea{font-family:var(--sans);font-size:16px;color:var(--ink);background:var(--paper);border:1px solid var(--field);border-radius:0;padding:12px 14px;width:100%;transition:border-color .2s}
.field textarea{min-height:132px;resize:vertical;line-height:1.55}
.field input:focus,.field textarea:focus{outline:2px solid var(--brand);outline-offset:-1px;border-color:var(--brand)}
.form-foot{grid-column:1/-1;display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:6px}
.form-foot p{font-size:14px;color:var(--grey)}
.btn{display:inline-flex;align-items:baseline;gap:8px;background:var(--brand);color:#fff;font-family:var(--sans);font-size:15px;font-weight:500;padding:14px 22px;border:0;border-radius:0;cursor:pointer;transition:background .2s}
.btn:hover{background:var(--deep)}
.btn span{transition:transform .2s}
.btn:hover span{transform:translateX(3px)}
.btn:disabled{opacity:.5;cursor:default}
.sent{grid-column:1/-1;display:none;font-family:var(--serif);font-size:19px;color:var(--ink)}
.ea-form.is-sent .sent{display:block}
.steps{list-style:none;border-top:1px solid var(--rule)}
.steps li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:8px;padding:20px 0;border-bottom:1px solid var(--rule);align-items:baseline}
.steps .n{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.12em;color:var(--brand)}
.steps p{font-family:var(--serif);font-size:17px;line-height:1.55;color:var(--ink-soft)}
.next .lbl-mono{display:block;margin-bottom:14px}

/* artboard mode (?only=<id>) */
body.only main section{display:none}
body.only main section.on{display:block}
body.only .nav{position:static}
body.only footer{display:none}
body.only.show-foot footer{display:block}
@media (prefers-reduced-motion:reduce){.live i::after{animation:none}}