/* ajanvaraus.online — the site around the booking engine.
 *
 * The visual direction is the prototype Codex drew (docs/DESIGN.md in its
 * archive): light paper, deep green, large type, soft cards. What changed
 * on the way here, and why, is in docs/site.md. Two rules matter more than
 * any colour:
 *
 *   1. The booking widget on the salon pages resets the elements it uses
 *      with `.bk-widget.bk-widget :where(...)` and writes its own rules
 *      `.bk-widget .bk-…` — two classes each (since 27.10.2026). A rule
 *      here written `.a .b h2` would still outrank them and land inside
 *      the widget. So this file styles elements either bare (weightless
 *      next to the widget's classes) or through its own classes — never
 *      "class + element" over an area that holds the widget.
 *   2. The site header is sticky (the owner's request). The widget moves
 *      the page with scrollIntoView, which honours `scroll-padding-top`
 *      on html: that padding is the header's height, so a day's heading
 *      the widget brings up stops below the header, not under it. Change
 *      the header's height and --site-header-height changes with it.
 */

:root {
  --ink: #153d33;
  --green: #0d6654;
  --green-hover: #084e40;
  --green-press: #063d32;
  --sage: #eaf3ee;
  --sage-deep: #dcebe3;
  --sage-press: #d3e5da;
  /* #687b72 in the prototype measured 4.37:1 on this paper — under 4.5.
     This one is 5.3:1 on the paper and 4.8:1 on --sage. */
  --muted: #5b6e65;
  --line: #e1e9e3;
  --paper: #ffffff;
  --background: #fbfcfa;
  --cream: #f4eee5;
  --focus: #69a98b;
  --radius: 20px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --font: Arial, Helvetica, sans-serif;
  --site-header-height: 61px;
}

/* ── Reset: bare elements only ─────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--site-header-height) + 16px); }
html:has(:focus-visible) { scroll-behavior: auto; }

body {
  margin: 0;
  background: var(--background);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p { margin: 0; }

/* No font-weight here: the widget's reset leaves weight alone, and a bare
   `h3 { font-weight }` would reach any widget heading that does not set
   its own. Arial has no 600 anyway — the default bold is what shows. */
h1, h2, h3 {
  line-height: 1.12;
  letter-spacing: -0.035em;
}

img { max-width: 100%; height: auto; }

