/* ══════════════════════════════════════════════════════════════════
   Register V2 — kuori ilmeeseen v2 ("Muste, vihreä, ruoste")

   Rekisteröinnin sisältö migroitiin 25.8.2026, mutta se istui yhä vanhassa
   Northern Lights -kuoressa: kaksi radiaaligradienttia sivun taustalla, kaksi
   sumennettua vihreää palloa `::before`/`::after`-pseudoelementteinä, kelluva
   lasikortti otsikkopalkkina ja vihreä ensisijainen painike. Vahvistusnäyttö
   näytti asiakirjalta, jonka päälle oli liimattu toisen tuotteen kromi.

   Tämä tiedosto ladataan VIIMEISENÄ ja se kumoaa kuoren, ei sisältöä. Vanhat
   `base.css` ja `steps.css` jäävät toistaiseksi paikalleen, koska ne kantavat
   yhä lomakkeiden, kertakoodikenttien ja laskutusnäkymän tyylit. Ne puretaan
   omassa muutoksessaan (MIGRAATIO.md vaihe 4).

   Malli: `docs/console/ilmekirja/luonnos-rekisterointi.html` ja jo migroitu
   kirjautumissivu (`pages/auth/auth-shell.css`). Sama kuori molemmissa:
   ylärivi logo + kieli + teema, sitten yksi palsta paperilla.

   **Miksi `#registerV2App`.** `base.css` kirjoittaa komponenttisääntöjä
   teemaskoopin sisään: juurielementin teemamääre plus komponenttiluokka,
   tarkkuus 0,2,1. Pelkkä luokka (0,1,0) häviää niille latausjärjestyksestä
   riippumatta, ja lopputulos on hiljainen: vaalea teema näytti yhä vanhalta
   vaikka tumma oli jo korjattu. Id-skooppi (1,0,0) voittaa ne kaikki.

   Tämä on siirtymäkeino eikä tapa. Kun `base.css` puretaan (MIGRAATIO.md
   vaihe 4), teemaskooppisäännöt katoavat ja id-skooppi voidaan poistaa
   tästä tiedostosta. STYLEGUIDE §7: teema on pelkkä tokenlohko, eikä
   komponentin kuulu tietää teemaa.
   ══════════════════════════════════════════════════════════════════ */

/* ── Pinta: paperi, ei gradienttia ─────────────────────────────── */

#registerV2App {
  background: var(--paper);
  color: var(--ink);
  padding: 0;

  /* Pystykeskitys, kuten ilmekirjan `.ashell`. Leveällä näytöllä 440 px:n
     lomake ylälaidassa näyttää keskeneräiseltä; keskitettynä se on
     yksi asia yhdellä sivulla.

     Auto-marginaalit eivät `justify-content: center`in tapaan leikkaa
     ylivuotoa: kun sisältö on ruutua korkeampi (vahvistusnäyttö,
     laskutus), se alkaa ylhäältä ja vierii normaalisti. Ylärivi on
     irrotettu virrasta, jotta se pysyy sivun yläreunassa eikä osallistu
     keskitykseen. */
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* Kaksi sumennettua vihreää palloa. Ne olivat koko sivun ainoa väri, ja
   ilmeessä vihreä on varattu edistymiselle ja vahvistukselle. */
#registerV2App::before,
#registerV2App::after {
  content: none;
}

/* ── Ylärivi ───────────────────────────────────────────────────── */

#registerV2App .regv2-journey-hero {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
  max-width: none;
  backdrop-filter: none;
}
#registerV2App .regv2-journey-hero::before,
#registerV2App .regv2-journey-hero::after {
  content: none;
}

/* Ylärivi ankkuroituu juureen, ei ylätekstilohkoon.

   `base.css` antaa `.regv2-journey-hero`lle `position: relative`, joten se
   oli lähin sijoitettu esi-isä ja ylärivi seurasi sitä. Kun hero on
   pystykeskitetty (`margin-top: auto`), ylärivi valui marginaalin verran
   alas — 140 px mitattuna test.suunta.ai:ssa 765 px korkeassa ikkunassa.

   Vika ei näkynyt lokaalisti, koska matalammassa ikkunassa keskitysmarginaali
   oli nolla: sama koodi, eri ikkunan korkeus. */
#registerV2App .regv2-journey-hero { position: static; }

#registerV2App .regv2-journey-hero__utility {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 78px;
  padding: 0 24px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  border-radius: 0;
  margin: 0;
  max-width: none;
}

#registerV2App .regv2-header__logo-img { height: 21px; width: auto; }

/* ── Otsikkoalue: teksti paperilla, ei kortti ──────────────────── */

#registerV2App .regv2-journey-hero__intro {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 56px 24px 0;
  margin: 0 auto;
  max-width: 768px;   /* 720 palsta + 24 kummallakin puolen */
}
#registerV2App .regv2-journey-hero__intro-main {
  display: block;
  gap: 0;
}

/* Ikoniympyrä. Ilmeessä ei ole värillisiä ikonisäiliöitä: merkitys on
   sanassa ja paikassa, ei kuvakkeen taustassa. */
#registerV2App .regv2-journey-hero__icon { display: none; }

#registerV2App .regv2-journey-hero__title {
  font-size: 28px;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: var(--tracking-tighter, -0.022em);
  color: var(--ink);
  margin: 0 0 10px;
  text-wrap: balance;
}
#registerV2App .regv2-journey-hero__subtitle {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
  max-width: 58ch;
}

/* ── Kisko: kaksi ruutua, ei kortti ────────────────────────────
   "Aika on ruutuja" (STYLEGUIDE): kausi ja polun kulku piirretään
   diskreetteinä yksikköinä, ei jatkuvana palkkina. Kaksi askelta on
   rehellinen lupaus ja se pidetään; vain sen muoto vaihtuu. */

#registerV2App .regv2-progress {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin: 0 auto;
  max-width: 768px;   /* 720 palsta + 24 kummallakin puolen */
}
#registerV2App .regv2-progress__rail {
  display: flex;
  border-radius: 0;
  gap: 24px;
  padding: 22px 24px 0;
  border: 0;
  background: none;
  /* Kisko oli oma korttinsa: läpinäkyvä tausta mutta varjo, joka piirsi
     laatikon otsikon alle. Varjoja ei ole (sääntö 2). */
  box-shadow: none;
}
#registerV2App .regv2-progress__item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 0;
  padding: 0;
  font: 500 12px var(--mono, 'IBM Plex Mono', monospace);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
