/* pages/obory.css: /obory/ index + 8 sector pages (zf industries template, 05-industries.md). Block 1 is a snapshot of pages/sluzby.css (hero, section head, hairline helpers, process, FAQ paper); block 2 is obory-only. */
/* =====================================================================
   pages/sluzby.css  /sluzby/ index + 4 service details (zf /services + service template)
   Page-local on top of zf.css. Values: zf (03-services.md) unless noted "spec 8.1".
   ===================================================================== */

/* section rhythm: zf py_60 / 40 <=991 / 24 <=575 */
.ss { padding: 60px 0; position: relative; }
.ss--first { padding-top: 24px; }
@media (max-width: 991px) { .ss { padding: 40px 0; } }
@media (max-width: 575px) { .ss { padding: 24px 0; } }

/* HERO (owner rework 2026-11-04): big headline, lead + two buttons below, dot field on the free right side */
.svh { position: relative; padding: 56px 0 64px; border-bottom: 1px solid var(--line); background: var(--bg); overflow: clip; }
.svh::after { content: ""; position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; width: 42%; pointer-events: none;
  background: radial-gradient(circle, rgba(173, 150, 241, .55) 1.2px, transparent 1.6px) 0 0 / 22px 22px;
  -webkit-mask: radial-gradient(70% 70% at 85% 45%, #000 10%, transparent 75%); mask: radial-gradient(70% 70% at 85% 45%, #000 10%, transparent 75%); }
.svh > .container { position: relative; z-index: 1; }
.svh__row { margin-top: 48px; }
.svh__l { max-width: 900px; min-width: 0; }
.svh__h { font-size: clamp(40px, 5.2vw, 72px); line-height: 1.05; font-weight: 500; letter-spacing: -0.03em; text-wrap: balance; }
.svh__p { max-width: 600px; margin-top: 24px; font-size: 18px; line-height: 28px; color: var(--text-2); }
.svh__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
@media (max-width: 991px) { .svh { padding: 24px 0 40px; } .svh::after { width: 60%; opacity: .6; } .svh__row { margin-top: 32px; } }
@media (max-width: 575px) {
  .svh::after { display: none; }
  .svh__row { margin-top: 24px; }
  .svh__h { font-size: 40px; line-height: 44px; letter-spacing: -0.8px; }
  .svh__p { margin-top: 16px; font-size: 16px; line-height: 24px; }
  .svh__cta { margin-top: 24px; }
  .svh__cta .btn { flex: 1 1 100%; justify-content: center; }
}

/* STICKY SUB-NAV (zf 4.2, spec 8.1: top under our solid header) ------------- */
.svc-body { position: relative; }
.snav { position: sticky; top: var(--header-h); z-index: 5; padding: 24px 0 8px; background: var(--bg); }
.snav .container { position: relative; }
.snav__list { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.snav__list::-webkit-scrollbar { display: none; }
.snav__link { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 14px; border-radius: var(--r-tag); font-size: 16px; line-height: 24px; font-weight: 500; white-space: nowrap; color: var(--muted); transition: color var(--dur-2), background-color var(--dur-2); }
.snav__link:hover, .snav__link.is-active { color: var(--accent); background: var(--accent-wash); }
.snav__toggle { display: none; }
@media (max-width: 575px) {
  .snav { padding: 8px 0; }
  .snav__toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; padding: 14px 16px; border: 1px solid var(--muted); border-radius: 10px; font-size: 16px; line-height: 20px; font-weight: 500; text-align: left; }
  .snav__toggle svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 250ms ease; }
  .snav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
  .snav__list { display: none; position: absolute; left: var(--gutter); right: var(--gutter); top: calc(100% - 4px); flex-direction: column; gap: 2px; padding: 8px; overflow: visible; background: var(--card); border: 1px solid var(--muted); border-top: 0; border-radius: 0 0 10px 10px; }
  .snav--open .snav__list { display: flex; }
  .snav__link { padding: 12px 14px; }
}
.svc-body section[id] { scroll-margin-top: calc(var(--header-h) + 76px); }   /* only under the sticky sub-nav; elsewhere html scroll-padding */
@media (max-width: 575px) { .svc-body section[id] { scroll-margin-top: calc(var(--header-h) + 64px); } }

/* SECTION HEAD (eyebrow + H2 left, text right; zf who-we-help header) ------- */
.shead { display: flex; justify-content: space-between; align-items: flex-start; gap: 64px; margin-bottom: 48px; }
.shead__l { max-width: 520px; min-width: 0; }
.shead__h { margin-top: 16px; font-size: var(--fs-h2); line-height: 44px; font-weight: 500; letter-spacing: -0.72px; text-wrap: balance; }
.shead__p { max-width: 630px; padding-top: 6px; font-size: 16px; line-height: 24px; color: var(--text-2); }
.band--paper .shead__p { color: var(--ink-2); }
.band--paper .shead__h { color: var(--ink); }
@media (max-width: 991px) { .shead { flex-direction: column; gap: 16px; } .shead__p { padding-top: 0; } }
@media (max-width: 575px) { .shead { margin-bottom: 24px; } .shead__h { line-height: 40px; } }

/* hairline grids: 4 cols down to 2 at <=1200 (zf), 1 col at 575 (zf.css) ---- */
@media (min-width: 576px) and (max-width: 1200px) { .hgrid--4 { grid-template-columns: repeat(2, 1fr); } }
/* audience cells (zf: no icon, title + text at the bottom, gap 126 / 40) */
.hgrid--aud .hcell__t { font-weight: 600; }
.hcell--cta .btn--dark:hover { background: #fff; }

/* SIGNS SLAB (zf 4.4, spec 8.1) ---------------------------------------------- */
.slab { display: grid; grid-template-columns: minmax(100px, 508px) 1fr; gap: 48px; padding: 60px 32px; border-radius: var(--r-media); background: #fff; color: var(--ink); }
.slab__img { align-self: stretch; min-height: 320px; border-radius: 8px; overflow: hidden; background: #0B0A12; }
.slab__img img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.slab__h { font-size: var(--fs-h2); line-height: 44px; font-weight: 500; letter-spacing: -0.72px; color: var(--ink); text-wrap: balance; }
.slab__sub { margin: 16px 0 12px; font-size: 16px; line-height: 24px; color: var(--ink-2); }
.slab__list { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; margin-bottom: 24px; }
.slab__list li { position: relative; padding-left: 20px; font-size: 16px; line-height: 24px; color: var(--ink); }
.slab__list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-ink); }
@media (max-width: 991px) { .slab { grid-template-columns: 1fr; padding: 32px; } .slab__img { min-height: 0; aspect-ratio: 16 / 9; } }
@media (max-width: 575px) { .slab { padding: 24px 16px; gap: 24px; } .slab__img { aspect-ratio: auto; height: 229px; } .slab__h { line-height: 36px; } }

/* PROCESS (zf 4.6: 3 steps + dark image cell on paper) ---------------------- */
.pcell { --cell-gap: 40px; }
.pcell__b { max-width: 330px; }
.pcell .hcell__t { color: var(--ink); }
.pbul { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.pbul li { display: flex; gap: 8px; align-items: flex-start; font-size: 16px; line-height: 24px; color: var(--ink-2); }
.pbul svg { flex: none; width: 16px; height: 16px; margin-top: 4px; fill: none; stroke: var(--accent-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hgrid--paper .hcell.pcta { padding: 0; gap: 0; background: #0B0909; color: #fff; }
.pcta__img { width: 100%; height: 193px; object-fit: cover; object-position: top left; }
.pcta__b { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; flex: 1; padding: 20px; background: #09090B; }
.pcta__t { font-size: 20px; line-height: 24px; font-weight: 500; }
.pcta__p { font-size: 16px; line-height: 24px; color: #E4E4E7; }
.pcta .btn { margin-top: auto; }
@media (max-width: 575px) { .pcell { --cell-gap: 24px; } }

/* DEMO (stands in for zf tools block) ---------------------------------------- */
.demo { display: grid; grid-template-columns: minmax(280px, 5fr) 7fr; gap: 64px; align-items: center; }
.demo__p { margin: 16px 0 32px; max-width: 460px; font-size: 16px; line-height: 24px; color: var(--text-2); }
.demo__btns { display: flex; flex-wrap: wrap; gap: 12px; }
.demo__m { min-width: 0; }
.demo__stage { width: 100%; }
.demo__shot { border-radius: var(--r-xl); border: 1px solid var(--line); background: var(--card); padding: 16px; }
.demo__shot img { width: 100%; height: auto; border-radius: var(--r-media); }
@media (max-width: 991px) { .demo { grid-template-columns: 1fr; gap: 32px; } }

/* RELATED PROJECTS ---------------------------------------------------------- */
.band--surface .shead__h { color: #fff; }
.work-grid--2 { grid-template-columns: repeat(2, 1fr); }
.work-tile { min-height: 220px; }
.rel__all { margin-top: 32px; }
@media (max-width: 991px) { .work-grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .work-grid--2 { grid-template-columns: 1fr; } }

/* FAQ paper variant (zf 4.10, spec 2.8) --------------------------------------- */
.faq--paper { display: block; }
.faq--paper .faq__list { display: block; border: 1px solid var(--paper-line); border-radius: var(--r-grid); background: #fff; overflow: hidden; }
.faq--paper .faq__item { border: 0; border-radius: 0; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 1px solid var(--paper-line); }
.faq--paper .faq__item:last-child { border-bottom: 0; }
.faq--paper .faq__q { min-height: 64px; padding: 24px; gap: 16px; font-size: 18px; line-height: 28px; font-weight: 600; color: var(--ink); }
.faq--paper .faq__icon { width: 28px; height: 28px; border-radius: 8px; border-color: var(--paper-line); background: var(--paper); }
.faq--paper .faq__icon::before, .faq--paper .faq__icon::after { background: var(--ink); }
.faq--paper .faq__item.is-open .faq__icon { background: var(--accent-ink); border-color: var(--accent-ink); }
.faq--paper .faq__item.is-open .faq__icon::before { background: #fff; }
.faq--paper .faq__a p { max-width: 665px; padding: 0 24px 24px; font-size: 16px; line-height: 24px; color: var(--ink-2); }
@media (max-width: 575px) { .faq--paper .faq__q { padding: 20px 16px; } .faq--paper .faq__a p { padding: 0 16px 20px; } }

/* INDEX: sticky-left group + 2-col cards (zf 3.2) ---------------------------- */
.grp { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(0, 775px); gap: 48px; align-items: start; }
.grp__l { position: sticky; top: calc(var(--header-h) + 44px); }
.grp__h { font-size: var(--fs-h2); line-height: 44px; font-weight: 500; letter-spacing: -0.72px; }
.grp__p { padding: 12px 0 32px; font-size: 16px; line-height: 24px; color: var(--text-2); }
.grp__img { border-radius: var(--r-media); overflow: hidden; }
.grp__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }   /* photoreal mockup card */
.grp__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.acard { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; min-height: 237px; padding: 24px; border-radius: var(--r-media); background: var(--card); border-top: .6px solid var(--line); border-left: .6px solid var(--line); }
.acard::before { content: ""; position: absolute; width: 500px; height: 500px; top: -300px; left: -250px; border-radius: 50%; filter: blur(50px); opacity: 0; pointer-events: none; transition: opacity var(--dur-3) ease;
  background: radial-gradient(circle, rgba(88, 246, 177, .22) 0, rgba(88, 246, 177, .10) 30%, rgba(88, 246, 177, .04) 60%, transparent 75%); }
.acard > * { position: relative; }
.acard .hcell__icon { align-self: flex-start; }
.acard__t { margin-bottom: 8px; font-size: 18px; line-height: 28px; font-weight: 600; }
.acard__p { font-size: 16px; line-height: 24px; color: var(--text-2); }
.acard__a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 8px; font-size: 16px; line-height: 24px; color: #F5F4F4; text-decoration: underline; text-underline-offset: 3px; }
.acard__a svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.acard--cta { background: var(--accent-2); border-color: var(--accent-2); color: #010102; }
.acard--cta::before { display: none; }
.acard--cta .acard__p { color: #010102; }
.acard--cta .acard__a { color: #010102; }
.acard--cta .hcell__icon { background: #010102; border-color: #010102; color: var(--accent-2); }
@media (hover: hover) and (pointer: fine) { .acard:hover::before { opacity: 1; } }
@media (max-width: 991px) { .grp { grid-template-columns: 1fr; } .grp__l { position: static; } .grp__img { display: none; } .grp__p { padding-bottom: 8px; } }
@media (max-width: 575px) { .grp__cards { grid-template-columns: 1fr; } .grp__h { line-height: 40px; } .acard { min-height: 0; } }

@media (prefers-reduced-motion: reduce) { .snav__toggle svg { transition: none; } }

/* QA 2026-11-04: zf /services + /services/web-design at 390 render H2 24/32, glass title 16/24, card H3 16/24 */
@media (max-width: 575px) {
  .shead__h, .slab__h, .grp__h { font-size: 24px; line-height: 32px; }
  .acard__t, .hgrid--aud .hcell__t { font-size: 16px; line-height: 24px; }
}

/* =====================================================================
   BLOCK 2: obory only (zf industries template 05-industries.md sections 3-12)
   ===================================================================== */

/* edge grid: 3 cards + lime CTA cell (zf: white CTA, ours inverted lime per spec 8.1) */
.hcell--cta .btn--dark:hover { background: #fff; }
a.hcell { color: inherit; }
a.hcell > div { flex: 1; display: flex; flex-direction: column; }
a.hcell .ws__a { margin-top: auto; padding-top: 16px; }

/* index hero */
.svh--c { padding-bottom: 0; }
.svh--c .page-hero { padding: 40px 0 72px; }
@media (max-width: 991px) { .svh--c .page-hero { padding: 24px 0 40px; } }
.svh--c .page-hero__h { max-width: 760px; }
@media (max-width: 575px) { .svh--c .page-hero__h { font-size: 36px; line-height: 44px; letter-spacing: -0.72px; } }

/* problems: full hairlines from zf.css .nrows */
.band--surface .nrow__t { color: #fff; }

/* TAB RAIL + PANEL (zf 05 section 6, spec 8.1 tab rail) ----------------------- */
.tl { display: flex; gap: 24px; align-items: flex-start; }
.rail { width: 284px; flex: none; padding: 12px; border-radius: var(--r-grid); background: var(--card); }
.rail__toggle { display: none; }
.rail__list { display: flex; flex-direction: column; gap: 8px; padding: 0 6px; }
.tab { position: relative; display: flex; align-items: center; width: 100%; min-height: 48px; padding: 12px 16px; border-radius: var(--r-tag); text-align: left; font-size: 16px; line-height: 24px; font-weight: 500; color: var(--text-2); transition: color var(--dur-2), background-color var(--dur-2); }
.tab[aria-selected="true"] { color: var(--accent-2); background: rgba(88, 246, 177, .12); }
.tab[aria-selected="true"]::before { content: ""; position: absolute; left: 0; top: 14px; width: 2px; height: 16px; border-radius: 2px; background: var(--accent-2); }
@media (hover: hover) and (pointer: fine) { .tab:hover { color: var(--accent-2); background: rgba(88, 246, 177, .12); } }
.tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tl__panels { flex: 1; min-width: 0; display: grid; }
/* all panels share one grid cell, so the area keeps the tallest panel's height and nothing below jumps */
.tl__panels > .tp { grid-area: 1 / 1; }
.tp { display: flex; gap: 32px; padding: 32px; min-height: 328px; border-radius: 12px; background: #fff; color: var(--ink); overflow: hidden; }
.tp[hidden] { display: flex; visibility: hidden; }
.tp:not([hidden]) { animation: tp-in 200ms ease both; }
@keyframes tp-in { from { opacity: 0; } to { opacity: 1; } }
.tp__l { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.tp__head { display: flex; gap: 16px; align-items: flex-start; }
.tp__chip { flex: none; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-grid); background: var(--paper); border: .8px solid var(--paper-line); color: var(--accent-ink); }
.tp__chip svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tp__t { font-size: 18px; line-height: 28px; font-weight: 500; color: var(--ink); }
.tp__d { font-size: 16px; line-height: 24px; color: var(--ink-2); }
.tp__b { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; }
.tp__b li { display: flex; gap: 8px; align-items: flex-start; font-size: 16px; line-height: 24px; color: var(--ink); }
.tp__b svg { flex: none; width: 16px; height: 16px; margin-top: 4px; fill: none; stroke: var(--accent-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tp__img { flex: none; width: min(40%, 380px); align-self: center; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: #0B0A12; }
.tp__img img { width: 100%; height: 100%; object-fit: cover; }   /* photoreal 4:3 mockup card, centred */
/* logo wall (zf stack section; dark tiles because the brand SVGs are the white/dark-mode variants) */
.tp--logos { padding: 0; background: var(--card); border: .6px solid var(--line); }
.sp { flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(max(140px, 25%), 1fr)); align-content: stretch; }   /* 3 logos fill the row, rows fill the panel */
.sp__t { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; min-height: 195px; padding: 48px 24px; background: var(--card); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 14px; line-height: 20px; color: var(--text-2); }
.sp__t:nth-child(4n+2), .sp__t:nth-child(4n+3) { background: #0F0E18; }
.sp__t img { width: 72px; height: 72px; }
@media (max-width: 1200px) { .sp { grid-template-columns: repeat(auto-fit, minmax(max(140px, 33.33%), 1fr)); } }
@media (max-width: 991px) {
  .tl { flex-direction: column; gap: 16px; }
  .rail { width: 100%; padding: 8px; }
  .rail__list { flex-direction: row; overflow-x: auto; padding: 0 0 10px; gap: 4px; scrollbar-width: none; }
  .rail__list::-webkit-scrollbar { display: none; }
  .tab { flex: none; width: auto; white-space: nowrap; }
  .tab[aria-selected="true"]::before { left: 16px; right: 16px; top: auto; bottom: -6px; width: auto; height: 2px; }
  .tl__panels { width: 100%; }
}
@media (max-width: 768px) {
  .tp { flex-direction: column; min-height: 0; padding: 24px; }
  .tp__img { width: 100%; }
  .tp--logos { padding: 0; }
  .sp { grid-template-columns: repeat(2, 1fr); }
  .sp__t:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .sp__t { min-height: 0; padding: 18px 24px; gap: 12px; }
  .sp__t img { width: 40px; height: 40px; }
}
@media (max-width: 575px) {
  .rail { padding: 0; background: none; position: relative; }
  .rail__toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; padding: 14px 16px; border: 1px solid var(--muted); border-radius: 10px; font-size: 16px; line-height: 20px; font-weight: 500; text-align: left; }
  .rail__toggle svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 250ms ease; }
  .rail__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
  .rail__list { display: none; position: absolute; left: 0; right: 0; top: calc(100% - 4px); z-index: 10; flex-direction: column; overflow: visible; padding: 8px; gap: 2px; background: var(--card); border: 1px solid var(--muted); border-top: 0; border-radius: 0 0 10px 10px; }
  .rail.is-open .rail__list { display: flex; }
  .tab { width: 100%; white-space: normal; padding: 12px 14px; }
  .tab[aria-selected="true"]::before { left: 0; right: auto; top: 14px; bottom: auto; width: 2px; height: 16px; }
  .tp__b { grid-template-columns: 1fr; }
  .tp { padding: 20px; }
  .tp--logos { padding: 0; }
}

/* REVIEWS SLIDER (zf 05 section 11; track + arrows from zf.css .ws__track / .sbtn) */
.rv__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.rv__track::-webkit-scrollbar { display: none; }
.rv__track:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rv__track { gap: 24px; }
.rv__c { flex: 0 0 600px; display: flex; flex-direction: column; justify-content: space-between; gap: 72px; padding: 32px; border-radius: 12px; border-top: .6px solid var(--line); border-left: .6px solid var(--line); background: var(--card); scroll-snap-align: start; }
.rv__q { width: 32px; height: 32px; fill: var(--accent-2); }
.rv__t { margin-top: 48px; font-size: 24px; line-height: 32px; font-weight: 500; color: #fff; }
.rv__pill { display: inline-flex; align-items: center; min-height: 44px; margin-top: 24px; padding: 8px 16px; border-radius: 999px; background: var(--accent-2); color: #010102; font-size: 14px; line-height: 20px; font-weight: 500; transition: background-color var(--dur-2); }
@media (hover: hover) and (pointer: fine) { .rv__pill:hover { background: #fff; } }
.rv__f { display: flex; align-items: center; gap: 12px; padding-top: 32px; border-top: 1px solid #2A2A27; }
.rv__ph { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid #fff; background: var(--surface); }
.rv__n { display: block; font-size: 16px; line-height: 24px; font-weight: 600; }
.rv__r { display: block; font-size: 14px; line-height: 20px; color: var(--text-2); }
@media (max-width: 575px) {
  .rv__c { flex: 0 0 85%; padding: 24px; gap: 24px; }
  .rv__t { margin-top: 16px; font-size: 16px; line-height: 24px; }
}

@media (prefers-reduced-motion: reduce) { .tp:not([hidden]) { animation: none; } .rail__toggle svg, .ws__a svg { transition: none; } }

/* zf industries: "Real problems" is py_80 (32 phone), FAQ py_80 (24 phone) */
#problemy.ss, #otazky.ss { padding: 80px 0; }
@media (max-width: 991px) { #problemy.ss, #otazky.ss { padding: 40px 0; } }
@media (max-width: 575px) { #problemy.ss { padding: 32px 0; } #otazky.ss { padding: 24px 0; } }
/* zf service template buttons: 16/24 w500, padding 8 16 (hero card primary 5 16); min-height 44 kept (owner bar) */
.svh .btn, .ss .btn:not(.btn--soft) { font-size: 16px; line-height: 24px; font-weight: 500; padding: 8px 16px; }
.svh .btn--primary { padding: 5px 16px; }