a { color: inherit; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* Fragment destinations take focus to move the reading position, not to
   act as controls. Keep focus rings on links, buttons and form fields. */
:where(main, section, aside, div)[tabindex="-1"]:focus { outline: none; }

::selection { background: #c5e4d1; color: #103a2f; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* The icon sprite at the top of every page: symbols only, nothing drawn. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip-link {
  position: absolute;
  left: 12px; top: -80px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

.container {
  width: min(1240px, calc(100% - 32px));
  margin-inline: auto;
}

.icon {
  width: 20px; height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}

.eyebrow {
  display: block;
  margin-bottom: 14px;
  color: var(--green);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.5;
  text-transform: uppercase;
}

.lead { color: var(--muted); font-size: 18px; line-height: 1.7; }

/* A link inside running text. */
.link { color: var(--green); font-weight: 600; text-underline-offset: 3px; }
.muted { color: var(--muted); }

/* ── Buttons and links ─────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: 12px;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 140ms var(--ease-out), background-color 140ms ease;
}
.btn:active { transform: scale(0.97); }
.btn .icon { width: 18px; height: 18px; }

.btn-primary { background: var(--green); color: #fff; }
.btn-primary:active { background: var(--green-press); }
.btn-soft { background: var(--sage); color: var(--green); }
.btn-soft:active { background: var(--sage-press); }
.btn-outline { background: var(--paper); border-color: #cddcd2; color: var(--ink); }
.btn-outline:active { background: #f1f6f2; }

.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: 8px;
  color: var(--green);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ── Header ────────────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--paper);
  border-bottom: 1px solid #e6ece7;
}

.header-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 44px;
  grid-template-rows: 60px;
  align-items: center;
  column-gap: 8px;
}
.header-login { min-height: 44px; padding: 8px 12px; font-size: 12px; }

.brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #123f32;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.04em;
  text-decoration: none;
  white-space: nowrap;
}
.brand-dot { color: var(--green); }

.nav { display: none; align-items: center; justify-content: space-between; gap: 8px; }
.nav-login { display: none; }

/* The phone menu is a <details>, and nothing but a click on its summary
   closes it: the site has no script (CSP script-src 'none'). Its link to
   the salons is /?#salongit, not /#salongit — on the front page itself a
   bare fragment only scrolls, and the open menu would ride down in the
   sticky header over the salons; the empty query makes it a new document,
   in which the menu starts closed (docs/site.md). */
.mobile-menu { margin: 0; }
.menu-toggle { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; color: var(--ink); cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; }
.menu-toggle::-webkit-details-marker { display: none; }
.menu-toggle:active { background: var(--sage-press); }
.menu-toggle .icon { width: 22px; height: 22px; }
.menu-icon-close { display: none; }
.mobile-menu[open] .menu-icon-open { display: none; }
.mobile-menu[open] .menu-icon-close { display: block; }
.mobile-menu-nav { position: absolute; top: 60px; left: 0; right: 0; display: grid; padding: 8px 0; border-top: 1px solid var(--line); }
.mobile-menu-nav .nav-link { padding: 8px 12px; border-radius: 8px; font-size: 15px; }
@media (max-width: 999px) {
  /* Two 44px links, 16px padding and the divider stay inside the sticky
     header. Anchor destinations remain below it even while it is open. */
  :root:has(.mobile-menu[open]) { --site-header-height: 166px; }
  .header-inner:has(.mobile-menu[open]) { padding-bottom: 105px; }
}
@media (max-width: 359px) {
  .brand { font-size: 17px; }
  .header-login { padding-inline: 10px; }
}

.nav-link {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 0;
  color: #3f5a4e;
  font-size: 12px;
  text-decoration: none;
}
.nav-link[aria-current="page"] { color: var(--green); font-weight: 700; }

/* ── Sections ──────────────────────────────────────────────────────── */

.section { padding-top: 64px; }

.section-head { margin-bottom: 24px; }
.section-title { font-size: 29px; }
.section-intro { max-width: 560px; margin-top: 14px; color: var(--muted); font-size: 15px; line-height: 1.75; }

/* ── Front page: hero ──────────────────────────────────────────────── */

.market-hero { background: var(--sage); }
.market-hero-inner { position: relative; padding-top: 24px; padding-bottom: 1px; }
.market-copy { position: relative; z-index: 1; }
.market-eyebrow { margin-bottom: 14px; color: var(--muted); font-size: 10px; font-weight: 700; line-height: 1.5; letter-spacing: .1em; text-transform: uppercase; }
.market-eyebrow > span { display: none; }
.market-title { font-size: clamp(29px, 8.6vw, 56px); font-weight: 700; line-height: 1.08; letter-spacing: -.05em; }
.market-title > span { display: block; }
.market-lead { max-width: 540px; margin-top: 16px; font-size: 16px; line-height: 1.45; color: var(--ink); }
.market-cta { width: 66%; margin-top: 18px; }
.market-cta-button { width: 100%; gap: 10px; min-height: 48px; padding: 12px 14px; border-radius: 100px; font-size: 14px; }
.market-cta-button .icon { flex: none; width: 20px; height: 20px; }
.market-reassurance { display: flex; align-items: flex-start; gap: 6px; width: 66%; margin-top: 12px; font-size: 11px; line-height: 1.5; }
.market-reassurance .icon { flex: none; width: 16px; height: 16px; color: var(--green); }
.market-visual { position: relative; width: 100%; margin: -48px 0 0; }
.market-image { display: block; width: 100%; height: auto; }
/* The client's calendar is not built yet: the picture says so in words a
   sighted visitor reads, not only in alt text. */
.market-visual .illustration-caption { position: static; display: table; margin: 6px 0 14px auto; }
.treatment-shortcuts { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 42px; }
.treatment-shortcut { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 13px; border: 1px solid transparent; border-radius: 100px; background: var(--sage); color: var(--ink); font-size: 13px; font-weight: 600; cursor: pointer; transition: background-color 160ms ease, color 160ms ease; }
.treatment-filter { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.treatment-shortcut .icon { width: 18px; height: 18px; }
.treatment-shortcut:has(#filter-all:checked),
.treatment-shortcut:has(#filter-facial:checked),
.treatment-shortcut:has(#filter-pedicure:checked),
.treatment-shortcut:has(#filter-massage:checked),
.treatment-shortcut:has(#filter-brows:checked) { background: var(--green); color: var(--paper); }
.treatment-shortcut:has(#filter-all:focus-visible),
.treatment-shortcut:has(#filter-facial:focus-visible),
.treatment-shortcut:has(#filter-pedicure:focus-visible),
.treatment-shortcut:has(#filter-massage:focus-visible),
.treatment-shortcut:has(#filter-brows:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.market-catalogue:has(#filter-facial:checked) .treatment-section .treatment-item:not([data-treatment="facial"]),
.market-catalogue:has(#filter-pedicure:checked) .treatment-section .treatment-item:not([data-treatment="pedicure"]),
.market-catalogue:has(#filter-massage:checked) .treatment-section .treatment-item:not([data-treatment="massage"]),
.market-catalogue:has(#filter-brows:checked) .treatment-section .treatment-item:not([data-treatment="brows"]) { display: none; }
.treatment-section { padding-top: 32px; }
.treatment-section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 8px 24px; margin-bottom: 20px; }
.treatment-section-head .section-title { font-size: 27px; }
.treatment-section-head .text-link { font-size: 14px; }
.treatment-intro { max-width: 580px; margin-top: 8px; font-size: 14px; color: var(--muted); }
.treatment-grid { display: grid; gap: 18px; padding: 0; margin: 0; list-style: none; }
.treatment-list-control { display: none; }
.treatment-item { min-width: 0; }
.treatment-card { position: relative; display: flex; height: 100%; flex-direction: column; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--paper); scroll-margin-top: 20px; }
.treatment-photo { position: relative; margin: 0; background: var(--cream); }
.treatment-image { display: block; width: 100%; aspect-ratio: 1.85 / 1; object-fit: cover; }
.treatment-photo .illustration-caption { right: 10px; bottom: 10px; padding: 3px 7px; font-size: 9px; }
.treatment-card-body { display: flex; flex: 1; flex-direction: column; gap: 7px; padding: 16px; min-width: 0; }
.treatment-salon { font-size: 12px; line-height: 1.5; color: var(--muted); }
.treatment-master { white-space: nowrap; }
.treatment-name { margin: 0; font-size: 20px; line-height: 1.2; letter-spacing: -0.025em; overflow-wrap: break-word; }
.treatment-duration { font-size: 13px; color: var(--muted); }
.treatment-duration span { padding-inline: 3px; }
/* The card is a way to the salon's booking, not an offer: no price and no
   time on it — the widget shows both, live, one tap away. */
.treatment-card-actions { display: grid; margin-top: auto; padding-top: 6px; }
.treatment-cta { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; min-height: 48px; padding: 10px 8px; border-radius: 10px; background: var(--sage); color: var(--green); font-size: 12px; font-weight: 700; text-decoration: none; }
.treatment-cta::after { content: ""; position: absolute; z-index: 1; inset: 0; border-radius: inherit; }
.treatment-card:has(.treatment-cta:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.treatment-cta .icon { width: 15px; height: 15px; }
.treatment-cta:active { background: var(--sage-press); }
.home-business { margin-top: 44px; }
.home-business .business-banner { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 20px; margin-top: 0; padding: 28px 16px; }
.business-visual { display: block; min-width: 0; width: min(100%, 720px); margin: 0; justify-self: center; }
.business-visual picture { display: block; }
.business-visual img { display: block; width: 100%; height: auto; }
.salon-map-note { margin-top: 10px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.salon-map-note a { display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 3px; }

.illustration-caption {
  position: absolute;
  right: 16px; bottom: 14px;
  padding: 4px 9px;
  border-radius: 8px;
  background: var(--paper);
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}

.icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  flex: none;
  border-radius: 50%;
  background: var(--sage);
  color: var(--green);
}

/* ── Front page: salons ────────────────────────────────────────────── */

.salon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.salon-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-top: 240px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(21, 61, 51, 0.025);
  transition: box-shadow 180ms ease;
}
/* The unfilled ring scales with the map to indicate the surrounding area. */
.salon-card:has(.salon-card-map)::before { content: ""; position: absolute; z-index: 1; top: 120px; left: 50%; width: 14%; aspect-ratio: 1; border: 3px solid var(--green); border-radius: 50%; background: transparent; box-shadow: 0 0 0 1px var(--paper), inset 0 0 0 1px var(--paper); transform: translate(-50%, -50%); pointer-events: none; }
.salon-card:has(.salon-card-map)::after { content: "© OpenStreetMap"; position: absolute; z-index: 1; top: 214px; right: 8px; padding: 2px 6px; border-radius: 4px; background: var(--paper); color: var(--muted); font-size: 10px; font-weight: 400; pointer-events: none; }
.salon-card-logo { position: absolute; z-index: 1; top: 212px; left: 22px; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; padding: 8px; border: 4px solid var(--paper); border-radius: 14px; background: var(--cream); pointer-events: none; }
.salon-card-logo img { width: auto; max-width: 100%; max-height: 38px; }
.salon-card-body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 36px 22px 22px; min-width: 0; }
.salon-card-name { font-size: 22px; letter-spacing: -0.025em; }
/* The card's map is written by the build from the salon's slug
   (site/img/map-<slug>-overview.webp, docs/site.md «Карты»): cropped with
   the salon at its centre, so the ring above needs no numbers per salon.
   A card without one keeps the plain band. The link's ::after keeps the
   whole card one link, over the picture. */
.salon-card-map { position: absolute; top: 0; left: 0; width: 100%; height: 240px; object-fit: cover; object-position: 50% 50%; }
.salon-card-link { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: none; }
.salon-card-link::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 240px; background: var(--sage); }
.salon-card:has(.salon-card-map) .salon-card-link::before { background: none; }
.salon-card-link::after { content: ""; position: absolute; inset: 0; }
.salon-card-place { display: flex; align-items: flex-start; gap: 6px; color: var(--muted); font-size: 14px; }
.salon-card-place .icon { width: 17px; height: 17px; margin-top: 3px; }
.salon-card-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 12px; color: var(--green); font-weight: 700; }
.salon-card-cta .icon { width: 18px; height: 18px; }

.salon-empty { color: var(--muted); }

/* ── Front page: how it works ──────────────────────────────────────── */

.how-grid {
  display: grid;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.how-step {
  position: relative;
  padding: 22px 0 0 54px;
  border-top: 1px solid #d8e4d9;
}
.how-step .icon {
  position: absolute;
  left: 0; top: 22px;
  width: 30px; height: 30px;
  color: var(--green);
  stroke-width: 1.5;
}
.how-title { font-size: 21px; margin-bottom: 8px; }
.how-text { color: var(--muted); font-size: 15px; line-height: 1.8; }

/* ── Business banner ───────────────────────────────────────────────── */

.business-banner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  margin-top: 64px;
  padding: 30px 24px;
  border-radius: 20px;
  background: var(--sage);
}
.business-copy { min-width: 0; }
.business-title { font-size: 28px; margin-bottom: 8px; }
.business-text { color: var(--muted); }
.business-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; }

/* ── Yrityksille ───────────────────────────────────────────────────── */

.biz-hero { padding-top: 36px; }
.biz-title {
  font-size: clamp(43px, 12.5vw, 52px);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.05em;
  margin-bottom: 18px;
}
.biz-title em { font-style: normal; color: var(--green); }
.biz-hero .lead { max-width: 470px; font-size: 16px; line-height: 1.8; }
.biz-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 26px; }

.biz-figure { min-width: 0; margin: 32px 0 0; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--sage); }
.biz-image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
}

.feature-grid {
  display: grid;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.feature {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}
.feature-icon {
  display: inline-flex;
  padding: 13px;
  border-radius: 15px;
  background: var(--sage);
  color: var(--green);
}
.feature-icon .icon { width: 24px; height: 24px; }
.feature-title { margin: 20px 0 10px; font-size: 20px; letter-spacing: -0.02em; }
.feature-text { color: var(--muted); font-size: 15px; line-height: 1.75; }

.story {
  margin-top: 64px;
  padding: 52px 0;
  background: #f0f5f1;
}
.story-grid { display: grid; gap: 30px; align-items: center; }
.story-image {
  display: block;
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: 22px;
}
.story-title { font-size: 32px; margin-bottom: 14px; }

.checks {
  display: grid;
  gap: 14px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.check { display: flex; align-items: flex-start; gap: 12px; }
.check .icon {
  width: 24px; height: 24px;
  padding: 3px;
  border-radius: 50%;
  background: var(--sage);
  color: var(--green);
}

.faq { max-width: 900px; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-sign { color: var(--green); font-size: 26px; font-weight: 400; line-height: 1; }
.faq-item[open] .faq-sign { transform: rotate(45deg); }
.faq-answer { max-width: 680px; margin: 0 34px 22px 0; color: var(--muted); }

.join {
  max-width: 760px;
  margin: 64px auto 0;
  padding: 30px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: 0 12px 44px rgba(21, 61, 51, 0.04);
  scroll-margin-top: 16px;
}
.join-title { font-size: 30px; margin-bottom: 10px; }
.join-intro { color: var(--muted); margin-bottom: 24px; }

.form-grid { display: grid; gap: 0 18px; }

.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 20px; }
.field-label { font-size: 15px; font-weight: 700; }
.field-note { color: var(--muted); font-weight: 400; }

.input {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid #c9d8ce;
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  line-height: 1.4;
}
.input:focus { border-color: var(--green); outline: 3px solid #d7eadf; outline-offset: 0; }
.input-area { min-height: 120px; resize: vertical; }
.input-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23153d33' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
  padding-right: 42px;
}

.form-privacy { margin-top: 16px; color: var(--muted); font-size: 14px; }
.form-privacy .link { display: inline-flex; align-items: center; min-height: 44px; }

/* Netlify's honeypot: a field no person sees, filled only by bots. Off
   screen rather than display:none — some bots skip hidden fields. */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.thanks { max-width: 640px; padding-top: 56px; text-align: center; }
.thanks-mark {
  display: inline-flex;
  margin-bottom: 22px;
  padding: 20px;
  border-radius: 50%;
  background: var(--sage);
  color: var(--green);
}
.thanks-mark .icon { width: 34px; height: 34px; }
.thanks-title { font-size: 36px; margin-bottom: 14px; }
.thanks-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }

/* ── Documents (Tietosuoja, Käyttöehdot) ───────────────────────────── */

.doc { max-width: 780px; padding-top: 44px; }
.doc-title { font-size: 36px; margin-bottom: 14px; }
.doc-draft {
  margin: 24px 0 8px;
  padding: 16px 20px;
  border-radius: 14px;
  background: var(--cream);
  color: #5d4b2c;
}
.doc-section { margin-top: 34px; }
.doc-heading { font-size: 22px; letter-spacing: -0.02em; margin-bottom: 10px; }
.doc-text { margin-top: 10px; }
.doc-list { margin: 10px 0 0; padding-left: 22px; }
.doc-list li { margin-top: 6px; }
.doc-updated { margin-top: 36px; color: var(--muted); font-size: 14px; }

/* ── Not found ─────────────────────────────────────────────────────── */

.not-found {
  max-width: 620px;
  margin-top: 48px;
  padding: 56px 24px;
  border: 1px dashed #cddcd1;
  border-radius: var(--radius);
  background: var(--paper);
  text-align: center;
}
.not-found-title { font-size: 32px; margin: 10px 0 14px; }
.not-found .btn { margin-top: 24px; }

/* ── Salon page ────────────────────────────────────────────────────── */

.breadcrumb { padding: 18px 0 6px; color: var(--muted); font-size: 14px; }
.breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.breadcrumb-item { display: inline-flex; align-items: center; gap: 10px; }
.breadcrumb-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--green); }
.breadcrumb-sep { width: 14px; height: 14px; color: #8aa093; }

.salon-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin: 12px 0 32px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--sage);
}
.salon-heading { flex: 1 1 100%; min-width: 0; }
.salon-heading .eyebrow { margin-bottom: 10px; }
.salon-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.salon-head-logo { display: flex; flex: none; }
.salon-head-logo img { width: auto; max-width: 96px; max-height: 48px; }
.salon-title { font-size: 34px; letter-spacing: -0.04em; overflow-wrap: anywhere; }
.salon-place { margin-top: 6px; color: var(--muted); font-size: 15px; }

.salon-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "booking" "contact" "prices" "staff";
  gap: 32px;
}

.booking { grid-area: booking; min-width: 0; }

/* The mount itself, not a wrapper around it: a wrapper with overflow
   hidden would make itself the widget's scroll container, and the
   widget's sticky selection bar would stick to that instead of the
   window. The radius paints on the widget's own background. */
.booking-mount {
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 6px 24px rgba(18, 63, 50, 0.05);
}

/* On a phone the widget takes the whole width, edge to edge, as it does on
   the salons' own sites: it was drawn for a phone column, and 32px of page
   gutter around its own 16px padding broke category names mid-word. */
@media (max-width: 719px) {
  .booking { margin-inline: -16px; }
  .booking-mount { border-width: 1px 0; border-radius: 0; box-shadow: none; }
}

.contact {
  grid-area: contact;
  align-self: start;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--paper);
}
.contact-title { font-size: 20px; letter-spacing: -0.02em; margin-bottom: 14px; }
.contact-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.contact-item { display: flex; align-items: flex-start; gap: 10px; }
.contact-item .icon { color: var(--green); margin-top: 2px; }
.contact-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--green); font-weight: 700; text-underline-offset: 3px; }

.prices { grid-area: prices; min-width: 0; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); scroll-margin-top: 16px; }
.prices-title { font-size: 28px; margin-bottom: 8px; }
.prices-intro { color: var(--muted); margin-bottom: 18px; }