/* Merkki on badge itse: 8 px geometriaa, ei ruksilaatikkoa eikä numeroa.
   STYLEGUIDE: tilamerkki on 8 px geometria + sana, eikä merkki ole koskaan
   ainoa koodi — sana on aina vieressä. */
#registerV2App .regv2-progress__item-badge {
  width: 8px;
  height: 8px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-cell, 2px);
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--ink-4);
  flex: none;
  font-size: 0;
  overflow: hidden;
}
#registerV2App .regv2-progress__item-check,
#registerV2App .regv2-progress__item-index { display: none; }

#registerV2App .regv2-progress__item.is-active { color: var(--ink); }
#registerV2App .regv2-progress__item.is-active .regv2-progress__item-badge {
  background: var(--ink);
  box-shadow: none;
}
#registerV2App .regv2-progress__item.is-complete { color: var(--green-deep); }
#registerV2App .regv2-progress__item.is-complete .regv2-progress__item-badge {
  background: var(--green);
  box-shadow: none;
}

/* ── Sisältö: yksi palsta paperilla ────────────────────────────── */

#registerV2App .regv2-content {
  max-width: 768px;   /* 720 palsta + 24 kummallakin puolen */
  margin: 0 auto;
  padding: 40px 24px 96px;
}

/* Askelkortit. Sisältö jää, säiliö katoaa: ilmeessä ei ole kortteja
   eikä varjoja, ja erottimet ovat 1 px hiusviivoja. */
#registerV2App .regv2-card,
#registerV2App .regv2-step {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  backdrop-filter: none;
}
#registerV2App .regv2-card::before,
#registerV2App .regv2-card::after {
  content: none;
}

/* ── Painikkeet ────────────────────────────────────────────────
   Sääntö 1: ensisijainen painike on muste, ei vihreä. Vihreä on
   edistyminen ja vahvistus, ei toiminto. */

#registerV2App .regv2-btn--primary {
  background: var(--ink);
  color: var(--paper);
  border: 0;
  box-shadow: none;
  font-weight: 500;
}
#registerV2App .regv2-btn--primary:hover:not(:disabled) {
  background: var(--btn-hover, var(--ink-2));
  transform: none;
  box-shadow: none;
}
#registerV2App .regv2-btn--primary:disabled { opacity: 0.45; }

#registerV2App .regv2-btn--ghost,
#registerV2App .regv2-btn--secondary {
  background: var(--paper);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line);
  border: 0;
}
#registerV2App .regv2-btn--ghost:hover:not(:disabled),
#registerV2App .regv2-btn--secondary:hover:not(:disabled) {
  background: var(--wash);
  transform: none;
}

/* Nosto hoverissa: ilmeessä hover on väri, ei liike. */
#registerV2App .regv2-btn:hover { transform: none; }

/* ── Erotin askel 2:n sisällä ──────────────────────────────────── */

#registerV2App .regv2-rule {
  border: 0;
  border-top: 1px solid var(--line);
  /* Lomake on flex-pino jonka oma väli on 18 px. Viivan 6 px kummallakin
     puolen tekee siitä mockupin 24 px, ja väli on symmetrinen: ennen tätä
     yläväli oli 50 ja alaväli 46. */
  margin: 6px 0;
}


/* ── Yläriviin: ei pillereitä ──────────────────────────────────
   Sääntö 3: pillerit eivät ole ilmeen sanastoa. Teemakytkin ja
   kielivalitsin olivat kelluvia kapseleita joilla oli oma gradientti,
   reuna ja varjo — kolme kromikerrosta kahdelle kontrollille. Malli on
   jo migroidulla kirjautumissivulla (`auth-shell.css`): pelkkä teksti
   ja ikoni, hover on väri. */

#registerV2App .regv2-theme-control,
#registerV2App .regv2-lang__trigger {
  background: none;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  backdrop-filter: none;
}

#registerV2App .regv2-theme-switch {
  background: none;
  border: 0;
  box-shadow: none;
  width: auto;
  height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 4px;
}
/* Liukuva nuppi on pillerin osa eikä toimi ilman sitä. Aktiivinen teema
   näkyy ikonin värissä. */
#registerV2App .regv2-theme-switch__thumb { display: none; }
#registerV2App .regv2-theme-switch__icon {
  font-size: 14px;
  color: var(--ink-3);
  transition: color .15s var(--ease, ease);
}
#registerV2App .regv2-theme-switch:hover .regv2-theme-switch__icon { color: var(--ink-2); }

/* Kumpi teema on päällä. Tämä on ainoa komponentti jonka KUULUU tietää
   teema, koska se näyttää sen — mutta se ei lue sitä teemaskoopista vaan
   omasta tilastaan: `main.js` asettaa `aria-checked`in, joka on tosi kun
   teema on vaalea. Näin sääntö "teema on pelkkä token" pysyy voimassa:
   komponentti lukee omaa tilaansa, ei juurielementin määrettä. */
#registerV2App .regv2-theme-switch[aria-checked="true"] .regv2-theme-switch__icon:first-of-type,
#registerV2App .regv2-theme-switch[aria-checked="false"] .regv2-theme-switch__icon:last-of-type {
  color: var(--ink);
}

#registerV2App .regv2-lang__trigger {
  height: 32px;
  padding: 0 4px;
  color: var(--ink-3);
  font-size: 13px;
  font-weight: 500;
  gap: 8px;
}
#registerV2App .regv2-lang__trigger:hover { color: var(--ink); background: none; }
#registerV2App .regv2-lang__btn-chevron { font-size: 12px; }

/* Kielivalikko: paperi ja hiusviiva, ei lasia. */
#registerV2App .regv2-lang__menu {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-field, 6px);
  box-shadow: none;
  backdrop-filter: none;
}
#registerV2App .regv2-lang__option { border-radius: 0; }
#registerV2App .regv2-lang__option:hover { background: var(--wash); }

/* ── Loput hehkut ─────────────────────────────────────────────
   Kolme radiaalia jotka jäivät: SSO-lohkon vihreä, kokeilulohkon ruoste
   ja vendor-merkkien taustat. Ilmeessä värillinen tausta on vain
   `--rust-tint`, ja sekin vain poikkeamalle. */

#registerV2App .regv2-sso,
#registerV2App .regv2-trial-hero,
#registerV2App .regv2-sso-btn__mark {
  background: none;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
}
#registerV2App .regv2-sso-btn {
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line);
  border: 0;
}
#registerV2App .regv2-sso-btn:hover { background: var(--wash); transform: none; }


