/*
 * Tilauswidget.
 *
 * Värit tulevat teemasta (theme.json), eivät kovakoodattuina — jos ilme
 * muuttuu, widget muuttuu mukana.
 *
 * ⚠ NAPIT EIVÄT PERI VÄRIÄ EIVÄTKÄ FONTTIA. Ilman .bn-widget button
 * -sääntöä osa teksteistä piirtyy mustana tummalle pohjalle. Tämä ehti
 * mennä kerran väärin mockupissa.
 */

.bn-widget {
  /*
   * ⚠ TEEMAN VARISLUGIT: pohja ja pohja-2 ovat TAUSTAVAREJA, teksti on
   * tekstin vari. Tama meni kerran vaarin - --bn-teksti oli kartoitettu
   * slugiin pohja-2 (#0A100C), jolloin kaikki teksti piirtyi lahes
   * mustana tummalle pohjalle. Tarkista slugi, ala arvaa nimesta.
   */
  --bn-pohja:   var(--wp--preset--color--pohja-2, #0A100C);
  --bn-kortti:  #18271B;
  --bn-kortti2: #20321F;
  --bn-raja:    #3A4C36;
  --bn-teksti:  var(--wp--preset--color--teksti, #F2F5F0);
  --bn-teksti2: var(--wp--preset--color--pehmea, #B9C4B7);
  --bn-himmea:  var(--wp--preset--color--himmea, #8E9C8C);
  /* Sama vihreä kuin sivuston omissa napeissa. Vaaleampi vihrea-v
     jää korostusteksteille tummalla pohjalla. */
  --bn-lime:    var(--wp--preset--color--vihrea, #8BD03C);
  --bn-lime2:   var(--wp--preset--color--vihrea-v, #A3E355);
  --bn-nappi-teksti: #08120A;
  --bn-tumma:   var(--wp--preset--color--metsa-v, #3F9B45);
  --bn-kelta:   var(--wp--preset--color--keltainen, #FBD00F);
  --bn-puna:    #E9705A;

  background: #0D140F;
  border: 1px solid var(--bn-raja);
  border-radius: 14px;
  overflow: hidden;
  color: var(--bn-teksti);
  font-size: 16px;
  line-height: 1.55;
}

/*
 * ⚠ :where() ANTAA NOLLATARKKUUDEN — se on tässä koko pointti.
 *
 * Aiemmin tämä oli .bn-widget button, eli (0,1,1). Se voitti jokaisen
 * komponentin oman säännön kuten .bn-paa (0,1,0), jolloin color: inherit
 * teki Jatka-napin tekstistä vaalean vaalealla pohjalla ja Takaisin-napin
 * taustasta valkoisen. Sama ansa osui jo kertaalleen korttien reunoihin.
 *
 * :where() ei kasvata tarkkuutta lainkaan, joten mikä tahansa
 * komponenttisääntö voittaa tämän.
 */
:where(.bn-widget) :where(button, input, textarea, select) {
  color: inherit;
  font: inherit;
}
/*
 * ⚠ NOLLAUS EI SAA ASETTAA TAUSTAA EIKA REUNAA.
 *
 * .bn-widget button on tarkkuudeltaan (0,1,1) ja voittaa komponenttien
 * omat saannot kuten .bn-taso (0,1,0). Jos tanne kirjoittaa border: 0,
 * korttien reunat katoavat eika sita huomaa mistaan - nain kavi kerran.
 *
 * Jokainen nappi asettaa oman taustansa ja reunansa itse.
 */
:where(.bn-widget) :where(button) { cursor: pointer; }
.bn-widget *, .bn-widget *::before, .bn-widget *::after { box-sizing: border-box; }

.bn-lataa { padding: 60px 24px; text-align: center; color: var(--bn-himmea); }

/* ---------- edistyminen ---------- */

.bn-edistys-kehys { padding: 15px 20px 0; background: var(--bn-pohja); }
.bn-palkki { height: 4px; background: var(--bn-kortti); border-radius: 3px; overflow: hidden; }
.bn-taytto {
  height: 100%; background: var(--bn-lime); border-radius: 3px;
  width: 15%; transition: width .35s ease-out;
}
.bn-edistys-kehys .bn-edistys-teksti {
  display: flex; justify-content: space-between; gap: 12px; padding: 9px 0 14px;
  font-family: var(--wp--preset--font-family--mono, monospace);
  font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--bn-himmea);
}

/* ---------- taitto ---------- */

/*
 * ⚠ KONTTIKYSELY, EI MEDIAKYSELY.
 *
 * Widget voi olla kapea vaikka selain olisi leveä — sivun sisältöleveys
 * ratkaisee. Mediakyselyllä kahden palstan taitto laukesi 1440 pikselin
 * selaimessa vaikka widget oli 620 px leveä, jolloin paneeli meni
 * sisällön päälle ja peitti kolmannen kortin otsikon.
 */
.bn-widget { container-type: inline-size; container-name: bnw; }
.bn-runko { display: grid; grid-template-columns: 1fr; }
@container bnw (min-width: 900px) {
  .bn-runko { grid-template-columns: minmax(0, 1fr) 320px; }
}
.bn-sisalto { padding: clamp(24px, 3.4vw, 40px); }

.bn-kysymys {
  color: var(--bn-teksti);
  font-size: clamp(1.45rem, 3.4vw, 2rem); font-weight: 700;
  letter-spacing: -.028em; line-height: 1.14; margin: 0 0 8px; max-width: 22ch;
}
.bn-tarkenne { color: var(--bn-teksti2); margin: 0 0 26px; max-width: 54ch; }
.bn-ryhma-otsikko {
  font-family: var(--wp--preset--font-family--mono, monospace);
  font-size: 11px; letter-spacing: .11em; text-transform: uppercase;
  color: var(--bn-himmea); margin: 26px 0 10px;
}
.bn-ryhma-otsikko:first-of-type { margin-top: 0; }

/* ---------- pakettikortit ---------- */

.bn-tasot { display: grid; gap: 12px; }
@container bnw (min-width: 560px) { .bn-tasot { grid-template-columns: repeat(2, 1fr); } }
@container bnw (min-width: 860px) { .bn-tasot { grid-template-columns: repeat(3, 1fr); } }
.bn-taso {
  display: flex; flex-direction: column; text-align: left; padding: 20px;
  background: var(--bn-kortti); border: 2px solid var(--bn-raja);
  border-radius: 12px; position: relative; transition: border-color .13s;
}
.bn-taso:hover { border-color: var(--bn-tumma); }
.bn-taso[aria-pressed="true"] { border-color: var(--bn-lime); background: var(--bn-kortti2); }
.bn-suositeltu { border-color: var(--bn-tumma); padding-top: 26px; }
.bn-lippu {
  position: absolute; top: -10px; left: 18px; white-space: nowrap;
  font-family: var(--wp--preset--font-family--mono, monospace);
  font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  background: var(--bn-lime); color: var(--bn-nappi-teksti);
  padding: 3px 9px; border-radius: 4px;
}
.bn-taso .bn-nimi { color: var(--bn-teksti); font-size: 1.08rem; font-weight: 600; margin-bottom: 3px; }
.bn-taso .bn-laajuus { font-size: .86rem; color: var(--bn-himmea); margin-bottom: 12px; }
.bn-taso .bn-h {
  font-family: var(--wp--preset--font-family--mono, monospace);
  font-size: 1.4rem; color: var(--bn-lime); letter-spacing: -.02em;
}
.bn-taso .bn-kk {
  font-family: var(--wp--preset--font-family--mono, monospace);
  font-size: .88rem; color: var(--bn-teksti2); margin-top: 2px;
}
.bn-sisaltyy {
  list-style: none; margin: 14px 0 0; padding: 0;
  display: grid; gap: 6px;
}
.bn-sisaltyy li {
  display: grid; grid-template-columns: 14px 1fr; gap: 8px;
  font-size: .86rem; line-height: 1.4; color: var(--bn-teksti2);
}
.bn-sisaltyy li::before {
  content: "✓"; color: var(--bn-lime2); font-size: .8rem; line-height: 1.5;
}

.bn-taso .bn-aika {
  font-size: .83rem; color: var(--bn-himmea);
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--bn-raja);
}
.bn-tarkentuu {
  display: inline-block; margin-top: 8px; padding: 1px 6px;
  font-family: var(--wp--preset--font-family--mono, monospace);
  font-size: .64rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--bn-kelta); border: 1px solid var(--bn-kelta); border-radius: 4px;
}

/* ---------- isot valintanapit ---------- */

.bn-isot { display: grid; gap: 12px; max-width: 620px; }

/*
 * Reunat ja tausta ovat KEHYKSELLÄ, eivät napilla. Nappi ei voi sisältää
 * toista nappia, joten "Mitä tähän kuuluu?" ei mahdu napin sisään — se
 * mahtuu kehykseen, ja kehys on se mikä näyttää kortilta.
 */
.bn-iso-kehys, .bn-lisa-kehys {
  background: var(--bn-kortti); border: 2px solid var(--bn-raja);
  overflow: hidden; transition: border-color .13s, background .13s;
}
.bn-iso-kehys { border-radius: 12px; }
.bn-lisa-kehys { border-radius: 11px; }
.bn-iso-kehys:hover, .bn-lisa-kehys:hover { border-color: var(--bn-tumma); }
.bn-iso-kehys.bn-valittu, .bn-lisa-kehys.bn-valittu {
  border-color: var(--bn-lime); background: var(--bn-kortti2);
}

.bn-iso {
  display: flex; align-items: center; gap: 15px; padding: 18px 22px;
  width: 100%; background: none; border: 0; border-radius: 0; text-align: left;
}
.bn-merkki {
  width: 25px; height: 25px; border-radius: 50%; border: 2px solid var(--bn-himmea);
  flex: 0 0 auto; display: grid; place-items: center;
  font-size: 13px; color: transparent; line-height: 1;
}
[aria-pressed="true"] > .bn-merkki { background: var(--bn-lime); border-color: var(--bn-lime); color: var(--bn-nappi-teksti); }
.bn-iso .bn-t { min-width: 0; }
.bn-iso .bn-t b { color: var(--bn-teksti); display: block; font-size: 1.08rem; font-weight: 600; line-height: 1.25; }
.bn-iso .bn-t span { display: block; color: var(--bn-himmea); font-size: .89rem; margin-top: 3px; }

/* ---------- lisät ---------- */

.bn-lisat { display: grid; gap: 10px; max-width: 620px; }
.bn-lisa {
  display: flex; gap: 14px; align-items: center; padding: 15px 18px;
  width: 100%; background: none; border: 0; border-radius: 0; text-align: left;
}
.bn-lisa .bn-merkki { border-radius: 6px; width: 22px; height: 22px; }
.bn-lisa .bn-k { flex: 1; min-width: 0; }
.bn-lisa .bn-k b { color: var(--bn-teksti); display: block; font-size: 1rem; font-weight: 600; }
.bn-lisa .bn-k span { display: block; font-size: .85rem; color: var(--bn-himmea); margin-top: 2px; }
.bn-lisa .bn-h {
  font-family: var(--wp--preset--font-family--mono, monospace);
  font-size: .9rem; color: var(--bn-lime2); white-space: nowrap;
}
.bn-lisa .bn-h.bn-alkaen { color: var(--bn-kelta); }
.bn-sopii {
  /* Ilman display: inline-block merkinta venyy koko leveydelle ja
     peittaa kuvaustekstin, koska vanhempi <b> on lohkotason elementti. */
  display: inline-block;
  font-family: var(--wp--preset--font-family--mono, monospace);
  font-size: .62rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--bn-nappi-teksti); background: var(--bn-lime2);
  border-radius: 3px; padding: 1px 6px; margin-left: 8px; vertical-align: 2px;
}

/* ---------- kentät ---------- */

.bn-kentta { margin-bottom: 18px; max-width: 520px; }
.bn-kentta label {
  display: block; margin-bottom: 7px;
  font-family: var(--wp--preset--font-family--mono, monospace);
  font-size: 11px; letter-spacing: .11em; text-transform: uppercase;
  color: var(--bn-himmea);
}
.bn-pakko, .bn-vapaa { font-size: 9.5px; padding: 1px 5px; border-radius: 3px; margin-left: 5px; }
.bn-pakko { color: var(--bn-lime2); border: 1px solid rgba(139, 208, 60, .35); }
.bn-vapaa { color: var(--bn-himmea); border: 1px solid var(--bn-raja); }
.bn-kentta input, .bn-kentta textarea {
  width: 100%; background: var(--bn-kortti); border: 2px solid var(--bn-raja);
  border-radius: 10px; padding: 14px 15px; font-size: 1.05rem;
}
.bn-kentta input::placeholder { color: #5D6A5C; }
.bn-kentta input:focus, .bn-kentta textarea:focus { outline: none; border-color: var(--bn-lime); }
.bn-kentta input.bn-virheellinen { border-color: var(--bn-puna); }
.bn-apu { font-size: .85rem; color: var(--bn-himmea); margin-top: 7px; }
.bn-apu-virhe { color: var(--bn-puna); }

.bn-ryhma { border: 0; padding: 0; margin: 26px 0 0; }
.bn-ryhma legend {
  padding: 0; margin-bottom: 12px;
  font-size: 1rem; font-weight: 600; line-height: 1.4;
}

/* rekisterihaun tulos */
.bn-tulos-kehys { margin: -8px 0 18px; max-width: 520px; }
.bn-tulos { padding: 13px 16px; border-radius: 10px; font-size: .93rem; }
.bn-tulos b { display: block; margin-bottom: 2px; }
.bn-tulos span { color: var(--bn-teksti2); font-size: .87rem; }
.bn-ok { background: rgba(163, 227, 85, .09); border: 1.5px solid var(--bn-tumma); }
.bn-huom { background: rgba(251, 208, 15, .07); border: 1.5px solid rgba(251, 208, 15, .38); color: var(--bn-teksti2); }
.bn-kesken { background: var(--bn-kortti); border: 1.5px solid var(--bn-raja); color: var(--bn-himmea); }

/* ---------- vahvistus ---------- */

.bn-vahvistus { max-width: 620px; }
.bn-lista {
  background: var(--bn-kortti); border: 2px solid var(--bn-raja);
  border-radius: 12px; padding: 18px 20px; margin-bottom: 18px;
}
.bn-tyhja { color: var(--bn-himmea); font-size: .89rem; font-style: italic; }
.bn-yrivi {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--bn-raja); font-size: .92rem;
}
.bn-yrivi:last-child { border-bottom: 0; }
.bn-yrivi .bn-n { flex: 1; min-width: 0; color: var(--bn-teksti2); }
.bn-yrivi .bn-a {
  font-family: var(--wp--preset--font-family--mono, monospace);
  white-space: nowrap; color: var(--bn-teksti);
}
.bn-poista {
  background: none;
  width: 24px; height: 24px; border-radius: 6px; flex: 0 0 auto;
  color: var(--bn-himmea); font-size: 16px; line-height: 1;
  display: grid; place-items: center; border: 1px solid transparent;
}
.bn-poista:hover { color: var(--bn-puna); border-color: rgba(233, 112, 90, .5); background: rgba(233, 112, 90, .08); }
.bn-yhteensa { border-top: 2px solid var(--bn-raja); border-bottom: 0; margin-top: 6px; padding-top: 13px; }
.bn-yhteensa .bn-n { color: var(--bn-teksti); font-weight: 600; }
.bn-yhteensa .bn-a { color: var(--bn-lime); font-size: 1.05rem; }
.bn-yhteensa .bn-tila { width: 24px; flex: 0 0 auto; }

.bn-bump { margin-bottom: 20px; }
.bn-bump-nappi {
  display: flex; gap: 14px; align-items: flex-start; width: 100%;
  padding: 18px 20px; border-radius: 12px; text-align: left;
  background: linear-gradient(135deg, rgba(251, 208, 15, .08), rgba(251, 208, 15, .01));
  border: 1.5px solid rgba(251, 208, 15, .4);
}
.bn-bump-nappi .bn-merkki { border-radius: 6px; width: 23px; height: 23px; border-color: var(--bn-kelta); margin-top: 2px; }
.bn-bump-nappi[aria-pressed="true"] > .bn-merkki { background: var(--bn-kelta); border-color: var(--bn-kelta); }
.bn-bump-nappi .bn-yla {
  display: block; margin-bottom: 6px;
  font-family: var(--wp--preset--font-family--mono, monospace);
  font-size: 10.5px; letter-spacing: .11em; text-transform: uppercase; color: var(--bn-kelta);
}
.bn-bump-nappi b { display: block; font-size: 1.02rem; margin-bottom: 3px; }
.bn-bump-nappi p { margin: 0; font-size: .9rem; color: var(--bn-teksti2); }
.bn-bump-nappi .bn-h {
  display: block; margin-top: 6px;
  font-family: var(--wp--preset--font-family--mono, monospace);
  color: var(--bn-kelta); font-size: 1.02rem;
}

.bn-lupaukset { display: grid; gap: 9px; margin: 0 0 20px; }
.bn-lupaukset > div { display: flex; gap: 11px; align-items: flex-start; font-size: .95rem; color: var(--bn-teksti2); }
.bn-lupaukset .bn-v { color: var(--bn-lime); flex: 0 0 auto; line-height: 1.4; }
.bn-lupaukset b { color: var(--bn-teksti); }

.bn-ehdot {
  display: flex; gap: 14px; align-items: flex-start; width: 100%;
  padding: 16px 19px; margin-bottom: 18px; text-align: left;
  background: var(--bn-kortti); border: 2px solid var(--bn-raja); border-radius: 11px;
}
.bn-ehdot[aria-pressed="true"] { border-color: var(--bn-lime); background: var(--bn-kortti2); }
.bn-ehdot .bn-merkki { border-radius: 6px; width: 23px; height: 23px; margin-top: 2px; }
.bn-ehdot .bn-t b { display: block; font-size: 1.02rem; }
.bn-ehdot .bn-t span { display: block; font-size: .86rem; color: var(--bn-himmea); margin-top: 3px; }
.bn-ehdot a { color: var(--bn-lime2); }

.bn-laheta { width: 100%; padding: 17px; font-size: 1.08rem; }
.bn-laheta:disabled { opacity: .6; cursor: default; }
.bn-virhe { color: var(--bn-puna); font-size: .93rem; margin-top: 10px; min-height: 1.2em; }
.bn-pikkuteksti { font-size: .87rem; color: var(--bn-himmea); margin: 14px 0 0; }

/* ---------- paneeli ---------- */

.bn-paneeli { background: var(--bn-pohja); border-top: 1px solid var(--bn-raja); padding: 24px; }
@container bnw (min-width: 900px) {
  .bn-paneeli { border-top: 0; border-left: 1px solid var(--bn-raja); position: sticky; top: 0; align-self: start; }
}
.bn-paneeli h3 {
  margin: 0 0 15px;
  font-family: var(--wp--preset--font-family--mono, monospace);
  font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--bn-himmea);
}
.bn-summa { margin-top: 17px; padding-top: 16px; border-top: 1px solid var(--bn-raja); }
.bn-summa .bn-iso {
  font-family: var(--wp--preset--font-family--mono, monospace);
  font-size: 1.55rem; color: var(--bn-lime); letter-spacing: -.02em;
}
.bn-summa .bn-kk {
  font-family: var(--wp--preset--font-family--mono, monospace);
  font-size: .97rem; color: var(--bn-teksti2); margin-top: 2px;
}
.bn-summa .bn-alv { font-size: .79rem; color: var(--bn-himmea); margin-top: 6px; }
.bn-aika-r { margin-top: 15px; font-size: .84rem; color: var(--bn-himmea); display: flex; justify-content: space-between; gap: 10px; }
.bn-aika-r b {
  color: var(--bn-teksti2); font-weight: 400;
  font-family: var(--wp--preset--font-family--mono, monospace);
}
.bn-tulema { margin-top: 16px; padding: 13px 15px; border-radius: 10px; font-size: .88rem; }
.bn-sitova { background: rgba(163, 227, 85, .09); border: 1px solid var(--bn-tumma); }
.bn-tarjous { background: rgba(251, 208, 15, .07); border: 1px solid rgba(251, 208, 15, .38); }
.bn-tulema .bn-o {
  margin-bottom: 5px;
  font-family: var(--wp--preset--font-family--mono, monospace);
  font-size: 10px; letter-spacing: .11em; text-transform: uppercase;
}
.bn-sitova .bn-o { color: var(--bn-lime); }
.bn-tarjous .bn-o { color: var(--bn-kelta); }
.bn-tulema p { margin: 0; color: var(--bn-teksti2); font-size: .86rem; }

/* ---------- navi ---------- */

.bn-navi {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  padding: 18px clamp(24px, 3.4vw, 40px);
  border-top: 1px solid var(--bn-raja); background: var(--bn-pohja);
}
.bn-nappi {
  background: none;
  border-radius: 10px; padding: 14px 26px;
  font-weight: 600; font-size: 1rem; border: 2px solid transparent;
}
.bn-paa { background: var(--bn-lime); color: var(--bn-nappi-teksti); border-color: var(--bn-lime); }
.bn-paa:hover { background: var(--bn-lime2); border-color: var(--bn-lime2); color: var(--bn-nappi-teksti); }
.bn-paa:disabled {
  background: transparent; color: var(--bn-himmea);
  border-color: var(--bn-raja); cursor: default;
}
.bn-toinen { color: var(--bn-teksti2); border-color: var(--bn-raja); }
.bn-toinen:hover { color: var(--bn-teksti); border-color: var(--bn-himmea); }
.bn-navi .bn-vali { flex: 1; }
.bn-soita { color: var(--bn-lime2); font-size: .89rem; text-underline-offset: 3px; }

/* ---------- mobiilipalkki ---------- */

.bn-mob { display: none; background: var(--bn-kortti); border: 0; }
@container bnw (max-width: 899px) {
  .bn-mob {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    width: 100%; padding: 14px 24px; text-align: left;
    background: var(--bn-kortti); border-top: 1px solid var(--bn-raja);
  }
  .bn-mob .bn-v {
    display: block;
    font-family: var(--wp--preset--font-family--mono, monospace);
    font-size: 1.05rem; color: var(--bn-lime);
  }
  .bn-mob .bn-o { display: block; font-size: .84rem; color: var(--bn-himmea); }
  .bn-paneeli { display: none; }
  .bn-paneeli.bn-auki { display: block; }
}

.bn-widget :focus-visible { outline: 2px solid var(--bn-lime); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .bn-widget * { transition: none !important; } }

/* ---------- varajärjestelmä ---------- */

.bn-noscript {
  padding: 16px 20px; margin-bottom: 20px;
  background: var(--wp--preset--color--pohja-2, #131E17);
  border-left: 3px solid var(--wp--preset--color--vihrea, #A3E355);
  border-radius: 0 8px 8px 0;
}
.bn-noscript p { margin: 0; font-size: .95rem; }

/* ---------- toimialan tarkennus ---------- */

/*
 * "Jokin muu" avaa kentän. Ilman sitä valinta kertoo vain sen, ettei
 * mikään viidestä sopinut — eikä sitä, mitä yritys oikeasti tekee.
 */
.bn-tarkennus {
  margin: 12px 0 0 40px; max-width: 480px;
  animation: bn-avaudu .18s ease-out;
}
@keyframes bn-avaudu {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .bn-tarkennus { animation: none; } }

/* ---------- kappalelaskuri ---------- */

.bn-laskuri {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px;
  border-top: 1px solid var(--bn-raja);
}
.bn-lask-nappi {
  width: 38px; height: 38px; flex: 0 0 auto;
  background: var(--bn-kortti); border: 2px solid var(--bn-raja);
  border-radius: 9px; font-size: 1.2rem; line-height: 1;
  color: var(--bn-teksti);
}
.bn-lask-nappi:hover:not(:disabled) { border-color: var(--bn-lime); }
.bn-lask-nappi:disabled { opacity: .35; cursor: default; }
.bn-lask-luku {
  min-width: 32px; text-align: center;
  font-family: var(--wp--preset--font-family--mono, monospace);
  font-size: 1.15rem; color: var(--bn-teksti);
}
.bn-lask-yksikko { color: var(--bn-himmea); font-size: .9rem; flex: 1; }
.bn-lask-hinta {
  font-family: var(--wp--preset--font-family--mono, monospace);
  font-size: 1rem; color: var(--bn-lime2); white-space: nowrap;
}

/* Porrastetun hinnan vihje kortissa ennen valintaa. */
.bn-seuraava {
  display: block; margin-top: 2px;
  font-size: .74rem; color: var(--bn-himmea); font-weight: 400;
}

/* Ryhmän selite: miksi ilme voi maksaa enemmän kuin sivusto. */
.bn-ryhma-selite {
  margin: -4px 0 14px; max-width: 56ch;
  font-size: .92rem; color: var(--bn-himmea);
}

/* ---------- kuvaus kortin sisällä ---------- */

/*
 * Erotinviiva, ei omaa laatikkoa: rivi kuuluu samaan korttiin kuin
 * valinta sen yläpuolella.
 */
.bn-lisatieto { border-top: 1px solid var(--bn-raja); }
.bn-lisa-kehys > .bn-lisatieto { padding: 0 18px; }
.bn-iso-kehys > .bn-lisatieto { padding: 0 22px; }

/*
 * ⚠ NOLLAUSANSA. Ilman omaa taustaa ja reunaa selain piirtää oman
 * vaalean nappityylinsä tummalle pohjalle. Sama ansa on osunut jo
 * kolmesti — jokainen nappi asettaa taustansa ja reunansa itse.
 */
.bn-lue {
  background: none; border: 0;
  display: flex; align-items: center; gap: 7px;
  width: 100%; padding: 11px 0;
  font-size: .87rem; color: var(--bn-lime2);
  text-decoration: underline; text-underline-offset: 3px;
}
.bn-nuoli { font-size: .58rem; text-decoration: none; }
.bn-lisatieto-teksti {
  font-size: .91rem; line-height: 1.62; color: var(--bn-teksti2);
  max-width: 62ch; padding: 0 0 15px;
}
.bn-lisatieto-linkki {
  color: var(--bn-lime2); white-space: nowrap;
  text-underline-offset: 3px;
}

/* ---------- laskuri kortin sisällä ---------- */


/* ---------- hintasarakkeen linjaus ---------- */

/*
 * Porrastetun hinnan vihje ("seuraavat 390 €") teki rivistä kahden
 * rivin korkuisen ja siirsi hinnan pois muiden linjasta. Kiinteä leveys
 * suoristaa sarakkeen — mutta VAIN leveässä näkymässä: puhelimessa 132
 * pikseliä hintasaraketta työnsi kortin ulos ruudulta, ja koska widget
 * leikkaa ylivuodon, teksti katkesi oikeasta reunasta.
 */
@container bnw (min-width: 620px) {
  .bn-lisa .bn-h { min-width: 132px; text-align: right; align-self: center; }
}

.bn-alv-pieni {
  font-family: inherit; font-size: .72rem; color: var(--bn-himmea);
  letter-spacing: 0;
}

/* ---------- sopimusehtojen ikkuna ---------- */

.bn-ehdot-lue {
  /* Sama nollausansa kuin .bn-lue: ilman taustaa ja reunaa selain
     piirtaa oman nappityylinsa, eli vaalean laatikon tummalle. */
  background: none; border: 0;
  margin: -8px 0 18px; padding: 0;
  font-size: .9rem; color: var(--bn-lime2);
  text-decoration: underline; text-underline-offset: 3px;
}

.bn-modaali-tausta {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(5, 7, 6, .82);
  display: grid; place-items: center; padding: 20px;
}
.bn-modaali {
  background: #0D140F; border: 1px solid var(--bn-raja);
  border-radius: 14px; width: min(760px, 100%);
  max-height: min(84vh, 900px); display: flex; flex-direction: column;
  color: var(--bn-teksti);
}
.bn-modaali-yla {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--bn-raja);
}
.bn-modaali-yla h2 { margin: 0; font-size: 1.25rem; color: var(--bn-teksti); }
.bn-modaali-sulje {
  width: 38px; height: 38px; flex: 0 0 auto; border-radius: 9px;
  font-size: 1.5rem; line-height: 1; color: var(--bn-himmea);
  border: 1px solid var(--bn-raja); background: none;
}
.bn-modaali-sulje:hover { color: var(--bn-teksti); border-color: var(--bn-himmea); }
.bn-modaali-runko {
  overflow-y: auto; padding: 22px 24px 28px;
  font-size: .94rem; line-height: 1.62; color: var(--bn-teksti2);
}
.bn-modaali-runko h2 {
  font-size: 1.08rem; margin: 26px 0 8px; color: var(--bn-teksti);
}
.bn-modaali-runko h3 {
  font-size: .98rem; margin: 20px 0 6px; color: var(--bn-teksti);
}
.bn-modaali-runko p { margin: 0 0 12px; }
.bn-modaali-runko ul { margin: 0 0 14px; padding-left: 1.3em; }
.bn-modaali-runko li { margin-bottom: 6px; }
.bn-modaali-runko a { color: var(--bn-lime2); }
.bn-modaali-runko table { width: 100%; font-size: .9rem; margin-bottom: 14px; }
.bn-modaali-runko td, .bn-modaali-runko th {
  padding: 8px 12px 8px 0; border-bottom: 1px solid var(--bn-raja); text-align: left;
}
.bn-modaali-runko .mono { font-size: .82rem; color: var(--bn-himmea); }

.bn-sopii { width: fit-content; align-self: flex-start; white-space: nowrap; }