/* =====================================================================
   Berolink — Chapter 3 · What We Build   (narrative v3 · microchip on-ramp)
   Reuses warm tokens + atoms (berolink-home.css) and the chapter module
   kit (berolink-approach.css · .ap-*). This chapter is the warm, accessible
   register — the microchip you already know, the neural chip that understands.
   No device glamour, no cold gravitas; the through-line is being understood.
   Sections: on-ramp intro (gardenia) · the product (cream-hi · parallel +
   progression) · the first step (gardenia · photo) · where it's used
   (cream-hi · the care it reaches) · what it is not (gardenia · guardrails).
   ===================================================================== */

/* ---------------------------- INTRO · the on-ramp (gardenia) ------------- */
.bd-intro{ padding-top:clamp(3rem,6vh,5rem); }
.bd-intro .ap-h{ font-size:clamp(2.1rem,4.2vw,3.25rem); line-height:1.12; max-width:none;
  margin-top:clamp(14px,2.2vh,20px); }

/* text-overlay hero: the comparison image runs full content width; the lead sits in the
   image's empty left well, device labels under each device, and a barely-there concept
   note tucked at the bottom. */
.bd-hero-media{ position:relative; margin-top:clamp(1.6rem,3.4vh,2.6rem); }
.bd-hero-frame{ position:relative; margin:0; }
.bd-hero-img{ display:block; width:100%; height:auto; border-radius:5px; }
/* dark gradient veil — keeps the text side (left) dark for legibility, lifts toward the
   right so the two devices read; masks the render without burying them. */
.bd-hero-veil{ position:absolute; inset:0; z-index:1; border-radius:5px; pointer-events:none;
  background:linear-gradient(100deg, rgba(24,18,15,0.92) 0%, rgba(24,18,15,0.84) 38%, rgba(24,18,15,0.52) 60%, rgba(24,18,15,0.42) 100%); }
