/* ─── Nettiajanvaraussivut ────────────────────────────────────────────────
   Pääsivu ja toimialasivut. Hero, jonka takana kalenterikuva, tuotenäkymät ja
   toimialalinkkien ruudukko. Kaikki mitat tokeneista. */

.n-hero {
  position: relative;
  overflow: hidden;
  padding: var(--s-section-y) var(--s-gutter);
  background: var(--s-paper);
  isolation: isolate;
}

.n-hero__copy { position: relative; z-index: 3; width: min(62%, 780px); }
.n-hero__copy > .s-lead { width: 528px; max-width: 88vw; }
/* Kuva ja sen valkoinen verho liikkuvat yhtenä kokonaisuutena. */
.n-hero__art { position: absolute; inset: 0; overflow: hidden; transform: translateY(60px); pointer-events: none; }


/* Kalenteri on kuva tekstin takana; valkoinen verho sen päällä haalistaa sen
   niin ettei teksti joudu kilpailemaan kuvion kanssa. */
.n-hero__image {
  position: absolute;
  z-index: 1;
  left: calc(50% - 392px);
  bottom: calc(var(--s-section-y) - 16px);
  width: clamp(1064px, 76vw, 1160px);
  max-width: none;
  height: auto;
  opacity: 0.3;
  pointer-events: none;
  user-select: none;
}

.n-hero__veil {
  position: absolute;
  z-index: 2;
  inset: 0;
  bottom: calc(var(--s-section-y) - 32px);
  pointer-events: none;
  background:
    linear-gradient(90deg, #fff 0%, #fff 24%, rgba(255, 255, 255, 0.92) 35%, transparent 60%),
    linear-gradient(270deg, #fff 0%, rgba(255, 255, 255, 0.9) 9%, transparent 28%),
    linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.82) 10%, transparent 34%),
    linear-gradient(0deg, #fff 0%, rgba(255, 255, 255, 0.66) 28%, transparent 32%);
}


@media (max-width: 800px) {
  .n-hero__copy { width: 100%; }
  .n-hero__copy > .s-lead { max-width: 100%; }
  .n-hero__image { opacity: 0.62; }
  .n-hero__veil {
    background:
      linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0.96) 47%, transparent 82%),
      linear-gradient(270deg, #fff 0%, rgba(255, 255, 255, 0.82) 8%, transparent 28%),
      linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.86) 13%, transparent 38%),
      linear-gradient(0deg, #fff 0%, rgba(255, 255, 255, 0.9) 10%, transparent 34%);
  }
}

/* Puhelimessa oma rajaus (350x251) tekstin takana oikeassa reunassa. picture on
   ikkuna ja img sen sisällä oleva kuva: ikkunan mitat kertovat kuinka paljon
   kuviosta näkyy ja kuvan oma leveys kuinka suurina ruudut piirtyvät.
   Rajaus seuraa otsikon ja painikkeen aluetta, ei heron alapehmustetta. */
@media (max-width: 700px) {
  .n-hero__art { transform: translateY(32px); }
  .n-hero .s-actions > .s-btn--secondary { display: none; }

  .n-hero picture {
    position: absolute;
    z-index: 1;
    right: 0;
    top: calc(var(--s-section-y) - 36px);
    bottom: calc(var(--s-section-y) - 16px);
    width: 74%;
    overflow: hidden;
    opacity: 0.5;
    pointer-events: none;
  }

  .n-hero__image { inset: calc(75% - 203px) -2px auto auto; width: 420px; height: auto; max-width: none; opacity: 1; }

  .n-hero__veil {
    background:
      linear-gradient(90deg, #fff 0%, #fff 30%, rgba(255, 255, 255, 0.84) 56%, rgba(255, 255, 255, 0.24) 100%),
      linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.6) 7%, transparent 22%),
      linear-gradient(0deg, #fff 0%, rgba(255, 255, 255, 0.55) 5%, transparent 18%);
  }
}

