/* /buyers — the customer portal page for shoppers.
   Hand-written on purpose: the marketing Tailwind file is precompiled from a
   fixed page list, so new utility classes would not exist here. */
.by {
    --by-ink:#0f172a; --by-ink2:#334155; --by-muted:#5b6677; --by-line:#e7e9ee; --by-soft:#f6f8fa; --by-card:#ffffff;
    --by-brand:#08a05a; --by-brand2:#0bbf6c; --by-tint:#e9f7ef;
    --by-shadow:0 1px 2px rgba(10,14,26,.04), 0 24px 60px -36px rgba(10,14,26,.35);
    color:var(--by-ink);
}
html.dark .by, [data-theme="dark"] .by {
    --by-ink:#eef2f8; --by-ink2:#c9d2df; --by-muted:#9aa6b8; --by-line:rgba(255,255,255,.10); --by-soft:rgba(255,255,255,.03); --by-card:#0f1420;
    --by-brand:#16c47c; --by-brand2:#34d399; --by-tint:rgba(22,196,124,.12);
    --by-shadow:0 1px 2px rgba(0,0,0,.4), 0 24px 60px -36px rgba(0,0,0,.8);
}
.by a { text-decoration:none; }
.by-wrap { max-width:1200px; margin:0 auto; padding:0 20px; }
.by-sec { padding:88px 20px; }
.by h1, .by h2, .by h3 { letter-spacing:-.02em; }

/* Buttons */
.by-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 22px; border-radius:12px; font-weight:700; font-size:15px;
    color:#fff; background:var(--by-brand); border:1px solid var(--by-brand); transition:transform .15s, box-shadow .15s, background .15s; }
