/* =====================================================================================================================
   v9 shell on the legacy public pages (WP9, 2026-10-31). Loaded by views/layouts/landing.php after landing.css, the
   page CSS and v9/shell.css. Every page on that layout was built to clear a FIXED header of --navh (its first band
   pads by --navh, its sticky asides and table heads sit at --navh, legal.js reads it, html scroll-padding uses it).
   So the v9 header is fixed here (on / and /features it is sticky, which looks the same) and --navh becomes its
   height: 64 px below 1024 px, 72 px from 1024 px (shell.css --s9-h). The page bodies need nothing else.
   ===================================================================================================================== */
:root { --navh: 64px; }
@media (min-width: 64rem) { :root { --navh: 72px; } }

/* landing.css gave the old header z-index 1002 and the page's own layers stay below that; keep the same order. */
.lg9 .hd9 { position: fixed; top: 0; left: 0; right: 0; z-index: 1002; }
.lg9 .skip9 { z-index: 2001; }

/* The skip link lands on <main>; no ring around the whole page. */
.lg9 > main:focus { outline: none; }

/* landing.css sets a 12 px radius on every focus ring; the header keeps the v9 ring shape. */
.lg9 .hd9 :focus-visible, .lg9 .ft9 :focus-visible { border-radius: 8px; }

/* Flash messages (the contact form): below the v9 header, inside the screen at 320 px. */
.lg9 .flash { top: calc(var(--navh) + 12px); width: max-content; max-width: calc(100% - 32px); }