/* Toimialan käyttötavat: avoin kuvitusruudukko heti heron jälkeen. */
.n-use-cases { padding-block: var(--s-7) var(--s-section-y); }
.n-use-cases__head { max-width: 900px; margin-inline: auto; text-align: center; }
.n-use-cases__head .s-title { max-width: none; margin-inline: auto; text-wrap: balance; }
.n-use-cases__head .s-lead { max-width: 68ch; margin: var(--s-5) auto 0; }
.n-use-cases__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--s-8) var(--s-7);
  margin: var(--s-9) 0 0;
  padding: 0;
  list-style: none;
}
.n-use-cases__grid > .n-use-case { grid-column: span 2; }
.n-use-cases__grid > .n-use-case:nth-child(4) { grid-column: 2 / span 2; }
.n-use-cases__grid > .n-use-case:nth-child(5) { grid-column: 4 / span 2; }
.n-use-case { min-width: 0; text-align: center; }
.n-use-case__illustration {
  display: grid;
  place-items: center;
  width: 156px;
  height: 156px;
  margin: 0 auto var(--s-6);
  border-radius: 50%;
  color: var(--s-ink-2);
  background: var(--s-surface);
}
.n-use-case__illustration svg { width: 72px; height: 72px; }
.n-use-case__accent { stroke: #a34162; }
.n-use-case h3 { overflow-wrap: anywhere; font-size: 22px; font-weight: var(--s-fw-semibold); line-height: 1.25; letter-spacing: var(--s-ls-subtitle); text-wrap: balance; }
.n-use-case .s-text { max-width: 30ch; margin: var(--s-3) auto 0; }
@media (max-width: 700px) {
  .n-use-cases__grid { grid-template-columns: minmax(0, 1fr); margin-top: var(--s-8); gap: var(--s-8); }
  .n-use-cases__grid > .n-use-case:nth-child(n) { grid-column: auto; }
  .n-use-case__illustration { width: 124px; height: 124px; margin-bottom: var(--s-5); }
  .n-use-case__illustration svg { width: 64px; height: 64px; }
  .n-use-case .s-text { max-width: 36ch; }
}

/* ─── Varausnäkymä ────────────────────────────────────────────────────────*/
.n-panel .m-scale { max-width: 420px; }
.n-split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }

@media (max-width: 900px) {
  .n-split { grid-template-columns: minmax(0, 1fr); }
  .n-split > .n-panel,
  .n-split > .n-table-booking { order: 2; }
}

/* ─── Hallintanäkymä tummalla ─────────────────────────────────────────────
   Näkymän takana heikko pinkki hehku, joka erottaa sen mustasta. */
.n-app { position: relative; overflow: hidden; }

.n-app::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 38%;
  width: 70%;
  height: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(249, 74, 144, 0.16), transparent);
  pointer-events: none;
}

.n-app__stage {
  position: relative;
  max-width: 1120px;
  margin-inline: auto;
}

.n-app__screen {
  overflow: hidden;
  border: 1px solid var(--s-rule-dark-strong);
  border-radius: var(--s-radius-lg);
  background: var(--s-black);
}
.n-app__screen img { display: block; width: 100%; height: auto; }
.n-app__caption {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: var(--s-4);
  color: var(--s-on-black-2);
  font-size: 12px;
}

.n-app .s-head { margin-inline: auto; }

/* ─── Toimialat ───────────────────────────────────────────────────────────*/
.n-card {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto auto;
  row-gap: 6px;
  min-height: 132px;
  height: 100%;
  padding: var(--s-5);
  border: 1px solid var(--s-rule);
  border-radius: var(--s-radius-lg);
  color: var(--s-ink);
  transition: border-color var(--s-dur) var(--s-ease), background-color var(--s-dur) var(--s-ease);
}

