@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito:ital,wght@0,400;0,600;0,700;0,800;1,600&display=swap');

/* keep the page background consistent behind the app (prefixed to avoid theme conflicts) */
body.bc-body { margin: 0; background: #F4ECDB; }

:root {
    --green: #1C7A3E; --green-soft: #84BE90; --coral: #E8715A; --gold: #F2A93C;
    --bg: #F4ECDB; --surface: #FFFCF6; --ink: #38260F; --muted: #8A7A64;
    --line: #EADDC8; --green-tint: #E4F0D8; --coral-tint: #FAE0D9; --gold-tint: #FCEFCF;
    --f-disp: "Baloo 2", system-ui, sans-serif;
    --f-body: "Nunito", system-ui, sans-serif;
  }
  #buddycut-root *, #buddycut-root *::before, #buddycut-root *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  #buddycut-root { background: var(--bg); color: var(--ink); font-family: var(--f-body); font-weight: 600;
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
  #buddycut-root { overflow-x: clip; }
  #buddycut-root h1, #buddycut-root h2, #buddycut-root h3, #buddycut-root p { text-wrap: pretty; }
  #buddycut-root ::selection { background: var(--coral); color: #fff; }
  #buddycut-root button { font: inherit; }
  #buddycut-root a { color: inherit; }

  /* range slider — buddycut coral thumb on green track */
  input.bc-range { -webkit-appearance: none; appearance: none; width: 100%; height: 10px; border-radius: 99px;
    background: var(--green-tint); outline: none; cursor: pointer; border: 1.5px solid var(--line); }
  input.bc-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px;
    border-radius: 99px; background: var(--coral); border: 4px solid var(--surface); cursor: grab;
    box-shadow: 0 3px 10px -2px rgba(232,113,90,.6); transition: transform .14s; }
  input.bc-range::-webkit-slider-thumb:hover { transform: scale(1.1); }
  input.bc-range::-webkit-slider-thumb:active { cursor: grabbing; }
  input.bc-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 99px; background: var(--coral);
    border: 4px solid var(--surface); cursor: grab; box-shadow: 0 3px 10px -2px rgba(232,113,90,.6); }
  input.bc-range:focus-visible { box-shadow: 0 0 0 3px var(--green-tint), 0 0 0 5px var(--green); }

  /* visible focus on all interactive */
  #buddycut-root button:focus-visible, #buddycut-root [role="radio"]:focus-visible, #buddycut-root [role="tab"]:focus-visible,
  #buddycut-root input:focus-visible, #buddycut-root textarea:focus-visible, #buddycut-root a:focus-visible,
  #buddycut-root .bc-scrub:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; border-radius: 12px; }
  .bc-scrub:focus-visible { outline-offset: 4px; }

  @keyframes bcPop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
  .bc-pop { animation: bcPop .34s cubic-bezier(.2,.7,.2,1); }

  #buddycut-root img { max-width: 100%; height: auto; }

  /* ============================================================
     RESPONSIVE SYSTEM — one primary breakpoint (980px) flips both
     two-column layouts together, so there is never an in-between
     zone where one is stacked and the other isn't.
     Secondary: 760px (sections), 520px (phone tuning).
     ============================================================ */

  /* interactive hero showcase */
  .bc-hero { display: grid; }
  .bc-ladder:hover { transform: translateY(-2px); }
  .bc-pulse { animation: bcPulse 2.6s ease-in-out infinite; }
  @keyframes bcPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(242,169,60,0); } 50% { box-shadow: 0 0 0 5px rgba(242,169,60,.2); } }
  .bc-rise { animation: bcHeroRise .75s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes bcHeroRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  .bc-cap { animation: bcCapPop .9s ease-in-out infinite alternate; }
  @keyframes bcCapPop { from { transform: translateY(0); } to { transform: translateY(-1.5px); } }

  /* below-the-fold two-column sections */
  .bc-two { display: grid; }

  /* mascot illustrations — transparent PNGs, grounded with a soft shadow */
  .bc-mascot { filter: drop-shadow(0 10px 18px rgba(56,38,15,.14)); }
  .bc-float { animation: bcFloat 6s ease-in-out infinite; }
  .bc-float-slow { animation: bcFloat 8s ease-in-out infinite; }
  @keyframes bcFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
  .bc-accent { position: absolute; z-index: 0; pointer-events: none; }
  /* method section accent — hide below 1100px where it would overlap the wide centered headline */
  @media (max-width: 1100px) { .bc-accent-method { display: none !important; } }

  /* "trimming the timeline" mascot — flush to the left, its cut-off
     timeline end touching the top edge of the configurator block */
  /* "trimming the timeline" mascot — tucked BEHIND the configurator
     block, peeking out from the left so it looks like it's holding
     onto the block. Stays visible on every device — just scales &
     re-tucks per breakpoint (never display:none). #root clips
     overflow-x, so the left poke never creates a scrollbar. */
  .bc-cut { position: absolute; left: -116px; top: 34px; width: 232px; height: auto;
    z-index: 0; pointer-events: none;
    filter: drop-shadow(0 10px 18px rgba(56,38,15,.14));
    animation: bcFloat 7s ease-in-out infinite; }
  /* laptop / small desktop — pull the poke in a touch */
  @media (max-width: 1180px) { .bc-cut { left: -92px; width: 212px; } }
  /* tablet landscape (still two-col) */
  @media (max-width: 1080px) { .bc-cut { left: -74px; top: 28px; width: 188px; } }
  /* stacked single-column — buddy hugs the left edge of the full-width card */
  @media (max-width: 980px)  { .bc-cut { left: -52px; top: 20px; width: 168px; } }
  @media (max-width: 760px)  { .bc-cut { left: -34px; top: 14px; width: 138px; } }
  @media (max-width: 520px)  { .bc-cut { left: -22px; top: 10px; width: 112px; } }
  @media (max-width: 380px)  { .bc-cut { left: -16px; top: 8px;  width: 94px; } }

  /* ---- PRIMARY: tablet & below (≤980px) — stack the big layouts ---- */
  @media (max-width: 980px) {
    .bc-hero { grid-template-columns: 1fr !important; gap: 28px !important; }
    .bc-hero > div:last-child { order: -1; }        /* phone preview on top */
    .bc-grid { grid-template-columns: 1fr !important; }
    .bc-right { position: static !important; }
    .bc-accent { display: none !important; }          /* drop peeking accents */
  }
  @media (min-width: 981px) { .bc-mobilebar { display: none !important; } }

  /* ---- SECONDARY: phones (≤760px) — stack section two-cols ---- */
  @media (max-width: 760px) {
    .bc-two { grid-template-columns: 1fr !important; }
    .bc-hide-mobile { display: none !important; }
  }

  /* ---- SMALL phones (≤520px) — tighten phone preview & type ---- */
  @media (max-width: 520px) {
    .bc-hero > div:last-child { max-width: 300px; margin: 0 auto; }
  }

  @media (prefers-reduced-motion: reduce) {
    .bc-pulse, .bc-rise, .bc-cap, .bc-float, .bc-float-slow { animation: none !important; }
  }

  .bc-morph-arrow > span { transition: transform .2s; }
  @media (max-width: 680px) { .bc-morph { flex-direction: column !important; } .bc-morph-arrow > span { transform: rotate(90deg); } }

  /* process timeline */
  .bc-process { position: relative; display: flex; gap: 14px; }
  .bc-proc-track { position: absolute; top: 24px; left: 9%; right: 9%; height: 3px; background: var(--line); border-radius: 99px; }
  .bc-proc-fill { position: absolute; inset: 0; background: linear-gradient(90deg, var(--green-soft), var(--green)); border-radius: 99px; opacity: .45; }
  .bc-proc-head { position: absolute; top: 50%; left: 0; width: 13px; height: 13px; border-radius: 99px; background: var(--coral); transform: translate(-50%,-50%); box-shadow: 0 2px 6px -1px rgba(232,113,90,.7); animation: bcProc 8s ease-in-out infinite; }
  @keyframes bcProc { 0% { left: 0; } 50% { left: 100%; } 100% { left: 0; } }
  .bc-proc-step { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; z-index: 1; }
  .bc-proc-badge { margin-bottom: 16px; }
  @media (max-width: 760px) {
    .bc-process { flex-direction: column; gap: 0; }
    .bc-proc-track { display: none; }
    .bc-proc-step { flex-direction: row; align-items: flex-start; text-align: left; gap: 16px; padding-bottom: 26px; }
    .bc-proc-step:not(:last-child)::before { content: ""; position: absolute; left: 24px; top: 52px; bottom: 0; width: 3px; background: var(--line); border-radius: 99px; }
    .bc-proc-badge { margin-bottom: 0; flex-shrink: 0; }
    .bc-proc-card { padding-top: 3px; }
  }

  /* final timeline */
  .bc-final-tl { display: flex; align-items: center; gap: 7px; }
  @media (max-width: 620px) {
    .bc-final-tl { flex-direction: column; align-items: stretch; }
    .bc-final-arrow { transform: rotate(90deg); align-self: center; }
  }

  @media (prefers-reduced-motion: reduce) {
    #buddycut-root * { animation-duration: .001ms !important; transition-duration: .08s !important; scroll-behavior: auto !important; }
  }