/* ══════════════════════════════════════════════════════════════════
   Laskutusnäyttö (askel F)

   Varapolku: automaattinen kokeilu ohittaa tämän, mutta virhetilanne ja
   maksullisen tilauksen valinta tulevat tänne. Se oli koko polun viimeinen
   näyttö joka huusi vanhaa tyylikieltä: kaksi korttia värillisine
   yläraitoineen, pillerit ominaisuuksille, vihreät ikoniruudut, vihreä
   reunustettu painike ja edistymispalkki.
   ══════════════════════════════════════════════════════════════════ */

/* Kortit lohkoiksi: 1 px hiusviiva, ei varjoa, ei pyöristystä. */
#registerV2App .regv2-plan-card,
#registerV2App .regv2-trial-hero,
#registerV2App .regv2-billing-stage,
#registerV2App .regv2-billing-stage__primary,
#registerV2App .regv2-billing-stage__secondary,
#registerV2App .regv2-checkout-note,
#registerV2App .regv2-billing-option {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-field, 6px);
  box-shadow: none;
  backdrop-filter: none;
}
#registerV2App .regv2-billing-stage__primary::before,
#registerV2App .regv2-billing-stage__primary::after,
#registerV2App .regv2-billing-stage__secondary::before,
#registerV2App .regv2-billing-stage__secondary::after,
#registerV2App .regv2-plan-card::before,
#registerV2App .regv2-plan-card::after,
#registerV2App .regv2-trial-hero::before,
#registerV2App .regv2-trial-hero::after,
#registerV2App .regv2-billing-stage::before,
#registerV2App .regv2-billing-stage::after {
  content: none;
}

/* Värillinen yläraita. Se koodasi merkityksen väriin ilman sanaa, ja
   ilmeessä väri ei tee kahta asiaa. Valinta näkyy reunan painossa. */
#registerV2App .regv2-plan-card__selected,
#registerV2App .regv2-plan-card__badge,
#registerV2App .regv2-savings-badge {
  background: none;
  box-shadow: none;
  border: 0;
}
#registerV2App .regv2-plan-card__badge,
#registerV2App .regv2-savings-badge {
  color: var(--ink-3);
  font: 500 12px var(--mono, 'IBM Plex Mono', monospace);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0;
}
#registerV2App .regv2-plan-card.regv2-plan-card--active,
#registerV2App .regv2-plan-card--recommended.regv2-plan-card--active {
  border-color: var(--ink);
}

/* Pillerit ominaisuuslistassa. Sääntö 3: pilleri ei ole ilmeen sanastoa.
   Ominaisuus on rivi, ja rivit erottaa hiusviiva. */
#registerV2App .regv2-trial-chip,
#registerV2App .regv2-pill__label,
#registerV2App .regv2-billing-toggle {
  background: none;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}
/* Kolme ominaisuutta olivat kolme riviä, joilla jokaisella oli oma
   värillinen ikoni (vihreä, indigo, kulta). Ne ovat yksi tieto: mitä
   kokeilussa saa. Yhdellä rivillä pisteellä erotettuna se on kolme
   sekuntia lyhyempi lukea, eikä yksikään rivi väitä olevansa tila. */
#registerV2App .regv2-trial-hero__perks-chips {
  display: block;
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink-2);
}
#registerV2App .regv2-trial-chip {
  display: inline;
  color: var(--ink-2);
  font-size: 13px;
}
#registerV2App .regv2-trial-chip + .regv2-trial-chip::before {
  content: " · ";
  color: var(--ink-3);
}

/* Vihreät ikoniruudut. Merkitys on sanassa, ei kuvakkeen taustassa. */
#registerV2App .regv2-trial-hero__icon,
#registerV2App .regv2-plan-card__icon,
#registerV2App .regv2-billing-option__icon,
#registerV2App .regv2-card__icon {
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--ink-3);
}

/* Edistymispalkki. "Aika on ruutuja, ei koskaan jatkuvana palkkina."
   Onnistumisnäytön palkki mittasi aikaa jota ei ole. */
#registerV2App .regv2-success__progress,
#registerV2App .regv2-success__progress-bar {
  display: none;
}

/* Onnistumisnäytön hehkut. Sama kuvio kuin sivun taustalla: kaksi
   sumennettua palloa pseudoelementteinä. */
#registerV2App #billingSuccess::before,
#registerV2App #billingSuccess::after,
#registerV2App .regv2-success::before,
#registerV2App .regv2-success::after {
  content: none;
}

/* Vihreä reunustettu toissijainen painike. Ilmeessä vihreä on edistyminen
   ja vahvistus; toiminto on muste.

   `__secondary` on lohko eikä painike, ja se oli aiemmin tässä samassa
   säännössä: se sai painikkeen 1 px kehyksen ympärilleen ja muuttui
   kortiksi (sääntö 2). Sarakkeiden ero on hiusviiva niiden välissä. */
#registerV2App .regv2-btn--outline {
  background: var(--paper);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line);
  border: 0;
}
#registerV2App .regv2-btn--outline:hover:not(:disabled) {
  background: var(--wash);
  color: var(--ink);
  transform: none;
}
#registerV2App .regv2-billing-stage__secondary {
  background: none;
  box-shadow: none;
  border-radius: 0;
}


/* Kolme sisäkkäistä kehystä. `.regv2-billing-stage` kehysti kaksi saraketta,
   `__primary` kehysti toisen niistä ja `.regv2-trial-hero` kehysti sen
   sisällön: sama sisältö rajattiin kolmesti. Ulompi rajaus riittää, ja
   sarakkeiden väli on hiusviiva. */
#registerV2App .regv2-billing-stage {
  border: 0;
  border-radius: 0;
  /* Oma 720 px:n rajaus ja keskitys jättivät lohkon 44 px otsikkoa
     sisemmäs: sivulla oli taas kaksi vasenta reunaa. Palstan leveyden
     päättää `.regv2-content`, ei yksittäinen lohko. */
  max-width: none;
  margin-inline: 0;
}
#registerV2App .regv2-billing-stage__primary,
#registerV2App .regv2-billing-stage__secondary {
  border: 0;
  border-radius: 0;
}
/* Toissijainen sarake: hiusviiva erottaa, ja sen jälkeen tulee ilmaa.
   Sarakkeen oma pehmuste on 0, koska palstan reuna on sen reuna. */