.n-card:hover { border-color: var(--s-rule-strong); background: var(--s-surface); }
.n-card .s-meta { grid-column: 1; margin-bottom: auto; }
.n-card__name { grid-column: 1 / -1; align-self: end; margin-top: var(--s-4); font-size: 1.0625rem; font-weight: var(--s-fw-semibold); letter-spacing: -0.012em; }
.n-card__hook { grid-column: 1; color: var(--s-ink-3); font-size: 14px; }
.n-card__arrow { grid-column: 2; grid-row: 1; color: var(--s-ink-3); transition: color var(--s-dur-fast) var(--s-ease); }
.n-card:hover .n-card__arrow { color: var(--s-ink); }

/* Shared solution section on the two booking product pages. */
.n-fit-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 64px);
}
.n-fit-benefits .s-text { margin-top: var(--s-3); }
.n-fit-benefits .s-icontile { margin-bottom: var(--s-5); }

.n-hero .s-display { overflow-wrap: anywhere; }

/* Restaurant examples share the page's hero, dark product section and split
   layout. These are labelled explanations, not simulated live availability. */
.n-table-hero {
  position: absolute;
  right: 4%; top: 16%; width: 48%; height: 72%;
  display: grid; grid-template-columns: repeat(3, 1fr);
  align-items: center; justify-items: center; gap: 32px;
  color: #ad7184; opacity: .45; pointer-events: none;
}
.n-table-hero__table {
  display: grid; place-items: center;
  width: 68px; height: 68px; border-radius: 16px;
  border: 1px solid #e3b5c4; background: #fce8ef;
  box-shadow: 0 -13px 0 -8px #e3b5c4, 0 13px 0 -8px #e3b5c4;
}
.n-table-hero__table--wide { width: 100px; }
.n-table-hero__table--large { width: 132px; }
.s-page .n-table-demo {
  position: relative; max-width: 1040px; margin-inline: auto;
  padding: clamp(24px, 4vw, 48px);
  border: 1px solid var(--s-rule-dark-strong);
  border-radius: var(--s-radius-xl); background: var(--s-black-2);
}
.n-table-demo__caption {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: var(--s-3); margin-bottom: var(--s-6);
}

.n-table-demo__options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.n-table-demo__option { padding: var(--s-5); border: 1px solid var(--s-rule-dark-strong); border-radius: var(--s-radius-lg); }
.n-table-demo__option--selected { border-color: var(--s-pink-100); background: rgba(255, 166, 196, .06); }
.n-table-demo__size { display: block; margin-block: var(--s-5); font-size: 40px; line-height: 1.1; font-weight: var(--s-fw-semibold); }
.n-table-demo__size small { font-size: var(--s-fs-ui); font-weight: var(--s-fw-regular); }
.n-table-demo__status { display: inline-block; margin-top: var(--s-4); color: var(--s-pink-100); font-size: var(--s-fs-ui); }
.n-table-demo .n-table-demo__note { margin-top: var(--s-5); }
.n-table-booking { padding: clamp(24px, 4vw, 48px); background: var(--s-surface); border-radius: var(--s-radius-xl); }
.n-table-booking__brand { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); margin-block: var(--s-5) var(--s-6); font-weight: var(--s-fw-semibold); }
.n-table-booking__brand span { font-size: var(--s-fs-ui); font-weight: var(--s-fw-regular); color: var(--s-ink-3); }
.n-table-booking__details > div { display: flex; justify-content: space-between; gap: var(--s-4); padding-block: var(--s-4); border-top: 1px solid var(--s-rule); }
.n-table-booking__details dt { color: var(--s-ink-3); }
.n-table-booking__details dd { font-weight: var(--s-fw-medium); text-align: right; }
.n-table-booking > .s-text { margin-top: var(--s-5); }
.n-questions details { border-bottom: 1px solid var(--s-rule); padding-block: var(--s-5); }
.n-questions details:first-child { padding-top: 0; }
.n-questions summary { cursor: pointer; font-weight: var(--s-fw-semibold); }
.n-questions .s-text { margin-top: var(--s-4); }
@media (max-width: 800px) {
  .n-fit-benefits { grid-template-columns: 1fr; }
  .n-table-demo__options { grid-template-columns: 1fr; }
  .n-table-demo__size { margin-block: var(--s-3); }
  .n-table-hero { right: 0; width: 70%; gap: 16px; opacity: .25; }
  .n-table-hero__table { transform: scale(.75); }
}