.by-btn:hover { transform:translateY(-1px); box-shadow:0 12px 26px -14px rgba(8,160,90,.7); color:#fff; }
.by-btn.ghost { background:transparent; color:var(--by-ink); border-color:var(--by-line); }
.by-btn.ghost:hover { border-color:var(--by-brand); color:var(--by-brand); box-shadow:none; }
.by-ctas { display:flex; flex-wrap:wrap; gap:12px; }

/* Hero */
.by-hero { position:relative; overflow:hidden; padding:72px 0 56px; }
.by-hero::before { content:""; position:absolute; inset:-260px -10% auto; height:640px; pointer-events:none;
    background:radial-gradient(60% 55% at 70% 40%, rgba(8,160,90,.16), transparent 70%), radial-gradient(40% 40% at 15% 20%, rgba(52,211,153,.12), transparent 70%); }
.by-hero-grid { position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:56px; align-items:center; }
.by-badge { display:inline-flex; padding:6px 13px; border-radius:999px; font-size:12px; font-weight:700; letter-spacing:.02em;
    color:var(--by-brand); background:var(--by-tint); border:1px solid rgba(8,160,90,.3); }
.by-hero h1 { margin:22px 0 0; font-size:clamp(36px, 5vw, 58px); line-height:1.05; font-weight:800; }
.by-lead { margin:20px 0 28px; font-size:18px; line-height:1.65; color:var(--by-muted); max-width:560px; }
.by-note { display:flex; align-items:center; gap:8px; margin:18px 0 0; font-size:14px; color:var(--by-muted); }
.by-note svg, .by-list svg { width:18px; height:18px; flex:0 0 auto; fill:none; stroke:var(--by-brand); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.by-hero-shot { position:relative; }
.by-float { position:absolute; left:-28px; bottom:-26px; display:flex; flex-direction:column; gap:2px; padding:16px 20px; border-radius:16px;
    background:var(--by-card); border:1px solid var(--by-line); box-shadow:var(--by-shadow); animation:by-bob 6s ease-in-out infinite; }
.by-float small { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--by-muted); }
.by-float strong { font-size:28px; font-weight:800; color:var(--by-brand); line-height:1.1; }
.by-float span { font-size:12.5px; color:var(--by-muted); }
@keyframes by-bob { 50% { transform:translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .by-float { animation:none; } }

/* Framed screenshots */
.by-frame { position:relative; border-radius:18px; overflow:hidden; background:var(--by-card); border:1px solid var(--by-line); box-shadow:var(--by-shadow); }
.by-frame img { display:block; width:100%; height:auto; }
.by-frame.narrow { max-width:440px; margin:0 auto; }
.by-frame-bar { display:flex; align-items:center; gap:6px; padding:11px 14px; border-bottom:1px solid var(--by-line); background:var(--by-soft); }
.by-frame-bar i { width:10px; height:10px; border-radius:50%; background:#e5e7eb; }
.by-frame-bar i:nth-child(1) { background:#ff5f57; } .by-frame-bar i:nth-child(2) { background:#febc2e; } .by-frame-bar i:nth-child(3) { background:#28c840; }
.by-frame-bar span { margin-left:10px; font-size:12px; color:var(--by-muted); padding:3px 12px; border-radius:7px; background:var(--by-card); border:1px solid var(--by-line); }

/* Stats */
.by-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; padding:34px 0; border-top:1px solid var(--by-line); border-bottom:1px solid var(--by-line); text-align:center; }
.by-stats strong { display:block; font-size:34px; font-weight:800; line-height:1.1; }
.by-stats span { display:block; margin-top:6px; font-size:14px; color:var(--by-muted); }

/* Section heads + features */
.by-head { max-width:700px; margin:0 auto 48px; text-align:center; }
.by-head.left { text-align:left; margin:0 0 28px; }
.by-head h2, .by-row h2, .by-merch h2, .by-privacy h2 { margin:0; font-size:clamp(28px, 3.4vw, 40px); font-weight:800; line-height:1.15; }
.by-head p { margin:14px 0 0; font-size:17px; line-height:1.65; color:var(--by-muted); }
.by-feats { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.by-feat { padding:26px; border-radius:18px; background:var(--by-card); border:1px solid var(--by-line); transition:border-color .15s, transform .15s; }
.by-feat:hover { border-color:rgba(8,160,90,.45); transform:translateY(-2px); }
.by-feat h3 { margin:18px 0 8px; font-size:18px; font-weight:700; }
.by-feat p { margin:0; font-size:14.5px; line-height:1.65; color:var(--by-muted); }
.by-ico { display:grid; place-items:center; width:46px; height:46px; border-radius:13px; color:var(--by-brand); background:var(--by-tint); }
.by-ico svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.by-ico.big { width:60px; height:60px; border-radius:16px; flex:0 0 auto; }
.by-ico.big svg { width:28px; height:28px; }

/* Showcase rows */
.by-row { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:64px; align-items:center; padding-top:64px; padding-bottom:64px; }
.by-row.flip .by-row-copy { order:2; }
.by-row:not(.wide), .by-row.wide.flip { grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); }
.by-row:not(.wide).flip { grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); }
.by-eyebrow { display:inline-block; margin-bottom:12px; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.09em; color:var(--by-brand); }
.by-row-copy p { margin:16px 0 0; font-size:16.5px; line-height:1.7; color:var(--by-muted); }
.by-list { list-style:none; margin:22px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; }
.by-list li { display:flex; gap:10px; align-items:flex-start; font-size:15px; font-weight:600; color:var(--by-ink2); }
.by-row:not(.wide) .by-row-shot .by-frame { max-height:560px; }
.by-row:not(.wide) .by-row-shot .by-frame img { object-fit:cover; object-position:top; max-height:560px; }

/* How it works */
.by-how { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.8fr); gap:64px; align-items:center; }
.by-steps { list-style:none; margin:0 0 30px; padding:0; display:flex; flex-direction:column; gap:22px; }
.by-steps li { display:flex; gap:16px; align-items:flex-start; }
.by-steps li > span { flex:0 0 auto; width:40px; height:40px; border-radius:12px; display:grid; place-items:center; font-weight:800; color:#fff;
    background:linear-gradient(135deg, var(--by-brand), var(--by-brand2)); }
.by-steps h3 { margin:2px 0 4px; font-size:18px; font-weight:700; }
.by-steps p { margin:0; font-size:15px; line-height:1.6; color:var(--by-muted); }

/* Privacy + merchants */
.by-privacy { display:flex; gap:24px; align-items:flex-start; padding:34px; border-radius:22px; background:var(--by-soft); border:1px solid var(--by-line); }
.by-privacy h2 { font-size:clamp(22px, 2.4vw, 28px); }
.by-privacy p { margin:10px 0 0; font-size:16px; line-height:1.7; color:var(--by-muted); max-width:820px; }
.by-merch { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:36px; align-items:center; padding:44px; border-radius:24px;
    background:linear-gradient(135deg, var(--by-tint), transparent 70%), var(--by-card); border:1px solid rgba(8,160,90,.28); }
.by-merch p { margin:14px 0 0; font-size:16.5px; line-height:1.7; color:var(--by-muted); max-width:640px; }

/* FAQ */
.by-faq { max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.by-faq details { border:1px solid var(--by-line); border-radius:16px; background:var(--by-card); padding:4px 22px; transition:border-color .15s; }
.by-faq details[open] { border-color:rgba(8,160,90,.4); }
.by-faq summary { cursor:pointer; list-style:none; padding:16px 0; font-size:16.5px; font-weight:700; display:flex; justify-content:space-between; gap:16px; }
.by-faq summary::-webkit-details-marker { display:none; }
.by-faq summary::after { content:"+"; font-size:22px; line-height:1; color:var(--by-brand); transition:transform .2s; }
.by-faq details[open] summary::after { transform:rotate(45deg); }
.by-faq p { margin:0 0 18px; font-size:15.5px; line-height:1.7; color:var(--by-muted); }

@media (max-width:980px) {
    .by-hero-grid, .by-row, .by-row:not(.wide), .by-row.wide.flip, .by-row:not(.wide).flip, .by-how { grid-template-columns:1fr; gap:40px; }
    .by-row.flip .by-row-copy { order:0; }
    .by-feats { grid-template-columns:repeat(2,1fr); }
    .by-merch { grid-template-columns:1fr; }
    .by-float { left:12px; bottom:-20px; }
}
@media (max-width:640px) {
    .by-sec { padding:64px 16px; }
    .by-wrap { padding-left:16px; padding-right:16px; }
    .by-hero { padding:44px 0 48px; }
    .by-feats { grid-template-columns:1fr; }
    .by-stats { grid-template-columns:1fr 1fr; }
    .by-row { padding-top:44px; padding-bottom:44px; }
    .by-privacy { flex-direction:column; padding:24px; }
    .by-merch { padding:26px; }
    .by-frame-bar span { display:none; }
    .by-float { position:static; margin-top:14px; animation:none; }
    .by-ctas .by-btn { width:100%; }
}