/* =====================================================================
   Bass to Chords page. Loaded after site.css, only on this page.

   Art direction: Matisse's late paper cut-outs (Jazz, The Snail, Oceania,
   Icarus), via the extension's own UI skins. Flat gouache colour, hand-cut
   edges, shapes cropped by the frame. No gradients, no shadows, no glow:
   paper doesn't have them.

   The page follows the site's light/dark switch:
     light = the cream skin (paper)     dark = the charcoal skin
   and the "three takes" band always wears the red skin, like a Jazz plate.
   ===================================================================== */

body.b2c {
  /* the extension's palette */
  --m-coral:  #E4603B;
  --m-blue:   #2F6ED0;
  --m-deep:   #1F3E93;
  --m-teal:   #137868;
  --m-yellow: #F1BD21;
  --m-red:    #9B2B1B;
  --m-cream:  #F0E4CF;

  /* remap the site tokens so the header and footer join in */
  --bg: #F3EBDC;
  --bg-raised: #FAF5EB;
  --fg: #1D1A17;
  --mute: #6F665C;
  --rule: rgba(29, 26, 23, 0.13);
  --rule-strong: rgba(29, 26, 23, 0.26);
  --link: #C94E2B;
  --slash: var(--m-coral);

  --b-accent: var(--m-coral);
  --b-on-accent: #FFF8EE;
  --b-field: #FBF7EF;
  --b-field-line: #E3D6C2;
  --b-font: 'Jost', 'Futura', 'Century Gothic', var(--sans);
}
:root[data-theme="dark"] body.b2c {
  --m-teal: #1E9C86;
  --m-cream: #E9DDC8;
  --bg: #1B1B1E;
  --bg-raised: #232327;
  --fg: #F2EDE5;
  --mute: #9B968F;
  --rule: rgba(242, 237, 229, 0.11);
  --rule-strong: rgba(242, 237, 229, 0.24);
  --link: #F07550;
  --b-accent: #E9643F;
  --b-field: #26262A;
  --b-field-line: #34343A;
}

/* header bits that were lemon elsewhere become the extension's coral */
body.b2c .top__nav a[aria-current="page"] { background: var(--b-accent); color: var(--b-on-accent); }
body.b2c ::selection { background: var(--m-yellow); color: #1D1A17; }

/* ---------- cut-paper paint ---------- */
.m-coral  { fill: var(--m-coral); }
.m-blue   { fill: var(--m-blue); }
.m-deep   { fill: var(--m-deep); }
.m-teal   { fill: var(--m-teal); }
.m-yellow { fill: var(--m-yellow); }
.m-red    { fill: var(--m-red); }
.m-cream  { fill: var(--m-cream); }
.m-soft   { opacity: 0.16; }
:root[data-theme="dark"] .m-soft { opacity: 0.22; }

/* ---------- type ---------- */
.b2c main { font-family: var(--b-font); }
.b-kicker {
  display: inline-block;
  font: 500 13px/1 var(--b-font);
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--b-accent); text-decoration: none;
  margin-bottom: 18px;
}
.b-label {
  font: 500 12.5px/1 var(--b-font);
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 28px;
}
.b-note { font: 400 14px/1.5 var(--b-font); color: var(--mute); }
.b-caption { font: 400 13.5px/1.5 var(--b-font); color: var(--mute); margin-top: 10px; }
.b-panelcopy > p.b-big, .b-big { color: var(--fg); font: 500 clamp(28px, 3.4vw, 40px)/1.1 var(--b-font); letter-spacing: -0.01em; margin-bottom: 14px; }

/* ---------- buttons: the extension's pills ---------- */
.b-btns { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 18px; }
.b-btn {
  display: inline-flex; align-items: center;
  font: 500 16px/1 var(--b-font); letter-spacing: 0.02em;
  padding: 14px 26px; border-radius: 999px;
  border: 1.5px solid var(--rule-strong); background: transparent; color: var(--fg);
  text-decoration: none; cursor: pointer;
  transition: border-color 140ms var(--ease), transform 140ms var(--ease);
}
.b-btn:hover { color: var(--fg); border-color: var(--fg); transform: translateY(-1px); }
.b-btn--solid { background: var(--b-accent); border-color: var(--b-accent); color: var(--b-on-accent); }
.b-btn--solid:hover { color: var(--b-on-accent); border-color: var(--b-accent); outline: 2px solid var(--b-accent); outline-offset: 3px; }