/* ─── Hyödyt ──────────────────────────────────────────────────────────────*/
.n-benefits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 40px);
}

.n-benefit { display: flex; flex-direction: column; gap: var(--s-3); }
.n-benefit .s-icontile { margin-bottom: var(--s-2); }
.n-benefit .s-subtitle { font-size: 1.1875rem; line-height: 1.3; }
.n-benefit .s-text { font-size: var(--s-fs-ui); line-height: 1.55; }

@media (max-width: 1000px) {
  .n-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .n-benefits { grid-template-columns: minmax(0, 1fr); }
}

/* ─── Toimialan ajanvaraus ───────────────────────────────────────────────
   Tuotenäkymä ja kaksi suoraa toimintokuvausta. Hierarkia syntyy kuvan,
   typografian ja tyhjän tilan suhteesta; ei ylätunnisteita tai erottimia. */
.n-booking-system {
  padding-top: var(--s-section-y-tight);
  scroll-margin-top: var(--s-header-h);
}
.n-booking-system__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  grid-template-areas: "visual heading" "visual functions";
  align-items: start;
  column-gap: clamp(40px, 6vw, 96px);
  row-gap: var(--s-7);
}
.n-booking-system__layout > .s-title {
  grid-area: heading;
  align-self: end;
  max-width: 20ch;
  text-wrap: pretty;
}
.n-booking-system__visual {
  grid-area: visual;
  align-self: stretch;
  min-width: 0;
  min-height: 520px;
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 3vw, 48px) 0 0 clamp(24px, 3vw, 48px);
  border-radius: var(--s-radius-xl);
  background: var(--s-surface);
}
.n-booking-system__screen {
  position: relative;
  height: 100%;
  min-height: 480px;
  overflow: hidden;
  border-radius: var(--s-radius) 0 0 0;
  background: var(--s-paper);
  box-shadow: 0 8px 40px rgba(12, 12, 20, .07);
}
.n-booking-system__screen img {
  display: block;
  position: absolute;
  top: 0;
  left: -148px;
  width: 1080px;
  max-width: none;
  height: auto;
}
.n-booking-system__functions {
  grid-area: functions;
  display: grid;
  gap: var(--s-6);
  padding-bottom: var(--s-3);
}
.n-booking-function .s-subtitle { max-width: 26ch; }
.n-booking-function .s-text { margin-top: var(--s-3); max-width: 44ch; }

/* Hyötyjen otsikot ovat nopea yhteenveto; teksti kertoo vaikutuksen työhön. */
.n-industry-benefits .s-head { max-width: none; }
.n-industry-benefits .n-benefits {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px);
}
.n-industry-benefits .n-benefit .s-subtitle { font-size: 21px; line-height: 1.25; }
.n-industry-benefits .n-benefit .s-text { font-size: 16px; line-height: var(--s-lh-text); }
.n-industry-benefits .s-icontile { margin-bottom: var(--s-4); }

@media (min-width: 1600px) {
  .n-booking-system__visual { min-height: 570px; }
  .n-booking-system__screen img { width: 1300px; left: -180px; }
}
@media (max-width: 1100px) {
  .n-booking-system__layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--s-6);
    row-gap: var(--s-6);
  }
  .n-industry-benefits .n-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7); }
}
@media (max-width: 800px) {
  .n-booking-system__layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "heading" "visual" "functions";
    gap: var(--s-6);
  }
  .n-booking-system__layout > .s-title { max-width: 24ch; }
  .n-booking-system__visual { min-height: 0; height: 360px; border-radius: var(--s-radius-lg); }
  .n-booking-system__screen { min-height: 0; }
  .n-booking-system__screen img { width: 900px; left: -124px; }
  .n-booking-system__functions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
}
@media (max-width: 560px) {
  .n-booking-system__visual { height: 300px; padding: var(--s-5) 0 0 var(--s-5); }
  .n-booking-system__screen img { width: 740px; left: -101px; }
  .n-booking-system__functions { grid-template-columns: minmax(0, 1fr); }
  .n-booking-function .s-subtitle { font-size: 22px; }
  .n-industry-benefits .n-benefits { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .n-industry-benefits .n-benefit { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--s-2) var(--s-4); }
  .n-industry-benefits .s-icontile { grid-column: 1; grid-row: 1 / 3; margin: 0; width: 32px; height: 32px; }
  .n-industry-benefits .n-benefit .s-subtitle,
  .n-industry-benefits .n-benefit .s-text { grid-column: 2; }
}

