/* metko.uk — the product pages' shared look (obekt-pro, domakin, sait-za-kashta-za-gosti, zapisvane-na-chas).
   The brand: Projects/metko-brand. Мастило #14181F, Попадение #EF4423 (the dot and the main button only),
   Хартия #F6F4EF, Камък #6A707B. The main button takes the red one step deeper so its white label reads 4.5:1.
   index.html keeps the same rules inline. */
:root {
  --p-bg: #f6f4ef; --p-surface: #edeae3; --p-ink: #14181f; --p-muted: #5f6570;
  --p-accent: #14181f; --p-accent-ink: #ffffff; --p-action: #d9381a; --p-action-ink: #ffffff;
  --p-inv-bg: #14181f; --p-inv-surface: #1f242d; --p-inv-ink: #f6f4ef; --p-inv-muted: #9aa0aa;
  --p-inv-accent: #f6f4ef; --p-inv-accent-ink: #14181f; --p-inv-action: #d9381a; --p-inv-action-ink: #ffffff;
  --brand-hit: #ef4423;
  --font-display: "Onest", system-ui, sans-serif;
  --font-text: "Onest", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --display-weight: 700;
  --display-tracking: -0.035em;
  --display-tracking-xl: -0.045em;
  --ly-scale: 0.97;
}

/* the standard Cyrillic letter forms in every face: the Bulgarian forms read as Latin in the name */
html body, html body * { font-feature-settings: "locl" 0 !important; }
html body .ui, html body .ui * { font-feature-settings: "locl" 0, "tnum" 1, "cv11" 1 !important; }

/* the brand's word mark: lowercase, 800, the dot in the brand's red */
.nav__logo img { height: 28px; width: 28px; border-radius: 7px; }
.wordmark { font-weight: 800; letter-spacing: -0.04em; }
.dot { display: inline-block; width: 0.2em; height: 0.2em; margin-left: 0.05em; border-radius: 50%; background: var(--brand-hit); vertical-align: baseline; }
.btn--primary { font-weight: 600; }
.checks li::before { background: var(--ink); }

/* hero: the lit ground of the art frame, one soft light and a fine grain */
.hero__art { background:
    radial-gradient(70% 60% at 18% 12%, color-mix(in oklab, var(--ground-surface) 80%, white), transparent 70%),
    radial-gradient(60% 50% at 90% 100%, color-mix(in oklab, var(--ground-bg) 80%, var(--ground-accent)), transparent 70%),
    var(--ground-bg); }
.hero__art::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .2; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .3 0 0 0 0 .3 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hero__proof { font-size: var(--t-small); color: var(--ink); }