#registerV2App .regv2-billing-stage__secondary {
  border-left: 1px solid var(--line);
  padding: 0 0 0 32px;
}
#registerV2App .regv2-billing-stage__primary,
#registerV2App .regv2-trial-hero {
  padding: 0;
}
#registerV2App .regv2-trial-hero {
  border: 0;
  border-radius: 0;
  /* Kolme sisäkkäistä pehmustetta (sisältö 22 + sarake 16 + lohko 16)
     kasasivat 54 px:n aukon johtolauseen ja ensimmäisen rivin väliin.
     Pystyrytmi tulee sisällöltä, ei kolmelta säiliöltä. */
  padding: 0;
  gap: 14px;
}
#registerV2App .regv2-billing-stage__primary {
  padding: 0;
  gap: 22px;
}
#registerV2App .regv2-billing-stage { gap: 32px; }
#registerV2App .regv2-trial-hero__header { gap: 0; }

/* Ikonit ominaisuusriveillä. Sääntö 5: terve rivi on hiljainen, ja vain
   poikkeama saa värin. Nämä ovat kaikki terveitä rivejä. */
#registerV2App .regv2-trial-chip__icon,
#registerV2App .regv2-trial-hero__icon,
#registerV2App .regv2-billing-option__icon i,
#registerV2App .regv2-billing-side__list i,
#registerV2App .regv2-plan-card__features i {
  color: var(--ink-3);
  background: none;
  box-shadow: none;
}

/* Grid- ja flex-itemin oletus on `min-width: auto`, eli se ei kutistu
   sisältönsä min-content-leveyttä pienemmäksi. Kokeilulohkon otsikkorivi
   oli siksi 373 px leveä 311 pikselin säiliössä: 38 px sisältöä valui
   ulos, ja koska jokin ylempi lohko leikkaa ylivuodon, teksti katkesi
   näkymättömiin ilman vaakavieritystä. Mitattu 375 px, "Saat {cr…". */
#registerV2App .regv2-trial-hero > *,
#registerV2App .regv2-trial-hero__header,
#registerV2App .regv2-trial-hero__copy,
#registerV2App .regv2-billing-stage > *,
#registerV2App .regv2-billing-side__list li,
#registerV2App .regv2-trial-chip {
  min-width: 0;
}
#registerV2App .regv2-trial-chip { white-space: normal; }

/* Koriste-ikoni otsikon vieressä. Se vei 60 px palstasta kertomatta
   mitään mitä otsikko ei jo sano, ja mobiilissa se työnsi tekstin
   kapeaan kaistaan. */
#registerV2App .regv2-trial-hero__icon { display: none; }

/* Käyttäjämäärän valitsin. Pyöreä on ilmeessä varattu segmenttivalitsimelle
   (`--radius-ctl`); tavallinen painike on `--radius-field`. */
#registerV2App .regv2-seat-stepper__btn {
  border-radius: var(--radius-field, 6px);
  width: 36px;
  height: 36px;
  min-width: 0;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink);
}
#registerV2App .regv2-seat-stepper__btn:hover:not(:disabled) {
  background: var(--wash);
  transform: none;
}
#registerV2App .regv2-seat-stepper__input {
  height: 36px;
  min-height: 0;
  width: 56px;
  border-radius: var(--radius-field, 6px);
}

@media (max-width: 760px) {
  #registerV2App .regv2-billing-stage__secondary {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-top: 24px;
  }
  #registerV2App .regv2-billing-stage { gap: 24px; }
  #registerV2App .regv2-billing-stage__secondary { padding: 24px 0 0; }
}

/* ══════════════════════════════════════════════════════════════════
   Lomakkeet: hiusviiva, ei varjoa

   Kentillä oli pudotusvarjo joka nosti ne paperin pinnalta. Ilmeessä syöte
   on 1 px `--line` -viiva paperilla (STYLEGUIDE §11), ja fokus on vihreä
   rengas. Varjo teki jokaisesta kentästä pienen kortin, ja kortteja ei ole.
   ══════════════════════════════════════════════════════════════════ */

#registerV2App .regv2-form__input,
#registerV2App .regv2-form__select,
#registerV2App .regv2-otp__digit,
#registerV2App .regv2-order-summary,
#registerV2App .regv2-success__next-step,
#registerV2App .regv2-seat-stepper__btn {
  box-shadow: none;
  background: var(--paper);
  border: 1px solid var(--line);
}

#registerV2App .regv2-form__input:focus,
#registerV2App .regv2-form__select:focus,
#registerV2App .regv2-otp__digit:focus {
  border-color: var(--ink-3);
  outline: 2px solid var(--green);
  outline-offset: 2px;
  box-shadow: none;
}

/* Kertakoodin numeroruudut ovat aikaa ruutuina: kuusi yhtä suurta yksikköä
   samalla viivalla, ei kuusi pientä korttia. */
#registerV2App .regv2-otp__digit {
  border-radius: var(--radius-field, 6px);
  font-variant-numeric: tabular-nums;
}

/* Onnistumisnäytön seuraava askel: rivi, ei kohotettu laatikko. */
#registerV2App .regv2-success__next-step {
  border-radius: var(--radius-field, 6px);
}

/* Nimeämättömät kohotetut spanit: SSO-erottimen merkki ja onnistumisnäytön
   askelnumerot. Molemmat olivat pieniä kelluvia ympyröitä. */
#registerV2App .regv2-sso-divider > span,
#registerV2App .regv2-success__next-step > span {
  box-shadow: none;
  background: none;
}

/* ══════════════════════════════════════════════════════════════════
   Lomake: yksi akseli, mockupin mitat

   Mitattu 26.8.2026 test.suunta.ai:sta: otsikko alkoi vasemmalta x=276,
   kisko x=252 ja lomake x=300. Kolme akselia yhdellä sivulla, ja silmä
   etsii jokaisen erikseen. Sivu tuntui rauhattomalta vaikka jokainen osa
   oli erikseen siisti.

   Kaksi juurisyytä:
   1. `base.css` kirjoittaa kortin sisennyksen tarkkuudella
      `#registerV2App[data-active-step="A"] .regv2-card` (1,2,0), joka
      voittaa tämän tiedoston `#registerV2App .regv2-card`-nollauksen
      (1,1,0) latausjärjestyksestä riippumatta. Kortin 24 px jäi.
   2. Palsta oli 720 px leveä. Lomakekenttä sen levyisenä ei ole kenttä
      vaan raita, ja `justify-content: flex-end` heitti painikkeen
      vastakkaiseen laitaan kuin otsikon.

   Malli: `docs/console/ilmekirja/luonnos-rekisterointi.html`, `.acol`
   (440 px palsta, `.wide` 720 px vahvistusnäytölle).
   ══════════════════════════════════════════════════════════════════ */

