/* Biply Market: the Studio design on every public page except the buyer and admin dashboards.
   Loaded after styles.css, extra.css and the page stylesheets. It does three things:
   1) swaps the colour, type and shape tokens the older stylesheets read for the Studio ones,
   2) restyles the shared components (buttons, cards, chips, tabs, forms, the buy box) to match the homepage,
   3) adds the soft gradient backdrop behind every page. */

:root {
  --bg: #f6f5fb; --card: #fff; --ink: #14131c; --ink-2: #52506a; --ink2: #52506a; --muted: #8c89a3; --soft: #8c89a3;
  --panel: #f3f1fb; --panel-2: #ebe8f7; --line: rgba(20, 19, 28, .08); --white: #fff;
  --acc: #5b47ff; --acc2: #ff7a59; --accent: #5b47ff; --accent-ink: #4a3bd9; --accent-soft: #ece9ff; --accent-glow: #a79dff;
  --p1: #d9d2ff; --p2: #ffd9c7; --p3: #c8f2e0; --p4: #cfe6ff;
  --shadow: 0 24px 70px rgba(60, 40, 140, .16);
  --f: "Onest", "Segoe UI", system-ui, sans-serif; --m: "Fragment Mono", ui-monospace, Consolas, monospace;
  --font: var(--f); --mono: var(--m); --body: var(--f); --display: var(--f);
  --radius-m: 24px; --radius-l: 32px; --radius-xl: 40px;
  --surface: #fff; --surface2: #efedf8; --mute: #8c89a3;
}

html { scroll-behavior: smooth; }
body {
  font-family: var(--f);
  background:
    radial-gradient(900px 520px at 6% -6%, rgba(217, 210, 255, .8), transparent 70%),
    radial-gradient(820px 480px at 98% 0%, rgba(255, 217, 199, .75), transparent 70%),
    radial-gradient(700px 440px at 42% 14%, rgba(200, 242, 224, .5), transparent 70%),
    var(--bg);
  background-repeat: no-repeat;
}
::selection { background: var(--p1); }

