/* Voljeni homepage, the page for funeral companies and the legal pages.
   Same system as the memorial pages (voljeni.css): white paper, a light grey wall, black frames,
   PT Serif for what matters, Mulish for reading. On the homepage the phone shows the real example page,
   which scrolls through itself. The only warm color is candlelight, in the dark bands. */

.is-home { font-size: 16.5px; line-height: 1.65; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--ink); color: var(--inv-ink); padding: 10px 14px; }
.skip:focus { left: 16px; top: 16px; }
.hs-in { max-width: 74rem; margin-inline: auto; padding-inline: 24px; }
.hs-in.narrow { max-width: 46rem; }
@media (max-width: 599px) { .hs-in { padding-inline: 16px; } }

/* ---------- header ---------- */
.hh { position: sticky; top: 0; z-index: 40; padding: 10px 24px 0; background: var(--bg); }
.hh-in { position: relative; max-width: 74rem; margin-inline: auto; display: flex; align-items: stretch; border: 1px solid var(--frame); background: var(--bg); }
.hh-brand { flex: none; }
.hh-nav { display: flex; align-items: stretch; margin-left: auto; }
.hh-nav a { display: flex; align-items: center; padding: 0 15px; font-size: 14px; color: var(--ink-2); text-decoration: none; white-space: nowrap; border-left: 1px solid var(--line); }
.hh-nav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 6px; }
.hh-nav .hh-cta { min-height: 52px; border-left: 0; padding: 0 20px; color: var(--inv-ink); }
.hh-nav .hh-cta:hover { color: var(--inv-ink); text-decoration: none; background: #262624; }
.hh-menu { display: none; }
/* the menu folds below 1160px: since 0.16.0 it has one more item, the guide */
@media (max-width: 1159px) {
  .hh { padding-inline: 16px; }
  .hh-menu { display: flex; align-items: center; margin-left: auto; padding: 0 18px; background: none; border: 0; border-left: 1px solid var(--line); font-family: var(--head); font-weight: 600; font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); }
  .hh-menu::after { content: ""; width: 9px; height: 9px; margin-left: 10px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform 0.15s; }
  .hh-menu[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
  .hh-nav { display: none; position: absolute; left: -1px; right: -1px; top: 100%; flex-direction: column; background: var(--bg); border: 1px solid var(--frame); box-shadow: 0 18px 30px -18px rgba(0, 0, 0, 0.35); }
  .hh.open .hh-nav { display: flex; }
  .hh-nav a { border-left: 0; border-top: 1px solid var(--line); min-height: 52px; padding: 0 18px; font-size: 15px; }
  .hh-nav a:first-child { border-top: 0; }
  .hh-nav .hh-cta { margin: 10px; justify-content: center; }
}
@media (max-width: 399px) { .hh-brand small { display: none; } }
/* the gate has only two links, they fit on a phone too */
.is-gate .hh-menu { display: none; }
.is-gate .hh-nav { display: flex; position: static; flex-direction: row; border: 0; box-shadow: none; }
.is-gate .hh-nav a { border-top: 0; border-left: 1px solid var(--line); min-height: 52px; }
.is-gate .hh-nav .hh-cta { margin: 0; }
@media (max-width: 599px) { .is-gate .hh-nav a:not(.hh-cta) { display: none; } .is-gate .hh-brand small { display: none; } }

/* ---------- shared type ---------- */
.hs { padding-block: 96px; }
.hs-h { font-family: var(--serif); font-weight: 700; font-size: clamp(30px, 3.7vw, 46px); line-height: 1.1; letter-spacing: -0.015em; max-width: 22ch; text-wrap: balance; }
.hs-sub { margin-top: 14px; font-size: 17.5px; color: var(--ink-2); max-width: 58ch; text-wrap: pretty; }
.hs h3 { font-family: var(--body); font-weight: 800; font-size: 18px; line-height: 1.35; letter-spacing: -0.005em; }
.hs p { text-wrap: pretty; }
.is-home .actions { margin-top: 28px; gap: 12px; }
.is-home .btn { min-height: 50px; padding: 0 24px; }
.btn.ghost:hover { background: var(--ink); color: var(--inv-ink); }
.btn:not(.ghost):not(.light):hover { background: #262624; }
.wall { background: var(--band); }
.soon { display: inline-block; font-family: var(--head); font-weight: 600; font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; padding: 5px 11px; border: 1px solid var(--frame); background: var(--bg); margin-bottom: 18px; }
@media (max-width: 759px) { .hs { padding-block: 64px; } }

/* ---------- hero ---------- */
.hs-hero { background: var(--band); padding: 56px 0 88px; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; }
.hero-copy h1 { font-family: var(--serif); font-weight: 700; font-size: clamp(42px, 5.4vw, 74px); line-height: 1.02; letter-spacing: -0.022em; text-wrap: balance; }
.hero-copy .lead { margin-top: 26px; font-size: 18.5px; line-height: 1.65; color: var(--ink-2); max-width: 44ch; }
.hero-fine { margin-top: 22px; font-size: 14px; color: var(--muted); max-width: 46ch; }
.hero-vis { position: relative; }
@media (max-width: 959px) {
  .hs-hero { padding: 36px 0 64px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
}
@media (max-width: 599px) { .hero-copy .lead { font-size: 17px; } }

/* the families' hero: the words, and the phone with the real page */
.fam-hero { background: linear-gradient(180deg, var(--band) 0%, var(--band) 78%, var(--bg) 100%); }
@media (min-width: 960px) { .fam-hero .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 48px; } }

/* ---------- the phone with the example page ---------- */
.ph-stage { position: relative; display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 36px; align-items: center; justify-content: center; }
.ph-stage:not(.with-parts) { grid-template-columns: 300px; }
.phone { position: relative; width: 100%; aspect-ratio: 9 / 19.2; background: #0B0B0B; border-radius: 46px; padding: 11px; box-shadow: 0 0 0 1px #2B2B29 inset, 0 0 0 2px #1A1A19, 0 40px 70px -28px rgba(0, 0, 0, 0.55), 0 10px 22px -10px rgba(0, 0, 0, 0.35); }
.phone-screen { position: relative; height: 100%; border-radius: 36px; overflow: hidden; background: var(--bg); --s: 0.712; }
/* the status bar of a phone: time on the left, the camera in the middle, signal and battery on the right */
.ph-status { position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 34px; display: flex; align-items: center; justify-content: space-between; padding: 0 22px 0 26px; background: var(--bg); font-family: var(--body); font-weight: 700; font-size: 12.5px; color: var(--ink); }
.ph-status::before { content: ""; position: absolute; top: 9px; left: 50%; width: 76px; height: 20px; margin-left: -38px; border-radius: 11px; background: #0B0B0B; }
.ph-status i { display: flex; gap: 5px; align-items: center; }
.ph-status i::before { content: ""; width: 16px; height: 9px; background: linear-gradient(90deg, var(--ink) 0 22%, transparent 22% 26%, var(--ink) 26% 48%, transparent 48% 52%, var(--ink) 52% 74%, transparent 74% 78%, var(--ink) 78%); clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.ph-status i::after { content: ""; width: 20px; height: 9px; border: 1.5px solid var(--ink); border-radius: 3px; box-shadow: inset 0 0 0 1.5px var(--bg), inset 12px 0 0 var(--ink); }
.phone-screen iframe { position: absolute; left: 0; top: 34px; width: 390px; height: calc((100% - 34px) / var(--s)); border: 0; transform: scale(var(--s)); transform-origin: 0 0; pointer-events: none; background: var(--bg); opacity: 0; transition: opacity 0.5s; }
.ph-stage.ready .phone-screen iframe { opacity: 1; }
.ph-still { height: 100%; display: flex; flex-direction: column; padding-top: 34px; }
.ph-bar { display: flex; align-items: center; gap: 8px; background: var(--inv); color: var(--inv-ink); padding: 12px 16px; font-family: var(--head); font-size: 14px; }
.ph-bar span { margin-left: auto; font-family: var(--body); font-size: 12px; opacity: 0.75; }
.ph-hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 22px 16px; gap: 6px; }
.ph-hero i { font-family: var(--serif); font-size: 13px; color: var(--muted); }
.ph-hero strong { font-family: var(--serif); font-weight: 700; font-size: 26px; line-height: 1.1; }
.ph-arch { width: 70%; aspect-ratio: 4 / 5; margin-top: 10px; border-radius: 999px 999px 0 0; background: radial-gradient(120% 90% at 50% 20%, #5B5248 0%, #2B2622 70%); }

/* what is on the page, lit as the phone shows it */
.ph-parts { display: grid; gap: 2px; counter-reset: pp; position: relative; }
.ph-parts::before { content: ""; position: absolute; left: 7px; top: 14px; bottom: 14px; width: 1px; background: var(--line); }
.ph-parts li { position: relative; }
.ph-parts a { display: grid; gap: 1px; padding: 8px 0 8px 30px; text-decoration: none; color: var(--muted); transition: color 0.25s; }
.ph-parts a::before { content: ""; position: absolute; left: 3px; top: 15px; width: 9px; height: 9px; border-radius: 50%; background: var(--bg); border: 1.5px solid #B9B9B4; transition: background 0.25s, border-color 0.25s, transform 0.25s; }
.ph-parts b { font-family: var(--body); font-weight: 700; font-size: 15.5px; color: var(--ink-2); transition: color 0.25s; }
.ph-parts span { font-size: 13.5px; line-height: 1.4; }
.ph-parts li.on a::before { background: var(--ink); border-color: var(--ink); transform: scale(1.25); }
.ph-parts li.on b { color: var(--ink); }
.ph-parts li.on span { color: var(--ink-2); }
.ph-parts a:hover b { text-decoration: underline; text-underline-offset: 4px; }
.ph-now { display: none; }
@media (max-width: 1199px) { .ph-stage { grid-template-columns: 270px minmax(0, 1fr); gap: 28px; } .ph-parts span { display: none; } }
@media (max-width: 959px) {
  .ph-stage, .ph-stage:not(.with-parts) { grid-template-columns: minmax(0, 300px); justify-content: center; }
  .ph-parts { display: none; }
  .ph-now { display: block; text-align: center; font-size: 14px; color: var(--muted); margin-top: 4px; }
  .ph-now b { color: var(--ink); font-weight: 700; }
}
@media (max-width: 399px) { .ph-stage, .ph-stage:not(.with-parts) { grid-template-columns: minmax(0, 270px); } }
@media (prefers-reduced-motion: no-preference) {
  .fam-vis .phone { animation: phoneIn 0.8s 0.15s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
}
@keyframes phoneIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }

/* ---------- features: cards in a grid ---------- */
.feat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; margin-top: 44px; border-bottom: 1px solid var(--line); }
.feat li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 18px; align-items: start; padding: 26px 0; border-top: 1px solid var(--line); }
.feat svg { width: 30px; height: 30px; color: var(--ink); margin-top: 1px; }
.feat p { margin-top: 6px; color: var(--ink-2); }
.feat.cards { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 32px; border-bottom: 0; }
.feat.cards li { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 14px; padding: 24px 0 30px; border-top: 1px solid var(--ink); }
.feat.cards svg { width: 34px; height: 34px; }
@media (max-width: 1079px) { .feat.cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 759px) {
  .feat, .feat.cards { grid-template-columns: minmax(0, 1fr); margin-top: 28px; }
  .feat li { padding: 20px 0; }
  .feat.cards li { grid-template-columns: 34px minmax(0, 1fr); gap: 16px; padding: 22px 0; }
}

/* ---------- candles: the dark band ---------- */
.hs-candles, .hs-b2b { position: relative; overflow: hidden; background: radial-gradient(90% 120% at 78% 70%, #2A2016 0%, #110E0B 52%, #070605 100%); color: var(--stage-ink); }
.candles-grid, .b2b-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 48px; align-items: center; }
.hs-candles .hs-h, .hs-b2b .hs-h { color: var(--stage-ink); }
.hs-candles p, .hs-b2b p { margin-top: 18px; font-size: 17.5px; color: #D9D1C5; max-width: 50ch; }
.faiths { margin-top: 30px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; max-width: 40rem; }
.faiths li { border-top: 1px solid var(--stage-line); padding-top: 12px; }
.faiths b { display: block; font-family: var(--head); font-weight: 600; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: #FFC983; }
.faiths span { display: block; margin-top: 6px; font-size: 15px; line-height: 1.5; color: #D9D1C5; }
.hc-candles { position: relative; height: 320px; }
.hc-candles::after { content: ""; position: absolute; left: 0; right: 0; bottom: -18px; height: 30px; background: linear-gradient(180deg, #2B231A 0%, #18130F 55%, #0B0907 100%); clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%); }
.hc-candles i { position: absolute; bottom: 0; left: var(--x); width: 9px; height: calc(var(--h) * 1px); margin-left: -4.5px; background: linear-gradient(90deg, #7C551E, #D4A653 30%, #F2D490 48%, #DDB062 64%, #74501C); z-index: 1; }
.hc-candles i::before { content: ""; position: absolute; left: 50%; bottom: calc(100% + 3px); width: 13px; height: 29px; margin-left: -6.5px; border-radius: 50% 50% 50% 50% / 64% 64% 36% 36%; background: radial-gradient(ellipse 48% 58% at 50% 74%, #FFFEF4 0 18%, #FFE29A 34%, #FFAA44 62%, rgba(255, 120, 30, 0) 78%); transform-origin: 50% 92%; animation: flick var(--d, 0.8s) ease-in-out infinite alternate; }
.hc-candles i::after { content: ""; position: absolute; left: 50%; bottom: 100%; width: 110px; height: 110px; margin: 0 0 -40px -55px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 178, 80, 0.3) 0, rgba(255, 150, 50, 0.1) 40%, rgba(255, 140, 40, 0) 68%); animation: breathe calc(var(--d, 0.8s) * 3.6) ease-in-out infinite; pointer-events: none; }
.hc-name { position: absolute; left: var(--x); top: var(--y); transform: translateX(-50%); padding: 5px 11px; font-size: 13px; color: var(--stage-ink); background: rgba(20, 16, 12, 0.72); border: 1px solid #3A3127; white-space: nowrap; opacity: 0; animation: nameIn 18s var(--t) infinite; }
@keyframes nameIn { 0% { opacity: 0; transform: translate(-50%, 8px); } 4% { opacity: 1; transform: translate(-50%, 0); } 14% { opacity: 1; transform: translate(-50%, -6px); } 18%, 100% { opacity: 0; transform: translate(-50%, -12px); } }
@media (max-width: 759px) {
  .candles-grid, .b2b-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .faiths { grid-template-columns: minmax(0, 1fr); }
  .hc-candles { height: 190px; }
  .hc-candles i { height: calc(var(--h) * 0.6px); }
  .hc-name { font-size: 12px; }
}

/* ---------- how it works: a real sequence, so numbered ---------- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 48px; counter-reset: st; }
.steps.four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.steps li { counter-increment: st; border-top: 1px solid var(--ink); padding-top: 16px; }
.steps li::before { content: counter(st); display: block; font-family: var(--serif); font-weight: 700; font-size: 58px; line-height: 1; margin-bottom: 18px; font-variant-numeric: lining-nums; }
.steps p { margin-top: 8px; color: var(--ink-2); }
.steps-note { margin-top: 40px; font-size: 16px; color: var(--ink-2); }
.steps-note a { color: var(--ink); font-weight: 700; }
@media (max-width: 959px) { .steps.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 759px) {
  .steps, .steps.four { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 32px; }
  .steps li { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 14px; }
  .steps li::before { grid-row: span 2; font-size: 44px; margin: 0; }
  .steps p { grid-column: 2; }
}

/* ---------- the book of memories ---------- */
.book-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: center; }
.book-vis { margin: 0; }
.book-vis img { width: 100%; height: auto; display: block; border: 1px solid var(--line); }
.book-vis picture, .pile-i picture { display: block; }
.book-copy > p:not(.soon) { margin-top: 18px; font-size: 17.5px; color: var(--ink-2); max-width: 46ch; }
.book-copy > p.book-how { margin-top: 22px; font-size: 15px; color: var(--muted); }
@media (max-width: 959px) { .book-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; } .book-copy { order: -1; } }

.ticks { margin-top: 26px; display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: 30px; color: var(--stage-ink); }
.ticks li::before { content: ""; position: absolute; left: 3px; top: 0.42em; width: 11px; height: 6px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); }
.hs-b2b .ticks li::before { border-color: #FFC983; }
.ticks.dark li { color: var(--ink-2); }
.ticks.dark li::before { border-color: var(--ink); }

/* ---------- the example page ---------- */
.demo-band { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; }
.demo-band p { margin-top: 18px; font-size: 17.5px; color: var(--ink-2); max-width: 44ch; }
.demo-parts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; border-top: 1px solid var(--line); }
.demo-parts li { border-bottom: 1px solid var(--line); }
.demo-parts a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 0; text-decoration: none; color: var(--ink); font-size: 15.5px; }
.demo-parts a::after { content: ""; flex: none; width: 7px; height: 7px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); opacity: 0.55; }
.demo-parts a:hover { text-decoration: underline; text-underline-offset: 5px; }
.demo-parts a:hover::after { opacity: 1; }
@media (max-width: 859px) { .demo-band { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
@media (max-width: 459px) { .demo-parts { grid-template-columns: minmax(0, 1fr); } }

/* ---------- sample posmrtnice ---------- */
.hp-paper { position: relative; margin: 0; background: var(--bg); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06), 0 22px 44px -18px rgba(20, 16, 10, 0.34); }
.hp-paper canvas { display: block; width: 100%; height: auto; aspect-ratio: 1414 / 1000; }
.hs .um-h { font-family: var(--serif); font-weight: 700; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.2; letter-spacing: -0.01em; }
.hs-sub.left { margin-top: 10px; }
.um-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; margin-top: 36px; }
.um-i { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.um-i .hp-paper { cursor: zoom-in; transition: box-shadow 0.2s; }
.um-i .hp-paper:hover { box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06), 0 28px 50px -18px rgba(20, 16, 10, 0.42); }
.um-i > span { font-size: 14.5px; color: var(--ink-2); }
.own { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; margin-top: 72px; padding-top: 56px; border-top: 1px solid var(--ink); }
.own-copy > p:not(.soon) { margin-top: 14px; color: var(--ink-2); max-width: 46ch; }
@media (max-width: 859px) { .own { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 48px; padding-top: 40px; } }
@media (max-width: 759px) {
  .um-row { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -16px; padding: 4px 16px 24px; scrollbar-width: none; }
  .um-row::-webkit-scrollbar { display: none; }
  .um-row .um-i { flex: 0 0 86%; scroll-snap-align: center; }
}

/* ---------- questions ---------- */
.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.faq-head { position: sticky; top: 96px; }
.faq-head .hs-sub a { color: var(--ink); }
.faq { border-bottom: 1px solid var(--line); }
@media (max-width: 859px) { .faq-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; } .faq-head { position: static; } }
.faq-i { border-top: 1px solid var(--line); }
.faq-i summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; cursor: pointer; font-weight: 700; font-size: 17.5px; line-height: 1.4; }
.faq-i summary::-webkit-details-marker { display: none; }
.faq-i summary:hover span { text-decoration: underline; text-underline-offset: 5px; }
.faq-i summary i { position: relative; flex: none; width: 16px; height: 16px; }
.faq-i summary i::before, .faq-i summary i::after { content: ""; position: absolute; left: 0; right: 0; top: 7.25px; height: 1.5px; background: var(--ink); transition: transform 0.2s; }
.faq-i summary i::after { transform: rotate(90deg); }
.faq-i[open] summary i::after { transform: rotate(0deg); }
.faq-i p { padding: 0 40px 22px 0; color: var(--ink-2); max-width: 62ch; }

/* ---------- inquiry ---------- */
.ask-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: start; }
.ask-copy p { margin-top: 18px; font-size: 17.5px; color: var(--ink-2); max-width: 42ch; }
.ask-box { background: var(--bg); border: 1px solid var(--frame); padding: 28px; }
.ask-direct { display: flex; flex-direction: column; gap: 4px; margin-top: 32px !important; }
.ask-direct span { font-size: 14px; color: var(--muted); }
.ask-direct a { font-family: var(--serif); font-weight: 700; font-size: clamp(20px, 2vw, 24px); color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.ask-direct a:hover { text-decoration: underline; text-underline-offset: 5px; }
.next { margin-top: 28px; display: grid; gap: 14px; counter-reset: nx; max-width: 40ch; }
.next li { counter-increment: nx; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; color: var(--ink-2); }
.next li::before { content: counter(nx); font-family: var(--serif); font-weight: 700; font-size: 20px; line-height: 1.3; color: var(--ink); }
.hq-form { display: grid; gap: 16px; }
.hq-form .note a { color: var(--ink); }
.hq-done { display: grid; gap: 10px; padding: 8px 0; }
.hq-done b { font-family: var(--serif); font-size: 24px; line-height: 1.25; }
.hq-done p { color: var(--ink-2); }
@media (max-width: 859px) { .ask-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; } .ask-box { padding: 20px 16px; } }

/* ---------- footer ---------- */
.hf { background: var(--inv); color: var(--inv-ink); padding: 64px 0 28px; }
.hf-in { max-width: 74rem; margin-inline: auto; padding-inline: 24px; display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.hf .brand { padding: 0; min-height: 0; }
.hf-brand p { margin-top: 18px; color: #B9B9B4; font-size: 14.5px; max-width: 38ch; }
.hf-col { display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; }
.hf-col b { font-family: var(--head); font-weight: 600; font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: #8F8F8A; margin-bottom: 4px; }
.hf a { color: var(--inv-ink); text-decoration: none; }
.hf a:hover { text-decoration: underline; text-underline-offset: 5px; }
.hf-col a { overflow-wrap: anywhere; }
.hf-bottom { max-width: calc(74rem - 48px); margin: 48px auto 0; padding-top: 20px; border-top: 1px solid #2A2A28; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; font-size: 13px; color: #8F8F8A; }
.hf-bottom span:last-child { display: flex; gap: 20px; }
.hf :focus-visible { outline-color: var(--inv-ink); }
@media (max-width: 859px) { .hf-in { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hf-brand { grid-column: 1 / -1; } }
@media (max-width: 1231px) { .hf-bottom { margin-inline: 24px; } }
@media (max-width: 599px) { .hf-in { padding-inline: 16px; } .hf-bottom { margin-inline: 16px; } }
@media (max-width: 459px) { .hf-in { gap: 28px 20px; } .hf-col:last-child { grid-column: 1 / -1; } }

/* ---------- the page for funeral companies ---------- */
.kicker { display: inline-block; font-size: 14px; color: var(--ink-2); border: 1px solid var(--frame); padding: 4px 12px; margin-bottom: 22px; background: var(--bg); }
.kicker.dark { color: #E9DFD0; border-color: #4A3F33; background: transparent; }
.b2b-hero { background: var(--bg); }
.b2b-vis { padding-bottom: 0; }
.choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 30px; max-width: 40rem; }
.choice-i { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px 44px 18px 18px; border: 1px solid var(--frame); background: var(--bg); text-decoration: none; color: var(--ink); transition: background 0.15s, color 0.15s; }
.choice-i:first-child { background: var(--inv); color: var(--inv-ink); }
.choice-i::after { content: ""; position: absolute; right: 18px; top: 24px; width: 9px; height: 9px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); }
.choice-k { font-family: var(--head); font-weight: 600; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.7; }
.choice-i b { font-family: var(--serif); font-size: 20px; line-height: 1.25; }
.choice-i > span:last-child { font-size: 14.5px; line-height: 1.5; opacity: 0.85; }
.choice-i:hover { background: #262624; color: var(--inv-ink); }
.choice-i:not(:first-child):hover { background: var(--ink); }
@media (max-width: 599px) { .choice { grid-template-columns: minmax(0, 1fr); } }
.mock { background: var(--bg); border: 1px solid var(--frame); box-shadow: 0 26px 50px -24px rgba(20, 16, 10, 0.35); }
.mock-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--line); background: var(--band); }
.mock-bar span { width: 9px; height: 9px; border-radius: 50%; background: #D3D3CF; }
.mock-bar b { margin-left: 10px; font-weight: 400; font-size: 12.5px; color: var(--muted); }
.mock-body { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.25fr); gap: 18px; padding: 18px; align-items: center; }
.mock-form { display: grid; gap: 5px; font-size: 11.5px; }
.mf-h { font-family: var(--head); font-weight: 700; font-size: 13px; margin-bottom: 4px; }
.mf-l { font-weight: 700; color: var(--ink-2); margin-top: 4px; }
.mf-in { border: 1px solid var(--line); padding: 6px 8px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mf-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--frame); }
.mf-seg > * { padding: 5px 2px; text-align: center; font-size: 10.5px; border-left: 1px solid var(--line); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mf-seg > :first-child { border-left: 0; background: var(--inv); color: var(--inv-ink); }
.mf-btn { margin-top: 8px; background: var(--inv); color: var(--inv-ink); text-align: center; padding: 8px; font-family: var(--head); font-weight: 600; font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; }
.hp-paper.in-mock { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 10px 22px -10px rgba(0, 0, 0, 0.3); }
@media (max-width: 599px) { .mock-body { grid-template-columns: minmax(0, 1fr); } .mock-form { display: none; } }

/* who does what */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 40px; border: 1px solid var(--frame); }
.split-i { padding: 32px; background: var(--bg); }
.split-i.dark { background: var(--inv); color: var(--inv-ink); }
.split-k { font-family: var(--serif); font-weight: 700; font-size: 34px; line-height: 1; }
.split-list { margin-top: 22px; display: grid; gap: 12px; counter-reset: sl; }
.split-list li { position: relative; padding-left: 34px; font-size: 16.5px; line-height: 1.5; }
ol.split-list li { counter-increment: sl; }
ol.split-list li::before { content: counter(sl); position: absolute; left: 0; top: 0; font-family: var(--serif); font-weight: 700; }
ul.split-list li::before { content: ""; position: absolute; left: 4px; top: 0.45em; width: 11px; height: 6px; border-left: 1.5px solid #FFC983; border-bottom: 1.5px solid #FFC983; transform: rotate(-45deg); }
@media (max-width: 759px) { .split { grid-template-columns: minmax(0, 1fr); } .split-i { padding: 24px 18px; } }

/* calculator */
.calc-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: start; }
.calc-grid > div > p { margin-top: 18px; font-size: 17.5px; color: var(--ink-2); max-width: 40ch; }
.calc { background: var(--bg); border: 1px solid var(--frame); padding: 28px; display: grid; gap: 22px; }
.calc-r { display: grid; gap: 10px; font-weight: 700; font-size: 15px; }
.calc-r > span:first-child { display: flex; justify-content: space-between; gap: 12px; }
.calc-r b { font-family: var(--serif); font-size: 20px; font-variant-numeric: tabular-nums; }
.calc input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; padding: 0; border: 0; min-height: 0; }
.calc input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: var(--ink); }
.calc input[type="range"]::-moz-range-track { height: 2px; background: var(--ink); }
.calc input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -10px; border-radius: 50%; background: var(--ink); border: 3px solid var(--bg); box-shadow: 0 0 0 1px var(--ink); }
.calc input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--ink); border: 3px solid var(--bg); box-shadow: 0 0 0 1px var(--ink); }
.calc input[type="range"]:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.calc-money { display: grid; grid-template-columns: minmax(0, 1fr) 96px; }
.calc-money input { border-right: 0; }
.calc-out { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); padding-top: 18px; gap: 12px; }
.calc-out span { display: block; font-size: 13.5px; color: var(--muted); }
.calc-out b { display: block; font-family: var(--serif); font-weight: 700; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.2; margin-top: 4px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
@media (max-width: 859px) { .calc-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; } .calc { padding: 20px 16px; } }
@media (max-width: 459px) { .calc-out { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .calc-out div:first-child { grid-column: 1 / -1; } }

/* the gate: what they get, and the code */
.gate { position: relative; overflow: hidden; padding: 72px 0 0; background: radial-gradient(80% 120% at 85% 90%, #2A2016 0%, #110E0B 50%, #070605 100%); color: var(--stage-ink); }
.gate-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: start; padding-bottom: 40px; }
.gate h1 { font-family: var(--serif); font-weight: 700; font-size: clamp(38px, 4.6vw, 62px); line-height: 1.04; letter-spacing: -0.02em; text-wrap: balance; color: var(--stage-ink); }
.gate .lead { margin-top: 24px; font-size: 18.5px; line-height: 1.65; color: #D9D1C5; max-width: 46ch; }
.gate-points { margin-top: 34px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 28px; max-width: 44rem; }
.gate-points li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; border-top: 1px solid var(--stage-line); padding-top: 14px; }
.gate-points svg { width: 28px; height: 28px; color: #FFC983; }
.gate-points b { display: block; font-size: 16.5px; color: var(--stage-ink); }
.gate-points span { display: block; margin-top: 4px; font-size: 14.5px; line-height: 1.5; color: #BFB6A9; }
.gate-card { background: var(--bg); color: var(--ink); border: 1px solid var(--frame); padding: 30px; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.8); }
.gate-card h2 { font-family: var(--serif); font-weight: 700; font-size: 30px; line-height: 1.15; }
.gate-card > p { margin-top: 10px; color: var(--ink-2); font-size: 15.5px; }
.gate-card .notice { margin-top: 14px; }
.gate-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; margin-top: 18px; }
.gate-form input { min-height: 52px; font-size: 17px; letter-spacing: 0.04em; border-right: 0; }
.gate-form .btn { min-height: 52px; }
.gate-or { display: flex; align-items: center; gap: 12px; margin: 26px 0 4px; font-size: 13px; color: var(--muted); }
.gate-or::before, .gate-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.gate-card .actions { margin-top: 14px; }
.gate .hc-candles { position: relative; z-index: 1; height: 160px; margin: 0 24px; }
@media (max-width: 959px) { .gate-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; } }
@media (max-width: 599px) { .gate { padding-top: 44px; } .gate-points { grid-template-columns: minmax(0, 1fr); } .gate-card { padding: 22px 16px; } .gate .hc-candles { height: 110px; } }

/* ---------- legal pages ---------- */
.legal { padding-top: 64px; }
/* a page that does not exist (0.15.2) */
.nf { padding-bottom: 96px; }
.nf-lead { margin-top: 18px; max-width: 56ch; font-size: 18px; color: var(--ink-2); }
.nf .actions { margin-top: 28px; }
.legal-text { margin-top: 28px; }
.legal-text h2 { font-family: var(--serif); font-weight: 700; font-size: 23px; line-height: 1.3; margin: 36px 0 10px; }
.legal-text p, .legal-text li { color: var(--ink-2); max-width: 66ch; }
.legal-text p + p { margin-top: 12px; }
.legal-text ul { margin: 12px 0; padding-left: 20px; list-style: disc; display: grid; gap: 8px; }
.legal-text a { color: var(--ink); }
.legal-date { margin-top: 36px !important; font-size: 14px; color: var(--muted) !important; }

/* a big posmrtnica in the sheet */
.sheet.wide { max-width: 64rem; }
.sheet .big-um { width: 100%; height: auto; aspect-ratio: 1414 / 1000; box-shadow: 0 0 0 1px var(--line); }

@media (prefers-reduced-motion: reduce) {
  .hc-candles i::before, .hc-candles i::after { animation: none; }
  .hc-name { animation: none; opacity: 0; }
  .hh-menu::after, .faq-i summary i::before, .faq-i summary i::after, .ph-parts a::before { transition: none; }
}

/* ---------- price and ordering ---------- */
.anchor-alias { display: block; height: 0; }
.order-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; align-items: start; }
.order-copy .hs-sub { max-width: 46ch; }
.ways { margin-top: 34px; border-top: 1px solid var(--ink); counter-reset: w; max-width: 40rem; }
.ways li { counter-increment: w; display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 4px 12px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.ways li::before { content: counter(w); grid-row: span 2; font-family: var(--serif); font-weight: 700; font-size: 32px; line-height: 1; font-variant-numeric: lining-nums; }
.ways b { font-size: 18px; font-weight: 800; line-height: 1.35; }
.ways span { color: var(--ink-2); }
.order-call { margin-top: 26px; color: var(--ink-2); font-size: 16px; }
.order-call a { color: var(--ink); font-weight: 700; white-space: nowrap; }
.price-card { background: var(--bg); border: 1px solid var(--frame); padding: 32px 32px 26px; box-shadow: 0 34px 64px -38px rgba(20, 16, 10, 0.45); }
.price-k { font-family: var(--head); font-weight: 600; font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.hs .price-name { margin-top: 10px; font-family: var(--serif); font-weight: 700; font-size: 26px; line-height: 1.2; letter-spacing: -0.01em; }
.price-big { margin-top: 12px; font-family: var(--serif); font-weight: 700; font-size: clamp(48px, 5vw, 64px); line-height: 1; letter-spacing: -0.025em; font-variant-numeric: lining-nums; }
.price-other { margin-top: 10px; font-size: 15px; color: var(--ink-2); }
.price-once { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 15.5px; font-weight: 700; line-height: 1.5; }
.price-card .ticks { margin-top: 18px; gap: 10px; font-size: 15.5px; }
.price-card .btn { margin-top: 26px; }
.price-fine { margin-top: 14px; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.hs .steps-h { margin-top: 72px; font-family: var(--head); font-weight: 600; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.hs-order .steps { margin-top: 20px; }
.order-sum { font-size: 15px; color: var(--ink-2); }
.order-sum b { color: var(--ink); }
@media (max-width: 959px) { .order-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; } .hs .steps-h { margin-top: 48px; } }
@media (max-width: 599px) { .price-card { padding: 24px 18px 20px; } .ways li { grid-template-columns: 36px minmax(0, 1fr); } .ways li::before { font-size: 26px; } }

/* ---------- memories: a pile of old family photos, on the homepage and on /uspomene ---------- */
.pile { position: relative; width: 100%; max-width: 540px; aspect-ratio: 1 / 1.1; margin-inline: auto; }
.pile.big { max-width: 600px; }
.pile-i { position: absolute; margin: 0; padding: 2.4% 2.4% 0; background: #FFFDF8; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08), 0 22px 44px -20px rgba(20, 16, 10, 0.55); }
.pile-i img { display: block; width: 100%; height: auto; }
.pile-i figcaption { padding: 0.55em 0 0.65em; text-align: center; font-family: "Marck Script", var(--serif); font-size: clamp(14px, 1.7vw, 20px); line-height: 1.1; color: #4A4235; }
.pile .p1 { width: 42%; left: 0; top: 4%; transform: rotate(-6deg); z-index: 1; }
.pile .p2 { width: 54%; right: 0; top: 0; transform: rotate(3.5deg); z-index: 2; }
.pile .p3 { width: 37%; left: 37%; top: 48%; transform: rotate(-2deg); z-index: 3; }
.memo-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: center; }
.memo-copy > p:not(.kicker) { margin-top: 18px; font-size: 17.5px; color: var(--ink-2); max-width: 46ch; }
.memo-copy .actions { margin-top: 30px; }
.scatter-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; margin-bottom: 24px; }
.memo-hero .kicker { margin-bottom: 20px; }
@media (max-width: 959px) {
  .memo-grid, .scatter-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .memo-copy { order: -1; }
  .pile { max-width: 440px; }
}

/* ---------- homepage: a recent loss, the two examples, the band for funeral companies ---------- */
.loss-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; align-items: center; }
.loss-copy > p:not(.loss-note) { margin-top: 18px; font-size: 17.5px; color: var(--ink-2); max-width: 48ch; }
.loss-copy .actions { margin-top: 30px; }
.loss-note { margin-top: 22px; font-size: 14.5px; color: var(--muted); max-width: 46ch; }
/* a slice of the real page: the name, the funeral, one greeting */
.loss-card { display: grid; gap: 22px; max-width: 30rem; width: 100%; margin-inline: auto; padding: 32px 28px 28px; background: var(--bg); border: 1px solid var(--frame); box-shadow: 0 34px 64px -38px rgba(20, 16, 10, 0.45); }
.lc-name { text-align: center; font-family: var(--serif); font-weight: 700; font-size: clamp(26px, 2.8vw, 32px); line-height: 1.15; text-wrap: balance; }
.lc-name span { display: block; margin-top: 6px; font-family: var(--body); font-weight: 400; font-size: 15px; color: var(--muted); font-variant-numeric: lining-nums; }
.lc-box { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 14px 20px; margin: 6px; text-align: center; border: 4px double var(--ink); outline: 1px solid var(--ink); outline-offset: 5px; }
.lc-k { font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--muted); }
.lc-when { font-family: var(--serif); font-weight: 700; font-size: clamp(21px, 2.3vw, 25px); line-height: 1.25; }
.lc-when span { display: block; margin-top: 2px; font-weight: 400; font-size: 0.8em; }
.lc-where { font-size: 15.5px; color: var(--ink-2); }
.lc-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.lc-acts span { padding: 9px 13px; border: 1px solid var(--frame); font-family: var(--head); font-weight: 600; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; }
.lc-acts span:first-child { background: var(--inv); color: var(--inv-ink); }
.lc-msg { padding-top: 18px; border-top: 1px solid var(--line); }
.lc-msg b { font-size: 15.5px; }
.lc-msg span { margin-left: 8px; font-size: 13.5px; color: var(--muted); }
.lc-msg p { margin-top: 6px; font-family: var(--serif); font-style: italic; font-size: 16.5px; line-height: 1.55; color: var(--ink-2); }
@media (max-width: 959px) { .loss-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; } }
@media (max-width: 459px) { .loss-card { padding: 26px 16px 22px; } .lc-acts span { padding: 8px 10px; } }

.ex-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 40px; }
.ex-i { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); min-height: 260px; background: var(--bg); border: 1px solid var(--frame); color: var(--ink); text-decoration: none; transition: box-shadow 0.2s; }
.ex-i:hover { box-shadow: 0 30px 56px -30px rgba(20, 16, 10, 0.45); }
.ex-ph { position: relative; overflow: hidden; background: radial-gradient(120% 90% at 50% 20%, #5B5248 0%, #2B2622 70%); }
.ex-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; filter: grayscale(1); transition: filter 0.3s; }
.ex-i:hover .ex-ph img { filter: none; }
.ex-t { display: flex; flex-direction: column; gap: 8px; padding: 26px 24px 24px; border-left: 1px solid var(--frame); }
.ex-k { font-family: var(--head); font-weight: 600; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.ex-t b { font-family: var(--serif); font-weight: 700; font-size: clamp(21px, 2.1vw, 26px); line-height: 1.2; }
.ex-t > span:not(.ex-k):not(.ex-go) { font-size: 15.5px; color: var(--ink-2); }
.ex-go { display: inline-flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 14px; font-family: var(--head); font-weight: 600; font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; }
.ex-go::after { content: ""; width: 7px; height: 7px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); }
.ex-i:hover .ex-go { text-decoration: underline; text-underline-offset: 5px; }
@media (max-width: 959px) { .ex-row { grid-template-columns: minmax(0, 1fr); gap: 20px; } }
@media (max-width: 499px) { .ex-i { grid-template-columns: minmax(0, 1fr); min-height: 0; } .ex-ph { aspect-ratio: 16 / 10; } .ex-t { border-left: 0; border-top: 1px solid var(--frame); padding: 20px 18px; } }

.hs-pro { padding-block: 72px; }
.pro-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 56px; align-items: end; }
.hs-pro .hs-h { max-width: 24ch; }
.hs-pro p:not(.kicker) { max-width: 56ch; }
.hs-pro .actions { margin-top: 0; }
@media (max-width: 759px) { .hs-pro { padding-block: 56px; } .pro-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- page for funeral companies: the Viber message, what relatives see, how to offer it ---------- */
.chat { max-width: 360px; margin-inline: auto; padding: 10px; background: #0B0B0B; border-radius: 42px; box-shadow: 0 0 0 1px #2B2B29 inset, 0 0 0 2px #1A1A19, 0 40px 70px -28px rgba(0, 0, 0, 0.55), 0 10px 22px -10px rgba(0, 0, 0, 0.35); }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 30px 18px 14px; background: var(--bg); border-radius: 32px 32px 0 0; border-bottom: 1px solid var(--line); }
.chat-av { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--inv); color: var(--inv-ink); font-family: var(--head); font-weight: 600; font-size: 12.5px; letter-spacing: 0.06em; }
.chat-head b { display: block; font-size: 15px; line-height: 1.3; }
.chat-head small { display: block; font-size: 12.5px; color: var(--muted); }
.chat-body { display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; min-height: 420px; padding: 18px 12px 22px; background: var(--band-2); border-radius: 0 0 32px 32px; }
.bub { align-self: flex-start; max-width: 88%; padding: 10px 13px; background: var(--bg); border-radius: 16px 16px 16px 4px; font-size: 14.5px; line-height: 1.45; color: var(--ink); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08); }
.bub.out { align-self: flex-end; background: var(--inv); color: var(--inv-ink); border-radius: 16px 16px 4px 16px; }
.bub.card { display: block; width: 88%; padding: 0; overflow: hidden; }
.card-ph { display: block; aspect-ratio: 16 / 10; background: radial-gradient(120% 90% at 50% 20%, #5B5248 0%, #2B2622 70%); }
.card-ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.card-t { display: grid; gap: 3px; padding: 10px 13px 12px; }
.card-t b { font-size: 14.5px; line-height: 1.35; }
.card-t span { font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.card-t i { font-style: normal; font-size: 12px; color: var(--muted); }
@media (max-width: 399px) { .chat { border-radius: 36px; } .chat-head { border-radius: 26px 26px 0 0; } .chat-body { border-radius: 0 0 26px 26px; min-height: 360px; } }

.gets-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.gets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--frame); }
.gets-i { padding: 28px; background: var(--bg); }
.gets-i + .gets-i { border-left: 1px solid var(--line); }
.gets-i.dark { grid-column: 1 / -1; border-left: 0; background: var(--inv); color: var(--inv-ink); }
.gets-i .ticks { margin-top: 16px; gap: 10px; font-size: 16px; }
.gets-i.dark p { margin-top: 10px; font-size: 16.5px; color: #CFCFCB; max-width: 58ch; }
@media (max-width: 959px) { .gets-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
@media (max-width: 599px) { .gets { grid-template-columns: minmax(0, 1fr); } .gets-i { padding: 22px 18px; } .gets-i + .gets-i { border-left: 0; border-top: 1px solid var(--line); } }

.offer-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; }
.offer-say { margin: 0; padding: 34px 32px 30px; background: var(--bg); border: 1px solid var(--frame); box-shadow: 0 34px 64px -38px rgba(20, 16, 10, 0.45); }
.offer-say p { font-family: var(--serif); font-size: clamp(19px, 1.9vw, 22px); line-height: 1.55; }
.offer-say footer { margin-top: 16px; font-size: 14px; color: var(--muted); }
.offer-say .btn { margin-top: 22px; }
@media (max-width: 859px) { .offer-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
@media (max-width: 599px) { .offer-say { padding: 24px 18px 22px; } }

/* ---------- paying: the choice in the order form, the marks the bank asks for, the result page ---------- */
.pay-pick { gap: 10px !important; }
.pay-opt { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px 16px; border: 1px solid var(--line); background: var(--bg); cursor: pointer; }
.pay-opt:has(input:checked) { border-color: var(--frame); box-shadow: inset 0 0 0 1px var(--frame); }
.pay-opt input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--ink); }
.pay-opt b { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 15px; }
.pay-opt small { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.pay-opt.is-soon { cursor: default; background: var(--band); }
.pay-opt.is-soon b { color: var(--ink-2); }
.pay-opt .paymarks { margin-top: 12px; }
.soon-tag { font-style: normal; font-family: var(--head); font-weight: 600; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; padding: 2px 8px; border: 1px solid currentColor; }
.check.terms { border-bottom: 0; padding: 2px 0; }
.check.terms span { display: block; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.check.terms a { color: var(--ink); }

.paymarks { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pm { display: inline-flex; align-items: center; justify-content: center; height: 34px; min-width: 56px; padding: 0 10px; background: #FFFFFF; color: #1A1A18; border-radius: 4px; font-family: var(--head); font-weight: 700; font-size: 11.5px; letter-spacing: 0.01em; white-space: nowrap; text-decoration: none !important; }
.pm.has-img { padding: 4px 8px; }
.pm img { height: 24px; width: auto; max-width: 112px; object-fit: contain; }
/* the dark footer colors its links white; the marks keep dark letters on their white tiles */
.paymarks .pm { color: #1A1A18; }
a.pm:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.paymarks.on-light .pm { border: 1px solid var(--line); }
.paymarks.small { gap: 6px; }
.paymarks.small .pm { height: 28px; min-width: 46px; padding: 0 8px; font-size: 10.5px; }
.paymarks.small .pm img { height: 18px; }

.hf-pay { max-width: calc(74rem - 48px); margin: 44px auto 0; padding-top: 22px; border-top: 1px solid #2A2A28; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; }
.hf-pay p { font-size: 13px; line-height: 1.5; color: #8F8F8A; max-width: 46ch; }
.hf-pay + .hf-bottom { margin-top: 22px; }
.hf-col .hf-sub { margin-top: 14px; }
.hf-social { margin-top: 22px; }
.hf-social a { color: var(--inv-ink); border-color: #3A3A38; }
.hf-social a:hover { border-color: var(--inv-ink); text-decoration: none; }
@media (max-width: 1231px) { .hf-pay { margin-inline: 24px; } }
@media (max-width: 599px) { .hf-pay { margin-inline: 16px; } }

.ask-follow { display: flex; flex-direction: column; gap: 10px; margin-top: 26px; }
.ask-follow > span { font-size: 14px; color: var(--muted); }

.legal-more { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14.5px; }
.legal-more b { width: 100%; font-family: var(--head); font-weight: 600; font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.legal-more a { color: var(--ink); }
.legal-more span { color: var(--muted); }
.legal .paymarks { margin-top: 36px; }

.pay-res .hs-h { margin-top: 18px; }
.pay-sample { padding: 12px 16px; background: var(--warn-bg); color: var(--warn); font-size: 14px; line-height: 1.5; }
.pay-mark { width: 56px; height: 56px; margin-top: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--inv); color: var(--inv-ink); }
.pay-mark.ok { background: var(--ok); }
.pay-mark.fail { background: var(--err); }
.pay-mark svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pay-res .lead { margin-top: 14px; font-size: 17px; color: var(--ink-2); max-width: 60ch; }
.pay-dl { margin: 26px 0 0; border-top: 1px solid var(--line); }
.pay-dl div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.pay-dl dt { color: var(--muted); font-size: 14.5px; }
.pay-dl dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.pay-res h2 { margin-top: 34px; font-family: var(--serif); font-weight: 700; font-size: 23px; }
.pay-res .next { margin-top: 16px; max-width: none; }
.pay-res .actions { margin-top: 28px; }
.pay-res .note { margin-top: 14px; }
.pay-help { margin-top: 30px; font-size: 14.5px; color: var(--ink-2); }
.pay-help a { color: var(--ink); }
@media (max-width: 459px) { .pay-dl div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* the card that stands out on the page for funeral companies: the posmrtnica in their own look */
.feat.cards li.hl { background: var(--inv); color: var(--inv-ink); border-top-color: var(--inv); padding-inline: 22px; }
.feat.cards li.hl svg { color: #FFC983; }
.feat.cards li.hl p { color: #CFCFCB; }
.feat.cards li.hl .feat-k { margin: 0 0 8px; font-family: var(--head); font-weight: 600; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #FFC983; }
.feat-more { display: inline-block; margin-top: 14px; font-size: 14.5px; font-weight: 700; color: var(--inv-ink); text-underline-offset: 4px; }
.feat.cards li.hl :focus-visible { outline-color: var(--inv-ink); }
@media (max-width: 599px) { .feat.cards li.hl { padding-inline: 16px; } }

/* logos in color: a whole card badge stands on its own, a logo of the bank sits on a white tile */
.paymarks .pm.is-badge { height: 30px; min-width: 0; padding: 0; background: none; border: 0 !important; border-radius: 0; }
.paymarks .pm.is-badge img { height: 100%; width: auto; max-width: none; }
.paymarks.small .pm.is-badge { height: 26px; }
.pm.has-img img { height: 22px; }
.pm-bank.has-img img { height: 18px; }
.paymarks.small .pm.has-img img { height: 16px; }
.paymarks .pm-visa-secure.has-img { padding: 2px 6px; }
.paymarks .pm-visa-secure.has-img img { height: 28px; }
.paymarks.small .pm-visa-secure.has-img img { height: 23px; }
.pm-idcheck.has-img img { height: 20px; }
.paymarks.small .pm-idcheck.has-img img { height: 15px; }
.hf-pay .pm.is-badge { height: 32px; }
.pay-opt[hidden] { display: none; }
.btn.pay-paypal { background: #FFC439; border-color: #FFC439; color: #111111; }
.btn.pay-paypal:hover { background: #F2BA36; border-color: #F2BA36; }
.hq-done .btn.pay-paypal { margin-top: 4px; }

/* ---------- ordering in few steps (0.7.2): the block every button leads to, on /uspomene ----------
   On a computer: the product on the left (a phone where the real example scrolls by itself, its parts lighting
   up, then what happens after the order), the buy box on the right. On a phone: the buy box first, with a small
   phone next to the price in which the example page drifts by, then the steps. */
.hero-trust { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 6px 0; font-size: 14px; color: var(--muted); max-width: 46ch; }
.hero-trust li + li::before { content: "·"; margin: 0 10px; color: var(--muted); }
.hero-trust b { color: var(--ink); }
.ph-poster { position: absolute; left: 0; top: 34px; width: 100%; height: auto; pointer-events: none; }
.ph-poster[hidden], .ph-parts[hidden], [data-for-mode][hidden] { display: none !important; }
.phone-screen iframe { z-index: 1; }

.hs-buy { padding-block: 96px; }
.buy-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.buy-media { display: grid; gap: 26px; }
@media (min-width: 960px) and (min-height: 860px) { .buy-media { position: sticky; top: 96px; } }
.buy-stage { grid-template-columns: 250px minmax(0, 1fr); gap: 30px; justify-content: start; }
.buy-stage .ph-parts a { cursor: pointer; }
.buy-ex { font-size: 14.5px; font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.buy-ex::after { content: " ↗"; font-weight: 400; }
.buy-ex-d { justify-self: start; }
.buy-after { border-top: 1px solid var(--line); padding-top: 22px; }
.buy-after-h { font-family: var(--head); font-weight: 600; font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.buy-steps { margin-top: 14px; max-width: none; }

.buy-box { background: var(--bg); border: 1px solid var(--frame); padding: 32px 32px 26px; box-shadow: 0 34px 64px -38px rgba(20, 16, 10, 0.45); }
.buy-form { gap: 16px; }
.buy-top { padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.buy-mini { display: none; }
.hs .buy-name { font-family: var(--serif); font-weight: 700; font-size: clamp(30px, 3vw, 38px); line-height: 1.1; letter-spacing: -0.015em; }
.buy-for { margin-top: 6px; color: var(--ink-2); font-size: 15.5px; }
.buy-price { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.buy-price b { font-family: var(--serif); font-weight: 700; font-size: clamp(42px, 4vw, 52px); line-height: 1; letter-spacing: -0.025em; font-variant-numeric: lining-nums; }
.buy-price span { font-size: 14.5px; font-weight: 700; color: var(--ink-2); }
.buy-other { margin-top: 8px; font-size: 13.5px; color: var(--muted); }
.buy-ex-m { display: none; }
.seg.mini label { min-height: 40px; font-size: 13px; }
.buy-who-row { display: grid; grid-template-columns: minmax(0, 1fr) 104px; gap: 8px; align-items: stretch; }
.buy-gender label { min-height: 100%; }
.buy-form .hint { margin-top: 1px; }
.pay-pick.compact .pay-opt { padding: 12px 14px; }
.pay-pick.compact .pay-opt small { font-size: 13px; }
.buy-note summary { display: inline-block; cursor: pointer; font-size: 14px; color: var(--ink-2); text-decoration: underline; text-underline-offset: 4px; list-style: none; }
.buy-note summary::-webkit-details-marker { display: none; }
.buy-note[open] summary { margin-bottom: 8px; }
.is-home .btn.buy-go { min-height: 58px; gap: 10px; font-size: 12.5px; }
.buy-go-price { font-family: var(--body); font-weight: 800; font-size: 15px; letter-spacing: 0; text-transform: none; }
.buy-go-price::before { content: "· "; }
.buy-trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 2px; }
.buy-trust li { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 12.5px; line-height: 1.35; color: var(--ink-2); }
.buy-trust svg { width: 22px; height: 22px; color: var(--ink); }

/* the question, folded under the order */
.buy-ask { margin-top: 48px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.buy-ask summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 0; cursor: pointer; font-weight: 700; font-size: 17px; }
.buy-ask summary::-webkit-details-marker { display: none; }
.buy-ask summary:hover span { text-decoration: underline; text-underline-offset: 5px; }
.buy-ask summary i { position: relative; flex: none; width: 16px; height: 16px; }
.buy-ask summary i::before, .buy-ask summary i::after { content: ""; position: absolute; left: 0; right: 0; top: 7.25px; height: 1.5px; background: var(--ink); transition: transform 0.2s; }
.buy-ask summary i::after { transform: rotate(90deg); }
.buy-ask[open] summary i::after { transform: rotate(0deg); }
.buy-ask-in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 40px; align-items: start; padding-bottom: 28px; }
.buy-ask .ask-direct { margin-top: 0 !important; }

@media (max-width: 1199px) { .buy-stage { grid-template-columns: 230px minmax(0, 1fr); gap: 24px; } }
@media (max-width: 959px) {
  .hs-buy { padding-block: 56px; }
  .buy-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .buy-box { order: -1; }
  .buy-stage, .buy-ex-d { display: none; }
  .buy-after { border-top: 0; padding-top: 0; }
  .buy-top { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 18px; align-items: center; }
  .buy-mini { display: block; }
  .buy-ex-m { display: inline-block; margin-top: 10px; font-size: 13.5px; }
  .buy-ask-in { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 599px) { .buy-box { padding: 20px 16px 18px; } .buy-who-row { grid-template-columns: minmax(0, 1fr) 92px; } .hs .buy-name { font-size: 27px; } .buy-price b { font-size: 38px; } }

/* the small phone next to the price: the example page drifts slowly by */
.mini-phone { display: block; width: 88px; height: 188px; background: #0B0B0B; border-radius: 17px; padding: 4px; box-shadow: 0 0 0 1px #2B2B29 inset, 0 18px 30px -16px rgba(0, 0, 0, 0.55); }
.mini-screen { display: block; position: relative; height: 100%; border-radius: 13px; overflow: hidden; background: var(--bg); }
.mini-screen img { position: absolute; left: 0; top: 0; width: 100%; height: auto; }
@media (prefers-reduced-motion: no-preference) {
  .mini-screen img { animation: miniDrift 26s ease-in-out infinite alternate; }
}
@keyframes miniDrift { 0%, 7% { transform: translateY(0); } 93%, 100% { transform: translateY(calc(-100% + 180px)); } }

/* a button that stays at the bottom of a phone, once the hero is gone */
.sticky-cta { display: none; }
@media (max-width: 859px) {
  .sticky-cta:not([hidden]) { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--bg); border-top: 1px solid var(--frame); box-shadow: 0 -12px 30px -20px rgba(0, 0, 0, 0.45); animation: ctaUp 0.25s ease-out; }
  .sticky-cta span { display: grid; font-size: 13px; line-height: 1.3; color: var(--ink-2); }
  .sticky-cta b { font-size: 14.5px; color: var(--ink); }
  .is-home .sticky-cta .btn { min-height: 46px; padding: 0 16px; flex: none; }
}
@keyframes ctaUp { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .sticky-cta:not([hidden]) { animation: none; } }

/* from an ad: the header has only the logo and the button, nothing to wander off to */
.is-ad .hh-menu { display: none; }
.is-ad .hh-nav { display: flex; position: static; flex-direction: row; border: 0; box-shadow: none; }
.is-ad .hh-nav a:not(.hh-cta) { display: none; }
.is-ad .hh-nav .hh-cta { margin: 0; }
/* on a phone the country picker is left to the footer, or the header grows wider than the screen (0.18.2) */
@media (max-width: 899px) { .is-ad .hh-nav .hh-cc { display: none; } }
@media (max-width: 599px) { .is-ad .hh-nav .hh-cta { padding: 0 14px; font-size: 11px; letter-spacing: 0.08em; } }
@media (max-width: 359px) { .is-ad .hh-nav .hh-cta { padding: 0 10px; letter-spacing: 0.04em; } }

/* ---------- paying in the form (0.7.3): PayPal's buttons right under the terms, then the page opens ---------- */
.buy-go[hidden], .pp-box[hidden] { display: none; }
.pp-box { display: grid; gap: 12px; margin-top: 4px; }
.pp-box.busy { opacity: 0.55; pointer-events: none; }
.pp-h { font-size: 15px; color: var(--ink-2); text-align: center; }
.pp-h b { color: var(--ink); }
.pp-buttons { min-height: 104px; position: relative; z-index: 0; }
.pp-wait { display: grid; place-items: center; height: 104px; font-size: 14px; color: var(--muted); border: 1px dashed var(--line); }
.pp-safe { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 13px; color: var(--muted); text-align: center; }
.pp-safe svg { width: 15px; height: 15px; flex: none; }
.buy-done { gap: 14px; padding: 4px 0; scroll-margin-top: 110px; }
.buy-done h3 { font-family: var(--serif); font-size: 26px; line-height: 1.2; text-wrap: balance; }
.buy-done p { font-size: 16px; }
.buy-done .btn { margin-top: 4px; }
.done-mark { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--ok); color: #FFFFFF; }
.done-mark svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.done-small { font-size: 14px !important; color: var(--muted) !important; }
.pay-slip { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; align-items: start; padding: 16px; border: 1px solid var(--frame); background: var(--bg); }
.pay-slip .pay-dl { margin: 0; }
.pay-slip .pay-dl div { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 10px; padding: 7px 0; font-size: 14.5px; }
.pay-slip .pay-dl div:last-child { border-bottom: 0; }
.pay-slip .pay-dl { border-top: 0; }
.pay-qr { margin: 0; display: grid; gap: 8px; }
.pay-qr canvas { width: 150px; height: 150px; display: block; image-rendering: pixelated; }
.pay-qr figcaption { font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.pay-slip:not(:has(.pay-qr)) { grid-template-columns: minmax(0, 1fr); }
.pay-res .pay-slip { margin-top: 18px; }
@media (max-width: 599px) {
  .pay-slip { grid-template-columns: minmax(0, 1fr); }
  .pay-qr { grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 14px; }
  .pay-qr canvas { width: 120px; height: 120px; }
  .buy-done h3 { font-size: 23px; }
}
.buy-done p b, .buy-done .pay-dl b { font-family: inherit; font-size: inherit; line-height: inherit; }
.pay-slip .pay-dl div { grid-template-columns: 104px minmax(0, 1fr); }
.pay-slip .pay-dl dd { overflow-wrap: normal; word-break: normal; }
.pay-slip .pay-dl dd { white-space: normal; }
.pay-dl dd.nw { white-space: nowrap; }
/* the special price and the gift in the order form (0.7.9) */
.offer-note { margin: 0 0 16px; padding: 14px 16px; background: #0B0B0C; color: #F4F4F2; font-size: 14.5px; line-height: 1.55; }
.offer-note b { color: #FFFFFF; }
.offer-note s { color: #A9A9A6; }
.offer-msg { display: block; margin-top: 8px; font-family: var(--serif); font-style: italic; color: #DADAD6; }
.gift-link { width: 100%; margin: 4px 0 12px; font-size: 14px; }
.gift-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.gift-acts .btn { flex: 1 1 auto; }
/* the country picker (0.8.0): the name of the country, the others under it */
.cc-pick { position: relative; }
.cc-pick summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.cc-pick summary::-webkit-details-marker { display: none; }
.cc-pick summary::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.cc-globe { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; }
.cc-code { font-weight: 600; letter-spacing: 0.06em; }
.cc-name { display: none; }
.cc-list { position: absolute; z-index: 40; right: 0; top: calc(100% + 8px); min-width: 210px; background: #FFFFFF; border: 1px solid var(--line); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12); padding: 6px 0; }
.cc-head { display: block; padding: 8px 16px 6px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.cc-list a { display: flex; justify-content: space-between; gap: 16px; padding: 9px 16px; color: var(--ink); text-decoration: none; font-size: 14px; }
.cc-list a small { color: var(--muted); font-size: 12px; letter-spacing: 0.06em; }
.cc-list a:hover { background: var(--band); }
.cc-list a[aria-current] { font-weight: 700; }
/* in the header the picker is a part of its own, after the login, with a globe: never read together with the menu */
.hh-cc { display: flex; align-items: center; padding: 0 16px; font-size: 14px; color: var(--ink-2); border-left: 1px solid var(--line); }
.hh-cc summary { min-height: 52px; }
.hf-cc .cc-code { display: none; }
.hf-cc .cc-name { display: inline; }
.hf-cc summary { color: inherit; }
.hf-cc .cc-list { bottom: calc(100% + 8px); top: auto; }
@media (max-width: 899px) {
  .hh-cc { flex-direction: column; align-items: stretch; padding: 0 18px; border-left: 0; border-top: 1px solid var(--line); font-size: 15px; }
  .hh-cc summary { display: flex; align-items: center; }
  .hh-cc .cc-list { width: auto; }
  .hh-cc .cc-code { display: none; }
  .hh-cc .cc-name { display: inline; }
  .hh-cc .cc-list { position: static; box-shadow: none; border: 0; padding: 0 0 8px 23px; }
  .hh-cc .cc-head { display: none; }
}


/* the page is made for free, paid before it is shared (0.18.0) */
.buy-free { margin: 2px 0 0; font-size: 14px; line-height: 1.45; color: var(--muted); text-align: center; }