/* ============================================================
   KONPRANN — components
   Requires tokens.css + base.css.
   ============================================================ */

/* ---- badge ------------------------------------------------ */

.k-badge{
  display:inline-block;background:var(--color-accent);color:#fff;
  font-family:var(--font-display);font-weight:var(--weight-heavy);font-size:12px;
  letter-spacing:var(--tracking-wide);text-transform:uppercase;
  padding:6px var(--space-3);border-radius:var(--radius-pill);
}

/* ---- tag -------------------------------------------------- */

.k-tags{display:flex;flex-wrap:wrap;gap:7px}
.k-tag{
  font-weight:var(--weight-bold);font-size:var(--text-xs);
  padding:5px var(--space-3);border-radius:var(--radius-pill);
}
.k-tag--solid{background:var(--color-on-accent);color:var(--color-text)}
.k-tag--ghost{background:rgba(255,255,255,.16);color:#fff}

/* ---- button ----------------------------------------------- */

.k-btns{display:grid;gap:10px}
.k-btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  min-height:58px;padding:14px var(--space-5);
  font-family:var(--font-display);font-weight:var(--weight-heavy);font-size:var(--text-lg);
  letter-spacing:-.01em;text-decoration:none;border-radius:var(--radius-md);
  border:2px solid transparent;cursor:pointer;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.k-btn svg{flex:none;width:24px;height:24px;stroke-width:1.9}
.k-btn--primary{background:var(--color-on-accent);color:var(--color-text)}
.k-btn--primary:hover{background:#fff;color:var(--color-text)}
.k-btn--ghost{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.5)}
.k-btn--ghost:hover{background:rgba(255,255,255,.26);color:#fff}
.k-btn--outline{background:#fff;color:var(--color-accent);border-color:var(--color-accent);font-size:var(--text-md)}
.k-btn--outline:hover{background:var(--color-step-1-tint);color:var(--color-accent)}

/* ---- language bar ----------------------------------------- */

.k-langbar{
  display:flex;justify-content:flex-end;gap:var(--space-2);
  padding:10px var(--pad,var(--space-6));
  background:#fff;border-bottom:var(--stroke-hair) solid var(--color-border);
}
.k-langbar button{
  font:inherit;font-size:var(--text-sm);font-weight:var(--weight-bold);
  min-height:var(--tap-min);padding:var(--space-2) 18px;
  background:#fff;color:var(--color-accent);
  border:2px solid var(--color-accent);border-radius:var(--radius-pill);cursor:pointer;
}
.k-langbar button[aria-pressed="true"]{background:var(--color-accent);color:#fff}

/* ---- risk medallions -------------------------------------- */

.k-risks{display:grid;grid-template-columns:repeat(2,1fr);gap:22px var(--space-4)}
.k-risk{display:flex;flex-direction:column;align-items:center;text-align:center}
.k-risk__icon{
  width:56px;height:56px;border-radius:50%;color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.k-risk__icon svg{width:29px;height:29px}
.k-risk__icon--1{background:var(--color-step-1)}
.k-risk__icon--2{background:var(--color-step-2)}
.k-risk__icon--3{background:var(--color-step-3)}
.k-risk__icon--4{background:var(--color-danger-fill)}
.k-risk__label{
  margin-top:9px;font-family:var(--font-display);font-weight:var(--weight-heavy);
  font-size:12px;letter-spacing:var(--tracking-wide);text-transform:uppercase;
  color:var(--color-text-label);
}
.k-risk__value{margin-top:2px;font-size:var(--text-md);font-weight:var(--weight-bold)}

@media (min-width:620px){ .k-risks{grid-template-columns:repeat(4,1fr)} }

/* ---- step card -------------------------------------------- */

.k-step{
  position:relative;overflow:hidden;
  border-radius:var(--radius-xl);padding:18px clamp(16px,4vw,22px);
  display:flex;gap:clamp(12px,3vw,18px);
}
.k-step--1{background:var(--color-step-1-tint)}
.k-step--2{background:var(--color-step-2-tint)}
.k-step--3{background:var(--color-step-3-tint)}

.k-step__ghost{
  position:absolute;right:12px;bottom:-34px;pointer-events:none;
  font-family:var(--font-display);font-weight:var(--weight-black);
  font-size:130px;line-height:1;
}
/* card 1 carries a callout that would bury a bottom-anchored numeral */
.k-step--1 .k-step__ghost{top:-28px;bottom:auto;color:var(--color-step-1);opacity:.08}
.k-step--2 .k-step__ghost{color:var(--color-step-2);opacity:.09}
.k-step--3 .k-step__ghost{color:var(--color-step-3);opacity:.13}

.k-step__rail{width:46px;flex:none;display:flex;flex-direction:column;align-items:center;gap:10px}
.k-step__num{
  width:46px;height:46px;border-radius:50%;color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:var(--weight-black);font-size:var(--text-xl);
}
.k-step--1 .k-step__num{background:var(--color-step-1)}
.k-step--2 .k-step__num{background:var(--color-step-2)}
.k-step--3 .k-step__num{background:var(--color-step-3)}
.k-step__icon{width:26px;height:26px}
.k-step--1 .k-step__icon{color:var(--color-step-1)}
.k-step--2 .k-step__icon{color:var(--color-step-2)}
.k-step--3 .k-step__icon{color:var(--color-step-3)}
.k-step__body{position:relative;flex:1;min-width:0}
.k-step__body > h3{margin-top:var(--space-2)}

/* ---- bullets / chips -------------------------------------- */

.k-bullets{
  margin-top:var(--space-3);padding-left:21px;list-style:disc;
  font-size:var(--text-md);line-height:1.45;
}
.k-bullets li{margin-bottom:7px}

.k-chips{margin-top:var(--space-3);display:grid;gap:var(--space-2)}
.k-chip{
  background:#fff;border-radius:10px;padding:11px 14px;
  font-size:var(--text-base);font-weight:var(--weight-medium);
  display:flex;align-items:center;gap:10px;
}
.k-chip svg{flex:none;width:22px;height:22px;color:var(--color-accent-3)}
@media (min-width:620px){ .k-chips{grid-template-columns:1fr 1fr;gap:var(--space-2) var(--space-3)} }

/* ---- callout ---------------------------------------------- */

.k-callout{
  margin-top:14px;background:var(--color-highlight-alt);
  border-left:6px solid var(--color-decor);
  border-radius:0 10px 10px 0;padding:14px var(--space-4);
}
.k-callout__quote{
  display:flex;align-items:flex-start;gap:11px;
  font-size:var(--text-md);font-weight:var(--weight-bold);line-height:1.35;
}
.k-callout__quote svg{flex:none;width:24px;height:24px;color:var(--color-accent-2);stroke-width:1.8}
.k-callout__note{margin-top:6px;font-size:var(--text-sm);color:var(--color-text-body)}

/* ---- danger line ------------------------------------------ */

.k-danger{
  margin-top:14px;display:flex;align-items:flex-start;gap:9px;
  font-size:var(--text-base);font-weight:var(--weight-bold);
  color:var(--color-danger);line-height:1.35;
}
.k-danger svg{flex:none;width:22px;height:22px;stroke-width:1.9;margin-top:2px}

/* ---- questions panel -------------------------------------- */

.k-panel{
  background:var(--color-highlight);border-radius:var(--radius-xl);
  padding:var(--space-5) clamp(18px,4vw,24px);
}
.k-panel__list{
  margin-top:14px;padding-left:22px;list-style:decimal;
  font-size:var(--text-md);line-height:var(--leading-normal);
}
.k-panel__list li{margin-bottom:7px}
.k-panel__list li:last-child{margin-bottom:0}

/* ---- feature panel (accent field) ------------------------- */

.k-feature{
  position:relative;overflow:hidden;
  background:var(--color-accent);color:#fff;
  border-radius:var(--radius-xl);padding:clamp(20px,5vw,28px);
}
.k-feature::before{                       /* decorative ring */
  content:"";position:absolute;right:-60px;top:-80px;
  width:240px;height:240px;border-radius:50%;
  border:30px solid rgba(255,255,255,.07);pointer-events:none;
}
.k-feature--orb::before{
  right:auto;left:-40px;top:auto;bottom:-60px;
  width:150px;height:150px;border:0;background:var(--color-decor);opacity:.18;
}
.k-feature > *{position:relative}
.k-feature__muted{color:var(--color-text-on-dark)}
.k-feature__accent{color:var(--color-on-accent)}

/* ---- video ------------------------------------------------ */

.k-video{border-radius:var(--radius-lg);overflow:hidden;background:var(--color-text)}
.k-video wistia-player,.k-video iframe{display:block;width:100%;border:0}
.k-video__ph{
  aspect-ratio:16/9;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;
  color:#fff;text-align:center;padding:var(--space-5);font-size:var(--text-base);
}
.k-video__ph svg{width:54px;height:54px;color:var(--color-on-accent);stroke-width:1.4}

/* ---- figure ----------------------------------------------- */

.k-figure{position:relative}
.k-figure::before{                        /* mint orb behind the photo */
  content:"";position:absolute;left:-14px;bottom:-12px;
  width:96px;height:96px;border-radius:50%;
  background:var(--color-decor);opacity:.25;
}
.k-figure img{position:relative;width:100%;height:100%;object-fit:cover;border-radius:var(--radius-lg)}