#registerV2App {
  /* 440 palsta + 24 kummallakin puolen. Vahvistusnäyttö tarvitsee
     marginaalisarakkeen (168 + 32 + 520) ja saa mockupin `.acol.wide`-mitan. */
  --reg-col: 488px;
}
#registerV2App[data-active-step="Confirm"],
#registerV2App[data-active-step="B"],
#registerV2App[data-active-step="F"] {
  --reg-col: 768px;
}

#registerV2App .regv2-journey-hero__intro,
#registerV2App .regv2-progress,
#registerV2App .regv2-content {
  max-width: var(--reg-col);
  /* Flex-itemissä `margin: 0 auto` imee vapaan tilan ja kutistaa itemin
     sisältönsä levyiseksi: ylärivin siirto flexiksi kavensi otsikon 488
     pikselistä 316:een ja keskitti sen, jolloin otsikko ja lomake olivat
     taas eri akselilla. `width: 100%` palauttaa mitan, ja auto-marginaali
     tekee sen mitä sen kuuluu tehdä eli keskittää palstan. */
  width: 100%;
}

/* ── Kisko otsikon yläpuolelle ─────────────────────────────────
   Kisko oli otsikon ja lomakkeen VÄLISSÄ, tyhjää molemmin puolin. Se
   katkaisi otsikon ja sen lomakkeen toisistaan. Mockupissa mono-rivi on
   otsikon yllä ja kiinni siinä: se kertoo missä ollaan ennen kuin
   otsikko kertoo mitä tehdään. */
#registerV2App .regv2-journey-hero {
  display: flex;
  flex-direction: column;
}
#registerV2App .regv2-journey-hero__utility { order: 0; }
#registerV2App .regv2-progress { order: 1; }
#registerV2App .regv2-journey-hero__intro { order: 2; }

#registerV2App .regv2-progress__rail { padding: 0 24px; min-height: 0; }
#registerV2App .regv2-progress { padding: 56px 0 0; }
#registerV2App .regv2-journey-hero__intro { padding: 14px 24px 0; }

/* Pystyrytmi luetaan yhdestä paikasta. Ennen tätä väli alaotsikosta
   ensimmäiseen kenttään oli 68 px ja se syntyi kolmesta eri säännöstä
   (heron alamarginaali 16 + sisällön yläpehmuste 26 + lohkon oma 26).
   Kolme lähdettä on kolme paikkaa jossa rytmi voi liukua. */
/* Askelkohtainen tarkkuus, koska `base.css` kirjoittaa nämä muodossa
   `#registerV2App[data-active-step="A"] …` (1,2,0). Pelkkä `#registerV2App …`
   (1,1,0) häviää sille latausjärjestyksestä riippumatta, ja häviö on
   hiljainen: sääntö näkyy tiedostossa mutta ei sivulla. Sama ansa osui
   sekä kortin sisennykseen että ylärivin alamarginaaliin. */
#registerV2App .regv2-journey-hero,
#registerV2App[data-active-step] .regv2-journey-hero { margin-bottom: 0; }
#registerV2App .regv2-content { padding: 26px 24px 96px; }

/* `base.css` levittää laskutusnäytön ylärivin, sisällön ja askeleen 880
   pikseliin samalla askeltarkkuudella. Palstan leveys luetaan
   `--reg-col`:sta, jotta se on yhdessä paikassa.

   Ylärivi on mukana tarkoituksella: kun se jäi 880 pikseliin ja sisältö
   levisi 768:aan omassa keskityksessään, otsikko alkoi 56 px ja sisältö
   136 px kohdalta. Kaksi vasenta reunaa samalla näytöllä, mitattu. */
#registerV2App[data-active-step="F"] .regv2-journey-hero,
#registerV2App[data-active-step="F"] .regv2-step[data-step="F"] {
  max-width: none;
}
#registerV2App[data-active-step="F"] .regv2-content {
  max-width: var(--reg-col);
}

/* ── Kortin sisennys pois myös askelkohtaisella tarkkuudella ──── */
#registerV2App[data-active-step] .regv2-card,
#registerV2App[data-active-step] .regv2-step {
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

/* ── Kentät: mockupin mitat ────────────────────────────────────
   50 px korkea kenttä ja 12 px radius ovat vanhan kuoren mittoja.
   Ilmeessä syöte on 40 px ja `--radius-field`. */
#registerV2App .regv2-form { gap: 18px; }
#registerV2App .regv2-form__group { gap: 8px; }
#registerV2App .regv2-form__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  letter-spacing: 0;
}
#registerV2App .regv2-form__input,
#registerV2App .regv2-form__select {
  min-height: 0;
  height: 40px;
  padding: 0 14px;
  font-size: 14px;
  border-radius: var(--radius-field, 6px);
}
#registerV2App .regv2-form__textarea {
  padding: 10px 14px;
  font-size: 14px;
  border-radius: var(--radius-field, 6px);
}
#registerV2App .regv2-form__hint {
  font-size: 12.5px;
  color: var(--ink-3);
  opacity: 1;
}
#registerV2App .regv2-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 16px;
}

/* ── Ensisijainen painike: palstan levyinen ─────────────────────
   `justify-content: flex-end` + `min-width: clamp(9.5rem, 24%, 11rem)`
   jätti painikkeen oikeaan laitaan, 720 px:n palstan toiseen päähän kuin
   otsikko. Mockupissa se on `.btn.full`: palstan levyinen, samalla
   akselilla kuin kaikki muu. */
#registerV2App .regv2-form__actions--primary {
  margin-top: 4px;
  justify-content: stretch;
}
#registerV2App .regv2-form__actions--primary .regv2-btn--primary {
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
  height: 40px;
}

/* ── Kertakoodin metarivi ──────────────────────────────────────
   Kolme erillistä riviä (vihje, painike, linkki) muuttuvat yhdeksi:
   vasemmalla mitä tapahtui, oikealla mitä voi tehdä. Mockupin
   `.otpmeta`: baseline, space-between. */
#registerV2App .regv2-otp-inputs { gap: 8px; margin: 0; }
#registerV2App .regv2-otp__digit {
  width: 48px;
  height: 54px;
  font-size: 20px;
  font-weight: 500;
}
#registerV2App .regv2-otp__meta {
  margin: 12px 0 0;
  font-size: 12.5px;
  color: var(--ink-3);
}
/* Kertakoodin vahvistus. Vihreä on ilmeessä edistyminen ja vahvistus, ja
   tämä on juuri se tapaus: koodi meni läpi. Merkki on 8 px geometriaa ja
   sana on aina mukana — tilamerkki ei ole koskaan ainoa koodi. */