.bd-hero-lead{ position:absolute; z-index:2; left:clamp(18px,2.6%,38px); top:50%; transform:translateY(-50%);
  width:33%; max-width:380px; margin:0;
  font-size:clamp(1rem,1.28vw,1.2rem); line-height:1.6; color:#E3DAC9; }
.bd-hero-lead .em{ color:#98A2D4; font-weight:600; }   /* periwinkle, one tone up for the dark veil */
.bd-dev{ position:absolute; z-index:2; top:70%; transform:translateX(-50%); white-space:nowrap;
  font-family:var(--mono); font-size:0.62rem; letter-spacing:0.1em;
  text-transform:uppercase; color:rgba(227,218,201,0.74); }
.bd-dev-l{ left:58.6%; }   /* under the microchip (measured device centre) */
.bd-dev-r{ left:88%; }     /* under the neural chip */
.bd-hero-tag{ position:absolute; z-index:2; right:clamp(12px,1.6%,18px); bottom:clamp(8px,1.6%,14px);
  font-family:var(--mono); font-size:0.5rem; letter-spacing:0.14em; text-transform:uppercase;
  color:rgba(227,218,201,0.42); }

/* =====================================================================
   THE PRODUCT · the microchip parallel, then the depth (cream-hi)
   H carries the source↔output spine in plain words: the microchip helps the
   world FIND your pet; the neural chip helps everyone UNDERSTAND them.
   Then one understanding that deepens — At first / Then / One day. The signal
   tick grows down the beats: deepening. ("find" = umber emphasis · "understand"
   = the periwinkle jewel · display size only · §peri.)
   ===================================================================== */
.bd-what{ background:var(--cream-hi); }
.bd-what .ap-h{ max-width:27ch; }
.bd-what .ap-h .em2{ color:var(--umber); font-weight:600; font-style:normal; }
.bd-what .ap-lead{ max-width:58ch; }
.bd-what .ap-lead .em{ color:var(--umber); font-weight:600; }

.bd-prog{ margin:clamp(28px,4.6vh,48px) 0 0; border-top:1px solid var(--line); }
.bd-beat{ display:grid; grid-template-columns:minmax(0,0.42fr) minmax(0,1.58fr);
  gap:clamp(0.8rem,3vw,2.4rem); align-items:baseline; max-width:64ch;
  padding:clamp(20px,3vh,30px) 0; border-bottom:1px solid var(--line); }
.bd-when{ font-family:var(--mono); font-size:0.66rem; letter-spacing:0.24em; text-transform:uppercase;
  color:var(--peri-deep); display:inline-flex; align-items:center; gap:0.6em; }
.bd-when::before{ content:""; flex:none; height:1px; background:var(--peri-deep); }
.bd-beat:nth-child(1) .bd-when::before{ width:10px; }
.bd-beat:nth-child(2) .bd-when::before{ width:18px; }
.bd-beat:nth-child(3) .bd-when::before{ width:26px; }
.bd-bt{ font-family:var(--title); font-weight:430; font-size:clamp(1.12rem,1.9vw,1.42rem);
  line-height:1.32; letter-spacing:-0.012em; color:var(--umber); margin:0; max-width:40ch; }
.bd-bt .em{ color:var(--umber); font-weight:600; }

/* the grows-with-you kicker — periwinkle keyline (the cool jewel tone as a fine
   accent only · §peri; light ground → peri-deep, never body text, never glow).
   KEEP confirmed by Soyoung (v3 omitted it from [the product] without a note). */
.bd-worth{ margin:clamp(26px,4vh,40px) 0 0; max-width:60ch;
  padding:clamp(4px,0.6vh,8px) 0 clamp(4px,0.6vh,8px) clamp(18px,3vw,26px);
  border-left:3px solid var(--peri-deep); }
.bd-worth-h{ font-family:var(--title); font-weight:600; font-size:clamp(1.16rem,1.9vw,1.42rem);
  letter-spacing:-0.012em; color:var(--umber); margin:0; }
.bd-worth-b{ font-family:var(--body); font-weight:400; font-size:clamp(0.98rem,1.4vw,1.08rem);
  line-height:1.62; color:var(--taupe); margin:0.55em 0 0; max-width:52ch; }

/* ----------------------- THE FIRST STEP (gardenia · photo) ----------------------- */
.bd-first .ap-inner{ display:grid; grid-template-columns:0.82fr 1.18fr;
  gap:clamp(2rem,5vw,4.6rem); align-items:start; }
.bd-first-photo{ position:relative; border-radius:4px; overflow:hidden; background:var(--umber);
  aspect-ratio:4/5; position:sticky; top:calc(var(--nav-h) + clamp(1rem,3vh,2.4rem)); }
.bd-first-photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 38%;
  display:block; filter:saturate(0.97) contrast(1.04); }
.bd-first-copy .ap-h{ margin-top:0; max-width:18ch; }

/* the honesty caption — the roadmap + the dog-first anchor (lives here in v3:
   the page frames in "pet"; this caption is where "pain, in dogs" is stated). */
.bd-cap{ font-family:var(--mono); font-size:0.67rem; letter-spacing:0.05em; line-height:1.62;
  color:var(--taupe); margin:clamp(26px,3.8vh,36px) 0 0; max-width:60ch; }
.bd-cap .em{ color:var(--peri-deep); font-weight:500; }

/* =====================================================================
   WHERE IT'S USED · the care the understanding reaches (cream-hi)
   Once the pet can be understood, that understanding goes wherever they're
   cared for — you, the vet, the home robot, everywhere else. Reuses .ap-mods;
   the robots line is the lifted future-facing punch (light-ground).
   (Replaces v2's [who it's for] triad — payer framing, cut per v3.)
   ===================================================================== */
.bd-uses{ background:var(--cream-hi); }
.bd-uses .ap-h{ max-width:30ch; }
.bd-uses .ap-lead{ max-width:58ch; }
.bd-uses .ap-mb .lift{ display:block; margin-top:0.6em; color:var(--umber); font-weight:600; }

/* ----------------------- WHAT BEROLINK IS NOT (gardenia) -----------------------
   NOTE: v3 omits this section from Ch3 (points relocate to Ch2 interface /
   Ch4 ethics — not yet built as pages). Kept as live-site guardrail pending
   Soyoung's call. */
.bd-not-list{ margin:clamp(26px,4.2vh,42px) 0 0; }
.bd-not-item{ display:grid; grid-template-columns:minmax(0,0.9fr) minmax(0,1.7fr);
  gap:clamp(0.8rem,3vw,2.6rem); align-items:baseline;
  padding:clamp(18px,2.8vh,26px) 0; border-top:1px solid var(--line); }
.bd-not-item:last-child{ border-bottom:1px solid var(--line); }
.bd-nh{ font-family:var(--title); font-weight:500; font-size:clamp(1.08rem,1.7vw,1.32rem);
  line-height:1.16; letter-spacing:-0.01em; color:var(--umber); margin:0; }
.bd-nb{ font-family:var(--body); font-weight:400; font-size:clamp(0.95rem,1.35vw,1.05rem);
  line-height:1.6; color:var(--taupe); margin:0; }
.bd-nb .em{ color:var(--umber); font-weight:600; }

/* ================================ RESPONSIVE ================================ */
@media (max-width:860px){
  .bd-intro .ap-h br{ display:none; }
  .bd-hero-veil{ background:rgba(24,18,15,0.12); }   /* light, even — lead is below the image here, so no dark text-well needed */
  .bd-hero-lead{ position:static; transform:none; width:auto; max-width:48ch;
    margin-top:clamp(1.2rem,3.5vw,1.8rem); font-size:clamp(1.02rem,2.4vw,1.16rem);
    color:var(--taupe); }
  .bd-hero-lead .em{ color:var(--peri-deep); }
  .bd-dev{ color:var(--taupe); }                     /* labels dark on the lighter image */
  .bd-hero-tag{ color:rgba(34,26,21,0.4); }          /* concept note dark on the lighter image */
  .bd-first .ap-inner{ grid-template-columns:1fr; gap:clamp(1.6rem,5vw,2.4rem); }
  .bd-first-photo{ position:relative; top:auto; aspect-ratio:16/11; order:-1; }
  .bd-first-photo img{ object-position:50% 36%; }
}
@media (max-width:680px){
  .bd-beat{ grid-template-columns:1fr; gap:0.45rem; padding:clamp(18px,2.8vh,24px) 0; }
  .bd-not-item{ grid-template-columns:1fr; gap:0.4rem; }
  .bd-dev{ font-size:0.5rem; letter-spacing:0.03em; }
}
@media (max-width:560px){
  .bd-dev{ display:none; }   /* image too narrow for two labels; the lead below names both */
}