.price-cat { border-top: 1px solid var(--line); }
.price-cat:last-of-type { border-bottom: 1px solid var(--line); }
.price-cat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 56px;
  padding: 12px 0;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.price-cat-head::-webkit-details-marker { display: none; }
.price-cat-count { color: var(--muted); font-size: 14px; font-weight: 400; white-space: nowrap; }
.price-cat-sign { color: var(--green); font-size: 24px; font-weight: 400; line-height: 1; }
.price-cat[open] .price-cat-sign { transform: rotate(45deg); }

.price-list { margin: 0 0 14px; padding: 0; list-style: none; }
.price-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 16px;
  padding: 10px 0;
  border-top: 1px dashed #e6ece7;
}
.price-row:first-child { border-top: 0; }
.price-name { font-weight: 600; }
.price-amount { font-weight: 700; text-align: right; white-space: nowrap; }
.price-time { grid-column: 1 / -1; color: var(--muted); font-size: 14px; }
.price-variants {
  grid-column: 1 / -1;
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.price-variant { display: flex; justify-content: space-between; gap: 16px; color: var(--muted); font-size: 15px; }
.price-variant-amount { color: var(--ink); font-weight: 700; white-space: nowrap; }

.prices-note { margin-top: 16px; color: var(--muted); font-size: 14px; }

.staff { grid-area: staff; min-width: 0; }
.staff-title { font-size: 28px; margin-bottom: 18px; }
.staff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.staff-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--paper);
}
.staff-photo {
  width: 88px; height: 88px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--sage-deep);
}
.staff-initial {
  display: grid;
  place-items: center;
  width: 88px; height: 88px;
  border-radius: 50%;
  background: var(--sage-deep);
  color: var(--green);
  font-size: 32px;
  font-weight: 600;
}
.staff-name { font-size: 20px; letter-spacing: -0.02em; }
.staff-bio { color: var(--muted); font-size: 15px; }
.staff-book { margin-top: auto; padding-top: 4px; }