/* type: heavy, tight headings like the homepage */
h1, h2, h3, .h-xl, .h-l, .h-m, .pd-title h1, .card-name { font-family: var(--f); font-weight: 800; letter-spacing: -.045em; text-wrap: balance; }
.h-xl, .pd-title h1 { line-height: .98; }
.eyebrow { font: 400 12px var(--m); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.eyebrow.on-dark { color: var(--accent-glow); }
.lead { color: var(--ink-2); letter-spacing: -.01em; }

/* buttons: the dark pill, the accent pill, the outlined pill */
.btn { font-family: var(--f); font-weight: 600; }
.btn-ink { background: var(--ink); color: var(--bg); }
.btn-ink:hover { background: var(--ink); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(20, 19, 28, .25); }
.btn-accent { background: var(--acc); color: #fff; box-shadow: 0 14px 30px -12px rgba(91, 71, 255, .65); }
.btn-accent:hover { background: #4d39f0; transform: translateY(-2px); }
.btn-ghost { background: var(--card); color: var(--ink); border: 0; box-shadow: inset 0 0 0 1.5px var(--line); }
.btn-ghost:hover { background: var(--card); box-shadow: inset 0 0 0 1.5px rgba(20, 19, 28, .22); transform: translateY(-2px); }

/* chips and tags */
.chip { background: var(--card); border: 0; box-shadow: inset 0 0 0 1px var(--line); font-weight: 600; }
.chip:hover { box-shadow: inset 0 0 0 1px rgba(20, 19, 28, .25); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); box-shadow: none; }
.tag { background: var(--card); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); font-weight: 500; }
.tag.main { background: var(--accent-soft); color: var(--accent-ink); box-shadow: none; font-weight: 600; }
.crumbs { font-family: var(--f); }

/* storefront cards (category pages and shelves) */
.card { border-radius: var(--radius-l); }
.card:hover { box-shadow: var(--shadow); }
.card-name { font-weight: 800; }
.card-go { font-weight: 600; }
.card-soon { border-color: var(--line); background: rgba(255, 255, 255, .5); }

/* the product page */
.pd-stage { background: linear-gradient(150deg, var(--p1), var(--p2) 55%, var(--p3)); box-shadow: var(--shadow); border-radius: 40px; }
.thumb { background: var(--card); box-shadow: inset 0 0 0 1px var(--line); border-color: transparent; border-radius: 20px; }
.thumb.on { background: var(--ink); border-color: var(--accent); }
.tabs { border-bottom-color: var(--line); gap: 28px; }
.tabs .on { border-bottom-color: var(--acc); color: var(--ink); }
.buy { border: 0; box-shadow: var(--shadow), inset 0 0 0 1px var(--line); border-radius: 36px; }
.buy-price b { font-weight: 800; }
.opt { border-color: var(--line); border-radius: 20px; }
.opt:has(input:checked) { border-color: var(--acc); background: var(--accent-soft); }
.dark-band { border-radius: 40px; }
.section-head .h-l { font-weight: 800; }

/* sign in, register, checkout, legal (the .pg pages) */
.pg {
  --bg: transparent; --surface: #fff; --surface2: #efedf8; --line: rgba(20, 19, 28, .08); --ink: #14131c; --mute: #8c89a3;
  --accent: #5b47ff; --accent-ink: #fff; --accent-soft: #ece9ff;
  --display: var(--f); --body: var(--f); --shadow: 0 24px 70px rgba(60, 40, 140, .16);
  padding-top: 64px;
}
.pg h1, .pg h2, .pg h3 { font-weight: 800; letter-spacing: -.045em; }
.pg .card, .pg .pcard { border: 0; border-radius: 36px; box-shadow: var(--shadow), inset 0 0 0 1px var(--line); }
.pg .card.pad { padding: clamp(28px, 4vw, 44px); }
.pg .btn { font-weight: 600; border: 0; background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.pg .btn:hover { background: var(--card); box-shadow: inset 0 0 0 1.5px rgba(20, 19, 28, .22); transform: translateY(-2px); }
.pg .btn.pri { background: var(--acc); color: #fff; box-shadow: 0 14px 30px -12px rgba(91, 71, 255, .65); }
.pg .btn.pri:hover { background: #4d39f0; box-shadow: 0 14px 30px -12px rgba(91, 71, 255, .65); }
.pg .btn.dark { background: var(--ink); color: var(--bg); box-shadow: none; }
.pg .btn.dark:hover { background: var(--ink); box-shadow: 0 12px 30px rgba(20, 19, 28, .25); }
.pg .in, .pg select.in, .pg textarea.in { border: 0; background: var(--bg-input, #f6f5fb); box-shadow: inset 0 0 0 1px var(--line); border-radius: 16px; height: 52px; }
.pg textarea.in { height: auto; }
.pg .in:hover { box-shadow: inset 0 0 0 1px rgba(20, 19, 28, .25); }
.pg .in:focus { background: #fff; box-shadow: inset 0 0 0 2px var(--acc), 0 0 0 5px rgba(91, 71, 255, .14); }
.pg .narrow { max-width: 500px; }
.pg .narrow h1 { font-size: clamp(34px, 4.4vw, 48px); }
.pg .legal h1 { font-weight: 800; }
.pg .flash { border-radius: 20px; }
.pg th { font: 400 12px var(--m); text-transform: uppercase; letter-spacing: .05em; }

/* the buyer account (it uses the .pg pages): the same gradient mark and progress bars as the rest of the design */
.pg .av, .pg .logo i { background: linear-gradient(135deg, var(--acc), var(--acc2)); color: #fff; box-shadow: none; }
.pg .bar i b { background: linear-gradient(90deg, var(--acc), var(--acc2)); }
.pg .lic .ph { background: linear-gradient(135deg, var(--acc), var(--acc2)); }

/* docs, blog, case studies: the same hero shapes, now in the Studio type */
.dc-hero, .bl-head h1, .cs-hero { font-family: var(--f); }
.dc-search, .dc-card, .dc-start { border-radius: 28px; }


/* the Agency quote form */
.ag-form input, .ag-form select, .ag-form textarea { border: 0; background: #f6f5fb; box-shadow: inset 0 0 0 1px var(--line); border-radius: 16px; padding: 14px 16px; }
.ag-form input:focus, .ag-form select:focus, .ag-form textarea:focus { background: #fff; box-shadow: inset 0 0 0 2px var(--acc), 0 0 0 5px rgba(91, 71, 255, .14); }

@media (max-width: 980px) {
  .pg { padding-top: 40px; }
}