/* the client's own screen in a browser window (inside a visual only) */
.shot-win { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px rgb(0 0 0 / .07), 0 24px 60px -28px rgb(0 0 0 / .45); }
.shot-win__bar { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px; border-bottom: 1px solid rgb(0 0 0 / .07); font: 400 13px/1 var(--font-text); color: #5d6268; background: #f6f5f3; }
.shot-win__bar i { width: 10px; height: 10px; border-radius: 50%; background: #dcdfe2; flex: none; }
.shot-win__bar span { margin-left: 8px; padding: 5px 12px; border-radius: 99px; background: #fff; }
.shot-win img { display: block; width: 100%; height: auto; }
.hero__art > .ly-piece--note { left: var(--s-6); bottom: var(--s-6); width: 300px; z-index: 2; }
.note-card { background: #fff; color: #16181a; border-radius: 12px; padding: 14px 16px; font: 400 14px/1.4 var(--font-text); box-shadow: 0 0 0 1px rgb(0 0 0 / .07), 0 18px 40px -20px rgb(0 0 0 / .45); }
.note-card__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.note-card__row h5 { margin: 0; font: 500 15px/1.3 var(--font-text); }
.note-chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 99px; font-size: 13px; font-weight: 500; background: #e7f4ec; color: #17673f; white-space: nowrap; }
.note-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.note-line { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 13px; color: #3d4247; border-top: 1px solid rgb(0 0 0 / .06); }
.note-line i { width: 18px; height: 18px; border-radius: 50%; flex: none; display: grid; place-items: center; background: #e7f4ec; color: #17673f; font-style: normal; font-size: 13px; font-weight: 700; }
.note-line b { font-weight: 500; color: #16181a; }

/* screens inside panels and frames */
.shot { display: block; width: 100%; height: auto; border-radius: 10px; box-shadow: 0 0 0 1px rgb(0 0 0 / .08), 0 20px 50px -24px rgb(0 0 0 / .45); }
.shot--phone { border-radius: 22px; box-shadow: 0 0 0 6px #1c1c1e, 0 24px 50px -20px rgb(0 0 0 / .5); }
/* a picture with its own frames and shadow baked in (two phones) */
.shot--set { display: block; width: 100%; height: auto; }

/* a section of cards with screens (one or two screens tall) */
.sec-cards .panel { --p-h: 336px; }
@media (min-width: 1024px) and (max-width: 1279px) { .sec-cards .panel { --p-h: 228px; } }
/* a one-screen pair of cards on a tablet: taller screens, so the pair fills its screen */
@media (min-width: 640px) and (max-width: 1023px) { .sec-cards:not(.g2) .panel { --p-h: 440px; } }
@media (min-width: 640px) and (max-width: 1023px) {
  .sec-cards > .wrap > .grid:last-child { align-self: stretch; }
  .sec-cards > .wrap > .group > .grid:last-child { flex: 1 1 auto; min-height: 0; }
}
@media (max-width: 639px) {
  .sec-cards .panel { --p-h: 136px; }
  .sec-cards > .wrap > .grid:last-child { align-self: stretch; }
  .sec-cards > .wrap > .group > .grid:last-child { flex: 1 1 auto; min-height: 0; }
  .sec-cards h2 > .muted { display: none; }
  .nav__actions .btn { height: 44px; }
  /* a phone screen in a panel: its box ends at the panel's foot, the screen's top in view */
  .panel .stage > .at-rise:has(> .shot--phone) { bottom: 0; }
  .panel .stage > .at-rise > .shot--phone { height: 100%; object-fit: cover; object-position: top; }
}

/* screens rising out of a frame's bottom edge (x.ai): from 1024 they stand on the foot, cut by it;
   below that they hang from the top so the screens' heads stay in view and the foot cuts them */
.stage > .rise-set, .stage > .rise-phone { left: 50%; translate: -50% 0; top: auto; bottom: -48px; }
.stage > .rise-set { width: min(560px, calc(100% - 48px)); }
.stage > .rise-phone { width: 280px; }
@media (max-width: 1023px) { .stage > :is(.rise-set, .rise-phone) { top: 32px; bottom: auto; } }
@media (max-width: 639px) {
  .stage > .rise-set { width: calc(100% - 32px); top: 16px; }
  .stage > .rise-phone { width: 220px; top: 24px; }
}

/* a split: the words and their facts, the picture down to the section's foot.
   Its facts are plain lines on the text's own left line, a hairline between them (split-text-left) */
.split-facts { list-style: none; margin: 0; padding: 0; display: grid; }
.split-facts li { padding-block: var(--s-3); border-top: 1px solid var(--line); }
.split-facts li:last-child { border-bottom: 1px solid var(--line); }
.sec-split .btn-row { margin-top: var(--s-2); }
@media (max-width: 639px) { .sec-split .stack-5 > .t-lead { font-size: var(--t-body); } }

/* questions: the list runs to the screen's foot */
.sec-faq .faq { align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; }
@media (max-width: 1023px) { .sec-faq .grid.fill { grid-template-rows: auto minmax(0, 1fr); } }
@media (max-width: 639px) {
  .sec-faq .stack-4 > p:not(:has(.mail-link)) { display: none; }
  /* a phone: the rows a step closer, so five questions fit their screen */
  .sec-faq .faq > .faq__item { padding: var(--s-3) 0; }
  .sec-faq .faq > .faq__item:first-child { padding-top: 0; }
}
.mail-link { display: inline-flex; align-items: center; gap: var(--s-3); font-weight: 500; }

/* app-frame (sections-library.md, the whole recipe) */
.app.ui { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); margin-top: var(--s-7); background: var(--u-bg); border: 1px solid var(--u-border); border-radius: var(--u-r); box-shadow: var(--u-shadow); }
.app > .app__pane { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.app > .app__pane + .app__pane { border-left: 1px solid var(--u-line); }
.app > .app__pane > .ui-panel { width: 100%; border: 0; border-radius: 0; box-shadow: none; }
.app > .app__pane::after { content: ""; position: absolute; inset: auto 0 0 0; height: 64px; background: linear-gradient(transparent, var(--u-bg)); pointer-events: none; }
@media (min-width: 1024px) and (max-width: 1279px) { .app.ui { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
@media (max-width: 1023px) {
  .app.ui { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .app > .app__pane--list { max-height: 252px; }
  .app > .app__pane--list::after { display: none; }
  .app .ui-win__side { display: none; }
  .app .ui-win__body { grid-template-columns: minmax(0, 1fr); }
  .app > .app__pane + .app__pane { border-left: 0; border-top: 1px solid var(--u-line); }
}
@media (max-width: 639px) {
  .app.ui { grid-template-rows: minmax(0, 1fr); }
  .app > .app__pane--list { display: none; }
  .app > .app__pane + .app__pane { border-top: 0; }
  .app .ui-chat__online { display: none; }
}

/* the calendar in a split: its event dates read as dates, not as buttons (one button style a screen) */
.sec-split .ui-cal__date, .sec-split .ui-cal__ev.is-now .ui-cal__date { background: none; box-shadow: none; }
.sec-split .ui-cal__ev.is-now .ui-cal__date :is(b, i) { color: inherit; }