/* ── Footer ────────────────────────────────────────────────────────── */

.site-footer {
  margin-top: 80px;
  background: #f1f5ef;
  border-top: 1px solid var(--line);
}

.footer-main {
  display: grid;
  gap: 28px;
  padding-block: 40px;
}

.footer-tagline { margin-top: 10px; color: var(--muted); font-size: 15px; max-width: 300px; }

.footer-title { margin-bottom: 12px; font-size: 15px; letter-spacing: 0; }
.footer-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.footer-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #4c6458;
  font-size: 15px;
  text-decoration: none;
}
.footer-address { font-style: normal; color: #4c6458; font-size: 15px; line-height: 1.7; }
.footer-mail { display: inline-flex; align-items: center; min-height: 44px; color: var(--green); text-underline-offset: 3px; overflow-wrap: anywhere; }

.footer-bottom {
  padding-block: 18px;
  border-top: 1px solid #dfe7dc;
  color: #5f7368;
  font-size: 14px;
}

/* ── Wider screens ─────────────────────────────────────────────────── */

@media (min-width: 720px) {
  .container { width: min(1240px, calc(100% - 80px)); }


  .section { padding-top: 76px; }
  .section-title { font-size: 34px; }

  .market-hero-inner { padding-top: 36px; }
  .market-copy { max-width: 620px; }
  .market-eyebrow { font-size: 12px; }
  .market-lead { max-width: 460px; font-size: 18px; }
  .market-cta { max-width: 360px; }
  .market-cta-button { min-height: 56px; font-size: 18px; }
  .market-reassurance { font-size: 14px; }
  .market-reassurance .icon { width: 20px; height: 20px; }
  .market-visual { max-width: 720px; margin: -56px auto 0; }
  .treatment-shortcuts { gap: 12px; padding-top: 44px; }
  .treatment-shortcut { padding: 11px 22px; font-size: 14px; }
  .treatment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
  .treatment-section { padding-top: 40px; }
  .treatment-section-head .section-title { font-size: 32px; }
  .home-business { margin-top: 48px; }
  .home-business .business-banner { padding: 30px; }

  .how-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .how-step { padding: 22px 0 0; }
  .how-step .icon { position: static; display: block; margin-bottom: 18px; }

  .business-banner {
    flex-direction: row;
    align-items: center;
    gap: 28px;
    padding: 35px 43px;
  }
  .business-copy { flex: 1; }

  .biz-title { font-size: 56px; }
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature { padding: 32px; }
  .story { padding: 75px 0; }
  .story-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; }
  .story-image { height: 380px; }
  .join { padding: 44px; }
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .salon-title { font-size: 45px; }
  .salon-head { padding: 32px; gap: 24px; }
  .salon-heading { flex-basis: 320px; }
  .salon-actions { flex: 1 1 100%; }
  .salon-head-logo img { max-width: 96px; max-height: 64px; }
}