#registerV2App .regv2-otp__verified {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--green-deep);
}
#registerV2App .regv2-otp__verified::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  flex: none;
}
#registerV2App .regv2-otp__verified[hidden] { display: none; }

/* Vahvistettu koodi on luettavissa mutta ei muokattavissa. Reunus kertoo
   sen ilman että ruutu himmenee: koodi on yhä tietoa. */
#registerV2App .regv2-otp__digit.is-verified {
  border-color: var(--green);
  color: var(--ink-2);
}

/* Vasemmalle tasattu, ei `space-between`: laskuri on tyhjä suurimman osan
   ajasta, ja silloin space-between heittäisi toiminnot yksin oikeaan
   laitaan. Nyt rivi alkaa samalta akselilta kummassakin tilassa. */
#registerV2App .regv2-otp__footer {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 16px;
  margin-top: 12px;
  flex-wrap: wrap;
}
#registerV2App .regv2-otp__footer .regv2-otp__meta:empty { display: none; }
#registerV2App .regv2-otp__footer .regv2-otp__meta { margin: 0; }
#registerV2App .regv2-form__actions--otp {
  margin: 0;
  padding-top: 0;
  gap: 16px;
  width: auto;
  align-items: baseline;
  justify-content: flex-start;
}
/* Uuden koodin pyytäminen on toinen teko, ei toinen painike: kehystetty
   laatikko lupasi saman painoarvon kuin tilin luonti. */
#registerV2App .regv2-form__actions--otp .regv2-btn--ghost {
  min-width: 0;
  height: auto;
  padding: 0;
  background: none;
  box-shadow: none;
  border: 0;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--ink-3);
}
#registerV2App .regv2-form__actions--otp .regv2-btn--ghost:hover:not(:disabled) {
  background: none;
  text-decoration-color: var(--ink);
}
#registerV2App .regv2-form__actions--otp .regv2-btn-link {
  margin-inline-start: 0;
  font-size: 12.5px;
  color: var(--ink-3);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--line);
}
#registerV2App .regv2-form__actions--otp .regv2-btn-link:hover {
  color: var(--ink);
  text-decoration-color: var(--ink-3);
}

/* ── Salasanasäännöt: yksi hiljainen rivi ──────────────────────
   Neljä sääntöä kahdessa sarakkeessa on neljä riviä luettavaa siinä
   kohtaa jossa ihminen keksii salasanaa. Sama tieto mahtuu yhdelle
   riville. Palaute säilyy (aria-live kertoo mikä täyttyi), mutta se ei
   enää hyppää: hehku ja `scale(1.35)` ovat vanhan kuoren liikettä
   (STYLEGUIDE sääntö 8). */
#registerV2App .regv2-password-rules {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 8px;
}
#registerV2App .regv2-password-rule {
  font-size: 12.5px;
  color: var(--ink-3);
  gap: 6px;
}
#registerV2App .regv2-password-rule::before {
  width: 6px;
  height: 6px;
  background: var(--ink-4);
  box-shadow: none;
  transform: none;
}
#registerV2App .regv2-password-rule--ok {
  color: var(--green-deep);
}
#registerV2App .regv2-password-rule--ok::before {
  background: var(--green);
  box-shadow: none;
  transform: none;
}

/* ── Kaksi väriä vierekkäin ────────────────────────────────────
   Virheteksti on ruoste ja sen sisällä oleva linkki oli vihreä. Kaksi
   semanttista väriä samassa lauseessa lukee kahtena viestinä: ruoste
   sanoo "huomio", vihreä sanoo "vahvistettu". Linkki ei ole kumpaakaan
   vaan toiminto, ja toiminto on muste. Sama koskee ehtolinkkejä. */
#registerV2App .regv2-form__error a,
#registerV2App .regv2-form__legal a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--ink-3);
}
#registerV2App .regv2-form__error a:hover,
#registerV2App .regv2-form__legal a:hover {
  text-decoration-color: var(--ink);
}
#registerV2App .regv2-form__legal {
  font-size: 12.5px;
  color: var(--ink-3);
}

/* ── SSO ei ole kortti ─────────────────────────────────────────
   `steps.css` piirtää SSO-lohkon omaksi lasikortikseen: reunus, 20 px
   pyöristys, emerald-radiaaligradientti ja varjo. Sääntö 2: kortteja ei
   ole. Napit ovat mockupin `.btn.sec.full` — palstan levyisiä, pinossa,
   1 px hiusviiva reunuksena. */
#registerV2App .regv2-sso {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  gap: 0;
  margin: 0;
}
#registerV2App .regv2-sso__actions {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 10px;
  align-items: stretch;
  justify-content: flex-start;
}
#registerV2App .regv2-sso-btn {
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: 40px;
  padding: 0 14px;
  justify-content: center;
  gap: 10px;
  border-radius: var(--radius-field, 6px);
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-size: 13.5px;
  box-shadow: none;
}
#registerV2App .regv2-sso-btn:hover {
  background: var(--wash);
  border-color: var(--line);
  transform: none;
  box-shadow: none;
}

/* Erotin: hiusviiva, sana, hiusviiva. Pilleri on tilamerkki (sääntö 3),
   eikä "tai" ole tila. */
#registerV2App .regv2-sso-divider {
  margin: 24px 0 0;
  gap: 14px;
  color: var(--ink-3);
  font-size: 12.5px;
}
#registerV2App .regv2-sso-divider > span {
  border: 0;
  border-radius: 0;
  padding: 0;
  background: none;
  box-shadow: none;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12.5px;
  color: var(--ink-3);
}

/* Sähköpostikenttä erottimen jälkeen: mockupin `.fieldset`-rytmi. */
#registerV2App #stepAEmail #emailForm { margin-top: 24px; }
#registerV2App .regv2-form__actions--primary { margin-top: 18px; }


/* ══════════════════════════════════════════════════════════════════
   Laskutuksen alinäkymät: valinta, kassa, onnistuminen

   Nämä kolme jäivät ilmeen ulkopuolelle, koska ne aukeavat vasta tilin
   luonnin jälkeen eikä niitä nähdä sivua avaamalla. Mitattu 26.8.2026:
   kultagradientteja, hehkuja, vihreitä pillereitä ja neljä eri korttia.
   ══════════════════════════════════════════════════════════════════ */

