/* ─── Digitaalinen brändäys (b-) ─────────────────────────────────────────
   Verkkosivut-sivun tukisivu: lyhyt, sama vaalea sommittelu. Värit ovat
   sivuston omat: musta, harmaat ja pinkki. */

/* Hero: teksti vasemmalla, taustalla ohuin viivoin piirretty typografian ja
   värin tekstuuri. Maski häivyttää reunat. */
.b-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: var(--s-section-y) var(--s-gutter);
}
.b-hero__copy { position: relative; z-index: 2; width: min(60%, 760px); }
.b-hero__copy .s-lead { max-width: 52ch; }
.b-hero__art {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: 0;
  width: min(54%, 820px);
  transform: translateY(-50%);
  opacity: .7;
  pointer-events: none;
  user-select: none;
  font-family: var(--s-mono);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 85%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 85%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.b-hero__art svg { display: block; width: 100%; height: auto; }
.b-hero__art svg text[font-size="300"] { font-family: var(--s-font); }

/* Luottamus: valkoinen osio, jonka puhelin (sama kuin nettiajanvaraussivulla)
   seisoo osion alareunalla. Näytön harmaa jatkuu seuraavan osion taustana. */
.b-trust { --booking-ease-surface: #f6f6f7; padding-top: var(--s-section-y); overflow: hidden; }
.b-trust__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  column-gap: clamp(40px, 6vw, 96px);
  padding-inline: var(--s-gutter);
}
.b-trust__copy { padding-bottom: var(--s-section-y); }
.b-trust__copy .s-title { max-width: 18ch; text-wrap: balance; }
.b-trust__copy .s-lead { max-width: 50ch; }
.b-trust__visual { position: relative; isolation: isolate; display: flex; justify-content: center; min-width: 0; }
.b-trust__visual .n-booking-ease__phone { position: relative; z-index: 1; }
/* Brändin tekstuuri: kaksi isoa pyöristettyä neliötä leikkaa toisensa, ja
   leikkaus saa hieman tummemman, heijastusmaisen sävyn (logossa se jää tyhjäksi). Isompi
   alkaa puhelimen takaa, pienempi nousee kohti ruudun oikeaa reunaa. */
.b-trust__marks {
  /* Leveällä näytöllä kuvio keskittyy puhelimeen. Kun näyttö kapenee, sen
     oikea reuna pysyy samassa kohdassa ruudun reunaan nähden, jolloin
     alemman oikealle ja ylemmän alle jäävä tyhjä tila säilyy. Alle 1250px:n
     kuvio pienenee suhteessa näyttöön (834/1250 = 66.72vw), joten se ei
     liu'u kokonaan puhelimen taakse. 6vw on sivun reunus, 35px ylitys. */
  --b-edge: 6vw;
  --b-w: min(834px, 66.72vw);
  --b-over: min(35px, 2.8vw);
  position: absolute;
  z-index: 0;
  left: min(calc(50% - var(--b-w) / 2), calc(100% + var(--b-edge) + var(--b-over) - var(--b-w)));
  bottom: 0;
  width: var(--b-w);
  height: auto;
  aspect-ratio: 834 / 640;
  max-width: none;
  pointer-events: none;
}
.b-phone { display: grid; gap: 22px; padding-top: 8px; }
.b-phone__top { display: flex; align-items: center; gap: 12px; }
.b-phone__avatar { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #111114; color: #fff; font-size: 21px; font-weight: 700; }
.b-phone__top strong { display: block; font-size: 18px; line-height: 23px; color: #0b0b0e; }
.b-phone__top small { display: block; font-size: 12px; line-height: 16px; color: #707078; }
.b-phone__stats { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; font-size: 11px; color: #707078; }
.b-phone__stats b { display: block; font-size: 17px; line-height: 23px; color: #0b0b0e; }
.b-phone__btn { padding: 11px; border-radius: 999px; background: #f25b97; color: #fff; font-size: 14px; font-weight: 700; text-align: center; }
.b-phone__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.b-phone__grid i { aspect-ratio: 1; border-radius: 10px; background: var(--c); }

/* Kanavat portaina harmaalla: palkit lähtevät ruudun vasemmasta reunasta ja
   lyhenevät alaspäin. Sama muoto, eri sävy: yksi ilme monessa kanavassa. */
.b-channels { padding-block: var(--s-section-y); overflow: hidden; background: #f6f6f7; }
.b-channels__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: clamp(40px, 6vw, 96px); }
.b-channels__steps { display: grid; }
.b-channels__steps li {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: var(--w);
  /* Alaraja on 1300px:n näytön mitta, joten palkit eivät madallu sitä kapeammilla. */
  height: clamp(73px, 5.6vw, 84px);
  padding-right: clamp(34px, 2.6vw, 40px);
  border-radius: 0 6px clamp(39px, 3vw, 44px) 0;
  background: var(--c);
  color: var(--t);
  font-size: clamp(17px, 1.3vw, 19px);
  font-weight: 700;
}
.b-channels__copy { padding-right: var(--s-gutter); }
.b-channels__copy .s-title { max-width: 20ch; text-wrap: balance; }
.b-channels__copy .s-lead { max-width: 46ch; }
.b-link { display: inline-flex; align-items: center; gap: 16px; padding-block: 10px; color: var(--s-ink); font-size: 15px; border-bottom: 1px solid #c8c4ca; line-height: 1.5; }
.b-link:focus-visible, .b-inline:focus-visible { outline: 2px solid #c02e6b; outline-offset: 4px; }
.b-inline { color: #323232; font-weight: 700; text-decoration: underline; text-decoration-color: #d9a3b9; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.b-inline:hover { text-decoration-color: #a34162; }

/* Perusasiat mittauksina: jokainen kortti näyttää periaatteen, ei listaa. */
.b-head { max-width: 860px; margin: 0 auto var(--s-head-gap); text-align: center; }
.b-head .s-title { max-width: 22ch; margin-inline: auto; text-wrap: balance; }
.b-head .s-lead { max-width: 62ch; margin: 20px auto 0; text-wrap: pretty; }
.b-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 1240px; margin-inline: auto; }
.b-spec { display: flex; flex-direction: column; padding: clamp(28px, 3vw, 44px); border-radius: var(--s-radius-xl); background: #f6f6f7; }
.b-spec__visual { height: 200px; margin-bottom: var(--s-6); }
.s-page.s-page .b-spec h3 { font-size: 22px; line-height: 28px; }
.s-page.s-page .b-spec p { max-width: 46ch; margin-top: 10px; font-size: 16px; line-height: 24px; color: #4a4a4a; }

.b-scale { display: flex; align-items: flex-end; gap: clamp(14px, 1.8vw, 26px); color: #323232; }
.b-scale span { display: grid; justify-items: start; gap: 8px; font-size: var(--fs); font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.b-scale small { font-family: var(--s-mono); font-size: 11px; font-weight: 400; letter-spacing: 0; color: #8a8a92; }

.b-contrast { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: stretch; }
.b-contrast__pair { display: flex; flex-direction: column; justify-content: space-between; padding: 16px; border-radius: 16px; background: var(--bg); color: var(--fg); }
.b-contrast__pair.is-fail { box-shadow: inset 0 0 0 1px #e4e4e8; }
.b-contrast__pair b { font-size: 44px; line-height: 1; letter-spacing: -.02em; }
.b-contrast__pair small { display: block; font-family: var(--s-mono); font-size: 12px; opacity: .85; }
.b-contrast__pair em { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; font-style: normal; font-weight: 700; }
.b-contrast__pair em::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #3f9a62; }
.b-contrast__pair.is-fail em { color: #8a8a92; }
.b-contrast__pair.is-fail em::before { background: #d64545; }

.b-measure { display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; }
.b-measure__ruler { display: flex; align-items: center; gap: 10px; width: 96%; margin-bottom: 6px; color: #a34162; font-family: var(--s-mono); font-size: 11px; white-space: nowrap; }
.b-measure__ruler i { flex: 1; height: 9px; border: 1px solid #d9a3b9; border-bottom: 0; border-top: 0; background: linear-gradient(#d9a3b9, #d9a3b9) center / 100% 1px no-repeat; }
.b-measure__ruler b { font-weight: 400; }
.b-measure__line { display: block; height: 10px; border-radius: 5px; background: #dcdce1; }

.b-cta { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 14px; }
.b-cta__primary { padding: 14px 28px; border-radius: 999px; background: #111114; color: #fff; font-size: 16px; font-weight: 700; }
.b-cta__secondary { padding: 13px 27px; border: 1px solid #d4d4d9; border-radius: 999px; color: #8a8a92; font-size: 16px; font-weight: 700; }
.b-cta__tag { margin-top: 6px; color: #a34162; font-family: var(--s-mono); font-size: 11px; }

@media (max-width: 1100px) {
  .b-trust__layout, .b-channels__layout { column-gap: var(--s-6); }
}
@media (max-width: 900px) {
  .b-specs { grid-template-columns: minmax(0, 1fr); max-width: 620px; }
}
@media (max-width: 800px) {
  .b-hero__copy { width: 100%; }
  .b-hero__art { top: 0; right: -140px; width: 560px; transform: none; opacity: .3; }
  .b-trust__layout { grid-template-columns: minmax(0, 1fr); }
  .b-trust__copy { padding-bottom: var(--s-7); }
  .b-trust__marks { --b-w: 834px; --b-over: 35px; left: calc(100% + var(--b-edge) + var(--b-over) - var(--b-w)); }
  .b-channels__layout { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-7); }
  .b-channels__copy { order: -1; padding-inline: var(--s-gutter); }
  .b-channels__copy .s-title { max-width: none; }
  .b-channels__steps { padding-right: var(--s-gutter); }
}
@media (max-width: 600px) {
  .b-trust__marks { --b-edge: 24px; }
}
@media (max-width: 380px) {
  .b-trust__marks { --b-edge: 16px; }
}
@media (max-width: 560px) {
  /* Kapealla näytöllä palkit pidetään leveämpinä, jotta pisinkin nimi mahtuu riville. */
  .b-channels__steps li { height: 64px; padding-right: 20px; border-bottom-right-radius: 30px; font-size: 16px; }
  .b-channels__steps li:nth-child(1) { --w: 100% !important; }
  .b-channels__steps li:nth-child(2) { --w: 88% !important; }
  .b-channels__steps li:nth-child(3) { --w: 76% !important; }
  .b-channels__steps li:nth-child(4) { --w: 66% !important; }
  /* Nettiajanvaraussivun mobiilisääntö skaalaa puhelimen absoluuttisesti; täällä se pysyy virrassa. */
  .b-trust__visual { justify-content: flex-start; }
  /* Kapealla näytöllä kuvio pidetään puhelimen vieressä, ettei se valu ruudun ulkopuolelle. */
  /* Puhelimessa kuvio pienenee, mutta oikealle jää sama tyhjä tila kuin
     työpöydällä: kuvio ylittää ruudun reunan 26px, alempi neliö jää siitä irti. */
  .b-trust__marks { --b-w: 707px; --b-over: 26px; }
  .b-trust .n-booking-ease__phone { position: relative; width: 82%; max-width: 300px; height: 360px; transform: none; }
  .b-spec__visual { height: auto; min-height: 150px; }
  .b-scale span:nth-child(-n+1) { display: none; }
  .b-contrast__pair { padding: 12px; }
  .b-contrast__pair b { font-size: 32px; }
}