@media (min-width: 1024px) {
  .treatment-grid--nearby { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
  .treatment-name { font-size: 19px; }
  .home-business .business-banner { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); column-gap: 32px; row-gap: 18px; }
  .home-business .business-copy { grid-column: 1; min-width: 0; align-self: end; }
  .home-business .business-title { font-size: 32px; }
  .home-business .business-actions { grid-column: 1; flex: none; align-self: start; }
  .business-visual { grid-column: 2; grid-row: 1 / 3; width: 100%; }

  .biz-hero {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    align-items: center;
    gap: 40px;
    padding-top: 64px;
    padding-bottom: 14px;
  }
  .biz-title { font-size: clamp(56px, 5vw, 72px); }
  .biz-figure { margin-top: 0; }
  .feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }

  .footer-main { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 36px; }

  .salon-layout {
    grid-template-columns: minmax(0, 1fr) 320px;
    grid-template-areas:
      "booking contact"
      "prices  contact"
      "staff   staff";
    column-gap: 40px;
    row-gap: 48px;
  }
  .salon-actions { flex: 0 0 auto; flex-direction: column; align-items: stretch; }
  .salon-actions .text-link { justify-content: center; }
  .contact { position: sticky; top: 24px; }
}

/* Category pills stay in one scrollable row on narrow screens. */
.filter-label-short { display: none; }
@media (max-width: 719px) {
  .treatment-section-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; margin-bottom: 14px; }
  .treatment-section-head > div { grid-column: 1 / -1; }
  .treatment-section-head .section-title { max-width: 310px; font-size: 26px; line-height: 1.15; }
  .treatment-section-head .text-link { font-size: 12px; }
  .treatment-list-control { display: block; position: relative; grid-column: 2; justify-self: end; min-width: 44px; cursor: pointer; }
  .treatment-list-toggle { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
  .treatment-list-label { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 100px; background: var(--paper); color: var(--green); font-size: 12px; font-weight: 700; }
  .treatment-list-label .icon { width: 14px; height: 14px; transform: rotate(90deg); transition: transform 180ms var(--ease-out); }
  .list-show-less { display: none; }
  .treatment-list-toggle:checked + .treatment-list-label .list-show-more { display: none; }
  .treatment-list-toggle:checked + .treatment-list-label .list-show-less { display: inline; }
  .treatment-list-toggle:checked + .treatment-list-label .icon { transform: rotate(-90deg); }
  .treatment-list-toggle:focus-visible + .treatment-list-label { outline: 3px solid var(--focus); outline-offset: 3px; }
  .treatment-list-toggle:focus-visible + .treatment-list-label .icon { transition: none; }
  .treatment-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc(100% - 28px); gap: 12px; margin-inline: -16px; padding: 1px 16px 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: thin; scrollbar-color: var(--sage-deep) transparent; }
  .treatment-item { scroll-snap-align: start; }
  .treatment-image { aspect-ratio: 2 / 1; }
  .treatment-card-body { padding: 14px; gap: 6px; }
  .treatment-name { font-size: 18px; }
  .treatment-card-actions { gap: 6px; }
  .treatment-cta { min-height: 44px; }
  .treatment-section:has(.treatment-list-toggle:checked) .treatment-grid { grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; grid-auto-columns: auto; gap: 14px; margin-inline: 0; padding: 1px 0; overflow: visible; scroll-snap-type: none; }
  .treatment-shortcuts { flex-wrap: nowrap; gap: 6px; padding-bottom: 5px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--sage-deep) transparent; }
  .treatment-shortcut { flex: none; justify-content: center; min-width: 44px; min-height: 44px; padding: 10px 13px; font-size: 12px; }
  .treatment-shortcut .icon { display: none; }
  .filter-label-long { display: none; }
  .filter-label-short { display: inline; }
}