/* ---------- hero ---------- */
.b-hero { position: relative; overflow: hidden; padding: clamp(40px, 7vw, 96px) 0 clamp(40px, 6vw, 72px); }
.b-hero__grid { position: relative; display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.b-hero h1 {
  font: 500 clamp(36px, 5vw, 62px)/1.04 var(--b-font);
  letter-spacing: -0.015em;
  max-width: 14ch;
}
.b-lede { font: 400 clamp(18px, 1.8vw, 21px)/1.45 var(--b-font); color: var(--mute); margin-top: 18px; max-width: 32ch; }
.b-hero__art { margin: 0; }
.roll { width: 100%; height: auto; display: block; overflow: visible; }
.roll__label { font: 500 17px var(--b-font); letter-spacing: 0.1em; fill: var(--mute); }
/* the frond behind the headline, cropped by the page edge */
.deco { position: absolute; pointer-events: none; }
.deco--hero { top: -40px; right: -90px; width: min(34vw, 380px); height: auto; opacity: 0.95; }
.b-hero__copy { position: relative; z-index: 1; }
@media (max-width: 860px) {
  .b-hero__grid { grid-template-columns: 1fr; }
  .deco--hero { width: 200px; right: -70px; top: -30px; }
}

/* ---------- sections ---------- */
.b-sec { padding: clamp(48px, 7vw, 88px) 0; }
.b-sec + .b-sec { padding-top: 0; }

/* steps: pill fields, like the panel's inputs */
.b-steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.b-steps li {
  background: var(--b-field); border: 1.5px solid var(--b-field-line);
  border-radius: 22px; padding: 22px 22px 24px;
  font: 400 16.5px/1.45 var(--b-font);
}
.b-steps li span {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--b-accent); color: var(--b-on-accent);
  font: 500 15px/1 var(--b-font); margin-bottom: 14px;
}
.b-steps li b { font-weight: 600; }
@media (max-width: 900px) { .b-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .b-steps { grid-template-columns: 1fr; } }

/* ---------- the panel, drawn (static, not the tool) ---------- */
.b-panelgrid { display: grid; grid-template-columns: minmax(300px, 440px) 1fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.b-panelfig { margin: 0; }
.b-panel {
  --p-bg: var(--bg-raised); --p-fg: var(--fg); --p-mute: var(--mute);
  --p-field: var(--b-field); --p-line: var(--b-field-line); --p-accent: var(--b-accent);
  position: relative; overflow: hidden;
  background: var(--p-bg); color: var(--p-fg);
  border: 1.5px solid var(--p-line); border-radius: 18px;
  padding: 28px 26px 24px;
  font-family: var(--b-font);
  user-select: none;
}
/* the blue cut-out peeking into the panel corner, as in the UI */
.b-panel::before {
  content: ''; position: absolute; top: -40px; right: -46px; width: 150px; height: 170px;
  background: var(--m-blue);
  border-radius: 58% 42% 55% 45% / 46% 60% 40% 54%;
  transform: rotate(-18deg);
}
.b-panel::after {
  content: ''; position: absolute; bottom: -60px; right: -30px; width: 170px; height: 130px;
  background: var(--m-teal);
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}
.b-panel > * { position: relative; z-index: 1; }
.b-panel__kicker { font: 500 11.5px/1 var(--b-font); letter-spacing: 0.3em; text-transform: uppercase; color: var(--p-accent); }
.b-panel__key { font: 500 38px/1.1 var(--b-font); margin: 12px 0 4px; }
.b-panel__from { font-size: 14px; color: var(--p-mute); margin-bottom: 18px; }
.b-panel__label { display: block; font: 500 10.5px/1.2 var(--b-font); letter-spacing: 0.26em; text-transform: uppercase; color: var(--p-mute); margin: 14px 0 8px; }
.b-panel__desc { font-size: 13.5px; color: var(--p-mute); margin-top: 8px; line-height: 1.45; }
.b-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1.5px solid var(--p-line); border-radius: 999px; overflow: hidden; background: var(--p-field); }
.b-seg span { text-align: center; font-size: 13.5px; padding: 8px 4px; white-space: nowrap; }
.b-seg .is-on { background: var(--p-accent); color: var(--b-on-accent); }
.b-row { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 10px; margin-top: 8px; }
.b-row .b-panel__label { margin: 0; }
.b-field { background: var(--p-field); border: 1.5px solid var(--p-line); border-radius: 999px; padding: 8px 14px; font-size: 14px; }
.b-slider { display: grid; grid-template-columns: 1fr auto; align-items: center; margin-top: 4px; }
.b-slider__val { font-size: 12px; color: var(--p-accent); }
.b-slider__track {
  grid-column: 1 / -1; position: relative; height: 3px; border-radius: 3px; margin: 8px 0 4px;
  background: var(--p-line);
}
.b-slider__track::after {
  content: ''; position: absolute; top: 50%; left: calc(var(--v) * 100%);
  width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; border-radius: 50%; background: var(--p-accent);
}
.b-panel__foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.b-pill { font-size: 15px; padding: 10px 22px; border-radius: 999px; border: 1.5px solid var(--p-line); background: var(--p-bg); }
.b-pill--solid { background: var(--p-accent); border-color: var(--p-accent); color: var(--b-on-accent); }