/* Alinäkymien sivupehmuste. Jokainen kolmesta kantoi omat 16 px:nsä, ja
   sisältö istui siksi 16 px sisempänä kuin sivun otsikko. Palstan reunan
   päättää `.regv2-content`, ei yksittäinen näkymä. Pystypehmuste jää. */
#registerV2App #planSelector,
#registerV2App #stripeCheckout,
#registerV2App #billingSuccess,
#registerV2App #billingJunction {
  padding-inline: 0;
}

/* Onnistumisnäyttö kantaa oman otsikkonsa ("Näin työtilasi rakentuu"),
   joten ylärivin otsikko olisi toinen otsikko heti sen yllä — ja väärä:
   tili on jo luotu eikä työtila enää "valmis aloittamaan". Sama ratkaisu
   kuin vahvistusnäytöllä (`confirm.css`). */
#registerV2App[data-billing-section="success"] .regv2-journey-hero__intro {
  display: none;
}

/* ── Suunnitelmavalinta: rivejä, ei kortteja ────────────────────
   Kaksi vaihtoehtoa olivat kaksi kehystettyä laatikkoa, joista suositeltu
   sai kultaisen gradientin ja hehkun ja valittu vihreän pillerin. Ilmeessä
   valinta on rivi, ja valinnan merkki on 2 px sääntö vasemmassa reunassa
   (`.rule`) — sama laite jolla painotettu kappale erottuu muualla. */
#registerV2App .regv2-plan-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 20px 0 0;
  border-top: 1px solid var(--line-2);
}
#registerV2App .regv2-plan-card {
  border: 0;
  border-bottom: 1px solid var(--line-2);
  border-radius: 0;
  background: none;
  box-shadow: none;
  padding: 18px 20px 20px;
  transition: background .15s var(--ease, ease);
}
#registerV2App .regv2-plan-card:first-child {
  border-right: 1px solid var(--line-2);
}
#registerV2App .regv2-plan-card:hover {
  background: var(--wash);
  border-color: var(--line-2);
  box-shadow: none;
  transform: none;
}
#registerV2App .regv2-plan-card--active,
#registerV2App .regv2-plan-card--recommended {
  background: none;
  border-color: var(--line-2);
  box-shadow: none;
}
/* Valittu vaihtoehto: musteen värinen alaviiva. Vasen reuna olisi
   luontevampi paikka säännölle, mutta se on jo sarakkeiden erotin — kaksi
   merkitystä samalla viivalla luetaan yhtenä. Muste eikä vihreä: valinta
   on toiminto, ei vahvistus (säännöt 1 ja 4). */
#registerV2App .regv2-plan-card--active {
  box-shadow: inset 0 -2px 0 var(--ink);
}
#registerV2App .regv2-plan-card:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: -2px;
  box-shadow: none;
}
#registerV2App .regv2-plan-card--active:focus-visible {
  box-shadow: inset 0 -2px 0 var(--ink);
}

/* Suositusmerkki: mono-yläotsikko, ei kultapilleri. Versaali vain
   monossa (sääntö 10). */
#registerV2App .regv2-plan-card__badge {
  background: none;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  font: 500 12px var(--mono, monospace);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
#registerV2App .regv2-plan-card__badge:empty { display: none; }

/* "Valittu" oli vihreä pilleri. Vihreä on vahvistus, ja valinta on vasta
   aikomus: se näkyy säännössä, ja sana riittää merkiksi. */
#registerV2App .regv2-plan-card__selected {
  background: none;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  color: var(--ink);
  font: 500 12px var(--mono, monospace);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
#registerV2App .regv2-plan-card__selected i { display: none; }

#registerV2App .regv2-plan-card__meta {
  min-height: 18px;
  margin-bottom: 10px;
}
#registerV2App .regv2-plan-card h3 {
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 4px;
}
#registerV2App .regv2-plan-card__price {
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
#registerV2App .regv2-plan-card__per {
  font-size: 12.5px;
  color: var(--ink-3);
}
/* Ominaisuusrivit. Terve rivi on hiljainen: ikonit olivat kolme eri
   koristetta samalle asialle (sääntö 5). */
#registerV2App .regv2-plan-card__features {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-2);
}
#registerV2App .regv2-plan-card__features i { display: none; }

/* ── Tilausyhteenveto ja turvahuomautus: rivejä paperilla ───────── */
#registerV2App .regv2-order-summary {
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: none;
  box-shadow: none;
  padding: 4px 0 0;
  margin: 20px 0 0;
}
#registerV2App .regv2-order-summary__row {
  border-bottom: 1px solid var(--line-2);
  padding: 12px 0 13px;
}
#registerV2App .regv2-order-summary__row:last-child { border-bottom: 0; }
#registerV2App .regv2-order-summary__value {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
#registerV2App .regv2-checkout-note {
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  padding: 0;
  margin: 18px 0 0;
  font-size: 12.5px;
  color: var(--ink-3);
}
#registerV2App .regv2-checkout-note i { color: var(--ink-3); }

/* ── Onnistuminen: asiakirja, ei juliste ────────────────────────
   Näyttö oli kokonaan keskitetty ja sen kolme askelta olivat kolme
   kehystettyä laatikkoa vihreine ikoneineen. Ilmeessä sivu on asiakirja:
   sisältö on vasemmassa reunassa, askeleet ovat rivejä. */
#registerV2App .regv2-success,
#registerV2App .regv2-success__title,
#registerV2App .regv2-success__message,
#registerV2App .regv2-success__next {
  text-align: left;
  align-items: stretch;
}
#registerV2App .regv2-success__title {
  font-size: 28px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: var(--tracking-tighter, -0.022em);
  color: var(--ink);
  margin: 0 0 10px;
}
#registerV2App .regv2-success__message {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
  max-width: 58ch;
}
#registerV2App .regv2-success__next {
  display: block;
  width: 100%;
  max-width: none;
  margin: 24px 0 0;
  border-top: 1px solid var(--line-2);
}
#registerV2App .regv2-success__next-step {
  border: 0;
  border-bottom: 1px solid var(--line-2);
  border-radius: 0;
  background: none;
  box-shadow: none;
  padding: 13px 0 14px;
  justify-content: flex-start;
  gap: 12px;
}
#registerV2App .regv2-success__next-step > span {
  color: var(--ink-3);
  width: auto;
  height: auto;
  min-width: 0;
  flex: none;
}
#registerV2App .regv2-success__next-step strong {
  font-weight: 400;
  font-size: 14.5px;
  color: var(--ink);
}
#registerV2App .regv2-success .regv2-btn--primary {
  width: 100%;
  margin-top: 22px;
}