/* ── Salon page: map, profile, panels ────────────────────────────────
   One template for every salon, and nothing here names one. The map is
   the build's (site/img/map-<slug>.webp, docs/site.md «Карты»): 1700×440
   with the salon at its centre, drawn at the OpenStreetMap export's own
   scale — 1386px for 1700 file pixels — whatever the width of the box. */
.salon-map { position: relative; margin: 8px 0 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--sage); }
.salon-map-link { display: block; position: relative; height: 230px; overflow: hidden; color: var(--green); }
.salon-map-image { position: absolute; left: 50%; top: 50%; display: block; width: 1386px; height: auto; max-width: none; transform: translate(-50%, -50%); }
.salon-map-marker { position: absolute; left: 50%; top: 50%; display: flex; flex-direction: column; align-items: center; gap: 6px; transform: translate(-50%, -100%); }
.salon-map-bubble { display: block; white-space: nowrap; padding: 7px 13px; border: 1px solid var(--line); border-radius: 9px; color: var(--green); background: var(--paper); font-size: 13px; font-weight: 700; box-shadow: 0 4px 18px rgba(21, 61, 51, 0.12); }
.salon-map-marker > .icon { width: 36px; height: 36px; padding: 4px; border-radius: 50%; color: var(--paper); background: var(--green); box-shadow: 0 3px 10px rgba(21, 61, 51, 0.16); }
.salon-map-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 8px; padding: 2px 12px; border-top: 1px solid var(--line); background: var(--paper); }
.salon-map-open { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; color: var(--green); font-size: 12px; font-weight: 700; text-decoration: none; }
.salon-map-open .icon { width: 15px; height: 15px; }
.salon-map-credit { display: inline-flex; align-items: center; min-height: 44px; font-size: 10px; color: var(--muted); text-underline-offset: 3px; }
.salon-map-link:focus-visible { outline: 3px solid var(--focus); outline-offset: -4px; }
.salon-profile-head { display: flex; align-items: center; gap: 20px; margin: 26px 0 18px; }
.salon-profile-copy { flex: 1; min-width: 0; }
.salon-profile-title { max-width: 1000px; font-size: 31px; line-height: 1.12; letter-spacing: -0.045em; overflow-wrap: anywhere; }
.salon-profile-place { display: flex; align-items: flex-start; gap: 7px; margin-top: 12px; color: var(--muted); font-size: 14px; }
.salon-profile-place .icon { width: 18px; height: 18px; margin-top: 2px; }
.salon-profile-brand { display: none; }
.salon-tabs { scroll-margin-top: 16px; }
.salon-section-nav { border-bottom: 1px solid var(--line); }
.salon-section-tabs { display: flex; gap: 24px; }
.salon-tab-option { position: relative; cursor: pointer; }
.salon-tab-radio { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.salon-section-tab { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 54px; color: var(--muted); font-size: 14px; font-weight: 700; border-bottom: 2px solid transparent; transition: color 150ms var(--ease-out), border-color 150ms var(--ease-out); }
.salon-tab-radio:checked + .salon-section-tab { color: var(--green); border-bottom-color: var(--green); }
.salon-tab-radio:focus-visible + .salon-section-tab { outline: 3px solid var(--focus); outline-offset: -3px; border-radius: 6px; }
/* clip, not hidden: clip makes no scroll container, so the widget's
   sticky selection bar still sticks to the window (docs/site.md). It is
   here for the sliding panels. The padding is room inside the clip for
   what reaches past the column — the widget edge to edge on a phone, its
   shadow on wider screens — and the negative margin gives the room back
   to the layout. */
.salon-panels { --panels-room: 16px; position: relative; min-width: 0; overflow: clip; margin-inline: calc(-1 * var(--panels-room)); padding-inline: var(--panels-room); }
.salon-panel { position: absolute; top: 0; left: var(--panels-room); width: calc(100% - 2 * var(--panels-room)); visibility: hidden; pointer-events: none; opacity: 0; transform: translateX(24px); transition: opacity 200ms var(--ease-out), transform 240ms var(--ease-out); }
.salon-panel-services { transform: translateX(-24px); }
.salon-tabs:has(#salon-view-services:checked) .salon-panel-services,
.salon-tabs:has(#salon-view-staff:checked) .salon-panel-staff,
.salon-tabs:has(#salon-view-about:checked) .salon-panel-about { position: relative; left: 0; width: auto; visibility: visible; pointer-events: auto; opacity: 1; transform: translateX(0); }
.salon-tabs:has(.salon-tab-radio:focus-visible) .salon-panel { transition: none; }
.salon-panel-services { padding-top: 20px; }
.salon-panel-staff, .salon-panel-about { padding-top: 28px; padding-bottom: 12px; }
.salon-panel-eyebrow { margin-bottom: 12px; color: var(--green); font-size: 12px; font-weight: 700; }
.salon-panel-staff .staff { margin: 0; }
.salon-panel-staff .staff-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); max-width: 800px; }
.salon-panel-staff .staff-card { background: var(--paper); }
.salon-about-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.salon-about-title { font-size: 27px; line-height: 1.18; max-width: 600px; }
.salon-about-detail { display: flex; gap: 14px; margin-top: 24px; color: var(--muted); font-size: 14px; }
.salon-about-detail > .icon { flex: none; width: 42px; height: 42px; padding: 11px; border-radius: 12px; background: var(--sage); color: var(--green); }
.salon-about-label { margin-bottom: 5px; color: var(--ink); font-size: 15px; }
.salon-about-contact { grid-area: auto; position: static; background: var(--sage); }
.salon-about-prices { margin-top: 16px; font-size: 14px; }
.salon-full-catalogue { display: none; margin-top: 28px; scroll-margin-top: 20px; }
.salon-full-catalogue:target { display: block; }
.salon-catalogue-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 20px; }
.salon-catalogue-date { color: var(--muted); font-size: 11px; }
.salon-catalogue-content { padding-top: 10px; }
.salon-catalogue-close { margin-top: 16px; font-size: 13px; }
@media (max-width: 719px) {
  .salon-page .breadcrumb { display: none; }
  .salon-map { margin: 0 -16px; border-width: 1px 0; border-radius: 0; }
  .salon-profile-head { margin-top: 20px; }
  .salon-profile-title { font-size: 28px; }
}
@media (min-width: 720px) {
  .salon-map-link { height: 260px; }
  .salon-map-footer { padding-inline: 18px; }
  .salon-about-grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; }
  .salon-profile-title { font-size: 42px; }
  .salon-profile-brand { display: flex; padding: 12px; border-radius: 15px; background: var(--paper); border: 1px solid var(--line); }
  .salon-profile-brand:empty { display: none; }
  .salon-profile-head { margin-top: 32px; }
  .salon-section-tabs { gap: 34px; }
  .salon-section-tab { font-size: 15px; }
  /* The page gutter is 40px here: 24px of it holds the widget's shadow. */
  .salon-panels { --panels-room: 24px; }
  .salon-panel-services { padding-bottom: 32px; }
}
@media (min-width: 1024px) {
  .salon-map-link { height: 280px; }
  .salon-profile-title { font-size: 46px; }
  .salon-about-grid { grid-template-columns: minmax(0, 1fr) 370px; gap: 38px; }
}