/* Kiinteistövälitys: teksti vasemmalla, kalenteri oikealla. */
:is(.n-booking-system--property, .n-booking-system--industry) .n-booking-system__layout {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  grid-template-areas: "copy visual";
  align-items: center;
}
:is(.n-property-copy, .n-industry-copy) { grid-area: copy; }
:is(.n-property-copy, .n-industry-copy) > .s-title { max-width: 20ch; text-wrap: balance; }
:is(.n-property-features, .n-industry-features) { display: grid; gap: var(--s-6); margin-top: var(--s-7); }
:is(.n-property-feature, .n-industry-feature) h3 {
  font-size: 21px;
  line-height: 1.3;
  font-weight: var(--s-fw-semibold);
  letter-spacing: var(--s-ls-subtitle);
}
:is(.n-property-feature, .n-industry-feature) .s-text { max-width: 46ch; margin-top: var(--s-2); }
:is(.n-property-direct__layout, .n-industry-direct__layout) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(32px, 6vw, 96px);
  padding: clamp(32px, 4vw, 56px);
  border-radius: var(--s-radius-xl);
  border: 1px solid #e9dde3;
  background: var(--s-paper);
  box-shadow: 0 12px 36px -24px rgba(70, 30, 48, .18);
}
:is(.n-property-direct, .n-industry-direct) { padding-top: 0; }
:is(.n-property-direct__layout, .n-industry-direct__layout) > .s-title { max-width: 21ch; font-size: clamp(28px, 3vw, 42px); text-wrap: balance; }
:is(.n-property-direct__copy, .n-industry-direct__copy) .s-text { margin-top: var(--s-4); max-width: 52ch; }
:is(.n-property-direct__copy, .n-industry-direct__copy) strong { font-weight: var(--s-fw-semibold); color: var(--s-ink); }