/* ── Laskutusjakson valitsin ────────────────────────────────────
   Segmenttivalitsin on ainoa paikka jossa `--radius-ctl` on voimassa,
   mutta sen sisus ei ole gradienttia eikä kultaa. */
#registerV2App fieldset.regv2-billing-toggle {
  display: inline-flex;
  /* Vanhempi on pystysuuntainen flex-säiliö, ja sen `align-items: stretch`
     venyttää lapsen palstan levyiseksi riippumatta `display`- tai
     `width`-arvosta. Segmenttivalitsin on sisältönsä levyinen. */
  align-self: flex-start;
  justify-self: flex-start;
  width: auto;
  min-width: 0;
  gap: 2px;
  background: var(--wash);
  border: 1px solid var(--line);
  border-radius: var(--radius-ctl, 999px);
  padding: 2px;
  box-shadow: none;
  margin: 18px 0 0;
  width: auto;
}
/* Segmenttivalitsin on ainoa paikka jossa `--radius-ctl` on voimassa, ja
   sen sisällä olevat vaihtoehdot ovat segmenttejä eivätkä pillereitä:
   valittu erottuu paperin väristä pinnasta, ei omasta kehyksestään. */
#registerV2App .regv2-billing-toggle .regv2-pill {
  flex: 0 0 auto;
  display: inline-flex;
  background: none;
  border: 0;
  box-shadow: none;
  border-radius: var(--radius-ctl, 999px);
  padding: 0;
  margin: 0;
  transform: none;
}
#registerV2App .regv2-billing-toggle .regv2-pill__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  min-height: 0;
  padding: 0 16px;
  border-radius: var(--radius-ctl, 999px);
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--ink-3);
  font-size: 13px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  transition: background .15s var(--ease, ease), color .15s var(--ease, ease);
}
#registerV2App .regv2-billing-toggle .regv2-pill:hover .regv2-pill__label {
  color: var(--ink);
}
#registerV2App .regv2-billing-toggle .regv2-pill--selected .regv2-pill__label {
  background: var(--paper);
  color: var(--ink);
  box-shadow: none;
}
#registerV2App .regv2-billing-toggle .regv2-pill input:focus-visible + .regv2-pill__label {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}
/* Alennusmerkki: luku, ei tarra. */
#registerV2App .regv2-savings-badge {
  background: none;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  color: var(--green-deep);
  font: 500 12px var(--mono, monospace);
  letter-spacing: 0;
  text-transform: none;
}

/* ── Pystykeskityksen mitat ────────────────────────────────────
   Nämä kaksi riviä ovat tiedoston lopussa tarkoituksella: ylempänä
   `.regv2-journey-hero` saa `margin: 0` vanhan kuoren nollauksessa, ja
   sama tarkkuus myöhemmin voittaa. Tila ylläriville varataan heron
   pehmusteella eikä juuren paddingilla, koska absoluuttinen `top: 0`
   mittaa padding-boxista. */
#registerV2App .regv2-journey-hero {
  margin-top: auto;
  padding-top: 78px;
}
#registerV2App .regv2-content { margin-bottom: auto; }

/* ══════════════════════════════════════════════════════════════════
   Kapea ruutu

   Yksi lohko tiedoston lopussa, ei hajallaan. Aiemmin mobiilisäännöt
   olivat ylempänä ja hävisivät lähdejärjestyksessä myöhemmille
   työpöytäsäännöille — hiljaa, kuten aina.
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 760px) {
  /* Ylärivi pysyy rivinä. `base.css` teki siitä pystypinon alle 640
     pikselissä (vanha kuori, jossa ylärivi oli kortin sisällä), jolloin
     logo venyi koko leveydelle ja teema + kieli putosivat omalle
     rivilleen oikeaan laitaan. Mitattu 375 px: logo 343 px leveä. */
  #registerV2App .regv2-journey-hero { padding-top: 56px; }
  #registerV2App .regv2-journey-hero__utility {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    padding: 0 20px;
    margin: 0;
    gap: var(--space-3);
  }
  #registerV2App .regv2-journey-hero__utility-actions {
    width: auto;
    flex-wrap: nowrap;
    gap: var(--space-3);
  }
  #registerV2App .regv2-header__logo { flex: none; }
  #registerV2App .regv2-header__logo-img { height: 19px; }

  #registerV2App .regv2-progress { padding: 32px 0 0; }
  #registerV2App .regv2-progress__rail { padding: 0 20px; gap: 18px; }
  #registerV2App .regv2-journey-hero__intro { padding: 12px 20px 0; }
  #registerV2App .regv2-content { padding: 22px 20px 72px; }

  #registerV2App .regv2-journey-hero__title { font-size: 24px; }

  /* Kuusi ruutua mahtuu 375 pikseliin vain joustavina: kiinteä 48 px
     vaatii 328 px + reunukset, mikä on rajalla eikä kestä 320 px:n
     laitteita. */
  #registerV2App .regv2-otp-inputs { gap: 6px; }
  #registerV2App .regv2-otp__digit {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
    height: 52px;
    font-size: 19px;
  }

  #registerV2App .regv2-form__row { grid-template-columns: 1fr; gap: 18px; }

  /* Kertakoodin metarivin kaksi tekstitoimintoa eivät ole painikkeita
     joiden kuuluisi venyä. `forms.css` antaa mobiilissa jokaiselle
     `.regv2-btn`ille `width: 100%`, jolloin "Lähetä uudelleen" täytti
     rivin ja "Vaihda sähköposti" putosi omalleen. */
  #registerV2App .regv2-otp__footer { flex-wrap: nowrap; gap: 20px; }
  #registerV2App .regv2-form__actions--otp {
    align-items: baseline;
    flex-wrap: nowrap;
  }
  #registerV2App .regv2-otp__footer .regv2-btn,
  #registerV2App .regv2-otp__footer .regv2-btn-link {
    width: auto;
    min-height: 0;
    align-self: auto;
    justify-content: flex-start;
  }
}

@media (max-width: 380px) {
  #registerV2App .regv2-journey-hero__utility { padding: 0 16px; }
  #registerV2App .regv2-progress__rail { padding: 0 16px; }
  #registerV2App .regv2-journey-hero__intro { padding: 12px 16px 0; }
  #registerV2App .regv2-content { padding: 22px 16px 64px; }
}