/* ── Pointer and motion ────────────────────────────────────────────── */

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: var(--green-hover); }
  .btn-soft:hover { background: var(--sage-deep); }
  .btn-outline:hover { background: #f4f8f2; }
  .nav-link:hover, .footer-link:hover, .breadcrumb-link:hover { color: var(--green); text-decoration: underline; text-underline-offset: 4px; }
  .salon-card:hover { box-shadow: 0 10px 26px rgba(23, 62, 50, 0.09); }
  .faq-question:hover, .price-cat-head:hover { color: var(--green); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0ms !important; animation: none !important; }
  .btn:active { transform: none; }
}

/* Desktop keeps the full navigation row; mobile uses native details. */
@media (min-width: 1000px) {
  .market-hero-inner { display: grid; grid-template-columns: minmax(0, .35fr) minmax(0, .65fr); align-items: center; column-gap: 20px; padding-top: 24px; }
  .market-copy { padding-bottom: 32px; }
  .market-eyebrow > span { display: inline; }
  .market-title { font-size: clamp(40px, 4.1vw, 60px); }
  .market-lead { font-size: 20px; }
  .market-cta { width: fit-content; max-width: 100%; margin-top: 24px; }
  .market-cta-button { padding-inline: 26px; }
  .market-reassurance { width: 100%; font-size: 13px; }
  .market-visual { max-width: none; margin: 0; }
  :root { --site-header-height: 83px; }
  .header-inner { display: flex; justify-content: space-between; gap: 20px; min-height: 82px; }
  .brand { font-size: 23px; }
  .header-login { display: none; }
  .mobile-menu { display: none; }
  .nav { display: flex; gap: 26px; }
  .nav-link { padding: 10px 2px; font-size: 15px; }
  .nav-login { display: inline-flex; }
}