.b-panelcopy { padding-top: 8px; }
.b-panelcopy > p { font-size: 17px; line-height: 1.6; color: var(--mute); max-width: 52ch; }
.b-dl { margin-top: 28px; display: grid; gap: 0; }
.b-dl div { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 16px 0; border-top: 1.5px solid var(--rule); }
.b-dl dt { font: 500 11.5px/1.5 var(--b-font); letter-spacing: 0.22em; text-transform: uppercase; color: var(--mute); padding-top: 3px; }
.b-dl dd { font-size: 16px; line-height: 1.55; }
@media (max-width: 860px) {
  .b-panelgrid { grid-template-columns: 1fr; }
  .b-panelfig { max-width: 440px; }
  .b-dl div { grid-template-columns: 1fr; gap: 4px; }
}

/* ---------- three takes: the red skin, full bleed ---------- */
.b-band {
  position: relative; overflow: hidden;
  background: var(--m-red); color: #F7E9DA;
  padding: clamp(56px, 8vw, 104px) 0;
  --mute: rgba(247, 233, 218, 0.72);
}
.deco--band { inset: 0; width: 100%; height: 100%; }
.b-band .wrap { position: relative; }
.b-band .b-label { color: var(--m-yellow); }
.b-takes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.b-take {
  background: rgba(255, 255, 255, 0.07);
  border: 1.5px solid rgba(255, 255, 255, 0.16);
  border-radius: 22px; padding: 26px 24px 28px;
}
.take__icon { width: 96px; height: 96px; margin: -8px 0 6px -8px; }
.b-take h3 { font: 500 26px/1.1 var(--b-font); margin-bottom: 10px; display: flex; align-items: baseline; gap: 10px; }
.b-take h3 span {
  display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--m-yellow); color: var(--m-red); font-size: 18px;
}
.b-take p { font-size: 16px; line-height: 1.55; color: var(--mute); }
@media (max-width: 860px) { .b-takes { grid-template-columns: 1fr; } }

/* ---------- what you get ---------- */
.b-feats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.b-feats article {
  background: var(--b-field); border: 1.5px solid var(--b-field-line);
  border-radius: 22px; padding: 22px;
}
.b-feats .spark { width: 22px; height: 22px; margin-bottom: 14px; }
.b-feats h3 { font: 500 20px/1.2 var(--b-font); margin-bottom: 8px; }
.b-feats p { font-size: 15.5px; line-height: 1.55; color: var(--mute); }
.b-feats p b { color: var(--fg); font-weight: 600; }
.b-feats__not { background: transparent !important; border-style: dashed !important; }
@media (max-width: 900px) { .b-feats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .b-feats { grid-template-columns: 1fr; } }

/* ---------- specs: the panel's label style ---------- */
.b-specs { display: grid; }
.b-specs div { display: grid; grid-template-columns: 200px 1fr; gap: 16px; padding: 16px 0; border-top: 1.5px solid var(--rule); }
.b-specs div:last-child { border-bottom: 1.5px solid var(--rule); }
.b-specs dt { font: 500 11.5px/1.6 var(--b-font); letter-spacing: 0.24em; text-transform: uppercase; color: var(--mute); }
.b-specs dd { font-size: 16.5px; line-height: 1.5; }
@media (max-width: 600px) { .b-specs div { grid-template-columns: 1fr; gap: 4px; } }

/* ---------- closing ---------- */
.b-cta { position: relative; overflow: hidden; padding: clamp(64px, 9vw, 120px) 0 clamp(48px, 6vw, 72px); }
.deco--cta { inset: 0; width: 100%; height: 100%; }
.b-cta .wrap { position: relative; }
.b-cta h2 { font: 500 clamp(34px, 5vw, 60px)/1.05 var(--b-font); letter-spacing: -0.015em; max-width: 14ch; }
.b-back { font: 400 15px/1 var(--b-font); margin-top: 28px; }
.b-back a { color: var(--mute); }

/* the footer sits on the same paper */
body.b2c .foot { margin-top: 0; }

/* ---------- /tools/bass-to-chords/: the free web version ---------- */
.b-tool { padding: clamp(28px, 5vw, 56px) 0 clamp(48px, 7vw, 88px); }
.b-tool__wrap { max-width: 1140px; }
.b-tool #b2c-app { margin: 4px 0 36px; }
.b-tool__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; }
.b-tool__foot p { font: 400 16px/1.5 var(--b-font); color: var(--mute); max-width: 44ch; }
.b-tool__foot .b-btns { margin: 0; }