/* SAM for business — business.heysam.bot. Builds on style.css (same tokens). */

.bz-brand{display:flex;align-items:center;gap:12px}
.bz-tag{font-family:"Newsreader",Georgia,serif;font-size:20px;line-height:1;color:var(--ink-2);padding-top:6px;white-space:nowrap}
@media (max-width:560px){.bz-tag{font-size:16px;padding-top:4px}.bz .top{padding:18px 16px}.bz .nav .btn{display:none}.bz-brand{gap:8px}}

/* hero: the claim on one side, the request a business receives on the other */
.bz-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:center;padding-top:56px;padding-bottom:96px}
.bz-hero h1{font-size:clamp(40px,5.4vw,66px);line-height:1.03;max-width:13ch;margin:0 0 26px}
.bz-hero .lede{max-width:34em;margin:0 0 32px}
.bz-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
@media (max-width:900px){.bz-hero{grid-template-columns:1fr;gap:48px;padding-top:28px;padding-bottom:72px}.bz-hero h1{max-width:15ch}}

/* the chat: SAM's request in the business's WhatsApp, and the one tap */
.bz-chat{margin:0;background:var(--sea-wash);border-radius:28px;padding:22px 20px 24px;display:flex;flex-direction:column;gap:10px;max-width:420px;width:100%;justify-self:center}
.bz-req{align-self:flex-start;background:var(--paper);border-radius:18px;border-end-start-radius:6px;padding:14px 15px 0;width:92%;font-size:15.5px;line-height:1.45;box-shadow:0 1px 0 rgba(15,35,51,.06);overflow:hidden}
.bz-req b{display:block;font-size:16px;margin-bottom:6px}
.bz-req .rows{color:var(--ink-2)}
.bz-req .rows span{display:block}
.bz-req .rule{font-size:13.5px;color:var(--ink-2);margin:10px 0 12px}
.bz-buttons{display:flex;flex-direction:column;margin:0 -15px}
.bz-buttons span{display:block;text-align:center;padding:11px 0;border-top:1px solid var(--stone);color:var(--sea);font-weight:600;font-size:15px}
.bz-buttons .tap{animation:bz-tap .5s ease-out 1.6s both}
.bz-later{animation:bz-in .35s ease-out 2.1s both}
.bz-later2{animation:bz-in .35s ease-out 3.1s both}
@keyframes bz-tap{0%{background:transparent}40%{background:var(--sea-wash)}100%{background:transparent}}
@keyframes bz-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.bz-buttons .tap,.bz-later,.bz-later2{animation:none}}

/* sections */
.bz-section{padding-top:72px;padding-bottom:72px}
.bz-section h2,.bz-band h2{font-size:clamp(32px,4.4vw,48px);line-height:1.06;margin:0 0 36px;max-width:22ch;text-wrap:balance}
.bz-section h3,.bz-band h3{font-family:"Newsreader",Georgia,serif;font-weight:500;font-size:23px;line-height:1.2;letter-spacing:-0.005em;margin:0 0 8px}
.bz-section p,.bz-band p{color:var(--ink-2)}
.bz-narrow{max-width:40em;margin:-18px 0 40px}

/* how a request reaches you: four steps on a line */
.bz-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;counter-reset:step}
.bz-steps li{counter-increment:step;position:relative;padding-top:58px}
.bz-steps li::before{content:counter(step);position:absolute;top:0;inset-inline-start:0;width:38px;height:38px;border-radius:50%;background:var(--sea);color:var(--sea-ink);font:600 16px/38px "Hanken Grotesk",system-ui,sans-serif;text-align:center}
.bz-steps li::after{content:"";position:absolute;top:19px;inset-inline-start:48px;inset-inline-end:-24px;height:1.5px;background:var(--line)}
.bz-steps li:last-child::after{display:none}
.bz-steps p{font-size:16.5px;line-height:1.55}
@media (max-width:900px){.bz-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 32px}.bz-steps li:nth-child(2)::after{display:none}}
@media (max-width:560px){.bz-steps{grid-template-columns:1fr;gap:28px}.bz-steps li{padding-top:0;padding-inline-start:56px}.bz-steps li::after{display:none}}