/* Sama hallinnan ja hyötyjen sommittelu kuin etusivulla. */
:is(.n-property-story, .n-industry-story) { margin-top: 0; }
:is(.n-property-story, .n-industry-story) .business-story__copy-stack h2 { max-width: 20ch; text-wrap: balance; }
:is(.n-property-story, .n-industry-story) .business-story__copy p + p { margin-top: var(--s-4); }
:is(.n-property-story, .n-industry-story) .business-story__aside::before { display: none; }
:is(.n-property-story, .n-industry-story) .business-story__acquisition { grid-column: 2; min-width: 0; margin-top: 12px; }
:is(.n-property-story, .n-industry-story) .business-story__acquisition-intro { max-width: 68ch; margin-top: 16px; }
:is(.n-property-story, .n-industry-story) .business-story__tools {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  margin-top: 32px;
}
:is(.n-property-story, .n-industry-story) .business-story__tool-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  border-radius: 14px;
  background: #f2e5ec;
  color: #a34162;
}
:is(.n-property-story, .n-industry-story) .business-story__tool-icon svg { width: 28px; height: 28px; }
:is(.n-property-story, .n-industry-story) .business-story__tools h4 { font-size: 16px; line-height: 1.4; font-weight: 600; letter-spacing: -.02em; }
:is(.n-property-story, .n-industry-story) .business-story__tools p { max-width: 23ch; margin-top: 8px; color: #69686e; font-size: 14px; line-height: 1.6; }
.n-property-sync { display: grid; place-items: center; padding: 24px; }
.n-property-sync__sheet { width: 100%; padding: 22px 16px; border-radius: 10px; background: #fff; box-shadow: 0 10px 20px -12px #42223544; }
.n-property-sync__row { display: grid; grid-template-columns: 54px 1fr; align-items: center; gap: 10px; font-size: 11px; color: #69686e; }
.n-property-sync__row + .n-property-sync__row { margin-top: 14px; }
.n-property-sync__row > div { display: flex; gap: 5px; }
.n-property-sync__row i { flex: 1; height: 23px; border-radius: 4px; background: #f0eff2; }
.n-property-sync__row i.is-free { background: #edc9db; }
.n-property-sync__match,
.n-property-sync__confirmed { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #69686e; }
.n-property-sync__match { margin-top: 20px; color: #a34162; }
.n-property-sync__match svg,
.n-property-sync__confirmed svg { width: 16px; height: 16px; flex-shrink: 0; color: #a34162; }
.n-property-sync__sheet--booked > strong { display: block; margin-bottom: 20px; font-size: 16px; font-weight: 600; }
.n-property-sync__confirmed + .n-property-sync__confirmed { margin-top: 14px; }
@media (max-width: 1200px) {
  :is(.n-property-story, .n-industry-story) .business-story__tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  :is(.n-property-story, .n-industry-story) .business-story__acquisition { grid-column: 1; }
  :is(.n-property-story, .n-industry-story) .business-story__tools { gap: 28px 20px; }
  .n-property-sync { padding: 12px; }
  .n-property-sync__sheet { padding: 14px 10px; }
  .n-property-sync__row { grid-template-columns: 1fr; gap: 4px; font-size: 9px; }
  .n-property-sync__row + .n-property-sync__row { margin-top: 8px; }
  .n-property-sync__row i { height: 15px; }
  .n-property-sync__match { margin-top: 12px; font-size: 9px; gap: 4px; }
  .n-property-sync__confirmed { align-items: start; font-size: 10px; gap: 4px; }
  .n-property-sync__sheet--booked > strong { font-size: 13px; margin-bottom: 12px; }
}
@media (max-width: 800px) {
  :is(.n-booking-system--property, .n-booking-system--industry) .n-booking-system__layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "copy" "visual";
  }
  :is(.n-property-features, .n-industry-features) { margin-top: var(--s-6); }
  :is(.n-property-direct__layout, .n-industry-direct__layout) { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); padding: var(--s-6) var(--s-5); }
}

/* ─── Muut toimialat ──────────────────────────────────────────────────────*/
.n-others__title { margin-bottom: var(--s-4); font-size: var(--s-fs-ui); font-weight: var(--s-fw-medium); color: var(--s-ink-3); }
.n-others { display: flex; flex-wrap: wrap; gap: 8px; }

.n-others a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--s-rule);
  border-radius: 999px;
  color: var(--s-ink-2);
  font-size: 14px;
  transition: border-color var(--s-dur-fast) var(--s-ease), color var(--s-dur-fast) var(--s-ease);
}

.n-others a:hover { border-color: var(--s-rule-strong); color: var(--s-ink); }

/* A concise editorial introduction leads directly into the industry links. */
.n-industry-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(32px, 6vw, 88px);
  margin-bottom: clamp(32px, 4vw, 56px);
}
.n-industry-intro .s-title { max-width: 22ch; text-wrap: pretty; }
.n-industry-intro__copy { padding-top: 6px; }
.n-industry-intro__copy .s-lead { max-width: 34ch; color: var(--s-ink); text-wrap: pretty; }
.n-industry-intro__copy .s-text { max-width: 48ch; margin-top: 20px; }
/* A cropped booking detail supports the larger schedule screenshot above. */
.n-newsletter-story {
  grid-column: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  margin-top: 12px;
}
.n-newsletter-story__image {
  width: 100%;
  max-width: 430px;
  padding: 16px;
  border: 1px solid #e2e1e5;
  border-radius: 12px;
  background: #fff;
}
.n-newsletter-story__image img { display: block; width: 100%; height: auto; }
.n-newsletter-story__copy .s-text { max-width: 68ch; margin-top: 12px; font-size: 16px; line-height: 1.65; }
@media (max-width: 1100px) {
  .n-newsletter-story__image { width: 84%; }
}
@media (max-width: 899px) {
  .n-newsletter-story { grid-column: 1; }
}
@media (max-width: 900px) {
  .n-industry-intro { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .n-industry-intro__copy { padding-top: 0; }
  .n-industry-intro__copy .s-text { margin-top: 16px; }
}

/* Julkinen ajanvalinta: sama tuotenäkymäkehys kuin toimialasivuilla,
   peilattuna vasempaan alakulmaan. */
.n-booking-system--portal .n-booking-system__layout {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  grid-template-areas: "visual copy";
  align-items: center;
}
.n-booking-system__copy { grid-area: copy; }
.n-booking-system--portal .n-booking-system__visual {
  padding: clamp(24px, 3vw, 48px) clamp(24px, 3vw, 48px) 0 0;
}
.n-booking-system--portal .n-booking-system__screen {
  border-radius: 0 var(--s-radius) 0 0;
}
.n-booking-system--portal .n-booking-system__screen img {
  top: 0;
  left: 0;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: clamp(24px, 3vw, 40px) clamp(24px, 2.5vw, 36px) 0 24px;
  object-fit: contain;
  object-position: left bottom;
}
@media (max-width: 560px) {
  .n-booking-system--portal .n-booking-system__visual { padding: var(--s-5) var(--s-5) 0 0; }
}
@media (max-width: 800px) {
  .n-booking-system--portal .n-booking-system__layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "copy" "visual";
    gap: var(--s-6);
  }
}

/* Pääsivun toimialakortit. Alasivujen käyttötaparuudukko on erillinen. */
#toimialat { background: var(--s-paper); }
#toimialat > .s-container { max-width: 1600px; }
#toimialat .n-industry-intro { display: block; max-width: 960px; margin: 0 auto 56px; text-align: center; }
#toimialat .n-industry-intro .s-title { max-width: none; text-wrap: balance; }
#toimialat .n-industry-intro__copy { padding-top: 20px; }
#toimialat .n-industry-intro .s-lead { max-width: 68ch; margin-inline: auto; color: #4a4a4a; }
#toimialat .n-industries { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
#toimialat .n-industries > li:last-child { grid-column: 3; }
#toimialat .n-card { display: flex; flex-direction: column; gap: 0; padding: 14px 14px 26px; border: 1px solid transparent; border-radius: 26px; background: #fff; text-align: center; box-shadow: 0 12px 36px rgba(12, 12, 20, .055); }
#toimialat .n-card:hover { border-color: var(--s-rule-strong); }
#toimialat .n-card__art { display: block; width: 100%; margin-bottom: 24px; overflow: hidden; border-radius: 16px; background: #fafafa; }
#toimialat .n-card__art img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }

#toimialat .n-card__name { align-self: auto; margin: 0; font-size: 22px; line-height: 28px; letter-spacing: normal; color: #4a4a4a; text-wrap: balance; }
@media (max-width: 1200px) {
  #toimialat .n-industries { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #toimialat .n-industries > li:last-child { grid-column: auto; }
}
@media (max-width: 1000px) {
  #toimialat .n-industries { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  #toimialat .n-industries { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #toimialat .n-industries > li:last-child { grid-column: 1 / -1; width: calc(50% - 10px); justify-self: center; }
}
@media (max-width: 560px) {
  #toimialat .n-industries { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  #toimialat .n-industries > li:last-child { grid-column: 1 / -1; width: calc(50% - 6px); justify-self: center; }
  #toimialat .n-card { padding: 10px 8px 18px; border-radius: 20px; }
  #toimialat .n-card__art { margin-bottom: 16px; border-radius: 12px; }
  #toimialat .n-card__name { font-size: clamp(14px, 4vw, 17px); line-height: 1.3; }
  #toimialat .n-industry-intro { margin-bottom: 32px; }
}