/* Flash messages read as v9 notices: 17 px text, a calm 1.5 px edge (an error gets the brand red edge), 12 px corners. */
.lg9 .flash__container {
  gap: 8px; padding: 12px 8px 12px 20px; border: 1.5px solid #727E79; border-radius: 12px; background: #FFFFFF;
  font-family: "Geologica", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; font-size: 17px; line-height: 1.4; color: #1A2225;
  box-shadow: 0 1px 2px rgb(26 34 37 / .07), 0 10px 28px -10px rgb(26 34 37 / .18);
}
.lg9 .flash--success .flash__container { border-color: #727E79; }
.lg9 .flash--error .flash__container { border-color: #C2362B; }
.lg9 .flash__close { color: #3B4549; border-radius: 8px; }

/* The closing band (views/landing/partials/cta.php, the tools kit, the articles): v9 has one dark green field (the
   home pricer) and no 3D detector, so the band ends the page the way / does: a white sheet on the page colour with
   the headline, one line and the primary button. The detector figure is not shown. */
.lg9 .lp-end.lp-band--kuusi { background: #ECF0EE; color: #1A2225; padding: clamp(48px, 6vw, 96px) 0; }
.lg9 .lp-end .lp-end__grid {
  grid-template-columns: minmax(0, 1fr); gap: 0; box-sizing: border-box;
  width: calc(100% - 2 * var(--lp-gut)); max-width: 1312px; margin: 0 auto; padding: 32px 20px;
  background: #FFFFFF; border-radius: 24px;
  box-shadow: 0 0 0 1px rgb(26 34 37 / .07), 0 1px 2px rgb(26 34 37 / .07), 0 10px 28px -10px rgb(26 34 37 / .18);
}
@media (min-width: 48rem) { .lg9 .lp-end .lp-end__grid { padding: 48px 40px; } }
@media (min-width: 64rem) { .lg9 .lp-end .lp-end__grid { padding: 64px; } }
.lg9 .lp-end .lp-below { display: none; }
.lg9 .lp-end .lp-disp { color: #1A2225; }
.lg9 .lp-end .lp-lead { color: #3B4549; }
.lg9 .lp-end .lp-end__acts { margin-top: 32px; }
.lg9 .lp-end .lp-btn--kaura { background: #1F4D47; border-color: #1F4D47; color: #FFFFFF; }
.lg9 .lp-end .lp-btn--kaura:hover { background: #183E39; border-color: #183E39; }
.lg9 .lp-end .lp-ulink, .lg9 .lp-end .lp-ulink--kaura { color: #1F4D47; text-decoration-color: rgb(31 77 71 / .4); }
.lg9 .lp-end .lp-ulink:hover { text-decoration-color: currentColor; }
.lg9 .lp-end .lp-ghost { color: #1F4D47; border-color: #727E79; }
.lg9 .lp-end .lp-ghost:hover { border-color: #1F4D47; }
.lg9 .lp-end :focus-visible { outline: 3px solid #0B57B0; outline-offset: 2px; }
@media (max-width: 29.99rem) { .lg9 .lp-end .lp-btn { width: 100%; } }

/* 320-359 px: the two big heading sizes hold single words wider than the screen ("makuuhuoneessa",
   "Muistuttaminen"), which made the whole page scroll sideways. */
@media (max-width: 359px) {
  .lg9 .lp-disp--two, .lg9 .lp-disp--mid { font-size: 32px; }
  .lg9 .lp-disp--long { font-size: 30px; }
}

/* Print (the stairwell notice, the register and plan templates, the building print, the legal pages): only the page
   itself goes on paper. The page CSS hid the old chrome by class name; this hides the v9 one. */
@media print {
  .lg9 .skip9, .lg9 .hd9, .lg9 .ft9, .lg9 .flash { display: none !important; }
}

/* Figures in the display face (Mona Sans): its tabular figures draw a slab-serif "1" that reads as a typewriter
   font next to v9's numbers, so big numbers on the legacy pages use the face's own proportional figures, as v9 does.
   (the article sheet, the resident steps, the tool results, the legal page numbers; /pricing sets its own.) */
.lg9 .salkku-calc__annual, .lg9 .ar-body .ar-fig__sheet td, .lg9 .rs-step__n, .lg9 .tl-out__num, .lg9 .tl-input input, .lg9 .lg-stamp__v,
.lg9 .fe-feed__count b, .lg9 .fe-sendmk__l b { font-variant-numeric: lining-nums proportional-nums; }

/* 320-399 px: a long button label (English "Download the Excel template (.xlsx)") wraps inside the button instead
   of pushing the page sideways. */
@media (max-width: 399px) {
  .lg9 main .lp-btn { white-space: normal; height: auto; min-height: 54px; padding-top: 12px; padding-bottom: 12px; line-height: 1.25; text-align: center; }
  .lg9 main .lp-btn--lg { min-height: 58px; }
}

/* 320-359 px: the closing band's headline ("taloyhtiössä.") is wider than its sheet at 40 px. */
@media (max-width: 359px) {
  .lg9 .lp-end .lp-disp--end { font-size: 34px; }
}

/* =====================================================================================================================
   One visual language with / and /features (v9 round 2, 2026-10-31; the judge saw "two sites stitched together").
   ===================================================================================================================== */

/* One heading colour: the v9 ink (#1A2225, 14.1:1 on the page, 16.2:1 on white) in the v9 cut (Mona Sans 800 at
   110 %), on every light surface. Headings inside the dark Kuusi fields keep their light colour: the Kuusi band,
   the dark cards (.lp-card, /tietoa's contact card) and /contact's email row. Display-face labels that act as
   headings (/contact's row names and values, /tietoa's promises and signature, article titles) follow. */
.lg9 main :is(h1, h2, h3, .lp-disp, .ct-h1, .ct-row__k, .ct-row__v, .ab-three b, .ab-sign b, .ar-row__title, .ar-h2, .ar-fig__t):not(:is(.lp-band--kuusi, .lp-card, .ct-row.is-mail, .lp-end) *) { color: #1A2225; }
.lg9 main :is(h1, h2, .lp-disp, .ct-h1):not(.vh) { font-weight: 800; }

/* One FAQ style: the home FAQ's white sheet, rows split by a soft line, a chevron that turns when the row opens
   (views/landing/partials/faq.php; landing.js still opens and closes it). */
.lg9 .lp-faq {
  margin-top: 28px; border-top: 0; overflow: hidden; background: #FFFFFF; border-radius: 24px;
  box-shadow: 0 0 0 1px rgb(26 34 37 / .07), 0 1px 2px rgb(26 34 37 / .07), 0 10px 28px -10px rgb(26 34 37 / .18);
}
.lg9 .lp-faq .faq__item, .lg9 .lp-faq .faq__item--open { border-bottom: 0; }
.lg9 .lp-faq .faq__item + .faq__item { border-top: 1px solid #DCE4E0; }
.lg9 .lp-faq .faq__question { gap: 16px; min-height: 64px; padding: 16px 20px; font: 600 18px/1.4 "Geologica", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; color: #1A2225; }
.lg9 .lp-faq .faq__question:hover { color: #1A2225; }
.lg9 .lp-faq .faq__question:hover > span:first-child { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.lg9 .lp-faq .faq__question:focus-visible { outline: 3px solid #0B57B0; outline-offset: -4px; border-radius: 12px; }
.lg9 .lp-faq__pm { width: 22px; height: 22px; color: #3B4549; transition: transform .18s cubic-bezier(.2, .8, .2, 1); }
.lg9 .lp-faq__pm::before {
  left: 6px; right: auto; top: 3px; width: 10px; height: 10px; border-radius: 0 0 2px 0; background: none;
  border-right: 2.2px solid currentColor; border-bottom: 2.2px solid currentColor; transform: rotate(45deg);
}
.lg9 .lp-faq__pm::after { display: none; }
.lg9 .lp-faq .faq__item--open .lp-faq__pm { transform: rotate(180deg); }
.lg9 .lp-faq .lp-faq__a { padding-inline: 20px; }
.lg9 .lp-faq .faq__answer p, .lg9 .lp-faq__a ul, .lg9 .lp-faq__a ol { font-size: 17px; color: #3B4549; }
.lg9 .lp-faq .faq__item--open .faq__answer p:last-child, html:not(.faq-js) .lg9 .lp-faq .faq__answer p:last-child { padding-bottom: 24px; }
@media (min-width: 48rem) {
  .lg9 .lp-faq .faq__question { padding: 18px 28px; font-size: 19px; }
  .lg9 .lp-faq .lp-faq__a { padding-inline: 28px; }
  .lg9 .lp-faq .faq__answer p, .lg9 .lp-faq__a ul, .lg9 .lp-faq__a ol { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { .lg9 .lp-faq__pm { transition: none; } }
html.rm .lg9 .lp-faq__pm { transition: none; }

/* /tietoa: Joel's photo as the home founder section sets it (views/landing/about.php): a 4:5 rectangle with 24 px
   corners and the soft v9 shadow, his name and role under it. */
.lg9 .ab-photo { width: min(100%, 22rem); margin: 0 0 0 auto; }
.lg9 .ab-photo img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 24px;
  box-shadow: 0 0 0 1px rgb(26 34 37 / .07), 0 1px 2px rgb(26 34 37 / .07), 0 10px 28px -10px rgb(26 34 37 / .18);
}
.lg9 .ab-photo__cap { display: flex; flex-direction: column; margin-top: 14px; }
.lg9 .ab-photo__v { font: 700 20px/1.25 "Mona Sans", "Geologica", system-ui, sans-serif; color: #1A2225; }
.lg9 .ab-photo__k { font-size: 16px; line-height: 1.45; color: #3B4549; }
@media (max-width: 63.99rem) { .lg9 .ab-photo { width: min(100%, 18rem); margin: 8px 0 0; } }
@media (max-width: 47.99rem) { .lg9 .ab-photo { width: min(72%, 16rem); } }
/* /tietoa: the signature's role line and the company sheet's labels were 15-15.5 px; the v9 floor is 16 */
.lg9 .ab-sign span span, .lg9 .ab-sheet dt { font-size: 16px; }

/* The 16 px floor on the older pages (v9 round 2): breadcrumbs, article dates and topics, the contents numbers,
   figure captions, the article figures' chips and the Excel template picture, and /contact's small lines were
   15-15.5 px. Legal fine print stays at 15 px. */
.lg9 .lp-crumbs, .lg9 .lp-cap, .lg9 .ar-row__meta, .lg9 .ar-toc__n, .lg9 .ar-fig__cap, .lg9 .ar-fig__steps--5 .ar-fig__d,
.lg9 .ar-fig__apt, .lg9 .ar-fig__dot, .lg9 .ar-fig__lad time, .lg9 .ar-src__checked, .lg9 .ar-src__reviewed,
.lg9 .pc-sheet__file, .lg9 .pc-sheet__table thead th, .lg9 .pc-sheet__chip, .lg9 .pc-sheet__tabs span,
.lg9 .pc-sheet--compact .pc-sheet__table th, .lg9 .pc-sheet--compact .pc-sheet__table td, .lg9 .pc-sheet__table tbody td[data-k],
.lg9 .ct-row__why, .lg9 .ct-copy, .lg9 .ct-form__req, .lg9 .ar-by, .lg9 .ar-toc__list a, .lg9 .ar-body .ar-fig__sheet table,
.lg9 .ar-fig__lab b { font-size: 16px; }

/* /tietoa (round 2): no dark green band, no grey bands. Every band is the v9 page colour (views/landing/about.php sets
   lp-band--kaura, #ECF0EE); the company facts and the contact card are white v9 sheets (24 px corners, the card
   shadow, ink text, the primary button), like the founder block on /. Contrast on white: ink 16.2, #3B4549 9.8,
   Kuusi 9.5; on the page: #3F4D49 8.6. */
.lg9 .ab-sheet, .lg9 .ab-contact {
  background: #FFFFFF; border-radius: 24px; color: #1A2225;
  box-shadow: 0 0 0 1px rgb(26 34 37 / .07), 0 1px 2px rgb(26 34 37 / .07), 0 10px 28px -10px rgb(26 34 37 / .18);
}
.lg9 .ab-sheet { margin: 0; padding: 4px 28px; border-top: 0; }
.lg9 .ab-sheet__row { border-bottom-color: #DCE4E0; }
.lg9 .ab-sheet__row:last-child { border-bottom: 0; }
.lg9 .ab-sheet dt { color: #3B4549; }
.lg9 .ab-sheet dd { color: #1A2225; }
.lg9 .ab-sheet a, .lg9 .ab-contact__mail, .lg9 .ab-contact__tel a { color: #1F4D47; text-decoration-color: rgb(31 77 71 / .4); }
.lg9 .ab-sheet a:hover, .lg9 .ab-contact__mail:hover, .lg9 .ab-contact__tel a:hover { text-decoration-color: currentColor; }
.lg9 .ab-contact__t { color: #1A2225; }
.lg9 .ab-contact__p, .lg9 .ab-contact__tel { color: #3B4549; }
.lg9 .ab-sheet :focus-visible, .lg9 .ab-contact :focus-visible { outline: 3px solid #0B57B0; outline-offset: 2px; }
.lg9 .ab-three { border-top: 1px solid #DCE4E0; }
.lg9 .ab-three li { border-bottom-color: #DCE4E0; }
@media (max-width: 39.99rem) { .lg9 .ab-sheet { padding: 4px 20px; } }

/* /asukkaille: the mail drawing, the source line and the privacy line were 15-15.5 px at 390; the v9 floor is 16
   (public/css/pages/residents.css lines 10-35 and 90, overridden here so the page CSS stays untouched). */
.lg9 .lp-legal, .lg9 .lp-source { font-size: 16px; }
.lg9 .rs-num, .lg9 .rs-mail__row, .lg9 .rs-mail__id span, .lg9 .rs-mail__body, .lg9 .rs-mail__btn, .lg9 .rs-mail__foot,
.lg9 .rs-mail__status { font-size: 16px; }