/* the ladder: from nothing to a full connection, with what is live today */
.bz-band{background:var(--paper);padding:88px 0}
.bz-ladder{list-style:none;margin:0;padding:0;position:relative}
.bz-ladder::before{content:"";position:absolute;top:30px;bottom:30px;inset-inline-start:9px;width:2px;background:var(--line)}
.bz-ladder li{position:relative;display:grid;grid-template-columns:minmax(0,15em) minmax(0,1fr) auto;gap:8px 40px;align-items:start;padding:26px 0 26px 44px;border-top:1px solid var(--stone)}
.bz-ladder li:first-child{border-top:0}
.bz-ladder li::before{content:"";position:absolute;top:31px;inset-inline-start:2px;width:12px;height:12px;border-radius:50%;background:var(--paper);border:2px solid var(--line)}
.bz-ladder li.is-live::before{background:var(--sea);border-color:var(--sea)}
.bz-ladder li.is-early::before{background:var(--paper);border-color:var(--sea);box-shadow:inset 0 0 0 3px var(--paper),inset 0 0 0 6px var(--sea)}
.bz-ladder h3{margin:0}
.bz-effort{font-size:15px;margin-top:4px}
.bz-ladder li > p{margin:0;font-size:16.5px;line-height:1.55;max-width:40em}
.bz-status{justify-self:end;white-space:nowrap;font-size:13.5px;font-weight:600;padding:5px 11px;border-radius:999px;border:1.5px solid var(--line);color:var(--ink-2)}
.bz-status.live{background:var(--sea);border-color:var(--sea);color:var(--sea-ink)}
.bz-status.early{border-color:var(--sea);color:var(--sea)}
[dir="rtl"] .bz-ladder li{padding:26px 44px 26px 0}
@media (max-width:900px){.bz-ladder li{grid-template-columns:minmax(0,1fr) auto}.bz-ladder li > p{grid-column:1/-1;grid-row:2}}

/* the deal */
.bz-deal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 56px;max-width:980px}
.bz-deal p{font-size:16.5px;line-height:1.6;max-width:36em}
@media (max-width:700px){.bz-deal{grid-template-columns:1fr;gap:28px}}

/* questions */
.bz-faq{padding-top:24px}
.bz-faq details{max-width:820px}
.bz-faq details{border-top:1px solid var(--line);padding:4px 0}
.bz-faq details:last-of-type{border-bottom:1px solid var(--line)}
.bz-faq summary{cursor:pointer;list-style:none;padding:18px 36px 18px 0;font-weight:500;font-size:18px;position:relative}
[dir="rtl"] .bz-faq summary{padding:18px 0 18px 36px}
.bz-faq summary::-webkit-details-marker{display:none}
.bz-faq summary::after{content:"+";position:absolute;inset-inline-end:4px;top:13px;font-size:26px;font-weight:400;color:var(--sea);line-height:1.2}
.bz-faq details[open] summary::after{content:"−"}
.bz-faq details p{padding:0 0 20px;max-width:40em;font-size:16.5px}
.bz-faq summary:focus-visible{outline:3px solid var(--sea);outline-offset:3px;border-radius:6px}

/* the partner form */
.bz-join{padding-top:112px}
.bz-join h2{max-width:18ch}
.bz-form{max-width:620px}
.bz-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px;margin-top:16px}
.bz-pair:first-child{margin-top:0}
.invite .bz-pair label{margin-top:0}
.invite.bz-form > label{margin-top:16px}
.invite .bz-how label{margin:0;font-weight:400;display:inline-flex}
.invite select{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:12px 12px;font:16px/1.4 "Hanken Grotesk",system-ui,sans-serif;background:#fff;color:var(--ink);appearance:auto}
.invite select:focus-visible{outline:3px solid var(--sea);outline-offset:3px}
.bz-how{border:0;padding:0;margin:20px 0 4px;display:flex;flex-wrap:wrap;gap:8px}
.bz-how legend{font-weight:500;font-size:15px;padding:0;margin:0 0 10px;width:100%}
.bz-how label{margin:0;font-weight:400;display:inline-flex}
.bz-how input{position:absolute;opacity:0;width:1px;height:1px}
.bz-how span{display:inline-block;padding:8px 14px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font-size:15px;cursor:pointer;user-select:none}
.bz-how input:checked + span{background:var(--sea);border-color:var(--sea);color:var(--sea-ink)}
.bz-how input:focus-visible + span{outline:3px solid var(--sea);outline-offset:2px}
.bz-form .err{color:#A3341A}
.bz-form .fine a{color:var(--ink-2)}
[dir="rtl"] .bz-req{text-align:right}
[dir="rtl"] .bz-tag{font-family:"Noto Naskh Arabic","Newsreader",Georgia,serif;font-weight:600;padding-top:2px}
[dir="rtl"] .bz-section p,[dir="rtl"] .bz-band p{line-height:1.8}
@media (max-width:560px){.bz-pair{grid-template-columns:1fr}.bz-pair > div + div{margin-top:16px}.bz-section{padding-top:56px;padding-bottom:56px}.bz-band{padding:64px 0}}
@media (max-width:700px){.bz-join{padding-top:80px}}